@tokentop/ttop 0.2.2 → 0.4.0

package/src/tui/hooks/useEmaActivity.ts

@@ -1,4 +1,4 @@
-import { useState, useEffect, useRef, useCallback } from 'react';
+import { useCallback, useEffect, useRef, useState } from "react";
 
 const BUCKET_COUNT = 60;
 const AVG_WINDOW = 10;
@@ -27,22 +27,24 @@ export interface UseActivityRateResult {
 
 export function useEmaActivity(totalTokens: number): UseActivityRateResult {
   const [buckets, setBuckets] = useState<number[]>(() => Array(BUCKET_COUNT).fill(0));
-  const [activity, setActivity] = useState<ActivityState>({ 
-    instantRate: 0, avgRate: 0, isSpike: false 
+  const [activity, setActivity] = useState<ActivityState>({
+    instantRate: 0,
+    avgRate: 0,
+    isSpike: false,
   });
-  
-  const stateRef = useRef<{ 
-    lastTokens: number; 
+
+  const stateRef = useRef<{
+    lastTokens: number;
     lastTokenTime: number;
     lastShiftTime: number;
     initialized: boolean;
-  }>({ 
-    lastTokens: -1, 
+  }>({
+    lastTokens: -1,
     lastTokenTime: Date.now(),
     lastShiftTime: Date.now(),
     initialized: false,
   });
-  
+
   const debugDataRef = useRef<ActivityDebugData>({
     lastDeltaTokens: 0,
     lastDt: 0,
@@ -54,12 +56,12 @@ export function useEmaActivity(totalTokens: number): UseActivityRateResult {
 
   const calculateRates = useCallback((bucketData: number[]) => {
     const recentBuckets = bucketData.slice(-AVG_WINDOW);
-    
+
     const instantRate = Math.max(...recentBuckets);
     const avgRate = recentBuckets.reduce((a, b) => a + b, 0) / AVG_WINDOW;
-    
+
     const isSpike = instantRate >= 500 && instantRate >= avgRate * 3;
-    
+
     return { instantRate, avgRate, isSpike };
   }, []);
 
@@ -69,7 +71,7 @@ export function useEmaActivity(totalTokens: number): UseActivityRateResult {
     const shift = Math.min(count, BUCKET_COUNT);
     const decayFactor = 0.7;
     const zeroThreshold = 0.5; // Values below this become true zero (shows as dot)
-    
+
     for (let i = 0; i < BUCKET_COUNT - shift; i++) {
       const val = bucketData[i + shift] ?? 0;
       newBuckets[i] = val < zeroThreshold ? 0 : val;
@@ -77,69 +79,75 @@ export function useEmaActivity(totalTokens: number): UseActivityRateResult {
     for (let i = BUCKET_COUNT - shift; i < BUCKET_COUNT; i++) {
       const prevValue = bucketData[BUCKET_COUNT - shift - 1] ?? 0;
       const decaySteps = i - (BUCKET_COUNT - shift) + 1;
-      const decayed = prevValue * Math.pow(decayFactor, decaySteps);
+      const decayed = prevValue * decayFactor ** decaySteps;
       newBuckets[i] = decayed < zeroThreshold ? 0 : decayed;
     }
     return newBuckets;
   }, []);
 
-  const applyActivityRamp = useCallback((bucketData: number[], peakRate: number, fillCount: number): number[] => {
-    const newBuckets = [...bucketData];
-    const rampWidth = Math.min(fillCount + 2, 6);
-    
-    for (let i = 0; i < rampWidth; i++) {
-      const bucketIdx = BUCKET_COUNT - 1 - i;
-      if (bucketIdx < 0) break;
-      
-      const distanceFromPeak = i;
-      const rampMultiplier = Math.max(0.15, 1 - (distanceFromPeak * 0.25));
-      const rampedValue = peakRate * rampMultiplier;
-      
-      newBuckets[bucketIdx] = Math.max(newBuckets[bucketIdx] ?? 0, rampedValue);
-    }
-    return newBuckets;
-  }, []);
+  const applyActivityRamp = useCallback(
+    (bucketData: number[], peakRate: number, fillCount: number): number[] => {
+      const newBuckets = [...bucketData];
+      const rampWidth = Math.min(fillCount + 2, 6);
 
-  const injectDelta = useCallback((delta: number) => {
-    if (delta <= 0 || delta >= 1000000) return;
-    
-    const now = Date.now();
-    const rate = delta;
-    
-    debugDataRef.current.lastDeltaTokens = delta;
-    debugDataRef.current.lastDt = 1;
-    debugDataRef.current.currentBucketValue = rate;
-    
-    setBuckets(prev => {
-      const secSinceShift = (now - stateRef.current.lastShiftTime) / 1000;
-      const bucketsToShift = Math.floor(secSinceShift);
-      
-      let newBuckets = shiftBucketsWithDecay(prev, bucketsToShift);
-      if (bucketsToShift > 0) {
-        stateRef.current.lastShiftTime = now;
-        debugDataRef.current.bucketsShifted = bucketsToShift;
+      for (let i = 0; i < rampWidth; i++) {
+        const bucketIdx = BUCKET_COUNT - 1 - i;
+        if (bucketIdx < 0) break;
+
+        const distanceFromPeak = i;
+        const rampMultiplier = Math.max(0.15, 1 - distanceFromPeak * 0.25);
+        const rampedValue = peakRate * rampMultiplier;
+
+        newBuckets[bucketIdx] = Math.max(newBuckets[bucketIdx] ?? 0, rampedValue);
       }
-      
-      newBuckets = applyActivityRamp(newBuckets, rate, bucketsToShift);
-      
-      const rates = calculateRates(newBuckets);
-      setActivity(rates);
       return newBuckets;
-    });
-  }, [calculateRates, shiftBucketsWithDecay, applyActivityRamp]);
+    },
+    [],
+  );
+
+  const injectDelta = useCallback(
+    (delta: number) => {
+      if (delta <= 0 || delta >= 1000000) return;
+
+      const now = Date.now();
+      const rate = delta;
+
+      debugDataRef.current.lastDeltaTokens = delta;
+      debugDataRef.current.lastDt = 1;
+      debugDataRef.current.currentBucketValue = rate;
+
+      setBuckets((prev) => {
+        const secSinceShift = (now - stateRef.current.lastShiftTime) / 1000;
+        const bucketsToShift = Math.floor(secSinceShift);
+
+        let newBuckets = shiftBucketsWithDecay(prev, bucketsToShift);
+        if (bucketsToShift > 0) {
+          stateRef.current.lastShiftTime = now;
+          debugDataRef.current.bucketsShifted = bucketsToShift;
+        }
+
+        newBuckets = applyActivityRamp(newBuckets, rate, bucketsToShift);
+
+        const rates = calculateRates(newBuckets);
+        setActivity(rates);
+        return newBuckets;
+      });
+    },
+    [calculateRates, shiftBucketsWithDecay, applyActivityRamp],
+  );
 
   useEffect(() => {
     const now = Date.now();
-    
+
     debugDataRef.current.refreshCount++;
     debugDataRef.current.lastRefreshTime = now;
 
     const prevTokens = stateRef.current.lastTokens;
     const wasInitialized = stateRef.current.initialized;
-    
+
     if (prevTokens === -1 || prevTokens === 0 || !wasInitialized) {
-      stateRef.current = { 
-        lastTokens: totalTokens, 
+      stateRef.current = {
+        lastTokens: totalTokens,
         lastTokenTime: now,
         lastShiftTime: now,
         initialized: totalTokens > 0,
@@ -149,7 +157,7 @@ export function useEmaActivity(totalTokens: number): UseActivityRateResult {
 
     const deltaTokens = Math.max(0, totalTokens - prevTokens);
     const rawDt = (now - stateRef.current.lastTokenTime) / 1000;
-    
+
     // Require minimum 0.5s between rate calculations
     // DON'T update lastTokens here — that would silently consume the delta
     // without ever writing it to buckets. Let the delta accumulate until
@@ -157,35 +165,35 @@ export function useEmaActivity(totalTokens: number): UseActivityRateResult {
     if (rawDt < 0.5) {
       return;
     }
-    
+
     // Cap dt at 10s so long idle gaps don't dilute the rate when tokens finally arrive
     // This shows activity as a "burst" rather than averaged over idle time
     const dt = Math.min(Math.max(rawDt, 0.5), 10);
-    
+
     debugDataRef.current.lastDeltaTokens = deltaTokens;
     debugDataRef.current.lastDt = dt;
 
     if (deltaTokens > 0 && deltaTokens < 1000000) {
       const rate = deltaTokens / dt;
       debugDataRef.current.currentBucketValue = rate;
-      
-      setBuckets(prev => {
+
+      setBuckets((prev) => {
         const secSinceShift = (now - stateRef.current.lastShiftTime) / 1000;
         const bucketsToShift = Math.floor(secSinceShift);
-        
+
         let newBuckets = shiftBucketsWithDecay(prev, bucketsToShift);
         if (bucketsToShift > 0) {
           stateRef.current.lastShiftTime = now;
           debugDataRef.current.bucketsShifted = bucketsToShift;
         }
-        
+
         newBuckets = applyActivityRamp(newBuckets, rate, bucketsToShift);
-        
+
         const rates = calculateRates(newBuckets);
         setActivity(rates);
         return newBuckets;
       });
-      
+
       stateRef.current.lastTokens = totalTokens;
       stateRef.current.lastTokenTime = now;
     }
@@ -195,15 +203,15 @@ export function useEmaActivity(totalTokens: number): UseActivityRateResult {
     const interval = setInterval(() => {
       const now = Date.now();
       const secSinceShift = (now - stateRef.current.lastShiftTime) / 1000;
-      
+
       if (secSinceShift >= 1) {
         const bucketsToShift = Math.floor(secSinceShift);
         debugDataRef.current.bucketsShifted = bucketsToShift;
-        
-        setBuckets(prev => {
+
+        setBuckets((prev) => {
           const newBuckets = shiftBucketsWithDecay(prev, bucketsToShift);
           stateRef.current.lastShiftTime = now;
-          
+
           const rates = calculateRates(newBuckets);
           setActivity(rates);
           return newBuckets;
@@ -214,8 +222,8 @@ export function useEmaActivity(totalTokens: number): UseActivityRateResult {
     return () => clearInterval(interval);
   }, [calculateRates, shiftBucketsWithDecay]);
 
-  return { 
-    activity, 
+  return {
+    activity,
     sparkData: buckets,
     debugDataRef,
     injectDelta,

package/src/tui/hooks/useEntranceAnimation.ts

@@ -1,4 +1,4 @@
-import { useState, useEffect, useRef } from 'react';
+import { useEffect, useRef, useState } from "react";
 
 export interface UseEntranceAnimationOptions {
   durationMs?: number;
@@ -17,18 +17,18 @@ export function useEntranceAnimation(options: UseEntranceAnimationOptions = {}):
 
   useEffect(() => {
     const intervalMs = 1000 / fps;
-    
+
     const tick = () => {
       const elapsed = Date.now() - mountTime.current;
       const progress = Math.min(1, elapsed / durationMs);
-      const eased = 1 - Math.pow(1 - progress, 2);
+      const eased = 1 - (1 - progress) ** 2;
       setIntensity(eased);
-      
+
       if (progress < 1) {
         setTimeout(tick, intervalMs);
       }
     };
-    
+
     tick();
   }, [durationMs, fps]);
 
@@ -41,22 +41,22 @@ export function useEntranceAnimation(options: UseEntranceAnimationOptions = {}):
 export function applyEntranceFade(intensity: number, color: string, dimColor: string): string {
   if (intensity >= 1) return color;
   if (intensity <= 0) return dimColor;
-  
+
   const parseHex = (hex: string): [number, number, number] => {
-    const clean = hex.replace('#', '');
+    const clean = hex.replace("#", "");
     return [
       parseInt(clean.slice(0, 2), 16),
       parseInt(clean.slice(2, 4), 16),
       parseInt(clean.slice(4, 6), 16),
     ];
   };
-  
+
   const [r1, g1, b1] = parseHex(dimColor);
   const [r2, g2, b2] = parseHex(color);
-  
+
   const r = Math.round(r1 + (r2 - r1) * intensity);
   const g = Math.round(g1 + (g2 - g1) * intensity);
   const b = Math.round(b1 + (b2 - b1) * intensity);
-  
-  return `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;
+
+  return `#${r.toString(16).padStart(2, "0")}${g.toString(16).padStart(2, "0")}${b.toString(16).padStart(2, "0")}`;
 }

package/src/tui/hooks/useExitAnimation.ts

@@ -1,4 +1,4 @@
-import { useState, useEffect, useRef, useCallback } from 'react';
+import { useCallback, useEffect, useRef, useState } from "react";
 
 export interface ExitAnimationItem<T> {
   item: T;
@@ -27,7 +27,7 @@ interface ExitingEntry<T> {
 
 export function useExitAnimation<T>(
   items: T[],
-  options: UseExitAnimationOptions<T>
+  options: UseExitAnimationOptions<T>,
 ): UseExitAnimationResult<T> {
   const { durationMs = 500, fps = 30, getKey, bulkThreshold = 10 } = options;
   const prevKeysRef = useRef<Set<string>>(new Set());
@@ -43,6 +43,10 @@ export function useExitAnimation<T>(
     for (const [key, entry] of exitingRef.current) {
       if (now - entry.startTime >= durationMs) {
         exitingRef.current.delete(key);
+        // Also clean from prev refs so the render-time diff
+        // doesn't re-add them on the next forceUpdate render.
+        prevKeysRef.current.delete(key);
+        prevItemsRef.current.delete(key);
       } else {
         anyActive = true;
       }
@@ -123,7 +127,7 @@ export function useExitAnimation<T>(
     for (const [, entry] of exitingRef.current) {
       const elapsed = now - entry.startTime;
       const progress = Math.min(1, elapsed / durationMs);
-      const eased = Math.pow(progress, 2);
+      const eased = progress ** 2;
 
       result.push({
         item: entry.item,

package/src/tui/hooks/usePulse.ts

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useEffect, useState } from "react";
 
 /**
  * Options for the usePulse hook.
@@ -20,7 +20,7 @@ export interface UsePulseOptions {
  * @returns RGB tuple [r, g, b] or null if invalid
  */
 function parseHexColor(hex: string): [number, number, number] | null {
-  const cleanHex = hex.startsWith('#') ? hex.slice(1) : hex;
+  const cleanHex = hex.startsWith("#") ? hex.slice(1) : hex;
 
   let expandedHex: string;
 
@@ -57,7 +57,7 @@ function parseHexColor(hex: string): [number, number, number] | null {
 function rgbToHex(r: number, g: number, b: number): string {
   const toHex = (n: number) => {
     const clamped = Math.max(0, Math.min(255, Math.round(n)));
-    return clamped.toString(16).padStart(2, '0');
+    return clamped.toString(16).padStart(2, "0");
   };
   return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
 }
@@ -81,7 +81,7 @@ export function getPulseColor(
   step: number,
   baseColor: string,
   peakColor: string,
-  steps: number = 12
+  steps: number = 12,
 ): string {
   const baseRgb = parseHexColor(baseColor);
   const peakRgb = parseHexColor(peakColor);

package/src/tui/hooks/useSafeRenderer.ts

@@ -1,6 +1,6 @@
-import type { CliRenderer } from '@opentui/core';
-import { useRenderer } from '@opentui/react';
-import { createContext, useContext } from 'react';
+import type { CliRenderer } from "@opentui/core";
+import { useRenderer } from "@opentui/react";
+import { createContext, useContext } from "react";
 
 /**
  * Context to signal we're in test/headless mode where renderer may not be available.
@@ -15,10 +15,10 @@ export const TestModeContext = createContext<boolean>(false);
  */
 export function useSafeRenderer(): CliRenderer | null {
   const isTestMode = useContext(TestModeContext);
-  
+
   if (isTestMode) {
     return null;
   }
-  
+
   return useRenderer();
 }

package/src/tui/hooks/useSessionEnrichedProviders.ts

@@ -0,0 +1,150 @@
+import { useMemo } from "react";
+import type { AgentSessionAggregate } from "@/agents/types.ts";
+import type { ProviderUsageData } from "@/plugins/types/provider.ts";
+import type { ProviderState } from "../contexts/PluginContext.tsx";
+
+interface ProviderSessionTotals {
+  input: number;
+  output: number;
+  cacheRead: number;
+  cacheWrite: number;
+  costToday: number;
+  costMonth: number;
+}
+
+function aggregateSessionsByProvider(
+  sessions: AgentSessionAggregate[],
+): Map<string, ProviderSessionTotals> {
+  const totals = new Map<string, ProviderSessionTotals>();
+
+  for (const session of sessions) {
+    for (const stream of session.streams) {
+      const pid = stream.providerId;
+      let entry = totals.get(pid);
+      if (!entry) {
+        entry = { input: 0, output: 0, cacheRead: 0, cacheWrite: 0, costToday: 0, costMonth: 0 };
+        totals.set(pid, entry);
+      }
+      entry.input += stream.tokens.input;
+      entry.output += stream.tokens.output;
+      entry.cacheRead += stream.tokens.cacheRead ?? 0;
+      entry.cacheWrite += stream.tokens.cacheWrite ?? 0;
+    }
+
+    // Cost is session-level — attribute to providers proportionally by token share
+    if (session.streams.length > 0) {
+      const totalSessionTokens = session.streams.reduce(
+        (s, st) =>
+          s +
+          st.tokens.input +
+          st.tokens.output +
+          (st.tokens.cacheRead ?? 0) +
+          (st.tokens.cacheWrite ?? 0),
+        0,
+      );
+
+      for (const stream of session.streams) {
+        const pid = stream.providerId;
+        const entry = totals.get(pid)!;
+        const streamTokens =
+          stream.tokens.input +
+          stream.tokens.output +
+          (stream.tokens.cacheRead ?? 0) +
+          (stream.tokens.cacheWrite ?? 0);
+        const ratio = totalSessionTokens > 0 ? streamTokens / totalSessionTokens : 0;
+        entry.costToday += session.costInDay * ratio;
+        entry.costMonth += session.costInMonth * ratio;
+      }
+    }
+  }
+
+  return totals;
+}
+
+function enrichUsageData(
+  usage: ProviderUsageData,
+  sessionTotals: ProviderSessionTotals,
+): ProviderUsageData {
+  const enriched = { ...usage };
+
+  if (!enriched.tokens && (sessionTotals.input > 0 || sessionTotals.output > 0)) {
+    enriched.tokens = {
+      input: sessionTotals.input,
+      output: sessionTotals.output,
+      ...(sessionTotals.cacheRead > 0 ? { cacheRead: sessionTotals.cacheRead } : {}),
+      ...(sessionTotals.cacheWrite > 0 ? { cacheWrite: sessionTotals.cacheWrite } : {}),
+    };
+  }
+
+  const hasSessionCost = sessionTotals.costToday > 0 || sessionTotals.costMonth > 0;
+  if (hasSessionCost) {
+    const costObj: NonNullable<ProviderUsageData["cost"]> = {
+      source: enriched.cost?.source ?? "estimated",
+    };
+    if (enriched.cost?.actual) costObj.actual = enriched.cost.actual;
+    if (enriched.cost?.estimated) {
+      costObj.estimated = enriched.cost.estimated;
+    } else if (sessionTotals.costToday > 0) {
+      costObj.estimated = { total: sessionTotals.costToday, currency: "USD" };
+    }
+    if (sessionTotals.costToday > 0) {
+      costObj.estimatedDaily = { total: sessionTotals.costToday, currency: "USD" };
+    }
+    if (sessionTotals.costMonth > 0) {
+      costObj.estimatedMonthly = { total: sessionTotals.costMonth, currency: "USD" };
+    }
+    enriched.cost = costObj;
+  }
+
+  return enriched;
+}
+
+function findProviderMatch(
+  providerId: string,
+  providers: Map<string, ProviderState>,
+): string | null {
+  if (providers.has(providerId)) return providerId;
+
+  for (const [pluginId, state] of providers) {
+    const aliases = state.plugin.meta?.providerAliases ?? [];
+    if (aliases.includes(providerId)) return pluginId;
+    if (pluginId.includes(providerId) || providerId.includes(pluginId)) return pluginId;
+  }
+  return null;
+}
+
+export function useSessionEnrichedProviders(
+  providers: Map<string, ProviderState>,
+  sessions: AgentSessionAggregate[],
+): Map<string, ProviderState> {
+  return useMemo(() => {
+    if (sessions.length === 0) return providers;
+
+    const sessionTotals = aggregateSessionsByProvider(sessions);
+    if (sessionTotals.size === 0) return providers;
+
+    const enriched = new Map(providers);
+    let changed = false;
+
+    for (const [sessionProviderId, totals] of sessionTotals) {
+      const pluginId = findProviderMatch(sessionProviderId, providers);
+      if (!pluginId) continue;
+
+      const state = enriched.get(pluginId);
+      if (!state?.usage) continue;
+      const alreadyHasAll =
+        state.usage.tokens &&
+        state.usage.cost?.estimatedDaily &&
+        state.usage.cost?.estimatedMonthly;
+      if (alreadyHasAll) continue;
+
+      const enrichedUsage = enrichUsageData(state.usage, totals);
+      if (enrichedUsage !== state.usage) {
+        enriched.set(pluginId, { ...state, usage: enrichedUsage });
+        changed = true;
+      }
+    }
+
+    return changed ? enriched : providers;
+  }, [providers, sessions]);
+}

package/src/tui/hooks/useValueFlash.ts

@@ -1,4 +1,4 @@
-import { useState, useEffect, useRef } from 'react';
+import { useEffect, useRef, useState } from "react";
 
 export interface UseValueFlashOptions {
   durationMs?: number;
@@ -14,10 +14,10 @@ export interface UseValueFlashResult {
 
 export function useValueFlash(
   value: number,
-  options: UseValueFlashOptions = {}
+  options: UseValueFlashOptions = {},
 ): UseValueFlashResult {
   const { durationMs = 600, increaseOnly = true, threshold = 0 } = options;
-  
+
   const prevValueRef = useRef<number>(value);
   const [isFlashing, setIsFlashing] = useState(false);
   const [step, setStep] = useState(0);
@@ -30,10 +30,8 @@ export function useValueFlash(
   useEffect(() => {
     const prevValue = prevValueRef.current;
     const delta = value - prevValue;
-    
-    const shouldFlash = increaseOnly 
-      ? delta > threshold 
-      : Math.abs(delta) > threshold;
+
+    const shouldFlash = increaseOnly ? delta > threshold : Math.abs(delta) > threshold;
 
     if (shouldFlash && prevValue !== value) {
       if (flashTimeoutRef.current) {
@@ -74,18 +72,16 @@ export function useValueFlash(
     };
   }, [value, durationMs, increaseOnly, threshold, steps, stepDuration]);
 
-  const intensity = isFlashing 
-    ? Math.sin((step / steps) * Math.PI) 
-    : 0;
+  const intensity = isFlashing ? Math.sin((step / steps) * Math.PI) : 0;
 
   return { isFlashing, intensity, step };
 }
 
 export function interpolateColor(factor: number, colorA: string, colorB: string): string {
   const parseHex = (hex: string): [number, number, number] | null => {
-    const clean = hex.startsWith('#') ? hex.slice(1) : hex;
+    const clean = hex.startsWith("#") ? hex.slice(1) : hex;
     if (clean.length === 3) {
-      const [r, g, b] = clean.split('').map(c => parseInt(c + c, 16));
+      const [r, g, b] = clean.split("").map((c) => parseInt(c + c, 16));
       return [r!, g!, b!];
     }
     if (clean.length === 6) {
@@ -100,12 +96,12 @@ export function interpolateColor(factor: number, colorA: string, colorB: string)
 
   const a = parseHex(colorA);
   const b = parseHex(colorB);
-  
+
   if (!a || !b) return colorA;
 
   const r = Math.round(a[0] + (b[0] - a[0]) * factor);
   const g = Math.round(a[1] + (b[1] - a[1]) * factor);
   const bl = Math.round(a[2] + (b[2] - a[2]) * factor);
 
-  return `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${bl.toString(16).padStart(2, '0')}`;
+  return `#${r.toString(16).padStart(2, "0")}${g.toString(16).padStart(2, "0")}${bl.toString(16).padStart(2, "0")}`;
 }

package/src/tui/index.tsx

@@ -1,7 +1,10 @@
-import { createCliRenderer } from '@opentui/core';
-import { createRoot } from '@opentui/react';
-import { createAppElement, type CreateAppOptions } from './createApp.tsx';
-import type { DemoPreset } from '@/demo/simulator.ts';
+import { createCliRenderer } from "@opentui/core";
+import { createRoot } from "@opentui/react";
+import type { DemoPreset } from "@/demo/simulator.ts";
+import { pluginLifecycle } from "@/plugins/lifecycle.ts";
+import { notificationBus } from "@/plugins/notification-bus.ts";
+import { type CreateAppOptions, createAppElement } from "./createApp.tsx";
+import { registerShutdown } from "./shutdown.ts";
 
 export interface TuiOptions {
   refreshInterval?: number;
@@ -12,6 +15,8 @@ export interface TuiOptions {
   cliPlugins?: string[];
 }
 
+const FORCE_EXIT_GRACE_MS = 1_000;
+
 export async function startTui(options: TuiOptions = {}) {
   const renderer = await createCliRenderer({
     exitOnCtrlC: false,
@@ -43,8 +48,26 @@ export async function startTui(options: TuiOptions = {}) {
 
   root.render(createAppElement(appOptions));
 
+  const shutdown = async () => {
+    try {
+      await pluginLifecycle.stopAll();
+      await pluginLifecycle.destroyAll();
+    } catch {
+      /* best-effort */
+    }
+    notificationBus.destroy();
+    renderer.destroy();
+
+    const forceExit = setTimeout(() => process.exit(0), FORCE_EXIT_GRACE_MS);
+    if (typeof forceExit === "object" && "unref" in forceExit) {
+      forceExit.unref();
+    }
+  };
+
+  registerShutdown(shutdown);
+
   return renderer;
 }
 
-export { App } from './App.tsx';
-export { createAppElement, type CreateAppOptions } from './createApp.tsx';
+export { App } from "./App.tsx";
+export { type CreateAppOptions, createAppElement } from "./createApp.tsx";