fix(web,api): confirm host mount, reconnect flow, sheet preview, better errors

- mount ConfirmHost in dashboard so delete modals actually render
- GoogleReconnectRequiredError (401 + code) distinguishes expired grant;
  api-client auto-redirects to /signin?reconnect=1 with tailored copy
- ApiError surfaces body.error.message instead of bare "API 500"
- GET /projects/:id/sheets/:id/preview + UI table showing live rows
- remove broken hero video + dead newsletter form

Author: Devansh-365

apps/web/src/app/app/layout.tsx

@@ -2,7 +2,7 @@
 
 import Link from "next/link";
 import { useEffect, useState } from "react";
-import { ToastHost, pushToast } from "@/components/ui";
+import { ConfirmHost, ToastHost, pushToast } from "@/components/ui";
 import { ApiError, getMe, logout } from "@/lib/api-client";
 
 interface User {
@@ -151,6 +151,7 @@ export default function DashboardLayout({
         <div className="px-[80px] py-[48px]">{children}</div>
       </div>
       <ToastHost />
+      <ConfirmHost />
     </main>
   );
 }

apps/web/src/app/app/projects/[projectId]/sheets/[sheetId]/page.tsx

@@ -11,11 +11,13 @@ import {
 } from "@/components/ui";
 import {
   type LedgerStats,
+  type PreviewResult,
   type SchemaSnapshot,
   type TestWriteResult,
   disconnectSheet,
   getLedgerStats,
   getSchema,
+  previewSheet,
   refreshSchema,
   sdkUrl,
   testWrite,
@@ -46,6 +48,9 @@ export default function SheetDetailPage() {
 
   const [schema, setSchema] = useState<SchemaSnapshot | null>(null);
   const [ledger, setLedger] = useState<LedgerStats | null>(null);
+  const [preview, setPreview] = useState<PreviewResult | null>(null);
+  const [previewError, setPreviewError] = useState<string | null>(null);
+  const [previewLoading, setPreviewLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [refreshing, setRefreshing] = useState(false);
   const [submitting, setSubmitting] = useState(false);
@@ -109,6 +114,27 @@ export default function SheetDetailPage() {
     }
   }
 
+  async function loadPreview() {
+    setPreviewLoading(true);
+    setPreviewError(null);
+    try {
+      const result = await previewSheet(projectId, sheetId, 10);
+      setPreview(result);
+    } catch (err) {
+      setPreviewError(err instanceof Error ? err.message : "unknown error");
+    } finally {
+      setPreviewLoading(false);
+    }
+  }
+
+  // Auto-load preview once the schema is available so the row grid shows up
+  // without an extra click.
+  useEffect(() => {
+    if (schema === null) return;
+    loadPreview();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [schema === null ? null : schema.id]);
+
   const downloadUrl = sdkUrl(projectId, sheetId);
 
   return (
@@ -347,6 +373,93 @@ export default function SheetDetailPage() {
         )}
       </section>
 
+      {/* ── Row preview ────────────────────────────────────── */}
+      <section>
+        <div className="flex items-center justify-between mb-4">
+          <h2 className="text-[16px] font-bold">Row preview</h2>
+          <button
+            type="button"
+            onClick={loadPreview}
+            disabled={previewLoading || schema === null}
+            className="rounded px-4 py-2 font-medium border transition-colors disabled:opacity-50"
+            style={{ borderColor: "#3d3838", color: "#b8b2b2" }}
+          >
+            {previewLoading ? "Loading…" : "refresh preview"}
+          </button>
+        </div>
+        <p style={{ color: "#b8b2b2" }} className="text-sm mb-4">
+          First 10 rows read through the API — the same path an API-key client
+          hits. Verifies the whole read loop end-to-end without curl.
+        </p>
+
+        {previewError && (
+          <p style={{ color: "#b8b2b2" }} className="text-sm mb-4">
+            [!] {previewError}
+          </p>
+        )}
+
+        {preview === null && !previewError && (
+          <p style={{ color: "#7f7a7a" }} className="text-sm">
+            [*] loading preview…
+          </p>
+        )}
+
+        {preview !== null && preview.rows.length === 0 && (
+          <p style={{ color: "#7f7a7a" }} className="text-sm">
+            sheet has no data rows yet — use the Test write button above
+          </p>
+        )}
+
+        {preview !== null && preview.rows.length > 0 && (
+          <div
+            className="border rounded overflow-x-auto"
+            style={{ borderColor: "#3d3838", backgroundColor: "#1b1818" }}
+          >
+            <table className="w-full text-xs">
+              <thead>
+                <tr
+                  className="border-b"
+                  style={{ borderColor: "#3d3838" }}
+                >
+                  {preview.columns.map((col) => (
+                    <th
+                      key={col.name}
+                      className="text-left px-4 py-2 font-medium"
+                      style={{ color: "#7f7a7a" }}
+                    >
+                      {col.name}{" "}
+                      <span style={{ color: "#4a4545" }}>: {col.type}</span>
+                    </th>
+                  ))}
+                </tr>
+              </thead>
+              <tbody>
+                {preview.rows.map((row, i) => (
+                  <tr
+                    key={i}
+                    className="border-b last:border-b-0"
+                    style={{ borderColor: "#3d3838" }}
+                  >
+                    {preview.columns.map((col) => {
+                      const v = row[col.name];
+                      return (
+                        <td
+                          key={col.name}
+                          className="px-4 py-2"
+                          style={{ color: v == null ? "#4a4545" : "#b8b2b2" }}
+                        >
+                          {v == null ? "—" : String(v)}
+                        </td>
+                      );
+                    })}
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        )}
+      </section>
+
       {/* ── SDK ────────────────────────────────────────────── */}
       <section>
         <h2 className="text-[16px] font-bold mb-4">Typed TypeScript SDK</h2>

apps/web/src/app/page.tsx

@@ -258,24 +258,6 @@ function HeroSection({ authStatus }: { authStatus: AuthStatus }) {
   );
 }
 
-function VideoSection() {
-  return (
-    <section className="border-b" style={{ borderColor: "#3d3838" }}>
-      <video
-        autoPlay
-        loop
-        muted
-        playsInline
-        poster="/images/sheetforge-poster.png"
-        className="w-full"
-      >
-        <source src="/videos/sheetforge-demo.mp4" type="video/mp4" />
-        Your browser does not support the video tag.
-      </video>
-    </section>
-  );
-}
-
 function FeaturesSection() {
   return (
     <section className="px-[80px] py-[64px] border-b" style={{ borderColor: "#3d3838" }}>
@@ -394,31 +376,6 @@ function ZenSection() {
   );
 }
 
-function NewsletterSection() {
-  return (
-    <section className="px-[80px] py-[64px] border-b" style={{ borderColor: "#3d3838" }}>
-      <h3 className="text-[16px] font-bold text-[#f2eded] mb-3">
-        Join the waitlist for the HN launch
-      </h3>
-      <p className="text-[#b8b2b2] mb-6 leading-[24px]">Get notified when we go live — early access, no spam.</p>
-      <div className="flex gap-3">
-        <input
-          type="email"
-          placeholder="Email"
-          className="border rounded px-4 py-2 bg-transparent text-[#f2eded] placeholder-[#7f7a7a] flex-1 max-w-sm focus:outline-none focus:border-[#7f7a7a] transition-colors"
-          style={{ borderColor: "#3d3838" }}
-        />
-        <button
-          className="rounded px-6 py-2 font-medium transition-opacity hover:opacity-90"
-          style={{ backgroundColor: "#f2eded", color: "#131010" }}
-        >
-          Subscribe
-        </button>
-      </div>
-    </section>
-  );
-}
-
 function Footer() {
   return (
     <footer className="px-[80px] py-4 flex items-center justify-between text-sm text-[#4a4545]">
@@ -449,13 +406,11 @@ export default function Home() {
       >
         <Header authStatus={authStatus} />
         <HeroSection authStatus={authStatus} />
-        <VideoSection />
         <FeaturesSection />
         <StatsSection />
         <PrivacySection />
         <FAQSection />
         <ZenSection />
-        <NewsletterSection />
       </div>
       <div className="mx-auto" style={{ maxWidth: "1080px" }}>
         <Footer />

apps/web/src/app/signin/page.tsx

@@ -7,9 +7,26 @@ import { ApiError, getMe, loginUrl } from "@/lib/api-client";
 
 export default function SignInPage() {
   const [checking, setChecking] = useState(true);
+  const [reconnect, setReconnect] = useState(false);
 
-  // If you already have a live session, bounce straight to the dashboard.
   useEffect(() => {
+    // Reading window.location on mount avoids the useSearchParams Suspense
+    // requirement introduced in Next 15+.
+    setReconnect(
+      new URL(window.location.href).searchParams.get("reconnect") === "1",
+    );
+  }, []);
+
+  // If you already have a live session, bounce straight to the dashboard —
+  // unless we're explicitly in reconnect mode (stale Google grant), in which
+  // case the user needs to re-authorize even with a valid session cookie.
+  useEffect(() => {
+    const isReconnect =
+      new URL(window.location.href).searchParams.get("reconnect") === "1";
+    if (isReconnect) {
+      setChecking(false);
+      return;
+    }
     getMe()
       .then(() => {
         window.location.href = "/app";
@@ -19,7 +36,6 @@ export default function SignInPage() {
           setChecking(false);
           return;
         }
-        // API unreachable or unknown error — let them try the button anyway.
         setChecking(false);
       });
   }, []);
@@ -58,23 +74,40 @@ export default function SignInPage() {
               }}
             >
               <h1 className="text-[28px] font-bold leading-[36px] mb-2">
-                Sign in to sheetforge
+                {reconnect
+                  ? "Re-authorize Google"
+                  : "Sign in to sheetforge"}
               </h1>
-              <p
-                style={{ color: "#b8b2b2" }}
-                className="text-sm mb-8 leading-[20px]"
-              >
-                Connect your Google account to turn any Sheet into a
-                race-condition-safe API.
-              </p>
+              {reconnect ? (
+                <p
+                  style={{ color: "#b8b2b2" }}
+                  className="text-sm mb-8 leading-[20px]"
+                >
+                  [!] Your Google connection expired or was revoked.
+                  Re-authorize below to get your projects back online — nothing
+                  in your sheetforge account is lost.
+                </p>
+              ) : (
+                <p
+                  style={{ color: "#b8b2b2" }}
+                  className="text-sm mb-8 leading-[20px]"
+                >
+                  Connect your Google account to turn any Sheet into a
+                  race-condition-safe API.
+                </p>
+              )}
 
               <a
                 href={loginUrl()}
                 className="flex items-center justify-center gap-3 w-full rounded px-6 py-3 font-medium transition-opacity hover:opacity-90"
                 style={{ backgroundColor: "#f2eded", color: "#131010" }}
               >
                 <GoogleGlyph />
-                {checking ? "Checking session…" : "Sign in with Google"}
+                {checking
+                  ? "Checking session…"
+                  : reconnect
+                    ? "Reconnect Google"
+                    : "Sign in with Google"}
               </a>
 
               <div