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
    return (
      <AgentPane
        ui={$.ui.resolve(e)}
        entries={isCurrent ? data.entries : {}}
        view={await read($, pane)}
        stats={isCurrent ? data.stats : null}
        dashboard={isCurrent ? data.dashboard : null}
        // 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}
        now={await $.clock.now()}
        columns={e.props.bodyColumns}
        onOpen={(agentId) => act($, { kind: 'open', agentId })}
        onBack={() => act($, { kind: 'back' })}
        onWrap={() => act($, { kind: 'wrap' })}
        onTool={(toolUseId) => act($, { kind: 'tool', toolUseId })}
      />
    )
  })

export const AgentPane = ({
  ui,
  entries,
  view,
  stats,
  dashboard,
  spin,
  now,
  columns,
  onOpen,
  onBack,
  onWrap,
  onTool,
}: 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) =>
    isClient ? (
      <ui.Client
        key={key}
        module="./cellClient.tsx"
        props={c}
        width={c.width ?? cellText(c, 0, now).length}
        height={1}
      />
    ) : (
      <Box key={key} 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>
    )

  if (viewed === null) {
    const head = (key: string, text: string, width: number, align?: 'right') =>
      cell(key, { text, dim: true, width, ...(align === undefined ? {} : { align }) })
    const rule = (key: string) => (
      <Text key={key} dimColor wrap="truncate">
        {'─'.repeat(Math.max(0, columns))}
      </Text>
    )
    // The dashboard: the session's cost, then per model an estimated cost (≈), its share of
    // the total (colored by its size), the working time and the runs of its agents.
    const board = () => {
      if (dashboard === null) return null
      const MODEL = Math.min(MAX_MODEL, Math.max(5, ...dashboard.rows.map((r) => r.model.length)))
      return (
        <Box key="dashboard" flexDirection="column">
          {cell('cost', { text: `total ≈$${formatUsd(dashboard.costUsd)}`, bold: true })}
          {dashboard.rows.length > 0 && (
            <Box key="dash:head" flexDirection="row" gap={1}>
              {head('dash:head:model', 'model', MODEL)}
              {head('dash:head:cost', 'cost($)', USD_WIDTH, 'right')}
              {head('dash:head:pct', 'cost(%)', PCT_WIDTH, 'right')}
              {head('dash:head:time', 'time', TIME_WIDTH, 'right')}
              {head('dash:head:runs', 'runs', RUNS_WIDTH, 'right')}
            </Box>
          )}
          {dashboard.rows.map((r) => {
            const pct = sharePct(r.costUsd, dashboard.costUsd)
            return (
              <Box key={`dash:${r.model}`} flexDirection="row" gap={1}>
                {cell(`dash:model:${r.model}`, { text: cut(r.model, MODEL), width: MODEL })}
                {cell(`dash:cost:${r.model}`, {
                  text: r.costUsd === null ? '—' : `≈${formatUsd(r.costUsd)}`,
                  width: USD_WIDTH,
                  align: 'right',
                })}
                {cell(`dash:pct:${r.model}`, {
                  text: pct === null ? '' : `${pct}%`,
                  ...(pct === null ? {} : { color: shareColor(pct) }),
                  width: PCT_WIDTH,
                  align: 'right',
                })}
                {cell(`dash:time:${r.model}`, {
                  text: r.model === SIDE ? '' : formatDuration(r.workMs),
                  dim: true,
                  width: TIME_WIDTH,
                  align: 'right',
                })}
                {cell(`dash:runs:${r.model}`, {
                  text: r.model === SIDE ? '' : runsText(r),
                  dim: true,
                  width: RUNS_WIDTH,
                  align: 'right',
                })}
              </Box>
            )
          })}
          {rule('dash:rule')}
        </Box>
      )
    }

    const rows = treeRows(entries)
    if (rows.length === 0)
      return (
        <Box flexDirection="column">
          {board()}
          <Text dimColor>No agents yet.</Text>
        </Box>
      )
    const t = agentTable(
      rows.map((r) => r.agent),
      columns,
    )
    return (
      <Box flexDirection="column">
        {board()}
        <Box key="head" flexDirection="row" gap={1}>
          {/* Built as a row is, a mark and a box of the name's width: a desktop sizes a box
              and a cell in different units, so only the same parts line up. */}
          {head('head:mark', '', MARK_WIDTH)}
          <Box key="head:namebox" width={t.name} flexShrink={0}>
            {head('head:name', 'agents', t.name)}
          </Box>
          {head('head:runs', 'runs', t.runs, 'right')}
          {head('head:time', 'time', t.time, 'right')}
        </Box>
        {rows.map(({ agent, depth }) => {
          const recent = recency(agent, now)
          const tone: Tone = recent === 'old' ? { dim: true } : { color: RECENCY_TONE[recent] }
          return (
            // A Button takes no color: the status is the colored mark before it, and an ended
            // agent's row is dim at rest. The runs and the time take the color of the recency.
            <Box key={`row:${agent.id}`} flexDirection="row" alignItems="center" gap={1}>
              {depth > 0 && <Box key={`indent:${agent.id}`} width={depth * 2 - 1} flexShrink={0} />}
              {cell(`mark:${agent.id}`, agentMark(agent))}
              <Box key={`name:${agent.id}`} width={t.name - depth * 2} flexShrink={0}>
                <Button
                  key={`agent:${agent.id}`}
                  plain
                  {...(agent.status === 'running' ? {} : { dimColor: true })}
                  label={cut(name(agent), t.name - depth * 2)}
                  onPress={() => onOpen(agent.id)}
                />
              </Box>
              {cell(`runs:${agent.id}`, {
                text: String(agent.runs),
                ...tone,
                width: t.runs,
                align: 'right',
              })}
              {cell(`time:${agent.id}`, timeCell(agent, now, 'right', tone, ''))}
            </Box>
          )
        })}
      </Box>
    )
  }

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    if (e.props.hasSurvey) return next(e)
    const session = await currentMeter($)
    const now = (await read($, nowAtom)) || (await $.clock.now())
    const tweens = await read($, shown)
    // An agent's transcript is on screen: draw that agent's numbers, which are not animated.
    const isPaneOpen = (await read($, pane)).isOpen
    const viewed = e.props.view.agentId
    const snap = viewed === undefined ? session : agentView(session, viewed)
    const reg = viewed === undefined ? null : await read($, agents)
    const model = modelLabel(viewed === undefined ? undefined : reg?.entries[viewed])
    const ttls = (await read($, ttlsAtom)) ?? cacheTtls({}, options.cacheTtl)
    return (
      <Band
        ui={$.ui.resolve(e)}
        snap={snap}
        shown={
          viewed === undefined && tweens.sessionId === session.sessionId
            ? shownAt(tweens, now)
            : undefined
        }
        isAgentView={viewed !== undefined}
        {...(model === undefined ? {} : { model })}
        busySince={session.busySince}
        now={now}
        ttl={viewed === undefined ? ttls.main : ttls.agent}
        columns={e.props.bodyColumns ?? 120}
        isPaneOpen={isPaneOpen}
        onToggle={() => togglePane($)}
      />
    )
  })

export const Band = ({
  ui,
  snap,
  shown,
  busySince,
  now,
  ttl,
  columns,
  isAgentView,
  model,
  isPaneOpen,
  onToggle,
}: Props) => {
  const { Box, Text, Button } = ui
  const segments = bandSegments({
    snap,
    shown,
    busySince,
    now,
    ttl,
    columns,
    isAgentView,
    isPaneOpen,
    ...(model === undefined ? {} : { model }),
  })
  const run = (segs: Segment[], key: string) => (
    <Text key={key} wrap="truncate">
      {segs.map((s, i) => (
        <Text key={String(i)} color={s.color} bold={s.bold} inverse={s.inverse}>
          {s.text}
        </Text>
      ))}
    </Text>
  )
  const at = segments.findIndex((s) => s.isButton)
  const button = segments[at]
  if (button === undefined) return run(segments, 'all')
  return (
    <Box flexDirection="row">
      {run(segments.slice(0, at), 'before')}
      <Button key="agents" variant="primary" label={button.text} onPress={onToggle} />
      {run(segments.slice(at + 1), 'after')}
    </Box>
  )
}