@stigmer/react 0.0.56 → 0.0.57

package/session/useSessionUsage.d.ts

@@ -0,0 +1,65 @@
+import type { AgentExecution } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/api_pb";
+/**
+ * Per-model cost breakdown computed from per-message {@link LlmCallMetrics}.
+ */
+export interface ModelCostEntry {
+    readonly model: string;
+    readonly provider: string;
+    readonly estimatedCostUsd: number;
+    readonly inputTokens: number;
+    readonly outputTokens: number;
+    readonly cacheCreationTokens: number;
+    readonly cacheReadTokens: number;
+    readonly callCount: number;
+}
+export interface UseSessionUsageReturn {
+    /** Total estimated cost across all executions in the session. */
+    readonly totalCostUsd: number;
+    /** Total tokens (all types) across all executions. */
+    readonly totalTokens: number;
+    /** Total input tokens (non-cached) across all executions. */
+    readonly inputTokens: number;
+    /** Total output tokens across all executions. */
+    readonly outputTokens: number;
+    /** Total cache read tokens across all executions. */
+    readonly cacheReadTokens: number;
+    /** Total cache creation tokens across all executions. */
+    readonly cacheCreationTokens: number;
+    /** Total number of LLM calls across all executions. */
+    readonly llmCallCount: number;
+    /** Per-model breakdown, sorted by cost descending. */
+    readonly modelBreakdown: readonly ModelCostEntry[];
+    /** Primary model (first model encountered). */
+    readonly primaryModel: string;
+    /** Primary provider (first provider encountered). */
+    readonly primaryProvider: string;
+    /** `true` when at least one execution has cost data. */
+    readonly hasUsage: boolean;
+}
+/**
+ * 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.
+ *
+ * @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);
+ * ```
+ */
+export declare function useSessionUsage(executions: readonly AgentExecution[]): UseSessionUsageReturn;
+//# sourceMappingURL=useSessionUsage.d.ts.map

package/session/useSessionUsage.d.ts.map

@@ -0,0 +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,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,gBAAgB,EAAE,MAAM,CAAC;IAClC,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAC;IAC7B,QAAQ,CAAC,YAAY,EAAE,MAAM,CAAC;IAC9B,QAAQ,CAAC,mBAAmB,EAAE,MAAM,CAAC;IACrC,QAAQ,CAAC,eAAe,EAAE,MAAM,CAAC;IACjC,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;CAC5B;AAED,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"}

package/session/useSessionUsage.js

@@ -0,0 +1,107 @@
+"use client";
+import { useMemo } from "react";
+/**
+ * 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.
+ *
+ * @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);
+ * ```
+ */
+export function useSessionUsage(executions) {
+    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]);
+}
+//# sourceMappingURL=useSessionUsage.js.map

package/session/useSessionUsage.js.map

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

package/src/execution/ApprovalCard.tsx

@@ -134,6 +134,12 @@ export function ApprovalCard({
           )}
         </span>
 
+        {pendingApproval.fromSubAgent && pendingApproval.subAgentName && (
+          <span className="shrink-0 rounded bg-muted px-1 py-0.5 font-mono text-muted-foreground">
+            via {pendingApproval.subAgentSubject || pendingApproval.subAgentName}
+          </span>
+        )}
+
         <WaitingDuration requestedAt={pendingApproval.requestedAt} />
 
         <span className="shrink-0 text-warning" aria-hidden="true">
