+ 
+
+ );
+ }
+ return (
+ {artifact.filename}
+ Download
+
+
+ );
+}
+
+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 (
+
+ );
+}
diff --git a/kits/sheets/app/src/components/ChatPanel.jsx b/kits/sheets/app/src/components/ChatPanel.jsx
new file mode 100644
index 0000000..9d4e0f6
--- /dev/null
+++ b/kits/sheets/app/src/components/ChatPanel.jsx
@@ -0,0 +1,247 @@
+// 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, 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;
+
+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}` : ''));
+}
+
+const history = (id) => (isPending(id) ? Promise.resolve([]) : sessionTurns(id));
+
+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);
+ const [connecting, setConnecting] = useState(false);
+ const [histLoading, setHistLoading] = useState(true);
+ const pendingRef = useRef(null);
+ const bodyRef = useRef(null);
+ const seededRef = useRef(false);
+
+ 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 -= 1) {
+ 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 deliver(text) {
+ setBusy(true);
+ setMessages((m) => [...m, { role: 'assistant', blocks: [], status: 'running' }]);
+ try {
+ 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) })),
+ 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.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; the seed fires only when there is none.
+ //
+ // Keyed on sheetId, and a pending sheet CHANGES its id mid-stream: it starts as
+ // "new:" 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;
+ history(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]);
+
+ // Retry a message the gateway was not up to receive.
+ 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]);
+
+ // 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]);
+
+ if (collapsed) {
+ return (
+
+ );
+ }
+
+ const empty = messages.length === 0;
+
+ return (
+
+ );
+}
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 (
+
+ {shown.map((a) => (
+
+
+ {artifact.filename}
+ {size != null && {bytesLabel(size)}}
+ {TEXT.includes(e) && (
+
+ )}
+ Download
+
+ {open && TEXT.includes(e) && (
+ text === null ? Loading…
+ :
+
+
+