@@ -59,6 +70,21 @@ function SpanAccessory({
}
}
+function SpanPill({ text, icon }: { text: string; icon?: string }) {
+ const hasIcon = icon && tablerIcons.has(icon);
+
+ return (
+
+ {hasIcon && (
+
+ )}
+ {text}
+
+ );
+}
+
export function SpanCodePathAccessory({
accessory,
className,
diff --git a/apps/webapp/app/components/runs/v3/ai/AIChatMessages.tsx b/apps/webapp/app/components/runs/v3/ai/AIChatMessages.tsx
new file mode 100644
index 00000000000..a50ef8ae806
--- /dev/null
+++ b/apps/webapp/app/components/runs/v3/ai/AIChatMessages.tsx
@@ -0,0 +1,285 @@
+import { CheckIcon, ClipboardDocumentIcon, CodeBracketSquareIcon } from "@heroicons/react/20/solid";
+import { lazy, Suspense, useState } from "react";
+import { CodeBlock } from "~/components/code/CodeBlock";
+import { Button } from "~/components/primitives/Buttons";
+import { Header3 } from "~/components/primitives/Headers";
+import { Paragraph } from "~/components/primitives/Paragraph";
+import type { DisplayItem, ToolUse } from "./types";
+
+// Lazy load streamdown to avoid SSR issues
+const StreamdownRenderer = lazy(() =>
+ import("streamdown").then((mod) => ({
+ default: ({ children }: { children: string }) => (
+
+ {children}
+
+ ),
+ }))
+);
+
+export function AIChatMessages({ items }: { items: DisplayItem[] }) {
+ return (
+
+ {items.map((item, i) => {
+ switch (item.type) {
+ case "system":
+ return
;
+ case "user":
+ return
;
+ case "tool-use":
+ return
;
+ case "assistant":
+ return
;
+ }
+ })}
+
+ );
+}
+
+// ---------------------------------------------------------------------------
+// Section header (shared across all sections)
+// ---------------------------------------------------------------------------
+
+function SectionHeader({ label, right }: { label: string; right?: React.ReactNode }) {
+ return (
+
+
{label}
+ {right &&
{right}
}
+
+ );
+}
+
+export function ChatBubble({ children }: { children: React.ReactNode }) {
+ return (
+
+ {children}
+
+ );
+}
+
+// ---------------------------------------------------------------------------
+// System
+// ---------------------------------------------------------------------------
+
+function SystemSection({ text }: { text: string }) {
+ const [expanded, setExpanded] = useState(false);
+ const isLong = text.length > 150;
+ const preview = isLong ? text.slice(0, 150) + "..." : text;
+
+ return (
+
+
setExpanded(!expanded)}
+ className="text-[10px] text-text-link hover:underline"
+ >
+ {expanded ? "Collapse" : "Expand"}
+
+ ) : undefined
+ }
+ />
+
+
+ {expanded || !isLong ? text : preview}
+
+
+
+ );
+}
+
+// ---------------------------------------------------------------------------
+// User
+// ---------------------------------------------------------------------------
+
+function UserSection({ text }: { text: string }) {
+ return (
+
+ );
+}
+
+// ---------------------------------------------------------------------------
+// Assistant response (with markdown/raw toggle)
+// ---------------------------------------------------------------------------
+
+export function AssistantResponse({
+ text,
+ headerLabel = "Assistant",
+}: {
+ text: string;
+ headerLabel?: string;
+}) {
+ const [mode, setMode] = useState<"rendered" | "raw">("rendered");
+ const [copied, setCopied] = useState(false);
+
+ function handleCopy() {
+ navigator.clipboard.writeText(text);
+ setCopied(true);
+ setTimeout(() => setCopied(false), 2000);
+ }
+
+ return (
+
+
+
+
+
+ }
+ />
+ {mode === "rendered" ? (
+
+
+ {text}}>
+ {text}
+
+
+
+ ) : (
+
+ )}
+
+
+ {tool.toolName}
+ {tool.resultSummary && (
+ {tool.resultSummary}
+ )}
+
+
+ {availableTabs.length > 0 && (
+ <>
+
+ {availableTabs.map((tab) => (
+
+ ))}
+
+
+ {activeTab === "input" && hasInput && (
+
+
+
+ )}
+
+ {activeTab === "output" && hasResult && (
+
+
+
+ )}
+
+ {activeTab === "details" && hasDetails && (
+
+ {tool.description && (
+
{tool.description}
+ )}
+ {tool.parametersJson && (
+
+
+ Parameters schema
+
+
+
+ )}
+
+ )}
+
+ )}
+
+
+
+ {aiData.provider !== "unknown" && }
+ {aiData.resolvedProvider && (
+
+ )}
+ {aiData.finishReason && }
+ {aiData.serviceTier && }
+ {aiData.toolChoice && }
+ {aiData.toolCount != null && aiData.toolCount > 0 && (
+
+ )}
+ {aiData.messageCount != null && (
+
+ )}
+ {aiData.telemetryMetadata &&
+ Object.entries(aiData.telemetryMetadata).map(([key, value]) => (
+
+ ))}
+
+
+
Stats
+
+
+
+ {aiData.cachedTokens != null && aiData.cachedTokens > 0 && (
+
+ )}
+ {aiData.cacheCreationTokens != null && aiData.cacheCreationTokens > 0 && (
+
+ )}
+ {aiData.reasoningTokens != null && aiData.reasoningTokens > 0 && (
+
+ )}
+
+
+ {aiData.totalCost != null && (
+
+ )}
+ {aiData.msToFirstChunk != null && (
+
+ )}
+ {aiData.tokensPerSecond != null && (
+
+ )}
+
+
+ {label}
+
+ {value}
+ {unit && {unit}}
+
+
+ );
+}
+
+function formatTtfc(ms: number): string {
+ if (ms >= 10_000) {
+ return `${(ms / 1000).toFixed(1)}s`;
+ }
+ return `${Math.round(ms)}ms`;
+}
diff --git a/apps/webapp/app/components/runs/v3/ai/AISpanDetails.tsx b/apps/webapp/app/components/runs/v3/ai/AISpanDetails.tsx
new file mode 100644
index 00000000000..4b64da7db38
--- /dev/null
+++ b/apps/webapp/app/components/runs/v3/ai/AISpanDetails.tsx
@@ -0,0 +1,203 @@
+import { CheckIcon, ClipboardDocumentIcon } from "@heroicons/react/20/solid";
+import { useState } from "react";
+import { Button } from "~/components/primitives/Buttons";
+import { Header3 } from "~/components/primitives/Headers";
+import { Paragraph } from "~/components/primitives/Paragraph";
+import { TabButton, TabContainer } from "~/components/primitives/Tabs";
+import { useHasAdminAccess } from "~/hooks/useUser";
+import { AIChatMessages, AssistantResponse, ChatBubble } from "./AIChatMessages";
+import { AIStatsSummary, AITagsRow } from "./AIModelSummary";
+import { AIToolsInventory } from "./AIToolsInventory";
+import type { AISpanData, DisplayItem } from "./types";
+
+type AITab = "overview" | "messages" | "tools";
+
+export function AISpanDetails({
+ aiData,
+ rawProperties,
+}: {
+ aiData: AISpanData;
+ rawProperties?: string;
+}) {
+ const [tab, setTab] = useState("overview");
+ const isAdmin = useHasAdminAccess();
+ const toolCount = aiData.toolCount ?? aiData.toolDefinitions?.length ?? 0;
+
+ return (
+
+ {/* Tab bar */}
+
+
+ setTab("overview")}
+ shortcut={{ key: "o" }}
+ >
+ Overview
+
+ setTab("messages")}
+ shortcut={{ key: "m" }}
+ >
+ Messages
+
+ setTab("tools")}
+ shortcut={{ key: "t" }}
+ >
+
+ Tools
+ {toolCount > 0 && (
+
+ {toolCount}
+
+ )}
+
+
+
+
+
+ {/* Tab content */}
+
+ {tab === "overview" && }
+ {tab === "messages" && }
+ {tab === "tools" && }
+
+
+ {/* Footer: Copy raw (admin only) */}
+ {isAdmin && rawProperties &&
}
+
+ {/* Tags + Stats */}
+
+
+
+ {/* Input (last user prompt) */}
+ {userText && (
+
+
Input
+
+ {userText}
+
+
+ )}
+
+ {/* Output (assistant response or tool calls) */}
+ {outputText &&
}
+ {outputToolNames.length > 0 && !outputText && (
+
+
Output
+
+
+ Called {outputToolNames.length === 1 ? "tool" : "tools"}:{" "}
+ {outputToolNames.join(", ")}
+
+
+
+ )}
+
+
+ {aiData.items && aiData.items.length > 0 &&
}
+ {aiData.responseText && !hasAssistantItem(aiData.items) && (
+
+ )}
+
+
+
+
+ );
+}
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+function extractInputOutput(aiData: AISpanData): {
+ userText: string | undefined;
+ outputText: string | undefined;
+ outputToolNames: string[];
+} {
+ let userText: string | undefined;
+ let outputText: string | undefined;
+ const outputToolNames: string[] = [];
+
+ if (aiData.items) {
+ // Find the last user message
+ for (let i = aiData.items.length - 1; i >= 0; i--) {
+ if (aiData.items[i].type === "user") {
+ userText = (aiData.items[i] as { type: "user"; text: string }).text;
+ break;
+ }
+ }
+
+ // Find the last assistant or tool-use item as the output
+ for (let i = aiData.items.length - 1; i >= 0; i--) {
+ const item = aiData.items[i];
+ if (item.type === "assistant") {
+ outputText = item.text;
+ break;
+ }
+ if (item.type === "tool-use") {
+ for (const tool of item.tools) {
+ outputToolNames.push(tool.toolName);
+ }
+ break;
+ }
+ }
+ }
+
+ // Fall back to responseText if no assistant item found
+ if (!outputText && aiData.responseText) {
+ outputText = aiData.responseText;
+ }
+
+ return { userText, outputText, outputToolNames };
+}
+
+function hasAssistantItem(items: DisplayItem[] | undefined): boolean {
+ if (!items) return false;
+ return items.some((item) => item.type === "assistant");
+}
diff --git a/apps/webapp/app/components/runs/v3/ai/AIToolsInventory.tsx b/apps/webapp/app/components/runs/v3/ai/AIToolsInventory.tsx
new file mode 100644
index 00000000000..a329698dd5e
--- /dev/null
+++ b/apps/webapp/app/components/runs/v3/ai/AIToolsInventory.tsx
@@ -0,0 +1,84 @@
+import { useState } from "react";
+import { CodeBlock } from "~/components/code/CodeBlock";
+import type { AISpanData, ToolDefinition } from "./types";
+import { Paragraph } from "~/components/primitives/Paragraph";
+
+export function AIToolsInventory({ aiData }: { aiData: AISpanData }) {
+ const defs = aiData.toolDefinitions ?? [];
+ const calledNames = getCalledToolNames(aiData);
+
+ if (defs.length === 0) {
+ return (
+
+
No tool definitions available for this span.
+
+ {defs.map((def) => {
+ const wasCalled = calledNames.has(def.name);
+ return ;
+ })}
+
+ );
+}
+
+function ToolDefRow({ def, wasCalled }: { def: ToolDefinition; wasCalled: boolean }) {
+ const [showSchema, setShowSchema] = useState(false);
+
+ return (
+
+
+
+
{def.name}
+
{wasCalled ? "called" : "not called"}
+
+
+ {def.description && (
+
{def.description}
+ )}
+
+ {def.parametersJson && (
+
+
+ {showSchema && (
+
+
+
+ )}
+
+ )}
+
+
+
{model.modelName}
+
+
+ {model.source ?? "default"}
+
+
+ Back to list
+
+
+
+
+
+
+ {/* Delete section */}
+
+
+
+
+
+
+ {/* Prices */}
+
+
+ Prices (per token)
+
+
+ {Object.entries(tier.prices).map(([usageType, price]) => (
+
+ {usageType}
+ {
+ const val = parseFloat(e.target.value);
+ if (!isNaN(val)) {
+ onChange({
+ ...tier,
+ prices: { ...tier.prices, [usageType]: val },
+ });
+ }
+ }}
+ />
+
+
+ ))}
+
+
+ {/* Add price */}
+
+
+ {newUsageType && (
+
+ )}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Missing models
+
+
+
+ Add model
+
+
+
+
+ {/* Model tester */}
+
+
+
+
+
+
+
+ {testResult !== undefined && testResult !== null && (
+
+
+ Testing: {testResult.modelString}
+
+ {testResult.match ? (
+
+ Match:{" "}
+
+ {testResult.match.modelName}
+
+
+ ) : (
+
+ No match found — this model has no pricing data
+
+ )}
+
+ )}
+
+
+
+
+ {total} global models (page {page} of {pageCount})
+
+
+
+
+
+
+
+ Model Name
+ Source
+ Input $/tok
+ Output $/tok
+ Other prices
+
+
+
+ {models.length === 0 ? (
+
+ No models found
+
+ ) : (
+ models.map((model) => {
+ // Get default tier prices
+ const defaultTier =
+ model.pricingTiers.find((t) => t.isDefault) ?? model.pricingTiers[0];
+ const priceMap = defaultTier
+ ? Object.fromEntries(defaultTier.prices.map((p) => [p.usageType, p.price]))
+ : {};
+ const inputPrice = priceMap["input"];
+ const outputPrice = priceMap["output"];
+ const otherPrices = defaultTier
+ ? defaultTier.prices.filter(
+ (p) => p.usageType !== "input" && p.usageType !== "output"
+ )
+ : [];
+
+ return (
+
+
+
+ {model.modelName}
+
+
+
+
+ {model.source ?? "default"}
+
+
+
+
+ {inputPrice != null ? formatPrice(inputPrice) : "-"}
+
+
+
+
+ {outputPrice != null ? formatPrice(outputPrice) : "-"}
+
+
+
+ {otherPrices.length > 0 ? (
+ p.usageType).join(", ")}>
+ +{otherPrices.length} more
+
+ ) : (
+ -
+ )}
+
+
+ );
+ })
+ )}
+
+
+
+
+
+ {/* Header */}
+
+
+
{modelName}
+
+ Missing pricing — {samples.length} sample span{samples.length !== 1 ? "s" : ""} from
+ last {lookbackHours}h
+
+
+
+
+ Add pricing
+
+
+ Back to missing
+
+
+
+
+ {error && (
+
+ {error}
+
+ )}
+
+ {/* Token types summary */}
+ {tokenSummary.length > 0 && (
+
+
+ Token types seen across samples
+
+
+ {tokenSummary.map((t) => (
+
+ {t.key}
+
+ {t.min === t.max ? t.min.toLocaleString() : `${t.min.toLocaleString()}-${t.max.toLocaleString()}`}
+
+
+ ))}
+
+
+ These are the token usage types that need pricing entries (at minimum: input, output).
+
+
+ )}
+
+ {/* Provider-reported costs */}
+ {providerCosts.length > 0 && (
+
+
+ Provider-reported cost data found in {providerCosts.length} span{providerCosts.length !== 1 ? "s" : ""}
+
+
+ {providerCosts.map((c, i) => (
+
+ {c.source}
+ ${c.cost.toFixed(6)}
+
+ ({c.inputTokens.toLocaleString()} in + {c.outputTokens.toLocaleString()} out)
+
+
+ ))}
+
+ {providerCosts[0]?.estimatedInputPrice != null && (
+
+
+ Estimated per-token rates (assuming ~3x output/input ratio):
+
+
+ input: {providerCosts[0].estimatedInputPrice.toExponential(4)}
+ output: {(providerCosts[0].estimatedOutputPrice ?? 0).toExponential(4)}
+
+
+ Cross-reference with the provider's pricing page before using these estimates.
+
+
+ )}
+
+ )}
+
+ {/* Prompt section */}
+
+
+
+ Claude Code prompt — paste this to have it add pricing for this model
+
+
+
+
+ {prompt}
+
+
+
+ {/* Sample spans */}
+
+
+ Sample spans ({samples.length})
+
+ {samples.map((s) => {
+ const expanded = expandedSpans.has(s.span_id);
+ let parsedAttrs: Record
| null = null;
+ try {
+ parsedAttrs = JSON.parse(s.attributes_text) as Record;
+ } catch {
+ // ignore
+ }
+
+ return (
+
+
+ {expanded && parsedAttrs && (
+
+
+ {JSON.stringify(parsedAttrs, null, 2)}
+
+
+ )}
+
+
+
+
Missing LLM Models
+
+ Back to models
+
+
+
+
+ Models appearing in spans without cost enrichment. These models need pricing data added.
+
+
+ {/* Lookback selector */}
+
+ Lookback:
+ {LOOKBACK_OPTIONS.map((opt) => (
+
+ {opt.label}
+
+ ))}
+
+
+ {error && (
+
+ {error}
+
+ )}
+
+
+ {models.length} unpriced model{models.length !== 1 ? "s" : ""} found in the last{" "}
+ {lookbackHours < 24
+ ? `${lookbackHours}h`
+ : lookbackHours < 168
+ ? `${lookbackHours / 24}d`
+ : `${Math.round(lookbackHours / 24)}d`}
+
+
+
+
+
+ Model Name
+ Provider
+ Span Count
+ Actions
+
+
+
+ {models.length === 0 ? (
+
+ All models have pricing data
+
+ ) : (
+ models.map((m) => (
+
+ ))
+ )}
+
+
+
+
+
New LLM Model
+
+ Back to list
+
+
+
+
+
+
+
+
+
Prices (per token)
+
+ {Object.entries(tier.prices).map(([usageType, price]) => (
+
+ {usageType}
+ {
+ const val = parseFloat(e.target.value);
+ if (!isNaN(val)) {
+ onChange({ ...tier, prices: { ...tier.prices, [usageType]: val } });
+ }
+ }}
+ />
+
+
+ ))}
+
+
+
+
+ {newUsageType && (
+
+ )}
+
+
+
@@ -276,9 +279,13 @@ function SpanBody({
/>
)}
-
+ {isAiGeneration ? (
-
+ ) : (
+
+
+
+ )}
);
}
@@ -1155,6 +1162,35 @@ function RunError({ error }: { error: TaskRunError }) {
}
}
+function CollapsibleProperties({ code }: { code: string }) {
+ const [open, setOpen] = useState(false);
+ return (
+
+
+ {open && (
+
+
+
+ )}
+