@tokentop/ttop 0.2.2

package/src/tui/hooks/useDashboardKeyboard.ts

@@ -0,0 +1,341 @@
+import { useRef, useEffect } from 'react';
+import { useKeyboard } from '@opentui/react';
+import { useInputFocus } from '../contexts/InputContext.tsx';
+import { useTimeWindow } from '../contexts/TimeWindowContext.tsx';
+import { useToastContext } from '../contexts/ToastContext.tsx';
+import { useAgentSessions } from '../contexts/AgentSessionContext.tsx';
+import { copyToClipboard } from '@/utils/clipboard.ts';
+import type { AgentSessionAggregate } from '../../agents/types.ts';
+import type { DriverDimension, SidebarMode } from '../components/SmartSidebar.tsx';
+
+function formatSessionSummary(session: AgentSessionAggregate): string {
+  const effectiveTokens = session.totals.input + session.totals.output;
+  const cost = session.totalCostUsd?.toFixed(4) ?? '0.00';
+  const primaryModel = session.streams[0]?.modelId ?? 'unknown';
+  const duration = Math.round((session.lastActivityAt - session.startedAt) / 1000);
+  const durationStr = duration > 3600
+    ? `${Math.floor(duration / 3600)}h ${Math.floor((duration % 3600) / 60)}m`
+    : duration > 60
+      ? `${Math.floor(duration / 60)}m ${duration % 60}s`
+      : `${duration}s`;
+
+  const cacheRead = session.totals.cacheRead ?? 0;
+  const cacheWrite = session.totals.cacheWrite ?? 0;
+
+  const lines = [
+    `Session: ${session.sessionId}`,
+    `Agent: ${session.agentName}`,
+    `Model: ${primaryModel}`,
+    `Status: ${session.status}`,
+    `Duration: ${durationStr}`,
+    `Tokens: ${effectiveTokens.toLocaleString()} (in: ${session.totals.input.toLocaleString()}, out: ${session.totals.output.toLocaleString()})`,
+    `Cost: $${cost}`,
+    `Requests: ${session.requestCount}`,
+  ];
+
+  if (cacheRead > 0 || cacheWrite > 0) {
+    const totalInput = session.totals.input + cacheRead + cacheWrite;
+    const hitRate = totalInput > 0 ? Math.round((cacheRead / totalInput) * 100) : 0;
+    lines.push(`Cache: ${hitRate}% hit (read: ${cacheRead.toLocaleString()}, write: ${cacheWrite.toLocaleString()})`);
+  }
+
+  if (session.projectPath) lines.push(`Project: ${session.projectPath}`);
+  return lines.join('\n');
+}
+
+interface DashboardKeyboardState {
+  showHelp: boolean;
+  showSessionDrawer: boolean;
+  selectedRow: number;
+  focusedPanel: 'sessions' | 'sidebar' | 'limits';
+  sidebarCollapsed: boolean;
+  filterQuery: string;
+  isFiltering: boolean;
+  sortField: 'cost' | 'tokens' | 'time';
+  pendingG: boolean;
+  scrollOffset: number;
+  limitSelectedIndex: number;
+  providerCount: number;
+  driverDimension: DriverDimension;
+  selectedDriverIndex: number;
+  activeDriverFilter: string | null;
+  sidebarMode: SidebarMode;
+}
+
+interface DashboardKeyboardActions {
+  setShowHelp: (fn: (prev: boolean) => boolean) => void;
+  openSessionDrawer: () => void;
+  closeSessionDrawer: () => void;
+  setSelectedRow: (fn: (prev: number) => number) => void;
+  setFocusedPanel: (fn: (prev: 'sessions' | 'sidebar' | 'limits') => 'sessions' | 'sidebar' | 'limits') => void;
+  setSidebarCollapsed: (fn: (prev: boolean) => boolean) => void;
+  setFilterQuery: (fn: (prev: string) => string) => void;
+  setIsFiltering: (val: boolean) => void;
+  setSortField: (fn: (prev: 'cost' | 'tokens' | 'time') => 'cost' | 'tokens' | 'time') => void;
+  setPendingG: (val: boolean) => void;
+  setScrollOffset: (val: number) => void;
+  setLimitSelectedIndex: (fn: (prev: number) => number) => void;
+  setDriverDimension: (fn: (prev: DriverDimension) => DriverDimension) => void;
+  setSelectedDriverIndex: (fn: (prev: number) => number) => void;
+  setActiveDriverFilter: (val: string | null) => void;
+}
+
+interface UseDashboardKeyboardProps {
+  state: DashboardKeyboardState;
+  actions: DashboardKeyboardActions;
+  processedSessions: AgentSessionAggregate[];
+}
+
+export function useDashboardKeyboard({
+  state,
+  actions,
+  processedSessions,
+}: UseDashboardKeyboardProps) {
+  const { setInputFocused } = useInputFocus();
+  const { cycleWindow, cycleWindowBack, cycleBudgetLock } = useTimeWindow();
+  const { showToast } = useToastContext();
+  const { refreshSessions } = useAgentSessions();
+
+  const isFilteringRef = useRef(state.isFiltering);
+  const modalOpenRef = useRef(false);
+  const pendingGRef = useRef(false);
+  const sessionsRef = useRef(processedSessions);
+  const focusedPanelRef = useRef(state.focusedPanel);
+  const providerCountRef = useRef(state.providerCount);
+  const filterQueryRef = useRef(state.filterQuery);
+  const driverDimensionRef = useRef(state.driverDimension);
+  const selectedDriverIndexRef = useRef(state.selectedDriverIndex);
+  const activeDriverFilterRef = useRef(state.activeDriverFilter);
+  const sidebarModeRef = useRef(state.sidebarMode);
+
+  useEffect(() => {
+    isFilteringRef.current = state.isFiltering;
+    modalOpenRef.current = state.showHelp || state.showSessionDrawer;
+    pendingGRef.current = state.pendingG;
+    sessionsRef.current = processedSessions;
+    focusedPanelRef.current = state.focusedPanel;
+    providerCountRef.current = state.providerCount;
+    filterQueryRef.current = state.filterQuery;
+    driverDimensionRef.current = state.driverDimension;
+    selectedDriverIndexRef.current = state.selectedDriverIndex;
+    activeDriverFilterRef.current = state.activeDriverFilter;
+    sidebarModeRef.current = state.sidebarMode;
+  }, [state.isFiltering, state.showHelp, state.showSessionDrawer, state.pendingG, processedSessions, state.focusedPanel, state.providerCount, state.filterQuery, state.driverDimension, state.selectedDriverIndex, state.activeDriverFilter, state.sidebarMode]);
+
+  const { isInputFocused } = useInputFocus();
+
+  useKeyboard((key) => {
+    // Let App.tsx handle global Ctrl+ shortcuts (Ctrl+P for capture, Ctrl+S for save, etc.)
+    if (key.ctrl) {
+      return;
+    }
+    
+    // Allow filter mode to handle its own input (no <input> element in RealTimeDashboard)
+    if (isInputFocused && !isFilteringRef.current) {
+      return;
+    }
+
+    if (key.sequence === '?' || (key.shift && key.name === '/')) {
+      actions.setShowHelp(prev => !prev);
+      return;
+    }
+
+    if (modalOpenRef.current) {
+      if (key.name === 'escape' || key.name === 'q' || key.sequence === '?') {
+        actions.setShowHelp(() => false);
+        actions.closeSessionDrawer();
+        return;
+      }
+
+      const selectedSession = processedSessions[state.selectedRow];
+      if (state.showSessionDrawer && selectedSession) {
+        if (key.name === 'c') {
+          const summary = formatSessionSummary(selectedSession);
+          copyToClipboard(summary).then(() => {
+            showToast('Copied to clipboard');
+          }).catch(() => {
+            showToast('Copy failed', 'error');
+          });
+          return;
+        }
+        if (key.name === 'x') {
+          showToast('Export not yet implemented', 'info');
+          return;
+        }
+      }
+      return;
+    }
+
+    if (isFilteringRef.current) {
+      if (key.name === 'enter' || key.name === 'return') {
+        actions.setIsFiltering(false);
+        setInputFocused(false);
+        return;
+      }
+      if (key.name === 'escape') {
+        actions.setFilterQuery(() => '');
+        actions.setIsFiltering(false);
+        setInputFocused(false);
+        return;
+      }
+      if (key.name === 'backspace') {
+        actions.setFilterQuery(q => q.slice(0, -1));
+        return;
+      }
+      if (key.sequence && key.sequence.length === 1 && /^[a-zA-Z0-9\-_./]$/.test(key.sequence)) {
+        actions.setFilterQuery(q => q + key.sequence);
+        return;
+      }
+      return;
+    }
+
+    if (key.name === 'tab' && !key.shift) {
+      actions.setFocusedPanel(curr => {
+        if (curr === 'sessions') return 'limits';
+        if (curr === 'limits') return 'sidebar';
+        return 'sessions';
+      });
+      return;
+    }
+    if (key.name === 'tab' && key.shift) {
+      actions.setFocusedPanel(curr => {
+        if (curr === 'sessions') return 'sidebar';
+        if (curr === 'sidebar') return 'limits';
+        return 'sessions';
+      });
+      return;
+    }
+
+    if (key.name === 'l' && focusedPanelRef.current !== 'limits') {
+      actions.setFocusedPanel(() => 'limits');
+      return;
+    }
+
+    if (key.name === 'i') {
+      actions.setSidebarCollapsed(curr => !curr);
+      return;
+    }
+
+    if (key.name === '/' || key.sequence === '/') {
+      actions.setIsFiltering(true);
+      setInputFocused(true);
+      return;
+    }
+
+    if (key.name === 's') {
+      actions.setSortField(curr => curr === 'cost' ? 'tokens' : 'cost');
+      return;
+    }
+
+    // Clear applied filter with Escape (when not in typing mode)
+    if (key.name === 'escape' && filterQueryRef.current) {
+      actions.setFilterQuery(() => '');
+      return;
+    }
+
+    if (key.name === 't' && key.shift) {
+      cycleWindowBack();
+      return;
+    }
+
+    if (key.name === 't') {
+      cycleWindow();
+      return;
+    }
+
+    if (key.name === 'r') {
+      refreshSessions();
+      return;
+    }
+
+    if (focusedPanelRef.current === 'sessions') {
+      const sessions = sessionsRef.current;
+      if (key.name === 'down' || key.name === 'j') {
+        actions.setPendingG(false);
+        actions.setSelectedRow(curr => Math.min(curr + 1, sessions.length - 1));
+      } else if (key.name === 'up' || key.name === 'k') {
+        actions.setPendingG(false);
+        actions.setSelectedRow(curr => Math.max(curr - 1, 0));
+      } else if (key.shift && key.name === 'g') {
+        actions.setPendingG(false);
+        actions.setSelectedRow(() => sessions.length - 1);
+      } else if (key.name === 'g') {
+        if (pendingGRef.current) {
+          actions.setSelectedRow(() => 0);
+          actions.setScrollOffset(0);
+          actions.setPendingG(false);
+        } else {
+          actions.setPendingG(true);
+          setTimeout(() => actions.setPendingG(false), 500);
+        }
+      } else if (key.name === 'return' && sessions.length > 0) {
+        actions.setPendingG(false);
+        actions.openSessionDrawer();
+      } else {
+        actions.setPendingG(false);
+      }
+    }
+
+    if (focusedPanelRef.current === 'limits') {
+      const maxIndex = Math.max(0, providerCountRef.current - 1);
+      if (key.name === 'left' || key.name === 'h') {
+        actions.setLimitSelectedIndex(curr => Math.max(curr - 1, 0));
+        return;
+      } else if (key.name === 'right' || key.name === 'l') {
+        actions.setLimitSelectedIndex(curr => Math.min(curr + 1, maxIndex));
+        return;
+      } else if (key.name === 'escape') {
+        actions.setFocusedPanel(() => 'sessions');
+        actions.setLimitSelectedIndex(() => 0);
+        return;
+      }
+    }
+
+    if (focusedPanelRef.current === 'sidebar') {
+      if (key.name === 'down' || key.name === 'j') {
+        actions.setSelectedDriverIndex(curr => curr + 1);
+        return;
+      } else if (key.name === 'up' || key.name === 'k') {
+        actions.setSelectedDriverIndex(curr => Math.max(curr - 1, 0));
+        return;
+      }
+      
+      if (key.name === 'return') {
+        if (activeDriverFilterRef.current !== null) {
+          actions.setActiveDriverFilter(null);
+        } else {
+          actions.setActiveDriverFilter('__TOGGLE_SELECTED__');
+        }
+        return;
+      }
+      
+      if (key.name === 'm') {
+        actions.setDriverDimension(() => 'model');
+        actions.setSelectedDriverIndex(() => 0);
+        return;
+      } else if (key.name === 'p') {
+        actions.setDriverDimension(() => 'project');
+        actions.setSelectedDriverIndex(() => 0);
+        return;
+      } else if (key.name === 'a') {
+        actions.setDriverDimension(() => 'agent');
+        actions.setSelectedDriverIndex(() => 0);
+        return;
+      }
+      
+      if (key.name === 'b') {
+        cycleBudgetLock();
+        return;
+      }
+      
+      if (key.name === 'escape') {
+        if (activeDriverFilterRef.current !== null) {
+          actions.setActiveDriverFilter(null);
+        } else {
+          actions.setFocusedPanel(() => 'sessions');
+        }
+        return;
+      }
+    }
+  });
+}

