compass

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const els = $.ui.resolve(e)
    const { Box, Text, Button } = els
    const Input = 'Input' in els ? els.Input : null
    const width = Math.max(28, e.props.bodyColumns)
    paneCols = e.props.placement === 'dock' ? e.props.bodyColumns + 2 : 0
    const [stored, grill, round, confirm, actions, userTasks, steers, btw, stats, tab, selected, unfolded, isRefreshing, isBusy, lastError] =
      await Promise.all([
        read($, mapA),
        read($, grillA),
        read($, grillRoundA),
        read($, grillConfirmA),
        read($, actionsA),
        read($, userTasksA),
        read($, steersA),
        read($, btwA),
        read($, statsA),
        read($, tabA),
        read($, selectedA),
        read($, unfoldedA),
        read($, refreshingA),
        read($, busyA),
        read($, errorA),
      ])
    const [peers, peersAt, selfName, isRemote, chat, incoming, chatSeen] = await Promise.all([read($, peersA), read($, peersAtA), read($, selfNameA), read($, remoteA), read($, chatA), read($, incomingA), read($, chatSeenA)])
    const live = await read($, liveA)
    const contract = { report: await read($, reportA), brief: await read($, briefA), sent: await read($, briefSentA) }
    const openPeer = tab === 'chat' && selected?.startsWith('p:') ? selected.slice(2) : null
    const unreadOf = (name: string) => (name === openPeer ? 0 : chat.filter(m => m.peer === name && m.dir === 'in' && m.at > (chatSeen[name] ?? 0)).length)
    const unreadAll = [...new Set(chat.map(m => m.peer))].reduce((n, p) => n + unreadOf(p), 0)
    // a Client (a region one of the surface modules draws) exists on the terminal and desktop; elsewhere Buttons stand in
    const hasClient = e.surface === 'terminal' || e.surface === 'desktop'
    const map = isCurrent(stored) ? stored : null
    const now = await $.clock.now()
    const board = boardOf(map, userTasks)
    const front = frontierOf(grill)
    const isOpen = (key: string) => unfolded.includes(key)
    const select = (id: string) => () => update($, selectedA, s => (s === id ? null : id))
    const rule = <Text dimColor>{'─'.repeat(width)}</Text>

    const art = (t: CompassTab, hint: string) => (
      <Box flexDirection="column" key={`art:${t}`}>
        {ART[t].map(line => (
          <Text color="cyan" dimColor>
            {line}
          </Text>
        ))}
        <Text dimColor>{hint}</Text>
      </Box>
    )

    const input = (key: string, placeholder: string, submitLabel: string, onSubmit: (v: string) => void) =>
      Input && (
        <Box key={`in:${key}`} marginTop={1}>
          <Input key={key} placeholder={placeholder} submitLabel={submitLabel} onSubmit={(v: string) => onSubmit(v)} />
        </Box>
      )

    const fold = (key: string, label: string) => (
      <Button key={`fold:${key}`} plain dimColor label={`${isOpen(key) ? '▾' : '▸'} ${label}`} onPress={() => toggleIn($, key)} />
    )

    // indicators: a tinted pill, a level bar, a pill button (a Client, so it keeps its colours)
    const pill = (key: string, text: string, tone: Tone, bold = false) => (
      <Box key={key} flexShrink={0}>
        <Text color={TONE[tone].fg} backgroundColor={TONE[tone].bg} bold={bold}>
          {` ${text} `}
        </Text>
      </Box>
    )
    const meter = (key: string, frac: number, cells: number, tone: Tone) => (
      <Text key={key} color={TONE[tone].fg} backgroundColor={TRACK}>
        {barText(frac, cells)}
      </Text>
    )
    const pillBtn = (key: string, label: string, tone: Tone, onPress: () => unknown, isOn = false) => {
      presses.set(key, onPress)
      return hasClient ? (
        <Box key={`${key}:box`} flexShrink={0}>
          {h('Client', { module: './pill.tsx', key, props: { label, fg: TONE[tone].fg, bg: TONE[tone].bg, isOn } })}
        </Box>
      ) : (
        <Button key={key} plain dimColor={!isOn} label={label} onPress={() => void onPress()} />
      )
    }
    const spin = SPIN[Math.floor(now / 120) % SPIN.length]!

    // is the chart caught up with the session? one line, always on top
    const behind = map && typeof map.turns === 'number' ? Math.max(0, stats.turns - map.turns) : 0
    const unseen = map ? actions.filter(a => a.status === 'sent' && a.at > Math.max(map.at, map.reconciledAt ?? 0)).length : 0
    // what is going on with the chart, and whether you need to do anything: one answer for the
    // sync line and the sea chart alike
    const syncLine = ((): { tone: Tone; glyph: string; text: string; detail: string; canRefresh: boolean } => {
      const update = { canRefresh: true }
      const wait = { canRefresh: false }
      if (isQuickCharting) return { tone: 'cyan', glyph: spin, text: quickWhat || 'checking the course', detail: 'a few seconds · nothing to do', ...wait }
      if (isRefreshing) return { tone: 'cyan', glyph: spin, text: 'charting now', detail: 'nothing to do', ...wait }
      if (isReconciling) return { tone: 'cyan', glyph: spin, text: 'applying your changes', detail: 'a few seconds · nothing to do', ...wait }
      if (!map && stats.turns === 0 && !isBusy) return { tone: 'dim', glyph: '◌', text: 'waiting for your first prompt', detail: 'the chart starts seconds after you send one', ...wait }
      if (!map && isBusy) return { tone: 'cyan', glyph: '◌', text: 'chart coming', detail: 'drawn in a few seconds · nothing to do', ...wait }
      if (!map) return { tone: 'yellow', glyph: '◌', text: 'no chart yet', detail: 'press ↻ update to draw it', ...update }
      if (incoming) return isBusy
        ? { tone: 'cyan', glyph: '◌', text: 'your new message', detail: 'charted a few seconds into the turn · nothing to do', ...wait }
        : { tone: 'yellow', glyph: '◌', text: 'new message not charted', detail: 'press ↻ update', ...update }
      if (behind) return isBusy
        ? { tone: 'cyan', glyph: '◌', text: `${behind} turn${behind > 1 ? 's' : ''} behind`, detail: 'updates when this turn ends · nothing to do', ...wait }
        : { tone: 'yellow', glyph: '◌', text: `${behind} turn${behind > 1 ? 's' : ''} behind`, detail: 'press ↻ update', ...update }
      if (unseen) return isBusy
        ? { tone: 'cyan', glyph: '◌', text: `${unseen} update${unseen > 1 ? 's' : ''} sent`, detail: 'charted when this turn ends · nothing to do', ...wait }
        : { tone: 'yellow', glyph: '◌', text: `${unseen} update${unseen > 1 ? 's' : ''} not charted`, detail: 'press ↻ update', ...update }
      return { tone: 'green', glyph: '✓', text: 'in sync', detail: isBusy ? 'Claude is working · next update when the turn ends' : '', ...wait }
    })()

    // a clickable label that wraps between words instead of being cut: the first row is the
    // button, the rest follow under it, so every word stays readable
    const wrapped = (key: string, text: string, room: number, onPress: () => unknown, opts: { dim?: boolean; indent?: number } = {}) => {
      const [first = '', ...rest] = wordWrap(text, room)
      return {
        head: <Button key={key} plain dimColor={opts.dim} label={first} onPress={() => void onPress()} />,
        tail: rest.length ? (
          <Box key={`${key}:more`} flexDirection="column" paddingLeft={opts.indent ?? 2}>
            {rest.map((r, i) => (
              <Text key={`${key}:r${i}`} dimColor={opts.dim}>
                {r}
              </Text>
            ))}
          </Box>
        ) : null,
      }
    }

    // ── header: a title bar, then the tabs as a segmented control ──
    const header = (
      <Box flexDirection="column" key="head">
        <Box justifyContent="space-between">
          <Box flexShrink={1}>
            <Text bold wrap="wrap">
              <Text color={GOLD}>{'◈ '}</Text>
              <Text color="#e6e6e6">{map?.goal || 'compass'}</Text>
            </Text>
          </Box>
          <Box flexShrink={0} columnGap={1}>
            {pillBtn('legend', '? key', isOpen('legend') ? 'cyan' : 'dim', async () => {
              await openTab($, 'flow')
              await toggleIn($, 'legend')
            }, isOpen('legend'))}
            <Button key="close" plain dimColor label="✕" role="dismiss" onPress={() => void togglePane($)} />
          </Box>
        </Box>
        <Box flexWrap="wrap" marginTop={1}>
          {TABS.map(t => {
            const isOn = t.id === tab
            const count = t.id === 'grill' ? front.ask.length : t.id === 'chat' ? unreadAll : 0
            return (
              <Box key={`tabbox:${t.id}`} marginRight={1}>
                {pillBtn(`tab:${t.id}`, `${t.icon} ${t.label}`, isOn ? 'blue' : 'dim', () => openTab($, t.id), isOn)}
                {count > 0 ? pill(`tabn:${t.id}`, `${count}`, t.id === 'grill' ? 'yellow' : 'cyan', true) : null}
                {t.id === 'chat' ? <Text color={isRemote ? TONE.green.fg : TONE.red.fg}>●</Text> : null}
              </Box>
            )