usage-hud

  on('ui.render', { component: 'Pane', requestId: AGENTS_PANE }, async ($, e) => {
    const els: any = $.ui.resolve(e)
    return buildAgentsPane($, els, (e.props as any).bodyColumns ?? 60)
  })

async function buildAgentsPane($: any, els: any, W: number) {
  const { Box, Text, Button } = els
  const now = await $.clock.now()
  await syncAgents($, now)
  const shown = [...kids.values()].filter(k => k.known)
  const running = shown.filter(k => k.endedAt === undefined).sort((a, b) => a.startedAt - b.startedAt)
  const ended = shown
    .filter(k => k.endedAt !== undefined)
    .sort((a, b) => (b.endedAt ?? 0) - (a.endedAt ?? 0))
    .slice(0, KEEP_ENDED)
  const width = Math.max(30, W)
  const wide = width >= 72
  const line = (key: string, cols: Array<[string, number, string?]>) => (
    <Box key={key} flexDirection="row" height={1}>
      {cols.map(([text, w, color], i) => (
        <Text key={key + '-' + i} color={color ?? VALUE}>
          {padR(clip(text, w), w) + (i < cols.length - 1 ? ' ' : '')}
        </Text>
      ))}
    </Box>
  )
  // 宽面板一行一个: 状态 | 描述 | 时长 | 最后动静 | 最后工具 | 工具 (次数; 表头不能超过 FIX.n 格, 否则被截成 "工..")
  const FIX = { st: 8, ran: 7, idle: 9, tool: 14, n: 5 }
  const descW = Math.max(8, width - (FIX.st + FIX.ran + FIX.idle + FIX.tool + FIX.n) - 5)
  const row = (k: Kid) => {
    const isRun = k.endedAt === undefined
    const quiet = now - k.lastAt
    const stuck = isRun && quiet > STUCK_MS
    const [stText, stColor] = stuck ? ['可能卡住', WARN] : (KID_STATUS[k.status] ?? [safe(k.status) || '已结束', DIM])
    const name = k.desc || k.type || safe(k.id)
    const ran = dur((k.endedAt ?? now) - k.startedAt)
    const idle = isRun ? dur(quiet) + ' 前' : '--'
    const tool = k.lastTool ? shortTool(k.lastTool) : '--'
    const color = isRun ? (stuck ? WARN : VALUE) : DIM
    if (wide) {
      return [
        line('k-' + k.id, [
          [stText, FIX.st, stColor],
          [name, descW, color],
          [ran, FIX.ran, color],
          [idle, FIX.idle, stuck ? WARN : color],
          [tool, FIX.tool, color],
          [String(k.tools), FIX.n, color],
        ]),
      ]
    }
    // 窄面板两行一个
    const detail = isRun ? '已跑 ' + ran + ' · ' + idle + ' ' + tool + ' · ' + k.tools + ' 次' : '用时 ' + ran + ' · ' + k.tools + ' 次工具'
    return [
      line('k-' + k.id, [
        [stText, FIX.st, stColor],
        [name, width - FIX.st - 1, color],
      ]),
      line('k2-' + k.id, [
        ['', FIX.st],
        [detail, width - FIX.st - 1, stuck ? WARN : DIM],
      ]),
    ]
  }
  const head = wide
    ? [
        line('k-head', [
          ['状态', FIX.st, DIM],
          ['描述', descW, DIM],
          ['时长', FIX.ran, DIM],
          ['最后动静', FIX.idle, DIM],
          ['最后工具', FIX.tool, DIM],
          ['工具', FIX.n, DIM],
        ]),
      ]
    : []
  const body: any[] = [
    <Box key="k-top" flexDirection="row" height={1}>
      <Text key="k-title" color={ACCENT} bold>
        {'子代理'}
      </Text>
      <Text key="k-sum" color={DIM}>
        {padR('  运行中 ' + running.length + ' · 已结束 ' + ended.length, Math.max(0, width - 6))}
      </Text>
    </Box>,
  ]
  if (!shown.length) {
    body.push(
      <Text key="k-none" color={DIM}>
        {'这个会话还没有子代理，Esc 关闭'}
      </Text>,
    )
  }
  if (running.length) body.push(...head, ...running.flatMap(row))
  if (ended.length) {
    body.push(
      <Text key="k-ended" color={DIM}>
        {'已结束 (最近 ' + KEEP_ENDED + ' 个)'}
      </Text>,
      ...(running.length ? [] : head),
      ...ended.flatMap(row),
    )
  }
  if (shown.length) {
    body.push(
      <Text key="k-tip" color={DIM}>
        {'运行中超过 5 分钟没有工具动作的会标红，Esc 关闭'}
      </Text>,
    )
  }
  return (
    <Box key="kids" flexDirection="column" width={width}>
      {body}
    </Box>
  )
}

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    if (layout === 'off' || e.props.hasSurvey) return next(e)
    if (e.surface === 'desktop') {
      const els: any = $.ui.resolve(e)
      return buildDesktop($, els, e.props.bodyColumns ?? 100, !!e.props.isWorking)
    }
    if (e.surface !== 'terminal') return next(e)
    // bodyColumns 已经扣掉引擎右端放 [-] 的 5 格; maxRows = 这条横栏最多能占几行
    // v0.16: 终端版这里只画散步道 (面板固定在输入框下方). 按 maxRows 退档:
    //   >=4: 天空行 + 3 行版; 3: 天空行 + 2 行版; 2: 2 行版 (没有天空行); 1: 1 行版; 0: 不画
    const W = e.props.bodyColumns ?? 100
    const maxRows = e.props.maxRows ?? 0
    const total = crabOn ? Math.min(4, maxRows) : 0
    if (total < 1) return next(e)
    const sky = total >= 3
    const rows = (sky ? total - 1 : total) as Rows
    return walkwayView($, $.ui.resolve(e), W, rows, sky, !!e.props.isWorking)
  })

