From f8b54807cfe9a3dd36b85de476b4e824ebbd688a Mon Sep 17 00:00:00 2001
From: Aiden Bai <aiden.bai05@gmail.com>
Date: Wed, 8 Apr 2026 07:50:41 -0700
Subject: [PATCH] demo: replace social feed with spreadsheet app, update
 overlay and docs

- Replace social feed demo with spreadsheet grid demo app
- Update browser overlay cursor pointer and constants
- Refine website demo recording scripts and constants
- Update CLI README, SKILL.md docs, and browser testing rules
- Update infer-agent provider detection
---
 .agents/skills/expect/SKILL.md                |  12 +-
 .cursor/rules/browser-testing.mdc             |  11 +-
 .mcp.json                                     |   5 +-
 apps/cli/README.md                            |  61 ++--
 apps/demo/index.html                          |   2 +-
 apps/demo/src/app.tsx                         |  16 +-
 apps/demo/src/components/avatar.tsx           |  41 ---
 apps/demo/src/components/compose-box.tsx      |  49 ---
 apps/demo/src/components/layout.tsx           | 111 +++----
 apps/demo/src/components/post-card.tsx        | 102 ------
 apps/demo/src/components/reply-thread.tsx     |  85 -----
 apps/demo/src/components/spreadsheet-grid.tsx | 296 ++++++++++++++++++
 apps/demo/src/error-boundary.tsx              |  16 +-
 apps/demo/src/index.css                       |  86 ++---
 apps/demo/src/pages/dashboard.tsx             |   9 +
 apps/demo/src/pages/feed.tsx                  |  19 --
 apps/demo/src/pages/login.tsx                 |  90 ------
 apps/demo/src/pages/post-detail.tsx           |  99 ------
 apps/demo/src/pages/profile.tsx               |  63 ----
 apps/demo/src/seed.ts                         | 172 +++++-----
 apps/demo/src/store.ts                        | 163 +++++-----
 apps/demo/src/types.ts                        |  25 +-
 apps/website/lib/demo-events.ts               |  20 +-
 apps/website/lib/demo-trace.ts                |   8 +-
 apps/website/lib/demo/constants.ts            |  36 +--
 apps/website/scripts/record-demo.ts           |  90 +++---
 .../overlay/components/cursor-pointer.tsx     |  12 +-
 .../browser/src/runtime/overlay/index.tsx     |  37 ++-
 .../src/runtime/overlay/lib/constants.ts      |   8 +-
 packages/expect-skill/SKILL.md                |  10 +
 packages/shared/src/infer-agent.ts            |  19 +-
 31 files changed, 735 insertions(+), 1038 deletions(-)
 delete mode 100644 apps/demo/src/components/avatar.tsx
 delete mode 100644 apps/demo/src/components/compose-box.tsx
 delete mode 100644 apps/demo/src/components/post-card.tsx
 delete mode 100644 apps/demo/src/components/reply-thread.tsx
 create mode 100644 apps/demo/src/components/spreadsheet-grid.tsx
 create mode 100644 apps/demo/src/pages/dashboard.tsx
 delete mode 100644 apps/demo/src/pages/feed.tsx
 delete mode 100644 apps/demo/src/pages/login.tsx
 delete mode 100644 apps/demo/src/pages/post-detail.tsx
 delete mode 100644 apps/demo/src/pages/profile.tsx

diff --git a/.agents/skills/expect/SKILL.md b/.agents/skills/expect/SKILL.md
index 0332abe5d..6eb79c627 100644
--- a/.agents/skills/expect/SKILL.md
+++ b/.agents/skills/expect/SKILL.md
@@ -4,7 +4,7 @@ description: "Use when editing .tsx/.jsx/.css/.html, React components, pages, ro
 license: MIT
 metadata:
   author: millionco
-  version: "2.3.0"
+  version: "2.4.0"
 ---
 
 # Expect
@@ -13,6 +13,14 @@ You verify code changes in a real browser before claiming they work. No browser
 
 Use the expect MCP tools (`open`, `playwright`, `screenshot`, etc.) for all browser interactions. Do not use raw browser tools (Playwright MCP, chrome tools, etc.) unless the user explicitly asks.
 
+## Subagent Usage
+
+Browser verification is best run in a subagent (Task tool) or background shell so the main thread stays free for code edits. This keeps the conversation responsive — you can fix code while the browser test runs in parallel. Strongly prefer launching a subagent for browser work, especially when the test involves multiple steps or long interactions. If the test is truly trivial (single screenshot check), inline is acceptable.
+
+## Resuming Browser State
+
+Before opening a new browser, check if one is already running. Use `browser_tabs` (action `list`) or the expect `screenshot` tool to see if a session is still active. If a tab is already open at the target URL, reuse it — don't close and reopen. When re-verifying after a code fix, prefer navigating or refreshing the existing session over starting from scratch.
+
 ## Compounding
 
 The `playwright` tool takes a `code` string with `ref()` to resolve snapshot refs to Locators. One call can do an entire interaction — fills, clicks, AND data collection. Use that.
