night-shift

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    // A drawing is a hook frame: a worker spawned here runs past this hook alone (see spawnWorker).
    if (spawnRequest !== null && !isSpawning) await spawnWorker($)
    const isMorning = await read($, morningAtom)
    if (e.props.hasSurvey || !isMorning) return next(e)
    const unseen = (await read($, tasksAtom)).filter(t => !t.isSeen && isFinished(t))
    if (unseen.length === 0) return next(e)
    const done = unseen.filter(t => t.status === 'done' || t.status === 'adopted')
    const pass = done.filter(t => t.checks === 'pass').length
    const others = unseen.length - done.length
    const { Box, Text, Button } = $.ui.resolve(e)
    const below = await next(e)
    const line = `${done.length} ${done.length === 1 ? 'task' : 'tasks'} done (${pass} checks pass)${others > 0 ? `, ${others} without a result` : ''}`
    const make = { Box, Text, Button } as unknown as BandMake
    const mode = e.surface === 'terminal' ? glyphMode : 'full'
    return band(
      make,
      [
        {
          key: 'night-shift-morning',
          tone: others === 0 ? 'done' : 'warn',
          icon: GLYPHS.moon,
          title: 'Night shift',
          text: line,
          actions: [
            { key: 'night-report', label: 'Report', isPrimary: true, onPress: () => void openReport($) },
            { key: 'night-dismiss', label: 'Dismiss', isQuiet: true, isDismiss: true, onPress: () => void dismissMorning($) },
          ],
        },
      ],
      e.props.bodyColumns,
      below,
      mode,
    )
  })

export function band(make: BandMake, rows: readonly BandRow[], columns: number, below?: RenderElement | null, glyphs: BandGlyphs = 'full'): RenderElement {
  const drawn = rows.map(r => bandRow(make, r, columns, glyphs))
  return make.Box({ flexDirection: 'column', children: isNothing(below) ? drawn : [...drawn, below as RenderElement] })
}