@@ -143,19 +149,7 @@ export function ApprovalCard({
 
       {/* Body */}
       <div className="px-3 py-2.5 space-y-2">
-        {/* Sub-agent attribution */}
-        {pendingApproval.fromSubAgent && pendingApproval.subAgentName && (
-          <p className="text-xs text-muted-foreground">
-            Sub-agent{" "}
-            <span className="font-medium text-foreground">
-              {pendingApproval.subAgentName}
-            </span>{" "}
-            wants to execute this tool
-          </p>
-        )}
-
-        {/* Approval message */}
-        {pendingApproval.message && (
+        {pendingApproval.message && categoryInfo.category !== "shell" && (
           <p className="text-xs text-foreground">
             {pendingApproval.message}
           </p>

package/src/execution/ArtifactsWidget.tsx

@@ -51,7 +51,7 @@ export interface ArtifactsWidgetProps {
  *
  * Returns `null` when the executions list is empty or no execution
  * has artifacts, matching the conditional-render pattern of
- * {@link ExecutionProgress} and {@link ExecutionCostSummary}.
+ * {@link ExecutionProgress} and {@link UsageWidget}.
  *
  * Renders without card chrome — each {@link ArtifactCard} provides its
  * own border and padding. The consumer controls the container styling

package/src/execution/ExecutionProgress.tsx

@@ -1,11 +1,9 @@
 "use client";
 
-import { useMemo } from "react";
 import type { AgentExecution } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/api_pb";
-import type { TodoItem } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/api_pb";
-import { TodoStatus } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/enum_pb";
 import { cn } from "@stigmer/theme";
 import { ExecutionPhaseBadge } from "./ExecutionPhaseBadge";
+import { TodoList } from "./TodoList";
 
 export interface ExecutionProgressProps {
   /** The execution to display progress for. Renders nothing when null. */
@@ -13,17 +11,6 @@ export interface ExecutionProgressProps {
   readonly className?: string;
 }
 
-const STATUS_SORT_ORDER: ReadonlyMap<TodoStatus, number> = new Map([
-  [TodoStatus.TODO_IN_PROGRESS, 0],
-  [TodoStatus.TODO_PENDING, 1],
-  [TodoStatus.TODO_COMPLETED, 2],
-  [TodoStatus.TODO_CANCELLED, 3],
-]);
-
-function todoSortKey(item: TodoItem): number {
-  return STATUS_SORT_ORDER.get(item.status) ?? 4;
-}
-
 /**
  * Displays execution lifecycle phase and, when present, the agent's
  * todo checklist showing multi-step task progress.
@@ -59,13 +46,6 @@ export function ExecutionProgress({
 
   const todos = execution.status?.todos;
 
-  const sortedTodos = useMemo(() => {
-    if (!todos) return [];
-    const items = Object.values(todos);
-    if (items.length === 0) return [];
-    return items.slice().sort((a, b) => todoSortKey(a) - todoSortKey(b));
-  }, [todos]);
-
   return (
     <div
       className={cn("flex flex-col gap-2", className)}
@@ -73,119 +53,7 @@ export function ExecutionProgress({
       aria-label="Execution progress"
     >
       <ExecutionPhaseBadge phase={phase} />
-      {sortedTodos.length > 0 && (
-        <ul role="list" className="flex flex-col gap-1" aria-label="Tasks">
-          {sortedTodos.map((item) => (
-            <TodoRow key={item.id} item={item} />
-          ))}
-        </ul>
-      )}
+      {todos && <TodoList todos={todos} />}
     </div>
   );
 }
-
-// ---------------------------------------------------------------------------
-// Internal sub-components
-// ---------------------------------------------------------------------------
-
-function TodoRow({ item }: { item: TodoItem }) {
-  const Icon = TODO_ICONS[item.status] ?? TodoPendingIcon;
-  const colorClass = TODO_COLORS[item.status] ?? "text-muted-foreground";
-  const cancelled = item.status === TodoStatus.TODO_CANCELLED;
-
-  return (
-    <li className="flex items-start gap-1.5 text-xs">
-      <span className={cn("mt-0.5 shrink-0", colorClass)} aria-hidden="true">
-        <Icon />
-      </span>
-      <span
-        className={cn(
-          "min-w-0 break-words",
-          cancelled ? "text-muted-foreground line-through" : "text-foreground",
-        )}
-      >
-        {item.content}
-      </span>
-    </li>
-  );
-}
-
-// ---------------------------------------------------------------------------
-// Status icon mapping
-// ---------------------------------------------------------------------------
-
-const TODO_ICONS: Partial<Record<TodoStatus, () => React.JSX.Element>> = {
-  [TodoStatus.TODO_PENDING]: TodoPendingIcon,
-  [TodoStatus.TODO_IN_PROGRESS]: TodoInProgressIcon,
-  [TodoStatus.TODO_COMPLETED]: TodoCompletedIcon,
-  [TodoStatus.TODO_CANCELLED]: TodoCancelledIcon,
-};
-
-const TODO_COLORS: Partial<Record<TodoStatus, string>> = {
-  [TodoStatus.TODO_PENDING]: "text-muted-foreground",
-  [TodoStatus.TODO_IN_PROGRESS]: "text-foreground",
-  [TodoStatus.TODO_COMPLETED]: "text-success",
-  [TodoStatus.TODO_CANCELLED]: "text-muted-foreground",
-};
-
-// ---------------------------------------------------------------------------
-// Inline SVG icons — no external icon dependency in SDK
-// ---------------------------------------------------------------------------
-
-function TodoPendingIcon() {
-  return (
-    <svg
-      width="12"
-      height="12"
-      viewBox="0 0 12 12"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1.5"
-    >
-      <circle cx="6" cy="6" r="4.5" />
-    </svg>
-  );
-}
-
-function TodoInProgressIcon() {
-  return (
-    <span className="relative flex h-3 w-3 items-center justify-center">
-      <span className="absolute inline-flex h-2 w-2 animate-ping rounded-full bg-current opacity-75" />
-      <span className="relative inline-flex h-2 w-2 rounded-full bg-current" />
-    </span>
-  );
-}
-
-function TodoCompletedIcon() {
-  return (
-    <svg
-      width="12"
-      height="12"
-      viewBox="0 0 12 12"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <path d="M2.5 6L5 8.5L9.5 3.5" />
-    </svg>
-  );
-}
-
-function TodoCancelledIcon() {
-  return (
-    <svg
-      width="12"
-      height="12"
-      viewBox="0 0 12 12"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <path d="M3 3L9 9M9 3L3 9" />
-    </svg>
-  );
-}

package/src/execution/MessageThread.tsx

@@ -17,6 +17,7 @@ import { cn } from "@stigmer/theme";
 import { isTerminalPhase } from "./execution-phases";
 import { MessageEntry } from "./MessageEntry";
 import { ToolCallGroup } from "./ToolCallGroup";
+import { SubAgentSection } from "./SubAgentSection";
 import { ExecutionPhaseBadge } from "./ExecutionPhaseBadge";
 import { SetupProgress } from "./SetupProgress";
 import { ApprovalCard } from "./ApprovalCard";
@@ -110,6 +111,7 @@ const AUTO_SCROLL_THRESHOLD_PX = 80;
 type ThreadItem =
   | { readonly kind: "message"; readonly message: AgentMessage; readonly key: string }
   | { readonly kind: "tool-group"; readonly toolCalls: readonly ToolCall[]; readonly subAgentExecutions: readonly SubAgentExecution[]; readonly key: string }
+  | { readonly kind: "sub-agent"; readonly subAgentExecution: SubAgentExecution; readonly key: string }
   | { readonly kind: "phase-badge"; readonly phase: ExecutionPhase; readonly key: string }
   | { readonly kind: "pending-message"; readonly content: string; readonly key: string }
   | { readonly kind: "approval-request"; readonly pendingApproval: PendingApproval; readonly key: string }
@@ -176,12 +178,35 @@ function buildThreadItems(
         msg.type === MessageType.MESSAGE_AI &&
         msg.toolCalls.length > 0
       ) {
-        items.push({
-          kind: "tool-group",
-          toolCalls: msg.toolCalls,
-          subAgentExecutions: subAgents,
-          key: `e${ei}-m${mi}-tc`,
-        });
+        const regularTools: ToolCall[] = [];
+        const taskTools: ToolCall[] = [];
+        for (const tc of msg.toolCalls) {
+          if (tc.name === "task") {
+            taskTools.push(tc);
+          } else {
+            regularTools.push(tc);
+          }
+        }
+
+        if (regularTools.length > 0) {
+          items.push({
+            kind: "tool-group",
+            toolCalls: regularTools,
+            subAgentExecutions: subAgents,
+            key: `e${ei}-m${mi}-tc`,
+          });
+        }
+
+        for (let ti = 0; ti < taskTools.length; ti++) {
+          const matched = subAgents.find((sa) => sa.id === taskTools[ti].id);
+          if (matched) {
+            items.push({
+              kind: "sub-agent",
+              subAgentExecution: matched,
+              key: `e${ei}-m${mi}-sa${ti}`,
+            });
+          }
+        }
       }
     }
   }
@@ -349,6 +374,14 @@ export function MessageThread({
                   className="mx-4"
                 />
               );
+            case "sub-agent":
+              return (
+                <SubAgentSection
+                  key={item.key}
+                  subAgentExecution={item.subAgentExecution}
+                  className="mx-4"
+                />
+              );
             case "phase-badge":
               return (
                 <div key={item.key} className="flex justify-center py-3">