@workflow-code/cli 0.2.4-20261013004.codex-studio-integration → 0.2.4-20261013006.codex-studio-integration

package/dist/web/workflow-ui.js

@@ -12607,6 +12607,45 @@
     "{0}{1} \xB7 {2} items": "\u5DF2{0}{1} \xB7 {2} \u9879",
     "{1} in {0}": "{0} \u4E2D {1}",
     "Account balance ${0}": "\u8D26\u6237\u4F59\u989D ${0}",
+    "Account balance": "\u8D26\u6237\u4F59\u989D",
+    "Account changed. Refresh usage.": "\u8D26\u53F7\u5DF2\u5207\u6362\uFF0C\u8BF7\u91CD\u65B0\u83B7\u53D6\u7528\u91CF\u3002",
+    "AI usage": "AI \u7528\u91CF",
+    All: "\u5168\u90E8",
+    "Basic information": "\u57FA\u672C\u4FE1\u606F",
+    Declarations: "\u58F0\u660E",
+    "Default name": "\u9ED8\u8BA4\u540D\u79F0",
+    "Entrypoints granted": "\u5165\u53E3\u8C03\u7528\u6388\u6743",
+    "Knowledge read granted": "\u77E5\u8BC6\u5E93\u8BFB\u53D6\u6388\u6743",
+    "Knowledge write granted": "\u77E5\u8BC6\u5E93\u5199\u5165\u6388\u6743",
+    "KV read granted": "KV \u8BFB\u53D6\u6388\u6743",
+    "KV write granted": "KV \u5199\u5165\u6388\u6743",
+    "Limit reached": "\u989D\u5EA6\u5DF2\u7528\u5C3D",
+    "Loading usage...": "\u6B63\u5728\u52A0\u8F7D\u7528\u91CF...",
+    Local: "\u672C\u5730",
+    "Local and server": "\u672C\u5730\u4E0E\u670D\u52A1\u5668",
+    "Local path": "\u672C\u5730\u8DEF\u5F84",
+    "Localized names": "\u591A\u8BED\u8A00\u540D\u79F0",
+    "Multiple languages": "\u591A\u8BED\u8A00",
+    "Multiple platforms": "\u591A\u5E73\u53F0",
+    "Not allowed": "\u4E0D\u5141\u8BB8",
+    "Not available": "\u6682\u65E0\u6570\u636E",
+    "Not declared": "\u672A\u58F0\u660E",
+    "Platform independent": "\u5E73\u53F0\u65E0\u5173",
+    "Platform support": "\u5E73\u53F0\u652F\u6301",
+    Prefixes: "\u524D\u7F00",
+    "Project declarations": "\u9879\u76EE\u58F0\u660E",
+    "Project information": "\u9879\u76EE\u4FE1\u606F",
+    "Project type": "\u9879\u76EE\u7C7B\u578B",
+    "Project UUID": "\u9879\u76EE UUID",
+    "Related project: {0}": "\u5173\u8054\u9879\u76EE\uFF1A{0}",
+    "Storage location": "\u5B58\u50A8\u4F4D\u7F6E",
+    "Usage unavailable": "\u6682\u65F6\u65E0\u6CD5\u83B7\u53D6\u7528\u91CF",
+    Used: "\u5DF2\u4F7F\u7528",
+    Version: "\u7248\u672C",
+    "Working directory": "\u5DE5\u4F5C\u76EE\u5F55",
+    "{0} (default)": "{0}\uFF08\u9ED8\u8BA4\uFF09",
+    "{0} remaining": "\u5269\u4F59 {0}",
+    "{0} usage": "{0}\u7528\u91CF",
     "Add attachment": "\u6DFB\u52A0\u9644\u4EF6",
     "Agent run": "Agent \u8FD0\u884C",
     "All chats": "\u5168\u90E8\u804A\u5929",
@@ -13014,11 +13053,20 @@
         const label = document.createElement("span");
         label.className = "param-action-label";
         const view = { action, button, label };
+        if (action.kind === "quick" && action.id === "ai") {
+          button.classList.add("param-action-ai");
+          button.append(icon("sparkle"));
+        }
         if (action.kind === "auxiliary") {
           button.append(icon("settings"));
           view.count = document.createElement("small");
         }
         button.append(label);
+        if (action.kind === "quick") {
+          view.summary = document.createElement("span");
+          view.summary.className = "param-action-summary";
+          button.append(view.summary);
+        }
         if (view.count) {
           button.append(view.count);
         }
