@stigmer/react 0.0.55 → 0.0.57

package/execution/useExecutionUsage.js

@@ -1,157 +0,0 @@
-"use client";
-import { useMemo } from "react";
-import { create } from "@bufbuild/protobuf";
-import { UsageMetricsSchema, ModelUsageSchema, } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/usage_pb";
-/**
- * Pure derivation hook that aggregates {@link UsageMetrics} across the
- * main agent and all sub-agents into a single {@link UsageMetrics} total.
- *
- * The proto scoping rule is:
- * > `status.usage` = main agent's direct LLM usage (excludes sub-agents)
- * > `subAgentExecutions[].usage` = each sub-agent's LLM usage
- * > Total cost = `status.usage` + sum(`subAgentExecutions[].usage`)
- *
- * This hook performs that summation, merges `modelBreakdown` entries by
- * `model+provider` key, and concatenates `llmCalls` sorted by timestamp.
- *
- * Returns `null` when the execution is absent or usage data has not yet
- * arrived from the agent runner.
- *
- * @example
- * ```tsx
- * const { execution } = useExecutionStream(executionId);
- * const { usage, hasSubAgentUsage } = useExecutionUsage(execution);
- *
- * if (usage) {
- *   console.log(`Cost: $${usage.estimatedCostUsd}`);
- *   console.log(`Tokens: ${usage.totalTokens}`);
- * }
- * ```
- */
-export function useExecutionUsage(execution) {
-    return useMemo(() => {
-        const usage = aggregateUsage(execution);
-        if (!usage) {
-            return { usage: null, hasSubAgentUsage: false, subAgentUsageCount: 0 };
-        }
-        const subAgents = execution?.status?.subAgentExecutions ?? [];
-        let subAgentUsageCount = 0;
-        for (const sub of subAgents) {
-            if (sub.usage)
-                subAgentUsageCount++;
-        }
-        return {
-            usage,
-            hasSubAgentUsage: subAgentUsageCount > 0,
-            subAgentUsageCount,
-        };
-    }, [execution]);
-}
-// ---------------------------------------------------------------------------
-// Pure aggregation function — testable without React
-// ---------------------------------------------------------------------------
-/**
- * Aggregates usage metrics from the main agent and all sub-agents into
- * a single {@link UsageMetrics} proto object.
- *
- * Returns `null` when the execution or its usage data is not yet available.
- */
-export function aggregateUsage(execution) {
-    const mainUsage = execution?.status?.usage;
-    if (!mainUsage)
-        return null;
-    const subAgents = execution?.status?.subAgentExecutions ?? [];
-    const subUsages = [];
-    for (const sub of subAgents) {
-        if (sub.usage)
-            subUsages.push(sub.usage);
-    }
-    if (subUsages.length === 0)
-        return mainUsage;
-    const allUsages = [mainUsage, ...subUsages];
-    return create(UsageMetricsSchema, {
-        promptTokens: sumField(allUsages, "promptTokens"),
-        completionTokens: sumField(allUsages, "completionTokens"),
-        totalTokens: sumField(allUsages, "totalTokens"),
-        llmCallCount: sumField(allUsages, "llmCallCount"),
-        cacheCreationTokens: sumField(allUsages, "cacheCreationTokens"),
-        cacheReadTokens: sumField(allUsages, "cacheReadTokens"),
-        estimatedCostUsd: sumField(allUsages, "estimatedCostUsd"),
-        totalDurationMs: sumField(allUsages, "totalDurationMs"),
-        llmDurationMs: sumField(allUsages, "llmDurationMs"),
-        toolDurationMs: sumField(allUsages, "toolDurationMs"),
-        approvalWaitDurationMs: sumField(allUsages, "approvalWaitDurationMs"),
-        toolResultCharsTruncated: sumBigIntField(allUsages),
-        primaryModel: mainUsage.primaryModel,
-        primaryProvider: mainUsage.primaryProvider,
-        modelBreakdown: mergeModelBreakdowns(allUsages),
-        llmCalls: mergeLlmCalls(allUsages),
-    });
-}
-function sumField(usages, field) {
-    let total = 0;
-    for (const u of usages) {
-        total += u[field];
-    }
-    return total;
-}
-function sumBigIntField(usages) {
-    let total = BigInt(0);
-    for (const u of usages) {
-        total += u.toolResultCharsTruncated;
-    }
-    return total;
-}
-/**
- * Merges model breakdown entries across all usages by `model+provider` key.
- * Entries for the same model and provider are combined into a single
- * {@link ModelUsage} with summed numeric fields. Pricing rates are taken
- * from the first entry encountered for each key (rates are stamped at
- * execution time and are identical for the same model).
- */
-function mergeModelBreakdowns(usages) {
-    const merged = new Map();
-    for (const usage of usages) {
-        for (const entry of usage.modelBreakdown) {
-            const key = `${entry.model}\0${entry.provider}`;
-            const existing = merged.get(key);
-            if (existing) {
-                existing.inputTokens += entry.inputTokens;
-                existing.outputTokens += entry.outputTokens;
-                existing.cacheCreationTokens += entry.cacheCreationTokens;
-                existing.cacheReadTokens += entry.cacheReadTokens;
-                existing.callCount += entry.callCount;
-                existing.estimatedCostUsd += entry.estimatedCostUsd;
-            }
-            else {
-                merged.set(key, {
-                    model: entry.model,
-                    provider: entry.provider,
-                    inputTokens: entry.inputTokens,
-                    outputTokens: entry.outputTokens,
-                    cacheCreationTokens: entry.cacheCreationTokens,
-                    cacheReadTokens: entry.cacheReadTokens,
-                    callCount: entry.callCount,
-                    estimatedCostUsd: entry.estimatedCostUsd,
-                    inputPricePerMillion: entry.inputPricePerMillion,
-                    outputPricePerMillion: entry.outputPricePerMillion,
-                    cacheCreationPricePerMillion: entry.cacheCreationPricePerMillion,
-                    cacheReadPricePerMillion: entry.cacheReadPricePerMillion,
-                });
-            }
-        }
-    }
-    return Array.from(merged.values()).map((m) => create(ModelUsageSchema, m));
-}
-/**
- * Concatenates `llmCalls` from all usages, sorted by ISO 8601 timestamp.
- * This gives a globally chronological view across main agent and sub-agents,
- * since per-agent `sequence` numbers overlap.
- */
-function mergeLlmCalls(usages) {
-    const all = usages.flatMap((u) => u.llmCalls);
-    if (all.length <= 1)
-        return all;
-    return all.slice().sort((a, b) => a.timestamp.localeCompare(b.timestamp));
-}
-//# sourceMappingURL=useExecutionUsage.js.map

