subagents-panel

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    void traceEvent($, `render ${e.surface} focused=${e.props.isFocused} placement=${e.props.placement}`)
    const els = $.ui.resolve(e)
    const { Box, Text, Button, Markdown } = els
    // Graphical surfaces (desktop, VS Code, mobile) draw SVG; the terminal draws glyphs. Decide by
    // surface, not by the table: at run time the terminal's table answers `Svg` too, and draws nothing.
    const isTerminal = e.surface === 'terminal'
    const Svg = !isTerminal && 'Svg' in els ? els.Svg : undefined
    // The terminal and a desktop run a `Client` module on the surface itself: elapsed times tick
    // there, on the surface's clock, whether or not the engine raises anything meanwhile.
    const Client = (isTerminal || e.surface === 'desktop') && 'Client' in els ? els.Client : undefined
    const liveElapsed = (key: string, baseMs: number, prefix = '', dim = true) =>
      Client ? (
        <Client key={key} module="./elapsed.tsx" props={{ baseMs, prefix, dim }} />
      ) : (
        <Text dimColor={dim}>
          {prefix}
          {duration(baseMs)}
        </Text>
      )

    const list = await read($, agents)
    const chosen = await read($, selected)
    const open = await read($, toggled)
    await read($, tick) // redraw as elapsed times move
    if (list.some(r => isActive(r.phase))) armRefresh($)
    const now = await $.clock.now()
    const width = Math.max(20, e.props.bodyColumns)
    const flip = (key: string) => update($, toggled, keys => (keys.includes(key) ? keys.filter(k => k !== key) : [...keys, key]))

    const face = (row: AgentRow) => {
      // A desktop draws no Svg whose alt is empty, so every Svg here names itself.
      if (Svg) return <Svg source={avatarIcon(row.id)} alt="Agent avatar" width={18} height={18} />
      const a = avatar(row.id)
      return <Text color={a.color}>{a.glyph}</Text>
    }

    const kindChip = (kind: Kind, size = 20) => {
      if (Svg) return <Svg source={kindIcon(kind)} alt={kind} width={size} height={size} />
      // The terminal draws the same colors: blue files, green commands, purple the rest.
      return <Text color={KIND_COLOR[kind]}>{KIND_GLYPH[kind]}</Text>
    }

    const statusMark = (row: AgentRow) => {
      if (row.phase === 'running') return <Text color="claude">{RUNNING}</Text>
      if (row.phase === 'waiting') return <Text color="warning">◌</Text>
      if (row.phase === 'failed') return <Text color="error">✗</Text>
      if (row.phase === 'killed') return <Text color="inactive">■</Text>
      return <Text color="success">✓</Text>
    }

    const divider = () =>
      Svg ? (
        <Box marginTop={1}>
          <Svg source={DIVIDER} alt="Divider" height={1} />
        </Box>
      ) : (
        <Text dimColor>{'─'.repeat(Math.max(1, width - 2))}</Text>
      )

    const agent = chosen ? list.find(r => r.id === chosen) : undefined
    // The mobile app draws no text field yet.
    const Input = e.surface !== 'mobile' && 'Input' in els ? els.Input : undefined

    // Switching views removes the element that held the focus, and the surface then lets go of
    // the pane: the next click only took the focus back (a "double click" on desktop). Hand the
    // ring to an element the new view draws; `$.ui.focus` waits for that drawing.
    const handFocus = async (key: string) => {
      const moved = await $.ui.focus({ requestId: PANE, key }).catch((err: unknown) => ({ deny: err instanceof Error ? err.message : String(err) }))
      await traceEvent($, `hand focus -> ${key}: ${moved.deny ? `refused (${moved.deny})` : 'ok'}`)
    }
    const openAgent = async (id: string) => {
      await update($, selected, () => id)
      await handFocus('back')
    }
    const goBack = async (from: string) => {
      await update($, selected, () => null)
      await handFocus(`open-${from}`)
    }

    // ── Detail: one agent's progress ──────────────────────────────────────────
    if (agent) {
      // The default agent type says nothing; the header shows a type only when it is a chosen one.
      const meta = [agent.model, agent.type === 'general-purpose' ? '' : agent.type].filter(Boolean).join(' · ')
      const nameRoom = Math.max(8, width - meta.length - 10)
      // Kept start and end times first; else the duration the Agent call's record states.
      const hasTimes = agent.startedAt > 0 && (isActive(agent.phase) || agent.endedAt !== undefined)
      const ran = hasTimes ? (agent.endedAt ?? now) - agent.startedAt : (agent.durationMs ?? 0)
      const ranLabel = isActive(agent.phase)
        ? `${agent.phase === 'waiting' ? 'Waiting' : 'Running'}${hasTimes ? ` for ${duration(ran)}` : ''}`
        : !hasTimes && agent.durationMs === undefined
          ? agent.phase === 'completed'
            ? 'Completed'
            : agent.phase === 'failed'
              ? 'Failed'
              : 'Stopped'
          : agent.phase === 'completed'
            ? `Ran for ${duration(ran)}`
            : `${agent.phase === 'failed' ? 'Failed' : 'Stopped'} after ${duration(ran)}`

      // Runs of consecutive tool calls fold into one group, as Codex shows them.
      type Block = { kind: 'say'; step: AgentStep } | { kind: 'you'; step: AgentStep } | { kind: 'tools'; key: string; steps: AgentStep[] }
      const blocks: Block[] = []
      agent.steps.forEach((step, i) => {
        const last = blocks[blocks.length - 1]
        if (step.kind === 'say') blocks.push({ kind: 'say', step })
        else if (step.kind === 'you') blocks.push({ kind: 'you', step })
        else if (last?.kind === 'tools') last.steps.push(step)
        else blocks.push({ kind: 'tools', key: `${agent.id}:g${i}`, steps: [step] })
      })
      const lastTools = [...blocks].reverse().find(b => b.kind === 'tools')
      const taskKey = `${agent.id}:task`

      return (
        <Box flexDirection="column" paddingX={1} minHeight={isActive(agent.phase) && Client ? e.props.scroll.bodyRows : undefined}>
          <Box flexDirection="row" alignItems="center" gap={1}>
            {isTerminal ? (
              <Button key="back" plain hotkey="b" label="←" onPress={() => goBack(agent.id)} />
            ) : (
              <Button key="back" plain label="←" onPress={() => goBack(agent.id)} />
            )}
            {face(agent)}
            <Text bold wrap="truncate-end">
              {clip(agent.description, nameRoom)}
            </Text>
            <Box flexGrow={1} />
            <Text dimColor wrap="truncate-end">
              {meta}
            </Text>
          </Box>
          {divider()}

          <Box flexDirection="row" alignItems="center" marginTop={1}>
            {statusMark(agent)}
            {isActive(agent.phase) && hasTimes ? (
              liveElapsed('elapsed-detail', ran, ` ${agent.phase === 'waiting' ? 'Waiting' : 'Running'} for `)
            ) : (
              <Text dimColor> {ranLabel}</Text>
            )}
            {agent.toolCount > 0 && <Text dimColor> · {agent.toolCount} tool calls</Text>}
          </Box>

          {agent.prompt !== '' && (
            <Box flexDirection="column" marginTop={1}>
              <Button
                key="task"
                plain
                dimColor
                label={`${open.includes(taskKey) ? '▾' : '▸'} Task`}
                onPress={() => flip(taskKey)}
              />
              {open.includes(taskKey) && (
                <Box paddingLeft={2} marginTop={1}>
                  <Markdown text={agent.prompt.slice(0, MAX_TEXT)} dimColor />
                </Box>
              )}
            </Box>
          )}

          {blocks.length === 0 && !isActive(agent.phase) && agent.note && (

    const face = (r: AgentRow) => {
      if (Svg) return <Svg source={avatarIcon(r.id)} alt="Agent avatar" width={16} height={16} />
      const a = avatar(r.id)
      return <Text color={a.color}>{a.glyph}</Text>
    }

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    if (e.props.hasSurvey) return next(e)
    if (await read($, bandHidden)) return next(e)
    const list = await read($, agents)
    if (list.length === 0) return next(e)

    const els = $.ui.resolve(e)
    const { Box, Text, Button } = els
    const isTerminal = e.surface === 'terminal'
    const Svg = !isTerminal && 'Svg' in els ? els.Svg : undefined

    await read($, tick) // redraw as elapsed times move
    if (list.some(r => isActive(r.phase))) armRefresh($)
    const running = list.filter(r => isActive(r.phase)).sort((a, b) => b.startedAt - a.startedAt)
    const done = list.length - running.length
    const failed = list.filter(r => r.phase === 'failed').length
    const plural = (n: number, word: string) => `${n} ${word}${n === 1 ? '' : 's'}`

    const headline = running.length > 0 ? `${plural(running.length, 'subagent')} running` : `${plural(done, 'subagent')} finished`
    const tail = [running.length > 0 && done > 0 ? `${done} done` : '', failed > 0 ? `${failed} failed` : ''].filter(Boolean)
    // One line, never wrapped: what does not fit gives way, the done count first, then the
    // button's words. What each agent is doing belongs to the panel, not here.
    const cols = e.props.bodyColumns
    // How many heads the band shows: five when wide, fewer as it narrows; past that, the first
    // few as a stack and "+N" for the rest, so a crowd never pushes the line over.
    const cap = cols >= 90 ? 5 : cols >= 60 ? 3 : 2
    const crowded = running.length > cap
    const shownHeads = running.slice(0, crowded ? cap - 1 : cap)
    const moreText = crowded ? `+${running.length - shownHeads.length}` : ''
    const stacked = Svg !== undefined && shownHeads.length >= 3
    const avatarsWidth =
      running.length === 0 ? 2 : (stacked ? Math.ceil((24 + 14 * (shownHeads.length - 1)) / 8) : shownHeads.length * 2) + (moreText ? moreText.length + 3 : 0)
    const buttonWidth = (label: string) => label.length + (isTerminal ? 4 : 2)
    const room = (tailText: string, label: string) => 2 + avatarsWidth + headline.length + (tailText ? tailText.length + 1 : 0) + buttonWidth(label) + 3 <= cols
    const fullTail = tail.length > 0 ? `· ${tail.join(' · ')}` : ''
    const tailText = room(fullTail, 'Open subagents') || room(fullTail, 'Open') ? fullTail : ''
    const openLabel = room(tailText, 'Open subagents') ? 'Open subagents' : 'Open'

    const face = (r: AgentRow) => {
      if (Svg) return <Svg source={avatarIcon(r.id)} alt="Agent avatar" width={16} height={16} />
      const a = avatar(r.id)
      return <Text color={a.color}>{a.glyph}</Text>
    }

    const band = (
      <Box key="subagents-band" flexDirection="row" flexWrap="nowrap" alignItems="center" gap={1} paddingX={1}>
        {running.length === 0 ? (
          <Text color="success">✓</Text>
        ) : stacked && Svg ? (
          <Svg
            source={avatarStack(shownHeads.map(r => r.id))}
            alt="Agent avatars"
            width={24 + 14 * (shownHeads.length - 1)}
            height={18}
          />
        ) : (
          // The terminal packs its glyphs tight: a character cell cannot overlap another.
          <Box flexDirection="row" flexShrink={0}>
            {shownHeads.map(face)}
          </Box>
        )}
        {moreText !== '' && (
          // "+3 · 7 subagents running": the dot keeps the two numbers from reading as one.
          <Box flexShrink={0} flexDirection="row" gap={1}>
            <Text dimColor bold>
              {moreText}
            </Text>
            <Text dimColor>·</Text>
          </Box>
        )}
        <Box flexShrink={0}>
          <Text bold={running.length > 0} wrap="truncate-end">
            {headline}
          </Text>
        </Box>
        {tailText !== '' && (
          <Box flexShrink={0}>
            <Text dimColor wrap="truncate-end">
              {tailText}
            </Text>
          </Box>
        )}
        <Box flexGrow={1} />
        <Button
          key="open-subagents"
          label={openLabel}
          onPress={() => void $.ui.open({ id: PANE, title: TITLE, focus: true }).catch(() => undefined)}
        />
        {/* The close mark at the far right. Hovering it floats a small card over the band, left of
            the mark, saying how to bring the band back: it covers rather than pushes the line, as
            a tooltip would (a mod's Button carries no native tooltip). A click hides the band and
            says so in a toast. */}
        <Box key="band-close" position="relative" flexDirection="row" alignItems="center">
          <Box
            position="absolute"
            top={0}
            right={3}
            display="none"
            hover={{ display: 'flex' }}
            backgroundColor="#2B2D31"
            paddingX={1}
          >
            {/* Fixed colors, not theme names: a tooltip reads light on dark in either theme. */}
            <Text color="#F2F2F2" wrap="truncate-end">
              Type /subagents to bring it back
            </Text>
          </Box>
          <Button
            key="dismiss-band"
            role="dismiss"
            plain
            dimColor
            label="×"
            onPress={() => {
              void update($, bandHidden, () => true)
              $.ui.toast('Subagents band hidden. Type /subagents to bring back the band and the panel.')
            }}
          />
        </Box>
      </Box>
    )
    // The terminal sets the band off from the conversation above with a rule across its top.
    if (!isTerminal) return band
    return (
      <Box flexDirection="column">
        <Text dimColor wrap="truncate-end">
          {'─'.repeat(Math.max(1, cols))}
        </Text>
        {band}
      </Box>
    )
  })