ccprogress

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    if (e.props.hasSurvey || e.props.view.agentId !== undefined) return next(e)
    const p = await read($, plan)
    const expanded = await read($, isExpanded)
    const isSpinnerShowing = e.props.isWorking && e.surface === 'terminal'
    if (!hasSteps(p) || (isSpinnerShowing && !expanded)) return next(e)
    const kit = $.ui.resolve(e)
    const { Box, Button, Text } = kit
    const s = summarize(p)
    const words = wordsFor(isCjk(p))
    // Keep what other mods draw here, but not the engine's empty band.
    const below = await next(e)
    const lead = isSpinnerShowing ? (
      <Box paddingLeft={TERMINAL_INDENT} flexShrink={1}>
        <Text dimColor wrap="truncate-end">
          {p.goal !== '' ? p.goal : words.stepsDone(s.done, s.total)}
        </Text>
      </Box>
    ) : (
      progressRow(kit, p, {
        surface: e.surface,
        columns: e.props.bodyColumns,
        isWorking: e.props.isWorking,
        elapsed: await elapsedOf($, p, e.surface, e.props.isWorking),
      })
    )
    const dismiss =
      e.surface === 'terminal' ? (
        <Button key="dismiss" label="×" plain onPress={() => persist($, null)} />
      ) : (
        <Button key="dismiss" role="dismiss" label={words.dismiss} onPress={() => persist($, null)} />
      )
    return (
      <Box flexDirection="column">
        <Box flexDirection="row" alignItems="center" columnGap={2}>
          {lead}
          <Box flexDirection="row" alignItems="center" columnGap={1} flexShrink={0}>
            <Button
              key="toggle"
              label={expanded ? `${words.hideSteps} ▴` : `${words.viewSteps} ▾`}
              onPress={() => update($, isExpanded, value => !value)}
            />
            {s.isComplete && dismiss}
          </Box>
        </Box>
        {expanded && (
          <Box marginTop={1} flexDirection="column">
            {checklist(kit, e.surface, p, e.props.isWorking)}
          </Box>
        )}
        {below.type !== 'engine' && below}
      </Box>
    )
  })

export function progressRow(kit: Kit, plan: ProgressPlan, { surface, columns, isWorking, elapsed }: RowOptions): RenderNode {
  const { Box, Text } = kit
  const s = summarize(plan)
  const words = wordsFor(isCjk(plan))
  const phase = phaseOf(plan, isWorking)
  const count = (
    <Text dimColor>
      {s.position}/{s.total}
    </Text>
  )
  const timer =
    phase === 'working' && elapsed !== undefined ? (
      <Text {...(elapsed.isStuck ? { color: WARNING } : { dimColor: true })}>· {elapsed.text}</Text>
    ) : null
  if (surface === 'terminal') {
    return (
      <Box key="progress-row" flexDirection="row" columnGap={2} paddingLeft={TERMINAL_INDENT} flexShrink={1}>
        {bar(kit, surface, plan, columns, false)}
        {count}
        {phase === 'done' ? (
          <Box flexDirection="row" columnGap={1} flexShrink={1}>
            <Text color={SUCCESS}>✓ {words.allDone}</Text>
            {plan.goal !== '' && (
              <Text dimColor wrap="truncate-end">
                {plan.goal}
              </Text>
            )}
          </Box>
        ) : (
          <Box flexDirection="row" columnGap={1} flexShrink={1}>
            <Text wrap="truncate-end">{s.current?.title ?? ''}</Text>
            {timer}
          </Box>
        )}
      </Box>
    )
  }
  // A narrow band gives up the goal first, then squeezes the bar and truncates the step;
  // "All done", the count and the buttons beside the row keep their room. The row clips
  // rather than painting over the buttons.
  return (
    <Box key="progress-row" flexDirection="row" alignItems="center" columnGap={2} flexGrow={1} flexShrink={1} minWidth={0} overflow="hidden">
      <Box flexDirection="row" alignItems="center" columnGap={1} flexGrow={1} flexShrink={1} minWidth={0}>
        {phaseIcon(kit, phase)}
        {phase === 'done' ? (
          <Box key="label" flexShrink={0}>
            <Text>{words.allDone}</Text>
          </Box>
        ) : (
          <Box key="label" flexShrink={1} minWidth={0}>
            <Text wrap="truncate-end">{s.current?.title ?? ''}</Text>
          </Box>
        )}
        {timer && <Box flexShrink={0}>{timer}</Box>}
        {phase === 'done' && plan.goal !== '' && (
          <Box key="goal" flexShrink={GOAL_SHRINK} minWidth={0}>
            <Text dimColor wrap="truncate-end">
              {plan.goal}
            </Text>
          </Box>
        )}
      </Box>
      <Box flexDirection="row" alignItems="center" columnGap={1} flexShrink={1} minWidth={0}>
        <Box key="bar" flexShrink={1} minWidth={0}>
          {bar(kit, surface, plan, columns, phase === 'working')}
        </Box>
        <Box key="count" flexShrink={0}>
          {count}
        </Box>
      </Box>
    </Box>
  )
}

function phaseIcon(kit: Kit, phase: Phase): RenderNode {
  const { Svg } = kit as Elements['desktop']
  // Only an interactive SVG animates; the static states stay plain images.
  return <Svg source={phaseIconSvg(phase, PALETTE)} alt={PHASE_ALT[phase]} width={16} height={16} isInteractive={phase === 'working'} />
}

function bar(kit: Kit, surface: RenderSurface, plan: ProgressPlan, columns: number | undefined, isWorking: boolean): RenderNode {
  const Svg = svgOf(kit, surface)
  if (Svg) {
    const s = summarize(plan)
    const width = svgWidth(s.total)
    return (
      <Svg
        source={barSvg(plan.steps, width, PALETTE, isWorking)}
        alt={`${s.done} of ${s.total} steps done`}
        height={4}
        isInteractive={isWorking}
      />
    )
  }
  const { Text } = kit
  return (
    <Text>
      {barRuns(plan.steps, barWidth(columns)).map((run, i) => (
        <Text key={`bar-${i}`} {...toneProps(run.tone)}>
          {run.text}
        </Text>
      ))}
    </Text>
  )
}

export function checklist(kit: Kit, surface: RenderSurface, plan: ProgressPlan, isWorking: boolean): RenderNode {
  const { Box, Text } = kit
  return (
    <Box key="checklist" flexDirection="column" paddingLeft={surface === 'terminal' ? TERMINAL_INDENT : 0}>
      {plan.steps.map((step, i) => (
        <Box key={`step-${i}`} flexDirection="row" alignItems="center" columnGap={1}>
          {stepIcon(kit, surface, step.status, isWorking)}
          <Text dimColor={step.status === 'completed'} bold={step.status === 'in_progress'} wrap="truncate-end">
            {step.title}
          </Text>
        </Box>
      ))}
    </Box>
  )
}

function stepIcon(kit: Kit, surface: RenderSurface, status: ProgressStatus, isWorking: boolean): RenderNode {
  const Svg = svgOf(kit, surface)
  if (Svg) {
    const isAnimated = isWorking && status === 'in_progress'
    return <Svg source={stepIconSvg(status, PALETTE, isAnimated)} alt={STATUS_ALT[status]} width={14} height={14} isInteractive={isAnimated} />
  }
  const { Text } = kit
  const tone: Tone = status === 'completed' ? 'done' : status === 'in_progress' ? 'current' : 'pending'
  return <Text {...toneProps(tone)}>{GLYPHS[status]}</Text>
}