Command palette (Cmd+K) (#73)

* EditAgentDialog: self-load messages for title generation

Remove messages prop from EditAgentDialog and AgentHeader usage.
Dialog now fetches its own messages via createResource, keyed by agentId,
so Generate Title works without callers needing to pass message arrays.
Generate button is disabled while messages are loading.

Add tinykeys dependency (global keyboard listener utility, zero deps).
Add tests covering message loading, generate state, and save flow.

* Add command palette (Cmd+K) with global shortcut and agent context

New files:
- CommandPalette.tsx: Corvu Dialog-based palette with Navigation and Agent
  sections, substring filtering, arrow key navigation, Enter to run.
  Lazy-fetches agent metadata on open. Handles Edit Title, Edit Notes,
  Archive, Export for the topmost agent (modal stack aware).
- command-palette-state.ts: Module-level signal for palette open/close,
  importable without pulling in component code.
- CommandPalette.test.tsx: Tests for filterActions (empty, whitespace,
  substring, case-insensitive, order).

Modified files:
- preferences.ts: Add commandPaletteShortcut preference (default $mod+k)
  with localStorage persistence.
- WorkspaceLayout.tsx: Register tinykeys global Cmd+K listener via
  createEffect; re-registers on shortcut preference change.
- LiveApp.tsx: Mount <CommandPalette /> alongside SkillLibraryDialog and
  AgentSearchDialog.
- Header.tsx: Add KeyBindingInput component and Command Palette Shortcut
  section in Settings popover. KeyBindingInput captures key combos from
  onKeyDown events and stores them as tinykeys binding strings.
- EditAgentDialog.test.tsx: Format fix for Biome.

* CommandPalette: add Unarchive action for archived agents

Show 'Unarchive Agent' when the active agent is archived (archivedAt is
set) and 'Archive Agent' when it is not. Wire UnarchiveAgentDialog as a
sub-dialog rendered outside the palette shell, matching the Archive pattern.

* AgentSearchDialog: add keyboard navigation for results list

Arrow up/down moves through grouped results (wraps); Enter opens active
result in an agent modal; Cmd/Ctrl+Enter navigates directly to the agent
page and closes the search dialog. Active result highlighted via
aria-current and bg-accent/5 background on the card.

Active index resets to -1 when results change (new search query), so the
highlight is always fresh. Index starts at -1 so mouse-only usage is
unaffected.

Handler placed on Dialog.Content (not the input) to avoid double-firing
via event bubbling through the dialog wrapper.

Add 8 tests covering ArrowDown/Up, Enter, Cmd+Enter, Ctrl+Enter, wrap,
no-selection guard, and reset-on-new-search.

* Header: logo tap opens command palette

Replace the two separate logo divs (desktop icon+text, mobile icon-only)
with a single <button> that calls setIsCommandPaletteOpen(true) on click.

The button wraps the existing BirdhouseIcon and the conditionally-visible
'Birdhouse' text (hidden sm:block), preserving the exact same visual
layout. A single gradientId is used since both breakpoints now share the
same element.

Affordance: hover:opacity-70 / active:opacity-50 gives subtle feedback
without adding visual noise. The logo was not a link previously, so no
navigation behaviour is removed.

* CommandPalette: drop 'Open' prefix from navigation action labels

* CommandPalette: reorder Navigation actions (Agent Search, Skills, New Agent, Workspace Settings)

* KeyBindingInput: extend denylist and fix Alt+key on Mac

- Add Escape, Tab, Enter, Backspace to the eventToBinding denylist so they
  can't be accidentally captured as command palette shortcuts
- Use e.code (physical key) instead of e.key when Alt is held on Mac, where
  e.key gives the composed character (e.g. Alt+k → '°' instead of 'k');
  strip the 'Key' prefix from e.code to produce the correct binding segment

* CommandPalette: show archive action disabled while agent metadata loads

Adds disabled?: boolean to PaletteAction. While agentData() is
undefined (fetch in-flight), Archive Agent is shown greyed out and
unclickable instead of showing the wrong action or hiding entirely.
Once the fetch resolves, the correct Archive/Unarchive action becomes
active. Keyboard Enter and pointer handlers are both guarded against
disabled items.

* Revert "Header: logo tap opens command palette"

This reverts commit 1a00853.

* Header: add Command Palette icon button between Skills and Settings

Icon-only button using the Command icon from lucide-solid, styled
identically to the Skills button (p-2, hover:bg-surface-overlay,
text-text-secondary). Title attribute shows two lines: 'Command Palette'
and the formatted shortcut (e.g. '⌘K'), using the existing
shortcutToDisplay helper so it reflects any user-configured binding.

Author: crayment

projects/birdhouse/frontend/bun.lock

@@ -63,6 +63,7 @@
     "shiki": "^3.20.0",
     "solid-floating-ui": "^0.3.1",
     "solid-js": "^1.9.9",
-    "solid-transition-group": "^0.3.0"
+    "solid-transition-group": "^0.3.0",
+    "tinykeys": "^3.0.0"
   }
 }

