neon-hud

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    if (e.props.hasSurvey) return next(e)

    const isDesktop = e.surface === 'desktop'
    const C = isDesktop ? DESK : CLI
    const off = hiddenSegments(await read($, hidden))
    const { Box, Text, Button } = $.ui.resolve(e)
    const now = await $.clock.now()

    // A chip. Desktop: graphite, flush with the host surface. Terminal: slate, led by an accent edge.
    const pill = (id: string, accent: string, isLit: boolean, body: JSX.Element) => (
      <Box
        key={`pill-${id}`}
        backgroundColor={C.chip}
        paddingLeft={isDesktop ? 1 : 0}
        paddingRight={1}
        hover={{ scope: `hud-${id}`, backgroundColor: C.chipHover }}
      >
        {!isDesktop && <Text color={isLit ? accent : C.faint}>▌</Text>}
        {body}
      </Box>
    )
    // A console line: a fixed-width label column, a rule, then the line.
    // Every line shares the column, so swapping one in on hover doesn't shift the text.
    const consoleLine = (label: string, accent: string, body: JSX.Element) => (
      <Box flexGrow={1}>
        <Box width={8} flexShrink={0}>
          <Text color={accent} bold>{label}</Text>
        </Box>
        <Text color={C.rule}>{'│ '}</Text>
        {body}
      </Box>
    )
    const detail = (id: string, label: string, accent: string, body: JSX.Element) => (
      <Box
        key={`detail-${id}`}
        position="absolute"
        top={0}
        left={0}
        right={0}
        display="none"
        backgroundColor={C.chip}
        paddingLeft={1}
        hover={{ scope: `hud-${id}`, display: 'flex' }}
      >
        {consoleLine(label, accent, body)}
      </Box>
    )

    const left: JSX.Element[] = []
    const right: JSX.Element[] = []
    const details: JSX.Element[] = []
    let tree: JSX.Element[] = []

    // ── turn ──
    if (!off.includes('turn')) {
      const t = await read($, turn)
      const mix = await read($, toolMix)
      const isWorking = t.startedAt !== null
      if (isWorking || t.lastMs !== null) {
        const elapsed = isWorking ? now - (t.startedAt as number) : (t.lastMs as number)
        const calls = isWorking ? t.tools : t.lastTools
        left.push(
          pill('turn', C.live, isWorking,
            <Box>
              <Text color={isWorking ? C.live : C.faint}>{isWorking ? SPIN[Math.floor(elapsed / 1000) % 4] : '◷'}</Text>
              <Text color={isWorking ? C.text : C.dim} bold={isWorking}>{` ${duration(elapsed)}`}</Text>
              <Text color={C.dim}>{`  ${plural(calls, 'call')}`}</Text>
            </Box>,
          ),
        )
        const breakdown = topEntries(isWorking ? mix.current : mix.last, 6)
        details.push(
          detail('turn', isWorking ? 'LIVE' : 'LAST', isWorking ? C.live : C.dim,
            <Text color={C.text} wrap="truncate-end">
              {breakdown.length === 0 ? 'no tool calls' : breakdown.map(([k, v]) => `${shortTool(k)} ×${v}`).join('  ·  ')}
            </Text>,
          ),
        )
      }
    }

    // ── skill ──
    if (!off.includes('skill')) {
      const name = await read($, skill)
      if (name !== null) {
        const history = await read($, skillHistory)
        left.push(
          pill('skill', C.skill, true,
            <Box>
              <Text color={C.skill}>◆ </Text>
              <Text color={C.text}>{shortSkill(name)}</Text>
            </Box>,
          ),
        )
        details.push(
          detail('skill', 'SKILL', C.skill,
            <Text wrap="truncate-end">
              <Text color={C.text}>{name}</Text>
              {history.length > 1 && <Text color={C.dim}>{`   prev ${history.slice(1).map(shortSkill).join(', ')}`}</Text>}
            </Text>,
          ),
        )
      }
    }

    // ── agents ──
    if (!off.includes('agents')) {
      const a = await read($, agents)
      const visible = visibleAgents((a.list ?? []).filter(x => x.id !== undefined), now)
      const isSettled = (x: HudAgent) => x.status !== 'running' && x.endedAt !== null && now - x.endedAt >= SETTLE_MS
      const done = visible.filter(isSettled).length
      const active = visible.length - done
      if (visible.length > 0) {
        left.push(
          pill('agents', C.agents, active > 0,
            <Box>
              <Text color={active > 0 ? C.agents : C.faint}>⑂ </Text>
              <Text color={C.text} bold={active > 0}>{String(active)}</Text>
              <Text color={C.dim}>{' running'}</Text>
              {done > 0 && <Text color={C.dim}>{`  ${done} done`}</Text>}
            </Box>,
          ),
        )

        // The fleet as a tree, one line per agent, children indented under the agent that spawned them
        {
          const ids = new Set(visible.map(x => x.id))
          const childrenOf = (parent: string | null) =>
            visible.filter(x => (x.parentId !== null && ids.has(x.parentId) ? x.parentId : null) === parent)
          const agentLine = (x: HudAgent, depth: number, isFirst: boolean) => {
            const isRunning = x.status === 'running'
            const isSettling = !isRunning && x.endedAt !== null && now - x.endedAt < SETTLE_MS
            const isFailed = !isRunning && !isSettling && x.status !== 'completed'
            const glyph = isRunning ? SPIN[Math.floor(now / 1000) % 4] : isSettling ? '◌' : isFailed ? '✗' : '✓'
            const glyphColor = isRunning ? C.agents : isSettling ? C.dim : isFailed ? C.red : C.green
            const state = isRunning ? (x.lastTool ? shortTool(x.lastTool) : '') : isSettling ? 'waiting' : x.status
            // Fixed-width, right-aligned stat columns: a number growing a digit can't shove the line
            const stat = (key: string, width: number, text: string, color: string) => (
              <Box key={key} width={width} flexShrink={0} justifyContent="flex-end">
                <Text color={color} wrap="truncate-end">{text}</Text>
              </Box>
            )
            return (
              <Box key={`agent-${x.id}`} paddingLeft={1}>
                {consoleLine(isFirst ? 'AGENTS' : '', C.agents,
                  <Box flexGrow={1}>
                    <Box flexGrow={1} flexShrink={1}>
                      <Text wrap="truncate-end">
                        {depth > 0 && <Text color={C.faint}>{`${'   '.repeat(depth - 1)} └ `}</Text>}
                        <Text color={glyphColor}>{`${glyph} `}</Text>
                        <Text color={isRunning ? C.text : C.dim} bold={isRunning}>{x.type}</Text>
                        <Text color={C.dim}>{`  ${x.description}`}</Text>
                      </Text>
                    </Box>
                    {stat('t', 9, duration((x.endedAt ?? now) - x.seenAt), C.faint)}
                    {stat('c', 10, plural(x.tools, 'call'), C.faint)}
                    {stat('s', 14, state, isRunning ? C.dim : C.faint)}
                  </Box>,
                )}