usage

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    const usage = await read($, usageAtom)
    if (e.props.hasSurvey || usage === null) return next(e)
    const nowMs = await read($, nowAtom)
    const history = await read($, historyAtom)
    const effort = await read($, effortAtom)
    const ui = $.ui.resolve(e)
    const { Box, Text } = ui
    const isNarrow = e.props.bodyColumns < 80
    const hasSvg = e.surface !== 'terminal' && 'Svg' in ui

    // Desktop surfaces draw the line icons; the terminal a glyph in the same color.
    const icon = (name: IconName, color: string) =>
      hasSvg ? (
        <ui.Svg source={iconSvg(name, color)} alt={name} width={14} height={14} />
      ) : (
        <Text color={color}>{ICON_GLYPH[name]}</Text>
      )

    const chip = (key: string, tone: Tone, children: RenderChildren) => (
      <Box key={key} flexDirection="row" alignItems="center" columnGap={1} backgroundColor={tone.bg} paddingX={1}>
        {children}
      </Box>
    )
    const divider = (tone: Tone) => <Text color={tone.line}>│</Text>

    const ctx = usage.ctxPct
    const prev = history.length >= 2 ? history[history.length - 2] : undefined
    const last = history.length >= 1 ? history[history.length - 1] : undefined
    const delta = prev !== undefined && last !== undefined ? last - prev : 0

    const rate = (key: string, name: IconName, tone: Tone, w: LimitWindow | undefined, days: boolean) => {
      if (!w) return chip(key, tone, [icon(name, tone.fg), <Text color={tone.dim}>--</Text>])
      const until = untilStr(w.resetsAt, nowMs, days)
      return chip(key, tone, [
        icon(name, tone.fg),
        !isNarrow && meter(Text, w.pct, tone),
        <Text color={levelOf(w.pct) === 0 ? T_TEXT : colorOf(w.pct)} bold>{w.pct}%</Text>,
        until && divider(tone),
        until && <Text color={T_TEXT}>{until}</Text>,
      ])
    }

    const chips = [
      !isNarrow &&
        chip('model', TONE_MODEL, [
          icon('model', TONE_MODEL.fg),
          <Text color={T_TEXT} bold>{usage.model}</Text>,
          effort && divider(TONE_MODEL),
          effort && <Text color={TONE_MODEL.fg}>{effort}</Text>,
        ]),
      !isNarrow &&
        chip('dir', TONE_DIR, [
          icon('folder', TONE_DIR.fg),
          <Text color={T_TEXT}>{usage.dir}</Text>,
          usage.git && divider(TONE_DIR),
          usage.git && <Text color={C_BRANCH}>🌿 {usage.git.branch}</Text>,
          usage.git?.worktree && <Text color={C_ORANGE}>wt:{usage.git.worktree}</Text>,
        ]),
      ctx === undefined
        ? chip('ctx', TONE_DIR, [<Text color={TONE_DIR.dim}>ctx --</Text>])
        : chip('ctx', TONE_CTX, [
            <Text color={TONE_CTX.fg}>ctx</Text>,
            !isNarrow && meter(Text, ctx, TONE_CTX),
            <Text color={levelOf(ctx) === 0 ? T_TEXT : colorOf(ctx)} bold>{ctx}%</Text>,
            !isNarrow && Math.abs(delta) >= 1000 && (
              <Text color={TONE_CTX.dim}>{delta > 0 ? '▲' : '▼'}{fmtTokens(Math.abs(delta))}</Text>
            ),
          ]),
      rate('h5', 'gauge', TONE_H5, usage.h5, false),
      rate('d7', 'calendar', TONE_D7, usage.d7, true),
    ]

    const band = (
      <Box flexDirection="row" flexWrap="wrap" columnGap={1} rowGap={0} alignItems="center">
        {chips.filter(Boolean)}
      </Box>
    )

    // Share the band: whatever the plugins beneath draw (e.g. typo-picker) goes under the chips.
    const below = await next(e)
    if (!below) return band
    return (
      <Box flexDirection="column">
        {band}
        {below}
      </Box>
    )
  })

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const ui = $.ui.resolve(e)
    const { Box, Text, Button } = ui
    const b = await read($, breakdownAtom)
    const isLoading = await read($, loadingAtom)

    const buttons = (
      <Box flexDirection="row" gap={1} marginTop={1}>
        <Button key="refresh" label="重新估算" hotkey="r" onPress={() => loadBreakdown($, 'summary')} />
        <Button key="full" label="精確計算" hotkey="f" onPress={() => loadBreakdown($, 'full')} />
        <Button key="close" label="關閉" hotkey="q" onPress={() => $.ui.close({ id: PANE })} />
      </Box>
    )

    if (b === null) {
      return (
        <Box flexDirection="column">
          <Text dimColor>{isLoading ? '計算中…' : '尚無資料'}</Text>
          {buttons}
        </Box>
      )
    }

    const slices = pieSlices(b)
    const legend = (
      <Box flexDirection="column" justifyContent="center">
        {slices.map(s => (
          <Text>
            <Text color={s.color}>■</Text> {s.name.padEnd(18).slice(0, 18)}
            <Text dimColor> {fmtTokens(s.tokens).padStart(6)} {String(pctOf(s.tokens, b.max)).padStart(3)}%</Text>
          </Text>
        ))}
      </Box>
    )

    // The terminal draws a real pie; other surfaces get one 100% stacked bar.
    const chart =
      e.surface === 'terminal' && 'Raster' in ui ? (
        <ui.Raster key="pie" columns={PIE_COLS} rows={PIE_COLS / 2} cells={pieCells(slices, PIE_COLS)} />
      ) : (
        <Text>
          {slices.map(s => (
            <Text color={s.color}>{'█'.repeat(Math.max(s.tokens > 0 ? 1 : 0, Math.round((s.tokens / b.max) * 40)))}</Text>
          ))}
        </Text>
      )

    return (
      <Box flexDirection="column">
        <Text bold>
          已用 {fmtTokens(b.total)} / 自動壓縮 {fmtTokens(b.max)}（<Text color={colorOf(b.pct)}>{b.pct}%</Text>）
          <Text dimColor> {b.detail === 'full' ? '精確' : '估算'}{isLoading ? '，更新中…' : ''}</Text>
        </Text>
        <Box flexDirection="row" gap={3} marginTop={1}>
          {chart}
          {legend}
        </Box>
        <Box flexDirection="column" marginTop={1}>
          {b.memory.length > 0 && <Text dimColor>最大的記憶檔：</Text>}
          {b.memory.map(m => (
            <Text dimColor wrap="truncate-start">
              {'  '}{fmtTokens(m.tokens).padStart(7)} {m.path}
            </Text>
          ))}
        </Box>
        {buttons}
      </Box>
    )
  })