flow-scenes

  on('ui.render', { component: 'Pane', requestId: PICKER }, ($, e) => {
    const { Box, Text, Button } = $.ui.resolve(e)
    // A redraw asked for as it closed (a pick redraws everything): it's going, so nothing more starts.
    if (pick.closed) return <Text dimColor>{SCENES.map(d => d.name).join(' · ')}</Text>
    // Drawn: opened by /flow pick, or still up across a reload (a pane outlives one). Its thumbnails run while it's open.
    pick.open = true
    if (e.surface === 'terminal') pick.docked = e.props.placement === 'dock'
    startPicker()
    // The scene this session shows: its own over the defaults.
    const current = cfg.style
    const columns = bodyColumns(e.props.bodyColumns)
    const rows = bodyRows(e.props.scroll.bodyRows, 1)
    // (Desktop draws a close Button under the grid: a row more.)
    const layout = e.surface === 'terminal' || e.surface === 'desktop' ? pickLayout(columns, rows, SCENES.length, undefined, e.surface === 'desktop' ? 1 : 0) : undefined
    // Each scene's picture: a Raster in the terminal (blitted by the picker's timer), an Svg on desktop (drawn anew).
    let picture: (name: SceneName) => RenderElement | null = () => null
    if (layout && e.surface === 'terminal') {
      pick.term.night = driver.isNight()
      pick.term.ensure(layout.columns, layout.rows)
      pick.mounted = true
      pick.pausedUntil = 0
      const { Raster } = $.ui.resolve(e)
      picture = name => <Raster key={thumbKey(name)} columns={layout.columns} rows={layout.rows} cells={pick.term.frame(name)} />
    } else if (layout && e.surface === 'desktop') {
      pick.desk.night = driver.isNight()
      pick.desk.ensure(layout.columns, layout.rows)
      pick.deskAt = pick.steps
      const { Svg } = $.ui.resolve(e)
      // (Each thumbnail drawn and encoded once a step: a render asked for by anything else reuses it.)
      const key = `${layout.columns}x${layout.rows}@${pick.deskSteps}:${pick.desk.night}`
      picture = name => {
        let kept = pick.svgs.get(name)
        if (kept?.key !== key) {
          const grid = pick.desk.grid(name)
          if (!grid) return null
          pick.svgs.set(name, (kept = { key, source: frameSvg(grid) }))
        }
        return <Svg source={kept.source} alt={`flow: ${name}`} width={layout.columns * DESKTOP_CELL_W} height={layout.rows * DESKTOP_CELL_H} />
      }
    } else if (e.surface === 'terminal') pick.mounted = false

    // Each scene's Button: what the focus ring walks, Enter (or a click, or its number) picks. The ring starts on the scene on show.
    const button = (name: SceneName, i: number) => {
      const hotkey = hotkeyFor(i)
      return (
        <Button
          key={pickKey(name)}
          label={pickLabel(name, name === current)}
          plain
          {...(hotkey ? { hotkey } : {})}
          {...(name === current ? { autoFocus: true as const } : {})}
          onPress={() => void pickScene($, name, sceneCtx)}
        />
      )
    }
    const hint = <Text dimColor wrap="truncate-end">{pickHint(e.surface === 'terminal')}</Text>
    // Esc closes it in the terminal; a desktop draws its own close control for this.
    const close = e.surface !== 'terminal' && <Button key="close" role="dismiss" label="Close" onPress={() => void closePickerPane($, sceneCtx)} />

    if (!layout) {
      // A plain list: too narrow for thumbnails (a spine-width dock), or a surface that draws none.
      return (
        <Box flexDirection="column">
          {hint}
          {SCENES.map((d, i) => (
            <Box flexDirection="row" gap={1}>
              {button(d.name, i)}
              <Text dimColor wrap="truncate-end">
                {d.blurb}
              </Text>
            </Box>
          ))}
          {close}
        </Box>
      )
    }

    // The grid: rows of tiles, each its thumbnail over its Button, the focused one's frame lit (and any under the pointer).
    const tile = (name: SceneName, i: number) => {
      const lit = name === pick.selected
      const frame = layout.framed
        ? { borderStyle: lit ? 'bold' : 'round', borderColor: lit ? 'claude' : 'subtle', hover: { borderColor: 'claude' } }
        : {}
      return (
        <Box key={tileKey(name)} flexDirection="column" width={layout.columns + (layout.framed ? 2 : 0)} {...frame}>
          {picture(name)}
          {button(name, i)}
        </Box>
      )
    }
    const grid: RenderElement[] = []
    for (let at = 0; at < SCENES.length; at += layout.across) {
      grid.push(
        <Box flexDirection="row" columnGap={1}>
          {SCENES.slice(at, at + layout.across).map((d, k) => tile(d.name, at + k))}
        </Box>,
      )
    }
    return (
      <Box flexDirection="column">
        {layout.lines && hint}
        {grid}
        {layout.lines && <Text wrap="truncate-end">{pickBlurb(pick.selected, current)}</Text>}
        {close}
      </Box>
    )
  })

  on('ui.render', { component: 'AbovePrompt' }, ($, e, next) => {
    const rows = Math.min(MAX_ROWS, e.props.maxRows - 1)
    const hidden = cfg.layout === 'spine' || e.props.hasSurvey || !driver.isShown() || rows < 2
    if (e.surface === 'desktop') {
      // No Raster here: the frame is one Svg, redrawn by the frame loop.
      if (hidden) {
        desktopSites.delete(e.requestId)
        return next(e)
      }
      return desktopView($.ui.resolve(e), e.requestId, bodyColumns(e.props.bodyColumns), rows)
    }
    // Raster is terminal-only; any other surface's band never touches ours.
    if (e.surface !== 'terminal') return next(e)
    if (hidden) {
      if (mounted?.requestId === e.requestId) mounted = null
      return next(e)
    }
    const columns = bodyColumns(e.props.bodyColumns)
    mounted = { requestId: e.requestId, columns, rows }
    const scene = driver.dial()
    scene.ensure(columns, rows)
    lastCells = scene.frame()

    // The engine keeps one blank spacer row between the band and the prompt;
    // it is outside the band, so the scene's base sits one row above the input.
    const { Raster } = $.ui.resolve(e)
    return <Raster key={KEY} columns={columns} rows={rows} cells={lastCells} />
  })

  const desktopView = (els: Pick<Elements['desktop'], 'Box' | 'Svg' | 'Text'>, requestId: string, columns: number, rows: number) => {
    const { Box, Svg } = els
    const { svg, marks, dials } = desktopSvg(requestId, columns, rows)
    if (!marks) return <Svg {...svg} />
    return (
      <Box>
        <Svg {...svg} />
        {agentCards(els, marks, dials, columns, rows)}
      </Box>
    )
  }

