dashboard

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    // A reload for a changed option raises no session.start: the first drawing starts the loops instead.
    start($)
    docksPanes = e.viewport?.isFullscreen
    await read($, tick)

    if (e.props.hasSurvey) {
      return next(e)
    }

    const bNow = await boardNow($)

    armBandWake($, nextBandChange(await read($, gates), bNow.now, await read($, trees)), bNow.now)

    const board = bandLines(bNow, Math.min(e.props.maxRows, MAX_BAND_ROWS), e.props.bodyColumns - buttonColumns())
    const lines = board.length === 0 ? [await idleNow($)] : board
    const needsYou = bNow.entries.some(entry => entry.tier === 1)

    if (e.surface === 'desktop') {
      const el = $.ui.resolve(e)
      const { Box } = el

      return (
        <Box flexDirection="column">
          {drawDesktopBand(el, lines, () => void goTo($, 'overview'), needsYou)}
          {await next(e)}
        </Box>
      )
    }

    const { Box, Button, Text } = $.ui.resolve(e)
    const width = e.props.bodyColumns
    const draw = (line: Line, columns: number) => (
      <Text wrap="truncate">
        {fitLine(line, columns).map(seg => (
          <Text
            {...(seg.color !== undefined && { color: seg.color })}
            {...(seg.bold === true && { bold: true })}
            {...(seg.dim === true && { dimColor: true })}
          >
            {seg.text}
          </Text>
        ))}
      </Text>
    )

    return (
      <Box flexDirection="column">
        <Box flexDirection="column">
          <Box>
            {draw(lines[0] ?? [], width - buttonColumns())}
            <Text> </Text>
            <Button key="dash-open" label={t().workbench} onPress={() => void goTo($, 'overview')} />
          </Box>
          {lines.slice(1).map(line => draw(line, width))}
        </Box>
        {await next(e)}
      </Box>
    )
  }).catch(($, e, next) => {

export function drawDesktopBand(el: El, lines: readonly Line[], onOpen: () => void, needsYou = false) {
  const { Box, Button, Text } = el
  const draw = (line: Line) => (
    <Text wrap="truncate">
      {line.map(seg => (
        <Text
          {...(seg.color !== undefined && { color: seg.color })}
          {...(seg.bold === true && { bold: true })}
          {...(seg.dim === true && { dimColor: true })}
        >
          {seg.text.replace(/ {3,}/g, '  ')}
        </Text>
      ))}
    </Text>
  )

  const isPrimary =
    needsYou ||
    lines.some(l => l.some(s => s.color === 'error' || (s.color === 'warning' && s.text.includes('!'))))

  return (
    <Box flexDirection="column" width="100%">
      <Box justifyContent="space-between" columnGap={1} alignItems="center">
        {draw(lines[0] ?? [])}
        <Button key="dash-open" label={t().workbench} variant={isPrimary ? 'primary' : 'secondary'} onPress={onOpen} />
      </Box>
      {lines.slice(1).map(draw)}
    </Box>
  )
}

    const draw = (line: Line) => <Text wrap="truncate">{fitLine(line, columns).map(segText)}</Text>

  on('ui.render', { component: 'Pane', requestId: PANE_ID }, async ($, e) => {
    await resumeGpu($)
    // A pane drawn before any opening this load, as after a reload, checks once here.
    shownTabs ??= await tabsWithData($).catch(() => null)

    if (e.surface === 'desktop') {
      const current = (await read($, page)) ?? 'overview'
      const open = await read($, detail)
      // Each read subscribes this drawing to the value: a page reads only what it draws, so a write elsewhere does not redraw it.
      const isOn = (...shown: DashPage[]) => shown.includes(current)

      await read($, paneWake)

      if (isOn('agents', 'mmrun', 'timeline', 'progress')) {
        await read($, tick)
      }

      const now = await $.clock.now()

      const data: PaneData = {
        page: current,
        pages: pagesShown(current),
        now,
        columns: e.props.bodyColumns,
        agents: isOn('overview', 'agents', 'timeline') ? await read($, agents) : [],
        snap: isOn('overview', 'mmrun') ? await read($, runs) : null,
        seen: isOn('overview', 'agents') ? await read($, seen) : { agents: 0, runs: 0 },
        gpu: isOn('gpu') ? await read($, gpu) : null,
        gpuHosts: autoHosts,
        onConnectGpu: host => void connectGpu($, host),
        onChangeGpuHost: () => void forgetGpu($),
        disclosures: openDisclosures,
        onToggleDisclosure: key => toggleDisclosure($, key),
        gates: isOn('overview') ? await read($, gates) : [],
        trees: isOn('overview') ? await read($, trees) : null,
        guards: isOn('overview') ? ((await read($, guards))?.blocks ?? []) : [],
        peers: isOn('overview') ? ((await read($, peers)) ?? []) : [],
        paneRuns: PANE_RUNS,
        detail: open,
        reports: open?.page === 'mmrun' && isOn('mmrun') ? await read($, reports) : {},
        timeline: isOn('timeline') ? await read($, timeline) : [],
        timelineTurnId: isOn('timeline') ? ((await read($, timelineTurn)) ?? undefined) : undefined,
        flights: isOn('overview', 'agents') ? await flightsNow($) : new Map(),
        agentsSeenBefore: isOn('agents') ? await read($, agentsSeenBefore) : 0,
        isFoldOpen: isOn('agents') ? await read($, agentsFoldOpen) : false,
        peek: open?.page === 'agents' && isOn('agents') ? await read($, peek) : null,
        ...(isOn('usage') && { usage: await usageNow($) }),
        progress: isOn('progress') ? await read($, progress) : null,
        onCloseNode: (id, status) => void closeNode($, id, status),
        onAcceptRequest: id => void closeRequest($, id, { status: 'closed', resolution: { by: 'person', evidence: 'accepted on the progress page' } }),
        onDropRequest: id => void closeRequest($, id, { status: 'dropped' }),
        onToggleFold: () => void update($, agentsFoldOpen, was => !was),
        onTimelineTurn: turnId => void pickTurn($, turnId ?? null),
        timelineView: isOn('timeline') ? await read($, timelineView) : undefined,
        onTimelineView: () => void update($, timelineView, was => (was === 'hotspots' ? 'turn' : 'hotspots')),
        timelinePage: isOn('timeline') ? ((await read($, timelinePage)) ?? undefined) : undefined,
        onTimelinePage: to => void update($, timelinePage, () => to),
        onPage: to => void goTo($, to),
        onReadAgent: agentId => void readAgent($, agentId),
        onReadRun: runid => void readRun($, runid),
        onOpenItem: item => void openItem($, item),
        onBack: () => void closeDetail($),
        onToggleSeverity: () => void toggleSeverity($),
        onPickModel: model => void pickReportModel($, model),
        onFinding: finding => void pickFinding($, finding),
        onCopyResume: (sessionId, surface) => void copyResume($, sessionId, surface),
        onCopyCd: (path, surface) => void copyCd($, path, surface),
        onClose: () =>
          void (async () => {
            await closedByPerson($)
            await $.ui.close({ id: PANE_ID })
            await syncStatus($)
          })(),
      }

      armOverviewWake($, isOn('overview') ? nextOverviewChange(data.agents, data.gates, data.peers, now, data.trees, data.flights ?? new Map()) : null, now)

      return drawDesktopPane($.ui.resolve(e), data)
    }

    await read($, tick)
    const { Box, Button, Markdown, Text } = $.ui.resolve(e)
    const current = (await read($, page)) ?? 'overview'
    const now = await $.clock.now()
    const columns = e.props.bodyColumns
    const plain = (text: string, style: { dim?: boolean; color?: string; bold?: boolean } = {}) => (
      <Text
        wrap="truncate"
        {...(style.dim === true && { dimColor: true })}
        {...(style.color !== undefined && { color: style.color })}
        {...(style.bold === true && { bold: true })}
      >
        {fit(text, columns)}
      </Text>
    )
    const segText = (seg: Seg) => (
      <Text
        {...(seg.color !== undefined && { color: seg.color })}
        {...(seg.bold === true && { bold: true })}
        {...(seg.dim === true && { dimColor: true })}
      >
        {seg.text}
      </Text>
    )
    const draw = (line: Line) => <Text wrap="truncate">{fitLine(line, columns).map(segText)}</Text>
    const buttonRow = (row: ButtonRow, key: string, hotkey: string | undefined, onPress: () => void, isDim = false) => (
      <Box>
        {row.before.map(segText)}
        <Button key={key} label={row.label} plain {...(hotkey !== undefined && { hotkey })} {...(isDim && { dimColor: true })} onPress={onPress} />
        {row.after.map(segText)}
      </Box>
    )
    const tabs = paneTabs($, { Box, Button }, current)
    const backRow = (title: string) => (
      <Box columnGap={1}>
        <Button key="dash-back" label={t().back} onPress={() => void closeDetail($)} />
        <Text bold wrap="truncate">
          {title}
        </Text>
      </Box>
    )
    const open = await read($, detail)
    const openAgent = open?.page === 'agents' && current === 'agents' ? (await read($, agents)).find(one => one.agentId === open.agentId) : undefined
    const openRun = open?.page === 'mmrun' && current === 'mmrun' ? (await read($, runs))?.runs.find(one => one.runid === open.runid) : undefined
    const openReport = openRun === undefined ? undefined : (await read($, reports))[openRun.runid]
    let body

    if (openAgent !== undefined) {
      const last = await read($, peek)
      const peeked = openAgent.state === 'running' && last?.agentId === openAgent.agentId ? last : undefined
      const labelled = (label: string, text: string) => draw([{ text: `${label}  `, dim: true }, { text }])
      const peekRows =
        peeked === undefined
          ? []
          : peeked.failed === true
            ? [plain(t().peekUnreadable, { color: 'warning' })]
            : [
                ...(peeked.task === '' ? [] : [labelled(t().peekTask, peeked.task)]),
                ...(peeked.calls.length === 0 ? [] : [plain(t().peekCalls, { dim: true }), ...peeked.calls.map(call => plain(`  ${call}`))]),
                ...(peeked.text === '' ? [] : [labelled(t().peekText, peeked.text)]),
              ]

      body = [
        backRow(`${openAgent.subagentType} · ${openAgent.description}`),
        plain(openAgent.state === 'running' ? t().agentStillRunning : t().agentAnswerHead, { color: 'warning', bold: true }),
        ...(openAgent.usage === undefined ? [] : [plain(usageText(openAgent.usage), { dim: true })]),
        ...peekRows,
        <Markdown text={openAgent.answer ?? ''} />,
      ]
    } else if (open?.page === 'mmrun' && openRun !== undefined && openReport !== undefined) {
      body = [
        backRow(`${runLabel(openRun)} · ${openRun.runid}`),
        <Box columnGap={1}>
          <Text color="warning" bold>
            {t().modelReport}
          </Text>
          <Button key="dash-severity" label={open.showAll ? t().criticalMajorOnly : t().allSeverities} onPress={() => void toggleSeverity($)} />
        </Box>,
        ...openReport.models.flatMap(model => [
          <Text wrap="truncate">

export function drawDesktopPane(el: El, data: PaneData) {
  const { Box } = el
  const body =
    detailBody(el, data) ??
    (data.page === 'overview'
      ? overview(el, data)
      : data.page === 'agents'
        ? agentCards(el, data)
        : data.page === 'mmrun'
          ? runCards(el, data)
          : data.page === 'timeline'
            ? timelineBody(el, data)
            : data.page === 'usage'
              ? usageBody(el, data)
              : data.page === 'progress'
                ? progressBody(el, data)
                : gpuBody(el, data))

  return (
    <Box flexDirection="column" rowGap={1}>
      {tabs(el, data)}
      {body}
    </Box>
  )
}

function tabs(el: El, data: Pick<PaneData, 'page' | 'pages' | 'onPage'>) {
  const { Box, Button } = el
  const buttonOf = (one: { page: DashPage; label: string }) => (
    <Button
      key={`page-${one.page}`}
      label={one.label}
      variant={one.page === data.page ? 'primary' : 'secondary'}
      onPress={() => data.onPage(one.page)}
    />
  )

  return (
    <Box flexDirection="row" columnGap={1} rowGap={1} flexWrap="wrap">
      {data.pages.map(buttonOf)}
    </Box>
  )
}