Fix ingest compatibility metadata gaps

app/src/api/query-api.ts

@@ -44,6 +44,7 @@ const traceSpanSchema = z.object({
   output: z.string().nullable(),
   input_tokens: z.number().nullable(),
   output_tokens: z.number().nullable(),
+  total_tokens: z.number().nullable().optional(),
   model: z.string().nullable(),
   provider: z.string().nullable(),
   attributes: z.record(z.string(), z.union([z.string(), z.number()])),
@@ -176,6 +177,7 @@ export function mapTraceToSpans(traces: TraceSpan[], eventId: string): Span[] {
       provider: t.provider,
       input_tokens: t.input_tokens,
       output_tokens: t.output_tokens,
+      total_tokens: t.total_tokens ?? null,
       attributes: Object.keys(t.attributes).length > 0 ? JSON.stringify(t.attributes) : null,
     };
   });

app/src/api/saved-runs.ts

@@ -79,6 +79,7 @@ const spanCacheSchema: z.ZodType<Span> = z.object({
   provider: z.string().nullable(),
   input_tokens: z.number().nullable(),
   output_tokens: z.number().nullable(),
+  total_tokens: z.number().nullable().optional(),
   attributes: z.string().nullable(),
   normalized: z.custom<Span["normalized"]>().optional(),
 });

app/src/components/FlameTimeline.tsx

