usage-mod

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

    const data = await read($, usage)
    const at = await read($, now)
    const isOpen = await read($, statsOpen)
    const { total, recent } = await read($, stats)
    const hidden = await read($, hiddenSeries)

    const five = find(data.limits, 'five_hour')
    const week = find(data.limits, 'seven_day')
    const elements = $.ui.resolve(e)
    const { Box, Button, Text } = elements
    // 折线图是 SVG,只有桌面端等远程界面有这个元素。
    const Svg = 'Svg' in elements ? elements.Svg : undefined
    const isTerminal = e.surface === 'terminal'

    if (e.props.bodyColumns < 78) {
      const short = [
        data.context === undefined ? `${L.shortCtx} —` : `${L.shortCtx} ${Math.round(data.context)}%`,
        five === undefined ? `${L.shortFive} —` : `${L.shortFive} ${Math.round(five.percentUsed)}%`,
        week === undefined ? `${L.shortWeek} —` : `${L.shortWeek} ${Math.round(week.percentUsed)}%`,
      ].join(' · ')

      return (
        <Box width="100%" justifyContent="center">
          <Text>{short}</Text>
        </Box>
      )
    }

    // 三块等宽,块之间各留一格;减去的是两个按钮和四处间隙占的格数,不再额外留边距。
    const cells = Math.max(20, Math.floor((e.props.bodyColumns - 4 - 2 * BUTTON_CELLS) / 3))

    // 几何全部交给 Box:底色块铺满整块,橙色填充按百分比取宽度。
    // 文字画两层、各裁一半:填充内是深色字,填充外是浅色字,在填充边界处切开。
    // 不用空格撑宽度,因为桌面端字体不是等宽的,空格撑出来的宽度和 Box 的宽度对不上。
    const block = (key: string, label: string, percent: number | undefined, detail: string) => {
      const text = percent === undefined ? `${label} —` : `${label} ${Math.round(percent)}%${detail === '' ? '' : ` · ${detail}`}`
      const filled = percent === undefined ? 0 : percent <= 0 ? 0 : Math.min(cells, Math.max(1, Math.round((percent / 100) * cells)))
      const layer = (color: string, shift: number) => (
        <Box position="absolute" top={0} left={shift} width={cells} height={1} justifyContent="center">
          <Text color={color} wrap="truncate-end">
            {text}
          </Text>
        </Box>
      )

      return (
        <Box key={key} width={cells} height={1} backgroundColor={WARM}>
          {filled > 0 && (
            <Box position="absolute" top={0} left={0} width={filled} height={1} backgroundColor={ORANGE} overflow="hidden">
              {layer(DARK, 0)}
            </Box>
          )}
          {filled < cells && (
            <Box position="absolute" top={0} left={filled} width={cells - filled} height={1} overflow="hidden">
              {layer(LIGHT, -filled)}
            </Box>
          )}
        </Box>
      )
    }

    const ctxDetail = data.tokens === undefined ? '' : `${tokensText(data.tokens)} / ${tokensText(data.window)}`
    const fiveDetail = five === undefined ? '' : `${remaining(L, five.resetsAt, at)} · ${clock(L, five.resetsAt, at)}`
    const weekDetail = week === undefined ? '' : `${remaining(L, week.resetsAt, at)} · ${clock(L, week.resetsAt, at)}`

    const compact = async () => {
      $.ui.toast(L.compacting)
      try {
        // 不用 $.session.compact():桌面应用的会话是 SDK 无头会话,引擎不让插件直接调它。
        // 改成像用户输入 /compact 那样运行这条命令;引擎文档说回复进行中会排队到这一轮结束。
        await $.command.run({ command: 'compact' })
        $.ui.toast(L.compacted)
      } catch (err) {
        $.ui.toast(L.notCompacted(err instanceof Error ? err.message : String(err)))
      }
    }

    const toggleStats = () => void update($, statsOpen, open => !open)
    const toggleSeries = (key: SeriesKey) =>
      void update($, hiddenSeries, old => (old.includes(key) ? old.filter(one => one !== key) : [...old, key]))

    // 展开的明细:顶上是合计,中间是折线图,下面是曲线开关。画在横条里、用量条的上方,位置固定。
    const stat = (key: string, label: string, value: string) => (
      <Box key={key} gap={1}>
        <Text dimColor>{label}</Text>
        <Text bold>{value}</Text>
      </Box>
    )

    // 盖在折线图上的一排透明感应区,每轮一个,宽度按比例(flexGrow)和图里的点对齐(图是固定像素宽,Box 的宽度是格数;
    // 百分比宽度只收整数,量不准,所以按像素数当比例分)。鼠标移到某一轮上,同组(scope)的东西一起亮:这一列变成淡淡的高亮,图下面固定一行里显示那一轮的明细。
    // 悬停是应用自己处理的,没有任何东西回到插件,所以不会触发横条重画,图也就不会闪。
    // 横条的高度是应用定的(最多窗口的一半,放不下就滚动),所以图的高度跟着可用行数走,版面压紧:
    // 标题、曲线开关、关闭按钮一行,合计一行,其余都给图。一行大约按 20 像素算。
    const chartW = Math.round(Math.min(CHART_MAX_W, Math.max(CHART_MIN_W, e.props.bodyColumns * CHART_PX_PER_CELL)))
    const chartH = Math.max(140, Math.min(CHART_MAX_H, (e.props.maxRows - 5) * 20))

    // 第一行:合计在整行里居中,标题贴左、共几轮贴右(都不占位置)。放不下的东西按顺序让位:
    // 先去掉标题,再把"共几轮"挪到第二行,还不够就去掉合计里的命中率、新增输入。英文、日文的文字比中文长得多,所以按实际文字量算。
    const cols = e.props.bodyColumns
    const GAP = 3
    let items: Array<[string, string, string]> = [
      ['in', L.sIn, countText(total.input)],
      ['out', L.sOut, countText(total.output)],
      ['create', L.sCreate, countText(total.cacheCreate)],
      ['hit', L.sHit, countText(total.cacheRead)],
      ['rate', L.sRate, hitRate(total.input, total.cacheRead, total.cacheCreate)],
    ]
    const rowCells = (list: typeof items) => list.reduce((n, [, label, value]) => n + cellsOf(label) + 1 + cellsOf(value), 0) + GAP * (list.length - 1)
    for (const drop of ['rate', 'in']) if (rowCells(items) + 4 > cols) items = items.filter(([key]) => key !== drop)
    const freeSide = (cols - rowCells(items)) / 2
    const turnsText = L.statsTurns(total.turns)
    const showTitle = total.turns === 0 || freeSide >= cellsOf(L.statsTitle) + 2
    const showTurnsTop = freeSide >= cellsOf(turnsText) + 2

    const panel = (
      <Box key="stats-panel" flexDirection="column" width="100%" alignItems="center">
        {/* 第一行:五项合计居中,标题贴左、共几轮贴右;第二行:四条曲线的开关,居中。没有关闭按钮,收起靠右下角的图标。放不下时的让位顺序见上面。 */}
        <Box width="100%" justifyContent="center">
          {showTitle && (
            <Box position="absolute" top={0} left={0}>
              <Text bold>{L.statsTitle}</Text>
            </Box>
          )}
          {total.turns > 0 && (
            <Box gap={GAP}>{items.map(([key, label, value]) => stat(key, label, value))}</Box>
          )}
          {total.turns > 0 && showTurnsTop && (
            <Box position="absolute" top={0} right={0}>
              <Text bold>{turnsText}</Text>
            </Box>
          )}
        </Box>
        {total.turns === 0 ? (
          <Text dimColor>{L.statsEmpty}</Text>
        ) : (
          <Box flexDirection="column" width="100%" alignItems="center">
            {Svg !== undefined && (
              <Box width="100%" justifyContent="center" gap={2}>
                {!showTurnsTop && (
                  <Box position="absolute" top={0} right={0}>
                    <Text bold>{turnsText}</Text>
                  </Box>
                )}
                {SERIES.map(one => (
                  <Box key={one.key} gap={1}>
                    <Text color={one.color} dimColor={hidden.includes(one.key)}>
                      ●
                    </Text>
                    <Button key={`toggle-${one.key}`} label={seriesLabel(L, one.key)} plain dimColor={hidden.includes(one.key)} onPress={() => toggleSeries(one.key)} />
                  </Box>
                ))}
              </Box>
            )}
            {Svg === undefined ? (
              <Text dimColor>{L.chartDesktopOnly}</Text>
            ) : (