task-line

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    const below = await next(e)
    if (e.props.hasSurvey) return below
    const line = await safely($, 'AbovePrompt', () => lineOf($, e as RenderInput, e.props.bodyColumns || DEFAULT_COLUMNS, timing))
    if (!line) return below
    const { Box } = $.ui.resolve(e)
    return (
      <Box flexDirection="column">
        {below}
        {line}
      </Box>
    )
  })

async function lineOf($: Engine, e: RenderInput, columns: number, timing: Timing, isPlain = false) {
  if (await read($, isOff)) return null
  // A finished list is judged by its age, not by a timer alone: a reload of this module drops timers, the state stays.
  const now = await $.clock.now()
  const age = (l: TaskList) => (typeof l.doneAt === 'number' && Number.isFinite(l.doneAt) ? now - l.doneAt : 0)
  // Above the question dialog only the newest list is drawn. With two rows Claude Code refuses the tree and draws no line at all (its
  // debug log: "more than 12 rows around the dialog"); one row passes. Found by hand, the limit is not documented.
  const shown = (await read($, lists))
    .filter(l => !l.isHidden && l.tasks.length > 0 && (l.doneAt === null || age(l) < timing.lingerMs))
    .slice(isPlain ? -1 : -MAX_LISTS)
  if (shown.length === 0) return null
  // A render may not write state: the hide runs just after, once the wait is over.
  for (const l of shown) if (l.doneAt !== null && Number.isFinite(l.doneAt)) hideLater($, l.name, l.doneAt, timing.lingerMs - age(l))

  const asking = (await read($, questions)) > 0
  const failed = await read($, failure)
  // Only the newest list is the one Claude is working on.
  const rows = shown.map((l, i) => rowOf(l, asking && i === shown.length - 1, i === shown.length - 1 ? failed : null))
  // A button needs a click: the desktop app and a fullscreen terminal have one, a terminal band does not.
  const canClick = e.surface !== 'terminal' || e.viewport?.isFullscreen === true
  const { label: labelWidth, bar: barWidth, showNote } = layout(rows, columns, canClick && !isPlain)
  const visible = showNote ? rows : rows.map(r => ({ ...r, note: null }))
  const { Box, Button, Text } = $.ui.resolve(e)
  const dismiss = (name: string) => () => safely($, 'dismiss', () => update($, lists, all => all.map(l => (l.name === name ? { ...l, isHidden: true } : l))))

  // The bar. A terminal draws characters. The desktop app draws a box-drawing character wider than a cell, so a bar of them wrapped into
  // a second line there (found by hand; `overflow` and `height` do not clip it): it draws two boxes with a width in cells and a background.
  const isDesktop = e.surface === 'desktop'
  const barOf = (r: Row, filled: number) =>
    !isDesktop ? (
      <Box key="bar">
        <Text color={r.color}>{'━'.repeat(filled)}</Text>
        <Text dimColor>{'─'.repeat(barWidth - filled)}</Text>
      </Box>
    ) : (
      <Box key="bar" width={barWidth} flexShrink={0}>
        <Box width={filled} flexShrink={0} backgroundColor={r.color}>
          <Text>{NBSP.repeat(filled)}</Text>
        </Box>
        <Box width={barWidth - filled} flexShrink={0} backgroundColor={TRACK_COLOR}>
          <Text>{NBSP.repeat(barWidth - filled)}</Text>
        </Box>
      </Box>
    )

  // Around the question dialog the engine refuses layout props such as width: spaces do the aligning there.
  if (isPlain) {
    return (
      <Box flexDirection="column">
        {visible.map(r => {
          const { filled, percent } = progressOf(r.done, r.total, barWidth)
          return (
            <Box key={`row:${r.name}`} flexDirection="row">
              <Text color={r.color}>{` ${r.glyph} `}</Text>
              <Text>{`${fit(r.label, labelWidth)} `}</Text>
              {barOf(r, filled)}
              <Text>{` ${r.done}/${r.total}`}</Text>
              <Text dimColor>{` ${`${percent}%`.padStart(PERCENT_WIDTH)}`}</Text>
              {r.note && (
                <Text color={r.color} bold>
                  {` ${r.note}`}
                </Text>
              )}
            </Box>
          )
        })}
      </Box>
    )
  }

  return (
    <Box flexDirection="column" paddingX={1}>
      {visible.map(r => {
        const { filled, percent } = progressOf(r.done, r.total, barWidth)
        return (
          <Box key={`row:${r.name}`} flexDirection="row" gap={1}>
            <Text color={r.color}>{r.glyph}</Text>
            <Box key="label" width={labelWidth} flexShrink={0}>
              <Text wrap="truncate">{r.label}</Text>
            </Box>
            {barOf(r, filled)}
            <Text>{`${r.done}/${r.total}`}</Text>
            <Text dimColor>{`${percent}%`.padStart(PERCENT_WIDTH)}</Text>
            {r.note && (
              <Text color={r.color} bold>
                {r.note}
              </Text>
            )}
            {canClick && <Button key={`dismiss:${r.name}`} label="×" plain dimColor onPress={dismiss(r.name)} />}
          </Box>
        )
      })}
    </Box>
  )
}