@cmodjs/core 4.0.2 → 4.1.0

package/src/testing/fake-elements.ts

@@ -17,7 +17,7 @@ function element(type: string) {
   }
 }
 
-export const elements = {
+export const elements: ElementTable = {
   Box: element('Box'),
   Text: element('Text'),
   Button: element('Button'),
@@ -27,7 +27,10 @@ export const elements = {
   Input: element('Input'),
   Select: element('Select'),
   Image: element('Image'),
-} as unknown as ElementTable
+  Svg: element('Svg'),
+  Raster: element('Raster'),
+  Client: element('Client'),
+}
 
 export function findElement(node: RenderNode, type: string, key: string): Drawn['props'] | undefined {
   if (typeof node === 'string') return undefined
@@ -41,11 +44,12 @@ export function findElement(node: RenderNode, type: string, key: string): Drawn[
 }
 
 export function rowsOf(node: RenderNode, width: number): string[] {
-  if (typeof node !== 'string' && insideOf(node).type === 'Box') return boxRows(insideOf(node), width)
-  const wrap = typeof node === 'string' ? undefined : insideOf(node).props['wrap']
+  const drawn = typeof node === 'string' ? undefined : insideOf(node)
+  if (drawn?.type === 'Box') return boxRows(drawn, width)
+  if (drawn?.type === 'Svg') return []
   return textOf(node)
     .split('\n')
-    .flatMap((line) => fitted(line, width, wrap))
+    .flatMap((line) => fitted(line, width, drawn?.props['wrap']))
 }
 
 export function textOf(node: RenderNode): string {
@@ -89,11 +93,50 @@ function boxRows({ props, children = [] }: Drawn, width: number): string[] {
   const size = (key: string) => (typeof props[key] === 'number' ? props[key] : undefined)
   const space = (side: string, axis: string) => (size(`padding${side}`) ?? size(`padding${axis}`) ?? size('padding') ?? 0) + (size(`margin${side}`) ?? size(`margin${axis}`) ?? size('margin') ?? 0)
   const left = space('Left', 'X')
+  const right = space('Right', 'X')
+  const border = typeof props['borderStyle'] === 'string' ? 1 : 0
   const direction = String(props['flexDirection'] ?? 'row')
-  const ordered = direction.endsWith('-reverse') ? [...children].reverse() : children
-  const inner = Math.min(width, size('width') ?? width) - left - space('Right', 'X')
+  const flowing = children.filter((child) => !isPlaced(child))
+  const ordered = direction.endsWith('-reverse') ? [...flowing].reverse() : flowing
+  const outer = Math.min(width, size('width') ?? width)
+  const inner = outer - left - right - border * 2
   const rows = direction.startsWith('column') ? stacked(ordered, inner, size('rowGap') ?? size('gap') ?? 0) : sideBySide(ordered, inner, size('columnGap') ?? size('gap') ?? 0, props['justifyContent'] === 'space-between')
-  return [...blankRows(space('Top', 'Y')), ...rows.map((row) => paddedTo(`${' '.repeat(left)}${row}`, size('minWidth') ?? 0)), ...blankRows(space('Bottom', 'Y'))]
+  const content = border === 1 && Number.isFinite(inner) ? inner : right === 0 && border === 0 ? 0 : Math.max(widthOf(rows), (size('minWidth') ?? 0) - left - right - border * 2)
+  const padded = [...blankRows(space('Top', 'Y')), ...rows.map((row) => `${' '.repeat(left)}${paddedTo(row, content)}${' '.repeat(right)}`), ...blankRows(space('Bottom', 'Y'))]
+  const framed = border === 0 ? padded : framedRows(padded, left + content + right, props['borderStyle'])
+  return placedOver(
+    framed.map((row) => paddedTo(row, size('minWidth') ?? 0)),
+    children.filter(isPlaced),
+    outer,
+  )
+}
+
+function isPlaced(node: RenderNode): node is RenderElement {
+  if (typeof node === 'string') return false
+  const { props } = insideOf(node)
+  return props['position'] === 'absolute' && typeof props['top'] === 'number'
+}
+
+function framedRows(rows: readonly string[], columns: number, style: unknown): string[] {
+  const [topLeft, topRight, bottomLeft, bottomRight] = style === 'round' ? ['╭', '╮', '╰', '╯'] : ['┌', '┐', '└', '┘']
+  return [`${topLeft}${'─'.repeat(columns)}${topRight}`, ...rows.map((row) => `│${paddedTo(row, columns)}│`), `${bottomLeft}${'─'.repeat(columns)}${bottomRight}`]
+}
+
+function placedOver(rows: readonly string[], placed: readonly RenderElement[], width: number): string[] {
+  const drawn = [...rows]
+  for (const node of placed) {
+    const { props } = insideOf(node)
+    const top = Number(props['top'])
+    const left = typeof props['left'] === 'number' ? props['left'] : 0
+    rowsOf(node, width - left).forEach((line, index) => {
+      const row = top + index
+      if (row < 0 || row >= drawn.length) return
+      const cells = [...paddedTo(drawn[row] ?? '', left)]
+      cells.splice(left, [...line].length, ...line)
+      drawn[row] = cells.join('')
+    })
+  }
+  return drawn
 }
 
 function stacked(children: readonly RenderNode[], width: number, gap: number): string[] {

package/src/testing/fake-sessions.ts

@@ -1,4 +1,5 @@
 import { isObject } from '../records.js'
+import { AttachedFile, attachmentNameOf, type AttachmentType } from '../session/context/turn/message/attached-file.js'
 import { InstructionFile } from '../session/context/turn/message/instruction-file.js'
 import { Message, messagesOf, noFiles, searchText, skillPrefix, type Row } from '../session/context/turn/message/message.js'
 import { Note } from '../session/context/turn/message/note.js'
@@ -7,12 +8,12 @@ import { Prompt } from '../session/context/turn/message/prompt.js'
 import { Reply } from '../session/context/turn/message/reply.js'
 import { Mod, Person, Schedule, type Sender } from '../session/context/turn/message/sender.js'
 import { GoalChange } from '../session/goal/goal.js'
-import { Task } from '../session/goal/task.js'
+import { Task, TaskStart } from '../session/goal/task.js'
 import { Skill } from '../session/context/turn/message/skill.js'
 import { ToolCall } from '../session/context/turn/message/tool-call.js'
 import { ToolResult } from '../session/context/turn/message/tool-result.js'
-import { createConversation, emptyConversation, searchLimit, type ContextData, type Conversation, type SessionChange, type SessionData, type TaskData, type TurnData, type TurnEnding } from '../session/conversation.js'
-import type { Place } from '../runtime/before.js'
+import { createConversation, emptyConversation, searchLimit, tasksWithAgents, type ContextData, type Conversation, type SessionChange, type SessionData, type TaskData, type TurnData, type TurnEnding } from '../session/conversation.js'
+import type { Decide, Place } from '../runtime/before.js'
 import type { Claude } from '../runtime/claude.js'
 import { conversationMethods, everySession, isHeardBy, resultOf, type Listened } from '../runtime/sessions.js'
 import { receivedMatcher } from '../utils/matcher.js'
@@ -26,6 +27,7 @@ export type MessageDraft =
   | { readonly type: typeof ToolResult; readonly callId: string; readonly output: string; readonly isError?: boolean }
   | { readonly type: typeof Skill; readonly name: string; readonly text: string }
   | { readonly type: typeof InstructionFile; readonly path: string; readonly text: string }
+  | { readonly type: typeof AttachedFile; readonly path: string; readonly attachmentType: AttachmentType; readonly text: string }
   | { readonly type: typeof Notice; readonly text: string }
 
 export type FakeSession = Partial<Omit<SessionData, 'id'>> & {
@@ -45,6 +47,8 @@ type Kept = {
 
 type Heard = { readonly event: Listened['event']; readonly matcher: unknown }
 
+export type StartedTask = { readonly title: string; readonly agentType?: string; readonly model?: string; readonly openedBy?: string; readonly parent?: string; readonly isBackground?: true; readonly forkedFrom?: string }
+
 
 export type FakeSessions = {
   answer(caller: string, method: string, input: unknown): unknown
@@ -52,15 +56,15 @@ export type FakeSessions = {
   draft(draft: MessageDraft, task?: string): Message
   place(): Place
   wants(mod: string, event: string): boolean
-  endTurn(ending?: TurnEnding): void
+  endTurn(ending?: TurnEnding, task?: string): void
   compact(): void
-  startTask(task: { readonly title: string; readonly agentType?: string; readonly model?: string; readonly openedBy?: string; readonly parent?: string }): string
+  startTask(task: StartedTask): string
   start(id: string): void
   lastTurn(): TurnData | undefined
   readonly sent: { readonly session: string; readonly task?: string; readonly type: string; readonly text: string; readonly as?: string }[]
 }
 
-export function fakeSessions({ project, cwd, given, push, callTool }: { readonly project: () => string; readonly cwd: () => string; readonly given: readonly FakeSession[]; readonly push: (mod: string, session: string, change: SessionChange) => void; readonly callTool: Claude['tool']['call'] }): FakeSessions {
+export function fakeSessions({ project, cwd, given, push, callTool, listAgents, decide }: { readonly project: () => string; readonly cwd: () => string; readonly given: readonly FakeSession[]; readonly push: (mod: string, session: string, change: SessionChange) => void; readonly callTool: Claude['tool']['call']; readonly listAgents: Claude['agent']['list']; readonly decide: Decide }): FakeSessions {
   const kept = new Map<string, Kept>()
   const heard = new Map<string, Map<string, readonly Heard[]>>()
   const watches = new Map<string, Map<string, readonly string[]>>()
@@ -96,6 +100,14 @@ export function fakeSessions({ project, cwd, given, push, callTool }: { readonly
     return session.messages.slice(before)
   }
 
+  const openTask = (session: Kept, { title, agentType, model, openedBy = '', parent, isBackground, forkedFrom }: StartedTask): TaskData => {
+    const owner = forkedFrom !== undefined ? { forkedFrom } : isBackground === true ? (agentType === undefined ? {} : { agentType }) : { agentType: agentType ?? 'general-purpose' }
+    const data: TaskData = { id: `task-${(ids += 1)}`, title, ...owner, openedBy, openedAt: now(), ...(model === undefined ? {} : { model }), ...(parent === undefined ? {} : { parent }), ...(isBackground === true ? { isBackground } : {}) }
+    if (isBackground === true) keep({ id: data.id, title, project: session.data.project, cwd: session.data.cwd, model: model ?? session.data.model, startedAt: data.openedAt, lastAt: data.openedAt, isRunning: true, ...owner })
+    record(session, session.conversation.startTask(data))
+    return data
+  }
+
   for (const each of given) {
     const session = keep({ title: '', project: project(), cwd: project(), model: 'test-model', startedAt: now(), lastAt: '', isRunning: false, ...each })
     for (const draft of each.messages ?? []) add(session, draft)
@@ -115,6 +127,8 @@ export function fakeSessions({ project, cwd, given, push, callTool }: { readonly
     return { session, context, contextOpenedAt, ...(turn === undefined ? {} : { turn }), tasks, taskTurns, ...(openCalls === undefined ? {} : { openCalls }) }
   }
 
+  const wantsBefore = (mod: string, event: string) => [current, everySession].some((target) => (watches.get(mod)?.get(target) ?? []).includes(event))
+
   const taskOf = (session: Kept, id: string) => {
     const task = session.tasks.get(id)
     if (task === undefined) throw new Error(`Session ${session.data.id} has no task ${id}. Start it with tested.startTask.`)
@@ -172,7 +186,11 @@ export function fakeSessions({ project, cwd, given, push, callTool }: { readonly
       const task = taskOf(session, request['task'])
       return [{ number: session.conversation.state.tasks[task.id]?.context ?? 1, openedAt: task.openedAt, ...(task.closedAt === undefined ? {} : { closedAt: task.closedAt }) }]
     },
-    [conversationMethods.tasks]: (request) => [...sessionOf(String(request['session'])).tasks.values()].filter((task) => request['all'] === true || task.parent === request['task']),
+    async [conversationMethods.tasks](request) {
+      const session = String(request['session'])
+      const tasks = [...sessionOf(session).tasks.values()].filter((task) => request['all'] === true || task.parent === request['task'])
+      return session === current ? tasksWithAgents(tasks, await listAgents()) : tasks
+    },
     [conversationMethods.goal](request) {
       const session = sessionOf(String(request['session']))
       const task = request['task']
@@ -196,7 +214,7 @@ export function fakeSessions({ project, cwd, given, push, callTool }: { readonly
       watches.set(caller, targets)
       return null
     },
-    async [conversationMethods.act](request) {
+    async [conversationMethods.act](request, caller) {
       const session = sessionOf(String(request['session']))
       const action = String(request['action'])
       const input = isObject(request['input']) ? request['input'] : {}
@@ -214,11 +232,24 @@ export function fakeSessions({ project, cwd, given, push, callTool }: { readonly
         sent.push({ session: session.data.id, ...(task === undefined ? {} : { task }), type: String(input['type']), text: String(input['text']), ...(typeof input['as'] === 'string' ? { as: input['as'] } : {}) })
         return null
       }
-      if (action === 'startTask') {
-        const id = `task-${(ids += 1)}`
-        const data: TaskData = { id, title: typeof input['title'] === 'string' ? input['title'] : '', agentType: typeof input['agentType'] === 'string' ? input['agentType'] : 'general-purpose', openedBy: '', openedAt: now(), ...(typeof input['model'] === 'string' ? { model: input['model'] } : {}) }
-        record(session, session.conversation.startTask(data))
-        return data
+      const text = (key: string) => (typeof input[key] === 'string' ? input[key] : undefined)
+      const title = text('title') ?? ''
+      if (action === 'startTask' || action === 'fork' || action === 'startBackgroundTask' || action === 'clone') {
+        if (title.trim() === '') throw new Error('a task needs a title.')
+        const isClone = action === 'clone'
+        const isBackground = isClone || action === 'startBackgroundTask'
+        const forkedFrom = isClone || action === 'fork' ? session.data.id : undefined
+        const agentType = forkedFrom === undefined ? text('agentType') : undefined
+        const model = forkedFrom === undefined ? text('model') : undefined
+        const fresh = { ...(agentType === undefined ? {} : { agentType }), ...(model === undefined ? {} : { model }), ...(forkedFrom === undefined ? {} : { forkedFrom }) }
+        if (!isBackground) return openTask(session, { title, ...fresh })
+        if (input['name'] !== undefined) throw new Error('a background task takes no name.')
+        const asked: TaskData = { id: '', title, ...fresh, openedBy: '', openedAt: now(), isBackground: true }
+        const answer = wantsBefore(caller, TaskStart) ? await decide(TaskStart, { type: TaskStart, task: { ...asked, context: session.conversation.state.context } }) : undefined
+        if (answer?.refuse !== undefined) throw new Error(`a beforeTaskStart listener refused the task: ${answer.refuse}`)
+        const owner = forkedFrom === undefined ? (answer?.owner ?? {}) : {}
+        const chosen = { ...(owner.agentType === undefined ? {} : { agentType: owner.agentType }), ...(owner.model === undefined ? {} : { model: owner.model }) }
+        return openTask(session, { ...fresh, ...chosen, title: answer?.title ?? title, isBackground: true })
       }
       if (session.data.id === current) return resultOf(place(), { name: String(input['name']), input: input['input'] as Readonly<Record<string, unknown>>, cwd: project() }, await callTool({ ...input['input'] as object, tool: String(input['name']) } as never))
       return { id: '', type: ToolResult, at: now(), session: session.data.id, context: session.conversation.state.context, callId: '', name: '', input: {}, cwd: project(), files: noFiles, output: '', isError: false }
@@ -242,7 +273,10 @@ export function fakeSessions({ project, cwd, given, push, callTool }: { readonly
         return { deny: messageOf(error) }
       }
     },
-    add: (draft, task) => add(currentSession(), draft, task),
+    add(draft, task) {
+      const session = currentSession()
+      return task !== undefined && session.tasks.get(task)?.isBackground === true ? add(sessionOf(task), draft) : add(session, draft, task)
+    },
     draft(draft, task) {
       const where = place()
       const [unplaced] = messagesOf(rowOf(draft, `message-${(ids += 1)}`, now(), cwd()), task !== undefined)
@@ -252,21 +286,23 @@ export function fakeSessions({ project, cwd, given, push, callTool }: { readonly
       return { ...unplaced, ...call, session: where.session, context: task === undefined ? where.context : (where.tasks[task]?.context ?? where.context), ...(turn === undefined ? {} : { turn: turn.prompt.id }), ...(task === undefined ? {} : { task }) }
     },
     place,
-    wants: (mod, event) => [current, everySession].some((target) => (watches.get(mod)?.get(target) ?? []).includes(event)),
-    endTurn(ending = {}) {
+    wants: wantsBefore,
+    endTurn(ending = {}, task) {
       const session = currentSession()
-      record(session, session.conversation.endTurn(now(), { reason: 'answer', ...ending }))
+      const background = task === undefined ? undefined : session.tasks.get(task)
+      if (background?.isBackground !== true) {
+        record(session, session.conversation.endTurn(now(), { reason: 'answer', ...ending }, task))
+        return
+      }
+      const owner = sessionOf(background.id)
+      record(owner, owner.conversation.endTurn(now(), { reason: 'answer', ...ending }))
+      record(session, session.conversation.endTask(background, now()))
     },
     compact() {
       const session = currentSession()
       record(session, session.conversation.add({ id: `compact-${(ids += 1)}`, at: now(), type: 'system', name: 'compact_boundary', isMeta: false, isSummary: false, content: [] }))
     },
-    startTask({ title, agentType = 'general-purpose', model, openedBy = '', parent }) {
-      const session = currentSession()
-      const id = `task-${(ids += 1)}`
-      record(session, session.conversation.startTask({ id, title, agentType, openedBy, openedAt: now(), ...(model === undefined ? {} : { model }), ...(parent === undefined ? {} : { parent }) }))
-      return id
-    },
+    startTask: (task) => openTask(currentSession(), task).id,
     start(id) {
       current = id
       const session = kept.get(id) ?? keep({ id, title: '', project: project(), cwd: project(), model: 'test-model', startedAt: now(), lastAt: now(), isRunning: true })
@@ -289,5 +325,6 @@ function rowOf(draft: MessageDraft, id: string, at: string, cwd: string): Row {
   if (draft.type === ToolResult) return { ...base, type: 'user', content: [{ type: 'tool_result', tool_use_id: draft.callId, content: draft.output, ...(draft.isError === true ? { is_error: true } : {}) }] }
   if (draft.type === Skill) return { ...base, type: 'user', isMeta: true, content: text(`${skillPrefix} /skills/${draft.name}\n\n${draft.text}`) }
   if (draft.type === InstructionFile) return { ...base, type: 'attachment', name: 'nested_memory', content: text(draft.text), path: draft.path }
+  if (draft.type === AttachedFile) return { ...base, type: 'attachment', name: attachmentNameOf(draft.attachmentType), content: text(draft.text), path: draft.path }
   return { ...base, type: 'system', name: 'informational', content: text(draft.text) }
 }

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'
@@ -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'>>
@@ -191,33 +195,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) => {
@@ -274,39 +306,61 @@ 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 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): 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 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 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 +374,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 +393,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 +422,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 +451,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)}`) => {
@@ -500,9 +554,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()
@@ -617,6 +671,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 }