export function bandRow(make: BandMake, row: BandRow, columns: number, glyphs: BandGlyphs = 'full'): RenderElement {
  const tone = TONES[row.tone]
  const mark = glyphs === 'full' && row.icon ? row.icon[0] : tone.glyph
  const actions = row.actions ?? []
  const buttons = actions.reduce((n, a) => n + buttonWidth(a) + 1, 0)
  // a full icon (an emoji, say) may take two cells
  const markWidth = glyphs === 'full' && row.icon ? 3 : 2
  const head = row.title ? row.title.length + 3 : 0
  const tail = row.note ? row.note.length + 3 : 0
  const isStacked = actions.length > 0 && columns - markWidth - buttons - head - tail < 24
  const lines = Math.max(1, row.maxLines ?? 2)
  // the first line shares its width with the glyph, the title, the note and (beside it) the buttons; the others have it all
  const firstLine = Math.max(10, columns - markWidth - (isStacked ? 0 : buttons) - head - tail)
  const room = firstLine + (lines - 1) * Math.max(10, columns - markWidth)
  const children: RenderElement[] = []
  if (row.title) children.push(make.Text({ bold: true, children: [row.title] }), make.Text({ dimColor: true, children: [' · '] }))
  children.push(make.Text({ children: [clipText(row.text, room)] }))
  if (row.note) children.push(make.Text({ dimColor: true, children: [` · ${row.note}`] }))
  const glyph = make.Text({ color: tone.color, bold: true, children: [mark] })
  const text = make.Box({ flexShrink: 1, flexGrow: 1, children: [make.Text({ wrap: 'wrap', children })] })
  const drawn = actions.map(a =>
    make.Button({
      key: a.key,
      label: a.label,
      ...(a.hotkey ? { hotkey: a.hotkey } : {}),
      ...(a.isPrimary ? { variant: 'primary' } : {}),
      ...(a.isQuiet ? { dimColor: true } : {}),
      ...(a.isDismiss ? { role: 'dismiss' } : {}),
      onPress: a.onPress,
    }),
  )
  if (!isStacked) return make.Box({ key: row.key, flexDirection: 'row', columnGap: 1, children: [glyph, text, ...drawn] })
  return make.Box({
    key: row.key,
    flexDirection: 'column',
    children: [
      make.Box({ flexDirection: 'row', columnGap: 1, children: [glyph, text] }),
      make.Box({ flexDirection: 'row', flexWrap: 'wrap', columnGap: 1, paddingLeft: 2, children: drawn }),
    ],
  })
}

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const { Box, Text, Button, Code } = $.ui.resolve(e)
    const tasks = await read($, tasksAtom)
    const shown = await read($, diffAtom)
    const now = await $.clock.now()
    const visible = tasks.filter(t => t.status !== 'discarded' || t.night === tasks.at(-1)?.night).slice(-10).reverse()
    const closeRow = (
      <Box marginTop={1}>
        <Button key="close" hotkey="x" role="dismiss" label="Close" onPress={() => void $.ui.close({ id: PANE })} />
      </Box>
    )
    if (visible.length === 0) {
      return (
        <Box flexDirection="column">
          <Text dimColor wrap="wrap">Nothing yet. Add tasks to .claude/backlog.md (or /night add &lt;task&gt;) and turn it on with /night on.</Text>
          {closeRow}
        </Box>
      )
    }
    const mode = e.surface === 'terminal' ? glyphMode : 'full'
    const paneRows = e.props.scroll.bodyRows > 0 ? e.props.scroll.bodyRows : (e.viewport?.rows ?? 40)
    const statLines = Math.max(2, Math.min(8, Math.floor((paneRows - 8) / Math.max(1, visible.length)) - 4))

    const card = (t: NightTask) => {
      const elapsed = fmtElapsed((t.endedAt ?? now) - t.startedAt)
      const head =
        t.status === 'starting'
          ? { glyph: '…', color: 'cyan', text: 'starting' }
          : t.status === 'running' || t.status === 'finishing'
            ? { glyph: glyphOf('running', mode), color: 'cyan', text: `${t.status} · ${elapsed}` }
            : t.status === 'done'
              ? { glyph: glyphOf('check', mode), color: 'green', text: `done in ${elapsed}` }
              : t.status === 'no-changes'
                ? { glyph: '○', color: 'yellow', text: 'no changes' }
                : t.status === 'failed'
                  ? { glyph: glyphOf('cross', mode), color: 'red', text: 'failed' }
                  : t.status === 'adopted'
                    ? { glyph: glyphOf('star', mode), color: 'magenta', text: 'adopted' }
                    : { glyph: glyphOf('minus', mode), color: 'gray', text: 'discarded' }
      const checks =
        t.checks === null ? null : { text: `checks ${t.checks}${t.isVerified ? ' (verified)' : ''}`, color: t.checks === 'pass' ? 'green' : t.checks === 'fail' ? 'red' : 'gray' }
      const files = (t.stat ?? '')
        .split('\n')
        .filter(l => l.trim() !== '')
        .slice(0, -1)
      const canAct = t.worktree !== null && !isLive(t) && t.status !== 'discarded'
      return (
        <Box key={`task-${t.id}`} flexDirection="column" marginTop={1} borderStyle="round" borderColor={head.color} paddingX={1}>
          <Text wrap="wrap">
            <Text color={head.color}>{head.glyph}</Text> <Text bold>{t.text}</Text> · <Text color={head.color}>{head.text}</Text>
            {checks !== null && <Text color={checks.color}> · {checks.text}</Text>}
            <Text dimColor> · ≈{fmtUsd(t.usd)}</Text>
          </Text>
          {t.branch !== null && (
            <Text dimColor wrap="wrap">
              branch {t.branch}
              {t.shortstat === null ? '' : ` · ${t.shortstat}`}
            </Text>
          )}
          {t.summary !== null && <Text wrap="wrap">{t.summary}</Text>}
          {files.slice(0, statLines).map((l, i) => (
            <Text key={`stat-${t.id}-${i}`} dimColor wrap="truncate-end">
              {l}
            </Text>
          ))}
          {files.length > statLines && <Text dimColor> … {files.length - statLines} more files</Text>}
          {t.note !== null && (
            <Text color={t.status === 'failed' ? 'red' : 'yellow'} wrap="wrap">
              {t.note}
            </Text>
          )}
          {canAct && (
            <Box gap={1}>
              {t.shortstat !== null && <Button key={`diff-${t.id}`} label={shown?.task === t.id ? 'Hide diff' : 'Diff'} onPress={() => void toggleDiff($, t.id)} />}
              {t.shortstat !== null && t.status === 'done' && <Button key={`adopt-${t.id}`} label="Adopt" variant="primary" onPress={() => void adopt($, t.id)} />}
              <Button key={`discard-${t.id}`} label="Discard" dimColor onPress={() => void discard($, t.id)} />
            </Box>
          )}
        </Box>
      )
    }

    return (
      <Box flexDirection="column">
        <Text bold>Night shift</Text>
        <Text dimColor wrap="wrap">
          Each task ran in its own worktree and branch; nothing is in your checkout until you press Adopt.
        </Text>
        {visible.map(card)}
        {shown !== null && (
          <Box flexDirection="column" marginTop={1}>
            <Box columnGap={1}>
              <Box flexShrink={1} flexGrow={1}>
                <Text bold wrap="wrap">
                  Diff of {tasks.find(t => t.id === shown.task)?.text ?? shown.task}
                </Text>
              </Box>
              <Button key="close-diff" label="Hide diff" dimColor onPress={() => update($, diffAtom, () => null)} />
            </Box>
            {shown.sections.map(section => (
              <Box key={`diff-${section.path}`} flexDirection="column" marginTop={1}>
                <Text color="cyan" wrap="truncate-end">
                  {section.kind === 'added' ? '+' : section.kind === 'deleted' ? glyphOf('minus', mode) : '~'} {section.path}
                  {section.note === null ? '' : `  (${section.note})`}
                </Text>
                {section.source !== null && <Code source={section.source} format="diff" path={section.path} />}
              </Box>
            ))}
            {shown.omitted > 0 && <Text dimColor>{shown.omitted} more files not shown: open the worktree to see them.</Text>}
          </Box>
        )}
        {closeRow}
      </Box>
    )
  })