redline

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    // Drawn from what this process kept after a /clear; the host gets it back off the render.
    if (!(await read($, seeded))) $.clock.after(0, () => void reseed($).catch(() => {}))
    const { sessions: all, preview: previewing, isPaneOpen: isOpen, usage: heldUsage } = await read($, snapshot)
    if (hasFuel && isUnknown(latestUsage)) latestUsage = heldUsage
    if (e.props.hasSurvey || isOpen) {
      views = views.filter(v => v.requestId !== e.requestId)
      return next(e)
    }
    const shown = previewing ?? workingIn(all)
    const stage = stageFor(shown)
    const count = previewing === null ? tally(all) : 'preview · /redline live'

    if (e.surface !== 'terminal') {
      const { Text } = $.ui.resolve(e)
      return <Text color={hex(colorFor(shown))}>{`${stage.name} · ${count}`}</Text>
    }
    const { Box, Text, Raster } = $.ui.resolve(e)
    const withFuel = hasFuel && e.props.bodyColumns >= BAND_COLS + BAND_WORDS
    const view: View = { requestId: e.requestId, face: SMALL, fuel: withFuel ? true : undefined }
    mounted(view)
    return (
      <Box flexDirection="row">
        <Raster key="gauge" columns={withFuel ? BAND_COLS : SMALL.cols} rows={SMALL.rows} cells={cells(view)} />
        <Box flexDirection="column" paddingX={1}>
          <Text bold color={hex(colorFor(shown))}>{stage.name}</Text>
          {e.props.bodyColumns >= (withFuel ? BAND_COLS : SMALL.cols) + 30 && <Text dimColor wrap="truncate">{stage.line}</Text>}
          <Text dimColor wrap="truncate">{count}</Text>
        </Box>
      </Box>
    )
  })

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    if (!(await read($, seeded))) $.clock.after(0, () => void reseed($).catch(() => {}))
    const { sessions: all, preview: previewing, usage: heldUsage } = await read($, snapshot)
    if (hasFuel && isUnknown(latestUsage)) latestUsage = heldUsage
    const shown = previewing ?? workingIn(all)
    const stage = stageFor(shown)
    const { Box, Text } = $.ui.resolve(e)
    const list = (
      <Box flexDirection="column" paddingX={1}>
        {all.length === 0 && <Text dimColor>No Claude sessions in terminals.</Text>}
        {all.map(s => (
          <Text wrap="truncate" dimColor={!s.isWorking}>
            {`${s.isWorking ? '●' : '○'} ${s.tty.padEnd(8)} ${folder(s.cwd)}${s.pid === self ? '  (this one)' : ''}`}
          </Text>
        ))}
      </Box>
    )
    const words = (
      <Box flexDirection="column" paddingX={1}>
        <Text bold color={hex(colorFor(shown))}>{previewing === null ? stage.name : `${stage.name} (preview)`}</Text>
        <Text dimColor wrap="wrap">{stage.line}</Text>
        <Text dimColor>{tally(all)}</Text>
      </Box>
    )
    if (e.surface !== 'terminal') {
      return <Box flexDirection="column">{words}{list}</Box>
    }
    const { Raster } = $.ui.resolve(e)
    // A narrow pane stacks the dials, as many to a row as fit; a resize renders again and remounts.
    const fuel = hasFuel && e.props.bodyColumns >= BIG.cols ? paneLayout(e.props.bodyColumns) : undefined
    const view: View = { requestId: e.requestId, face: LARGE, fuel }
    mounted(view)
    const rasterCols = fuel?.cols ?? LARGE.cols
    return (
      <Box flexDirection="column" paddingTop={1}>
        <Box flexDirection={e.props.bodyColumns >= rasterCols + 24 ? 'row' : 'column'}>
          <Raster key="gauge" columns={rasterCols} rows={fuel?.rows ?? LARGE.rows} cells={cells(view)} />
          {words}
        </Box>
        <Text> </Text>
        {list}
      </Box>
    )
  })