usage-pet

  on('ui.render', { component: 'Pane', requestId: CARD_PANE }, async ($, e) => {
    const lang = await langOf($, choice)
    const data = await cardData($, seasonal)
    if (e.surface === 'terminal') {
      const { Text } = $.ui.resolve(e)

      return <Text>{cardAlt(data, lang)}</Text>
    }
    const { Svg } = $.ui.resolve(e)
    const width = Math.min(CARD_W, Math.max(320, (e.viewport?.columns ?? 80) * PX_PER_COLUMN - 24))

    return <Svg source={cardSvg(data, lang)} alt={cardAlt(data, lang)} width={width} height={Math.round((width * CARD_H) / CARD_W)} />
  })

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

    const bars = await read($, barsAtom)
    const lang = await langOf($, choice)
    const pet = petView(await read($, petAtom), lang, seasonal && isHalloween(new Date()), await read($, askAtom))

    // 桌面端的 Client 在 2.1.286 上一律 10 秒超时（缺 CSP nonce，同见 #99211），所以桌面只用 Svg
    if (e.surface === 'desktop') {
      const { Box, Button, Svg } = $.ui.resolve(e)
      // 不设大下限：以前最少 560px，窗口窄时信息栏比可用宽度还宽，按钮就被挤到下一行。
      // 窄了由 bandSvg 自己逐级收（去副标题 → 只剩圆环），按钮始终在同一行右侧
      const width = Math.max(MIN_BAND_W, e.props.bodyColumns * PX_PER_COLUMN - 8 - BUTTON_W)
      const pinned = await read($, pinnedAtom)
      const isMini = !pinned && !(await read($, expandedAtom))
      // 收起时按「展开」= 一直展开；展开时按「收起」= 立刻收起并回到自动模式
      // 按的那一刻再读状态，不用画的时候记下的 isMini（中间可能已经重画过）
      const toggle = async () => {
        expandToken++
        const nowMini = !(await read($, pinnedAtom)) && !(await read($, expandedAtom))
        await update($, pinnedAtom, () => nowMini)
        await update($, expandedAtom, () => nowMini)
      }

      return (
        <Box flexDirection="row" alignItems="center" flexWrap="nowrap">
          <Svg
            source={bandSvg(bars, e.props.isWorking, width, isMini, lang, pet)}
            alt={bandAlt(bars.to, e.props.isWorking, lang)}
            width={width}
            height={isMini ? H_MINI : H}
            isInteractive
          />
          <Button key="toggle" label={isMini ? ICON_EXPAND : ICON_COLLAPSE} plain onPress={() => void toggle()} />
        </Box>
      )
    }

    if (e.surface === 'terminal') {
      const { Box, Client } = $.ui.resolve(e)

      return (
        <Box paddingX={1}>
          <Client key="stats" module="./stats.tsx" props={{ snap: bars.to, lang }} flexGrow={1} />
        </Box>
      )
    }

    return next(e)
  })