dca-factory-cockpit

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const now = await read($, cockpit)
    const { Text } = $.ui.resolve(e)
    if (!now) return <Text color={C.muted}>No factory in this project.</Text>
    return draw($, e, now)
  })

async function draw($: EngineInterface, e: RenderInput<'Pane'>, now: Cockpit) {
  const { Box, Text, Button, ...rest } = $.ui.resolve(e)
  // the site's paper for a light theme, its deep plates for a dark one — before anything is drawn
  const theme = (await $.config.list().catch(() => [])).find(row => row.key === 'theme')
  applyPalette(/light/i.test(String(theme?.value ?? '')))
  const ui = components({
    Box,
    Text,
    Button,
    Input: 'Input' in rest ? rest.Input : null,
    width: e.props.bodyColumns ?? e.viewport?.columns ?? 100,
  })
  const at = await $.clock.now()
  const current = await read($, tab)
  const open = await read($, detail)
  const job = await read($, worker)
  const rows = e.viewport?.rows ?? 40
  const status = now.status
  const isFocused = Boolean(e.props.isFocused)

  // The links every view shares — one way to open a story, a record, a file.
  const storyCell = (row: Row): Cell => ({ node: ui.marked(row.mark, `story-${row.story}`, row.story, () => void openStory($, row.story)) })
  const recordCell = (record: DecisionRecord, back: Detail | null): Cell => ({
    node: ui.link(`record-${record.id}`, record.id, () => void openFile($, `${now.root}/${record.path}`, record.id, back)),
  })
  // An unguarded epic's own act, beside its hint — the epic's name opens the epic, this writes its journey.
  const guardCell = (hint: FactoryStatus['journeys'][number]): Cell => ({
    node: ui.button(`guard-${hint.epic}`, 'add guard', () => send($, hint.action.skill || `/factory-backlog journey ${hint.epic}`), { byClaude: true }),
  })
  const ask = (key: string, label: string, placeholder: string, command: string) =>
    ui.ask(key, label, placeholder, value => send($, `${command} ${value}`.trim()), () => void $.prompt.fill({ text: `${command} ` }))
  const idWidth = Math.max(8, ...status.rows.map(row => row.story.length)) + 4
  const recordTable = (list: DecisionRecord[], back: Detail | null) =>
    ui.table(
      [COL.mark, { name: 'state', width: 9 }, COL.record, COL.asked, COL.what],
      list.map(record => [
        ui.mark(record.kind === 'acceptance' ? 'acceptance' : 'question'),
        { text: record.state, color: record.state === 'open' ? C.wait : C.muted },
        recordCell(record, back),
        { text: fmt.when(record.asked), color: C.muted },
        { text: record.text, color: C.muted },
      ]),
      'No record.',
    )

  const head = (
    <Box flexDirection="column">
      <Box borderStyle="round" borderColor={C.accent} paddingX={1}>
        <Box flexDirection="column" flexGrow={1}>
          <Box justifyContent="space-between">
            <Box gap={2}>
              {/* side by side, not nested: a Text inside a Text takes the outer colour */}
              <Box>
                <Text bold color={C.bright}>
                  domaincentric
                </Text>
                <Text bold color={C.accent}>
                  .dev
                </Text>
              </Box>
              <Text color={C.line}>│</Text>
              <Text bold color={C.accent}>
                FACTORY COCKPIT
              </Text>
            </Box>
            {ui.button('close', '✕ close', () => void $.ui.close({ id: PANE }), { hotkey: 'q' })}
          </Box>
          <Box gap={2} marginTop={1}>
            <Text bold color={C.accent}>
              PROJECT
            </Text>
            <Text bold color={C.bright}>
              {now.project}
            </Text>
            <Text color={C.muted}>
              {status.delivered} of {status.total} stories delivered
              {status.tokens > 0 ? ` · ${fmt.tokens(status.tokens)} tokens` : ''}
              {job.state === 'running' ? ' · worker ▶' : ''}
            </Text>
          </Box>
        </Box>
      </Box>
      <Box marginTop={1}>
        {ui.phases(
          [
            { key: 'tab-describe', label: 'Describe', hotkey: '0', isOpen: current === 'describe' && !open, onPress: () => void showTab($, 'describe') },
            { key: 'setup', label: '✦ setup', isOpen: false, onPress: () => send($, '/factory-setup') },
            { key: 'update', label: '✦ update', isOpen: false, onPress: () => send($, '/factory-update') },
          ],
          TABS.map(one => ({
            key: `tab-${one.id}`,
            label: one.label,
            hotkey: one.key,
            isOpen: one.id === current && !open,
            mark:
              one.id === 'decide' && status.waiting.length > 0
                ? { text: String(status.waiting.length), color: C.wait }
                : one.id === 'run' && (isRunning() || status.running.length > 0)
                  ? { text: '▶', color: C.accent }
                  : one.id === 'delivered' && status.delivered > 0
                    ? { text: String(status.delivered), color: C.done }
                    : undefined,
            onPress: () => void showTab($, one.id),
          })),
        )}
      </Box>
      {status.waiting.length > 0 && ui.banner(C.wait, status.waiting.map(wait => `${MARK_GLYPH[wait.mark] ?? '?'} ${wait.story} — ${wait.what}`))}
      <Box gap={1} marginTop={1}>
        <Text bold color={C.accent}>
          Next ›
        </Text>
        <Text color={C.text}>{status.next.text}</Text>
      </Box>
      {now.isBehind && (
        <Box gap={1}>
          <Text color={C.wait}>This project's pipeline is older than the cockpit reads — the description and discovery views stay empty.</Text>
          {ui.link('behind-update', '✦ update', () => send($, '/factory-update'))}
        </Box>
      )}
    </Box>
  )

  const page = (body: RenderElement | RenderElement[], hint: string) => (
    // the painted surface fills the pane: at least the rows the surface gave its body, the whole width
    <Box flexDirection="column" paddingX={1} paddingY={1} backgroundColor={C.bg} minHeight={e.props.scroll?.bodyRows ?? rows} width={e.props.bodyColumns ?? '100%'}>
      {head}
      <Box flexDirection="column" marginTop={1}>
        {body}
      </Box>
      {ui.keys(isFocused, hint)}
    </Box>
  )

  // ---- one process's output: what it read, edited and ran, a shared one's stages as headings
  if (open?.kind === 'output') {
    const lines = await read($, outputLines)
    return page(
      [
        <Box gap={1}>
          <Text bold color={C.bright}>
            {open.story} / {open.process}
          </Text>
        </Box>,
        ui.actions([
          ui.button('back', '← back', () => void (open.back?.kind === 'story' ? openStory($, open.back.id) : update($, detail, () => open.back)), { hotkey: 'b' }),
        ]),
        ui.framed(ui.log(lines.slice(-Math.max(10, rows - 12)), 'This process wrote nothing.')),
      ],
      'b back',
    )
  }

  // ---- a file: a description, a discovery report, a hand-over, a decision record
  if (open?.kind === 'file') {
    return page(
      [
        <Box gap={1}>
          <Text bold color={C.bright}>
            {open.title}
          </Text>

  const link = (key: string, label: string, onPress: () => void) => (
    <Box key={`link-${key}`} gap={0} hover={{ backgroundColor: C.line }}>
      <Button key={key} label={label} plain onPress={onPress} />
      <Text color={C.accent}> ›</Text>
    </Box>
  )

  const fields = (items: (Field | false | null | undefined | '' | 0)[], wanted = 1) => {
    const present = items.filter((item): item is Field => typeof item === 'object' && item !== null && Boolean(item.text))
    const perRow = Math.max(1, Math.min(wanted, pairsPerRow(width)))
    const rowsOf: Field[][] = []
    for (let index = 0; index < present.length; index += perRow) rowsOf.push(present.slice(index, index + perRow))
    return (
      <Box flexDirection="column" marginTop={1}>
        {rowsOf.map(pairs => (
          <Box gap={3}>
            {pairs.map(item => (
              <Box gap={1} width={perRow > 1 ? PAIR : undefined} flexShrink={perRow > 1 ? 0 : 1}>
                <Box width={10} flexShrink={0}>
                  <Text bold color={C.accent}>
                    {item.label.toUpperCase()}
                  </Text>
                </Box>
                <Text color={item.color ?? C.text} bold={item.bold} wrap="truncate">
                  {item.text}
                </Text>
              </Box>
            ))}
          </Box>
        ))}
      </Box>
    )
  }