clean-view

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

    const enabled = await read($, enabledAtom)
    const cl = await read($, checklistAtom)
    const tick = (await read($, tickAtom)) ?? 0
    const nowMs = await $.clock.now()

    const { Box, Text, Button } = $.ui.resolve(e)
    const cols = e.props.bodyColumns

    const toggle = async () => {
      const cur = await read($, enabledAtom)
      const nxt = !cur
      await update($, enabledAtom, () => nxt)
      await $.store.set('cleanViewEnabled', nxt)
      $.ui.toast(`Clean View ${nxt ? 'on' : 'off'}`)
    }

    const btnLabel = `● Clean View: ${enabled ? 'ON' : 'OFF'}`

    // When off or no active job: show button only
    if (!enabled || cl === null) {
      return (
        <Box flexDirection="column">
          {below}
          <Box key="cv" flexDirection="row" justifyContent="flex-end" width={cols}>
            <Button key="toggle" label={btnLabel} onPress={toggle} />
          </Box>
        </Box>
      )
    }

    // Header text per phase
    const startMs = cl.startedAt ?? nowMs
    const dur = cl.finishedAt !== null ? elapsed(startMs, cl.finishedAt) : elapsed(startMs, nowMs)

    let headerText: string
    let headerColor: string | undefined
    let headerBold = false
    switch (cl.phase) {
      case 'working':
        headerText = `${cl.title} · ${dur}`
        break
      case 'needs-you':
        headerText = `⚑ Needs you · ${cl.needsYouReason ?? 'Claude needs your input'}`
        headerColor = 'yellow'
        headerBold = true
        break
      case 'stuck':
        headerText = `⚠ Stuck: ${cl.stuckReason ?? 'something went wrong'}`
        headerColor = 'red'
        break
      case 'stopped':
        headerText = `■ Stopped · ${cl.title} · you pressed Esc`
        headerColor = 'gray'
        break
      case 'done':
        headerText = `✓ All done · ${cl.title} · took ${dur}`
        headerColor = 'green'
        break
      default:
        headerText = cl.title
    }

    // Collapsed done: one line + button
    if (cl.isCollapsed && cl.phase === 'done') {
      return (
        <Box flexDirection="column">
          {below}
          <Box key="cv" flexDirection="row" justifyContent="space-between" width={cols}>
            <Text color={headerColor} dimColor>{headerText}</Text>
            <Button key="toggle" label={btnLabel} onPress={toggle} />
          </Box>
        </Box>
      )
    }

    // Layout math: icon(2) + name + gap + meter(10) + 2 + label(7)
    // overhead = 21; name column gets the rest, min 10
    const nameWidth = Math.max(10, cols - 23)
    const firstUpcomingIdx = cl.tasks.findIndex(t => t.status === 'upcoming')

    const taskRows = cl.tasks.map((task, i) => {
      const isDone = task.status === 'done'
      const isActive = task.status === 'active'
      const isFirst = task.status === 'upcoming' && i === firstUpcomingIdx

      const icon = cl.phase === 'needs-you' && isActive ? '‖' :
                   isDone ? '✓' : isActive ? '▶' : '○'
      const meterStr = isDone ? meter(100) :
                       isActive && task.hasReported ? meter(task.percent) :
                       isActive ? sweepMeter(tick) :
                       meter(0)
      const labelStr = isDone ? 'Done' :
                       isActive && task.hasReported ? `${task.percent}%` :
                       isActive ? 'Working' :
                       isFirst ? 'Next' : 'Up next'

      const displayName = task.name.length > nameWidth
        ? task.name.slice(0, nameWidth - 1) + '…'
        : task.name

      return (
        <Box key={`t-${task.id}`} flexDirection="row">
          <Text color={isDone ? 'green' : undefined} dimColor={!isActive && !isDone}>
            {icon}{' '}
          </Text>
          <Text dimColor={isDone || !isActive} bold={isActive}>
            {displayName}
          </Text>
          <Box flexGrow={1} />
          <Text dimColor={isDone || !isActive}>{meterStr}</Text>
          <Text dimColor>{'  '}{labelStr}</Text>
        </Box>
      )
    })

    return (
      <Box flexDirection="column">
        {below}
        <Box key="cv" flexDirection="column" width={cols}>
          <Box flexDirection="row" justifyContent="space-between">
            <Text color={headerColor} bold={headerBold}>{headerText}</Text>
            <Button key="toggle" label={btnLabel} onPress={toggle} />
          </Box>
          {taskRows}
        </Box>
      </Box>
    )
  })