mission-control

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    if (e.props.hasSurvey) return next(e)
    // Each reading redraws the band: the context under the crew stays current,
    // a long wait turns into a nap and a hover's figures stay fresh.
    const [isHidden, members, current, history, now] = await Promise.all([read($, isBandHidden), read($, crew), read($, reading), read($, turns), $.clock.now()])
    if (isHidden) return next(e)

    const table = $.ui.resolve(e)
    const kit: Kit = { surface: e.surface, Box: table.Box, Text: table.Text, Button: table.Button }
    const Client = 'Client' in table ? table.Client : undefined
    const where: Where | null = e.surface === 'desktop' || e.surface === 'terminal' ? e.surface : null
    const { Box } = kit
    const shown = contextOf(fillOf(current, history), current)

    return Band(
      kit,
      {
        strip:
          Client === undefined || where === null ? null : (
            <Box flexGrow={1} flexShrink={1} minWidth={where === 'desktop' ? STRIP_MAIN_CH : 11}>
              <Client key="strip" module="./clawd.tsx" width="100%" height={where === 'desktop' ? STRIP_LH : 3} props={stripOf(members, now, where)} />
            </Box>
          ),
        context: shown.used === null ? null : shown,
        width: e.props.bodyColumns,
        rows: e.props.maxRows,
      },
      { open: () => void openPane($) },
    )
  })

export function Band(kit: Kit, view: BandView, act: BandActions): RenderElement {
  const { Box, Button } = kit
  const crew = (
    <Box flexDirection="row" alignItems="center" width="100%" columnGap={2}>
      {view.strip ?? <Box flexGrow={1} />}
      <Box flexShrink={0}>
        {isTerminal(kit) ? (
          <Button key="open" label="Mission control" hotkey="m" onPress={act.open} />
        ) : (
          <Button key="open" plain label="Mission control" onPress={act.open} />
        )}
      </Box>
    </Box>
  )
  const ctx = view.context
  if (ctx === null) return crew
  if (isTerminal(kit)) {
    // Rows are dear here: the bar is the floor the crew stands on, and the
    // figures and what fills it share the row under it. Short of rows, the
    // legend goes first, then the figures, so the band never scrolls.
    const room = view.rows - CREW_ROWS
    const hasBar = ctx.parts.length > 0 && room >= 1
    const lines = room - (hasBar ? 1 : 0)
    const words = lines >= textRows(ctx, view.width) ? [contextLine(kit, ctx), ...legendOf(kit, ctx.parts)] : lines >= 1 ? [contextLine(kit, ctx)] : []
    return (
      <Box flexDirection="column" width="100%">
        {crew}
        {hasBar ? contextBar(kit, ctx.parts, view.width) : null}
        {words.length === 0 ? null : (
          <Box flexDirection="row" flexWrap="wrap" columnGap={2}>
            {words}
          </Box>
        )}
      </Box>
    )
  }
  return (
    <Box flexDirection="column" width="100%" rowGap={0.5}>
      {crew}
      {contextBlock(kit, ctx, view.width)}
    </Box>
  )
}

function contextBar(kit: Kit, parts: ContextView['parts'], width: number): RenderElement {
  const { Box, Text } = kit
  if (isTerminal(kit)) {
    return (
      <Text wrap="truncate">
        {cellsOf(
          parts.map(part => part.share),
          Math.max(10, width),
        ).map((cells, i) => {
          const part = parts[i]
          return part === undefined || cells === 0 ? null : <Text color={part.color}>{GLYPH[part.kind].repeat(cells)}</Text>
        })}
      </Text>
    )
  }
  return (
    <Box flexDirection="row" width="100%" height={0.4} overflow="hidden" flexShrink={0}>
      {cellsOf(
        parts.map(part => part.share),
        100,
      ).map((whole, i) => {
        const part = parts[i]
        return part === undefined || whole === 0 ? null : <Box width={percent(whole)} height={0.4} flexShrink={1} backgroundColor={part.color} />
      })}
    </Box>
  )
}

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const [members, pinned, current, history, taken, isHidden, now] = await Promise.all([
      read($, crew),
      read($, selected),
      read($, reading),
      read($, turns),
      read($, samples),
      read($, isBandHidden),
      $.clock.now(),
    ])
    const table = $.ui.resolve(e)
    const kit: Kit = { surface: e.surface, Box: table.Box, Text: table.Text, Button: table.Button }
    const Client = 'Client' in table ? table.Client : undefined
    const where: Where | null = e.surface === 'desktop' || e.surface === 'terminal' ? e.surface : null
    const width = Math.max(30, e.props.bodyColumns)
    const fill = fillOf(current, history)
    const focus = focusOf(members, pinned)
    const isBig = where === 'desktop' || width >= 44

    const stageProps: StageProps | null =
      where === null
        ? null
        : {
            view: 'stage',
            surface: where,
            big: isBig,
            actors: lineUp(members, now, true).map(one => actorOf(one, now)),
            selected: focus.member?.id ?? null,
            hint: hintOf(members),
          }

    const crewRows: CrewRow[] = lineUp(members, now, false)
      .slice(0, 10)
      .map(one => ({
        id: one.id,
        name: one.id === MAIN ? 'Claude' : labelOf(one),
        color: one.color,
        caption: captionFor(one, now),
        elapsed: span((one.endedAt ?? now) - one.startedAt),
        isEnded: ENDED.includes(one.mood),
        isPicked: one.id === focus.member?.id,
      }))

    return Pane(
      kit,
      {
        headline: headlineOf(members, now),
        stage:
          Client === undefined || stageProps === null ? null : (
            <Client key="stage" module="./clawd.tsx" width="100%" height={where === 'desktop' ? 7.5 : isBig ? 10 : 7} props={stageProps} />
          ),
        spotlight: focus.member === null ? null : spotlightOf(focus.member, now, focus.isPinned),
        crew: crewRows,
        context: contextOf(fill, current),
        spend: spendLine(current, taken, now),
        paces: (current?.limits ?? []).map(one => paceOf(one, taken, now)),
        isBandHidden: isHidden,
        width,
      },
      {
        close: () => void $.ui.close({ id: PANE }),
        pick: id => void pick($, id),
        follow: () => void update($, selected, () => null),
        toggleBand: () => void update($, isBandHidden, value => !value),
      },
    )
  })

