@cmodjs/core 4.0.3 → 4.1.1

package/src/testing.ts

@@ -4,8 +4,10 @@ import type {
   CmodDependencies,
   CommandPresentation,
   CommandRunResult,
+  ElementTable,
   EventResult,
   Frozen,
+  MarkdownProps,
   PaneOpenArgs,
   PluginOptions,
   PressedLink,
@@ -23,7 +25,7 @@ import type { Options, OptionValues } from './options.js'
 import { hotkeyCommand, readSteps, storeFolder, type Steps } from './records.js'
 import type { Claude } from './runtime/claude.js'
 import { answerCall, cmodPluginName, notInstalled } from './runtime/dependencies.js'
-import { closingContext, foldBefore, installBefore, withAnswer, type Answers } from './runtime/before.js'
+import { closingContext, foldBefore, installBefore, withAnswer, type Answers, type Decide } from './runtime/before.js'
 import { permissionRoutes } from './runtime/permission-check.js'
 import type { RoutedEvent } from './runtime/hooks.js'
 import { keepClaudeCode, type ClaudeCode } from './testing/claude-code.js'
@@ -31,7 +33,7 @@ import { createRouter } from './runtime/router.js'
 import { toolInputOf } from './runtime/tool-calls.js'
 import { createLifecycle } from './runtime/lifecycle.js'
 import { MissingOptions } from './runtime/options.js'
-import { conversationMethods } from './runtime/sessions.js'
+import { conversationMethods, pickedColor, type SessionColor } from './runtime/sessions.js'
 import type { ShownToast } from './runtime/toaster.js'
 import { Message } from './session/context/turn/message/message.js'
 import { Note, untagged } from './session/context/turn/message/note.js'
@@ -45,19 +47,19 @@ import { TaskStart } from './session/goal/task.js'
 import { calledAnswer, fakeClaude, type Fakes, type Shown as ShownByClaude, type TestCall } from './testing/fake-claude.js'
 import { elements, findElement, rowsOf } from './testing/fake-elements.js'
 import { fakeFiles } from './testing/fake-files.js'
-import { fakeSessions, type FakeSession, type FakeSessions, type MessageDraft } from './testing/fake-sessions.js'
+import { fakeSessions, type FakeSession, type FakeSessions, type MessageDraft, type StartedTask } from './testing/fake-sessions.js'
 import { listed, messageOf } from './utils/text.js'
-import { componentOf, type Row, type StyleProps } from './ui/styles.js'
+import { componentOf, type KindProps, type Row, type StyledAt } from './ui/styles.js'
 import { areas, TurnEnd as TurnEndArea, type Area } from './ui/areas.js'
 import { drawWith, elementOf } from './ui/elements.js'
 import { drawnParts } from './runtime/parts.js'
 import { serveWidgets, type Widgets } from './runtime/widgets.js'
 import { engineOf } from './runtime/engine.js'
-import { pagesOf } from './runtime/pages.js'
+import { pagesOf, servePages } from './runtime/pages.js'
 import { partMethods, type DrawnPart, type PageRequest, type PartPress, type PartsUpdate } from './runtime/ui.js'
 
 export type { Fakes, TestCall } from './testing/fake-claude.js'
-export type { FakeSession, MessageDraft } from './testing/fake-sessions.js'
+export type { FakeSession, MessageDraft, StartedTask } from './testing/fake-sessions.js'
 export type { RoutedEvent } from './runtime/hooks.js'
 export type { ShownToast } from './runtime/toaster.js'
 
@@ -116,12 +118,12 @@ export type TestedMod<State extends object> = {
   fire<N extends FiredEvent>(event: N, input: Args<N>, below?: EventResult<N>): Promise<EventResult<N>>
   settle(): Promise<void>
   add(message: MessageDraft, options?: { readonly task?: string }): Promise<Message[]>
-  endTurn(ending?: Pick<Turn, 'answer' | 'failure'>): Promise<void>
+  endTurn(ending?: Pick<Turn, 'answer' | 'failure'>, options?: { readonly task?: string }): Promise<void>
   compact(): Promise<void>
   startSession(start: { readonly source: 'startup' | 'resume' | 'clear' | 'fork'; readonly id?: string }): Promise<void>
-  startTask(task: { readonly title: string; readonly agentType?: string; readonly model?: string; readonly openedBy?: string; readonly parent?: string }): Promise<string>
+  startTask(task: StartedTask): Promise<string>
   lines(area: Area, props?: { readonly columns?: number }): Promise<string[]>
-  lines<K extends Row>(kind: K, props: Omit<StyleProps<K>, 'Default'>, requestId?: string): Promise<string[]>
+  lines<K extends Row>(kind: K, props: KindProps<K>, requestId?: string): Promise<string[]>
   type(line: string): Promise<CommandReply>
   hotkey(name: string): Promise<void>
   callTool(name: string, input: Record<string, unknown>): Promise<EventResult<'tool.call'>>
@@ -159,9 +161,11 @@ export function testMod<State extends object, Declared extends Options = Options
   fake.claude.session.cwd = async () => cwd
   const conversations = fakeSessions({
     callTool: (args: Parameters<Claude["tool"]["call"]>[0]) => fake.claude.tool.call(args),
+    listAgents: () => fake.fakes.agent.list?.() ?? Promise.resolve([]),
     project: () => projectRoot,
     cwd: () => cwd,
     given: options.sessions ?? [],
+    decide: (event, change) => decide(event, change),
     push: (mod, session, change) => {
       if (mod !== name) return
       const pushed = { to: mod, method: conversationMethods.changed, input: { session, change }, caller: cmodPluginName } as unknown as Frozen<Args<'cmod.call'>>
@@ -170,6 +174,13 @@ export function testMod<State extends object, Declared extends Options = Options
   })
   conversations.start(sessionId)
   const callMod = async (method: string, input: unknown, caller = cmodPluginName) => calledAnswer(caller, await lifecycle.route('cmod.call', { to: name, method, input, caller } as unknown as Frozen<Args<'cmod.call'>>, async () => ({ deny: notInstalled(name) })))
+  const tellColor = async (told: SessionColor) => {
+    if (name !== cmodPluginName) await callMod(conversationMethods.sessionColor, told)
+  }
+  const tellHeldColor = async () => {
+    const held = conversations.color()
+    if (held.color !== undefined) await tellColor(held)
+  }
   let declaredPages: ReturnType<typeof pagesOf> = []
   let openPages: { readonly id: string; readonly params: unknown }[] = []
   let shownPage: { readonly id: string; readonly params: unknown; readonly isFocused: boolean } | undefined
@@ -191,33 +202,61 @@ export function testMod<State extends object, Declared extends Options = Options
     await tellShown()
   }
   let widgets: Promise<Widgets> | undefined
+  let stylesMarkdown = false
+  const ownMarkdown = new Map<string, DrawnPart | null>()
+  const missedMarkdown = new Map<string, { readonly markdown: string } & StyledAt>()
   const updated = async ({ parts, redraw, requests }: PartsUpdate) => {
-    if (parts !== undefined) declaredPages = pagesOf(parts)
+    if (parts !== undefined) {
+      declaredPages = pagesOf(parts)
+      stylesMarkdown = parts.stylesMarkdown === true
+      ownMarkdown.clear()
+    }
     if (parts !== undefined || redraw !== undefined) (await widgetsOf()).update(name, { ...(parts === undefined ? {} : { parts }), ...(redraw === undefined ? {} : { redraw }) })
     if (requests !== undefined && requests.length > 0) await applyRequests(requests)
   }
   const pressPart = (input: PartPress) => callMod(partMethods.press, input).then((update) => updated((update ?? {}) as PartsUpdate))
+  const markdownIn = (table: ElementTable, at: StyledAt) => (props: MarkdownProps): RenderElement => {
+    const drawnAt = `${at.surface}\u0000${at.columns}\u0000${props.text}`
+    const drawn = stylesMarkdown ? ownMarkdown.get(drawnAt) : null
+    if (drawn === undefined) missedMarkdown.set(drawnAt, { markdown: props.text, ...at })
+    if (drawn === undefined || drawn === null || drawn.tree === null) return table.Markdown(props)
+    const { draw, tree } = drawn
+    return drawWith(table, () => elementOf(tree, '', (handler, args) => void pressPart({ draw, handler, args }))) as RenderElement
+  }
+  const withOwnMarkdown = async <Drawn>(draw: () => Promise<Drawn>): Promise<Drawn> => {
+    const first = await draw()
+    if (missedMarkdown.size === 0) return first
+    for (const [drawnAt, input] of missedMarkdown) ownMarkdown.set(drawnAt, (await callMod(partMethods.draw, input)) as DrawnPart | null)
+    missedMarkdown.clear()
+    return draw()
+  }
+  const cmodClaude: Claude = { ...fake.claude, cmod: { call: async (input) => (input.to === name ? callMod(input.method, input.input) : fake.claude.cmod.call(input)) } }
+  const reportPart = (_id: string, message: string, error: unknown) => fake.claude.ui.log(`cmod: ${message}: ${messageOf(error)}`, { to: 'debug' })
+  const parts = drawnParts({ claude: cmodClaude, report: reportPart, press: (_mod: string, input: PartPress) => void pressPart(input).catch((error: unknown) => fake.claude.ui.log(`cmod: ${name} did not take the press: ${messageOf(error)}`, { to: 'debug' })) })
   const servedWidgets = async (): Promise<Widgets> => {
     const own = name === cmodPluginName && lifecycle.mod !== undefined ? engineOf(lifecycle.mod).widgets : undefined
     if (own !== undefined) return own
-    const claude: Claude = { ...fake.claude, cmod: { call: async (input) => (input.to === name ? callMod(input.method, input.input) : fake.claude.cmod.call(input)) } }
-    const report = (_id: string, message: string, error: unknown) => fake.claude.ui.log(`cmod: ${message}: ${messageOf(error)}`, { to: 'debug' })
-    const press = (_mod: string, input: PartPress) => void pressPart(input).catch((error: unknown) => fake.claude.ui.log(`cmod: ${name} did not take the press: ${messageOf(error)}`, { to: 'debug' }))
     return serveWidgets({
-      claude,
+      claude: cmodClaude,
       router: cmodPlugin,
       store: storeFolder({ HOME: await fake.claude.env.home(), XDG_DATA_HOME: await fake.claude.env.dataHome() }),
-      report,
+      report: reportPart,
       turnClosedBy: () => conversations.lastTurn(),
-      parts: drawnParts({ claude, report, press }),
+      parts,
+      markdownIn,
     })
   }
   const widgetsOf = () => (widgets ??= servedWidgets())
+  const cmodBeneath = createRouter()
+  const pages = servePages({ claude: cmodClaude, router: cmodBeneath, report: reportPart, widgets: { update: (mod, update) => void widgetsOf().then((served) => served.update(mod, update)) }, parts, tellStylers: () => undefined })
+  pages.apply((_mod, requests) => applyRequests(requests))
   const dependencies = fakeDependencies(name, options.dependencies ?? {}, conversations)
   fake.fakes.cmod.call = async (call) => {
     if (call.to !== cmodPluginName || call.method !== partMethods.changed) return dependencies(call)
-    await updated(call.input as PartsUpdate)
-    return { isHeld: (call.input as PartsUpdate).isAsked === true }
+    const { requests, isAsked, ...listing } = call.input as PartsUpdate
+    const isHeld = isAsked === true && requests !== undefined && pages.update(name, { requests, isAsked })
+    await updated(isAsked === true ? listing : (call.input as PartsUpdate))
+    return { isHeld }
   }
   const appendRow = fake.claude.session.append
   fake.claude.session.append = async (args) => {
@@ -244,6 +283,7 @@ export function testMod<State extends object, Declared extends Options = Options
   const state = Object.fromEntries(declared.map(([lifetime, values]) => [lifetime, { ...values, ...starting?.[lifetime] }])) as State
   const lifecycle = createLifecycle<State, Declared>({ ...definition, state }, () => permissionRoutes,(options.options ?? {}) as PluginOptions, false)
   let started: Promise<void> | undefined
+  let isColorTold = false
 
   const start = async () => {
     started ??= lifecycle.start(fake.claude, async (claude) => {
@@ -267,6 +307,9 @@ export function testMod<State extends object, Declared extends Options = Options
       throw new Error(`${name} needs ${listed(failure.titles)}, which a person sets in /config. Give ${failure.keys.length === 1 ? 'it' : 'them'} to the tested mod: testMod(mod, { options: { ${given} } }).`)
     }
     if (lifecycle.phase !== 'active') throw failure ?? new Error(`${name} did not start: the lifecycle is ${lifecycle.phase}.`)
+    if (isColorTold) return
+    isColorTold = true
+    await tellHeldColor()
   }
 
   const cmodPlugin = createRouter()
@@ -274,39 +317,69 @@ export function testMod<State extends object, Declared extends Options = Options
     const asked = { to: name, method: conversationMethods.before, input: { session: sessionId, event, change }, caller: cmodPluginName } as unknown as Frozen<Args<'cmod.call'>>
     return calledAnswer(cmodPluginName, await lifecycle.route('cmod.call', asked, async () => ({ deny: notInstalled(name) })))
   }
+  const decide: Decide = (event, change) => foldBefore(event, change, [(latest) => askMod(event, latest)], (error) => fake.claude.ui.log(`cmod: passed the ${event} on without ${name}'s answer: ${messageOf(error)}`, { to: 'debug' }))
   installBefore({
     claude: fake.claude,
     router: cmodPlugin,
     hooks: {
       place: async () => conversations.place(),
       wants: async (event) => conversations.wants(name, event),
-      fold: () => (event, change) => foldBefore(event, change, [(latest) => askMod(event, latest)], (error) => fake.claude.ui.log(`cmod: passed the ${event} on without ${name}'s answer: ${messageOf(error)}`, { to: 'debug' })),
+      fold: () => decide,
     },
   })
 
   const route = async <N extends RoutedEvent>(event: N, input: unknown, below: unknown): Promise<EventResult<N>> => {
     await start()
     if (event === 'ui.render') {
+      const { component, requestId } = input as Args<'ui.render'>
+      if (component === 'Pane') fake.placePane(requestId)
       await widgetsOf()
       await fake.settle()
     }
-    return cmodPlugin.dispatch(event, input as Frozen<Args<N>>, (passed) => lifecycle.route(event, passed, async (e) => (below ?? claudeCodeAnswer(event, e)) as EventResult<N>))
+    return cmodPlugin.dispatch(event, input as Frozen<Args<N>>, (passed) => lifecycle.route(event, passed, async (e) => (await claudeCodeRuns(event, e, below)) as EventResult<N>))
   }
 
-  const runCommand = async (command: string, args: string): Promise<CommandRunResult> => {
+  const claudeCodeRuns = async (event: RoutedEvent, e: unknown, below: unknown): Promise<unknown> => {
+    if (event === 'session.compact' && (e as Args<'session.compact'>).trigger !== 'precompute') {
+      const started = await fire('SessionStart', { source: 'compact' })
+      fake.shown.notes.push(...(started.additionalContext ?? []).map(untagged))
+    }
+    if (below !== undefined) return below
+    const answer = claudeCodeAnswer(event, e)
+    if (event === 'ui.close') {
+      const { id, origin } = e as Args<'ui.close'>
+      if (origin.kind === 'person' && fake.shown.openPanes.has(id)) await drawPane(id)
+      fake.shown.openPanes.delete(id)
+    }
+    if (event === 'agent.spawn') {
+      const started = await route('classic.SubagentStart', { hook_event_name: 'SubagentStart', agent_id: (answer as { agentId: string }).agentId, agent_type: (e as Args<'agent.spawn'>).subagentType }, undefined)
+      fake.shown.notes.push(...(started.additionalContext ?? []).map(untagged))
+    }
+    return answer
+  }
+
+  const runCommand = async (command: string, args: string, builtIn: CommandRunResult = {}): Promise<CommandRunResult> => {
     await start()
     const reached: Set<string> = new Set()
-    const ownRun = async (): Promise<CommandRunResult> => (reached.add(command), {})
-    const answer = await cmodPlugin.dispatch('command.run', { command, args, origin: { kind: 'composer' }, presentation }, (passed) => lifecycle.route('command.run', passed, ownRun))
+    const ownRun = async (): Promise<CommandRunResult> => (reached.add(command), builtIn)
+    const answer = await cmodPlugin.dispatch('command.run', { command, args, origin: { kind: 'composer' }, presentation }, (passed) => lifecycle.route('command.run', passed, (e) => cmodBeneath.dispatch('command.run', e, ownRun)))
     if (reached.has(command) && answer.text === undefined) throw new Error(!fake.shown.commands.includes(command) ? `${name} has no slash command /${command}. Add it in setup with mod.use(slashCommand({ name: '${command}', … })).` : `${name}: /${command} reached Claude Code's own run of the command, so Claude Code shows "${name} registered /${command} but no command.run hook answered it". Answer it without calling next(e).`)
     return answer
   }
 
-  const drawPane = async (paneId: string) => {
+  const runColor = async (args: string): Promise<CommandRunResult> => {
+    if (args.trim() === '') throw new Error(`Claude Code's /color with no color picks one at random, so a test names the color, such as tested.type('/color cyan').`)
+    const color = pickedColor(args)
+    const answer = await runCommand('color', args, { text: color === undefined ? 'Session color reset to default' : `Session color set to: ${color}` })
+    await tellColor(conversations.recolor(color))
+    return answer
+  }
+
+  const drawPane = async (paneId: string, asked?: number) => {
     await start()
     if (!fake.shown.openPanes.has(paneId)) throw new Error(`The pane "${paneId}" of ${name} closed, and a user sees a pane only while it is open.`)
     const opened = fake.calls.findLast((call) => call.call === 'ui.open' && (call.args[0] as PaneOpenArgs).id === paneId)?.args[0] as PaneOpenArgs | undefined
-    const columns = opened?.columns ?? defaultColumns
+    const columns = asked ?? opened?.columns ?? defaultColumns
     const isFocused = (await fake.claude.ui.panes()).some((open) => open.id === paneId && open.isFocused)
     const props: RenderPropsOf['Pane'] = { title: opened?.title ?? paneId, isFocused, bodyColumns: columns, placement: 'dock', scroll: { offset: 0, bodyRows: defaultRows }, view: {} }
     const drawing = await route('ui.render', { surface: 'terminal', component: 'Pane', requestId: paneId, props }, elements.Box({}))
@@ -320,7 +393,7 @@ export function testMod<State extends object, Declared extends Options = Options
     const drawn = (await callMod(partMethods.draw, { page: pageId, params: page.params, columns, isFocused: page.isFocused })) as DrawnPart | null
     await fake.settle()
     const tree = drawn?.tree ?? null
-    const drawing = tree === null || drawn === null ? elements.Box({}) : (drawWith(elements, () => elementOf(tree, '', (handler, args) => void pressPart({ draw: drawn.draw, handler, args }))) as RenderElement)
+    const drawing = tree === null || drawn === null ? elements.Box({}) : await withOwnMarkdown(async () => drawWith(elements, () => elementOf(tree, '', (handler, args) => void pressPart({ draw: drawn.draw, handler, args })), markdownIn(elements, { surface: 'terminal', columns })) as RenderElement)
     return { drawing, columns }
   }
 
@@ -339,7 +412,7 @@ export function testMod<State extends object, Declared extends Options = Options
     const draw = async (columns?: number) => {
       await start()
       const { id } = shownNow(isPane)
-      return { id, ...(isPane ? await drawPane(id) : await drawPage(id, columns)) }
+      return { id, ...(isPane ? await drawPane(id, columns) : await drawPage(id, columns)) }
     }
     const drawnElement = async (type: 'Button' | 'Input' | 'Select' | 'Markdown', key: string) => {
       const { id, drawing } = await draw()
@@ -368,7 +441,7 @@ export function testMod<State extends object, Declared extends Options = Options
           else await (props['onLinkPress'] as (link: PressedLink, e: Frozen<UiPressArgument>) => unknown)(e.link, e)
           return { element: e.element }
         }
-        if (isPane) await lifecycle.route('ui.press', pressed, run)
+        if (isPane) await lifecycle.route('ui.press', pressed, (e) => cmodBeneath.dispatch('ui.press', e, run))
         else await run(pressed)
         await fake.settle()
       },
@@ -397,7 +470,7 @@ export function testMod<State extends object, Declared extends Options = Options
     await fake.settle()
     const turn = area === TurnEndArea ? conversations.lastTurn() : undefined
     if (area === TurnEndArea && turn?.closedAt === undefined) throw new Error(`${name} has no ended turn, so TurnEnd draws nothing. End one with tested.add({ type: Prompt, text: '…' }), then tested.endTurn().`)
-    return { drawing: elements.Box({ flexDirection: 'column', children: [...(await served.draw(area, elements, columns, turn))] }), columns }
+    return { drawing: elements.Box({ flexDirection: 'column', children: [...(await withOwnMarkdown(() => served.draw(area, elements, { surface: 'terminal', columns }, turn)))] }), columns }
   }
 
   const drawSlot = async (component: RenderComponent, props: object, requestId = `${component}_${(slotDraws += 1)}`) => {
@@ -420,7 +493,11 @@ export function testMod<State extends object, Declared extends Options = Options
     const toolUse = toolUseEvents.includes(event) ? { tool_use_id: `toolu_${(toolUses += 1)}` } : {}
     const transcript = `/test/transcripts/${sessionId}.jsonl`
     const filled = { session_id: sessionId, transcript_path: transcript, cwd, hook_event_name: event, ...toolUse, ...input }
-    if (event === 'SessionStart' && !('transcript_path' in input)) return files.write(transcript, '').then(() => route('classic.SessionStart', filled, below))
+    if (event === 'SessionStart') {
+      const source = (input as { readonly source?: string }).source
+      const started = 'transcript_path' in input ? route('classic.SessionStart', filled, below) : files.write(transcript, '').then(() => route('classic.SessionStart', filled, below))
+      return source === 'startup' || source === 'clear' ? started : started.then(async (answer) => (await tellHeldColor(), answer))
+    }
     if (event !== 'PreToolUse') return route(`classic.${event}` as RoutedEvent, filled, below)
     return firePreToolUse(filled as ClassicHookInputs['PreToolUse'], below as { deny?: string } | undefined)
   }) as ClaudeCode['fire']
@@ -500,9 +577,9 @@ export function testMod<State extends object, Declared extends Options = Options
       await start()
       return settled(conversations.add(message, added?.task))
     },
-    endTurn: async (ending) => {
+    endTurn: async (ending, options) => {
       await start()
-      await settled(conversations.endTurn(ending === undefined ? undefined : { ...ending, ...(ending.failure === undefined ? {} : { reason: 'error' as const }) }))
+      await settled(conversations.endTurn(ending === undefined ? undefined : { ...ending, ...(ending.failure === undefined ? {} : { reason: 'error' as const }) }, options?.task))
     },
     compact: async () => {
       await start()
@@ -531,7 +608,7 @@ export function testMod<State extends object, Declared extends Options = Options
       const typed = /^\/(\S+)\s*(.*)$/s.exec(line)
       if (typed === null) throw new Error(`type takes a slash command the way the user types it, such as tested.type('/help'), and "${line}" does not start with /.`)
       const [, command = '', args = ''] = typed
-      return replyOf(await runCommand(command, args))
+      return replyOf(await (command === 'color' ? runColor(args) : runCommand(command, args)))
     },
     async callTool(toolName, input) {
       const tool = `mcp__${name}__${toolName}`
@@ -617,6 +694,10 @@ function claudeCodeAnswer(event: RoutedEvent, e: unknown): unknown {
     const { model, parentModel } = e as Args<'agent.spawn'>
     return { agentId: 'agent-1', model: model ?? parentModel }
   }
+  if (event === 'session.append') {
+    const { message, uuid } = e as Args<'session.append'>
+    return { message, uuid }
+  }
   if (event !== 'prompt.submit') return {}
   const { text, context, origin } = e as Args<'prompt.submit'>
   return { text, ...(context === undefined ? {} : { context }), origin }

package/src/ui/areas.ts

@@ -17,6 +17,7 @@ export type WidgetInit<State extends object = Record<never, never>> = {
   readonly id: string
   readonly title: string
   readonly areas: readonly [Area, ...Area[]]
+  readonly place?: { readonly side?: 'left' | 'right'; readonly size?: 'fit' | 'fill' }
   render(mod: Mod<State>, context: WidgetContext): RenderElement | undefined
 }
 

package/src/ui/components.ts

@@ -1,15 +1,14 @@
 import type { RenderChildren, RenderElement } from 'claude-code'
 import { Box, Button, Text } from './elements.js'
 
-export type Tab = { readonly key: string; readonly label: string }
+export type Tab = { readonly key: string; readonly label: string; readonly hotkey?: string }
 
 export function Tabs({ tabs, selected, onSelect, children }: { readonly tabs: readonly Tab[]; readonly selected: string; readonly onSelect: (key: string) => void; readonly children?: RenderChildren }): RenderElement {
-  const row = tabs.map((tab, index) => {
-    const hotkey = index < 9 ? `${index + 1}` : undefined
-    return tab.key === selected
-      ? Text({ children: [...(hotkey === undefined ? [] : [Text({ color: 'claude', children: hotkey }), ': ']), Text({ bold: true, underline: true, children: tab.label })] })
-      : Button({ plain: true, dimColor: true, key: `tab:${tab.key}`, ...(hotkey === undefined ? {} : { hotkey }), label: tab.label, onPress: () => onSelect(tab.key) })
-  })
+  const row = tabs.map(({ key, label, hotkey }) =>
+    key === selected
+      ? Text({ children: [...(hotkey === undefined ? [] : [Text({ color: 'claude', children: hotkey }), ': ']), Text({ bold: true, underline: true, children: label })] })
+      : Button({ plain: true, dimColor: true, key: `tab:${key}`, ...(hotkey === undefined ? {} : { hotkey }), label, onPress: () => onSelect(key) }),
+  )
   return Box({ flexDirection: 'column', gap: 1, children: [Box({ gap: 3, children: row }), children] })
 }
 
@@ -19,7 +18,14 @@ export function Split({ children }: { readonly children: readonly RenderElement[
 }
 
 export function Panel({ title, children }: { readonly title: string; readonly children?: RenderChildren }): RenderElement {
-  return Box({ flexDirection: 'column', flexGrow: 1, borderStyle: 'round', borderColor: 'subtle', paddingX: 1, children: [Text({ bold: true, children: title }), children] })
+  return Box({
+    flexDirection: 'column',
+    flexGrow: 1,
+    children: [
+      Box({ flexDirection: 'column', flexGrow: 1, minWidth: [...title].length + 6, borderStyle: 'round', borderColor: 'subtle', paddingX: 1, children }),
+      Box({ position: 'absolute', top: 0, left: 2, children: Text({ bold: true, wrap: 'truncate-end', children: ` ${title} ` }) }),
+    ],
+  })
 }
 
 export function Toggle({ label, checked, onChange }: { readonly label: string; readonly checked: boolean; readonly onChange: (checked: boolean) => void }): RenderElement {

package/src/ui/elements.ts

@@ -1,6 +1,6 @@
 import type { ElementName, ElementTable, Elements, MarkdownProps, RenderElement } from 'claude-code'
 
-type Terminal = Elements['terminal']
+type Terminal = Elements['terminal'] & Elements['desktop']
 
 type CompletedTable = Record<ElementName, (props: object) => RenderElement>
 
@@ -53,6 +53,7 @@ export function elementData(value: unknown, handlers: Handler[]): unknown {
   if (typeof value !== 'object' || value === null) return value
   if (unbuilt in value) {
     const { name, props } = (value as Unbuilt)[unbuilt]
+    if (name === 'Client') throw new Error('Client draws only in panes and styles.')
     return { [elementKey]: name, props: elementData(props, handlers) }
   }
   if (Object.getPrototypeOf(value) !== Object.prototype) throw new Error('a widget draws only the elements of ui/elements.js and ui/components.js, text, numbers, and plain objects.')
@@ -83,5 +84,8 @@ export const Markdown = element('Markdown')
 export const Input = element('Input')
 export const Select = element('Select')
 export const Image = element('Image')
+export const Svg = element('Svg')
+export const Raster = element('Raster')
+export const Client = element('Client')
 
-const constructors = { Box, Text, Button, Link, Code, Markdown, Input, Select, Image }
+const constructors = { Box, Text, Button, Link, Code, Markdown, Input, Select, Image, Svg, Raster }

package/src/ui/markdown.ts

@@ -1,6 +1,6 @@
 import type { Nodes, RootContent } from 'mdast'
 import { fromMarkdown, gfm, gfmFromMarkdown, toString } from '../vendor-markdown.js'
-import type { StyleProps } from './styles.js'
+import type { KindProps } from './styles.js'
 
 type BlockText = { readonly text: string; readonly source: string }
 
@@ -163,7 +163,7 @@ function plainText(node: Nodes): string {
   return node.children.map(plainText).join(node.type === 'tableRow' ? '\t' : '\n')
 }
 
-export function markdownBlocks<K extends Block>(text: string, kind: K): Omit<StyleProps<K>, 'Default'>[] {
+export function markdownBlocks<K extends Block>(text: string, kind: K): KindProps<K>[] {
   const blocks = parsed(text, 0).filter((block) => block.type === kind.markdown)
-  return blocks.map((block) => block.props) as unknown as Omit<StyleProps<K>, 'Default'>[]
+  return blocks.map((block) => block.props) as unknown as KindProps<K>[]
 }

package/src/ui/panes.ts

@@ -1,5 +1,5 @@
 import type { Frozen, PaneCloseInput, RenderElement, RenderPropsOf, UiScrollInput } from 'claude-code'
-import type { Mod } from '../mod.js'
+import type { Mod, Surface } from '../mod.js'
 
 export type ScrollTarget = 'start' | 'end' | { readonly key: string }
 
@@ -7,7 +7,7 @@ export type ScrollOptions = { readonly block?: 'start' | 'center' | 'end' | 'nea
 
 export type OpenOptions<Params> = { readonly focus?: true } & (undefined extends Params ? { readonly params?: Params } : { readonly params: Params })
 
-export type PaneProps<Params> = Frozen<RenderPropsOf['Pane']> & { readonly params: Params }
+export type PaneProps<Params> = Frozen<RenderPropsOf['Pane']> & { readonly surface: Surface; readonly params: Params }
 
 export type PaneInit<State extends object = Record<never, never>, Params = undefined> = {
   readonly id: string

package/src/ui/styles.ts

@@ -1,5 +1,5 @@
 import type { Frozen, RenderComponent, RenderElement, RenderPropsOf } from 'claude-code'
-import type { Mod } from '../mod.js'
+import type { Mod, Surface } from '../mod.js'
 import { TurnEnd, Working } from './areas.js'
 import type { Block, BlockProps } from './markdown.js'
 
@@ -32,7 +32,11 @@ type PropsOf<K extends Kind> = K extends Row ? RowProps[K] : K extends Block<inf
 
 type DefaultOf<K extends Kind> = K extends Row ? Partial<Omit<RowProps[K], 'onScreen'>> : { readonly source?: string }
 
-export type StyleProps<K extends Kind> = Frozen<PropsOf<K>> & { readonly Default: (props: Frozen<DefaultOf<K>>) => RenderElement }
+export type StyleProps<K extends Kind> = Frozen<PropsOf<K>> & StyledAt & (K extends Row ? { readonly id: string } : { readonly id?: string }) & { readonly Default: (props: Frozen<DefaultOf<K>>) => RenderElement }
+
+export type KindProps<K extends Kind> = Omit<StyleProps<K>, 'Default' | 'surface' | 'columns' | 'id'>
+
+export type StyledAt = { readonly surface: Surface; readonly columns: number }
 
 export type StyleInit<K extends Kind, State extends object = Record<never, never>> = {
   readonly kind: K

package/testing/fake-claude.d.ts

@@ -40,6 +40,8 @@ export type Fakes = {
         messages?: Claude['session']['messages'];
         append?: Claude['session']['append'];
         send?: Claude['session']['send'];
+        surfaces?: Claude['session']['surfaces'];
+        usage?: Claude['session']['usage'];
     };
     prompt: {
         submit?: Claude['prompt']['submit'];
@@ -85,6 +87,7 @@ export type FakeClaude = {
     readonly shown: Shown;
     readonly store: Map<string, unknown>;
     settle(): Promise<void>;
+    placePane(id: string): void;
 };
 export declare function calledAnswer(caller: string, answer: EventResult<'cmod.call'>): unknown;
 export declare function fakeClaude(plugin: {

package/testing/fake-claude.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"fake-claude.d.ts","sourceRoot":"","sources":["../src/testing/fake-claude.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"fake-claude.d.ts","sourceRoot":"","sources":["../src/testing/fake-claude.ts"],"names":[],"mappings":"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"}

package/testing/fake-claude.js

@@ -31,6 +31,15 @@ export function fakeClaude(plugin) {
         const run = faked(call, answer);
         return async (...args) => run(...args);
     };
+    const cmodCall = rejected('cmod.call', () => fakes.cmod.call ?? cmodTakesParts);
+    const clonedAsClaudeCodeDoes = (args) => {
+        try {
+            return structuredClone(args);
+        }
+        catch (error) {
+            throw new Error(`interface.call: arguments are not plain data: ${error instanceof Error ? error.message : String(error)}`);
+        }
+    };
     const cmodTakesParts = async (input) => {
         if (input.to === cmodPluginName && input.method === partMethods.changed)
             return null;
@@ -70,7 +79,7 @@ export function fakeClaude(plugin) {
                 lines.push(text);
             },
             notice: () => undefined,
-            invalidate: () => undefined,
+            invalidate: (event) => void calls.push({ call: 'ui.invalidate', args: [event] }),
             ask: rejected('ui.ask', () => fakes.ui.ask),
             open: async (pane) => {
                 calls.push({ call: 'ui.open', args: [pane] });
@@ -143,8 +152,8 @@ export function fakeClaude(plugin) {
             root: async () => plugin.root,
             cwd: async () => plugin.root,
             model: async () => 'test-model',
-            usage: async () => ({ startedAt: Date.parse('2026-01-01T00:00:00.000Z'), context: { window: 200000 }, rateLimits: [], cost: { usd: 0 } }),
-            surfaces: async () => ['terminal'],
+            usage: () => fakes.session.usage?.() ?? Promise.resolve({ startedAt: Date.parse('2026-01-01T00:00:00.000Z'), context: { window: 200000 }, rateLimits: [], cost: { usd: 0 } }),
+            surfaces: () => fakes.session.surfaces?.() ?? Promise.resolve(['terminal']),
             messages: rejected('session.messages', () => fakes.session.messages),
             append: rejected('session.append', () => fakes.session.append ?? appendNote),
             send: rejected('session.send', () => fakes.session.send ?? (async () => ({ isDelivered: true }))),
@@ -172,7 +181,7 @@ export function fakeClaude(plugin) {
             dataHome: async () => undefined,
             configHome: async () => undefined,
         },
-        cmod: { call: rejected('cmod.call', () => fakes.cmod.call ?? cmodTakesParts) },
+        cmod: { call: async (args) => cmodCall(clonedAsClaudeCodeDoes(args)) },
     };
     const settle = async () => {
         let seen;
@@ -181,7 +190,11 @@ export function fakeClaude(plugin) {
             await new Promise((resolve) => setTimeout(resolve, 0));
         } while (calls.length !== seen);
     };
-    return { claude, calls, fakes, shown, store, settle };
+    const placePane = (id) => {
+        if (unplacedPanes.delete(id))
+            shown.openPanes.add(id);
+    };
+    return { claude, calls, fakes, shown, store, settle, placePane };
 }
 function realTimer(ms, fn) {
     const timeout = setTimeout(fn, ms);

package/testing/fake-elements.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"fake-elements.d.ts","sourceRoot":"","sources":["../src/testing/fake-elements.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAiB,UAAU,EAAE,MAAM,aAAa,CAAA;AAE1E,KAAK,KAAK,GAAG;IAAE,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE,SAAS,UAAU,EAAE,CAAA;CAAE,CAAA;AAiB1H,eAAO,MAAM,QAAQ,EAUL,YAAY,CAAA;AAE5B,wBAAgB,WAAW,CAAC,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,SAAS,CASnG;AAED,wBAAgB,MAAM,CAAC,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,CAMhE;AAED,wBAAgB,MAAM,CAAC,IAAI,EAAE,UAAU,GAAG,MAAM,CAiB/C"}
+{"version":3,"file":"fake-elements.d.ts","sourceRoot":"","sources":["../src/testing/fake-elements.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAiB,UAAU,EAAE,MAAM,aAAa,CAAA;AAE1E,KAAK,KAAK,GAAG;IAAE,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE,SAAS,UAAU,EAAE,CAAA;CAAE,CAAA;AAuB1H,eAAO,MAAM,QAAQ,EAAE,YAatB,CAAA;AAED,wBAAgB,WAAW,CAAC,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,SAAS,CASnG;AAED,wBAAgB,MAAM,CAAC,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,CAOhE;AAED,wBAAgB,MAAM,CAAC,IAAI,EAAE,UAAU,GAAG,MAAM,CAiB/C"}