@workflow-code/cli 0.2.4-20261013003.codex-studio-integration → 0.2.4-20261013005.codex-studio-integration

package/dist/web/workflow-ui.js

@@ -12607,6 +12607,44 @@
     "{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",
+    "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 +13052,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 +13122,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 +13382,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,6 +15969,89 @@ 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");
@@ -15917,6 +16061,8 @@ Please report this to https://github.com/markedjs/marked.`, e) {
     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 +16076,7 @@ Please report this to https://github.com/markedjs/marked.`, e) {
           }
         }
       });
+      this.dialog.addEventListener("cancel", () => this.close());
     }
     get open() {
       return this.dialog.open;
@@ -15944,6 +16091,7 @@ Please report this to https://github.com/markedjs/marked.`, e) {
       this.close();
       this.title.textContent = title;
       this.body.replaceChildren();
+      this.body.setAttribute("aria-busy", "false");
       this.dialog.showModal();
     }
     plan(content) {
@@ -15961,6 +16109,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,14 +16181,18 @@ 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...");
+      this.loadUsage(load);
+    }
+    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;
+      }
       load();
     }
     usageResult(data, error) {
@@ -16019,20 +16200,26 @@ Please report this to https://github.com/markedjs/marked.`, e) {
         return;
       }
       this.body.replaceChildren();
-      if (error) {
-        this.body.textContent = error;
-        return;
-      }
-      if (!data) {
+      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 +16229,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 +18073,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 +18169,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);
@@ -18864,6 +19054,12 @@ ${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 })));

package/dist/web/workflow-workspace.css

@@ -70,6 +70,7 @@ summary:focus-visible {
 }
 .project-heading {
   min-width: 0;
+  flex: 1;
 }
 #assistant-folder {
   display: block;
