progress-band

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    if (e.props.hasSurvey) return next(e)
    const t = $.ui.resolve(e)
    const { Box, Button, Text } = t
    // the terminal's table has an Svg too, drawn as nothing there
    const Svg = e.surface !== 'terminal' && 'Svg' in t ? t.Svg : null
    const u = await read($, usage)
    const all = await read($, plans)
    const now = await $.clock.now()
    const cols = Math.max(30, e.props.bodyColumns || 100)
    const meters = metersOf(u, now)
    // a window that has reset reads 0 here; while the quota glitches the terminal steps its words by redrawing each second
    const isGlitch = quotaGlitch($, meters.find(m => m.key === 'five_hour')?.used ?? 0, now)
    band = { surface: e.surface, isWorking: e.props.isWorking, isGlitch }
    const tokens = u.tokens && tokenSum(u.tokens) > 0 ? u.tokens : null
    const budget = childBudget(all.length)
    // drawing memory of bars no longer listed (closed, or pushed out past MAX_BARS) goes
    for (const id of lastHead.keys()) if (!all.some(p => p.id === id)) lastHead.delete(id)
    for (const key of lastSource.keys()) if (!all.some(p => key.startsWith(`${p.id}/`))) lastSource.delete(key)

    // what the main conversation does now, leading the meters' row
    const act = await read($, activity)
    const ses = await read($, session)
    const isBusy = e.props.isWorking || act.state !== 'idle'
    const doing = act.state === 'tool' ? (act.tool ?? say.tool) : isBusy ? say.thinking : say.idle

    // this session's tokens and the week's in one item after the weekly meter; on the desktop a small Sankey
    // leads it and hovering opens the full one. The app draws that card in its own theme, so the card forces
    // no colour: forced light text was unreadable on its light card
    const tokenWords = tokens ? `${compact(Math.min(ses.tokens, tokenSum(tokens)))} / ${compact(tokenSum(tokens))} tokens` : ''
    const tokenNode = (hasWords = true) =>
      tokens ? (
        <Box key="tokens" flexDirection="row" columnGap={1} alignItems="center">
          {Svg ? <Svg source={sankeySvg(tokens, ses.tokens, isBusy, false)} alt={sankeyAlt(tokens, ses.tokens)} width={SANKEY_ICON_W} height={SANKEY_ICON_H} /> : null}
          {hasWords ? <Text dimColor>{`${Svg ? '' : '· '}${tokenWords}`}</Text> : null}
          {Svg ? (
            <Box position="absolute" top={1} right={0} display="none" hover={{ display: 'flex' }} flexDirection="column" paddingX={1}>
              <Text bold>{say.tokensCard}</Text>
              <Svg source={sankeySvg(tokens, ses.tokens, isBusy, true)} alt={sankeyAlt(tokens, ses.tokens)} width={say.sankeyW} height={SANKEY_H} />
            </Box>
          ) : null}
        </Box>
      ) : null

    // the tree glyph before each row that hangs from a task
    const branch = (isLast: boolean) => <Text dimColor>{isLast ? '└' : '├'}</Text>

    let meterRow: RenderChildren = null
    let bars: RenderChildren[] = []

    if (Svg) {
      // every track has the same width and is pinned to the right edge (fixed-width percent, close button),
      // so rows line up whatever their titles; the desktop reports ~8 CSS px per column, draws text at ~14 px,
      // and pads the band, so the room left for the icon, percent, close button and gaps includes that padding
      const total = Math.max(320, cols * 8)
      const titlePx = Math.min(Math.round(total * 0.3), Math.max(48, ...all.map(p => Math.round(textWidth(p.title, 14)))))
      const trackW = Math.max(120, Math.min(1400, total - titlePx - 144))
      // one line whatever runs: see meterDrop
      const drop = meterDrop(meters, tokenWords, cols)
      meterRow = (
        <Box key="meters" flexDirection="row" columnGap={3} alignItems="center" flexWrap="nowrap">
          <Box key="doing" flexDirection="row" columnGap={1} alignItems="center">
            <Svg source={isBusy ? stateIcon('running', true) : IDLE_ICON} alt={doing} width={ICON} height={ICON} />
            <Text color={isBusy ? STATE_COLOR.running : undefined} dimColor={!isBusy}>
              {cut(doing, DOING_PX, s => textWidth(s, 14))}
            </Text>
          </Box>
          {meters.map(m => {
            const color = m.used === null ? undefined : STATE_COLOR[levelOf(m.used)]
            const reset = resetWords(m, drop)
            return (
              <Box key={`meter-${m.key}`} flexDirection="row" columnGap={1} alignItems="center">
                <Text dimColor>{m.label}</Text>
                <Svg source={meterSvg(m)} alt={`${m.label} ${meterValue(m)}`} width={METER_W} height={METER_SVG_H} />
                <Text color={color} dimColor={color === undefined} bold>
                  {meterValue(m)}
                </Text>
                {reset ? <Text dimColor>{reset}</Text> : null}
                {m.key === 'seven_day' ? tokenNode(drop < 4) : null}
              </Box>
            )
          })}
        </Box>
      )
      // live traffic per bar: the main turn works on the running bar the model moved last, each running agent on its own bar
      const focus = focusOf(all)?.id
      bars = all.map(p => {
        const traffic = (e.props.isWorking && p.id === focus ? 1 : 0) + (p.agents ?? []).filter(isLive).length
        const track = trackSvg(p, trackW, traffic, isGlitch)
        const v = visibleAgents(p, Math.max(1, budget - (p.note && p.state !== 'running' ? 1 : 0)))
        const rows: RenderChildren[] = []
        const hidden = v?.hidden ?? []
        const shown = v?.shown ?? []
        const hasNote = Boolean(p.note) && p.state !== 'running'
        const total = (hasNote ? 1 : 0) + shown.length + (hidden.length > 0 ? 1 : 0)
        let n = 0
        if (hasNote) {
          n += 1
          rows.push(
            <Box key={`note-${p.id}`} flexDirection="row" gap={1} marginLeft={1}>
              {branch(n === total)}
              <Text color={STATE_COLOR[p.state]} wrap="truncate">
                {p.note}
              </Text>
            </Box>,
          )
        }
        for (const a of shown) {
          n += 1
          const state = AGENT_STATE[a.state]
          const spec = agentSpec(a)
          rows.push(
            <Box key={`agent-${a.id}`} flexDirection="row" alignItems="center" gap={1} marginLeft={1}>
              {branch(n === total)}
              <Svg source={stateIcon(state)} alt={say.state[state]} width={ICON} height={ICON} />
              <Text wrap="truncate" dimColor={a.state === 'done'}>
                {a.title}
              </Text>
              {spec ? <Text dimColor>{spec}</Text> : null}
              <Box flexGrow={1} />
              {isLive(a) ? <Text color={STATE_COLOR[state]}>{a.tool}</Text> : null}
              {a.endedAt === null ? (
                <Svg source={liveSource(`${p.id}/${a.id}`, agentClock(a.startedAt), now)} alt={say.ran(elapsed(now - a.startedAt))} width={CLOCK_W} height={REEL} />
              ) : (
                <Text dimColor>{elapsed(a.endedAt - a.startedAt)}</Text>
              )}
            </Box>,
          )
        }
        if (hidden.length > 0) {
          rows.push(
            <Box key={`more-${p.id}`} flexDirection="row" gap={1} marginLeft={1}>
              {branch(true)}
              <Text dimColor>{say.more(hidden.length, hidden.filter(a => a.state === 'done').length)}</Text>
            </Box>,
          )
        }

        return (
          <Box key={`bar-${p.id}`} flexDirection="column">
            <Box flexDirection="row" alignItems="center" gap={1}>
              <Svg source={stateIcon(p.state, traffic > 0)} alt={say.state[p.state]} width={ICON} height={ICON} />
              <Text wrap="truncate" dimColor={p.state === 'done'}>
                {p.title}
              </Text>
              <Box flexGrow={1} />
              <Box key={`track-${p.id}`} flexShrink={0}>
                <Svg source={track.base} alt={rowAlt(p)} width={trackW} height={ROW_H} />
                <Box position="absolute" top={0} left={0}>
                  {/* the hover layer is rebuilt on every redraw anyway, so its clock is set from now each time */}
                  <Svg source={withTime(track.overlay, now)} alt={say.hover(p.title)} width={trackW} height={ROW_H} isInteractive />
                </Box>
              </Box>
              <Text color={p.state === 'done' ? STATE_COLOR.done : undefined} dimColor={p.state !== 'done'}>
                {`${String(percentOf(p)).padStart(3, FIGURE_SPACE)}%`}
              </Text>
              <Button key={`close-${p.id}`} plain dimColor label="✕" onPress={() => dropPlan($, p.id)} />
            </Box>
            {rows}
          </Box>