workflow-conductor

  on('ui.render', { component: 'Pane', requestId: PROJECT_PANE_ID }, async ($, e) => {
    const els = $.ui.resolve(e)
    const { Box, Text, Button } = els
    const Input = 'Input' in els ? els.Input : null
    // The terminal draws no picture (its table's `Svg` is a fragment: nothing): there the header's persona is blocks of a font, elsewhere one picture.
    const Svg = e.surface !== 'terminal' && 'Svg' in els ? els.Svg : null
    const ui = await read($, uiAtom)
    const project = await read($, projectAtom)
    const file = `${PROJECT_DIR}/${ui.name}.json`
    const bodyColumns = e.props.bodyColumns || 80
    const columns = Math.max(20, bodyColumns - 2)
    const headColumns = columns - SMALL_W
    const run = await read($, runAtom)
    const runProject = await read($, runProjectAtom)
    const over = overlaysProject(run, runProject, ui)
    const locked = (over && run.status === 'running') || ui.drafting === 'show'
    // The tick clock is read only while it matters, so an idle pane is not redrawn by it.
    const clock = locked ? await read($, clockAtom) : 0
    const overlay = over ? runOverlay(run, clock) : undefined
    const asked = await read($, personaAtom)
    const draftBeats = (ui.drafting ?? null) !== null ? await read($, draftBeatAtom) : 0
    const pose: Pose = ui.drafting === 'show' ? draftPose(draftBeats) : asked !== 'idle' ? asked : ((over ? runPose(run.status, clock) : null) ?? 'idle')
    const splashed = await read($, splashedAtom)
    // Whether the pane holds the keyboard: Escape hands it to the prompt, and a field left open then is closed to the eye.
    const focused = e.props.isFocused !== false
    const bodyRows = e.props.scroll?.bodyRows ?? e.viewport?.rows ?? 48
    // A pane with no room for the screen draws none of it: the designer goes into the band, which says why.
    const shell = await read($, shellAtom)
    if (!fitsFull(bodyColumns, bodyRows)) {
      if (!minimizing) minimize($, 'auto', whyCompact({ dock: e.props.placement !== 'inline', bodyColumns, bodyRows, fullscreen: e.viewport?.isFullscreen === true }))

      return <Text color={FADED}>{`${GLYPH.diamond} ${PROJECT_PANE_TITLE}: no room here for the designer, it goes to the band above the prompt`}</Text>
    }
    // Drawn in its pane again: the band has nothing to show. Asked of the engine, not taken from this drawing: one
    // that was on its way when the pane closed is of a pane that is gone. Written from a clock callback: a drawing changes no state.
    if (shell.minimized !== 'no' && !minimizing && (await $.ui.panes()).some(pane => pane.id === PROJECT_PANE_ID && pane.isPlaced)) {
      $.clock.after(0, () => void update($, shellAtom, held => (minimizing ? held : initialShell())))
    }
    const node = project === null || ui.selectedId === null ? undefined : findNode(project, ui.selectedId)
    const problems = project ? lint(project) : []
    const starting = ui.status === 'pick' || (ui.status === 'ready' && !project)
    const entries = starting ? startEntries(ui.saved ?? []) : []
    const mark = Math.max(0, Math.min(entries.length - 1, ui.startMark ?? 0))
    const marked = entries[mark]

    // Every part is cut to its room, so the row never wraps.
    const drafting = ui.drafting === 'show' && project !== null
    const listing = starting && (ui.back ?? null) !== null
    const summary = over ? runSummary(run, elapsedOf(await read($, timesAtom), run), Math.max(8, headColumns - COMMAND.length - 3 - 10 - 3)) : null
    const begins = listing ? 'PROJECTS' : 'START'
    const state: { text: string; color: 'claude' | 'success' | 'error' | typeof FADED } =
      summary !== null
        ? { text: summary.text.replace(/^[a-z]+/, word => word.toUpperCase()), color: summary.color }
        : drafting
          ? { text: 'DRAFTING', color: 'claude' }
          : starting && marked
            ? { text: `${begins} · ${marked.kind === 'saved' ? 'saved project' : marked.kind === 'blank' ? 'blank project' : marked.kind === 'replay' ? `replay over the ${marked.title} template` : marked.kind === 'recording' ? 'recorded run' : marked.kind === 'reset' ? 'stored answers' : `from the ${marked.title} template`}`, color: FADED }
            : ui.status !== 'ready' || !project
              ? { text: 'project', color: FADED }
              : { text: `EDITING · ${!isSaved(ui.name) ? 'replay, not saved' : !ui.unsaved ? 'saved' : isBlank(project) ? 'not saved yet' : 'unsaved template'}`, color: FADED }
    const shownName = oneLine(starting && marked?.kind === 'saved' ? marked.id : ui.name)
    const pressable = listing || !starting
    const nameMark = !pressable ? '' : listing ? ' ▴' : ' ▾'
    const legendRow = (row: readonly LegendItem[]) => (
      <Text wrap="truncate-end">
        {row.flatMap((item, index) => [
          <Text color={focused ? 'claude' : FADED}>{`${index > 0 ? ' '.repeat(LEGEND_GAP) : ''}[${item.keys}]`}</Text>,
          <Text color={FADED}>{` ${item.word}`}</Text>,
        ])}
      </Text>
    )
    // Minimize is a button, so a click minimizes while the keys are in the prompt.
    const headLegend = (row: readonly LegendItem[]) =>
      row.flatMap((item, index) => {
        const label = (
          <Text>
            <Text color={focused || item.keys === MINIMIZE_KEYS ? 'claude' : FADED}>{`[${item.keys}]`}</Text>
            <Text color={item.keys === MINIMIZE_KEYS ? TEXT : FADED}>{` ${item.word}`}</Text>
          </Text>
        )
        return [
          ...(index > 0 ? [<Box width={LEGEND_GAP} flexShrink={0} />] : []),
          <Box flexShrink={0}>
            {item.keys === MINIMIZE_KEYS ? (
              <Button key={MINIMIZE_BUTTON} plain onPress={() => minimize($, 'person')}>
                {label}
              </Button>
            ) : (
              label
            )}
          </Box>,
        ]
      })
    // Short of room the state goes first; the name keeps eight cells at the least.
    const headOf = (keys: readonly LegendItem[] = []) => {
      const room = headColumns - COMMAND.length - 3 - nameMark.length
      const said = room - cellWidth(state.text) - 3 >= 8 ? state : null
      const left = room - (said === null ? 0 : cellWidth(said.text) + 3)
      const name = <Text bold color={TEXT}>{clip(shownName, Math.max(8, left))}</Text>
      return [
        <Box flexDirection="row" height={1} flexShrink={0}>
          <Text bold color="claude">{COMMAND}</Text>
          <Text color={FADED}>{' / '}</Text>
          {pressable ? (
            <Button key={NAME_BUTTON} plain onPress={() => queueKeys($, ['p'])}>
              {name}
              <Text color={focused ? 'claude' : FADED}>{nameMark}</Text>
            </Button>
          ) : (
            name
          )}
          {said !== null && <Text color={FADED}>{' / '}</Text>}
          {said !== null && <Text key="project-state" color={said.color}>{said.text}</Text>}
        </Box>,
        <Box key="project-legend" flexDirection="row" height={1} flexShrink={0}>
          {keys.length > 0 ? headLegend(legendRows(keys, headColumns, 1)[0] ?? []) : <Text color={TEXT}> </Text>}
        </Box>,
      ]
    }

    if (ui.status === 'closed' && ui.drafting !== 'wait') {
      return (
        <Box flexDirection="column">
          <Text bold color={TEXT}>{`${GLYPH.diamond} ${PROJECT_PANE_TITLE}`}</Text>
          <Text color={FADED}>{`${GLYPH.railEnd} /${COMMAND} opens the start screen`}</Text>
        </Box>
      )
    }

    /** `wide`: it indents itself (an open field's Input needs the pane's full width). `keep`: its last row stays in view when the rows do not hold all. */
    type Item = { rows: number; el: RenderChildren; wide?: true; keep?: true }
    type Tint = typeof FADED | 'error' | 'warning' | 'suggestion'
    const blank: Item = { rows: 1, el: <Text color={TEXT}> </Text> }
    const spanRows = (rows: readonly (readonly PersonaSpan[])[]) =>
      rows.map(row => (
        <Box flexDirection="row" height={1} flexShrink={0}>
          {row.map(span => (
            <Text color={span.color ?? TEXT} backgroundColor={span.ground}>{span.text}</Text>
          ))}
        </Box>
      ))
    const rowsOf = (items: readonly Item[]): number => items.reduce((sum, item) => sum + item.rows, 0)
    const cap = (text: string): string => text.charAt(0).toUpperCase() + text.slice(1)
    const line = (text: string, color?: Tint, bold?: true): Item => ({ rows: 1, el: <Text color={color ?? TEXT} bold={bold} wrap="truncate-end">{text}</Text> })
    const lines = (rows: readonly string[], color?: Tint): Item[] => rows.map(row => line(row, color))
    // A label is quiet: `claude` is kept for what can be pressed and for the selection.
    const label = (text: string): Item => line(text, 'suggestion')
    const fit = (levels: number, rows: number, plan: (level: number) => Item[]): Item[] => {
      for (let level = 0; level < levels - 1; level++) {
        const items = plan(level)
        if (rowsOf(items) <= rows) return items
      }
      return plan(levels - 1)
    }
    const rule = () => <Text color={RULE}>{'─'.repeat(columns)}</Text>
    // One row always, blank where there is none to press, so the pane keeps its shape.
    const actionsOf = (actions: readonly LegendAction[]) => (
      <Box key="project-actions" flexDirection="row" justifyContent="center" height={1} flexShrink={0}>
        {actions.length === 0 && <Text color={TEXT}> </Text>}
        {actions.flatMap((action, index) => {

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    const shell = await read($, shellAtom)
    if (shell.minimized === 'no' || e.props.hasSurvey) return next(e)
    const els = $.ui.resolve(e)
    if (!('Button' in els)) return next(e)
    const { Box, Text, Button } = els
    // The pane is on screen (on its way out, or opened again): the designer is drawn there.
    if ((await $.ui.panes()).some(pane => pane.id === PROJECT_PANE_ID && pane.isPlaced)) return next(e)

    // Minimized for want of room, and the terminal now has it: the pane opens by itself, once per size.
    const size = `${e.viewport?.columns ?? 0}x${e.viewport?.rows ?? 0}`
    if (!wouldDock(e.viewport)) autoTried = ''
    else if (shell.minimized === 'auto' && autoTried !== size) {
      autoTried = size
      const columns = e.viewport?.columns
      $.clock.after(0, () => void expand($, false, columns).catch(() => undefined))
    }

    const now = Date.now()
    if (now - bandListing.at > LISTING_MS) {
      const dir = `${(await $.session.root()).replace(/\/+$/, '')}/${PROJECT_DIR}`
      const entries = await $.fs.list(dir).catch(() => [])
      bandListing = {
        at: now,
        names: entries
          .filter(entry => entry.kind === 'file' && entry.name.endsWith('.json'))
          .map(entry => entry.name.slice(0, -'.json'.length))
          // Only what can be opened, which is also what can be shown as it is: a project's name.
          .filter(name => isSaved(name) && isProjectName(name))
          .sort(),
      }
    }

    const ui = await read($, uiAtom)
    const project = ui.status === 'ready' ? await read($, projectAtom) : null
    const run = await read($, runAtom)
    // A run in progress is shown whatever project is open; one that is over, on its own project until its results are put away.
    const runProject = run.status === 'idle' ? null : await read($, runProjectAtom)
    const tracked = run.status === 'running' || (run.status !== 'idle' && project !== null && runProject === ui.name && !ui.runCleared)
    // The tick clock is read only while a run is on, so a band at rest is not redrawn by it.
    const clock = run.status === 'running' ? await read($, clockAtom) : 0
    const asked = await read($, personaAtom)
    const pose: Pose = asked !== 'idle' ? asked : ((tracked ? runPose(run.status, clock) : null) ?? 'idle')
    const columns = e.props.bodyColumns
    // The border and its padding take their cells from every row.
    const room = Math.max(8, columns - SMALL_W - (e.props.maxRows >= BORDER_ROWS ? BORDER_CELLS : 0))
    const agents = Object.values(run.agents)
    const settled = agents.filter(agent => agent.status !== 'running').length
    const summary = tracked ? runSummary(run, elapsedOf(await read($, timesAtom), run), Math.max(8, room - COMPACT_BAR_W - 2)) : null
    const runName = runProject !== null && runProject !== ui.name ? `${runProject}: ` : ''
    const view = compactView({
      columns,
      rows: e.props.maxRows,
      shell,
      name: project === null ? null : ui.name,
      goal: project === null ? '' : oneLine(goalOf(project)),
      run: summary === null ? null : { bar: bar(settled, agents.length, COMPACT_BAR_W), text: `${runName}${summary.text.replace(/^[a-z]+/, word => word.toUpperCase())}`, color: summary.color },
      saved: bandListing.names,
    })

    const terminal = e.viewport?.columns
    const expandButton = (
      <Box flexDirection="row" flexShrink={0}>
        <Button key={EXPAND_ELEMENT} plain onPress={() => press($, () => expand($, true, terminal))}>
          <Text>
            <Text color="claude">{`[${EXPAND_HOTKEY}]`}</Text>
            <Text color={TEXT}>{` ${EXPAND_WORD}`}</Text>
          </Text>
        </Button>
        {/* The key itself: a Button with a hotkey writes it before its label (`m: `), so this one is in the tree and not drawn. */}
        <Box key="conductor-expand-key" display="none">
          <Button key={`${EXPAND_ELEMENT}:key`} hotkey={EXPAND_HOTKEY} onPress={() => press($, () => expand($, true, terminal))}>
            {EXPAND_WORD}
          </Button>
        </Box>
      </Box>
    )
    const statusRow = (width: number) => (
      <Text wrap="truncate-end">
        {view.status.bar !== null && <Text color={view.status.color ?? TEXT}>{`${view.status.bar} `}</Text>}
        <Text color={view.status.color ?? FADED}>{clip(view.status.text, Math.max(4, width - (view.status.bar === null ? 0 : COMPACT_BAR_W + 1)))}</Text>
      </Text>
    )

    if (view.oneLine) {
      const lead = `${GLYPH.diamond} ${COMMAND} / ${view.name}`
      return (
        <Box flexDirection="row" height={1}>
          <Text bold color="claude">{`${clip(lead, Math.max(8, Math.floor(columns / 3)))}  `}</Text>
          <Box flexGrow={1} flexShrink={1}>{statusRow(columns - lead.length - EXPAND_W - 4)}</Box>
          <Box flexShrink={0}>{expandButton}</Box>
        </Box>
      )
    }

    const stateW = view.state.length
    const nameW = Math.max(8, room - COMMAND.length - 3 - stateW - 2)
    const rows = view.taken - (view.bordered ? 2 : 0)
    const body = (
      <Box flexDirection="row" height={rows}>
        <Box key="conductor-persona" flexDirection="column" width={SMALL_W} flexShrink={0}>
          {smallPersona(pose).map(row => (
            <Box flexDirection="row" height={1} flexShrink={0}>
              {row.map(span => (
                <Text color={span.color ?? TEXT} backgroundColor={span.ground}>{span.text}</Text>
              ))}
            </Box>
          ))}
        </Box>
        <Box flexDirection="column" width={room} flexShrink={0}>
          <Box flexDirection="row" justifyContent="space-between" height={1}>
            <Text wrap="truncate-end">
              <Text bold color="claude">{COMMAND}</Text>
              <Text color={FADED}>{' / '}</Text>
              <Text bold color={TEXT}>{clip(view.name, nameW)}</Text>
            </Text>
            <Box flexShrink={0}>
              <Text color={FADED}>{view.state}</Text>
            </Box>
          </Box>
          {view.list !== null && (
            <Box flexDirection="row" height={1}>
              <Text color="suggestion">{LIST_LABEL}</Text>
              {view.list.names.map(name => (
                <Box flexDirection="row" flexShrink={0}>
                  <Text>{' '.repeat(LIST_GAP)}</Text>
                  <Button key={`${BAND_PROJECT_PREFIX}${name}`} plain onPress={() => press($, () => showSaved($, name))}>
                    <Text color={name === view.list?.current ? 'claude' : TEXT} bold={name === view.list?.current ? true : undefined}>{name}</Text>
                  </Button>
                </Box>
              ))}
              {view.list.more > 0 && <Text color={FADED}>{`${' '.repeat(LIST_GAP)}+${view.list.more} more`}</Text>}
            </Box>
          )}
          <Box flexDirection="row" justifyContent="space-between" height={1}>
            <Box flexGrow={1} flexShrink={1}>{statusRow(room - EXPAND_W - 2)}</Box>
            <Box flexShrink={0}>{expandButton}</Box>
          </Box>
        </Box>
      </Box>
    )
    if (!view.bordered) return body
    return (
      <Box flexDirection="column" width={columns} borderStyle="round" borderColor={RULE} paddingX={1}>
        {body}
      </Box>
    )
  })