@cryptiklemur/lattice 0.0.0

package/client/src/components/sidebar/Sidebar.tsx

@@ -0,0 +1,209 @@
+import { useState, useEffect, useRef } from "react";
+import { Plus, ChevronDown, Search, LayoutDashboard } from "lucide-react";
+import { LatticeLogomark } from "../ui/LatticeLogomark";
+import type { SessionSummary, ServerMessage, SettingsDataMessage } from "@lattice/shared";
+import { useProjects } from "../../hooks/useProjects";
+import { useMesh } from "../../hooks/useMesh";
+import { useWebSocket } from "../../hooks/useWebSocket";
+import { useSidebar } from "../../hooks/useSidebar";
+import { useSession } from "../../hooks/useSession";
+import { clearSession } from "../../stores/session";
+import { ProjectRail } from "./ProjectRail";
+import { SessionList } from "./SessionList";
+import { UserIsland } from "./UserIsland";
+import { UserMenu } from "./UserMenu";
+import { SearchFilter } from "./SearchFilter";
+import { ProjectDropdown } from "./ProjectDropdown";
+import { SettingsSidebar } from "./SettingsSidebar";
+
+function SectionLabel({ label, actions }: { label: string; actions?: React.ReactNode }) {
+  return (
+    <div className="px-4 pt-4 pb-2 flex items-center justify-between flex-shrink-0 select-none">
+      <span className="text-xs font-bold tracking-wider uppercase text-base-content/40">
+        {label}
+      </span>
+      {actions && (
+        <div className="flex items-center gap-0.5">
+          {actions}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export function Sidebar({ onSessionSelect }: { onSessionSelect?: () => void }) {
+  var { projects, activeProject } = useProjects();
+  var { nodes } = useMesh();
+  var ws = useWebSocket();
+  var sidebar = useSidebar();
+  var session = useSession();
+  var [sessionSearch, setSessionSearch] = useState<string>("");
+  var [sessionSearchOpen, setSessionSearchOpen] = useState<boolean>(false);
+  var userIslandRef = useRef<HTMLElement | null>(null);
+  var projectHeaderRef = useRef<HTMLElement | null>(null);
+
+  var localNode = nodes.find(function (n) { return n.isLocal; });
+  var [configNodeName, setConfigNodeName] = useState("");
+
+  useEffect(function () {
+    function handleSettingsData(msg: ServerMessage) {
+      if (msg.type !== "settings:data") return;
+      var data = msg as SettingsDataMessage;
+      if (data.config.name) {
+        setConfigNodeName(data.config.name);
+      }
+    }
+    ws.subscribe("settings:data", handleSettingsData);
+    ws.send({ type: "settings:get" });
+    return function () {
+      ws.unsubscribe("settings:data", handleSettingsData);
+    };
+  }, []);
+
+  var localNodeName = localNode ? localNode.name : configNodeName;
+  var initialActivatedRef = useRef<boolean>(false);
+
+  useEffect(function () {
+    if (initialActivatedRef.current) return;
+    if (!sidebar.activeProjectSlug || !sidebar.activeSessionId) return;
+    if (!activeProject) return;
+    initialActivatedRef.current = true;
+    session.activateSession(sidebar.activeProjectSlug, sidebar.activeSessionId);
+  }, [sidebar.activeProjectSlug, sidebar.activeSessionId, activeProject]);
+
+  // Ctrl/Cmd+K is handled by the global CommandPalette
+
+  function handleSessionActivate(s: SessionSummary) {
+    if (activeProject) {
+      session.activateSession(activeProject.slug, s.id);
+    }
+    sidebar.closeMenus();
+    if (onSessionSelect) {
+      onSessionSelect();
+    }
+  }
+
+  function handleNewSession() {
+    if (!activeProject?.slug) {
+      return;
+    }
+    ws.send({ type: "session:create", projectSlug: activeProject.slug });
+  }
+
+  return (
+    <div className="flex flex-row h-full w-full overflow-hidden relative">
+      <ProjectRail
+        projects={projects}
+        nodes={nodes}
+        activeProjectSlug={sidebar.activeProjectSlug}
+        onSelectProject={sidebar.setActiveProjectSlug}
+        onDashboardClick={sidebar.goToDashboard}
+        isDashboardActive={sidebar.activeView.type === "dashboard"}
+        dimmed={sidebar.sidebarMode === "settings"}
+      />
+      <div className="flex flex-col flex-1 overflow-hidden min-h-0 bg-base-200 border-r border-base-300">
+        {sidebar.sidebarMode === "project" ? (
+          <>
+            {sidebar.activeView.type === "dashboard" ? (
+              <>
+                <div className="px-4 py-3 border-b border-base-300 flex-shrink-0 flex items-center gap-2">
+                  <LatticeLogomark size={18} />
+                  <span className="text-[13px] font-mono font-bold text-base-content/90">
+                    Lattice
+                  </span>
+                </div>
+                <div className="flex-1 overflow-auto px-4 py-3 pb-16">
+                  <SectionLabel label="Projects" />
+                  <div className="text-[12px] text-base-content/40 px-4">
+                    Select a project from the rail to view sessions.
+                  </div>
+                </div>
+              </>
+            ) : (
+              <>
+                <button
+                  type="button"
+                  ref={function (el) { projectHeaderRef.current = el; }}
+                  onClick={sidebar.toggleProjectDropdown}
+                  aria-label="Switch project"
+                  aria-expanded={sidebar.projectDropdownOpen}
+                  className="w-full px-4 py-3 border-b border-base-300 flex-shrink-0 flex items-center justify-between cursor-pointer hover:bg-base-300/30 transition-colors text-left"
+                >
+                  <span className="text-[13px] font-mono font-bold text-base-content/90">
+                    {activeProject?.title ?? "No Project"}
+                  </span>
+                  <ChevronDown size={14} className="text-base-content/30" />
+                </button>
+
+                <button
+                  type="button"
+                  onClick={function () { sidebar.goToProjectDashboard(); }}
+                  className="flex items-center gap-2 mx-3 mt-2 px-2 py-1.5 rounded-lg text-[11px] text-base-content/40 hover:text-base-content/70 hover:bg-base-300/30 transition-colors"
+                >
+                  <LayoutDashboard size={12} />
+                  <span className="font-mono tracking-wide">Dashboard</span>
+                </button>
+
+                <SectionLabel
+                  label="Sessions"
+                  actions={
+                    <>
+                      <button onClick={function () { setSessionSearchOpen(function (v) { return !v; }); }} className="btn btn-ghost btn-xs btn-square text-base-content/40 hover:text-base-content" aria-label="Search sessions">
+                        <Search size={13} />
+                      </button>
+                      <button onClick={handleNewSession} className="btn btn-ghost btn-xs btn-square text-base-content/40 hover:text-base-content" aria-label="New session">
+                        <Plus size={13} />
+                      </button>
+                    </>
+                  }
+                />
+                {sessionSearchOpen && (
+                  <SearchFilter
+                    value={sessionSearch}
+                    onChange={setSessionSearch}
+                    onClose={function () { setSessionSearchOpen(false); setSessionSearch(""); }}
+                    placeholder="Filter sessions..."
+                  />
+                )}
+                <SessionList
+                  projectSlug={activeProject?.slug ?? null}
+                  activeSessionId={session.activeSessionId}
+                  onSessionActivate={handleSessionActivate}
+                  onSessionDeactivate={clearSession}
+                  filter={sessionSearch}
+                />
+              </>
+            )}
+
+          </>
+        ) : (
+          <SettingsSidebar
+            projectName={activeProject?.title ?? "Dashboard"}
+            onBack={sidebar.exitSettings}
+          />
+        )}
+      </div>
+
+      <div
+        ref={function (el) { userIslandRef.current = el; }}
+        className="absolute bottom-2 left-2 right-2 z-10 bg-base-300 border border-base-content/15 rounded-xl shadow-lg"
+      >
+        <UserIsland nodeName={localNodeName} onClick={sidebar.toggleUserMenu} />
+      </div>
+
+      {sidebar.userMenuOpen && (
+        <UserMenu
+          anchorRef={userIslandRef}
+          onClose={sidebar.closeMenus}
+          onOpenNodeSettings={sidebar.openNodeSettings}
+        />
+      )}
+      {sidebar.projectDropdownOpen && (
+        <ProjectDropdown
+          anchorRef={projectHeaderRef}
+          onClose={sidebar.closeMenus}
+        />
+      )}
+    </div>
+  );
+}

package/client/src/components/sidebar/UserIsland.tsx

@@ -0,0 +1,59 @@
+import { Sun, Moon, Settings } from "lucide-react";
+import { useTheme } from "../../hooks/useTheme";
+import { useSidebar } from "../../hooks/useSidebar";
+import pkg from "../../../package.json";
+
+interface UserIslandProps {
+  nodeName: string;
+  onClick: () => void;
+}
+
+export function UserIsland(props: UserIslandProps) {
+  var { mode, toggleMode } = useTheme();
+  var sidebar = useSidebar();
+
+  var initial = props.nodeName.charAt(0).toUpperCase();
+
+  return (
+    <div
+      role="group"
+      aria-label="User controls"
+      className="flex items-center gap-2 px-3 py-2"
+    >
+      <button
+        onClick={props.onClick}
+        className="flex items-center gap-2 flex-1 min-w-0 rounded-lg px-1 py-1 -mx-1 hover:bg-base-content/5 transition-colors duration-[120ms] cursor-pointer"
+        aria-label="Node info"
+      >
+        <div className="w-7 h-7 rounded-full bg-primary text-primary-content text-[12px] font-bold flex items-center justify-center flex-shrink-0">
+          {initial}
+        </div>
+        <div className="flex-1 min-w-0 text-left">
+          <div className="text-[13px] font-semibold text-base-content truncate">
+            {props.nodeName}
+          </div>
+          <div className="text-[10px] text-base-content/30 font-mono">
+            {"v" + pkg.version}
+          </div>
+        </div>
+      </button>
+
+      <div className="flex items-center gap-0.5 flex-shrink-0">
+        <button
+          aria-label="Global settings"
+          onClick={function () { sidebar.openSettings("appearance"); }}
+          className="btn btn-ghost btn-xs btn-square text-base-content/30 hover:text-base-content transition-colors"
+        >
+          <Settings size={14} />
+        </button>
+        <button
+          aria-label={mode === "dark" ? "Switch to light mode" : "Switch to dark mode"}
+          onClick={function (e) { e.stopPropagation(); toggleMode(); }}
+          className="btn btn-ghost btn-xs btn-square text-base-content/30 hover:text-base-content transition-colors"
+        >
+          {mode === "dark" ? <Sun size={14} /> : <Moon size={14} />}
+        </button>
+      </div>
+    </div>
+  );
+}

package/client/src/components/sidebar/UserMenu.tsx

@@ -0,0 +1,101 @@
+import { useEffect, useRef, useState } from "react";
+import { Settings, RefreshCw, Power } from "lucide-react";
+import { useWebSocket } from "../../hooks/useWebSocket";
+
+interface UserMenuProps {
+  anchorRef: React.RefObject<HTMLElement | null>;
+  onClose: () => void;
+  onOpenNodeSettings: () => void;
+}
+
+export function UserMenu(props: UserMenuProps) {
+  var menuRef = useRef<HTMLDivElement>(null);
+  var ws = useWebSocket();
+  var [confirmingRestart, setConfirmingRestart] = useState(false);
+  var [confirmingShutdown, setConfirmingShutdown] = useState(false);
+
+  useEffect(function () {
+    function handleClickOutside(e: MouseEvent) {
+      if (
+        menuRef.current &&
+        !menuRef.current.contains(e.target as Node) &&
+        props.anchorRef.current &&
+        !props.anchorRef.current.contains(e.target as Node)
+      ) {
+        props.onClose();
+      }
+    }
+    function handleEscape(e: KeyboardEvent) {
+      if (e.key === "Escape") {
+        props.onClose();
+      }
+    }
+    function handleScroll() {
+      props.onClose();
+    }
+    document.addEventListener("mousedown", handleClickOutside);
+    document.addEventListener("keydown", handleEscape);
+    window.addEventListener("scroll", handleScroll, true);
+    return function () {
+      document.removeEventListener("mousedown", handleClickOutside);
+      document.removeEventListener("keydown", handleEscape);
+      window.removeEventListener("scroll", handleScroll, true);
+    };
+  }, [props.onClose, props.anchorRef]);
+
+  var style: React.CSSProperties = {};
+  if (props.anchorRef.current) {
+    var rect = props.anchorRef.current.getBoundingClientRect();
+    style.bottom = window.innerHeight - rect.top + 4 + "px";
+    style.left = rect.left + "px";
+  }
+
+  function handleRestart() {
+    if (!confirmingRestart) {
+      setConfirmingRestart(true);
+      setConfirmingShutdown(false);
+      return;
+    }
+    ws.send({ type: "settings:restart" } as never);
+    props.onClose();
+  }
+
+  function handleShutdown() {
+    if (!confirmingShutdown) {
+      setConfirmingShutdown(true);
+      setConfirmingRestart(false);
+      return;
+    }
+    fetch("/api/shutdown", { method: "POST" });
+    props.onClose();
+  }
+
+  var itemClass = "w-full flex items-center gap-2 px-2.5 py-[6px] rounded text-[11px] text-left cursor-pointer transition-colors duration-[120ms] text-base-content/70 hover:bg-base-content/5 hover:text-base-content outline-none focus-visible:ring-2 focus-visible:ring-primary/40 focus-visible:ring-inset";
+  var dangerClass = "w-full flex items-center gap-2 px-2.5 py-[6px] rounded text-[11px] text-left cursor-pointer transition-colors duration-[120ms] text-error hover:bg-error/10 outline-none focus-visible:ring-2 focus-visible:ring-primary/40 focus-visible:ring-inset";
+
+  return (
+    <div
+      ref={menuRef}
+      role="menu"
+      aria-label="Node menu"
+      className="fixed z-[9999] bg-base-300 border border-base-content/10 rounded-lg shadow-xl p-1 min-w-[180px]"
+      style={style}
+    >
+      <button role="menuitem" className={itemClass} onClick={function () { props.onOpenNodeSettings(); props.onClose(); }}>
+        <span className="opacity-60 flex-shrink-0"><Settings size={13} /></span>
+        Node Settings
+      </button>
+
+      <div className="h-px bg-base-content/8 my-1 mx-2" />
+
+      <button role="menuitem" className={dangerClass} onClick={handleRestart}>
+        <span className="opacity-60 flex-shrink-0"><RefreshCw size={13} /></span>
+        {confirmingRestart ? "Click again to restart" : "Restart"}
+      </button>
+      <button role="menuitem" className={dangerClass} onClick={handleShutdown}>
+        <span className="opacity-60 flex-shrink-0"><Power size={13} /></span>
+        {confirmingShutdown ? "Click again to shutdown" : "Shutdown"}
+      </button>
+    </div>
+  );
+}

package/client/src/components/ui/CommandPalette.tsx

@@ -0,0 +1,321 @@
+import { useEffect, useRef, useState, useMemo, useCallback } from "react";
+import { useHotkey } from "@tanstack/react-hotkeys";
+import { Search, Moon, Sun, Settings, Layout, MessageSquare, FolderOpen, Zap, RotateCcw } from "lucide-react";
+import { useProjects } from "../../hooks/useProjects";
+import { useSkills } from "../../hooks/useSkills";
+import { useTheme } from "../../hooks/useTheme";
+import { useWebSocket } from "../../hooks/useWebSocket";
+import { useSidebar } from "../../hooks/useSidebar";
+import { getSessionStore } from "../../stores/session";
+import type { SettingsSection } from "../../stores/sidebar";
+
+interface Command {
+  id: string;
+  label: string;
+  description?: string;
+  group: string;
+  icon?: React.ReactNode;
+  action: () => void;
+  keywords?: string;
+}
+
+export function CommandPalette() {
+  var [open, setOpen] = useState(false);
+  var [query, setQuery] = useState("");
+  var [selectedIndex, setSelectedIndex] = useState(0);
+  var inputRef = useRef<HTMLInputElement>(null);
+  var listRef = useRef<HTMLDivElement>(null);
+
+  var { projects, setActiveProject } = useProjects();
+  var skills = useSkills();
+  var { mode, toggleMode, themes, setTheme, currentThemeId } = useTheme();
+  var ws = useWebSocket();
+  var sidebar = useSidebar();
+
+  var close = useCallback(function () {
+    setOpen(false);
+    setQuery("");
+    setSelectedIndex(0);
+  }, []);
+
+  useHotkey("Mod+K", function (e) {
+    e.preventDefault();
+    setOpen(function (prev) {
+      if (prev) {
+        setQuery("");
+        setSelectedIndex(0);
+      }
+      return !prev;
+    });
+  });
+
+  useHotkey("Escape", function (e) {
+    e.preventDefault();
+    close();
+  }, { enabled: open });
+
+  // Focus input when opened
+  useEffect(function () {
+    if (open && inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, [open]);
+
+  // Build command list
+  var commands = useMemo(function (): Command[] {
+    var cmds: Command[] = [];
+
+    // Navigation
+    cmds.push({
+      id: "nav:dashboard",
+      label: "Go to Dashboard",
+      group: "Navigation",
+      icon: <Layout size={14} />,
+      action: function () { sidebar.goToDashboard(); close(); },
+      keywords: "home overview",
+    });
+
+    // Projects
+    projects.forEach(function (project) {
+      cmds.push({
+        id: "project:" + project.slug,
+        label: project.title || project.slug,
+        description: project.path,
+        group: "Projects",
+        icon: <FolderOpen size={14} />,
+        action: function () { setActiveProject(project); close(); },
+        keywords: "switch project " + project.slug,
+      });
+    });
+
+    // Session actions
+    var sessionState = getSessionStore().state;
+    if (sessionState.activeProjectSlug) {
+      cmds.push({
+        id: "session:new",
+        label: "New Session",
+        group: "Session",
+        icon: <MessageSquare size={14} />,
+        action: function () {
+          ws.send({ type: "session:create", projectSlug: sessionState.activeProjectSlug! });
+          close();
+        },
+        keywords: "create chat conversation",
+      });
+    }
+
+    // Settings sections
+    var settingsSections: Array<{ id: SettingsSection; label: string; keywords: string }> = [
+      { id: "appearance", label: "Appearance", keywords: "theme visual colors" },
+      { id: "claude", label: "Claude Settings", keywords: "api model key" },
+      { id: "environment", label: "Environment", keywords: "env variables config" },
+      { id: "mcp", label: "MCP Servers", keywords: "model context protocol" },
+      { id: "skills", label: "Skills", keywords: "capabilities commands" },
+      { id: "nodes", label: "Mesh Nodes", keywords: "machines network" },
+    ];
+    settingsSections.forEach(function (section) {
+      cmds.push({
+        id: "settings:" + section.id,
+        label: section.label,
+        group: "Settings",
+        icon: <Settings size={14} />,
+        action: function () { sidebar.openSettings(section.id); close(); },
+        keywords: section.keywords,
+      });
+    });
+
+    // Theme
+    cmds.push({
+      id: "theme:toggle",
+      label: mode === "dark" ? "Switch to Light Mode" : "Switch to Dark Mode",
+      group: "Theme",
+      icon: mode === "dark" ? <Sun size={14} /> : <Moon size={14} />,
+      action: function () { toggleMode(); close(); },
+      keywords: "dark light mode toggle",
+    });
+
+    var themeVariant = mode === "dark" ? "dark" : "light";
+    themes.filter(function (t) { return t.theme.variant === themeVariant; }).forEach(function (t) {
+      if (t.id === currentThemeId) return;
+      cmds.push({
+        id: "theme:" + t.id,
+        label: t.theme.name,
+        group: "Theme",
+        icon: mode === "dark" ? <Moon size={14} /> : <Sun size={14} />,
+        action: function () { setTheme(t.id); close(); },
+        keywords: "color scheme " + t.theme.name,
+      });
+    });
+
+    // Skills
+    skills.forEach(function (skill) {
+      cmds.push({
+        id: "skill:" + skill.name,
+        label: "/" + skill.name,
+        description: skill.description,
+        group: "Skills",
+        icon: <Zap size={14} />,
+        action: function () {
+          // Focus chat input and prefill with skill command
+          var textarea = document.querySelector("textarea[aria-label='Message input']") as HTMLTextAreaElement | null;
+          if (textarea) {
+            textarea.value = "/" + skill.name + " ";
+            textarea.focus();
+            textarea.dispatchEvent(new Event("input", { bubbles: true }));
+          }
+          close();
+        },
+        keywords: skill.description,
+      });
+    });
+
+    // System
+    cmds.push({
+      id: "system:restart",
+      label: "Restart Daemon",
+      group: "System",
+      icon: <RotateCcw size={14} />,
+      action: function () { ws.send({ type: "settings:restart" } as any); close(); },
+      keywords: "reboot server",
+    });
+
+    return cmds;
+  }, [projects, skills, mode, themes, currentThemeId, sidebar, ws, close, setActiveProject, toggleMode, setTheme]);
+
+  // Filter commands
+  var filtered = useMemo(function () {
+    if (!query.trim()) return commands;
+    var q = query.toLowerCase();
+    return commands.filter(function (cmd) {
+      var searchText = (cmd.label + " " + (cmd.description || "") + " " + (cmd.keywords || "") + " " + cmd.group).toLowerCase();
+      // All words in query must match
+      var words = q.split(/\s+/);
+      for (var i = 0; i < words.length; i++) {
+        if (!searchText.includes(words[i])) return false;
+      }
+      return true;
+    });
+  }, [query, commands]);
+
+  // Reset selection when filter changes
+  useEffect(function () {
+    setSelectedIndex(0);
+  }, [filtered.length, query]);
+
+  // Scroll active item into view
+  useEffect(function () {
+    if (!listRef.current) return;
+    var active = listRef.current.querySelector("[data-active='true']") as HTMLElement | null;
+    if (active) {
+      active.scrollIntoView({ block: "nearest" });
+    }
+  }, [selectedIndex]);
+
+  function handleKeyDown(e: React.KeyboardEvent) {
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      setSelectedIndex(function (i) { return i < filtered.length - 1 ? i + 1 : 0; });
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      setSelectedIndex(function (i) { return i > 0 ? i - 1 : filtered.length - 1; });
+    } else if (e.key === "Enter") {
+      e.preventDefault();
+      if (filtered[selectedIndex]) {
+        filtered[selectedIndex].action();
+      }
+    }
+  }
+
+  // Group filtered commands
+  var grouped = useMemo(function () {
+    var groups: Array<{ name: string; items: Array<Command & { globalIndex: number }> }> = [];
+    var groupMap = new Map<string, Array<Command & { globalIndex: number }>>();
+    var globalIdx = 0;
+    filtered.forEach(function (cmd) {
+      var list = groupMap.get(cmd.group);
+      if (!list) {
+        list = [];
+        groupMap.set(cmd.group, list);
+        groups.push({ name: cmd.group, items: list });
+      }
+      list.push(Object.assign({}, cmd, { globalIndex: globalIdx }));
+      globalIdx++;
+    });
+    return groups;
+  }, [filtered]);
+
+  if (!open) return null;
+
+  return (
+    <div className="fixed inset-0 z-[9998] flex items-start justify-center pt-[15vh]" onClick={close}>
+      <div className="absolute inset-0 bg-black/50" />
+      <div
+        className="relative w-full max-w-[520px] mx-4 bg-base-200 border border-base-content/10 rounded-xl shadow-2xl overflow-hidden"
+        onClick={function (e) { e.stopPropagation(); }}
+      >
+        <div className="flex items-center gap-2 px-4 py-3 border-b border-base-content/10">
+          <Search size={16} className="text-base-content/30 flex-shrink-0" />
+          <input
+            ref={inputRef}
+            type="text"
+            value={query}
+            onChange={function (e) { setQuery(e.target.value); }}
+            onKeyDown={handleKeyDown}
+            placeholder="Type a command..."
+            className="flex-1 bg-transparent text-[14px] text-base-content outline-none placeholder:text-base-content/30"
+          />
+          <kbd className="text-[10px] font-mono text-base-content/20 bg-base-300 px-1.5 py-0.5 rounded">ESC</kbd>
+        </div>
+        <div ref={listRef} className="max-h-[360px] overflow-y-auto py-1.5">
+          {grouped.length === 0 && (
+            <div className="px-4 py-8 text-center text-[13px] text-base-content/30">
+              No commands found
+            </div>
+          )}
+          {grouped.map(function (group) {
+            return (
+              <div key={group.name}>
+                <div className="px-4 pt-2 pb-1">
+                  <span className="text-[9px] uppercase tracking-widest text-base-content/30 font-mono font-bold">{group.name}</span>
+                </div>
+                {group.items.map(function (cmd) {
+                  var isActive = cmd.globalIndex === selectedIndex;
+                  return (
+                    <button
+                      key={cmd.id}
+                      data-active={isActive}
+                      onMouseEnter={function () { setSelectedIndex(cmd.globalIndex); }}
+                      onMouseDown={function (e) { e.preventDefault(); }}
+                      onClick={function () { cmd.action(); }}
+                      className={
+                        "flex w-full items-center gap-3 px-4 py-2 text-left transition-colors " +
+                        (isActive ? "bg-primary/10" : "hover:bg-base-content/5")
+                      }
+                    >
+                      <div className={"flex-shrink-0 " + (isActive ? "text-primary" : "text-base-content/30")}>
+                        {cmd.icon}
+                      </div>
+                      <div className="flex-1 min-w-0">
+                        <div className={"text-[13px] truncate " + (isActive ? "text-base-content" : "text-base-content/70")}>
+                          {cmd.label}
+                        </div>
+                        {cmd.description && (
+                          <div className="text-[11px] text-base-content/30 truncate">{cmd.description}</div>
+                        )}
+                      </div>
+                    </button>
+                  );
+                })}
+              </div>
+            );
+          })}
+        </div>
+        <div className="flex items-center gap-3 px-4 py-2 border-t border-base-content/10 text-[10px] text-base-content/25 font-mono">
+          <span>↑↓ navigate</span>
+          <span>↵ select</span>
+          <span>esc close</span>
+        </div>
+      </div>
+    </div>
+  );
+}