@ottocode/web-sdk 0.1.313 → 0.1.315

package/dist/components/chat/ConfigModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ConfigModal.d.ts","sourceRoot":"","sources":["../../../src/components/chat/ConfigModal.tsx"],"names":[],"mappings":"AAcA,UAAU,gBAAgB;IACzB,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,YAAY,CAAC,EAAE,OAAO,GAAG,OAAO,GAAG,IAAI,CAAC;IACxC,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QAAE,KAAK,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC,CAAC;IACtD,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,gBAAgB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,qBAAqB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClE,aAAa,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC;IACrC,6EAA6E;IAC7E,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED,wBAAgB,WAAW,CAAC,EAC3B,MAAM,EACN,OAAO,EACP,YAAY,EACZ,YAAY,EACZ,KAAK,EACL,QAAQ,EACR,KAAK,EACL,sBAAsB,EACtB,aAAa,EACb,gBAAgB,EAChB,aAAa,EACb,qBAAqB,EACrB,aAAuB,EACvB,iBAAyB,GACzB,EAAE,gBAAgB,2CAsKlB"}
+{"version":3,"file":"ConfigModal.d.ts","sourceRoot":"","sources":["../../../src/components/chat/ConfigModal.tsx"],"names":[],"mappings":"AAcA,UAAU,gBAAgB;IACzB,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,YAAY,CAAC,EAAE,OAAO,GAAG,OAAO,GAAG,IAAI,CAAC;IACxC,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QAAE,KAAK,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC,CAAC;IACtD,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,gBAAgB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,qBAAqB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClE,aAAa,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC;IACrC,6EAA6E;IAC7E,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED,wBAAgB,WAAW,CAAC,EAC3B,MAAM,EACN,OAAO,EACP,YAAY,EACZ,YAAY,EACZ,KAAK,EACL,QAAQ,EACR,KAAK,EACL,sBAAsB,EACtB,aAAa,EACb,gBAAgB,EAChB,aAAa,EACb,qBAAqB,EACrB,aAAuB,EACvB,iBAAyB,GACzB,EAAE,gBAAgB,2CAsMlB"}

package/dist/components/common/ProviderLogo.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProviderLogo.d.ts","sourceRoot":"","sources":["../../../src/components/common/ProviderLogo.tsx"],"names":[],"mappings":"AAuCA,UAAU,iBAAiB;IAC1B,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;CACd;AAED,eAAO,MAAM,YAAY,yDAoCvB,CAAC"}
+{"version":3,"file":"ProviderLogo.d.ts","sourceRoot":"","sources":["../../../src/components/common/ProviderLogo.tsx"],"names":[],"mappings":"AAsCA,UAAU,iBAAiB;IAC1B,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;CACd;AAED,eAAO,MAAM,YAAY,yDAoCvB,CAAC"}

package/dist/components/dashboard/UsageDashboard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UsageDashboard.d.ts","sourceRoot":"","sources":["../../../src/components/dashboard/UsageDashboard.tsx"],"names":[],"mappings":"AAMA,UAAU,mBAAmB;IAC5B,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACpB;AA0jBD,wBAAgB,cAAc,CAAC,EAAE,MAAM,EAAE,EAAE,mBAAmB,2CA+S7D"}
+{"version":3,"file":"UsageDashboard.d.ts","sourceRoot":"","sources":["../../../src/components/dashboard/UsageDashboard.tsx"],"names":[],"mappings":"AAMA,UAAU,mBAAmB;IAC5B,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACpB;AA+uBD,wBAAgB,cAAc,CAAC,EAAE,MAAM,EAAE,EAAE,mBAAmB,2CAiT7D"}

package/dist/components/index.js

@@ -3970,7 +3970,6 @@ var providerLogos = {
   "zai-coding": zaiLogo,
   ottorouter: ottorouterLogo,
   minimax: minimaxLogo,
-  moonshot: kimiLogo,
   kimi: kimiLogo,
   opencode: opencodeLogo,
   copilot: copilotLogo
@@ -10610,6 +10609,7 @@ function ConfigModal({
   const updateDefaults = useUpdateDefaults();
   const reasoningEnabled = config2?.defaults?.reasoningText ?? true;
   const reasoningLevel = config2?.defaults?.reasoningLevel ?? "high";
+  const coAuthorCommits = config2?.defaults?.coAuthorCommits ?? false;
   const ottoEnabled = config2?.defaults?.ottoEnabled ?? true;
   const agentNames = useMemo16(() => ((agentDetails?.agents.length) ? agentDetails.agents.map((agentDetail) => agentDetail.name) : config2?.agents ?? []).filter((name) => name !== "otto"), [agentDetails?.agents, config2?.agents]);
   const agentSelectorRef = useRef11(null);
@@ -10717,6 +10717,36 @@ function ConfigModal({
             })
           ]
         }),
