flight-deck

  on('ui.render', { component: 'Pane', requestId: PANE_ID }, async ($, e) => {
    // Only `paneData`, the view and (on the terminal) the spinner are read here: each read
    // value redraws the pane when it changes.
    isPaneFocused = e.props.isFocused
    const id = await $.session.id()
    const data = await read($, shownData)
    const isCurrent = data.sessionId === id
    // Only the terminal draws the costs on each frame. `now` is read while a cost runs, so the
    // frame tick draws the pane again; a pane at rest does not read it.
    const now = await $.clock.now()
    const costs = e.surface === 'terminal' ? await read($, paneShown) : null
    if (costs !== null && !isNamedSettled(costs, now)) await read($, nowAtom)
    // The terminal's pane has no margin and no title of its own: a cell of padding at each
    // side, and the title as the first row.
    const ui = $.ui.resolve(e)
    const pad = e.surface === 'terminal' ? 1 : 0
    // The rows above the pane body on the terminal: the title and the empty row below it.
    const above = e.surface === 'terminal' ? TITLE_ROWS : 0
    // The offset of a scroll event is newer than the pane's own until the engine gives the
    // pane another offset: that one is then the newest (the window can move with no event).
    const asked = await read($, paneScroll)
    const offset =
      asked !== null && asked.seen === e.props.scroll.offset ? asked.offset : e.props.scroll.offset
    drawnOffset = e.props.scroll.offset
    isPaneOnTerminal = e.surface === 'terminal'
    // After this hook returns its drawing: a scroll that waits for it goes on.
    const drawn = onPaneDrawn
    if (drawn !== null) setTimeout(drawn, 0)
    const body = (
      <AgentPane
        ui={ui}
        entries={isCurrent ? data.entries : {}}
        view={await read($, pane)}
        stats={isCurrent ? data.stats : null}
        dashboard={isCurrent ? data.dashboard : null}
        // State of an older shape (a hot reload) has no context.
        context={isCurrent ? (data.context ?? null) : null}
        // State of an older shape (a hot reload) has no breaks.
        breaks={isCurrent ? (data.breaks ?? null) : null}
        {...(costs !== null && costs.sessionId === id ? { shownUsd: namedAt(costs, now) } : {})}
        // Only the terminal reads the spinner: a read value redraws the pane when it changes, and
        // a desktop drops a click on a button that a redraw replaced. Its cells are `Client`s.
        spin={e.surface === 'terminal' ? await read($, spin) : null}
        holdsText={holdsText((await $.session.version()).base)}
        now={now}
        columns={e.props.bodyColumns - pad * 2}
        scrollTop={e.surface === 'terminal' ? Math.max(0, offset - above) : 0}
        {...(offset === e.props.scroll.offset || e.surface !== 'terminal'
          ? {}
          : { scrollFrom: Math.max(0, e.props.scroll.offset - above) })}
        onOpen={(agentId) => act($, { kind: 'open', agentId })}
        onExpand={(agentId) => act($, { kind: 'expand', agentId })}
        onBack={() => act($, { kind: 'back' })}
        onWrap={() => act($, { kind: 'wrap' })}
        onTool={(toolUseId) => act($, { kind: 'tool', toolUseId })}
        onContext={() => act($, { kind: 'context' })}
        onCache={() => act($, { kind: 'cache' })}
        onRecount={() => act($, { kind: 'recount' })}
        onCategory={(name) => act($, { kind: 'category', name })}
        drafts={drafts}
        onCompose={(agentId) => act($, { kind: 'compose', agentId })}
        onStop={(agentId) => act($, { kind: 'stop', agentId })}
        onDraft={(agentId, text, width) => {
          const before = fieldLayout(drafts[agentId] ?? '', width)
          const after = fieldLayout(text, width)
          drafts[agentId] = text
          // The pane draws the field by its layout: a field that got or lost a row, or
          // whose label changes its length, draws the pane again.
          if (before.rows !== after.rows || before.pad !== after.pad) void redraw($)
        }}
        onSend={(agentId, text) => act($, { kind: 'send', agentId, text })}
        onAllow={(agentId) => act($, { kind: 'allow', agentId })}
      />
    )
    if (pad === 0) return body
    return (
      <ui.Box flexDirection="column" paddingX={pad}>
        <ui.Text bold>{PANE_TITLE}</ui.Text>
        {/* An empty row parts the title from the body. */}
        <ui.Text> </ui.Text>
        {body}
      </ui.Box>
    )
  })

