archpane

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    const cur = await read($, current)
    const isOpen = (await $.ui.panes()).some(p => p.id === PANE)
    if (cur === null || cur.diagram.nodes.length === 0 || !isOpen) return next(e)

    const { Box, Text } = $.ui.resolve(e)
    const detail = (n: DiagramNode) => {
      const out = cur.diagram.edges.filter(ed => ed.from === n.id).map(ed => (ed.label ? `${ed.to} (${ed.label})` : ed.to))
      return [n.id, n.kind, n.group && `in ${n.group}`, n.status, n.note, out.length > 0 && `→ ${out.join(', ')}`]
        .filter(Boolean)
        .join(' · ')
    }

    return (
      <Box flexDirection="column">
        <Box height={1} width={e.props.bodyColumns}>
          {cur.diagram.nodes.map(n => (
            <Box
              key={`d:${n.id}`}
              position="absolute"
              top={0}
              left={0}
              display="none"
              hover={{ scope: `n:${n.id}`, display: 'flex' }}
            >
              <Text color="cyan" wrap="truncate">{detail(n)}</Text>
            </Box>
          ))}
        </Box>
        {await next(e)}
      </Box>
    )
  })

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const { Box, Button, Text } = $.ui.resolve(e)
    const cur = await read($, current)
    const above = await read($, trail)
    if (cur === null || cur.diagram.nodes.length === 0) {
      return (
        <Box flexDirection="column">
          <Text bold>{cur?.name ?? DEFAULT}</Text>
          <Text dimColor>Empty. Ask Claude to draw the architecture, e.g. "diagram the services in this repo".</Text>
        </Box>
      )
    }

    const l = layout(cur.diagram)
    const cols = e.props.bodyColumns
    const drawing = toDraw(l)
    if (tooBig(drawing, cols)) {
      return (
        <Box flexDirection="column">
          <Text bold>{cur.diagram.title ?? cur.name}</Text>
          <Text color="yellow">
            {`Too large to draw here (${l.width}×${l.height}). Ask Claude to split it into an overview and detail diagrams.`}
          </Text>
        </Box>
      )
    }
    const isWide = l.width > cols
    // Terminal and desktop pan with the pointer through a Client; the rest draw it still.
    // A small diagram's region keeps room under it for a box's right-click menu.
    const regionRows = Math.max(l.height, 10)
    let body
    if (e.surface === 'terminal' || e.surface === 'desktop') {
      const { Client } = $.ui.resolve(e)
      body = <Client key="canvas" module="./canvas.tsx" props={{ ...drawing, cols, regionRows, name: cur.name }} width={cols} height={regionRows} />
    } else {
      body = draw({ Box, Text }, drawing, 0, cols)
    }

    // Back up the breadcrumb: crumb `i` becomes the open diagram, what was above it stays above.
    const back = async (i: number) => {
      const to = await load($, above[i]!)
      if (to.diagram.nodes.length > 0) return show($, to, above.slice(0, i), false)
      $.ui.toast(`"${above[i]}" no longer exists`)
      await update($, trail, t => t.filter(n => n !== above[i]))
    }

    return (
      <Box flexDirection="column">
        {above.length > 0 && (
          <Box flexDirection="row">
            {above.map((name, i) => (
              <Box flexDirection="row">
                <Button key={`crumb:${i}`} plain label={name} onPress={() => back(i)} />
                <Text dimColor> › </Text>
              </Box>
            ))}
            <Text bold>{cur.name}</Text>
          </Box>
        )}
        <Text bold wrap="truncate">{cur.diagram.title ?? cur.name}</Text>
        <Text wrap="truncate">
          {STATUSES.map(s => (
            <Text color={COLOR[s]}>■ {s}  </Text>
          ))}
          <Text dimColor>{`· click to ask or open ▸ · right-click for more${isWide ? ' · drag to pan' : ''}`}</Text>
        </Text>
        {body}
      </Box>
    )
  })