@cryptiklemur/lattice 1.14.2 → 1.16.0

package/client/src/components/dashboard/DashboardView.tsx

@@ -3,6 +3,7 @@ import { useMesh } from "../../hooks/useMesh";
 import { useProjects } from "../../hooks/useProjects";
 import { useSidebar } from "../../hooks/useSidebar";
 import { useWebSocket } from "../../hooks/useWebSocket";
+import { useTimeTick } from "../../hooks/useTimeTick";
 import { LatticeLogomark } from "../ui/LatticeLogomark";
 import { QuickStats } from "../analytics/QuickStats";
 import {
@@ -25,6 +26,7 @@ function relativeTime(ts: number): string {
 }
 
 export function DashboardView() {
+  useTimeTick();
   var { nodes } = useMesh();
   var { projects } = useProjects();
   var sidebar = useSidebar();

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/ProjectEnvironment.tsx

@@ -127,7 +127,7 @@ export function ProjectEnvironment({
                   </div>
                   <div className="flex gap-1.5 items-center">
                     <div className="h-9 sm:h-7 px-3 bg-base-300/50 border border-base-content/10 rounded-xl flex items-center font-mono text-[12px] text-base-content/40 w-full">
-                      {v}
+                      {String(v)}
                     </div>
                   </div>
                   <span className="text-[10px] uppercase tracking-wider text-base-content/30 w-7 text-center hidden sm:block">

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/project-settings/ProjectRules.tsx

@@ -19,7 +19,7 @@ export function ProjectRules({
   var globalRules = settings.global.rules ?? [];
 
   var [rules, setRules] = useState<RuleEntry[]>(function () {
-    return (settings.rules ?? []).map(function (r) {
+    return (settings.rules ?? []).map(function (r: { filename: string; content: string }) {
       return { filename: r.filename, content: r.content };
     });
   });
@@ -34,7 +34,7 @@ export function ProjectRules({
     if (save.saving) {
       save.confirmSave();
     } else {
-      setRules((settings.rules ?? []).map(function (r) {
+      setRules((settings.rules ?? []).map(function (r: { filename: string; content: string }) {
         return { filename: r.filename, content: r.content };
       }));
       save.resetFromServer();
@@ -136,7 +136,7 @@ export function ProjectRules({
         )}
         {globalRules.length > 0 && (
           <div className="flex flex-col gap-1.5">
-            {globalRules.map(function (rule, idx) {
+            {globalRules.map(function (rule: typeof globalRules[number], idx: number) {
               var isExpanded = expandedGlobal.has(idx);
               return (
                 <div key={rule.filename + "-" + idx} className="border border-base-content/10 rounded-xl overflow-hidden">

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

@@ -46,7 +46,7 @@ export function ProjectSkills({ settings, projectSlug }: ProjectSkillsProps) {
         <div>
           <div className="text-[12px] font-semibold text-base-content/40 mb-2">Global Skills</div>
           <div className="space-y-2">
-            {globalSkills.map(function (skill) {
+            {globalSkills.map(function (skill: typeof globalSkills[number]) {
               return (
                 <SkillItem
                   key={skill.path}
@@ -64,7 +64,7 @@ export function ProjectSkills({ settings, projectSlug }: ProjectSkillsProps) {
         <div>
           <div className="text-[12px] font-semibold text-base-content/40 mb-2">Project Skills</div>
           <div className="space-y-2">
-            {projectSkills.map(function (skill) {
+            {projectSkills.map(function (skill: typeof projectSkills[number]) {
               return (
                 <SkillItem
                   key={skill.path}

package/client/src/components/settings/BudgetSettings.tsx

@@ -0,0 +1,161 @@
+import { useState, useEffect } from "react";
+import { useStore } from "@tanstack/react-store";
+import { useWebSocket } from "../../hooks/useWebSocket";
+import { useSaveState } from "../../hooks/useSaveState";
+import { SaveFooter } from "../ui/SaveFooter";
+import { getSessionStore } from "../../stores/session";
+import type { ServerMessage, SettingsDataMessage, SettingsUpdateMessage } from "@lattice/shared";
+
+var ENFORCEMENT_OPTIONS = [
+  { id: "warning", label: "Warning", description: "Shows a warning but does not block" },
+  { id: "soft-block", label: "Confirm", description: "Asks for confirmation before sending" },
+  { id: "hard-block", label: "Block", description: "Prevents sending until tomorrow" },
+];
+
+export function BudgetSettings() {
+  var { send, subscribe, unsubscribe } = useWebSocket();
+  var budgetStatus = useStore(getSessionStore(), function (s) { return s.budgetStatus; });
+  var [enabled, setEnabled] = useState(false);
+  var [dailyLimit, setDailyLimit] = useState(10);
+  var [enforcement, setEnforcement] = useState("warning");
+  var save = useSaveState();
+
+  useEffect(function () {
+    function handleMessage(msg: ServerMessage) {
+      if (msg.type !== "settings:data") return;
+      var data = msg as SettingsDataMessage;
+      var cfg = data.config;
+
+      if (save.saving) {
+        save.confirmSave();
+      } else {
+        if (cfg.costBudget) {
+          setEnabled(true);
+          setDailyLimit(cfg.costBudget.dailyLimit);
+          setEnforcement(cfg.costBudget.enforcement);
+        } else {
+          setEnabled(false);
+          setDailyLimit(10);
+          setEnforcement("warning");
+        }
+        save.resetFromServer();
+      }
+    }
+
+    subscribe("settings:data", handleMessage);
+    send({ type: "settings:get" });
+
+    return function () {
+      unsubscribe("settings:data", handleMessage);
+    };
+  }, []);
+
+  function handleSave() {
+    save.startSave();
+    var updateMsg: SettingsUpdateMessage = {
+      type: "settings:update",
+      settings: {
+        costBudget: enabled ? { dailyLimit: dailyLimit, enforcement: enforcement as "warning" | "soft-block" | "hard-block" } : undefined,
+      } as SettingsUpdateMessage["settings"],
+    };
+    send(updateMsg);
+  }
+
+  return (
+    <div className="py-2">
+      <p className="text-[12px] text-base-content/40 mb-5">
+        Set a daily spending limit to control API costs. The budget resets at midnight.
+      </p>
+
+      {budgetStatus && (
+        <div className="mb-5 p-3 rounded-xl bg-base-300 border border-base-content/10">
+          <div className="text-[11px] text-base-content/40 font-mono mb-1">Today's spend</div>
+          <div className="text-[18px] font-mono font-bold text-base-content">
+            ${budgetStatus.dailySpend.toFixed(2)}
+            {budgetStatus.dailyLimit > 0 && (
+              <span className="text-[13px] text-base-content/30 font-normal">
+                {" / $" + budgetStatus.dailyLimit.toFixed(2)}
+              </span>
+            )}
+          </div>
+        </div>
+      )}
+
+      <div className="mb-5">
+        <label className="flex items-center gap-3 cursor-pointer">
+          <input
+            type="checkbox"
+            checked={enabled}
+            onChange={function (e) {
+              setEnabled(e.target.checked);
+              save.markDirty();
+            }}
+            className="toggle toggle-sm toggle-primary"
+          />
+          <span className="text-[13px] text-base-content">Enable daily budget</span>
+        </label>
+      </div>
+
+      {enabled && (
+        <>
+          <div className="mb-5">
+            <label htmlFor="budget-daily-limit" className="block text-[12px] font-semibold text-base-content/40 mb-2">
+              Daily limit (USD)
+            </label>
+            <input
+              id="budget-daily-limit"
+              type="number"
+              min={0.01}
+              step={0.5}
+              value={dailyLimit}
+              onChange={function (e) {
+                var val = parseFloat(e.target.value);
+                if (!isNaN(val) && val > 0) {
+                  setDailyLimit(val);
+                  save.markDirty();
+                }
+              }}
+              className="w-full h-9 px-3 bg-base-300 border border-base-content/15 rounded-xl text-base-content text-[13px] font-mono focus:border-primary focus-visible:outline-none transition-colors duration-[120ms]"
+            />
+          </div>
+
+          <div className="mb-6" role="radiogroup" aria-label="Enforcement mode">
+            <div className="text-[12px] font-semibold text-base-content/40 mb-2">Enforcement</div>
+            <div className="flex flex-col gap-2">
+              {ENFORCEMENT_OPTIONS.map(function (opt) {
+                var active = enforcement === opt.id;
+                return (
+                  <button
+                    key={opt.id}
+                    role="radio"
+                    aria-checked={active}
+                    onClick={function () {
+                      setEnforcement(opt.id);
+                      save.markDirty();
+                    }}
+                    className={
+                      "w-full text-left px-3 py-2.5 rounded-lg border text-[12px] transition-colors duration-[120ms] cursor-pointer focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-1 focus-visible:ring-offset-base-100 " +
+                      (active
+                        ? "border-primary bg-base-300 text-base-content"
+                        : "border-base-content/15 bg-base-300 text-base-content/40 hover:border-base-content/30 hover:text-base-content/60")
+                    }
+                  >
+                    <div className="font-semibold">{opt.label}</div>
+                    <div className={"text-[11px] mt-0.5 " + (active ? "text-base-content/50" : "text-base-content/30")}>{opt.description}</div>
+                  </button>
+                );
+              })}
+            </div>
+          </div>
+        </>
+      )}
+
+      <SaveFooter
+        dirty={save.dirty}
+        saving={save.saving}
+        saveState={save.saveState}
+        onSave={handleSave}
+      />
+    </div>
+  );
+}

package/client/src/components/settings/Environment.tsx

@@ -34,7 +34,7 @@ export function Environment() {
       }
 
       var rows = Object.entries(env).map(function ([k, v]) {
-        return { id: genId(), key: k, value: v };
+        return { id: genId(), key: k, value: String(v) };
       });
       setEntries(rows);
       if (!save.saving) {

package/client/src/components/settings/SettingsView.tsx

@@ -10,12 +10,14 @@ import { Editor } from "./Editor";
 import { GlobalRules } from "./GlobalRules";
 import { GlobalMemory } from "./GlobalMemory";
 import { Notifications } from "./Notifications";
+import { BudgetSettings } from "./BudgetSettings";
 import type { SettingsSection } from "../../stores/sidebar";
 
 var SECTION_CONFIG: Record<string, { title: string }> = {
   appearance: { title: "Appearance" },
   notifications: { title: "Notifications" },
   claude: { title: "Claude Settings" },
+  budget: { title: "Budget" },
   environment: { title: "Environment" },
   mcp: { title: "MCP Servers" },
   skills: { title: "Skills" },
@@ -29,6 +31,7 @@ function renderSection(section: SettingsSection) {
   if (section === "appearance") return <Appearance />;
   if (section === "notifications") return <Notifications />;
   if (section === "claude") return <ClaudeSettings />;
+  if (section === "budget") return <BudgetSettings />;
   if (section === "environment") return <Environment />;
   if (section === "mcp") return <GlobalMcp />;
   if (section === "skills") return <GlobalSkills />;

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

@@ -4,6 +4,7 @@ import { Clock, MessageSquare, Cpu, DollarSign } from "lucide-react";
 import type { SessionSummary, SessionPreview, SessionListMessage, SessionCreatedMessage, SessionPreviewMessage } from "@lattice/shared";
 import type { ServerMessage } from "@lattice/shared";
 import { useWebSocket } from "../../hooks/useWebSocket";
+import { useTimeTick } from "../../hooks/useTimeTick";
 import { markSessionHasUpdates, sessionHasUpdates, markSessionRead } from "../../stores/session";
 import { formatSessionTitle } from "../../utils/formatSessionTitle";
 
@@ -65,12 +66,18 @@ interface ContextMenu {
   session: SessionSummary;
 }
 
+export interface DateRange {
+  from?: number;
+  to?: number;
+}
+
 interface SessionListProps {
   projectSlug: string | null;
   activeSessionId: string | null;
   onSessionActivate: (session: SessionSummary) => void;
   onSessionDeactivate?: () => void;
   filter?: string;
+  dateRange?: DateRange;
 }
 
 function formatDate(ts: number): string {
@@ -169,6 +176,7 @@ function PreviewPopover(props: { preview: SessionPreview | null; anchorRect: DOM
 }
 
 export function SessionList(props: SessionListProps) {
+  useTimeTick();
   var ws = useWebSocket();
   var [sessions, setSessions] = useState<SessionSummary[]>([]);
   var [loading, setLoading] = useState<boolean>(false);
@@ -196,14 +204,14 @@ export function SessionList(props: SessionListProps) {
       if (msg.type === "session:list") {
         var listMsg = msg as SessionListMessage;
         if (listMsg.projectSlug === props.projectSlug) {
-          var incoming = listMsg.sessions.slice().sort(function (a, b) { return b.updatedAt - a.updatedAt; });
+          var incoming = listMsg.sessions.slice().sort(function (a: typeof listMsg.sessions[number], b: typeof listMsg.sessions[number]) { return b.updatedAt - a.updatedAt; });
           var listOffset = listMsg.offset || 0;
           var listTotal = listMsg.totalCount || incoming.length;
 
           if (listOffset > 0) {
             setSessions(function (prev) {
-              var existingIds = new Set(prev.map(function (s) { return s.id; }));
-              var newSessions = incoming.filter(function (s) { return !existingIds.has(s.id); });
+              var existingIds = new Set(prev.map(function (s: typeof prev[number]) { return s.id; }));
+              var newSessions = incoming.filter(function (s: typeof incoming[number]) { return !existingIds.has(s.id); });
               return prev.concat(newSessions);
             });
             setLoadingMore(false);
@@ -220,9 +228,9 @@ export function SessionList(props: SessionListProps) {
             }
             setSessions(function (existing) {
               if (existing.length <= PAGE_SIZE) return incoming;
-              var incomingIds = new Set(incoming.map(function (s) { return s.id; }));
-              var kept = existing.filter(function (s) { return !incomingIds.has(s.id); });
-              return incoming.concat(kept).sort(function (a, b) { return b.updatedAt - a.updatedAt; });
+              var incomingIds = new Set(incoming.map(function (s: typeof incoming[number]) { return s.id; }));
+              var kept = existing.filter(function (s: typeof existing[number]) { return !incomingIds.has(s.id); });
+              return incoming.concat(kept).sort(function (a: typeof incoming[number], b: typeof incoming[number]) { return b.updatedAt - a.updatedAt; });
             });
             setLoading(false);
             if (hadChanges) {
@@ -422,13 +430,26 @@ export function SessionList(props: SessionListProps) {
   }
 
   var grouped = useMemo(function () {
-    var displayed = props.filter
-      ? sessions.filter(function (s) {
-          return s.title.toLowerCase().includes(props.filter!.toLowerCase());
-        })
-      : sessions;
+    var displayed = sessions;
+    if (props.filter) {
+      var term = props.filter.toLowerCase();
+      displayed = displayed.filter(function (s) {
+        return s.title.toLowerCase().includes(term);
+      });
+    }
+    if (props.dateRange) {
+      var from = props.dateRange.from;
+      var to = props.dateRange.to;
+      if (from !== undefined || to !== undefined) {
+        displayed = displayed.filter(function (s) {
+          if (from !== undefined && s.updatedAt < from) return false;
+          if (to !== undefined && s.updatedAt > to) return false;
+          return true;
+        });
+      }
+    }
     return groupByTime(displayed);
-  }, [sessions, props.filter]);
+  }, [sessions, props.filter, props.dateRange]);
 
   if (!props.projectSlug) {
     return (

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

@@ -1,4 +1,4 @@
-import { ArrowLeft, Palette, FileText, Terminal, Plug, Puzzle, Network, Settings, ScrollText, Shield, Brain, MonitorCog, Bell } from "lucide-react";
+import { ArrowLeft, Palette, FileText, Terminal, Plug, Puzzle, Network, Settings, ScrollText, Shield, Brain, MonitorCog, Bell, Wallet } from "lucide-react";
 import { useSidebar } from "../../hooks/useSidebar";
 import type { SettingsSection, ProjectSettingsSection } from "../../stores/sidebar";
 
@@ -14,6 +14,7 @@ var SETTINGS_NAV = [
       { id: "appearance" as SettingsSection, label: "Appearance", icon: <Palette size={14} /> },
       { id: "notifications" as SettingsSection, label: "Notifications", icon: <Bell size={14} /> },
       { id: "claude" as SettingsSection, label: "Claude Settings", icon: <FileText size={14} /> },
+      { id: "budget" as SettingsSection, label: "Budget", icon: <Wallet size={14} /> },
       { id: "environment" as SettingsSection, label: "Environment", icon: <Terminal size={14} /> },
       { id: "editor" as SettingsSection, label: "Editor", icon: <MonitorCog size={14} /> },
     ],