idlecrash

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const { Box, Text, Button } = $.ui.resolve(e)
    const f = await read($, feed)
    const wish = await read($, local)
    const st = await read($, status)
    const width = Math.max(30, (e.props.bodyColumns ?? 40) - 1)
    const snap = f.snap

    const title = (
      <Box>
        <Text bold>IDLECRASH</Text>
        <Text dimColor>  fake tokens only</Text>
      </Box>
    )

    if (e.surface !== 'terminal') {
      return (
        <Box flexDirection="column">
          {title}
          <Text>The game opens in your browser.</Text>
          <Text dimColor>{st.isWorking ? 'Claude is working: bets are open.' : 'Bets open when Claude starts working.'}</Text>
          <Button key="web" label="o · Open the game" hotkey="o" variant="primary" onPress={() => openFromPane($)} />
        </Box>
      )
    }

    if (!st.isWorking && !st.isWatching && st.summary) {
      return (
        <Box flexDirection="column">
          {title}
          <Text color="warning">{st.summary}</Text>
          <Text dimColor>Betting opens again when Claude starts the next turn.</Text>
          <Text dimColor>{snap && snap.history.length > 0 ? `last crashes: ${snap.history.slice(0, 8).map(point => point.toFixed(2)).join(' ')}` : ' '}</Text>
        </Box>
      )
    }
    if (!st.isWorking && !st.isWatching) {
      return (
        <Box flexDirection="column">
          {title}
          <Text>Waiting for Claude to start working.</Text>
          <Text dimColor>You can only play while Claude is busy.</Text>
          <Text dimColor>/idlecrash off  stops it opening by itself</Text>
        </Box>
      )
    }
    if (!snap || !st.isJoined) {
      return (
        <Box flexDirection="column">
          {title}
          {st.error ? <Text color="error">{st.error}</Text> : <Text dimColor>Taking a seat…</Text>}
        </Box>
      )
    }

    // Nothing below changes between two redraws unless the table changed: the moving parts
    // (plane, multiplier, countdown) live in the picture, which animates on its own.
    const phase = snap.table.phase
    const mine = snap.you.bet
    const isLive = !!mine && mine.cash === null && phase !== 'crashed'
    const delta = st.balanceAtStart === null ? 0 : snap.you.balance - st.balanceAtStart
    const seated = snap.table.humans + snap.table.bots
    const columns = Math.min(56, Math.max(28, width))
    const rowsOfPicture = 14
    const sceneProps: SceneProps = {
      phase,
      round: snap.table.round,
      columns,
      rows: rowsOfPicture,
      growth: snap.growth,
      runStartedAt: snap.table.runStartedAt,
      crashedAt: snap.table.crashedAt,
      crashPoint: snap.table.crashPoint,
      bettingEndsAt: snap.table.bettingEndsAt,
      serverNow: (await $.clock.now()) + f.offset,
      stake: isLive && phase === 'running' ? mine!.amount : 0,
    }

    const { Client } = $.ui.resolve(e)
    const picture = (
      <Client key="scene" module="./scene-client.tsx" props={sceneProps} width={columns} height={rowsOfPicture + 1} />
    )

    const rows = snap.players.map(p => {
      const name = pad(`${p.you ? '›' : ' '}${p.bot ? '⚙' : ' '}${p.name}`, 12)
      let result = ''
      let color: string | undefined
      if (p.bet > 0) {
        if (p.cash !== null) {
          result = `${times(p.cash)} → ${fmt(p.payout)}`
          color = 'success'
        } else if (phase === 'crashed') {
          result = 'lost'
          color = 'error'
        } else {
          result = phase === 'betting' ? 'in' : '…'
        }
      }
      return (
        <Box>
          <Text bold={p.you}>{name} {padStart(p.bet > 0 ? fmt(p.bet) : '-', 5)}  </Text>
          <Text color={color} dimColor={!color}>{result}</Text>
        </Box>
      )
    })

    const room = Math.max(3, Math.floor((width - 6) / 6))

    let action
    if (!st.isWorking) {
      action = <Text color="warning">Claude finished: betting is locked. Watching this round.</Text>
    } else if (phase === 'betting' && !mine) {
      action = <Button key="bet" label={`b · Bet ${fmt(wish.stake)}`} hotkey="b" variant="primary" onPress={() => placeBet($)} />
    } else if (isLive && phase === 'running') {
      action = <Button key="cash" label="c · CASH OUT" hotkey="c" variant="primary" onPress={() => cashOut($)} />
    } else if (mine && phase === 'betting') {
      action = <Text color="warning">bet placed: {fmt(mine.amount)}{mine.auto ? ` · auto ${times(mine.auto)}` : ''}</Text>
    } else if (mine && mine.cash !== null) {
      action = <Text color="success">cashed out {times(mine.cash)}: paid {fmt(mine.payout)}</Text>
    } else {
      action = <Text dimColor>next round soon</Text>
    }

    return (
      <Box flexDirection="column">
        {title}
        {picture}
        <Text dimColor>table {snap.table.id} · {seated} seated{snap.table.bots > 0 ? ` (${snap.table.bots} bots ⚙)` : ''}</Text>
        <Box>
          <Text>balance <Text bold>{fmt(snap.you.balance)}</Text></Text>
          <Text color={delta >= 0 ? 'success' : 'error'}>  {sign(delta)} this turn</Text>
        </Box>
        <Box flexDirection="column">{rows}</Box>
        <Box>
          <Text dimColor>last </Text>
          {snap.history.slice(0, room).map(point => (
            <Text color={point >= 2 ? 'success' : 'error'}>{point.toFixed(2)} </Text>
          ))}
        </Box>
        <Box>{action}</Box>
        <Box>
          <Text dimColor>{st.isWorking ? 'stake ' : ' '}</Text>
          {(st.isWorking ? STAKES : []).map((s, i) => (
            <Button
              key={`stake${i + 1}`}
              plain
              hotkey={String(i + 1)}
              label={fmt(s)}
              dimColor={wish.stake !== s}
              onPress={() => update($, local, w => ({ ...w, stake: s }))}
            />
          ))}
        </Box>
        <Box>
          {st.isWorking && (<Button
            key="auto"
            plain
            hotkey="x"
            label={`auto-out ${wish.auto ? times(wish.auto) : 'off'}`}
            onPress={() =>