@@ -107,6 +108,9 @@ h1 {
 .project-name {
   color: var(--muted);
   font-size: 10px;
+  max-width: 160px;
+  overflow: hidden;
+  text-overflow: ellipsis;
   white-space: nowrap;
 }
 .toolbar-actions {
@@ -131,6 +135,15 @@ h1 {
 .icon-button:hover:not(:disabled) {
   background: var(--vscode-toolbar-hoverBackground);
 }
+.usage-button {
+  width: auto;
+  gap: 6px;
+  padding: 0 8px;
+  color: var(--vscode-textLink-foreground);
+  white-space: nowrap;
+  font-size: 12px;
+  font-weight: 500;
+}
 .toolbar-actions [aria-expanded=true] {
   background: var(--vscode-toolbar-activeBackground, var(--vscode-toolbar-hoverBackground));
 }
@@ -1304,6 +1317,52 @@ main {
   overflow: auto;
   padding: 16px;
 }
+.project-information-name {
+  margin: 0 0 8px;
+  font-size: 18px;
+  line-height: 1.4;
+  overflow-wrap: anywhere;
+}
+.project-information-description {
+  margin: 0 0 16px;
+  color: var(--muted);
+  line-height: 1.6;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+.project-information-section {
+  padding: 10px 0;
+  border-top: 1px solid var(--border);
+}
+.project-information-section summary {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  min-height: 28px;
+  font-weight: 500;
+  cursor: pointer;
+  overflow-wrap: anywhere;
+}
+.project-information-section[open] summary > .codicon {
+  transform: rotate(90deg);
+}
+.project-information-section dl {
+  display: grid;
+  grid-template-columns: minmax(80px, 130px) minmax(0, 1fr);
+  gap: 12px 16px;
+  margin: 12px 0 4px;
+  line-height: 1.5;
+}
+.project-information-section dt {
+  color: var(--muted);
+  overflow-wrap: anywhere;
+}
+.project-information-section dd {
+  margin: 0;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  user-select: text;
+}
 .action-dialog {
   width: min(380px, calc(100vw - 32px));
 }
@@ -1348,25 +1407,122 @@ main {
 .permissions-table td:not(:first-child) {
   text-align: center;
 }
+.usage-balance {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 8px 10px;
+  padding: 4px 0 20px;
+}
+.usage-balance > span {
+  flex-basis: 100%;
+  color: var(--muted);
+  font-size: 12px;
+}
+.usage-balance > strong {
+  font-size: 28px;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  overflow-wrap: anywhere;
+}
+.usage-balance small {
+  color: var(--muted);
+  font-size: 11px;
+}
+.usage-status {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-height: 52px;
+  margin: 0;
+  color: var(--muted);
+  overflow-wrap: anywhere;
+}
+.usage-status.error {
+  color: var(--vscode-errorForeground);
+}
+.usage-status > .codicon-loading {
+  animation: spin 1.2s linear infinite;
+}
 .usage-plan {
-  padding: 12px 0;
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 16px;
+  padding: 18px 0;
   border-top: 1px solid var(--border);
 }
 .usage-plan h3 {
-  margin: 0 0 12px;
-  font-size: 13px;
+  grid-column: 1 / -1;
+  margin: 0;
+  font-size: 14px;
+  overflow-wrap: anywhere;
 }
-.usage-plan > div {
+.usage-period {
   display: grid;
-  gap: 6px;
-  margin: 12px 0;
+  align-content: start;
+  gap: 10px;
+  min-width: 0;
   font-size: 12px;
 }
+.usage-period-heading {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+.usage-period-heading > span {
+  color: var(--muted);
+}
+.usage-period-amount {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 4px;
+  font-variant-numeric: tabular-nums;
+  overflow-wrap: anywhere;
+}
+.usage-period-amount > strong {
+  font-size: 18px;
+  font-weight: 600;
+}
+.usage-period-amount > span,
+.usage-period-remaining {
+  color: var(--muted);
+}
 .usage-plan progress {
+  appearance: none;
   width: 100%;
-  height: 6px;
+  height: 8px;
+  border: 0;
+  border-radius: 4px;
+  overflow: hidden;
+  background: var(--vscode-textCodeBlock-background);
+  color: var(--vscode-progressBar-background);
   accent-color: var(--vscode-progressBar-background);
 }
+.usage-plan progress::-webkit-progress-bar {
+  background: var(--vscode-textCodeBlock-background);
+}
+.usage-plan progress::-webkit-progress-value {
+  background: var(--vscode-progressBar-background);
+}
+.usage-plan progress::-moz-progress-bar {
+  background: var(--vscode-progressBar-background);
+}
+.usage-period[data-status=near-limit] {
+  --vscode-progressBar-background: var(--vscode-editorWarning-foreground);
+}
+.usage-period[data-status=exhausted] {
+  --vscode-progressBar-background: var(--vscode-errorForeground);
+}
+.usage-period[data-status=near-limit] .usage-period-heading > strong {
+  color: var(--vscode-editorWarning-foreground);
+}
+.usage-period[data-status=exhausted] .usage-period-heading > strong,
+.usage-period[data-status=exhausted] .usage-period-remaining {
+  color: var(--vscode-errorForeground);
+}
 .content-search {
   position: absolute;
   top: 4px;
@@ -1537,6 +1693,20 @@ textarea::placeholder {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+.param-action-summary {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--vscode-editor-foreground);
+}
+.param-action:has(.param-action-summary:not([hidden])) .param-action-label {
+  flex-shrink: 0;
+  font-weight: 500;
+}
+.param-action-ai {
+  color: var(--vscode-textLink-foreground);
+}
 .param-action .codicon {
   flex-shrink: 0;
   font-size: 13px;
@@ -1733,12 +1903,9 @@ textarea::placeholder {
 }
 @media (max-width: 680px) {
   #app.menu-open {
-    grid-template-areas: "menu" "main";
+    grid-template-areas: "toolbar" "menu" "main";
     grid-template-columns: minmax(0, 1fr);
-    grid-template-rows: auto minmax(0, 1fr);
-  }
-  .menu-open .toolbar {
-    display: none;
+    grid-template-rows: auto auto minmax(0, 1fr);
   }
   .toolbar {
     padding: 8px 12px;
@@ -1750,6 +1917,9 @@ textarea::placeholder {
   .project-name {
     display: none;
   }
+  .project-icon {
+    display: none;
+  }
   .toolbar-actions {
     gap: 1px;
   }
@@ -1781,6 +1951,15 @@ textarea::placeholder {
     padding: 8px 18px 10px;
   }
 }
+@media (max-width: 520px) {
+  .usage-plan {
+    grid-template-columns: minmax(0, 1fr);
+    gap: 18px;
+  }
+  .usage-period-amount > strong {
+    font-size: 20px;
+  }
+}
 @media (max-width: 420px) {
   .toolbar {
     padding: 8px;
@@ -1788,6 +1967,14 @@ textarea::placeholder {
   .project-title {
     gap: 2px;
   }
+  .usage-button {
+    gap: 4px;
+    padding-inline: 5px;
+  }
+  .project-information-section dl {
+    grid-template-columns: minmax(72px, 95px) minmax(0, 1fr);
+    gap: 10px;
+  }
   h1 {
     font-size: 13px;
   }