@cryptiklemur/lattice 1.14.2 → 1.16.0

package/.github/workflows/ci.yml

@@ -0,0 +1,121 @@
+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 shared
+        run: bunx tsc --noEmit -p shared/tsconfig.json
+
+      - name: Typecheck server
+        run: bunx tsc --noEmit -p server/tsconfig.json
+
+      - name: Typecheck client
+        run: bunx tsc --noEmit -p client/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
+
+  playwright:
+    name: Playwright Tests
+    runs-on: ubuntu-latest
+    continue-on-error: true
+    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: Install Playwright browsers
+        run: bunx playwright install --with-deps chromium
+
+      - name: Run Playwright tests
+        run: bunx playwright test
+
+      - name: Upload test results
+        if: always()
+        uses: actions/upload-artifact@v4
+        with:
+          name: playwright-results
+          path: test-results/
+          retention-days: 7

package/bun.lock

@@ -5,6 +5,7 @@
     "": {
       "name": "@lattice/root",
       "devDependencies": {
+        "@playwright/test": "^1.52.0",
         "@semantic-release/commit-analyzer": "^13.0.1",
         "@semantic-release/github": "^12.0.6",
         "@semantic-release/npm": "^13.1.5",
@@ -55,11 +56,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",
       },
@@ -350,6 +353,8 @@
 
     "@oxc-project/types": ["@oxc-project/types@0.120.0", "", {}, "sha512-k1YNu55DuvAip/MGE1FTsIuU3FUCn6v/ujG9V7Nq5Df/kX2CWb13hhwD0lmJGMGqE+bE1MXvv9SZVnMzEXlWcg=="],
 
+    "@playwright/test": ["@playwright/test@1.58.2", "", { "dependencies": { "playwright": "1.58.2" }, "bin": { "playwright": "cli.js" } }, "sha512-akea+6bHYBBfA9uQqSYmlJXn61cTa+jbO87xVLCWbTqbWadRVmhxlXATaOjOgcBaWU4ePo0wB41KMFv3o35IXA=="],
+
     "@pnpm/config.env-replace": ["@pnpm/config.env-replace@1.1.0", "", {}, "sha512-htyl8TWnKL7K/ESFa1oW2UB5lVDxuF5DpM7tBi6Hu2LNL3mWkIzNLG6N4zoCUP1lCKNxWy/3iu8mS8MvToGd6w=="],
 
     "@pnpm/network.ca-file": ["@pnpm/network.ca-file@1.0.2", "", { "dependencies": { "graceful-fs": "4.2.10" } }, "sha512-YcPQ8a0jwYU9bTdJDpXjMi7Brhkr1mXsXrUJvjqM2mQDgkRiz8jFaQGOdaLxgjtUfQgZhKy/O3cG/YwmgKaxLA=="],
@@ -508,7 +513,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=="],
 
@@ -1314,6 +1319,10 @@
 
     "pkg-conf": ["pkg-conf@2.1.0", "", { "dependencies": { "find-up": "^2.0.0", "load-json-file": "^4.0.0" } }, "sha512-C+VUP+8jis7EsQZIhDYmS5qlNtjv2yP4SNtjXK9AP1ZcTRlnSfuumaTnRfYZnYgUUYVIKqL0fRvmUGDV2fmp6g=="],
 
+    "playwright": ["playwright@1.58.2", "", { "dependencies": { "playwright-core": "1.58.2" }, "optionalDependencies": { "fsevents": "2.3.2" }, "bin": { "playwright": "cli.js" } }, "sha512-vA30H8Nvkq/cPBnNw4Q8TWz1EJyqgpuinBcHET0YVJVFldr8JDNiU9LaWAE1KqSkRYazuaBhTpB5ZzShOezQ6A=="],
+
+    "playwright-core": ["playwright-core@1.58.2", "", { "bin": { "playwright-core": "cli.js" } }, "sha512-yZkEtftgwS8CsfYo7nm0KE8jsvm6i/PTgVtB8DL726wNf6H2IMsDuxCpJj59KDaxCtSnrWan2AeDqM7JBaultg=="],
+
     "pngjs": ["pngjs@5.0.0", "", {}, "sha512-40QW5YalBNfQo5yRYmiw7Yz6TKKVr3h6970B2YE+3fQpsWcrbj1PzJgxeJ19DRQjhMbKPIuMY8rFaXc8moolVw=="],
 
     "possible-typed-array-names": ["possible-typed-array-names@1.1.0", "", {}, "sha512-/+5VFTchJDoVj3bhoqi6UeymcD00DAwb1nJwamzPvHEszJ4FpF6SNNbUbOS8yI56qHzdV8eK0qEfOSiodkTdxg=="],
@@ -1774,6 +1783,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=="],
@@ -2068,6 +2079,8 @@
 
     "pkg-conf/find-up": ["find-up@2.1.0", "", { "dependencies": { "locate-path": "^2.0.0" } }, "sha512-NWzkk0jSJtTt08+FBFMvXoeZnOJD+jTtsRmBYbAIzJdX6l7dLgR7CTubCM5/eDdPUBvLCeVasP1brfVR/9/EZQ=="],
 
+    "playwright/fsevents": ["fsevents@2.3.2", "", { "os": "darwin" }, "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA=="],
+
     "prop-types/react-is": ["react-is@16.13.1", "", {}, "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="],
 
     "qrcode/yargs": ["yargs@15.4.1", "", { "dependencies": { "cliui": "^6.0.0", "decamelize": "^1.2.0", "find-up": "^4.1.0", "get-caller-file": "^2.0.1", "require-directory": "^2.1.1", "require-main-filename": "^2.0.0", "set-blocking": "^2.0.0", "string-width": "^4.2.0", "which-module": "^2.0.0", "y18n": "^4.0.0", "yargs-parser": "^18.1.2" } }, "sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A=="],

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/analytics/QuickStats.tsx

@@ -51,9 +51,9 @@ export function QuickStats() {
   var d = analytics.data;
   var colors = getChartColors();
 
-  var costSparkData = d.costOverTime.slice(-7).map(function (e) { return { v: e.total }; });
-  var sessionsSparkData = d.sessionsOverTime.slice(-7).map(function (e) { return { v: e.count }; });
-  var tokensSparkData = d.tokensOverTime.slice(-7).map(function (e) { return { v: e.input + e.output }; });
+  var costSparkData = d.costOverTime.slice(-7).map(function (e: typeof d.costOverTime[number]) { return { v: e.total }; });
+  var sessionsSparkData = d.sessionsOverTime.slice(-7).map(function (e: typeof d.sessionsOverTime[number]) { return { v: e.count }; });
+  var tokensSparkData = d.tokensOverTime.slice(-7).map(function (e: typeof d.tokensOverTime[number]) { return { v: e.input + e.output }; });
 
   var totalTokens = d.totalTokens.input + d.totalTokens.output;
   var cacheHitPct = Math.round(d.cacheHitRate * 100);

package/client/src/components/analytics/charts/NodeFleetOverview.tsx

@@ -67,7 +67,7 @@ export function NodeFleetOverview(props: NodeFleetOverviewProps) {
               <div className="mt-2.5 pt-2 border-t border-base-content/5">
                 <div className="text-[9px] font-mono text-base-content/25 uppercase tracking-widest mb-1.5">Projects</div>
                 <div className="flex flex-wrap gap-1">
-                  {node.projects.map(function (p) {
+                  {node.projects.map(function (p: typeof node.projects[number]) {
                     return (
                       <span
                         key={p.slug}

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

@@ -1,13 +1,14 @@
 import { useEffect, useRef, useCallback, useState, useMemo } from "react";
-import { Terminal, Info, ArrowDown, Pencil, Copy, Check, Menu, AlertTriangle, Zap, Square, X } from "lucide-react";
+import { Terminal, Info, ArrowDown, Pencil, Copy, Check, Menu, AlertTriangle, Zap, Square, X, Bookmark } 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";
 import { useWebSocket } from "../../hooks/useWebSocket";
 import { setSessionTitle, setIsProcessing, setCurrentStatus, setWasInterrupted, setPendingPrefill } from "../../stores/session";
 import { openSettings, openProjectSettings } from "../../stores/sidebar";
-import { openTab } from "../../stores/workspace";
+import { openTab, updateSessionTabTitle } from "../../stores/workspace";
 import { builtinCommands } from "../../commands";
 import { Message } from "./Message";
 import { ToolGroup } from "./ToolGroup";
@@ -18,15 +19,26 @@ import { StatusBar } from "./StatusBar";
 import { useSidebar } from "../../hooks/useSidebar";
 import { useOnline } from "../../hooks/useOnline";
 import { useSpinnerVerb } from "../../hooks/useSpinnerVerb";
+import { useBookmarks } from "../../hooks/useBookmarks";
 import { formatSessionTitle } from "../../utils/formatSessionTitle";
 
-export function ChatView() {
-  var { messages, isProcessing, sendMessage, activeSessionId, activeSessionTitle, currentStatus, contextUsage, contextBreakdown, lastResponseCost, lastResponseDuration, historyLoading, wasInterrupted, promptSuggestion, failedInput, clearFailedInput, messageQueue, enqueueMessage, removeQueuedMessage, updateQueuedMessage, isBusy, isPlanMode, pendingPrefill } = useSession();
+export function ChatView({ sessionId: tabSessionId, projectSlug: tabProjectSlug }: { sessionId?: string; projectSlug?: string } = {}) {
+  var { messages, isProcessing, sendMessage, activeSessionId, activeSessionTitle, currentStatus, contextUsage, contextBreakdown, lastResponseCost, lastResponseDuration, historyLoading, wasInterrupted, promptSuggestion, failedInput, clearFailedInput, messageQueue, enqueueMessage, removeQueuedMessage, updateQueuedMessage, isBusy, isPlanMode, pendingPrefill, activateSession, budgetStatus, budgetExceeded, sendBudgetOverride, dismissBudgetExceeded } = useSession();
   var { activeProject } = useProjects();
   var { toggleDrawer } = useSidebar();
+
+  useEffect(function () {
+    if (!tabSessionId || !tabProjectSlug) return;
+    if (activeSessionId === tabSessionId) return;
+    activateSession(tabProjectSlug, tabSessionId);
+  }, [tabSessionId, tabProjectSlug]);
   var online = useOnline();
   var ws = useWebSocket();
   var spinnerVerb = useSpinnerVerb(isProcessing);
+  var { bookmarks, requestSessionBookmarks } = useBookmarks();
+  var [showBookmarkDropdown, setShowBookmarkDropdown] = useState<boolean>(false);
+  var bookmarkDropdownRef = useRef<HTMLDivElement>(null);
+  var bookmarkBtnRef = useRef<HTMLButtonElement>(null);
   var scrollParentRef = useRef<HTMLDivElement>(null);
   var prevLengthRef = useRef<number>(0);
   var isLiveChatRef = useRef<boolean>(false);
@@ -38,6 +50,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) {
@@ -46,6 +61,24 @@ export function ChatView() {
     }
   }, [pendingPrefill, historyLoading]);
 
+  useEffect(function () {
+    if (activeSessionId && !historyLoading) {
+      requestSessionBookmarks();
+    }
+  }, [activeSessionId, historyLoading]);
+
+  useEffect(function () {
+    if (!showBookmarkDropdown) return;
+    function handleClick(e: MouseEvent) {
+      var target = e.target as Node;
+      if (bookmarkDropdownRef.current && bookmarkDropdownRef.current.contains(target)) return;
+      if (bookmarkBtnRef.current && bookmarkBtnRef.current.contains(target)) return;
+      setShowBookmarkDropdown(false);
+    }
+    document.addEventListener("mousedown", handleClick);
+    return function () { document.removeEventListener("mousedown", handleClick); };
+  }, [showBookmarkDropdown]);
+
   var [copiedField, setCopiedField] = useState<string | null>(null);
   var [isRenaming, setIsRenaming] = useState<boolean>(false);
   var [renameValue, setRenameValue] = useState<string>("");
@@ -198,6 +231,7 @@ export function ChatView() {
       if (renameValue.trim() !== activeSessionTitle) {
         ws.send({ type: "session:rename", sessionId: activeSessionId, title: renameValue.trim() });
         setSessionTitle(renameValue.trim());
+        updateSessionTabTitle(activeSessionId, renameValue.trim());
       }
     }
     setIsRenaming(false);
@@ -305,6 +339,7 @@ export function ChatView() {
         if (args && activeSessionId) {
           ws.send({ type: "session:rename", sessionId: activeSessionId, title: args });
           setSessionTitle(args);
+          updateSessionTabTitle(activeSessionId, args);
         } else {
           handleRenameStart();
         }
@@ -416,6 +451,53 @@ export function ChatView() {
                     <Pencil size={12} />
                   </button>
                 )}
+                {activeSessionId && bookmarks.length > 0 && (
+                  <div className="relative">
+                    <button
+                      ref={bookmarkBtnRef}
+                      onClick={function () { setShowBookmarkDropdown(!showBookmarkDropdown); }}
+                      aria-label="View bookmarks"
+                      className="flex items-center gap-1 px-1.5 py-0.5 rounded text-[10px] font-mono text-warning/70 hover:text-warning hover:bg-warning/10 transition-colors"
+                    >
+                      <Bookmark size={11} />
+                      <span>{bookmarks.length}</span>
+                    </button>
+                    {showBookmarkDropdown && (
+                      <div
+                        ref={bookmarkDropdownRef}
+                        className="absolute top-full left-0 mt-1 z-50 bg-base-300 border border-base-content/15 rounded-lg shadow-xl py-1 w-[280px] max-h-[300px] overflow-y-auto"
+                      >
+                        <div className="px-2.5 py-1.5 text-[10px] uppercase tracking-widest text-base-content/40 font-mono font-bold">
+                          Bookmarks
+                        </div>
+                        {bookmarks.map(function (bm) {
+                          return (
+                            <button
+                              key={bm.id}
+                              type="button"
+                              onClick={function () {
+                                setShowBookmarkDropdown(false);
+                                var el = document.getElementById("msg-" + bm.messageUuid);
+                                if (el) {
+                                  el.scrollIntoView({ behavior: "smooth", block: "center" });
+                                  el.classList.add("ring-2", "ring-warning/40");
+                                  setTimeout(function () { el!.classList.remove("ring-2", "ring-warning/40"); }, 2000);
+                                }
+                              }}
+                              className="flex items-start gap-2 w-full px-2.5 py-1.5 hover:bg-base-content/5 transition-colors text-left"
+                            >
+                              <Bookmark size={10} className="text-warning/60 mt-0.5 flex-shrink-0" />
+                              <div className="min-w-0 flex-1">
+                                <div className="text-[11px] text-base-content/60 truncate">{bm.messageText}</div>
+                                <div className="text-[9px] text-base-content/30 font-mono">{bm.messageType}</div>
+                              </div>
+                            </button>
+                          );
+                        })}
+                      </div>
+                    )}
+                  </div>
+                )}
               </>
             )}
           </div>
@@ -885,7 +967,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">
@@ -950,12 +1032,42 @@ export function ChatView() {
         </div>
       )}
 
+      {budgetExceeded && budgetStatus && (
+        <div className="flex-shrink-0 border-t border-base-300 bg-warning/10 px-4 py-3 flex items-center gap-3">
+          <AlertTriangle size={16} className="text-warning flex-shrink-0" />
+          <div className="flex-1 min-w-0">
+            <div className="text-[13px] text-base-content font-medium">
+              Daily budget exceeded (${budgetStatus.dailySpend.toFixed(2)} / ${budgetStatus.dailyLimit.toFixed(2)})
+            </div>
+            <div className="text-[11px] text-base-content/50">Send anyway?</div>
+          </div>
+          <button
+            onClick={sendBudgetOverride}
+            className="px-3 py-1.5 rounded-lg bg-warning text-warning-content text-[12px] font-semibold hover:bg-warning/80 transition-colors"
+          >
+            Continue
+          </button>
+          <button
+            onClick={dismissBudgetExceeded}
+            className="px-3 py-1.5 rounded-lg border border-base-content/15 text-base-content/60 text-[12px] hover:bg-base-content/5 transition-colors"
+          >
+            Cancel
+          </button>
+        </div>
+      )}
+
       <div className="flex-shrink-0 border-t border-base-300 bg-base-200 px-2 sm:px-4 pb-3 pt-2">
         <ChatInput
           sessionId={activeSessionId}
           onSend={handleSend}
-          disabled={!activeSessionId || !online || isBusy}
-          disabledPlaceholder={isBusy ? "Session in use by another client..." : undefined}
+          disabled={!activeSessionId || !online || isBusy || (budgetStatus !== null && budgetStatus.enforcement === "hard-block" && budgetStatus.dailySpend >= budgetStatus.dailyLimit)}
+          disabledPlaceholder={
+            isBusy
+              ? "Session in use by another client..."
+              : (budgetStatus !== null && budgetStatus.enforcement === "hard-block" && budgetStatus.dailySpend >= budgetStatus.dailyLimit)
+                ? "Daily budget exceeded ($" + budgetStatus.dailySpend.toFixed(2) + " / $" + budgetStatus.dailyLimit.toFixed(2) + ")"
+                : undefined
+          }
           failedInput={failedInput}
           onFailedInputConsumed={clearFailedInput}
           prefillText={prefillText}

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

@@ -1,10 +1,12 @@
-import { useState, useRef, useEffect, memo } from "react";
+import { useState, useRef, useEffect, memo, useMemo } from "react";
 import Markdown from "react-markdown";
 import remarkGfm from "remark-gfm";
-import { Wrench, TriangleAlert, ChevronDown, ChevronRight, Check, X, Shield, Zap, Link, Copy, SquarePlus } from "lucide-react";
+import { Wrench, TriangleAlert, ChevronDown, ChevronRight, Check, X, Shield, Zap, Link, Copy, SquarePlus, Bookmark, BookmarkCheck } from "lucide-react";
 import type { HistoryMessage, ChatPermissionResponseMessage } from "@lattice/shared";
+import { useStore } from "@tanstack/react-store";
 import { useWebSocket } from "../../hooks/useWebSocket";
 import { getSessionStore, setPendingPrefill } from "../../stores/session";
+import { getBookmarkStore, findBookmarkByUuid } from "../../stores/bookmarks";
 import { ToolResultRenderer } from "./ToolResultRenderer";
 import { formatToolSummary } from "./toolSummary";
 import { PromptQuestion } from "./PromptQuestion";
@@ -104,9 +106,17 @@ function stripMarkdown(text: string): string {
     .trim();
 }
 
-function MessageActions(props: { text: string; showNewSession?: boolean }) {
+function MessageActions(props: { text: string; showNewSession?: boolean; messageUuid?: string; messageType?: "user" | "assistant" }) {
   var [copied, setCopied] = useState(false);
   var ws = useWebSocket();
+  var bookmarkState = useStore(getBookmarkStore(), function (s) { return s; });
+  var isBookmarked = useMemo(function () {
+    if (!props.messageUuid) return false;
+    for (var i = 0; i < bookmarkState.bookmarks.length; i++) {
+      if (bookmarkState.bookmarks[i].messageUuid === props.messageUuid) return true;
+    }
+    return false;
+  }, [props.messageUuid, bookmarkState.bookmarks]);
 
   function handleCopy(e: React.MouseEvent) {
     var content = e.shiftKey ? stripMarkdown(props.text) : props.text;
@@ -122,6 +132,26 @@ function MessageActions(props: { text: string; showNewSession?: boolean }) {
     ws.send({ type: "session:create", projectSlug: state.activeProjectSlug });
   }
 
+  function handleBookmarkToggle() {
+    var state = getSessionStore().state;
+    if (!state.activeSessionId || !state.activeProjectSlug || !props.messageUuid || !props.messageType) return;
+    if (isBookmarked) {
+      var bm = findBookmarkByUuid(props.messageUuid);
+      if (bm) {
+        ws.send({ type: "bookmark:remove", id: bm.id });
+      }
+    } else {
+      ws.send({
+        type: "bookmark:add",
+        sessionId: state.activeSessionId,
+        projectSlug: state.activeProjectSlug,
+        messageUuid: props.messageUuid,
+        messageText: props.text.slice(0, 100),
+        messageType: props.messageType,
+      });
+    }
+  }
+
   var btnClass = "opacity-0 group-hover/msg:opacity-100 transition-opacity duration-150 text-base-content/20 hover:text-base-content/50 cursor-pointer p-0.5 focus-visible:opacity-100 focus-visible:ring-2 focus-visible:ring-primary/30 focus-visible:outline-none rounded";
 
   return (
@@ -134,6 +164,11 @@ function MessageActions(props: { text: string; showNewSession?: boolean }) {
           <SquarePlus size={11} />
         </button>
       )}
+      {props.messageUuid && props.messageType && (
+        <button type="button" onClick={handleBookmarkToggle} className={btnClass + (isBookmarked ? " !opacity-100 !text-warning" : "")} title={isBookmarked ? "Remove bookmark" : "Bookmark message"}>
+          {isBookmarked ? <BookmarkCheck size={11} /> : <Bookmark size={11} />}
+        </button>
+      )}
     </>
   );
 }
@@ -179,7 +214,7 @@ function SkillMessage(props: { skillName: string; content: string; time: string
         <div className="chat-footer text-[10px] text-base-content/30 mt-0.5 flex items-center gap-1">
           {props.time}
           <MessageAnchor id={props.uuid} />
-          <MessageActions text={"/" + props.skillName} showNewSession />
+          <MessageActions text={"/" + props.skillName} showNewSession messageUuid={props.uuid} messageType="user" />
         </div>
       )}
     </div>
@@ -205,7 +240,7 @@ function UserMessage(props: { message: HistoryMessage }) {
         <div className="chat-footer text-[10px] text-base-content/30 mt-0.5 flex items-center gap-1">
           {time}
           <MessageAnchor id={msg.uuid} />
-          <MessageActions text={text} showNewSession />
+          <MessageActions text={text} showNewSession messageUuid={msg.uuid} messageType="user" />
         </div>
       )}
     </div>
@@ -256,7 +291,7 @@ function AssistantMessage(props: { message: HistoryMessage; responseCost?: numbe
             <span className="text-base-content/15">{formatTokenCount(msg.outputTokens)} out</span>
           )}
           <MessageAnchor id={msg.uuid} />
-          <MessageActions text={msg.text || ""} showNewSession />
+          <MessageActions text={msg.text || ""} showNewSession messageUuid={msg.uuid} messageType="assistant" />
         </div>
       )}
     </div>

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

@@ -90,7 +90,7 @@ export function PromptQuestion(props: PromptQuestionProps) {
             )}
             <span className="text-[12px] text-base-content/50">{firstAnswer ? firstAnswer[0] : ""}</span>
             <span className="flex-1" />
-            <span className="text-[12px] font-medium text-base-content/70">{firstAnswer ? firstAnswer[1] : ""}</span>
+            <span className="text-[12px] font-medium text-base-content/70">{firstAnswer ? String(firstAnswer[1]) : ""}</span>
             <ChevronDown
               size={12}
               className={"text-base-content/25 transition-transform duration-200 " + (expanded ? "rotate-180" : "")}
@@ -100,7 +100,7 @@ export function PromptQuestion(props: PromptQuestionProps) {
           {expanded && answeredQuestion && (
             <div className="px-4 pb-3 border-t border-base-content/5">
               <div className="flex flex-col gap-1 pt-2">
-                {answeredQuestion.options.map(function (opt, oi) {
+                {answeredQuestion.options.map(function (opt: typeof answeredQuestion.options[number], oi: number) {
                   var isChosen = firstAnswer && firstAnswer[1] === opt.label;
                   return (
                     <div
@@ -142,7 +142,7 @@ export function PromptQuestion(props: PromptQuestionProps) {
 
   return (
     <div className="px-5 py-2" aria-live="polite">
-      {questions.map(function (q, qi) {
+      {questions.map(function (q: typeof questions[number], qi: number) {
         return (
           <div
             key={qi}
@@ -165,7 +165,7 @@ export function PromptQuestion(props: PromptQuestionProps) {
                 aria-label={q.question}
                 onKeyDown={function (e) { handleKeyDown(e, q.options.length, q, q.options); }}
               >
-                {q.options.map(function (opt, oi) {
+                {q.options.map(function (opt: typeof q.options[number], oi: number) {
                   var isSelected = selectedMulti.has(opt.label);
                   var isFocused = focusIndex === oi;
                   return (

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

@@ -19,7 +19,7 @@ export function TodoCard(props: TodoCardProps) {
   var todos = props.message.todos || [];
   if (todos.length === 0) return null;
 
-  var completed = todos.filter(function (t) { return t.status === "completed"; }).length;
+  var completed = todos.filter(function (t: typeof todos[number]) { return t.status === "completed"; }).length;
   var total = todos.length;
 
   return (
@@ -32,7 +32,7 @@ export function TodoCard(props: TodoCardProps) {
         </div>
 
         <div className="px-3 py-2">
-          {todos.map(function (todo) {
+          {todos.map(function (todo: typeof todos[number]) {
             return (
               <div
                 key={todo.id}

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"