From d89b37c5688a822871041554c6ec9182dcb83a2f Mon Sep 17 00:00:00 2001
From: Brace Sproul <braceasproul@gmail.com>
Date: Sun, 27 Jul 2025 17:19:41 -0700
Subject: [PATCH] fix: Token data type error (#556)

---
 apps/web/src/components/v2/thread-view.tsx | 26 +++++++++++++++++-----
 1 file changed, 21 insertions(+), 5 deletions(-)

diff --git a/apps/web/src/components/v2/thread-view.tsx b/apps/web/src/components/v2/thread-view.tsx
index 40342fe4..5e486f38 100644
--- a/apps/web/src/components/v2/thread-view.tsx
+++ b/apps/web/src/components/v2/thread-view.tsx
@@ -11,7 +11,7 @@ import { ThreadMetadata } from "./types";
 import { useStream } from "@langchain/langgraph-sdk/react";
 import { ManagerGraphState } from "@open-swe/shared/open-swe/manager/types";
 import { PlannerGraphState } from "@open-swe/shared/open-swe/planner/types";
-import { GraphState, CacheMetrics } from "@open-swe/shared/open-swe/types";
+import { GraphState, CacheMetrics, ModelTokenData } from "@open-swe/shared/open-swe/types";
 import { ActionsRenderer } from "./actions-renderer";
 import { ThemeToggle } from "../theme-toggle";
 import { HumanMessage } from "@langchain/core/messages";
@@ -47,6 +47,25 @@ interface ThreadViewProps {
   onBackToHome: () => void;
 }
 
+const joinTokenData = (plannerTokenData?: CacheMetrics | ModelTokenData[], programmerTokenData?: CacheMetrics | ModelTokenData[]): ModelTokenData[] | CacheMetrics[] => {
+  if (!plannerTokenData && !programmerTokenData) {
+    return [];
+  }
+  if (plannerTokenData && programmerTokenData) {
+    return [...(Array.isArray(plannerTokenData) ? plannerTokenData : [plannerTokenData]), ...(Array.isArray(programmerTokenData) ? programmerTokenData : [programmerTokenData])];
+  }
+
+  if (plannerTokenData && !programmerTokenData) {
+    return Array.isArray(plannerTokenData) ? plannerTokenData : [plannerTokenData];
+  }
+
+  if (!plannerTokenData && programmerTokenData) {
+    return Array.isArray(programmerTokenData) ? programmerTokenData : [programmerTokenData];
+  }
+
+  return [];
+}
+
 export function ThreadView({
   stream,
   displayThread,
@@ -341,10 +360,7 @@ export function ThreadView({
                       />
                     )}
                   <TokenUsage
-                    tokenData={[
-                      ...(plannerStream.values.tokenData ?? []),
-                      ...(programmerStream.values.tokenData ?? []),
-                    ].filter(Boolean)}
+                    tokenData={joinTokenData(plannerStream.values.tokenData, programmerStream.values.tokenData)}
                   />
                 </div>
               </div>