bg-watch

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    isOpen = true
    const t = current()
    const now = await $.clock.now()

    // Desktop draws native controls and SVG; give it a layout of its own.
    if (e.surface === 'desktop') {
      const { Box, Text, Button, Select, Svg, Code } = $.ui.resolve(e)
      if (!t) {
        return (
          <Box flexDirection="column" padding={1} gap={1}>
            <Text bold>No background commands yet</Text>
            <Text dimColor>When Claude starts a long-running command, its output streams here.</Text>
          </Box>
        )
      }
      const recent = [...tasks.values()].reverse().slice(0, 8)
      const tail = (tails.get(t.id) ?? []).slice(-60).join('\n')
      return (
        <Box flexDirection="column" padding={1} gap={1}>
          <Box flexDirection="row" justifyContent="space-between" alignItems="center" gap={2}>
            <Select
              key="task"
              options={recent.map(x => ({ key: x.id, value: x.id, label: `${ICON[x.status]} ${x.label}` }))}
              value={t.id}
              onSelect={value => {
                selected = value
                sizes.delete(value)
                void tick($)
              }}
            />
            <Text color={COLOR[t.status]} bold>
              {t.status} · {elapsed((t.endedAt ?? now) - t.startedAt)}
              {t.exitCode ? ` · exit ${t.exitCode}` : ''}
            </Text>
          </Box>
          <Svg source={timelineSvg(recent, now)} alt="Timeline of background commands by status" />
          <Code source={`$ ${t.command}`} language="bash" wrap="wrap" />
          {tail ? (
            <Code source={tail} wrap="truncate-end" />
          ) : (
            <Text dimColor>{t.outputFile ? 'No output yet.' : 'Output file unknown until the command finishes.'}</Text>
          )}
          {selected ? (
            <Button
              key="follow"
              label="Follow latest"
              variant="secondary"
              onPress={() => {
                selected = null
                void tick($)
              }}
            />
          ) : null}
        </Box>
      )
    }

    const { Box, Text, Button } = $.ui.resolve(e)
    if (!t) {
      return (
        <Box flexDirection="column">
          <Text dimColor>No background commands yet.</Text>
          <Text dimColor>When Claude runs one, its output streams here.</Text>
        </Box>
      )
    }

    const recent = [...tasks.values()].reverse().slice(0, LIST_ROWS)
    const rows = Math.max(3, e.props.scroll.bodyRows - recent.length - 1)
    const lines = (tails.get(t.id) ?? []).slice(-rows)

    return (
      <Box flexDirection="column">
        {recent.map((x, i) => (
          <Box key={x.id} flexDirection="row">
            <Button
              key={`pick-${x.id}`}
              label={x.label}
              hotkey={String(i + 1)}
              plain
              dimColor={x.id !== t.id}
              onPress={() => {
                selected = x.id
                sizes.delete(x.id)
                void tick($)
              }}
            />
            <Text color={COLOR[x.status]} wrap="truncate-end">
              {'  '}
              {ICON[x.status]} {elapsed((x.endedAt ?? now) - x.startedAt)}
              {x.exitCode ? ` · exit ${x.exitCode}` : ''}
            </Text>
          </Box>
        ))}
        <Text color={COLOR[t.status]} wrap="truncate-end">
          {ICON[t.status]} {t.status} · $ {t.command.split('\n')[0] ?? ''}
        </Text>
        {lines.length === 0 ? (
          <Text dimColor>{t.outputFile ? 'No output yet.' : 'Output file unknown until the command finishes.'}</Text>
        ) : (
          lines.map((line, i) => (
            <Text key={`l${i}`} wrap="truncate-end">
              {line || ' '}
            </Text>
          ))
        )}
      </Box>
    )
  })