review-pane

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const E = $.ui.resolve(e)
    const snap = await read($, snapshot)
    const v = await read($, view)
    const busy = (await read($, working)).length > 0
    const { turn, cursor, historical } = onScreen(snap, v)
    const isLatest = !historical
    const behind = !isFollowing(snap, v) && hasReply(snap) && replySig(snap) !== v.seen

    if (e.surface === 'terminal') {
      const T = E as typeof E & Parameters<typeof screen>[0]
      // the guide's diagnostics never cost the drawing: a fact that fails reads '?'
      const facts: Facts | null = v.help
        ? {
            session: await $.session.id().catch(() => '?'),
            model: (await $.session.model().catch(() => '?')).replace(/^.*?(?=claude-)/, '').replace(/^claude-/, ''),
            project: (await $.session.cwd().catch(() => '?')).replace(/^\/home\/[^/]+/, '~'),
          }
        : null
      const drawn = screen(T, {
        columns: e.props.bodyColumns,
        rows: e.props.scroll.bodyRows,
        isFocused: e.props.isFocused,
        placement: e.props.placement,
        turn,
        tasks: isLatest ? snap.tasks : [],
        historical,
        working: busy,
        behind,
        cursor,
        turnCount: snap.turns.length,
        view: v,
        facts,
      })
      laid = drawn.laid
      const { Box, Button, Text } = T

      return (
        <Box flexDirection="column">
          {drawn.tree}
          <Text> </Text>
          <Box display="none">
            {HOTKEYS.map(k => <Button key={hotkey(k)} label={k} hotkey={k} onPress={press => pressKey($, k, press)} />)}
          </Box>
        </Box>
      )
    }

    // Other surfaces draw with their own type and scroll the tree themselves:
    // the same column, drawn by the surface's Markdown.
    const { Box, Button, Markdown, Text } = E
    const surfaces = surfacesFor(turn, isLatest ? snap.tasks : [], historical, busy)
    const active = Math.min(v.surface, surfaces.length - 1)
    laid = { maxScroll: 0, bodyRows: 10, surfaces, active }
    const shown = surfaces[active]!
    const body = shown.raw !== '' ? shown.raw : '_No response yet._'
    const position = snap.turns.length === 0 ? 'no turns yet'
      : `turn ${cursor + 1} of ${snap.turns.length}${v.frozen ? ' · frozen' : isFollowing(snap, v) ? ' · live' : ''}`

    return (
      <Box flexDirection="column" paddingX={2} paddingY={1} gap={1}>
        <Text dimColor>{position}</Text>
        {historical && turn.question ? <Text dimColor>{`› ${turn.question.replace(/\s+/g, ' ').slice(0, 200)}`}</Text> : null}
        <Markdown key="body" text={body.length <= 9800 ? body : `${body.slice(0, 9800)}\n\n_Cut at 9800 characters. Copy for the full text._`} />
        <Box flexDirection="row" gap={2}>
          {surfaces.length > 1 ? surfaces.map((sf, i) => (
            <Button key={`surface-${sf.label}`} label={sf.label} plain dimColor={i !== active} onPress={() => key($, (_, w) => ({ ...w, surface: i, scroll: 0 }))} />
          )) : null}
          <Button key="earlier" label="earlier" plain dimColor onPress={press => pressKey($, 'h', press)} />
          <Button key="later" label="later" plain dimColor onPress={press => pressKey($, 'l', press)} />
          <Button key="freeze" label={v.frozen ? 'unfreeze' : 'freeze'} plain dimColor onPress={press => pressKey($, 'f', press)} />
          <Button key="copy" label="copy" plain dimColor onPress={press => pressKey($, 'y', press)} />
        </Box>
      </Box>
    )
  })