feat: consume read/write metrics in execution timeline and resource p…

apps/web/src/app/trace/page.tsx

@@ -129,7 +129,7 @@ export default function TracePage() {
           )}
 
           {trace.nodes.length > 0 && (
-            <ExecutionTimeline nodes={trace.nodes} />
+            <ExecutionTimeline nodes={trace.nodes} resourceProfile={trace.resource_profile} />
           )}
 
           {trace.state_diff.length > 0 && (

apps/web/src/components/trace/ExecutionTimeline.tsx

@@ -1,11 +1,28 @@
 interface ExecutionTimelineProps {
   nodes: any[];
+  resourceProfile?: {
+    read_bytes: number;
+    read_limit: number;
+    write_bytes: number;
+    write_limit: number;
+  };
 }
 
-export function ExecutionTimeline({ nodes }: ExecutionTimelineProps) {
+export function ExecutionTimeline({ nodes, resourceProfile }: ExecutionTimelineProps) {
+  const isApproachingReadLimit = resourceProfile && resourceProfile.read_limit > 0 && (resourceProfile.read_bytes / resourceProfile.read_limit) > 0.9;
+  const isApproachingWriteLimit = resourceProfile && resourceProfile.write_limit > 0 && (resourceProfile.write_bytes / resourceProfile.write_limit) > 0.9;
+
   return (
     <div className="bg-white rounded-lg shadow p-6">
-      <h2 className="text-xl font-semibold mb-4">Execution Timeline</h2>
+      <div className="flex items-center justify-between mb-4">
+        <h2 className="text-xl font-semibold">Execution Timeline</h2>
+        {(isApproachingReadLimit || isApproachingWriteLimit) && (
+          <span className="px-3 py-1 bg-red-100 text-red-800 text-xs font-medium rounded-full flex items-center">
+            <span className="mr-1">⚠️</span> 
+            Storage IO Warning (Approaching limit)
+          </span>
+        )}
+      </div>
       <div className="space-y-2">
         {nodes.map((node, idx) => (
           <div

apps/web/src/components/trace/ResourceProfile.tsx

@@ -11,16 +11,16 @@ interface ResourceProfileProps {
   };
 }
 
-function ResourceBar({ label, used, limit, format }: { 
-  label: string; 
-  used: number; 
-  limit: number; 
+function ResourceBar({ label, used, limit, format }: {
+  label: string;
+  used: number;
+  limit: number;
   format?: (v: number) => string;
 }) {
   const percentage = limit > 0 ? (used / limit) * 100 : 0;
   const displayValue = format ? format(used) : used.toLocaleString();
   const displayLimit = format ? format(limit) : limit.toLocaleString();
-  
+
   return (
     <div>
       <div className="flex justify-between mb-2">
@@ -31,9 +31,8 @@ function ResourceBar({ label, used, limit, format }: {
       </div>
       <div className="w-full bg-gray-200 rounded-full h-4">
         <div
-          className={`h-4 rounded-full transition-all duration-300 ${
-            percentage > 90 ? "bg-red-500" : percentage > 70 ? "bg-yellow-500" : "bg-green-500"
-          }`}
+          className={`h-4 rounded-full transition-all duration-300 ${percentage > 90 ? "bg-red-500" : percentage > 70 ? "bg-yellow-500" : "bg-green-500"
+            }`}
           style={{ width: `${Math.min(percentage, 100)}%` }}
         />
       </div>
@@ -52,29 +51,29 @@ export function ResourceProfile({ profile }: ResourceProfileProps) {
   return (
     <div className="bg-white rounded-lg shadow p-6">
       <h2 className="text-xl font-semibold mb-4">Resource Profile</h2>
-      
+
       <div className="space-y-6">
-        <ResourceBar 
-          label="CPU Instructions" 
-          used={profile.cpu_used} 
-          limit={profile.cpu_limit} 
+        <ResourceBar
+          label="CPU Instructions"
+          used={profile.cpu_used}
+          limit={profile.cpu_limit}
         />
-        <ResourceBar 
-          label="Memory" 
-          used={profile.memory_used} 
-          limit={profile.memory_limit} 
+        <ResourceBar
+          label="Memory"
+          used={profile.memory_used}
+          limit={profile.memory_limit}
           format={(v) => formatBytes(v)}
         />
-        <ResourceBar 
-          label="Read Bytes" 
-          used={profile.read_bytes} 
-          limit={profile.read_limit} 
+        <ResourceBar
+          label="Read Bytes"
+          used={profile.read_bytes}
+          limit={profile.read_limit}
           format={(v) => formatBytes(v)}
         />
-        <ResourceBar 
-          label="Write Bytes" 
-          used={profile.write_bytes} 
-          limit={profile.write_limit} 
+        <ResourceBar
+          label="Write Bytes"
+          used={profile.write_bytes}
+          limit={profile.write_limit}
           format={(v) => formatBytes(v)}
         />
       </div>