function agentCards(
  els: { Box: ElementConstructor<BoxProps>; Text: ElementConstructor<TextProps> },
  marks: readonly AgentMark[],
  dials: readonly AgentDial[],
  columns: number,
  rows: number,
) {
  const { Box, Text } = els
  const tall = rows > 8
  return marks.flatMap(m => {
    const d = dials.find(a => a.id === m.id)
    if (!d) return []
    const line = agentLine(d)
    const width = Math.max(1, Math.min(columns, line.length + 2))
    const lines = tall ? Math.min(4, Math.ceil(line.length / Math.max(1, width - 2))) : 1
    const left = Math.max(0, Math.min(columns - width, m.col - 1))
    const top = tall
      ? m.row >= lines + 1 ? m.row - lines - 1 : Math.min(rows - lines, m.row + m.h)
      : m.row >= 2 ? 0 : rows - 1
    return [
      <Box key={`agent:${m.id}`} position="absolute" top={m.row} left={m.col} width={m.w} height={m.h}>
        <Box
          position="absolute"
          top={top - m.row}
          left={left - m.col}
          width={width}
          paddingX={1}
          backgroundColor={CARD_BG}
          display="none"
          hover={{ display: 'flex' }}
        >
          <Text color={CARD_FG} wrap={tall ? 'wrap' : 'truncate'}>
            {line}
          </Text>
        </Box>
      </Box>,
    ]
  })
}