Function BootSplash

src/cli/prompts/boot-splash.tsx:46–136

(props: BootSplashProps)

}

export function BootSplash(props: BootSplashProps): React.ReactElement {
  const { config, registry, router, onDone } = props;
  const { stdout } = useStdout();
  const cols = stdout?.columns ?? 80;
  const wide = cols >= LOGO_WIDTH + 4;

  const motion = !!stdout?.isTTY && process.env.QODEX_NO_SPLASH !== '1';

  const steps = useMemo(() => {
    let modelCount = 0;
    try { modelCount = router.listAvailableModels().length; } catch { /* ignore */ }
    return buildBootSteps({
      modelCount,
      toolCount: registry.list().length,
      model: config.defaults.model,
      autoRetrieve: (config as any).context?.autoRetrieve !== false,
      draftModel: (config.providers as any)?.openai?.draftModel ?? (config.providers as any)?.ollama?.draftModel,
    });
  }, [config, registry, router]);

  // `revealed` = how many steps are fully online (✓). The step at index `revealed`
  // (if any) is the one currently spinning.
  const [revealed, setRevealed] = useState(0);
  // Shimmer: slide the gradient phase continuously while the splash is up.
  const phase = useShimmer(motion, SHIMMER_INTERVAL_MS);

  // No motion (piped / disabled) → don't animate, hand off on next tick.
  useEffect(() => {
    if (motion) return;
    const t = setTimeout(onDone, 0);
    return () => clearTimeout(t);
  }, [motion, onDone]);

  // Reveal steps one at a time; when all are online, hold briefly then finish.
  useEffect(() => {
    if (!motion) return;
    if (revealed >= steps.length) {
      const done = setTimeout(onDone, HOLD_AFTER_DONE_MS);
      return () => clearTimeout(done);
    }
    const next = setTimeout(() => setRevealed(r => r + 1), STEP_INTERVAL_MS);
    return () => clearTimeout(next);
  }, [motion, revealed, steps.length, onDone]);

  const progress = steps.length === 0 ? 1 : revealed / steps.length;

  return (
    <Box flexDirection="column" paddingX={2} paddingY={1}>
      {/* Wordmark — full ANSI-shadow logo on wide terminals, compact mark otherwise. */}
      {wide ? (
        <Box flexDirection="column">
          {LOGO.map((line, i) => (
            <GradientText key={i} text={line} stops={AURORA} phase={phase + i * 0.05} bold />
          ))}
        </Box>
      ) : (
        <GradientText text="✦  Q O D E X" stops={AURORA} phase={phase} bold />
      )}