package/src/tui/hooks/useDashboardState.ts

@@ -0,0 +1,116 @@
+import { useState, useMemo, useRef, useEffect } from 'react';
+import { totalTokenCount } from '../../agents/types.ts';
+import type { AgentSessionAggregate, AgentSessionStream } from '../../agents/types.ts';
+
+export interface DashboardDeltas {
+  cost: number;
+  tokens: number;
+}
+
+export interface UseDashboardStateResult {
+  showHelp: boolean;
+  setShowHelp: React.Dispatch<React.SetStateAction<boolean>>;
+  showDebugInspector: boolean;
+  setShowDebugInspector: React.Dispatch<React.SetStateAction<boolean>>;
+  selectedRow: number;
+  setSelectedRow: React.Dispatch<React.SetStateAction<number>>;
+  focusedPanel: 'sessions' | 'sidebar';
+  setFocusedPanel: React.Dispatch<React.SetStateAction<'sessions' | 'sidebar'>>;
+  sidebarCollapsed: boolean;
+  setSidebarCollapsed: React.Dispatch<React.SetStateAction<boolean>>;
+  filterQuery: string;
+  setFilterQuery: React.Dispatch<React.SetStateAction<string>>;
+  isFiltering: boolean;
+  setIsFiltering: React.Dispatch<React.SetStateAction<boolean>>;
+  sortField: 'cost' | 'tokens' | 'time';
+  setSortField: React.Dispatch<React.SetStateAction<'cost' | 'tokens' | 'time'>>;
+  deltas: DashboardDeltas;
+  processedSessions: AgentSessionAggregate[];
+  totalCost: number;
+  totalTokens: number;
+  totalRequests: number;
+  activeCount: number;
+}
+
+export function useDashboardState(sessions: AgentSessionAggregate[]): UseDashboardStateResult {
+  const [showHelp, setShowHelp] = useState(false);
+  const [showDebugInspector, setShowDebugInspector] = useState(false);
+  const [selectedRow, setSelectedRow] = useState(0);
+  const [focusedPanel, setFocusedPanel] = useState<'sessions' | 'sidebar'>('sessions');
+  const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
+  const [filterQuery, setFilterQuery] = useState('');
+  const [isFiltering, setIsFiltering] = useState(false);
+  const [sortField, setSortField] = useState<'cost' | 'tokens' | 'time'>('cost');
+  
+  const historyRef = useRef<{time: number, cost: number, tokens: number}[]>([]);
+  const [deltas, setDeltas] = useState<DashboardDeltas>({ cost: 0, tokens: 0 });
+
+  const totalCost = sessions.reduce((acc, s) => acc + (s.totalCostUsd ?? 0), 0);
+  const totalTokens = sessions.reduce((acc, s) => acc + totalTokenCount(s.totals), 0);
+  const totalRequests = sessions.reduce((acc, s) => acc + s.requestCount, 0);
+  const activeCount = sessions.filter(s => s.status === 'active').length;
+
+  useEffect(() => {
+    const currentTime = Date.now();
+    historyRef.current.push({ time: currentTime, cost: totalCost, tokens: totalTokens });
+    if (historyRef.current.length > 300) historyRef.current.shift();
+
+    const fiveMinAgo = historyRef.current[0];
+    if (fiveMinAgo) {
+      setDeltas({
+        cost: totalCost - fiveMinAgo.cost,
+        tokens: totalTokens - fiveMinAgo.tokens
+      });
+    }
+  }, [sessions, totalCost, totalTokens]);
+
+  const processedSessions = useMemo(() => {
+    let result = [...sessions];
+    
+    if (filterQuery) {
+      const q = filterQuery.toLowerCase();
+      result = result.filter(s => 
+        s.agentName.toLowerCase().includes(q) || 
+        s.streams.some((st: AgentSessionStream) => st.modelId.toLowerCase().includes(q)) ||
+        (s.projectPath?.toLowerCase().includes(q) ?? false)
+      );
+    }
+
+    result.sort((a, b) => {
+      const aActive = a.status === 'active' ? 1 : 0;
+      const bActive = b.status === 'active' ? 1 : 0;
+      if (bActive !== aActive) return bActive - aActive;
+      
+      if (sortField === 'cost') return (b.totalCostUsd ?? 0) - (a.totalCostUsd ?? 0);
+      if (sortField === 'tokens') return (b.totals.input + b.totals.output) - (a.totals.input + a.totals.output);
+      return b.lastActivityAt - a.lastActivityAt;
+    });
+
+    return result;
+  }, [sessions, filterQuery, sortField]);
+
+  return {
+    showHelp,
+    setShowHelp,
+    showDebugInspector,
+    setShowDebugInspector,
+    selectedRow,
+    setSelectedRow,
+    focusedPanel,
+    setFocusedPanel,
+    sidebarCollapsed,
+    setSidebarCollapsed,
+    filterQuery,
+    setFilterQuery,
+    isFiltering,
+    setIsFiltering,
+    sortField,
+    setSortField,
+    deltas,
+    processedSessions,
+    totalCost,
+    totalTokens,
+    totalRequests,
+    activeCount,
+  };
+}

