@stigmer/react 0.3.4 → 0.4.1

package/session/useSessionUsage.d.ts

@@ -1,74 +1,58 @@
 import type { AgentExecution } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/api_pb";
 /**
- * Per-model cost breakdown computed from per-message {@link LlmCallMetrics}.
+ * Per-model cost breakdown.
  */
 export interface ModelCostEntry {
-    /** Model identifier (e.g., `"claude-3-5-sonnet-20241022"`). */
+    /** Model identifier (e.g. "claude-sonnet-4-20250514"). */
     readonly model: string;
-    /** Provider that served the model (e.g., `"anthropic"`). */
+    /** Provider name (e.g. "anthropic", "openai"). */
     readonly provider: string;
-    /** Estimated cost in USD for all calls to this model. */
+    /** Estimated cost in USD for this model's usage. */
     readonly estimatedCostUsd: number;
-    /** Total non-cached input tokens across all calls to this model. */
+    /** Total input tokens consumed by this model. */
     readonly inputTokens: number;
-    /** Total output tokens across all calls to this model. */
+    /** Total output tokens generated by this model. */
     readonly outputTokens: number;
-    /** Total cache creation tokens across all calls to this model. */
+    /** Tokens used to create cache entries. */
     readonly cacheCreationTokens: number;
-    /** Total cache read tokens across all calls to this model. */
+    /** Tokens served from cache. */
     readonly cacheReadTokens: number;
     /** Number of LLM calls made to this model. */
     readonly callCount: number;
 }
 /** Return value of {@link useSessionUsage}. */
 export interface UseSessionUsageReturn {
-    /** Total estimated cost across all executions in the session. */
+    /** Aggregate estimated cost in USD across all models. */
     readonly totalCostUsd: number;
-    /** Total tokens (all types) across all executions. */
+    /** Total tokens (input + output) across all models. */
     readonly totalTokens: number;
-    /** Total input tokens (non-cached) across all executions. */
+    /** Total input tokens across all models. */
     readonly inputTokens: number;
-    /** Total output tokens across all executions. */
+    /** Total output tokens across all models. */
     readonly outputTokens: number;
-    /** Total cache read tokens across all executions. */
+    /** Total tokens served from cache across all models. */
     readonly cacheReadTokens: number;
-    /** Total cache creation tokens across all executions. */
+    /** Total tokens used to create cache entries across all models. */
     readonly cacheCreationTokens: number;
-    /** Total number of LLM calls across all executions. */
+    /** Total number of LLM calls in this session. */
     readonly llmCallCount: number;
-    /** Per-model breakdown, sorted by cost descending. */
+    /** Per-model cost and token breakdown. */
     readonly modelBreakdown: readonly ModelCostEntry[];
-    /** Primary model (first model encountered). */
+    /** Model with the highest usage in this session. */
     readonly primaryModel: string;
-    /** Primary provider (first provider encountered). */
+    /** Provider of the primary model. */
     readonly primaryProvider: string;
-    /** `true` when at least one execution has cost data. */
+    /** `true` when usage data is available. */
     readonly hasUsage: boolean;
 }
 /**
- * Pure derivation hook that aggregates usage data across all executions
- * in a session from per-message {@link LlmCallMetrics}.
+ * Usage hook for session-level cost and token aggregation.
  *
- * Follows the same pattern as {@link useSessionArtifacts} and
- * {@link useSessionWriteBacks}: `useMemo`-based derivation, no side
- * effects, no data fetching. Takes the same `executions` array input.
+ * Calls `getSessionUsageReport` to fetch real usage data from the
+ * billing domain. Returns zeros while loading or when no session is
+ * available.
  *
- * Per-message `llm_metrics` on `AgentMessage` (type == MESSAGE_AI) is
- * the single source of truth for cost data. This hook walks all messages
- * (main agent + sub-agents) across all executions and sums the fields.
- *
- * @param executions - All executions for a session, in chronological
- *   order. Pass both completed and active-stream executions.
- *
- * @example
- * ```tsx
- * const conv = useSessionConversation(sessionId, org);
- * const allExecutions = [
- *   ...conv.completedExecutions,
- *   ...(conv.activeStreamExecution ? [conv.activeStreamExecution] : []),
- * ];
- * const { totalCostUsd, totalTokens, hasUsage } = useSessionUsage(allExecutions);
- * ```
+ * @param executions - All executions for a session (used to derive session ID).
  */
 export declare function useSessionUsage(executions: readonly AgentExecution[]): UseSessionUsageReturn;
 //# sourceMappingURL=useSessionUsage.d.ts.map

