From 2d939ea11bb4f7eadd972c7dd778b666a475e1b0 Mon Sep 17 00:00:00 2001
From: Ajax Davis <thomasalwyndavis@gmail.com>
Date: Tue, 20 Jan 2026 06:04:58 +1000
Subject: [PATCH] fix: handle null/undefined usage object in scenario runs

- Make usage field nullable in TypeScript interface
- Add optional chaining for run.usage?.executionTimeMs
- Add optional chaining for run.usage?.totalTokens
- Prevents TypeError when usage object is missing
---
 .../collections/[slug]/scenarios/[id]/page.tsx         | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/apps/web/src/app/(profile)/[username]/collections/[slug]/scenarios/[id]/page.tsx b/apps/web/src/app/(profile)/[username]/collections/[slug]/scenarios/[id]/page.tsx
index 6387b0b..a70b3f7 100644
--- a/apps/web/src/app/(profile)/[username]/collections/[slug]/scenarios/[id]/page.tsx
+++ b/apps/web/src/app/(profile)/[username]/collections/[slug]/scenarios/[id]/page.tsx
@@ -24,7 +24,7 @@ interface ScenarioRun {
     totalTokens: number | null;
     executionTimeMs: number | null;
     estimatedCost: number | null;
-  };
+  } | null;
   timestamps: {
     startedAt: string | null;
     completedAt: string | null;
@@ -361,12 +361,12 @@ export default function CollectionScenarioDetailPage(): React.ReactElement {
                           <span className="text-sm text-foreground-secondary">
                             {formatDate(run.timestamps?.createdAt || null)}
                           </span>
-                          {run.usage.executionTimeMs && (
+                          {run.usage?.executionTimeMs && (
                             <span className="text-sm text-foreground-tertiary">
                               {formatDuration(run.usage.executionTimeMs)}
                             </span>
                           )}
-                          {run.usage.totalTokens && (
+                          {run.usage?.totalTokens && (
                             <span className="text-sm text-foreground-tertiary">
                               {run.usage.totalTokens.toLocaleString()} tokens
                             </span>
@@ -413,13 +413,13 @@ export default function CollectionScenarioDetailPage(): React.ReactElement {
                                 <div>
                                   <span className="text-foreground-tertiary">Duration:</span>{' '}
                                   <span className="text-foreground">
-                                    {formatDuration(run.usage.executionTimeMs)}
+                                    {formatDuration(run.usage?.executionTimeMs || null)}
                                   </span>
                                 </div>
                                 <div>
                                   <span className="text-foreground-tertiary">Tokens:</span>{' '}
                                   <span className="text-foreground">
-                                    {run.usage.totalTokens?.toLocaleString() || '—'}
+                                    {run.usage?.totalTokens?.toLocaleString() || '—'}
                                   </span>
                                 </div>
                                 <div>