export function Pane(kit: Kit, view: PaneView, act: PaneActions): RenderElement {
  const { Box, Text, Button } = kit
  const ctx = view.context
  const barWidth = isTerminal(kit) ? 12 : 14

  return (
    <Box flexDirection="column" width="100%" rowGap={breath(kit, 2)}>
      <Box flexDirection="row" alignItems="center" columnGap={1}>
        <Text color="inactive" wrap="truncate-end">
          {view.headline}
        </Text>
        <Box flexGrow={1} />
        {isTerminal(kit) ? <Button key="close" label="Close" hotkey="q" onPress={act.close} /> : null}
      </Box>

      {view.stage}

      {view.spotlight === null ? null : spotlightCard(kit, view.spotlight, act)}

      {view.crew.length > 1 ? crewList(kit, view.crew, act) : null}

      {section(kit, 'Context', contextBlock(kit, ctx, view.width - 4))}

      {section(kit, 'Budget', [
        <Text wrap="truncate-end">
          {view.spend === null ? <Text color="subtle">No spend recorded yet</Text> : <Text bold>{view.spend}</Text>}
          {view.spend === null ? null : <Text color="subtle"> this session</Text>}
        </Text>,
        ...view.paces.map(pace => (
          <Box flexDirection="row" alignItems="center" columnGap={1}>
            <Box width={isTerminal(kit) ? 7 : 9} flexShrink={0}>
              <Text color="inactive" wrap="truncate-end">
                {pace.label}
              </Text>
            </Box>
            {paceBar(kit, pace, barWidth)}
            <Box width={5} flexShrink={0} justifyContent="flex-end">
              <Text bold>{`${Math.round(pace.percent)}%`}</Text>
            </Box>
            <Text color={INK[pace.tone]} wrap="truncate-end">
              {pace.verdict}
            </Text>
          </Box>
        )),
      ])}

      <Box flexDirection="row">
        <Button key="band" plain label={view.isBandHidden ? 'Show the band above the prompt' : 'Hide the band above the prompt'} onPress={act.toggleBand} />
      </Box>
    </Box>
  )
}

function spotlightCard(kit: Kit, spot: Spotlight, act: PaneActions): RenderElement {
  const { Box, Text, Button } = kit
  return (
    <Box flexDirection="column" rowGap={breath(kit, 0.5)} {...card(kit, spot.color)}>
      <Box flexDirection="row" alignItems="center" columnGap={1}>
        <Text color={spot.color}>●</Text>
        <Text bold wrap="truncate-end">
          {spot.name}
        </Text>
        <Box flexGrow={1} />
        <Text color={INK[spot.tone]}>{spot.status}</Text>
        <Text color="subtle">{spot.elapsed}</Text>
      </Box>
      {spot.task === null ? null : (
        <Text color="inactive" wrap="truncate-end">
          {spot.task}
        </Text>
      )}
      {spot.doing === null ? null : (
        <Text wrap="truncate-end">
          <Text color="permission">{spot.doing.verb}</Text>
          {spot.doing.detail === null ? '' : ` ${spot.doing.detail}`}
        </Text>
      )}
      <Text color="subtle" wrap="truncate-end">
        {spot.facts}
      </Text>
      {spot.recent.length === 0 ? null : (
        <Box flexDirection="column" marginTop={breath(kit, 0.5)}>
          {spot.recent.map(one => (
            <Box flexDirection="row" columnGap={1}>
              <Text wrap="truncate-end">
                <Text color="inactive">{one.tool}</Text>
                {one.detail === null ? '' : <Text color="subtle">{` ${one.detail}`}</Text>}
              </Text>
              <Box flexGrow={1} />
              <Text color="subtle">{one.ago}</Text>
            </Box>
          ))}
        </Box>
      )}
      {spot.isPinned ? (
        <Box flexDirection="row">
          <Button key="follow" plain label="Follow the action" onPress={act.follow} />
        </Box>
      ) : null}
    </Box>
  )
}