plan-progress

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    const list = await read($, plans)
    if (list.length === 0 || e.props.hasSurvey || !(await read($, isOpen))) {
      band = null
      return next(e)
    }
    if (e.surface === 'terminal') {
      const { Box, Button, Text, Raster } = $.ui.resolve(e)
      await read($, tick)
      const now = await $.clock.now()
      const cols = Math.max(30, e.props.bodyColumns || 100)
      const hasClicks = e.viewport?.isFullscreen === true
      const titleW = Math.max(4, Math.min(Math.round(cols * 0.28), Math.max(...list.map(p => cellsOf(p.title)))))
      const trackW = Math.max(12, Math.min(512, cols - titleW - (hasClicks ? 15 : 13)))
      band = { requestId: e.requestId, W: trackW, list }
      return (
        <Box flexDirection="column">
          {list.map(p => {
            const v = visibleAgents(p, now, stripBudget(list.length))
            const strips = v ? stripCells(v, trackW, now) : null
            const w = where(p)
            const pct = percent(p, w)
            return (
              <Box key={`bar-${p.id}`} flexDirection="column">
                <Box flexDirection="row" gap={1}>
                  <Text color={STATE_COLOR[p.state]}>{STATE_GLYPH[p.state]}</Text>
                  <Box width={titleW} flexShrink={0}>
                    <Text wrap="truncate">{p.title}</Text>
                  </Box>
                  <Raster key={`track-${p.id}`} columns={trackW} rows={1} cells={trackCells(p, trackW, now)} />
                  <Text dimColor>{`${String(pct).padStart(3, FIGURE_SPACE)}%`}</Text>
                  {hasClicks ? <Button key={`close-${p.id}`} plain dimColor label="✕" onPress={() => dropPlan($, p.id)} /> : null}
                </Box>
                {p.note && p.state !== 'running' ? (
                  <Box marginLeft={titleW + 3}>
                    <Text color={STATE_COLOR[p.state]} wrap="truncate">{p.note}</Text>
                  </Box>
                ) : null}
                {strips ? (
                  <Box marginLeft={titleW + 3}>
                    <Raster key={`strips-${p.id}`} columns={trackW} rows={strips.rows} cells={strips.cells} />
                  </Box>
                ) : null}
              </Box>
            )
          })}
        </Box>
      )
    }
    const t = $.ui.resolve(e)
    const { Box, Button, Text } = t
    const Svg = 'Svg' in t ? t.Svg : null
    const total = Math.max(320, (e.props.bodyColumns || 100) * 8)
    // every bar has the same width and is pinned to the right edge (fixed-width percent, close button),
    // so rows line up whatever their titles; the slack goes into the gap after the title.
    // Desktop reports ~8 CSS px per column; glyph, gaps, percent and the close button take ~126 px.
    const titleWidth = Math.min(Math.round(total * 0.3), Math.max(...list.map(p => Math.round(textWidth(p.title, 6.4)))))
    const trackW = Math.max(120, Math.min(1400, total - titleWidth - 140))
    await read($, tick)
    const now = await $.clock.now()
    // a hairline between task bars, so each bar and its agent strips read as one group
    const divider = `<svg xmlns="http://www.w3.org/2000/svg" width="${total}" height="1"><rect width="${total}" height="1" fill="#808080" fill-opacity=".22"/></svg>`

    return (
      <Box flexDirection="column" gap={1}>
        {list.flatMap((p, i) => {
          const v = visibleAgents(p, now, stripBudget(list.length))
          const track = trackSvg(p, trackW)
          const hover = liveSource(track.overlay, now)
          const strips = v && Svg
            ? stripsSvg(v, p.agents ?? [], trackW).map(r => (
                <Svg
                  key={`strip-${p.id}-${r.key}`}
                  source={liveSource(`<svg xmlns="http://www.w3.org/2000/svg" width="${trackW}" height="${r.height}">${STRIP_STYLE}${r.html}</svg>`, now)}
                  alt={stripAlt(p, r.key)}
                  width={trackW}
                  height={r.height}
                />
              ))
            : []
          const agentsAlt = v ? `; agents: ${(p.agents ?? []).map(a => `${a.title} ${a.state}`).join(', ')}` : ''
          const line = i > 0 && Svg ? [<Svg key={`div-${p.id}`} source={divider} alt="divider" width={total} height={1} />] : []
          const w = where(p)
          const pct = percent(p, w)
          const color = STATE_COLOR[p.state]
          const stageName = p.stages[w.stage]?.name ?? ''
          const alt =
            p.state === 'done'
              ? `${p.title}: done, ${plural(w.total, 'step')}${p.endedAt ? ` in ${elapsed(p.endedAt - p.startedAt)}` : ''}`
              : `${p.title}: ${stageName}, step ${w.step} of ${w.stageSize}, ${pct}%${p.note ? ` — ${p.note}` : ''}${agentsAlt}`
          const bar = `${'━'.repeat(Math.round(pct / 4))}${'─'.repeat(25 - Math.round(pct / 4))}`

          return [
            ...line,
            <Box key={`bar-${p.id}`} flexDirection="row" alignItems={v ? 'flex-start' : 'center'} gap={1}>
              <Text color={color}>{STATE_GLYPH[p.state]}</Text>
              <Text wrap="truncate">{p.title}</Text>
              <Box flexGrow={1} />
              {Svg ? (
                <Box flexDirection="column" flexShrink={0}>
                  <Box key={`track-${p.id}`}>
                    <Svg source={track.base} alt={alt} width={trackW} height={TRACK_H} />
                    <Box position="absolute" top={0} left={0}>
                      <Svg source={hover} alt={`${p.title}: hover for times`} width={trackW} height={TRACK_H} isInteractive />
                    </Box>
                  </Box>
                  {strips}
                </Box>
              ) : (
                <Text>
                  <Text color={color}>{bar.replace(/─/g, '')}</Text>
                  <Text dimColor>{bar.replace(/━/g, '')}</Text>
                  <Text color={color}>{` ${stageName} ${w.step}/${w.stageSize}`}</Text>
                </Text>
              )}
              <Text dimColor>{`${String(pct).padStart(3, FIGURE_SPACE)}%`}</Text>
              <Button key={`close-${p.id}`} plain dimColor label="✕" onPress={() => dropPlan($, p.id)} />
            </Box>,
          ]
        })}
      </Box>
    )
  })