cache-keeper

  on('ui.render', { component: 'Pane', requestId: PANE_ID }, async ($, e) => {
    const { Box, Button, Text } = $.ui.resolve(e)
    const view = await computeView($, config)
    const handoff = await read($, handoffAtom)
    const ttlLabel = view.ttlMs >= TTL_1H_MS ? '1h' : '5m'
    const hasActions = view.phase !== 'running' && view.phase !== 'empty' && handoff.status === 'idle'
    // The − / + buttons and "Turn on" start from the point in force, else this model's default.
    const compactBase = view.compact.at ?? defaultCompactAt(view.contextWindow) ?? COMPACT_FLOOR_TOKENS
    const compactCeiling = view.contextWindow > 0 ? view.contextWindow : Number.POSITIVE_INFINITY

    return (
      <Box flexDirection="column">
        <Text bold color={PHASE_COLOR[view.phase]}>
          {headline(view)}
        </Text>
        <Text dimColor>
          TTL {ttlLabel} ({view.ttlSource}) · re-warm if cold ≈{formatUsd(view.rewarmUsd)} ({view.priceSource} price)
        </Text>
        <Text> </Text>
        <Text>
          Context {formatTokens(view.contextTokens)} / {formatTokens(view.contextWindow)}
          {view.contextPercent !== undefined ? ` (${view.contextPercent}%)` : ''}
        </Text>
        {view.rateLimits.map(limit => (
          <Text>
            {LIMIT_LABEL[limit.kind] ?? limit.kind} {percentLeft(limit)}% left
            {formatUntil(limit.resetsAt, view.now) ? ` · resets in ${formatUntil(limit.resetsAt, view.now)}` : ''}
          </Text>
        ))}
        {view.costUsd !== undefined && <Text>Session at API rates {formatUsd(view.costUsd)}</Text>}

        {/* Auto-compact gets its own titled section so its buttons don't read as part of the actions below. */}
        <Box flexDirection="column" marginTop={1}>
          <Text bold>Auto-compact</Text>
          <Text dimColor>{autoCompactSummary(view)}</Text>
        </Box>
        <Box flexDirection="row" gap={2}>
          <Button
            key="compact-less"
            label={`Sooner −${formatTokens(COMPACT_STEP_TOKENS)}`}
            onPress={() =>
              runAction($, 'auto-compact', () =>
                setSessionCompact($, Math.max(COMPACT_STEP_TOKENS, compactBase - COMPACT_STEP_TOKENS)),
              )
            }
          />
          <Button
            key="compact-more"
            label={`Later +${formatTokens(COMPACT_STEP_TOKENS)}`}
            onPress={() =>
              runAction($, 'auto-compact', () =>
                setSessionCompact($, Math.min(compactCeiling, compactBase + COMPACT_STEP_TOKENS)),
              )
            }
          />
          <Button
            key="compact-toggle"
            label={view.compact.at === null ? 'Turn on' : 'Turn off'}
            onPress={() =>
              runAction($, 'auto-compact', () => setSessionCompact($, view.compact.at === null ? compactBase : 'off'))
            }
          />
          {view.compact.source === 'session' && (
            <Button
              key="compact-reset"
              label="Reset to default"
              onPress={() => runAction($, 'auto-compact', () => setSessionCompact($, null))}
            />
          )}
        </Box>

        {hasActions && (
          <Box flexDirection="column" marginTop={1}>
            <Text bold>Actions</Text>
            <Box flexDirection="row" gap={2}>
              <Button key="warm" label="🔥 Keep warm" onPress={() => runAction($, 'keep warm', () => keepWarm($))} />
              <Button key="compact" label="📦 Compact now" onPress={() => runAction($, 'compact', () => compactNow($))} />
              <Button
                key="handoff"
                label="🤝 Handoff"
                onPress={() => runAction($, 'handoff', () => startHandoff($, config))}
              />
            </Box>
          </Box>
        )}
        {handoff.status === 'pending' && <Text color="yellow">Handoff running…</Text>}
        {handoff.status === 'ready' && (
          <Box flexDirection="row">
            <Text color="green">Handoff ready ({formatTokens(handoff.text.length)} chars) </Text>
            <Button
              key="continue"
              label="Clear & continue"
              variant="primary"
              onPress={() => runAction($, 'clear & continue', () => clearAndContinue($))}
            />
            <Text> </Text>
            <Button key="discard" label="Discard" onPress={() => runAction($, 'discard', () => discardHandoff($))} />
          </Box>
        )}
      </Box>
    )
  })

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    if (e.props.hasSurvey) return next(e)
    const view = await computeView($, config)
    const handoff = await read($, handoffAtom)

    const { Box, Button, Text } = $.ui.resolve(e)
    if (handoff.status === 'ready') {
      return (
        <Box flexDirection="row" justifyContent="space-between">
          <Text color="green">Handoff ready.</Text>
          <Box flexDirection="row" flexShrink={0} gap={1}>
            <Button
              key="band-continue"
              label="Clear & continue"
              variant="primary"
              onPress={() => runAction($, 'clear & continue', () => clearAndContinue($))}
            />
            <Button key="band-discard" label="Discard" onPress={() => runAction($, 'discard', () => discardHandoff($))} />
          </Box>
        </Box>
      )
    }

    // Always-on bar: the figures at a glance, then the actions (hidden before the first reply and while a turn runs).
    const hasActions = view.phase !== 'empty' && view.phase !== 'running' && handoff.status === 'idle'

    // Figures on the left (growing to fill the row), buttons pinned to the right edge.
    return (
      <Box flexDirection="row" justifyContent="space-between">
        {/*
          One outlined pill per group: a faint rounded border, gray text, a small colored dot for status.
          height={1} holds the pill to one text row; without it the desktop pads the border well above and below the text.
        */}
        <Box flexDirection="row" flexGrow={1} flexShrink={1} gap={1}>
          {[...bandChips(view), ...(handoff.status === 'pending' ? [{ text: 'handoff running…', tone: 'warn' as const }] : [])].map(
            chip => (
              <Box flexDirection="row" flexShrink={0} borderStyle="round" borderDimColor paddingX={1} height={1}>
                {TONE_DOT_COLOR[chip.tone] && <Text color={TONE_DOT_COLOR[chip.tone]}>● </Text>}
                <Text dimColor>{chip.text}</Text>
              </Box>
            ),
          )}
        </Box>
        {/* One-glyph buttons to save width; the Details pane carries the same actions with word labels. */}
        <Box flexDirection="row" flexShrink={0} gap={1}>
          {hasActions && view.phase !== 'cold' && (
            <Button key="band-warm" label="🔥" onPress={() => runAction($, 'keep warm', () => keepWarm($))} />
          )}
          {hasActions && (
            <Button key="band-compact" label="📦" onPress={() => runAction($, 'compact', () => compactNow($))} />
          )}
          {hasActions && (
            <Button
              key="band-handoff"
              label="🤝"
              onPress={() => runAction($, 'handoff', () => startHandoff($, config))}
            />
          )}
          <Button key="band-details" label="📊" onPress={() => runAction($, 'details', () => openPane($))} />
        </Box>
      </Box>
    )
  })