hop

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    const { value: c = IDLE } = await $.state.get(CLAUDE)
    if (!c.hint || c.needsYou || !c.busy || hintMuted || e.props.hasSurvey) return next(e)
    const panes = await $.ui.panes().catch(() => [])
    if (panes.some(p => p.id === PANE && p.isPlaced)) return next(e)
    const { Box, Text, Button } = $.ui.resolve(e)
    return (
      <Box flexDirection="row" gap={1} alignItems="center">
        <Text dimColor>{tr().bandBusy}</Text>
        <Button
          key="hop-open"
          label={tr().bandPlay}
          variant="primary"
          onPress={() =>
            void $.ui.open({ id: PANE, title: TITLE, focus: true }).then(() => $.state.set(CLAUDE, { ...c, hint: false }))
          }
        />
        <Button
          key="hop-mute"
          label={tr().bandMute}
          plain
          dimColor
          onPress={() => {
            hintMuted = true
            void $.state.set(CLAUDE, { ...c, hint: false })
          }}
        />
      </Box>
    )
  })

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    // 画面板出了错就把原因直接画出来，免得桌面端只显示一句「Nothing to show yet」
    try {
    const t = $.ui.resolve(e)
    const { Box, Text, Button } = t
    paneFocused = e.props.isFocused
    // 画布跟着面板大小走：面板越大，场景越大、看得越远；方块和小人保持原大小（不是把图片拉伸）
    // 面板只告诉插件格数，按一格约 7.5 像素、一行约 20 像素估算
    const { value: peek = EMPTY } = await $.state.get(VIEW)
    const { value: lbPeek = NO_BOARD } = await $.state.get(BOARD)
    // 画面下面的控件要占几行：状态行、输入框、分数行，结束时再加排行榜
    const controlRows = 6 + (peek.game?.isOver ? (lbPeek.joined ? 17 : 7) : 0)
    const canvasW = Math.min(1400, (e.props.bodyColumns || 60) * 7.5 - 24)
    const roomH = e.viewport?.rows ? (e.viewport.rows - controlRows) * 20 : 360
    // 不要竖着拉长：高度最多是宽度的 0.82 倍（原画面的比例）
    const canvasH = Math.min(canvasW * 0.82, roomH, 900)
    setCanvas(canvasW, canvasH)
    const sceneW = Math.max(440, Math.round(canvasW))
    const sceneH = Math.max(360, Math.round(canvasH))
    const { value: view = EMPTY } = await $.state.get(VIEW)
    const { value: board = NO_BOARD } = await $.state.get(BOARD)
    const { value: claude = IDLE } = await $.state.get(CLAUDE)
    const game = view.game

    if (!game) return <Text dimColor>{tr().loading}</Text>
    await $.state.get(TICK)
    const now = await $.clock.now()
    const svg =
      view.phase === 'charge'
        ? chargeFrame(game, now - view.chargeAt)
        : view.phase === 'jump' && view.before && view.jump && now - view.jumpAt < ANIM_MS
          ? jumpFrame(view.before, game, view.jump, now - view.jumpAt, now)
          : stillFrame(game, now)
    if (e.surface === 'terminal' || !('Svg' in t) || !('Input' in t)) {
      return <Text dimColor>{tr().desktopOnly}</Text>
    }

    // 输入框里每多一个空格（按住时系统会不停地打）都会走到这里
    const press = () =>
      void $.clock.now().then(async now => {
        if (holdStart === 0) {
          const { value: v = EMPTY } = await $.state.get(VIEW)
          if (!v.game || v.game.isOver) return
          holdStart = now
          lastPress = now
          presses = 1
          await $.state.set(VIEW, { ...v, phase: 'charge', chargeAt: now, startedAt: v.startedAt || now })
          if (!muted) {
            const s = $.process.spawn({ argv: ['afplay', '-v', VOLUME, `${$.plugin.root}/sounds/charge.wav`] })
            chargeSound = s
            void (async () => {
              try {
                for await (const _ of s) {
                  // 只是让它响着；松手时 return() 结束循环，afplay 随之退出
                }
              } catch {
                // 播不了就算了
              }
            })()
          }
          return
        }
        lastPress = now
        presses += 1
      })

    const restart = () =>
      void $.clock.now().then(async now => {
        isOverNow = false
        const seed = Math.floor(now % 2147483647)
        const seen = ((await $.store.get('seen')) ?? []) as string[]
        const best = Math.max(game.best, Number((await $.store.get('best')) ?? 0))
        await $.state.set(VIEW, {
          ...EMPTY,
          game: newGame(seed, best, queueFor(seen, seed).slice(0, QUEUE)),
          pad: view.pad + 1,
        })
        await $.state.get(BOARD).then(({ value: b = NO_BOARD }) => $.state.set(BOARD, { ...b, status: '' }))
      })

    return (
      <Box flexDirection="column" gap={1}>
        {(claude.needsYou || claude.done) && (
          <Box flexDirection="row" justifyContent="space-between" alignItems="center">
            <Text bold color={claude.needsYou ? '#E63946' : '#2A9D8F'}>
              {claude.needsYou ? tr().needsYou : tr().doneNow}
            </Text>
            <Button
              key="back"
              label={tr().backToClaude}
              plain
              onPress={() =>
                void $.state
                  .set(CLAUDE, { ...claude, done: false })
                  .then(() => $.ui.close({ id: PANE }))
                  .catch(() => undefined)
              }
            />
          </Box>
        )}
        {/* 不加 isInteractive：当普通图片显示，换图不闪 */}
        <t.Svg source={svg} alt={`蹦一蹦，当前 ${game.score} 分`} width={sceneW} height={sceneH} />
        <Box flexDirection="row" gap={1} alignItems="center">
          {game.isOver ? (
             <Button key="restart" label={tr().restart} hotkey={board.joined ? 'r' : undefined} variant="primary" autoFocus onPress={restart} />
          ) : (
            // 只有输入框收得到按住空格时的连续输入；宽度固定，空格攒多了也不会把框撑长
            <Box width={34}>
              <t.Input
                key={`pad-${view.pad}`}
                value=""
                placeholder={tr().placeholder}
                autoFocus
                onInput={() => press()}
                onSubmit={() => undefined}
              />
            </Box>
          )}
          <Text dimColor>{view.hint}</Text>
        </Box>
        {game.isOver && (
          <Box flexDirection="column" borderStyle="round" borderDimColor paddingX={1}>
            {board.joined ? (
              <Box flexDirection="column">
                {/* 当前榜单用醒目的字，其余两个是可点的按钮；右边是加载状态 */}
                <Box flexDirection="row" justifyContent="space-between" alignItems="center">
                  <Box flexDirection="row" gap={2} alignItems="center">
                    {(['today', 'week', 'all'] as const).map(tab =>
                      board.tab === tab ? (
                        <Text key={`tab-${tab}`} bold color="#D97757">
                          {tr().lbTabs[tab]}
                        </Text>
                      ) : (
                        <Button
                          key={`tab-${tab}`}
                          label={tr().lbTabs[tab]}
                          plain
                          dimColor
                          onPress={() => void lb?.refresh(tab)}
                        />
                      ),
                    )}
                  </Box>
                  {board.busy && <Text dimColor>{board.slow ? tr().lbSlow : tr().lbBusy}</Text>}
                </Box>
                {board.entries.length === 0 ? (
                  <Text dimColor>{board.busy ? tr().lbLoading : board.status !== '' ? '' : tr().lbEmpty}</Text>
                ) : (
                  <Box flexDirection="column" width={32}>
                    {board.entries.map(en => (
                      <Box key={`row-${en.rank}-${en.nickname}`} flexDirection="row" justifyContent="space-between">
                        <Text bold={en.isMe} color={en.isMe ? '#D97757' : undefined} dimColor={board.busy && !en.isMe}>
                          {`${String(en.rank).padStart(2, ' ')}  ${en.nickname}`}
                        </Text>
                        <Text bold={en.isMe} color={en.isMe ? '#D97757' : undefined} dimColor={board.busy && !en.isMe}>
                          {String(en.score)}
                        </Text>
                      </Box>
                    ))}
                  </Box>