projects/birdhouse/frontend/package.json

@@ -11,6 +11,7 @@ import AgentListHeader from "./components/AgentListHeader";
 import AgentModal from "./components/AgentModal";
 import AgentSearchDialog from "./components/AgentSearchDialog";
 import AgentTreeItem from "./components/AgentTreeItem";
+import CommandPalette from "./components/CommandPalette";
 import ConnectionStatusBanner from "./components/ConnectionStatusBanner";
 import LiveMessages from "./components/LiveMessages";
 import MobileNavDrawer from "./components/MobileNavDrawer";
@@ -604,6 +605,9 @@ const LiveApp: Component<LiveAppProps> = (props) => {
 
       {/* Agent Search Dialog */}
       <AgentSearchDialog />
+
+      {/* Command Palette */}
+      <CommandPalette />
     </div>
   );
 };

projects/birdhouse/frontend/src/LiveApp.tsx

@@ -482,7 +482,6 @@ export const AgentHeader: Component<AgentHeaderProps> = (props) => {
       <EditAgentDialog
         agentId={props.agentId}
         currentTitle={currentTitle()}
-        messages={props.messages}
         open={isEditDialogOpen()}
         onOpenChange={setIsEditDialogOpen}
         onSuccess={handleEditSuccess}

projects/birdhouse/frontend/src/components/AgentHeader.tsx

@@ -1,5 +1,5 @@
 // ABOUTME: Tests for AgentSearchDialog component
-// ABOUTME: Verifies open/close, idle state, debounce API call, and result rendering
+// ABOUTME: Verifies open/close, idle state, debounce API call, result rendering, and keyboard nav
 
 import { fireEvent, render, screen, waitFor } from "@solidjs/testing-library";
 import type { JSX } from "solid-js";
@@ -20,6 +20,7 @@ vi.mock("../services/agents-api", () => ({
 let mockIsOpen = true;
 const mockCloseModal = vi.fn();
 const mockOpenModal = vi.fn();
+const mockNavigate = vi.fn();
 
 vi.mock("../lib/routing", () => ({
   useModalRoute: () => ({
@@ -28,6 +29,11 @@ vi.mock("../lib/routing", () => ({
     removeModalByType: vi.fn(),
     openModal: mockOpenModal,
   }),
+  useWorkspaceId: () => () => "test-workspace",
+}));
+
+vi.mock("@solidjs/router", () => ({
+  useNavigate: () => mockNavigate,
 }));
 
 vi.mock("corvu/dialog", () => {
@@ -36,8 +42,11 @@ vi.mock("corvu/dialog", () => {
   );
   Dialog.Portal = (props: { children: JSX.Element }) => <>{props.children}</>;
   Dialog.Overlay = () => null;
-  Dialog.Content = (props: { children: JSX.Element; class?: string }) => (
-    <div class={props.class}>{props.children}</div>
+  Dialog.Content = (props: { children: JSX.Element; class?: string; onKeyDown?: (e: KeyboardEvent) => void }) => (
+    // biome-ignore lint/a11y/noStaticElementInteractions: test mock — not a real interactive element
+    <div role="presentation" class={props.class} onKeyDown={props.onKeyDown}>
+      {props.children}
+    </div>
   );
   Dialog.Close = (props: { children: JSX.Element; class?: string; onClick?: () => void }) => (
     <button type="button" class={props.class} onClick={props.onClick}>
@@ -118,4 +127,110 @@ describe("AgentSearchDialog", () => {
       { timeout: 1000 },
     );
   });
+
+  // ---------------------------------------------------------------------------
+  // Keyboard navigation tests
+  // ---------------------------------------------------------------------------
+
+  describe("keyboard navigation", () => {
+    const twoResults = [
+      makeResult({ agentId: "agent-1", title: "Alpha Agent" }),
+      makeResult({ agentId: "agent-2", sessionId: "ses-2", title: "Beta Agent" }),
+    ];
+
+    async function renderWithResults() {
+      mockSearchAgentMessages.mockResolvedValue(makeResponse(twoResults));
+      renderDialog();
+      const input = screen.getByLabelText("Search agent messages") as HTMLInputElement;
+      fireEvent.input(input, { target: { value: "agent" } });
+      // Wait for debounce + results
+      await waitFor(() => expect(screen.getByText("Alpha Agent")).toBeInTheDocument(), { timeout: 1000 });
+    }
+
+    it("ArrowDown moves active index from -1 to 0, highlighting the first result", async () => {
+      await renderWithResults();
+      const input = screen.getByLabelText("Search agent messages");
+      fireEvent.keyDown(input, { key: "ArrowDown" });
+      // First result link should become active (aria-current or highlighted)
+      await waitFor(() => {
+        const firstLink = screen.getByText("Alpha Agent").closest("a");
+        expect(firstLink).toHaveAttribute("aria-current", "true");
+      });
+    });
+
+    it("Enter with an active result opens agent in modal", async () => {
+      await renderWithResults();
+      const input = screen.getByLabelText("Search agent messages");
+      fireEvent.keyDown(input, { key: "ArrowDown" });
+      fireEvent.keyDown(input, { key: "Enter" });
+      await waitFor(() => expect(mockOpenModal).toHaveBeenCalledWith("agent", "agent-1"));
+    });
+
+    it("Cmd+Enter with an active result navigates directly to the agent", async () => {
+      await renderWithResults();
+      const input = screen.getByLabelText("Search agent messages");
+      fireEvent.keyDown(input, { key: "ArrowDown" });
+      fireEvent.keyDown(input, { key: "Enter", metaKey: true });
+      await waitFor(() => expect(mockNavigate).toHaveBeenCalledWith("/workspace/test-workspace/agent/agent-1"));
+    });
+
+    it("Ctrl+Enter with an active result navigates directly to the agent", async () => {
+      await renderWithResults();
+      const input = screen.getByLabelText("Search agent messages");
+      fireEvent.keyDown(input, { key: "ArrowDown" });
+      fireEvent.keyDown(input, { key: "Enter", ctrlKey: true });
+      await waitFor(() => expect(mockNavigate).toHaveBeenCalledWith("/workspace/test-workspace/agent/agent-1"));
+    });
+
+    it("ArrowDown wraps from last result to first", async () => {
+      await renderWithResults();
+      const input = screen.getByLabelText("Search agent messages");
+      // Move to index 0, then 1, then wrap back to 0
+      fireEvent.keyDown(input, { key: "ArrowDown" });
+      fireEvent.keyDown(input, { key: "ArrowDown" });
+      fireEvent.keyDown(input, { key: "ArrowDown" });
+      await waitFor(() => {
+        const firstLink = screen.getByText("Alpha Agent").closest("a");
+        expect(firstLink).toHaveAttribute("aria-current", "true");
+      });
+    });
+
+    it("ArrowUp from no selection moves to the last result", async () => {
+      await renderWithResults();
+      const input = screen.getByLabelText("Search agent messages");
+      fireEvent.keyDown(input, { key: "ArrowUp" });
+      await waitFor(() => {
+        const lastLink = screen.getByText("Beta Agent").closest("a");
+        expect(lastLink).toHaveAttribute("aria-current", "true");
+      });
+    });
+
+    it("Enter with no active result (index -1) does nothing", async () => {
+      await renderWithResults();
+      const input = screen.getByLabelText("Search agent messages");
+      // No ArrowDown pressed — index stays at -1
+      fireEvent.keyDown(input, { key: "Enter" });
+      expect(mockOpenModal).not.toHaveBeenCalled();
+    });
+
+    it("active index resets to -1 when a new search is triggered", async () => {
+      await renderWithResults();
+      const input = screen.getByLabelText("Search agent messages");
+      fireEvent.keyDown(input, { key: "ArrowDown" });
+      // Confirm first result is highlighted
+      await waitFor(() => {
+        const firstLink = screen.getByText("Alpha Agent").closest("a");
+        expect(firstLink).toHaveAttribute("aria-current", "true");
+      });
+      // Change the query
+      mockSearchAgentMessages.mockResolvedValue(
+        makeResponse([makeResult({ agentId: "agent-3", title: "Gamma Agent" })]),
+      );
+      fireEvent.input(input, { target: { value: "gamma" } });
+      await waitFor(() => screen.getByText("Gamma Agent"));
+      // No result should be highlighted (aria-current should be absent or false)
+      const gammaLink = screen.getByText("Gamma Agent").closest("a");
+      expect(gammaLink).not.toHaveAttribute("aria-current", "true");
+    });
+  });
 });

projects/birdhouse/frontend/src/components/AgentSearchDialog.test.tsx

@@ -1,13 +1,14 @@
 // ABOUTME: Modal dialog for searching agent messages by content
 // ABOUTME: Shows results grouped by agent with a match-count popover for each
 
+import { useNavigate } from "@solidjs/router";
 import Dialog from "corvu/dialog";
 import Popover from "corvu/popover";
 import { Search, X } from "lucide-solid";
 import { type Component, createEffect, createMemo, createSignal, For, onCleanup, Show } from "solid-js";
 import { useWorkspace } from "../contexts/WorkspaceContext";
 import { useZIndex } from "../contexts/ZIndexContext";
-import { useModalRoute } from "../lib/routing";
+import { useModalRoute, useWorkspaceId } from "../lib/routing";
 import type { AgentMessageSearchResult, MessagePart } from "../services/agents-api";
 import { searchAgentMessages } from "../services/agents-api";
 import { cardSurfaceFlat } from "../styles/containerStyles";
@@ -160,6 +161,8 @@ const DEBOUNCE_MS = 300;
 
 const AgentSearchDialog: Component = () => {
   const { workspaceId } = useWorkspace();
+  const routeWorkspaceId = useWorkspaceId();
+  const navigate = useNavigate();
   const { modalStack, removeModalByType, openModal } = useModalRoute();
 
   const isOpen = createMemo(() => modalStack().some((m) => m.type === MODAL_TYPE_AGENT_SEARCH));
@@ -171,6 +174,8 @@ const AgentSearchDialog: Component = () => {
   const [isSearching, setIsSearching] = createSignal(false);
   const [searchError, setSearchError] = createSignal<string | null>(null);
   const [hasSearched, setHasSearched] = createSignal(false);
+  // -1 means no result is keyboard-selected
+  const [activeIndex, setActiveIndex] = createSignal(-1);
   let requestId = 0;
 
   let inputRef: HTMLInputElement | undefined;
@@ -249,6 +254,19 @@ const AgentSearchDialog: Component = () => {
     return order.map((key) => map.get(key) as GroupedResult);
   });
 
+  // Reset keyboard selection whenever results change
+  createEffect(() => {
+    groupedResults();
+    setActiveIndex(-1);
+  });
+
+  // Also reset when dialog closes
+  createEffect(() => {
+    if (!isOpen()) {
+      setActiveIndex(-1);
+    }
+  });
+
   const handleAgentClick = (agentId: string | null, e: MouseEvent) => {
     if (!agentId) return;
     // Let Cmd/Ctrl+click fall through to the browser for new-tab behavior
@@ -262,6 +280,34 @@ const AgentSearchDialog: Component = () => {
     return `/workspace/${workspaceId}/agent/${agentId}`;
   };
 
+  // Keyboard navigation: arrow up/down moves through grouped results;
+  // Enter opens the active result in a modal; Cmd/Ctrl+Enter navigates directly.
+  const handleKeyDown = (e: KeyboardEvent) => {
+    const groups = groupedResults();
+    if (groups.length === 0) return;
+
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      setActiveIndex((i) => (i + 1) % groups.length);
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      setActiveIndex((i) => (i <= 0 ? groups.length - 1 : i - 1));
+    } else if (e.key === "Enter") {
+      const idx = activeIndex();
+      if (idx < 0) return;
+      const group = groups[idx];
+      if (!group?.agentId) return;
+      e.preventDefault();
+      if (e.metaKey || e.ctrlKey) {
+        // Direct navigation — close search and navigate to the agent's main view
+        closeSearch();
+        navigate(`/workspace/${routeWorkspaceId()}/agent/${group.agentId}`);
+      } else {
+        openModal("agent", group.agentId);
+      }
+    }
+  };
+
   return (
     <Dialog
       open={isOpen()}
@@ -285,6 +331,7 @@ const AgentSearchDialog: Component = () => {
                    w-[95vw] max-w-2xl max-h-[85dvh]
                    left-1/2 top-[8%] -translate-x-1/2
                    flex flex-col overflow-hidden z-[40]`}
+          onKeyDown={handleKeyDown}
         >
           {/* Search input header */}
           <div class="flex items-center gap-2 px-4 py-3 border-b border-border flex-shrink-0">
@@ -348,11 +395,12 @@ const AgentSearchDialog: Component = () => {
             <Show when={groupedResults().length > 0}>
               <div class="divide-y divide-border">
                 <For each={groupedResults()}>
-                  {(group) => (
+                  {(group, index) => (
                     <SearchResultCard
                       group={group}
                       onAgentClick={(e) => handleAgentClick(group.agentId, e)}
                       agentHref={agentHref(group.agentId)}
+                      isActive={activeIndex() === index()}
                     />
                   )}
                 </For>
@@ -369,6 +417,7 @@ interface SearchResultCardProps {
   group: GroupedResult;
   onAgentClick: (e: MouseEvent) => void;
   agentHref: string | undefined;
+  isActive: boolean;
 }
 
 const SearchResultCard: Component<SearchResultCardProps> = (props) => {
@@ -377,13 +426,14 @@ const SearchResultCard: Component<SearchResultCardProps> = (props) => {
   const matchCount = () => props.group.matches.length;
 
   return (
-    <div class="px-4 py-4 space-y-2">
+    <div class="px-4 py-4 space-y-2" classList={{ "bg-accent/5": props.isActive }}>
       {/* Agent title + session date range */}
       <div class="flex flex-col gap-0.5">
         <a
           href={props.agentHref}
           onClick={(e) => props.onAgentClick(e)}
           class="text-sm font-medium text-accent hover:underline leading-snug"
+          aria-current={props.isActive ? "true" : undefined}
           data-agent-id={props.group.agentId}
         >
           {props.group.title ?? props.group.sessionId}