@@ -94,6 +94,7 @@ function SpanTooltip({
   const type = spanTypeInfo(span);
   const inTok = span.input_tokens ?? 0;
   const outTok = span.output_tokens ?? 0;
+  const totalTok = span.total_tokens ?? 0;
   const inputRaw = span.input_payload?.trim() ?? "";
   const outputRaw = span.output_payload?.trim() ?? "";
 
@@ -132,6 +133,9 @@ function SpanTooltip({
         {(inTok > 0 || outTok > 0) && (
           <span style={{ color: C.fg1 }}>{inTok.toLocaleString()} in / {outTok.toLocaleString()} out</span>
         )}
+        {inTok === 0 && outTok === 0 && totalTok > 0 && (
+          <span style={{ color: C.fg1 }}>{totalTok.toLocaleString()} total</span>
+        )}
       </div>
       <div className="flex flex-col flex-1 min-h-0 overflow-hidden">
         {inputRaw ? <TooltipPayloadBlock label="Input" payload={span.input_payload!} /> : null}

app/src/components/RunDetail.tsx

@@ -221,7 +221,7 @@ function Badge({ label, copyValue }: { label: string; copyValue?: string }) {
 }
 
 function StatsLine({ stats, model, spans, active, startedAt }: {
-  stats: { spans: number; tools: number; llms: number; errors: number; dur: number; agents?: number; inTokens?: number; outTokens?: number };
+  stats: { spans: number; tools: number; llms: number; errors: number; dur: number; agents?: number; inTokens?: number; outTokens?: number; totalTokens?: number };
   model?: string | null;
   spans?: Span[];
   active?: boolean;
@@ -231,6 +231,8 @@ function StatsLine({ stats, model, spans, active, startedAt }: {
   const costRef = useRef<HTMLSpanElement>(null);
   const inTok = stats.inTokens ?? 0;
   const outTok = stats.outTokens ?? 0;
+  const totalTok = stats.totalTokens ?? 0;
+  const splitTok = inTok + outTok;
 
   const [now, setNow] = useState(Date.now());
   useEffect(() => {
@@ -261,7 +263,8 @@ function StatsLine({ stats, model, spans, active, startedAt }: {
       {stats.errors > 0 && spans && <><ErrorsTooltip spans={spans} /><Dot /></>}
       {stats.errors > 0 && !spans && <><span style={{ color: C.red }}><NumberFlow value={stats.errors} /> error{stats.errors !== 1 ? "s" : ""}</span><Dot /></>}
       <Badge label="duration" /><span>{durMin > 0 ? <><NumberFlow value={durMin} />m <NumberFlow value={durRemSec} />s</> : <><NumberFlow value={durSec} />s</>}</span>
-      {(inTok > 0 || outTok > 0) && <><Dot /><Badge label="tokens" /><span><NumberFlow value={inTok} {...TOKEN_NUMBER_FLOW_TIMING} /> in / <NumberFlow value={outTok} {...TOKEN_NUMBER_FLOW_TIMING} /> out</span></>}
+      {(inTok > 0 || outTok > 0) && <><Dot /><Badge label="tokens" /><span><NumberFlow value={inTok} {...TOKEN_NUMBER_FLOW_TIMING} /> in / <NumberFlow value={outTok} {...TOKEN_NUMBER_FLOW_TIMING} /> out{totalTok > splitTok && <> / <NumberFlow value={totalTok} {...TOKEN_NUMBER_FLOW_TIMING} /> total</>}</span></>}
+      {splitTok === 0 && totalTok > 0 && <><Dot /><Badge label="tokens" /><span><NumberFlow value={totalTok} {...TOKEN_NUMBER_FLOW_TIMING} /> total</span></>}
       {(() => {
         const totalCost = breakdown.reduce((sum, b) => sum + (b.breakdown?.totalCost ?? 0), 0);
         const cost = totalCost > 0 ? fmtCost(totalCost) : null;
@@ -449,7 +452,7 @@ function ViewHeader({
   title: string;
   model?: string | null;
   active: boolean;
-  stats: { spans: number; tools: number; llms: number; errors: number; dur: number; agents?: number; inTokens?: number; outTokens?: number };
+  stats: { spans: number; tools: number; llms: number; errors: number; dur: number; agents?: number; inTokens?: number; outTokens?: number; totalTokens?: number };
   allSpans?: Span[];
   startedAt?: number;
   anthropicModels?: string[];
@@ -1344,6 +1347,7 @@ export function RunDetail({ runId, routeBase, initialData, isReplay, source, onF
           agents: subAgents.length,
           inTokens: [...getTokensByModel(spans).values()].reduce((s, v) => s + v.inTok, 0),
           outTokens: [...getTokensByModel(spans).values()].reduce((s, v) => s + v.outTok, 0),
+          totalTokens: spans.reduce((sum, s) => sum + (s.total_tokens ?? 0), 0),
         }}
         allSpans={spans}
         run={run}

app/src/components/SpanTree.tsx

@@ -153,6 +153,7 @@ function SpanDetail({ span }: { span: Span }) {
         {span.model && <><div style={{ color: C.fg0 }}>model</div><div style={{ color: C.fg2 }}>{span.model}</div></>}
         {span.input_tokens != null && <><div style={{ color: C.fg0 }}>input tokens</div><div style={{ color: C.fg2 }}>{span.input_tokens.toLocaleString()}</div></>}
         {span.output_tokens != null && <><div style={{ color: C.fg0 }}>output tokens</div><div style={{ color: C.fg2 }}>{span.output_tokens.toLocaleString()}</div></>}
+        {span.total_tokens != null && <><div style={{ color: C.fg0 }}>total tokens</div><div style={{ color: C.fg2 }}>{span.total_tokens.toLocaleString()}</div></>}
         <div style={{ color: C.fg0 }}>status</div>
         <div style={{ color: isErr ? C.red : C.fg2 }}>{span.status}</div>
         <div style={{ color: C.fg0 }}>start</div>

app/src/pages/SavedPage.tsx

@@ -1015,7 +1015,7 @@ interface TraceSpan {
   span_name: string; span_type: string; status: string;
   start_time_ns: number; end_time_ns: number; duration_ns: number;
   input: string | null; output: string | null;
-  input_tokens: number | null; output_tokens: number | null;
+  input_tokens: number | null; output_tokens: number | null; total_tokens?: number | null;
   model: string | null; provider: string | null;
   attributes: Record<string, string | number>;
 }
@@ -1048,7 +1048,7 @@ function mapTraceToSpans(traces: TraceSpan[], eventId: string): Span[] {
       input_payload: inputPayload, output_payload: outputPayload,
       start_time_ms: t.start_time_ns / 1e6, end_time_ms: t.end_time_ns / 1e6,
       duration_ms: t.duration_ns / 1e6, model: t.model, provider: t.provider,
-      input_tokens: t.input_tokens, output_tokens: t.output_tokens,
+      input_tokens: t.input_tokens, output_tokens: t.output_tokens, total_tokens: t.total_tokens ?? null,
       attributes: Object.keys(t.attributes).length > 0 ? JSON.stringify(t.attributes) : null,
     };
   });

app/src/pages/SearchPage.tsx

@@ -47,6 +47,7 @@ interface TraceSpan {
   output: string | null;
   input_tokens: number | null;
   output_tokens: number | null;
+  total_tokens?: number | null;
   model: string | null;
   provider: string | null;
   attributes: Record<string, string | number>;
@@ -134,6 +135,7 @@ function mapTraceToSpans(traces: TraceSpan[], eventId: string): Span[] {
     provider: t.provider,
     input_tokens: t.input_tokens,
     output_tokens: t.output_tokens,
+    total_tokens: t.total_tokens ?? null,
     attributes: Object.keys(t.attributes).length > 0 ? JSON.stringify(t.attributes) : null,
   }; });
 }

app/src/utils/types.ts

@@ -100,6 +100,7 @@ export interface Span {
   provider: string | null;
   input_tokens: number | null;
   output_tokens: number | null;
+  total_tokens: number | null;
   attributes: string | null;
   /**
    * SDK-agnostic typed view of this span's content. Populated by the server.

app/tests-e2e/helpers.ts

@@ -379,7 +379,7 @@ export type DbSpanRow = {
 async function fetchSpansViaApi(
   workshopUrl: string,
   runId: string,
-): Promise<{ id: string; name: string; span_type: string | null; status: string | null; input_preview: string; output_preview: string; model: string | null; tokens: { in: number; out: number } }[]> {
+): Promise<{ id: string; name: string; span_type: string | null; status: string | null; input_preview: string; output_preview: string; model: string | null; tokens: { in: number; out: number; total: number } }[]> {
   const res = await fetch(
     `${workshopUrl}/api/runs/${encodeURIComponent(runId)}/spans?limit=500&payload_preview_chars=400`,
   );
@@ -395,7 +395,7 @@ async function fetchSpansViaApi(
       input_preview: string;
       output_preview: string;
       model: string | null;
-      tokens: { in: number; out: number };
+      tokens: { in: number; out: number; total: number };
     }[]
   >;
 }
@@ -431,6 +431,7 @@ export type LlmSpanRow = {
   model: string | null;
   input_tokens: number | null;
   output_tokens: number | null;
+  total_tokens: number | null;
 };
 
 /**

drizzle/0002_volatile_mordo.sql

@@ -0,0 +1 @@
+ALTER TABLE `spans` ADD `total_tokens` integer;