@cryptiklemur/lattice 1.15.0 → 1.16.0

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/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} /> },
     ],

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

@@ -1,7 +1,8 @@
 import { useState, useEffect, useRef } from "react";
-import { Plus, ChevronDown, Search, LayoutDashboard, FolderOpen, TerminalSquare, StickyNote, Calendar, BarChart3 } from "lucide-react";
+import { Plus, ChevronDown, Search, LayoutDashboard, FolderOpen, TerminalSquare, StickyNote, Calendar, BarChart3, Bookmark } from "lucide-react";
 import { LatticeLogomark } from "../ui/LatticeLogomark";
 import type { SessionSummary, ServerMessage, SettingsDataMessage } from "@lattice/shared";
+import type { DateRange } from "./SessionList";
 import { useProjects } from "../../hooks/useProjects";
 import { useMesh } from "../../hooks/useMesh";
 import { useWebSocket } from "../../hooks/useWebSocket";
@@ -9,7 +10,7 @@ import { useSidebar } from "../../hooks/useSidebar";
 import { useSession } from "../../hooks/useSession";
 import { clearSession } from "../../stores/session";
 import { useOnline } from "../../hooks/useOnline";
-import { openTab } from "../../stores/workspace";
+import { openTab, openSessionTab } from "../../stores/workspace";
 import { getSidebarStore, goToAnalytics } from "../../stores/sidebar";
 import { ProjectRail } from "./ProjectRail";
 import { SessionList } from "./SessionList";
@@ -19,6 +20,146 @@ import { SearchFilter } from "./SearchFilter";
 import { ProjectDropdown } from "./ProjectDropdown";
 import { SettingsSidebar } from "./SettingsSidebar";
 
