Overview: true running state, turn history, richer cards

The card called a Codex task "done" as soon as any assistant message
appeared, but Codex emits several intermediate messages per task. Parse
its task lifecycle instead: event_msg task_started/task_complete drive a
digest-level running flag (with the terminal-derived state as fallback
for other CLIs), the running card shows the latest model output with a
spinner below it, and task_complete's last_agent_message is the
authoritative answer. Web searches now count as tool calls (they were
tracked separately and showed "0 tools" on search-heavy tasks).

New per-request turn history: each assistant text pushes the previous
one into digest.turnsLog (cleared on every new prompt), and up/down
arrows on the meta line page through the model's intermediate turns
with a "turn k/N" indicator.

Card design: the user prompt is the loudest line (full text color,
accent arrow), the reply is a quiet always-visible input whose arrow
mirrors the prompt's, and the 16px anti-zoom input rule is scoped to
touch devices so narrow desktop windows keep card-sized text. Bottom
filter labels are now all | done | running | stopped.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

server/src/traces.js

@@ -40,19 +40,33 @@ function mergeInto(a, b) {
 // Built in the same parse pass: every real user prompt resets the segment, so
 // whatever accumulated by EOF is the activity since the last thing you said.
 function emptyDigest() {
-  return { lastPromptText: '', lastPromptTs: 0, lastAssistantText: '', lastAssistantMd: '', lastAssistantTs: 0, sinceTurns: 0, sinceToolCalls: 0, sinceTools: {}, sinceFiles: [], sinceTokens: 0 };
+  return { lastPromptText: '', lastPromptTs: 0, lastAssistantText: '', lastAssistantMd: '', lastAssistantTs: 0, sinceTurns: 0, sinceToolCalls: 0, sinceTools: {}, sinceFiles: [], sinceTokens: 0, running: false, turnsLog: [] };
 }
 const clip = (s, n = 280) => { const t = (s || '').replace(/\s+/g, ' ').trim(); return t.length > n ? `${t.slice(0, n - 1)}…` : t; };
 // Markdown-preserving variant (keeps newlines) for the expandable card view.
 const clipRaw = (s, n = 6000) => { const t = (s || '').trim(); return t.length > n ? `${t.slice(0, n - 1)}…` : t; };
+// turnsLog: the model's intermediate turns WITHIN the current request (newest
+// first) so the Overview can page through them. Each new assistant text pushes
+// the previous one into the log; a new user prompt clears it.
+const MAX_TURNS_LOG = 24;
 function digestPrompt(d, text, ts) {
   d.lastPromptText = clip(text); d.lastPromptTs = Date.parse(ts) || 0;
   d.sinceTurns = 0; d.sinceToolCalls = 0; d.sinceTools = {}; d.sinceFiles = []; d.sinceTokens = 0;
+  d.turnsLog = []; // arrows only walk the current request's turns
   // The previous answer belongs to the previous prompt — never show it as "LAST".
   d.lastAssistantText = ''; d.lastAssistantMd = ''; d.lastAssistantTs = 0;
 }
 function digestAssistant(d, text, ts) {
-  d.lastAssistantText = clip(text);
+  const clipped = clip(text);
+  // Same text again (codex mirrors agent_message/response_item/task_complete):
+  // refresh metadata only, don't log a phantom turn.
+  if (clipped !== d.lastAssistantText) {
+    if (d.lastAssistantText) {
+      d.turnsLog.unshift({ answer: d.lastAssistantText, answerMd: d.lastAssistantMd, ts: d.lastAssistantTs });
+      if (d.turnsLog.length > MAX_TURNS_LOG) d.turnsLog.pop();
+    }
+    d.lastAssistantText = clipped;
+  }
   d.lastAssistantMd = clipRaw(text);
   d.lastAssistantTs = Date.parse(ts) || d.lastAssistantTs;
 }
@@ -178,11 +192,33 @@ function parseCodex(txt) {
         }
         case 'web_search_call':
           st.web++;
+          st.toolCalls++;
+          st.tools.web_search = (st.tools.web_search || 0) + 1;
+          digestTool(dg, 'web_search', null);
+          break;
+        default:
+      }
+    } else if (j.type === 'event_msg') {
+      // Task lifecycle: Codex runs one task per user prompt, made of several
+      // model turns. task_started/task_complete bracket it — that (not "an
+      // assistant message appeared") is the real running/done signal, and
+      // task_complete carries the authoritative final answer.
+      switch (p.type) {
+        case 'token_count':
+          if (p.info && p.info.total_token_usage) tok = p.info.total_token_usage;
+          break;
+        case 'task_started':
+          dg.running = true;
+          break;
+        case 'agent_message':
+          if (p.message) digestAssistant(dg, p.message, j.timestamp); // live progress text
+          break;
+        case 'task_complete':
+          dg.running = false;
+          if (p.last_agent_message) digestAssistant(dg, p.last_agent_message, j.timestamp);
           break;
         default:
       }
-    } else if (j.type === 'event_msg' && p.type === 'token_count' && p.info && p.info.total_token_usage) {
-      tok = p.info.total_token_usage;
     }
   }
   if (tok) {

web/src/App.tsx

@@ -490,7 +490,7 @@ export default function App() {
             <div className="seg ov-seg">
               {(['all', 'waiting', 'working', 'quiet'] as OverviewFilter[]).map((f) => (
                 <button key={f} className={ovFilter === f ? 'on' : ''} onClick={() => setOvFilter(f)}>
-                  {f === 'waiting' ? 'your turn' : f}
+                  {f === 'waiting' ? 'done' : f === 'working' ? 'running' : f === 'quiet' ? 'stopped' : 'all'}
                 </button>
               ))}
             </div>

web/src/api.ts

@@ -66,11 +66,14 @@ export interface Usage { providers: Record<string, ProviderUsage>; generatedAt:
 export const getUsage = (): Promise<Usage> => fetch('/api/usage').then(json);
 
 // ---- overview (meta) ----
+export interface TurnEntry { answer: string; answerMd: string; ts: number; }
 export interface MetaDigest {
   lastPromptText: string; lastPromptTs: number;
   lastAssistantText: string; lastAssistantMd: string; lastAssistantTs: number;
   sinceTurns: number; sinceToolCalls: number; sinceTools: Record<string, number>; sinceFiles: string[];
   sinceTokens: number;
+  running?: boolean;        // task in flight (codex task_started/task_complete)
+  turnsLog?: TurnEntry[];   // newest-first history of completed exchanges
 }
 export interface MetaSession extends Session { digest: MetaDigest | null }
 export const getMeta = (): Promise<{ sessions: MetaSession[]; generatedAt: string }> =>

web/src/components/Overview.tsx

@@ -32,19 +32,25 @@ function Card({ s, color, onOpen }: {
 }) {
   const d = s.digest;
   const [draft, setDraft] = useState('');
-  const [live, setLive] = useState(false);
   const [sending, setSending] = useState(false);
   const [failed, setFailed] = useState(false);
   const [sentAt, setSentAt] = useState(0);
   const [expanded, setExpanded] = useState(false);
+  const [histIdx, setHistIdx] = useState(0); // 0 = live view, n = n-th exchange back
   const inputRef = useRef<HTMLInputElement>(null);
-  useEffect(() => { if (live) inputRef.current?.focus(); }, [live]);
 
   // After you send (or when the transcript shows a prompt newer than the last
   // answer), the old answer is stale — a spinner takes its place.
   const digestCaughtUp = !!d && d.lastPromptTs >= sentAt - 60_000;
   if (sentAt && digestCaughtUp) setSentAt(0);
-  const awaiting = (sentAt && !digestCaughtUp) || (!!d && !!d.lastPromptText && d.lastPromptTs > d.lastAssistantTs);
+  // Running: the agent's own task lifecycle when the transcript provides one
+  // (codex task_started/complete), else the terminal-derived state.
+  const running = !!d?.running || s.state === 'working';
+  const awaiting = (!!sentAt && !digestCaughtUp) || (!!d && !!d.lastPromptText && d.lastPromptTs > d.lastAssistantTs && running);
+
+  const hist = d?.turnsLog ?? [];
+  const idx = Math.min(histIdx, hist.length);
+  const entry = idx > 0 ? hist[idx - 1] : null;
 
   const send = async () => {
     const text = draft.trim();
@@ -55,7 +61,8 @@ function Card({ s, color, onOpen }: {
       await api.sendInput(s.id, text);
       setDraft('');
       setSentAt(Date.now());
-      setLive(false);
+      setHistIdx(0);
+      inputRef.current?.blur();
     } catch {
       setFailed(true);
       setTimeout(() => setFailed(false), 4000);
@@ -64,14 +71,18 @@ function Card({ s, color, onOpen }: {
   };
 
   const ago = fmtAgo(Math.max(d?.lastAssistantTs || 0, d?.lastPromptTs || 0) || Date.parse(s.createdAt) || 0);
+  const promptText = d?.lastPromptText || '';
+  const answerText = entry ? entry.answer : d?.lastAssistantText || '';
+  const answerMd = entry ? entry.answerMd : d?.lastAssistantMd || '';
+  // Chronological position: hist is newest-first, live text is the newest turn.
+  const totalTurns = hist.length + (d?.lastAssistantText ? 1 : 0);
   const metaBits: string[] = [];
   if (d && (d.sinceTurns || d.sinceToolCalls)) {
     metaBits.push(`${d.sinceTurns} turn${d.sinceTurns === 1 ? '' : 's'}`, `${d.sinceToolCalls} tool${d.sinceToolCalls === 1 ? '' : 's'}`);
     if (d.sinceFiles.length) metaBits.push(d.sinceFiles.map(base).join(', '));
     if (d.sinceTokens > 0) metaBits.push(`${fmtTok(d.sinceTokens)} tok`);
   }
-  // One reply line for every state — same words, same accent voice.
-  const ghostLabel = 'waiting for your input…';
+  const showLiveProgress = !entry && (running || awaiting);
 
   return (
     <div className="ov-card">
@@ -84,53 +95,72 @@ function Card({ s, color, onOpen }: {
         <span className="ov-go">open ↗</span>
       </div>
 
-      {d && d.lastPromptText ? (
-        <div className="ov-prompt mono" title={d.lastPromptText}>{d.lastPromptText}</div>
+      {promptText ? (
+        <div className="ov-prompt" title={promptText}>{promptText}</div>
       ) : (
-        <div className="ov-prompt ov-prompt-none mono">no prompt yet</div>
+        <div className="ov-prompt ov-prompt-none">no prompt yet</div>
+      )}
+      {(metaBits.length > 0 || hist.length > 0) && (
+        <div className="ov-meta mono">
+          <span className="ov-meta-bits">{metaBits.join(' · ')}</span>
+          <span className="spacer" />
+          {hist.length > 0 && (
+            <span className="ov-nav">
+              {idx > 0 && <span className="ov-nav-pos">turn {totalTurns - idx}/{totalTurns}</span>}
+              <button
+                className="ov-nav-btn" title="Earlier turn" disabled={idx >= hist.length}
+                onClick={() => { setHistIdx(Math.min(idx + 1, hist.length)); setExpanded(false); }}
+              >↑</button>
+              <button
+                className="ov-nav-btn" title="Later turn" disabled={idx === 0}
+                onClick={() => { setHistIdx(Math.max(idx - 1, 0)); setExpanded(false); }}
+              >↓</button>
+            </span>
+          )}
+        </div>
       )}
-      {metaBits.length > 0 && <div className="ov-meta mono">{metaBits.join(' · ')}</div>}
 
-      {awaiting ? (
-        <div className="ov-busy mono">working</div>
-      ) : d && d.lastAssistantText ? (
+      {showLiveProgress ? (
+        <div className="ov-answer-wrap">
+          {answerText && d && d.lastAssistantTs >= d.lastPromptTs && (
+            <div className="ov-answer ov-answer-dim">{answerText}</div>
+          )}
+          <div className="ov-busy mono">running</div>
+        </div>
+      ) : answerText ? (
         <div className="ov-answer-wrap">
           {expanded ? (
-            <div className="markdown ov-md" dangerouslySetInnerHTML={{ __html: renderMarkdown(d.lastAssistantMd || d.lastAssistantText) }} />
+            <div className="markdown ov-md" dangerouslySetInnerHTML={{ __html: renderMarkdown(answerMd || answerText) }} />
           ) : (
-            <div className="ov-answer">{d.lastAssistantText}</div>
+            <div className="ov-answer">{answerText}</div>
           )}
           <button className="ov-more" onClick={() => setExpanded((e) => !e)}>{expanded ? 'less' : 'more'}</button>
         </div>
       ) : null}
 
-      {live ? (
-        <div className="ov-live">
-          <span className="ov-p mono">❯</span>
-          <input
-            ref={inputRef}
-            value={draft}
-            disabled={sending}
-            autoComplete="off"
-            autoCorrect="off"
-            autoCapitalize="off"
-            spellCheck={false}
-            enterKeyHint="send"
-            onChange={(e) => setDraft(e.target.value)}
-            // iOS doesn't resize the layout for the keyboard — scroll the
-            // input into view once the keyboard has animated in.
-            onFocus={(e) => { const el = e.currentTarget; setTimeout(() => el.scrollIntoView({ block: 'center', behavior: 'smooth' }), 300); }}
-            onBlur={() => { if (!draft.trim()) setLive(false); }}
-            onKeyDown={(e) => {
-              if (e.key === 'Enter') send();
-              if (e.key === 'Escape') { setDraft(''); setLive(false); }
-            }}
-          />
-          <span className="ov-hint">{sending ? 'sending…' : '↵ send'}</span>
-        </div>
-      ) : (
-        <button className="ov-ghost attn" onClick={() => setLive(true)}>{ghostLabel}</button>
-      )}
+      <div className="ov-live">
+        <span className="ov-p mono">❯</span>
+        <input
+          ref={inputRef}
+          value={draft}
+          disabled={sending}
+          placeholder={sending ? 'sending…' : 'reply…'}
+          autoComplete="off"
+          autoCorrect="off"
+          autoCapitalize="off"
+          spellCheck={false}
+          enterKeyHint="send"
+          onChange={(e) => setDraft(e.target.value)}
+          // iOS doesn't resize the layout for the keyboard — scroll the
+          // input into view once the keyboard has animated in.
+          onFocus={(e) => { const el = e.currentTarget; setTimeout(() => el.scrollIntoView({ block: 'center', behavior: 'smooth' }), 300); }}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter') send();
+            if (e.key === 'Escape') { setDraft(''); inputRef.current?.blur(); }
+          }}
+        />
+        {draft.trim() && <span className="ov-hint">↵ send</span>}
+      </div>
       {failed && <div className="ov-note">failed to reach the agent</div>}
     </div>
   );

web/src/styles.css

@@ -224,16 +224,26 @@ body {
 .ov-go { color: var(--muted); font-size: 12px; opacity: 0; transition: opacity 0.12s ease-out; flex: none; }
 .ov-card:hover .ov-go, .ov-id:focus-visible .ov-go { opacity: 1; }
 
-.ov-prompt { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
+.ov-prompt { font-size: 13px; font-weight: 550; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
 /* nothing between prompt and reply → one hairline, not two */
-.ov-prompt + .ov-ghost, .ov-prompt + .ov-live { border-top: none; }
-.ov-prompt::before { content: '❯ '; color: var(--accent); font-weight: 700; }
-.ov-prompt-none { font-style: italic; }
+.ov-prompt + .ov-live { border-top: none; }
+.ov-prompt::before { content: '❯ '; font-family: var(--font-mono); color: var(--accent); font-weight: 700; }
+.ov-prompt-none { font-style: italic; font-weight: 400; color: var(--muted); }
 .ov-prompt-none::before { color: var(--border-strong); }
-.ov-meta { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: -2px; }
+.ov-meta { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; margin-top: -2px; display: flex; align-items: center; gap: 6px; }
+.ov-meta .spacer { flex: 1; }
+.ov-meta-bits { overflow: hidden; text-overflow: ellipsis; }
+/* turn history: step back through earlier exchanges */
+.ov-nav { display: inline-flex; align-items: center; gap: 3px; flex: none; }
+.ov-nav-pos { color: var(--accent); margin-right: 3px; }
+.ov-nav-btn { background: none; border: 1px solid var(--border); border-radius: 5px; width: 20px; height: 17px; padding: 0; font: inherit; font-size: 10.5px; line-height: 1; color: var(--muted); cursor: pointer; }
+.ov-nav-btn:hover:not(:disabled) { color: var(--text); border-color: var(--border-strong); }
+.ov-nav-btn:disabled { opacity: 0.35; cursor: default; }
 
 .ov-answer-wrap { min-width: 0; }
 .ov-answer { font-size: 13px; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
+/* live progress while running: present but clearly not the final word */
+.ov-answer-dim { color: var(--muted); margin-bottom: 5px; -webkit-line-clamp: 2; }
 .ov-more { background: none; border: none; padding: 3px 0 0; font: inherit; font-size: 11px; color: var(--muted); cursor: pointer; display: block; }
 .ov-more:hover { color: var(--accent); }
 /* expanded answer: flows in the card — no box-in-box, slightly smaller type */
@@ -248,17 +258,11 @@ body {
   50% { content: '⠼'; } 62.5% { content: '⠴'; } 75% { content: '⠦'; } 87.5% { content: '⠧'; }
 }
 
-/* reply: a ghost line that becomes a bare ❯ input */
-.ov-ghost { border: none; background: none; padding: 7px 0 2px; font: inherit; font-size: 12.5px; color: var(--muted); text-align: left; cursor: text; border-top: 1px solid var(--border); width: 100%; }
-.ov-ghost::before { content: '❯ '; font-family: var(--font-mono); color: var(--border-strong); font-weight: 700; }
-.ov-ghost:hover { color: var(--text); }
-/* waiting: full-accent arrow, accent-tinted text — matches the hollow dot */
-.ov-ghost.attn { color: color-mix(in srgb, var(--accent) 45%, var(--muted)); }
-.ov-ghost.attn::before { color: var(--accent); }
-.ov-ghost.attn:hover { color: var(--text); }
-.ov-live { display: flex; gap: 8px; align-items: center; border-top: 1px solid var(--border); padding-top: 7px; }
-.ov-live .ov-p { color: var(--accent); font-weight: 700; }
+/* reply: a quiet, always-there input line — its ❯ mirrors the prompt's */
+.ov-live { display: flex; gap: 8px; align-items: center; border-top: 1px solid var(--border); padding-top: 7px; font-size: 13px; }
+.ov-live .ov-p { color: var(--accent); font-weight: 700; font-size: 13px; }
 .ov-live input { flex: 1; min-width: 0; border: none; background: none; font: inherit; font-size: 13px; color: var(--text); outline: none; padding: 2px 0; }
+.ov-live input::placeholder { color: var(--muted); opacity: 0.7; }
 .ov-hint { font-size: 10.5px; color: var(--muted); flex: none; }
 .ov-note { font-size: 11px; color: var(--danger); }
 
@@ -721,8 +725,11 @@ a.btn-ghost { text-decoration: none; }
   .row .age { display: none; } /* actions are always visible on touch — no room */
   .g-add { opacity: 1; }
   .caret { width: 22px; font-size: 15px; }
-  /* 16px inputs stop iOS zoom-on-focus */
-  .widget input, .widget select, .row .rename, .secret-desc, .fp-input, .pane-head .ph-title-input, .ov-live input { font-size: 16px; }
+  /* 16px inputs stop iOS zoom-on-focus — touch devices only, so a narrow
+     DESKTOP window keeps the reply line at card size */
+  @media (pointer: coarse) {
+    .widget input, .widget select, .row .rename, .secret-desc, .fp-input, .pane-head .ph-title-input, .ov-live input { font-size: 16px; }
+  }
   .ov-headrow { flex-wrap: wrap; }
   /* install page: the decorative sidebar makes no sense on a phone */
   .locked-app .mock-side { display: none; }