clauderipple 0.9.4 → 0.10.0

package/dist/mod/tests/ui.test.tsx

@@ -9,10 +9,12 @@ import { expect, test } from 'claude-code/testing'
 import type { Engine } from 'claude-code/testing'
 import type { On, RenderElement, RenderPropsOf } from 'claude-code'
 
-import type { AgentRec, Settings, StatusRequest } from '../types'
+import type { AgentRec, Settings, Skin, StatusRequest } from '../types'
 import { STRINGS } from '../hooks/i18n'
 import { normalizeSettings } from '../hooks/settings'
-import { renderAgents } from '../hooks/ui/agents'
+import { cardRows, renderAgents, talkOf, timeCells } from '../hooks/ui/agents'
+import { chOf, displayWidth } from '../hooks/ui/theme'
+import { commandLine, runSummary, shortPath, toolDetail } from '../hooks/ui/tools'
 import { renderAlert } from '../hooks/ui/alerts'
 import { BAND_RIPPLE, CREST_CELLS, bandMood, besideBand, modeLabel, renderBand, renderFooter } from '../hooks/ui/band'
 import { rippleSource } from '../hooks/ui/parts'
@@ -20,7 +22,7 @@ import { renderLog } from '../hooks/ui/log'
 import { renderSettings } from '../hooks/ui/settings'
 import { renderSetup } from '../hooks/ui/setup'
 import { countdown, elapsed, minutesLeft, modelName, nextMinuteChange, resetsLabel, routeOf, seconds, targetOf, targetValue } from '../hooks/ui/view'
-import type { AlertView, DashboardView, Frame, JevState, SettingsActions, Surface } from '../hooks/ui/view'
+import type { AgentEntry, AgentsActions, AlertView, DashboardView, Frame, JevState, SettingsActions, Surface } from '../hooks/ui/view'
 
 const SURFACES = ['terminal', 'desktop'] as const
 const NOW = Date.parse('2026-10-10T13:20:00')
@@ -30,8 +32,8 @@ function paneProps(columns: number, rows = 30): RenderPropsOf['Pane'] {
   return { title: 'ui', isFocused: true, bodyColumns: columns, placement: 'inline', scroll: { offset: 0, bodyRows: rows }, view: {} } as RenderPropsOf['Pane']
 }
 