+type DatePreset = "all" | "today" | "yesterday" | "week" | "month" | "custom";
+
+var DATE_PRESET_LABELS: Record<DatePreset, string> = {
+  all: "All time",
+  today: "Today",
+  yesterday: "Yesterday",
+  week: "This week",
+  month: "This month",
+  custom: "Custom",
+};
+
+function computeDateRange(preset: DatePreset, customFrom?: string, customTo?: string): DateRange {
+  if (preset === "all") return {};
+  var now = new Date();
+  var todayStart = new Date(now);
+  todayStart.setHours(0, 0, 0, 0);
+
+  if (preset === "today") {
+    return { from: todayStart.getTime() };
+  }
+  if (preset === "yesterday") {
+    var yesterdayStart = new Date(todayStart);
+    yesterdayStart.setDate(yesterdayStart.getDate() - 1);
+    return { from: yesterdayStart.getTime(), to: todayStart.getTime() };
+  }
+  if (preset === "week") {
+    var weekStart = new Date(todayStart);
+    weekStart.setDate(weekStart.getDate() - weekStart.getDay());
+    return { from: weekStart.getTime() };
+  }
+  if (preset === "month") {
+    var monthStart = new Date(todayStart.getFullYear(), todayStart.getMonth(), 1);
+    return { from: monthStart.getTime() };
+  }
+  if (preset === "custom") {
+    var range: DateRange = {};
+    if (customFrom) {
+      range.from = new Date(customFrom + "T00:00:00").getTime();
+    }
+    if (customTo) {
+      var toDate = new Date(customTo + "T23:59:59");
+      range.to = toDate.getTime() + 999;
+    }
+    return range;
+  }
+  return {};
+}
+
+function DateRangeDropdown({ dateRange, onChange }: { dateRange: DateRange; onChange: (r: DateRange, preset: DatePreset) => void }) {
+  var [open, setOpen] = useState(false);
+  var [preset, setPreset] = useState<DatePreset>("all");
+  var [customFrom, setCustomFrom] = useState("");
+  var [customTo, setCustomTo] = useState("");
+  var dropdownRef = useRef<HTMLDivElement>(null);
+
+  useEffect(function () {
+    if (!open) return;
+    function dismiss(e: MouseEvent) {
+      if (dropdownRef.current && !dropdownRef.current.contains(e.target as Node)) {
+        setOpen(false);
+      }
+    }
+    document.addEventListener("mousedown", dismiss);
+    return function () { document.removeEventListener("mousedown", dismiss); };
+  }, [open]);
+
+  function handlePreset(p: DatePreset) {
+    setPreset(p);
+    if (p !== "custom") {
+      onChange(computeDateRange(p), p);
+      setOpen(false);
+    }
+  }
+
+  function handleCustomApply() {
+    onChange(computeDateRange("custom", customFrom, customTo), "custom");
+    setOpen(false);
+  }
+
+  var hasFilter = preset !== "all";
+
+  return (
+    <div ref={dropdownRef} className="relative">
+      <button
+        type="button"
+        onClick={function () { setOpen(function (v) { return !v; }); }}
+        className={"btn btn-ghost btn-xs btn-square " + (hasFilter ? "text-primary" : "text-base-content/40 hover:text-base-content")}
+        aria-label="Filter by date"
+        title={DATE_PRESET_LABELS[preset]}
+      >
+        <Calendar size={13} />
+      </button>
+      {open && (
+        <div className="absolute top-full right-0 mt-1 z-[9999] bg-base-300 border border-base-content/15 rounded-lg shadow-xl min-w-[180px] py-1">
+          {(["all", "today", "yesterday", "week", "month", "custom"] as DatePreset[]).map(function (p) {
+            return (
+              <button
+                key={p}
+                type="button"
+                onClick={function () { handlePreset(p); }}
+                className={
+                  "block w-full text-left px-3 py-1.5 text-[12px] transition-colors duration-75 " +
+                  (preset === p ? "text-primary bg-primary/10" : "text-base-content/70 hover:bg-base-content/5 hover:text-base-content")
+                }
+              >
+                {DATE_PRESET_LABELS[p]}
+              </button>
+            );
+          })}
+          {preset === "custom" && (
+            <div className="px-3 py-2 border-t border-base-content/10 flex flex-col gap-1.5">
+              <label className="text-[10px] text-base-content/40 uppercase tracking-wider">From</label>
+              <input
+                type="date"
+                value={customFrom}
+                onChange={function (e) { setCustomFrom(e.target.value); }}
+                className="h-7 px-2 bg-base-200 border border-base-content/15 rounded text-base-content text-[12px] focus:border-primary focus-visible:outline-none transition-colors [color-scheme:dark]"
+              />
+              <label className="text-[10px] text-base-content/40 uppercase tracking-wider">To</label>
+              <input
+                type="date"
+                value={customTo}
+                onChange={function (e) { setCustomTo(e.target.value); }}
+                className="h-7 px-2 bg-base-200 border border-base-content/15 rounded text-base-content text-[12px] focus:border-primary focus-visible:outline-none transition-colors [color-scheme:dark]"
+              />
+              <button
+                type="button"
+                onClick={handleCustomApply}
+                className="btn btn-xs btn-primary mt-1"
+              >
+                Apply
+              </button>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
 function SectionLabel({ label, actions }: { label: string; actions?: React.ReactNode }) {
   return (
     <div className="px-4 pt-4 pb-2 flex items-center justify-between flex-shrink-0 select-none">
@@ -43,6 +184,7 @@ export function Sidebar({ onSessionSelect }: { onSessionSelect?: () => void }) {
   var session = useSession();
   var [sessionSearch, setSessionSearch] = useState<string>("");
   var [sessionSearchOpen, setSessionSearchOpen] = useState<boolean>(false);
+  var [sessionDateRange, setSessionDateRange] = useState<DateRange>({});
   var userIslandRef = useRef<HTMLElement | null>(null);
   var projectHeaderRef = useRef<HTMLElement | null>(null);
 
@@ -72,6 +214,7 @@ export function Sidebar({ onSessionSelect }: { onSessionSelect?: () => void }) {
     if (!sidebar.activeProjectSlug || !sidebar.activeSessionId) return;
     if (!activeProject) return;
     initialActivatedRef.current = true;
+    openSessionTab(sidebar.activeSessionId, sidebar.activeProjectSlug, "Session");
     session.activateSession(sidebar.activeProjectSlug, sidebar.activeSessionId);
   }, [sidebar.activeProjectSlug, sidebar.activeSessionId, activeProject]);
 
@@ -79,6 +222,7 @@ export function Sidebar({ onSessionSelect }: { onSessionSelect?: () => void }) {
 
   function handleSessionActivate(s: SessionSummary) {
     if (activeProject) {
+      openSessionTab(s.id, activeProject.slug, s.title);
       session.activateSession(activeProject.slug, s.id);
     }
     sidebar.closeMenus();
@@ -154,6 +298,7 @@ export function Sidebar({ onSessionSelect }: { onSessionSelect?: () => void }) {
                     { type: "terminal" as const, icon: TerminalSquare, label: "Terminal" },
                     { type: "notes" as const, icon: StickyNote, label: "Notes" },
                     { type: "tasks" as const, icon: Calendar, label: "Tasks" },
+                    { type: "bookmarks" as const, icon: Bookmark, label: "Bookmarks" },
                   ].map(function (item) {
                     return (
                       <button
@@ -192,6 +337,10 @@ export function Sidebar({ onSessionSelect }: { onSessionSelect?: () => void }) {
                       <button onClick={function () { setSessionSearchOpen(function (v) { return !v; }); }} className="btn btn-ghost btn-xs btn-square text-base-content/40 hover:text-base-content" aria-label="Search sessions">
                         <Search size={13} />
                       </button>
+                      <DateRangeDropdown
+                        dateRange={sessionDateRange}
+                        onChange={function (r) { setSessionDateRange(r); }}
+                      />
                       <button onClick={handleNewSession} disabled={!online} className="btn btn-ghost btn-xs btn-square text-base-content/40 hover:text-base-content" aria-label="New session">
                         <Plus size={13} />
                       </button>
@@ -212,6 +361,7 @@ export function Sidebar({ onSessionSelect }: { onSessionSelect?: () => void }) {
                   onSessionActivate={handleSessionActivate}
                   onSessionDeactivate={clearSession}
                   filter={sessionSearch}
+                  dateRange={sessionDateRange}
                 />
               </>
             )}

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

@@ -1,7 +1,10 @@
+import { useState } from "react";
 import { Sun, Moon, Settings, Download } from "lucide-react";
+import { useStore } from "@tanstack/react-store";
 import { useTheme } from "../../hooks/useTheme";
 import { useSidebar } from "../../hooks/useSidebar";
 import { useInstallPrompt } from "../../hooks/useInstallPrompt";
+import { getSessionStore } from "../../stores/session";
 import pkg from "../../../package.json";
 
 interface UserIslandProps {
@@ -13,57 +16,93 @@ export function UserIsland(props: UserIslandProps) {
   var { mode, toggleMode } = useTheme();
   var sidebar = useSidebar();
   var { canInstall, install } = useInstallPrompt();
+  var budgetStatus = useStore(getSessionStore(), function (s) { return s.budgetStatus; });
+  var [showTooltip, setShowTooltip] = useState(false);
 
   var initial = props.nodeName.charAt(0).toUpperCase();
 
+  var budgetBar = null;
+  if (budgetStatus && budgetStatus.dailyLimit > 0) {
+    var pct = Math.min((budgetStatus.dailySpend / budgetStatus.dailyLimit) * 100, 100);
+    var remaining = Math.max(budgetStatus.dailyLimit - budgetStatus.dailySpend, 0);
+    var barColor = pct >= 100
+      ? "bg-error"
+      : pct >= 80
+        ? "bg-warning"
+        : "bg-primary";
+
+    budgetBar = (
+      <div
+        className="px-3 pt-2 pb-0 relative"
+        onMouseEnter={function () { setShowTooltip(true); }}
+        onMouseLeave={function () { setShowTooltip(false); }}
+      >
+        <div className="h-1.5 rounded-full bg-base-content/8 overflow-hidden">
+          <div
+            className={"h-full rounded-full transition-all duration-300 " + barColor}
+            style={{ width: pct + "%" }}
+          />
+        </div>
+        {showTooltip && (
+          <div className="absolute bottom-full left-3 right-3 mb-1.5 px-2.5 py-1.5 bg-base-100 border border-base-content/10 rounded-lg shadow-lg z-50 text-[11px] font-mono text-base-content/70 whitespace-nowrap">
+            <div>Daily spend: ${budgetStatus.dailySpend.toFixed(2)} / ${budgetStatus.dailyLimit.toFixed(2)}</div>
+            <div className="text-base-content/40">Remaining: ${remaining.toFixed(2)}</div>
+          </div>
+        )}
+      </div>
+    );
+  }
+
   return (
     <div
       role="group"
       aria-label="User controls"
-      className="flex items-center gap-2 px-3 py-2"
     >
-      <button
-        onClick={props.onClick}
-        className="flex items-center gap-2 flex-1 min-w-0 rounded-lg px-1 py-1 -mx-1 hover:bg-base-content/5 transition-colors duration-[120ms] cursor-pointer"
-        aria-label="Node info"
-      >
-        <div className="w-7 h-7 rounded-full bg-primary text-primary-content text-[12px] font-bold flex items-center justify-center flex-shrink-0">
-          {initial}
-        </div>
-        <div className="flex-1 min-w-0 text-left">
-          <div className="text-[13px] font-semibold text-base-content truncate">
-            {props.nodeName}
+      {budgetBar}
+      <div className="flex items-center gap-2 px-3 py-2">
+        <button
+          onClick={props.onClick}
+          className="flex items-center gap-2 flex-1 min-w-0 rounded-lg px-1 py-1 -mx-1 hover:bg-base-content/5 transition-colors duration-[120ms] cursor-pointer"
+          aria-label="Node info"
+        >
+          <div className="w-7 h-7 rounded-full bg-primary text-primary-content text-[12px] font-bold flex items-center justify-center flex-shrink-0">
+            {initial}
           </div>
-          <div className="text-[10px] text-base-content/30 font-mono">
-            {"v" + pkg.version}
+          <div className="flex-1 min-w-0 text-left">
+            <div className="text-[13px] font-semibold text-base-content truncate">
+              {props.nodeName}
+            </div>
+            <div className="text-[10px] text-base-content/30 font-mono">
+              {"v" + pkg.version}
+            </div>
           </div>
-        </div>
-      </button>
+        </button>
 
-      <div className="flex items-center gap-0.5 flex-shrink-0">
-        {canInstall && (
+        <div className="flex items-center gap-0.5 flex-shrink-0">
+          {canInstall && (
+            <button
+              aria-label="Install Lattice"
+              onClick={install}
+              className="btn btn-ghost btn-xs btn-square text-primary/60 hover:text-primary transition-colors"
+            >
+              <Download size={14} />
+            </button>
+          )}
           <button
-            aria-label="Install Lattice"
-            onClick={install}
-            className="btn btn-ghost btn-xs btn-square text-primary/60 hover:text-primary transition-colors"
+            aria-label={mode === "dark" ? "Switch to light mode" : "Switch to dark mode"}
+            onClick={function (e) { e.stopPropagation(); toggleMode(); }}
+            className="btn btn-ghost btn-xs btn-square text-base-content/30 hover:text-base-content transition-colors"
           >
-            <Download size={14} />
+            {mode === "dark" ? <Sun size={14} /> : <Moon size={14} />}
           </button>
-        )}
-        <button
-          aria-label={mode === "dark" ? "Switch to light mode" : "Switch to dark mode"}
-          onClick={function (e) { e.stopPropagation(); toggleMode(); }}
-          className="btn btn-ghost btn-xs btn-square text-base-content/30 hover:text-base-content transition-colors"
-        >
-          {mode === "dark" ? <Sun size={14} /> : <Moon size={14} />}
-        </button>
-        <button
-          aria-label="Global settings"
-          onClick={function () { sidebar.openSettings("appearance"); }}
-          className="btn btn-ghost btn-xs btn-square text-base-content/30 hover:text-base-content transition-colors"
-        >
-          <Settings size={14} />
-        </button>
+          <button
+            aria-label="Global settings"
+            onClick={function () { sidebar.openSettings("appearance"); }}
+            className="btn btn-ghost btn-xs btn-square text-base-content/30 hover:text-base-content transition-colors"
+          >
+            <Settings size={14} />
+          </button>
+        </div>
       </div>
     </div>
   );