package/execution/useExecutionUsage.js.map

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

package/src/execution/__tests__/ExecutionCostSummary.test.tsx

@@ -1,416 +0,0 @@
-import { describe, it, expect, afterEach } from "vitest";
-import { render, screen, cleanup } from "@testing-library/react";
-import { create } from "@bufbuild/protobuf";
-
-afterEach(cleanup);
-import {
-  AgentExecutionSchema,
-  AgentExecutionStatusSchema,
-  type AgentExecution,
-} from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/api_pb";
-import { SubAgentExecutionSchema } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/subagent_pb";
-import {
-  UsageMetricsSchema,
-  ModelUsageSchema,
-  type ModelUsage,
-} from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/usage_pb";
-import {
-  ExecutionCostSummary,
-  formatCost,
-  formatTokenCount,
-} from "../ExecutionCostSummary";
-
-// ---------------------------------------------------------------------------
-// Test helpers
-// ---------------------------------------------------------------------------
-
-function makeUsage(
-  overrides: Partial<{
-    promptTokens: number;
-    completionTokens: number;
-    totalTokens: number;
-    llmCallCount: number;
-    estimatedCostUsd: number;
-    primaryModel: string;
-    primaryProvider: string;
-    cacheCreationTokens: number;
-    cacheReadTokens: number;
-  }> = {},
-) {
-  return create(UsageMetricsSchema, overrides);
-}
-
-function makeUsageWithModels(
-  overrides: {
-    promptTokens?: number;
-    completionTokens?: number;
-    totalTokens?: number;
-    llmCallCount?: number;
-    estimatedCostUsd?: number;
-    primaryModel?: string;
-    primaryProvider?: string;
-    cacheCreationTokens?: number;
-    cacheReadTokens?: number;
-    modelBreakdown?: ModelUsage[];
-  } = {},
-) {
-  return create(UsageMetricsSchema, overrides);
-}
-
-function makeModelUsage(
-  model: string,
-  provider: string,
-  overrides: Partial<{
-    inputTokens: number;
-    outputTokens: number;
-    callCount: number;
-    estimatedCostUsd: number;
-  }> = {},
-) {
-  return create(ModelUsageSchema, { model, provider, ...overrides });
-}
-
-function makeExecution(
-  mainUsage?: ReturnType<typeof makeUsage>,
-  subAgents: Array<{
-    name: string;
-    usage?: ReturnType<typeof makeUsage>;
-  }> = [],
-): AgentExecution {
-  const status = create(AgentExecutionStatusSchema, {
-    usage: mainUsage,
-    subAgentExecutions: subAgents.map((s) =>
-      create(SubAgentExecutionSchema, { name: s.name, usage: s.usage }),
-    ),
-  });
-  return create(AgentExecutionSchema, { status });
-}
-
-// ---------------------------------------------------------------------------
-// formatCost
-// ---------------------------------------------------------------------------
-
-describe("formatCost", () => {
-  it("formats zero as $0.00", () => {
-    expect(formatCost(0)).toBe("$0.00");
-  });
-
-  it("formats sub-dollar with 4 decimal places", () => {
-    expect(formatCost(0.0042)).toBe("$0.0042");
-  });
-
-  it("formats sub-dollar with trailing zeros", () => {
-    expect(formatCost(0.15)).toBe("$0.1500");
-  });
-
-  it("formats $1+ with 2 decimal places", () => {
-    expect(formatCost(1.5)).toBe("$1.50");
-  });
-
-  it("rounds $1+ to 2 decimal places", () => {
-    expect(formatCost(123.456)).toBe("$123.46");
-  });
-
-  it("formats exactly $1 with 2 decimal places", () => {
-    expect(formatCost(1)).toBe("$1.00");
-  });
-});
-
-// ---------------------------------------------------------------------------
-// formatTokenCount
-// ---------------------------------------------------------------------------
-
-describe("formatTokenCount", () => {
-  it("formats zero", () => {
-    expect(formatTokenCount(0)).toBe("0");
-  });
-
-  it("formats small numbers without commas", () => {
-    expect(formatTokenCount(999)).toBe("999");
-  });
-
-  it("formats thousands with commas", () => {
-    expect(formatTokenCount(1234)).toBe("1,234");
-  });
-
-  it("formats millions with commas", () => {
-    expect(formatTokenCount(1234567)).toBe("1,234,567");
-  });
-});
-
-// ---------------------------------------------------------------------------
-// ExecutionCostSummary — component rendering
-// ---------------------------------------------------------------------------
-
-describe("ExecutionCostSummary", () => {
-  it("returns null when execution is null", () => {
-    const { container } = render(
-      <ExecutionCostSummary execution={null} />,
-    );
-    expect(container.innerHTML).toBe("");
-  });
-
-  it("returns null when usage is not yet available", () => {
-    const execution = create(AgentExecutionSchema, {
-      status: create(AgentExecutionStatusSchema),
-    });
-    const { container } = render(
-      <ExecutionCostSummary execution={execution} />,
-    );
-    expect(container.innerHTML).toBe("");
-  });
-
-  it("renders cost, tokens, calls, and model for a basic execution", () => {
-    const execution = makeExecution(
-      makeUsage({
-        estimatedCostUsd: 0.0042,
-        totalTokens: 1234,
-        promptTokens: 1000,
-        completionTokens: 234,
-        llmCallCount: 3,
-        primaryModel: "claude-sonnet-4",
-        primaryProvider: "anthropic",
-      }),
-    );
-
-    render(<ExecutionCostSummary execution={execution} />);
-
-    expect(screen.getByText("$0.0042")).toBeTruthy();
-    expect(screen.getByText("claude-sonnet-4 · anthropic")).toBeTruthy();
-    expect(screen.getByText(/1,234 tokens/)).toBeTruthy();
-    expect(screen.getByText(/3 calls/)).toBeTruthy();
-  });
-
-  it("renders token breakdown with prompt and completion", () => {
-    const execution = makeExecution(
-      makeUsage({
-        totalTokens: 1234,
-        promptTokens: 1000,
-        completionTokens: 234,
-        llmCallCount: 1,
-      }),
-    );
-
-    render(<ExecutionCostSummary execution={execution} />);
-
-    expect(screen.getByText(/prompt 1,000/)).toBeTruthy();
-    expect(screen.getByText(/completion 234/)).toBeTruthy();
-  });
-
-  it("uses singular 'call' for a single LLM call", () => {
-    const execution = makeExecution(
-      makeUsage({
-        llmCallCount: 1,
-        totalTokens: 100,
-        promptTokens: 80,
-        completionTokens: 20,
-      }),
-    );
-
-    render(<ExecutionCostSummary execution={execution} />);
-
-    const metricsLine = screen.getByText(/100 tokens/);
-    expect(metricsLine.textContent).toContain("1 call");
-    expect(metricsLine.textContent).not.toContain("1 calls");
-  });
-
-  it("does not show cache line when cache tokens are zero", () => {
-    const execution = makeExecution(
-      makeUsage({
-        totalTokens: 100,
-        promptTokens: 80,
-        completionTokens: 20,
-      }),
-    );
-
-    const { container } = render(
-      <ExecutionCostSummary execution={execution} />,
-    );
-    expect(container.textContent).not.toContain("cache");
-  });
-
-  it("shows cache read tokens when present", () => {
-    const execution = makeExecution(
-      makeUsage({
-        totalTokens: 100,
-        promptTokens: 80,
-        completionTokens: 20,
-        cacheReadTokens: 500,
-      }),
-    );
-
-    const { container } = render(
-      <ExecutionCostSummary execution={execution} />,
-    );
-    expect(container.textContent).toContain("cache");
-    expect(container.textContent).toContain("500 read");
-    expect(container.textContent).not.toContain("write");
-  });
-
-  it("shows cache write tokens when present", () => {
-    const execution = makeExecution(
-      makeUsage({
-        totalTokens: 100,
-        promptTokens: 80,
-        completionTokens: 20,
-        cacheCreationTokens: 200,
-      }),
-    );
-
-    const { container } = render(
-      <ExecutionCostSummary execution={execution} />,
-    );
-    expect(container.textContent).toContain("cache");
-    expect(container.textContent).toContain("200 write");
-    expect(container.textContent).not.toContain("read");
-  });
-
-  it("shows both cache read and write when both present", () => {
-    const execution = makeExecution(
-      makeUsage({
-        totalTokens: 100,
-        promptTokens: 80,
-        completionTokens: 20,
-        cacheReadTokens: 500,
-        cacheCreationTokens: 100,
-      }),
-    );
-
-    const { container } = render(
-      <ExecutionCostSummary execution={execution} />,
-    );
-    expect(container.textContent).toContain("500 read");
-    expect(container.textContent).toContain("100 write");
-  });
-
-  it("shows sub-agent annotation when sub-agents have usage", () => {
-    const execution = makeExecution(
-      makeUsage({
-        totalTokens: 1000,
-        promptTokens: 800,
-        completionTokens: 200,
-      }),
-      [
-        { name: "researcher", usage: makeUsage({ totalTokens: 500 }) },
-        { name: "writer", usage: makeUsage({ totalTokens: 300 }) },
-      ],
-    );
-
-    render(<ExecutionCostSummary execution={execution} />);
-    expect(screen.getByText("Includes 2 sub-agents")).toBeTruthy();
-  });
-
-  it("uses singular 'sub-agent' for one sub-agent", () => {
-    const execution = makeExecution(
-      makeUsage({
-        totalTokens: 1000,
-        promptTokens: 800,
-        completionTokens: 200,
-      }),
-      [{ name: "researcher", usage: makeUsage({ totalTokens: 500 }) }],
-    );
-
-    render(<ExecutionCostSummary execution={execution} />);
-    expect(screen.getByText("Includes 1 sub-agent")).toBeTruthy();
-  });
-
-  it("does not show sub-agent annotation when no sub-agents have usage", () => {
-    const execution = makeExecution(
-      makeUsage({
-        totalTokens: 1000,
-        promptTokens: 800,
-        completionTokens: 200,
-      }),
-      [{ name: "idle-agent" }],
-    );
-
-    const { container } = render(
-      <ExecutionCostSummary execution={execution} />,
-    );
-    expect(container.textContent).not.toContain("sub-agent");
-  });
-
-  it("shows per-model breakdown when multiple models exist", () => {
-    const execution = makeExecution(
-      makeUsageWithModels({
-        totalTokens: 2000,
-        promptTokens: 1500,
-        completionTokens: 500,
-        estimatedCostUsd: 0.0142,
-        primaryModel: "claude-sonnet-4",
-        primaryProvider: "anthropic",
-        modelBreakdown: [
-          makeModelUsage("claude-sonnet-4", "anthropic", {
-            estimatedCostUsd: 0.012,
-          }),
-          makeModelUsage("gpt-4o", "openai", {
-            estimatedCostUsd: 0.0022,
-          }),
-        ],
-      }),
-    );
-
-    render(<ExecutionCostSummary execution={execution} />);
-
-    expect(screen.getByText("claude-sonnet-4")).toBeTruthy();
-    expect(screen.getByText("$0.0120")).toBeTruthy();
-    expect(screen.getByText("gpt-4o")).toBeTruthy();
-    expect(screen.getByText("$0.0022")).toBeTruthy();
-    expect(
-      screen.queryByText("claude-sonnet-4 · anthropic"),
-    ).toBeNull();
-  });
-
-  it("shows model breakdown list with proper accessibility", () => {
-    const execution = makeExecution(
-      makeUsageWithModels({
-        totalTokens: 2000,
-        promptTokens: 1500,
-        completionTokens: 500,
-        modelBreakdown: [
-          makeModelUsage("model-a", "provider-a"),
-          makeModelUsage("model-b", "provider-b"),
-        ],
-      }),
-    );
-
-    render(<ExecutionCostSummary execution={execution} />);
-
-    expect(
-      screen.getByRole("list", { name: "Model cost breakdown" }),
-    ).toBeTruthy();
-  });
-
-  it("has proper region role and aria-label", () => {
-    const execution = makeExecution(
-      makeUsage({
-        totalTokens: 100,
-        promptTokens: 80,
-        completionTokens: 20,
-      }),
-    );
-
-    render(<ExecutionCostSummary execution={execution} />);
-
-    expect(
-      screen.getByRole("region", { name: "Execution cost summary" }),
-    ).toBeTruthy();
-  });
-
-  it("accepts and applies className", () => {
-    const execution = makeExecution(
-      makeUsage({
-        totalTokens: 100,
-        promptTokens: 80,
-        completionTokens: 20,
-      }),
-    );
-
-    render(
-      <ExecutionCostSummary execution={execution} className="my-custom" />,
-    );
-
-    const region = screen.getByRole("region");
-    expect(region.className).toContain("my-custom");
-  });
-});