From b0c5492ea79c56902adebb04b574ca8ebd5dee28 Mon Sep 17 00:00:00 2001
From: Eric Allam <eallam@icloud.com>
Date: Thu, 16 Apr 2026 14:24:00 +0100
Subject: [PATCH 1/2] fix(webapp): prevent dashboard crash when span accessory
 text is not a string fix: update stale default timeout comment

---
 .server-changes/span-accessory-text-guard.md  |  6 +++++
 .../app/components/runs/v3/SpanTitle.tsx      | 22 ++++++++++---------
 2 files changed, 18 insertions(+), 10 deletions(-)
 create mode 100644 .server-changes/span-accessory-text-guard.md

diff --git a/.server-changes/span-accessory-text-guard.md b/.server-changes/span-accessory-text-guard.md
new file mode 100644
index 0000000000..ab668efd17
--- /dev/null
+++ b/.server-changes/span-accessory-text-guard.md
@@ -0,0 +1,6 @@
+---
+area: webapp
+type: fix
+---
+
+Prevent dashboard crash (React error #31) when span accessory item text is not a string. Filters out malformed accessory items in SpanCodePathAccessory instead of passing objects to React as children.
diff --git a/apps/webapp/app/components/runs/v3/SpanTitle.tsx b/apps/webapp/app/components/runs/v3/SpanTitle.tsx
index 4c25fc7b9a..6454f7cfc9 100644
--- a/apps/webapp/app/components/runs/v3/SpanTitle.tsx
+++ b/apps/webapp/app/components/runs/v3/SpanTitle.tsx
@@ -104,16 +104,18 @@ export function SpanCodePathAccessory({
         className
       )}
     >
-      {accessory.items.map((item, index) => (
-        <Fragment key={index}>
-          <span className={cn("truncate", "text-text-dimmed")}>{item.text}</span>
-          {index < accessory.items.length - 1 && (
-            <span className="text-text-dimmed">
-              <ChevronRightIcon className="size-4" />
-            </span>
-          )}
-        </Fragment>
-      ))}
+      {accessory.items
+        .filter((item) => typeof item.text === "string")
+        .map((item, index, filtered) => (
+          <Fragment key={index}>
+            <span className={cn("truncate", "text-text-dimmed")}>{item.text}</span>
+            {index < filtered.length - 1 && (
+              <span className="text-text-dimmed">
+                <ChevronRightIcon className="size-4" />
+              </span>
+            )}
+          </Fragment>
+        ))}
     </code>
   );
 }

From 1f439026b81f74a56ff004d4c4d37c7e5ddc0c28 Mon Sep 17 00:00:00 2001
From: Eric Allam <eallam@icloud.com>
Date: Thu, 16 Apr 2026 14:38:47 +0100
Subject: [PATCH 2/2] fix(webapp): apply non-string text guard to all accessory
 branches

---
 .../app/components/runs/v3/SpanTitle.tsx      | 20 +++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/apps/webapp/app/components/runs/v3/SpanTitle.tsx b/apps/webapp/app/components/runs/v3/SpanTitle.tsx
index 6454f7cfc9..0b9273cd48 100644
--- a/apps/webapp/app/components/runs/v3/SpanTitle.tsx
+++ b/apps/webapp/app/components/runs/v3/SpanTitle.tsx
@@ -55,20 +55,24 @@ function SpanAccessory({
     case "pills": {
       return (
         <span className="flex items-center gap-1">
-          {accessory.items.map((item, index) => (
-            <SpanPill key={index} text={item.text} icon={item.icon} />
-          ))}
+          {accessory.items
+            .filter((item) => typeof item.text === "string")
+            .map((item, index) => (
+              <SpanPill key={index} text={item.text} icon={item.icon} />
+            ))}
         </span>
       );
     }
     default: {
       return (
         <span className={cn("flex gap-1")}>
-          {accessory.items.map((item, index) => (
-            <span key={index} className={cn("inline-flex items-center gap-1")}>
-              {item.text}
-            </span>
-          ))}
+          {accessory.items
+            .filter((item) => typeof item.text === "string")
+            .map((item, index) => (
+              <span key={index} className={cn("inline-flex items-center gap-1")}>
+                {item.text}
+              </span>
+            ))}
         </span>
       );
     }