clawd

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const s = await read($, st)
    S = s
    const now = await $.clock.now()
    if (now - s.walkAt < walkMs(s)) $.clock.after(walkMs(s) - (now - s.walkAt) + 60, () => $.ui.invalidate('ui.render'))
    const mood = moodOf(s, now)
    const lv = level(s.xp)

    if (e.surface === 'terminal') {
      const { Box, Text, Raster, Button } = $.ui.resolve(e)
      const { gauge, hex6 } = hudText()
      const m = s.tab !== 'hud' ? menu(s, s.tab, now) : null
      const cols = Math.max(20, e.props.bodyColumns)
      // the rows around the scene: the header, the limits, the status, the crew, the buttons, an open menu
      const around = 5 + (crew.length > 0 ? 1 : 0) + (m ? m.rows.length + 1 : 0)
      const space = Math.max(5, (e.props.scroll?.bodyRows ?? sceneRows + around) - around)
      // the whole room always fits the body, scaled by any factor (not just whole ones),
      // keeping its proportions: a cell is one pixel across and two down
      const maxW = Math.min(cols, sceneCols), maxH = Math.min(space, sceneRows) * 2
      const fit = Math.min(maxW / W, maxH / H)
      // shrunk below half, the full room turns to mush: the hand drawn small one
      // takes over, one pixel per half block, grown by a whole factor if there is room
      isMini = sceneMode === 'mini' || (sceneMode !== 'hd' && fit < 0.5)
      if (isMini) {
        // the room drawn in characters: one cell per cell, the middle columns
        // when narrow, the top of the wall dropped when short, more wall when tall
        termCols = Math.min(TW, maxW)
        termRows = Math.max(6, Math.min(Math.floor(maxH / 2), TH + 4))
      } else {
        termCols = Math.max(1, Math.round(W * fit))
        termRows = Math.max(1, Math.round((H * fit) / 2))
      }
      const sl = slots(s.limits)
      const press = (fn: () => Promise<void>) => () => { void fn() }
      return (
        <Box flexDirection="column">
          <Box flexDirection="row" gap={1}>
            <Text color="#d77757" bold>◆ {prettyModel(s.model)}</Text>
            <Text color="#b48cff">LV{lv.lv}</Text>
            <Text color="#ffd34e">{EVO_NAME[stageOf(s.tokens)]!.toLowerCase()} {tokens(s.tokens)}</Text>
            <Text dimColor>ctx</Text>
            <Text color={hex6(levelColor(s.ctx))}>{gauge(s.ctx, 10)}</Text>
            <Text>{s.ctx}%</Text>
          </Box>
          <Raster key="scene" columns={termCols} rows={termRows} cells={terminalFrame(now)} />
          <Box flexDirection="row" gap={1} flexWrap="wrap">
            {sl.map(x => (
              <Text>
                <Text dimColor>{x.short.toLowerCase()} </Text>
                <Text color={x.limit ? hex6(levelColor(x.limit.pct)) : undefined}>{gauge(x.limit ? x.limit.pct : null, 6)}</Text>
                <Text> {x.limit ? `${Math.round(x.limit.pct)}% ${slotLeft(x.limit, now)}` : '--'}</Text>
              </Text>
            ))}
          </Box>
          <Text color={hex6(MOOD_COLOR[mood])}>
            ● {LABEL[mood]}{s.tool && (mood === 'work' || mood === 'wait') ? ` · ${s.tool}` : ''}
            <Text dimColor> · ${s.usd.toFixed(2)} · turn {s.turns} · {s.xp} xp</Text>
          </Text>
          {crew.length > 0 && <Text>{crewLine(now, hex6)}</Text>}
          <Text dimColor>{e.props.isFocused ? 'keys below are live · esc: back to the prompt' : 'ctrl+x tab (or a click) to use the keys below · esc to leave'}</Text>
          <Box flexDirection="row" gap={1} flexWrap="wrap">
            <Button plain hotkey="p" label="Pet" onPress={press(() => act($, 'pet'))} />
            <Button plain hotkey="s" label="Snack" onPress={press(() => act($, 'snack'))} />
            <Button plain hotkey="d" label="Dance" onPress={press(() => act($, 'dance'))} />
            {crew.length > 0 && <Button plain hotkey="w" label="Wave" onPress={press(() => act($, 'wave'))} />}
            <Button plain hotkey="l" label={s.lights ? 'Lights off' : 'Lights on'} onPress={press(() => act($, 'lights'))} />
            <Button plain hotkey="1" label="Limits" dimColor={s.tab !== 'limits'} onPress={press(() => show($, 'limits'))} />
            <Button plain hotkey="2" label="Tools" dimColor={s.tab !== 'tools'} onPress={press(() => show($, 'tools'))} />
            <Button plain hotkey="3" label="Session" dimColor={s.tab !== 'session'} onPress={press(() => show($, 'session'))} />
          </Box>
          {m && (
            <Box flexDirection="column">
              <Text color="#ffd34e" bold>▶ {m.title}</Text>
              {m.rows.map(r => (
                <Text>
                  <Text dimColor={r.k.startsWith(' ')}>{r.k.toLowerCase().padEnd(13)}</Text>
                  {r.pct !== undefined && <Text color={hex6(r.c && r.c !== HUD_C.dim ? r.c : levelColor(r.pct ?? 0))}>{gauge(r.pct ?? null, 12)} </Text>}
                  <Text color={r.c ? hex6(r.c) : undefined}>{r.v.toLowerCase()}</Text>
                </Text>
              ))}
            </Box>
          )}
        </Box>
      )
    }

    const { Box, Text, Svg, Button } = $.ui.resolve(e)
    const press = (fn: () => Promise<void>) => () => { void fn() }
    const tabs: Array<[Tab, string]> = [['limits', '📊 Limits'], ['tools', '🛠 Tools'], ['session', '🎮 Session']]
    return (
      <Box flexDirection="column" gap={1}>
        {crew.length > 0 && <Text>{crewLine(now, x => `#${x.toString(16).padStart(6, '0')}`)}</Text>}
        {Svg
          ? <Svg source={svgScene(s, now)} alt={`Clawd is ${LABEL[mood]} in the HQ`} />
          : <Text>● Clawd is {LABEL[mood]}</Text>}
        <Box flexDirection="row" gap={1} flexWrap="wrap">
          <Button label="♥ Pet" onPress={press(() => act($, 'pet'))} />
          <Button label="🍪 Snack" onPress={press(() => act($, 'snack'))} />
          <Button label="🕺 Dance" onPress={press(() => act($, 'dance'))} />
          {crew.length > 0 && <Button label="👋 Wave" onPress={press(() => act($, 'wave'))} />}
          <Button label={s.lights ? '🌙 Lights off' : '💡 Lights on'} onPress={press(() => act($, 'lights'))} />
          {tabs.map(([tab, label]) => (
            <Button key={tab} label={label} variant={s.tab === tab ? 'primary' : 'secondary'} onPress={press(() => show($, tab))} />
          ))}
        </Box>
      </Box>
    )
  })