package/session/useSessionUsage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useSessionUsage.d.ts","sourceRoot":"","sources":["../../src/session/useSessionUsage.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,6DAA6D,CAAC;AAIlG;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,+DAA+D;IAC/D,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,4DAA4D;IAC5D,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;IAC1B,yDAAyD;IACzD,QAAQ,CAAC,gBAAgB,EAAE,MAAM,CAAC;IAClC,oEAAoE;IACpE,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAC;IAC7B,0DAA0D;IAC1D,QAAQ,CAAC,YAAY,EAAE,MAAM,CAAC;IAC9B,kEAAkE;IAClE,QAAQ,CAAC,mBAAmB,EAAE,MAAM,CAAC;IACrC,8DAA8D;IAC9D,QAAQ,CAAC,eAAe,EAAE,MAAM,CAAC;IACjC,8CAA8C;IAC9C,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;CAC5B;AAED,+CAA+C;AAC/C,MAAM,WAAW,qBAAqB;IACpC,iEAAiE;IACjE,QAAQ,CAAC,YAAY,EAAE,MAAM,CAAC;IAC9B,sDAAsD;IACtD,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAC;IAC7B,6DAA6D;IAC7D,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAC;IAC7B,iDAAiD;IACjD,QAAQ,CAAC,YAAY,EAAE,MAAM,CAAC;IAC9B,qDAAqD;IACrD,QAAQ,CAAC,eAAe,EAAE,MAAM,CAAC;IACjC,yDAAyD;IACzD,QAAQ,CAAC,mBAAmB,EAAE,MAAM,CAAC;IACrC,uDAAuD;IACvD,QAAQ,CAAC,YAAY,EAAE,MAAM,CAAC;IAC9B,sDAAsD;IACtD,QAAQ,CAAC,cAAc,EAAE,SAAS,cAAc,EAAE,CAAC;IACnD,+CAA+C;IAC/C,QAAQ,CAAC,YAAY,EAAE,MAAM,CAAC;IAC9B,qDAAqD;IACrD,QAAQ,CAAC,eAAe,EAAE,MAAM,CAAC;IACjC,wDAAwD;IACxD,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,eAAe,CAC7B,UAAU,EAAE,SAAS,cAAc,EAAE,GACpC,qBAAqB,CAqFvB"}
+{"version":3,"file":"useSessionUsage.d.ts","sourceRoot":"","sources":["../../src/session/useSessionUsage.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,6DAA6D,CAAC;AASlG;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,0DAA0D;IAC1D,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,kDAAkD;IAClD,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;IAC1B,oDAAoD;IACpD,QAAQ,CAAC,gBAAgB,EAAE,MAAM,CAAC;IAClC,iDAAiD;IACjD,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAC;IAC7B,mDAAmD;IACnD,QAAQ,CAAC,YAAY,EAAE,MAAM,CAAC;IAC9B,2CAA2C;IAC3C,QAAQ,CAAC,mBAAmB,EAAE,MAAM,CAAC;IACrC,gCAAgC;IAChC,QAAQ,CAAC,eAAe,EAAE,MAAM,CAAC;IACjC,8CAA8C;IAC9C,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;CAC5B;AAED,+CAA+C;AAC/C,MAAM,WAAW,qBAAqB;IACpC,yDAAyD;IACzD,QAAQ,CAAC,YAAY,EAAE,MAAM,CAAC;IAC9B,uDAAuD;IACvD,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAC;IAC7B,4CAA4C;IAC5C,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAC;IAC7B,6CAA6C;IAC7C,QAAQ,CAAC,YAAY,EAAE,MAAM,CAAC;IAC9B,wDAAwD;IACxD,QAAQ,CAAC,eAAe,EAAE,MAAM,CAAC;IACjC,mEAAmE;IACnE,QAAQ,CAAC,mBAAmB,EAAE,MAAM,CAAC;IACrC,iDAAiD;IACjD,QAAQ,CAAC,YAAY,EAAE,MAAM,CAAC;IAC9B,0CAA0C;IAC1C,QAAQ,CAAC,cAAc,EAAE,SAAS,cAAc,EAAE,CAAC;IACnD,oDAAoD;IACpD,QAAQ,CAAC,YAAY,EAAE,MAAM,CAAC;IAC9B,qCAAqC;IACrC,QAAQ,CAAC,eAAe,EAAE,MAAM,CAAC;IACjC,2CAA2C;IAC3C,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC;CAC5B;AAoDD;;;;;;;;GAQG;AACH,wBAAgB,eAAe,CAC7B,UAAU,EAAE,SAAS,cAAc,EAAE,GACpC,qBAAqB,CAwBvB"}

package/session/useSessionUsage.js

@@ -1,107 +1,74 @@
 "use client";
 import { useMemo } from "react";
+import { create } from "@bufbuild/protobuf";
+import { GetSessionUsageReportInputSchema, } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/io_pb";
+import { useStigmer } from "../hooks";
+import { useFetch } from "../internal/useFetch";
+const EMPTY = {
+    totalCostUsd: 0,
+    totalTokens: 0,
+    inputTokens: 0,
+    outputTokens: 0,
+    cacheReadTokens: 0,
+    cacheCreationTokens: 0,
+    llmCallCount: 0,
+    modelBreakdown: [],
+    primaryModel: "",
+    primaryProvider: "",
+    hasUsage: false,
+};
+function microsToUsd(micros) {
+    return Number(micros) / 1_000_000;
+}
+function mapModelUsage(m) {
+    return {
+        model: m.model,
+        provider: m.provider,
+        estimatedCostUsd: microsToUsd(m.billableCostMicros),
+        inputTokens: Number(m.inputTokens),
+        outputTokens: Number(m.outputTokens),
+        cacheCreationTokens: Number(m.cacheCreationInputTokens),
+        cacheReadTokens: Number(m.cacheReadInputTokens),
+        callCount: m.callCount,
+    };
+}
+function mapReport(report) {
+    const agg = report.totalUsage;
+    if (!agg)
+        return EMPTY;
+    return {
+        totalCostUsd: microsToUsd(agg.billableCostMicros),
+        totalTokens: Number(agg.totalTokens),
+        inputTokens: Number(agg.inputTokens),
+        outputTokens: Number(agg.outputTokens),
+        cacheReadTokens: Number(agg.cacheReadInputTokens),
+        cacheCreationTokens: Number(agg.cacheCreationInputTokens),
+        llmCallCount: agg.llmCallCount,
+        modelBreakdown: report.modelBreakdown.map(mapModelUsage),
+        primaryModel: agg.primaryModel,
+        primaryProvider: agg.primaryProvider,
+        hasUsage: true,
+    };
+}
 /**
- * Pure derivation hook that aggregates usage data across all executions
- * in a session from per-message {@link LlmCallMetrics}.
- *
- * Follows the same pattern as {@link useSessionArtifacts} and
- * {@link useSessionWriteBacks}: `useMemo`-based derivation, no side
- * effects, no data fetching. Takes the same `executions` array input.
- *
- * Per-message `llm_metrics` on `AgentMessage` (type == MESSAGE_AI) is
- * the single source of truth for cost data. This hook walks all messages
- * (main agent + sub-agents) across all executions and sums the fields.
+ * Usage hook for session-level cost and token aggregation.
  *
- * @param executions - All executions for a session, in chronological
- *   order. Pass both completed and active-stream executions.
+ * Calls `getSessionUsageReport` to fetch real usage data from the
+ * billing domain. Returns zeros while loading or when no session is
+ * available.
  *
- * @example
- * ```tsx
- * const conv = useSessionConversation(sessionId, org);
- * const allExecutions = [
- *   ...conv.completedExecutions,
- *   ...(conv.activeStreamExecution ? [conv.activeStreamExecution] : []),
- * ];
- * const { totalCostUsd, totalTokens, hasUsage } = useSessionUsage(allExecutions);
- * ```
+ * @param executions - All executions for a session (used to derive session ID).
  */
 export function useSessionUsage(executions) {
+    const stigmer = useStigmer();
+    const sessionId = useMemo(() => executions[0]?.spec?.sessionId ?? null, [executions]);
+    const { data: report } = useFetch(sessionId
+        ? () => stigmer.agentExecution.getSessionUsageReport(create(GetSessionUsageReportInputSchema, { sessionId }))
+        : null, [sessionId, stigmer], null, { cacheKey: sessionId ? `session-usage:${sessionId}` : undefined });
     return useMemo(() => {
-        let totalCostUsd = 0;
-        let totalTokens = 0;
-        let inputTokens = 0;
-        let outputTokens = 0;
-        let cacheReadTokens = 0;
-        let cacheCreationTokens = 0;
-        let llmCallCount = 0;
-        let primaryModel = "";
-        let primaryProvider = "";
-        const modelMap = new Map();
-        const processMessage = (msg) => {
-            const m = msg.llmMetrics;
-            if (!m)
-                return;
-            totalCostUsd += m.estimatedCostUsd;
-            totalTokens += m.totalTokens;
-            inputTokens += m.inputTokens;
-            outputTokens += m.outputTokens;
-            cacheReadTokens += m.cacheReadTokens;
-            cacheCreationTokens += m.cacheCreationTokens;
-            llmCallCount++;
-            if (!primaryModel && m.model) {
-                primaryModel = m.model;
-                primaryProvider = m.provider;
-            }
-            const key = `${m.model}\0${m.provider}`;
-            const existing = modelMap.get(key);
-            if (existing) {
-                modelMap.set(key, {
-                    ...existing,
-                    estimatedCostUsd: existing.estimatedCostUsd + m.estimatedCostUsd,
-                    inputTokens: existing.inputTokens + m.inputTokens,
-                    outputTokens: existing.outputTokens + m.outputTokens,
-                    cacheCreationTokens: existing.cacheCreationTokens + m.cacheCreationTokens,
-                    cacheReadTokens: existing.cacheReadTokens + m.cacheReadTokens,
-                    callCount: existing.callCount + 1,
-                });
-            }
-            else {
-                modelMap.set(key, {
-                    model: m.model,
-                    provider: m.provider,
-                    estimatedCostUsd: m.estimatedCostUsd,
-                    inputTokens: m.inputTokens,
-                    outputTokens: m.outputTokens,
-                    cacheCreationTokens: m.cacheCreationTokens,
-                    cacheReadTokens: m.cacheReadTokens,
-                    callCount: 1,
-                });
-            }
-        };
-        for (const execution of executions) {
-            for (const msg of execution.status?.messages ?? []) {
-                processMessage(msg);
-            }
-            for (const sub of execution.status?.subAgentExecutions ?? []) {
-                for (const msg of sub.messages) {
-                    processMessage(msg);
-                }
-            }
-        }
-        const modelBreakdown = Array.from(modelMap.values()).sort((a, b) => b.estimatedCostUsd - a.estimatedCostUsd);
-        return {
-            totalCostUsd,
-            totalTokens,
-            inputTokens,
-            outputTokens,
-            cacheReadTokens,
-            cacheCreationTokens,
-            llmCallCount,
-            modelBreakdown,
-            primaryModel,
-            primaryProvider,
-            hasUsage: llmCallCount > 0,
-        };
-    }, [executions]);
+        if (!report)
+            return EMPTY;
+        return mapReport(report);
+    }, [report]);
 }
 //# sourceMappingURL=useSessionUsage.js.map

