From 67edbd08cbe947b13b106aebcc28c836adc102b3 Mon Sep 17 00:00:00 2001
From: richard-epsilla <richard@epsilla.com>
Date: Thu, 13 Aug 2026 02:42:34 -0700
Subject: [PATCH 1/5] =?UTF-8?q?feat(sheets):=20scaffold=20the=20kit=20?=
 =?UTF-8?q?=E2=80=94=20the=20hosted=20app,=20repointed=20at=20HarnessRoute?=
 =?UTF-8?q?r?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Same recipe the slides kit proved: the pages and components ARE the hosted
product's, and exactly one file differs — lib/sh.js maps the data layer onto
HarnessRouter. A sheet is a session, its content is sheet.json in that
session's workspace, chat is POST /responses. No database, no per-product auth
(the console already authenticated whoever is looking), no billing.

Every route in the data layer was checked against gateway/app.py before it was
written. Five slides-kit bugs were the same bug — a call kept from the hosted
product to an endpoint the OSS gateway does not implement — so delete goes to
/traces/{id}, history to /turns, rename to PATCH /sessions/{id}, and the sheet
is read by path (the live workspace) rather than from the file listing (the
checkpoint, which only exists once a turn ends).

runnableHarnesses() excludes this kit's own Harness at the source of the list.
A sheet whose column ran the sheet's own agent would have that agent editing
sheet.json while the app drives a run over it — recursion with a file-write
race inside it. Not offered rather than validated away.

The harness column itself lands next, against a spec still in review.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_013DCjqvx3L4VKAPnFaPe7YJ
---
 kits/sheets/app/index.html                   |   9 +
 kits/sheets/app/package.json                 |  15 +
 kits/sheets/app/src/app.jsx                  |  49 ++
 kits/sheets/app/src/components/ChatPanel.jsx | 273 +++++++
 kits/sheets/app/src/components/Dialog.jsx    |  61 ++
 kits/sheets/app/src/components/ShMark.jsx    |  12 +
 kits/sheets/app/src/components/Skeleton.jsx  | 122 +++
 kits/sheets/app/src/components/Thumbs.jsx    |  84 +++
 kits/sheets/app/src/components/Topbar.jsx    | 130 ++++
 kits/sheets/app/src/lib/auth.js              |  52 ++
 kits/sheets/app/src/lib/collab.js            |  34 +
 kits/sheets/app/src/lib/copilot.js           |  41 +
 kits/sheets/app/src/lib/sh.js                | 217 ++++++
 kits/sheets/app/src/main.jsx                 |   9 +
 kits/sheets/app/src/pages/Landing.jsx        | 751 +++++++++++++++++++
 kits/sheets/app/src/pages/SheetPage.jsx      | 262 +++++++
 kits/sheets/app/src/styles/app.css           | 647 ++++++++++++++++
 kits/sheets/app/src/styles/tokens.css        | 154 ++++
 kits/sheets/app/vite.config.js               |  10 +
 kits/sheets/kit.json                         |  20 +
 20 files changed, 2952 insertions(+)
 create mode 100644 kits/sheets/app/index.html
 create mode 100644 kits/sheets/app/package.json
 create mode 100644 kits/sheets/app/src/app.jsx
 create mode 100644 kits/sheets/app/src/components/ChatPanel.jsx
 create mode 100644 kits/sheets/app/src/components/Dialog.jsx
 create mode 100644 kits/sheets/app/src/components/ShMark.jsx
 create mode 100644 kits/sheets/app/src/components/Skeleton.jsx
 create mode 100644 kits/sheets/app/src/components/Thumbs.jsx
 create mode 100644 kits/sheets/app/src/components/Topbar.jsx
 create mode 100644 kits/sheets/app/src/lib/auth.js
 create mode 100644 kits/sheets/app/src/lib/collab.js
 create mode 100644 kits/sheets/app/src/lib/copilot.js
 create mode 100644 kits/sheets/app/src/lib/sh.js
 create mode 100644 kits/sheets/app/src/main.jsx
 create mode 100644 kits/sheets/app/src/pages/Landing.jsx
 create mode 100644 kits/sheets/app/src/pages/SheetPage.jsx
 create mode 100644 kits/sheets/app/src/styles/app.css
 create mode 100644 kits/sheets/app/src/styles/tokens.css
 create mode 100644 kits/sheets/app/vite.config.js
 create mode 100644 kits/sheets/kit.json

diff --git a/kits/sheets/app/index.html b/kits/sheets/app/index.html
new file mode 100644
index 0000000..64bd196
--- /dev/null
+++ b/kits/sheets/app/index.html
@@ -0,0 +1,9 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Sheets</title>
+  </head>
+  <body><div id="root"></div><script type="module" src="/src/main.jsx"></script></body>
+</html>
diff --git a/kits/sheets/app/package.json b/kits/sheets/app/package.json
new file mode 100644
index 0000000..e801fbd
--- /dev/null
+++ b/kits/sheets/app/package.json
@@ -0,0 +1,15 @@
+{
+  "name": "harnessrouter-kit-sheets",
+  "private": true,
+  "type": "module",
+  "scripts": { "dev": "vite", "build": "vite build" },
+  "dependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "reifyui": "^0.4.2",
+    "lucide-react": "^0.469.0",
+    "react-markdown": "^9.0.1",
+    "remark-gfm": "^4.0.0"
+  },
+  "devDependencies": { "@vitejs/plugin-react": "^4.3.4", "vite": "^6.0.7" }
+}
diff --git a/kits/sheets/app/src/app.jsx b/kits/sheets/app/src/app.jsx
new file mode 100644
index 0000000..9f67a2d
--- /dev/null
+++ b/kits/sheets/app/src/app.jsx
@@ -0,0 +1,49 @@
+// Hash router + session keeper.
+//   #/            landing (prompt, templates, my sheets)
+//   #/login       standalone sign in
+//   #/s/{id}      sheet page (optionally ?seed=<first copilot message>)
+import { useEffect, useState } from 'react';
+import { isAuthed, refreshToken } from './lib/auth';
+import { LandingPage } from './pages/Landing';
+import { LoginPage } from './pages/Login';
+import { SheetPage } from './pages/SheetPage';
+
+function parseHash() {
+  const raw = window.location.hash.replace(/^#\/?/, '');
+  const [path, query = ''] = raw.split('?');
+  const params = new URLSearchParams(query);
+  if (path === 'login') return { page: 'login' };
+  if (path.startsWith('s/')) {
+    return { page: 'sheet', id: decodeURIComponent(path.slice(2)), seed: params.get('seed') || '' };
+  }
+  return { page: 'landing' };
+}
+
+export default function App() {
+  const [route, setRoute] = useState(parseHash);
+
+  useEffect(() => {
+    const onHash = () => setRoute(parseHash());
+    window.addEventListener('hashchange', onHash);
+    return () => window.removeEventListener('hashchange', onHash);
+  }, []);
+
+  // Sliding session: refresh on mount, on tab focus, and every 6 hours, so an
+  // active user never lapses. A dead token fails closed into #/login.
+  useEffect(() => {
+    if (isAuthed()) refreshToken();
+    const onFocus = () => { if (isAuthed() && document.visibilityState !== 'hidden') refreshToken(); };
+    window.addEventListener('focus', onFocus);
+    document.addEventListener('visibilitychange', onFocus);
+    const iv = window.setInterval(() => { if (isAuthed()) refreshToken(); }, 6 * 60 * 60 * 1000);
+    return () => {
+      window.removeEventListener('focus', onFocus);
+      document.removeEventListener('visibilitychange', onFocus);
+      window.clearInterval(iv);
+    };
+  }, []);
+
+  if (route.page === 'login') return <LoginPage />;
+  if (route.page === 'sheet') return <SheetPage key={route.id} id={route.id} seed={route.seed} />;
+  return <LandingPage />;
+}
diff --git a/kits/sheets/app/src/components/ChatPanel.jsx b/kits/sheets/app/src/components/ChatPanel.jsx
new file mode 100644
index 0000000..f88b90e
--- /dev/null
+++ b/kits/sheets/app/src/components/ChatPanel.jsx
@@ -0,0 +1,273 @@
+// Copilot chat column — the workflow page's full-height right panel.
+// Adapted from ContextualGraph's ChatPanel: the conversational surface is the
+// shared UI Core package; the broker transport is Sheets's (lib/copilot.js
+// streaming with the non-streaming /chat fallback). On mount it replays the
+// member's prior conversation over this workflow; the landing prompt's ?seed=
+// fires exactly ONCE (stripped from the URL immediately, skipped when history
+// already exists).
+import { useEffect, useRef, useState } from 'react';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import { ArrowUp, Mic, PanelRight, Plus, Sparkles } from 'lucide-react';
+import { ChatMessages, ChatMessagesSkeleton } from 'reifyui';
+import { Composer } from 'reifyui';
+import { withReasoning, withResult, withStep, withText } from 'reifyui';
+import { chatHistory, sendChat } from '../lib/sh';
+import { streamTurn } from '../lib/copilot';
+
+const RETRY_MS = 20000;
+
+const STATUS_LABELS = {
+  failed: 'This turn failed. Please try again.',
+  cancelled: 'Stopped',
+  incomplete: 'The turn hit its limit. Send a follow up to continue.',
+};
+
+/** Drop ?seed= from the hash in place so refresh/back/bookmark never resend it. */
+function stripSeedFromHash() {
+  const h = window.location.hash || '';
+  if (!/[?&]seed=/.test(h)) return;
+  const [path, query = ''] = h.split('?');
+  const params = new URLSearchParams(query);
+  params.delete('seed');
+  const rest = params.toString();
+  window.history.replaceState(null, '', window.location.pathname + window.location.search + path + (rest ? `?${rest}` : ''));
+}
+
+/** Broker history turns -> the shared component's message shape. */
+function turnsToMessages(turns) {
+  const m = [];
+  for (const t of turns || []) {
+    if (t.user) m.push({ role: 'user', text: t.user });
+    const steps = (t.tools || []).map((x) => ({ name: x.name, args: x.arguments, result: x.result }));
+    const blocks = [];
+    if (steps.length) blocks.push({ kind: 'tools', reasoning: '', steps });
+    if (t.assistant) blocks.push({ kind: 'text', text: t.assistant });
+    const st = (t.status === 'failed' || t.status === 'error') ? 'failed'
+      : t.status === 'cancelled' ? 'cancelled'
+        : (t.status === 'incomplete' || t.status === 'max_turns' || t.status === 'timeout') ? 'incomplete'
+          : 'done';
+    if (blocks.length || st !== 'done') m.push({ role: 'assistant', blocks, status: st });
+  }
+  return m;
+}
+
+export function ChatColumn({ sheetId, seed, title, copilotBuilding, collapsed, onToggle, onSheetMaybeChanged, width }) {
+  const [messages, setMessages] = useState([]);
+  const [draft, setDraft] = useState('');
+  const [busy, setBusy] = useState(false);
+  const [connecting, setConnecting] = useState(false);
+  const [histLoading, setHistLoading] = useState(true);
+  const pendingRef = useRef(null);
+  const bodyRef = useRef(null);
+  const seededRef = useRef(false);
+  const streamOkRef = useRef(true);
+
+  useEffect(() => {
+    bodyRef.current?.scrollTo({ top: bodyRef.current.scrollHeight });
+  }, [messages, connecting]);
+
+  function updateLastAsst(fn) {
+    setMessages((m) => {
+      const out = m.slice();
+      for (let i = out.length - 1; i >= 0; i--) {
+        if (out[i].role === 'assistant') { out[i] = fn({ ...out[i] }); break; }
+      }
+      return out;
+    });
+  }
+
+  function dropRunningAsst() {
+    setMessages((m) => (m.length && m[m.length - 1].role === 'assistant' && m[m.length - 1].status === 'running'
+      ? m.slice(0, -1) : m));
+  }
+
+  async function legacyDeliver(text) {
+    try {
+      const res = await sendChat(sheetId, text);
+      if (res.status === 404 || res.status === 503) {
+        dropRunningAsst();
+        pendingRef.current = text;
+        setConnecting(true);
+        return;
+      }
+      const body = await res.json().catch(() => null);
+      const reply = (body && (body.reply || body.message)) || (res.ok ? '...' : `Something went wrong (${res.status}). Please try again.`);
+      updateLastAsst((a) => ({ ...a, blocks: withText(a.blocks, reply), status: res.ok ? 'done' : 'failed' }));
+      pendingRef.current = null;
+      setConnecting(false);
+      onSheetMaybeChanged?.();
+    } catch {
+      dropRunningAsst();
+      pendingRef.current = text;
+      setConnecting(true);
+    }
+  }
+
+  async function deliver(text) {
+    setBusy(true);
+    setMessages((m) => [...m, { role: 'assistant', blocks: [], status: 'running' }]);
+    try {
+      if (!streamOkRef.current) {
+        await legacyDeliver(text);
+        return;
+      }
+      const out = await streamTurn(sheetId, text, {
+        onReasoningDelta: (d) => updateLastAsst((a) => ({ ...a, blocks: withReasoning(a.blocks, d) })),
+        onToolCall: (name, args, callId) => updateLastAsst((a) => ({ ...a, blocks: withStep(a.blocks, { name, args, callId }) })),
+        onToolResult: (callId, output) => updateLastAsst((a) => ({ ...a, blocks: withResult(a.blocks, callId, output) })),
+        onTextDelta: (d) => updateLastAsst((a) => ({ ...a, blocks: withText(a.blocks, d) })),
+        onDone: (status) => updateLastAsst((a) => ({ ...a, status: status === 'completed' ? 'done' : status })),
+        onError: () => updateLastAsst((a) => ({
+          ...a,
+          blocks: a.blocks.length ? a.blocks : withText([], 'Something went wrong. Please try again.'),
+          status: 'failed',
+        })),
+      });
+      if (out.unsupported) {
+        streamOkRef.current = false;
+        await legacyDeliver(text);
+        return;
+      }
+      if (out.connecting) {
+        dropRunningAsst();
+        pendingRef.current = text;
+        setConnecting(true);
+        return;
+      }
+      pendingRef.current = null;
+      setConnecting(false);
+      updateLastAsst((a) => (a.status === 'running' ? { ...a, status: 'done' } : a));
+      onSheetMaybeChanged?.();
+    } catch {
+      dropRunningAsst();
+      pendingRef.current = text;
+      setConnecting(true);
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  function send(text) {
+    const t = text.trim();
+    if (!t || busy || histLoading) return;
+    setMessages((m) => [...m, { role: 'user', text: t }]);
+    setDraft('');
+    deliver(t);
+  }
+
+  // Mount: strip ?seed FIRST, then replay history; seed fires only when empty.
+  useEffect(() => {
+    stripSeedFromHash();
+    let dead = false;
+    chatHistory(sheetId).then(({ turns }) => {
+      if (dead) return;
+      const hist = turnsToMessages(turns);
+      if (hist.length) setMessages(hist);
+      setHistLoading(false);
+      if (seed && !seededRef.current && hist.length === 0) {
+        seededRef.current = true;
+        setMessages([{ role: 'user', text: seed }]);
+        deliver(seed);
+      }
+    });
+    return () => { dead = true; };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [sheetId]);
+
+  // While the broker is not live, retry the pending message on an interval.
+  useEffect(() => {
+    if (!connecting) return undefined;
+    const iv = window.setInterval(() => {
+      if (pendingRef.current && !busy) deliver(pendingRef.current);
+    }, RETRY_MS);
+    return () => window.clearInterval(iv);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [connecting, busy]);
+
+  if (collapsed) {
+    return (
+      <aside className="gp-chat collapsed">
+        <div className="gp-chat-h">
+          <button className="top-side-toggle" type="button" onClick={onToggle}
+                  title="Show copilot" aria-label="Show copilot">
+            <PanelRight size={17} />
+          </button>
+        </div>
+      </aside>
+    );
+  }
+
+  const empty = messages.length === 0;
+
+  return (
+    <aside className="gp-chat" style={width ? { flex: `0 0 ${width}px` } : undefined}>
+      <div className="gp-chat-h">
+        <button className="top-side-toggle" type="button" onClick={onToggle}
+                title="Hide copilot" aria-label="Hide copilot">
+          <PanelRight size={17} />
+        </button>
+        <span className="gp-chat-title" title={title || undefined}>{title || 'Copilot'}</span>
+        {/* Copilot status: pulses while a turn runs — fed by the realtime
+            channel, so it also shows for turns started in another window. */}
+        {copilotBuilding && (
+          <span className="gp-chat-cop" title="Copilot is building">
+            <Sparkles size={12} />
+          </span>
+        )}
+        {connecting && <span className="stat-lbl">connecting</span>}
+      </div>
+      <div className="chat-body scroll" ref={bodyRef}>
+        {histLoading ? (
+          <ChatMessagesSkeleton />
+        ) : empty ? (
+          <div className="pane-empty">
+            <Sparkles size={26} />
+            <div className="big">Your sheet copilot</div>
+            <div>Describe the sheet you want and your copilot will build it and fill it, row by row.</div>
+          </div>
+        ) : (
+          <ChatMessages
+            messages={messages}
+            renderMarkdown={(t) => <ReactMarkdown remarkPlugins={[remarkGfm]}>{t}</ReactMarkdown>}
+            workingLabel="Working..."
+            toolLabels={{ workingLabel: 'Working...' }}
+            statusLabels={STATUS_LABELS}
+          />
+        )}
+        {connecting && (
+          <div className="chat-status">
+            <span className="pulse" />
+            Copilot is connecting. Your message will be delivered as soon as it is online.
+          </div>
+        )}
+      </div>
+      <Composer
+        value={draft}
+        onChange={setDraft}
+        onSend={() => send(draft)}
+        disabled={histLoading}
+        placeholder="What would you want to change?"
+        rows={2}
+        autoGrow={false}
+        classNames={{ root: 'cmp', input: '', row: 'cmp-row' }}
+        accessoriesLeft={(
+          <span title="Attachments are coming soon">
+            <button type="button" className="cmp-icon" disabled aria-label="Add an attachment"><Plus size={16} /></button>
+          </span>
+        )}
+        accessoriesRight={(
+          <span title="Voice input is coming soon">
+            <button type="button" className="cmp-icon" disabled aria-label="Voice input"><Mic size={15} /></button>
+          </span>
+        )}
+        renderSend={() => (
+          <button type="button" className="cmp-send" onClick={() => send(draft)}
+                  disabled={busy || histLoading || !draft.trim()} aria-label="Send message">
+            <ArrowUp size={16} />
+          </button>
+        )}
+      />
+    </aside>
+  );
+}
diff --git a/kits/sheets/app/src/components/Dialog.jsx b/kits/sheets/app/src/components/Dialog.jsx
new file mode 100644
index 0000000..4f7f1ac
--- /dev/null
+++ b/kits/sheets/app/src/components/Dialog.jsx
@@ -0,0 +1,61 @@
+// In-app dialogs. House rule: never window.alert / confirm / prompt.
+import { useEffect, useRef, useState } from 'react';
+
+export function Dialog({ onClose, children, width }) {
+  useEffect(() => {
+    function onKey(e) { if (e.key === 'Escape') onClose?.(); }
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, [onClose]);
+  return (
+    <div className="dlg-backdrop" onMouseDown={(e) => { if (e.target === e.currentTarget) onClose?.(); }}>
+      <div className="dlg" style={width ? { width } : undefined} role="dialog" aria-modal="true">
+        {children}
+      </div>
+    </div>
+  );
+}
+
+export function ConfirmDialog({ title, body, confirmLabel = 'Delete', busy, onConfirm, onClose }) {
+  return (
+    <Dialog onClose={busy ? undefined : onClose}>
+      <h3>{title}</h3>
+      <div className="body">{body}</div>
+      <div className="foot">
+        <button className="btn" onClick={onClose} disabled={busy}>Cancel</button>
+        <button className="btn danger" onClick={onConfirm} disabled={busy}>
+          {busy ? 'Working...' : confirmLabel}
+        </button>
+      </div>
+    </Dialog>
+  );
+}
+
+export function NameDialog({ title, body, defaultValue = '', confirmLabel = 'Create', busy, onSubmit, onClose }) {
+  const [value, setValue] = useState(defaultValue);
+  const ref = useRef(null);
+  useEffect(() => { ref.current?.focus(); ref.current?.select(); }, []);
+  const ok = value.trim().length > 0;
+  return (
+    <Dialog onClose={busy ? undefined : onClose}>
+      <h3>{title}</h3>
+      {body && <div className="body">{body}</div>}
+      <form onSubmit={(e) => { e.preventDefault(); if (ok && !busy) onSubmit(value.trim()); }}>
+        <input
+          ref={ref}
+          className="input"
+          value={value}
+          onChange={(e) => setValue(e.target.value)}
+          placeholder="Workflow name"
+          maxLength={80}
+        />
+        <div className="foot">
+          <button type="button" className="btn" onClick={onClose} disabled={busy}>Cancel</button>
+          <button type="submit" className="btn primary" disabled={!ok || busy}>
+            {busy ? 'Creating...' : confirmLabel}
+          </button>
+        </div>
+      </form>
+    </Dialog>
+  );
+}
diff --git a/kits/sheets/app/src/components/ShMark.jsx b/kits/sheets/app/src/components/ShMark.jsx
new file mode 100644
index 0000000..ed8956a
--- /dev/null
+++ b/kits/sheets/app/src/components/ShMark.jsx
@@ -0,0 +1,12 @@
+// The Sheets product mark: a small grid, emerald brand.
+export function ShMark({ size = 20 }) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 32 32" aria-hidden="true">
+      <rect x="4" y="5" width="24" height="22" rx="4" fill="#ECFDF5" stroke="#059669" strokeWidth="1.8" />
+      <line x1="4" y1="12" x2="28" y2="12" stroke="#059669" strokeWidth="1.6" />
+      <line x1="12" y1="5" x2="12" y2="27" stroke="#059669" strokeWidth="1.6" />
+      <rect x="14" y="14" width="12" height="4" rx="1" fill="#34D399" />
+      <rect x="14" y="20" width="8" height="4" rx="1" fill="#A7F3D0" />
+    </svg>
+  );
+}
diff --git a/kits/sheets/app/src/components/Skeleton.jsx b/kits/sheets/app/src/components/Skeleton.jsx
new file mode 100644
index 0000000..e841191
--- /dev/null
+++ b/kits/sheets/app/src/components/Skeleton.jsx
@@ -0,0 +1,122 @@
+/*
+ * Skeleton — reusable pulsing placeholders shaped like the eventual content so
+ * data arriving causes NO layout shift. Light theme, subtle opacity pulse on
+ * var(--line) (matches the studio graph view's skeleton feel). Respects
+ * prefers-reduced-motion (pulse disabled in CSS).
+ *
+ * Base primitive:
+ *   <Skeleton variant="line|card|thumbnail|avatar|table-row" w h radius />
+ * Composed helpers (mirror real layouts 1:1):
+ *   <SkeletonGraphCards count/>   — .gcard grid placeholders
+ *   <SkeletonTableRows count/>    — <tr> rows for the .gtable body
+ *   <SkeletonTemplateCards count/>— carousel template cards
+ */
+import React from 'react';
+
+export function Skeleton({ variant = 'line', w, h, radius, className = '', style }) {
+  const cls = `sk sk-${variant}${className ? ' ' + className : ''}`;
+  const s = { ...(style || {}) };
+  if (w != null) s.width = typeof w === 'number' ? `${w}px` : w;
+  if (h != null) s.height = typeof h === 'number' ? `${h}px` : h;
+  if (radius != null) s.borderRadius = typeof radius === 'number' ? `${radius}px` : radius;
+  return <span className={cls} style={s} aria-hidden="true" />;
+}
+
+// One graph card: thumbnail block + a name bar, matching .gcard / .gcard-foot.
+function GraphCardSkel() {
+  return (
+    <div className="gcard" aria-hidden="true">
+      <Skeleton variant="thumbnail" />
+      <span className="gcard-foot">
+        <Skeleton variant="line" w="60%" h={12} />
+      </span>
+    </div>
+  );
+}
+
+export function SkeletonGraphCards({ count = 8 }) {
+  return (
+    <div className="ggrid" aria-busy="true" aria-label="Loading graphs">
+      {Array.from({ length: count }).map((_, i) => <GraphCardSkel key={i} />)}
+    </div>
+  );
+}
+
+export function SkeletonTemplateCards({ count = 6 }) {
+  return (
+    <div className="carousel-wrap">
+      <div className="carousel" aria-busy="true" aria-label="Loading templates">
+        {Array.from({ length: count }).map((_, i) => <GraphCardSkel key={i} />)}
+      </div>
+    </div>
+  );
+}
+
+// Chat history placeholder — a few message bubbles (assistant/user alternating)
+// shaped like the real .msg rows so history loads without a jump.
+export function SkeletonChatHistory() {
+  const rows = [
+    { who: 'assistant', lines: ['86%', '64%'] },
+    { who: 'user', lines: ['52%'] },
+    { who: 'assistant', lines: ['78%', '90%', '46%'] },
+  ];
+  return (
+    <div className="chat-skel" aria-busy="true" aria-label="Loading conversation">
+      {rows.map((r, i) => (
+        <div key={i} className={'msg sk-msg ' + r.who} aria-hidden="true">
+          {r.lines.map((w, j) => <Skeleton key={j} variant="line" w={w} h={11} />)}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+// A quiet graph-canvas placeholder — a few faint node circles joined by lines,
+// pulsing softly. Used while a graph's metadata loads (before the real explorer
+// mounts and shows its own dual-pane skeleton).
+export function SkeletonGraphCanvas() {
+  return (
+    <div className="sk-canvas" aria-busy="true" aria-label="Loading graph">
+      <svg className="sk-canvas-glyph" width="200" height="120" viewBox="0 0 200 120" aria-hidden="true">
+        <g className="sk-canvas-edges" stroke="var(--line)" strokeWidth="2" fill="none">
+          <path d="M42 78 L100 30" />
+          <path d="M100 30 L158 78" />
+          <path d="M42 78 L158 78" />
+        </g>
+        <g className="sk-canvas-nodes" fill="var(--line)">
+          <circle cx="42" cy="78" r="14" />
+          <circle cx="100" cy="30" r="14" />
+          <circle cx="158" cy="78" r="14" />
+        </g>
+      </svg>
+    </div>
+  );
+}
+
+// Table rows shaped like the real .gtable body: thumb + name, last-viewed,
+// access stack, actions. Widths vary per row so it reads as content, not a grid.
+export function SkeletonTableRows({ count = 6 }) {
+  const names = ['62%', '48%', '70%', '54%', '44%', '66%'];
+  return (
+    <>
+      {Array.from({ length: count }).map((_, i) => (
+        <tr key={i} className="gt-skel-row" aria-hidden="true">
+          <td>
+            <span className="gt-name">
+              <span className="gt-thumb"><Skeleton variant="thumbnail" /></span>
+              <Skeleton variant="line" w={names[i % names.length]} h={12} />
+            </span>
+          </td>
+          <td className="gt-last col-last"><Skeleton variant="line" w={64} h={11} /></td>
+          <td className="col-access">
+            <span className="gt-skel-avs">
+              <Skeleton variant="avatar" w={24} h={24} />
+              <Skeleton variant="avatar" w={24} h={24} />
+            </span>
+          </td>
+          <td className="gt-actions" />
+        </tr>
+      ))}
+    </>
+  );
+}
diff --git a/kits/sheets/app/src/components/Thumbs.jsx b/kits/sheets/app/src/components/Thumbs.jsx
new file mode 100644
index 0000000..4aecc44
--- /dev/null
+++ b/kits/sheets/app/src/components/Thumbs.jsx
@@ -0,0 +1,84 @@
+// Card / table thumbnails for workflows and templates, plus the self-heal
+// worker that regenerates a missing workflow thumbnail in place — the CG
+// Thumbs.jsx pattern with one twist: Sheets's renderer is a PURE
+// dsl -> SVG -> PNG function (lib/thumb.js), so healing needs no offscreen
+// canvas at all — fetch the DSL, rasterize, upload.
+import { useEffect, useRef, useState } from 'react';
+import { fetchThumbUrl, getSheet, putThumbnail } from '../lib/sh';
+import { sheetToPngBlob } from '../lib/thumb';
+
+/** Neutral placeholder: a small connected flow drawing — every edge ends at
+ *  a card (cards paint over the line endpoints), nothing dangling. */
+export function ThumbPlaceholder() {
+  return (
+    <svg viewBox="0 0 320 180" className="thumb-ph" aria-hidden="true">
+      <path d="M160 50v30M160 80l-60 30M160 80l60 30" stroke="#D7DBE3" strokeWidth="2" fill="none" />
+      <rect x="120" y="28" width="80" height="24" rx="6" fill="#E3E7EE" />
+      <rect x="62" y="104" width="76" height="24" rx="6" fill="#E3E7EE" />
+      <rect x="182" y="104" width="76" height="24" rx="6" fill="#E3E7EE" />
+    </svg>
+  );
+}
+
+/** Blob-backed thumbnail image. `refreshKey` re-runs the fetch (bump it after
+ *  a heal or a fresh capture); `onMiss` fires once per fetch that came back
+ *  empty, so the owner can queue a heal. */
+export function Thumb({ path, alt, refreshKey = 0, onMiss }) {
+  const [url, setUrl] = useState(null);
+  const [missing, setMissing] = useState(false);
+  const onMissRef = useRef(onMiss);
+  onMissRef.current = onMiss;
+  useEffect(() => {
+    let dead = false;
+    let objectUrl = null;
+    setUrl(null); setMissing(false);
+    if (!path) { setMissing(true); return undefined; }
+    fetchThumbUrl(path).then((u) => {
+      if (dead) { if (u) URL.revokeObjectURL(u); return; }
+      objectUrl = u;
+      if (u) setUrl(u);
+      else { setMissing(true); onMissRef.current?.(); }
+    });
+    return () => { dead = true; if (objectUrl) URL.revokeObjectURL(objectUrl); };
+  }, [path, refreshKey]);
+  if (missing || !url) return <div className="thumb">{missing ? <ThumbPlaceholder /> : null}</div>;
+  return <div className="thumb"><img src={url} alt={alt || ''} loading="lazy" /></div>;
+}
+
+/** Static SVG art (template cards): a pre-rendered data URI, always present. */
+export function ArtThumb({ uri, alt }) {
+  if (!uri) return <div className="thumb"><ThumbPlaceholder /></div>;
+  return <div className="thumb"><img src={uri} alt={alt || ''} loading="lazy" /></div>;
+}
+
+/** Invisible worker: fetch the workflow DSL, render + upload its thumbnail.
+ *  Calls onDone(ok) exactly once; run one at a time. Workflows whose flow is
+ *  empty (or only the starter note) report ok=false — nothing honest to draw. */
+export function ThumbHealer({ sheetId, onDone }) {
+  const doneRef = useRef(false);
+  const onDoneRef = useRef(onDone);
+  onDoneRef.current = onDone;
+  useEffect(() => {
+    let dead = false;
+    const finish = (ok) => {
+      if (doneRef.current || dead) return;
+      doneRef.current = true;
+      onDoneRef.current?.(ok);
+    };
+    (async () => {
+      try {
+        const r = await getSheet(sheetId);
+        const drawable = ((r?.sheet?.tabs ? r.sheet.tabs[0] : r?.sheet)?.columns || []);
+        if (!drawable.length) { finish(false); return; }
+        const png = await sheetToPngBlob(r.sheet.tabs ? r.sheet.tabs[0] : r.sheet);
+        if (!png || png.size === 0) { finish(false); return; }
+        const res = await putThumbnail(sheetId, png);
+        finish(res.ok);
+      } catch {
+        finish(false);
+      }
+    })();
+    return () => { dead = true; };
+  }, [sheetId]);
+  return null;
+}
diff --git a/kits/sheets/app/src/components/Topbar.jsx b/kits/sheets/app/src/components/Topbar.jsx
new file mode 100644
index 0000000..466390e
--- /dev/null
+++ b/kits/sheets/app/src/components/Topbar.jsx
@@ -0,0 +1,130 @@
+// Product topbar: wordmark, credits badge (engine billing), avatar menu.
+// Adapted from ContextualGraph's — candidate for a further ui-core push-down
+// once a third product needs it (the LINKS/brand surface is all that differs).
+import { useEffect, useRef, useState } from 'react';
+import { BookOpen, Coins, CreditCard, LogOut, User } from 'lucide-react';
+import { getSession, fetchBalance, logout, isAuthed, SESSION_EVENT } from '../lib/auth';
+import { ShMark } from './ShMark';
+
+export const LINKS = {
+  profile: 'https://agentstudio.space/studio/profile',
+  docs: 'https://github.com/epsilla-enterprise/AgentStudio',
+  billing: 'https://agentstudio.space/studio/billing',
+};
+
+export function Wordmark({ size = 18 }) {
+  return (
+    <span className="wordmark" style={{ fontSize: size }}>
+      <ShMark size={size + 2} />
+      <span className="wm-text">Sheets</span>
+    </span>
+  );
+}
+
+export function CreditsBadge() {
+  const [balance, setBalance] = useState(null);
+  useEffect(() => {
+    let dead = false;
+    async function load() {
+      if (!isAuthed()) { setBalance(null); return; }
+      try {
+        const body = await fetchBalance();
+        if (!dead) setBalance(body.balance);
+      } catch {
+        if (!dead) setBalance(null);
+      }
+    }
+    load();
+    window.addEventListener(SESSION_EVENT, load);
+    return () => { dead = true; window.removeEventListener(SESSION_EVENT, load); };
+  }, []);
+  if (balance === null) return null;
+  return (
+    <span className="credits">
+      <Coins size={14} />
+      {Math.floor(balance).toLocaleString()} credits
+    </span>
+  );
+}
+
+export function AvatarMenu() {
+  const [open, setOpen] = useState(false);
+  const [session, setSession] = useState(getSession);
+  const wrapRef = useRef(null);
+
+  useEffect(() => {
+    const sync = () => setSession(getSession());
+    window.addEventListener(SESSION_EVENT, sync);
+    return () => window.removeEventListener(SESSION_EVENT, sync);
+  }, []);
+
+  useEffect(() => {
+    if (!open) return undefined;
+    function onDown(e) {
+      if (wrapRef.current && !wrapRef.current.contains(e.target)) setOpen(false);
+    }
+    window.addEventListener('mousedown', onDown);
+    return () => window.removeEventListener('mousedown', onDown);
+  }, [open]);
+
+  if (!session?.token) return null;
+  const member = session.member || {};
+  const displayName = member.display_name || member.name || member.email || 'Account';
+  const initial = String(displayName).trim().charAt(0).toUpperCase() || 'U';
+
+  return (
+    <div className="avmenu-wrap" ref={wrapRef}>
+      <button className="av" onClick={() => setOpen((v) => !v)} aria-label="Account menu">{initial}</button>
+      {open && (
+        <div className="avmenu">
+          <div className="who">
+            <div className="nm">{displayName}</div>
+            {member.email && <div className="em">{member.email}</div>}
+          </div>
+          <a href={LINKS.profile} target="_blank" rel="noreferrer"><User size={15} />Profile</a>
+          <a href={LINKS.docs} target="_blank" rel="noreferrer"><BookOpen size={15} />Documentation</a>
+          <a href={LINKS.billing} target="_blank" rel="noreferrer"><CreditCard size={15} />Billing</a>
+          <button className="item out" onClick={logout}><LogOut size={15} />Log out</button>
+        </div>
+      )}
+    </div>
+  );
+}
+
+/** Top-right sign-in affordance for signed-out visitors. */
+export function SignInButton({ onSignIn }) {
+  const [hasSession, setHasSession] = useState(() => !!getSession()?.token);
+  useEffect(() => {
+    const sync = () => setHasSession(!!getSession()?.token);
+    window.addEventListener(SESSION_EVENT, sync);
+    return () => window.removeEventListener(SESSION_EVENT, sync);
+  }, []);
+  if (hasSession) return null;
+  return (
+    <button
+      type="button"
+      className="btn primary signin-btn"
+      onClick={() => { if (onSignIn) onSignIn(); else { window.location.hash = '#/login'; } }}
+    >
+      Sign in
+    </button>
+  );
+}
+
+export function Topbar({ crumb, onSignIn }) {
+  return (
+    <header className="topbar">
+      <a className="wordmark" href="#/"><Wordmark size={16} /></a>
+      {crumb && (
+        <>
+          <span className="crumb-sep">/</span>
+          <span className="crumb-name" title={crumb}>{crumb}</span>
+        </>
+      )}
+      <div className="topbar-spacer" />
+      <CreditsBadge />
+      <AvatarMenu />
+      <SignInButton onSignIn={onSignIn} />
+    </header>
+  );
+}
diff --git a/kits/sheets/app/src/lib/auth.js b/kits/sheets/app/src/lib/auth.js
new file mode 100644
index 0000000..c8145fd
--- /dev/null
+++ b/kits/sheets/app/src/lib/auth.js
@@ -0,0 +1,52 @@
+// Identity, borrowed rather than built.
+//
+// The hosted product ships its own sign-in, JWT and sliding-refresh. This app has none of that on
+// purpose: it is served by the HarnessRouter console at /kits/slides, so the console's middleware
+// has already authenticated whoever is looking at it, and the browser carries that session on
+// every same-origin request. There is nothing left for the app to do — no token to hold, no login
+// screen to render, no refresh to schedule.
+//
+// The module still exists because the pages import from it. Each export is the honest local answer
+// to the question the hosted version answers with a token.
+export const SESSION_EVENT = 'slides:session';
+
+/** Same-origin: the console session rides along, and its proxy attaches the internal key. */
+export function authFetch(url, init = {}) {
+  return fetch(url, { cache: 'no-store', ...init });
+}
+
+let _session = null;
+let _asked = false;
+
+/** Who the console says is signed in. Null until the first load resolves. */
+export function getSession() {
+  if (!_asked) {
+    _asked = true;
+    fetch('/api/selfhost/session', { cache: 'no-store' })
+      .then((r) => (r.ok ? r.json() : null))
+      .then((d) => {
+        if (!d?.user) return;
+        _session = { member: { email: d.user, id: d.user }, gated: Boolean(d.gated) };
+        window.dispatchEvent(new CustomEvent(SESSION_EVENT));
+      })
+      .catch(() => {});
+  }
+  return _session;
+}
+
+/** Always: reaching this app at all means the console already let you in. */
+export function isAuthed() {
+  return true;
+}
+
+/** The console owns the session, so signing out is its business, not this app's. */
+export function logout() {
+  fetch('/api/selfhost/logout', { method: 'POST' })
+    .catch(() => {})
+    .finally(() => { window.location.href = '/'; });
+}
+
+/** No token here to refresh. */
+export function refreshToken() {
+  return Promise.resolve();
+}
diff --git a/kits/sheets/app/src/lib/collab.js b/kits/sheets/app/src/lib/collab.js
new file mode 100644
index 0000000..ef1df7e
--- /dev/null
+++ b/kits/sheets/app/src/lib/collab.js
@@ -0,0 +1,34 @@
+// Presence, honestly absent.
+//
+// The hosted product holds a websocket to a collaboration service: other people's cursors and
+// live drags stream in as `peers`, and remote deck revisions arrive as `onRemoteDeck`. This build
+// has no such service — a kit is one Harness on one instance, and a deck is one session's file.
+//
+// So this is a real single-player implementation rather than a stub that pretends: `peers` is
+// empty, `live` is false, and broadcasting a selection or a drag goes nowhere because there is
+// nobody to tell. EditorCanvas takes `peers=[]` and simply draws no peer decorations, which is
+// exactly right. Point this at a presence service and the pages need no changes.
+//
+// The one collaborator this app DOES have is the agent, and that is not handled here: it is the
+// turn lock in DeckPage (the canvas goes read-only while a turn runs, and the server refuses
+// writes with 409), which is a stronger guarantee than presence could give.
+import { useMemo } from 'react';
+
+const NO_PEERS = [];
+
+export function colorFor(key) {
+  // Stable per-identity hue, so if a presence backend is added later the colors do not churn.
+  const s = String(key || '');
+  let h = 0;
+  for (let i = 0; i < s.length; i += 1) h = (h * 31 + s.charCodeAt(i)) % 360;
+  return `hsl(${h} 70% 52%)`;
+}
+
+export function useDeckCollab() {
+  return useMemo(() => ({
+    peers: NO_PEERS,
+    live: false,
+    setSelection: () => {},
+    setDrag: () => {},
+  }), []);
+}
diff --git a/kits/sheets/app/src/lib/copilot.js b/kits/sheets/app/src/lib/copilot.js
new file mode 100644
index 0000000..6e5a586
--- /dev/null
+++ b/kits/sheets/app/src/lib/copilot.js
@@ -0,0 +1,41 @@
+// Copilot streaming client — Sheets's transport over the shared UI Core
+// Responses parser. One POST returns an SSE stream of native Responses
+// events; the broker relays the gateway stream verbatim from
+// POST /v1/sh/sheets/{id}/chat/stream.
+import { createResponsesDispatcher, readSSEStream } from 'reifyui';
+import { authFetch } from './auth';
+import { SH_API } from './sh';
+
+/**
+ * Run one streaming turn. handlers: onToolCall(name, args, callId),
+ * onToolResult(callId, output), onTextDelta(text), onReasoningDelta(text),
+ * onDone(status), onError(message).
+ * Returns { unsupported: true } when the endpoint is missing,
+ * { connecting: true } on 503, { ok: true } after the stream ends.
+ */
+export async function streamTurn(sheetId, message, h) {
+  const res = await authFetch(
+    `${SH_API}/v1/sh/sheets/${encodeURIComponent(sheetId)}/chat/stream`,
+    {
+      method: 'POST',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify({ message }),
+    },
+  );
+  if (res.status === 404) return { unsupported: true };
+  if (res.status === 503) return { connecting: true };
+  if (!res.ok || !res.body) {
+    const t = await res.text().catch(() => '');
+    throw new Error(`chat stream failed: ${res.status} ${t.slice(0, 160)}`);
+  }
+
+  let sawError = false;
+  const d = createResponsesDispatcher({
+    ...h,
+    onError: (msg) => { sawError = true; h.onError?.(msg); },
+  });
+  await readSSEStream(res.body, (data) => {
+    try { d.dispatch(JSON.parse(data)); } catch { /* malformed frame */ }
+  });
+  return { ok: !sawError };
+}
diff --git a/kits/sheets/app/src/lib/sh.js b/kits/sheets/app/src/lib/sh.js
new file mode 100644
index 0000000..59c5a51
--- /dev/null
+++ b/kits/sheets/app/src/lib/sh.js
@@ -0,0 +1,217 @@
+// The Sheets data layer, backed by HarnessRouter.
+//
+// This is the only file that differs in any interesting way from the hosted product. The pages and
+// components are the ones sheets.wrapper.work runs; they call the functions below, and here a
+// sheet is a session on this kit's Harness rather than a row in a product database:
+//
+//   sheet           = session          list -> GET /sessions?harness=…
+//   sheet content   = sheet.json in that session's workspace
+//   chat with agent = POST /responses with the session id
+//
+// There is no database, no per-product auth and no billing. The app is served by the console at
+// /kits/sheets, so it is same-origin with the console's API proxy: the browser sends the console
+// session it already has and the proxy attaches the internal key server-side.
+//
+// Every route below is one the OSS gateway actually implements. The slides kit shipped five bugs
+// that were all the same bug — a call kept from the hosted product to an endpoint that does not
+// exist here — so the rule for this file is: no route goes in without checking gateway/app.py.
+const API = '/api/harness/v1';
+
+async function readError(res) {
+  try {
+    const body = await res.json();
+    const d = body?.error?.message ?? body?.detail;
+    return typeof d === 'string' ? d : `request failed (${res.status})`;
+  } catch {
+    return `request failed (${res.status})`;
+  }
+}
+
+async function hr(path, init = {}) {
+  const res = await fetch(`${API}${path}`, { cache: 'no-store', ...init });
+  if (!res.ok) {
+    const err = new Error(await readError(res));
+    err.status = res.status;
+    throw err;
+  }
+  return res.status === 204 ? null : res.json();
+}
+
+function jsonInit(method, body) {
+  return { method, headers: { 'content-type': 'application/json' }, body: JSON.stringify(body) };
+}
+
+// ── the Harness this kit launched ──────────────────────────────────────────
+let _harness = null;
+export async function sheetsHarness() {
+  if (_harness) return _harness;
+  const { harnesses = [] } = await hr('/harnesses');
+  _harness = harnesses.find((h) => h.kit === 'sheets') || null;
+  return _harness;
+}
+
+/** Every Harness a harness COLUMN may run.
+ *
+ *  Deliberately excludes this kit's own Harness. A sheet whose column runs the sheet's own agent
+ *  would have that agent editing sheet.json while the app is driving a run over it — recursion
+ *  with a file-write race inside it. Excluded at the source of the list rather than validated at
+ *  run time, so the choice is never offered in the first place. */
+export async function runnableHarnesses() {
+  const [{ harnesses = [] }, mine] = await Promise.all([hr('/harnesses'), sheetsHarness()]);
+  return harnesses
+    .filter((h) => h.id !== mine?.id)
+    .map((h) => ({ id: h.id, name: h.name, base: h.base, model: h.defaultModel, kit: h.kit || '' }));
+}
+
+export async function subscribe() {
+  const h = await sheetsHarness();
+  if (!h) throw new Error('Sheets has not been launched yet — open Starter Kits and launch it.');
+  return { ok: true };
+}
+
+// ── sheets (= sessions) ────────────────────────────────────────────────────
+function toSheet(s) {
+  const id = s.id || s.session_id;
+  return {
+    id,
+    sheet_id: id,
+    name: s.title || s.name || 'Untitled sheet',
+    updated_at: s.updated_at || s.created_at || null,
+    status: s.status || '',
+  };
+}
+
+export async function listSheets() {
+  const h = await sheetsHarness();
+  if (!h) return [];
+  // The filter is `harness`, not `harness_id` — with the wrong name the server ignores it and
+  // answers with every session in the org.
+  const body = await hr(`/sessions?harness=${encodeURIComponent(h.id)}&limit=100`);
+  return (body.sessions ?? body.data ?? []).map(toSheet);
+}
+
+/** A sheet is created by its first turn, so this records the intent; the first message opens the
+ *  session and the app adopts the real id from the stream. */
+export async function createSheet(name, template = 'blank') {
+  const h = await sheetsHarness();
+  if (!h) throw new Error('Sheets has not been launched yet.');
+  const id = `new:${template}`;
+  return { id, sheet_id: id, name: name || 'Untitled sheet', template };
+}
+
+/** Rename. PATCH /v1/sessions/{id} also rewrites the trace manifest the LIST renders from, and
+ *  marks the title as chosen so the next turn does not regenerate it from your message. */
+export async function renameSheet(id, name) {
+  return hr(`/sessions/${encodeURIComponent(id)}`, jsonInit('PATCH', { title: name }));
+}
+
+/** Delete the sheet AND the conversation underneath it. The route is /traces/{id}: there is no
+ *  DELETE on the session path, and this one removes the trace, the durable workspace tarball
+ *  (sheet.json included) and tombstones the session. */
+export async function deleteSheet(id) {
+  return hr(`/traces/${encodeURIComponent(id)}`, { method: 'DELETE' });
+}
+
+/** The sheet JSON: { sheet_id, sheet }. Null sheet means the agent has not written one yet.
+ *
+ *  Read by path, which reads the LIVE workspace, so a sheet appears as soon as it is written —
+ *  mid-turn. The file LISTING answers from the checkpoint tarball, which only exists once a turn
+ *  ends. */
+export async function getSheet(id) {
+  const r = await fetch(`${API}/sessions/${encodeURIComponent(id)}/files/sheet.json`,
+                        { cache: 'no-store' });
+  if (!r.ok) return { sheet_id: id, sheet: null };
+  return { sheet_id: id, sheet: await r.json().catch(() => null) };
+}
+
+/** Write sheet.json back. Refused with 409 while a turn is running — the agent owns the file
+ *  until it finishes, and a write that appears to succeed and is then overwritten by the agent's
+ *  checkpoint is the worst of the three outcomes. */
+export async function saveSheet(id, sheet) {
+  return hr(`/sessions/${encodeURIComponent(id)}/files/sheet.json`,
+            jsonInit('PUT', { content: JSON.stringify(sheet, null, 2) }));
+}
+
+/** Current turn state, so the grid knows when to lock and when to re-read. */
+export async function sheetStatus(id) {
+  const d = await hr(`/sessions/${encodeURIComponent(id)}`).catch(() => null);
+  return d?.turn_status || d?.status || '';
+}
+
+// ── talking to the agent ───────────────────────────────────────────────────
+export async function sendChat(id, message) {
+  const h = await sheetsHarness();
+  return hr('/responses', jsonInit('POST', {
+    input: message,
+    metadata: { harness_id: h?.id, ...(id && !String(id).startsWith('new:') ? { session_id: id } : {}) },
+    stream: false,
+  }));
+}
+
+/** The conversation so far: `{ turns }`, oldest first — the shape ChatPanel destructures. The
+ *  route is /turns; there is no /events. */
+export async function chatHistory(id) {
+  if (!id || String(id).startsWith('new:')) return { turns: [] };
+  const body = await hr(`/sessions/${encodeURIComponent(id)}/turns`).catch(() => null);
+  return { turns: body?.turns ?? [] };
+}
+
+// ── workspace files (artifacts) ────────────────────────────────────────────
+/** Workspace path -> a URL that serves it, for artifacts a cell references by path. */
+export async function workspaceFileIndex(id) {
+  const doc = await hr(`/sessions/${encodeURIComponent(id)}/files`).catch(() => null);
+  const out = {};
+  for (const f of doc?.files || []) {
+    const path = f.path || f.filename;
+    if (path && f.id) {
+      out[path] = `${API}/containers/${encodeURIComponent(id)}/files/${encodeURIComponent(f.id)}/content`;
+    }
+  }
+  return out;
+}
+
+/** One workspace file's bytes, by path, from the LIVE workspace. */
+export async function readWorkspaceFile(id, path) {
+  const r = await fetch(`${API}/sessions/${encodeURIComponent(id)}/files/${encodeURIComponent(path)}`,
+                        { cache: 'no-store' });
+  if (!r.ok) return null;
+  return r.text();
+}
+
+/** Put a file into a session's workspace — how a harness cell hands an artifact to the agent. */
+export async function writeWorkspaceFile(id, path, content) {
+  return hr(`/sessions/${encodeURIComponent(id)}/files/${encodeURIComponent(path)}`,
+            jsonInit('PUT', { content }));
+}
+
+// ── thumbnails ─────────────────────────────────────────────────────────────
+// The hosted product caches a rendered PNG per sheet. Here the grid renders live, which is
+// accurate and needs no capture pipeline or blob store — so these are inert rather than
+// pretending to store something.
+export function putThumbnail() { return Promise.resolve(null); }
+export function fetchThumbUrl() { return Promise.resolve(null); }
+export function sheetThumbPath() { return null; }
+
+// ── last viewed (local record) ─────────────────────────────────────────────
+const LV_KEY = 'sheets.lastViewed';
+export function lastViewedMap() {
+  try { return JSON.parse(window.localStorage.getItem(LV_KEY) || '{}'); } catch { return {}; }
+}
+export function markViewed(id) {
+  const map = lastViewedMap();
+  map[id] = Date.now();
+  try { window.localStorage.setItem(LV_KEY, JSON.stringify(map)); } catch { /* private mode */ }
+}
+export function relativeTime(ts) {
+  if (!ts) return null;
+  const t = typeof ts === 'number' ? ts : Date.parse(ts);
+  if (Number.isNaN(t)) return null;
+  const m = Math.floor((Date.now() - t) / 60000);
+  if (m < 1) return 'just now';
+  if (m < 60) return `${m} min ago`;
+  const h = Math.floor(m / 60);
+  if (h < 24) return `${h} h ago`;
+  const d = Math.floor(h / 24);
+  if (d < 30) return `${d} d ago`;
+  return new Date(t).toLocaleDateString();
+}
diff --git a/kits/sheets/app/src/main.jsx b/kits/sheets/app/src/main.jsx
new file mode 100644
index 0000000..c38c260
--- /dev/null
+++ b/kits/sheets/app/src/main.jsx
@@ -0,0 +1,9 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app.jsx';
+import 'reifyui/styles/sheet.css';
+import 'reifyui/styles/chat.css';
+import './styles/tokens.css';
+import './styles/app.css';
+
+createRoot(document.getElementById('root')).render(<StrictMode><App /></StrictMode>);
diff --git a/kits/sheets/app/src/pages/Landing.jsx b/kits/sheets/app/src/pages/Landing.jsx
new file mode 100644
index 0000000..a87667a
--- /dev/null
+++ b/kits/sheets/app/src/pages/Landing.jsx
@@ -0,0 +1,751 @@
+// Landing: the prompt box is the primary entry. Typing a sentence and
+// pressing Enter creates a sheet (after an in-app login modal when signed
+// out) and lands on its editor page with the sentence as the copilot seed.
+// Templates are a searchable card carousel; My Sheets is a table (name +
+// last viewed + access + actions, per the wireframe) with a card-grid
+// alternate view behind a persisted list/grid toggle. Mirrors the
+// ContextualGraph landing (frontend-contextualgraph/src/pages/Landing.jsx);
+// no thumbnail plane in v1 — cards show the product glyph.
+import { useEffect, useRef, useState } from 'react';
+import {
+  ArrowUp, Check, ChevronLeft, ChevronRight, LayoutGrid, List, Mic, Paperclip,
+  Pencil, Search, Shapes, Trash2, X,
+} from 'lucide-react';
+import { authFetch, ENGINE, isAuthed, SESSION_EVENT } from '../lib/auth';
+import {
+  subscribe, listTemplates, listSheets, createSheet, renameSheet,
+  deleteSheet, getTemplateDetail, lastViewedMap, relativeTime,
+  sheetThumbPath, fetchThumbUrl,
+} from '../lib/sh';
+import { Topbar } from '../components/Topbar';
+import { AuthForm } from '../components/AuthForm';
+import { Dialog, ConfirmDialog } from '../components/Dialog';
+import { SheetGrid } from 'reifyui';
+import { ArtThumb, Thumb, ThumbHealer } from '../components/Thumbs';
+import { SkeletonTableRows, SkeletonTemplateCards } from '../components/Skeleton';
+import { svgDataUri, TEMPLATE_ART } from '../lib/thumb';
+
+function openSheet(id, seed) {
+  const q = seed ? `?seed=${encodeURIComponent(seed)}` : '';
+  window.location.hash = `#/s/${id}${q}`;
+}
+
+// ── Prompt placeholder: typewriter rotation through example sheets ──────
+const PROMPT_IDEAS = [
+  'A marketing campaign tracker with an AI-written summary per campaign',
+  'One competitor per row — research and score each with an agent',
+  'A list of companies, enriched with industry, size, and a fit score',
+  'Test cases in rows; run each one and record pass/fail + notes',
+  'Track my content ideas, drafts, channels, and how each performed',
+  'Daily competitor prices scraped into a sheet, flagged if they changed',
+];
+
+function useTypewriterPlaceholder(active) {
+  const [text, setText] = useState(PROMPT_IDEAS[0]);
+  useEffect(() => {
+    if (!active) return undefined;
+    if (window.matchMedia?.('(prefers-reduced-motion: reduce)')?.matches) {
+      setText(PROMPT_IDEAS[0]);
+      return undefined;
+    }
+    let idea = 0;
+    let pos = 0;
+    let timer;
+    const tick = () => {
+      const cur = PROMPT_IDEAS[idea];
+      if (pos <= cur.length) {
+        setText(cur.slice(0, pos));
+        pos += 1;
+        timer = window.setTimeout(tick, 24);
+      } else {
+        timer = window.setTimeout(() => {
+          idea = (idea + 1) % PROMPT_IDEAS.length;
+          pos = 0;
+          tick();
+        }, 2600);
+      }
+    };
+    tick();
+    return () => window.clearTimeout(timer);
+  }, [active]);
+  return text;
+}
+
+function SearchBox({ value, onChange, placeholder }) {
+  return (
+    <label className="searchbox">
+      <Search size={14} />
+      <input
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        placeholder={placeholder}
+        aria-label={placeholder}
+      />
+      {value && (
+        <button type="button" className="sb-x" aria-label="Clear search" onClick={() => onChange('')}>
+          <X size={12} />
+        </button>
+      )}
+    </label>
+  );
+}
+
+function ViewToggle({ value, onChange }) {
+  return (
+    <div className="wb-tabs vt" role="group" aria-label="View">
+      <button type="button" className={'wb-tab' + (value === 'list' ? ' active' : '')}
+              onClick={() => onChange('list')} aria-label="List view">
+        <List size={15} />
+      </button>
+      <button type="button" className={'wb-tab' + (value === 'grid' ? ' active' : '')}
+              onClick={() => onChange('grid')} aria-label="Card view">
+        <LayoutGrid size={15} />
+      </button>
+    </div>
+  );
+}
+
+// ── Access column: overlapping initials of the people with access ──────────
+const AV_COLORS = ['#0E7490', '#7C3AED', '#DB2777', '#D97706', '#059669', '#2563EB'];
+function colorFor(id) {
+  let h = 0;
+  for (const c of String(id)) h = (h * 31 + c.charCodeAt(0)) >>> 0;
+  return AV_COLORS[h % AV_COLORS.length];
+}
+function initialOf(name) {
+  return String(name || '?').trim().charAt(0).toUpperCase() || '?';
+}
+
+// One authenticated fetch per distinct avatar, shared across every row that
+// shows the same person (object URLs live for the page, never revoked).
+const avatarUrlCache = new Map(); // path -> Promise<string|null>
+function fetchAvatarOnce(path) {
+  if (!avatarUrlCache.has(path)) avatarUrlCache.set(path, fetchThumbUrl(path));
+  return avatarUrlCache.get(path);
+}
+
+function AvatarCircle({ person }) {
+  const [url, setUrl] = useState(null);
+  const path = '';
+  useEffect(() => {
+    if (!path) { setUrl(null); return undefined; }
+    let dead = false;
+    fetchAvatarOnce(path).then((u) => { if (!dead && u) setUrl(u); });
+    return () => { dead = true; };
+  }, [path]);
+  const label = person.name + (person.self ? ' (you)' : '');
+  return (
+    <span className="acc-av" style={url ? undefined : { background: colorFor(person.id) }} title={label}>
+      {url ? <img src={url} alt={label} /> : initialOf(person.name)}
+    </span>
+  );
+}
+
+function AccessStack({ me, assignments }) {
+  const people = [];
+  if (me?.id) {
+    people.push({
+      id: String(me.id), name: me.display_name || me.name || me.email || 'You',
+      avatar: me.avatar || '', avatar_updated_at: me.avatar_updated_at || '', self: true,
+    });
+  }
+  (Array.isArray(assignments) ? assignments : []).forEach((a) => {
+    const g = a.grantee || {};
+    if (!g.id || people.some((p) => p.id === String(g.id))) return;
+    people.push({
+      id: String(g.id), name: g.name || g.email || 'Member',
+      avatar: g.avatar || '', avatar_updated_at: g.avatar_updated_at || '',
+    });
+  });
+  if (!people.length) return <span className="gt-last">—</span>;
+  const shown = people.slice(0, 5);
+  const extra = people.length - shown.length;
+  return (
+    <span className="acc-stack" aria-label="People with access">
+      {shown.map((p) => <AvatarCircle key={p.id} person={p} />)}
+      {extra > 0 && <span className="acc-av acc-more">+{extra}</span>}
+    </span>
+  );
+}
+
+// ── Template chips on the prompt bar (multi-select inspiration) ─────────────
+const TPL_MAX = 4;
+const POP_W = 280;
+
+function usePopoverPlacement(anchorRef, open) {
+  const [pos, setPos] = useState(null);
+  useEffect(() => {
+    if (!open) { setPos(null); return undefined; }
+    const place = () => {
+      const el = anchorRef.current;
+      if (!el) return;
+      const r = el.getBoundingClientRect();
+      const gap = 6;
+      const margin = 8;
+      const vw = window.innerWidth;
+      const vh = window.innerHeight;
+      const width = Math.min(POP_W, vw - margin * 2);
+      const spaceBelow = vh - r.bottom - gap - margin;
+      const spaceAbove = r.top - gap - margin;
+      const openUp = spaceBelow < 200 && spaceAbove > spaceBelow;
+      const maxHeight = Math.max(140, Math.floor(openUp ? spaceAbove : spaceBelow));
+      let left = r.left;
+      left = Math.max(margin, Math.min(left, vw - width - margin));
+      const style = openUp
+        ? { left, bottom: Math.round(vh - r.top + gap), width, maxHeight }
+        : { left, top: Math.round(r.bottom + gap), width, maxHeight };
+      setPos(style);
+    };
+    place();
+    window.addEventListener('resize', place);
+    window.addEventListener('scroll', place, true);
+    return () => {
+      window.removeEventListener('resize', place);
+      window.removeEventListener('scroll', place, true);
+    };
+  }, [anchorRef, open]);
+  return pos;
+}
+
+function TemplateChips({ templates, selected, onToggle, note }) {
+  const [open, setOpen] = useState(false);
+  const [q, setQ] = useState('');
+  const wrapRef = useRef(null);
+  const anchorRef = useRef(null);
+  const popRef = useRef(null);
+  const pos = usePopoverPlacement(anchorRef, open);
+  useEffect(() => {
+    if (!open) return undefined;
+    const onDown = (e) => {
+      if (wrapRef.current?.contains(e.target) || popRef.current?.contains(e.target)) return;
+      setOpen(false);
+    };
+    const onKey = (e) => { if (e.key === 'Escape') setOpen(false); };
+    window.addEventListener('mousedown', onDown);
+    window.addEventListener('keydown', onKey);
+    return () => {
+      window.removeEventListener('mousedown', onDown);
+      window.removeEventListener('keydown', onKey);
+    };
+  }, [open]);
+  const usable = templates.filter((t) => t.id !== 'blank');
+  const matches = usable.filter((t) => t.name.toLowerCase().includes(q.trim().toLowerCase()));
+  const isOn = (t) => selected.some((x) => x.id === t.id);
+  return (
+    <>
+      {selected.map((t) => (
+        <span key={t.id} className="ctx-chip set" title={t.description}>
+          <Shapes size={13} />
+          {`Template: ${t.name}`}
+          <span className="ctx-chip-x" role="button" tabIndex={0}
+                aria-label={`Remove template ${t.name}`}
+                onClick={() => onToggle(t)}
+                onKeyDown={(e) => { if (e.key === 'Enter') onToggle(t); }}>
+            <X size={12} />
+          </span>
+        </span>
+      ))}
+      <span className="chip-wrap" ref={wrapRef}>
+        <button ref={anchorRef} type="button" className="ctx-chip"
+                onClick={() => { setOpen((v) => !v); setQ(''); }}>
+          <Shapes size={13} />
+          {selected.length ? 'Add template' : 'Template'}
+        </button>
+        {open && pos && (
+          <div ref={popRef} className="chip-pop chip-pop-fixed" style={{ position: 'fixed', ...pos }}>
+            <input className="input sm" autoFocus placeholder="Search templates"
+                   value={q} onChange={(e) => setQ(e.target.value)} />
+            {note && <div className="chip-pop-note">{note}</div>}
+            <div className="chip-pop-list scroll">
+              {matches.map((t) => (
+                <button key={t.id} type="button"
+                        className={'chip-pop-item' + (isOn(t) ? ' active' : '')}
+                        onClick={() => onToggle(t)} title={t.description}>
+                  <span className="chip-pop-check">{isOn(t) ? <Check size={13} /> : null}</span>
+                  {t.name}
+                </button>
+              ))}
+              {matches.length === 0 && <div className="stat-lbl" style={{ padding: '8px 10px' }}>No templates match.</div>}
+            </div>
+          </div>
+        )}
+      </span>
+    </>
+  );
+}
+
+// Template card art: deterministic SVG data URIs from each template's
+// mini-DSL (lib/thumb.js), rendered by the SAME renderer real sheet
+// thumbnails use. Blank has no art — its placeholder glyph is honest.
+const TEMPLATE_ART_URIS = Object.fromEntries(
+  Object.entries(TEMPLATE_ART).map(([id, dsl]) => [id, svgDataUri(dsl, { width: 472, height: 265 })]),
+);
+
+const SHEET_VIEW_KEY = 'sheets.sheets.view';
+
+export function LandingPage() {
+  const [authed, setAuthed] = useState(isAuthed);
+  const [templates, setTemplates] = useState([]);
+  const [sheets, setSheets] = useState(null); // null = loading
+  const [prompt, setPrompt] = useState('');
+  const [creating, setCreating] = useState(false);
+  const [createErr, setCreateErr] = useState('');
+  const [loginOpen, setLoginOpen] = useState(false);
+  const [loginSubtitle, setLoginSubtitle] = useState('Sign in to create your sheet.');
+  const [tplChips, setTplChips] = useState([]);
+  const [previewTpl, setPreviewTpl] = useState(null);   // template being previewed (read-only popup)
+  const [tplNote, setTplNote] = useState('');
+  const tplNoteTimer = useRef(null);
+  const [deleting, setDeleting] = useState(null);
+  const [deleteBusy, setDeleteBusy] = useState(false);
+  const [editingId, setEditingId] = useState(null);
+  const [editName, setEditName] = useState('');
+  const [view, setViewState] = useState(() => {
+    try { return window.localStorage.getItem(SHEET_VIEW_KEY) === 'grid' ? 'grid' : 'list'; } catch { return 'list'; }
+  });
+  const setView = (v) => {
+    setViewState(v);
+    try { window.localStorage.setItem(SHEET_VIEW_KEY, v); } catch { /* private mode */ }
+  };
+  const [sheetQ, setWfQ] = useState('');
+  const [tplQ, setTplQ] = useState('');
+  const [me, setMe] = useState(null);
+  const [access, setAccess] = useState({});
+  const [healQueue, setHealQueue] = useState([]);      // sheets missing a thumbnail
+  const [thumbRefresh, setThumbRefresh] = useState({}); // sheet id -> bump count
+  const healTriedRef = useRef(new Set());
+  const pendingRef = useRef(null);
+  const carRef = useRef(null);
+  const placeholder = useTypewriterPlaceholder(prompt === '');
+
+  useEffect(() => {
+    const sync = () => setAuthed(isAuthed());
+    window.addEventListener(SESSION_EVENT, sync);
+    return () => window.removeEventListener(SESSION_EVENT, sync);
+  }, []);
+
+  // Templates are public showcase content — load for everyone.
+  useEffect(() => {
+    let dead = false;
+    listTemplates().then((t) => { if (!dead) setTemplates(t); }).catch(() => {});
+    return () => { dead = true; };
+  }, []);
+
+  // My Sheets is the only signed-in-only data. Subscribe (idempotent) + load.
+  useEffect(() => {
+    if (!authed) { setSheets(null); return undefined; }
+    let dead = false;
+    subscribe().catch(() => { /* idempotent, retried next load */ });
+    listSheets().then((w) => { if (!dead) setSheets(w); }).catch(() => { if (!dead) setSheets([]); });
+    return () => { dead = true; };
+  }, [authed]);
+
+  // Viewer profile for the Access column.
+  useEffect(() => {
+    if (!authed) { setMe(null); return undefined; }
+    let dead = false;
+    authFetch(`${ENGINE}/v1/auth/me`)
+      .then((r) => (r.ok ? r.json() : null))
+      .then((b) => { if (!dead && b?.member) setMe(b.member); })
+      .catch(() => {});
+    return () => { dead = true; };
+  }, [authed]);
+
+  // Access column data: the engine share list, one call per sheet.
+  useEffect(() => {
+    if (!authed || view !== 'list' || !sheets?.length) return undefined;
+    let dead = false;
+    sheets.forEach((w) => {
+      if (access[w.id] !== undefined) return;
+      authFetch(`${ENGINE}/v1/resources/${encodeURIComponent(w.id)}/access`)
+        .then((r) => (r.ok ? r.json() : null))
+        .then((b) => {
+          if (dead) return;
+          setAccess((m) => ({ ...m, [w.id]: b ? (b.assignments || []) : null }));
+        })
+        .catch(() => { if (!dead) setAccess((m) => ({ ...m, [w.id]: null })); });
+    });
+    return () => { dead = true; };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [authed, view, sheets]);
+
+  // ── Thumbnail self-heal: a card that 404s queues a real render ──────────
+  const reportThumbMiss = (id) => {
+    if (healTriedRef.current.has(id)) return;
+    healTriedRef.current.add(id);
+    setHealQueue((q) => [...q, id]);
+  };
+  const onHealDone = (id, ok) => {
+    setHealQueue((q) => q.filter((x) => x !== id));
+    if (ok) setThumbRefresh((m) => ({ ...m, [id]: (m[id] || 0) + 1 }));
+  };
+
+  function toggleTpl(t) {
+    setTplChips((list) => {
+      if (list.some((x) => x.id === t.id)) return list.filter((x) => x.id !== t.id);
+      if (list.length >= TPL_MAX) {
+        setTplNote(`Up to ${TPL_MAX} templates can be combined. Remove one to add another.`);
+        window.clearTimeout(tplNoteTimer.current);
+        tplNoteTimer.current = window.setTimeout(() => setTplNote(''), 4000);
+        return list;
+      }
+      return [...list, t];
+    });
+  }
+
+  function withAuth(action) {
+    if (isAuthed()) action();
+    else { pendingRef.current = action; setLoginSubtitle('Sign in to create your sheet.'); setLoginOpen(true); }
+  }
+
+  async function createFromPrompt() {
+    const text = prompt.trim();
+    if ((!text && tplChips.length === 0) || creating) return;
+    withAuth(async () => {
+      setCreating(true);
+      setCreateErr('');
+      try {
+        const name = text
+          ? (text.length > 40 ? text.slice(0, 40).trim() : text)
+          : tplChips.map((t) => t.name).join(' + ');
+        // Blank-first creation: chosen templates ride along as reference
+        // context in the copilot seed, never a hard apply.
+        let seed = text
+          || `Design this sheet drawing inspiration from ${tplChips.length === 1
+            ? `the reference example "${tplChips[0].name}"`
+            : `these reference examples: ${tplChips.map((t) => `"${t.name}"`).join(', ')}`}.`;
+        if (tplChips.length >= 1) {
+          const dets = await Promise.all(tplChips.map((t) => getTemplateDetail(t.id)));
+          seed += '\n\nReference examples are INSPIRATION, my request is the spec: borrow what fits, '
+            + 'model everything my request needs even where no example covers it, and freely drop or '
+            + 'reshape anything that does not serve the request.';
+          dets.forEach((det, i) => {
+            seed += `\n\nReference example ${i + 1} of ${dets.length} (${tplChips[i].name}):\n${det.context}`;
+          });
+        }
+        const res = await createSheet(name, 'blank');
+        openSheet(res.id, seed);
+      } catch (e) {
+        setCreating(false);
+        setCreateErr(e.message || 'Could not create the sheet. Please try again.');
+      }
+    });
+  }
+
+  async function commitRename(w) {
+    const name = editName.trim();
+    setEditingId(null);
+    if (!name || name === w.name) return;
+    setSheets((list) => list.map((x) => (x.id === w.id ? { ...x, name } : x)));
+    try {
+      await renameSheet(w.id, name);
+    } catch {
+      setSheets((list) => list.map((x) => (x.id === w.id ? { ...x, name: w.name } : x)));
+    }
+  }
+
+  async function confirmDelete() {
+    if (!deleting) return;
+    setDeleteBusy(true);
+    try {
+      await deleteSheet(deleting.id);
+      setSheets((list) => list.filter((x) => x.id !== deleting.id));
+      setDeleting(null);
+    } catch { /* keep the dialog open; user can retry or cancel */ } finally {
+      setDeleteBusy(false);
+    }
+  }
+
+  function scrollCarousel(dir) {
+    carRef.current?.scrollBy({ left: dir * 560, behavior: 'smooth' });
+  }
+
+  const viewed = lastViewedMap();
+  const tplMatches = templates.filter(
+    (t) => t.name.toLowerCase().includes(tplQ.trim().toLowerCase()),
+  );
+  const sheetMatches = (sheets || [])
+    .filter((w) => w.name.toLowerCase().includes(sheetQ.trim().toLowerCase()))
+    .sort((a, b) => ((viewed[b.id] || 0) - (viewed[a.id] || 0)) || a.name.localeCompare(b.name));
+
+  const renameField = (w) => (
+    <input
+      className="input rename-input"
+      value={editName}
+      autoFocus
+      onClick={(e) => e.stopPropagation()}
+      onChange={(e) => setEditName(e.target.value)}
+      onBlur={() => commitRename(w)}
+      onKeyDown={(e) => {
+        e.stopPropagation();
+        if (e.key === 'Enter') commitRename(w);
+        if (e.key === 'Escape') setEditingId(null);
+      }}
+    />
+  );
+
+  const rowActions = (w) => (
+    <span className="gcard-actions" onClick={(e) => e.stopPropagation()}>
+      <button className="iconbtn" aria-label={`Rename ${w.name}`}
+              onClick={() => { setEditingId(w.id); setEditName(w.name); }}>
+        <Pencil size={13} />
+      </button>
+      <button className="iconbtn danger" aria-label={`Delete ${w.name}`}
+              onClick={() => setDeleting(w)}>
+        <Trash2 size={13} />
+      </button>
+    </span>
+  );
+
+  return (
+    <div className="shell">
+      <Topbar onSignIn={() => { setLoginSubtitle('Sign in to continue.'); pendingRef.current = null; setLoginOpen(true); }} />
+      <main className="landing">
+        <section className="hero">
+          <h1>What sheets should we create today?</h1>
+          <form className="promptbox" onSubmit={(e) => { e.preventDefault(); createFromPrompt(); }}>
+            <textarea
+              value={prompt}
+              onChange={(e) => setPrompt(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); createFromPrompt(); }
+              }}
+              placeholder={placeholder}
+              rows={3}
+              autoFocus
+            />
+            <div className="pb-row">
+              <span title="Attachments are coming soon">
+                <button type="button" className="cmp-icon" disabled aria-label="Add an attachment"><Paperclip size={16} /></button>
+              </span>
+              <TemplateChips templates={templates} selected={tplChips} onToggle={toggleTpl} note={tplNote} />
+              <span style={{ flex: 1 }} />
+              <span title="Voice input is coming soon">
+                <button type="button" className="cmp-icon" disabled aria-label="Voice input"><Mic size={15} /></button>
+              </span>
+              <button type="submit" className="btn primary" disabled={(!prompt.trim() && tplChips.length === 0) || creating}>
+                {creating ? 'Creating...' : 'Create'}
+                {!creating && <ArrowUp size={14} />}
+              </button>
+            </div>
+          </form>
+          {tplNote && <div className="hint" style={{ marginTop: 8 }}>{tplNote}</div>}
+          {createErr && <div className="auth-err" style={{ marginTop: 10 }}>{createErr}</div>}
+        </section>
+
+        <section className="section">
+          <div className="section-h">
+            <h2>Use a template</h2>
+            {templates.length > 0 && (
+              <div className="section-tools">
+                <SearchBox value={tplQ} onChange={setTplQ} placeholder="Search templates" />
+              </div>
+            )}
+          </div>
+          {templates.length === 0 ? (
+            <SkeletonTemplateCards count={4} />
+          ) : tplMatches.length === 0 ? (
+            <div className="card empty-note">No templates match your search.</div>
+          ) : (
+            <div className="carousel-wrap">
+              <button className="car-btn left" onClick={() => scrollCarousel(-1)} aria-label="Scroll templates left">
+                <ChevronLeft size={16} />
+              </button>
+              <div className="carousel" ref={carRef}>
+                {tplMatches.map((t) => (
+                  <button
+                    key={t.id}
+                    className="gcard tpl"
+                    title={t.description}
+                    onClick={() => {
+                      if (t.id === 'blank') {
+                        setTplChips([]);
+                        window.scrollTo({ top: 0, behavior: 'smooth' });
+                        document.querySelector('.promptbox textarea')?.focus();
+                      } else setPreviewTpl(t);
+                    }}
+                  >
+                    <ArtThumb uri={t.sheet ? svgDataUri(t.sheet.tabs ? t.sheet.tabs[0] : t.sheet, { width: 472, height: 265 }) : TEMPLATE_ART_URIS[t.id]} alt={t.name} />
+                    <span className="gcard-foot"><span className="gcard-name">{t.name}</span></span>
+                  </button>
+                ))}
+              </div>
+              <button className="car-btn right" onClick={() => scrollCarousel(1)} aria-label="Scroll templates right">
+                <ChevronRight size={16} />
+              </button>
+            </div>
+          )}
+        </section>
+
+        {authed && (
+          <section className="section">
+            <div className="section-h">
+              <h2>My sheets</h2>
+              {sheets !== null && sheets.length > 0 && (
+                <div className="section-tools">
+                  <SearchBox value={sheetQ} onChange={setWfQ} placeholder="Search sheets" />
+                  <ViewToggle value={view} onChange={setView} />
+                </div>
+              )}
+            </div>
+            {sheets === null ? (
+              <div className="gtable-wrap">
+                <table className="gtable">
+                  <thead>
+                    <tr>
+                      <th>Name</th>
+                      <th className="col-last">Last viewed</th>
+                      <th className="col-access">Access</th>
+                      <th className="gt-actions" aria-label="Actions" />
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <SkeletonTableRows count={4} />
+                  </tbody>
+                </table>
+              </div>
+            ) : sheets.length === 0 ? (
+              <div className="card empty-note">No sheets yet. Create one from the prompt above or pick a template.</div>
+            ) : sheetMatches.length === 0 ? (
+              <div className="card empty-note">No sheets match your search.</div>
+            ) : view === 'grid' ? (
+              <div className="ggrid">
+                {sheetMatches.map((w) => (
+                  <div key={w.id} className="gcard mine" role="button" tabIndex={0}
+                       onClick={() => { if (editingId !== w.id) openSheet(w.id); }}
+                       onKeyDown={(e) => { if (e.key === 'Enter' && editingId !== w.id) openSheet(w.id); }}>
+                    <Thumb path={sheetThumbPath(w.id)} alt={w.name}
+                           refreshKey={thumbRefresh[w.id] || 0}
+                           onMiss={() => reportThumbMiss(w.id)} />
+                    <span className="gcard-foot">
+                      {editingId === w.id ? renameField(w) : (
+                        <>
+                          <span className="gcard-name" title={w.name}>{w.name}</span>
+                          {relativeTime(viewed[w.id]) && <span className="gcard-sub">{relativeTime(viewed[w.id])}</span>}
+                          {rowActions(w)}
+                        </>
+                      )}
+                    </span>
+                  </div>
+                ))}
+              </div>
+            ) : (
+              <div className="gtable-wrap">
+                <table className="gtable">
+                  <thead>
+                    <tr>
+                      <th>Name</th>
+                      <th className="col-last">Last viewed</th>
+                      <th className="col-access">Access</th>
+                      <th className="gt-actions" aria-label="Actions" />
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {sheetMatches.map((w) => (
+                      <tr key={w.id} tabIndex={0}
+                          onClick={() => { if (editingId !== w.id) openSheet(w.id); }}
+                          onKeyDown={(e) => { if (e.key === 'Enter' && editingId !== w.id) openSheet(w.id); }}>
+                        <td>
+                          <span className="gt-name">
+                            <span className="gt-thumb">
+                              <Thumb path={sheetThumbPath(w.id)} alt=""
+                                     refreshKey={thumbRefresh[w.id] || 0}
+                                     onMiss={() => reportThumbMiss(w.id)} />
+                            </span>
+                            {editingId === w.id ? renameField(w)
+                              : <span className="gcard-name" title={w.name}>{w.name}</span>}
+                          </span>
+                        </td>
+                        <td className="gt-last col-last">{relativeTime(viewed[w.id]) || '—'}</td>
+                        <td className="col-access"><AccessStack me={me} assignments={access[w.id]} /></td>
+                        <td className="gt-actions">{rowActions(w)}</td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            )}
+          </section>
+        )}
+      </main>
+
+      {previewTpl && (
+        <Dialog onClose={() => setPreviewTpl(null)} width={860}>
+          <div className="tpl-preview">
+            <div className="tpl-preview-h">
+              <div>
+                <h3>{previewTpl.name}</h3>
+                <p className="tpl-preview-desc">{previewTpl.description}</p>
+              </div>
+              <div className="tpl-preview-actions">
+                <button className="btn" disabled={creating}
+                        onClick={() => { toggleTpl(previewTpl); setPreviewTpl(null);
+                                         window.scrollTo({ top: 0, behavior: 'smooth' });
+                                         document.querySelector('.promptbox textarea')?.focus(); }}>
+                  Add as reference
+                </button>
+                <button className="btn primary" disabled={creating}
+                        onClick={() => withAuth(async () => {
+                          setCreating(true);
+                          try {
+                            const res = await createSheet(previewTpl.name, previewTpl.id);
+                            openSheet(res.id);
+                          } catch (e) {
+                            setCreateErr(e.message || 'Could not create the sheet.');
+                            setPreviewTpl(null);
+                          } finally { setCreating(false); }
+                        })}>
+                  {creating ? 'Creating…' : 'Use this template'}
+                </button>
+              </div>
+            </div>
+            <div className="tpl-preview-grid">
+              {previewTpl.sheet
+                ? <SheetGrid sheet={previewTpl.sheet.tabs ? previewTpl.sheet.tabs[0] : previewTpl.sheet} readOnly />
+                : <div className="empty-note">No preview available.</div>}
+            </div>
+            <p className="tpl-preview-note">Sample data — your sheet starts from this and the copilot adapts it to your real data.</p>
+          </div>
+        </Dialog>
+      )}
+
+      {/* One at a time: a full render+upload per missing thumbnail. */}
+      {healQueue.length > 0 && (
+        <ThumbHealer
+          key={healQueue[0]}
+          sheetId={healQueue[0]}
+          onDone={(ok) => onHealDone(healQueue[0], ok)}
+        />
+      )}
+
+      {loginOpen && (
+        <Dialog onClose={() => { setLoginOpen(false); pendingRef.current = null; }} width={400}>
+          <AuthForm
+            subtitle={loginSubtitle}
+            onDone={() => {
+              setLoginOpen(false);
+              setAuthed(true);
+              const run = pendingRef.current;
+              pendingRef.current = null;
+              if (run) run();
+            }}
+          />
+        </Dialog>
+      )}
+
+      {deleting && (
+        <ConfirmDialog
+          title="Delete sheet"
+          body={(
+            <>
+              <b>{deleting.name}</b> will be removed from your workspace. This cannot be undone.
+            </>
+          )}
+          busy={deleteBusy}
+          onConfirm={confirmDelete}
+          onClose={() => { if (!deleteBusy) setDeleting(null); }}
+        />
+      )}
+    </div>
+  );
+}
diff --git a/kits/sheets/app/src/pages/SheetPage.jsx b/kits/sheets/app/src/pages/SheetPage.jsx
new file mode 100644
index 0000000..11c280d
--- /dev/null
+++ b/kits/sheets/app/src/pages/SheetPage.jsx
@@ -0,0 +1,262 @@
+// Sheet page — CG/Flowness banner layout with the shared SheetGrid center +
+// copilot chat right. One gp-banner (wordmark + home / Export menu / credits +
+// avatar), the grid fills gp-content, the copilot column sits at the right edge.
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { Download, HelpCircle, Home } from 'lucide-react';
+import { SheetGrid, sheetToDelimited, sheetToAoA } from 'reifyui';
+import { PaneResizer, useResizablePane } from 'reifyui';
+import { getSession, isAuthed } from '../lib/auth';
+import { getSheet, saveSheet, runCell, runColumn, markViewed, putThumbnail, SH_API, fetchThumbUrl } from '../lib/sh';
+import { sheetToPngBlob } from '../lib/thumb';
+import { useSheetCollab } from '../lib/collab';
+import { ChatColumn } from '../components/ChatPanel';
+import { AvatarMenu, CreditsBadge, LINKS, Wordmark } from '../components/Topbar';
+
+function ExportMenu({ doc, tab, name }) {
+  const [open, setOpen] = useState(false);
+  const ref = useRef(null);
+  useEffect(() => {
+    if (!open) return undefined;
+    const onDown = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
+    window.addEventListener('mousedown', onDown);
+    return () => window.removeEventListener('mousedown', onDown);
+  }, [open]);
+  const download = (sep, ext, mime) => {
+    const text = sheetToDelimited(tab, sep);
+    const url = URL.createObjectURL(new Blob([text], { type: mime }));
+    const a = document.createElement('a');
+    a.href = url; a.download = `${(name || 'sheet').replace(/[^\w.-]+/g, '_')}.${ext}`;
+    a.click(); URL.revokeObjectURL(url);
+    setOpen(false);
+  };
+  return (
+    <div className="sh-export" ref={ref}>
+      <button className="pane-btn" onClick={() => setOpen((v) => !v)} title="Export">
+        <Download size={16} /> Export
+      </button>
+      {open && (
+        <div className="sh-export-menu">
+          <button onClick={() => download(',', 'csv', 'text/csv')}>CSV (.csv)</button>
+          <button onClick={() => download('\t', 'tsv', 'text/tab-separated-values')}>TSV (.tsv)</button>
+          <button onClick={async () => {
+            const XLSX = await import('xlsx');
+            const wb = XLSX.utils.book_new();
+            for (const t of (doc.tabs || [tab])) {
+              const ws = XLSX.utils.aoa_to_sheet(sheetToAoA(t));
+              XLSX.utils.book_append_sheet(wb, ws, (t.name || 'Sheet').slice(0, 31));
+            }
+            XLSX.writeFile(wb, `${(name || 'sheet').replace(/[^\w.-]+/g, '_')}.xlsx`);
+            setOpen(false);
+          }}>Excel (.xlsx)</button>
+        </div>
+      )}
+    </div>
+  );
+}
+
+const migrate = (doc) => {
+  if (doc && !doc.tabs) {
+    return { ...doc, tabs: [{ id: 'tab_legacy', name: 'Sheet 1',
+      columns: doc.columns || [], rows: doc.rows || [], cells: doc.cells || {} }] };
+  }
+  return doc;
+};
+
+export function SheetPage({ id, seed }) {
+  const [meta, setMeta] = useState(null);      // { sheet_id, name }
+  const [sheet, setSheet] = useState(null);    // the document JSON {meta, tabs}
+  const [tabId, setTabId] = useState(null);    // active tab id (null = first)
+  const [renamingTab, setRenamingTab] = useState(null);
+  const [err, setErr] = useState('');
+  const [chatCollapsed, setChatCollapsed] = useState(false);
+  const chatPane = useResizablePane({
+    initial: 380, min: 300, maxFraction: 0.6, fromRight: true, storageKey: 'sheets.chat.w',
+  });
+
+  const collab = useSheetCollab(id);
+
+  useEffect(() => {
+    if (!isAuthed()) { window.location.hash = '#/login'; return undefined; }
+    let dead = false;
+    markViewed(id);
+    getSheet(id)
+      .then((r) => { if (!dead) { setSheet(migrate(r.sheet)); setMeta({ sheet_id: r.sheet_id, name: r.sheet?.meta?.title || 'Untitled' }); } })
+      .catch((e) => { if (!dead) setErr(e.message || 'Could not open this sheet.'); });
+    return () => { dead = true; };
+  }, [id]);
+
+  // Live truth from collab (copilot builds / peers' saves) rebases the grid.
+  useEffect(() => {
+    if (collab.liveSheet) {
+      setSheet(migrate(collab.liveSheet));
+      setMeta((m) => (m ? { ...m, name: collab.liveSheet?.meta?.title || m.name } : m));
+    }
+  }, [collab.liveSheet]);
+
+  const tabs = sheet?.tabs || [];
+  const tab = tabs.find((t) => t.id === tabId) || tabs[0] || null;
+
+  const saveDoc = (next) => {
+    setSheet(next);                       // optimistic
+    saveSheet(id, next).catch((e) => setErr(e.message || 'save failed'));
+  };
+  // SheetGrid edits ONE tab; reassemble the document around it.
+  const onChange = (nextTab) => {
+    if (!sheet || !tab) return;
+    saveDoc({ ...sheet, tabs: tabs.map((t) => (t.id === tab.id ? nextTab : t)) });
+  };
+  const addTab = () => {
+    const t = { id: `tab_${Math.random().toString(36).slice(2, 10)}`,
+                name: `Sheet ${tabs.length + 1}`, columns: [], rows: [], cells: {} };
+    saveDoc({ ...sheet, tabs: [...tabs, t] });
+    setTabId(t.id);
+  };
+  const renameTab = (tid, name) => {
+    saveDoc({ ...sheet, tabs: tabs.map((t) => (t.id === tid ? { ...t, name } : t)) });
+  };
+  const deleteTab = (tid) => {
+    if (tabs.length <= 1) return;
+    const next = tabs.filter((t) => t.id !== tid);
+    saveDoc({ ...sheet, tabs: next });
+    if (tab?.id === tid) setTabId(next[0].id);
+  };
+
+  // Mark a computed cell/column running locally, then run + let the saved
+  // truth (returned + republished) settle the final value.
+  const markStatus = (patch) => setSheet((s) => {
+    if (!s || !tab) return s;
+    const n = JSON.parse(JSON.stringify(s));
+    const t = n.tabs.find((x) => x.id === tab.id); if (!t) return s;
+    t.cells = t.cells || {};
+    patch(t); return n;
+  });
+  const onRunCell = async (rowId, colId) => {
+    const col = tab.columns.find((c) => c.id === colId);
+    markStatus((t) => { t.cells[`${rowId}:${colId}`] = { ...(t.cells[`${rowId}:${colId}`] || {}), status: 'running' }; });
+    try {
+      const { cell } = await runCell(id, rowId, col.name, tab.id);
+      markStatus((t) => { t.cells[`${rowId}:${colId}`] = cell; });
+    } catch (e) {
+      markStatus((t) => { t.cells[`${rowId}:${colId}`] = { status: 'failed', error: String(e.message || e) }; });
+    }
+  };
+  const onRunColumn = async (colId) => {
+    const col = tab.columns.find((c) => c.id === colId);
+    for (const r of tab.rows) {
+      markStatus((t) => { t.cells[`${r.id}:${colId}`] = { ...(t.cells[`${r.id}:${colId}`] || {}), status: 'running' }; });
+    }
+    try {
+      await runColumn(id, col.name, tab.id);
+      const fresh = await getSheet(id);      // pull the filled truth
+      setSheet(migrate(fresh.sheet));
+    } catch (e) { setErr(e.message || 'run failed'); }
+  };
+
+  // Thumbnail: debounce a mini-grid PNG capture after the sheet settles, so
+  // the landing card always reflects the latest grid (CG pattern).
+  useEffect(() => {
+    const first = sheet?.tabs?.[0];
+    if (!first || !first.columns?.length) return undefined;
+    const t = window.setTimeout(async () => {
+      try {
+        const png = await sheetToPngBlob(first);
+        if (png) await putThumbnail(id, png);
+      } catch { /* best-effort */ }
+    }, 1500);
+    return () => window.clearTimeout(t);
+  }, [id, sheet]);
+
+  // Resource plumbing: authed blob fetch for inline images; ref chips open
+  // the referenced artifact in its own product (nested sheets stay in-app).
+  const fetchBlobUrl = (path) => fetchThumbUrl(path);
+  const onOpenResource = (ref) => {
+    if (ref.kind === 'sheet' && ref.id) { window.location.hash = `#/s/${ref.id}`; return; }
+    const bases = { slides: 'https://slides.wrapper.work/#/d/', workflow: 'https://app.flowness.ai/#/w/', graph: 'https://app.contextualgraph.ai/#/g/' };
+    const url = ref.url && /^https?:/i.test(ref.url) ? ref.url
+      : ref.id && bases[ref.kind] ? `${bases[ref.kind]}${encodeURIComponent(ref.id)}` : null;
+    if (url) window.open(url, '_blank', 'noreferrer');
+  };
+
+  // Presence: outline the cells other humans are editing (this tab only) and
+  // show their avatars in the banner — the CG/Flowness pattern on awareness.
+  const peerMarks = useMemo(() => {
+    const marks = {};
+    for (const p of collab.peers) {
+      if (p.cell && (!p.tab || !tab || p.tab === tab.id)) marks[p.cell] = { name: p.name, color: p.color };
+    }
+    return marks;
+  }, [collab.peers, tab?.id]);
+  const onActiveCell = (cellKey) => collab.setActiveCell(tab?.id || null, cellKey);
+
+  const grid = useMemo(() => tab && (
+    <SheetGrid sheet={tab} onChange={onChange} onRunCell={onRunCell} onRunColumn={onRunColumn}
+               fetchBlobUrl={fetchBlobUrl} onOpenResource={onOpenResource}
+               peerMarks={peerMarks} onActiveCell={onActiveCell} />
+  ), [sheet, tab, peerMarks]);
+
+  return (
+    <div className="gp-root">
+      <div className="gp-main">
+        <header className="gp-banner">
+          <a className="wordmark" href="#/"><Wordmark size={15} /></a>
+          <a className="pane-btn gp-home" href="#/" title="Home" aria-label="Home"><Home size={16} /></a>
+          <span className="crumb-sep">/</span>
+          <span className="crumb-name" title={meta?.name}>{meta?.name || 'Sheet'}</span>
+          <div className="gp-banner-right">
+            {sheet && tab && <ExportMenu doc={sheet} tab={tab} name={meta?.name} />}
+            <CreditsBadge />
+            <a className="pane-btn gp-help" href={LINKS.docs} target="_blank" rel="noreferrer" title="Documentation"><HelpCircle size={16} /></a>
+            <span className="sh-people">
+              {collab.peers.slice(0, 4).map((p) => (
+                <span key={p.id} className="av sh-peer-dot" style={{ background: p.color }} title={p.name}>
+                  {(p.name || '?').trim().slice(0, 1)}
+                </span>
+              ))}
+              <AvatarMenu />
+            </span>
+          </div>
+        </header>
+        <div className="gp-content sh-content">
+          {err ? <div className="page-note">{err}</div>
+            : !sheet ? <div className="empty-note" style={{ paddingTop: 80 }}>Loading sheet…</div>
+              : grid}
+        </div>
+        {sheet && tabs.length > 0 && (
+          <div className="shg-tabs">
+            <button className="shg-tab-add" onClick={addTab} title="Add sheet">+</button>
+            {tabs.map((t) => (
+              <button key={t.id} className={'shg-tab' + ((tab?.id === t.id) ? ' active' : '')}
+                      onClick={() => setTabId(t.id)}
+                      onDoubleClick={() => setRenamingTab(t.id)}>
+                {renamingTab === t.id ? (
+                  <input className="shg-tab-name-input" defaultValue={t.name} autoFocus
+                         onClick={(e) => e.stopPropagation()}
+                         onBlur={(e) => { setRenamingTab(null); const v = e.target.value.trim(); if (v && v !== t.name) renameTab(t.id, v); }}
+                         onKeyDown={(e) => { if (e.key === 'Enter') e.target.blur(); if (e.key === 'Escape') setRenamingTab(null); }} />
+                ) : (
+                  <>
+                    {t.name}
+                    {tabs.length > 1 && (
+                      <span className="shg-tab-del" title="Delete sheet"
+                            onClick={(e) => { e.stopPropagation(); deleteTab(t.id); }}>×</span>
+                    )}
+                  </>
+                )}
+              </button>
+            ))}
+          </div>
+        )}
+      </div>
+      {!chatCollapsed && <PaneResizer pane={chatPane} />}
+      <ChatColumn
+        sheetId={id}
+        seed={seed}
+        title={meta?.name || 'Copilot'}
+        copilotBuilding={collab.copilotBuilding}
+        collapsed={chatCollapsed}
+        onToggle={() => setChatCollapsed((v) => !v)}
+        width={chatPane.width}
+      />
+    </div>
+  );
+}
diff --git a/kits/sheets/app/src/styles/app.css b/kits/sheets/app/src/styles/app.css
new file mode 100644
index 0000000..96e749f
--- /dev/null
+++ b/kits/sheets/app/src/styles/app.css
@@ -0,0 +1,647 @@
+/* ── App shell ─────────────────────────────────────────────────────────── */
+.shell { min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); }
+
+/* ── Topbar (landing) ──────────────────────────────────────────────────── */
+.topbar {
+  height: 56px; flex-shrink: 0;
+  display: flex; align-items: center; gap: 14px; padding: 0 20px;
+  background: var(--surface); border-bottom: 1px solid var(--line);
+  position: sticky; top: 0; z-index: 30;
+}
+.wordmark {
+  display: inline-flex; align-items: center; gap: 8px;
+  font-size: 16px; font-weight: 700; color: var(--brand); letter-spacing: -0.01em;
+  text-decoration: none; background: none; border: none; cursor: pointer;
+  font-family: inherit; padding: 0;
+}
+.topbar-spacer { flex: 1; }
+.crumb-sep { color: var(--mute-2); }
+.crumb-name {
+  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+  font-size: 13px; font-weight: 600; color: var(--ink);
+}
+.credits {
+  display: inline-flex; align-items: center; gap: 6px;
+  height: 28px; padding: 0 10px; border-radius: var(--r-pill);
+  background: var(--brand-50); border: 1px solid var(--brand-soft);
+  color: var(--brand-ink); font-size: 12.5px; font-weight: 600;
+  font-variant-numeric: tabular-nums;
+}
+
+/* Avatar menu */
+.avmenu-wrap { position: relative; }
+.avmenu {
+  position: absolute; right: 0; top: 40px; width: 220px; z-index: 60;
+  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
+  box-shadow: var(--shadow-2); padding: 6px; display: flex; flex-direction: column;
+}
+.avmenu .who { padding: 10px 12px 8px; }
+.avmenu .who .nm { font-size: 13px; font-weight: 600; color: var(--ink); }
+.avmenu .who .em { font-size: 12px; color: var(--mute); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; }
+.avmenu a, .avmenu button.item {
+  display: flex; align-items: center; gap: 10px;
+  padding: 8px 12px; border-radius: 8px; font-size: 13px; color: var(--ink-2);
+  text-decoration: none; background: none; border: none; cursor: pointer;
+  font-family: inherit; text-align: left; width: 100%;
+}
+.avmenu a:hover, .avmenu button.item:hover { background: var(--line-soft); }
+.avmenu button.item.out { color: #B91C1C; }
+.avmenu button.item.out:hover { background: var(--hot-soft); }
+
+/* ── Landing ───────────────────────────────────────────────────────────── */
+.landing { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 24px 64px; }
+.hero { padding: 64px 0 36px; text-align: center; }
+.hero h1 { margin: 0 0 10px; font-size: 32px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); }
+.hero p.sub { margin: 0 0 26px; font-size: 15px; color: var(--mute); }
+
+/* Prompt box — large rounded chatbox: multi-line textarea on top, action row
+   (attach left, mic + Create right) pinned along the bottom. Light theme. */
+.promptbox {
+  max-width: 720px; margin: 0 auto; padding: 14px 14px 10px;
+  background: var(--surface); border: 1.5px solid var(--line); border-radius: 18px;
+  box-shadow: var(--shadow-2); text-align: left;
+  display: flex; flex-direction: column; gap: 8px;
+}
+.promptbox:focus-within { border-color: var(--brand); box-shadow: 0 0 0 4px rgba(5,150,105,.10), var(--shadow-2); }
+.promptbox textarea {
+  border: none; outline: none; resize: none; font-family: inherit;
+  font-size: 15px; line-height: 1.55; color: var(--ink); background: transparent;
+  min-height: 66px;
+}
+.promptbox textarea::placeholder { color: var(--mute-2); }
+/* wraps: several template chips flow onto extra rows without overflowing */
+.pb-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
+.hero .hint { display: block; font-size: 12.5px; color: var(--mute); }
+
+.section { margin-top: 40px; }
+.section-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
+.section-h h2 { margin: 0; font-size: 16px; font-weight: 600; color: var(--ink); }
+.section-h .hint { font-size: 12.5px; color: var(--mute); }
+
+/* ── Cards with schema thumbnails (templates + my graphs) ──────────────── */
+.thumb {
+  aspect-ratio: 16 / 9; width: 100%;
+  background: var(--surface-2); border-bottom: 1px solid var(--line-soft);
+  display: flex; align-items: center; justify-content: center; overflow: hidden;
+}
+.thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
+.thumb-ph { width: 70%; height: 70%; }
+
+.gcard {
+  display: flex; flex-direction: column; text-align: left; cursor: pointer;
+  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card);
+  box-shadow: var(--shadow-1); overflow: hidden; padding: 0; font-family: inherit;
+}
+.gcard:hover { border-color: var(--brand); box-shadow: var(--shadow-2); }
+.gcard-foot {
+  display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px;
+  border-top: none;
+}
+.gcard-name {
+  flex: 1; min-width: 0; font-size: 13px; font-weight: 600; color: var(--ink);
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.gcard-sub { flex-shrink: 0; font-size: 11.5px; color: var(--mute-2); }
+.gcard-actions { display: inline-flex; gap: 2px; opacity: 0; }
+.gcard.mine:hover .gcard-actions, .gcard.mine:focus-within .gcard-actions { opacity: 1; }
+.iconbtn {
+  width: 26px; height: 26px; border-radius: 7px; border: none; background: transparent;
+  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--mute);
+}
+.iconbtn:hover { background: var(--line-soft); color: var(--ink); }
+.iconbtn.danger:hover { background: var(--hot-soft); color: #B91C1C; }
+.rename-input { font-size: 13px; font-weight: 600; padding: 3px 8px; }
+
+/* Template carousel */
+.carousel-wrap { position: relative; }
+.carousel {
+  display: flex; gap: 12px; overflow-x: auto; scroll-behavior: smooth;
+  padding: 2px; scrollbar-width: none;
+}
+.carousel::-webkit-scrollbar { display: none; }
+.carousel .gcard { flex: 0 0 236px; }
+.car-btn {
+  position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
+  width: 32px; height: 32px; border-radius: 999px;
+  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-2);
+  display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--ink-2);
+}
+.car-btn:hover { border-color: var(--brand); color: var(--brand); }
+.car-btn.left { left: -14px; }
+.car-btn.right { right: -14px; }
+
+/* My graphs grid */
+.ggrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
+
+.empty-note { padding: 36px 16px; text-align: center; color: var(--mute); font-size: 13px; }
+
+/* Skeleton loaders — subtle opacity pulse on a neutral block. Shaped by the
+   call site (or the composed helpers) so real content lands with no shift. */
+.sk {
+  display: inline-block; background: var(--line); border-radius: 6px;
+  animation: sk-pulse 1.5s ease-in-out infinite;
+}
+.sk-line { height: 12px; width: 100%; }
+.sk-card { width: 100%; height: 100%; border-radius: var(--r-card); }
+.sk-thumbnail { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 0; }
+.sk-avatar { width: 32px; height: 32px; border-radius: 999px; }
+.sk-table-row { width: 100%; height: 20px; }
+@keyframes sk-pulse { 0%, 100% { opacity: .45; } 50% { opacity: .8; } }
+@media (prefers-reduced-motion: reduce) { .sk { animation: none; } }
+/* Skeleton graph/template cards ride the real .gcard box; kill hover + cursor. */
+.gcard[aria-hidden="true"] { cursor: default; }
+.gcard[aria-hidden="true"]:hover { border-color: var(--line); box-shadow: var(--shadow-1); }
+.gt-skel-row { cursor: default; }
+.gt-skel-row:hover { background: transparent; }
+.gt-skel-avs { display: inline-flex; }
+.gt-skel-avs .sk + .sk { margin-left: -6px; }
+.sk-canvas { flex: 1; display: flex; align-items: center; justify-content: center; background: var(--surface-2); }
+.sk-canvas-glyph { animation: sk-pulse 1.5s ease-in-out infinite; }
+@media (prefers-reduced-motion: reduce) { .sk-canvas-glyph { animation: none; } }
+
+/* Section tools: search + view switcher on the section header's right */
+.section-tools { display: flex; align-items: center; gap: 8px; }
+.searchbox {
+  display: inline-flex; align-items: center; gap: 6px;
+  height: 30px; padding: 0 10px; border-radius: 8px;
+  background: var(--surface); border: 1px solid var(--line); color: var(--mute);
+}
+.searchbox:focus-within { border-color: var(--brand); color: var(--ink-2); }
+.searchbox input {
+  border: none; outline: none; background: transparent;
+  font-family: inherit; font-size: 12.5px; color: var(--ink); width: 168px;
+}
+.searchbox input::placeholder { color: var(--mute-2); }
+.sb-x {
+  display: inline-flex; align-items: center; justify-content: center;
+  border: none; background: none; padding: 2px; border-radius: 999px;
+  cursor: pointer; color: var(--mute);
+}
+.sb-x:hover { background: var(--line-soft); color: var(--ink); }
+/* Icon-only variant of the segmented switcher (list | grid) */
+.wb-tabs.vt { padding: 3px; gap: 2px; border-radius: 8px; }
+.wb-tabs.vt .wb-tab { padding: 4px 9px; border-radius: 6px; display: inline-flex; align-items: center; }
+
+/* My graphs table (the wireframe's default view) */
+.gtable-wrap {
+  background: var(--surface); border: 1px solid var(--line);
+  border-radius: var(--r-card); box-shadow: var(--shadow-1); overflow: hidden;
+}
+/* Fixed layout so the Name column absorbs the leftover width and long names
+   ellipsize against it (auto layout would widen the column instead). */
+.gtable { width: 100%; border-collapse: collapse; font-size: 13px; table-layout: fixed; }
+.gtable .col-last { width: 140px; }
+.gtable .col-access { width: 170px; }
+.gtable th {
+  text-align: left; font-size: 11.5px; font-weight: 600; color: var(--mute);
+  text-transform: uppercase; letter-spacing: .04em;
+  padding: 10px 14px; background: var(--surface-2);
+}
+.gtable td { padding: 8px 14px; }
+.gtable tbody tr { cursor: pointer; }
+.gtable tbody tr:hover, .gtable tbody tr:focus-within { background: var(--line-soft); }
+.gt-name { display: flex; align-items: center; gap: 12px; min-width: 0; }
+.gt-thumb {
+  width: 58px; height: 34px; flex-shrink: 0; border-radius: 7px; overflow: hidden;
+  background: var(--surface-2); border: 1px solid var(--line-soft);
+}
+.gt-thumb .thumb { width: 100%; height: 100%; aspect-ratio: auto; border-bottom: none; }
+.gt-last { color: var(--mute); font-size: 12.5px; white-space: nowrap; }
+.gtable .gcard-actions { justify-content: flex-end; }
+.gtable tbody tr:hover .gcard-actions, .gtable tbody tr:focus-within .gcard-actions { opacity: 1; }
+.gt-actions { text-align: right; white-space: nowrap; width: 76px; }
+
+/* Access column: overlapping avatar circles (presence treatment, table size) */
+.acc-stack { display: inline-flex; align-items: center; }
+.acc-av {
+  width: 24px; height: 24px; border-radius: 50%; margin-left: -6px;
+  display: inline-flex; align-items: center; justify-content: center;
+  color: #fff; font-size: 10.5px; font-weight: 700; overflow: hidden;
+  border: 2px solid var(--surface); box-sizing: content-box; flex-shrink: 0;
+}
+.acc-stack .acc-av:first-child { margin-left: 0; }
+.acc-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
+.acc-av.acc-more { background: var(--line-soft); color: var(--ink-2); font-size: 10px; }
+
+/* Offscreen stage for the thumbnail self-heal (real render, out of view) */
+.thumb-healer {
+  position: fixed; left: -10000px; top: 0; width: 640px; height: 360px;
+  pointer-events: none;
+}
+
+/* ── Dialogs (no native browser popups) ────────────────────────────────── */
+.dlg-backdrop {
+  position: fixed; inset: 0; z-index: 100;
+  background: rgba(17,24,39,.42);
+  display: flex; align-items: center; justify-content: center; padding: 20px;
+}
+.dlg {
+  width: 420px; max-width: 100%;
+  background: var(--surface); border-radius: 16px; box-shadow: var(--shadow-2);
+  padding: 22px;
+}
+.dlg h3 { margin: 0 0 6px; font-size: 16px; font-weight: 600; color: var(--ink); }
+.dlg .body { font-size: 13px; color: var(--mute); line-height: 1.55; margin-bottom: 16px; }
+.dlg .foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
+
+/* ── Auth (shared by the modal and the /login route) ───────────────────── */
+.auth-page { min-height: 100vh; display: grid; place-items: center; background: var(--bg); padding: 20px; }
+.auth-card {
+  width: 400px; max-width: 100%;
+  background: var(--surface); border: 1px solid var(--line); border-radius: 18px;
+  padding: 32px; box-shadow: var(--shadow-2);
+}
+.auth-card .logo, .dlg .logo { display: flex; justify-content: center; margin-bottom: 18px; }
+.auth-card h1, .dlg h1 { font-size: 20px; font-weight: 700; margin: 0 0 4px; text-align: center; color: var(--ink); }
+.auth-card .sub, .dlg .sub { color: var(--mute); font-size: 13px; margin: 0 0 20px; text-align: center; }
+.field { margin-bottom: 14px; }
+.field label { display: block; font-size: 12px; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; }
+.field-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
+.field-row label { margin-bottom: 0; }
+.link-sm { background: none; border: none; padding: 0; font-size: 12.5px; font-weight: 600; color: var(--brand); cursor: pointer; font-family: inherit; }
+.link-sm:hover { text-decoration: underline; }
+.auth-err { color: #B91C1C; font-size: 13px; margin: 8px 0; }
+.auth-note {
+  font-size: 13px; color: var(--ink); line-height: 1.55;
+  background: var(--brand-50); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px;
+}
+.auth-or { display: flex; align-items: center; gap: 12px; color: var(--mute); font-size: 12px; margin: 14px 0; }
+.auth-or::before, .auth-or::after { content: ''; height: 1px; flex: 1; background: var(--line); }
+.auth-gwrap { display: flex; justify-content: center; min-height: 40px; }
+.auth-switch { font-size: 13px; color: var(--mute); text-align: center; margin: 16px 0 0; }
+.auth-switch button { color: var(--brand); font-weight: 600; background: none; border: none; cursor: pointer; padding: 0; font-size: 13px; font-family: inherit; }
+.auth-switch button:hover { text-decoration: underline; }
+.org-list { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
+
+/* ── Graph page ────────────────────────────────────────────────────────── */
+/* One row at the top of the main column (banner); the chat column on the
+   right owns the FULL viewport height, its own header level with the banner. */
+.gp-root { height: 100vh; display: flex; overflow: hidden; background: var(--bg); }
+.gp-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
+.gp-banner {
+  height: 52px; flex-shrink: 0; position: relative;
+  display: flex; align-items: center; gap: 10px; padding: 0 16px;
+  background: var(--surface); border-bottom: 1px solid var(--line);
+}
+.gp-home { text-decoration: none; }
+.gp-banner-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
+.gp-banner-right a.pane-btn { text-decoration: none; color: var(--ink-2); }
+/* The banner carries NO presence stack (owner call: too busy) — peer
+   presence lives on the canvas (full-name drag indicators, ap-graph.css
+   .dg-drag-badge) and the copilot's building status lives in the chat
+   panel header (.gp-chat-cop below). */
+
+.gp-content { flex: 1; min-height: 0; display: flex; }
+.gp-content > * { flex: 1; min-width: 0; }
+.gp-placeholder { display: flex; padding: 12px; }
+
+/* Segmented switcher — lifted from HarnessRouter's workbench toggle
+   (.wb-tabs/.wb-tab in harnessrouter/src/app/hr.css), restyled via tokens. */
+.wb-tabs {
+  display: flex; gap: 4px; background: var(--brand-50); border: 1px solid var(--line);
+  border-radius: 10px; padding: 4px; width: fit-content;
+}
+.wb-tab {
+  font-size: 13px; font-weight: 600; padding: 6px 16px; border-radius: 7px;
+  cursor: pointer; color: var(--sidebar-mute); border: none; background: transparent;
+  font-family: inherit;
+}
+.wb-tab.active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); }
+.gp-tabs-center { position: absolute; left: 50%; transform: translateX(-50%); }
+
+/* Chat column */
+.gp-chat {
+  flex: 0 0 340px; height: 100vh; display: flex; flex-direction: column; min-height: 0;
+  background: var(--surface); border-left: 1px solid var(--line);
+}
+@media (max-width: 1180px) { .gp-chat { flex: 0 0 300px; } }
+.gp-chat.collapsed { flex: 0 0 44px; }
+.gp-chat-h {
+  height: 52px; flex-shrink: 0; display: flex; align-items: center; gap: 8px;
+  padding: 0 10px; border-bottom: 1px solid var(--line-soft);
+}
+.gp-chat-title {
+  /* Shrinks with ellipsis but does NOT stretch, so the copilot status mark
+     sits right next to the title instead of at the far edge. */
+  flex: 0 1 auto; min-width: 0; font-size: 13px; font-weight: 600; color: var(--ink);
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+/* Copilot building status (status, not presence): the product mark with a
+   soft pulsing ring next to the session title while a turn runs. */
+.gp-chat-cop {
+  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
+  display: inline-flex; align-items: center; justify-content: center;
+  background: var(--brand-soft);
+  animation: cop-pulse 1.6s ease-in-out infinite;
+}
+@keyframes cop-pulse {
+  0%, 100% { box-shadow: 0 0 0 0 rgba(66, 48, 156, 0.45); }
+  55% { box-shadow: 0 0 0 5px rgba(66, 48, 156, 0); }
+}
+
+.chat-body { flex: 1; min-height: 0; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
+.msg { max-width: 88%; padding: 9px 12px; border-radius: 12px; font-size: 13px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
+.msg.user { align-self: flex-end; background: var(--brand); color: #fff; border-bottom-right-radius: 4px; }
+.msg.assistant { align-self: flex-start; background: var(--line-soft); color: var(--ink); border-bottom-left-radius: 4px; }
+.msg.pending { opacity: .65; }
+.chat-status {
+  align-self: center; display: inline-flex; align-items: center; gap: 8px;
+  font-size: 12px; color: var(--mute);
+  background: var(--brand-50); border: 1px solid var(--brand-soft);
+  border-radius: var(--r-pill); padding: 5px 12px;
+}
+.chat-status .pulse {
+  width: 8px; height: 8px; border-radius: 999px; background: var(--warm);
+  animation: cg-pulse 1.4s ease-in-out infinite;
+}
+@keyframes cg-pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
+
+/* Composer — rounded box: textarea on top, +  |  mic + send-arrow row below. */
+.cmp {
+  flex-shrink: 0; margin: 10px; padding: 10px 10px 8px;
+  border: 1.5px solid var(--line); border-radius: 14px; background: var(--surface);
+  display: flex; flex-direction: column; gap: 6px;
+}
+.cmp:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(94,78,190,.12); }
+.cmp textarea {
+  border: none; outline: none; resize: none; font-family: inherit;
+  font-size: 13px; line-height: 1.5; color: var(--ink); background: transparent;
+  max-height: 120px;
+}
+.cmp textarea::placeholder { color: var(--mute-2); }
+.cmp-row { display: flex; align-items: center; gap: 6px; }
+.cmp-icon {
+  width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--line);
+  background: var(--surface); color: var(--mute);
+  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
+}
+.cmp-icon:hover { color: var(--ink); border-color: #CBD0DA; }
+.cmp-icon:disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }
+.cmp-send {
+  width: 30px; height: 30px; flex-shrink: 0; border-radius: 999px; border: none;
+  background: var(--brand); color: #fff; cursor: pointer;
+  display: inline-flex; align-items: center; justify-content: center;
+}
+.cmp-send:hover { background: var(--brand-ink); }
+.cmp-send:disabled { opacity: .5; cursor: not-allowed; pointer-events: none; background: var(--brand); }
+
+/* Generic panel + empty state (Connect / Logs placeholders, chat empty) */
+.pane { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-1); display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
+.pane-empty {
+  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
+  gap: 10px; color: var(--mute); font-size: 13px; text-align: center; padding: 32px;
+}
+.pane-empty .big { font-size: 14px; font-weight: 600; color: var(--ink-2); }
+.pane-empty svg { color: var(--mute-2); }
+
+/* Page loading / error strip */
+.page-note { padding: 40px; text-align: center; color: var(--mute); font-size: 13.5px; flex: 1; }
+
+/* Thumbnail generator (dev harness — #/thumbgen) */
+.tg-stage { width: 640px; height: 360px; position: relative; background: #FAFBFD; border: 1px solid var(--line); }
+
+/* ── Prompt context chips (Template selector) ──────────────────────────── */
+.chip-wrap { position: relative; display: inline-flex; }
+.ctx-chip {
+  display: inline-flex; align-items: center; gap: 6px;
+  height: 28px; padding: 0 10px; border-radius: var(--r-pill);
+  font-size: 12.5px; font-weight: 600; font-family: inherit; cursor: pointer;
+  background: var(--surface); color: var(--ink-2); border: 1px dashed var(--line);
+}
+.ctx-chip:hover { border-color: var(--brand); color: var(--brand-ink); }
+.ctx-chip.set { border-style: solid; background: var(--brand-soft); border-color: var(--brand-soft); color: var(--brand-ink); }
+.ctx-chip-x { display: inline-flex; border-radius: 999px; padding: 1px; }
+.ctx-chip-x:hover { background: rgba(5,150,105,.15); }
+.chip-pop {
+  position: absolute; left: 0; bottom: 36px; z-index: 60; width: 280px;
+  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
+  box-shadow: var(--shadow-2); padding: 8px; display: flex; flex-direction: column; gap: 6px;
+}
+/* Adaptive (fixed) placement: the JS sets top OR bottom + a max-height clamped
+   to the room in the chosen direction. The whole popover honors that cap and
+   the list scrolls inside — never taller than the viewport. */
+.chip-pop-fixed { bottom: auto; overflow: hidden; }
+.chip-pop-fixed .chip-pop-list { max-height: none; flex: 1; min-height: 0; }
+.chip-pop-list { max-height: 260px; overflow: auto; display: flex; flex-direction: column; }
+.chip-pop-note { font-size: 12px; color: var(--mute); padding: 0 4px; }
+.chip-pop-item {
+  display: flex; align-items: center; gap: 8px;
+  text-align: left; font-size: 13px; font-family: inherit; color: var(--ink-2);
+  background: none; border: none; border-radius: 8px; padding: 7px 10px; cursor: pointer;
+}
+.chip-pop-check { width: 15px; flex-shrink: 0; display: inline-flex; color: var(--brand); }
+.chip-pop-item:hover { background: var(--line-soft); color: var(--ink); }
+.chip-pop-item.active { background: var(--brand-soft); color: var(--brand-ink); font-weight: 600; }
+
+/* Inside the inherited studio graph view, match the studio's app-level button
+   typography (studio app.css bumps .btn.sm to 12.5px; CG's base token is 12px). */
+.sp-graph .btn.sm { font-size: 12.5px; }
+
+/* ── Studio panel toggle — lifted verbatim from studio chrome.css ────────── */
+.top-side-toggle {
+  display: inline-flex; align-items: center; justify-content: center;
+  width: 30px; height: 30px; border-radius: 7px; flex-shrink: 0;
+  border: none; background: none; cursor: pointer; color: var(--mute);
+}
+.top-side-toggle:hover { background: rgba(0, 0, 0, .05); color: var(--ink); }
+
+/* ── Streaming chat render — shared UI Core surface (frontend-ui-core/styles/chat.css). ──
+   CG passes its light tokens through the --uic-* contract; the block below is CG's compact
+   density layer (13px panel) on top of the shared structure — the reference example the
+   ui-core README points at. */
+:root {
+  --uic-surface: var(--surface);
+  --uic-line: var(--line);
+  --uic-ink: var(--ink);
+  --uic-ink-2: var(--ink-2);
+  --uic-mute: var(--mute);
+  --uic-brand: var(--brand);
+  --uic-brand-ink: var(--brand-ink);
+  --uic-brand-soft: var(--brand-soft);
+  --uic-brand-faint: var(--brand-50);
+  --uic-ok: var(--ok);
+  --uic-mono: var(--mono);
+  --uic-shadow-1: var(--shadow-1);
+  --uic-font-md: 13px;
+  --uic-turn-pad-x: 0px;
+  --uic-bubble-max-w: 88%;
+  --uic-working-ink: var(--mute);
+}
+.gp-chat .wbx-md { overflow-wrap: break-word; }
+.gp-chat .wbx-md h1 { font-size: 16px; }
+.gp-chat .wbx-md h2 { font-size: 14.5px; }
+.gp-chat .wbx-md h3 { font-size: 13.5px; }
+.gp-chat .wbx-md code { background: var(--line-soft); border: none; font-size: 12px; }
+.gp-chat .wbx-md pre code { font-size: 12px; }
+.gp-chat .wbx-md table { font-size: 12.5px; }
+.gp-chat .wbx-acts-sum { font-size: 12.5px; font-family: inherit; }
+.gp-chat .wbx-act-row { font-family: inherit; }
+.gp-chat .wbx-act-k { font-size: 12.5px; }
+.gp-chat .wbx-act-chip { font-size: 11px; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.gp-chat .wbx-act-v { font-size: 12px; }
+.gp-chat .wbx-act-block-h { font-size: 11px; }
+.gp-chat .wbx-act-pre { font-size: 11px; max-height: 280px; }
+.gp-chat .wbx-working { font-size: 12.5px; }
+.gp-chat .wbx-turnbadge { align-self: flex-start; }
+/* history replay note while the prior conversation loads */
+.chat-hist-note { align-self: center; margin-top: 24px; font-size: 12.5px; color: var(--mute); }
+.chat-skel { display: flex; flex-direction: column; gap: 10px; }
+.sk-msg { display: flex; flex-direction: column; gap: 7px; background: var(--line-soft); }
+.sk-msg.user { align-self: flex-end; background: var(--brand-soft); }
+.sk-msg .sk { background: var(--mute-2); opacity: .5; }
+
+/* ── Responsive layer ────────────────────────────────────────────────────
+   STANDING RULE: every surface must degrade cleanly at narrow widths —
+   verify 1440 / 1024 / 768 / 390 before calling any UI work done.
+
+   Graph banner — the Graph/Connect/Logs switcher stays HORIZONTALLY
+   CENTERED in the banner at every width (it never drifts right). The
+   banner is a size container because its width depends on the resizable
+   chat column, not the viewport. Keep-priority when space runs out:
+   centered tabs > right cluster (credits/help fold per their rules, both
+   still live in the avatar menu) > wordmark text (glyph + home stay until
+   truly tiny). Below 900px viewport the open chat column becomes a fixed
+   right drawer over the canvas and the schema | data panes stack
+   vertically instead of crushing three columns. */
+.gp-banner { container-type: inline-size; }
+@container (max-width: 800px) {
+  .gp-banner .wm-text { display: none; }   /* first to go: the brand text */
+}
+@container (max-width: 750px) {
+  .gp-banner .credits, .gp-banner .gp-help { display: none; }
+  .gp-banner .wb-tab { padding: 6px 12px; }
+}
+@container (max-width: 430px) {
+  .gp-banner .wordmark { display: none; }
+  .gp-banner .wb-tab { padding: 5px 9px; font-size: 12.5px; }
+}
+/* The banner cannot container-query its own padding; a tiny viewport is a
+   reliable proxy for a tiny banner. */
+@media (max-width: 480px) {
+  .gp-banner { padding: 0 10px; gap: 6px; }
+}
+@media (max-width: 900px) {
+  .gp-chat:not(.collapsed) {
+    position: fixed; top: 0; right: 0; bottom: 0; z-index: 90;
+    width: min(86vw, 380px);
+    flex: none !important;             /* beats the inline drag-width basis */
+    box-shadow: -16px 0 40px rgba(15, 23, 42, .22);
+  }
+  .uic-vresize { display: none; }
+  /* While the drawer is open it occludes the banner's right side: recenter
+     the switcher within the VISIBLE strip (never clipped under the drawer)
+     and shed the brand text; the floor keeps it clear of glyph + home. */
+  .gp-root:has(.gp-chat:not(.collapsed)) .gp-banner .wm-text { display: none; }
+  .gp-root:has(.gp-chat:not(.collapsed)) .gp-tabs-center {
+    left: max(200px, calc((100% - min(86vw, 380px)) / 2));
+  }
+}
+@media (max-width: 760px) {
+  .gp-content .dg-shell { flex-direction: column; }
+  .gp-content .dg-pane {
+    flex: 1 1 50% !important;          /* beats the inline split basis */
+    border-right: 0; border-bottom: 1px solid var(--line);
+  }
+  .gp-content .dg-pane:last-child { border-bottom: 0; }
+  .gp-content .dg-pane.collapsed { flex: 0 0 44px !important; }
+  .gp-content .dg-pane.collapsed .dg-pane-h { writing-mode: horizontal-tb; padding: 8px 16px; }
+  .gp-content .dg-divider { display: none; }
+}
+
+/* Landing — the My Graphs table sheds Access, then Last viewed (Name +
+   Actions always stay); header tools wrap under the heading; the prompt
+   box action row wraps; carousel edge buttons yield to touch scrolling. */
+@media (max-width: 760px) {
+  .gtable .col-access { display: none; }
+}
+@media (max-width: 560px) {
+  .landing { padding: 0 14px 48px; }
+  .hero { padding: 40px 0 28px; }
+  .hero h1 { font-size: 24px; }
+  .topbar { padding: 0 14px; }
+  .topbar .credits { display: none; }
+  .promptbox { padding: 12px 12px 8px; }
+  .pb-row { flex-wrap: wrap; }
+  .section-h { flex-wrap: wrap; gap: 10px; }
+  .section-tools { flex: 1 1 100%; }
+  .section-tools .searchbox { flex: 1; }
+  .searchbox input { width: auto; flex: 1; min-width: 0; }
+  .car-btn { display: none; }
+}
+@media (max-width: 500px) {
+  .gtable .col-last { display: none; }
+  .gtable th, .gtable td { padding: 8px 10px; }
+  .gt-actions { width: 64px; }
+}
+
+/* Logs tab (inside gp-content) */
+.logs-pane { flex: 1; min-height: 0; overflow-y: auto; padding: 18px; }
+.logs-events {
+  margin-top: 14px; padding: 12px; max-height: 40vh; overflow: auto;
+  background: var(--surface); border: 1px solid var(--line);
+  border-radius: var(--r-card); font-size: 12px; line-height: 1.5;
+}
+
+/* ── Logs 3-pane (run history · replay canvas · node IO) ────────────────── */
+.logs-3pane { flex: 1; min-height: 0; display: flex; }
+.logs-runs {
+  flex: 0 0 232px; min-height: 0; overflow-y: auto; padding: 10px;
+  background: var(--surface); border-right: 1px solid var(--line);
+}
+.logs-runs-h {
+  display: flex; align-items: center; gap: 8px; padding: 4px 6px 10px;
+  font-size: 12px; font-weight: 700; color: var(--ink-2); text-transform: uppercase; letter-spacing: .04em;
+}
+.logs-run-item {
+  width: 100%; display: flex; align-items: center; gap: 8px;
+  padding: 8px 10px; border-radius: 8px; border: 1px solid transparent;
+  background: transparent; cursor: pointer; font-family: inherit; text-align: left;
+}
+.logs-run-item:hover { background: var(--line-soft); }
+.logs-run-item.active { background: var(--brand-50); border-color: var(--brand-soft); }
+.logs-run-when { font-size: 11.5px; color: var(--ink-2); }
+.logs-run-dur { font-size: 11px; color: var(--mute-2); }
+.logs-run-badge {
+  font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
+  padding: 2px 6px; border-radius: 999px;
+}
+.logs-run-badge.wf-run-running   { background: #DBEAFE; color: #1E40AF; }
+.logs-run-badge.wf-run-succeeded { background: #D1FAE5; color: #047857; }
+.logs-run-badge.wf-run-failed    { background: #FEE2E2; color: #B91C1C; }
+.logs-more {
+  width: 100%; margin-top: 6px; padding: 8px; border-radius: 8px; border: none;
+  background: transparent; color: var(--brand); font-size: 12px; font-weight: 600;
+  cursor: pointer; font-family: inherit;
+}
+.logs-more:hover { background: var(--line-soft); }
+.logs-canvas { flex: 1; min-width: 0; display: flex; }
+.logs-canvas > .wf-editor { flex: 1; }
+
+/* ── Sheet page: grid content + Export menu ─────────────────────────────── */
+.sh-content { padding: 0; overflow: hidden; }
+.sh-content > .shg { flex: 1; min-width: 0; }
+.sh-export { position: relative; }
+.sh-export .pane-btn { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; }
+.sh-export-menu {
+  position: absolute; right: 0; top: 34px; z-index: 40; min-width: 150px;
+  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
+  box-shadow: var(--shadow-2); padding: 5px; display: flex; flex-direction: column;
+}
+.sh-export-menu button {
+  text-align: left; padding: 8px 12px; border: none; background: transparent;
+  border-radius: 7px; font-size: 13px; color: var(--ink-2); cursor: pointer; font-family: inherit;
+}
+.sh-export-menu button:hover { background: var(--line-soft); color: var(--ink); }
+
+/* ── Template preview popup ─────────────────────────────────────────────── */
+.tpl-preview { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
+.tpl-preview-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
+.tpl-preview-h h3 { margin: 0 0 4px; font-size: 17px; }
+.tpl-preview-desc { margin: 0; color: var(--mute); font-size: 13px; }
+.tpl-preview-actions { display: flex; gap: 8px; flex-shrink: 0; }
+.tpl-preview-grid {
+  border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
+  max-height: 420px; display: flex; min-height: 0;
+}
+.tpl-preview-grid .shg { width: 100%; }
+.tpl-preview-note { margin: 0; font-size: 12px; color: var(--mute-2); }
diff --git a/kits/sheets/app/src/styles/tokens.css b/kits/sheets/app/src/styles/tokens.css
new file mode 100644
index 0000000..db5590c
--- /dev/null
+++ b/kits/sheets/app/src/styles/tokens.css
@@ -0,0 +1,154 @@
+/* Sheets design tokens — the ContextualGraph token system re-keyed to the
+   Sheets emerald brand (flat colors, no gradients). */
+:root {
+  --brand: #059669;
+  --brand-ink: #047857;
+  --brand-soft: #A7F3D0;
+  --brand-50: #ECFDF5;
+
+  --hot: #EF4444;
+  --hot-soft: #FEE4E4;
+  --warm: #F59E0B;
+  --warm-soft: #FEF1D6;
+  --cold: #94A3B8;
+  --cold-soft: #EEF1F5;
+  --ok: #10B981;
+  --ok-soft: #DFF6EC;
+  --info: #0EA5E9;
+  --info-soft: #DCF1FB;
+
+  --bg: #F7F8FB;
+  --surface: #FFFFFF;
+  --surface-2: #FAFBFD;
+  --sidebar: #1F2433;
+  --sidebar-2: #2A3145;
+  --sidebar-mute: #8189A1;
+  --sidebar-active: #6EE7B7;
+
+  --ink: #111827;
+  --ink-2: #374151;
+  --mute: #6B7280;
+  --mute-2: #9CA3AF;
+  --line: #E5E7EB;
+  --line-soft: #EFF1F4;
+
+  --r-card: 12px;
+  --r-input: 8px;
+  --r-pill: 999px;
+
+  --shadow-1: 0 1px 2px rgba(17,24,39,.04), 0 1px 1px rgba(17,24,39,.03);
+  --shadow-2: 0 8px 24px -12px rgba(17,24,39,.12), 0 2px 6px -2px rgba(17,24,39,.06);
+
+  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
+  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+}
+
+* { box-sizing: border-box; }
+html, body { margin: 0; padding: 0; }
+body { font-family: var(--font); color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; }
+
+.num { font-variant-numeric: tabular-nums; }
+.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
+
+/* Pill / chip */
+.pill {
+  display: inline-flex; align-items: center; gap: 6px;
+  height: 22px; padding: 0 8px; border-radius: var(--r-pill);
+  font-size: 12px; line-height: 1; font-weight: 500;
+  background: var(--line-soft); color: var(--ink-2);
+  border: 1px solid transparent;
+}
+.pill .dot { width: 6px; height: 6px; border-radius: 999px; background: currentColor; }
+.pill.ok    { background: var(--ok-soft);   color: #047857; }
+.pill.warm  { background: var(--warm-soft); color: #92400E; }
+.pill.info  { background: var(--info-soft); color: #075985; }
+.pill.brand { background: var(--brand-soft); color: var(--brand-ink); }
+
+/* Buttons */
+.btn {
+  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
+  height: 32px; padding: 0 12px; border-radius: var(--r-input);
+  font-size: 13px; font-weight: 500; color: var(--ink-2);
+  background: #fff; border: 1px solid var(--line); cursor: pointer;
+  font-family: inherit;
+  white-space: nowrap;
+}
+.btn:hover { border-color: #CBD0DA; }
+.btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; }
+.btn.primary:hover { background: var(--brand-ink); }
+.btn.danger { background: #fff; border-color: #FCA5A5; color: #B91C1C; }
+.btn.danger:hover { background: var(--hot-soft); }
+.btn.ghost { background: transparent; border-color: transparent; color: var(--mute); }
+.btn.ghost:hover { background: var(--line-soft); color: var(--ink-2); }
+.btn.sm { height: 26px; padding: 0 8px; font-size: 12px; }
+.btn.lg { height: 40px; padding: 0 18px; font-size: 14px; }
+/* Disabled state: drop opacity, swap cursor, and neutralize hover styles. */
+.btn:disabled,
+.btn[disabled] { opacity: .5; cursor: not-allowed; pointer-events: none; }
+.btn:disabled:hover,
+.btn[disabled]:hover { border-color: var(--line); }
+.btn.primary:disabled,
+.btn.primary[disabled] { background: var(--brand); border-color: var(--brand); }
+
+/* Inputs */
+.input, .select, .textarea {
+  width: 100%; font-family: inherit; font-size: 13px; color: var(--ink);
+  background: #fff; border: 1px solid var(--line); border-radius: var(--r-input);
+  padding: 8px 10px;
+}
+.input:focus, .textarea:focus, .select:focus {
+  outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(94,78,190,.12);
+}
+.input.sm { padding: 6px 8px; font-size: 12px; }
+
+/* Custom select: chevron never hugs the border (keep >=30px right padding). */
+.select-wrap { position: relative; display: inline-block; }
+.select-wrap .select {
+  appearance: none; -webkit-appearance: none;
+  padding-right: 34px; cursor: pointer;
+}
+.select-wrap .chev {
+  position: absolute; right: 11px; top: 50%; transform: translateY(-50%);
+  pointer-events: none; color: var(--mute); display: flex;
+}
+
+/* Card */
+.card {
+  background: var(--surface);
+  border: 1px solid var(--line);
+  border-radius: var(--r-card);
+  box-shadow: var(--shadow-1);
+}
+.card-h { padding: 14px 16px; border-bottom: 1px solid var(--line-soft); display: flex; align-items: center; justify-content: space-between; gap: 8px; }
+.card-h h3 { margin: 0; font-size: 14px; font-weight: 600; color: var(--ink); }
+.card-h .sub { color: var(--mute); font-size: 12px; margin-top: 2px; }
+
+/* Avatar circle */
+.av {
+  width: 32px; height: 32px; border-radius: 999px;
+  background: var(--brand);
+  color: #fff; font-size: 12px; font-weight: 600;
+  display: inline-flex; align-items: center; justify-content: center;
+  flex-shrink: 0;
+  border: none; cursor: pointer; font-family: inherit;
+}
+.av.sm { width: 24px; height: 24px; font-size: 10px; }
+
+/* Tabs */
+.tabs { display: flex; gap: 18px; }
+.tab {
+  padding: 10px 2px; font-size: 13px; color: var(--mute); cursor: pointer;
+  border: none; background: none; font-family: inherit;
+  border-bottom: 2px solid transparent;
+}
+.tab.active { color: var(--brand); border-bottom-color: var(--brand); font-weight: 600; }
+
+/* Scrollbars */
+.scroll::-webkit-scrollbar { width: 8px; height: 8px; }
+.scroll::-webkit-scrollbar-thumb { background: #D7DBE3; border-radius: 999px; }
+.scroll::-webkit-scrollbar-track { background: transparent; }
+
+/* Stat number scale + divider (used by the shared studio graph view) */
+.stat-num { font-size: 22px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
+.stat-lbl { font-size: 12px; color: var(--mute); }
+.hr { height: 1px; background: var(--line-soft); margin: 12px 0; border: 0; }
diff --git a/kits/sheets/app/vite.config.js b/kits/sheets/app/vite.config.js
new file mode 100644
index 0000000..b2a028c
--- /dev/null
+++ b/kits/sheets/app/vite.config.js
@@ -0,0 +1,10 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+// Served from the HarnessRouter image at /kits/sheets (see docker/install-kits.sh), so assets
+// must be requested from there rather than from the root.
+export default defineConfig({
+  base: '/kits/sheets/',
+  plugins: [react()],
+  build: { outDir: 'dist', emptyOutDir: true },
+});
diff --git a/kits/sheets/kit.json b/kits/sheets/kit.json
new file mode 100644
index 0000000..6ed4a43
--- /dev/null
+++ b/kits/sheets/kit.json
@@ -0,0 +1,20 @@
+{
+  "id": "sheets",
+  "title": "Sheets",
+  "tagline": "A spreadsheet where a column can be an agent.",
+  "description": "Rows are your data; a harness column runs one of your agents on every row. Point a column at a Harness, build its input from the columns before it, and press Run — the sheet works down the dependency order and fills each cell with what the agent said and made. Everything stays in one file you and the agent both edit.",
+  "icon": "tabler:table",
+  "accent": "#0F9D76",
+  "harness": {
+    "name": "Sheets",
+    "recommended": [
+      { "base": "hermes", "model": "deepseek-v4-pro" },
+      { "base": "codex", "model": "gpt-5.4-mini" },
+      { "base": "claude-code", "model": "claude-opus-5" }
+    ],
+    "system_prompt": "You build and edit spreadsheets.\n\nTHE FILE: ./sheet.json, in your current working directory. That exact path, always. Do not search for it, do not look elsewhere in the tree, and do not treat its absence as a puzzle — on a new sheet it simply does not exist yet and you create it there. It is the single source of truth and the only file the app reads.\n\nRead it before every change and write it back whole. Its schema, and the mistakes that make a sheet fail to load, are in the sheet-design skill — read that skill first, on every request, and validate with its validate_sheet.py before you finish.\n\nA column may be a HARNESS column: it runs another agent once per row. You may configure such a column, but you never execute it — the app runs those, and it will not let a sheet run itself.\n\nWork directly. Every command you spend orienting is a command the person waits through.",
+    "skills": ["sheet-design"]
+  },
+  "app": { "dir": "app", "dist": "dist", "route": "/kits/sheets" },
+  "session": { "artifacts_by": "thread" }
+}

From ea2bc31cf69980a956df1e0f141cd3c87075714f Mon Sep 17 00:00:00 2001
From: richard-epsilla <richard@epsilla.com>
Date: Thu, 13 Aug 2026 03:42:19 -0700
Subject: [PATCH 2/5] =?UTF-8?q?feat(sheets):=20the=20sheets=20kit=20?=
 =?UTF-8?q?=E2=80=94=20a=20column=20that=20runs=20one=20of=20your=20agents?=
 =?UTF-8?q?=20on=20every=20row?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

A sheet is a session on this kit's Harness and its content is ./sheet.json in that session's
workspace, the same shape the slides kit established. What is new is the agent column: it runs a
DIFFERENT harness from the workspace, once per row, with its input built from the columns to its
left — either interpolated into a prompt as {{Column}} or attached as files an earlier agent
column produced.

Column order IS the execution order. An agent column may only read columns earlier in the array,
enforced at config time (the picker only offers earlier columns), at reorder time (a drag that
would break it is refused with the two column names in the message) and at plan time. That one
rule makes the array a topological order by construction, so there is no sort in this kit and no
cycle branch to carry. The hosted product stored a deps[] array, validated it, rendered a checkbox
list for it — and ignored it at execution; dependencies here are derived from the config that
actually feeds the turn, which is the only thing that can be true.

There is no workflow engine in this deployment and no batch endpoint, so the open tab is the
orchestrator. lib/run.js is pure — plan() plus a Runner over an INJECTED dispatcher — which is why
the rules that matter are tested rather than asserted: a cell waits only for its own row, one
failure skips only that row's downstream cells, concurrency is a real ceiling, and Stop clears
queued cells instead of leaving them queued forever. 43 tests, no network.

Cells dispatch with background:true plus a poll rather than a stream: the session id is on the
immediate reply, and a reopened tab has no stream and needs the polling path anyway — streaming
per cell would be a second mechanism for the same job. Every dispatch carries an idempotency key,
because a retry without one starts a SECOND turn on a session that may already be running one, and
two turns on one session destroy that session's workspace. The response and session ids reach
sheet.json before anything else is dispatched, which is what makes reconcile-on-reopen real: a run
interrupted by closing the tab comes back with each cell's actual outcome instead of a row of
cells stuck at "running".

"completed" is not success. A turn that exits cleanly having produced neither text nor a file did
not fill the cell, and it is recorded as failed with that sentence.

Only the last run is retained, per the ask: starting a run clears the cells it owns. The sessions
are never deleted — the reference is dropped, not the work, and the Run confirm says so.

Also here: skills/sheet-design (the contract, plus validate_sheet.py, the twin of model.js's
validate — the slides kit shipped a skill describing tools that did not exist and every deck
rendered blank until it stated the real schema), templates that ship harness_id:"" because a
template cannot know which agents a workspace has, and .github/workflows/kits.yml, which is the
first thing in this repo that builds a kit app before an image bake does.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_013DCjqvx3L4VKAPnFaPe7YJ
---
 .github/workflows/kits.yml                    |   34 +
 kits.json                                     |    3 +-
 kits/sheets/CREDITS.md                        |   16 +
 kits/sheets/README.md                         |   56 +
 kits/sheets/app/.gitignore                    |    1 +
 kits/sheets/app/package-lock.json             | 3448 +++++++++++++++++
 kits/sheets/app/package.json                  |   17 +-
 kits/sheets/app/src/App.jsx                   |   40 +
 kits/sheets/app/src/app.jsx                   |   49 -
 kits/sheets/app/src/components/CellDrawer.jsx |  159 +
 kits/sheets/app/src/components/ChatPanel.jsx  |  167 +-
 kits/sheets/app/src/components/Dialog.jsx     |   61 -
 .../sheets/app/src/components/HarnessCell.jsx |   85 +
 .../app/src/components/HarnessConfig.jsx      |  155 +
 kits/sheets/app/src/components/PasteRows.jsx  |  127 +
 kits/sheets/app/src/components/RunControl.jsx |   97 +
 kits/sheets/app/src/components/Thumbs.jsx     |   84 -
 kits/sheets/app/src/components/Topbar.jsx     |   78 +-
 kits/sheets/app/src/lib/auth.js               |    4 +-
 kits/sheets/app/src/lib/cell.js               |  203 +
 kits/sheets/app/src/lib/collab.js             |   34 -
 kits/sheets/app/src/lib/copilot.js            |   72 +-
 kits/sheets/app/src/lib/exportSheet.js        |   59 +
 kits/sheets/app/src/lib/model.js              |  322 ++
 kits/sheets/app/src/lib/model.test.mjs        |  203 +
 kits/sheets/app/src/lib/paste.js              |  107 +
 kits/sheets/app/src/lib/run.js                |  306 ++
 kits/sheets/app/src/lib/run.test.mjs          |  288 ++
 kits/sheets/app/src/lib/sh.js                 |  209 +-
 kits/sheets/app/src/lib/templates.js          |   22 +
 kits/sheets/app/src/main.jsx                  |    4 +-
 kits/sheets/app/src/pages/Landing.jsx         |  850 +---
 kits/sheets/app/src/pages/SheetPage.jsx       |  815 ++--
 kits/sheets/app/src/styles/app.css            |  368 +-
 kits/sheets/app/src/styles/tokens.css         |   20 +
 kits/sheets/app/vite.config.js                |   14 +-
 kits/sheets/kit.json                          |   17 +-
 kits/sheets/skills/sheet-design/SKILL.md      |  117 +
 .../skills/sheet-design/validate_sheet.py     |  267 ++
 kits/sheets/templates/templates.json          |   92 +
 40 files changed, 7414 insertions(+), 1656 deletions(-)
 create mode 100644 .github/workflows/kits.yml
 create mode 100644 kits/sheets/CREDITS.md
 create mode 100644 kits/sheets/README.md
 create mode 100644 kits/sheets/app/.gitignore
 create mode 100644 kits/sheets/app/package-lock.json
 create mode 100644 kits/sheets/app/src/App.jsx
 delete mode 100644 kits/sheets/app/src/app.jsx
 create mode 100644 kits/sheets/app/src/components/CellDrawer.jsx
 delete mode 100644 kits/sheets/app/src/components/Dialog.jsx
 create mode 100644 kits/sheets/app/src/components/HarnessCell.jsx
 create mode 100644 kits/sheets/app/src/components/HarnessConfig.jsx
 create mode 100644 kits/sheets/app/src/components/PasteRows.jsx
 create mode 100644 kits/sheets/app/src/components/RunControl.jsx
 delete mode 100644 kits/sheets/app/src/components/Thumbs.jsx
 create mode 100644 kits/sheets/app/src/lib/cell.js
 delete mode 100644 kits/sheets/app/src/lib/collab.js
 create mode 100644 kits/sheets/app/src/lib/exportSheet.js
 create mode 100644 kits/sheets/app/src/lib/model.js
 create mode 100644 kits/sheets/app/src/lib/model.test.mjs
 create mode 100644 kits/sheets/app/src/lib/paste.js
 create mode 100644 kits/sheets/app/src/lib/run.js
 create mode 100644 kits/sheets/app/src/lib/run.test.mjs
 create mode 100644 kits/sheets/app/src/lib/templates.js
 create mode 100644 kits/sheets/skills/sheet-design/SKILL.md
 create mode 100644 kits/sheets/skills/sheet-design/validate_sheet.py
 create mode 100644 kits/sheets/templates/templates.json

diff --git a/.github/workflows/kits.yml b/.github/workflows/kits.yml
new file mode 100644
index 0000000..e601ae8
--- /dev/null
+++ b/.github/workflows/kits.yml
@@ -0,0 +1,34 @@
+# Build every kit app on every PR.
+#
+# Nothing built these before, and a broken kit only showed up at image bake — where the failure is
+# a docker layer, not a diff. An undefined JSX identifier does not even fail there: it is a
+# runtime error, so it ships. This is the cheapest place to catch both.
+name: kits
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    strategy:
+      fail-fast: false
+      matrix:
+        kit: [slides, sheets]
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+      # Not `npm ci` at the repo root: install-kits.sh cds into each app and resolves against that
+      # app's own lockfile, so hoisting here would test a tree the image never has.
+      - run: npm ci
+        working-directory: kits/${{ matrix.kit }}/app
+      - run: npm test --if-present
+        working-directory: kits/${{ matrix.kit }}/app
+      - run: npm run build
+        working-directory: kits/${{ matrix.kit }}/app
+      - name: dist exists
+        run: test -d kits/${{ matrix.kit }}/app/dist
diff --git a/kits.json b/kits.json
index e4384e4..782048e 100644
--- a/kits.json
+++ b/kits.json
@@ -13,6 +13,7 @@
     "so adding a kit does not mean editing this file beyond one line."
   ],
   "kits": [
-    { "name": "slides", "include": true }
+    { "name": "slides", "include": true },
+    { "name": "sheets", "include": true }
   ]
 }
diff --git a/kits/sheets/CREDITS.md b/kits/sheets/CREDITS.md
new file mode 100644
index 0000000..8503bb4
--- /dev/null
+++ b/kits/sheets/CREDITS.md
@@ -0,0 +1,16 @@
+# Credits
+
+## Templates
+
+The starting sheets in `templates/templates.json` are original to this kit.
+
+## Components
+
+The grid, the conversation surface, the dialogs and the HarnessRouter transport come from
+**[reifyui](https://www.npmjs.com/package/reifyui)** (MIT), which is where they live so that a
+second kit does not start a second copy of them.
+
+## Spreadsheet export
+
+`.xlsx` export uses **[SheetJS](https://sheetjs.com/)** (`xlsx`, Apache-2.0), loaded only when
+someone actually exports one.
diff --git a/kits/sheets/README.md b/kits/sheets/README.md
new file mode 100644
index 0000000..b7c20f7
--- /dev/null
+++ b/kits/sheets/README.md
@@ -0,0 +1,56 @@
+# Sheets
+
+A spreadsheet where a column can be an agent. Rows are your data; an **agent column** runs one of
+your other agents once per row, builds its input from the columns to its left, and fills each cell
+with what that agent said and made.
+
+Launch it from **Starter Kits** in the HarnessRouter console. That provisions the Harness this app
+talks to; nothing else is deployed and nothing is configured.
+
+## How it works
+
+- **One session is one sheet.** The sheet list is this Harness's session list, and a sheet's
+  content is `sheet.json` in that session's workspace. There is no database.
+- **The app is served by the HarnessRouter image** at `/kits/sheets`, same-origin with the
+  console, which is why it needs no API key and no login of its own.
+- **Column order is execution order.** An agent column may only read columns earlier in the sheet,
+  which makes the column list a valid running order by construction — there is no graph to sort
+  and no cycle to handle.
+- **The run happens in your browser tab.** There is no workflow engine in this deployment, so the
+  page is the orchestrator: it walks the cells in dependency order with a concurrency limit you
+  choose. Cells already started finish if you leave; nothing new starts, and the page says so
+  before you press Run.
+- **Each cell is its own conversation.** One session per cell, titled for its column and row, so
+  every result is a real conversation you can open in the console and read.
+- **Only the last run is kept.** Starting a run clears the cells it owns. The conversations are
+  never deleted — you drop the reference, not the work.
+
+## What's in the folder
+
+| Path | What |
+|---|---|
+| `kit.json` | The Harness this kit needs, and where its app is served |
+| `skills/sheet-design/` | The `sheet.json` contract and how to design columns — read before anything is written |
+| `templates/templates.json` | Starting points, including one with agent columns |
+| `app/` | The UI |
+
+## Working on the app
+
+```
+cd app
+npm install
+npm test          # the document rules and the run planner, no network needed
+npm run build
+```
+
+`src/lib` is deliberately free of React and of the network:
+
+| File | What |
+|---|---|
+| `model.js` | The document: ids, references, interpolation, and every way a sheet can be wrong |
+| `run.js` | `plan()` and the `Runner` — what would run, and the walk, over an injected dispatcher |
+| `cell.js` | The dispatcher: one cell, one turn |
+| `sh.js` | What "sheet" adds on top of `reifyui/harness` |
+
+`model.test.mjs` and `run.test.mjs` cover both. `skills/sheet-design/validate_sheet.py` is the
+agent-side twin of `model.js`'s `validate()`; if the two ever disagree, the app is right.
diff --git a/kits/sheets/app/.gitignore b/kits/sheets/app/.gitignore
new file mode 100644
index 0000000..364fdec
--- /dev/null
+++ b/kits/sheets/app/.gitignore
@@ -0,0 +1 @@
+public/
diff --git a/kits/sheets/app/package-lock.json b/kits/sheets/app/package-lock.json
new file mode 100644
index 0000000..a918161
--- /dev/null
+++ b/kits/sheets/app/package-lock.json
@@ -0,0 +1,3448 @@
+{
+  "name": "harnessrouter-kit-sheets",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "harnessrouter-kit-sheets",
+      "dependencies": {
+        "highlight.js": "^11.10.0",
+        "lucide-react": "^0.469.0",
+        "react": "^18.3.1",
+        "react-dom": "^18.3.1",
+        "react-markdown": "^9.0.1",
+        "reifyui": "^0.5.1",
+        "remark-gfm": "^4.0.0",
+        "xlsx": "^0.18.5"
+      },
+      "devDependencies": {
+        "@vitejs/plugin-react": "^4.3.4",
+        "vite": "^6.0.7"
+      }
+    },
+    "node_modules/@babel/code-frame": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.29.7.tgz",
+      "integrity": "sha512-Aup7aUOfpbAUg2ROOJN6Iw5f9DMBlzu0mIkm/malLQFN/YQgO48wCj0Kxa3sEHJvPVFg7siR+qRInwXd2qhQKw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-validator-identifier": "^7.29.7",
+        "js-tokens": "^4.0.0",
+        "picocolors": "^1.1.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/compat-data": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.29.7.tgz",
+      "integrity": "sha512-locTkQyKvwIEgBzVrn8693ebc97F2U8ZHjbXwDXJ5Fn2TCpNwTlKcaKLkdHop5c/icOFE7qt7Q9JC5hnKNa6Gg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/core": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.29.7.tgz",
+      "integrity": "sha512-RgHBCvtjbOK2gXSNBNIkNoEc9qoVEtau3hj8gEqKQuL3HZAibKarWFEI3Lfm6EYKkLalOh8eSrj9b+ch9H/VBA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.29.7",
+        "@babel/generator": "^7.29.7",
+        "@babel/helper-compilation-targets": "^7.29.7",
+        "@babel/helper-module-transforms": "^7.29.7",
+        "@babel/helpers": "^7.29.7",
+        "@babel/parser": "^7.29.7",
+        "@babel/template": "^7.29.7",
+        "@babel/traverse": "^7.29.7",
+        "@babel/types": "^7.29.7",
+        "@jridgewell/remapping": "^2.3.5",
+        "convert-source-map": "^2.0.0",
+        "debug": "^4.1.0",
+        "gensync": "^1.0.0-beta.2",
+        "json5": "^2.2.3",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/babel"
+      }
+    },
+    "node_modules/@babel/generator": {
+      "version": "7.29.8",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.29.8.tgz",
+      "integrity": "sha512-gZbepsdh3WDtgZKWL+vTPh71LSBrm/Y4/QDZBVCcYfmeTEEuoOYwlSy+G1StfJg+/Zy550u/3TATbm7qDbbMtg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.29.8",
+        "@babel/types": "^7.29.8",
+        "@jridgewell/gen-mapping": "^0.3.12",
+        "@jridgewell/trace-mapping": "^0.3.28",
+        "jsesc": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-compilation-targets": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.29.7.tgz",
+      "integrity": "sha512-wem6WaBj4NaVYVdNhLPPVacES6ZJ+KBBfSkTMD3YZxbP3rm3Di85tJU5ljaUNhaOynt+Aj0xruhYuzQBt8n71g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/compat-data": "^7.29.7",
+        "@babel/helper-validator-option": "^7.29.7",
+        "browserslist": "^4.24.0",
+        "lru-cache": "^5.1.1",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-globals": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-globals/-/helper-globals-7.29.7.tgz",
+      "integrity": "sha512-3nQVUAtvkKH9zahfWgw96Jc/uFOmjACE1kQz82E2lqWmHBgjzbNlsC22nuQTfahmWeQtTq5nQ/4Nnd2A1wj4zA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-module-imports": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.29.7.tgz",
+      "integrity": "sha512-ejHwrQQYcm9xnTivShn2IDOlIzInN34AXskvq9QicvCtEzq1Vzclu/tKF8Jq1Cg8JG2GL6/EmjgsCT7lXepE3g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/traverse": "^7.29.7",
+        "@babel/types": "^7.29.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-module-transforms": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.29.7.tgz",
+      "integrity": "sha512-UPUVSyXbOh627KiCIGQSgwWzGeBKLkaJ9PJEdrngIwMSzxLR4jS4+f1f1jb7VzBbg8nFLaYotvVPFCTqdrmTAg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.29.7",
+        "@babel/helper-validator-identifier": "^7.29.7",
+        "@babel/traverse": "^7.29.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/helper-plugin-utils": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.29.7.tgz",
+      "integrity": "sha512-G7sHYigPY17oO5SYWnfD/0MTBwVR781S/JI643e/JhUYgVgWE/61SoW3NH9KWUKyKq5LVh3npif99Wkt6j86Jw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-string-parser": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.29.7.tgz",
+      "integrity": "sha512-Pb5ijPrZ89GDH8223L4UP8i6QApWxs04RbPQJTeWDV0/keR2E36MeKnyr6LYmUUvqRRI+Iv87SuF1W6ErINzYw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-identifier": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.29.7.tgz",
+      "integrity": "sha512-qehxGkRj55h/ff8EMaJ+cYhyaKlHIxqYDn682wQD7RNp9UujOQsHog2uS0r2vzr4pW+sXf90NeeayjcNaX3fFg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-option": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.29.7.tgz",
+      "integrity": "sha512-N9ZErrD+yW5geCDtBqnOoxmR8+tNKiGuxKlDpuJxfsqpa2dFcexaziGAE/qoHLiDDreVNMupxGmSoNlyvsA3gw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helpers": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.29.7.tgz",
+      "integrity": "sha512-1k2lAGRMfHTcwuNYcCNUmaUffmQv8KWMfh2iJUUeRlwlwH4FdNG7mfPI10NPfLHJFThE4Tyr4mv7kTNZOiPuBg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/template": "^7.29.7",
+        "@babel/types": "^7.29.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/parser": {
+      "version": "7.29.8",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.29.8.tgz",
+      "integrity": "sha512-E8lTAYNB1KW+FH+VGJuZM1ioAx2E6oVlvQFRrf5P8ZZmsiJXYAD9vTFV7yyEURNzgh1dFqMZuO6tUwcARbqFCA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.29.8"
+      },
+      "bin": {
+        "parser": "bin/babel-parser.js"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-react-jsx-self": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.29.7.tgz",
+      "integrity": "sha512-TL0hMc9xzy86VD31nUiwzd5otRAcyEPcsegCxolO0PvcXuH1v0kECe/UIznYFihpkvU5wg/jk4v0TTEFfm53fw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.29.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-react-jsx-source": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.29.7.tgz",
+      "integrity": "sha512-06IyK09H3wi4cGbhDBwp5gUGo0IKtnYa8tyTiephirPCK6fbobVGiXMMI5zLQ4aKEYP3wZ3ArU44o+8KMrSG/Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.29.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/template": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.29.7.tgz",
+      "integrity": "sha512-puq+Gf35oI24FeN11LkoUQFqv9uwNeWpxXZi/Ji3rRIoKAzKnxRaZ+Gkj0vKS9ZCiTESfng1N9LyOyXvo+m+Gg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.29.7",
+        "@babel/parser": "^7.29.7",
+        "@babel/types": "^7.29.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/traverse": {
+      "version": "7.29.8",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.29.8.tgz",
+      "integrity": "sha512-I5z7H3bf/41ktsNVLtpN0wAa336HkqIHQ5BuPLEhTkt1jVSyZpeNKIzTgEWmlxjdg81R0IgUCcaE+Ok3NvrfZg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.29.7",
+        "@babel/generator": "^7.29.8",
+        "@babel/helper-globals": "^7.29.7",
+        "@babel/parser": "^7.29.8",
+        "@babel/template": "^7.29.7",
+        "@babel/types": "^7.29.8",
+        "debug": "^4.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/types": {
+      "version": "7.29.8",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.29.8.tgz",
+      "integrity": "sha512-Vj1jF3cPfxg7OAfoI7QnVKLoILlm2JF9pnVHrX8qx7AHMiYWT+NDAA7jChlNgRS4WTLc/fD1lXLmPixluj+3Gg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-string-parser": "^7.29.7",
+        "@babel/helper-validator-identifier": "^7.29.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@esbuild/aix-ppc64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.25.12.tgz",
+      "integrity": "sha512-Hhmwd6CInZ3dwpuGTF8fJG6yoWmsToE+vYgD4nytZVxcu1ulHpUQRAB1UJ8+N1Am3Mz4+xOByoQoSZf4D+CpkA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "aix"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/android-arm": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.25.12.tgz",
+      "integrity": "sha512-VJ+sKvNA/GE7Ccacc9Cha7bpS8nyzVv0jdVgwNDaR4gDMC/2TTRc33Ip8qrNYUcpkOHUT5OZ0bUcNNVZQ9RLlg==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/android-arm64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.25.12.tgz",
+      "integrity": "sha512-6AAmLG7zwD1Z159jCKPvAxZd4y/VTO0VkprYy+3N2FtJ8+BQWFXU+OxARIwA46c5tdD9SsKGZ/1ocqBS/gAKHg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/android-x64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.25.12.tgz",
+      "integrity": "sha512-5jbb+2hhDHx5phYR2By8GTWEzn6I9UqR11Kwf22iKbNpYrsmRB18aX/9ivc5cabcUiAT/wM+YIZ6SG9QO6a8kg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/darwin-arm64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.25.12.tgz",
+      "integrity": "sha512-N3zl+lxHCifgIlcMUP5016ESkeQjLj/959RxxNYIthIg+CQHInujFuXeWbWMgnTo4cp5XVHqFPmpyu9J65C1Yg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/darwin-x64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.25.12.tgz",
+      "integrity": "sha512-HQ9ka4Kx21qHXwtlTUVbKJOAnmG1ipXhdWTmNXiPzPfWKpXqASVcWdnf2bnL73wgjNrFXAa3yYvBSd9pzfEIpA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/freebsd-arm64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.25.12.tgz",
+      "integrity": "sha512-gA0Bx759+7Jve03K1S0vkOu5Lg/85dou3EseOGUes8flVOGxbhDDh/iZaoek11Y8mtyKPGF3vP8XhnkDEAmzeg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/freebsd-x64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.25.12.tgz",
+      "integrity": "sha512-TGbO26Yw2xsHzxtbVFGEXBFH0FRAP7gtcPE7P5yP7wGy7cXK2oO7RyOhL5NLiqTlBh47XhmIUXuGciXEqYFfBQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-arm": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.25.12.tgz",
+      "integrity": "sha512-lPDGyC1JPDou8kGcywY0YILzWlhhnRjdof3UlcoqYmS9El818LLfJJc3PXXgZHrHCAKs/Z2SeZtDJr5MrkxtOw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-arm64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.25.12.tgz",
+      "integrity": "sha512-8bwX7a8FghIgrupcxb4aUmYDLp8pX06rGh5HqDT7bB+8Rdells6mHvrFHHW2JAOPZUbnjUpKTLg6ECyzvas2AQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-ia32": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.25.12.tgz",
+      "integrity": "sha512-0y9KrdVnbMM2/vG8KfU0byhUN+EFCny9+8g202gYqSSVMonbsCfLjUO+rCci7pM0WBEtz+oK/PIwHkzxkyharA==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-loong64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.25.12.tgz",
+      "integrity": "sha512-h///Lr5a9rib/v1GGqXVGzjL4TMvVTv+s1DPoxQdz7l/AYv6LDSxdIwzxkrPW438oUXiDtwM10o9PmwS/6Z0Ng==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-mips64el": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.25.12.tgz",
+      "integrity": "sha512-iyRrM1Pzy9GFMDLsXn1iHUm18nhKnNMWscjmp4+hpafcZjrr2WbT//d20xaGljXDBYHqRcl8HnxbX6uaA/eGVw==",
+      "cpu": [
+        "mips64el"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-ppc64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.25.12.tgz",
+      "integrity": "sha512-9meM/lRXxMi5PSUqEXRCtVjEZBGwB7P/D4yT8UG/mwIdze2aV4Vo6U5gD3+RsoHXKkHCfSxZKzmDssVlRj1QQA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-riscv64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.25.12.tgz",
+      "integrity": "sha512-Zr7KR4hgKUpWAwb1f3o5ygT04MzqVrGEGXGLnj15YQDJErYu/BGg+wmFlIDOdJp0PmB0lLvxFIOXZgFRrdjR0w==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-s390x": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.25.12.tgz",
+      "integrity": "sha512-MsKncOcgTNvdtiISc/jZs/Zf8d0cl/t3gYWX8J9ubBnVOwlk65UIEEvgBORTiljloIWnBzLs4qhzPkJcitIzIg==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-x64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.25.12.tgz",
+      "integrity": "sha512-uqZMTLr/zR/ed4jIGnwSLkaHmPjOjJvnm6TVVitAa08SLS9Z0VM8wIRx7gWbJB5/J54YuIMInDquWyYvQLZkgw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/netbsd-arm64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.25.12.tgz",
+      "integrity": "sha512-xXwcTq4GhRM7J9A8Gv5boanHhRa/Q9KLVmcyXHCTaM4wKfIpWkdXiMog/KsnxzJ0A1+nD+zoecuzqPmCRyBGjg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/netbsd-x64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.25.12.tgz",
+      "integrity": "sha512-Ld5pTlzPy3YwGec4OuHh1aCVCRvOXdH8DgRjfDy/oumVovmuSzWfnSJg+VtakB9Cm0gxNO9BzWkj6mtO1FMXkQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/openbsd-arm64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.25.12.tgz",
+      "integrity": "sha512-fF96T6KsBo/pkQI950FARU9apGNTSlZGsv1jZBAlcLL1MLjLNIWPBkj5NlSz8aAzYKg+eNqknrUJ24QBybeR5A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/openbsd-x64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.25.12.tgz",
+      "integrity": "sha512-MZyXUkZHjQxUvzK7rN8DJ3SRmrVrke8ZyRusHlP+kuwqTcfWLyqMOE3sScPPyeIXN/mDJIfGXvcMqCgYKekoQw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/openharmony-arm64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.25.12.tgz",
+      "integrity": "sha512-rm0YWsqUSRrjncSXGA7Zv78Nbnw4XL6/dzr20cyrQf7ZmRcsovpcRBdhD43Nuk3y7XIoW2OxMVvwuRvk9XdASg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openharmony"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/sunos-x64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.25.12.tgz",
+      "integrity": "sha512-3wGSCDyuTHQUzt0nV7bocDy72r2lI33QL3gkDNGkod22EsYl04sMf0qLb8luNKTOmgF/eDEDP5BFNwoBKH441w==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "sunos"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/win32-arm64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.25.12.tgz",
+      "integrity": "sha512-rMmLrur64A7+DKlnSuwqUdRKyd3UE7oPJZmnljqEptesKM8wx9J8gx5u0+9Pq0fQQW8vqeKebwNXdfOyP+8Bsg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/win32-ia32": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.25.12.tgz",
+      "integrity": "sha512-HkqnmmBoCbCwxUKKNPBixiWDGCpQGVsrQfJoVGYLPT41XWF8lHuE5N6WhVia2n4o5QK5M4tYr21827fNhi4byQ==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/win32-x64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.25.12.tgz",
+      "integrity": "sha512-alJC0uCZpTFrSL0CCDjcgleBXPnCrEAhTBILpeAp7M/OFgoqtAetfBzX0xM00MUsVVPpVjlPuMbREqnZCXaTnA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@jridgewell/gen-mapping": {
+      "version": "0.3.13",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
+      "integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.0",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "node_modules/@jridgewell/remapping": {
+      "version": "2.3.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/remapping/-/remapping-2.3.5.tgz",
+      "integrity": "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "node_modules/@jridgewell/resolve-uri": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
+      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.5.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
+      "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.31",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz",
+      "integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/resolve-uri": "^3.1.0",
+        "@jridgewell/sourcemap-codec": "^1.4.14"
+      }
+    },
+    "node_modules/@napi-rs/lzma-linux-x64-gnu": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/@napi-rs/lzma-linux-x64-gnu/-/lzma-linux-x64-gnu-1.5.1.tgz",
+      "integrity": "sha512-oTXEIha4SsuXdTA4Iyskj0kpdx2yVXdhd75c2v3xGrHFfVMsbhTPZU/nMPL4sWKo4pBHm3aucLaqGlF696dTyQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^22.20 || ^24.12 || >=25"
+      }
+    },
+    "node_modules/@rolldown/pluginutils": {
+      "version": "1.0.0-beta.27",
+      "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.27.tgz",
+      "integrity": "sha512-+d0F4MKMCbeVUJwG96uQ4SgAznZNSq93I3V+9NHA4OpvqG8mRCpGdKmK8l/dl02h2CCDHwW2FqilnTyDcAnqjA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@rollup/rollup-android-arm-eabi": {
+      "version": "4.62.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.62.4.tgz",
+      "integrity": "sha512-RrPokAb7dmbxFoeO3TloqHyOjgye8RkBhSqmp4aJMIex4c9r46ZstPnleDQOq1t46VOVjwIuwNogIqbodV1Vvg==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@rollup/rollup-android-arm64": {
+      "version": "4.62.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.62.4.tgz",
+      "integrity": "sha512-JKuJc+pnpks2pjy7L/N3v/cAkZxYlnmuZoD840ldbMI5KDbC4iO9NKwPKYdjYFCMAIIlBzYSFHxIJVYzRo2/8A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@rollup/rollup-darwin-arm64": {
+      "version": "4.62.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.62.4.tgz",
+      "integrity": "sha512-krw5uS2STmvJ02x0uTXHbqQNuz+9eZ1iw+qXk9dmW2gvV4jV7O2hEoOnuhFrpOPiel1mBFtqbxYZZtC46hXLOw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@rollup/rollup-darwin-x64": {
+      "version": "4.62.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.62.4.tgz",
+      "integrity": "sha512-wsTxtgApb4PrOsNJIm0FZ1h3WvCC+k9uxLJ4ad75hgoS4NiRes2SoJFlDAyMwiUY8IssDqGcHbXuN0sx1tfF1A==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@rollup/rollup-freebsd-arm64": {
+      "version": "4.62.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.62.4.tgz",
+      "integrity": "sha512-GUOnQlyZe3yAXhWOtOMsn5Qkrv5E5mZXa0thbARWi5Ei2szlVXJFQhddZ4HbAzh8q92w5twp+CQvs/eFanz9YQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
+    },
+    "node_modules/@rollup/rollup-freebsd-x64": {
+      "version": "4.62.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.62.4.tgz",
+      "integrity": "sha512-/Y7f3QuxjzPKsjA/rfEDa3+0vXqyjmJ50Ln8dPpCmWkKTrUoWHG1cWhTqaAMLob2m2nESWuC7yGrREz019Ztqg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
+      "version": "4.62.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.62.4.tgz",
+      "integrity": "sha512-81wiiX3v7aqy+T+bT61TJ78yJjRquqFFTTbAPt08imfQQzkPIW8t6aJbkTagtCCrXMNc9D66+geqlK7ydLPNqA==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm-musleabihf": {
+      "version": "4.62.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.62.4.tgz",
+      "integrity": "sha512-9kmDIvNZqdoHOBZgNtpTBeLWYO/LVipM3H/j62P8848/l/VPEQL6N3uxU9pvP1oZAsXyC2MEnFP3ovRjo7WYNQ==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm64-gnu": {
+      "version": "4.62.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.62.4.tgz",
+      "integrity": "sha512-CcnXHWnXg69g+DX5VWL3FHts3qMRN2uVEHX+BZvGLdd07/gXkn3ePjYtO1LDJvxkGKVHMclKBRa1QUTH+6toYQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm64-musl": {
+      "version": "4.62.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.62.4.tgz",
+      "integrity": "sha512-iFOibiHnTRuhrWLlRsOQFdZJJIa7S8OwkneJr4ocALP16u5yk6lWLINFwhHaEqBFMsKDUZofLkGos7+CPzGB3g==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-loong64-gnu": {
+      "version": "4.62.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-gnu/-/rollup-linux-loong64-gnu-4.62.4.tgz",
+      "integrity": "sha512-XnWYMI7euHlb5a871xPja+Gm7DRCFU+FGRrtS2sMq9N8FvqtpagUy6gD4YOemC5MRk9xbh8+jYMEJbigFQwsgA==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-loong64-musl": {
+      "version": "4.62.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-musl/-/rollup-linux-loong64-musl-4.62.4.tgz",
+      "integrity": "sha512-qGDAlO0U8xedCcsdRm9oaoQY8DAx/QT7uIxJWhCdx0ceIWX783UC9QSYkdpzAe29wNiVfp24+bZdQmn49o45SQ==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-ppc64-gnu": {
+      "version": "4.62.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.62.4.tgz",
+      "integrity": "sha512-ru4H6ezD7ysA5EiEK6qkkaEb4modH8CTej6kUy/gQi20u3kB3G7Zn8snXXkeJSCOFKG/rbPPtM/+9Wgas1961w==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-ppc64-musl": {
+      "version": "4.62.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-musl/-/rollup-linux-ppc64-musl-4.62.4.tgz",
+      "integrity": "sha512-2W4MO5WQVJnbJaZdvDb9rhBDuFU1nKIepPFpJUBsTh2k1YY2g+ODViaWuyOAjQ5cOP7NvrvLzt3wvHOoiAvc7w==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-riscv64-gnu": {
+      "version": "4.62.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.62.4.tgz",
+      "integrity": "sha512-+fxjfuoAmVMCYV5QyjoIpu0cp5DOiOTeqYFk1AVaxGr+/ravWLX89XfQmptsoWcaVy/TGf2hexzbUOrCQIL1CQ==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-riscv64-musl": {
+      "version": "4.62.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.62.4.tgz",
+      "integrity": "sha512-jTn8JfHGL4djjFxPuM06LmNUJDsst2jeVlsd9OmIH6zc5sC9K6rIuO4YajXatLUpBmBKl6b35ro1QZocLi+tcA==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-s390x-gnu": {
+      "version": "4.62.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.62.4.tgz",
+      "integrity": "sha512-oCJCJL4pXsoDcP2QZ+JVlPTIRc6266zsIaeJJsWImmF7HO0W8nb6HuSgZlMWxJwaPf8ehbSw8yo0EUw925hKsA==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-x64-gnu": {
+      "version": "4.62.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.62.4.tgz",
+      "integrity": "sha512-W69hukhZ3KKNRCaMIEzKvcFye42hh0FE1+YoYaf5+Ikacuftoco6yO/xouz0hc5d5W/s3yBro5jRiuEE/Q5vUw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-x64-musl": {
+      "version": "4.62.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.62.4.tgz",
+      "integrity": "sha512-qiXbGG2jkjXhzXpsFZSR2Xpb8DN/UaxYsbb/STbuR/6fpaDgRmmaq1B/LmtF2wQFOFOSsK2jdE0RZ3a0zHn4QA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-openbsd-x64": {
+      "version": "4.62.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-openbsd-x64/-/rollup-openbsd-x64-4.62.4.tgz",
+      "integrity": "sha512-nWeM//hxv8mIo6jD7Hu4o48DVmV9pbV6gsKaWU+4NFyqHoPKwrkRiZGLKUhOBk8qNmDmpwFtPKg80Bo/Tn4xiQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ]
+    },
+    "node_modules/@rollup/rollup-openharmony-arm64": {
+      "version": "4.62.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-openharmony-arm64/-/rollup-openharmony-arm64-4.62.4.tgz",
+      "integrity": "sha512-s62SQ/vgsRSvMwDkOEfTqfgASF0f26ZNaQuTA6Aok5lrikf89yI2W0gFHvZb2Jpgc6N8JnOKZgCK2iciO3CsxQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openharmony"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-arm64-msvc": {
+      "version": "4.62.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.62.4.tgz",
+      "integrity": "sha512-J6wGf8TVGbXJq+HH+ttTvrcfNKPbuZecV6KT1B8I18BC5IURUh5kl4Yl5OEP5eFIUoI5BWxCsyYMhFsDx8kekw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-ia32-msvc": {
+      "version": "4.62.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.62.4.tgz",
+      "integrity": "sha512-zmfrQd/0wu6oJs8Vq8KwY/YtsKSsLtKe/HwAP4Wqy8LhWjeT55fHRAkOhYQ12wI3ayS4Tt12d5CDRD7N96SAYQ==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-x64-gnu": {
+      "version": "4.62.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-gnu/-/rollup-win32-x64-gnu-4.62.4.tgz",
+      "integrity": "sha512-qPzHqdj9rfUD+w79dtE07zi/kFwKyCJqplp5K5ygeLTp7jLpAoc16OAH39HSmRC9UpozaecsleI8uAdEj6v2yw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-x64-msvc": {
+      "version": "4.62.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.62.4.tgz",
+      "integrity": "sha512-zD6NdeWEByGE9QF9vCrlJ5YQB4oq9q91kPZS37Jwj5hOkvR1lTBSpsKhKDw4IJtbQ35LsTS1HD9DZYGKIshU1Q==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@types/babel__core": {
+      "version": "7.20.5",
+      "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
+      "integrity": "sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.20.7",
+        "@babel/types": "^7.20.7",
+        "@types/babel__generator": "*",
+        "@types/babel__template": "*",
+        "@types/babel__traverse": "*"
+      }
+    },
+    "node_modules/@types/babel__generator": {
+      "version": "7.27.0",
+      "resolved": "https://registry.npmjs.org/@types/babel__generator/-/babel__generator-7.27.0.tgz",
+      "integrity": "sha512-ufFd2Xi92OAVPYsy+P4n7/U7e68fex0+Ee8gSG9KX7eo084CWiQ4sdxktvdl0bOPupXtVJPY19zk6EwWqUQ8lg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.0.0"
+      }
+    },
+    "node_modules/@types/babel__template": {
+      "version": "7.4.4",
+      "resolved": "https://registry.npmjs.org/@types/babel__template/-/babel__template-7.4.4.tgz",
+      "integrity": "sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.1.0",
+        "@babel/types": "^7.0.0"
+      }
+    },
+    "node_modules/@types/babel__traverse": {
+      "version": "7.28.0",
+      "resolved": "https://registry.npmjs.org/@types/babel__traverse/-/babel__traverse-7.28.0.tgz",
+      "integrity": "sha512-8PvcXf70gTDZBgt9ptxJ8elBeBjcLOAcOtoO/mPJjtji1+CdGbHgm77om1GrsPxsiE+uXIpNSK64UYaIwQXd4Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.28.2"
+      }
+    },
+    "node_modules/@types/debug": {
+      "version": "4.1.13",
+      "resolved": "https://registry.npmjs.org/@types/debug/-/debug-4.1.13.tgz",
+      "integrity": "sha512-KSVgmQmzMwPlmtljOomayoR89W4FynCAi3E8PPs7vmDVPe84hT+vGPKkJfThkmXs0x0jAaa9U8uW8bbfyS2fWw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/ms": "*"
+      }
+    },
+    "node_modules/@types/estree": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.9.tgz",
+      "integrity": "sha512-GhdPgy1el4/ImP05X05Uw4cw2/M93BCUmnEvWZNStlCzEKME4Fkk+YpoA5OiHNQmoS7Cafb8Xa3Pya8m1Qrzeg==",
+      "license": "MIT"
+    },
+    "node_modules/@types/estree-jsx": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@types/estree-jsx/-/estree-jsx-1.0.5.tgz",
+      "integrity": "sha512-52CcUVNFyfb1A2ALocQw/Dd1BQFNmSdkuC3BkZ6iqhdMfQz7JWOFRuJFloOzjk+6WijU56m9oKXFAXc7o3Towg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "*"
+      }
+    },
+    "node_modules/@types/hast": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.5.tgz",
+      "integrity": "sha512-rp/ezSWaD1m44dPKICGhiskI13nVr7qTloFwDa/IYkhhf5nzwP+zIQcIJh3WIFSBOy/H1PzB40jPjMDksN4F+g==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "*"
+      }
+    },
+    "node_modules/@types/mdast": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-4.0.4.tgz",
+      "integrity": "sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "*"
+      }
+    },
+    "node_modules/@types/ms": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@types/ms/-/ms-2.1.0.tgz",
+      "integrity": "sha512-GsCCIZDE/p3i96vtEqx+7dBUGXrc7zeSK3wwPHIaRThS+9OhWIXRqzs4d6k1SVU8g91DrNRWxWUGhp5KXQb2VA==",
+      "license": "MIT"
+    },
+    "node_modules/@types/react": {
+      "version": "19.2.18",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.18.tgz",
+      "integrity": "sha512-AnzbBERsrLKtk2XSfTbYRLjQPdy116Sty4q+T+Bp3IC4l6jNBvreVPAHmpq9qhXQM7CXZPjLVmGMw9sy+hxQ3w==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "csstype": "^3.2.2"
+      }
+    },
+    "node_modules/@types/unist": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz",
+      "integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==",
+      "license": "MIT"
+    },
+    "node_modules/@ungap/structured-clone": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.3.3.tgz",
+      "integrity": "sha512-60YRaenCQcVjYEKOcG824+DRGGIQ3VKErcBoAEDJZz5bKIs2ZG+X/H9Nk+Q6EVkwJk5QNApxbrc5QtBSwtrXAg==",
+      "license": "ISC"
+    },
+    "node_modules/@vitejs/plugin-react": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-4.7.0.tgz",
+      "integrity": "sha512-gUu9hwfWvvEDBBmgtAowQCojwZmJ5mcLn3aufeCsitijs3+f2NsrPtlAWIR6OPiqljl96GVCUbLe0HyqIpVaoA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/core": "^7.28.0",
+        "@babel/plugin-transform-react-jsx-self": "^7.27.1",
+        "@babel/plugin-transform-react-jsx-source": "^7.27.1",
+        "@rolldown/pluginutils": "1.0.0-beta.27",
+        "@types/babel__core": "^7.20.5",
+        "react-refresh": "^0.17.0"
+      },
+      "engines": {
+        "node": "^14.18.0 || >=16.0.0"
+      },
+      "peerDependencies": {
+        "vite": "^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0"
+      }
+    },
+    "node_modules/adler-32": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/adler-32/-/adler-32-1.3.1.tgz",
+      "integrity": "sha512-ynZ4w/nUUv5rrsR8UUGoe1VC9hZj6V5hU9Qw1HlMDJGEJw5S7TfTErWTjMys6M7vr0YWcPqs3qAr4ss0nDfP+A==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/bail": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/bail/-/bail-2.0.2.tgz",
+      "integrity": "sha512-0xO6mYd7JB2YesxDKplafRpsiOzPt9V02ddPCLbY1xYGPOX24NTyN50qnUxgCPcSoYMhKpAuBTjQoRZCAkUDRw==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/baseline-browser-mapping": {
+      "version": "2.11.13",
+      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.11.13.tgz",
+      "integrity": "sha512-k9HNuUVMlqVjQ9UHzfPjIqiDbWw7WqT1AoT7GL8VwvF3r0ZfArtgiSPAlmupyNquNgOJHTuH4CKYf8ttMTWBTQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "baseline-browser-mapping": "dist/cli.cjs"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/browserslist": {
+      "version": "4.28.8",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.28.8.tgz",
+      "integrity": "sha512-V2NpofLblG64mfOtSgDhOJESZEGogzDMBv/q+W6oc4LXWP/q75eOXoOaaOu1EOadB9U4Bwx/e0yzbvwKH8zalA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "baseline-browser-mapping": "^2.11.12",
+        "caniuse-lite": "^1.0.30001809",
+        "electron-to-chromium": "^1.5.402",
+        "node-releases": "^2.0.53",
+        "update-browserslist-db": "^1.3.0"
+      },
+      "bin": {
+        "browserslist": "cli.js"
+      },
+      "engines": {
+        "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
+      }
+    },
+    "node_modules/caniuse-lite": {
+      "version": "1.0.30001809",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001809.tgz",
+      "integrity": "sha512-xxWVywk6a6Arlk+hymeycyn/VgqEfLDxupvhH/xiY5SJ/18kmi9o6MiO320DCUzypORHLtvh0I4i04tUhCNHNQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "CC-BY-4.0"
+    },
+    "node_modules/ccount": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/ccount/-/ccount-2.0.1.tgz",
+      "integrity": "sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/cfb": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/cfb/-/cfb-1.2.2.tgz",
+      "integrity": "sha512-KfdUZsSOw19/ObEWasvBP/Ac4reZvAGauZhs6S/gqNhXhI7cKwvlH7ulj+dOEYnca4bm4SGo8C1bTAQvnTjgQA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "adler-32": "~1.3.0",
+        "crc-32": "~1.2.0"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/character-entities": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/character-entities/-/character-entities-2.0.2.tgz",
+      "integrity": "sha512-shx7oQ0Awen/BRIdkjkvz54PnEEI/EjwXDSIZp86/KKdbafHh1Df/RYGBhn4hbe2+uKC9FnT5UCEdyPz3ai9hQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/character-entities-html4": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/character-entities-html4/-/character-entities-html4-2.1.0.tgz",
+      "integrity": "sha512-1v7fgQRj6hnSwFpq1Eu0ynr/CDEw0rXo2B61qXrLNdHZmPKgb7fqS1a2JwF0rISo9q77jDI8VMEHoApn8qDoZA==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/character-entities-legacy": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/character-entities-legacy/-/character-entities-legacy-3.0.0.tgz",
+      "integrity": "sha512-RpPp0asT/6ufRm//AJVwpViZbGM/MkjQFxJccQRHmISF/22NBtsHqAWmL+/pmkPWoIUJdWyeVleTl1wydHATVQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/character-reference-invalid": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/character-reference-invalid/-/character-reference-invalid-2.0.1.tgz",
+      "integrity": "sha512-iBZ4F4wRbyORVsu0jPV7gXkOsGYjGHPmAyv+HiHG8gi5PtC9KI2j1+v8/tlibRvjoWX027ypmG/n0HtO5t7unw==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/codepage": {
+      "version": "1.15.0",
+      "resolved": "https://registry.npmjs.org/codepage/-/codepage-1.15.0.tgz",
+      "integrity": "sha512-3g6NUTPd/YtuuGrhMnOMRjFc+LJw/bnMp3+0r/Wcz3IXUuCosKRJvMphm5+Q+bvTVGcJJuRvVLuYba+WojaFaA==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/comma-separated-tokens": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/comma-separated-tokens/-/comma-separated-tokens-2.0.3.tgz",
+      "integrity": "sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/convert-source-map": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
+      "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/crc-32": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/crc-32/-/crc-32-1.2.2.tgz",
+      "integrity": "sha512-ROmzCKrTnOwybPcJApAA6WBWij23HVfGVNKqqrZpuyZOHqK2CwHSvpGuyt/UNNvaIjEd8X5IFGp4Mh+Ie1IHJQ==",
+      "license": "Apache-2.0",
+      "bin": {
+        "crc32": "bin/crc32.njs"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/csstype": {
+      "version": "3.2.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
+      "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/debug": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
+      "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/decode-named-character-reference": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/decode-named-character-reference/-/decode-named-character-reference-1.3.0.tgz",
+      "integrity": "sha512-GtpQYB283KrPp6nRw50q3U9/VfOutZOe103qlN7BPP6Ad27xYnOIWv4lPzo8HCAL+mMZofJ9KEy30fq6MfaK6Q==",
+      "license": "MIT",
+      "dependencies": {
+        "character-entities": "^2.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/dequal": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
+      "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/devlop": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/devlop/-/devlop-1.1.0.tgz",
+      "integrity": "sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==",
+      "license": "MIT",
+      "dependencies": {
+        "dequal": "^2.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/electron-to-chromium": {
+      "version": "1.5.405",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.405.tgz",
+      "integrity": "sha512-bNglH7lPH5l+yHOes7Zr4VqxhOy4BQ9ZBUX4VdoFgxMpzJk7W1ZoO3Vgd9Pxa9PyjQ76sfm2aKH/nzEcCNRlew==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/esbuild": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.12.tgz",
+      "integrity": "sha512-bbPBYYrtZbkt6Os6FiTLCTFxvq4tt3JKall1vRwshA3fdVztsLAatFaZobhkBC8/BrPetoa0oksYoKXoG4ryJg==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "bin": {
+        "esbuild": "bin/esbuild"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "@esbuild/aix-ppc64": "0.25.12",
+        "@esbuild/android-arm": "0.25.12",
+        "@esbuild/android-arm64": "0.25.12",
+        "@esbuild/android-x64": "0.25.12",
+        "@esbuild/darwin-arm64": "0.25.12",
+        "@esbuild/darwin-x64": "0.25.12",
+        "@esbuild/freebsd-arm64": "0.25.12",
+        "@esbuild/freebsd-x64": "0.25.12",
+        "@esbuild/linux-arm": "0.25.12",
+        "@esbuild/linux-arm64": "0.25.12",
+        "@esbuild/linux-ia32": "0.25.12",
+        "@esbuild/linux-loong64": "0.25.12",
+        "@esbuild/linux-mips64el": "0.25.12",
+        "@esbuild/linux-ppc64": "0.25.12",
+        "@esbuild/linux-riscv64": "0.25.12",
+        "@esbuild/linux-s390x": "0.25.12",
+        "@esbuild/linux-x64": "0.25.12",
+        "@esbuild/netbsd-arm64": "0.25.12",
+        "@esbuild/netbsd-x64": "0.25.12",
+        "@esbuild/openbsd-arm64": "0.25.12",
+        "@esbuild/openbsd-x64": "0.25.12",
+        "@esbuild/openharmony-arm64": "0.25.12",
+        "@esbuild/sunos-x64": "0.25.12",
+        "@esbuild/win32-arm64": "0.25.12",
+        "@esbuild/win32-ia32": "0.25.12",
+        "@esbuild/win32-x64": "0.25.12"
+      }
+    },
+    "node_modules/escalade": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
+      "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/escape-string-regexp": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-5.0.0.tgz",
+      "integrity": "sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/estree-util-is-identifier-name": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/estree-util-is-identifier-name/-/estree-util-is-identifier-name-3.0.0.tgz",
+      "integrity": "sha512-hFtqIDZTIUZ9BXLb8y4pYGyk6+wekIivNVTcmvk8NoOh+VeRn5y6cEHzbURrWbfp1fIqdVipilzj+lfaadNZmg==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/extend": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
+      "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==",
+      "license": "MIT"
+    },
+    "node_modules/fdir": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
+      "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "peerDependencies": {
+        "picomatch": "^3 || ^4"
+      },
+      "peerDependenciesMeta": {
+        "picomatch": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/frac": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/frac/-/frac-1.1.2.tgz",
+      "integrity": "sha512-w/XBfkibaTl3YDqASwfDUqkna4Z2p9cFSr1aHDt0WoMTECnRfBOv2WArlZILlqgWlmdIlALXGpM2AOhEk5W3IA==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/gensync": {
+      "version": "1.0.0-beta.2",
+      "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
+      "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/hast-util-to-jsx-runtime": {
+      "version": "2.3.6",
+      "resolved": "https://registry.npmjs.org/hast-util-to-jsx-runtime/-/hast-util-to-jsx-runtime-2.3.6.tgz",
+      "integrity": "sha512-zl6s8LwNyo1P9uw+XJGvZtdFF1GdAkOg8ujOw+4Pyb76874fLps4ueHXDhXWdk6YHQ6OgUtinliG7RsYvCbbBg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "^1.0.0",
+        "@types/hast": "^3.0.0",
+        "@types/unist": "^3.0.0",
+        "comma-separated-tokens": "^2.0.0",
+        "devlop": "^1.0.0",
+        "estree-util-is-identifier-name": "^3.0.0",
+        "hast-util-whitespace": "^3.0.0",
+        "mdast-util-mdx-expression": "^2.0.0",
+        "mdast-util-mdx-jsx": "^3.0.0",
+        "mdast-util-mdxjs-esm": "^2.0.0",
+        "property-information": "^7.0.0",
+        "space-separated-tokens": "^2.0.0",
+        "style-to-js": "^1.0.0",
+        "unist-util-position": "^5.0.0",
+        "vfile-message": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hast-util-whitespace": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/hast-util-whitespace/-/hast-util-whitespace-3.0.0.tgz",
+      "integrity": "sha512-88JUN06ipLwsnv+dVn+OIYOvAuvBMy/Qoi6O7mQHxdPXpjy+Cd6xRkWwux7DKO+4sYILtLBRIKgsdpS2gQc7qw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/highlight.js": {
+      "version": "11.12.0",
+      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.12.0.tgz",
+      "integrity": "sha512-nbfWpyRMcMrPMmDwJB+dhX/eiaPKtc2RB+0QZskqJ3WjRA/FDS0e9hZrx8EC/lbEv8gXy98FcDbNa/dspAaJMg==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
+    "node_modules/html-url-attributes": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/html-url-attributes/-/html-url-attributes-3.0.1.tgz",
+      "integrity": "sha512-ol6UPyBWqsrO6EJySPz2O7ZSr856WDrEzM5zMqp+FJJLGMW35cLYmmZnl0vztAZxRUoNZJFTCohfjuIJ8I4QBQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/inline-style-parser": {
+      "version": "0.2.7",
+      "resolved": "https://registry.npmjs.org/inline-style-parser/-/inline-style-parser-0.2.7.tgz",
+      "integrity": "sha512-Nb2ctOyNR8DqQoR0OwRG95uNWIC0C1lCgf5Naz5H6Ji72KZ8OcFZLz2P5sNgwlyoJ8Yif11oMuYs5pBQa86csA==",
+      "license": "MIT"
+    },
+    "node_modules/is-alphabetical": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-2.0.1.tgz",
+      "integrity": "sha512-FWyyY60MeTNyeSRpkM2Iry0G9hpr7/9kD40mD/cGQEuilcZYS4okz8SN2Q6rLCJ8gbCt6fN+rC+6tMGS99LaxQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/is-alphanumerical": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-alphanumerical/-/is-alphanumerical-2.0.1.tgz",
+      "integrity": "sha512-hmbYhX/9MUMF5uh7tOXyK/n0ZvWpad5caBA17GsC6vyuCqaWliRG5K1qS9inmUhEMaOBIW7/whAnSwveW/LtZw==",
+      "license": "MIT",
+      "dependencies": {
+        "is-alphabetical": "^2.0.0",
+        "is-decimal": "^2.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/is-decimal": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-decimal/-/is-decimal-2.0.1.tgz",
+      "integrity": "sha512-AAB9hiomQs5DXWcRB1rqsxGUstbRroFOPPVAomNk/3XHR5JyEZChOyTWe2oayKnsSsr/kcGqF+z6yuH6HHpN0A==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/is-hexadecimal": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-hexadecimal/-/is-hexadecimal-2.0.1.tgz",
+      "integrity": "sha512-DgZQp241c8oO6cA1SbTEWiXeoxV42vlcJxgH+B3hi1AiqqKruZR3ZGF8In3fj4+/y/7rHvlOZLZtgJ/4ttYGZg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/is-plain-obj": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-4.1.0.tgz",
+      "integrity": "sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+      "license": "MIT"
+    },
+    "node_modules/jsesc": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.1.0.tgz",
+      "integrity": "sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "jsesc": "bin/jsesc"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/json5": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
+      "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "json5": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/longest-streak": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/longest-streak/-/longest-streak-3.1.0.tgz",
+      "integrity": "sha512-9Ri+o0JYgehTaVBBDoMqIl8GXtbWg711O3srftcHhZ0dqnETqLaoIK0x17fUw9rFSlK/0NlsKe0Ahhyl5pXE2g==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "license": "MIT",
+      "dependencies": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      },
+      "bin": {
+        "loose-envify": "cli.js"
+      }
+    },
+    "node_modules/lru-cache": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
+      "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "yallist": "^3.0.2"
+      }
+    },
+    "node_modules/lucide-react": {
+      "version": "0.469.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.469.0.tgz",
+      "integrity": "sha512-28vvUnnKQ/dBwiCQtwJw7QauYnE7yd2Cyp4tTTJpvglX4EMpbflcdBgrgToX2j71B3YvugK/NH3BGUk+E/p/Fw==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/markdown-table": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/markdown-table/-/markdown-table-3.0.4.tgz",
+      "integrity": "sha512-wiYz4+JrLyb/DqW2hkFJxP7Vd7JuTDm77fvbM8VfEQdmSMqcImWeeRbHwZjBjIFki/VaMK2BhFi7oUUZeM5bqw==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/mdast-util-find-and-replace": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/mdast-util-find-and-replace/-/mdast-util-find-and-replace-3.0.2.tgz",
+      "integrity": "sha512-Tmd1Vg/m3Xz43afeNxDIhWRtFZgM2VLyaf4vSTYwudTyeuTneoL3qtWMA5jeLyz/O1vDJmmV4QuScFCA2tBPwg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "escape-string-regexp": "^5.0.0",
+        "unist-util-is": "^6.0.0",
+        "unist-util-visit-parents": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-from-markdown": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/mdast-util-from-markdown/-/mdast-util-from-markdown-2.0.3.tgz",
+      "integrity": "sha512-W4mAWTvSlKvf8L6J+VN9yLSqQ9AOAAvHuoDAmPkz4dHf553m5gVj2ejadHJhoJmcmxEnOv6Pa8XJhpxE93kb8Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "@types/unist": "^3.0.0",
+        "decode-named-character-reference": "^1.0.0",
+        "devlop": "^1.0.0",
+        "mdast-util-to-string": "^4.0.0",
+        "micromark": "^4.0.0",
+        "micromark-util-decode-numeric-character-reference": "^2.0.0",
+        "micromark-util-decode-string": "^2.0.0",
+        "micromark-util-normalize-identifier": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0",
+        "unist-util-stringify-position": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-gfm": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-gfm/-/mdast-util-gfm-3.1.0.tgz",
+      "integrity": "sha512-0ulfdQOM3ysHhCJ1p06l0b0VKlhU0wuQs3thxZQagjcjPrlFRqY215uZGHHJan9GEAXd9MbfPjFJz+qMkVR6zQ==",
+      "license": "MIT",
+      "dependencies": {
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-gfm-autolink-literal": "^2.0.0",
+        "mdast-util-gfm-footnote": "^2.0.0",
+        "mdast-util-gfm-strikethrough": "^2.0.0",
+        "mdast-util-gfm-table": "^2.0.0",
+        "mdast-util-gfm-task-list-item": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-gfm-autolink-literal": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/mdast-util-gfm-autolink-literal/-/mdast-util-gfm-autolink-literal-2.0.1.tgz",
+      "integrity": "sha512-5HVP2MKaP6L+G6YaxPNjuL0BPrq9orG3TsrZ9YXbA3vDw/ACI4MEsnoDpn6ZNm7GnZgtAcONJyPhOP8tNJQavQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "ccount": "^2.0.0",
+        "devlop": "^1.0.0",
+        "mdast-util-find-and-replace": "^3.0.0",
+        "micromark-util-character": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-gfm-footnote": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-gfm-footnote/-/mdast-util-gfm-footnote-2.1.0.tgz",
+      "integrity": "sha512-sqpDWlsHn7Ac9GNZQMeUzPQSMzR6Wv0WKRNvQRg0KqHh02fpTz69Qc1QSseNX29bhz1ROIyNyxExfawVKTm1GQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "devlop": "^1.1.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0",
+        "micromark-util-normalize-identifier": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-gfm-strikethrough": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-gfm-strikethrough/-/mdast-util-gfm-strikethrough-2.0.0.tgz",
+      "integrity": "sha512-mKKb915TF+OC5ptj5bJ7WFRPdYtuHv0yTRxK2tJvi+BDqbkiG7h7u/9SI89nRAYcmap2xHQL9D+QG/6wSrTtXg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-gfm-table": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-gfm-table/-/mdast-util-gfm-table-2.0.0.tgz",
+      "integrity": "sha512-78UEvebzz/rJIxLvE7ZtDd/vIQ0RHv+3Mh5DR96p7cS7HsBhYIICDBCu8csTNWNO6tBWfqXPWekRuj2FNOGOZg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "devlop": "^1.0.0",
+        "markdown-table": "^3.0.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-gfm-task-list-item": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-gfm-task-list-item/-/mdast-util-gfm-task-list-item-2.0.0.tgz",
+      "integrity": "sha512-IrtvNvjxC1o06taBAVJznEnkiHxLFTzgonUdy8hzFVeDun0uTjxxrRGVaNFqkU1wJR3RBPEfsxmU6jDWPofrTQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "devlop": "^1.0.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-mdx-expression": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/mdast-util-mdx-expression/-/mdast-util-mdx-expression-2.0.1.tgz",
+      "integrity": "sha512-J6f+9hUp+ldTZqKRSg7Vw5V6MqjATc+3E4gf3CFNcuZNWD8XdyI6zQ8GqH7f8169MM6P7hMBRDVGnn7oHB9kXQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree-jsx": "^1.0.0",
+        "@types/hast": "^3.0.0",
+        "@types/mdast": "^4.0.0",
+        "devlop": "^1.0.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-mdx-jsx": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-mdx-jsx/-/mdast-util-mdx-jsx-3.2.0.tgz",
+      "integrity": "sha512-lj/z8v0r6ZtsN/cGNNtemmmfoLAFZnjMbNyLzBafjzikOM+glrjNHPlf6lQDOTccj9n5b0PPihEBbhneMyGs1Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree-jsx": "^1.0.0",
+        "@types/hast": "^3.0.0",
+        "@types/mdast": "^4.0.0",
+        "@types/unist": "^3.0.0",
+        "ccount": "^2.0.0",
+        "devlop": "^1.1.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0",
+        "parse-entities": "^4.0.0",
+        "stringify-entities": "^4.0.0",
+        "unist-util-stringify-position": "^4.0.0",
+        "vfile-message": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-mdxjs-esm": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/mdast-util-mdxjs-esm/-/mdast-util-mdxjs-esm-2.0.1.tgz",
+      "integrity": "sha512-EcmOpxsZ96CvlP03NghtH1EsLtr0n9Tm4lPUJUBccV9RwUOneqSycg19n5HGzCf+10LozMRSObtVr3ee1WoHtg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree-jsx": "^1.0.0",
+        "@types/hast": "^3.0.0",
+        "@types/mdast": "^4.0.0",
+        "devlop": "^1.0.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-phrasing": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-phrasing/-/mdast-util-phrasing-4.1.0.tgz",
+      "integrity": "sha512-TqICwyvJJpBwvGAMZjj4J2n0X8QWp21b9l0o7eXyVJ25YNWYbJDVIyD1bZXE6WtV6RmKJVYmQAKWa0zWOABz2w==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "unist-util-is": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-to-hast": {
+      "version": "13.2.1",
+      "resolved": "https://registry.npmjs.org/mdast-util-to-hast/-/mdast-util-to-hast-13.2.1.tgz",
+      "integrity": "sha512-cctsq2wp5vTsLIcaymblUriiTcZd0CwWtCbLvrOzYCDZoWyMNV8sZ7krj09FSnsiJi3WVsHLM4k6Dq/yaPyCXA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "@types/mdast": "^4.0.0",
+        "@ungap/structured-clone": "^1.0.0",
+        "devlop": "^1.0.0",
+        "micromark-util-sanitize-uri": "^2.0.0",
+        "trim-lines": "^3.0.0",
+        "unist-util-position": "^5.0.0",
+        "unist-util-visit": "^5.0.0",
+        "vfile": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-to-markdown": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/mdast-util-to-markdown/-/mdast-util-to-markdown-2.1.2.tgz",
+      "integrity": "sha512-xj68wMTvGXVOKonmog6LwyJKrYXZPvlwabaryTjLh9LuvovB/KAH+kvi8Gjj+7rJjsFi23nkUxRQv1KqSroMqA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "@types/unist": "^3.0.0",
+        "longest-streak": "^3.0.0",
+        "mdast-util-phrasing": "^4.0.0",
+        "mdast-util-to-string": "^4.0.0",
+        "micromark-util-classify-character": "^2.0.0",
+        "micromark-util-decode-string": "^2.0.0",
+        "unist-util-visit": "^5.0.0",
+        "zwitch": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-to-string": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-to-string/-/mdast-util-to-string-4.0.0.tgz",
+      "integrity": "sha512-0H44vDimn51F0YwvxSJSm0eCDOJTRlmN0R1yBh4HLj9wiV1Dn0QoXGbvFAWj2hSItVTlCmBF1hqKlIyUBVFLPg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/micromark/-/micromark-4.0.2.tgz",
+      "integrity": "sha512-zpe98Q6kvavpCr1NPVSCMebCKfD7CA2NqZ+rykeNhONIJBpc1tFKt9hucLGwha3jNTNI8lHpctWJWoimVF4PfA==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "@types/debug": "^4.0.0",
+        "debug": "^4.0.0",
+        "decode-named-character-reference": "^1.0.0",
+        "devlop": "^1.0.0",
+        "micromark-core-commonmark": "^2.0.0",
+        "micromark-factory-space": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-chunked": "^2.0.0",
+        "micromark-util-combine-extensions": "^2.0.0",
+        "micromark-util-decode-numeric-character-reference": "^2.0.0",
+        "micromark-util-encode": "^2.0.0",
+        "micromark-util-normalize-identifier": "^2.0.0",
+        "micromark-util-resolve-all": "^2.0.0",
+        "micromark-util-sanitize-uri": "^2.0.0",
+        "micromark-util-subtokenize": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-core-commonmark": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/micromark-core-commonmark/-/micromark-core-commonmark-2.0.3.tgz",
+      "integrity": "sha512-RDBrHEMSxVFLg6xvnXmb1Ayr2WzLAWjeSATAoxwKYJV94TeNavgoIdA0a9ytzDSVzBy2YKFK+emCPOEibLeCrg==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "decode-named-character-reference": "^1.0.0",
+        "devlop": "^1.0.0",
+        "micromark-factory-destination": "^2.0.0",
+        "micromark-factory-label": "^2.0.0",
+        "micromark-factory-space": "^2.0.0",
+        "micromark-factory-title": "^2.0.0",
+        "micromark-factory-whitespace": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-chunked": "^2.0.0",
+        "micromark-util-classify-character": "^2.0.0",
+        "micromark-util-html-tag-name": "^2.0.0",
+        "micromark-util-normalize-identifier": "^2.0.0",
+        "micromark-util-resolve-all": "^2.0.0",
+        "micromark-util-subtokenize": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-extension-gfm": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-gfm/-/micromark-extension-gfm-3.0.0.tgz",
+      "integrity": "sha512-vsKArQsicm7t0z2GugkCKtZehqUm31oeGBV/KVSorWSy8ZlNAv7ytjFhvaryUiCUJYqs+NoE6AFhpQvBTM6Q4w==",
+      "license": "MIT",
+      "dependencies": {
+        "micromark-extension-gfm-autolink-literal": "^2.0.0",
+        "micromark-extension-gfm-footnote": "^2.0.0",
+        "micromark-extension-gfm-strikethrough": "^2.0.0",
+        "micromark-extension-gfm-table": "^2.0.0",
+        "micromark-extension-gfm-tagfilter": "^2.0.0",
+        "micromark-extension-gfm-task-list-item": "^2.0.0",
+        "micromark-util-combine-extensions": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-extension-gfm-autolink-literal": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-gfm-autolink-literal/-/micromark-extension-gfm-autolink-literal-2.1.0.tgz",
+      "integrity": "sha512-oOg7knzhicgQ3t4QCjCWgTmfNhvQbDDnJeVu9v81r7NltNCVmhPy1fJRX27pISafdjL+SVc4d3l48Gb6pbRypw==",
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-sanitize-uri": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-extension-gfm-footnote": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-gfm-footnote/-/micromark-extension-gfm-footnote-2.1.0.tgz",
+      "integrity": "sha512-/yPhxI1ntnDNsiHtzLKYnE3vf9JZ6cAisqVDauhp4CEHxlb4uoOTxOCJ+9s51bIB8U1N1FJ1RXOKTIlD5B/gqw==",
+      "license": "MIT",
+      "dependencies": {
+        "devlop": "^1.0.0",
+        "micromark-core-commonmark": "^2.0.0",
+        "micromark-factory-space": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-normalize-identifier": "^2.0.0",
+        "micromark-util-sanitize-uri": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-extension-gfm-strikethrough": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-gfm-strikethrough/-/micromark-extension-gfm-strikethrough-2.1.0.tgz",
+      "integrity": "sha512-ADVjpOOkjz1hhkZLlBiYA9cR2Anf8F4HqZUO6e5eDcPQd0Txw5fxLzzxnEkSkfnD0wziSGiv7sYhk/ktvbf1uw==",
+      "license": "MIT",
+      "dependencies": {
+        "devlop": "^1.0.0",
+        "micromark-util-chunked": "^2.0.0",
+        "micromark-util-classify-character": "^2.0.0",
+        "micromark-util-resolve-all": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-extension-gfm-table": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/micromark-extension-gfm-table/-/micromark-extension-gfm-table-2.1.1.tgz",
+      "integrity": "sha512-t2OU/dXXioARrC6yWfJ4hqB7rct14e8f7m0cbI5hUmDyyIlwv5vEtooptH8INkbLzOatzKuVbQmAYcbWoyz6Dg==",
+      "license": "MIT",
+      "dependencies": {
+        "devlop": "^1.0.0",
+        "micromark-factory-space": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-extension-gfm-tagfilter": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-gfm-tagfilter/-/micromark-extension-gfm-tagfilter-2.0.0.tgz",
+      "integrity": "sha512-xHlTOmuCSotIA8TW1mDIM6X2O1SiX5P9IuDtqGonFhEK0qgRI4yeC6vMxEV2dgyr2TiD+2PQ10o+cOhdVAcwfg==",
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-extension-gfm-task-list-item": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-gfm-task-list-item/-/micromark-extension-gfm-task-list-item-2.1.0.tgz",
+      "integrity": "sha512-qIBZhqxqI6fjLDYFTBIa4eivDMnP+OZqsNwmQ3xNLE4Cxwc+zfQEfbs6tzAo2Hjq+bh6q5F+Z8/cksrLFYWQQw==",
+      "license": "MIT",
+      "dependencies": {
+        "devlop": "^1.0.0",
+        "micromark-factory-space": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-factory-destination": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-factory-destination/-/micromark-factory-destination-2.0.1.tgz",
+      "integrity": "sha512-Xe6rDdJlkmbFRExpTOmRj9N3MaWmbAgdpSrBQvCFqhezUn4AHqJHbaEnfbVYYiexVSs//tqOdY/DxhjdCiJnIA==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-factory-label": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-factory-label/-/micromark-factory-label-2.0.1.tgz",
+      "integrity": "sha512-VFMekyQExqIW7xIChcXn4ok29YE3rnuyveW3wZQWWqF4Nv9Wk5rgJ99KzPvHjkmPXF93FXIbBp6YdW3t71/7Vg==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "devlop": "^1.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-factory-space": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-factory-space/-/micromark-factory-space-2.0.1.tgz",
+      "integrity": "sha512-zRkxjtBxxLd2Sc0d+fbnEunsTj46SWXgXciZmHq0kDYGnck/ZSGj9/wULTV95uoeYiK5hRXP2mJ98Uo4cq/LQg==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-factory-title": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-factory-title/-/micromark-factory-title-2.0.1.tgz",
+      "integrity": "sha512-5bZ+3CjhAd9eChYTHsjy6TGxpOFSKgKKJPJxr293jTbfry2KDoWkhBb6TcPVB4NmzaPhMs1Frm9AZH7OD4Cjzw==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "micromark-factory-space": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-factory-whitespace": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-factory-whitespace/-/micromark-factory-whitespace-2.0.1.tgz",
+      "integrity": "sha512-Ob0nuZ3PKt/n0hORHyvoD9uZhr+Za8sFoP+OnMcnWK5lngSzALgQYKMr9RJVOWLqQYuyn6ulqGWSXdwf6F80lQ==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "micromark-factory-space": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-character": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-character/-/micromark-util-character-2.1.1.tgz",
+      "integrity": "sha512-wv8tdUTJ3thSFFFJKtpYKOYiGP2+v96Hvk4Tu8KpCAsTMs6yi+nVmGh1syvSCsaxz45J6Jbw+9DD6g97+NV67Q==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-chunked": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-chunked/-/micromark-util-chunked-2.0.1.tgz",
+      "integrity": "sha512-QUNFEOPELfmvv+4xiNg2sRYeS/P84pTW0TCgP5zc9FpXetHY0ab7SxKyAQCNCc1eK0459uoLI1y5oO5Vc1dbhA==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-symbol": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-classify-character": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-classify-character/-/micromark-util-classify-character-2.0.1.tgz",
+      "integrity": "sha512-K0kHzM6afW/MbeWYWLjoHQv1sgg2Q9EccHEDzSkxiP/EaagNzCm7T/WMKZ3rjMbvIpvBiZgwR3dKMygtA4mG1Q==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-combine-extensions": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-combine-extensions/-/micromark-util-combine-extensions-2.0.1.tgz",
+      "integrity": "sha512-OnAnH8Ujmy59JcyZw8JSbK9cGpdVY44NKgSM7E9Eh7DiLS2E9RNQf0dONaGDzEG9yjEl5hcqeIsj4hfRkLH/Bg==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-chunked": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-decode-numeric-character-reference": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/micromark-util-decode-numeric-character-reference/-/micromark-util-decode-numeric-character-reference-2.0.2.tgz",
+      "integrity": "sha512-ccUbYk6CwVdkmCQMyr64dXz42EfHGkPQlBj5p7YVGzq8I7CtjXZJrubAYezf7Rp+bjPseiROqe7G6foFd+lEuw==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-symbol": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-decode-string": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-decode-string/-/micromark-util-decode-string-2.0.1.tgz",
+      "integrity": "sha512-nDV/77Fj6eH1ynwscYTOsbK7rR//Uj0bZXBwJZRfaLEJ1iGBR6kIfNmlNqaqJf649EP0F3NWNdeJi03elllNUQ==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "decode-named-character-reference": "^1.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-decode-numeric-character-reference": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-encode": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-encode/-/micromark-util-encode-2.0.1.tgz",
+      "integrity": "sha512-c3cVx2y4KqUnwopcO9b/SCdo2O67LwJJ/UyqGfbigahfegL9myoEFoDYZgkT7f36T0bLrM9hZTAaAyH+PCAXjw==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/micromark-util-html-tag-name": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-html-tag-name/-/micromark-util-html-tag-name-2.0.1.tgz",
+      "integrity": "sha512-2cNEiYDhCWKI+Gs9T0Tiysk136SnR13hhO8yW6BGNyhOC4qYFnwF1nKfD3HFAIXA5c45RrIG1ub11GiXeYd1xA==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/micromark-util-normalize-identifier": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-normalize-identifier/-/micromark-util-normalize-identifier-2.0.1.tgz",
+      "integrity": "sha512-sxPqmo70LyARJs0w2UclACPUUEqltCkJ6PhKdMIDuJ3gSf/Q+/GIe3WKl0Ijb/GyH9lOpUkRAO2wp0GVkLvS9Q==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-symbol": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-resolve-all": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-resolve-all/-/micromark-util-resolve-all-2.0.1.tgz",
+      "integrity": "sha512-VdQyxFWFT2/FGJgwQnJYbe1jjQoNTS4RjglmSjTUlpUMa95Htx9NHeYW4rGDJzbjvCsl9eLjMQwGeElsqmzcHg==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-sanitize-uri": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-sanitize-uri/-/micromark-util-sanitize-uri-2.0.1.tgz",
+      "integrity": "sha512-9N9IomZ/YuGGZZmQec1MbgxtlgougxTodVwDzzEouPKo3qFWvymFHWcnDi2vzV1ff6kas9ucW+o3yzJK9YB1AQ==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-encode": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-subtokenize": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-subtokenize/-/micromark-util-subtokenize-2.1.0.tgz",
+      "integrity": "sha512-XQLu552iSctvnEcgXw6+Sx75GflAPNED1qx7eBJ+wydBb2KCbRZe+NwvIEEMM83uml1+2WSXpBAcp9IUCgCYWA==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "devlop": "^1.0.0",
+        "micromark-util-chunked": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-symbol": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-symbol/-/micromark-util-symbol-2.0.1.tgz",
+      "integrity": "sha512-vs5t8Apaud9N28kgCrRUdEed4UJ+wWNvicHLPxCa9ENlYuAY31M0ETy5y1vA33YoNPDFTghEbnh6efaE8h4x0Q==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/micromark-util-types": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/micromark-util-types/-/micromark-util-types-2.0.2.tgz",
+      "integrity": "sha512-Yw0ECSpJoViF1qTU4DC6NwtC4aWGt1EkzaQB8KPPyCRR8z9TWeV0HbEFGTO+ZY1wB22zmxnJqhPyTpOVCpeHTA==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "license": "MIT"
+    },
+    "node_modules/nanoid": {
+      "version": "3.3.18",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.18.tgz",
+      "integrity": "sha512-DTg4MJbGMWkfi6VZFdNt2/caMbQy4Ou+Op/hJQvGEWcnVfoA1QA+xzRKAzw9jD6+GVOOeYr/mIcuDSdug6F6+w==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
+    "node_modules/node-releases": {
+      "version": "2.0.53",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.53.tgz",
+      "integrity": "sha512-D9UOmYG3UH1V+ENW56t5QXBwJw1YEY18ruVeus89Rw+SyIgjPkCO84bRzO3uNIYosJbNwiabWVn48o3uJLjxFQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/parse-entities": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/parse-entities/-/parse-entities-4.0.2.tgz",
+      "integrity": "sha512-GG2AQYWoLgL877gQIKeRPGO1xF9+eG1ujIb5soS5gPvLQ1y2o8FL90w2QWNdf9I361Mpp7726c+lj3U0qK1uGw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^2.0.0",
+        "character-entities-legacy": "^3.0.0",
+        "character-reference-invalid": "^2.0.0",
+        "decode-named-character-reference": "^1.0.0",
+        "is-alphanumerical": "^2.0.0",
+        "is-decimal": "^2.0.0",
+        "is-hexadecimal": "^2.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/parse-entities/node_modules/@types/unist": {
+      "version": "2.0.11",
+      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.11.tgz",
+      "integrity": "sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA==",
+      "license": "MIT"
+    },
+    "node_modules/picocolors": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/picomatch": {
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.5.tgz",
+      "integrity": "sha512-RvwwcruNjI1ncT5xRakeyS9Lf8lcItv34KD+aif+VH9kduAyfYBipGh12274xtenIPZ119/R9BdTBa8gAwSh0A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/postcss": {
+      "version": "8.5.26",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.26.tgz",
+      "integrity": "sha512-u82N74LFzG8ca+dD8puPnplTXoGH4fTPpVGuIbt36G3qvNlkvfD0lEAZSxaly3KX8TS/L1A1gsCEmvKmBcVbkQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "nanoid": "^3.3.17",
+        "picocolors": "^1.1.1",
+        "source-map-js": "^1.2.1"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/property-information": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/property-information/-/property-information-7.2.0.tgz",
+      "integrity": "sha512-IAtzIB6sUiWaJYrX9smp3V46pBGbBeLFRGdh25kg1334VcBlD8HzhPeNIWQH9zhGmo2itIe25EHt9dQP7G5hmg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/react": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
+      "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-dom": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
+      "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.1.0",
+        "scheduler": "^0.23.2"
+      },
+      "peerDependencies": {
+        "react": "^18.3.1"
+      }
+    },
+    "node_modules/react-markdown": {
+      "version": "9.1.0",
+      "resolved": "https://registry.npmjs.org/react-markdown/-/react-markdown-9.1.0.tgz",
+      "integrity": "sha512-xaijuJB0kzGiUdG7nc2MOMDUDBWPyGAjZtUrow9XxUeua8IqeP+VlIfAZ3bphpcLTnSZXz6z9jcVC/TCwbfgdw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "@types/mdast": "^4.0.0",
+        "devlop": "^1.0.0",
+        "hast-util-to-jsx-runtime": "^2.0.0",
+        "html-url-attributes": "^3.0.0",
+        "mdast-util-to-hast": "^13.0.0",
+        "remark-parse": "^11.0.0",
+        "remark-rehype": "^11.0.0",
+        "unified": "^11.0.0",
+        "unist-util-visit": "^5.0.0",
+        "vfile": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      },
+      "peerDependencies": {
+        "@types/react": ">=18",
+        "react": ">=18"
+      }
+    },
+    "node_modules/react-refresh": {
+      "version": "0.17.0",
+      "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.17.0.tgz",
+      "integrity": "sha512-z6F7K9bV85EfseRCp2bzrpyQ0Gkw1uLoCel9XBVWPg/TjRj94SkJzUTGfOa4bs7iJvBWtQG0Wq7wnI0syw3EBQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/reifyui": {
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/reifyui/-/reifyui-0.5.1.tgz",
+      "integrity": "sha512-6Y4FevwjewL/wvhTntEM2fXvH4iENg2ShoqNPoJJN86YuMVcsp+l0DDZGDBQOI3O/g9xUGsN47Mw4mRuFLQDkg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "echarts": "^5 || ^6",
+        "highlight.js": "^11",
+        "mermaid": "^10 || ^11",
+        "react": ">=18",
+        "react-dom": ">=18"
+      },
+      "peerDependenciesMeta": {
+        "echarts": {
+          "optional": true
+        },
+        "highlight.js": {
+          "optional": true
+        },
+        "mermaid": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/remark-gfm": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/remark-gfm/-/remark-gfm-4.0.1.tgz",
+      "integrity": "sha512-1quofZ2RQ9EWdeN34S79+KExV1764+wCUGop5CPL1WGdD0ocPpu91lzPGbwWMECpEpd42kJGQwzRfyov9j4yNg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "mdast-util-gfm": "^3.0.0",
+        "micromark-extension-gfm": "^3.0.0",
+        "remark-parse": "^11.0.0",
+        "remark-stringify": "^11.0.0",
+        "unified": "^11.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/remark-parse": {
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/remark-parse/-/remark-parse-11.0.0.tgz",
+      "integrity": "sha512-FCxlKLNGknS5ba/1lmpYijMUzX2esxW5xQqjWxw2eHFfS2MSdaHVINFmhjo+qN1WhZhNimq0dZATN9pH0IDrpA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "micromark-util-types": "^2.0.0",
+        "unified": "^11.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/remark-rehype": {
+      "version": "11.1.2",
+      "resolved": "https://registry.npmjs.org/remark-rehype/-/remark-rehype-11.1.2.tgz",
+      "integrity": "sha512-Dh7l57ianaEoIpzbp0PC9UKAdCSVklD8E5Rpw7ETfbTl3FqcOOgq5q2LVDhgGCkaBv7p24JXikPdvhhmHvKMsw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "@types/mdast": "^4.0.0",
+        "mdast-util-to-hast": "^13.0.0",
+        "unified": "^11.0.0",
+        "vfile": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/remark-stringify": {
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/remark-stringify/-/remark-stringify-11.0.0.tgz",
+      "integrity": "sha512-1OSmLd3awB/t8qdoEOMazZkNsfVTeY4fTsgzcQFdXNq8ToTN4ZGwrMnlda4K6smTFKD+GRV6O48i6Z4iKgPPpw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "mdast-util-to-markdown": "^2.0.0",
+        "unified": "^11.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/rollup": {
+      "version": "4.62.4",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.62.4.tgz",
+      "integrity": "sha512-RXOqwaPsBGjMNMa4sQjDjHieHEZDFoj/Rdr46l2MU5DfEs16wHJPC2RPTPHWhNl+M3aI472LLqFkFKut4SblOg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "1.0.9"
+      },
+      "bin": {
+        "rollup": "dist/bin/rollup"
+      },
+      "engines": {
+        "node": ">=18.0.0",
+        "npm": ">=8.0.0"
+      },
+      "optionalDependencies": {
+        "@napi-rs/lzma-linux-x64-gnu": "1.5.1",
+        "@rollup/rollup-android-arm-eabi": "4.62.4",
+        "@rollup/rollup-android-arm64": "4.62.4",
+        "@rollup/rollup-darwin-arm64": "4.62.4",
+        "@rollup/rollup-darwin-x64": "4.62.4",
+        "@rollup/rollup-freebsd-arm64": "4.62.4",
+        "@rollup/rollup-freebsd-x64": "4.62.4",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.62.4",
+        "@rollup/rollup-linux-arm-musleabihf": "4.62.4",
+        "@rollup/rollup-linux-arm64-gnu": "4.62.4",
+        "@rollup/rollup-linux-arm64-musl": "4.62.4",
+        "@rollup/rollup-linux-loong64-gnu": "4.62.4",
+        "@rollup/rollup-linux-loong64-musl": "4.62.4",
+        "@rollup/rollup-linux-ppc64-gnu": "4.62.4",
+        "@rollup/rollup-linux-ppc64-musl": "4.62.4",
+        "@rollup/rollup-linux-riscv64-gnu": "4.62.4",
+        "@rollup/rollup-linux-riscv64-musl": "4.62.4",
+        "@rollup/rollup-linux-s390x-gnu": "4.62.4",
+        "@rollup/rollup-linux-x64-gnu": "4.62.4",
+        "@rollup/rollup-linux-x64-musl": "4.62.4",
+        "@rollup/rollup-openbsd-x64": "4.62.4",
+        "@rollup/rollup-openharmony-arm64": "4.62.4",
+        "@rollup/rollup-win32-arm64-msvc": "4.62.4",
+        "@rollup/rollup-win32-ia32-msvc": "4.62.4",
+        "@rollup/rollup-win32-x64-gnu": "4.62.4",
+        "@rollup/rollup-win32-x64-msvc": "4.62.4",
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/scheduler": {
+      "version": "0.23.2",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
+      "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      }
+    },
+    "node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/source-map-js": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/space-separated-tokens": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/space-separated-tokens/-/space-separated-tokens-2.0.2.tgz",
+      "integrity": "sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/ssf": {
+      "version": "0.11.2",
+      "resolved": "https://registry.npmjs.org/ssf/-/ssf-0.11.2.tgz",
+      "integrity": "sha512-+idbmIXoYET47hH+d7dfm2epdOMUDjqcB4648sTZ+t2JwoyBFL/insLfB/racrDmsKB3diwsDA696pZMieAC5g==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "frac": "~1.1.2"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/stringify-entities": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/stringify-entities/-/stringify-entities-4.0.4.tgz",
+      "integrity": "sha512-IwfBptatlO+QCJUo19AqvrPNqlVMpW9YEL2LIVY+Rpv2qsjCGxaDLNRgeGsQWJhfItebuJhsGSLjaBbNSQ+ieg==",
+      "license": "MIT",
+      "dependencies": {
+        "character-entities-html4": "^2.0.0",
+        "character-entities-legacy": "^3.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/style-to-js": {
+      "version": "1.1.21",
+      "resolved": "https://registry.npmjs.org/style-to-js/-/style-to-js-1.1.21.tgz",
+      "integrity": "sha512-RjQetxJrrUJLQPHbLku6U/ocGtzyjbJMP9lCNK7Ag0CNh690nSH8woqWH9u16nMjYBAok+i7JO1NP2pOy8IsPQ==",
+      "license": "MIT",
+      "dependencies": {
+        "style-to-object": "1.0.14"
+      }
+    },
+    "node_modules/style-to-object": {
+      "version": "1.0.14",
+      "resolved": "https://registry.npmjs.org/style-to-object/-/style-to-object-1.0.14.tgz",
+      "integrity": "sha512-LIN7rULI0jBscWQYaSswptyderlarFkjQ+t79nzty8tcIAceVomEVlLzH5VP4Cmsv6MtKhs7qaAiwlcp+Mgaxw==",
+      "license": "MIT",
+      "dependencies": {
+        "inline-style-parser": "0.2.7"
+      }
+    },
+    "node_modules/tinyglobby": {
+      "version": "0.2.17",
+      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.17.tgz",
+      "integrity": "sha512-wXR/dYpcqKmfWpEdZjiKJOwCNFndD0DMnrW/cYjVGttEkBfVgcLFHoNrlj47mjOVic9yyNu65alsgF4NQyTa2g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fdir": "^6.5.0",
+        "picomatch": "^4.0.4"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/SuperchupuDev"
+      }
+    },
+    "node_modules/trim-lines": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/trim-lines/-/trim-lines-3.0.1.tgz",
+      "integrity": "sha512-kRj8B+YHZCc9kQYdWfJB2/oUl9rA99qbowYYBtr4ui4mZyAQ2JpvVBd/6U2YloATfqBhBTSMhTpgBHtU0Mf3Rg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/trough": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/trough/-/trough-2.2.0.tgz",
+      "integrity": "sha512-tmMpK00BjZiUyVyvrBK7knerNgmgvcV/KLVyuma/SC+TQN167GrMRciANTz09+k3zW8L8t60jWO1GpfkZdjTaw==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/unified": {
+      "version": "11.0.5",
+      "resolved": "https://registry.npmjs.org/unified/-/unified-11.0.5.tgz",
+      "integrity": "sha512-xKvGhPWw3k84Qjh8bI3ZeJjqnyadK+GEFtazSfZv/rKeTkTjOJho6mFqh2SM96iIcZokxiOpg78GazTSg8+KHA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "bail": "^2.0.0",
+        "devlop": "^1.0.0",
+        "extend": "^3.0.0",
+        "is-plain-obj": "^4.0.0",
+        "trough": "^2.0.0",
+        "vfile": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-is": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-6.0.1.tgz",
+      "integrity": "sha512-LsiILbtBETkDz8I9p1dQ0uyRUWuaQzd/cuEeS1hoRSyW5E5XGmTzlwY1OrNzzakGowI9Dr/I8HVaw4hTtnxy8g==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-position": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/unist-util-position/-/unist-util-position-5.0.0.tgz",
+      "integrity": "sha512-fucsC7HjXvkB5R3kTCO7kUjRdrS0BJt3M/FPxmHMBOm8JQi2BsHAHFsy27E0EolP8rp0NzXsJ+jNPyDWvOJZPA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-stringify-position": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-4.0.0.tgz",
+      "integrity": "sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-visit": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-5.1.0.tgz",
+      "integrity": "sha512-m+vIdyeCOpdr/QeQCu2EzxX/ohgS8KbnPDgFni4dQsfSCtpz8UqDyY5GjRru8PDKuYn7Fq19j1CQ+nJSsGKOzg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "unist-util-is": "^6.0.0",
+        "unist-util-visit-parents": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-visit-parents": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-6.0.2.tgz",
+      "integrity": "sha512-goh1s1TBrqSqukSc8wrjwWhL0hiJxgA8m4kFxGlQ+8FYQ3C/m11FcTs4YYem7V664AhHVvgoQLk890Ssdsr2IQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "unist-util-is": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/update-browserslist-db": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.3.1.tgz",
+      "integrity": "sha512-ZZ61DsRsOnakl74HAmp3oSN4aXUmEWXf+i/yv0h7tIBfICc3VdrFErQKUUKPgu3AMsTUMbcongALEN4l6GSUrQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "escalade": "^3.2.0",
+        "picocolors": "^1.1.1"
+      },
+      "bin": {
+        "update-browserslist-db": "cli.js"
+      },
+      "peerDependencies": {
+        "browserslist": ">= 4.21.0"
+      }
+    },
+    "node_modules/vfile": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/vfile/-/vfile-6.0.3.tgz",
+      "integrity": "sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "vfile-message": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/vfile-message": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-4.0.3.tgz",
+      "integrity": "sha512-QTHzsGd1EhbZs4AsQ20JX1rC3cOlt/IWJruk893DfLRr57lcnOeMaWG4K0JrRta4mIJZKth2Au3mM3u03/JWKw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "unist-util-stringify-position": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/vite": {
+      "version": "6.4.3",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-6.4.3.tgz",
+      "integrity": "sha512-NTKlcQjlAK7MlQoyb6LgaqHc8sso/pVyUJYWMws3jg21uTJw/LddqIFPcPqP6PzpgbIcZyKI85sFE4HBrQDA8A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "esbuild": "^0.25.0",
+        "fdir": "^6.4.4",
+        "picomatch": "^4.0.2",
+        "postcss": "^8.5.3",
+        "rollup": "^4.34.9",
+        "tinyglobby": "^0.2.13"
+      },
+      "bin": {
+        "vite": "bin/vite.js"
+      },
+      "engines": {
+        "node": "^18.0.0 || ^20.0.0 || >=22.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/vitejs/vite?sponsor=1"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.3"
+      },
+      "peerDependencies": {
+        "@types/node": "^18.0.0 || ^20.0.0 || >=22.0.0",
+        "jiti": ">=1.21.0",
+        "less": "*",
+        "lightningcss": "^1.21.0",
+        "sass": "*",
+        "sass-embedded": "*",
+        "stylus": "*",
+        "sugarss": "*",
+        "terser": "^5.16.0",
+        "tsx": "^4.8.1",
+        "yaml": "^2.4.2"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        },
+        "jiti": {
+          "optional": true
+        },
+        "less": {
+          "optional": true
+        },
+        "lightningcss": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        },
+        "sass-embedded": {
+          "optional": true
+        },
+        "stylus": {
+          "optional": true
+        },
+        "sugarss": {
+          "optional": true
+        },
+        "terser": {
+          "optional": true
+        },
+        "tsx": {
+          "optional": true
+        },
+        "yaml": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/wmf": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/wmf/-/wmf-1.0.2.tgz",
+      "integrity": "sha512-/p9K7bEh0Dj6WbXg4JG0xvLQmIadrner1bi45VMJTfnbVHsc7yIajZyoSoK60/dtVBs12Fm6WkUI5/3WAVsNMw==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/word": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/word/-/word-0.3.0.tgz",
+      "integrity": "sha512-OELeY0Q61OXpdUfTp+oweA/vtLVg5VDOXh+3he3PNzLGG/y0oylSOC1xRVj0+l4vQ3tj/bB1HVHv1ocXkQceFA==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/xlsx": {
+      "version": "0.18.5",
+      "resolved": "https://registry.npmjs.org/xlsx/-/xlsx-0.18.5.tgz",
+      "integrity": "sha512-dmg3LCjBPHZnQp5/F/+nnTa+miPJxUXB6vtk42YjBBKayDNagxGEeIdWApkYPOf3Z3pm3k62Knjzp7lMeTEtFQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "adler-32": "~1.3.0",
+        "cfb": "~1.2.1",
+        "codepage": "~1.15.0",
+        "crc-32": "~1.2.1",
+        "ssf": "~0.11.2",
+        "wmf": "~1.0.1",
+        "word": "~0.3.0"
+      },
+      "bin": {
+        "xlsx": "bin/xlsx.njs"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/yallist": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
+      "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/zwitch": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/zwitch/-/zwitch-2.0.4.tgz",
+      "integrity": "sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    }
+  }
+}
diff --git a/kits/sheets/app/package.json b/kits/sheets/app/package.json
index e801fbd..98a53cc 100644
--- a/kits/sheets/app/package.json
+++ b/kits/sheets/app/package.json
@@ -2,14 +2,23 @@
   "name": "harnessrouter-kit-sheets",
   "private": true,
   "type": "module",
-  "scripts": { "dev": "vite", "build": "vite build" },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "test": "node --test 'src/lib/*.test.mjs'"
+  },
   "dependencies": {
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "reifyui": "^0.4.2",
+    "reifyui": "^0.5.1",
+    "highlight.js": "^11.10.0",
     "lucide-react": "^0.469.0",
     "react-markdown": "^9.0.1",
-    "remark-gfm": "^4.0.0"
+    "remark-gfm": "^4.0.0",
+    "xlsx": "^0.18.5"
   },
-  "devDependencies": { "@vitejs/plugin-react": "^4.3.4", "vite": "^6.0.7" }
+  "devDependencies": {
+    "@vitejs/plugin-react": "^4.3.4",
+    "vite": "^6.0.7"
+  }
 }
diff --git a/kits/sheets/app/src/App.jsx b/kits/sheets/app/src/App.jsx
new file mode 100644
index 0000000..a82c934
--- /dev/null
+++ b/kits/sheets/app/src/App.jsx
@@ -0,0 +1,40 @@
+// Hash router.
+//   #/            landing (prompt, templates, my sheets)
+//   #/s/{id}      the sheet (?seed=<first copilot message>, ?tpl=<template it came from>)
+//
+// The hosted product also routes #/login and keeps a sliding JWT alive here. This build has
+// neither: the console authenticates the person before this app is ever served, so there is no
+// sign-in screen to route to and no token to refresh. See lib/auth.js.
+import { useEffect, useState } from 'react';
+import { DialogHost } from 'reifyui';
+import { LandingPage } from './pages/Landing';
+import { SheetPage } from './pages/SheetPage';
+
+function parseHash() {
+  const raw = window.location.hash.replace(/^#\/?/, '');
+  const [path, query = ''] = raw.split('?');
+  const params = new URLSearchParams(query);
+  if (path.startsWith('s/')) {
+    return { page: 'sheet', id: decodeURIComponent(path.slice(2)),
+             seed: params.get('seed') || '', template: params.get('tpl') || '' };
+  }
+  return { page: 'landing' };
+}
+
+export default function App() {
+  const [route, setRoute] = useState(parseHash);
+
+  useEffect(() => {
+    const onHash = () => setRoute(parseHash());
+    window.addEventListener('hashchange', onHash);
+    return () => window.removeEventListener('hashchange', onHash);
+  }, []);
+
+  return (
+    <DialogHost>
+      {route.page === 'sheet'
+        ? <SheetPage key={route.id} id={route.id} seed={route.seed} template={route.template} />
+        : <LandingPage />}
+    </DialogHost>
+  );
+}
diff --git a/kits/sheets/app/src/app.jsx b/kits/sheets/app/src/app.jsx
deleted file mode 100644
index 9f67a2d..0000000
--- a/kits/sheets/app/src/app.jsx
+++ /dev/null
@@ -1,49 +0,0 @@
-// Hash router + session keeper.
-//   #/            landing (prompt, templates, my sheets)
-//   #/login       standalone sign in
-//   #/s/{id}      sheet page (optionally ?seed=<first copilot message>)
-import { useEffect, useState } from 'react';
-import { isAuthed, refreshToken } from './lib/auth';
-import { LandingPage } from './pages/Landing';
-import { LoginPage } from './pages/Login';
-import { SheetPage } from './pages/SheetPage';
-
-function parseHash() {
-  const raw = window.location.hash.replace(/^#\/?/, '');
-  const [path, query = ''] = raw.split('?');
-  const params = new URLSearchParams(query);
-  if (path === 'login') return { page: 'login' };
-  if (path.startsWith('s/')) {
-    return { page: 'sheet', id: decodeURIComponent(path.slice(2)), seed: params.get('seed') || '' };
-  }
-  return { page: 'landing' };
-}
-
-export default function App() {
-  const [route, setRoute] = useState(parseHash);
-
-  useEffect(() => {
-    const onHash = () => setRoute(parseHash());
-    window.addEventListener('hashchange', onHash);
-    return () => window.removeEventListener('hashchange', onHash);
-  }, []);
-
-  // Sliding session: refresh on mount, on tab focus, and every 6 hours, so an
-  // active user never lapses. A dead token fails closed into #/login.
-  useEffect(() => {
-    if (isAuthed()) refreshToken();
-    const onFocus = () => { if (isAuthed() && document.visibilityState !== 'hidden') refreshToken(); };
-    window.addEventListener('focus', onFocus);
-    document.addEventListener('visibilitychange', onFocus);
-    const iv = window.setInterval(() => { if (isAuthed()) refreshToken(); }, 6 * 60 * 60 * 1000);
-    return () => {
-      window.removeEventListener('focus', onFocus);
-      document.removeEventListener('visibilitychange', onFocus);
-      window.clearInterval(iv);
-    };
-  }, []);
-
-  if (route.page === 'login') return <LoginPage />;
-  if (route.page === 'sheet') return <SheetPage key={route.id} id={route.id} seed={route.seed} />;
-  return <LandingPage />;
-}
diff --git a/kits/sheets/app/src/components/CellDrawer.jsx b/kits/sheets/app/src/components/CellDrawer.jsx
new file mode 100644
index 0000000..4b5ea7d
--- /dev/null
+++ b/kits/sheets/app/src/components/CellDrawer.jsx
@@ -0,0 +1,159 @@
+// One agent cell, in full: the whole answer, the steps it took, and the files it produced.
+//
+// The grid cell holds a truncated copy of the answer so the sheet stays small and exports stay
+// readable. Nothing is lost — the untruncated text is in the turn itself, which is what this
+// panel reads, and which replays live while the turn is still going.
+import { useEffect, useMemo, useState } from 'react';
+import { ExternalLink, X } from 'lucide-react';
+import { CodeBlock, ToolGroup } from 'reifyui';
+import { containerFileUrl, sessionTurns } from 'reifyui/harness';
+import { consoleSessionUrl } from '../lib/sh';
+
+const POLL_MS = 1000;
+
+const ext = (name) => String(name || '').split('.').pop().toLowerCase();
+const IMAGE = ['png', 'jpg', 'jpeg', 'gif', 'webp', 'svg'];
+const TEXT = ['md', 'txt', 'json', 'csv', 'tsv', 'py', 'js', 'ts', 'jsx', 'tsx', 'sh', 'yaml', 'yml', 'html', 'css', 'sql'];
+const LANG = { md: 'markdown', py: 'python', js: 'javascript', ts: 'typescript', sh: 'bash', yml: 'yaml' };
+
+function bytesLabel(n) {
+  if (!n && n !== 0) return '';
+  if (n < 1024) return `${n} B`;
+  if (n < 1048576) return `${Math.round(n / 1024)} KB`;
+  return `${(n / 1048576).toFixed(1)} MB`;
+}
+
+/** One produced file: images inline, text in a code block, anything else a download link. */
+function Artifact({ artifact }) {
+  const url = containerFileUrl(artifact.container_id, artifact.file_id);
+  const e = ext(artifact.filename);
+  const [text, setText] = useState(null);
+  const [size, setSize] = useState(artifact.bytes ?? null);
+  const [open, setOpen] = useState(false);
+
+  useEffect(() => {
+    if (!open || !TEXT.includes(e) || text !== null) return undefined;
+    let dead = false;
+    fetch(url, { cache: 'no-store' })
+      .then((r) => (r.ok ? r.text() : ''))
+      .then((t) => { if (!dead) { setText(t); setSize(t.length); } })
+      .catch(() => { if (!dead) setText(''); });
+    return () => { dead = true; };
+  }, [open, e, url, text]);
+
+  if (IMAGE.includes(e)) {
+    return (
+      <div className="cd-art">
+        <div className="cd-art-h"><b>{artifact.filename}</b>
+          <a href={url} download={artifact.filename}>Download</a></div>
+        <img className="cd-art-img" src={url} alt={artifact.filename} />
+      </div>
+    );
+  }
+  return (
+    <div className="cd-art">
+      <div className="cd-art-h">
+        <b>{artifact.filename}</b>
+        {size != null && <span className="cd-art-size">{bytesLabel(size)}</span>}
+        {TEXT.includes(e) && (
+          <button className="linkish" onClick={() => setOpen((v) => !v)}>{open ? 'Hide' : 'Preview'}</button>
+        )}
+        <a href={url} download={artifact.filename}>Download</a>
+      </div>
+      {open && TEXT.includes(e) && (
+        text === null ? <div className="cd-note">Loading…</div>
+                      : <CodeBlock code={text} lang={LANG[e] || e} />
+      )}
+    </div>
+  );
+}
+
+export function CellDrawer({ cell, column, rowIndex, agentName, onClose, onLive }) {
+  // The agent id lives on the column, not on the cell: the cell records which session ran,
+  // and the console's deep link needs both.
+  const harnessId = column?.harness?.harness_id || '';
+  const [turns, setTurns] = useState(null);
+  const sid = cell?.session_id;
+  const runningNow = cell?.status === 'running';
+
+  useEffect(() => {
+    if (!sid) return undefined;
+    let dead = false;
+    const load = () => sessionTurns(sid).then((t) => { if (!dead) setTurns(t); }).catch(() => {});
+    load();
+    if (!runningNow) return () => { dead = true; };
+    // The turn replay serves a running turn too, so one mechanism covers both watching it happen
+    // and reading it afterwards — including in a tab that was reopened and has no stream.
+    const iv = window.setInterval(load, POLL_MS);
+    return () => { dead = true; window.clearInterval(iv); };
+  }, [sid, runningNow]);
+
+  const text = useMemo(() => {
+    const parts = (turns || []).map((t) => t.assistant).filter(Boolean);
+    return parts.join('\n\n');
+  }, [turns]);
+
+  // While this cell runs, its first line is worth showing in the grid — this is the only place
+  // already polling for it, so the grid gets it from here rather than starting its own poll.
+  useEffect(() => {
+    if (!onLive) return;
+    onLive(runningNow ? (text.split('\n').find(Boolean) || '').slice(0, 160) : '');
+  }, [text, runningNow, onLive]);
+
+  const steps = useMemo(
+    () => (turns || []).flatMap((t) => (t.tools || []).map((x) => ({ name: x.name, args: x.arguments, result: x.result }))),
+    [turns],
+  );
+
+  const duration = cell?.started_at && cell?.ended_at
+    ? `${Math.max(0, cell.ended_at - cell.started_at)}s` : '';
+
+  return (
+    <aside className="cd" role="dialog" aria-label={`${column?.name}, row ${rowIndex + 1}`}>
+      <header className="cd-h">
+        <div className="cd-h-main">
+          <b>{column?.name}</b> · row {rowIndex + 1}
+          <div className="cd-sub">
+            {agentName || 'Agent'}
+            {cell?.status ? ` · ${cell.status}` : ''}
+            {duration ? ` · ${duration}` : ''}
+          </div>
+        </div>
+        <button className="pane-btn" onClick={onClose} aria-label="Close"><X size={16} /></button>
+      </header>
+
+      <div className="cd-body scroll">
+        {cell?.error && <div className="cd-err">{cell.error}</div>}
+
+        {!sid && !cell?.error && <div className="cd-note">This cell has not been run yet.</div>}
+
+        {sid && turns === null && <div className="cd-note">Loading the conversation…</div>}
+
+        {text && <div className="cd-text">{text}</div>}
+        {sid && turns !== null && !text && !cell?.error && (
+          <div className="cd-note">{runningNow ? 'Working…' : 'This turn produced no text.'}</div>
+        )}
+
+        {steps.length > 0 && <ToolGroup steps={steps} />}
+
+        {cell?.artifacts?.length > 0 && (
+          <section className="cd-arts">
+            <h4>Files</h4>
+            {cell.artifacts.map((a) => <Artifact key={a.file_id} artifact={a} />)}
+          </section>
+        )}
+        {runningNow && (
+          <div className="cd-note">Files appear when the agent finishes.</div>
+        )}
+      </div>
+
+      {sid && (
+        <footer className="cd-f">
+          <a className="btn" href={consoleSessionUrl(harnessId, sid)} target="_blank" rel="noreferrer">
+            Open the full conversation <ExternalLink size={13} />
+          </a>
+        </footer>
+      )}
+    </aside>
+  );
+}
diff --git a/kits/sheets/app/src/components/ChatPanel.jsx b/kits/sheets/app/src/components/ChatPanel.jsx
index f88b90e..91895ef 100644
--- a/kits/sheets/app/src/components/ChatPanel.jsx
+++ b/kits/sheets/app/src/components/ChatPanel.jsx
@@ -1,19 +1,15 @@
-// Copilot chat column — the workflow page's full-height right panel.
-// Adapted from ContextualGraph's ChatPanel: the conversational surface is the
-// shared UI Core package; the broker transport is Sheets's (lib/copilot.js
-// streaming with the non-streaming /chat fallback). On mount it replays the
-// member's prior conversation over this workflow; the landing prompt's ?seed=
-// fires exactly ONCE (stripped from the URL immediately, skipped when history
-// already exists).
+// The copilot column — the sheet page's full-height right panel.
+//
+// On mount it replays the conversation so far; the landing prompt's ?seed= fires exactly once,
+// stripped from the URL immediately and skipped when there is already history.
 import { useEffect, useRef, useState } from 'react';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
-import { ArrowUp, Mic, PanelRight, Plus, Sparkles } from 'lucide-react';
-import { ChatMessages, ChatMessagesSkeleton } from 'reifyui';
-import { Composer } from 'reifyui';
-import { withReasoning, withResult, withStep, withText } from 'reifyui';
-import { chatHistory, sendChat } from '../lib/sh';
-import { streamTurn } from '../lib/copilot';
+import { ArrowUp, PanelRight, Sparkles } from 'lucide-react';
+import { ChatMessages, ChatMessagesSkeleton, Composer, withReasoning, withResult, withStep, withText } from 'reifyui';
+import { sessionTurns, turnsToMessages } from 'reifyui/harness';
+import { isPending } from '../lib/sh';
+import { runCopilotTurn } from '../lib/copilot';
 
 const RETRY_MS = 20000;
 
@@ -31,28 +27,13 @@ function stripSeedFromHash() {
   const params = new URLSearchParams(query);
   params.delete('seed');
   const rest = params.toString();
-  window.history.replaceState(null, '', window.location.pathname + window.location.search + path + (rest ? `?${rest}` : ''));
+  window.history.replaceState(null, '', window.location.pathname + window.location.search
+    + path + (rest ? `?${rest}` : ''));
 }
 
-/** Broker history turns -> the shared component's message shape. */
-function turnsToMessages(turns) {
-  const m = [];
-  for (const t of turns || []) {
-    if (t.user) m.push({ role: 'user', text: t.user });
-    const steps = (t.tools || []).map((x) => ({ name: x.name, args: x.arguments, result: x.result }));
-    const blocks = [];
-    if (steps.length) blocks.push({ kind: 'tools', reasoning: '', steps });
-    if (t.assistant) blocks.push({ kind: 'text', text: t.assistant });
-    const st = (t.status === 'failed' || t.status === 'error') ? 'failed'
-      : t.status === 'cancelled' ? 'cancelled'
-        : (t.status === 'incomplete' || t.status === 'max_turns' || t.status === 'timeout') ? 'incomplete'
-          : 'done';
-    if (blocks.length || st !== 'done') m.push({ role: 'assistant', blocks, status: st });
-  }
-  return m;
-}
+const history = (id) => (isPending(id) ? Promise.resolve([]) : sessionTurns(id));
 
-export function ChatColumn({ sheetId, seed, title, copilotBuilding, collapsed, onToggle, onSheetMaybeChanged, width }) {
+export function ChatColumn({ sheetId, seed, title, agentBusy, onSheetMaybeChanged, onSessionStarted, width }) {
   const [messages, setMessages] = useState([]);
   const [draft, setDraft] = useState('');
   const [busy, setBusy] = useState(false);
@@ -61,7 +42,6 @@ export function ChatColumn({ sheetId, seed, title, copilotBuilding, collapsed, o
   const pendingRef = useRef(null);
   const bodyRef = useRef(null);
   const seededRef = useRef(false);
-  const streamOkRef = useRef(true);
 
   useEffect(() => {
     bodyRef.current?.scrollTo({ top: bodyRef.current.scrollHeight });
@@ -70,7 +50,7 @@ export function ChatColumn({ sheetId, seed, title, copilotBuilding, collapsed, o
   function updateLastAsst(fn) {
     setMessages((m) => {
       const out = m.slice();
-      for (let i = out.length - 1; i >= 0; i--) {
+      for (let i = out.length - 1; i >= 0; i -= 1) {
         if (out[i].role === 'assistant') { out[i] = fn({ ...out[i] }); break; }
       }
       return out;
@@ -82,37 +62,13 @@ export function ChatColumn({ sheetId, seed, title, copilotBuilding, collapsed, o
       ? m.slice(0, -1) : m));
   }
 
-  async function legacyDeliver(text) {
-    try {
-      const res = await sendChat(sheetId, text);
-      if (res.status === 404 || res.status === 503) {
-        dropRunningAsst();
-        pendingRef.current = text;
-        setConnecting(true);
-        return;
-      }
-      const body = await res.json().catch(() => null);
-      const reply = (body && (body.reply || body.message)) || (res.ok ? '...' : `Something went wrong (${res.status}). Please try again.`);
-      updateLastAsst((a) => ({ ...a, blocks: withText(a.blocks, reply), status: res.ok ? 'done' : 'failed' }));
-      pendingRef.current = null;
-      setConnecting(false);
-      onSheetMaybeChanged?.();
-    } catch {
-      dropRunningAsst();
-      pendingRef.current = text;
-      setConnecting(true);
-    }
-  }
-
   async function deliver(text) {
     setBusy(true);
     setMessages((m) => [...m, { role: 'assistant', blocks: [], status: 'running' }]);
     try {
-      if (!streamOkRef.current) {
-        await legacyDeliver(text);
-        return;
-      }
-      const out = await streamTurn(sheetId, text, {
+      const out = await runCopilotTurn(sheetId, text, {
+        // A sheet created from the landing page has no session until this turn makes one.
+        onSession: (sid) => onSessionStarted?.(sid),
         onReasoningDelta: (d) => updateLastAsst((a) => ({ ...a, blocks: withReasoning(a.blocks, d) })),
         onToolCall: (name, args, callId) => updateLastAsst((a) => ({ ...a, blocks: withStep(a.blocks, { name, args, callId }) })),
         onToolResult: (callId, output) => updateLastAsst((a) => ({ ...a, blocks: withResult(a.blocks, callId, output) })),
@@ -124,11 +80,6 @@ export function ChatColumn({ sheetId, seed, title, copilotBuilding, collapsed, o
           status: 'failed',
         })),
       });
-      if (out.unsupported) {
-        streamOkRef.current = false;
-        await legacyDeliver(text);
-        return;
-      }
       if (out.connecting) {
         dropRunningAsst();
         pendingRef.current = text;
@@ -156,11 +107,21 @@ export function ChatColumn({ sheetId, seed, title, copilotBuilding, collapsed, o
     deliver(t);
   }
 
-  // Mount: strip ?seed FIRST, then replay history; seed fires only when empty.
+  // Mount: strip ?seed FIRST, then replay history; the seed fires only when there is none.
+  //
+  // Keyed on sheetId, and a pending sheet CHANGES its id mid-stream: it starts as
+  // "new:<template>" and adopts the real session id the moment the first turn opens one.
+  // Re-running then refetches history and setMessages() over the blocks streaming in — the panel
+  // shows the user bubble and nothing else while the agent is visibly working. It is the same
+  // conversation, so the resolve is not a reason to reload it.
+  const prevId = useRef(sheetId);
   useEffect(() => {
+    const resolved = isPending(prevId.current) && !isPending(sheetId);
+    prevId.current = sheetId;
+    if (resolved) return undefined;
     stripSeedFromHash();
     let dead = false;
-    chatHistory(sheetId).then(({ turns }) => {
+    history(sheetId).then((turns) => {
       if (dead) return;
       const hist = turnsToMessages(turns);
       if (hist.length) setMessages(hist);
@@ -175,7 +136,7 @@ export function ChatColumn({ sheetId, seed, title, copilotBuilding, collapsed, o
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [sheetId]);
 
-  // While the broker is not live, retry the pending message on an interval.
+  // Retry a message the gateway was not up to receive.
   useEffect(() => {
     if (!connecting) return undefined;
     const iv = window.setInterval(() => {
@@ -185,46 +146,52 @@ export function ChatColumn({ sheetId, seed, title, copilotBuilding, collapsed, o
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [connecting, busy]);
 
-  if (collapsed) {
-    return (
-      <aside className="gp-chat collapsed">
-        <div className="gp-chat-h">
-          <button className="top-side-toggle" type="button" onClick={onToggle}
-                  title="Show copilot" aria-label="Show copilot">
-            <PanelRight size={17} />
-          </button>
-        </div>
-      </aside>
-    );
-  }
+  // A turn may be running that this tab did not start — reopened mid-turn, or another window.
+  // Poll history while that is true and nothing local is streaming, then reload once when it
+  // ends so the final answer and its edits land here without a refresh.
+  const prevBusyRef = useRef(false);
+  useEffect(() => {
+    let dead = false;
+    let poll;
+    const reload = () => history(sheetId).then((turns) => {
+      if (dead) return;
+      const hist = turnsToMessages(turns);
+      if (hist.length && !busy && !pendingRef.current) setMessages(hist);
+    });
+    if (agentBusy && messages.length === 0 && !busy) poll = window.setInterval(reload, 3000);
+    if (prevBusyRef.current && !agentBusy) {
+      reload();
+      onSheetMaybeChanged?.();
+    }
+    prevBusyRef.current = agentBusy;
+    return () => { dead = true; if (poll) window.clearInterval(poll); };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [agentBusy, messages.length, busy]);
 
   const empty = messages.length === 0;
 
   return (
     <aside className="gp-chat" style={width ? { flex: `0 0 ${width}px` } : undefined}>
       <div className="gp-chat-h">
-        <button className="top-side-toggle" type="button" onClick={onToggle}
-                title="Hide copilot" aria-label="Hide copilot">
-          <PanelRight size={17} />
-        </button>
+        <PanelRight size={16} className="gp-chat-ic" aria-hidden="true" />
         <span className="gp-chat-title" title={title || undefined}>{title || 'Copilot'}</span>
-        {/* Copilot status: pulses while a turn runs — fed by the realtime
-            channel, so it also shows for turns started in another window. */}
-        {copilotBuilding && (
-          <span className="gp-chat-cop" title="Copilot is building">
-            <Sparkles size={12} />
-          </span>
-        )}
+        {agentBusy && <span className="gp-chat-cop" title="The agent is working"><Sparkles size={12} /></span>}
         {connecting && <span className="stat-lbl">connecting</span>}
       </div>
       <div className="chat-body scroll" ref={bodyRef}>
         {histLoading ? (
           <ChatMessagesSkeleton />
+        ) : empty && agentBusy ? (
+          <div className="pane-empty">
+            <span className="pulse-dot" />
+            <div className="big">Building your sheet…</div>
+            <div>Working through the columns now. Your conversation will appear here.</div>
+          </div>
         ) : empty ? (
           <div className="pane-empty">
             <Sparkles size={26} />
             <div className="big">Your sheet copilot</div>
-            <div>Describe the sheet you want and your copilot will build it and fill it, row by row.</div>
+            <div>Describe the columns you want, and it will build and refine the sheet with you.</div>
           </div>
         ) : (
           <ChatMessages
@@ -238,7 +205,7 @@ export function ChatColumn({ sheetId, seed, title, copilotBuilding, collapsed, o
         {connecting && (
           <div className="chat-status">
             <span className="pulse" />
-            Copilot is connecting. Your message will be delivered as soon as it is online.
+            Still connecting. Your message will be sent as soon as it is online.
           </div>
         )}
       </div>
@@ -247,20 +214,10 @@ export function ChatColumn({ sheetId, seed, title, copilotBuilding, collapsed, o
         onChange={setDraft}
         onSend={() => send(draft)}
         disabled={histLoading}
-        placeholder="What would you want to change?"
+        placeholder="What should this sheet do?"
         rows={2}
         autoGrow={false}
         classNames={{ root: 'cmp', input: '', row: 'cmp-row' }}
-        accessoriesLeft={(
-          <span title="Attachments are coming soon">
-            <button type="button" className="cmp-icon" disabled aria-label="Add an attachment"><Plus size={16} /></button>
-          </span>
-        )}
-        accessoriesRight={(
-          <span title="Voice input is coming soon">
-            <button type="button" className="cmp-icon" disabled aria-label="Voice input"><Mic size={15} /></button>
-          </span>
-        )}
         renderSend={() => (
           <button type="button" className="cmp-send" onClick={() => send(draft)}
                   disabled={busy || histLoading || !draft.trim()} aria-label="Send message">
diff --git a/kits/sheets/app/src/components/Dialog.jsx b/kits/sheets/app/src/components/Dialog.jsx
deleted file mode 100644
index 4f7f1ac..0000000
--- a/kits/sheets/app/src/components/Dialog.jsx
+++ /dev/null
@@ -1,61 +0,0 @@
-// In-app dialogs. House rule: never window.alert / confirm / prompt.
-import { useEffect, useRef, useState } from 'react';
-
-export function Dialog({ onClose, children, width }) {
-  useEffect(() => {
-    function onKey(e) { if (e.key === 'Escape') onClose?.(); }
-    window.addEventListener('keydown', onKey);
-    return () => window.removeEventListener('keydown', onKey);
-  }, [onClose]);
-  return (
-    <div className="dlg-backdrop" onMouseDown={(e) => { if (e.target === e.currentTarget) onClose?.(); }}>
-      <div className="dlg" style={width ? { width } : undefined} role="dialog" aria-modal="true">
-        {children}
-      </div>
-    </div>
-  );
-}
-
-export function ConfirmDialog({ title, body, confirmLabel = 'Delete', busy, onConfirm, onClose }) {
-  return (
-    <Dialog onClose={busy ? undefined : onClose}>
-      <h3>{title}</h3>
-      <div className="body">{body}</div>
-      <div className="foot">
-        <button className="btn" onClick={onClose} disabled={busy}>Cancel</button>
-        <button className="btn danger" onClick={onConfirm} disabled={busy}>
-          {busy ? 'Working...' : confirmLabel}
-        </button>
-      </div>
-    </Dialog>
-  );
-}
-
-export function NameDialog({ title, body, defaultValue = '', confirmLabel = 'Create', busy, onSubmit, onClose }) {
-  const [value, setValue] = useState(defaultValue);
-  const ref = useRef(null);
-  useEffect(() => { ref.current?.focus(); ref.current?.select(); }, []);
-  const ok = value.trim().length > 0;
-  return (
-    <Dialog onClose={busy ? undefined : onClose}>
-      <h3>{title}</h3>
-      {body && <div className="body">{body}</div>}
-      <form onSubmit={(e) => { e.preventDefault(); if (ok && !busy) onSubmit(value.trim()); }}>
-        <input
-          ref={ref}
-          className="input"
-          value={value}
-          onChange={(e) => setValue(e.target.value)}
-          placeholder="Workflow name"
-          maxLength={80}
-        />
-        <div className="foot">
-          <button type="button" className="btn" onClick={onClose} disabled={busy}>Cancel</button>
-          <button type="submit" className="btn primary" disabled={!ok || busy}>
-            {busy ? 'Creating...' : confirmLabel}
-          </button>
-        </div>
-      </form>
-    </Dialog>
-  );
-}
diff --git a/kits/sheets/app/src/components/HarnessCell.jsx b/kits/sheets/app/src/components/HarnessCell.jsx
new file mode 100644
index 0000000..69d518f
--- /dev/null
+++ b/kits/sheets/app/src/components/HarnessCell.jsx
@@ -0,0 +1,85 @@
+// What an agent cell looks like in the grid.
+//
+// Mounted through SheetGrid's renderCell slot, inside the cell's own value box, so the row-height
+// line clamp and the cell chrome still apply.
+//
+// Every state here is a state the run genuinely produces. There is no percentage and no estimate:
+// the server exposes no queue — past its concurrency limit turns are accepted and block silently,
+// indistinguishable over the API from working ones — so a progress bar inside one cell would be
+// invented. A spinner is the truth.
+import { FileText, Play, Maximize2 } from 'lucide-react';
+
+function Artifacts({ artifacts }) {
+  if (!artifacts?.length) return null;
+  const shown = artifacts.slice(0, 3);
+  return (
+    <span className="hcell-files">
+      {shown.map((a) => (
+        <span key={a.file_id} className="hcell-file" title={a.filename}>
+          <FileText size={11} />{a.filename}
+        </span>
+      ))}
+      {artifacts.length > shown.length && (
+        <span className="hcell-file more">+{artifacts.length - shown.length}</span>
+      )}
+    </span>
+  );
+}
+
+export function HarnessCell({ cell, live, readOnly, onRun, onOpen }) {
+  const status = cell?.status;
+  const tools = !readOnly && (
+    <span className="hcell-tools">
+      {onRun && (
+        <button className="hcell-btn" title="Run this cell"
+                onClick={(e) => { e.stopPropagation(); onRun(); }}><Play size={11} /></button>
+      )}
+      {onOpen && status && (
+        <button className="hcell-btn" title="Open this cell"
+                onClick={(e) => { e.stopPropagation(); onOpen(); }}><Maximize2 size={11} /></button>
+      )}
+    </span>
+  );
+
+  if (!status) {
+    return <span className="hcell empty">{tools}</span>;
+  }
+  if (status === 'queued') {
+    return <span className="hcell"><span className="hcell-dot queued" title="Waiting to start" />{tools}</span>;
+  }
+  if (status === 'running') {
+    return (
+      <span className="hcell">
+        <span className="hcell-spin" />
+        {/* Live text only when the drawer is open on this cell — that is the one place a turn
+            replay is already being polled. Elsewhere we do not invent a progress phrase. */}
+        {live ? <span className="hcell-live">{live}</span> : null}
+        {tools}
+      </span>
+    );
+  }
+  if (status === 'failed') {
+    return (
+      <span className="hcell failed" title={cell.error || ''}>
+        <span className="hcell-dot failed" />
+        <span className="hcell-txt">{cell.error || 'This cell failed.'}</span>
+        {tools}
+      </span>
+    );
+  }
+  if (status === 'skipped') {
+    return (
+      <span className="hcell skipped" title={cell.error || ''}>
+        <span className="hcell-txt">{cell.error || 'Skipped.'}</span>
+        {tools}
+      </span>
+    );
+  }
+  return (
+    <span className="hcell" onClick={(e) => { if (onOpen) { e.stopPropagation(); onOpen(); } }}>
+      <span className="hcell-txt">{cell.value}</span>
+      <Artifacts artifacts={cell.artifacts} />
+      {tools}
+    </span>
+  );
+}
diff --git a/kits/sheets/app/src/components/HarnessConfig.jsx b/kits/sheets/app/src/components/HarnessConfig.jsx
new file mode 100644
index 0000000..a96e2a4
--- /dev/null
+++ b/kits/sheets/app/src/components/HarnessConfig.jsx
@@ -0,0 +1,155 @@
+// Configuring an agent column: which agent runs, what it is asked, and what it is given.
+//
+// Rendered inside the grid's own column popover (SheetGrid's renderColumnConfig slot), so it sits
+// under the Type select where a column's settings already live.
+//
+// The picker never lists this sheet's own agent — that exclusion happens in sh.js, at the source
+// of the list, so the recursive choice is not offered rather than offered and then refused.
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { columnByName, derivedDeps, isHarnessColumn, refs } from '../lib/model';
+import { runnableHarnesses } from '../lib/sh';
+
+export function HarnessConfig({ column, columns, applyPatch, close }) {
+  const index = columns.findIndex((c) => c.id === column.id);
+  // Only columns to the LEFT can be referenced. Enforced here so a forward reference cannot be
+  // authored in the first place — the planner re-checks, but a refusal at run time is a worse
+  // place to learn it.
+  const earlier = useMemo(() => columns.slice(0, index < 0 ? columns.length : index), [columns, index]);
+  const attachable = earlier.filter(isHarnessColumn);
+
+  const cfg = column.harness || {};
+  const [harnessId, setHarnessId] = useState(cfg.harness_id || '');
+  const [prompt, setPrompt] = useState(cfg.prompt || '');
+  const [attach, setAttach] = useState(new Set(cfg.attach || []));
+  const [agents, setAgents] = useState(null);       // null = still loading
+  const [loadErr, setLoadErr] = useState('');
+  const promptRef = useRef(null);
+
+  useEffect(() => {
+    let dead = false;
+    runnableHarnesses()
+      .then((list) => { if (!dead) setAgents(list); })
+      .catch((e) => { if (!dead) { setAgents([]); setLoadErr(e?.message || 'Could not load your agents.'); } });
+    return () => { dead = true; };
+  }, []);
+
+  const chosen = agents?.find((a) => a.id === harnessId) || null;
+
+  // What this column will actually read, derived from the prompt and the attachments — the same
+  // function the planner uses, so what is shown and what runs cannot drift apart.
+  const reads = derivedDeps({ ...column, type: 'harness', harness: { prompt, attach: [...attach] } }, columns)
+    .map((id) => columns.find((c) => c.id === id)?.name)
+    .filter(Boolean);
+
+  // A reference that names no column, or one that is not to the left. Shown while typing rather
+  // than at run time.
+  const badRefs = refs(prompt).filter((n) => {
+    const hit = columnByName(columns, n);
+    return !hit || columns.indexOf(hit) >= index;
+  });
+
+  const insertRef = (name) => {
+    const el = promptRef.current;
+    const token = `{{${name}}}`;
+    if (!el) { setPrompt((p) => p + token); return; }
+    const { selectionStart: a, selectionEnd: b } = el;
+    setPrompt((p) => p.slice(0, a) + token + p.slice(b));
+    requestAnimationFrame(() => {
+      el.focus();
+      el.setSelectionRange(a + token.length, a + token.length);
+    });
+  };
+
+  const toggleAttach = (id) => setAttach((s) => {
+    const n = new Set(s);
+    if (n.has(id)) n.delete(id); else n.add(id);
+    return n;
+  });
+
+  const save = () => applyPatch({
+    harness: {
+      harness_id: harnessId,
+      harness_name: chosen?.name || cfg.harness_name || '',
+      prompt,
+      attach: [...attach].filter((id) => attachable.some((c) => c.id === id)),
+      ...(cfg.timeout_seconds ? { timeout_seconds: cfg.timeout_seconds } : {}),
+    },
+  });
+
+  return (
+    <div className="hc">
+      <label className="shg-menu-lbl">Agent
+        {agents === null ? (
+          <div className="hc-note">Loading your agents…</div>
+        ) : agents.length === 0 ? (
+          <div className="hc-note">
+            {loadErr || 'You have no other agents yet. Create one, then choose it here.'}
+          </div>
+        ) : (
+          <select className="shg-menu-input" value={harnessId}
+                  onChange={(e) => setHarnessId(e.target.value)}>
+            <option value="">Choose an agent…</option>
+            {agents.map((a) => (
+              <option key={a.id} value={a.id} disabled={!!a.unusable}>
+                {a.name}{a.model ? ` · ${a.model}` : ''}{a.unusable ? ` — ${a.unusable}` : ''}
+              </option>
+            ))}
+          </select>
+        )}
+      </label>
+
+      <label className="shg-menu-lbl">Ask it
+        <textarea ref={promptRef} className="shg-menu-input hc-prompt" rows={5} value={prompt}
+                  onChange={(e) => setPrompt(e.target.value)}
+                  placeholder={'Write one sentence about {{Company}}.'} />
+      </label>
+
+      {earlier.length > 0 && (
+        <div className="hc-chips">
+          <span className="hc-chips-lbl">Insert</span>
+          {earlier.map((c) => (
+            <button key={c.id} type="button" className="hc-chip" onClick={() => insertRef(c.name)}>
+              {`{{${c.name}}}`}
+            </button>
+          ))}
+        </div>
+      )}
+      {!earlier.length && (
+        <div className="hc-note">
+          This is the first column, so there is nothing to its left to reference yet. Every row will
+          get the same question.
+        </div>
+      )}
+
+      {badRefs.length > 0 && (
+        <div className="hc-bad">
+          {badRefs.map((n) => `{{${n}}}`).join(', ')} {badRefs.length > 1 ? 'do not name columns' : 'does not name a column'} to
+          the left of this one, so the run would be refused.
+        </div>
+      )}
+
+      {attachable.length > 0 && (
+        <div className="shg-menu-lbl">Also attach the files from
+          <div className="shg-menu-deps">
+            {attachable.map((c) => (
+              <label key={c.id} className="shg-menu-dep">
+                <input type="checkbox" checked={attach.has(c.id)} onChange={() => toggleAttach(c.id)} />
+                {c.name}
+              </label>
+            ))}
+          </div>
+        </div>
+      )}
+
+      <div className="hc-reads">
+        {reads.length ? <>Reads <b>{reads.join(', ')}</b> — once per row.</>
+                      : 'Reads nothing from this sheet yet.'}
+      </div>
+
+      <div className="shg-menu-actions">
+        <button className="shg-pop-clear" onClick={close}>Cancel</button>
+        <button className="shg-menu-apply" onClick={save}>Save</button>
+      </div>
+    </div>
+  );
+}
diff --git a/kits/sheets/app/src/components/PasteRows.jsx b/kits/sheets/app/src/components/PasteRows.jsx
new file mode 100644
index 0000000..604093e
--- /dev/null
+++ b/kits/sheets/app/src/components/PasteRows.jsx
@@ -0,0 +1,127 @@
+// Getting data into a sheet without spending a turn on it.
+//
+// A dialog rather than an in-grid paste, and deliberately: SheetGrid has no selection model at
+// all — no anchor cell, no keyboard navigation — so a paste would have nowhere to land. Here the
+// person sees exactly what was parsed, which columns it maps onto, and what will be created,
+// before anything changes.
+import { useMemo, useRef, useState } from 'react';
+import { Upload } from 'lucide-react';
+import { applyImport, parseDelimited, planImport } from '../lib/paste';
+
+const PREVIEW_ROWS = 6;
+
+export function PasteRows({ sheet, onApply, onClose }) {
+  const [text, setText] = useState('');
+  const [mode, setMode] = useState('append');
+  const [drag, setDrag] = useState(false);
+  const fileRef = useRef(null);
+
+  const parsed = useMemo(() => (text.trim() ? parseDelimited(text) : null), [text]);
+  const [mapping, setMapping] = useState(null);
+  const plan = useMemo(() => (parsed ? planImport(sheet, parsed) : null), [sheet, parsed]);
+  const effective = mapping && mapping.length === (parsed?.header.length || 0) ? mapping : plan?.mapping;
+
+  const readFile = (file) => {
+    if (!file) return;
+    const r = new FileReader();
+    r.onload = () => { setText(String(r.result || '')); setMapping(null); };
+    r.readAsText(file);
+  };
+
+  const setTarget = (i, colId) => {
+    const next = (effective || []).map((m, j) => (j === i
+      ? { ...m, colId: colId || null, newName: colId ? '' : (m.newName || m.header) }
+      : m));
+    setMapping(next);
+  };
+
+  const newCount = (effective || []).filter((m) => !m.colId).length;
+
+  return (
+    <div className="dlg-backdrop" onMouseDown={(e) => { if (e.target === e.currentTarget) onClose(); }}>
+      <div className="dlg pr" role="dialog" aria-modal="true" aria-label="Paste rows">
+        <h3>Paste rows</h3>
+
+        {!parsed ? (
+          <div className={'pr-drop' + (drag ? ' over' : '')}
+               onDragOver={(e) => { e.preventDefault(); setDrag(true); }}
+               onDragLeave={() => setDrag(false)}
+               onDrop={(e) => { e.preventDefault(); setDrag(false); readFile(e.dataTransfer.files?.[0]); }}>
+            <textarea className="input pr-text" autoFocus rows={8}
+                      placeholder={'Paste rows from a spreadsheet, or drop a .csv / .tsv file here.'}
+                      value={text} onChange={(e) => { setText(e.target.value); setMapping(null); }} />
+            <div className="pr-or">
+              <button className="btn" onClick={() => fileRef.current?.click()}>
+                <Upload size={14} /> Choose a file
+              </button>
+              <input ref={fileRef} type="file" accept=".csv,.tsv,.txt,text/*" hidden
+                     onChange={(e) => { readFile(e.target.files?.[0]); e.target.value = ''; }} />
+            </div>
+          </div>
+        ) : (
+          <>
+            <div className="pr-sum">
+              {parsed.rows.length} row{parsed.rows.length === 1 ? '' : 's'} ·
+              {' '}{parsed.header.length} column{parsed.header.length === 1 ? '' : 's'}
+              {newCount > 0 && <> · {newCount} new column{newCount === 1 ? '' : 's'} will be created</>}
+              <button className="linkish" onClick={() => { setText(''); setMapping(null); }}>Start over</button>
+            </div>
+
+            <div className="pr-table-wrap scroll">
+              <table className="pr-table">
+                <thead>
+                  <tr>
+                    {(effective || []).map((m, i) => (
+                      <th key={i}>
+                        <div className="pr-head">{m.header || `Column ${i + 1}`}</div>
+                        <select className="input sm" value={m.colId || ''}
+                                onChange={(e) => setTarget(i, e.target.value)}>
+                          <option value="">Create “{m.newName || m.header || `Column ${i + 1}`}”</option>
+                          {(sheet.columns || []).filter((c) => c.type !== 'harness').map((c) => (
+                            <option key={c.id} value={c.id}>{c.name}</option>
+                          ))}
+                        </select>
+                      </th>
+                    ))}
+                  </tr>
+                </thead>
+                <tbody>
+                  {parsed.rows.slice(0, PREVIEW_ROWS).map((r, i) => (
+                    <tr key={i}>{r.map((v, j) => <td key={j}>{v}</td>)}</tr>
+                  ))}
+                </tbody>
+              </table>
+              {parsed.rows.length > PREVIEW_ROWS && (
+                <div className="pr-more">and {parsed.rows.length - PREVIEW_ROWS} more</div>
+              )}
+            </div>
+
+            <div className="pr-mode">
+              <label>
+                <input type="radio" checked={mode === 'append'} onChange={() => setMode('append')} />
+                Add these below the existing rows
+              </label>
+              <label>
+                <input type="radio" checked={mode === 'replace'} onChange={() => setMode('replace')} />
+                Replace the rows that are here now
+              </label>
+            </div>
+            {mode === 'replace' && (
+              <p className="pr-warn">
+                The existing rows and their results go. The columns and their settings stay.
+              </p>
+            )}
+          </>
+        )}
+
+        <div className="foot">
+          <button className="btn" onClick={onClose}>Cancel</button>
+          <button className="btn primary" disabled={!parsed?.rows.length}
+                  onClick={() => onApply(applyImport(sheet, parsed, effective, mode))}>
+            {parsed ? `${mode === 'replace' ? 'Replace with' : 'Add'} ${parsed.rows.length} row${parsed.rows.length === 1 ? '' : 's'}` : 'Add rows'}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/kits/sheets/app/src/components/RunControl.jsx b/kits/sheets/app/src/components/RunControl.jsx
new file mode 100644
index 0000000..5edd60a
--- /dev/null
+++ b/kits/sheets/app/src/components/RunControl.jsx
@@ -0,0 +1,97 @@
+// The Run control: what to run, how many at a time, and what is happening now.
+//
+// Everything it claims is counted from the plan. `7/12 · 1 failed` is the real settled count over
+// the real planned count; there is no ETA and no percentage inside a cell, because the server
+// exposes no queue to measure and a wrong estimate is worse than none.
+import { useEffect, useRef, useState } from 'react';
+import { ChevronDown, Play, Square } from 'lucide-react';
+import { CONCURRENCY_CHOICES } from '../lib/run';
+
+export function RunControl({ running, progress, concurrency, onConcurrency, onRun, onStop, disabled, lastRun }) {
+  const [open, setOpen] = useState(false);
+  const wrapRef = useRef(null);
+
+  // mousedown with a containment check, from the first line. A `click` listener attached in the
+  // effect that opens the menu fires during that very click — React 18 flushes it synchronously —
+  // and the menu closes before it paints. That is a whole evening's bug in one line of setup.
+  useEffect(() => {
+    if (!open) return undefined;
+    const onDown = (e) => { if (wrapRef.current && !wrapRef.current.contains(e.target)) setOpen(false); };
+    window.addEventListener('mousedown', onDown);
+    return () => window.removeEventListener('mousedown', onDown);
+  }, [open]);
+
+  if (running) {
+    const { planned = 0, settled = 0, failed = 0 } = progress || {};
+    const pct = planned ? Math.round((settled / planned) * 100) : 0;
+    return (
+      <div className="run-wrap running">
+        <button className="btn run-stop" onClick={onStop} title="Stop this run">
+          <Square size={13} /> Stop
+        </button>
+        <span className="run-count">
+          {settled}/{planned}
+          {failed > 0 && <span className="run-failed"> · {failed} failed</span>}
+        </span>
+        <span className="run-bar" aria-hidden="true"><span style={{ width: `${pct}%` }} /></span>
+      </div>
+    );
+  }
+
+  return (
+    <div className="run-wrap" ref={wrapRef}>
+      <button className="btn primary run-go" disabled={disabled} onClick={() => onRun('all')}
+              title="Run every agent column">
+        <Play size={13} /> Run <span className="run-conc">{concurrency}</span>
+      </button>
+      <button className="btn primary run-caret" disabled={disabled}
+              onClick={(e) => { e.stopPropagation(); setOpen((v) => !v); }}
+              aria-label="Run options"><ChevronDown size={13} /></button>
+
+      {open && (
+        <div className="run-menu" onClick={(e) => e.stopPropagation()}>
+          <button onClick={() => { setOpen(false); onRun('all'); }}>Run the whole sheet</button>
+          <button onClick={() => { setOpen(false); onRun('unrun'); }}>Run cells that haven’t run</button>
+          <button onClick={() => { setOpen(false); onRun('failed'); }}>Retry failed cells</button>
+
+          <div className="run-menu-sep" />
+          <div className="run-menu-lbl">At a time</div>
+          <div className="run-conc-row">
+            {CONCURRENCY_CHOICES.map((n) => (
+              <button key={n} className={'run-conc-btn' + (n === concurrency ? ' on' : '')}
+                      onClick={() => onConcurrency(n)}>{n}</button>
+            ))}
+          </div>
+          <p className="run-menu-note">
+            Higher is not always faster — the server runs as many as the machine allows and holds
+            the rest.
+          </p>
+          <p className="run-menu-note">
+            The run happens in this tab. If you close it, cells already started will finish;
+            nothing new starts.
+          </p>
+        </div>
+      )}
+
+      {lastRun && <span className="run-last">{lastRun}</span>}
+    </div>
+  );
+}
+
+/** "11 done, 1 failed · 2m 37s" — from the run record, or nothing when there is no run. */
+export function lastRunSummary(run) {
+  if (!run || run.status === 'running') return '';
+  const bits = [];
+  if (run.done) bits.push(`${run.done} done`);
+  if (run.failed) bits.push(`${run.failed} failed`);
+  if (run.skipped) bits.push(`${run.skipped} skipped`);
+  if (!bits.length) return '';
+  let when = '';
+  if (run.started_at && run.ended_at) {
+    const s = Math.max(0, run.ended_at - run.started_at);
+    when = s < 60 ? ` · ${s}s` : ` · ${Math.floor(s / 60)}m ${s % 60}s`;
+  }
+  const prefix = run.status === 'cancelled' ? 'Stopped: '
+    : run.status === 'abandoned' ? 'Interrupted: ' : 'Last run: ';
+  return prefix + bits.join(', ') + when;
+}
diff --git a/kits/sheets/app/src/components/Thumbs.jsx b/kits/sheets/app/src/components/Thumbs.jsx
deleted file mode 100644
index 4aecc44..0000000
--- a/kits/sheets/app/src/components/Thumbs.jsx
+++ /dev/null
@@ -1,84 +0,0 @@
-// Card / table thumbnails for workflows and templates, plus the self-heal
-// worker that regenerates a missing workflow thumbnail in place — the CG
-// Thumbs.jsx pattern with one twist: Sheets's renderer is a PURE
-// dsl -> SVG -> PNG function (lib/thumb.js), so healing needs no offscreen
-// canvas at all — fetch the DSL, rasterize, upload.
-import { useEffect, useRef, useState } from 'react';
-import { fetchThumbUrl, getSheet, putThumbnail } from '../lib/sh';
-import { sheetToPngBlob } from '../lib/thumb';
-
-/** Neutral placeholder: a small connected flow drawing — every edge ends at
- *  a card (cards paint over the line endpoints), nothing dangling. */
-export function ThumbPlaceholder() {
-  return (
-    <svg viewBox="0 0 320 180" className="thumb-ph" aria-hidden="true">
-      <path d="M160 50v30M160 80l-60 30M160 80l60 30" stroke="#D7DBE3" strokeWidth="2" fill="none" />
-      <rect x="120" y="28" width="80" height="24" rx="6" fill="#E3E7EE" />
-      <rect x="62" y="104" width="76" height="24" rx="6" fill="#E3E7EE" />
-      <rect x="182" y="104" width="76" height="24" rx="6" fill="#E3E7EE" />
-    </svg>
-  );
-}
-
-/** Blob-backed thumbnail image. `refreshKey` re-runs the fetch (bump it after
- *  a heal or a fresh capture); `onMiss` fires once per fetch that came back
- *  empty, so the owner can queue a heal. */
-export function Thumb({ path, alt, refreshKey = 0, onMiss }) {
-  const [url, setUrl] = useState(null);
-  const [missing, setMissing] = useState(false);
-  const onMissRef = useRef(onMiss);
-  onMissRef.current = onMiss;
-  useEffect(() => {
-    let dead = false;
-    let objectUrl = null;
-    setUrl(null); setMissing(false);
-    if (!path) { setMissing(true); return undefined; }
-    fetchThumbUrl(path).then((u) => {
-      if (dead) { if (u) URL.revokeObjectURL(u); return; }
-      objectUrl = u;
-      if (u) setUrl(u);
-      else { setMissing(true); onMissRef.current?.(); }
-    });
-    return () => { dead = true; if (objectUrl) URL.revokeObjectURL(objectUrl); };
-  }, [path, refreshKey]);
-  if (missing || !url) return <div className="thumb">{missing ? <ThumbPlaceholder /> : null}</div>;
-  return <div className="thumb"><img src={url} alt={alt || ''} loading="lazy" /></div>;
-}
-
-/** Static SVG art (template cards): a pre-rendered data URI, always present. */
-export function ArtThumb({ uri, alt }) {
-  if (!uri) return <div className="thumb"><ThumbPlaceholder /></div>;
-  return <div className="thumb"><img src={uri} alt={alt || ''} loading="lazy" /></div>;
-}
-
-/** Invisible worker: fetch the workflow DSL, render + upload its thumbnail.
- *  Calls onDone(ok) exactly once; run one at a time. Workflows whose flow is
- *  empty (or only the starter note) report ok=false — nothing honest to draw. */
-export function ThumbHealer({ sheetId, onDone }) {
-  const doneRef = useRef(false);
-  const onDoneRef = useRef(onDone);
-  onDoneRef.current = onDone;
-  useEffect(() => {
-    let dead = false;
-    const finish = (ok) => {
-      if (doneRef.current || dead) return;
-      doneRef.current = true;
-      onDoneRef.current?.(ok);
-    };
-    (async () => {
-      try {
-        const r = await getSheet(sheetId);
-        const drawable = ((r?.sheet?.tabs ? r.sheet.tabs[0] : r?.sheet)?.columns || []);
-        if (!drawable.length) { finish(false); return; }
-        const png = await sheetToPngBlob(r.sheet.tabs ? r.sheet.tabs[0] : r.sheet);
-        if (!png || png.size === 0) { finish(false); return; }
-        const res = await putThumbnail(sheetId, png);
-        finish(res.ok);
-      } catch {
-        finish(false);
-      }
-    })();
-    return () => { dead = true; };
-  }, [sheetId]);
-  return null;
-}
diff --git a/kits/sheets/app/src/components/Topbar.jsx b/kits/sheets/app/src/components/Topbar.jsx
index 466390e..06bccba 100644
--- a/kits/sheets/app/src/components/Topbar.jsx
+++ b/kits/sheets/app/src/components/Topbar.jsx
@@ -1,15 +1,17 @@
-// Product topbar: wordmark, credits badge (engine billing), avatar menu.
-// Adapted from ContextualGraph's — candidate for a further ui-core push-down
-// once a third product needs it (the LINKS/brand surface is all that differs).
+// Product topbar: wordmark, account menu.
+//
+// Same bar as the hosted product, minus the two things this build does not have. There is no
+// credits badge because there is no billing, and no Sign in button because the console already
+// signed you in — the account menu shows who that is and hands log-out back to the console.
 import { useEffect, useRef, useState } from 'react';
-import { BookOpen, Coins, CreditCard, LogOut, User } from 'lucide-react';
-import { getSession, fetchBalance, logout, isAuthed, SESSION_EVENT } from '../lib/auth';
+import { BookOpen, LogOut } from 'lucide-react';
+import { getSession, logout, SESSION_EVENT } from '../lib/auth';
 import { ShMark } from './ShMark';
 
 export const LINKS = {
-  profile: 'https://agentstudio.space/studio/profile',
-  docs: 'https://github.com/epsilla-enterprise/AgentStudio',
-  billing: 'https://agentstudio.space/studio/billing',
+  // The kit's own folder, not the repository root — someone asking this app for help wants the
+  // Slides README and its skill, not a list of every starter kit.
+  docs: 'https://github.com/HarnessRouter/starter-kit/tree/main/kits/sheets',
 };
 
 export function Wordmark({ size = 18 }) {
@@ -21,32 +23,6 @@ export function Wordmark({ size = 18 }) {
   );
 }
 
-export function CreditsBadge() {
-  const [balance, setBalance] = useState(null);
-  useEffect(() => {
-    let dead = false;
-    async function load() {
-      if (!isAuthed()) { setBalance(null); return; }
-      try {
-        const body = await fetchBalance();
-        if (!dead) setBalance(body.balance);
-      } catch {
-        if (!dead) setBalance(null);
-      }
-    }
-    load();
-    window.addEventListener(SESSION_EVENT, load);
-    return () => { dead = true; window.removeEventListener(SESSION_EVENT, load); };
-  }, []);
-  if (balance === null) return null;
-  return (
-    <span className="credits">
-      <Coins size={14} />
-      {Math.floor(balance).toLocaleString()} credits
-    </span>
-  );
-}
-
 export function AvatarMenu() {
   const [open, setOpen] = useState(false);
   const [session, setSession] = useState(getSession);
@@ -67,8 +43,9 @@ export function AvatarMenu() {
     return () => window.removeEventListener('mousedown', onDown);
   }, [open]);
 
-  if (!session?.token) return null;
-  const member = session.member || {};
+  // No session yet (or an ungated instance): show nothing rather than a placeholder identity.
+  const member = session?.member;
+  if (!member) return null;
   const displayName = member.display_name || member.name || member.email || 'Account';
   const initial = String(displayName).trim().charAt(0).toUpperCase() || 'U';
 
@@ -79,39 +56,16 @@ export function AvatarMenu() {
         <div className="avmenu">
           <div className="who">
             <div className="nm">{displayName}</div>
-            {member.email && <div className="em">{member.email}</div>}
           </div>
-          <a href={LINKS.profile} target="_blank" rel="noreferrer"><User size={15} />Profile</a>
           <a href={LINKS.docs} target="_blank" rel="noreferrer"><BookOpen size={15} />Documentation</a>
-          <a href={LINKS.billing} target="_blank" rel="noreferrer"><CreditCard size={15} />Billing</a>
-          <button className="item out" onClick={logout}><LogOut size={15} />Log out</button>
+          {session.gated && <button className="item out" onClick={logout}><LogOut size={15} />Log out</button>}
         </div>
       )}
     </div>
   );
 }
 
-/** Top-right sign-in affordance for signed-out visitors. */
-export function SignInButton({ onSignIn }) {
-  const [hasSession, setHasSession] = useState(() => !!getSession()?.token);
-  useEffect(() => {
-    const sync = () => setHasSession(!!getSession()?.token);
-    window.addEventListener(SESSION_EVENT, sync);
-    return () => window.removeEventListener(SESSION_EVENT, sync);
-  }, []);
-  if (hasSession) return null;
-  return (
-    <button
-      type="button"
-      className="btn primary signin-btn"
-      onClick={() => { if (onSignIn) onSignIn(); else { window.location.hash = '#/login'; } }}
-    >
-      Sign in
-    </button>
-  );
-}
-
-export function Topbar({ crumb, onSignIn }) {
+export function Topbar({ crumb }) {
   return (
     <header className="topbar">
       <a className="wordmark" href="#/"><Wordmark size={16} /></a>
@@ -122,9 +76,7 @@ export function Topbar({ crumb, onSignIn }) {
         </>
       )}
       <div className="topbar-spacer" />
-      <CreditsBadge />
       <AvatarMenu />
-      <SignInButton onSignIn={onSignIn} />
     </header>
   );
 }
diff --git a/kits/sheets/app/src/lib/auth.js b/kits/sheets/app/src/lib/auth.js
index c8145fd..6a15282 100644
--- a/kits/sheets/app/src/lib/auth.js
+++ b/kits/sheets/app/src/lib/auth.js
@@ -1,14 +1,14 @@
 // Identity, borrowed rather than built.
 //
 // The hosted product ships its own sign-in, JWT and sliding-refresh. This app has none of that on
-// purpose: it is served by the HarnessRouter console at /kits/slides, so the console's middleware
+// purpose: it is served by the HarnessRouter console at /kits/sheets, so the console's middleware
 // has already authenticated whoever is looking at it, and the browser carries that session on
 // every same-origin request. There is nothing left for the app to do — no token to hold, no login
 // screen to render, no refresh to schedule.
 //
 // The module still exists because the pages import from it. Each export is the honest local answer
 // to the question the hosted version answers with a token.
-export const SESSION_EVENT = 'slides:session';
+export const SESSION_EVENT = 'sheets:session';
 
 /** Same-origin: the console session rides along, and its proxy attaches the internal key. */
 export function authFetch(url, init = {}) {
diff --git a/kits/sheets/app/src/lib/cell.js b/kits/sheets/app/src/lib/cell.js
new file mode 100644
index 0000000..3229510
--- /dev/null
+++ b/kits/sheets/app/src/lib/cell.js
@@ -0,0 +1,203 @@
+// Running ONE agent cell: build the input, start the turn, wait for it, read the answer.
+//
+// This is the only file in the kit that knows a cell is a turn. The Runner above it knows the
+// rules; the grid below it knows the pixels. Keeping the seam here is what let the rules be
+// tested without a server.
+//
+// Transport: `background: true` plus a poll, NOT a stream. The session id arrives on the
+// immediate reply, so nothing is learned by streaming; and a tab that was closed and reopened has
+// no stream and needs the polling path anyway — streaming per cell would be a second mechanism
+// for the same job. Live text, where it matters, comes from the turn replay in the cell drawer.
+import { cancelResponse, containerFileUrl, createResponse, getResponse, patchSession } from 'reifyui/harness';
+import { VALUE_MAX, interpolate } from './model.js';
+
+const POLL_MS = 2000;
+/** Refuse an attachment larger than the API accepts rather than truncating a file silently. */
+const FILE_MAX = 25 * 1024 * 1024;
+
+const now = () => Math.floor(Date.now() / 1000);
+
+const MIME = {
+  md: 'text/markdown', txt: 'text/plain', json: 'application/json', csv: 'text/csv',
+  tsv: 'text/tab-separated-values', html: 'text/html', py: 'text/x-python', js: 'text/javascript',
+  png: 'image/png', jpg: 'image/jpeg', jpeg: 'image/jpeg', gif: 'image/gif', svg: 'image/svg+xml',
+  pdf: 'application/pdf',
+};
+const mimeOf = (name) => MIME[String(name).split('.').pop().toLowerCase()] || 'application/octet-stream';
+
+async function fileAsDataUrl(artifact) {
+  const res = await fetch(containerFileUrl(artifact.container_id, artifact.file_id), { cache: 'no-store' });
+  if (!res.ok) throw new Error(`Could not read ${artifact.filename}.`);
+  const buf = await res.arrayBuffer();
+  if (buf.byteLength > FILE_MAX) {
+    throw new Error(`${artifact.filename} is too large to attach (${Math.round(buf.byteLength / 1048576)} MB).`);
+  }
+  let bin = '';
+  const bytes = new Uint8Array(buf);
+  for (let i = 0; i < bytes.length; i += 0x8000) {
+    bin += String.fromCharCode.apply(null, bytes.subarray(i, i + 0x8000));
+  }
+  return `data:${mimeOf(artifact.filename)};base64,${btoa(bin)}`;
+}
+
+/** A directory per source column, so an agent reading three attachments can tell them apart. */
+const slug = (s) => String(s || 'in').toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '') || 'in';
+
+/** The assistant text of a finished response: message items, in order. */
+function textOf(response) {
+  const parts = [];
+  for (const item of response?.output || []) {
+    if (item?.type !== 'message') continue;
+    for (const c of item.content || []) if (c?.type === 'output_text' && c.text) parts.push(c.text);
+  }
+  return parts.join('\n').trim();
+}
+
+/** The files this turn produced, from the terminal response's citations. */
+function artifactsOf(response) {
+  const out = [];
+  const seen = new Set();
+  for (const item of response?.output || []) {
+    for (const c of item?.content || []) {
+      for (const a of c?.annotations || []) {
+        if (a?.type !== 'container_file_citation' || !a.file_id) continue;
+        if (seen.has(a.file_id)) continue;
+        seen.add(a.file_id);
+        // container_id is taken from the annotation rather than assumed equal to the session id:
+        // it happens to be in this deployment, and depending on that would be a silent coupling.
+        out.push({ filename: a.filename || 'file', container_id: a.container_id, file_id: a.file_id });
+      }
+    }
+  }
+  return out;
+}
+
+/**
+ * Make the dispatcher the Runner injects.
+ *
+ * `sheetId` and `runId` are only here to build the idempotency key, which is the difference
+ * between a retried request replaying its first answer and a second turn starting on a session
+ * that is already running one. Two turns on one session destroy that session's workspace.
+ */
+export function makeCellDispatcher({ sheetId, runId, sheetTitle, columns, onCell }) {
+  return async function dispatchCell(task, { signal }) {
+    const { column, rowId, colId, rowIndex, values, upstream } = task;
+    const cfg = column.harness || {};
+    const started_at = now();
+    const key = `${rowId}:${colId}`;
+
+    const { text, missing } = interpolate(cfg.prompt, columns, values);
+    if (missing.length) {
+      // Precise, per row, and it punishes no other row: the hosted product substituted empty
+      // here, which sends the model a prompt with a hole in it and gets a confident answer about
+      // nothing back.
+      return {
+        status: 'skipped', run_id: runId, started_at, ended_at: now(), value: null, artifacts: [],
+        error: `${missing.join(' and ')} ${missing.length > 1 ? 'are' : 'is'} empty in this row.`,
+      };
+    }
+
+    const content = [];
+    for (const u of upstream || []) {
+      for (const a of u.cell?.artifacts || []) {
+        // eslint-disable-next-line no-await-in-loop
+        const file_data = await fileAsDataUrl(a);
+        content.push({ type: 'input_file', filename: `in/${slug(u.column.name)}/${a.filename}`, file_data });
+      }
+    }
+    content.push({ type: 'input_text', text });
+
+    const body = {
+      input: [{ role: 'user', content }],
+      background: true,
+      metadata: { harness_id: cfg.harness_id },
+      // Framing goes in `instructions`, never in `input`: the gateway captures the user text
+      // before prepending this, so the transcript and the console task list show the person's own
+      // prompt rather than our scaffolding.
+      instructions: [
+        `You are filling one cell of a spreadsheet: column "${column.name}", row ${rowIndex + 1} of ${task.rowsTotal}.`,
+        'Answer for this row only.',
+        'Keep the answer short enough to read in a table cell. If the work produces something long,',
+        'write it to a file in your working directory and summarise it in one or two sentences.',
+      ].join(' '),
+      ...(cfg.timeout_seconds ? { timeout_seconds: cfg.timeout_seconds } : {}),
+    };
+
+    let created;
+    try {
+      created = await createResponse(body, { idempotencyKey: `${sheetId}:${runId}:${rowId}:${colId}` });
+    } catch (e) {
+      return { status: 'failed', run_id: runId, started_at, ended_at: now(), value: null,
+               artifacts: [], error: e?.message || 'The turn could not be started.' };
+    }
+
+    const responseId = created?.id || '';
+    const sessionId = created?.metadata?.session_id || '';
+    // Published before anything else is dispatched: these two ids are what makes a reopened tab
+    // able to find out what happened, rather than showing a cell stuck at "running" forever.
+    const partial = { status: 'running', run_id: runId, response_id: responseId,
+                      session_id: sessionId, started_at, value: null, artifacts: [], error: null };
+    onCell?.(key, partial);
+
+    // A cell session titled for its cell makes the console's task list navigable instead of forty
+    // rows named after a truncated prompt. One call, and it sets the title as chosen so the
+    // per-turn write stops regenerating it.
+    if (sessionId) {
+      patchSession(sessionId, { title: `${sheetTitle || 'Sheet'} · ${column.name} · row ${rowIndex + 1}` })
+        .catch(() => { /* cosmetic; never fail a cell over its own title */ });
+    }
+
+    const stop = () => { if (responseId) cancelResponse(responseId).catch(() => {}); };
+    signal.addEventListener('abort', stop, { once: true });
+
+    try {
+      for (;;) {
+        if (signal.aborted) {
+          return { ...partial, status: 'failed', ended_at: now(), error: 'Stopped.' };
+        }
+        // eslint-disable-next-line no-await-in-loop
+        await new Promise((r) => setTimeout(r, POLL_MS));
+        let res;
+        try {
+          // eslint-disable-next-line no-await-in-loop
+          res = await getResponse(responseId);
+        } catch {
+          continue;   // a transient read failure is not a failed turn; the next poll decides
+        }
+        const st = res?.status;
+        if (st === 'queued' || st === 'in_progress' || st === 'running' || !st) continue;
+
+        const value = textOf(res);
+        const artifacts = artifactsOf(res);
+        const base = { ...partial, ended_at: now(), session_id: res?.metadata?.session_id || sessionId };
+
+        if (st === 'completed') {
+          // "completed" means the agent exited cleanly, which is not the same as answering. A
+          // turn that produced neither text nor a file did not fill this cell, and saying it did
+          // would be the worst kind of wrong.
+          if (!value && !artifacts.length) {
+            return { ...base, status: 'failed', error: 'The agent finished without answering.' };
+          }
+          return {
+            ...base,
+            status: 'done',
+            value: value.length > VALUE_MAX ? value.slice(0, VALUE_MAX) : value,
+            value_truncated: value.length > VALUE_MAX,
+            artifacts,
+            error: null,
+          };
+        }
+        if (st === 'cancelled') return { ...base, status: 'failed', error: 'Stopped.' };
+        return {
+          ...base,
+          status: 'failed',
+          artifacts,
+          error: res?.error?.message
+            || (st === 'incomplete' ? 'The turn ended without an answer.' : `The turn ${st}.`),
+        };
+      }
+    } finally {
+      signal.removeEventListener('abort', stop);
+    }
+  };
+}
diff --git a/kits/sheets/app/src/lib/collab.js b/kits/sheets/app/src/lib/collab.js
deleted file mode 100644
index ef1df7e..0000000
--- a/kits/sheets/app/src/lib/collab.js
+++ /dev/null
@@ -1,34 +0,0 @@
-// Presence, honestly absent.
-//
-// The hosted product holds a websocket to a collaboration service: other people's cursors and
-// live drags stream in as `peers`, and remote deck revisions arrive as `onRemoteDeck`. This build
-// has no such service — a kit is one Harness on one instance, and a deck is one session's file.
-//
-// So this is a real single-player implementation rather than a stub that pretends: `peers` is
-// empty, `live` is false, and broadcasting a selection or a drag goes nowhere because there is
-// nobody to tell. EditorCanvas takes `peers=[]` and simply draws no peer decorations, which is
-// exactly right. Point this at a presence service and the pages need no changes.
-//
-// The one collaborator this app DOES have is the agent, and that is not handled here: it is the
-// turn lock in DeckPage (the canvas goes read-only while a turn runs, and the server refuses
-// writes with 409), which is a stronger guarantee than presence could give.
-import { useMemo } from 'react';
-
-const NO_PEERS = [];
-
-export function colorFor(key) {
-  // Stable per-identity hue, so if a presence backend is added later the colors do not churn.
-  const s = String(key || '');
-  let h = 0;
-  for (let i = 0; i < s.length; i += 1) h = (h * 31 + s.charCodeAt(i)) % 360;
-  return `hsl(${h} 70% 52%)`;
-}
-
-export function useDeckCollab() {
-  return useMemo(() => ({
-    peers: NO_PEERS,
-    live: false,
-    setSelection: () => {},
-    setDrag: () => {},
-  }), []);
-}
diff --git a/kits/sheets/app/src/lib/copilot.js b/kits/sheets/app/src/lib/copilot.js
index 6e5a586..8c0cb8a 100644
--- a/kits/sheets/app/src/lib/copilot.js
+++ b/kits/sheets/app/src/lib/copilot.js
@@ -1,41 +1,45 @@
-// Copilot streaming client — Sheets's transport over the shared UI Core
-// Responses parser. One POST returns an SSE stream of native Responses
-// events; the broker relays the gateway stream verbatim from
-// POST /v1/sh/sheets/{id}/chat/stream.
-import { createResponsesDispatcher, readSSEStream } from 'reifyui';
-import { authFetch } from './auth';
-import { SH_API } from './sh';
+// The copilot's turn — the one place this app streams.
+//
+// Cells poll (see lib/cell.js) because a reopened tab has no stream and needs the polling path
+// anyway. The copilot is the opposite case: one turn, one open panel, and watching the agent
+// think is the point. Both are POST /responses; this is the API's two modes used where each is
+// right, not an inconsistency.
+import { streamTurn as harnessStreamTurn } from 'reifyui/harness';
+import { isPending, pendingTemplate } from './sh';
+import { getTemplate } from './templates';
+import { materialize } from './model';
 
 /**
- * Run one streaming turn. handlers: onToolCall(name, args, callId),
- * onToolResult(callId, output), onTextDelta(text), onReasoningDelta(text),
- * onDone(status), onError(message).
- * Returns { unsupported: true } when the endpoint is missing,
- * { connecting: true } on 503, { ok: true } after the stream ends.
+ * Run one copilot turn.
+ *
+ * `sheetId` may be a pending id ("new:<template>"), in which case no session exists yet and the
+ * turn creates one; handlers.onSession reports it the moment a frame carries it.
+ *
+ * The template the person picked only exists in the browser, so the FIRST turn is where it
+ * becomes real. It travels in `instructions`, not in the message: the gateway records the raw
+ * user text for the transcript, so the chat keeps showing the sentence they typed instead of a
+ * wall of starting JSON. Scaffolding should be invisible.
  */
-export async function streamTurn(sheetId, message, h) {
-  const res = await authFetch(
-    `${SH_API}/v1/sh/sheets/${encodeURIComponent(sheetId)}/chat/stream`,
-    {
-      method: 'POST',
-      headers: { 'content-type': 'application/json' },
-      body: JSON.stringify({ message }),
-    },
-  );
-  if (res.status === 404) return { unsupported: true };
-  if (res.status === 503) return { connecting: true };
-  if (!res.ok || !res.body) {
-    const t = await res.text().catch(() => '');
-    throw new Error(`chat stream failed: ${res.status} ${t.slice(0, 160)}`);
+export async function runCopilotTurn(sheetId, message, handlers) {
+  const pending = isPending(sheetId);
+  let instructions = '';
+  if (pending) {
+    const tpl = await getTemplate(pendingTemplate(sheetId)).catch(() => null);
+    if (tpl) {
+      instructions = [
+        `Start this sheet from the "${tpl.name}" template.`,
+        tpl.brief || '',
+        '',
+        'Write exactly this into ./sheet.json first, then adapt it to what the person asked for:',
+        JSON.stringify(materialize(tpl.sheet, tpl.name), null, 2),
+      ].filter(Boolean).join('\n');
+    }
   }
 
-  let sawError = false;
-  const d = createResponsesDispatcher({
-    ...h,
-    onError: (msg) => { sawError = true; h.onError?.(msg); },
+  return harnessStreamTurn({
+    sessionId: pending ? '' : sheetId,
+    input: message,
+    instructions,
+    handlers,
   });
-  await readSSEStream(res.body, (data) => {
-    try { d.dispatch(JSON.parse(data)); } catch { /* malformed frame */ }
-  });
-  return { ok: !sawError };
 }
diff --git a/kits/sheets/app/src/lib/exportSheet.js b/kits/sheets/app/src/lib/exportSheet.js
new file mode 100644
index 0000000..2deb9cd
--- /dev/null
+++ b/kits/sheets/app/src/lib/exportSheet.js
@@ -0,0 +1,59 @@
+// Getting a sheet out of the app.
+//
+// Everything here happens in the browser: there is no export service in this deployment, and the
+// grid already holds the whole document. CSV and TSV are pure; XLSX lazy-loads its writer so a
+// person who never exports one never downloads it.
+import { sheetToAoA, sheetToDelimited } from 'reifyui';
+import { cellText } from './model';
+
+function download(name, blob) {
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = name;
+  document.body.appendChild(a);
+  a.click();
+  a.remove();
+  setTimeout(() => URL.revokeObjectURL(url), 1000);
+}
+
+const safeName = (title) => (String(title || 'sheet').replace(/[^\w\- ]+/g, '').trim() || 'sheet');
+
+export async function exportSheet(kind, sheet) {
+  const title = sheet?.meta?.title;
+  if (kind === 'csv' || kind === 'tsv') {
+    // cellText is passed so an agent cell exports as its answer rather than as the run record
+    // that surrounds it — a spreadsheet export must never be raw JSON.
+    const text = sheetToDelimited(sheet, kind === 'csv' ? ',' : '\t', { cellText });
+    download(`${safeName(title)}.${kind}`, new Blob([text], { type: 'text/plain;charset=utf-8' }));
+    return;
+  }
+  if (kind === 'json') {
+    // The run result, as asked for: rows, columns, every cell's configuration and the session
+    // reference of every agent cell that ran. It is the document itself rather than a second
+    // artifact assembled beside it — a second copy is what goes stale.
+    download(`${safeName(title)}.json`,
+             new Blob([JSON.stringify(sheet, null, 2)], { type: 'application/json' }));
+    return;
+  }
+  if (kind === 'xlsx') {
+    const XLSX = await import('xlsx');
+    const wb = XLSX.utils.book_new();
+    const ws = XLSX.utils.aoa_to_sheet(sheetToAoA(sheet, { cellText: xlsxCell }));
+    ws['!cols'] = (sheet.columns || []).map((c) => ({ wpx: Math.min(400, c.width || 160) }));
+    XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
+    const out = XLSX.write(wb, { bookType: 'xlsx', type: 'array' });
+    download(`${safeName(title)}.xlsx`,
+             new Blob([out], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' }));
+    return;
+  }
+  throw new Error(`Unknown export format: ${kind}`);
+}
+
+/** Numbers and booleans stay themselves so the person can sum the column they exported. */
+function xlsxCell(cell, col) {
+  const v = cell?.value;
+  if (col?.type === 'number' && typeof v === 'number') return v;
+  if (col?.type === 'checkbox') return Boolean(v);
+  return cellText(cell, col);
+}
diff --git a/kits/sheets/app/src/lib/model.js b/kits/sheets/app/src/lib/model.js
new file mode 100644
index 0000000..fbafc0f
--- /dev/null
+++ b/kits/sheets/app/src/lib/model.js
@@ -0,0 +1,322 @@
+// The sheet document, as data — no React, no network, no DOM.
+//
+// One file describes a sheet: ./sheet.json in the sheet session's workspace. Both the app and the
+// agent write it, so its rules have to be stated somewhere both can be checked against. They are
+// stated here, and mirrored in skills/sheet-design/validate_sheet.py for the agent. If the two
+// ever disagree, this file is right and the validator is the bug.
+//
+//   { meta:    { schema: 1, title }
+//     columns: [ {id, name, type, width?, options?, harness?} ]   ORDER IS DEPENDENCY ORDER
+//     rows:    [ {id, height?} ]
+//     cells:   { "<rowId>:<colId>": {...} }                       sparse
+//     run:     {...} }                                            the last run, and only the last
+//
+// The one structural rule everything else rests on: an agent column may only read columns
+// EARLIER in `columns`. That makes the array a topological order by construction, which is why
+// there is no sort anywhere in this kit and no cycle to handle.
+
+export const SCHEMA = 1;
+
+export const COLUMN_TYPES = ['text', 'number', 'select', 'tags', 'checkbox', 'date', 'url', 'harness'];
+
+export const TYPE_LABEL = {
+  text: 'Text', number: 'Number', select: 'Select', tags: 'Tags',
+  checkbox: 'Checkbox', date: 'Date', url: 'Link', harness: 'Agent',
+};
+
+/** The five states an agent cell can be in. An unrun cell is an ABSENT key, not a sixth state:
+ *  one representation per fact. */
+export const CELL_STATUS = ['queued', 'running', 'done', 'failed', 'skipped'];
+
+/** The agent's answer is capped in the document. The grid deep-clones the whole sheet on every
+ *  edit and the workspace write has a hard byte cap, so forty rows of unbounded model output
+ *  would eventually refuse to save. Nothing is lost: the untruncated text is one request away and
+ *  the cell drawer shows it. */
+export const VALUE_MAX = 4000;
+
+export const uid = (p) => `${p}_${Math.random().toString(36).slice(2, 10)}`;
+export const cellKey = (rowId, colId) => `${rowId}:${colId}`;
+
+export const isHarnessColumn = (col) => col?.type === 'harness';
+
+export function columnByName(columns, name) {
+  const want = String(name || '').trim().toLowerCase();
+  return (columns || []).find((c) => String(c.name || '').trim().toLowerCase() === want) || null;
+}
+
+/** The {{Name}} references in a prompt, in order, de-duplicated.
+ *
+ *  The pattern matches the hosted product's exactly, so a prompt written there means the same
+ *  thing here. */
+export function refs(prompt) {
+  const out = [];
+  for (const m of String(prompt || '').matchAll(/\{\{\s*([^}]+?)\s*\}\}/g)) {
+    if (!out.includes(m[1])) out.push(m[1]);
+  }
+  return out;
+}
+
+/** Which columns an agent column reads: the union of its prompt references and its attachments.
+ *
+ *  Derived, never stored. The hosted product stored a `deps` array, validated it, rendered a
+ *  checkbox list for it — and ignored it at execution. Two declarations of one fact, and the one
+ *  the person could see was the one that did nothing. The config that feeds the turn is the only
+ *  source of truth about what the turn reads. */
+export function derivedDeps(col, columns) {
+  if (!isHarnessColumn(col)) return [];
+  const h = col.harness || {};
+  const ids = [];
+  for (const name of refs(h.prompt)) {
+    const hit = columnByName(columns, name);
+    if (hit && !ids.includes(hit.id)) ids.push(hit.id);
+  }
+  for (const id of h.attach || []) if (!ids.includes(id)) ids.push(id);
+  return ids;
+}
+
+/** What one cell is worth as text — for interpolation, for export, and for a downstream prompt. */
+export function cellText(cell, col) {
+  const v = cell?.value;
+  if (v === undefined || v === null) return '';
+  switch (col?.type) {
+    case 'tags':
+      return Array.isArray(v) ? v.join(', ') : String(v);
+    case 'checkbox':
+      return v ? 'yes' : 'no';
+    default:
+      if (Array.isArray(v)) return v.join(', ');
+      if (typeof v === 'object') return JSON.stringify(v);
+      return String(v);
+  }
+}
+
+/** Substitute {{Name}} for this row's values.
+ *
+ *  `values` maps column id -> text. A reference whose column has no value in this row is NOT
+ *  silently blanked: it is reported, so the caller can skip that one cell with a reason instead
+ *  of sending the model a prompt with a hole in it. The hosted product substituted empty, which
+ *  fabricates input and produces a confident answer about nothing. */
+export function interpolate(prompt, columns, values) {
+  const missing = [];
+  const text = String(prompt || '').replace(/\{\{\s*([^}]+?)\s*\}\}/g, (whole, name) => {
+    const col = columnByName(columns, name);
+    if (!col) return whole;                       // a config error; the planner refuses first
+    const v = values[col.id];
+    if (v === undefined || v === null || v === '') { missing.push(col.name); return ''; }
+    return v;
+  });
+  return { text, missing };
+}
+
+export function blankSheet(title = 'Untitled sheet') {
+  const cols = [
+    { id: uid('col'), name: 'Item', type: 'text', width: 220 },
+    { id: uid('col'), name: 'Notes', type: 'text', width: 320 },
+  ];
+  return {
+    meta: { schema: SCHEMA, title },
+    columns: cols,
+    rows: [{ id: uid('row') }, { id: uid('row') }, { id: uid('row') }],
+    cells: {},
+  };
+}
+
+/** A fresh copy of a template, with new ids.
+ *
+ *  Templates ship with placeholder ids; materialising them per sheet keeps two sheets made from
+ *  one template from sharing a cell key. */
+export function materialize(template, title) {
+  const colId = {};
+  const rowId = {};
+  const columns = (template.columns || []).map((c) => {
+    const id = uid('col');
+    colId[c.id] = id;
+    return { ...c, id };
+  });
+  // attach[] holds column ids, so it has to be remapped with everything else.
+  for (const c of columns) {
+    if (c.harness?.attach) c.harness = { ...c.harness, attach: c.harness.attach.map((a) => colId[a]).filter(Boolean) };
+  }
+  const rows = (template.rows || []).map((r) => {
+    const id = uid('row');
+    rowId[r.id] = id;
+    return { ...r, id };
+  });
+  const cells = {};
+  for (const [k, v] of Object.entries(template.cells || {})) {
+    const [r, c] = k.split(':');
+    if (rowId[r] && colId[c]) cells[cellKey(rowId[r], colId[c])] = v;
+  }
+  return {
+    meta: { schema: SCHEMA, title: title || template.meta?.title || template.name || 'Untitled sheet' },
+    columns, rows, cells,
+  };
+}
+
+const CHRN = /^chrn_[0-9a-f]{32}$/;
+const APP_OWNED = ['status', 'run_id', 'response_id', 'session_id', 'artifacts', 'started_at', 'ended_at'];
+
+/** Every way a sheet can be wrong, with the fix for each.
+ *
+ *  Errors are things that make the sheet render or run incorrectly; warnings are things that are
+ *  merely suspect. Returns {errors, warnings} of {where, what, fix}. */
+export function validate(sheet) {
+  const errors = [];
+  const warnings = [];
+  const err = (where, what, fix) => errors.push({ where, what, fix });
+  const warn = (where, what, fix) => warnings.push({ where, what, fix });
+
+  if (!sheet || typeof sheet !== 'object') {
+    err('sheet.json', 'the file is not a JSON object', 'Write an object with meta, columns, rows and cells.');
+    return { errors, warnings };
+  }
+  if (sheet.meta?.schema !== SCHEMA) {
+    err('meta.schema', `is ${JSON.stringify(sheet.meta?.schema)}, not ${SCHEMA}`,
+        `Set "schema": ${SCHEMA}. The app refuses anything else rather than guessing.`);
+  }
+
+  const columns = Array.isArray(sheet.columns) ? sheet.columns : [];
+  const rows = Array.isArray(sheet.rows) ? sheet.rows : [];
+  if (!Array.isArray(sheet.columns)) err('columns', 'is missing or not an array', 'Write "columns": [].');
+  if (!Array.isArray(sheet.rows)) err('rows', 'is missing or not an array', 'Write "rows": [].');
+
+  const seenCol = new Set();
+  const seenName = new Set();
+  columns.forEach((c, i) => {
+    const at = `columns[${i}]`;
+    if (!c?.id) err(at, 'has no id', 'Give it a stable id like "col_a1b2c3d4".');
+    else if (seenCol.has(c.id)) err(at, `repeats the id "${c.id}"`, 'Ids must be unique.');
+    else seenCol.add(c.id);
+
+    const name = String(c?.name || '').trim();
+    if (!name) err(at, 'has no name', 'Every column needs a short, human name.');
+    else if (seenName.has(name.toLowerCase())) {
+      err(at, `repeats the name "${name}"`,
+          'Column names must be unique: agent prompts address columns as {{Name}}, and a duplicate makes that ambiguous.');
+    } else seenName.add(name.toLowerCase());
+
+    if (!COLUMN_TYPES.includes(c?.type)) {
+      err(at, `has type ${JSON.stringify(c?.type)}`, `Use one of: ${COLUMN_TYPES.join(' ')}.`);
+    }
+    if (isHarnessColumn(c) && !c.harness) {
+      err(at, 'is an agent column with no "harness" object',
+          'Add "harness": { "harness_id": "", "prompt": "…", "attach": [] }.');
+    }
+    if (!isHarnessColumn(c) && c?.harness) {
+      err(at, 'carries a "harness" object but is not an agent column',
+          'Either set "type": "harness" or delete the harness object.');
+    }
+    if (isHarnessColumn(c) && c.harness) {
+      const hid = c.harness.harness_id;
+      if (hid !== '' && hid !== undefined && !CHRN.test(String(hid))) {
+        err(`${at}.harness.harness_id`, `is ${JSON.stringify(hid)}`,
+            'Leave it "" unless you were given a real agent id — you cannot see the list of agents.');
+      }
+      const prompt = String(c.harness.prompt || '');
+      if (!prompt.trim()) {
+        err(`${at}.harness.prompt`, 'is empty', 'An agent column needs a prompt; it is what runs on every row.');
+      } else if (!refs(prompt).length) {
+        warn(`${at}.harness.prompt`, 'references no columns',
+             'Without a {{Column}} reference every row gets the same input, so every row gets the same answer.');
+      }
+      for (const name of refs(prompt)) {
+        const hit = columnByName(columns, name);
+        if (!hit) {
+          err(`${at}.harness.prompt`, `references {{${name}}}, which is not a column`,
+              `Use one of: ${columns.map((x) => x.name).filter(Boolean).join(', ') || '(none)'}.`);
+        } else if (columns.indexOf(hit) >= i) {
+          err(`${at}.harness.prompt`, `references {{${name}}}, which is not to its left`,
+              `Move "${hit.name}" before "${c.name}". A column can only read columns earlier in the sheet.`);
+        }
+      }
+      for (const a of c.harness.attach || []) {
+        const hit = columns.find((x) => x.id === a);
+        if (!hit) err(`${at}.harness.attach`, `names "${a}", which is not a column`, 'Attach only real column ids.');
+        else if (columns.indexOf(hit) >= i) {
+          err(`${at}.harness.attach`, `attaches "${hit.name}", which is not to its left`,
+              'A column can only attach files from columns earlier in the sheet.');
+        } else if (!isHarnessColumn(hit)) {
+          err(`${at}.harness.attach`, `attaches "${hit.name}", which is not an agent column`,
+              'Only agent columns produce files. Reference a plain column as {{Name}} instead.');
+        }
+      }
+    }
+    if ((c?.type === 'select' || c?.type === 'tags') && c.options && !Array.isArray(c.options)) {
+      err(`${at}.options`, 'is not an array', 'Write "options": ["Todo", "Doing", "Done"].');
+    }
+  });
+
+  const seenRow = new Set();
+  rows.forEach((r, i) => {
+    if (!r?.id) err(`rows[${i}]`, 'has no id', 'Give it a stable id like "row_a1b2c3d4".');
+    else if (seenRow.has(r.id)) err(`rows[${i}]`, `repeats the id "${r.id}"`, 'Ids must be unique.');
+    else seenRow.add(r.id);
+  });
+
+  const cells = (sheet.cells && typeof sheet.cells === 'object') ? sheet.cells : {};
+  if (sheet.cells && typeof sheet.cells !== 'object') {
+    err('cells', 'is not an object', 'Write "cells": { "<rowId>:<colId>": { "value": … } }.');
+  }
+  for (const [k, cell] of Object.entries(cells)) {
+    const [rowRef, colRef, extra] = k.split(':');
+    if (extra !== undefined || !rowRef || !colRef) {
+      err(`cells["${k}"]`, 'is not a "<rowId>:<colId>" key', 'Join the row id and the column id with one colon.');
+      continue;
+    }
+    if (!seenRow.has(rowRef)) err(`cells["${k}"]`, `names row "${rowRef}", which does not exist`, 'Use an id from rows[].');
+    const col = columns.find((c) => c.id === colRef);
+    if (!col) {
+      err(`cells["${k}"]`, `names column "${colRef}", which does not exist`,
+          'Use an id from columns[] — a column NAME here renders nothing.');
+      continue;
+    }
+    if (!cell || typeof cell !== 'object' || Array.isArray(cell)) {
+      err(`cells["${k}"]`, 'is not an object', 'Write { "value": … } — never a bare value at the key.');
+      continue;
+    }
+    if (!isHarnessColumn(col)) {
+      const owned = APP_OWNED.filter((f) => f in cell);
+      if (owned.length) {
+        err(`cells["${k}"]`, `carries ${owned.join(', ')} in a plain column`,
+            'Only agent cells carry run state, and only the app writes it.');
+      }
+    } else {
+      if (cell.status !== undefined && !CELL_STATUS.includes(cell.status)) {
+        err(`cells["${k}"].status`, `is ${JSON.stringify(cell.status)}`, `Use one of: ${CELL_STATUS.join(' ')}.`);
+      }
+      if (Boolean(cell.run_id) !== Boolean(cell.session_id) && (cell.run_id || cell.session_id)) {
+        err(`cells["${k}"]`, 'has one of run_id / session_id but not the other',
+            'Both come from a real run. Delete them, or leave the cell out entirely.');
+      }
+    }
+    if (col.type === 'checkbox' && cell.value !== undefined && typeof cell.value !== 'boolean') {
+      warn(`cells["${k}"]`, 'is a checkbox holding a non-boolean', 'Write true or false.');
+    }
+    if (col.type === 'number' && cell.value !== undefined && cell.value !== null
+        && typeof cell.value !== 'number') {
+      warn(`cells["${k}"]`, 'is a number column holding a non-number', 'Write the value as a number, not a string.');
+    }
+    if ((col.type === 'select' || col.type === 'tags') && Array.isArray(col.options) && col.options.length) {
+      const vals = col.type === 'tags'
+        ? (Array.isArray(cell.value) ? cell.value : [])
+        : (cell.value == null || cell.value === '' ? [] : [cell.value]);
+      for (const v of vals) {
+        if (!col.options.some((o) => (typeof o === 'string' ? o : o?.label) === v)) {
+          warn(`cells["${k}"]`, `holds "${v}", which is not one of the column's options`,
+               'Add it to options, or use one of the existing ones.');
+        }
+      }
+    }
+  }
+
+  if (sheet.run) {
+    for (const id of sheet.run.columns || []) {
+      if (!columns.some((c) => c.id === id)) {
+        warn('run.columns', `names column "${id}", which no longer exists`,
+             'Leave it — the run header simply counts one column fewer.');
+      }
+    }
+  }
+
+  return { errors, warnings };
+}
diff --git a/kits/sheets/app/src/lib/model.test.mjs b/kits/sheets/app/src/lib/model.test.mjs
new file mode 100644
index 0000000..790393c
--- /dev/null
+++ b/kits/sheets/app/src/lib/model.test.mjs
@@ -0,0 +1,203 @@
+// The document rules, pinned. `node --test src/lib/`
+//
+// These are the rules an agent gets wrong, so they are the ones worth a test: a reference to a
+// column that is not to the left, two columns with the same name, run state written into a cell
+// nobody ran, a cells key holding a column NAME instead of an id.
+import assert from 'node:assert/strict';
+import { test } from 'node:test';
+import {
+  cellKey, cellText, columnByName, derivedDeps, interpolate, materialize, refs, validate,
+} from './model.js';
+
+function sheet(columns, rows = [{ id: 'row_1' }], cells = {}) {
+  return { meta: { schema: 1, title: 'T' }, columns, rows, cells };
+}
+const errorsOf = (s) => validate(s).errors.map((e) => `${e.where}: ${e.what}`);
+const col = (id, name, type = 'text', extra = {}) => ({ id, name, type, ...extra });
+const agent = (id, name, prompt, attach = []) =>
+  col(id, name, 'harness', { harness: { harness_id: '', prompt, attach } });
+
+test('refs finds every {{Name}} once, trimmed, in order', () => {
+  assert.deepEqual(refs('Read {{ Site }} about {{Company}} and {{Site}} again'), ['Site', 'Company']);
+  assert.deepEqual(refs(''), []);
+  assert.deepEqual(refs(null), []);
+});
+
+test('columnByName is case- and space-insensitive, because people type headers', () => {
+  const cols = [col('c1', 'Company Name')];
+  assert.equal(columnByName(cols, ' company name ')?.id, 'c1');
+  assert.equal(columnByName(cols, 'Nope'), null);
+});
+
+test('derivedDeps is the union of prompt refs and attachments, in that order', () => {
+  const cols = [col('c1', 'A'), agent('c2', 'B', 'x'), agent('c3', 'C', 'use {{A}} and {{B}}', ['c2'])];
+  assert.deepEqual(derivedDeps(cols[2], cols), ['c1', 'c2']);
+  assert.deepEqual(derivedDeps(cols[0], cols), [], 'a plain column reads nothing');
+});
+
+test('a forward reference is an error, and it names both columns', () => {
+  const s = sheet([agent('c1', 'Fit', 'score {{Brief}}'), agent('c2', 'Brief', 'write about it')]);
+  const e = validate(s).errors.find((x) => x.what.includes('not to its left'));
+  assert.ok(e, 'a forward reference must be refused');
+  assert.match(e.fix, /Move "Brief" before "Fit"/);
+});
+
+test('a reference to a column at the same index is a forward reference too', () => {
+  const s = sheet([agent('c1', 'Self', 'loop {{Self}}')]);
+  assert.ok(validate(s).errors.some((x) => x.what.includes('not to its left')));
+});
+
+test('duplicate column names are refused — {{Name}} would be ambiguous', () => {
+  const s = sheet([col('c1', 'Brief'), col('c2', 'brief')]);
+  const e = validate(s).errors.find((x) => x.what.includes('repeats the name'));
+  assert.ok(e);
+  assert.match(e.fix, /agent prompts address columns as/);
+});
+
+test('an unknown column type is refused and the message lists the real ones', () => {
+  const e = validate(sheet([col('c1', 'A', 'formula')])).errors.find((x) => x.where === 'columns[0]');
+  assert.match(e.what, /has type "formula"/);
+  assert.match(e.fix, /text number select tags checkbox date url harness/);
+});
+
+test('harness config: object present iff the type is harness', () => {
+  assert.ok(errorsOf(sheet([col('c1', 'A', 'harness')])).some((m) => m.includes('no "harness" object')));
+  assert.ok(errorsOf(sheet([col('c1', 'A', 'text', { harness: { prompt: 'x' } })]))
+    .some((m) => m.includes('not an agent column')));
+});
+
+test('an invented agent id is refused; empty is fine', () => {
+  const bad = sheet([col('c1', 'A', 'harness', { harness: { harness_id: 'chrn_abc', prompt: 'do {{A}}' } })]);
+  assert.ok(validate(bad).errors.some((e) => e.where.endsWith('harness_id')));
+  const ok = sheet([col('c1', 'A'), agent('c2', 'B', 'do {{A}}')]);
+  assert.deepEqual(validate(ok).errors, []);
+});
+
+test('attach must name an EARLIER AGENT column', () => {
+  const notAgent = sheet([col('c1', 'A'), agent('c2', 'B', 'do {{A}}', ['c1'])]);
+  assert.ok(validate(notAgent).errors.some((e) => e.what.includes('not an agent column')));
+
+  const later = sheet([agent('c1', 'A', 'x {{B}}', ['c2']), col('c2', 'B')]);
+  assert.ok(validate(later).errors.some((e) => e.where.endsWith('attach')));
+
+  const good = sheet([col('c1', 'A'), agent('c2', 'B', 'do {{A}}'), agent('c3', 'C', 'judge {{B}}', ['c2'])]);
+  assert.deepEqual(validate(good).errors, []);
+});
+
+test('a cells key must be <rowId>:<colId> with both resolving', () => {
+  const cols = [col('c1', 'Company')];
+  // The classic: the key uses the column NAME. It renders nothing, silently.
+  const byName = sheet(cols, [{ id: 'row_1' }], { 'row_1:Company': { value: 'x' } });
+  assert.ok(validate(byName).errors.some((e) => e.what.includes('does not exist')));
+
+  const noRow = sheet(cols, [{ id: 'row_1' }], { 'row_9:c1': { value: 'x' } });
+  assert.ok(validate(noRow).errors.some((e) => e.what.includes('row "row_9"')));
+
+  const malformed = sheet(cols, [{ id: 'row_1' }], { row_1c1: { value: 'x' } });
+  assert.ok(validate(malformed).errors.some((e) => e.what.includes('not a "<rowId>:<colId>" key')));
+});
+
+test('a bare value at a cell key is refused', () => {
+  const s = sheet([col('c1', 'A')], [{ id: 'row_1' }], { 'row_1:c1': 'plain' });
+  assert.ok(validate(s).errors.some((e) => e.what === 'is not an object'));
+});
+
+test('run state in a plain cell is refused — it claims a run that never happened', () => {
+  const s = sheet([col('c1', 'A')], [{ id: 'row_1' }],
+                  { 'row_1:c1': { value: 'x', status: 'done', session_id: 'hsess1' } });
+  const e = validate(s).errors.find((x) => x.what.includes('in a plain column'));
+  assert.ok(e);
+  assert.match(e.what, /status/);
+  assert.match(e.what, /session_id/);
+});
+
+test('an agent cell needs both run_id and session_id or neither', () => {
+  const cols = [col('c1', 'A'), agent('c2', 'B', 'do {{A}}')];
+  const half = sheet(cols, [{ id: 'row_1' }], { 'row_1:c2': { run_id: 'run_1', status: 'done' } });
+  assert.ok(validate(half).errors.some((e) => e.what.includes('not the other')));
+
+  const both = sheet(cols, [{ id: 'row_1' }],
+                     { 'row_1:c2': { run_id: 'run_1', session_id: 'hsess1', status: 'done', value: 'v' } });
+  assert.deepEqual(validate(both).errors, []);
+});
+
+test('duplicate ids are refused for both columns and rows', () => {
+  assert.ok(errorsOf(sheet([col('c1', 'A'), col('c1', 'B')])).some((m) => m.includes('repeats the id')));
+  assert.ok(errorsOf(sheet([col('c1', 'A')], [{ id: 'r' }, { id: 'r' }])).some((m) => m.includes('repeats the id')));
+});
+
+test('the wrong schema is refused rather than guessed at', () => {
+  const s = { ...sheet([col('c1', 'A')]), meta: { schema: 2, title: 'T' } };
+  assert.ok(validate(s).errors.some((e) => e.where === 'meta.schema'));
+});
+
+test('warnings do not block: a prompt with no reference, an off-list option, a loose number', () => {
+  const s = sheet(
+    [col('c1', 'Stage', 'select', { options: ['Todo', 'Done'] }),
+     col('c2', 'Count', 'number'),
+     agent('c3', 'Same', 'summarise the market')],
+    [{ id: 'row_1' }],
+    { 'row_1:c1': { value: 'Blocked' }, 'row_1:c2': { value: '7' } },
+  );
+  const { errors, warnings } = validate(s);
+  assert.deepEqual(errors, []);
+  assert.equal(warnings.length, 3);
+  assert.ok(warnings.some((w) => w.what.includes('references no columns')));
+  assert.ok(warnings.some((w) => w.what.includes('not one of the column')));
+  assert.ok(warnings.some((w) => w.what.includes('non-number')));
+});
+
+test('interpolate substitutes by name and reports empties instead of blanking them', () => {
+  const cols = [col('c1', 'Company'), col('c2', 'Site')];
+  const both = interpolate('Read {{Site}} on {{Company}}', cols, { c1: 'Northwind', c2: 'https://x' });
+  assert.equal(both.text, 'Read https://x on Northwind');
+  assert.deepEqual(both.missing, []);
+
+  const half = interpolate('Read {{Site}} on {{Company}}', cols, { c1: 'Northwind', c2: '' });
+  assert.deepEqual(half.missing, ['Site'], 'an empty upstream cell is named, not silently blanked');
+});
+
+test('interpolate survives quotes, newlines and braces in the substituted value', () => {
+  const cols = [col('c1', 'Brief')];
+  const v = 'He said "no".\nThen {{not a ref}} — 100%';
+  const out = interpolate('Judge this:\n\n{{Brief}}', cols, { c1: v });
+  assert.equal(out.text, `Judge this:\n\n${v}`);
+  assert.deepEqual(out.missing, []);
+});
+
+test('an unknown reference is left alone — the planner refuses the run and says which', () => {
+  const out = interpolate('hi {{Ghost}}', [col('c1', 'A')], { c1: 'x' });
+  assert.equal(out.text, 'hi {{Ghost}}');
+});
+
+test('cellText covers every column type', () => {
+  assert.equal(cellText({ value: 'x' }, col('c', 'A', 'text')), 'x');
+  assert.equal(cellText({ value: 42 }, col('c', 'A', 'number')), '42');
+  assert.equal(cellText({ value: 0 }, col('c', 'A', 'number')), '0', 'zero is a value, not an absence');
+  assert.equal(cellText({ value: '2026-01-01' }, col('c', 'A', 'date')), '2026-01-01');
+  assert.equal(cellText({ value: 'https://x' }, col('c', 'A', 'url')), 'https://x');
+  assert.equal(cellText({ value: 'Done' }, col('c', 'A', 'select')), 'Done');
+  assert.equal(cellText({ value: ['a', 'b'] }, col('c', 'A', 'tags')), 'a, b');
+  assert.equal(cellText({ value: true }, col('c', 'A', 'checkbox')), 'yes');
+  assert.equal(cellText({ value: false }, col('c', 'A', 'checkbox')), 'no');
+  assert.equal(cellText({ value: 'summary' }, col('c', 'A', 'harness')), 'summary');
+  assert.equal(cellText(undefined, col('c', 'A', 'text')), '');
+  assert.equal(cellText({ value: null }, col('c', 'A', 'text')), '');
+});
+
+test('materialize gives a template fresh ids and remaps attach and cells with them', () => {
+  const tpl = {
+    meta: { title: 'Scan' },
+    columns: [col('c1', 'A'), agent('c2', 'B', 'do {{A}}'), agent('c3', 'C', 'judge {{B}}', ['c2'])],
+    rows: [{ id: 'r1' }],
+    cells: { 'r1:c1': { value: 'seed' }, 'r9:c1': { value: 'orphan' } },
+  };
+  const s = materialize(tpl, 'My scan');
+  assert.equal(s.meta.title, 'My scan');
+  assert.equal(s.meta.schema, 1);
+  assert.notEqual(s.columns[0].id, 'c1');
+  assert.deepEqual(s.columns[2].harness.attach, [s.columns[1].id], 'attach follows the new ids');
+  assert.deepEqual(Object.keys(s.cells), [cellKey(s.rows[0].id, s.columns[0].id)],
+                   'a cell naming a row the template does not have is dropped, not carried');
+  assert.deepEqual(validate(s).errors, []);
+});
diff --git a/kits/sheets/app/src/lib/paste.js b/kits/sheets/app/src/lib/paste.js
new file mode 100644
index 0000000..c612dd3
--- /dev/null
+++ b/kits/sheets/app/src/lib/paste.js
@@ -0,0 +1,107 @@
+// Parsing pasted rows.
+//
+// This is how data gets into a sheet without spending a turn on it. Spreadsheets put TSV on the
+// clipboard and CSV in files, so both are handled by the same parser with a guessed separator —
+// guessing is safe here because the person SEES the parsed table before anything is imported.
+import { uid } from './model';
+
+/** The separator that yields the most consistent column count. */
+function guessSep(text) {
+  const lines = text.split(/\r?\n/).filter((l) => l.trim()).slice(0, 20);
+  if (!lines.length) return '\t';
+  let best = '\t';
+  let bestScore = -1;
+  for (const sep of ['\t', ',', ';', '|']) {
+    const counts = lines.map((l) => splitLine(l, sep).length);
+    const max = Math.max(...counts);
+    if (max < 2) continue;
+    const consistent = counts.filter((c) => c === max).length;
+    const score = consistent * 10 + max;
+    if (score > bestScore) { bestScore = score; best = sep; }
+  }
+  return best;
+}
+
+/** One line, honouring "quoted, fields" with doubled quotes inside. */
+function splitLine(line, sep) {
+  const out = [];
+  let cur = '';
+  let quoted = false;
+  for (let i = 0; i < line.length; i += 1) {
+    const ch = line[i];
+    if (quoted) {
+      if (ch === '"') {
+        if (line[i + 1] === '"') { cur += '"'; i += 1; } else quoted = false;
+      } else cur += ch;
+    } else if (ch === '"') quoted = true;
+    else if (ch === sep) { out.push(cur); cur = ''; }
+    else cur += ch;
+  }
+  out.push(cur);
+  return out.map((s) => s.trim());
+}
+
+/** Text -> {header, rows} where header is the first line if it looks like labels. */
+export function parseDelimited(text) {
+  const sep = guessSep(text);
+  const lines = String(text || '').split(/\r?\n/).filter((l) => l.trim() !== '');
+  if (!lines.length) return { sep, header: [], rows: [] };
+  const grid = lines.map((l) => splitLine(l, sep));
+  const width = Math.max(...grid.map((r) => r.length));
+  const padded = grid.map((r) => [...r, ...Array(width - r.length).fill('')]);
+  // A first row of short, non-numeric, distinct strings is a header. Getting this wrong is
+  // visible and reversible in the preview, so it is a guess worth making.
+  const first = padded[0];
+  const looksLikeHeader = padded.length > 1
+    && first.every((c) => c === '' || (c.length <= 40 && Number.isNaN(Number(c))))
+    && new Set(first.map((c) => c.toLowerCase())).size === first.length
+    && first.some(Boolean);
+  return {
+    sep,
+    header: looksLikeHeader ? first : first.map((_, i) => `Column ${i + 1}`),
+    rows: looksLikeHeader ? padded.slice(1) : padded,
+  };
+}
+
+/** Map incoming headers onto existing columns by name; the rest become new text columns. */
+export function planImport(sheet, parsed) {
+  const existing = sheet.columns || [];
+  const mapping = parsed.header.map((h) => {
+    const hit = existing.find((c) => c.name.trim().toLowerCase() === String(h).trim().toLowerCase());
+    return { header: h, colId: hit?.id || null, newName: hit ? '' : String(h).trim() || 'Column' };
+  });
+  return { mapping, newColumns: mapping.filter((m) => !m.colId).length, rows: parsed.rows.length };
+}
+
+/** Apply an import. `mode` is 'append' or 'replace'; returns the next sheet. */
+export function applyImport(sheet, parsed, mapping, mode) {
+  const next = JSON.parse(JSON.stringify(sheet));
+  next.columns = next.columns || [];
+  next.rows = next.rows || [];
+  next.cells = next.cells || {};
+
+  const target = mapping.map((m) => {
+    if (m.colId) return m.colId;
+    const col = { id: uid('col'), name: m.newName || 'Column', type: 'text' };
+    next.columns.push(col);
+    return col.id;
+  });
+
+  if (mode === 'replace') {
+    // Replacing rows drops their cells with them; the columns and their configuration stay,
+    // which is what makes "paste a new batch into the same pipeline" one action.
+    next.rows = [];
+    next.cells = {};
+  }
+
+  for (const row of parsed.rows) {
+    const rowId = uid('row');
+    next.rows.push({ id: rowId });
+    row.forEach((v, i) => {
+      const colId = target[i];
+      if (!colId || v === '') return;
+      next.cells[`${rowId}:${colId}`] = { value: v };
+    });
+  }
+  return next;
+}
diff --git a/kits/sheets/app/src/lib/run.js b/kits/sheets/app/src/lib/run.js
new file mode 100644
index 0000000..37926eb
--- /dev/null
+++ b/kits/sheets/app/src/lib/run.js
@@ -0,0 +1,306 @@
+// Planning and running the agent columns of a sheet.
+//
+// There is no workflow engine in this deployment and no batch endpoint: the open tab IS the
+// orchestrator. That is a real constraint and the UI says so before you press Run, rather than
+// implying a background job that does not exist.
+//
+// Two pieces, both pure of the network:
+//   plan()   decides what would run, and refuses the whole run if the sheet cannot run correctly
+//   Runner   walks the plan with a concurrency limit, over an INJECTED dispatcher
+//
+// The dispatcher is injected so this file can be tested without a server — the rules below
+// (a cell waits for its row, one failure costs only its own row, cancel clears the queue) are
+// the feature, and they are worth pinning.
+import { cellKey, cellText, derivedDeps, isHarnessColumn, refs, columnByName } from './model.js';
+
+export const CONCURRENCY_CHOICES = [1, 2, 3, 5, 8];
+export const DEFAULT_CONCURRENCY = 3;
+const CONC_KEY = 'sheets.run.concurrency';
+
+export function savedConcurrency() {
+  const n = Number(window.localStorage?.getItem(CONC_KEY));
+  return CONCURRENCY_CHOICES.includes(n) ? n : DEFAULT_CONCURRENCY;
+}
+export function saveConcurrency(n) {
+  try { window.localStorage.setItem(CONC_KEY, String(n)); } catch { /* private mode */ }
+}
+
+export const runId = () => `run_${Math.random().toString(36).slice(2, 8)}`;
+
+/** Which columns a scope covers. Three scopes, one planner: the Run button, the column header's
+ *  ▶ and a single cell's ▶ differ only in what they select, never in how they execute. */
+function scopeColumns(sheet, scope) {
+  const cols = (sheet.columns || []).filter(isHarnessColumn);
+  if (scope?.kind === 'column') return cols.filter((c) => c.id === scope.colId);
+  if (scope?.kind === 'cell') return cols.filter((c) => c.id === scope.colId);
+  return cols;
+}
+
+function scopeRows(sheet, scope) {
+  const rows = sheet.rows || [];
+  if (scope?.kind === 'cell') return rows.filter((r) => r.id === scope.rowId);
+  return rows;
+}
+
+function passesFilter(cell, filter) {
+  if (filter === 'unrun') return !cell || !cell.status || cell.status === 'skipped';
+  if (filter === 'failed') return cell?.status === 'failed';
+  return true;
+}
+
+/**
+ * What this run would do, and every reason it cannot.
+ *
+ * `env` describes the world outside the document: {harnesses: Map id -> {name, unusable}, ownId}.
+ * Refusals stop the whole run before a single turn is dispatched, because every one of them is a
+ * configuration error that is identical for every row — discovering it forty turns in would cost
+ * real money to learn nothing.
+ */
+export function plan(sheet, scope = { kind: 'sheet' }, filter = 'all', env = {}) {
+  const columns = sheet.columns || [];
+  const harnesses = env.harnesses || new Map();
+  const cells = sheet.cells || {};
+  const refusals = [];
+  const cols = scopeColumns(sheet, scope);
+
+  for (const c of cols) {
+    const at = c.name || c.id;
+    const h = c.harness || {};
+    const i = columns.indexOf(c);
+
+    if (!h.harness_id) {
+      refusals.push({ colId: c.id, column: at, reason: 'no agent is chosen yet. Open the column menu and pick one.' });
+    } else if (env.ownId && h.harness_id === env.ownId) {
+      refusals.push({ colId: c.id, column: at, reason: 'is set to this sheet’s own agent, which would run the sheet on itself.' });
+    } else if (!harnesses.has(h.harness_id)) {
+      // An unknown id does not fail loudly at dispatch — the server accepts it and runs an ad-hoc
+      // agent with no skills and no system prompt. A stale id silently running the wrong agent is
+      // worse than a refusal, so it is checked here against the live list.
+      refusals.push({ colId: c.id, column: at, reason: 'points at an agent that no longer exists. Pick another one.' });
+    } else if (harnesses.get(h.harness_id)?.unusable) {
+      refusals.push({ colId: c.id, column: at, reason: harnesses.get(h.harness_id).unusable + '.' });
+    }
+
+    if (!String(h.prompt || '').trim()) {
+      refusals.push({ colId: c.id, column: at, reason: 'has no prompt, so there is nothing to run.' });
+    }
+    for (const name of refs(h.prompt)) {
+      const hit = columnByName(columns, name);
+      if (!hit) refusals.push({ colId: c.id, column: at, reason: `refers to {{${name}}}, which is not a column.` });
+      else if (columns.indexOf(hit) >= i) {
+        refusals.push({ colId: c.id, column: at, reason: `refers to {{${name}}}, which is not to its left.` });
+      }
+    }
+    for (const a of h.attach || []) {
+      const hit = columns.find((x) => x.id === a);
+      if (!hit || columns.indexOf(hit) >= i || !isHarnessColumn(hit)) {
+        refusals.push({ colId: c.id, column: at, reason: 'attaches files from a column that cannot provide them.' });
+      }
+    }
+  }
+  if (refusals.length) return { cells: [], columns: cols.map((c) => c.id), refusals };
+
+  const wanted = new Set(cols.map((c) => c.id));
+  const planned = [];
+  for (const row of scopeRows(sheet, scope)) {
+    for (const c of cols) {
+      if (!passesFilter(cells[cellKey(row.id, c.id)], filter)) continue;
+      // A dep is only waited on when this run owns it. A dep outside the plan is not re-run —
+      // implicit upstream re-runs are surprising, expensive in real model spend, and they hide
+      // that your inputs are stale.
+      const deps = derivedDeps(c, columns)
+        .filter((d) => wanted.has(d))
+        .map((d) => cellKey(row.id, d))
+        .filter((k) => planned.some((p) => cellKey(p.rowId, p.colId) === k));
+      planned.push({ rowId: row.id, colId: c.id, key: cellKey(row.id, c.id), deps });
+    }
+  }
+  return { cells: planned, columns: cols.map((c) => c.id), refusals: [] };
+}
+
+/** Is an upstream cell usable as this cell's input? */
+function upstreamState(sheet, results, rowId, depColId) {
+  const live = results.get(cellKey(rowId, depColId));
+  if (live) return live.status;
+  const col = (sheet.columns || []).find((c) => c.id === depColId);
+  if (!isHarnessColumn(col)) return 'done';   // a plain column is always available; emptiness is
+                                              // a per-cell matter and the dispatcher names it
+  const cell = (sheet.cells || {})[cellKey(rowId, depColId)];
+  return cell?.status === 'done' ? 'done' : 'missing';
+}
+
+/**
+ * Walks a plan with at most `concurrency` turns in flight.
+ *
+ * dispatch(task, {signal}) -> Promise<cellRecord>. The Runner never knows what a turn is; that
+ * is lib/cell.js. It only knows the shape of the answer: {status, value, artifacts, …}.
+ *
+ * onCell(key, record) fires on every state change, so the page can write it into the document
+ * and the person watches the grid fill in.
+ */
+export class Runner {
+  constructor({ sheet, plan: p, concurrency = DEFAULT_CONCURRENCY, dispatch, onCell, onProgress }) {
+    this.sheet = sheet;
+    this.plan = p;
+    this.concurrency = Math.max(1, concurrency);
+    this.dispatch = dispatch;
+    this.onCell = onCell || (() => {});
+    this.onProgress = onProgress || (() => {});
+    this.results = new Map();     // key -> record, this run's own state
+    this.inflight = new Map();    // key -> AbortController
+    this.stopped = false;
+    this.byKey = new Map(this.plan.cells.map((c) => [c.key, c]));
+  }
+
+  progress() {
+    let done = 0; let failed = 0; let skipped = 0; let running = 0;
+    for (const r of this.results.values()) {
+      if (r.status === 'done') done += 1;
+      else if (r.status === 'failed') failed += 1;
+      else if (r.status === 'skipped') skipped += 1;
+      else if (r.status === 'running') running += 1;
+    }
+    return { planned: this.plan.cells.length, done, failed, skipped, running,
+             settled: done + failed + skipped };
+  }
+
+  _set(key, record) {
+    this.results.set(key, record);
+    this.onCell(key, record);
+    this.onProgress(this.progress());
+  }
+
+  /** Everything downstream of `key` in ITS OWN ROW. A sheet run is N independent row-pipelines;
+   *  one bad row must not cost the other ninety-nine. */
+  _skipDownstream(key, reason) {
+    const start = this.byKey.get(key);
+    if (!start) return;
+    let changed = true;
+    while (changed) {
+      changed = false;
+      for (const c of this.plan.cells) {
+        if (c.rowId !== start.rowId) continue;
+        if (this.results.get(c.key)) continue;
+        const blocked = c.deps.some((d) => {
+          const r = this.results.get(d);
+          return r && (r.status === 'failed' || r.status === 'skipped');
+        });
+        if (blocked) { this._set(c.key, { status: 'skipped', error: reason }); changed = true; }
+      }
+    }
+  }
+
+  _ready() {
+    const out = [];
+    for (const c of this.plan.cells) {
+      if (this.results.get(c.key)) continue;
+      const states = c.deps.map((d) => this.results.get(d)?.status || 'missing');
+      if (states.every((s) => s === 'done')) out.push(c);
+    }
+    return out;
+  }
+
+  /** Deps this run does NOT own: they must already be usable, or this cell never starts. */
+  _blockedByStale(c) {
+    const col = (this.sheet.columns || []).find((x) => x.id === c.colId);
+    for (const depId of derivedDeps(col, this.sheet.columns || [])) {
+      if (this.byKey.has(cellKey(c.rowId, depId))) continue;   // owned by this run; handled above
+      if (upstreamState(this.sheet, this.results, c.rowId, depId) !== 'done') {
+        const dep = (this.sheet.columns || []).find((x) => x.id === depId);
+        return `${dep?.name || 'An earlier column'} has not run in this row.`;
+      }
+    }
+    return '';
+  }
+
+  async run() {
+    if (!this.plan.cells.length) return this.progress();
+    this.onProgress(this.progress());
+    const pending = [];
+    for (;;) {
+      if (this.stopped) break;
+      while (this.inflight.size < this.concurrency) {
+        const next = this._ready().find((c) => !this.inflight.has(c.key));
+        if (!next) break;
+        const stale = this._blockedByStale(next);
+        if (stale) { this._set(next.key, { status: 'skipped', error: stale }); continue; }
+        pending.push(this._start(next));
+      }
+      if (!this.inflight.size) break;
+      // One settle per loop: the walk advances as soon as ANY cell finishes, so row 5's second
+      // column starts while row 12's first is still going. No column barrier.
+      await Promise.race([...this.inflight.values()].map((c) => c.settled));
+    }
+    await Promise.allSettled(pending);
+    return this.progress();
+  }
+
+  _start(c) {
+    const ctrl = new AbortController();
+    let resolveSettled;
+    ctrl.settled = new Promise((r) => { resolveSettled = r; });
+    this.inflight.set(c.key, ctrl);
+    this._set(c.key, { status: 'running' });
+
+    const task = {
+      rowId: c.rowId,
+      colId: c.colId,
+      rowIndex: (this.sheet.rows || []).findIndex((r) => r.id === c.rowId),
+      rowsTotal: (this.sheet.rows || []).length,
+      column: (this.sheet.columns || []).find((x) => x.id === c.colId),
+      values: this._rowValues(c.rowId),
+      upstream: this._upstreamRecords(c),
+    };
+
+    const p = Promise.resolve()
+      .then(() => this.dispatch(task, { signal: ctrl.signal }))
+      .then((record) => {
+        this._set(c.key, record);
+        if (record.status === 'failed') {
+          this._skipDownstream(c.key, `${task.column?.name || 'An earlier column'} failed in this row.`);
+        }
+      })
+      .catch((e) => {
+        this._set(c.key, { status: 'failed', error: e?.message || 'This cell could not run.' });
+        this._skipDownstream(c.key, `${task.column?.name || 'An earlier column'} failed in this row.`);
+      })
+      .finally(() => { this.inflight.delete(c.key); resolveSettled(); });
+    return p;
+  }
+
+  /** This row's cell text, by column id — what {{Name}} interpolates against. */
+  _rowValues(rowId) {
+    const out = {};
+    for (const col of this.sheet.columns || []) {
+      const live = this.results.get(cellKey(rowId, col.id));
+      const cell = live && live.status === 'done' ? live : (this.sheet.cells || {})[cellKey(rowId, col.id)];
+      out[col.id] = cellText(cell, col);
+    }
+    return out;
+  }
+
+  /** The finished agent cells this cell attaches files from. */
+  _upstreamRecords(c) {
+    const col = (this.sheet.columns || []).find((x) => x.id === c.colId);
+    const out = [];
+    for (const id of col?.harness?.attach || []) {
+      const dep = (this.sheet.columns || []).find((x) => x.id === id);
+      const rec = this.results.get(cellKey(c.rowId, id)) || (this.sheet.cells || {})[cellKey(c.rowId, id)];
+      if (dep && rec) out.push({ column: dep, cell: rec });
+    }
+    return out;
+  }
+
+  /** Stop dispatching, cancel what is in flight, and clear what never started.
+   *
+   *  A queued cell is CLEARED rather than left queued: a permanent "queued" that will never move
+   *  is a lie about what the app is doing. */
+  stop() {
+    this.stopped = true;
+    for (const ctrl of this.inflight.values()) ctrl.abort();
+    for (const c of this.plan.cells) {
+      const r = this.results.get(c.key);
+      if (!r) this._set(c.key, { status: null });     // null = absent; the page deletes the key
+    }
+  }
+}
diff --git a/kits/sheets/app/src/lib/run.test.mjs b/kits/sheets/app/src/lib/run.test.mjs
new file mode 100644
index 0000000..3e10548
--- /dev/null
+++ b/kits/sheets/app/src/lib/run.test.mjs
@@ -0,0 +1,288 @@
+// The orchestration rules, pinned against a fake dispatcher.
+//
+// This is the part of the kit that spends the person's money, so its behaviour under failure
+// matters more than its behaviour when everything works: one bad row must not cost the other
+// ninety-nine, a stopped run must not leave cells claiming to be queued forever, and the
+// concurrency the person chose must actually be the ceiling.
+import assert from 'node:assert/strict';
+import { test } from 'node:test';
+import { cellKey } from './model.js';
+import { plan, Runner } from './run.js';
+
+const HARNESSES = new Map([
+  ['chrn_' + 'a'.repeat(32), { name: 'Researcher', unusable: '' }],
+  ['chrn_' + 'b'.repeat(32), { name: 'Judge', unusable: '' }],
+]);
+const HID_A = 'chrn_' + 'a'.repeat(32);
+const HID_B = 'chrn_' + 'b'.repeat(32);
+const ENV = { harnesses: HARNESSES, ownId: 'chrn_' + 'f'.repeat(32) };
+
+const col = (id, name, type = 'text') => ({ id, name, type });
+const agent = (id, name, prompt, attach = [], harness_id = HID_A) =>
+  ({ id, name, type: 'harness', harness: { harness_id, prompt, attach } });
+
+function sheetOf(columns, rowCount = 2, cells = {}) {
+  return {
+    meta: { schema: 1, title: 'T' },
+    columns,
+    rows: Array.from({ length: rowCount }, (_, i) => ({ id: `row_${i + 1}` })),
+    cells,
+  };
+}
+
+/** A dispatcher that records what it was asked and answers however the test wants. */
+function fakeDispatcher({ answer, gate } = {}) {
+  const seen = [];
+  let peak = 0;
+  let live = 0;
+  const dispatch = async (task, { signal }) => {
+    seen.push(task);
+    live += 1; peak = Math.max(peak, live);
+    try {
+      if (gate) await gate(task, signal);
+      const r = answer ? answer(task) : { status: 'done', value: `${task.column.name}/${task.rowId}` };
+      if (signal.aborted) return { status: 'failed', error: 'Stopped.' };
+      return r;
+    } finally { live -= 1; }
+  };
+  return { dispatch, seen, peak: () => peak };
+}
+
+test('plan refuses the whole run when a column has no agent chosen', () => {
+  const s = sheetOf([col('c1', 'Company'), agent('c2', 'Brief', 'about {{Company}}', [], '')]);
+  const p = plan(s, { kind: 'sheet' }, 'all', ENV);
+  assert.equal(p.cells.length, 0, 'nothing is dispatched');
+  assert.equal(p.refusals.length, 1);
+  assert.match(p.refusals[0].reason, /no agent is chosen/);
+  assert.equal(p.refusals[0].column, 'Brief', 'the refusal names the column');
+});
+
+test('plan refuses this sheet’s own agent — a sheet may not run itself', () => {
+  const s = sheetOf([col('c1', 'A'), agent('c2', 'B', 'x {{A}}', [], ENV.ownId)]);
+  assert.match(plan(s, { kind: 'sheet' }, 'all', ENV).refusals[0].reason, /own agent/);
+});
+
+test('plan refuses an agent id the workspace no longer has', () => {
+  const s = sheetOf([col('c1', 'A'), agent('c2', 'B', 'x {{A}}', [], 'chrn_' + '9'.repeat(32))]);
+  assert.match(plan(s, { kind: 'sheet' }, 'all', ENV).refusals[0].reason, /no longer exists/);
+});
+
+test('plan refuses an agent that needs request headers, quoting the reason', () => {
+  const harnesses = new Map(HARNESSES);
+  harnesses.set(HID_A, { name: 'Locked', unusable: 'needs request headers this app can’t send' });
+  const s = sheetOf([col('c1', 'A'), agent('c2', 'B', 'x {{A}}')]);
+  assert.match(plan(s, { kind: 'sheet' }, 'all', { ...ENV, harnesses }).refusals[0].reason, /request headers/);
+});
+
+test('plan refuses a forward reference before anything is dispatched', () => {
+  const s = sheetOf([agent('c1', 'Fit', 'score {{Brief}}'), agent('c2', 'Brief', 'write')]);
+  const p = plan(s, { kind: 'sheet' }, 'all', ENV);
+  assert.equal(p.cells.length, 0);
+  assert.ok(p.refusals.some((r) => /not to its left/.test(r.reason)));
+});
+
+test('plan builds same-row, left-going dependencies and nothing else', () => {
+  const s = sheetOf([col('c1', 'Company'), agent('c2', 'Brief', 'about {{Company}}'),
+                     agent('c3', 'Fit', 'judge {{Brief}}', ['c2'])], 2);
+  const p = plan(s, { kind: 'sheet' }, 'all', ENV);
+  assert.equal(p.cells.length, 4, 'two agent columns over two rows');
+  const fit1 = p.cells.find((c) => c.key === cellKey('row_1', 'c3'));
+  assert.deepEqual(fit1.deps, [cellKey('row_1', 'c2')], 'depends on its own row only');
+  const brief1 = p.cells.find((c) => c.key === cellKey('row_1', 'c2'));
+  assert.deepEqual(brief1.deps, [], 'a plain column is not a planned dependency');
+});
+
+test('a column-scoped run covers that column only and does not re-run upstream', () => {
+  const s = sheetOf([col('c1', 'A'), agent('c2', 'B', 'x {{A}}'), agent('c3', 'C', 'y {{B}}')], 2);
+  const p = plan(s, { kind: 'column', colId: 'c3' }, 'all', ENV);
+  assert.deepEqual(p.cells.map((c) => c.colId), ['c3', 'c3']);
+  assert.deepEqual(p.cells[0].deps, [], 'the upstream cell is not owned by this run');
+});
+
+test('a cell-scoped run is exactly one cell', () => {
+  const s = sheetOf([col('c1', 'A'), agent('c2', 'B', 'x {{A}}')], 3);
+  const p = plan(s, { kind: 'cell', rowId: 'row_2', colId: 'c2' }, 'all', ENV);
+  assert.deepEqual(p.cells.map((c) => c.key), [cellKey('row_2', 'c2')]);
+});
+
+test('filter unrun skips cells that already have a result; failed picks only failures', () => {
+  const s = sheetOf([col('c1', 'A'), agent('c2', 'B', 'x {{A}}')], 3, {
+    'row_1:c2': { status: 'done', value: 'v' },
+    'row_2:c2': { status: 'failed', error: 'boom' },
+  });
+  assert.deepEqual(plan(s, { kind: 'sheet' }, 'unrun', ENV).cells.map((c) => c.rowId), ['row_3']);
+  assert.deepEqual(plan(s, { kind: 'sheet' }, 'failed', ENV).cells.map((c) => c.rowId), ['row_2']);
+  assert.equal(plan(s, { kind: 'sheet' }, 'all', ENV).cells.length, 3);
+});
+
+test('a cell waits for its row: Fit never starts before Brief finishes', async () => {
+  const s = sheetOf([col('c1', 'A'), agent('c2', 'Brief', 'x {{A}}'), agent('c3', 'Fit', 'y {{Brief}}')], 1);
+  const order = [];
+  const f = fakeDispatcher({
+    gate: async (task) => {
+      order.push(`start:${task.column.name}`);
+      await new Promise((r) => setTimeout(r, task.column.name === 'Brief' ? 20 : 0));
+      order.push(`end:${task.column.name}`);
+    },
+  });
+  const r = new Runner({ sheet: s, plan: plan(s, { kind: 'sheet' }, 'all', ENV), dispatch: f.dispatch });
+  await r.run();
+  assert.deepEqual(order, ['start:Brief', 'end:Brief', 'start:Fit', 'end:Fit']);
+});
+
+test('a downstream cell receives its upstream cell’s text as an interpolation value', async () => {
+  const s = sheetOf([col('c1', 'A'), agent('c2', 'Brief', 'x {{A}}'), agent('c3', 'Fit', 'y {{Brief}}')], 1,
+                    { 'row_1:c1': { value: 'seed' } });
+  const f = fakeDispatcher({ answer: (t) => ({ status: 'done', value: `${t.column.name}-out` }) });
+  const r = new Runner({ sheet: s, plan: plan(s, { kind: 'sheet' }, 'all', ENV), dispatch: f.dispatch });
+  await r.run();
+  const fit = f.seen.find((t) => t.column.name === 'Fit');
+  assert.equal(fit.values.c1, 'seed');
+  assert.equal(fit.values.c2, 'Brief-out', 'this run’s own result, not the stale document');
+});
+
+test('rows run in parallel: there is no column barrier', async () => {
+  const s = sheetOf([col('c1', 'A'), agent('c2', 'B', 'x {{A}}'), agent('c3', 'C', 'y {{B}}')], 3);
+  const seenPairs = [];
+  const f = fakeDispatcher({
+    gate: async (task) => {
+      seenPairs.push(`${task.column.name}${task.rowId}`);
+      await new Promise((r) => setTimeout(r, 5));
+    },
+  });
+  const r = new Runner({ sheet: s, plan: plan(s, { kind: 'sheet' }, 'all', ENV), dispatch: f.dispatch, concurrency: 3 });
+  await r.run();
+  // Crow_1 must have started before Brow_3 finished — that is what "no barrier" means.
+  assert.ok(seenPairs.indexOf('Crow_1') < seenPairs.length - 1);
+  assert.equal(f.seen.length, 6);
+});
+
+test('concurrency is a ceiling that is never exceeded', async () => {
+  const s = sheetOf([col('c1', 'A'), agent('c2', 'B', 'x {{A}}')], 12);
+  const f = fakeDispatcher({ gate: () => new Promise((r) => setTimeout(r, 5)) });
+  const r = new Runner({ sheet: s, plan: plan(s, { kind: 'sheet' }, 'all', ENV), dispatch: f.dispatch, concurrency: 3 });
+  await r.run();
+  assert.equal(f.seen.length, 12);
+  assert.ok(f.peak() <= 3, `peak was ${f.peak()}`);
+  assert.equal(f.peak(), 3, 'and it is actually used');
+});
+
+test('one failure skips only its own row', async () => {
+  const s = sheetOf([col('c1', 'A'), agent('c2', 'Brief', 'x {{A}}'), agent('c3', 'Fit', 'y {{Brief}}')], 3);
+  const f = fakeDispatcher({
+    answer: (t) => (t.column.name === 'Brief' && t.rowId === 'row_2'
+      ? { status: 'failed', error: 'the model refused' }
+      : { status: 'done', value: 'ok' }),
+  });
+  const states = new Map();
+  const r = new Runner({
+    sheet: s, plan: plan(s, { kind: 'sheet' }, 'all', ENV), dispatch: f.dispatch, concurrency: 4,
+    onCell: (k, rec) => states.set(k, rec),
+  });
+  const prog = await r.run();
+
+  assert.equal(states.get('row_2:c2').status, 'failed');
+  assert.equal(states.get('row_2:c3').status, 'skipped');
+  assert.equal(states.get('row_2:c3').error, 'Brief failed in this row.');
+  assert.equal(states.get('row_1:c3').status, 'done', 'row 1 is untouched');
+  assert.equal(states.get('row_3:c3').status, 'done', 'row 3 is untouched');
+  assert.deepEqual(
+    { planned: prog.planned, done: prog.done, failed: prog.failed, skipped: prog.skipped },
+    { planned: 6, done: 4, failed: 1, skipped: 1 },
+  );
+  assert.ok(!f.seen.some((t) => t.column.name === 'Fit' && t.rowId === 'row_2'),
+            'the skipped cell was never dispatched, so it cost nothing');
+});
+
+test('a skip cascades the whole way down a row', async () => {
+  const s = sheetOf([agent('c1', 'A', 'go'), agent('c2', 'B', 'x {{A}}'), agent('c3', 'C', 'y {{B}}')], 1);
+  const f = fakeDispatcher({ answer: (t) => (t.column.name === 'A' ? { status: 'failed', error: 'no' } : { status: 'done' }) });
+  const states = new Map();
+  const r = new Runner({ sheet: s, plan: plan(s, { kind: 'sheet' }, 'all', ENV), dispatch: f.dispatch,
+                         onCell: (k, rec) => states.set(k, rec) });
+  await r.run();
+  assert.equal(states.get('row_1:c2').status, 'skipped');
+  assert.equal(states.get('row_1:c3').status, 'skipped', 'two hops down is still skipped');
+});
+
+test('a cell whose upstream this run does NOT own is skipped when that upstream never ran', async () => {
+  const s = sheetOf([col('c1', 'A'), agent('c2', 'Brief', 'x {{A}}'), agent('c3', 'Fit', 'y {{Brief}}')], 1);
+  const f = fakeDispatcher();
+  const states = new Map();
+  const r = new Runner({ sheet: s, plan: plan(s, { kind: 'column', colId: 'c3' }, 'all', ENV),
+                         dispatch: f.dispatch, onCell: (k, rec) => states.set(k, rec) });
+  await r.run();
+  assert.equal(states.get('row_1:c3').status, 'skipped');
+  assert.match(states.get('row_1:c3').error, /Brief has not run in this row/);
+  assert.equal(f.seen.length, 0, 'and no turn was spent finding that out');
+});
+
+test('a column-scoped run proceeds when the upstream already succeeded', async () => {
+  const s = sheetOf([col('c1', 'A'), agent('c2', 'Brief', 'x {{A}}'), agent('c3', 'Fit', 'y {{Brief}}')], 1,
+                    { 'row_1:c2': { status: 'done', value: 'earlier answer' } });
+  const f = fakeDispatcher();
+  const r = new Runner({ sheet: s, plan: plan(s, { kind: 'column', colId: 'c3' }, 'all', ENV), dispatch: f.dispatch });
+  await r.run();
+  assert.equal(f.seen.length, 1);
+  assert.equal(f.seen[0].values.c2, 'earlier answer');
+});
+
+test('stop cancels what is running and CLEARS what never started', async () => {
+  const s = sheetOf([col('c1', 'A'), agent('c2', 'B', 'x {{A}}')], 8);
+  let started = 0;
+  const f = fakeDispatcher({
+    gate: (task, signal) => new Promise((resolve) => {
+      started += 1;
+      signal.addEventListener('abort', resolve, { once: true });
+      setTimeout(resolve, 500);
+    }),
+  });
+  const states = new Map();
+  const r = new Runner({ sheet: s, plan: plan(s, { kind: 'sheet' }, 'all', ENV), dispatch: f.dispatch,
+                         concurrency: 2, onCell: (k, rec) => states.set(k, rec) });
+  const done = r.run();
+  await new Promise((res) => setTimeout(res, 20));
+  assert.equal(started, 2, 'only the concurrency limit had started');
+  r.stop();
+  await done;
+
+  const cleared = [...states.entries()].filter(([, rec]) => rec.status === null);
+  assert.equal(cleared.length, 6, 'the six that never started are cleared, not left "queued" forever');
+  const stopped = [...states.values()].filter((rec) => rec.error === 'Stopped.');
+  assert.equal(stopped.length, 2, 'the two in flight are marked stopped');
+});
+
+test('attached upstream records reach the dispatcher', async () => {
+  const s = sheetOf([agent('c1', 'Brief', 'go'), agent('c2', 'Fit', 'judge {{Brief}}', ['c1'])], 1);
+  const f = fakeDispatcher({
+    answer: (t) => ({ status: 'done', value: 'v',
+                      artifacts: t.column.name === 'Brief' ? [{ filename: 'notes.md', file_id: 'f1', container_id: 'x' }] : [] }),
+  });
+  const r = new Runner({ sheet: s, plan: plan(s, { kind: 'sheet' }, 'all', ENV), dispatch: f.dispatch });
+  await r.run();
+  const fit = f.seen.find((t) => t.column.name === 'Fit');
+  assert.equal(fit.upstream.length, 1);
+  assert.equal(fit.upstream[0].column.name, 'Brief');
+  assert.equal(fit.upstream[0].cell.artifacts[0].filename, 'notes.md');
+});
+
+test('an empty plan settles immediately rather than spinning', async () => {
+  const s = sheetOf([col('c1', 'A')], 3);
+  const f = fakeDispatcher();
+  const r = new Runner({ sheet: s, plan: plan(s, { kind: 'sheet' }, 'all', ENV), dispatch: f.dispatch });
+  const prog = await r.run();
+  assert.deepEqual({ planned: prog.planned, settled: prog.settled }, { planned: 0, settled: 0 });
+});
+
+test('a dispatcher that throws fails that cell and nothing else', async () => {
+  const s = sheetOf([col('c1', 'A'), agent('c2', 'B', 'x {{A}}')], 3);
+  const f = fakeDispatcher({
+    gate: (t) => { if (t.rowId === 'row_2') throw new Error('network died'); },
+  });
+  const states = new Map();
+  const r = new Runner({ sheet: s, plan: plan(s, { kind: 'sheet' }, 'all', ENV), dispatch: f.dispatch,
+                         onCell: (k, rec) => states.set(k, rec) });
+  const prog = await r.run();
+  assert.equal(states.get('row_2:c2').error, 'network died');
+  assert.deepEqual({ done: prog.done, failed: prog.failed }, { done: 2, failed: 1 });
+});
diff --git a/kits/sheets/app/src/lib/sh.js b/kits/sheets/app/src/lib/sh.js
index 59c5a51..7c88f13 100644
--- a/kits/sheets/app/src/lib/sh.js
+++ b/kits/sheets/app/src/lib/sh.js
@@ -1,72 +1,52 @@
-// The Sheets data layer, backed by HarnessRouter.
+// The Sheets data layer.
 //
-// This is the only file that differs in any interesting way from the hosted product. The pages and
-// components are the ones sheets.wrapper.work runs; they call the functions below, and here a
-// sheet is a session on this kit's Harness rather than a row in a product database:
+// Everything about talking to HarnessRouter — routes, session semantics, the 409 on a busy
+// workspace — lives in `reifyui/harness`. This file is only what "sheet" adds on top of it:
 //
-//   sheet           = session          list -> GET /sessions?harness=…
-//   sheet content   = sheet.json in that session's workspace
-//   chat with agent = POST /responses with the session id
+//   a sheet          = a session on this kit's Harness
+//   its content      = ./sheet.json in that session's workspace
+//   an agent column  = a turn on a DIFFERENT harness, one per row
 //
 // There is no database, no per-product auth and no billing. The app is served by the console at
 // /kits/sheets, so it is same-origin with the console's API proxy: the browser sends the console
 // session it already has and the proxy attaches the internal key server-side.
-//
-// Every route below is one the OSS gateway actually implements. The slides kit shipped five bugs
-// that were all the same bug — a call kept from the hosted product to an endpoint that does not
-// exist here — so the rule for this file is: no route goes in without checking gateway/app.py.
-const API = '/api/harness/v1';
+import {
+  configureKit, kitHarness, listHarnesses, listSessions, sessionDetail, patchSession,
+  deleteSession, readJsonFile, writeFile, sessionTurns, containerFileUrl,
+} from 'reifyui/harness';
 
-async function readError(res) {
-  try {
-    const body = await res.json();
-    const d = body?.error?.message ?? body?.detail;
-    return typeof d === 'string' ? d : `request failed (${res.status})`;
-  } catch {
-    return `request failed (${res.status})`;
-  }
-}
+configureKit({ kitId: 'sheets' });
 
-async function hr(path, init = {}) {
-  const res = await fetch(`${API}${path}`, { cache: 'no-store', ...init });
-  if (!res.ok) {
-    const err = new Error(await readError(res));
-    err.status = res.status;
-    throw err;
-  }
-  return res.status === 204 ? null : res.json();
-}
+export const SHEET_FILE = 'sheet.json';
 
-function jsonInit(method, body) {
-  return { method, headers: { 'content-type': 'application/json' }, body: JSON.stringify(body) };
-}
+export { containerFileUrl, sessionTurns };
 
-// ── the Harness this kit launched ──────────────────────────────────────────
-let _harness = null;
-export async function sheetsHarness() {
-  if (_harness) return _harness;
-  const { harnesses = [] } = await hr('/harnesses');
-  _harness = harnesses.find((h) => h.kit === 'sheets') || null;
-  return _harness;
-}
+/** The Harness this kit launched, or null when it was never launched. */
+export const sheetsHarness = kitHarness;
 
-/** Every Harness a harness COLUMN may run.
+/** Every Harness an agent COLUMN may run.
  *
  *  Deliberately excludes this kit's own Harness. A sheet whose column runs the sheet's own agent
  *  would have that agent editing sheet.json while the app is driving a run over it — recursion
  *  with a file-write race inside it. Excluded at the source of the list rather than validated at
- *  run time, so the choice is never offered in the first place. */
+ *  run time, so the choice is never offered in the first place.
+ *
+ *  Also excludes harnesses that require request headers: their turns are refused without those
+ *  headers, and this app has nowhere to hold them. They are returned marked rather than dropped,
+ *  so the picker can say why instead of silently having fewer entries than the console shows. */
 export async function runnableHarnesses() {
-  const [{ harnesses = [] }, mine] = await Promise.all([hr('/harnesses'), sheetsHarness()]);
+  const [harnesses, mine] = await Promise.all([listHarnesses(), sheetsHarness()]);
   return harnesses
     .filter((h) => h.id !== mine?.id)
-    .map((h) => ({ id: h.id, name: h.name, base: h.base, model: h.defaultModel, kit: h.kit || '' }));
-}
-
-export async function subscribe() {
-  const h = await sheetsHarness();
-  if (!h) throw new Error('Sheets has not been launched yet — open Starter Kits and launch it.');
-  return { ok: true };
+    .map((h) => ({
+      id: h.id,
+      name: h.name,
+      base: h.base,
+      model: h.defaultModel,
+      unusable: Object.keys(h.additionalHeaders || {}).length
+        ? 'needs request headers this app can’t send'
+        : '',
+    }));
 }
 
 // ── sheets (= sessions) ────────────────────────────────────────────────────
@@ -74,7 +54,6 @@ function toSheet(s) {
   const id = s.id || s.session_id;
   return {
     id,
-    sheet_id: id,
     name: s.title || s.name || 'Untitled sheet',
     updated_at: s.updated_at || s.created_at || null,
     status: s.status || '',
@@ -82,115 +61,53 @@ function toSheet(s) {
 }
 
 export async function listSheets() {
-  const h = await sheetsHarness();
-  if (!h) return [];
-  // The filter is `harness`, not `harness_id` — with the wrong name the server ignores it and
-  // answers with every session in the org.
-  const body = await hr(`/sessions?harness=${encodeURIComponent(h.id)}&limit=100`);
-  return (body.sessions ?? body.data ?? []).map(toSheet);
-}
-
-/** A sheet is created by its first turn, so this records the intent; the first message opens the
- *  session and the app adopts the real id from the stream. */
-export async function createSheet(name, template = 'blank') {
-  const h = await sheetsHarness();
-  if (!h) throw new Error('Sheets has not been launched yet.');
-  const id = `new:${template}`;
-  return { id, sheet_id: id, name: name || 'Untitled sheet', template };
+  const { sessions } = await listSessions({ limit: 100 });
+  return sessions.map(toSheet);
 }
 
-/** Rename. PATCH /v1/sessions/{id} also rewrites the trace manifest the LIST renders from, and
- *  marks the title as chosen so the next turn does not regenerate it from your message. */
-export async function renameSheet(id, name) {
-  return hr(`/sessions/${encodeURIComponent(id)}`, jsonInit('PATCH', { title: name }));
-}
-
-/** Delete the sheet AND the conversation underneath it. The route is /traces/{id}: there is no
- *  DELETE on the session path, and this one removes the trace, the durable workspace tarball
- *  (sheet.json included) and tombstones the session. */
-export async function deleteSheet(id) {
-  return hr(`/traces/${encodeURIComponent(id)}`, { method: 'DELETE' });
-}
-
-/** The sheet JSON: { sheet_id, sheet }. Null sheet means the agent has not written one yet.
+/** A pending id: a sheet that has been chosen but not yet created.
+ *
+ *  Nothing but a turn creates a session, so a new sheet has no id until its first message opens
+ *  one. The id carries the template so the first turn knows what to build, and the page adopts
+ *  the real id from the stream. */
+export const PENDING = 'new:';
+export const isPending = (id) => String(id || '').startsWith(PENDING);
+export const pendingTemplate = (id) => (isPending(id) ? String(id).slice(PENDING.length) : '');
+export const newSheetId = (template = 'blank') => `${PENDING}${template || 'blank'}`;
+
+/** Rename. This also rewrites the trace manifest the sheet LIST renders from, and marks the title
+ *  as chosen so the next turn stops regenerating it from the latest message. */
+export const renameSheet = (id, name) => patchSession(id, { title: name });
+
+/** Delete the sheet and the conversation underneath it. */
+export const deleteSheet = deleteSession;
+
+/** The sheet document, or null when the agent has not written one yet.
  *
  *  Read by path, which reads the LIVE workspace, so a sheet appears as soon as it is written —
  *  mid-turn. The file LISTING answers from the checkpoint tarball, which only exists once a turn
- *  ends. */
+ *  ends, and would show a spinner over a file already on disk. */
 export async function getSheet(id) {
-  const r = await fetch(`${API}/sessions/${encodeURIComponent(id)}/files/sheet.json`,
-                        { cache: 'no-store' });
-  if (!r.ok) return { sheet_id: id, sheet: null };
-  return { sheet_id: id, sheet: await r.json().catch(() => null) };
+  if (isPending(id)) return null;
+  return readJsonFile(id, SHEET_FILE);
 }
 
-/** Write sheet.json back. Refused with 409 while a turn is running — the agent owns the file
- *  until it finishes, and a write that appears to succeed and is then overwritten by the agent's
- *  checkpoint is the worst of the three outcomes. */
-export async function saveSheet(id, sheet) {
-  return hr(`/sessions/${encodeURIComponent(id)}/files/sheet.json`,
-            jsonInit('PUT', { content: JSON.stringify(sheet, null, 2) }));
+/** Write the document back. Refused 409 while a turn is running: the agent owns the file until
+ *  it finishes. The caller must re-arm rather than drop the write — see SheetPage's save queue. */
+export function saveSheet(id, sheet) {
+  return writeFile(id, SHEET_FILE, JSON.stringify(sheet, null, 2));
 }
 
 /** Current turn state, so the grid knows when to lock and when to re-read. */
 export async function sheetStatus(id) {
-  const d = await hr(`/sessions/${encodeURIComponent(id)}`).catch(() => null);
+  if (isPending(id)) return '';
+  const d = await sessionDetail(id).catch(() => null);
   return d?.turn_status || d?.status || '';
 }
 
-// ── talking to the agent ───────────────────────────────────────────────────
-export async function sendChat(id, message) {
-  const h = await sheetsHarness();
-  return hr('/responses', jsonInit('POST', {
-    input: message,
-    metadata: { harness_id: h?.id, ...(id && !String(id).startsWith('new:') ? { session_id: id } : {}) },
-    stream: false,
-  }));
-}
-
-/** The conversation so far: `{ turns }`, oldest first — the shape ChatPanel destructures. The
- *  route is /turns; there is no /events. */
-export async function chatHistory(id) {
-  if (!id || String(id).startsWith('new:')) return { turns: [] };
-  const body = await hr(`/sessions/${encodeURIComponent(id)}/turns`).catch(() => null);
-  return { turns: body?.turns ?? [] };
-}
-
-// ── workspace files (artifacts) ────────────────────────────────────────────
-/** Workspace path -> a URL that serves it, for artifacts a cell references by path. */
-export async function workspaceFileIndex(id) {
-  const doc = await hr(`/sessions/${encodeURIComponent(id)}/files`).catch(() => null);
-  const out = {};
-  for (const f of doc?.files || []) {
-    const path = f.path || f.filename;
-    if (path && f.id) {
-      out[path] = `${API}/containers/${encodeURIComponent(id)}/files/${encodeURIComponent(f.id)}/content`;
-    }
-  }
-  return out;
-}
-
-/** One workspace file's bytes, by path, from the LIVE workspace. */
-export async function readWorkspaceFile(id, path) {
-  const r = await fetch(`${API}/sessions/${encodeURIComponent(id)}/files/${encodeURIComponent(path)}`,
-                        { cache: 'no-store' });
-  if (!r.ok) return null;
-  return r.text();
-}
-
-/** Put a file into a session's workspace — how a harness cell hands an artifact to the agent. */
-export async function writeWorkspaceFile(id, path, content) {
-  return hr(`/sessions/${encodeURIComponent(id)}/files/${encodeURIComponent(path)}`,
-            jsonInit('PUT', { content }));
-}
-
-// ── thumbnails ─────────────────────────────────────────────────────────────
-// The hosted product caches a rendered PNG per sheet. Here the grid renders live, which is
-// accurate and needs no capture pipeline or blob store — so these are inert rather than
-// pretending to store something.
-export function putThumbnail() { return Promise.resolve(null); }
-export function fetchThumbUrl() { return Promise.resolve(null); }
-export function sheetThumbPath() { return null; }
+/** The console's deep link to one conversation — where "open the full conversation" goes. */
+export const consoleSessionUrl = (harnessId, sessionId) =>
+  `/tasks?h=${encodeURIComponent(harnessId || '')}&sid=${encodeURIComponent(sessionId || '')}`;
 
 // ── last viewed (local record) ─────────────────────────────────────────────
 const LV_KEY = 'sheets.lastViewed';
diff --git a/kits/sheets/app/src/lib/templates.js b/kits/sheets/app/src/lib/templates.js
new file mode 100644
index 0000000..c47b82b
--- /dev/null
+++ b/kits/sheets/app/src/lib/templates.js
@@ -0,0 +1,22 @@
+// The template library.
+//
+// Kit data, not app data: it lives at kits/sheets/templates/ and is staged into public/ at build
+// time (see vite.config.js), so there is one copy of it and it is reachable at
+// /kits/sheets/templates.json.
+const URL = `${import.meta.env.BASE_URL}templates.json`;
+
+let cache = null;
+
+export async function listTemplates() {
+  if (cache) return cache;
+  const res = await fetch(URL, { cache: 'no-store' });
+  if (!res.ok) return [];
+  const body = await res.json().catch(() => null);
+  cache = Array.isArray(body?.templates) ? body.templates : [];
+  return cache;
+}
+
+export async function getTemplate(id) {
+  if (!id || id === 'blank') return null;
+  return (await listTemplates()).find((t) => t.id === id) || null;
+}
diff --git a/kits/sheets/app/src/main.jsx b/kits/sheets/app/src/main.jsx
index c38c260..ee4b1b0 100644
--- a/kits/sheets/app/src/main.jsx
+++ b/kits/sheets/app/src/main.jsx
@@ -1,8 +1,10 @@
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
-import App from './app.jsx';
+import App from './App.jsx';
+import 'highlight.js/styles/atom-one-dark.css';
 import 'reifyui/styles/sheet.css';
 import 'reifyui/styles/chat.css';
+import 'reifyui/styles/dialog.css';
 import './styles/tokens.css';
 import './styles/app.css';
 
diff --git a/kits/sheets/app/src/pages/Landing.jsx b/kits/sheets/app/src/pages/Landing.jsx
index a87667a..30851df 100644
--- a/kits/sheets/app/src/pages/Landing.jsx
+++ b/kits/sheets/app/src/pages/Landing.jsx
@@ -1,751 +1,177 @@
-// Landing: the prompt box is the primary entry. Typing a sentence and
-// pressing Enter creates a sheet (after an in-app login modal when signed
-// out) and lands on its editor page with the sentence as the copilot seed.
-// Templates are a searchable card carousel; My Sheets is a table (name +
-// last viewed + access + actions, per the wireframe) with a card-grid
-// alternate view behind a persisted list/grid toggle. Mirrors the
-// ContextualGraph landing (frontend-contextualgraph/src/pages/Landing.jsx);
-// no thumbnail plane in v1 — cards show the product glyph.
+// Landing: describe a sheet, start from a template, or reopen one you have.
+//
+// A sheet is a session on this kit's Harness, so "My sheets" is that harness's session list and
+// there is nothing else to store. Creating one costs no network call here: the choice becomes
+// real on the first turn, which is the only thing that opens a session.
 import { useEffect, useRef, useState } from 'react';
+import { ArrowUp, MoreHorizontal, Sparkles, Table2 } from 'lucide-react';
+import { useDialog } from 'reifyui';
 import {
-  ArrowUp, Check, ChevronLeft, ChevronRight, LayoutGrid, List, Mic, Paperclip,
-  Pencil, Search, Shapes, Trash2, X,
-} from 'lucide-react';
-import { authFetch, ENGINE, isAuthed, SESSION_EVENT } from '../lib/auth';
-import {
-  subscribe, listTemplates, listSheets, createSheet, renameSheet,
-  deleteSheet, getTemplateDetail, lastViewedMap, relativeTime,
-  sheetThumbPath, fetchThumbUrl,
+  deleteSheet, lastViewedMap, listSheets, newSheetId, relativeTime, renameSheet, sheetsHarness,
 } from '../lib/sh';
+import { listTemplates } from '../lib/templates';
 import { Topbar } from '../components/Topbar';
-import { AuthForm } from '../components/AuthForm';
-import { Dialog, ConfirmDialog } from '../components/Dialog';
-import { SheetGrid } from 'reifyui';
-import { ArtThumb, Thumb, ThumbHealer } from '../components/Thumbs';
-import { SkeletonTableRows, SkeletonTemplateCards } from '../components/Skeleton';
-import { svgDataUri, TEMPLATE_ART } from '../lib/thumb';
-
-function openSheet(id, seed) {
-  const q = seed ? `?seed=${encodeURIComponent(seed)}` : '';
-  window.location.hash = `#/s/${id}${q}`;
-}
-
-// ── Prompt placeholder: typewriter rotation through example sheets ──────
-const PROMPT_IDEAS = [
-  'A marketing campaign tracker with an AI-written summary per campaign',
-  'One competitor per row — research and score each with an agent',
-  'A list of companies, enriched with industry, size, and a fit score',
-  'Test cases in rows; run each one and record pass/fail + notes',
-  'Track my content ideas, drafts, channels, and how each performed',
-  'Daily competitor prices scraped into a sheet, flagged if they changed',
-];
-
-function useTypewriterPlaceholder(active) {
-  const [text, setText] = useState(PROMPT_IDEAS[0]);
-  useEffect(() => {
-    if (!active) return undefined;
-    if (window.matchMedia?.('(prefers-reduced-motion: reduce)')?.matches) {
-      setText(PROMPT_IDEAS[0]);
-      return undefined;
-    }
-    let idea = 0;
-    let pos = 0;
-    let timer;
-    const tick = () => {
-      const cur = PROMPT_IDEAS[idea];
-      if (pos <= cur.length) {
-        setText(cur.slice(0, pos));
-        pos += 1;
-        timer = window.setTimeout(tick, 24);
-      } else {
-        timer = window.setTimeout(() => {
-          idea = (idea + 1) % PROMPT_IDEAS.length;
-          pos = 0;
-          tick();
-        }, 2600);
-      }
-    };
-    tick();
-    return () => window.clearTimeout(timer);
-  }, [active]);
-  return text;
-}
-
-function SearchBox({ value, onChange, placeholder }) {
-  return (
-    <label className="searchbox">
-      <Search size={14} />
-      <input
-        value={value}
-        onChange={(e) => onChange(e.target.value)}
-        placeholder={placeholder}
-        aria-label={placeholder}
-      />
-      {value && (
-        <button type="button" className="sb-x" aria-label="Clear search" onClick={() => onChange('')}>
-          <X size={12} />
-        </button>
-      )}
-    </label>
-  );
-}
 
-function ViewToggle({ value, onChange }) {
-  return (
-    <div className="wb-tabs vt" role="group" aria-label="View">
-      <button type="button" className={'wb-tab' + (value === 'list' ? ' active' : '')}
-              onClick={() => onChange('list')} aria-label="List view">
-        <List size={15} />
-      </button>
-      <button type="button" className={'wb-tab' + (value === 'grid' ? ' active' : '')}
-              onClick={() => onChange('grid')} aria-label="Card view">
-        <LayoutGrid size={15} />
-      </button>
-    </div>
-  );
+function openNew(template, seed) {
+  const params = new URLSearchParams();
+  if (seed) params.set('seed', seed);
+  if (template && template !== 'blank') params.set('tpl', template);
+  const q = params.toString();
+  window.location.hash = `#/s/${newSheetId(template)}${q ? `?${q}` : ''}`;
 }
 
-// ── Access column: overlapping initials of the people with access ──────────
-const AV_COLORS = ['#0E7490', '#7C3AED', '#DB2777', '#D97706', '#059669', '#2563EB'];
-function colorFor(id) {
-  let h = 0;
-  for (const c of String(id)) h = (h * 31 + c.charCodeAt(0)) >>> 0;
-  return AV_COLORS[h % AV_COLORS.length];
-}
-function initialOf(name) {
-  return String(name || '?').trim().charAt(0).toUpperCase() || '?';
-}
-
-// One authenticated fetch per distinct avatar, shared across every row that
-// shows the same person (object URLs live for the page, never revoked).
-const avatarUrlCache = new Map(); // path -> Promise<string|null>
-function fetchAvatarOnce(path) {
-  if (!avatarUrlCache.has(path)) avatarUrlCache.set(path, fetchThumbUrl(path));
-  return avatarUrlCache.get(path);
-}
-
-function AvatarCircle({ person }) {
-  const [url, setUrl] = useState(null);
-  const path = '';
-  useEffect(() => {
-    if (!path) { setUrl(null); return undefined; }
-    let dead = false;
-    fetchAvatarOnce(path).then((u) => { if (!dead && u) setUrl(u); });
-    return () => { dead = true; };
-  }, [path]);
-  const label = person.name + (person.self ? ' (you)' : '');
+function TemplateCard({ template, onPick }) {
+  const agentCols = (template.sheet?.columns || []).filter((c) => c.type === 'harness').length;
   return (
-    <span className="acc-av" style={url ? undefined : { background: colorFor(person.id) }} title={label}>
-      {url ? <img src={url} alt={label} /> : initialOf(person.name)}
-    </span>
-  );
-}
-
-function AccessStack({ me, assignments }) {
-  const people = [];
-  if (me?.id) {
-    people.push({
-      id: String(me.id), name: me.display_name || me.name || me.email || 'You',
-      avatar: me.avatar || '', avatar_updated_at: me.avatar_updated_at || '', self: true,
-    });
-  }
-  (Array.isArray(assignments) ? assignments : []).forEach((a) => {
-    const g = a.grantee || {};
-    if (!g.id || people.some((p) => p.id === String(g.id))) return;
-    people.push({
-      id: String(g.id), name: g.name || g.email || 'Member',
-      avatar: g.avatar || '', avatar_updated_at: g.avatar_updated_at || '',
-    });
-  });
-  if (!people.length) return <span className="gt-last">—</span>;
-  const shown = people.slice(0, 5);
-  const extra = people.length - shown.length;
-  return (
-    <span className="acc-stack" aria-label="People with access">
-      {shown.map((p) => <AvatarCircle key={p.id} person={p} />)}
-      {extra > 0 && <span className="acc-av acc-more">+{extra}</span>}
-    </span>
+    <button className="tpl-card" onClick={() => onPick(template.id)}>
+      <div className="tpl-grid" aria-hidden="true">
+        {(template.sheet?.columns || []).slice(0, 4).map((c) => (
+          <span key={c.id} className={'tpl-col' + (c.type === 'harness' ? ' agent' : '')}>{c.name}</span>
+        ))}
+      </div>
+      <div className="tpl-name">{template.name}</div>
+      <div className="tpl-sub">
+        {template.description}
+        {agentCols > 0 && (
+          <span className="tpl-badge">{agentCols} agent column{agentCols === 1 ? '' : 's'}</span>
+        )}
+      </div>
+    </button>
   );
 }
 
-// ── Template chips on the prompt bar (multi-select inspiration) ─────────────
-const TPL_MAX = 4;
-const POP_W = 280;
-
-function usePopoverPlacement(anchorRef, open) {
-  const [pos, setPos] = useState(null);
-  useEffect(() => {
-    if (!open) { setPos(null); return undefined; }
-    const place = () => {
-      const el = anchorRef.current;
-      if (!el) return;
-      const r = el.getBoundingClientRect();
-      const gap = 6;
-      const margin = 8;
-      const vw = window.innerWidth;
-      const vh = window.innerHeight;
-      const width = Math.min(POP_W, vw - margin * 2);
-      const spaceBelow = vh - r.bottom - gap - margin;
-      const spaceAbove = r.top - gap - margin;
-      const openUp = spaceBelow < 200 && spaceAbove > spaceBelow;
-      const maxHeight = Math.max(140, Math.floor(openUp ? spaceAbove : spaceBelow));
-      let left = r.left;
-      left = Math.max(margin, Math.min(left, vw - width - margin));
-      const style = openUp
-        ? { left, bottom: Math.round(vh - r.top + gap), width, maxHeight }
-        : { left, top: Math.round(r.bottom + gap), width, maxHeight };
-      setPos(style);
-    };
-    place();
-    window.addEventListener('resize', place);
-    window.addEventListener('scroll', place, true);
-    return () => {
-      window.removeEventListener('resize', place);
-      window.removeEventListener('scroll', place, true);
-    };
-  }, [anchorRef, open]);
-  return pos;
-}
-
-function TemplateChips({ templates, selected, onToggle, note }) {
-  const [open, setOpen] = useState(false);
-  const [q, setQ] = useState('');
+function SheetRow({ sheet, viewed, onRename, onDelete }) {
+  const [menu, setMenu] = useState(false);
   const wrapRef = useRef(null);
-  const anchorRef = useRef(null);
-  const popRef = useRef(null);
-  const pos = usePopoverPlacement(anchorRef, open);
   useEffect(() => {
-    if (!open) return undefined;
-    const onDown = (e) => {
-      if (wrapRef.current?.contains(e.target) || popRef.current?.contains(e.target)) return;
-      setOpen(false);
-    };
-    const onKey = (e) => { if (e.key === 'Escape') setOpen(false); };
+    if (!menu) return undefined;
+    const onDown = (e) => { if (wrapRef.current && !wrapRef.current.contains(e.target)) setMenu(false); };
     window.addEventListener('mousedown', onDown);
-    window.addEventListener('keydown', onKey);
-    return () => {
-      window.removeEventListener('mousedown', onDown);
-      window.removeEventListener('keydown', onKey);
-    };
-  }, [open]);
-  const usable = templates.filter((t) => t.id !== 'blank');
-  const matches = usable.filter((t) => t.name.toLowerCase().includes(q.trim().toLowerCase()));
-  const isOn = (t) => selected.some((x) => x.id === t.id);
+    return () => window.removeEventListener('mousedown', onDown);
+  }, [menu]);
   return (
-    <>
-      {selected.map((t) => (
-        <span key={t.id} className="ctx-chip set" title={t.description}>
-          <Shapes size={13} />
-          {`Template: ${t.name}`}
-          <span className="ctx-chip-x" role="button" tabIndex={0}
-                aria-label={`Remove template ${t.name}`}
-                onClick={() => onToggle(t)}
-                onKeyDown={(e) => { if (e.key === 'Enter') onToggle(t); }}>
-            <X size={12} />
-          </span>
-        </span>
-      ))}
-      <span className="chip-wrap" ref={wrapRef}>
-        <button ref={anchorRef} type="button" className="ctx-chip"
-                onClick={() => { setOpen((v) => !v); setQ(''); }}>
-          <Shapes size={13} />
-          {selected.length ? 'Add template' : 'Template'}
-        </button>
-        {open && pos && (
-          <div ref={popRef} className="chip-pop chip-pop-fixed" style={{ position: 'fixed', ...pos }}>
-            <input className="input sm" autoFocus placeholder="Search templates"
-                   value={q} onChange={(e) => setQ(e.target.value)} />
-            {note && <div className="chip-pop-note">{note}</div>}
-            <div className="chip-pop-list scroll">
-              {matches.map((t) => (
-                <button key={t.id} type="button"
-                        className={'chip-pop-item' + (isOn(t) ? ' active' : '')}
-                        onClick={() => onToggle(t)} title={t.description}>
-                  <span className="chip-pop-check">{isOn(t) ? <Check size={13} /> : null}</span>
-                  {t.name}
-                </button>
-              ))}
-              {matches.length === 0 && <div className="stat-lbl" style={{ padding: '8px 10px' }}>No templates match.</div>}
+    <tr>
+      <td>
+        <a className="sheet-link" href={`#/s/${encodeURIComponent(sheet.id)}`}>
+          <Table2 size={15} /> {sheet.name}
+        </a>
+      </td>
+      <td className="mute">{relativeTime(viewed) || relativeTime(sheet.updated_at) || '—'}</td>
+      <td className="row-actions">
+        <div className="avmenu-wrap" ref={wrapRef}>
+          <button className="pane-btn" aria-label={`Actions for ${sheet.name}`}
+                  onClick={() => setMenu((v) => !v)}><MoreHorizontal size={16} /></button>
+          {menu && (
+            <div className="avmenu">
+              <button className="item" onClick={() => { setMenu(false); onRename(sheet); }}>Rename</button>
+              <button className="item out" onClick={() => { setMenu(false); onDelete(sheet); }}>Delete</button>
             </div>
-          </div>
-        )}
-      </span>
-    </>
+          )}
+        </div>
+      </td>
+    </tr>
   );
 }
 
-// Template card art: deterministic SVG data URIs from each template's
-// mini-DSL (lib/thumb.js), rendered by the SAME renderer real sheet
-// thumbnails use. Blank has no art — its placeholder glyph is honest.
-const TEMPLATE_ART_URIS = Object.fromEntries(
-  Object.entries(TEMPLATE_ART).map(([id, dsl]) => [id, svgDataUri(dsl, { width: 472, height: 265 })]),
-);
-
-const SHEET_VIEW_KEY = 'sheets.sheets.view';
-
 export function LandingPage() {
-  const [authed, setAuthed] = useState(isAuthed);
-  const [templates, setTemplates] = useState([]);
-  const [sheets, setSheets] = useState(null); // null = loading
   const [prompt, setPrompt] = useState('');
-  const [creating, setCreating] = useState(false);
-  const [createErr, setCreateErr] = useState('');
-  const [loginOpen, setLoginOpen] = useState(false);
-  const [loginSubtitle, setLoginSubtitle] = useState('Sign in to create your sheet.');
-  const [tplChips, setTplChips] = useState([]);
-  const [previewTpl, setPreviewTpl] = useState(null);   // template being previewed (read-only popup)
-  const [tplNote, setTplNote] = useState('');
-  const tplNoteTimer = useRef(null);
-  const [deleting, setDeleting] = useState(null);
-  const [deleteBusy, setDeleteBusy] = useState(false);
-  const [editingId, setEditingId] = useState(null);
-  const [editName, setEditName] = useState('');
-  const [view, setViewState] = useState(() => {
-    try { return window.localStorage.getItem(SHEET_VIEW_KEY) === 'grid' ? 'grid' : 'list'; } catch { return 'list'; }
-  });
-  const setView = (v) => {
-    setViewState(v);
-    try { window.localStorage.setItem(SHEET_VIEW_KEY, v); } catch { /* private mode */ }
-  };
-  const [sheetQ, setWfQ] = useState('');
-  const [tplQ, setTplQ] = useState('');
-  const [me, setMe] = useState(null);
-  const [access, setAccess] = useState({});
-  const [healQueue, setHealQueue] = useState([]);      // sheets missing a thumbnail
-  const [thumbRefresh, setThumbRefresh] = useState({}); // sheet id -> bump count
-  const healTriedRef = useRef(new Set());
-  const pendingRef = useRef(null);
-  const carRef = useRef(null);
-  const placeholder = useTypewriterPlaceholder(prompt === '');
+  const [templates, setTemplates] = useState([]);
+  const [sheets, setSheets] = useState(null);      // null = loading
+  const [launched, setLaunched] = useState(null);  // null = unknown yet
+  const [viewed, setViewed] = useState({});
+  const dialog = useDialog();
 
-  useEffect(() => {
-    const sync = () => setAuthed(isAuthed());
-    window.addEventListener(SESSION_EVENT, sync);
-    return () => window.removeEventListener(SESSION_EVENT, sync);
-  }, []);
+  const reload = () => listSheets().then(setSheets).catch(() => setSheets([]));
 
-  // Templates are public showcase content — load for everyone.
   useEffect(() => {
-    let dead = false;
-    listTemplates().then((t) => { if (!dead) setTemplates(t); }).catch(() => {});
-    return () => { dead = true; };
+    setViewed(lastViewedMap());
+    listTemplates().then(setTemplates).catch(() => setTemplates([]));
+    sheetsHarness().then((h) => {
+      setLaunched(!!h);
+      // Not launched is a real answer with a real fix, so it is rendered. Catching it into an
+      // empty list would show "no sheets yet" to someone whose actual problem is that nothing is
+      // running.
+      if (h) reload(); else setSheets([]);
+    }).catch(() => { setLaunched(false); setSheets([]); });
   }, []);
 
-  // My Sheets is the only signed-in-only data. Subscribe (idempotent) + load.
-  useEffect(() => {
-    if (!authed) { setSheets(null); return undefined; }
-    let dead = false;
-    subscribe().catch(() => { /* idempotent, retried next load */ });
-    listSheets().then((w) => { if (!dead) setSheets(w); }).catch(() => { if (!dead) setSheets([]); });
-    return () => { dead = true; };
-  }, [authed]);
-
-  // Viewer profile for the Access column.
-  useEffect(() => {
-    if (!authed) { setMe(null); return undefined; }
-    let dead = false;
-    authFetch(`${ENGINE}/v1/auth/me`)
-      .then((r) => (r.ok ? r.json() : null))
-      .then((b) => { if (!dead && b?.member) setMe(b.member); })
-      .catch(() => {});
-    return () => { dead = true; };
-  }, [authed]);
-
-  // Access column data: the engine share list, one call per sheet.
-  useEffect(() => {
-    if (!authed || view !== 'list' || !sheets?.length) return undefined;
-    let dead = false;
-    sheets.forEach((w) => {
-      if (access[w.id] !== undefined) return;
-      authFetch(`${ENGINE}/v1/resources/${encodeURIComponent(w.id)}/access`)
-        .then((r) => (r.ok ? r.json() : null))
-        .then((b) => {
-          if (dead) return;
-          setAccess((m) => ({ ...m, [w.id]: b ? (b.assignments || []) : null }));
-        })
-        .catch(() => { if (!dead) setAccess((m) => ({ ...m, [w.id]: null })); });
-    });
-    return () => { dead = true; };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [authed, view, sheets]);
-
-  // ── Thumbnail self-heal: a card that 404s queues a real render ──────────
-  const reportThumbMiss = (id) => {
-    if (healTriedRef.current.has(id)) return;
-    healTriedRef.current.add(id);
-    setHealQueue((q) => [...q, id]);
-  };
-  const onHealDone = (id, ok) => {
-    setHealQueue((q) => q.filter((x) => x !== id));
-    if (ok) setThumbRefresh((m) => ({ ...m, [id]: (m[id] || 0) + 1 }));
+  const rename = async (sheet) => {
+    const name = await dialog.prompt({ title: 'Rename this sheet', defaultValue: sheet.name, confirmLabel: 'Rename' });
+    if (!name?.trim()) return;
+    await renameSheet(sheet.id, name.trim()).catch(() => {});
+    reload();
   };
 
-  function toggleTpl(t) {
-    setTplChips((list) => {
-      if (list.some((x) => x.id === t.id)) return list.filter((x) => x.id !== t.id);
-      if (list.length >= TPL_MAX) {
-        setTplNote(`Up to ${TPL_MAX} templates can be combined. Remove one to add another.`);
-        window.clearTimeout(tplNoteTimer.current);
-        tplNoteTimer.current = window.setTimeout(() => setTplNote(''), 4000);
-        return list;
-      }
-      return [...list, t];
-    });
-  }
-
-  function withAuth(action) {
-    if (isAuthed()) action();
-    else { pendingRef.current = action; setLoginSubtitle('Sign in to create your sheet.'); setLoginOpen(true); }
-  }
-
-  async function createFromPrompt() {
-    const text = prompt.trim();
-    if ((!text && tplChips.length === 0) || creating) return;
-    withAuth(async () => {
-      setCreating(true);
-      setCreateErr('');
-      try {
-        const name = text
-          ? (text.length > 40 ? text.slice(0, 40).trim() : text)
-          : tplChips.map((t) => t.name).join(' + ');
-        // Blank-first creation: chosen templates ride along as reference
-        // context in the copilot seed, never a hard apply.
-        let seed = text
-          || `Design this sheet drawing inspiration from ${tplChips.length === 1
-            ? `the reference example "${tplChips[0].name}"`
-            : `these reference examples: ${tplChips.map((t) => `"${t.name}"`).join(', ')}`}.`;
-        if (tplChips.length >= 1) {
-          const dets = await Promise.all(tplChips.map((t) => getTemplateDetail(t.id)));
-          seed += '\n\nReference examples are INSPIRATION, my request is the spec: borrow what fits, '
-            + 'model everything my request needs even where no example covers it, and freely drop or '
-            + 'reshape anything that does not serve the request.';
-          dets.forEach((det, i) => {
-            seed += `\n\nReference example ${i + 1} of ${dets.length} (${tplChips[i].name}):\n${det.context}`;
-          });
-        }
-        const res = await createSheet(name, 'blank');
-        openSheet(res.id, seed);
-      } catch (e) {
-        setCreating(false);
-        setCreateErr(e.message || 'Could not create the sheet. Please try again.');
-      }
+  const remove = async (sheet) => {
+    const ok = await dialog.confirm({
+      title: `Delete “${sheet.name}”?`,
+      body: 'The sheet and its conversation go with it. This cannot be undone.',
+      destructive: true,
+      confirmLabel: 'Delete',
     });
-  }
-
-  async function commitRename(w) {
-    const name = editName.trim();
-    setEditingId(null);
-    if (!name || name === w.name) return;
-    setSheets((list) => list.map((x) => (x.id === w.id ? { ...x, name } : x)));
-    try {
-      await renameSheet(w.id, name);
-    } catch {
-      setSheets((list) => list.map((x) => (x.id === w.id ? { ...x, name: w.name } : x)));
-    }
-  }
-
-  async function confirmDelete() {
-    if (!deleting) return;
-    setDeleteBusy(true);
-    try {
-      await deleteSheet(deleting.id);
-      setSheets((list) => list.filter((x) => x.id !== deleting.id));
-      setDeleting(null);
-    } catch { /* keep the dialog open; user can retry or cancel */ } finally {
-      setDeleteBusy(false);
-    }
-  }
-
-  function scrollCarousel(dir) {
-    carRef.current?.scrollBy({ left: dir * 560, behavior: 'smooth' });
-  }
-
-  const viewed = lastViewedMap();
-  const tplMatches = templates.filter(
-    (t) => t.name.toLowerCase().includes(tplQ.trim().toLowerCase()),
-  );
-  const sheetMatches = (sheets || [])
-    .filter((w) => w.name.toLowerCase().includes(sheetQ.trim().toLowerCase()))
-    .sort((a, b) => ((viewed[b.id] || 0) - (viewed[a.id] || 0)) || a.name.localeCompare(b.name));
-
-  const renameField = (w) => (
-    <input
-      className="input rename-input"
-      value={editName}
-      autoFocus
-      onClick={(e) => e.stopPropagation()}
-      onChange={(e) => setEditName(e.target.value)}
-      onBlur={() => commitRename(w)}
-      onKeyDown={(e) => {
-        e.stopPropagation();
-        if (e.key === 'Enter') commitRename(w);
-        if (e.key === 'Escape') setEditingId(null);
-      }}
-    />
-  );
-
-  const rowActions = (w) => (
-    <span className="gcard-actions" onClick={(e) => e.stopPropagation()}>
-      <button className="iconbtn" aria-label={`Rename ${w.name}`}
-              onClick={() => { setEditingId(w.id); setEditName(w.name); }}>
-        <Pencil size={13} />
-      </button>
-      <button className="iconbtn danger" aria-label={`Delete ${w.name}`}
-              onClick={() => setDeleting(w)}>
-        <Trash2 size={13} />
-      </button>
-    </span>
-  );
+    if (!ok) return;
+    await deleteSheet(sheet.id).catch((e) => dialog.alert({ variant: 'error', title: 'Could not delete', body: e.message }));
+    reload();
+  };
 
   return (
-    <div className="shell">
-      <Topbar onSignIn={() => { setLoginSubtitle('Sign in to continue.'); pendingRef.current = null; setLoginOpen(true); }} />
-      <main className="landing">
-        <section className="hero">
-          <h1>What sheets should we create today?</h1>
-          <form className="promptbox" onSubmit={(e) => { e.preventDefault(); createFromPrompt(); }}>
-            <textarea
-              value={prompt}
-              onChange={(e) => setPrompt(e.target.value)}
-              onKeyDown={(e) => {
-                if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); createFromPrompt(); }
-              }}
-              placeholder={placeholder}
-              rows={3}
-              autoFocus
-            />
-            <div className="pb-row">
-              <span title="Attachments are coming soon">
-                <button type="button" className="cmp-icon" disabled aria-label="Add an attachment"><Paperclip size={16} /></button>
-              </span>
-              <TemplateChips templates={templates} selected={tplChips} onToggle={toggleTpl} note={tplNote} />
-              <span style={{ flex: 1 }} />
-              <span title="Voice input is coming soon">
-                <button type="button" className="cmp-icon" disabled aria-label="Voice input"><Mic size={15} /></button>
-              </span>
-              <button type="submit" className="btn primary" disabled={(!prompt.trim() && tplChips.length === 0) || creating}>
-                {creating ? 'Creating...' : 'Create'}
-                {!creating && <ArrowUp size={14} />}
-              </button>
-            </div>
-          </form>
-          {tplNote && <div className="hint" style={{ marginTop: 8 }}>{tplNote}</div>}
-          {createErr && <div className="auth-err" style={{ marginTop: 10 }}>{createErr}</div>}
-        </section>
+    <div className="land">
+      <Topbar />
+
+      <section className="hero">
+        <h1>What do you want to work through?</h1>
+        <p className="hero-sub">
+          Describe the sheet. Columns that run one of your agents on every row are set up here too.
+        </p>
+        <div className="hero-box">
+          <textarea
+            className="hero-input" rows={3} value={prompt} autoFocus
+            placeholder="Track 20 competitors: name, site, a short brief on each, and how directly they compete."
+            onChange={(e) => setPrompt(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter' && (e.metaKey || e.ctrlKey) && prompt.trim()) openNew('blank', prompt.trim());
+            }} />
+          <button className="btn primary hero-go" disabled={!prompt.trim() || launched === false}
+                  onClick={() => openNew('blank', prompt.trim())}>
+            <ArrowUp size={16} /> Start
+          </button>
+        </div>
+      </section>
+
+      {launched === false && (
+        <div className="page-note">
+          Sheets hasn’t been launched yet — open Starter Kits and launch it.
+        </div>
+      )}
 
-        <section className="section">
-          <div className="section-h">
-            <h2>Use a template</h2>
-            {templates.length > 0 && (
-              <div className="section-tools">
-                <SearchBox value={tplQ} onChange={setTplQ} placeholder="Search templates" />
-              </div>
-            )}
+      {templates.length > 0 && (
+        <section className="sec">
+          <h2><Sparkles size={16} /> Start from a template</h2>
+          <div className="tpl-row scroll">
+            {templates.map((t) => <TemplateCard key={t.id} template={t} onPick={(id) => openNew(id, '')} />)}
           </div>
-          {templates.length === 0 ? (
-            <SkeletonTemplateCards count={4} />
-          ) : tplMatches.length === 0 ? (
-            <div className="card empty-note">No templates match your search.</div>
-          ) : (
-            <div className="carousel-wrap">
-              <button className="car-btn left" onClick={() => scrollCarousel(-1)} aria-label="Scroll templates left">
-                <ChevronLeft size={16} />
-              </button>
-              <div className="carousel" ref={carRef}>
-                {tplMatches.map((t) => (
-                  <button
-                    key={t.id}
-                    className="gcard tpl"
-                    title={t.description}
-                    onClick={() => {
-                      if (t.id === 'blank') {
-                        setTplChips([]);
-                        window.scrollTo({ top: 0, behavior: 'smooth' });
-                        document.querySelector('.promptbox textarea')?.focus();
-                      } else setPreviewTpl(t);
-                    }}
-                  >
-                    <ArtThumb uri={t.sheet ? svgDataUri(t.sheet.tabs ? t.sheet.tabs[0] : t.sheet, { width: 472, height: 265 }) : TEMPLATE_ART_URIS[t.id]} alt={t.name} />
-                    <span className="gcard-foot"><span className="gcard-name">{t.name}</span></span>
-                  </button>
-                ))}
-              </div>
-              <button className="car-btn right" onClick={() => scrollCarousel(1)} aria-label="Scroll templates right">
-                <ChevronRight size={16} />
-              </button>
-            </div>
-          )}
         </section>
-
-        {authed && (
-          <section className="section">
-            <div className="section-h">
-              <h2>My sheets</h2>
-              {sheets !== null && sheets.length > 0 && (
-                <div className="section-tools">
-                  <SearchBox value={sheetQ} onChange={setWfQ} placeholder="Search sheets" />
-                  <ViewToggle value={view} onChange={setView} />
-                </div>
-              )}
-            </div>
-            {sheets === null ? (
-              <div className="gtable-wrap">
-                <table className="gtable">
-                  <thead>
-                    <tr>
-                      <th>Name</th>
-                      <th className="col-last">Last viewed</th>
-                      <th className="col-access">Access</th>
-                      <th className="gt-actions" aria-label="Actions" />
-                    </tr>
-                  </thead>
-                  <tbody>
-                    <SkeletonTableRows count={4} />
-                  </tbody>
-                </table>
-              </div>
-            ) : sheets.length === 0 ? (
-              <div className="card empty-note">No sheets yet. Create one from the prompt above or pick a template.</div>
-            ) : sheetMatches.length === 0 ? (
-              <div className="card empty-note">No sheets match your search.</div>
-            ) : view === 'grid' ? (
-              <div className="ggrid">
-                {sheetMatches.map((w) => (
-                  <div key={w.id} className="gcard mine" role="button" tabIndex={0}
-                       onClick={() => { if (editingId !== w.id) openSheet(w.id); }}
-                       onKeyDown={(e) => { if (e.key === 'Enter' && editingId !== w.id) openSheet(w.id); }}>
-                    <Thumb path={sheetThumbPath(w.id)} alt={w.name}
-                           refreshKey={thumbRefresh[w.id] || 0}
-                           onMiss={() => reportThumbMiss(w.id)} />
-                    <span className="gcard-foot">
-                      {editingId === w.id ? renameField(w) : (
-                        <>
-                          <span className="gcard-name" title={w.name}>{w.name}</span>
-                          {relativeTime(viewed[w.id]) && <span className="gcard-sub">{relativeTime(viewed[w.id])}</span>}
-                          {rowActions(w)}
-                        </>
-                      )}
-                    </span>
-                  </div>
-                ))}
-              </div>
-            ) : (
-              <div className="gtable-wrap">
-                <table className="gtable">
-                  <thead>
-                    <tr>
-                      <th>Name</th>
-                      <th className="col-last">Last viewed</th>
-                      <th className="col-access">Access</th>
-                      <th className="gt-actions" aria-label="Actions" />
-                    </tr>
-                  </thead>
-                  <tbody>
-                    {sheetMatches.map((w) => (
-                      <tr key={w.id} tabIndex={0}
-                          onClick={() => { if (editingId !== w.id) openSheet(w.id); }}
-                          onKeyDown={(e) => { if (e.key === 'Enter' && editingId !== w.id) openSheet(w.id); }}>
-                        <td>
-                          <span className="gt-name">
-                            <span className="gt-thumb">
-                              <Thumb path={sheetThumbPath(w.id)} alt=""
-                                     refreshKey={thumbRefresh[w.id] || 0}
-                                     onMiss={() => reportThumbMiss(w.id)} />
-                            </span>
-                            {editingId === w.id ? renameField(w)
-                              : <span className="gcard-name" title={w.name}>{w.name}</span>}
-                          </span>
-                        </td>
-                        <td className="gt-last col-last">{relativeTime(viewed[w.id]) || '—'}</td>
-                        <td className="col-access"><AccessStack me={me} assignments={access[w.id]} /></td>
-                        <td className="gt-actions">{rowActions(w)}</td>
-                      </tr>
-                    ))}
-                  </tbody>
-                </table>
-              </div>
-            )}
-          </section>
-        )}
-      </main>
-
-      {previewTpl && (
-        <Dialog onClose={() => setPreviewTpl(null)} width={860}>
-          <div className="tpl-preview">
-            <div className="tpl-preview-h">
-              <div>
-                <h3>{previewTpl.name}</h3>
-                <p className="tpl-preview-desc">{previewTpl.description}</p>
-              </div>
-              <div className="tpl-preview-actions">
-                <button className="btn" disabled={creating}
-                        onClick={() => { toggleTpl(previewTpl); setPreviewTpl(null);
-                                         window.scrollTo({ top: 0, behavior: 'smooth' });
-                                         document.querySelector('.promptbox textarea')?.focus(); }}>
-                  Add as reference
-                </button>
-                <button className="btn primary" disabled={creating}
-                        onClick={() => withAuth(async () => {
-                          setCreating(true);
-                          try {
-                            const res = await createSheet(previewTpl.name, previewTpl.id);
-                            openSheet(res.id);
-                          } catch (e) {
-                            setCreateErr(e.message || 'Could not create the sheet.');
-                            setPreviewTpl(null);
-                          } finally { setCreating(false); }
-                        })}>
-                  {creating ? 'Creating…' : 'Use this template'}
-                </button>
-              </div>
-            </div>
-            <div className="tpl-preview-grid">
-              {previewTpl.sheet
-                ? <SheetGrid sheet={previewTpl.sheet.tabs ? previewTpl.sheet.tabs[0] : previewTpl.sheet} readOnly />
-                : <div className="empty-note">No preview available.</div>}
-            </div>
-            <p className="tpl-preview-note">Sample data — your sheet starts from this and the copilot adapts it to your real data.</p>
-          </div>
-        </Dialog>
-      )}
-
-      {/* One at a time: a full render+upload per missing thumbnail. */}
-      {healQueue.length > 0 && (
-        <ThumbHealer
-          key={healQueue[0]}
-          sheetId={healQueue[0]}
-          onDone={(ok) => onHealDone(healQueue[0], ok)}
-        />
-      )}
-
-      {loginOpen && (
-        <Dialog onClose={() => { setLoginOpen(false); pendingRef.current = null; }} width={400}>
-          <AuthForm
-            subtitle={loginSubtitle}
-            onDone={() => {
-              setLoginOpen(false);
-              setAuthed(true);
-              const run = pendingRef.current;
-              pendingRef.current = null;
-              if (run) run();
-            }}
-          />
-        </Dialog>
       )}
 
-      {deleting && (
-        <ConfirmDialog
-          title="Delete sheet"
-          body={(
-            <>
-              <b>{deleting.name}</b> will be removed from your workspace. This cannot be undone.
-            </>
-          )}
-          busy={deleteBusy}
-          onConfirm={confirmDelete}
-          onClose={() => { if (!deleteBusy) setDeleting(null); }}
-        />
-      )}
+      <section className="sec">
+        <h2>My sheets</h2>
+        {sheets === null ? (
+          <div className="empty-note">Loading…</div>
+        ) : sheets.length === 0 ? (
+          <div className="empty-note">
+            {launched === false ? 'Nothing here yet.' : 'No sheets yet — describe one above.'}
+          </div>
+        ) : (
+          <table className="gtable">
+            <thead><tr><th>Name</th><th>Last opened</th><th aria-label="Actions" /></tr></thead>
+            <tbody>
+              {sheets.map((s) => (
+                <SheetRow key={s.id} sheet={s} viewed={viewed[s.id]} onRename={rename} onDelete={remove} />
+              ))}
+            </tbody>
+          </table>
+        )}
+      </section>
     </div>
   );
 }
diff --git a/kits/sheets/app/src/pages/SheetPage.jsx b/kits/sheets/app/src/pages/SheetPage.jsx
index 11c280d..ae867e9 100644
--- a/kits/sheets/app/src/pages/SheetPage.jsx
+++ b/kits/sheets/app/src/pages/SheetPage.jsx
@@ -1,262 +1,633 @@
-// Sheet page — CG/Flowness banner layout with the shared SheetGrid center +
-// copilot chat right. One gp-banner (wordmark + home / Export menu / credits +
-// avatar), the grid fills gp-content, the copilot column sits at the right edge.
-import { useEffect, useMemo, useRef, useState } from 'react';
-import { Download, HelpCircle, Home } from 'lucide-react';
-import { SheetGrid, sheetToDelimited, sheetToAoA } from 'reifyui';
-import { PaneResizer, useResizablePane } from 'reifyui';
-import { getSession, isAuthed } from '../lib/auth';
-import { getSheet, saveSheet, runCell, runColumn, markViewed, putThumbnail, SH_API, fetchThumbUrl } from '../lib/sh';
-import { sheetToPngBlob } from '../lib/thumb';
-import { useSheetCollab } from '../lib/collab';
+// The sheet: the grid, the copilot, and the run.
+//
+// Three things own this page and they are kept apart on purpose:
+//   the DOCUMENT  — one writer, one save queue (commit / flush below)
+//   the AGENT     — the copilot's turn, during which the file belongs to it and the grid is read-only
+//   the RUN       — the Runner walking agent columns, whose results flow back through commit
+//
+// The run happens in this tab. There is no workflow engine and no batch endpoint in this
+// deployment, so the browser is the orchestrator; the UI says that before you press Run and says
+// exactly what happened if you leave.
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Download, HelpCircle, Home, ClipboardPaste } from 'lucide-react';
+import { PaneResizer, useResizablePane, useDialog } from 'reifyui';
+import { SheetGrid } from 'reifyui';
+import { getResponse, lastAssistantText, sessionTurns } from 'reifyui/harness';
+import {
+  getSheet, isPending, markViewed, renameSheet, runnableHarnesses, saveSheet, sheetStatus,
+  sheetsHarness,
+} from '../lib/sh';
+import {
+  TYPE_LABEL, cellKey, derivedDeps, isHarnessColumn, validate,
+} from '../lib/model';
+import { Runner, plan, runId, saveConcurrency, savedConcurrency } from '../lib/run';
+import { makeCellDispatcher } from '../lib/cell';
+import { exportSheet } from '../lib/exportSheet';
 import { ChatColumn } from '../components/ChatPanel';
-import { AvatarMenu, CreditsBadge, LINKS, Wordmark } from '../components/Topbar';
+import { AvatarMenu, LINKS, Wordmark } from '../components/Topbar';
+import { HarnessCell } from '../components/HarnessCell';
+import { HarnessConfig } from '../components/HarnessConfig';
+import { CellDrawer } from '../components/CellDrawer';
+import { PasteRows } from '../components/PasteRows';
+import { RunControl, lastRunSummary } from '../components/RunControl';
 
-function ExportMenu({ doc, tab, name }) {
-  const [open, setOpen] = useState(false);
-  const ref = useRef(null);
-  useEffect(() => {
-    if (!open) return undefined;
-    const onDown = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
-    window.addEventListener('mousedown', onDown);
-    return () => window.removeEventListener('mousedown', onDown);
-  }, [open]);
-  const download = (sep, ext, mime) => {
-    const text = sheetToDelimited(tab, sep);
-    const url = URL.createObjectURL(new Blob([text], { type: mime }));
-    const a = document.createElement('a');
-    a.href = url; a.download = `${(name || 'sheet').replace(/[^\w.-]+/g, '_')}.${ext}`;
-    a.click(); URL.revokeObjectURL(url);
-    setOpen(false);
-  };
-  return (
-    <div className="sh-export" ref={ref}>
-      <button className="pane-btn" onClick={() => setOpen((v) => !v)} title="Export">
-        <Download size={16} /> Export
-      </button>
-      {open && (
-        <div className="sh-export-menu">
-          <button onClick={() => download(',', 'csv', 'text/csv')}>CSV (.csv)</button>
-          <button onClick={() => download('\t', 'tsv', 'text/tab-separated-values')}>TSV (.tsv)</button>
-          <button onClick={async () => {
-            const XLSX = await import('xlsx');
-            const wb = XLSX.utils.book_new();
-            for (const t of (doc.tabs || [tab])) {
-              const ws = XLSX.utils.aoa_to_sheet(sheetToAoA(t));
-              XLSX.utils.book_append_sheet(wb, ws, (t.name || 'Sheet').slice(0, 31));
-            }
-            XLSX.writeFile(wb, `${(name || 'sheet').replace(/[^\w.-]+/g, '_')}.xlsx`);
-            setOpen(false);
-          }}>Excel (.xlsx)</button>
-        </div>
-      )}
-    </div>
-  );
-}
+const SAVE_DEBOUNCE_MS = 400;
+const STATUS_POLL_MS = 2000;
+const RELOAD_POLL_MS = 4000;
+const now = () => Math.floor(Date.now() / 1000);
+
+// The grid's column vocabulary. `harness` is a first-class type rather than a discriminator over
+// a generic "computed" kind: the other kinds the hosted product offered (a workflow, an image)
+// have no engine behind them here, and a discriminator with one member is a fallback waiting to
+// accrete.
+const COLUMN_TYPES = [
+  { type: 'text', label: TYPE_LABEL.text },
+  { type: 'number', label: TYPE_LABEL.number },
+  { type: 'select', label: TYPE_LABEL.select },
+  { type: 'tags', label: TYPE_LABEL.tags },
+  { type: 'checkbox', label: TYPE_LABEL.checkbox },
+  { type: 'date', label: TYPE_LABEL.date },
+  { type: 'url', label: TYPE_LABEL.url },
+  {
+    type: 'harness',
+    label: TYPE_LABEL.harness,
+    computed: true,
+    configKey: 'harness',
+    badge: (col) => col.harness?.harness_name || (col.harness?.harness_id ? '' : 'not set up'),
+    configWidth: 380,
+    configHeight: 460,
+  },
+];
+
+const escapeRe = (s) => String(s).replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
 
-const migrate = (doc) => {
-  if (doc && !doc.tabs) {
-    return { ...doc, tabs: [{ id: 'tab_legacy', name: 'Sheet 1',
-      columns: doc.columns || [], rows: doc.rows || [], cells: doc.cells || {} }] };
+/** The first agent column that reads something to its right, if any. */
+function firstBrokenDep(sheet) {
+  const columns = sheet.columns || [];
+  for (let i = 0; i < columns.length; i += 1) {
+    if (!isHarnessColumn(columns[i])) continue;
+    for (const depId of derivedDeps(columns[i], columns)) {
+      const j = columns.findIndex((c) => c.id === depId);
+      if (j >= i) return { column: columns[i], dep: columns[j] || null };
+    }
   }
-  return doc;
-};
-
-export function SheetPage({ id, seed }) {
-  const [meta, setMeta] = useState(null);      // { sheet_id, name }
-  const [sheet, setSheet] = useState(null);    // the document JSON {meta, tabs}
-  const [tabId, setTabId] = useState(null);    // active tab id (null = first)
-  const [renamingTab, setRenamingTab] = useState(null);
+  return null;
+}
+
+export function SheetPage({ id: routeId, seed, template }) {
+  // The session id lives in state, not in the route. A sheet starts as "new:<template>" and
+  // becomes a session when its first turn opens one — which arrives WHILE the copilot is
+  // streaming. Re-keying this component off the URL at that moment unmounts it mid-stream and
+  // throws the turn away.
+  const [id, setId] = useState(routeId);
+  useEffect(() => { setId(routeId); }, [routeId]);
+
+  const [sheet, setSheet] = useState(null);
+  const [noSheet, setNoSheet] = useState(null);
   const [err, setErr] = useState('');
-  const [chatCollapsed, setChatCollapsed] = useState(false);
-  const chatPane = useResizablePane({
-    initial: 380, min: 300, maxFraction: 0.6, fromRight: true, storageKey: 'sheets.chat.w',
-  });
+  const [saveState, setSaveState] = useState('');     // '' | saving | saved | waiting | error
+  const [agentBusy, setAgentBusy] = useState(false);
+  const [drawer, setDrawer] = useState(null);         // {rowId, colId}
+  const [liveText, setLiveText] = useState({});       // cellKey -> first line, while running
+  const [pasting, setPasting] = useState(false);
+  const [exportOpen, setExportOpen] = useState(false);
+  const [env, setEnv] = useState(null);               // {harnesses: Map, ownId}
+  const [running, setRunning] = useState(false);
+  const [progress, setProgress] = useState(null);
+  const [notice, setNotice] = useState('');
+
+  const dialog = useDialog();
+  const chatPane = useResizablePane({ initial: 380, min: 300, maxFraction: 0.6, fromRight: true, storageKey: 'sheets.chat.w' });
+  const sheetRef = useRef(null);
+  sheetRef.current = sheet;
+  const idRef = useRef(id);
+  idRef.current = id;
+  const runnerRef = useRef(null);
+  const exportRef = useRef(null);
+  const save = useRef({ timer: null, inFlight: false, backoff: 0, wanted: null });
+
+  // ── the one writer ────────────────────────────────────────────────────────
+  const flush = useCallback(async () => {
+    const q = save.current;
+    if (q.inFlight || isPending(idRef.current)) return;
+    const doc = sheetRef.current;
+    if (!doc || doc === q.wanted) return;
+    q.inFlight = true;
+    const attempt = doc;
+    try {
+      await saveSheet(idRef.current, attempt);
+      q.inFlight = false;
+      q.backoff = 0;
+      q.wanted = attempt;
+      if (sheetRef.current !== attempt) { flush(); return; }   // it changed while we wrote
+      setSaveState('saved');
+      window.setTimeout(() => setSaveState((v) => (v === 'saved' ? '' : v)), 1800);
+    } catch (e) {
+      q.inFlight = false;
+      // 409 means the agent holds the file. That is the lock, and it is honest — but the write
+      // is not dropped: it is re-armed with backoff and the newest whole document is written
+      // when the turn ends.
+      const busy = e?.status === 409;
+      setSaveState(busy ? 'waiting' : 'error');
+      q.backoff = Math.min(8000, q.backoff ? q.backoff * 2 : 1000);
+      window.clearTimeout(q.timer);
+      q.timer = window.setTimeout(flush, q.backoff);
+    }
+  }, []);
+
+  const commit = useCallback((next) => {
+    setSheet(next);
+    sheetRef.current = next;
+    if (isPending(idRef.current)) return;
+    setSaveState('saving');
+    window.clearTimeout(save.current.timer);
+    save.current.timer = window.setTimeout(flush, SAVE_DEBOUNCE_MS);
+  }, [flush]);
+
+  // ── loading ───────────────────────────────────────────────────────────────
+  // "No sheet" is three different situations and they must not look alike: the file is there;
+  // a turn is still writing it; or a turn finished having written nothing, in which case its own
+  // last words are the only honest explanation we have.
+  const load = useCallback(async () => {
+    try {
+      const doc = await getSheet(idRef.current);
+      if (doc) {
+        setNoSheet(null);
+        // The file is the truth. A copilot turn may have restructured it, and re-merging
+        // remembered run refs onto the agent's document would show a result that no longer
+        // corresponds to the configuration beside it.
+        setSheet(doc);
+        sheetRef.current = doc;
+        save.current.wanted = doc;
+        return doc;
+      }
+      const st = await sheetStatus(idRef.current).catch(() => '');
+      if (['running', 'starting'].includes(st)) {
+        setNoSheet({ working: true, text: 'Setting up your sheet…' });
+        return null;
+      }
+      const turns = isPending(idRef.current) ? [] : await sessionTurns(idRef.current).catch(() => []);
+      const last = turns[turns.length - 1];
+      setNoSheet({
+        working: false,
+        text: last?.status && last.status !== 'completed'
+          ? `The last turn ended as “${last.status}” without writing a sheet.`
+          : 'No sheet has been written for this conversation yet.',
+        detail: lastAssistantText(turns).slice(0, 400),
+      });
+      return null;
+    } catch (e) {
+      setErr(e?.message || 'Could not open this sheet.');
+      return null;
+    }
+  }, []);
 
-  const collab = useSheetCollab(id);
+  useEffect(() => { markViewed(id); load(); }, [id, load]);
 
+  // Keep looking while the agent works: the sheet is a file it writes DURING the turn, and reads
+  // hit the live workspace, so the grid fills in as it is built. Without this the page shows
+  // "Setting up your sheet…" over a file already on disk — a reloaded tab has no stream.
   useEffect(() => {
-    if (!isAuthed()) { window.location.hash = '#/login'; return undefined; }
+    if (!noSheet?.working && sheet && !agentBusy) return undefined;
+    const t = window.setInterval(() => { void load(); }, RELOAD_POLL_MS);
+    return () => window.clearInterval(t);
+  }, [noSheet?.working, sheet, agentBusy, load]);
+
+  // ── the agent's lock ──────────────────────────────────────────────────────
+  useEffect(() => {
+    if (isPending(id)) return undefined;
     let dead = false;
-    markViewed(id);
-    getSheet(id)
-      .then((r) => { if (!dead) { setSheet(migrate(r.sheet)); setMeta({ sheet_id: r.sheet_id, name: r.sheet?.meta?.title || 'Untitled' }); } })
-      .catch((e) => { if (!dead) setErr(e.message || 'Could not open this sheet.'); });
-    return () => { dead = true; };
+    const tick = () => sheetStatus(id)
+      .then((st) => { if (!dead) setAgentBusy(['running', 'starting'].includes(st)); })
+      .catch(() => {});
+    tick();
+    const iv = window.setInterval(tick, STATUS_POLL_MS);
+    return () => { dead = true; window.clearInterval(iv); };
   }, [id]);
 
-  // Live truth from collab (copilot builds / peers' saves) rebases the grid.
+  // Once the turn ends, write whatever accumulated while the file was locked.
+  const prevAgentBusy = useRef(false);
   useEffect(() => {
-    if (collab.liveSheet) {
-      setSheet(migrate(collab.liveSheet));
-      setMeta((m) => (m ? { ...m, name: collab.liveSheet?.meta?.title || m.name } : m));
+    if (prevAgentBusy.current && !agentBusy) { load().then(() => flush()); }
+    prevAgentBusy.current = agentBusy;
+  }, [agentBusy, load, flush]);
+
+  // ── the workspace's agents ────────────────────────────────────────────────
+  useEffect(() => {
+    let dead = false;
+    Promise.all([runnableHarnesses(), sheetsHarness()])
+      .then(([list, mine]) => {
+        if (dead) return;
+        setEnv({ harnesses: new Map(list.map((h) => [h.id, h])), ownId: mine?.id || '' });
+      })
+      .catch(() => { if (!dead) setEnv({ harnesses: new Map(), ownId: '' }); });
+    return () => { dead = true; };
+  }, []);
+
+  const adoptSession = useCallback((sid) => {
+    if (!sid || sid === idRef.current) return;
+    const [, query = ''] = (window.location.hash || '').split('?');
+    // replaceState does not fire hashchange, so App never re-keys and the live stream survives.
+    // The pending id addresses nothing, so it must not become a Back target either.
+    window.history.replaceState({}, '', `#/s/${sid}${query ? `?${query}` : ''}`);
+    setId(sid);
+    idRef.current = sid;
+  }, []);
+
+  // ── reconciling a run this tab did not finish ─────────────────────────────
+  const reconciled = useRef('');
+  useEffect(() => {
+    if (!sheet?.run || sheet.run.status !== 'running' || running) return;
+    if (reconciled.current === sheet.run.id) return;
+    reconciled.current = sheet.run.id;
+    (async () => {
+      const doc = JSON.parse(JSON.stringify(sheetRef.current));
+      let stillRunning = false;
+      for (const [key, cell] of Object.entries(doc.cells || {})) {
+        if (cell?.run_id !== doc.run.id) continue;
+        if (cell.status === 'queued' && !cell.response_id) { delete doc.cells[key]; continue; }
+        if (cell.status !== 'running' || !cell.response_id) continue;
+        // eslint-disable-next-line no-await-in-loop
+        const res = await getResponse(cell.response_id).catch(() => null);
+        const st = res?.status;
+        if (!st || st === 'queued' || st === 'in_progress' || st === 'running') { stillRunning = true; continue; }
+        if (st === 'completed') {
+          const text = (res.output || [])
+            .filter((o) => o.type === 'message')
+            .flatMap((o) => (o.content || []).filter((c) => c.type === 'output_text').map((c) => c.text))
+            .join('\n').trim();
+          doc.cells[key] = { ...cell, status: text ? 'done' : 'failed', ended_at: now(),
+                             value: text || null,
+                             error: text ? null : 'The agent finished without answering.' };
+        } else {
+          doc.cells[key] = { ...cell, status: 'failed', ended_at: now(),
+                             error: res?.error?.message || `The turn ${st}.` };
+        }
+      }
+      if (!stillRunning) {
+        // ended_at is left null: we do not know when the walk stopped and will not invent it.
+        doc.run = { ...doc.run, status: 'abandoned' };
+      }
+      commit(doc);
+    })();
+  }, [sheet?.run, running, commit]);
+
+  // ── the run ───────────────────────────────────────────────────────────────
+  const [concurrency, setConcurrency] = useState(savedConcurrency);
+  const pickConcurrency = (n) => { setConcurrency(n); saveConcurrency(n); };
+
+  const startRun = useCallback(async (filter, scope = { kind: 'sheet' }) => {
+    const doc = sheetRef.current;
+    if (!doc || !env) return;
+    const p = plan(doc, scope, filter, env);
+    if (p.refusals.length) {
+      await dialog.alert({
+        variant: 'warning',
+        title: 'This sheet can’t run yet',
+        body: p.refusals.map((r) => `${r.column} ${r.reason}`).join('\n'),
+      });
+      return;
+    }
+    if (!p.cells.length) {
+      await dialog.alert({ title: 'Nothing to run', body: filter === 'failed'
+        ? 'No cells failed in the last run.'
+        : 'Every cell in this scope already has a result.' });
+      return;
+    }
+    if (scope.kind === 'sheet') {
+      const ok = await dialog.confirm({
+        title: `Run ${p.cells.length} cell${p.cells.length === 1 ? '' : 's'}?`,
+        body: 'Running replaces the results in these columns. The conversations stay in your history.\n\n'
+            + 'The run happens in this tab. If you close it, cells already started will finish; nothing new starts.',
+        confirmLabel: 'Run',
+      });
+      if (!ok) return;
     }
-  }, [collab.liveSheet]);
 
-  const tabs = sheet?.tabs || [];
-  const tab = tabs.find((t) => t.id === tabId) || tabs[0] || null;
+    const rid = runId();
+    const next = JSON.parse(JSON.stringify(doc));
+    // Only the last run is retained: the cells this run owns are cleared before it starts, so a
+    // half-old, half-new column can never be read as one result.
+    for (const c of p.cells) delete next.cells[c.key];
+    next.run = {
+      id: rid, status: 'running', started_at: now(), ended_at: null,
+      scope, filter, columns: p.columns, concurrency,
+      planned: p.cells.length, done: 0, failed: 0, skipped: 0,
+    };
+    commit(next);
+    setRunning(true);
+    setProgress({ planned: p.cells.length, settled: 0, done: 0, failed: 0, skipped: 0 });
 
-  const saveDoc = (next) => {
-    setSheet(next);                       // optimistic
-    saveSheet(id, next).catch((e) => setErr(e.message || 'save failed'));
-  };
-  // SheetGrid edits ONE tab; reassemble the document around it.
-  const onChange = (nextTab) => {
-    if (!sheet || !tab) return;
-    saveDoc({ ...sheet, tabs: tabs.map((t) => (t.id === tab.id ? nextTab : t)) });
-  };
-  const addTab = () => {
-    const t = { id: `tab_${Math.random().toString(36).slice(2, 10)}`,
-                name: `Sheet ${tabs.length + 1}`, columns: [], rows: [], cells: {} };
-    saveDoc({ ...sheet, tabs: [...tabs, t] });
-    setTabId(t.id);
-  };
-  const renameTab = (tid, name) => {
-    saveDoc({ ...sheet, tabs: tabs.map((t) => (t.id === tid ? { ...t, name } : t)) });
-  };
-  const deleteTab = (tid) => {
-    if (tabs.length <= 1) return;
-    const next = tabs.filter((t) => t.id !== tid);
-    saveDoc({ ...sheet, tabs: next });
-    if (tab?.id === tid) setTabId(next[0].id);
-  };
+    const applyCell = (key, record) => {
+      const cur = JSON.parse(JSON.stringify(sheetRef.current));
+      cur.cells = cur.cells || {};
+      if (record.status === null) delete cur.cells[key];
+      else cur.cells[key] = { ...(cur.cells[key] || {}), ...record, run_id: rid };
+      commit(cur);
+    };
 
-  // Mark a computed cell/column running locally, then run + let the saved
-  // truth (returned + republished) settle the final value.
-  const markStatus = (patch) => setSheet((s) => {
-    if (!s || !tab) return s;
-    const n = JSON.parse(JSON.stringify(s));
-    const t = n.tabs.find((x) => x.id === tab.id); if (!t) return s;
-    t.cells = t.cells || {};
-    patch(t); return n;
-  });
-  const onRunCell = async (rowId, colId) => {
-    const col = tab.columns.find((c) => c.id === colId);
-    markStatus((t) => { t.cells[`${rowId}:${colId}`] = { ...(t.cells[`${rowId}:${colId}`] || {}), status: 'running' }; });
-    try {
-      const { cell } = await runCell(id, rowId, col.name, tab.id);
-      markStatus((t) => { t.cells[`${rowId}:${colId}`] = cell; });
-    } catch (e) {
-      markStatus((t) => { t.cells[`${rowId}:${colId}`] = { status: 'failed', error: String(e.message || e) }; });
+    const runner = new Runner({
+      sheet: next,
+      plan: p,
+      concurrency,
+      dispatch: makeCellDispatcher({
+        sheetId: idRef.current, runId: rid, sheetTitle: next.meta?.title,
+        columns: next.columns, onCell: applyCell,
+      }),
+      onCell: applyCell,
+      onProgress: setProgress,
+    });
+    runnerRef.current = runner;
+    const final = await runner.run();
+    runnerRef.current = null;
+    setRunning(false);
+
+    const done = JSON.parse(JSON.stringify(sheetRef.current));
+    if (done.run?.id === rid) {
+      done.run = {
+        ...done.run,
+        status: runner.stopped ? 'cancelled' : 'done',
+        ended_at: now(),
+        done: final.done, failed: final.failed, skipped: final.skipped,
+      };
+      commit(done);
     }
-  };
-  const onRunColumn = async (colId) => {
-    const col = tab.columns.find((c) => c.id === colId);
-    for (const r of tab.rows) {
-      markStatus((t) => { t.cells[`${r.id}:${colId}`] = { ...(t.cells[`${r.id}:${colId}`] || {}), status: 'running' }; });
+  }, [env, concurrency, commit, dialog]);
+
+  const stopRun = useCallback(() => { runnerRef.current?.stop(); }, []);
+
+  // Leaving mid-run stops the walk. Say so with the platform's own guard rather than inventing a
+  // second one — and never with a browser popup of our own.
+  useEffect(() => {
+    if (!running) return undefined;
+    const onBeforeUnload = (e) => { e.preventDefault(); e.returnValue = ''; };
+    window.addEventListener('beforeunload', onBeforeUnload);
+    return () => window.removeEventListener('beforeunload', onBeforeUnload);
+  }, [running]);
+
+  // ── grid edits ────────────────────────────────────────────────────────────
+  const onGridChange = useCallback((next) => {
+    const prev = sheetRef.current;
+    if (!prev) return;
+
+    // A column rename must follow into the prompts that address it by name; otherwise renaming a
+    // column silently breaks every agent column that reads it, and the break only shows at run
+    // time.
+    const renames = [];
+    for (const c of next.columns || []) {
+      const before = (prev.columns || []).find((x) => x.id === c.id);
+      if (before && before.name !== c.name) renames.push([before.name, c.name]);
+    }
+    if (renames.length) {
+      for (const col of next.columns) {
+        if (!col.harness?.prompt) continue;
+        let p = col.harness.prompt;
+        for (const [from, to] of renames) {
+          p = p.replace(new RegExp(`\\{\\{\\s*${escapeRe(from)}\\s*\\}\\}`, 'g'), `{{${to}}}`);
+        }
+        col.harness = { ...col.harness, prompt: p };
+      }
     }
-    try {
-      await runColumn(id, col.name, tab.id);
-      const fresh = await getSheet(id);      // pull the filled truth
-      setSheet(migrate(fresh.sheet));
-    } catch (e) { setErr(e.message || 'run failed'); }
-  };
 
-  // Thumbnail: debounce a mini-grid PNG capture after the sheet settles, so
-  // the landing card always reflects the latest grid (CG pattern).
+    // A reorder that puts an agent column left of something it reads is refused, not accepted and
+    // marked invalid: refusing keeps a reversible drag reversible, where accepting it turns a
+    // drag into a sheet that cannot run and says so minutes later.
+    const order = (next.columns || []).map((c) => c.id).join(',');
+    if (order !== (prev.columns || []).map((c) => c.id).join(',')) {
+      const broken = firstBrokenDep(next);
+      if (broken) {
+        setNotice(`${broken.column.name} reads ${broken.dep?.name || 'a later column'}, `
+                + `so it has to stay to the right of it.`);
+        window.setTimeout(() => setNotice(''), 5000);
+        return;
+      }
+    }
+
+    commit(next);
+  }, [commit]);
+
+  // ── rename ────────────────────────────────────────────────────────────────
+  const rename = useCallback(async () => {
+    const doc = sheetRef.current;
+    const name = await dialog.prompt({
+      title: 'Rename this sheet',
+      defaultValue: doc?.meta?.title || '',
+      confirmLabel: 'Rename',
+    });
+    if (!name || !name.trim() || isPending(idRef.current)) return;
+    // The session title first — it is what the sheet LIST renders, because that list cannot read
+    // the file. Then the document, which is what this page renders.
+    await renameSheet(idRef.current, name.trim()).catch(() => {});
+    commit({ ...doc, meta: { ...doc.meta, title: name.trim() } });
+  }, [dialog, commit]);
+
+  // The agent may rename the sheet from inside the document; the session title is then stale, and
+  // one direction of reconciliation is stated rather than two racing.
+  const mirrored = useRef('');
   useEffect(() => {
-    const first = sheet?.tabs?.[0];
-    if (!first || !first.columns?.length) return undefined;
-    const t = window.setTimeout(async () => {
-      try {
-        const png = await sheetToPngBlob(first);
-        if (png) await putThumbnail(id, png);
-      } catch { /* best-effort */ }
-    }, 1500);
-    return () => window.clearTimeout(t);
-  }, [id, sheet]);
-
-  // Resource plumbing: authed blob fetch for inline images; ref chips open
-  // the referenced artifact in its own product (nested sheets stay in-app).
-  const fetchBlobUrl = (path) => fetchThumbUrl(path);
-  const onOpenResource = (ref) => {
-    if (ref.kind === 'sheet' && ref.id) { window.location.hash = `#/s/${ref.id}`; return; }
-    const bases = { slides: 'https://slides.wrapper.work/#/d/', workflow: 'https://app.flowness.ai/#/w/', graph: 'https://app.contextualgraph.ai/#/g/' };
-    const url = ref.url && /^https?:/i.test(ref.url) ? ref.url
-      : ref.id && bases[ref.kind] ? `${bases[ref.kind]}${encodeURIComponent(ref.id)}` : null;
-    if (url) window.open(url, '_blank', 'noreferrer');
+    const title = sheet?.meta?.title;
+    if (!title || isPending(id) || mirrored.current === title) return;
+    mirrored.current = title;
+    renameSheet(id, title).catch(() => {});
+  }, [sheet?.meta?.title, id]);
+
+  // ── the export menu ───────────────────────────────────────────────────────
+  useEffect(() => {
+    if (!exportOpen) return undefined;
+    const onDown = (e) => { if (exportRef.current && !exportRef.current.contains(e.target)) setExportOpen(false); };
+    window.addEventListener('mousedown', onDown);
+    return () => window.removeEventListener('mousedown', onDown);
+  }, [exportOpen]);
+
+  const doExport = async (kind) => {
+    setExportOpen(false);
+    try {
+      await exportSheet(kind, sheetRef.current);
+    } catch (e) {
+      dialog.alert({ variant: 'error', title: 'Export didn’t finish', body: e?.message || 'Please try again.' });
+    }
   };
 
-  // Presence: outline the cells other humans are editing (this tab only) and
-  // show their avatars in the banner — the CG/Flowness pattern on awareness.
-  const peerMarks = useMemo(() => {
-    const marks = {};
-    for (const p of collab.peers) {
-      if (p.cell && (!p.tab || !tab || p.tab === tab.id)) marks[p.cell] = { name: p.name, color: p.color };
+  // ── rendering ─────────────────────────────────────────────────────────────
+  const readOnly = agentBusy;
+  const columns = sheet?.columns || [];
+  const rows = sheet?.rows || [];
+  const problems = useMemo(() => (sheet ? validate(sheet).errors : []), [sheet]);
+
+  const openCell = drawer && sheet
+    ? {
+      cell: sheet.cells?.[cellKey(drawer.rowId, drawer.colId)] || {},
+      column: columns.find((c) => c.id === drawer.colId),
+      rowIndex: rows.findIndex((r) => r.id === drawer.rowId),
     }
-    return marks;
-  }, [collab.peers, tab?.id]);
-  const onActiveCell = (cellKey) => collab.setActiveCell(tab?.id || null, cellKey);
+    : null;
+
+  const renderCell = useCallback((ctx) => {
+    if (!isHarnessColumn(ctx.column)) return undefined;
+    const key = cellKey(ctx.row.id, ctx.column.id);
+    return (
+      <HarnessCell
+        cell={ctx.cell}
+        live={liveText[key]}
+        readOnly={ctx.readOnly}
+        onRun={ctx.runCell}
+        onOpen={() => setDrawer({ rowId: ctx.row.id, colId: ctx.column.id })}
+      />
+    );
+  }, [liveText]);
 
-  const grid = useMemo(() => tab && (
-    <SheetGrid sheet={tab} onChange={onChange} onRunCell={onRunCell} onRunColumn={onRunColumn}
-               fetchBlobUrl={fetchBlobUrl} onOpenResource={onOpenResource}
-               peerMarks={peerMarks} onActiveCell={onActiveCell} />
-  ), [sheet, tab, peerMarks]);
+  const renderColumnConfig = useCallback((ctx) => (
+    ctx.type === 'harness' ? <HarnessConfig {...ctx} /> : undefined
+  ), []);
+
+  if (err) {
+    return (
+      <div className="gp-root"><div className="gp-main">
+        <Banner sheet={null} />
+        <div className="page-note">{err}</div>
+      </div></div>
+    );
+  }
 
   return (
     <div className="gp-root">
       <div className="gp-main">
-        <header className="gp-banner">
-          <a className="wordmark" href="#/"><Wordmark size={15} /></a>
-          <a className="pane-btn gp-home" href="#/" title="Home" aria-label="Home"><Home size={16} /></a>
-          <span className="crumb-sep">/</span>
-          <span className="crumb-name" title={meta?.name}>{meta?.name || 'Sheet'}</span>
-          <div className="gp-banner-right">
-            {sheet && tab && <ExportMenu doc={sheet} tab={tab} name={meta?.name} />}
-            <CreditsBadge />
-            <a className="pane-btn gp-help" href={LINKS.docs} target="_blank" rel="noreferrer" title="Documentation"><HelpCircle size={16} /></a>
-            <span className="sh-people">
-              {collab.peers.slice(0, 4).map((p) => (
-                <span key={p.id} className="av sh-peer-dot" style={{ background: p.color }} title={p.name}>
-                  {(p.name || '?').trim().slice(0, 1)}
-                </span>
-              ))}
-              <AvatarMenu />
-            </span>
-          </div>
-        </header>
-        <div className="gp-content sh-content">
-          {err ? <div className="page-note">{err}</div>
-            : !sheet ? <div className="empty-note" style={{ paddingTop: 80 }}>Loading sheet…</div>
-              : grid}
-        </div>
-        {sheet && tabs.length > 0 && (
-          <div className="shg-tabs">
-            <button className="shg-tab-add" onClick={addTab} title="Add sheet">+</button>
-            {tabs.map((t) => (
-              <button key={t.id} className={'shg-tab' + ((tab?.id === t.id) ? ' active' : '')}
-                      onClick={() => setTabId(t.id)}
-                      onDoubleClick={() => setRenamingTab(t.id)}>
-                {renamingTab === t.id ? (
-                  <input className="shg-tab-name-input" defaultValue={t.name} autoFocus
-                         onClick={(e) => e.stopPropagation()}
-                         onBlur={(e) => { setRenamingTab(null); const v = e.target.value.trim(); if (v && v !== t.name) renameTab(t.id, v); }}
-                         onKeyDown={(e) => { if (e.key === 'Enter') e.target.blur(); if (e.key === 'Escape') setRenamingTab(null); }} />
-                ) : (
-                  <>
-                    {t.name}
-                    {tabs.length > 1 && (
-                      <span className="shg-tab-del" title="Delete sheet"
-                            onClick={(e) => { e.stopPropagation(); deleteTab(t.id); }}>×</span>
-                    )}
-                  </>
-                )}
+        <Banner
+          sheet={sheet}
+          saveState={saveState}
+          agentBusy={agentBusy}
+          onRename={sheet && !isPending(id) ? rename : null}
+          right={sheet && (
+            <>
+              <RunControl
+                running={running}
+                progress={progress}
+                concurrency={concurrency}
+                onConcurrency={pickConcurrency}
+                onRun={(filter) => startRun(filter)}
+                onStop={stopRun}
+                disabled={readOnly || !env || !columns.some(isHarnessColumn)}
+                lastRun={!running ? lastRunSummary(sheet.run) : ''}
+              />
+              <button className="btn" onClick={() => setPasting(true)} disabled={readOnly}>
+                <ClipboardPaste size={14} /> Paste rows
               </button>
-            ))}
+              <div className="sl-export-wrap" ref={exportRef}>
+                <button className="btn" onClick={(e) => { e.stopPropagation(); setExportOpen((v) => !v); }}>
+                  <Download size={14} /> Export
+                </button>
+                {exportOpen && (
+                  <div className="sl-export-menu" onClick={(e) => e.stopPropagation()}>
+                    <button onClick={() => doExport('csv')}>CSV (.csv)</button>
+                    <button onClick={() => doExport('tsv')}>Tab separated (.tsv)</button>
+                    <button onClick={() => doExport('xlsx')}>Excel (.xlsx)</button>
+                    <button onClick={() => doExport('json')}>Run result (.json)</button>
+                  </div>
+                )}
+              </div>
+            </>
+          )}
+        />
+
+        {notice && <div className="sh-notice">{notice}</div>}
+        {agentBusy && sheet && (
+          <div className="sh-lock">The agent is editing this sheet. It will unlock when the turn ends.</div>
+        )}
+        {problems.length > 0 && (
+          <div className="sh-notice warn">
+            {problems[0].where}: {problems[0].what}. {problems[0].fix}
+            {problems.length > 1 && ` (and ${problems.length - 1} more)`}
           </div>
         )}
+
+        <div className="sh-body">
+          {!sheet ? (
+            <div className="sh-empty">
+              {(!noSheet || noSheet.working) ? (
+                <>
+                  <span className="pulse-dot" />
+                  <div className="big">{noSheet?.text || 'Loading…'}</div>
+                  <div>The grid appears as soon as the first column is written.</div>
+                </>
+              ) : (
+                <>
+                  <div className="big">{noSheet.text}</div>
+                  {noSheet.detail && <pre className="sh-empty-detail">{noSheet.detail}</pre>}
+                  <div style={{ marginTop: 14 }}>
+                    Ask again on the right — the conversation is still here.
+                  </div>
+                </>
+              )}
+            </div>
+          ) : (
+            <div className="sh-grid">
+              <SheetGrid
+                sheet={sheet}
+                onChange={onGridChange}
+                readOnly={readOnly}
+                columnTypes={COLUMN_TYPES}
+                renderCell={renderCell}
+                renderColumnConfig={renderColumnConfig}
+                onRunCell={(rowId, colId) => startRun('all', { kind: 'cell', rowId, colId })}
+                onRunColumn={(colId) => startRun('all', { kind: 'column', colId })}
+              />
+            </div>
+          )}
+        </div>
       </div>
-      {!chatCollapsed && <PaneResizer pane={chatPane} />}
+
+      <PaneResizer pane={chatPane} />
       <ChatColumn
         sheetId={id}
         seed={seed}
-        title={meta?.name || 'Copilot'}
-        copilotBuilding={collab.copilotBuilding}
-        collapsed={chatCollapsed}
-        onToggle={() => setChatCollapsed((v) => !v)}
+        title={sheet?.meta?.title || 'Copilot'}
+        agentBusy={agentBusy}
+        onSheetMaybeChanged={load}
+        onSessionStarted={adoptSession}
         width={chatPane.width}
       />
+
+      {openCell?.column && (
+        <CellDrawer
+          cell={openCell.cell}
+          column={openCell.column}
+          rowIndex={openCell.rowIndex}
+          agentName={env?.harnesses.get(openCell.column.harness?.harness_id)?.name}
+          onClose={() => setDrawer(null)}
+          onLive={(t) => setLiveText((m) => ({ ...m, [cellKey(drawer.rowId, drawer.colId)]: t }))}
+        />
+      )}
+
+      {pasting && sheet && (
+        <PasteRows sheet={sheet} onClose={() => setPasting(false)}
+                   onApply={(next) => { setPasting(false); commit(next); }} />
+      )}
     </div>
   );
 }
+
+function Banner({ sheet, saveState, agentBusy, onRename, right }) {
+  const chip = {
+    saving: 'Saving…', saved: 'Saved',
+    waiting: 'Waiting for the agent…', error: 'Not saved — retrying',
+  }[saveState];
+  return (
+    <header className="gp-banner">
+      <a className="wordmark" href="#/"><Wordmark size={15} /></a>
+      <a className="pane-btn gp-home" href="#/" title="Home" aria-label="Home"><Home size={16} /></a>
+      {sheet && (
+        <span className="crumb-name sh-title" onDoubleClick={onRename || undefined}
+              title={onRename ? 'Double-click to rename' : undefined}>
+          {sheet.meta?.title || 'Untitled sheet'}
+        </span>
+      )}
+      {chip && <span className={'sl-save-chip ' + saveState}>{chip}</span>}
+      {agentBusy && <span className="sl-save-chip copilot"><span className="pulse" /> Agent is editing…</span>}
+      <div className="topbar-spacer" />
+      <div className="sh-banner-actions">{right}</div>
+      <a className="pane-btn gp-help" href={LINKS.docs} target="_blank" rel="noreferrer"
+         title="Documentation"><HelpCircle size={16} /></a>
+      <AvatarMenu />
+    </header>
+  );
+}
diff --git a/kits/sheets/app/src/styles/app.css b/kits/sheets/app/src/styles/app.css
index 96e749f..dda71a9 100644
--- a/kits/sheets/app/src/styles/app.css
+++ b/kits/sheets/app/src/styles/app.css
@@ -62,7 +62,7 @@
   box-shadow: var(--shadow-2); text-align: left;
   display: flex; flex-direction: column; gap: 8px;
 }
-.promptbox:focus-within { border-color: var(--brand); box-shadow: 0 0 0 4px rgba(5,150,105,.10), var(--shadow-2); }
+.promptbox:focus-within { border-color: var(--brand); box-shadow: 0 0 0 4px rgba(14,116,144,.10), var(--shadow-2); }
 .promptbox textarea {
   border: none; outline: none; resize: none; font-family: inherit;
   font-size: 15px; line-height: 1.55; color: var(--ink); background: transparent;
@@ -211,24 +211,6 @@
 .gtable tbody tr:hover .gcard-actions, .gtable tbody tr:focus-within .gcard-actions { opacity: 1; }
 .gt-actions { text-align: right; white-space: nowrap; width: 76px; }
 
-/* Access column: overlapping avatar circles (presence treatment, table size) */
-.acc-stack { display: inline-flex; align-items: center; }
-.acc-av {
-  width: 24px; height: 24px; border-radius: 50%; margin-left: -6px;
-  display: inline-flex; align-items: center; justify-content: center;
-  color: #fff; font-size: 10.5px; font-weight: 700; overflow: hidden;
-  border: 2px solid var(--surface); box-sizing: content-box; flex-shrink: 0;
-}
-.acc-stack .acc-av:first-child { margin-left: 0; }
-.acc-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
-.acc-av.acc-more { background: var(--line-soft); color: var(--ink-2); font-size: 10px; }
-
-/* Offscreen stage for the thumbnail self-heal (real render, out of view) */
-.thumb-healer {
-  position: fixed; left: -10000px; top: 0; width: 640px; height: 360px;
-  pointer-events: none;
-}
-
 /* ── Dialogs (no native browser popups) ────────────────────────────────── */
 .dlg-backdrop {
   position: fixed; inset: 0; z-index: 100;
@@ -244,35 +226,6 @@
 .dlg .body { font-size: 13px; color: var(--mute); line-height: 1.55; margin-bottom: 16px; }
 .dlg .foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
 
-/* ── Auth (shared by the modal and the /login route) ───────────────────── */
-.auth-page { min-height: 100vh; display: grid; place-items: center; background: var(--bg); padding: 20px; }
-.auth-card {
-  width: 400px; max-width: 100%;
-  background: var(--surface); border: 1px solid var(--line); border-radius: 18px;
-  padding: 32px; box-shadow: var(--shadow-2);
-}
-.auth-card .logo, .dlg .logo { display: flex; justify-content: center; margin-bottom: 18px; }
-.auth-card h1, .dlg h1 { font-size: 20px; font-weight: 700; margin: 0 0 4px; text-align: center; color: var(--ink); }
-.auth-card .sub, .dlg .sub { color: var(--mute); font-size: 13px; margin: 0 0 20px; text-align: center; }
-.field { margin-bottom: 14px; }
-.field label { display: block; font-size: 12px; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; }
-.field-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
-.field-row label { margin-bottom: 0; }
-.link-sm { background: none; border: none; padding: 0; font-size: 12.5px; font-weight: 600; color: var(--brand); cursor: pointer; font-family: inherit; }
-.link-sm:hover { text-decoration: underline; }
-.auth-err { color: #B91C1C; font-size: 13px; margin: 8px 0; }
-.auth-note {
-  font-size: 13px; color: var(--ink); line-height: 1.55;
-  background: var(--brand-50); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px;
-}
-.auth-or { display: flex; align-items: center; gap: 12px; color: var(--mute); font-size: 12px; margin: 14px 0; }
-.auth-or::before, .auth-or::after { content: ''; height: 1px; flex: 1; background: var(--line); }
-.auth-gwrap { display: flex; justify-content: center; min-height: 40px; }
-.auth-switch { font-size: 13px; color: var(--mute); text-align: center; margin: 16px 0 0; }
-.auth-switch button { color: var(--brand); font-weight: 600; background: none; border: none; cursor: pointer; padding: 0; font-size: 13px; font-family: inherit; }
-.auth-switch button:hover { text-decoration: underline; }
-.org-list { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
-
 /* ── Graph page ────────────────────────────────────────────────────────── */
 /* One row at the top of the main column (banner); the chat column on the
    right owns the FULL viewport height, its own header level with the banner. */
@@ -397,26 +350,6 @@
 /* Page loading / error strip */
 .page-note { padding: 40px; text-align: center; color: var(--mute); font-size: 13.5px; flex: 1; }
 
-/* Thumbnail generator (dev harness — #/thumbgen) */
-.tg-stage { width: 640px; height: 360px; position: relative; background: #FAFBFD; border: 1px solid var(--line); }
-
-/* ── Prompt context chips (Template selector) ──────────────────────────── */
-.chip-wrap { position: relative; display: inline-flex; }
-.ctx-chip {
-  display: inline-flex; align-items: center; gap: 6px;
-  height: 28px; padding: 0 10px; border-radius: var(--r-pill);
-  font-size: 12.5px; font-weight: 600; font-family: inherit; cursor: pointer;
-  background: var(--surface); color: var(--ink-2); border: 1px dashed var(--line);
-}
-.ctx-chip:hover { border-color: var(--brand); color: var(--brand-ink); }
-.ctx-chip.set { border-style: solid; background: var(--brand-soft); border-color: var(--brand-soft); color: var(--brand-ink); }
-.ctx-chip-x { display: inline-flex; border-radius: 999px; padding: 1px; }
-.ctx-chip-x:hover { background: rgba(5,150,105,.15); }
-.chip-pop {
-  position: absolute; left: 0; bottom: 36px; z-index: 60; width: 280px;
-  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
-  box-shadow: var(--shadow-2); padding: 8px; display: flex; flex-direction: column; gap: 6px;
-}
 /* Adaptive (fixed) placement: the JS sets top OR bottom + a max-height clamped
    to the room in the chosen direction. The whole popover honors that cap and
    the list scrolls inside — never taller than the viewport. */
@@ -574,74 +507,243 @@
   .gt-actions { width: 64px; }
 }
 
-/* Logs tab (inside gp-content) */
-.logs-pane { flex: 1; min-height: 0; overflow-y: auto; padding: 18px; }
-.logs-events {
-  margin-top: 14px; padding: 12px; max-height: 40vh; overflow: auto;
-  background: var(--surface); border: 1px solid var(--line);
-  border-radius: var(--r-card); font-size: 12px; line-height: 1.5;
-}
-
-/* ── Logs 3-pane (run history · replay canvas · node IO) ────────────────── */
-.logs-3pane { flex: 1; min-height: 0; display: flex; }
-.logs-runs {
-  flex: 0 0 232px; min-height: 0; overflow-y: auto; padding: 10px;
-  background: var(--surface); border-right: 1px solid var(--line);
-}
-.logs-runs-h {
-  display: flex; align-items: center; gap: 8px; padding: 4px 6px 10px;
-  font-size: 12px; font-weight: 700; color: var(--ink-2); text-transform: uppercase; letter-spacing: .04em;
-}
-.logs-run-item {
-  width: 100%; display: flex; align-items: center; gap: 8px;
-  padding: 8px 10px; border-radius: 8px; border: 1px solid transparent;
-  background: transparent; cursor: pointer; font-family: inherit; text-align: left;
-}
-.logs-run-item:hover { background: var(--line-soft); }
-.logs-run-item.active { background: var(--brand-50); border-color: var(--brand-soft); }
-.logs-run-when { font-size: 11.5px; color: var(--ink-2); }
-.logs-run-dur { font-size: 11px; color: var(--mute-2); }
-.logs-run-badge {
-  font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
-  padding: 2px 6px; border-radius: 999px;
-}
-.logs-run-badge.wf-run-running   { background: #DBEAFE; color: #1E40AF; }
-.logs-run-badge.wf-run-succeeded { background: #D1FAE5; color: #047857; }
-.logs-run-badge.wf-run-failed    { background: #FEE2E2; color: #B91C1C; }
-.logs-more {
-  width: 100%; margin-top: 6px; padding: 8px; border-radius: 8px; border: none;
-  background: transparent; color: var(--brand); font-size: 12px; font-weight: 600;
-  cursor: pointer; font-family: inherit;
-}
-.logs-more:hover { background: var(--line-soft); }
-.logs-canvas { flex: 1; min-width: 0; display: flex; }
-.logs-canvas > .wf-editor { flex: 1; }
-
-/* ── Sheet page: grid content + Export menu ─────────────────────────────── */
-.sh-content { padding: 0; overflow: hidden; }
-.sh-content > .shg { flex: 1; min-width: 0; }
-.sh-export { position: relative; }
-.sh-export .pane-btn { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; }
-.sh-export-menu {
-  position: absolute; right: 0; top: 34px; z-index: 40; min-width: 150px;
+.gt-thumb .thumb { width: 44px; }
+
+
+/* Chat "building" empty-state pulse (never a dead-end while a turn runs) */
+.pane-empty .pulse-dot {
+  width: 14px; height: 14px; border-radius: 50%; background: var(--brand);
+  animation: slpulse 1.1s ease-in-out infinite; margin-bottom: 4px;
+}
+
+/* Export menu (PDF / PowerPoint) */
+.sl-export-wrap { position: relative; display: inline-block; }
+.sl-export-menu {
+  position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; min-width: 190px;
   background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
   box-shadow: var(--shadow-2); padding: 5px; display: flex; flex-direction: column;
 }
-.sh-export-menu button {
-  text-align: left; padding: 8px 12px; border: none; background: transparent;
-  border-radius: 7px; font-size: 13px; color: var(--ink-2); cursor: pointer; font-family: inherit;
+.sl-export-menu button {
+  text-align: left; background: transparent; border: none; cursor: pointer;
+  font-size: 13px; font-family: inherit; color: var(--ink); padding: 8px 10px; border-radius: 7px;
 }
-.sh-export-menu button:hover { background: var(--line-soft); color: var(--ink); }
+.sl-export-menu button:hover { background: var(--surface-2, var(--brand-50)); color: var(--brand); }
+
+/* ── Sheet page: banner · grid · drawer ────────────────────────────────── */
+.sh-title { font-weight: 600; cursor: default; }
+.sh-banner-actions { display: flex; align-items: center; gap: 8px; }
+.sh-body { flex: 1; min-height: 0; display: flex; }
+.sh-grid { flex: 1; min-width: 0; background: var(--surface); }
 
-/* ── Template preview popup ─────────────────────────────────────────────── */
-.tpl-preview { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
-.tpl-preview-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
-.tpl-preview-h h3 { margin: 0 0 4px; font-size: 17px; }
-.tpl-preview-desc { margin: 0; color: var(--mute); font-size: 13px; }
-.tpl-preview-actions { display: flex; gap: 8px; flex-shrink: 0; }
-.tpl-preview-grid {
-  border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
-  max-height: 420px; display: flex; min-height: 0;
+.sh-notice {
+  padding: 8px 16px; font-size: 12.5px; color: var(--ink-2);
+  background: var(--warm-soft); border-bottom: 1px solid var(--line);
+}
+.sh-notice.warn { background: var(--hot-soft); }
+.sh-lock {
+  padding: 7px 16px; font-size: 12.5px; color: var(--brand-ink);
+  background: var(--brand-50); border-bottom: 1px solid var(--line);
+}
+
+.sh-empty {
+  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
+  gap: 8px; padding: 40px 24px; text-align: center; color: var(--mute);
+}
+.sh-empty .big { font-size: 15px; font-weight: 600; color: var(--ink); }
+.sh-empty-detail {
+  max-width: 560px; margin: 10px 0 0; padding: 10px 12px; text-align: left;
+  font-family: var(--mono); font-size: 12px; line-height: 1.5; color: var(--ink-2);
+  background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px;
+  white-space: pre-wrap; overflow-wrap: anywhere;
+}
+
+/* ── An agent cell ─────────────────────────────────────────────────────── */
+.hcell { display: flex; align-items: flex-start; gap: 6px; min-width: 0; width: 100%; }
+.hcell-txt {
+  min-width: 0; overflow: hidden; text-overflow: ellipsis;
+  display: -webkit-box; -webkit-box-orient: vertical;
+  -webkit-line-clamp: var(--shg-clamp, 1); line-clamp: var(--shg-clamp, 1);
+}
+.hcell.failed .hcell-txt { color: #B91C1C; }
+.hcell.skipped .hcell-txt { color: var(--mute-2); font-style: italic; }
+.hcell-live { color: var(--mute); font-size: 12px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+
+.hcell-dot { width: 7px; height: 7px; border-radius: 999px; flex: none; margin-top: 5px; }
+.hcell-dot.queued { background: var(--mute-2); }
+.hcell-dot.failed { background: #EF4444; }
+.hcell-spin {
+  width: 11px; height: 11px; flex: none; margin-top: 3px; border-radius: 999px;
+  border: 2px solid var(--brand-soft); border-top-color: var(--brand);
+  animation: shspin .8s linear infinite;
+}
+@keyframes shspin { to { transform: rotate(360deg); } }
+@media (prefers-reduced-motion: reduce) { .hcell-spin { animation-duration: 3s; } }
+
+.hcell-files { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 2px; }
+.hcell-file {
+  display: inline-flex; align-items: center; gap: 3px; max-width: 130px;
+  padding: 1px 5px; border-radius: 999px; font-size: 11px; white-space: nowrap;
+  overflow: hidden; text-overflow: ellipsis;
+  background: var(--brand-50); color: var(--brand-ink);
+}
+.hcell-file.more { background: var(--line-soft); color: var(--mute); }
+
+.hcell-tools { margin-left: auto; display: none; gap: 2px; flex: none; }
+.shg-cell:hover .hcell-tools { display: inline-flex; }
+.hcell-btn {
+  border: none; background: transparent; color: var(--mute); cursor: pointer;
+  padding: 2px; border-radius: 5px; line-height: 0;
+}
+.hcell-btn:hover { background: var(--line-soft); color: var(--brand); }
+
+/* ── Agent column config (inside the grid's column popover) ────────────── */
+.hc { display: flex; flex-direction: column; }
+.hc-prompt { resize: vertical; min-height: 84px; font-family: inherit; }
+.hc-note { font-size: 11.5px; color: var(--mute); line-height: 1.45; margin: 2px 0 6px; }
+.hc-bad { font-size: 11.5px; color: #B91C1C; line-height: 1.45; margin: 0 0 6px; }
+.hc-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0 0 8px; }
+.hc-chips-lbl { font-size: 11px; color: var(--mute); margin-right: 2px; }
+.hc-chip {
+  border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-2);
+  border-radius: 999px; padding: 2px 8px; font-size: 11px; font-family: var(--mono);
+  cursor: pointer; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.hc-chip:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-50); }
+.hc-reads {
+  font-size: 11.5px; color: var(--mute); line-height: 1.45;
+  border-top: 1px solid var(--line-soft); padding-top: 8px; margin-top: 2px;
+}
+.hc-reads b { color: var(--ink-2); font-weight: 600; }
+
+/* ── Run control ───────────────────────────────────────────────────────── */
+.run-wrap { position: relative; display: inline-flex; align-items: center; gap: 6px; }
+.run-go { border-top-right-radius: 0; border-bottom-right-radius: 0; padding-right: 9px; }
+.run-caret { border-top-left-radius: 0; border-bottom-left-radius: 0; padding: 0 7px; margin-left: -7px; border-left-color: rgba(255,255,255,.28); }
+.run-conc { opacity: .75; font-variant-numeric: tabular-nums; }
+.run-stop { color: #B91C1C; border-color: #FCA5A5; }
+.run-count { font-size: 12.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
+.run-failed { color: #B91C1C; }
+.run-bar { display: block; width: 96px; height: 4px; border-radius: 999px; background: var(--line); overflow: hidden; }
+.run-bar > span { display: block; height: 100%; background: var(--brand); transition: width .25s ease; }
+.run-last { font-size: 12px; color: var(--mute); }
+
+.run-menu {
+  position: absolute; top: calc(100% + 6px); right: 0; z-index: 30; width: 290px;
+  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
+  box-shadow: var(--shadow-2); padding: 5px; display: flex; flex-direction: column;
+}
+.run-menu > button {
+  text-align: left; background: transparent; border: none; cursor: pointer;
+  font-size: 13px; font-family: inherit; color: var(--ink); padding: 8px 10px; border-radius: 7px;
+}
+.run-menu > button:hover { background: var(--brand-50); color: var(--brand-ink); }
+.run-menu-sep { height: 1px; background: var(--line-soft); margin: 5px 0; }
+.run-menu-lbl { font-size: 11px; color: var(--mute); padding: 0 10px 4px; }
+.run-conc-row { display: flex; gap: 5px; padding: 0 10px 6px; }
+.run-conc-btn {
+  flex: 1; height: 28px; border: 1px solid var(--line); background: var(--surface);
+  border-radius: 7px; cursor: pointer; font-family: inherit; font-size: 12.5px; color: var(--ink-2);
+  font-variant-numeric: tabular-nums;
+}
+.run-conc-btn.on { border-color: var(--brand); background: var(--brand-50); color: var(--brand-ink); font-weight: 600; }
+.run-menu-note { margin: 0; padding: 4px 10px 6px; font-size: 11.5px; line-height: 1.45; color: var(--mute); }
+
+/* ── Cell drawer ───────────────────────────────────────────────────────── */
+.cd {
+  position: fixed; top: 0; right: 0; bottom: 0; width: min(560px, 92vw); z-index: 60;
+  display: flex; flex-direction: column;
+  background: var(--surface); border-left: 1px solid var(--line); box-shadow: var(--shadow-2);
+}
+.cd-h { display: flex; align-items: flex-start; gap: 8px; padding: 14px 14px 12px; border-bottom: 1px solid var(--line); }
+.cd-h-main { flex: 1; min-width: 0; font-size: 14px; }
+.cd-sub { font-size: 12px; color: var(--mute); margin-top: 3px; }
+.cd-body { flex: 1; min-height: 0; overflow: auto; padding: 14px; display: flex; flex-direction: column; gap: 12px; }
+.cd-text { font-size: 13.5px; line-height: 1.6; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
+.cd-note { font-size: 12.5px; color: var(--mute); }
+.cd-err {
+  font-size: 12.5px; color: #B91C1C; background: var(--hot-soft);
+  border: 1px solid #FCA5A5; border-radius: 8px; padding: 8px 10px;
+}
+.cd-arts h4 { margin: 0 0 8px; font-size: 12px; color: var(--mute); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
+.cd-art { border: 1px solid var(--line); border-radius: 9px; overflow: hidden; margin-bottom: 8px; }
+.cd-art-h { display: flex; align-items: center; gap: 8px; padding: 8px 10px; font-size: 12.5px; background: var(--surface-2); }
+.cd-art-h b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.cd-art-h a, .cd-art-h .linkish { margin-left: auto; }
+.cd-art-h a + .linkish, .cd-art-h .linkish + a { margin-left: 0; }
+.cd-art-size { color: var(--mute); font-variant-numeric: tabular-nums; }
+.cd-art-img { display: block; width: 100%; height: auto; }
+.cd-f { padding: 12px 14px; border-top: 1px solid var(--line); }
+.linkish { border: none; background: none; padding: 0; cursor: pointer; font: inherit; font-size: 12.5px; color: var(--brand); }
+.linkish:hover { text-decoration: underline; }
+
+/* ── Paste rows ────────────────────────────────────────────────────────── */
+.dlg.pr { width: min(760px, 94vw); }
+.pr-drop { border: 1px dashed var(--line); border-radius: 10px; padding: 12px; }
+.pr-drop.over { border-color: var(--brand); background: var(--brand-50); }
+.pr-text { font-family: var(--mono); font-size: 12.5px; resize: vertical; }
+.pr-or { display: flex; justify-content: center; margin-top: 10px; }
+.pr-sum { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--mute); margin-bottom: 10px; }
+.pr-sum .linkish { margin-left: auto; }
+.pr-table-wrap { max-height: 300px; overflow: auto; border: 1px solid var(--line); border-radius: 9px; }
+.pr-table { border-collapse: collapse; font-size: 12.5px; width: max-content; min-width: 100%; }
+.pr-table th { position: sticky; top: 0; background: var(--surface-2); text-align: left; padding: 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
+.pr-table td { padding: 6px 8px; border-bottom: 1px solid var(--line-soft); max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.pr-head { font-weight: 600; margin-bottom: 5px; }
+.pr-more { padding: 8px; font-size: 12px; color: var(--mute); }
+.pr-mode { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; font-size: 13px; }
+.pr-mode label { display: flex; align-items: center; gap: 7px; cursor: pointer; }
+.pr-warn { margin: 6px 0 0; font-size: 12px; color: #92400E; }
+
+/* ── Landing: hero + template cards + sheet table ──────────────────────── */
+.hero-sub { margin: 6px 0 18px; color: var(--mute); font-size: 14px; }
+.hero-box {
+  display: flex; align-items: flex-end; gap: 10px; padding: 12px;
+  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card);
+  box-shadow: var(--shadow-1);
+}
+.hero-input {
+  flex: 1; border: none; outline: none; resize: none; font: inherit; font-size: 15px;
+  line-height: 1.5; color: var(--ink); background: transparent;
+}
+.hero-go { flex: none; }
+
+.tpl-row { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 6px; }
+.tpl-card {
+  flex: 0 0 260px; text-align: left; cursor: pointer; padding: 0 0 12px;
+  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card);
+  box-shadow: var(--shadow-1); font-family: inherit; overflow: hidden;
+}
+.tpl-card:hover { border-color: var(--brand); }
+.tpl-grid { display: flex; gap: 3px; padding: 12px; background: var(--surface-2); border-bottom: 1px solid var(--line-soft); }
+.tpl-col {
+  flex: 1; min-width: 0; padding: 5px 6px; border-radius: 5px; font-size: 10.5px;
+  background: var(--surface); border: 1px solid var(--line);
+  color: var(--mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.tpl-col.agent { background: var(--brand-50); border-color: var(--brand-soft); color: var(--brand-ink); }
+.tpl-name { padding: 10px 12px 2px; font-size: 13.5px; font-weight: 600; color: var(--ink); }
+.tpl-sub { padding: 0 12px; font-size: 12px; line-height: 1.45; color: var(--mute); }
+.tpl-badge { display: block; margin-top: 6px; font-size: 11px; color: var(--brand-ink); }
+
+.sheet-link { display: inline-flex; align-items: center; gap: 7px; color: var(--ink); text-decoration: none; font-weight: 500; }
+.sheet-link:hover { color: var(--brand); }
+.gtable td.mute { color: var(--mute); }
+.gtable td.row-actions { width: 48px; text-align: right; }
+
+/* ── Narrow widths ─────────────────────────────────────────────────────── */
+@media (max-width: 1180px) { .run-bar { display: none; } }
+@media (max-width: 900px) {
+  .gp-root { flex-direction: column; }
+  /* The copilot becomes a bottom sheet rather than a squeezed column: below this width a
+     300px pane leaves the grid too narrow to read a single agent answer. */
+  .gp-chat { flex: 0 0 46vh !important; width: auto; border-left: none; border-top: 1px solid var(--line); }
+  .run-last { display: none; }
+  .sh-banner-actions .btn span { display: none; }
+  .cd { width: 100vw; }
+}
+@media (max-width: 620px) {
+  .gp-banner .wm-text { display: none; }
+  .sh-title { max-width: 40vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .sl-save-chip { display: none; }
+  .tpl-card { flex-basis: 78vw; }
 }
-.tpl-preview-grid .shg { width: 100%; }
-.tpl-preview-note { margin: 0; font-size: 12px; color: var(--mute-2); }
diff --git a/kits/sheets/app/src/styles/tokens.css b/kits/sheets/app/src/styles/tokens.css
index db5590c..a4221fc 100644
--- a/kits/sheets/app/src/styles/tokens.css
+++ b/kits/sheets/app/src/styles/tokens.css
@@ -43,6 +43,26 @@
   --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
 }
 
+/* The shared components (the grid, the chat surface, the dialogs) read --uic-* tokens. Mapping
+   them here is the single place this app's palette meets the library's: set a token once and the
+   grid, the conversation and the dialogs all follow. */
+:root {
+  --uic-surface: var(--surface);
+  --uic-surface-2: var(--surface-2);
+  --uic-line: var(--line);
+  --uic-line-soft: var(--line-soft);
+  --uic-ink: var(--ink);
+  --uic-ink-2: var(--ink-2);
+  --uic-mute: var(--mute);
+  --uic-mute-2: var(--mute-2);
+  --uic-brand: var(--brand);
+  --uic-brand-ink: var(--brand-ink);
+  --uic-brand-soft: var(--brand-soft);
+  --uic-brand-faint: var(--brand-50);
+  --uic-fail-bg: var(--hot-soft);
+  --uic-mono: var(--mono);
+}
+
 * { box-sizing: border-box; }
 html, body { margin: 0; padding: 0; }
 body { font-family: var(--font); color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; }
diff --git a/kits/sheets/app/vite.config.js b/kits/sheets/app/vite.config.js
index b2a028c..7735590 100644
--- a/kits/sheets/app/vite.config.js
+++ b/kits/sheets/app/vite.config.js
@@ -1,10 +1,22 @@
+import { copyFileSync, mkdirSync } from 'node:fs';
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 
+// The template library is kit data, not app data — it lives at kits/sheets/templates/ and is the
+// one copy. Staging it into public/ at build time is what makes it reachable at
+// /kits/sheets/templates.json without committing a second copy of it.
+const stageTemplates = {
+  name: 'stage-templates',
+  buildStart() {
+    mkdirSync('public', { recursive: true });
+    copyFileSync('../templates/templates.json', 'public/templates.json');
+  },
+};
+
 // Served from the HarnessRouter image at /kits/sheets (see docker/install-kits.sh), so assets
 // must be requested from there rather than from the root.
 export default defineConfig({
   base: '/kits/sheets/',
-  plugins: [react()],
+  plugins: [react(), stageTemplates],
   build: { outDir: 'dist', emptyOutDir: true },
 });
diff --git a/kits/sheets/kit.json b/kits/sheets/kit.json
index 6ed4a43..d94c601 100644
--- a/kits/sheets/kit.json
+++ b/kits/sheets/kit.json
@@ -2,7 +2,7 @@
   "id": "sheets",
   "title": "Sheets",
   "tagline": "A spreadsheet where a column can be an agent.",
-  "description": "Rows are your data; a harness column runs one of your agents on every row. Point a column at a Harness, build its input from the columns before it, and press Run — the sheet works down the dependency order and fills each cell with what the agent said and made. Everything stays in one file you and the agent both edit.",
+  "description": "Rows are your data; an agent column runs one of your other agents on every row. Point a column at an agent, build its input from the columns before it, and press Run — the sheet works left to right and fills each cell with what the agent said and made. Everything lives in one file you and the agent both edit.",
   "icon": "tabler:table",
   "accent": "#0F9D76",
   "harness": {
@@ -12,9 +12,18 @@
       { "base": "codex", "model": "gpt-5.4-mini" },
       { "base": "claude-code", "model": "claude-opus-5" }
     ],
-    "system_prompt": "You build and edit spreadsheets.\n\nTHE FILE: ./sheet.json, in your current working directory. That exact path, always. Do not search for it, do not look elsewhere in the tree, and do not treat its absence as a puzzle — on a new sheet it simply does not exist yet and you create it there. It is the single source of truth and the only file the app reads.\n\nRead it before every change and write it back whole. Its schema, and the mistakes that make a sheet fail to load, are in the sheet-design skill — read that skill first, on every request, and validate with its validate_sheet.py before you finish.\n\nA column may be a HARNESS column: it runs another agent once per row. You may configure such a column, but you never execute it — the app runs those, and it will not let a sheet run itself.\n\nWork directly. Every command you spend orienting is a command the person waits through.",
+    "system_prompt": "You build and edit spreadsheets.\n\nTHE FILE: ./sheet.json, in your current working directory. That exact path, always. Do not search for it, do not look elsewhere in the tree, and do not treat its absence as a puzzle — on a new sheet it simply does not exist yet and you create it there. It is the single source of truth and the only file the app reads.\n\nRead it before every change and write it back WHOLE — the person may have edited the grid between turns. Its schema, and the mistakes that make a sheet fail to load, are in the sheet-design skill: read that skill first, on every request, and validate with its validate_sheet.py before you finish.\n\nA column may be an AGENT column (type \"harness\"): it runs one of the person's other agents once per row. You may create and configure such a column, but you NEVER execute one and you never invent an agent id — you cannot see the list. Leave harness_id as \"\" and tell the person to pick the agent in the column menu. The app runs those columns, and it will not let a sheet run itself.\n\nCells in an agent column carry results the app produced — status, session_id, response_id, artifacts. Never write them and never delete them unless you are asked to clear that column; you cannot recompute them.\n\nWork directly. Every command you spend orienting is a command the person waits through.",
     "skills": ["sheet-design"]
   },
-  "app": { "dir": "app", "dist": "dist", "route": "/kits/sheets" },
-  "session": { "artifacts_by": "thread" }
+  "app": {
+    "dir": "app",
+    "build": "npm ci && npm run build",
+    "dist": "dist",
+    "route": "/kits/sheets"
+  },
+  "session": {
+    "$comment": "One session is one sheet. The app lists this harness's sessions as the sheet list.",
+    "artifact": "sheet.json",
+    "title_from": "meta.title"
+  }
 }
diff --git a/kits/sheets/skills/sheet-design/SKILL.md b/kits/sheets/skills/sheet-design/SKILL.md
new file mode 100644
index 0000000..7a127d1
--- /dev/null
+++ b/kits/sheets/skills/sheet-design/SKILL.md
@@ -0,0 +1,117 @@
+---
+name: sheet-design
+description: How to build a working sheet — the exact sheet.json contract, and how to design columns as a left-to-right pipeline where an agent column runs another agent once per row. Use for EVERY sheet request, before writing anything.
+---
+
+# Sheet design
+
+You are designing a pipeline that happens to look like a spreadsheet.
+
+## The file you are writing
+
+There are no sheet tools here. A sheet is ONE file — `sheet.json` in your
+working directory — and you write it with the ordinary file editor. Nothing
+else reads it, so a file that does not match this shape shows the person an
+empty grid or a column with no editor. Match it exactly.
+
+```json
+{
+  "meta": { "schema": 1, "title": "Competitor scan" },
+  "columns": [
+    { "id": "col_company", "name": "Company", "type": "text", "width": 200 },
+    { "id": "col_site",    "name": "Site",    "type": "url",  "width": 240 },
+    { "id": "col_brief",   "name": "Brief",   "type": "harness", "width": 380,
+      "harness": {
+        "harness_id": "",
+        "prompt": "Read {{Site}} and write three sentences on {{Company}}: what they sell, who to, and how they price. Put your full notes in notes.md.",
+        "attach": []
+      } },
+    { "id": "col_fit", "name": "Overlap", "type": "harness", "width": 300,
+      "harness": {
+        "harness_id": "",
+        "prompt": "Score 1-5 how directly this company competes with us, then one line of why.\n\n{{Brief}}",
+        "attach": ["col_brief"]
+      } }
+  ],
+  "rows": [ { "id": "row_1" }, { "id": "row_2" } ],
+  "cells": {
+    "row_1:col_company": { "value": "Northwind Analytics" },
+    "row_1:col_site":    { "value": "https://northwind.example" }
+  }
+}
+```
+
+Non-negotiable, because each of these breaks silently:
+
+- **`cells` is keyed `"<rowId>:<colId>"`**, using ids that exist in `rows` and
+  `columns`. A key containing a column *name* renders nothing at all.
+- **A cell is an object** — `{"value": …}` — never a bare value at the key.
+- **Column names are unique.** Agent columns address columns as `{{Name}}`, and
+  a duplicate makes that ambiguous.
+- **`{{Name}}` may only name a column EARLIER in `columns`.** The array order
+  is the execution order. A forward reference makes the run refuse to start.
+- **`type` is one of** `text` `number` `select` `tags` `checkbox` `date` `url`
+  `harness`. Anything else loses its editor.
+- **Only a `harness` column carries a `harness` object**, and only it can be run.
+- **`harness_id` is `""`** unless the person gave you a real one. You cannot see
+  the list of agents, and an invented id silently runs the wrong agent. Write
+  `""` and tell the person to pick it in the column menu.
+- **Never write `status`, `run_id`, `response_id`, `session_id` or `artifacts`
+  into a cell, and never invent a `run` block.** Those are results the app
+  produced. Writing them makes the sheet claim a run that never happened; you
+  cannot recompute them, and deleting them throws away the link to real work.
+- **Ids are stable.** Reuse them when you edit; never renumber a sheet.
+- **`meta.schema` is `1`.**
+
+Read `sheet.json` before every change and write it back WHOLE. The person may
+have edited the grid between your turns, and a partial write loses their work.
+
+## What you do and do not run
+
+An agent column runs one of the person's OTHER agents, once per row. You create
+and configure such columns. **You never execute one.** The app runs them, from
+the browser, in dependency order — and it will not let a sheet run itself, so
+there is no id you could put there that would work.
+
+## Designing the columns
+
+The columns are a pipeline, left to right: **identify → gather → judge.**
+
+- **One agent column does one thing.** A column that researches AND scores
+  fails as one unit and re-runs as one unit, at full cost. Two columns fail and
+  re-run independently, and the person can see which step went wrong.
+- **Ask for one thing, and say how long.** A cell is a table cell. "Three
+  sentences", "a score 1-5 and one line of why" — not "analyse this company".
+- **Long output goes in a file.** Tell the agent to write the detail to a file
+  and summarise it in a sentence or two. The app shows the file beside the text,
+  and the next column can attach it with `attach`.
+- **A manual column the person fills beats an agent column that guesses.** If
+  the value is known, make it a `text` column and let them paste it in.
+- **Short, distinct, human column names.** Those names are the vocabulary every
+  agent column interpolates against.
+- **Start with a few rows.** The person adds theirs by pasting; twenty rows of
+  invented example data is twenty rows they have to delete.
+
+## Review pass (mandatory)
+
+From your working directory:
+
+```
+python3 "$(ls .claude/skills/sheet_design/validate_sheet.py \
+              .harness/skills/sheet_design/validate_sheet.py 2>/dev/null | head -1)" sheet.json
+```
+
+Both paths are real — which one exists depends on which backend you are running
+on. The directory is `sheet_design` with an underscore.
+
+It prints the exact path of anything that will break, and what to write instead.
+**Fix and re-run until it exits clean.** A sheet that fails this shows the
+person an empty grid, and you cannot see that from here.
+
+Then reread what you wrote, as the person who has to run it:
+- Is every `{{Name}}` a column to its left?
+- Does each agent column ask for one thing, in a cell-sized answer?
+- Would you know, from the column names alone, what this sheet is for?
+
+Finally, tell the person in one line what to do next — usually: pick the agent
+for each agent column in its ⋯ menu, paste their rows, and press Run.
diff --git a/kits/sheets/skills/sheet-design/validate_sheet.py b/kits/sheets/skills/sheet-design/validate_sheet.py
new file mode 100644
index 0000000..fb97ebb
--- /dev/null
+++ b/kits/sheets/skills/sheet-design/validate_sheet.py
@@ -0,0 +1,267 @@
+#!/usr/bin/env python3
+"""Check sheet.json against the contract the app actually enforces.
+
+A sheet that is wrong in the wrong way does not fail loudly — it shows the
+person an empty grid, or a column with no editor, or a cell that renders
+nothing. The agent cannot see that from inside the turn. That is what this
+exists for: run it after every write, and fix what it prints until it exits 0.
+
+Every rule here mirrors a real branch in the app (`app/src/lib/model.js`
+validate(), and the planner in `app/src/lib/run.js`). If a rule below and the
+app ever disagree, the app is right and this file is the bug.
+
+    python3 validate_sheet.py [sheet.json]
+
+Exit 0 = the sheet loads and can run. Exit 1 = something is broken.
+"""
+import json
+import re
+import sys
+
+TYPES = {"text", "number", "select", "tags", "checkbox", "date", "url", "harness"}
+STATUSES = {"queued", "running", "done", "failed", "skipped"}
+APP_OWNED = ("status", "run_id", "response_id", "session_id", "artifacts", "started_at", "ended_at")
+CHRN = re.compile(r"^chrn_[0-9a-f]{32}$")
+REF = re.compile(r"\{\{\s*([^}]+?)\s*\}\}")
+
+errors: list[str] = []
+warnings: list[str] = []
+
+
+def err(where: str, what: str, fix: str) -> None:
+    errors.append(f"{where}: {what}\n    → {fix}")
+
+
+def warn(where: str, what: str, fix: str) -> None:
+    warnings.append(f"{where}: {what}\n    → {fix}")
+
+
+def refs(prompt: object) -> list[str]:
+    out: list[str] = []
+    for m in REF.finditer(str(prompt or "")):
+        if m.group(1) not in out:
+            out.append(m.group(1))
+    return out
+
+
+def check_columns(columns: list) -> dict:
+    """Returns {lowercased name: index} for the columns that named themselves."""
+    by_name: dict[str, int] = {}
+    seen_ids: set[str] = set()
+    for i, c in enumerate(columns):
+        at = f"columns[{i}]"
+        if not isinstance(c, dict):
+            err(at, "is not an object", 'every column is {"id": …, "name": …, "type": …}')
+            continue
+        cid = c.get("id")
+        if not cid:
+            err(at, "has no id", 'give it a stable id like "col_a1b2c3d4"')
+        elif cid in seen_ids:
+            err(at, f'repeats the id "{cid}"', "ids must be unique across columns")
+        else:
+            seen_ids.add(cid)
+
+        name = str(c.get("name") or "").strip()
+        if not name:
+            err(at, "has no name", "every column needs a short, human name")
+        elif name.lower() in by_name:
+            err(at, f'repeats the name "{name}"',
+                "column names must be unique — agent prompts address columns as {{Name}}, "
+                "and a duplicate makes that ambiguous")
+        else:
+            by_name[name.lower()] = i
+
+        if c.get("type") not in TYPES:
+            err(at, f"has type {json.dumps(c.get('type'))}", f"use one of: {' '.join(sorted(TYPES))}")
+
+        if c.get("type") in ("select", "tags") and "options" in c and not isinstance(c["options"], list):
+            err(f"{at}.options", "is not an array", 'write "options": ["Todo", "Doing", "Done"]')
+    return by_name
+
+
+def check_harness(columns: list, by_name: dict) -> None:
+    for i, c in enumerate(columns):
+        if not isinstance(c, dict):
+            continue
+        at = f"columns[{i}]"
+        is_agent = c.get("type") == "harness"
+        cfg = c.get("harness")
+
+        if is_agent and not isinstance(cfg, dict):
+            err(at, 'is an agent column with no "harness" object',
+                'add "harness": {"harness_id": "", "prompt": "…", "attach": []}')
+            continue
+        if not is_agent and cfg is not None:
+            err(at, 'carries a "harness" object but is not an agent column',
+                'either set "type": "harness" or delete the harness object')
+            continue
+        if not is_agent:
+            continue
+
+        hid = cfg.get("harness_id", "")
+        if hid != "" and not CHRN.match(str(hid)):
+            err(f"{at}.harness.harness_id", f"is {json.dumps(hid)}",
+                'leave it "" unless you were given a real agent id — you cannot see the list, '
+                "and an invented id silently runs the wrong agent")
+
+        prompt = str(cfg.get("prompt") or "")
+        if not prompt.strip():
+            err(f"{at}.harness.prompt", "is empty",
+                "an agent column needs a prompt; it is what runs on every row")
+        elif not refs(prompt):
+            warn(f"{at}.harness.prompt", "references no columns",
+                 "without a {{Column}} reference every row gets the same input, "
+                 "so every row gets the same answer")
+
+        known = ", ".join(str(columns[j].get("name")) for j in range(i)) or "(none — this is the first column)"
+        for name in refs(prompt):
+            j = by_name.get(name.strip().lower())
+            if j is None:
+                err(f"{at}.harness.prompt", f"references {{{{{name}}}}}, which is not a column",
+                    f"columns to its left are: {known}")
+            elif j >= i:
+                err(f"{at}.harness.prompt", f"references {{{{{name}}}}}, which is not to its left",
+                    f'move "{columns[j].get("name")}" before "{c.get("name")}" — '
+                    "a column can only read columns earlier in the sheet")
+
+        attach = cfg.get("attach") or []
+        if not isinstance(attach, list):
+            err(f"{at}.harness.attach", "is not an array", 'write "attach": []')
+            continue
+        for a in attach:
+            hit = next((k for k, x in enumerate(columns) if isinstance(x, dict) and x.get("id") == a), None)
+            if hit is None:
+                err(f"{at}.harness.attach", f'names "{a}", which is not a column id', "attach only real column ids")
+            elif hit >= i:
+                err(f"{at}.harness.attach", f'attaches "{columns[hit].get("name")}", which is not to its left',
+                    "a column can only attach files from columns earlier in the sheet")
+            elif columns[hit].get("type") != "harness":
+                err(f"{at}.harness.attach", f'attaches "{columns[hit].get("name")}", which is not an agent column',
+                    "only agent columns produce files — reference a plain column as {{Name}} instead")
+
+
+def check_cells(sheet: dict, columns: list, row_ids: set) -> None:
+    cells = sheet.get("cells")
+    if cells is None:
+        return
+    if not isinstance(cells, dict):
+        err("cells", "is not an object", 'write "cells": {"<rowId>:<colId>": {"value": …}}')
+        return
+    by_id = {c.get("id"): c for c in columns if isinstance(c, dict)}
+    for key, cell in cells.items():
+        at = f'cells["{key}"]'
+        parts = key.split(":")
+        if len(parts) != 2 or not parts[0] or not parts[1]:
+            err(at, 'is not a "<rowId>:<colId>" key', "join the row id and the column id with one colon")
+            continue
+        row_ref, col_ref = parts
+        if row_ref not in row_ids:
+            err(at, f'names row "{row_ref}", which does not exist', "use an id from rows[]")
+        col = by_id.get(col_ref)
+        if col is None:
+            err(at, f'names column "{col_ref}", which does not exist',
+                "use an id from columns[] — a column NAME here renders nothing")
+            continue
+        if not isinstance(cell, dict):
+            err(at, "is not an object", 'write {"value": …} — never a bare value at the key')
+            continue
+
+        if col.get("type") != "harness":
+            owned = [f for f in APP_OWNED if f in cell]
+            if owned:
+                err(at, f"carries {', '.join(owned)} in a plain column",
+                    "only agent cells carry run state, and only the app writes it")
+        else:
+            st = cell.get("status")
+            if st is not None and st not in STATUSES:
+                err(f"{at}.status", f"is {json.dumps(st)}", f"use one of: {' '.join(sorted(STATUSES))}")
+            if bool(cell.get("run_id")) != bool(cell.get("session_id")) and (cell.get("run_id") or cell.get("session_id")):
+                err(at, "has one of run_id / session_id but not the other",
+                    "both come from a real run — delete them, or leave the cell out entirely")
+
+        if col.get("type") == "checkbox" and "value" in cell and not isinstance(cell["value"], bool):
+            warn(at, "is a checkbox holding a non-boolean", "write true or false")
+        if col.get("type") == "number" and cell.get("value") is not None \
+                and "value" in cell and not isinstance(cell["value"], (int, float)):
+            warn(at, "is a number column holding a non-number", "write the value as a number, not a string")
+        opts = col.get("options")
+        if col.get("type") in ("select", "tags") and isinstance(opts, list) and opts:
+            labels = {o if isinstance(o, str) else o.get("label") for o in opts}
+            vals = cell.get("value") if col["type"] == "tags" else cell.get("value")
+            vals = vals if isinstance(vals, list) else ([vals] if vals not in (None, "") else [])
+            for v in vals:
+                if v not in labels:
+                    warn(at, f'holds "{v}", which is not one of the column\'s options',
+                         "add it to options, or use one of the existing ones")
+
+
+def main() -> int:
+    path = sys.argv[1] if len(sys.argv) > 1 else "sheet.json"
+    try:
+        raw = open(path, encoding="utf-8").read()
+    except OSError as e:
+        print(f"cannot read {path}: {e}")
+        return 1
+    try:
+        sheet = json.loads(raw)
+    except json.JSONDecodeError as e:
+        # A truncated or half-escaped write is the other way a sheet dies, and the line and column
+        # are the whole diagnosis.
+        print(f"{path} is not valid JSON: {e.msg} at line {e.lineno}, column {e.colno}")
+        print("    → rewrite the file whole; a partial write leaves it unparseable")
+        return 1
+
+    if not isinstance(sheet, dict):
+        print(f"{path}: the file is not a JSON object")
+        return 1
+
+    if sheet.get("meta", {}).get("schema") != 1:
+        err("meta.schema", f"is {json.dumps(sheet.get('meta', {}).get('schema'))}",
+            'set "schema": 1 — the app refuses anything else rather than guessing')
+
+    columns = sheet.get("columns")
+    rows = sheet.get("rows")
+    if not isinstance(columns, list):
+        err("columns", "is missing or not an array", 'write "columns": []')
+        columns = []
+    if not isinstance(rows, list):
+        err("rows", "is missing or not an array", 'write "rows": []')
+        rows = []
+
+    by_name = check_columns(columns)
+    check_harness(columns, by_name)
+
+    row_ids: set = set()
+    for i, r in enumerate(rows):
+        rid = r.get("id") if isinstance(r, dict) else None
+        if not rid:
+            err(f"rows[{i}]", "has no id", 'give it a stable id like "row_a1b2c3d4"')
+        elif rid in row_ids:
+            err(f"rows[{i}]", f'repeats the id "{rid}"', "ids must be unique across rows")
+        else:
+            row_ids.add(rid)
+
+    check_cells(sheet, columns, row_ids)
+
+    if sheet.get("run"):
+        for cid in sheet["run"].get("columns", []):
+            if not any(isinstance(c, dict) and c.get("id") == cid for c in columns):
+                warn("run.columns", f'names column "{cid}", which no longer exists',
+                     "leave it — the run header simply counts one column fewer")
+
+    if len(raw.encode("utf-8")) > 2 * 1024 * 1024:
+        warn(path, "is over 2 MB", "trim long agent answers; the app caps what it stores per cell")
+
+    for w in warnings:
+        print(f"warning  {w}")
+    for e in errors:
+        print(f"ERROR    {e}")
+    if errors:
+        print(f"\n{len(errors)} problem(s) will break this sheet. Fix them and run this again.")
+        return 1
+    print(f"{path}: OK" + (f" ({len(warnings)} warning(s))" if warnings else ""))
+    return 0
+
+
+if __name__ == "__main__":
+    sys.exit(main())
diff --git a/kits/sheets/templates/templates.json b/kits/sheets/templates/templates.json
new file mode 100644
index 0000000..ecb074e
--- /dev/null
+++ b/kits/sheets/templates/templates.json
@@ -0,0 +1,92 @@
+{
+  "$comment": [
+    "Starter sheets. Each one is a real sheet.json (schema 1) with placeholder ids that the app",
+    "re-mints per sheet, so two sheets made from one template never share a cell key.",
+    "",
+    "Agent columns ship with harness_id: \"\" on purpose. A template cannot know which agents a",
+    "workspace has, and inventing an id would silently run the wrong agent — the app opens that",
+    "column's settings on first load and asks which one to use.",
+    "",
+    "`brief` is what the agent is told about the template on the first turn. It is style and",
+    "intent, not schema: the schema lives in the sheet-design skill, where it costs nothing per",
+    "turn and applies to every turn rather than only the first."
+  ],
+  "templates": [
+    {
+      "id": "competitor-scan",
+      "name": "Competitor scan",
+      "description": "One row per company; an agent reads each site and a second one scores the overlap.",
+      "brief": "A research pipeline read left to right: the person fills in the company and its site, one agent writes a short brief from the site, and a second agent judges how directly it competes. Keep the agent answers to a couple of sentences each.",
+      "sheet": {
+        "meta": { "schema": 1, "title": "Competitor scan" },
+        "columns": [
+          { "id": "c_company", "name": "Company", "type": "text", "width": 200 },
+          { "id": "c_site", "name": "Site", "type": "url", "width": 230 },
+          {
+            "id": "c_brief", "name": "Brief", "type": "harness", "width": 380,
+            "harness": {
+              "harness_id": "",
+              "prompt": "Read {{Site}} and write a three-sentence brief on {{Company}}: what they sell, who they sell it to, and how they price it. Put your full notes in notes.md.",
+              "attach": []
+            }
+          },
+          {
+            "id": "c_fit", "name": "Overlap", "type": "harness", "width": 300,
+            "harness": {
+              "harness_id": "",
+              "prompt": "Score 1-5 how directly this company competes with us, then one line of why.\n\n{{Brief}}",
+              "attach": ["c_brief"]
+            }
+          }
+        ],
+        "rows": [{ "id": "r1" }, { "id": "r2" }, { "id": "r3" }, { "id": "r4" }, { "id": "r5" }],
+        "cells": {}
+      }
+    },
+    {
+      "id": "inbound-triage",
+      "name": "Inbound triage",
+      "description": "Paste a batch of requests; an agent summarises each one and suggests the next step.",
+      "brief": "A triage list. The person pastes raw inbound text one row at a time; one agent turns each into a one-line summary plus a suggested next step, and a Stage column tracks what happened. Keep it to two columns of agent work at most.",
+      "sheet": {
+        "meta": { "schema": 1, "title": "Inbound triage" },
+        "columns": [
+          { "id": "c_from", "name": "From", "type": "text", "width": 180 },
+          { "id": "c_msg", "name": "Message", "type": "text", "width": 380 },
+          {
+            "id": "c_tri", "name": "Triage", "type": "harness", "width": 340,
+            "harness": {
+              "harness_id": "",
+              "prompt": "Summarise this request in one line, then say in one more line what the next step should be.\n\nFrom: {{From}}\n\n{{Message}}",
+              "attach": []
+            }
+          },
+          {
+            "id": "c_stage", "name": "Stage", "type": "select", "width": 140,
+            "options": ["New", "Replied", "Waiting", "Closed"]
+          }
+        ],
+        "rows": [{ "id": "r1" }, { "id": "r2" }, { "id": "r3" }, { "id": "r4" }, { "id": "r5" }],
+        "cells": {}
+      }
+    },
+    {
+      "id": "reading-list",
+      "name": "Reading list",
+      "description": "Links in, summaries out — no agent column until you add one.",
+      "brief": "A plain working list: a link, why it matters, and a status. No agent columns — this one is for someone who wants to get material in first and decide later what to run over it.",
+      "sheet": {
+        "meta": { "schema": 1, "title": "Reading list" },
+        "columns": [
+          { "id": "c_title", "name": "Title", "type": "text", "width": 280 },
+          { "id": "c_url", "name": "Link", "type": "url", "width": 260 },
+          { "id": "c_why", "name": "Why it matters", "type": "text", "width": 320 },
+          { "id": "c_tags", "name": "Tags", "type": "tags", "width": 180 },
+          { "id": "c_read", "name": "Read", "type": "checkbox", "width": 90 }
+        ],
+        "rows": [{ "id": "r1" }, { "id": "r2" }, { "id": "r3" }, { "id": "r4" }, { "id": "r5" }, { "id": "r6" }],
+        "cells": {}
+      }
+    }
+  ]
+}

From 2fea97fba6d9418d0a93aeacb47a991ae08b291c Mon Sep 17 00:00:00 2001
From: richard-epsilla <richard@epsilla.com>
Date: Thu, 13 Aug 2026 04:12:38 -0700
Subject: [PATCH 3/5] =?UTF-8?q?fix(sheets):=20what=20the=20live=20run=20fo?=
 =?UTF-8?q?und=20=E2=80=94=20five=20defects,=20each=20one=20a=20lie=20the?=
 =?UTF-8?q?=20UI=20told?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Built the kit end to end on a real instance and every one of these came from watching it, not
from reading it.

1. "completed" is not the answer. A cell recorded "The agent finished without answering." over a
   turn that answered perfectly well and wrote a file. Reproduced twice on the box: a background
   response reports status "completed" — and the session reports turn_status "done" — about two
   seconds BEFORE its output items are written. Neither signal is trustworthy alone and there is
   no third to consult; the record IS the answer. A terminal-but-empty response now gets a
   bounded grace window and takes whatever turns up, which costs nothing on the normal path.

2. A skipped upstream did not cascade. Only failures did, so a cell whose dependency was skipped
   was never dispatched AND never recorded: the run reported six planned, five settled, and the
   sixth cell simply blank. Skips cascade now, with their own wording, and any planned cell still
   without a state when the walk ends is closed out — planned and settled always agree.

3. The sheet page showed the person a validation error about its own correct output: a skipped
   cell legitimately has a run_id and no session_id, and the rule demanded both. Only a cell that
   claims to have RUN needs both halves.

4. "Company and Company are empty in this row." — the missing-column list pushed a name once per
   {{occurrence}} rather than once per column.

5. Counters were written only when a run ended, so a tab reopened mid-run read a file claiming
   zero done over four finished cells.

Also, two places where I had added a second mechanism beside one that already worked, which is
the thing this project keeps paying to delete:

- The copilot already becomes a dismissable drawer below 900px. I added a bottom-sheet scheme on
  top of it; mine lost, silently, and the banner actions ended up underneath the panel. Deleted,
  and the collapse toggle the existing CSS is written for is back.
- The landing page used class names — .land, .sec, .hero-box — that this stylesheet does not
  define, so it rendered with no page gutters and its own second prompt box. It uses .landing,
  .section and .promptbox now, like every other page here.

Verified through the UI on the test instance: a template start writes a valid sheet.json and the
agent's own validator passes it; two agent columns configured against two different harnesses;
three rows pasted; Run at 3 → 4 done, 1 skipped, 33s. The decisive one is the second column's
value — "NOTES-FOR-Northwind Analytics" — a string that exists only inside the file the FIRST
column's agent wrote, read by a different agent from the attachment. CSV, XLSX and the run JSON
all produce real bytes; the run JSON carries the session reference of every cell that ran. Asking
the copilot to add a column locks the grid, adds it, and leaves every run result intact.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_013DCjqvx3L4VKAPnFaPe7YJ
---
 kits/sheets/app/src/components/ChatPanel.jsx  | 21 ++++++++-
 kits/sheets/app/src/lib/cell.js               | 37 +++++++++++++---
 kits/sheets/app/src/lib/model.js              | 13 ++++--
 kits/sheets/app/src/lib/model.test.mjs        | 16 ++++++-
 kits/sheets/app/src/lib/run.js                | 21 +++++++--
 kits/sheets/app/src/lib/run.test.mjs          | 21 +++++++++
 kits/sheets/app/src/pages/Landing.jsx         | 44 ++++++++++++-------
 kits/sheets/app/src/pages/SheetPage.jsx       | 27 +++++++++---
 kits/sheets/app/src/styles/app.css            | 36 +++++----------
 .../skills/sheet-design/validate_sheet.py     |  7 ++-
 10 files changed, 178 insertions(+), 65 deletions(-)

diff --git a/kits/sheets/app/src/components/ChatPanel.jsx b/kits/sheets/app/src/components/ChatPanel.jsx
index 91895ef..9d4e0f6 100644
--- a/kits/sheets/app/src/components/ChatPanel.jsx
+++ b/kits/sheets/app/src/components/ChatPanel.jsx
@@ -33,7 +33,8 @@ function stripSeedFromHash() {
 
 const history = (id) => (isPending(id) ? Promise.resolve([]) : sessionTurns(id));
 
-export function ChatColumn({ sheetId, seed, title, agentBusy, onSheetMaybeChanged, onSessionStarted, width }) {
+export function ChatColumn({ sheetId, seed, title, agentBusy, onSheetMaybeChanged, onSessionStarted,
+                             width, collapsed, onToggle }) {
   const [messages, setMessages] = useState([]);
   const [draft, setDraft] = useState('');
   const [busy, setBusy] = useState(false);
@@ -168,12 +169,28 @@ export function ChatColumn({ sheetId, seed, title, agentBusy, onSheetMaybeChange
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [agentBusy, messages.length, busy]);
 
+  if (collapsed) {
+    return (
+      <aside className="gp-chat collapsed">
+        <div className="gp-chat-h">
+          <button className="top-side-toggle" type="button" onClick={onToggle}
+                  title="Show the copilot" aria-label="Show the copilot">
+            <PanelRight size={17} />
+          </button>
+        </div>
+      </aside>
+    );
+  }
+
   const empty = messages.length === 0;
 
   return (
     <aside className="gp-chat" style={width ? { flex: `0 0 ${width}px` } : undefined}>
       <div className="gp-chat-h">
-        <PanelRight size={16} className="gp-chat-ic" aria-hidden="true" />
+        <button className="top-side-toggle" type="button" onClick={onToggle}
+                title="Hide the copilot" aria-label="Hide the copilot">
+          <PanelRight size={17} />
+        </button>
         <span className="gp-chat-title" title={title || undefined}>{title || 'Copilot'}</span>
         {agentBusy && <span className="gp-chat-cop" title="The agent is working"><Sparkles size={12} /></span>}
         {connecting && <span className="stat-lbl">connecting</span>}
diff --git a/kits/sheets/app/src/lib/cell.js b/kits/sheets/app/src/lib/cell.js
index 3229510..b3f3026 100644
--- a/kits/sheets/app/src/lib/cell.js
+++ b/kits/sheets/app/src/lib/cell.js
@@ -12,6 +12,16 @@ import { cancelResponse, containerFileUrl, createResponse, getResponse, patchSes
 import { VALUE_MAX, interpolate } from './model.js';
 
 const POLL_MS = 2000;
+/** How long a terminal-but-empty response is given to produce its own content.
+ *
+ *  Measured on a live instance: a turn reports status "completed" — and the session reports
+ *  turn_status "done" — about two seconds BEFORE its output items are written. Believing either
+ *  signal on its own records "the agent finished without answering" over a turn that answered
+ *  perfectly well, which is the worst kind of wrong: it looks like a model failure and it costs a
+ *  re-run to disprove. There is no third signal to consult; the record IS the answer, so the only
+ *  honest rule is to wait for it, bounded. Costs nothing on the normal path — the loop exits the
+ *  instant content appears. */
+const SETTLE_MS = 15000;
 /** Refuse an attachment larger than the API accepts rather than truncating a file silently. */
 const FILE_MAX = 25 * 1024 * 1024;
 
@@ -167,14 +177,31 @@ export function makeCellDispatcher({ sheetId, runId, sheetTitle, columns, onCell
         const st = res?.status;
         if (st === 'queued' || st === 'in_progress' || st === 'running' || !st) continue;
 
-        const value = textOf(res);
-        const artifacts = artifactsOf(res);
+        let value = textOf(res);
+        let artifacts = artifactsOf(res);
+
+        // Terminal, but empty: the record may simply not be written yet (see SETTLE_MS). Give it
+        // the grace window before concluding anything, and take whatever turns up.
+        if (!value && !artifacts.length) {
+          const deadline = Date.now() + SETTLE_MS;
+          while (Date.now() < deadline && !signal.aborted) {
+            // eslint-disable-next-line no-await-in-loop
+            await new Promise((r) => setTimeout(r, 1000));
+            // eslint-disable-next-line no-await-in-loop
+            const again = await getResponse(responseId).catch(() => null);
+            if (!again) continue;
+            value = textOf(again);
+            artifacts = artifactsOf(again);
+            if (value || artifacts.length) { res = again; break; }
+          }
+        }
+
         const base = { ...partial, ended_at: now(), session_id: res?.metadata?.session_id || sessionId };
 
         if (st === 'completed') {
-          // "completed" means the agent exited cleanly, which is not the same as answering. A
-          // turn that produced neither text nor a file did not fill this cell, and saying it did
-          // would be the worst kind of wrong.
+          // "completed" means the agent exited cleanly, which is not the same as answering. A turn
+          // that produced neither text nor a file did not fill this cell, and saying it did would
+          // be a green tick over nothing.
           if (!value && !artifacts.length) {
             return { ...base, status: 'failed', error: 'The agent finished without answering.' };
           }
diff --git a/kits/sheets/app/src/lib/model.js b/kits/sheets/app/src/lib/model.js
index fbafc0f..3b24666 100644
--- a/kits/sheets/app/src/lib/model.js
+++ b/kits/sheets/app/src/lib/model.js
@@ -102,7 +102,10 @@ export function interpolate(prompt, columns, values) {
     const col = columnByName(columns, name);
     if (!col) return whole;                       // a config error; the planner refuses first
     const v = values[col.id];
-    if (v === undefined || v === null || v === '') { missing.push(col.name); return ''; }
+    if (v === undefined || v === null || v === '') {
+      if (!missing.includes(col.name)) missing.push(col.name);   // named once, however often used
+      return '';
+    }
     return v;
   });
   return { text, missing };
@@ -284,8 +287,12 @@ export function validate(sheet) {
       if (cell.status !== undefined && !CELL_STATUS.includes(cell.status)) {
         err(`cells["${k}"].status`, `is ${JSON.stringify(cell.status)}`, `Use one of: ${CELL_STATUS.join(' ')}.`);
       }
-      if (Boolean(cell.run_id) !== Boolean(cell.session_id) && (cell.run_id || cell.session_id)) {
-        err(`cells["${k}"]`, 'has one of run_id / session_id but not the other',
+      // A cell that was never dispatched belongs to a run without having a session — that is
+      // what `skipped` means, and it is written by the app itself. Only a cell that claims to
+      // have RUN needs both halves of the reference.
+      const ran = ['running', 'done', 'failed'].includes(cell.status);
+      if (ran && Boolean(cell.run_id) !== Boolean(cell.session_id)) {
+        err(`cells["${k}"]`, 'claims to have run but has only one of run_id / session_id',
             'Both come from a real run. Delete them, or leave the cell out entirely.');
       }
     }
diff --git a/kits/sheets/app/src/lib/model.test.mjs b/kits/sheets/app/src/lib/model.test.mjs
index 790393c..587a807 100644
--- a/kits/sheets/app/src/lib/model.test.mjs
+++ b/kits/sheets/app/src/lib/model.test.mjs
@@ -111,10 +111,16 @@ test('run state in a plain cell is refused — it claims a run that never happen
   assert.match(e.what, /session_id/);
 });
 
-test('an agent cell needs both run_id and session_id or neither', () => {
+test('an agent cell that RAN needs both run_id and session_id; a skipped one does not', () => {
   const cols = [col('c1', 'A'), agent('c2', 'B', 'do {{A}}')];
   const half = sheet(cols, [{ id: 'row_1' }], { 'row_1:c2': { run_id: 'run_1', status: 'done' } });
-  assert.ok(validate(half).errors.some((e) => e.what.includes('not the other')));
+  assert.ok(validate(half).errors.some((e) => e.what.includes('only one of run_id')));
+
+  // The app writes exactly this for a cell it never dispatched. Flagging it made the sheet page
+  // show the person an error about its own correct output.
+  const skipped = sheet(cols, [{ id: 'row_1' }],
+                        { 'row_1:c2': { run_id: 'run_1', status: 'skipped', error: 'A is empty in this row.' } });
+  assert.deepEqual(validate(skipped).errors, []);
 
   const both = sheet(cols, [{ id: 'row_1' }],
                      { 'row_1:c2': { run_id: 'run_1', session_id: 'hsess1', status: 'done', value: 'v' } });
@@ -201,3 +207,9 @@ test('materialize gives a template fresh ids and remaps attach and cells with th
                    'a cell naming a row the template does not have is dropped, not carried');
   assert.deepEqual(validate(s).errors, []);
 });
+
+test('a column referenced twice is named once when it is empty', () => {
+  const cols = [col('c1', 'Company')];
+  const out = interpolate('About {{Company}}. Save notes for {{Company}}.', cols, { c1: '' });
+  assert.deepEqual(out.missing, ['Company'], '"Company and Company are empty" is not a sentence');
+});
diff --git a/kits/sheets/app/src/lib/run.js b/kits/sheets/app/src/lib/run.js
index 37926eb..db016cd 100644
--- a/kits/sheets/app/src/lib/run.js
+++ b/kits/sheets/app/src/lib/run.js
@@ -171,7 +171,11 @@ export class Runner {
   }
 
   /** Everything downstream of `key` in ITS OWN ROW. A sheet run is N independent row-pipelines;
-   *  one bad row must not cost the other ninety-nine. */
+   *  one bad row must not cost the other ninety-nine.
+   *
+   *  Skipped upstreams cascade exactly like failed ones. They did not run, so a cell that reads
+   *  them has nothing to read — and leaving it with no record at all is worse than saying so: the
+   *  run would report six planned and five settled, with the sixth cell simply blank. */
   _skipDownstream(key, reason) {
     const start = this.byKey.get(key);
     if (!start) return;
@@ -232,6 +236,15 @@ export class Runner {
       await Promise.race([...this.inflight.values()].map((c) => c.settled));
     }
     await Promise.allSettled(pending);
+    // Every planned cell ends with a state. A cell can be left without one when its dependency
+    // never resolved for a reason the cascade did not cover; a run that reports six planned and
+    // five settled, with the sixth silently blank, is a run whose own counts do not add up.
+    if (!this.stopped) {
+      for (const c of this.plan.cells) {
+        if (this.results.get(c.key)) continue;
+        this._set(c.key, { status: 'skipped', error: 'An earlier column in this row did not run.' });
+      }
+    }
     return this.progress();
   }
 
@@ -256,9 +269,9 @@ export class Runner {
       .then(() => this.dispatch(task, { signal: ctrl.signal }))
       .then((record) => {
         this._set(c.key, record);
-        if (record.status === 'failed') {
-          this._skipDownstream(c.key, `${task.column?.name || 'An earlier column'} failed in this row.`);
-        }
+        const name = task.column?.name || 'An earlier column';
+        if (record.status === 'failed') this._skipDownstream(c.key, `${name} failed in this row.`);
+        else if (record.status === 'skipped') this._skipDownstream(c.key, `${name} was skipped in this row.`);
       })
       .catch((e) => {
         this._set(c.key, { status: 'failed', error: e?.message || 'This cell could not run.' });
diff --git a/kits/sheets/app/src/lib/run.test.mjs b/kits/sheets/app/src/lib/run.test.mjs
index 3e10548..cdde24c 100644
--- a/kits/sheets/app/src/lib/run.test.mjs
+++ b/kits/sheets/app/src/lib/run.test.mjs
@@ -286,3 +286,24 @@ test('a dispatcher that throws fails that cell and nothing else', async () => {
   assert.equal(states.get('row_2:c2').error, 'network died');
   assert.deepEqual({ done: prog.done, failed: prog.failed }, { done: 2, failed: 1 });
 });
+
+test('a skipped upstream cascades too, and every planned cell ends with a state', async () => {
+  // The empty-input case: the dispatcher itself returns 'skipped' rather than failing. Its
+  // downstream cell has nothing to read either, and must not be left blank in a run that claims
+  // to have planned it.
+  const s = sheetOf([col('c1', 'A'), agent('c2', 'Brief', 'x {{A}}'), agent('c3', 'Fit', 'y {{Brief}}')], 2);
+  const f = fakeDispatcher({
+    answer: (t) => (t.column.name === 'Brief' && t.rowId === 'row_1'
+      ? { status: 'skipped', error: 'A is empty in this row.' }
+      : { status: 'done', value: 'ok' }),
+  });
+  const states = new Map();
+  const r = new Runner({ sheet: s, plan: plan(s, { kind: 'sheet' }, 'all', ENV), dispatch: f.dispatch,
+                         onCell: (k, rec) => states.set(k, rec) });
+  const prog = await r.run();
+
+  assert.equal(states.get('row_1:c3').status, 'skipped');
+  assert.equal(states.get('row_1:c3').error, 'Brief was skipped in this row.');
+  assert.equal(states.get('row_2:c3').status, 'done', 'the other row is untouched');
+  assert.equal(prog.settled, prog.planned, 'planned and settled must agree when the run ends');
+});
diff --git a/kits/sheets/app/src/pages/Landing.jsx b/kits/sheets/app/src/pages/Landing.jsx
index 30851df..0bec081 100644
--- a/kits/sheets/app/src/pages/Landing.jsx
+++ b/kits/sheets/app/src/pages/Landing.jsx
@@ -4,7 +4,7 @@
 // there is nothing else to store. Creating one costs no network call here: the choice becomes
 // real on the first turn, which is the only thing that opens a session.
 import { useEffect, useRef, useState } from 'react';
-import { ArrowUp, MoreHorizontal, Sparkles, Table2 } from 'lucide-react';
+import { ArrowUp, MoreHorizontal, Table2 } from 'lucide-react';
 import { useDialog } from 'reifyui';
 import {
   deleteSheet, lastViewedMap, listSheets, newSheetId, relativeTime, renameSheet, sheetsHarness,
@@ -23,7 +23,7 @@ function openNew(template, seed) {
 function TemplateCard({ template, onPick }) {
   const agentCols = (template.sheet?.columns || []).filter((c) => c.type === 'harness').length;
   return (
-    <button className="tpl-card" onClick={() => onPick(template.id)}>
+    <button className="tpl-card" onClick={() => onPick(template)}>
       <div className="tpl-grid" aria-hidden="true">
         {(template.sheet?.columns || []).slice(0, 4).map((c) => (
           <span key={c.id} className={'tpl-col' + (c.type === 'harness' ? ' agent' : '')}>{c.name}</span>
@@ -105,36 +105,40 @@ export function LandingPage() {
   const remove = async (sheet) => {
     const ok = await dialog.confirm({
       title: `Delete “${sheet.name}”?`,
-      body: 'The sheet and its conversation go with it. This cannot be undone.',
+      message: 'The sheet and its conversation go with it. This cannot be undone.',
       destructive: true,
       confirmLabel: 'Delete',
     });
     if (!ok) return;
-    await deleteSheet(sheet.id).catch((e) => dialog.alert({ variant: 'error', title: 'Could not delete', body: e.message }));
+    await deleteSheet(sheet.id).catch((e) => dialog.alert({ variant: 'error', title: 'Could not delete', message: e.message }));
     reload();
   };
 
   return (
-    <div className="land">
+    <div className="landing">
       <Topbar />
 
       <section className="hero">
         <h1>What do you want to work through?</h1>
-        <p className="hero-sub">
+        <p className="sub">
           Describe the sheet. Columns that run one of your agents on every row are set up here too.
         </p>
-        <div className="hero-box">
+        <div className="promptbox">
           <textarea
-            className="hero-input" rows={3} value={prompt} autoFocus
+            rows={3} value={prompt} autoFocus
             placeholder="Track 20 competitors: name, site, a short brief on each, and how directly they compete."
             onChange={(e) => setPrompt(e.target.value)}
             onKeyDown={(e) => {
               if (e.key === 'Enter' && (e.metaKey || e.ctrlKey) && prompt.trim()) openNew('blank', prompt.trim());
             }} />
-          <button className="btn primary hero-go" disabled={!prompt.trim() || launched === false}
-                  onClick={() => openNew('blank', prompt.trim())}>
-            <ArrowUp size={16} /> Start
-          </button>
+          <div className="pb-row">
+            <span className="hint">Agent columns are set up in the sheet, once it exists.</span>
+            <div className="topbar-spacer" />
+            <button className="btn primary" disabled={!prompt.trim() || launched === false}
+                    onClick={() => openNew('blank', prompt.trim())}>
+              <ArrowUp size={16} /> Start
+            </button>
+          </div>
         </div>
       </section>
 
@@ -145,16 +149,22 @@ export function LandingPage() {
       )}
 
       {templates.length > 0 && (
-        <section className="sec">
-          <h2><Sparkles size={16} /> Start from a template</h2>
+        <section className="section">
+          <div className="section-h"><h2>Start from a template</h2></div>
           <div className="tpl-row scroll">
-            {templates.map((t) => <TemplateCard key={t.id} template={t} onPick={(id) => openNew(id, '')} />)}
+            {/* A template start is still a first turn — nothing but a turn creates a session, and
+                the starting sheet only becomes real when one runs. The sentence is the person's
+                side of it; the sheet itself rides in `instructions`, out of the transcript. */}
+            {templates.map((t) => (
+              <TemplateCard key={t.id} template={t}
+                            onPick={(tpl) => openNew(tpl.id, `Start a sheet from the ${tpl.name} template.`)} />
+            ))}
           </div>
         </section>
       )}
 
-      <section className="sec">
-        <h2>My sheets</h2>
+      <section className="section">
+        <div className="section-h"><h2>My sheets</h2></div>
         {sheets === null ? (
           <div className="empty-note">Loading…</div>
         ) : sheets.length === 0 ? (
diff --git a/kits/sheets/app/src/pages/SheetPage.jsx b/kits/sheets/app/src/pages/SheetPage.jsx
index ae867e9..c07dec3 100644
--- a/kits/sheets/app/src/pages/SheetPage.jsx
+++ b/kits/sheets/app/src/pages/SheetPage.jsx
@@ -95,6 +95,7 @@ export function SheetPage({ id: routeId, seed, template }) {
   const [running, setRunning] = useState(false);
   const [progress, setProgress] = useState(null);
   const [notice, setNotice] = useState('');
+  const [chatOpen, setChatOpen] = useState(() => window.innerWidth > 900);
 
   const dialog = useDialog();
   const chatPane = useResizablePane({ initial: 380, min: 300, maxFraction: 0.6, fromRight: true, storageKey: 'sheets.chat.w' });
@@ -284,12 +285,12 @@ export function SheetPage({ id: routeId, seed, template }) {
       await dialog.alert({
         variant: 'warning',
         title: 'This sheet can’t run yet',
-        body: p.refusals.map((r) => `${r.column} ${r.reason}`).join('\n'),
+        message: p.refusals.map((r) => `${r.column} ${r.reason}`).join('\n'),
       });
       return;
     }
     if (!p.cells.length) {
-      await dialog.alert({ title: 'Nothing to run', body: filter === 'failed'
+      await dialog.alert({ title: 'Nothing to run', message: filter === 'failed'
         ? 'No cells failed in the last run.'
         : 'Every cell in this scope already has a result.' });
       return;
@@ -297,7 +298,7 @@ export function SheetPage({ id: routeId, seed, template }) {
     if (scope.kind === 'sheet') {
       const ok = await dialog.confirm({
         title: `Run ${p.cells.length} cell${p.cells.length === 1 ? '' : 's'}?`,
-        body: 'Running replaces the results in these columns. The conversations stay in your history.\n\n'
+        message: 'Running replaces the results in these columns. The conversations stay in your history.\n\n'
             + 'The run happens in this tab. If you close it, cells already started will finish; nothing new starts.',
         confirmLabel: 'Run',
       });
@@ -323,6 +324,18 @@ export function SheetPage({ id: routeId, seed, template }) {
       cur.cells = cur.cells || {};
       if (record.status === null) delete cur.cells[key];
       else cur.cells[key] = { ...(cur.cells[key] || {}), ...record, run_id: rid };
+      // Counters are recomputed from the cells rather than incremented, and written on every
+      // change rather than only at the end: a tab reopened mid-run reads this file, and a run
+      // header that says 0 done over four finished cells is a lie the file told.
+      if (cur.run?.id === rid) {
+        const mine = Object.values(cur.cells).filter((c) => c.run_id === rid);
+        cur.run = {
+          ...cur.run,
+          done: mine.filter((c) => c.status === 'done').length,
+          failed: mine.filter((c) => c.status === 'failed').length,
+          skipped: mine.filter((c) => c.status === 'skipped').length,
+        };
+      }
       commit(cur);
     };
 
@@ -444,7 +457,7 @@ export function SheetPage({ id: routeId, seed, template }) {
     try {
       await exportSheet(kind, sheetRef.current);
     } catch (e) {
-      dialog.alert({ variant: 'error', title: 'Export didn’t finish', body: e?.message || 'Please try again.' });
+      dialog.alert({ variant: 'error', title: 'Export didn’t finish', message: e?.message || 'Please try again.' });
     }
   };
 
@@ -510,11 +523,11 @@ export function SheetPage({ id: routeId, seed, template }) {
                 lastRun={!running ? lastRunSummary(sheet.run) : ''}
               />
               <button className="btn" onClick={() => setPasting(true)} disabled={readOnly}>
-                <ClipboardPaste size={14} /> Paste rows
+                <ClipboardPaste size={14} /> <span className="lbl">Paste rows</span>
               </button>
               <div className="sl-export-wrap" ref={exportRef}>
                 <button className="btn" onClick={(e) => { e.stopPropagation(); setExportOpen((v) => !v); }}>
-                  <Download size={14} /> Export
+                  <Download size={14} /> <span className="lbl">Export</span>
                 </button>
                 {exportOpen && (
                   <div className="sl-export-menu" onClick={(e) => e.stopPropagation()}>
@@ -585,6 +598,8 @@ export function SheetPage({ id: routeId, seed, template }) {
         onSheetMaybeChanged={load}
         onSessionStarted={adoptSession}
         width={chatPane.width}
+        collapsed={!chatOpen}
+        onToggle={() => setChatOpen((v) => !v)}
       />
 
       {openCell?.column && (
diff --git a/kits/sheets/app/src/styles/app.css b/kits/sheets/app/src/styles/app.css
index dda71a9..2e2c54e 100644
--- a/kits/sheets/app/src/styles/app.css
+++ b/kits/sheets/app/src/styles/app.css
@@ -461,13 +461,8 @@
     box-shadow: -16px 0 40px rgba(15, 23, 42, .22);
   }
   .uic-vresize { display: none; }
-  /* While the drawer is open it occludes the banner's right side: recenter
-     the switcher within the VISIBLE strip (never clipped under the drawer)
-     and shed the brand text; the floor keeps it clear of glyph + home. */
+  /* While the drawer is open it occludes the banner's right side, so the brand text goes. */
   .gp-root:has(.gp-chat:not(.collapsed)) .gp-banner .wm-text { display: none; }
-  .gp-root:has(.gp-chat:not(.collapsed)) .gp-tabs-center {
-    left: max(200px, calc((100% - min(86vw, 380px)) / 2));
-  }
 }
 @media (max-width: 760px) {
   .gp-content .dg-shell { flex-direction: column; }
@@ -695,26 +690,20 @@
 .pr-warn { margin: 6px 0 0; font-size: 12px; color: #92400E; }
 
 /* ── Landing: hero + template cards + sheet table ──────────────────────── */
-.hero-sub { margin: 6px 0 18px; color: var(--mute); font-size: 14px; }
-.hero-box {
-  display: flex; align-items: flex-end; gap: 10px; padding: 12px;
-  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card);
-  box-shadow: var(--shadow-1);
-}
-.hero-input {
-  flex: 1; border: none; outline: none; resize: none; font: inherit; font-size: 15px;
-  line-height: 1.5; color: var(--ink); background: transparent;
-}
-.hero-go { flex: none; }
 
 .tpl-row { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 6px; }
 .tpl-card {
-  flex: 0 0 260px; text-align: left; cursor: pointer; padding: 0 0 12px;
+  flex: 0 0 260px; align-self: stretch; text-align: left; cursor: pointer; padding: 0 0 12px;
   background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card);
   box-shadow: var(--shadow-1); font-family: inherit; overflow: hidden;
 }
 .tpl-card:hover { border-color: var(--brand); }
-.tpl-grid { display: flex; gap: 3px; padding: 12px; background: var(--surface-2); border-bottom: 1px solid var(--line-soft); }
+/* A fixed strip height so cards line up whatever their column names are: the preview is a hint
+   at the shape of the sheet, not a measurement of it. */
+.tpl-grid {
+  display: flex; gap: 3px; padding: 12px; height: 52px; align-items: center;
+  background: var(--surface-2); border-bottom: 1px solid var(--line-soft);
+}
 .tpl-col {
   flex: 1; min-width: 0; padding: 5px 6px; border-radius: 5px; font-size: 10.5px;
   background: var(--surface); border: 1px solid var(--line);
@@ -733,12 +722,11 @@
 /* ── Narrow widths ─────────────────────────────────────────────────────── */
 @media (max-width: 1180px) { .run-bar { display: none; } }
 @media (max-width: 900px) {
-  .gp-root { flex-direction: column; }
-  /* The copilot becomes a bottom sheet rather than a squeezed column: below this width a
-     300px pane leaves the grid too narrow to read a single agent answer. */
-  .gp-chat { flex: 0 0 46vh !important; width: auto; border-left: none; border-top: 1px solid var(--line); }
+  /* The copilot is already a dismissable drawer at this width (see the rule above). What the
+     sheet page adds is shedding what the banner cannot fit beside it. */
   .run-last { display: none; }
-  .sh-banner-actions .btn span { display: none; }
+  .sh-banner-actions .btn .lbl { display: none; }
+  .sh-banner-actions .btn { padding: 0 9px; }
   .cd { width: 100vw; }
 }
 @media (max-width: 620px) {
diff --git a/kits/sheets/skills/sheet-design/validate_sheet.py b/kits/sheets/skills/sheet-design/validate_sheet.py
index fb97ebb..4a3bfc9 100644
--- a/kits/sheets/skills/sheet-design/validate_sheet.py
+++ b/kits/sheets/skills/sheet-design/validate_sheet.py
@@ -175,8 +175,11 @@ def check_cells(sheet: dict, columns: list, row_ids: set) -> None:
             st = cell.get("status")
             if st is not None and st not in STATUSES:
                 err(f"{at}.status", f"is {json.dumps(st)}", f"use one of: {' '.join(sorted(STATUSES))}")
-            if bool(cell.get("run_id")) != bool(cell.get("session_id")) and (cell.get("run_id") or cell.get("session_id")):
-                err(at, "has one of run_id / session_id but not the other",
+            # A `skipped` cell belongs to a run without ever having had a session; that is what
+            # skipped means, and the app writes it. Only a cell claiming to have RUN needs both.
+            if st in ("running", "done", "failed") \
+                    and bool(cell.get("run_id")) != bool(cell.get("session_id")):
+                err(at, "claims to have run but has only one of run_id / session_id",
                     "both come from a real run — delete them, or leave the cell out entirely")
 
         if col.get("type") == "checkbox" and "value" in cell and not isinstance(cell["value"], bool):

From b658823f2928ec9f9fe83f85914b4feb2d11818a Mon Sep 17 00:00:00 2001
From: richard-epsilla <richard@epsilla.com>
Date: Thu, 13 Aug 2026 04:14:39 -0700
Subject: [PATCH 4/5] fix(ci): the test script depended on the shell expanding
 a glob it never sees
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

`node --test 'src/lib/*.test.mjs'` passes the pattern to node verbatim, and node only expands it
itself from v22 — so it ran locally on 23 and failed on the runner's 20 with "Could not find". The
files are named now, which works on every runtime, and the runner is on 22 so local and CI agree.

Caught by the kits workflow this PR adds, on its first run.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_013DCjqvx3L4VKAPnFaPe7YJ
---
 .github/workflows/kits.yml   | 2 +-
 kits/sheets/app/package.json | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/.github/workflows/kits.yml b/.github/workflows/kits.yml
index e601ae8..a72ee6b 100644
--- a/.github/workflows/kits.yml
+++ b/.github/workflows/kits.yml
@@ -21,7 +21,7 @@ jobs:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: 20
+          node-version: 22
       # Not `npm ci` at the repo root: install-kits.sh cds into each app and resolves against that
       # app's own lockfile, so hoisting here would test a tree the image never has.
       - run: npm ci
diff --git a/kits/sheets/app/package.json b/kits/sheets/app/package.json
index 98a53cc..c94f47e 100644
--- a/kits/sheets/app/package.json
+++ b/kits/sheets/app/package.json
@@ -5,7 +5,7 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build",
-    "test": "node --test 'src/lib/*.test.mjs'"
+    "test": "node --test src/lib/model.test.mjs src/lib/run.test.mjs"
   },
   "dependencies": {
     "react": "^18.3.1",

From f7fadb5930d3de1adbc3a3bd7d8ba0ee351e525a Mon Sep 17 00:00:00 2001
From: richard-epsilla <richard@epsilla.com>
Date: Thu, 13 Aug 2026 04:18:21 -0700
Subject: [PATCH 5/5] fix(sheets): the sheet list showed the last prompt, not
 the sheet's name
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

meta.title is the truth; the session title is its mirror, and the sheet LIST renders the mirror
because it cannot read the file. The mirror was asserted once per distinct title — so the first
turn set it correctly and the second turn regenerated it from the message, leaving a sheet called
"Competitor scan" listed as "Add a plain text column called Owner at the end."

The name was right in the document and wrong in the one place a person looks for it. Re-asserted
once per turn now, which is exactly as often as something can undo it.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_013DCjqvx3L4VKAPnFaPe7YJ
---
 kits/sheets/app/src/pages/SheetPage.jsx | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/kits/sheets/app/src/pages/SheetPage.jsx b/kits/sheets/app/src/pages/SheetPage.jsx
index c07dec3..ec2566a 100644
--- a/kits/sheets/app/src/pages/SheetPage.jsx
+++ b/kits/sheets/app/src/pages/SheetPage.jsx
@@ -105,6 +105,7 @@ export function SheetPage({ id: routeId, seed, template }) {
   idRef.current = id;
   const runnerRef = useRef(null);
   const exportRef = useRef(null);
+  const mirrored = useRef('');      // the session title we last asserted
   const save = useRef({ timer: null, inFlight: false, backoff: 0, wanted: null });
 
   // ── the one writer ────────────────────────────────────────────────────────
@@ -209,7 +210,10 @@ export function SheetPage({ id: routeId, seed, template }) {
   // Once the turn ends, write whatever accumulated while the file was locked.
   const prevAgentBusy = useRef(false);
   useEffect(() => {
-    if (prevAgentBusy.current && !agentBusy) { load().then(() => flush()); }
+    if (prevAgentBusy.current && !agentBusy) {
+      mirrored.current = '';          // the turn just renamed the session; re-assert the real name
+      load().then(() => flush());
+    }
     prevAgentBusy.current = agentBusy;
   }, [agentBusy, load, flush]);
 
@@ -434,9 +438,14 @@ export function SheetPage({ id: routeId, seed, template }) {
     commit({ ...doc, meta: { ...doc.meta, title: name.trim() } });
   }, [dialog, commit]);
 
-  // The agent may rename the sheet from inside the document; the session title is then stale, and
-  // one direction of reconciliation is stated rather than two racing.
-  const mirrored = useRef('');
+  // meta.title is the truth and the session title is its mirror — the sheet LIST renders the
+  // session title, because it cannot read the file.
+  //
+  // The mirror has to be re-asserted after every turn, not just when meta.title changes. A turn
+  // regenerates the session title from the latest user message, so a sheet called "Competitor
+  // scan" appeared in the list as "Add a plain text column called Owner at the end." — the name
+  // was right in the document and wrong everywhere the person looks for it. Re-asserting once per
+  // turn is exactly as often as something can undo it.
   useEffect(() => {
     const title = sheet?.meta?.title;
     if (!title || isPending(id) || mirrored.current === title) return;