@tokentop/ttop 0.2.2 → 0.3.0

package/src/tui/App.tsx

@@ -1,39 +1,46 @@
-import { useState, useEffect, useCallback, useMemo } from 'react';
-import { useKeyboard } from '@opentui/react';
-
-import { captureFrameToFile, createBurstRecorder, type BurstRecorder } from './debug/captureFrame.ts';
-import { pluginLifecycle } from '@/plugins/lifecycle.ts';
-import { ThemeProvider, useColors, useTheme, resolveTheme } from './contexts/ThemeContext.tsx';
-import * as builtinThemeExports from '@/plugins/themes/index.ts';
-import type { ThemePlugin } from '@/plugins/types/theme.ts';
+import { useKeyboard } from "@opentui/react";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import * as builtinThemeExports from "@/plugins/themes/index.ts";
+import type { ThemePlugin } from "@/plugins/types/theme.ts";
+import { resolveTheme, ThemeProvider, useColors, useTheme } from "./contexts/ThemeContext.tsx";
+import {
+  type BurstRecorder,
+  captureFrameToFile,
+  createBurstRecorder,
+} from "./debug/captureFrame.ts";
 
 const builtinThemeList = Object.values(builtinThemeExports) as ThemePlugin[];
-import { PluginProvider, usePlugins } from './contexts/PluginContext.tsx';
-import { LogProvider, useLogs } from './contexts/LogContext.tsx';
-import { InputProvider, useInputFocus } from './contexts/InputContext.tsx';
-import { AgentSessionProvider, useAgentSessions } from './contexts/AgentSessionContext.tsx';
-import { StorageProvider } from './contexts/StorageContext.tsx';
-import { TimeWindowProvider } from './contexts/TimeWindowContext.tsx';
-import { ConfigProvider, useConfig } from './contexts/ConfigContext.tsx';
-import { DrawerProvider, useDrawer } from './contexts/DrawerContext.tsx';
-import { SessionDetailsDrawer } from './components/SessionDetailsDrawer.tsx';
-import { Header } from './components/Header.tsx';
-import { StatusBar } from './components/StatusBar.tsx';
-import { Toast } from './components/Toast.tsx';
-import { ToastProvider, useToastContext } from './contexts/ToastContext.tsx';
-import { DashboardRuntimeProvider, useDashboardRuntime } from './contexts/DashboardRuntimeContext.tsx';
-import { RealTimeActivityProvider } from './contexts/RealTimeActivityContext.tsx';
-import { RealTimeDashboard } from './views/RealTimeDashboard.tsx';
-import { Dashboard } from './views/Dashboard.tsx';
-import { HistoricalTrendsView } from './views/HistoricalTrendsView.tsx';
-import { ProjectsView } from './views/ProjectsView.tsx';
-import { CommandPalette, type CommandAction } from './components/CommandPalette.tsx';
-import { SettingsModal } from './components/SettingsModal.tsx';
-import { DebugPanel } from './components/DebugPanel.tsx';
-import { copyToClipboard } from '@/utils/clipboard.ts';
-import { useSafeRenderer } from './hooks/useSafeRenderer.ts';
-import type { DemoPreset } from '@/demo/simulator.ts';
-import { DemoModeProvider, useDemoMode } from './contexts/DemoModeContext.tsx';
+
+import type { DemoPreset } from "@/demo/simulator.ts";
+import { copyToClipboard } from "@/utils/clipboard.ts";
+import { type CommandAction, CommandPalette } from "./components/CommandPalette.tsx";
+import { DebugPanel } from "./components/DebugPanel.tsx";
+import { Header } from "./components/Header.tsx";
+import { SessionDetailsDrawer } from "./components/SessionDetailsDrawer.tsx";
+import { SettingsModal } from "./components/SettingsModal.tsx";
+import { StatusBar } from "./components/StatusBar.tsx";
+import { Toast } from "./components/Toast.tsx";
+import { AgentSessionProvider, useAgentSessions } from "./contexts/AgentSessionContext.tsx";
+import { ConfigProvider, useConfig } from "./contexts/ConfigContext.tsx";
+import {
+  DashboardRuntimeProvider,
+  useDashboardRuntime,
+} from "./contexts/DashboardRuntimeContext.tsx";
+import { DemoModeProvider, useDemoMode } from "./contexts/DemoModeContext.tsx";
+import { DrawerProvider, useDrawer } from "./contexts/DrawerContext.tsx";
+import { InputProvider, useInputFocus } from "./contexts/InputContext.tsx";
+import { LogProvider, useLogs } from "./contexts/LogContext.tsx";
+import { PluginProvider, usePlugins } from "./contexts/PluginContext.tsx";
+import { RealTimeActivityProvider } from "./contexts/RealTimeActivityContext.tsx";
+import { StorageProvider } from "./contexts/StorageContext.tsx";
+import { TimeWindowProvider } from "./contexts/TimeWindowContext.tsx";
+import { ToastProvider, useToastContext } from "./contexts/ToastContext.tsx";
+import { useSafeRenderer } from "./hooks/useSafeRenderer.ts";
+import { triggerShutdown } from "./shutdown.ts";
+import { Dashboard } from "./views/Dashboard.tsx";
+import { HistoricalTrendsView } from "./views/HistoricalTrendsView.tsx";
+import { ProjectsView } from "./views/ProjectsView.tsx";
+import { RealTimeDashboard } from "./views/RealTimeDashboard.tsx";
 
 interface AppProps {
   debug?: boolean;
@@ -43,7 +50,7 @@ interface AppProps {
   cliPlugins?: string[];
 }
 
-type View = 'dashboard' | 'providers' | 'trends' | 'projects';
+type View = "dashboard" | "providers" | "trends" | "projects";
 
 function AppContent() {
   const renderer = useSafeRenderer();
@@ -63,53 +70,47 @@ function AppContent() {
   const refreshInterval = config.refresh.pauseAutoRefresh ? 0 : config.refresh.intervalMs;
 
   const [lastRefresh, setLastRefresh] = useState<number | null>(null);
-  const [activeView, setActiveView] = useState<View>('dashboard');
+  const [activeView, setActiveView] = useState<View>("dashboard");
   const [showCommandPalette, setShowCommandPalette] = useState(false);
   const [showSettings, setShowSettings] = useState(false);
   const [showDebugPanel, setShowDebugPanel] = useState(false);
 
   const isModalOpen = showCommandPalette || showSettings || showDebugPanel || isDrawerOpen;
 
-  const shutdownPromiseRef = { current: null as Promise<void> | null };
-  const gracefulShutdown = useCallback(async () => {
-    if (shutdownPromiseRef.current) return shutdownPromiseRef.current;
-    shutdownPromiseRef.current = (async () => {
-      await pluginLifecycle.stopAll();
-      await pluginLifecycle.destroyAll();
-      renderer?.destroy();
-    })();
-    return shutdownPromiseRef.current;
-  }, [renderer]);
-
-  const inspectorData = useMemo(() => ({
-    sessions: sessions.map(s => ({
-      sessionId: s.sessionId,
-      agentName: s.agentName,
-      status: s.status,
-      totals: s.totals,
-      lastActivityAt: s.lastActivityAt,
-    })),
-    debugData: debugDataRef.current,
-    activity,
-    sparkData,
-  }), [sessions, debugDataRef, activity, sparkData]);
+  const gracefulShutdown = useCallback(() => triggerShutdown(), []);
+
+  const inspectorData = useMemo(
+    () => ({
+      sessions: sessions.map((s) => ({
+        sessionId: s.sessionId,
+        agentName: s.agentName,
+        status: s.status,
+        totals: s.totals,
+        lastActivityAt: s.lastActivityAt,
+      })),
+      debugData: debugDataRef.current,
+      activity,
+      sparkData,
+    }),
+    [sessions, debugDataRef, activity, sparkData],
+  );
 
   const handleCaptureFrame = useCallback(async () => {
     if (!renderer) {
-      showToast('No renderer available', 'error');
+      showToast("No renderer available", "error");
       return;
     }
     try {
-      const result = await captureFrameToFile(renderer, 'manual');
+      const result = await captureFrameToFile(renderer, "manual");
       info(`Frame captured: ${result.framePath}`);
       if (config.notifications.toastsEnabled) {
-        showToast('Frame captured');
+        showToast("Frame captured");
       }
     } catch (err) {
-      const msg = err instanceof Error ? err.message : 'Unknown error';
+      const msg = err instanceof Error ? err.message : "Unknown error";
       info(`Frame capture failed: ${msg}`);
       if (config.notifications.toastsEnabled) {
-        showToast('Capture failed', 'error');
+        showToast("Capture failed", "error");
       }
     }
   }, [renderer, info, showToast, config.notifications.toastsEnabled]);
@@ -127,13 +128,15 @@ function AppContent() {
     }
 
     burstRecorderRef.current = createBurstRecorder(renderer, { frameCount: 10, minInterval: 200 });
-    info('Burst recording started (10 frames)');
+    info("Burst recording started (10 frames)");
     if (config.notifications.toastsEnabled) {
-      showToast('Recording burst...');
+      showToast("Recording burst...");
     }
 
     const frames = await burstRecorderRef.current.start();
-    info(`Burst complete: ${frames.length} frames in ${frames[0]?.framePath.split('/').slice(0, -1).join('/')}`);
+    info(
+      `Burst complete: ${frames.length} frames in ${frames[0]?.framePath.split("/").slice(0, -1).join("/")}`,
+    );
     if (config.notifications.toastsEnabled) {
       showToast(`Burst: ${frames.length} frames`);
     }
@@ -148,11 +151,11 @@ function AppContent() {
       try {
         await copyToClipboard(text);
         if (config.notifications.toastsEnabled) {
-          showToast('Copied to clipboard');
+          showToast("Copied to clipboard");
         }
       } catch {
         if (config.notifications.toastsEnabled) {
-          showToast('Copy failed', 'error');
+          showToast("Copy failed", "error");
         }
       }
       renderer.clearSelection();
@@ -161,37 +164,87 @@ function AppContent() {
 
   const commands: CommandAction[] = useMemo(() => {
     const base: CommandAction[] = [
-      { id: 'view-dashboard', label: 'Go to Dashboard', shortcut: '1', action: () => setActiveView('dashboard') },
-      { id: 'view-providers', label: 'Go to Providers', shortcut: '2', action: () => setActiveView('providers') },
-      { id: 'view-trends', label: 'Go to Trends', shortcut: '3', action: () => setActiveView('trends') },
-      { id: 'view-projects', label: 'Go to Projects', shortcut: '4', action: () => setActiveView('projects') },
-      { id: 'open-settings', label: 'Open Settings', shortcut: ',', action: () => setShowSettings(true) },
-      { id: 'refresh', label: 'Refresh Data', shortcut: 'r', action: () => {
-        if (isInitialized) {
-          info('Manual refresh triggered');
-          refreshAllProviders().then(() => setLastRefresh(Date.now()));
-        }
-      }},
-      { id: 'toggle-debug', label: 'Toggle Debug Panel', shortcut: '~', action: () => setShowDebugPanel(prev => !prev) },
-      { id: 'capture-frame', label: 'Capture Frame', shortcut: 'Ctrl+P', action: () => handleCaptureFrame() },
-      { id: 'quit', label: 'Quit', shortcut: 'q', action: () => void gracefulShutdown() },
+      {
+        id: "view-dashboard",
+        label: "Go to Dashboard",
+        shortcut: "1",
+        action: () => setActiveView("dashboard"),
+      },
+      {
+        id: "view-providers",
+        label: "Go to Providers",
+        shortcut: "2",
+        action: () => setActiveView("providers"),
+      },
+      {
+        id: "view-trends",
+        label: "Go to Trends",
+        shortcut: "3",
+        action: () => setActiveView("trends"),
+      },
+      {
+        id: "view-projects",
+        label: "Go to Projects",
+        shortcut: "4",
+        action: () => setActiveView("projects"),
+      },
+      {
+        id: "open-settings",
+        label: "Open Settings",
+        shortcut: ",",
+        action: () => setShowSettings(true),
+      },
+      {
+        id: "refresh",
+        label: "Refresh Data",
+        shortcut: "r",
+        action: () => {
+          if (isInitialized) {
+            info("Manual refresh triggered");
+            refreshAllProviders().then(() => setLastRefresh(Date.now()));
+          }
+        },
+      },
+      {
+        id: "toggle-debug",
+        label: "Toggle Debug Panel",
+        shortcut: "~",
+        action: () => setShowDebugPanel((prev) => !prev),
+      },
+      {
+        id: "capture-frame",
+        label: "Capture Frame",
+        shortcut: "Ctrl+P",
+        action: () => handleCaptureFrame(),
+      },
+      { id: "quit", label: "Quit", shortcut: "q", action: () => void gracefulShutdown() },
     ];
 
-    const themeCommands: CommandAction[] = themes.map(t => ({
+    const themeCommands: CommandAction[] = themes.map((t) => ({
       id: `theme-${t.id}`,
       label: `Theme: ${t.name}`,
       action: () => updateConfig({ ...config, display: { ...config.display, theme: t.id } }),
     }));
 
     return [...base, ...themeCommands];
-  }, [isInitialized, refreshAllProviders, info, handleCaptureFrame, renderer, gracefulShutdown, themes, config, updateConfig]);
+  }, [
+    isInitialized,
+    refreshAllProviders,
+    info,
+    handleCaptureFrame,
+    renderer,
+    gracefulShutdown,
+    themes,
+    config,
+    updateConfig,
+  ]);
 
   useKeyboard((key) => {
-    if (key.ctrl && key.name === 'p') {
+    if (key.ctrl && key.name === "p") {
       handleCaptureFrame();
       return;
     }
-    if (key.ctrl && key.shift && key.name === 'p') {
+    if (key.ctrl && key.shift && key.name === "p") {
       handleBurstRecord();
       return;
     }
@@ -204,35 +257,35 @@ function AppContent() {
       return;
     }
 
-    if (key.name === '1') {
-      setActiveView('dashboard');
+    if (key.name === "1") {
+      setActiveView("dashboard");
     }
-    if (key.name === '2') {
-      setActiveView('providers');
+    if (key.name === "2") {
+      setActiveView("providers");
     }
-    if (key.name === '3') {
-      setActiveView('trends');
+    if (key.name === "3") {
+      setActiveView("trends");
     }
-    if (key.name === '4') {
-      setActiveView('projects');
+    if (key.name === "4") {
+      setActiveView("projects");
     }
-    if (key.sequence === ',') {
+    if (key.sequence === ",") {
       setShowSettings(true);
     }
 
-    if (key.sequence === ':' || (key.shift && key.name === ';')) {
+    if (key.sequence === ":" || (key.shift && key.name === ";")) {
       setShowCommandPalette(true);
       return;
     }
 
-    if (key.name === 'q' || (key.ctrl && key.name === 'c')) {
+    if (key.name === "q" || (key.ctrl && key.name === "c")) {
       void gracefulShutdown();
     }
-    if (key.name === 'r' && isInitialized) {
-      info('Manual refresh triggered');
+    if (key.name === "r" && isInitialized) {
+      info("Manual refresh triggered");
       refreshAllProviders().then(() => setLastRefresh(Date.now()));
     }
-    if (key.sequence === '~' || (key.shift && key.name === 'd')) {
+    if (key.sequence === "~" || (key.shift && key.name === "d")) {
       setShowDebugPanel(true);
     }
   });
@@ -252,7 +305,7 @@ function AppContent() {
 
   useEffect(() => {
     if (isInitialized) {
-      info('Application initialized');
+      info("Application initialized");
       refreshAllProviders().then(() => setLastRefresh(Date.now()));
     }
   }, [isInitialized]);
@@ -261,7 +314,7 @@ function AppContent() {
     if (!isInitialized || refreshInterval <= 0) return;
 
     const interval = setInterval(() => {
-      info('Auto-refresh triggered');
+      info("Auto-refresh triggered");
       refreshAllProviders().then(() => setLastRefresh(Date.now()));
     }, refreshInterval);
 
@@ -277,15 +330,12 @@ function AppContent() {
       onMouseUp={handleMouseUp}
       position="relative"
     >
-      <Header
-        activeView={activeView}
-        demoMode={demoMode}
-      />
+      <Header activeView={activeView} demoMode={demoMode} />
 
-      {activeView === 'dashboard' && <RealTimeDashboard />}
-      {activeView === 'providers' && <Dashboard />}
-      {activeView === 'trends' && <HistoricalTrendsView />}
-      {activeView === 'projects' && <ProjectsView />}
+      {activeView === "dashboard" && <RealTimeDashboard />}
+      {activeView === "providers" && <Dashboard />}
+      {activeView === "trends" && <HistoricalTrendsView />}
+      {activeView === "projects" && <ProjectsView />}
 
       <StatusBar
         lastRefresh={lastRefresh ?? 0}
@@ -294,36 +344,21 @@ function AppContent() {
       />
 
       {toast && config.notifications.toastsEnabled && (
-        <Toast
-          message={toast.message}
-          type={toast.type}
-          onDismiss={dismissToast}
-        />
+        <Toast message={toast.message} type={toast.type} onDismiss={dismissToast} />
       )}
 
       {showCommandPalette && (
-        <CommandPalette
-          commands={commands}
-          onClose={() => setShowCommandPalette(false)}
-        />
+        <CommandPalette commands={commands} onClose={() => setShowCommandPalette(false)} />
       )}
 
-      {showSettings && (
-        <SettingsModal onClose={() => setShowSettings(false)} />
-      )}
+      {showSettings && <SettingsModal onClose={() => setShowSettings(false)} />}
 
       {showDebugPanel && (
-        <DebugPanel
-          onClose={() => setShowDebugPanel(false)}
-          inspectorData={inspectorData}
-        />
+        <DebugPanel onClose={() => setShowDebugPanel(false)} inspectorData={inspectorData} />
       )}
 
       {isDrawerOpen && selectedSession && (
-        <SessionDetailsDrawer
-          session={selectedSession}
-          onClose={hideDrawer}
-        />
+        <SessionDetailsDrawer session={selectedSession} onClose={hideDrawer} />
       )}
     </box>
   );
@@ -336,7 +371,7 @@ function ConfiguredApp({ cliPlugins }: { cliPlugins?: string[] }) {
     return null;
   }
 
-  const initialTheme = builtinThemeList.find(t => t.id === config.display.theme);
+  const initialTheme = builtinThemeList.find((t) => t.id === config.display.theme);
   const themeProps = initialTheme ? { initialTheme } : {};
 
   return (
@@ -347,9 +382,9 @@ function ConfiguredApp({ cliPlugins }: { cliPlugins?: string[] }) {
             <RealTimeActivityProvider>
               <AgentSessionProvider autoRefresh={true} refreshInterval={1000}>
                 <DashboardRuntimeProvider>
-                <DrawerProvider>
-                  <AppContent />
-                </DrawerProvider>
+                  <DrawerProvider>
+                    <AppContent />
+                  </DrawerProvider>
                 </DashboardRuntimeProvider>
               </AgentSessionProvider>
             </RealTimeActivityProvider>
@@ -360,8 +395,16 @@ function ConfiguredApp({ cliPlugins }: { cliPlugins?: string[] }) {
   );
 }
 
-export function App({ debug = false, demoMode = false, demoSeed, demoPreset, cliPlugins }: AppProps) {
-  const demoProviderProps: { demoMode: boolean; demoSeed?: number; demoPreset?: DemoPreset } = { demoMode };
+export function App({
+  debug = false,
+  demoMode = false,
+  demoSeed,
+  demoPreset,
+  cliPlugins,
+}: AppProps) {
+  const demoProviderProps: { demoMode: boolean; demoSeed?: number; demoPreset?: DemoPreset } = {
+    demoMode,
+  };
   if (demoSeed !== undefined) demoProviderProps.demoSeed = demoSeed;
   if (demoPreset !== undefined) demoProviderProps.demoPreset = demoPreset;
 

package/src/tui/components/CommandPalette.tsx

@@ -1,8 +1,8 @@
-import { useState, useEffect, useMemo } from 'react';
-import { useKeyboard, useTerminalDimensions } from '@opentui/react';
-import { RGBA } from '@opentui/core';
-import { useColors } from '../contexts/ThemeContext.tsx';
-import { useInputFocus } from '../contexts/InputContext.tsx';
+import { RGBA } from "@opentui/core";
+import { useKeyboard, useTerminalDimensions } from "@opentui/react";
+import { useEffect, useMemo, useState } from "react";
+import { useInputFocus } from "../contexts/InputContext.tsx";
+import { useColors } from "../contexts/ThemeContext.tsx";
 
 const OVERLAY_BG = RGBA.fromValues(0.0, 0.0, 0.0, 0.5);
 
@@ -22,7 +22,7 @@ export function CommandPalette({ commands, onClose }: CommandPaletteProps) {
   const colors = useColors();
   const { width: termWidth, height: termHeight } = useTerminalDimensions();
   const { setInputFocused } = useInputFocus();
-  const [query, setQuery] = useState('');
+  const [query, setQuery] = useState("");
   const [selectedIndex, setSelectedIndex] = useState(0);
 
   useEffect(() => {
@@ -33,9 +33,9 @@ export function CommandPalette({ commands, onClose }: CommandPaletteProps) {
   const filteredCommands = useMemo(() => {
     if (!query) return commands;
     const lowerQuery = query.toLowerCase();
-    return commands.filter(cmd =>
-      cmd.label.toLowerCase().includes(lowerQuery) ||
-      cmd.id.toLowerCase().includes(lowerQuery)
+    return commands.filter(
+      (cmd) =>
+        cmd.label.toLowerCase().includes(lowerQuery) || cmd.id.toLowerCase().includes(lowerQuery),
     );
   }, [commands, query]);
 
@@ -49,12 +49,12 @@ export function CommandPalette({ commands, onClose }: CommandPaletteProps) {
   }, [query]);
 
   useKeyboard((key) => {
-    if (key.name === 'escape') {
+    if (key.name === "escape") {
       onClose();
       return;
     }
 
-    if (key.name === 'return') {
+    if (key.name === "return") {
       const selected = filteredCommands[selectedIndex];
       if (selected) {
         onClose();
@@ -63,9 +63,9 @@ export function CommandPalette({ commands, onClose }: CommandPaletteProps) {
       return;
     }
 
-    if (query === '' && !key.ctrl && !key.meta) {
-      const keyStr = key.sequence || '';
-      const matchingCmd = commands.find(cmd => cmd.shortcut === keyStr);
+    if (query === "" && !key.ctrl && !key.meta) {
+      const keyStr = key.sequence || "";
+      const matchingCmd = commands.find((cmd) => cmd.shortcut === keyStr);
       if (matchingCmd) {
         onClose();
         matchingCmd.action();
@@ -73,23 +73,31 @@ export function CommandPalette({ commands, onClose }: CommandPaletteProps) {
       }
     }
 
-    if (key.name === 'down' || (key.ctrl && key.name === 'n') || (query === '' && key.name === 'j')) {
-      setSelectedIndex(i => Math.min(i + 1, filteredCommands.length - 1));
+    if (
+      key.name === "down" ||
+      (key.ctrl && key.name === "n") ||
+      (query === "" && key.name === "j")
+    ) {
+      setSelectedIndex((i) => Math.min(i + 1, filteredCommands.length - 1));
       return;
     }
 
-    if (key.name === 'up' || (key.ctrl && key.name === 'p') || (query === '' && key.name === 'k')) {
-      setSelectedIndex(i => Math.max(i - 1, 0));
+    if (key.name === "up" || (key.ctrl && key.name === "p") || (query === "" && key.name === "k")) {
+      setSelectedIndex((i) => Math.max(i - 1, 0));
       return;
     }
 
-    if (key.name === 'backspace') {
-      setQuery(q => q.slice(0, -1));
+    if (key.name === "backspace") {
+      setQuery((q) => q.slice(0, -1));
       return;
     }
 
-    if (key.sequence && key.sequence.length === 1 && /^[\w\-_., ~:;!@#$%^&*()]$/.test(key.sequence)) {
-      setQuery(q => q + key.sequence);
+    if (
+      key.sequence &&
+      key.sequence.length === 1 &&
+      /^[\w\-_., ~:;!@#$%^&*()]$/.test(key.sequence)
+    ) {
+      setQuery((q) => q + key.sequence);
       return;
     }
   });
@@ -128,20 +136,22 @@ export function CommandPalette({ commands, onClose }: CommandPaletteProps) {
           <box flexDirection="column">
             {filteredCommands.length === 0 ? (
               <box padding={1} height={1}>
-                <text height={1} fg={colors.textMuted}>No matching commands</text>
+                <text height={1} fg={colors.textMuted}>
+                  No matching commands
+                </text>
               </box>
             ) : (
               filteredCommands.map((cmd, idx) => {
                 const isSelected = idx === selectedIndex;
                 return (
-                   <box
-                     key={cmd.id}
-                     flexDirection="row"
-                     justifyContent="space-between"
-                     paddingX={1}
-                     height={1}
-                     {...(isSelected ? { backgroundColor: colors.primary } : {})}
-                   >
+                  <box
+                    key={cmd.id}
+                    flexDirection="row"
+                    justifyContent="space-between"
+                    paddingX={1}
+                    height={1}
+                    {...(isSelected ? { backgroundColor: colors.primary } : {})}
+                  >
                     <text height={1} fg={isSelected ? colors.background : colors.text}>
                       {cmd.label}
                     </text>
@@ -157,9 +167,11 @@ export function CommandPalette({ commands, onClose }: CommandPaletteProps) {
           </box>
         </scrollbox>
 
-         <box paddingX={1} height={1}>
-           <text height={1} fg={colors.textSubtle}>↑↓ navigate  Enter select  Esc close</text>
-         </box>
+        <box paddingX={1} height={1}>
+          <text height={1} fg={colors.textSubtle}>
+            ↑↓ navigate Enter select Esc close
+          </text>
+        </box>
       </box>
     </box>
   );