@tokentop/ttop 0.2.2 → 0.4.0

package/src/tui/components/SmartSidebar.tsx

@@ -1,14 +1,14 @@
-import { useMemo } from 'react';
-import { useTerminalDimensions } from '@opentui/react';
-import { useColors } from '../contexts/ThemeContext.tsx';
-import { useConfig } from '../contexts/ConfigContext.tsx';
-import { useTimeWindow } from '../contexts/TimeWindowContext.tsx';
-import { usePulse } from '../hooks/usePulse.ts';
-import type { AgentSessionAggregate, AgentSessionStream } from '../../agents/types.ts';
+import { useTerminalDimensions } from "@opentui/react";
+import { useMemo } from "react";
+import type { AgentSessionAggregate, AgentSessionStream } from "../../agents/types.ts";
+import { useConfig } from "../contexts/ConfigContext.tsx";
+import { useColors } from "../contexts/ThemeContext.tsx";
+import { useTimeWindow } from "../contexts/TimeWindowContext.tsx";
+import { usePulse } from "../hooks/usePulse.ts";
 
-export type DriverDimension = 'model' | 'project' | 'agent';
+export type DriverDimension = "model" | "project" | "agent";
 
-export type SidebarMode = 'full' | 'compact' | 'minimal' | 'micro' | 'hidden';
+export type SidebarMode = "full" | "compact" | "minimal" | "micro" | "hidden";
 
 export interface DriverStats {
   id: string;
@@ -24,7 +24,7 @@ export interface DriverStats {
 export interface SmartSidebarProps {
   sessions: AgentSessionAggregate[];
   budgetCost: number;
-  focusedPanel: 'sessions' | 'sidebar' | 'limits';
+  focusedPanel: "sessions" | "sidebar" | "limits";
   dimension: DriverDimension;
   selectedDriverIndex: number;
   activeDriverFilter: string | null;
@@ -34,24 +34,24 @@ export interface SmartSidebarProps {
 function interpolatePulseColor(intensity: number, baseColor: string, dimColor: string): string {
   const dimAmount = 0.4;
   const t = intensity * dimAmount;
-  
+
   const parseHex = (hex: string) => {
-    const h = hex.replace('#', '');
+    const h = hex.replace("#", "");
     return {
       r: parseInt(h.substring(0, 2), 16),
       g: parseInt(h.substring(2, 4), 16),
       b: parseInt(h.substring(4, 6), 16),
     };
   };
-  
+
   const base = parseHex(baseColor);
   const dim = parseHex(dimColor);
-  
+
   const r = Math.round(base.r + (dim.r - base.r) * t);
   const g = Math.round(base.g + (dim.g - base.g) * t);
   const b = Math.round(base.b + (dim.b - base.b) * t);
-  
-  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")}`;
 }
 
 function formatCurrency(val: number): string {
@@ -68,51 +68,56 @@ function formatBudget(val: number): string {
 }
 
 function formatDelta(val: number): string {
-  if (val < 0.01) return '';
+  if (val < 0.01) return "";
   if (val >= 10) return `+$${val.toFixed(1)}`;
   return `+$${val.toFixed(2)}`;
 }
 
 function formatPercent(val: number): string {
-  if (val < 1) return '<1%';
+  if (val < 1) return "<1%";
   return `${Math.round(val)}%`;
 }
 
 function truncateWithEllipsis(str: string, maxLen: number): string {
   if (str.length <= maxLen) return str;
-  return str.slice(0, maxLen - 1) + '…';
+  return str.slice(0, maxLen - 1) + "…";
 }
 
 function getSidebarMode(width: number): SidebarMode {
-  if (width >= 140) return 'full';
-  if (width >= 105) return 'compact';
-  if (width >= 95) return 'minimal';
-  if (width >= 85) return 'micro';
-  return 'hidden';
+  if (width >= 140) return "full";
+  if (width >= 105) return "compact";
+  if (width >= 95) return "minimal";
+  if (width >= 85) return "micro";
+  return "hidden";
 }
 
 function getSidebarWidth(mode: SidebarMode, terminalWidth: number): number {
-  if (mode === 'micro') return 28;
-  if (mode === 'minimal') return 32;
-  if (mode === 'compact') return 36;
+  if (mode === "micro") return 28;
+  if (mode === "minimal") return 32;
+  if (mode === "compact") return 36;
   if (terminalWidth >= 160) return 44;
   if (terminalWidth >= 140) return 40;
   return 38;
 }
 
 function extractRepoName(projectPath: string | undefined | null): string {
-  if (!projectPath) return 'unknown';
-  const normalized = projectPath.replace(/\\/g, '/');
-  return normalized.split('/').filter(Boolean).pop() ?? 'unknown';
+  if (!projectPath) return "unknown";
+  const normalized = projectPath.replace(/\\/g, "/");
+  return normalized.split("/").filter(Boolean).pop() ?? "unknown";
 }
 
-function makeProgressBar(percent: number, width: number, filledChar = '█', emptyChar = '·'): string {
+function makeProgressBar(
+  percent: number,
+  width: number,
+  filledChar = "█",
+  emptyChar = "·",
+): string {
   const clamped = Math.max(0, Math.min(100, percent));
   const filledWidth = Math.round((clamped / 100) * width);
   return filledChar.repeat(filledWidth) + emptyChar.repeat(width - filledWidth);
 }
 
-function makeDivider(width: number, char = '─'): string {
+function makeDivider(width: number, char = "─"): string {
   return char.repeat(Math.max(0, width - 2));
 }
 
@@ -127,27 +132,32 @@ function BudgetSection({ totalCost, budgetCost, mode, sidebarWidth }: BudgetSect
   const colors = useColors();
   const { config } = useConfig();
   const { budgetType, budgetTypeLabel, budgetLock } = useTimeWindow();
-  
-  const activeBudget = budgetType === 'daily' ? config.budgets.daily
-    : budgetType === 'weekly' ? config.budgets.weekly
-    : budgetType === 'monthly' ? config.budgets.monthly
-    : null;
-  
-  const hasBudgetLimit = activeBudget !== null && budgetType !== 'none';
+
+  const activeBudget =
+    budgetType === "daily"
+      ? config.budgets.daily
+      : budgetType === "weekly"
+        ? config.budgets.weekly
+        : budgetType === "monthly"
+          ? config.budgets.monthly
+          : null;
+
+  const hasBudgetLimit = activeBudget !== null && budgetType !== "none";
   const budgetUsedPercent = hasBudgetLimit ? (budgetCost / activeBudget) * 100 : 0;
-  
+
   const isCritical = hasBudgetLimit && budgetUsedPercent >= config.alerts.criticalPercent;
-  const isWarning = hasBudgetLimit && budgetUsedPercent >= config.alerts.warningPercent && !isCritical;
-  
+  const isWarning =
+    hasBudgetLimit && budgetUsedPercent >= config.alerts.warningPercent && !isCritical;
+
   const criticalPulseStep = usePulse({ enabled: isCritical, intervalMs: 80 });
   const warningPulseStep = usePulse({ enabled: isWarning, intervalMs: 200 });
-  
-  const pulseIntensity = isCritical 
-    ? Math.abs(Math.sin(criticalPulseStep * 0.3)) 
-    : isWarning 
+
+  const pulseIntensity = isCritical
+    ? Math.abs(Math.sin(criticalPulseStep * 0.3))
+    : isWarning
       ? Math.abs(Math.sin(warningPulseStep * 0.25))
       : 0;
-  
+
   const getStatusColor = () => {
     if (isCritical) {
       return interpolatePulseColor(pulseIntensity, colors.error, colors.background);
@@ -157,82 +167,112 @@ function BudgetSection({ totalCost, budgetCost, mode, sidebarWidth }: BudgetSect
     }
     return colors.success;
   };
-  
+
   const statusColor = hasBudgetLimit ? getStatusColor() : colors.text;
   const innerWidth = sidebarWidth - 4;
   const barWidth = Math.max(10, innerWidth - 6);
   const bar = makeProgressBar(budgetUsedPercent, barWidth);
-  
-  const isLocked = budgetLock !== 'sync';
-  const lockSuffix = isLocked ? ' [locked]' : '';
-  const headerLabel = budgetType === 'none' ? 'TOTAL COST' : `${budgetTypeLabel.toUpperCase()} BUDGET${lockSuffix}`;
-  
-  if (budgetType === 'none') {
-    if (mode === 'micro') {
-       return (
-         <box flexDirection="row" height={1} paddingX={1}>
-           <text fg={colors.textMuted} height={1}>Total: </text>
-           <text fg={colors.text} height={1}><strong>{formatCurrency(totalCost)}</strong></text>
-         </box>
-       );
+
+  const isLocked = budgetLock !== "sync";
+  const lockSuffix = isLocked ? " [locked]" : "";
+  const headerLabel =
+    budgetType === "none" ? "TOTAL COST" : `${budgetTypeLabel.toUpperCase()} BUDGET${lockSuffix}`;
+
+  if (budgetType === "none") {
+    if (mode === "micro") {
+      return (
+        <box flexDirection="row" height={1} paddingX={1}>
+          <text fg={colors.textMuted} height={1}>
+            Total:{" "}
+          </text>
+          <text fg={colors.text} height={1}>
+            <strong>{formatCurrency(totalCost)}</strong>
+          </text>
+        </box>
+      );
     }
-    
+
     return (
       <box flexDirection="column" paddingX={1}>
-        <text fg={colors.textMuted} height={1}><strong>{headerLabel}</strong></text>
-        <text fg={colors.text} height={1}><strong>{formatCurrency(totalCost)}</strong></text>
+        <text fg={colors.textMuted} height={1}>
+          <strong>{headerLabel}</strong>
+        </text>
+        <text fg={colors.text} height={1}>
+          <strong>{formatCurrency(totalCost)}</strong>
+        </text>
       </box>
     );
   }
-  
+
   if (!activeBudget) {
-    if (mode === 'micro') {
-       return (
-         <box flexDirection="row" height={1} paddingX={1}>
-           <text fg={colors.textMuted} height={1}>No {budgetTypeLabel.toLowerCase()} budget</text>
-         </box>
-       );
+    if (mode === "micro") {
+      return (
+        <box flexDirection="row" height={1} paddingX={1}>
+          <text fg={colors.textMuted} height={1}>
+            No {budgetTypeLabel.toLowerCase()} budget
+          </text>
+        </box>
+      );
     }
-    
-     return (
-       <box flexDirection="column" paddingX={1}>
-         <text fg={colors.textMuted} height={1}><strong>{headerLabel}</strong></text>
-         <text fg={colors.textSubtle} height={1}>Not set</text>
-         <text fg={colors.textSubtle} height={1}>(, to configure)</text>
-       </box>
-     );
+
+    return (
+      <box flexDirection="column" paddingX={1}>
+        <text fg={colors.textMuted} height={1}>
+          <strong>{headerLabel}</strong>
+        </text>
+        <text fg={colors.textSubtle} height={1}>
+          Not set
+        </text>
+        <text fg={colors.textSubtle} height={1}>
+          (, to configure)
+        </text>
+      </box>
+    );
   }
-  
-  if (mode === 'micro') {
-     return (
-       <box flexDirection="column" paddingX={1}>
-         <box flexDirection="row" height={1}>
-           <text fg={colors.textMuted} height={1}>{budgetTypeLabel} </text>
-           <text fg={statusColor} height={1}><strong>{formatPercent(budgetUsedPercent)}</strong></text>
-           <text fg={colors.textMuted} height={1}> {formatBudget(budgetCost)}/{formatBudget(activeBudget)}</text>
-         </box>
-       </box>
-     );
+
+  if (mode === "micro") {
+    return (
+      <box flexDirection="column" paddingX={1}>
+        <box flexDirection="row" height={1}>
+          <text fg={colors.textMuted} height={1}>
+            {budgetTypeLabel}{" "}
+          </text>
+          <text fg={statusColor} height={1}>
+            <strong>{formatPercent(budgetUsedPercent)}</strong>
+          </text>
+          <text fg={colors.textMuted} height={1}>
+            {" "}
+            {formatBudget(budgetCost)}/{formatBudget(activeBudget)}
+          </text>
+        </box>
+      </box>
+    );
   }
-  
-   return (
-     <box flexDirection="column" paddingX={1}>
-       <box flexDirection="row" height={1}>
-         <text fg={colors.textMuted}><strong>{headerLabel}</strong></text>
-         <text flexGrow={1}></text>
-         <text fg={statusColor}><strong>{formatPercent(budgetUsedPercent)}</strong></text>
-       </box>
-       
-       <box flexDirection="row" height={1}>
-         <text fg={statusColor}>{bar}</text>
-       </box>
-       
-       <box flexDirection="row" height={1}>
-         <text fg={colors.text}><strong>{formatBudget(budgetCost)}</strong></text>
-         <text fg={colors.textMuted}>/{formatBudget(activeBudget)}</text>
-       </box>
-     </box>
-   );
+
+  return (
+    <box flexDirection="column" paddingX={1}>
+      <box flexDirection="row" height={1}>
+        <text fg={colors.textMuted}>
+          <strong>{headerLabel}</strong>
+        </text>
+        <text flexGrow={1}></text>
+        <text fg={statusColor}>
+          <strong>{formatPercent(budgetUsedPercent)}</strong>
+        </text>
+      </box>
+
+      <box flexDirection="row" height={1}>
+        <text fg={statusColor}>{bar}</text>
+      </box>
+
+      <box flexDirection="row" height={1}>
+        <text fg={colors.text}>
+          <strong>{formatBudget(budgetCost)}</strong>
+        </text>
+        <text fg={colors.textMuted}>/{formatBudget(activeBudget)}</text>
+      </box>
+    </box>
+  );
 }
 
 interface TopDriversSectionProps {
@@ -248,9 +288,9 @@ interface TopDriversSectionProps {
 }
 
 const DIMENSION_LABELS: Record<DriverDimension, string> = {
-  model: 'MODELS',
-  project: 'PROJECTS',
-  agent: 'AGENTS',
+  model: "MODELS",
+  project: "PROJECTS",
+  agent: "AGENTS",
 };
 
 function TopDriversSection({
@@ -265,53 +305,64 @@ function TopDriversSection({
   getProviderColor,
 }: TopDriversSectionProps) {
   const colors = useColors();
-  
+
   const displayDrivers = drivers.slice(0, maxDrivers);
   const innerWidth = sidebarWidth - 4;
-  
-  const showBars = mode === 'full' || mode === 'compact';
-  const showDelta = mode === 'full';
-  const showPercent = mode !== 'minimal';
-  
+
+  const showBars = mode === "full" || mode === "compact";
+  const showDelta = mode === "full";
+  const showPercent = mode !== "minimal";
+
   const prefixWidth = 2;
-  const nameWidth = mode === 'full' ? 14 : mode === 'compact' ? 12 : 10;
+  const nameWidth = mode === "full" ? 14 : mode === "compact" ? 12 : 10;
   const deltaWidth = showDelta ? 7 : 0;
   const percentWidth = showPercent ? 5 : 0;
-  const barWidth = showBars ? Math.max(8, innerWidth - prefixWidth - nameWidth - deltaWidth - percentWidth - 2) : 0;
-  
-  const dimensionToggle = ['m', 'p', 'a'].map(k => {
-    const isActive = (k === 'm' && dimension === 'model') ||
-                     (k === 'p' && dimension === 'project') ||
-                     (k === 'a' && dimension === 'agent');
-    return isActive ? k.toUpperCase() : k;
-  }).join('/');
-  
-   return (
-     <box flexDirection="column" paddingX={1}>
-       <box flexDirection="row" height={1}>
-         <text fg={colors.textMuted}><strong>TOP {DIMENSION_LABELS[dimension]}</strong></text>
-         <text flexGrow={1}></text>
-         <text fg={colors.textSubtle}>[{dimensionToggle}]</text>
-       </box>
-      
+  const barWidth = showBars
+    ? Math.max(8, innerWidth - prefixWidth - nameWidth - deltaWidth - percentWidth - 2)
+    : 0;
+
+  const dimensionToggle = ["m", "p", "a"]
+    .map((k) => {
+      const isActive =
+        (k === "m" && dimension === "model") ||
+        (k === "p" && dimension === "project") ||
+        (k === "a" && dimension === "agent");
+      return isActive ? k.toUpperCase() : k;
+    })
+    .join("/");
+
+  return (
+    <box flexDirection="column" paddingX={1}>
+      <box flexDirection="row" height={1}>
+        <text fg={colors.textMuted}>
+          <strong>TOP {DIMENSION_LABELS[dimension]}</strong>
+        </text>
+        <text flexGrow={1}></text>
+        <text fg={colors.textSubtle}>[{dimensionToggle}]</text>
+      </box>
+
       {displayDrivers.length === 0 ? (
-        <text fg={colors.textSubtle} height={1}>No data</text>
+        <text fg={colors.textSubtle} height={1}>
+          No data
+        </text>
       ) : (
         displayDrivers.map((driver, idx) => {
           const isSelected = isFocused && idx === selectedIndex;
           const isFiltered = activeFilter === driver.id;
-          
-          const hotPrefix = driver.isHot ? '▲' : ' ';
-          const selectPrefix = isSelected ? '▸' : isFiltered ? '●' : ' ';
+
+          const hotPrefix = driver.isHot ? "▲" : " ";
+          const selectPrefix = isSelected ? "▸" : isFiltered ? "●" : " ";
           const displayName = truncateWithEllipsis(driver.displayName, nameWidth);
           const paddedName = displayName.padEnd(nameWidth);
-          const delta = showDelta ? formatDelta(driver.delta5m).padStart(deltaWidth) : '';
-          const percent = showPercent ? formatPercent(driver.costShare).padStart(percentWidth) : '';
-          const bar = showBars ? makeProgressBar(driver.costShare, barWidth) : '';
-          
+          const delta = showDelta ? formatDelta(driver.delta5m).padStart(deltaWidth) : "";
+          const percent = showPercent ? formatPercent(driver.costShare).padStart(percentWidth) : "";
+          const bar = showBars ? makeProgressBar(driver.costShare, barWidth) : "";
+
           const textColor = isSelected ? colors.text : colors.textSubtle;
-          const nameColor = isSelected ? colors.primary : getProviderColor(driver.providerId ?? driver.id);
-          
+          const nameColor = isSelected
+            ? colors.primary
+            : getProviderColor(driver.providerId ?? driver.id);
+
           if (showBars) {
             return (
               <box key={driver.id} flexDirection="column" height={2}>
@@ -323,12 +374,12 @@ function TopDriversSection({
                   {showPercent && <text fg={colors.textMuted}>{percent}</text>}
                 </box>
                 <box flexDirection="row" height={1}>
-                  <text fg={isSelected ? colors.primary : colors.textSubtle}>  {bar}</text>
+                  <text fg={isSelected ? colors.primary : colors.textSubtle}> {bar}</text>
                 </box>
               </box>
             );
           }
-          
+
           return (
             <box key={driver.id} flexDirection="row" height={1}>
               <text fg={driver.isHot ? colors.warning : colors.textSubtle}>{hotPrefix}</text>
@@ -339,9 +390,11 @@ function TopDriversSection({
           );
         })
       )}
-      
+
       {isFocused && displayDrivers.length > 0 && (
-        <text fg={colors.textSubtle} height={1}>↑↓ select  Enter filter</text>
+        <text fg={colors.textSubtle} height={1}>
+          ↑↓ select Enter filter
+        </text>
       )}
     </box>
   );
@@ -353,15 +406,17 @@ interface DividerProps {
 
 function Divider({ width }: DividerProps) {
   const colors = useColors();
-   return (
-     <box paddingX={1} height={1}>
-       <text fg={colors.border} height={1}>{makeDivider(width)}</text>
-     </box>
-   );
+  return (
+    <box paddingX={1} height={1}>
+      <text fg={colors.border} height={1}>
+        {makeDivider(width)}
+      </text>
+    </box>
+  );
 }
 
 interface EfficiencyInsight {
-  type: 'cache' | 'verbosity' | 'chatty' | 'fallback';
+  type: "cache" | "verbosity" | "chatty" | "fallback";
   primaryLabel: string;
   primaryValue: string;
   actionLine: string;
@@ -376,13 +431,16 @@ interface EfficiencySectionProps {
 
 function EfficiencySection({ sessions, mode }: EfficiencySectionProps) {
   const colors = useColors();
-  
+
   const metrics = useMemo(() => {
-    let totalInput = 0, totalOutput = 0, totalCacheRead = 0;
-    let totalCost = 0, totalRequests = 0;
+    let totalInput = 0,
+      totalOutput = 0,
+      totalCacheRead = 0;
+    let totalCost = 0,
+      totalRequests = 0;
     let hasCacheData = false;
 
-    sessions.forEach(s => {
+    sessions.forEach((s) => {
       s.streams.forEach((st: AgentSessionStream) => {
         totalInput += st.tokens.input;
         totalOutput += st.tokens.output;
@@ -393,23 +451,33 @@ function EfficiencySection({ sessions, mode }: EfficiencySectionProps) {
       });
     });
 
-    const cacheHitRate = (totalInput + totalCacheRead) > 0
-      ? (totalCacheRead / (totalInput + totalCacheRead)) * 100 : 0;
-    const outputShare = (totalInput + totalOutput) > 0
-      ? (totalOutput / (totalInput + totalOutput)) * 100 : 0;
+    const cacheHitRate =
+      totalInput + totalCacheRead > 0 ? (totalCacheRead / (totalInput + totalCacheRead)) * 100 : 0;
+    const outputShare =
+      totalInput + totalOutput > 0 ? (totalOutput / (totalInput + totalOutput)) * 100 : 0;
     const costPerReq = totalRequests > 0 ? totalCost / totalRequests : 0;
 
-    return { totalInput, totalOutput, totalCacheRead, totalCost, totalRequests, hasCacheData, cacheHitRate, outputShare, costPerReq };
+    return {
+      totalInput,
+      totalOutput,
+      totalCacheRead,
+      totalCost,
+      totalRequests,
+      hasCacheData,
+      cacheHitRate,
+      outputShare,
+      costPerReq,
+    };
   }, [sessions]);
 
   const insight: EfficiencyInsight = useMemo(() => {
     // Priority 1: Cache Leverage
     if (metrics.hasCacheData && metrics.totalInput > 1000 && metrics.cacheHitRate < 80) {
       return {
-        type: 'cache',
-        primaryLabel: 'Cache hit:',
+        type: "cache",
+        primaryLabel: "Cache hit:",
         primaryValue: `${Math.round(metrics.cacheHitRate)}%`,
-        actionLine: 'Keep sessions open; avoid resets',
+        actionLine: "Keep sessions open; avoid resets",
         secondaryLabel: `$/req: ${formatCurrency(metrics.costPerReq)}  Out: ${Math.round(metrics.outputShare)}%`,
         isWarning: metrics.cacheHitRate < 20,
       };
@@ -417,10 +485,10 @@ function EfficiencySection({ sessions, mode }: EfficiencySectionProps) {
     // Priority 2: Output Verbosity
     if (metrics.totalInput + metrics.totalOutput > 1000 && metrics.outputShare > 65) {
       return {
-        type: 'verbosity',
-        primaryLabel: 'Output share:',
+        type: "verbosity",
+        primaryLabel: "Output share:",
         primaryValue: `${Math.round(metrics.outputShare)}%`,
-        actionLine: 'Ask for diffs; less commentary',
+        actionLine: "Ask for diffs; less commentary",
         secondaryLabel: `$/req: ${formatCurrency(metrics.costPerReq)}`,
         isWarning: metrics.outputShare > 75,
       };
@@ -428,59 +496,79 @@ function EfficiencySection({ sessions, mode }: EfficiencySectionProps) {
     // Priority 3: Chatty Usage
     if (metrics.totalRequests > 10 && metrics.costPerReq > 0.15) {
       return {
-        type: 'chatty',
-        primaryLabel: '$/req:',
+        type: "chatty",
+        primaryLabel: "$/req:",
         primaryValue: formatCurrency(metrics.costPerReq),
-        actionLine: 'Batch asks; fewer back-and-forth',
+        actionLine: "Batch asks; fewer back-and-forth",
         secondaryLabel: `${metrics.totalRequests} reqs`,
         isWarning: metrics.costPerReq > 0.25,
       };
     }
     // Priority 4: Fallback
     return {
-      type: 'fallback',
+      type: "fallback",
       primaryLabel: `$/req: ${formatCurrency(metrics.costPerReq)}`,
       primaryValue: `Out: ${Math.round(metrics.outputShare)}%`,
-      actionLine: 'Prefer patches; reduce re-asking',
+      actionLine: "Prefer patches; reduce re-asking",
       isWarning: false,
     };
   }, [metrics]);
 
-  const isFull = mode === 'full';
+  const isFull = mode === "full";
   const metricColor = insight.isWarning ? colors.warning : colors.text;
 
-  if (insight.type === 'fallback') {
+  if (insight.type === "fallback") {
     const cacheLabel = metrics.hasCacheData
       ? `Cache: ${Math.round(metrics.cacheHitRate)}%`
-      : 'Cache: n/a';
-
-     return (
-       <box flexDirection="column" paddingX={1}>
-         <text fg={colors.textMuted} height={1}><strong>EFFICIENCY</strong></text>
-         <box flexDirection="row" height={1}>
-           <text fg={colors.text} height={1}>{insight.primaryLabel}    {insight.primaryValue}</text>
-         </box>
-         <text fg={colors.textSubtle} height={1}>{'-> '}{insight.actionLine}</text>
-         {isFull && (
-           <text fg={colors.textMuted} height={1}>Reqs: {metrics.totalRequests}  {cacheLabel}</text>
-         )}
-       </box>
-     );
+      : "Cache: n/a";
+
+    return (
+      <box flexDirection="column" paddingX={1}>
+        <text fg={colors.textMuted} height={1}>
+          <strong>EFFICIENCY</strong>
+        </text>
+        <box flexDirection="row" height={1}>
+          <text fg={colors.text} height={1}>
+            {insight.primaryLabel} {insight.primaryValue}
+          </text>
+        </box>
+        <text fg={colors.textSubtle} height={1}>
+          {"-> "}
+          {insight.actionLine}
+        </text>
+        {isFull && (
+          <text fg={colors.textMuted} height={1}>
+            Reqs: {metrics.totalRequests} {cacheLabel}
+          </text>
+        )}
+      </box>
+    );
   }
 
-   return (
-     <box flexDirection="column" paddingX={1}>
-       <text fg={colors.textMuted} height={1}><strong>EFFICIENCY</strong></text>
-       <box flexDirection="row" height={1}>
-         <text fg={colors.textMuted} height={1}>{insight.primaryLabel} </text>
-         <text fg={metricColor} height={1}>{insight.primaryValue}</text>
-       </box>
-       <text fg={colors.textSubtle} height={1}>{'-> '}{insight.actionLine}</text>
-       {isFull && insight.secondaryLabel && (
-         <text fg={colors.textMuted} height={1}>{insight.secondaryLabel}</text>
-       )}
-     </box>
-   );
+  return (
+    <box flexDirection="column" paddingX={1}>
+      <text fg={colors.textMuted} height={1}>
+        <strong>EFFICIENCY</strong>
+      </text>
+      <box flexDirection="row" height={1}>
+        <text fg={colors.textMuted} height={1}>
+          {insight.primaryLabel}{" "}
+        </text>
+        <text fg={metricColor} height={1}>
+          {insight.primaryValue}
+        </text>
+      </box>
+      <text fg={colors.textSubtle} height={1}>
+        {"-> "}
+        {insight.actionLine}
+      </text>
+      {isFull && insight.secondaryLabel && (
+        <text fg={colors.textMuted} height={1}>
+          {insight.secondaryLabel}
+        </text>
+      )}
+    </box>
+  );
 }
 
 export function SmartSidebar({
@@ -494,63 +582,73 @@ export function SmartSidebar({
 }: SmartSidebarProps) {
   const colors = useColors();
   const { width: terminalWidth, height: terminalHeight } = useTerminalDimensions();
-  
+
   const mode = getSidebarMode(terminalWidth);
   const sidebarWidth = getSidebarWidth(mode, terminalWidth);
-  const isFocused = focusedPanel === 'sidebar';
-  
-  const showBars = mode === 'full' || mode === 'compact';
+  const isFocused = focusedPanel === "sidebar";
+
+  const showBars = mode === "full" || mode === "compact";
   const driverRowHeight = showBars ? 2 : 1;
-  
+
   const sidebarInnerHeight = terminalHeight - 24;
   const budgetRows = 3;
   const dividerRows = 1;
   const driversHeaderRow = 1;
   const efficiencyRows = 4;
-  
-  const minHeightForEfficiency = budgetRows + dividerRows + driversHeaderRow + (2 * driverRowHeight) + dividerRows + efficiencyRows;
+
+  const minHeightForEfficiency =
+    budgetRows +
+    dividerRows +
+    driversHeaderRow +
+    2 * driverRowHeight +
+    dividerRows +
+    efficiencyRows;
   const showEfficiency = sidebarInnerHeight >= minHeightForEfficiency;
-  
-  const reservedRows = budgetRows + dividerRows + driversHeaderRow + (showEfficiency ? dividerRows + efficiencyRows : 0);
+
+  const reservedRows =
+    budgetRows +
+    dividerRows +
+    driversHeaderRow +
+    (showEfficiency ? dividerRows + efficiencyRows : 0);
   const availableForDrivers = Math.max(0, sidebarInnerHeight - reservedRows);
   const maxDrivers = Math.max(1, Math.min(10, Math.floor(availableForDrivers / driverRowHeight)));
-  
-  const totalCost = useMemo(() => 
-    sessions.reduce((sum, s) => sum + (s.totalCostUsd ?? 0), 0),
-    [sessions]
+
+  const totalCost = useMemo(
+    () => sessions.reduce((sum, s) => sum + (s.totalCostUsd ?? 0), 0),
+    [sessions],
   );
-  
+
   const drivers = useMemo((): DriverStats[] => {
     const stats: Record<string, { cost: number; tokens: number; delta5m: number }> = {};
     const providerForKey: Record<string, string> = {};
     const now = Date.now();
     const fiveMinAgo = now - 5 * 60 * 1000;
-    
-    sessions.forEach(s => {
+
+    sessions.forEach((s) => {
       s.streams.forEach((st: AgentSessionStream) => {
         let key: string;
         switch (dimension) {
-          case 'model':
+          case "model":
             key = st.modelId;
             if (!providerForKey[key]) providerForKey[key] = st.providerId;
             break;
-          case 'project':
+          case "project":
             key = extractRepoName(s.projectPath);
             break;
-          case 'agent':
+          case "agent":
             key = s.agentName;
             break;
         }
-        
+
         if (!stats[key]) {
           stats[key] = { cost: 0, tokens: 0, delta5m: 0 };
         }
-        
+
         const cost = st.costUsd ?? 0;
         const entry = stats[key]!;
         entry.cost += cost;
         entry.tokens += st.tokens.input + st.tokens.output;
-        
+
         if (s.lastActivityAt >= fiveMinAgo) {
           const sessionDuration = Math.max(1, s.lastActivityAt - s.startedAt);
           const recentWindow = Math.min(5 * 60 * 1000, now - fiveMinAgo);
@@ -559,12 +657,10 @@ export function SmartSidebar({
         }
       });
     });
-    
+
     return Object.entries(stats)
       .map(([id, data]): DriverStats => {
-        const displayName = dimension === 'model' 
-          ? (id.split('/').pop() ?? id)
-          : id;
+        const displayName = dimension === "model" ? (id.split("/").pop() ?? id) : id;
         return {
           id,
           ...(providerForKey[id] != null ? { providerId: providerForKey[id] } : {}),
@@ -573,36 +669,36 @@ export function SmartSidebar({
           costShare: totalCost > 0 ? (data.cost / totalCost) * 100 : 0,
           tokens: data.tokens,
           delta5m: data.delta5m,
-          isHot: data.delta5m > 0.10,
+          isHot: data.delta5m > 0.1,
         };
       })
       .sort((a, b) => b.cost - a.cost);
   }, [sessions, dimension, totalCost]);
-  
-  if (mode === 'hidden') {
+
+  if (mode === "hidden") {
     return null;
   }
-  
+
   return (
     <box
       flexDirection="column"
       width={sidebarWidth}
       border
-      borderStyle={isFocused ? 'double' : 'single'}
+      borderStyle={isFocused ? "double" : "single"}
       borderColor={isFocused ? colors.primary : colors.border}
       overflow="hidden"
     >
       <box flexDirection="column" flexGrow={1}>
-        <BudgetSection 
+        <BudgetSection
           totalCost={totalCost}
           budgetCost={budgetCost}
           mode={mode}
           sidebarWidth={sidebarWidth}
         />
-        
-        {mode !== 'micro' && <Divider width={sidebarWidth} />}
-        
-        {mode !== 'micro' && (
+
+        {mode !== "micro" && <Divider width={sidebarWidth} />}
+
+        {mode !== "micro" && (
           <TopDriversSection
             drivers={drivers}
             dimension={dimension}
@@ -615,26 +711,32 @@ export function SmartSidebar({
             getProviderColor={getProviderColor}
           />
         )}
-        
-         {mode === 'micro' && drivers[0] && (
-           <box flexDirection="row" paddingX={1} height={1}>
-             <text fg={colors.textMuted} height={1}>Top: </text>
-             <text fg={getProviderColor(drivers[0].providerId ?? drivers[0].id)} height={1}>
-               {truncateWithEllipsis(drivers[0].displayName, 10)}
-             </text>
-             <text fg={colors.text} height={1}> {formatCurrency(drivers[0].cost)}</text>
-             {drivers[0].isHot && <text fg={colors.warning} height={1}>▲</text>}
-           </box>
-         )}
+
+        {mode === "micro" && drivers[0] && (
+          <box flexDirection="row" paddingX={1} height={1}>
+            <text fg={colors.textMuted} height={1}>
+              Top:{" "}
+            </text>
+            <text fg={getProviderColor(drivers[0].providerId ?? drivers[0].id)} height={1}>
+              {truncateWithEllipsis(drivers[0].displayName, 10)}
+            </text>
+            <text fg={colors.text} height={1}>
+              {" "}
+              {formatCurrency(drivers[0].cost)}
+            </text>
+            {drivers[0].isHot && (
+              <text fg={colors.warning} height={1}>
+                ▲
+              </text>
+            )}
+          </box>
+        )}
       </box>
-      
-      {showEfficiency && mode !== 'micro' && (
+
+      {showEfficiency && mode !== "micro" && (
         <box flexDirection="column">
           <Divider width={sidebarWidth} />
-          <EfficiencySection 
-            sessions={sessions}
-            mode={mode}
-          />
+          <EfficiencySection sessions={sessions} mode={mode} />
         </box>
       )}
     </box>