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 read($, tick)
    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'

      return drawDesktopPane($.ui.resolve(e), {
        page: current,
        pages: pagesShown(current),
        now: await $.clock.now(),
        columns: e.props.bodyColumns,
        agents: await read($, agents),
        snap: await read($, runs),
        seen: await read($, seen),
        gpu: await read($, gpu),
        gpuHosts: autoHosts,
        onConnectGpu: host => void connectGpu($, host),
        onChangeGpuHost: () => void forgetGpu($),
        disclosures: openDisclosures,
        onToggleDisclosure: key => toggleDisclosure($, key),
        gates: await read($, gates),
        trees: await read($, trees),
        guards: (await read($, guards))?.blocks ?? [],
        peers: (await read($, peers)) ?? [],
        paneRuns: PANE_RUNS,
        detail: await read($, detail),
        reports: await read($, reports),
        timeline: await read($, timeline),
        timelineTurnId: (await read($, timelineTurn)) ?? undefined,
        flights: await flightsNow($),
        agentsSeenBefore: await read($, agentsSeenBefore),
        isFoldOpen: await read($, agentsFoldOpen),
        peek: await read($, peek),
        usage: await usageNow($),
        progress: await read($, progress),
        onToggleFold: () => void update($, agentsFoldOpen, was => !was),
        onTimelineTurn: turnId => void pickTurn($, turnId ?? null),
        timelineView: await read($, timelineView),
        onTimelineView: () => void update($, timelineView, was => (was === 'hotspots' ? 'turn' : 'hotspots')),
        timelinePage: (await read($, timelinePage)) ?? 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($)
          })(),
      })
    }

    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">
            <Text bold>{model.name}</Text>
            <Text dimColor>{`  ${model.status}`}</Text>
          </Text>,
          <Markdown text={model.markdown} />,
        ]),
      ]
    } else if (current === 'overview') {
      const snap = await read($, runs)
      const polledAt = snap?.polledAt ?? now
      const allGates = await read($, gates)
      const found = await read($, trees)
      const overview = overviewOf(await read($, agents), snap, await read($, seen), now, (await read($, peers)) ?? [], allGates, found)
      const flights = await flightsNow($)
      const recent = recentGates(allGates, OVERVIEW_GATES)
      const blocks = (await read($, guards))?.blocks ?? []
      const section = (rows: RenderChildren) => (
        <Box flexDirection="column" marginTop={1}>
          {rows}

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' | 'columns'>) {
  const { Box, Button } = el
  const isNarrow = widthTierOf(data.columns) === 'narrow'
  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)}
    />
  )

  if (isNarrow) {
    const row1 = data.pages.slice(0, 3).map(buttonOf)
    const row2 = data.pages.slice(3).map(buttonOf)

    return (
      <Box flexDirection="column" rowGap={1}>
        <Box flexDirection="row" columnGap={1}>
          {row1}
        </Box>
        <Box flexDirection="row" columnGap={1}>
          {row2}
        </Box>
      </Box>
    )
  }

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