+        /* @__PURE__ */ jsxs22("div", {
+          className: "flex items-center justify-between",
+          children: [
+            /* @__PURE__ */ jsxs22("div", {
+              children: [
+                /* @__PURE__ */ jsx29("div", {
+                  className: "text-sm font-medium text-foreground",
+                  children: "Otto Commit Co-author"
+                }),
+                /* @__PURE__ */ jsx29("p", {
+                  className: "mt-0.5 text-xs text-muted-foreground",
+                  children: "Add the ottocode bot as a co-author on Otto commits."
+                })
+              ]
+            }),
+            /* @__PURE__ */ jsx29("button", {
+              type: "button",
+              role: "switch",
+              "aria-checked": coAuthorCommits,
+              onClick: () => updateDefaults.mutate({
+                coAuthorCommits: !coAuthorCommits,
+                scope: "global"
+              }),
+              className: `relative inline-flex h-6 w-11 shrink-0 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 ${coAuthorCommits ? "bg-primary" : "bg-muted"}`,
+              children: /* @__PURE__ */ jsx29("span", {
+                className: `inline-block h-4 w-4 transform rounded-full transition-transform ${coAuthorCommits ? "translate-x-6" : "translate-x-1"} ${coAuthorCommits ? "bg-primary-foreground" : "bg-foreground"}`
+              })
+            })
+          ]
+        }),
         /* @__PURE__ */ jsxs22("div", {
           className: "flex items-center justify-between",
           children: [
@@ -11638,6 +11668,78 @@ class SSEClient {
   }
 }
 
+// src/hooks/tool-preview-helpers.ts
+function bestEffortUnescapeJsonString(value) {
+  try {
+    return JSON.parse(`"${value.replace(/\\$/, "")}"`);
+  } catch {
+    return value.replace(/\\n/g, `
+`).replace(/\\t/g, "\t").replace(/\\r/g, "\r").replace(/\\"/g, '"').replace(/\\\\/g, "\\");
+  }
+}
+function extractJsonStringFieldAt(text, field, startIndex, requireClosed = false) {
+  const marker = `"${field}"`;
+  const markerIndex = text.indexOf(marker, Math.max(0, startIndex));
+  if (markerIndex === -1)
+    return;
+  const colonIndex = text.indexOf(":", markerIndex + marker.length);
+  if (colonIndex === -1)
+    return;
+  const quoteIndex = text.indexOf('"', colonIndex + 1);
+  if (quoteIndex === -1)
+    return;
+  let escaped = "";
+  let escaping = false;
+  let closed = false;
+  let endIndex = text.length;
+  for (let i = quoteIndex + 1;i < text.length; i += 1) {
+    const char = text[i];
+    if (escaping) {
+      escaped += `\\${char}`;
+      escaping = false;
+      continue;
+    }
+    if (char === "\\") {
+      escaping = true;
+      continue;
+    }
+    if (char === '"') {
+      closed = true;
+      endIndex = i + 1;
+      break;
+    }
+    escaped += char;
+  }
+  if (requireClosed && !closed)
+    return;
+  return {
+    value: bestEffortUnescapeJsonString(escaped),
+    endIndex,
+    closed
+  };
+}
+function extractStreamingMultiEditPreviewEdits(buffer) {
+  const editsStart = buffer.indexOf('"edits"');
+  if (editsStart === -1)
+    return [];
+  const edits = [];
+  let cursor = editsStart;
+  const maxPreviewEdits = 50;
+  while (cursor < buffer.length && edits.length < maxPreviewEdits) {
+    const oldString = extractJsonStringFieldAt(buffer, "oldString", cursor, true);
+    if (!oldString)
+      break;
+    const newString = extractJsonStringFieldAt(buffer, "newString", oldString.endIndex, false);
+    if (!newString)
+      break;
+    edits.push({ oldString: oldString.value, newString: newString.value });
+    cursor = Math.max(newString.endIndex, oldString.endIndex + 1);
+    if (!newString.closed)
+      break;
+  }
+  return edits;
+}
+
 // src/hooks/useSessionStream.ts
 var TOOL_PREVIEW_THROTTLE_MS = 500;
 var TOOL_PREVIEW_THROTTLE_MIN_CHARS = 8000;
@@ -11791,7 +11893,7 @@ ${value.slice(-STREAMING_TOOL_INPUT_TAIL_CHARS)}`;
       toolInputBuffersRef.current.set(key, next);
       return parseArgsRecord(next);
     };
-    const bestEffortUnescapeJsonString = (value) => {
+    const bestEffortUnescapeJsonString2 = (value) => {
       try {
         return JSON.parse(`"${value.replace(/\\$/, "")}"`);
       } catch {
@@ -11832,7 +11934,7 @@ ${value.slice(-STREAMING_TOOL_INPUT_TAIL_CHARS)}`;
       }
       if (requireClosed && !closed)
         return;
-      return bestEffortUnescapeJsonString(escaped);
+      return bestEffortUnescapeJsonString2(escaped);
     };
     const getBufferedToolInput = (payload) => {
       const key = getToolBufferKey(payload);
@@ -11869,7 +11971,7 @@ ${argContent.slice(-STREAMING_WRITE_CONTENT_PREVIEW_CHARS)}`;
       }
       const rawTail = buffer.slice(Math.max(valueStart, buffer.length - STREAMING_WRITE_CONTENT_PREVIEW_CHARS));
       return `… showing latest streamed content only …
-${bestEffortUnescapeJsonString(rawTail)}`;
+${bestEffortUnescapeJsonString2(rawTail)}`;
     };
     const getStreamingPatchPreviewContent = (args, buffer) => {
       const argPatch = args?.patch;
@@ -11898,9 +12000,9 @@ ${argPatch.slice(-STREAMING_PATCH_PREVIEW_TAIL_CHARS)}`;
       }
       const rawHead = buffer.slice(valueStart, valueStart + STREAMING_PATCH_PREVIEW_HEAD_CHARS);
       const rawTail = buffer.slice(-STREAMING_PATCH_PREVIEW_TAIL_CHARS);
-      return `${bestEffortUnescapeJsonString(rawHead)}
+      return `${bestEffortUnescapeJsonString2(rawHead)}
 … patch preview truncated while streaming …
-${bestEffortUnescapeJsonString(rawTail)}`;
+${bestEffortUnescapeJsonString2(rawTail)}`;
     };
     const getResultRecord = (payload) => payload?.result && typeof payload.result === "object" && !Array.isArray(payload.result) ? payload.result : null;
     const getArtifactRecord = (payload) => {
@@ -12076,14 +12178,15 @@ ${bestEffortUnescapeJsonString(rawTail)}`;
       return lines.join(`
 `);
     };
-    const getMultiEditPreviewEdits = (args) => {
+    const getMultiEditPreviewEdits = (args, buffer) => {
       const edits = Array.isArray(args?.edits) ? args.edits : [];
-      return edits.flatMap((edit) => {
+      const parsedEdits = edits.flatMap((edit) => {
         if (!edit || typeof edit !== "object" || Array.isArray(edit))
           return [];
         const record = edit;
         return typeof record.oldString === "string" && typeof record.newString === "string" ? [{ oldString: record.oldString, newString: record.newString }] : [];
       });
+      return parsedEdits.length > 0 ? parsedEdits : extractStreamingMultiEditPreviewEdits(buffer);
     };
     const getEditPreviewPatch = (toolName, path, args, buffer, artifact) => {
       if (typeof artifact?.patch === "string")
@@ -12093,7 +12196,7 @@ ${bestEffortUnescapeJsonString(rawTail)}`;
         const newString = getStringArg(args, buffer, "newString");
         return oldString !== undefined && newString !== undefined ? buildStringEditPatchPreview(path, [{ oldString, newString }]) : undefined;
       }
-      const edits = getMultiEditPreviewEdits(args);
+      const edits = getMultiEditPreviewEdits(args, buffer);
       return buildStringEditPatchPreview(path, edits);
     };
     const handleReadToolActivity = (eventType, payload, delta) => {
@@ -23413,6 +23516,8 @@ function SessionHeader({
   const width = useContainerWidth(rootRef);
   const isCompact = width > 0 && width < 640;
   const estimatedCost = useMemo25(() => {
+    if (typeof session.totalCostUsd === "number")
+      return session.totalCostUsd;
     const inputTokens = session.totalInputTokens || 0;
     const outputTokens2 = session.totalOutputTokens || 0;
     const cachedInputTokens = session.totalCachedTokens || 0;
@@ -23429,8 +23534,10 @@ function SessionHeader({
     session.totalInputTokens,
     session.totalOutputTokens,
     session.totalCachedTokens,
-    session.totalCacheCreationTokens
+    session.totalCacheCreationTokens,
+    session.totalCostUsd
   ]);
+  const subagentCost = session.subagentCostUsd ?? 0;
   const formatDuration3 = (ms) => {
     if (!ms)
       return "0s";
@@ -23593,6 +23700,7 @@ function SessionHeader({
             }),
             estimatedCost > 0 && !isCompact && /* @__PURE__ */ jsxs75("div", {
               className: "flex items-center gap-1.5",
+              title: subagentCost > 0 ? `Total cost includes $${subagentCost.toFixed(4)} from sub-agents` : "Estimated session cost",
               children: [
                 /* @__PURE__ */ jsx87(DollarSign, {
                   className: "w-4 h-4"
@@ -24072,6 +24180,8 @@ function LeanHeader({
   const { data: parentData } = useParentSession(session.sessionType === "branch" ? session.id : undefined);
   const { data: shareStatus } = useShareStatus(session.id);
   const estimatedCost = useMemo27(() => {
+    if (typeof session.totalCostUsd === "number")
+      return session.totalCostUsd;
     const inputTokens = session.totalInputTokens || 0;
     const outputTokens = session.totalOutputTokens || 0;
     const cachedInputTokens = session.totalCachedTokens || 0;
@@ -24088,8 +24198,10 @@ function LeanHeader({
     session.totalInputTokens,
     session.totalOutputTokens,
     session.totalCachedTokens,
-    session.totalCacheCreationTokens
+    session.totalCacheCreationTokens,
+    session.totalCostUsd
   ]);
+  const subagentCost = session.subagentCostUsd ?? 0;
   const formatCompactNumber = (num) => {
     if (num >= 1e6)
       return `${(num / 1e6).toFixed(1)}M`;
@@ -24222,6 +24334,7 @@ function LeanHeader({
                 }),
                 estimatedCost > 0 && !isCompact && /* @__PURE__ */ jsxs78("div", {
                   className: "flex items-center gap-1",
+                  title: subagentCost > 0 ? `Total cost includes $${subagentCost.toFixed(4)} from sub-agents` : "Estimated session cost",
                   children: [
                     /* @__PURE__ */ jsx90(DollarSign2, {
                       className: "size-3.5"
@@ -33569,6 +33682,15 @@ function PreferencesModal({ isOpen, onClose }) {
                 scope: "global"
               })
             }),
+            /* @__PURE__ */ jsx128(ToggleRow, {
+              label: "Otto Commit Co-author",
+              description: "Add the ottocode bot as a co-author on commits made through Otto.",
+              checked: config2?.defaults?.coAuthorCommits ?? false,
+              onChange: (checked) => updateDefaults.mutate({
+                coAuthorCommits: checked,
+                scope: "global"
+              })
+            }),
             /* @__PURE__ */ jsx128(ToggleRow, {
               label: "Otto & Goals",
               description: "Supervisor agent that verifies goal progress and re-enqueues sessions until the goal is done. Disabling also disables goals.",
@@ -41769,7 +41891,7 @@ var ProviderSetupStep = memo75(function ProviderSetupStep2({
       setOpenAICodeCopied(false);
       setOpenAIAuthMode("choice");
       setOpenAIModalOpen(true);
-    } else if (providerId === "moonshot" && onStartKimiDeviceFlow) {
+    } else if (providerId === "kimi" && onStartKimiDeviceFlow) {
       setKimiPolling(false);
       setKimiDevice(null);
       setKimiError(null);
@@ -43174,7 +43296,7 @@ var ProviderSetupStep = memo75(function ProviderSetupStep2({
               className: "flex items-center gap-3 p-6 border-b border-border",
               children: [
                 /* @__PURE__ */ jsx154(ProviderLogo, {
-                  provider: "moonshot",
+                  provider: "kimi",
                   size: 24
                 }),
                 /* @__PURE__ */ jsx154("h3", {
@@ -44164,6 +44286,278 @@ function TokenChart({ data, max, hover, onHover }) {
     })
   });
 }
+var SKELETON_BARS = [
+  { id: "a", height: 32 },
+  { id: "b", height: 48 },
+  { id: "c", height: 24 },
+  { id: "d", height: 64 },
+  { id: "e", height: 40 },
+  { id: "f", height: 72 },
+  { id: "g", height: 16 },
+  { id: "h", height: 56 },
+  { id: "i", height: 36 },
+  { id: "j", height: 80 },
+  { id: "k", height: 28 },
+  { id: "l", height: 44 },
+  { id: "m", height: 20 },
+  { id: "n", height: 60 },
+  { id: "o", height: 52 },
+  { id: "p", height: 12 },
+  { id: "q", height: 68 },
+  { id: "r", height: 76 },
+  { id: "s", height: 44 },
+  { id: "t", height: 32 },
+  { id: "u", height: 50 },
+  { id: "v", height: 18 },
+  { id: "w", height: 66 },
+  { id: "x", height: 38 },
+  { id: "y", height: 58 },
+  { id: "z", height: 26 },
+  { id: "aa", height: 70 },
+  { id: "ab", height: 22 },
+  { id: "ac", height: 46 },
+  { id: "ad", height: 54 }
+];
+var SKELETON_LIST_ROWS = [
+  { id: "a" },
+  { id: "b" },
+  { id: "c" },
+  { id: "d" },
+  { id: "e" },
+  { id: "f" },
+  { id: "g" },
+  { id: "h" },
+  { id: "i" },
+  { id: "j" },
+  { id: "k" },
+  { id: "l" }
+];
+function SkeletonHero() {
+  return /* @__PURE__ */ jsxs137("div", {
+    className: "rounded-2xl border border-border bg-card/60 px-6 py-7",
+    children: [
+      /* @__PURE__ */ jsxs137("div", {
+        className: "grid grid-cols-1 md:grid-cols-[1.4fr_1fr_1fr] gap-6 md:gap-10 items-center",
+        children: [
+          /* @__PURE__ */ jsxs137("div", {
+            children: [
+              /* @__PURE__ */ jsx157("div", {
+                className: "h-3 w-32 bg-muted rounded animate-pulse"
+              }),
+              /* @__PURE__ */ jsx157("div", {
+                className: "mt-3 h-12 w-40 bg-muted rounded animate-pulse"
+              }),
+              /* @__PURE__ */ jsx157("div", {
+                className: "mt-3 h-3 w-56 bg-muted rounded animate-pulse"
+              })
+            ]
+          }),
+          /* @__PURE__ */ jsxs137("div", {
+            className: "md:border-l md:border-border/60 md:pl-6",
+            children: [
+              /* @__PURE__ */ jsx157("div", {
+                className: "h-3 w-24 bg-muted rounded animate-pulse"
+              }),
+              /* @__PURE__ */ jsx157("div", {
+                className: "mt-3 h-9 w-32 bg-muted rounded animate-pulse"
+              }),
+              /* @__PURE__ */ jsx157("div", {
+                className: "mt-3 h-3 w-40 bg-muted rounded animate-pulse"
+              })
+            ]
+          }),
+          /* @__PURE__ */ jsxs137("div", {
+            className: "md:border-l md:border-border/60 md:pl-6",
+            children: [
+              /* @__PURE__ */ jsx157("div", {
+                className: "h-3 w-28 bg-muted rounded animate-pulse"
+              }),
+              /* @__PURE__ */ jsx157("div", {
+                className: "mt-3 h-9 w-32 bg-muted rounded animate-pulse"
+              }),
+              /* @__PURE__ */ jsx157("div", {
+                className: "mt-3 h-3 w-44 bg-muted rounded animate-pulse"
+              })
+            ]
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsxs137("div", {
+        className: "mt-6 pt-5 border-t border-border/40 grid grid-cols-3 gap-6",
+        children: [
+          /* @__PURE__ */ jsxs137("div", {
+            children: [
+              /* @__PURE__ */ jsx157("div", {
+                className: "h-3 w-20 bg-muted rounded animate-pulse"
+              }),
+              /* @__PURE__ */ jsx157("div", {
+                className: "mt-2 h-5 w-32 bg-muted rounded animate-pulse"
+              })
+            ]
+          }),
+          /* @__PURE__ */ jsxs137("div", {
+            children: [
+              /* @__PURE__ */ jsx157("div", {
+                className: "h-3 w-16 bg-muted rounded animate-pulse"
+              }),
+              /* @__PURE__ */ jsx157("div", {
+                className: "mt-2 h-5 w-36 bg-muted rounded animate-pulse"
+              })
+            ]
+          }),
+          /* @__PURE__ */ jsxs137("div", {
+            children: [
+              /* @__PURE__ */ jsx157("div", {
+                className: "h-3 w-12 bg-muted rounded animate-pulse"
+              }),
+              /* @__PURE__ */ jsx157("div", {
+                className: "mt-2 h-5 w-40 bg-muted rounded animate-pulse"
+              })
+            ]
+          })
+        ]
+      })
+    ]
+  });
+}
+function SkeletonSplit() {
+  return /* @__PURE__ */ jsx157("div", {
+    className: "space-y-2",
+    children: [1, 2, 3].map((i) => /* @__PURE__ */ jsxs137("div", {
+      className: "flex items-center gap-3 py-2",
+      children: [
+        /* @__PURE__ */ jsx157("div", {
+          className: "h-3 w-20 bg-muted rounded animate-pulse shrink-0"
+        }),
+        /* @__PURE__ */ jsx157("div", {
+          className: "flex-1 h-1.5 rounded-full bg-muted/40 overflow-hidden",
+          children: /* @__PURE__ */ jsx157("div", {
+            className: "h-full w-2/3 bg-muted rounded animate-pulse"
+          })
+        }),
+        /* @__PURE__ */ jsx157("div", {
+          className: "h-3 w-20 bg-muted rounded animate-pulse shrink-0"
+        }),
+        /* @__PURE__ */ jsx157("div", {
+          className: "h-4 w-16 bg-muted rounded animate-pulse shrink-0"
+        })
+      ]
+    }, i))
+  });
+}
+function SkeletonChart() {
+  return /* @__PURE__ */ jsxs137("div", {
+    children: [
+      /* @__PURE__ */ jsxs137("div", {
+        className: "flex items-baseline justify-between gap-4 mb-4",
+        children: [
+          /* @__PURE__ */ jsxs137("div", {
+            className: "min-w-0 space-y-2",
+            children: [
+              /* @__PURE__ */ jsx157("div", {
+                className: "h-3 w-24 bg-muted rounded animate-pulse"
+              }),
+              /* @__PURE__ */ jsx157("div", {
+                className: "h-7 w-28 bg-muted rounded animate-pulse"
+              }),
+              /* @__PURE__ */ jsx157("div", {
+                className: "h-3 w-48 bg-muted rounded animate-pulse"
+              })
+            ]
+          }),
+          /* @__PURE__ */ jsx157("div", {
+            className: "h-7 w-28 bg-muted rounded animate-pulse shrink-0"
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsx157("div", {
+        className: "flex items-end gap-[3px] h-44",
+        children: SKELETON_BARS.map((bar) => /* @__PURE__ */ jsx157("div", {
+          className: "flex-1 bg-muted rounded-sm animate-pulse",
+          style: { height: `${bar.height}%` }
+        }, `chart-skeleton-${bar.id}`))
+      }),
+      /* @__PURE__ */ jsxs137("div", {
+        className: "mt-3 flex items-center justify-between",
+        children: [
+          /* @__PURE__ */ jsx157("div", {
+            className: "h-3 w-16 bg-muted rounded animate-pulse"
+          }),
+          /* @__PURE__ */ jsx157("div", {
+            className: "h-3 w-24 bg-muted rounded animate-pulse"
+          }),
+          /* @__PURE__ */ jsx157("div", {
+            className: "h-3 w-16 bg-muted rounded animate-pulse"
+          })
+        ]
+      })
+    ]
+  });
+}
+function SkeletonList({ rows = 6 }) {
+  return /* @__PURE__ */ jsx157("div", {
+    className: "divide-y divide-border/60",
+    children: SKELETON_LIST_ROWS.slice(0, rows).map((row, index) => /* @__PURE__ */ jsxs137("div", {
+      className: "flex items-center gap-3 py-2.5 px-1",
+      children: [
+        /* @__PURE__ */ jsx157("div", {
+          className: "size-7 shrink-0 rounded-md bg-muted animate-pulse"
+        }),
+        /* @__PURE__ */ jsxs137("div", {
+          className: "flex-1 min-w-0 space-y-1.5",
+          children: [
+            /* @__PURE__ */ jsx157("div", {
+              className: "h-3.5 w-24 bg-muted rounded animate-pulse"
+            }),
+            /* @__PURE__ */ jsx157("div", {
+              className: "h-2.5 w-36 bg-muted rounded animate-pulse"
+            })
+          ]
+        }),
+        /* @__PURE__ */ jsxs137("div", {
+          className: "space-y-1.5 text-right shrink-0",
+          children: [
+            /* @__PURE__ */ jsx157("div", {
+              className: "h-3.5 w-16 bg-muted rounded animate-pulse"
+            }),
+            /* @__PURE__ */ jsx157("div", {
+              className: "h-2.5 w-14 bg-muted rounded animate-pulse ml-auto"
+            })
+          ]
+        })
+      ]
+    }, `list-skeleton-${row.id}-${index}`))
+  });
+}
+function UsageDashboardSkeleton() {
+  return /* @__PURE__ */ jsxs137("div", {
+    className: "max-w-5xl mx-auto px-6 py-8 space-y-5",
+    children: [
+      /* @__PURE__ */ jsx157(SkeletonHero, {}),
+      /* @__PURE__ */ jsx157(Section, {
+        title: "How you're paying",
+        children: /* @__PURE__ */ jsx157(SkeletonSplit, {})
+      }),
+      /* @__PURE__ */ jsx157(Section, {
+        title: "Daily activity",
+        children: /* @__PURE__ */ jsx157(SkeletonChart, {})
+      }),
+      /* @__PURE__ */ jsxs137("div", {
+        className: "grid grid-cols-1 md:grid-cols-2 gap-5",
+        children: [
+          /* @__PURE__ */ jsx157(Section, {
+            title: "By provider",
+            children: /* @__PURE__ */ jsx157(SkeletonList, {})
+          }),
+          /* @__PURE__ */ jsx157(Section, {
+            title: "Top models",
+            children: /* @__PURE__ */ jsx157(SkeletonList, {})
+          })
+        ]
+      })
+    ]
+  });
+}
 function Dot({ color, label }) {
   return /* @__PURE__ */ jsxs137("span", {
     className: "flex items-center gap-1",
@@ -44523,6 +44917,11 @@ function UsageDashboard({ onBack }) {
     else
       window.location.assign("/");
   }, [onBack]);
+  const handleScopeChange = useCallback53((next) => {
+    setScope(next);
+    setStats(null);
+    setError(null);
+  }, []);
   const projectName = useMemo48(() => {
     if (scope === "global") {
       const included = stats?.projects?.included.length ?? 0;
@@ -44588,13 +44987,13 @@ function UsageDashboard({ onBack }) {
                   children: [
                     /* @__PURE__ */ jsx157("button", {
                       type: "button",
-                      onClick: () => setScope("project"),
+                      onClick: () => handleScopeChange("project"),
                       className: `px-2 py-0.5 rounded transition-colors ${scope === "project" ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"}`,
                       children: "Project"
                     }),
                     /* @__PURE__ */ jsxs137("button", {
                       type: "button",
-                      onClick: () => setScope("global"),
+                      onClick: () => handleScopeChange("global"),
                       className: `px-2 py-0.5 rounded transition-colors inline-flex items-center gap-1 ${scope === "global" ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"}`,
                       children: [
                         /* @__PURE__ */ jsx157(Globe25, {
@@ -44630,10 +45029,7 @@ function UsageDashboard({ onBack }) {
               className: "rounded-xl border border-destructive/40 bg-destructive/10 p-3 text-xs text-destructive",
               children: error
             }),
-            loading && !stats && /* @__PURE__ */ jsx157("div", {
-              className: "py-24 text-center text-xs text-muted-foreground",
-              children: "loading…"
-            }),
+            loading && !stats && /* @__PURE__ */ jsx157(UsageDashboardSkeleton, {}),
             stats && /* @__PURE__ */ jsxs137(Fragment62, {
               children: [
                 /* @__PURE__ */ jsxs137("div", {
@@ -44983,4 +45379,4 @@ export {
   AgentProviderModelFields
 };
 
-//# debugId=B662143DFDACA04964756E2164756E21
+//# debugId=93E5C22E4936FCE564756E2164756E21