claude-code/src/components/TokenWarning.tsx

import { feature } from 'bun:bundle';
import * as React from 'react';
import { useSyncExternalStore } from 'react';
import { Box, Text } from '@anthropic/ink';
import { getFeatureValue_CACHED_MAY_BE_STALE } from '../services/analytics/growthbook.js';
import {
  calculateTokenWarningState,
  getEffectiveContextWindowSize,
  isAutoCompactEnabled,
} from '../services/compact/autoCompact.js';
import { useCompactWarningSuppression } from '../services/compact/compactWarningHook.js';
import { getUpgradeMessage } from '../utils/model/contextWindowUpgradeCheck.js';

type Props = {
  tokenUsage: number;
  model: string;
};

/**
 * Live collapse progress: "x / y summarized". Sub-component so
 * useSyncExternalStore can subscribe to store mutations unconditionally
 * (hooks-in-conditionals would violate React rules). The parent only
 * renders this when feature('CONTEXT_COLLAPSE') + isContextCollapseEnabled().
 */
function CollapseLabel({ upgradeMessage }: { upgradeMessage: string | null }): React.ReactNode {
  /* eslint-disable @typescript-eslint/no-require-imports */
  const { getStats, subscribe } =
    require('../services/contextCollapse/index.js') as typeof import('../services/contextCollapse/index.js');
  /* eslint-enable @typescript-eslint/no-require-imports */

  // Snapshot must be referentially stable across calls when the
  // underlying counts haven't changed — returning a fresh object every
  // time would infinite-loop useSyncExternalStore. Encode as a string.
  const snapshot = useSyncExternalStore(subscribe, () => {
    const s = getStats();
    const idleWarn = s.health.emptySpawnWarningEmitted ? 1 : 0;
    return `${s.collapsedSpans}|${s.stagedSpans}|${s.health.totalErrors}|${s.health.totalEmptySpawns}|${idleWarn}`;
  });

  const [collapsed, staged, errors, emptySpawns, idleWarn] = snapshot.split('|').map(Number) as [
    number,
    number,
    number,
    number,
    number,
  ];
  const total = collapsed + staged;

  // Show error indicator when ctx-agent is failing silently
  if (errors > 0 || idleWarn) {
    const problem = errors > 0 ? `collapse errors: ${errors}` : `collapse idle (${emptySpawns} empty runs)`;
    return (
      <Text color="warning" wrap="truncate">
        {total > 0 ? `${collapsed} / ${total} summarized \u00b7 ${problem}` : problem}
      </Text>
    );
  }

  if (total === 0) return null;

  const label = `${collapsed} / ${total} summarized`;
  return (
    <Text dimColor wrap="truncate">
      {upgradeMessage ? `${label} \u00b7 ${upgradeMessage}` : label}
    </Text>
  );
}

export function TokenWarning({ tokenUsage, model }: Props): React.ReactNode {
  const { percentLeft, isAboveWarningThreshold, isAboveErrorThreshold } = calculateTokenWarningState(tokenUsage, model);

  // Use reactive hook to check if warning should be suppressed
  const suppressWarning = useCompactWarningSuppression();

  if (!isAboveWarningThreshold || suppressWarning) {
    return null;
  }

  const showAutoCompactWarning = isAutoCompactEnabled();
  const upgradeMessage = getUpgradeMessage('warning');

  // Reactive-only or context-collapse mode: proactive autocompact never
  // fires, so percentLeft's normal calculation (against the autocompact
  // threshold) counts down to an event that won't happen. Recompute
  // against the effective window so the percentage is honest.
  //
  // Each feature() block stands alone so the flag strings DCE from
  // external builds independently.
  let displayPercentLeft = percentLeft;
  let reactiveOnlyMode = false;
  let collapseMode = false;
  if (feature('REACTIVE_COMPACT')) {
    if (getFeatureValue_CACHED_MAY_BE_STALE('tengu_cobalt_raccoon', false)) {
      reactiveOnlyMode = true;
    }
  }
  if (feature('CONTEXT_COLLAPSE')) {
    /* eslint-disable @typescript-eslint/no-require-imports */
    const { isContextCollapseEnabled } =
      require('../services/contextCollapse/index.js') as typeof import('../services/contextCollapse/index.js');
    /* eslint-enable @typescript-eslint/no-require-imports */
    if (isContextCollapseEnabled()) {
      collapseMode = true;
    }
  }
  if (reactiveOnlyMode || collapseMode) {
    const effectiveWindow = getEffectiveContextWindowSize(model);
    displayPercentLeft = Math.max(0, Math.round(((effectiveWindow - tokenUsage) / effectiveWindow) * 100));
  }

  // Collapse mode: delegate to the subscribing sub-component so the
  // indicator updates live as the ctx-agent stages and commits fire, not
  // just when the next API response re-renders TokenWarning.
  if (collapseMode && feature('CONTEXT_COLLAPSE')) {
    return (
      <Box flexDirection="row">
        <CollapseLabel upgradeMessage={upgradeMessage} />
      </Box>
    );
  }

  const autocompactLabel = reactiveOnlyMode
    ? `${100 - displayPercentLeft}% context used`
    : `${displayPercentLeft}% until auto-compact`;

  return (
    <Box flexDirection="row">
      {showAutoCompactWarning ? (
        <Text dimColor wrap="truncate">
          {upgradeMessage ? `${autocompactLabel} \u00b7 ${upgradeMessage}` : autocompactLabel}
        </Text>
      ) : (
        <Text color={isAboveErrorThreshold ? 'error' : 'warning'} wrap="truncate">
          {upgradeMessage
            ? `Context low (${percentLeft}% remaining) \u00b7 ${upgradeMessage}`
            : `Context low (${percentLeft}% remaining) \u00b7 Run /compact to compact & continue`}
        </Text>
      )}
    </Box>
  );
}