@castlekit/castle 0.1.6 → 0.3.1

package/src/components/layout/sidebar.tsx

@@ -1,15 +1,25 @@
 "use client";
 
+import { useState, useRef, useEffect } from "react";
+import { useTheme } from "next-themes";
 import {
   LayoutDashboard,
+  MessageCircle,
+  User,
+  Sun,
+  Moon,
+  Settings,
+  Loader2,
   type LucideIcon,
 } from "lucide-react";
-import { Fragment } from "react";
 import { CastleIcon } from "@/components/icons/castle-icon";
 import { Tooltip } from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
-import Link from "next/link";
-import { usePathname } from "next/navigation";
+import { usePathname, useRouter } from "next/navigation";
+import { useUserSettings } from "@/lib/hooks/use-user-settings";
+// Search is now a floating bar (top-right), no longer in sidebar
+import { useAgentStatus, USER_STATUS_ID } from "@/lib/hooks/use-agent-status";
+import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar";
 
 interface NavItem {
   id: string;
@@ -32,6 +42,12 @@ const navItems: NavItem[] = [
     icon: LayoutDashboard,
     href: "/",
   },
+  {
+    id: "chat",
+    label: "Chat",
+    icon: MessageCircle,
+    href: "/chat",
+  },
 ];
 
 function Sidebar({ 
@@ -41,11 +57,13 @@ function Sidebar({
   variant = "solid"
 }: SidebarProps) {
   const pathname = usePathname();
+  const router = useRouter();
   const useLinks = !onNavigate;
-
+  const { tooltips: showTooltips } = useUserSettings();
   const activeFromPath = (() => {
     if (!pathname) return "dashboard";
     if (pathname === "/") return "dashboard";
+    if (pathname.startsWith("/chat")) return "chat";
     return "dashboard";
   })();
 
@@ -54,54 +72,32 @@ function Sidebar({
   return (
     <aside
       className={cn(
-        "fixed top-5 left-6 bottom-5 flex flex-col z-40 shadow-xl shadow-black/20 rounded-[28px] w-14",
+        "fixed top-[20px] left-[24px] bottom-[20px] flex flex-col z-40 rounded-[var(--radius-md)] w-14",
         variant === "glass" ? "glass" : "bg-surface border border-border",
         className
       )}
     >
       {/* Header */}
       <div className="flex items-center justify-center pt-5 pb-[60px]">
-        {useLinks ? (
-          <Link
-            href="/"
-            aria-label="Go to Dashboard"
-            className="flex items-center justify-center transition-opacity hover:opacity-85"
-          >
-            <CastleIcon className="h-[36px] w-[36px] min-h-[36px] min-w-[36px] shrink-0 text-[var(--logo-color)] -mt-[3px]" />
-          </Link>
-        ) : (
-          <button
-            type="button"
-            aria-label="Go to Dashboard"
-            onClick={() => onNavigate?.("dashboard")}
-            className="flex items-center justify-center transition-opacity hover:opacity-85 cursor-pointer"
-          >
-            <CastleIcon className="h-[36px] w-[36px] min-h-[36px] min-w-[36px] shrink-0 text-[var(--logo-color)] -mt-[3px]" />
-          </button>
-        )}
+        <button
+          type="button"
+          aria-label="Go to Dashboard"
+          onClick={() => useLinks ? router.push("/") : onNavigate?.("dashboard")}
+          className="flex items-center justify-center transition-opacity hover:opacity-85 cursor-pointer"
+        >
+          <CastleIcon className="h-[36px] w-[36px] min-h-[36px] min-w-[36px] shrink-0 text-[var(--logo-color)] -mt-[3px]" />
+        </button>
       </div>
 
       {/* Navigation */}
       <nav className="flex-1 space-y-1 px-2">
         {navItems.map((item) => {
           const isActive = effectiveActive === item.id;
-          const NavEl = useLinks ? (
-            <Link
-              href={item.href}
-              className={cn(
-                "flex items-center justify-center w-full rounded-[20px] p-2.5 cursor-pointer",
-                isActive
-                  ? "bg-accent/10 text-accent"
-                  : "text-foreground-secondary hover:text-foreground hover:bg-surface-hover"
-              )}
-            >
-              <item.icon className="h-5 w-5 shrink-0" />
-            </Link>
-          ) : (
+          const NavEl = (
             <button
-              onClick={() => onNavigate?.(item.id)}
+              onClick={() => useLinks ? router.push(item.href) : onNavigate?.(item.id)}
               className={cn(
-                "flex items-center justify-center w-full rounded-[20px] p-2.5 cursor-pointer",
+                "flex items-center justify-center w-full rounded-[4px] p-2.5 cursor-pointer",
                 isActive
                   ? "bg-accent/10 text-accent"
                   : "text-foreground-secondary hover:text-foreground hover:bg-surface-hover"
@@ -111,18 +107,103 @@ function Sidebar({
             </button>
           );
 
-          return (
-            <Tooltip key={item.id} content={item.label} side="right">
-              {NavEl}
-            </Tooltip>
-          );
+          if (showTooltips) {
+            return (
+              <Tooltip key={item.id} content={item.label} side="right">
+                {NavEl}
+              </Tooltip>
+            );
+          }
+          return <div key={item.id}>{NavEl}</div>;
         })}
       </nav>
 
-      {/* Spacer at bottom for visual balance */}
-      <div className="pb-4" />
+      {/* User menu at bottom */}
+      <SidebarUserMenu />
     </aside>
   );
 }
 
+function SidebarUserMenu() {
+  const [open, setOpen] = useState(false);
+  const { theme, setTheme } = useTheme();
+  const [mounted, setMounted] = useState(false);
+  const router = useRouter();
+  const { avatarUrl, isLoading: settingsLoading } = useUserSettings();
+  const { getStatus } = useAgentStatus();
+  const userStatus = getStatus(USER_STATUS_ID);
+  const avatarDotStatus = userStatus === "active" ? "online" as const : "offline" as const;
+  const menuRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
+        setOpen(false);
+      }
+    }
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+
+  const isDark = theme === "dark";
+
+  return (
+    <div ref={menuRef} className="relative flex justify-center pb-[8px]">
+      <button
+        onClick={() => setOpen(!open)}
+        className="group flex items-center justify-center rounded-[4px] cursor-pointer transition-opacity"
+      >
+        <Avatar size="sm" status={avatarDotStatus}>
+          {settingsLoading ? (
+            <AvatarFallback className="skeleton" />
+          ) : avatarUrl ? (
+            <AvatarImage
+              src={avatarUrl}
+              alt="You"
+              className="grayscale group-hover:grayscale-0 transition-all duration-200"
+            />
+          ) : (
+            <AvatarFallback className="text-foreground-secondary">
+              <User className="h-5 w-5" />
+            </AvatarFallback>
+          )}
+        </Avatar>
+      </button>
+
+      {open && (
+        <div className="absolute left-[calc(100%+8px)] bottom-0 w-48 rounded-[var(--radius-md)] bg-surface border border-border shadow-xl py-1 z-50">
+          <button
+            onClick={() => { setOpen(false); router.push("/settings"); }}
+            className="flex items-center gap-3 w-full px-4 py-2.5 text-sm text-foreground-secondary hover:text-foreground hover:bg-surface-hover cursor-pointer"
+          >
+            <Settings className="h-4 w-4" />
+            Settings
+          </button>
+
+          {mounted && (
+            <button
+              onClick={() => {
+                setTheme(isDark ? "light" : "dark");
+                setOpen(false);
+              }}
+              className="flex items-center gap-3 w-full px-4 py-2.5 text-sm text-foreground-secondary hover:text-foreground hover:bg-surface-hover cursor-pointer"
+            >
+              {isDark ? (
+                <Sun className="h-4 w-4" />
+              ) : (
+                <Moon className="h-4 w-4" />
+              )}
+              {isDark ? "Light mode" : "Dark mode"}
+            </button>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
 export { Sidebar };

package/src/components/layout/user-menu.tsx

@@ -2,8 +2,10 @@
 
 import { useState, useRef, useEffect } from "react";
 import { useTheme } from "next-themes";
-import { User, Sun, Moon } from "lucide-react";
+import { useRouter } from "next/navigation";
+import { User, Sun, Moon, Settings } from "lucide-react";
 import { cn } from "@/lib/utils";
+import { useUserSettings } from "@/lib/hooks/use-user-settings";
 
 export interface UserMenuProps {
   className?: string;
@@ -14,6 +16,8 @@ function UserMenu({ className, variant = "solid" }: UserMenuProps) {
   const [open, setOpen] = useState(false);
   const { theme, setTheme } = useTheme();
   const [mounted, setMounted] = useState(false);
+  const router = useRouter();
+  const { avatarUrl } = useUserSettings();
   const menuRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
@@ -37,15 +41,36 @@ function UserMenu({ className, variant = "solid" }: UserMenuProps) {
       <button
         onClick={() => setOpen(!open)}
         className={cn(
-          "flex items-center justify-center h-14 w-14 rounded-[28px] shadow-xl shadow-black/20 text-foreground-secondary hover:text-foreground cursor-pointer",
-          variant === "glass" ? "glass" : "bg-surface border border-border"
+          "flex items-center justify-center h-14 w-14 rounded-[28px] shadow-xl shadow-black/20 cursor-pointer overflow-hidden",
+          avatarUrl
+            ? ""
+            : cn(
+                "text-foreground-secondary hover:text-foreground",
+                variant === "glass" ? "glass" : "bg-surface border border-border"
+              )
         )}
       >
-        <User className="h-5 w-5" />
+        {avatarUrl ? (
+          <img
+            src={avatarUrl}
+            alt="You"
+            className="w-full h-full object-cover"
+          />
+        ) : (
+          <User className="h-5 w-5" />
+        )}
       </button>
 
       {open && (
         <div className="absolute right-0 top-[calc(100%+8px)] w-48 rounded-[var(--radius-md)] bg-surface border border-border shadow-xl py-1 z-50">
+          <button
+            onClick={() => { setOpen(false); router.push("/settings"); }}
+            className="flex items-center gap-3 w-full px-4 py-2.5 text-sm text-foreground-secondary hover:text-foreground hover:bg-surface-hover cursor-pointer"
+          >
+            <Settings className="h-4 w-4" />
+            Settings
+          </button>
+
           {mounted && (
             <button
               onClick={() => {

package/src/components/providers/presence-provider.tsx

@@ -0,0 +1,8 @@
+"use client";
+
+import { useUserPresence } from "@/lib/hooks/use-agent-status";
+
+export function PresenceProvider({ children }: { children: React.ReactNode }) {
+  useUserPresence();
+  return <>{children}</>;
+}

package/src/components/providers/search-provider.tsx

@@ -0,0 +1,110 @@
+"use client";
+
+import { createContext, useContext, useState, useEffect, useCallback } from "react";
+import { usePathname } from "next/navigation";
+import { Search } from "lucide-react";
+import { SearchDialog } from "@/components/search/search-dialog";
+
+// ============================================================================
+// Context
+// ============================================================================
+
+interface SearchContextValue {
+  isSearchOpen: boolean;
+  openSearch: () => void;
+  closeSearch: () => void;
+}
+
+const SearchContext = createContext<SearchContextValue>({
+  isSearchOpen: false,
+  openSearch: () => {},
+  closeSearch: () => {},
+});
+
+export function useSearchContext() {
+  return useContext(SearchContext);
+}
+
+// ============================================================================
+// Reusable search trigger button (flow element — no fixed positioning)
+// ============================================================================
+
+export function SearchTrigger({ className }: { className?: string }) {
+  const { openSearch } = useSearchContext();
+  const [isMac, setIsMac] = useState(true);
+
+  useEffect(() => {
+    setIsMac(navigator.platform?.toUpperCase().includes("MAC") ?? true);
+  }, []);
+
+  return (
+    <button
+      onClick={openSearch}
+      className={className ?? "flex items-center gap-3 pl-3 pr-2.5 h-[38px] w-[320px] rounded-[var(--radius-sm)] bg-surface border border-border hover:border-border-hover text-foreground-secondary hover:text-foreground transition-colors cursor-pointer shadow-sm"}
+    >
+      <Search className="h-4 w-4 shrink-0" strokeWidth={2.5} />
+      <span className="text-sm text-foreground-secondary/50 flex-1 text-left">Search Castle...</span>
+      <kbd className="flex items-center justify-center h-[22px] px-1.5 gap-1 rounded-[4px] bg-surface-hover border border-border font-medium text-foreground-secondary">
+        {isMac ? <span className="text-[15px]">⌘</span> : <span className="text-[11px]">Ctrl</span>}
+        <span className="text-[11px]">K</span>
+      </kbd>
+    </button>
+  );
+}
+
+// ============================================================================
+// Provider
+// ============================================================================
+
+export function SearchProvider({ children }: { children: React.ReactNode }) {
+  const [isSearchOpen, setIsSearchOpen] = useState(false);
+  const [isMac, setIsMac] = useState(true);
+  const pathname = usePathname();
+
+  // Detect platform for keyboard shortcut display
+  useEffect(() => {
+    setIsMac(navigator.platform?.toUpperCase().includes("MAC") ?? true);
+  }, []);
+
+  // Hide floating trigger on pages that render their own SearchTrigger in the header
+  const showFloatingSearch =
+    !["/settings", "/ui-kit", "/"].includes(pathname) &&
+    !pathname.startsWith("/chat");
+
+  const openSearch = useCallback(() => setIsSearchOpen(true), []);
+  const closeSearch = useCallback(() => setIsSearchOpen(false), []);
+
+  // Global shortcut: Cmd+K / Ctrl+K to open search
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      if ((e.metaKey || e.ctrlKey) && e.key === "k") {
+        e.preventDefault();
+        setIsSearchOpen((prev) => !prev);
+      }
+    };
+
+    document.addEventListener("keydown", handler);
+    return () => document.removeEventListener("keydown", handler);
+  }, []);
+
+  return (
+    <SearchContext.Provider value={{ isSearchOpen, openSearch, closeSearch }}>
+      {children}
+      {/* Floating search trigger — only on pages without an embedded header trigger */}
+      {showFloatingSearch && (
+        <button
+          onClick={openSearch}
+          className="fixed top-[28px] right-[28px] z-40 flex items-center gap-3 pl-3 pr-2.5 h-[38px] w-[320px] rounded-[var(--radius-sm)] bg-surface border border-border hover:border-border-hover text-foreground-secondary hover:text-foreground transition-colors cursor-pointer shadow-sm"
+        >
+          <Search className="h-4 w-4 shrink-0" strokeWidth={2.5} />
+          <span className="text-sm text-foreground-secondary/50 flex-1 text-left">Search Castle...</span>
+          <kbd className="flex items-center justify-center h-[22px] px-1.5 gap-1 rounded-[4px] bg-surface-hover border border-border font-medium text-foreground-secondary">
+            {isMac ? <span className="text-[15px]">⌘</span> : <span className="text-[11px]">Ctrl</span>}
+            <span className="text-[11px]">K</span>
+          </kbd>
+        </button>
+      )}
+      <SearchDialog open={isSearchOpen} onClose={closeSearch} />
+    </SearchContext.Provider>
+  );
+}

package/src/components/search/search-dialog.tsx

@@ -0,0 +1,269 @@
+"use client";
+
+import { useEffect, useRef, useState, type ReactNode } from "react";
+import { useRouter } from "next/navigation";
+import { Search, Clock, X } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { formatDateTime } from "@/lib/date-utils";
+import { useSearch } from "@/lib/hooks/use-search";
+import type {
+  SearchResult,
+  SearchResultType,
+  MessageSearchResult,
+} from "@/lib/types/search";
+
+// ============================================================================
+// Result renderers — one per content type (pluggable registry)
+// ============================================================================
+
+function MessageResultRow({ result }: { result: MessageSearchResult }) {
+  const timeStr = formatDateTime(result.timestamp);
+
+  return (
+    <div className="flex items-start gap-3 min-w-0">
+      <div className="min-w-0 flex-1">
+        <div className="flex items-center gap-2 text-xs text-foreground-secondary mb-0.5">
+          <span className="px-1.5 py-0.5 rounded bg-accent/10 text-accent font-medium text-[11px]">
+            {result.title}
+          </span>
+          {result.archived && (
+            <span className="text-[11px] text-foreground-secondary/50 italic">archived</span>
+          )}
+          <span className="font-medium">{result.subtitle}</span>
+          <span className="text-foreground-secondary/60">{timeStr}</span>
+        </div>
+        <p className="text-sm text-foreground truncate">{result.snippet}</p>
+      </div>
+    </div>
+  );
+}
+
+// Registry: map each SearchResultType to its renderer
+const resultRenderers: Record<
+  SearchResultType,
+  ((result: SearchResult) => ReactNode) | null
+> = {
+  message: (r) => <MessageResultRow result={r as MessageSearchResult} />,
+  task: null,    // Future
+  note: null,    // Future
+  project: null, // Future
+};
+
+// ============================================================================
+// SearchDialog
+// ============================================================================
+
+interface SearchDialogProps {
+  open: boolean;
+  onClose: () => void;
+}
+
+export function SearchDialog({ open, onClose }: SearchDialogProps) {
+  const router = useRouter();
+  const inputRef = useRef<HTMLInputElement>(null);
+  const listRef = useRef<HTMLDivElement>(null);
+  const { query, setQuery, results, isSearching, recentSearches, clearRecentSearches } =
+    useSearch();
+  const [selectedIndex, setSelectedIndex] = useState(-1);
+
+  // Focus input on open
+  useEffect(() => {
+    if (open) {
+      // Small delay to ensure the DOM is ready
+      requestAnimationFrame(() => inputRef.current?.focus());
+      setSelectedIndex(-1);
+    }
+  }, [open]);
+
+  // Reset selection when results change
+  useEffect(() => {
+    setSelectedIndex(-1);
+  }, [results]);
+
+  // Determine what items are shown (results or recent searches)
+  const showRecent = !query.trim() && recentSearches.length > 0;
+  const itemCount = showRecent ? recentSearches.length : results.length;
+
+  // Keyboard navigation
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === "Escape") {
+      e.preventDefault();
+      onClose();
+      return;
+    }
+
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      setSelectedIndex((prev) => (prev < itemCount - 1 ? prev + 1 : 0));
+      return;
+    }
+
+    if (e.key === "ArrowUp") {
+      e.preventDefault();
+      setSelectedIndex((prev) => (prev > 0 ? prev - 1 : itemCount - 1));
+      return;
+    }
+
+    if (e.key === "Enter" && selectedIndex >= 0) {
+      e.preventDefault();
+      if (showRecent) {
+        // Fill input with the recent search
+        setQuery(recentSearches[selectedIndex]);
+      } else if (results[selectedIndex]) {
+        navigateToResult(results[selectedIndex]);
+      }
+      return;
+    }
+  };
+
+  // Scroll selected item into view
+  useEffect(() => {
+    if (selectedIndex < 0 || !listRef.current) return;
+    const items = listRef.current.querySelectorAll("[data-search-item]");
+    items[selectedIndex]?.scrollIntoView({ block: "nearest" });
+  }, [selectedIndex]);
+
+  const navigateToResult = (result: SearchResult) => {
+    router.push(result.href);
+    // Close after navigation is dispatched — ensures router.push isn't
+    // interrupted by the dialog unmounting
+    setTimeout(onClose, 0);
+  };
+
+  if (!open) return null;
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-start justify-center pt-[15vh]"
+      onClick={onClose}
+    >
+      {/* Backdrop */}
+      <div className="absolute inset-0 bg-black/50 backdrop-blur-sm" />
+
+      {/* Dialog */}
+      <div
+        className="relative w-full max-w-[560px] rounded-[var(--radius-md)] bg-surface border border-border shadow-2xl overflow-hidden"
+        onClick={(e) => e.stopPropagation()}
+      >
+        {/* Search input */}
+        <div className="flex items-center gap-3 px-4 py-3 border-b border-border">
+          <Search className="h-5 w-5 text-foreground-secondary shrink-0" />
+          <input
+            ref={inputRef}
+            type="text"
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            onKeyDown={handleKeyDown}
+            placeholder="Search across all channels..."
+            className="flex-1 bg-transparent text-[15px] focus:outline-none placeholder:text-foreground-secondary/50"
+          />
+          <kbd className="hidden sm:inline-flex items-center gap-0.5 px-1.5 py-0.5 text-[11px] font-medium text-foreground-secondary/60 bg-surface-hover rounded border border-border/50">
+            ESC
+          </kbd>
+        </div>
+
+        {/* Results / Recent searches */}
+        <div ref={listRef} className="max-h-[400px] overflow-y-auto">
+          {/* Recent searches (before typing) */}
+          {showRecent && (
+            <div>
+              <div className="flex items-center justify-between px-4 pt-3 pb-1.5">
+                <span className="text-xs font-medium text-foreground-secondary/60 uppercase tracking-wider">
+                  Recent searches
+                </span>
+                <button
+                  onClick={clearRecentSearches}
+                  className="text-xs text-foreground-secondary/60 hover:text-foreground-secondary transition-colors cursor-pointer"
+                >
+                  Clear
+                </button>
+              </div>
+              {recentSearches.map((recent, i) => (
+                <button
+                  key={recent}
+                  data-search-item
+                  onClick={() => setQuery(recent)}
+                  className={cn(
+                    "flex items-center gap-3 w-full px-4 py-2.5 text-sm text-left transition-colors cursor-pointer",
+                    selectedIndex === i
+                      ? "bg-accent/10 text-accent"
+                      : "text-foreground hover:bg-surface-hover"
+                  )}
+                >
+                  <Clock className="h-4 w-4 text-foreground-secondary/60 shrink-0" />
+                  <span className="truncate">{recent}</span>
+                </button>
+              ))}
+            </div>
+          )}
+
+          {/* Empty state — no query, no recent */}
+          {!query.trim() && recentSearches.length === 0 && (
+            <div className="px-4 py-8 text-center text-sm text-foreground-secondary/60">
+              Search across all channels
+            </div>
+          )}
+
+          {/* Loading skeleton */}
+          {query.trim() && isSearching && results.length === 0 && (
+            <div className="px-2">
+              {[1, 2, 3, 4, 5].map((i) => (
+                <div key={i} className="px-2 py-3 border-b border-border/20 last:border-b-0">
+                  <div className="flex items-center gap-2 mb-1.5">
+                    <div className="skeleton h-4 w-16 rounded" />
+                    <div className="skeleton h-3 w-12 rounded" />
+                    <div className="skeleton h-3 w-10 rounded" />
+                  </div>
+                  <div className="skeleton h-3.5 rounded" style={{ width: `${55 + i * 8}%` }} />
+                </div>
+              ))}
+            </div>
+          )}
+
+          {/* Results */}
+          {query.trim() && !isSearching && results.length === 0 && (
+            <div className="px-4 py-8 text-center text-sm text-foreground-secondary">
+              No results found
+            </div>
+          )}
+
+          {query.trim() &&
+            results.map((result, i) => {
+              const renderer = resultRenderers[result.type];
+              if (!renderer) return null;
+              return (
+                <button
+                  key={result.id}
+                  data-search-item
+                  onClick={() => navigateToResult(result)}
+                  className={cn(
+                    "w-full px-4 py-3 text-left transition-colors cursor-pointer border-b border-border/20 last:border-b-0",
+                    selectedIndex === i
+                      ? "bg-accent/10"
+                      : "hover:bg-surface-hover"
+                  )}
+                >
+                  {renderer(result)}
+                </button>
+              );
+            })}
+        </div>
+
+        {/* Footer hint */}
+        {query.trim() && results.length > 0 && (
+          <div className="px-4 py-2 border-t border-border/50 text-[11px] text-foreground-secondary/50 flex items-center gap-3">
+            <span>
+              <kbd className="px-1 py-0.5 rounded bg-surface-hover border border-border/50 text-[10px]">↑↓</kbd> Navigate
+            </span>
+            <span>
+              <kbd className="px-1 py-0.5 rounded bg-surface-hover border border-border/50 text-[10px]">↵</kbd> Open
+            </span>
+            <span>
+              <kbd className="px-1 py-0.5 rounded bg-surface-hover border border-border/50 text-[10px]">esc</kbd> Close
+            </span>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}