async function buildDesktop($: any, els: any, cols: number, working: boolean) {
  const { Box, Svg } = els
  const s = await snapshot($, working)
  // 会在重置前用完 -> "40m 用完" (红色), 否则只写重置倒计时 "1h20m"; tick = 窗口已过比例 (条上的时间刻度)
  const limitMeter = (l: Limit | undefined, p: Pace | undefined): DashData['five'] =>
    p?.willRunOut && p.runOutIn !== undefined
      ? { pct: l?.percentUsed, extra: durShort(p.runOutIn) + ' 用完', warn: true, tick: p.elapsedFrac }
      : { pct: l?.percentUsed, extra: p?.resetIn !== undefined ? durShort(p.resetIn) : '', tick: p?.elapsedFrac }
  const ag = agentsNow ? `  +${agentsNow} 个子代理` : ''
  // 客户端只显示到分钟: 每秒变一次会让图片每秒重换一次
  const ran = s.now - turnStartedAt
  const status: DashData['status'] = working
    ? { text: toolLabel(currentTool) + (ran >= 60_000 ? '  ' + durShort(ran) : '') + ag, tone: 'work' }
    : agentsNow
      ? { text: agentsNow + ' 个子代理在跑', tone: 'agents' }
      : lastTurnMs
        ? { text: '✓ 上一轮 ' + dur(lastTurnMs) + '，' + lastTurnTools + ' 次工具', tone: 'idle' }
        : { text: '✓ 待命', tone: 'idle' }
  const top = Object.entries(toolCounts)
    .sort((a, b) => b[1] - a[1])
    .slice(0, 3)
    .map(([t, n]) => shortTool(t) + ' ' + n)
    .join('  ')
  const counted = tokState === 'ready' || tokState === 'failed'
  const data: DashData = {
    model: prettyModel(modelId),
    effort,
    project: project || '--',
    branch: branch ? branch + (dirty ? ' *' + dirty : '') : '',
    session: dur(s.now - (s.u.startedAt ?? s.now)),
    cost: s.u.cost ? '$' + s.u.cost.usd.toFixed(2) : '',
    ctx: { pct: s.pct, extra: tok(s.ctxTokens) + ' / ' + tok(s.ctxWindow) },
    five: limitMeter(s.five, s.p5),
    week: limitMeter(s.week, s.pw),
    status,
    tools: top,
    tokenTotal: counted ? big(tokTotal(s.tk)) : '统计中..',
    tokenOutput: counted ? big(s.tk.output) : '',
  }
  const sc = s.scene
  // 可用宽度: 横栏格数 x 每格像素, 减去螃蟹和间距; 太窄就只放一行用量条
  lastDesktopCols = cols
  const crabScale = 5
  const crabW = 16 * crabScale
  // 估计的可用宽度; 故意多画 5% + 20 像素, 让客户端总是把它等比缩到正好贴满卡片, 右边缘和卡片对齐
  const est = Math.round((cols || 100) * DESKTOP_PX_PER_COL) - crabW - 15
  const dashW = Math.max(340, Math.min(1040, Math.round(est * 1.05) + 20))
  const compact = layout === 'compact' || est < 380
  // 螃蟹直接画在卡片上 (没有底板/边框); 当普通图片显示, SMIL 动画照样会动, 必须给明确宽高
  const crab = crabSvg(
    {
      // 慌张会把睡着的螃蟹叫醒 (和终端版同一套优先级)
      mode: sc.celebrating ? 'celebrate' : working ? 'work' : sc.sleeping && mood !== 'panic' ? 'sleep' : 'idle',
      kind: sc.kind,
      heat: lastPct >= 95 ? 'crit' : lastPct >= 80 ? 'hot' : 'ok',
      agents: Math.min(3, agentsNow),
      mood,
    },
    compact ? 3 : crabScale,
  )
  const crabSize = compact ? { w: 48, h: 21 } : { w: crabW, h: 7 * crabScale }
  const dash = dashSvg(data, { compact, width: dashW })
  return (
    <Box key="hud-d-row" flexDirection="row" alignItems="center" columnGap={2}>
      <Box key="hud-d-crab" flexShrink={0}>
        <Svg key="crab-svg" source={crab} alt="用量面板的小螃蟹" width={crabSize.w} height={crabSize.h} />
      </Box>
      {/* 估计的宽度偏大时, 这个容器允许仪表盘等比缩小, 不会被截断 */}
      <Box key="hud-d-dash" flexGrow={1} flexShrink={1} minWidth={0} overflow="hidden">
        <Svg key="dash-svg" source={dash} alt={`上下文 ${data.ctx.pct ?? '--'}%，5小时 ${data.five.pct ?? '--'}%，本周 ${data.week.pct ?? '--'}%`} />
      </Box>
    </Box>
  )
}