package/src/tui/hooks/useEmaActivity.ts

@@ -0,0 +1,223 @@
+import { useState, useEffect, useRef, useCallback } from 'react';
+
+const BUCKET_COUNT = 60;
+const AVG_WINDOW = 10;
+
+export interface ActivityState {
+  instantRate: number;
+  avgRate: number;
+  isSpike: boolean;
+}
+
+export interface ActivityDebugData {
+  lastDeltaTokens: number;
+  lastDt: number;
+  bucketsShifted: number;
+  currentBucketValue: number;
+  refreshCount: number;
+  lastRefreshTime: number;
+}
+
+export interface UseActivityRateResult {
+  activity: ActivityState;
+  sparkData: number[];
+  debugDataRef: React.MutableRefObject<ActivityDebugData>;
+  injectDelta: (delta: number) => void;
+}
+
+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 stateRef = useRef<{ 
+    lastTokens: number; 
+    lastTokenTime: number;
+    lastShiftTime: number;
+    initialized: boolean;
+  }>({ 
+    lastTokens: -1, 
+    lastTokenTime: Date.now(),
+    lastShiftTime: Date.now(),
+    initialized: false,
+  });
+  
+  const debugDataRef = useRef<ActivityDebugData>({
+    lastDeltaTokens: 0,
+    lastDt: 0,
+    bucketsShifted: 0,
+    currentBucketValue: 0,
+    refreshCount: 0,
+    lastRefreshTime: Date.now(),
+  });
+
+  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 };
+  }, []);
+
+  const shiftBucketsWithDecay = useCallback((bucketData: number[], count: number): number[] => {
+    if (count <= 0) return bucketData;
+    const newBuckets = [...bucketData];
+    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;
+    }
+    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);
+      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 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, 
+        lastTokenTime: now,
+        lastShiftTime: now,
+        initialized: totalTokens > 0,
+      };
+      return;
+    }
+
+    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
+    // enough time has passed for a proper rate calculation.
+    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 => {
+        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;
+    }
+  }, [totalTokens, calculateRates, shiftBucketsWithDecay, applyActivityRamp]);
+
+  useEffect(() => {
+    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 => {
+          const newBuckets = shiftBucketsWithDecay(prev, bucketsToShift);
+          stateRef.current.lastShiftTime = now;
+          
+          const rates = calculateRates(newBuckets);
+          setActivity(rates);
+          return newBuckets;
+        });
+      }
+    }, 1000);
+
+    return () => clearInterval(interval);
+  }, [calculateRates, shiftBucketsWithDecay]);
+
+  return { 
+    activity, 
+    sparkData: buckets,
+    debugDataRef,
+    injectDelta,
+  };
+}