@@ -13075,14 +13123,17 @@
           view.button.hidden = fields.length === 0;
           view.button.disabled = disabled || (action.kind === "auxiliary" ? loading : fields.every((field) => states[field.name]?.disabled === true || this.visibleOptions(field).length === 0));
           const summaries = action.summary?.map((name) => fields.find((field) => field.name === name)).filter((field) => !!field && !!values[field.name]?.length).map((field) => parameterSelectionLabel(field, values[field.name], states[field.name])) ?? [];
-          view.label.textContent = action.kind === "quick" && summaries.length ? `${action.label}: ${summaries.join(" \xB7 ")}` : action.label;
+          view.label.textContent = action.label;
+          if (view.summary) {
+            view.summary.textContent = summaries.join(" \xB7 ");
+            view.summary.hidden = !summaries.length;
+          }
           if (view.count) {
             view.count.textContent = String(fields.length);
           }
           view.button.setAttribute("aria-busy", String(loading));
         }
-        view.button.title = view.label.textContent || "";
-        view.button.ariaLabel = view.label.textContent || "";
+        view.button.title = view.button.ariaLabel = [view.label.textContent, view.summary?.textContent].filter(Boolean).join(": ");
       }
       if (this.active) {
         if (disabled || this.active.button.hidden) {
@@ -13332,6 +13383,17 @@
   };
 
   // src/web/workflow-types.ts
+  var projectTypeLabels = {
+    get conversation() {
+      return t2("Conversation");
+    },
+    get workflow() {
+      return t2("Workflow");
+    },
+    get kanban() {
+      return t2("Kanban");
+    }
+  };
   function workflowParameters(project, entrypointId) {
     return project.entrypoints.find((entry) => entry.id === entrypointId) ?? project;
   }
@@ -15908,15 +15970,101 @@ Please report this to https://github.com/markedjs/marked.`, e) {
     }
   };
 
+  // src/web/ui/project-information.ts
+  function access(rule) {
+    if (rule?.mode === "all") {
+      return t2("All");
+    }
+    if (rule?.mode === "none") {
+      return t2("Not allowed");
+    }
+    if (rule?.mode === "prefixes") {
+      return `${t2("Prefixes")}: ${rule.prefixes.join(", ")}`;
+    }
+    return t2("Not declared");
+  }
+  function projectInformation(project) {
+    const info = project.projectInfo;
+    const storage = { local: t2("Local"), server: t2("Server"), both: t2("Local and server") };
+    const declarations = { multilingual: t2("Multiple languages"), multiplatform: t2("Multiple platforms") };
+    const platforms = { macos: "macOS", windows: "Windows", web: "Web" };
+    const sections = [{
+      title: t2("Basic information"),
+      expanded: true,
+      rows: [
+        { label: t2("Default name"), value: project.manifest?.name || project.name },
+        { label: t2("Project type"), value: projectTypeLabels[project.projectType] },
+        { label: t2("Version"), value: project.manifest?.version || t2("Not declared") },
+        { label: t2("Project UUID"), value: project.id },
+        { label: project.assistant ? t2("Working directory") : t2("Local path"), value: project.assistant?.workdir || project.folderPath }
+      ]
+    }, {
+      title: t2("Project declarations"),
+      expanded: true,
+      rows: [
+        { label: t2("Storage location"), value: info?.dataStorage ? storage[info.dataStorage.mode] : t2("Not declared") },
+        { label: t2("Platform support"), value: info?.platformSupport.mode === "specific" ? info.platformSupport.platforms.map((id) => platforms[id] || id).join(", ") : t2("Platform independent") },
+        { label: t2("Declarations"), value: info?.declarations.map((id) => declarations[id] || id).join(", ") || t2("Not declared") }
+      ]
+    }];
+    if (info && Object.keys(info.localizedNames).length) {
+      sections.push({ title: t2("Localized names"), rows: Object.entries(info.localizedNames).map(([label, value]) => ({ label, value })) });
+    }
+    for (const relation of info?.relatedProjects ?? []) {
+      const grant = relation.grantToRelatedProject;
+      sections.push({ title: t2("Related project: {0}", relation.alias), rows: [
+        { label: t2("Project UUID"), value: relation.projectId },
+        { label: t2("KV read granted"), value: access(grant.read) },
+        { label: t2("KV write granted"), value: access(grant.write) },
+        { label: t2("Knowledge read granted"), value: access(grant.knowledge?.read) },
+        { label: t2("Knowledge write granted"), value: access(grant.knowledge?.write) },
+        { label: t2("Entrypoints granted"), value: access(grant.entrypoints) }
+      ] });
+    }
+    if (project.entrypoints.length) {
+      sections.push({ title: t2("Entrypoints"), rows: project.entrypoints.map((entry) => ({
+        label: entry.title || entry.id,
+        value: entry.id === project.defaultEntrypoint ? t2("{0} (default)", entry.id) : entry.id
+      })) });
+    }
+    return sections;
+  }
+
+  // src/web/ui/ai-usage.ts
+  function usageAmount(value) {
+    return value != null && Number.isFinite(Number(value)) ? `$${Math.max(0, Number(value)).toFixed(2)}` : t2("Not available");
+  }
+  function usagePeriods(subscription) {
+    const labels = { daily: t2("Daily"), weekly: t2("Weekly"), monthly: t2("Monthly") };
+    return ["daily", "weekly", "monthly"].map((period) => {
+      const rawUsed = subscription[`${period}UsageUsd`], rawLimit = subscription[`${period}LimitUsd`];
+      const used = Number.isFinite(Number(rawUsed)) && rawUsed != null ? Math.max(0, Number(rawUsed)) : void 0;
+      const limit = rawLimit === null ? null : Number.isFinite(Number(rawLimit)) && rawLimit !== void 0 ? Math.max(0, Number(rawLimit)) : void 0;
+      const ratio = used !== void 0 && limit !== null && limit !== void 0 ? limit > 0 ? used / limit : 1 : void 0;
+      return {
+        period,
+        label: labels[period],
+        used,
+        limit,
+        ratio,
+        status: ratio === void 0 ? "" : ratio >= 1 ? "exhausted" : ratio >= 0.8 ? "near-limit" : "",
+        remaining: used !== void 0 && limit !== null && limit !== void 0 ? Math.max(0, limit - used) : void 0
+      };
+    });
+  }
+
   // src/web/ui/conversation-tools.ts
   var ConversationTools = class {
     dialog = document.createElement("dialog");
     body = document.createElement("div");
     title = document.createElement("h2");
     usageOpen = false;
+    usageRequestId;
     refresh;
     constructor() {
       this.dialog.className = "conversation-dialog";
+      this.title.id = "conversation-dialog-title";
+      this.dialog.setAttribute("aria-labelledby", this.title.id);
       const header = document.createElement("header");
       header.append(this.title, iconButton("close", t2("Close"), () => this.close()));
       this.body.className = "dialog-body";
@@ -15930,6 +16078,7 @@ Please report this to https://github.com/markedjs/marked.`, e) {
           }
         }
       });