-function frameOf(surface: Surface, columns = 140, maxRows = 12): Frame {
-  return { surface, columns, maxRows, now: NOW, appearance: 'auto', lang: 'en' }
+function frameOf(surface: Surface, columns = 140, maxRows = 12, skin: Skin = 'deep'): Frame {
+  return { surface, columns, maxRows, now: NOW, appearance: 'auto', skin, lang: 'en' }
 }
 
 /** Records which callback ran, with what. */
@@ -107,6 +109,8 @@ function mount($: Engine, id: string, surface: (typeof SURFACES)[number], column
 test('view helpers', () => {
   expect(modelName('claude-opus-5-5[1m]')).toBe('Opus 5.5')
   expect(modelName('claude-fable-5-1')).toBe('Fable 5.1')
+  expect(modelName('claude-mythos-5-1')).toBe('Mythos 5.1')
+  expect(modelName('mythos')).toBe('Mythos')
   expect(modelName('sonnet')).toBe('Sonnet')
   expect(modelName('gpt-6.1-sol')).toBe('gpt-6.1-sol')
   expect(countdown(41 * 60_000, 'en')).toBe('41m')
@@ -177,7 +181,8 @@ test('the band draws on both surfaces and its controls reach their callbacks', a
       expect(await ui.find({ type: 'Text', text: /^Keep cache warm Off · / })).toBeDefined()
       // What captions said is in the hover tips.
       expect(await ui.find({ type: 'Text', text: /^Opus 5\.5 · Auto · Effort High — multi-file refactor/ })).toBeDefined()
-      expect(await ui.find({ type: 'Text', text: /^Last route: gpt-6.1-sol via chatgpt, high, cache 96%/ })).toBeDefined()
+      // The route has no tip of its own: the log it opens is its card (028aee5).
+      expect(await ui.find({ type: 'Text', text: /^Last route: / })).toBeUndefined()
       // The route opens the log too; the effort its menu.
       await ui.press({ key: 'route' })
       await ui.press({ key: 'effort' })
@@ -383,8 +388,8 @@ test('리플이 greets in setup and quick settings and waits in empty panes, nev
   drawPane(on, 'm-setup-1', (el, surface) => renderSetup(el, frameOf(surface), { step: 1, draft: SETTINGS, jev: { source: 'env', test: { state: 'idle' } } }, setupActions))
   drawPane(on, 'm-setup-4', (el, surface) => renderSetup(el, frameOf(surface), { step: 4, draft: SETTINGS, jev: { source: 'env', test: { state: 'idle' } } }, setupActions))
   drawPane(on, 'm-quick', (el, surface) => renderSettings(el, frameOf(surface), { settings: SETTINGS, jev: { source: null, test: { state: 'idle' } } }, QUICK_ACTIONS))
-  drawPane(on, 'm-agents', (el, surface) => renderAgents(el, frameOf(surface, 64), { agents: AGENTS, now: NOW, showDone: true }, { toggleDone: noop }))
-  drawPane(on, 'm-agents-empty', (el, surface) => renderAgents(el, frameOf(surface, 64), { agents: [], now: NOW, showDone: false }, { toggleDone: noop }))
+  drawPane(on, 'm-agents', (el, surface) => renderAgents(el, frameOf(surface, 64), { agents: AGENTS, now: NOW, showDone: true }, { ...AGENT_NOOP, toggleDone: noop }))
+  drawPane(on, 'm-agents-empty', (el, surface) => renderAgents(el, frameOf(surface, 64), { agents: [], now: NOW, showDone: false }, { ...AGENT_NOOP, toggleDone: noop }))
   drawPane(on, 'm-log-empty', (el, surface) => renderLog(el, frameOf(surface, 64), { rows: [], mineOnly: true }, { toggleScope: noop }))
   // It greets and waits at 56 px, and heads the quick settings at 48.
   const expected: [string, number, string, number][] = [['m-setup-1', 1, 'var(--accent)', 56], ['m-setup-4', 1, 'var(--ok)', 56], ['m-quick', 1, 'var(--accent)', 48], ['m-agents', 0, '', 0], ['m-agents-empty', 1, 'var(--accent)', 56], ['m-log-empty', 1, 'var(--accent)', 56]]
@@ -455,6 +460,61 @@ test('quick settings controls reach their callbacks on both surfaces', async ($,
   expect(calls).toEqual([...once, ...once])
 })
 
+// ---- Skins (look.ts) ---------------------------------------------------------------------------
+
+const SKINS: readonly Skin[] = ['deep', 'flat']
+
+test('the skin tile offers deep and flat on the desktop alone, and a pick patches the setting', async ($, on) => {
+  const { calls, fn } = recorder()
+  const actions = { ...QUICK_ACTIONS, patch: fn('patch') }
+  drawPane(on, 'skin', (el, surface) => renderSettings(el, frameOf(surface), { settings: SETTINGS, jev: { source: null, test: { state: 'idle' } } }, actions))
+  const desktop = await mount($, 'skin', 'desktop')
+  for (const skin of SKINS) expect(await desktop.find({ key: 'skin-' + skin }), skin).toBeDefined()
+  expect(await desktop.find({ type: 'Text', text: 'Skin' })).toBeDefined()
+  await desktop.press({ key: 'skin-flat' })
+  await desktop.unmount()
+  // The terminal draws text whatever the skin, so it does not offer one.
+  const terminal = await mount($, 'skin', 'terminal')
+  for (const skin of SKINS) expect(await terminal.find({ key: 'skin-' + skin })).toBeUndefined()
+  await terminal.unmount()
+  expect(calls).toEqual(['patch:[{"skin":"flat"}]'])
+})
+
+/** The deep's three inks for host Text (art.ts): a skin that is not the deep uses none of them. */
+const DEEP_INKS = ['#f2f0eb', '#cbc8bf', '#9c988e']
+
+test('every skin draws the band, the quick settings and a card on the desktop; flat paints the app\'s surface and its quiet words', async ($, on) => {
+  const noop = () => undefined
+  const bandActions = { toggleAuto: noop, toggleWarm: noop, compact: noop, clear: noop, handoff: noop, toggleLog: noop, toggleAgents: noop, openSettings: noop, toggleEffortMenu: noop, pickEffort: noop, hide: noop }
+  const alertActions = { compact: noop, clear: noop, handoff: noop, dismiss: noop, toggleSave: noop, openSettings: noop, noteInput: noop, setHandoffKind: noop, setHandoffAfter: noop, go: noop, copy: noop, openNew: noop }
+  const full: DashboardView = { ...DASH, extras: ['context', 'limits'], limit: { kind: 'five_hour', percent: 42, save: true }, handoff: 'advised', effortMenu: true, warm: { on: true, pings: 2, cost: 9000 }, agents: { live: 2, total: 3 }, mode: 'Burn GPT' }
+  for (const skin of SKINS) {
+    drawPane(on, skin + '-band', el => renderBand(el, frameOf('desktop', 100, 12, skin), full, bandActions))
+    drawPane(on, skin + '-quick', el => renderSettings(el, frameOf('desktop', 140, 12, skin), { settings: { ...SETTINGS, skin, jevSource: 'typesafe' }, jev: { source: null, test: { state: 'fail', message: 'no' } } }, QUICK_ACTIONS))
+    drawPane(on, skin + '-card', el => renderAlert(el, frameOf('desktop', 100, 12, skin), { kind: 'handoffChoice', handoffKind: 'quick', after: 'continue' }, alertActions))
+    drawPane(on, skin + '-setup', el => renderSetup(el, frameOf('desktop', 100, 12, skin), { step: 1, draft: SETTINGS, jev: { source: null, test: { state: 'idle' } } }, { patch: noop, jevKey: noop, testJev: noop, openAllSettings: noop, back: noop, next: noop, finish: noop, skip: noop }))
+  }
+  for (const skin of SKINS) {
+    for (const what of ['band', 'quick', 'card', 'setup']) {
+      const ui = await mount($, skin + '-' + what, 'desktop')
+      const svgs = await ui.findAll({ type: 'Svg' })
+      expect(svgs.length, skin + ' ' + what + ' pictures').toBeGreaterThan(3)
+      for (const svg of svgs) expect(String(svg.props.source), skin + ' ' + what + ' ' + svg.props.alt).not.toMatch(/NaN|undefined/)
+      // The capsule's backdrop: a picture as wide as the frame (flat's is the app's own surface).
+      const backdrop = svgs.some(svg => svg.props.alt === 'ClaudeRipple' && Number(svg.props.width) > 300)
+      expect(backdrop, skin + ' ' + what + ' backdrop').toBe(true)
+      const colours = new Set((await ui.findAll({ type: 'Text' })).map(text => String(text.props.color ?? '')))
+      if (skin === 'deep') expect(DEEP_INKS.some(ink => colours.has(ink)), skin + ' ' + what + ' ink').toBe(true)
+      else for (const ink of DEEP_INKS) expect(colours.has(ink), skin + ' ' + what + ' ' + ink).toBe(false)
+      if (skin === 'flat') {
+        // The host's ink for values, the app's quiet text colour for the names and asides.
+        expect(['#73726c', '#9c9a92', '#86847d'].some(c => colours.has(c)), skin + ' ' + what + ' quiet words').toBe(true)
+      }
+      await ui.unmount()
+    }
+  }
+})
+
 test('Jev key and Test row appear only for TypeSafe Jev with no known key', async ($, on) => {
   const sources: JevState['source'][] = [null, 'zen', 'env', 'file', 'pasted']
   for (const judge of ['haiku', 'jev', 'model'] as const) {
@@ -517,30 +577,144 @@ const AGENTS: AgentRec[] = [
     toolSince: NOW - 14_000,
     startedAt: NOW - 192_000,
     cost: 38_400,
+    provider: 'chatgpt',
+    effort: 'high',
+    answeredBy: 'gpt-6.1-sol',
+    usage: { input: 1200, cached: 38_000, cacheWrite: 800, output: 5100 },
+    tools: 12,
   },
   { id: 'a2', description: 'Summarize the docs', type: 'deepseek-v4-1-flash', state: 'done', startedAt: NOW - 900_000, endedAt: NOW - 800_000, cost: 9000 },
 ]
 
+const AGENT_NOOP: AgentsActions = { toggleDone: () => undefined, open: () => undefined, back: () => undefined, earlier: () => undefined, toggleRun: () => undefined }
+
+test('the Agents pane draws a worker the session\'s own model runs', async ($, on) => {
+  const onSession: AgentRec = { ...AGENTS[0]!, id: 's1', description: 'Review on the session model', pick: { ...AGENTS[0]!.pick!, target: { agent: 'general-purpose' }, by: 'session' } }
+  drawPane(on, 'agents-session', (el, surface) => renderAgents(el, frameOf(surface, 64), { agents: [onSession], now: NOW, showDone: false }, { ...AGENT_NOOP, toggleDone: () => undefined }))
+  for (const surface of SURFACES) {
+    const ui = await mount($, 'agents-session', surface, 64)
+    expect(await ui.find({ type: 'Text', text: 'Review on the session model' }), surface).toBeDefined()
+    await ui.unmount()
+  }
+})
+
 test('the Agents pane draws live, finished and empty', async ($, on) => {
   const { calls, fn } = recorder()
-  drawPane(on, 'agents', (el, surface) => renderAgents(el, frameOf(surface, 64), { agents: AGENTS, now: NOW, showDone: false }, { toggleDone: fn('done') }))
-  drawPane(on, 'agents-open', (el, surface) => renderAgents(el, frameOf(surface, 64), { agents: AGENTS, now: NOW, showDone: true }, { toggleDone: fn('done') }))
-  drawPane(on, 'agents-empty', (el, surface) => renderAgents(el, frameOf(surface, 64), { agents: [], now: NOW, showDone: false }, { toggleDone: fn('done') }))
+  drawPane(on, 'agents', (el, surface) => renderAgents(el, frameOf(surface, 64), { agents: AGENTS, now: NOW, showDone: false }, { ...AGENT_NOOP, toggleDone: fn('done') }))
+  drawPane(on, 'agents-open', (el, surface) => renderAgents(el, frameOf(surface, 64), { agents: AGENTS, now: NOW, showDone: true }, { ...AGENT_NOOP, toggleDone: fn('done') }))
+  drawPane(on, 'agents-empty', (el, surface) => renderAgents(el, frameOf(surface, 64), { agents: [], now: NOW, showDone: false }, { ...AGENT_NOOP, toggleDone: fn('done') }))
   for (const surface of SURFACES) {
     const ui = await mount($, 'agents', surface, 64)
     expect(await ui.find({ type: 'Text', text: 'Port the request log renderer' }), "ui { type: 'Text', text: 'Port the request log renderer' } " + surface).toBeDefined()
-    // The desktop leaves what an agent is doing to the host's task list above the pane.
-    if (surface === 'terminal') expect(await ui.find({ type: 'Text', text: /Edit hooks\/ui\/log.tsx/ }), surface).toBeDefined()
-    else expect(await ui.find({ type: 'Text', text: /Edit hooks\/ui\/log.tsx/ }), surface).toBeUndefined()
-    expect(await ui.find({ type: 'Text', text: 'Summarize the docs' })).toBeUndefined()
-    expect(await ui.find({ type: 'Text', text: /Frontend \/ Standard/ })).toBeDefined()
-    await ui.press({ key: 'done' })
-    const open = await mount($, 'agents-open', surface, 64)
-    expect(await open.find({ type: 'Text', text: 'Summarize the docs' }), "open { type: 'Text', text: 'Summarize the docs' } " + surface).toBeDefined()
+    // What it does now, on the terminal; the desktop's cards hold still and leave it to the
+    // conversation and the host's task list (2026-10-20).
+    const doing = await ui.find({ type: 'Text', text: /Edit hooks\/ui\/log.tsx · 14s/ })
+    if (surface === 'terminal') expect(doing, surface).toBeDefined()
+    else expect(doing, surface).toBeUndefined()
+    // A finished agent is a card too, not a line behind a fold.
+    expect(await ui.find({ type: 'Text', text: 'Summarize the docs' }), surface).toBeDefined()
+    // Who picked it and why, on the terminal; the desktop's cards leave it out (2026-10-20).
+    const why = await ui.find({ type: 'Text', text: /Frontend \/ Standard/ })
+    if (surface === 'terminal') expect(why, surface).toBeDefined()
+    else expect(why, surface).toBeUndefined()
+    // The API's own counts: 1200 + 38000 + 800 in, 95% of it from the cache, 5100 out, 12 tools.
+    if (surface === 'terminal') expect(await ui.find({ type: 'Text', text: 'in 40k · cache 95% · out 5.1k · tools 12' }), surface).toBeDefined()
+    else for (const value of ['40k', '95%', '5.1k', '12']) expect(await ui.find({ type: 'Text', text: value }), value).toBeDefined()
+    // Two agents finished: nothing hides behind "more".
+    expect(await ui.find({ type: 'Button', key: 'done' }), surface).toBeUndefined()
     const empty = await mount($, 'agents-empty', surface, 64)
     expect(await empty.find({ type: 'Text', text: 'No agents yet' }), "empty { type: 'Text', text: 'No agents yet' } " + surface).toBeDefined()
   }
-  expect(calls).toEqual(['done', 'done'])
+  expect(calls).toEqual([])
+})
+
+test('the Agents pane shows the latest finished agents and the rest behind more; a card opens its conversation', async ($, on) => {
+  const { calls, fn } = recorder()
+  const many: AgentRec[] = [AGENTS[0]!, ...Array.from({ length: 7 }, (_, i): AgentRec => ({ id: 'd' + i, description: 'Finished task ' + i, type: 'Explore', model: 'claude-haiku-5-5', state: i === 0 ? 'failed' : 'done', startedAt: NOW - 600_000, endedAt: NOW - 500_000 + i * 1000, cost: 0 }))]
+  const actions = { ...AGENT_NOOP, toggleDone: fn('done'), open: fn('open') }
+  drawPane(on, 'agents-many', (el, surface) => renderAgents(el, frameOf(surface, 64), { agents: many, now: NOW, showDone: false }, actions))
+  drawPane(on, 'agents-all', (el, surface) => renderAgents(el, frameOf(surface, 64), { agents: many, now: NOW, showDone: true }, actions))
+  for (const surface of SURFACES) {
+    const ui = await mount($, 'agents-many', surface, 64)
+    // Newest first: the four latest show, the oldest three wait behind "more".
+    for (const i of [6, 5, 4, 3]) expect(await ui.find({ type: 'Text', text: 'Finished task ' + i }), surface + ' ' + i).toBeDefined()
+    for (const i of [2, 1, 0]) expect(await ui.find({ type: 'Text', text: 'Finished task ' + i }), surface + ' ' + i).toBeUndefined()
+    expect(await ui.find({ type: 'Button', key: 'done' }), surface).toBeDefined()
+    await ui.press({ key: 'done' })
+    // The desktop presses a card anywhere on it (a blank press a row); the terminal has a button.
+    await ui.press({ key: surface === 'terminal' ? 'open-a1' : 'open-a1-0' })
+    const all = await mount($, 'agents-all', surface, 64)
+    expect(await all.find({ type: 'Text', text: 'Finished task 0' }), surface).toBeDefined()
+    expect(await all.find({ type: 'Text', text: 'failed' }) ?? await all.find({ type: 'Text', text: /^✕/ }), surface).toBeDefined()
+    if (surface === 'desktop') expect(await all.find({ type: 'Button', key: 'open-d0-2' }), surface).toBeDefined()
+  }
+  expect(calls).toEqual(['done', 'open:["a1"]', 'done', 'open:["a1"]'])
+})
+
+test('an agent\'s conversation reads in the pane: the task, its words, its tools, the answer, and a way back', async ($, on) => {
+  const { calls, fn } = recorder()
+  const actions = { ...AGENT_NOOP, back: fn('back'), earlier: fn('earlier') }
+  const talk: AgentEntry[] = [
+    { kind: 'prompt', text: 'Port the log renderer to the new kit.' },
+    { kind: 'text', text: 'Reading the **current** renderer first.' },
+    { kind: 'tool', id: 't1', tool: 'Read', detail: 'hooks/ui/log.tsx', state: 'ok' },
+    { kind: 'tool', id: 't2', tool: 'Bash', detail: 'npm test', state: 'error' },
+    { kind: 'tool', id: 't3', tool: 'Edit', detail: 'hooks/ui/log.tsx', state: 'running' },
+  ]
+  const done: AgentRec = { ...AGENTS[0]!, id: 'a9', state: 'done', endedAt: NOW - 1000, now: undefined, toolSince: undefined }
+  const long: AgentEntry[] = [talk[0]!, ...Array.from({ length: 45 }, (_, i): AgentEntry => ({ kind: 'tool', id: 'x' + i, tool: 'Grep', detail: 'pattern ' + i, state: 'ok' }))]
+  drawPane(on, 'talk-live', (el, surface) => renderAgents(el, frameOf(surface, 64), { agents: AGENTS, now: NOW, showDone: false, open: { id: 'a1', talk: { entries: talk }, earlier: 0 } }, actions))
+  drawPane(on, 'talk-done', (el, surface) => renderAgents(el, frameOf(surface, 64), { agents: [done], now: NOW, showDone: false, open: { id: 'a9', talk: { entries: [...talk.slice(0, 3), { kind: 'text', text: 'Ported; tests pass.' }] }, earlier: 0 } }, actions))
+  drawPane(on, 'talk-long', (el, surface) => renderAgents(el, frameOf(surface, 64), { agents: AGENTS, now: NOW, showDone: false, open: { id: 'a1', talk: { entries: long }, earlier: 0, runsOpen: ['x15'] } }, actions))
+  drawPane(on, 'talk-deny', (el, surface) => renderAgents(el, frameOf(surface, 64), { agents: AGENTS, now: NOW, showDone: false, open: { id: 'a1', talk: { deny: 'no saved transcript for a1' }, earlier: 0 } }, actions))
+  drawPane(on, 'talk-gone', (el, surface) => renderAgents(el, frameOf(surface, 64), { agents: AGENTS, now: NOW, showDone: false, open: { id: 'zz', talk: { entries: [] }, earlier: 0 } }, actions))
+  for (const surface of SURFACES) {
+    const live = await mount($, 'talk-live', surface, 64)
+    expect(await live.find({ type: 'Text', text: 'Port the request log renderer' }), surface).toBeDefined()
+    expect(await live.find({ type: 'Text', text: 'Task' }), surface).toBeDefined()
+    // Its three calls fold into one line; the one it is in now still shows under it.
+    expect(await live.find({ type: surface === 'desktop' ? 'Text' : 'Button', text: /^Read 1 file, Ran 1 command, Edited 1 file/ }), surface).toBeDefined()
+    expect(await live.find({ type: 'Text', text: '1 failed' }), surface).toBeDefined()
+    expect(await live.find({ type: 'Text', text: /^Edit$/ }), surface).toBeDefined()
+    for (const tool of ['Read', 'Bash']) expect(await live.find({ type: 'Text', text: new RegExp('^' + tool + '$') }), surface + ' ' + tool).toBeUndefined()
+    // Its words as Markdown on the desktop, plain text on the terminal; no answer while it runs.
+    if (surface === 'desktop') expect((await live.findAll({ type: 'Markdown' })).some(m => m.props.text === 'Reading the **current** renderer first.'), surface).toBe(true)
+    else expect(await live.find({ type: 'Text', text: 'Reading the **current** renderer first.' }), surface).toBeDefined()
+    expect(await live.find({ type: 'Text', text: 'Final answer' }), surface).toBeUndefined()
+    await live.press({ key: 'back' })
+    const finished = await mount($, 'talk-done', surface, 64)
+    expect(await finished.find({ type: 'Text', text: 'Final answer' }), surface).toBeDefined()
+    const long_ = await mount($, 'talk-long', surface, 64)
+    // The task stays at the head; 30 of the 45 calls show, 15 wait behind "earlier".
+    expect(await long_.find({ type: 'Text', text: 'pattern 44' }), surface).toBeDefined()
+    expect(await long_.find({ type: 'Text', text: 'pattern 14' }), surface).toBeUndefined()
+    await long_.press({ key: 'earlier' })
+    const deny = await mount($, 'talk-deny', surface, 64)
+    expect(await deny.find({ type: 'Text', text: /can’t be read: no saved transcript for a1/ }), surface).toBeDefined()
+    const gone = await mount($, 'talk-gone', surface, 64)
+    expect(await gone.find({ type: 'Text', text: 'This agent is no longer in the list.' }), surface).toBeDefined()
+    await gone.press({ key: 'back' })
+  }
+  expect(calls).toEqual(['back', 'earlier', 'back', 'back', 'earlier', 'back'])
+})
+
+test('talkOf reads a conversation into prompts, words and tool calls that stand answered, failed or running', () => {
+  const entries = talkOf([
+    { role: 'user', text: ' Do the thing. ', toolUses: [] },
+    { role: 'assistant', text: 'On it.', toolUses: [
+      { tool_use_id: 'u1', tool: 'Bash', input: { command: 'npm test\nmore' }, text: 'ok' },
+      { tool_use_id: 'u2', tool: 'Read', input: { file_path: '/a.ts' }, text: 'nope', isError: true },
+      { tool_use_id: 'u3', tool: 'Grep', input: { pattern: 'x' } },
+    ] },
+    { role: 'user', text: '', toolUses: [] },
+  ])
+  expect(entries).toEqual([
+    { kind: 'prompt', text: 'Do the thing.' },
+    { kind: 'text', text: 'On it.' },
+    { kind: 'tool', id: 'u1', tool: 'Bash', detail: 'npm test', state: 'ok' },
+    { kind: 'tool', id: 'u2', tool: 'Read', detail: '/a.ts', state: 'error' },
+    { kind: 'tool', id: 'u3', tool: 'Grep', detail: 'x', state: 'running' },
+  ])
 })
 
 test('the log pane lists this session\'s verdicts among its requests, a fallback in plain words', async ($, on) => {
@@ -680,8 +854,8 @@ test('no drawing cuts its text: no truncating Text on any surface', async ($, on
   const settingsActions = QUICK_ACTIONS
   const cases: [string, Draw][] = [
     ['cut-quick', (el, surface) => renderSettings(el, frameOf(surface, 60, 30), { settings: SETTINGS, jev: { source: null, test: { state: 'fail', message: 'key rejected (401) '.repeat(4) } } }, settingsActions)],
-    ['cut-agents', (el, surface) => renderAgents(el, frameOf(surface, 40), { agents: AGENTS.map(a => ({ ...a, description: a.description + ' and a much longer tail of words that runs past any pane width', state: 'running' as const })), now: NOW, showDone: true }, { toggleDone: noop })],
-    ['cut-agents-done', (el, surface) => renderAgents(el, frameOf(surface, 40), { agents: AGENTS, now: NOW, showDone: true }, { toggleDone: noop })],
+    ['cut-agents', (el, surface) => renderAgents(el, frameOf(surface, 40), { agents: AGENTS.map(a => ({ ...a, description: a.description + ' and a much longer tail of words that runs past any pane width', state: 'running' as const })), now: NOW, showDone: true }, { ...AGENT_NOOP, toggleDone: noop })],
+    ['cut-agents-done', (el, surface) => renderAgents(el, frameOf(surface, 40), { agents: AGENTS, now: NOW, showDone: true }, { ...AGENT_NOOP, toggleDone: noop })],
     ['cut-log', (el, surface) => renderLog(el, frameOf(surface, 40), { rows: [{ at: '2026-10-10T13:19:10', source: 'a-very-long-requested-model-name@high', target: 'another-very-long-routed-model-name', provider: 'opencode-go', status: 200, ok: true, ms: 2140 }], mineOnly: false }, { toggleScope: noop })],
     ...ALERTS.map((alert, i): [string, Draw] => ['cut-alert-' + i, (el, surface) => renderAlert(el, frameOf(surface, 40), alert, { compact: noop, clear: noop, handoff: noop, dismiss: noop, toggleSave: noop, openSettings: noop, noteInput: noop, setHandoffKind: noop, setHandoffAfter: noop, go: noop, copy: noop, openNew: noop })]),
   ]
@@ -926,12 +1100,13 @@ test('a control\'s tip is drawn in a full band, hidden and revealed by its scope
   const ui = await mount($, 'n100', 'desktop', 100)
   const tree = await ui.drawn()
   const tips = tipsOf(tree)
-  // One tip per fact and control (the effort, the context, the cache, the limit, the route, and
-  // every control but Handoff, which names itself in its pill) plus the way out — the row is full
-  // and all are drawn.
-  expect(tips.length, 'tips: ' + tips.map(t => t.text.slice(0, 14)).join(' / ')).toBe(12)
+  // One tip per fact and control (the effort, the context, the cache, the limit, and every control
+  // but Handoff, which names itself in its pill) plus the way out — the row is full and all are
+  // drawn. The route has none: it lights as a button, and the log it opens is its card (028aee5).
+  expect(tips.length, 'tips: ' + tips.map(t => t.text.slice(0, 14)).join(' / ')).toBe(11)
   const words = (start: string) => tips.find(tip => tip.text.startsWith(start))
-  for (const start of ['Opus 5.5 · Auto', 'Context 38%', 'Prompt cache', 'Weekly limit 42%', 'Last route', 'Effort Auto', 'Keep cache warm', 'Agents:', 'Compact — ', 'New start (/clear) — ', 'Ripple settings', 'Hide the band']) {
+  expect(words('Last route')).toBeUndefined()
+  for (const start of ['Opus 5.5 · Auto', 'Context 38%', 'Prompt cache', 'Weekly limit 42%', 'Effort Auto', 'Keep cache warm', 'Agents:', 'Compact — ', 'New start (/clear) — ', 'Ripple settings', 'Hide the band']) {
     expect(words(start), start).toBeDefined()
   }
   for (const tip of tips) {
@@ -945,3 +1120,176 @@ test('a control\'s tip is drawn in a full band, hidden and revealed by its scope
   expect(await ui.find({ type: 'Button', key: 'compact' })).toBeDefined()
   await ui.unmount()
 })
+
+test('with the limits row drawn, save mode\'s word follows Claude\'s windows', async ($, on) => {
+  const limits: DashboardView['limits'] = [
+    { provider: 'claude', account: 0, kind: 'five_hour', label: '', percent: 86 },
+    { provider: 'claude', account: 0, kind: 'seven_day', label: '', percent: 40 },
+  ]
+  const view = (save: boolean): DashboardView => ({ ...DASH, limit: { kind: 'five_hour', percent: 86, save }, limits, extras: ['limits'] })
+  drawPane(on, 'saving', el => renderBand(el, frameOf('desktop', 100), view(true), BAND_ACTIONS))
+  drawPane(on, 'spending', el => renderBand(el, frameOf('desktop', 100), view(false), BAND_ACTIONS))
+  const saving = await mount($, 'saving', 'desktop', 100)
+  expect(await saving.find({ type: 'Text', text: /^save$/ }), 'save word').toBeDefined()
+  // The first row's limit stepped aside: 86% shows once, in the limits row.
+  const at86 = await saving.findAll({ type: 'Text', text: /^86%$/ })
+  expect(at86.length).toBe(1)
+  await saving.unmount()
+  const spending = await mount($, 'spending', 'desktop', 100)
+  expect(await spending.find({ type: 'Text', text: /^save$/ })).toBeUndefined()
+  await spending.unmount()
+})
+
+
+// ---- Tool runs (2026-10-20: a worker's commands read as a wall, each wrapped over lines) ------------
+
+test('a run of tool calls is headed in one line as the Claude app heads it', () => {
+  const call = (id: string, tool: string, detail: string, state: 'ok' | 'error' | 'running' = 'ok') => ({ id, tool, detail, state })
+  const run = [call('1', 'Bash', 'npm test'), call('2', 'Read', 'a.ts'), call('3', 'Read', 'a.ts'), call('4', 'Bash', 'ls', 'error'), call('5', 'Edit', 'a.ts')]
+  // A file read twice counts once; a read and an edit of one file count in each kind.
+  expect(runSummary(run, 'ko')).toEqual({ text: '명령어 2개 실행함, 파일 1개 읽음, 파일 1개를 편집함', failed: 1 })
+  expect(runSummary(run.slice(0, 2), 'en')).toEqual({ text: 'Ran 1 command, Read 1 file', failed: 0 })
+  expect(runSummary([call('1', 'Bash', 'a'), call('2', 'Bash', 'b')], 'es').text).toBe('2 comandos ejecutados')
+  expect(runSummary([call('1', 'Bash', 'a')], 'es').text).toBe('1 comando ejecutado')
+  // Five kinds or more: the first three, the rest counted.
+  const kinds = [call('1', 'Bash', 'x'), call('2', 'Read', 'a'), call('3', 'Edit', 'b'), call('4', 'Grep', 'c'), call('5', 'WebFetch', 'd'), call('6', 'WebFetch', 'e')]
+  expect(runSummary(kinds, 'ko').text).toBe('명령어 1개 실행함, 파일 1개 읽음, 파일 1개를 편집함, 그 외 작업 3개')
+  expect(runSummary(kinds, 'en').text).toBe('Ran 1 command, Read 1 file, Edited 1 file, and 3 more actions')
+})
+
+test('a call reads as one short line: no leading cd, paths short, a command\'s description first', () => {
+  const place = { cwd: '/Users/pbj/Documents/tabripple', home: '/Users/pbj' }
+  expect(commandLine('cd /Users/pbj/Documents/tabripple/android && ./gradlew :core:test -q 2>&1 | grep -vE "^w:"', place)).toBe('./gradlew :core:test -q 2>&1 | grep -vE "^w:"')
+  expect(commandLine('cd "/tmp/a b"; npm test', place)).toBe('npm test')
+  expect(commandLine('cd android\n./gradlew build', place)).toBe('./gradlew build')
+  expect(commandLine('cat > /Users/pbj/Documents/tabripple/notes.md <<\'EOF\'\nline one\nEOF', place)).toBe('cat > notes.md <<\'EOF\'')
+  expect(commandLine('ls /Users/pbj/Documents/tabripple /Users/pbj/.gradle /Users/pbj/Documents/tabripple2', place)).toBe('ls . ~/.gradle ~/Documents/tabripple2')
+  expect(shortPath('/Users/pbj/Documents/tabripple/app/Main.kt', place)).toBe('app/Main.kt')
+  expect(shortPath('/Users/pbj/.zshrc', place)).toBe('~/.zshrc')
+  expect(shortPath('/etc/hosts', place)).toBe('/etc/hosts')
+  expect(shortPath('/Users/pbj/x', { home: '~' })).toBe('/Users/pbj/x')
+  expect(toolDetail('Bash', { command: 'cd /x && npm test', description: 'Run the unit tests\nquietly' }, place)).toBe('Run the unit tests')
+  expect(toolDetail('Bash', { command: 'cd /x && npm test', description: '' }, place)).toBe('npm test')
+  expect(toolDetail('Edit', { file_path: '/Users/pbj/Documents/tabripple/core/A.kt' }, place)).toBe('core/A.kt')
+  expect(toolDetail('Grep', { pattern: 'TODO', path: '/Users/pbj/Documents/tabripple/core' }, place)).toBe('TODO · core')
+  expect(talkOf([{ role: 'assistant', text: '', toolUses: [{ tool_use_id: 'u1', tool: 'Read', input: { file_path: '/Users/pbj/Documents/tabripple/a.kt' }, text: 'ok' }] }], place))
+    .toEqual([{ kind: 'tool', id: 'u1', tool: 'Read', detail: 'a.kt', state: 'ok' }])
+})
+
+test('a run of calls folds into its head, unfolds call by call when pressed, and a single call stays one line', async ($, on) => {
+  const { calls, fn } = recorder()
+  const actions = { ...AGENT_NOOP, toggleRun: fn('run') }
+  const bash = (i: number, state: 'ok' | 'error' = 'ok'): AgentEntry => ({ kind: 'tool', id: 'b' + i, tool: 'Bash', detail: commandLine('cd /Users/pbj/Documents/tabripple/android && ./gradlew :core:test --tests "*Parser*" -q 2>&1 | grep -vE "^(w:|warning)" | tail -40 # run ' + i), state })
+  const talk: AgentEntry[] = [
+    { kind: 'prompt', text: 'Fix the parser tests.' },
+    { kind: 'text', text: 'Running the suite.' },
+    ...Array.from({ length: 8 }, (_, i) => bash(i, i === 3 ? 'error' : 'ok')),
+    { kind: 'tool', id: 'e1', tool: 'Edit', detail: 'core/src/Parser.kt', state: 'ok' },
+    { kind: 'text', text: 'One more check.' },
+    { kind: 'tool', id: 'solo', tool: 'Bash', detail: 'git status', state: 'ok' },
+  ]
+  const done: AgentRec = { ...AGENTS[0]!, id: 'a9', state: 'done', endedAt: NOW - 1000, now: undefined, toolSince: undefined }
+  drawPane(on, 'runs-folded', (el, surface) => renderAgents(el, frameOf(surface, 64), { agents: [done], now: NOW, showDone: false, open: { id: 'a9', talk: { entries: talk }, earlier: 0 } }, actions))
+  drawPane(on, 'runs-open', (el, surface) => renderAgents(el, frameOf(surface, 64), { agents: [done], now: NOW, showDone: false, open: { id: 'a9', talk: { entries: talk }, earlier: 0, runsOpen: ['b0'] } }, actions))
+  for (const surface of SURFACES) {
+    const folded = await mount($, 'runs-folded', surface, 64)
+    expect(await folded.find({ type: surface === 'desktop' ? 'Text' : 'Button', text: /^Ran 8 commands, Edited 1 file/ }), surface).toBeDefined()
+    expect(await folded.find({ type: 'Text', text: '1 failed' }), surface).toBeDefined()
+    // Folded, none of its calls show; the single call after the words is its own line, no head.
+    expect(await folded.findAll({ type: 'Text', text: /^Bash$/ }), surface).toHaveLength(1)
+    expect(await folded.find({ type: 'Text', text: 'git status' }), surface).toBeDefined()
+    expect(await folded.find({ type: 'Button', key: 'run-solo' }), surface).toBeUndefined()
+    await folded.press({ key: 'run-b0' })
+    const open = await mount($, 'runs-open', surface, 64)
+    expect(await open.findAll({ type: 'Text', text: /^Bash$/ }), surface).toHaveLength(9)
+    expect(await open.find({ type: 'Text', text: /^Edit$/ }), surface).toBeDefined()
+    // Each call one line, its cd gone, cut with an ellipsis before the pane's edge.
+    const details = (await open.findAll({ type: 'Text', text: /gradlew/ })).map(d => d.text)
+    expect(details, surface).toHaveLength(8)
+    for (const detail of details) {
+      expect(detail.startsWith('./gradlew :core:test'), detail).toBe(true)
+      expect(detail.endsWith('…'), detail).toBe(true)
+      // Narrower than the 64-cell pane in the surface's own measure: cells there, the sans's ch here.
+      expect((surface === 'desktop' ? chOf(detail) : displayWidth(detail)) < 64, surface + ' ' + detail).toBe(true)
+    }
+    await open.press({ key: 'run-b0' })
+  }
+  expect(calls).toEqual(['run:["b0"]', 'run:["b0"]', 'run:["b0"]', 'run:["b0"]'])
+})
+
+// ---- The cards hold still (2026-10-20: titles re-wrapped as the time ticked, and the pane jumped) --
+
+const STILL_TITLE = 'Port the request log renderer to the new kit and keep every test green while doing it'
+const STILL_AGENT: AgentRec = { ...AGENTS[0]!, description: STILL_TITLE, model: 'deepseek-ai/deepseek-v4.1-flash-1017@high', answeredBy: 'deepseek-ai/deepseek-v4.1-flash-1017', provider: 'deepseek' }
+/** Each pair: the agent's elapsed time before and after one second (a tick, 59s → 1m, 9m 59s → 10m). */
+const STILL_PAIRS: [number, number][] = [[192_000, 193_000], [59_000, 60_000], [599_000, 600_000]]
+/** Pane widths: ~560 px, ~360 px, ~260 px. */
+const STILL_COLUMNS = [68, 44, 33]
+const STILL_LANGS = ['en', 'ko', 'es'] as const
+const stillId = (lang: string, columns: number, i: number, side: string) => ['still', lang, columns, i, side].join('-')
+
+test('a running card draws the same tree a tick on and across 59s → 1m 00s and 9m 59s → 10m 00s, but for its time, wide and narrow', async ($, on) => {
+  for (const lang of STILL_LANGS) {
+    for (const columns of STILL_COLUMNS) {
+      for (const [i, [before, after]] of STILL_PAIRS.entries()) {
+        const agent: AgentRec = { ...STILL_AGENT, startedAt: NOW - before }
+        // A step on, the agent is in another tool: the card must not show it.
+        const later: AgentRec = { ...agent, now: 'Edit hooks/ui/log.tsx', toolSince: NOW + 500 }
+        for (const [side, ms, rec] of [['a', 0, agent], ['b', after - before, later]] as const) {
+          drawPane(on, stillId(lang, columns, i, side), el => renderAgents(el, { ...frameOf('desktop', columns), lang, now: NOW + ms }, { agents: [rec], now: NOW + ms, showDone: false }, AGENT_NOOP))
+        }
+      }
+    }
+  }
+  drawPane(on, 'still-fresh', el => renderAgents(el, frameOf('desktop', 68), { agents: [{ ...STILL_AGENT, id: 'a0', usage: undefined, tools: undefined, now: undefined, toolSince: undefined }], now: NOW, showDone: false }, AGENT_NOOP))
+  for (const lang of STILL_LANGS) {
+    for (const columns of STILL_COLUMNS) {
+      for (const [i, [before, after]] of STILL_PAIRS.entries()) {
+        const at = (s: string) => stillId(lang, columns, i, s)
+        const times = [elapsed(before, lang), elapsed(after, lang)]
+        expect(times[0], at('')).not.toBe(times[1])
+        const masked = async (side: string) => {
+          const ui = await mount($, at(side), 'desktop', columns)
+          const tree = unhandled(await ui.drawn()).split(JSON.stringify(times[0])).join('"#"').split(JSON.stringify(times[1])).join('"#"')
+          await ui.unmount()
+          return tree
+        }
+        expect(await masked('b'), at('')).toBe(await masked('a'))
+      }
+    }
+  }
+  // The numbers rows are there from the start, a dash for each figure not yet reported.
+  const fresh = await mount($, 'still-fresh', 'desktop', 68)
+  expect(await fresh.findAll({ type: 'Text', text: /^–$/ })).toHaveLength(3)
+  expect(await fresh.find({ type: 'Text', text: /^0$/ })).toBeDefined()
+  for (const lang of ['en', 'ko', 'zh', 'ja', 'es', 'pt'] as const) {
+    for (const columns of STILL_COLUMNS) {
+      const frame = { ...frameOf('desktop', columns), lang }
+      // The time's column holds its widest value in every language.
+      for (const ms of [59_000, 3_599_000, 99 * 3_600_000 + 59 * 60_000]) expect(chOf(elapsed(ms, lang)) <= timeCells(frame, STILL_AGENT), lang + ' ' + elapsed(ms, lang)).toBe(true)
+      // Growing figures never add a row.
+      expect(cardRows(frame, STILL_AGENT), lang + ' ' + columns).toBe(cardRows(frame, { ...STILL_AGENT, usage: { input: 9_900_000, cached: 90_000_000, cacheWrite: 0, output: 99_000_000 }, tools: 999 }))
+    }
+  }
+})
+
+test('a narrow card keeps its model on one line without the vendor path, and its numbers in two fixed rows', async ($, on) => {
+  const why = 'session model · General / Standard'
+  const agent: AgentRec = { ...STILL_AGENT, pick: { ...STILL_AGENT.pick!, why, by: 'session' } }
+  drawPane(on, 'narrow-card', el => renderAgents(el, { ...frameOf('desktop', 33), lang: 'ko' }, { agents: [agent], now: NOW, showDone: false }, AGENT_NOOP))
+  drawPane(on, 'wide-card', el => renderAgents(el, { ...frameOf('desktop', 68), lang: 'ko' }, { agents: [agent], now: NOW, showDone: false }, AGENT_NOOP))
+  const narrow = await mount($, 'narrow-card', 'desktop', 33)
+  const wide = await mount($, 'wide-card', 'desktop', 68)
+  for (const ui of [narrow, wide]) {
+    // No vendor path, and no pick line.
+    expect(await ui.find({ type: 'Text', text: /deepseek-ai\// })).toBeUndefined()
+    expect(await ui.find({ type: 'Text', text: /^deepseek-v/ })).toBeDefined()
+    expect(await ui.find({ type: 'Text', text: /표준/ })).toBeUndefined()
+    expect(await ui.find({ type: 'Text', text: why })).toBeUndefined()
+  }
+  // Narrow: the name is cut to fit beside the effort; the numbers take two rows, the time ends one.
+  expect((await narrow.find({ type: 'Text', text: /^deepseek-v/ }))!.text.endsWith('…')).toBe(true)
+  expect(await narrow.find({ key: 'nums-1' })).toBeDefined()
+  expect(await wide.find({ key: 'nums-1' })).toBeUndefined()
+  expect(await narrow.find({ type: 'Text', text: '3m 12s' }) ?? await narrow.find({ type: 'Text', text: '3분 12초' })).toBeDefined()
+})