@@ -56,6 +64,8 @@ Use `return` to collect data. Response: `{ result: <value>, resultFile: "<tmp pa
 
 ## Rationalizations
 
+- "I'll run the browser test inline, it's quick" — Probably not. Launch a subagent so you can keep editing code in parallel. Only skip the subagent for a single screenshot sanity check.
+- "I'll open a fresh browser to re-test" — Check for an existing session first. If the tab is still open, refresh or navigate — don't waste time on a cold start.
 - "I'll make one `playwright` call per action" — No. Whole sequence in one call.
 - "I need a snapshot between fills" — No. Fills don't change DOM. Batch them.
 - "Let me snapshot to see what changed" — Did the page navigate or submit? No? Use `snapshotAfter=true` on the action that does.
diff --git a/.cursor/rules/browser-testing.mdc b/.cursor/rules/browser-testing.mdc
index cc3c30bb5..78bfc2829 100644
--- a/.cursor/rules/browser-testing.mdc
+++ b/.cursor/rules/browser-testing.mdc
@@ -11,8 +11,9 @@ When using the `cursor-ide-browser` MCP for testing or verification, follow this
 ## Pre-flight
 
 1. Use `browser_tabs` with action `list` to check for existing tabs
-2. If a tab exists for the target URL, `browser_lock` it before interacting
+2. If a tab already exists for the target URL (or a closely related URL), reuse it — `browser_lock` it and continue from the current page state instead of navigating from scratch
 3. If no tab exists, `browser_navigate` first, then `browser_lock`
+4. When re-verifying after a code change, refresh the existing tab rather than closing and reopening — this preserves scroll position, form state, and avoids cold-start overhead
 
 ## Accessibility Quick Audit
 
@@ -53,6 +54,14 @@ Reference the performance skill at `.agents/skills/performance/SKILL.md` and the
 1. `browser_console_messages` — look for errors, warnings, deprecation notices
 2. `browser_network_requests` — check for failed requests, mixed content, slow responses
 
+## Session Persistence
+
+When you expect to re-verify after code fixes, keep the browser session alive between turns:
+
+1. Do NOT call `close` or `browser_lock unlock` if you plan to revisit the page
+2. On the next turn, `browser_tabs list` will show the existing tab — reuse it
+3. Only close/unlock when ALL verification is complete and no more iterations are expected
+
 ## Unlock When Done
 
 Always call `browser_lock` with action `unlock` when finished with ALL browser operations for the turn.
diff --git a/.mcp.json b/.mcp.json
index 527be8ddd..da672879f 100644
--- a/.mcp.json
+++ b/.mcp.json
@@ -1,10 +1,9 @@
 {
   "mcpServers": {
     "expect": {
-      "command": "npx",
+      "command": "node",
       "args": [
-        "-y",
-        "expect-cli@latest",
+        "/Users/aidenybai/Developer/expect/apps/cli/dist/index.js",
         "mcp"
       ]
     }
diff --git a/apps/cli/README.md b/apps/cli/README.md
index e7dd45a0f..281f4b5db 100644
--- a/apps/cli/README.md
+++ b/apps/cli/README.md
@@ -42,39 +42,38 @@ Coming soon. Email [aiden@million.dev](mailto:aiden@million.dev) if you have que
 
 ## Options
 
-| Flag                          | Description                                                                                  | Default     |
-| ----------------------------- | -------------------------------------------------------------------------------------------- | ----------- |
-| `-m, --message <instruction>` | Natural language instruction for what to test                                                | -           |
-| `-f, --flow <slug>`           | Reuse a saved flow by its slug                                                               | -           |
-| `-y, --yes`                   | Run immediately without confirmation                                                         | -           |
-| `-a, --agent <provider>`      | Agent provider (`claude`, `codex`, `copilot`, `gemini`, `cursor`, `opencode`, `droid`, `pi`) | auto-detect |
-| `-t, --target <target>`       | What to test: `unstaged`, `branch`, or `changes`                                             | `changes`   |
-| `-u, --url <urls...>`         | Base URL(s) for the dev server (skips port picker)                                           | -           |
-| `--browser-mode <mode>`       | Browser mode: `headed` or `headless`                                                         | `headed`    |
-| `--cdp <url>`                 | Connect to an existing Chrome via CDP WebSocket URL                                          | -           |
-| `--profile <name>`            | Reuse a Chrome profile by name (e.g. Default)                                                | -           |
-| `--no-cookies`                | Skip system browser cookie extraction                                                        | -           |
-| `--ci`                        | Force CI mode: headless, no cookies, auto-yes, 30-min timeout                                | -           |
-| `--timeout <ms>`              | Execution timeout in milliseconds                                                            | -           |
-| `--output <format>`           | Output format: `text` or `json`                                                              | `text`      |
-| `--verbose`                   | Enable verbose logging                                                                       | -           |
-| `-v, --version`               | Print version                                                                                | -           |
-| `-h, --help`                  | Display help                                                                                 | -           |
+| Flag                          | Description                                                                            | Default     |
+| ----------------------------- | -------------------------------------------------------------------------------------- | ----------- |
+| `-m, --message <instruction>` | Natural language instruction for what to test                                          | -           |
+| `-f, --flow <slug>`           | Reuse a saved flow by its slug                                                         | -           |
+| `-y, --yes`                   | Run immediately without confirmation                                                   | -           |
+| `-a, --agent <provider>`      | Agent provider (`claude`, `codex`, `copilot`, `gemini`, `cursor`, `opencode`, `droid`) | auto-detect |
+| `-t, --target <target>`       | What to test: `unstaged`, `branch`, or `changes`                                       | `changes`   |
+| `-u, --url <urls...>`         | Base URL(s) for the dev server (skips port picker)                                     | -           |
+| `--browser-mode <mode>`       | Browser mode: `headed` or `headless`                                                   | `headed`    |
+| `--cdp <url>`                 | Connect to an existing Chrome via CDP WebSocket URL                                    | -           |
+| `--profile <name>`            | Reuse a Chrome profile by name (e.g. Default)                                          | -           |
+| `--no-cookies`                | Skip system browser cookie extraction                                                  | -           |
+| `--ci`                        | Force CI mode: headless, no cookies, auto-yes, 30-min timeout                          | -           |
+| `--timeout <ms>`              | Execution timeout in milliseconds                                                      | -           |
+| `--output <format>`           | Output format: `text` or `json`                                                        | `text`      |
+| `--verbose`                   | Enable verbose logging                                                                 | -           |
+| `-v, --version`               | Print version                                                                          | -           |
+| `-h, --help`                  | Display help                                                                           | -           |
 
 ## Supported Agents
 
 Expect works with the following coding agents. It auto-detects which agents are installed on your `PATH`. If multiple are available, it defaults to the first one found. Use `-a <provider>` to pick a specific agent.
 
-| Agent                                                         | Flag          | Install                                        |
-| ------------------------------------------------------------- | ------------- | ---------------------------------------------- |
-| [Claude Code](https://docs.anthropic.com/en/docs/claude-code) | `-a claude`   | `npm install -g @anthropic-ai/claude-code`     |
-| [Codex](https://github.com/openai/codex#readme)               | `-a codex`    | `npm install -g @openai/codex`                 |
-| [GitHub Copilot](https://github.com/features/copilot/cli)     | `-a copilot`  | `npm install -g @github/copilot`               |
-| [Gemini CLI](https://github.com/google-gemini/gemini-cli)     | `-a gemini`   | `npm install -g @google/gemini-cli`            |
-| [Cursor](https://cursor.com)                                  | `-a cursor`   | [cursor.com](https://cursor.com)               |
-| [OpenCode](https://opencode.ai)                               | `-a opencode` | `npm install -g opencode-ai`                   |
-| [Factory Droid](https://factory.ai)                           | `-a droid`    | `npm install -g droid`                         |
-| [Pi](https://github.com/mariozechner/pi-coding-agent)         | `-a pi`       | `npm install -g @mariozechner/pi-coding-agent` |
+| Agent                                                         | Flag          | Install                                    |
+| ------------------------------------------------------------- | ------------- | ------------------------------------------ |
+| [Claude Code](https://docs.anthropic.com/en/docs/claude-code) | `-a claude`   | `npm install -g @anthropic-ai/claude-code` |
+| [Codex](https://github.com/openai/codex#readme)               | `-a codex`    | `npm install -g @openai/codex`             |
+| [GitHub Copilot](https://github.com/features/copilot/cli)     | `-a copilot`  | `npm install -g @github/copilot`           |
+| [Gemini CLI](https://github.com/google-gemini/gemini-cli)     | `-a gemini`   | `npm install -g @google/gemini-cli`        |
+| [Cursor](https://cursor.com)                                  | `-a cursor`   | [cursor.com](https://cursor.com)           |
+| [OpenCode](https://opencode.ai)                               | `-a opencode` | `npm install -g opencode-ai`               |
+| [Factory Droid](https://factory.ai)                           | `-a droid`    | `npm install -g droid`                     |
 
 ## Resources & Contributing Back
 
@@ -86,6 +85,12 @@ We expect all contributors to abide by the terms of our [Code of Conduct](https:
 
 **[→ Start contributing on GitHub](https://github.com/millionco/expect/blob/main/CONTRIBUTING.md)**
 
+### Acknowledgements
+
+Expect wouldn't exist without the ideas and work of others:
+
+- [**dev-browser**](https://github.com/SawyerHood/dev-browser) by Sawyer Hood — the Playwright-first ("bitter lesson") approach that inspired Expect's core design: give the agent real browser APIs instead of screenshots and coordinates.
+
 ### License
 
 FSL-1.1-MIT © [Million Software, Inc.](https://million.dev)
diff --git a/apps/demo/index.html b/apps/demo/index.html
index 0449baaf5..b780811b6 100644
--- a/apps/demo/index.html
+++ b/apps/demo/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Chirp — Demo</title>
+    <title>Sheets</title>
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
   </head>
   <body>
diff --git a/apps/demo/src/app.tsx b/apps/demo/src/app.tsx
index cf3091e4d..63646f2f7 100644
--- a/apps/demo/src/app.tsx
+++ b/apps/demo/src/app.tsx
@@ -1,10 +1,22 @@
+import { useState } from "react";
+import { BrowserRouter, Routes, Route } from "react-router-dom";
 import { ErrorBoundary } from "./error-boundary";
-import { LoginPage } from "./pages/login";
+import { Layout } from "./components/layout";
+import { DashboardPage } from "./pages/dashboard";
 
 export const App = () => {
+  const [, setTick] = useState(0);
+  const forceUpdate = () => setTick((previous) => previous + 1);
+
   return (
     <ErrorBoundary>
-      <LoginPage />
+      <BrowserRouter>
+        <Routes>
+          <Route element={<Layout />}>
+            <Route path="/" element={<DashboardPage onUpdate={forceUpdate} />} />
+          </Route>
+        </Routes>
+      </BrowserRouter>
     </ErrorBoundary>
   );
 };
diff --git a/apps/demo/src/components/avatar.tsx b/apps/demo/src/components/avatar.tsx
deleted file mode 100644
index 18c6d40b3..000000000
--- a/apps/demo/src/components/avatar.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import { Avatar as ShadAvatar, AvatarFallback } from "@/components/ui/avatar";
-import { cn } from "@/lib/utils";
-
-interface UserAvatarProps {
-  name: string;
-  color: string;
-  size?: "sm" | "md" | "lg";
-  className?: string;
-}
-
-const SIZES = {
-  sm: "size-8",
-  md: "size-10",
-  lg: "size-20",
-};
-
-const TEXT_SIZES = {
-  sm: "text-xs",
-  md: "text-sm",
-  lg: "text-2xl",
-};
-
-export const UserAvatar = ({ name, color, size = "md", className }: UserAvatarProps) => {
-  const initials = name
-    .split(" ")
-    .map((word) => word[0])
-    .join("")
-    .toUpperCase()
-    .slice(0, 2);
-
-  return (
-    <ShadAvatar className={cn(SIZES[size], className)}>
-      <AvatarFallback
-        className={cn("text-white font-bold", TEXT_SIZES[size])}
-        style={{ backgroundColor: color }}
-      >
-        {initials}
-      </AvatarFallback>
-    </ShadAvatar>
-  );
-};
diff --git a/apps/demo/src/components/compose-box.tsx b/apps/demo/src/components/compose-box.tsx
deleted file mode 100644
index 4f22b0387..000000000
--- a/apps/demo/src/components/compose-box.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import { useState } from "react";
-import { store } from "@/store";
-import { UserAvatar } from "./avatar";
-import { Button } from "@/components/ui/button";
-import { Textarea } from "@/components/ui/textarea";
-import { Separator } from "@/components/ui/separator";
-
-export const ComposeBox = ({ onUpdate }: { onUpdate: () => void }) => {
-  const [text, setText] = useState("");
-  const currentUser = store.getCurrentUser();
-
-  if (!currentUser) return null;
-
-  const handleSubmit = () => {
-    if (!text.trim()) return;
-    store.createPost(text.trim());
-    setText("");
-    onUpdate();
-  };
-
-  const handleKeyDown = (event: React.KeyboardEvent) => {
-    if (event.key === "Enter" && (event.metaKey || event.ctrlKey)) {
-      handleSubmit();
-    }
-  };
-
-  return (
-    <>
-      <div className="flex gap-3 p-4">
-        <UserAvatar name={currentUser.name} color={currentUser.color} />
-        <div className="flex-1">
-          <Textarea
-            value={text}
-            onChange={(event) => setText(event.target.value)}
-            onKeyDown={handleKeyDown}
-            placeholder="What's happening?"
-            className="border-none shadow-none text-lg min-h-[60px] resize-none focus-visible:ring-0 px-0"
-          />
-          <div className="flex justify-end pt-2">
-            <Button onClick={handleSubmit} disabled={!text.trim()} className="rounded-full px-5">
-              Post
-            </Button>
-          </div>
-        </div>
-      </div>
-      <Separator />
-    </>
-  );
-};
diff --git a/apps/demo/src/components/layout.tsx b/apps/demo/src/components/layout.tsx
index 5e262cf29..23e4bf42a 100644
--- a/apps/demo/src/components/layout.tsx
+++ b/apps/demo/src/components/layout.tsx
@@ -1,78 +1,59 @@
 import { Link, useLocation, Outlet } from "react-router-dom";
-import { Home, User, LogOut, LogIn } from "lucide-react";
-import { store } from "@/store";
-import { Button } from "@/components/ui/button";
-import { Separator } from "@/components/ui/separator";
 import { cn } from "@/lib/utils";
 
-const NAV_ITEMS = [
-  { path: "/", label: "Home", icon: Home },
-  { path: "/profile", label: "Profile", icon: User },
-];
+const NAV_ITEMS = [{ path: "/", label: "Sheet" }];
 
-export const Layout = ({ onUpdate }: { onUpdate: () => void }) => {
+export const Layout = () => {
   const location = useLocation();
-  const currentUser = store.getCurrentUser();
 
   return (
-    <div className="flex justify-center min-h-screen">
-      <nav className="w-60 p-5 border-r border-border sticky top-0 h-screen flex flex-col">
-        <div className="text-3xl px-3 py-2 mb-2">🐦</div>
-        {NAV_ITEMS.map((item) => {
-          const profilePath = currentUser ? `/profile/${currentUser.handle}` : "/profile";
-          const href = item.path === "/profile" ? profilePath : item.path;
-          const isActive =
-            item.path === "/" ? location.pathname === "/" : location.pathname.startsWith(item.path);
-          const Icon = item.icon;
-
-          return (
-            <Button
-              key={item.path}
-              variant="ghost"
-              asChild
-              className={cn(
-                "justify-start gap-4 rounded-full text-lg h-auto py-3 px-4",
-                isActive && "font-bold",
-              )}
+    <div className="min-h-screen bg-white flex flex-col">
+      <header className="border-b border-zinc-200 bg-emerald-700 sticky top-0 z-20">
+        <div className="px-4 flex items-center h-14">
+          <div className="flex items-center gap-2 mr-8">
+            <svg
+              className="size-7 text-white"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
             >
-              <Link to={currentUser ? href : "/login"}>
-                <Icon className="size-6" />
-                <span>{item.label}</span>
-              </Link>
-            </Button>
-          );
-        })}
-        <Separator className="my-2" />
-        {currentUser && (
-          <Button
-            variant="ghost"
-            onClick={() => {
-              store.logout();
-              onUpdate();
-            }}
-            className="justify-start gap-4 rounded-full text-lg h-auto py-3 px-4"
-          >
-            <LogOut className="size-6" />
-            <span>Logout</span>
-          </Button>
-        )}
-        {!currentUser && (
-          <Button
-            variant="ghost"
-            asChild
-            className="justify-start gap-4 rounded-full text-lg h-auto py-3 px-4"
-          >
-            <Link to="/login">
-              <LogIn className="size-6" />
-              <span>Login</span>
-            </Link>
-          </Button>
-        )}
-      </nav>
-      <main className="w-[600px] border-r border-border">
+              <rect x="3" y="3" width="18" height="18" rx="2" />
+              <line x1="3" y1="9" x2="21" y2="9" />
+              <line x1="3" y1="15" x2="21" y2="15" />
+              <line x1="9" y1="3" x2="9" y2="21" />
+              <line x1="15" y1="3" x2="15" y2="21" />
+            </svg>
+            <span className="font-bold text-white text-lg tracking-tight">Sheets</span>
+          </div>
+          <nav className="flex gap-1">
+            {NAV_ITEMS.map((item) => {
+              const isActive =
+                item.path === "/"
+                  ? location.pathname === "/"
+                  : location.pathname.startsWith(item.path);
+
+              return (
+                <Link
+                  key={item.path}
+                  to={item.path}
+                  className={cn(
+                    "px-4 py-1.5 text-sm font-medium rounded transition-colors no-underline",
+                    isActive
+                      ? "bg-white/20 text-white"
+                      : "text-emerald-200 hover:text-white hover:bg-white/10",
+                  )}
+                >
+                  {item.label}
+                </Link>
+              );
+            })}
+          </nav>
+        </div>
+      </header>
+      <main className="flex-1 flex flex-col">
         <Outlet />
       </main>
-      <aside className="w-60" />
     </div>
   );
 };
diff --git a/apps/demo/src/components/post-card.tsx b/apps/demo/src/components/post-card.tsx
deleted file mode 100644
index 8787c7b6a..000000000
--- a/apps/demo/src/components/post-card.tsx
+++ /dev/null
@@ -1,102 +0,0 @@
-import { Link } from "react-router-dom";
-import { Heart, MessageCircle, Repeat2, X } from "lucide-react";
-import type { Post } from "@/types";
-import { store } from "@/store";
-import { UserAvatar } from "./avatar";
-import { Button } from "@/components/ui/button";
-import { cn } from "@/lib/utils";
-
-const formatTime = (timestamp: number) => {
-  const seconds = Math.floor((Date.now() - timestamp) / 1000);
-  if (seconds < 60) return `${seconds}s`;
-  const minutes = Math.floor(seconds / 60);
-  if (minutes < 60) return `${minutes}m`;
-  const hoursAgo = Math.floor(minutes / 60);
-  if (hoursAgo < 24) return `${hoursAgo}h`;
-  return `${Math.floor(hoursAgo / 24)}d`;
-};
-
-interface PostCardProps {
-  post: Post;
-  onUpdate: () => void;
-}
-
-export const PostCard = ({ post, onUpdate }: PostCardProps) => {
-  const author = store.getUser(post.authorId);
-  const currentUser = store.getCurrentUser();
-  const replies = store.getReplies(post.id);
-  const isLiked = currentUser ? post.likes.includes(currentUser.id) : false;
-  const isOwn = currentUser?.id === post.authorId;
-
-  if (!author) return null;
-
-  const handleLike = (event: React.MouseEvent) => {
-    event.preventDefault();
-    event.stopPropagation();
-    store.toggleLike(post.id);
-    onUpdate();
-  };
-
-  const handleDelete = (event: React.MouseEvent) => {
-    event.preventDefault();
-    event.stopPropagation();
-    store.deletePost(post.id);
-    onUpdate();
-  };
-
-  return (
-    <Link
-      to={`/post/${post.id}`}
-      className="flex gap-3 p-4 border-b border-border no-underline text-foreground hover:bg-accent transition-colors"
-    >
-      <Link to={`/profile/${author.handle}`} onClick={(event) => event.stopPropagation()}>
-        <UserAvatar name={author.name} color={author.color} />
-      </Link>
-      <div className="flex-1 min-w-0">
-        <div className="flex items-center gap-1">
-          <Link
-            to={`/profile/${author.handle}`}
-            onClick={(event) => event.stopPropagation()}
-            className="font-bold text-foreground no-underline hover:underline"
-          >
-            {author.name}
-          </Link>
-          <span className="text-muted-foreground">@{author.handle}</span>
-          <span className="text-muted-foreground">·</span>
-          <span className="text-muted-foreground">{formatTime(post.createdAt)}</span>
-          {isOwn && (
-            <Button
-              variant="ghost"
-              size="icon-xs"
-              onClick={handleDelete}
-              className="ml-auto text-muted-foreground hover:text-destructive"
-            >
-              <X className="size-4" />
-            </Button>
-          )}
-        </div>
-        <p className="my-1 mb-3 text-foreground leading-relaxed text-[15px]">{post.content}</p>
-        <div className="flex gap-12 text-muted-foreground text-[13px]">
-          <span className="flex items-center gap-1.5 hover:text-primary transition-colors">
-            <MessageCircle className="size-4" />
-            {replies.length}
-          </span>
-          <span className="flex items-center gap-1.5 hover:text-green-500 transition-colors">
-            <Repeat2 className="size-4" />
-            {post.repostCount}
-          </span>
-          <button
-            onClick={handleLike}
-            className={cn(
-              "flex items-center gap-1.5 bg-transparent border-none cursor-pointer text-[13px] p-0 transition-colors",
-              isLiked ? "text-[#f91880]" : "text-muted-foreground hover:text-[#f91880]",
-            )}
-          >
-            <Heart className={cn("size-4", isLiked && "fill-current")} />
-            {post.likes.length}
-          </button>
-        </div>
-      </div>
-    </Link>
-  );
-};
diff --git a/apps/demo/src/components/reply-thread.tsx b/apps/demo/src/components/reply-thread.tsx
deleted file mode 100644
index 65d9da3ec..000000000
--- a/apps/demo/src/components/reply-thread.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-import { useState } from "react";
-import type { Reply } from "@/types";
-import { store } from "@/store";
-import { UserAvatar } from "./avatar";
-import { Button } from "@/components/ui/button";
-import { Textarea } from "@/components/ui/textarea";
-
-const formatTime = (timestamp: number) => {
-  const seconds = Math.floor((Date.now() - timestamp) / 1000);
-  if (seconds < 60) return `${seconds}s`;
-  const minutes = Math.floor(seconds / 60);
-  if (minutes < 60) return `${minutes}m`;
-  const hoursAgo = Math.floor(minutes / 60);
-  if (hoursAgo < 24) return `${hoursAgo}h`;
-  return `${Math.floor(hoursAgo / 24)}d`;
-};
-
-interface ReplyThreadProps {
-  postId: string;
-  onUpdate: () => void;
-}
-
-export const ReplyThread = ({ postId, onUpdate }: ReplyThreadProps) => {
-  const [replyText, setReplyText] = useState("");
-  const replies = store.getReplies(postId);
-  const currentUser = store.getCurrentUser();
-
-  const handleReply = () => {
-    if (!replyText.trim()) return;
-    store.addReply(postId, replyText.trim());
-    setReplyText("");
-    onUpdate();
-  };
-
-  return (
-    <div>
-      {currentUser && (
-        <div className="flex gap-3 p-4 border-b border-border">
-          <UserAvatar name={currentUser.name} color={currentUser.color} size="sm" />
-          <div className="flex-1">
-            <Textarea
-              value={replyText}
-              onChange={(event) => setReplyText(event.target.value)}
-              placeholder="Post your reply"
-              className="border-none shadow-none text-[15px] min-h-[40px] resize-none focus-visible:ring-0 px-0"
-            />
-            <div className="flex justify-end">
-              <Button
-                onClick={handleReply}
-                disabled={!replyText.trim()}
-                size="sm"
-                className="rounded-full"
-              >
-                Reply
-              </Button>
-            </div>
-          </div>
-        </div>
-      )}
-      {replies.map((reply) => (
-        <ReplyItem key={reply.id} reply={reply} />
-      ))}
-    </div>
-  );
-};
-
-const ReplyItem = ({ reply }: { reply: Reply }) => {
-  const author = store.getUser(reply.authorId);
-  if (!author) return null;
-
-  return (
-    <div className="flex gap-3 p-4 border-b border-border">
-      <UserAvatar name={author.name} color={author.color} size="sm" />
-      <div>
-        <div className="flex items-center gap-1">
-          <span className="font-bold text-foreground text-sm">{author.name}</span>
-          <span className="text-muted-foreground text-sm">@{author.handle}</span>
-          <span className="text-muted-foreground text-sm">·</span>
-          <span className="text-muted-foreground text-sm">{formatTime(reply.createdAt)}</span>
-        </div>
-        <p className="mt-1 text-foreground text-sm leading-relaxed">{reply.content}</p>
-      </div>
-    </div>
-  );
-};
diff --git a/apps/demo/src/components/spreadsheet-grid.tsx b/apps/demo/src/components/spreadsheet-grid.tsx
new file mode 100644
index 000000000..321e88746
--- /dev/null
+++ b/apps/demo/src/components/spreadsheet-grid.tsx
@@ -0,0 +1,296 @@
+import { useState } from "react";
+import { store } from "@/store";
+
+const CELL_HEIGHT = 48;
+const CELL_WIDTH = 200;
+const ROW_HEADER_WIDTH = 64;
+
+const parseCellId = (cellId: string) => {
+  const col = cellId.charCodeAt(0) - 65;
+  const row = parseInt(cellId.slice(1), 10);
+  return { col, row };
+};
+
+const isCellInRange = (cellId: string, anchor: string, end: string) => {
+  const { col: cellCol, row: cellRow } = parseCellId(cellId);
+  const { col: anchorCol, row: anchorRow } = parseCellId(anchor);
+  const { col: endCol, row: endRow } = parseCellId(end);
+
+  const minCol = Math.min(anchorCol, endCol);
+  const maxCol = Math.max(anchorCol, endCol);
+  const minRow = Math.min(anchorRow, endRow);
+  const maxRow = Math.max(anchorRow, endRow);
+
+  return cellCol >= minCol && cellCol <= maxCol && cellRow >= minRow && cellRow <= maxRow;
+};
+
+export const SpreadsheetGrid = ({ onUpdate }: { onUpdate: () => void }) => {
+  const snapshot = store.getSnapshot();
+  const selectedCell = snapshot.selectedCell;
+  const [editingCell, setEditingCell] = useState<string | undefined>(undefined);
+  const [editValue, setEditValue] = useState("");
+  const [dragAnchor, setDragAnchor] = useState<string | undefined>(undefined);
+  const [dragEnd, setDragEnd] = useState<string | undefined>(undefined);
+  const isDragging = dragAnchor !== undefined;
+
+  const startEditing = (cellId: string) => {
+    setEditingCell(cellId);
+    setEditValue(store.getCellRaw(cellId));
+  };
+
+  const commitEdit = () => {
+    if (editingCell) {
+      store.setCell(editingCell, editValue);
+      setEditingCell(undefined);
+      onUpdate();
+    }
+  };
+
+  const handleCellDoubleClick = (cellId: string) => {
+    startEditing(cellId);
+  };
+
+  const handleMouseDown = (cellId: string) => {
+    if (editingCell) commitEdit();
+    setDragAnchor(cellId);
+    setDragEnd(cellId);
+    store.selectCell(cellId);
+    onUpdate();
+  };
+
+  const handleMouseEnter = (cellId: string) => {
+    if (isDragging) {
+      setDragEnd(cellId);
+    }
+  };
+
+  const handleMouseUp = () => {
+    setDragAnchor(undefined);
+    setDragEnd(undefined);
+  };
+
+  const handleKeyDown = (event: React.KeyboardEvent) => {
+    if (event.key === "Enter") {
+      if (editingCell) {
+        commitEdit();
+        const { col, row } = parseSelected();
+        const nextCell = `${store.colLetter(col)}${row + 1}`;
+        store.selectCell(nextCell);
+        onUpdate();
+      } else {
+        startEditing(selectedCell);
+      }
+    } else if (event.key === "Escape") {
+      setEditingCell(undefined);
+    } else if (event.key === "Tab") {
+      event.preventDefault();
+      if (editingCell) commitEdit();
+      const { col, row } = parseSelected();
+      const nextCol = Math.min(col + 1, store.COL_COUNT - 1);
+      store.selectCell(`${store.colLetter(nextCol)}${row}`);
+      onUpdate();
+    } else if (!editingCell && event.key === "ArrowDown") {
+      event.preventDefault();
+      const { col, row } = parseSelected();
+      const nextRow = Math.min(row + 1, store.ROW_COUNT);
+      store.selectCell(`${store.colLetter(col)}${nextRow}`);
+      onUpdate();
+    } else if (!editingCell && event.key === "ArrowUp") {
+      event.preventDefault();
+      const { col, row } = parseSelected();
+      const nextRow = Math.max(row - 1, 1);
+      store.selectCell(`${store.colLetter(col)}${nextRow}`);
+      onUpdate();
+    } else if (!editingCell && event.key === "ArrowRight") {
+      event.preventDefault();
+      const { col, row } = parseSelected();
+      const nextCol = Math.min(col + 1, store.COL_COUNT - 1);
+      store.selectCell(`${store.colLetter(nextCol)}${row}`);
+      onUpdate();
+    } else if (!editingCell && event.key === "ArrowLeft") {
+      event.preventDefault();
+      const { col, row } = parseSelected();
+      const nextCol = Math.max(col - 1, 0);
+      store.selectCell(`${store.colLetter(nextCol)}${row}`);
+      onUpdate();
+    } else if (!editingCell && event.key === "Delete") {
+      store.setCell(selectedCell, "");
+      onUpdate();
+    } else if (!editingCell && event.key.length === 1 && !event.metaKey && !event.ctrlKey) {
+      startEditing(selectedCell);
+      setEditValue(event.key);
+    }
+  };
+
+  const parseSelected = () => {
+    const col = selectedCell.charCodeAt(0) - 65;
+    const row = parseInt(selectedCell.slice(1), 10);
+    return { col, row };
+  };
+
+  const isHeaderRow = (row: number) => row === 1;
+
+  const rangeLabel =
+    dragAnchor && dragEnd && dragAnchor !== dragEnd ? `${dragAnchor}:${dragEnd}` : selectedCell;
+
+  return (
+    <div className="flex flex-col h-full" onMouseUp={handleMouseUp}>
+      <div className="flex items-center border-b border-zinc-300 bg-white h-11 shrink-0">
+        <div className="w-28 px-2 py-1 border-r border-zinc-300 text-lg font-medium text-zinc-700 bg-zinc-50 h-full flex items-center">
+          {rangeLabel}
+        </div>
+        <div className="flex-1 px-3 flex items-center h-full">
+          <input
+            value={editingCell === selectedCell ? editValue : store.getCellRaw(selectedCell)}
+            onChange={(event) => {
+              if (editingCell === selectedCell) {
+                setEditValue(event.target.value);
+              } else {
+                startEditing(selectedCell);
+                setEditValue(event.target.value);
+              }
+            }}
+            onBlur={commitEdit}
+            onKeyDown={(event) => {
+              if (event.key === "Enter") commitEdit();
+            }}
+            className="w-full text-lg text-zinc-800 bg-transparent border-0 outline-none"
+          />
+        </div>
+      </div>
+
+      <div
+        className="flex-1 overflow-auto outline-none select-none"
+        tabIndex={0}
+        onKeyDown={handleKeyDown}
+      >
+        <div className="inline-block min-w-full">
+          <div className="flex sticky top-0 z-10">
+            <div
+              className="bg-zinc-100 border-b border-r border-zinc-300 shrink-0"
+              style={{ width: ROW_HEADER_WIDTH, height: CELL_HEIGHT }}
+            />
+            {Array.from({ length: store.COL_COUNT }, (_, colIndex) => (
+              <div
+                key={colIndex}
+                className="bg-zinc-100 border-b border-r border-zinc-300 flex items-center justify-center text-base font-medium text-zinc-500 shrink-0"
+                style={{ width: CELL_WIDTH, height: CELL_HEIGHT }}
+              >
+                {store.colLetter(colIndex)}
+              </div>
+            ))}
+          </div>
+
+          {Array.from({ length: store.ROW_COUNT }, (_, rowIndex) => {
+            const rowNumber = rowIndex + 1;
+
+            return (
+              <div key={rowNumber} className="flex">
+                <div
+                  className="bg-zinc-50 border-b border-r border-zinc-300 flex items-center justify-center text-base text-zinc-300 shrink-0"
+                  style={{ width: ROW_HEADER_WIDTH, height: CELL_HEIGHT }}
+                >
+                  {rowNumber}
+                </div>
+
+                {Array.from({ length: store.COL_COUNT }, (_, colIndex) => {
+                  const cellId = `${store.colLetter(colIndex)}${rowNumber}`;
+                  const isSelected = cellId === selectedCell;
+                  const isEditing = cellId === editingCell;
+                  const rawValue = store.getCellRaw(cellId);
+                  const displayValue = store.getCellValue(cellId);
+                  const isFormula = rawValue.startsWith("=");
+                  const isHeader = isHeaderRow(rowNumber);
+                  const inRange =
+                    isDragging && dragAnchor && dragEnd
+                      ? isCellInRange(cellId, dragAnchor, dragEnd)
+                      : false;
+
+                  const numericValue = Number(displayValue);
+                  const isNegative = !isNaN(numericValue) && numericValue < 0 && !isHeader;
+                  const isPositive = !isNaN(numericValue) && numericValue > 0 && !isHeader;
+                  const isStatusCol = colIndex === 4 && !isHeader;
+                  const statusValue = displayValue.toLowerCase();
+                  const statusBg =
+                    isStatusCol && statusValue === "paid"
+                      ? "bg-emerald-50"
+                      : isStatusCol && statusValue === "received"
+                        ? "bg-blue-50"
+                        : isStatusCol && statusValue === "pending"
+                          ? "bg-amber-50"
+                          : "";
+
+                  return (
+                    <div
+                      key={cellId}
+                      className={`border-b border-r shrink-0 relative cursor-cell ${statusBg} ${
+                        isSelected
+                          ? "border-blue-600 z-10 ring-2 ring-blue-600 ring-inset"
+                          : inRange
+                            ? "bg-blue-50 border-blue-300"
+                            : "border-zinc-200"
+                      }`}
+                      style={{ width: CELL_WIDTH, height: CELL_HEIGHT }}
+                      onMouseDown={() => handleMouseDown(cellId)}
+                      onMouseEnter={() => handleMouseEnter(cellId)}
+                      onDoubleClick={() => handleCellDoubleClick(cellId)}
+                    >
+                      {isEditing && (
+                        <input
+                          autoFocus
+                          value={editValue}
+                          onChange={(event) => setEditValue(event.target.value)}
+                          onBlur={commitEdit}
+                          onKeyDown={(event) => {
+                            if (event.key === "Enter") {
+                              commitEdit();
+                              const nextCell = `${store.colLetter(colIndex)}${rowNumber + 1}`;
+                              store.selectCell(nextCell);
+                              onUpdate();
+                            }
+                            if (event.key === "Escape") setEditingCell(undefined);
+                            if (event.key === "Tab") {
+                              event.preventDefault();
+                              commitEdit();
+                              const nextCol = Math.min(colIndex + 1, store.COL_COUNT - 1);
+                              store.selectCell(`${store.colLetter(nextCol)}${rowNumber}`);
+                              onUpdate();
+                            }
+                          }}
+                          className="absolute inset-0 px-2 text-lg bg-white border-0 outline-none z-20"
+                        />
+                      )}
+                      {!isEditing && (
+                        <div
+                          className={`px-2 h-full flex items-center text-lg truncate ${
+                            isHeader
+                              ? "font-bold text-zinc-900 bg-zinc-50"
+                              : isStatusCol && statusValue === "paid"
+                                ? "text-emerald-700 font-medium"
+                                : isStatusCol && statusValue === "received"
+                                  ? "text-blue-700 font-medium"
+                                  : isStatusCol && statusValue === "pending"
+                                    ? "text-amber-700 font-medium"
+                                    : isFormula
+                                      ? "text-zinc-800"
+                                      : isNegative
+                                        ? "text-red-600"
+                                        : isPositive
+                                          ? "text-emerald-600"
+                                          : "text-zinc-800"
+                          }`}
+                        >
+                          {displayValue}
+                        </div>
+                      )}
+                    </div>
+                  );
+                })}
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/apps/demo/src/error-boundary.tsx b/apps/demo/src/error-boundary.tsx
index ebe588fd2..6d64c6ae2 100644
--- a/apps/demo/src/error-boundary.tsx
+++ b/apps/demo/src/error-boundary.tsx
@@ -19,26 +19,26 @@ export class ErrorBoundary extends Component<{ children: ReactNode }, ErrorBound
   render() {
     if (this.state.error) {
       return (
-        <div className="min-h-screen flex items-center justify-center bg-red-50 p-8">
+        <div className="min-h-screen flex items-center justify-center bg-zinc-50 p-8">
           <div className="w-full max-w-lg">
-            <div className="bg-white border-2 border-red-300 rounded-none p-8">
+            <div className="bg-white border-2 border-zinc-300 rounded-none p-8">
               <div className="flex items-center gap-3 mb-4">
-                <div className="w-8 h-8 bg-red-600 rounded-full flex items-center justify-center text-white font-bold text-lg">
+                <div className="w-8 h-8 bg-zinc-900 rounded-full flex items-center justify-center text-white font-bold text-lg">
                   !
                 </div>
-                <h1 className="text-2xl font-extrabold text-red-700">Something went wrong</h1>
+                <h1 className="text-2xl font-extrabold text-zinc-900">Something went wrong</h1>
               </div>
-              <div className="bg-red-100 border border-red-200 rounded-none p-4 mb-4">
-                <p className="text-lg font-bold text-red-800 font-mono">
+              <div className="bg-zinc-100 border border-zinc-200 rounded-none p-4 mb-4">
+                <p className="text-lg font-bold text-zinc-800 font-mono">
                   {this.state.error.message}
                 </p>
               </div>
-              <pre className="bg-neutral-900 text-green-400 p-4 rounded-none text-sm overflow-x-auto whitespace-pre-wrap font-mono leading-relaxed">
+              <pre className="bg-zinc-900 text-zinc-300 p-4 rounded-none text-sm overflow-x-auto whitespace-pre-wrap font-mono leading-relaxed">
                 {this.state.error.stack}
               </pre>
               <button
                 onClick={() => this.setState({ error: undefined })}
-                className="mt-6 w-full h-12 bg-red-600 text-white font-bold text-base rounded-none hover:bg-red-700 transition-colors"
+                className="mt-6 w-full h-12 bg-zinc-900 text-white font-bold text-base rounded-none hover:bg-zinc-800 transition-colors"
               >
                 Try again
               </button>
diff --git a/apps/demo/src/index.css b/apps/demo/src/index.css
index 2da443d7f..556366532 100644
--- a/apps/demo/src/index.css
+++ b/apps/demo/src/index.css
@@ -7,15 +7,15 @@
 
 @theme {
   --color-background: #ffffff;
-  --color-foreground: #0f1419;
-  --color-muted: #536471;
-  --color-muted-foreground: #71767b;
-  --color-border: #eff3f4;
-  --color-primary: #1d9bf0;
+  --color-foreground: #111827;
+  --color-muted: #6b7280;
+  --color-muted-foreground: #9ca3af;
+  --color-border: #e5e7eb;
+  --color-primary: #18181b;
   --color-primary-foreground: #ffffff;
-  --color-destructive: #f4212e;
-  --color-accent: #f7f9f9;
-  --color-liked: #f91880;
+  --color-destructive: #18181b;
+  --color-accent: #f9fafb;
+  --color-card: #f9fafb;
   --radius: 0.5rem;
   --font-sans: "Inter", system-ui, sans-serif;
 }
@@ -29,7 +29,7 @@ body {
 
 @theme inline {
   --font-heading: var(--font-sans);
-  --font-sans: 'Geist Variable', sans-serif;
+  --font-sans: 'Geist Variable', 'Inter', sans-serif;
   --color-sidebar-ring: var(--sidebar-ring);
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
@@ -72,29 +72,29 @@ body {
 
 :root {
   --background: #ffffff;
-  --foreground: #0f1419;
-  --card: #ffffff;
-  --card-foreground: #0f1419;
+  --foreground: #111827;
+  --card: #f9fafb;
+  --card-foreground: #111827;
   --popover: #ffffff;
-  --popover-foreground: #0f1419;
-  --primary: #1d9bf0;
+  --popover-foreground: #111827;
+  --primary: #18181b;
   --primary-foreground: #ffffff;
-  --secondary: #eff3f4;
-  --secondary-foreground: #0f1419;
-  --muted: #eff3f4;
-  --muted-foreground: #536471;
-  --accent: #f7f9f9;
-  --accent-foreground: #0f1419;
-  --destructive: #f4212e;
-  --border: #eff3f4;
-  --input: #cfd9de;
-  --ring: #1d9bf0;
+  --secondary: #f4f4f5;
+  --secondary-foreground: #18181b;
+  --muted: #f4f4f5;
+  --muted-foreground: #71717a;
+  --accent: #f4f4f5;
+  --accent-foreground: #18181b;
+  --destructive: #18181b;
+  --border: #e4e4e7;
+  --input: #d4d4d8;
+  --ring: #18181b;
   --chart-1: oklch(0.87 0 0);
   --chart-2: oklch(0.556 0 0);
   --chart-3: oklch(0.439 0 0);
   --chart-4: oklch(0.371 0 0);
   --chart-5: oklch(0.269 0 0);
-  --radius: 0.625rem;
+  --radius: 0.5rem;
   --sidebar: oklch(0.985 0 0);
   --sidebar-foreground: oklch(0.145 0 0);
   --sidebar-primary: oklch(0.205 0 0);
@@ -105,40 +105,6 @@ body {
   --sidebar-ring: oklch(0.708 0 0);
 }
 
-.dark {
-  --background: oklch(0.145 0 0);
-  --foreground: oklch(0.985 0 0);
-  --card: oklch(0.205 0 0);
-  --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.205 0 0);
-  --popover-foreground: oklch(0.985 0 0);
-  --primary: oklch(0.922 0 0);
-  --primary-foreground: oklch(0.205 0 0);
-  --secondary: oklch(0.269 0 0);
-  --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.269 0 0);
-  --muted-foreground: oklch(0.708 0 0);
-  --accent: oklch(0.269 0 0);
-  --accent-foreground: oklch(0.985 0 0);
-  --destructive: oklch(0.704 0.191 22.216);
-  --border: oklch(1 0 0 / 10%);
-  --input: oklch(1 0 0 / 15%);
-  --ring: oklch(0.556 0 0);
-  --chart-1: oklch(0.87 0 0);
-  --chart-2: oklch(0.556 0 0);
-  --chart-3: oklch(0.439 0 0);
-  --chart-4: oklch(0.371 0 0);
-  --chart-5: oklch(0.269 0 0);
-  --sidebar: oklch(0.205 0 0);
-  --sidebar-foreground: oklch(0.985 0 0);
-  --sidebar-primary: oklch(0.488 0.243 264.376);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.269 0 0);
-  --sidebar-accent-foreground: oklch(0.985 0 0);
-  --sidebar-border: oklch(1 0 0 / 10%);
-  --sidebar-ring: oklch(0.556 0 0);
-}
-
 @layer base {
   * {
     @apply border-border outline-ring/50;
@@ -149,4 +115,4 @@ body {
   html {
     @apply font-sans;
   }
-}
\ No newline at end of file
+}
diff --git a/apps/demo/src/pages/dashboard.tsx b/apps/demo/src/pages/dashboard.tsx
new file mode 100644
index 000000000..e883347aa
--- /dev/null
+++ b/apps/demo/src/pages/dashboard.tsx
@@ -0,0 +1,9 @@
+import { SpreadsheetGrid } from "@/components/spreadsheet-grid";
+
+export const DashboardPage = ({ onUpdate }: { onUpdate: () => void }) => {
+  return (
+    <div className="h-[calc(100vh-56px)]">
+      <SpreadsheetGrid onUpdate={onUpdate} />
+    </div>
+  );
+};
diff --git a/apps/demo/src/pages/feed.tsx b/apps/demo/src/pages/feed.tsx
deleted file mode 100644
index 805a257c8..000000000
--- a/apps/demo/src/pages/feed.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { store } from "@/store";
-import { PostCard } from "@/components/post-card";
-import { ComposeBox } from "@/components/compose-box";
-
-export const FeedPage = ({ onUpdate }: { onUpdate: () => void }) => {
-  const posts = store.getPosts();
-
-  return (
-    <div>
-      <div className="px-4 py-3 text-xl font-bold border-b border-border sticky top-0 bg-background/85 backdrop-blur-md z-10">
-        Home
-      </div>
-      <ComposeBox onUpdate={onUpdate} />
-      {posts.map((post) => (
-        <PostCard key={post.id} post={post} onUpdate={onUpdate} />
-      ))}
-    </div>
-  );
-};
diff --git a/apps/demo/src/pages/login.tsx b/apps/demo/src/pages/login.tsx
deleted file mode 100644
index 99818fca5..000000000
--- a/apps/demo/src/pages/login.tsx
+++ /dev/null
@@ -1,90 +0,0 @@
-import { useState } from "react";
-import { store } from "@/store";
-
-export const LoginPage = () => {
-  const [email, setEmail] = useState("");
-  const [password, setPassword] = useState("");
-  const [error, setError] = useState("");
-  const [success, setSuccess] = useState("");
-  const [isLoading, setIsLoading] = useState(false);
-  const [crash, setCrash] = useState<Error | undefined>(undefined);
-
-  if (crash) {
-    throw crash;
-  }
-
-  const handleClick = () => {
-    setError("");
-    setSuccess("");
-
-    if (!email || !password) {
-      setError("Please fill in all fields");
-      return;
-    }
-
-    setIsLoading(true);
-
-    setTimeout(() => {
-      try {
-        const handle = email.split("@")[0];
-        const users = store.getUsers();
-        const user = users.find((u) => u.id === handle);
-
-        // @ts-ignore
-        // oxlint-disable-next-line no-unused-expressions
-        user[users];
-
-        if (!user || password !== "chirp123") {
-          setError("Invalid email or password");
-          setIsLoading(false);
-          return;
-        }
-
-        store.login(user.id);
-        setSuccess("Welcome back, " + user.name + "!");
-        setIsLoading(false);
-      } catch (err) {
-        setCrash(err instanceof Error ? err : new Error(String(err)));
-      }
-    }, 600);
-  };
-
-  return (
-    <div className="min-h-screen flex items-center justify-center bg-white px-8">
-      <div className="w-full max-w-sm">
-        <h1 className="text-4xl font-extrabold text-foreground mb-10 text-center">Sign in</h1>
-        <form className="flex flex-col gap-5">
-          <input
-            placeholder="Email"
-            value={email}
-            onChange={(event) => setEmail(event.target.value)}
-            className="w-full h-14 px-5 text-lg rounded-none border-2 border-neutral-200 bg-white outline-none transition-all placeholder:text-neutral-400 focus:border-neutral-900 focus:ring-4 focus:ring-neutral-900/5"
-          />
-          <input
-            placeholder="Password"
-            value={password}
-            onChange={(event) => setPassword(event.target.value)}
-            className="w-full h-14 px-5 text-lg rounded-none border-2 border-neutral-200 bg-white outline-none transition-all placeholder:text-neutral-400 focus:border-neutral-900 focus:ring-4 focus:ring-neutral-900/5"
-          />
-          {error && (
-            <div className="text-lg text-red-700 bg-red-100 border-2 border-red-300 rounded-none px-5 py-4 font-bold">
-              {error}
-            </div>
-          )}
-          {success && (
-            <div className="text-lg text-green-700 bg-green-100 border-2 border-green-300 rounded-none px-5 py-4 font-bold">
-              {success}
-            </div>
-          )}
-          <div
-            onClick={handleClick}
-            className="w-full h-14 rounded-none bg-neutral-900 text-white text-lg font-bold transition-all hover:bg-neutral-800 active:scale-[0.98] flex items-center justify-center cursor-pointer select-none"
-          >
-            {isLoading && "Signing in..."}
-            {!isLoading && "Sign in"}
-          </div>
-        </form>
-      </div>
-    </div>
-  );
-};
diff --git a/apps/demo/src/pages/post-detail.tsx b/apps/demo/src/pages/post-detail.tsx
deleted file mode 100644
index 63951c86b..000000000
--- a/apps/demo/src/pages/post-detail.tsx
+++ /dev/null
@@ -1,99 +0,0 @@
-import { useParams, Link } from "react-router-dom";
-import { ArrowLeft, Heart, MessageCircle, Repeat2 } from "lucide-react";
-import { store } from "@/store";
-import { UserAvatar } from "@/components/avatar";
-import { ReplyThread } from "@/components/reply-thread";
-import { Button } from "@/components/ui/button";
-import { Separator } from "@/components/ui/separator";
-import { cn } from "@/lib/utils";
-
-export const PostDetailPage = ({ onUpdate }: { onUpdate: () => void }) => {
-  const { postId } = useParams<{ postId: string }>();
-  const post = postId ? store.getPost(postId) : undefined;
-  const author = post ? store.getUser(post.authorId) : undefined;
-  const currentUser = store.getCurrentUser();
-  const isLiked = currentUser && post ? post.likes.includes(currentUser.id) : false;
-
-  if (!post || !author) {
-    return <div className="p-5 text-center text-muted-foreground">Post not found.</div>;
-  }
-
-  const handleLike = () => {
-    store.toggleLike(post.id);
-    onUpdate();
-  };
-
-  const date = new Date(post.createdAt);
-  const timeString = date.toLocaleTimeString([], { hour: "numeric", minute: "2-digit" });
-  const dateString = date.toLocaleDateString([], {
-    month: "short",
-    day: "numeric",
-    year: "numeric",
-  });
-
-  return (
-    <div>
-      <div className="px-4 py-3 text-xl font-bold border-b border-border flex items-center gap-6 sticky top-0 bg-background/85 backdrop-blur-md z-10">
-        <Button variant="ghost" size="icon" asChild className="rounded-full -ml-2">
-          <Link to="/">
-            <ArrowLeft className="size-5" />
-          </Link>
-        </Button>
-        Post
-      </div>
-      <div className="p-4">
-        <div className="flex gap-3 mb-3">
-          <Link to={`/profile/${author.handle}`}>
-            <UserAvatar name={author.name} color={author.color} />
-          </Link>
-          <div>
-            <Link
-              to={`/profile/${author.handle}`}
-              className="font-bold text-foreground no-underline hover:underline block"
-            >
-              {author.name}
-            </Link>
-            <span className="text-muted-foreground">@{author.handle}</span>
-          </div>
-        </div>
-        <p className="text-2xl leading-snug mb-3 text-foreground">{post.content}</p>
-        <div className="text-muted-foreground text-[15px] pb-3">
-          {timeString} · {dateString}
-        </div>
-        <Separator />
-        <div className="flex gap-6 py-3 text-muted-foreground text-sm">
-          <span className="flex items-center gap-1.5">
-            <MessageCircle className="size-4" />
-            <strong className="text-foreground">{store.getReplies(post.id).length}</strong> Replies
-          </span>
-          <span className="flex items-center gap-1.5">
-            <Repeat2 className="size-4" />
-            <strong className="text-foreground">{post.repostCount}</strong> Reposts
-          </span>
-          <span className="flex items-center gap-1.5">
-            <Heart className={cn("size-4", isLiked && "fill-[#f91880] text-[#f91880]")} />
-            <strong className="text-foreground">{post.likes.length}</strong> Likes
-          </span>
-        </div>
-        <Separator />
-        <div className="flex justify-center py-3">
-          <Button
-            variant="ghost"
-            size="icon"
-            onClick={handleLike}
-            className={cn(
-              "rounded-full",
-              isLiked
-                ? "text-[#f91880] hover:bg-pink-50"
-                : "text-muted-foreground hover:text-[#f91880] hover:bg-pink-50",
-            )}
-          >
-            <Heart className={cn("size-5", isLiked && "fill-current")} />
-          </Button>
-        </div>
-        <Separator />
-      </div>
-      <ReplyThread postId={post.id} onUpdate={onUpdate} />
-    </div>
-  );
-};
diff --git a/apps/demo/src/pages/profile.tsx b/apps/demo/src/pages/profile.tsx
deleted file mode 100644
index f1ad8f492..000000000
--- a/apps/demo/src/pages/profile.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import { useParams, Link } from "react-router-dom";
-import { ArrowLeft } from "lucide-react";
-import { store } from "@/store";
-import { UserAvatar } from "@/components/avatar";
-import { PostCard } from "@/components/post-card";
-import { Button } from "@/components/ui/button";
-import { Badge } from "@/components/ui/badge";
-import { Separator } from "@/components/ui/separator";
-
-export const ProfilePage = ({ onUpdate }: { onUpdate: () => void }) => {
-  const { handle } = useParams<{ handle: string }>();
-  const user = handle ? store.getUserByHandle(handle) : undefined;
-
-  if (!user) {
-    return <div className="p-5 text-center text-muted-foreground">User not found.</div>;
-  }
-
-  const posts = store.getPostsByUser(user.id);
-  const currentUser = store.getCurrentUser();
-  const isOwnProfile = currentUser?.id === user.id;
-
-  return (
-    <div>
-      <div className="px-4 py-3 text-xl font-bold border-b border-border flex items-center gap-6 sticky top-0 bg-background/85 backdrop-blur-md z-10">
-        <Button variant="ghost" size="icon" asChild className="rounded-full -ml-2">
-          <Link to="/">
-            <ArrowLeft className="size-5" />
-          </Link>
-        </Button>
-        {user.name}
-      </div>
-      <div className="pt-12 px-4 pb-4 border-b border-border">
-        <UserAvatar name={user.name} color={user.color} size="lg" />
-        <div className="mt-3">
-          <div className="font-bold text-xl text-foreground">{user.name}</div>
-          <div className="text-muted-foreground">@{user.handle}</div>
-        </div>
-        <div className="mt-3 flex gap-5 text-muted-foreground text-sm">
-          <span>
-            <strong className="text-foreground">{posts.length}</strong> Posts
-          </span>
-          <span>
-            <strong className="text-foreground">
-              {posts.reduce((sum, post) => sum + post.likes.length, 0)}
-            </strong>{" "}
-            Likes received
-          </span>
-        </div>
-        {isOwnProfile && (
-          <Badge variant="secondary" className="mt-3">
-            This is you
-          </Badge>
-        )}
-      </div>
-      {posts.map((post) => (
-        <PostCard key={post.id} post={post} onUpdate={onUpdate} />
-      ))}
-      {posts.length === 0 && (
-        <div className="p-10 text-center text-muted-foreground">No posts yet.</div>
-      )}
-    </div>
-  );
-};
diff --git a/apps/demo/src/seed.ts b/apps/demo/src/seed.ts
index 5e925cc35..870697d15 100644
--- a/apps/demo/src/seed.ts
+++ b/apps/demo/src/seed.ts
@@ -1,89 +1,91 @@
-import type { User, Post, Reply } from "./types";
+import type { CellData } from "./types";
 
-export const SEED_USERS: User[] = [
-  { id: "u1", name: "Alex Rivera", handle: "arivera", color: "#1d9bf0" },
-  { id: "u2", name: "Sam Chen", handle: "samchen", color: "#7856ff" },
-  { id: "u3", name: "Jordan Lee", handle: "jlee", color: "#f91880" },
-  { id: "u4", name: "Taylor Kim", handle: "tkim", color: "#ff7a00" },
-];
+export const SEED_CELLS: Record<string, CellData> = {
+  A1: { value: "Item" },
+  B1: { value: "Category" },
+  C1: { value: "Amount" },
+  D1: { value: "Date" },
+  E1: { value: "Status" },
+  F1: { value: "Notes" },
 
-const now = Date.now();
-const hours = (n: number) => n * 60 * 60 * 1000;
+  A2: { value: "Salary" },
+  B2: { value: "Income" },
+  C2: { value: "4500" },
+  D2: { value: "2026-04-01" },
+  E2: { value: "Received" },
+  F2: { value: "" },
 
-export const SEED_POSTS: Post[] = [
-  {
-    id: "p1",
-    authorId: "u1",
-    content: "Just shipped a new feature using AI-assisted testing. The future is here.",
-    createdAt: now - hours(1),
-    likes: ["u2", "u3"],
-    repostCount: 3,
-  },
-  {
-    id: "p2",
-    authorId: "u2",
-    content: "Hot take: browser testing shouldn't require writing a single line of test code.",
-    createdAt: now - hours(3),
-    likes: ["u1", "u3", "u4"],
-    repostCount: 12,
-  },
-  {
-    id: "p3",
-    authorId: "u3",
-    content:
-      "Working on a side project this weekend. React + Vite + Tailwind is such a good combo.",
-    createdAt: now - hours(5),
-    likes: ["u1"],
-    repostCount: 1,
-  },
-  {
-    id: "p4",
-    authorId: "u4",
-    content: "The best code is the code you never have to write. Let your tools do the work.",
-    createdAt: now - hours(8),
-    likes: ["u2", "u3"],
-    repostCount: 5,
-  },
-  {
-    id: "p5",
-    authorId: "u1",
-    content:
-      "Debugging at 2am hits different when you have an agent that can reproduce the bug for you.",
-    createdAt: now - hours(12),
-    likes: [],
-    repostCount: 0,
-  },
-  {
-    id: "p6",
-    authorId: "u2",
-    content:
-      "Just realized I haven't manually opened DevTools in a week. Is this what progress feels like?",
-    createdAt: now - hours(24),
-    likes: ["u1", "u4"],
-    repostCount: 8,
-  },
-];
+  A3: { value: "Freelance" },
+  B3: { value: "Income" },
+  C3: { value: "800" },
+  D3: { value: "2026-04-05" },
+  E3: { value: "Pending" },
+  F3: { value: "Invoice #1042" },
 
-export const SEED_REPLIES: Reply[] = [
-  {
-    id: "r1",
-    postId: "p1",
-    authorId: "u2",
-    content: "Which tool are you using? I've been looking for something like this.",
-    createdAt: now - hours(0.5),
-  },
-  {
-    id: "r2",
-    postId: "p1",
-    authorId: "u3",
-    content: "Same here, it's a game changer for catching regressions before they ship.",
-    createdAt: now - hours(0.3),
-  },
-  {
-    id: "r3",
-    postId: "p2",
-    authorId: "u1",
-    content: "Agreed. The best tests are the ones that write themselves.",
-    createdAt: now - hours(2),
-  },
-];
+  A4: { value: "Side project" },
+  B4: { value: "Income" },
+  C4: { value: "" },
+  D4: { value: "" },
+  E4: { value: "" },
+  F4: { value: "Need to invoice" },
+
+  A5: { value: "Rent" },
+  B5: { value: "Housing" },
+  C5: { value: "-1200" },
+  D5: { value: "2026-04-01" },
+  E5: { value: "Paid" },
+  F5: { value: "" },
+
+  A6: { value: "Groceries" },
+  B6: { value: "Food" },
+  C6: { value: "-340" },
+  D6: { value: "2026-04-03" },
+  E6: { value: "Paid" },
+  F6: { value: "" },
+
+  A7: { value: "Electric bill" },
+  B7: { value: "Utilities" },
+  C7: { value: "-150" },
+  D7: { value: "2026-04-06" },
+  E7: { value: "Paid" },
+  F7: { value: "" },
+
+  A8: { value: "Coffee" },
+  B8: { value: "Food" },
+  C8: { value: "-45" },
+  D8: { value: "2026-04-07" },
+  E8: { value: "Paid" },
+  F8: { value: "" },
+
+  A9: { value: "Internet" },
+  B9: { value: "Utilities" },
+  C9: { value: "-80" },
+  D9: { value: "2026-04-08" },
+  E9: { value: "" },
+  F9: { value: "" },
+
+  A10: { value: "Gym" },
+  B10: { value: "" },
+  C10: { value: "-50" },
+  D10: { value: "" },
+  E10: { value: "" },
+  F10: { value: "" },
+
+  A11: { value: "" },
+  B11: { value: "" },
+  C11: { value: "" },
+  D11: { value: "" },
+  E11: { value: "" },
+  F11: { value: "" },
+
+  A13: { value: "Summary" },
+
+  A14: { value: "Total Income" },
+  C14: { value: "=SUM(C2:C4)" },
+
+  A15: { value: "Total Expenses" },
+  C15: { value: "=SUM(C5:C10)" },
+
+  A16: { value: "Net" },
+  C16: { value: "=SUM(C2:C10)" },
+};
diff --git a/apps/demo/src/store.ts b/apps/demo/src/store.ts
index 5743e571d..56a3bdfe6 100644
--- a/apps/demo/src/store.ts
+++ b/apps/demo/src/store.ts
@@ -1,37 +1,48 @@
-import type { User, Post, Reply } from "./types";
-import { SEED_USERS, SEED_POSTS, SEED_REPLIES } from "./seed";
-
-const STORAGE_KEY = "chirp-store";
+import type { CellData } from "./types";
+import { SEED_CELLS } from "./seed";
+
+const COL_COUNT = 10;
+const ROW_COUNT = 25;
+
+const colLetter = (index: number) => String.fromCharCode(65 + index);
+
+const evaluateFormula = (formula: string, cells: Record<string, CellData>): string => {
+  const sumMatch = formula.match(/^=SUM\(([A-Z])(\d+):([A-Z])(\d+)\)$/i);
+  if (!sumMatch) {
+    return "ERR";
+  }
+
+  const startCol = sumMatch[1].toUpperCase().charCodeAt(0) - 65;
+  const startRow = parseInt(sumMatch[2], 10);
+  const endCol = sumMatch[3].toUpperCase().charCodeAt(0) - 65;
+  const endRow = parseInt(sumMatch[4], 10);
+
+  let total = 0;
+  for (let col = startCol; col <= endCol; col++) {
+    for (let row = startRow; row <= endRow; row++) {
+      const id = `${colLetter(col)}${row}`;
+      const cell = cells[id];
+      if (cell) {
+        const value = Number(cell.value);
+        if (!isNaN(value)) total += value;
+      }
+    }
+  }
+  return String(total);
+};
 
 interface StoreData {
-  users: User[];
-  posts: Post[];
-  replies: Reply[];
-  currentUserId: string | undefined;
+  cells: Record<string, CellData>;
+  selectedCell: string;
 }
 
-const loadStore = (): StoreData => {
-  try {
-    const raw = localStorage.getItem(STORAGE_KEY);
-    if (raw) return JSON.parse(raw);
-  } catch {}
-  return {
-    users: SEED_USERS,
-    posts: SEED_POSTS,
-    replies: SEED_REPLIES,
-    currentUserId: undefined,
-  };
+let data: StoreData = {
+  cells: { ...SEED_CELLS },
+  selectedCell: "A1",
 };
-
-const saveStore = (data: StoreData) => {
-  localStorage.setItem(STORAGE_KEY, JSON.stringify(data));
-};
-
-let data = loadStore();
 let listeners: Array<() => void> = [];
 
 const notify = () => {
-  saveStore(data);
   listeners.forEach((listener) => listener());
 };
 
@@ -45,90 +56,60 @@ export const store = {
 
   getSnapshot: () => data,
 
-  getUsers: () => data.users,
-  getUser: (id: string) => data.users.find((u) => u.id === id),
-  getUserByHandle: (handle: string) => data.users.find((u) => u.handle === handle),
-  getPosts: () => [...data.posts].sort((a, b) => b.createdAt - a.createdAt),
-  getPost: (id: string) => data.posts.find((p) => p.id === id),
-  getPostsByUser: (userId: string) =>
-    data.posts.filter((p) => p.authorId === userId).sort((a, b) => b.createdAt - a.createdAt),
-  getReplies: (postId: string) =>
-    data.replies.filter((r) => r.postId === postId).sort((a, b) => a.createdAt - b.createdAt),
-  getCurrentUser: () =>
-    data.currentUserId ? data.users.find((u) => u.id === data.currentUserId) : undefined,
-
-  login(userId: string) {
-    data = { ...data, currentUserId: userId };
-    notify();
-  },
-
-  logout() {
-    data = { ...data, currentUserId: undefined };
-    notify();
+  getCellValue: (cellId: string) => {
+    const cell = data.cells[cellId];
+    if (!cell) return "";
+    if (cell.value.startsWith("=")) {
+      return evaluateFormula(cell.value, data.cells);
+    }
+    return cell.value;
   },
 
-  createPost(content: string) {
-    if (!data.currentUserId) return;
-    const post: Post = {
-      id: `p${Date.now()}`,
-      authorId: data.currentUserId,
-      content,
-      createdAt: Date.now(),
-      likes: [],
-      repostCount: 0,
-    };
-    data = { ...data, posts: [post, ...data.posts] };
-    notify();
+  getCellRaw: (cellId: string) => {
+    return data.cells[cellId]?.value ?? "";
   },
 
-  deletePost(postId: string) {
+  setCell(cellId: string, value: string) {
     data = {
       ...data,
-      posts: data.posts.filter((p) => p.id !== postId),
-      replies: data.replies.filter((r) => r.postId !== postId),
+      cells: {
+        ...data.cells,
+        [cellId]: { value },
+      },
     };
     notify();
   },
 
-  toggleLike(postId: string) {
-    if (!data.currentUserId) return;
-    const userId = data.currentUserId;
-    data = {
-      ...data,
-      posts: data.posts.map((p) =>
-        p.id === postId
-          ? {
-              ...p,
-              likes: p.likes.includes(userId)
-                ? p.likes.filter((id) => id !== userId)
-                : [...p.likes, userId],
-            }
-          : p,
-      ),
-    };
+  selectCell(cellId: string) {
+    data = { ...data, selectedCell: cellId };
     notify();
   },
 
-  addReply(postId: string, content: string) {
-    if (!data.currentUserId) return;
-    const reply: Reply = {
-      id: `r${Date.now()}`,
-      postId,
-      authorId: data.currentUserId,
-      content,
-      createdAt: Date.now(),
-    };
-    data = { ...data, replies: [...data.replies, reply] };
+  getSelectionRange(anchor: string, end: string) {
+    return `${anchor}:${end}`;
+  },
+
+  deleteRow(rowNumber: number) {
+    const newCells: Record<string, CellData> = {};
+    for (const [id, cell] of Object.entries(data.cells)) {
+      const row = parseInt(id.slice(1), 10);
+      if (row !== rowNumber) {
+        newCells[id] = cell;
+      }
+    }
+    data = { ...data, cells: newCells };
     notify();
   },
 
   reset() {
     data = {
-      users: SEED_USERS,
-      posts: SEED_POSTS,
-      replies: SEED_REPLIES,
-      currentUserId: undefined,
+      cells: { ...SEED_CELLS },
+      selectedCell: "A1",
     };
     notify();
   },
+
+  COL_COUNT,
+  ROW_COUNT,
+  colLetter,
 };
diff --git a/apps/demo/src/types.ts b/apps/demo/src/types.ts
index fb876349d..8cc04c20a 100644
--- a/apps/demo/src/types.ts
+++ b/apps/demo/src/types.ts
@@ -1,23 +1,8 @@
-export interface User {
-  id: string;
-  name: string;
-  handle: string;
-  color: string;
+export interface CellData {
+  value: string;
 }
 
-export interface Post {
-  id: string;
-  authorId: string;
-  content: string;
-  createdAt: number;
-  likes: string[];
-  repostCount: number;
-}
-
-export interface Reply {
-  id: string;
-  postId: string;
-  authorId: string;
-  content: string;
-  createdAt: number;
+export interface SpreadsheetState {
+  cells: Record<string, CellData>;
+  selectedCell: string;
 }
diff --git a/apps/website/lib/demo-events.ts b/apps/website/lib/demo-events.ts
index 26b6ac1d7..e7c1edded 100644
--- a/apps/website/lib/demo-events.ts
+++ b/apps/website/lib/demo-events.ts
@@ -1,24 +1,6 @@
 import type { eventWithTime } from "@posthog/rrweb";
-import { DEMO_TARGET_URL } from "@/lib/demo/constants";
 import recordedDemoEvents from "@/lib/recorded-demo-events.json";
 
-const demoEvents: eventWithTime[] = recordedDemoEvents.map((event) => {
-  if (event.type !== 4 || typeof event.data.href !== "string") {
-    return event;
-  }
-
-  const url = new URL(event.data.href);
-  if (url.hostname !== "www.expect.dev") {
-    return event;
-  }
-
-  return {
-    ...event,
-    data: {
-      ...event.data,
-      href: `${DEMO_TARGET_URL}${url.pathname}${url.search}${url.hash}`,
-    },
-  };
-});
+const demoEvents: eventWithTime[] = recordedDemoEvents.map((event) => event);
 
 export const DEMO_EVENTS = demoEvents;
diff --git a/apps/website/lib/demo-trace.ts b/apps/website/lib/demo-trace.ts
index 93f37d3a6..715140227 100644
--- a/apps/website/lib/demo-trace.ts
+++ b/apps/website/lib/demo-trace.ts
@@ -5,14 +5,14 @@ import type { ViewerRunState } from "@/lib/replay-types";
 const replayStartMs = DEMO_EVENTS[0]?.timestamp ?? 0;
 
 export const DEMO_TRACE: ViewerRunState = {
-  title: "test expect.dev",
-  status: "passed",
+  title: "test InvoiceApp",
+  status: "failed",
   summary: undefined,
   done: true,
-  steps: DEMO_STEP_DEFINITIONS.map((step) => ({
+  steps: DEMO_STEP_DEFINITIONS.map((step, index) => ({
     stepId: step.stepId,
     title: step.title,
-    status: "passed",
+    status: index === 0 ? "passed" : ("failed" as const),
     summary: undefined,
     startedAtMs: replayStartMs + step.startOffsetMs,
     endedAtMs: replayStartMs + step.endOffsetMs,
diff --git a/apps/website/lib/demo/constants.ts b/apps/website/lib/demo/constants.ts
index 51351371b..4ddd43ca9 100644
--- a/apps/website/lib/demo/constants.ts
+++ b/apps/website/lib/demo/constants.ts
@@ -5,43 +5,43 @@ export interface DemoStepDefinition {
   readonly endOffsetMs: number;
 }
 
-export const DEMO_TARGET_URL = "https://expect.dev";
+export const DEMO_TARGET_URL = "http://localhost:5173";
 
 export const DEMO_STEP_DEFINITIONS: readonly DemoStepDefinition[] = [
   {
     stepId: "demo-step-1",
-    title: "Navigate to expect.dev and let the homepage intro animation settle",
+    title: "Navigate to InvoiceApp and verify the dashboard loads",
     startOffsetMs: 0,
-    endOffsetMs: 6_000,
+    endOffsetMs: 2_000,
   },
   {
     stepId: "demo-step-2",
-    title: "Scroll down to the installation section",
-    startOffsetMs: 6_000,
-    endOffsetMs: 11_000,
+    title: "Click New Invoice and submit empty form — no validation",
+    startOffsetMs: 2_000,
+    endOffsetMs: 4_500,
   },
   {
     stepId: "demo-step-3",
-    title: "Copy the install command",
-    startOffsetMs: 11_000,
-    endOffsetMs: 15_000,
+    title: "Resize to mobile viewport (375px) — table overflows",
+    startOffsetMs: 4_500,
+    endOffsetMs: 6_000,
   },
   {
     stepId: "demo-step-4",
-    title: "Copy the Cursor skill command",
-    startOffsetMs: 15_000,
-    endOffsetMs: 19_000,
+    title: "Check accessibility — 4 WCAG violations found",
+    startOffsetMs: 6_000,
+    endOffsetMs: 7_500,
   },
   {
     stepId: "demo-step-5",
-    title: "Switch the homepage to dark mode",
-    startOffsetMs: 19_000,
-    endOffsetMs: 24_000,
+    title: "Delete invoice has no confirmation dialog",
+    startOffsetMs: 7_500,
+    endOffsetMs: 8_500,
   },
   {
     stepId: "demo-step-6",
-    title: "Switch back to light mode and return to the top of the page",
-    startOffsetMs: 24_000,
-    endOffsetMs: 30_000,
+    title: "Review results — 5 issues found, 3 videos saved",
+    startOffsetMs: 8_500,
+    endOffsetMs: 10_000,
   },
 ] as const;
diff --git a/apps/website/scripts/record-demo.ts b/apps/website/scripts/record-demo.ts
index a6b8b8da6..67a9294f3 100644
--- a/apps/website/scripts/record-demo.ts
+++ b/apps/website/scripts/record-demo.ts
@@ -39,11 +39,10 @@ const OUTPUT_PATH = path.join(__dirname, "..", "lib", "recorded-demo-events.json
 const POLL_INTERVAL_MS = 500;
 const DEFAULT_VIEWPORT_WIDTH_PX = 1280;
 const DEFAULT_VIEWPORT_HEIGHT_PX = 720;
-const INITIAL_LOAD_SETTLE_MS = 1_500;
-const HOVER_SETTLE_MS = 250;
-const SCROLL_SETTLE_MS = 700;
-const FOOTER_SCROLL_SETTLE_MS = 500;
-const RETURN_TO_TOP_SETTLE_MS = 800;
+const INITIAL_LOAD_SETTLE_MS = 800;
+const HOVER_SETTLE_MS = 200;
+const CLICK_SETTLE_MS = 300;
+const NAVIGATE_SETTLE_MS = 500;
 
 interface RecordDemoOptions {
   readonly manual: boolean;
@@ -77,10 +76,10 @@ const parseOptions = (): RecordDemoOptions => {
   return { manual, targetUrl };
 };
 
-const isExpectDemoTarget = (targetUrl: string): boolean => {
+const isInvoiceAppTarget = (targetUrl: string): boolean => {
   try {
     const url = new URL(targetUrl);
-    return url.hostname === "expect.dev" || url.hostname === "www.expect.dev";
+    return url.hostname === "localhost" || url.hostname === "127.0.0.1";
   } catch {
     return false;
   }
@@ -102,61 +101,48 @@ const hoverAndClick = async (page: Page, locator: Locator): Promise<void> => {
   await locator.hover();
   await page.waitForTimeout(HOVER_SETTLE_MS);
   await locator.click();
+  await page.waitForTimeout(CLICK_SETTLE_MS);
 };
 
-const getCopyButtons = (page: Page) => page.locator("button:not([aria-label]):visible");
-
-const getThemeButton = (page: Page, label: "Light mode" | "Dark mode") =>
-  page.locator(`button[aria-label="${label}"]:visible`).first();
-
-const recordExpectDotDevScenario = async (page: Page): Promise<void> => {
-  const [, scrollStep, copyInstallStep, copySkillStep, darkModeStep, resetStep] =
-    DEMO_STEP_DEFINITIONS;
+const recordInvoiceAppScenario = async (page: Page): Promise<void> => {
+  const [setupStep, formStep, , , deleteStep, resultsStep] = DEMO_STEP_DEFINITIONS;
   const scenarioStartMs = Date.now();
 
   await page.waitForTimeout(INITIAL_LOAD_SETTLE_MS);
-  await page.mouse.move(618, 324, { steps: 12 });
-  await page.waitForTimeout(900);
-  await page.mouse.move(706, 446, { steps: 10 });
-  await waitUntilOffset(page, scenarioStartMs, scrollStep.startOffsetMs);
-
-  await page.mouse.move(640, 420, { steps: 12 });
-  await page.mouse.wheel(0, 160);
-  await page.waitForTimeout(SCROLL_SETTLE_MS);
-  await page.mouse.wheel(0, 140);
-  await page.waitForTimeout(SCROLL_SETTLE_MS);
-  await page.mouse.move(520, 600, { steps: 10 });
-  await waitUntilOffset(page, scenarioStartMs, copyInstallStep.startOffsetMs);
-
-  const copyButtons = getCopyButtons(page);
-  await hoverAndClick(page, copyButtons.nth(0));
-  await waitUntilOffset(page, scenarioStartMs, copyInstallStep.endOffsetMs);
-
-  await hoverAndClick(page, copyButtons.nth(1));
-  await waitUntilOffset(page, scenarioStartMs, copySkillStep.endOffsetMs);
-
-  await page.mouse.move(640, 680, { steps: 12 });
-  await page.mouse.wheel(0, 220);
-  await page.waitForTimeout(FOOTER_SCROLL_SETTLE_MS);
-  await hoverAndClick(page, getThemeButton(page, "Dark mode"));
-  await waitUntilOffset(page, scenarioStartMs, darkModeStep.endOffsetMs);
-
-  await hoverAndClick(page, getThemeButton(page, "Light mode"));
-  await page.waitForTimeout(FOOTER_SCROLL_SETTLE_MS);
-  await page.mouse.move(640, 420, { steps: 12 });
-  await page.mouse.wheel(0, -520);
-  await page.waitForTimeout(RETURN_TO_TOP_SETTLE_MS);
-  await page.mouse.move(640, 320, { steps: 12 });
-  await waitUntilOffset(page, scenarioStartMs, resetStep.endOffsetMs);
+  await page.mouse.move(640, 300, { steps: 10 });
+  await page.waitForTimeout(400);
+  await page.mouse.move(500, 400, { steps: 8 });
+  await waitUntilOffset(page, scenarioStartMs, setupStep.endOffsetMs);
+
+  const newInvoiceButton = page.locator("a", { hasText: "New Invoice" });
+  await hoverAndClick(page, newInvoiceButton);
+  await page.waitForTimeout(NAVIGATE_SETTLE_MS);
+
+  const createButton = page.locator("button[type='submit']", { hasText: "Create Invoice" });
+  await page.mouse.move(400, 500, { steps: 8 });
+  await hoverAndClick(page, createButton);
+  await page.waitForTimeout(NAVIGATE_SETTLE_MS);
+  await waitUntilOffset(page, scenarioStartMs, formStep.endOffsetMs);
+
+  await page.mouse.move(640, 350, { steps: 8 });
+  await page.waitForTimeout(300);
+
+  const deleteButtons = page.locator("button:has(svg)").filter({ hasNot: page.locator("a") });
+  const firstDelete = deleteButtons.first();
+  await hoverAndClick(page, firstDelete);
+  await waitUntilOffset(page, scenarioStartMs, deleteStep.endOffsetMs);
+
+  await page.mouse.move(640, 400, { steps: 10 });
+  await waitUntilOffset(page, scenarioStartMs, resultsStep.endOffsetMs);
 };
 
 const run = async () => {
   const { manual, targetUrl } = parseOptions();
-  const useScriptedScenario = !manual && isExpectDemoTarget(targetUrl);
+  const useScriptedScenario = !manual && isInvoiceAppTarget(targetUrl);
 
   console.log(`Recording rrweb events from: ${targetUrl}`);
   console.log(`Output: ${OUTPUT_PATH}`);
-  console.log(`Mode: ${useScriptedScenario ? "scripted expect.dev" : "manual"}\n`);
+  console.log(`Mode: ${useScriptedScenario ? "scripted InvoiceApp" : "manual"}\n`);
 
   const browser = await chromium.launch({ headless: useScriptedScenario });
   const context = await browser.newContext({
@@ -192,8 +178,8 @@ const run = async () => {
 
   try {
     if (useScriptedScenario) {
-      console.log("Running scripted homepage interactions.\n");
-      await recordExpectDotDevScenario(page);
+      console.log("Running scripted InvoiceApp interactions.\n");
+      await recordInvoiceAppScenario(page);
     } else {
       console.log("Recording started. Interact with the browser.");
       console.log("Press Enter when done to save the events.\n");
diff --git a/packages/browser/src/runtime/overlay/components/cursor-pointer.tsx b/packages/browser/src/runtime/overlay/components/cursor-pointer.tsx
index a83e5be89..2d0cd5338 100644
--- a/packages/browser/src/runtime/overlay/components/cursor-pointer.tsx
+++ b/packages/browser/src/runtime/overlay/components/cursor-pointer.tsx
@@ -1,7 +1,7 @@
 export const PointerCursor = () => (
   <svg
-    width="64"
-    height="64"
+    width="128"
+    height="128"
     viewBox="0 0 32 32"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
@@ -10,8 +10,8 @@ export const PointerCursor = () => (
     <g filter="url(#filter0_d_4_7)">
       <path
         d="M2.58591 2.58594C3.14041 2.03143 3.96783 1.85171 4.70212 2.12695L15.7021 6.25195C16.5219 6.55937 17.0468 7.36516 16.997 8.23926C16.9471 9.11309 16.3344 9.85306 15.4853 10.0654L11.1484 11.1484L10.0654 15.4854C9.85303 16.3345 9.11306 16.9471 8.23923 16.9971C7.36513 17.0469 6.55934 16.5219 6.25192 15.7021L2.12692 4.70215C1.85168 3.96786 2.0314 3.14045 2.58591 2.58594Z"
-        fill="white"
-        stroke="white"
+        fill="color(display-p3 0.25 0.61 0.98)"
+        stroke="color(display-p3 0.25 0.61 0.98)"
         strokeWidth="1.5"
         strokeLinejoin="round"
         strokeLinecap="round"
@@ -21,8 +21,8 @@ export const PointerCursor = () => (
       fillRule="evenodd"
       clipRule="evenodd"
       d="M4.17558 3.53185C3.99199 3.463 3.7851 3.50782 3.64646 3.64646C3.50782 3.7851 3.463 3.99199 3.53185 4.17558L7.65685 15.1756C7.7337 15.3805 7.93492 15.5117 8.15345 15.4992C8.37197 15.4868 8.557 15.3336 8.61009 15.1213L9.91232 9.91232L15.1213 8.61009C15.3336 8.557 15.4868 8.37197 15.4992 8.15345C15.5117 7.93492 15.3805 7.7337 15.1756 7.65685L4.17558 3.53185Z"
-      fill="color(display-p3 0.25 0.61 0.98)"
-      stroke="color(display-p3 0.25 0.61 0.98)"
+      fill="black"
+      stroke="black"
       strokeWidth="2"
       strokeLinejoin="round"
       strokeLinecap="round"
diff --git a/packages/browser/src/runtime/overlay/index.tsx b/packages/browser/src/runtime/overlay/index.tsx
index e53b6ff22..a1499d098 100644
--- a/packages/browser/src/runtime/overlay/index.tsx
+++ b/packages/browser/src/runtime/overlay/index.tsx
@@ -13,6 +13,7 @@ import {
   TOOLTIP_OFFSET_PX,
   TOOLTIP_MAX_WIDTH_PX,
   TOOLTIP_VIEWPORT_PADDING_PX,
+  TOOLTIP_FLIP_THRESHOLD_PX,
   getViewport,
   clampToViewport,
 } from "./lib/constants";
@@ -29,8 +30,8 @@ import { CursorIcon, detectCursorShape } from "./components/cursors";
 import { Glow } from "./components/glow";
 
 const StarDots = () => {
-  const dotSize = 3;
-  const spread = 5.5;
+  const dotSize = 6;
+  const spread = 10;
   const cellSize = dotSize + spread * 2;
   const center = cellSize / 2 - dotSize / 2;
 
@@ -281,6 +282,20 @@ const AgentOverlay = () => {
     setCursorShape(detectCursorShape(state.cursorX, state.cursorY));
   }, [state.cursorX, state.cursorY, state.cursorPositioned]);
 
+  useEffect(() => {
+    if (!state.overlayVisible) return;
+    const handleMouseMove = (event: MouseEvent) => {
+      setState((previous) => ({
+        ...previous,
+        cursorX: event.clientX,
+        cursorY: event.clientY,
+        cursorPositioned: true,
+      }));
+    };
+    window.addEventListener("mousemove", handleMouseMove, true);
+    return () => window.removeEventListener("mousemove", handleMouseMove, true);
+  }, [state.overlayVisible]);
+
   const hasLabel = Boolean(state.label);
 
   const spaceRight = viewport.width - cursorX - TOOLTIP_OFFSET_PX - TOOLTIP_VIEWPORT_PADDING_PX;
@@ -289,7 +304,7 @@ const AgentOverlay = () => {
   const tooltipMaxWidth = tooltipFlipX
     ? Math.min(TOOLTIP_MAX_WIDTH_PX, spaceLeft)
     : Math.min(TOOLTIP_MAX_WIDTH_PX, spaceRight);
-  const tooltipFlipY = cursorY > viewport.height - 80;
+  const tooltipFlipY = cursorY > viewport.height - TOOLTIP_FLIP_THRESHOLD_PX;
 
   return (
     <>
@@ -314,22 +329,22 @@ const AgentOverlay = () => {
             <div
               className="absolute pointer-events-none"
               style={{
-                left: tooltipFlipX ? undefined : "25px",
-                right: tooltipFlipX ? "calc(100% - 2px)" : undefined,
-                top: tooltipFlipY ? undefined : "25px",
-                bottom: tooltipFlipY ? "calc(100% - 2px)" : undefined,
+                left: tooltipFlipX ? undefined : "50px",
+                right: tooltipFlipX ? "calc(100% - 4px)" : undefined,
+                top: tooltipFlipY ? undefined : "50px",
+                bottom: tooltipFlipY ? "calc(100% - 4px)" : undefined,
                 maxWidth: `${tooltipMaxWidth}px`,
               }}
             >
               <div
-                className="rounded-full py-2 px-3.5 text-white font-semibold text-[16.5px] leading-none antialiased animate-[expect-comment-in_0.25s_cubic-bezier(0.22,1,0.36,1)_both]"
+                className="rounded-full py-4 px-6 text-white font-semibold text-[28px] leading-none antialiased animate-[expect-comment-in_0.25s_cubic-bezier(0.22,1,0.36,1)_both]"
                 style={{
                   display: "flex",
                   alignItems: "center",
-                  gap: "8px",
+                  gap: "14px",
                   background: "#000",
-                  border: `3px solid ${OVERLAY_BLUE}`,
-                  boxShadow: "0 0 2px rgba(0,0,0,0.22)",
+                  border: `4px solid ${OVERLAY_BLUE}`,
+                  boxShadow: "0 0 4px rgba(0,0,0,0.22)",
                   fontFamily: "'OpenRunde-Medium','Open_Runde',system-ui,sans-serif",
                   fontSynthesis: "none",
                   overflow: "hidden",
diff --git a/packages/browser/src/runtime/overlay/lib/constants.ts b/packages/browser/src/runtime/overlay/lib/constants.ts
index ea2241bce..16493bf84 100644
--- a/packages/browser/src/runtime/overlay/lib/constants.ts
+++ b/packages/browser/src/runtime/overlay/lib/constants.ts
@@ -5,10 +5,10 @@ export const SRGB_BLUE = "64, 156, 250";
 export const STATE_KEY = "__expect_cursor_state__";
 export const CLICK_ANIMATION_RESET_MS = 300;
 export const MAX_ACTION_LOG_ENTRIES = 50;
-export const TOOLTIP_FLIP_THRESHOLD_PX = 80;
-export const TOOLTIP_OFFSET_PX = 32;
-export const TOOLTIP_MAX_WIDTH_PX = 400;
-export const TOOLTIP_VIEWPORT_PADDING_PX = 8;
+export const TOOLTIP_FLIP_THRESHOLD_PX = 160;
+export const TOOLTIP_OFFSET_PX = 60;
+export const TOOLTIP_MAX_WIDTH_PX = 600;
+export const TOOLTIP_VIEWPORT_PADDING_PX = 16;
 export const RAF_THROTTLE_INTERVAL_MS = 100;
 export const CURSOR_REST_MARGIN_PX = 16;
 
diff --git a/packages/expect-skill/SKILL.md b/packages/expect-skill/SKILL.md
index 8b9dfe8be..6bf55484e 100644
--- a/packages/expect-skill/SKILL.md
+++ b/packages/expect-skill/SKILL.md
@@ -87,6 +87,14 @@ Scan the changed files and diff to identify what behavior changed and which user
 - For broad changes touching shared code: test 3-5 flows, prioritizing paths that share components or data with the changed files. If shared layouts or utilities changed, verify multiple pages.
 - For branch-level reviews: aim for 5-8 total flows. Each changed route, component, or data path should get its own verification. Prioritize security and authorization edge cases. Do not stop after the happy path passes.
 
+## Subagent Usage
+
+Browser verification is best run in a subagent (Task tool) or background shell so the main thread stays free for code edits. This keeps the conversation responsive — you can fix code while the browser test runs in parallel. Strongly prefer launching a subagent for browser work, especially when the test involves multiple steps or long interactions. If the test is truly trivial (single screenshot check), inline is acceptable.
+
+## Resuming Browser State
+
+Before opening a new browser, check if one is already running. Use `browser_tabs` (action `list`) or the expect `screenshot` tool to see if a session is still active. If a tab is already open at the target URL, reuse it — don't close and reopen. When re-verifying after a code fix, prefer navigating or refreshing the existing session over starting from scratch.
+
 ## Execution Strategy
 
 `open` → interact with `playwright` and `screenshot` → observe with `console_logs` and `network_requests` → audit with `accessibility_audit` and `performance_metrics` → `close`. One browser session at a time.
@@ -171,6 +179,8 @@ You MUST complete every step before claiming the work is done.
 
 You will reach for these — recognize them and do the opposite:
 
+- "I'll run the browser test inline, it's quick" — Probably not. Launch a subagent so you can keep editing code in parallel. Only skip the subagent for a single screenshot sanity check.
+- "I'll open a fresh browser to re-test" — Check for an existing session first. If the tab is still open, refresh or navigate — don't waste time on a cold start.
 - "I'll make one `playwright` call per action" — No. Put the whole sequence in one `playwright` call. `ref('e3').fill(...); ref('e5').fill(...); ref('e7').click();` — that's one tool call, not three.
 - "I need a fresh snapshot between fills" — No. Fills don't change page structure. Batch them in one `playwright` script.
 - "The page loaded successfully" — Loading is not verification. Check the specific behavior the diff changed.
diff --git a/packages/shared/src/infer-agent.ts b/packages/shared/src/infer-agent.ts
index 5bf86c6fb..a5ce341ef 100644
--- a/packages/shared/src/infer-agent.ts
+++ b/packages/shared/src/infer-agent.ts
@@ -9,16 +9,13 @@ const AGENT_ENV_MAP: ReadonlyArray<readonly [envVariable: string, agent: AgentPr
   ["PI_CODING_AGENT_DIR", "pi"],
 ];
 
-export const inferAgentFromEnv = Effect.gen(
-  function* () {
-    for (const [envVariable, agent] of AGENT_ENV_MAP) {
-      const value = yield* Config.string(envVariable).pipe(Config.option);
-      if (Option.isSome(value)) return Option.some(agent);
-    }
-    return Option.none<AgentProvider>();
-  },
-).pipe(Effect.withSpan("inferAgentFromEnv"));
+export const inferAgentFromEnv = Effect.gen(function* () {
+  for (const [envVariable, agent] of AGENT_ENV_MAP) {
+    const value = yield* Config.string(envVariable).pipe(Config.option);
+    if (Option.isSome(value)) return Option.some(agent);
+  }
+  return Option.none<AgentProvider>();
+}).pipe(Effect.withSpan("inferAgentFromEnv"));
 
 export const resolveAgentProvider = (override?: AgentProvider): AgentProvider =>
-  override ??
-  Option.getOrElse(Effect.runSync(inferAgentFromEnv), () => "claude" as AgentProvider);
+  override ?? Option.getOrElse(Effect.runSync(inferAgentFromEnv), () => "claude" as AgentProvider);