package/session/useSessionUsage.js.map

@@ -1 +1 @@
-{"version":3,"file":"useSessionUsage.js","sourceRoot":"","sources":["../../src/session/useSessionUsage.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"useSessionUsage.js","sourceRoot":"","sources":["../../src/session/useSessionUsage.ts"],"names":[],"mappings":"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"}

package/settings/BillingSection.d.ts

@@ -0,0 +1,3 @@
+export { BillingSection } from "../billing/BillingSection";
+export type { BillingSectionProps } from "../billing/BillingSection";
+//# sourceMappingURL=BillingSection.d.ts.map

package/settings/BillingSection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BillingSection.d.ts","sourceRoot":"","sources":["../../src/settings/BillingSection.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC3D,YAAY,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC"}

package/settings/BillingSection.js

@@ -0,0 +1,3 @@
+"use client";
+export { BillingSection } from "../billing/BillingSection";
+//# sourceMappingURL=BillingSection.js.map

package/settings/BillingSection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BillingSection.js","sourceRoot":"","sources":["../../src/settings/BillingSection.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC"}

package/settings/index.d.ts

@@ -1,6 +1,8 @@
 export { SETTINGS_NAV_GROUPS } from "./settings-nav";
 export type { SettingsNavItem, SettingsNavGroup } from "./settings-nav";
 export { ApiKeysSection } from "./ApiKeysSection";
+export { BillingSection } from "./BillingSection";
+export type { BillingSectionProps } from "./BillingSection";
 export { MembersSection } from "./MembersSection";
 export { OrgProfileSection } from "./OrgProfileSection";
 export { EnvironmentsSection } from "./EnvironmentsSection";

package/settings/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/settings/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AACrD,YAAY,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAExE,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AACtE,YAAY,EAAE,6BAA6B,EAAE,MAAM,4BAA4B,CAAC;AAChF,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/settings/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AACrD,YAAY,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAExE,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,YAAY,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AACtE,YAAY,EAAE,6BAA6B,EAAE,MAAM,4BAA4B,CAAC;AAChF,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC"}

package/settings/index.js

@@ -1,5 +1,6 @@
 export { SETTINGS_NAV_GROUPS } from "./settings-nav";
 export { ApiKeysSection } from "./ApiKeysSection";
+export { BillingSection } from "./BillingSection";
 export { MembersSection } from "./MembersSection";
 export { OrgProfileSection } from "./OrgProfileSection";
 export { EnvironmentsSection } from "./EnvironmentsSection";

package/settings/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/settings/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAGrD,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AAEtE,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/settings/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAGrD,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAElD,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AAEtE,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC"}

package/settings/settings-nav.js

@@ -31,7 +31,7 @@ export const SETTINGS_NAV_GROUPS = [
     },
     {
         label: "Billing & Usage",
-        description: "Subscription management and usage metrics.",
+        description: "Credit management and usage metrics.",
         items: [
             { href: "/settings/billing", label: "Billing", icon: CreditCard },
             { href: "/settings/usage", label: "Usage", icon: BarChart3 },

package/settings/settings-nav.js.map

@@ -1 +1 @@
-{"version":3,"file":"settings-nav.js","sourceRoot":"","sources":["../../src/settings/settings-nav.ts"],"names":[],"mappings":"AACA,OAAO,EACL,SAAS,EACT,SAAS,EACT,GAAG,EACH,SAAS,EACT,UAAU,EACV,QAAQ,EACR,IAAI,EACJ,IAAI,EACJ,WAAW,EACX,KAAK,GACN,MAAM,cAAc,CAAC;AAyBtB,2DAA2D;AAC3D,MAAM,CAAC,MAAM,mBAAmB,GAAgC;IAC9D;QACE,KAAK,EAAE,cAAc;QACrB,WAAW,EACT,kEAAkE;QACpE,KAAK,EAAE;YACL,EAAE,IAAI,EAAE,uBAAuB,EAAE,KAAK,EAAE,aAAa,EAAE,IAAI,EAAE,SAAS,EAAE;YACxE,EAAE,IAAI,EAAE,mBAAmB,EAAE,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAE;YAC5D,EAAE,IAAI,EAAE,uBAAuB,EAAE,KAAK,EAAE,aAAa,EAAE,IAAI,EAAE,IAAI,EAAE;YACnE;gBACE,IAAI,EAAE,8BAA8B;gBACpC,KAAK,EAAE,oBAAoB;gBAC3B,IAAI,EAAE,WAAW;aAClB;SACF;KACF;IACD;QACE,KAAK,EAAE,eAAe;QACtB,WAAW,EACT,mFAAmF;QACrF,KAAK,EAAE;YACL,EAAE,IAAI,EAAE,oBAAoB,EAAE,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,QAAQ,EAAE;YACjE;gBACE,IAAI,EAAE,4BAA4B;gBAClC,KAAK,EAAE,kBAAkB;gBACzB,IAAI,EAAE,IAAI;aACX;YACD,EAAE,IAAI,EAAE,wBAAwB,EAAE,KAAK,EAAE,cAAc,EAAE,IAAI,EAAE,GAAG,EAAE;YACpE,EAAE,IAAI,EAAE,sBAAsB,EAAE,KAAK,EAAE,YAAY,EAAE,IAAI,EAAE,SAAS,EAAE;SACvE;KACF;IACD;QACE,KAAK,EAAE,iBAAiB;QACxB,WAAW,EAAE,4CAA4C;QACzD,KAAK,EAAE;YACL,EAAE,IAAI,EAAE,mBAAmB,EAAE,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,UAAU,EAAE;YACjE,EAAE,IAAI,EAAE,iBAAiB,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE;SAC7D;KACF;CACF,CAAC"}
+{"version":3,"file":"settings-nav.js","sourceRoot":"","sources":["../../src/settings/settings-nav.ts"],"names":[],"mappings":"AACA,OAAO,EACL,SAAS,EACT,SAAS,EACT,GAAG,EACH,SAAS,EACT,UAAU,EACV,QAAQ,EACR,IAAI,EACJ,IAAI,EACJ,WAAW,EACX,KAAK,GACN,MAAM,cAAc,CAAC;AAyBtB,2DAA2D;AAC3D,MAAM,CAAC,MAAM,mBAAmB,GAAgC;IAC9D;QACE,KAAK,EAAE,cAAc;QACrB,WAAW,EACT,kEAAkE;QACpE,KAAK,EAAE;YACL,EAAE,IAAI,EAAE,uBAAuB,EAAE,KAAK,EAAE,aAAa,EAAE,IAAI,EAAE,SAAS,EAAE;YACxE,EAAE,IAAI,EAAE,mBAAmB,EAAE,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAE;YAC5D,EAAE,IAAI,EAAE,uBAAuB,EAAE,KAAK,EAAE,aAAa,EAAE,IAAI,EAAE,IAAI,EAAE;YACnE;gBACE,IAAI,EAAE,8BAA8B;gBACpC,KAAK,EAAE,oBAAoB;gBAC3B,IAAI,EAAE,WAAW;aAClB;SACF;KACF;IACD;QACE,KAAK,EAAE,eAAe;QACtB,WAAW,EACT,mFAAmF;QACrF,KAAK,EAAE;YACL,EAAE,IAAI,EAAE,oBAAoB,EAAE,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,QAAQ,EAAE;YACjE;gBACE,IAAI,EAAE,4BAA4B;gBAClC,KAAK,EAAE,kBAAkB;gBACzB,IAAI,EAAE,IAAI;aACX;YACD,EAAE,IAAI,EAAE,wBAAwB,EAAE,KAAK,EAAE,cAAc,EAAE,IAAI,EAAE,GAAG,EAAE;YACpE,EAAE,IAAI,EAAE,sBAAsB,EAAE,KAAK,EAAE,YAAY,EAAE,IAAI,EAAE,SAAS,EAAE;SACvE;KACF;IACD;QACE,KAAK,EAAE,iBAAiB;QACxB,WAAW,EAAE,sCAAsC;QACnD,KAAK,EAAE;YACL,EAAE,IAAI,EAAE,mBAAmB,EAAE,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,UAAU,EAAE;YACjE,EAAE,IAAI,EAAE,iBAAiB,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE;SAC7D;KACF;CACF,CAAC"}

package/src/billing/AutoRechargeCard.tsx

@@ -0,0 +1,274 @@
+"use client";
+
+import { useState, useCallback, useEffect } from "react";
+import { cn } from "@stigmer/theme";
+import type { AutoRechargeConfig } from "@stigmer/protos/ai/stigmer/billing/v1/billing_account_pb";
+import { BillingAccountStatus } from "@stigmer/protos/ai/stigmer/billing/v1/enum_pb";
+import { getUserMessage } from "@stigmer/sdk";
+import { useSetAutoRechargeConfig } from "./useSetAutoRechargeConfig";
+
+/** Props for {@link AutoRechargeCard}. */
+export interface AutoRechargeCardProps {
+  /** Organization ID. */
+  readonly orgId: string;
+  /** Current auto-recharge configuration from the billing account. */
+  readonly autoRecharge?: AutoRechargeConfig;
+  /** Whether the account has a saved payment method. */
+  readonly hasPaymentMethod: boolean;
+  /** Account status — config disabled when suspended or closed. */
+  readonly accountStatus: BillingAccountStatus;
+  /** Called after a successful save so the parent can refresh account data. */
+  readonly onSaved?: () => void;
+  /** Additional CSS class names. */
+  readonly className?: string;
+}
+
+const MICROS_PER_DOLLAR = BigInt(1_000_000);
+
+function microsToDollars(micros: bigint): string {
+  if (micros === BigInt(0)) return "";
+  const dollars = Number(micros) / 1_000_000;
+  return dollars.toString();
+}
+
+function dollarsToMicros(value: string): bigint {
+  const num = parseFloat(value);
+  if (isNaN(num) || num < 0) return BigInt(0);
+  return BigInt(Math.round(num * 1_000_000));
+}
+
+/**
+ * Auto-recharge configuration card for the billing settings page.
+ *
+ * Shows a toggle to enable/disable auto-recharge, with input fields
+ * for threshold, recharge amount, and monthly cap. Displays a
+ * disabled state with an explanatory message when no payment method
+ * is on file. Validates inputs client-side before submitting.
+ *
+ * @example
+ * ```tsx
+ * <AutoRechargeCard
+ *   orgId={orgId}
+ *   autoRecharge={account.autoRecharge}
+ *   hasPaymentMethod={!!account.defaultPaymentMethod?.paymentMethodId}
+ *   accountStatus={account.status}
+ *   onSaved={refetch}
+ * />
+ * ```
+ */
+export function AutoRechargeCard({
+  orgId,
+  autoRecharge,
+  hasPaymentMethod,
+  accountStatus,
+  onSaved,
+  className,
+}: AutoRechargeCardProps) {
+  const { setConfig, isSubmitting, error, clearError } =
+    useSetAutoRechargeConfig();
+
+  const [enabled, setEnabled] = useState(autoRecharge?.enabled ?? false);
+  const [threshold, setThreshold] = useState(
+    microsToDollars(autoRecharge?.thresholdMicros ?? BigInt(0)),
+  );
+  const [amount, setAmount] = useState(
+    microsToDollars(autoRecharge?.rechargeAmountMicros ?? BigInt(0)),
+  );
+  const [cap, setCap] = useState(
+    microsToDollars(autoRecharge?.monthlyCapMicros ?? BigInt(0)),
+  );
+  const [saved, setSaved] = useState(false);
+
+  useEffect(() => {
+    if (!autoRecharge) return;
+    setEnabled(autoRecharge.enabled);
+    setThreshold(microsToDollars(autoRecharge.thresholdMicros));
+    setAmount(microsToDollars(autoRecharge.rechargeAmountMicros));
+    setCap(microsToDollars(autoRecharge.monthlyCapMicros));
+  }, [autoRecharge]);
+
+  const isAccountActive =
+    accountStatus === BillingAccountStatus.billing_account_active;
+  const canConfigure = hasPaymentMethod && isAccountActive;
+
+  const hasChanges =
+    enabled !== (autoRecharge?.enabled ?? false) ||
+    dollarsToMicros(threshold) !==
+      (autoRecharge?.thresholdMicros ?? BigInt(0)) ||
+    dollarsToMicros(amount) !==
+      (autoRecharge?.rechargeAmountMicros ?? BigInt(0)) ||
+    dollarsToMicros(cap) !== (autoRecharge?.monthlyCapMicros ?? BigInt(0));
+
+  const handleSave = useCallback(async () => {
+    clearError();
+    setSaved(false);
+
+    try {
+      await setConfig({
+        orgId,
+        enabled,
+        thresholdMicros: dollarsToMicros(threshold),
+        rechargeAmountMicros: dollarsToMicros(amount),
+        monthlyCapMicros: dollarsToMicros(cap),
+      });
+      setSaved(true);
+      onSaved?.();
+      setTimeout(() => setSaved(false), 3000);
+    } catch {
+      // error state is managed by the hook
+    }
+  }, [orgId, enabled, threshold, amount, cap, setConfig, clearError, onSaved]);
+
+  return (
+    <div
+      className={cn(
+        "rounded-lg border border-border bg-card px-4 py-4",
+        className,
+      )}
+    >
+      <div className="flex items-center justify-between">
+        <div>
+          <h3 className="text-xs font-semibold text-foreground">
+            Auto-Recharge
+          </h3>
+          <p className="mt-0.5 text-[0.7rem] text-muted-foreground">
+            Automatically add credits when your balance runs low.
+          </p>
+        </div>
+        <button
+          type="button"
+          role="switch"
+          aria-checked={enabled}
+          disabled={!canConfigure || isSubmitting}
+          onClick={() => setEnabled((prev) => !prev)}
+          className={cn(
+            "relative inline-flex h-5 w-9 shrink-0 rounded-full transition-colors",
+            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+            "disabled:cursor-not-allowed disabled:opacity-50",
+            enabled ? "bg-primary" : "bg-muted",
+          )}
+        >
+          <span
+            className={cn(
+              "pointer-events-none block size-4 rounded-full bg-background shadow-sm ring-0 transition-transform",
+              enabled ? "translate-x-4" : "translate-x-0.5",
+              "mt-0.5",
+            )}
+          />
+        </button>
+      </div>
+
+      {!hasPaymentMethod && (
+        <p className="mt-3 text-xs text-muted-foreground">
+          A saved payment method is required to enable auto-recharge.
+          Purchase a credit pack first to save a card.
+        </p>
+      )}
+
+      {canConfigure && (
+        <div className="mt-4 space-y-3">
+          <DollarInput
+            id="ar-threshold"
+            label="When balance drops below"
+            value={threshold}
+            onChange={setThreshold}
+            disabled={isSubmitting}
+            placeholder="e.g. 5"
+          />
+          <DollarInput
+            id="ar-amount"
+            label="Recharge amount"
+            value={amount}
+            onChange={setAmount}
+            disabled={isSubmitting}
+            placeholder="e.g. 50"
+          />
+          <DollarInput
+            id="ar-cap"
+            label="Monthly cap"
+            value={cap}
+            onChange={setCap}
+            disabled={isSubmitting}
+            placeholder="e.g. 200"
+          />
+
+          <div className="flex items-center gap-3 pt-1">
+            <button
+              type="button"
+              disabled={!hasChanges || isSubmitting}
+              onClick={handleSave}
+              className={cn(
+                "rounded-md px-3 py-1.5 text-xs font-medium transition-colors",
+                "bg-primary text-primary-foreground hover:bg-primary/90",
+                "disabled:pointer-events-none disabled:opacity-50",
+              )}
+              aria-busy={isSubmitting}
+            >
+              {isSubmitting ? "Saving\u2026" : "Save"}
+            </button>
+            {saved && (
+              <span className="text-xs text-emerald-600 dark:text-emerald-400">
+                Saved
+              </span>
+            )}
+          </div>
+
+          {error && (
+            <p className="text-xs text-destructive" role="alert">
+              {getUserMessage(error)}
+            </p>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// DollarInput (internal)
+// ---------------------------------------------------------------------------
+
+function DollarInput({
+  id,
+  label,
+  value,
+  onChange,
+  disabled,
+  placeholder,
+}: {
+  id: string;
+  label: string;
+  value: string;
+  onChange: (v: string) => void;
+  disabled?: boolean;
+  placeholder?: string;
+}) {
+  return (
+    <div>
+      <label htmlFor={id} className="block text-xs text-muted-foreground">
+        {label}
+      </label>
+      <div className="relative mt-1">
+        <span className="pointer-events-none absolute left-2.5 top-1/2 -translate-y-1/2 text-xs text-muted-foreground">
+          $
+        </span>
+        <input
+          id={id}
+          type="number"
+          min="0"
+          step="any"
+          value={value}
+          onChange={(e) => onChange(e.target.value)}
+          disabled={disabled}
+          placeholder={placeholder}
+          className={cn(
+            "w-full rounded-md border border-input bg-background py-1.5 pl-6 pr-3 text-xs tabular-nums",
+            "text-foreground placeholder:text-muted-foreground/60",
+            "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+            "disabled:cursor-not-allowed disabled:opacity-50",
+          )}
+        />
+      </div>
+    </div>
+  );
+}