agentpane

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const els = $.ui.resolve(e)
    const { Box, Button, Markdown, Text } = els
    // Live lines run on the surface's own frame clock where it has one (terminal, desktop); elsewhere they are
    // static. Every surface's table names Client, but on the others it draws nothing: ask by surface.
    const Client = (e.surface === 'terminal' || e.surface === 'desktop') && 'Client' in els ? els.Client : null
    lastPlacement = e.props.placement
    lastColumns = e.viewport?.columns ?? lastColumns
    isFullscreen = e.viewport?.isFullscreen ?? isFullscreen
    const inline = e.props.placement === 'inline' // above the prompt: a summary, no handle
    const W = Math.max(22, e.props.bodyColumns - (inline ? 0 : HANDLE_COLS) - RIGHT_MARGIN) // the content, right of the handle
    const viewed = e.props.view?.agentId ?? null // the agent the person has open in the main view
    const rows = Math.max(MIN_ROWS + 6, e.props.scroll.bodyRows)
    const now = await $.clock.now()
    const all = await read($, agents)
    const act = await read($, activity)
    const tok = await read($, tokens)
    const id = await read($, viewing)
    const agent = id ? all.find(a => a.id === id) : undefined
    viewingId = agent ? agent.id : null
    const runningCount = all.filter(a => a.status === 'running').length
    const doneCount = all.length - runningCount
    const hint = (text: string) => <Text dimColor wrap="truncate-end">{text}</Text>
    const alertOf = (a: Agent) => (tok[a.id]?.truncated ? `max_tokens ×${tok[a.id]!.truncated}` : '')
    // A running agent's spinner, shimmering "Running…" and clock, redrawn by the surface, not by this hook.
    const liveLine = (a: Agent, pad: string, detail: string) =>
      Client && a.seenRunning ? (
        <Client key={`live-${a.id}`} module="./live.tsx" props={{ since: a.firstSeen, now, pad, detail, alert: alertOf(a), motion: cfg.motion, clockOnly: false }} />
      ) : (
        <Text wrap="truncate-end">
          <Text color="claude">{`${pad}  ✻ Running…`}</Text>
          <Text dimColor>{` (${[elapsed(a, now), detail].filter(Boolean).join(' · ')}`}</Text>
          {alertOf(a) ? <Text color="error">{` · ${alertOf(a)}`}</Text> : null}
          <Text dimColor>)</Text>
        </Text>
      )
    const clock = (a: Agent) =>
      Client && a.status === 'running' && a.seenRunning ? (
        <Client key={`clock-${a.id}`} module="./live.tsx" props={{ since: a.firstSeen, now, pad: '', detail: '', alert: '', motion: false, clockOnly: true }} />
      ) : (
        <Text dimColor>{elapsed(a, now)}</Text>
      )
    // The first row, clear of the engine's close mark at its end.
    const header = (left: RenderChildren, right: RenderChildren) => (
      <Box width={W - CLOSE_MARK_COLS} justifyContent="space-between">
        {left}
        {typeof right === 'string' ? <Text dimColor>{right}</Text> : right}
      </Box>
    )
    // A handle on the pane's left edge, halfway down: ▸ hides the pane. Above the prompt there is no edge to hold.
    const withHandle = (body: RenderChildren) =>
      inline ? (
        <Box flexDirection="column" width={W}>
          {body}
        </Box>
      ) : (
      <Box flexDirection="row">
        <Box key="handle" flexDirection="column" width={HANDLE_COLS} flexShrink={0}>
          {Array.from({ length: Math.max(0, Math.floor((rows - HANDLE.length) / 2)) }, () => <Text> </Text>)}
          {HANDLE.map((glyph, i) => (
            <Button
              key={glyph.startsWith('▸') ? 'collapse' : `collapse-${i}`}
              label={glyph}
              plain
              dimColor
              hover={{ color: 'claude', bold: true }}
              onPress={() => foldAway($)}
            />
          ))}
        </Box>
        <Box flexDirection="column" width={W} height={rows}>
          {body}
        </Box>
      </Box>
      )

    // One agent's conversation, as Claude Code draws its own: > the brief, ⏺ replies and tool calls, ⎿ results.
    if (agent) {
      const key = `${agent.id}:${await read($, rev)}:${agent.status}`
      if (transcript.key !== key) {
        const msgs = await $.session.messages({ agentId: agent.id })
        transcript = { key, blocks: Array.isArray(msgs) ? transcriptBlocks(msgs, agent.status !== 'running') : [] }
      }
      const blocks = transcript.blocks
      const open = new Set(await read($, expanded))
      const armed = await read($, confirmStop)
      const savedTop = await read($, scrollTop)
      const top = savedTop === null ? null : Math.min(savedTop, Math.max(0, blocks.length - 1))
      const shown = pickBlocks(blocks, top)
      const newer = top === null ? 0 : blocks.length - top - 1 // blocks after the one at the top
      const used = tok[agent.id]
      const l = look(agent.status)
      const leave = async () => {
        await showList($)
        await openPane($, 'list') // back to the usual size
      }
      const toggle = (k: string) => update($, expanded, list => (list.includes(k) ? list.filter(x => x !== k) : [...list, k]))
      const result = (c: Call) =>
        c.state === 'running' ? [<Text color="claude">{'  ⎿  Running…'}</Text>]
        : c.state === 'stopped' ? [<Text dimColor>{'  ⎿  Interrupted'}</Text>]
        : [
            ...(c.result.length ? c.result : ['(No output)']).map((r, i) => (
              <Text color={c.state === 'error' ? 'error' : undefined} dimColor={c.state !== 'error'} wrap="truncate-end">
                {`${i ? '     ' : '  ⎿  '}${r}`}
              </Text>
            )),
            ...(c.more ? [<Text dimColor>{`     … +${c.more} line${c.more === 1 ? '' : 's'}`}</Text>] : []),
          ]
      const call = (c: Call) => (
        <Box flexDirection="column" flexShrink={0}>
          <Text wrap="truncate-end">
            <Text color={STATE_COLOR[c.state]}>⏺ </Text>
            <Text bold>{c.name}</Text>
            <Text>{c.arg ? `(${c.arg})` : ''}</Text>
          </Text>
          {result(c)}
        </Box>
      )
      const block = (b: Block): RenderElement => {
        if (b.kind === 'prompt') {
          const lines = wrap(b.text.slice(0, PROMPT_LINES * W * 2), W - 2)
          return (
            <Box flexDirection="column" flexShrink={0} marginTop={1}>
              {lines.slice(0, PROMPT_LINES).map((line, i) => (
                <Text dimColor wrap="truncate-end">{`${i ? '  ' : '> '}${line}`}</Text>
              ))}
              {lines.length > PROMPT_LINES ? <Text dimColor>{'  …'}</Text> : null}
            </Box>
          )
        }
        if (b.kind === 'reply') {
          const text = b.text.length > MAX_REPLY ? `${b.text.slice(0, MAX_REPLY)}\n\n… (${b.text.length - MAX_REPLY} more characters)` : b.text
          return (
            <Box flexDirection="row" flexShrink={0} marginTop={1}>
              <Text>⏺ </Text>
              <Box flexDirection="column" width={W - 2}>
                <Markdown text={text} />
              </Box>
            </Box>
          )
        }
        if (b.calls.length === 1) return <Box flexShrink={0} marginTop={1}>{call(b.calls[0]!)}</Box>
        const isOpen = open.has(b.key)
        const opened = lastCalls(b.calls)
        const live = b.calls.find(c => c.state === 'running')
        const failed = b.calls.find(c => c.state === 'error')
        return (
          <Box key={`grp-${b.key}`} flexDirection="column" flexShrink={0} marginTop={1}>
            <Box>
              <Text color={STATE_COLOR[groupState(b.calls)]}>⏺ </Text>
              <Button key={`group-${b.key}`} label={groupSummary(b.calls)} plain hover={{ color: 'claude' }} onPress={() => toggle(b.key)} />
              <Text dimColor>{isOpen ? ' (click to collapse)' : ' (click to expand)'}</Text>
            </Box>
            {isOpen ? (
              <Box flexDirection="column" paddingLeft={2}>
                {opened.hidden ? <Text dimColor>{`… +${opened.hidden} earlier call${opened.hidden === 1 ? '' : 's'}`}</Text> : null}
                {opened.shown.map(call)}
              </Box>
            ) : live ? (
              <Text color="claude" wrap="truncate-end">{`  ⎿  ${live.name}${live.arg ? `(${live.arg})` : ''} · Running…`}</Text>