From b9a4fc3258052f18f585c1910af23538bdd9a74e Mon Sep 17 00:00:00 2001
From: Matt Aitken <matt@mattaitken.com>
Date: Mon, 17 Aug 2026 15:10:26 +0100
Subject: [PATCH] fix(webapp): show errors on AI tool call and embed spans in
 the run inspector

---
 .server-changes/ai-tool-call-span-errors.md      |  6 ++++++
 .../components/runs/v3/ai/AIEmbedSpanDetails.tsx | 16 +++++++++++++++-
 .../runs/v3/ai/AIToolCallSpanDetails.tsx         | 16 +++++++++++++++-
 .../route.tsx                                    |  4 ++--
 4 files changed, 38 insertions(+), 4 deletions(-)
 create mode 100644 .server-changes/ai-tool-call-span-errors.md

diff --git a/.server-changes/ai-tool-call-span-errors.md b/.server-changes/ai-tool-call-span-errors.md
new file mode 100644
index 00000000000..31ab5ba5ddd
--- /dev/null
+++ b/.server-changes/ai-tool-call-span-errors.md
@@ -0,0 +1,6 @@
+---
+area: webapp
+type: fix
+---
+
+Failed AI SDK tool call and embedding spans now show the error message and stack trace in the run inspector, below the tool input.
diff --git a/apps/webapp/app/components/runs/v3/ai/AIEmbedSpanDetails.tsx b/apps/webapp/app/components/runs/v3/ai/AIEmbedSpanDetails.tsx
index 1cac3de503f..25ed6c8a29a 100644
--- a/apps/webapp/app/components/runs/v3/ai/AIEmbedSpanDetails.tsx
+++ b/apps/webapp/app/components/runs/v3/ai/AIEmbedSpanDetails.tsx
@@ -1,5 +1,7 @@
+import type { SpanEvent as OtelSpanEvent } from "@trigger.dev/core/v3";
 import { Header3 } from "~/components/primitives/Headers";
 import { Paragraph } from "~/components/primitives/Paragraph";
+import { SpanEvents } from "~/components/runs/v3/SpanEvents";
 import { formatDuration } from "./aiHelpers";
 import { SpanMetricRow as MetricRow } from "./SpanMetricRow";
 
@@ -35,7 +37,13 @@ export function extractAIEmbedData(
   };
 }
 
-export function AIEmbedSpanDetails({ data }: { data: AIEmbedData }) {
+export function AIEmbedSpanDetails({
+  data,
+  spanEvents,
+}: {
+  data: AIEmbedData;
+  spanEvents?: OtelSpanEvent[];
+}) {
   return (
     <div className="flex h-full flex-col overflow-hidden">
       <div className="flex-1 overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control">
@@ -58,6 +66,12 @@ export function AIEmbedSpanDetails({ data }: { data: AIEmbedData }) {
               </div>
             </div>
           )}
+
+          {spanEvents && spanEvents.some((event) => !event.name.startsWith("trigger.dev/")) && (
+            <div className="py-2.5">
+              <SpanEvents spanEvents={spanEvents} />
+            </div>
+          )}
         </div>
       </div>
     </div>
diff --git a/apps/webapp/app/components/runs/v3/ai/AIToolCallSpanDetails.tsx b/apps/webapp/app/components/runs/v3/ai/AIToolCallSpanDetails.tsx
index 5557f2728c2..e35c9a7f698 100644
--- a/apps/webapp/app/components/runs/v3/ai/AIToolCallSpanDetails.tsx
+++ b/apps/webapp/app/components/runs/v3/ai/AIToolCallSpanDetails.tsx
@@ -1,6 +1,8 @@
+import type { SpanEvent as OtelSpanEvent } from "@trigger.dev/core/v3";
 import { Header3 } from "~/components/primitives/Headers";
 import { CodeBlock } from "~/components/code/CodeBlock";
 import { TruncatedCopyableValue } from "~/components/primitives/TruncatedCopyableValue";
+import { SpanEvents } from "~/components/runs/v3/SpanEvents";
 import { formatDuration, tryPrettyJson } from "./aiHelpers";
 import { SpanMetricRow as MetricRow } from "./SpanMetricRow";
 
@@ -36,7 +38,13 @@ export function extractAIToolCallData(
   };
 }
 
-export function AIToolCallSpanDetails({ data }: { data: AIToolCallData }) {
+export function AIToolCallSpanDetails({
+  data,
+  spanEvents,
+}: {
+  data: AIToolCallData;
+  spanEvents?: OtelSpanEvent[];
+}) {
   return (
     <div className="flex h-full flex-col overflow-hidden">
       <div className="flex-1 overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control">
@@ -68,6 +76,12 @@ export function AIToolCallSpanDetails({ data }: { data: AIToolCallData }) {
               />
             </div>
           )}
+
+          {spanEvents && spanEvents.some((event) => !event.name.startsWith("trigger.dev/")) && (
+            <div className="py-2.5">
+              <SpanEvents spanEvents={spanEvents} />
+            </div>
+          )}
         </div>
       </div>
     </div>
diff --git a/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam.spans.$spanParam/route.tsx b/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam.spans.$spanParam/route.tsx
index 374440dfa0b..807e527793c 100644
--- a/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam.spans.$spanParam/route.tsx
+++ b/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam.spans.$spanParam/route.tsx
@@ -1777,7 +1777,7 @@ function SpanEntity({ span }: { span: Span }) {
           <div className="px-3">
             <SpanHorizontalTimeline startTime={span.startTime} duration={span.duration} />
           </div>
-          <AIToolCallSpanDetails data={span.entity.object} />
+          <AIToolCallSpanDetails data={span.entity.object} spanEvents={span.events} />
         </div>
       );
     }
@@ -1787,7 +1787,7 @@ function SpanEntity({ span }: { span: Span }) {
           <div className="px-3">
             <SpanHorizontalTimeline startTime={span.startTime} duration={span.duration} />
           </div>
-          <AIEmbedSpanDetails data={span.entity.object} />
+          <AIEmbedSpanDetails data={span.entity.object} spanEvents={span.events} />
         </div>
       );
     }