usage-pet-light

  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)

    // 桌面端的 Client 在 2.1.286 上一律 10 秒超时（缺 CSP nonce，同见 #99211），所以桌面只用 Svg
    if (e.surface === 'desktop') {
      const { Box, Button, Svg } = $.ui.resolve(e)
      const width = Math.max(560, 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">
          <Svg
            source={bandSvg(bars, e.props.isWorking, width, isMini, lang)}
            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)
  })