+      this.dialog.addEventListener("cancel", () => this.close());
     }
     get open() {
       return this.dialog.open;
@@ -15937,13 +16086,20 @@ Please report this to https://github.com/markedjs/marked.`, e) {
     close() {
       this.dialog.close();
       this.usageOpen = false;
+      this.usageRequestId = void 0;
       this.refresh?.remove();
       this.refresh = void 0;
     }
+    closeUsage() {
+      if (this.usageOpen) {
+        this.close();
+      }
+    }
     show(title) {
       this.close();
       this.title.textContent = title;
       this.body.replaceChildren();
+      this.body.setAttribute("aria-busy", "false");
       this.dialog.showModal();
     }
     plan(content) {
@@ -15961,6 +16117,35 @@ Please report this to https://github.com/markedjs/marked.`, e) {
       image.className = "image-preview";
       this.body.append(image);
     }
+    projectInfo(project) {
+      this.show(t2("Project information"));
+      const heading = document.createElement("h3");
+      heading.className = "project-information-name";
+      heading.textContent = project.name;
+      this.body.append(heading);
+      if (project.manifest?.description) {
+        const description = document.createElement("p");
+        description.className = "project-information-description";
+        description.textContent = project.manifest.description;
+        this.body.append(description);
+      }
+      for (const section of projectInformation(project)) {
+        const details = document.createElement("details");
+        details.className = "project-information-section";
+        details.open = !!section.expanded;
+        const summary = document.createElement("summary");
+        summary.innerHTML = `${iconHtml("chevron-right")}<span>${escapeHtml(section.title)}</span>`;
+        const list = document.createElement("dl");
+        for (const row of section.rows) {
+          const label = document.createElement("dt"), value = document.createElement("dd");
+          label.textContent = row.label;
+          value.textContent = row.value;
+          list.append(label, value);
+        }
+        details.append(summary, list);
+        this.body.append(details);
+      }
+    }
     permissions(parameters, policies, changed) {
       this.show(t2("Tool permissions"));
       const tools = parameters.tools ?? [];
@@ -16004,35 +16189,46 @@ Please report this to https://github.com/markedjs/marked.`, e) {
       }
     }
     usage(load) {
-      this.show(t2("System AI"));
+      this.show(t2("AI usage"));
       this.usageOpen = true;
-      const refresh = this.refresh = iconButton("refresh", t2("Refresh usage"), () => {
-        this.body.textContent = t2("Loading...");
-        load();
-      });
+      const refresh = this.refresh = iconButton("refresh", t2("Refresh usage"), () => this.loadUsage(load));
       this.dialog.querySelector("header").insertBefore(refresh, this.dialog.querySelector("header > button:last-child"));
-      this.body.textContent = t2("Loading...");
-      load();
+      this.loadUsage(load);
     }
