master

Author: shmuel hizmi

packages/wmux-client/src/components/Sidebar.tsx

@@ -217,7 +217,7 @@ function CategorySection({
 function SidebarFooter(): ReactElement {
   const shortcuts = [
     { key: "⌘K", label: "Command palette" },
-    { key: "⌘1-9", label: "Switch category" },
+    { key: "↑↓", label: "Navigate sidebar" },
     { key: "⌘[]", label: "Switch tab" },
   ] as const;
 

packages/wmux-client/src/components/WmuxApp.tsx

@@ -170,8 +170,27 @@ export function WmuxApp(props: {
     onRestart: () => restartProcess(activeTabId),
   } : null;
 
+  // Build flat navigable sidebar item list
+  const sidebarItems = useMemo(() => {
+    const items: Array<{ readonly type: "category"; readonly name: string } | { readonly type: "tab"; readonly categoryName: string; readonly tabId: string }> = [];
+    for (const cat of categories) {
+      items.push({ type: "category", name: cat.name });
+      if (!collapsedCategories.has(cat.name) && cat.type !== "files") {
+        for (const tab of cat.tabs) {
+          items.push({ type: "tab", categoryName: cat.name, tabId: tab.id });
+        }
+      }
+    }
+    return items;
+  }, [categories, collapsedCategories]);
+
   // Keyboard shortcuts
   useEffect(() => {
+    const isTerminalFocused = (): boolean => {
+      const el = document.activeElement;
+      return el != null && el.closest(".xterm") != null;
+    };
+
     const handler = (e: KeyboardEvent): void => {
       const mod = e.metaKey || e.ctrlKey;
       if (mod && e.key === "k") { e.preventDefault(); setCmdkOpen((p) => !p); return; }
@@ -188,11 +207,33 @@ export function WmuxApp(props: {
         const idx = orderedTabs.findIndex((t) => t.id === activeTabId);
         const next = e.key === "]" ? (idx + 1) % orderedTabs.length : (idx - 1 + orderedTabs.length) % orderedTabs.length;
         selectTab(orderedTabs[next]!.id);
+        return;
+      }
+
+      // Arrow key sidebar navigation (only when terminal is not focused)
+      if ((e.key === "ArrowUp" || e.key === "ArrowDown") && !isTerminalFocused() && !cmdkOpen && sidebarItems.length > 0) {
+        e.preventDefault();
+        const currentIdx = sidebarItems.findIndex((item) =>
+          item.type === "tab"
+            ? item.tabId === activeTabId && item.categoryName === activeCategory
+            : item.name === activeCategory && !sidebarItems.some((s) => s.type === "tab" && s.categoryName === activeCategory && s.tabId === activeTabId),
+        );
+        const delta = e.key === "ArrowDown" ? 1 : -1;
+        const nextIdx = currentIdx === -1
+          ? 0
+          : (currentIdx + delta + sidebarItems.length) % sidebarItems.length;
+        const next = sidebarItems[nextIdx]!;
+        if (next.type === "category") {
+          selectCategory(next.name);
+        } else {
+          selectCategory(next.categoryName);
+          selectTab(next.tabId);
+        }
       }
     };
     window.addEventListener("keydown", handler);
     return () => window.removeEventListener("keydown", handler);
-  }, [cmdkOpen, categories, selectCategory, orderedTabs, activeTabId, selectTab]);
+  }, [cmdkOpen, categories, selectCategory, orderedTabs, activeTabId, selectTab, sidebarItems, activeCategory]);
 
   const toggleCollapse = useCallback((name: string) => {
     setCollapsedCategories((prev) => { const next = new Set(prev); next.has(name) ? next.delete(name) : next.add(name); return next; });

packages/wmux/README.md

@@ -16,6 +16,8 @@ bun i @playfast/wmux
 import { wmux } from "@playfast/wmux";
 
 await wmux({
+  title: "my-app",
+  description: "local dev",
   sidebarItems: [
     {
       category: "dev",
@@ -37,6 +39,8 @@ Open the printed URL in your browser.
 
 ```ts
 interface WmuxConfig {
+  title?: string;          // displayed in the top bar search button
+  description?: string;    // shown next to the title in the top bar
   sidebarItems: SidebarItem[];
   port?: number;           // default: random
   hostname?: string;       // default: "127.0.0.1"
@@ -67,7 +71,7 @@ Each sidebar item is either a **tab group** or a **file browser**:
   category: "services",
   icon: "Server",             // optional, any Lucide icon name
   tabs: [
-    { name: "api", process: { command: "bun run dev" } },
+    { name: "api", description: "REST API", process: { command: "bun run dev" } },
     { name: "docs", url: "http://localhost:3001" },
   ],
 }
@@ -85,7 +89,7 @@ Each sidebar item is either a **tab group** or a **file browser**:
 ```ts
 interface TabConfig {
   name: string;
-  description?: string;
+  description?: string;       // shown below the tab name in the sidebar
   icon?: string;              // Lucide icon name
   process?: ProcessConfig;    // terminal process
   url?: string;               // iframe URL
@@ -123,9 +127,11 @@ await wmux({
 - PTY terminals via `Bun.spawn`
 - Iframe tabs for web previews
 - File browser with Monaco editor viewer
-- Sidebar with collapsible categories and Lucide icons
+- VS Code-style top bar with search button
+- Sidebar with collapsible categories and color-coded left borders
 - Drag-to-reorder tabs
 - Command palette (`Cmd+K`)
+- Arrow key sidebar navigation (when terminal is not focused)
 - Keyboard shortcuts (`Cmd+1-9` switch category, `Cmd+[/]` switch tab)
 - Token-based WebSocket auth
 - Auto-restart on crash