repoburg 1.3.188 → 1.3.196

package/agent-pane/frontend/src/components/CommandInputBar.tsx

@@ -1,40 +1,319 @@
-import { useState } from 'react';
-import { CornerDownLeft, Square } from 'lucide-react';
+import { useRef, useState, useEffect } from 'react';
+import { ArrowUp, Square } from 'lucide-react';
 import { useStore } from '../store/store.ts';
+import SlashPopup, { type SlashCommand, filterCommands } from './input/SlashPopup.tsx';
+import OptionSubPopup from './input/OptionSubPopup.tsx';
+import SkillMentionPopup from './input/SkillMentionPopup.tsx';
+import { useProvider } from '../hooks/useProvider.ts';
+import type { SessionRuntimeConfig, Extension } from '../types/index.ts';
+
+const MIN_HEIGHT = 32;
+const MAX_HEIGHT = 200;
+
+/** Parse runtime_config from the active session detail. */
+function parseRuntimeConfig(json: string | null | undefined): SessionRuntimeConfig {
+  if (!json) return {};
+  try {
+    return JSON.parse(json) as SessionRuntimeConfig;
+  } catch {
+    return {};
+  }
+}
 
 export default function CommandInputBar() {
   const [value, setValue] = useState('');
-  const { submitPrompt, cancelTurn } = useStore();
+  const taRef = useRef<HTMLTextAreaElement>(null);
+  const { submitPrompt, cancelTurn, updateRuntimeConfig, setShowModelSelector } = useStore();
+  const activeSessionId = useStore((s) => s.activeSessionId);
   const detail = useStore((s) => (s.activeSessionId ? s.sessionDetails[s.activeSessionId] : null));
+  const restoredPrompt = useStore((s) => s.restoredPrompt);
   const isRunning = detail?.is_running === 1;
+  const noSession = !activeSessionId;
+
+  const { capabilities } = useProvider(detail?.runtime_type);
+
+  // Slash popup state
+  const [slashOpen, setSlashOpen] = useState(false);
+  const [slashFilter, setSlashFilter] = useState('');
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const [subPopup, setSubPopup] = useState<SlashCommand['subPopup']>(undefined);
+  const [skillPopup, setSkillPopup] = useState(false);
+  const [skillFilter, setSkillFilter] = useState('');
+  const [selectedSkills, setSelectedSkills] = useState<Extension[]>([]);
+
+  const commands = slashOpen ? filterCommands(slashFilter, capabilities) : [];
+
+  // Restore prompt after cancel
+  useEffect(() => {
+    if (restoredPrompt !== null) {
+      setValue(restoredPrompt);
+      requestAnimationFrame(() => {
+        if (taRef.current) {
+          taRef.current.style.height = 'auto';
+          taRef.current.style.height = Math.min(taRef.current.scrollHeight, MAX_HEIGHT) + 'px';
+        }
+      });
+      useStore.setState({ restoredPrompt: null });
+    }
+  }, [restoredPrompt]);
+
+  // ESC to cancel running turn (global — textarea is disabled while running)
+  useEffect(() => {
+    if (!isRunning) return;
+    function onKey(e: KeyboardEvent) {
+      if (e.key === 'Escape') {
+        e.preventDefault();
+        cancelTurn();
+      }
+    }
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, [isRunning, cancelTurn]);
+
+  // Close slash popup when session changes
+  useEffect(() => {
+    setSlashOpen(false);
+    setSubPopup(undefined);
+    setSkillPopup(false);
+    setSelectedSkills([]);
+  }, [activeSessionId]);
+
+  function autoResize() {
+    const el = taRef.current;
+    if (!el) return;
+    el.style.height = 'auto';
+    el.style.height = Math.min(el.scrollHeight, MAX_HEIGHT) + 'px';
+  }
 
   function handleSend() {
     const v = value.trim();
     if (!v || isRunning) return;
-    setValue(''); // Clear input immediately for visual feedback
-    submitPrompt(v);
+
+    // Build prompt with skill prefixes
+    let prompt = v;
+    if (selectedSkills.length > 0) {
+      const skillPrefix = selectedSkills.map((s) => `$${s.name}`).join(' ');
+      prompt = `${skillPrefix}\n\n${v}`;
+    }
+
+    setValue('');
+    setSelectedSkills([]);
+    if (taRef.current) taRef.current.style.height = MIN_HEIGHT + 'px';
+    setSlashOpen(false);
+    setSubPopup(undefined);
+    setSkillPopup(false);
+    submitPrompt(prompt);
+  }
+
+  function handleSlashCommand(cmd: SlashCommand) {
+    if (cmd.subPopup) {
+      setSubPopup(cmd.subPopup);
+    } else if (cmd.id === 'skills') {
+      setSkillPopup(true);
+      setSkillFilter('');
+      setSlashOpen(false);
+      setValue('');
+    } else if (cmd.id === 'model') {
+      setShowModelSelector(true);
+      setSlashOpen(false);
+      setValue('');
+    } else {
+      setSlashOpen(false);
+      setValue('');
+    }
+  }
+
+  function handleSkillSelect(skill: Extension) {
+    setSelectedSkills((prev) => [...prev, skill]);
+    setSkillPopup(false);
+    setValue('');
+    if (taRef.current) taRef.current.style.height = MIN_HEIGHT + 'px';
+  }
+
+  function handleOptionSelect(optionValue: string) {
+    const config = parseRuntimeConfig(detail?.runtime_config);
+
+    if (subPopup === 'sandbox') {
+      config.sandboxMode = optionValue as SessionRuntimeConfig['sandboxMode'];
+    } else if (subPopup === 'websearch') {
+      config.webSearchMode = optionValue as SessionRuntimeConfig['webSearchMode'];
+    } else if (subPopup === 'network') {
+      config.networkAccessEnabled = optionValue === 'true';
+    }
+
+    updateRuntimeConfig(config as Record<string, unknown>);
+    setSubPopup(undefined);
+    setSlashOpen(false);
+    setValue('');
+    if (taRef.current) taRef.current.style.height = MIN_HEIGHT + 'px';
+  }
+
+  function handleKeyDown(e: React.KeyboardEvent) {
+    // Slash popup keyboard navigation
+    if (slashOpen && !subPopup) {
+      if (e.key === 'ArrowDown') {
+        e.preventDefault();
+        setSelectedIndex((i) => Math.min(i + 1, commands.length - 1));
+        return;
+      }
+      if (e.key === 'ArrowUp') {
+        e.preventDefault();
+        setSelectedIndex((i) => Math.max(i - 1, 0));
+        return;
+      }
+      if (e.key === 'Enter') {
+        e.preventDefault();
+        if (commands[selectedIndex]) {
+          handleSlashCommand(commands[selectedIndex]);
+        }
+        return;
+      }
+      if (e.key === 'Escape') {
+        e.preventDefault();
+        setSlashOpen(false);
+        setValue('');
+        return;
+      }
+    }
+
+    if (subPopup && e.key === 'Escape') {
+      e.preventDefault();
+      setSubPopup(undefined);
+      return;
+    }
+
+    // Cmd/Ctrl+Enter to send
+    if (e.key === 'Enter' && (e.metaKey || e.ctrlKey) && !isRunning) {
+      e.preventDefault();
+      handleSend();
+      return;
+    }
+
+    // ESC to cancel while running
+    if (e.key === 'Escape' && isRunning) {
+      e.preventDefault();
+      cancelTurn();
+    }
+  }
+
+  function handleChange(e: React.ChangeEvent<HTMLTextAreaElement>) {
+    const newValue = e.target.value;
+    setValue(newValue);
+    autoResize();
+
+    // Detect `/` at start of input → slash popup
+    if (newValue.startsWith('/') && !newValue.includes(' ') && !isRunning) {
+      setSlashOpen(true);
+      setSlashFilter(newValue.slice(1));
+      setSelectedIndex(0);
+    } else {
+      setSlashOpen(false);
+      setSubPopup(undefined);
+    }
+
+    // Detect `$` trigger anywhere → skill popup
+    if (newValue.startsWith('$') && !isRunning) {
+      setSkillPopup(true);
+      setSkillFilter(newValue.slice(1));
+    } else if (!newValue.startsWith('$')) {
+      setSkillPopup(false);
+    }
   }
 
+  const currentConfig = parseRuntimeConfig(detail?.runtime_config);
+
+  const sandboxOptions = [
+    { value: 'read-only', label: 'Read Only', description: 'Agent can only read files' },
+    { value: 'workspace-write', label: 'Workspace Write', description: 'Agent can read and write in workspace' },
+    { value: 'danger-full-access', label: 'Danger Full Access', description: 'Agent has unrestricted access' },
+  ];
+
+  const webSearchOptions = [
+    { value: 'disabled', label: 'Disabled', description: 'No web search' },
+    { value: 'cached', label: 'Cached', description: 'Use cached search results' },
+    { value: 'live', label: 'Live', description: 'Perform live web searches' },
+  ];
+
+  const networkOptions = [
+    { value: 'false', label: 'Disabled', description: 'No network access' },
+    { value: 'true', label: 'Enabled', description: 'Allow network access in sandbox' },
+  ];
+
   return (
     <div className="cmd-bar">
-      <input
-        className="cmd-input"
-        placeholder={isRunning ? 'Agent is running…' : 'Type a message to the agent…'}
+      {slashOpen && !subPopup && (
+        <SlashPopup
+          commands={commands}
+          selectedIndex={selectedIndex}
+          onSelect={handleSlashCommand}
+          onHover={setSelectedIndex}
+        />
+      )}
+      {slashOpen && subPopup === 'sandbox' && (
+        <OptionSubPopup
+          title="Sandbox Mode"
+          options={sandboxOptions}
+          currentValue={currentConfig.sandboxMode}
+          onSelect={handleOptionSelect}
+          onClose={() => setSubPopup(undefined)}
+        />
+      )}
+      {slashOpen && subPopup === 'websearch' && (
+        <OptionSubPopup
+          title="Web Search"
+          options={webSearchOptions}
+          currentValue={currentConfig.webSearchMode}
+          onSelect={handleOptionSelect}
+          onClose={() => setSubPopup(undefined)}
+        />
+      )}
+      {slashOpen && subPopup === 'network' && (
+        <OptionSubPopup
+          title="Network Access"
+          options={networkOptions}
+          currentValue={currentConfig.networkAccessEnabled === true ? 'true' : 'false'}
+          onSelect={handleOptionSelect}
+          onClose={() => setSubPopup(undefined)}
+        />
+      )}
+      {skillPopup && (
+        <SkillMentionPopup
+          filter={skillFilter}
+          onSelect={handleSkillSelect}
+          onClose={() => { setSkillPopup(false); setValue(''); }}
+        />
+      )}
+      {selectedSkills.length > 0 && (
+        <div className="skill-badges">
+          {selectedSkills.map((s) => (
+            <span key={s.id} className="skill-badge">
+              ${s.name}
+              <button className="skill-badge-remove" onClick={() => setSelectedSkills((prev) => prev.filter((x) => x.id !== s.id))}>×</button>
+            </span>
+          ))}
+        </div>
+      )}
+      <textarea
+        ref={taRef}
+        className="cmd-textarea"
+        placeholder={
+          noSession ? 'Select or create a session…' : isRunning ? 'Agent is running…' : 'Type a message…  Use / for commands'
+        }
         autoComplete="off"
         value={value}
-        disabled={isRunning}
-        onChange={(e) => setValue(e.target.value)}
-        onKeyDown={(e) => {
-          if (e.key === 'Enter' && !isRunning) handleSend();
-        }}
+        disabled={isRunning || noSession}
+        rows={1}
+        style={{ minHeight: MIN_HEIGHT, maxHeight: MAX_HEIGHT }}
+        onChange={handleChange}
+        onKeyDown={handleKeyDown}
       />
       {isRunning ? (
-        <button className="cmd-send" style={{ background: 'var(--red)' }} onClick={() => cancelTurn()}>
-          <Square size={14} /> Cancel
+        <button className="cmd-stop-btn" onClick={() => cancelTurn()} title="Stop (Esc)">
+          <Square size={15} />
         </button>
       ) : (
-        <button className="cmd-send" onClick={handleSend} disabled={!value.trim()}>
-          <CornerDownLeft size={14} /> Send
+        <button className="cmd-send-btn" onClick={handleSend} disabled={!value.trim() || noSession} title="Send (⌘↵)">
+          <ArrowUp size={16} />
         </button>
       )}
     </div>

package/agent-pane/frontend/src/components/CommandPalette.test.tsx

@@ -0,0 +1,230 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import { render, screen, fireEvent, cleanup } from '@testing-library/react';
+import CommandPalette from './CommandPalette.tsx';
+import { resetStore } from '../test/component-helpers.ts';
+import { makeSession, makeDetail } from '../test/fixtures.ts';
+
+describe('CommandPalette', () => {
+  beforeEach(() => {
+    resetStore();
+  });
+  afterEach(() => {
+    cleanup();
+  });
+
+  it('returns null when show=false', () => {
+    const { container } = render(<CommandPalette />);
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('renders search input when show=true', () => {
+    resetStore({ showCommandPalette: true });
+    render(<CommandPalette />);
+    expect(screen.getByPlaceholderText('Type a command…')).toBeInTheDocument();
+  });
+
+  it('shows all available commands when query is empty', () => {
+    resetStore({ showCommandPalette: true });
+    render(<CommandPalette />);
+    // "New Session" is always available
+    expect(screen.getByText('New Session')).toBeInTheDocument();
+  });
+
+  it('filters commands by query', () => {
+    resetStore({ showCommandPalette: true });
+    render(<CommandPalette />);
+    const input = screen.getByPlaceholderText('Type a command…');
+    fireEvent.change(input, { target: { value: 'new' } });
+    expect(screen.getByText('New Session')).toBeInTheDocument();
+    expect(screen.queryByText('Close Tab')).not.toBeInTheDocument();
+  });
+
+  it('shows "No matching commands" when filter empty', () => {
+    resetStore({ showCommandPalette: true });
+    render(<CommandPalette />);
+    const input = screen.getByPlaceholderText('Type a command…');
+    fireEvent.change(input, { target: { value: 'xyzzy' } });
+    expect(screen.getByText('No matching commands')).toBeInTheDocument();
+  });
+
+  it('ArrowDown moves selection down', () => {
+    // Need active session so multiple commands are available
+    const session = makeSession('s1');
+    const detail = makeDetail('s1', []);
+    resetStore({ showCommandPalette: true, activeSessionId: 's1', sessions: [session], sessionDetails: { s1: detail } });
+    render(<CommandPalette />);
+    const input = screen.getByPlaceholderText('Type a command…');
+    fireEvent.keyDown(input, { key: 'ArrowDown' });
+    const items = document.querySelectorAll('.palette-item');
+    expect(items[1]).toHaveClass('selected');
+  });
+
+  it('ArrowUp moves selection up', () => {
+    const session = makeSession('s1');
+    const detail = makeDetail('s1', []);
+    resetStore({ showCommandPalette: true, activeSessionId: 's1', sessions: [session], sessionDetails: { s1: detail } });
+    render(<CommandPalette />);
+    const input = screen.getByPlaceholderText('Type a command…');
+    // Move down twice, then up once
+    fireEvent.keyDown(input, { key: 'ArrowDown' });
+    fireEvent.keyDown(input, { key: 'ArrowDown' });
+    fireEvent.keyDown(input, { key: 'ArrowUp' });
+    const items = document.querySelectorAll('.palette-item');
+    expect(items[1]).toHaveClass('selected');
+  });
+
+  it('Enter executes selected command and closes palette', () => {
+    const setShowCommandPalette = vi.fn();
+    const setShowNewSessionDialog = vi.fn();
+    resetStore({ showCommandPalette: true, setShowCommandPalette, setShowNewSessionDialog });
+    render(<CommandPalette />);
+    const input = screen.getByPlaceholderText('Type a command…');
+    fireEvent.keyDown(input, { key: 'Enter' });
+    // First command is "New Session" — always available
+    expect(setShowNewSessionDialog).toHaveBeenCalledWith(true);
+    expect(setShowCommandPalette).toHaveBeenCalledWith(false);
+  });
+
+  it('ESC closes palette', () => {
+    const setShowCommandPalette = vi.fn();
+    resetStore({ showCommandPalette: true, setShowCommandPalette });
+    render(<CommandPalette />);
+    fireEvent.keyDown(screen.getByPlaceholderText('Type a command…'), { key: 'Escape' });
+    expect(setShowCommandPalette).toHaveBeenCalledWith(false);
+  });
+
+  it('click on command executes and closes', () => {
+    const setShowCommandPalette = vi.fn();
+    const setShowNewSessionDialog = vi.fn();
+    resetStore({ showCommandPalette: true, setShowCommandPalette, setShowNewSessionDialog });
+    render(<CommandPalette />);
+    fireEvent.click(screen.getByText('New Session'));
+    expect(setShowNewSessionDialog).toHaveBeenCalledWith(true);
+    expect(setShowCommandPalette).toHaveBeenCalledWith(false);
+  });
+
+  // --- command actions ---
+
+  it('Delete Session action calls deleteSession', () => {
+    const setShowCommandPalette = vi.fn();
+    const deleteSession = vi.fn().mockResolvedValue(undefined);
+    const session = makeSession('s1');
+    resetStore({
+      showCommandPalette: true,
+      activeSessionId: 's1',
+      sessions: [session],
+      setShowCommandPalette,
+      deleteSession,
+    });
+    render(<CommandPalette />);
+    fireEvent.click(screen.getByText('Delete Session'));
+    expect(deleteSession).toHaveBeenCalledWith('s1');
+    expect(setShowCommandPalette).toHaveBeenCalledWith(false);
+  });
+
+  it('Send Message action focuses .cmd-input element', () => {
+    // Stub a mock input element with focus
+    const mockFocus = vi.fn();
+    const mockInput = { focus: mockFocus } as unknown as HTMLInputElement;
+    const origQuery = document.querySelector;
+    document.querySelector = vi.fn((sel: string) =>
+      sel === '.cmd-input' ? mockInput : origQuery.call(document, sel),
+    ) as typeof document.querySelector;
+
+    const session = makeSession('s1');
+    const detail = makeDetail('s1', []);
+    resetStore({
+      showCommandPalette: true,
+      activeSessionId: 's1',
+      sessions: [session],
+      sessionDetails: { s1: detail },
+    });
+    render(<CommandPalette />);
+    fireEvent.click(screen.getByText('Send Message'));
+    expect(mockFocus).toHaveBeenCalled();
+    document.querySelector = origQuery;
+  });
+
+  it('Cancel Turn action calls cancelTurn when running', () => {
+    const setShowCommandPalette = vi.fn();
+    const cancelTurn = vi.fn().mockResolvedValue(undefined);
+    const session = makeSession('s1', { is_running: 1 });
+    const detail = makeDetail('s1', [], { is_running: 1 });
+    resetStore({
+      showCommandPalette: true,
+      activeSessionId: 's1',
+      sessions: [session],
+      sessionDetails: { s1: detail },
+      setShowCommandPalette,
+      cancelTurn,
+    });
+    render(<CommandPalette />);
+    fireEvent.click(screen.getByText('Cancel Turn'));
+    expect(cancelTurn).toHaveBeenCalled();
+  });
+
+  it('tab-switch commands call switchRightTab with correct tab', () => {
+    const switchRightTab = vi.fn();
+    const session = makeSession('s1');
+    const detail = makeDetail('s1', []);
+    resetStore({
+      showCommandPalette: true,
+      activeSessionId: 's1',
+      sessions: [session],
+      sessionDetails: { s1: detail },
+      switchRightTab,
+    });
+    render(<CommandPalette />);
+    fireEvent.click(screen.getByText('Switch to Turns Tab'));
+    expect(switchRightTab).toHaveBeenCalledWith('turns');
+    fireEvent.click(screen.getByText('Switch to Metrics Tab'));
+    expect(switchRightTab).toHaveBeenCalledWith('metrics');
+    fireEvent.click(screen.getByText('Switch to Changes Tab'));
+    expect(switchRightTab).toHaveBeenCalledWith('changes');
+    fireEvent.click(screen.getByText('Switch to Logs Tab'));
+    expect(switchRightTab).toHaveBeenCalledWith('logs');
+  });
+
+  it('Close Tab action calls closeTab', () => {
+    const setShowCommandPalette = vi.fn();
+    const closeTab = vi.fn().mockResolvedValue(undefined);
+    const session = makeSession('s1');
+    resetStore({
+      showCommandPalette: true,
+      activeSessionId: 's1',
+      sessions: [session],
+      setShowCommandPalette,
+      closeTab,
+    });
+    render(<CommandPalette />);
+    fireEvent.click(screen.getByText('Close Tab'));
+    expect(closeTab).toHaveBeenCalledWith('s1');
+  });
+
+  // --- UI interactions ---
+
+  it('overlay click closes palette', () => {
+    const setShowCommandPalette = vi.fn();
+    resetStore({ showCommandPalette: true, setShowCommandPalette });
+    render(<CommandPalette />);
+    fireEvent.click(document.querySelector('.palette-overlay')!);
+    expect(setShowCommandPalette).toHaveBeenCalledWith(false);
+  });
+
+  it('mouse enter on item sets selected class', () => {
+    const session = makeSession('s1');
+    const detail = makeDetail('s1', []);
+    resetStore({
+      showCommandPalette: true,
+      activeSessionId: 's1',
+      sessions: [session],
+      sessionDetails: { s1: detail },
+    });
+    render(<CommandPalette />);
+    const items = document.querySelectorAll('.palette-item');
+    // Hover over second item
+    fireEvent.mouseEnter(items[1]);
+    expect(items[1]).toHaveClass('selected');
+    expect(items[0]).not.toHaveClass('selected');
+  });
+});

package/agent-pane/frontend/src/components/CommandPalette.tsx

@@ -1,17 +1,6 @@
 import { useState, useEffect, useRef, useMemo } from 'react';
 import { useStore } from '../store/store.ts';
-import {
-  Plus,
-  Trash2,
-  Send,
-  Square,
-  List,
-  BarChart3,
-  FileCode,
-  ScrollText,
-  X,
-  CornerDownLeft,
-} from 'lucide-react';
+import { Plus, Trash2, Send, Square, List, BarChart3, FileCode, ScrollText, X, CornerDownLeft } from 'lucide-react';
 import type { RightTab } from '../types/index.ts';
 
 interface Command {
@@ -51,7 +40,9 @@ export default function CommandPalette() {
         label: 'Delete Session',
         hint: 'Delete the active session',
         icon: Trash2,
-        action: () => { if (store.activeSessionId) store.deleteSession(store.activeSessionId); },
+        action: () => {
+          if (store.activeSessionId) store.deleteSession(store.activeSessionId);
+        },
         available: !!store.activeSessionId,
       },
       {
@@ -59,7 +50,10 @@ export default function CommandPalette() {
         label: 'Send Message',
         hint: 'Focus the message input',
         icon: Send,
-        action: () => { const el = document.querySelector<HTMLInputElement>('.cmd-input'); el?.focus(); },
+        action: () => {
+          const el = document.querySelector<HTMLInputElement>('.cmd-input');
+          el?.focus();
+        },
         available: !!store.activeSessionId && !isRunning,
       },
       {
@@ -107,7 +101,9 @@ export default function CommandPalette() {
         label: 'Close Tab',
         hint: 'Close the active session tab',
         icon: X,
-        action: () => { if (store.activeSessionId) store.closeTab(store.activeSessionId); },
+        action: () => {
+          if (store.activeSessionId) store.closeTab(store.activeSessionId);
+        },
         available: !!store.activeSessionId,
       },
     ];
@@ -118,9 +114,7 @@ export default function CommandPalette() {
     const q = query.toLowerCase().trim();
     const available = commands.filter((c) => c.available);
     if (!q) return available;
-    return available.filter((c) =>
-      c.label.toLowerCase().includes(q) || c.hint.toLowerCase().includes(q),
-    );
+    return available.filter((c) => c.label.toLowerCase().includes(q) || c.hint.toLowerCase().includes(q));
   }, [commands, query]);
 
   // Reset on open
@@ -163,7 +157,10 @@ export default function CommandPalette() {
             type="text"
             placeholder="Type a command…"
             value={query}
-            onChange={(e) => { setQuery(e.target.value); setSelectedIdx(0); }}
+            onChange={(e) => {
+              setQuery(e.target.value);
+              setSelectedIdx(0);
+            }}
             onKeyDown={handleKeyDown}
           />
           <span className="palette-esc">ESC</span>
@@ -178,10 +175,15 @@ export default function CommandPalette() {
                 <div
                   key={cmd.id}
                   className={`palette-item ${i === selectedIdx ? 'selected' : ''}`}
-                  onClick={() => { cmd.action(); setShow(false); }}
+                  onClick={() => {
+                    cmd.action();
+                    setShow(false);
+                  }}
                   onMouseEnter={() => setSelectedIdx(i)}
                 >
-                  <span className="palette-item-icon"><Icon size={16} /></span>
+                  <span className="palette-item-icon">
+                    <Icon size={16} />
+                  </span>
                   <span className="palette-item-label">{cmd.label}</span>
                   <span className="palette-item-hint">{cmd.hint}</span>
                   {i === selectedIdx && <CornerDownLeft size={12} className="palette-item-enter" />}
@@ -192,7 +194,8 @@ export default function CommandPalette() {
         )}
         <div className="palette-footer">
           <span className="palette-footer-hint">
-            <span className="kbd">↑</span><span className="kbd">↓</span> Navigate
+            <span className="kbd">↑</span>
+            <span className="kbd">↓</span> Navigate
           </span>
           <span className="palette-footer-hint">
             <span className="kbd">↵</span> Select
@@ -204,4 +207,4 @@ export default function CommandPalette() {
       </div>
     </div>
   );
-}
+}

package/agent-pane/frontend/src/components/IdeWorkspace.tsx

@@ -22,4 +22,4 @@ export default function IdeWorkspace() {
       <StatusBar />
     </div>
   );
-}
+}