export const AgentPane = ({
  ui,
  entries,
  view,
  stats,
  dashboard,
  context,
  breaks,
  shownUsd,
  spin,
  holdsText,
  now,
  columns,
  scrollTop,
  scrollFrom,
  onOpen,
  onExpand,
  onBack,
  onWrap,
  onTool,
  onContext,
  onCache,
  onRecount,
  onCategory,
  drafts,
  onCompose,
  onStop,
  onDraft,
  onAllow,
  onSend,
}: Props) => {
  const { Box, Text, Button, Code, Markdown } = ui
  const viewed = view.agentId
  // State of an older shape (a hot reload) has no flag: the rows are cut then.
  const isWrapped = view.isWrapped === true
  const codeWrap = isWrapped ? 'wrap' : 'truncate-end'
  const isClient = spin === null && 'Client' in ui
  const cell = (key: string, c: Cell, isRest = false) =>
    isClient ? (
      <ui.Client
        key={key}
        module="./cellClient.tsx"
        props={c}
        width={c.width ?? cellText(c, 0, now).length}
        height={1}
      />
    ) : (
      <Box
        key={key}
        {...(isRest
          ? { flexGrow: 1, flexShrink: 1 }
          : { flexShrink: 0, ...(c.width === undefined ? {} : { width: c.width }) })}
      >
        <Text
          wrap="truncate"
          {...(c.color === undefined ? {} : { color: c.color })}
          {...(c.dim === true ? { dimColor: true } : {})}
          {...(c.bold === true ? { bold: true } : {})}
        >
          {cellText(c, spin ?? 0, now)}
        </Text>
      </Box>
    )

  // The cell that takes the rest of its row: `width` cells on a desktop, with its text cut to
  // them. The terminal's layout gives the cell its width and cuts the text.
  const rest = (key: string, text: string, width: number, tone: Omit<Cell, 'text'> = {}) =>
    cell(
      key,
      isClient
        ? { ...tone, text: cut(text, width), width }
        : { ...tone, text: cut(text, Infinity) },
      true,
    )
  // A button of the terminal in a box that the layout can make narrower than the label. The
  // layout wraps a label to the width that it has. So the inner box is as wide as the label,
  // which keeps the label on one row, and the outer box cuts it.
  const oneRow = (key: string, label: string, button: ReturnType<typeof cell>, isRest = false) => (
    <Box key={key} flexGrow={isRest ? 1 : 0} flexShrink={1} overflow="hidden">
      <Box width={label.length} flexShrink={0}>
        {button}
      </Box>
    </Box>
  )
  // The box that takes the rest of its row, around a button with `label`: `width` cells on a
  // desktop.
  const restBox = (key: string, width: number, label: string, button: ReturnType<typeof cell>) =>
    isClient ? (
      <Box key={key} width={width} flexShrink={0}>
        {button}
      </Box>
    ) : (
      oneRow(key, label, button, true)
    )
  // A row of real buttons of the terminal shows one row: the layout wraps a label in a narrow
  // pane, and the rows below must keep their place.
  const oneRowOnly = isClient ? {} : { height: 1, overflow: 'hidden' as const }
  // A line across the terminal's pane: it is longer than a pane, and its box shows one row of it.
  const line = (key: string) => (
    <Box key={key} height={1} overflow="hidden">
      <Text dimColor>{'─'.repeat(RULE_LENGTH)}</Text>
    </Box>
  )

  const allow = (id: string) => {
    const button = <Button key={`allow:${id}`} label={ALLOW_LABEL} onPress={() => onAllow(id)} />
    // A real button of the terminal: its box has room for the label and the `[ ]` around it.
    return isClient ? (
      button
    ) : (
      <Box key={`allowbox:${id}`} flexShrink={1} overflow="hidden">
        <Box width={ALLOW_LABEL.length + BUTTON_CHROME} flexShrink={0}>
          {button}
        </Box>
      </Box>
    )
  }
  // The reason of a message or a stop that the engine refused, below the controls of the agent.
  // A message that auto mode did not judge has a button there: it lets the messages of the
  // pane go.
  const controlError = (key: string, id: string) =>
    view.controlError?.agentId !== id ? null : 'isAsk' in view.controlError ? (
      <Box key={key} flexDirection="row" {...oneRowOnly}>
        {allow(id)}
      </Box>
    ) : (
      <Text key={key} color={PALETTE.red} wrap="truncate">
        {view.controlError.reason}
      </Text>
    )
  // The message field of an agent. It has no placeholder: text that an input method composes
  // (Vietnamese on macOS) is not in the field yet, so the engine draws the placeholder below it.
  // Enter sends the text. Only the terminal and a desktop draw a field.
  // The field takes its whole row: `width` cells on a desktop, where no box grows.
  const say = (id: string, width: number) =>
    'Input' in ui ? (
      <Box
        key={`saybox:${id}`}
        flexDirection="column"
        {...(isClient
          ? { width, flexShrink: 0 }
          : {
              flexGrow: 1,
              flexShrink: 1,
            })}
      >
        <ui.Input
          key={`say:${id}`}
          // The terminal cuts a field whose first row fills its width: the label grows
          // by a cell then, and the text wraps in another place. See `fieldLayout`.
          label={'›'.repeat(1 + (isClient ? 0 : fieldLayout(drafts[id] ?? '', width).pad))}
          value={drafts[id] ?? ''}
          submitLabel="send"
          autoFocus
          onInput={(text) => onDraft(id, text, width)}
          onSubmit={(text) => onSend(id, text)}
        />
      </Box>
    ) : null