@cryptiklemur/lattice 1.14.1 → 1.15.0

package/.github/workflows/ci.yml

@@ -0,0 +1,72 @@
+name: CI
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  typecheck:
+    name: Typecheck
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v5
+
+      - name: Setup Bun
+        uses: oven-sh/setup-bun@v2
+        with:
+          bun-version: latest
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22
+
+      - name: Cache bun install
+        uses: actions/cache@v4
+        with:
+          path: ~/.bun/install/cache
+          key: ${{ runner.os }}-bun-${{ hashFiles('bun.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-bun-
+
+      - name: Install dependencies
+        run: bun install --frozen-lockfile
+
+      - name: Typecheck
+        run: bunx tsc --noEmit -p tsconfig.json
+
+  build:
+    name: Build
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v5
+
+      - name: Setup Bun
+        uses: oven-sh/setup-bun@v2
+        with:
+          bun-version: latest
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22
+
+      - name: Cache bun install
+        uses: actions/cache@v4
+        with:
+          path: ~/.bun/install/cache
+          key: ${{ runner.os }}-bun-${{ hashFiles('bun.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-bun-
+
+      - name: Install dependencies
+        run: bun install --frozen-lockfile
+
+      - name: Build client
+        run: cd client && npx vite build

package/bun.lock

@@ -55,11 +55,13 @@
         "@anthropic-ai/claude-agent-sdk": "^0.2.79",
         "@lattice/shared": "workspace:*",
         "bonjour-service": "^1.3.0",
+        "debug": "^4.4.3",
         "js-tiktoken": "^1.0.21",
         "node-pty": "^1.1.0",
         "qrcode": "^1.5.4",
       },
       "devDependencies": {
+        "@types/debug": "^4.1.13",
         "@types/qrcode": "^1.5.6",
         "bun-types": "latest",
       },
@@ -508,7 +510,7 @@
 
     "@types/d3-timer": ["@types/d3-timer@3.0.2", "", {}, "sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw=="],
 
-    "@types/debug": ["@types/debug@4.1.12", "", { "dependencies": { "@types/ms": "*" } }, "sha512-vIChWdVG3LG1SMxEvI/AK+FWJthlrqlTu7fbrlywTkkaONwk/UAGaULXRlf8vkzFBLVm0zkMdCquhL5aOjhXPQ=="],
+    "@types/debug": ["@types/debug@4.1.13", "", { "dependencies": { "@types/ms": "*" } }, "sha512-KSVgmQmzMwPlmtljOomayoR89W4FynCAi3E8PPs7vmDVPe84hT+vGPKkJfThkmXs0x0jAaa9U8uW8bbfyS2fWw=="],
 
     "@types/estree": ["@types/estree@1.0.8", "", {}, "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w=="],
 
@@ -1774,6 +1776,8 @@
 
     "make-asynchronous/type-fest": ["type-fest@4.41.0", "", {}, "sha512-TeTSQ6H5YHvpqVwBRcnLDCBnDOHWYu7IvGbHT6N8AOymcr9PJGjc1GTtiWZTYg0NCgYwvnYWEkVChQAr9bjfwA=="],
 
+    "micromark/@types/debug": ["@types/debug@4.1.12", "", { "dependencies": { "@types/ms": "*" } }, "sha512-vIChWdVG3LG1SMxEvI/AK+FWJthlrqlTu7fbrlywTkkaONwk/UAGaULXRlf8vkzFBLVm0zkMdCquhL5aOjhXPQ=="],
+
     "micromatch/picomatch": ["picomatch@2.3.1", "", {}, "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA=="],
 
     "npm/@gar/promise-retry": ["@gar/promise-retry@1.0.3", "", {}, "sha512-GmzA9ckNokPypTg10pgpeHNQe7ph+iIKKmhKu3Ob9ANkswreCx7R3cKmY781K8QK3AqVL3xVh9A42JvIAbkkSA=="],

package/client/src/App.tsx

@@ -4,6 +4,7 @@ import { WebSocketProvider } from "./providers/WebSocketProvider";
 import { ErrorBoundary } from "./components/ui/ErrorBoundary";
 import { Toast, useToastState } from "./components/ui/Toast";
 import { CommandPalette } from "./components/ui/CommandPalette";
+import { KeyboardShortcuts } from "./components/ui/KeyboardShortcuts";
 import { UpdatePrompt } from "./components/ui/UpdatePrompt";
 
 function AppInner() {
@@ -13,6 +14,7 @@ function AppInner() {
     <>
       <RouterProvider router={router} />
       <CommandPalette />
+      <KeyboardShortcuts />
       <Toast items={items} onDismiss={dismiss} />
       <UpdatePrompt />
     </>

package/client/src/components/analytics/ChartCard.tsx

@@ -1,4 +1,5 @@
-import { useState, useEffect, useRef, createContext, useContext } from "react";
+import { useState, useEffect, useRef, createContext, useContext, useCallback } from "react";
+import { useFocusTrap } from "../../hooks/useFocusTrap";
 import { Maximize2, Minimize2 } from "lucide-react";
 import type { ReactNode } from "react";
 
@@ -31,6 +32,9 @@ export function ChartCard(props: ChartCardProps) {
   var cardRef = useRef<HTMLDivElement>(null);
   var [originRect, setOriginRect] = useState<DOMRect | null>(null);
   var [animating, setAnimating] = useState(false);
+  var fullscreenModalRef = useRef<HTMLDivElement>(null);
+  var closeFullscreenCb = useCallback(function () { closeFullscreen(); }, []);
+  useFocusTrap(fullscreenModalRef, closeFullscreenCb, isFullscreen);
 
   function openFullscreen() {
     if (cardRef.current) {
@@ -54,15 +58,6 @@ export function ChartCard(props: ChartCardProps) {
     }, 250);
   }
 
-  useEffect(function () {
-    if (!isFullscreen) return;
-    function handleKeyDown(e: KeyboardEvent) {
-      if (e.key === "Escape") closeFullscreen();
-    }
-    document.addEventListener("keydown", handleKeyDown);
-    return function () { document.removeEventListener("keydown", handleKeyDown); };
-  }, [isFullscreen]);
-
   useEffect(function () {
     if (isFullscreen) {
       document.body.style.overflow = "hidden";
@@ -134,6 +129,7 @@ export function ChartCard(props: ChartCardProps) {
           onClick={closeFullscreen}
         />
         <div
+          ref={fullscreenModalRef}
           className="fixed inset-0 z-[9999] flex items-center justify-center p-8"
           style={{ pointerEvents: "none" }}
           role="dialog"

package/client/src/components/chat/ChatView.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useRef, useCallback, useState, useMemo } from "react";
 import { Terminal, Info, ArrowDown, Pencil, Copy, Check, Menu, AlertTriangle, Zap, Square, X } from "lucide-react";
 import { LatticeLogomark } from "../ui/LatticeLogomark";
+import { useFocusTrap } from "../../hooks/useFocusTrap";
 import { useVirtualizer } from "@tanstack/react-virtual";
 import { useSession } from "../../hooks/useSession";
 import { useProjects } from "../../hooks/useProjects";
@@ -38,6 +39,9 @@ export function ChatView() {
   var [showInfo, setShowInfo] = useState<boolean>(false);
   var [confirmStopExternal, setConfirmStopExternal] = useState<boolean>(false);
   var [prefillText, setPrefillText] = useState<string | null>(null);
+  var stopExternalModalRef = useRef<HTMLDivElement>(null);
+  var closeStopExternal = useCallback(function () { setConfirmStopExternal(false); }, []);
+  useFocusTrap(stopExternalModalRef, closeStopExternal, confirmStopExternal);
 
   useEffect(function () {
     if (pendingPrefill && !historyLoading) {
@@ -92,7 +96,7 @@ export function ChatView() {
       if (msg.type === "user") return 100;
       return 200;
     },
-    overscan: 30,
+    overscan: isMobile ? 10 : 20,
   });
 
   var scrollToBottom = useCallback(function () {
@@ -122,18 +126,12 @@ export function ChatView() {
           requestAnimationFrame(function () {
             var el = scrollParentRef.current;
             if (el) el.scrollTop = el.scrollHeight;
-            requestAnimationFrame(function () {
-              if (el) el.scrollTop = el.scrollHeight;
-            });
           });
         } else {
           var count = messages.length;
           var virt = virtualizer;
           requestAnimationFrame(function () {
             virt.scrollToIndex(count - 1, { align: "end" });
-            requestAnimationFrame(function () {
-              virt.scrollToIndex(count - 1, { align: "end" });
-            });
           });
         }
         return;
@@ -252,7 +250,7 @@ export function ChatView() {
       filled = contextUsage.inputTokens + contextUsage.cacheReadTokens + contextUsage.cacheCreationTokens;
       percent = Math.min(100, Math.round((filled / contextUsage.contextWindow) * 100));
     }
-    var autocompact = contextBreakdown ? Math.round((contextBreakdown.autocompactAt / contextBreakdown.contextWindow) * 100) : 90;
+    var autocompact = contextBreakdown && contextBreakdown.contextWindow > 0 ? Math.round((contextBreakdown.autocompactAt / contextBreakdown.contextWindow) * 100) : 90;
     return {
       contextPercent: percent,
       contextFilled: filled,
@@ -891,7 +889,7 @@ export function ChatView() {
       )}
 
       {confirmStopExternal && (
-        <div className="fixed inset-0 z-[9999] flex items-center justify-center" role="dialog" aria-modal="true" aria-label="End External Process" onKeyDown={function (e) { if (e.key === "Escape") setConfirmStopExternal(false); }}>
+        <div ref={stopExternalModalRef} className="fixed inset-0 z-[9999] flex items-center justify-center" role="dialog" aria-modal="true" aria-label="End External Process">
           <div className="absolute inset-0 bg-black/50" onClick={function () { setConfirmStopExternal(false); }} />
           <div className="relative bg-base-200 border border-base-content/15 rounded-2xl shadow-2xl w-full max-w-sm mx-4 overflow-hidden">
             <div className="px-5 py-4 border-b border-base-content/15">

package/client/src/components/chat/ToolResultRenderer.tsx

@@ -1,4 +1,5 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, useRef, useCallback } from "react";
+import { useFocusTrap } from "../../hooks/useFocusTrap";
 import { createPortal } from "react-dom";
 import Markdown from "react-markdown";
 import remarkGfm from "remark-gfm";
@@ -175,6 +176,9 @@ function ImageRenderer(props: { path: string }) {
   var [error, setError] = useState(false);
   var [modalOpen, setModalOpen] = useState(false);
   var imgSrc = "/api/file?path=" + encodeURIComponent(props.path);
+  var imageModalRef = useRef<HTMLDivElement>(null);
+  var closeImageModal = useCallback(function () { setModalOpen(false); }, []);
+  useFocusTrap(imageModalRef, closeImageModal, modalOpen);
 
   useEffect(function () {
     if (!modalOpen) return;
@@ -213,9 +217,9 @@ function ImageRenderer(props: { path: string }) {
       </div>
       {modalOpen && createPortal(
         <div
+          ref={imageModalRef}
           className="fixed inset-0 z-[9999] flex items-center justify-center bg-black/80 backdrop-blur-sm p-4 sm:p-8 cursor-pointer overscroll-contain"
           onClick={function () { setModalOpen(false); }}
-          onKeyDown={function (e) { if (e.key === "Escape") setModalOpen(false); }}
           onWheel={function (e) { e.stopPropagation(); }}
           onTouchMove={function (e) { e.stopPropagation(); }}
           role="dialog"

package/client/src/components/mesh/PairingDialog.tsx

@@ -1,4 +1,5 @@
-import { useState, useEffect, useCallback } from "react";
+import { useState, useEffect, useCallback, useRef } from "react";
+import { useFocusTrap } from "../../hooks/useFocusTrap";
 import { X, Copy, Check } from "lucide-react";
 import { useWebSocket } from "../../hooks/useWebSocket";
 import { useMesh } from "../../hooks/useMesh";
@@ -21,22 +22,9 @@ export function PairingDialog(props: PairingDialogProps) {
   var [pairStatus, setPairStatus] = useState<PairStatus>("idle");
   var [pairError, setPairError] = useState<string | null>(null);
   var [copied, setCopied] = useState(false);
-
-  var handleKeyDown = useCallback(function (e: KeyboardEvent) {
-    if (e.key === "Escape") {
-      props.onClose();
-    }
-  }, [props.onClose]);
-
-  useEffect(function () {
-    if (!props.isOpen) {
-      return;
-    }
-    document.addEventListener("keydown", handleKeyDown);
-    return function () {
-      document.removeEventListener("keydown", handleKeyDown);
-    };
-  }, [props.isOpen, handleKeyDown]);
+  var modalRef = useRef<HTMLDivElement>(null);
+  var stableOnClose = useCallback(function () { props.onClose(); }, [props.onClose]);
+  useFocusTrap(modalRef, stableOnClose, props.isOpen);
 
   useEffect(function () {
     if (!props.isOpen) {
@@ -113,6 +101,7 @@ export function PairingDialog(props: PairingDialogProps) {
 
   return (
     <div
+      ref={modalRef}
       role="dialog"
       aria-modal="true"
       aria-label="Pair a node"

package/client/src/components/project-settings/ProjectMemory.tsx

@@ -1,4 +1,5 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, useRef, useCallback } from "react";
+import { useFocusTrap } from "../../hooks/useFocusTrap";
 import { Plus, Trash2, Pencil, X, Loader2, Brain, ExternalLink } from "lucide-react";
 import Markdown from "react-markdown";
 import remarkGfm from "remark-gfm";
@@ -120,17 +121,12 @@ function MemoryViewModal({
 }) {
   var parsed = parseFrontmatter(content);
   var hasMeta = Object.keys(parsed.meta).length > 0;
-
-  useEffect(function () {
-    function handleKeyDown(e: KeyboardEvent) {
-      if (e.key === "Escape") onClose();
-    }
-    document.addEventListener("keydown", handleKeyDown);
-    return function () { document.removeEventListener("keydown", handleKeyDown); };
-  }, [onClose]);
+  var modalRef = useRef<HTMLDivElement>(null);
+  var stableOnClose = useCallback(function () { onClose(); }, [onClose]);
+  useFocusTrap(modalRef, stableOnClose);
 
   return (
-    <div className="fixed inset-0 z-[9999] flex items-center justify-center" role="dialog" aria-modal="true" aria-label={"Memory: " + (parsed.meta.name || memory.filename)}>
+    <div ref={modalRef} className="fixed inset-0 z-[9999] flex items-center justify-center" role="dialog" aria-modal="true" aria-label={"Memory: " + (parsed.meta.name || memory.filename)}>
       <div className="absolute inset-0 bg-black/50" onClick={onClose} />
       <div className="relative bg-base-200 border border-base-content/15 rounded-2xl shadow-2xl w-full max-w-2xl mx-4 max-h-[80vh] flex flex-col overflow-hidden">
         <div className="flex items-center justify-between px-5 py-4 border-b border-base-content/15 flex-shrink-0">
@@ -209,6 +205,9 @@ function MemoryEditModal({
   var [description, setDescription] = useState(parsed.meta.description || (memory ? memory.description : ""));
   var [type, setType] = useState(parsed.meta.type || (memory ? memory.type : "project"));
   var [body, setBody] = useState(parsed.body);
+  var editModalRef = useRef<HTMLDivElement>(null);
+  var stableOnClose = useCallback(function () { onClose(); }, [onClose]);
+  useFocusTrap(editModalRef, stableOnClose);
 
   function handleSave() {
     var content = buildContent(name, description, type, body);
@@ -216,16 +215,8 @@ function MemoryEditModal({
     onSave(filename, content);
   }
 
-  useEffect(function () {
-    function handleKeyDown(e: KeyboardEvent) {
-      if (e.key === "Escape") onClose();
-    }
-    document.addEventListener("keydown", handleKeyDown);
-    return function () { document.removeEventListener("keydown", handleKeyDown); };
-  }, [onClose]);
-
   return (
-    <div className="fixed inset-0 z-[9999] flex items-center justify-center" role="dialog" aria-modal="true" aria-label={isNew ? "New Memory" : "Edit Memory"}>
+    <div ref={editModalRef} className="fixed inset-0 z-[9999] flex items-center justify-center" role="dialog" aria-modal="true" aria-label={isNew ? "New Memory" : "Edit Memory"}>
       <div className="absolute inset-0 bg-black/50" onClick={onClose} />
       <div className="relative bg-base-200 border border-base-content/15 rounded-2xl shadow-2xl w-full max-w-2xl mx-4 max-h-[90vh] flex flex-col overflow-hidden">
         <div className="flex items-center justify-between px-5 py-4 border-b border-base-content/15 flex-shrink-0">

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

@@ -1,4 +1,5 @@
-import { useState, useEffect, useRef } from "react";
+import { useState, useEffect, useRef, useCallback } from "react";
+import { useFocusTrap } from "../../hooks/useFocusTrap";
 import { X, FolderOpen, FileText, Loader2 } from "lucide-react";
 import { useWebSocket } from "../../hooks/useWebSocket";
 import { useProjects } from "../../hooks/useProjects";
@@ -35,6 +36,9 @@ export function AddProjectModal({ isOpen, onClose }: AddProjectModalProps) {
   var dropdownRef = useRef<HTMLDivElement>(null);
   var inputFocusedRef = useRef(false);
   var addingRef = useRef(false);
+  var modalRef = useRef<HTMLDivElement>(null);
+  var stableOnClose = useCallback(function () { onClose(); }, [onClose]);
+  useFocusTrap(modalRef, stableOnClose, isOpen);
 
   useEffect(function () {
     if (!isOpen) return;
@@ -241,6 +245,7 @@ export function AddProjectModal({ isOpen, onClose }: AddProjectModalProps) {
         handleAdd();
       }
     } else if (e.key === "Escape") {
+      e.stopPropagation();
       setDropdownOpen(false);
       setHighlightIndex(-1);
     }
@@ -273,22 +278,13 @@ export function AddProjectModal({ isOpen, onClose }: AddProjectModalProps) {
     } as any);
   }
 
-  useEffect(function () {
-    if (!isOpen) return;
-    function handleKeyDown(e: KeyboardEvent) {
-      if (e.key === "Escape" && !dropdownOpen) onClose();
-    }
-    document.addEventListener("keydown", handleKeyDown);
-    return function () { document.removeEventListener("keydown", handleKeyDown); };
-  }, [isOpen, dropdownOpen, onClose]);
-
   if (!isOpen) return null;
 
   var filtered = getFilteredEntries();
   var validation = getValidationMessage();
 
   return (
-    <div className="fixed inset-0 z-[9999] flex items-center justify-center" role="dialog" aria-modal="true" aria-label="Add Project">
+    <div ref={modalRef} className="fixed inset-0 z-[9999] flex items-center justify-center" role="dialog" aria-modal="true" aria-label="Add Project">
       <div className="absolute inset-0 bg-black/50" onClick={onClose} />
       <div className="relative bg-base-200 border border-base-content/15 rounded-2xl shadow-2xl w-full max-w-3xl mx-4 overflow-hidden">
         <div className="flex items-center justify-between px-5 py-4 border-b border-base-content/15">

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

@@ -1,4 +1,5 @@
-import { useState, useEffect, useRef } from "react";
+import { useState, useEffect, useRef, useCallback } from "react";
+import { useFocusTrap } from "../../hooks/useFocusTrap";
 import { X, Copy, Check } from "lucide-react";
 import { useWebSocket } from "../../hooks/useWebSocket";
 import { useMesh } from "../../hooks/useMesh";
@@ -27,6 +28,9 @@ export function NodeSettingsModal({ isOpen, onClose }: NodeSettingsModalProps) {
   var [copied, setCopied] = useState(false);
   var [wsl, setWsl] = useState<boolean | "auto">("auto");
   var copyTimeout = useRef<ReturnType<typeof setTimeout> | null>(null);
+  var modalRef = useRef<HTMLDivElement>(null);
+  var stableOnClose = useCallback(function () { onClose(); }, [onClose]);
+  useFocusTrap(modalRef, stableOnClose, isOpen);
 
   useEffect(function () {
     if (!isOpen) return;
@@ -79,21 +83,12 @@ export function NodeSettingsModal({ isOpen, onClose }: NodeSettingsModalProps) {
     copyTimeout.current = setTimeout(function () { setCopied(false); }, 2000);
   }
 
-  useEffect(function () {
-    if (!isOpen) return;
-    function handleKeyDown(e: KeyboardEvent) {
-      if (e.key === "Escape") onClose();
-    }
-    document.addEventListener("keydown", handleKeyDown);
-    return function () { document.removeEventListener("keydown", handleKeyDown); };
-  }, [isOpen, onClose]);
-
   if (!isOpen) return null;
 
   var inputClass = "w-full h-9 px-3 bg-base-300 border border-base-content/15 rounded-xl text-base-content text-[13px] focus:border-primary focus-visible:outline-none transition-colors duration-[120ms]";
 
   return (
-    <div className="fixed inset-0 z-[9999] flex items-center justify-center" role="dialog" aria-modal="true" aria-label="Node Settings">
+    <div ref={modalRef} className="fixed inset-0 z-[9999] flex items-center justify-center" role="dialog" aria-modal="true" aria-label="Node Settings">
       <div className="absolute inset-0 bg-black/50" onClick={onClose} />
       <div className="relative bg-base-200 border border-base-content/15 rounded-2xl shadow-2xl w-full max-w-md mx-4 overflow-hidden">
         <div className="flex items-center justify-between px-5 py-4 border-b border-base-content/15">

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

@@ -208,7 +208,7 @@ export function ProjectRail(props: ProjectRailProps) {
         <button
           onClick={props.onDashboardClick}
           className={
-            "w-[42px] h-[42px] flex items-center justify-center cursor-pointer transition-all duration-[120ms] flex-shrink-0 " +
+            "relative w-[42px] h-[42px] flex items-center justify-center cursor-pointer transition-all duration-[120ms] flex-shrink-0 " +
             (props.isDashboardActive
               ? "rounded-xl bg-primary text-primary-content"
               : "rounded-full bg-base-200 text-base-content/60 hover:rounded-xl hover:bg-primary/20 hover:text-primary")
@@ -216,6 +216,16 @@ export function ProjectRail(props: ProjectRailProps) {
           title="Lattice Dashboard"
         >
           <LatticeLogomark size={22} />
+          <div
+            className={
+              "absolute bottom-0 right-0 w-2 h-2 rounded-full border-[1.5px] border-base-100 pointer-events-none " +
+              (ws.status === "connected"
+                ? "bg-success"
+                : ws.status === "connecting"
+                ? "bg-warning animate-pulse"
+                : "bg-error")
+            }
+          />
         </button>
       </div>
 

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

@@ -248,6 +248,10 @@ export function SessionList(props: SessionListProps) {
         var previewMsg = msg as SessionPreviewMessage;
         setPreviews(function (prev3) {
           var next = new Map(prev3);
+          if (next.size >= 100 && !next.has(previewMsg.sessionId)) {
+            var oldest = next.keys().next().value;
+            if (oldest !== undefined) next.delete(oldest);
+          }
           next.set(previewMsg.sessionId, previewMsg.preview);
           return next;
         });

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

@@ -0,0 +1,129 @@
+import { useEffect, useState } from "react";
+import { X } from "lucide-react";
+
+interface ShortcutEntry {
+  keys: string[];
+  description: string;
+}
+
+interface ShortcutCategory {
+  name: string;
+  shortcuts: ShortcutEntry[];
+}
+
+var isMac = typeof navigator !== "undefined" && navigator.platform.indexOf("Mac") !== -1;
+var modKey = isMac ? "\u2318" : "Ctrl";
+
+var categories: ShortcutCategory[] = [
+  {
+    name: "Chat",
+    shortcuts: [
+      { keys: ["Enter"], description: "Send message" },
+      { keys: ["Shift", "Enter"], description: "New line" },
+      { keys: ["\u2191"], description: "Previous input history" },
+      { keys: ["\u2193"], description: "Next input history" },
+      { keys: ["/"], description: "Slash commands" },
+      { keys: ["Escape"], description: "Close autocomplete" },
+    ],
+  },
+  {
+    name: "Navigation",
+    shortcuts: [
+      { keys: [modKey, "K"], description: "Command palette" },
+      { keys: ["?"], description: "Keyboard shortcuts" },
+      { keys: ["Escape"], description: "Close modal / exit settings" },
+    ],
+  },
+  {
+    name: "Session",
+    shortcuts: [
+      { keys: ["/clear"], description: "New session" },
+      { keys: ["/copy"], description: "Copy last response" },
+      { keys: ["/export"], description: "Export conversation" },
+      { keys: ["/rename"], description: "Rename session" },
+    ],
+  },
+];
+
+function Kbd(props: { children: string }) {
+  return (
+    <kbd className="bg-base-300 border border-base-content/20 rounded px-1.5 py-0.5 text-[11px] font-mono text-base-content/70 leading-none inline-flex items-center justify-center min-w-[22px]">
+      {props.children}
+    </kbd>
+  );
+}
+
+export function KeyboardShortcuts() {
+  var [open, setOpen] = useState(false);
+
+  useEffect(function () {
+    function handleKeyDown(e: KeyboardEvent) {
+      if (e.key === "?" && !e.ctrlKey && !e.metaKey && !e.altKey) {
+        var tag = (e.target as HTMLElement).tagName;
+        if (tag === "INPUT" || tag === "TEXTAREA" || (e.target as HTMLElement).isContentEditable) return;
+        e.preventDefault();
+        setOpen(true);
+      }
+      if (e.key === "Escape" && open) {
+        setOpen(false);
+      }
+    }
+    document.addEventListener("keydown", handleKeyDown);
+    return function () { document.removeEventListener("keydown", handleKeyDown); };
+  }, [open]);
+
+  if (!open) return null;
+
+  return (
+    <div className="fixed inset-0 z-[9998] flex items-center justify-center" onClick={function () { setOpen(false); }}>
+      <div className="absolute inset-0 bg-black/50" />
+      <div
+        className="relative w-full max-w-[540px] mx-4 bg-base-200 border border-base-content/15 rounded-2xl shadow-xl overflow-hidden"
+        onClick={function (e) { e.stopPropagation(); }}
+      >
+        <div className="flex items-center justify-between px-5 py-3.5 border-b border-base-content/10">
+          <h2 className="text-[14px] font-mono font-bold text-base-content tracking-tight">Keyboard Shortcuts</h2>
+          <button
+            onClick={function () { setOpen(false); }}
+            className="w-6 h-6 rounded flex items-center justify-center text-base-content/30 hover:text-base-content/60 transition-colors"
+          >
+            <X size={14} />
+          </button>
+        </div>
+        <div className="px-5 py-4 max-h-[70vh] overflow-y-auto">
+          <div className="flex flex-col gap-5">
+            {categories.map(function (cat) {
+              return (
+                <div key={cat.name}>
+                  <div className="text-[9px] uppercase tracking-widest text-base-content/30 font-mono font-bold mb-2">{cat.name}</div>
+                  <div className="flex flex-col gap-1">
+                    {cat.shortcuts.map(function (shortcut, i) {
+                      return (
+                        <div key={i} className="flex items-center justify-between py-1.5 px-2 rounded hover:bg-base-content/5 transition-colors">
+                          <span className="text-[13px] text-base-content/60">{shortcut.description}</span>
+                          <div className="flex items-center gap-1 flex-shrink-0 ml-4">
+                            {shortcut.keys.map(function (key, ki) {
+                              return (
+                                <span key={ki} className="flex items-center gap-1">
+                                  {ki > 0 && <span className="text-[10px] text-base-content/20">+</span>}
+                                  <Kbd>{key}</Kbd>
+                                </span>
+                              );
+                            })}
+                          </div>
+                        </div>
+                      );
+                    })}
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+        <div className="px-5 py-2.5 border-t border-base-content/10 flex justify-end">
+          <span className="text-[10px] font-mono text-base-content/20">Press <Kbd>Esc</Kbd> to close</span>
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -1,10 +1,17 @@
 import { useEffect, useState, useCallback } from "react";
 import { X, Info, AlertTriangle, AlertCircle } from "lucide-react";
 
+export interface ToastOptions {
+  persistent?: boolean;
+  duration?: number;
+}
+
 export interface ToastItem {
   id: string;
   message: string;
   type: "info" | "error" | "warning";
+  persistent?: boolean;
+  duration?: number;
 }
 
 interface ToastProps {
@@ -63,11 +70,20 @@ export function Toast(props: ToastProps) {
 
 var toastListeners: Array<(item: ToastItem) => void> = [];
 
-export function showToast(message: string, type: ToastItem["type"] = "info"): void {
+export function showToast(message: string, type: ToastItem["type"] = "info", options?: ToastOptions): void {
+  var persistent = options?.persistent;
+  var duration = options?.duration;
+
+  if (type === "error" && persistent === undefined && duration === undefined) {
+    persistent = true;
+  }
+
   var item: ToastItem = {
     id: Math.random().toString(36).slice(2),
     message,
     type,
+    persistent,
+    duration,
   };
   toastListeners.forEach(function (listener) {
     listener(item);
@@ -90,13 +106,17 @@ export function useToastState(): { items: ToastItem[]; dismiss: (id: string) =>
       setItems(function (prev) {
         return [...prev, item];
       });
+
+      if (item.persistent) return;
+
+      var timeout = item.duration ?? 5000;
       setTimeout(function () {
         setItems(function (prev) {
           return prev.filter(function (i) {
             return i.id !== item.id;
           });
         });
-      }, 5000);
+      }, timeout);
     }
 
     toastListeners.push(listener);