@cmodjs/core 0.3.0 → 1.5.0

package/src/runtime/toaster.ts

@@ -0,0 +1,334 @@
+import type { ElementTable, RenderElement, RenderPropsOf, Timer } from 'claude-code'
+import type { Toast, ToastId, ToastOptions, ToastType } from '../mod.js'
+import { Box, Button, drawWith, Link, Text } from '../ui/elements.js'
+import { coreVersion, isObject } from '../records.js'
+import { firstLine, messageOf } from '../utils/text.js'
+import type { Claude } from './claude.js'
+
+export type ShownToast = { readonly type: ToastType; readonly message: string; readonly description?: string }
+
+export type Failure = { readonly id: string; readonly message: string; readonly error?: unknown; readonly description?: string; readonly retry?: () => unknown }
+
+export type Toaster = {
+  readonly toast: Toast
+  copy(text: string): Promise<void>
+  fail(failure: Failure): ToastId
+  readonly shown: readonly ShownToast[]
+  draw(drawn: RenderElement, table: ElementTable, band: RenderPropsOf['AbovePrompt'], bandId: string): RenderElement
+}
+
+type Action = { readonly label: string; readonly onClick: () => unknown }
+
+type Contact = { readonly kind: 'github'; readonly repository: string } | { readonly kind: 'email'; readonly address: string }
+
+type Reporting = { readonly contact: Contact | undefined; readonly details: string; readonly status?: string }
+
+type Entry = {
+  readonly id: ToastId
+  readonly type: ToastType
+  readonly message: string
+  readonly options: ToastOptions
+  readonly actions: readonly Action[]
+  readonly hides?: string
+  isOpen: boolean
+  reporting?: Reporting | undefined
+  timer: Timer | undefined
+}
+
+const githubRepository = /^https:\/\/github\.com\/([^/]+\/[^/#?]+?)(?:\.git)?(?:\/issues)?\/?$/
+
+const linkLimit = 2048
+
+const hiddenKey = 'cmod:hidden-failures'
+
+const defaultDuration = 4000
+const visibleToasts = 3
+const spinner = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'] as const
+const spinnerMs = 100
+const icons: Record<Exclude<ToastType, 'loading'>, { readonly glyph: string; readonly color?: string }> = {
+  default: { glyph: ' ' },
+  success: { glyph: '✓', color: 'success' },
+  info: { glyph: 'ℹ', color: 'suggestion' },
+  warning: { glyph: '⚠', color: 'warning' },
+  error: { glyph: '✗', color: 'error' },
+}
+
+export function createToaster(claude: Claude, name: string, version: () => string | undefined): Toaster {
+  const entries = new Map<ToastId, Entry>()
+  const hidden = new Map<string, string>()
+  void claude.store.get(hiddenKey).then(
+    (saved) => {
+      if (typeof saved !== 'object' || saved === null) return
+      for (const [id, hides] of Object.entries(saved)) if (typeof hides === 'string' && !hidden.has(id)) hidden.set(id, hides)
+    },
+    (error: unknown) => claude.ui.log(`${name}: could not read the failures you hid: ${messageOf(error)}`, { to: 'debug' }),
+  )
+  let lastId = 0
+  let frame = 0
+  let spinning: Timer | undefined
+  let isHeld = false
+  let showsAll = false
+  let bandId: string | undefined
+
+  const changed = () => {
+    const isLoading = [...entries.values()].some((entry) => entry.type === 'loading')
+    if (isLoading && spinning === undefined) {
+      spinning = claude.clock.every(spinnerMs, () => {
+        frame += 1
+        claude.ui.invalidate('ui.render')
+      })
+    }
+    if (!isLoading && spinning !== undefined) {
+      spinning.cancel()
+      spinning = undefined
+    }
+    if (entries.size <= visibleToasts) showsAll = false
+    claude.ui.invalidate('ui.render')
+  }
+
+  const disarm = (entry: Entry) => {
+    entry.timer?.cancel()
+    entry.timer = undefined
+  }
+
+  const arm = (entry: Entry) => {
+    const duration = entry.options.duration ?? defaultDuration
+    if (entry.timer !== undefined || entry.type === 'loading' || entry.isOpen || !Number.isFinite(duration)) return
+    entry.timer = claude.clock.after(duration, () => {
+      entry.timer = undefined
+      if (isHeld) arm(entry)
+      else dismiss(entry.id)
+    })
+  }
+
+  const dismiss = (id?: ToastId) => {
+    for (const entry of entries.values()) {
+      if (id !== undefined && entry.id !== id) continue
+      disarm(entry)
+      entries.delete(entry.id)
+    }
+    changed()
+  }
+
+  const put = (type: ToastType, message: string, options: ToastOptions, actions: readonly Action[], hides?: string): ToastId => {
+    const id = options.id ?? (lastId += 1)
+    const previous = entries.get(id)
+    if (previous !== undefined) disarm(previous)
+    const reporting = hides !== undefined && previous?.hides === hides ? previous.reporting : undefined
+    const entry: Entry = { id, type, message, options, actions, ...(hides === undefined ? {} : { hides }), isOpen: previous?.isOpen ?? false, reporting, timer: undefined }
+    if (type === 'error' && previous?.message !== message) claude.ui.log(`${name}: ${message}${typeof options.description === 'string' ? `: ${options.description}` : ''}`, { to: 'debug' })
+    entries.set(id, entry)
+    changed()
+    return id
+  }
+
+  const show =
+    (type: ToastType) =>
+    (message: string, options: ToastOptions = {}): ToastId =>
+      put(type, message, options, options.action === undefined ? [] : [options.action])
+
+  const hide = (entry: Entry) => {
+    dismiss(entry.id)
+    if (entry.hides === undefined) return
+    hidden.set(String(entry.id), entry.hides)
+    void claude.store.set(hiddenKey, Object.fromEntries(hidden)).catch((error: unknown) => claude.ui.log(`${name}: could not remember the failure you hid: ${messageOf(error)}`, { to: 'debug' }))
+  }
+
+  const toast: Toast = Object.assign(show('default'), {
+    success: show('success'),
+    info: show('info'),
+    warning: show('warning'),
+    error: show('error'),
+    loading: show('loading'),
+    dismiss,
+    promise<T>(task: Promise<T> | (() => Promise<T>), messages: Parameters<Toast['promise']>[1]) {
+      const id = show('loading')(messages.loading)
+      const settled = Promise.resolve()
+        .then(() => (typeof task === 'function' ? task() : task))
+        .then(
+          (value) => {
+            show('success')(typeof messages.success === 'function' ? messages.success(value) : messages.success, { id })
+            return value
+          },
+          (error: unknown) => {
+            show('error')(typeof messages.error === 'function' ? messages.error(error) : messages.error, { id })
+            throw error
+          },
+        )
+      settled.catch(() => undefined)
+      return { unwrap: () => settled }
+    },
+  })
+
+  const copy = async (text: string) => {
+    const copied = await claude.ui.copy({ text })
+    if (!copied.isCopied) throw new Error(copied.reason)
+  }
+
+  const press = (entry: Entry, run: () => unknown) => () =>
+    void Promise.resolve()
+      .then(run)
+      .catch((error: unknown) => fail({ id: `press:${entry.id}`, message: `${entry.message}: the press failed`, error }))
+
+  const fail = ({ id, message, error, description = error === undefined ? undefined : describe(error), retry }: Failure): ToastId => {
+    const hides = `${version() ?? ''}\n${message}\n${error === undefined ? '' : describe(error)}`
+    if (hidden.get(id) === hides) return id
+    hidden.delete(id)
+    const stack = error instanceof Error && error.stack !== undefined ? `\n\n${error.stack}` : ''
+    const details = async () => {
+      const modVersion = await claude.fs
+        .read(`${claude.plugin.root}/.claude-plugin/plugin.json`)
+        .then((text) => String((JSON.parse(text) as { version?: unknown }).version))
+        .catch((failure: unknown) => `unknown (${messageOf(failure)})`)
+      return `${name} ${modVersion}, @cmodjs/core ${coreVersion}\n${message}${description === undefined ? '' : `\n${description}`}${stack}`
+    }
+    const startReporting = async () => {
+      const shown = entries.get(id)
+      if (shown === undefined) return
+      shown.reporting = { contact: await contactOf(claude), details: await details() }
+      disarm(shown)
+      changed()
+      if (bandId === undefined) return
+      const focused = await claude.ui.focus({ requestId: bandId, key: `toast:${id}:ask-claude` })
+      if ('deny' in focused) claude.ui.log(`${name}: the Report choices did not take the keys: ${String(focused.deny)}`, { to: 'debug' })
+    }
+    const actions = [...(retry === undefined ? [] : [{ label: 'Retry', onClick: retry }]), { label: 'Report', onClick: startReporting }]
+    return put('error', message, { id, ...(description === undefined ? {} : { description }), duration: Infinity }, actions, hides)
+  }
+
+  const toggle = (entry: Entry) => () => {
+    entry.isOpen = !entry.isOpen
+    disarm(entry)
+    changed()
+  }
+
+  const row = (entry: Entry): RenderElement => {
+    const { description } = entry.options
+    const isText = typeof description === 'string'
+    const icon = entry.type === 'loading' ? { glyph: spinner[frame % spinner.length] as string, color: 'claude' } : icons[entry.type]
+    const message = isText ? Button({ plain: true, key: `toast:${entry.id}:open`, label: entry.message, onPress: toggle(entry) }) : Text({ children: entry.message })
+    const details = !isText ? description : Text({ dimColor: true, wrap: entry.isOpen ? 'wrap' : 'truncate-end', children: entry.isOpen ? description : firstLine(description) })
+    const fixed = (child: RenderElement) => Box({ flexShrink: 0, children: child })
+    const close = Button({ plain: true, dimColor: true, key: `toast:${entry.id}:close`, label: entry.hides === undefined ? '✕' : 'Hide', onPress: () => hide(entry) })
+    const actions = entry.actions.map((action, index) => Button({ plain: true, key: `toast:${entry.id}:${index === 0 ? 'action' : `action-${index}`}`, label: action.label, onPress: press(entry, action.onClick) }))
+    const text = details === undefined ? [message] : [message, details]
+    const under = entry.reporting === undefined ? [Box({ gap: 2, flexWrap: 'wrap', children: [...actions, close] })] : reportChoices(entry, entry.reporting)
+    return Box({
+      gap: 2,
+      children: [
+        fixed(Text({ ...(icon.color === undefined ? {} : { color: icon.color }), children: icon.glyph })),
+        fixed(Text({ dimColor: true, children: name })),
+        Box({ flexDirection: 'column', flexGrow: 1, flexShrink: 1, children: entry.hides === undefined ? text : [...text, ...under] }),
+        ...(entry.hides === undefined ? [...actions.map(fixed), fixed(close)] : []),
+      ],
+    })
+  }
+
+  const reportChoices = (entry: Entry, { contact, details, status }: Reporting): RenderElement[] => {
+    const say = (said: string) => {
+      entry.reporting = { contact, details, status: said }
+      changed()
+    }
+    const back = () => {
+      entry.reporting = undefined
+      changed()
+    }
+    const askClaude = async () => {
+      await claude.prompt.submit({ text: reportPrompt(name, contact, details), asUser: true })
+      back()
+    }
+    const copyError = async () => {
+      const copied = await claude.ui.copy({ text: details })
+      say(copied.isCopied ? 'Copied the error.' : `Could not copy it: ${copied.reason}`)
+    }
+    const report = contact === undefined ? [] : [Link({ href: reportLink(contact, name, entry.message, details), label: contact.kind === 'github' ? 'Report it on GitHub (opens your browser)' : 'Email the author (opens your mail app)' })]
+    return [
+      Text({ dimColor: true, children: 'Claude writes up the problem and files it with your tools. You approve each step before anything is posted.' }),
+      Box({
+        gap: 2,
+        flexWrap: 'wrap',
+        children: [
+          Button({ plain: true, key: `toast:${entry.id}:ask-claude`, label: 'Ask Claude to report it', onPress: press(entry, askClaude) }),
+          ...report,
+          Button({ plain: true, key: `toast:${entry.id}:copy`, label: 'Copy the error', onPress: press(entry, copyError) }),
+          Button({ plain: true, dimColor: true, key: `toast:${entry.id}:back`, label: 'Back', onPress: back }),
+        ],
+      }),
+      ...(status === undefined ? [] : [Text({ dimColor: true, children: status })]),
+    ]
+  }
+
+  return {
+    toast,
+    copy,
+    fail,
+    get shown() {
+      return [...entries.values()].map(({ type, message, options }) => ({ type, message, ...(typeof options.description === 'string' ? { description: options.description } : {}) }))
+    },
+    draw(drawn, table, band, drawnIn) {
+      bandId = drawnIn
+      isHeld = band.hasSurvey === true
+      if (isHeld || entries.size === 0) return drawn
+      const all = [...entries.values()]
+      const hidden = showsAll ? 0 : Math.max(all.length - visibleToasts, 0)
+      for (const entry of all.slice(hidden)) arm(entry)
+      const more = Button({
+        plain: true,
+        dimColor: true,
+        key: 'toasts:more',
+        label: `+${hidden} more`,
+        onPress: () => {
+          showsAll = true
+          changed()
+        },
+      })
+      return drawWith(table, () => Box({ flexDirection: 'column', children: [drawn, ...(hidden > 0 ? [more] : []), ...all.slice(hidden).map(row)] }))
+    },
+  }
+}
+
+function describe(error: unknown): string {
+  const messages: string[] = []
+  for (let cause = error; cause !== undefined; cause = cause instanceof Error ? cause.cause : undefined) {
+    const text = messageOf(cause)
+    if (!messages.some((earlier) => earlier.includes(text) || text.includes(earlier))) messages.push(text)
+  }
+  return messages.join('\n')
+}
+
+async function contactOf(claude: Claude): Promise<Contact | undefined> {
+  const manifest: Record<string, unknown> = await claude.fs
+    .read(`${claude.plugin.root}/.claude-plugin/plugin.json`)
+    .then((text) => JSON.parse(text) as Record<string, unknown>)
+    .catch((error: unknown) => {
+      claude.ui.log(`${claude.plugin.name}: could not read whom to report to: ${messageOf(error)}`, { to: 'debug' })
+      return {}
+    })
+  const repositoryUrl = isObject(manifest['repository']) ? manifest['repository']['url'] : manifest['repository']
+  const repository = [manifest['supportUrl'], repositoryUrl].map((url) => (typeof url === 'string' ? githubRepository.exec(url)?.[1] : undefined)).find((found) => found !== undefined)
+  if (repository !== undefined) return { kind: 'github', repository }
+  const author = manifest['author']
+  const address = isObject(author) ? author['email'] : undefined
+  return typeof address === 'string' && address !== '' ? { kind: 'email', address } : undefined
+}
+
+function reportLink(contact: Contact, name: string, message: string, details: string): string {
+  const title = `${name}: ${message}`.slice(0, 120)
+  const linkOf = (body: string) =>
+    contact.kind === 'github'
+      ? `https://github.com/${contact.repository}/issues/new?title=${encodeURIComponent(title)}&body=${encodeURIComponent(body)}`
+      : `mailto:${contact.address}?subject=${encodeURIComponent(title)}&body=${encodeURIComponent(body)}`
+  let body = details
+  while (linkOf(body).length > linkLimit && body.length > 0) body = `${body.slice(0, Math.floor(body.length * 0.8))}…`
+  return linkOf(body)
+}
+
+function reportPrompt(name: string, contact: Contact | undefined, details: string): string {
+  const where =
+    contact === undefined
+      ? `${name} names no place to report it, so find its author from its plugin.json or its marketplace.`
+      : contact.kind === 'github'
+        ? `Report it as an issue on https://github.com/${contact.repository}.`
+        : `Email it to ${contact.address}.`
+  return `The ${name} mod failed. Report it to its author. ${where} First check whether it is reported already, and add to that report instead of filing a new one. Show me the report before you post it.\n\n${details}`
+}

package/src/runtime/ui.ts

@@ -1,125 +1,19 @@
-import type { ElementTable, MarkdownProps, PaneOpenArgs, RenderElement, Timer } from 'claude-code'
-import type { Mod, PaneHandle, ProgressStep } from '../mod.js'
-import { ProgressBar } from '../ui/components.js'
+import type { ElementTable, MarkdownProps, PaneOpenArgs, RenderElement } from 'claude-code'
+import type { Disposable, Mod, PaneHandle } from '../mod.js'
 import type { Pane } from '../ui/define-pane.js'
 import { Box, drawWith, Text } from '../ui/elements.js'
-import type { MarkdownKind, MarkdownReader } from '../ui/markdown.js'
-import type { Slot, SlotProps } from '../ui/slots.js'
+import type { MarkdownReader } from '../ui/markdown.js'
+import { componentOf, nameOf, type Place, type PlaceProps } from '../ui/places.js'
 import { messageOf } from '../utils/text.js'
 import type { Claude } from './claude.js'
 import type { Router } from './router.js'
-
-export type ProgressLine = {
-  report(step: ProgressStep): void
-  wait(text: string): void
-  fail(reason: string, fix: string): void
-  end(): void
-}
-
-export type Progress = {
-  readonly isShown: boolean
-  start(title: string): ProgressLine
-  draw(drawn: RenderElement, table: ElementTable, columns: number | undefined): RenderElement
-}
-
-type Line = {
-  readonly title: string
-  step: ProgressStep | undefined
-  waiting: string | undefined
-  failure: { readonly reason: string; readonly fix: string } | undefined
-}
+import type { Failure, Toaster } from './toaster.js'
 
 type PaneSize = Pick<PaneOpenArgs, 'columns' | 'rows'>
 
-const spinner = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'] as const
-const spinnerMs = 100
 const bullet = '⏺'
-const widestBar = 30
-const narrowestBar = 10
 const sizeKeys = ['columns', 'rows'] as const
 
-export function createProgress(claude: Claude): Progress {
-  const lines: Line[] = []
-  let frame = 0
-  let timer: Timer | undefined
-
-  const changed = () => {
-    const isSpinning = lines.some((line) => line.failure === undefined && line.waiting === undefined)
-    if (isSpinning && timer === undefined) {
-      timer = claude.clock.every(spinnerMs, () => {
-        frame += 1
-        claude.ui.invalidate('ui.render')
-      })
-    }
-    if (!isSpinning && timer !== undefined) {
-      timer.cancel()
-      timer = undefined
-    }
-    claude.ui.invalidate('ui.render')
-  }
-
-  return {
-    get isShown() {
-      return lines.length > 0
-    },
-    start(title) {
-      const line: Line = { title, step: undefined, waiting: undefined, failure: undefined }
-      lines.push(line)
-      changed()
-      return {
-        report(step) {
-          line.step = step
-          line.waiting = undefined
-          changed()
-        },
-        wait(text) {
-          line.waiting = text
-          changed()
-        },
-        fail(reason, fix) {
-          line.failure = { reason, fix }
-          changed()
-        },
-        end() {
-          const index = lines.indexOf(line)
-          if (index >= 0) lines.splice(index, 1)
-          changed()
-        },
-      }
-    },
-    draw(drawn, table, columns) {
-      return drawWith(table, () => Box({ flexDirection: 'column', children: [drawn, ...lines.map((line) => drawLine(line, frame, columns))] }))
-    },
-  }
-}
-
-function drawLine(line: Line, frame: number, columns: number | undefined): RenderElement {
-  const title = Text({ bold: true, children: line.title })
-  if (line.failure !== undefined) {
-    return Box({
-      flexDirection: 'column',
-      children: [
-        Box({ children: [Box({ minWidth: 2, children: Text({ color: 'error', children: '✗' }) }), Text({ children: [title, '  ', Text({ color: 'error', children: line.failure.reason })] })] }),
-        Box({ paddingLeft: 2, children: Text({ dimColor: true, children: line.failure.fix }) }),
-      ],
-    })
-  }
-  if (line.waiting !== undefined) {
-    return Text({ wrap: 'truncate-end', children: [Text({ color: 'warning', children: '◌' }), ' ', title, '  ', Text({ dimColor: true, children: line.waiting })] })
-  }
-  const glyph = Text({ color: 'claude', children: spinner[frame % spinner.length] })
-  if (line.step === undefined) return Text({ wrap: 'truncate-end', children: [glyph, ' ', title, Text({ dimColor: true, children: '…' })] })
-  const { done, total, label = '' } = line.step
-  const width = barWidth(columns, `${line.title}${done}/${total}${label}`.length)
-  return Text({ wrap: 'truncate-end', children: [glyph, ' ', title, '  ', ProgressBar({ done, total, width }), ...(label === '' ? [] : ['  ', label])] })
-}
-
-function barWidth(columns: number | undefined, textLength: number): number {
-  if (columns === undefined) return widestBar
-  const spacing = 2 + 2 + 2 + 2
-  return Math.max(narrowestBar, Math.min(widestBar, columns - textLength - spacing))
-}
-
 function paneSize<State extends object>(pane: Pane<State>, state: State): PaneSize {
   const size: { columns?: number; rows?: number } = {}
   for (const key of sizeKeys) {
@@ -197,21 +91,31 @@ export type UiOptions<State extends object> = {
   readonly name: string
   readonly claude: Claude
   readonly router: Router
-  readonly progress: Progress
+  readonly toaster: Toaster
+  readonly report: (failure: Failure) => void
   readonly announce: (feature: string) => void
   readonly mod: () => Mod<State>
 }
 
 export type UiArea<State extends object> = {
-  readonly ui: Mod<State>['ui']
+  readonly ui: Omit<Mod<State>['ui'], 'notice'>
   changed(): void
   restorePanes(): Promise<void>
 }
 
-export function createUi<State extends object>({ name, claude, router, progress, announce, mod }: UiOptions<State>): UiArea<State> {
+export function createUi<State extends object>({ name, claude, router, toaster, report, announce, mod }: UiOptions<State>): UiArea<State> {
   const panes = new Map<string, Pane<State>>()
   const paneLogs = new Map<string, (failure: string) => void>()
   const openPanes = new Set<string>()
+  const paneStates = new Map<string, { readonly isShown: boolean; readonly isFocused: boolean }>()
+  const syncPanes = async () => {
+    for (const open of await claude.ui.panes()) {
+      if (!panes.has(open.id)) continue
+      if (open.isPlaced) openPanes.add(open.id)
+      paneStates.set(open.id, { isShown: open.isShown, isFocused: open.isFocused })
+    }
+  }
+  const readPanes = () => void syncPanes().catch((error: unknown) => claude.ui.log(`${name} keeps its panes' shown and focused state from before: ${messageOf(error)}`, { to: 'debug' }))
   const requestedSizes = new Map<string, PaneSize>()
   const renders = new Set<string>()
   const markdownRenders = new Map<string, MarkdownRender>()
@@ -222,7 +126,7 @@ export function createUi<State extends object>({ name, claude, router, progress,
   const logOnce = (what: string) => {
     let hasLogged = false
     return (failure: string) => {
-      if (!hasLogged) claude.ui.log(`${name}: the ${what} render ${failure}`)
+      if (!hasLogged) report({ id: `render:${what}`, message: `The ${what} render failed`, description: failure })
       hasLogged = true
     }
   }
@@ -250,9 +154,9 @@ export function createUi<State extends object>({ name, claude, router, progress,
     }
   }
 
-  const routeMarkdown = (kind: MarkdownKind) => {
+  const routeMarkdown = (createReader: () => MarkdownReader) => {
     if (read !== undefined) return
-    const reader = kind.createReader()
+    const reader = createReader()
     read = reader
     router.add('ui.render', async (e, next) => {
       if (e.component !== 'AssistantMessage') return next(e)
@@ -302,6 +206,8 @@ export function createUi<State extends object>({ name, claude, router, progress,
       const pane = panes.get(e.requestId)
       if (pane === undefined || e.component !== 'Pane') return next(e)
       openPanes.add(pane.id)
+      paneStates.set(pane.id, { isShown: true, isFocused: e.props.isFocused })
+      readPanes()
       const table = claude.ui.resolve(e)
       try {
         return drawWith(table, () => pane.render(mod(), e.props), markdownIn(table))
@@ -319,6 +225,8 @@ export function createUi<State extends object>({ name, claude, router, progress,
     })
     router.add('ui.close', async (e, next) => {
       openPanes.delete(e.id)
+      paneStates.delete(e.id)
+      readPanes()
       const closed = await next(e)
       const pane = panes.get(e.id)
       if (pane?.onClose !== undefined) await handle(pane, 'onClose', () => pane.onClose?.(mod(), e))
@@ -330,7 +238,7 @@ export function createUi<State extends object>({ name, claude, router, progress,
     try {
       await run()
     } catch (error) {
-      claude.ui.log(`${name}: the ${pane.title} pane's ${handler} threw: ${messageOf(error)}`)
+      report({ id: `pane:${pane.id}:${handler}`, message: `The ${pane.title} pane's ${handler} threw`, error })
     }
   }
 
@@ -346,38 +254,55 @@ export function createUi<State extends object>({ name, claude, router, progress,
           get isOpen() {
             return openPanes.has(pane.id)
           },
+          get isShown() {
+            return paneStates.get(pane.id)?.isShown ?? false
+          },
+          get isFocused() {
+            return paneStates.get(pane.id)?.isFocused ?? false
+          },
           async open(options) {
             const { isPlaced } = await openAt(pane, paneSize(pane, mod().state), options?.focus)
             if (isPlaced) openPanes.add(pane.id)
+            await syncPanes()
           },
           async close() {
             await claude.ui.close({ id: pane.id })
             openPanes.delete(pane.id)
+            paneStates.delete(pane.id)
+            await syncPanes()
           },
           toggle: (options) => (openPanes.has(pane.id) ? handle.close() : handle.open(options)),
         }
         return handle
       },
-      render<S extends Slot>(slot: S, Component: (props: SlotProps<S>) => RenderElement) {
-        const place: Slot = slot
-        const feature = 'markdown' in place ? `a render of markdown ${place.markdown.name}` : `a render of ${place.component}`
-        if (renders.has(feature)) throw new Error(`${name}: ${feature} is already added. Render each slot once.`)
+      render<P extends Place>(place: P, Component: (props: PlaceProps<P>) => RenderElement): Disposable {
+        const target: Place = place
+        const markdown = typeof target === 'string' ? undefined : target
+        const component = componentOf(place)
+        if (markdown === undefined && component === undefined) throw new Error(`${name}: ${String(place)} is not a place render draws, such as ToolCall or CodeBlock.`)
+        const feature = `a render of ${nameOf(place)}`
+        if (renders.has(feature)) throw new Error(`${name}: ${feature} is already added. Render each place once.`)
         renders.add(feature)
         announce(feature)
-        if ('markdown' in place) {
-          const kind = place.markdown
-          markdownRenders.set(kind.type, { Component: Component as unknown as MarkdownRender['Component'], log: logOnce(`markdown ${kind.name}`) })
-          routeMarkdown(kind)
-          return
+        if (markdown !== undefined) {
+          const markdownType = markdown.markdown
+          markdownRenders.set(markdownType, { Component: Component as unknown as MarkdownRender['Component'], log: logOnce(nameOf(place)) })
+          routeMarkdown(markdown.createReader)
+          return {
+            dispose() {
+              markdownRenders.delete(markdownType)
+              renders.delete(feature)
+              claude.ui.invalidate('ui.render')
+            },
+          }
         }
-        const { component } = place
-        const log = logOnce(component)
-        router.add('ui.render', async (e, next) => {
+        const log = logOnce(nameOf(place))
+        const drawing = router.add('ui.render', async (e, next) => {
           if (e.component !== component) return next(e)
           const table = claude.ui.resolve(e)
           const drawn = await drawComponent(
             table,
-            (Default) => Component({ ...e.props, Default } as unknown as SlotProps<S>),
+            (Default) => Component({ ...e.props, Default } as unknown as PlaceProps<P>),
             (given, isClaudesRow) => next({ ...e, props: pieceProps(e.props, given, isClaudesRow) } as typeof e),
           )
           if ('failure' in drawn) {
@@ -387,16 +312,16 @@ export function createUi<State extends object>({ name, claude, router, progress,
           if (e.component !== 'AssistantMessage') return drawn.drawing
           return drawWith(table, () => drawPieces([drawn], e.props.isFirstOfReply ? 'opensReply' : 'inReply'))
         })
-      },
-      toast: (text, options) => claude.ui.toast(text, options),
-      async progress(title, task) {
-        const line = progress.start(title)
-        try {
-          return await task((step) => line.report(step))
-        } finally {
-          line.end()
+        return {
+          dispose() {
+            drawing.dispose()
+            renders.delete(feature)
+            claude.ui.invalidate('ui.render')
+          },
         }
       },
+      toast: toaster.toast,
+      copy: toaster.copy,
       ask: (question, options) => claude.ui.ask(question, options),
       scroll: (args) => claude.ui.scroll(args),
     },
@@ -413,10 +338,7 @@ export function createUi<State extends object>({ name, claude, router, progress,
       })
     },
     async restorePanes() {
-      if (panes.size === 0) return
-      for (const open of await claude.ui.panes()) {
-        if (open.isPlaced && panes.has(open.id)) openPanes.add(open.id)
-      }
+      if (panes.size > 0) await syncPanes()
     },
   }
 }

package/src/session/context/context.ts

@@ -0,0 +1,14 @@
+import type { RecordPart } from '../session.js'
+import type { Turn } from './turn/turn.js'
+
+export const ContextStart = 'contextStart'
+
+export const ContextEnd = 'contextEnd'
+
+export type Context = RecordPart & {
+  readonly number: number
+  readonly openedAt: string
+  readonly closedAt?: string
+  readonly task?: string
+  turns(): Promise<Turn[]>
+}

package/src/session/context/turn/message/document.ts

@@ -0,0 +1,8 @@
+import type { MessageOf } from './message.js'
+
+export const Document = 'document'
+
+export type Document = MessageOf<typeof Document> & {
+  readonly path: string
+  readonly text: string
+}