march-cli 0.1.35 → 0.1.36

package/src/web-ui/src/components/RightSidebar.tsx

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import type { ActivityEvent, SessionSummary } from "../model";
+import type { ActivityEvent, ProviderQuotaSnapshot, SessionSummary } from "../model";
 import type { FsEntry } from "../runtime/client";
 
 type RightSidebarProps = {
@@ -7,6 +7,7 @@ type RightSidebarProps = {
   activity: ActivityEvent[];
   fsEntries: FsEntry[];
   fsPath: string | null;
+  providerQuota?: ProviderQuotaSnapshot | null;
   running: boolean;
   onOpenSession: (sessionId: string) => Promise<void>;
   onCreateSession: (workspacePath: string) => Promise<void>;
@@ -14,7 +15,9 @@ type RightSidebarProps = {
   onBrowsePath: (path: string) => Promise<void>;
 };
 
-export function RightSidebar({ sessions, activity, fsEntries, fsPath, running, onOpenSession, onCreateSession, onBrowseRoots, onBrowsePath }: RightSidebarProps) {
+export function RightSidebar(props: RightSidebarProps) {
+  const { sessions, activity, fsEntries, fsPath, providerQuota, running } = props;
+  const { onOpenSession, onCreateSession, onBrowseRoots, onBrowsePath } = props;
   const [workspacePath, setWorkspacePath] = useState("");
   const canCreate = workspacePath.trim().length > 0 && !running;
 
@@ -50,6 +53,8 @@ export function RightSidebar({ sessions, activity, fsEntries, fsPath, running, o
           ))}
         </div>
 
+        {providerQuota ? <ProviderQuotaCard quota={providerQuota} /> : null}
+
         <div className="right-divider">Sessions</div>
         {sessions.map((session) => (
           <button key={session.id} className={session.active ? "session-row active" : "session-row"} type="button" onClick={() => onOpenSession(session.id)}>
@@ -68,3 +73,43 @@ export function RightSidebar({ sessions, activity, fsEntries, fsPath, running, o
     </aside>
   );
 }
+
+function ProviderQuotaCard({ quota }: { quota: ProviderQuotaSnapshot }) {
+  return (
+    <div className="provider-quota" aria-label="Provider quota">
+      <div className="provider-quota-header">
+        <span>{quota.label}</span>
+        <time>{quota.providerId}</time>
+      </div>
+      {quota.limits.flatMap((limit) => limit.windows.map((window) => {
+        const left = Math.round(window.remainingPercent);
+        return (
+          <div key={`${limit.id}:${window.id}`} className="quota-row">
+            <div className="quota-row-main">
+              <span>{formatQuotaLabel(window.label)}</span>
+              <strong>{left}% left</strong>
+            </div>
+            <div className="quota-bar" aria-label={`${left}% quota left`}>
+              <span style={{ width: `${Math.max(0, Math.min(100, left))}%` }} />
+            </div>
+            <em>{formatReset(window.resetsAt)}</em>
+          </div>
+        );
+      }))}
+    </div>
+  );
+}
+
+function formatQuotaLabel(label: string) {
+  return label === "weekly" ? "Weekly limit:" : `${label} limit:`;
+}
+
+function formatReset(resetsAt?: string | null) {
+  if (!resetsAt) return "reset unknown";
+  const date = new Date(resetsAt);
+  if (Number.isNaN(date.getTime())) return "reset unknown";
+  const hours = String(date.getHours()).padStart(2, "0");
+  const minutes = String(date.getMinutes()).padStart(2, "0");
+  const month = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"][date.getMonth()];
+  return `resets ${hours}:${minutes} on ${date.getDate()} ${month}`;
+}

package/src/web-ui/src/model.ts

@@ -43,6 +43,25 @@ export type ActivityEvent = {
   time: string;
 };
 
+export type ProviderQuotaSnapshot = {
+  providerId: string;
+  modelId?: string | null;
+  label: string;
+  planType?: string | null;
+  capturedAt: string;
+  limits: Array<{
+    id: string;
+    name: string;
+    windows: Array<{
+      id: string;
+      label: string;
+      usedPercent: number;
+      remainingPercent: number;
+      resetsAt?: string | null;
+    }>;
+  }>;
+};
+
 export type ComposerState = {
   mode: string;
   placeholder: string;
@@ -57,6 +76,7 @@ export type WebUiModel = {
     events: MarchTimelineEvent[];
   };
   sessions: SessionSummary[];
+  providerQuota?: ProviderQuotaSnapshot | null;
   activity: ActivityEvent[];
   composer: ComposerState;
 };

package/src/web-ui/src/runtime/client.ts

@@ -1,4 +1,4 @@
-import type { SessionSummary, WebUiModel } from "../model";
+import type { ProviderQuotaSnapshot, SessionSummary, WebUiModel } from "../model";
 
 export type RuntimeUiEvent =
   | { type: "web_user_message"; text: string }
@@ -13,6 +13,7 @@ export type RuntimeUiEvent =
   | { type: "tool_end"; name: string; isError?: boolean; result?: unknown }
   | { type: "edit_diff"; path: string; diffLines?: Array<{ type?: string; text?: string }> }
   | { type: "permission_request"; toolName: string; category?: string; params?: unknown }
+  | { type: "provider_quota_snapshot"; snapshot: ProviderQuotaSnapshot | null }
   | { type: "status"; text: string }
   | { type: "retry_start"; errorMessage?: string }
   | { type: "retry_end"; success?: boolean; finalError?: string };
@@ -47,6 +48,12 @@ export async function fetchFsList(path: string): Promise<FsEntry[]> {
   return (await response.json()).entries;
 }
 
+export async function fetchProviderQuota(sessionId: string): Promise<ProviderQuotaSnapshot | null> {
+  const response = await fetch(apiPath("/api/provider-quota", { sessionId }));
+  if (!response.ok) throw new Error(await response.text());
+  return (await response.json()).snapshot ?? null;
+}
+
 export async function submitRuntimeTurn(sessionId: string, prompt: string) {
   const response = await fetch("/api/turn", {
     method: "POST",

package/src/web-ui/src/runtime/useWebRuntime.ts

@@ -2,7 +2,7 @@ import { useEffect, useRef, useState } from "react";
 import { mockWebUiModel } from "../mockData";
 import type { MarchTimelineEvent, WebUiModel } from "../model";
 import { applyRuntimeEvent } from "./runtimeTimeline";
-import { connectRuntimeEvents, createRuntimeSession, fetchFsList, fetchFsRoots, fetchRuntimeSnapshot, submitRuntimeTurn } from "./client";
+import { connectRuntimeEvents, createRuntimeSession, fetchFsList, fetchFsRoots, fetchProviderQuota, fetchRuntimeSnapshot, submitRuntimeTurn } from "./client";
 import type { FsEntry } from "./client";
 
 export type WebRuntimeState = {
@@ -48,6 +48,12 @@ export function useWebRuntime(): WebRuntimeState {
       activeSessionId,
       (event) => {
         setConnected(true);
+        if (event.type === "provider_quota_snapshot") {
+          setModel((current) => current.activeSessionId === activeSessionId
+            ? { ...current, providerQuota: event.snapshot }
+            : current);
+          return;
+        }
         setModel((current) => {
           const next = updateTimelineEvents(current, (events) => applyRuntimeEvent(events, event));
           rememberTimeline(next, timelineCache.current);
@@ -56,6 +62,7 @@ export function useWebRuntime(): WebRuntimeState {
       },
       () => setConnected(false),
     );
+    refreshProviderQuota(activeSessionId).catch(() => undefined);
     return disconnect;
   }, [activeSessionId]);
 
@@ -79,6 +86,11 @@ export function useWebRuntime(): WebRuntimeState {
     }
   }
 
+  async function refreshProviderQuota(sessionId: string) {
+    const providerQuota = await fetchProviderQuota(sessionId);
+    setModel((current) => current.activeSessionId === sessionId ? { ...current, providerQuota } : current);
+  }
+
   async function browseRoots() {
     setFsPath(null);
     setFsEntries(await fetchFsRoots());

package/src/web-ui/src/styles/shell.css

@@ -110,6 +110,16 @@
   .fs-entry-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px; }
   .fs-entry-row button, .fs-row { min-height: 28px; padding: 0 7px; text-align: left; }
   .fs-entry-row button:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-text-primary); }
+  .provider-quota { margin-top: 12px; border-top: 1px solid var(--color-border-subtle); padding-top: 12px; display: grid; gap: 9px; }
+  .provider-quota-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; }
+  .provider-quota-header span { color: var(--color-text-primary); font-weight: var(--font-weight-ui-medium); }
+  .provider-quota-header time, .quota-row em { color: var(--color-text-muted); font-style: normal; }
+  .quota-row { display: grid; gap: 5px; font-size: 12px; }
+  .quota-row-main { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
+  .quota-row-main span { color: var(--color-text-primary); }
+  .quota-row-main strong { color: var(--color-accent); font-size: 12px; }
+  .quota-bar { height: 6px; overflow: hidden; border-radius: 999px; background: var(--color-bg-surface); box-shadow: inset 0 0 0 1px var(--color-border-subtle); }
+  .quota-bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--color-accent), color-mix(in srgb, var(--color-accent) 72%, white)); }
   .session-row, .activity-row { width: 100%; min-height: 34px; border: 0; border-radius: var(--radius-control); padding: 7px 8px; background: transparent; color: var(--color-text-primary); display: flex; align-items: center; justify-content: space-between; gap: 8px; text-align: left; font-size: 13px; }
   .session-row.active { background: var(--color-accent-soft); color: var(--color-accent); font-weight: var(--font-weight-ui-medium); }
   .session-row time, .activity-row time { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-text-muted); font-size: 12px; }

package/src/web-ui/dist/assets/index-BUmhnID4.css

@@ -1 +0,0 @@
-@layer theme.palette{:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;--font-sans:"Segoe UI Variable Text", "Segoe UI Variable", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, DengXian, "等线", "Microsoft YaHei UI", sans-serif;--font-mono:ui-monospace, "SFMono-Regular", "Cascadia Code", "JetBrains Mono", "Fira Code", Consolas, "Liberation Mono", Menlo, monospace;--font-weight-ui-normal:500;--font-weight-content-normal:600;--font-weight-ui-medium:600;--font-weight-ui-strong:700;--palette-white:#fff;--palette-slate-50:#f8fafc;--palette-slate-100:#f1f5f9;--palette-slate-200:#e2e8f0;--palette-slate-400:#94a3b8;--palette-slate-500:#64748b;--palette-slate-700:#334155;--palette-slate-900:#0f172a;--palette-slate-950:#020617;--palette-blue-400:#60a5fa;--palette-blue-600:#2563eb;--palette-green-700:#15803d;--palette-amber-600:#d97706;--palette-red-600:#dc2626}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}}}@layer theme.semantic{:root{--color-bg-page:#f3f4f6;--color-bg-surface:var(--palette-white);--color-bg-sidebar:#ffffffbd;--color-bg-subtle:var(--palette-slate-50);--color-text-primary:var(--palette-slate-900);--color-text-muted:var(--palette-slate-500);--color-text-inverse:var(--palette-white);--color-border-subtle:#0f172a14;--color-border-strong:#0f172a24;--color-accent:var(--palette-blue-600);--color-accent-soft:#2563eb14;--color-success:var(--palette-green-700);--color-warning:var(--palette-amber-600);--color-danger:var(--palette-red-600);--color-hover:#0000000d;--color-shadow-drawer:#00000026;--color-scrim:#0000004d}@media (prefers-color-scheme:dark){:root{--color-bg-page:var(--palette-slate-900);--color-bg-surface:var(--palette-slate-950);--color-bg-sidebar:var(--palette-slate-900);--color-bg-subtle:var(--palette-slate-900);--color-text-primary:var(--palette-slate-50);--color-text-muted:var(--palette-slate-400);--color-border-subtle:#94a3b81f;--color-border-strong:#94a3b833;--color-accent:var(--palette-blue-400);--color-accent-soft:#60a5fa24;--color-hover:#94a3b814}}}@layer theme.component{:root{--shell-left-width:260px;--shell-right-width:280px;--shell-mobile-panel-width:75vw;--header-height:36px;--composer-min-height:46px;--radius-row:6px;--radius-control:8px;--radius-composer:12px;--space-panel:8px;--tree-indent:16px}}@layer base{*{box-sizing:border-box}html,body,#root{height:100%;margin:0;overflow:hidden}body{background:var(--color-bg-page);color:var(--color-text-primary);font-family:var(--font-sans);font-weight:var(--font-weight-ui-normal);-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility}button,textarea{font:inherit}button{cursor:pointer}}@layer components{.app-shell{grid-template-columns:var(--shell-left-width) minmax(0, 1fr) var(--shell-right-width);background:var(--color-bg-page);height:100dvh;color:var(--color-text-primary);isolation:isolate;grid-template-rows:minmax(0,1fr) auto;grid-template-areas:"sidebar main right""sidebar footer right";display:grid;overflow:hidden}.panel{background:var(--color-bg-sidebar);min-height:0;overflow:hidden}.left-panel{border-right:1px solid var(--color-border-subtle);grid-area:sidebar}.right-panel{border-left:1px solid var(--color-border-subtle);flex-direction:column;grid-area:right;display:flex}.projects-header,.right-header,.main-header{height:var(--header-height);border-bottom:1px solid var(--color-border-subtle);background:var(--color-bg-sidebar);color:var(--color-text-muted);font-size:11px;font-weight:var(--font-weight-ui-medium);text-transform:uppercase;justify-content:space-between;align-items:center;padding:0 16px;display:flex}.projects-header h3{font:inherit;letter-spacing:.5px;margin:0}.menu-button{border-radius:var(--radius-control);width:28px;height:28px;color:var(--color-text-muted);background:0 0;border:0;justify-content:center;align-items:center;gap:3px;display:inline-flex}.menu-button span{background:currentColor;border-radius:999px;width:3.6px;height:3.6px}.menu-button:hover,.header-button:hover,.session-row:hover,.activity-row:hover{background:var(--color-hover)}.projects-body{height:calc(100% - var(--header-height));padding:var(--space-panel) 0;overflow:hidden}.project-tree-host{--trees-accent-override:var(--color-accent);--trees-bg-override:var(--color-bg-sidebar);--trees-bg-muted-override:var(--color-hover);--trees-border-color-override:var(--color-border-subtle);--trees-fg-override:var(--color-text-primary);--trees-fg-muted-override:var(--color-text-muted);--trees-selected-bg-override:var(--color-accent-soft);--trees-selected-fg-override:var(--color-accent);--trees-font-family-override:var(--font-sans);--trees-font-size-override:13px;--trees-border-radius-override:var(--radius-row);--trees-item-height:30px;--trees-item-padding-x-override:8px;--trees-item-margin-x-override:8px;--trees-item-row-gap-override:4px;--trees-level-gap-override:var(--tree-indent);--trees-padding-inline-override:0px;--trees-scrollbar-gutter-override:6px;height:100%}.timeline{background:var(--color-bg-surface);flex-direction:column;grid-area:main;min-width:0;min-height:0;display:flex;overflow:hidden}.main-header{background:var(--color-bg-surface)}.runtime-pill{color:var(--color-text-muted);background:var(--color-bg-subtle);border-radius:999px;padding:2px 7px;font-size:12px}.runtime-pill.connected{color:var(--color-accent);background:var(--color-accent-soft)}.timeline-scroll{flex:1;min-height:0;padding:16px 18px 24px;overflow:auto}.session-title{align-items:baseline;gap:8px;margin:0 0 14px 40px;display:flex}.session-title h1{font-size:17px;font-weight:var(--font-weight-ui-strong);letter-spacing:-.01em;margin:0}.session-title span{color:var(--color-text-muted);font-size:12px}.timeline-list{max-width:920px;margin:0 auto}.message-row{grid-template-columns:30px minmax(0,1fr);gap:10px;padding:10px 0;display:grid}.message-row+.message-row{border-top:1px solid var(--color-border-subtle)}.agent-dot{border-radius:var(--radius-control);background:var(--palette-slate-700);width:28px;height:28px;color:var(--color-text-inverse);place-items:center;font-size:12px;font-weight:800;display:grid}.agent-dot.march{background:var(--color-accent)}.message-body{min-width:0;color:var(--color-text-primary);font-size:14px;font-weight:var(--font-weight-content-normal);padding-top:3px;line-height:1.55}.message-body p{margin:0}.message-body time{color:var(--color-text-muted);margin-top:4px;font-size:11px;display:block}.timeline-aux{border:1px solid var(--color-border-subtle);border-radius:var(--radius-control);background:var(--color-bg-subtle);padding:7px 9px}.timeline-aux summary,.aux-title{align-items:center;gap:8px;min-height:20px;display:flex}.timeline-aux summary{cursor:pointer}.timeline-aux span,.timeline-aux em{color:var(--color-text-muted);font-size:12px;font-style:normal}.timeline-aux strong{text-overflow:ellipsis;white-space:nowrap;min-width:0;font-size:13px;font-weight:var(--font-weight-ui-medium);overflow:hidden}.timeline-aux p{color:var(--color-text-muted);margin:7px 0 0;font-size:13px}.tool-block span,.diff-inline,.terminal-block pre{font-family:var(--font-mono)}.diff-inline{border-left:2px solid var(--color-border-strong);margin-top:7px;padding-left:10px;font-size:13px}.diff-line{padding:2px 0}.diff-line.add{color:var(--color-success)}.diff-line.remove,.error-block strong{color:var(--color-danger)}.diff-line.keep{color:var(--color-text-muted)}.terminal-block pre{color:var(--color-text-muted);white-space:pre-wrap;margin:7px 0 0;font-size:12px}.permission-block.pending strong{color:var(--color-warning)}.permission-block.approved strong{color:var(--color-success)}.right-body{flex:1;min-height:0;padding:12px;overflow:auto}.workspace-picker{gap:7px;padding-bottom:10px;display:grid}.workspace-picker label{color:var(--color-text-muted);font-size:11px;font-weight:var(--font-weight-ui-medium);text-transform:uppercase}.workspace-input-row{grid-template-columns:minmax(0,1fr) auto;gap:4px;display:grid}.workspace-input-row input{border:1px solid var(--color-border-subtle);border-radius:var(--radius-control);background:var(--color-bg-surface);min-width:0;color:var(--color-text-primary);padding:7px 8px}.workspace-input-row button,.fs-entry-row button,.fs-row{border-radius:var(--radius-control);color:var(--color-text-muted);background:0 0;border:0}.workspace-input-row button{background:var(--color-accent-soft);color:var(--color-accent);padding:0 8px}.workspace-input-row button:disabled{opacity:.45}.workspace-path{text-overflow:ellipsis;white-space:nowrap;min-width:0;color:var(--color-text-muted);font-size:12px;overflow:hidden}.fs-entry-row{grid-template-columns:minmax(0,1fr) auto;gap:4px;display:grid}.fs-entry-row button,.fs-row{text-align:left;min-height:28px;padding:0 7px}.fs-entry-row button:first-child{text-overflow:ellipsis;white-space:nowrap;color:var(--color-text-primary);overflow:hidden}.session-row,.activity-row{border-radius:var(--radius-control);width:100%;min-height:34px;color:var(--color-text-primary);text-align:left;background:0 0;border:0;justify-content:space-between;align-items:center;gap:8px;padding:7px 8px;font-size:13px;display:flex}.session-row.active{background:var(--color-accent-soft);color:var(--color-accent);font-weight:var(--font-weight-ui-medium)}.session-row time,.activity-row time{text-overflow:ellipsis;white-space:nowrap;min-width:0;color:var(--color-text-muted);font-size:12px;overflow:hidden}.right-divider{border-top:1px solid var(--color-border-subtle);color:var(--color-text-muted);font-size:11px;font-weight:var(--font-weight-ui-medium);text-transform:uppercase;margin:12px 0 4px;padding-top:12px}.activity-row{color:var(--color-text-muted)}.composer{background:var(--color-bg-surface);grid-area:footer;grid-template-columns:1fr;align-items:end;min-width:0;padding:0 16px 12px;display:grid}.composer-box{width:100%;min-height:var(--composer-min-height);border:1px solid var(--color-border-strong);border-radius:var(--radius-composer);background:var(--color-bg-sidebar);align-items:center;display:flex;position:relative;overflow:visible}.composer-box:focus-within{border-color:var(--color-accent);box-shadow:0 0 0 1px var(--color-accent-soft)}.composer textarea{resize:none;width:100%;max-height:160px;color:var(--color-text-primary);font-weight:var(--font-weight-content-normal);background:0 0;border:0;outline:0;padding:12px 124px 12px 12px}.composer-actions{align-items:center;gap:2px;display:flex;position:absolute;bottom:8px;right:8px}.session-ring,.chip-button,.icon-action,.send-icon,.mobile-toggle{border-radius:var(--radius-control);width:28px;height:28px;color:var(--color-text-muted);background:0 0;border:0;justify-content:center;align-items:center;display:inline-flex}.session-ring:before{content:"";border:2px solid var(--color-accent);border-radius:999px;width:14px;height:14px}.chip-button{width:auto;padding:0 8px;font-size:12px}.icon-action:hover,.chip-button:hover,.mobile-toggle:hover{background:var(--color-hover)}.send-icon{background:var(--color-accent);color:var(--color-text-inverse);font-size:16px;font-weight:700}.send-icon:disabled{opacity:.45}.mobile-toggle,.overlay{display:none}@media (width<=920px){html,body{width:100%;min-height:0;position:fixed;inset:0}.app-shell{height:100dvh;padding-top:env(safe-area-inset-top,0);flex-direction:column;display:flex}.timeline{flex:1;min-height:0}.composer{padding:0 1px max(2px, env(safe-area-inset-bottom));flex:none;grid-template-columns:30px minmax(0,1fr) 30px;gap:1px}.mobile-toggle{align-self:center;height:44px;display:inline-flex}.composer-box{border-radius:10px;min-height:44px}.composer textarea{padding-right:114px}.left-panel,.right-panel{top:env(safe-area-inset-top,0);z-index:30;width:var(--shell-mobile-panel-width);background:var(--color-bg-sidebar);box-shadow:4px 0 24px var(--color-shadow-drawer);transition:transform .22s cubic-bezier(.2,.8,.2,1);position:fixed;bottom:0;transform:translate(-100%)}.left-panel{border-top-right-radius:14px;border-bottom-right-radius:14px;left:0}.right-panel{box-shadow:-4px 0 24px var(--color-shadow-drawer);border-top-left-radius:14px;border-bottom-left-radius:14px;right:0;transform:translate(100%)}.app-shell[data-left-open=true] .left-panel,.app-shell[data-right-open=true] .right-panel{transform:translate(0)}.app-shell[data-left-open=true] .overlay,.app-shell[data-right-open=true] .overlay{z-index:20;background:var(--color-scrim);display:block;position:fixed;inset:0}}}