savvy-progress

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const s = tr()
    const ui = $.ui.resolve(e)
    const { Box, Text, Button } = ui
    const list = await read($, agents)
    const sessions = await read($, bg)
    const f = await read($, flow)
    const p: Panel = await read($, panel)
    const at = Math.max(await read($, now), ...list.map(a => a.startedAt), 0)

    const running = list.filter(a => a.status === 'running').reverse()
    const finished = list.filter(a => a.status !== 'running').reverse()
    const planned = plannedOf(f, list)
    const t = totals(list, at)
    // The pane's title says "Agents"; inside, only the flow's own name.
    const title = f && !f.isFinished ? f.title : ''

    const toggleCompact = (
      <Button
        key="compact"
        label={p.isCompact ? s.expand : s.collapse}
        plain
        onPress={() => update($, panel, prev => ({ ...prev, isCompact: !prev.isCompact }))}
      />
    )
    const toggleDone = (
      <Button
        key="done"
        label={`${p.isDoneCollapsed ? '▸' : '▾'} ${s.finished} · ${finished.length}`}
        plain
        onPress={() => update($, panel, prev => ({ ...prev, isDoneCollapsed: !prev.isDoneCollapsed }))}
      />
    )
    const isEmpty = list.length === 0 && planned.length === 0 && sessions.length === 0
    // A row's name opens the view pane; the first nine also by digit while the pane holds the keys.
    let hot = 0
    const agentTarget = (a: AgentRun): ViewTarget | null =>
      a.agentId ? { kind: 'agent', id: a.agentId, name: a.description || a.type } : null
    const bgTarget = (b: BgSession): ViewTarget => ({ kind: 'bg', id: b.id, name: b.name, cwd: b.cwd })
    const viewButton = (target: ViewTarget | null, text: string) => {
      if (!target) return <Text bold wrap="truncate-end">{text}</Text>
      const n = ++hot
      return (
        <Button key={`view-${target.id}`} plain {...(n <= 9 ? { hotkey: String(n) } : {})} onPress={() => void openView($, target)}>
          <Text bold>{text}</Text>
        </Button>
      )
    }
    const desktopView = (target: ViewTarget | null) =>
      target && (
        <Button key={`view-${target.id}`} plain dimColor label={`${s.view} ${target.name} ›`} onPress={() => void openView($, target)} />
      )
    const summary = `≈${fmtCost(t.cost)}, ${fmtTokens(t.tokens)} ${s.tokensWord}, ${fmtTime(t.time)}`

    if (e.surface === 'desktop' && 'Svg' in ui) {
      const { Svg } = ui
      const W = Math.max(240, Math.min(900, (e.props.bodyColumns || 40) * 8 - 8))
      const section = (key: string, text: string) => (
        <Text key={key} dimColor>
          {text}
        </Text>
      )

      if (p.isCompact) {
        return (
          <Box flexDirection="column" gap={1}>
            <Svg source={compactSvg(W, list, planned, sessions, t)} alt={`${list.length + sessions.length} ${s.agentsCount}, ${summary}`} width={W} height={32} />
            {toggleCompact}
          </Box>
        )
      }
      return (
        <Box flexDirection="column">
          <Svg source={headerSvg(W, title, t)} alt={title ? `${title}: ${summary}` : summary} width={W} height={headerHeight(title)} />
          {toggleCompact}
          {isEmpty && <Text dimColor>{s.empty}</Text>}
          {running.length > 0 && section('h-run', `${s.running} · ${running.length}`)}
          {running.map(a => [
            <Svg key={a.id} source={agentSvg(W, a, at)} alt={`${a.description}: ${modelName(a.model)}, ${s.isRunning}`} width={W} height={66} />,
            desktopView(agentTarget(a)),
          ])}
          {finished.length > 0 && toggleDone}
          {!p.isDoneCollapsed &&
            finished.map(a => [
              <Svg key={a.id} source={agentSvg(W, a, at)} alt={`${a.description}: ${modelName(a.model)}, ${s.isFinished}`} width={W} height={66} />,
              desktopView(agentTarget(a)),
            ])}
          {sessions.length > 0 && section('h-bg', `${s.background} · ${sessions.length}`)}
          {sessions.map(b => [
            <Svg key={`bg-${b.id}`} source={bgSvg(W, b)} alt={`${b.name}: ${bgStateText(b)}`} width={W} height={46} />,
            desktopView(bgTarget(b)),
          ])}
          {planned.length > 0 && section('h-plan', `${s.planned} · ${planned.length}`)}
          {planned.map(pl => (
            <Svg key={`plan-${pl.n}`} source={plannedSvg(W, pl)} alt={`${pl.n}. ${pl.title}: ${s.isPlanned}`} width={W} height={46} />
          ))}
        </Box>
      )
    }

    // Terminal: the same content in text rows. Read here, not above, so only this surface redraws on a frame tick.
    const tick = await read($, frame)
    const cols = Math.max(24, e.props.bodyColumns || 40)
    // The crab takes SPRITE_W columns and a gap; on a narrow pane the old glyph stays.
    const hasCrab = cols >= 40
    const room = cols - (hasCrab ? SPRITE_W + 1 : 0)
    const barW = Math.max(6, Math.min(20, room - 34))
    const indent = hasCrab ? '' : '  '
    const withCrab = (key: string, costume: string, body: JSX.Element, isAnimated: boolean) =>
      hasCrab ? (
        <Box key={key} flexDirection="row" gap={1} marginBottom={1}>
          <Box flexDirection="column" flexShrink={0} width={SPRITE_W}>
            {crabLines(Text, spriteOf(costume, isAnimated ? tick : 0), key)}
          </Box>
          <Box flexDirection="column" justifyContent="center" width={room}>
            {body}
          </Box>
        </Box>
      ) : (
        <Box key={key} flexDirection="column" marginBottom={1}>
          {body}
        </Box>
      )
    const bgRow = (b: BgSession) => {
      const color = colorOf(b.tier)
      return withCrab(
        `bg-${b.id}`,
        b.tier,
        <>
          <Box flexDirection="row" gap={1}>
            {!hasCrab && <Text color={color}>▣</Text>}
            {viewButton(bgTarget(b), b.name)}
            <Text color={b.state === 'waiting' ? 'warning' : b.state === 'busy' ? color : undefined} dimColor={b.state === 'idle'}>
              {BG_GLYPH[b.state]}
            </Text>
          </Box>
          <Text dimColor wrap="truncate-end">
            {indent}
            {b.tier === 'other' ? s.session : b.tier} · {bgModel(b)}
          </Text>
          <Text dimColor wrap="truncate-end">
            {indent}
            {bgStateText(b)}
            {b.branch ? ` · ${b.branch}` : ''}
          </Text>
        </>,
        b.state === 'busy',
      )
    }
    const row = (a: AgentRun) => {
      const tier = tierOf(a.type)
      const color = colorOf(tier)
      const ctx = ctxOf(a)
      const progress = progressOf(a)
      const model = a.effort ? `${modelName(a.model)} · ${a.effort}` : modelName(a.model)
      const steps = a.stepTotal ? `${a.stepDone ?? 0}/${a.stepTotal}${a.stepNote ? ' ' + a.stepNote : ''} · ` : ''
      return withCrab(
        a.id,
        costumeOf(a.type),
        <>

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    const f = await read($, flow)
    if (f === null || e.props.hasSurvey) return next(e)

    const ui = $.ui.resolve(e)
    const { Box, Text, Button } = ui
    const list = await read($, agents)
    const crew = list.length + plannedOf(f, list).length + (await read($, bg)).length
    const isWorking = list.some(a => a.status === 'running')
    const crewButton = (
      <Button key="savvy-agents" label={`×${crew}`} plain onPress={() => void togglePane($)} />
    )
    const percent = `${Math.round(ratio(f) * 100)}%`
    const dismiss = (
      <Button
        key="savvy-dismiss"
        label="✕"
        plain
        role="dismiss"
        onPress={() => update($, flow, () => null)}
      />
    )

    if (e.surface === 'desktop' && 'Svg' in ui) {
      const { Svg } = ui
      // About 8 CSS px per reported column; the rest is the count, the dismiss
      // and their gaps. No floor above the slot: a row wider than it would wrap.
      const width = Math.max(180, Math.min(1600, (e.props.bodyColumns || 100) * 8 - 96))
      return (
        <Box flexDirection="row" alignItems="center" gap={1}>
          <Svg source={rowSvg(f, width, isWorking)} alt={`${f.title}: ${label(f)}, ${percent}`} width={width} height={H} />
          {crewButton}
          {dismiss}
        </Box>
      )
    }

    const cols = e.props.bodyColumns
    const titleW = Math.max(8, Math.min(30, f.title.length + 2, Math.floor(cols / 3)))
    const width = Math.max(6, Math.min(40, cols - titleW - 32))
    return (
      <Box flexDirection="row" gap={2} alignItems="center">
        <Box width={titleW} flexShrink={0}>
          <Text color={f.isFinished ? DONE : ACCENT}>● </Text>
          <Text wrap="truncate-end">{f.title}</Text>
        </Box>
        <Text color={f.isFinished ? DONE : ACCENT}>{barText(f, width)}</Text>
        <Text bold>{label(f)}</Text>
        <Text dimColor>{percent}</Text>
        <Box flexDirection="column" flexShrink={0}>
          {crabLines(Text, spriteOf('orchestrator'), 'band')}
        </Box>
        {crewButton}
        {dismiss}
      </Box>
    )
  })

const crabLines = (Text: TextTag, lines: Run[][], key: string) =>
  lines.map((line, y) => (
    <Text key={`${key}-${y}`}>
      {line.map((r, x) => (
        <Text key={`${x}`} color={r.fg}>
          {r.text}
        </Text>
      ))}
    </Text>
  ))