divramod-subagent-context

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    if (e.props.hasSurvey) return next(e)
    const { Box, Button } = $.ui.resolve(e)
    const toggle = async () => {
      const up = (await $.ui.panes()).some(p => p.id === PANE)
      if (up) await $.ui.close({ id: PANE })
      else await asked($, 'button')
    }
    return (
      <Box>
        <Button label="subagents" hotkey="s" plain onPress={toggle} />
      </Box>
    )
  })

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const el = $.ui.resolve(e)
    // VS Code's table names a Client it does not draw yet: the surface decides.
    const Client = 'Client' in el && (e.surface === 'terminal' || e.surface === 'desktop') ? el.Client : undefined
    void purge($)
    await focusSeen($, e.props.isFocused).catch(() => {})
    const list = await read($, rows)
    const current = await read($, tab)
    const found = await read($, sessions)
    const tabJobs = await read($, jobs)
    const now = current === 'subagents' ? 0 : await $.clock.now()
    const other = current === 'subagents' ? undefined : bodyOf(current, found, tabJobs, await read($, jobType), { plans: await read($, plansView), agents: await read($, agentsView), jobs: await read($, jobsView) }, await read($, epoch), now)
    const table = tableProps(list, l, await read($, view), await read($, epoch))
    const client = !Client ? undefined : other ? <Client key={`${current}-table`} module="./table-view.tsx" props={other.table} flexGrow={1} /> : <Client key="table" module="./table-view.tsx" props={table} flexGrow={1} />
    // The body is as tall as the pane the surface gave it, so the table grows and shrinks with the window.
    const data: PaneData = { focused: e.props.isFocused, version: await versionOf($), current, found, jobs: tabJobs, list, l, table: client, other, height: e.props.scroll?.bodyRows, room: Math.max(1, (e.viewport?.rows ?? 24) - 5), columns: e.props.bodyColumns ?? e.viewport?.columns ?? 0 }
    return paneView(el, data, { show: t => show($, t), press: k => press($, l, k), pressSessions: k => pressSessions($, k, current as Exclude<Tab, 'subagents'>), stepJobs: d => stepJobs($, d), close: () => $.ui.close({ id: PANE }) })
  })

export const paneView = ({ Box, Text, Button }: Elements, d: PaneData, act: PaneActions) => {
  const close = (
    <>
      <Text dimColor>·</Text>
      <Button label="close" hotkey="q" plain onPress={act.close} />
    </>
  )
  const label = (t: Tab) => `${t} ${count(t, d.list.length, d.found, d.jobs)}`
  return (
    <Box flexDirection="column" {...(d.height ? { height: d.height } : {})}>
      {/* The surface draws no pane title, so the title is the body's first line: centered, the version at the right (a
          blank of its width at the left keeps it centered). While the pane holds the keyboard the marker leads the line. */}
      <Box>
        {d.focused ? <Text bold color="yellow">{`${MARKER} `}</Text> : <Text>{' '.repeat(d.version ? d.version.length + 1 : 0)}</Text>}
        <Box flexGrow={1} justifyContent="center">
          <Text bold>{TITLE}</Text>
        </Box>
        <Text dimColor>{d.version ? `v${d.version}` : ''}</Text>
      </Box>
      <Box gap={2}>
        {TABS.map(([t, key]) => (t === d.current ? <Text key={t} bold inverse>{` ${key}: ${label(t)} `}</Text> : <Button key={t} label={label(t)} hotkey={key} plain onPress={() => act.show(t)} />))}
      </Box>
      {d.current === 'subagents' ? (
        <>
          {d.table ?? (
            <Box flexDirection="column">
              <Text bold>{head(d.l)}</Text>
              {d.list.length === 0 && <Text dimColor>No subagents yet.</Text>}
              {d.list.slice(-d.room).map(row => <Text color={color(row, d.l)}>{line(row, d.l)}</Text>)}
            </Box>
          )}
          <Text dimColor>{`${foot(d.l)} · live`}</Text>
          {/* The pane's own keys: they work while the pane holds the keyboard, without a click into the table. */}
          <Box gap={1}>
            {([['h', 'prev'], ['l', 'next'], ['j', 'down'], ['k', 'up']] as const).map(([k, label]) => <Button key={label} label={label} hotkey={k} plain onPress={() => act.press(k)} />)}
            {close}
          </Box>
        </>
      ) : d.other && (
        <>
          {d.table ?? (
            <Box flexDirection="column" flexGrow={1}>
              {gridLines(d.other.grid, d.other.empty, d.columns, (d.height ?? 24) - 10).map((t, i) => <Text key={String(i)} dimColor={!/^│/.test(t)}>{t}</Text>)}
            </Box>
          )}
          <Text dimColor>{d.other.foot}</Text>
          <Box gap={1}>
            {d.current === 'jobs' && <Button label="prev type" hotkey="h" plain onPress={() => act.stepJobs('prev')} />}
            {d.current === 'jobs' && <Button label="next type" hotkey="l" plain onPress={() => act.stepJobs('next')} />}
            <Button label="down" hotkey="j" plain onPress={() => act.pressSessions('j')} />
            <Button label="up" hotkey="k" plain onPress={() => act.pressSessions('k')} />
            {close}
          </Box>
        </>
      )}
    </Box>
  )
}