-    usageResult(data, error) {
-      if (!this.usageOpen) {
-        return;
+    loadUsage(load) {
+      this.body.innerHTML = `<div class="usage-status" role="status">${iconHtml("loading")}<span>${t2("Loading usage...")}</span></div>`;
+      this.body.setAttribute("aria-busy", "true");
+      if (this.refresh) {
+        this.refresh.disabled = true;
       }
-      this.body.replaceChildren();
-      if (error) {
-        this.body.textContent = error;
+      this.usageRequestId = crypto.randomUUID();
+      load(this.usageRequestId);
+    }
+    usageResult(requestId, data, error) {
+      if (!this.usageOpen || requestId !== this.usageRequestId) {
         return;
       }
-      if (!data) {
+      this.body.replaceChildren();
+      this.body.setAttribute("aria-busy", "false");
+      if (this.refresh) {
+        this.refresh.disabled = false;
+      }
+      if (error || !data) {
+        const status = document.createElement("p");
+        status.className = error ? "error usage-status" : "usage-status";
+        status.setAttribute("role", error ? "alert" : "status");
+        status.textContent = error || t2("Usage unavailable");
+        this.body.append(status);
         return;
       }
-      const balance = document.createElement("p");
-      balance.textContent = t2("Account balance ${0}", Number(data.balance ?? 0).toFixed(2));
+      const balance = document.createElement("div");
+      balance.className = "usage-balance";
+      balance.innerHTML = `<span>${t2("Account balance")}</span><strong>${escapeHtml(usageAmount(data.balance))}</strong><small>USD</small>`;
       this.body.append(balance);
-      const labels = { daily: t2("Daily"), weekly: t2("Weekly"), monthly: t2("Monthly") };
       const plans = data.groups.filter((group) => group.subscriptionType === "subscription" && group.subscription?.status === "active");
       if (!plans.length) {
         const empty = document.createElement("p");
+        empty.className = "usage-status";
         empty.textContent = t2("No active subscriptions");
         this.body.append(empty);
       }
@@ -16042,19 +16238,24 @@ Please report this to https://github.com/markedjs/marked.`, e) {
         const title = document.createElement("h3");
         title.textContent = plan.name;
         section.append(title);
-        for (const period of ["daily", "weekly", "monthly"]) {
-          const limit = plan.subscription[`${period}LimitUsd`];
-          const used = Number(plan.subscription[`${period}UsageUsd`] ?? 0);
+        for (const period of usagePeriods(plan.subscription)) {
           const row = document.createElement("div");
-          const label = document.createElement("span");
-          label.textContent = `${labels[period]} $${used.toFixed(2)} / ${limit === null ? t2("Unlimited") : `$${Number(limit).toFixed(2)}`}`;
-          row.append(label);
-          if (limit !== null && limit > 0) {
+          row.className = "usage-period";
+          row.dataset.status = period.status;
+          const used = period.used === void 0 ? t2("Not available") : usageAmount(period.used);
+          const limit = period.limit === null ? t2("Unlimited") : period.limit === void 0 ? t2("Not available") : usageAmount(period.limit);
+          row.innerHTML = `<div class="usage-period-heading"><span>${period.label}</span><strong>${period.ratio === void 0 ? escapeHtml(limit) : `${Math.round(period.ratio * 100)}%`}</strong></div><div class="usage-period-amount"><strong>${escapeHtml(used)}</strong><span>/ ${escapeHtml(limit)}</span></div>`;
+          if (period.ratio !== void 0) {
             const progress = document.createElement("progress");
-            progress.max = limit;
-            progress.value = used;
+            progress.max = 1;
+            progress.value = Math.min(1, period.ratio);
+            progress.ariaLabel = t2("{0} usage", period.label);
             row.append(progress);
           }
+          const remaining = document.createElement("span");
+          remaining.className = "usage-period-remaining";
+          remaining.textContent = period.status === "exhausted" ? t2("Limit reached") : period.remaining === void 0 ? t2("Used") : t2("{0} remaining", usageAmount(period.remaining));
+          row.append(remaining);
           section.append(row);
         }
         this.body.append(section);
@@ -17881,11 +18082,11 @@ ${state.user?.avatarUrl ?? ""}`;
     app.dataset.initialized = "true";
     app.innerHTML = `
     <header class="toolbar">
-      <div class="project-title"><button id="menu-toggle" class="icon-button" title="${t2("Show conversations")}" aria-label="${t2("Show conversations")}" aria-controls="project-menu">${iconHtml("layout-sidebar-left")}</button><span id="project-icon" class="project-icon">${iconHtml("comment-discussion")}</span><div class="project-heading"><h1 id="conversation-title">Workflow</h1><span id="assistant-folder" hidden></span></div><span id="project-name" class="project-name"></span></div>
-      <div class="toolbar-actions"><button id="usage" class="icon-button" title="${t2("System AI usage")}" aria-label="${t2("System AI usage")}" hidden>${iconHtml("dashboard")}</button><button id="tools" class="icon-button" title="${t2("Tool permissions")}" aria-label="${t2("Tool permissions")}" hidden>${iconHtml("tools")}</button></div>
+      <div class="project-title"><button id="menu-toggle" class="icon-button" title="${t2("Show conversations")}" aria-label="${t2("Show conversations")}" aria-controls="project-menu">${iconHtml("layout-sidebar-left")}</button><button id="project-info" class="icon-button" title="${t2("Project information")}" aria-label="${t2("Project information")}" aria-haspopup="dialog">${iconHtml("info")}</button><span id="project-icon" class="project-icon">${iconHtml("comment-discussion")}</span><div class="project-heading"><h1 id="conversation-title">Workflow</h1><span id="assistant-folder" hidden></span></div><span id="project-name" class="project-name"></span></div>
+      <div class="toolbar-actions"><button id="new" class="icon-button" title="${t2("New conversation")}" aria-label="${t2("New conversation")}">${iconHtml("comment-add")}</button><button id="usage" class="icon-button usage-button" title="${t2("System AI usage")}" aria-label="${t2("System AI usage")}" aria-haspopup="dialog" hidden>${iconHtml("dashboard")}<span>${t2("AI usage")}</span></button><button id="tools" class="icon-button" title="${t2("Tool permissions")}" aria-label="${t2("Tool permissions")}" hidden>${iconHtml("tools")}</button></div>
     </header>
     <aside id="project-menu" class="project-menu" aria-label="${t2("Conversations")}">
-      <div class="menu-heading"><span id="menu-label">${t2("Conversations")}</span><div class="menu-actions"><button id="history-toggle" class="icon-button" title="${t2("Search conversations")}" aria-label="${t2("Search conversations")}" aria-haspopup="dialog" aria-controls="history-popover" aria-expanded="false" popovertarget="history-popover">${iconHtml("search")}</button><button id="new" class="icon-button" title="${t2("New conversation")}" aria-label="${t2("New conversation")}">${iconHtml("edit")}</button><button id="hide-menu" class="icon-button" title="${t2("Hide conversations")}" aria-label="${t2("Hide conversations")}">${iconHtml("chevron-left")}</button></div></div>
+      <div class="menu-heading"><span id="menu-label">${t2("Conversations")}</span><div class="menu-actions"><button id="history-toggle" class="icon-button" title="${t2("Search conversations")}" aria-label="${t2("Search conversations")}" aria-haspopup="dialog" aria-controls="history-popover" aria-expanded="false" popovertarget="history-popover">${iconHtml("search")}</button><button id="hide-menu" class="icon-button" title="${t2("Hide conversations")}" aria-label="${t2("Hide conversations")}">${iconHtml("chevron-left")}</button></div></div>
       <section id="chats"><nav id="session-list" aria-label="${t2("Conversation history")}"></nav><button id="load-more-history" class="all-history" hidden>${iconHtml("chevron-down")}<span>${t2("Load more")}</span></button><button id="all-history" class="all-history" aria-haspopup="dialog" aria-controls="history-popover" aria-expanded="false" popovertarget="history-popover" hidden></button><div id="no-history" class="no-history" hidden>${t2("No conversations")}</div></section>
     </aside>
     <main><div class="transcript-area"><div id="transcript" class="transcript" role="log" aria-label="${t2("Conversation messages")}" aria-live="polite" aria-relevant="additions"></div><button id="latest" class="icon-button latest-button" title="${t2("Go to latest message")}" aria-label="${t2("Go to latest message")}" hidden>${iconHtml("arrow-down")}</button></div>
@@ -17977,8 +18178,6 @@ ${state.user?.avatarUrl ?? ""}`;
       const toggle = document.querySelector("#menu-toggle");
       toggle.hidden = open;
       toggle.setAttribute("aria-expanded", String(open));
-      const actions = document.querySelector(narrow.matches && open ? ".menu-actions" : ".toolbar-actions");
-      actions.prepend(document.querySelector("#usage"), document.querySelector("#tools"));
       document.querySelector("#menu-label").textContent = narrow.matches ? t2("Chat") : t2("Conversations");
       closeHistory();
       renderHistory(true);
@@ -18689,6 +18888,9 @@ ${state.user?.avatarUrl ?? ""}`;
       folder.title = next.project.assistant?.workdir ?? "";
       const switching = projectChanged || renderedSession !== next.activeId;
       const authenticationChanged = previous && (previous.authenticationRevision !== next.authenticationRevision || previous.parameterRevision !== next.parameterRevision);
+      if (previous && previous.authenticationRevision !== next.authenticationRevision) {
+        dialogs.closeUsage();
+      }
       if (authenticationChanged) {
         ++requestId;
         resolving = false;
@@ -18864,10 +19066,16 @@ ${state.user?.avatarUrl ?? ""}`;
       saveDraft();
       post({ type: "new", text: textarea.value, attachments: draftFiles });
     });
+    document.querySelector("#project-info").addEventListener("click", () => {
+      if (state) {
+        parameterActions.close();
+        dialogs.projectInfo(state.project);
+      }
+    });
     document.querySelector("#attach").addEventListener("click", () => post({ type: "attach" }));
     document.querySelector("#cancel-queue-edit").addEventListener("click", () => post({ type: "queue-cancel-edit" }));
     document.querySelector("#tools").addEventListener("click", () => dialogs.permissions(currentParameters(), currentSession()?.toolPermissionPolicies ?? {}, (policies) => post({ type: "tool-policy", entrypointId: entrypoint.value, policies })));
-    document.querySelector("#usage").addEventListener("click", () => dialogs.usage(() => post({ type: "usage" })));
+    document.querySelector("#usage").addEventListener("click", () => dialogs.usage((requestId2) => post({ type: "usage", requestId: requestId2 })));
     document.querySelector("#parameter-login").addEventListener("click", () => vscode.postMessage({ type: "login" }));
     document.querySelector("#menu-toggle").addEventListener("click", () => showMenu(true));
     document.querySelector("#hide-menu").addEventListener("click", () => showMenu(false));
@@ -19009,6 +19217,7 @@ ${state.user?.avatarUrl ?? ""}`;
         if (!connectionAvailable) {
           resolving = false;
           requestId++;
+          dialogs.closeUsage();
         }
         sendButton.disabled = !connectionAvailable || sendButton.disabled;
         updateControls();
@@ -19098,7 +19307,7 @@ ${state.user?.avatarUrl ?? ""}`;
         updateControls();
         textarea.focus();
       } else if (message.type === "usage" && message.sessionId === state?.activeId) {
-        dialogs.usageResult(message.usage);
+        dialogs.usageResult(message.requestId, message.usage);
       } else if (message.type === "exported" && message.sessionId === state?.activeId) {
         const button = messages.get(message.messageId)?.root.querySelector(".export-message");
         if (button) {
@@ -19106,14 +19315,15 @@ ${state.user?.avatarUrl ?? ""}`;
           button.innerHTML = iconHtml("export");
         }
       } else if (message.type === "error" && (!message.sessionId || message.sessionId === state?.activeId)) {
+        if (message.requestType === "usage") {
+          dialogs.usageResult(message.requestId, void 0, message.message);
+          return;
+        }
         if (message.requestType === "resume" && messages.get(message.messageId)?.prompt?.request.requestId !== message.requestId) {
           return;
         }
         submitting = false;
         uploading = Math.max(0, uploading - 1);
-        if (message.requestType === "usage") {
-          dialogs.usageResult(void 0, message.message);
-        }
         if (message.requestType === "resume") {
           messages.get(message.messageId)?.prompt?.setBusy(false, message.message);
         }