prompt-quest

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    const s = await read($, saveA)
    if (!s.showBand || e.props.hasSurvey) return next(e)
    const ss = await read($, sessionA)
    const { Box, Text } = $.ui.resolve(e)
    const lv = levelOf(s.xp)
    const cls = heroClass(s)
    const pts = points(s)
    const last = ss.last
    const g = last?.grade
    const purse = isActive(s, 'purse') && last
    const tips = last?.tips ?? []
    const missing = g?.missing ?? []
    const total = last ? last.inTok + last.cacheRead + last.cacheWrite : 0
    const ratio = total && last ? Math.round((last.cacheRead / total) * 100) : 0
    const els = $.ui.resolve(e) as Record<string, any>
    const Raster = e.surface === 'terminal' ? els.Raster : undefined
    if (Raster && e.requestId) bandRequest = e.requestId
    const hitNow = moodNow(await $.clock.now())
    return (
      <Box flexDirection="column">
        <Box gap={1}>
          <Text>{CLASS_ICON[cls]}</Text>
          <Text color="#ffd166" bold>Lv {lv.level}</Text>
          <Text>{titleOf(lv.level)} {className(cls)}</Text>
          {Raster
            ? <Raster key="xpbar" {...barCells(lv.into / lv.need, 20, 0x8b5cf6, 0xf472b6, frame, hitNow.mood === 'hit' ? lostShare(s.xp, hitNow.t) : 0)} />
            : <Text color="#a78bfa">{textBar(lv.into, lv.need)}</Text>}
          <Text dimColor>{lv.into}/{lv.need} XP</Text>
          {pts > 0 && <Text color="#fde047" bold>+{pts} skill point{pts > 1 ? 's' : ''}: /quest skills</Text>}
          {s.streak > 1 && <Text color="#fb923c">🔥 {s.streak}d</Text>}
        </Box>
        {g && last && (
          <Box>
            <Text backgroundColor={RANK_COLOR[g.rank]} color="#111111" bold> {g.rank} </Text>
            <Text color={last.xp >= 0 ? '#5fff87' : '#ff5f5f'} bold> {last.xp >= 0 ? '+' : ''}{last.xp} XP</Text>
            <Text dimColor wrap="truncate-end"> · {last.notes.join(', ')}</Text>
          </Box>
        )}
        {missing.length > 0 && (
          <Box gap={1}>
            <Text color="#ff9f43" bold>🎯 Missing:</Text>
            {missing.map(m => <Text backgroundColor="#3a3a52" color="#ffd166"> {MISSING_LABEL[m] ?? m} </Text>)}
            {tips.length > 1 && <Text dimColor>({tips.length} tips: /quest)</Text>}
          </Box>
        )}
        {g?.upgrade && <Text color="#5fff87" wrap="truncate-end">✏️ Try: {g.upgrade}</Text>}
        {!g?.upgrade && tips.length > 0 && (
          <Text color="#5fb3ff" wrap="truncate-end">💡 {tips[0]}</Text>
        )}
        {purse && last && (
          <Text dimColor wrap="truncate-end">
            🪙 in {k(last.inTok + last.cacheWrite)} · cache {k(last.cacheRead)} ({ratio}%) · out {k(last.outTok)} · session out {k(ss.outTok)}
            {isActive(s, 'budget') ? `/${k(s.budget)}` : ''}
          </Text>
        )}
      </Box>
    )
  })

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const s = await read($, saveA)
    const ss = await read($, sessionA)
    const tab = await read($, tabA)
    const { Box, Text, Button } = $.ui.resolve(e)
    const width = e.props.bodyColumns
    const terminal = e.surface === 'terminal'
    look = { ...look, cls: heroClass(s), mood: ss.mood, moodAt: ss.moodAt, dmg: ss.dmg ?? look.dmg, rank: ss.last?.grade?.rank ?? look.rank, bar: levelOf(s.xp).into / levelOf(s.xp).need }
    paneLive = terminal

    const tabs: [Tab, string][] = [['hero', 'Hero'], ['skills', 'Skills'], ['quests', 'Quests'], ['lore', 'Lore'], ['rules', 'Rules']]
    const header = (
      <Box gap={1}>
        {tabs.map(([id, label], i) => (
          <Button key={`tab-${id}`} label={label} hotkey={String(i + 1)}
            variant={tab === id ? 'primary' : 'secondary'} onPress={() => update($, tabA, () => id)} />
        ))}
        <Button key="close" label="Close" hotkey="x" role="dismiss"
          onPress={async () => { paneLive = false; await $.ui.close({ id: PANE }) }} />
      </Box>
    )

    let body
    if (tab === 'skills') body = await skillsTab($, e, s)
    else if (tab === 'quests') body = questsTab($, e, s)
    else if (tab === 'lore') body = await loreTab($, e, s)
    else if (tab === 'rules') body = rulesTab($, e, ss)
    else body = await heroTab($, e, s, ss, width, terminal)

    return (
      <Box flexDirection="column" gap={1}>
        {header}
        {body}
      </Box>
    )
  })