@cryptiklemur/lattice 1.46.7 → 1.47.0

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

@@ -1,7 +1,6 @@
 import { useEffect, useRef, useCallback, useState, useMemo } from "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";
@@ -23,7 +22,7 @@ import { useBookmarks } from "../../hooks/useBookmarks";
 import { formatSessionTitle } from "../../utils/formatSessionTitle";
 
 export function ChatView({ sessionId: tabSessionId, projectSlug: tabProjectSlug }: { sessionId?: string; projectSlug?: string } = {}) {
-  var { messages, isProcessing, sendMessage, activeSessionId, activeSessionTitle, currentStatus, contextUsage, contextBreakdown, lastResponseCost, lastResponseDuration, historyLoading, historyHasMore, loadMoreHistory, wasInterrupted, promptSuggestion, failedInput, clearFailedInput, messageQueue, enqueueMessage, removeQueuedMessage, updateQueuedMessage, isBusy, busyOwner, isPlanMode, pendingPrefill, activateSession, budgetStatus, budgetExceeded, sendBudgetOverride, dismissBudgetExceeded } = useSession();
+  var { messages, isProcessing, sendMessage, activeSessionId, activeSessionTitle, currentStatus, contextUsage, contextBreakdown, lastResponseCost, lastResponseDuration, historyLoading, historyHasMore, loadMoreHistory, wasInterrupted, promptSuggestion, failedInput, clearFailedInput, messageQueue, enqueueMessage, removeQueuedMessage, updateQueuedMessage, isPlanMode, pendingPrefill, activateSession, budgetStatus, budgetExceeded, sendBudgetOverride, dismissBudgetExceeded } = useSession();
   var { activeProject } = useProjects();
   var { toggleDrawer } = useSidebar();
 
@@ -48,11 +47,7 @@ export function ChatView({ sessionId: tabSessionId, projectSlug: tabProjectSlug
   var [selectedModel, setSelectedModel] = useState<string>("default");
   var [selectedEffort, setSelectedEffort] = useState<string>("medium");
   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) {
@@ -967,70 +962,14 @@ export function ChatView({ sessionId: tabSessionId, projectSlug: tabProjectSlug
         </div>
       )}
 
-      {isBusy && !isProcessing && (
-        <div className="flex items-center gap-2 px-3 sm:px-5 py-2 bg-info/10 border-t border-info/20">
-          <Terminal size={13} className="text-info flex-shrink-0" />
-          <span className="text-[12px] text-info flex-1">
-            {busyOwner === "cli"
-              ? "This session is controlled by Claude Code CLI — input is disabled"
-              : "This session is in use by another Lattice client — input is disabled"}
-          </span>
-          <button
-            onClick={function () { setConfirmStopExternal(true); }}
-            className="btn btn-ghost btn-xs text-error/70 hover:text-error gap-1 flex-shrink-0"
-          >
-            <Square size={10} className="fill-current" />
-            End Process
-          </button>
-        </div>
-      )}
-
-      {confirmStopExternal && (
-        <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">
-              <h2 className="text-[15px] font-mono font-bold text-base-content">End External Process</h2>
-            </div>
-            <div className="px-5 py-4">
-              <p className="text-[13px] text-base-content/60 leading-relaxed">
-                This will send a graceful stop signal (SIGINT) to the Claude Code CLI process controlling this session. The process will finish its current operation and exit.
-              </p>
-              <p className="text-[13px] text-warning mt-2 leading-relaxed">
-                Any in-progress work may be interrupted.
-              </p>
-            </div>
-            <div className="px-5 py-3 border-t border-base-content/15 flex justify-end gap-2">
-              <button
-                onClick={function () { setConfirmStopExternal(false); }}
-                className="btn btn-ghost btn-sm text-[12px]"
-              >
-                Cancel
-              </button>
-              <button
-                onClick={function () {
-                  if (activeSessionId) {
-                    ws.send({ type: "session:stop_external", sessionId: activeSessionId } as any);
-                  }
-                  setConfirmStopExternal(false);
-                }}
-                className="btn btn-error btn-sm text-[12px]"
-              >
-                End Process
-              </button>
-            </div>
-          </div>
-        </div>
-      )}
-
-      {wasInterrupted && !isProcessing && !isBusy && (
+      {wasInterrupted && !isProcessing && (
         <div className="flex items-center gap-2 px-3 sm:px-5 py-2 bg-warning/10 border-t border-warning/20">
           <AlertTriangle size={13} className="text-warning flex-shrink-0" />
           <span className="text-[12px] text-warning">Session was interrupted — send a message to continue</span>
         </div>
       )}
 
-      {promptSuggestion && !isProcessing && !isBusy && (
+      {promptSuggestion && !isProcessing && (
         <div className="flex-shrink-0 px-2 sm:px-4 py-2">
           <div className="flex items-center gap-1.5 max-w-full">
             <button
@@ -1079,15 +1018,11 @@ export function ChatView({ sessionId: tabSessionId, projectSlug: tabProjectSlug
         <ChatInput
           sessionId={activeSessionId}
           onSend={handleSend}
-          disabled={!activeSessionId || !online || isBusy || (budgetStatus !== null && budgetStatus.enforcement === "hard-block" && budgetStatus.dailySpend >= budgetStatus.dailyLimit)}
+          disabled={!activeSessionId || !online || (budgetStatus !== null && budgetStatus.enforcement === "hard-block" && budgetStatus.dailySpend >= budgetStatus.dailyLimit)}
           disabledPlaceholder={
-            isBusy
-              ? (busyOwner === "cli"
-                ? "Controlled by Claude Code CLI"
-                : "Session in use by another Lattice client")
-              : (budgetStatus !== null && budgetStatus.enforcement === "hard-block" && budgetStatus.dailySpend >= budgetStatus.dailyLimit)
-                ? "Daily budget exceeded ($" + budgetStatus.dailySpend.toFixed(2) + " / $" + budgetStatus.dailyLimit.toFixed(2) + ")"
-                : undefined
+            (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}

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

@@ -0,0 +1,235 @@
+import { useState } from "react";
+import { Globe, FormInput, Check, X, ExternalLink } from "lucide-react";
+import { useWebSocket } from "../../hooks/useWebSocket";
+
+interface ElicitationCardProps {
+  requestId: string;
+  serverName: string;
+  message: string;
+  mode: "form" | "url";
+  url?: string | null;
+  requestedSchema?: Record<string, unknown> | null;
+  resolved?: boolean;
+  resolvedAction?: "accept" | "decline";
+}
+
+interface SchemaProperty {
+  type?: string;
+  description?: string;
+  enum?: string[];
+  default?: unknown;
+}
+
+function renderFormField(
+  key: string,
+  prop: SchemaProperty,
+  value: unknown,
+  onChange: (key: string, val: unknown) => void,
+  required: boolean,
+) {
+  var label = key.replace(/_/g, " ").replace(/\b\w/g, function (c) { return c.toUpperCase(); });
+
+  if (prop.type === "boolean") {
+    return (
+      <label key={key} className="flex items-center gap-2.5 py-1.5 cursor-pointer">
+        <input
+          type="checkbox"
+          checked={!!value}
+          onChange={function (e) { onChange(key, e.target.checked); }}
+          className="checkbox checkbox-xs checkbox-primary"
+        />
+        <span className="text-[12px] text-base-content/70">{label}</span>
+        {prop.description && (
+          <span className="text-[10px] text-base-content/30" title={prop.description}>?</span>
+        )}
+      </label>
+    );
+  }
+
+  if (prop.enum && prop.enum.length > 0) {
+    return (
+      <div key={key} className="flex flex-col gap-1">
+        <label className="text-[10px] font-mono uppercase tracking-wider text-base-content/35">
+          {label}{required && <span className="text-error/50 ml-0.5">*</span>}
+        </label>
+        <select
+          value={String(value || "")}
+          onChange={function (e) { onChange(key, e.target.value); }}
+          className="select select-xs select-bordered bg-base-content/[0.03] text-[12px] text-base-content/70"
+        >
+          <option value="">Select...</option>
+          {prop.enum.map(function (opt) {
+            return <option key={opt} value={opt}>{opt}</option>;
+          })}
+        </select>
+      </div>
+    );
+  }
+
+  if (prop.type === "number" || prop.type === "integer") {
+    return (
+      <div key={key} className="flex flex-col gap-1">
+        <label className="text-[10px] font-mono uppercase tracking-wider text-base-content/35">
+          {label}{required && <span className="text-error/50 ml-0.5">*</span>}
+        </label>
+        <input
+          type="number"
+          value={value != null ? String(value) : ""}
+          placeholder={prop.description || ""}
+          onChange={function (e) { onChange(key, e.target.value ? Number(e.target.value) : ""); }}
+          className="input input-xs input-bordered bg-base-content/[0.03] text-[12px] text-base-content/70 placeholder:text-base-content/20"
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div key={key} className="flex flex-col gap-1">
+      <label className="text-[10px] font-mono uppercase tracking-wider text-base-content/35">
+        {label}{required && <span className="text-error/50 ml-0.5">*</span>}
+      </label>
+      <input
+        type="text"
+        value={String(value || "")}
+        placeholder={prop.description || ""}
+        onChange={function (e) { onChange(key, e.target.value); }}
+        className="input input-xs input-bordered bg-base-content/[0.03] text-[12px] text-base-content/70 placeholder:text-base-content/20"
+      />
+    </div>
+  );
+}
+
+export function ElicitationCard(props: ElicitationCardProps) {
+  var { send } = useWebSocket();
+  var [formData, setFormData] = useState<Record<string, unknown>>({});
+  var [submitted, setSubmitted] = useState(props.resolved || false);
+  var [action, setAction] = useState<"accept" | "decline" | null>(props.resolvedAction || null);
+
+  function handleFieldChange(key: string, value: unknown) {
+    setFormData(function (prev) {
+      var next = { ...prev };
+      next[key] = value;
+      return next;
+    });
+  }
+
+  function handleSubmit(submitAction: "accept" | "decline") {
+    setSubmitted(true);
+    setAction(submitAction);
+    send({
+      type: "chat:elicitation_response",
+      requestId: props.requestId,
+      action: submitAction,
+      content: submitAction === "accept" ? formData : undefined,
+    } as any);
+  }
+
+  if (submitted) {
+    var isAccepted = action === "accept";
+    return (
+      <div className="ml-14 mr-5 py-0.5 max-w-[95%] sm:max-w-[75%]">
+        <div className={"rounded-lg text-[12px] border px-2.5 py-1.5 flex items-center gap-2 " + (isAccepted ? "border-success/15 bg-success/3" : "border-error/15 bg-error/3")}>
+          {isAccepted ? <Check size={12} className="text-success" /> : <X size={12} className="text-error" />}
+          <span className="text-base-content/35">{isAccepted ? "Submitted" : "Declined"}</span>
+          <Globe size={11} className="text-base-content/20" />
+          <span className="text-[11px] text-base-content/40">{props.serverName}</span>
+        </div>
+      </div>
+    );
+  }
+
+  var schema = props.requestedSchema;
+  var properties: Record<string, SchemaProperty> = {};
+  var requiredFields: string[] = [];
+  if (schema && typeof schema === "object") {
+    if (schema.properties && typeof schema.properties === "object") {
+      properties = schema.properties as Record<string, SchemaProperty>;
+    }
+    if (Array.isArray(schema.required)) {
+      requiredFields = schema.required as string[];
+    }
+  }
+  var hasFormFields = Object.keys(properties).length > 0;
+
+  return (
+    <div className="ml-14 mr-5 py-1 max-w-[95%] sm:max-w-[75%]">
+      <div className="border border-info/25 bg-info/5 rounded-lg overflow-hidden">
+        <div className="flex items-center gap-2.5 px-3.5 py-2.5 border-b border-base-content/5 bg-base-content/[0.02]">
+          {props.mode === "url"
+            ? <Globe size={14} className="text-info/50 flex-shrink-0" />
+            : <FormInput size={14} className="text-info/50 flex-shrink-0" />
+          }
+          <span className="text-[10px] font-mono font-bold uppercase tracking-widest text-info/40">
+            {props.serverName}
+          </span>
+          <span className="flex-1" />
+          <span className="text-[9px] font-mono text-base-content/20">{props.mode} input</span>
+        </div>
+
+        <div className="px-3.5 py-3">
+          {props.message && (
+            <div className="text-[13px] text-base-content/75 mb-3 leading-relaxed">{props.message}</div>
+          )}
+
+          {props.mode === "url" && props.url && (
+            <div className="flex flex-col gap-2">
+              <a
+                href={props.url}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="flex items-center gap-2 px-3 py-2 rounded-lg bg-base-content/[0.04] border border-base-content/8 text-[12px] text-info/70 hover:bg-base-content/[0.07] hover:border-info/20 transition-colors"
+              >
+                <ExternalLink size={12} />
+                <span className="truncate flex-1">{props.url}</span>
+              </a>
+            </div>
+          )}
+
+          {props.mode === "form" && hasFormFields && (
+            <div className="flex flex-col gap-2.5">
+              {Object.entries(properties).map(function ([key, prop]) {
+                return renderFormField(
+                  key,
+                  prop,
+                  formData[key],
+                  handleFieldChange,
+                  requiredFields.includes(key),
+                );
+              })}
+            </div>
+          )}
+
+          {props.mode === "form" && !hasFormFields && (
+            <div className="flex flex-col gap-1.5">
+              <label className="text-[10px] font-mono uppercase tracking-wider text-base-content/35">Response</label>
+              <textarea
+                rows={3}
+                value={String(formData._raw || "")}
+                onChange={function (e) { handleFieldChange("_raw", e.target.value); }}
+                placeholder="Enter your response..."
+                className="textarea textarea-bordered textarea-xs bg-base-content/[0.03] text-[12px] text-base-content/70 placeholder:text-base-content/20"
+              />
+            </div>
+          )}
+
+          <div className="flex items-center gap-2 mt-3">
+            <button
+              onClick={function () { handleSubmit("accept"); }}
+              className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-success/15 text-success text-[11px] font-medium hover:bg-success/25 transition-colors cursor-pointer"
+            >
+              <Check size={11} />
+              {props.mode === "url" ? "Done" : "Submit"}
+            </button>
+            <button
+              onClick={function () { handleSubmit("decline"); }}
+              className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-base-content/5 text-base-content/40 text-[11px] font-medium hover:bg-base-content/10 hover:text-base-content/60 transition-colors cursor-pointer"
+            >
+              <X size={11} />
+              Decline
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -11,6 +11,7 @@ import { ToolResultRenderer } from "./ToolResultRenderer";
 import { formatToolSummary } from "./toolSummary";
 import { PromptQuestion } from "./PromptQuestion";
 import { TodoCard } from "./TodoCard";
+import { ElicitationCard } from "./ElicitationCard";
 
 function TableWrapper(props: React.HTMLAttributes<HTMLTableElement>) {
   var wrapperRef = useRef<HTMLDivElement>(null);
@@ -567,5 +568,20 @@ export var Message = memo(function Message(props: MessageProps) {
     return <TodoCard message={msg} />;
   }
 
+  if (msg.type === "elicitation") {
+    return (
+      <ElicitationCard
+        requestId={msg.toolId || ""}
+        serverName={msg.elicitationServerName || "MCP Server"}
+        message={msg.elicitationMessage || ""}
+        mode={msg.elicitationMode || "form"}
+        url={msg.elicitationUrl}
+        requestedSchema={msg.elicitationSchema}
+        resolved={msg.elicitationStatus !== "pending"}
+        resolvedAction={msg.elicitationStatus === "accepted" ? "accept" : msg.elicitationStatus === "declined" ? "decline" : undefined}
+      />
+    );
+  }
+
   return null;
 });

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

@@ -3,7 +3,7 @@ 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 { getSessionStore, setBudgetStatus } from "../../stores/session";
 import type { ServerMessage, SettingsDataMessage, SettingsUpdateMessage } from "@lattice/shared";
 
 var ENFORCEMENT_OPTIONS = [
@@ -28,6 +28,9 @@ export function BudgetSettings() {
 
       if (save.savingRef.current) {
         save.confirmSave();
+        if (!cfg.costBudget) {
+          setBudgetStatus(null);
+        }
       } else {
         if (cfg.costBudget) {
           setEnabled(true);
@@ -37,6 +40,7 @@ export function BudgetSettings() {
           setEnabled(false);
           setDailyLimit(10);
           setEnforcement("warning");
+          setBudgetStatus(null);
         }
         save.resetFromServer();
       }
@@ -55,7 +59,7 @@ export function BudgetSettings() {
     var updateMsg: SettingsUpdateMessage = {
       type: "settings:update",
       settings: {
-        costBudget: enabled ? { dailyLimit: dailyLimit, enforcement: enforcement as "warning" | "soft-block" | "hard-block" } : undefined,
+        costBudget: enabled ? { dailyLimit: dailyLimit, enforcement: enforcement as "warning" | "soft-block" | "hard-block" } : null,
       } as SettingsUpdateMessage["settings"],
     };
     send(updateMsg);

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

@@ -1,11 +1,12 @@
-import { useState, useEffect } from "react";
-import { Sun, Moon, Settings, Download, ArrowUpCircle } from "lucide-react";
+import { useState, useEffect, useMemo } from "react";
+import { Sun, Moon, Settings, Download, ArrowUpCircle, Clock } 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 { useWebSocket } from "../../hooks/useWebSocket";
-import { getSessionStore } from "../../stores/session";
+import { getSessionStore, loadCachedRateLimits } from "../../stores/session";
+import type { RateLimitEntry } from "../../stores/session";
 import pkg from "../../../package.json";
 import type { ServerMessage } from "@lattice/shared";
 
@@ -14,17 +15,59 @@ interface UserIslandProps {
   onClick: () => void;
 }
 
+function formatResetTime(epochSeconds: number): string {
+  var now = Date.now();
+  var diff = (epochSeconds * 1000) - now;
+  if (diff <= 0) return "now";
+  var hours = Math.floor(diff / 3600000);
+  var minutes = Math.floor((diff % 3600000) / 60000);
+  if (hours > 24) {
+    var days = Math.floor(hours / 24);
+    return days + "d " + (hours % 24) + "h";
+  }
+  if (hours > 0) return hours + "h " + minutes + "m";
+  if (minutes === 0) return "<1m";
+  return minutes + "m";
+}
+
+function getRateLimitLabel(type: string): string {
+  if (type === "five_hour") return "5-hour";
+  if (type === "seven_day") return "7-day";
+  if (type === "seven_day_opus") return "7-day Opus";
+  if (type === "seven_day_sonnet") return "7-day Sonnet";
+  if (type === "overage") return "Overage";
+  return type;
+}
+
+function getBarColor(entry: RateLimitEntry): string {
+  if (entry.status === "rejected") return "bg-error";
+  if (entry.status === "allowed_warning") return "bg-warning";
+  var util = entry.utilization ?? 0;
+  if (util >= 0.9) return "bg-error";
+  if (util >= 0.7) return "bg-warning";
+  return "bg-primary/60";
+}
+
+function getStatusColor(entry: RateLimitEntry): string {
+  if (entry.status === "rejected") return "text-error";
+  if (entry.status === "allowed_warning") return "text-warning";
+  return "text-base-content/70";
+}
+
 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 rateLimits = useStore(getSessionStore(), function (s) { return s.rateLimits; });
   var [showTooltip, setShowTooltip] = useState(false);
   var ws = useWebSocket();
   var [updateAvailable, setUpdateAvailable] = useState(false);
   var [latestVersion, setLatestVersion] = useState<string | null>(null);
   var [currentVersion, setCurrentVersion] = useState(pkg.version);
 
+  useEffect(function () { loadCachedRateLimits(); }, []);
+
   useEffect(function () {
     function handleUpdateStatus(msg: ServerMessage) {
       if (msg.type !== "update:status") return;
@@ -40,34 +83,117 @@ export function UserIsland(props: UserIslandProps) {
     return function () { ws.unsubscribe("update:status", handleUpdateStatus); };
   }, []);
 
+  var entries = useMemo(function () {
+    var all = Object.values(rateLimits);
+    all.sort(function (a, b) {
+      var order: Record<string, number> = { five_hour: 0, seven_day: 1, seven_day_opus: 2, seven_day_sonnet: 3, overage: 4 };
+      return (order[a.rateLimitType] ?? 9) - (order[b.rateLimitType] ?? 9);
+    });
+    return all;
+  }, [rateLimits]);
+
+  var primaryEntry = entries.length > 0 ? entries[0] : null;
+
   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";
+    var barColor = pct >= 100 ? "bg-error" : pct >= 80 ? "bg-warning" : "bg-primary";
 
     budgetBar = (
+      <div className="px-3 pt-2 pb-0">
+        <div className="flex items-center justify-between mb-0.5">
+          <span className="text-[9px] font-mono uppercase tracking-wider text-base-content/25">Budget</span>
+          <span className="text-[9px] font-mono tabular-nums text-base-content/30">${remaining.toFixed(2)} left</span>
+        </div>
+        <div className="h-1 rounded-full bg-base-content/8 overflow-hidden">
+          <div
+            className={"h-full rounded-full transition-all duration-300 " + barColor}
+            style={{ width: pct + "%" }}
+          />
+        </div>
+      </div>
+    );
+  }
+
+  var usageBar = null;
+  if (primaryEntry) {
+    var utilPct = Math.min(100, Math.round((primaryEntry.utilization ?? 0) * 100));
+
+    usageBar = (
       <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="flex items-center justify-between mb-0.5">
+          <span className="text-[9px] font-mono uppercase tracking-wider text-base-content/25">
+            {getRateLimitLabel(primaryEntry.rateLimitType)} usage
+          </span>
+          <span className={"text-[9px] font-mono tabular-nums " + getStatusColor(primaryEntry)}>
+            {utilPct}%
+          </span>
+        </div>
+        <div className="h-1 rounded-full bg-base-content/8 overflow-hidden">
           <div
-            className={"h-full rounded-full transition-all duration-300 " + barColor}
-            style={{ width: pct + "%" }}
+            className={"h-full rounded-full transition-all duration-300 " + getBarColor(primaryEntry)}
+            style={{ width: utilPct + "%" }}
           />
         </div>
+        {primaryEntry.resetsAt && (
+          <div className="flex items-center gap-1 mt-0.5">
+            <Clock size={7} className="text-base-content/20" />
+            <span className="text-[8px] font-mono text-base-content/20">
+              resets in {formatResetTime(primaryEntry.resetsAt)}
+            </span>
+          </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 className="absolute bottom-full left-2 right-2 mb-2 p-2.5 bg-base-100 border border-base-content/10 rounded-lg shadow-xl z-[9999] text-[11px] font-mono">
+            <div className="text-[10px] uppercase tracking-widest text-base-content/30 font-bold mb-2">Usage Limits</div>
+            <div className="flex flex-col gap-2.5">
+              {entries.map(function (entry) {
+                var pctVal = Math.min(100, Math.round((entry.utilization ?? 0) * 100));
+                return (
+                  <div key={entry.rateLimitType}>
+                    <div className="flex items-center justify-between mb-0.5">
+                      <span className="text-base-content/50">{getRateLimitLabel(entry.rateLimitType)}</span>
+                      <span className={"tabular-nums " + getStatusColor(entry)}>
+                        {pctVal}%
+                      </span>
+                    </div>
+                    <div className="h-1.5 rounded-full bg-base-content/8 overflow-hidden">
+                      <div
+                        className={"h-full rounded-full transition-all duration-300 " + getBarColor(entry)}
+                        style={{ width: pctVal + "%" }}
+                      />
+                    </div>
+                    {entry.resetsAt && (
+                      <div className="flex items-center gap-1 mt-0.5 text-[10px] text-base-content/30">
+                        <Clock size={8} />
+                        resets in {formatResetTime(entry.resetsAt)}
+                      </div>
+                    )}
+                  </div>
+                );
+              })}
+
+              {entries.some(function (e) { return e.isUsingOverage; }) && (
+                <div className="border-t border-base-content/8 pt-2">
+                  <div className="flex items-center gap-1.5 text-[10px] text-warning/70">
+                    <span>Overage active</span>
+                    {(function () {
+                      var oe = entries.find(function (e) { return e.isUsingOverage && e.overageResetsAt; });
+                      if (oe && oe.overageResetsAt) return <span className="text-base-content/30">resets in {formatResetTime(oe.overageResetsAt)}</span>;
+                      return null;
+                    })()}
+                  </div>
+                </div>
+              )}
+            </div>
           </div>
         )}
       </div>
@@ -79,6 +205,7 @@ export function UserIsland(props: UserIslandProps) {
       role="group"
       aria-label="User controls"
     >
+      {usageBar}
       {budgetBar}
       <div className="flex items-center gap-2 px-3 py-2">
         <button