agent-monitor

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const ui = $.ui.resolve(e)
    const { Box, Text, Button } = ui
    const list = await read($, agents)
    const p = await read($, panel)
    const at = Math.max(await read($, now), ...list.map(a => a.startedAt), 0)
    const t = totals(list, at)

    const running = list.filter(a => a.status === 'running').reverse()
    const finished = list.filter(a => a.status !== 'running').reverse()
    const summary = `費用 ≈${fmtCost(t.cost)}，Tokens ${fmtTokens(t.tokens)}，時間 ${fmtTime(t.time)}`

    const empty = list.length === 0 && <Text dimColor>目前沒有子代理。</Text>
    const runningHead = running.length > 0 && <Text dimColor>執行中 · {running.length}</Text>
    const finishedHead = finished.length > 0 && (
      <Box flexDirection="row" gap={2}>
        <Button
          key="am-done"
          label={`${p.isDoneCollapsed ? '▸' : '▾'} 已完成 · ${finished.length}`}
          plain
          onPress={() => update($, panel, prev => ({ ...prev, isDoneCollapsed: !prev.isDoneCollapsed }))}
        />
        <Button
          key="am-clear"
          label="清除已完成"
          plain
          onPress={() => update($, agents, prev => prev.filter(a => a.status === 'running'))}
        />
      </Box>
    )

    if (e.surface === 'desktop' && 'Svg' in ui) {
      const { Svg } = ui
      const W = Math.max(240, Math.min(900, (e.props.bodyColumns || 40) * 8 - 8))
      const row = (a: AgentRun) => (
        <Svg
          key={a.id}
          source={agentSvg(W, a, ctxOf(a), elapsed(a, at), FMT)}
          alt={`${a.description}：${a.type} · ${modelName(a.model)} · ${STATUS_WORD[a.status]}`}
          width={W}
          height={ROW_H}
        />
      )
      return (
        <Box flexDirection="column">
          <Svg source={headerSvg(W, t, FMT)} alt={summary} width={W} height={HEADER_H} />
          {empty}
          {runningHead}
          {running.map(row)}
          {finishedHead}
          {!p.isDoneCollapsed && finished.map(row)}
        </Box>
      )
    }

    // Terminal: the same content in text rows.
    const barW = Math.max(6, Math.min(24, (e.props.bodyColumns || 40) - 34))
    const stat = (k: string, v: string) => (
      <Text key={k}>
        <Text dimColor>{k} </Text>
        <Text bold>{v}</Text>
      </Text>
    )
    const row = (a: AgentRun) => {
      const ctx = ctxOf(a)
      const color = colorOf(a.model)
      return (
        <Box key={a.id} flexDirection="column" marginBottom={1}>
          <Box flexDirection="row" justifyContent="space-between">
            <Text bold wrap="truncate-end">
              {a.description || a.type}
            </Text>
            <Text color={STATUS_COLOR[a.status]}>{STATUS_GLYPH[a.status]}</Text>
          </Box>
          <Text wrap="truncate-end">
            <Text color={color}>{a.type}</Text>
            <Text dimColor> {modelName(a.model)}</Text>
          </Text>
          {a.activity && (
            <Text dimColor wrap="truncate-end">
              {a.activity}
            </Text>
          )}
          <Text wrap="truncate-end">
            <Text dimColor>
              ctx {ctx}% · {fmtTokens(a.tokens)} ≈{fmtCost(a.costUsd)} {fmtTime(elapsed(a, at))}
            </Text>
          </Text>
          <Text color={color}>{bar(a.status === 'done' ? 100 : ctx, barW)}</Text>
        </Box>
      )
    }

    return (
      <Box flexDirection="column">
        <Box flexDirection="row" gap={3}>
          {stat('費用', `≈${fmtCost(t.cost)}`)}
          {stat('Tokens', fmtTokens(t.tokens))}
          {stat('時間', fmtTime(t.time))}
        </Box>
        <Box flexDirection="column" marginTop={1}>
          {empty}
          {runningHead}
          {running.map(row)}
          {finishedHead}
          {!p.isDoneCollapsed && finished.map(row)}
        </Box>
      </Box>
    )
  })