usage-hud

  on('ui.render', { component: 'Pane', requestId: SHOP }, async ($, e) => {
    const p = (await read($, game)).progress ?? progressOf(await $.store.get(PROGRESS))
    const level = levelOf(p.xp)
    const worn = outfitOf(p, level)
    const shelf = shelfOf(p)
    // The focus starts on the first thing Clawd has, reading the slots top to bottom.
    const first = SLOTS.flatMap(slot => shelf.filter(s => s.slot === slot)).find(s => s.state === 'wearing' || s.state === 'owned')?.id
    const coins = `${p.coins.toLocaleString('en-US')} coins`
    const wearing = SLOTS.flatMap(slot => (worn[slot] ? [called(worn[slot])] : []))

    if (e.surface === 'terminal') {
      const { Box, Button, Text } = $.ui.resolve(e)
      const label = (s: Shelf) =>
        s.state === 'wearing' ? `● ${s.name}` : s.state === 'buy' || s.state === 'short' ? `${s.name} ${s.price}c` : s.state === 'locked' ? `${s.name} Lv${s.level}` : s.name
      return (
        <Box flexDirection="column">
          <Text>
            <Text color={CLAWD}>{FACES.happy}</Text>
            <Text bold>{`  Level ${level} ${titleOf(level)}`}</Text>
            <Text dimColor> · </Text>
            <Text color="yellow">{coins}</Text>
            <Text dimColor>{` · wearing ${wearing.join(', ') || 'nothing'}`}</Text>
          </Text>
          {SLOTS.map(slot => (
            <Box key={slot} flexDirection="row" gap={1}>
              <Box width={8} flexShrink={0}>
                <Text dimColor>{SLOT_NAMES[slot]}</Text>
              </Box>
              <Box flexDirection="row" flexWrap="wrap" columnGap={1} flexShrink={1}>
                {shelf
                  .filter(s => s.slot === slot)
                  .map(s => {
                    const change = pressOf(s)
                    return change ? (
                      <Button
                        key={`item:${s.id}`}
                        label={label(s)}
                        variant={s.state === 'wearing' ? 'primary' : undefined}
                        autoFocus={s.id === first || undefined}
                        onPress={() => shopPress($, change, s.id)}
                      />
                    ) : (
                      <Text key={`item:${s.id}`} dimColor>{` ${label(s)} `}</Text>
                    )
                  })}
                {slot === 'scene' ? (
                  <Text key="scene-note" dimColor>
                    (drawn on the desktop app's band, not here)
                  </Text>
                ) : null}
              </Box>
            </Box>
          ))}
          <Box flexDirection="row" flexWrap="wrap" columnGap={2}>
            <Button key="none" label="take all off" plain dimColor onPress={() => shopPress($, dressed, 'none')} />
            <Text dimColor>Tab or arrows move · Enter wears, buys or takes off · Esc closes</Text>
          </Box>
        </Box>
      )
    }

    const { Box, Button, Svg, Text } = $.ui.resolve(e)
    // A narrow sidebar stacks the header under Clawd, so the text keeps its width and the button stays in view.
    const wide = (e.props.bodyColumns || 100) * PX_PER_COLUMN >= SHOP_WIDE
    return (
      <Box flexDirection="column" gap={1} padding={1}>
        <Box flexDirection={wide ? 'row' : 'column'} alignItems={wide ? 'center' : 'flex-start'} gap={wide ? 2 : 1}>
          <Svg source={wardrobeSvg(worn, 3)} alt={`Clawd wearing ${wearing.join(', ') || 'nothing'}`} width={132} height={84} />
          <Box flexDirection="column" alignItems="flex-start" flexGrow={1} flexShrink={1} gap={1}>
            <Box flexDirection="column">
              <Text bold>{`Level ${level} · ${titleOf(level)}`}</Text>
              <Text color={COLORS.golden}>{coins}</Text>
              <Text dimColor>{`1 coin per ${COINS.perTokens.toLocaleString('en-US')} tokens Claude writes, ${COINS.level} per level, ${COINS.badge} per badge`}</Text>
            </Box>
            <Button key="none" label="Take everything off" onPress={() => shopPress($, dressed, 'none')} />
          </Box>
        </Box>
        {SLOTS.map(slot => (
          <Box key={slot} flexDirection="column" gap={1}>
            <Text bold>{SLOT_NAMES[slot]}</Text>
            <Box flexDirection="row" flexWrap="wrap" gap={1}>
              {shelf
                .filter(s => s.slot === slot)
                .map(s => {
                  const change = pressOf(s)
                  // Each card shows Clawd trying the item on with the rest of his outfit.
                  return (
                    <Box
                      key={`card:${s.id}`}
                      flexDirection="column"
                      alignItems="center"
                      gap={1}
                      padding={1}
                      borderStyle="round"
                      borderColor={s.state === 'wearing' ? CLAWD : undefined}
                      borderDimColor={s.state !== 'wearing'}
                    >
                      <Svg source={wardrobeSvg({ ...worn, [slot]: s.id }, 2.5)} alt={`Clawd in the ${called(s.id)}`} width={110} height={70} />
                      <Text dimColor={!change}>{s.name}</Text>
                      {change ? (
                        <Button
                          key={`item:${s.id}`}
                          label={s.state === 'wearing' ? 'Take off' : s.state === 'owned' ? 'Wear' : `Buy · ${s.price?.toLocaleString('en-US')}`}
                          variant={s.state === 'buy' ? 'primary' : 'secondary'}
                          onPress={() => shopPress($, change, s.id)}
                        />
                      ) : (
                        <Text dimColor>{s.state === 'locked' ? `Level ${s.level}` : `${s.price?.toLocaleString('en-US')} coins`}</Text>
                      )}
                    </Box>
                  )
                })}
            </Box>
          </Box>
        ))}
      </Box>
    )
  })

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    if (e.props.hasSurvey || (await read($, isHidden))) return next(e)
    const { cur, prev } = await read($, gauges)
    if (!cur) return next(e)

    const now = await $.clock.now()
    const list = tanksOf(cur, prev, now)
    const { progress, burst, gain } = await read($, game)
    const view = progress ? gameViewOf(progress, now, burst, gain) : undefined
    const { latest, phase } = await read($, updates)
    const updateLabel = !latest ? undefined : phase === 'installing' ? 'updating…' : phase === 'restart' ? `restart for ${latest}` : undefined
    const onUpdate = async () => $.ui.toast(await installUpdate($))

    // Every surface but the terminal (desktop, VS Code, the Claude mobile app) draws Svg.
    if (e.surface !== 'terminal') {
      const { Box, Button, Svg, Text } = $.ui.resolve(e)
      const columns = e.props.bodyColumns || e.viewport?.columns || 100
      // The image can't take a press, so the refresh control is a real Button beside it.
      const offer = latest && phase === 'idle' ? `Update to ${latest}` : updateLabel
      const width = Math.max(160, Math.round(columns * PX_PER_COLUMN) - REFRESH_W - (offer ? offer.length * 7 + 28 : 0))
      const doing = e.props.isWorking ? await read($, activity) : 'idle'
      const alt = (view ? [`Level ${view.level}`].concat(view.coins !== undefined ? [`${view.coins} coins`] : []) : []).concat(list.map(t => `${t.tag} ${Math.round(t.pct)}%`)).join(', ')
      // A backdrop runs on to the right edge, under the refresh Button laid over its end;
      // the figures still keep clear of it. With an update offer in the row, the usual layout.
      if (view?.outfit?.scene && !offer) {
        const full = width + REFRESH_W
        return (
          <Box flexDirection="row" alignItems="center" position="relative">
            <Svg source={pixelSvg(list, cur.usd, doing, width, view, full)} alt={alt} width={full} height={HEIGHT} />
            <Box position="absolute" right={0} top={0}>
              <Button key="refresh" label="↻" plain dimColor onPress={() => refresh($)} />
            </Box>
          </Box>
        )
      }
      // Drawn as an image, not an interactive frame: it stays transparent, and SMIL still plays.
      return (
        <Box flexDirection="row" alignItems="center" gap={1}>
          <Svg
            source={pixelSvg(list, cur.usd, doing, width, view)}
            alt={alt}
            width={width}
            height={HEIGHT}
          />
          {latest && phase === 'idle' ? (
            <Button key="update" label={`Update to ${latest}`} variant="primary" onPress={onUpdate} />
          ) : updateLabel ? (
            <Text dimColor>{updateLabel}</Text>
          ) : null}
          <Button key="refresh" label="↻" plain dimColor onPress={() => refresh($)} />
        </Box>
      )
    }

    if (e.surface === 'terminal') {
      const { Box, Button, Text } = $.ui.resolve(e)
      const color = (pct: number) => ({ ok: 'cyan', warn: 'yellow', hot: 'red' })[tone(pct)]
      const worst = list.reduce((a, b) => (b.pct > a.pct ? b : a))
      const face = FACES[moodOf(worst.pct)]
      const usd = cur.usd === undefined ? '' : `$${cur.usd.toFixed(2)}`
      // The level as `Lv7 ▰▰▱ ●1.2k 🔥5`; the flame counts as two columns.
      const level = view ? `Lv${view.level}` : ''
      const xpBar = view ? bar(view.frac * 100, 3) : ''
      const coins = view?.coins !== undefined ? `●${coinsLabel(view.coins)}` : ''
      const flame = view && view.streak >= 3 ? `🔥${view.streak}` : ''
      // While a gain plays: what it earned, beside the bar and the balance it went to.
      const xpGain = view?.gain?.xp ? `+${coinsLabel(view.gain.xp)}xp` : ''
      const coinGain = view?.gain?.coins && coins ? `+${coinsLabel(view.gain.coins)}` : ''
      const gameWidth = (g: GameFit) =>
        !view || g === 'none'
          ? 0
          : level.length + 1 + xpBar.length + (xpGain ? xpGain.length + 1 : 0) + (coins ? coins.length + 1 : 0) +
            (coinGain ? coinGain.length + 1 : 0) + 2 + (g === 'full' && flame ? flame.length + 2 : 0)
      // Fit the row to the terminal: give up the streak, the level, the long note, the cost,
      // the short note, then the bars.
      // The update offer is never given up: it sits at the right, and the rest fits around it.
      const offer = latest && phase === 'idle' ? `u: update ${latest}` : updateLabel
      const cols = (e.props.bodyColumns || e.viewport?.columns || 80) - (offer ? offer.length + 2 : 0)
      const figures = (bars: boolean) => list.reduce((w, t) => w + t.tag.length + (bars ? 6 : 0) + 5 + 2, 0)
      // With no room for the level, a gain still shows beside the face.
      const pop = [xpGain, view?.gain?.coins ? `●+${coinsLabel(view.gain.coins)}` : ''].filter(Boolean).join(' ')
      const widthOf = (bars: boolean, note: string | undefined, cost: string | undefined, g: GameFit) =>
        face.length + 2 + (g === 'none' && pop ? pop.length + 2 : 0) + gameWidth(g) + figures(bars) + (cost ? cost.length + 2 : 0) + (note ? note.length + 2 : 0) + 3
      const options: [boolean, string | undefined, string | undefined, GameFit][] = [
        [true, noteOf(worst), usd, 'full'],
        [true, noteOf(worst), undefined, 'full'],
        [true, noteOf(worst), undefined, 'short'],
        [true, noteOf(worst), usd, 'none'],
        [true, noteOf(worst), undefined, 'none'],
        [true, shortNoteOf(worst), usd, 'none'],
        [true, shortNoteOf(worst), undefined, 'none'],
        [true, undefined, usd, 'none'],
        [true, undefined, undefined, 'none'],
        [false, undefined, undefined, 'none'],
      ]
      const fitting = options.filter(([, , , g]) => view || g === 'none')
      const [bars, note, cost, g] = fitting.find(([b, n, c, f]) => widthOf(b, n, c, f) <= cols) ?? fitting[fitting.length - 1]!
      return (
        <Box flexDirection="row" gap={2}>
          <Text color="#D97757">{face}</Text>
          {g === 'none' && pop ? <Text color="yellow" bold>{pop}</Text> : null}
          {g !== 'none' ? (
            <Text>
              <Text color="magenta">{level} </Text>
              <Text color="magenta" dimColor>{xpBar}</Text>
              {xpGain ? <Text color="magenta" bold>{` ${xpGain}`}</Text> : null}
              {coins ? <Text color="yellow" dimColor>{` ${coins}`}</Text> : null}
              {coinGain ? <Text color="yellow" bold>{` ${coinGain}`}</Text> : null}
              {g === 'full' && flame ? <Text dimColor>{`  ${flame}`}</Text> : null}
            </Text>
          ) : null}
          {list.map(t => (
            <Text key={t.tag}>
              <Text dimColor>{t.tag} </Text>
              {bars ? <Text color={color(t.pct)}>{bar(t.pct)} </Text> : null}
              <Text bold color={bars ? undefined : color(t.pct)} dimColor={t.isSaved}>{Math.round(t.pct)}%</Text>
            </Text>
          ))}
          {cost ? <Text dimColor>{cost}</Text> : null}
          {note ? <Text color={color(worst.pct)}>{note}</Text> : null}
          {latest && phase === 'idle' ? (
            <Button key="update" label={`update ${latest}`} plain hotkey="u" onPress={onUpdate} />
          ) : updateLabel ? (
            <Text dimColor>{updateLabel}</Text>
          ) : null}
          <Button key="refresh" label="↻" plain dimColor hotkey="r" onPress={() => refresh($)} />
        </Box>
      )
    }

    return next(e)
  })