From df2ed7352d48692d7233e769f6150e4d9266473f Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Fri, 11 Apr 2025 11:54:16 +0100
Subject: [PATCH 001/137] Updates recharts to 2.15.2

---
 apps/webapp/package.json |   2 +-
 pnpm-lock.yaml           | 113 ++++++++++++++++++++-------------------
 2 files changed, 60 insertions(+), 55 deletions(-)

diff --git a/apps/webapp/package.json b/apps/webapp/package.json
index 987e983862..69e8464d3c 100644
--- a/apps/webapp/package.json
+++ b/apps/webapp/package.json
@@ -189,7 +189,7 @@
     "react-stately": "^3.29.1",
     "react-use": "17.5.1",
     "react-window-splitter": "^0.4.1",
-    "recharts": "^2.12.6",
+    "recharts": "^2.15.2",
     "regression": "^2.0.1",
     "remix-auth": "^3.6.0",
     "remix-auth-email-link": "2.0.2",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d2361acd82..5cf029d079 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -697,8 +697,8 @@ importers:
         specifier: ^0.4.1
         version: 0.4.1(@types/react@18.2.69)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       recharts:
-        specifier: ^2.12.6
-        version: 2.12.6(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+        specifier: ^2.15.2
+        version: 2.15.4(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       regression:
         specifier: ^2.0.1
         version: 2.0.1
@@ -17454,6 +17454,9 @@ packages:
   react-is@17.0.2:
     resolution: {integrity: sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==}
 
+  react-is@18.3.1:
+    resolution: {integrity: sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==}
+
   react-markdown@10.1.0:
     resolution: {integrity: sha512-qKxVopLT/TyA6BX3Ue5NwabOsAzm0Q7kAPwq6L+wWDwisYs7R8vZ0nRXqq6rkueboxpkjvLGU9fWifiX/ZZFxQ==}
     peerDependencies:
@@ -17510,11 +17513,11 @@ packages:
     peerDependencies:
       react: '>=16.8'
 
-  react-smooth@4.0.1:
-    resolution: {integrity: sha512-OE4hm7XqR0jNOq3Qmk9mFLyd6p2+j6bvbPJ7qlB7+oo0eNcL2l7WQzG6MBnT3EXY6xzkLMUBec3AfewJdA0J8w==}
+  react-smooth@4.0.4:
+    resolution: {integrity: sha512-gnGKTpYwqL0Iii09gHobNolvX4Kiq4PKx6eWBCYYix+8cdw+cGo3do906l1NBPKkSWx1DghC1dlWG9L2uGd61Q==}
     peerDependencies:
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0
-      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
 
   react-stately@3.29.1:
     resolution: {integrity: sha512-hc4ZHy/ahvMwr6z7XMjYJ7EgzNVrXhzM4l2Qj17rdRhERo7/ovWmQencf9pF7K8kD5TraEHxPHLrYzGN4fxfUQ==}
@@ -17629,12 +17632,12 @@ packages:
   recharts-scale@0.4.5:
     resolution: {integrity: sha512-kivNFO+0OcUNu7jQquLXAxz1FIwZj8nrj+YkOKc5694NbjCvcT6aSZiIzNzd2Kul4o4rTto8QVR9lMNtxD4G1w==}
 
-  recharts@2.12.6:
-    resolution: {integrity: sha512-D+7j9WI+D0NHauah3fKHuNNcRK8bOypPW7os1DERinogGBGaHI7i6tQKJ0aUF3JXyBZ63dyfKIW2WTOPJDxJ8w==}
+  recharts@2.15.4:
+    resolution: {integrity: sha512-UT/q6fwS3c1dHbXv2uFgYJ9BMFHu3fwnd7AYZaEQhXuYQ4hgsxLvsUXzGdKeZrW5xopzDCvuA2N41WJ88I7zIw==}
     engines: {node: '>=14'}
     peerDependencies:
-      react: ^16.0.0 || ^17.0.0 || ^18.0.0
-      react-dom: ^16.0.0 || ^17.0.0 || ^18.0.0
+      react: ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      react-dom: ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
 
   rechoir@0.6.2:
     resolution: {integrity: sha512-HFM8rkZ+i3zrV+4LQjwQ0W+ez98pApMGM3HUrN04j3CqzPOzl9nmP15Y8YXNm8QHGv/eacOVEjqhmWpkRV0NAw==}
@@ -24068,7 +24071,7 @@ snapshots:
 
   '@manypkg/find-root@1.1.0':
     dependencies:
-      '@babel/runtime': 7.27.4
+      '@babel/runtime': 7.28.4
       '@types/node': 12.20.55
       find-up: 4.1.0
       fs-extra: 8.1.0
@@ -25455,14 +25458,14 @@ snapshots:
 
   '@radix-ui/react-arrow@1.0.2(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
-      '@babel/runtime': 7.27.4
+      '@babel/runtime': 7.28.4
       '@radix-ui/react-primitive': 1.0.2(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
 
   '@radix-ui/react-arrow@1.0.3(@types/react-dom@18.2.7)(@types/react@18.3.1)(react-dom@18.2.0(react@18.3.1))(react@18.3.1)':
     dependencies:
-      '@babel/runtime': 7.27.4
+      '@babel/runtime': 7.28.4
       '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.3.1)(react-dom@18.2.0(react@18.3.1))(react@18.3.1)
       react: 18.3.1
       react-dom: 18.2.0(react@18.3.1)
@@ -25484,7 +25487,7 @@ snapshots:
 
   '@radix-ui/react-collapsible@1.0.3(@types/react-dom@18.2.7)(@types/react@18.3.1)(react-dom@18.2.0(react@18.3.1))(react@18.3.1)':
     dependencies:
-      '@babel/runtime': 7.27.4
+      '@babel/runtime': 7.28.4
       '@radix-ui/primitive': 1.0.1
       '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.3.1)(react@18.3.1)
       '@radix-ui/react-context': 1.0.1(@types/react@18.3.1)(react@18.3.1)
@@ -25793,7 +25796,7 @@ snapshots:
 
   '@radix-ui/react-dismissable-layer@1.0.4(@types/react-dom@18.2.7)(@types/react@18.2.69)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
-      '@babel/runtime': 7.27.0
+      '@babel/runtime': 7.28.4
       '@radix-ui/primitive': 1.0.1
       '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.69)(react@18.2.0)
       '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.69)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
@@ -25807,7 +25810,7 @@ snapshots:
 
   '@radix-ui/react-dismissable-layer@1.0.4(@types/react-dom@18.2.7)(@types/react@18.3.1)(react-dom@18.2.0(react@18.3.1))(react@18.3.1)':
     dependencies:
-      '@babel/runtime': 7.27.0
+      '@babel/runtime': 7.28.4
       '@radix-ui/primitive': 1.0.1
       '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.3.1)(react@18.3.1)
       '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.3.1)(react-dom@18.2.0(react@18.3.1))(react@18.3.1)
@@ -25821,7 +25824,7 @@ snapshots:
 
   '@radix-ui/react-dismissable-layer@1.0.5(@types/react-dom@18.2.7)(@types/react@18.3.1)(react-dom@18.2.0(react@18.3.1))(react@18.3.1)':
     dependencies:
-      '@babel/runtime': 7.27.4
+      '@babel/runtime': 7.28.4
       '@radix-ui/primitive': 1.0.1
       '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.3.1)(react@18.3.1)
       '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.3.1)(react-dom@18.2.0(react@18.3.1))(react@18.3.1)
@@ -25840,14 +25843,14 @@ snapshots:
 
   '@radix-ui/react-focus-guards@1.0.1(@types/react@18.2.69)(react@18.2.0)':
     dependencies:
-      '@babel/runtime': 7.27.0
+      '@babel/runtime': 7.28.4
       react: 18.2.0
     optionalDependencies:
       '@types/react': 18.2.69
 
   '@radix-ui/react-focus-guards@1.0.1(@types/react@18.3.1)(react@18.3.1)':
     dependencies:
-      '@babel/runtime': 7.27.0
+      '@babel/runtime': 7.28.4
       react: 18.3.1
     optionalDependencies:
       '@types/react': 18.3.1
@@ -25863,7 +25866,7 @@ snapshots:
 
   '@radix-ui/react-focus-scope@1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.69)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
-      '@babel/runtime': 7.27.0
+      '@babel/runtime': 7.28.4
       '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.69)(react@18.2.0)
       '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.69)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.69)(react@18.2.0)
@@ -25875,7 +25878,7 @@ snapshots:
 
   '@radix-ui/react-focus-scope@1.0.3(@types/react-dom@18.2.7)(@types/react@18.3.1)(react-dom@18.2.0(react@18.3.1))(react@18.3.1)':
     dependencies:
-      '@babel/runtime': 7.27.0
+      '@babel/runtime': 7.28.4
       '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.3.1)(react@18.3.1)
       '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.3.1)(react-dom@18.2.0(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.3.1)(react@18.3.1)
@@ -25887,7 +25890,7 @@ snapshots:
 
   '@radix-ui/react-focus-scope@1.0.4(@types/react-dom@18.2.7)(@types/react@18.3.1)(react-dom@18.2.0(react@18.3.1))(react@18.3.1)':
     dependencies:
-      '@babel/runtime': 7.27.4
+      '@babel/runtime': 7.28.4
       '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.3.1)(react@18.3.1)
       '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.3.1)(react-dom@18.2.0(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.3.1)(react@18.3.1)
@@ -25915,7 +25918,7 @@ snapshots:
 
   '@radix-ui/react-id@1.0.1(@types/react@18.2.69)(react@18.2.0)':
     dependencies:
-      '@babel/runtime': 7.27.0
+      '@babel/runtime': 7.28.4
       '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.2.69)(react@18.2.0)
       react: 18.2.0
     optionalDependencies:
@@ -25923,7 +25926,7 @@ snapshots:
 
   '@radix-ui/react-id@1.0.1(@types/react@18.3.1)(react@18.3.1)':
     dependencies:
-      '@babel/runtime': 7.27.0
+      '@babel/runtime': 7.28.4
       '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.3.1)(react@18.3.1)
       react: 18.3.1
     optionalDependencies:
@@ -25968,7 +25971,7 @@ snapshots:
 
   '@radix-ui/react-popover@1.0.7(@types/react-dom@18.2.7)(@types/react@18.3.1)(react-dom@18.2.0(react@18.3.1))(react@18.3.1)':
     dependencies:
-      '@babel/runtime': 7.27.4
+      '@babel/runtime': 7.28.4
       '@radix-ui/primitive': 1.0.1
       '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.3.1)(react@18.3.1)
       '@radix-ui/react-context': 1.0.1(@types/react@18.3.1)(react@18.3.1)
@@ -26010,7 +26013,7 @@ snapshots:
 
   '@radix-ui/react-popper@1.1.2(@types/react-dom@18.2.7)(@types/react@18.3.1)(react-dom@18.2.0(react@18.3.1))(react@18.3.1)':
     dependencies:
-      '@babel/runtime': 7.27.4
+      '@babel/runtime': 7.28.4
       '@floating-ui/react-dom': 2.0.9(react-dom@18.2.0(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-arrow': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.3.1)(react-dom@18.2.0(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.3.1)(react@18.3.1)
@@ -26029,7 +26032,7 @@ snapshots:
 
   '@radix-ui/react-popper@1.1.3(@types/react-dom@18.2.7)(@types/react@18.3.1)(react-dom@18.2.0(react@18.3.1))(react@18.3.1)':
     dependencies:
-      '@babel/runtime': 7.27.4
+      '@babel/runtime': 7.28.4
       '@floating-ui/react-dom': 2.0.9(react-dom@18.2.0(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-arrow': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.3.1)(react-dom@18.2.0(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.3.1)(react@18.3.1)
@@ -26055,7 +26058,7 @@ snapshots:
 
   '@radix-ui/react-portal@1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.69)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
-      '@babel/runtime': 7.27.0
+      '@babel/runtime': 7.28.4
       '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.69)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
@@ -26065,7 +26068,7 @@ snapshots:
 
   '@radix-ui/react-portal@1.0.3(@types/react-dom@18.2.7)(@types/react@18.3.1)(react-dom@18.2.0(react@18.3.1))(react@18.3.1)':
     dependencies:
-      '@babel/runtime': 7.27.0
+      '@babel/runtime': 7.28.4
       '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.3.1)(react-dom@18.2.0(react@18.3.1))(react@18.3.1)
       react: 18.3.1
       react-dom: 18.2.0(react@18.3.1)
@@ -26075,7 +26078,7 @@ snapshots:
 
   '@radix-ui/react-portal@1.0.4(@types/react-dom@18.2.7)(@types/react@18.3.1)(react-dom@18.2.0(react@18.3.1))(react@18.3.1)':
     dependencies:
-      '@babel/runtime': 7.27.4
+      '@babel/runtime': 7.28.4
       '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.3.1)(react-dom@18.2.0(react@18.3.1))(react@18.3.1)
       react: 18.3.1
       react-dom: 18.2.0(react@18.3.1)
@@ -26492,7 +26495,7 @@ snapshots:
 
   '@radix-ui/react-toggle-group@1.0.4(@types/react-dom@18.2.7)(@types/react@18.3.1)(react-dom@18.2.0(react@18.3.1))(react@18.3.1)':
     dependencies:
-      '@babel/runtime': 7.27.4
+      '@babel/runtime': 7.28.4
       '@radix-ui/primitive': 1.0.1
       '@radix-ui/react-context': 1.0.1(@types/react@18.3.1)(react@18.3.1)
       '@radix-ui/react-direction': 1.0.1(@types/react@18.3.1)(react@18.3.1)
@@ -26508,7 +26511,7 @@ snapshots:
 
   '@radix-ui/react-toggle@1.0.3(@types/react-dom@18.2.7)(@types/react@18.3.1)(react-dom@18.2.0(react@18.3.1))(react@18.3.1)':
     dependencies:
-      '@babel/runtime': 7.27.4
+      '@babel/runtime': 7.28.4
       '@radix-ui/primitive': 1.0.1
       '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.3.1)(react-dom@18.2.0(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.3.1)(react@18.3.1)
@@ -26540,7 +26543,7 @@ snapshots:
 
   '@radix-ui/react-tooltip@1.0.6(@types/react-dom@18.2.7)(@types/react@18.3.1)(react-dom@18.2.0(react@18.3.1))(react@18.3.1)':
     dependencies:
-      '@babel/runtime': 7.27.4
+      '@babel/runtime': 7.28.4
       '@radix-ui/primitive': 1.0.1
       '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.3.1)(react@18.3.1)
       '@radix-ui/react-context': 1.0.1(@types/react@18.3.1)(react@18.3.1)
@@ -26571,14 +26574,14 @@ snapshots:
 
   '@radix-ui/react-use-callback-ref@1.0.1(@types/react@18.2.69)(react@18.2.0)':
     dependencies:
-      '@babel/runtime': 7.27.4
+      '@babel/runtime': 7.28.4
       react: 18.2.0
     optionalDependencies:
       '@types/react': 18.2.69
 
   '@radix-ui/react-use-callback-ref@1.0.1(@types/react@18.3.1)(react@18.3.1)':
     dependencies:
-      '@babel/runtime': 7.27.4
+      '@babel/runtime': 7.28.4
       react: 18.3.1
     optionalDependencies:
       '@types/react': 18.3.1
@@ -26640,13 +26643,13 @@ snapshots:
 
   '@radix-ui/react-use-escape-keydown@1.0.2(react@18.2.0)':
     dependencies:
-      '@babel/runtime': 7.27.4
+      '@babel/runtime': 7.28.4
       '@radix-ui/react-use-callback-ref': 1.0.0(react@18.2.0)
       react: 18.2.0
 
   '@radix-ui/react-use-escape-keydown@1.0.3(@types/react@18.2.69)(react@18.2.0)':
     dependencies:
-      '@babel/runtime': 7.27.4
+      '@babel/runtime': 7.28.4
       '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.69)(react@18.2.0)
       react: 18.2.0
     optionalDependencies:
@@ -26654,7 +26657,7 @@ snapshots:
 
   '@radix-ui/react-use-escape-keydown@1.0.3(@types/react@18.3.1)(react@18.3.1)':
     dependencies:
-      '@babel/runtime': 7.27.4
+      '@babel/runtime': 7.28.4
       '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.3.1)(react@18.3.1)
       react: 18.3.1
     optionalDependencies:
@@ -26716,13 +26719,13 @@ snapshots:
 
   '@radix-ui/react-use-rect@1.0.0(react@18.2.0)':
     dependencies:
-      '@babel/runtime': 7.27.4
+      '@babel/runtime': 7.28.4
       '@radix-ui/rect': 1.0.0
       react: 18.2.0
 
   '@radix-ui/react-use-rect@1.0.1(@types/react@18.3.1)(react@18.3.1)':
     dependencies:
-      '@babel/runtime': 7.27.4
+      '@babel/runtime': 7.28.4
       '@radix-ui/rect': 1.0.1
       react: 18.3.1
     optionalDependencies:
@@ -26730,7 +26733,7 @@ snapshots:
 
   '@radix-ui/react-use-size@1.0.0(react@18.2.0)':
     dependencies:
-      '@babel/runtime': 7.27.4
+      '@babel/runtime': 7.28.4
       '@radix-ui/react-use-layout-effect': 1.0.0(react@18.2.0)
       react: 18.2.0
 
@@ -26759,7 +26762,7 @@ snapshots:
 
   '@radix-ui/react-visually-hidden@1.0.3(@types/react-dom@18.2.7)(@types/react@18.3.1)(react-dom@18.2.0(react@18.3.1))(react@18.3.1)':
     dependencies:
-      '@babel/runtime': 7.27.4
+      '@babel/runtime': 7.28.4
       '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.3.1)(react-dom@18.2.0(react@18.3.1))(react@18.3.1)
       react: 18.3.1
       react-dom: 18.2.0(react@18.3.1)
@@ -26769,11 +26772,11 @@ snapshots:
 
   '@radix-ui/rect@1.0.0':
     dependencies:
-      '@babel/runtime': 7.27.4
+      '@babel/runtime': 7.28.4
 
   '@radix-ui/rect@1.0.1':
     dependencies:
-      '@babel/runtime': 7.27.4
+      '@babel/runtime': 7.28.4
 
   '@react-aria/breadcrumbs@3.5.16(react@18.2.0)':
     dependencies:
@@ -30376,7 +30379,7 @@ snapshots:
   '@testing-library/dom@8.19.1':
     dependencies:
       '@babel/code-frame': 7.22.13
-      '@babel/runtime': 7.27.0
+      '@babel/runtime': 7.28.4
       '@types/aria-query': 5.0.1
       aria-query: 5.3.0
       chalk: 4.1.2
@@ -33301,7 +33304,7 @@ snapshots:
 
   dom-helpers@5.2.1:
     dependencies:
-      '@babel/runtime': 7.27.4
+      '@babel/runtime': 7.28.4
       csstype: 3.2.0
 
   dom-serializer@2.0.0:
@@ -36515,7 +36518,7 @@ snapshots:
 
   media-query-parser@2.0.2:
     dependencies:
-      '@babel/runtime': 7.27.4
+      '@babel/runtime': 7.28.4
 
   media-typer@0.3.0: {}
 
@@ -38912,6 +38915,8 @@ snapshots:
 
   react-is@17.0.2: {}
 
+  react-is@18.3.1: {}
+
   react-markdown@10.1.0(@types/react@18.2.69)(react@18.2.0):
     dependencies:
       '@types/hast': 3.0.4
@@ -39031,7 +39036,7 @@ snapshots:
       '@remix-run/router': 1.10.0
       react: 18.2.0
 
-  react-smooth@4.0.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0):
+  react-smooth@4.0.4(react-dom@18.2.0(react@18.2.0))(react@18.2.0):
     dependencies:
       fast-equals: 5.0.1
       prop-types: 15.8.1
@@ -39084,7 +39089,7 @@ snapshots:
 
   react-transition-group@4.4.5(react-dom@18.2.0(react@18.2.0))(react@18.2.0):
     dependencies:
-      '@babel/runtime': 7.27.4
+      '@babel/runtime': 7.28.4
       dom-helpers: 5.2.1
       loose-envify: 1.4.0
       prop-types: 15.8.1
@@ -39221,15 +39226,15 @@ snapshots:
     dependencies:
       decimal.js-light: 2.5.1
 
-  recharts@2.12.6(react-dom@18.2.0(react@18.2.0))(react@18.2.0):
+  recharts@2.15.4(react-dom@18.2.0(react@18.2.0))(react@18.2.0):
     dependencies:
       clsx: 2.1.1
       eventemitter3: 4.0.7
       lodash: 4.17.21
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
-      react-is: 16.13.1
-      react-smooth: 4.0.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      react-is: 18.3.1
+      react-smooth: 4.0.4(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       recharts-scale: 0.4.5
       tiny-invariant: 1.3.1
       victory-vendor: 36.6.11
@@ -39623,7 +39628,7 @@ snapshots:
 
   rtl-css-js@1.16.1:
     dependencies:
-      '@babel/runtime': 7.27.4
+      '@babel/runtime': 7.28.4
 
   run-applescript@7.0.0: {}
 
@@ -40580,7 +40585,7 @@ snapshots:
 
   tailwind-merge@2.2.0:
     dependencies:
-      '@babel/runtime': 7.27.4
+      '@babel/runtime': 7.28.4
 
   tailwind-merge@2.5.3: {}
 

From 68f252be8c77f75c25bbd2b868aa10cb404a75d2 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Fri, 11 Apr 2025 11:57:11 +0100
Subject: [PATCH 002/137] Updated Chart.tsx with latest from shadcn install
 guide

---
 .../app/components/primitives/Chart.tsx       | 36 +++++++++----------
 1 file changed, 18 insertions(+), 18 deletions(-)

diff --git a/apps/webapp/app/components/primitives/Chart.tsx b/apps/webapp/app/components/primitives/Chart.tsx
index 1f1fec3bbe..43ce1de07c 100644
--- a/apps/webapp/app/components/primitives/Chart.tsx
+++ b/apps/webapp/app/components/primitives/Chart.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import * as React from "react";
 import * as RechartsPrimitive from "recharts";
 import { cn } from "~/utils/cn";
@@ -49,15 +47,13 @@ const ChartContainer = React.forwardRef<
         data-chart={chartId}
         ref={ref}
         className={cn(
-          "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-text-dimmed/50 [&_.recharts-cartesian-grid_line]:stroke-grid-bright/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-grid-dimmed [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-grid-dimmed [&_.recharts-radial-bar-background-sector]:fill-grid-dimmed [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-grid-dimmed [&_.recharts-reference-line-line]:stroke-grid-dimmed [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
+          "[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
           className
         )}
         {...props}
       >
         <ChartStyle id={chartId} config={config} />
-        <RechartsPrimitive.ResponsiveContainer className="!h-auto">
-          {children}
-        </RechartsPrimitive.ResponsiveContainer>
+        <RechartsPrimitive.ResponsiveContainer>{children}</RechartsPrimitive.ResponsiveContainer>
       </div>
     </ChartContext.Provider>
   );
@@ -65,7 +61,7 @@ const ChartContainer = React.forwardRef<
 ChartContainer.displayName = "Chart";
 
 const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
-  const colorConfig = Object.entries(config).filter(([_, config]) => config.theme || config.color);
+  const colorConfig = Object.entries(config).filter(([, config]) => config.theme || config.color);
 
   if (!colorConfig.length) {
     return null;
@@ -74,8 +70,9 @@ const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
   return (
     <style
       dangerouslySetInnerHTML={{
-        __html: Object.entries(THEMES).map(
-          ([theme, prefix]) => `
+        __html: Object.entries(THEMES)
+          .map(
+            ([theme, prefix]) => `
 ${prefix} [data-chart=${id}] {
 ${colorConfig
   .map(([key, itemConfig]) => {
@@ -85,7 +82,8 @@ ${colorConfig
   .join("\n")}
 }
 `
-        ),
+          )
+          .join("\n"),
       }}
     />
   );
@@ -130,7 +128,7 @@ const ChartTooltipContent = React.forwardRef<
       }
 
       const [item] = payload;
-      const key = `${labelKey || item.dataKey || item.name || "value"}`;
+      const key = `${labelKey || item?.dataKey || item?.name || "value"}`;
       const itemConfig = getPayloadConfigFromPayload(config, item, key);
       const value =
         !labelKey && typeof label === "string"
@@ -160,7 +158,7 @@ const ChartTooltipContent = React.forwardRef<
       <div
         ref={ref}
         className={cn(
-          "grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-grid-bright/50 bg-background-dimmed px-2.5 py-1.5 text-xs shadow-xl",
+          "border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl",
           className
         )}
       >
@@ -175,11 +173,11 @@ const ChartTooltipContent = React.forwardRef<
               <div
                 key={item.dataKey}
                 className={cn(
-                  "flex w-full items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-text-dimmed",
+                  "[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5",
                   indicator === "dot" && "items-center"
                 )}
               >
-                {formatter && item.value && item.name ? (
+                {formatter && item?.value !== undefined && item.name ? (
                   formatter(item.value, item.name, item, index, item.payload)
                 ) : (
                   <>
@@ -209,16 +207,18 @@ const ChartTooltipContent = React.forwardRef<
                     )}
                     <div
                       className={cn(
-                        "flex flex-1 justify-between gap-1.5 leading-none",
+                        "flex flex-1 justify-between leading-none",
                         nestLabel ? "items-end" : "items-center"
                       )}
                     >
                       <div className="grid gap-1.5">
                         {nestLabel ? tooltipLabel : null}
-                        <span className="text-text-dimmed">{itemConfig?.label || item.name}</span>
+                        <span className="text-muted-foreground">
+                          {itemConfig?.label || item.name}
+                        </span>
                       </div>
                       {item.value && (
-                        <span className="font-mono font-medium tabular-nums text-text-bright">
+                        <span className="text-foreground font-mono font-medium tabular-nums">
                           {item.value.toLocaleString()}
                         </span>
                       )}
@@ -268,7 +268,7 @@ const ChartLegendContent = React.forwardRef<
           <div
             key={item.value}
             className={cn(
-              "flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-text-dimmed"
+              "[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3"
             )}
           >
             {itemConfig?.icon && !hideIcon ? (

From fb75b05e65a66b413fdc5c955a87ddd335badc4a Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Fri, 11 Apr 2025 13:28:54 +0100
Subject: [PATCH 003/137] Initial setup for new charts in storybook

---
 .../primitives/{ => charts}/Chart.tsx         |  0
 .../primitives/charts/ChartCard.tsx           | 26 +++++++++
 .../components/primitives/charts/Charts.tsx   | 53 +++++++++++++++++++
 .../route.tsx                                 |  2 +-
 .../app/routes/storybook.charts/route.tsx     | 46 ++++++++++++++++
 apps/webapp/app/routes/storybook/route.tsx    |  4 ++
 6 files changed, 130 insertions(+), 1 deletion(-)
 rename apps/webapp/app/components/primitives/{ => charts}/Chart.tsx (100%)
 create mode 100644 apps/webapp/app/components/primitives/charts/ChartCard.tsx
 create mode 100644 apps/webapp/app/components/primitives/charts/Charts.tsx
 create mode 100644 apps/webapp/app/routes/storybook.charts/route.tsx

diff --git a/apps/webapp/app/components/primitives/Chart.tsx b/apps/webapp/app/components/primitives/charts/Chart.tsx
similarity index 100%
rename from apps/webapp/app/components/primitives/Chart.tsx
rename to apps/webapp/app/components/primitives/charts/Chart.tsx
diff --git a/apps/webapp/app/components/primitives/charts/ChartCard.tsx b/apps/webapp/app/components/primitives/charts/ChartCard.tsx
new file mode 100644
index 0000000000..deff2a769b
--- /dev/null
+++ b/apps/webapp/app/components/primitives/charts/ChartCard.tsx
@@ -0,0 +1,26 @@
+import { Header3 } from "../Headers";
+import { Paragraph } from "../Paragraph";
+
+export function ChartCard({
+  title,
+  description,
+  children,
+}: {
+  title: string;
+  description: string;
+  children: React.ReactNode;
+}) {
+  <div>
+    <div>
+      <Header3>{title}</Header3>
+      <Paragraph>{description}</Paragraph>
+    </div>
+    <div>{children}</div>
+    <div className="flex-col items-start gap-2 text-sm">
+      <div className="flex gap-2 font-medium leading-none">Trending up by 5.2% this month</div>
+      <div className="text-muted-foreground leading-none">
+        Showing total visitors for the last 6 months
+      </div>
+    </div>
+  </div>;
+}
diff --git a/apps/webapp/app/components/primitives/charts/Charts.tsx b/apps/webapp/app/components/primitives/charts/Charts.tsx
new file mode 100644
index 0000000000..29de316b0e
--- /dev/null
+++ b/apps/webapp/app/components/primitives/charts/Charts.tsx
@@ -0,0 +1,53 @@
+import { Bar, BarChart, CartesianGrid, XAxis, YAxis } from "recharts";
+
+import {
+  type ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "~/components/primitives/charts/Chart";
+
+export function ChartBar({ config, data }: { config: ChartConfig; data: any[] }) {
+  return (
+    <ChartContainer config={config} className="min-h-[200px] w-full">
+      <BarChart accessibilityLayer data={data}>
+        <CartesianGrid vertical={false} />
+        <XAxis
+          dataKey="month"
+          tickLine={false}
+          tickMargin={10}
+          axisLine={false}
+          // tickFormatter={(value) => value.slice(0, 3)}
+        />
+        <YAxis
+          dataKey="desktop"
+          tickLine={false}
+          tickMargin={10}
+          axisLine={false}
+          tickFormatter={(value) => value.slice(0, 3)}
+        />
+        <ChartTooltip cursor={false} content={<ChartTooltipContent hideLabel />} />
+        <Bar dataKey="desktop" fill="var(--color-desktop)" radius={4} />
+      </BarChart>
+    </ChartContainer>
+  );
+}
+
+export function LineChart({ config, data }: { config: ChartConfig; data: any[] }) {
+  return (
+    <ChartContainer config={config} className="min-h-[200px] w-full">
+      <BarChart accessibilityLayer data={data}>
+        <CartesianGrid vertical={false} />
+        <XAxis
+          dataKey="month"
+          tickLine={false}
+          tickMargin={10}
+          axisLine={false}
+          tickFormatter={(value) => value.slice(0, 3)}
+        />
+        <ChartTooltip cursor={false} content={<ChartTooltipContent hideLabel />} />
+        <Bar dataKey="desktop" fill="var(--color-desktop)" radius={4} />
+      </BarChart>
+    </ChartContainer>
+  );
+}
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.settings.usage/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.settings.usage/route.tsx
index cfefb3938c..1d86f318d6 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.settings.usage/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.settings.usage/route.tsx
@@ -13,7 +13,7 @@ import {
   ChartContainer,
   ChartTooltip,
   ChartTooltipContent,
-} from "~/components/primitives/Chart";
+} from "~/components/primitives/charts/Chart";
 import { Header2 } from "~/components/primitives/Headers";
 import { InfoPanel } from "~/components/primitives/InfoPanel";
 import { NavBar, PageTitle } from "~/components/primitives/PageHeader";
diff --git a/apps/webapp/app/routes/storybook.charts/route.tsx b/apps/webapp/app/routes/storybook.charts/route.tsx
new file mode 100644
index 0000000000..e90b2a2afb
--- /dev/null
+++ b/apps/webapp/app/routes/storybook.charts/route.tsx
@@ -0,0 +1,46 @@
+import { type ChartConfig } from "~/components/primitives/charts/Chart";
+import { ChartBar } from "~/components/primitives/charts/Charts";
+import { Header2 } from "~/components/primitives/Headers";
+
+const chartData = [
+  { month: "Nov_21", desktop: 186 },
+  { month: "Nov_22", desktop: 305 },
+  { month: "Nov_23", desktop: 237 },
+  { month: "Nov_24", desktop: 73 },
+  { month: "Nov_25", desktop: 209 },
+  { month: "Nov_26", desktop: 214 },
+];
+
+const chartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "#2563eb",
+  },
+  mobile: {
+    label: "Mobile",
+    color: "#60a5fa",
+  },
+} satisfies ChartConfig;
+
+export default function Story() {
+  return (
+    <div className="grid grid-cols-3">
+      <div className="flex flex-col items-start gap-y-4 p-4">
+        <Header2>Bar charts</Header2>
+        <ChartBar config={chartConfig} data={chartData} />
+      </div>
+      <div className="flex flex-col items-start gap-y-4 p-4">
+        <Header2>Line charts</Header2>
+        <ChartBar config={chartConfig} data={chartData} />
+      </div>
+      <div className="flex flex-col items-start gap-y-4 p-4">
+        <Header2>Big numbers</Header2>
+        <ChartBar config={chartConfig} data={chartData} />
+      </div>
+      <div className="flex flex-col items-start gap-y-4 p-4">
+        <Header2>Stepped charts</Header2>
+        <ChartBar config={chartConfig} data={chartData} />
+      </div>
+    </div>
+  );
+}
diff --git a/apps/webapp/app/routes/storybook/route.tsx b/apps/webapp/app/routes/storybook/route.tsx
index 1a583f27e6..bf0ad3ccdf 100644
--- a/apps/webapp/app/routes/storybook/route.tsx
+++ b/apps/webapp/app/routes/storybook/route.tsx
@@ -24,6 +24,10 @@ const stories: Story[] = [
     name: "Callouts",
     slug: "callout",
   },
+  {
+    name: "Charts",
+    slug: "charts",
+  },
   {
     name: "Checkboxes",
     slug: "checkboxes",

From 1fa473c5d6c7208724b8b9333193011dc44f68c0 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Fri, 11 Apr 2025 14:33:21 +0100
Subject: [PATCH 004/137] Adds a basic Card component

---
 .../app/components/primitives/charts/Card.tsx | 27 +++++++
 .../primitives/charts/ChartCard.tsx           | 26 -------
 .../components/primitives/charts/Charts.tsx   | 44 +++++------
 .../app/routes/storybook.charts/route.tsx     | 75 +++++++++++--------
 4 files changed, 93 insertions(+), 79 deletions(-)
 create mode 100644 apps/webapp/app/components/primitives/charts/Card.tsx
 delete mode 100644 apps/webapp/app/components/primitives/charts/ChartCard.tsx

diff --git a/apps/webapp/app/components/primitives/charts/Card.tsx b/apps/webapp/app/components/primitives/charts/Card.tsx
new file mode 100644
index 0000000000..d105750590
--- /dev/null
+++ b/apps/webapp/app/components/primitives/charts/Card.tsx
@@ -0,0 +1,27 @@
+import { cn } from "~/utils/cn";
+import { type ReactNode } from "react";
+import { Header2 } from "../Headers";
+
+export const Card = ({ children, className }: { children: ReactNode; className?: string }) => {
+  return (
+    <div
+      className={cn(
+        "flex flex-col rounded-lg border border-grid-bright bg-background-bright p-4",
+        className
+      )}
+    >
+      {children}
+    </div>
+  );
+};
+
+const CardHeader = ({ children, className }: { children: ReactNode; className?: string }) => {
+  return <Header2 className={cn("flex flex-col space-y-1.5", className)}>{children}</Header2>;
+};
+
+const CardContent = ({ children, className }: { children: ReactNode; className?: string }) => {
+  return <div className={cn("pt-4", className)}>{children}</div>;
+};
+
+Card.Header = CardHeader;
+Card.Content = CardContent;
diff --git a/apps/webapp/app/components/primitives/charts/ChartCard.tsx b/apps/webapp/app/components/primitives/charts/ChartCard.tsx
deleted file mode 100644
index deff2a769b..0000000000
--- a/apps/webapp/app/components/primitives/charts/ChartCard.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { Header3 } from "../Headers";
-import { Paragraph } from "../Paragraph";
-
-export function ChartCard({
-  title,
-  description,
-  children,
-}: {
-  title: string;
-  description: string;
-  children: React.ReactNode;
-}) {
-  <div>
-    <div>
-      <Header3>{title}</Header3>
-      <Paragraph>{description}</Paragraph>
-    </div>
-    <div>{children}</div>
-    <div className="flex-col items-start gap-2 text-sm">
-      <div className="flex gap-2 font-medium leading-none">Trending up by 5.2% this month</div>
-      <div className="text-muted-foreground leading-none">
-        Showing total visitors for the last 6 months
-      </div>
-    </div>
-  </div>;
-}
diff --git a/apps/webapp/app/components/primitives/charts/Charts.tsx b/apps/webapp/app/components/primitives/charts/Charts.tsx
index 29de316b0e..5462cfaba8 100644
--- a/apps/webapp/app/components/primitives/charts/Charts.tsx
+++ b/apps/webapp/app/components/primitives/charts/Charts.tsx
@@ -1,4 +1,4 @@
-import { Bar, BarChart, CartesianGrid, XAxis, YAxis } from "recharts";
+import { Bar, BarChart, CartesianGrid, Line, XAxis, YAxis } from "recharts";
 
 import {
   type ChartConfig,
@@ -7,27 +7,27 @@ import {
   ChartTooltipContent,
 } from "~/components/primitives/charts/Chart";
 
-export function ChartBar({ config, data }: { config: ChartConfig; data: any[] }) {
+export function ChartBar({
+  config,
+  data,
+  dataKey,
+}: {
+  config: ChartConfig;
+  data: any[];
+  dataKey: string;
+}) {
   return (
-    <ChartContainer config={config} className="min-h-[200px] w-full">
+    <ChartContainer config={config} className="min-h-full w-full">
       <BarChart accessibilityLayer data={data}>
-        <CartesianGrid vertical={false} />
-        <XAxis
-          dataKey="month"
-          tickLine={false}
-          tickMargin={10}
-          axisLine={false}
-          // tickFormatter={(value) => value.slice(0, 3)}
+        <CartesianGrid vertical={false} stroke="#3B3E45" />
+        <XAxis dataKey={dataKey} tickLine={false} tickMargin={8} axisLine={false} />
+        <YAxis axisLine={false} tickLine={false} tickMargin={8} />
+        <ChartTooltip
+          cursor={false}
+          animationDuration={50}
+          content={<ChartTooltipContent hideLabel />}
         />
-        <YAxis
-          dataKey="desktop"
-          tickLine={false}
-          tickMargin={10}
-          axisLine={false}
-          tickFormatter={(value) => value.slice(0, 3)}
-        />
-        <ChartTooltip cursor={false} content={<ChartTooltipContent hideLabel />} />
-        <Bar dataKey="desktop" fill="var(--color-desktop)" radius={4} />
+        <Bar dataKey="value" fill="#6366F1" radius={4} />
       </BarChart>
     </ChartContainer>
   );
@@ -37,16 +37,16 @@ export function LineChart({ config, data }: { config: ChartConfig; data: any[] }
   return (
     <ChartContainer config={config} className="min-h-[200px] w-full">
       <BarChart accessibilityLayer data={data}>
-        <CartesianGrid vertical={false} />
+        <CartesianGrid horizontal={false} />
         <XAxis
-          dataKey="month"
+          dataKey="day"
           tickLine={false}
           tickMargin={10}
           axisLine={false}
           tickFormatter={(value) => value.slice(0, 3)}
         />
         <ChartTooltip cursor={false} content={<ChartTooltipContent hideLabel />} />
-        <Bar dataKey="desktop" fill="var(--color-desktop)" radius={4} />
+        <Line dataKey="value" stroke="#2563eb" />
       </BarChart>
     </ChartContainer>
   );
diff --git a/apps/webapp/app/routes/storybook.charts/route.tsx b/apps/webapp/app/routes/storybook.charts/route.tsx
index e90b2a2afb..198c202ce5 100644
--- a/apps/webapp/app/routes/storybook.charts/route.tsx
+++ b/apps/webapp/app/routes/storybook.charts/route.tsx
@@ -1,46 +1,59 @@
+import { Card } from "~/components/primitives/charts/Card";
 import { type ChartConfig } from "~/components/primitives/charts/Chart";
 import { ChartBar } from "~/components/primitives/charts/Charts";
 import { Header2 } from "~/components/primitives/Headers";
 
-const chartData = [
-  { month: "Nov_21", desktop: 186 },
-  { month: "Nov_22", desktop: 305 },
-  { month: "Nov_23", desktop: 237 },
-  { month: "Nov_24", desktop: 73 },
-  { month: "Nov_25", desktop: 209 },
-  { month: "Nov_26", desktop: 214 },
+const barChartData = [
+  { day: "Nov 21", value: 186 },
+  { day: "Nov 22", value: 305 },
+  { day: "Nov 23", value: 237 },
+  { day: "Nov 24", value: 73 },
+  { day: "Nov 25", value: 209 },
+  { day: "Nov 26", value: 214 },
+  { day: "Nov 27", value: 546 },
 ];
 
 const chartConfig = {
-  desktop: {
-    label: "Desktop",
-    color: "#2563eb",
-  },
-  mobile: {
-    label: "Mobile",
-    color: "#60a5fa",
+  value: {
+    label: "Value",
+    color: "#6366F1",
   },
 } satisfies ChartConfig;
 
 export default function Story() {
   return (
-    <div className="grid grid-cols-3">
-      <div className="flex flex-col items-start gap-y-4 p-4">
-        <Header2>Bar charts</Header2>
-        <ChartBar config={chartConfig} data={chartData} />
-      </div>
-      <div className="flex flex-col items-start gap-y-4 p-4">
-        <Header2>Line charts</Header2>
-        <ChartBar config={chartConfig} data={chartData} />
-      </div>
-      <div className="flex flex-col items-start gap-y-4 p-4">
-        <Header2>Big numbers</Header2>
-        <ChartBar config={chartConfig} data={chartData} />
-      </div>
-      <div className="flex flex-col items-start gap-y-4 p-4">
-        <Header2>Stepped charts</Header2>
-        <ChartBar config={chartConfig} data={chartData} />
-      </div>
+    <div className="grid grid-cols-3 gap-4 p-8">
+      <Card>
+        <Card.Header>Bar chart</Card.Header>
+        <Card.Content>
+          <ChartBar config={chartConfig} data={barChartData} dataKey="value" />
+        </Card.Content>
+      </Card>
+
+      <Card>
+        <Card.Header>Line chart</Card.Header>
+        <Card.Content>
+          <ChartBar config={chartConfig} data={barChartData} dataKey="value" />
+        </Card.Content>
+      </Card>
+      <Card>
+        <Card.Header>Big number</Card.Header>
+        <Card.Content>
+          <ChartBar config={chartConfig} data={barChartData} dataKey="value" />
+        </Card.Content>
+      </Card>
+      <Card>
+        <Card.Header>Stepped chart</Card.Header>
+        <Card.Content>
+          <ChartBar config={chartConfig} data={barChartData} dataKey="value" />
+        </Card.Content>
+      </Card>
+      <Card>
+        <Card.Header>Stacked chart</Card.Header>
+        <Card.Content>
+          <ChartBar config={chartConfig} data={barChartData} dataKey="value" />
+        </Card.Content>
+      </Card>
     </div>
   );
 }

From 7234e05125d79401939c7f5b35fe7dd3d9e7b8e1 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Fri, 11 Apr 2025 15:03:41 +0100
Subject: [PATCH 005/137] Adds big number chart

---
 .../app/components/primitives/charts/Card.tsx | 19 +++++---
 .../components/primitives/charts/Charts.tsx   | 46 ++++++++++++++++++-
 .../app/routes/storybook.charts/route.tsx     | 12 +++--
 3 files changed, 66 insertions(+), 11 deletions(-)

diff --git a/apps/webapp/app/components/primitives/charts/Card.tsx b/apps/webapp/app/components/primitives/charts/Card.tsx
index d105750590..5981162ae5 100644
--- a/apps/webapp/app/components/primitives/charts/Card.tsx
+++ b/apps/webapp/app/components/primitives/charts/Card.tsx
@@ -1,12 +1,12 @@
-import { cn } from "~/utils/cn";
 import { type ReactNode } from "react";
-import { Header2 } from "../Headers";
+import { cn } from "~/utils/cn";
+import { Header3 } from "../Headers";
 
 export const Card = ({ children, className }: { children: ReactNode; className?: string }) => {
   return (
     <div
       className={cn(
-        "flex flex-col rounded-lg border border-grid-bright bg-background-bright p-4",
+        "flex flex-col gap-4 rounded-lg border border-grid-bright bg-background-bright py-4 pl-5 pr-4",
         className
       )}
     >
@@ -15,13 +15,18 @@ export const Card = ({ children, className }: { children: ReactNode; className?:
   );
 };
 
-const CardHeader = ({ children, className }: { children: ReactNode; className?: string }) => {
-  return <Header2 className={cn("flex flex-col space-y-1.5", className)}>{children}</Header2>;
+const CardHeader = ({ children }: { children: ReactNode }) => {
+  return <Header3 className="flex items-center justify-between gap-2">{children}</Header3>;
+};
+
+const CardContent = ({ children }: { children: ReactNode }) => {
+  return <div>{children}</div>;
 };
 
-const CardContent = ({ children, className }: { children: ReactNode; className?: string }) => {
-  return <div className={cn("pt-4", className)}>{children}</div>;
+const CardAccessory = ({ children }: { children: ReactNode }) => {
+  return <div className="flex-shrink-0">{children}</div>;
 };
 
 Card.Header = CardHeader;
 Card.Content = CardContent;
+Card.Accessory = CardAccessory;
diff --git a/apps/webapp/app/components/primitives/charts/Charts.tsx b/apps/webapp/app/components/primitives/charts/Charts.tsx
index 5462cfaba8..e557182a9f 100644
--- a/apps/webapp/app/components/primitives/charts/Charts.tsx
+++ b/apps/webapp/app/components/primitives/charts/Charts.tsx
@@ -1,11 +1,14 @@
+import { type ReactNode } from "react";
 import { Bar, BarChart, CartesianGrid, Line, XAxis, YAxis } from "recharts";
-
 import {
   type ChartConfig,
   ChartContainer,
   ChartTooltip,
   ChartTooltipContent,
 } from "~/components/primitives/charts/Chart";
+import { Spinner } from "../Spinner";
+import { AnimatedNumber } from "../AnimatedNumber";
+import { cn } from "~/utils/cn";
 
 export function ChartBar({
   config,
@@ -51,3 +54,44 @@ export function LineChart({ config, data }: { config: ChartConfig; data: any[] }
     </ChartContainer>
   );
 }
+
+interface BigNumberProps {
+  animate?: boolean;
+  loading?: boolean;
+  value?: number;
+  valueClassName?: string;
+  defaultValue?: number;
+  suffix?: string;
+  suffixClassName?: string;
+}
+
+export function BigNumber({
+  value,
+  defaultValue,
+  valueClassName,
+  suffix,
+  suffixClassName,
+  animate = false,
+  loading = false,
+}: BigNumberProps) {
+  const v = value ?? defaultValue;
+  return (
+    <div
+      className={cn(
+        "h-[3.75rem] text-[3.75rem] font-normal tabular-nums leading-none text-text-bright",
+        valueClassName
+      )}
+    >
+      {loading ? (
+        <Spinner className="size-6" />
+      ) : v !== undefined ? (
+        <div className="flex items-baseline gap-1">
+          {animate ? <AnimatedNumber value={v} /> : v}
+          {suffix && <div className={cn("text-xs", suffixClassName)}>{suffix}</div>}
+        </div>
+      ) : (
+        "–"
+      )}
+    </div>
+  );
+}
diff --git a/apps/webapp/app/routes/storybook.charts/route.tsx b/apps/webapp/app/routes/storybook.charts/route.tsx
index 198c202ce5..28276e0136 100644
--- a/apps/webapp/app/routes/storybook.charts/route.tsx
+++ b/apps/webapp/app/routes/storybook.charts/route.tsx
@@ -1,6 +1,7 @@
+import { Button } from "~/components/primitives/Buttons";
 import { Card } from "~/components/primitives/charts/Card";
 import { type ChartConfig } from "~/components/primitives/charts/Chart";
-import { ChartBar } from "~/components/primitives/charts/Charts";
+import { BigNumber, ChartBar } from "~/components/primitives/charts/Charts";
 import { Header2 } from "~/components/primitives/Headers";
 
 const barChartData = [
@@ -37,9 +38,14 @@ export default function Story() {
         </Card.Content>
       </Card>
       <Card>
-        <Card.Header>Big number</Card.Header>
+        <Card.Header>
+          Big number
+          <Card.Accessory>
+            <Button variant="secondary/small">Example button</Button>
+          </Card.Accessory>
+        </Card.Header>
         <Card.Content>
-          <ChartBar config={chartConfig} data={barChartData} dataKey="value" />
+          <BigNumber value={101} suffix="USD" />
         </Card.Content>
       </Card>
       <Card>

From 561802e0d94884c99337831ab22969427c2a56e0 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Fri, 11 Apr 2025 15:43:02 +0100
Subject: [PATCH 006/137] Adds mock data for line chart

---
 .../app/routes/storybook.charts/route.tsx     | 66 ++++++++++++-------
 1 file changed, 43 insertions(+), 23 deletions(-)

diff --git a/apps/webapp/app/routes/storybook.charts/route.tsx b/apps/webapp/app/routes/storybook.charts/route.tsx
index 28276e0136..a0dee8493b 100644
--- a/apps/webapp/app/routes/storybook.charts/route.tsx
+++ b/apps/webapp/app/routes/storybook.charts/route.tsx
@@ -1,25 +1,7 @@
 import { Button } from "~/components/primitives/Buttons";
 import { Card } from "~/components/primitives/charts/Card";
 import { type ChartConfig } from "~/components/primitives/charts/Chart";
-import { BigNumber, ChartBar } from "~/components/primitives/charts/Charts";
-import { Header2 } from "~/components/primitives/Headers";
-
-const barChartData = [
-  { day: "Nov 21", value: 186 },
-  { day: "Nov 22", value: 305 },
-  { day: "Nov 23", value: 237 },
-  { day: "Nov 24", value: 73 },
-  { day: "Nov 25", value: 209 },
-  { day: "Nov 26", value: 214 },
-  { day: "Nov 27", value: 546 },
-];
-
-const chartConfig = {
-  value: {
-    label: "Value",
-    color: "#6366F1",
-  },
-} satisfies ChartConfig;
+import { BigNumber, ChartBar, ChartLine } from "~/components/primitives/charts/Charts";
 
 export default function Story() {
   return (
@@ -27,14 +9,14 @@ export default function Story() {
       <Card>
         <Card.Header>Bar chart</Card.Header>
         <Card.Content>
-          <ChartBar config={chartConfig} data={barChartData} dataKey="value" />
+          <ChartBar config={barChartConfig} data={barChartData} dataKey="value" />
         </Card.Content>
       </Card>
 
       <Card>
         <Card.Header>Line chart</Card.Header>
         <Card.Content>
-          <ChartBar config={chartConfig} data={barChartData} dataKey="value" />
+          <ChartLine config={lineChartConfig} data={lineChartData} dataKey="value" />
         </Card.Content>
       </Card>
       <Card>
@@ -51,15 +33,53 @@ export default function Story() {
       <Card>
         <Card.Header>Stepped chart</Card.Header>
         <Card.Content>
-          <ChartBar config={chartConfig} data={barChartData} dataKey="value" />
+          <ChartBar config={barChartConfig} data={barChartData} dataKey="value" />
         </Card.Content>
       </Card>
       <Card>
         <Card.Header>Stacked chart</Card.Header>
         <Card.Content>
-          <ChartBar config={chartConfig} data={barChartData} dataKey="value" />
+          <ChartBar config={barChartConfig} data={barChartData} dataKey="value" />
         </Card.Content>
       </Card>
     </div>
   );
 }
+
+const barChartConfig = {
+  value: {
+    label: "Value",
+    color: "#6366F1",
+  },
+} satisfies ChartConfig;
+
+const barChartData = [
+  { day: "Nov 21", value: 186 },
+  { day: "Nov 22", value: 305 },
+  { day: "Nov 23", value: 237 },
+  { day: "Nov 24", value: 73 },
+  { day: "Nov 25", value: 209 },
+  { day: "Nov 26", value: 214 },
+  { day: "Nov 27", value: 546 },
+];
+
+const lineChartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "#3B82F6",
+  },
+  mobile: {
+    label: "Mobile",
+    color: "#28BF5C",
+  },
+} satisfies ChartConfig;
+
+const lineChartData = [
+  { day: "Nov 21", desktop: 186, mobile: 80 },
+  { day: "Nov 22", desktop: 305, mobile: 200 },
+  { day: "Nov 23", desktop: 237, mobile: 120 },
+  { day: "Nov 24", desktop: 73, mobile: 190 },
+  { day: "Nov 25", desktop: 209, mobile: 130 },
+  { day: "Nov 26", desktop: 214, mobile: 140 },
+  { day: "Nov 27", desktop: 546, mobile: 150 },
+];

From 89006a751973c8e140b781219f1bccd3c0f80f5b Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Fri, 11 Apr 2025 15:43:20 +0100
Subject: [PATCH 007/137] Adds loading spinners

---
 .../components/primitives/charts/Charts.tsx   | 102 ++++++++++++------
 1 file changed, 72 insertions(+), 30 deletions(-)

diff --git a/apps/webapp/app/components/primitives/charts/Charts.tsx b/apps/webapp/app/components/primitives/charts/Charts.tsx
index e557182a9f..063c038945 100644
--- a/apps/webapp/app/components/primitives/charts/Charts.tsx
+++ b/apps/webapp/app/components/primitives/charts/Charts.tsx
@@ -1,56 +1,96 @@
-import { type ReactNode } from "react";
-import { Bar, BarChart, CartesianGrid, Line, XAxis, YAxis } from "recharts";
+import { Bar, BarChart, CartesianGrid, Line, LineChart, XAxis, YAxis } from "recharts";
 import {
   type ChartConfig,
   ChartContainer,
   ChartTooltip,
   ChartTooltipContent,
 } from "~/components/primitives/charts/Chart";
-import { Spinner } from "../Spinner";
-import { AnimatedNumber } from "../AnimatedNumber";
 import { cn } from "~/utils/cn";
+import { AnimatedNumber } from "../AnimatedNumber";
+import { Spinner } from "../Spinner";
 
 export function ChartBar({
   config,
   data,
   dataKey,
+  loading = false,
 }: {
   config: ChartConfig;
   data: any[];
   dataKey: string;
+  loading?: boolean;
 }) {
   return (
     <ChartContainer config={config} className="min-h-full w-full">
-      <BarChart accessibilityLayer data={data}>
-        <CartesianGrid vertical={false} stroke="#3B3E45" />
-        <XAxis dataKey={dataKey} tickLine={false} tickMargin={8} axisLine={false} />
-        <YAxis axisLine={false} tickLine={false} tickMargin={8} />
-        <ChartTooltip
-          cursor={false}
-          animationDuration={50}
-          content={<ChartTooltipContent hideLabel />}
-        />
-        <Bar dataKey="value" fill="#6366F1" radius={4} />
-      </BarChart>
+      {loading ? (
+        <div className="grid h-full place-items-center">
+          <Spinner className="size-6" />
+        </div>
+      ) : (
+        <BarChart accessibilityLayer data={data}>
+          <CartesianGrid vertical={false} stroke="#272A2E" />
+          <XAxis dataKey={dataKey} tickLine={false} tickMargin={8} axisLine={false} />
+          <YAxis axisLine={false} tickLine={false} tickMargin={8} />
+          <ChartTooltip cursor={false} content={<ChartTooltipContent hideLabel />} />
+          <Bar dataKey="value" fill="#6366F1" radius={4} />
+        </BarChart>
+      )}
     </ChartContainer>
   );
 }
 
-export function LineChart({ config, data }: { config: ChartConfig; data: any[] }) {
+export function ChartLine({
+  config,
+  data,
+  dataKey,
+  loading = false,
+}: {
+  config: ChartConfig;
+  data: any[];
+  dataKey: string;
+  loading?: boolean;
+}) {
   return (
     <ChartContainer config={config} className="min-h-[200px] w-full">
-      <BarChart accessibilityLayer data={data}>
-        <CartesianGrid horizontal={false} />
-        <XAxis
-          dataKey="day"
-          tickLine={false}
-          tickMargin={10}
-          axisLine={false}
-          tickFormatter={(value) => value.slice(0, 3)}
-        />
-        <ChartTooltip cursor={false} content={<ChartTooltipContent hideLabel />} />
-        <Line dataKey="value" stroke="#2563eb" />
-      </BarChart>
+      {loading ? (
+        <div className="grid h-full place-items-center">
+          <Spinner className="size-6" />
+        </div>
+      ) : (
+        <LineChart
+          accessibilityLayer
+          data={data}
+          margin={{
+            left: 12,
+            right: 12,
+          }}
+        >
+          <CartesianGrid vertical={false} stroke="#272A2E" />
+          <XAxis
+            dataKey={dataKey}
+            tickLine={false}
+            axisLine={false}
+            tickMargin={8}
+            tickFormatter={(value) => value.slice(0, 3)}
+          />
+          <YAxis axisLine={false} tickLine={false} tickMargin={8} />
+          <ChartTooltip cursor={false} content={<ChartTooltipContent />} />
+          <Line
+            dataKey="desktop"
+            type="monotone"
+            stroke="var(--color-desktop)"
+            strokeWidth={2}
+            dot={false}
+          />
+          <Line
+            dataKey="mobile"
+            type="monotone"
+            stroke="var(--color-mobile)"
+            strokeWidth={2}
+            dot={false}
+          />
+        </LineChart>
+      )}
     </ChartContainer>
   );
 }
@@ -78,12 +118,14 @@ export function BigNumber({
   return (
     <div
       className={cn(
-        "h-[3.75rem] text-[3.75rem] font-normal tabular-nums leading-none text-text-bright",
+        "h-full text-[3.75rem] font-normal tabular-nums leading-none text-text-bright",
         valueClassName
       )}
     >
       {loading ? (
-        <Spinner className="size-6" />
+        <div className="grid h-full place-items-center">
+          <Spinner className="size-6" />
+        </div>
       ) : v !== undefined ? (
         <div className="flex items-baseline gap-1">
           {animate ? <AnimatedNumber value={v} /> : v}

From 881c174b009abd982b9e3707dc09dfecd1f40f66 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Fri, 11 Apr 2025 15:43:40 +0100
Subject: [PATCH 008/137] Tooltip invalid style fixes

---
 apps/webapp/app/components/primitives/charts/Chart.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/webapp/app/components/primitives/charts/Chart.tsx b/apps/webapp/app/components/primitives/charts/Chart.tsx
index 43ce1de07c..e4405d35a1 100644
--- a/apps/webapp/app/components/primitives/charts/Chart.tsx
+++ b/apps/webapp/app/components/primitives/charts/Chart.tsx
@@ -158,7 +158,7 @@ const ChartTooltipContent = React.forwardRef<
       <div
         ref={ref}
         className={cn(
-          "border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl",
+          "grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-grid-bright bg-background-bright px-2.5 py-1.5 text-xs shadow-xl",
           className
         )}
       >

From b8c1bb5f3b0701322743a4b18640c05ca22d8773 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Fri, 11 Apr 2025 16:07:40 +0100
Subject: [PATCH 009/137] Adds stacked chart

---
 .../components/primitives/charts/Charts.tsx   | 47 +++++++++++++++++++
 .../app/routes/storybook.charts/route.tsx     | 47 ++++++++++++++++---
 2 files changed, 87 insertions(+), 7 deletions(-)

diff --git a/apps/webapp/app/components/primitives/charts/Charts.tsx b/apps/webapp/app/components/primitives/charts/Charts.tsx
index 063c038945..793eef17ed 100644
--- a/apps/webapp/app/components/primitives/charts/Charts.tsx
+++ b/apps/webapp/app/components/primitives/charts/Charts.tsx
@@ -2,6 +2,8 @@ import { Bar, BarChart, CartesianGrid, Line, LineChart, XAxis, YAxis } from "rec
 import {
   type ChartConfig,
   ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
   ChartTooltip,
   ChartTooltipContent,
 } from "~/components/primitives/charts/Chart";
@@ -95,6 +97,51 @@ export function ChartLine({
   );
 }
 
+//TODO: draw a separate line to indicate concurrency level
+
+export function ChartStacked({
+  config,
+  data,
+  dataKey,
+  loading = false,
+}: {
+  config: ChartConfig;
+  data: any[];
+  dataKey: string;
+  loading?: boolean;
+}) {
+  return (
+    <ChartContainer config={config} className="min-h-full w-full">
+      {loading ? (
+        <div className="grid h-full place-items-center">
+          <Spinner className="size-6" />
+        </div>
+      ) : (
+        <BarChart accessibilityLayer data={data}>
+          <CartesianGrid vertical={false} stroke="#272A2E" />
+          <XAxis dataKey={dataKey} tickLine={false} tickMargin={10} axisLine={false} />
+          <YAxis axisLine={false} tickLine={false} tickMargin={8} />
+          <ChartTooltip content={<ChartTooltipContent hideLabel />} />
+          <Bar
+            dataKey="completed"
+            stackId="a"
+            fill="var(--color-completed)"
+            radius={[0, 0, 4, 4]}
+          />
+          <Bar
+            dataKey="in-progress"
+            stackId="a"
+            fill="var(--color-in-progress)"
+            radius={[0, 0, 0, 0]}
+          />
+          <Bar dataKey="canceled" stackId="a" fill="var(--color-canceled)" radius={[0, 0, 0, 0]} />
+          <Bar dataKey="failed" stackId="a" fill="var(--color-failed)" radius={[4, 4, 0, 0]} />
+        </BarChart>
+      )}
+    </ChartContainer>
+  );
+}
+
 interface BigNumberProps {
   animate?: boolean;
   loading?: boolean;
diff --git a/apps/webapp/app/routes/storybook.charts/route.tsx b/apps/webapp/app/routes/storybook.charts/route.tsx
index a0dee8493b..3fd56bb358 100644
--- a/apps/webapp/app/routes/storybook.charts/route.tsx
+++ b/apps/webapp/app/routes/storybook.charts/route.tsx
@@ -1,27 +1,32 @@
 import { Button } from "~/components/primitives/Buttons";
 import { Card } from "~/components/primitives/charts/Card";
 import { type ChartConfig } from "~/components/primitives/charts/Chart";
-import { BigNumber, ChartBar, ChartLine } from "~/components/primitives/charts/Charts";
+import {
+  BigNumber,
+  ChartBar,
+  ChartLine,
+  ChartStacked,
+} from "~/components/primitives/charts/Charts";
 
 export default function Story() {
   return (
     <div className="grid grid-cols-3 gap-4 p-8">
       <Card>
-        <Card.Header>Bar chart</Card.Header>
+        <Card.Header>ChartBar</Card.Header>
         <Card.Content>
           <ChartBar config={barChartConfig} data={barChartData} dataKey="value" />
         </Card.Content>
       </Card>
 
       <Card>
-        <Card.Header>Line chart</Card.Header>
+        <Card.Header>ChartLine</Card.Header>
         <Card.Content>
           <ChartLine config={lineChartConfig} data={lineChartData} dataKey="value" />
         </Card.Content>
       </Card>
       <Card>
         <Card.Header>
-          Big number
+          BigNumber
           <Card.Accessory>
             <Button variant="secondary/small">Example button</Button>
           </Card.Accessory>
@@ -31,15 +36,15 @@ export default function Story() {
         </Card.Content>
       </Card>
       <Card>
-        <Card.Header>Stepped chart</Card.Header>
+        <Card.Header>ChartStepped</Card.Header>
         <Card.Content>
           <ChartBar config={barChartConfig} data={barChartData} dataKey="value" />
         </Card.Content>
       </Card>
       <Card>
-        <Card.Header>Stacked chart</Card.Header>
+        <Card.Header>ChartStacked</Card.Header>
         <Card.Content>
-          <ChartBar config={barChartConfig} data={barChartData} dataKey="value" />
+          <ChartStacked config={stackedChartConfig} data={stackedChartData} dataKey="value" />
         </Card.Content>
       </Card>
     </div>
@@ -83,3 +88,31 @@ const lineChartData = [
   { day: "Nov 26", desktop: 214, mobile: 140 },
   { day: "Nov 27", desktop: 546, mobile: 150 },
 ];
+
+const stackedChartData = [
+  { month: "Nov 21", "in-progress": 8432, canceled: 0, completed: 10456, failed: 2341 },
+  { month: "Nov 22", "in-progress": 156, canceled: 4521, completed: 0, failed: 7890 },
+  { month: "Nov 23", "in-progress": 9876, canceled: 120, completed: 0, failed: 5432 },
+  { month: "Nov 24", "in-progress": 8765, canceled: 0, completed: 3421, failed: 6543 },
+  { month: "Nov 25", "in-progress": 7123, canceled: 0, completed: 9876, failed: 2109 },
+  { month: "Nov 26", "in-progress": 4567, canceled: 6789, completed: 0, failed: 8901 },
+  { month: "Nov 27", "in-progress": 3210, canceled: 9012, completed: 0, failed: 6789 },
+];
+const stackedChartConfig = {
+  "in-progress": {
+    label: "In Progress",
+    color: "#3B82F6",
+  },
+  canceled: {
+    label: "Canceled",
+    color: "#878C99",
+  },
+  completed: {
+    label: "Completed",
+    color: "#28BF5C",
+  },
+  failed: {
+    label: "Failed",
+    color: "#E11D48",
+  },
+} satisfies ChartConfig;

From 337912a4ca7b91504d687cb4727b69c865e61387 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Mon, 14 Apr 2025 14:08:19 +0100
Subject: [PATCH 010/137] Typo


From a62bf90c54c65cbd4fa70cffe4d071b09de71b58 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Mon, 14 Apr 2025 16:59:27 +0100
Subject: [PATCH 011/137] Adding more chart types

---
 .../components/primitives/charts/Charts.tsx   | 106 ++++++++++++++----
 .../app/routes/storybook.charts/route.tsx     |  45 ++++----
 2 files changed, 107 insertions(+), 44 deletions(-)

diff --git a/apps/webapp/app/components/primitives/charts/Charts.tsx b/apps/webapp/app/components/primitives/charts/Charts.tsx
index 793eef17ed..e108bd0a62 100644
--- a/apps/webapp/app/components/primitives/charts/Charts.tsx
+++ b/apps/webapp/app/components/primitives/charts/Charts.tsx
@@ -25,15 +25,17 @@ export function ChartBar({
   return (
     <ChartContainer config={config} className="min-h-full w-full">
       {loading ? (
-        <div className="grid h-full place-items-center">
-          <Spinner className="size-6" />
-        </div>
+        <ChartLoading />
       ) : (
-        <BarChart accessibilityLayer data={data}>
+        <BarChart accessibilityLayer data={data} barCategoryGap={2}>
           <CartesianGrid vertical={false} stroke="#272A2E" />
           <XAxis dataKey={dataKey} tickLine={false} tickMargin={8} axisLine={false} />
           <YAxis axisLine={false} tickLine={false} tickMargin={8} />
-          <ChartTooltip cursor={false} content={<ChartTooltipContent hideLabel />} />
+          <ChartTooltip
+            cursor={false}
+            animationDuration={200}
+            content={<ChartTooltipContent hideLabel />}
+          />
           <Bar dataKey="value" fill="#6366F1" radius={4} />
         </BarChart>
       )}
@@ -55,9 +57,7 @@ export function ChartLine({
   return (
     <ChartContainer config={config} className="min-h-[200px] w-full">
       {loading ? (
-        <div className="grid h-full place-items-center">
-          <Spinner className="size-6" />
-        </div>
+        <ChartLoading />
       ) : (
         <LineChart
           accessibilityLayer
@@ -68,25 +68,67 @@ export function ChartLine({
           }}
         >
           <CartesianGrid vertical={false} stroke="#272A2E" />
-          <XAxis
-            dataKey={dataKey}
-            tickLine={false}
-            axisLine={false}
-            tickMargin={8}
-            tickFormatter={(value) => value.slice(0, 3)}
+          <XAxis dataKey={dataKey} tickLine={false} axisLine={false} tickMargin={8} />
+          <YAxis axisLine={false} tickLine={false} tickMargin={8} />
+          <ChartTooltip cursor={false} content={<ChartTooltipContent />} />
+          <Line
+            dataKey="desktop"
+            type="linear"
+            stroke="var(--color-desktop)"
+            strokeWidth={2}
+            dot={false}
+          />
+          <Line
+            dataKey="mobile"
+            type="linear"
+            stroke="var(--color-mobile)"
+            strokeWidth={2}
+            dot={false}
           />
+        </LineChart>
+      )}
+    </ChartContainer>
+  );
+}
+
+export function ChartStepped({
+  config,
+  data,
+  dataKey,
+  loading = false,
+}: {
+  config: ChartConfig;
+  data: any[];
+  dataKey: string;
+  loading?: boolean;
+}) {
+  return (
+    <ChartContainer config={config} className="min-h-[200px] w-full">
+      {loading ? (
+        <ChartLoading />
+      ) : (
+        <LineChart
+          accessibilityLayer
+          data={data}
+          margin={{
+            left: 12,
+            right: 12,
+          }}
+        >
+          <CartesianGrid vertical={false} stroke="#272A2E" />
+          <XAxis dataKey={dataKey} tickLine={false} axisLine={false} tickMargin={8} />
           <YAxis axisLine={false} tickLine={false} tickMargin={8} />
           <ChartTooltip cursor={false} content={<ChartTooltipContent />} />
           <Line
             dataKey="desktop"
-            type="monotone"
+            type="step"
             stroke="var(--color-desktop)"
             strokeWidth={2}
             dot={false}
           />
           <Line
             dataKey="mobile"
-            type="monotone"
+            type="step"
             stroke="var(--color-mobile)"
             strokeWidth={2}
             dot={false}
@@ -113,11 +155,9 @@ export function ChartStacked({
   return (
     <ChartContainer config={config} className="min-h-full w-full">
       {loading ? (
-        <div className="grid h-full place-items-center">
-          <Spinner className="size-6" />
-        </div>
+        <ChartLoading />
       ) : (
-        <BarChart accessibilityLayer data={data}>
+        <BarChart accessibilityLayer data={data} barCategoryGap={2}>
           <CartesianGrid vertical={false} stroke="#272A2E" />
           <XAxis dataKey={dataKey} tickLine={false} tickMargin={10} axisLine={false} />
           <YAxis axisLine={false} tickLine={false} tickMargin={8} />
@@ -127,15 +167,29 @@ export function ChartStacked({
             stackId="a"
             fill="var(--color-completed)"
             radius={[0, 0, 4, 4]}
+            activeBar={false}
           />
           <Bar
             dataKey="in-progress"
             stackId="a"
             fill="var(--color-in-progress)"
             radius={[0, 0, 0, 0]}
+            activeBar={false}
+          />
+          <Bar
+            dataKey="canceled"
+            stackId="a"
+            fill="var(--color-canceled)"
+            radius={[0, 0, 0, 0]}
+            activeBar={false}
+          />
+          <Bar
+            dataKey="failed"
+            stackId="a"
+            fill="var(--color-failed)"
+            radius={[4, 4, 0, 0]}
+            activeBar={false}
           />
-          <Bar dataKey="canceled" stackId="a" fill="var(--color-canceled)" radius={[0, 0, 0, 0]} />
-          <Bar dataKey="failed" stackId="a" fill="var(--color-failed)" radius={[4, 4, 0, 0]} />
         </BarChart>
       )}
     </ChartContainer>
@@ -184,3 +238,11 @@ export function BigNumber({
     </div>
   );
 }
+
+function ChartLoading() {
+  return (
+    <div className="grid h-full place-items-center">
+      <Spinner className="size-6" />
+    </div>
+  );
+}
diff --git a/apps/webapp/app/routes/storybook.charts/route.tsx b/apps/webapp/app/routes/storybook.charts/route.tsx
index 3fd56bb358..0cd2b7edb3 100644
--- a/apps/webapp/app/routes/storybook.charts/route.tsx
+++ b/apps/webapp/app/routes/storybook.charts/route.tsx
@@ -6,45 +6,46 @@ import {
   ChartBar,
   ChartLine,
   ChartStacked,
+  ChartStepped,
 } from "~/components/primitives/charts/Charts";
 
 export default function Story() {
   return (
-    <div className="grid grid-cols-3 gap-4 p-8">
+    <div className="grid grid-cols-2 gap-4 p-8">
       <Card>
-        <Card.Header>ChartBar</Card.Header>
+        <Card.Header>ChartStacked</Card.Header>
         <Card.Content>
-          <ChartBar config={barChartConfig} data={barChartData} dataKey="value" />
+          <ChartStacked config={stackedChartConfig} data={stackedChartData} dataKey="day" />
         </Card.Content>
       </Card>
 
       <Card>
         <Card.Header>ChartLine</Card.Header>
         <Card.Content>
-          <ChartLine config={lineChartConfig} data={lineChartData} dataKey="value" />
+          <ChartLine config={lineChartConfig} data={lineChartData} dataKey="day" />
         </Card.Content>
       </Card>
       <Card>
-        <Card.Header>
-          BigNumber
-          <Card.Accessory>
-            <Button variant="secondary/small">Example button</Button>
-          </Card.Accessory>
-        </Card.Header>
+        <Card.Header>ChartBar</Card.Header>
         <Card.Content>
-          <BigNumber value={101} suffix="USD" />
+          <ChartBar config={barChartConfig} data={barChartData} dataKey="day" />
         </Card.Content>
       </Card>
       <Card>
         <Card.Header>ChartStepped</Card.Header>
         <Card.Content>
-          <ChartBar config={barChartConfig} data={barChartData} dataKey="value" />
+          <ChartStepped config={lineChartConfig} data={lineChartData} dataKey="day" />
         </Card.Content>
       </Card>
       <Card>
-        <Card.Header>ChartStacked</Card.Header>
+        <Card.Header>
+          BigNumber
+          <Card.Accessory>
+            <Button variant="secondary/small">Example button</Button>
+          </Card.Accessory>
+        </Card.Header>
         <Card.Content>
-          <ChartStacked config={stackedChartConfig} data={stackedChartData} dataKey="value" />
+          <BigNumber value={101} suffix="USD" />
         </Card.Content>
       </Card>
     </div>
@@ -53,7 +54,7 @@ export default function Story() {
 
 const barChartConfig = {
   value: {
-    label: "Value",
+    label: "Runs",
     color: "#6366F1",
   },
 } satisfies ChartConfig;
@@ -90,13 +91,13 @@ const lineChartData = [
 ];
 
 const stackedChartData = [
-  { month: "Nov 21", "in-progress": 8432, canceled: 0, completed: 10456, failed: 2341 },
-  { month: "Nov 22", "in-progress": 156, canceled: 4521, completed: 0, failed: 7890 },
-  { month: "Nov 23", "in-progress": 9876, canceled: 120, completed: 0, failed: 5432 },
-  { month: "Nov 24", "in-progress": 8765, canceled: 0, completed: 3421, failed: 6543 },
-  { month: "Nov 25", "in-progress": 7123, canceled: 0, completed: 9876, failed: 2109 },
-  { month: "Nov 26", "in-progress": 4567, canceled: 6789, completed: 0, failed: 8901 },
-  { month: "Nov 27", "in-progress": 3210, canceled: 9012, completed: 0, failed: 6789 },
+  { day: "Nov 21", "in-progress": 8432, canceled: 0, completed: 10456, failed: 2341 },
+  { day: "Nov 22", "in-progress": 156, canceled: 4521, completed: 0, failed: 7890 },
+  { day: "Nov 23", "in-progress": 9876, canceled: 120, completed: 0, failed: 5432 },
+  { day: "Nov 24", "in-progress": 8765, canceled: 0, completed: 3421, failed: 6543 },
+  { day: "Nov 25", "in-progress": 7123, canceled: 0, completed: 9876, failed: 2109 },
+  { day: "Nov 26", "in-progress": 4567, canceled: 6789, completed: 0, failed: 8901 },
+  { day: "Nov 27", "in-progress": 3210, canceled: 9012, completed: 0, failed: 6789 },
 ];
 const stackedChartConfig = {
   "in-progress": {

From 921c151fc328518f060941b27443ae30feb6876d Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Mon, 14 Apr 2025 18:27:07 +0100
Subject: [PATCH 012/137] Adds a custom legend that displays the chart values

---
 .../components/primitives/charts/Chart.tsx    |  82 ++++++++
 .../components/primitives/charts/Charts.tsx   | 181 ++++++++++++------
 2 files changed, 206 insertions(+), 57 deletions(-)

diff --git a/apps/webapp/app/components/primitives/charts/Chart.tsx b/apps/webapp/app/components/primitives/charts/Chart.tsx
index e4405d35a1..dbfec6a227 100644
--- a/apps/webapp/app/components/primitives/charts/Chart.tsx
+++ b/apps/webapp/app/components/primitives/charts/Chart.tsx
@@ -9,6 +9,7 @@ export type ChartConfig = {
   [k in string]: {
     label?: React.ReactNode;
     icon?: React.ComponentType;
+    value?: number;
   } & (
     | { color?: string; theme?: never }
     | { color?: never; theme: Record<keyof typeof THEMES, string> }
@@ -290,6 +291,86 @@ const ChartLegendContent = React.forwardRef<
 });
 ChartLegendContent.displayName = "ChartLegend";
 
+const ChartLegendContentRows = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> &
+    Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
+      hideIcon?: boolean;
+      nameKey?: string;
+      onMouseEnter?: (e: any) => void;
+      onMouseLeave?: (e: any) => void;
+      data?: Record<string, number>;
+    }
+>(
+  (
+    {
+      className,
+      hideIcon = false,
+      payload,
+      verticalAlign = "bottom",
+      nameKey,
+      onMouseEnter,
+      onMouseLeave,
+      data,
+    },
+    ref
+  ) => {
+    const { config } = useChart();
+
+    if (!payload?.length) {
+      return null;
+    }
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "flex flex-col items-start justify-between",
+          verticalAlign === "top" ? "pb-4" : "pt-4",
+          className
+        )}
+      >
+        {payload.map((item) => {
+          const key = `${nameKey || item.dataKey || "value"}`;
+          const itemConfig = getPayloadConfigFromPayload(config, item, key);
+          const total = item.dataKey && data ? data[item.dataKey as string] : undefined;
+
+          return (
+            <div
+              key={key}
+              className="flex w-full items-center justify-between gap-2 rounded px-2 py-1 transition hover:bg-grid-dimmed"
+              onMouseEnter={() => onMouseEnter?.(item)}
+              onMouseLeave={() => onMouseLeave?.(item)}
+            >
+              <div
+                className={cn(
+                  "flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-text-dimmed"
+                )}
+              >
+                {itemConfig?.icon && !hideIcon ? (
+                  <itemConfig.icon />
+                ) : (
+                  <div
+                    className="h-3 w-1 shrink-0 rounded-[2px]"
+                    style={{
+                      backgroundColor: item.color,
+                    }}
+                  />
+                )}
+                {itemConfig?.label}
+              </div>
+              {total !== undefined && (
+                <span className="tabular-nums text-text-dimmed">{total.toLocaleString()}</span>
+              )}
+            </div>
+          );
+        })}
+      </div>
+    );
+  }
+);
+ChartLegendContentRows.displayName = "ChartLegendRows";
+
 // Helper to extract item config from a payload.
 function getPayloadConfigFromPayload(config: ChartConfig, payload: unknown, key: string) {
   if (typeof payload !== "object" || payload === null) {
@@ -322,5 +403,6 @@ export {
   ChartTooltipContent,
   ChartLegend,
   ChartLegendContent,
+  ChartLegendContentRows,
   ChartStyle,
 };
diff --git a/apps/webapp/app/components/primitives/charts/Charts.tsx b/apps/webapp/app/components/primitives/charts/Charts.tsx
index e108bd0a62..7ffa248dfb 100644
--- a/apps/webapp/app/components/primitives/charts/Charts.tsx
+++ b/apps/webapp/app/components/primitives/charts/Charts.tsx
@@ -1,15 +1,137 @@
-import { Bar, BarChart, CartesianGrid, Line, LineChart, XAxis, YAxis } from "recharts";
+import { Bar, BarChart, CartesianGrid, Line, LineChart, Legend, XAxis, YAxis } from "recharts";
 import {
   type ChartConfig,
   ChartContainer,
   ChartLegend,
-  ChartLegendContent,
+  ChartLegendContentRows,
   ChartTooltip,
   ChartTooltipContent,
 } from "~/components/primitives/charts/Chart";
 import { cn } from "~/utils/cn";
 import { AnimatedNumber } from "../AnimatedNumber";
 import { Spinner } from "../Spinner";
+import React from "react";
+
+export function ChartStacked({
+  config,
+  data,
+  dataKey,
+  loading = false,
+}: {
+  config: ChartConfig;
+  data: any[];
+  dataKey: string;
+  loading?: boolean;
+}) {
+  const [opacity, setOpacity] = React.useState({
+    completed: 1,
+    "in-progress": 1,
+    canceled: 1,
+    failed: 1,
+  });
+
+  // Calculate totals for each category
+  const totals = React.useMemo(() => {
+    return data.reduce((acc, item) => {
+      Object.entries(item).forEach(([key, value]) => {
+        if (key !== dataKey) {
+          acc[key] = (acc[key] || 0) + (value as number);
+        }
+      });
+      return acc;
+    }, {} as Record<string, number>);
+  }, [data, dataKey]);
+
+  const handleMouseEnter = (e: any) => {
+    const key = e.dataKey;
+    setOpacity((op) => ({
+      ...op,
+      completed: key === "completed" ? 1 : 0.3,
+      "in-progress": key === "in-progress" ? 1 : 0.3,
+      canceled: key === "canceled" ? 1 : 0.3,
+      failed: key === "failed" ? 1 : 0.3,
+    }));
+  };
+
+  const handleMouseLeave = () => {
+    setOpacity({
+      completed: 1,
+      "in-progress": 1,
+      canceled: 1,
+      failed: 1,
+    });
+  };
+
+  const style = {
+    "--opacity-completed": opacity.completed,
+    "--opacity-in-progress": opacity["in-progress"],
+    "--opacity-canceled": opacity.canceled,
+    "--opacity-failed": opacity.failed,
+  } as React.CSSProperties;
+
+  return (
+    <ChartContainer
+      config={config}
+      className="min-h-full w-full [--transition-duration:300ms]"
+      style={style}
+    >
+      {loading ? (
+        <ChartLoading />
+      ) : (
+        <BarChart accessibilityLayer data={data} barCategoryGap={2}>
+          <CartesianGrid vertical={false} stroke="#272A2E" />
+          <XAxis dataKey={dataKey} tickLine={false} tickMargin={10} axisLine={false} />
+          <YAxis axisLine={false} tickLine={false} tickMargin={8} />
+          <Bar
+            dataKey="completed"
+            stackId="a"
+            fill="var(--color-completed)"
+            radius={[0, 0, 4, 4]}
+            activeBar={false}
+            style={{ transition: "fill-opacity var(--transition-duration)" }}
+            fillOpacity={opacity.completed}
+          />
+          <Bar
+            dataKey="in-progress"
+            stackId="a"
+            fill="var(--color-in-progress)"
+            radius={[0, 0, 0, 0]}
+            activeBar={false}
+            style={{ transition: "fill-opacity var(--transition-duration)" }}
+            fillOpacity={opacity["in-progress"]}
+          />
+          <Bar
+            dataKey="canceled"
+            stackId="a"
+            fill="var(--color-canceled)"
+            radius={[0, 0, 0, 0]}
+            activeBar={false}
+            style={{ transition: "fill-opacity var(--transition-duration)" }}
+            fillOpacity={opacity.canceled}
+          />
+          <Bar
+            dataKey="failed"
+            stackId="a"
+            fill="var(--color-failed)"
+            radius={[4, 4, 0, 0]}
+            activeBar={false}
+            style={{ transition: "fill-opacity var(--transition-duration)" }}
+            fillOpacity={opacity.failed}
+          />
+          <ChartLegend
+            content={
+              <ChartLegendContentRows
+                onMouseEnter={handleMouseEnter}
+                onMouseLeave={handleMouseLeave}
+                data={totals}
+              />
+            }
+          />
+        </BarChart>
+      )}
+    </ChartContainer>
+  );
+}
 
 export function ChartBar({
   config,
@@ -141,61 +263,6 @@ export function ChartStepped({
 
 //TODO: draw a separate line to indicate concurrency level
 
-export function ChartStacked({
-  config,
-  data,
-  dataKey,
-  loading = false,
-}: {
-  config: ChartConfig;
-  data: any[];
-  dataKey: string;
-  loading?: boolean;
-}) {
-  return (
-    <ChartContainer config={config} className="min-h-full w-full">
-      {loading ? (
-        <ChartLoading />
-      ) : (
-        <BarChart accessibilityLayer data={data} barCategoryGap={2}>
-          <CartesianGrid vertical={false} stroke="#272A2E" />
-          <XAxis dataKey={dataKey} tickLine={false} tickMargin={10} axisLine={false} />
-          <YAxis axisLine={false} tickLine={false} tickMargin={8} />
-          <ChartTooltip content={<ChartTooltipContent hideLabel />} />
-          <Bar
-            dataKey="completed"
-            stackId="a"
-            fill="var(--color-completed)"
-            radius={[0, 0, 4, 4]}
-            activeBar={false}
-          />
-          <Bar
-            dataKey="in-progress"
-            stackId="a"
-            fill="var(--color-in-progress)"
-            radius={[0, 0, 0, 0]}
-            activeBar={false}
-          />
-          <Bar
-            dataKey="canceled"
-            stackId="a"
-            fill="var(--color-canceled)"
-            radius={[0, 0, 0, 0]}
-            activeBar={false}
-          />
-          <Bar
-            dataKey="failed"
-            stackId="a"
-            fill="var(--color-failed)"
-            radius={[4, 4, 0, 0]}
-            activeBar={false}
-          />
-        </BarChart>
-      )}
-    </ChartContainer>
-  );
-}
-
 interface BigNumberProps {
   animate?: boolean;
   loading?: boolean;

From f4662701b23faa2cbaa9945d47ff16fd59a44700 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Tue, 15 Apr 2025 10:32:27 +0100
Subject: [PATCH 013/137] Adds a tooltip to display x axis data

---
 .../components/primitives/charts/Charts.tsx   | 46 ++++++++++++++++---
 .../app/routes/storybook.charts/route.tsx     | 39 ++++++++++++----
 2 files changed, 69 insertions(+), 16 deletions(-)

diff --git a/apps/webapp/app/components/primitives/charts/Charts.tsx b/apps/webapp/app/components/primitives/charts/Charts.tsx
index 7ffa248dfb..99031ea88e 100644
--- a/apps/webapp/app/components/primitives/charts/Charts.tsx
+++ b/apps/webapp/app/components/primitives/charts/Charts.tsx
@@ -30,6 +30,8 @@ export function ChartStacked({
     failed: 1,
   });
 
+  const dimmedOpacity = 0.2;
+
   // Calculate totals for each category
   const totals = React.useMemo(() => {
     return data.reduce((acc, item) => {
@@ -46,10 +48,10 @@ export function ChartStacked({
     const key = e.dataKey;
     setOpacity((op) => ({
       ...op,
-      completed: key === "completed" ? 1 : 0.3,
-      "in-progress": key === "in-progress" ? 1 : 0.3,
-      canceled: key === "canceled" ? 1 : 0.3,
-      failed: key === "failed" ? 1 : 0.3,
+      completed: key === "completed" ? 1 : dimmedOpacity,
+      "in-progress": key === "in-progress" ? 1 : dimmedOpacity,
+      canceled: key === "canceled" ? 1 : dimmedOpacity,
+      failed: key === "failed" ? 1 : dimmedOpacity,
     }));
   };
 
@@ -80,8 +82,23 @@ export function ChartStacked({
       ) : (
         <BarChart accessibilityLayer data={data} barCategoryGap={2}>
           <CartesianGrid vertical={false} stroke="#272A2E" />
-          <XAxis dataKey={dataKey} tickLine={false} tickMargin={10} axisLine={false} />
-          <YAxis axisLine={false} tickLine={false} tickMargin={8} />
+          <XAxis
+            dataKey={dataKey}
+            tickLine={false}
+            tickMargin={10}
+            axisLine={false}
+            ticks={[data[0]?.[dataKey], data[data.length - 1]?.[dataKey]]}
+            tick={{ fill: "#878C99" }}
+          />
+          <YAxis axisLine={false} tickLine={false} tickMargin={8} tick={{ fill: "#878C99" }} />
+          <ChartTooltip
+            cursor={{ fill: "#212327" }}
+            content={<XAxisTooltip />}
+            position={{ y: undefined }}
+            coordinate={{ y: undefined }}
+            offset={16}
+            allowEscapeViewBox={{ x: false, y: true }}
+          />
           <Bar
             dataKey="completed"
             stackId="a"
@@ -313,3 +330,20 @@ function ChartLoading() {
     </div>
   );
 }
+
+const XAxisTooltip = ({ active, payload, label, viewBox, coordinate }: any) => {
+  if (!active || !payload?.length) return null;
+
+  return (
+    <div
+      className="absolute whitespace-nowrap rounded border border-grid-bright bg-background-dimmed px-2 py-1 text-xs tabular-nums text-text-dimmed"
+      style={{
+        left: coordinate?.x,
+        top: viewBox?.height + 12,
+        transform: "translateX(-50%)",
+      }}
+    >
+      {label}
+    </div>
+  );
+};
diff --git a/apps/webapp/app/routes/storybook.charts/route.tsx b/apps/webapp/app/routes/storybook.charts/route.tsx
index 0cd2b7edb3..99b65797d6 100644
--- a/apps/webapp/app/routes/storybook.charts/route.tsx
+++ b/apps/webapp/app/routes/storybook.charts/route.tsx
@@ -11,7 +11,7 @@ import {
 
 export default function Story() {
   return (
-    <div className="grid grid-cols-2 gap-4 p-8">
+    <div className="grid grid-cols-2 gap-4 p-3">
       <Card>
         <Card.Header>ChartStacked</Card.Header>
         <Card.Content>
@@ -90,15 +90,34 @@ const lineChartData = [
   { day: "Nov 27", desktop: 546, mobile: 150 },
 ];
 
-const stackedChartData = [
-  { day: "Nov 21", "in-progress": 8432, canceled: 0, completed: 10456, failed: 2341 },
-  { day: "Nov 22", "in-progress": 156, canceled: 4521, completed: 0, failed: 7890 },
-  { day: "Nov 23", "in-progress": 9876, canceled: 120, completed: 0, failed: 5432 },
-  { day: "Nov 24", "in-progress": 8765, canceled: 0, completed: 3421, failed: 6543 },
-  { day: "Nov 25", "in-progress": 7123, canceled: 0, completed: 9876, failed: 2109 },
-  { day: "Nov 26", "in-progress": 4567, canceled: 6789, completed: 0, failed: 8901 },
-  { day: "Nov 27", "in-progress": 3210, canceled: 9012, completed: 0, failed: 6789 },
-];
+function generateRandomStackedData(numDays: number) {
+  const data = [];
+  const startDate = new Date(2023, 10, 21); // Nov 21, 2023
+
+  for (let i = 0; i < numDays; i++) {
+    const currentDate = new Date(startDate);
+    currentDate.setDate(startDate.getDate() + i);
+    const day = currentDate.toLocaleDateString("en-US", { month: "short", day: "numeric" });
+
+    // Generate random values with similar ranges to the original data
+    const inProgress = Math.floor(Math.random() * 8000) + 1000;
+    const canceled = Math.random() < 0.5 ? 0 : Math.floor(Math.random() * 9000) + 100;
+    const completed = Math.random() < 0.5 ? 0 : Math.floor(Math.random() * 10000) + 500;
+    const failed = Math.floor(Math.random() * 6000) + 2000;
+
+    data.push({
+      day,
+      "in-progress": inProgress,
+      canceled,
+      completed,
+      failed,
+    });
+  }
+
+  return data;
+}
+
+const stackedChartData = generateRandomStackedData(70);
 const stackedChartConfig = {
   "in-progress": {
     label: "In Progress",

From 81ede63e5f9a80d5eaca7b7d446d7982e7d9450e Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Tue, 15 Apr 2025 10:41:30 +0100
Subject: [PATCH 014/137] Moves some hard coded data out of the chart component

---
 .../components/primitives/charts/Charts.tsx   | 107 ++++++++----------
 .../app/routes/storybook.charts/route.tsx     |  41 +++----
 2 files changed, 69 insertions(+), 79 deletions(-)

diff --git a/apps/webapp/app/components/primitives/charts/Charts.tsx b/apps/webapp/app/components/primitives/charts/Charts.tsx
index 99031ea88e..c7bc3b8680 100644
--- a/apps/webapp/app/components/primitives/charts/Charts.tsx
+++ b/apps/webapp/app/components/primitives/charts/Charts.tsx
@@ -23,12 +23,7 @@ export function ChartStacked({
   dataKey: string;
   loading?: boolean;
 }) {
-  const [opacity, setOpacity] = React.useState({
-    completed: 1,
-    "in-progress": 1,
-    canceled: 1,
-    failed: 1,
-  });
+  const [opacity, setOpacity] = React.useState<Record<string, number>>({});
 
   const dimmedOpacity = 0.2;
 
@@ -44,33 +39,46 @@ export function ChartStacked({
     }, {} as Record<string, number>);
   }, [data, dataKey]);
 
+  // Initialize opacity state with all keys from config
+  React.useEffect(() => {
+    const initialOpacity = Object.keys(config).reduce((acc, key) => {
+      if (key !== dataKey) {
+        acc[key] = 1;
+      }
+      return acc;
+    }, {} as Record<string, number>);
+    setOpacity(initialOpacity);
+  }, [config, dataKey]);
+
   const handleMouseEnter = (e: any) => {
     const key = e.dataKey;
-    setOpacity((op) => ({
-      ...op,
-      completed: key === "completed" ? 1 : dimmedOpacity,
-      "in-progress": key === "in-progress" ? 1 : dimmedOpacity,
-      canceled: key === "canceled" ? 1 : dimmedOpacity,
-      failed: key === "failed" ? 1 : dimmedOpacity,
-    }));
+    setOpacity((op) =>
+      Object.keys(op).reduce((acc, k) => {
+        acc[k] = k === key ? 1 : dimmedOpacity;
+        return acc;
+      }, {} as Record<string, number>)
+    );
   };
 
   const handleMouseLeave = () => {
-    setOpacity({
-      completed: 1,
-      "in-progress": 1,
-      canceled: 1,
-      failed: 1,
-    });
+    setOpacity((op) =>
+      Object.keys(op).reduce((acc, k) => {
+        acc[k] = 1;
+        return acc;
+      }, {} as Record<string, number>)
+    );
   };
 
   const style = {
-    "--opacity-completed": opacity.completed,
-    "--opacity-in-progress": opacity["in-progress"],
-    "--opacity-canceled": opacity.canceled,
-    "--opacity-failed": opacity.failed,
+    ...Object.entries(opacity).reduce((acc, [key, value]) => {
+      acc[`--opacity-${key}`] = value;
+      return acc;
+    }, {} as Record<string, string | number>),
   } as React.CSSProperties;
 
+  // Get all data keys except the x-axis key
+  const dataKeys = Object.keys(config).filter((k) => k !== dataKey);
+
   return (
     <ChartContainer
       config={config}
@@ -99,42 +107,23 @@ export function ChartStacked({
             offset={16}
             allowEscapeViewBox={{ x: false, y: true }}
           />
-          <Bar
-            dataKey="completed"
-            stackId="a"
-            fill="var(--color-completed)"
-            radius={[0, 0, 4, 4]}
-            activeBar={false}
-            style={{ transition: "fill-opacity var(--transition-duration)" }}
-            fillOpacity={opacity.completed}
-          />
-          <Bar
-            dataKey="in-progress"
-            stackId="a"
-            fill="var(--color-in-progress)"
-            radius={[0, 0, 0, 0]}
-            activeBar={false}
-            style={{ transition: "fill-opacity var(--transition-duration)" }}
-            fillOpacity={opacity["in-progress"]}
-          />
-          <Bar
-            dataKey="canceled"
-            stackId="a"
-            fill="var(--color-canceled)"
-            radius={[0, 0, 0, 0]}
-            activeBar={false}
-            style={{ transition: "fill-opacity var(--transition-duration)" }}
-            fillOpacity={opacity.canceled}
-          />
-          <Bar
-            dataKey="failed"
-            stackId="a"
-            fill="var(--color-failed)"
-            radius={[4, 4, 0, 0]}
-            activeBar={false}
-            style={{ transition: "fill-opacity var(--transition-duration)" }}
-            fillOpacity={opacity.failed}
-          />
+          {dataKeys.map((key, index, array) => (
+            <Bar
+              key={key}
+              dataKey={key}
+              stackId="a"
+              fill={`var(--color-${key})`}
+              radius={[
+                index === array.length - 1 ? 4 : 0, // top-left radius
+                index === array.length - 1 ? 4 : 0, // top-right radius
+                index === 0 ? 4 : 0, // bottom-right radius
+                index === 0 ? 4 : 0, // bottom-left radius
+              ]}
+              activeBar={false}
+              style={{ transition: "fill-opacity var(--transition-duration)" }}
+              fillOpacity={opacity[key]}
+            />
+          ))}
           <ChartLegend
             content={
               <ChartLegendContentRows
diff --git a/apps/webapp/app/routes/storybook.charts/route.tsx b/apps/webapp/app/routes/storybook.charts/route.tsx
index 99b65797d6..84a33a9583 100644
--- a/apps/webapp/app/routes/storybook.charts/route.tsx
+++ b/apps/webapp/app/routes/storybook.charts/route.tsx
@@ -90,6 +90,25 @@ const lineChartData = [
   { day: "Nov 27", desktop: 546, mobile: 150 },
 ];
 
+const stackedChartConfig = {
+  completed: {
+    label: "Completed",
+    color: "#28BF5C",
+  },
+  "in-progress": {
+    label: "In Progress",
+    color: "#3B82F6",
+  },
+  canceled: {
+    label: "Canceled",
+    color: "#878C99",
+  },
+  failed: {
+    label: "Failed",
+    color: "#E11D48",
+  },
+} satisfies ChartConfig;
+
 function generateRandomStackedData(numDays: number) {
   const data = [];
   const startDate = new Date(2023, 10, 21); // Nov 21, 2023
@@ -100,16 +119,16 @@ function generateRandomStackedData(numDays: number) {
     const day = currentDate.toLocaleDateString("en-US", { month: "short", day: "numeric" });
 
     // Generate random values with similar ranges to the original data
+    const completed = Math.random() < 0.5 ? 0 : Math.floor(Math.random() * 10000) + 500;
     const inProgress = Math.floor(Math.random() * 8000) + 1000;
     const canceled = Math.random() < 0.5 ? 0 : Math.floor(Math.random() * 9000) + 100;
-    const completed = Math.random() < 0.5 ? 0 : Math.floor(Math.random() * 10000) + 500;
     const failed = Math.floor(Math.random() * 6000) + 2000;
 
     data.push({
       day,
+      completed,
       "in-progress": inProgress,
       canceled,
-      completed,
       failed,
     });
   }
@@ -118,21 +137,3 @@ function generateRandomStackedData(numDays: number) {
 }
 
 const stackedChartData = generateRandomStackedData(70);
-const stackedChartConfig = {
-  "in-progress": {
-    label: "In Progress",
-    color: "#3B82F6",
-  },
-  canceled: {
-    label: "Canceled",
-    color: "#878C99",
-  },
-  completed: {
-    label: "Completed",
-    color: "#28BF5C",
-  },
-  failed: {
-    label: "Failed",
-    color: "#E11D48",
-  },
-} satisfies ChartConfig;

From 310727651e9b145133cd80a8d11603d7268048f0 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Tue, 15 Apr 2025 10:58:46 +0100
Subject: [PATCH 015/137] Update legend values when you hover on the chart

---
 .../components/primitives/charts/Charts.tsx   | 38 ++++++++++++++-----
 .../app/routes/storybook.charts/route.tsx     |  2 +-
 2 files changed, 30 insertions(+), 10 deletions(-)

diff --git a/apps/webapp/app/components/primitives/charts/Charts.tsx b/apps/webapp/app/components/primitives/charts/Charts.tsx
index c7bc3b8680..87eaf032c2 100644
--- a/apps/webapp/app/components/primitives/charts/Charts.tsx
+++ b/apps/webapp/app/components/primitives/charts/Charts.tsx
@@ -24,6 +24,7 @@ export function ChartStacked({
   loading?: boolean;
 }) {
   const [opacity, setOpacity] = React.useState<Record<string, number>>({});
+  const [activePayload, setActivePayload] = React.useState<any[] | null>(null);
 
   const dimmedOpacity = 0.2;
 
@@ -39,7 +40,7 @@ export function ChartStacked({
     }, {} as Record<string, number>);
   }, [data, dataKey]);
 
-  // Initialize opacity state with all keys from config
+  // Handle opacity
   React.useEffect(() => {
     const initialOpacity = Object.keys(config).reduce((acc, key) => {
       if (key !== dataKey) {
@@ -67,6 +68,7 @@ export function ChartStacked({
         return acc;
       }, {} as Record<string, number>)
     );
+    setActivePayload(null);
   };
 
   const style = {
@@ -79,6 +81,12 @@ export function ChartStacked({
   // Get all data keys except the x-axis key
   const dataKeys = Object.keys(config).filter((k) => k !== dataKey);
 
+  const currentData =
+    activePayload?.reduce((acc, item) => {
+      acc[item.dataKey] = item.value;
+      return acc;
+    }, {} as Record<string, number>) ?? totals;
+
   return (
     <ChartContainer
       config={config}
@@ -88,7 +96,17 @@ export function ChartStacked({
       {loading ? (
         <ChartLoading />
       ) : (
-        <BarChart accessibilityLayer data={data} barCategoryGap={2}>
+        <BarChart
+          accessibilityLayer
+          data={data}
+          barCategoryGap={2}
+          onMouseLeave={handleMouseLeave}
+          onMouseMove={(state) => {
+            if (state?.activePayload) {
+              setActivePayload(state.activePayload);
+            }
+          }}
+        >
           <CartesianGrid vertical={false} stroke="#272A2E" />
           <XAxis
             dataKey={dataKey}
@@ -113,12 +131,14 @@ export function ChartStacked({
               dataKey={key}
               stackId="a"
               fill={`var(--color-${key})`}
-              radius={[
-                index === array.length - 1 ? 4 : 0, // top-left radius
-                index === array.length - 1 ? 4 : 0, // top-right radius
-                index === 0 ? 4 : 0, // bottom-right radius
-                index === 0 ? 4 : 0, // bottom-left radius
-              ]}
+              radius={
+                [
+                  index === array.length - 1 ? 4 : 0,
+                  index === array.length - 1 ? 4 : 0,
+                  index === 0 ? 4 : 0,
+                  index === 0 ? 4 : 0,
+                ] as [number, number, number, number]
+              }
               activeBar={false}
               style={{ transition: "fill-opacity var(--transition-duration)" }}
               fillOpacity={opacity[key]}
@@ -129,7 +149,7 @@ export function ChartStacked({
               <ChartLegendContentRows
                 onMouseEnter={handleMouseEnter}
                 onMouseLeave={handleMouseLeave}
-                data={totals}
+                data={currentData}
               />
             }
           />
diff --git a/apps/webapp/app/routes/storybook.charts/route.tsx b/apps/webapp/app/routes/storybook.charts/route.tsx
index 84a33a9583..fd5d5c6851 100644
--- a/apps/webapp/app/routes/storybook.charts/route.tsx
+++ b/apps/webapp/app/routes/storybook.charts/route.tsx
@@ -118,7 +118,7 @@ function generateRandomStackedData(numDays: number) {
     currentDate.setDate(startDate.getDate() + i);
     const day = currentDate.toLocaleDateString("en-US", { month: "short", day: "numeric" });
 
-    // Generate random values with similar ranges to the original data
+    // Generate random values
     const completed = Math.random() < 0.5 ? 0 : Math.floor(Math.random() * 10000) + 500;
     const inProgress = Math.floor(Math.random() * 8000) + 1000;
     const canceled = Math.random() < 0.5 ? 0 : Math.floor(Math.random() * 9000) + 100;

From 01415ed37e1038f55a3b721612d4438af03ca92d Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Tue, 15 Apr 2025 11:10:34 +0100
Subject: [PATCH 016/137] Uses the AnimatedNumber to animate between the values
 in the legend

---
 .../app/components/primitives/AnimatedNumber.tsx     |  6 +++---
 .../app/components/primitives/charts/Chart.tsx       | 12 ++++++++++--
 .../app/components/primitives/charts/Charts.tsx      |  2 ++
 3 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/apps/webapp/app/components/primitives/AnimatedNumber.tsx b/apps/webapp/app/components/primitives/AnimatedNumber.tsx
index f2f309a526..2d1ff7ea7b 100644
--- a/apps/webapp/app/components/primitives/AnimatedNumber.tsx
+++ b/apps/webapp/app/components/primitives/AnimatedNumber.tsx
@@ -1,16 +1,16 @@
 import { animate, motion, useMotionValue, useTransform } from "framer-motion";
 import { useEffect } from "react";
 
-export function AnimatedNumber({ value }: { value: number }) {
+export function AnimatedNumber({ value, duration = 0.5 }: { value: number; duration?: number }) {
   const motionValue = useMotionValue(value);
   let display = useTransform(motionValue, (current) => Math.round(current).toLocaleString());
 
   useEffect(() => {
     animate(motionValue, value, {
-      duration: 0.5,
+      duration,
       ease: "easeInOut",
     });
-  }, [value]);
+  }, [value, duration]);
 
   return <motion.span>{display}</motion.span>;
 }
diff --git a/apps/webapp/app/components/primitives/charts/Chart.tsx b/apps/webapp/app/components/primitives/charts/Chart.tsx
index dbfec6a227..010dd88095 100644
--- a/apps/webapp/app/components/primitives/charts/Chart.tsx
+++ b/apps/webapp/app/components/primitives/charts/Chart.tsx
@@ -1,6 +1,7 @@
 import * as React from "react";
 import * as RechartsPrimitive from "recharts";
 import { cn } from "~/utils/cn";
+import { AnimatedNumber } from "../AnimatedNumber";
 
 // Format: { THEME_NAME: CSS_SELECTOR }
 const THEMES = { light: "", dark: ".dark" } as const;
@@ -300,6 +301,7 @@ const ChartLegendContentRows = React.forwardRef<
       onMouseEnter?: (e: any) => void;
       onMouseLeave?: (e: any) => void;
       data?: Record<string, number>;
+      animationDuration?: number;
     }
 >(
   (
@@ -312,6 +314,7 @@ const ChartLegendContentRows = React.forwardRef<
       onMouseEnter,
       onMouseLeave,
       data,
+      animationDuration,
     },
     ref
   ) => {
@@ -338,7 +341,10 @@ const ChartLegendContentRows = React.forwardRef<
           return (
             <div
               key={key}
-              className="flex w-full items-center justify-between gap-2 rounded px-2 py-1 transition hover:bg-grid-dimmed"
+              className={cn(
+                "flex w-full items-center justify-between gap-2 rounded px-2 py-1 transition hover:bg-grid-dimmed",
+                total === 0 && "opacity-50"
+              )}
               onMouseEnter={() => onMouseEnter?.(item)}
               onMouseLeave={() => onMouseLeave?.(item)}
             >
@@ -360,7 +366,9 @@ const ChartLegendContentRows = React.forwardRef<
                 {itemConfig?.label}
               </div>
               {total !== undefined && (
-                <span className="tabular-nums text-text-dimmed">{total.toLocaleString()}</span>
+                <span className="tabular-nums text-text-dimmed">
+                  <AnimatedNumber value={total} duration={animationDuration} />
+                </span>
               )}
             </div>
           );
diff --git a/apps/webapp/app/components/primitives/charts/Charts.tsx b/apps/webapp/app/components/primitives/charts/Charts.tsx
index 87eaf032c2..e96a7861d3 100644
--- a/apps/webapp/app/components/primitives/charts/Charts.tsx
+++ b/apps/webapp/app/components/primitives/charts/Charts.tsx
@@ -27,6 +27,7 @@ export function ChartStacked({
   const [activePayload, setActivePayload] = React.useState<any[] | null>(null);
 
   const dimmedOpacity = 0.2;
+  const animationDuration = 0.3;
 
   // Calculate totals for each category
   const totals = React.useMemo(() => {
@@ -150,6 +151,7 @@ export function ChartStacked({
                 onMouseEnter={handleMouseEnter}
                 onMouseLeave={handleMouseLeave}
                 data={currentData}
+                animationDuration={animationDuration}
               />
             }
           />

From 62b49c973534183679d6c238fc1a5158bd466245 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Tue, 15 Apr 2025 11:47:28 +0100
Subject: [PATCH 017/137] Updates the axis font size

---
 apps/webapp/app/components/primitives/charts/Charts.tsx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/apps/webapp/app/components/primitives/charts/Charts.tsx b/apps/webapp/app/components/primitives/charts/Charts.tsx
index e96a7861d3..989f18cdcf 100644
--- a/apps/webapp/app/components/primitives/charts/Charts.tsx
+++ b/apps/webapp/app/components/primitives/charts/Charts.tsx
@@ -115,9 +115,14 @@ export function ChartStacked({
             tickMargin={10}
             axisLine={false}
             ticks={[data[0]?.[dataKey], data[data.length - 1]?.[dataKey]]}
-            tick={{ fill: "#878C99" }}
+            tick={{ fill: "#878C99", fontSize: 12 }}
+          />
+          <YAxis
+            axisLine={false}
+            tickLine={false}
+            tickMargin={8}
+            tick={{ fill: "#878C99", fontSize: 12 }}
           />
-          <YAxis axisLine={false} tickLine={false} tickMargin={8} tick={{ fill: "#878C99" }} />
           <ChartTooltip
             cursor={{ fill: "#212327" }}
             content={<XAxisTooltip />}

From bf68ab48ae8e9fed1bbc359ed8289b193ae83868 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Tue, 15 Apr 2025 14:37:46 +0100
Subject: [PATCH 018/137] =?UTF-8?q?Figure=20out=20which=20bar=20in=20the?=
 =?UTF-8?q?=20stack=20you=E2=80=99re=20hovering=20over?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/primitives/charts/Chart.tsx    |   7 +-
 .../components/primitives/charts/Charts.tsx   | 127 +++++++++++++-----
 2 files changed, 98 insertions(+), 36 deletions(-)

diff --git a/apps/webapp/app/components/primitives/charts/Chart.tsx b/apps/webapp/app/components/primitives/charts/Chart.tsx
index 010dd88095..119a2e9ee7 100644
--- a/apps/webapp/app/components/primitives/charts/Chart.tsx
+++ b/apps/webapp/app/components/primitives/charts/Chart.tsx
@@ -302,6 +302,7 @@ const ChartLegendContentRows = React.forwardRef<
       onMouseLeave?: (e: any) => void;
       data?: Record<string, number>;
       animationDuration?: number;
+      activeKey?: string | null;
     }
 >(
   (
@@ -315,6 +316,7 @@ const ChartLegendContentRows = React.forwardRef<
       onMouseLeave,
       data,
       animationDuration,
+      activeKey,
     },
     ref
   ) => {
@@ -342,8 +344,9 @@ const ChartLegendContentRows = React.forwardRef<
             <div
               key={key}
               className={cn(
-                "flex w-full items-center justify-between gap-2 rounded px-2 py-1 transition hover:bg-grid-dimmed",
-                total === 0 && "opacity-50"
+                "flex w-full items-center justify-between gap-2 rounded px-2 py-1 transition",
+                total === 0 && "opacity-50",
+                activeKey === item.dataKey ? "bg-grid-dimmed" : "hover:bg-grid-dimmed"
               )}
               onMouseEnter={() => onMouseEnter?.(item)}
               onMouseLeave={() => onMouseLeave?.(item)}
diff --git a/apps/webapp/app/components/primitives/charts/Charts.tsx b/apps/webapp/app/components/primitives/charts/Charts.tsx
index 989f18cdcf..118cd7df08 100644
--- a/apps/webapp/app/components/primitives/charts/Charts.tsx
+++ b/apps/webapp/app/components/primitives/charts/Charts.tsx
@@ -25,6 +25,7 @@ export function ChartStacked({
 }) {
   const [opacity, setOpacity] = React.useState<Record<string, number>>({});
   const [activePayload, setActivePayload] = React.useState<any[] | null>(null);
+  const [activeBarKey, setActiveBarKey] = React.useState<string | null>(null);
 
   const dimmedOpacity = 0.2;
   const animationDuration = 0.3;
@@ -52,33 +53,6 @@ export function ChartStacked({
     setOpacity(initialOpacity);
   }, [config, dataKey]);
 
-  const handleMouseEnter = (e: any) => {
-    const key = e.dataKey;
-    setOpacity((op) =>
-      Object.keys(op).reduce((acc, k) => {
-        acc[k] = k === key ? 1 : dimmedOpacity;
-        return acc;
-      }, {} as Record<string, number>)
-    );
-  };
-
-  const handleMouseLeave = () => {
-    setOpacity((op) =>
-      Object.keys(op).reduce((acc, k) => {
-        acc[k] = 1;
-        return acc;
-      }, {} as Record<string, number>)
-    );
-    setActivePayload(null);
-  };
-
-  const style = {
-    ...Object.entries(opacity).reduce((acc, [key, value]) => {
-      acc[`--opacity-${key}`] = value;
-      return acc;
-    }, {} as Record<string, string | number>),
-  } as React.CSSProperties;
-
   // Get all data keys except the x-axis key
   const dataKeys = Object.keys(config).filter((k) => k !== dataKey);
 
@@ -88,6 +62,13 @@ export function ChartStacked({
       return acc;
     }, {} as Record<string, number>) ?? totals;
 
+  const style = {
+    ...Object.entries(opacity).reduce((acc, [key, value]) => {
+      acc[`--opacity-${key}`] = value;
+      return acc;
+    }, {} as Record<string, string | number>),
+  } as React.CSSProperties;
+
   return (
     <ChartContainer
       config={config}
@@ -101,12 +82,73 @@ export function ChartStacked({
           accessibilityLayer
           data={data}
           barCategoryGap={2}
-          onMouseLeave={handleMouseLeave}
-          onMouseMove={(state) => {
-            if (state?.activePayload) {
+          height={300}
+          onMouseMove={(state: any) => {
+            if (state?.activePayload?.length > 0) {
+              const CHART_HEIGHT = 300;
+              const total = state.activePayload.reduce((sum: number, p: any) => sum + p.value, 0);
               setActivePayload(state.activePayload);
+
+              // Get the actual height of all bars combined
+              const maxValue = Math.max(
+                ...data.map((d) =>
+                  Object.keys(d)
+                    .filter((key) => key !== dataKey)
+                    .reduce((sum, key) => sum + (d[key] || 0), 0)
+                )
+              );
+
+              // Scale the bars to fit the chart height
+              const scale = CHART_HEIGHT / maxValue;
+
+              // Invert the mouse position (300 - mouseY) so 0 is at the bottom
+              const mouseY = CHART_HEIGHT - state.chartY;
+
+              // Only process hover if mouse is within the actual bars
+              if (mouseY <= maxValue * scale) {
+                // Calculate position of each section from bottom to top
+                let runningTotal = 0;
+                for (const bar of state.activePayload) {
+                  const startPercent = runningTotal / total;
+                  runningTotal += bar.value;
+                  const endPercent = runningTotal / total;
+
+                  const sectionBottom = startPercent * CHART_HEIGHT;
+                  const sectionTop = endPercent * CHART_HEIGHT;
+
+                  if (mouseY >= sectionBottom && mouseY <= sectionTop) {
+                    setActiveBarKey(bar.dataKey);
+                    setOpacity((op) =>
+                      Object.keys(op).reduce((acc, k) => {
+                        acc[k] = k === bar.dataKey ? 1 : dimmedOpacity;
+                        return acc;
+                      }, {} as Record<string, number>)
+                    );
+                    break;
+                  }
+                }
+              } else {
+                // Reset when mouse is above the bars
+                setActiveBarKey(null);
+                setOpacity((op) =>
+                  Object.keys(op).reduce((acc, k) => {
+                    acc[k] = 1;
+                    return acc;
+                  }, {} as Record<string, number>)
+                );
+              }
             }
           }}
+          onMouseLeave={() => {
+            setActiveBarKey(null);
+            setActivePayload(null);
+            setOpacity((op) =>
+              Object.keys(op).reduce((acc, k) => {
+                acc[k] = 1;
+                return acc;
+              }, {} as Record<string, number>)
+            );
+          }}
         >
           <CartesianGrid vertical={false} stroke="#272A2E" />
           <XAxis
@@ -115,13 +157,13 @@ export function ChartStacked({
             tickMargin={10}
             axisLine={false}
             ticks={[data[0]?.[dataKey], data[data.length - 1]?.[dataKey]]}
-            tick={{ fill: "#878C99", fontSize: 12 }}
+            tick={{ fill: "#878C99", fontSize: 11, style: { fontVariantNumeric: "tabular-nums" } }}
           />
           <YAxis
             axisLine={false}
             tickLine={false}
             tickMargin={8}
-            tick={{ fill: "#878C99", fontSize: 12 }}
+            tick={{ fill: "#878C99", fontSize: 11, style: { fontVariantNumeric: "tabular-nums" } }}
           />
           <ChartTooltip
             cursor={{ fill: "#212327" }}
@@ -153,10 +195,27 @@ export function ChartStacked({
           <ChartLegend
             content={
               <ChartLegendContentRows
-                onMouseEnter={handleMouseEnter}
-                onMouseLeave={handleMouseLeave}
+                onMouseEnter={(data) => {
+                  setActiveBarKey(data.dataKey);
+                  setOpacity((op) =>
+                    Object.keys(op).reduce((acc, k) => {
+                      acc[k] = k === data.dataKey ? 1 : dimmedOpacity;
+                      return acc;
+                    }, {} as Record<string, number>)
+                  );
+                }}
+                onMouseLeave={() => {
+                  setActiveBarKey(null);
+                  setOpacity((op) =>
+                    Object.keys(op).reduce((acc, k) => {
+                      acc[k] = 1;
+                      return acc;
+                    }, {} as Record<string, number>)
+                  );
+                }}
                 data={currentData}
                 animationDuration={animationDuration}
+                activeKey={activeBarKey}
               />
             }
           />

From 4b3a6d85671633b61af7784789f000dcd1b5f691 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Tue, 15 Apr 2025 16:42:44 +0100
Subject: [PATCH 019/137] Much better solution to figuring out what bar in a
 stack your mouse is on

---
 .../components/primitives/charts/Chart.tsx    | 53 ++++++++-------
 .../components/primitives/charts/Charts.tsx   | 64 ++++---------------
 2 files changed, 42 insertions(+), 75 deletions(-)

diff --git a/apps/webapp/app/components/primitives/charts/Chart.tsx b/apps/webapp/app/components/primitives/charts/Chart.tsx
index 119a2e9ee7..89dddfd328 100644
--- a/apps/webapp/app/components/primitives/charts/Chart.tsx
+++ b/apps/webapp/app/components/primitives/charts/Chart.tsx
@@ -344,35 +344,42 @@ const ChartLegendContentRows = React.forwardRef<
             <div
               key={key}
               className={cn(
-                "flex w-full items-center justify-between gap-2 rounded px-2 py-1 transition",
-                total === 0 && "opacity-50",
-                activeKey === item.dataKey ? "bg-grid-dimmed" : "hover:bg-grid-dimmed"
+                "relative flex w-full items-center justify-between gap-2 rounded px-2 py-1 transition",
+                total === 0 && "opacity-50"
               )}
               onMouseEnter={() => onMouseEnter?.(item)}
               onMouseLeave={() => onMouseLeave?.(item)}
             >
-              <div
-                className={cn(
-                  "flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-text-dimmed"
-                )}
-              >
-                {itemConfig?.icon && !hideIcon ? (
-                  <itemConfig.icon />
-                ) : (
-                  <div
-                    className="h-3 w-1 shrink-0 rounded-[2px]"
-                    style={{
-                      backgroundColor: item.color,
-                    }}
-                  />
+              {activeKey === item.dataKey && item.color && (
+                <div
+                  className="absolute inset-0 rounded opacity-10"
+                  style={{ backgroundColor: item.color }}
+                />
+              )}
+              <div className="relative flex w-full items-center justify-between gap-2">
+                <div
+                  className={cn(
+                    "flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-text-dimmed"
+                  )}
+                >
+                  {itemConfig?.icon && !hideIcon ? (
+                    <itemConfig.icon />
+                  ) : (
+                    <div
+                      className="h-3 w-1 shrink-0 rounded-[2px]"
+                      style={{
+                        backgroundColor: item.color,
+                      }}
+                    />
+                  )}
+                  {itemConfig?.label}
+                </div>
+                {total !== undefined && (
+                  <span className="tabular-nums text-text-dimmed">
+                    <AnimatedNumber value={total} duration={animationDuration} />
+                  </span>
                 )}
-                {itemConfig?.label}
               </div>
-              {total !== undefined && (
-                <span className="tabular-nums text-text-dimmed">
-                  <AnimatedNumber value={total} duration={animationDuration} />
-                </span>
-              )}
             </div>
           );
         })}
diff --git a/apps/webapp/app/components/primitives/charts/Charts.tsx b/apps/webapp/app/components/primitives/charts/Charts.tsx
index 118cd7df08..414424de66 100644
--- a/apps/webapp/app/components/primitives/charts/Charts.tsx
+++ b/apps/webapp/app/components/primitives/charts/Charts.tsx
@@ -82,61 +82,9 @@ export function ChartStacked({
           accessibilityLayer
           data={data}
           barCategoryGap={2}
-          height={300}
           onMouseMove={(state: any) => {
             if (state?.activePayload?.length > 0) {
-              const CHART_HEIGHT = 300;
-              const total = state.activePayload.reduce((sum: number, p: any) => sum + p.value, 0);
               setActivePayload(state.activePayload);
-
-              // Get the actual height of all bars combined
-              const maxValue = Math.max(
-                ...data.map((d) =>
-                  Object.keys(d)
-                    .filter((key) => key !== dataKey)
-                    .reduce((sum, key) => sum + (d[key] || 0), 0)
-                )
-              );
-
-              // Scale the bars to fit the chart height
-              const scale = CHART_HEIGHT / maxValue;
-
-              // Invert the mouse position (300 - mouseY) so 0 is at the bottom
-              const mouseY = CHART_HEIGHT - state.chartY;
-
-              // Only process hover if mouse is within the actual bars
-              if (mouseY <= maxValue * scale) {
-                // Calculate position of each section from bottom to top
-                let runningTotal = 0;
-                for (const bar of state.activePayload) {
-                  const startPercent = runningTotal / total;
-                  runningTotal += bar.value;
-                  const endPercent = runningTotal / total;
-
-                  const sectionBottom = startPercent * CHART_HEIGHT;
-                  const sectionTop = endPercent * CHART_HEIGHT;
-
-                  if (mouseY >= sectionBottom && mouseY <= sectionTop) {
-                    setActiveBarKey(bar.dataKey);
-                    setOpacity((op) =>
-                      Object.keys(op).reduce((acc, k) => {
-                        acc[k] = k === bar.dataKey ? 1 : dimmedOpacity;
-                        return acc;
-                      }, {} as Record<string, number>)
-                    );
-                    break;
-                  }
-                }
-              } else {
-                // Reset when mouse is above the bars
-                setActiveBarKey(null);
-                setOpacity((op) =>
-                  Object.keys(op).reduce((acc, k) => {
-                    acc[k] = 1;
-                    return acc;
-                  }, {} as Record<string, number>)
-                );
-              }
             }
           }}
           onMouseLeave={() => {
@@ -190,6 +138,18 @@ export function ChartStacked({
               activeBar={false}
               style={{ transition: "fill-opacity var(--transition-duration)" }}
               fillOpacity={opacity[key]}
+              onMouseOver={(data) => {
+                if (data.tooltipPayload?.[0]) {
+                  const { dataKey: hoveredKey } = data.tooltipPayload[0];
+                  setActiveBarKey(hoveredKey);
+                  setOpacity((op) =>
+                    Object.keys(op).reduce((acc, k) => {
+                      acc[k] = k === hoveredKey ? 1 : dimmedOpacity;
+                      return acc;
+                    }, {} as Record<string, number>)
+                  );
+                }
+              }}
             />
           ))}
           <ChartLegend

From 5cabace1e750e8c98a9e73850ca929e2f497bdf3 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Tue, 15 Apr 2025 17:01:35 +0100
Subject: [PATCH 020/137] =?UTF-8?q?Brighten=20the=20legend=20text=20when?=
 =?UTF-8?q?=20it=E2=80=99s=20highlighted?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../app/components/primitives/charts/Chart.tsx  | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/apps/webapp/app/components/primitives/charts/Chart.tsx b/apps/webapp/app/components/primitives/charts/Chart.tsx
index 89dddfd328..0f207c662b 100644
--- a/apps/webapp/app/components/primitives/charts/Chart.tsx
+++ b/apps/webapp/app/components/primitives/charts/Chart.tsx
@@ -372,10 +372,23 @@ const ChartLegendContentRows = React.forwardRef<
                       }}
                     />
                   )}
-                  {itemConfig?.label}
+                  {itemConfig?.label && (
+                    <span
+                      className={
+                        activeKey === item.dataKey ? "text-text-bright" : "text-text-dimmed"
+                      }
+                    >
+                      {itemConfig.label}
+                    </span>
+                  )}
                 </div>
                 {total !== undefined && (
-                  <span className="tabular-nums text-text-dimmed">
+                  <span
+                    className={cn(
+                      "tabular-nums",
+                      activeKey === item.dataKey ? "text-text-bright" : "text-text-dimmed"
+                    )}
+                  >
                     <AnimatedNumber value={total} duration={animationDuration} />
                   </span>
                 )}

From f9faa982fa5e8d97ac1e2f3439d4a15b9f61179d Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Tue, 15 Apr 2025 17:02:06 +0100
Subject: [PATCH 021/137] Better chart spacing

---
 apps/webapp/app/components/primitives/charts/Card.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/webapp/app/components/primitives/charts/Card.tsx b/apps/webapp/app/components/primitives/charts/Card.tsx
index 5981162ae5..ec0216f95d 100644
--- a/apps/webapp/app/components/primitives/charts/Card.tsx
+++ b/apps/webapp/app/components/primitives/charts/Card.tsx
@@ -6,7 +6,7 @@ export const Card = ({ children, className }: { children: ReactNode; className?:
   return (
     <div
       className={cn(
-        "flex flex-col gap-4 rounded-lg border border-grid-bright bg-background-bright py-4 pl-5 pr-4",
+        "flex flex-col gap-4 rounded-lg border border-grid-bright bg-background-bright pb-2 pt-4",
         className
       )}
     >
@@ -16,11 +16,11 @@ export const Card = ({ children, className }: { children: ReactNode; className?:
 };
 
 const CardHeader = ({ children }: { children: ReactNode }) => {
-  return <Header3 className="flex items-center justify-between gap-2">{children}</Header3>;
+  return <Header3 className="flex items-center justify-between gap-2 px-4">{children}</Header3>;
 };
 
 const CardContent = ({ children }: { children: ReactNode }) => {
-  return <div>{children}</div>;
+  return <div className="px-2">{children}</div>;
 };
 
 const CardAccessory = ({ children }: { children: ReactNode }) => {

From f0027d0e66092bd12cb1bb307b577dc9f5fa4453 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Tue, 15 Apr 2025 17:08:08 +0100
Subject: [PATCH 022/137] Small style improvements

---
 apps/webapp/app/components/primitives/charts/Card.tsx   | 4 +++-
 apps/webapp/app/components/primitives/charts/Charts.tsx | 9 +++++----
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/apps/webapp/app/components/primitives/charts/Card.tsx b/apps/webapp/app/components/primitives/charts/Card.tsx
index ec0216f95d..dd2e329148 100644
--- a/apps/webapp/app/components/primitives/charts/Card.tsx
+++ b/apps/webapp/app/components/primitives/charts/Card.tsx
@@ -16,7 +16,9 @@ export const Card = ({ children, className }: { children: ReactNode; className?:
 };
 
 const CardHeader = ({ children }: { children: ReactNode }) => {
-  return <Header3 className="flex items-center justify-between gap-2 px-4">{children}</Header3>;
+  return (
+    <Header3 className="mb-2 flex items-center justify-between gap-2 px-4">{children}</Header3>
+  );
 };
 
 const CardContent = ({ children }: { children: ReactNode }) => {
diff --git a/apps/webapp/app/components/primitives/charts/Charts.tsx b/apps/webapp/app/components/primitives/charts/Charts.tsx
index 414424de66..3dae5a4362 100644
--- a/apps/webapp/app/components/primitives/charts/Charts.tsx
+++ b/apps/webapp/app/components/primitives/charts/Charts.tsx
@@ -12,6 +12,9 @@ import { AnimatedNumber } from "../AnimatedNumber";
 import { Spinner } from "../Spinner";
 import React from "react";
 
+//TODO: draw a separate line to indicate e.g. concurrency level
+//TODO: render a vertical line that follows the mouse
+
 export function ChartStacked({
   config,
   data,
@@ -313,8 +316,6 @@ export function ChartStepped({
   );
 }
 
-//TODO: draw a separate line to indicate concurrency level
-
 interface BigNumberProps {
   animate?: boolean;
   loading?: boolean;
@@ -371,10 +372,10 @@ const XAxisTooltip = ({ active, payload, label, viewBox, coordinate }: any) => {
 
   return (
     <div
-      className="absolute whitespace-nowrap rounded border border-grid-bright bg-background-dimmed px-2 py-1 text-xs tabular-nums text-text-dimmed"
+      className="absolute whitespace-nowrap rounded border border-grid-bright bg-background-dimmed px-2 py-1 text-xxs tabular-nums text-text-dimmed"
       style={{
         left: coordinate?.x,
-        top: viewBox?.height + 12,
+        top: viewBox?.height + 14,
         transform: "translateX(-50%)",
       }}
     >

From 17e5a417165c6ecbbaf53e0e0a73a1aad57bcc85 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Tue, 15 Apr 2025 17:21:46 +0100
Subject: [PATCH 023/137] Improves resetting the state of the chart values on
 mouse leave

---
 .../app/components/primitives/charts/Charts.tsx     | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/apps/webapp/app/components/primitives/charts/Charts.tsx b/apps/webapp/app/components/primitives/charts/Charts.tsx
index 3dae5a4362..1b2be682b8 100644
--- a/apps/webapp/app/components/primitives/charts/Charts.tsx
+++ b/apps/webapp/app/components/primitives/charts/Charts.tsx
@@ -141,7 +141,7 @@ export function ChartStacked({
               activeBar={false}
               style={{ transition: "fill-opacity var(--transition-duration)" }}
               fillOpacity={opacity[key]}
-              onMouseOver={(data) => {
+              onMouseEnter={(data) => {
                 if (data.tooltipPayload?.[0]) {
                   const { dataKey: hoveredKey } = data.tooltipPayload[0];
                   setActiveBarKey(hoveredKey);
@@ -153,6 +153,16 @@ export function ChartStacked({
                   );
                 }
               }}
+              onMouseLeave={() => {
+                setActiveBarKey(null);
+                setActivePayload(null);
+                setOpacity((op) =>
+                  Object.keys(op).reduce((acc, k) => {
+                    acc[k] = 1;
+                    return acc;
+                  }, {} as Record<string, number>)
+                );
+              }}
             />
           ))}
           <ChartLegend
@@ -169,6 +179,7 @@ export function ChartStacked({
                 }}
                 onMouseLeave={() => {
                   setActiveBarKey(null);
+                  setActivePayload(null);
                   setOpacity((op) =>
                     Object.keys(op).reduce((acc, k) => {
                       acc[k] = 1;

From 4708440dc2c7ac5de5e3b934416acee0cdc93c03 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Tue, 15 Apr 2025 17:34:08 +0100
Subject: [PATCH 024/137] Small style improvements

---
 .../app/components/primitives/charts/Charts.tsx    | 14 ++++++--------
 1 file changed, 6 insertions(+), 8 deletions(-)

diff --git a/apps/webapp/app/components/primitives/charts/Charts.tsx b/apps/webapp/app/components/primitives/charts/Charts.tsx
index 1b2be682b8..a93c16cee4 100644
--- a/apps/webapp/app/components/primitives/charts/Charts.tsx
+++ b/apps/webapp/app/components/primitives/charts/Charts.tsx
@@ -84,7 +84,8 @@ export function ChartStacked({
         <BarChart
           accessibilityLayer
           data={data}
-          barCategoryGap={2}
+          barCategoryGap={1}
+          className="pr-2"
           onMouseMove={(state: any) => {
             if (state?.activePayload?.length > 0) {
               setActivePayload(state.activePayload);
@@ -119,9 +120,6 @@ export function ChartStacked({
           <ChartTooltip
             cursor={{ fill: "#212327" }}
             content={<XAxisTooltip />}
-            position={{ y: undefined }}
-            coordinate={{ y: undefined }}
-            offset={16}
             allowEscapeViewBox={{ x: false, y: true }}
           />
           {dataKeys.map((key, index, array) => (
@@ -132,10 +130,10 @@ export function ChartStacked({
               fill={`var(--color-${key})`}
               radius={
                 [
-                  index === array.length - 1 ? 4 : 0,
-                  index === array.length - 1 ? 4 : 0,
-                  index === 0 ? 4 : 0,
-                  index === 0 ? 4 : 0,
+                  index === array.length - 1 ? 2 : 0,
+                  index === array.length - 1 ? 2 : 0,
+                  index === 0 ? 2 : 0,
+                  index === 0 ? 2 : 0,
                 ] as [number, number, number, number]
               }
               activeBar={false}

From 56c81866518a8308a5d906dbe2491b7d033c20e8 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Wed, 16 Apr 2025 12:46:00 +0100
Subject: [PATCH 025/137] Adds a big dataset bar chart

---
 .../components/primitives/charts/Charts.tsx   |  83 +---------
 .../app/routes/storybook.charts/route.tsx     | 149 +++++++++++++-----
 2 files changed, 111 insertions(+), 121 deletions(-)

diff --git a/apps/webapp/app/components/primitives/charts/Charts.tsx b/apps/webapp/app/components/primitives/charts/Charts.tsx
index a93c16cee4..d4f1438fc3 100644
--- a/apps/webapp/app/components/primitives/charts/Charts.tsx
+++ b/apps/webapp/app/components/primitives/charts/Charts.tsx
@@ -14,8 +14,9 @@ import React from "react";
 
 //TODO: draw a separate line to indicate e.g. concurrency level
 //TODO: render a vertical line that follows the mouse
+//TODO: drag on the chart to zoom in
 
-export function ChartStacked({
+export function ChartBar({
   config,
   data,
   dataKey,
@@ -197,38 +198,6 @@ export function ChartStacked({
   );
 }
 
-export function ChartBar({
-  config,
-  data,
-  dataKey,
-  loading = false,
-}: {
-  config: ChartConfig;
-  data: any[];
-  dataKey: string;
-  loading?: boolean;
-}) {
-  return (
-    <ChartContainer config={config} className="min-h-full w-full">
-      {loading ? (
-        <ChartLoading />
-      ) : (
-        <BarChart accessibilityLayer data={data} barCategoryGap={2}>
-          <CartesianGrid vertical={false} stroke="#272A2E" />
-          <XAxis dataKey={dataKey} tickLine={false} tickMargin={8} axisLine={false} />
-          <YAxis axisLine={false} tickLine={false} tickMargin={8} />
-          <ChartTooltip
-            cursor={false}
-            animationDuration={200}
-            content={<ChartTooltipContent hideLabel />}
-          />
-          <Bar dataKey="value" fill="#6366F1" radius={4} />
-        </BarChart>
-      )}
-    </ChartContainer>
-  );
-}
-
 export function ChartLine({
   config,
   data,
@@ -239,54 +208,6 @@ export function ChartLine({
   data: any[];
   dataKey: string;
   loading?: boolean;
-}) {
-  return (
-    <ChartContainer config={config} className="min-h-[200px] w-full">
-      {loading ? (
-        <ChartLoading />
-      ) : (
-        <LineChart
-          accessibilityLayer
-          data={data}
-          margin={{
-            left: 12,
-            right: 12,
-          }}
-        >
-          <CartesianGrid vertical={false} stroke="#272A2E" />
-          <XAxis dataKey={dataKey} tickLine={false} axisLine={false} tickMargin={8} />
-          <YAxis axisLine={false} tickLine={false} tickMargin={8} />
-          <ChartTooltip cursor={false} content={<ChartTooltipContent />} />
-          <Line
-            dataKey="desktop"
-            type="linear"
-            stroke="var(--color-desktop)"
-            strokeWidth={2}
-            dot={false}
-          />
-          <Line
-            dataKey="mobile"
-            type="linear"
-            stroke="var(--color-mobile)"
-            strokeWidth={2}
-            dot={false}
-          />
-        </LineChart>
-      )}
-    </ChartContainer>
-  );
-}
-
-export function ChartStepped({
-  config,
-  data,
-  dataKey,
-  loading = false,
-}: {
-  config: ChartConfig;
-  data: any[];
-  dataKey: string;
-  loading?: boolean;
 }) {
   return (
     <ChartContainer config={config} className="min-h-[200px] w-full">
diff --git a/apps/webapp/app/routes/storybook.charts/route.tsx b/apps/webapp/app/routes/storybook.charts/route.tsx
index fd5d5c6851..ba02467642 100644
--- a/apps/webapp/app/routes/storybook.charts/route.tsx
+++ b/apps/webapp/app/routes/storybook.charts/route.tsx
@@ -1,45 +1,32 @@
 import { Button } from "~/components/primitives/Buttons";
 import { Card } from "~/components/primitives/charts/Card";
 import { type ChartConfig } from "~/components/primitives/charts/Chart";
-import {
-  BigNumber,
-  ChartBar,
-  ChartLine,
-  ChartStacked,
-  ChartStepped,
-} from "~/components/primitives/charts/Charts";
+import { BigNumber, ChartBar, ChartLine } from "~/components/primitives/charts/Charts";
 
 export default function Story() {
   return (
     <div className="grid grid-cols-2 gap-4 p-3">
       <Card>
-        <Card.Header>ChartStacked</Card.Header>
+        <Card.Header>Bar Chart – stacked</Card.Header>
         <Card.Content>
-          <ChartStacked config={stackedChartConfig} data={stackedChartData} dataKey="day" />
-        </Card.Content>
-      </Card>
-
-      <Card>
-        <Card.Header>ChartLine</Card.Header>
-        <Card.Content>
-          <ChartLine config={lineChartConfig} data={lineChartData} dataKey="day" />
+          <ChartBar config={barChartConfig} data={barChartData} dataKey="day" />
         </Card.Content>
       </Card>
       <Card>
-        <Card.Header>ChartBar</Card.Header>
+        <Card.Header>Bar Chart – big dataset</Card.Header>
         <Card.Content>
-          <ChartBar config={barChartConfig} data={barChartData} dataKey="day" />
+          <ChartBar config={barChartBigDatasetConfig} data={barChartBigDatasetData} dataKey="day" />
         </Card.Content>
       </Card>
       <Card>
-        <Card.Header>ChartStepped</Card.Header>
+        <Card.Header>Line Chart – stepped</Card.Header>
         <Card.Content>
-          <ChartStepped config={lineChartConfig} data={lineChartData} dataKey="day" />
+          <ChartLine config={lineChartConfig} data={lineChartData} dataKey="day" />
         </Card.Content>
       </Card>
       <Card>
         <Card.Header>
-          BigNumber
+          Big Number
           <Card.Accessory>
             <Button variant="secondary/small">Example button</Button>
           </Card.Accessory>
@@ -52,22 +39,7 @@ export default function Story() {
   );
 }
 
-const barChartConfig = {
-  value: {
-    label: "Runs",
-    color: "#6366F1",
-  },
-} satisfies ChartConfig;
-
-const barChartData = [
-  { day: "Nov 21", value: 186 },
-  { day: "Nov 22", value: 305 },
-  { day: "Nov 23", value: 237 },
-  { day: "Nov 24", value: 73 },
-  { day: "Nov 25", value: 209 },
-  { day: "Nov 26", value: 214 },
-  { day: "Nov 27", value: 546 },
-];
+// Mock chart data
 
 const lineChartConfig = {
   desktop: {
@@ -90,7 +62,7 @@ const lineChartData = [
   { day: "Nov 27", desktop: 546, mobile: 150 },
 ];
 
-const stackedChartConfig = {
+const barChartConfig = {
   completed: {
     label: "Completed",
     color: "#28BF5C",
@@ -111,7 +83,7 @@ const stackedChartConfig = {
 
 function generateRandomStackedData(numDays: number) {
   const data = [];
-  const startDate = new Date(2023, 10, 21); // Nov 21, 2023
+  const startDate = new Date(2023, 10, 21);
 
   for (let i = 0; i < numDays; i++) {
     const currentDate = new Date(startDate);
@@ -136,4 +108,101 @@ function generateRandomStackedData(numDays: number) {
   return data;
 }
 
-const stackedChartData = generateRandomStackedData(70);
+const barChartData = generateRandomStackedData(168);
+
+const taskVerbs = [
+  "sync",
+  "process",
+  "upload",
+  "extract",
+  "compress",
+  "schedule",
+  "convert",
+  "analyze",
+  "backup",
+  "validate",
+  "transform",
+  "optimize",
+];
+const taskNouns = [
+  "data",
+  "video",
+  "audio",
+  "image",
+  "file",
+  "document",
+  "pdf",
+  "media",
+  "content",
+  "backup",
+  "report",
+  "metadata",
+];
+
+function generateRandomTaskName() {
+  const verb = taskVerbs[Math.floor(Math.random() * taskVerbs.length)];
+  const noun = taskNouns[Math.floor(Math.random() * taskNouns.length)];
+  return `${verb}-${noun}`;
+}
+
+function generateRandomId() {
+  return Array.from({ length: 16 }, () => Math.floor(Math.random() * 36).toString(36)).join("");
+}
+
+const tailwindColors = {
+  red: "#EF4444",
+  orange: "#F97316",
+  amber: "#F59E0B",
+  yellow: "#EAB308",
+  lime: "#84CC16",
+  green: "#22C55E",
+  emerald: "#10B981",
+  teal: "#14B8A6",
+  cyan: "#06B6D4",
+  sky: "#0EA5E9",
+  blue: "#3B82F6",
+  indigo: "#6366F1",
+  violet: "#8B5CF6",
+  purple: "#A855F7",
+  fuchsia: "#D946EF",
+  pink: "#EC4899",
+  rose: "#F43F5E",
+};
+
+function generateTaskConfig(numTasks: number) {
+  const colors = Object.values(tailwindColors);
+  return Array.from({ length: numTasks }, () => {
+    const taskName = generateRandomTaskName();
+    return {
+      [taskName]: {
+        label: taskName,
+        color: colors[Math.floor(Math.random() * colors.length)],
+      },
+    };
+  }).reduce((acc, curr) => ({ ...acc, ...curr }), {}) satisfies ChartConfig;
+}
+
+const barChartBigDatasetConfig = generateTaskConfig(8);
+
+function generateRandomBigDatasetData(numDays: number) {
+  const data = [];
+  const startDate = new Date(2023, 10, 21);
+  const taskNames = Object.keys(barChartBigDatasetConfig);
+
+  for (let i = 0; i < numDays; i++) {
+    const currentDate = new Date(startDate);
+    currentDate.setDate(startDate.getDate() + i);
+    const day = currentDate.toLocaleDateString("en-US", { month: "short", day: "numeric" });
+
+    const dataPoint: Record<string, string | number> = { day };
+    taskNames.forEach((taskName) => {
+      dataPoint[taskName] = Math.random() < 0.5 ? 0 : Math.floor(Math.random() * 10000) + 500;
+    });
+
+    data.push(dataPoint);
+  }
+
+  return data;
+}
+
+const barChartBigDatasetData = generateRandomBigDatasetData(70);

From 1774333432f3f2f23b9da117cb4b7a7c8ecbcc2b Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Wed, 16 Apr 2025 13:33:31 +0100
Subject: [PATCH 026/137] Caps the number of items in the legend to 5

---
 .../components/primitives/charts/Chart.tsx    | 31 +++++++---
 .../components/primitives/charts/Charts.tsx   | 61 ++++++++++++++++++-
 .../app/routes/storybook.charts/route.tsx     |  8 ++-
 3 files changed, 91 insertions(+), 9 deletions(-)

diff --git a/apps/webapp/app/components/primitives/charts/Chart.tsx b/apps/webapp/app/components/primitives/charts/Chart.tsx
index 0f207c662b..ee423964fb 100644
--- a/apps/webapp/app/components/primitives/charts/Chart.tsx
+++ b/apps/webapp/app/components/primitives/charts/Chart.tsx
@@ -239,6 +239,12 @@ ChartTooltipContent.displayName = "ChartTooltip";
 
 const ChartLegend = RechartsPrimitive.Legend;
 
+type ExtendedLegendPayload = Parameters<
+  NonNullable<RechartsPrimitive.LegendProps["formatter"]>
+>[0] & {
+  payload?: { remainingCount?: number };
+};
+
 const ChartLegendContent = React.forwardRef<
   HTMLDivElement,
   React.ComponentProps<"div"> &
@@ -295,7 +301,8 @@ ChartLegendContent.displayName = "ChartLegend";
 const ChartLegendContentRows = React.forwardRef<
   HTMLDivElement,
   React.ComponentProps<"div"> &
-    Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
+    Omit<Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign">, "payload"> & {
+      payload?: ExtendedLegendPayload[];
       hideIcon?: boolean;
       nameKey?: string;
       onMouseEnter?: (e: any) => void;
@@ -303,6 +310,7 @@ const ChartLegendContentRows = React.forwardRef<
       data?: Record<string, number>;
       animationDuration?: number;
       activeKey?: string | null;
+      renderViewMore?: (remainingCount: number) => React.ReactNode;
     }
 >(
   (
@@ -317,6 +325,7 @@ const ChartLegendContentRows = React.forwardRef<
       data,
       animationDuration,
       activeKey,
+      renderViewMore,
     },
     ref
   ) => {
@@ -338,6 +347,12 @@ const ChartLegendContentRows = React.forwardRef<
         {payload.map((item) => {
           const key = `${nameKey || item.dataKey || "value"}`;
           const itemConfig = getPayloadConfigFromPayload(config, item, key);
+
+          // Handle view more button
+          if (item.dataKey === "view-more" && renderViewMore && item.payload?.remainingCount) {
+            return renderViewMore(item.payload.remainingCount);
+          }
+
           const total = item.dataKey && data ? data[item.dataKey as string] : undefined;
 
           return (
@@ -365,12 +380,14 @@ const ChartLegendContentRows = React.forwardRef<
                   {itemConfig?.icon && !hideIcon ? (
                     <itemConfig.icon />
                   ) : (
-                    <div
-                      className="h-3 w-1 shrink-0 rounded-[2px]"
-                      style={{
-                        backgroundColor: item.color,
-                      }}
-                    />
+                    item.color && (
+                      <div
+                        className="h-3 w-1 shrink-0 rounded-[2px]"
+                        style={{
+                          backgroundColor: item.color,
+                        }}
+                      />
+                    )
                   )}
                   {itemConfig?.label && (
                     <span
diff --git a/apps/webapp/app/components/primitives/charts/Charts.tsx b/apps/webapp/app/components/primitives/charts/Charts.tsx
index d4f1438fc3..db081b71ca 100644
--- a/apps/webapp/app/components/primitives/charts/Charts.tsx
+++ b/apps/webapp/app/components/primitives/charts/Charts.tsx
@@ -11,21 +11,30 @@ import { cn } from "~/utils/cn";
 import { AnimatedNumber } from "../AnimatedNumber";
 import { Spinner } from "../Spinner";
 import React from "react";
+import { Button } from "../Buttons";
+import { Paragraph } from "../Paragraph";
 
-//TODO: draw a separate line to indicate e.g. concurrency level
+//TODO: cap the number of legend items
+//TODO: display the hovered over bar in the legend if it's not visible in the legend
+//TODO: do a better job of showing extra data in the legend - like in a table
+//TODO: hover over a bar and dim all other bars
 //TODO: render a vertical line that follows the mouse
 //TODO: drag on the chart to zoom in
+//TODO: draw a separate line to indicate e.g. concurrency level
+//TODO: fix the first and last bars not having rounded corners
 
 export function ChartBar({
   config,
   data,
   dataKey,
   loading = false,
+  maxLegendItems = 5,
 }: {
   config: ChartConfig;
   data: any[];
   dataKey: string;
   loading?: boolean;
+  maxLegendItems?: number;
 }) {
   const [opacity, setOpacity] = React.useState<Record<string, number>>({});
   const [activePayload, setActivePayload] = React.useState<any[] | null>(null);
@@ -73,6 +82,34 @@ export function ChartBar({
     }, {} as Record<string, string | number>),
   } as React.CSSProperties;
 
+  // Prepare legend payload with capped items
+  const legendPayload = React.useMemo(() => {
+    const allPayload = dataKeys.map((key) => ({
+      dataKey: key,
+      type: "rect" as const,
+      color: config[key].color,
+      value: key,
+      payload: {} as any,
+    }));
+
+    if (allPayload.length <= maxLegendItems) {
+      return allPayload;
+    }
+
+    const visiblePayload = allPayload.slice(0, maxLegendItems);
+    const remainingCount = allPayload.length - maxLegendItems;
+
+    visiblePayload.push({
+      dataKey: "view-more",
+      type: "rect" as const,
+      color: "transparent",
+      value: "view-more",
+      payload: { remainingCount } as any,
+    });
+
+    return visiblePayload;
+  }, [config, dataKeys, maxLegendItems]);
+
   return (
     <ChartContainer
       config={config}
@@ -168,6 +205,7 @@ export function ChartBar({
             content={
               <ChartLegendContentRows
                 onMouseEnter={(data) => {
+                  if (data.dataKey === "view-more") return;
                   setActiveBarKey(data.dataKey);
                   setOpacity((op) =>
                     Object.keys(op).reduce((acc, k) => {
@@ -189,8 +227,13 @@ export function ChartBar({
                 data={currentData}
                 animationDuration={animationDuration}
                 activeKey={activeBarKey}
+                payload={legendPayload}
+                renderViewMore={(remainingCount: number) => (
+                  <ViewAllDataRow remainingCount={remainingCount} />
+                )}
               />
             }
+            payload={legendPayload}
           />
         </BarChart>
       )}
@@ -313,3 +356,19 @@ const XAxisTooltip = ({ active, payload, label, viewBox, coordinate }: any) => {
     </div>
   );
 };
+
+function ViewAllDataRow({ remainingCount }: { remainingCount: number }) {
+  return (
+    <Button variant="minimal/small" fullWidth iconSpacing="justify-between" className="px-2 py-1">
+      <div className="flex items-center gap-1.5 text-text-dimmed">
+        <div className="h-3 w-1 rounded-[2px] border border-charcoal-600" />
+        <Paragraph variant="extra-small" className="tabular-nums">
+          {remainingCount} more…
+        </Paragraph>
+      </div>
+      <Paragraph variant="extra-small" className="text-indigo-500">
+        View all
+      </Paragraph>
+    </Button>
+  );
+}
diff --git a/apps/webapp/app/routes/storybook.charts/route.tsx b/apps/webapp/app/routes/storybook.charts/route.tsx
index ba02467642..5e8907a1bd 100644
--- a/apps/webapp/app/routes/storybook.charts/route.tsx
+++ b/apps/webapp/app/routes/storybook.charts/route.tsx
@@ -173,9 +173,15 @@ function generateTaskConfig(numTasks: number) {
   const colors = Object.values(tailwindColors);
   return Array.from({ length: numTasks }, () => {
     const taskName = generateRandomTaskName();
+    const taskId = generateRandomId();
     return {
       [taskName]: {
-        label: taskName,
+        label: (
+          <div className="flex items-center gap-2">
+            <span>{taskName}</span>
+            <span className="text-text-dimmed/50">{taskId}</span>
+          </div>
+        ),
         color: colors[Math.floor(Math.random() * colors.length)],
       },
     };

From 9d269344a95c8797e74436ae237c639e102ecccc Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Wed, 16 Apr 2025 13:41:25 +0100
Subject: [PATCH 027/137] Fix random generated chart data console error

---
 .../app/routes/storybook.charts/route.tsx     | 56 +++++++++++--------
 1 file changed, 32 insertions(+), 24 deletions(-)

diff --git a/apps/webapp/app/routes/storybook.charts/route.tsx b/apps/webapp/app/routes/storybook.charts/route.tsx
index 5e8907a1bd..879005c4eb 100644
--- a/apps/webapp/app/routes/storybook.charts/route.tsx
+++ b/apps/webapp/app/routes/storybook.charts/route.tsx
@@ -139,14 +139,41 @@ const taskNouns = [
   "metadata",
 ];
 
-function generateRandomTaskName() {
-  const verb = taskVerbs[Math.floor(Math.random() * taskVerbs.length)];
-  const noun = taskNouns[Math.floor(Math.random() * taskNouns.length)];
+// Seeded random number generator
+function seededRandom(seed: number) {
+  return function () {
+    seed = (seed * 16807) % 2147483647;
+    return (seed - 1) / 2147483646;
+  };
+}
+
+function generateTaskConfig(numTasks: number) {
+  const random = seededRandom(123); // Fixed seed for consistent generation
+  const colors = Object.values(tailwindColors);
+  return Array.from({ length: numTasks }, () => {
+    const taskName = generateRandomTaskName(random);
+    return {
+      [taskName]: {
+        label: (
+          <div className="flex items-center gap-2">
+            <span>{taskName}</span>
+            <span className="text-text-dimmed/50">{generateRandomId(random)}</span>
+          </div>
+        ),
+        color: colors[Math.floor(random() * colors.length)],
+      },
+    };
+  }).reduce((acc, curr) => ({ ...acc, ...curr }), {}) satisfies ChartConfig;
+}
+
+function generateRandomTaskName(random: () => number) {
+  const verb = taskVerbs[Math.floor(random() * taskVerbs.length)];
+  const noun = taskNouns[Math.floor(random() * taskNouns.length)];
   return `${verb}-${noun}`;
 }
 
-function generateRandomId() {
-  return Array.from({ length: 16 }, () => Math.floor(Math.random() * 36).toString(36)).join("");
+function generateRandomId(random: () => number) {
+  return Array.from({ length: 16 }, () => Math.floor(random() * 36).toString(36)).join("");
 }
 
 const tailwindColors = {
@@ -169,25 +196,6 @@ const tailwindColors = {
   rose: "#F43F5E",
 };
 
-function generateTaskConfig(numTasks: number) {
-  const colors = Object.values(tailwindColors);
-  return Array.from({ length: numTasks }, () => {
-    const taskName = generateRandomTaskName();
-    const taskId = generateRandomId();
-    return {
-      [taskName]: {
-        label: (
-          <div className="flex items-center gap-2">
-            <span>{taskName}</span>
-            <span className="text-text-dimmed/50">{taskId}</span>
-          </div>
-        ),
-        color: colors[Math.floor(Math.random() * colors.length)],
-      },
-    };
-  }).reduce((acc, curr) => ({ ...acc, ...curr }), {}) satisfies ChartConfig;
-}
-
 const barChartBigDatasetConfig = generateTaskConfig(8);
 
 function generateRandomBigDatasetData(numDays: number) {

From 5317d271546646e7c2b987ffca7880a865b78dc1 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Wed, 16 Apr 2025 13:41:32 +0100
Subject: [PATCH 028/137] adds a key

---
 apps/webapp/app/components/primitives/charts/Charts.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/webapp/app/components/primitives/charts/Charts.tsx b/apps/webapp/app/components/primitives/charts/Charts.tsx
index db081b71ca..c62d09b0ac 100644
--- a/apps/webapp/app/components/primitives/charts/Charts.tsx
+++ b/apps/webapp/app/components/primitives/charts/Charts.tsx
@@ -229,7 +229,7 @@ export function ChartBar({
                 activeKey={activeBarKey}
                 payload={legendPayload}
                 renderViewMore={(remainingCount: number) => (
-                  <ViewAllDataRow remainingCount={remainingCount} />
+                  <ViewAllDataRow key="view-more" remainingCount={remainingCount} />
                 )}
               />
             }

From 79f5f700a5ef237bda2a77243f7af7351edb5322 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Wed, 16 Apr 2025 14:29:51 +0100
Subject: [PATCH 029/137] Show the item being hovered over as the last item in
 the legend

---
 .../components/primitives/charts/Charts.tsx   | 29 +++++++++++++------
 1 file changed, 20 insertions(+), 9 deletions(-)

diff --git a/apps/webapp/app/components/primitives/charts/Charts.tsx b/apps/webapp/app/components/primitives/charts/Charts.tsx
index c62d09b0ac..36378017bc 100644
--- a/apps/webapp/app/components/primitives/charts/Charts.tsx
+++ b/apps/webapp/app/components/primitives/charts/Charts.tsx
@@ -99,16 +99,27 @@ export function ChartBar({
     const visiblePayload = allPayload.slice(0, maxLegendItems);
     const remainingCount = allPayload.length - maxLegendItems;
 
-    visiblePayload.push({
-      dataKey: "view-more",
-      type: "rect" as const,
-      color: "transparent",
-      value: "view-more",
-      payload: { remainingCount } as any,
-    });
+    // If we're hovering over an item that's not visible in the legend,
+    // add it as a 6th item instead of showing the "view more" row
+    if (activeBarKey && !visiblePayload.some((item) => item.dataKey === activeBarKey)) {
+      const hoveredItem = allPayload.find((item) => item.dataKey === activeBarKey);
+      if (hoveredItem) {
+        return [...visiblePayload, hoveredItem];
+      }
+    }
 
-    return visiblePayload;
-  }, [config, dataKeys, maxLegendItems]);
+    // Otherwise show the "view more" row
+    return [
+      ...visiblePayload,
+      {
+        dataKey: "view-more",
+        type: "rect" as const,
+        color: "transparent",
+        value: "view-more",
+        payload: { remainingCount },
+      },
+    ];
+  }, [config, dataKeys, maxLegendItems, activeBarKey]);
 
   return (
     <ChartContainer

From 8a730cb21f725916135cb50ae7d349a70784a0e6 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Wed, 16 Apr 2025 16:42:13 +0100
Subject: [PATCH 030/137] Bar chart can have an optional reference line

---
 .../components/primitives/charts/Charts.tsx   | 33 ++++++++++++++++---
 .../app/routes/storybook.charts/route.tsx     | 10 +++++-
 2 files changed, 37 insertions(+), 6 deletions(-)

diff --git a/apps/webapp/app/components/primitives/charts/Charts.tsx b/apps/webapp/app/components/primitives/charts/Charts.tsx
index 36378017bc..384e10cb8f 100644
--- a/apps/webapp/app/components/primitives/charts/Charts.tsx
+++ b/apps/webapp/app/components/primitives/charts/Charts.tsx
@@ -1,4 +1,14 @@
-import { Bar, BarChart, CartesianGrid, Line, LineChart, Legend, XAxis, YAxis } from "recharts";
+import {
+  Bar,
+  BarChart,
+  CartesianGrid,
+  Line,
+  LineChart,
+  Legend,
+  XAxis,
+  YAxis,
+  ReferenceLine,
+} from "recharts";
 import {
   type ChartConfig,
   ChartContainer,
@@ -14,27 +24,31 @@ import React from "react";
 import { Button } from "../Buttons";
 import { Paragraph } from "../Paragraph";
 
-//TODO: cap the number of legend items
-//TODO: display the hovered over bar in the legend if it's not visible in the legend
 //TODO: do a better job of showing extra data in the legend - like in a table
 //TODO: hover over a bar and dim all other bars
-//TODO: render a vertical line that follows the mouse
 //TODO: drag on the chart to zoom in
-//TODO: draw a separate line to indicate e.g. concurrency level
+//TODO: render a vertical line that follows the mouse
 //TODO: fix the first and last bars not having rounded corners
 
+type ReferenceLineProps = {
+  value: number;
+  label: string;
+};
+
 export function ChartBar({
   config,
   data,
   dataKey,
   loading = false,
   maxLegendItems = 5,
+  referenceLine,
 }: {
   config: ChartConfig;
   data: any[];
   dataKey: string;
   loading?: boolean;
   maxLegendItems?: number;
+  referenceLine?: ReferenceLineProps;
 }) {
   const [opacity, setOpacity] = React.useState<Record<string, number>>({});
   const [activePayload, setActivePayload] = React.useState<any[] | null>(null);
@@ -171,6 +185,15 @@ export function ChartBar({
             content={<XAxisTooltip />}
             allowEscapeViewBox={{ x: false, y: true }}
           />
+          {referenceLine && (
+            <ReferenceLine
+              y={referenceLine.value}
+              label={referenceLine.label}
+              isFront={true}
+              stroke="#3B3E45"
+              strokeDasharray="4 4"
+            />
+          )}
           {dataKeys.map((key, index, array) => (
             <Bar
               key={key}
diff --git a/apps/webapp/app/routes/storybook.charts/route.tsx b/apps/webapp/app/routes/storybook.charts/route.tsx
index 879005c4eb..9626897fdd 100644
--- a/apps/webapp/app/routes/storybook.charts/route.tsx
+++ b/apps/webapp/app/routes/storybook.charts/route.tsx
@@ -9,7 +9,15 @@ export default function Story() {
       <Card>
         <Card.Header>Bar Chart – stacked</Card.Header>
         <Card.Content>
-          <ChartBar config={barChartConfig} data={barChartData} dataKey="day" />
+          <ChartBar
+            config={barChartConfig}
+            data={barChartData}
+            dataKey="day"
+            referenceLine={{
+              value: 30000,
+              label: "Max concurrency",
+            }}
+          />
         </Card.Content>
       </Card>
       <Card>

From 05c5e37aeebb8e9754a8009c6ed58e7052c44a8f Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Wed, 16 Apr 2025 18:05:49 +0100
Subject: [PATCH 031/137] Adds a zoomable bar chart

---
 .../components/primitives/charts/Charts.tsx   | 433 ++++++++++++++++++
 .../app/routes/storybook.charts/route.tsx     |  26 +-
 2 files changed, 458 insertions(+), 1 deletion(-)

diff --git a/apps/webapp/app/components/primitives/charts/Charts.tsx b/apps/webapp/app/components/primitives/charts/Charts.tsx
index 384e10cb8f..6a87d6471d 100644
--- a/apps/webapp/app/components/primitives/charts/Charts.tsx
+++ b/apps/webapp/app/components/primitives/charts/Charts.tsx
@@ -8,6 +8,8 @@ import {
   XAxis,
   YAxis,
   ReferenceLine,
+  ReferenceArea,
+  ResponsiveContainer,
 } from "recharts";
 import {
   type ChartConfig,
@@ -406,3 +408,434 @@ function ViewAllDataRow({ remainingCount }: { remainingCount: number }) {
     </Button>
   );
 }
+
+export function ZoomableChartBar({
+  config,
+  data: initialData,
+  dataKey,
+  loading = false,
+  maxLegendItems = 5,
+  referenceLine,
+}: {
+  config: ChartConfig;
+  data: any[];
+  dataKey: string;
+  loading?: boolean;
+  maxLegendItems?: number;
+  referenceLine?: ReferenceLineProps;
+}) {
+  const [opacity, setOpacity] = React.useState<Record<string, number>>({});
+  const [activePayload, setActivePayload] = React.useState<any[] | null>(null);
+  const [activeBarKey, setActiveBarKey] = React.useState<string | null>(null);
+
+  // Zoom state
+  const [refAreaLeft, setRefAreaLeft] = React.useState<string | null>(null);
+  const [refAreaRight, setRefAreaRight] = React.useState<string | null>(null);
+  const [data, setData] = React.useState<any[]>(initialData);
+  const [originalData, setOriginalData] = React.useState<any[]>(initialData);
+  const [isSelecting, setIsSelecting] = React.useState(false);
+  const [zoomMessage, setZoomMessage] = React.useState<string | null>(null);
+  const containerRef = React.useRef<HTMLDivElement>(null);
+  const zoomMessageTimeoutRef = React.useRef<number | null>(null);
+
+  // Initialize data
+  React.useEffect(() => {
+    setData(initialData);
+    setOriginalData(initialData);
+  }, [initialData]);
+
+  // Clear zoom message timeout on unmount
+  React.useEffect(() => {
+    return () => {
+      if (zoomMessageTimeoutRef.current !== null) {
+        window.clearTimeout(zoomMessageTimeoutRef.current);
+      }
+    };
+  }, []);
+
+  const dimmedOpacity = 0.2;
+  const animationDuration = 0.3;
+
+  // Calculate totals for each category
+  const totals = React.useMemo(() => {
+    return data.reduce((acc, item) => {
+      Object.entries(item).forEach(([key, value]) => {
+        if (key !== dataKey) {
+          acc[key] = (acc[key] || 0) + (value as number);
+        }
+      });
+      return acc;
+    }, {} as Record<string, number>);
+  }, [data, dataKey]);
+
+  // Handle opacity
+  React.useEffect(() => {
+    const initialOpacity = Object.keys(config).reduce((acc, key) => {
+      if (key !== dataKey) {
+        acc[key] = 1;
+      }
+      return acc;
+    }, {} as Record<string, number>);
+    setOpacity(initialOpacity);
+  }, [config, dataKey]);
+
+  // Get all data keys except the x-axis key
+  const dataKeys = Object.keys(config).filter((k) => k !== dataKey);
+
+  const currentData =
+    activePayload?.reduce((acc, item) => {
+      acc[item.dataKey] = item.value;
+      return acc;
+    }, {} as Record<string, number>) ?? totals;
+
+  const style = {
+    ...Object.entries(opacity).reduce((acc, [key, value]) => {
+      acc[`--opacity-${key}`] = value;
+      return acc;
+    }, {} as Record<string, string | number>),
+  } as React.CSSProperties;
+
+  // Prepare legend payload with capped items
+  const legendPayload = React.useMemo(() => {
+    const allPayload = dataKeys.map((key) => ({
+      dataKey: key,
+      type: "rect" as const,
+      color: config[key].color,
+      value: key,
+      payload: {} as any,
+    }));
+
+    if (allPayload.length <= maxLegendItems) {
+      return allPayload;
+    }
+
+    const visiblePayload = allPayload.slice(0, maxLegendItems);
+    const remainingCount = allPayload.length - maxLegendItems;
+
+    // If we're hovering over an item that's not visible in the legend,
+    // add it as a 6th item instead of showing the "view more" row
+    if (activeBarKey && !visiblePayload.some((item) => item.dataKey === activeBarKey)) {
+      const hoveredItem = allPayload.find((item) => item.dataKey === activeBarKey);
+      if (hoveredItem) {
+        return [...visiblePayload, hoveredItem];
+      }
+    }
+
+    // Otherwise show the "view more" row
+    return [
+      ...visiblePayload,
+      {
+        dataKey: "view-more",
+        type: "rect" as const,
+        color: "transparent",
+        value: "view-more",
+        payload: { remainingCount },
+      },
+    ];
+  }, [config, dataKeys, maxLegendItems, activeBarKey]);
+
+  // Show zoom message with auto-dismiss
+  const showZoomMessage = (message: string) => {
+    setZoomMessage(message);
+
+    if (zoomMessageTimeoutRef.current !== null) {
+      window.clearTimeout(zoomMessageTimeoutRef.current);
+    }
+
+    zoomMessageTimeoutRef.current = window.setTimeout(() => {
+      setZoomMessage(null);
+      zoomMessageTimeoutRef.current = null;
+    }, 2000);
+  };
+
+  // Handle mouse down for drag zooming
+  const handleMouseDown = (e: any) => {
+    if (e.activeLabel) {
+      setRefAreaLeft(e.activeLabel);
+      setIsSelecting(true);
+    }
+  };
+
+  // Handle mouse move for drag zooming
+  const handleMouseMove = (e: any) => {
+    if (isSelecting && e.activeLabel) {
+      setRefAreaRight(e.activeLabel);
+    }
+  };
+
+  // Handle mouse up for drag zooming
+  const handleMouseUp = () => {
+    if (refAreaLeft && refAreaRight) {
+      // Get indices of the selected range
+      const leftIndex = originalData.findIndex((item) => item[dataKey] === refAreaLeft);
+      const rightIndex = originalData.findIndex((item) => item[dataKey] === refAreaRight);
+
+      // Ensure left is less than right
+      const [start, end] = [leftIndex, rightIndex].sort((a, b) => a - b);
+
+      // Check if the selection is too small
+      if (end - start <= 1) {
+        showZoomMessage("Selection too small to zoom");
+      } else {
+        // Update the data with the zoomed range
+        if (start !== -1 && end !== -1) {
+          setData(originalData.slice(start, end + 1));
+        }
+      }
+    }
+
+    setRefAreaLeft(null);
+    setRefAreaRight(null);
+    setIsSelecting(false);
+  };
+
+  // Reset zoom
+  const handleReset = () => {
+    setData(originalData);
+    setZoomMessage(null);
+  };
+
+  // Handle wheel zoom
+  const handleWheel = (e: React.WheelEvent<HTMLDivElement>) => {
+    e.preventDefault();
+
+    if (!containerRef.current) return;
+
+    const zoomFactor = 0.1;
+    const direction = e.deltaY < 0 ? 1 : -1; // 1 for zoom in, -1 for zoom out
+
+    // If zooming out and we're already at the original data set, do nothing
+    if (direction < 0 && data.length === originalData.length) {
+      showZoomMessage("Maximum zoom out reached");
+      return;
+    }
+
+    // If zooming in and we can't zoom in any further, do nothing
+    const MIN_VISIBLE_ITEMS = 3;
+    if (direction > 0 && data.length <= MIN_VISIBLE_ITEMS) {
+      showZoomMessage("Maximum zoom in reached");
+      return;
+    }
+
+    // Get chart bounds and mouse position
+    const chartRect = containerRef.current.getBoundingClientRect();
+    const mouseX = e.clientX - chartRect.left;
+    const chartWidth = chartRect.width;
+    const mousePercentage = Math.max(0, Math.min(1, mouseX / chartWidth));
+
+    // Calculate how many items to add/remove
+    const removeCount = Math.max(1, Math.floor(data.length * zoomFactor * Math.abs(direction)));
+
+    if (direction > 0) {
+      // Zoom in - remove items from both sides based on mouse position
+      const leftRemove = Math.max(0, Math.floor(removeCount * mousePercentage));
+      const rightRemove = Math.max(0, removeCount - leftRemove);
+
+      const newStartIndex = Math.min(leftRemove, data.length - MIN_VISIBLE_ITEMS);
+      const newEndIndex = Math.max(MIN_VISIBLE_ITEMS - 1, data.length - rightRemove - 1);
+
+      if (newEndIndex - newStartIndex >= MIN_VISIBLE_ITEMS - 1) {
+        setData(data.slice(newStartIndex, newEndIndex + 1));
+      } else {
+        showZoomMessage("Maximum zoom in reached");
+      }
+    } else {
+      // Zoom out - add items from original data
+      // Find where current data starts in original data
+      const currentFirstItem = data[0][dataKey];
+      const currentLastItem = data[data.length - 1][dataKey];
+      let startIdx = originalData.findIndex((item) => item[dataKey] === currentFirstItem);
+      let endIdx = originalData.findIndex((item) => item[dataKey] === currentLastItem);
+
+      if (startIdx === -1 || endIdx === -1) return;
+
+      // Calculate how many items to add on each side based on mouse position
+      const leftAdd = Math.floor(removeCount * mousePercentage);
+      const rightAdd = removeCount - leftAdd;
+
+      // Expand the range
+      startIdx = Math.max(0, startIdx - leftAdd);
+      endIdx = Math.min(originalData.length - 1, endIdx + rightAdd);
+
+      setData(originalData.slice(startIdx, endIdx + 1));
+    }
+  };
+
+  return (
+    <div className="relative flex w-full flex-col">
+      <div className="absolute left-0 right-0 top-0 z-10 mb-2 flex items-center justify-between">
+        {zoomMessage ? <div className="text-xs text-amber-500">{zoomMessage}</div> : <div></div>}
+        <Button
+          variant="secondary/small"
+          onClick={handleReset}
+          disabled={data.length === originalData.length}
+        >
+          Reset Zoom
+        </Button>
+      </div>
+
+      <div
+        ref={containerRef}
+        className="mt-8 h-[400px] w-full"
+        style={{ touchAction: "none" }}
+        onWheel={handleWheel}
+      >
+        <ChartContainer
+          config={config}
+          className="h-full w-full [--transition-duration:300ms]"
+          style={style}
+        >
+          {loading ? (
+            <ChartLoading />
+          ) : (
+            <BarChart
+              data={data}
+              barCategoryGap={1}
+              className="pr-2"
+              onMouseDown={handleMouseDown}
+              onMouseMove={handleMouseMove}
+              onMouseUp={handleMouseUp}
+              onMouseLeave={() => {
+                handleMouseUp();
+                setActiveBarKey(null);
+                setActivePayload(null);
+                setOpacity((op) =>
+                  Object.keys(op).reduce((acc, k) => {
+                    acc[k] = 1;
+                    return acc;
+                  }, {} as Record<string, number>)
+                );
+              }}
+            >
+              <CartesianGrid vertical={false} stroke="#272A2E" />
+              <XAxis
+                dataKey={dataKey}
+                tickLine={false}
+                tickMargin={10}
+                axisLine={false}
+                ticks={
+                  data.length > 10
+                    ? [data[0]?.[dataKey], data[data.length - 1]?.[dataKey]]
+                    : undefined
+                }
+                tick={{
+                  fill: "#878C99",
+                  fontSize: 11,
+                  style: { fontVariantNumeric: "tabular-nums" },
+                }}
+              />
+              <YAxis
+                axisLine={false}
+                tickLine={false}
+                tickMargin={8}
+                tick={{
+                  fill: "#878C99",
+                  fontSize: 11,
+                  style: { fontVariantNumeric: "tabular-nums" },
+                }}
+              />
+              <ChartTooltip
+                cursor={{ fill: "#212327" }}
+                content={<XAxisTooltip />}
+                allowEscapeViewBox={{ x: false, y: true }}
+              />
+              {referenceLine && (
+                <ReferenceLine
+                  y={referenceLine.value}
+                  label={referenceLine.label}
+                  isFront={true}
+                  stroke="#3B3E45"
+                  strokeDasharray="4 4"
+                />
+              )}
+              {dataKeys.map((key, index, array) => (
+                <Bar
+                  key={key}
+                  dataKey={key}
+                  stackId="a"
+                  fill={`var(--color-${key})`}
+                  radius={
+                    [
+                      index === array.length - 1 ? 2 : 0,
+                      index === array.length - 1 ? 2 : 0,
+                      index === 0 ? 2 : 0,
+                      index === 0 ? 2 : 0,
+                    ] as [number, number, number, number]
+                  }
+                  activeBar={false}
+                  style={{ transition: "fill-opacity var(--transition-duration)" }}
+                  fillOpacity={opacity[key]}
+                  onMouseEnter={(data) => {
+                    if (data.tooltipPayload?.[0]) {
+                      const { dataKey: hoveredKey } = data.tooltipPayload[0];
+                      setActiveBarKey(hoveredKey);
+                      setOpacity((op) =>
+                        Object.keys(op).reduce((acc, k) => {
+                          acc[k] = k === hoveredKey ? 1 : dimmedOpacity;
+                          return acc;
+                        }, {} as Record<string, number>)
+                      );
+                    }
+                  }}
+                  onMouseLeave={() => {
+                    setActiveBarKey(null);
+                    setActivePayload(null);
+                    setOpacity((op) =>
+                      Object.keys(op).reduce((acc, k) => {
+                        acc[k] = 1;
+                        return acc;
+                      }, {} as Record<string, number>)
+                    );
+                  }}
+                />
+              ))}
+              {refAreaLeft && refAreaRight && (
+                <ReferenceArea
+                  x1={refAreaLeft}
+                  x2={refAreaRight}
+                  strokeOpacity={0.3}
+                  fill="#3B82F6"
+                  fillOpacity={0.1}
+                />
+              )}
+              <ChartLegend
+                content={
+                  <ChartLegendContentRows
+                    onMouseEnter={(data) => {
+                      if (data.dataKey === "view-more") return;
+                      setActiveBarKey(data.dataKey);
+                      setOpacity((op) =>
+                        Object.keys(op).reduce((acc, k) => {
+                          acc[k] = k === data.dataKey ? 1 : dimmedOpacity;
+                          return acc;
+                        }, {} as Record<string, number>)
+                      );
+                    }}
+                    onMouseLeave={() => {
+                      setActiveBarKey(null);
+                      setActivePayload(null);
+                      setOpacity((op) =>
+                        Object.keys(op).reduce((acc, k) => {
+                          acc[k] = 1;
+                          return acc;
+                        }, {} as Record<string, number>)
+                      );
+                    }}
+                    data={currentData}
+                    animationDuration={animationDuration}
+                    activeKey={activeBarKey}
+                    payload={legendPayload}
+                    renderViewMore={(remainingCount: number) => (
+                      <ViewAllDataRow key="view-more" remainingCount={remainingCount} />
+                    )}
+                  />
+                }
+                payload={legendPayload}
+              />
+            </BarChart>
+          )}
+        </ChartContainer>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/webapp/app/routes/storybook.charts/route.tsx b/apps/webapp/app/routes/storybook.charts/route.tsx
index 9626897fdd..ebacbb4bbb 100644
--- a/apps/webapp/app/routes/storybook.charts/route.tsx
+++ b/apps/webapp/app/routes/storybook.charts/route.tsx
@@ -1,11 +1,35 @@
 import { Button } from "~/components/primitives/Buttons";
 import { Card } from "~/components/primitives/charts/Card";
 import { type ChartConfig } from "~/components/primitives/charts/Chart";
-import { BigNumber, ChartBar, ChartLine } from "~/components/primitives/charts/Charts";
+import {
+  BigNumber,
+  ChartBar,
+  ChartLine,
+  ZoomableChartBar,
+} from "~/components/primitives/charts/Charts";
 
 export default function Story() {
   return (
     <div className="grid grid-cols-2 gap-4 p-3">
+      <Card>
+        <Card.Header>
+          Zoomable Bar Chart
+          <Card.Accessory>
+            <Button variant="secondary/small">Example button</Button>
+          </Card.Accessory>
+        </Card.Header>
+        <Card.Content>
+          <ZoomableChartBar
+            config={barChartBigDatasetConfig}
+            data={barChartBigDatasetData}
+            dataKey="day"
+            referenceLine={{
+              value: 30000,
+              label: "Max concurrency",
+            }}
+          />
+        </Card.Content>
+      </Card>
       <Card>
         <Card.Header>Bar Chart – stacked</Card.Header>
         <Card.Content>

From e4210acf6412faa8fdf8ebf7e3ea338b7b9a334c Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Thu, 17 Apr 2025 11:08:10 +0100
Subject: [PATCH 032/137] =?UTF-8?q?Don=E2=80=99t=20select=20text=20when=20?=
 =?UTF-8?q?you=20drag=20on=20the=20chart?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/webapp/app/components/primitives/charts/Charts.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/webapp/app/components/primitives/charts/Charts.tsx b/apps/webapp/app/components/primitives/charts/Charts.tsx
index 6a87d6471d..1f6f41d84f 100644
--- a/apps/webapp/app/components/primitives/charts/Charts.tsx
+++ b/apps/webapp/app/components/primitives/charts/Charts.tsx
@@ -677,7 +677,7 @@ export function ZoomableChartBar({
       <div
         ref={containerRef}
         className="mt-8 h-[400px] w-full"
-        style={{ touchAction: "none" }}
+        style={{ touchAction: "none", userSelect: "none" }}
         onWheel={handleWheel}
       >
         <ChartContainer

From 2683b2403044c13415a87f05c650a4c158db67e5 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Thu, 17 Apr 2025 11:08:37 +0100
Subject: [PATCH 033/137] fixes legend numbers updating

---
 .../components/primitives/charts/Charts.tsx   | 81 +++++++++++++------
 1 file changed, 55 insertions(+), 26 deletions(-)

diff --git a/apps/webapp/app/components/primitives/charts/Charts.tsx b/apps/webapp/app/components/primitives/charts/Charts.tsx
index 1f6f41d84f..9604ec755f 100644
--- a/apps/webapp/app/components/primitives/charts/Charts.tsx
+++ b/apps/webapp/app/components/primitives/charts/Charts.tsx
@@ -26,10 +26,12 @@ import React from "react";
 import { Button } from "../Buttons";
 import { Paragraph } from "../Paragraph";
 
+//TODO: turn off all chart animations
+//TODO: set the chart data when zooming to only get the new start and end dates
+//TODO: make the text on the chart not selectable when zooming
 //TODO: do a better job of showing extra data in the legend - like in a table
-//TODO: hover over a bar and dim all other bars
-//TODO: drag on the chart to zoom in
-//TODO: render a vertical line that follows the mouse
+//TODO: render a vertical line that follows the mouse - show this on all charts
+//TODO: hover over a single bar in the stack and dim all other bars
 //TODO: fix the first and last bars not having rounded corners
 
 type ReferenceLineProps = {
@@ -187,15 +189,6 @@ export function ChartBar({
             content={<XAxisTooltip />}
             allowEscapeViewBox={{ x: false, y: true }}
           />
-          {referenceLine && (
-            <ReferenceLine
-              y={referenceLine.value}
-              label={referenceLine.label}
-              isFront={true}
-              stroke="#3B3E45"
-              strokeDasharray="4 4"
-            />
-          )}
           {dataKeys.map((key, index, array) => (
             <Bar
               key={key}
@@ -237,6 +230,16 @@ export function ChartBar({
               }}
             />
           ))}
+          {referenceLine && (
+            <ReferenceLine
+              y={referenceLine.value}
+              label={referenceLine.label}
+              isFront={true}
+              stroke="#3B3E45"
+              strokeDasharray="4 4"
+            />
+          )}
+
           <ChartLegend
             content={
               <ChartLegendContentRows
@@ -482,11 +485,24 @@ export function ZoomableChartBar({
   // Get all data keys except the x-axis key
   const dataKeys = Object.keys(config).filter((k) => k !== dataKey);
 
-  const currentData =
-    activePayload?.reduce((acc, item) => {
-      acc[item.dataKey] = item.value;
+  // Get current data for the legend based on hover state
+  const currentData = React.useMemo(() => {
+    if (!activePayload?.length) return totals;
+
+    // If we have activePayload data from hovering over a bar
+    const hoverData = activePayload.reduce((acc, item) => {
+      if (item.dataKey && item.value !== undefined) {
+        acc[item.dataKey] = item.value;
+      }
       return acc;
-    }, {} as Record<string, number>) ?? totals;
+    }, {} as Record<string, number>);
+
+    // Return a merged object - totals for keys not in the hover data
+    return {
+      ...totals,
+      ...hoverData,
+    };
+  }, [activePayload, totals]);
 
   const style = {
     ...Object.entries(opacity).reduce((acc, [key, value]) => {
@@ -693,7 +709,17 @@ export function ZoomableChartBar({
               barCategoryGap={1}
               className="pr-2"
               onMouseDown={handleMouseDown}
-              onMouseMove={handleMouseMove}
+              onMouseMove={(state: any) => {
+                // Handle both selection and active payload update
+                if (isSelecting && state?.activeLabel) {
+                  setRefAreaRight(state.activeLabel);
+                }
+
+                // Update active payload for legend
+                if (state?.activePayload?.length) {
+                  setActivePayload(state.activePayload);
+                }
+              }}
               onMouseUp={handleMouseUp}
               onMouseLeave={() => {
                 handleMouseUp();
@@ -739,15 +765,6 @@ export function ZoomableChartBar({
                 content={<XAxisTooltip />}
                 allowEscapeViewBox={{ x: false, y: true }}
               />
-              {referenceLine && (
-                <ReferenceLine
-                  y={referenceLine.value}
-                  label={referenceLine.label}
-                  isFront={true}
-                  stroke="#3B3E45"
-                  strokeDasharray="4 4"
-                />
-              )}
               {dataKeys.map((key, index, array) => (
                 <Bar
                   key={key}
@@ -787,8 +804,19 @@ export function ZoomableChartBar({
                       }, {} as Record<string, number>)
                     );
                   }}
+                  isAnimationActive={false}
                 />
               ))}
+              {referenceLine && (
+                <ReferenceLine
+                  y={referenceLine.value}
+                  label={referenceLine.label}
+                  isFront={true}
+                  stroke="#3B3E45"
+                  strokeDasharray="4 4"
+                />
+              )}
+
               {refAreaLeft && refAreaRight && (
                 <ReferenceArea
                   x1={refAreaLeft}
@@ -798,6 +826,7 @@ export function ZoomableChartBar({
                   fillOpacity={0.1}
                 />
               )}
+
               <ChartLegend
                 content={
                   <ChartLegendContentRows

From 45d723bf89b9dc72daa29b9141267d3d247d2f49 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Thu, 17 Apr 2025 11:18:33 +0100
Subject: [PATCH 034/137] Moves different charts to their own files

---
 .../primitives/charts/BigNumber.tsx           |  46 ++
 .../charts/{Charts.tsx => ChartBar.tsx}       | 510 +++++-------------
 .../primitives/charts/ChartLine.tsx           |  56 ++
 .../primitives/charts/ChartLoading.tsx        |   9 +
 .../app/routes/storybook.charts/route.tsx     |  10 +-
 5 files changed, 244 insertions(+), 387 deletions(-)
 create mode 100644 apps/webapp/app/components/primitives/charts/BigNumber.tsx
 rename apps/webapp/app/components/primitives/charts/{Charts.tsx => ChartBar.tsx} (71%)
 create mode 100644 apps/webapp/app/components/primitives/charts/ChartLine.tsx
 create mode 100644 apps/webapp/app/components/primitives/charts/ChartLoading.tsx

diff --git a/apps/webapp/app/components/primitives/charts/BigNumber.tsx b/apps/webapp/app/components/primitives/charts/BigNumber.tsx
new file mode 100644
index 0000000000..ab12e9326f
--- /dev/null
+++ b/apps/webapp/app/components/primitives/charts/BigNumber.tsx
@@ -0,0 +1,46 @@
+import { cn } from "~/utils/cn";
+import { AnimatedNumber } from "../AnimatedNumber";
+import { Spinner } from "../Spinner";
+
+interface BigNumberProps {
+  animate?: boolean;
+  loading?: boolean;
+  value?: number;
+  valueClassName?: string;
+  defaultValue?: number;
+  suffix?: string;
+  suffixClassName?: string;
+}
+
+export function BigNumber({
+  value,
+  defaultValue,
+  valueClassName,
+  suffix,
+  suffixClassName,
+  animate = false,
+  loading = false,
+}: BigNumberProps) {
+  const v = value ?? defaultValue;
+  return (
+    <div
+      className={cn(
+        "h-full text-[3.75rem] font-normal tabular-nums leading-none text-text-bright",
+        valueClassName
+      )}
+    >
+      {loading ? (
+        <div className="grid h-full place-items-center">
+          <Spinner className="size-6" />
+        </div>
+      ) : v !== undefined ? (
+        <div className="flex items-baseline gap-1">
+          {animate ? <AnimatedNumber value={v} /> : v}
+          {suffix && <div className={cn("text-xs", suffixClassName)}>{suffix}</div>}
+        </div>
+      ) : (
+        "–"
+      )}
+    </div>
+  );
+}
diff --git a/apps/webapp/app/components/primitives/charts/Charts.tsx b/apps/webapp/app/components/primitives/charts/ChartBar.tsx
similarity index 71%
rename from apps/webapp/app/components/primitives/charts/Charts.tsx
rename to apps/webapp/app/components/primitives/charts/ChartBar.tsx
index 9604ec755f..664ce57788 100644
--- a/apps/webapp/app/components/primitives/charts/Charts.tsx
+++ b/apps/webapp/app/components/primitives/charts/ChartBar.tsx
@@ -1,15 +1,14 @@
+import React from "react";
 import {
   Bar,
   BarChart,
   CartesianGrid,
   Line,
   LineChart,
-  Legend,
+  ReferenceArea,
+  ReferenceLine,
   XAxis,
   YAxis,
-  ReferenceLine,
-  ReferenceArea,
-  ResponsiveContainer,
 } from "recharts";
 import {
   type ChartConfig,
@@ -21,13 +20,13 @@ import {
 } from "~/components/primitives/charts/Chart";
 import { cn } from "~/utils/cn";
 import { AnimatedNumber } from "../AnimatedNumber";
-import { Spinner } from "../Spinner";
-import React from "react";
 import { Button } from "../Buttons";
 import { Paragraph } from "../Paragraph";
+import { Spinner } from "../Spinner";
+import { ChartLoading } from "./ChartLoading";
 
-//TODO: turn off all chart animations
 //TODO: set the chart data when zooming to only get the new start and end dates
+//TODO: turn off all chart animations
 //TODO: make the text on the chart not selectable when zooming
 //TODO: do a better job of showing extra data in the legend - like in a table
 //TODO: render a vertical line that follows the mouse - show this on all charts
@@ -40,379 +39,6 @@ type ReferenceLineProps = {
 };
 
 export function ChartBar({
-  config,
-  data,
-  dataKey,
-  loading = false,
-  maxLegendItems = 5,
-  referenceLine,
-}: {
-  config: ChartConfig;
-  data: any[];
-  dataKey: string;
-  loading?: boolean;
-  maxLegendItems?: number;
-  referenceLine?: ReferenceLineProps;
-}) {
-  const [opacity, setOpacity] = React.useState<Record<string, number>>({});
-  const [activePayload, setActivePayload] = React.useState<any[] | null>(null);
-  const [activeBarKey, setActiveBarKey] = React.useState<string | null>(null);
-
-  const dimmedOpacity = 0.2;
-  const animationDuration = 0.3;
-
-  // Calculate totals for each category
-  const totals = React.useMemo(() => {
-    return data.reduce((acc, item) => {
-      Object.entries(item).forEach(([key, value]) => {
-        if (key !== dataKey) {
-          acc[key] = (acc[key] || 0) + (value as number);
-        }
-      });
-      return acc;
-    }, {} as Record<string, number>);
-  }, [data, dataKey]);
-
-  // Handle opacity
-  React.useEffect(() => {
-    const initialOpacity = Object.keys(config).reduce((acc, key) => {
-      if (key !== dataKey) {
-        acc[key] = 1;
-      }
-      return acc;
-    }, {} as Record<string, number>);
-    setOpacity(initialOpacity);
-  }, [config, dataKey]);
-
-  // Get all data keys except the x-axis key
-  const dataKeys = Object.keys(config).filter((k) => k !== dataKey);
-
-  const currentData =
-    activePayload?.reduce((acc, item) => {
-      acc[item.dataKey] = item.value;
-      return acc;
-    }, {} as Record<string, number>) ?? totals;
-
-  const style = {
-    ...Object.entries(opacity).reduce((acc, [key, value]) => {
-      acc[`--opacity-${key}`] = value;
-      return acc;
-    }, {} as Record<string, string | number>),
-  } as React.CSSProperties;
-
-  // Prepare legend payload with capped items
-  const legendPayload = React.useMemo(() => {
-    const allPayload = dataKeys.map((key) => ({
-      dataKey: key,
-      type: "rect" as const,
-      color: config[key].color,
-      value: key,
-      payload: {} as any,
-    }));
-
-    if (allPayload.length <= maxLegendItems) {
-      return allPayload;
-    }
-
-    const visiblePayload = allPayload.slice(0, maxLegendItems);
-    const remainingCount = allPayload.length - maxLegendItems;
-
-    // If we're hovering over an item that's not visible in the legend,
-    // add it as a 6th item instead of showing the "view more" row
-    if (activeBarKey && !visiblePayload.some((item) => item.dataKey === activeBarKey)) {
-      const hoveredItem = allPayload.find((item) => item.dataKey === activeBarKey);
-      if (hoveredItem) {
-        return [...visiblePayload, hoveredItem];
-      }
-    }
-
-    // Otherwise show the "view more" row
-    return [
-      ...visiblePayload,
-      {
-        dataKey: "view-more",
-        type: "rect" as const,
-        color: "transparent",
-        value: "view-more",
-        payload: { remainingCount },
-      },
-    ];
-  }, [config, dataKeys, maxLegendItems, activeBarKey]);
-
-  return (
-    <ChartContainer
-      config={config}
-      className="min-h-full w-full [--transition-duration:300ms]"
-      style={style}
-    >
-      {loading ? (
-        <ChartLoading />
-      ) : (
-        <BarChart
-          accessibilityLayer
-          data={data}
-          barCategoryGap={1}
-          className="pr-2"
-          onMouseMove={(state: any) => {
-            if (state?.activePayload?.length > 0) {
-              setActivePayload(state.activePayload);
-            }
-          }}
-          onMouseLeave={() => {
-            setActiveBarKey(null);
-            setActivePayload(null);
-            setOpacity((op) =>
-              Object.keys(op).reduce((acc, k) => {
-                acc[k] = 1;
-                return acc;
-              }, {} as Record<string, number>)
-            );
-          }}
-        >
-          <CartesianGrid vertical={false} stroke="#272A2E" />
-          <XAxis
-            dataKey={dataKey}
-            tickLine={false}
-            tickMargin={10}
-            axisLine={false}
-            ticks={[data[0]?.[dataKey], data[data.length - 1]?.[dataKey]]}
-            tick={{ fill: "#878C99", fontSize: 11, style: { fontVariantNumeric: "tabular-nums" } }}
-          />
-          <YAxis
-            axisLine={false}
-            tickLine={false}
-            tickMargin={8}
-            tick={{ fill: "#878C99", fontSize: 11, style: { fontVariantNumeric: "tabular-nums" } }}
-          />
-          <ChartTooltip
-            cursor={{ fill: "#212327" }}
-            content={<XAxisTooltip />}
-            allowEscapeViewBox={{ x: false, y: true }}
-          />
-          {dataKeys.map((key, index, array) => (
-            <Bar
-              key={key}
-              dataKey={key}
-              stackId="a"
-              fill={`var(--color-${key})`}
-              radius={
-                [
-                  index === array.length - 1 ? 2 : 0,
-                  index === array.length - 1 ? 2 : 0,
-                  index === 0 ? 2 : 0,
-                  index === 0 ? 2 : 0,
-                ] as [number, number, number, number]
-              }
-              activeBar={false}
-              style={{ transition: "fill-opacity var(--transition-duration)" }}
-              fillOpacity={opacity[key]}
-              onMouseEnter={(data) => {
-                if (data.tooltipPayload?.[0]) {
-                  const { dataKey: hoveredKey } = data.tooltipPayload[0];
-                  setActiveBarKey(hoveredKey);
-                  setOpacity((op) =>
-                    Object.keys(op).reduce((acc, k) => {
-                      acc[k] = k === hoveredKey ? 1 : dimmedOpacity;
-                      return acc;
-                    }, {} as Record<string, number>)
-                  );
-                }
-              }}
-              onMouseLeave={() => {
-                setActiveBarKey(null);
-                setActivePayload(null);
-                setOpacity((op) =>
-                  Object.keys(op).reduce((acc, k) => {
-                    acc[k] = 1;
-                    return acc;
-                  }, {} as Record<string, number>)
-                );
-              }}
-            />
-          ))}
-          {referenceLine && (
-            <ReferenceLine
-              y={referenceLine.value}
-              label={referenceLine.label}
-              isFront={true}
-              stroke="#3B3E45"
-              strokeDasharray="4 4"
-            />
-          )}
-
-          <ChartLegend
-            content={
-              <ChartLegendContentRows
-                onMouseEnter={(data) => {
-                  if (data.dataKey === "view-more") return;
-                  setActiveBarKey(data.dataKey);
-                  setOpacity((op) =>
-                    Object.keys(op).reduce((acc, k) => {
-                      acc[k] = k === data.dataKey ? 1 : dimmedOpacity;
-                      return acc;
-                    }, {} as Record<string, number>)
-                  );
-                }}
-                onMouseLeave={() => {
-                  setActiveBarKey(null);
-                  setActivePayload(null);
-                  setOpacity((op) =>
-                    Object.keys(op).reduce((acc, k) => {
-                      acc[k] = 1;
-                      return acc;
-                    }, {} as Record<string, number>)
-                  );
-                }}
-                data={currentData}
-                animationDuration={animationDuration}
-                activeKey={activeBarKey}
-                payload={legendPayload}
-                renderViewMore={(remainingCount: number) => (
-                  <ViewAllDataRow key="view-more" remainingCount={remainingCount} />
-                )}
-              />
-            }
-            payload={legendPayload}
-          />
-        </BarChart>
-      )}
-    </ChartContainer>
-  );
-}
-
-export function ChartLine({
-  config,
-  data,
-  dataKey,
-  loading = false,
-}: {
-  config: ChartConfig;
-  data: any[];
-  dataKey: string;
-  loading?: boolean;
-}) {
-  return (
-    <ChartContainer config={config} className="min-h-[200px] w-full">
-      {loading ? (
-        <ChartLoading />
-      ) : (
-        <LineChart
-          accessibilityLayer
-          data={data}
-          margin={{
-            left: 12,
-            right: 12,
-          }}
-        >
-          <CartesianGrid vertical={false} stroke="#272A2E" />
-          <XAxis dataKey={dataKey} tickLine={false} axisLine={false} tickMargin={8} />
-          <YAxis axisLine={false} tickLine={false} tickMargin={8} />
-          <ChartTooltip cursor={false} content={<ChartTooltipContent />} />
-          <Line
-            dataKey="desktop"
-            type="step"
-            stroke="var(--color-desktop)"
-            strokeWidth={2}
-            dot={false}
-          />
-          <Line
-            dataKey="mobile"
-            type="step"
-            stroke="var(--color-mobile)"
-            strokeWidth={2}
-            dot={false}
-          />
-        </LineChart>
-      )}
-    </ChartContainer>
-  );
-}
-
-interface BigNumberProps {
-  animate?: boolean;
-  loading?: boolean;
-  value?: number;
-  valueClassName?: string;
-  defaultValue?: number;
-  suffix?: string;
-  suffixClassName?: string;
-}
-
-export function BigNumber({
-  value,
-  defaultValue,
-  valueClassName,
-  suffix,
-  suffixClassName,
-  animate = false,
-  loading = false,
-}: BigNumberProps) {
-  const v = value ?? defaultValue;
-  return (
-    <div
-      className={cn(
-        "h-full text-[3.75rem] font-normal tabular-nums leading-none text-text-bright",
-        valueClassName
-      )}
-    >
-      {loading ? (
-        <div className="grid h-full place-items-center">
-          <Spinner className="size-6" />
-        </div>
-      ) : v !== undefined ? (
-        <div className="flex items-baseline gap-1">
-          {animate ? <AnimatedNumber value={v} /> : v}
-          {suffix && <div className={cn("text-xs", suffixClassName)}>{suffix}</div>}
-        </div>
-      ) : (
-        "–"
-      )}
-    </div>
-  );
-}
-
-function ChartLoading() {
-  return (
-    <div className="grid h-full place-items-center">
-      <Spinner className="size-6" />
-    </div>
-  );
-}
-
-const XAxisTooltip = ({ active, payload, label, viewBox, coordinate }: any) => {
-  if (!active || !payload?.length) return null;
-
-  return (
-    <div
-      className="absolute whitespace-nowrap rounded border border-grid-bright bg-background-dimmed px-2 py-1 text-xxs tabular-nums text-text-dimmed"
-      style={{
-        left: coordinate?.x,
-        top: viewBox?.height + 14,
-        transform: "translateX(-50%)",
-      }}
-    >
-      {label}
-    </div>
-  );
-};
-
-function ViewAllDataRow({ remainingCount }: { remainingCount: number }) {
-  return (
-    <Button variant="minimal/small" fullWidth iconSpacing="justify-between" className="px-2 py-1">
-      <div className="flex items-center gap-1.5 text-text-dimmed">
-        <div className="h-3 w-1 rounded-[2px] border border-charcoal-600" />
-        <Paragraph variant="extra-small" className="tabular-nums">
-          {remainingCount} more…
-        </Paragraph>
-      </div>
-      <Paragraph variant="extra-small" className="text-indigo-500">
-        View all
-      </Paragraph>
-    </Button>
-  );
-}
-
-export function ZoomableChartBar({
   config,
   data: initialData,
   dataKey,
@@ -868,3 +494,127 @@ export function ZoomableChartBar({
     </div>
   );
 }
+
+export function ChartLine({
+  config,
+  data,
+  dataKey,
+  loading = false,
+}: {
+  config: ChartConfig;
+  data: any[];
+  dataKey: string;
+  loading?: boolean;
+}) {
+  return (
+    <ChartContainer config={config} className="min-h-[200px] w-full">
+      {loading ? (
+        <ChartLoading />
+      ) : (
+        <LineChart
+          accessibilityLayer
+          data={data}
+          margin={{
+            left: 12,
+            right: 12,
+          }}
+        >
+          <CartesianGrid vertical={false} stroke="#272A2E" />
+          <XAxis dataKey={dataKey} tickLine={false} axisLine={false} tickMargin={8} />
+          <YAxis axisLine={false} tickLine={false} tickMargin={8} />
+          <ChartTooltip cursor={false} content={<ChartTooltipContent />} />
+          <Line
+            dataKey="desktop"
+            type="step"
+            stroke="var(--color-desktop)"
+            strokeWidth={2}
+            dot={false}
+          />
+          <Line
+            dataKey="mobile"
+            type="step"
+            stroke="var(--color-mobile)"
+            strokeWidth={2}
+            dot={false}
+          />
+        </LineChart>
+      )}
+    </ChartContainer>
+  );
+}
+
+interface BigNumberProps {
+  animate?: boolean;
+  loading?: boolean;
+  value?: number;
+  valueClassName?: string;
+  defaultValue?: number;
+  suffix?: string;
+  suffixClassName?: string;
+}
+
+export function BigNumber({
+  value,
+  defaultValue,
+  valueClassName,
+  suffix,
+  suffixClassName,
+  animate = false,
+  loading = false,
+}: BigNumberProps) {
+  const v = value ?? defaultValue;
+  return (
+    <div
+      className={cn(
+        "h-full text-[3.75rem] font-normal tabular-nums leading-none text-text-bright",
+        valueClassName
+      )}
+    >
+      {loading ? (
+        <div className="grid h-full place-items-center">
+          <Spinner className="size-6" />
+        </div>
+      ) : v !== undefined ? (
+        <div className="flex items-baseline gap-1">
+          {animate ? <AnimatedNumber value={v} /> : v}
+          {suffix && <div className={cn("text-xs", suffixClassName)}>{suffix}</div>}
+        </div>
+      ) : (
+        "–"
+      )}
+    </div>
+  );
+}
+
+const XAxisTooltip = ({ active, payload, label, viewBox, coordinate }: any) => {
+  if (!active || !payload?.length) return null;
+
+  return (
+    <div
+      className="absolute whitespace-nowrap rounded border border-grid-bright bg-background-dimmed px-2 py-1 text-xxs tabular-nums text-text-dimmed"
+      style={{
+        left: coordinate?.x,
+        top: viewBox?.height + 14,
+        transform: "translateX(-50%)",
+      }}
+    >
+      {label}
+    </div>
+  );
+};
+
+function ViewAllDataRow({ remainingCount }: { remainingCount: number }) {
+  return (
+    <Button variant="minimal/small" fullWidth iconSpacing="justify-between" className="px-2 py-1">
+      <div className="flex items-center gap-1.5 text-text-dimmed">
+        <div className="h-3 w-1 rounded-[2px] border border-charcoal-600" />
+        <Paragraph variant="extra-small" className="tabular-nums">
+          {remainingCount} more…
+        </Paragraph>
+      </div>
+      <Paragraph variant="extra-small" className="text-indigo-500">
+        View all
+      </Paragraph>
+    </Button>
+  );
+}
diff --git a/apps/webapp/app/components/primitives/charts/ChartLine.tsx b/apps/webapp/app/components/primitives/charts/ChartLine.tsx
new file mode 100644
index 0000000000..b54ba29a0b
--- /dev/null
+++ b/apps/webapp/app/components/primitives/charts/ChartLine.tsx
@@ -0,0 +1,56 @@
+import { CartesianGrid, Line, LineChart, XAxis, YAxis } from "recharts";
+import {
+  type ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "~/components/primitives/charts/Chart";
+import { ChartLoading } from "./ChartLoading";
+
+export function ChartLine({
+  config,
+  data,
+  dataKey,
+  loading = false,
+}: {
+  config: ChartConfig;
+  data: any[];
+  dataKey: string;
+  loading?: boolean;
+}) {
+  return (
+    <ChartContainer config={config} className="min-h-[200px] w-full">
+      {loading ? (
+        <ChartLoading />
+      ) : (
+        <LineChart
+          accessibilityLayer
+          data={data}
+          margin={{
+            left: 12,
+            right: 12,
+          }}
+        >
+          <CartesianGrid vertical={false} stroke="#272A2E" />
+          <XAxis dataKey={dataKey} tickLine={false} axisLine={false} tickMargin={8} />
+          <YAxis axisLine={false} tickLine={false} tickMargin={8} />
+          <ChartTooltip cursor={false} content={<ChartTooltipContent />} />
+          <Line
+            dataKey="desktop"
+            type="step"
+            stroke="var(--color-desktop)"
+            strokeWidth={2}
+            dot={false}
+          />
+          <Line
+            dataKey="mobile"
+            type="step"
+            stroke="var(--color-mobile)"
+            strokeWidth={2}
+            dot={false}
+          />
+        </LineChart>
+      )}
+    </ChartContainer>
+  );
+}
diff --git a/apps/webapp/app/components/primitives/charts/ChartLoading.tsx b/apps/webapp/app/components/primitives/charts/ChartLoading.tsx
new file mode 100644
index 0000000000..0aafe0d2da
--- /dev/null
+++ b/apps/webapp/app/components/primitives/charts/ChartLoading.tsx
@@ -0,0 +1,9 @@
+import { Spinner } from "../Spinner";
+
+export function ChartLoading() {
+  return (
+    <div className="grid h-full place-items-center">
+      <Spinner className="size-6" />
+    </div>
+  );
+}
diff --git a/apps/webapp/app/routes/storybook.charts/route.tsx b/apps/webapp/app/routes/storybook.charts/route.tsx
index ebacbb4bbb..204f57b919 100644
--- a/apps/webapp/app/routes/storybook.charts/route.tsx
+++ b/apps/webapp/app/routes/storybook.charts/route.tsx
@@ -1,12 +1,8 @@
 import { Button } from "~/components/primitives/Buttons";
 import { Card } from "~/components/primitives/charts/Card";
 import { type ChartConfig } from "~/components/primitives/charts/Chart";
-import {
-  BigNumber,
-  ChartBar,
-  ChartLine,
-  ZoomableChartBar,
-} from "~/components/primitives/charts/Charts";
+import { BigNumber, ChartBar } from "~/components/primitives/charts/ChartBar";
+import { ChartLine } from "~/components/primitives/charts/ChartLine";
 
 export default function Story() {
   return (
@@ -19,7 +15,7 @@ export default function Story() {
           </Card.Accessory>
         </Card.Header>
         <Card.Content>
-          <ZoomableChartBar
+          <ChartBar
             config={barChartBigDatasetConfig}
             data={barChartBigDatasetData}
             dataKey="day"

From 0177404409c39c43f9b83e13c67579bdd466d9cb Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Thu, 17 Apr 2025 11:19:26 +0100
Subject: [PATCH 035/137] Turn off chart animations

---
 apps/webapp/app/components/primitives/charts/ChartBar.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/apps/webapp/app/components/primitives/charts/ChartBar.tsx b/apps/webapp/app/components/primitives/charts/ChartBar.tsx
index 664ce57788..dd8eeb5516 100644
--- a/apps/webapp/app/components/primitives/charts/ChartBar.tsx
+++ b/apps/webapp/app/components/primitives/charts/ChartBar.tsx
@@ -26,7 +26,6 @@ import { Spinner } from "../Spinner";
 import { ChartLoading } from "./ChartLoading";
 
 //TODO: set the chart data when zooming to only get the new start and end dates
-//TODO: turn off all chart animations
 //TODO: make the text on the chart not selectable when zooming
 //TODO: do a better job of showing extra data in the legend - like in a table
 //TODO: render a vertical line that follows the mouse - show this on all charts

From d6623502bd6c8622473d65c169e920e753f72640 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Thu, 17 Apr 2025 11:19:51 +0100
Subject: [PATCH 036/137] Todo update

---
 apps/webapp/app/components/primitives/charts/ChartBar.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/webapp/app/components/primitives/charts/ChartBar.tsx b/apps/webapp/app/components/primitives/charts/ChartBar.tsx
index dd8eeb5516..bf110e819d 100644
--- a/apps/webapp/app/components/primitives/charts/ChartBar.tsx
+++ b/apps/webapp/app/components/primitives/charts/ChartBar.tsx
@@ -28,7 +28,7 @@ import { ChartLoading } from "./ChartLoading";
 //TODO: set the chart data when zooming to only get the new start and end dates
 //TODO: make the text on the chart not selectable when zooming
 //TODO: do a better job of showing extra data in the legend - like in a table
-//TODO: render a vertical line that follows the mouse - show this on all charts
+//TODO: render a vertical line that follows the mouse - show this on all charts. Use a reference line
 //TODO: hover over a single bar in the stack and dim all other bars
 //TODO: fix the first and last bars not having rounded corners
 

From 13e4163d95b04a8743c01eef7fda2fd58b28b98b Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Wed, 23 Apr 2025 17:07:24 +0100
Subject: [PATCH 037/137] storybook chart page updates

---
 apps/webapp/app/routes/storybook.charts/route.tsx | 12 +++---------
 1 file changed, 3 insertions(+), 9 deletions(-)

diff --git a/apps/webapp/app/routes/storybook.charts/route.tsx b/apps/webapp/app/routes/storybook.charts/route.tsx
index 204f57b919..ec5273cb6e 100644
--- a/apps/webapp/app/routes/storybook.charts/route.tsx
+++ b/apps/webapp/app/routes/storybook.charts/route.tsx
@@ -9,7 +9,7 @@ export default function Story() {
     <div className="grid grid-cols-2 gap-4 p-3">
       <Card>
         <Card.Header>
-          Zoomable Bar Chart
+          Bar Chart 1
           <Card.Accessory>
             <Button variant="secondary/small">Example button</Button>
           </Card.Accessory>
@@ -27,7 +27,7 @@ export default function Story() {
         </Card.Content>
       </Card>
       <Card>
-        <Card.Header>Bar Chart – stacked</Card.Header>
+        <Card.Header>Bar Chart 2</Card.Header>
         <Card.Content>
           <ChartBar
             config={barChartConfig}
@@ -41,13 +41,7 @@ export default function Story() {
         </Card.Content>
       </Card>
       <Card>
-        <Card.Header>Bar Chart – big dataset</Card.Header>
-        <Card.Content>
-          <ChartBar config={barChartBigDatasetConfig} data={barChartBigDatasetData} dataKey="day" />
-        </Card.Content>
-      </Card>
-      <Card>
-        <Card.Header>Line Chart – stepped</Card.Header>
+        <Card.Header>Line Chart</Card.Header>
         <Card.Content>
           <ChartLine config={lineChartConfig} data={lineChartData} dataKey="day" />
         </Card.Content>

From 14fc44ef54a18daae7904735433a456fe07f4613 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Wed, 23 Apr 2025 17:18:19 +0100
Subject: [PATCH 038/137] Sets the chart data when zooming to only get the new
 start and end dates

---
 .../components/primitives/charts/ChartBar.tsx | 66 ++++++++++---------
 1 file changed, 36 insertions(+), 30 deletions(-)

diff --git a/apps/webapp/app/components/primitives/charts/ChartBar.tsx b/apps/webapp/app/components/primitives/charts/ChartBar.tsx
index bf110e819d..53a9a90557 100644
--- a/apps/webapp/app/components/primitives/charts/ChartBar.tsx
+++ b/apps/webapp/app/components/primitives/charts/ChartBar.tsx
@@ -25,12 +25,10 @@ import { Paragraph } from "../Paragraph";
 import { Spinner } from "../Spinner";
 import { ChartLoading } from "./ChartLoading";
 
-//TODO: set the chart data when zooming to only get the new start and end dates
-//TODO: make the text on the chart not selectable when zooming
-//TODO: do a better job of showing extra data in the legend - like in a table
-//TODO: render a vertical line that follows the mouse - show this on all charts. Use a reference line
 //TODO: hover over a single bar in the stack and dim all other bars
-//TODO: fix the first and last bars not having rounded corners
+//TODO: render a vertical line that follows the mouse - show this on all charts. Use a reference line
+//TODO: do a better job of showing extra data in the legend - like in a table
+//TODO: fix the first and last bars in a stack not having rounded corners
 
 type ReferenceLineProps = {
   value: number;
@@ -59,17 +57,24 @@ export function ChartBar({
   // Zoom state
   const [refAreaLeft, setRefAreaLeft] = React.useState<string | null>(null);
   const [refAreaRight, setRefAreaRight] = React.useState<string | null>(null);
-  const [data, setData] = React.useState<any[]>(initialData);
+  const [startIndex, setStartIndex] = React.useState<number>(0);
+  const [endIndex, setEndIndex] = React.useState<number>(initialData.length - 1);
   const [originalData, setOriginalData] = React.useState<any[]>(initialData);
   const [isSelecting, setIsSelecting] = React.useState(false);
   const [zoomMessage, setZoomMessage] = React.useState<string | null>(null);
   const containerRef = React.useRef<HTMLDivElement>(null);
   const zoomMessageTimeoutRef = React.useRef<number | null>(null);
 
+  // Compute the visible data based on the current zoom indices
+  const data = React.useMemo(() => {
+    return originalData.slice(startIndex, endIndex + 1);
+  }, [originalData, startIndex, endIndex]);
+
   // Initialize data
   React.useEffect(() => {
-    setData(initialData);
     setOriginalData(initialData);
+    setStartIndex(0);
+    setEndIndex(initialData.length - 1);
   }, [initialData]);
 
   // Clear zoom message timeout on unmount
@@ -218,9 +223,10 @@ export function ChartBar({
       if (end - start <= 1) {
         showZoomMessage("Selection too small to zoom");
       } else {
-        // Update the data with the zoomed range
+        // Update the start and end indices
         if (start !== -1 && end !== -1) {
-          setData(originalData.slice(start, end + 1));
+          setStartIndex(start);
+          setEndIndex(end);
         }
       }
     }
@@ -232,7 +238,8 @@ export function ChartBar({
 
   // Reset zoom
   const handleReset = () => {
-    setData(originalData);
+    setStartIndex(0);
+    setEndIndex(originalData.length - 1);
     setZoomMessage(null);
   };
 
@@ -246,14 +253,16 @@ export function ChartBar({
     const direction = e.deltaY < 0 ? 1 : -1; // 1 for zoom in, -1 for zoom out
 
     // If zooming out and we're already at the original data set, do nothing
-    if (direction < 0 && data.length === originalData.length) {
+    if (direction < 0 && startIndex === 0 && endIndex === originalData.length - 1) {
       showZoomMessage("Maximum zoom out reached");
       return;
     }
 
+    const currentDataLength = endIndex - startIndex + 1;
+
     // If zooming in and we can't zoom in any further, do nothing
     const MIN_VISIBLE_ITEMS = 3;
-    if (direction > 0 && data.length <= MIN_VISIBLE_ITEMS) {
+    if (direction > 0 && currentDataLength <= MIN_VISIBLE_ITEMS) {
       showZoomMessage("Maximum zoom in reached");
       return;
     }
@@ -265,40 +274,37 @@ export function ChartBar({
     const mousePercentage = Math.max(0, Math.min(1, mouseX / chartWidth));
 
     // Calculate how many items to add/remove
-    const removeCount = Math.max(1, Math.floor(data.length * zoomFactor * Math.abs(direction)));
+    const removeCount = Math.max(
+      1,
+      Math.floor(currentDataLength * zoomFactor * Math.abs(direction))
+    );
 
     if (direction > 0) {
       // Zoom in - remove items from both sides based on mouse position
       const leftRemove = Math.max(0, Math.floor(removeCount * mousePercentage));
       const rightRemove = Math.max(0, removeCount - leftRemove);
 
-      const newStartIndex = Math.min(leftRemove, data.length - MIN_VISIBLE_ITEMS);
-      const newEndIndex = Math.max(MIN_VISIBLE_ITEMS - 1, data.length - rightRemove - 1);
+      const newStartIndex = Math.min(startIndex + leftRemove, endIndex - MIN_VISIBLE_ITEMS + 1);
+      const newEndIndex = Math.max(startIndex + MIN_VISIBLE_ITEMS - 1, endIndex - rightRemove);
 
       if (newEndIndex - newStartIndex >= MIN_VISIBLE_ITEMS - 1) {
-        setData(data.slice(newStartIndex, newEndIndex + 1));
+        setStartIndex(newStartIndex);
+        setEndIndex(newEndIndex);
       } else {
         showZoomMessage("Maximum zoom in reached");
       }
     } else {
       // Zoom out - add items from original data
-      // Find where current data starts in original data
-      const currentFirstItem = data[0][dataKey];
-      const currentLastItem = data[data.length - 1][dataKey];
-      let startIdx = originalData.findIndex((item) => item[dataKey] === currentFirstItem);
-      let endIdx = originalData.findIndex((item) => item[dataKey] === currentLastItem);
-
-      if (startIdx === -1 || endIdx === -1) return;
-
       // Calculate how many items to add on each side based on mouse position
       const leftAdd = Math.floor(removeCount * mousePercentage);
       const rightAdd = removeCount - leftAdd;
 
       // Expand the range
-      startIdx = Math.max(0, startIdx - leftAdd);
-      endIdx = Math.min(originalData.length - 1, endIdx + rightAdd);
+      const newStartIndex = Math.max(0, startIndex - leftAdd);
+      const newEndIndex = Math.min(originalData.length - 1, endIndex + rightAdd);
 
-      setData(originalData.slice(startIdx, endIdx + 1));
+      setStartIndex(newStartIndex);
+      setEndIndex(newEndIndex);
     }
   };
 
@@ -309,7 +315,7 @@ export function ChartBar({
         <Button
           variant="secondary/small"
           onClick={handleReset}
-          disabled={data.length === originalData.length}
+          disabled={startIndex === 0 && endIndex === originalData.length - 1}
         >
           Reset Zoom
         </Button>
@@ -446,9 +452,9 @@ export function ChartBar({
                 <ReferenceArea
                   x1={refAreaLeft}
                   x2={refAreaRight}
-                  strokeOpacity={0.3}
+                  strokeOpacity={0.4}
                   fill="#3B82F6"
-                  fillOpacity={0.1}
+                  fillOpacity={0.2}
                 />
               )}
 

From f703ee931c9a416a804c008cfb807bac7a633b09 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Wed, 23 Apr 2025 17:33:15 +0100
Subject: [PATCH 039/137] Hovering over a single bar in a stack highlights only
 that bar

---
 .../components/primitives/charts/ChartBar.tsx | 161 ++++++++----------
 1 file changed, 72 insertions(+), 89 deletions(-)

diff --git a/apps/webapp/app/components/primitives/charts/ChartBar.tsx b/apps/webapp/app/components/primitives/charts/ChartBar.tsx
index 53a9a90557..9e32626ee0 100644
--- a/apps/webapp/app/components/primitives/charts/ChartBar.tsx
+++ b/apps/webapp/app/components/primitives/charts/ChartBar.tsx
@@ -3,6 +3,7 @@ import {
   Bar,
   BarChart,
   CartesianGrid,
+  Cell,
   Line,
   LineChart,
   ReferenceArea,
@@ -25,7 +26,6 @@ import { Paragraph } from "../Paragraph";
 import { Spinner } from "../Spinner";
 import { ChartLoading } from "./ChartLoading";
 
-//TODO: hover over a single bar in the stack and dim all other bars
 //TODO: render a vertical line that follows the mouse - show this on all charts. Use a reference line
 //TODO: do a better job of showing extra data in the legend - like in a table
 //TODO: fix the first and last bars in a stack not having rounded corners
@@ -50,9 +50,9 @@ export function ChartBar({
   maxLegendItems?: number;
   referenceLine?: ReferenceLineProps;
 }) {
-  const [opacity, setOpacity] = React.useState<Record<string, number>>({});
   const [activePayload, setActivePayload] = React.useState<any[] | null>(null);
   const [activeBarKey, setActiveBarKey] = React.useState<string | null>(null);
+  const [activeDataPointIndex, setActiveDataPointIndex] = React.useState<number | null>(null);
 
   // Zoom state
   const [refAreaLeft, setRefAreaLeft] = React.useState<string | null>(null);
@@ -101,17 +101,6 @@ export function ChartBar({
     }, {} as Record<string, number>);
   }, [data, dataKey]);
 
-  // Handle opacity
-  React.useEffect(() => {
-    const initialOpacity = Object.keys(config).reduce((acc, key) => {
-      if (key !== dataKey) {
-        acc[key] = 1;
-      }
-      return acc;
-    }, {} as Record<string, number>);
-    setOpacity(initialOpacity);
-  }, [config, dataKey]);
-
   // Get all data keys except the x-axis key
   const dataKeys = Object.keys(config).filter((k) => k !== dataKey);
 
@@ -134,12 +123,12 @@ export function ChartBar({
     };
   }, [activePayload, totals]);
 
-  const style = {
-    ...Object.entries(opacity).reduce((acc, [key, value]) => {
-      acc[`--opacity-${key}`] = value;
-      return acc;
-    }, {} as Record<string, string | number>),
-  } as React.CSSProperties;
+  // Reset all highlight states
+  const resetHighlightState = () => {
+    setActiveBarKey(null);
+    setActiveDataPointIndex(null);
+    setActivePayload(null);
+  };
 
   // Prepare legend payload with capped items
   const legendPayload = React.useMemo(() => {
@@ -327,11 +316,7 @@ export function ChartBar({
         style={{ touchAction: "none", userSelect: "none" }}
         onWheel={handleWheel}
       >
-        <ChartContainer
-          config={config}
-          className="h-full w-full [--transition-duration:300ms]"
-          style={style}
-        >
+        <ChartContainer config={config} className="h-full w-full">
           {loading ? (
             <ChartLoading />
           ) : (
@@ -354,14 +339,7 @@ export function ChartBar({
               onMouseUp={handleMouseUp}
               onMouseLeave={() => {
                 handleMouseUp();
-                setActiveBarKey(null);
-                setActivePayload(null);
-                setOpacity((op) =>
-                  Object.keys(op).reduce((acc, k) => {
-                    acc[k] = 1;
-                    return acc;
-                  }, {} as Record<string, number>)
-                );
+                resetHighlightState();
               }}
             >
               <CartesianGrid vertical={false} stroke="#272A2E" />
@@ -396,48 +374,67 @@ export function ChartBar({
                 content={<XAxisTooltip />}
                 allowEscapeViewBox={{ x: false, y: true }}
               />
-              {dataKeys.map((key, index, array) => (
-                <Bar
-                  key={key}
-                  dataKey={key}
-                  stackId="a"
-                  fill={`var(--color-${key})`}
-                  radius={
-                    [
-                      index === array.length - 1 ? 2 : 0,
-                      index === array.length - 1 ? 2 : 0,
-                      index === 0 ? 2 : 0,
-                      index === 0 ? 2 : 0,
-                    ] as [number, number, number, number]
-                  }
-                  activeBar={false}
-                  style={{ transition: "fill-opacity var(--transition-duration)" }}
-                  fillOpacity={opacity[key]}
-                  onMouseEnter={(data) => {
-                    if (data.tooltipPayload?.[0]) {
-                      const { dataKey: hoveredKey } = data.tooltipPayload[0];
-                      setActiveBarKey(hoveredKey);
-                      setOpacity((op) =>
-                        Object.keys(op).reduce((acc, k) => {
-                          acc[k] = k === hoveredKey ? 1 : dimmedOpacity;
-                          return acc;
-                        }, {} as Record<string, number>)
-                      );
+              {dataKeys.map((key, index, array) => {
+                // Create individual bars with custom opacity based on hover state
+                return (
+                  <Bar
+                    key={key}
+                    dataKey={key}
+                    stackId="a"
+                    fill={config[key].color}
+                    radius={
+                      [
+                        index === array.length - 1 ? 2 : 0,
+                        index === array.length - 1 ? 2 : 0,
+                        index === 0 ? 2 : 0,
+                        index === 0 ? 2 : 0,
+                      ] as [number, number, number, number]
                     }
-                  }}
-                  onMouseLeave={() => {
-                    setActiveBarKey(null);
-                    setActivePayload(null);
-                    setOpacity((op) =>
-                      Object.keys(op).reduce((acc, k) => {
-                        acc[k] = 1;
-                        return acc;
-                      }, {} as Record<string, number>)
-                    );
-                  }}
-                  isAnimationActive={false}
-                />
-              ))}
+                    activeBar={false}
+                    style={{ transition: `fill-opacity ${animationDuration}s` }}
+                    fillOpacity={1} // We'll use a custom Cell component to handle opacity
+                    onMouseEnter={(entry, index) => {
+                      if (entry.tooltipPayload?.[0]) {
+                        const { dataKey: hoveredKey } = entry.tooltipPayload[0];
+                        setActiveBarKey(hoveredKey);
+                        setActiveDataPointIndex(index);
+                      }
+                    }}
+                    onMouseLeave={resetHighlightState}
+                    isAnimationActive={false}
+                  >
+                    {/* Add cells to customize opacity for each individual bar */}
+                    {data.map((_, dataIndex) => {
+                      // Calculate opacity for this specific bar
+                      // If we have an active bar (either by hovering a bar or a legend item)
+                      let opacity = 1;
+
+                      // Case 1: Hovering a specific bar
+                      if (activeBarKey !== null && activeDataPointIndex !== null) {
+                        // Only show full opacity for the exact bar being hovered
+                        opacity =
+                          key === activeBarKey && dataIndex === activeDataPointIndex
+                            ? 1
+                            : dimmedOpacity;
+                      }
+                      // Case 2: Hovering a legend item
+                      else if (activeBarKey !== null && activeDataPointIndex === null) {
+                        // Show all bars of this type with full opacity
+                        opacity = key === activeBarKey ? 1 : dimmedOpacity;
+                      }
+                      // Otherwise, no active bar - all bars have full opacity
+
+                      return (
+                        <Cell
+                          key={`cell-${key}-${dataIndex}`}
+                          fill={config[key].color}
+                          fillOpacity={opacity}
+                        />
+                      );
+                    })}
+                  </Bar>
+                );
+              })}
               {referenceLine && (
                 <ReferenceLine
                   y={referenceLine.value}
@@ -464,23 +461,9 @@ export function ChartBar({
                     onMouseEnter={(data) => {
                       if (data.dataKey === "view-more") return;
                       setActiveBarKey(data.dataKey);
-                      setOpacity((op) =>
-                        Object.keys(op).reduce((acc, k) => {
-                          acc[k] = k === data.dataKey ? 1 : dimmedOpacity;
-                          return acc;
-                        }, {} as Record<string, number>)
-                      );
-                    }}
-                    onMouseLeave={() => {
-                      setActiveBarKey(null);
-                      setActivePayload(null);
-                      setOpacity((op) =>
-                        Object.keys(op).reduce((acc, k) => {
-                          acc[k] = 1;
-                          return acc;
-                        }, {} as Record<string, number>)
-                      );
+                      setActiveDataPointIndex(null); // Reset this when hovering over legend
                     }}
+                    onMouseLeave={resetHighlightState}
                     data={currentData}
                     animationDuration={animationDuration}
                     activeKey={activeBarKey}

From 27ca5fbb62f7f52e31e457aafd49112135ac4f49 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Wed, 23 Apr 2025 17:54:42 +0100
Subject: [PATCH 040/137] When dragging to select a zoom range, show the dates
 that will be selected

---
 .../components/primitives/charts/ChartBar.tsx | 41 +++++++++++++++++--
 1 file changed, 38 insertions(+), 3 deletions(-)

diff --git a/apps/webapp/app/components/primitives/charts/ChartBar.tsx b/apps/webapp/app/components/primitives/charts/ChartBar.tsx
index 9e32626ee0..f386517665 100644
--- a/apps/webapp/app/components/primitives/charts/ChartBar.tsx
+++ b/apps/webapp/app/components/primitives/charts/ChartBar.tsx
@@ -29,6 +29,7 @@ import { ChartLoading } from "./ChartLoading";
 //TODO: render a vertical line that follows the mouse - show this on all charts. Use a reference line
 //TODO: do a better job of showing extra data in the legend - like in a table
 //TODO: fix the first and last bars in a stack not having rounded corners
+//TODO: change the cursor to a crosshair when hovering over the chart
 
 type ReferenceLineProps = {
   value: number;
@@ -371,7 +372,13 @@ export function ChartBar({
               />
               <ChartTooltip
                 cursor={{ fill: "#212327" }}
-                content={<XAxisTooltip />}
+                content={
+                  <XAxisTooltip
+                    isSelecting={isSelecting}
+                    refAreaLeft={refAreaLeft}
+                    refAreaRight={refAreaRight}
+                  />
+                }
                 allowEscapeViewBox={{ x: false, y: true }}
               />
               {dataKeys.map((key, index, array) => {
@@ -574,8 +581,36 @@ export function BigNumber({
   );
 }
 
-const XAxisTooltip = ({ active, payload, label, viewBox, coordinate }: any) => {
-  if (!active || !payload?.length) return null;
+const XAxisTooltip = ({
+  active,
+  payload,
+  label,
+  viewBox,
+  coordinate,
+  isSelecting,
+  refAreaLeft,
+  refAreaRight,
+}: any) => {
+  if (!active) return null;
+
+  // Show zoom range when selecting
+  if (isSelecting && refAreaLeft && refAreaRight) {
+    return (
+      <div
+        className="absolute whitespace-nowrap rounded border border-blue-800 bg-[#1B2334] px-2 py-1 text-xxs tabular-nums text-blue-400"
+        style={{
+          left: coordinate?.x,
+          top: viewBox?.height + 14,
+          transform: "translateX(-50%)",
+        }}
+      >
+        Zoom: {refAreaLeft} to {refAreaRight}
+      </div>
+    );
+  }
+
+  // Default tooltip behavior (show label)
+  if (!payload?.length) return null;
 
   return (
     <div

From 2129422783f538efd8d153efd092560740e496e3 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Wed, 23 Apr 2025 18:06:02 +0100
Subject: [PATCH 041/137] Remove the mouse scroll wheel to zoom

---
 .../components/primitives/charts/ChartBar.tsx | 67 +------------------
 1 file changed, 1 insertion(+), 66 deletions(-)

diff --git a/apps/webapp/app/components/primitives/charts/ChartBar.tsx b/apps/webapp/app/components/primitives/charts/ChartBar.tsx
index f386517665..df0c70183b 100644
--- a/apps/webapp/app/components/primitives/charts/ChartBar.tsx
+++ b/apps/webapp/app/components/primitives/charts/ChartBar.tsx
@@ -30,6 +30,7 @@ import { ChartLoading } from "./ChartLoading";
 //TODO: do a better job of showing extra data in the legend - like in a table
 //TODO: fix the first and last bars in a stack not having rounded corners
 //TODO: change the cursor to a crosshair when hovering over the chart
+//TODO: make a nice loading state for the chart
 
 type ReferenceLineProps = {
   value: number;
@@ -233,71 +234,6 @@ export function ChartBar({
     setZoomMessage(null);
   };
 
-  // Handle wheel zoom
-  const handleWheel = (e: React.WheelEvent<HTMLDivElement>) => {
-    e.preventDefault();
-
-    if (!containerRef.current) return;
-
-    const zoomFactor = 0.1;
-    const direction = e.deltaY < 0 ? 1 : -1; // 1 for zoom in, -1 for zoom out
-
-    // If zooming out and we're already at the original data set, do nothing
-    if (direction < 0 && startIndex === 0 && endIndex === originalData.length - 1) {
-      showZoomMessage("Maximum zoom out reached");
-      return;
-    }
-
-    const currentDataLength = endIndex - startIndex + 1;
-
-    // If zooming in and we can't zoom in any further, do nothing
-    const MIN_VISIBLE_ITEMS = 3;
-    if (direction > 0 && currentDataLength <= MIN_VISIBLE_ITEMS) {
-      showZoomMessage("Maximum zoom in reached");
-      return;
-    }
-
-    // Get chart bounds and mouse position
-    const chartRect = containerRef.current.getBoundingClientRect();
-    const mouseX = e.clientX - chartRect.left;
-    const chartWidth = chartRect.width;
-    const mousePercentage = Math.max(0, Math.min(1, mouseX / chartWidth));
-
-    // Calculate how many items to add/remove
-    const removeCount = Math.max(
-      1,
-      Math.floor(currentDataLength * zoomFactor * Math.abs(direction))
-    );
-
-    if (direction > 0) {
-      // Zoom in - remove items from both sides based on mouse position
-      const leftRemove = Math.max(0, Math.floor(removeCount * mousePercentage));
-      const rightRemove = Math.max(0, removeCount - leftRemove);
-
-      const newStartIndex = Math.min(startIndex + leftRemove, endIndex - MIN_VISIBLE_ITEMS + 1);
-      const newEndIndex = Math.max(startIndex + MIN_VISIBLE_ITEMS - 1, endIndex - rightRemove);
-
-      if (newEndIndex - newStartIndex >= MIN_VISIBLE_ITEMS - 1) {
-        setStartIndex(newStartIndex);
-        setEndIndex(newEndIndex);
-      } else {
-        showZoomMessage("Maximum zoom in reached");
-      }
-    } else {
-      // Zoom out - add items from original data
-      // Calculate how many items to add on each side based on mouse position
-      const leftAdd = Math.floor(removeCount * mousePercentage);
-      const rightAdd = removeCount - leftAdd;
-
-      // Expand the range
-      const newStartIndex = Math.max(0, startIndex - leftAdd);
-      const newEndIndex = Math.min(originalData.length - 1, endIndex + rightAdd);
-
-      setStartIndex(newStartIndex);
-      setEndIndex(newEndIndex);
-    }
-  };
-
   return (
     <div className="relative flex w-full flex-col">
       <div className="absolute left-0 right-0 top-0 z-10 mb-2 flex items-center justify-between">
@@ -315,7 +251,6 @@ export function ChartBar({
         ref={containerRef}
         className="mt-8 h-[400px] w-full"
         style={{ touchAction: "none", userSelect: "none" }}
-        onWheel={handleWheel}
       >
         <ChartContainer config={config} className="h-full w-full">
           {loading ? (

From 0556d8bfd52c1d21924ec4f4eab0ec9d794944bb Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Wed, 23 Apr 2025 18:10:05 +0100
Subject: [PATCH 042/137] Removes the animation transition when you hover over
 the bars

---
 apps/webapp/app/components/primitives/charts/ChartBar.tsx | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/apps/webapp/app/components/primitives/charts/ChartBar.tsx b/apps/webapp/app/components/primitives/charts/ChartBar.tsx
index df0c70183b..3be56ba820 100644
--- a/apps/webapp/app/components/primitives/charts/ChartBar.tsx
+++ b/apps/webapp/app/components/primitives/charts/ChartBar.tsx
@@ -89,7 +89,6 @@ export function ChartBar({
   }, []);
 
   const dimmedOpacity = 0.2;
-  const animationDuration = 0.3;
 
   // Calculate totals for each category
   const totals = React.useMemo(() => {
@@ -333,7 +332,6 @@ export function ChartBar({
                       ] as [number, number, number, number]
                     }
                     activeBar={false}
-                    style={{ transition: `fill-opacity ${animationDuration}s` }}
                     fillOpacity={1} // We'll use a custom Cell component to handle opacity
                     onMouseEnter={(entry, index) => {
                       if (entry.tooltipPayload?.[0]) {
@@ -407,7 +405,6 @@ export function ChartBar({
                     }}
                     onMouseLeave={resetHighlightState}
                     data={currentData}
-                    animationDuration={animationDuration}
                     activeKey={activeBarKey}
                     payload={legendPayload}
                     renderViewMore={(remainingCount: number) => (

From a03a3f1e32bef7460a8dba3171195f15a04066b6 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Thu, 24 Apr 2025 10:21:19 +0100
Subject: [PATCH 043/137] Removes old example charts

---
 .../components/primitives/charts/ChartBar.tsx | 94 +------------------
 .../app/routes/storybook.charts/route.tsx     |  3 +-
 2 files changed, 4 insertions(+), 93 deletions(-)

diff --git a/apps/webapp/app/components/primitives/charts/ChartBar.tsx b/apps/webapp/app/components/primitives/charts/ChartBar.tsx
index 3be56ba820..714fe85b9e 100644
--- a/apps/webapp/app/components/primitives/charts/ChartBar.tsx
+++ b/apps/webapp/app/components/primitives/charts/ChartBar.tsx
@@ -31,6 +31,7 @@ import { ChartLoading } from "./ChartLoading";
 //TODO: fix the first and last bars in a stack not having rounded corners
 //TODO: change the cursor to a crosshair when hovering over the chart
 //TODO: make a nice loading state for the chart
+//TODO: make a nice no data state for the chart with 'clear filters' button
 
 type ReferenceLineProps = {
   value: number;
@@ -248,7 +249,7 @@ export function ChartBar({
 
       <div
         ref={containerRef}
-        className="mt-8 h-[400px] w-full"
+        className="mt-8 h-[400px] w-full cursor-crosshair"
         style={{ touchAction: "none", userSelect: "none" }}
       >
         <ChartContainer config={config} className="h-full w-full">
@@ -422,97 +423,6 @@ export function ChartBar({
   );
 }
 
-export function ChartLine({
-  config,
-  data,
-  dataKey,
-  loading = false,
-}: {
-  config: ChartConfig;
-  data: any[];
-  dataKey: string;
-  loading?: boolean;
-}) {
-  return (
-    <ChartContainer config={config} className="min-h-[200px] w-full">
-      {loading ? (
-        <ChartLoading />
-      ) : (
-        <LineChart
-          accessibilityLayer
-          data={data}
-          margin={{
-            left: 12,
-            right: 12,
-          }}
-        >
-          <CartesianGrid vertical={false} stroke="#272A2E" />
-          <XAxis dataKey={dataKey} tickLine={false} axisLine={false} tickMargin={8} />
-          <YAxis axisLine={false} tickLine={false} tickMargin={8} />
-          <ChartTooltip cursor={false} content={<ChartTooltipContent />} />
-          <Line
-            dataKey="desktop"
-            type="step"
-            stroke="var(--color-desktop)"
-            strokeWidth={2}
-            dot={false}
-          />
-          <Line
-            dataKey="mobile"
-            type="step"
-            stroke="var(--color-mobile)"
-            strokeWidth={2}
-            dot={false}
-          />
-        </LineChart>
-      )}
-    </ChartContainer>
-  );
-}
-
-interface BigNumberProps {
-  animate?: boolean;
-  loading?: boolean;
-  value?: number;
-  valueClassName?: string;
-  defaultValue?: number;
-  suffix?: string;
-  suffixClassName?: string;
-}
-
-export function BigNumber({
-  value,
-  defaultValue,
-  valueClassName,
-  suffix,
-  suffixClassName,
-  animate = false,
-  loading = false,
-}: BigNumberProps) {
-  const v = value ?? defaultValue;
-  return (
-    <div
-      className={cn(
-        "h-full text-[3.75rem] font-normal tabular-nums leading-none text-text-bright",
-        valueClassName
-      )}
-    >
-      {loading ? (
-        <div className="grid h-full place-items-center">
-          <Spinner className="size-6" />
-        </div>
-      ) : v !== undefined ? (
-        <div className="flex items-baseline gap-1">
-          {animate ? <AnimatedNumber value={v} /> : v}
-          {suffix && <div className={cn("text-xs", suffixClassName)}>{suffix}</div>}
-        </div>
-      ) : (
-        "–"
-      )}
-    </div>
-  );
-}
-
 const XAxisTooltip = ({
   active,
   payload,
diff --git a/apps/webapp/app/routes/storybook.charts/route.tsx b/apps/webapp/app/routes/storybook.charts/route.tsx
index ec5273cb6e..e4c43e026a 100644
--- a/apps/webapp/app/routes/storybook.charts/route.tsx
+++ b/apps/webapp/app/routes/storybook.charts/route.tsx
@@ -1,7 +1,8 @@
 import { Button } from "~/components/primitives/Buttons";
+import { BigNumber } from "~/components/primitives/charts/BigNumber";
 import { Card } from "~/components/primitives/charts/Card";
 import { type ChartConfig } from "~/components/primitives/charts/Chart";
-import { BigNumber, ChartBar } from "~/components/primitives/charts/ChartBar";
+import { ChartBar } from "~/components/primitives/charts/ChartBar";
 import { ChartLine } from "~/components/primitives/charts/ChartLine";
 
 export default function Story() {

From d6135a44a4de4a94de8912cfd977f2f30fa0f9df Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Thu, 24 Apr 2025 11:51:46 +0100
Subject: [PATCH 044/137] Tidy imports

---
 apps/webapp/app/components/primitives/charts/ChartBar.tsx | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/apps/webapp/app/components/primitives/charts/ChartBar.tsx b/apps/webapp/app/components/primitives/charts/ChartBar.tsx
index 714fe85b9e..543a2e61c7 100644
--- a/apps/webapp/app/components/primitives/charts/ChartBar.tsx
+++ b/apps/webapp/app/components/primitives/charts/ChartBar.tsx
@@ -4,8 +4,6 @@ import {
   BarChart,
   CartesianGrid,
   Cell,
-  Line,
-  LineChart,
   ReferenceArea,
   ReferenceLine,
   XAxis,
@@ -17,13 +15,9 @@ import {
   ChartLegend,
   ChartLegendContentRows,
   ChartTooltip,
-  ChartTooltipContent,
 } from "~/components/primitives/charts/Chart";
-import { cn } from "~/utils/cn";
-import { AnimatedNumber } from "../AnimatedNumber";
 import { Button } from "../Buttons";
 import { Paragraph } from "../Paragraph";
-import { Spinner } from "../Spinner";
 import { ChartLoading } from "./ChartLoading";
 
 //TODO: render a vertical line that follows the mouse - show this on all charts. Use a reference line

From 0c86cea1daba9a9422bb479b3f28ae215866c959 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Thu, 24 Apr 2025 11:51:55 +0100
Subject: [PATCH 045/137] Fix import for bigNumber


From 62b96d4c88a3cfc9b744d893f4e161f958d0e891 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Thu, 24 Apr 2025 12:01:00 +0100
Subject: [PATCH 046/137] Improves the ReferenceLine look and behviour

---
 .../webapp/app/components/primitives/charts/ChartBar.tsx | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/apps/webapp/app/components/primitives/charts/ChartBar.tsx b/apps/webapp/app/components/primitives/charts/ChartBar.tsx
index 543a2e61c7..8848e253d3 100644
--- a/apps/webapp/app/components/primitives/charts/ChartBar.tsx
+++ b/apps/webapp/app/components/primitives/charts/ChartBar.tsx
@@ -298,6 +298,7 @@ export function ChartBar({
                   fontSize: 11,
                   style: { fontVariantNumeric: "tabular-nums" },
                 }}
+                domain={["auto", (dataMax: number) => dataMax * 1.2]}
               />
               <ChartTooltip
                 cursor={{ fill: "#212327" }}
@@ -373,10 +374,16 @@ export function ChartBar({
               {referenceLine && (
                 <ReferenceLine
                   y={referenceLine.value}
-                  label={referenceLine.label}
+                  label={{
+                    position: "top",
+                    value: referenceLine.label,
+                    fill: "#878C99",
+                    fontSize: 11,
+                  }}
                   isFront={true}
                   stroke="#3B3E45"
                   strokeDasharray="4 4"
+                  className="pointer-events-none"
                 />
               )}
 

From c38929dac20a74ab1a6d7de3e4b053595b3d137d Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Thu, 24 Apr 2025 12:07:18 +0100
Subject: [PATCH 047/137] =?UTF-8?q?Don=E2=80=99t=20dim=20the=20chart=20bar?=
 =?UTF-8?q?s=20when=20dragging=20to=20zoom?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/primitives/charts/ChartBar.tsx | 30 ++++++++++---------
 1 file changed, 16 insertions(+), 14 deletions(-)

diff --git a/apps/webapp/app/components/primitives/charts/ChartBar.tsx b/apps/webapp/app/components/primitives/charts/ChartBar.tsx
index 8848e253d3..aaaf7cbd34 100644
--- a/apps/webapp/app/components/primitives/charts/ChartBar.tsx
+++ b/apps/webapp/app/components/primitives/charts/ChartBar.tsx
@@ -339,26 +339,28 @@ export function ChartBar({
                     onMouseLeave={resetHighlightState}
                     isAnimationActive={false}
                   >
-                    {/* Add cells to customize opacity for each individual bar */}
                     {data.map((_, dataIndex) => {
                       // Calculate opacity for this specific bar
                       // If we have an active bar (either by hovering a bar or a legend item)
                       let opacity = 1;
 
-                      // Case 1: Hovering a specific bar
-                      if (activeBarKey !== null && activeDataPointIndex !== null) {
-                        // Only show full opacity for the exact bar being hovered
-                        opacity =
-                          key === activeBarKey && dataIndex === activeDataPointIndex
-                            ? 1
-                            : dimmedOpacity;
+                      // Only apply dimming if we're not in zoom selection mode
+                      if (!isSelecting) {
+                        // Hovering a specific bar
+                        if (activeBarKey !== null && activeDataPointIndex !== null) {
+                          // Only show full opacity for the exact bar being hovered
+                          opacity =
+                            key === activeBarKey && dataIndex === activeDataPointIndex
+                              ? 1
+                              : dimmedOpacity;
+                        }
+                        // Hovering a legend item
+                        else if (activeBarKey !== null && activeDataPointIndex === null) {
+                          // Show all bars of this type with full opacity
+                          opacity = key === activeBarKey ? 1 : dimmedOpacity;
+                        }
+                        // Otherwise, no active bar - all bars have full opacity
                       }
-                      // Case 2: Hovering a legend item
-                      else if (activeBarKey !== null && activeDataPointIndex === null) {
-                        // Show all bars of this type with full opacity
-                        opacity = key === activeBarKey ? 1 : dimmedOpacity;
-                      }
-                      // Otherwise, no active bar - all bars have full opacity
 
                       return (
                         <Cell

From 3ac937bd47a1d326cd2e858dcc42c4372f820505 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Thu, 24 Apr 2025 12:18:46 +0100
Subject: [PATCH 048/137] Clean up the mouseMove function + add crosshair mouse
 pointer

---
 .../components/primitives/charts/ChartBar.tsx | 30 ++++++++-----------
 1 file changed, 13 insertions(+), 17 deletions(-)

diff --git a/apps/webapp/app/components/primitives/charts/ChartBar.tsx b/apps/webapp/app/components/primitives/charts/ChartBar.tsx
index aaaf7cbd34..5940eabf2c 100644
--- a/apps/webapp/app/components/primitives/charts/ChartBar.tsx
+++ b/apps/webapp/app/components/primitives/charts/ChartBar.tsx
@@ -189,9 +189,15 @@ export function ChartBar({
 
   // Handle mouse move for drag zooming
   const handleMouseMove = (e: any) => {
-    if (isSelecting && e.activeLabel) {
+    // Handle both selection and active payload update
+    if (isSelecting && e?.activeLabel) {
       setRefAreaRight(e.activeLabel);
     }
+
+    // Update active payload for legend
+    if (e?.activePayload?.length) {
+      setActivePayload(e.activePayload);
+    }
   };
 
   // Handle mouse up for drag zooming
@@ -246,7 +252,10 @@ export function ChartBar({
         className="mt-8 h-[400px] w-full cursor-crosshair"
         style={{ touchAction: "none", userSelect: "none" }}
       >
-        <ChartContainer config={config} className="h-full w-full">
+        <ChartContainer
+          config={config}
+          className="h-full w-full [&_.recharts-surface]:cursor-crosshair [&_.recharts-wrapper]:cursor-crosshair"
+        >
           {loading ? (
             <ChartLoading />
           ) : (
@@ -255,17 +264,7 @@ export function ChartBar({
               barCategoryGap={1}
               className="pr-2"
               onMouseDown={handleMouseDown}
-              onMouseMove={(state: any) => {
-                // Handle both selection and active payload update
-                if (isSelecting && state?.activeLabel) {
-                  setRefAreaRight(state.activeLabel);
-                }
-
-                // Update active payload for legend
-                if (state?.activePayload?.length) {
-                  setActivePayload(state.activePayload);
-                }
-              }}
+              onMouseMove={handleMouseMove}
               onMouseUp={handleMouseUp}
               onMouseLeave={() => {
                 handleMouseUp();
@@ -328,7 +327,7 @@ export function ChartBar({
                       ] as [number, number, number, number]
                     }
                     activeBar={false}
-                    fillOpacity={1} // We'll use a custom Cell component to handle opacity
+                    fillOpacity={1}
                     onMouseEnter={(entry, index) => {
                       if (entry.tooltipPayload?.[0]) {
                         const { dataKey: hoveredKey } = entry.tooltipPayload[0];
@@ -340,8 +339,6 @@ export function ChartBar({
                     isAnimationActive={false}
                   >
                     {data.map((_, dataIndex) => {
-                      // Calculate opacity for this specific bar
-                      // If we have an active bar (either by hovering a bar or a legend item)
                       let opacity = 1;
 
                       // Only apply dimming if we're not in zoom selection mode
@@ -359,7 +356,6 @@ export function ChartBar({
                           // Show all bars of this type with full opacity
                           opacity = key === activeBarKey ? 1 : dimmedOpacity;
                         }
-                        // Otherwise, no active bar - all bars have full opacity
                       }
 
                       return (

From 411b1e57b0826f8755687493ba14db44a37fb5c5 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Thu, 24 Apr 2025 13:51:09 +0100
Subject: [PATCH 049/137] Speed up the animating numbers

---
 apps/webapp/app/components/primitives/charts/Chart.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/apps/webapp/app/components/primitives/charts/Chart.tsx b/apps/webapp/app/components/primitives/charts/Chart.tsx
index ee423964fb..c03ca65178 100644
--- a/apps/webapp/app/components/primitives/charts/Chart.tsx
+++ b/apps/webapp/app/components/primitives/charts/Chart.tsx
@@ -308,7 +308,6 @@ const ChartLegendContentRows = React.forwardRef<
       onMouseEnter?: (e: any) => void;
       onMouseLeave?: (e: any) => void;
       data?: Record<string, number>;
-      animationDuration?: number;
       activeKey?: string | null;
       renderViewMore?: (remainingCount: number) => React.ReactNode;
     }
@@ -323,7 +322,6 @@ const ChartLegendContentRows = React.forwardRef<
       onMouseEnter,
       onMouseLeave,
       data,
-      animationDuration,
       activeKey,
       renderViewMore,
     },
@@ -406,7 +404,7 @@ const ChartLegendContentRows = React.forwardRef<
                       activeKey === item.dataKey ? "text-text-bright" : "text-text-dimmed"
                     )}
                   >
-                    <AnimatedNumber value={total} duration={animationDuration} />
+                    <AnimatedNumber value={total} duration={0.25} />
                   </span>
                 )}
               </div>

From b0189375b7fa663761a56b5e6bf3954aa132d50f Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Thu, 24 Apr 2025 13:51:16 +0100
Subject: [PATCH 050/137] Todo updates

---
 apps/webapp/app/components/primitives/charts/ChartBar.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/apps/webapp/app/components/primitives/charts/ChartBar.tsx b/apps/webapp/app/components/primitives/charts/ChartBar.tsx
index 5940eabf2c..39266ab3b0 100644
--- a/apps/webapp/app/components/primitives/charts/ChartBar.tsx
+++ b/apps/webapp/app/components/primitives/charts/ChartBar.tsx
@@ -25,7 +25,8 @@ import { ChartLoading } from "./ChartLoading";
 //TODO: fix the first and last bars in a stack not having rounded corners
 //TODO: change the cursor to a crosshair when hovering over the chart
 //TODO: make a nice loading state for the chart
-//TODO: make a nice no data state for the chart with 'clear filters' button
+//TODO: make a nice "No data: There's no data available for your filters" for the chart with 'clear filters' button
+//TODO: make a nice "Chart invalid: The current filters are preventing this chart from being displayed." state for the chart with 'clear filters' button
 
 type ReferenceLineProps = {
   value: number;

From 3dc1a938df443fec13481a59d809753006b71f8c Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Thu, 24 Apr 2025 14:06:19 +0100
Subject: [PATCH 051/137] Show a message if the zoom range is too small

---
 .../components/primitives/charts/ChartBar.tsx | 60 +++++++++----------
 1 file changed, 28 insertions(+), 32 deletions(-)

diff --git a/apps/webapp/app/components/primitives/charts/ChartBar.tsx b/apps/webapp/app/components/primitives/charts/ChartBar.tsx
index 39266ab3b0..8d1189dff2 100644
--- a/apps/webapp/app/components/primitives/charts/ChartBar.tsx
+++ b/apps/webapp/app/components/primitives/charts/ChartBar.tsx
@@ -59,9 +59,8 @@ export function ChartBar({
   const [endIndex, setEndIndex] = React.useState<number>(initialData.length - 1);
   const [originalData, setOriginalData] = React.useState<any[]>(initialData);
   const [isSelecting, setIsSelecting] = React.useState(false);
-  const [zoomMessage, setZoomMessage] = React.useState<string | null>(null);
+  const [invalidSelection, setInvalidSelection] = React.useState(false);
   const containerRef = React.useRef<HTMLDivElement>(null);
-  const zoomMessageTimeoutRef = React.useRef<number | null>(null);
 
   // Compute the visible data based on the current zoom indices
   const data = React.useMemo(() => {
@@ -75,15 +74,6 @@ export function ChartBar({
     setEndIndex(initialData.length - 1);
   }, [initialData]);
 
-  // Clear zoom message timeout on unmount
-  React.useEffect(() => {
-    return () => {
-      if (zoomMessageTimeoutRef.current !== null) {
-        window.clearTimeout(zoomMessageTimeoutRef.current);
-      }
-    };
-  }, []);
-
   const dimmedOpacity = 0.2;
 
   // Calculate totals for each category
@@ -166,20 +156,6 @@ export function ChartBar({
     ];
   }, [config, dataKeys, maxLegendItems, activeBarKey]);
 
-  // Show zoom message with auto-dismiss
-  const showZoomMessage = (message: string) => {
-    setZoomMessage(message);
-
-    if (zoomMessageTimeoutRef.current !== null) {
-      window.clearTimeout(zoomMessageTimeoutRef.current);
-    }
-
-    zoomMessageTimeoutRef.current = window.setTimeout(() => {
-      setZoomMessage(null);
-      zoomMessageTimeoutRef.current = null;
-    }, 2000);
-  };
-
   // Handle mouse down for drag zooming
   const handleMouseDown = (e: any) => {
     if (e.activeLabel) {
@@ -193,6 +169,16 @@ export function ChartBar({
     // Handle both selection and active payload update
     if (isSelecting && e?.activeLabel) {
       setRefAreaRight(e.activeLabel);
+
+      // Check if selection is likely to be too small
+      if (refAreaLeft) {
+        const leftIndex = originalData.findIndex((item) => item[dataKey] === refAreaLeft);
+        const rightIndex = originalData.findIndex((item) => item[dataKey] === e.activeLabel);
+        const [start, end] = [leftIndex, rightIndex].sort((a, b) => a - b);
+
+        // Mark as invalid if the selection is too small
+        setInvalidSelection(end - start <= 1);
+      }
     }
 
     // Update active payload for legend
@@ -213,7 +199,7 @@ export function ChartBar({
 
       // Check if the selection is too small
       if (end - start <= 1) {
-        showZoomMessage("Selection too small to zoom");
+        // We don't need to show a message here anymore as it's shown in the tooltip
       } else {
         // Update the start and end indices
         if (start !== -1 && end !== -1) {
@@ -226,19 +212,18 @@ export function ChartBar({
     setRefAreaLeft(null);
     setRefAreaRight(null);
     setIsSelecting(false);
+    setInvalidSelection(false);
   };
 
   // Reset zoom
   const handleReset = () => {
     setStartIndex(0);
     setEndIndex(originalData.length - 1);
-    setZoomMessage(null);
   };
 
   return (
     <div className="relative flex w-full flex-col">
-      <div className="absolute left-0 right-0 top-0 z-10 mb-2 flex items-center justify-between">
-        {zoomMessage ? <div className="text-xs text-amber-500">{zoomMessage}</div> : <div></div>}
+      <div className="absolute left-0 right-0 top-0 z-10 mb-2 flex items-center justify-end">
         <Button
           variant="secondary/small"
           onClick={handleReset}
@@ -250,7 +235,7 @@ export function ChartBar({
 
       <div
         ref={containerRef}
-        className="mt-8 h-[400px] w-full cursor-crosshair"
+        className="mt-8 h-full w-full cursor-crosshair"
         style={{ touchAction: "none", userSelect: "none" }}
       >
         <ChartContainer
@@ -307,6 +292,7 @@ export function ChartBar({
                     isSelecting={isSelecting}
                     refAreaLeft={refAreaLeft}
                     refAreaRight={refAreaRight}
+                    invalidSelection={invalidSelection}
                   />
                 }
                 allowEscapeViewBox={{ x: false, y: true }}
@@ -432,21 +418,31 @@ const XAxisTooltip = ({
   isSelecting,
   refAreaLeft,
   refAreaRight,
+  invalidSelection,
 }: any) => {
   if (!active) return null;
 
   // Show zoom range when selecting
   if (isSelecting && refAreaLeft && refAreaRight) {
+    // Show warning message if selection is too small
+    const message = invalidSelection
+      ? "Zoom: Drag a wider range"
+      : `Zoom: ${refAreaLeft} to ${refAreaRight}`;
+
     return (
       <div
-        className="absolute whitespace-nowrap rounded border border-blue-800 bg-[#1B2334] px-2 py-1 text-xxs tabular-nums text-blue-400"
+        className={`absolute whitespace-nowrap rounded border px-2 py-1 text-xxs tabular-nums ${
+          invalidSelection
+            ? "border-amber-800 bg-amber-950 text-amber-400"
+            : "border-blue-800 bg-[#1B2334] text-blue-400"
+        }`}
         style={{
           left: coordinate?.x,
           top: viewBox?.height + 14,
           transform: "translateX(-50%)",
         }}
       >
-        Zoom: {refAreaLeft} to {refAreaRight}
+        {message}
       </div>
     );
   }

From f90e6015bd8f7b6510b66b5d2c6cd4f7db82b498 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Thu, 24 Apr 2025 14:07:40 +0100
Subject: [PATCH 052/137] todos update

---
 apps/webapp/app/components/primitives/charts/ChartBar.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/webapp/app/components/primitives/charts/ChartBar.tsx b/apps/webapp/app/components/primitives/charts/ChartBar.tsx
index 8d1189dff2..19514073a6 100644
--- a/apps/webapp/app/components/primitives/charts/ChartBar.tsx
+++ b/apps/webapp/app/components/primitives/charts/ChartBar.tsx
@@ -20,10 +20,10 @@ import { Button } from "../Buttons";
 import { Paragraph } from "../Paragraph";
 import { ChartLoading } from "./ChartLoading";
 
+//TODO: have the date range data work across all charts
 //TODO: render a vertical line that follows the mouse - show this on all charts. Use a reference line
 //TODO: do a better job of showing extra data in the legend - like in a table
 //TODO: fix the first and last bars in a stack not having rounded corners
-//TODO: change the cursor to a crosshair when hovering over the chart
 //TODO: make a nice loading state for the chart
 //TODO: make a nice "No data: There's no data available for your filters" for the chart with 'clear filters' button
 //TODO: make a nice "Chart invalid: The current filters are preventing this chart from being displayed." state for the chart with 'clear filters' button

From 9479a7bac2d3e85bfb8ab18cd68bee652a2e98c5 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Thu, 24 Apr 2025 14:13:45 +0100
Subject: [PATCH 053/137] Bar stack is more visible

---
 apps/webapp/app/components/primitives/charts/ChartBar.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/webapp/app/components/primitives/charts/ChartBar.tsx b/apps/webapp/app/components/primitives/charts/ChartBar.tsx
index 19514073a6..c40443416f 100644
--- a/apps/webapp/app/components/primitives/charts/ChartBar.tsx
+++ b/apps/webapp/app/components/primitives/charts/ChartBar.tsx
@@ -286,7 +286,7 @@ export function ChartBar({
                 domain={["auto", (dataMax: number) => dataMax * 1.2]}
               />
               <ChartTooltip
-                cursor={{ fill: "#212327" }}
+                cursor={{ fill: "#2C3034" }}
                 content={
                   <XAxisTooltip
                     isSelecting={isSelecting}

From cfa2fb82de4077eb988ee7da24a5df8cab7e2669 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Thu, 24 Apr 2025 15:49:32 +0100
Subject: [PATCH 054/137] Move the date data up to the route so all charts can
 update when zooming

---
 .../components/primitives/charts/ChartBar.tsx | 171 +++-
 .../primitives/charts/ChartLine.tsx           |  75 +-
 .../primitives/charts/DateRangeContext.tsx    |  67 ++
 .../app/routes/storybook.charts/route.tsx     | 762 +++++++++++++-----
 4 files changed, 816 insertions(+), 259 deletions(-)
 create mode 100644 apps/webapp/app/components/primitives/charts/DateRangeContext.tsx

diff --git a/apps/webapp/app/components/primitives/charts/ChartBar.tsx b/apps/webapp/app/components/primitives/charts/ChartBar.tsx
index c40443416f..5a1c7a373f 100644
--- a/apps/webapp/app/components/primitives/charts/ChartBar.tsx
+++ b/apps/webapp/app/components/primitives/charts/ChartBar.tsx
@@ -19,8 +19,8 @@ import {
 import { Button } from "../Buttons";
 import { Paragraph } from "../Paragraph";
 import { ChartLoading } from "./ChartLoading";
+import { useDateRange } from "./DateRangeContext";
 
-//TODO: have the date range data work across all charts
 //TODO: render a vertical line that follows the mouse - show this on all charts. Use a reference line
 //TODO: do a better job of showing extra data in the legend - like in a table
 //TODO: fix the first and last bars in a stack not having rounded corners
@@ -40,6 +40,7 @@ export function ChartBar({
   loading = false,
   maxLegendItems = 5,
   referenceLine,
+  useGlobalDateRange = false,
 }: {
   config: ChartConfig;
   data: any[];
@@ -47,32 +48,79 @@ export function ChartBar({
   loading?: boolean;
   maxLegendItems?: number;
   referenceLine?: ReferenceLineProps;
+  useGlobalDateRange?: boolean;
 }) {
+  const globalDateRange = useDateRange();
   const [activePayload, setActivePayload] = React.useState<any[] | null>(null);
   const [activeBarKey, setActiveBarKey] = React.useState<string | null>(null);
   const [activeDataPointIndex, setActiveDataPointIndex] = React.useState<number | null>(null);
 
-  // Zoom state
+  // Zoom state (only used when not using global date range)
   const [refAreaLeft, setRefAreaLeft] = React.useState<string | null>(null);
   const [refAreaRight, setRefAreaRight] = React.useState<string | null>(null);
-  const [startIndex, setStartIndex] = React.useState<number>(0);
-  const [endIndex, setEndIndex] = React.useState<number>(initialData.length - 1);
-  const [originalData, setOriginalData] = React.useState<any[]>(initialData);
+  const [localStartIndex, setLocalStartIndex] = React.useState<number>(0);
+  const [localEndIndex, setLocalEndIndex] = React.useState<number>(initialData.length - 1);
+  const [localOriginalData, setLocalOriginalData] = React.useState<any[]>(initialData);
   const [isSelecting, setIsSelecting] = React.useState(false);
   const [invalidSelection, setInvalidSelection] = React.useState(false);
   const containerRef = React.useRef<HTMLDivElement>(null);
 
-  // Compute the visible data based on the current zoom indices
+  // Update local data when initialData changes and we're not using global
+  React.useEffect(() => {
+    if (!useGlobalDateRange) {
+      setLocalOriginalData(initialData);
+      setLocalStartIndex(0);
+      setLocalEndIndex(initialData.length - 1);
+    }
+  }, [initialData, useGlobalDateRange]);
+
+  // Compute the visible data based on the zoom settings
   const data = React.useMemo(() => {
-    return originalData.slice(startIndex, endIndex + 1);
-  }, [originalData, startIndex, endIndex]);
+    if (useGlobalDateRange) {
+      // Filter data based on global date range
+      // Check if we have valid chart data
+      if (initialData.length === 0) return [];
+
+      // Get a sorted list of all available day values
+      const allDays = initialData
+        .map((item) => item[dataKey] as string)
+        .filter(Boolean)
+        .sort();
+
+      // Check if our date range is in the available dates
+      const startDateIndex = allDays.findIndex((day) => day === globalDateRange.startDate);
+      const endDateIndex = allDays.findIndex((day) => day === globalDateRange.endDate);
+
+      // If we can't find the exact dates, just return all data
+      if (startDateIndex === -1 || endDateIndex === -1) {
+        console.warn(
+          `Date range not found in data. Start: ${globalDateRange.startDate}, End: ${globalDateRange.endDate}`
+        );
+        console.log("Available dates:", allDays);
+        return initialData;
+      }
 
-  // Initialize data
-  React.useEffect(() => {
-    setOriginalData(initialData);
-    setStartIndex(0);
-    setEndIndex(initialData.length - 1);
-  }, [initialData]);
+      // Filter to only include items within the range
+      return initialData.filter((item) => {
+        const itemDate = item[dataKey] as string;
+        const itemIndex = allDays.indexOf(itemDate);
+        // Include if the day is within the range (inclusive)
+        return itemIndex >= startDateIndex && itemIndex <= endDateIndex;
+      });
+    } else {
+      // Use local date range for individual chart zoom
+      return localOriginalData.slice(localStartIndex, localEndIndex + 1);
+    }
+  }, [
+    initialData,
+    useGlobalDateRange,
+    globalDateRange.startDate,
+    globalDateRange.endDate,
+    localOriginalData,
+    localStartIndex,
+    localEndIndex,
+    dataKey,
+  ]);
 
   const dimmedOpacity = 0.2;
 
@@ -172,12 +220,21 @@ export function ChartBar({
 
       // Check if selection is likely to be too small
       if (refAreaLeft) {
-        const leftIndex = originalData.findIndex((item) => item[dataKey] === refAreaLeft);
-        const rightIndex = originalData.findIndex((item) => item[dataKey] === e.activeLabel);
-        const [start, end] = [leftIndex, rightIndex].sort((a, b) => a - b);
+        // Get indices from original data
+        const dataArray = useGlobalDateRange ? initialData : localOriginalData;
+        const allDays = dataArray.map((item) => item[dataKey] as string).filter(Boolean);
+
+        const leftIndex = allDays.indexOf(refAreaLeft);
+        const rightIndex = allDays.indexOf(e.activeLabel);
+
+        if (leftIndex !== -1 && rightIndex !== -1) {
+          const [start, end] = [leftIndex, rightIndex].sort((a, b) => a - b);
 
-        // Mark as invalid if the selection is too small
-        setInvalidSelection(end - start <= 1);
+          // Mark as invalid if the selection is too small (less than 3 data points)
+          setInvalidSelection(end - start < 2);
+        } else {
+          setInvalidSelection(true);
+        }
       }
     }
 
@@ -190,21 +247,44 @@ export function ChartBar({
   // Handle mouse up for drag zooming
   const handleMouseUp = () => {
     if (refAreaLeft && refAreaRight) {
-      // Get indices of the selected range
-      const leftIndex = originalData.findIndex((item) => item[dataKey] === refAreaLeft);
-      const rightIndex = originalData.findIndex((item) => item[dataKey] === refAreaRight);
+      // If global date range, update the context
+      if (useGlobalDateRange) {
+        // Get indices from original data
+        const allDays = initialData.map((item) => item[dataKey] as string).filter(Boolean);
+
+        const leftIndex = allDays.indexOf(refAreaLeft);
+        const rightIndex = allDays.indexOf(refAreaRight);
+
+        if (leftIndex !== -1 && rightIndex !== -1) {
+          const [start, end] = [leftIndex, rightIndex].sort((a, b) => a - b);
+
+          // Only update if selection is valid (at least 3 data points)
+          if (end - start >= 2) {
+            // Get the actual date values at these sorted indexes
+            const startDate = allDays[start];
+            const endDate = allDays[end];
+
+            // Set the global date range using these ordered dates
+            globalDateRange.setDateRange(startDate, endDate);
+          }
+        }
+      } else {
+        // Get indices of the selected range for local zoom
+        const leftIndex = localOriginalData.findIndex((item) => item[dataKey] === refAreaLeft);
+        const rightIndex = localOriginalData.findIndex((item) => item[dataKey] === refAreaRight);
 
-      // Ensure left is less than right
-      const [start, end] = [leftIndex, rightIndex].sort((a, b) => a - b);
+        // Ensure left is less than right
+        const [start, end] = [leftIndex, rightIndex].sort((a, b) => a - b);
 
-      // Check if the selection is too small
-      if (end - start <= 1) {
-        // We don't need to show a message here anymore as it's shown in the tooltip
-      } else {
-        // Update the start and end indices
-        if (start !== -1 && end !== -1) {
-          setStartIndex(start);
-          setEndIndex(end);
+        // Check if the selection is too small (less than 3 data points)
+        if (end - start < 2) {
+          // Don't update the range if it's too small
+        } else {
+          // Update the start and end indices
+          if (start !== -1 && end !== -1) {
+            setLocalStartIndex(start);
+            setLocalEndIndex(end);
+          }
         }
       }
     }
@@ -217,21 +297,26 @@ export function ChartBar({
 
   // Reset zoom
   const handleReset = () => {
-    setStartIndex(0);
-    setEndIndex(originalData.length - 1);
+    if (useGlobalDateRange) {
+      globalDateRange.resetDateRange();
+    } else {
+      setLocalStartIndex(0);
+      setLocalEndIndex(localOriginalData.length - 1);
+    }
   };
 
+  // Determine if the reset button should be enabled for local zoom
+  const isLocalZoomed = localStartIndex !== 0 || localEndIndex !== localOriginalData.length - 1;
+
   return (
     <div className="relative flex w-full flex-col">
-      <div className="absolute left-0 right-0 top-0 z-10 mb-2 flex items-center justify-end">
-        <Button
-          variant="secondary/small"
-          onClick={handleReset}
-          disabled={startIndex === 0 && endIndex === originalData.length - 1}
-        >
-          Reset Zoom
-        </Button>
-      </div>
+      {!useGlobalDateRange && (
+        <div className="absolute left-0 right-0 top-0 z-10 mb-2 flex items-center justify-end">
+          <Button variant="secondary/small" onClick={handleReset} disabled={!isLocalZoomed}>
+            Reset Zoom
+          </Button>
+        </div>
+      )}
 
       <div
         ref={containerRef}
diff --git a/apps/webapp/app/components/primitives/charts/ChartLine.tsx b/apps/webapp/app/components/primitives/charts/ChartLine.tsx
index b54ba29a0b..53db5fa7a7 100644
--- a/apps/webapp/app/components/primitives/charts/ChartLine.tsx
+++ b/apps/webapp/app/components/primitives/charts/ChartLine.tsx
@@ -1,3 +1,4 @@
+import React from "react";
 import { CartesianGrid, Line, LineChart, XAxis, YAxis } from "recharts";
 import {
   type ChartConfig,
@@ -6,18 +7,66 @@ import {
   ChartTooltipContent,
 } from "~/components/primitives/charts/Chart";
 import { ChartLoading } from "./ChartLoading";
+import { useDateRange } from "./DateRangeContext";
 
 export function ChartLine({
   config,
-  data,
+  data: initialData,
   dataKey,
   loading = false,
+  useGlobalDateRange = false,
 }: {
   config: ChartConfig;
   data: any[];
   dataKey: string;
   loading?: boolean;
+  useGlobalDateRange?: boolean;
 }) {
+  const globalDateRange = useDateRange();
+
+  // Compute the visible data based on the date range
+  const data = React.useMemo(() => {
+    if (useGlobalDateRange) {
+      // Filter data based on global date range
+      // Check if we have valid chart data
+      if (initialData.length === 0) return [];
+
+      // Get a sorted list of all available day values
+      const allDays = initialData
+        .map((item) => item[dataKey] as string)
+        .filter(Boolean)
+        .sort();
+
+      // Check if our date range is in the available dates
+      const startDateIndex = allDays.findIndex((day) => day === globalDateRange.startDate);
+      const endDateIndex = allDays.findIndex((day) => day === globalDateRange.endDate);
+
+      // If we can't find the exact dates, just return all data
+      if (startDateIndex === -1 || endDateIndex === -1) {
+        console.warn(
+          `Date range not found in data. Start: ${globalDateRange.startDate}, End: ${globalDateRange.endDate}`
+        );
+        console.log("Available dates:", allDays);
+        return initialData;
+      }
+
+      // Filter to only include items within the range
+      return initialData.filter((item) => {
+        const itemDate = item[dataKey] as string;
+        const itemIndex = allDays.indexOf(itemDate);
+        // Include if the day is within the range (inclusive)
+        return itemIndex >= startDateIndex && itemIndex <= endDateIndex;
+      });
+    }
+    return initialData;
+  }, [
+    initialData,
+    useGlobalDateRange,
+    globalDateRange.startDate,
+    globalDateRange.endDate,
+    dataKey,
+  ]);
+
   return (
     <ChartContainer config={config} className="min-h-[200px] w-full">
       {loading ? (
@@ -35,20 +84,16 @@ export function ChartLine({
           <XAxis dataKey={dataKey} tickLine={false} axisLine={false} tickMargin={8} />
           <YAxis axisLine={false} tickLine={false} tickMargin={8} />
           <ChartTooltip cursor={false} content={<ChartTooltipContent />} />
-          <Line
-            dataKey="desktop"
-            type="step"
-            stroke="var(--color-desktop)"
-            strokeWidth={2}
-            dot={false}
-          />
-          <Line
-            dataKey="mobile"
-            type="step"
-            stroke="var(--color-mobile)"
-            strokeWidth={2}
-            dot={false}
-          />
+          {Object.keys(config).map((key) => (
+            <Line
+              key={key}
+              dataKey={key}
+              type="step"
+              stroke={config[key].color}
+              strokeWidth={2}
+              dot={false}
+            />
+          ))}
         </LineChart>
       )}
     </ChartContainer>
diff --git a/apps/webapp/app/components/primitives/charts/DateRangeContext.tsx b/apps/webapp/app/components/primitives/charts/DateRangeContext.tsx
new file mode 100644
index 0000000000..3ec027ca7b
--- /dev/null
+++ b/apps/webapp/app/components/primitives/charts/DateRangeContext.tsx
@@ -0,0 +1,67 @@
+import React, { createContext, useState, useContext, type ReactNode } from "react";
+
+type DateRangeContextType = {
+  startDate: string;
+  endDate: string;
+  setDateRange: (startDate: string, endDate: string) => void;
+  resetDateRange: () => void;
+};
+
+const chartDateFormatter = new Intl.DateTimeFormat("en-US", {
+  month: "short",
+  day: "numeric",
+});
+
+export function formatChartDate(date: Date): string {
+  return chartDateFormatter.format(date);
+}
+
+const DateRangeContext = createContext<DateRangeContextType | null>(null);
+
+export function DateRangeProvider({
+  children,
+  defaultStartDate,
+  defaultEndDate,
+}: {
+  children: ReactNode;
+  defaultStartDate: Date;
+  defaultEndDate: Date;
+}) {
+  // Store the formatted string dates that match chart data format
+  const formattedStartDate = formatChartDate(defaultStartDate);
+  const formattedEndDate = formatChartDate(defaultEndDate);
+
+  const [startDate, setStartDate] = useState<string>(formattedStartDate);
+  const [endDate, setEndDate] = useState<string>(formattedEndDate);
+
+  const setDateRange = (start: string, end: string) => {
+    setStartDate(start);
+    setEndDate(end);
+  };
+
+  const resetDateRange = () => {
+    setStartDate(formattedStartDate);
+    setEndDate(formattedEndDate);
+  };
+
+  return (
+    <DateRangeContext.Provider
+      value={{
+        startDate,
+        endDate,
+        setDateRange,
+        resetDateRange,
+      }}
+    >
+      {children}
+    </DateRangeContext.Provider>
+  );
+}
+
+export function useDateRange() {
+  const context = useContext(DateRangeContext);
+  if (!context) {
+    throw new Error("useDateRange must be used within a DateRangeProvider");
+  }
+  return context;
+}
diff --git a/apps/webapp/app/routes/storybook.charts/route.tsx b/apps/webapp/app/routes/storybook.charts/route.tsx
index e4c43e026a..b46f203f5e 100644
--- a/apps/webapp/app/routes/storybook.charts/route.tsx
+++ b/apps/webapp/app/routes/storybook.charts/route.tsx
@@ -4,66 +4,501 @@ import { Card } from "~/components/primitives/charts/Card";
 import { type ChartConfig } from "~/components/primitives/charts/Chart";
 import { ChartBar } from "~/components/primitives/charts/ChartBar";
 import { ChartLine } from "~/components/primitives/charts/ChartLine";
+import { DateRangeProvider, useDateRange } from "~/components/primitives/charts/DateRangeContext";
+import { Paragraph } from "~/components/primitives/Paragraph";
+
+function ChartsDashboard() {
+  const dateRange = useDateRange();
+  const selectedRangeText = `Selected range: ${dateRange.startDate} - ${dateRange.endDate}`;
 
-export default function Story() {
   return (
-    <div className="grid grid-cols-2 gap-4 p-3">
-      <Card>
-        <Card.Header>
-          Bar Chart 1
-          <Card.Accessory>
-            <Button variant="secondary/small">Example button</Button>
-          </Card.Accessory>
-        </Card.Header>
-        <Card.Content>
-          <ChartBar
-            config={barChartBigDatasetConfig}
-            data={barChartBigDatasetData}
-            dataKey="day"
-            referenceLine={{
-              value: 30000,
-              label: "Max concurrency",
-            }}
-          />
-        </Card.Content>
-      </Card>
-      <Card>
-        <Card.Header>Bar Chart 2</Card.Header>
-        <Card.Content>
-          <ChartBar
-            config={barChartConfig}
-            data={barChartData}
-            dataKey="day"
-            referenceLine={{
-              value: 30000,
-              label: "Max concurrency",
-            }}
-          />
-        </Card.Content>
-      </Card>
-      <Card>
-        <Card.Header>Line Chart</Card.Header>
-        <Card.Content>
-          <ChartLine config={lineChartConfig} data={lineChartData} dataKey="day" />
-        </Card.Content>
-      </Card>
-      <Card>
-        <Card.Header>
-          Big Number
-          <Card.Accessory>
-            <Button variant="secondary/small">Example button</Button>
-          </Card.Accessory>
-        </Card.Header>
-        <Card.Content>
-          <BigNumber value={101} suffix="USD" />
-        </Card.Content>
-      </Card>
+    <div className="grid gap-4 p-3">
+      <div className="flex items-center justify-between rounded bg-background-bright p-3 shadow-sm">
+        <Paragraph className="text-text text-sm font-medium">{selectedRangeText}</Paragraph>
+        <Button variant="secondary/small" onClick={dateRange.resetDateRange}>
+          Reset Global Zoom
+        </Button>
+      </div>
+
+      <div className="grid grid-cols-2 gap-4">
+        <Card>
+          <Card.Header>
+            Bar Chart 1
+            <Card.Accessory>
+              <Button variant="secondary/small">Example button</Button>
+            </Card.Accessory>
+          </Card.Header>
+          <Card.Content>
+            <ChartBar
+              config={barChartBigDatasetConfig}
+              data={API_DATA.barChartBigDatasetData}
+              dataKey="day"
+              useGlobalDateRange={true}
+              referenceLine={{
+                value: 30000,
+                label: "Max concurrency",
+              }}
+            />
+          </Card.Content>
+        </Card>
+        <Card>
+          <Card.Header>Bar Chart 2</Card.Header>
+          <Card.Content>
+            <ChartBar
+              config={barChartConfig}
+              data={API_DATA.barChartData}
+              dataKey="day"
+              useGlobalDateRange={true}
+              referenceLine={{
+                value: 30000,
+                label: "Max concurrency",
+              }}
+            />
+          </Card.Content>
+        </Card>
+        <Card>
+          <Card.Header>Line Chart</Card.Header>
+          <Card.Content>
+            <ChartLine
+              config={lineChartConfig}
+              data={API_DATA.lineChartData}
+              dataKey="day"
+              useGlobalDateRange={true}
+            />
+          </Card.Content>
+        </Card>
+        <Card>
+          <Card.Header>
+            Big Number
+            <Card.Accessory>
+              <Button variant="secondary/small">Example button</Button>
+            </Card.Accessory>
+          </Card.Header>
+          <Card.Content>
+            <BigNumber value={101} suffix="USD" />
+          </Card.Content>
+        </Card>
+      </div>
     </div>
   );
 }
 
+export default function Story() {
+  return (
+    <DateRangeProvider
+      defaultStartDate={API_DATA.defaultDateRange.startDate}
+      defaultEndDate={API_DATA.defaultDateRange.endDate}
+    >
+      <ChartsDashboard />
+    </DateRangeProvider>
+  );
+}
+
 // Mock chart data
 
+const API_DATA = {
+  defaultDateRange: {
+    startDate: new Date(2023, 10, 1), // November 1, 2023
+    endDate: new Date(2023, 10, 30), // November 30, 2023
+  },
+  lineChartData: [
+    { day: "Nov 1", desktop: 156, mobile: 89 },
+    { day: "Nov 2", desktop: 187, mobile: 102 },
+    { day: "Nov 3", desktop: 215, mobile: 95 },
+    { day: "Nov 4", desktop: 203, mobile: 114 },
+    { day: "Nov 5", desktop: 148, mobile: 81 },
+    { day: "Nov 6", desktop: 178, mobile: 110 },
+    { day: "Nov 7", desktop: 225, mobile: 132 },
+    { day: "Nov 8", desktop: 243, mobile: 145 },
+    { day: "Nov 9", desktop: 201, mobile: 118 },
+    { day: "Nov 10", desktop: 176, mobile: 97 },
+    { day: "Nov 11", desktop: 132, mobile: 78 },
+    { day: "Nov 12", desktop: 145, mobile: 85 },
+    { day: "Nov 13", desktop: 189, mobile: 103 },
+    { day: "Nov 14", desktop: 232, mobile: 128 },
+    { day: "Nov 15", desktop: 256, mobile: 142 },
+    { day: "Nov 16", desktop: 276, mobile: 159 },
+    { day: "Nov 17", desktop: 287, mobile: 168 },
+    { day: "Nov 18", desktop: 243, mobile: 146 },
+    { day: "Nov 19", desktop: 198, mobile: 125 },
+    { day: "Nov 20", desktop: 212, mobile: 117 },
+    { day: "Nov 21", desktop: 186, mobile: 80 },
+    { day: "Nov 22", desktop: 305, mobile: 200 },
+    { day: "Nov 23", desktop: 237, mobile: 120 },
+    { day: "Nov 24", desktop: 173, mobile: 190 },
+    { day: "Nov 25", desktop: 209, mobile: 130 },
+    { day: "Nov 26", desktop: 214, mobile: 140 },
+    { day: "Nov 27", desktop: 546, mobile: 150 },
+    { day: "Nov 28", desktop: 432, mobile: 165 },
+    { day: "Nov 29", desktop: 387, mobile: 139 },
+    { day: "Nov 30", desktop: 423, mobile: 157 },
+  ],
+  barChartData: [
+    { day: "Nov 1", completed: 3245, "in-progress": 4321, canceled: 657, failed: 2987 },
+    { day: "Nov 2", completed: 4567, "in-progress": 3789, canceled: 879, failed: 3456 },
+    { day: "Nov 3", completed: 5432, "in-progress": 4567, canceled: 1234, failed: 2345 },
+    { day: "Nov 4", completed: 0, "in-progress": 5678, canceled: 0, failed: 3678 },
+    { day: "Nov 5", completed: 6789, "in-progress": 3456, canceled: 2345, failed: 4321 },
+    { day: "Nov 6", completed: 3456, "in-progress": 6543, canceled: 1567, failed: 2987 },
+    { day: "Nov 7", completed: 6543, "in-progress": 3456, canceled: 2345, failed: 3456 },
+    { day: "Nov 8", completed: 0, "in-progress": 7654, canceled: 0, failed: 4567 },
+    { day: "Nov 9", completed: 8765, "in-progress": 3245, canceled: 3456, failed: 2109 },
+    { day: "Nov 10", completed: 5432, "in-progress": 6543, canceled: 2109, failed: 3456 },
+    { day: "Nov 11", completed: 3245, "in-progress": 5432, canceled: 1234, failed: 3987 },
+    { day: "Nov 12", completed: 0, "in-progress": 6543, canceled: 0, failed: 3456 },
+    { day: "Nov 13", completed: 7654, "in-progress": 3456, canceled: 2345, failed: 2987 },
+    { day: "Nov 14", completed: 5432, "in-progress": 5432, canceled: 3456, failed: 3421 },
+    { day: "Nov 15", completed: 6543, "in-progress": 4321, canceled: 2109, failed: 2345 },
+    { day: "Nov 16", completed: 0, "in-progress": 7654, canceled: 0, failed: 4567 },
+    { day: "Nov 17", completed: 8765, "in-progress": 3456, canceled: 3421, failed: 2987 },
+    { day: "Nov 18", completed: 5432, "in-progress": 5432, canceled: 2345, failed: 3456 },
+    { day: "Nov 19", completed: 4321, "in-progress": 6543, canceled: 1567, failed: 2987 },
+    { day: "Nov 20", completed: 0, "in-progress": 7654, canceled: 0, failed: 3678 },
+    { day: "Nov 21", completed: 4532, "in-progress": 3456, canceled: 1200, failed: 2876 },
+    { day: "Nov 22", completed: 6789, "in-progress": 4567, canceled: 2345, failed: 3456 },
+    { day: "Nov 23", completed: 0, "in-progress": 5678, canceled: 0, failed: 4567 },
+    { day: "Nov 24", completed: 7654, "in-progress": 3456, canceled: 5678, failed: 2345 },
+    { day: "Nov 25", completed: 5432, "in-progress": 6789, canceled: 1234, failed: 3456 },
+    { day: "Nov 26", completed: 0, "in-progress": 4567, canceled: 3456, failed: 4567 },
+    { day: "Nov 27", completed: 8765, "in-progress": 3456, canceled: 0, failed: 5678 },
+    { day: "Nov 28", completed: 5432, "in-progress": 5678, canceled: 4567, failed: 2345 },
+    { day: "Nov 29", completed: 0, "in-progress": 4567, canceled: 2345, failed: 3456 },
+    { day: "Nov 30", completed: 7654, "in-progress": 3456, canceled: 5678, failed: 2345 },
+  ],
+  barChartBigDatasetData: [
+    {
+      day: "Nov 1",
+      "sync-data": 6543,
+      "process-image": 3245,
+      "upload-file": 8765,
+      "extract-metadata": 4321,
+      "compress-video": 5432,
+      "schedule-backup": 0,
+      "convert-audio": 6543,
+      "analyze-document": 3245,
+    },
+    {
+      day: "Nov 2",
+      "sync-data": 5432,
+      "process-image": 0,
+      "upload-file": 6789,
+      "extract-metadata": 5678,
+      "compress-video": 3456,
+      "schedule-backup": 7654,
+      "convert-audio": 4567,
+      "analyze-document": 2345,
+    },
+    {
+      day: "Nov 3",
+      "sync-data": 7654,
+      "process-image": 5432,
+      "upload-file": 0,
+      "extract-metadata": 6543,
+      "compress-video": 4321,
+      "schedule-backup": 3456,
+      "convert-audio": 5678,
+      "analyze-document": 6543,
+    },
+    {
+      day: "Nov 4",
+      "sync-data": 3456,
+      "process-image": 6543,
+      "upload-file": 7654,
+      "extract-metadata": 0,
+      "compress-video": 6789,
+      "schedule-backup": 5432,
+      "convert-audio": 3456,
+      "analyze-document": 4567,
+    },
+    {
+      day: "Nov 5",
+      "sync-data": 0,
+      "process-image": 8765,
+      "upload-file": 4567,
+      "extract-metadata": 7654,
+      "compress-video": 5432,
+      "schedule-backup": 6543,
+      "convert-audio": 0,
+      "analyze-document": 7654,
+    },
+    {
+      day: "Nov 6",
+      "sync-data": 6789,
+      "process-image": 4321,
+      "upload-file": 5432,
+      "extract-metadata": 6543,
+      "compress-video": 0,
+      "schedule-backup": 8765,
+      "convert-audio": 5432,
+      "analyze-document": 3456,
+    },
+    {
+      day: "Nov 7",
+      "sync-data": 7654,
+      "process-image": 0,
+      "upload-file": 6789,
+      "extract-metadata": 5432,
+      "compress-video": 7654,
+      "schedule-backup": 4321,
+      "convert-audio": 6543,
+      "analyze-document": 0,
+    },
+    {
+      day: "Nov 8",
+      "sync-data": 5678,
+      "process-image": 6543,
+      "upload-file": 0,
+      "extract-metadata": 8765,
+      "compress-video": 5432,
+      "schedule-backup": 6543,
+      "convert-audio": 4321,
+      "analyze-document": 7654,
+    },
+    {
+      day: "Nov 9",
+      "sync-data": 0,
+      "process-image": 7654,
+      "upload-file": 5432,
+      "extract-metadata": 6543,
+      "compress-video": 8765,
+      "schedule-backup": 0,
+      "convert-audio": 7654,
+      "analyze-document": 5432,
+    },
+    {
+      day: "Nov 10",
+      "sync-data": 8765,
+      "process-image": 5432,
+      "upload-file": 7654,
+      "extract-metadata": 0,
+      "compress-video": 6543,
+      "schedule-backup": 7654,
+      "convert-audio": 5432,
+      "analyze-document": 6543,
+    },
+    {
+      day: "Nov 11",
+      "sync-data": 6543,
+      "process-image": 0,
+      "upload-file": 8765,
+      "extract-metadata": 5432,
+      "compress-video": 7654,
+      "schedule-backup": 5432,
+      "convert-audio": 0,
+      "analyze-document": 8765,
+    },
+    {
+      day: "Nov 12",
+      "sync-data": 5432,
+      "process-image": 7654,
+      "upload-file": 0,
+      "extract-metadata": 6543,
+      "compress-video": 5432,
+      "schedule-backup": 7654,
+      "convert-audio": 6543,
+      "analyze-document": 5432,
+    },
+    {
+      day: "Nov 13",
+      "sync-data": 0,
+      "process-image": 6543,
+      "upload-file": 7654,
+      "extract-metadata": 5432,
+      "compress-video": 0,
+      "schedule-backup": 8765,
+      "convert-audio": 5432,
+      "analyze-document": 7654,
+    },
+    {
+      day: "Nov 14",
+      "sync-data": 7654,
+      "process-image": 5432,
+      "upload-file": 6543,
+      "extract-metadata": 0,
+      "compress-video": 7654,
+      "schedule-backup": 5432,
+      "convert-audio": 8765,
+      "analyze-document": 0,
+    },
+    {
+      day: "Nov 15",
+      "sync-data": 6543,
+      "process-image": 0,
+      "upload-file": 8765,
+      "extract-metadata": 7654,
+      "compress-video": 5432,
+      "schedule-backup": 6543,
+      "convert-audio": 5432,
+      "analyze-document": 7654,
+    },
+    {
+      day: "Nov 16",
+      "sync-data": 5432,
+      "process-image": 7654,
+      "upload-file": 0,
+      "extract-metadata": 6543,
+      "compress-video": 8765,
+      "schedule-backup": 0,
+      "convert-audio": 7654,
+      "analyze-document": 5432,
+    },
+    {
+      day: "Nov 17",
+      "sync-data": 0,
+      "process-image": 6543,
+      "upload-file": 7654,
+      "extract-metadata": 5432,
+      "compress-video": 6543,
+      "schedule-backup": 7654,
+      "convert-audio": 5432,
+      "analyze-document": 0,
+    },
+    {
+      day: "Nov 18",
+      "sync-data": 8765,
+      "process-image": 0,
+      "upload-file": 6543,
+      "extract-metadata": 0,
+      "compress-video": 7654,
+      "schedule-backup": 5432,
+      "convert-audio": 6543,
+      "analyze-document": 7654,
+    },
+    {
+      day: "Nov 19",
+      "sync-data": 5432,
+      "process-image": 7654,
+      "upload-file": 0,
+      "extract-metadata": 6543,
+      "compress-video": 5432,
+      "schedule-backup": 0,
+      "convert-audio": 7654,
+      "analyze-document": 5432,
+    },
+    {
+      day: "Nov 20",
+      "sync-data": 6543,
+      "process-image": 5432,
+      "upload-file": 7654,
+      "extract-metadata": 0,
+      "compress-video": 6543,
+      "schedule-backup": 7654,
+      "convert-audio": 5432,
+      "analyze-document": 0,
+    },
+    {
+      day: "Nov 21",
+      "sync-data": 8765,
+      "process-image": 4532,
+      "upload-file": 0,
+      "extract-metadata": 6789,
+      "compress-video": 3456,
+      "schedule-backup": 0,
+      "convert-audio": 5432,
+      "analyze-document": 7654,
+    },
+    {
+      day: "Nov 22",
+      "sync-data": 5432,
+      "process-image": 0,
+      "upload-file": 6789,
+      "extract-metadata": 4567,
+      "compress-video": 0,
+      "schedule-backup": 8765,
+      "convert-audio": 3456,
+      "analyze-document": 5678,
+    },
+    {
+      day: "Nov 23",
+      "sync-data": 0,
+      "process-image": 6789,
+      "upload-file": 4567,
+      "extract-metadata": 0,
+      "compress-video": 7654,
+      "schedule-backup": 3456,
+      "convert-audio": 0,
+      "analyze-document": 5432,
+    },
+    {
+      day: "Nov 24",
+      "sync-data": 9876,
+      "process-image": 3456,
+      "upload-file": 5678,
+      "extract-metadata": 0,
+      "compress-video": 4567,
+      "schedule-backup": 2345,
+      "convert-audio": 6789,
+      "analyze-document": 0,
+    },
+    {
+      day: "Nov 25",
+      "sync-data": 5432,
+      "process-image": 0,
+      "upload-file": 8765,
+      "extract-metadata": 3456,
+      "compress-video": 5678,
+      "schedule-backup": 0,
+      "convert-audio": 4567,
+      "analyze-document": 7654,
+    },
+    {
+      day: "Nov 26",
+      "sync-data": 0,
+      "process-image": 7654,
+      "upload-file": 3456,
+      "extract-metadata": 5678,
+      "compress-video": 0,
+      "schedule-backup": 6789,
+      "convert-audio": 3456,
+      "analyze-document": 5678,
+    },
+    {
+      day: "Nov 27",
+      "sync-data": 8765,
+      "process-image": 3456,
+      "upload-file": 0,
+      "extract-metadata": 5678,
+      "compress-video": 3456,
+      "schedule-backup": 5678,
+      "convert-audio": 0,
+      "analyze-document": 6789,
+    },
+    {
+      day: "Nov 28",
+      "sync-data": 5678,
+      "process-image": 0,
+      "upload-file": 7654,
+      "extract-metadata": 3456,
+      "compress-video": 5678,
+      "schedule-backup": 3456,
+      "convert-audio": 7654,
+      "analyze-document": 0,
+    },
+    {
+      day: "Nov 29",
+      "sync-data": 0,
+      "process-image": 8765,
+      "upload-file": 3456,
+      "extract-metadata": 0,
+      "compress-video": 6789,
+      "schedule-backup": 3456,
+      "convert-audio": 5678,
+      "analyze-document": 7654,
+    },
+    {
+      day: "Nov 30",
+      "sync-data": 7654,
+      "process-image": 3456,
+      "upload-file": 5678,
+      "extract-metadata": 7654,
+      "compress-video": 5432,
+      "schedule-backup": 6789,
+      "convert-audio": 3456,
+      "analyze-document": 5678,
+    },
+  ],
+};
+
 const lineChartConfig = {
   desktop: {
     label: "Desktop",
@@ -75,16 +510,6 @@ const lineChartConfig = {
   },
 } satisfies ChartConfig;
 
-const lineChartData = [
-  { day: "Nov 21", desktop: 186, mobile: 80 },
-  { day: "Nov 22", desktop: 305, mobile: 200 },
-  { day: "Nov 23", desktop: 237, mobile: 120 },
-  { day: "Nov 24", desktop: 73, mobile: 190 },
-  { day: "Nov 25", desktop: 209, mobile: 130 },
-  { day: "Nov 26", desktop: 214, mobile: 140 },
-  { day: "Nov 27", desktop: 546, mobile: 150 },
-];
-
 const barChartConfig = {
   completed: {
     label: "Completed",
@@ -104,142 +529,77 @@ const barChartConfig = {
   },
 } satisfies ChartConfig;
 
-function generateRandomStackedData(numDays: number) {
-  const data = [];
-  const startDate = new Date(2023, 10, 21);
-
-  for (let i = 0; i < numDays; i++) {
-    const currentDate = new Date(startDate);
-    currentDate.setDate(startDate.getDate() + i);
-    const day = currentDate.toLocaleDateString("en-US", { month: "short", day: "numeric" });
-
-    // Generate random values
-    const completed = Math.random() < 0.5 ? 0 : Math.floor(Math.random() * 10000) + 500;
-    const inProgress = Math.floor(Math.random() * 8000) + 1000;
-    const canceled = Math.random() < 0.5 ? 0 : Math.floor(Math.random() * 9000) + 100;
-    const failed = Math.floor(Math.random() * 6000) + 2000;
-
-    data.push({
-      day,
-      completed,
-      "in-progress": inProgress,
-      canceled,
-      failed,
-    });
-  }
-
-  return data;
-}
-
-const barChartData = generateRandomStackedData(168);
-
-const taskVerbs = [
-  "sync",
-  "process",
-  "upload",
-  "extract",
-  "compress",
-  "schedule",
-  "convert",
-  "analyze",
-  "backup",
-  "validate",
-  "transform",
-  "optimize",
-];
-const taskNouns = [
-  "data",
-  "video",
-  "audio",
-  "image",
-  "file",
-  "document",
-  "pdf",
-  "media",
-  "content",
-  "backup",
-  "report",
-  "metadata",
-];
-
-// Seeded random number generator
-function seededRandom(seed: number) {
-  return function () {
-    seed = (seed * 16807) % 2147483647;
-    return (seed - 1) / 2147483646;
-  };
-}
-
-function generateTaskConfig(numTasks: number) {
-  const random = seededRandom(123); // Fixed seed for consistent generation
-  const colors = Object.values(tailwindColors);
-  return Array.from({ length: numTasks }, () => {
-    const taskName = generateRandomTaskName(random);
-    return {
-      [taskName]: {
-        label: (
-          <div className="flex items-center gap-2">
-            <span>{taskName}</span>
-            <span className="text-text-dimmed/50">{generateRandomId(random)}</span>
-          </div>
-        ),
-        color: colors[Math.floor(random() * colors.length)],
-      },
-    };
-  }).reduce((acc, curr) => ({ ...acc, ...curr }), {}) satisfies ChartConfig;
-}
-
-function generateRandomTaskName(random: () => number) {
-  const verb = taskVerbs[Math.floor(random() * taskVerbs.length)];
-  const noun = taskNouns[Math.floor(random() * taskNouns.length)];
-  return `${verb}-${noun}`;
-}
-
-function generateRandomId(random: () => number) {
-  return Array.from({ length: 16 }, () => Math.floor(random() * 36).toString(36)).join("");
-}
-
-const tailwindColors = {
-  red: "#EF4444",
-  orange: "#F97316",
-  amber: "#F59E0B",
-  yellow: "#EAB308",
-  lime: "#84CC16",
-  green: "#22C55E",
-  emerald: "#10B981",
-  teal: "#14B8A6",
-  cyan: "#06B6D4",
-  sky: "#0EA5E9",
-  blue: "#3B82F6",
-  indigo: "#6366F1",
-  violet: "#8B5CF6",
-  purple: "#A855F7",
-  fuchsia: "#D946EF",
-  pink: "#EC4899",
-  rose: "#F43F5E",
-};
-
-const barChartBigDatasetConfig = generateTaskConfig(8);
-
-function generateRandomBigDatasetData(numDays: number) {
-  const data = [];
-  const startDate = new Date(2023, 10, 21);
-  const taskNames = Object.keys(barChartBigDatasetConfig);
-
-  for (let i = 0; i < numDays; i++) {
-    const currentDate = new Date(startDate);
-    currentDate.setDate(startDate.getDate() + i);
-    const day = currentDate.toLocaleDateString("en-US", { month: "short", day: "numeric" });
-
-    const dataPoint: Record<string, string | number> = { day };
-    taskNames.forEach((taskName) => {
-      dataPoint[taskName] = Math.random() < 0.5 ? 0 : Math.floor(Math.random() * 10000) + 500;
-    });
-
-    data.push(dataPoint);
-  }
-
-  return data;
-}
-
-const barChartBigDatasetData = generateRandomBigDatasetData(70);
+const barChartBigDatasetConfig = {
+  "sync-data": {
+    label: (
+      <div className="flex items-center gap-2">
+        <span>sync-data</span>
+        <span className="text-text-dimmed/50">7fj29d0ksl38ac5q</span>
+      </div>
+    ),
+    color: "#3B82F6",
+  },
+  "process-image": {
+    label: (
+      <div className="flex items-center gap-2">
+        <span>process-image</span>
+        <span className="text-text-dimmed/50">3lk49c7fm2d8r6p0</span>
+      </div>
+    ),
+    color: "#22C55E",
+  },
+  "upload-file": {
+    label: (
+      <div className="flex items-center gap-2">
+        <span>upload-file</span>
+        <span className="text-text-dimmed/50">j8k2p3d9f7a6s5l0</span>
+      </div>
+    ),
+    color: "#F59E0B",
+  },
+  "extract-metadata": {
+    label: (
+      <div className="flex items-center gap-2">
+        <span>extract-metadata</span>
+        <span className="text-text-dimmed/50">q7w6e5r4t3y2u1i0</span>
+      </div>
+    ),
+    color: "#F43F5E",
+  },
+  "compress-video": {
+    label: (
+      <div className="flex items-center gap-2">
+        <span>compress-video</span>
+        <span className="text-text-dimmed/50">a2s3d4f5g6h7j8k9</span>
+      </div>
+    ),
+    color: "#8B5CF6",
+  },
+  "schedule-backup": {
+    label: (
+      <div className="flex items-center gap-2">
+        <span>schedule-backup</span>
+        <span className="text-text-dimmed/50">z1x2c3v4b5n6m7l8</span>
+      </div>
+    ),
+    color: "#06B6D4",
+  },
+  "convert-audio": {
+    label: (
+      <div className="flex items-center gap-2">
+        <span>convert-audio</span>
+        <span className="text-text-dimmed/50">p0o9i8u7y6t5r4e3</span>
+      </div>
+    ),
+    color: "#EC4899",
+  },
+  "analyze-document": {
+    label: (
+      <div className="flex items-center gap-2">
+        <span>analyze-document</span>
+        <span className="text-text-dimmed/50">m2n3b4v5c6x7z8l9</span>
+      </div>
+    ),
+    color: "#F97316",
+  },
+} satisfies ChartConfig;

From 29b64468b6d3b80d1665916c42e81fb0eaec8f3e Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Thu, 24 Apr 2025 16:09:48 +0100
Subject: [PATCH 055/137] Alphabetize the storybook side menu

---
 apps/webapp/app/routes/storybook/route.tsx | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

diff --git a/apps/webapp/app/routes/storybook/route.tsx b/apps/webapp/app/routes/storybook/route.tsx
index bf0ad3ccdf..ab4e7412db 100644
--- a/apps/webapp/app/routes/storybook/route.tsx
+++ b/apps/webapp/app/routes/storybook/route.tsx
@@ -88,6 +88,10 @@ const stories: Story[] = [
     name: "Resizable",
     slug: "resizable",
   },
+  {
+    name: "Run & Span timeline",
+    slug: "run-and-span-timeline",
+  },
   {
     name: "Segemented control",
     slug: "segmented-control",
@@ -112,6 +116,10 @@ const stories: Story[] = [
     name: "Tabs",
     slug: "tabs",
   },
+  {
+    name: "Timeline",
+    slug: "timeline",
+  },
   {
     name: "Toast",
     slug: "toast",
@@ -144,6 +152,7 @@ const stories: Story[] = [
     name: "Usage",
     slug: "usage",
   },
+  // Forms section
   {
     sectionTitle: "Forms",
     name: "Date fields",
@@ -169,12 +178,9 @@ const stories: Story[] = [
     name: "Textarea",
     slug: "textarea",
   },
+  // Menus section
   {
     sectionTitle: "Menus",
-    name: "Select",
-    slug: "select",
-  },
-  {
     name: "Filter",
     slug: "filter",
   },
@@ -182,6 +188,10 @@ const stories: Story[] = [
     name: "Popover",
     slug: "popover",
   },
+  {
+    name: "Select",
+    slug: "select",
+  },
 ];
 
 export const loader = async ({ request, params }: LoaderFunctionArgs) => {

From 85361eccec6e54881e4f74d335d13cbb789638e7 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Thu, 24 Apr 2025 16:10:19 +0100
Subject: [PATCH 056/137] Toggle to switch the chart states in storybook

---
 .../app/routes/storybook.charts/route.tsx     | 42 ++++++++++++++++---
 1 file changed, 36 insertions(+), 6 deletions(-)

diff --git a/apps/webapp/app/routes/storybook.charts/route.tsx b/apps/webapp/app/routes/storybook.charts/route.tsx
index b46f203f5e..07e03a406d 100644
--- a/apps/webapp/app/routes/storybook.charts/route.tsx
+++ b/apps/webapp/app/routes/storybook.charts/route.tsx
@@ -6,18 +6,45 @@ import { ChartBar } from "~/components/primitives/charts/ChartBar";
 import { ChartLine } from "~/components/primitives/charts/ChartLine";
 import { DateRangeProvider, useDateRange } from "~/components/primitives/charts/DateRangeContext";
 import { Paragraph } from "~/components/primitives/Paragraph";
+import { RadioGroup, RadioGroupItem } from "~/components/primitives/RadioButton";
+import { useState } from "react";
 
 function ChartsDashboard() {
   const dateRange = useDateRange();
-  const selectedRangeText = `Selected range: ${dateRange.startDate} - ${dateRange.endDate}`;
+  const [chartState, setChartState] = useState<string>("loaded");
 
   return (
     <div className="grid gap-4 p-3">
-      <div className="flex items-center justify-between rounded bg-background-bright p-3 shadow-sm">
-        <Paragraph className="text-text text-sm font-medium">{selectedRangeText}</Paragraph>
-        <Button variant="secondary/small" onClick={dateRange.resetDateRange}>
-          Reset Global Zoom
-        </Button>
+      <div className="flex items-center gap-4">
+        <div className="flex w-fit items-center gap-4 rounded border border-charcoal-700 bg-background-bright p-3 pl-4">
+          <Paragraph variant="small/bright">{`Selected range: ${dateRange.startDate} - ${dateRange.endDate}`}</Paragraph>
+          <Button variant="secondary/small" onClick={dateRange.resetDateRange}>
+            Reset Zoom
+          </Button>
+        </div>
+        <div className="flex w-fit items-center gap-2 rounded border border-charcoal-700 bg-background-bright p-2">
+          <RadioGroup
+            name="chartState"
+            value={chartState}
+            onValueChange={setChartState}
+            className="flex items-center gap-3"
+          >
+            <RadioGroupItem id="loaded" label="Data loaded" value="loaded" variant="button/small" />
+            <RadioGroupItem
+              id="loading"
+              label="Data loading"
+              value="loading"
+              variant="button/small"
+            />
+            <RadioGroupItem id="no-data" label="No data" value="no-data" variant="button/small" />
+            <RadioGroupItem
+              id="invalid"
+              label="Chart invalid"
+              value="invalid"
+              variant="button/small"
+            />
+          </RadioGroup>
+        </div>
       </div>
 
       <div className="grid grid-cols-2 gap-4">
@@ -38,6 +65,7 @@ function ChartsDashboard() {
                 value: 30000,
                 label: "Max concurrency",
               }}
+              loading={chartState === "loading"}
             />
           </Card.Content>
         </Card>
@@ -53,6 +81,7 @@ function ChartsDashboard() {
                 value: 30000,
                 label: "Max concurrency",
               }}
+              loading={chartState === "loading"}
             />
           </Card.Content>
         </Card>
@@ -64,6 +93,7 @@ function ChartsDashboard() {
               data={API_DATA.lineChartData}
               dataKey="day"
               useGlobalDateRange={true}
+              loading={chartState === "loading"}
             />
           </Card.Content>
         </Card>

From 0a41e843d194e17470f1f2e22380c94baf74240f Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Thu, 24 Apr 2025 18:54:55 +0100
Subject: [PATCH 057/137] Adds different chart states like loading, no data,
 invalid

---
 .../components/primitives/charts/ChartBar.tsx | 376 +++++++++---------
 .../primitives/charts/ChartLine.tsx           |   4 +-
 .../primitives/charts/ChartLoading.tsx        | 105 ++++-
 .../app/routes/storybook.charts/route.tsx     |  34 +-
 4 files changed, 317 insertions(+), 202 deletions(-)

diff --git a/apps/webapp/app/components/primitives/charts/ChartBar.tsx b/apps/webapp/app/components/primitives/charts/ChartBar.tsx
index 5a1c7a373f..c0dfb59cf9 100644
--- a/apps/webapp/app/components/primitives/charts/ChartBar.tsx
+++ b/apps/webapp/app/components/primitives/charts/ChartBar.tsx
@@ -18,10 +18,11 @@ import {
 } from "~/components/primitives/charts/Chart";
 import { Button } from "../Buttons";
 import { Paragraph } from "../Paragraph";
-import { ChartLoading } from "./ChartLoading";
+import { ChartBarLoading, ChartNoData, ChartInvalid } from "./ChartLoading";
 import { useDateRange } from "./DateRangeContext";
 
 //TODO: render a vertical line that follows the mouse - show this on all charts. Use a reference line
+//TODO: click to
 //TODO: do a better job of showing extra data in the legend - like in a table
 //TODO: fix the first and last bars in a stack not having rounded corners
 //TODO: make a nice loading state for the chart
@@ -33,11 +34,14 @@ type ReferenceLineProps = {
   label: string;
 };
 
+export type ChartState = "loading" | "noData" | "invalid" | "loaded" | undefined;
+
 export function ChartBar({
   config,
   data: initialData,
   dataKey,
-  loading = false,
+  state,
+  loading,
   maxLegendItems = 5,
   referenceLine,
   useGlobalDateRange = false,
@@ -45,7 +49,8 @@ export function ChartBar({
   config: ChartConfig;
   data: any[];
   dataKey: string;
-  loading?: boolean;
+  state?: ChartState;
+  loading?: boolean; // deprecated, use state instead
   maxLegendItems?: number;
   referenceLine?: ReferenceLineProps;
   useGlobalDateRange?: boolean;
@@ -65,6 +70,9 @@ export function ChartBar({
   const [invalidSelection, setInvalidSelection] = React.useState(false);
   const containerRef = React.useRef<HTMLDivElement>(null);
 
+  // For backward compatibility, if loading is provided but state is not
+  const displayState = state || (loading ? "loading" : undefined);
+
   // Update local data when initialData changes and we're not using global
   React.useEffect(() => {
     if (!useGlobalDateRange) {
@@ -122,6 +130,22 @@ export function ChartBar({
     dataKey,
   ]);
 
+  // Check if all values in current visible range are zero or null
+  const hasNoData = React.useMemo(() => {
+    if (data.length === 0) return true;
+
+    // Get all data keys except the x-axis key
+    const valueKeys = Object.keys(config).filter((k) => k !== dataKey);
+
+    // Check if all data points have zero or null values for all valueKeys
+    return data.every((item) => {
+      return valueKeys.every((key) => {
+        const value = item[key];
+        return value === 0 || value === null || value === undefined;
+      });
+    });
+  }, [data, config, dataKey]);
+
   const dimmedOpacity = 0.2;
 
   // Calculate totals for each category
@@ -295,29 +319,177 @@ export function ChartBar({
     setInvalidSelection(false);
   };
 
-  // Reset zoom
-  const handleReset = () => {
-    if (useGlobalDateRange) {
-      globalDateRange.resetDateRange();
-    } else {
-      setLocalStartIndex(0);
-      setLocalEndIndex(localOriginalData.length - 1);
+  // Render appropriate content based on displayState
+  const renderChartContent = () => {
+    if (displayState === "loading") {
+      return <ChartBarLoading />;
+    } else if (displayState === "noData" || hasNoData) {
+      return <ChartNoData />;
+    } else if (displayState === "invalid") {
+      return <ChartInvalid />;
     }
-  };
 
-  // Determine if the reset button should be enabled for local zoom
-  const isLocalZoomed = localStartIndex !== 0 || localEndIndex !== localOriginalData.length - 1;
+    return (
+      <BarChart
+        data={data}
+        barCategoryGap={1}
+        className="pr-2"
+        onMouseDown={handleMouseDown}
+        onMouseMove={handleMouseMove}
+        onMouseUp={handleMouseUp}
+        onMouseLeave={() => {
+          handleMouseUp();
+          resetHighlightState();
+        }}
+      >
+        <CartesianGrid vertical={false} stroke="#272A2E" />
+        <XAxis
+          dataKey={dataKey}
+          tickLine={false}
+          tickMargin={10}
+          axisLine={false}
+          ticks={
+            data.length > 10 ? [data[0]?.[dataKey], data[data.length - 1]?.[dataKey]] : undefined
+          }
+          tick={{
+            fill: "#878C99",
+            fontSize: 11,
+            style: { fontVariantNumeric: "tabular-nums" },
+          }}
+        />
+        <YAxis
+          axisLine={false}
+          tickLine={false}
+          tickMargin={8}
+          tick={{
+            fill: "#878C99",
+            fontSize: 11,
+            style: { fontVariantNumeric: "tabular-nums" },
+          }}
+          domain={["auto", (dataMax: number) => dataMax * 1.2]}
+        />
+        <ChartTooltip
+          cursor={{ fill: "#2C3034" }}
+          content={
+            <XAxisTooltip
+              isSelecting={isSelecting}
+              refAreaLeft={refAreaLeft}
+              refAreaRight={refAreaRight}
+              invalidSelection={invalidSelection}
+            />
+          }
+          allowEscapeViewBox={{ x: false, y: true }}
+        />
+        {dataKeys.map((key, index, array) => {
+          // Create individual bars with custom opacity based on hover state
+          return (
+            <Bar
+              key={key}
+              dataKey={key}
+              stackId="a"
+              fill={config[key].color}
+              radius={
+                [
+                  index === array.length - 1 ? 2 : 0,
+                  index === array.length - 1 ? 2 : 0,
+                  index === 0 ? 2 : 0,
+                  index === 0 ? 2 : 0,
+                ] as [number, number, number, number]
+              }
+              activeBar={false}
+              fillOpacity={1}
+              onMouseEnter={(entry, index) => {
+                if (entry.tooltipPayload?.[0]) {
+                  const { dataKey: hoveredKey } = entry.tooltipPayload[0];
+                  setActiveBarKey(hoveredKey);
+                  setActiveDataPointIndex(index);
+                }
+              }}
+              onMouseLeave={resetHighlightState}
+              isAnimationActive={false}
+            >
+              {data.map((_, dataIndex) => {
+                let opacity = 1;
+
+                // Only apply dimming if we're not in zoom selection mode
+                if (!isSelecting) {
+                  // Hovering a specific bar
+                  if (activeBarKey !== null && activeDataPointIndex !== null) {
+                    // Only show full opacity for the exact bar being hovered
+                    opacity =
+                      key === activeBarKey && dataIndex === activeDataPointIndex
+                        ? 1
+                        : dimmedOpacity;
+                  }
+                  // Hovering a legend item
+                  else if (activeBarKey !== null && activeDataPointIndex === null) {
+                    // Show all bars of this type with full opacity
+                    opacity = key === activeBarKey ? 1 : dimmedOpacity;
+                  }
+                }
+
+                return (
+                  <Cell
+                    key={`cell-${key}-${dataIndex}`}
+                    fill={config[key].color}
+                    fillOpacity={opacity}
+                  />
+                );
+              })}
+            </Bar>
+          );
+        })}
+        {referenceLine && (
+          <ReferenceLine
+            y={referenceLine.value}
+            label={{
+              position: "top",
+              value: referenceLine.label,
+              fill: "#878C99",
+              fontSize: 11,
+            }}
+            isFront={true}
+            stroke="#3B3E45"
+            strokeDasharray="4 4"
+            className="pointer-events-none"
+          />
+        )}
+
+        {refAreaLeft && refAreaRight && (
+          <ReferenceArea
+            x1={refAreaLeft}
+            x2={refAreaRight}
+            strokeOpacity={0.4}
+            fill="#3B82F6"
+            fillOpacity={0.2}
+          />
+        )}
+
+        <ChartLegend
+          content={
+            <ChartLegendContentRows
+              onMouseEnter={(data) => {
+                if (data.dataKey === "view-more") return;
+                setActiveBarKey(data.dataKey);
+                setActiveDataPointIndex(null); // Reset this when hovering over legend
+              }}
+              onMouseLeave={resetHighlightState}
+              data={currentData}
+              activeKey={activeBarKey}
+              payload={legendPayload}
+              renderViewMore={(remainingCount: number) => (
+                <ViewAllDataRow key="view-more" remainingCount={remainingCount} />
+              )}
+            />
+          }
+          payload={legendPayload}
+        />
+      </BarChart>
+    );
+  };
 
   return (
     <div className="relative flex w-full flex-col">
-      {!useGlobalDateRange && (
-        <div className="absolute left-0 right-0 top-0 z-10 mb-2 flex items-center justify-end">
-          <Button variant="secondary/small" onClick={handleReset} disabled={!isLocalZoomed}>
-            Reset Zoom
-          </Button>
-        </div>
-      )}
-
       <div
         ref={containerRef}
         className="mt-8 h-full w-full cursor-crosshair"
@@ -327,167 +499,7 @@ export function ChartBar({
           config={config}
           className="h-full w-full [&_.recharts-surface]:cursor-crosshair [&_.recharts-wrapper]:cursor-crosshair"
         >
-          {loading ? (
-            <ChartLoading />
-          ) : (
-            <BarChart
-              data={data}
-              barCategoryGap={1}
-              className="pr-2"
-              onMouseDown={handleMouseDown}
-              onMouseMove={handleMouseMove}
-              onMouseUp={handleMouseUp}
-              onMouseLeave={() => {
-                handleMouseUp();
-                resetHighlightState();
-              }}
-            >
-              <CartesianGrid vertical={false} stroke="#272A2E" />
-              <XAxis
-                dataKey={dataKey}
-                tickLine={false}
-                tickMargin={10}
-                axisLine={false}
-                ticks={
-                  data.length > 10
-                    ? [data[0]?.[dataKey], data[data.length - 1]?.[dataKey]]
-                    : undefined
-                }
-                tick={{
-                  fill: "#878C99",
-                  fontSize: 11,
-                  style: { fontVariantNumeric: "tabular-nums" },
-                }}
-              />
-              <YAxis
-                axisLine={false}
-                tickLine={false}
-                tickMargin={8}
-                tick={{
-                  fill: "#878C99",
-                  fontSize: 11,
-                  style: { fontVariantNumeric: "tabular-nums" },
-                }}
-                domain={["auto", (dataMax: number) => dataMax * 1.2]}
-              />
-              <ChartTooltip
-                cursor={{ fill: "#2C3034" }}
-                content={
-                  <XAxisTooltip
-                    isSelecting={isSelecting}
-                    refAreaLeft={refAreaLeft}
-                    refAreaRight={refAreaRight}
-                    invalidSelection={invalidSelection}
-                  />
-                }
-                allowEscapeViewBox={{ x: false, y: true }}
-              />
-              {dataKeys.map((key, index, array) => {
-                // Create individual bars with custom opacity based on hover state
-                return (
-                  <Bar
-                    key={key}
-                    dataKey={key}
-                    stackId="a"
-                    fill={config[key].color}
-                    radius={
-                      [
-                        index === array.length - 1 ? 2 : 0,
-                        index === array.length - 1 ? 2 : 0,
-                        index === 0 ? 2 : 0,
-                        index === 0 ? 2 : 0,
-                      ] as [number, number, number, number]
-                    }
-                    activeBar={false}
-                    fillOpacity={1}
-                    onMouseEnter={(entry, index) => {
-                      if (entry.tooltipPayload?.[0]) {
-                        const { dataKey: hoveredKey } = entry.tooltipPayload[0];
-                        setActiveBarKey(hoveredKey);
-                        setActiveDataPointIndex(index);
-                      }
-                    }}
-                    onMouseLeave={resetHighlightState}
-                    isAnimationActive={false}
-                  >
-                    {data.map((_, dataIndex) => {
-                      let opacity = 1;
-
-                      // Only apply dimming if we're not in zoom selection mode
-                      if (!isSelecting) {
-                        // Hovering a specific bar
-                        if (activeBarKey !== null && activeDataPointIndex !== null) {
-                          // Only show full opacity for the exact bar being hovered
-                          opacity =
-                            key === activeBarKey && dataIndex === activeDataPointIndex
-                              ? 1
-                              : dimmedOpacity;
-                        }
-                        // Hovering a legend item
-                        else if (activeBarKey !== null && activeDataPointIndex === null) {
-                          // Show all bars of this type with full opacity
-                          opacity = key === activeBarKey ? 1 : dimmedOpacity;
-                        }
-                      }
-
-                      return (
-                        <Cell
-                          key={`cell-${key}-${dataIndex}`}
-                          fill={config[key].color}
-                          fillOpacity={opacity}
-                        />
-                      );
-                    })}
-                  </Bar>
-                );
-              })}
-              {referenceLine && (
-                <ReferenceLine
-                  y={referenceLine.value}
-                  label={{
-                    position: "top",
-                    value: referenceLine.label,
-                    fill: "#878C99",
-                    fontSize: 11,
-                  }}
-                  isFront={true}
-                  stroke="#3B3E45"
-                  strokeDasharray="4 4"
-                  className="pointer-events-none"
-                />
-              )}
-
-              {refAreaLeft && refAreaRight && (
-                <ReferenceArea
-                  x1={refAreaLeft}
-                  x2={refAreaRight}
-                  strokeOpacity={0.4}
-                  fill="#3B82F6"
-                  fillOpacity={0.2}
-                />
-              )}
-
-              <ChartLegend
-                content={
-                  <ChartLegendContentRows
-                    onMouseEnter={(data) => {
-                      if (data.dataKey === "view-more") return;
-                      setActiveBarKey(data.dataKey);
-                      setActiveDataPointIndex(null); // Reset this when hovering over legend
-                    }}
-                    onMouseLeave={resetHighlightState}
-                    data={currentData}
-                    activeKey={activeBarKey}
-                    payload={legendPayload}
-                    renderViewMore={(remainingCount: number) => (
-                      <ViewAllDataRow key="view-more" remainingCount={remainingCount} />
-                    )}
-                  />
-                }
-                payload={legendPayload}
-              />
-            </BarChart>
-          )}
+          {renderChartContent()}
         </ChartContainer>
       </div>
     </div>
diff --git a/apps/webapp/app/components/primitives/charts/ChartLine.tsx b/apps/webapp/app/components/primitives/charts/ChartLine.tsx
index 53db5fa7a7..ca322d4935 100644
--- a/apps/webapp/app/components/primitives/charts/ChartLine.tsx
+++ b/apps/webapp/app/components/primitives/charts/ChartLine.tsx
@@ -6,7 +6,7 @@ import {
   ChartTooltip,
   ChartTooltipContent,
 } from "~/components/primitives/charts/Chart";
-import { ChartLoading } from "./ChartLoading";
+import { ChartLineLoading } from "./ChartLoading";
 import { useDateRange } from "./DateRangeContext";
 
 export function ChartLine({
@@ -70,7 +70,7 @@ export function ChartLine({
   return (
     <ChartContainer config={config} className="min-h-[200px] w-full">
       {loading ? (
-        <ChartLoading />
+        <ChartLineLoading />
       ) : (
         <LineChart
           accessibilityLayer
diff --git a/apps/webapp/app/components/primitives/charts/ChartLoading.tsx b/apps/webapp/app/components/primitives/charts/ChartLoading.tsx
index 0aafe0d2da..92ae9208b1 100644
--- a/apps/webapp/app/components/primitives/charts/ChartLoading.tsx
+++ b/apps/webapp/app/components/primitives/charts/ChartLoading.tsx
@@ -1,9 +1,112 @@
 import { Spinner } from "../Spinner";
+import { Paragraph } from "../Paragraph";
+import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
+import { motion } from "framer-motion";
+import { Button } from "../Buttons";
+import { useDateRange } from "./DateRangeContext";
 
-export function ChartLoading() {
+export function ChartBarLoading() {
+  return (
+    <div className="relative grid h-full place-items-center p-4">
+      <ChartBarLoadingBackground />
+      <Spinner className="absolute z-10 size-6" />
+    </div>
+  );
+}
+
+export function ChartNoData() {
+  const dateRange = useDateRange();
+
+  return (
+    <div className="relative grid h-full place-items-center p-4">
+      <ChartBarLoadingBackground />
+      <div className="absolute z-10 flex flex-col items-center gap-2 text-center">
+        <Paragraph variant="small/bright">No data</Paragraph>
+        <Paragraph variant="small" spacing>
+          There's no data available for the filters you've set.
+        </Paragraph>
+        <Button variant="secondary/small" onClick={dateRange.resetDateRange}>
+          Clear filters
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+export function ChartInvalid() {
+  return (
+    <div className="relative grid h-full place-items-center p-4">
+      <ExclamationTriangleIcon className="h-5 w-5 text-amber-500" />
+      <Paragraph variant="small" className="text-text-dimmed">
+        Invalid chart
+      </Paragraph>
+    </div>
+  );
+}
+
+export function ChartLineLoading() {
   return (
     <div className="grid h-full place-items-center">
       <Spinner className="size-6" />
     </div>
   );
 }
+
+function ChartBarLoadingBackground() {
+  return (
+    <motion.div
+      className="flex h-full w-full flex-col"
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      transition={{ duration: 0.5 }}
+    >
+      <motion.div
+        className="flex flex-1 items-end gap-1"
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        transition={{ duration: 0.6, delay: 0.1 }}
+      >
+        {Array.from({ length: 30 }).map((_, i) => {
+          const height = Math.max(15, Math.floor(Math.random() * 100));
+          return (
+            <motion.div
+              key={i}
+              className="flex-1 rounded-sm bg-charcoal-750/50"
+              style={{ height: `${height}%` }}
+              initial={{ y: 20, opacity: 0 }}
+              animate={{ y: 0, opacity: 1 }}
+              transition={{
+                duration: 0.4,
+                delay: 0.1 + i * 0.01,
+                ease: "easeOut",
+              }}
+            />
+          );
+        })}
+      </motion.div>
+      <motion.div
+        className="mt-5 flex flex-col justify-center gap-1"
+        initial={{ y: 10, opacity: 0 }}
+        animate={{ y: 0, opacity: 1 }}
+        transition={{ duration: 0.5, delay: 0.3 }}
+      >
+        {Array.from({ length: 5 }).map((_, i) => (
+          <motion.div
+            className="flex items-center gap-1"
+            key={i}
+            initial={{ x: -10, opacity: 0 }}
+            animate={{ x: 0, opacity: 1 }}
+            transition={{
+              duration: 0.4,
+              delay: 0.4 + i * 0.1,
+              ease: "easeOut",
+            }}
+          >
+            <div className="h-6 w-4 rounded-sm bg-charcoal-750/50" />
+            <div className="h-6 w-full rounded-sm bg-charcoal-750/50" />
+          </motion.div>
+        ))}
+      </motion.div>
+    </motion.div>
+  );
+}
diff --git a/apps/webapp/app/routes/storybook.charts/route.tsx b/apps/webapp/app/routes/storybook.charts/route.tsx
index 07e03a406d..860820743f 100644
--- a/apps/webapp/app/routes/storybook.charts/route.tsx
+++ b/apps/webapp/app/routes/storybook.charts/route.tsx
@@ -2,7 +2,7 @@ import { Button } from "~/components/primitives/Buttons";
 import { BigNumber } from "~/components/primitives/charts/BigNumber";
 import { Card } from "~/components/primitives/charts/Card";
 import { type ChartConfig } from "~/components/primitives/charts/Chart";
-import { ChartBar } from "~/components/primitives/charts/ChartBar";
+import { ChartBar, type ChartState } from "~/components/primitives/charts/ChartBar";
 import { ChartLine } from "~/components/primitives/charts/ChartLine";
 import { DateRangeProvider, useDateRange } from "~/components/primitives/charts/DateRangeContext";
 import { Paragraph } from "~/components/primitives/Paragraph";
@@ -11,22 +11,16 @@ import { useState } from "react";
 
 function ChartsDashboard() {
   const dateRange = useDateRange();
-  const [chartState, setChartState] = useState<string>("loaded");
+  const [chartState, setChartState] = useState<ChartState>("loaded");
 
   return (
     <div className="grid gap-4 p-3">
-      <div className="flex items-center gap-4">
-        <div className="flex w-fit items-center gap-4 rounded border border-charcoal-700 bg-background-bright p-3 pl-4">
-          <Paragraph variant="small/bright">{`Selected range: ${dateRange.startDate} - ${dateRange.endDate}`}</Paragraph>
-          <Button variant="secondary/small" onClick={dateRange.resetDateRange}>
-            Reset Zoom
-          </Button>
-        </div>
+      <div className="flex items-center justify-between gap-4">
         <div className="flex w-fit items-center gap-2 rounded border border-charcoal-700 bg-background-bright p-2">
           <RadioGroup
             name="chartState"
             value={chartState}
-            onValueChange={setChartState}
+            onValueChange={(value) => setChartState(value as ChartState)}
             className="flex items-center gap-3"
           >
             <RadioGroupItem id="loaded" label="Data loaded" value="loaded" variant="button/small" />
@@ -36,7 +30,7 @@ function ChartsDashboard() {
               value="loading"
               variant="button/small"
             />
-            <RadioGroupItem id="no-data" label="No data" value="no-data" variant="button/small" />
+            <RadioGroupItem id="noData" label="No data" value="noData" variant="button/small" />
             <RadioGroupItem
               id="invalid"
               label="Chart invalid"
@@ -45,6 +39,12 @@ function ChartsDashboard() {
             />
           </RadioGroup>
         </div>
+        <div className="flex w-fit items-center gap-4 rounded border border-charcoal-700 bg-background-bright p-3 pl-4">
+          <Paragraph variant="small/bright">{`Selected range: ${dateRange.startDate} - ${dateRange.endDate}`}</Paragraph>
+          <Button variant="secondary/small" onClick={dateRange.resetDateRange}>
+            Reset Zoom
+          </Button>
+        </div>
       </div>
 
       <div className="grid grid-cols-2 gap-4">
@@ -65,7 +65,7 @@ function ChartsDashboard() {
                 value: 30000,
                 label: "Max concurrency",
               }}
-              loading={chartState === "loading"}
+              state={chartState === "loaded" ? undefined : chartState}
             />
           </Card.Content>
         </Card>
@@ -81,7 +81,7 @@ function ChartsDashboard() {
                 value: 30000,
                 label: "Max concurrency",
               }}
-              loading={chartState === "loading"}
+              state={chartState === "loaded" ? undefined : chartState}
             />
           </Card.Content>
         </Card>
@@ -186,10 +186,10 @@ const API_DATA = {
     { day: "Nov 20", completed: 0, "in-progress": 7654, canceled: 0, failed: 3678 },
     { day: "Nov 21", completed: 4532, "in-progress": 3456, canceled: 1200, failed: 2876 },
     { day: "Nov 22", completed: 6789, "in-progress": 4567, canceled: 2345, failed: 3456 },
-    { day: "Nov 23", completed: 0, "in-progress": 5678, canceled: 0, failed: 4567 },
-    { day: "Nov 24", completed: 7654, "in-progress": 3456, canceled: 5678, failed: 2345 },
-    { day: "Nov 25", completed: 5432, "in-progress": 6789, canceled: 1234, failed: 3456 },
-    { day: "Nov 26", completed: 0, "in-progress": 4567, canceled: 3456, failed: 4567 },
+    { day: "Nov 23", completed: 0, "in-progress": 0, canceled: 0, failed: 0 },
+    { day: "Nov 24", completed: 0, "in-progress": 0, canceled: 0, failed: 0 },
+    { day: "Nov 25", completed: 0, "in-progress": 0, canceled: 0, failed: 0 },
+    { day: "Nov 26", completed: 0, "in-progress": 0, canceled: 0, failed: 0 },
     { day: "Nov 27", completed: 8765, "in-progress": 3456, canceled: 0, failed: 5678 },
     { day: "Nov 28", completed: 5432, "in-progress": 5678, canceled: 4567, failed: 2345 },
     { day: "Nov 29", completed: 0, "in-progress": 4567, canceled: 2345, failed: 3456 },

From 663a8b59f981ca1e52e85f95b356e24e70945d75 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Thu, 24 Apr 2025 18:55:07 +0100
Subject: [PATCH 058/137] todo update

---
 apps/webapp/app/components/primitives/charts/ChartBar.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/webapp/app/components/primitives/charts/ChartBar.tsx b/apps/webapp/app/components/primitives/charts/ChartBar.tsx
index c0dfb59cf9..909ed0c682 100644
--- a/apps/webapp/app/components/primitives/charts/ChartBar.tsx
+++ b/apps/webapp/app/components/primitives/charts/ChartBar.tsx
@@ -22,7 +22,7 @@ import { ChartBarLoading, ChartNoData, ChartInvalid } from "./ChartLoading";
 import { useDateRange } from "./DateRangeContext";
 
 //TODO: render a vertical line that follows the mouse - show this on all charts. Use a reference line
-//TODO: click to
+//TODO: click to drop a reference line on all charts
 //TODO: do a better job of showing extra data in the legend - like in a table
 //TODO: fix the first and last bars in a stack not having rounded corners
 //TODO: make a nice loading state for the chart

From 9707cd903d72b435be16d7de8f02980805fc8e01 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Thu, 24 Apr 2025 19:05:02 +0100
Subject: [PATCH 059/137] Small improvement to the tooltip style

---
 apps/webapp/app/components/primitives/charts/ChartBar.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/webapp/app/components/primitives/charts/ChartBar.tsx b/apps/webapp/app/components/primitives/charts/ChartBar.tsx
index 909ed0c682..4c71a4a51a 100644
--- a/apps/webapp/app/components/primitives/charts/ChartBar.tsx
+++ b/apps/webapp/app/components/primitives/charts/ChartBar.tsx
@@ -549,10 +549,10 @@ const XAxisTooltip = ({
 
   return (
     <div
-      className="absolute whitespace-nowrap rounded border border-grid-bright bg-background-dimmed px-2 py-1 text-xxs tabular-nums text-text-dimmed"
+      className="absolute whitespace-nowrap rounded border border-charcoal-600 bg-charcoal-700 px-2 py-1 text-xxs tabular-nums text-text-bright"
       style={{
         left: coordinate?.x,
-        top: viewBox?.height + 14,
+        top: viewBox?.height + 13,
         transform: "translateX(-50%)",
       }}
     >

From 2a3d4bb7b4b98eee1ae26f4d0a587390c8e544a1 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Fri, 25 Apr 2025 09:16:54 +0100
Subject: [PATCH 060/137] Improved chart loading states

---
 .../primitives/charts/ChartLoading.tsx        | 42 ++++++++++++-------
 1 file changed, 26 insertions(+), 16 deletions(-)

diff --git a/apps/webapp/app/components/primitives/charts/ChartLoading.tsx b/apps/webapp/app/components/primitives/charts/ChartLoading.tsx
index 92ae9208b1..e6f8472fbe 100644
--- a/apps/webapp/app/components/primitives/charts/ChartLoading.tsx
+++ b/apps/webapp/app/components/primitives/charts/ChartLoading.tsx
@@ -1,15 +1,17 @@
-import { Spinner } from "../Spinner";
-import { Paragraph } from "../Paragraph";
-import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
 import { motion } from "framer-motion";
 import { Button } from "../Buttons";
+import { Paragraph } from "../Paragraph";
+import { Spinner } from "../Spinner";
 import { useDateRange } from "./DateRangeContext";
 
 export function ChartBarLoading() {
   return (
     <div className="relative grid h-full place-items-center p-4">
       <ChartBarLoadingBackground />
-      <Spinner className="absolute z-10 size-6" />
+      <div className="absolute z-10 flex items-center gap-2">
+        <Spinner className="size-6" />
+        <Paragraph variant="base/bright">Loading data…</Paragraph>
+      </div>
     </div>
   );
 }
@@ -20,7 +22,7 @@ export function ChartNoData() {
   return (
     <div className="relative grid h-full place-items-center p-4">
       <ChartBarLoadingBackground />
-      <div className="absolute z-10 flex flex-col items-center gap-2 text-center">
+      <div className="absolute z-10 flex flex-col items-center gap-2">
         <Paragraph variant="small/bright">No data</Paragraph>
         <Paragraph variant="small" spacing>
           There's no data available for the filters you've set.
@@ -34,12 +36,20 @@ export function ChartNoData() {
 }
 
 export function ChartInvalid() {
+  const dateRange = useDateRange();
+
   return (
     <div className="relative grid h-full place-items-center p-4">
-      <ExclamationTriangleIcon className="h-5 w-5 text-amber-500" />
-      <Paragraph variant="small" className="text-text-dimmed">
-        Invalid chart
-      </Paragraph>
+      <ChartBarLoadingBackground />
+      <div className="absolute z-10 flex flex-col items-center gap-2">
+        <Paragraph variant="small/bright">Chart not applicable</Paragraph>
+        <Paragraph variant="small" spacing>
+          Your current filter settings don't apply to this chart's data type.
+        </Paragraph>
+        <Button variant="secondary/small" onClick={dateRange.resetDateRange}>
+          Clear filters
+        </Button>
+      </div>
     </div>
   );
 }
@@ -73,11 +83,11 @@ function ChartBarLoadingBackground() {
               key={i}
               className="flex-1 rounded-sm bg-charcoal-750/50"
               style={{ height: `${height}%` }}
-              initial={{ y: 20, opacity: 0 }}
-              animate={{ y: 0, opacity: 1 }}
+              initial={{ height: 0, opacity: 0 }}
+              animate={{ height: `${height}%`, opacity: 1 }}
               transition={{
-                duration: 0.4,
-                delay: 0.1 + i * 0.01,
+                duration: 0.2,
+                delay: 0.2 + i * 0.03,
                 ease: "easeOut",
               }}
             />
@@ -85,7 +95,7 @@ function ChartBarLoadingBackground() {
         })}
       </motion.div>
       <motion.div
-        className="mt-5 flex flex-col justify-center gap-1"
+        className="mt-2 flex flex-col justify-center gap-1"
         initial={{ y: 10, opacity: 0 }}
         animate={{ y: 0, opacity: 1 }}
         transition={{ duration: 0.5, delay: 0.3 }}
@@ -102,8 +112,8 @@ function ChartBarLoadingBackground() {
               ease: "easeOut",
             }}
           >
-            <div className="h-6 w-4 rounded-sm bg-charcoal-750/50" />
-            <div className="h-6 w-full rounded-sm bg-charcoal-750/50" />
+            <div className="h-5 w-4 rounded-sm bg-charcoal-750/50" />
+            <div className="h-5 w-full rounded-sm bg-charcoal-750/50" />
           </motion.div>
         ))}
       </motion.div>

From 634e612abc27a52214a70c0c42a7b24c65d17271 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Fri, 25 Apr 2025 09:21:58 +0100
Subject: [PATCH 061/137] Improves layout of the loading states + animation
 tweak

---
 .../primitives/charts/ChartLoading.tsx        | 30 ++++++++++++-------
 1 file changed, 19 insertions(+), 11 deletions(-)

diff --git a/apps/webapp/app/components/primitives/charts/ChartLoading.tsx b/apps/webapp/app/components/primitives/charts/ChartLoading.tsx
index e6f8472fbe..b8e20821f4 100644
--- a/apps/webapp/app/components/primitives/charts/ChartLoading.tsx
+++ b/apps/webapp/app/components/primitives/charts/ChartLoading.tsx
@@ -6,7 +6,7 @@ import { useDateRange } from "./DateRangeContext";
 
 export function ChartBarLoading() {
   return (
-    <div className="relative grid h-full place-items-center p-4">
+    <div className="relative grid h-full place-items-center p-2 pt-0">
       <ChartBarLoadingBackground />
       <div className="absolute z-10 flex items-center gap-2">
         <Spinner className="size-6" />
@@ -20,7 +20,7 @@ export function ChartNoData() {
   const dateRange = useDateRange();
 
   return (
-    <div className="relative grid h-full place-items-center p-4">
+    <div className="relative grid h-full place-items-center p-2 pt-0">
       <ChartBarLoadingBackground />
       <div className="absolute z-10 flex flex-col items-center gap-2">
         <Paragraph variant="small/bright">No data</Paragraph>
@@ -39,7 +39,7 @@ export function ChartInvalid() {
   const dateRange = useDateRange();
 
   return (
-    <div className="relative grid h-full place-items-center p-4">
+    <div className="relative grid h-full place-items-center p-2 pt-0">
       <ChartBarLoadingBackground />
       <div className="absolute z-10 flex flex-col items-center gap-2">
         <Paragraph variant="small/bright">Chart not applicable</Paragraph>
@@ -86,9 +86,11 @@ function ChartBarLoadingBackground() {
               initial={{ height: 0, opacity: 0 }}
               animate={{ height: `${height}%`, opacity: 1 }}
               transition={{
-                duration: 0.2,
-                delay: 0.2 + i * 0.03,
-                ease: "easeOut",
+                type: "spring",
+                stiffness: 120,
+                damping: 14,
+                mass: 1,
+                delay: 0.1 + i * 0.02,
               }}
             />
           );
@@ -98,7 +100,12 @@ function ChartBarLoadingBackground() {
         className="mt-2 flex flex-col justify-center gap-1"
         initial={{ y: 10, opacity: 0 }}
         animate={{ y: 0, opacity: 1 }}
-        transition={{ duration: 0.5, delay: 0.3 }}
+        transition={{
+          type: "spring",
+          stiffness: 100,
+          damping: 15,
+          delay: 0.2,
+        }}
       >
         {Array.from({ length: 5 }).map((_, i) => (
           <motion.div
@@ -107,12 +114,13 @@ function ChartBarLoadingBackground() {
             initial={{ x: -10, opacity: 0 }}
             animate={{ x: 0, opacity: 1 }}
             transition={{
-              duration: 0.4,
-              delay: 0.4 + i * 0.1,
-              ease: "easeOut",
+              type: "spring",
+              stiffness: 100,
+              damping: 12,
+              delay: 0.3 + i * 0.08,
             }}
           >
-            <div className="h-5 w-4 rounded-sm bg-charcoal-750/50" />
+            <div className="h-5 w-2 rounded-sm bg-charcoal-750/50" />
             <div className="h-5 w-full rounded-sm bg-charcoal-750/50" />
           </motion.div>
         ))}

From d91a634afd9d33bc4b30551242a4c6e169957b3b Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Fri, 25 Apr 2025 15:01:22 +0100
Subject: [PATCH 062/137] Todos update

---
 .../app/components/primitives/charts/ChartBar.tsx | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/apps/webapp/app/components/primitives/charts/ChartBar.tsx b/apps/webapp/app/components/primitives/charts/ChartBar.tsx
index 4c71a4a51a..acc63190fc 100644
--- a/apps/webapp/app/components/primitives/charts/ChartBar.tsx
+++ b/apps/webapp/app/components/primitives/charts/ChartBar.tsx
@@ -20,14 +20,12 @@ import { Button } from "../Buttons";
 import { Paragraph } from "../Paragraph";
 import { ChartBarLoading, ChartNoData, ChartInvalid } from "./ChartLoading";
 import { useDateRange } from "./DateRangeContext";
+import { cn } from "~/utils/cn";
 
 //TODO: render a vertical line that follows the mouse - show this on all charts. Use a reference line
 //TODO: click to drop a reference line on all charts
 //TODO: do a better job of showing extra data in the legend - like in a table
 //TODO: fix the first and last bars in a stack not having rounded corners
-//TODO: make a nice loading state for the chart
-//TODO: make a nice "No data: There's no data available for your filters" for the chart with 'clear filters' button
-//TODO: make a nice "Chart invalid: The current filters are preventing this chart from being displayed." state for the chart with 'clear filters' button
 
 type ReferenceLineProps = {
   value: number;
@@ -45,6 +43,8 @@ export function ChartBar({
   maxLegendItems = 5,
   referenceLine,
   useGlobalDateRange = false,
+  minHeight,
+  maxHeight,
 }: {
   config: ChartConfig;
   data: any[];
@@ -54,6 +54,8 @@ export function ChartBar({
   maxLegendItems?: number;
   referenceLine?: ReferenceLineProps;
   useGlobalDateRange?: boolean;
+  minHeight?: string;
+  maxHeight?: string;
 }) {
   const globalDateRange = useDateRange();
   const [activePayload, setActivePayload] = React.useState<any[] | null>(null);
@@ -366,7 +368,7 @@ export function ChartBar({
             fontSize: 11,
             style: { fontVariantNumeric: "tabular-nums" },
           }}
-          domain={["auto", (dataMax: number) => dataMax * 1.2]}
+          domain={["auto", (dataMax: number) => dataMax * 1.15]}
         />
         <ChartTooltip
           cursor={{ fill: "#2C3034" }}
@@ -497,7 +499,10 @@ export function ChartBar({
       >
         <ChartContainer
           config={config}
-          className="h-full w-full [&_.recharts-surface]:cursor-crosshair [&_.recharts-wrapper]:cursor-crosshair"
+          className={cn(
+            "h-full w-full [&_.recharts-surface]:cursor-crosshair [&_.recharts-wrapper]:cursor-crosshair"
+          )}
+          style={maxHeight ? { maxHeight } : undefined}
         >
           {renderChartContent()}
         </ChartContainer>

From 107bd9e3e24d5cd749a8f7fd8238144dd7ba80a3 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Fri, 25 Apr 2025 15:27:46 +0100
Subject: [PATCH 063/137] Add min-height to the charts

---
 .../components/primitives/charts/ChartBar.tsx |  9 ++--
 .../app/routes/storybook.charts/route.tsx     | 47 +++++++++++++------
 2 files changed, 35 insertions(+), 21 deletions(-)

diff --git a/apps/webapp/app/components/primitives/charts/ChartBar.tsx b/apps/webapp/app/components/primitives/charts/ChartBar.tsx
index acc63190fc..27c918a86e 100644
--- a/apps/webapp/app/components/primitives/charts/ChartBar.tsx
+++ b/apps/webapp/app/components/primitives/charts/ChartBar.tsx
@@ -22,9 +22,8 @@ import { ChartBarLoading, ChartNoData, ChartInvalid } from "./ChartLoading";
 import { useDateRange } from "./DateRangeContext";
 import { cn } from "~/utils/cn";
 
-//TODO: render a vertical line that follows the mouse - show this on all charts. Use a reference line
-//TODO: click to drop a reference line on all charts
-//TODO: do a better job of showing extra data in the legend - like in a table
+//TODO: show more x axis labels - figure out the best logic for this so it's nice at different zoom levels
+//TODO: click to drop a reference line - just in the middle of the chart
 //TODO: fix the first and last bars in a stack not having rounded corners
 
 type ReferenceLineProps = {
@@ -44,7 +43,6 @@ export function ChartBar({
   referenceLine,
   useGlobalDateRange = false,
   minHeight,
-  maxHeight,
 }: {
   config: ChartConfig;
   data: any[];
@@ -55,7 +53,6 @@ export function ChartBar({
   referenceLine?: ReferenceLineProps;
   useGlobalDateRange?: boolean;
   minHeight?: string;
-  maxHeight?: string;
 }) {
   const globalDateRange = useDateRange();
   const [activePayload, setActivePayload] = React.useState<any[] | null>(null);
@@ -502,7 +499,7 @@ export function ChartBar({
           className={cn(
             "h-full w-full [&_.recharts-surface]:cursor-crosshair [&_.recharts-wrapper]:cursor-crosshair"
           )}
-          style={maxHeight ? { maxHeight } : undefined}
+          style={minHeight ? { minHeight } : undefined}
         >
           {renderChartContent()}
         </ChartContainer>
diff --git a/apps/webapp/app/routes/storybook.charts/route.tsx b/apps/webapp/app/routes/storybook.charts/route.tsx
index 860820743f..a66e8ae9d1 100644
--- a/apps/webapp/app/routes/storybook.charts/route.tsx
+++ b/apps/webapp/app/routes/storybook.charts/route.tsx
@@ -1,3 +1,7 @@
+import { ArrowTrendingUpIcon } from "@heroicons/react/20/solid";
+import { useState } from "react";
+import { AbacusIcon } from "~/assets/icons/AbacusIcon";
+import { ArrowTopRightBottomLeftIcon } from "~/assets/icons/ArrowTopRightBottomLeftIcon";
 import { Button } from "~/components/primitives/Buttons";
 import { BigNumber } from "~/components/primitives/charts/BigNumber";
 import { Card } from "~/components/primitives/charts/Card";
@@ -7,39 +11,38 @@ import { ChartLine } from "~/components/primitives/charts/ChartLine";
 import { DateRangeProvider, useDateRange } from "~/components/primitives/charts/DateRangeContext";
 import { Paragraph } from "~/components/primitives/Paragraph";
 import { RadioGroup, RadioGroupItem } from "~/components/primitives/RadioButton";
-import { useState } from "react";
 
 function ChartsDashboard() {
   const dateRange = useDateRange();
   const [chartState, setChartState] = useState<ChartState>("loaded");
 
   return (
-    <div className="grid gap-4 p-3">
-      <div className="flex items-center justify-between gap-4">
-        <div className="flex w-fit items-center gap-2 rounded border border-charcoal-700 bg-background-bright p-2">
+    <div className="grid">
+      <div className="flex items-center justify-between gap-4 border-b border-charcoal-700 bg-background-bright p-2 pl-3">
+        <div className="flex w-fit items-center">
           <RadioGroup
             name="chartState"
             value={chartState}
             onValueChange={(value) => setChartState(value as ChartState)}
-            className="flex items-center gap-3"
+            className="flex items-center"
           >
-            <RadioGroupItem id="loaded" label="Data loaded" value="loaded" variant="button/small" />
+            <RadioGroupItem id="loaded" label="Data loaded" value="loaded" variant="simple/small" />
             <RadioGroupItem
               id="loading"
               label="Data loading"
               value="loading"
-              variant="button/small"
+              variant="simple/small"
             />
-            <RadioGroupItem id="noData" label="No data" value="noData" variant="button/small" />
+            <RadioGroupItem id="noData" label="No data" value="noData" variant="simple/small" />
             <RadioGroupItem
               id="invalid"
               label="Chart invalid"
               value="invalid"
-              variant="button/small"
+              variant="simple/small"
             />
           </RadioGroup>
         </div>
-        <div className="flex w-fit items-center gap-4 rounded border border-charcoal-700 bg-background-bright p-3 pl-4">
+        <div className="flex w-fit items-center gap-4">
           <Paragraph variant="small/bright">{`Selected range: ${dateRange.startDate} - ${dateRange.endDate}`}</Paragraph>
           <Button variant="secondary/small" onClick={dateRange.resetDateRange}>
             Reset Zoom
@@ -47,12 +50,19 @@ function ChartsDashboard() {
         </div>
       </div>
 
-      <div className="grid grid-cols-2 gap-4">
+      <div className="grid grid-cols-2 gap-3 p-3">
         <Card>
           <Card.Header>
-            Bar Chart 1
+            <div className="flex items-center gap-1.5">
+              <ArrowTrendingUpIcon className="size-5 text-indigo-500" />
+              Runs total
+            </div>
             <Card.Accessory>
-              <Button variant="secondary/small">Example button</Button>
+              <Button
+                variant="secondary/small"
+                TrailingIcon={<ArrowTopRightBottomLeftIcon className="size-4" />}
+                className="px-1"
+              />
             </Card.Accessory>
           </Card.Header>
           <Card.Content>
@@ -62,15 +72,21 @@ function ChartsDashboard() {
               dataKey="day"
               useGlobalDateRange={true}
               referenceLine={{
-                value: 30000,
+                value: 45000,
                 label: "Max concurrency",
               }}
               state={chartState === "loaded" ? undefined : chartState}
+              minHeight="400px"
             />
           </Card.Content>
         </Card>
         <Card>
-          <Card.Header>Bar Chart 2</Card.Header>
+          <Card.Header>
+            <div className="flex items-center gap-1.5">
+              <AbacusIcon className="size-5 text-indigo-500" />
+              Run count <span className="font-normal text-text-dimmed">by status</span>
+            </div>
+          </Card.Header>
           <Card.Content>
             <ChartBar
               config={barChartConfig}
@@ -82,6 +98,7 @@ function ChartsDashboard() {
                 label: "Max concurrency",
               }}
               state={chartState === "loaded" ? undefined : chartState}
+              minHeight="400px"
             />
           </Card.Content>
         </Card>

From f94fe1a3dca438234e5af0e44fe2c5118240b95e Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Fri, 25 Apr 2025 15:27:53 +0100
Subject: [PATCH 064/137] Small card component update

---
 apps/webapp/app/components/primitives/charts/Card.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/webapp/app/components/primitives/charts/Card.tsx b/apps/webapp/app/components/primitives/charts/Card.tsx
index dd2e329148..1bd491bdd6 100644
--- a/apps/webapp/app/components/primitives/charts/Card.tsx
+++ b/apps/webapp/app/components/primitives/charts/Card.tsx
@@ -6,7 +6,7 @@ export const Card = ({ children, className }: { children: ReactNode; className?:
   return (
     <div
       className={cn(
-        "flex flex-col gap-4 rounded-lg border border-grid-bright bg-background-bright pb-2 pt-4",
+        "flex flex-col rounded-lg border border-grid-bright bg-background-bright pb-2 pt-4",
         className
       )}
     >
@@ -17,7 +17,7 @@ export const Card = ({ children, className }: { children: ReactNode; className?:
 
 const CardHeader = ({ children }: { children: ReactNode }) => {
   return (
-    <Header3 className="mb-2 flex items-center justify-between gap-2 px-4">{children}</Header3>
+    <Header3 className="mb-4 flex items-center justify-between gap-2 px-4">{children}</Header3>
   );
 };
 

From e0c44cc2c19744ac207b2919f8f0a023def0ab2c Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Fri, 25 Apr 2025 15:28:00 +0100
Subject: [PATCH 065/137] 2 new svg icons

---
 apps/webapp/app/assets/icons/AbacusIcon.tsx   | 71 +++++++++++++++++++
 .../icons/ArrowTopRightBottomLeftIcon.tsx     | 22 ++++++
 2 files changed, 93 insertions(+)
 create mode 100644 apps/webapp/app/assets/icons/AbacusIcon.tsx
 create mode 100644 apps/webapp/app/assets/icons/ArrowTopRightBottomLeftIcon.tsx

diff --git a/apps/webapp/app/assets/icons/AbacusIcon.tsx b/apps/webapp/app/assets/icons/AbacusIcon.tsx
new file mode 100644
index 0000000000..f0b7bfdf7b
--- /dev/null
+++ b/apps/webapp/app/assets/icons/AbacusIcon.tsx
@@ -0,0 +1,71 @@
+export function AbacusIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <g clipPath="url(#clip0_16909_120578)">
+        <path
+          d="M4 3V21"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M20 21V3"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M8 5L8 6"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M14 5L14 6"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M15 10L15 11"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M9 10L9 11"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M12 15L12 16"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M8 15L8 16"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M3 21H21"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+    </svg>
+  );
+}
diff --git a/apps/webapp/app/assets/icons/ArrowTopRightBottomLeftIcon.tsx b/apps/webapp/app/assets/icons/ArrowTopRightBottomLeftIcon.tsx
new file mode 100644
index 0000000000..c49aa8cb0c
--- /dev/null
+++ b/apps/webapp/app/assets/icons/ArrowTopRightBottomLeftIcon.tsx
@@ -0,0 +1,22 @@
+export function ArrowTopRightBottomLeftIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M14.8258 10.5L20.125 5.20083V8.5625C20.125 9.08027 20.5447 9.5 21.0625 9.5C21.5803 9.5 22 9.08027 22 8.5625V2.9375C22 2.41973 21.5803 2 21.0625 2H15.4375C14.9197 2 14.5 2.41973 14.5 2.9375C14.5 3.45527 14.9197 3.875 15.4375 3.875H18.7992L13.5 9.17417C13.1339 9.54029 13.1339 10.1339 13.5 10.5C13.8661 10.8661 14.4597 10.8661 14.8258 10.5Z"
+        fill="currentColor"
+      />
+      <path
+        d="M2 21.0625V15.4375C2 14.9197 2.41973 14.5 2.9375 14.5C3.45527 14.5 3.875 14.9197 3.875 15.4375V18.7992L9.17417 13.5C9.54029 13.1339 10.1339 13.1339 10.5 13.5C10.8661 13.8661 10.8661 14.4597 10.5 14.8258L5.20083 20.125H8.5625C9.08027 20.125 9.5 20.5447 9.5 21.0625C9.5 21.5803 9.08027 22 8.5625 22H2.9375C2.69757 22 2.45765 21.9085 2.27459 21.7254C2.1847 21.6355 2.11689 21.5319 2.07114 21.4214C2.0253 21.3108 2 21.1896 2 21.0625Z"
+        fill="currentColor"
+      />
+      <path
+        d="M14.8258 10.5L20.125 5.20083V10C20.125 10.5178 20.5447 10.9375 21.0625 10.9375C21.5803 10.9375 22 10.5178 22 10V2.9375C22 2.41973 21.5803 2 21.0625 2H14C13.4822 2 13.0625 2.41973 13.0625 2.9375C13.0625 3.45527 13.4822 3.875 14 3.875H18.7992L13.5 9.17417C13.1339 9.54029 13.1339 10.1339 13.5 10.5C13.8661 10.8661 14.4597 10.8661 14.8258 10.5Z"
+        fill="currentColor"
+      />
+      <path
+        d="M2 21.0625V13.9375C2 13.4197 2.41973 13 2.9375 13C3.45527 13 3.875 13.4197 3.875 13.9375V18.7992L9.17417 13.5C9.54029 13.1339 10.1339 13.1339 10.5 13.5C10.8661 13.8661 10.8661 14.4597 10.5 14.8258L5.20083 20.125H10.0625C10.5803 20.125 11 20.5447 11 21.0625C11 21.5803 10.5803 22 10.0625 22H2.9375C2.69757 22 2.45765 21.9085 2.27459 21.7254C2.1847 21.6355 2.11689 21.5319 2.07114 21.4214C2.0253 21.3108 2 21.1896 2 21.0625Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}

From f1c0bd5749e8553e9fcfa9946feebeefa5a3b423 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Fri, 25 Apr 2025 16:33:59 +0100
Subject: [PATCH 066/137] Show more x axis values but hide them on hover

---
 .../components/primitives/charts/ChartBar.tsx | 31 +++++++++++++++----
 1 file changed, 25 insertions(+), 6 deletions(-)

diff --git a/apps/webapp/app/components/primitives/charts/ChartBar.tsx b/apps/webapp/app/components/primitives/charts/ChartBar.tsx
index 27c918a86e..ffa2abe09f 100644
--- a/apps/webapp/app/components/primitives/charts/ChartBar.tsx
+++ b/apps/webapp/app/components/primitives/charts/ChartBar.tsx
@@ -58,6 +58,7 @@ export function ChartBar({
   const [activePayload, setActivePayload] = React.useState<any[] | null>(null);
   const [activeBarKey, setActiveBarKey] = React.useState<string | null>(null);
   const [activeDataPointIndex, setActiveDataPointIndex] = React.useState<number | null>(null);
+  const [tooltipActive, setTooltipActive] = React.useState(false);
 
   // Zoom state (only used when not using global date range)
   const [refAreaLeft, setRefAreaLeft] = React.useState<string | null>(null);
@@ -264,6 +265,9 @@ export function ChartBar({
     // Update active payload for legend
     if (e?.activePayload?.length) {
       setActivePayload(e.activePayload);
+      setTooltipActive(true);
+    } else {
+      setTooltipActive(false);
     }
   };
 
@@ -328,17 +332,23 @@ export function ChartBar({
       return <ChartInvalid />;
     }
 
+    // Get the x-axis ticks based on tooltip state
+    const xAxisTicks =
+      tooltipActive && data.length > 2
+        ? [data[0]?.[dataKey], data[data.length - 1]?.[dataKey]]
+        : undefined;
+
     return (
       <BarChart
         data={data}
         barCategoryGap={1}
-        className="pr-2"
         onMouseDown={handleMouseDown}
         onMouseMove={handleMouseMove}
         onMouseUp={handleMouseUp}
         onMouseLeave={() => {
           handleMouseUp();
           resetHighlightState();
+          setTooltipActive(false);
         }}
       >
         <CartesianGrid vertical={false} stroke="#272A2E" />
@@ -347,9 +357,8 @@ export function ChartBar({
           tickLine={false}
           tickMargin={10}
           axisLine={false}
-          ticks={
-            data.length > 10 ? [data[0]?.[dataKey], data[data.length - 1]?.[dataKey]] : undefined
-          }
+          ticks={xAxisTicks}
+          interval="preserveStartEnd"
           tick={{
             fill: "#878C99",
             fontSize: 11,
@@ -530,11 +539,12 @@ const XAxisTooltip = ({
 
     return (
       <div
-        className={`absolute whitespace-nowrap rounded border px-2 py-1 text-xxs tabular-nums ${
+        className={cn(
+          "absolute whitespace-nowrap rounded border px-2 py-1 text-xxs tabular-nums",
           invalidSelection
             ? "border-amber-800 bg-amber-950 text-amber-400"
             : "border-blue-800 bg-[#1B2334] text-blue-400"
-        }`}
+        )}
         style={{
           left: coordinate?.x,
           top: viewBox?.height + 14,
@@ -542,6 +552,14 @@ const XAxisTooltip = ({
         }}
       >
         {message}
+        <div
+          className={cn(
+            "absolute -top-[5px] left-1/2 h-2 w-2 -translate-x-1/2 rotate-45",
+            invalidSelection
+              ? "border-l border-t border-amber-800 bg-amber-950"
+              : "border-l border-t border-blue-800 bg-[#1B2334]"
+          )}
+        />
       </div>
     );
   }
@@ -559,6 +577,7 @@ const XAxisTooltip = ({
       }}
     >
       {label}
+      <div className="absolute -top-[5px] left-1/2 h-2 w-2 -translate-x-1/2 rotate-45 border-l border-t border-charcoal-600 bg-charcoal-700" />
     </div>
   );
 };

From 901e4571e01bc36830df98b8d24d563f5aa91f5c Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Fri, 25 Apr 2025 16:51:50 +0100
Subject: [PATCH 067/137] Surface stackId prop

---
 apps/webapp/app/components/primitives/charts/ChartBar.tsx | 6 +++---
 apps/webapp/app/routes/storybook.charts/route.tsx         | 2 ++
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/apps/webapp/app/components/primitives/charts/ChartBar.tsx b/apps/webapp/app/components/primitives/charts/ChartBar.tsx
index ffa2abe09f..542b64d854 100644
--- a/apps/webapp/app/components/primitives/charts/ChartBar.tsx
+++ b/apps/webapp/app/components/primitives/charts/ChartBar.tsx
@@ -22,7 +22,6 @@ import { ChartBarLoading, ChartNoData, ChartInvalid } from "./ChartLoading";
 import { useDateRange } from "./DateRangeContext";
 import { cn } from "~/utils/cn";
 
-//TODO: show more x axis labels - figure out the best logic for this so it's nice at different zoom levels
 //TODO: click to drop a reference line - just in the middle of the chart
 //TODO: fix the first and last bars in a stack not having rounded corners
 
@@ -43,6 +42,7 @@ export function ChartBar({
   referenceLine,
   useGlobalDateRange = false,
   minHeight,
+  stackId,
 }: {
   config: ChartConfig;
   data: any[];
@@ -53,6 +53,7 @@ export function ChartBar({
   referenceLine?: ReferenceLineProps;
   useGlobalDateRange?: boolean;
   minHeight?: string;
+  stackId?: string;
 }) {
   const globalDateRange = useDateRange();
   const [activePayload, setActivePayload] = React.useState<any[] | null>(null);
@@ -389,12 +390,11 @@ export function ChartBar({
           allowEscapeViewBox={{ x: false, y: true }}
         />
         {dataKeys.map((key, index, array) => {
-          // Create individual bars with custom opacity based on hover state
           return (
             <Bar
               key={key}
               dataKey={key}
-              stackId="a"
+              stackId={stackId}
               fill={config[key].color}
               radius={
                 [
diff --git a/apps/webapp/app/routes/storybook.charts/route.tsx b/apps/webapp/app/routes/storybook.charts/route.tsx
index a66e8ae9d1..dce769a066 100644
--- a/apps/webapp/app/routes/storybook.charts/route.tsx
+++ b/apps/webapp/app/routes/storybook.charts/route.tsx
@@ -70,6 +70,7 @@ function ChartsDashboard() {
               config={barChartBigDatasetConfig}
               data={API_DATA.barChartBigDatasetData}
               dataKey="day"
+              stackId="a"
               useGlobalDateRange={true}
               referenceLine={{
                 value: 45000,
@@ -92,6 +93,7 @@ function ChartsDashboard() {
               config={barChartConfig}
               data={API_DATA.barChartData}
               dataKey="day"
+              stackId="a"
               useGlobalDateRange={true}
               referenceLine={{
                 value: 30000,

From 42b91303d4cbc7d706785b2f4f0f4b948f0a80d5 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Fri, 25 Apr 2025 18:02:08 +0100
Subject: [PATCH 068/137] Moves the chartState to the main Chart component

---
 .../components/primitives/charts/Chart.tsx    |  2 +
 .../components/primitives/charts/ChartBar.tsx | 56 ++++++++++++++++---
 .../primitives/charts/ChartLine.tsx           |  7 ++-
 .../app/routes/storybook.charts/route.tsx     |  6 +-
 4 files changed, 58 insertions(+), 13 deletions(-)

diff --git a/apps/webapp/app/components/primitives/charts/Chart.tsx b/apps/webapp/app/components/primitives/charts/Chart.tsx
index c03ca65178..0d7cd741a6 100644
--- a/apps/webapp/app/components/primitives/charts/Chart.tsx
+++ b/apps/webapp/app/components/primitives/charts/Chart.tsx
@@ -6,6 +6,8 @@ import { AnimatedNumber } from "../AnimatedNumber";
 // Format: { THEME_NAME: CSS_SELECTOR }
 const THEMES = { light: "", dark: ".dark" } as const;
 
+export type ChartState = "loading" | "noData" | "invalid" | "loaded" | undefined;
+
 export type ChartConfig = {
   [k in string]: {
     label?: React.ReactNode;
diff --git a/apps/webapp/app/components/primitives/charts/ChartBar.tsx b/apps/webapp/app/components/primitives/charts/ChartBar.tsx
index 542b64d854..548d5ca23d 100644
--- a/apps/webapp/app/components/primitives/charts/ChartBar.tsx
+++ b/apps/webapp/app/components/primitives/charts/ChartBar.tsx
@@ -15,6 +15,7 @@ import {
   ChartLegend,
   ChartLegendContentRows,
   ChartTooltip,
+  type ChartState,
 } from "~/components/primitives/charts/Chart";
 import { Button } from "../Buttons";
 import { Paragraph } from "../Paragraph";
@@ -22,7 +23,6 @@ import { ChartBarLoading, ChartNoData, ChartInvalid } from "./ChartLoading";
 import { useDateRange } from "./DateRangeContext";
 import { cn } from "~/utils/cn";
 
-//TODO: click to drop a reference line - just in the middle of the chart
 //TODO: fix the first and last bars in a stack not having rounded corners
 
 type ReferenceLineProps = {
@@ -30,14 +30,11 @@ type ReferenceLineProps = {
   label: string;
 };
 
-export type ChartState = "loading" | "noData" | "invalid" | "loaded" | undefined;
-
 export function ChartBar({
   config,
   data: initialData,
   dataKey,
   state,
-  loading,
   maxLegendItems = 5,
   referenceLine,
   useGlobalDateRange = false,
@@ -48,7 +45,6 @@ export function ChartBar({
   data: any[];
   dataKey: string;
   state?: ChartState;
-  loading?: boolean; // deprecated, use state instead
   maxLegendItems?: number;
   referenceLine?: ReferenceLineProps;
   useGlobalDateRange?: boolean;
@@ -61,6 +57,9 @@ export function ChartBar({
   const [activeDataPointIndex, setActiveDataPointIndex] = React.useState<number | null>(null);
   const [tooltipActive, setTooltipActive] = React.useState(false);
 
+  // New state for the inspection line
+  const [inspectionLine, setInspectionLine] = React.useState<string | null>(null);
+
   // Zoom state (only used when not using global date range)
   const [refAreaLeft, setRefAreaLeft] = React.useState<string | null>(null);
   const [refAreaRight, setRefAreaRight] = React.useState<string | null>(null);
@@ -71,8 +70,7 @@ export function ChartBar({
   const [invalidSelection, setInvalidSelection] = React.useState(false);
   const containerRef = React.useRef<HTMLDivElement>(null);
 
-  // For backward compatibility, if loading is provided but state is not
-  const displayState = state || (loading ? "loading" : undefined);
+  const displayState = state;
 
   // Update local data when initialData changes and we're not using global
   React.useEffect(() => {
@@ -237,6 +235,19 @@ export function ChartBar({
     }
   };
 
+  // Handle click on the chart area
+  const handleChartClick = (e: any) => {
+    // Only process if we're not in selection mode and have a valid click position
+    if (!isSelecting && e?.activeLabel) {
+      // Toggle the inspection line - if clicking the same point, remove it; otherwise, set a new one
+      if (inspectionLine === e.activeLabel) {
+        setInspectionLine(null);
+      } else {
+        setInspectionLine(e.activeLabel);
+      }
+    }
+  };
+
   // Handle mouse move for drag zooming
   const handleMouseMove = (e: any) => {
     // Handle both selection and active payload update
@@ -323,6 +334,22 @@ export function ChartBar({
     setInvalidSelection(false);
   };
 
+  // Handle bar stack click for inspection line
+  const handleBarClick = (barData: any, e: React.MouseEvent) => {
+    // Prevent the event from propagating to the chart's onClick handler
+    e.stopPropagation();
+
+    // Only process clicks if we're not in selection mode
+    if (!isSelecting) {
+      // Toggle the inspection line - if clicking the same point, remove it; otherwise, set a new one
+      if (inspectionLine === barData[dataKey]) {
+        setInspectionLine(null);
+      } else {
+        setInspectionLine(barData[dataKey]);
+      }
+    }
+  };
+
   // Render appropriate content based on displayState
   const renderChartContent = () => {
     if (displayState === "loading") {
@@ -346,6 +373,7 @@ export function ChartBar({
         onMouseDown={handleMouseDown}
         onMouseMove={handleMouseMove}
         onMouseUp={handleMouseUp}
+        onClick={handleChartClick}
         onMouseLeave={() => {
           handleMouseUp();
           resetHighlightState();
@@ -406,6 +434,7 @@ export function ChartBar({
               }
               activeBar={false}
               fillOpacity={1}
+              onClick={(data, index, e) => handleBarClick(data, e)}
               onMouseEnter={(entry, index) => {
                 if (entry.tooltipPayload?.[0]) {
                   const { dataKey: hoveredKey } = entry.tooltipPayload[0];
@@ -463,6 +492,19 @@ export function ChartBar({
           />
         )}
 
+        {inspectionLine && (
+          <ReferenceLine
+            x={inspectionLine}
+            stroke="#D7D9DD"
+            strokeWidth={2}
+            isFront={true}
+            onClick={(e) => {
+              e.stopPropagation();
+              setInspectionLine(null);
+            }}
+          />
+        )}
+
         {refAreaLeft && refAreaRight && (
           <ReferenceArea
             x1={refAreaLeft}
diff --git a/apps/webapp/app/components/primitives/charts/ChartLine.tsx b/apps/webapp/app/components/primitives/charts/ChartLine.tsx
index ca322d4935..79662107cb 100644
--- a/apps/webapp/app/components/primitives/charts/ChartLine.tsx
+++ b/apps/webapp/app/components/primitives/charts/ChartLine.tsx
@@ -5,6 +5,7 @@ import {
   ChartContainer,
   ChartTooltip,
   ChartTooltipContent,
+  type ChartState,
 } from "~/components/primitives/charts/Chart";
 import { ChartLineLoading } from "./ChartLoading";
 import { useDateRange } from "./DateRangeContext";
@@ -13,13 +14,13 @@ export function ChartLine({
   config,
   data: initialData,
   dataKey,
-  loading = false,
+  state,
   useGlobalDateRange = false,
 }: {
   config: ChartConfig;
   data: any[];
   dataKey: string;
-  loading?: boolean;
+  state?: ChartState;
   useGlobalDateRange?: boolean;
 }) {
   const globalDateRange = useDateRange();
@@ -69,7 +70,7 @@ export function ChartLine({
 
   return (
     <ChartContainer config={config} className="min-h-[200px] w-full">
-      {loading ? (
+      {state === "loading" ? (
         <ChartLineLoading />
       ) : (
         <LineChart
diff --git a/apps/webapp/app/routes/storybook.charts/route.tsx b/apps/webapp/app/routes/storybook.charts/route.tsx
index dce769a066..44383303c3 100644
--- a/apps/webapp/app/routes/storybook.charts/route.tsx
+++ b/apps/webapp/app/routes/storybook.charts/route.tsx
@@ -5,8 +5,8 @@ import { ArrowTopRightBottomLeftIcon } from "~/assets/icons/ArrowTopRightBottomL
 import { Button } from "~/components/primitives/Buttons";
 import { BigNumber } from "~/components/primitives/charts/BigNumber";
 import { Card } from "~/components/primitives/charts/Card";
-import { type ChartConfig } from "~/components/primitives/charts/Chart";
-import { ChartBar, type ChartState } from "~/components/primitives/charts/ChartBar";
+import { type ChartState, type ChartConfig } from "~/components/primitives/charts/Chart";
+import { ChartBar } from "~/components/primitives/charts/ChartBar";
 import { ChartLine } from "~/components/primitives/charts/ChartLine";
 import { DateRangeProvider, useDateRange } from "~/components/primitives/charts/DateRangeContext";
 import { Paragraph } from "~/components/primitives/Paragraph";
@@ -112,7 +112,7 @@ function ChartsDashboard() {
               data={API_DATA.lineChartData}
               dataKey="day"
               useGlobalDateRange={true}
-              loading={chartState === "loading"}
+              state={chartState === "loaded" ? undefined : chartState}
             />
           </Card.Content>
         </Card>

From 3383724e172877e5183ca3969e8904e0167d55ff Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Fri, 25 Apr 2025 18:25:52 +0100
Subject: [PATCH 069/137] Added some more types

---
 .../components/primitives/charts/ChartBar.tsx | 237 +++++++++++-------
 1 file changed, 153 insertions(+), 84 deletions(-)

diff --git a/apps/webapp/app/components/primitives/charts/ChartBar.tsx b/apps/webapp/app/components/primitives/charts/ChartBar.tsx
index 548d5ca23d..6265da7d59 100644
--- a/apps/webapp/app/components/primitives/charts/ChartBar.tsx
+++ b/apps/webapp/app/components/primitives/charts/ChartBar.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useCallback, useMemo } from "react";
 import {
   Bar,
   BarChart,
@@ -30,6 +30,36 @@ type ReferenceLineProps = {
   label: string;
 };
 
+type ChartBarProps = {
+  config: ChartConfig;
+  data: any[];
+  dataKey: string;
+  state?: ChartState;
+  maxLegendItems?: number;
+  referenceLine?: ReferenceLineProps;
+  useGlobalDateRange?: boolean;
+  minHeight?: string;
+  stackId?: string;
+};
+
+type TooltipProps = {
+  active?: boolean;
+  payload?: any[];
+  label?: string;
+  viewBox?: {
+    height: number;
+    width: number;
+  };
+  coordinate?: {
+    x: number;
+    y: number;
+  };
+  isSelecting: boolean;
+  refAreaLeft: string | null;
+  refAreaRight: string | null;
+  invalidSelection: boolean;
+};
+
 export function ChartBar({
   config,
   data: initialData,
@@ -40,17 +70,7 @@ export function ChartBar({
   useGlobalDateRange = false,
   minHeight,
   stackId,
-}: {
-  config: ChartConfig;
-  data: any[];
-  dataKey: string;
-  state?: ChartState;
-  maxLegendItems?: number;
-  referenceLine?: ReferenceLineProps;
-  useGlobalDateRange?: boolean;
-  minHeight?: string;
-  stackId?: string;
-}) {
+}: ChartBarProps) {
   const globalDateRange = useDateRange();
   const [activePayload, setActivePayload] = React.useState<any[] | null>(null);
   const [activeBarKey, setActiveBarKey] = React.useState<string | null>(null);
@@ -82,7 +102,7 @@ export function ChartBar({
   }, [initialData, useGlobalDateRange]);
 
   // Compute the visible data based on the zoom settings
-  const data = React.useMemo(() => {
+  const data = useMemo(() => {
     if (useGlobalDateRange) {
       // Filter data based on global date range
       // Check if we have valid chart data
@@ -130,7 +150,7 @@ export function ChartBar({
   ]);
 
   // Check if all values in current visible range are zero or null
-  const hasNoData = React.useMemo(() => {
+  const hasNoData = useMemo(() => {
     if (data.length === 0) return true;
 
     // Get all data keys except the x-axis key
@@ -148,11 +168,11 @@ export function ChartBar({
   const dimmedOpacity = 0.2;
 
   // Calculate totals for each category
-  const totals = React.useMemo(() => {
+  const totals = useMemo(() => {
     return data.reduce((acc, item) => {
       Object.entries(item).forEach(([key, value]) => {
         if (key !== dataKey) {
-          acc[key] = (acc[key] || 0) + (value as number);
+          acc[key] = (acc[key] || 0) + (Number(value) || 0);
         }
       });
       return acc;
@@ -160,10 +180,13 @@ export function ChartBar({
   }, [data, dataKey]);
 
   // Get all data keys except the x-axis key
-  const dataKeys = Object.keys(config).filter((k) => k !== dataKey);
+  const dataKeys = useMemo(
+    () => Object.keys(config).filter((k) => k !== dataKey),
+    [config, dataKey]
+  );
 
   // Get current data for the legend based on hover state
-  const currentData = React.useMemo(() => {
+  const currentData = useMemo(() => {
     if (!activePayload?.length) return totals;
 
     // If we have activePayload data from hovering over a bar
@@ -182,14 +205,14 @@ export function ChartBar({
   }, [activePayload, totals]);
 
   // Reset all highlight states
-  const resetHighlightState = () => {
+  const resetHighlightState = useCallback(() => {
     setActiveBarKey(null);
     setActiveDataPointIndex(null);
     setActivePayload(null);
-  };
+  }, []);
 
   // Prepare legend payload with capped items
-  const legendPayload = React.useMemo(() => {
+  const legendPayload = useMemo(() => {
     const allPayload = dataKeys.map((key) => ({
       dataKey: key,
       type: "rect" as const,
@@ -228,63 +251,69 @@ export function ChartBar({
   }, [config, dataKeys, maxLegendItems, activeBarKey]);
 
   // Handle mouse down for drag zooming
-  const handleMouseDown = (e: any) => {
+  const handleMouseDown = useCallback((e: any) => {
     if (e.activeLabel) {
       setRefAreaLeft(e.activeLabel);
       setIsSelecting(true);
     }
-  };
+  }, []);
 
   // Handle click on the chart area
-  const handleChartClick = (e: any) => {
-    // Only process if we're not in selection mode and have a valid click position
-    if (!isSelecting && e?.activeLabel) {
-      // Toggle the inspection line - if clicking the same point, remove it; otherwise, set a new one
-      if (inspectionLine === e.activeLabel) {
-        setInspectionLine(null);
-      } else {
-        setInspectionLine(e.activeLabel);
+  const handleChartClick = useCallback(
+    (e: any) => {
+      // Only process if we're not in selection mode and have a valid click position
+      if (!isSelecting && e?.activeLabel) {
+        // Toggle the inspection line - if clicking the same point, remove it; otherwise, set a new one
+        if (inspectionLine === e.activeLabel) {
+          setInspectionLine(null);
+        } else {
+          setInspectionLine(e.activeLabel);
+        }
       }
-    }
-  };
+    },
+    [isSelecting, inspectionLine]
+  );
 
   // Handle mouse move for drag zooming
-  const handleMouseMove = (e: any) => {
-    // Handle both selection and active payload update
-    if (isSelecting && e?.activeLabel) {
-      setRefAreaRight(e.activeLabel);
-
-      // Check if selection is likely to be too small
-      if (refAreaLeft) {
-        // Get indices from original data
-        const dataArray = useGlobalDateRange ? initialData : localOriginalData;
-        const allDays = dataArray.map((item) => item[dataKey] as string).filter(Boolean);
-
-        const leftIndex = allDays.indexOf(refAreaLeft);
-        const rightIndex = allDays.indexOf(e.activeLabel);
-
-        if (leftIndex !== -1 && rightIndex !== -1) {
-          const [start, end] = [leftIndex, rightIndex].sort((a, b) => a - b);
-
-          // Mark as invalid if the selection is too small (less than 3 data points)
-          setInvalidSelection(end - start < 2);
-        } else {
-          setInvalidSelection(true);
+  const handleMouseMove = useCallback(
+    (e: any) => {
+      // Handle both selection and active payload update
+      if (isSelecting && e?.activeLabel) {
+        setRefAreaRight(e.activeLabel);
+
+        // Check if selection is likely to be too small
+        if (refAreaLeft) {
+          // Get indices from original data
+          const dataArray = useGlobalDateRange ? initialData : localOriginalData;
+          const allDays = dataArray.map((item) => item[dataKey] as string).filter(Boolean);
+
+          const leftIndex = allDays.indexOf(refAreaLeft);
+          const rightIndex = allDays.indexOf(e.activeLabel);
+
+          if (leftIndex !== -1 && rightIndex !== -1) {
+            const [start, end] = [leftIndex, rightIndex].sort((a, b) => a - b);
+
+            // Mark as invalid if the selection is too small (less than 3 data points)
+            setInvalidSelection(end - start < 2);
+          } else {
+            setInvalidSelection(true);
+          }
         }
       }
-    }
 
-    // Update active payload for legend
-    if (e?.activePayload?.length) {
-      setActivePayload(e.activePayload);
-      setTooltipActive(true);
-    } else {
-      setTooltipActive(false);
-    }
-  };
+      // Update active payload for legend
+      if (e?.activePayload?.length) {
+        setActivePayload(e.activePayload);
+        setTooltipActive(true);
+      } else {
+        setTooltipActive(false);
+      }
+    },
+    [isSelecting, refAreaLeft, useGlobalDateRange, initialData, localOriginalData, dataKey]
+  );
 
   // Handle mouse up for drag zooming
-  const handleMouseUp = () => {
+  const handleMouseUp = useCallback(() => {
     if (refAreaLeft && refAreaRight) {
       // If global date range, update the context
       if (useGlobalDateRange) {
@@ -332,26 +361,37 @@ export function ChartBar({
     setRefAreaRight(null);
     setIsSelecting(false);
     setInvalidSelection(false);
-  };
+  }, [
+    refAreaLeft,
+    refAreaRight,
+    useGlobalDateRange,
+    initialData,
+    localOriginalData,
+    dataKey,
+    globalDateRange,
+  ]);
 
   // Handle bar stack click for inspection line
-  const handleBarClick = (barData: any, e: React.MouseEvent) => {
-    // Prevent the event from propagating to the chart's onClick handler
-    e.stopPropagation();
-
-    // Only process clicks if we're not in selection mode
-    if (!isSelecting) {
-      // Toggle the inspection line - if clicking the same point, remove it; otherwise, set a new one
-      if (inspectionLine === barData[dataKey]) {
-        setInspectionLine(null);
-      } else {
-        setInspectionLine(barData[dataKey]);
+  const handleBarClick = useCallback(
+    (barData: any, e: React.MouseEvent) => {
+      // Prevent the event from propagating to the chart's onClick handler
+      e.stopPropagation();
+
+      // Only process clicks if we're not in selection mode
+      if (!isSelecting) {
+        // Toggle the inspection line - if clicking the same point, remove it; otherwise, set a new one
+        if (inspectionLine === barData[dataKey]) {
+          setInspectionLine(null);
+        } else {
+          setInspectionLine(barData[dataKey]);
+        }
       }
-    }
-  };
+    },
+    [isSelecting, inspectionLine, dataKey]
+  );
 
   // Render appropriate content based on displayState
-  const renderChartContent = () => {
+  const renderChartContent = useCallback(() => {
     if (displayState === "loading") {
       return <ChartBarLoading />;
     } else if (displayState === "noData" || hasNoData) {
@@ -536,7 +576,32 @@ export function ChartBar({
         />
       </BarChart>
     );
-  };
+  }, [
+    displayState,
+    hasNoData,
+    tooltipActive,
+    data,
+    dataKey,
+    handleMouseDown,
+    handleMouseMove,
+    handleMouseUp,
+    handleChartClick,
+    resetHighlightState,
+    dataKeys,
+    config,
+    stackId,
+    handleBarClick,
+    activeBarKey,
+    activeDataPointIndex,
+    isSelecting,
+    dimmedOpacity,
+    referenceLine,
+    inspectionLine,
+    refAreaLeft,
+    refAreaRight,
+    legendPayload,
+    currentData,
+  ]);
 
   return (
     <div className="relative flex w-full flex-col">
@@ -569,7 +634,7 @@ const XAxisTooltip = ({
   refAreaLeft,
   refAreaRight,
   invalidSelection,
-}: any) => {
+}: TooltipProps) => {
   if (!active) return null;
 
   // Show zoom range when selecting
@@ -589,7 +654,7 @@ const XAxisTooltip = ({
         )}
         style={{
           left: coordinate?.x,
-          top: viewBox?.height + 14,
+          top: viewBox?.height ? viewBox.height + 14 : 0,
           transform: "translateX(-50%)",
         }}
       >
@@ -614,7 +679,7 @@ const XAxisTooltip = ({
       className="absolute whitespace-nowrap rounded border border-charcoal-600 bg-charcoal-700 px-2 py-1 text-xxs tabular-nums text-text-bright"
       style={{
         left: coordinate?.x,
-        top: viewBox?.height + 13,
+        top: viewBox?.height ? viewBox.height + 13 : 0,
         transform: "translateX(-50%)",
       }}
     >
@@ -624,7 +689,11 @@ const XAxisTooltip = ({
   );
 };
 
-function ViewAllDataRow({ remainingCount }: { remainingCount: number }) {
+type ViewAllDataRowProps = {
+  remainingCount: number;
+};
+
+function ViewAllDataRow({ remainingCount }: ViewAllDataRowProps) {
   return (
     <Button variant="minimal/small" fullWidth iconSpacing="justify-between" className="px-2 py-1">
       <div className="flex items-center gap-1.5 text-text-dimmed">

From feb629ec57252574f21585b5404dec251b6a9fa3 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Mon, 28 Apr 2025 11:49:21 +0100
Subject: [PATCH 070/137] Small improvements

---
 .../app/components/primitives/charts/ChartBar.tsx  | 14 +++++---------
 1 file changed, 5 insertions(+), 9 deletions(-)

diff --git a/apps/webapp/app/components/primitives/charts/ChartBar.tsx b/apps/webapp/app/components/primitives/charts/ChartBar.tsx
index 6265da7d59..577573c8cf 100644
--- a/apps/webapp/app/components/primitives/charts/ChartBar.tsx
+++ b/apps/webapp/app/components/primitives/charts/ChartBar.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo } from "react";
+import React, { useCallback, useEffect, useMemo } from "react";
 import {
   Bar,
   BarChart,
@@ -10,18 +10,18 @@ import {
   YAxis,
 } from "recharts";
 import {
-  type ChartConfig,
   ChartContainer,
   ChartLegend,
   ChartLegendContentRows,
   ChartTooltip,
+  type ChartConfig,
   type ChartState,
 } from "~/components/primitives/charts/Chart";
+import { cn } from "~/utils/cn";
 import { Button } from "../Buttons";
 import { Paragraph } from "../Paragraph";
-import { ChartBarLoading, ChartNoData, ChartInvalid } from "./ChartLoading";
+import { ChartBarLoading, ChartInvalid, ChartNoData } from "./ChartLoading";
 import { useDateRange } from "./DateRangeContext";
-import { cn } from "~/utils/cn";
 
 //TODO: fix the first and last bars in a stack not having rounded corners
 
@@ -76,11 +76,7 @@ export function ChartBar({
   const [activeBarKey, setActiveBarKey] = React.useState<string | null>(null);
   const [activeDataPointIndex, setActiveDataPointIndex] = React.useState<number | null>(null);
   const [tooltipActive, setTooltipActive] = React.useState(false);
-
-  // New state for the inspection line
   const [inspectionLine, setInspectionLine] = React.useState<string | null>(null);
-
-  // Zoom state (only used when not using global date range)
   const [refAreaLeft, setRefAreaLeft] = React.useState<string | null>(null);
   const [refAreaRight, setRefAreaRight] = React.useState<string | null>(null);
   const [localStartIndex, setLocalStartIndex] = React.useState<number>(0);
@@ -93,7 +89,7 @@ export function ChartBar({
   const displayState = state;
 
   // Update local data when initialData changes and we're not using global
-  React.useEffect(() => {
+  useEffect(() => {
     if (!useGlobalDateRange) {
       setLocalOriginalData(initialData);
       setLocalStartIndex(0);

From 134cac972599461b640ba39c8e0a3326de129b7a Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Mon, 28 Apr 2025 15:46:28 +0100
Subject: [PATCH 071/137] Removes NamedIcon page from storybook

---
 apps/webapp/app/routes/storybook/route.tsx | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/apps/webapp/app/routes/storybook/route.tsx b/apps/webapp/app/routes/storybook/route.tsx
index ab4e7412db..efac5b4325 100644
--- a/apps/webapp/app/routes/storybook/route.tsx
+++ b/apps/webapp/app/routes/storybook/route.tsx
@@ -68,10 +68,6 @@ const stories: Story[] = [
     name: "Loading bar divider",
     slug: "loading-bar-divider",
   },
-  {
-    name: "NamedIcon",
-    slug: "named-icon",
-  },
   {
     name: "Page header",
     slug: "page-header",

From 8afb58ed55553e9ed16bdfca5945717d0ffa01d4 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Mon, 28 Apr 2025 16:41:37 +0100
Subject: [PATCH 072/137] Updates the semented control to have better variants
 controls

---
 .../primitives/SegmentedControl.tsx           | 87 +++++++++++++++----
 .../app/components/primitives/charts/Card.tsx |  2 +-
 .../app/routes/storybook.charts/route.tsx     | 34 +++++++-
 .../storybook.segmented-control/route.tsx     | 40 +++++++--
 4 files changed, 136 insertions(+), 27 deletions(-)

diff --git a/apps/webapp/app/components/primitives/SegmentedControl.tsx b/apps/webapp/app/components/primitives/SegmentedControl.tsx
index 51fc54e5af..f87863a45b 100644
--- a/apps/webapp/app/components/primitives/SegmentedControl.tsx
+++ b/apps/webapp/app/components/primitives/SegmentedControl.tsx
@@ -2,18 +2,65 @@ import { RadioGroup } from "@headlessui/react";
 import { motion } from "framer-motion";
 import { cn } from "~/utils/cn";
 
-const variants = {
+const sizes = {
+  small: {
+    control: "h-6",
+    option: "px-2 text-xs",
+    container: "gap-x-0.5",
+  },
+  medium: {
+    control: "h-10",
+    option: "px-3 py-[0.13rem] text-sm",
+    container: "p-1 gap-x-0.5",
+  },
+};
+
+const theme = {
   primary: {
     base: "bg-charcoal-700",
     active: "text-text-bright hover:bg-charcoal-750/50",
+    inactive: "text-text-dimmed transition hover:text-text-bright",
+    selected: "absolute inset-0 rounded-[2px] outline outline-3 outline-primary",
   },
   secondary: {
     base: "bg-charcoal-700/50",
-    active: "text-text-bright bg-charcoal-700 rounded-[2px] border border-charcoal-600/50",
+    active: "text-text-bright",
+    inactive: "text-text-dimmed transition hover:text-text-bright",
+    selected: "absolute inset-0 rounded bg-charcoal-700 border border-charcoal-600",
   },
 };
 
-type Variants = keyof typeof variants;
+type Size = keyof typeof sizes;
+type Theme = keyof typeof theme;
+
+type VariantStyle = {
+  base: string;
+  active: string;
+  inactive: string;
+  option: string;
+  container: string;
+  selected: string;
+};
+
+function createVariant(sizeName: Size, themeName: Theme): VariantStyle {
+  return {
+    base: cn(sizes[sizeName].control, theme[themeName].base),
+    active: theme[themeName].active,
+    inactive: theme[themeName].inactive,
+    option: sizes[sizeName].option,
+    container: sizes[sizeName].container,
+    selected: theme[themeName].selected,
+  };
+}
+
+const variants = {
+  "primary/small": createVariant("small", "primary"),
+  "primary/medium": createVariant("medium", "primary"),
+  "secondary/small": createVariant("small", "secondary"),
+  "secondary/medium": createVariant("medium", "secondary"),
+} as const;
+
+type VariantType = keyof typeof variants;
 
 type Options = {
   label: string;
@@ -25,7 +72,7 @@ type SegmentedControlProps = {
   value?: string;
   defaultValue?: string;
   options: Options[];
-  variant?: Variants;
+  variant?: VariantType;
   fullWidth?: boolean;
   onChange?: (value: string) => void;
 };
@@ -35,15 +82,18 @@ export default function SegmentedControl({
   value,
   defaultValue,
   options,
-  variant = "secondary",
+  variant = "secondary/medium",
   fullWidth,
   onChange,
 }: SegmentedControlProps) {
+  const variantStyle = variants[variant];
+  const isPrimary = variant.startsWith("primary");
+
   return (
     <div
       className={cn(
-        "flex h-10 rounded text-text-bright",
-        variants[variant].base,
+        "flex rounded text-text-bright",
+        variantStyle.base,
         fullWidth ? "w-full" : "w-fit"
       )}
     >
@@ -58,31 +108,36 @@ export default function SegmentedControl({
         }}
         className="w-full"
       >
-        <div className="flex h-full w-full items-center justify-between gap-x-1 p-1">
+        <div
+          className={cn("flex h-full w-full items-center justify-between", variantStyle.container)}
+        >
           {options.map((option) => (
             <RadioGroup.Option
               key={option.value}
               value={option.value}
-              className={({ active, checked }) =>
+              className={({ checked }) =>
                 cn(
                   "relative flex h-full grow cursor-pointer text-center font-normal focus-custom",
-                  checked
-                    ? variants[variant].active
-                    : "text-text-dimmed transition hover:text-text-bright"
+                  checked ? variantStyle.active : variantStyle.inactive
                 )
               }
             >
               {({ checked }) => (
                 <>
-                  <div className="relative flex h-full w-full items-center justify-between px-3 py-[0.13rem]">
-                    <div className="z-10 flex h-full w-full items-center justify-center text-sm">
+                  <div
+                    className={cn(
+                      "relative flex h-full w-full items-center justify-between",
+                      variantStyle.option
+                    )}
+                  >
+                    <div className="z-10 flex h-full w-full items-center justify-center">
                       <RadioGroup.Label as="p">{option.label}</RadioGroup.Label>
                     </div>
-                    {checked && variant === "primary" && (
+                    {checked && (
                       <motion.div
                         layoutId={`segmented-control-${name}`}
                         transition={{ duration: 0.4, type: "spring" }}
-                        className="absolute inset-0 rounded-[2px] shadow-md outline outline-3 outline-primary"
+                        className={variantStyle.selected}
                       />
                     )}
                   </div>
diff --git a/apps/webapp/app/components/primitives/charts/Card.tsx b/apps/webapp/app/components/primitives/charts/Card.tsx
index 1bd491bdd6..a0db99252f 100644
--- a/apps/webapp/app/components/primitives/charts/Card.tsx
+++ b/apps/webapp/app/components/primitives/charts/Card.tsx
@@ -26,7 +26,7 @@ const CardContent = ({ children }: { children: ReactNode }) => {
 };
 
 const CardAccessory = ({ children }: { children: ReactNode }) => {
-  return <div className="flex-shrink-0">{children}</div>;
+  return <div className="flex items-center gap-2">{children}</div>;
 };
 
 Card.Header = CardHeader;
diff --git a/apps/webapp/app/routes/storybook.charts/route.tsx b/apps/webapp/app/routes/storybook.charts/route.tsx
index 44383303c3..d061a24491 100644
--- a/apps/webapp/app/routes/storybook.charts/route.tsx
+++ b/apps/webapp/app/routes/storybook.charts/route.tsx
@@ -11,6 +11,7 @@ import { ChartLine } from "~/components/primitives/charts/ChartLine";
 import { DateRangeProvider, useDateRange } from "~/components/primitives/charts/DateRangeContext";
 import { Paragraph } from "~/components/primitives/Paragraph";
 import { RadioGroup, RadioGroupItem } from "~/components/primitives/RadioButton";
+import SegmentedControl from "~/components/primitives/SegmentedControl";
 
 function ChartsDashboard() {
   const dateRange = useDateRange();
@@ -58,6 +59,15 @@ function ChartsDashboard() {
               Runs total
             </div>
             <Card.Accessory>
+              <SegmentedControl
+                name="runsByStatus"
+                options={[
+                  { label: "By status", value: "status" },
+                  { label: "By task", value: "task" },
+                ]}
+                defaultValue="status"
+                variant="secondary/small"
+              />
               <Button
                 variant="secondary/small"
                 TrailingIcon={<ArrowTopRightBottomLeftIcon className="size-4" />}
@@ -87,6 +97,22 @@ function ChartsDashboard() {
               <AbacusIcon className="size-5 text-indigo-500" />
               Run count <span className="font-normal text-text-dimmed">by status</span>
             </div>
+            <Card.Accessory>
+              <SegmentedControl
+                name="runCountByStatus"
+                options={[
+                  { label: "By status", value: "status" },
+                  { label: "By task", value: "task" },
+                ]}
+                defaultValue="status"
+                variant="secondary/small"
+              />
+              <Button
+                variant="secondary/small"
+                TrailingIcon={<ArrowTopRightBottomLeftIcon className="size-4" />}
+                className="px-1"
+              />
+            </Card.Accessory>
           </Card.Header>
           <Card.Content>
             <ChartBar
@@ -205,10 +231,10 @@ const API_DATA = {
     { day: "Nov 20", completed: 0, "in-progress": 7654, canceled: 0, failed: 3678 },
     { day: "Nov 21", completed: 4532, "in-progress": 3456, canceled: 1200, failed: 2876 },
     { day: "Nov 22", completed: 6789, "in-progress": 4567, canceled: 2345, failed: 3456 },
-    { day: "Nov 23", completed: 0, "in-progress": 0, canceled: 0, failed: 0 },
-    { day: "Nov 24", completed: 0, "in-progress": 0, canceled: 0, failed: 0 },
-    { day: "Nov 25", completed: 0, "in-progress": 0, canceled: 0, failed: 0 },
-    { day: "Nov 26", completed: 0, "in-progress": 0, canceled: 0, failed: 0 },
+    { day: "Nov 23", completed: 5432, "in-progress": 6543, canceled: 0, failed: 2109 },
+    { day: "Nov 24", completed: 6543, "in-progress": 0, canceled: 2345, failed: 0 },
+    { day: "Nov 25", completed: 5432, "in-progress": 0, canceled: 0, failed: 2345 },
+    { day: "Nov 26", completed: 6543, "in-progress": 6543, canceled: 0, failed: 0 },
     { day: "Nov 27", completed: 8765, "in-progress": 3456, canceled: 0, failed: 5678 },
     { day: "Nov 28", completed: 5432, "in-progress": 5678, canceled: 4567, failed: 2345 },
     { day: "Nov 29", completed: 0, "in-progress": 4567, canceled: 2345, failed: 3456 },
diff --git a/apps/webapp/app/routes/storybook.segmented-control/route.tsx b/apps/webapp/app/routes/storybook.segmented-control/route.tsx
index f97d394039..e3a16590fa 100644
--- a/apps/webapp/app/routes/storybook.segmented-control/route.tsx
+++ b/apps/webapp/app/routes/storybook.segmented-control/route.tsx
@@ -3,20 +3,48 @@ import { Paragraph } from "~/components/primitives/Paragraph";
 import SegmentedControl from "~/components/primitives/SegmentedControl";
 
 const options = [
-  { label: "Label 1", value: "developer" },
-  { label: "Label 2", value: "Users" },
+  { label: "Label 1", value: "label1" },
+  { label: "Label 2", value: "label2" },
 ];
 
 export default function Story() {
   return (
     <MainCenteredContainer className="flex flex-col gap-8">
       <div className="flex flex-col gap-2">
-        <Paragraph>Primary</Paragraph>
-        <SegmentedControl name="name" options={options} variant="primary" />
+        <Paragraph>primary/small</Paragraph>
+        <SegmentedControl
+          name="name1"
+          defaultValue={options[0].value}
+          options={options}
+          variant="primary/small"
+        />
       </div>
       <div className="flex flex-col gap-2">
-        <Paragraph>Secondary</Paragraph>
-        <SegmentedControl name="name" options={options} variant="secondary" />
+        <Paragraph>primary/medium</Paragraph>
+        <SegmentedControl
+          name="name2"
+          defaultValue={options[0].value}
+          options={options}
+          variant="primary/medium"
+        />
+      </div>
+      <div className="flex flex-col gap-2">
+        <Paragraph>secondary/small</Paragraph>
+        <SegmentedControl
+          name="name3"
+          defaultValue={options[0].value}
+          options={options}
+          variant="secondary/small"
+        />
+      </div>
+      <div className="flex flex-col gap-2">
+        <Paragraph>secondary/medium</Paragraph>
+        <SegmentedControl
+          name="name4"
+          defaultValue={options[0].value}
+          options={options}
+          variant="secondary/medium"
+        />
       </div>
     </MainCenteredContainer>
   );

From 33715d9ff47754d756696c890d393e657cdb89b7 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Thu, 15 May 2025 13:19:08 +0100
Subject: [PATCH 073/137] Update line chart style and data

---
 .../primitives/charts/ChartLine.tsx           | 106 ++++++++++++------
 .../app/routes/storybook.charts/route.tsx     |  96 ++++++++++------
 2 files changed, 132 insertions(+), 70 deletions(-)

diff --git a/apps/webapp/app/components/primitives/charts/ChartLine.tsx b/apps/webapp/app/components/primitives/charts/ChartLine.tsx
index 79662107cb..8d0ddb8d0a 100644
--- a/apps/webapp/app/components/primitives/charts/ChartLine.tsx
+++ b/apps/webapp/app/components/primitives/charts/ChartLine.tsx
@@ -10,18 +10,34 @@ import {
 import { ChartLineLoading } from "./ChartLoading";
 import { useDateRange } from "./DateRangeContext";
 
+type CurveType =
+  | "basis"
+  | "basisClosed"
+  | "basisOpen"
+  | "linear"
+  | "linearClosed"
+  | "natural"
+  | "monotoneX"
+  | "monotoneY"
+  | "monotone"
+  | "step"
+  | "stepBefore"
+  | "stepAfter";
+
 export function ChartLine({
   config,
   data: initialData,
   dataKey,
   state,
   useGlobalDateRange = false,
+  lineType = "step",
 }: {
   config: ChartConfig;
   data: any[];
   dataKey: string;
   state?: ChartState;
   useGlobalDateRange?: boolean;
+  lineType?: CurveType;
 }) {
   const globalDateRange = useDateRange();
 
@@ -44,10 +60,6 @@ export function ChartLine({
 
       // If we can't find the exact dates, just return all data
       if (startDateIndex === -1 || endDateIndex === -1) {
-        console.warn(
-          `Date range not found in data. Start: ${globalDateRange.startDate}, End: ${globalDateRange.endDate}`
-        );
-        console.log("Available dates:", allDays);
         return initialData;
       }
 
@@ -69,34 +81,62 @@ export function ChartLine({
   ]);
 
   return (
-    <ChartContainer config={config} className="min-h-[200px] w-full">
-      {state === "loading" ? (
-        <ChartLineLoading />
-      ) : (
-        <LineChart
-          accessibilityLayer
-          data={data}
-          margin={{
-            left: 12,
-            right: 12,
-          }}
-        >
-          <CartesianGrid vertical={false} stroke="#272A2E" />
-          <XAxis dataKey={dataKey} tickLine={false} axisLine={false} tickMargin={8} />
-          <YAxis axisLine={false} tickLine={false} tickMargin={8} />
-          <ChartTooltip cursor={false} content={<ChartTooltipContent />} />
-          {Object.keys(config).map((key) => (
-            <Line
-              key={key}
-              dataKey={key}
-              type="step"
-              stroke={config[key].color}
-              strokeWidth={2}
-              dot={false}
-            />
-          ))}
-        </LineChart>
-      )}
-    </ChartContainer>
+    <div className="relative flex w-full flex-col">
+      <div
+        className="mt-8 h-full w-full cursor-crosshair"
+        style={{ touchAction: "none", userSelect: "none" }}
+      >
+        <ChartContainer config={config} className="min-h-[200px] w-full">
+          {state === "loading" ? (
+            <ChartLineLoading />
+          ) : (
+            <LineChart
+              accessibilityLayer
+              data={data}
+              margin={{
+                left: 12,
+                right: 12,
+              }}
+            >
+              <CartesianGrid vertical={false} stroke="#272A2E" />
+              <XAxis
+                dataKey={dataKey}
+                tickLine={false}
+                axisLine={false}
+                tickMargin={10}
+                tick={{
+                  fill: "#878C99",
+                  fontSize: 11,
+                  style: { fontVariantNumeric: "tabular-nums" },
+                }}
+              />
+              <YAxis
+                axisLine={false}
+                tickLine={false}
+                tickMargin={8}
+                tick={{
+                  fill: "#878C99",
+                  fontSize: 11,
+                  style: { fontVariantNumeric: "tabular-nums" },
+                }}
+                domain={[0, 100]}
+                tickFormatter={(value) => `${value}%`}
+              />
+              <ChartTooltip cursor={false} content={<ChartTooltipContent />} />
+              {Object.keys(config).map((key) => (
+                <Line
+                  key={key}
+                  dataKey={key}
+                  type={lineType}
+                  stroke={config[key].color}
+                  strokeWidth={2}
+                  dot={false}
+                />
+              ))}
+            </LineChart>
+          )}
+        </ChartContainer>
+      </div>
+    </div>
   );
 }
diff --git a/apps/webapp/app/routes/storybook.charts/route.tsx b/apps/webapp/app/routes/storybook.charts/route.tsx
index d061a24491..872b8a2d14 100644
--- a/apps/webapp/app/routes/storybook.charts/route.tsx
+++ b/apps/webapp/app/routes/storybook.charts/route.tsx
@@ -1,4 +1,5 @@
 import { ArrowTrendingUpIcon } from "@heroicons/react/20/solid";
+import { IconTimeline } from "@tabler/icons-react";
 import { useState } from "react";
 import { AbacusIcon } from "~/assets/icons/AbacusIcon";
 import { ArrowTopRightBottomLeftIcon } from "~/assets/icons/ArrowTopRightBottomLeftIcon";
@@ -131,7 +132,28 @@ function ChartsDashboard() {
           </Card.Content>
         </Card>
         <Card>
-          <Card.Header>Line Chart</Card.Header>
+          <Card.Header>
+            <div className="flex items-center gap-1.5">
+              <IconTimeline className="size-5 text-indigo-500" />
+              Success rate <span className="font-normal text-text-dimmed">by status</span>
+            </div>
+            <Card.Accessory>
+              <SegmentedControl
+                name="runCountByStatus"
+                options={[
+                  { label: "By status", value: "status" },
+                  { label: "By task", value: "task" },
+                ]}
+                defaultValue="status"
+                variant="secondary/small"
+              />
+              <Button
+                variant="secondary/small"
+                TrailingIcon={<ArrowTopRightBottomLeftIcon className="size-4" />}
+                className="px-1"
+              />
+            </Card.Accessory>
+          </Card.Header>
           <Card.Content>
             <ChartLine
               config={lineChartConfig}
@@ -177,36 +199,36 @@ const API_DATA = {
     endDate: new Date(2023, 10, 30), // November 30, 2023
   },
   lineChartData: [
-    { day: "Nov 1", desktop: 156, mobile: 89 },
-    { day: "Nov 2", desktop: 187, mobile: 102 },
-    { day: "Nov 3", desktop: 215, mobile: 95 },
-    { day: "Nov 4", desktop: 203, mobile: 114 },
-    { day: "Nov 5", desktop: 148, mobile: 81 },
-    { day: "Nov 6", desktop: 178, mobile: 110 },
-    { day: "Nov 7", desktop: 225, mobile: 132 },
-    { day: "Nov 8", desktop: 243, mobile: 145 },
-    { day: "Nov 9", desktop: 201, mobile: 118 },
-    { day: "Nov 10", desktop: 176, mobile: 97 },
-    { day: "Nov 11", desktop: 132, mobile: 78 },
-    { day: "Nov 12", desktop: 145, mobile: 85 },
-    { day: "Nov 13", desktop: 189, mobile: 103 },
-    { day: "Nov 14", desktop: 232, mobile: 128 },
-    { day: "Nov 15", desktop: 256, mobile: 142 },
-    { day: "Nov 16", desktop: 276, mobile: 159 },
-    { day: "Nov 17", desktop: 287, mobile: 168 },
-    { day: "Nov 18", desktop: 243, mobile: 146 },
-    { day: "Nov 19", desktop: 198, mobile: 125 },
-    { day: "Nov 20", desktop: 212, mobile: 117 },
-    { day: "Nov 21", desktop: 186, mobile: 80 },
-    { day: "Nov 22", desktop: 305, mobile: 200 },
-    { day: "Nov 23", desktop: 237, mobile: 120 },
-    { day: "Nov 24", desktop: 173, mobile: 190 },
-    { day: "Nov 25", desktop: 209, mobile: 130 },
-    { day: "Nov 26", desktop: 214, mobile: 140 },
-    { day: "Nov 27", desktop: 546, mobile: 150 },
-    { day: "Nov 28", desktop: 432, mobile: 165 },
-    { day: "Nov 29", desktop: 387, mobile: 139 },
-    { day: "Nov 30", desktop: 423, mobile: 157 },
+    { day: "Nov 1", "success-rate": 96.8, "failure-rate": 3.2 },
+    { day: "Nov 2", "success-rate": 95.3, "failure-rate": 4.7 },
+    { day: "Nov 3", "success-rate": 97.1, "failure-rate": 2.9 },
+    { day: "Nov 4", "success-rate": 94.5, "failure-rate": 5.5 },
+    { day: "Nov 5", "success-rate": 98.6, "failure-rate": 1.4 },
+    { day: "Nov 6", "success-rate": 97.8, "failure-rate": 2.2 },
+    { day: "Nov 7", "success-rate": 93.9, "failure-rate": 6.1 },
+    { day: "Nov 8", "success-rate": 95.7, "failure-rate": 4.3 },
+    { day: "Nov 9", "success-rate": 98.2, "failure-rate": 1.8 },
+    { day: "Nov 10", "success-rate": 96.5, "failure-rate": 3.5 },
+    { day: "Nov 11", "success-rate": 94.8, "failure-rate": 5.2 },
+    { day: "Nov 12", "success-rate": 99.1, "failure-rate": 0.9 },
+    { day: "Nov 13", "success-rate": 97.3, "failure-rate": 2.7 },
+    { day: "Nov 14", "success-rate": 95.9, "failure-rate": 4.1 },
+    { day: "Nov 15", "success-rate": 98.4, "failure-rate": 1.6 },
+    { day: "Nov 16", "success-rate": 96.2, "failure-rate": 3.8 },
+    { day: "Nov 17", "success-rate": 94.3, "failure-rate": 5.7 },
+    { day: "Nov 18", "success-rate": 97.5, "failure-rate": 2.5 },
+    { day: "Nov 19", "success-rate": 95.6, "failure-rate": 4.4 },
+    { day: "Nov 20", "success-rate": 98.9, "failure-rate": 1.1 },
+    { day: "Nov 21", "success-rate": 96.7, "failure-rate": 3.3 },
+    { day: "Nov 22", "success-rate": 95.1, "failure-rate": 4.9 },
+    { day: "Nov 23", "success-rate": 97.9, "failure-rate": 2.1 },
+    { day: "Nov 24", "success-rate": 94.7, "failure-rate": 5.3 },
+    { day: "Nov 25", "success-rate": 98.3, "failure-rate": 1.7 },
+    { day: "Nov 26", "success-rate": 96.4, "failure-rate": 3.6 },
+    { day: "Nov 27", "success-rate": 94.9, "failure-rate": 5.1 },
+    { day: "Nov 28", "success-rate": 97.7, "failure-rate": 2.3 },
+    { day: "Nov 29", "success-rate": 95.4, "failure-rate": 4.6 },
+    { day: "Nov 30", "success-rate": 98.8, "failure-rate": 1.2 },
   ],
   barChartData: [
     { day: "Nov 1", completed: 3245, "in-progress": 4321, canceled: 657, failed: 2987 },
@@ -575,13 +597,13 @@ const API_DATA = {
 };
 
 const lineChartConfig = {
-  desktop: {
-    label: "Desktop",
-    color: "#3B82F6",
+  "success-rate": {
+    label: "Success Rate",
+    color: "#22C55E",
   },
-  mobile: {
-    label: "Mobile",
-    color: "#28BF5C",
+  "failure-rate": {
+    label: "Failure Rate",
+    color: "#F43F5E",
   },
 } satisfies ChartConfig;
 

From 7c47efecd1db7d0ce4488d97952d94bcd2e61d38 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Thu, 15 May 2025 15:00:54 +0100
Subject: [PATCH 074/137] Adds a loading state for the line chart

---
 .../primitives/charts/ChartLine.tsx           | 144 ++++++++++------
 .../primitives/charts/ChartLoading.tsx        | 162 +++++++++++++++++-
 2 files changed, 253 insertions(+), 53 deletions(-)

diff --git a/apps/webapp/app/components/primitives/charts/ChartLine.tsx b/apps/webapp/app/components/primitives/charts/ChartLine.tsx
index 8d0ddb8d0a..64656e5c12 100644
--- a/apps/webapp/app/components/primitives/charts/ChartLine.tsx
+++ b/apps/webapp/app/components/primitives/charts/ChartLine.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useCallback, useMemo } from "react";
 import { CartesianGrid, Line, LineChart, XAxis, YAxis } from "recharts";
 import {
   type ChartConfig,
@@ -7,7 +7,7 @@ import {
   ChartTooltipContent,
   type ChartState,
 } from "~/components/primitives/charts/Chart";
-import { ChartLineLoading } from "./ChartLoading";
+import { ChartLineLoading, ChartNoData, ChartInvalid } from "./ChartLoading";
 import { useDateRange } from "./DateRangeContext";
 
 type CurveType =
@@ -40,9 +40,13 @@ export function ChartLine({
   lineType?: CurveType;
 }) {
   const globalDateRange = useDateRange();
+  const [tooltipActive, setTooltipActive] = React.useState(false);
+
+  // Display state for chart rendering
+  const displayState = state;
 
   // Compute the visible data based on the date range
-  const data = React.useMemo(() => {
+  const data = useMemo(() => {
     if (useGlobalDateRange) {
       // Filter data based on global date range
       // Check if we have valid chart data
@@ -80,6 +84,91 @@ export function ChartLine({
     dataKey,
   ]);
 
+  // Check if data has no values (all zero or null)
+  const hasNoData = useMemo(() => {
+    if (data.length === 0) return true;
+
+    // Get all data keys except the x-axis key
+    const valueKeys = Object.keys(config).filter((k) => k !== dataKey);
+
+    // Check if all data points have zero or null values for all valueKeys
+    return data.every((item) => {
+      return valueKeys.every((key) => {
+        const value = item[key];
+        return value === 0 || value === null || value === undefined;
+      });
+    });
+  }, [data, config, dataKey]);
+
+  // Render appropriate content based on displayState
+  const renderChartContent = useCallback(() => {
+    if (displayState === "loading") {
+      return <ChartLineLoading />;
+    } else if (displayState === "noData" || hasNoData) {
+      return <ChartNoData />;
+    } else if (displayState === "invalid") {
+      return <ChartInvalid />;
+    }
+
+    // Get the x-axis ticks based on tooltip state
+    const xAxisTicks =
+      tooltipActive && data.length > 2
+        ? [data[0]?.[dataKey], data[data.length - 1]?.[dataKey]]
+        : undefined;
+
+    return (
+      <LineChart
+        accessibilityLayer
+        data={data}
+        margin={{
+          left: 12,
+          right: 12,
+        }}
+        onMouseEnter={() => setTooltipActive(true)}
+        onMouseLeave={() => setTooltipActive(false)}
+      >
+        <CartesianGrid vertical={false} stroke="#272A2E" />
+        <XAxis
+          dataKey={dataKey}
+          tickLine={false}
+          axisLine={false}
+          tickMargin={10}
+          ticks={xAxisTicks}
+          interval="preserveStartEnd"
+          tick={{
+            fill: "#878C99",
+            fontSize: 11,
+            style: { fontVariantNumeric: "tabular-nums" },
+          }}
+        />
+        <YAxis
+          axisLine={false}
+          tickLine={false}
+          tickMargin={8}
+          tick={{
+            fill: "#878C99",
+            fontSize: 11,
+            style: { fontVariantNumeric: "tabular-nums" },
+          }}
+          domain={[0, 100]}
+          tickFormatter={(value) => `${value}%`}
+        />
+        <ChartTooltip cursor={false} content={<ChartTooltipContent />} />
+        {Object.keys(config).map((key) => (
+          <Line
+            key={key}
+            dataKey={key}
+            type={lineType}
+            stroke={config[key].color}
+            strokeWidth={2}
+            dot={false}
+            isAnimationActive={false}
+          />
+        ))}
+      </LineChart>
+    );
+  }, [displayState, hasNoData, tooltipActive, data, dataKey, config, lineType]);
+
   return (
     <div className="relative flex w-full flex-col">
       <div
@@ -87,54 +176,7 @@ export function ChartLine({
         style={{ touchAction: "none", userSelect: "none" }}
       >
         <ChartContainer config={config} className="min-h-[200px] w-full">
-          {state === "loading" ? (
-            <ChartLineLoading />
-          ) : (
-            <LineChart
-              accessibilityLayer
-              data={data}
-              margin={{
-                left: 12,
-                right: 12,
-              }}
-            >
-              <CartesianGrid vertical={false} stroke="#272A2E" />
-              <XAxis
-                dataKey={dataKey}
-                tickLine={false}
-                axisLine={false}
-                tickMargin={10}
-                tick={{
-                  fill: "#878C99",
-                  fontSize: 11,
-                  style: { fontVariantNumeric: "tabular-nums" },
-                }}
-              />
-              <YAxis
-                axisLine={false}
-                tickLine={false}
-                tickMargin={8}
-                tick={{
-                  fill: "#878C99",
-                  fontSize: 11,
-                  style: { fontVariantNumeric: "tabular-nums" },
-                }}
-                domain={[0, 100]}
-                tickFormatter={(value) => `${value}%`}
-              />
-              <ChartTooltip cursor={false} content={<ChartTooltipContent />} />
-              {Object.keys(config).map((key) => (
-                <Line
-                  key={key}
-                  dataKey={key}
-                  type={lineType}
-                  stroke={config[key].color}
-                  strokeWidth={2}
-                  dot={false}
-                />
-              ))}
-            </LineChart>
-          )}
+          {renderChartContent()}
         </ChartContainer>
       </div>
     </div>
diff --git a/apps/webapp/app/components/primitives/charts/ChartLoading.tsx b/apps/webapp/app/components/primitives/charts/ChartLoading.tsx
index b8e20821f4..53d8c4c1d3 100644
--- a/apps/webapp/app/components/primitives/charts/ChartLoading.tsx
+++ b/apps/webapp/app/components/primitives/charts/ChartLoading.tsx
@@ -3,6 +3,7 @@ import { Button } from "../Buttons";
 import { Paragraph } from "../Paragraph";
 import { Spinner } from "../Spinner";
 import { useDateRange } from "./DateRangeContext";
+import { useMemo } from "react";
 
 export function ChartBarLoading() {
   return (
@@ -56,8 +57,12 @@ export function ChartInvalid() {
 
 export function ChartLineLoading() {
   return (
-    <div className="grid h-full place-items-center">
-      <Spinner className="size-6" />
+    <div className="relative grid h-full place-items-center p-2 pt-0">
+      <ChartLineLoadingBackground />
+      <div className="absolute z-10 flex items-center gap-2">
+        <Spinner className="size-6" />
+        <Paragraph variant="base/bright">Loading data…</Paragraph>
+      </div>
     </div>
   );
 }
@@ -128,3 +133,156 @@ function ChartBarLoadingBackground() {
     </motion.div>
   );
 }
+
+function ChartLineLoadingBackground() {
+  // Generate line points with configurable starting position and constraints
+  const generateLinePoints = (startY: number, minY: number, maxY: number) => {
+    const numPoints = 10;
+    const points = [];
+    let lastY = startY;
+
+    for (let i = 0; i < numPoints; i++) {
+      // Calculate x value that spreads points across the full width
+      const x = i * (9 / (numPoints - 1));
+
+      // Create less extreme variations that move smoothly
+      const change = Math.random() * 6 - 3; // Range from -3 to +3
+      const y = Math.max(minY, Math.min(maxY, lastY + change)); // Apply constraints
+
+      points.push({ x, y });
+      lastY = y;
+    }
+
+    return points;
+  };
+
+  // Generate points for both lines
+  const points = useMemo(() => generateLinePoints(30, 10, 90), []);
+  const secondPoints = useMemo(() => generateLinePoints(40, 30, 90), []);
+
+  const generateSmoothPath = (points: Array<{ x: number; y: number }>) => {
+    if (points.length < 2) return "";
+
+    let path = `M0,${50 - points[0].y}`;
+
+    // Use curve command for smooth lines
+    for (let i = 0; i < points.length - 1; i++) {
+      const x1 = points[i].x;
+      const y1 = 50 - points[i].y;
+      const x2 = points[i + 1].x;
+      const y2 = 50 - points[i + 1].y;
+
+      // Bezier control points (create smooth curve)
+      const cx1 = (x1 + x2) / 2;
+      const cy1 = y1;
+      const cx2 = (x1 + x2) / 2;
+      const cy2 = y2;
+
+      path += ` C${cx1},${cy1} ${cx2},${cy2} ${x2},${y2}`;
+    }
+
+    return path;
+  };
+
+  const generateAreaPath = (points: Array<{ x: number; y: number }>) => {
+    const curvePath = generateSmoothPath(points);
+    const lastX = 9;
+    return `${curvePath} L${lastX},50 L0,50 Z`;
+  };
+
+  // Component to render a line with area fill and animation
+  const AnimatedLine = ({
+    points,
+    gradientId,
+    delay = 0,
+  }: {
+    points: Array<{ x: number; y: number }>;
+    gradientId: string;
+    delay?: number;
+  }) => (
+    <>
+      <motion.path
+        d={generateAreaPath(points)}
+        fill={`url(#${gradientId})`}
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        transition={{ duration: 1, ease: "easeInOut", delay }}
+      />
+      <motion.path
+        d={generateSmoothPath(points)}
+        stroke="#212327"
+        strokeWidth="1"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        fill="none"
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 0.8 }}
+        transition={{ duration: 1.5, ease: "easeInOut", delay }}
+        vectorEffect="non-scaling-stroke"
+      />
+    </>
+  );
+
+  return (
+    <motion.div
+      className="flex h-full w-full flex-col"
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      transition={{ duration: 0.5 }}
+    >
+      <div className="relative flex-1">
+        <svg
+          className="absolute inset-0 h-full w-full"
+          viewBox="0 0 9 50"
+          preserveAspectRatio="none"
+        >
+          <defs>
+            <linearGradient id="areaGradient" x1="0" y1="0" x2="0" y2="1">
+              <stop offset="0%" stopColor="#212327" stopOpacity={0.3} />
+              <stop offset="100%" stopColor="#212327" stopOpacity={0} />
+            </linearGradient>
+            <linearGradient id="secondAreaGradient" x1="0" y1="0" x2="0" y2="1">
+              <stop offset="0%" stopColor="#212327" stopOpacity={0.3} />
+              <stop offset="100%" stopColor="#212327" stopOpacity={0} />
+            </linearGradient>
+          </defs>
+
+          <g>
+            <AnimatedLine points={points} gradientId="areaGradient" />
+            <AnimatedLine points={secondPoints} gradientId="secondAreaGradient" delay={0.2} />
+          </g>
+        </svg>
+      </div>
+
+      <motion.div
+        className="mt-2 flex flex-col justify-center gap-1"
+        initial={{ y: 10, opacity: 0 }}
+        animate={{ y: 0, opacity: 1 }}
+        transition={{
+          type: "spring",
+          stiffness: 100,
+          damping: 15,
+          delay: 0.2,
+        }}
+      >
+        {Array.from({ length: 5 }).map((_, i) => (
+          <motion.div
+            className="flex items-center gap-1"
+            key={i}
+            initial={{ x: -10, opacity: 0 }}
+            animate={{ x: 0, opacity: 1 }}
+            transition={{
+              type: "spring",
+              stiffness: 100,
+              damping: 12,
+              delay: 0.3 + i * 0.08,
+            }}
+          >
+            <div className="h-5 w-2 rounded-sm bg-charcoal-750/50" />
+            <div className="h-5 w-full rounded-sm bg-charcoal-750/50" />
+          </motion.div>
+        ))}
+      </motion.div>
+    </motion.div>
+  );
+}

From bd12f24bcb5da52dcde4758030966a241fd5e1cf Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Fri, 16 May 2025 10:23:28 +0100
Subject: [PATCH 075/137] Adds loading states for line charts

---
 .../components/primitives/charts/ChartBar.tsx |  6 +--
 .../primitives/charts/ChartLine.tsx           | 12 +++--
 .../primitives/charts/ChartLoading.tsx        | 50 ++++++++++++++++---
 3 files changed, 56 insertions(+), 12 deletions(-)

diff --git a/apps/webapp/app/components/primitives/charts/ChartBar.tsx b/apps/webapp/app/components/primitives/charts/ChartBar.tsx
index 577573c8cf..57a2c7ad31 100644
--- a/apps/webapp/app/components/primitives/charts/ChartBar.tsx
+++ b/apps/webapp/app/components/primitives/charts/ChartBar.tsx
@@ -20,7 +20,7 @@ import {
 import { cn } from "~/utils/cn";
 import { Button } from "../Buttons";
 import { Paragraph } from "../Paragraph";
-import { ChartBarLoading, ChartInvalid, ChartNoData } from "./ChartLoading";
+import { ChartBarLoading, ChartBarInvalid, ChartBarNoData } from "./ChartLoading";
 import { useDateRange } from "./DateRangeContext";
 
 //TODO: fix the first and last bars in a stack not having rounded corners
@@ -391,9 +391,9 @@ export function ChartBar({
     if (displayState === "loading") {
       return <ChartBarLoading />;
     } else if (displayState === "noData" || hasNoData) {
-      return <ChartNoData />;
+      return <ChartBarNoData />;
     } else if (displayState === "invalid") {
-      return <ChartInvalid />;
+      return <ChartBarInvalid />;
     }
 
     // Get the x-axis ticks based on tooltip state
diff --git a/apps/webapp/app/components/primitives/charts/ChartLine.tsx b/apps/webapp/app/components/primitives/charts/ChartLine.tsx
index 64656e5c12..f9bac7da95 100644
--- a/apps/webapp/app/components/primitives/charts/ChartLine.tsx
+++ b/apps/webapp/app/components/primitives/charts/ChartLine.tsx
@@ -7,7 +7,13 @@ import {
   ChartTooltipContent,
   type ChartState,
 } from "~/components/primitives/charts/Chart";
-import { ChartLineLoading, ChartNoData, ChartInvalid } from "./ChartLoading";
+import {
+  ChartLineLoading,
+  ChartBarNoData,
+  ChartBarInvalid,
+  ChartLineNoData,
+  ChartLineInvalid,
+} from "./ChartLoading";
 import { useDateRange } from "./DateRangeContext";
 
 type CurveType =
@@ -105,9 +111,9 @@ export function ChartLine({
     if (displayState === "loading") {
       return <ChartLineLoading />;
     } else if (displayState === "noData" || hasNoData) {
-      return <ChartNoData />;
+      return <ChartLineNoData />;
     } else if (displayState === "invalid") {
-      return <ChartInvalid />;
+      return <ChartLineInvalid />;
     }
 
     // Get the x-axis ticks based on tooltip state
diff --git a/apps/webapp/app/components/primitives/charts/ChartLoading.tsx b/apps/webapp/app/components/primitives/charts/ChartLoading.tsx
index 53d8c4c1d3..419bbf91aa 100644
--- a/apps/webapp/app/components/primitives/charts/ChartLoading.tsx
+++ b/apps/webapp/app/components/primitives/charts/ChartLoading.tsx
@@ -9,7 +9,7 @@ export function ChartBarLoading() {
   return (
     <div className="relative grid h-full place-items-center p-2 pt-0">
       <ChartBarLoadingBackground />
-      <div className="absolute z-10 flex items-center gap-2">
+      <div className="absolute z-10 mb-16 flex items-center gap-2">
         <Spinner className="size-6" />
         <Paragraph variant="base/bright">Loading data…</Paragraph>
       </div>
@@ -17,13 +17,13 @@ export function ChartBarLoading() {
   );
 }
 
-export function ChartNoData() {
+export function ChartBarNoData() {
   const dateRange = useDateRange();
 
   return (
     <div className="relative grid h-full place-items-center p-2 pt-0">
       <ChartBarLoadingBackground />
-      <div className="absolute z-10 flex flex-col items-center gap-2">
+      <div className="absolute z-10 mb-16 flex flex-col items-center gap-2">
         <Paragraph variant="small/bright">No data</Paragraph>
         <Paragraph variant="small" spacing>
           There's no data available for the filters you've set.
@@ -36,13 +36,13 @@ export function ChartNoData() {
   );
 }
 
-export function ChartInvalid() {
+export function ChartBarInvalid() {
   const dateRange = useDateRange();
 
   return (
     <div className="relative grid h-full place-items-center p-2 pt-0">
       <ChartBarLoadingBackground />
-      <div className="absolute z-10 flex flex-col items-center gap-2">
+      <div className="absolute z-10 mb-16 flex flex-col items-center gap-2">
         <Paragraph variant="small/bright">Chart not applicable</Paragraph>
         <Paragraph variant="small" spacing>
           Your current filter settings don't apply to this chart's data type.
@@ -57,7 +57,7 @@ export function ChartInvalid() {
 
 export function ChartLineLoading() {
   return (
-    <div className="relative grid h-full place-items-center p-2 pt-0">
+    <div className="relative mb-16 grid h-full place-items-center p-2 pt-0">
       <ChartLineLoadingBackground />
       <div className="absolute z-10 flex items-center gap-2">
         <Spinner className="size-6" />
@@ -67,6 +67,44 @@ export function ChartLineLoading() {
   );
 }
 
+export function ChartLineNoData() {
+  const dateRange = useDateRange();
+
+  return (
+    <div className="relative grid h-full place-items-center p-2 pt-0">
+      <ChartLineLoadingBackground />
+      <div className="absolute z-10 mb-16 flex flex-col items-center gap-2">
+        <Paragraph variant="small/bright">No data</Paragraph>
+        <Paragraph variant="small" spacing>
+          There's no data available for the filters you've set.
+        </Paragraph>
+        <Button variant="secondary/small" onClick={dateRange.resetDateRange}>
+          Clear filters
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+export function ChartLineInvalid() {
+  const dateRange = useDateRange();
+
+  return (
+    <div className="relative grid h-full place-items-center p-2 pt-0">
+      <ChartLineLoadingBackground />
+      <div className="absolute z-10 mb-16 flex flex-col items-center gap-2">
+        <Paragraph variant="small/bright">Chart not applicable</Paragraph>
+        <Paragraph variant="small" spacing>
+          Your current filter settings don't apply to this chart's data type.
+        </Paragraph>
+        <Button variant="secondary/small" onClick={dateRange.resetDateRange}>
+          Clear filters
+        </Button>
+      </div>
+    </div>
+  );
+}
+
 function ChartBarLoadingBackground() {
   return (
     <motion.div

From 05ce4abe181b8196a43ca16c3b5298492f422bff Mon Sep 17 00:00:00 2001
From: Matt Aitken <matt@mattaitken.com>
Date: Tue, 13 Jan 2026 17:00:27 +0000
Subject: [PATCH 076/137] Fix for bad import

---
 apps/webapp/app/components/code/QueryResultsChart.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/webapp/app/components/code/QueryResultsChart.tsx b/apps/webapp/app/components/code/QueryResultsChart.tsx
index c09a2c4757..712f7363e5 100644
--- a/apps/webapp/app/components/code/QueryResultsChart.tsx
+++ b/apps/webapp/app/components/code/QueryResultsChart.tsx
@@ -18,7 +18,7 @@ import {
   ChartLegendContent,
   ChartTooltip,
   ChartTooltipContent,
-} from "~/components/primitives/Chart";
+} from "~/components/primitives/charts/Chart";
 import { Paragraph } from "../primitives/Paragraph";
 import type { AggregationType, ChartConfiguration } from "./ChartConfigPanel";
 

From 7657817c93f5694f33811524b118dd3c8619a09d Mon Sep 17 00:00:00 2001
From: Matt Aitken <matt@mattaitken.com>
Date: Tue, 13 Jan 2026 23:21:00 +0000
Subject: [PATCH 077/137] Trying to integrate the chart into the app

---
 .../app/components/code/QueryResultsChart.tsx | 145 +++---------
 .../components/primitives/charts/ChartBar.tsx | 140 +++++++----
 .../primitives/charts/ChartLine.tsx           | 222 +++++++++++++-----
 .../primitives/charts/DateRangeContext.tsx    |   4 +-
 .../route.tsx                                 |  86 ++++---
 .../app/routes/storybook.charts/route.tsx     |   4 +-
 6 files changed, 339 insertions(+), 262 deletions(-)

diff --git a/apps/webapp/app/components/code/QueryResultsChart.tsx b/apps/webapp/app/components/code/QueryResultsChart.tsx
index 712f7363e5..cd06b823a0 100644
--- a/apps/webapp/app/components/code/QueryResultsChart.tsx
+++ b/apps/webapp/app/components/code/QueryResultsChart.tsx
@@ -1,24 +1,8 @@
 import type { OutputColumnMetadata } from "@internal/clickhouse";
 import { memo, useMemo } from "react";
-import {
-  Area,
-  AreaChart,
-  Bar,
-  BarChart,
-  CartesianGrid,
-  Line,
-  LineChart,
-  XAxis,
-  YAxis,
-} from "recharts";
-import {
-  type ChartConfig,
-  ChartContainer,
-  ChartLegend,
-  ChartLegendContent,
-  ChartTooltip,
-  ChartTooltipContent,
-} from "~/components/primitives/charts/Chart";
+import type { ChartConfig } from "~/components/primitives/charts/Chart";
+import { ChartBar } from "~/components/primitives/charts/ChartBar";
+import { ChartLine } from "~/components/primitives/charts/ChartLine";
 import { Paragraph } from "../primitives/Paragraph";
 import type { AggregationType, ChartConfiguration } from "./ChartConfigPanel";
 
@@ -806,11 +790,6 @@ export const QueryResultsChart = memo(function QueryResultsChart({
     return <EmptyState message="Unable to transform data for chart" />;
   }
 
-  const commonProps = {
-    data,
-    margin: { top: 10, right: 10, left: 10, bottom: 10 },
-  };
-
   // Determine appropriate angle for X-axis labels based on granularity
   const xAxisAngle = timeGranularity === "hours" || timeGranularity === "seconds" ? -45 : 0;
   const xAxisHeight = xAxisAngle !== 0 ? 60 : undefined;
@@ -818,110 +797,60 @@ export const QueryResultsChart = memo(function QueryResultsChart({
   // Build xAxisProps - different config for date-based (continuous) vs categorical axes
   const xAxisProps = isDateBased
     ? {
-        dataKey: xDataKey,
         type: "number" as const,
-        domain: timeDomain ?? ["auto", "auto"],
+        domain: timeDomain ?? (["auto", "auto"] as [string, string]),
         scale: "time" as const,
         // Explicitly specify tick positions so labels appear across the entire range
         ticks: timeTicks ?? undefined,
-        fontSize: 12,
-        tickLine: false,
-        tickMargin: 8,
-        axisLine: false,
-        tick: { fill: "var(--color-text-dimmed)" },
         tickFormatter: xAxisTickFormatter,
         angle: xAxisAngle,
         textAnchor: xAxisAngle !== 0 ? ("end" as const) : ("middle" as const),
         height: xAxisHeight,
       }
     : {
-        dataKey: xDataKey,
-        fontSize: 12,
-        tickLine: false,
-        tickMargin: 8,
-        axisLine: false,
-        tick: { fill: "var(--color-text-dimmed)" },
         angle: xAxisAngle,
         textAnchor: xAxisAngle !== 0 ? ("end" as const) : ("middle" as const),
         height: xAxisHeight,
       };
 
   const yAxisProps = {
-    fontSize: 12,
-    tickLine: false,
-    tickMargin: 8,
-    axisLine: false,
-    tick: { fill: "var(--color-text-dimmed)" },
     tickFormatter: yAxisFormatter,
   };
 
+  if (chartType === "bar") {
+    return (
+      <ChartBar
+        config={chartConfig}
+        data={data}
+        dataKey={xDataKey}
+        series={series}
+        xAxisProps={xAxisProps}
+        yAxisProps={yAxisProps}
+        stackId={stacked ? "stack" : undefined}
+        showLegend={series.length > 1}
+        simpleLegend={true}
+        enableZoom={false}
+        tooltipLabelFormatter={tooltipLabelFormatter}
+        minHeight="300px"
+      />
+    );
+  }
+
+  // Line or stacked area chart
   return (
-    <ChartContainer config={chartConfig} className="h-full min-h-[300px] w-full">
-      {chartType === "bar" ? (
-        <BarChart {...commonProps}>
-          <CartesianGrid vertical={false} strokeDasharray="3 3" />
-          <XAxis {...xAxisProps} />
-          <YAxis {...yAxisProps} />
-          <ChartTooltip
-            content={<ChartTooltipContent />}
-            labelFormatter={tooltipLabelFormatter}
-            cursor={{ fill: "var(--color-charcoal-800)", opacity: 0.5 }}
-          />
-          {series.length > 1 && <ChartLegend content={<ChartLegendContent />} />}
-          {series.map((s, i) => (
-            <Bar
-              key={s}
-              dataKey={s}
-              fill={getSeriesColor(i)}
-              stackId={stacked ? "stack" : undefined}
-              radius={stacked ? [0, 0, 0, 0] : [4, 4, 0, 0]}
-            />
-          ))}
-        </BarChart>
-      ) : stacked && series.length > 1 ? (
-        <AreaChart {...commonProps} stackOffset="none">
-          <CartesianGrid vertical={false} strokeDasharray="3 3" />
-          <XAxis {...xAxisProps} />
-          <YAxis {...yAxisProps} />
-          <ChartTooltip
-            content={<ChartTooltipContent indicator="line" />}
-            labelFormatter={tooltipLabelFormatter}
-          />
-          <ChartLegend content={<ChartLegendContent />} />
-          {series.map((s, i) => (
-            <Area
-              key={s}
-              type="linear"
-              dataKey={s}
-              stroke={getSeriesColor(i)}
-              fill={getSeriesColor(i)}
-              fillOpacity={0.6}
-              strokeWidth={2}
-              stackId="stack"
-            />
-          ))}
-        </AreaChart>
-      ) : (
-        <LineChart {...commonProps}>
-          <CartesianGrid vertical={false} strokeDasharray="3 3" />
-          <XAxis {...xAxisProps} />
-          <YAxis {...yAxisProps} />
-          <ChartTooltip content={<ChartTooltipContent />} labelFormatter={tooltipLabelFormatter} />
-          {series.length > 1 && <ChartLegend content={<ChartLegendContent />} />}
-          {series.map((s, i) => (
-            <Line
-              key={s}
-              type="linear"
-              dataKey={s}
-              stroke={getSeriesColor(i)}
-              strokeWidth={2}
-              dot={false}
-              activeDot={{ r: 4 }}
-            />
-          ))}
-        </LineChart>
-      )}
-    </ChartContainer>
+    <ChartLine
+      config={chartConfig}
+      data={data}
+      dataKey={xDataKey}
+      series={series}
+      xAxisProps={xAxisProps}
+      yAxisProps={yAxisProps}
+      stacked={stacked && series.length > 1}
+      showLegend={series.length > 1}
+      tooltipLabelFormatter={tooltipLabelFormatter}
+      lineType="linear"
+      minHeight="300px"
+    />
   );
 });
 
diff --git a/apps/webapp/app/components/primitives/charts/ChartBar.tsx b/apps/webapp/app/components/primitives/charts/ChartBar.tsx
index 57a2c7ad31..756bdddd74 100644
--- a/apps/webapp/app/components/primitives/charts/ChartBar.tsx
+++ b/apps/webapp/app/components/primitives/charts/ChartBar.tsx
@@ -8,12 +8,16 @@ import {
   ReferenceLine,
   XAxis,
   YAxis,
+  type XAxisProps,
+  type YAxisProps,
 } from "recharts";
 import {
   ChartContainer,
   ChartLegend,
+  ChartLegendContent,
   ChartLegendContentRows,
   ChartTooltip,
+  ChartTooltipContent,
   type ChartConfig,
   type ChartState,
 } from "~/components/primitives/charts/Chart";
@@ -40,6 +44,22 @@ type ChartBarProps = {
   useGlobalDateRange?: boolean;
   minHeight?: string;
   stackId?: string;
+  /** Series keys to render (if not provided, derived from config keys) */
+  series?: string[];
+  /** Custom X-axis props to merge with defaults */
+  xAxisProps?: Partial<XAxisProps>;
+  /** Custom Y-axis props to merge with defaults */
+  yAxisProps?: Partial<YAxisProps>;
+  /** Show legend (default true) */
+  showLegend?: boolean;
+  /** Enable zoom selection (default true) */
+  enableZoom?: boolean;
+  /** Custom tooltip label formatter */
+  tooltipLabelFormatter?: (label: string, payload: any[]) => string;
+  /** Use simple inline legend instead of row-based legend */
+  simpleLegend?: boolean;
+  /** Additional className for the container */
+  className?: string;
 };
 
 type TooltipProps = {
@@ -70,6 +90,14 @@ export function ChartBar({
   useGlobalDateRange = false,
   minHeight,
   stackId,
+  series: seriesProp,
+  xAxisProps: xAxisPropsProp,
+  yAxisProps: yAxisPropsProp,
+  showLegend = true,
+  enableZoom = true,
+  tooltipLabelFormatter,
+  simpleLegend = false,
+  className,
 }: ChartBarProps) {
   const globalDateRange = useDateRange();
   const [activePayload, setActivePayload] = React.useState<any[] | null>(null);
@@ -99,7 +127,7 @@ export function ChartBar({
 
   // Compute the visible data based on the zoom settings
   const data = useMemo(() => {
-    if (useGlobalDateRange) {
+    if (useGlobalDateRange && globalDateRange) {
       // Filter data based on global date range
       // Check if we have valid chart data
       if (initialData.length === 0) return [];
@@ -137,8 +165,8 @@ export function ChartBar({
   }, [
     initialData,
     useGlobalDateRange,
-    globalDateRange.startDate,
-    globalDateRange.endDate,
+    globalDateRange?.startDate,
+    globalDateRange?.endDate,
     localOriginalData,
     localStartIndex,
     localEndIndex,
@@ -175,10 +203,10 @@ export function ChartBar({
     }, {} as Record<string, number>);
   }, [data, dataKey]);
 
-  // Get all data keys except the x-axis key
+  // Get all data keys except the x-axis key (use series prop if provided)
   const dataKeys = useMemo(
-    () => Object.keys(config).filter((k) => k !== dataKey),
-    [config, dataKey]
+    () => seriesProp ?? Object.keys(config).filter((k) => k !== dataKey),
+    [seriesProp, config, dataKey]
   );
 
   // Get current data for the legend based on hover state
@@ -247,16 +275,21 @@ export function ChartBar({
   }, [config, dataKeys, maxLegendItems, activeBarKey]);
 
   // Handle mouse down for drag zooming
-  const handleMouseDown = useCallback((e: any) => {
-    if (e.activeLabel) {
-      setRefAreaLeft(e.activeLabel);
-      setIsSelecting(true);
-    }
-  }, []);
+  const handleMouseDown = useCallback(
+    (e: any) => {
+      if (!enableZoom) return;
+      if (e.activeLabel) {
+        setRefAreaLeft(e.activeLabel);
+        setIsSelecting(true);
+      }
+    },
+    [enableZoom]
+  );
 
   // Handle click on the chart area
   const handleChartClick = useCallback(
     (e: any) => {
+      if (!enableZoom) return;
       // Only process if we're not in selection mode and have a valid click position
       if (!isSelecting && e?.activeLabel) {
         // Toggle the inspection line - if clicking the same point, remove it; otherwise, set a new one
@@ -267,7 +300,7 @@ export function ChartBar({
         }
       }
     },
-    [isSelecting, inspectionLine]
+    [enableZoom, isSelecting, inspectionLine]
   );
 
   // Handle mouse move for drag zooming
@@ -329,7 +362,7 @@ export function ChartBar({
             const endDate = allDays[end];
 
             // Set the global date range using these ordered dates
-            globalDateRange.setDateRange(startDate, endDate);
+            globalDateRange?.setDateRange(startDate, endDate);
           }
         }
       } else {
@@ -370,6 +403,7 @@ export function ChartBar({
   // Handle bar stack click for inspection line
   const handleBarClick = useCallback(
     (barData: any, e: React.MouseEvent) => {
+      if (!enableZoom) return;
       // Prevent the event from propagating to the chart's onClick handler
       e.stopPropagation();
 
@@ -383,7 +417,7 @@ export function ChartBar({
         }
       }
     },
-    [isSelecting, inspectionLine, dataKey]
+    [enableZoom, isSelecting, inspectionLine, dataKey]
   );
 
   // Render appropriate content based on displayState
@@ -429,6 +463,7 @@ export function ChartBar({
             fontSize: 11,
             style: { fontVariantNumeric: "tabular-nums" },
           }}
+          {...xAxisPropsProp}
         />
         <YAxis
           axisLine={false}
@@ -440,17 +475,23 @@ export function ChartBar({
             style: { fontVariantNumeric: "tabular-nums" },
           }}
           domain={["auto", (dataMax: number) => dataMax * 1.15]}
+          {...yAxisPropsProp}
         />
         <ChartTooltip
           cursor={{ fill: "#2C3034" }}
           content={
-            <XAxisTooltip
-              isSelecting={isSelecting}
-              refAreaLeft={refAreaLeft}
-              refAreaRight={refAreaRight}
-              invalidSelection={invalidSelection}
-            />
+            tooltipLabelFormatter ? (
+              <ChartTooltipContent />
+            ) : (
+              <XAxisTooltip
+                isSelecting={isSelecting}
+                refAreaLeft={refAreaLeft}
+                refAreaRight={refAreaRight}
+                invalidSelection={invalidSelection}
+              />
+            )
           }
+          labelFormatter={tooltipLabelFormatter}
           allowEscapeViewBox={{ x: false, y: true }}
         />
         {dataKeys.map((key, index, array) => {
@@ -528,7 +569,7 @@ export function ChartBar({
           />
         )}
 
-        {inspectionLine && (
+        {enableZoom && inspectionLine && (
           <ReferenceLine
             x={inspectionLine}
             stroke="#D7D9DD"
@@ -541,7 +582,7 @@ export function ChartBar({
           />
         )}
 
-        {refAreaLeft && refAreaRight && (
+        {enableZoom && refAreaLeft && refAreaRight && (
           <ReferenceArea
             x1={refAreaLeft}
             x2={refAreaRight}
@@ -551,25 +592,30 @@ export function ChartBar({
           />
         )}
 
-        <ChartLegend
-          content={
-            <ChartLegendContentRows
-              onMouseEnter={(data) => {
-                if (data.dataKey === "view-more") return;
-                setActiveBarKey(data.dataKey);
-                setActiveDataPointIndex(null); // Reset this when hovering over legend
-              }}
-              onMouseLeave={resetHighlightState}
-              data={currentData}
-              activeKey={activeBarKey}
+        {showLegend &&
+          (simpleLegend ? (
+            <ChartLegend content={<ChartLegendContent />} />
+          ) : (
+            <ChartLegend
+              content={
+                <ChartLegendContentRows
+                  onMouseEnter={(data) => {
+                    if (data.dataKey === "view-more") return;
+                    setActiveBarKey(data.dataKey);
+                    setActiveDataPointIndex(null); // Reset this when hovering over legend
+                  }}
+                  onMouseLeave={resetHighlightState}
+                  data={currentData}
+                  activeKey={activeBarKey}
+                  payload={legendPayload}
+                  renderViewMore={(remainingCount: number) => (
+                    <ViewAllDataRow key="view-more" remainingCount={remainingCount} />
+                  )}
+                />
+              }
               payload={legendPayload}
-              renderViewMore={(remainingCount: number) => (
-                <ViewAllDataRow key="view-more" remainingCount={remainingCount} />
-              )}
             />
-          }
-          payload={legendPayload}
-        />
+          ))}
       </BarChart>
     );
   }, [
@@ -597,19 +643,27 @@ export function ChartBar({
     refAreaRight,
     legendPayload,
     currentData,
+    xAxisPropsProp,
+    yAxisPropsProp,
+    tooltipLabelFormatter,
+    showLegend,
+    simpleLegend,
+    enableZoom,
   ]);
 
   return (
-    <div className="relative flex w-full flex-col">
+    <div className={cn("relative flex w-full flex-col", className)}>
       <div
         ref={containerRef}
-        className="mt-8 h-full w-full cursor-crosshair"
+        className={cn("h-full w-full", enableZoom && "mt-8 cursor-crosshair")}
         style={{ touchAction: "none", userSelect: "none" }}
       >
         <ChartContainer
           config={config}
           className={cn(
-            "h-full w-full [&_.recharts-surface]:cursor-crosshair [&_.recharts-wrapper]:cursor-crosshair"
+            "h-full w-full",
+            enableZoom &&
+              "[&_.recharts-surface]:cursor-crosshair [&_.recharts-wrapper]:cursor-crosshair"
           )}
           style={minHeight ? { minHeight } : undefined}
         >
diff --git a/apps/webapp/app/components/primitives/charts/ChartLine.tsx b/apps/webapp/app/components/primitives/charts/ChartLine.tsx
index f9bac7da95..d45010de99 100644
--- a/apps/webapp/app/components/primitives/charts/ChartLine.tsx
+++ b/apps/webapp/app/components/primitives/charts/ChartLine.tsx
@@ -1,19 +1,26 @@
 import React, { useCallback, useMemo } from "react";
-import { CartesianGrid, Line, LineChart, XAxis, YAxis } from "recharts";
+import {
+  Area,
+  AreaChart,
+  CartesianGrid,
+  Line,
+  LineChart,
+  XAxis,
+  YAxis,
+  type XAxisProps,
+  type YAxisProps,
+} from "recharts";
 import {
   type ChartConfig,
   ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
   ChartTooltip,
   ChartTooltipContent,
   type ChartState,
 } from "~/components/primitives/charts/Chart";
-import {
-  ChartLineLoading,
-  ChartBarNoData,
-  ChartBarInvalid,
-  ChartLineNoData,
-  ChartLineInvalid,
-} from "./ChartLoading";
+import { cn } from "~/utils/cn";
+import { ChartLineLoading, ChartLineNoData, ChartLineInvalid } from "./ChartLoading";
 import { useDateRange } from "./DateRangeContext";
 
 type CurveType =
@@ -30,6 +37,31 @@ type CurveType =
   | "stepBefore"
   | "stepAfter";
 
+type ChartLineProps = {
+  config: ChartConfig;
+  data: any[];
+  dataKey: string;
+  state?: ChartState;
+  useGlobalDateRange?: boolean;
+  lineType?: CurveType;
+  /** Series keys to render (if not provided, derived from config keys) */
+  series?: string[];
+  /** Custom X-axis props to merge with defaults */
+  xAxisProps?: Partial<XAxisProps>;
+  /** Custom Y-axis props to merge with defaults */
+  yAxisProps?: Partial<YAxisProps>;
+  /** Render as stacked area chart instead of line chart */
+  stacked?: boolean;
+  /** Custom tooltip label formatter */
+  tooltipLabelFormatter?: (label: string, payload: any[]) => string;
+  /** Show legend (default false) */
+  showLegend?: boolean;
+  /** Additional className for the container */
+  className?: string;
+  /** Minimum height for the chart */
+  minHeight?: string;
+};
+
 export function ChartLine({
   config,
   data: initialData,
@@ -37,14 +69,15 @@ export function ChartLine({
   state,
   useGlobalDateRange = false,
   lineType = "step",
-}: {
-  config: ChartConfig;
-  data: any[];
-  dataKey: string;
-  state?: ChartState;
-  useGlobalDateRange?: boolean;
-  lineType?: CurveType;
-}) {
+  series: seriesProp,
+  xAxisProps: xAxisPropsProp,
+  yAxisProps: yAxisPropsProp,
+  stacked = false,
+  tooltipLabelFormatter,
+  showLegend = false,
+  className,
+  minHeight,
+}: ChartLineProps) {
   const globalDateRange = useDateRange();
   const [tooltipActive, setTooltipActive] = React.useState(false);
 
@@ -65,8 +98,8 @@ export function ChartLine({
         .sort();
 
       // Check if our date range is in the available dates
-      const startDateIndex = allDays.findIndex((day) => day === globalDateRange.startDate);
-      const endDateIndex = allDays.findIndex((day) => day === globalDateRange.endDate);
+      const startDateIndex = allDays.findIndex((day) => day === globalDateRange?.startDate);
+      const endDateIndex = allDays.findIndex((day) => day === globalDateRange?.endDate);
 
       // If we can't find the exact dates, just return all data
       if (startDateIndex === -1 || endDateIndex === -1) {
@@ -85,26 +118,29 @@ export function ChartLine({
   }, [
     initialData,
     useGlobalDateRange,
-    globalDateRange.startDate,
-    globalDateRange.endDate,
+    globalDateRange?.startDate,
+    globalDateRange?.endDate,
     dataKey,
   ]);
 
+  // Get all data keys except the x-axis key (use series prop if provided)
+  const dataKeys = useMemo(
+    () => seriesProp ?? Object.keys(config).filter((k) => k !== dataKey),
+    [seriesProp, config, dataKey]
+  );
+
   // Check if data has no values (all zero or null)
   const hasNoData = useMemo(() => {
     if (data.length === 0) return true;
 
-    // Get all data keys except the x-axis key
-    const valueKeys = Object.keys(config).filter((k) => k !== dataKey);
-
-    // Check if all data points have zero or null values for all valueKeys
+    // Check if all data points have zero or null values for all dataKeys
     return data.every((item) => {
-      return valueKeys.every((key) => {
+      return dataKeys.every((key) => {
         const value = item[key];
         return value === 0 || value === null || value === undefined;
       });
     });
-  }, [data, config, dataKey]);
+  }, [data, dataKeys]);
 
   // Render appropriate content based on displayState
   const renderChartContent = useCallback(() => {
@@ -122,6 +158,72 @@ export function ChartLine({
         ? [data[0]?.[dataKey], data[data.length - 1]?.[dataKey]]
         : undefined;
 
+    const xAxisConfig = {
+      dataKey,
+      tickLine: false,
+      axisLine: false,
+      tickMargin: 10,
+      ticks: xAxisTicks,
+      interval: "preserveStartEnd" as const,
+      tick: {
+        fill: "#878C99",
+        fontSize: 11,
+        style: { fontVariantNumeric: "tabular-nums" },
+      },
+      ...xAxisPropsProp,
+    };
+
+    const yAxisConfig = {
+      axisLine: false,
+      tickLine: false,
+      tickMargin: 8,
+      tick: {
+        fill: "#878C99",
+        fontSize: 11,
+        style: { fontVariantNumeric: "tabular-nums" },
+      },
+      ...yAxisPropsProp,
+    };
+
+    // Render stacked area chart if stacked prop is true
+    if (stacked && dataKeys.length > 1) {
+      return (
+        <AreaChart
+          data={data}
+          stackOffset="none"
+          margin={{
+            left: 12,
+            right: 12,
+          }}
+          onMouseEnter={() => setTooltipActive(true)}
+          onMouseLeave={() => setTooltipActive(false)}
+        >
+          <CartesianGrid vertical={false} stroke="#272A2E" strokeDasharray="3 3" />
+          <XAxis {...xAxisConfig} />
+          <YAxis {...yAxisConfig} />
+          <ChartTooltip
+            cursor={false}
+            content={<ChartTooltipContent indicator="line" />}
+            labelFormatter={tooltipLabelFormatter}
+          />
+          {showLegend && <ChartLegend content={<ChartLegendContent />} />}
+          {dataKeys.map((key) => (
+            <Area
+              key={key}
+              type={lineType}
+              dataKey={key}
+              stroke={config[key]?.color}
+              fill={config[key]?.color}
+              fillOpacity={0.6}
+              strokeWidth={2}
+              stackId="stack"
+              isAnimationActive={false}
+            />
+          ))}
+        </AreaChart>
+      );
+    }
+
     return (
       <LineChart
         accessibilityLayer
@@ -133,55 +235,53 @@ export function ChartLine({
         onMouseEnter={() => setTooltipActive(true)}
         onMouseLeave={() => setTooltipActive(false)}
       >
-        <CartesianGrid vertical={false} stroke="#272A2E" />
-        <XAxis
-          dataKey={dataKey}
-          tickLine={false}
-          axisLine={false}
-          tickMargin={10}
-          ticks={xAxisTicks}
-          interval="preserveStartEnd"
-          tick={{
-            fill: "#878C99",
-            fontSize: 11,
-            style: { fontVariantNumeric: "tabular-nums" },
-          }}
-        />
-        <YAxis
-          axisLine={false}
-          tickLine={false}
-          tickMargin={8}
-          tick={{
-            fill: "#878C99",
-            fontSize: 11,
-            style: { fontVariantNumeric: "tabular-nums" },
-          }}
-          domain={[0, 100]}
-          tickFormatter={(value) => `${value}%`}
+        <CartesianGrid vertical={false} stroke="#272A2E" strokeDasharray="3 3" />
+        <XAxis {...xAxisConfig} />
+        <YAxis {...yAxisConfig} />
+        <ChartTooltip
+          cursor={false}
+          content={<ChartTooltipContent />}
+          labelFormatter={tooltipLabelFormatter}
         />
-        <ChartTooltip cursor={false} content={<ChartTooltipContent />} />
-        {Object.keys(config).map((key) => (
+        {showLegend && <ChartLegend content={<ChartLegendContent />} />}
+        {dataKeys.map((key) => (
           <Line
             key={key}
             dataKey={key}
             type={lineType}
-            stroke={config[key].color}
+            stroke={config[key]?.color}
             strokeWidth={2}
             dot={false}
+            activeDot={{ r: 4 }}
             isAnimationActive={false}
           />
         ))}
       </LineChart>
     );
-  }, [displayState, hasNoData, tooltipActive, data, dataKey, config, lineType]);
+  }, [
+    displayState,
+    hasNoData,
+    tooltipActive,
+    data,
+    dataKey,
+    dataKeys,
+    config,
+    lineType,
+    stacked,
+    xAxisPropsProp,
+    yAxisPropsProp,
+    tooltipLabelFormatter,
+    showLegend,
+  ]);
 
   return (
-    <div className="relative flex w-full flex-col">
-      <div
-        className="mt-8 h-full w-full cursor-crosshair"
-        style={{ touchAction: "none", userSelect: "none" }}
-      >
-        <ChartContainer config={config} className="min-h-[200px] w-full">
+    <div className={cn("relative flex w-full flex-col", className)}>
+      <div className="h-full w-full" style={{ touchAction: "none", userSelect: "none" }}>
+        <ChartContainer
+          config={config}
+          className="min-h-[200px] w-full"
+          style={minHeight ? { minHeight } : undefined}
+        >
           {renderChartContent()}
         </ChartContainer>
       </div>
diff --git a/apps/webapp/app/components/primitives/charts/DateRangeContext.tsx b/apps/webapp/app/components/primitives/charts/DateRangeContext.tsx
index 3ec027ca7b..e6ad7132e7 100644
--- a/apps/webapp/app/components/primitives/charts/DateRangeContext.tsx
+++ b/apps/webapp/app/components/primitives/charts/DateRangeContext.tsx
@@ -58,10 +58,10 @@ export function DateRangeProvider({
   );
 }
 
-export function useDateRange() {
+export function useDateRange(): DateRangeContextType | null {
   const context = useContext(DateRangeContext);
   if (!context) {
-    throw new Error("useDateRange must be used within a DateRangeProvider");
+    return null;
   }
   return context;
 }
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.settings.usage/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.settings.usage/route.tsx
index 1d86f318d6..21f9e95444 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.settings.usage/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.settings.usage/route.tsx
@@ -2,18 +2,13 @@ import { InformationCircleIcon } from "@heroicons/react/20/solid";
 import { Await, type MetaFunction } from "@remix-run/react";
 import { type LoaderFunctionArgs } from "@remix-run/server-runtime";
 import { formatDurationMilliseconds } from "@trigger.dev/core/v3";
-import { Suspense } from "react";
-import { Bar, BarChart, CartesianGrid, XAxis, YAxis } from "recharts";
+import { Suspense, useMemo } from "react";
 import { redirect, typeddefer, useTypedLoaderData } from "remix-typedjson";
 import { URL } from "url";
 import { UsageBar } from "~/components/billing/UsageBar";
 import { PageBody, PageContainer } from "~/components/layout/AppLayout";
-import {
-  type ChartConfig,
-  ChartContainer,
-  ChartTooltip,
-  ChartTooltipContent,
-} from "~/components/primitives/charts/Chart";
+import type { ChartConfig } from "~/components/primitives/charts/Chart";
+import { ChartBar } from "~/components/primitives/charts/ChartBar";
 import { Header2 } from "~/components/primitives/Headers";
 import { InfoPanel } from "~/components/primitives/InfoPanel";
 import { NavBar, PageTitle } from "~/components/primitives/PageHeader";
@@ -298,44 +293,43 @@ function UsageChart({ data }: { data: UsageSeriesData }) {
   const maxDollar = Math.max(...data.map((d) => d.dollars));
   const decimalPlaces = maxDollar < 1 ? 4 : 2;
 
-  return (
-    <ChartContainer config={chartConfig} className="max-h-96 min-h-40 w-full">
-      <BarChart accessibilityLayer data={data}>
-        <CartesianGrid vertical={false} />
-        <XAxis
-          fontSize={12}
-          tickLine={false}
-          tickMargin={10}
-          axisLine={false}
-          dataKey="date"
-          tickFormatter={(value) => {
-            if (!value) return "";
-            const date = new Date(value);
-            return `${date.getDate()}`;
-          }}
-          className="text-xs"
-        />
-        <YAxis
-          fontSize={12}
-          tickLine={false}
-          tickMargin={10}
-          axisLine={false}
-          allowDecimals={true}
-          tickFormatter={(value) => `$${value.toFixed(decimalPlaces)}`}
-        />
-        <ChartTooltip
-          content={<ChartTooltipContent />}
-          labelFormatter={(value, data) => {
-            const dateString = data.at(0)?.payload.date;
-            if (!dateString) {
-              return "";
-            }
+  const xAxisTickFormatter = useMemo(
+    () => (value: string) => {
+      if (!value) return "";
+      const date = new Date(value);
+      return `${date.getDate()}`;
+    },
+    []
+  );
+
+  const yAxisTickFormatter = useMemo(
+    () => (value: number) => `$${value.toFixed(decimalPlaces)}`,
+    [decimalPlaces]
+  );
 
-            return tooltipDateFormatter.format(new Date(dateString));
-          }}
-        />
-        <Bar dataKey="dollars" fill="var(--color-dollars)" radius={[4, 4, 0, 0]} />
-      </BarChart>
-    </ChartContainer>
+  const tooltipLabelFormatter = useMemo(
+    () => (_label: string, payload: Array<{ payload?: Record<string, unknown> }>) => {
+      const dateString = payload.at(0)?.payload?.date as string | undefined;
+      if (!dateString) {
+        return "";
+      }
+      return tooltipDateFormatter.format(new Date(dateString));
+    },
+    []
+  );
+
+  return (
+    <ChartBar
+      config={chartConfig}
+      data={data}
+      dataKey="date"
+      showLegend={false}
+      enableZoom={false}
+      xAxisProps={{ tickFormatter: xAxisTickFormatter }}
+      yAxisProps={{ tickFormatter: yAxisTickFormatter, allowDecimals: true }}
+      tooltipLabelFormatter={tooltipLabelFormatter}
+      minHeight="160px"
+      className="max-h-96"
+    />
   );
 }
diff --git a/apps/webapp/app/routes/storybook.charts/route.tsx b/apps/webapp/app/routes/storybook.charts/route.tsx
index 872b8a2d14..84d6c046f8 100644
--- a/apps/webapp/app/routes/storybook.charts/route.tsx
+++ b/apps/webapp/app/routes/storybook.charts/route.tsx
@@ -45,8 +45,8 @@ function ChartsDashboard() {
           </RadioGroup>
         </div>
         <div className="flex w-fit items-center gap-4">
-          <Paragraph variant="small/bright">{`Selected range: ${dateRange.startDate} - ${dateRange.endDate}`}</Paragraph>
-          <Button variant="secondary/small" onClick={dateRange.resetDateRange}>
+          <Paragraph variant="small/bright">{`Selected range: ${dateRange?.startDate} - ${dateRange?.endDate}`}</Paragraph>
+          <Button variant="secondary/small" onClick={dateRange?.resetDateRange}>
             Reset Zoom
           </Button>
         </div>

From bcb604fbd3fbe7fc6110fb50efd4dd600e52c347 Mon Sep 17 00:00:00 2001
From: Matt Aitken <matt@mattaitken.com>
Date: Wed, 14 Jan 2026 10:38:51 +0000
Subject: [PATCH 078/137] Started refactor

---
 .../components/primitives/charts/ChartBar.tsx | 946 +++++-------------
 .../primitives/charts/ChartCompound.tsx       | 106 ++
 .../primitives/charts/ChartContext.tsx        |  89 ++
 .../primitives/charts/ChartLegendCompound.tsx | 155 +++
 .../primitives/charts/ChartLine.tsx           | 402 ++++----
 .../primitives/charts/ChartRoot.tsx           | 144 +++
 .../primitives/charts/ChartZoom.tsx           | 228 +++++
 .../charts/hooks/useHighlightState.ts         | 115 +++
 .../charts/hooks/useZoomSelection.ts          | 163 +++
 .../app/routes/storybook.charts/route.tsx     | 133 ++-
 10 files changed, 1553 insertions(+), 928 deletions(-)
 create mode 100644 apps/webapp/app/components/primitives/charts/ChartCompound.tsx
 create mode 100644 apps/webapp/app/components/primitives/charts/ChartContext.tsx
 create mode 100644 apps/webapp/app/components/primitives/charts/ChartLegendCompound.tsx
 create mode 100644 apps/webapp/app/components/primitives/charts/ChartRoot.tsx
 create mode 100644 apps/webapp/app/components/primitives/charts/ChartZoom.tsx
 create mode 100644 apps/webapp/app/components/primitives/charts/hooks/useHighlightState.ts
 create mode 100644 apps/webapp/app/components/primitives/charts/hooks/useZoomSelection.ts

diff --git a/apps/webapp/app/components/primitives/charts/ChartBar.tsx b/apps/webapp/app/components/primitives/charts/ChartBar.tsx
index 756bdddd74..398137fc1b 100644
--- a/apps/webapp/app/components/primitives/charts/ChartBar.tsx
+++ b/apps/webapp/app/components/primitives/charts/ChartBar.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo } from "react";
+import React, { useCallback, useMemo } from "react";
 import {
   Bar,
   BarChart,
@@ -12,20 +12,19 @@ import {
   type YAxisProps,
 } from "recharts";
 import {
-  ChartContainer,
-  ChartLegend,
-  ChartLegendContent,
-  ChartLegendContentRows,
   ChartTooltip,
   ChartTooltipContent,
   type ChartConfig,
   type ChartState,
 } from "~/components/primitives/charts/Chart";
 import { cn } from "~/utils/cn";
-import { Button } from "../Buttons";
-import { Paragraph } from "../Paragraph";
 import { ChartBarLoading, ChartBarInvalid, ChartBarNoData } from "./ChartLoading";
-import { useDateRange } from "./DateRangeContext";
+import { useChartContext } from "./ChartContext";
+import { ChartRoot, useHasNoData } from "./ChartRoot";
+import { ChartLegendCompound } from "./ChartLegendCompound";
+import { ChartZoom, ZoomTooltip, useZoomHandlers } from "./ChartZoom";
+import { getBarOpacity } from "./hooks/useHighlightState";
+import type { ZoomRange } from "./hooks/useZoomSelection";
 
 //TODO: fix the first and last bars in a stack not having rounded corners
 
@@ -34,13 +33,222 @@ type ReferenceLineProps = {
   label: string;
 };
 
-type ChartBarProps = {
+// ============================================================================
+// COMPOUND COMPONENT API
+// ============================================================================
+
+export type ChartBarRendererProps = {
+  /** Stack ID for stacked bar charts */
+  stackId?: string;
+  /** Custom X-axis props to merge with defaults */
+  xAxisProps?: Partial<XAxisProps>;
+  /** Custom Y-axis props to merge with defaults */
+  yAxisProps?: Partial<YAxisProps>;
+  /** Reference line (horizontal) */
+  referenceLine?: ReferenceLineProps;
+  /** Custom tooltip label formatter */
+  tooltipLabelFormatter?: (label: string, payload: any[]) => string;
+  /** Show legend (default false) */
+  showLegend?: boolean;
+  /** Maximum legend items before collapsing */
+  maxLegendItems?: number;
+  /** Use simple inline legend */
+  simpleLegend?: boolean;
+};
+
+/**
+ * Bar chart renderer for the compound component system.
+ * Must be used within a Chart.Root.
+ *
+ * @example
+ * ```tsx
+ * <Chart.Root config={config} data={data} dataKey="day">
+ *   <Chart.Bar stackId="a" />
+ *   <Chart.Legend />
+ * </Chart.Root>
+ * ```
+ */
+export function ChartBarRenderer({
+  stackId,
+  xAxisProps: xAxisPropsProp,
+  yAxisProps: yAxisPropsProp,
+  referenceLine,
+  tooltipLabelFormatter,
+  showLegend = false,
+  maxLegendItems = 5,
+  simpleLegend = false,
+}: ChartBarRendererProps) {
+  const { config, data, dataKey, dataKeys, state, highlight, zoom } = useChartContext();
+  const hasNoData = useHasNoData();
+  const zoomHandlers = useZoomHandlers();
+  const enableZoom = zoom !== null;
+
+  const handleBarClick = useCallback(
+    (barData: any, e: React.MouseEvent) => {
+      if (!enableZoom || !zoom) return;
+      e.stopPropagation();
+
+      if (!zoom.isSelecting) {
+        zoom.toggleInspectionLine(barData[dataKey]);
+      }
+    },
+    [enableZoom, zoom, dataKey]
+  );
+
+  // Handle mouse leave to also reset highlight
+  const handleMouseLeave = useCallback(() => {
+    zoomHandlers.onMouseLeave?.();
+    highlight.reset();
+  }, [zoomHandlers, highlight]);
+
+  // Render loading/error states
+  if (state === "loading") {
+    return <ChartBarLoading />;
+  } else if (state === "noData" || hasNoData) {
+    return <ChartBarNoData />;
+  } else if (state === "invalid") {
+    return <ChartBarInvalid />;
+  }
+
+  // Get the x-axis ticks based on tooltip state
+  const xAxisTicks =
+    highlight.tooltipActive && data.length > 2
+      ? [data[0]?.[dataKey], data[data.length - 1]?.[dataKey]]
+      : undefined;
+
+  return (
+    <BarChart
+      data={data}
+      barCategoryGap={1}
+      onMouseDown={zoomHandlers.onMouseDown}
+      onMouseMove={(e: any) => {
+        zoomHandlers.onMouseMove?.(e);
+        // Update active payload for legend
+        if (e?.activePayload?.length) {
+          highlight.setActivePayload(e.activePayload);
+          highlight.setTooltipActive(true);
+        } else {
+          highlight.setTooltipActive(false);
+        }
+      }}
+      onMouseUp={zoomHandlers.onMouseUp}
+      onClick={zoomHandlers.onClick}
+      onMouseLeave={handleMouseLeave}
+    >
+      <CartesianGrid vertical={false} stroke="#272A2E" />
+      <XAxis
+        dataKey={dataKey}
+        tickLine={false}
+        tickMargin={10}
+        axisLine={false}
+        ticks={xAxisTicks}
+        interval="preserveStartEnd"
+        tick={{
+          fill: "#878C99",
+          fontSize: 11,
+          style: { fontVariantNumeric: "tabular-nums" },
+        }}
+        {...xAxisPropsProp}
+      />
+      <YAxis
+        axisLine={false}
+        tickLine={false}
+        tickMargin={8}
+        tick={{
+          fill: "#878C99",
+          fontSize: 11,
+          style: { fontVariantNumeric: "tabular-nums" },
+        }}
+        domain={["auto", (dataMax: number) => dataMax * 1.15]}
+        {...yAxisPropsProp}
+      />
+      <ChartTooltip
+        cursor={{ fill: "#2C3034" }}
+        content={tooltipLabelFormatter ? <ChartTooltipContent /> : <ZoomTooltip />}
+        labelFormatter={tooltipLabelFormatter}
+        allowEscapeViewBox={{ x: false, y: true }}
+      />
+      {dataKeys.map((key, index, array) => {
+        return (
+          <Bar
+            key={key}
+            dataKey={key}
+            stackId={stackId}
+            fill={config[key]?.color}
+            radius={
+              [
+                index === array.length - 1 ? 2 : 0,
+                index === array.length - 1 ? 2 : 0,
+                index === 0 ? 2 : 0,
+                index === 0 ? 2 : 0,
+              ] as [number, number, number, number]
+            }
+            activeBar={false}
+            fillOpacity={1}
+            onClick={(data, index, e) => handleBarClick(data, e)}
+            onMouseEnter={(entry, index) => {
+              if (entry.tooltipPayload?.[0]) {
+                const { dataKey: hoveredKey } = entry.tooltipPayload[0];
+                highlight.setHoveredBar(hoveredKey, index);
+              }
+            }}
+            onMouseLeave={highlight.reset}
+            isAnimationActive={false}
+          >
+            {data.map((_, dataIndex) => {
+              // Don't dim bars during zoom selection
+              const opacity = zoom?.isSelecting ? 1 : getBarOpacity(key, dataIndex, highlight);
+
+              return (
+                <Cell
+                  key={`cell-${key}-${dataIndex}`}
+                  fill={config[key]?.color}
+                  fillOpacity={opacity}
+                />
+              );
+            })}
+          </Bar>
+        );
+      })}
+
+      {/* Horizontal reference line */}
+      {referenceLine && (
+        <ReferenceLine
+          y={referenceLine.value}
+          label={{
+            position: "top",
+            value: referenceLine.label,
+            fill: "#878C99",
+            fontSize: 11,
+          }}
+          isFront={true}
+          stroke="#3B3E45"
+          strokeDasharray="4 4"
+          className="pointer-events-none"
+        />
+      )}
+
+      {/* Zoom components */}
+      {enableZoom && <ChartZoom />}
+
+      {/* Legend */}
+      {showLegend && <ChartLegendCompound maxItems={maxLegendItems} simple={simpleLegend} />}
+    </BarChart>
+  );
+}
+
+// ============================================================================
+// LEGACY API (for backward compatibility)
+// ============================================================================
+
+type LegacyChartBarProps = {
   config: ChartConfig;
   data: any[];
   dataKey: string;
   state?: ChartState;
   maxLegendItems?: number;
   referenceLine?: ReferenceLineProps;
+  /** @deprecated Use onZoomChange callback instead */
   useGlobalDateRange?: boolean;
   minHeight?: string;
   stackId?: string;
@@ -54,6 +262,8 @@ type ChartBarProps = {
   showLegend?: boolean;
   /** Enable zoom selection (default true) */
   enableZoom?: boolean;
+  /** Callback when zoom range changes */
+  onZoomChange?: (range: ZoomRange) => void;
   /** Custom tooltip label formatter */
   tooltipLabelFormatter?: (label: string, payload: any[]) => string;
   /** Use simple inline legend instead of row-based legend */
@@ -62,27 +272,21 @@ type ChartBarProps = {
   className?: string;
 };
 
-type TooltipProps = {
-  active?: boolean;
-  payload?: any[];
-  label?: string;
-  viewBox?: {
-    height: number;
-    width: number;
-  };
-  coordinate?: {
-    x: number;
-    y: number;
-  };
-  isSelecting: boolean;
-  refAreaLeft: string | null;
-  refAreaRight: string | null;
-  invalidSelection: boolean;
-};
-
+/**
+ * Legacy ChartBar component for backward compatibility.
+ * Uses the new compound component system internally.
+ *
+ * For new code, prefer the compound component API:
+ * ```tsx
+ * <Chart.Root config={config} data={data} dataKey="day" enableZoom onZoomChange={handleZoom}>
+ *   <Chart.Bar stackId="a" />
+ *   <Chart.Legend />
+ * </Chart.Root>
+ * ```
+ */
 export function ChartBar({
   config,
-  data: initialData,
+  data,
   dataKey,
   state,
   maxLegendItems = 5,
@@ -90,671 +294,41 @@ export function ChartBar({
   useGlobalDateRange = false,
   minHeight,
   stackId,
-  series: seriesProp,
-  xAxisProps: xAxisPropsProp,
-  yAxisProps: yAxisPropsProp,
+  series,
+  xAxisProps,
+  yAxisProps,
   showLegend = true,
   enableZoom = true,
+  onZoomChange,
   tooltipLabelFormatter,
   simpleLegend = false,
   className,
-}: ChartBarProps) {
-  const globalDateRange = useDateRange();
-  const [activePayload, setActivePayload] = React.useState<any[] | null>(null);
-  const [activeBarKey, setActiveBarKey] = React.useState<string | null>(null);
-  const [activeDataPointIndex, setActiveDataPointIndex] = React.useState<number | null>(null);
-  const [tooltipActive, setTooltipActive] = React.useState(false);
-  const [inspectionLine, setInspectionLine] = React.useState<string | null>(null);
-  const [refAreaLeft, setRefAreaLeft] = React.useState<string | null>(null);
-  const [refAreaRight, setRefAreaRight] = React.useState<string | null>(null);
-  const [localStartIndex, setLocalStartIndex] = React.useState<number>(0);
-  const [localEndIndex, setLocalEndIndex] = React.useState<number>(initialData.length - 1);
-  const [localOriginalData, setLocalOriginalData] = React.useState<any[]>(initialData);
-  const [isSelecting, setIsSelecting] = React.useState(false);
-  const [invalidSelection, setInvalidSelection] = React.useState(false);
-  const containerRef = React.useRef<HTMLDivElement>(null);
-
-  const displayState = state;
-
-  // Update local data when initialData changes and we're not using global
-  useEffect(() => {
-    if (!useGlobalDateRange) {
-      setLocalOriginalData(initialData);
-      setLocalStartIndex(0);
-      setLocalEndIndex(initialData.length - 1);
-    }
-  }, [initialData, useGlobalDateRange]);
-
-  // Compute the visible data based on the zoom settings
-  const data = useMemo(() => {
-    if (useGlobalDateRange && globalDateRange) {
-      // Filter data based on global date range
-      // Check if we have valid chart data
-      if (initialData.length === 0) return [];
-
-      // Get a sorted list of all available day values
-      const allDays = initialData
-        .map((item) => item[dataKey] as string)
-        .filter(Boolean)
-        .sort();
-
-      // Check if our date range is in the available dates
-      const startDateIndex = allDays.findIndex((day) => day === globalDateRange.startDate);
-      const endDateIndex = allDays.findIndex((day) => day === globalDateRange.endDate);
-
-      // If we can't find the exact dates, just return all data
-      if (startDateIndex === -1 || endDateIndex === -1) {
-        console.warn(
-          `Date range not found in data. Start: ${globalDateRange.startDate}, End: ${globalDateRange.endDate}`
-        );
-        console.log("Available dates:", allDays);
-        return initialData;
-      }
-
-      // Filter to only include items within the range
-      return initialData.filter((item) => {
-        const itemDate = item[dataKey] as string;
-        const itemIndex = allDays.indexOf(itemDate);
-        // Include if the day is within the range (inclusive)
-        return itemIndex >= startDateIndex && itemIndex <= endDateIndex;
-      });
-    } else {
-      // Use local date range for individual chart zoom
-      return localOriginalData.slice(localStartIndex, localEndIndex + 1);
-    }
-  }, [
-    initialData,
-    useGlobalDateRange,
-    globalDateRange?.startDate,
-    globalDateRange?.endDate,
-    localOriginalData,
-    localStartIndex,
-    localEndIndex,
-    dataKey,
-  ]);
-
-  // Check if all values in current visible range are zero or null
-  const hasNoData = useMemo(() => {
-    if (data.length === 0) return true;
-
-    // Get all data keys except the x-axis key
-    const valueKeys = Object.keys(config).filter((k) => k !== dataKey);
-
-    // Check if all data points have zero or null values for all valueKeys
-    return data.every((item) => {
-      return valueKeys.every((key) => {
-        const value = item[key];
-        return value === 0 || value === null || value === undefined;
-      });
-    });
-  }, [data, config, dataKey]);
-
-  const dimmedOpacity = 0.2;
-
-  // Calculate totals for each category
-  const totals = useMemo(() => {
-    return data.reduce((acc, item) => {
-      Object.entries(item).forEach(([key, value]) => {
-        if (key !== dataKey) {
-          acc[key] = (acc[key] || 0) + (Number(value) || 0);
-        }
-      });
-      return acc;
-    }, {} as Record<string, number>);
-  }, [data, dataKey]);
-
-  // Get all data keys except the x-axis key (use series prop if provided)
-  const dataKeys = useMemo(
-    () => seriesProp ?? Object.keys(config).filter((k) => k !== dataKey),
-    [seriesProp, config, dataKey]
-  );
-
-  // Get current data for the legend based on hover state
-  const currentData = useMemo(() => {
-    if (!activePayload?.length) return totals;
-
-    // If we have activePayload data from hovering over a bar
-    const hoverData = activePayload.reduce((acc, item) => {
-      if (item.dataKey && item.value !== undefined) {
-        acc[item.dataKey] = item.value;
-      }
-      return acc;
-    }, {} as Record<string, number>);
-
-    // Return a merged object - totals for keys not in the hover data
-    return {
-      ...totals,
-      ...hoverData,
-    };
-  }, [activePayload, totals]);
-
-  // Reset all highlight states
-  const resetHighlightState = useCallback(() => {
-    setActiveBarKey(null);
-    setActiveDataPointIndex(null);
-    setActivePayload(null);
-  }, []);
-
-  // Prepare legend payload with capped items
-  const legendPayload = useMemo(() => {
-    const allPayload = dataKeys.map((key) => ({
-      dataKey: key,
-      type: "rect" as const,
-      color: config[key].color,
-      value: key,
-      payload: {} as any,
-    }));
-
-    if (allPayload.length <= maxLegendItems) {
-      return allPayload;
-    }
-
-    const visiblePayload = allPayload.slice(0, maxLegendItems);
-    const remainingCount = allPayload.length - maxLegendItems;
-
-    // If we're hovering over an item that's not visible in the legend,
-    // add it as a 6th item instead of showing the "view more" row
-    if (activeBarKey && !visiblePayload.some((item) => item.dataKey === activeBarKey)) {
-      const hoveredItem = allPayload.find((item) => item.dataKey === activeBarKey);
-      if (hoveredItem) {
-        return [...visiblePayload, hoveredItem];
-      }
-    }
-
-    // Otherwise show the "view more" row
-    return [
-      ...visiblePayload,
-      {
-        dataKey: "view-more",
-        type: "rect" as const,
-        color: "transparent",
-        value: "view-more",
-        payload: { remainingCount },
-      },
-    ];
-  }, [config, dataKeys, maxLegendItems, activeBarKey]);
-
-  // Handle mouse down for drag zooming
-  const handleMouseDown = useCallback(
-    (e: any) => {
-      if (!enableZoom) return;
-      if (e.activeLabel) {
-        setRefAreaLeft(e.activeLabel);
-        setIsSelecting(true);
-      }
-    },
-    [enableZoom]
-  );
-
-  // Handle click on the chart area
-  const handleChartClick = useCallback(
-    (e: any) => {
-      if (!enableZoom) return;
-      // Only process if we're not in selection mode and have a valid click position
-      if (!isSelecting && e?.activeLabel) {
-        // Toggle the inspection line - if clicking the same point, remove it; otherwise, set a new one
-        if (inspectionLine === e.activeLabel) {
-          setInspectionLine(null);
-        } else {
-          setInspectionLine(e.activeLabel);
-        }
-      }
-    },
-    [enableZoom, isSelecting, inspectionLine]
-  );
-
-  // Handle mouse move for drag zooming
-  const handleMouseMove = useCallback(
-    (e: any) => {
-      // Handle both selection and active payload update
-      if (isSelecting && e?.activeLabel) {
-        setRefAreaRight(e.activeLabel);
-
-        // Check if selection is likely to be too small
-        if (refAreaLeft) {
-          // Get indices from original data
-          const dataArray = useGlobalDateRange ? initialData : localOriginalData;
-          const allDays = dataArray.map((item) => item[dataKey] as string).filter(Boolean);
-
-          const leftIndex = allDays.indexOf(refAreaLeft);
-          const rightIndex = allDays.indexOf(e.activeLabel);
-
-          if (leftIndex !== -1 && rightIndex !== -1) {
-            const [start, end] = [leftIndex, rightIndex].sort((a, b) => a - b);
-
-            // Mark as invalid if the selection is too small (less than 3 data points)
-            setInvalidSelection(end - start < 2);
-          } else {
-            setInvalidSelection(true);
-          }
-        }
-      }
-
-      // Update active payload for legend
-      if (e?.activePayload?.length) {
-        setActivePayload(e.activePayload);
-        setTooltipActive(true);
-      } else {
-        setTooltipActive(false);
-      }
-    },
-    [isSelecting, refAreaLeft, useGlobalDateRange, initialData, localOriginalData, dataKey]
-  );
-
-  // Handle mouse up for drag zooming
-  const handleMouseUp = useCallback(() => {
-    if (refAreaLeft && refAreaRight) {
-      // If global date range, update the context
-      if (useGlobalDateRange) {
-        // Get indices from original data
-        const allDays = initialData.map((item) => item[dataKey] as string).filter(Boolean);
-
-        const leftIndex = allDays.indexOf(refAreaLeft);
-        const rightIndex = allDays.indexOf(refAreaRight);
-
-        if (leftIndex !== -1 && rightIndex !== -1) {
-          const [start, end] = [leftIndex, rightIndex].sort((a, b) => a - b);
-
-          // Only update if selection is valid (at least 3 data points)
-          if (end - start >= 2) {
-            // Get the actual date values at these sorted indexes
-            const startDate = allDays[start];
-            const endDate = allDays[end];
-
-            // Set the global date range using these ordered dates
-            globalDateRange?.setDateRange(startDate, endDate);
-          }
-        }
-      } else {
-        // Get indices of the selected range for local zoom
-        const leftIndex = localOriginalData.findIndex((item) => item[dataKey] === refAreaLeft);
-        const rightIndex = localOriginalData.findIndex((item) => item[dataKey] === refAreaRight);
-
-        // Ensure left is less than right
-        const [start, end] = [leftIndex, rightIndex].sort((a, b) => a - b);
-
-        // Check if the selection is too small (less than 3 data points)
-        if (end - start < 2) {
-          // Don't update the range if it's too small
-        } else {
-          // Update the start and end indices
-          if (start !== -1 && end !== -1) {
-            setLocalStartIndex(start);
-            setLocalEndIndex(end);
-          }
-        }
-      }
-    }
-
-    setRefAreaLeft(null);
-    setRefAreaRight(null);
-    setIsSelecting(false);
-    setInvalidSelection(false);
-  }, [
-    refAreaLeft,
-    refAreaRight,
-    useGlobalDateRange,
-    initialData,
-    localOriginalData,
-    dataKey,
-    globalDateRange,
-  ]);
-
-  // Handle bar stack click for inspection line
-  const handleBarClick = useCallback(
-    (barData: any, e: React.MouseEvent) => {
-      if (!enableZoom) return;
-      // Prevent the event from propagating to the chart's onClick handler
-      e.stopPropagation();
-
-      // Only process clicks if we're not in selection mode
-      if (!isSelecting) {
-        // Toggle the inspection line - if clicking the same point, remove it; otherwise, set a new one
-        if (inspectionLine === barData[dataKey]) {
-          setInspectionLine(null);
-        } else {
-          setInspectionLine(barData[dataKey]);
-        }
-      }
-    },
-    [enableZoom, isSelecting, inspectionLine, dataKey]
-  );
-
-  // Render appropriate content based on displayState
-  const renderChartContent = useCallback(() => {
-    if (displayState === "loading") {
-      return <ChartBarLoading />;
-    } else if (displayState === "noData" || hasNoData) {
-      return <ChartBarNoData />;
-    } else if (displayState === "invalid") {
-      return <ChartBarInvalid />;
-    }
-
-    // Get the x-axis ticks based on tooltip state
-    const xAxisTicks =
-      tooltipActive && data.length > 2
-        ? [data[0]?.[dataKey], data[data.length - 1]?.[dataKey]]
-        : undefined;
-
-    return (
-      <BarChart
-        data={data}
-        barCategoryGap={1}
-        onMouseDown={handleMouseDown}
-        onMouseMove={handleMouseMove}
-        onMouseUp={handleMouseUp}
-        onClick={handleChartClick}
-        onMouseLeave={() => {
-          handleMouseUp();
-          resetHighlightState();
-          setTooltipActive(false);
-        }}
-      >
-        <CartesianGrid vertical={false} stroke="#272A2E" />
-        <XAxis
-          dataKey={dataKey}
-          tickLine={false}
-          tickMargin={10}
-          axisLine={false}
-          ticks={xAxisTicks}
-          interval="preserveStartEnd"
-          tick={{
-            fill: "#878C99",
-            fontSize: 11,
-            style: { fontVariantNumeric: "tabular-nums" },
-          }}
-          {...xAxisPropsProp}
-        />
-        <YAxis
-          axisLine={false}
-          tickLine={false}
-          tickMargin={8}
-          tick={{
-            fill: "#878C99",
-            fontSize: 11,
-            style: { fontVariantNumeric: "tabular-nums" },
-          }}
-          domain={["auto", (dataMax: number) => dataMax * 1.15]}
-          {...yAxisPropsProp}
-        />
-        <ChartTooltip
-          cursor={{ fill: "#2C3034" }}
-          content={
-            tooltipLabelFormatter ? (
-              <ChartTooltipContent />
-            ) : (
-              <XAxisTooltip
-                isSelecting={isSelecting}
-                refAreaLeft={refAreaLeft}
-                refAreaRight={refAreaRight}
-                invalidSelection={invalidSelection}
-              />
-            )
-          }
-          labelFormatter={tooltipLabelFormatter}
-          allowEscapeViewBox={{ x: false, y: true }}
-        />
-        {dataKeys.map((key, index, array) => {
-          return (
-            <Bar
-              key={key}
-              dataKey={key}
-              stackId={stackId}
-              fill={config[key].color}
-              radius={
-                [
-                  index === array.length - 1 ? 2 : 0,
-                  index === array.length - 1 ? 2 : 0,
-                  index === 0 ? 2 : 0,
-                  index === 0 ? 2 : 0,
-                ] as [number, number, number, number]
-              }
-              activeBar={false}
-              fillOpacity={1}
-              onClick={(data, index, e) => handleBarClick(data, e)}
-              onMouseEnter={(entry, index) => {
-                if (entry.tooltipPayload?.[0]) {
-                  const { dataKey: hoveredKey } = entry.tooltipPayload[0];
-                  setActiveBarKey(hoveredKey);
-                  setActiveDataPointIndex(index);
-                }
-              }}
-              onMouseLeave={resetHighlightState}
-              isAnimationActive={false}
-            >
-              {data.map((_, dataIndex) => {
-                let opacity = 1;
-
-                // Only apply dimming if we're not in zoom selection mode
-                if (!isSelecting) {
-                  // Hovering a specific bar
-                  if (activeBarKey !== null && activeDataPointIndex !== null) {
-                    // Only show full opacity for the exact bar being hovered
-                    opacity =
-                      key === activeBarKey && dataIndex === activeDataPointIndex
-                        ? 1
-                        : dimmedOpacity;
-                  }
-                  // Hovering a legend item
-                  else if (activeBarKey !== null && activeDataPointIndex === null) {
-                    // Show all bars of this type with full opacity
-                    opacity = key === activeBarKey ? 1 : dimmedOpacity;
-                  }
-                }
-
-                return (
-                  <Cell
-                    key={`cell-${key}-${dataIndex}`}
-                    fill={config[key].color}
-                    fillOpacity={opacity}
-                  />
-                );
-              })}
-            </Bar>
-          );
-        })}
-        {referenceLine && (
-          <ReferenceLine
-            y={referenceLine.value}
-            label={{
-              position: "top",
-              value: referenceLine.label,
-              fill: "#878C99",
-              fontSize: 11,
-            }}
-            isFront={true}
-            stroke="#3B3E45"
-            strokeDasharray="4 4"
-            className="pointer-events-none"
-          />
-        )}
-
-        {enableZoom && inspectionLine && (
-          <ReferenceLine
-            x={inspectionLine}
-            stroke="#D7D9DD"
-            strokeWidth={2}
-            isFront={true}
-            onClick={(e) => {
-              e.stopPropagation();
-              setInspectionLine(null);
-            }}
-          />
-        )}
-
-        {enableZoom && refAreaLeft && refAreaRight && (
-          <ReferenceArea
-            x1={refAreaLeft}
-            x2={refAreaRight}
-            strokeOpacity={0.4}
-            fill="#3B82F6"
-            fillOpacity={0.2}
-          />
-        )}
-
-        {showLegend &&
-          (simpleLegend ? (
-            <ChartLegend content={<ChartLegendContent />} />
-          ) : (
-            <ChartLegend
-              content={
-                <ChartLegendContentRows
-                  onMouseEnter={(data) => {
-                    if (data.dataKey === "view-more") return;
-                    setActiveBarKey(data.dataKey);
-                    setActiveDataPointIndex(null); // Reset this when hovering over legend
-                  }}
-                  onMouseLeave={resetHighlightState}
-                  data={currentData}
-                  activeKey={activeBarKey}
-                  payload={legendPayload}
-                  renderViewMore={(remainingCount: number) => (
-                    <ViewAllDataRow key="view-more" remainingCount={remainingCount} />
-                  )}
-                />
-              }
-              payload={legendPayload}
-            />
-          ))}
-      </BarChart>
-    );
-  }, [
-    displayState,
-    hasNoData,
-    tooltipActive,
-    data,
-    dataKey,
-    handleMouseDown,
-    handleMouseMove,
-    handleMouseUp,
-    handleChartClick,
-    resetHighlightState,
-    dataKeys,
-    config,
-    stackId,
-    handleBarClick,
-    activeBarKey,
-    activeDataPointIndex,
-    isSelecting,
-    dimmedOpacity,
-    referenceLine,
-    inspectionLine,
-    refAreaLeft,
-    refAreaRight,
-    legendPayload,
-    currentData,
-    xAxisPropsProp,
-    yAxisPropsProp,
-    tooltipLabelFormatter,
-    showLegend,
-    simpleLegend,
-    enableZoom,
-  ]);
+}: LegacyChartBarProps) {
+  // Note: useGlobalDateRange is deprecated - the new compound system uses
+  // DateRangeContext integration via the syncWithDateRange prop on Chart.Zoom
 
   return (
-    <div className={cn("relative flex w-full flex-col", className)}>
-      <div
-        ref={containerRef}
-        className={cn("h-full w-full", enableZoom && "mt-8 cursor-crosshair")}
-        style={{ touchAction: "none", userSelect: "none" }}
-      >
-        <ChartContainer
-          config={config}
-          className={cn(
-            "h-full w-full",
-            enableZoom &&
-              "[&_.recharts-surface]:cursor-crosshair [&_.recharts-wrapper]:cursor-crosshair"
-          )}
-          style={minHeight ? { minHeight } : undefined}
-        >
-          {renderChartContent()}
-        </ChartContainer>
-      </div>
-    </div>
-  );
-}
-
-const XAxisTooltip = ({
-  active,
-  payload,
-  label,
-  viewBox,
-  coordinate,
-  isSelecting,
-  refAreaLeft,
-  refAreaRight,
-  invalidSelection,
-}: TooltipProps) => {
-  if (!active) return null;
-
-  // Show zoom range when selecting
-  if (isSelecting && refAreaLeft && refAreaRight) {
-    // Show warning message if selection is too small
-    const message = invalidSelection
-      ? "Zoom: Drag a wider range"
-      : `Zoom: ${refAreaLeft} to ${refAreaRight}`;
-
-    return (
-      <div
-        className={cn(
-          "absolute whitespace-nowrap rounded border px-2 py-1 text-xxs tabular-nums",
-          invalidSelection
-            ? "border-amber-800 bg-amber-950 text-amber-400"
-            : "border-blue-800 bg-[#1B2334] text-blue-400"
-        )}
-        style={{
-          left: coordinate?.x,
-          top: viewBox?.height ? viewBox.height + 14 : 0,
-          transform: "translateX(-50%)",
-        }}
-      >
-        {message}
-        <div
-          className={cn(
-            "absolute -top-[5px] left-1/2 h-2 w-2 -translate-x-1/2 rotate-45",
-            invalidSelection
-              ? "border-l border-t border-amber-800 bg-amber-950"
-              : "border-l border-t border-blue-800 bg-[#1B2334]"
-          )}
-        />
-      </div>
-    );
-  }
-
-  // Default tooltip behavior (show label)
-  if (!payload?.length) return null;
-
-  return (
-    <div
-      className="absolute whitespace-nowrap rounded border border-charcoal-600 bg-charcoal-700 px-2 py-1 text-xxs tabular-nums text-text-bright"
-      style={{
-        left: coordinate?.x,
-        top: viewBox?.height ? viewBox.height + 13 : 0,
-        transform: "translateX(-50%)",
-      }}
+    <ChartRoot
+      config={config}
+      data={data}
+      dataKey={dataKey}
+      series={series}
+      state={state}
+      enableZoom={enableZoom}
+      onZoomChange={onZoomChange}
+      minHeight={minHeight}
+      className={className}
     >
-      {label}
-      <div className="absolute -top-[5px] left-1/2 h-2 w-2 -translate-x-1/2 rotate-45 border-l border-t border-charcoal-600 bg-charcoal-700" />
-    </div>
-  );
-};
-
-type ViewAllDataRowProps = {
-  remainingCount: number;
-};
-
-function ViewAllDataRow({ remainingCount }: ViewAllDataRowProps) {
-  return (
-    <Button variant="minimal/small" fullWidth iconSpacing="justify-between" className="px-2 py-1">
-      <div className="flex items-center gap-1.5 text-text-dimmed">
-        <div className="h-3 w-1 rounded-[2px] border border-charcoal-600" />
-        <Paragraph variant="extra-small" className="tabular-nums">
-          {remainingCount} more…
-        </Paragraph>
-      </div>
-      <Paragraph variant="extra-small" className="text-indigo-500">
-        View all
-      </Paragraph>
-    </Button>
+      <ChartBarRenderer
+        stackId={stackId}
+        xAxisProps={xAxisProps}
+        yAxisProps={yAxisProps}
+        referenceLine={referenceLine}
+        tooltipLabelFormatter={tooltipLabelFormatter}
+        showLegend={showLegend}
+        maxLegendItems={maxLegendItems}
+        simpleLegend={simpleLegend}
+      />
+    </ChartRoot>
   );
 }
diff --git a/apps/webapp/app/components/primitives/charts/ChartCompound.tsx b/apps/webapp/app/components/primitives/charts/ChartCompound.tsx
new file mode 100644
index 0000000000..bbd78fc1b3
--- /dev/null
+++ b/apps/webapp/app/components/primitives/charts/ChartCompound.tsx
@@ -0,0 +1,106 @@
+/**
+ * Compound Chart Component System
+ *
+ * This module exports a unified Chart compound component that can render
+ * different chart types (bar, line, etc.) with optional features like
+ * zoom and legends.
+ *
+ * Note: Due to recharts' component hierarchy requirements, the Legend must be
+ * rendered inside the chart component (BarChart, LineChart). Use the showLegend
+ * prop on Chart.Bar or Chart.Line instead of Chart.Legend as a sibling.
+ *
+ * @example Simple bar chart with legend
+ * ```tsx
+ * import { Chart } from "~/components/primitives/charts/ChartCompound";
+ *
+ * <Chart.Root config={config} data={data} dataKey="day">
+ *   <Chart.Bar stackId="a" showLegend maxLegendItems={5} />
+ * </Chart.Root>
+ * ```
+ *
+ * @example Line chart
+ * ```tsx
+ * <Chart.Root config={config} data={data} dataKey="day">
+ *   <Chart.Line lineType="step" showLegend />
+ * </Chart.Root>
+ * ```
+ *
+ * @example Bar chart with zoom (callback-based)
+ * ```tsx
+ * function MyChart() {
+ *   const handleZoomChange = (range: ZoomRange) => {
+ *     // Fetch new data based on range, update state
+ *   };
+ *
+ *   return (
+ *     <Chart.Root
+ *       config={config}
+ *       data={data}
+ *       dataKey="day"
+ *       enableZoom
+ *       onZoomChange={handleZoomChange}
+ *     >
+ *       <Chart.Bar stackId="a" showLegend />
+ *     </Chart.Root>
+ *   );
+ * }
+ * ```
+ *
+ * @example Dashboard with synced charts (using DateRangeContext)
+ * ```tsx
+ * <DateRangeProvider defaultStartDate={start} defaultEndDate={end}>
+ *   <DashboardControls />
+ *
+ *   <Chart.Root config={config1} data={data1} dataKey="day" enableZoom onZoomChange={handleZoom1}>
+ *     <Chart.Bar showLegend />
+ *   </Chart.Root>
+ *
+ *   <Chart.Root config={config2} data={data2} dataKey="day" enableZoom onZoomChange={handleZoom2}>
+ *     <Chart.Line showLegend />
+ *   </Chart.Root>
+ * </DateRangeProvider>
+ * ```
+ */
+
+import { ChartRoot } from "./ChartRoot";
+import { ChartBarRenderer } from "./ChartBar";
+import { ChartLineRenderer } from "./ChartLine";
+import { ChartLegendCompound } from "./ChartLegendCompound";
+import { ChartZoom } from "./ChartZoom";
+
+// Re-export types
+export type { ChartConfig, ChartState } from "./Chart";
+export type { ZoomRange } from "./hooks/useZoomSelection";
+export type { ChartRootProps } from "./ChartRoot";
+export type { ChartBarRendererProps } from "./ChartBar";
+export type { ChartLineRendererProps } from "./ChartLine";
+export type { ChartLegendCompoundProps } from "./ChartLegendCompound";
+export type { ChartZoomProps } from "./ChartZoom";
+
+/**
+ * Chart compound component for building flexible, composable charts.
+ *
+ * Components:
+ * - `Chart.Root` - Main wrapper that provides context
+ * - `Chart.Bar` - Bar chart renderer (use showLegend prop for legend)
+ * - `Chart.Line` - Line/area chart renderer (use showLegend prop for legend)
+ * - `Chart.Zoom` - Optional zoom overlay (rendered internally when enableZoom is set)
+ *
+ * Note: Chart.Legend is exported for advanced use cases but should typically
+ * be enabled via the showLegend prop on Chart.Bar or Chart.Line.
+ */
+export const Chart = {
+  Root: ChartRoot,
+  Bar: ChartBarRenderer,
+  Line: ChartLineRenderer,
+  Legend: ChartLegendCompound,
+  Zoom: ChartZoom,
+};
+
+// Also export individual components for direct imports
+export { ChartRoot, ChartBarRenderer, ChartLineRenderer, ChartLegendCompound, ChartZoom };
+
+// Re-export context hook for advanced usage
+export { useChartContext } from "./ChartContext";
+export { useHasNoData, useSeriesTotal } from "./ChartRoot";
+export { useZoomHandlers, ZoomTooltip } from "./ChartZoom";
diff --git a/apps/webapp/app/components/primitives/charts/ChartContext.tsx b/apps/webapp/app/components/primitives/charts/ChartContext.tsx
new file mode 100644
index 0000000000..92fbc7ed61
--- /dev/null
+++ b/apps/webapp/app/components/primitives/charts/ChartContext.tsx
@@ -0,0 +1,89 @@
+import React, { createContext, useContext, useMemo } from "react";
+import type { ChartConfig, ChartState } from "./Chart";
+import { useHighlightState, type UseHighlightStateReturn } from "./hooks/useHighlightState";
+import {
+  useZoomSelection,
+  type UseZoomSelectionReturn,
+  type ZoomRange,
+} from "./hooks/useZoomSelection";
+
+export type ChartContextValue = {
+  // Core data
+  config: ChartConfig;
+  data: any[];
+  dataKey: string;
+  /** Computed series keys (all config keys except dataKey) */
+  dataKeys: string[];
+
+  // Display state
+  state?: ChartState;
+
+  // Highlight state
+  highlight: UseHighlightStateReturn;
+
+  // Zoom state (only present when zoom is enabled)
+  zoom: UseZoomSelectionReturn | null;
+
+  // Zoom callback (only present when zoom is enabled)
+  onZoomChange?: (range: ZoomRange) => void;
+};
+
+const ChartCompoundContext = createContext<ChartContextValue | null>(null);
+
+export function useChartContext(): ChartContextValue {
+  const context = useContext(ChartCompoundContext);
+  if (!context) {
+    throw new Error("useChartContext must be used within a Chart.Root component");
+  }
+  return context;
+}
+
+export type ChartProviderProps = {
+  config: ChartConfig;
+  data: any[];
+  dataKey: string;
+  /** Series keys to render (if not provided, derived from config keys) */
+  series?: string[];
+  state?: ChartState;
+  /** Enable zoom functionality */
+  enableZoom?: boolean;
+  /** Callback when zoom range changes */
+  onZoomChange?: (range: ZoomRange) => void;
+  children: React.ReactNode;
+};
+
+export function ChartProvider({
+  config,
+  data,
+  dataKey,
+  series,
+  state,
+  enableZoom = false,
+  onZoomChange,
+  children,
+}: ChartProviderProps) {
+  const highlight = useHighlightState();
+  const zoomState = useZoomSelection();
+
+  // Compute series keys (use provided series or derive from config)
+  const dataKeys = useMemo(
+    () => series ?? Object.keys(config).filter((k) => k !== dataKey),
+    [series, config, dataKey]
+  );
+
+  const value = useMemo<ChartContextValue>(
+    () => ({
+      config,
+      data,
+      dataKey,
+      dataKeys,
+      state,
+      highlight,
+      zoom: enableZoom ? zoomState : null,
+      onZoomChange: enableZoom ? onZoomChange : undefined,
+    }),
+    [config, data, dataKey, dataKeys, state, highlight, zoomState, enableZoom, onZoomChange]
+  );
+
+  return <ChartCompoundContext.Provider value={value}>{children}</ChartCompoundContext.Provider>;
+}
diff --git a/apps/webapp/app/components/primitives/charts/ChartLegendCompound.tsx b/apps/webapp/app/components/primitives/charts/ChartLegendCompound.tsx
new file mode 100644
index 0000000000..bf35fad5df
--- /dev/null
+++ b/apps/webapp/app/components/primitives/charts/ChartLegendCompound.tsx
@@ -0,0 +1,155 @@
+import React, { useMemo } from "react";
+import { Legend } from "recharts";
+import { ChartLegendContent, ChartLegendContentRows } from "./Chart";
+import { useChartContext } from "./ChartContext";
+import { useSeriesTotal } from "./ChartRoot";
+import { Button } from "../Buttons";
+import { Paragraph } from "../Paragraph";
+
+export type ChartLegendCompoundProps = {
+  /** Maximum number of legend items to show before collapsing */
+  maxItems?: number;
+  /** Use simple inline legend instead of row-based legend */
+  simple?: boolean;
+  /** Hide the legend entirely (useful for conditional rendering) */
+  hidden?: boolean;
+};
+
+/**
+ * Legend component for the chart compound system.
+ * Automatically connects to chart context for highlighting.
+ *
+ * @example Simple legend
+ * ```tsx
+ * <Chart.Root config={config} data={data} dataKey="day">
+ *   <Chart.Bar />
+ *   <Chart.Legend />
+ * </Chart.Root>
+ * ```
+ *
+ * @example Row legend with max items
+ * ```tsx
+ * <Chart.Root config={config} data={data} dataKey="day">
+ *   <Chart.Bar />
+ *   <Chart.Legend maxItems={5} />
+ * </Chart.Root>
+ * ```
+ */
+export function ChartLegendCompound({
+  maxItems = 5,
+  simple = false,
+  hidden = false,
+}: ChartLegendCompoundProps) {
+  const { config, dataKeys, highlight } = useChartContext();
+  const totals = useSeriesTotal();
+
+  // Get current data for the legend based on hover state
+  const currentData = useMemo(() => {
+    if (!highlight.activePayload?.length) return totals;
+
+    // If we have activePayload data from hovering over a bar
+    const hoverData = highlight.activePayload.reduce((acc, item) => {
+      if (item.dataKey && item.value !== undefined) {
+        acc[item.dataKey] = item.value;
+      }
+      return acc;
+    }, {} as Record<string, number>);
+
+    // Return a merged object - totals for keys not in the hover data
+    return {
+      ...totals,
+      ...hoverData,
+    };
+  }, [highlight.activePayload, totals]);
+
+  // Prepare legend payload with capped items
+  const legendPayload = useMemo(() => {
+    const allPayload = dataKeys.map((key) => ({
+      dataKey: key,
+      type: "rect" as const,
+      color: config[key]?.color,
+      value: key,
+      payload: {} as any,
+    }));
+
+    if (allPayload.length <= maxItems) {
+      return allPayload;
+    }
+
+    const visiblePayload = allPayload.slice(0, maxItems);
+    const remainingCount = allPayload.length - maxItems;
+
+    // If we're hovering over an item that's not visible in the legend,
+    // add it as an extra item instead of showing the "view more" row
+    if (
+      highlight.activeBarKey &&
+      !visiblePayload.some((item) => item.dataKey === highlight.activeBarKey)
+    ) {
+      const hoveredItem = allPayload.find((item) => item.dataKey === highlight.activeBarKey);
+      if (hoveredItem) {
+        return [...visiblePayload, hoveredItem];
+      }
+    }
+
+    // Otherwise show the "view more" row
+    return [
+      ...visiblePayload,
+      {
+        dataKey: "view-more",
+        type: "rect" as const,
+        color: "transparent",
+        value: "view-more",
+        payload: { remainingCount },
+      },
+    ];
+  }, [config, dataKeys, maxItems, highlight.activeBarKey]);
+
+  if (hidden) {
+    return null;
+  }
+
+  if (simple) {
+    return <Legend content={<ChartLegendContent />} />;
+  }
+
+  return (
+    <Legend
+      content={
+        <ChartLegendContentRows
+          onMouseEnter={(data) => {
+            if (data.dataKey === "view-more") return;
+            highlight.setHoveredLegendItem(data.dataKey);
+          }}
+          onMouseLeave={highlight.reset}
+          data={currentData}
+          activeKey={highlight.activeBarKey}
+          payload={legendPayload}
+          renderViewMore={(remainingCount: number) => (
+            <ViewAllDataRow key="view-more" remainingCount={remainingCount} />
+          )}
+        />
+      }
+      payload={legendPayload}
+    />
+  );
+}
+
+type ViewAllDataRowProps = {
+  remainingCount: number;
+};
+
+function ViewAllDataRow({ remainingCount }: ViewAllDataRowProps) {
+  return (
+    <Button variant="minimal/small" fullWidth iconSpacing="justify-between" className="px-2 py-1">
+      <div className="flex items-center gap-1.5 text-text-dimmed">
+        <div className="h-3 w-1 rounded-[2px] border border-charcoal-600" />
+        <Paragraph variant="extra-small" className="tabular-nums">
+          {remainingCount} more…
+        </Paragraph>
+      </div>
+      <Paragraph variant="extra-small" className="text-indigo-500">
+        View all
+      </Paragraph>
+    </Button>
+  );
+}
diff --git a/apps/webapp/app/components/primitives/charts/ChartLine.tsx b/apps/webapp/app/components/primitives/charts/ChartLine.tsx
index d45010de99..7a36dff721 100644
--- a/apps/webapp/app/components/primitives/charts/ChartLine.tsx
+++ b/apps/webapp/app/components/primitives/charts/ChartLine.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo } from "react";
+import React from "react";
 import {
   Area,
   AreaChart,
@@ -12,16 +12,17 @@ import {
 } from "recharts";
 import {
   type ChartConfig,
-  ChartContainer,
   ChartLegend,
   ChartLegendContent,
   ChartTooltip,
   ChartTooltipContent,
   type ChartState,
 } from "~/components/primitives/charts/Chart";
-import { cn } from "~/utils/cn";
 import { ChartLineLoading, ChartLineNoData, ChartLineInvalid } from "./ChartLoading";
-import { useDateRange } from "./DateRangeContext";
+import { useChartContext } from "./ChartContext";
+import { ChartRoot, useHasNoData } from "./ChartRoot";
+import { ChartLegendCompound } from "./ChartLegendCompound";
+import type { ZoomRange } from "./hooks/useZoomSelection";
 
 type CurveType =
   | "basis"
@@ -37,15 +38,13 @@ type CurveType =
   | "stepBefore"
   | "stepAfter";
 
-type ChartLineProps = {
-  config: ChartConfig;
-  data: any[];
-  dataKey: string;
-  state?: ChartState;
-  useGlobalDateRange?: boolean;
+// ============================================================================
+// COMPOUND COMPONENT API
+// ============================================================================
+
+export type ChartLineRendererProps = {
+  /** Line curve type */
   lineType?: CurveType;
-  /** Series keys to render (if not provided, derived from config keys) */
-  series?: string[];
   /** Custom X-axis props to merge with defaults */
   xAxisProps?: Partial<XAxisProps>;
   /** Custom Y-axis props to merge with defaults */
@@ -54,237 +53,234 @@ type ChartLineProps = {
   stacked?: boolean;
   /** Custom tooltip label formatter */
   tooltipLabelFormatter?: (label: string, payload: any[]) => string;
-  /** Show legend (default false) */
+  /** Show built-in legend (for compound API, prefer Chart.Legend instead) */
   showLegend?: boolean;
-  /** Additional className for the container */
-  className?: string;
-  /** Minimum height for the chart */
-  minHeight?: string;
 };
 
-export function ChartLine({
-  config,
-  data: initialData,
-  dataKey,
-  state,
-  useGlobalDateRange = false,
+/**
+ * Line chart renderer for the compound component system.
+ * Must be used within a Chart.Root.
+ *
+ * @example
+ * ```tsx
+ * <Chart.Root config={config} data={data} dataKey="day">
+ *   <Chart.Line type="step" />
+ *   <Chart.Legend simple />
+ * </Chart.Root>
+ * ```
+ */
+export function ChartLineRenderer({
   lineType = "step",
-  series: seriesProp,
   xAxisProps: xAxisPropsProp,
   yAxisProps: yAxisPropsProp,
   stacked = false,
   tooltipLabelFormatter,
   showLegend = false,
-  className,
-  minHeight,
-}: ChartLineProps) {
-  const globalDateRange = useDateRange();
-  const [tooltipActive, setTooltipActive] = React.useState(false);
-
-  // Display state for chart rendering
-  const displayState = state;
-
-  // Compute the visible data based on the date range
-  const data = useMemo(() => {
-    if (useGlobalDateRange) {
-      // Filter data based on global date range
-      // Check if we have valid chart data
-      if (initialData.length === 0) return [];
+}: ChartLineRendererProps) {
+  const { config, data, dataKey, dataKeys, state, highlight } = useChartContext();
+  const hasNoData = useHasNoData();
 
-      // Get a sorted list of all available day values
-      const allDays = initialData
-        .map((item) => item[dataKey] as string)
-        .filter(Boolean)
-        .sort();
+  // Render loading/error states
+  if (state === "loading") {
+    return <ChartLineLoading />;
+  } else if (state === "noData" || hasNoData) {
+    return <ChartLineNoData />;
+  } else if (state === "invalid") {
+    return <ChartLineInvalid />;
+  }
 
-      // Check if our date range is in the available dates
-      const startDateIndex = allDays.findIndex((day) => day === globalDateRange?.startDate);
-      const endDateIndex = allDays.findIndex((day) => day === globalDateRange?.endDate);
+  // Get the x-axis ticks based on tooltip state
+  const xAxisTicks =
+    highlight.tooltipActive && data.length > 2
+      ? [data[0]?.[dataKey], data[data.length - 1]?.[dataKey]]
+      : undefined;
 
-      // If we can't find the exact dates, just return all data
-      if (startDateIndex === -1 || endDateIndex === -1) {
-        return initialData;
-      }
-
-      // Filter to only include items within the range
-      return initialData.filter((item) => {
-        const itemDate = item[dataKey] as string;
-        const itemIndex = allDays.indexOf(itemDate);
-        // Include if the day is within the range (inclusive)
-        return itemIndex >= startDateIndex && itemIndex <= endDateIndex;
-      });
-    }
-    return initialData;
-  }, [
-    initialData,
-    useGlobalDateRange,
-    globalDateRange?.startDate,
-    globalDateRange?.endDate,
+  const xAxisConfig = {
     dataKey,
-  ]);
-
-  // Get all data keys except the x-axis key (use series prop if provided)
-  const dataKeys = useMemo(
-    () => seriesProp ?? Object.keys(config).filter((k) => k !== dataKey),
-    [seriesProp, config, dataKey]
-  );
-
-  // Check if data has no values (all zero or null)
-  const hasNoData = useMemo(() => {
-    if (data.length === 0) return true;
-
-    // Check if all data points have zero or null values for all dataKeys
-    return data.every((item) => {
-      return dataKeys.every((key) => {
-        const value = item[key];
-        return value === 0 || value === null || value === undefined;
-      });
-    });
-  }, [data, dataKeys]);
-
-  // Render appropriate content based on displayState
-  const renderChartContent = useCallback(() => {
-    if (displayState === "loading") {
-      return <ChartLineLoading />;
-    } else if (displayState === "noData" || hasNoData) {
-      return <ChartLineNoData />;
-    } else if (displayState === "invalid") {
-      return <ChartLineInvalid />;
-    }
-
-    // Get the x-axis ticks based on tooltip state
-    const xAxisTicks =
-      tooltipActive && data.length > 2
-        ? [data[0]?.[dataKey], data[data.length - 1]?.[dataKey]]
-        : undefined;
+    tickLine: false,
+    axisLine: false,
+    tickMargin: 10,
+    ticks: xAxisTicks,
+    interval: "preserveStartEnd" as const,
+    tick: {
+      fill: "#878C99",
+      fontSize: 11,
+      style: { fontVariantNumeric: "tabular-nums" },
+    },
+    ...xAxisPropsProp,
+  };
 
-    const xAxisConfig = {
-      dataKey,
-      tickLine: false,
-      axisLine: false,
-      tickMargin: 10,
-      ticks: xAxisTicks,
-      interval: "preserveStartEnd" as const,
-      tick: {
-        fill: "#878C99",
-        fontSize: 11,
-        style: { fontVariantNumeric: "tabular-nums" },
-      },
-      ...xAxisPropsProp,
-    };
-
-    const yAxisConfig = {
-      axisLine: false,
-      tickLine: false,
-      tickMargin: 8,
-      tick: {
-        fill: "#878C99",
-        fontSize: 11,
-        style: { fontVariantNumeric: "tabular-nums" },
-      },
-      ...yAxisPropsProp,
-    };
-
-    // Render stacked area chart if stacked prop is true
-    if (stacked && dataKeys.length > 1) {
-      return (
-        <AreaChart
-          data={data}
-          stackOffset="none"
-          margin={{
-            left: 12,
-            right: 12,
-          }}
-          onMouseEnter={() => setTooltipActive(true)}
-          onMouseLeave={() => setTooltipActive(false)}
-        >
-          <CartesianGrid vertical={false} stroke="#272A2E" strokeDasharray="3 3" />
-          <XAxis {...xAxisConfig} />
-          <YAxis {...yAxisConfig} />
-          <ChartTooltip
-            cursor={false}
-            content={<ChartTooltipContent indicator="line" />}
-            labelFormatter={tooltipLabelFormatter}
-          />
-          {showLegend && <ChartLegend content={<ChartLegendContent />} />}
-          {dataKeys.map((key) => (
-            <Area
-              key={key}
-              type={lineType}
-              dataKey={key}
-              stroke={config[key]?.color}
-              fill={config[key]?.color}
-              fillOpacity={0.6}
-              strokeWidth={2}
-              stackId="stack"
-              isAnimationActive={false}
-            />
-          ))}
-        </AreaChart>
-      );
-    }
+  const yAxisConfig = {
+    axisLine: false,
+    tickLine: false,
+    tickMargin: 8,
+    tick: {
+      fill: "#878C99",
+      fontSize: 11,
+      style: { fontVariantNumeric: "tabular-nums" },
+    },
+    ...yAxisPropsProp,
+  };
 
+  // Render stacked area chart if stacked prop is true
+  if (stacked && dataKeys.length > 1) {
     return (
-      <LineChart
-        accessibilityLayer
+      <AreaChart
         data={data}
+        stackOffset="none"
         margin={{
           left: 12,
           right: 12,
         }}
-        onMouseEnter={() => setTooltipActive(true)}
-        onMouseLeave={() => setTooltipActive(false)}
+        onMouseEnter={() => highlight.setTooltipActive(true)}
+        onMouseLeave={() => highlight.setTooltipActive(false)}
       >
         <CartesianGrid vertical={false} stroke="#272A2E" strokeDasharray="3 3" />
         <XAxis {...xAxisConfig} />
         <YAxis {...yAxisConfig} />
         <ChartTooltip
           cursor={false}
-          content={<ChartTooltipContent />}
+          content={<ChartTooltipContent indicator="line" />}
           labelFormatter={tooltipLabelFormatter}
         />
         {showLegend && <ChartLegend content={<ChartLegendContent />} />}
         {dataKeys.map((key) => (
-          <Line
+          <Area
             key={key}
-            dataKey={key}
             type={lineType}
+            dataKey={key}
             stroke={config[key]?.color}
+            fill={config[key]?.color}
+            fillOpacity={0.6}
             strokeWidth={2}
-            dot={false}
-            activeDot={{ r: 4 }}
+            stackId="stack"
             isAnimationActive={false}
           />
         ))}
-      </LineChart>
+      </AreaChart>
     );
-  }, [
-    displayState,
-    hasNoData,
-    tooltipActive,
-    data,
-    dataKey,
-    dataKeys,
-    config,
-    lineType,
-    stacked,
-    xAxisPropsProp,
-    yAxisPropsProp,
-    tooltipLabelFormatter,
-    showLegend,
-  ]);
+  }
+
+  return (
+    <LineChart
+      accessibilityLayer
+      data={data}
+      margin={{
+        left: 12,
+        right: 12,
+      }}
+      onMouseEnter={() => highlight.setTooltipActive(true)}
+      onMouseLeave={() => highlight.setTooltipActive(false)}
+    >
+      <CartesianGrid vertical={false} stroke="#272A2E" strokeDasharray="3 3" />
+      <XAxis {...xAxisConfig} />
+      <YAxis {...yAxisConfig} />
+      <ChartTooltip
+        cursor={false}
+        content={<ChartTooltipContent />}
+        labelFormatter={tooltipLabelFormatter}
+      />
+      {showLegend && <ChartLegend content={<ChartLegendContent />} />}
+      {dataKeys.map((key) => (
+        <Line
+          key={key}
+          dataKey={key}
+          type={lineType}
+          stroke={config[key]?.color}
+          strokeWidth={2}
+          dot={false}
+          activeDot={{ r: 4 }}
+          isAnimationActive={false}
+        />
+      ))}
+    </LineChart>
+  );
+}
+
+// ============================================================================
+// LEGACY API (for backward compatibility)
+// ============================================================================
+
+type LegacyChartLineProps = {
+  config: ChartConfig;
+  data: any[];
+  dataKey: string;
+  state?: ChartState;
+  /** @deprecated Use onZoomChange callback instead */
+  useGlobalDateRange?: boolean;
+  lineType?: CurveType;
+  /** Series keys to render (if not provided, derived from config keys) */
+  series?: string[];
+  /** Custom X-axis props to merge with defaults */
+  xAxisProps?: Partial<XAxisProps>;
+  /** Custom Y-axis props to merge with defaults */
+  yAxisProps?: Partial<YAxisProps>;
+  /** Render as stacked area chart instead of line chart */
+  stacked?: boolean;
+  /** Custom tooltip label formatter */
+  tooltipLabelFormatter?: (label: string, payload: any[]) => string;
+  /** Show legend (default false) */
+  showLegend?: boolean;
+  /** Enable zoom selection (default false for line charts) */
+  enableZoom?: boolean;
+  /** Callback when zoom range changes */
+  onZoomChange?: (range: ZoomRange) => void;
+  /** Additional className for the container */
+  className?: string;
+  /** Minimum height for the chart */
+  minHeight?: string;
+};
 
+/**
+ * Legacy ChartLine component for backward compatibility.
+ * Uses the new compound component system internally.
+ *
+ * For new code, prefer the compound component API:
+ * ```tsx
+ * <Chart.Root config={config} data={data} dataKey="day">
+ *   <Chart.Line type="step" />
+ *   <Chart.Legend simple />
+ * </Chart.Root>
+ * ```
+ */
+export function ChartLine({
+  config,
+  data,
+  dataKey,
+  state,
+  useGlobalDateRange = false,
+  lineType = "step",
+  series,
+  xAxisProps,
+  yAxisProps,
+  stacked = false,
+  tooltipLabelFormatter,
+  showLegend = false,
+  enableZoom = false,
+  onZoomChange,
+  className,
+  minHeight,
+}: LegacyChartLineProps) {
   return (
-    <div className={cn("relative flex w-full flex-col", className)}>
-      <div className="h-full w-full" style={{ touchAction: "none", userSelect: "none" }}>
-        <ChartContainer
-          config={config}
-          className="min-h-[200px] w-full"
-          style={minHeight ? { minHeight } : undefined}
-        >
-          {renderChartContent()}
-        </ChartContainer>
-      </div>
-    </div>
+    <ChartRoot
+      config={config}
+      data={data}
+      dataKey={dataKey}
+      series={series}
+      state={state}
+      enableZoom={enableZoom}
+      onZoomChange={onZoomChange}
+      minHeight={minHeight}
+      className={className}
+    >
+      <ChartLineRenderer
+        lineType={lineType}
+        xAxisProps={xAxisProps}
+        yAxisProps={yAxisProps}
+        stacked={stacked}
+        tooltipLabelFormatter={tooltipLabelFormatter}
+        showLegend={showLegend}
+      />
+    </ChartRoot>
   );
 }
diff --git a/apps/webapp/app/components/primitives/charts/ChartRoot.tsx b/apps/webapp/app/components/primitives/charts/ChartRoot.tsx
new file mode 100644
index 0000000000..2b269e9dfe
--- /dev/null
+++ b/apps/webapp/app/components/primitives/charts/ChartRoot.tsx
@@ -0,0 +1,144 @@
+import React, { useMemo } from "react";
+import type * as RechartsPrimitive from "recharts";
+import { ChartContainer, type ChartConfig, type ChartState } from "./Chart";
+import { ChartProvider, useChartContext } from "./ChartContext";
+import type { ZoomRange } from "./hooks/useZoomSelection";
+import { cn } from "~/utils/cn";
+
+export type ChartRootProps = {
+  config: ChartConfig;
+  data: any[];
+  dataKey: string;
+  /** Series keys to render (if not provided, derived from config keys) */
+  series?: string[];
+  state?: ChartState;
+  /** Enable zoom functionality */
+  enableZoom?: boolean;
+  /** Callback when zoom range changes */
+  onZoomChange?: (range: ZoomRange) => void;
+  /** Minimum height for the chart */
+  minHeight?: string;
+  /** Additional className for the container */
+  className?: string;
+  children: React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>["children"];
+};
+
+/**
+ * Root component for the chart compound component system.
+ * Provides shared context for all child chart components.
+ *
+ * @example Simple bar chart
+ * ```tsx
+ * <Chart.Root config={config} data={data} dataKey="day">
+ *   <Chart.Bar stackId="a" />
+ *   <Chart.Legend />
+ * </Chart.Root>
+ * ```
+ *
+ * @example Chart with zoom
+ * ```tsx
+ * <Chart.Root config={config} data={data} dataKey="day" enableZoom onZoomChange={handleZoom}>
+ *   <Chart.Bar stackId="a" />
+ *   <Chart.Zoom />
+ *   <Chart.Legend />
+ * </Chart.Root>
+ * ```
+ */
+export function ChartRoot({
+  config,
+  data,
+  dataKey,
+  series,
+  state,
+  enableZoom = false,
+  onZoomChange,
+  minHeight,
+  className,
+  children,
+}: ChartRootProps) {
+  return (
+    <ChartProvider
+      config={config}
+      data={data}
+      dataKey={dataKey}
+      series={series}
+      state={state}
+      enableZoom={enableZoom}
+      onZoomChange={onZoomChange}
+    >
+      <ChartRootInner minHeight={minHeight} className={className}>
+        {children}
+      </ChartRootInner>
+    </ChartProvider>
+  );
+}
+
+type ChartRootInnerProps = {
+  minHeight?: string;
+  className?: string;
+  children: React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>["children"];
+};
+
+function ChartRootInner({ minHeight, className, children }: ChartRootInnerProps) {
+  const { config, zoom } = useChartContext();
+  const enableZoom = zoom !== null;
+
+  return (
+    <div className={cn("relative flex w-full flex-col", className)}>
+      <div
+        className={cn("h-full w-full", enableZoom && "mt-8 cursor-crosshair")}
+        style={{ touchAction: "none", userSelect: "none" }}
+      >
+        <ChartContainer
+          config={config}
+          className={cn(
+            "h-full w-full",
+            enableZoom &&
+              "[&_.recharts-surface]:cursor-crosshair [&_.recharts-wrapper]:cursor-crosshair"
+          )}
+          style={minHeight ? { minHeight } : undefined}
+        >
+          {children}
+        </ChartContainer>
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Hook to check if all data in the visible range is empty (zero or null).
+ * Useful for rendering "no data" states.
+ */
+export function useHasNoData(): boolean {
+  const { data, dataKey, dataKeys } = useChartContext();
+
+  return useMemo(() => {
+    if (data.length === 0) return true;
+
+    return data.every((item) => {
+      return dataKeys.every((key) => {
+        const value = item[key];
+        return value === 0 || value === null || value === undefined;
+      });
+    });
+  }, [data, dataKeys]);
+}
+
+/**
+ * Hook to calculate totals for each series across all data points.
+ * Useful for legend displays.
+ */
+export function useSeriesTotal(): Record<string, number> {
+  const { data, dataKey } = useChartContext();
+
+  return useMemo(() => {
+    return data.reduce((acc, item) => {
+      Object.entries(item).forEach(([key, value]) => {
+        if (key !== dataKey) {
+          acc[key] = (acc[key] || 0) + (Number(value) || 0);
+        }
+      });
+      return acc;
+    }, {} as Record<string, number>);
+  }, [data, dataKey]);
+}
diff --git a/apps/webapp/app/components/primitives/charts/ChartZoom.tsx b/apps/webapp/app/components/primitives/charts/ChartZoom.tsx
new file mode 100644
index 0000000000..6d5bcb873b
--- /dev/null
+++ b/apps/webapp/app/components/primitives/charts/ChartZoom.tsx
@@ -0,0 +1,228 @@
+import React, { useCallback } from "react";
+import { ReferenceArea, ReferenceLine } from "recharts";
+import { useChartContext } from "./ChartContext";
+import { useDateRange } from "./DateRangeContext";
+import { cn } from "~/utils/cn";
+
+export type ChartZoomProps = {
+  /** Sync zoom with DateRangeContext (for dashboard-level syncing) */
+  syncWithDateRange?: boolean;
+  /** Minimum number of data points required for a valid zoom selection */
+  minDataPoints?: number;
+};
+
+/**
+ * Zoom overlay component for charts.
+ * Renders the zoom selection area and inspection line.
+ *
+ * Must be used within a Chart.Root with enableZoom={true}.
+ *
+ * @example Basic zoom
+ * ```tsx
+ * <Chart.Root config={config} data={data} dataKey="day" enableZoom onZoomChange={handleZoom}>
+ *   <Chart.Bar />
+ *   <Chart.Zoom />
+ * </Chart.Root>
+ * ```
+ *
+ * @example Synced with DateRangeContext
+ * ```tsx
+ * <DateRangeProvider>
+ *   <Chart.Root config={config} data={data} dataKey="day" enableZoom onZoomChange={handleZoom}>
+ *     <Chart.Bar />
+ *     <Chart.Zoom syncWithDateRange />
+ *   </Chart.Root>
+ * </DateRangeProvider>
+ * ```
+ */
+export function ChartZoom({ syncWithDateRange = false, minDataPoints = 3 }: ChartZoomProps) {
+  const { zoom, data, dataKey, onZoomChange } = useChartContext();
+  const globalDateRange = useDateRange();
+
+  if (!zoom) {
+    console.warn("ChartZoom: zoom is not enabled. Add enableZoom to Chart.Root.");
+    return null;
+  }
+
+  const { inspectionLine, refAreaLeft, refAreaRight } = zoom;
+
+  return (
+    <>
+      {/* Inspection line (click to inspect) */}
+      {inspectionLine && (
+        <ReferenceLine
+          x={inspectionLine}
+          stroke="#D7D9DD"
+          strokeWidth={2}
+          isFront={true}
+          onClick={(e: any) => {
+            e?.stopPropagation?.();
+            zoom.clearInspectionLine();
+          }}
+        />
+      )}
+
+      {/* Zoom selection area */}
+      {refAreaLeft && refAreaRight && (
+        <ReferenceArea
+          x1={refAreaLeft}
+          x2={refAreaRight}
+          strokeOpacity={0.4}
+          fill="#3B82F6"
+          fillOpacity={0.2}
+        />
+      )}
+    </>
+  );
+}
+
+/**
+ * Tooltip component for showing zoom selection feedback.
+ * Can be used inside ChartTooltip content prop.
+ */
+export type ZoomTooltipProps = {
+  active?: boolean;
+  payload?: any[];
+  label?: string;
+  viewBox?: {
+    height: number;
+    width: number;
+  };
+  coordinate?: {
+    x: number;
+    y: number;
+  };
+};
+
+export function ZoomTooltip({ active, payload, label, viewBox, coordinate }: ZoomTooltipProps) {
+  const { zoom } = useChartContext();
+
+  if (!active) return null;
+
+  // Show zoom range when selecting
+  if (zoom?.isSelecting && zoom.refAreaLeft && zoom.refAreaRight) {
+    const message = zoom.invalidSelection
+      ? "Zoom: Drag a wider range"
+      : `Zoom: ${zoom.refAreaLeft} to ${zoom.refAreaRight}`;
+
+    return (
+      <div
+        className={cn(
+          "absolute whitespace-nowrap rounded border px-2 py-1 text-xxs tabular-nums",
+          zoom.invalidSelection
+            ? "border-amber-800 bg-amber-950 text-amber-400"
+            : "border-blue-800 bg-[#1B2334] text-blue-400"
+        )}
+        style={{
+          left: coordinate?.x,
+          top: viewBox?.height ? viewBox.height + 14 : 0,
+          transform: "translateX(-50%)",
+        }}
+      >
+        {message}
+        <div
+          className={cn(
+            "absolute -top-[5px] left-1/2 h-2 w-2 -translate-x-1/2 rotate-45",
+            zoom.invalidSelection
+              ? "border-l border-t border-amber-800 bg-amber-950"
+              : "border-l border-t border-blue-800 bg-[#1B2334]"
+          )}
+        />
+      </div>
+    );
+  }
+
+  // Default tooltip behavior (show label)
+  if (!payload?.length) return null;
+
+  return (
+    <div
+      className="absolute whitespace-nowrap rounded border border-charcoal-600 bg-charcoal-700 px-2 py-1 text-xxs tabular-nums text-text-bright"
+      style={{
+        left: coordinate?.x,
+        top: viewBox?.height ? viewBox.height + 13 : 0,
+        transform: "translateX(-50%)",
+      }}
+    >
+      {label}
+      <div className="absolute -top-[5px] left-1/2 h-2 w-2 -translate-x-1/2 rotate-45 border-l border-t border-charcoal-600 bg-charcoal-700" />
+    </div>
+  );
+}
+
+/**
+ * Hook that returns event handlers for zoom interactions.
+ * Use these on your chart component (BarChart, LineChart, etc.).
+ */
+export function useZoomHandlers(
+  options: { minDataPoints?: number; syncWithDateRange?: boolean } = {}
+) {
+  const { minDataPoints = 3, syncWithDateRange = false } = options;
+  const { zoom, data, dataKey, onZoomChange } = useChartContext();
+  const globalDateRange = useDateRange();
+
+  const handleMouseDown = useCallback(
+    (e: any) => {
+      if (!zoom || !e?.activeLabel) return;
+      zoom.startSelection(e.activeLabel);
+    },
+    [zoom]
+  );
+
+  const handleMouseMove = useCallback(
+    (e: any) => {
+      if (!zoom || !e?.activeLabel) return;
+      if (zoom.isSelecting) {
+        zoom.updateSelection(e.activeLabel, data, dataKey, minDataPoints);
+      }
+    },
+    [zoom, data, dataKey, minDataPoints]
+  );
+
+  const handleMouseUp = useCallback(() => {
+    if (!zoom) return;
+
+    const range = zoom.finishSelection(data, dataKey, minDataPoints);
+
+    if (range) {
+      // If syncing with DateRangeContext, update it
+      if (syncWithDateRange && globalDateRange) {
+        globalDateRange.setDateRange(range.start, range.end);
+      }
+
+      // Call the onZoomChange callback
+      onZoomChange?.(range);
+    }
+  }, [zoom, data, dataKey, minDataPoints, syncWithDateRange, globalDateRange, onZoomChange]);
+
+  const handleClick = useCallback(
+    (e: any) => {
+      if (!zoom || zoom.isSelecting || !e?.activeLabel) return;
+      zoom.toggleInspectionLine(e.activeLabel);
+    },
+    [zoom]
+  );
+
+  const handleMouseLeave = useCallback(() => {
+    if (!zoom) return;
+    zoom.cancelSelection();
+  }, [zoom]);
+
+  if (!zoom) {
+    return {
+      onMouseDown: undefined,
+      onMouseMove: undefined,
+      onMouseUp: undefined,
+      onClick: undefined,
+      onMouseLeave: undefined,
+    };
+  }
+
+  return {
+    onMouseDown: handleMouseDown,
+    onMouseMove: handleMouseMove,
+    onMouseUp: handleMouseUp,
+    onClick: handleClick,
+    onMouseLeave: handleMouseLeave,
+  };
+}
diff --git a/apps/webapp/app/components/primitives/charts/hooks/useHighlightState.ts b/apps/webapp/app/components/primitives/charts/hooks/useHighlightState.ts
new file mode 100644
index 0000000000..24bf599865
--- /dev/null
+++ b/apps/webapp/app/components/primitives/charts/hooks/useHighlightState.ts
@@ -0,0 +1,115 @@
+import { useCallback, useState } from "react";
+
+export type HighlightState = {
+  /** The currently highlighted series key (e.g., "completed", "failed") */
+  activeBarKey: string | null;
+  /** The index of the specific data point being hovered (null when hovering legend) */
+  activeDataPointIndex: number | null;
+  /** The payload data from the hovered element */
+  activePayload: any[] | null;
+  /** Whether the tooltip is currently active */
+  tooltipActive: boolean;
+};
+
+export type HighlightActions = {
+  /** Set the hovered bar (specific data point) */
+  setHoveredBar: (key: string, index: number, payload?: any[]) => void;
+  /** Set the hovered legend item (highlights all bars of that type) */
+  setHoveredLegendItem: (key: string) => void;
+  /** Set the active payload (for tooltip data) */
+  setActivePayload: (payload: any[] | null) => void;
+  /** Set tooltip active state */
+  setTooltipActive: (active: boolean) => void;
+  /** Reset all highlight state */
+  reset: () => void;
+};
+
+export type UseHighlightStateReturn = HighlightState & HighlightActions;
+
+const initialState: HighlightState = {
+  activeBarKey: null,
+  activeDataPointIndex: null,
+  activePayload: null,
+  tooltipActive: false,
+};
+
+/**
+ * Hook to manage highlight state for chart elements.
+ * Handles both bar hover (specific data point) and legend hover (all bars of a type).
+ */
+export function useHighlightState(): UseHighlightStateReturn {
+  const [state, setState] = useState<HighlightState>(initialState);
+
+  const setHoveredBar = useCallback((key: string, index: number, payload?: any[]) => {
+    setState({
+      activeBarKey: key,
+      activeDataPointIndex: index,
+      activePayload: payload ?? null,
+      tooltipActive: true,
+    });
+  }, []);
+
+  const setHoveredLegendItem = useCallback((key: string) => {
+    setState((prev) => ({
+      ...prev,
+      activeBarKey: key,
+      activeDataPointIndex: null, // null indicates legend hover (all bars of this type)
+    }));
+  }, []);
+
+  const setActivePayload = useCallback((payload: any[] | null) => {
+    setState((prev) => ({
+      ...prev,
+      activePayload: payload,
+    }));
+  }, []);
+
+  const setTooltipActive = useCallback((active: boolean) => {
+    setState((prev) => ({
+      ...prev,
+      tooltipActive: active,
+    }));
+  }, []);
+
+  const reset = useCallback(() => {
+    setState(initialState);
+  }, []);
+
+  return {
+    ...state,
+    setHoveredBar,
+    setHoveredLegendItem,
+    setActivePayload,
+    setTooltipActive,
+    reset,
+  };
+}
+
+/**
+ * Calculate the opacity for a bar based on highlight state.
+ * @param key - The series key of this bar
+ * @param dataIndex - The data point index of this bar
+ * @param highlight - The current highlight state
+ * @param dimmedOpacity - The opacity to use for dimmed bars (default 0.2)
+ */
+export function getBarOpacity(
+  key: string,
+  dataIndex: number,
+  highlight: HighlightState,
+  dimmedOpacity = 0.2
+): number {
+  const { activeBarKey, activeDataPointIndex } = highlight;
+
+  // No highlight active - full opacity
+  if (activeBarKey === null) {
+    return 1;
+  }
+
+  // Hovering a specific bar (from chart)
+  if (activeDataPointIndex !== null) {
+    return key === activeBarKey && dataIndex === activeDataPointIndex ? 1 : dimmedOpacity;
+  }
+
+  // Hovering a legend item (all bars of this type)
+  return key === activeBarKey ? 1 : dimmedOpacity;
+}
diff --git a/apps/webapp/app/components/primitives/charts/hooks/useZoomSelection.ts b/apps/webapp/app/components/primitives/charts/hooks/useZoomSelection.ts
new file mode 100644
index 0000000000..533b1e465c
--- /dev/null
+++ b/apps/webapp/app/components/primitives/charts/hooks/useZoomSelection.ts
@@ -0,0 +1,163 @@
+import { useCallback, useState } from "react";
+
+export type ZoomRange = {
+  start: string;
+  end: string;
+};
+
+export type ZoomSelectionState = {
+  /** Starting point of drag selection (x-axis value) */
+  refAreaLeft: string | null;
+  /** Ending point of drag selection (x-axis value) */
+  refAreaRight: string | null;
+  /** Whether user is currently dragging to select */
+  isSelecting: boolean;
+  /** Whether the current selection is too small to be valid */
+  invalidSelection: boolean;
+  /** X-axis value for the inspection line (click to inspect) */
+  inspectionLine: string | null;
+};
+
+export type ZoomSelectionActions = {
+  /** Start a new selection at the given x-axis value */
+  startSelection: (label: string) => void;
+  /** Update the selection as the user drags */
+  updateSelection: (label: string, data: any[], dataKey: string, minDataPoints?: number) => void;
+  /** Finish the selection and return the range if valid */
+  finishSelection: (data: any[], dataKey: string, minDataPoints?: number) => ZoomRange | null;
+  /** Cancel the current selection */
+  cancelSelection: () => void;
+  /** Toggle the inspection line at the given x-axis value */
+  toggleInspectionLine: (label: string) => void;
+  /** Clear the inspection line */
+  clearInspectionLine: () => void;
+  /** Reset all zoom state */
+  reset: () => void;
+};
+
+export type UseZoomSelectionReturn = ZoomSelectionState & ZoomSelectionActions;
+
+const initialState: ZoomSelectionState = {
+  refAreaLeft: null,
+  refAreaRight: null,
+  isSelecting: false,
+  invalidSelection: false,
+  inspectionLine: null,
+};
+
+/**
+ * Hook to manage zoom selection state for charts.
+ * Handles drag-to-zoom and click-to-inspect functionality.
+ */
+export function useZoomSelection(): UseZoomSelectionReturn {
+  const [state, setState] = useState<ZoomSelectionState>(initialState);
+
+  const startSelection = useCallback((label: string) => {
+    setState((prev) => ({
+      ...prev,
+      refAreaLeft: label,
+      refAreaRight: null,
+      isSelecting: true,
+      invalidSelection: false,
+    }));
+  }, []);
+
+  const updateSelection = useCallback(
+    (label: string, data: any[], dataKey: string, minDataPoints = 3) => {
+      setState((prev) => {
+        if (!prev.isSelecting || !prev.refAreaLeft) {
+          return prev;
+        }
+
+        // Check if selection is valid (has enough data points)
+        const allLabels = data.map((item) => item[dataKey] as string).filter(Boolean);
+        const leftIndex = allLabels.indexOf(prev.refAreaLeft);
+        const rightIndex = allLabels.indexOf(label);
+
+        let invalidSelection = false;
+        if (leftIndex !== -1 && rightIndex !== -1) {
+          const [start, end] = [leftIndex, rightIndex].sort((a, b) => a - b);
+          invalidSelection = end - start < minDataPoints - 1;
+        } else {
+          invalidSelection = true;
+        }
+
+        return {
+          ...prev,
+          refAreaRight: label,
+          invalidSelection,
+        };
+      });
+    },
+    []
+  );
+
+  const finishSelection = useCallback(
+    (data: any[], dataKey: string, minDataPoints = 3): ZoomRange | null => {
+      let result: ZoomRange | null = null;
+
+      setState((prev) => {
+        if (!prev.refAreaLeft || !prev.refAreaRight) {
+          return { ...initialState, inspectionLine: prev.inspectionLine };
+        }
+
+        const allLabels = data.map((item) => item[dataKey] as string).filter(Boolean);
+        const leftIndex = allLabels.indexOf(prev.refAreaLeft);
+        const rightIndex = allLabels.indexOf(prev.refAreaRight);
+
+        if (leftIndex !== -1 && rightIndex !== -1) {
+          const [startIdx, endIdx] = [leftIndex, rightIndex].sort((a, b) => a - b);
+
+          // Only create a valid range if we have enough data points
+          if (endIdx - startIdx >= minDataPoints - 1) {
+            result = {
+              start: allLabels[startIdx],
+              end: allLabels[endIdx],
+            };
+          }
+        }
+
+        return { ...initialState, inspectionLine: prev.inspectionLine };
+      });
+
+      return result;
+    },
+    []
+  );
+
+  const cancelSelection = useCallback(() => {
+    setState((prev) => ({
+      ...initialState,
+      inspectionLine: prev.inspectionLine,
+    }));
+  }, []);
+
+  const toggleInspectionLine = useCallback((label: string) => {
+    setState((prev) => ({
+      ...prev,
+      inspectionLine: prev.inspectionLine === label ? null : label,
+    }));
+  }, []);
+
+  const clearInspectionLine = useCallback(() => {
+    setState((prev) => ({
+      ...prev,
+      inspectionLine: null,
+    }));
+  }, []);
+
+  const reset = useCallback(() => {
+    setState(initialState);
+  }, []);
+
+  return {
+    ...state,
+    startSelection,
+    updateSelection,
+    finishSelection,
+    cancelSelection,
+    toggleInspectionLine,
+    clearInspectionLine,
+    reset,
+  };
+}
diff --git a/apps/webapp/app/routes/storybook.charts/route.tsx b/apps/webapp/app/routes/storybook.charts/route.tsx
index 84d6c046f8..26274d66d8 100644
--- a/apps/webapp/app/routes/storybook.charts/route.tsx
+++ b/apps/webapp/app/routes/storybook.charts/route.tsx
@@ -9,14 +9,23 @@ import { Card } from "~/components/primitives/charts/Card";
 import { type ChartState, type ChartConfig } from "~/components/primitives/charts/Chart";
 import { ChartBar } from "~/components/primitives/charts/ChartBar";
 import { ChartLine } from "~/components/primitives/charts/ChartLine";
+import { Chart } from "~/components/primitives/charts/ChartCompound";
 import { DateRangeProvider, useDateRange } from "~/components/primitives/charts/DateRangeContext";
 import { Paragraph } from "~/components/primitives/Paragraph";
 import { RadioGroup, RadioGroupItem } from "~/components/primitives/RadioButton";
 import SegmentedControl from "~/components/primitives/SegmentedControl";
+import type { ZoomRange } from "~/components/primitives/charts/hooks/useZoomSelection";
 
 function ChartsDashboard() {
   const dateRange = useDateRange();
   const [chartState, setChartState] = useState<ChartState>("loaded");
+  const [zoomRange, setZoomRange] = useState<ZoomRange | null>(null);
+
+  const handleZoomChange = (range: ZoomRange) => {
+    console.log("Zoom changed:", range);
+    setZoomRange(range);
+    // In a real app, you would fetch new data here based on the range
+  };
 
   return (
     <div className="grid">
@@ -45,23 +54,34 @@ function ChartsDashboard() {
           </RadioGroup>
         </div>
         <div className="flex w-fit items-center gap-4">
-          <Paragraph variant="small/bright">{`Selected range: ${dateRange?.startDate} - ${dateRange?.endDate}`}</Paragraph>
-          <Button variant="secondary/small" onClick={dateRange?.resetDateRange}>
+          <Paragraph variant="small/bright">
+            {zoomRange
+              ? `Zoomed: ${zoomRange.start} - ${zoomRange.end}`
+              : `Selected range: ${dateRange?.startDate} - ${dateRange?.endDate}`}
+          </Paragraph>
+          <Button
+            variant="secondary/small"
+            onClick={() => {
+              dateRange?.resetDateRange();
+              setZoomRange(null);
+            }}
+          >
             Reset Zoom
           </Button>
         </div>
       </div>
 
       <div className="grid grid-cols-2 gap-3 p-3">
+        {/* Compound Component API Example */}
         <Card>
           <Card.Header>
             <div className="flex items-center gap-1.5">
               <ArrowTrendingUpIcon className="size-5 text-indigo-500" />
-              Runs total
+              Compound API <span className="font-normal text-text-dimmed">(with zoom)</span>
             </div>
             <Card.Accessory>
               <SegmentedControl
-                name="runsByStatus"
+                name="compoundByStatus"
                 options={[
                   { label: "By status", value: "status" },
                   { label: "By task", value: "task" },
@@ -69,34 +89,37 @@ function ChartsDashboard() {
                 defaultValue="status"
                 variant="secondary/small"
               />
-              <Button
-                variant="secondary/small"
-                TrailingIcon={<ArrowTopRightBottomLeftIcon className="size-4" />}
-                className="px-1"
-              />
             </Card.Accessory>
           </Card.Header>
           <Card.Content>
-            <ChartBar
+            <Chart.Root
               config={barChartBigDatasetConfig}
               data={API_DATA.barChartBigDatasetData}
               dataKey="day"
-              stackId="a"
-              useGlobalDateRange={true}
-              referenceLine={{
-                value: 45000,
-                label: "Max concurrency",
-              }}
+              enableZoom
+              onZoomChange={handleZoomChange}
               state={chartState === "loaded" ? undefined : chartState}
               minHeight="400px"
-            />
+            >
+              <Chart.Bar
+                stackId="a"
+                referenceLine={{
+                  value: 45000,
+                  label: "Max concurrency",
+                }}
+                showLegend
+                maxLegendItems={5}
+              />
+            </Chart.Root>
           </Card.Content>
         </Card>
+
+        {/* Legacy API Example (still works) */}
         <Card>
           <Card.Header>
             <div className="flex items-center gap-1.5">
               <AbacusIcon className="size-5 text-indigo-500" />
-              Run count <span className="font-normal text-text-dimmed">by status</span>
+              Legacy API <span className="font-normal text-text-dimmed">by status</span>
             </div>
             <Card.Accessory>
               <SegmentedControl
@@ -121,7 +144,8 @@ function ChartsDashboard() {
               data={API_DATA.barChartData}
               dataKey="day"
               stackId="a"
-              useGlobalDateRange={true}
+              enableZoom
+              onZoomChange={handleZoomChange}
               referenceLine={{
                 value: 30000,
                 label: "Max concurrency",
@@ -131,39 +155,70 @@ function ChartsDashboard() {
             />
           </Card.Content>
         </Card>
+
+        {/* Simple Line Chart (no zoom) */}
         <Card>
           <Card.Header>
             <div className="flex items-center gap-1.5">
               <IconTimeline className="size-5 text-indigo-500" />
-              Success rate <span className="font-normal text-text-dimmed">by status</span>
+              Simple Line <span className="font-normal text-text-dimmed">(no zoom)</span>
             </div>
-            <Card.Accessory>
-              <SegmentedControl
-                name="runCountByStatus"
-                options={[
-                  { label: "By status", value: "status" },
-                  { label: "By task", value: "task" },
-                ]}
-                defaultValue="status"
-                variant="secondary/small"
-              />
-              <Button
-                variant="secondary/small"
-                TrailingIcon={<ArrowTopRightBottomLeftIcon className="size-4" />}
-                className="px-1"
-              />
-            </Card.Accessory>
           </Card.Header>
           <Card.Content>
-            <ChartLine
+            <Chart.Root
               config={lineChartConfig}
               data={API_DATA.lineChartData}
               dataKey="day"
-              useGlobalDateRange={true}
               state={chartState === "loaded" ? undefined : chartState}
-            />
+            >
+              <Chart.Line lineType="step" showLegend />
+            </Chart.Root>
+          </Card.Content>
+        </Card>
+
+        {/* Line Chart with Zoom */}
+        <Card>
+          <Card.Header>
+            <div className="flex items-center gap-1.5">
+              <IconTimeline className="size-5 text-green-500" />
+              Line with Zoom
+            </div>
+          </Card.Header>
+          <Card.Content>
+            <Chart.Root
+              config={lineChartConfig}
+              data={API_DATA.lineChartData}
+              dataKey="day"
+              enableZoom
+              onZoomChange={handleZoomChange}
+              state={chartState === "loaded" ? undefined : chartState}
+            >
+              <Chart.Line lineType="natural" showLegend />
+            </Chart.Root>
           </Card.Content>
         </Card>
+
+        {/* Stacked Area Chart */}
+        <Card>
+          <Card.Header>
+            <div className="flex items-center gap-1.5">
+              <IconTimeline className="size-5 text-purple-500" />
+              Stacked Area
+            </div>
+          </Card.Header>
+          <Card.Content>
+            <Chart.Root
+              config={lineChartConfig}
+              data={API_DATA.lineChartData}
+              dataKey="day"
+              state={chartState === "loaded" ? undefined : chartState}
+            >
+              <Chart.Line stacked lineType="monotone" showLegend />
+            </Chart.Root>
+          </Card.Content>
+        </Card>
+
+        {/* Big Number */}
         <Card>
           <Card.Header>
             Big Number

From 739a94767df0d0997adb4c6e208f90ed87e3e4df Mon Sep 17 00:00:00 2001
From: Matt Aitken <matt@mattaitken.com>
Date: Wed, 14 Jan 2026 10:59:58 +0000
Subject: [PATCH 079/137] Lines/bars actually appear again

---
 .../components/primitives/charts/ChartBar.tsx | 21 +++++++++++-
 .../primitives/charts/ChartLine.tsx           | 10 ++++++
 .../primitives/charts/ChartZoom.tsx           | 32 ++++++++++++++-----
 3 files changed, 54 insertions(+), 9 deletions(-)

diff --git a/apps/webapp/app/components/primitives/charts/ChartBar.tsx b/apps/webapp/app/components/primitives/charts/ChartBar.tsx
index 398137fc1b..0c8bcc1e5a 100644
--- a/apps/webapp/app/components/primitives/charts/ChartBar.tsx
+++ b/apps/webapp/app/components/primitives/charts/ChartBar.tsx
@@ -54,6 +54,10 @@ export type ChartBarRendererProps = {
   maxLegendItems?: number;
   /** Use simple inline legend */
   simpleLegend?: boolean;
+  /** Width injected by ResponsiveContainer */
+  width?: number;
+  /** Height injected by ResponsiveContainer */
+  height?: number;
 };
 
 /**
@@ -77,6 +81,8 @@ export function ChartBarRenderer({
   showLegend = false,
   maxLegendItems = 5,
   simpleLegend = false,
+  width,
+  height,
 }: ChartBarRendererProps) {
   const { config, data, dataKey, dataKeys, state, highlight, zoom } = useChartContext();
   const hasNoData = useHasNoData();
@@ -119,6 +125,8 @@ export function ChartBarRenderer({
   return (
     <BarChart
       data={data}
+      width={width}
+      height={height}
       barCategoryGap={1}
       onMouseDown={zoomHandlers.onMouseDown}
       onMouseMove={(e: any) => {
@@ -164,7 +172,18 @@ export function ChartBarRenderer({
       />
       <ChartTooltip
         cursor={{ fill: "#2C3034" }}
-        content={tooltipLabelFormatter ? <ChartTooltipContent /> : <ZoomTooltip />}
+        content={
+          tooltipLabelFormatter ? (
+            <ChartTooltipContent />
+          ) : (
+            <ZoomTooltip
+              isSelecting={zoom?.isSelecting}
+              refAreaLeft={zoom?.refAreaLeft}
+              refAreaRight={zoom?.refAreaRight}
+              invalidSelection={zoom?.invalidSelection}
+            />
+          )
+        }
         labelFormatter={tooltipLabelFormatter}
         allowEscapeViewBox={{ x: false, y: true }}
       />
diff --git a/apps/webapp/app/components/primitives/charts/ChartLine.tsx b/apps/webapp/app/components/primitives/charts/ChartLine.tsx
index 7a36dff721..232a70a57e 100644
--- a/apps/webapp/app/components/primitives/charts/ChartLine.tsx
+++ b/apps/webapp/app/components/primitives/charts/ChartLine.tsx
@@ -55,6 +55,10 @@ export type ChartLineRendererProps = {
   tooltipLabelFormatter?: (label: string, payload: any[]) => string;
   /** Show built-in legend (for compound API, prefer Chart.Legend instead) */
   showLegend?: boolean;
+  /** Width injected by ResponsiveContainer */
+  width?: number;
+  /** Height injected by ResponsiveContainer */
+  height?: number;
 };
 
 /**
@@ -76,6 +80,8 @@ export function ChartLineRenderer({
   stacked = false,
   tooltipLabelFormatter,
   showLegend = false,
+  width,
+  height,
 }: ChartLineRendererProps) {
   const { config, data, dataKey, dataKeys, state, highlight } = useChartContext();
   const hasNoData = useHasNoData();
@@ -127,6 +133,8 @@ export function ChartLineRenderer({
     return (
       <AreaChart
         data={data}
+        width={width}
+        height={height}
         stackOffset="none"
         margin={{
           left: 12,
@@ -165,6 +173,8 @@ export function ChartLineRenderer({
     <LineChart
       accessibilityLayer
       data={data}
+      width={width}
+      height={height}
       margin={{
         left: 12,
         right: 12,
diff --git a/apps/webapp/app/components/primitives/charts/ChartZoom.tsx b/apps/webapp/app/components/primitives/charts/ChartZoom.tsx
index 6d5bcb873b..4b2e921630 100644
--- a/apps/webapp/app/components/primitives/charts/ChartZoom.tsx
+++ b/apps/webapp/app/components/primitives/charts/ChartZoom.tsx
@@ -79,6 +79,9 @@ export function ChartZoom({ syncWithDateRange = false, minDataPoints = 3 }: Char
 /**
  * Tooltip component for showing zoom selection feedback.
  * Can be used inside ChartTooltip content prop.
+ *
+ * Note: This component receives zoom state as props because recharts
+ * may render tooltips outside the normal React tree where context isn't available.
  */
 export type ZoomTooltipProps = {
   active?: boolean;
@@ -92,24 +95,37 @@ export type ZoomTooltipProps = {
     x: number;
     y: number;
   };
+  // Zoom state passed as props (since context might not be available in tooltip)
+  isSelecting?: boolean;
+  refAreaLeft?: string | null;
+  refAreaRight?: string | null;
+  invalidSelection?: boolean;
 };
 
-export function ZoomTooltip({ active, payload, label, viewBox, coordinate }: ZoomTooltipProps) {
-  const { zoom } = useChartContext();
-
+export function ZoomTooltip({
+  active,
+  payload,
+  label,
+  viewBox,
+  coordinate,
+  isSelecting,
+  refAreaLeft,
+  refAreaRight,
+  invalidSelection,
+}: ZoomTooltipProps) {
   if (!active) return null;
 
   // Show zoom range when selecting
-  if (zoom?.isSelecting && zoom.refAreaLeft && zoom.refAreaRight) {
-    const message = zoom.invalidSelection
+  if (isSelecting && refAreaLeft && refAreaRight) {
+    const message = invalidSelection
       ? "Zoom: Drag a wider range"
-      : `Zoom: ${zoom.refAreaLeft} to ${zoom.refAreaRight}`;
+      : `Zoom: ${refAreaLeft} to ${refAreaRight}`;
 
     return (
       <div
         className={cn(
           "absolute whitespace-nowrap rounded border px-2 py-1 text-xxs tabular-nums",
-          zoom.invalidSelection
+          invalidSelection
             ? "border-amber-800 bg-amber-950 text-amber-400"
             : "border-blue-800 bg-[#1B2334] text-blue-400"
         )}
@@ -123,7 +139,7 @@ export function ZoomTooltip({ active, payload, label, viewBox, coordinate }: Zoo
         <div
           className={cn(
             "absolute -top-[5px] left-1/2 h-2 w-2 -translate-x-1/2 rotate-45",
-            zoom.invalidSelection
+            invalidSelection
               ? "border-l border-t border-amber-800 bg-amber-950"
               : "border-l border-t border-blue-800 bg-[#1B2334]"
           )}

From 4266faf1d02aedbbe789bf80e8d03e6fd40e630f Mon Sep 17 00:00:00 2001
From: Matt Aitken <matt@mattaitken.com>
Date: Wed, 14 Jan 2026 13:21:36 +0000
Subject: [PATCH 080/137] Some fixes. Legend displaying

---
 .../components/primitives/charts/ChartBar.tsx |  23 ++-
 .../primitives/charts/ChartLegendCompound.tsx | 131 +++++++++---------
 .../primitives/charts/ChartLine.tsx           |  15 +-
 .../primitives/charts/ChartRoot.tsx           |  26 +++-
 .../app/routes/storybook.charts/route.tsx     |  13 +-
 5 files changed, 118 insertions(+), 90 deletions(-)

diff --git a/apps/webapp/app/components/primitives/charts/ChartBar.tsx b/apps/webapp/app/components/primitives/charts/ChartBar.tsx
index 0c8bcc1e5a..c56a5ea5f9 100644
--- a/apps/webapp/app/components/primitives/charts/ChartBar.tsx
+++ b/apps/webapp/app/components/primitives/charts/ChartBar.tsx
@@ -21,7 +21,7 @@ import { cn } from "~/utils/cn";
 import { ChartBarLoading, ChartBarInvalid, ChartBarNoData } from "./ChartLoading";
 import { useChartContext } from "./ChartContext";
 import { ChartRoot, useHasNoData } from "./ChartRoot";
-import { ChartLegendCompound } from "./ChartLegendCompound";
+// Legend is now rendered by ChartRoot outside the chart container
 import { ChartZoom, ZoomTooltip, useZoomHandlers } from "./ChartZoom";
 import { getBarOpacity } from "./hooks/useHighlightState";
 import type { ZoomRange } from "./hooks/useZoomSelection";
@@ -48,11 +48,11 @@ export type ChartBarRendererProps = {
   referenceLine?: ReferenceLineProps;
   /** Custom tooltip label formatter */
   tooltipLabelFormatter?: (label: string, payload: any[]) => string;
-  /** Show legend (default false) */
+  /** @deprecated Legend is now controlled via Chart.Root showLegend prop */
   showLegend?: boolean;
-  /** Maximum legend items before collapsing */
+  /** @deprecated Legend is now controlled via Chart.Root maxLegendItems prop */
   maxLegendItems?: number;
-  /** Use simple inline legend */
+  /** @deprecated No longer used */
   simpleLegend?: boolean;
   /** Width injected by ResponsiveContainer */
   width?: number;
@@ -78,9 +78,10 @@ export function ChartBarRenderer({
   yAxisProps: yAxisPropsProp,
   referenceLine,
   tooltipLabelFormatter,
-  showLegend = false,
-  maxLegendItems = 5,
-  simpleLegend = false,
+  // Deprecated: legend is now controlled via Chart.Root
+  showLegend: _showLegend,
+  maxLegendItems: _maxLegendItems,
+  simpleLegend: _simpleLegend,
   width,
   height,
 }: ChartBarRendererProps) {
@@ -250,8 +251,7 @@ export function ChartBarRenderer({
       {/* Zoom components */}
       {enableZoom && <ChartZoom />}
 
-      {/* Legend */}
-      {showLegend && <ChartLegendCompound maxItems={maxLegendItems} simple={simpleLegend} />}
+      {/* Note: Legend is now rendered by ChartRoot outside the chart container */}
     </BarChart>
   );
 }
@@ -337,6 +337,8 @@ export function ChartBar({
       onZoomChange={onZoomChange}
       minHeight={minHeight}
       className={className}
+      showLegend={showLegend}
+      maxLegendItems={maxLegendItems}
     >
       <ChartBarRenderer
         stackId={stackId}
@@ -344,9 +346,6 @@ export function ChartBar({
         yAxisProps={yAxisProps}
         referenceLine={referenceLine}
         tooltipLabelFormatter={tooltipLabelFormatter}
-        showLegend={showLegend}
-        maxLegendItems={maxLegendItems}
-        simpleLegend={simpleLegend}
       />
     </ChartRoot>
   );
diff --git a/apps/webapp/app/components/primitives/charts/ChartLegendCompound.tsx b/apps/webapp/app/components/primitives/charts/ChartLegendCompound.tsx
index bf35fad5df..56f39d8121 100644
--- a/apps/webapp/app/components/primitives/charts/ChartLegendCompound.tsx
+++ b/apps/webapp/app/components/primitives/charts/ChartLegendCompound.tsx
@@ -1,44 +1,36 @@
 import React, { useMemo } from "react";
-import { Legend } from "recharts";
-import { ChartLegendContent, ChartLegendContentRows } from "./Chart";
 import { useChartContext } from "./ChartContext";
 import { useSeriesTotal } from "./ChartRoot";
 import { Button } from "../Buttons";
 import { Paragraph } from "../Paragraph";
+import { cn } from "~/utils/cn";
+import { AnimatedNumber } from "../AnimatedNumber";
 
 export type ChartLegendCompoundProps = {
   /** Maximum number of legend items to show before collapsing */
   maxItems?: number;
-  /** Use simple inline legend instead of row-based legend */
-  simple?: boolean;
   /** Hide the legend entirely (useful for conditional rendering) */
   hidden?: boolean;
+  /** Additional className */
+  className?: string;
 };
 
 /**
  * Legend component for the chart compound system.
+ * Renders as a permanent element below the chart (not inside recharts).
  * Automatically connects to chart context for highlighting.
  *
- * @example Simple legend
+ * @example Using via Chart.Root showLegend prop (recommended)
  * ```tsx
- * <Chart.Root config={config} data={data} dataKey="day">
+ * <Chart.Root config={config} data={data} dataKey="day" showLegend maxLegendItems={5}>
  *   <Chart.Bar />
- *   <Chart.Legend />
- * </Chart.Root>
- * ```
- *
- * @example Row legend with max items
- * ```tsx
- * <Chart.Root config={config} data={data} dataKey="day">
- *   <Chart.Bar />
- *   <Chart.Legend maxItems={5} />
  * </Chart.Root>
  * ```
  */
 export function ChartLegendCompound({
   maxItems = 5,
-  simple = false,
   hidden = false,
+  className,
 }: ChartLegendCompoundProps) {
   const { config, dataKeys, highlight } = useChartContext();
   const totals = useSeriesTotal();
@@ -62,75 +54,88 @@ export function ChartLegendCompound({
     };
   }, [highlight.activePayload, totals]);
 
-  // Prepare legend payload with capped items
-  const legendPayload = useMemo(() => {
-    const allPayload = dataKeys.map((key) => ({
+  // Prepare legend items with capped display
+  const legendItems = useMemo(() => {
+    const allItems = dataKeys.map((key) => ({
       dataKey: key,
-      type: "rect" as const,
       color: config[key]?.color,
-      value: key,
-      payload: {} as any,
+      label: config[key]?.label ?? key,
     }));
 
-    if (allPayload.length <= maxItems) {
-      return allPayload;
+    if (allItems.length <= maxItems) {
+      return { visible: allItems, remaining: 0 };
     }
 
-    const visiblePayload = allPayload.slice(0, maxItems);
-    const remainingCount = allPayload.length - maxItems;
+    const visibleItems = allItems.slice(0, maxItems);
+    const remainingCount = allItems.length - maxItems;
 
     // If we're hovering over an item that's not visible in the legend,
     // add it as an extra item instead of showing the "view more" row
     if (
       highlight.activeBarKey &&
-      !visiblePayload.some((item) => item.dataKey === highlight.activeBarKey)
+      !visibleItems.some((item) => item.dataKey === highlight.activeBarKey)
     ) {
-      const hoveredItem = allPayload.find((item) => item.dataKey === highlight.activeBarKey);
+      const hoveredItem = allItems.find((item) => item.dataKey === highlight.activeBarKey);
       if (hoveredItem) {
-        return [...visiblePayload, hoveredItem];
+        return { visible: [...visibleItems, hoveredItem], remaining: remainingCount - 1 };
       }
     }
 
-    // Otherwise show the "view more" row
-    return [
-      ...visiblePayload,
-      {
-        dataKey: "view-more",
-        type: "rect" as const,
-        color: "transparent",
-        value: "view-more",
-        payload: { remainingCount },
-      },
-    ];
+    return { visible: visibleItems, remaining: remainingCount };
   }, [config, dataKeys, maxItems, highlight.activeBarKey]);
 
-  if (hidden) {
+  if (hidden || dataKeys.length === 0) {
     return null;
   }
 
-  if (simple) {
-    return <Legend content={<ChartLegendContent />} />;
-  }
-
   return (
-    <Legend
-      content={
-        <ChartLegendContentRows
-          onMouseEnter={(data) => {
-            if (data.dataKey === "view-more") return;
-            highlight.setHoveredLegendItem(data.dataKey);
-          }}
-          onMouseLeave={highlight.reset}
-          data={currentData}
-          activeKey={highlight.activeBarKey}
-          payload={legendPayload}
-          renderViewMore={(remainingCount: number) => (
-            <ViewAllDataRow key="view-more" remainingCount={remainingCount} />
-          )}
-        />
-      }
-      payload={legendPayload}
-    />
+    <div className={cn("flex flex-col pt-4", className)}>
+      {legendItems.visible.map((item) => {
+        const total = currentData[item.dataKey] ?? 0;
+        const isActive = highlight.activeBarKey === item.dataKey;
+
+        return (
+          <div
+            key={item.dataKey}
+            className={cn(
+              "relative flex w-full cursor-pointer items-center justify-between gap-2 rounded px-2 py-1 transition",
+              total === 0 && "opacity-50"
+            )}
+            onMouseEnter={() => highlight.setHoveredLegendItem(item.dataKey)}
+            onMouseLeave={() => highlight.reset()}
+          >
+            {/* Active highlight background */}
+            {isActive && item.color && (
+              <div
+                className="absolute inset-0 rounded opacity-10"
+                style={{ backgroundColor: item.color }}
+              />
+            )}
+            <div className="relative flex w-full items-center justify-between gap-2">
+              <div className="flex items-center gap-1.5">
+                {item.color && (
+                  <div
+                    className="h-3 w-1 shrink-0 rounded-[2px]"
+                    style={{ backgroundColor: item.color }}
+                  />
+                )}
+                <span className={isActive ? "text-text-bright" : "text-text-dimmed"}>
+                  {item.label}
+                </span>
+              </div>
+              <span
+                className={cn("tabular-nums", isActive ? "text-text-bright" : "text-text-dimmed")}
+              >
+                <AnimatedNumber value={total} duration={0.25} />
+              </span>
+            </div>
+          </div>
+        );
+      })}
+
+      {/* View more row */}
+      {legendItems.remaining > 0 && <ViewAllDataRow remainingCount={legendItems.remaining} />}
+    </div>
   );
 }
 
diff --git a/apps/webapp/app/components/primitives/charts/ChartLine.tsx b/apps/webapp/app/components/primitives/charts/ChartLine.tsx
index 232a70a57e..befb38513e 100644
--- a/apps/webapp/app/components/primitives/charts/ChartLine.tsx
+++ b/apps/webapp/app/components/primitives/charts/ChartLine.tsx
@@ -12,8 +12,6 @@ import {
 } from "recharts";
 import {
   type ChartConfig,
-  ChartLegend,
-  ChartLegendContent,
   ChartTooltip,
   ChartTooltipContent,
   type ChartState,
@@ -21,7 +19,7 @@ import {
 import { ChartLineLoading, ChartLineNoData, ChartLineInvalid } from "./ChartLoading";
 import { useChartContext } from "./ChartContext";
 import { ChartRoot, useHasNoData } from "./ChartRoot";
-import { ChartLegendCompound } from "./ChartLegendCompound";
+// Legend is now rendered by ChartRoot outside the chart container
 import type { ZoomRange } from "./hooks/useZoomSelection";
 
 type CurveType =
@@ -53,7 +51,7 @@ export type ChartLineRendererProps = {
   stacked?: boolean;
   /** Custom tooltip label formatter */
   tooltipLabelFormatter?: (label: string, payload: any[]) => string;
-  /** Show built-in legend (for compound API, prefer Chart.Legend instead) */
+  /** @deprecated Legend is now controlled via Chart.Root showLegend prop */
   showLegend?: boolean;
   /** Width injected by ResponsiveContainer */
   width?: number;
@@ -79,7 +77,8 @@ export function ChartLineRenderer({
   yAxisProps: yAxisPropsProp,
   stacked = false,
   tooltipLabelFormatter,
-  showLegend = false,
+  // Deprecated: legend is now controlled via Chart.Root
+  showLegend: _showLegend,
   width,
   height,
 }: ChartLineRendererProps) {
@@ -151,7 +150,7 @@ export function ChartLineRenderer({
           content={<ChartTooltipContent indicator="line" />}
           labelFormatter={tooltipLabelFormatter}
         />
-        {showLegend && <ChartLegend content={<ChartLegendContent />} />}
+        {/* Note: Legend is now rendered by ChartRoot outside the chart container */}
         {dataKeys.map((key) => (
           <Area
             key={key}
@@ -190,7 +189,7 @@ export function ChartLineRenderer({
         content={<ChartTooltipContent />}
         labelFormatter={tooltipLabelFormatter}
       />
-      {showLegend && <ChartLegend content={<ChartLegendContent />} />}
+      {/* Note: Legend is now rendered by ChartRoot outside the chart container */}
       {dataKeys.map((key) => (
         <Line
           key={key}
@@ -282,6 +281,7 @@ export function ChartLine({
       onZoomChange={onZoomChange}
       minHeight={minHeight}
       className={className}
+      showLegend={showLegend}
     >
       <ChartLineRenderer
         lineType={lineType}
@@ -289,7 +289,6 @@ export function ChartLine({
         yAxisProps={yAxisProps}
         stacked={stacked}
         tooltipLabelFormatter={tooltipLabelFormatter}
-        showLegend={showLegend}
       />
     </ChartRoot>
   );
diff --git a/apps/webapp/app/components/primitives/charts/ChartRoot.tsx b/apps/webapp/app/components/primitives/charts/ChartRoot.tsx
index 2b269e9dfe..c0e96c7cb5 100644
--- a/apps/webapp/app/components/primitives/charts/ChartRoot.tsx
+++ b/apps/webapp/app/components/primitives/charts/ChartRoot.tsx
@@ -2,6 +2,7 @@ import React, { useMemo } from "react";
 import type * as RechartsPrimitive from "recharts";
 import { ChartContainer, type ChartConfig, type ChartState } from "./Chart";
 import { ChartProvider, useChartContext } from "./ChartContext";
+import { ChartLegendCompound } from "./ChartLegendCompound";
 import type { ZoomRange } from "./hooks/useZoomSelection";
 import { cn } from "~/utils/cn";
 
@@ -20,6 +21,10 @@ export type ChartRootProps = {
   minHeight?: string;
   /** Additional className for the container */
   className?: string;
+  /** Show the compound legend below the chart */
+  showLegend?: boolean;
+  /** Maximum items in the legend before showing "view more" */
+  maxLegendItems?: number;
   children: React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>["children"];
 };
 
@@ -54,6 +59,8 @@ export function ChartRoot({
   onZoomChange,
   minHeight,
   className,
+  showLegend = false,
+  maxLegendItems = 5,
   children,
 }: ChartRootProps) {
   return (
@@ -66,7 +73,12 @@ export function ChartRoot({
       enableZoom={enableZoom}
       onZoomChange={onZoomChange}
     >
-      <ChartRootInner minHeight={minHeight} className={className}>
+      <ChartRootInner
+        minHeight={minHeight}
+        className={className}
+        showLegend={showLegend}
+        maxLegendItems={maxLegendItems}
+      >
         {children}
       </ChartRootInner>
     </ChartProvider>
@@ -76,10 +88,18 @@ export function ChartRoot({
 type ChartRootInnerProps = {
   minHeight?: string;
   className?: string;
+  showLegend?: boolean;
+  maxLegendItems?: number;
   children: React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>["children"];
 };
 
-function ChartRootInner({ minHeight, className, children }: ChartRootInnerProps) {
+function ChartRootInner({
+  minHeight,
+  className,
+  showLegend = false,
+  maxLegendItems = 5,
+  children,
+}: ChartRootInnerProps) {
   const { config, zoom } = useChartContext();
   const enableZoom = zoom !== null;
 
@@ -101,6 +121,8 @@ function ChartRootInner({ minHeight, className, children }: ChartRootInnerProps)
           {children}
         </ChartContainer>
       </div>
+      {/* Legend rendered outside the chart container */}
+      {showLegend && <ChartLegendCompound maxItems={maxLegendItems} />}
     </div>
   );
 }
diff --git a/apps/webapp/app/routes/storybook.charts/route.tsx b/apps/webapp/app/routes/storybook.charts/route.tsx
index 26274d66d8..284f649bc4 100644
--- a/apps/webapp/app/routes/storybook.charts/route.tsx
+++ b/apps/webapp/app/routes/storybook.charts/route.tsx
@@ -100,6 +100,8 @@ function ChartsDashboard() {
               onZoomChange={handleZoomChange}
               state={chartState === "loaded" ? undefined : chartState}
               minHeight="400px"
+              showLegend
+              maxLegendItems={5}
             >
               <Chart.Bar
                 stackId="a"
@@ -107,8 +109,6 @@ function ChartsDashboard() {
                   value: 45000,
                   label: "Max concurrency",
                 }}
-                showLegend
-                maxLegendItems={5}
               />
             </Chart.Root>
           </Card.Content>
@@ -170,8 +170,9 @@ function ChartsDashboard() {
               data={API_DATA.lineChartData}
               dataKey="day"
               state={chartState === "loaded" ? undefined : chartState}
+              showLegend
             >
-              <Chart.Line lineType="step" showLegend />
+              <Chart.Line lineType="step" />
             </Chart.Root>
           </Card.Content>
         </Card>
@@ -192,8 +193,9 @@ function ChartsDashboard() {
               enableZoom
               onZoomChange={handleZoomChange}
               state={chartState === "loaded" ? undefined : chartState}
+              showLegend
             >
-              <Chart.Line lineType="natural" showLegend />
+              <Chart.Line lineType="natural" />
             </Chart.Root>
           </Card.Content>
         </Card>
@@ -212,8 +214,9 @@ function ChartsDashboard() {
               data={API_DATA.lineChartData}
               dataKey="day"
               state={chartState === "loaded" ? undefined : chartState}
+              showLegend
             >
-              <Chart.Line stacked lineType="monotone" showLegend />
+              <Chart.Line stacked lineType="monotone" />
             </Chart.Root>
           </Card.Content>
         </Card>

From 93ecf4839fd00b18cf40fa4c27db87ed92312385 Mon Sep 17 00:00:00 2001
From: Matt Aitken <matt@mattaitken.com>
Date: Wed, 14 Jan 2026 14:07:49 +0000
Subject: [PATCH 081/137] Smaller legend font

---
 .../app/components/primitives/charts/ChartLegendCompound.tsx  | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/webapp/app/components/primitives/charts/ChartLegendCompound.tsx b/apps/webapp/app/components/primitives/charts/ChartLegendCompound.tsx
index 56f39d8121..13487cdc3a 100644
--- a/apps/webapp/app/components/primitives/charts/ChartLegendCompound.tsx
+++ b/apps/webapp/app/components/primitives/charts/ChartLegendCompound.tsx
@@ -28,7 +28,7 @@ export type ChartLegendCompoundProps = {
  * ```
  */
 export function ChartLegendCompound({
-  maxItems = 5,
+  maxItems = Infinity,
   hidden = false,
   className,
 }: ChartLegendCompoundProps) {
@@ -89,7 +89,7 @@ export function ChartLegendCompound({
   }
 
   return (
-    <div className={cn("flex flex-col pt-4", className)}>
+    <div className={cn("flex flex-col pt-4 text-sm", className)}>
       {legendItems.visible.map((item) => {
         const total = currentData[item.dataKey] ?? 0;
         const isActive = highlight.activeBarKey === item.dataKey;

From 2658294f78b4f234f6dd268523cf34b3e2dafdf2 Mon Sep 17 00:00:00 2001
From: Matt Aitken <matt@mattaitken.com>
Date: Wed, 14 Jan 2026 14:37:50 +0000
Subject: [PATCH 082/137] Zooming displays properly but just logs and doesn't
 zoom yet

---
 .../components/primitives/charts/ChartBar.tsx | 29 +++++++++--
 .../charts/hooks/useZoomSelection.ts          | 51 +++++++++++--------
 2 files changed, 56 insertions(+), 24 deletions(-)

diff --git a/apps/webapp/app/components/primitives/charts/ChartBar.tsx b/apps/webapp/app/components/primitives/charts/ChartBar.tsx
index c56a5ea5f9..0bf6aa46a5 100644
--- a/apps/webapp/app/components/primitives/charts/ChartBar.tsx
+++ b/apps/webapp/app/components/primitives/charts/ChartBar.tsx
@@ -22,7 +22,7 @@ import { ChartBarLoading, ChartBarInvalid, ChartBarNoData } from "./ChartLoading
 import { useChartContext } from "./ChartContext";
 import { ChartRoot, useHasNoData } from "./ChartRoot";
 // Legend is now rendered by ChartRoot outside the chart container
-import { ChartZoom, ZoomTooltip, useZoomHandlers } from "./ChartZoom";
+import { ZoomTooltip, useZoomHandlers } from "./ChartZoom";
 import { getBarOpacity } from "./hooks/useHighlightState";
 import type { ZoomRange } from "./hooks/useZoomSelection";
 
@@ -188,6 +188,18 @@ export function ChartBarRenderer({
         labelFormatter={tooltipLabelFormatter}
         allowEscapeViewBox={{ x: false, y: true }}
       />
+
+      {/* Zoom selection area - rendered before bars to appear behind them */}
+      {enableZoom && zoom?.refAreaLeft && zoom?.refAreaRight && (
+        <ReferenceArea
+          x1={zoom.refAreaLeft}
+          x2={zoom.refAreaRight}
+          strokeOpacity={0.4}
+          fill="#3B82F6"
+          fillOpacity={0.3}
+        />
+      )}
+
       {dataKeys.map((key, index, array) => {
         return (
           <Bar
@@ -248,8 +260,19 @@ export function ChartBarRenderer({
         />
       )}
 
-      {/* Zoom components */}
-      {enableZoom && <ChartZoom />}
+      {/* Zoom inspection line - rendered after bars to appear on top */}
+      {enableZoom && zoom?.inspectionLine && (
+        <ReferenceLine
+          x={zoom.inspectionLine}
+          stroke="#D7D9DD"
+          strokeWidth={2}
+          isFront={true}
+          onClick={(e: any) => {
+            e?.stopPropagation?.();
+            zoom.clearInspectionLine();
+          }}
+        />
+      )}
 
       {/* Note: Legend is now rendered by ChartRoot outside the chart container */}
     </BarChart>
diff --git a/apps/webapp/app/components/primitives/charts/hooks/useZoomSelection.ts b/apps/webapp/app/components/primitives/charts/hooks/useZoomSelection.ts
index 533b1e465c..b64f96965a 100644
--- a/apps/webapp/app/components/primitives/charts/hooks/useZoomSelection.ts
+++ b/apps/webapp/app/components/primitives/charts/hooks/useZoomSelection.ts
@@ -1,4 +1,4 @@
-import { useCallback, useState } from "react";
+import { useCallback, useRef, useState } from "react";
 
 export type ZoomRange = {
   start: string;
@@ -51,6 +51,11 @@ const initialState: ZoomSelectionState = {
  */
 export function useZoomSelection(): UseZoomSelectionReturn {
   const [state, setState] = useState<ZoomSelectionState>(initialState);
+  // Ref to track current state synchronously (needed for finishSelection)
+  const stateRef = useRef<ZoomSelectionState>(state);
+
+  // Keep ref in sync with state
+  stateRef.current = state;
 
   const startSelection = useCallback((label: string) => {
     setState((prev) => ({
@@ -94,31 +99,35 @@ export function useZoomSelection(): UseZoomSelectionReturn {
 
   const finishSelection = useCallback(
     (data: any[], dataKey: string, minDataPoints = 3): ZoomRange | null => {
-      let result: ZoomRange | null = null;
+      // Get current state synchronously to calculate result
+      // (We can't rely on setState callback return value as it's async)
+      const currentState = stateRef.current;
 
-      setState((prev) => {
-        if (!prev.refAreaLeft || !prev.refAreaRight) {
-          return { ...initialState, inspectionLine: prev.inspectionLine };
-        }
+      if (!currentState.refAreaLeft || !currentState.refAreaRight) {
+        setState((prev) => ({ ...initialState, inspectionLine: prev.inspectionLine }));
+        return null;
+      }
 
-        const allLabels = data.map((item) => item[dataKey] as string).filter(Boolean);
-        const leftIndex = allLabels.indexOf(prev.refAreaLeft);
-        const rightIndex = allLabels.indexOf(prev.refAreaRight);
+      const allLabels = data.map((item) => item[dataKey] as string).filter(Boolean);
+      const leftIndex = allLabels.indexOf(currentState.refAreaLeft);
+      const rightIndex = allLabels.indexOf(currentState.refAreaRight);
 
-        if (leftIndex !== -1 && rightIndex !== -1) {
-          const [startIdx, endIdx] = [leftIndex, rightIndex].sort((a, b) => a - b);
-
-          // Only create a valid range if we have enough data points
-          if (endIdx - startIdx >= minDataPoints - 1) {
-            result = {
-              start: allLabels[startIdx],
-              end: allLabels[endIdx],
-            };
-          }
+      let result: ZoomRange | null = null;
+
+      if (leftIndex !== -1 && rightIndex !== -1) {
+        const [startIdx, endIdx] = [leftIndex, rightIndex].sort((a, b) => a - b);
+
+        // Only create a valid range if we have enough data points
+        if (endIdx - startIdx >= minDataPoints - 1) {
+          result = {
+            start: allLabels[startIdx],
+            end: allLabels[endIdx],
+          };
         }
+      }
 
-        return { ...initialState, inspectionLine: prev.inspectionLine };
-      });
+      // Reset the state
+      setState((prev) => ({ ...initialState, inspectionLine: prev.inspectionLine }));
 
       return result;
     },

From fb99c743b9f341a1aba74f0c3f0b678e632d86d3 Mon Sep 17 00:00:00 2001
From: Matt Aitken <matt@mattaitken.com>
Date: Wed, 14 Jan 2026 14:38:00 +0000
Subject: [PATCH 083/137] Removed duplicate storybook nav items

---
 apps/webapp/app/routes/storybook/route.tsx | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/apps/webapp/app/routes/storybook/route.tsx b/apps/webapp/app/routes/storybook/route.tsx
index efac5b4325..83d455c2a5 100644
--- a/apps/webapp/app/routes/storybook/route.tsx
+++ b/apps/webapp/app/routes/storybook/route.tsx
@@ -132,14 +132,6 @@ const stories: Story[] = [
     name: "TSQL Editor",
     slug: "tsql-editor",
   },
-  {
-    name: "Timeline",
-    slug: "timeline",
-  },
-  {
-    name: "Run & Span timeline",
-    slug: "run-and-span-timeline",
-  },
   {
     name: "Typography",
     slug: "typography",

From 71c3d1b343ee68d5455ab76fb849a72a615a863b Mon Sep 17 00:00:00 2001
From: Matt Aitken <matt@mattaitken.com>
Date: Wed, 14 Jan 2026 21:14:48 +0000
Subject: [PATCH 084/137] Zooming working

---
 .../primitives/charts/DateRangeContext.tsx    |  67 +++++++++--
 .../charts/hooks/useZoomSelection.ts          |  90 +++++++++------
 .../app/routes/storybook.charts/route.tsx     | 107 +++++++++++++++---
 3 files changed, 203 insertions(+), 61 deletions(-)

diff --git a/apps/webapp/app/components/primitives/charts/DateRangeContext.tsx b/apps/webapp/app/components/primitives/charts/DateRangeContext.tsx
index e6ad7132e7..b5b3d13220 100644
--- a/apps/webapp/app/components/primitives/charts/DateRangeContext.tsx
+++ b/apps/webapp/app/components/primitives/charts/DateRangeContext.tsx
@@ -1,19 +1,68 @@
 import React, { createContext, useState, useContext, type ReactNode } from "react";
 
 type DateRangeContextType = {
+  /** Start date as ISO string (YYYY-MM-DD) or custom format */
   startDate: string;
+  /** End date as ISO string (YYYY-MM-DD) or custom format */
   endDate: string;
   setDateRange: (startDate: string, endDate: string) => void;
   resetDateRange: () => void;
 };
 
-const chartDateFormatter = new Intl.DateTimeFormat("en-US", {
+// Formatters for displaying dates
+const shortDateFormatter = new Intl.DateTimeFormat("en-US", {
   month: "short",
   day: "numeric",
 });
 
+const longDateFormatter = new Intl.DateTimeFormat("en-US", {
+  month: "short",
+  day: "numeric",
+  year: "numeric",
+});
+
+/**
+ * Format a Date object as a short date string (e.g., "Nov 1")
+ */
 export function formatChartDate(date: Date): string {
-  return chartDateFormatter.format(date);
+  return shortDateFormatter.format(date);
+}
+
+/**
+ * Format a Date object as a long date string (e.g., "Nov 1, 2023")
+ */
+export function formatChartDateLong(date: Date): string {
+  return longDateFormatter.format(date);
+}
+
+/**
+ * Convert a Date to ISO date string (YYYY-MM-DD)
+ */
+export function toISODateString(date: Date): string {
+  return date.toISOString().split("T")[0];
+}
+
+/**
+ * Parse an ISO date string to a Date object
+ */
+export function parseISODateString(isoString: string): Date {
+  return new Date(isoString + "T00:00:00");
+}
+
+/**
+ * Format an ISO date string for display (e.g., "2023-11-01" -> "Nov 1")
+ */
+export function formatISODate(isoString: string): string {
+  const date = parseISODateString(isoString);
+  return formatChartDate(date);
+}
+
+/**
+ * Format an ISO date string for display with year (e.g., "2023-11-01" -> "Nov 1, 2023")
+ */
+export function formatISODateLong(isoString: string): string {
+  const date = parseISODateString(isoString);
+  return formatChartDateLong(date);
 }
 
 const DateRangeContext = createContext<DateRangeContextType | null>(null);
@@ -27,12 +76,12 @@ export function DateRangeProvider({
   defaultStartDate: Date;
   defaultEndDate: Date;
 }) {
-  // Store the formatted string dates that match chart data format
-  const formattedStartDate = formatChartDate(defaultStartDate);
-  const formattedEndDate = formatChartDate(defaultEndDate);
+  // Store dates as ISO strings for consistent data matching
+  const defaultStartISO = toISODateString(defaultStartDate);
+  const defaultEndISO = toISODateString(defaultEndDate);
 
-  const [startDate, setStartDate] = useState<string>(formattedStartDate);
-  const [endDate, setEndDate] = useState<string>(formattedEndDate);
+  const [startDate, setStartDate] = useState<string>(defaultStartISO);
+  const [endDate, setEndDate] = useState<string>(defaultEndISO);
 
   const setDateRange = (start: string, end: string) => {
     setStartDate(start);
@@ -40,8 +89,8 @@ export function DateRangeProvider({
   };
 
   const resetDateRange = () => {
-    setStartDate(formattedStartDate);
-    setEndDate(formattedEndDate);
+    setStartDate(defaultStartISO);
+    setEndDate(defaultEndISO);
   };
 
   return (
diff --git a/apps/webapp/app/components/primitives/charts/hooks/useZoomSelection.ts b/apps/webapp/app/components/primitives/charts/hooks/useZoomSelection.ts
index b64f96965a..0a31af2cbe 100644
--- a/apps/webapp/app/components/primitives/charts/hooks/useZoomSelection.ts
+++ b/apps/webapp/app/components/primitives/charts/hooks/useZoomSelection.ts
@@ -58,41 +58,46 @@ export function useZoomSelection(): UseZoomSelectionReturn {
   stateRef.current = state;
 
   const startSelection = useCallback((label: string) => {
-    setState((prev) => ({
-      ...prev,
+    const next = {
+      ...stateRef.current,
       refAreaLeft: label,
       refAreaRight: null,
       isSelecting: true,
       invalidSelection: false,
-    }));
+    };
+    // Update ref synchronously first
+    stateRef.current = next;
+    setState(next);
   }, []);
 
   const updateSelection = useCallback(
     (label: string, data: any[], dataKey: string, minDataPoints = 3) => {
-      setState((prev) => {
-        if (!prev.isSelecting || !prev.refAreaLeft) {
-          return prev;
-        }
+      const prev = stateRef.current;
+      if (!prev.isSelecting || !prev.refAreaLeft) {
+        return;
+      }
 
-        // Check if selection is valid (has enough data points)
-        const allLabels = data.map((item) => item[dataKey] as string).filter(Boolean);
-        const leftIndex = allLabels.indexOf(prev.refAreaLeft);
-        const rightIndex = allLabels.indexOf(label);
-
-        let invalidSelection = false;
-        if (leftIndex !== -1 && rightIndex !== -1) {
-          const [start, end] = [leftIndex, rightIndex].sort((a, b) => a - b);
-          invalidSelection = end - start < minDataPoints - 1;
-        } else {
-          invalidSelection = true;
-        }
+      // Check if selection is valid (has enough data points)
+      const allLabels = data.map((item) => item[dataKey] as string).filter(Boolean);
+      const leftIndex = allLabels.indexOf(prev.refAreaLeft);
+      const rightIndex = allLabels.indexOf(label);
 
-        return {
-          ...prev,
-          refAreaRight: label,
-          invalidSelection,
-        };
-      });
+      let invalidSelection = false;
+      if (leftIndex !== -1 && rightIndex !== -1) {
+        const [start, end] = [leftIndex, rightIndex].sort((a, b) => a - b);
+        invalidSelection = end - start < minDataPoints - 1;
+      } else {
+        invalidSelection = true;
+      }
+
+      const next = {
+        ...prev,
+        refAreaRight: label,
+        invalidSelection,
+      };
+      // Update ref synchronously first
+      stateRef.current = next;
+      setState(next);
     },
     []
   );
@@ -100,11 +105,12 @@ export function useZoomSelection(): UseZoomSelectionReturn {
   const finishSelection = useCallback(
     (data: any[], dataKey: string, minDataPoints = 3): ZoomRange | null => {
       // Get current state synchronously to calculate result
-      // (We can't rely on setState callback return value as it's async)
       const currentState = stateRef.current;
 
       if (!currentState.refAreaLeft || !currentState.refAreaRight) {
-        setState((prev) => ({ ...initialState, inspectionLine: prev.inspectionLine }));
+        const next = { ...initialState, inspectionLine: currentState.inspectionLine };
+        stateRef.current = next;
+        setState(next);
         return null;
       }
 
@@ -126,8 +132,10 @@ export function useZoomSelection(): UseZoomSelectionReturn {
         }
       }
 
-      // Reset the state
-      setState((prev) => ({ ...initialState, inspectionLine: prev.inspectionLine }));
+      // Reset the state (preserve inspection line)
+      const next = { ...initialState, inspectionLine: currentState.inspectionLine };
+      stateRef.current = next;
+      setState(next);
 
       return result;
     },
@@ -135,27 +143,35 @@ export function useZoomSelection(): UseZoomSelectionReturn {
   );
 
   const cancelSelection = useCallback(() => {
-    setState((prev) => ({
+    const next = {
       ...initialState,
-      inspectionLine: prev.inspectionLine,
-    }));
+      inspectionLine: stateRef.current.inspectionLine,
+    };
+    stateRef.current = next;
+    setState(next);
   }, []);
 
   const toggleInspectionLine = useCallback((label: string) => {
-    setState((prev) => ({
+    const prev = stateRef.current;
+    const next = {
       ...prev,
       inspectionLine: prev.inspectionLine === label ? null : label,
-    }));
+    };
+    stateRef.current = next;
+    setState(next);
   }, []);
 
   const clearInspectionLine = useCallback(() => {
-    setState((prev) => ({
-      ...prev,
+    const next = {
+      ...stateRef.current,
       inspectionLine: null,
-    }));
+    };
+    stateRef.current = next;
+    setState(next);
   }, []);
 
   const reset = useCallback(() => {
+    stateRef.current = initialState;
     setState(initialState);
   }, []);
 
diff --git a/apps/webapp/app/routes/storybook.charts/route.tsx b/apps/webapp/app/routes/storybook.charts/route.tsx
index 284f649bc4..5174e3ef1f 100644
--- a/apps/webapp/app/routes/storybook.charts/route.tsx
+++ b/apps/webapp/app/routes/storybook.charts/route.tsx
@@ -1,6 +1,6 @@
 import { ArrowTrendingUpIcon } from "@heroicons/react/20/solid";
 import { IconTimeline } from "@tabler/icons-react";
-import { useState } from "react";
+import { useMemo, useState } from "react";
 import { AbacusIcon } from "~/assets/icons/AbacusIcon";
 import { ArrowTopRightBottomLeftIcon } from "~/assets/icons/ArrowTopRightBottomLeftIcon";
 import { Button } from "~/components/primitives/Buttons";
@@ -10,23 +10,85 @@ import { type ChartState, type ChartConfig } from "~/components/primitives/chart
 import { ChartBar } from "~/components/primitives/charts/ChartBar";
 import { ChartLine } from "~/components/primitives/charts/ChartLine";
 import { Chart } from "~/components/primitives/charts/ChartCompound";
-import { DateRangeProvider, useDateRange } from "~/components/primitives/charts/DateRangeContext";
+import {
+  DateRangeProvider,
+  useDateRange,
+  formatISODate,
+  formatISODateLong,
+} from "~/components/primitives/charts/DateRangeContext";
 import { Paragraph } from "~/components/primitives/Paragraph";
 import { RadioGroup, RadioGroupItem } from "~/components/primitives/RadioButton";
 import SegmentedControl from "~/components/primitives/SegmentedControl";
 import type { ZoomRange } from "~/components/primitives/charts/hooks/useZoomSelection";
 
+// Date formatters for chart display
+const xAxisTickFormatter = (value: string) => formatISODate(value);
+const tooltipLabelFormatter = (label: string) => formatISODateLong(label);
+
+/**
+ * Helper function to filter chart data by date range.
+ * In a real app, this would typically be handled server-side.
+ */
+function filterDataByDateRange<T extends Record<string, any>>(
+  data: T[],
+  dataKey: string,
+  startDate: string | undefined,
+  endDate: string | undefined
+): T[] {
+  if (!startDate || !endDate) return data;
+
+  const startIndex = data.findIndex((item) => item[dataKey] === startDate);
+  const endIndex = data.findIndex((item) => item[dataKey] === endDate);
+
+  if (startIndex === -1 || endIndex === -1) return data;
+
+  const [start, end] = [startIndex, endIndex].sort((a, b) => a - b);
+  return data.slice(start, end + 1);
+}
+
 function ChartsDashboard() {
   const dateRange = useDateRange();
   const [chartState, setChartState] = useState<ChartState>("loaded");
-  const [zoomRange, setZoomRange] = useState<ZoomRange | null>(null);
 
+  // Handle zoom change - updates the shared DateRangeContext
+  // In a real app, this would also trigger a server fetch for more granular data
   const handleZoomChange = (range: ZoomRange) => {
     console.log("Zoom changed:", range);
-    setZoomRange(range);
-    // In a real app, you would fetch new data here based on the range
+    // Update the shared date range context so all charts sync
+    // dateRange?.setDateRange(range.start, range.end);
+    // In a real app, you would fetch new data here based on the range:
+    // fetchChartData(range.start, range.end).then(setData);
   };
 
+  // Filter data based on the current date range from context
+  const filteredBarData = useMemo(
+    () =>
+      filterDataByDateRange(
+        API_DATA.barChartBigDatasetData,
+        "day",
+        dateRange?.startDate,
+        dateRange?.endDate
+      ),
+    [dateRange?.startDate, dateRange?.endDate]
+  );
+
+  const filteredBarData2 = useMemo(
+    () =>
+      filterDataByDateRange(API_DATA.barChartData, "day", dateRange?.startDate, dateRange?.endDate),
+    [dateRange?.startDate, dateRange?.endDate]
+  );
+
+  const filteredLineData = useMemo(
+    () =>
+      filterDataByDateRange(
+        API_DATA.lineChartData,
+        "day",
+        dateRange?.startDate,
+        dateRange?.endDate
+      ),
+    [dateRange?.startDate, dateRange?.endDate]
+  );
+
   return (
     <div className="grid">
       <div className="flex items-center justify-between gap-4 border-b border-charcoal-700 bg-background-bright p-2 pl-3">
@@ -152,27 +214,33 @@ function ChartsDashboard() {
               }}
               state={chartState === "loaded" ? undefined : chartState}
               minHeight="400px"
+              xAxisProps={{ tickFormatter: xAxisTickFormatter }}
+              tooltipLabelFormatter={tooltipLabelFormatter}
             />
           </Card.Content>
         </Card>
 
-        {/* Simple Line Chart (no zoom) */}
+        {/* Simple Line Chart (no zoom, but synced with date range) */}
         <Card>
           <Card.Header>
             <div className="flex items-center gap-1.5">
               <IconTimeline className="size-5 text-indigo-500" />
-              Simple Line <span className="font-normal text-text-dimmed">(no zoom)</span>
+              Simple Line <span className="font-normal text-text-dimmed">(synced, no zoom)</span>
             </div>
           </Card.Header>
           <Card.Content>
             <Chart.Root
               config={lineChartConfig}
-              data={API_DATA.lineChartData}
+              data={filteredLineData}
               dataKey="day"
               state={chartState === "loaded" ? undefined : chartState}
               showLegend
             >
-              <Chart.Line lineType="step" />
+              <Chart.Line
+                lineType="step"
+                xAxisProps={{ tickFormatter: xAxisTickFormatter }}
+                tooltipLabelFormatter={tooltipLabelFormatter}
+              />
             </Chart.Root>
           </Card.Content>
         </Card>
@@ -188,35 +256,44 @@ function ChartsDashboard() {
           <Card.Content>
             <Chart.Root
               config={lineChartConfig}
-              data={API_DATA.lineChartData}
+              data={filteredLineData}
               dataKey="day"
               enableZoom
               onZoomChange={handleZoomChange}
               state={chartState === "loaded" ? undefined : chartState}
               showLegend
             >
-              <Chart.Line lineType="natural" />
+              <Chart.Line
+                lineType="natural"
+                xAxisProps={{ tickFormatter: xAxisTickFormatter }}
+                tooltipLabelFormatter={tooltipLabelFormatter}
+              />
             </Chart.Root>
           </Card.Content>
         </Card>
 
-        {/* Stacked Area Chart */}
+        {/* Stacked Area Chart (synced with date range) */}
         <Card>
           <Card.Header>
             <div className="flex items-center gap-1.5">
               <IconTimeline className="size-5 text-purple-500" />
-              Stacked Area
+              Stacked Area <span className="font-normal text-text-dimmed">(synced)</span>
             </div>
           </Card.Header>
           <Card.Content>
             <Chart.Root
               config={lineChartConfig}
-              data={API_DATA.lineChartData}
+              data={filteredLineData}
               dataKey="day"
               state={chartState === "loaded" ? undefined : chartState}
               showLegend
             >
-              <Chart.Line stacked lineType="monotone" />
+              <Chart.Line
+                stacked
+                lineType="monotone"
+                xAxisProps={{ tickFormatter: xAxisTickFormatter }}
+                tooltipLabelFormatter={tooltipLabelFormatter}
+              />
             </Chart.Root>
           </Card.Content>
         </Card>

From 590968af8eebd0aeb6e74a19306af6ae2f7caa81 Mon Sep 17 00:00:00 2001
From: Matt Aitken <matt@mattaitken.com>
Date: Wed, 14 Jan 2026 21:15:05 +0000
Subject: [PATCH 085/137] Storybook route data updated

---
 .../app/routes/storybook.charts/route.tsx     | 199 +++++++++---------
 1 file changed, 97 insertions(+), 102 deletions(-)

diff --git a/apps/webapp/app/routes/storybook.charts/route.tsx b/apps/webapp/app/routes/storybook.charts/route.tsx
index 5174e3ef1f..72066f4fa5 100644
--- a/apps/webapp/app/routes/storybook.charts/route.tsx
+++ b/apps/webapp/app/routes/storybook.charts/route.tsx
@@ -117,17 +117,10 @@ function ChartsDashboard() {
         </div>
         <div className="flex w-fit items-center gap-4">
           <Paragraph variant="small/bright">
-            {zoomRange
-              ? `Zoomed: ${zoomRange.start} - ${zoomRange.end}`
-              : `Selected range: ${dateRange?.startDate} - ${dateRange?.endDate}`}
+            Current range: {dateRange?.startDate ? formatISODate(dateRange.startDate) : ""} -{" "}
+            {dateRange?.endDate ? formatISODate(dateRange.endDate) : ""}
           </Paragraph>
-          <Button
-            variant="secondary/small"
-            onClick={() => {
-              dateRange?.resetDateRange();
-              setZoomRange(null);
-            }}
-          >
+          <Button variant="secondary/small" onClick={() => dateRange?.resetDateRange()}>
             Reset Zoom
           </Button>
         </div>
@@ -156,7 +149,7 @@ function ChartsDashboard() {
           <Card.Content>
             <Chart.Root
               config={barChartBigDatasetConfig}
-              data={API_DATA.barChartBigDatasetData}
+              data={filteredBarData}
               dataKey="day"
               enableZoom
               onZoomChange={handleZoomChange}
@@ -171,6 +164,8 @@ function ChartsDashboard() {
                   value: 45000,
                   label: "Max concurrency",
                 }}
+                xAxisProps={{ tickFormatter: xAxisTickFormatter }}
+                tooltipLabelFormatter={tooltipLabelFormatter}
               />
             </Chart.Root>
           </Card.Content>
@@ -203,7 +198,7 @@ function ChartsDashboard() {
           <Card.Content>
             <ChartBar
               config={barChartConfig}
-              data={API_DATA.barChartData}
+              data={filteredBarData2}
               dataKey="day"
               stackId="a"
               enableZoom
@@ -334,72 +329,72 @@ const API_DATA = {
     endDate: new Date(2023, 10, 30), // November 30, 2023
   },
   lineChartData: [
-    { day: "Nov 1", "success-rate": 96.8, "failure-rate": 3.2 },
-    { day: "Nov 2", "success-rate": 95.3, "failure-rate": 4.7 },
-    { day: "Nov 3", "success-rate": 97.1, "failure-rate": 2.9 },
-    { day: "Nov 4", "success-rate": 94.5, "failure-rate": 5.5 },
-    { day: "Nov 5", "success-rate": 98.6, "failure-rate": 1.4 },
-    { day: "Nov 6", "success-rate": 97.8, "failure-rate": 2.2 },
-    { day: "Nov 7", "success-rate": 93.9, "failure-rate": 6.1 },
-    { day: "Nov 8", "success-rate": 95.7, "failure-rate": 4.3 },
-    { day: "Nov 9", "success-rate": 98.2, "failure-rate": 1.8 },
-    { day: "Nov 10", "success-rate": 96.5, "failure-rate": 3.5 },
-    { day: "Nov 11", "success-rate": 94.8, "failure-rate": 5.2 },
-    { day: "Nov 12", "success-rate": 99.1, "failure-rate": 0.9 },
-    { day: "Nov 13", "success-rate": 97.3, "failure-rate": 2.7 },
-    { day: "Nov 14", "success-rate": 95.9, "failure-rate": 4.1 },
-    { day: "Nov 15", "success-rate": 98.4, "failure-rate": 1.6 },
-    { day: "Nov 16", "success-rate": 96.2, "failure-rate": 3.8 },
-    { day: "Nov 17", "success-rate": 94.3, "failure-rate": 5.7 },
-    { day: "Nov 18", "success-rate": 97.5, "failure-rate": 2.5 },
-    { day: "Nov 19", "success-rate": 95.6, "failure-rate": 4.4 },
-    { day: "Nov 20", "success-rate": 98.9, "failure-rate": 1.1 },
-    { day: "Nov 21", "success-rate": 96.7, "failure-rate": 3.3 },
-    { day: "Nov 22", "success-rate": 95.1, "failure-rate": 4.9 },
-    { day: "Nov 23", "success-rate": 97.9, "failure-rate": 2.1 },
-    { day: "Nov 24", "success-rate": 94.7, "failure-rate": 5.3 },
-    { day: "Nov 25", "success-rate": 98.3, "failure-rate": 1.7 },
-    { day: "Nov 26", "success-rate": 96.4, "failure-rate": 3.6 },
-    { day: "Nov 27", "success-rate": 94.9, "failure-rate": 5.1 },
-    { day: "Nov 28", "success-rate": 97.7, "failure-rate": 2.3 },
-    { day: "Nov 29", "success-rate": 95.4, "failure-rate": 4.6 },
-    { day: "Nov 30", "success-rate": 98.8, "failure-rate": 1.2 },
+    { day: "2023-11-01", "success-rate": 96.8, "failure-rate": 3.2 },
+    { day: "2023-11-02", "success-rate": 95.3, "failure-rate": 4.7 },
+    { day: "2023-11-03", "success-rate": 97.1, "failure-rate": 2.9 },
+    { day: "2023-11-04", "success-rate": 94.5, "failure-rate": 5.5 },
+    { day: "2023-11-05", "success-rate": 98.6, "failure-rate": 1.4 },
+    { day: "2023-11-06", "success-rate": 97.8, "failure-rate": 2.2 },
+    { day: "2023-11-07", "success-rate": 93.9, "failure-rate": 6.1 },
+    { day: "2023-11-08", "success-rate": 95.7, "failure-rate": 4.3 },
+    { day: "2023-11-09", "success-rate": 98.2, "failure-rate": 1.8 },
+    { day: "2023-11-10", "success-rate": 96.5, "failure-rate": 3.5 },
+    { day: "2023-11-11", "success-rate": 94.8, "failure-rate": 5.2 },
+    { day: "2023-11-12", "success-rate": 99.1, "failure-rate": 0.9 },
+    { day: "2023-11-13", "success-rate": 97.3, "failure-rate": 2.7 },
+    { day: "2023-11-14", "success-rate": 95.9, "failure-rate": 4.1 },
+    { day: "2023-11-15", "success-rate": 98.4, "failure-rate": 1.6 },
+    { day: "2023-11-16", "success-rate": 96.2, "failure-rate": 3.8 },
+    { day: "2023-11-17", "success-rate": 94.3, "failure-rate": 5.7 },
+    { day: "2023-11-18", "success-rate": 97.5, "failure-rate": 2.5 },
+    { day: "2023-11-19", "success-rate": 95.6, "failure-rate": 4.4 },
+    { day: "2023-11-20", "success-rate": 98.9, "failure-rate": 1.1 },
+    { day: "2023-11-21", "success-rate": 96.7, "failure-rate": 3.3 },
+    { day: "2023-11-22", "success-rate": 95.1, "failure-rate": 4.9 },
+    { day: "2023-11-23", "success-rate": 97.9, "failure-rate": 2.1 },
+    { day: "2023-11-24", "success-rate": 94.7, "failure-rate": 5.3 },
+    { day: "2023-11-25", "success-rate": 98.3, "failure-rate": 1.7 },
+    { day: "2023-11-26", "success-rate": 96.4, "failure-rate": 3.6 },
+    { day: "2023-11-27", "success-rate": 94.9, "failure-rate": 5.1 },
+    { day: "2023-11-28", "success-rate": 97.7, "failure-rate": 2.3 },
+    { day: "2023-11-29", "success-rate": 95.4, "failure-rate": 4.6 },
+    { day: "2023-11-30", "success-rate": 98.8, "failure-rate": 1.2 },
   ],
   barChartData: [
-    { day: "Nov 1", completed: 3245, "in-progress": 4321, canceled: 657, failed: 2987 },
-    { day: "Nov 2", completed: 4567, "in-progress": 3789, canceled: 879, failed: 3456 },
-    { day: "Nov 3", completed: 5432, "in-progress": 4567, canceled: 1234, failed: 2345 },
-    { day: "Nov 4", completed: 0, "in-progress": 5678, canceled: 0, failed: 3678 },
-    { day: "Nov 5", completed: 6789, "in-progress": 3456, canceled: 2345, failed: 4321 },
-    { day: "Nov 6", completed: 3456, "in-progress": 6543, canceled: 1567, failed: 2987 },
-    { day: "Nov 7", completed: 6543, "in-progress": 3456, canceled: 2345, failed: 3456 },
-    { day: "Nov 8", completed: 0, "in-progress": 7654, canceled: 0, failed: 4567 },
-    { day: "Nov 9", completed: 8765, "in-progress": 3245, canceled: 3456, failed: 2109 },
-    { day: "Nov 10", completed: 5432, "in-progress": 6543, canceled: 2109, failed: 3456 },
-    { day: "Nov 11", completed: 3245, "in-progress": 5432, canceled: 1234, failed: 3987 },
-    { day: "Nov 12", completed: 0, "in-progress": 6543, canceled: 0, failed: 3456 },
-    { day: "Nov 13", completed: 7654, "in-progress": 3456, canceled: 2345, failed: 2987 },
-    { day: "Nov 14", completed: 5432, "in-progress": 5432, canceled: 3456, failed: 3421 },
-    { day: "Nov 15", completed: 6543, "in-progress": 4321, canceled: 2109, failed: 2345 },
-    { day: "Nov 16", completed: 0, "in-progress": 7654, canceled: 0, failed: 4567 },
-    { day: "Nov 17", completed: 8765, "in-progress": 3456, canceled: 3421, failed: 2987 },
-    { day: "Nov 18", completed: 5432, "in-progress": 5432, canceled: 2345, failed: 3456 },
-    { day: "Nov 19", completed: 4321, "in-progress": 6543, canceled: 1567, failed: 2987 },
-    { day: "Nov 20", completed: 0, "in-progress": 7654, canceled: 0, failed: 3678 },
-    { day: "Nov 21", completed: 4532, "in-progress": 3456, canceled: 1200, failed: 2876 },
-    { day: "Nov 22", completed: 6789, "in-progress": 4567, canceled: 2345, failed: 3456 },
-    { day: "Nov 23", completed: 5432, "in-progress": 6543, canceled: 0, failed: 2109 },
-    { day: "Nov 24", completed: 6543, "in-progress": 0, canceled: 2345, failed: 0 },
-    { day: "Nov 25", completed: 5432, "in-progress": 0, canceled: 0, failed: 2345 },
-    { day: "Nov 26", completed: 6543, "in-progress": 6543, canceled: 0, failed: 0 },
-    { day: "Nov 27", completed: 8765, "in-progress": 3456, canceled: 0, failed: 5678 },
-    { day: "Nov 28", completed: 5432, "in-progress": 5678, canceled: 4567, failed: 2345 },
-    { day: "Nov 29", completed: 0, "in-progress": 4567, canceled: 2345, failed: 3456 },
-    { day: "Nov 30", completed: 7654, "in-progress": 3456, canceled: 5678, failed: 2345 },
+    { day: "2023-11-01", completed: 3245, "in-progress": 4321, canceled: 657, failed: 2987 },
+    { day: "2023-11-02", completed: 4567, "in-progress": 3789, canceled: 879, failed: 3456 },
+    { day: "2023-11-03", completed: 5432, "in-progress": 4567, canceled: 1234, failed: 2345 },
+    { day: "2023-11-04", completed: 0, "in-progress": 5678, canceled: 0, failed: 3678 },
+    { day: "2023-11-05", completed: 6789, "in-progress": 3456, canceled: 2345, failed: 4321 },
+    { day: "2023-11-06", completed: 3456, "in-progress": 6543, canceled: 1567, failed: 2987 },
+    { day: "2023-11-07", completed: 6543, "in-progress": 3456, canceled: 2345, failed: 3456 },
+    { day: "2023-11-08", completed: 0, "in-progress": 7654, canceled: 0, failed: 4567 },
+    { day: "2023-11-09", completed: 8765, "in-progress": 3245, canceled: 3456, failed: 2109 },
+    { day: "2023-11-10", completed: 5432, "in-progress": 6543, canceled: 2109, failed: 3456 },
+    { day: "2023-11-11", completed: 3245, "in-progress": 5432, canceled: 1234, failed: 3987 },
+    { day: "2023-11-12", completed: 0, "in-progress": 6543, canceled: 0, failed: 3456 },
+    { day: "2023-11-13", completed: 7654, "in-progress": 3456, canceled: 2345, failed: 2987 },
+    { day: "2023-11-14", completed: 5432, "in-progress": 5432, canceled: 3456, failed: 3421 },
+    { day: "2023-11-15", completed: 6543, "in-progress": 4321, canceled: 2109, failed: 2345 },
+    { day: "2023-11-16", completed: 0, "in-progress": 7654, canceled: 0, failed: 4567 },
+    { day: "2023-11-17", completed: 8765, "in-progress": 3456, canceled: 3421, failed: 2987 },
+    { day: "2023-11-18", completed: 5432, "in-progress": 5432, canceled: 2345, failed: 3456 },
+    { day: "2023-11-19", completed: 4321, "in-progress": 6543, canceled: 1567, failed: 2987 },
+    { day: "2023-11-20", completed: 0, "in-progress": 7654, canceled: 0, failed: 3678 },
+    { day: "2023-11-21", completed: 4532, "in-progress": 3456, canceled: 1200, failed: 2876 },
+    { day: "2023-11-22", completed: 6789, "in-progress": 4567, canceled: 2345, failed: 3456 },
+    { day: "2023-11-23", completed: 5432, "in-progress": 6543, canceled: 0, failed: 2109 },
+    { day: "2023-11-24", completed: 6543, "in-progress": 0, canceled: 2345, failed: 0 },
+    { day: "2023-11-25", completed: 5432, "in-progress": 0, canceled: 0, failed: 2345 },
+    { day: "2023-11-26", completed: 6543, "in-progress": 6543, canceled: 0, failed: 0 },
+    { day: "2023-11-27", completed: 8765, "in-progress": 3456, canceled: 0, failed: 5678 },
+    { day: "2023-11-28", completed: 5432, "in-progress": 5678, canceled: 4567, failed: 2345 },
+    { day: "2023-11-29", completed: 0, "in-progress": 4567, canceled: 2345, failed: 3456 },
+    { day: "2023-11-30", completed: 7654, "in-progress": 3456, canceled: 5678, failed: 2345 },
   ],
   barChartBigDatasetData: [
     {
-      day: "Nov 1",
+      day: "2023-11-01",
       "sync-data": 6543,
       "process-image": 3245,
       "upload-file": 8765,
@@ -410,7 +405,7 @@ const API_DATA = {
       "analyze-document": 3245,
     },
     {
-      day: "Nov 2",
+      day: "2023-11-02",
       "sync-data": 5432,
       "process-image": 0,
       "upload-file": 6789,
@@ -421,7 +416,7 @@ const API_DATA = {
       "analyze-document": 2345,
     },
     {
-      day: "Nov 3",
+      day: "2023-11-03",
       "sync-data": 7654,
       "process-image": 5432,
       "upload-file": 0,
@@ -432,7 +427,7 @@ const API_DATA = {
       "analyze-document": 6543,
     },
     {
-      day: "Nov 4",
+      day: "2023-11-04",
       "sync-data": 3456,
       "process-image": 6543,
       "upload-file": 7654,
@@ -443,7 +438,7 @@ const API_DATA = {
       "analyze-document": 4567,
     },
     {
-      day: "Nov 5",
+      day: "2023-11-05",
       "sync-data": 0,
       "process-image": 8765,
       "upload-file": 4567,
@@ -454,7 +449,7 @@ const API_DATA = {
       "analyze-document": 7654,
     },
     {
-      day: "Nov 6",
+      day: "2023-11-06",
       "sync-data": 6789,
       "process-image": 4321,
       "upload-file": 5432,
@@ -465,7 +460,7 @@ const API_DATA = {
       "analyze-document": 3456,
     },
     {
-      day: "Nov 7",
+      day: "2023-11-07",
       "sync-data": 7654,
       "process-image": 0,
       "upload-file": 6789,
@@ -476,7 +471,7 @@ const API_DATA = {
       "analyze-document": 0,
     },
     {
-      day: "Nov 8",
+      day: "2023-11-08",
       "sync-data": 5678,
       "process-image": 6543,
       "upload-file": 0,
@@ -487,7 +482,7 @@ const API_DATA = {
       "analyze-document": 7654,
     },
     {
-      day: "Nov 9",
+      day: "2023-11-09",
       "sync-data": 0,
       "process-image": 7654,
       "upload-file": 5432,
@@ -498,7 +493,7 @@ const API_DATA = {
       "analyze-document": 5432,
     },
     {
-      day: "Nov 10",
+      day: "2023-11-10",
       "sync-data": 8765,
       "process-image": 5432,
       "upload-file": 7654,
@@ -509,7 +504,7 @@ const API_DATA = {
       "analyze-document": 6543,
     },
     {
-      day: "Nov 11",
+      day: "2023-11-11",
       "sync-data": 6543,
       "process-image": 0,
       "upload-file": 8765,
@@ -520,7 +515,7 @@ const API_DATA = {
       "analyze-document": 8765,
     },
     {
-      day: "Nov 12",
+      day: "2023-11-12",
       "sync-data": 5432,
       "process-image": 7654,
       "upload-file": 0,
@@ -531,7 +526,7 @@ const API_DATA = {
       "analyze-document": 5432,
     },
     {
-      day: "Nov 13",
+      day: "2023-11-13",
       "sync-data": 0,
       "process-image": 6543,
       "upload-file": 7654,
@@ -542,7 +537,7 @@ const API_DATA = {
       "analyze-document": 7654,
     },
     {
-      day: "Nov 14",
+      day: "2023-11-14",
       "sync-data": 7654,
       "process-image": 5432,
       "upload-file": 6543,
@@ -553,7 +548,7 @@ const API_DATA = {
       "analyze-document": 0,
     },
     {
-      day: "Nov 15",
+      day: "2023-11-15",
       "sync-data": 6543,
       "process-image": 0,
       "upload-file": 8765,
@@ -564,7 +559,7 @@ const API_DATA = {
       "analyze-document": 7654,
     },
     {
-      day: "Nov 16",
+      day: "2023-11-16",
       "sync-data": 5432,
       "process-image": 7654,
       "upload-file": 0,
@@ -575,7 +570,7 @@ const API_DATA = {
       "analyze-document": 5432,
     },
     {
-      day: "Nov 17",
+      day: "2023-11-17",
       "sync-data": 0,
       "process-image": 6543,
       "upload-file": 7654,
@@ -586,7 +581,7 @@ const API_DATA = {
       "analyze-document": 0,
     },
     {
-      day: "Nov 18",
+      day: "2023-11-18",
       "sync-data": 8765,
       "process-image": 0,
       "upload-file": 6543,
@@ -597,7 +592,7 @@ const API_DATA = {
       "analyze-document": 7654,
     },
     {
-      day: "Nov 19",
+      day: "2023-11-19",
       "sync-data": 5432,
       "process-image": 7654,
       "upload-file": 0,
@@ -608,7 +603,7 @@ const API_DATA = {
       "analyze-document": 5432,
     },
     {
-      day: "Nov 20",
+      day: "2023-11-20",
       "sync-data": 6543,
       "process-image": 5432,
       "upload-file": 7654,
@@ -619,7 +614,7 @@ const API_DATA = {
       "analyze-document": 0,
     },
     {
-      day: "Nov 21",
+      day: "2023-11-21",
       "sync-data": 8765,
       "process-image": 4532,
       "upload-file": 0,
@@ -630,7 +625,7 @@ const API_DATA = {
       "analyze-document": 7654,
     },
     {
-      day: "Nov 22",
+      day: "2023-11-22",
       "sync-data": 5432,
       "process-image": 0,
       "upload-file": 6789,
@@ -641,7 +636,7 @@ const API_DATA = {
       "analyze-document": 5678,
     },
     {
-      day: "Nov 23",
+      day: "2023-11-23",
       "sync-data": 0,
       "process-image": 6789,
       "upload-file": 4567,
@@ -652,7 +647,7 @@ const API_DATA = {
       "analyze-document": 5432,
     },
     {
-      day: "Nov 24",
+      day: "2023-11-24",
       "sync-data": 9876,
       "process-image": 3456,
       "upload-file": 5678,
@@ -663,7 +658,7 @@ const API_DATA = {
       "analyze-document": 0,
     },
     {
-      day: "Nov 25",
+      day: "2023-11-25",
       "sync-data": 5432,
       "process-image": 0,
       "upload-file": 8765,
@@ -674,7 +669,7 @@ const API_DATA = {
       "analyze-document": 7654,
     },
     {
-      day: "Nov 26",
+      day: "2023-11-26",
       "sync-data": 0,
       "process-image": 7654,
       "upload-file": 3456,
@@ -685,7 +680,7 @@ const API_DATA = {
       "analyze-document": 5678,
     },
     {
-      day: "Nov 27",
+      day: "2023-11-27",
       "sync-data": 8765,
       "process-image": 3456,
       "upload-file": 0,
@@ -696,7 +691,7 @@ const API_DATA = {
       "analyze-document": 6789,
     },
     {
-      day: "Nov 28",
+      day: "2023-11-28",
       "sync-data": 5678,
       "process-image": 0,
       "upload-file": 7654,
@@ -707,7 +702,7 @@ const API_DATA = {
       "analyze-document": 0,
     },
     {
-      day: "Nov 29",
+      day: "2023-11-29",
       "sync-data": 0,
       "process-image": 8765,
       "upload-file": 3456,
@@ -718,7 +713,7 @@ const API_DATA = {
       "analyze-document": 7654,
     },
     {
-      day: "Nov 30",
+      day: "2023-11-30",
       "sync-data": 7654,
       "process-image": 3456,
       "upload-file": 5678,

From 0ff26efef3a29ce5ee5eabbb3e717916324533fd Mon Sep 17 00:00:00 2001
From: Matt Aitken <matt@mattaitken.com>
Date: Wed, 14 Jan 2026 21:25:08 +0000
Subject: [PATCH 086/137] Show total in legend

---
 .../primitives/charts/ChartLegendCompound.tsx | 39 +++++++++++++++++++
 .../primitives/charts/ChartRoot.tsx           | 10 ++++-
 2 files changed, 48 insertions(+), 1 deletion(-)

diff --git a/apps/webapp/app/components/primitives/charts/ChartLegendCompound.tsx b/apps/webapp/app/components/primitives/charts/ChartLegendCompound.tsx
index 13487cdc3a..c5ed6ce376 100644
--- a/apps/webapp/app/components/primitives/charts/ChartLegendCompound.tsx
+++ b/apps/webapp/app/components/primitives/charts/ChartLegendCompound.tsx
@@ -13,6 +13,8 @@ export type ChartLegendCompoundProps = {
   hidden?: boolean;
   /** Additional className */
   className?: string;
+  /** Label for the total row */
+  totalLabel?: string;
 };
 
 /**
@@ -31,10 +33,29 @@ export function ChartLegendCompound({
   maxItems = Infinity,
   hidden = false,
   className,
+  totalLabel = "Total",
 }: ChartLegendCompoundProps) {
   const { config, dataKeys, highlight } = useChartContext();
   const totals = useSeriesTotal();
 
+  // Calculate grand total (sum of all series totals)
+  const grandTotal = useMemo(() => {
+    return dataKeys.reduce((sum, key) => sum + (totals[key] || 0), 0);
+  }, [totals, dataKeys]);
+
+  // Calculate current total based on hover state
+  const currentTotal = useMemo(() => {
+    if (!highlight.activePayload?.length) return grandTotal;
+
+    // Sum all values from the hovered data point
+    return highlight.activePayload.reduce((sum, item) => {
+      if (item.value !== undefined && dataKeys.includes(item.dataKey as string)) {
+        return sum + (Number(item.value) || 0);
+      }
+      return sum;
+    }, 0);
+  }, [highlight.activePayload, grandTotal, dataKeys]);
+
   // Get current data for the legend based on hover state
   const currentData = useMemo(() => {
     if (!highlight.activePayload?.length) return totals;
@@ -88,8 +109,26 @@ export function ChartLegendCompound({
     return null;
   }
 
+  const isHovering = (highlight.activePayload?.length ?? 0) > 0;
+
   return (
     <div className={cn("flex flex-col pt-4 text-sm", className)}>
+      {/* Total row */}
+      <div
+        className={cn(
+          "flex w-full items-center justify-between gap-2 rounded px-2 py-1 transition",
+          isHovering ? "text-text-bright" : "text-text-dimmed"
+        )}
+      >
+        <span className="font-medium">{totalLabel}</span>
+        <span className="font-medium tabular-nums">
+          <AnimatedNumber value={currentTotal} duration={0.25} />
+        </span>
+      </div>
+
+      {/* Separator */}
+      <div className="mx-2 my-1 border-t border-charcoal-750" />
+
       {legendItems.visible.map((item) => {
         const total = currentData[item.dataKey] ?? 0;
         const isActive = highlight.activeBarKey === item.dataKey;
diff --git a/apps/webapp/app/components/primitives/charts/ChartRoot.tsx b/apps/webapp/app/components/primitives/charts/ChartRoot.tsx
index c0e96c7cb5..13be1426ec 100644
--- a/apps/webapp/app/components/primitives/charts/ChartRoot.tsx
+++ b/apps/webapp/app/components/primitives/charts/ChartRoot.tsx
@@ -25,6 +25,8 @@ export type ChartRootProps = {
   showLegend?: boolean;
   /** Maximum items in the legend before showing "view more" */
   maxLegendItems?: number;
+  /** Label for the total row in the legend */
+  legendTotalLabel?: string;
   children: React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>["children"];
 };
 
@@ -61,6 +63,7 @@ export function ChartRoot({
   className,
   showLegend = false,
   maxLegendItems = 5,
+  legendTotalLabel,
   children,
 }: ChartRootProps) {
   return (
@@ -78,6 +81,7 @@ export function ChartRoot({
         className={className}
         showLegend={showLegend}
         maxLegendItems={maxLegendItems}
+        legendTotalLabel={legendTotalLabel}
       >
         {children}
       </ChartRootInner>
@@ -90,6 +94,7 @@ type ChartRootInnerProps = {
   className?: string;
   showLegend?: boolean;
   maxLegendItems?: number;
+  legendTotalLabel?: string;
   children: React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>["children"];
 };
 
@@ -98,6 +103,7 @@ function ChartRootInner({
   className,
   showLegend = false,
   maxLegendItems = 5,
+  legendTotalLabel,
   children,
 }: ChartRootInnerProps) {
   const { config, zoom } = useChartContext();
@@ -122,7 +128,9 @@ function ChartRootInner({
         </ChartContainer>
       </div>
       {/* Legend rendered outside the chart container */}
-      {showLegend && <ChartLegendCompound maxItems={maxLegendItems} />}
+      {showLegend && (
+        <ChartLegendCompound maxItems={maxLegendItems} totalLabel={legendTotalLabel} />
+      )}
     </div>
   );
 }

From d07aae604edd55893b468f8f0dc84d58fd1c9435 Mon Sep 17 00:00:00 2001
From: Matt Aitken <matt@mattaitken.com>
Date: Wed, 14 Jan 2026 21:55:55 +0000
Subject: [PATCH 087/137] Added label when hovering for total

---
 .../primitives/charts/ChartLegendCompound.tsx     | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/apps/webapp/app/components/primitives/charts/ChartLegendCompound.tsx b/apps/webapp/app/components/primitives/charts/ChartLegendCompound.tsx
index c5ed6ce376..767dc160cc 100644
--- a/apps/webapp/app/components/primitives/charts/ChartLegendCompound.tsx
+++ b/apps/webapp/app/components/primitives/charts/ChartLegendCompound.tsx
@@ -35,7 +35,7 @@ export function ChartLegendCompound({
   className,
   totalLabel = "Total",
 }: ChartLegendCompoundProps) {
-  const { config, dataKeys, highlight } = useChartContext();
+  const { config, dataKey, dataKeys, highlight } = useChartContext();
   const totals = useSeriesTotal();
 
   // Calculate grand total (sum of all series totals)
@@ -56,6 +56,17 @@ export function ChartLegendCompound({
     }, 0);
   }, [highlight.activePayload, grandTotal, dataKeys]);
 
+  // Get the label for the total row - x-axis value when hovering, totalLabel otherwise
+  const currentTotalLabel = useMemo(() => {
+    if (!highlight.activePayload?.length) return totalLabel;
+
+    // Get the x-axis label from the payload's original data
+    const firstPayloadItem = highlight.activePayload[0];
+    const xAxisValue = firstPayloadItem?.payload?.[dataKey];
+
+    return xAxisValue !== undefined ? String(xAxisValue) : totalLabel;
+  }, [highlight.activePayload, dataKey, totalLabel]);
+
   // Get current data for the legend based on hover state
   const currentData = useMemo(() => {
     if (!highlight.activePayload?.length) return totals;
@@ -120,7 +131,7 @@ export function ChartLegendCompound({
           isHovering ? "text-text-bright" : "text-text-dimmed"
         )}
       >
-        <span className="font-medium">{totalLabel}</span>
+        <span className="font-medium">{currentTotalLabel}</span>
         <span className="font-medium tabular-nums">
           <AnimatedNumber value={currentTotal} duration={0.25} />
         </span>

From 307335d77a8b8b347de03d2ea357963f0ff461d9 Mon Sep 17 00:00:00 2001
From: Matt Aitken <matt@mattaitken.com>
Date: Wed, 14 Jan 2026 21:58:42 +0000
Subject: [PATCH 088/137] Nicer title label formatting

---
 .../components/primitives/charts/ChartContext.tsx   | 13 ++++++++++++-
 .../primitives/charts/ChartLegendCompound.tsx       | 10 +++++++---
 .../app/components/primitives/charts/ChartRoot.tsx  |  6 +++++-
 apps/webapp/app/routes/storybook.charts/route.tsx   |  1 +
 4 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/apps/webapp/app/components/primitives/charts/ChartContext.tsx b/apps/webapp/app/components/primitives/charts/ChartContext.tsx
index 92fbc7ed61..8b02c03441 100644
--- a/apps/webapp/app/components/primitives/charts/ChartContext.tsx
+++ b/apps/webapp/app/components/primitives/charts/ChartContext.tsx
@@ -7,6 +7,9 @@ import {
   type ZoomRange,
 } from "./hooks/useZoomSelection";
 
+/** Function to format the x-axis label for display */
+export type LabelFormatter = (value: string) => string;
+
 export type ChartContextValue = {
   // Core data
   config: ChartConfig;
@@ -18,6 +21,10 @@ export type ChartContextValue = {
   // Display state
   state?: ChartState;
 
+  // Formatters
+  /** Function to format the x-axis label (used in legend, tooltips, etc.) */
+  labelFormatter?: LabelFormatter;
+
   // Highlight state
   highlight: UseHighlightStateReturn;
 
@@ -45,6 +52,8 @@ export type ChartProviderProps = {
   /** Series keys to render (if not provided, derived from config keys) */
   series?: string[];
   state?: ChartState;
+  /** Function to format the x-axis label (used in legend, tooltips, etc.) */
+  labelFormatter?: LabelFormatter;
   /** Enable zoom functionality */
   enableZoom?: boolean;
   /** Callback when zoom range changes */
@@ -58,6 +67,7 @@ export function ChartProvider({
   dataKey,
   series,
   state,
+  labelFormatter,
   enableZoom = false,
   onZoomChange,
   children,
@@ -78,11 +88,12 @@ export function ChartProvider({
       dataKey,
       dataKeys,
       state,
+      labelFormatter,
       highlight,
       zoom: enableZoom ? zoomState : null,
       onZoomChange: enableZoom ? onZoomChange : undefined,
     }),
-    [config, data, dataKey, dataKeys, state, highlight, zoomState, enableZoom, onZoomChange]
+    [config, data, dataKey, dataKeys, state, labelFormatter, highlight, zoomState, enableZoom, onZoomChange]
   );
 
   return <ChartCompoundContext.Provider value={value}>{children}</ChartCompoundContext.Provider>;
diff --git a/apps/webapp/app/components/primitives/charts/ChartLegendCompound.tsx b/apps/webapp/app/components/primitives/charts/ChartLegendCompound.tsx
index 767dc160cc..a05f8bdc02 100644
--- a/apps/webapp/app/components/primitives/charts/ChartLegendCompound.tsx
+++ b/apps/webapp/app/components/primitives/charts/ChartLegendCompound.tsx
@@ -35,7 +35,7 @@ export function ChartLegendCompound({
   className,
   totalLabel = "Total",
 }: ChartLegendCompoundProps) {
-  const { config, dataKey, dataKeys, highlight } = useChartContext();
+  const { config, dataKey, dataKeys, highlight, labelFormatter } = useChartContext();
   const totals = useSeriesTotal();
 
   // Calculate grand total (sum of all series totals)
@@ -64,8 +64,12 @@ export function ChartLegendCompound({
     const firstPayloadItem = highlight.activePayload[0];
     const xAxisValue = firstPayloadItem?.payload?.[dataKey];
 
-    return xAxisValue !== undefined ? String(xAxisValue) : totalLabel;
-  }, [highlight.activePayload, dataKey, totalLabel]);
+    if (xAxisValue === undefined) return totalLabel;
+
+    // Apply the formatter if provided, otherwise just stringify the value
+    const stringValue = String(xAxisValue);
+    return labelFormatter ? labelFormatter(stringValue) : stringValue;
+  }, [highlight.activePayload, dataKey, totalLabel, labelFormatter]);
 
   // Get current data for the legend based on hover state
   const currentData = useMemo(() => {
diff --git a/apps/webapp/app/components/primitives/charts/ChartRoot.tsx b/apps/webapp/app/components/primitives/charts/ChartRoot.tsx
index 13be1426ec..a9e5150ecd 100644
--- a/apps/webapp/app/components/primitives/charts/ChartRoot.tsx
+++ b/apps/webapp/app/components/primitives/charts/ChartRoot.tsx
@@ -1,7 +1,7 @@
 import React, { useMemo } from "react";
 import type * as RechartsPrimitive from "recharts";
 import { ChartContainer, type ChartConfig, type ChartState } from "./Chart";
-import { ChartProvider, useChartContext } from "./ChartContext";
+import { ChartProvider, useChartContext, type LabelFormatter } from "./ChartContext";
 import { ChartLegendCompound } from "./ChartLegendCompound";
 import type { ZoomRange } from "./hooks/useZoomSelection";
 import { cn } from "~/utils/cn";
@@ -13,6 +13,8 @@ export type ChartRootProps = {
   /** Series keys to render (if not provided, derived from config keys) */
   series?: string[];
   state?: ChartState;
+  /** Function to format the x-axis label (used in legend, tooltips, etc.) */
+  labelFormatter?: LabelFormatter;
   /** Enable zoom functionality */
   enableZoom?: boolean;
   /** Callback when zoom range changes */
@@ -57,6 +59,7 @@ export function ChartRoot({
   dataKey,
   series,
   state,
+  labelFormatter,
   enableZoom = false,
   onZoomChange,
   minHeight,
@@ -73,6 +76,7 @@ export function ChartRoot({
       dataKey={dataKey}
       series={series}
       state={state}
+      labelFormatter={labelFormatter}
       enableZoom={enableZoom}
       onZoomChange={onZoomChange}
     >
diff --git a/apps/webapp/app/routes/storybook.charts/route.tsx b/apps/webapp/app/routes/storybook.charts/route.tsx
index 72066f4fa5..69dc6c1b21 100644
--- a/apps/webapp/app/routes/storybook.charts/route.tsx
+++ b/apps/webapp/app/routes/storybook.charts/route.tsx
@@ -151,6 +151,7 @@ function ChartsDashboard() {
               config={barChartBigDatasetConfig}
               data={filteredBarData}
               dataKey="day"
+              labelFormatter={tooltipLabelFormatter}
               enableZoom
               onZoomChange={handleZoomChange}
               state={chartState === "loaded" ? undefined : chartState}

From 02866a6adffca70f3d4d1bad2b274bc02ba4e290 Mon Sep 17 00:00:00 2001
From: Matt Aitken <matt@mattaitken.com>
Date: Wed, 14 Jan 2026 22:28:33 +0000
Subject: [PATCH 089/137] Chart is showing, but needs styling

---
 .../app/components/code/QueryResultsChart.tsx | 61 +++++++++++++------
 1 file changed, 42 insertions(+), 19 deletions(-)

diff --git a/apps/webapp/app/components/code/QueryResultsChart.tsx b/apps/webapp/app/components/code/QueryResultsChart.tsx
index cd06b823a0..06b66816ab 100644
--- a/apps/webapp/app/components/code/QueryResultsChart.tsx
+++ b/apps/webapp/app/components/code/QueryResultsChart.tsx
@@ -1,8 +1,7 @@
 import type { OutputColumnMetadata } from "@internal/clickhouse";
 import { memo, useMemo } from "react";
 import type { ChartConfig } from "~/components/primitives/charts/Chart";
-import { ChartBar } from "~/components/primitives/charts/ChartBar";
-import { ChartLine } from "~/components/primitives/charts/ChartLine";
+import { Chart } from "~/components/primitives/charts/ChartCompound";
 import { Paragraph } from "../primitives/Paragraph";
 import type { AggregationType, ChartConfiguration } from "./ChartConfigPanel";
 
@@ -773,6 +772,20 @@ export const QueryResultsChart = memo(function QueryResultsChart({
     };
   }, []);
 
+  // Label formatter for the legend (formats x-axis values)
+  const legendLabelFormatter = useMemo(() => {
+    if (!isDateBased || !timeGranularity) return undefined;
+    return (value: string) => {
+      // For date-based axes, the value is a timestamp
+      const timestamp = Number(value);
+      if (!isNaN(timestamp)) {
+        const date = new Date(timestamp);
+        return formatDateForTooltip(date, timeGranularity);
+      }
+      return value;
+    };
+  }, [isDateBased, timeGranularity]);
+
   // Validation
   if (!xAxisColumn) {
     return <EmptyState message="Select an X-axis column to display the chart" />;
@@ -817,40 +830,50 @@ export const QueryResultsChart = memo(function QueryResultsChart({
     tickFormatter: yAxisFormatter,
   };
 
+  const showLegend = series.length > 0;
+
   if (chartType === "bar") {
     return (
-      <ChartBar
+      <Chart.Root
         config={chartConfig}
         data={data}
         dataKey={xDataKey}
         series={series}
-        xAxisProps={xAxisProps}
-        yAxisProps={yAxisProps}
-        stackId={stacked ? "stack" : undefined}
-        showLegend={series.length > 1}
-        simpleLegend={true}
-        enableZoom={false}
-        tooltipLabelFormatter={tooltipLabelFormatter}
+        labelFormatter={legendLabelFormatter}
+        showLegend={showLegend}
+        maxLegendItems={8}
         minHeight="300px"
-      />
+      >
+        <Chart.Bar
+          xAxisProps={xAxisProps}
+          yAxisProps={yAxisProps}
+          stackId={stacked ? "stack" : undefined}
+          tooltipLabelFormatter={tooltipLabelFormatter}
+        />
+      </Chart.Root>
     );
   }
 
   // Line or stacked area chart
   return (
-    <ChartLine
+    <Chart.Root
       config={chartConfig}
       data={data}
       dataKey={xDataKey}
       series={series}
-      xAxisProps={xAxisProps}
-      yAxisProps={yAxisProps}
-      stacked={stacked && series.length > 1}
-      showLegend={series.length > 1}
-      tooltipLabelFormatter={tooltipLabelFormatter}
-      lineType="linear"
+      labelFormatter={legendLabelFormatter}
+      showLegend={showLegend}
+      maxLegendItems={8}
       minHeight="300px"
-    />
+    >
+      <Chart.Line
+        xAxisProps={xAxisProps}
+        yAxisProps={yAxisProps}
+        stacked={stacked && series.length > 1}
+        tooltipLabelFormatter={tooltipLabelFormatter}
+        lineType="linear"
+      />
+    </Chart.Root>
   );
 });
 

From b4b702994ed0d0434583fcc595c9c89f55846ea5 Mon Sep 17 00:00:00 2001
From: Matt Aitken <matt@mattaitken.com>
Date: Thu, 15 Jan 2026 12:23:09 +0000
Subject: [PATCH 090/137] WIP with layout changes to query

---
 .../app/components/code/TSQLResultsTable.tsx  |  2 +-
 .../route.tsx                                 | 54 ++++++++++---------
 2 files changed, 29 insertions(+), 27 deletions(-)

diff --git a/apps/webapp/app/components/code/TSQLResultsTable.tsx b/apps/webapp/app/components/code/TSQLResultsTable.tsx
index 60facc737f..10a8c93119 100644
--- a/apps/webapp/app/components/code/TSQLResultsTable.tsx
+++ b/apps/webapp/app/components/code/TSQLResultsTable.tsx
@@ -420,7 +420,7 @@ export const TSQLResultsTable = memo(function TSQLResultsTable({
   if (!columns.length) return null;
 
   return (
-    <Table fullWidth containerClassName="h-full overflow-y-auto border-t-0">
+    <Table variant="compact/mono" fullWidth containerClassName="h-full overflow-y-auto border-t-0">
       <TableHeader>
         <TableRow>
           {columns.map((col) => (
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/route.tsx
index 317b67e904..75bcaffc38 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/route.tsx
@@ -470,32 +470,7 @@ export default function Page() {
                 isAdmin={isAdmin}
               />
               {/* Results */}
-              <div className="grid max-h-full grid-rows-[2rem_1fr] overflow-hidden border-t border-grid-dimmed bg-charcoal-800">
-                <div className="flex items-center justify-between border-b border-grid-dimmed pl-3 pr-1">
-                  <div className="flex items-center gap-2">
-                    <Header3>
-                      {results?.rows?.length ? `${results.rows.length} Results` : "Results"}
-                    </Header3>
-                    {results?.stats && (
-                      <span className="text-xs text-text-dimmed">
-                        {formatQueryStats(results.stats)}
-                      </span>
-                    )}
-                  </div>
-                  <div className="flex items-center gap-1">
-                    {results?.rows && results?.columns && results.rows.length > 0 && (
-                      <ExportResultsButton rows={results.rows} columns={results.columns} />
-                    )}
-                    {resultsView === "table" && (
-                      <Switch
-                        variant="small"
-                        label="Pretty formatting"
-                        checked={prettyFormatting}
-                        onCheckedChange={setPrettyFormatting}
-                      />
-                    )}
-                  </div>
-                </div>
+              <div className="grid max-h-full grid-rows-[1fr] overflow-hidden border-t border-grid-dimmed bg-charcoal-800">
                 <ClientTabs
                   value={resultsView}
                   onValueChange={(v) => setResultsView(v as "table" | "graph")}
@@ -513,6 +488,33 @@ export default function Page() {
                     >
                       Graph
                     </ClientTabsTrigger>
+                    {results?.rows ? (
+                      <div className="flex flex-1 items-center justify-end border-b border-grid-dimmed pl-3">
+                        <div className="flex items-center gap-2">
+                          <span className="text-xs text-text-dimmed">
+                            {results?.rows?.length ? `${results.rows.length} Results` : "Results"}
+                          </span>
+                          {results?.stats && (
+                            <span className="text-xs text-text-dimmed">
+                              {formatQueryStats(results.stats)}
+                            </span>
+                          )}
+                        </div>
+                        <div className="flex items-center gap-1">
+                          {results?.rows && results?.columns && results.rows.length > 0 && (
+                            <ExportResultsButton rows={results.rows} columns={results.columns} />
+                          )}
+                          {resultsView === "table" && (
+                            <Switch
+                              variant="small"
+                              label="Pretty formatting"
+                              checked={prettyFormatting}
+                              onCheckedChange={setPrettyFormatting}
+                            />
+                          )}
+                        </div>
+                      </div>
+                    ) : null}
                   </ClientTabsList>
                   <ClientTabsContent value="table" className="min-h-0 overflow-y-hidden">
                     {isLoading ? (

From f57bc6ad72fc23fc8515f45b33a6586c6febeffb Mon Sep 17 00:00:00 2001
From: Matt Aitken <matt@mattaitken.com>
Date: Thu, 15 Jan 2026 16:50:02 +0000
Subject: [PATCH 091/137] Added PopoverArrowTrigger variants

---
 .../app/components/primitives/Popover.tsx     | 31 +++++++++++++++----
 1 file changed, 25 insertions(+), 6 deletions(-)

diff --git a/apps/webapp/app/components/primitives/Popover.tsx b/apps/webapp/app/components/primitives/Popover.tsx
index 02454864c4..93f93057e3 100644
--- a/apps/webapp/app/components/primitives/Popover.tsx
+++ b/apps/webapp/app/components/primitives/Popover.tsx
@@ -189,37 +189,54 @@ function PopoverSideMenuTrigger({
   );
 }
 
+const popoverArrowTriggerVariants = {
+  minimal: {
+    trigger: "text-text-dimmed hover:bg-charcoal-700 hover:text-text-bright",
+    text: "group-hover:text-text-bright",
+    icon: "text-text-dimmed group-hover:text-text-bright",
+  },
+  tertiary: {
+    trigger: "bg-tertiary text-text-bright hover:bg-charcoal-600",
+    text: "text-text-bright",
+    icon: "text-text-bright",
+  },
+} as const;
+
+type PopoverArrowTriggerVariant = keyof typeof popoverArrowTriggerVariants;
+
 function PopoverArrowTrigger({
   isOpen,
   children,
   fullWidth = false,
   overflowHidden = false,
+  variant = "minimal",
   className,
   ...props
 }: {
   isOpen?: boolean;
   fullWidth?: boolean;
   overflowHidden?: boolean;
+  variant?: PopoverArrowTriggerVariant;
 } & React.ComponentPropsWithoutRef<typeof PopoverTrigger>) {
+  const variantStyles = popoverArrowTriggerVariants[variant];
+
   return (
     <PopoverTrigger
       {...props}
       className={cn(
-        "group flex h-6 items-center gap-1 rounded pl-2 pr-1 text-text-dimmed transition focus-custom hover:bg-charcoal-700 hover:text-text-bright",
+        "group flex h-6 items-center gap-1 rounded pl-2 pr-1 transition focus-custom",
+        variantStyles.trigger,
         fullWidth && "w-full justify-between",
         className
       )}
     >
       <Paragraph
         variant="extra-small"
-        className={cn(
-          "flex transition group-hover:text-text-bright",
-          overflowHidden && "overflow-hidden"
-        )}
+        className={cn("flex transition", variantStyles.text, overflowHidden && "overflow-hidden")}
       >
         {children}
       </Paragraph>
-      <DropdownIcon className="size-4 min-w-4 text-text-dimmed transition group-hover:text-text-bright" />
+      <DropdownIcon className={cn("size-4 min-w-4 transition", variantStyles.icon)} />
     </PopoverTrigger>
   );
 }
@@ -253,3 +270,5 @@ export {
   PopoverTrigger,
   PopoverVerticalEllipseTrigger,
 };
+
+export type { PopoverArrowTriggerVariant };

From beccf756a91405d73447b0311914a7ee15fc23d3 Mon Sep 17 00:00:00 2001
From: Matt Aitken <matt@mattaitken.com>
Date: Thu, 15 Jan 2026 16:50:14 +0000
Subject: [PATCH 092/137] Improved the layout with the stats and buttons

---
 .../route.tsx                                          | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/route.tsx
index 75bcaffc38..8c8db816e6 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/route.tsx
@@ -476,7 +476,7 @@ export default function Page() {
                   onValueChange={(v) => setResultsView(v as "table" | "graph")}
                   className="grid min-h-0 grid-rows-[auto_1fr] overflow-hidden"
                 >
-                  <ClientTabsList variant="underline" className="shrink-0 px-3">
+                  <ClientTabsList variant="underline" className="shrink-0 pl-3 pr-1">
                     <ClientTabsTrigger value="table" variant="underline" layoutId="results-tabs">
                       Table
                     </ClientTabsTrigger>
@@ -489,7 +489,7 @@ export default function Page() {
                       Graph
                     </ClientTabsTrigger>
                     {results?.rows ? (
-                      <div className="flex flex-1 items-center justify-end border-b border-grid-dimmed pl-3">
+                      <div className="flex flex-1 items-center justify-end gap-2 border-b border-grid-dimmed pl-3">
                         <div className="flex items-center gap-2">
                           <span className="text-xs text-text-dimmed">
                             {results?.rows?.length ? `${results.rows.length} Results` : "Results"}
@@ -506,7 +506,7 @@ export default function Page() {
                           )}
                           {resultsView === "table" && (
                             <Switch
-                              variant="small"
+                              variant="secondary/small"
                               label="Pretty formatting"
                               checked={prettyFormatting}
                               onCheckedChange={setPrettyFormatting}
@@ -679,7 +679,9 @@ function ExportResultsButton({
 
   return (
     <Popover open={isOpen} onOpenChange={setIsOpen}>
-      <PopoverArrowTrigger isOpen={isOpen}>Export</PopoverArrowTrigger>
+      <PopoverArrowTrigger variant="tertiary" isOpen={isOpen}>
+        Export
+      </PopoverArrowTrigger>
       <PopoverContent className="min-w-[10rem] p-1" align="end">
         <div className="flex flex-col gap-1">
           <PopoverMenuItem icon={ClipboardIcon} title="Copy CSV" onClick={handleCopyCSV} />

From 40d42a665f31f1eeb456d12eecc456ac36ee466b Mon Sep 17 00:00:00 2001
From: Matt Aitken <matt@mattaitken.com>
Date: Thu, 15 Jan 2026 17:01:11 +0000
Subject: [PATCH 093/137] Fix for type errors

---
 .../primitives/charts/ChartLoading.tsx        | 32 ++++++++++++-------
 1 file changed, 20 insertions(+), 12 deletions(-)

diff --git a/apps/webapp/app/components/primitives/charts/ChartLoading.tsx b/apps/webapp/app/components/primitives/charts/ChartLoading.tsx
index 419bbf91aa..fbe6da64d2 100644
--- a/apps/webapp/app/components/primitives/charts/ChartLoading.tsx
+++ b/apps/webapp/app/components/primitives/charts/ChartLoading.tsx
@@ -28,9 +28,11 @@ export function ChartBarNoData() {
         <Paragraph variant="small" spacing>
           There's no data available for the filters you've set.
         </Paragraph>
-        <Button variant="secondary/small" onClick={dateRange.resetDateRange}>
-          Clear filters
-        </Button>
+        {dateRange && (
+          <Button variant="secondary/small" onClick={dateRange.resetDateRange}>
+            Clear filters
+          </Button>
+        )}
       </div>
     </div>
   );
@@ -47,9 +49,11 @@ export function ChartBarInvalid() {
         <Paragraph variant="small" spacing>
           Your current filter settings don't apply to this chart's data type.
         </Paragraph>
-        <Button variant="secondary/small" onClick={dateRange.resetDateRange}>
-          Clear filters
-        </Button>
+        {dateRange && (
+          <Button variant="secondary/small" onClick={dateRange.resetDateRange}>
+            Clear filters
+          </Button>
+        )}
       </div>
     </div>
   );
@@ -78,9 +82,11 @@ export function ChartLineNoData() {
         <Paragraph variant="small" spacing>
           There's no data available for the filters you've set.
         </Paragraph>
-        <Button variant="secondary/small" onClick={dateRange.resetDateRange}>
-          Clear filters
-        </Button>
+        {dateRange && (
+          <Button variant="secondary/small" onClick={dateRange.resetDateRange}>
+            Clear filters
+          </Button>
+        )}
       </div>
     </div>
   );
@@ -97,9 +103,11 @@ export function ChartLineInvalid() {
         <Paragraph variant="small" spacing>
           Your current filter settings don't apply to this chart's data type.
         </Paragraph>
-        <Button variant="secondary/small" onClick={dateRange.resetDateRange}>
-          Clear filters
-        </Button>
+        {dateRange && (
+          <Button variant="secondary/small" onClick={dateRange.resetDateRange}>
+            Clear filters
+          </Button>
+        )}
       </div>
     </div>
   );

From 9d10769a9c408f0ba1aca0c59ad650d32595d322 Mon Sep 17 00:00:00 2001
From: Matt Aitken <matt@mattaitken.com>
Date: Thu, 15 Jan 2026 18:17:18 +0000
Subject: [PATCH 094/137] Improved the graph layout

---
 .../app/components/code/ChartConfigPanel.tsx  | 13 +++----
 .../route.tsx                                 | 38 ++++++++++---------
 2 files changed, 27 insertions(+), 24 deletions(-)

diff --git a/apps/webapp/app/components/code/ChartConfigPanel.tsx b/apps/webapp/app/components/code/ChartConfigPanel.tsx
index 7c4e9d672a..3b2e77a821 100644
--- a/apps/webapp/app/components/code/ChartConfigPanel.tsx
+++ b/apps/webapp/app/components/code/ChartConfigPanel.tsx
@@ -241,7 +241,7 @@ export function ChartConfigPanel({ columns, config, onChange, className }: Chart
   return (
     <div className={cn("flex flex-col gap-2 px-3 py-2", className)}>
       {/* Chart Type */}
-      <div className="flex items-center gap-1">
+      <div className="flex flex-col gap-3">
         <ConfigField label="Type">
           <div className="flex items-center">
             <Button
@@ -286,7 +286,7 @@ export function ChartConfigPanel({ columns, config, onChange, className }: Chart
         </ConfigField>
       </div>
 
-      <div className="flex flex-wrap items-center gap-3">
+      <div className="flex flex-col gap-2">
         {/* X-Axis */}
         <ConfigField label="X-Axis">
           <Select
@@ -399,10 +399,9 @@ export function ChartConfigPanel({ columns, config, onChange, className }: Chart
 
         {/* Stacked toggle (only when grouped) */}
         {config.groupByColumn && (
-          <ConfigField label="">
+          <ConfigField label="Stack groups">
             <Switch
-              variant="small"
-              label="Stacked"
+              variant="medium"
               checked={config.stacked}
               onCheckedChange={(checked) => updateConfig({ stacked: checked })}
             />
@@ -438,7 +437,7 @@ export function ChartConfigPanel({ columns, config, onChange, className }: Chart
 
         {/* Sort Direction (only when sorting) */}
         {config.sortByColumn && (
-          <ConfigField label="">
+          <ConfigField label="Sort direction">
             <SortDirectionToggle
               direction={config.sortDirection}
               onChange={(direction) => updateConfig({ sortDirection: direction })}
@@ -452,7 +451,7 @@ export function ChartConfigPanel({ columns, config, onChange, className }: Chart
 
 function ConfigField({ label, children }: { label: string; children: React.ReactNode }) {
   return (
-    <div className="flex items-center gap-2">
+    <div className="flex flex-col gap-1">
       {label && <span className="text-xs text-text-dimmed">{label}</span>}
       {children}
     </div>
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/route.tsx
index 8c8db816e6..8ca74e3563 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/route.tsx
@@ -457,9 +457,9 @@ export default function Page() {
         <PageTitle title={<AlphaTitle>Query</AlphaTitle>} />
       </NavBar>
       <PageBody scrollable={false}>
-        <ResizablePanelGroup orientation="horizontal" className="max-h-full bg-charcoal-800">
-          <ResizablePanel id="query-main" className="max-h-full">
-            <div className="grid max-h-full grid-rows-[auto_1fr] overflow-hidden">
+        <ResizablePanelGroup orientation="horizontal" className="h-full max-h-full bg-charcoal-800">
+          <ResizablePanel id="query-main" className="h-full">
+            <div className="grid h-full grid-rows-[auto_1fr] overflow-hidden">
               {/* Query editor - isolated component to prevent re-renders */}
               <QueryEditorForm
                 ref={editorRef}
@@ -518,7 +518,7 @@ export default function Page() {
                   </ClientTabsList>
                   <ClientTabsContent value="table" className="min-h-0 overflow-y-hidden">
                     {isLoading ? (
-                      <div className="flex items-center gap-2 p-4 text-text-dimmed">
+                      <div className="flex items-center gap-2 p-4 text-sm text-text-dimmed">
                         <Spinner className="size-4" />
                         <span>Executing query...</span>
                       </div>
@@ -585,24 +585,28 @@ export default function Page() {
                   </ClientTabsContent>
                   <ClientTabsContent
                     value="graph"
-                    className="flex min-h-0 flex-col overflow-hidden"
+                    className="grid min-h-0 grid-rows-[1fr] overflow-hidden"
                   >
                     {results?.rows && results?.columns && results.rows.length > 0 ? (
-                      <>
-                        <ChartConfigPanel
-                          columns={results.columns}
-                          config={chartConfig}
-                          onChange={handleChartConfigChange}
-                          className="shrink-0 border-b border-grid-dimmed"
-                        />
-                        <div className="min-h-0 flex-1 overflow-auto p-3">
-                          <QueryResultsChart
-                            rows={results.rows}
+                      <ResizablePanelGroup className="h-full overflow-hidden">
+                        <ResizablePanel id="chart-results">
+                          <div className="h-full bg-background-dimmed p-3">
+                            <QueryResultsChart
+                              rows={results.rows}
+                              columns={results.columns}
+                              config={chartConfig}
+                            />
+                          </div>
+                        </ResizablePanel>
+                        <ResizableHandle id="chart-split" />
+                        <ResizablePanel id="chart-config" min="50px" default="200px">
+                          <ChartConfigPanel
                             columns={results.columns}
                             config={chartConfig}
+                            onChange={handleChartConfigChange}
                           />
-                        </div>
-                      </>
+                        </ResizablePanel>
+                      </ResizablePanelGroup>
                     ) : (
                       <Paragraph variant="small" className="p-4 text-text-dimmed">
                         Run a query to visualize results.

From e4fb4d011e4b2acd3346c3f0f11e49c26d43c247 Mon Sep 17 00:00:00 2001
From: Matt Aitken <matt@mattaitken.com>
Date: Thu, 15 Jan 2026 18:48:40 +0000
Subject: [PATCH 095/137] =?UTF-8?q?Separated=20the=20Query=20stuff=20into?=
 =?UTF-8?q?=20more=20files=20as=20it=20was=E2=80=A6=20long?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../AITabContent.tsx                          |   62 +
 .../ExamplesContent.tsx                       |   82 +
 .../QueryHelpSidebar.tsx                      |   84 +
 .../QueryHistoryPopover.tsx                   |  135 ++
 .../TRQLGuideContent.tsx                      | 1204 ++++++++++++
 .../TableSchemaContent.tsx                    |   68 +
 .../route.tsx                                 | 1646 +----------------
 .../utils.ts                                  |   30 +
 8 files changed, 1672 insertions(+), 1639 deletions(-)
 create mode 100644 apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/AITabContent.tsx
 create mode 100644 apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/ExamplesContent.tsx
 create mode 100644 apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/QueryHelpSidebar.tsx
 create mode 100644 apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/QueryHistoryPopover.tsx
 create mode 100644 apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/TRQLGuideContent.tsx
 create mode 100644 apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/TableSchemaContent.tsx
 create mode 100644 apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/utils.ts

diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/AITabContent.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/AITabContent.tsx
new file mode 100644
index 0000000000..bc0d12fbc3
--- /dev/null
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/AITabContent.tsx
@@ -0,0 +1,62 @@
+import { useState } from "react";
+import { AIQueryInput } from "~/components/code/AIQueryInput";
+import { Header3 } from "~/components/primitives/Headers";
+
+export function AITabContent({
+  onQueryGenerated,
+  getCurrentQuery,
+  aiFixRequest,
+}: {
+  onQueryGenerated: (query: string) => void;
+  getCurrentQuery: () => string;
+  aiFixRequest: { prompt: string; key: number } | null;
+}) {
+  const [examplePromptRequest, setExamplePromptRequest] = useState<{
+    prompt: string;
+    key: number;
+  } | null>(null);
+
+  // Use aiFixRequest if present, otherwise use example prompt request
+  const activeRequest = aiFixRequest ?? examplePromptRequest;
+
+  const examplePrompts = [
+    "Show me failed runs by hour for the past 7 days",
+    "Count of runs by status by hour for the past 48h",
+    "Top 50 most expensive runs this week",
+    "Average execution duration by task this week",
+    "Run counts by tag in the past 7 days",
+  ];
+
+  return (
+    <div className="space-y-2">
+      <AIQueryInput
+        onQueryGenerated={onQueryGenerated}
+        autoSubmitPrompt={activeRequest?.prompt}
+        autoSubmitKey={activeRequest?.key}
+        getCurrentQuery={getCurrentQuery}
+      />
+
+      <div className="pt-4">
+        <Header3 className="mb-2 text-text-bright">Example prompts</Header3>
+        <div className="space-y-2">
+          {examplePrompts.map((example) => (
+            <button
+              key={example}
+              type="button"
+              onClick={() => {
+                setExamplePromptRequest((prev) => ({
+                  prompt: example,
+                  key: (prev?.key ?? 0) + 1,
+                }));
+              }}
+              className="block w-full rounded-md border border-grid-dimmed bg-charcoal-800 px-3 py-2 text-left text-sm text-text-dimmed transition-colors hover:border-grid-bright hover:bg-charcoal-750 hover:text-text-bright"
+            >
+              {example}
+            </button>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
+
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/ExamplesContent.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/ExamplesContent.tsx
new file mode 100644
index 0000000000..b172e4d35e
--- /dev/null
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/ExamplesContent.tsx
@@ -0,0 +1,82 @@
+import { Header3 } from "~/components/primitives/Headers";
+import { Paragraph } from "~/components/primitives/Paragraph";
+import type { QueryScope } from "~/services/queryService.server";
+import { TryableCodeBlock } from "./TRQLGuideContent";
+
+// Example queries for the Examples tab
+export const exampleQueries: Array<{
+  title: string;
+  description: string;
+  query: string;
+  scope: QueryScope;
+}> = [
+  {
+    title: "Failed runs by task (past 7 days)",
+    description: "Count of failed runs grouped by task identifier over the last 7 days.",
+    query: `SELECT
+  task_identifier,
+  count() AS failed_count
+FROM runs
+WHERE status = 'Failed'
+  AND triggered_at > now() - INTERVAL 7 DAY
+GROUP BY task_identifier
+ORDER BY failed_count DESC
+LIMIT 20`,
+    scope: "environment",
+  },
+  {
+    title: "Execution duration p50 by task (past 7d)",
+    description: "Median (50th percentile) execution duration for each task.",
+    query: `SELECT
+  task_identifier,
+  quantile(0.5)(execution_duration) AS p50_duration_ms
+FROM runs
+WHERE triggered_at > now() - INTERVAL 7 DAY
+  AND execution_duration IS NOT NULL
+GROUP BY task_identifier
+ORDER BY p50_duration_ms DESC
+LIMIT 20`,
+    scope: "environment",
+  },
+  {
+    title: "Most expensive 100 runs (past 7d)",
+    description: "Top 100 runs by cost over the last 7 days.",
+    query: `SELECT
+  run_id,
+  task_identifier,
+  status,
+  total_cost,
+  usage_duration,
+  machine,
+  created_at
+FROM runs
+WHERE triggered_at > now() - INTERVAL 7 DAY
+ORDER BY total_cost DESC
+LIMIT 100`,
+    scope: "environment",
+  },
+];
+
+export function ExamplesContent({
+  onTryExample,
+}: {
+  onTryExample: (query: string, scope: QueryScope) => void;
+}) {
+  return (
+    <div className="space-y-6">
+      {exampleQueries.map((example) => (
+        <div key={example.title}>
+          <Header3 className="mb-1 text-text-bright">{example.title}</Header3>
+          <Paragraph variant="small" className="mb-2 text-text-dimmed">
+            {example.description}
+          </Paragraph>
+          <TryableCodeBlock
+            code={example.query}
+            onTry={() => onTryExample(example.query, example.scope)}
+          />
+        </div>
+      ))}
+    </div>
+  );
+}
+
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/QueryHelpSidebar.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/QueryHelpSidebar.tsx
new file mode 100644
index 0000000000..d9c05eae58
--- /dev/null
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/QueryHelpSidebar.tsx
@@ -0,0 +1,84 @@
+import { AISparkleIcon } from "~/assets/icons/AISparkleIcon";
+import {
+  ClientTabs,
+  ClientTabsContent,
+  ClientTabsList,
+  ClientTabsTrigger,
+} from "~/components/primitives/ClientTabs";
+import type { QueryScope } from "~/services/queryService.server";
+import { AITabContent } from "./AITabContent";
+import { ExamplesContent } from "./ExamplesContent";
+import { TableSchemaContent } from "./TableSchemaContent";
+import { TRQLGuideContent } from "./TRQLGuideContent";
+
+export function QueryHelpSidebar({
+  onTryExample,
+  onQueryGenerated,
+  getCurrentQuery,
+  activeTab,
+  onTabChange,
+  aiFixRequest,
+}: {
+  onTryExample: (query: string, scope: QueryScope) => void;
+  onQueryGenerated: (query: string) => void;
+  getCurrentQuery: () => string;
+  activeTab: string;
+  onTabChange: (tab: string) => void;
+  aiFixRequest: { prompt: string; key: number } | null;
+}) {
+  return (
+    <div className="grid h-full max-h-full grid-rows-[auto_1fr] overflow-hidden bg-background-bright">
+      <ClientTabs
+        value={activeTab}
+        onValueChange={onTabChange}
+        className="flex min-h-0 flex-col overflow-hidden pt-1"
+      >
+        <ClientTabsList variant="underline" className="mx-3 shrink-0">
+          <ClientTabsTrigger value="ai" variant="underline" layoutId="query-help-tabs">
+            <div className="flex items-center gap-0.5">
+              <AISparkleIcon className="size-4" /> AI
+            </div>
+          </ClientTabsTrigger>
+          <ClientTabsTrigger value="guide" variant="underline" layoutId="query-help-tabs">
+            Writing TRQL
+          </ClientTabsTrigger>
+          <ClientTabsTrigger value="schema" variant="underline" layoutId="query-help-tabs">
+            Table schema
+          </ClientTabsTrigger>
+          <ClientTabsTrigger value="examples" variant="underline" layoutId="query-help-tabs">
+            Examples
+          </ClientTabsTrigger>
+        </ClientTabsList>
+        <ClientTabsContent
+          value="ai"
+          className="min-h-0 flex-1 overflow-y-auto p-3 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600"
+        >
+          <AITabContent
+            onQueryGenerated={onQueryGenerated}
+            getCurrentQuery={getCurrentQuery}
+            aiFixRequest={aiFixRequest}
+          />
+        </ClientTabsContent>
+        <ClientTabsContent
+          value="guide"
+          className="min-h-0 flex-1 overflow-y-auto p-3 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600"
+        >
+          <TRQLGuideContent onTryExample={onTryExample} />
+        </ClientTabsContent>
+        <ClientTabsContent
+          value="schema"
+          className="min-h-0 flex-1 overflow-y-auto p-3 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600"
+        >
+          <TableSchemaContent />
+        </ClientTabsContent>
+        <ClientTabsContent
+          value="examples"
+          className="min-h-0 flex-1 overflow-y-auto p-3 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600"
+        >
+          <ExamplesContent onTryExample={onTryExample} />
+        </ClientTabsContent>
+      </ClientTabs>
+    </div>
+  );
+}
+
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/QueryHistoryPopover.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/QueryHistoryPopover.tsx
new file mode 100644
index 0000000000..78fac0a134
--- /dev/null
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/QueryHistoryPopover.tsx
@@ -0,0 +1,135 @@
+import { useState } from "react";
+import { ClockRotateLeftIcon } from "~/assets/icons/ClockRotateLeftIcon";
+import { Button } from "~/components/primitives/Buttons";
+import { DateTime } from "~/components/primitives/DateTime";
+import { Popover, PopoverContent, PopoverTrigger } from "~/components/primitives/Popover";
+import type { QueryHistoryItem } from "~/presenters/v3/QueryPresenter.server";
+
+const SQL_KEYWORDS = [
+  "SELECT",
+  "FROM",
+  "WHERE",
+  "ORDER BY",
+  "LIMIT",
+  "GROUP BY",
+  "HAVING",
+  "JOIN",
+  "LEFT JOIN",
+  "RIGHT JOIN",
+  "INNER JOIN",
+  "OUTER JOIN",
+  "AND",
+  "OR",
+  "AS",
+  "ON",
+  "IN",
+  "NOT",
+  "NULL",
+  "DESC",
+  "ASC",
+  "DISTINCT",
+  "COUNT",
+  "SUM",
+  "AVG",
+  "MIN",
+  "MAX",
+];
+
+function highlightSQL(query: string): React.ReactNode[] {
+  // Normalize whitespace for display (let CSS line-clamp handle truncation)
+  const normalized = query.replace(/\s+/g, " ").slice(0, 200);
+  const suffix = "";
+
+  // Create a regex pattern that matches keywords as whole words (case insensitive)
+  const keywordPattern = new RegExp(
+    `\\b(${SQL_KEYWORDS.map((k) => k.replace(/\s+/g, "\\s+")).join("|")})\\b`,
+    "gi"
+  );
+
+  const parts: React.ReactNode[] = [];
+  let lastIndex = 0;
+  let match;
+
+  while ((match = keywordPattern.exec(normalized)) !== null) {
+    // Add text before the match
+    if (match.index > lastIndex) {
+      parts.push(normalized.slice(lastIndex, match.index));
+    }
+    // Add the highlighted keyword
+    parts.push(
+      <span key={match.index} className="text-[#c678dd]">
+        {match[0]}
+      </span>
+    );
+    lastIndex = keywordPattern.lastIndex;
+  }
+
+  // Add remaining text
+  if (lastIndex < normalized.length) {
+    parts.push(normalized.slice(lastIndex));
+  }
+
+  if (suffix) {
+    parts.push(suffix);
+  }
+
+  return parts;
+}
+
+export function QueryHistoryPopover({
+  history,
+  onQuerySelected,
+}: {
+  history: QueryHistoryItem[];
+  onQuerySelected: (item: QueryHistoryItem) => void;
+}) {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <Popover open={isOpen} onOpenChange={setIsOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          type="button"
+          variant="tertiary/small"
+          LeadingIcon={ClockRotateLeftIcon}
+          disabled={history.length === 0}
+        >
+          History
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent
+        className="w-[400px] min-w-0 overflow-hidden p-0"
+        align="start"
+        sideOffset={6}
+      >
+        <div className="max-h-80 overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
+          <div className="p-1">
+            {history.map((item) => (
+              <button
+                key={item.id}
+                type="button"
+                onClick={() => {
+                  onQuerySelected(item);
+                  setIsOpen(false);
+                }}
+                className="flex w-full items-center gap-2 rounded-sm px-2 py-2 outline-none transition-colors focus-custom hover:bg-charcoal-900"
+              >
+                <div className="flex flex-1 flex-col items-start overflow-hidden">
+                  <p className="line-clamp-2 w-full break-words text-left font-mono text-xs text-[#9b99ff]">
+                    {highlightSQL(item.query)}
+                  </p>
+                  <div className="flex items-center gap-2 text-xs text-text-dimmed">
+                    <DateTime date={item.createdAt} showTooltip={false} />
+                    {item.userName && <span>· {item.userName}</span>}
+                    <span className="capitalize">· {item.scope}</span>
+                  </div>
+                </div>
+              </button>
+            ))}
+          </div>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/TRQLGuideContent.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/TRQLGuideContent.tsx
new file mode 100644
index 0000000000..49cbe26bc1
--- /dev/null
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/TRQLGuideContent.tsx
@@ -0,0 +1,1204 @@
+import { PlayIcon } from "@heroicons/react/20/solid";
+import { CodeBlock } from "~/components/code/CodeBlock";
+import { Button } from "~/components/primitives/Buttons";
+import { Header3 } from "~/components/primitives/Headers";
+import { Paragraph } from "~/components/primitives/Paragraph";
+import { SimpleTooltip } from "~/components/primitives/Tooltip";
+import type { QueryScope } from "~/services/queryService.server";
+
+/** A code block with an integrated "Try it" button */
+export function TryableCodeBlock({
+  code,
+  onTry,
+  className,
+}: {
+  code: string;
+  onTry?: () => void;
+  className?: string;
+}) {
+  return (
+    <div className={className}>
+      <CodeBlock
+        code={code}
+        language="sql"
+        showLineNumbers={false}
+        showOpenInModal={false}
+        className={onTry ? "rounded-b-none border-b-0 text-xs" : "text-xs"}
+      />
+      {onTry && (
+        <div className="flex justify-end rounded-b-md border border-grid-bright p-1">
+          <Button variant="minimal/small" onClick={onTry} LeadingIcon={PlayIcon}>
+            Try it
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+}
+
+type FunctionDoc = { name: string; desc: string; example: string };
+
+function FunctionCategory({ title, functions }: { title: string; functions: FunctionDoc[] }) {
+  return (
+    <div>
+      <Paragraph variant="small/bright" className="mb-1">
+        {title}
+      </Paragraph>
+      <div className="flex flex-wrap gap-1">
+        {functions.map((fn) => (
+          <SimpleTooltip
+            key={fn.name}
+            button={
+              <code className="cursor-help rounded bg-charcoal-750 px-1.5 py-0.5 font-mono text-xxs text-indigo-400 transition-colors hover:bg-charcoal-700 hover:text-indigo-300">
+                {fn.name}
+              </code>
+            }
+            content={
+              <div className="max-w-xs space-y-1">
+                <div className="text-text-bright">{fn.desc}</div>
+                <code className="block rounded bg-charcoal-800 px-1.5 py-1 font-mono text-xxs text-indigo-300">
+                  {fn.example}
+                </code>
+              </div>
+            }
+          />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export function TRQLGuideContent({
+  onTryExample,
+}: {
+  onTryExample: (query: string, scope: QueryScope) => void;
+}) {
+  return (
+    <div className="space-y-6">
+      <Paragraph variant="small/bright">
+        TRQL is a query language for the Trigger platform. It is based on ClickHouse SQL and extends
+        it with additional features.
+      </Paragraph>
+      {/* Table of contents */}
+      <nav className="space-y-1 text-sm">
+        <a href="#basic" className="block text-text-link hover:underline">
+          Basic queries
+        </a>
+        <a href="#filtering" className="block text-text-link hover:underline">
+          Filtering with WHERE
+        </a>
+        <a href="#sorting" className="block text-text-link hover:underline">
+          Sorting &amp; limiting
+        </a>
+        <a href="#grouping" className="block text-text-link hover:underline">
+          Grouping &amp; aggregation
+        </a>
+        <a href="#functions" className="block text-text-link hover:underline">
+          Available functions
+        </a>
+      </nav>
+
+      {/* Basic queries */}
+      <section id="basic">
+        <Header3 className="mb-2 text-text-bright">Basic queries</Header3>
+        <Paragraph variant="small" className="mb-2 text-text-dimmed">
+          Select columns from a table. Use <code className="text-xs">*</code> to select all columns,
+          or list specific columns.
+        </Paragraph>
+        <TryableCodeBlock
+          code={`SELECT run_id, task_identifier, status
+FROM runs
+LIMIT 10`}
+          onTry={() =>
+            onTryExample(
+              `SELECT run_id, task_identifier, status
+FROM runs
+LIMIT 10`,
+              "environment"
+            )
+          }
+        />
+        <Paragraph variant="small" className="mt-3 text-text-dimmed">
+          Alias columns with <code className="text-xs">AS</code>:
+        </Paragraph>
+        <TryableCodeBlock
+          code={`SELECT task_identifier AS task, count() AS total
+FROM runs
+GROUP BY task`}
+          onTry={() =>
+            onTryExample(
+              `SELECT task_identifier AS task, count() AS total
+FROM runs
+GROUP BY task`,
+              "environment"
+            )
+          }
+          className="mt-1"
+        />
+      </section>
+
+      {/* Filtering */}
+      <section id="filtering">
+        <Header3 className="mb-2 text-text-bright">Filtering with WHERE</Header3>
+        <Paragraph variant="small" className="mb-2 text-text-dimmed">
+          Use comparison operators: <code className="text-xs">=</code>,{" "}
+          <code className="text-xs">!=</code>, <code className="text-xs">&lt;</code>,{" "}
+          <code className="text-xs">&gt;</code>, <code className="text-xs">&lt;=</code>,{" "}
+          <code className="text-xs">&gt;=</code>
+        </Paragraph>
+        <TryableCodeBlock
+          code={`SELECT * FROM runs
+WHERE status = 'Failed'
+  AND created_at > now() - INTERVAL 1 DAY`}
+          onTry={() =>
+            onTryExample(
+              `SELECT * FROM runs
+WHERE status = 'Failed'
+  AND created_at > now() - INTERVAL 1 DAY`,
+              "environment"
+            )
+          }
+        />
+        <Paragraph variant="small" className="mt-3 text-text-dimmed">
+          Other operators:
+        </Paragraph>
+        <TryableCodeBlock
+          code={`-- IN for multiple values
+WHERE status IN ('Failed', 'Crashed')
+
+-- LIKE for pattern matching (% = wildcard)
+WHERE task_identifier LIKE 'email%'
+
+-- ILIKE for case-insensitive matching
+WHERE task_identifier ILIKE '%send%'
+
+-- BETWEEN for ranges
+WHERE created_at BETWEEN '2024-01-01' AND '2024-01-31'
+
+-- NULL checks
+WHERE completed_at IS NOT NULL`}
+          className="mt-1"
+        />
+      </section>
+
+      {/* Sorting & limiting */}
+      <section id="sorting">
+        <Header3 className="mb-2 text-text-bright">Sorting &amp; limiting</Header3>
+        <Paragraph variant="small" className="mb-2 text-text-dimmed">
+          Sort results with <code className="text-xs">ORDER BY</code> (ASC/DESC). Limit results with{" "}
+          <code className="text-xs">LIMIT</code>.
+        </Paragraph>
+        <TryableCodeBlock
+          code={`SELECT run_id, compute_cost, created_at
+FROM runs
+ORDER BY compute_cost DESC, created_at ASC
+LIMIT 50`}
+          onTry={() =>
+            onTryExample(
+              `SELECT run_id, compute_cost, created_at
+FROM runs
+ORDER BY compute_cost DESC, created_at ASC
+LIMIT 50`,
+              "environment"
+            )
+          }
+        />
+      </section>
+
+      {/* Grouping */}
+      <section id="grouping">
+        <Header3 className="mb-2 text-text-bright">Grouping &amp; aggregation</Header3>
+        <Paragraph variant="small" className="mb-2 text-text-dimmed">
+          Use <code className="text-xs">GROUP BY</code> with aggregate functions. Filter groups with{" "}
+          <code className="text-xs">HAVING</code>.
+        </Paragraph>
+        <TryableCodeBlock
+          code={`SELECT
+  task_identifier,
+  status,
+  count() AS run_count,
+  avg(usage_duration) AS avg_duration
+FROM runs
+GROUP BY task_identifier, status
+HAVING run_count > 10
+ORDER BY run_count DESC`}
+          onTry={() =>
+            onTryExample(
+              `SELECT
+  task_identifier,
+  status,
+  count() AS run_count,
+  avg(usage_duration) AS avg_duration
+FROM runs
+GROUP BY task_identifier, status
+HAVING run_count > 10
+ORDER BY run_count DESC`,
+              "environment"
+            )
+          }
+        />
+      </section>
+
+      {/* Functions */}
+      <section id="functions">
+        <Header3 className="mb-2 text-text-bright">Available functions</Header3>
+        <Paragraph variant="extra-small" className="mb-3 text-text-dimmed">
+          Hover over any function to see its description and example usage.
+        </Paragraph>
+
+        <div className="space-y-4">
+          {/* Aggregate functions */}
+          <FunctionCategory
+            title="Aggregate functions"
+            functions={[
+              { name: "count()", desc: "Count rows", example: "count()" },
+              {
+                name: "countIf(col, cond)",
+                desc: "Count rows matching condition",
+                example: "countIf(status, status = 'Failed')",
+              },
+              {
+                name: "countDistinct(col)",
+                desc: "Count unique values",
+                example: "countDistinct(task_identifier)",
+              },
+              { name: "sum(col)", desc: "Sum of values", example: "sum(compute_cost)" },
+              {
+                name: "sumIf(col, cond)",
+                desc: "Sum values matching condition",
+                example: "sumIf(compute_cost, status = 'Completed')",
+              },
+              { name: "avg(col)", desc: "Average of values", example: "avg(usage_duration)" },
+              { name: "min(col)", desc: "Minimum value", example: "min(created_at)" },
+              { name: "max(col)", desc: "Maximum value", example: "max(compute_cost)" },
+              {
+                name: "uniq(col)",
+                desc: "Approximate unique count (fast)",
+                example: "uniq(task_identifier)",
+              },
+              { name: "uniqExact(col)", desc: "Exact unique count", example: "uniqExact(run_id)" },
+              {
+                name: "any(col)",
+                desc: "Any arbitrary value from group",
+                example: "any(task_identifier)",
+              },
+              {
+                name: "anyLast(col)",
+                desc: "Last value encountered in group",
+                example: "anyLast(status)",
+              },
+              {
+                name: "argMin(arg, val)",
+                desc: "Value of arg at minimum val",
+                example: "argMin(run_id, created_at)",
+              },
+              {
+                name: "argMax(arg, val)",
+                desc: "Value of arg at maximum val",
+                example: "argMax(run_id, compute_cost)",
+              },
+              {
+                name: "median(col)",
+                desc: "Median value (50th percentile)",
+                example: "median(usage_duration)",
+              },
+              {
+                name: "quantile(p)(col)",
+                desc: "Value at percentile p (0-1)",
+                example: "quantile(0.95)(usage_duration)",
+              },
+              {
+                name: "stddevPop(col)",
+                desc: "Population standard deviation",
+                example: "stddevPop(usage_duration)",
+              },
+              {
+                name: "stddevSamp(col)",
+                desc: "Sample standard deviation",
+                example: "stddevSamp(usage_duration)",
+              },
+              {
+                name: "groupArray(col)",
+                desc: "Collect values into array",
+                example: "groupArray(run_id)",
+              },
+              {
+                name: "groupUniqArray(col)",
+                desc: "Collect unique values into array",
+                example: "groupUniqArray(status)",
+              },
+              {
+                name: "topK(k)(col)",
+                desc: "Top k most frequent values",
+                example: "topK(5)(task_identifier)",
+              },
+            ]}
+          />
+
+          {/* String functions */}
+          <FunctionCategory
+            title="String functions"
+            functions={[
+              {
+                name: "length(s)",
+                desc: "Length of string in bytes",
+                example: "length(task_identifier)",
+              },
+              {
+                name: "lengthUTF8(s)",
+                desc: "Length in UTF-8 characters",
+                example: "lengthUTF8(task_identifier)",
+              },
+              { name: "empty(s)", desc: "Returns 1 if string is empty", example: "empty(error)" },
+              {
+                name: "notEmpty(s)",
+                desc: "Returns 1 if string is not empty",
+                example: "notEmpty(task_identifier)",
+              },
+              { name: "lower(s)", desc: "Convert to lowercase", example: "lower(status)" },
+              { name: "upper(s)", desc: "Convert to uppercase", example: "upper(status)" },
+              { name: "reverse(s)", desc: "Reverse string", example: "reverse(run_id)" },
+              {
+                name: "concat(s1, s2, ...)",
+                desc: "Concatenate strings",
+                example: "concat(task_identifier, '-', status)",
+              },
+              {
+                name: "substring(s, offset, len)",
+                desc: "Extract substring (1-indexed)",
+                example: "substring(run_id, 1, 10)",
+              },
+              { name: "left(s, n)", desc: "First n characters", example: "left(run_id, 10)" },
+              { name: "right(s, n)", desc: "Last n characters", example: "right(run_id, 8)" },
+              {
+                name: "trim(s)",
+                desc: "Remove leading/trailing whitespace",
+                example: "trim(task_identifier)",
+              },
+              {
+                name: "trimLeft(s)",
+                desc: "Remove leading whitespace",
+                example: "trimLeft(task_identifier)",
+              },
+              {
+                name: "trimRight(s)",
+                desc: "Remove trailing whitespace",
+                example: "trimRight(task_identifier)",
+              },
+              {
+                name: "leftPad(s, len, char)",
+                desc: "Pad string on left",
+                example: "leftPad(toString(attempt), 3, '0')",
+              },
+              {
+                name: "rightPad(s, len, char)",
+                desc: "Pad string on right",
+                example: "rightPad(status, 15, ' ')",
+              },
+              {
+                name: "startsWith(s, prefix)",
+                desc: "Check if starts with prefix",
+                example: "startsWith(task_identifier, 'email')",
+              },
+              {
+                name: "endsWith(s, suffix)",
+                desc: "Check if ends with suffix",
+                example: "endsWith(run_id, 'abc')",
+              },
+              {
+                name: "position(haystack, needle)",
+                desc: "Position of substring (0 if not found)",
+                example: "position(task_identifier, 'send')",
+              },
+              {
+                name: "replace(s, from, to)",
+                desc: "Replace all occurrences",
+                example: "replace(status, '_', '-')",
+              },
+              {
+                name: "replaceOne(s, from, to)",
+                desc: "Replace first occurrence",
+                example: "replaceOne(task_identifier, '-', '_')",
+              },
+              {
+                name: "replaceRegexpAll(s, pattern, repl)",
+                desc: "Replace using regex",
+                example: "replaceRegexpAll(run_id, '[0-9]', 'X')",
+              },
+              {
+                name: "match(s, pattern)",
+                desc: "Regex match (returns 0 or 1)",
+                example: "match(task_identifier, '^email.*')",
+              },
+              {
+                name: "extract(s, pattern)",
+                desc: "Extract first regex match",
+                example: "extract(task_identifier, '[a-z]+')",
+              },
+              {
+                name: "extractAll(s, pattern)",
+                desc: "Extract all regex matches as array",
+                example: "extractAll(task_identifier, '[a-z]+')",
+              },
+              {
+                name: "like(s, pattern)",
+                desc: "SQL LIKE pattern match",
+                example: "like(task_identifier, '%email%')",
+              },
+              {
+                name: "ilike(s, pattern)",
+                desc: "Case-insensitive LIKE",
+                example: "ilike(task_identifier, '%EMAIL%')",
+              },
+              {
+                name: "splitByChar(sep, s)",
+                desc: "Split by character",
+                example: "splitByChar('-', task_identifier)",
+              },
+              {
+                name: "splitByString(sep, s)",
+                desc: "Split by string",
+                example: "splitByString('::', task_identifier)",
+              },
+              {
+                name: "arrayStringConcat(arr, sep)",
+                desc: "Join array to string",
+                example: "arrayStringConcat(tags, ', ')",
+              },
+              {
+                name: "base64Encode(s)",
+                desc: "Encode to base64",
+                example: "base64Encode(run_id)",
+              },
+              {
+                name: "base64Decode(s)",
+                desc: "Decode from base64",
+                example: "base64Decode(encoded_value)",
+              },
+              { name: "repeat(s, n)", desc: "Repeat string n times", example: "repeat('-', 10)" },
+              {
+                name: "format(pattern, args...)",
+                desc: "Format string with placeholders",
+                example: "format('{} - {}', task_identifier, status)",
+              },
+            ]}
+          />
+
+          {/* Date/time functions */}
+          <FunctionCategory
+            title="Date/time functions"
+            functions={[
+              { name: "now()", desc: "Current date and time", example: "now()" },
+              { name: "today()", desc: "Current date", example: "today()" },
+              { name: "yesterday()", desc: "Yesterday's date", example: "yesterday()" },
+              { name: "toYear(dt)", desc: "Extract year", example: "toYear(created_at)" },
+              {
+                name: "toQuarter(dt)",
+                desc: "Extract quarter (1-4)",
+                example: "toQuarter(created_at)",
+              },
+              { name: "toMonth(dt)", desc: "Extract month (1-12)", example: "toMonth(created_at)" },
+              {
+                name: "toDayOfMonth(dt)",
+                desc: "Extract day of month (1-31)",
+                example: "toDayOfMonth(created_at)",
+              },
+              {
+                name: "toDayOfWeek(dt)",
+                desc: "Day of week (1=Monday, 7=Sunday)",
+                example: "toDayOfWeek(created_at)",
+              },
+              { name: "toHour(dt)", desc: "Extract hour (0-23)", example: "toHour(created_at)" },
+              {
+                name: "toMinute(dt)",
+                desc: "Extract minute (0-59)",
+                example: "toMinute(created_at)",
+              },
+              {
+                name: "toSecond(dt)",
+                desc: "Extract second (0-59)",
+                example: "toSecond(created_at)",
+              },
+              {
+                name: "toDate(dt)",
+                desc: "Convert to date (strip time)",
+                example: "toDate(created_at)",
+              },
+              {
+                name: "toDateTime(x)",
+                desc: "Convert to datetime",
+                example: "toDateTime('2024-01-15 10:30:00')",
+              },
+              {
+                name: "toStartOfYear(dt)",
+                desc: "First day of year",
+                example: "toStartOfYear(created_at)",
+              },
+              {
+                name: "toStartOfQuarter(dt)",
+                desc: "First day of quarter",
+                example: "toStartOfQuarter(created_at)",
+              },
+              {
+                name: "toStartOfMonth(dt)",
+                desc: "First day of month",
+                example: "toStartOfMonth(created_at)",
+              },
+              {
+                name: "toStartOfWeek(dt)",
+                desc: "Start of week (Monday)",
+                example: "toStartOfWeek(created_at)",
+              },
+              { name: "toMonday(dt)", desc: "Monday of the week", example: "toMonday(created_at)" },
+              {
+                name: "toStartOfDay(dt)",
+                desc: "Start of day (midnight)",
+                example: "toStartOfDay(created_at)",
+              },
+              {
+                name: "toStartOfHour(dt)",
+                desc: "Start of hour",
+                example: "toStartOfHour(created_at)",
+              },
+              {
+                name: "toStartOfMinute(dt)",
+                desc: "Start of minute",
+                example: "toStartOfMinute(created_at)",
+              },
+              {
+                name: "toStartOfFiveMinutes(dt)",
+                desc: "Round to 5-minute interval",
+                example: "toStartOfFiveMinutes(created_at)",
+              },
+              {
+                name: "toStartOfFifteenMinutes(dt)",
+                desc: "Round to 15-minute interval",
+                example: "toStartOfFifteenMinutes(created_at)",
+              },
+              {
+                name: "toStartOfInterval(dt, INTERVAL n unit)",
+                desc: "Round to custom interval",
+                example: "toStartOfInterval(created_at, INTERVAL 30 MINUTE)",
+              },
+              {
+                name: "toUnixTimestamp(dt)",
+                desc: "Convert to Unix timestamp",
+                example: "toUnixTimestamp(created_at)",
+              },
+              {
+                name: "dateDiff(unit, start, end)",
+                desc: "Difference between dates",
+                example: "dateDiff('minute', started_at, completed_at)",
+              },
+              {
+                name: "dateAdd(unit, n, dt)",
+                desc: "Add time to date",
+                example: "dateAdd('day', 7, created_at)",
+              },
+              {
+                name: "dateSub(unit, n, dt)",
+                desc: "Subtract time from date",
+                example: "dateSub('hour', 1, created_at)",
+              },
+              {
+                name: "dateTrunc(unit, dt)",
+                desc: "Truncate to unit",
+                example: "dateTrunc('month', created_at)",
+              },
+              { name: "addDays(dt, n)", desc: "Add n days", example: "addDays(created_at, 7)" },
+              { name: "addHours(dt, n)", desc: "Add n hours", example: "addHours(created_at, 24)" },
+              {
+                name: "addMinutes(dt, n)",
+                desc: "Add n minutes",
+                example: "addMinutes(created_at, 30)",
+              },
+              {
+                name: "subtractDays(dt, n)",
+                desc: "Subtract n days",
+                example: "subtractDays(now(), 7)",
+              },
+              {
+                name: "subtractHours(dt, n)",
+                desc: "Subtract n hours",
+                example: "subtractHours(now(), 1)",
+              },
+              {
+                name: "formatDateTime(dt, format)",
+                desc: "Format datetime as string",
+                example: "formatDateTime(created_at, '%Y-%m-%d %H:%M')",
+              },
+              {
+                name: "parseDateTimeBestEffort(s)",
+                desc: "Parse string to datetime",
+                example: "parseDateTimeBestEffort('2024-01-15')",
+              },
+              {
+                name: "toTimeZone(dt, tz)",
+                desc: "Convert to timezone",
+                example: "toTimeZone(created_at, 'America/New_York')",
+              },
+            ]}
+          />
+
+          {/* Conditional & null functions */}
+          <FunctionCategory
+            title="Conditional & null functions"
+            functions={[
+              {
+                name: "if(cond, then, else)",
+                desc: "Conditional expression",
+                example: "if(status = 'Failed', 1, 0)",
+              },
+              {
+                name: "multiIf(c1, t1, c2, t2, ..., else)",
+                desc: "Multiple conditions (like CASE)",
+                example: "multiIf(status = 'Completed', 'ok', status = 'Failed', 'bad', 'other')",
+              },
+              {
+                name: "coalesce(a, b, ...)",
+                desc: "First non-null value",
+                example: "coalesce(completed_at, created_at)",
+              },
+              {
+                name: "ifNull(x, alt)",
+                desc: "Return alt if x is null",
+                example: "ifNull(completed_at, now())",
+              },
+              {
+                name: "nullIf(x, y)",
+                desc: "Return null if x equals y",
+                example: "nullIf(status, 'Pending')",
+              },
+              {
+                name: "isNull(x)",
+                desc: "Check if value is null",
+                example: "isNull(completed_at)",
+              },
+              {
+                name: "isNotNull(x)",
+                desc: "Check if value is not null",
+                example: "isNotNull(completed_at)",
+              },
+              {
+                name: "assumeNotNull(x)",
+                desc: "Treat nullable as non-null",
+                example: "assumeNotNull(completed_at)",
+              },
+            ]}
+          />
+
+          {/* Arithmetic & math */}
+          <FunctionCategory
+            title="Arithmetic & math functions"
+            functions={[
+              {
+                name: "plus(a, b)",
+                desc: "Addition (a + b)",
+                example: "plus(compute_cost, invocation_cost)",
+              },
+              {
+                name: "minus(a, b)",
+                desc: "Subtraction (a - b)",
+                example: "minus(completed_at, started_at)",
+              },
+              {
+                name: "multiply(a, b)",
+                desc: "Multiplication (a * b)",
+                example: "multiply(usage_duration, 2)",
+              },
+              {
+                name: "divide(a, b)",
+                desc: "Division (a / b)",
+                example: "divide(compute_cost, usage_duration)",
+              },
+              {
+                name: "intDiv(a, b)",
+                desc: "Integer division",
+                example: "intDiv(usage_duration, 1000)",
+              },
+              { name: "modulo(a, b)", desc: "Modulo (a % b)", example: "modulo(attempt, 2)" },
+              { name: "abs(x)", desc: "Absolute value", example: "abs(compute_cost)" },
+              { name: "sign(x)", desc: "Sign (-1, 0, or 1)", example: "sign(compute_cost)" },
+              { name: "sqrt(x)", desc: "Square root", example: "sqrt(usage_duration)" },
+              { name: "pow(x, y)", desc: "Power (x^y)", example: "pow(2, attempt)" },
+              {
+                name: "round(x, n)",
+                desc: "Round to n decimal places",
+                example: "round(compute_cost, 4)",
+              },
+              { name: "floor(x)", desc: "Round down", example: "floor(compute_cost * 100)" },
+              { name: "ceil(x)", desc: "Round up", example: "ceil(compute_cost * 100)" },
+              { name: "trunc(x)", desc: "Truncate towards zero", example: "trunc(compute_cost)" },
+              { name: "exp(x)", desc: "Exponential (e^x)", example: "exp(1)" },
+              { name: "log(x)", desc: "Natural logarithm", example: "log(usage_duration)" },
+              { name: "log10(x)", desc: "Base-10 logarithm", example: "log10(usage_duration)" },
+              {
+                name: "least(a, b)",
+                desc: "Minimum of two values",
+                example: "least(usage_duration, 10000)",
+              },
+              {
+                name: "greatest(a, b)",
+                desc: "Maximum of two values",
+                example: "greatest(usage_duration, 0)",
+              },
+            ]}
+          />
+
+          {/* Array functions */}
+          <FunctionCategory
+            title="Array functions"
+            functions={[
+              {
+                name: "array(a, b, ...)",
+                desc: "Create array from values",
+                example: "array('a', 'b', 'c')",
+              },
+              {
+                name: "range(start, end)",
+                desc: "Generate array of numbers",
+                example: "range(1, 10)",
+              },
+              { name: "length(arr)", desc: "Number of elements", example: "length(tags)" },
+              { name: "empty(arr)", desc: "Check if array is empty", example: "empty(tags)" },
+              {
+                name: "has(arr, elem)",
+                desc: "Check if array contains element",
+                example: "has(tags, 'important')",
+              },
+              {
+                name: "hasAll(arr1, arr2)",
+                desc: "Check if arr1 contains all of arr2",
+                example: "hasAll(tags, array('a', 'b'))",
+              },
+              {
+                name: "hasAny(arr1, arr2)",
+                desc: "Check if arr1 contains any of arr2",
+                example: "hasAny(tags, array('urgent', 'high'))",
+              },
+              {
+                name: "indexOf(arr, elem)",
+                desc: "Index of element (1-based, 0 if not found)",
+                example: "indexOf(tags, 'important')",
+              },
+              {
+                name: "arrayElement(arr, n)",
+                desc: "Get nth element (1-based)",
+                example: "arrayElement(tags, 1)",
+              },
+              { name: "arrayJoin(arr)", desc: "Expand array to rows", example: "arrayJoin(tags)" },
+              {
+                name: "arraySlice(arr, offset, length)",
+                desc: "Get slice of array",
+                example: "arraySlice(tags, 1, 3)",
+              },
+              {
+                name: "arrayPushBack(arr, elem)",
+                desc: "Append element to array",
+                example: "arrayPushBack(tags, 'new')",
+              },
+              {
+                name: "arrayPushFront(arr, elem)",
+                desc: "Prepend element to array",
+                example: "arrayPushFront(tags, 'first')",
+              },
+              { name: "arraySort(arr)", desc: "Sort array ascending", example: "arraySort(tags)" },
+              {
+                name: "arrayReverseSort(arr)",
+                desc: "Sort array descending",
+                example: "arrayReverseSort(tags)",
+              },
+              {
+                name: "arrayReverse(arr)",
+                desc: "Reverse array order",
+                example: "arrayReverse(tags)",
+              },
+              { name: "arrayUniq(arr)", desc: "Remove duplicates", example: "arrayUniq(tags)" },
+              {
+                name: "arrayDistinct(arr)",
+                desc: "Remove duplicates (preserves order)",
+                example: "arrayDistinct(tags)",
+              },
+              {
+                name: "arrayFlatten(arr)",
+                desc: "Flatten nested arrays",
+                example: "arrayFlatten([[1,2], [3,4]])",
+              },
+              {
+                name: "arrayFilter(func, arr)",
+                desc: "Filter array by condition",
+                example: "arrayFilter(x -> x > 0, arr)",
+              },
+              {
+                name: "arrayMap(func, arr)",
+                desc: "Transform each element",
+                example: "arrayMap(x -> x * 2, arr)",
+              },
+              {
+                name: "arrayMin(arr)",
+                desc: "Minimum element",
+                example: "arrayMin(array(1, 2, 3))",
+              },
+              {
+                name: "arrayMax(arr)",
+                desc: "Maximum element",
+                example: "arrayMax(array(1, 2, 3))",
+              },
+              {
+                name: "arraySum(arr)",
+                desc: "Sum of elements",
+                example: "arraySum(array(1, 2, 3))",
+              },
+              {
+                name: "arrayAvg(arr)",
+                desc: "Average of elements",
+                example: "arrayAvg(array(1, 2, 3))",
+              },
+            ]}
+          />
+
+          {/* JSON functions */}
+          <FunctionCategory
+            title="JSON functions"
+            functions={[
+              {
+                name: "JSONHas(json, key)",
+                desc: "Check if key exists",
+                example: "JSONHas(output, 'result')",
+              },
+              {
+                name: "JSONLength(json)",
+                desc: "Number of elements/keys",
+                example: "JSONLength(output)",
+              },
+              {
+                name: "JSONType(json, key)",
+                desc: "Type of JSON value",
+                example: "JSONType(output, 'data')",
+              },
+              {
+                name: "JSONExtractString(json, key)",
+                desc: "Extract as string",
+                example: "JSONExtractString(output, 'message')",
+              },
+              {
+                name: "JSONExtractInt(json, key)",
+                desc: "Extract as integer",
+                example: "JSONExtractInt(output, 'count')",
+              },
+              {
+                name: "JSONExtractFloat(json, key)",
+                desc: "Extract as float",
+                example: "JSONExtractFloat(output, 'score')",
+              },
+              {
+                name: "JSONExtractBool(json, key)",
+                desc: "Extract as boolean",
+                example: "JSONExtractBool(output, 'success')",
+              },
+              {
+                name: "JSONExtractRaw(json, key)",
+                desc: "Extract as raw JSON string",
+                example: "JSONExtractRaw(output, 'data')",
+              },
+              {
+                name: "JSONExtractArrayRaw(json, key)",
+                desc: "Extract array as strings",
+                example: "JSONExtractArrayRaw(output, 'items')",
+              },
+              {
+                name: "JSONExtractKeys(json)",
+                desc: "Get all keys as array",
+                example: "JSONExtractKeys(output)",
+              },
+              {
+                name: "toJSONString(value)",
+                desc: "Convert to JSON string",
+                example: "toJSONString(map('a', 1))",
+              },
+            ]}
+          />
+
+          {/* Type conversion */}
+          <FunctionCategory
+            title="Type conversion functions"
+            functions={[
+              { name: "toString(x)", desc: "Convert to string", example: "toString(attempt)" },
+              { name: "toInt32(x)", desc: "Convert to 32-bit integer", example: "toInt32('123')" },
+              {
+                name: "toInt64(x)",
+                desc: "Convert to 64-bit integer",
+                example: "toInt64(usage_duration)",
+              },
+              {
+                name: "toFloat64(x)",
+                desc: "Convert to 64-bit float",
+                example: "toFloat64('3.14')",
+              },
+              {
+                name: "toDecimal64(x, scale)",
+                desc: "Convert to decimal",
+                example: "toDecimal64(compute_cost, 6)",
+              },
+              { name: "toDate(x)", desc: "Convert to date", example: "toDate('2024-01-15')" },
+              {
+                name: "toDateOrNull(x)",
+                desc: "Convert to date (null on error)",
+                example: "toDateOrNull(some_string)",
+              },
+              {
+                name: "toDateTime(x)",
+                desc: "Convert to datetime",
+                example: "toDateTime('2024-01-15 10:30:00')",
+              },
+              {
+                name: "toDateTimeOrNull(x)",
+                desc: "Convert to datetime (null on error)",
+                example: "toDateTimeOrNull(some_string)",
+              },
+              { name: "toUUID(x)", desc: "Convert to UUID", example: "toUUID(uuid_string)" },
+              {
+                name: "toTypeName(x)",
+                desc: "Get type name as string",
+                example: "toTypeName(created_at)",
+              },
+            ]}
+          />
+
+          {/* Comparison & logical */}
+          <FunctionCategory
+            title="Comparison & logical functions"
+            functions={[
+              {
+                name: "equals(a, b)",
+                desc: "Equal (a = b)",
+                example: "equals(status, 'Completed')",
+              },
+              {
+                name: "notEquals(a, b)",
+                desc: "Not equal (a != b)",
+                example: "notEquals(status, 'Failed')",
+              },
+              { name: "less(a, b)", desc: "Less than (a < b)", example: "less(attempt, 3)" },
+              {
+                name: "greater(a, b)",
+                desc: "Greater than (a > b)",
+                example: "greater(usage_duration, 1000)",
+              },
+              {
+                name: "lessOrEquals(a, b)",
+                desc: "Less than or equal (a <= b)",
+                example: "lessOrEquals(attempt, 5)",
+              },
+              {
+                name: "greaterOrEquals(a, b)",
+                desc: "Greater than or equal (a >= b)",
+                example: "greaterOrEquals(usage_duration, 0)",
+              },
+              {
+                name: "and(a, b, ...)",
+                desc: "Logical AND",
+                example: "and(status = 'Failed', attempt > 1)",
+              },
+              {
+                name: "or(a, b, ...)",
+                desc: "Logical OR",
+                example: "or(status = 'Failed', status = 'Crashed')",
+              },
+              { name: "not(x)", desc: "Logical NOT", example: "not(is_test)" },
+              {
+                name: "in(x, set)",
+                desc: "Check if x is in set",
+                example: "in(status, ('Failed', 'Crashed'))",
+              },
+            ]}
+          />
+
+          {/* Hash functions */}
+          <FunctionCategory
+            title="Hash functions"
+            functions={[
+              { name: "MD5(s)", desc: "MD5 hash (16 bytes)", example: "hex(MD5(run_id))" },
+              {
+                name: "SHA256(s)",
+                desc: "SHA-256 hash (32 bytes)",
+                example: "hex(SHA256(run_id))",
+              },
+              {
+                name: "sipHash64(s)",
+                desc: "Fast 64-bit hash",
+                example: "sipHash64(task_identifier)",
+              },
+              { name: "cityHash64(s)", desc: "CityHash 64-bit", example: "cityHash64(run_id)" },
+              { name: "xxHash64(s)", desc: "xxHash 64-bit", example: "xxHash64(task_identifier)" },
+              { name: "hex(s)", desc: "Convert to hex string", example: "hex(MD5(run_id))" },
+              { name: "unhex(s)", desc: "Convert from hex string", example: "unhex('48656C6C6F')" },
+            ]}
+          />
+
+          {/* UUID & utility */}
+          <FunctionCategory
+            title="UUID & utility functions"
+            functions={[
+              {
+                name: "generateUUIDv4()",
+                desc: "Generate random UUID",
+                example: "generateUUIDv4()",
+              },
+              {
+                name: "isFinite(x)",
+                desc: "Check if number is finite",
+                example: "isFinite(compute_cost)",
+              },
+              { name: "isNaN(x)", desc: "Check if value is NaN", example: "isNaN(compute_cost)" },
+              {
+                name: "formatReadableSize(bytes)",
+                desc: "Format bytes as human-readable",
+                example: "formatReadableSize(1024)",
+              },
+              {
+                name: "formatReadableQuantity(n)",
+                desc: "Format number with suffixes (K, M, etc)",
+                example: "formatReadableQuantity(1500000)",
+              },
+              {
+                name: "formatReadableTimeDelta(seconds)",
+                desc: "Format seconds as duration",
+                example: "formatReadableTimeDelta(3661)",
+              },
+              {
+                name: "runningDifference(col)",
+                desc: "Difference from previous row",
+                example: "runningDifference(usage_duration)",
+              },
+              {
+                name: "neighbor(col, offset)",
+                desc: "Value from row at offset",
+                example: "neighbor(created_at, -1)",
+              },
+            ]}
+          />
+
+          {/* Tuple & map functions */}
+          <FunctionCategory
+            title="Tuple & map functions"
+            functions={[
+              {
+                name: "tuple(a, b, ...)",
+                desc: "Create tuple",
+                example: "tuple(task_identifier, status)",
+              },
+              {
+                name: "tupleElement(tuple, n)",
+                desc: "Get nth element (1-based)",
+                example: "tupleElement(t, 1)",
+              },
+              {
+                name: "map(k1, v1, k2, v2, ...)",
+                desc: "Create map from key-value pairs",
+                example: "map('a', 1, 'b', 2)",
+              },
+              {
+                name: "mapFromArrays(keys, values)",
+                desc: "Create map from two arrays",
+                example: "mapFromArrays(['a', 'b'], [1, 2])",
+              },
+              {
+                name: "mapContains(map, key)",
+                desc: "Check if map has key",
+                example: "mapContains(m, 'key')",
+              },
+              { name: "mapKeys(map)", desc: "Get all keys as array", example: "mapKeys(m)" },
+              { name: "mapValues(map)", desc: "Get all values as array", example: "mapValues(m)" },
+            ]}
+          />
+
+          {/* Window functions */}
+          <FunctionCategory
+            title="Window functions"
+            functions={[
+              {
+                name: "row_number()",
+                desc: "Row number within partition",
+                example: "row_number() OVER (ORDER BY created_at)",
+              },
+              {
+                name: "rank()",
+                desc: "Rank with gaps for ties",
+                example: "rank() OVER (ORDER BY compute_cost DESC)",
+              },
+              {
+                name: "dense_rank()",
+                desc: "Rank without gaps",
+                example: "dense_rank() OVER (ORDER BY compute_cost DESC)",
+              },
+              {
+                name: "first_value(col)",
+                desc: "First value in window",
+                example: "first_value(status) OVER (PARTITION BY task_identifier)",
+              },
+              {
+                name: "last_value(col)",
+                desc: "Last value in window",
+                example: "last_value(status) OVER (PARTITION BY task_identifier)",
+              },
+              {
+                name: "lag(col, offset, default)",
+                desc: "Value from previous row",
+                example: "lag(created_at, 1) OVER (ORDER BY created_at)",
+              },
+              {
+                name: "lead(col, offset, default)",
+                desc: "Value from next row",
+                example: "lead(created_at, 1) OVER (ORDER BY created_at)",
+              },
+            ]}
+          />
+
+          {/* Interval functions */}
+          <FunctionCategory
+            title="Interval functions"
+            functions={[
+              {
+                name: "toIntervalSecond(n)",
+                desc: "Create n-second interval",
+                example: "toIntervalSecond(30)",
+              },
+              {
+                name: "toIntervalMinute(n)",
+                desc: "Create n-minute interval",
+                example: "toIntervalMinute(5)",
+              },
+              {
+                name: "toIntervalHour(n)",
+                desc: "Create n-hour interval",
+                example: "toIntervalHour(1)",
+              },
+              {
+                name: "toIntervalDay(n)",
+                desc: "Create n-day interval",
+                example: "toIntervalDay(7)",
+              },
+              {
+                name: "toIntervalWeek(n)",
+                desc: "Create n-week interval",
+                example: "toIntervalWeek(2)",
+              },
+              {
+                name: "toIntervalMonth(n)",
+                desc: "Create n-month interval",
+                example: "toIntervalMonth(1)",
+              },
+              {
+                name: "toIntervalYear(n)",
+                desc: "Create n-year interval",
+                example: "toIntervalYear(1)",
+              },
+            ]}
+          />
+        </div>
+      </section>
+    </div>
+  );
+}
+
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/TableSchemaContent.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/TableSchemaContent.tsx
new file mode 100644
index 0000000000..3b0ca9f228
--- /dev/null
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/TableSchemaContent.tsx
@@ -0,0 +1,68 @@
+import type { ColumnSchema } from "@internal/tsql";
+import { Badge } from "~/components/primitives/Badge";
+import { CopyableText } from "~/components/primitives/CopyableText";
+import { Header3 } from "~/components/primitives/Headers";
+import { Paragraph } from "~/components/primitives/Paragraph";
+import { querySchemas } from "~/v3/querySchemas";
+
+function ColumnHelpItem({ col }: { col: ColumnSchema }) {
+  return (
+    <div className="pt-1">
+      <div className="flex items-center gap-2">
+        <CopyableText value={col.name} className="text-sm text-indigo-400" />
+        <Badge className="font-mono text-xxs">{col.type}</Badge>
+      </div>
+      {col.description && (
+        <Paragraph variant="extra-small" className="mt-1 text-text-dimmed">
+          {col.description}
+        </Paragraph>
+      )}
+      {col.example && (
+        <div className="mt-1 flex items-baseline gap-0.5">
+          <span className="text-xs text-text-dimmed">Example:</span>
+          <CopyableText
+            value={col.example}
+            className="rounded-sm bg-charcoal-750 px-1.5 py-0.5 font-mono text-xxs"
+          />
+        </div>
+      )}
+      {col.allowedValues && col.allowedValues.length > 0 && (
+        <div className="mt-0.5 flex flex-wrap gap-1">
+          <span className="text-xs text-text-dimmed">Available options:</span>
+          {col.allowedValues.map((value) => (
+            <CopyableText
+              key={value}
+              value={col.valueMap?.[value] ?? value}
+              className="rounded-sm bg-charcoal-750 px-1.5 py-0.5 font-mono text-xxs"
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export function TableSchemaContent() {
+  return (
+    <div>
+      {querySchemas.map((table) => (
+        <div key={table.name} className="mb-6">
+          <div className="mb-2">
+            <Header3 className="font-mono text-text-bright">{table.name}</Header3>
+            {table.description && (
+              <Paragraph variant="small" className="mt-1 text-text-dimmed">
+                {table.description}
+              </Paragraph>
+            )}
+          </div>
+          <div className="flex flex-col gap-2 divide-y divide-grid-dimmed">
+            {Object.values(table.columns).map((col) => (
+              <ColumnHelpItem key={col.name} col={col} />
+            ))}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/route.tsx
index 8ca74e3563..aedb1625b1 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/route.tsx
@@ -1,11 +1,5 @@
-import {
-  ArrowDownTrayIcon,
-  ClipboardIcon,
-  LightBulbIcon,
-  PlayIcon,
-} from "@heroicons/react/20/solid";
+import { ArrowDownTrayIcon, ClipboardIcon, PlayIcon } from "@heroicons/react/20/solid";
 import type { OutputColumnMetadata } from "@internal/clickhouse";
-import type { ColumnSchema } from "@internal/tsql";
 import { Form, useNavigation } from "@remix-run/react";
 import {
   type ActionFunctionArgs,
@@ -16,16 +10,12 @@ import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useSta
 import { typedjson, useTypedActionData, useTypedLoaderData } from "remix-typedjson";
 import { z } from "zod";
 import { AISparkleIcon } from "~/assets/icons/AISparkleIcon";
-import { ClockRotateLeftIcon } from "~/assets/icons/ClockRotateLeftIcon";
-import { ExitIcon } from "~/assets/icons/ExitIcon";
 import { AlphaTitle } from "~/components/AlphaBadge";
-import { AIQueryInput } from "~/components/code/AIQueryInput";
 import {
   ChartConfigPanel,
   defaultChartConfig,
   type ChartConfiguration,
 } from "~/components/code/ChartConfigPanel";
-import { CodeBlock } from "~/components/code/CodeBlock";
 import { QueryResultsChart } from "~/components/code/QueryResultsChart";
 import { autoFormatSQL, TSQLEditor } from "~/components/code/TSQLEditor";
 import { TSQLResultsTable } from "~/components/code/TSQLResultsTable";
@@ -35,14 +25,11 @@ import {
   ClientTabsList,
   ClientTabsTrigger,
 } from "~/components/primitives/ClientTabs";
-import { DateTime } from "~/components/primitives/DateTime";
 import { EnvironmentLabel } from "~/components/environments/EnvironmentLabel";
 import { PageBody, PageContainer } from "~/components/layout/AppLayout";
-import { Badge } from "~/components/primitives/Badge";
 import { Button } from "~/components/primitives/Buttons";
 import { Callout } from "~/components/primitives/Callout";
-import { CopyableText } from "~/components/primitives/CopyableText";
-import { Header2, Header3 } from "~/components/primitives/Headers";
+import { Header3 } from "~/components/primitives/Headers";
 import { NavBar, PageTitle } from "~/components/primitives/PageHeader";
 import { Paragraph } from "~/components/primitives/Paragraph";
 import {
@@ -50,7 +37,6 @@ import {
   PopoverArrowTrigger,
   PopoverContent,
   PopoverMenuItem,
-  PopoverTrigger,
 } from "~/components/primitives/Popover";
 import {
   ResizableHandle,
@@ -60,7 +46,6 @@ import {
 import { Select, SelectItem } from "~/components/primitives/Select";
 import { Spinner } from "~/components/primitives/Spinner";
 import { Switch } from "~/components/primitives/Switch";
-import { SimpleTooltip } from "~/components/primitives/Tooltip";
 import { useEnvironment } from "~/hooks/useEnvironment";
 import { useOrganization } from "~/hooks/useOrganizations";
 import { useProject } from "~/hooks/useProject";
@@ -69,11 +54,13 @@ import { findProjectBySlug } from "~/models/project.server";
 import { findEnvironmentBySlug } from "~/models/runtimeEnvironment.server";
 import { QueryPresenter, type QueryHistoryItem } from "~/presenters/v3/QueryPresenter.server";
 import { executeQuery, type QueryScope } from "~/services/queryService.server";
-import { requireUser } from "~/services/session.server";
 import { downloadFile, rowsToCSV, rowsToJSON } from "~/utils/dataExport";
 import { EnvironmentParamSchema } from "~/utils/pathBuilder";
 import { FEATURE_FLAG, validateFeatureFlagValue } from "~/v3/featureFlags.server";
 import { querySchemas } from "~/v3/querySchemas";
+import { QueryHelpSidebar } from "./QueryHelpSidebar";
+import { QueryHistoryPopover } from "./QueryHistoryPopover";
+import { formatQueryStats } from "./utils";
 
 async function hasQueryAccess(
   userId: string,
@@ -160,6 +147,8 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
   });
 };
 
+import { requireUser } from "~/services/session.server";
+
 const ActionSchema = z.object({
   query: z.string().min(1, "Query is required"),
   scope: z.enum(["environment", "project", "organization"]),
@@ -702,1469 +691,6 @@ function ExportResultsButton({
   );
 }
 
-// Example queries for the Examples tab
-const exampleQueries: Array<{
-  title: string;
-  description: string;
-  query: string;
-  scope: QueryScope;
-}> = [
-  {
-    title: "Failed runs by task (past 7 days)",
-    description: "Count of failed runs grouped by task identifier over the last 7 days.",
-    query: `SELECT
-  task_identifier,
-  count() AS failed_count
-FROM runs
-WHERE status = 'Failed'
-  AND triggered_at > now() - INTERVAL 7 DAY
-GROUP BY task_identifier
-ORDER BY failed_count DESC
-LIMIT 20`,
-    scope: "environment",
-  },
-  {
-    title: "Execution duration p50 by task (past 7d)",
-    description: "Median (50th percentile) execution duration for each task.",
-    query: `SELECT
-  task_identifier,
-  quantile(0.5)(execution_duration) AS p50_duration_ms
-FROM runs
-WHERE triggered_at > now() - INTERVAL 7 DAY
-  AND execution_duration IS NOT NULL
-GROUP BY task_identifier
-ORDER BY p50_duration_ms DESC
-LIMIT 20`,
-    scope: "environment",
-  },
-  {
-    title: "Most expensive 100 runs (past 7d)",
-    description: "Top 100 runs by cost over the last 7 days.",
-    query: `SELECT
-  run_id,
-  task_identifier,
-  status,
-  total_cost,
-  usage_duration,
-  machine,
-  created_at
-FROM runs
-WHERE triggered_at > now() - INTERVAL 7 DAY
-ORDER BY total_cost DESC
-LIMIT 100`,
-    scope: "environment",
-  },
-];
-
-function QueryHelpSidebar({
-  onTryExample,
-  onQueryGenerated,
-  getCurrentQuery,
-  activeTab,
-  onTabChange,
-  aiFixRequest,
-}: {
-  onTryExample: (query: string, scope: QueryScope) => void;
-  onQueryGenerated: (query: string) => void;
-  getCurrentQuery: () => string;
-  activeTab: string;
-  onTabChange: (tab: string) => void;
-  aiFixRequest: { prompt: string; key: number } | null;
-}) {
-  return (
-    <div className="grid h-full max-h-full grid-rows-[auto_1fr] overflow-hidden bg-background-bright">
-      <ClientTabs
-        value={activeTab}
-        onValueChange={onTabChange}
-        className="flex min-h-0 flex-col overflow-hidden pt-1"
-      >
-        <ClientTabsList variant="underline" className="mx-3 shrink-0">
-          <ClientTabsTrigger value="ai" variant="underline" layoutId="query-help-tabs">
-            <div className="flex items-center gap-0.5">
-              <AISparkleIcon className="size-4" /> AI
-            </div>
-          </ClientTabsTrigger>
-          <ClientTabsTrigger value="guide" variant="underline" layoutId="query-help-tabs">
-            Writing TRQL
-          </ClientTabsTrigger>
-          <ClientTabsTrigger value="schema" variant="underline" layoutId="query-help-tabs">
-            Table schema
-          </ClientTabsTrigger>
-          <ClientTabsTrigger value="examples" variant="underline" layoutId="query-help-tabs">
-            Examples
-          </ClientTabsTrigger>
-        </ClientTabsList>
-        <ClientTabsContent
-          value="ai"
-          className="min-h-0 flex-1 overflow-y-auto p-3 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600"
-        >
-          <AITabContent
-            onQueryGenerated={onQueryGenerated}
-            getCurrentQuery={getCurrentQuery}
-            aiFixRequest={aiFixRequest}
-          />
-        </ClientTabsContent>
-        <ClientTabsContent
-          value="guide"
-          className="min-h-0 flex-1 overflow-y-auto p-3 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600"
-        >
-          <TRQLGuideContent onTryExample={onTryExample} />
-        </ClientTabsContent>
-        <ClientTabsContent
-          value="schema"
-          className="min-h-0 flex-1 overflow-y-auto p-3 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600"
-        >
-          <TableSchemaContent />
-        </ClientTabsContent>
-        <ClientTabsContent
-          value="examples"
-          className="min-h-0 flex-1 overflow-y-auto p-3 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600"
-        >
-          <ExamplesContent onTryExample={onTryExample} />
-        </ClientTabsContent>
-      </ClientTabs>
-    </div>
-  );
-}
-
-function AITabContent({
-  onQueryGenerated,
-  getCurrentQuery,
-  aiFixRequest,
-}: {
-  onQueryGenerated: (query: string) => void;
-  getCurrentQuery: () => string;
-  aiFixRequest: { prompt: string; key: number } | null;
-}) {
-  const [examplePromptRequest, setExamplePromptRequest] = useState<{
-    prompt: string;
-    key: number;
-  } | null>(null);
-
-  // Use aiFixRequest if present, otherwise use example prompt request
-  const activeRequest = aiFixRequest ?? examplePromptRequest;
-
-  const examplePrompts = [
-    "Show me failed runs by hour for the past 7 days",
-    "Count of runs by status by hour for the past 48h",
-    "Top 50 most expensive runs this week",
-    "Average execution duration by task this week",
-    "Run counts by tag in the past 7 days",
-  ];
-
-  return (
-    <div className="space-y-2">
-      <AIQueryInput
-        onQueryGenerated={onQueryGenerated}
-        autoSubmitPrompt={activeRequest?.prompt}
-        autoSubmitKey={activeRequest?.key}
-        getCurrentQuery={getCurrentQuery}
-      />
-
-      <div className="pt-4">
-        <Header3 className="mb-2 text-text-bright">Example prompts</Header3>
-        <div className="space-y-2">
-          {examplePrompts.map((example) => (
-            <button
-              key={example}
-              type="button"
-              onClick={() => {
-                setExamplePromptRequest((prev) => ({
-                  prompt: example,
-                  key: (prev?.key ?? 0) + 1,
-                }));
-              }}
-              className="block w-full rounded-md border border-grid-dimmed bg-charcoal-800 px-3 py-2 text-left text-sm text-text-dimmed transition-colors hover:border-grid-bright hover:bg-charcoal-750 hover:text-text-bright"
-            >
-              {example}
-            </button>
-          ))}
-        </div>
-      </div>
-    </div>
-  );
-}
-
-/** A code block with an integrated "Try it" button */
-function TryableCodeBlock({
-  code,
-  onTry,
-  className,
-}: {
-  code: string;
-  onTry?: () => void;
-  className?: string;
-}) {
-  return (
-    <div className={className}>
-      <CodeBlock
-        code={code}
-        language="sql"
-        showLineNumbers={false}
-        showOpenInModal={false}
-        className={onTry ? "rounded-b-none border-b-0 text-xs" : "text-xs"}
-      />
-      {onTry && (
-        <div className="flex justify-end rounded-b-md border border-grid-bright p-1">
-          <Button variant="minimal/small" onClick={onTry} LeadingIcon={PlayIcon}>
-            Try it
-          </Button>
-        </div>
-      )}
-    </div>
-  );
-}
-
-function TRQLGuideContent({
-  onTryExample,
-}: {
-  onTryExample: (query: string, scope: QueryScope) => void;
-}) {
-  return (
-    <div className="space-y-6">
-      <Paragraph variant="small/bright">
-        TRQL is a query language for the Trigger platform. It is based on ClickHouse SQL and extends
-        it with additional features.
-      </Paragraph>
-      {/* Table of contents */}
-      <nav className="space-y-1 text-sm">
-        <a href="#basic" className="block text-text-link hover:underline">
-          Basic queries
-        </a>
-        <a href="#filtering" className="block text-text-link hover:underline">
-          Filtering with WHERE
-        </a>
-        <a href="#sorting" className="block text-text-link hover:underline">
-          Sorting &amp; limiting
-        </a>
-        <a href="#grouping" className="block text-text-link hover:underline">
-          Grouping &amp; aggregation
-        </a>
-        <a href="#functions" className="block text-text-link hover:underline">
-          Available functions
-        </a>
-      </nav>
-
-      {/* Basic queries */}
-      <section id="basic">
-        <Header3 className="mb-2 text-text-bright">Basic queries</Header3>
-        <Paragraph variant="small" className="mb-2 text-text-dimmed">
-          Select columns from a table. Use <code className="text-xs">*</code> to select all columns,
-          or list specific columns.
-        </Paragraph>
-        <TryableCodeBlock
-          code={`SELECT run_id, task_identifier, status
-FROM runs
-LIMIT 10`}
-          onTry={() =>
-            onTryExample(
-              `SELECT run_id, task_identifier, status
-FROM runs
-LIMIT 10`,
-              "environment"
-            )
-          }
-        />
-        <Paragraph variant="small" className="mt-3 text-text-dimmed">
-          Alias columns with <code className="text-xs">AS</code>:
-        </Paragraph>
-        <TryableCodeBlock
-          code={`SELECT task_identifier AS task, count() AS total
-FROM runs
-GROUP BY task`}
-          onTry={() =>
-            onTryExample(
-              `SELECT task_identifier AS task, count() AS total
-FROM runs
-GROUP BY task`,
-              "environment"
-            )
-          }
-          className="mt-1"
-        />
-      </section>
-
-      {/* Filtering */}
-      <section id="filtering">
-        <Header3 className="mb-2 text-text-bright">Filtering with WHERE</Header3>
-        <Paragraph variant="small" className="mb-2 text-text-dimmed">
-          Use comparison operators: <code className="text-xs">=</code>,{" "}
-          <code className="text-xs">!=</code>, <code className="text-xs">&lt;</code>,{" "}
-          <code className="text-xs">&gt;</code>, <code className="text-xs">&lt;=</code>,{" "}
-          <code className="text-xs">&gt;=</code>
-        </Paragraph>
-        <TryableCodeBlock
-          code={`SELECT * FROM runs
-WHERE status = 'Failed'
-  AND created_at > now() - INTERVAL 1 DAY`}
-          onTry={() =>
-            onTryExample(
-              `SELECT * FROM runs
-WHERE status = 'Failed'
-  AND created_at > now() - INTERVAL 1 DAY`,
-              "environment"
-            )
-          }
-        />
-        <Paragraph variant="small" className="mt-3 text-text-dimmed">
-          Other operators:
-        </Paragraph>
-        <TryableCodeBlock
-          code={`-- IN for multiple values
-WHERE status IN ('Failed', 'Crashed')
-
--- LIKE for pattern matching (% = wildcard)
-WHERE task_identifier LIKE 'email%'
-
--- ILIKE for case-insensitive matching
-WHERE task_identifier ILIKE '%send%'
-
--- BETWEEN for ranges
-WHERE created_at BETWEEN '2024-01-01' AND '2024-01-31'
-
--- NULL checks
-WHERE completed_at IS NOT NULL`}
-          className="mt-1"
-        />
-      </section>
-
-      {/* Sorting & limiting */}
-      <section id="sorting">
-        <Header3 className="mb-2 text-text-bright">Sorting &amp; limiting</Header3>
-        <Paragraph variant="small" className="mb-2 text-text-dimmed">
-          Sort results with <code className="text-xs">ORDER BY</code> (ASC/DESC). Limit results with{" "}
-          <code className="text-xs">LIMIT</code>.
-        </Paragraph>
-        <TryableCodeBlock
-          code={`SELECT run_id, compute_cost, created_at
-FROM runs
-ORDER BY compute_cost DESC, created_at ASC
-LIMIT 50`}
-          onTry={() =>
-            onTryExample(
-              `SELECT run_id, compute_cost, created_at
-FROM runs
-ORDER BY compute_cost DESC, created_at ASC
-LIMIT 50`,
-              "environment"
-            )
-          }
-        />
-      </section>
-
-      {/* Grouping */}
-      <section id="grouping">
-        <Header3 className="mb-2 text-text-bright">Grouping &amp; aggregation</Header3>
-        <Paragraph variant="small" className="mb-2 text-text-dimmed">
-          Use <code className="text-xs">GROUP BY</code> with aggregate functions. Filter groups with{" "}
-          <code className="text-xs">HAVING</code>.
-        </Paragraph>
-        <TryableCodeBlock
-          code={`SELECT
-  task_identifier,
-  status,
-  count() AS run_count,
-  avg(usage_duration) AS avg_duration
-FROM runs
-GROUP BY task_identifier, status
-HAVING run_count > 10
-ORDER BY run_count DESC`}
-          onTry={() =>
-            onTryExample(
-              `SELECT
-  task_identifier,
-  status,
-  count() AS run_count,
-  avg(usage_duration) AS avg_duration
-FROM runs
-GROUP BY task_identifier, status
-HAVING run_count > 10
-ORDER BY run_count DESC`,
-              "environment"
-            )
-          }
-        />
-      </section>
-
-      {/* Functions */}
-      <section id="functions">
-        <Header3 className="mb-2 text-text-bright">Available functions</Header3>
-        <Paragraph variant="extra-small" className="mb-3 text-text-dimmed">
-          Hover over any function to see its description and example usage.
-        </Paragraph>
-
-        <div className="space-y-4">
-          {/* Aggregate functions */}
-          <FunctionCategory
-            title="Aggregate functions"
-            functions={[
-              { name: "count()", desc: "Count rows", example: "count()" },
-              {
-                name: "countIf(col, cond)",
-                desc: "Count rows matching condition",
-                example: "countIf(status, status = 'Failed')",
-              },
-              {
-                name: "countDistinct(col)",
-                desc: "Count unique values",
-                example: "countDistinct(task_identifier)",
-              },
-              { name: "sum(col)", desc: "Sum of values", example: "sum(compute_cost)" },
-              {
-                name: "sumIf(col, cond)",
-                desc: "Sum values matching condition",
-                example: "sumIf(compute_cost, status = 'Completed')",
-              },
-              { name: "avg(col)", desc: "Average of values", example: "avg(usage_duration)" },
-              { name: "min(col)", desc: "Minimum value", example: "min(created_at)" },
-              { name: "max(col)", desc: "Maximum value", example: "max(compute_cost)" },
-              {
-                name: "uniq(col)",
-                desc: "Approximate unique count (fast)",
-                example: "uniq(task_identifier)",
-              },
-              { name: "uniqExact(col)", desc: "Exact unique count", example: "uniqExact(run_id)" },
-              {
-                name: "any(col)",
-                desc: "Any arbitrary value from group",
-                example: "any(task_identifier)",
-              },
-              {
-                name: "anyLast(col)",
-                desc: "Last value encountered in group",
-                example: "anyLast(status)",
-              },
-              {
-                name: "argMin(arg, val)",
-                desc: "Value of arg at minimum val",
-                example: "argMin(run_id, created_at)",
-              },
-              {
-                name: "argMax(arg, val)",
-                desc: "Value of arg at maximum val",
-                example: "argMax(run_id, compute_cost)",
-              },
-              {
-                name: "median(col)",
-                desc: "Median value (50th percentile)",
-                example: "median(usage_duration)",
-              },
-              {
-                name: "quantile(p)(col)",
-                desc: "Value at percentile p (0-1)",
-                example: "quantile(0.95)(usage_duration)",
-              },
-              {
-                name: "stddevPop(col)",
-                desc: "Population standard deviation",
-                example: "stddevPop(usage_duration)",
-              },
-              {
-                name: "stddevSamp(col)",
-                desc: "Sample standard deviation",
-                example: "stddevSamp(usage_duration)",
-              },
-              {
-                name: "groupArray(col)",
-                desc: "Collect values into array",
-                example: "groupArray(run_id)",
-              },
-              {
-                name: "groupUniqArray(col)",
-                desc: "Collect unique values into array",
-                example: "groupUniqArray(status)",
-              },
-              {
-                name: "topK(k)(col)",
-                desc: "Top k most frequent values",
-                example: "topK(5)(task_identifier)",
-              },
-            ]}
-          />
-
-          {/* String functions */}
-          <FunctionCategory
-            title="String functions"
-            functions={[
-              {
-                name: "length(s)",
-                desc: "Length of string in bytes",
-                example: "length(task_identifier)",
-              },
-              {
-                name: "lengthUTF8(s)",
-                desc: "Length in UTF-8 characters",
-                example: "lengthUTF8(task_identifier)",
-              },
-              { name: "empty(s)", desc: "Returns 1 if string is empty", example: "empty(error)" },
-              {
-                name: "notEmpty(s)",
-                desc: "Returns 1 if string is not empty",
-                example: "notEmpty(task_identifier)",
-              },
-              { name: "lower(s)", desc: "Convert to lowercase", example: "lower(status)" },
-              { name: "upper(s)", desc: "Convert to uppercase", example: "upper(status)" },
-              { name: "reverse(s)", desc: "Reverse string", example: "reverse(run_id)" },
-              {
-                name: "concat(s1, s2, ...)",
-                desc: "Concatenate strings",
-                example: "concat(task_identifier, '-', status)",
-              },
-              {
-                name: "substring(s, offset, len)",
-                desc: "Extract substring (1-indexed)",
-                example: "substring(run_id, 1, 10)",
-              },
-              { name: "left(s, n)", desc: "First n characters", example: "left(run_id, 10)" },
-              { name: "right(s, n)", desc: "Last n characters", example: "right(run_id, 8)" },
-              {
-                name: "trim(s)",
-                desc: "Remove leading/trailing whitespace",
-                example: "trim(task_identifier)",
-              },
-              {
-                name: "trimLeft(s)",
-                desc: "Remove leading whitespace",
-                example: "trimLeft(task_identifier)",
-              },
-              {
-                name: "trimRight(s)",
-                desc: "Remove trailing whitespace",
-                example: "trimRight(task_identifier)",
-              },
-              {
-                name: "leftPad(s, len, char)",
-                desc: "Pad string on left",
-                example: "leftPad(toString(attempt), 3, '0')",
-              },
-              {
-                name: "rightPad(s, len, char)",
-                desc: "Pad string on right",
-                example: "rightPad(status, 15, ' ')",
-              },
-              {
-                name: "startsWith(s, prefix)",
-                desc: "Check if starts with prefix",
-                example: "startsWith(task_identifier, 'email')",
-              },
-              {
-                name: "endsWith(s, suffix)",
-                desc: "Check if ends with suffix",
-                example: "endsWith(run_id, 'abc')",
-              },
-              {
-                name: "position(haystack, needle)",
-                desc: "Position of substring (0 if not found)",
-                example: "position(task_identifier, 'send')",
-              },
-              {
-                name: "replace(s, from, to)",
-                desc: "Replace all occurrences",
-                example: "replace(status, '_', '-')",
-              },
-              {
-                name: "replaceOne(s, from, to)",
-                desc: "Replace first occurrence",
-                example: "replaceOne(task_identifier, '-', '_')",
-              },
-              {
-                name: "replaceRegexpAll(s, pattern, repl)",
-                desc: "Replace using regex",
-                example: "replaceRegexpAll(run_id, '[0-9]', 'X')",
-              },
-              {
-                name: "match(s, pattern)",
-                desc: "Regex match (returns 0 or 1)",
-                example: "match(task_identifier, '^email.*')",
-              },
-              {
-                name: "extract(s, pattern)",
-                desc: "Extract first regex match",
-                example: "extract(task_identifier, '[a-z]+')",
-              },
-              {
-                name: "extractAll(s, pattern)",
-                desc: "Extract all regex matches as array",
-                example: "extractAll(task_identifier, '[a-z]+')",
-              },
-              {
-                name: "like(s, pattern)",
-                desc: "SQL LIKE pattern match",
-                example: "like(task_identifier, '%email%')",
-              },
-              {
-                name: "ilike(s, pattern)",
-                desc: "Case-insensitive LIKE",
-                example: "ilike(task_identifier, '%EMAIL%')",
-              },
-              {
-                name: "splitByChar(sep, s)",
-                desc: "Split by character",
-                example: "splitByChar('-', task_identifier)",
-              },
-              {
-                name: "splitByString(sep, s)",
-                desc: "Split by string",
-                example: "splitByString('::', task_identifier)",
-              },
-              {
-                name: "arrayStringConcat(arr, sep)",
-                desc: "Join array to string",
-                example: "arrayStringConcat(tags, ', ')",
-              },
-              {
-                name: "base64Encode(s)",
-                desc: "Encode to base64",
-                example: "base64Encode(run_id)",
-              },
-              {
-                name: "base64Decode(s)",
-                desc: "Decode from base64",
-                example: "base64Decode(encoded_value)",
-              },
-              { name: "repeat(s, n)", desc: "Repeat string n times", example: "repeat('-', 10)" },
-              {
-                name: "format(pattern, args...)",
-                desc: "Format string with placeholders",
-                example: "format('{} - {}', task_identifier, status)",
-              },
-            ]}
-          />
-
-          {/* Date/time functions */}
-          <FunctionCategory
-            title="Date/time functions"
-            functions={[
-              { name: "now()", desc: "Current date and time", example: "now()" },
-              { name: "today()", desc: "Current date", example: "today()" },
-              { name: "yesterday()", desc: "Yesterday's date", example: "yesterday()" },
-              { name: "toYear(dt)", desc: "Extract year", example: "toYear(created_at)" },
-              {
-                name: "toQuarter(dt)",
-                desc: "Extract quarter (1-4)",
-                example: "toQuarter(created_at)",
-              },
-              { name: "toMonth(dt)", desc: "Extract month (1-12)", example: "toMonth(created_at)" },
-              {
-                name: "toDayOfMonth(dt)",
-                desc: "Extract day of month (1-31)",
-                example: "toDayOfMonth(created_at)",
-              },
-              {
-                name: "toDayOfWeek(dt)",
-                desc: "Day of week (1=Monday, 7=Sunday)",
-                example: "toDayOfWeek(created_at)",
-              },
-              { name: "toHour(dt)", desc: "Extract hour (0-23)", example: "toHour(created_at)" },
-              {
-                name: "toMinute(dt)",
-                desc: "Extract minute (0-59)",
-                example: "toMinute(created_at)",
-              },
-              {
-                name: "toSecond(dt)",
-                desc: "Extract second (0-59)",
-                example: "toSecond(created_at)",
-              },
-              {
-                name: "toDate(dt)",
-                desc: "Convert to date (strip time)",
-                example: "toDate(created_at)",
-              },
-              {
-                name: "toDateTime(x)",
-                desc: "Convert to datetime",
-                example: "toDateTime('2024-01-15 10:30:00')",
-              },
-              {
-                name: "toStartOfYear(dt)",
-                desc: "First day of year",
-                example: "toStartOfYear(created_at)",
-              },
-              {
-                name: "toStartOfQuarter(dt)",
-                desc: "First day of quarter",
-                example: "toStartOfQuarter(created_at)",
-              },
-              {
-                name: "toStartOfMonth(dt)",
-                desc: "First day of month",
-                example: "toStartOfMonth(created_at)",
-              },
-              {
-                name: "toStartOfWeek(dt)",
-                desc: "Start of week (Monday)",
-                example: "toStartOfWeek(created_at)",
-              },
-              { name: "toMonday(dt)", desc: "Monday of the week", example: "toMonday(created_at)" },
-              {
-                name: "toStartOfDay(dt)",
-                desc: "Start of day (midnight)",
-                example: "toStartOfDay(created_at)",
-              },
-              {
-                name: "toStartOfHour(dt)",
-                desc: "Start of hour",
-                example: "toStartOfHour(created_at)",
-              },
-              {
-                name: "toStartOfMinute(dt)",
-                desc: "Start of minute",
-                example: "toStartOfMinute(created_at)",
-              },
-              {
-                name: "toStartOfFiveMinutes(dt)",
-                desc: "Round to 5-minute interval",
-                example: "toStartOfFiveMinutes(created_at)",
-              },
-              {
-                name: "toStartOfFifteenMinutes(dt)",
-                desc: "Round to 15-minute interval",
-                example: "toStartOfFifteenMinutes(created_at)",
-              },
-              {
-                name: "toStartOfInterval(dt, INTERVAL n unit)",
-                desc: "Round to custom interval",
-                example: "toStartOfInterval(created_at, INTERVAL 30 MINUTE)",
-              },
-              {
-                name: "toUnixTimestamp(dt)",
-                desc: "Convert to Unix timestamp",
-                example: "toUnixTimestamp(created_at)",
-              },
-              {
-                name: "dateDiff(unit, start, end)",
-                desc: "Difference between dates",
-                example: "dateDiff('minute', started_at, completed_at)",
-              },
-              {
-                name: "dateAdd(unit, n, dt)",
-                desc: "Add time to date",
-                example: "dateAdd('day', 7, created_at)",
-              },
-              {
-                name: "dateSub(unit, n, dt)",
-                desc: "Subtract time from date",
-                example: "dateSub('hour', 1, created_at)",
-              },
-              {
-                name: "dateTrunc(unit, dt)",
-                desc: "Truncate to unit",
-                example: "dateTrunc('month', created_at)",
-              },
-              { name: "addDays(dt, n)", desc: "Add n days", example: "addDays(created_at, 7)" },
-              { name: "addHours(dt, n)", desc: "Add n hours", example: "addHours(created_at, 24)" },
-              {
-                name: "addMinutes(dt, n)",
-                desc: "Add n minutes",
-                example: "addMinutes(created_at, 30)",
-              },
-              {
-                name: "subtractDays(dt, n)",
-                desc: "Subtract n days",
-                example: "subtractDays(now(), 7)",
-              },
-              {
-                name: "subtractHours(dt, n)",
-                desc: "Subtract n hours",
-                example: "subtractHours(now(), 1)",
-              },
-              {
-                name: "formatDateTime(dt, format)",
-                desc: "Format datetime as string",
-                example: "formatDateTime(created_at, '%Y-%m-%d %H:%M')",
-              },
-              {
-                name: "parseDateTimeBestEffort(s)",
-                desc: "Parse string to datetime",
-                example: "parseDateTimeBestEffort('2024-01-15')",
-              },
-              {
-                name: "toTimeZone(dt, tz)",
-                desc: "Convert to timezone",
-                example: "toTimeZone(created_at, 'America/New_York')",
-              },
-            ]}
-          />
-
-          {/* Conditional & null functions */}
-          <FunctionCategory
-            title="Conditional & null functions"
-            functions={[
-              {
-                name: "if(cond, then, else)",
-                desc: "Conditional expression",
-                example: "if(status = 'Failed', 1, 0)",
-              },
-              {
-                name: "multiIf(c1, t1, c2, t2, ..., else)",
-                desc: "Multiple conditions (like CASE)",
-                example: "multiIf(status = 'Completed', 'ok', status = 'Failed', 'bad', 'other')",
-              },
-              {
-                name: "coalesce(a, b, ...)",
-                desc: "First non-null value",
-                example: "coalesce(completed_at, created_at)",
-              },
-              {
-                name: "ifNull(x, alt)",
-                desc: "Return alt if x is null",
-                example: "ifNull(completed_at, now())",
-              },
-              {
-                name: "nullIf(x, y)",
-                desc: "Return null if x equals y",
-                example: "nullIf(status, 'Pending')",
-              },
-              {
-                name: "isNull(x)",
-                desc: "Check if value is null",
-                example: "isNull(completed_at)",
-              },
-              {
-                name: "isNotNull(x)",
-                desc: "Check if value is not null",
-                example: "isNotNull(completed_at)",
-              },
-              {
-                name: "assumeNotNull(x)",
-                desc: "Treat nullable as non-null",
-                example: "assumeNotNull(completed_at)",
-              },
-            ]}
-          />
-
-          {/* Arithmetic & math */}
-          <FunctionCategory
-            title="Arithmetic & math functions"
-            functions={[
-              {
-                name: "plus(a, b)",
-                desc: "Addition (a + b)",
-                example: "plus(compute_cost, invocation_cost)",
-              },
-              {
-                name: "minus(a, b)",
-                desc: "Subtraction (a - b)",
-                example: "minus(completed_at, started_at)",
-              },
-              {
-                name: "multiply(a, b)",
-                desc: "Multiplication (a * b)",
-                example: "multiply(usage_duration, 2)",
-              },
-              {
-                name: "divide(a, b)",
-                desc: "Division (a / b)",
-                example: "divide(compute_cost, usage_duration)",
-              },
-              {
-                name: "intDiv(a, b)",
-                desc: "Integer division",
-                example: "intDiv(usage_duration, 1000)",
-              },
-              { name: "modulo(a, b)", desc: "Modulo (a % b)", example: "modulo(attempt, 2)" },
-              { name: "abs(x)", desc: "Absolute value", example: "abs(compute_cost)" },
-              { name: "sign(x)", desc: "Sign (-1, 0, or 1)", example: "sign(compute_cost)" },
-              { name: "sqrt(x)", desc: "Square root", example: "sqrt(usage_duration)" },
-              { name: "pow(x, y)", desc: "Power (x^y)", example: "pow(2, attempt)" },
-              {
-                name: "round(x, n)",
-                desc: "Round to n decimal places",
-                example: "round(compute_cost, 4)",
-              },
-              { name: "floor(x)", desc: "Round down", example: "floor(compute_cost * 100)" },
-              { name: "ceil(x)", desc: "Round up", example: "ceil(compute_cost * 100)" },
-              { name: "trunc(x)", desc: "Truncate towards zero", example: "trunc(compute_cost)" },
-              { name: "exp(x)", desc: "Exponential (e^x)", example: "exp(1)" },
-              { name: "log(x)", desc: "Natural logarithm", example: "log(usage_duration)" },
-              { name: "log10(x)", desc: "Base-10 logarithm", example: "log10(usage_duration)" },
-              {
-                name: "least(a, b)",
-                desc: "Minimum of two values",
-                example: "least(usage_duration, 10000)",
-              },
-              {
-                name: "greatest(a, b)",
-                desc: "Maximum of two values",
-                example: "greatest(usage_duration, 0)",
-              },
-            ]}
-          />
-
-          {/* Array functions */}
-          <FunctionCategory
-            title="Array functions"
-            functions={[
-              {
-                name: "array(a, b, ...)",
-                desc: "Create array from values",
-                example: "array('a', 'b', 'c')",
-              },
-              {
-                name: "range(start, end)",
-                desc: "Generate array of numbers",
-                example: "range(1, 10)",
-              },
-              { name: "length(arr)", desc: "Number of elements", example: "length(tags)" },
-              { name: "empty(arr)", desc: "Check if array is empty", example: "empty(tags)" },
-              {
-                name: "has(arr, elem)",
-                desc: "Check if array contains element",
-                example: "has(tags, 'important')",
-              },
-              {
-                name: "hasAll(arr1, arr2)",
-                desc: "Check if arr1 contains all of arr2",
-                example: "hasAll(tags, array('a', 'b'))",
-              },
-              {
-                name: "hasAny(arr1, arr2)",
-                desc: "Check if arr1 contains any of arr2",
-                example: "hasAny(tags, array('urgent', 'high'))",
-              },
-              {
-                name: "indexOf(arr, elem)",
-                desc: "Index of element (1-based, 0 if not found)",
-                example: "indexOf(tags, 'important')",
-              },
-              {
-                name: "arrayElement(arr, n)",
-                desc: "Get nth element (1-based)",
-                example: "arrayElement(tags, 1)",
-              },
-              { name: "arrayJoin(arr)", desc: "Expand array to rows", example: "arrayJoin(tags)" },
-              {
-                name: "arraySlice(arr, offset, length)",
-                desc: "Get slice of array",
-                example: "arraySlice(tags, 1, 3)",
-              },
-              {
-                name: "arrayPushBack(arr, elem)",
-                desc: "Append element to array",
-                example: "arrayPushBack(tags, 'new')",
-              },
-              {
-                name: "arrayPushFront(arr, elem)",
-                desc: "Prepend element to array",
-                example: "arrayPushFront(tags, 'first')",
-              },
-              { name: "arraySort(arr)", desc: "Sort array ascending", example: "arraySort(tags)" },
-              {
-                name: "arrayReverseSort(arr)",
-                desc: "Sort array descending",
-                example: "arrayReverseSort(tags)",
-              },
-              {
-                name: "arrayReverse(arr)",
-                desc: "Reverse array order",
-                example: "arrayReverse(tags)",
-              },
-              { name: "arrayUniq(arr)", desc: "Remove duplicates", example: "arrayUniq(tags)" },
-              {
-                name: "arrayDistinct(arr)",
-                desc: "Remove duplicates (preserves order)",
-                example: "arrayDistinct(tags)",
-              },
-              {
-                name: "arrayFlatten(arr)",
-                desc: "Flatten nested arrays",
-                example: "arrayFlatten([[1,2], [3,4]])",
-              },
-              {
-                name: "arrayFilter(func, arr)",
-                desc: "Filter array by condition",
-                example: "arrayFilter(x -> x > 0, arr)",
-              },
-              {
-                name: "arrayMap(func, arr)",
-                desc: "Transform each element",
-                example: "arrayMap(x -> x * 2, arr)",
-              },
-              {
-                name: "arrayMin(arr)",
-                desc: "Minimum element",
-                example: "arrayMin(array(1, 2, 3))",
-              },
-              {
-                name: "arrayMax(arr)",
-                desc: "Maximum element",
-                example: "arrayMax(array(1, 2, 3))",
-              },
-              {
-                name: "arraySum(arr)",
-                desc: "Sum of elements",
-                example: "arraySum(array(1, 2, 3))",
-              },
-              {
-                name: "arrayAvg(arr)",
-                desc: "Average of elements",
-                example: "arrayAvg(array(1, 2, 3))",
-              },
-            ]}
-          />
-
-          {/* JSON functions */}
-          <FunctionCategory
-            title="JSON functions"
-            functions={[
-              {
-                name: "JSONHas(json, key)",
-                desc: "Check if key exists",
-                example: "JSONHas(output, 'result')",
-              },
-              {
-                name: "JSONLength(json)",
-                desc: "Number of elements/keys",
-                example: "JSONLength(output)",
-              },
-              {
-                name: "JSONType(json, key)",
-                desc: "Type of JSON value",
-                example: "JSONType(output, 'data')",
-              },
-              {
-                name: "JSONExtractString(json, key)",
-                desc: "Extract as string",
-                example: "JSONExtractString(output, 'message')",
-              },
-              {
-                name: "JSONExtractInt(json, key)",
-                desc: "Extract as integer",
-                example: "JSONExtractInt(output, 'count')",
-              },
-              {
-                name: "JSONExtractFloat(json, key)",
-                desc: "Extract as float",
-                example: "JSONExtractFloat(output, 'score')",
-              },
-              {
-                name: "JSONExtractBool(json, key)",
-                desc: "Extract as boolean",
-                example: "JSONExtractBool(output, 'success')",
-              },
-              {
-                name: "JSONExtractRaw(json, key)",
-                desc: "Extract as raw JSON string",
-                example: "JSONExtractRaw(output, 'data')",
-              },
-              {
-                name: "JSONExtractArrayRaw(json, key)",
-                desc: "Extract array as strings",
-                example: "JSONExtractArrayRaw(output, 'items')",
-              },
-              {
-                name: "JSONExtractKeys(json)",
-                desc: "Get all keys as array",
-                example: "JSONExtractKeys(output)",
-              },
-              {
-                name: "toJSONString(value)",
-                desc: "Convert to JSON string",
-                example: "toJSONString(map('a', 1))",
-              },
-            ]}
-          />
-
-          {/* Type conversion */}
-          <FunctionCategory
-            title="Type conversion functions"
-            functions={[
-              { name: "toString(x)", desc: "Convert to string", example: "toString(attempt)" },
-              { name: "toInt32(x)", desc: "Convert to 32-bit integer", example: "toInt32('123')" },
-              {
-                name: "toInt64(x)",
-                desc: "Convert to 64-bit integer",
-                example: "toInt64(usage_duration)",
-              },
-              {
-                name: "toFloat64(x)",
-                desc: "Convert to 64-bit float",
-                example: "toFloat64('3.14')",
-              },
-              {
-                name: "toDecimal64(x, scale)",
-                desc: "Convert to decimal",
-                example: "toDecimal64(compute_cost, 6)",
-              },
-              { name: "toDate(x)", desc: "Convert to date", example: "toDate('2024-01-15')" },
-              {
-                name: "toDateOrNull(x)",
-                desc: "Convert to date (null on error)",
-                example: "toDateOrNull(some_string)",
-              },
-              {
-                name: "toDateTime(x)",
-                desc: "Convert to datetime",
-                example: "toDateTime('2024-01-15 10:30:00')",
-              },
-              {
-                name: "toDateTimeOrNull(x)",
-                desc: "Convert to datetime (null on error)",
-                example: "toDateTimeOrNull(some_string)",
-              },
-              { name: "toUUID(x)", desc: "Convert to UUID", example: "toUUID(uuid_string)" },
-              {
-                name: "toTypeName(x)",
-                desc: "Get type name as string",
-                example: "toTypeName(created_at)",
-              },
-            ]}
-          />
-
-          {/* Comparison & logical */}
-          <FunctionCategory
-            title="Comparison & logical functions"
-            functions={[
-              {
-                name: "equals(a, b)",
-                desc: "Equal (a = b)",
-                example: "equals(status, 'Completed')",
-              },
-              {
-                name: "notEquals(a, b)",
-                desc: "Not equal (a != b)",
-                example: "notEquals(status, 'Failed')",
-              },
-              { name: "less(a, b)", desc: "Less than (a < b)", example: "less(attempt, 3)" },
-              {
-                name: "greater(a, b)",
-                desc: "Greater than (a > b)",
-                example: "greater(usage_duration, 1000)",
-              },
-              {
-                name: "lessOrEquals(a, b)",
-                desc: "Less than or equal (a <= b)",
-                example: "lessOrEquals(attempt, 5)",
-              },
-              {
-                name: "greaterOrEquals(a, b)",
-                desc: "Greater than or equal (a >= b)",
-                example: "greaterOrEquals(usage_duration, 0)",
-              },
-              {
-                name: "and(a, b, ...)",
-                desc: "Logical AND",
-                example: "and(status = 'Failed', attempt > 1)",
-              },
-              {
-                name: "or(a, b, ...)",
-                desc: "Logical OR",
-                example: "or(status = 'Failed', status = 'Crashed')",
-              },
-              { name: "not(x)", desc: "Logical NOT", example: "not(is_test)" },
-              {
-                name: "in(x, set)",
-                desc: "Check if x is in set",
-                example: "in(status, ('Failed', 'Crashed'))",
-              },
-            ]}
-          />
-
-          {/* Hash functions */}
-          <FunctionCategory
-            title="Hash functions"
-            functions={[
-              { name: "MD5(s)", desc: "MD5 hash (16 bytes)", example: "hex(MD5(run_id))" },
-              {
-                name: "SHA256(s)",
-                desc: "SHA-256 hash (32 bytes)",
-                example: "hex(SHA256(run_id))",
-              },
-              {
-                name: "sipHash64(s)",
-                desc: "Fast 64-bit hash",
-                example: "sipHash64(task_identifier)",
-              },
-              { name: "cityHash64(s)", desc: "CityHash 64-bit", example: "cityHash64(run_id)" },
-              { name: "xxHash64(s)", desc: "xxHash 64-bit", example: "xxHash64(task_identifier)" },
-              { name: "hex(s)", desc: "Convert to hex string", example: "hex(MD5(run_id))" },
-              { name: "unhex(s)", desc: "Convert from hex string", example: "unhex('48656C6C6F')" },
-            ]}
-          />
-
-          {/* UUID & utility */}
-          <FunctionCategory
-            title="UUID & utility functions"
-            functions={[
-              {
-                name: "generateUUIDv4()",
-                desc: "Generate random UUID",
-                example: "generateUUIDv4()",
-              },
-              {
-                name: "isFinite(x)",
-                desc: "Check if number is finite",
-                example: "isFinite(compute_cost)",
-              },
-              { name: "isNaN(x)", desc: "Check if value is NaN", example: "isNaN(compute_cost)" },
-              {
-                name: "formatReadableSize(bytes)",
-                desc: "Format bytes as human-readable",
-                example: "formatReadableSize(1024)",
-              },
-              {
-                name: "formatReadableQuantity(n)",
-                desc: "Format number with suffixes (K, M, etc)",
-                example: "formatReadableQuantity(1500000)",
-              },
-              {
-                name: "formatReadableTimeDelta(seconds)",
-                desc: "Format seconds as duration",
-                example: "formatReadableTimeDelta(3661)",
-              },
-              {
-                name: "runningDifference(col)",
-                desc: "Difference from previous row",
-                example: "runningDifference(usage_duration)",
-              },
-              {
-                name: "neighbor(col, offset)",
-                desc: "Value from row at offset",
-                example: "neighbor(created_at, -1)",
-              },
-            ]}
-          />
-
-          {/* Tuple & map functions */}
-          <FunctionCategory
-            title="Tuple & map functions"
-            functions={[
-              {
-                name: "tuple(a, b, ...)",
-                desc: "Create tuple",
-                example: "tuple(task_identifier, status)",
-              },
-              {
-                name: "tupleElement(tuple, n)",
-                desc: "Get nth element (1-based)",
-                example: "tupleElement(t, 1)",
-              },
-              {
-                name: "map(k1, v1, k2, v2, ...)",
-                desc: "Create map from key-value pairs",
-                example: "map('a', 1, 'b', 2)",
-              },
-              {
-                name: "mapFromArrays(keys, values)",
-                desc: "Create map from two arrays",
-                example: "mapFromArrays(['a', 'b'], [1, 2])",
-              },
-              {
-                name: "mapContains(map, key)",
-                desc: "Check if map has key",
-                example: "mapContains(m, 'key')",
-              },
-              { name: "mapKeys(map)", desc: "Get all keys as array", example: "mapKeys(m)" },
-              { name: "mapValues(map)", desc: "Get all values as array", example: "mapValues(m)" },
-            ]}
-          />
-
-          {/* Window functions */}
-          <FunctionCategory
-            title="Window functions"
-            functions={[
-              {
-                name: "row_number()",
-                desc: "Row number within partition",
-                example: "row_number() OVER (ORDER BY created_at)",
-              },
-              {
-                name: "rank()",
-                desc: "Rank with gaps for ties",
-                example: "rank() OVER (ORDER BY compute_cost DESC)",
-              },
-              {
-                name: "dense_rank()",
-                desc: "Rank without gaps",
-                example: "dense_rank() OVER (ORDER BY compute_cost DESC)",
-              },
-              {
-                name: "first_value(col)",
-                desc: "First value in window",
-                example: "first_value(status) OVER (PARTITION BY task_identifier)",
-              },
-              {
-                name: "last_value(col)",
-                desc: "Last value in window",
-                example: "last_value(status) OVER (PARTITION BY task_identifier)",
-              },
-              {
-                name: "lag(col, offset, default)",
-                desc: "Value from previous row",
-                example: "lag(created_at, 1) OVER (ORDER BY created_at)",
-              },
-              {
-                name: "lead(col, offset, default)",
-                desc: "Value from next row",
-                example: "lead(created_at, 1) OVER (ORDER BY created_at)",
-              },
-            ]}
-          />
-
-          {/* Interval functions */}
-          <FunctionCategory
-            title="Interval functions"
-            functions={[
-              {
-                name: "toIntervalSecond(n)",
-                desc: "Create n-second interval",
-                example: "toIntervalSecond(30)",
-              },
-              {
-                name: "toIntervalMinute(n)",
-                desc: "Create n-minute interval",
-                example: "toIntervalMinute(5)",
-              },
-              {
-                name: "toIntervalHour(n)",
-                desc: "Create n-hour interval",
-                example: "toIntervalHour(1)",
-              },
-              {
-                name: "toIntervalDay(n)",
-                desc: "Create n-day interval",
-                example: "toIntervalDay(7)",
-              },
-              {
-                name: "toIntervalWeek(n)",
-                desc: "Create n-week interval",
-                example: "toIntervalWeek(2)",
-              },
-              {
-                name: "toIntervalMonth(n)",
-                desc: "Create n-month interval",
-                example: "toIntervalMonth(1)",
-              },
-              {
-                name: "toIntervalYear(n)",
-                desc: "Create n-year interval",
-                example: "toIntervalYear(1)",
-              },
-            ]}
-          />
-        </div>
-      </section>
-    </div>
-  );
-}
-
-type FunctionDoc = { name: string; desc: string; example: string };
-
-function FunctionCategory({ title, functions }: { title: string; functions: FunctionDoc[] }) {
-  return (
-    <div>
-      <Paragraph variant="small/bright" className="mb-1">
-        {title}
-      </Paragraph>
-      <div className="flex flex-wrap gap-1">
-        {functions.map((fn) => (
-          <SimpleTooltip
-            key={fn.name}
-            button={
-              <code className="cursor-help rounded bg-charcoal-750 px-1.5 py-0.5 font-mono text-xxs text-indigo-400 transition-colors hover:bg-charcoal-700 hover:text-indigo-300">
-                {fn.name}
-              </code>
-            }
-            content={
-              <div className="max-w-xs space-y-1">
-                <div className="text-text-bright">{fn.desc}</div>
-                <code className="block rounded bg-charcoal-800 px-1.5 py-1 font-mono text-xxs text-indigo-300">
-                  {fn.example}
-                </code>
-              </div>
-            }
-          />
-        ))}
-      </div>
-    </div>
-  );
-}
-
-function TableSchemaContent() {
-  return (
-    <div>
-      {querySchemas.map((table) => (
-        <div key={table.name} className="mb-6">
-          <div className="mb-2">
-            <Header3 className="font-mono text-text-bright">{table.name}</Header3>
-            {table.description && (
-              <Paragraph variant="small" className="mt-1 text-text-dimmed">
-                {table.description}
-              </Paragraph>
-            )}
-          </div>
-          <div className="flex flex-col gap-2 divide-y divide-grid-dimmed">
-            {Object.values(table.columns).map((col) => (
-              <ColumnHelpItem key={col.name} col={col} />
-            ))}
-          </div>
-        </div>
-      ))}
-    </div>
-  );
-}
-
-function ExamplesContent({
-  onTryExample,
-}: {
-  onTryExample: (query: string, scope: QueryScope) => void;
-}) {
-  return (
-    <div className="space-y-6">
-      {exampleQueries.map((example) => (
-        <div key={example.title}>
-          <Header3 className="mb-1 text-text-bright">{example.title}</Header3>
-          <Paragraph variant="small" className="mb-2 text-text-dimmed">
-            {example.description}
-          </Paragraph>
-          <TryableCodeBlock
-            code={example.query}
-            onTry={() => onTryExample(example.query, example.scope)}
-          />
-        </div>
-      ))}
-    </div>
-  );
-}
-
-function ColumnHelpItem({ col }: { col: ColumnSchema }) {
-  return (
-    <div className="pt-1">
-      <div className="flex items-center gap-2">
-        <CopyableText value={col.name} className="text-sm text-indigo-400" />
-        <Badge className="font-mono text-xxs">{col.type}</Badge>
-      </div>
-      {col.description && (
-        <Paragraph variant="extra-small" className="mt-1 text-text-dimmed">
-          {col.description}
-        </Paragraph>
-      )}
-      {col.example && (
-        <div className="mt-1 flex items-baseline gap-0.5">
-          <span className="text-xs text-text-dimmed">Example:</span>
-          <CopyableText
-            value={col.example}
-            className="rounded-sm bg-charcoal-750 px-1.5 py-0.5 font-mono text-xxs"
-          />
-        </div>
-      )}
-      {col.allowedValues && col.allowedValues.length > 0 && (
-        <div className="mt-0.5 flex flex-wrap gap-1">
-          <span className="text-xs text-text-dimmed">Available options:</span>
-          {col.allowedValues.map((value) => (
-            <CopyableText
-              key={value}
-              value={col.valueMap?.[value] ?? value}
-              className="rounded-sm bg-charcoal-750 px-1.5 py-0.5 font-mono text-xxs"
-            />
-          ))}
-        </div>
-      )}
-    </div>
-  );
-}
-
 function ScopeItem({ scope }: { scope: QueryScope }) {
   const organization = useOrganization();
   const project = useProject();
@@ -2181,161 +707,3 @@ function ScopeItem({ scope }: { scope: QueryScope }) {
       return scope;
   }
 }
-
-function formatQueryStats(stats: {
-  read_rows: string;
-  read_bytes: string;
-  elapsed_ns: string;
-  byte_seconds: string;
-}): string {
-  const readRows = parseInt(stats.read_rows, 10);
-  const readBytes = parseInt(stats.read_bytes, 10);
-  const elapsedNs = parseInt(stats.elapsed_ns, 10);
-  const byteSeconds = parseFloat(stats.byte_seconds);
-
-  const elapsedMs = elapsedNs / 1_000_000;
-  const formattedTime =
-    elapsedMs < 1000 ? `${elapsedMs.toFixed(1)}ms` : `${(elapsedMs / 1000).toFixed(2)}s`;
-  const formattedBytes = formatBytes(readBytes);
-
-  return `${readRows.toLocaleString()} rows read · ${formattedBytes} · ${formattedTime} · ${formatBytes(
-    byteSeconds
-  )}s`;
-}
-
-function formatBytes(bytes: number): string {
-  if (bytes === 0) return "0 B";
-  if (bytes < 0) return "-" + formatBytes(-bytes);
-  const k = 1024;
-  const sizes = ["B", "KB", "MB", "GB"];
-  const i = Math.min(Math.floor(Math.log(bytes) / Math.log(k)), sizes.length - 1);
-  return `${parseFloat((bytes / Math.pow(k, i)).toFixed(1))} ${sizes[i]}`;
-}
-
-const SQL_KEYWORDS = [
-  "SELECT",
-  "FROM",
-  "WHERE",
-  "ORDER BY",
-  "LIMIT",
-  "GROUP BY",
-  "HAVING",
-  "JOIN",
-  "LEFT JOIN",
-  "RIGHT JOIN",
-  "INNER JOIN",
-  "OUTER JOIN",
-  "AND",
-  "OR",
-  "AS",
-  "ON",
-  "IN",
-  "NOT",
-  "NULL",
-  "DESC",
-  "ASC",
-  "DISTINCT",
-  "COUNT",
-  "SUM",
-  "AVG",
-  "MIN",
-  "MAX",
-];
-
-function highlightSQL(query: string): React.ReactNode[] {
-  // Normalize whitespace for display (let CSS line-clamp handle truncation)
-  const normalized = query.replace(/\s+/g, " ").slice(0, 200);
-  const suffix = "";
-
-  // Create a regex pattern that matches keywords as whole words (case insensitive)
-  const keywordPattern = new RegExp(
-    `\\b(${SQL_KEYWORDS.map((k) => k.replace(/\s+/g, "\\s+")).join("|")})\\b`,
-    "gi"
-  );
-
-  const parts: React.ReactNode[] = [];
-  let lastIndex = 0;
-  let match;
-
-  while ((match = keywordPattern.exec(normalized)) !== null) {
-    // Add text before the match
-    if (match.index > lastIndex) {
-      parts.push(normalized.slice(lastIndex, match.index));
-    }
-    // Add the highlighted keyword
-    parts.push(
-      <span key={match.index} className="text-[#c678dd]">
-        {match[0]}
-      </span>
-    );
-    lastIndex = keywordPattern.lastIndex;
-  }
-
-  // Add remaining text
-  if (lastIndex < normalized.length) {
-    parts.push(normalized.slice(lastIndex));
-  }
-
-  if (suffix) {
-    parts.push(suffix);
-  }
-
-  return parts;
-}
-
-function QueryHistoryPopover({
-  history,
-  onQuerySelected,
-}: {
-  history: QueryHistoryItem[];
-  onQuerySelected: (item: QueryHistoryItem) => void;
-}) {
-  const [isOpen, setIsOpen] = useState(false);
-
-  return (
-    <Popover open={isOpen} onOpenChange={setIsOpen}>
-      <PopoverTrigger asChild>
-        <Button
-          type="button"
-          variant="tertiary/small"
-          LeadingIcon={ClockRotateLeftIcon}
-          disabled={history.length === 0}
-        >
-          History
-        </Button>
-      </PopoverTrigger>
-      <PopoverContent
-        className="w-[400px] min-w-0 overflow-hidden p-0"
-        align="start"
-        sideOffset={6}
-      >
-        <div className="max-h-80 overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
-          <div className="p-1">
-            {history.map((item) => (
-              <button
-                key={item.id}
-                type="button"
-                onClick={() => {
-                  onQuerySelected(item);
-                  setIsOpen(false);
-                }}
-                className="flex w-full items-center gap-2 rounded-sm px-2 py-2 outline-none transition-colors focus-custom hover:bg-charcoal-900"
-              >
-                <div className="flex flex-1 flex-col items-start overflow-hidden">
-                  <p className="line-clamp-2 w-full break-words text-left font-mono text-xs text-[#9b99ff]">
-                    {highlightSQL(item.query)}
-                  </p>
-                  <div className="flex items-center gap-2 text-xs text-text-dimmed">
-                    <DateTime date={item.createdAt} showTooltip={false} />
-                    {item.userName && <span>· {item.userName}</span>}
-                    <span className="capitalize">· {item.scope}</span>
-                  </div>
-                </div>
-              </button>
-            ))}
-          </div>
-        </div>
-      </PopoverContent>
-    </Popover>
-  );
-}
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/utils.ts b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/utils.ts
new file mode 100644
index 0000000000..cee86bd6a3
--- /dev/null
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/utils.ts
@@ -0,0 +1,30 @@
+export function formatQueryStats(stats: {
+  read_rows: string;
+  read_bytes: string;
+  elapsed_ns: string;
+  byte_seconds: string;
+}): string {
+  const readRows = parseInt(stats.read_rows, 10);
+  const readBytes = parseInt(stats.read_bytes, 10);
+  const elapsedNs = parseInt(stats.elapsed_ns, 10);
+  const byteSeconds = parseFloat(stats.byte_seconds);
+
+  const elapsedMs = elapsedNs / 1_000_000;
+  const formattedTime =
+    elapsedMs < 1000 ? `${elapsedMs.toFixed(1)}ms` : `${(elapsedMs / 1000).toFixed(2)}s`;
+  const formattedBytes = formatBytes(readBytes);
+
+  return `${readRows.toLocaleString()} rows read · ${formattedBytes} · ${formattedTime} · ${formatBytes(
+    byteSeconds
+  )}s`;
+}
+
+export function formatBytes(bytes: number): string {
+  if (bytes === 0) return "0 B";
+  if (bytes < 0) return "-" + formatBytes(-bytes);
+  const k = 1024;
+  const sizes = ["B", "KB", "MB", "GB"];
+  const i = Math.min(Math.floor(Math.log(bytes) / Math.log(k)), sizes.length - 1);
+  return `${parseFloat((bytes / Math.pow(k, i)).toFixed(1))} ${sizes[i]}`;
+}
+

From 1ed71411b0458dd752170534830accc849cb96ff Mon Sep 17 00:00:00 2001
From: Matt Aitken <matt@mattaitken.com>
Date: Thu, 15 Jan 2026 18:58:46 +0000
Subject: [PATCH 096/137] The graph now renders in a <Card>

---
 .../app/components/code/ChartConfigPanel.tsx  |  2 +-
 .../route.tsx                                 | 33 +++++++++++--------
 2 files changed, 20 insertions(+), 15 deletions(-)

diff --git a/apps/webapp/app/components/code/ChartConfigPanel.tsx b/apps/webapp/app/components/code/ChartConfigPanel.tsx
index 3b2e77a821..5256bcecd0 100644
--- a/apps/webapp/app/components/code/ChartConfigPanel.tsx
+++ b/apps/webapp/app/components/code/ChartConfigPanel.tsx
@@ -239,7 +239,7 @@ export function ChartConfigPanel({ columns, config, onChange, className }: Chart
   }
 
   return (
-    <div className={cn("flex flex-col gap-2 px-3 py-2", className)}>
+    <div className={cn("flex flex-col gap-2 p-2", className)}>
       {/* Chart Type */}
       <div className="flex flex-col gap-3">
         <ConfigField label="Type">
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/route.tsx
index aedb1625b1..ca177f542c 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/route.tsx
@@ -1,10 +1,10 @@
-import { ArrowDownTrayIcon, ClipboardIcon, PlayIcon } from "@heroicons/react/20/solid";
+import { ArrowDownTrayIcon, ClipboardIcon } from "@heroicons/react/20/solid";
 import type { OutputColumnMetadata } from "@internal/clickhouse";
 import { Form, useNavigation } from "@remix-run/react";
 import {
+  redirect,
   type ActionFunctionArgs,
   type LoaderFunctionArgs,
-  redirect,
 } from "@remix-run/server-runtime";
 import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from "react";
 import { typedjson, useTypedActionData, useTypedLoaderData } from "remix-typedjson";
@@ -19,16 +19,17 @@ import {
 import { QueryResultsChart } from "~/components/code/QueryResultsChart";
 import { autoFormatSQL, TSQLEditor } from "~/components/code/TSQLEditor";
 import { TSQLResultsTable } from "~/components/code/TSQLResultsTable";
+import { EnvironmentLabel } from "~/components/environments/EnvironmentLabel";
+import { PageBody, PageContainer } from "~/components/layout/AppLayout";
+import { Button } from "~/components/primitives/Buttons";
+import { Callout } from "~/components/primitives/Callout";
+import { Card } from "~/components/primitives/charts/Card";
 import {
   ClientTabs,
   ClientTabsContent,
   ClientTabsList,
   ClientTabsTrigger,
 } from "~/components/primitives/ClientTabs";
-import { EnvironmentLabel } from "~/components/environments/EnvironmentLabel";
-import { PageBody, PageContainer } from "~/components/layout/AppLayout";
-import { Button } from "~/components/primitives/Buttons";
-import { Callout } from "~/components/primitives/Callout";
 import { Header3 } from "~/components/primitives/Headers";
 import { NavBar, PageTitle } from "~/components/primitives/PageHeader";
 import { Paragraph } from "~/components/primitives/Paragraph";
@@ -46,10 +47,10 @@ import {
 import { Select, SelectItem } from "~/components/primitives/Select";
 import { Spinner } from "~/components/primitives/Spinner";
 import { Switch } from "~/components/primitives/Switch";
+import { prisma } from "~/db.server";
 import { useEnvironment } from "~/hooks/useEnvironment";
 import { useOrganization } from "~/hooks/useOrganizations";
 import { useProject } from "~/hooks/useProject";
-import { prisma } from "~/db.server";
 import { findProjectBySlug } from "~/models/project.server";
 import { findEnvironmentBySlug } from "~/models/runtimeEnvironment.server";
 import { QueryPresenter, type QueryHistoryItem } from "~/presenters/v3/QueryPresenter.server";
@@ -574,17 +575,21 @@ export default function Page() {
                   </ClientTabsContent>
                   <ClientTabsContent
                     value="graph"
-                    className="grid min-h-0 grid-rows-[1fr] overflow-hidden"
+                    className="m-0 grid min-h-0 grid-rows-[1fr] overflow-hidden"
                   >
                     {results?.rows && results?.columns && results.rows.length > 0 ? (
                       <ResizablePanelGroup className="h-full overflow-hidden">
                         <ResizablePanel id="chart-results">
-                          <div className="h-full bg-background-dimmed p-3">
-                            <QueryResultsChart
-                              rows={results.rows}
-                              columns={results.columns}
-                              config={chartConfig}
-                            />
+                          <div className="h-full bg-charcoal-900 p-2">
+                            <Card>
+                              <Card.Content>
+                                <QueryResultsChart
+                                  rows={results.rows}
+                                  columns={results.columns}
+                                  config={chartConfig}
+                                />
+                              </Card.Content>
+                            </Card>
                           </div>
                         </ResizablePanel>
                         <ResizableHandle id="chart-split" />

From 5e550a9ec05dffe32e0f2c0016d29be391867fad Mon Sep 17 00:00:00 2001
From: Matt Aitken <matt@mattaitken.com>
Date: Thu, 15 Jan 2026 21:35:32 +0000
Subject: [PATCH 097/137] Switching to using ReactTable WIP

---
 .../app/components/code/TSQLResultsTable.tsx  | 398 ++++++++++++++----
 apps/webapp/package.json                      |   1 +
 pnpm-lock.yaml                                | 369 ++++++++--------
 3 files changed, 526 insertions(+), 242 deletions(-)

diff --git a/apps/webapp/app/components/code/TSQLResultsTable.tsx b/apps/webapp/app/components/code/TSQLResultsTable.tsx
index 10a8c93119..f420e17459 100644
--- a/apps/webapp/app/components/code/TSQLResultsTable.tsx
+++ b/apps/webapp/app/components/code/TSQLResultsTable.tsx
@@ -1,18 +1,18 @@
 import type { OutputColumnMetadata } from "@internal/clickhouse";
+import {
+  useReactTable,
+  getCoreRowModel,
+  flexRender,
+  type ColumnDef,
+  type CellContext,
+} from "@tanstack/react-table";
+import { useVirtualizer } from "@tanstack/react-virtual";
 import { formatDurationMilliseconds, MachinePresetName } from "@trigger.dev/core/v3";
-import { memo, useState } from "react";
+import { ClipboardCheckIcon, ClipboardIcon } from "lucide-react";
+import { memo, useMemo, useRef, useState } from "react";
 import { EnvironmentLabel } from "~/components/environments/EnvironmentLabel";
 import { MachineLabelCombo } from "~/components/MachineLabelCombo";
 import { DateTimeAccurate } from "~/components/primitives/DateTime";
-import {
-  CopyableTableCell,
-  Table,
-  TableBody,
-  TableCell,
-  TableHeader,
-  TableHeaderCell,
-  TableRow,
-} from "~/components/primitives/Table";
 import {
   descriptionForTaskRunStatus,
   isRunFriendlyStatus,
@@ -20,16 +20,29 @@ import {
   runStatusFromFriendlyTitle,
   TaskRunStatusCombo,
 } from "~/components/runs/v3/TaskRunStatus";
+import { useCopy } from "~/hooks/useCopy";
 import { useOrganization } from "~/hooks/useOrganizations";
 import { useProject } from "~/hooks/useProject";
+import { cn } from "~/utils/cn";
 import { formatCurrencyAccurate, formatNumber } from "~/utils/numberFormatter";
 import { v3ProjectPath, v3RunPathFromFriendlyId } from "~/utils/pathBuilder";
 import { Paragraph } from "../primitives/Paragraph";
 import { TextLink } from "../primitives/TextLink";
-import { SimpleTooltip } from "../primitives/Tooltip";
+import { InfoIconTooltip, SimpleTooltip } from "../primitives/Tooltip";
 import { QueueName } from "../runs/v3/QueueName";
 
 const MAX_STRING_DISPLAY_LENGTH = 64;
+const ROW_HEIGHT = 33; // Estimated row height in pixels
+const DEFAULT_COLUMN_SIZE = 150; // Default column width
+
+// Type for row data
+type RowData = Record<string, unknown>;
+
+// Extended column meta to store OutputColumnMetadata
+interface ColumnMeta {
+  outputColumn: OutputColumnMetadata;
+  alignment: "left" | "right";
+}
 
 /**
  * Truncate a string for display, adding ellipsis if it exceeds max length
@@ -87,6 +100,21 @@ function isBooleanType(type: string): boolean {
   return type === "Bool" || type === "Nullable(Bool)";
 }
 
+/**
+ * Check if a column should be right-aligned (numeric columns, duration, cost)
+ */
+function isRightAlignedColumn(column: OutputColumnMetadata): boolean {
+  if (
+    column.customRenderType === "duration" ||
+    column.customRenderType === "durationSeconds" ||
+    column.customRenderType === "cost" ||
+    column.customRenderType === "costInDollars"
+  ) {
+    return true;
+  }
+  return isNumericType(column.type);
+}
+
 /**
  * Wrapper component that tracks hover state and passes it to CellValue
  * This optimizes rendering by only enabling tooltips when the cell is hovered
@@ -175,7 +203,6 @@ function CellValue({
         break;
       }
       case "runStatus": {
-        // We have mapped the status to a friendly status so we need to map back to render the normal component
         const status = isTaskRunStatus(value)
           ? value
           : isRunFriendlyStatus(value)
@@ -191,7 +218,6 @@ function CellValue({
               />
             );
           }
-
           return <TaskRunStatusCombo status={status} />;
         }
         break;
@@ -216,13 +242,11 @@ function CellValue({
         return <span>{String(value)}</span>;
       case "cost":
         if (typeof value === "number") {
-          // Assume cost values are in cents
           return <span className="tabular-nums">{formatCurrencyAccurate(value / 100)}</span>;
         }
         return <span>{String(value)}</span>;
       case "costInDollars":
         if (typeof value === "number") {
-          // Value is already in dollars, no conversion needed
           return <span className="tabular-nums">{formatCurrencyAccurate(value)}</span>;
         }
         return <span>{String(value)}</span>;
@@ -271,7 +295,6 @@ function CellValue({
   // Fall back to rendering based on ClickHouse type
   const { type } = column;
 
-  // DateTime types
   if (isDateTimeType(type)) {
     if (typeof value === "string") {
       return <DateTimeAccurate date={value} showTooltip={hovered} />;
@@ -279,12 +302,10 @@ function CellValue({
     return <span>{String(value)}</span>;
   }
 
-  // JSON type
   if (type === "JSON") {
     return <JSONCellValue value={value} />;
   }
 
-  // Array types
   if (type.startsWith("Array")) {
     const arrayString = JSON.stringify(value);
     const isTruncated = arrayString.length > MAX_STRING_DISPLAY_LENGTH;
@@ -308,7 +329,6 @@ function CellValue({
     return <span className="font-mono text-xs text-text-dimmed">{arrayString}</span>;
   }
 
-  // Boolean types
   if (isBooleanType(type)) {
     if (typeof value === "boolean") {
       return <span className="text-text-dimmed">{value ? "true" : "false"}</span>;
@@ -319,7 +339,6 @@ function CellValue({
     return <span>{String(value)}</span>;
   }
 
-  // Numeric types
   if (isNumericType(type)) {
     if (typeof value === "number") {
       return <span className="tabular-nums">{formatNumber(value)}</span>;
@@ -327,7 +346,6 @@ function CellValue({
     return <span>{String(value)}</span>;
   }
 
-  // Default to string rendering with truncation for long values
   const stringValue = String(value);
   const isTruncated = stringValue.length > MAX_STRING_DISPLAY_LENGTH;
 
@@ -369,7 +387,7 @@ function EnvironmentCellValue({ value }: { value: string }) {
   return <EnvironmentLabel environment={environment} />;
 }
 
-function JSONCellValue({ value }: { value: any }) {
+function JSONCellValue({ value }: { value: unknown }) {
   const jsonString = JSON.stringify(value);
   const isTruncated = jsonString.length > MAX_STRING_DISPLAY_LENGTH;
 
@@ -392,20 +410,108 @@ function JSONCellValue({ value }: { value: any }) {
 }
 
 /**
- * Check if a column should be right-aligned (numeric columns, duration, cost)
+ * Copyable cell component for virtualized rows
  */
-function isRightAlignedColumn(column: OutputColumnMetadata): boolean {
-  // Check for custom render types that display numeric values
-  if (
-    column.customRenderType === "duration" ||
-    column.customRenderType === "durationSeconds" ||
-    column.customRenderType === "cost" ||
-    column.customRenderType === "costInDollars"
-  ) {
-    return true;
-  }
+function CopyableCell({
+  value,
+  alignment,
+  children,
+}: {
+  value: string;
+  alignment: "left" | "right";
+  children: React.ReactNode;
+}) {
+  const [isHovered, setIsHovered] = useState(false);
+  const { copy, copied } = useCopy(value);
 
-  return isNumericType(column.type);
+  return (
+    <div
+      className={cn(
+        "relative flex items-center px-2 py-1.5",
+        "font-mono text-xs text-text-dimmed group-hover/row:text-text-bright",
+        alignment === "right" && "justify-end"
+      )}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+    >
+      {children}
+      {isHovered && (
+        <span
+          onClick={(e) => {
+            e.stopPropagation();
+            e.preventDefault();
+            copy();
+          }}
+          className="absolute right-0 top-1/2 z-10 flex -translate-y-1/2 cursor-pointer"
+        >
+          <SimpleTooltip
+            button={
+              <span
+                className={cn(
+                  "flex size-6 items-center justify-center rounded border border-charcoal-650 bg-charcoal-750",
+                  copied
+                    ? "text-green-500"
+                    : "text-text-dimmed hover:border-charcoal-600 hover:bg-charcoal-700 hover:text-text-bright"
+                )}
+              >
+                {copied ? (
+                  <ClipboardCheckIcon className="size-3.5" />
+                ) : (
+                  <ClipboardIcon className="size-3.5" />
+                )}
+              </span>
+            }
+            content={copied ? "Copied!" : "Copy"}
+            disableHoverableContent
+          />
+        </span>
+      )}
+    </div>
+  );
+}
+
+/**
+ * Header cell component with tooltip support
+ */
+function HeaderCellContent({
+  alignment,
+  tooltip,
+  children,
+}: {
+  alignment: "left" | "right";
+  tooltip?: React.ReactNode;
+  children: React.ReactNode;
+}) {
+  const [isHovered, setIsHovered] = useState(false);
+
+  return (
+    <div
+      className={cn(
+        "flex items-center px-2 py-1.5",
+        "text-sm font-medium text-text-bright",
+        alignment === "right" && "justify-end"
+      )}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+    >
+      {tooltip ? (
+        <div
+          className={cn("flex items-center gap-1", {
+            "justify-end": alignment === "right",
+          })}
+        >
+          {children}
+          <InfoIconTooltip
+            content={tooltip}
+            contentClassName="normal-case tracking-normal"
+            enabled={isHovered}
+          />
+        </div>
+      ) : (
+        children
+      )}
+    </div>
+  );
 }
 
 export const TSQLResultsTable = memo(function TSQLResultsTable({
@@ -417,52 +523,190 @@ export const TSQLResultsTable = memo(function TSQLResultsTable({
   columns: OutputColumnMetadata[];
   prettyFormatting?: boolean;
 }) {
+  const tableContainerRef = useRef<HTMLDivElement>(null);
+
+  // Create TanStack Table column definitions from OutputColumnMetadata
+  const columnDefs = useMemo<ColumnDef<RowData, unknown>[]>(
+    () =>
+      columns.map((col) => ({
+        id: col.name,
+        accessorKey: col.name,
+        header: () => col.name,
+        cell: (info: CellContext<RowData, unknown>) => (
+          <CellValueWrapper
+            value={info.getValue()}
+            column={col}
+            prettyFormatting={prettyFormatting}
+          />
+        ),
+        meta: {
+          outputColumn: col,
+          alignment: isRightAlignedColumn(col) ? "right" : "left",
+        } as ColumnMeta,
+        size: DEFAULT_COLUMN_SIZE,
+      })),
+    [columns, prettyFormatting]
+  );
+
+  // Initialize TanStack Table
+  const table = useReactTable({
+    data: rows,
+    columns: columnDefs,
+    getCoreRowModel: getCoreRowModel(),
+  });
+
+  const { rows: tableRows } = table.getRowModel();
+
+  // Set up the virtualizer
+  const rowVirtualizer = useVirtualizer({
+    count: tableRows.length,
+    estimateSize: () => ROW_HEIGHT,
+    getScrollElement: () => tableContainerRef.current,
+    overscan: 5,
+  });
+
   if (!columns.length) return null;
 
+  // Empty state
+  if (rows.length === 0) {
+    return (
+      <div
+        className="h-full w-full overflow-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600"
+        style={{ position: "relative" }}
+      >
+        <table style={{ display: "grid" }}>
+          <thead
+            className="bg-background-dimmed"
+            style={{
+              display: "grid",
+              position: "sticky",
+              top: 0,
+              zIndex: 1,
+            }}
+          >
+            {table.getHeaderGroups().map((headerGroup) => (
+              <tr key={headerGroup.id} style={{ display: "flex", width: "100%" }}>
+                {headerGroup.headers.map((header) => {
+                  const meta = header.column.columnDef.meta as ColumnMeta | undefined;
+                  return (
+                    <th
+                      key={header.id}
+                      style={{
+                        display: "flex",
+                        width: header.getSize(),
+                      }}
+                    >
+                      <HeaderCellContent
+                        alignment={meta?.alignment ?? "left"}
+                        tooltip={meta?.outputColumn.description}
+                      >
+                        {flexRender(header.column.columnDef.header, header.getContext())}
+                      </HeaderCellContent>
+                    </th>
+                  );
+                })}
+              </tr>
+            ))}
+          </thead>
+          <tbody style={{ display: "grid" }}>
+            <tr style={{ display: "flex" }}>
+              <td>
+                <Paragraph variant="extra-small" className="p-4 text-text-dimmed">
+                  No results
+                </Paragraph>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    );
+  }
+
   return (
-    <Table variant="compact/mono" fullWidth containerClassName="h-full overflow-y-auto border-t-0">
-      <TableHeader>
-        <TableRow>
-          {columns.map((col) => (
-            <TableHeaderCell
-              key={col.name}
-              alignment={isRightAlignedColumn(col) ? "right" : "left"}
-              tooltip={col.description}
-            >
-              {col.name}
-            </TableHeaderCell>
+    <div
+      ref={tableContainerRef}
+      className="h-full w-full overflow-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600"
+      style={{ position: "relative" }}
+    >
+      <table style={{ display: "grid" }}>
+        <thead
+          className="bg-background-dimmed after:absolute after:bottom-0 after:left-0 after:right-0 after:h-px after:bg-grid-bright"
+          style={{
+            display: "grid",
+            position: "sticky",
+            top: 0,
+            zIndex: 1,
+          }}
+        >
+          {table.getHeaderGroups().map((headerGroup) => (
+            <tr key={headerGroup.id} style={{ display: "flex", width: "100%" }}>
+              {headerGroup.headers.map((header) => {
+                const meta = header.column.columnDef.meta as ColumnMeta | undefined;
+                return (
+                  <th
+                    key={header.id}
+                    style={{
+                      display: "flex",
+                      width: header.getSize(),
+                    }}
+                  >
+                    <HeaderCellContent
+                      alignment={meta?.alignment ?? "left"}
+                      tooltip={meta?.outputColumn.description}
+                    >
+                      {flexRender(header.column.columnDef.header, header.getContext())}
+                    </HeaderCellContent>
+                  </th>
+                );
+              })}
+            </tr>
           ))}
-        </TableRow>
-      </TableHeader>
-      <TableBody>
-        {rows.length === 0 ? (
-          <TableRow>
-            <TableCell colSpan={columns.length}>
-              <Paragraph variant="extra-small" className="p-2 text-text-dimmed">
-                No results
-              </Paragraph>
-            </TableCell>
-          </TableRow>
-        ) : (
-          rows.map((row, i) => (
-            <TableRow key={i}>
-              {columns.map((col) => (
-                <CopyableTableCell
-                  key={col.name}
-                  alignment={isRightAlignedColumn(col) ? "right" : "left"}
-                  value={valueToString(row[col.name])}
-                >
-                  <CellValueWrapper
-                    value={row[col.name]}
-                    column={col}
-                    prettyFormatting={prettyFormatting}
-                  />
-                </CopyableTableCell>
-              ))}
-            </TableRow>
-          ))
-        )}
-      </TableBody>
-    </Table>
+        </thead>
+        <tbody
+          style={{
+            display: "grid",
+            height: `${rowVirtualizer.getTotalSize()}px`,
+            position: "relative",
+          }}
+        >
+          {rowVirtualizer.getVirtualItems().map((virtualRow) => {
+            const row = tableRows[virtualRow.index];
+            return (
+              <tr
+                key={row.id}
+                data-index={virtualRow.index}
+                className="group/row hover:bg-charcoal-800"
+                style={{
+                  display: "flex",
+                  position: "absolute",
+                  transform: `translateY(${virtualRow.start}px)`,
+                  width: "100%",
+                }}
+              >
+                {row.getVisibleCells().map((cell) => {
+                  const meta = cell.column.columnDef.meta as ColumnMeta | undefined;
+                  return (
+                    <td
+                      key={cell.id}
+                      style={{
+                        display: "flex",
+                        width: cell.column.getSize(),
+                      }}
+                    >
+                      <CopyableCell
+                        alignment={meta?.alignment ?? "left"}
+                        value={valueToString(cell.getValue())}
+                      >
+                        {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                      </CopyableCell>
+                    </td>
+                  );
+                })}
+              </tr>
+            );
+          })}
+        </tbody>
+      </table>
+    </div>
   );
 });
diff --git a/apps/webapp/package.json b/apps/webapp/package.json
index 69e8464d3c..d4d0dffc58 100644
--- a/apps/webapp/package.json
+++ b/apps/webapp/package.json
@@ -113,6 +113,7 @@
     "@socket.io/redis-adapter": "^8.3.0",
     "@tabler/icons-react": "^3.36.1",
     "@tailwindcss/container-queries": "^0.1.1",
+    "@tanstack/react-table": "^8.21.3",
     "@tanstack/react-virtual": "^3.0.4",
     "@team-plain/typescript-sdk": "^3.5.0",
     "@trigger.dev/companyicons": "^1.5.35",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 5cf029d079..375363763e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -431,31 +431,31 @@ importers:
         version: 3.7.1(react@18.2.0)
       '@remix-run/express':
         specifier: 2.1.0
-        version: 2.1.0(express@4.20.0)(typescript@5.9.3)
+        version: 2.1.0(express@4.20.0)(typescript@5.5.4)
       '@remix-run/node':
         specifier: 2.1.0
-        version: 2.1.0(typescript@5.9.3)
+        version: 2.1.0(typescript@5.5.4)
       '@remix-run/react':
         specifier: 2.1.0
-        version: 2.1.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.9.3)
+        version: 2.1.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.5.4)
       '@remix-run/router':
         specifier: ^1.15.3
         version: 1.15.3
       '@remix-run/serve':
         specifier: 2.1.0
-        version: 2.1.0(typescript@5.9.3)
+        version: 2.1.0(typescript@5.5.4)
       '@remix-run/server-runtime':
         specifier: 2.1.0
-        version: 2.1.0(typescript@5.9.3)
+        version: 2.1.0(typescript@5.5.4)
       '@remix-run/v1-meta':
         specifier: ^0.1.3
-        version: 0.1.3(@remix-run/react@2.1.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.9.3))(@remix-run/server-runtime@2.1.0(typescript@5.9.3))
+        version: 0.1.3(@remix-run/react@2.1.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.5.4))(@remix-run/server-runtime@2.1.0(typescript@5.5.4))
       '@s2-dev/streamstore':
         specifier: ^0.17.2
-        version: 0.17.3(typescript@5.9.3)
+        version: 0.17.3(typescript@5.5.4)
       '@sentry/remix':
         specifier: 9.46.0
-        version: 9.46.0(patch_hash=146126b032581925294aaed63ab53ce3f5e0356a755f1763d7a9a76b9846943b)(@remix-run/node@2.1.0(typescript@5.9.3))(@remix-run/react@2.1.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.9.3))(@remix-run/server-runtime@2.1.0(typescript@5.9.3))(encoding@0.1.13)(react@18.2.0)
+        version: 9.46.0(patch_hash=146126b032581925294aaed63ab53ce3f5e0356a755f1763d7a9a76b9846943b)(@remix-run/node@2.1.0(typescript@5.5.4))(@remix-run/react@2.1.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.5.4))(@remix-run/server-runtime@2.1.0(typescript@5.5.4))(encoding@0.1.13)(react@18.2.0)
       '@slack/web-api':
         specifier: 7.9.1
         version: 7.9.1
@@ -468,6 +468,9 @@ importers:
       '@tailwindcss/container-queries':
         specifier: ^0.1.1
         version: 0.1.1(tailwindcss@3.4.1)
+      '@tanstack/react-table':
+        specifier: ^8.21.3
+        version: 8.21.3(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@tanstack/react-virtual':
         specifier: ^3.0.4
         version: 3.0.4(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
@@ -524,7 +527,7 @@ importers:
         version: 1.0.18
       class-variance-authority:
         specifier: ^0.5.2
-        version: 0.5.2(typescript@5.9.3)
+        version: 0.5.2(typescript@5.5.4)
       clsx:
         specifier: ^1.2.1
         version: 1.2.1
@@ -575,7 +578,7 @@ importers:
         version: 10.12.11(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       graphile-worker:
         specifier: 0.16.6
-        version: 0.16.6(patch_hash=798129c99ed02177430fc90a1fdef800ec94e5fd1d491b931297dc52f4c98ab1)(typescript@5.9.3)
+        version: 0.16.6(patch_hash=798129c99ed02177430fc90a1fdef800ec94e5fd1d491b931297dc52f4c98ab1)(typescript@5.5.4)
       humanize-duration:
         specifier: ^3.27.3
         version: 3.27.3
@@ -704,22 +707,22 @@ importers:
         version: 2.0.1
       remix-auth:
         specifier: ^3.6.0
-        version: 3.6.0(@remix-run/react@2.1.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.9.3))(@remix-run/server-runtime@2.1.0(typescript@5.9.3))
+        version: 3.6.0(@remix-run/react@2.1.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.5.4))(@remix-run/server-runtime@2.1.0(typescript@5.5.4))
       remix-auth-email-link:
         specifier: 2.0.2
-        version: 2.0.2(@remix-run/server-runtime@2.1.0(typescript@5.9.3))(remix-auth@3.6.0(@remix-run/react@2.1.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.9.3))(@remix-run/server-runtime@2.1.0(typescript@5.9.3)))
+        version: 2.0.2(@remix-run/server-runtime@2.1.0(typescript@5.5.4))(remix-auth@3.6.0(@remix-run/react@2.1.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.5.4))(@remix-run/server-runtime@2.1.0(typescript@5.5.4)))
       remix-auth-github:
         specifier: ^1.6.0
-        version: 1.6.0(@remix-run/server-runtime@2.1.0(typescript@5.9.3))(remix-auth@3.6.0(@remix-run/react@2.1.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.9.3))(@remix-run/server-runtime@2.1.0(typescript@5.9.3)))
+        version: 1.6.0(@remix-run/server-runtime@2.1.0(typescript@5.5.4))(remix-auth@3.6.0(@remix-run/react@2.1.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.5.4))(@remix-run/server-runtime@2.1.0(typescript@5.5.4)))
       remix-auth-google:
         specifier: ^2.0.0
-        version: 2.0.0(@remix-run/server-runtime@2.1.0(typescript@5.9.3))(remix-auth@3.6.0(@remix-run/react@2.1.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.9.3))(@remix-run/server-runtime@2.1.0(typescript@5.9.3)))
+        version: 2.0.0(@remix-run/server-runtime@2.1.0(typescript@5.5.4))(remix-auth@3.6.0(@remix-run/react@2.1.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.5.4))(@remix-run/server-runtime@2.1.0(typescript@5.5.4)))
       remix-typedjson:
         specifier: 0.3.1
-        version: 0.3.1(@remix-run/react@2.1.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.9.3))(@remix-run/server-runtime@2.1.0(typescript@5.9.3))(react@18.2.0)
+        version: 0.3.1(@remix-run/react@2.1.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.5.4))(@remix-run/server-runtime@2.1.0(typescript@5.5.4))(react@18.2.0)
       remix-utils:
         specifier: ^7.7.0
-        version: 7.7.0(@remix-run/node@2.1.0(typescript@5.9.3))(@remix-run/react@2.1.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.9.3))(@remix-run/router@1.15.3)(crypto-js@4.2.0)(intl-parse-accept-language@1.0.0)(react@18.2.0)(zod@3.25.76)
+        version: 7.7.0(@remix-run/node@2.1.0(typescript@5.5.4))(@remix-run/react@2.1.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.5.4))(@remix-run/router@1.15.3)(crypto-js@4.2.0)(intl-parse-accept-language@1.0.0)(react@18.2.0)(zod@3.25.76)
       seedrandom:
         specifier: ^3.0.5
         version: 3.0.5
@@ -804,13 +807,13 @@ importers:
         version: link:../../internal-packages/testcontainers
       '@remix-run/dev':
         specifier: 2.1.0
-        version: 2.1.0(@remix-run/serve@2.1.0(typescript@5.9.3))(@types/node@22.13.9)(bufferutil@4.0.9)(encoding@0.1.13)(lightningcss@1.29.2)(terser@5.44.1)(typescript@5.9.3)
+        version: 2.1.0(@remix-run/serve@2.1.0(typescript@5.5.4))(@types/node@22.13.9)(bufferutil@4.0.9)(encoding@0.1.13)(lightningcss@1.29.2)(terser@5.44.1)(typescript@5.5.4)
       '@remix-run/eslint-config':
         specifier: 2.1.0
-        version: 2.1.0(eslint@8.31.0)(react@18.2.0)(typescript@5.9.3)
+        version: 2.1.0(eslint@8.31.0)(react@18.2.0)(typescript@5.5.4)
       '@remix-run/testing':
         specifier: ^2.1.0
-        version: 2.1.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.9.3)
+        version: 2.1.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.5.4)
       '@sentry/cli':
         specifier: 2.50.2
         version: 2.50.2(encoding@0.1.13)
@@ -909,10 +912,10 @@ importers:
         version: 8.5.4
       '@typescript-eslint/eslint-plugin':
         specifier: ^5.59.6
-        version: 5.59.6(@typescript-eslint/parser@5.59.6(eslint@8.31.0)(typescript@5.9.3))(eslint@8.31.0)(typescript@5.9.3)
+        version: 5.59.6(@typescript-eslint/parser@5.59.6(eslint@8.31.0)(typescript@5.5.4))(eslint@8.31.0)(typescript@5.5.4)
       '@typescript-eslint/parser':
         specifier: ^5.59.6
-        version: 5.59.6(eslint@8.31.0)(typescript@5.9.3)
+        version: 5.59.6(eslint@8.31.0)(typescript@5.5.4)
       autoevals:
         specifier: ^0.0.130
         version: 0.0.130(encoding@0.1.13)(ws@8.12.0(bufferutil@4.0.9))
@@ -939,7 +942,7 @@ importers:
         version: 8.6.0(eslint@8.31.0)
       eslint-plugin-import:
         specifier: ^2.29.1
-        version: 2.29.1(@typescript-eslint/parser@5.59.6(eslint@8.31.0)(typescript@5.9.3))(eslint-import-resolver-typescript@3.5.5)(eslint@8.31.0)
+        version: 2.29.1(@typescript-eslint/parser@5.59.6(eslint@8.31.0)(typescript@5.5.4))(eslint-import-resolver-typescript@3.5.5)(eslint@8.31.0)
       eslint-plugin-react-hooks:
         specifier: ^4.6.2
         version: 4.6.2(eslint@8.31.0)
@@ -957,7 +960,7 @@ importers:
         version: 16.0.1(postcss@8.5.6)
       postcss-loader:
         specifier: ^8.1.1
-        version: 8.1.1(postcss@8.5.6)(typescript@5.9.3)(webpack@5.102.1(@swc/core@1.3.26)(esbuild@0.15.18))
+        version: 8.1.1(postcss@8.5.6)(typescript@5.5.4)(webpack@5.102.1(@swc/core@1.3.26)(esbuild@0.15.18))
       prettier:
         specifier: ^2.8.8
         version: 2.8.8
@@ -990,7 +993,7 @@ importers:
         version: 4.20.6
       vite-tsconfig-paths:
         specifier: ^4.0.5
-        version: 4.0.5(typescript@5.9.3)
+        version: 4.0.5(typescript@5.5.4)
 
   docs: {}
 
@@ -1078,7 +1081,7 @@ importers:
         version: 18.3.1
       react-email:
         specifier: ^2.1.1
-        version: 2.1.2(@opentelemetry/api@1.9.0)(@swc/helpers@0.5.15)(eslint@8.31.0)
+        version: 2.1.2(@opentelemetry/api@1.9.0)(@swc/helpers@0.5.15)(bufferutil@4.0.9)(eslint@8.31.0)
       resend:
         specifier: ^3.2.0
         version: 3.2.0
@@ -1679,7 +1682,7 @@ importers:
         version: 1.36.0
       '@s2-dev/streamstore':
         specifier: 0.17.3
-        version: 0.17.3(typescript@5.9.3)
+        version: 0.17.3(typescript@5.5.4)
       dequal:
         specifier: ^2.0.3
         version: 2.0.3
@@ -1755,7 +1758,7 @@ importers:
         version: 4.0.14
       ai:
         specifier: ^3.4.33
-        version: 3.4.33(openai@4.97.0(encoding@0.1.13)(ws@8.18.3(bufferutil@4.0.9))(zod@3.25.76))(react@19.1.0)(sswr@2.1.0(svelte@5.43.6))(svelte@5.43.6)(vue@3.5.24(typescript@5.9.3))(zod@3.25.76)
+        version: 3.4.33(openai@4.97.0(encoding@0.1.13)(ws@8.18.3(bufferutil@4.0.9))(zod@3.25.76))(react@19.1.0)(sswr@2.1.0(svelte@5.43.6))(svelte@5.43.6)(vue@3.5.24(typescript@5.5.4))(zod@3.25.76)
       defu:
         specifier: ^6.1.4
         version: 6.1.4
@@ -1767,7 +1770,7 @@ importers:
         version: 3.0.2
       ts-essentials:
         specifier: 10.0.1
-        version: 10.0.1(typescript@5.9.3)
+        version: 10.0.1(typescript@5.5.4)
       tshy:
         specifier: ^3.0.2
         version: 3.0.2
@@ -10278,12 +10281,23 @@ packages:
     peerDependencies:
       react: ^18 || ^19
 
+  '@tanstack/react-table@8.21.3':
+    resolution: {integrity: sha512-5nNMTSETP4ykGegmVkhjcS8tTLW6Vl4axfEGQN3v0zdHYbK4UfoqfPChclTrJ4EoK9QynqAu9oUf8VEmrpZ5Ww==}
+    engines: {node: '>=12'}
+    peerDependencies:
+      react: '>=16.8'
+      react-dom: '>=16.8'
+
   '@tanstack/react-virtual@3.0.4':
     resolution: {integrity: sha512-tiqKW/e2MJVCr7/pRUXulpkyxllaOclkHNfhKTo4pmHjJIqnhMfwIjc1Q1R0Un3PI3kQywywu/791c8z9u0qeA==}
     peerDependencies:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0
       react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
 
+  '@tanstack/table-core@8.21.3':
+    resolution: {integrity: sha512-ldZXEhOBb8Is7xLs01fR3YEc3DERiz5silj8tnGkFZytt1abEvl/GhUmCE0PMLaMPTa3Jk4HbKmRlHmu+gCftg==}
+    engines: {node: '>=12'}
+
   '@tanstack/virtual-core@3.0.0':
     resolution: {integrity: sha512-SYXOBTjJb05rXa2vl55TTwO40A6wKu0R5i1qQwhJYNDIqaIGF7D0HsLw+pJAyi2OvntlEIVusx3xtbbgSUi6zg==}
 
@@ -20240,13 +20254,13 @@ snapshots:
       zod: 3.25.76
       zod-to-json-schema: 3.24.6(zod@3.25.76)
 
-  '@ai-sdk/vue@0.0.59(vue@3.5.24(typescript@5.9.3))(zod@3.25.76)':
+  '@ai-sdk/vue@0.0.59(vue@3.5.24(typescript@5.5.4))(zod@3.25.76)':
     dependencies:
       '@ai-sdk/provider-utils': 1.0.22(zod@3.25.76)
       '@ai-sdk/ui-utils': 0.0.50(zod@3.25.76)
-      swrv: 1.0.4(vue@3.5.24(typescript@5.9.3))
+      swrv: 1.0.4(vue@3.5.24(typescript@5.5.4))
     optionalDependencies:
-      vue: 3.5.24(typescript@5.9.3)
+      vue: 3.5.24(typescript@5.5.4)
     transitivePeerDependencies:
       - zod
 
@@ -28687,7 +28701,7 @@ snapshots:
     transitivePeerDependencies:
       - encoding
 
-  '@remix-run/dev@2.1.0(@remix-run/serve@2.1.0(typescript@5.9.3))(@types/node@22.13.9)(bufferutil@4.0.9)(encoding@0.1.13)(lightningcss@1.29.2)(terser@5.44.1)(typescript@5.9.3)':
+  '@remix-run/dev@2.1.0(@remix-run/serve@2.1.0(typescript@5.5.4))(@types/node@22.13.9)(bufferutil@4.0.9)(encoding@0.1.13)(lightningcss@1.29.2)(terser@5.44.1)(typescript@5.5.4)':
     dependencies:
       '@babel/core': 7.22.17
       '@babel/generator': 7.24.7
@@ -28698,7 +28712,7 @@ snapshots:
       '@babel/traverse': 7.24.7
       '@mdx-js/mdx': 2.3.0
       '@npmcli/package-json': 4.0.1
-      '@remix-run/server-runtime': 2.1.0(typescript@5.9.3)
+      '@remix-run/server-runtime': 2.1.0(typescript@5.5.4)
       '@types/mdx': 2.0.5
       '@vanilla-extract/integration': 6.2.1(@types/node@22.13.9)(lightningcss@1.29.2)(terser@5.44.1)
       arg: 5.0.2
@@ -28738,8 +28752,8 @@ snapshots:
       tsconfig-paths: 4.2.0
       ws: 7.5.9(bufferutil@4.0.9)
     optionalDependencies:
-      '@remix-run/serve': 2.1.0(typescript@5.9.3)
-      typescript: 5.9.3
+      '@remix-run/serve': 2.1.0(typescript@5.5.4)
+      typescript: 5.5.4
     transitivePeerDependencies:
       - '@types/node'
       - bluebird
@@ -28755,43 +28769,43 @@ snapshots:
       - ts-node
       - utf-8-validate
 
-  '@remix-run/eslint-config@2.1.0(eslint@8.31.0)(react@18.2.0)(typescript@5.9.3)':
+  '@remix-run/eslint-config@2.1.0(eslint@8.31.0)(react@18.2.0)(typescript@5.5.4)':
     dependencies:
       '@babel/core': 7.22.17
       '@babel/eslint-parser': 7.21.8(@babel/core@7.22.17)(eslint@8.31.0)
       '@babel/preset-react': 7.18.6(@babel/core@7.22.17)
       '@rushstack/eslint-patch': 1.2.0
-      '@typescript-eslint/eslint-plugin': 5.59.6(@typescript-eslint/parser@5.59.6(eslint@8.31.0)(typescript@5.9.3))(eslint@8.31.0)(typescript@5.9.3)
-      '@typescript-eslint/parser': 5.59.6(eslint@8.31.0)(typescript@5.9.3)
+      '@typescript-eslint/eslint-plugin': 5.59.6(@typescript-eslint/parser@5.59.6(eslint@8.31.0)(typescript@5.5.4))(eslint@8.31.0)(typescript@5.5.4)
+      '@typescript-eslint/parser': 5.59.6(eslint@8.31.0)(typescript@5.5.4)
       eslint: 8.31.0
       eslint-import-resolver-node: 0.3.7
-      eslint-import-resolver-typescript: 3.5.5(@typescript-eslint/parser@5.59.6(eslint@8.31.0)(typescript@5.9.3))(eslint-import-resolver-node@0.3.7)(eslint-plugin-import@2.29.1)(eslint@8.31.0)
-      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@5.59.6(eslint@8.31.0)(typescript@5.9.3))(eslint-import-resolver-typescript@3.5.5)(eslint@8.31.0)
-      eslint-plugin-jest: 26.9.0(@typescript-eslint/eslint-plugin@5.59.6(@typescript-eslint/parser@5.59.6(eslint@8.31.0)(typescript@5.9.3))(eslint@8.31.0)(typescript@5.9.3))(eslint@8.31.0)(typescript@5.9.3)
+      eslint-import-resolver-typescript: 3.5.5(@typescript-eslint/parser@5.59.6(eslint@8.31.0)(typescript@5.5.4))(eslint-import-resolver-node@0.3.7)(eslint-plugin-import@2.29.1)(eslint@8.31.0)
+      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@5.59.6(eslint@8.31.0)(typescript@5.5.4))(eslint-import-resolver-typescript@3.5.5)(eslint@8.31.0)
+      eslint-plugin-jest: 26.9.0(@typescript-eslint/eslint-plugin@5.59.6(@typescript-eslint/parser@5.59.6(eslint@8.31.0)(typescript@5.5.4))(eslint@8.31.0)(typescript@5.5.4))(eslint@8.31.0)(typescript@5.5.4)
       eslint-plugin-jest-dom: 4.0.3(eslint@8.31.0)
       eslint-plugin-jsx-a11y: 6.7.1(eslint@8.31.0)
       eslint-plugin-node: 11.1.0(eslint@8.31.0)
       eslint-plugin-react: 7.32.2(eslint@8.31.0)
       eslint-plugin-react-hooks: 4.6.2(eslint@8.31.0)
-      eslint-plugin-testing-library: 5.11.0(eslint@8.31.0)(typescript@5.9.3)
+      eslint-plugin-testing-library: 5.11.0(eslint@8.31.0)(typescript@5.5.4)
       react: 18.2.0
     optionalDependencies:
-      typescript: 5.9.3
+      typescript: 5.5.4
     transitivePeerDependencies:
       - eslint-import-resolver-webpack
       - jest
       - supports-color
 
-  '@remix-run/express@2.1.0(express@4.20.0)(typescript@5.9.3)':
+  '@remix-run/express@2.1.0(express@4.20.0)(typescript@5.5.4)':
     dependencies:
-      '@remix-run/node': 2.1.0(typescript@5.9.3)
+      '@remix-run/node': 2.1.0(typescript@5.5.4)
       express: 4.20.0
     optionalDependencies:
-      typescript: 5.9.3
+      typescript: 5.5.4
 
-  '@remix-run/node@2.1.0(typescript@5.9.3)':
+  '@remix-run/node@2.1.0(typescript@5.5.4)':
     dependencies:
-      '@remix-run/server-runtime': 2.1.0(typescript@5.9.3)
+      '@remix-run/server-runtime': 2.1.0(typescript@5.5.4)
       '@remix-run/web-fetch': 4.4.1
       '@remix-run/web-file': 3.1.0
       '@remix-run/web-stream': 1.1.0
@@ -28800,26 +28814,26 @@ snapshots:
       source-map-support: 0.5.21
       stream-slice: 0.1.2
     optionalDependencies:
-      typescript: 5.9.3
+      typescript: 5.5.4
 
-  '@remix-run/react@2.1.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.9.3)':
+  '@remix-run/react@2.1.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.5.4)':
     dependencies:
       '@remix-run/router': 1.10.0
-      '@remix-run/server-runtime': 2.1.0(typescript@5.9.3)
+      '@remix-run/server-runtime': 2.1.0(typescript@5.5.4)
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
       react-router-dom: 6.17.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
     optionalDependencies:
-      typescript: 5.9.3
+      typescript: 5.5.4
 
   '@remix-run/router@1.10.0': {}
 
   '@remix-run/router@1.15.3': {}
 
-  '@remix-run/serve@2.1.0(typescript@5.9.3)':
+  '@remix-run/serve@2.1.0(typescript@5.5.4)':
     dependencies:
-      '@remix-run/express': 2.1.0(express@4.20.0)(typescript@5.9.3)
-      '@remix-run/node': 2.1.0(typescript@5.9.3)
+      '@remix-run/express': 2.1.0(express@4.20.0)(typescript@5.5.4)
+      '@remix-run/node': 2.1.0(typescript@5.5.4)
       chokidar: 3.6.0
       compression: 1.7.4
       express: 4.20.0
@@ -28830,7 +28844,7 @@ snapshots:
       - supports-color
       - typescript
 
-  '@remix-run/server-runtime@2.1.0(typescript@5.9.3)':
+  '@remix-run/server-runtime@2.1.0(typescript@5.5.4)':
     dependencies:
       '@remix-run/router': 1.10.0
       '@types/cookie': 0.4.1
@@ -28839,24 +28853,24 @@ snapshots:
       set-cookie-parser: 2.6.0
       source-map: 0.7.4
     optionalDependencies:
-      typescript: 5.9.3
+      typescript: 5.5.4
 
-  '@remix-run/testing@2.1.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.9.3)':
+  '@remix-run/testing@2.1.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.5.4)':
     dependencies:
-      '@remix-run/node': 2.1.0(typescript@5.9.3)
-      '@remix-run/react': 2.1.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.9.3)
+      '@remix-run/node': 2.1.0(typescript@5.5.4)
+      '@remix-run/react': 2.1.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.5.4)
       '@remix-run/router': 1.10.0
       react: 18.2.0
       react-router-dom: 6.17.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
     optionalDependencies:
-      typescript: 5.9.3
+      typescript: 5.5.4
     transitivePeerDependencies:
       - react-dom
 
-  '@remix-run/v1-meta@0.1.3(@remix-run/react@2.1.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.9.3))(@remix-run/server-runtime@2.1.0(typescript@5.9.3))':
+  '@remix-run/v1-meta@0.1.3(@remix-run/react@2.1.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.5.4))(@remix-run/server-runtime@2.1.0(typescript@5.5.4))':
     dependencies:
-      '@remix-run/react': 2.1.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.9.3)
-      '@remix-run/server-runtime': 2.1.0(typescript@5.9.3)
+      '@remix-run/react': 2.1.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.5.4)
+      '@remix-run/server-runtime': 2.1.0(typescript@5.5.4)
 
   '@remix-run/web-blob@3.1.0':
     dependencies:
@@ -28951,10 +28965,10 @@ snapshots:
 
   '@rushstack/eslint-patch@1.2.0': {}
 
-  '@s2-dev/streamstore@0.17.3(typescript@5.9.3)':
+  '@s2-dev/streamstore@0.17.3(typescript@5.5.4)':
     dependencies:
       '@protobuf-ts/runtime': 2.11.1
-      typescript: 5.9.3
+      typescript: 5.5.4
 
   '@s2-dev/streamstore@0.17.6':
     dependencies:
@@ -29108,15 +29122,15 @@ snapshots:
       hoist-non-react-statics: 3.3.2
       react: 18.2.0
 
-  '@sentry/remix@9.46.0(patch_hash=146126b032581925294aaed63ab53ce3f5e0356a755f1763d7a9a76b9846943b)(@remix-run/node@2.1.0(typescript@5.9.3))(@remix-run/react@2.1.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.9.3))(@remix-run/server-runtime@2.1.0(typescript@5.9.3))(encoding@0.1.13)(react@18.2.0)':
+  '@sentry/remix@9.46.0(patch_hash=146126b032581925294aaed63ab53ce3f5e0356a755f1763d7a9a76b9846943b)(@remix-run/node@2.1.0(typescript@5.5.4))(@remix-run/react@2.1.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.5.4))(@remix-run/server-runtime@2.1.0(typescript@5.5.4))(encoding@0.1.13)(react@18.2.0)':
     dependencies:
       '@opentelemetry/api': 1.9.0
       '@opentelemetry/instrumentation': 0.57.2(@opentelemetry/api@1.9.0)
       '@opentelemetry/semantic-conventions': 1.36.0
-      '@remix-run/node': 2.1.0(typescript@5.9.3)
-      '@remix-run/react': 2.1.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.9.3)
+      '@remix-run/node': 2.1.0(typescript@5.5.4)
+      '@remix-run/react': 2.1.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.5.4)
       '@remix-run/router': 1.15.3
-      '@remix-run/server-runtime': 2.1.0(typescript@5.9.3)
+      '@remix-run/server-runtime': 2.1.0(typescript@5.5.4)
       '@sentry/cli': 2.50.2(encoding@0.1.13)
       '@sentry/core': 9.46.0
       '@sentry/node': 9.46.0
@@ -30346,12 +30360,20 @@ snapshots:
       '@tanstack/query-core': 5.76.0
       react: 18.2.0
 
+  '@tanstack/react-table@8.21.3(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+    dependencies:
+      '@tanstack/table-core': 8.21.3
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+
   '@tanstack/react-virtual@3.0.4(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
       '@tanstack/virtual-core': 3.0.0
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
 
+  '@tanstack/table-core@8.21.3': {}
+
   '@tanstack/virtual-core@3.0.0': {}
 
   '@team-plain/typescript-sdk@3.5.0':
@@ -31007,34 +31029,34 @@ snapshots:
       '@types/node': 20.14.14
     optional: true
 
-  '@typescript-eslint/eslint-plugin@5.59.6(@typescript-eslint/parser@5.59.6(eslint@8.31.0)(typescript@5.9.3))(eslint@8.31.0)(typescript@5.9.3)':
+  '@typescript-eslint/eslint-plugin@5.59.6(@typescript-eslint/parser@5.59.6(eslint@8.31.0)(typescript@5.5.4))(eslint@8.31.0)(typescript@5.5.4)':
     dependencies:
       '@eslint-community/regexpp': 4.5.1
-      '@typescript-eslint/parser': 5.59.6(eslint@8.31.0)(typescript@5.9.3)
+      '@typescript-eslint/parser': 5.59.6(eslint@8.31.0)(typescript@5.5.4)
       '@typescript-eslint/scope-manager': 5.59.6
-      '@typescript-eslint/type-utils': 5.59.6(eslint@8.31.0)(typescript@5.9.3)
-      '@typescript-eslint/utils': 5.59.6(eslint@8.31.0)(typescript@5.9.3)
+      '@typescript-eslint/type-utils': 5.59.6(eslint@8.31.0)(typescript@5.5.4)
+      '@typescript-eslint/utils': 5.59.6(eslint@8.31.0)(typescript@5.5.4)
       debug: 4.3.4
       eslint: 8.31.0
       grapheme-splitter: 1.0.4
       ignore: 5.2.4
       natural-compare-lite: 1.4.0
       semver: 7.6.3
-      tsutils: 3.21.0(typescript@5.9.3)
+      tsutils: 3.21.0(typescript@5.5.4)
     optionalDependencies:
-      typescript: 5.9.3
+      typescript: 5.5.4
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/parser@5.59.6(eslint@8.31.0)(typescript@5.9.3)':
+  '@typescript-eslint/parser@5.59.6(eslint@8.31.0)(typescript@5.5.4)':
     dependencies:
       '@typescript-eslint/scope-manager': 5.59.6
       '@typescript-eslint/types': 5.59.6
-      '@typescript-eslint/typescript-estree': 5.59.6(typescript@5.9.3)
+      '@typescript-eslint/typescript-estree': 5.59.6(typescript@5.5.4)
       debug: 4.4.0
       eslint: 8.31.0
     optionalDependencies:
-      typescript: 5.9.3
+      typescript: 5.5.4
     transitivePeerDependencies:
       - supports-color
 
@@ -31043,21 +31065,21 @@ snapshots:
       '@typescript-eslint/types': 5.59.6
       '@typescript-eslint/visitor-keys': 5.59.6
 
-  '@typescript-eslint/type-utils@5.59.6(eslint@8.31.0)(typescript@5.9.3)':
+  '@typescript-eslint/type-utils@5.59.6(eslint@8.31.0)(typescript@5.5.4)':
     dependencies:
-      '@typescript-eslint/typescript-estree': 5.59.6(typescript@5.9.3)
-      '@typescript-eslint/utils': 5.59.6(eslint@8.31.0)(typescript@5.9.3)
+      '@typescript-eslint/typescript-estree': 5.59.6(typescript@5.5.4)
+      '@typescript-eslint/utils': 5.59.6(eslint@8.31.0)(typescript@5.5.4)
       debug: 4.4.1(supports-color@10.0.0)
       eslint: 8.31.0
-      tsutils: 3.21.0(typescript@5.9.3)
+      tsutils: 3.21.0(typescript@5.5.4)
     optionalDependencies:
-      typescript: 5.9.3
+      typescript: 5.5.4
     transitivePeerDependencies:
       - supports-color
 
   '@typescript-eslint/types@5.59.6': {}
 
-  '@typescript-eslint/typescript-estree@5.59.6(typescript@5.9.3)':
+  '@typescript-eslint/typescript-estree@5.59.6(typescript@5.5.4)':
     dependencies:
       '@typescript-eslint/types': 5.59.6
       '@typescript-eslint/visitor-keys': 5.59.6
@@ -31065,20 +31087,20 @@ snapshots:
       globby: 11.1.0
       is-glob: 4.0.3
       semver: 7.7.3
-      tsutils: 3.21.0(typescript@5.9.3)
+      tsutils: 3.21.0(typescript@5.5.4)
     optionalDependencies:
-      typescript: 5.9.3
+      typescript: 5.5.4
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/utils@5.59.6(eslint@8.31.0)(typescript@5.9.3)':
+  '@typescript-eslint/utils@5.59.6(eslint@8.31.0)(typescript@5.5.4)':
     dependencies:
       '@eslint-community/eslint-utils': 4.4.0(eslint@8.31.0)
       '@types/json-schema': 7.0.13
       '@types/semver': 7.5.1
       '@typescript-eslint/scope-manager': 5.59.6
       '@typescript-eslint/types': 5.59.6
-      '@typescript-eslint/typescript-estree': 5.59.6(typescript@5.9.3)
+      '@typescript-eslint/typescript-estree': 5.59.6(typescript@5.5.4)
       eslint: 8.31.0
       eslint-scope: 5.1.1
       semver: 7.7.3
@@ -31345,11 +31367,11 @@ snapshots:
       '@vue/shared': 3.5.24
       csstype: 3.2.0
 
-  '@vue/server-renderer@3.5.24(vue@3.5.24(typescript@5.9.3))':
+  '@vue/server-renderer@3.5.24(vue@3.5.24(typescript@5.5.4))':
     dependencies:
       '@vue/compiler-ssr': 3.5.24
       '@vue/shared': 3.5.24
-      vue: 3.5.24(typescript@5.9.3)
+      vue: 3.5.24(typescript@5.5.4)
 
   '@vue/shared@3.5.24': {}
 
@@ -31636,7 +31658,7 @@ snapshots:
 
   ahocorasick@1.0.2: {}
 
-  ai@3.4.33(openai@4.97.0(encoding@0.1.13)(ws@8.18.3(bufferutil@4.0.9))(zod@3.25.76))(react@19.1.0)(sswr@2.1.0(svelte@5.43.6))(svelte@5.43.6)(vue@3.5.24(typescript@5.9.3))(zod@3.25.76):
+  ai@3.4.33(openai@4.97.0(encoding@0.1.13)(ws@8.18.3(bufferutil@4.0.9))(zod@3.25.76))(react@19.1.0)(sswr@2.1.0(svelte@5.43.6))(svelte@5.43.6)(vue@3.5.24(typescript@5.5.4))(zod@3.25.76):
     dependencies:
       '@ai-sdk/provider': 0.0.26
       '@ai-sdk/provider-utils': 1.0.22(zod@3.25.76)
@@ -31644,7 +31666,7 @@ snapshots:
       '@ai-sdk/solid': 0.0.54(zod@3.25.76)
       '@ai-sdk/svelte': 0.0.57(svelte@5.43.6)(zod@3.25.76)
       '@ai-sdk/ui-utils': 0.0.50(zod@3.25.76)
-      '@ai-sdk/vue': 0.0.59(vue@3.5.24(typescript@5.9.3))(zod@3.25.76)
+      '@ai-sdk/vue': 0.0.59(vue@3.5.24(typescript@5.5.4))(zod@3.25.76)
       '@opentelemetry/api': 1.9.0
       eventsource-parser: 1.1.2
       json-schema: 0.4.0
@@ -32469,9 +32491,9 @@ snapshots:
 
   cjs-module-lexer@1.2.3: {}
 
-  class-variance-authority@0.5.2(typescript@5.9.3):
+  class-variance-authority@0.5.2(typescript@5.5.4):
     optionalDependencies:
-      typescript: 5.9.3
+      typescript: 5.5.4
 
   class-variance-authority@0.7.0:
     dependencies:
@@ -32723,6 +32745,15 @@ snapshots:
     dependencies:
       layout-base: 2.0.1
 
+  cosmiconfig@8.3.6(typescript@5.5.4):
+    dependencies:
+      import-fresh: 3.3.0
+      js-yaml: 4.1.1
+      parse-json: 5.2.0
+      path-type: 4.0.0
+    optionalDependencies:
+      typescript: 5.5.4
+
   cosmiconfig@8.3.6(typescript@5.9.3):
     dependencies:
       import-fresh: 3.3.0
@@ -32732,14 +32763,14 @@ snapshots:
     optionalDependencies:
       typescript: 5.9.3
 
-  cosmiconfig@9.0.0(typescript@5.9.3):
+  cosmiconfig@9.0.0(typescript@5.5.4):
     dependencies:
       env-paths: 2.2.1
       import-fresh: 3.3.0
       js-yaml: 4.1.1
       parse-json: 5.2.0
     optionalDependencies:
-      typescript: 5.9.3
+      typescript: 5.5.4
 
   cp-file@10.0.0:
     dependencies:
@@ -33938,13 +33969,13 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-import-resolver-typescript@3.5.5(@typescript-eslint/parser@5.59.6(eslint@8.31.0)(typescript@5.9.3))(eslint-import-resolver-node@0.3.7)(eslint-plugin-import@2.29.1)(eslint@8.31.0):
+  eslint-import-resolver-typescript@3.5.5(@typescript-eslint/parser@5.59.6(eslint@8.31.0)(typescript@5.5.4))(eslint-import-resolver-node@0.3.7)(eslint-plugin-import@2.29.1)(eslint@8.31.0):
     dependencies:
       debug: 4.4.1(supports-color@10.0.0)
       enhanced-resolve: 5.15.0
       eslint: 8.31.0
-      eslint-module-utils: 2.7.4(@typescript-eslint/parser@5.59.6(eslint@8.31.0)(typescript@5.9.3))(eslint-import-resolver-node@0.3.7)(eslint-import-resolver-typescript@3.5.5)(eslint@8.31.0)
-      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@5.59.6(eslint@8.31.0)(typescript@5.9.3))(eslint-import-resolver-typescript@3.5.5)(eslint@8.31.0)
+      eslint-module-utils: 2.7.4(@typescript-eslint/parser@5.59.6(eslint@8.31.0)(typescript@5.5.4))(eslint-import-resolver-node@0.3.7)(eslint-import-resolver-typescript@3.5.5)(eslint@8.31.0)
+      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@5.59.6(eslint@8.31.0)(typescript@5.5.4))(eslint-import-resolver-typescript@3.5.5)(eslint@8.31.0)
       get-tsconfig: 4.7.2
       globby: 13.2.2
       is-core-module: 2.14.0
@@ -33956,25 +33987,25 @@ snapshots:
       - eslint-import-resolver-webpack
       - supports-color
 
-  eslint-module-utils@2.7.4(@typescript-eslint/parser@5.59.6(eslint@8.31.0)(typescript@5.9.3))(eslint-import-resolver-node@0.3.7)(eslint-import-resolver-typescript@3.5.5)(eslint@8.31.0):
+  eslint-module-utils@2.7.4(@typescript-eslint/parser@5.59.6(eslint@8.31.0)(typescript@5.5.4))(eslint-import-resolver-node@0.3.7)(eslint-import-resolver-typescript@3.5.5)(eslint@8.31.0):
     dependencies:
       debug: 3.2.7
     optionalDependencies:
-      '@typescript-eslint/parser': 5.59.6(eslint@8.31.0)(typescript@5.9.3)
+      '@typescript-eslint/parser': 5.59.6(eslint@8.31.0)(typescript@5.5.4)
       eslint: 8.31.0
       eslint-import-resolver-node: 0.3.7
-      eslint-import-resolver-typescript: 3.5.5(@typescript-eslint/parser@5.59.6(eslint@8.31.0)(typescript@5.9.3))(eslint-import-resolver-node@0.3.7)(eslint-plugin-import@2.29.1)(eslint@8.31.0)
+      eslint-import-resolver-typescript: 3.5.5(@typescript-eslint/parser@5.59.6(eslint@8.31.0)(typescript@5.5.4))(eslint-import-resolver-node@0.3.7)(eslint-plugin-import@2.29.1)(eslint@8.31.0)
     transitivePeerDependencies:
       - supports-color
 
-  eslint-module-utils@2.8.1(@typescript-eslint/parser@5.59.6(eslint@8.31.0)(typescript@5.9.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.5.5)(eslint@8.31.0):
+  eslint-module-utils@2.8.1(@typescript-eslint/parser@5.59.6(eslint@8.31.0)(typescript@5.5.4))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.5.5)(eslint@8.31.0):
     dependencies:
       debug: 3.2.7
     optionalDependencies:
-      '@typescript-eslint/parser': 5.59.6(eslint@8.31.0)(typescript@5.9.3)
+      '@typescript-eslint/parser': 5.59.6(eslint@8.31.0)(typescript@5.5.4)
       eslint: 8.31.0
       eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.5.5(@typescript-eslint/parser@5.59.6(eslint@8.31.0)(typescript@5.9.3))(eslint-import-resolver-node@0.3.7)(eslint-plugin-import@2.29.1)(eslint@8.31.0)
+      eslint-import-resolver-typescript: 3.5.5(@typescript-eslint/parser@5.59.6(eslint@8.31.0)(typescript@5.5.4))(eslint-import-resolver-node@0.3.7)(eslint-plugin-import@2.29.1)(eslint@8.31.0)
     transitivePeerDependencies:
       - supports-color
 
@@ -33984,7 +34015,7 @@ snapshots:
       eslint-utils: 2.1.0
       regexpp: 3.2.0
 
-  eslint-plugin-import@2.29.1(@typescript-eslint/parser@5.59.6(eslint@8.31.0)(typescript@5.9.3))(eslint-import-resolver-typescript@3.5.5)(eslint@8.31.0):
+  eslint-plugin-import@2.29.1(@typescript-eslint/parser@5.59.6(eslint@8.31.0)(typescript@5.5.4))(eslint-import-resolver-typescript@3.5.5)(eslint@8.31.0):
     dependencies:
       array-includes: 3.1.8
       array.prototype.findlastindex: 1.2.5
@@ -33994,7 +34025,7 @@ snapshots:
       doctrine: 2.1.0
       eslint: 8.31.0
       eslint-import-resolver-node: 0.3.9
-      eslint-module-utils: 2.8.1(@typescript-eslint/parser@5.59.6(eslint@8.31.0)(typescript@5.9.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.5.5)(eslint@8.31.0)
+      eslint-module-utils: 2.8.1(@typescript-eslint/parser@5.59.6(eslint@8.31.0)(typescript@5.5.4))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.5.5)(eslint@8.31.0)
       hasown: 2.0.2
       is-core-module: 2.14.0
       is-glob: 4.0.3
@@ -34005,7 +34036,7 @@ snapshots:
       semver: 6.3.1
       tsconfig-paths: 3.15.0
     optionalDependencies:
-      '@typescript-eslint/parser': 5.59.6(eslint@8.31.0)(typescript@5.9.3)
+      '@typescript-eslint/parser': 5.59.6(eslint@8.31.0)(typescript@5.5.4)
     transitivePeerDependencies:
       - eslint-import-resolver-typescript
       - eslint-import-resolver-webpack
@@ -34018,12 +34049,12 @@ snapshots:
       eslint: 8.31.0
       requireindex: 1.2.0
 
-  eslint-plugin-jest@26.9.0(@typescript-eslint/eslint-plugin@5.59.6(@typescript-eslint/parser@5.59.6(eslint@8.31.0)(typescript@5.9.3))(eslint@8.31.0)(typescript@5.9.3))(eslint@8.31.0)(typescript@5.9.3):
+  eslint-plugin-jest@26.9.0(@typescript-eslint/eslint-plugin@5.59.6(@typescript-eslint/parser@5.59.6(eslint@8.31.0)(typescript@5.5.4))(eslint@8.31.0)(typescript@5.5.4))(eslint@8.31.0)(typescript@5.5.4):
     dependencies:
-      '@typescript-eslint/utils': 5.59.6(eslint@8.31.0)(typescript@5.9.3)
+      '@typescript-eslint/utils': 5.59.6(eslint@8.31.0)(typescript@5.5.4)
       eslint: 8.31.0
     optionalDependencies:
-      '@typescript-eslint/eslint-plugin': 5.59.6(@typescript-eslint/parser@5.59.6(eslint@8.31.0)(typescript@5.9.3))(eslint@8.31.0)(typescript@5.9.3)
+      '@typescript-eslint/eslint-plugin': 5.59.6(@typescript-eslint/parser@5.59.6(eslint@8.31.0)(typescript@5.5.4))(eslint@8.31.0)(typescript@5.5.4)
     transitivePeerDependencies:
       - supports-color
       - typescript
@@ -34081,9 +34112,9 @@ snapshots:
       semver: 6.3.1
       string.prototype.matchall: 4.0.8
 
-  eslint-plugin-testing-library@5.11.0(eslint@8.31.0)(typescript@5.9.3):
+  eslint-plugin-testing-library@5.11.0(eslint@8.31.0)(typescript@5.5.4):
     dependencies:
-      '@typescript-eslint/utils': 5.59.6(eslint@8.31.0)(typescript@5.9.3)
+      '@typescript-eslint/utils': 5.59.6(eslint@8.31.0)(typescript@5.5.4)
       eslint: 8.31.0
     transitivePeerDependencies:
       - supports-color
@@ -35011,6 +35042,22 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  graphile-worker@0.16.6(patch_hash=798129c99ed02177430fc90a1fdef800ec94e5fd1d491b931297dc52f4c98ab1)(typescript@5.5.4):
+    dependencies:
+      '@graphile/logger': 0.2.0
+      '@types/debug': 4.1.12
+      '@types/pg': 8.11.6
+      cosmiconfig: 8.3.6(typescript@5.5.4)
+      graphile-config: 0.0.1-beta.8
+      json5: 2.2.3
+      pg: 8.11.5
+      tslib: 2.6.2
+      yargs: 17.7.2
+    transitivePeerDependencies:
+      - pg-native
+      - supports-color
+      - typescript
+
   graphile-worker@0.16.6(patch_hash=798129c99ed02177430fc90a1fdef800ec94e5fd1d491b931297dc52f4c98ab1)(typescript@5.9.3):
     dependencies:
       '@graphile/logger': 0.2.0
@@ -38229,9 +38276,9 @@ snapshots:
       tsx: 4.17.0
       yaml: 2.7.1
 
-  postcss-loader@8.1.1(postcss@8.5.6)(typescript@5.9.3)(webpack@5.102.1(@swc/core@1.3.26)(esbuild@0.15.18)):
+  postcss-loader@8.1.1(postcss@8.5.6)(typescript@5.5.4)(webpack@5.102.1(@swc/core@1.3.26)(esbuild@0.15.18)):
     dependencies:
-      cosmiconfig: 9.0.0(typescript@5.9.3)
+      cosmiconfig: 9.0.0(typescript@5.5.4)
       jiti: 1.21.0
       postcss: 8.5.6
       semver: 7.6.3
@@ -38845,7 +38892,7 @@ snapshots:
       react: 19.1.0
       scheduler: 0.26.0
 
-  react-email@2.1.2(@opentelemetry/api@1.9.0)(@swc/helpers@0.5.15)(eslint@8.31.0):
+  react-email@2.1.2(@opentelemetry/api@1.9.0)(@swc/helpers@0.5.15)(bufferutil@4.0.9)(eslint@8.31.0):
     dependencies:
       '@babel/parser': 7.24.1
       '@radix-ui/colors': 1.0.1
@@ -38882,8 +38929,8 @@ snapshots:
       react: 18.3.1
       react-dom: 18.2.0(react@18.3.1)
       shelljs: 0.8.5
-      socket.io: 4.7.3
-      socket.io-client: 4.7.3
+      socket.io: 4.7.3(bufferutil@4.0.9)
+      socket.io-client: 4.7.3(bufferutil@4.0.9)
       sonner: 1.3.1(react-dom@18.2.0(react@18.3.1))(react@18.3.1)
       source-map-js: 1.0.2
       stacktrace-parser: 0.1.10
@@ -39408,54 +39455,54 @@ snapshots:
       mdast-util-to-markdown: 2.1.2
       unified: 11.0.5
 
-  remix-auth-email-link@2.0.2(@remix-run/server-runtime@2.1.0(typescript@5.9.3))(remix-auth@3.6.0(@remix-run/react@2.1.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.9.3))(@remix-run/server-runtime@2.1.0(typescript@5.9.3))):
+  remix-auth-email-link@2.0.2(@remix-run/server-runtime@2.1.0(typescript@5.5.4))(remix-auth@3.6.0(@remix-run/react@2.1.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.5.4))(@remix-run/server-runtime@2.1.0(typescript@5.5.4))):
     dependencies:
-      '@remix-run/server-runtime': 2.1.0(typescript@5.9.3)
+      '@remix-run/server-runtime': 2.1.0(typescript@5.5.4)
       crypto-js: 4.1.1
-      remix-auth: 3.6.0(@remix-run/react@2.1.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.9.3))(@remix-run/server-runtime@2.1.0(typescript@5.9.3))
+      remix-auth: 3.6.0(@remix-run/react@2.1.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.5.4))(@remix-run/server-runtime@2.1.0(typescript@5.5.4))
 
-  remix-auth-github@1.6.0(@remix-run/server-runtime@2.1.0(typescript@5.9.3))(remix-auth@3.6.0(@remix-run/react@2.1.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.9.3))(@remix-run/server-runtime@2.1.0(typescript@5.9.3))):
+  remix-auth-github@1.6.0(@remix-run/server-runtime@2.1.0(typescript@5.5.4))(remix-auth@3.6.0(@remix-run/react@2.1.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.5.4))(@remix-run/server-runtime@2.1.0(typescript@5.5.4))):
     dependencies:
-      '@remix-run/server-runtime': 2.1.0(typescript@5.9.3)
-      remix-auth: 3.6.0(@remix-run/react@2.1.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.9.3))(@remix-run/server-runtime@2.1.0(typescript@5.9.3))
-      remix-auth-oauth2: 1.11.0(@remix-run/server-runtime@2.1.0(typescript@5.9.3))(remix-auth@3.6.0(@remix-run/react@2.1.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.9.3))(@remix-run/server-runtime@2.1.0(typescript@5.9.3)))
+      '@remix-run/server-runtime': 2.1.0(typescript@5.5.4)
+      remix-auth: 3.6.0(@remix-run/react@2.1.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.5.4))(@remix-run/server-runtime@2.1.0(typescript@5.5.4))
+      remix-auth-oauth2: 1.11.0(@remix-run/server-runtime@2.1.0(typescript@5.5.4))(remix-auth@3.6.0(@remix-run/react@2.1.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.5.4))(@remix-run/server-runtime@2.1.0(typescript@5.5.4)))
     transitivePeerDependencies:
       - supports-color
 
-  remix-auth-google@2.0.0(@remix-run/server-runtime@2.1.0(typescript@5.9.3))(remix-auth@3.6.0(@remix-run/react@2.1.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.9.3))(@remix-run/server-runtime@2.1.0(typescript@5.9.3))):
+  remix-auth-google@2.0.0(@remix-run/server-runtime@2.1.0(typescript@5.5.4))(remix-auth@3.6.0(@remix-run/react@2.1.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.5.4))(@remix-run/server-runtime@2.1.0(typescript@5.5.4))):
     dependencies:
-      '@remix-run/server-runtime': 2.1.0(typescript@5.9.3)
-      remix-auth: 3.6.0(@remix-run/react@2.1.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.9.3))(@remix-run/server-runtime@2.1.0(typescript@5.9.3))
-      remix-auth-oauth2: 1.11.0(@remix-run/server-runtime@2.1.0(typescript@5.9.3))(remix-auth@3.6.0(@remix-run/react@2.1.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.9.3))(@remix-run/server-runtime@2.1.0(typescript@5.9.3)))
+      '@remix-run/server-runtime': 2.1.0(typescript@5.5.4)
+      remix-auth: 3.6.0(@remix-run/react@2.1.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.5.4))(@remix-run/server-runtime@2.1.0(typescript@5.5.4))
+      remix-auth-oauth2: 1.11.0(@remix-run/server-runtime@2.1.0(typescript@5.5.4))(remix-auth@3.6.0(@remix-run/react@2.1.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.5.4))(@remix-run/server-runtime@2.1.0(typescript@5.5.4)))
     transitivePeerDependencies:
       - supports-color
 
-  remix-auth-oauth2@1.11.0(@remix-run/server-runtime@2.1.0(typescript@5.9.3))(remix-auth@3.6.0(@remix-run/react@2.1.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.9.3))(@remix-run/server-runtime@2.1.0(typescript@5.9.3))):
+  remix-auth-oauth2@1.11.0(@remix-run/server-runtime@2.1.0(typescript@5.5.4))(remix-auth@3.6.0(@remix-run/react@2.1.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.5.4))(@remix-run/server-runtime@2.1.0(typescript@5.5.4))):
     dependencies:
-      '@remix-run/server-runtime': 2.1.0(typescript@5.9.3)
+      '@remix-run/server-runtime': 2.1.0(typescript@5.5.4)
       debug: 4.4.1(supports-color@10.0.0)
-      remix-auth: 3.6.0(@remix-run/react@2.1.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.9.3))(@remix-run/server-runtime@2.1.0(typescript@5.9.3))
+      remix-auth: 3.6.0(@remix-run/react@2.1.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.5.4))(@remix-run/server-runtime@2.1.0(typescript@5.5.4))
     transitivePeerDependencies:
       - supports-color
 
-  remix-auth@3.6.0(@remix-run/react@2.1.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.9.3))(@remix-run/server-runtime@2.1.0(typescript@5.9.3)):
+  remix-auth@3.6.0(@remix-run/react@2.1.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.5.4))(@remix-run/server-runtime@2.1.0(typescript@5.5.4)):
     dependencies:
-      '@remix-run/react': 2.1.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.9.3)
-      '@remix-run/server-runtime': 2.1.0(typescript@5.9.3)
+      '@remix-run/react': 2.1.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.5.4)
+      '@remix-run/server-runtime': 2.1.0(typescript@5.5.4)
       uuid: 8.3.2
 
-  remix-typedjson@0.3.1(@remix-run/react@2.1.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.9.3))(@remix-run/server-runtime@2.1.0(typescript@5.9.3))(react@18.2.0):
+  remix-typedjson@0.3.1(@remix-run/react@2.1.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.5.4))(@remix-run/server-runtime@2.1.0(typescript@5.5.4))(react@18.2.0):
     dependencies:
-      '@remix-run/react': 2.1.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.9.3)
-      '@remix-run/server-runtime': 2.1.0(typescript@5.9.3)
+      '@remix-run/react': 2.1.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.5.4)
+      '@remix-run/server-runtime': 2.1.0(typescript@5.5.4)
       react: 18.2.0
 
-  remix-utils@7.7.0(@remix-run/node@2.1.0(typescript@5.9.3))(@remix-run/react@2.1.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.9.3))(@remix-run/router@1.15.3)(crypto-js@4.2.0)(intl-parse-accept-language@1.0.0)(react@18.2.0)(zod@3.25.76):
+  remix-utils@7.7.0(@remix-run/node@2.1.0(typescript@5.5.4))(@remix-run/react@2.1.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.5.4))(@remix-run/router@1.15.3)(crypto-js@4.2.0)(intl-parse-accept-language@1.0.0)(react@18.2.0)(zod@3.25.76):
     dependencies:
       type-fest: 4.33.0
     optionalDependencies:
-      '@remix-run/node': 2.1.0(typescript@5.9.3)
-      '@remix-run/react': 2.1.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.9.3)
+      '@remix-run/node': 2.1.0(typescript@5.5.4)
+      '@remix-run/react': 2.1.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.5.4)
       '@remix-run/router': 1.15.3
       crypto-js: 4.2.0
       intl-parse-accept-language: 1.0.0
@@ -40030,7 +40077,7 @@ snapshots:
       - supports-color
       - utf-8-validate
 
-  socket.io-client@4.7.3:
+  socket.io-client@4.7.3(bufferutil@4.0.9):
     dependencies:
       '@socket.io/component-emitter': 3.1.0
       debug: 4.3.7(supports-color@10.0.0)
@@ -40059,7 +40106,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  socket.io@4.7.3:
+  socket.io@4.7.3(bufferutil@4.0.9):
     dependencies:
       accepts: 1.3.8
       base64id: 2.0.0
@@ -40554,9 +40601,9 @@ snapshots:
 
   swrev@4.0.0: {}
 
-  swrv@1.0.4(vue@3.5.24(typescript@5.9.3)):
+  swrv@1.0.4(vue@3.5.24(typescript@5.5.4)):
     dependencies:
-      vue: 3.5.24(typescript@5.9.3)
+      vue: 3.5.24(typescript@5.5.4)
 
   sync-content@2.0.1:
     dependencies:
@@ -40986,6 +41033,10 @@ snapshots:
 
   ts-easing@0.2.0: {}
 
+  ts-essentials@10.0.1(typescript@5.5.4):
+    optionalDependencies:
+      typescript: 5.5.4
+
   ts-essentials@10.0.1(typescript@5.9.3):
     optionalDependencies:
       typescript: 5.9.3
@@ -41016,10 +41067,6 @@ snapshots:
     optionalDependencies:
       typescript: 5.5.4
 
-  tsconfck@2.1.2(typescript@5.9.3):
-    optionalDependencies:
-      typescript: 5.9.3
-
   tsconfck@3.1.3(typescript@5.9.3):
     optionalDependencies:
       typescript: 5.9.3
@@ -41096,10 +41143,10 @@ snapshots:
       - tsx
       - yaml
 
-  tsutils@3.21.0(typescript@5.9.3):
+  tsutils@3.21.0(typescript@5.5.4):
     dependencies:
       tslib: 1.14.1
-      typescript: 5.9.3
+      typescript: 5.5.4
 
   tsx@3.12.2:
     dependencies:
@@ -41261,7 +41308,8 @@ snapshots:
 
   typescript@5.5.4: {}
 
-  typescript@5.9.3: {}
+  typescript@5.9.3:
+    optional: true
 
   ufo@1.5.4: {}
 
@@ -41662,15 +41710,6 @@ snapshots:
       - supports-color
       - typescript
 
-  vite-tsconfig-paths@4.0.5(typescript@5.9.3):
-    dependencies:
-      debug: 4.3.7(supports-color@10.0.0)
-      globrex: 0.1.2
-      tsconfck: 2.1.2(typescript@5.9.3)
-    transitivePeerDependencies:
-      - supports-color
-      - typescript
-
   vite@4.4.9(@types/node@22.13.9)(lightningcss@1.29.2)(terser@5.44.1):
     dependencies:
       esbuild: 0.18.11
@@ -41747,15 +41786,15 @@ snapshots:
 
   vscode-uri@3.0.8: {}
 
-  vue@3.5.24(typescript@5.9.3):
+  vue@3.5.24(typescript@5.5.4):
     dependencies:
       '@vue/compiler-dom': 3.5.24
       '@vue/compiler-sfc': 3.5.24
       '@vue/runtime-dom': 3.5.24
-      '@vue/server-renderer': 3.5.24(vue@3.5.24(typescript@5.9.3))
+      '@vue/server-renderer': 3.5.24(vue@3.5.24(typescript@5.5.4))
       '@vue/shared': 3.5.24
     optionalDependencies:
-      typescript: 5.9.3
+      typescript: 5.5.4
 
   w3c-keyname@2.2.8: {}
 

From 87e25371f5f0d279828e754ed635f7d9161ea761 Mon Sep 17 00:00:00 2001
From: Matt Aitken <matt@mattaitken.com>
Date: Thu, 15 Jan 2026 22:50:16 +0000
Subject: [PATCH 098/137] It now renders reasonably well

---
 .../app/components/code/TSQLResultsTable.tsx  | 120 +++++++++++++++++-
 1 file changed, 117 insertions(+), 3 deletions(-)

diff --git a/apps/webapp/app/components/code/TSQLResultsTable.tsx b/apps/webapp/app/components/code/TSQLResultsTable.tsx
index f420e17459..760ed26338 100644
--- a/apps/webapp/app/components/code/TSQLResultsTable.tsx
+++ b/apps/webapp/app/components/code/TSQLResultsTable.tsx
@@ -33,7 +33,13 @@ import { QueueName } from "../runs/v3/QueueName";
 
 const MAX_STRING_DISPLAY_LENGTH = 64;
 const ROW_HEIGHT = 33; // Estimated row height in pixels
-const DEFAULT_COLUMN_SIZE = 150; // Default column width
+
+// Column width calculation constants
+const MIN_COLUMN_WIDTH = 60;
+const MAX_COLUMN_WIDTH = 400;
+const CHAR_WIDTH_PX = 7.5; // Approximate width of a monospace character at text-xs (12px)
+const CELL_PADDING_PX = 40; // px-2 (8px) on each side + buffer for copy button
+const SAMPLE_SIZE = 100; // Number of rows to sample for width calculation
 
 // Type for row data
 type RowData = Record<string, unknown>;
@@ -44,6 +50,113 @@ interface ColumnMeta {
   alignment: "left" | "right";
 }
 
+/**
+ * Get the approximate display length (in characters) of a value based on its type and formatting
+ */
+function getDisplayLength(value: unknown, column: OutputColumnMetadata): number {
+  if (value === null) return 4; // "NULL"
+  if (value === undefined) return 9; // "UNDEFINED"
+
+  // Handle custom render types - estimate their rendered width
+  if (column.customRenderType) {
+    switch (column.customRenderType) {
+      case "runId":
+        // Run IDs are typically like "run_abc123xyz"
+        return typeof value === "string" ? Math.min(value.length, MAX_STRING_DISPLAY_LENGTH) : 15;
+      case "runStatus":
+        // Status badges have icon + text, approximate width
+        return 12;
+      case "duration":
+        if (typeof value === "number") {
+          // Format and measure: "1h 23m 45s" style
+          const formatted = formatDurationMilliseconds(value, { style: "short" });
+          return formatted.length;
+        }
+        return 10;
+      case "durationSeconds":
+        if (typeof value === "number") {
+          const formatted = formatDurationMilliseconds(value * 1000, { style: "short" });
+          return formatted.length;
+        }
+        return 10;
+      case "cost":
+      case "costInDollars":
+        // Currency format: "$1,234.56"
+        if (typeof value === "number") {
+          const amount = column.customRenderType === "cost" ? value / 100 : value;
+          return formatCurrencyAccurate(amount).length;
+        }
+        return 12;
+      case "machine":
+        // Machine preset names like "small-1x"
+        return typeof value === "string" ? value.length : 10;
+      case "environmentType":
+        // Environment labels: "PRODUCTION", "STAGING", etc.
+        return 12;
+      case "project":
+      case "environment":
+        return typeof value === "string" ? Math.min(value.length, 20) : 12;
+      case "queue":
+        return typeof value === "string" ? Math.min(value.length, 25) : 15;
+    }
+  }
+
+  // Handle by ClickHouse type
+  if (isDateTimeType(column.type)) {
+    // DateTime format: "Jan 15, 2026, 12:34:56 PM"
+    return 24;
+  }
+
+  if (column.type === "JSON" || column.type.startsWith("Array")) {
+    if (typeof value === "object") {
+      const jsonStr = JSON.stringify(value);
+      return Math.min(jsonStr.length, MAX_STRING_DISPLAY_LENGTH);
+    }
+  }
+
+  if (isBooleanType(column.type)) {
+    return 5; // "true" or "false"
+  }
+
+  if (isNumericType(column.type)) {
+    if (typeof value === "number") {
+      return formatNumber(value).length;
+    }
+  }
+
+  // Default: string length capped at max display length
+  const strValue = String(value);
+  return Math.min(strValue.length, MAX_STRING_DISPLAY_LENGTH);
+}
+
+/**
+ * Calculate the optimal width for a column based on its content
+ */
+function calculateColumnWidth(
+  columnName: string,
+  rows: RowData[],
+  column: OutputColumnMetadata
+): number {
+  // Start with header length
+  let maxLength = columnName.length;
+
+  // Sample rows to find max content length
+  const sampleRows = rows.slice(0, SAMPLE_SIZE);
+  for (const row of sampleRows) {
+    const value = row[columnName];
+    const displayLength = getDisplayLength(value, column);
+    if (displayLength > maxLength) {
+      maxLength = displayLength;
+    }
+  }
+
+  // Calculate pixel width: characters * char width + padding
+  const calculatedWidth = Math.ceil(maxLength * CHAR_WIDTH_PX + CELL_PADDING_PX);
+
+  // Apply min/max bounds
+  return Math.min(MAX_COLUMN_WIDTH, Math.max(MIN_COLUMN_WIDTH, calculatedWidth));
+}
+
 /**
  * Truncate a string for display, adding ellipsis if it exceeds max length
  */
@@ -526,6 +639,7 @@ export const TSQLResultsTable = memo(function TSQLResultsTable({
   const tableContainerRef = useRef<HTMLDivElement>(null);
 
   // Create TanStack Table column definitions from OutputColumnMetadata
+  // Calculate column widths based on content
   const columnDefs = useMemo<ColumnDef<RowData, unknown>[]>(
     () =>
       columns.map((col) => ({
@@ -543,9 +657,9 @@ export const TSQLResultsTable = memo(function TSQLResultsTable({
           outputColumn: col,
           alignment: isRightAlignedColumn(col) ? "right" : "left",
         } as ColumnMeta,
-        size: DEFAULT_COLUMN_SIZE,
+        size: calculateColumnWidth(col.name, rows, col),
       })),
-    [columns, prettyFormatting]
+    [columns, rows, prettyFormatting]
   );
 
   // Initialize TanStack Table

From 32c91f2580a8b5dbe00e25c5d7085d05250a5499 Mon Sep 17 00:00:00 2001
From: Matt Aitken <matt@mattaitken.com>
Date: Thu, 15 Jan 2026 23:02:19 +0000
Subject: [PATCH 099/137] Fix for copy button not being on the right

---
 apps/webapp/app/components/code/TSQLResultsTable.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/webapp/app/components/code/TSQLResultsTable.tsx b/apps/webapp/app/components/code/TSQLResultsTable.tsx
index 760ed26338..6fd2804e3a 100644
--- a/apps/webapp/app/components/code/TSQLResultsTable.tsx
+++ b/apps/webapp/app/components/code/TSQLResultsTable.tsx
@@ -540,7 +540,7 @@ function CopyableCell({
   return (
     <div
       className={cn(
-        "relative flex items-center px-2 py-1.5",
+        "relative flex w-full items-center px-2 py-1.5",
         "font-mono text-xs text-text-dimmed group-hover/row:text-text-bright",
         alignment === "right" && "justify-end"
       )}
@@ -555,7 +555,7 @@ function CopyableCell({
             e.preventDefault();
             copy();
           }}
-          className="absolute right-0 top-1/2 z-10 flex -translate-y-1/2 cursor-pointer"
+          className="absolute right-1 top-1/2 z-10 flex -translate-y-1/2 cursor-pointer"
         >
           <SimpleTooltip
             button={

From 547ac8e25d9e8d212d8b94ffa9fb2fbe65fa47b8 Mon Sep 17 00:00:00 2001
From: Matt Aitken <matt@mattaitken.com>
Date: Thu, 15 Jan 2026 23:05:44 +0000
Subject: [PATCH 100/137] Resizable columns

---
 .../app/components/code/TSQLResultsTable.tsx  | 31 +++++++++++++++++++
 1 file changed, 31 insertions(+)

diff --git a/apps/webapp/app/components/code/TSQLResultsTable.tsx b/apps/webapp/app/components/code/TSQLResultsTable.tsx
index 6fd2804e3a..20c8bc80e3 100644
--- a/apps/webapp/app/components/code/TSQLResultsTable.tsx
+++ b/apps/webapp/app/components/code/TSQLResultsTable.tsx
@@ -5,6 +5,7 @@ import {
   flexRender,
   type ColumnDef,
   type CellContext,
+  type ColumnResizeMode,
 } from "@tanstack/react-table";
 import { useVirtualizer } from "@tanstack/react-virtual";
 import { formatDurationMilliseconds, MachinePresetName } from "@trigger.dev/core/v3";
@@ -663,9 +664,13 @@ export const TSQLResultsTable = memo(function TSQLResultsTable({
   );
 
   // Initialize TanStack Table
+  // Column resize mode: 'onChange' for real-time feedback, 'onEnd' for performance
+  const columnResizeMode: ColumnResizeMode = "onChange";
+
   const table = useReactTable({
     data: rows,
     columns: columnDefs,
+    columnResizeMode,
     getCoreRowModel: getCoreRowModel(),
   });
 
@@ -705,6 +710,7 @@ export const TSQLResultsTable = memo(function TSQLResultsTable({
                   return (
                     <th
                       key={header.id}
+                      className="group/header relative"
                       style={{
                         display: "flex",
                         width: header.getSize(),
@@ -716,6 +722,18 @@ export const TSQLResultsTable = memo(function TSQLResultsTable({
                       >
                         {flexRender(header.column.columnDef.header, header.getContext())}
                       </HeaderCellContent>
+                      {/* Column resizer */}
+                      <div
+                        onDoubleClick={() => header.column.resetSize()}
+                        onMouseDown={header.getResizeHandler()}
+                        onTouchStart={header.getResizeHandler()}
+                        className={cn(
+                          "absolute right-0 top-0 h-full w-1 cursor-col-resize touch-none select-none",
+                          "opacity-0 group-hover/header:opacity-100",
+                          "bg-charcoal-600 hover:bg-primary",
+                          header.column.getIsResizing() && "bg-primary opacity-100"
+                        )}
+                      />
                     </th>
                   );
                 })}
@@ -759,6 +777,7 @@ export const TSQLResultsTable = memo(function TSQLResultsTable({
                 return (
                   <th
                     key={header.id}
+                    className="group/header relative"
                     style={{
                       display: "flex",
                       width: header.getSize(),
@@ -770,6 +789,18 @@ export const TSQLResultsTable = memo(function TSQLResultsTable({
                     >
                       {flexRender(header.column.columnDef.header, header.getContext())}
                     </HeaderCellContent>
+                    {/* Column resizer */}
+                    <div
+                      onDoubleClick={() => header.column.resetSize()}
+                      onMouseDown={header.getResizeHandler()}
+                      onTouchStart={header.getResizeHandler()}
+                      className={cn(
+                        "absolute right-0 top-0 h-full w-1 cursor-col-resize touch-none select-none",
+                        "opacity-0 group-hover/header:opacity-100",
+                        "bg-charcoal-600 hover:bg-primary",
+                        header.column.getIsResizing() && "bg-primary opacity-100"
+                      )}
+                    />
                   </th>
                 );
               })}

From fa3080cc9ddc7c6093668822280b83a0da70ed2d Mon Sep 17 00:00:00 2001
From: Matt Aitken <matt@mattaitken.com>
Date: Thu, 15 Jan 2026 23:09:01 +0000
Subject: [PATCH 101/137] Clipping columns

---
 .../webapp/app/components/code/TSQLResultsTable.tsx | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/apps/webapp/app/components/code/TSQLResultsTable.tsx b/apps/webapp/app/components/code/TSQLResultsTable.tsx
index 20c8bc80e3..72ae48a90b 100644
--- a/apps/webapp/app/components/code/TSQLResultsTable.tsx
+++ b/apps/webapp/app/components/code/TSQLResultsTable.tsx
@@ -541,14 +541,15 @@ function CopyableCell({
   return (
     <div
       className={cn(
-        "relative flex w-full items-center px-2 py-1.5",
+        "relative flex w-full items-center overflow-hidden px-2 py-1.5",
+        "bg-background-dimmed group-hover/row:bg-charcoal-800",
         "font-mono text-xs text-text-dimmed group-hover/row:text-text-bright",
         alignment === "right" && "justify-end"
       )}
       onMouseEnter={() => setIsHovered(true)}
       onMouseLeave={() => setIsHovered(false)}
     >
-      {children}
+      <span className="truncate">{children}</span>
       {isHovered && (
         <span
           onClick={(e) => {
@@ -601,7 +602,7 @@ function HeaderCellContent({
   return (
     <div
       className={cn(
-        "flex items-center px-2 py-1.5",
+        "flex w-full items-center overflow-hidden bg-background-dimmed px-2 py-1.5",
         "text-sm font-medium text-text-bright",
         alignment === "right" && "justify-end"
       )}
@@ -610,11 +611,11 @@ function HeaderCellContent({
     >
       {tooltip ? (
         <div
-          className={cn("flex items-center gap-1", {
+          className={cn("flex items-center gap-1 truncate", {
             "justify-end": alignment === "right",
           })}
         >
-          {children}
+          <span className="truncate">{children}</span>
           <InfoIconTooltip
             content={tooltip}
             contentClassName="normal-case tracking-normal"
@@ -622,7 +623,7 @@ function HeaderCellContent({
           />
         </div>
       ) : (
-        children
+        <span className="truncate">{children}</span>
       )}
     </div>
   );

From b4ac6f17e7016193487ea07b1c695d6e282689ef Mon Sep 17 00:00:00 2001
From: Matt Aitken <matt@mattaitken.com>
Date: Thu, 15 Jan 2026 23:28:50 +0000
Subject: [PATCH 102/137] Added column filtering

---
 .../app/components/code/TSQLResultsTable.tsx  | 165 +++++++++++++++++-
 apps/webapp/package.json                      |   1 +
 pnpm-lock.yaml                                |  11 ++
 3 files changed, 171 insertions(+), 6 deletions(-)

diff --git a/apps/webapp/app/components/code/TSQLResultsTable.tsx b/apps/webapp/app/components/code/TSQLResultsTable.tsx
index 72ae48a90b..debe249093 100644
--- a/apps/webapp/app/components/code/TSQLResultsTable.tsx
+++ b/apps/webapp/app/components/code/TSQLResultsTable.tsx
@@ -1,16 +1,21 @@
 import type { OutputColumnMetadata } from "@internal/clickhouse";
+import { rankItem } from "@tanstack/match-sorter-utils";
 import {
   useReactTable,
   getCoreRowModel,
+  getFilteredRowModel,
   flexRender,
   type ColumnDef,
   type CellContext,
   type ColumnResizeMode,
+  type ColumnFiltersState,
+  type FilterFn,
+  type Column,
 } from "@tanstack/react-table";
 import { useVirtualizer } from "@tanstack/react-virtual";
 import { formatDurationMilliseconds, MachinePresetName } from "@trigger.dev/core/v3";
-import { ClipboardCheckIcon, ClipboardIcon } from "lucide-react";
-import { memo, useMemo, useRef, useState } from "react";
+import { ClipboardCheckIcon, ClipboardIcon, FilterIcon } from "lucide-react";
+import { memo, useEffect, useMemo, useRef, useState } from "react";
 import { EnvironmentLabel } from "~/components/environments/EnvironmentLabel";
 import { MachineLabelCombo } from "~/components/MachineLabelCombo";
 import { DateTimeAccurate } from "~/components/primitives/DateTime";
@@ -45,6 +50,67 @@ const SAMPLE_SIZE = 100; // Number of rows to sample for width calculation
 // Type for row data
 type RowData = Record<string, unknown>;
 
+/**
+ * Fuzzy filter function using match-sorter ranking
+ */
+const fuzzyFilter: FilterFn<RowData> = (row, columnId, value, addMeta) => {
+  // Get the cell value and convert to string for matching
+  const cellValue = row.getValue(columnId);
+  const searchValue = String(value);
+
+  // Handle empty search
+  if (!searchValue) return true;
+
+  // Convert cell value to string for ranking
+  const itemValue =
+    cellValue === null
+      ? "NULL"
+      : cellValue === undefined
+      ? ""
+      : typeof cellValue === "object"
+      ? JSON.stringify(cellValue)
+      : String(cellValue);
+
+  // Rank the item
+  const itemRank = rankItem(itemValue, searchValue);
+
+  // Store the ranking info
+  addMeta({ itemRank });
+
+  // Return if the item should be filtered in/out
+  return itemRank.passed;
+};
+
+/**
+ * Debounced input component for filter inputs
+ */
+function DebouncedInput({
+  value: initialValue,
+  onChange,
+  debounce = 300,
+  ...props
+}: {
+  value: string;
+  onChange: (value: string) => void;
+  debounce?: number;
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange">) {
+  const [value, setValue] = useState(initialValue);
+
+  useEffect(() => {
+    setValue(initialValue);
+  }, [initialValue]);
+
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      onChange(value);
+    }, debounce);
+
+    return () => clearTimeout(timeout);
+  }, [value, debounce, onChange]);
+
+  return <input {...props} value={value} onChange={(e) => setValue(e.target.value)} />;
+}
+
 // Extended column meta to store OutputColumnMetadata
 interface ColumnMeta {
   outputColumn: OutputColumnMetadata;
@@ -586,23 +652,29 @@ function CopyableCell({
 }
 
 /**
- * Header cell component with tooltip support
+ * Header cell component with tooltip support and filter toggle
  */
 function HeaderCellContent({
   alignment,
   tooltip,
   children,
+  onFilterClick,
+  showFilters,
+  hasActiveFilter,
 }: {
   alignment: "left" | "right";
   tooltip?: React.ReactNode;
   children: React.ReactNode;
+  onFilterClick?: () => void;
+  showFilters?: boolean;
+  hasActiveFilter?: boolean;
 }) {
   const [isHovered, setIsHovered] = useState(false);
 
   return (
     <div
       className={cn(
-        "flex w-full items-center overflow-hidden bg-background-dimmed px-2 py-1.5",
+        "flex w-full items-center gap-1 overflow-hidden bg-background-dimmed px-2 py-1.5",
         "text-sm font-medium text-text-bright",
         alignment === "right" && "justify-end"
       )}
@@ -611,7 +683,7 @@ function HeaderCellContent({
     >
       {tooltip ? (
         <div
-          className={cn("flex items-center gap-1 truncate", {
+          className={cn("flex min-w-0 flex-1 items-center gap-1 truncate", {
             "justify-end": alignment === "right",
           })}
         >
@@ -623,12 +695,52 @@ function HeaderCellContent({
           />
         </div>
       ) : (
-        <span className="truncate">{children}</span>
+        <span className="min-w-0 flex-1 truncate">{children}</span>
+      )}
+      {onFilterClick && (
+        <button
+          onClick={(e) => {
+            e.stopPropagation();
+            onFilterClick();
+          }}
+          className={cn(
+            "flex-shrink-0 rounded p-0.5 transition-colors",
+            "hover:bg-charcoal-700",
+            showFilters || hasActiveFilter
+              ? "text-primary"
+              : "text-text-dimmed hover:text-text-bright"
+          )}
+          title="Toggle column filters"
+        >
+          <FilterIcon className="size-3.5" />
+        </button>
       )}
     </div>
   );
 }
 
+/**
+ * Filter input cell for the filter row
+ */
+function FilterCell({ column, width }: { column: Column<RowData, unknown>; width: number }) {
+  const columnFilterValue = column.getFilterValue() as string;
+
+  return (
+    <div className="flex items-center bg-background-dimmed px-1.5 py-1" style={{ width }}>
+      <DebouncedInput
+        value={columnFilterValue ?? ""}
+        onChange={(value) => column.setFilterValue(value)}
+        placeholder="Filter..."
+        className={cn(
+          "w-full rounded border border-charcoal-700 bg-charcoal-800 px-2 py-1",
+          "text-xs text-text-bright placeholder:text-text-dimmed",
+          "focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary"
+        )}
+      />
+    </div>
+  );
+}
+
 export const TSQLResultsTable = memo(function TSQLResultsTable({
   rows,
   columns,
@@ -640,6 +752,10 @@ export const TSQLResultsTable = memo(function TSQLResultsTable({
 }) {
   const tableContainerRef = useRef<HTMLDivElement>(null);
 
+  // State for column filters and filter row visibility
+  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
+  const [showFilters, setShowFilters] = useState(false);
+
   // Create TanStack Table column definitions from OutputColumnMetadata
   // Calculate column widths based on content
   const columnDefs = useMemo<ColumnDef<RowData, unknown>[]>(
@@ -660,6 +776,7 @@ export const TSQLResultsTable = memo(function TSQLResultsTable({
           alignment: isRightAlignedColumn(col) ? "right" : "left",
         } as ColumnMeta,
         size: calculateColumnWidth(col.name, rows, col),
+        filterFn: fuzzyFilter,
       })),
     [columns, rows, prettyFormatting]
   );
@@ -672,7 +789,12 @@ export const TSQLResultsTable = memo(function TSQLResultsTable({
     data: rows,
     columns: columnDefs,
     columnResizeMode,
+    state: {
+      columnFilters,
+    },
+    onColumnFiltersChange: setColumnFilters,
     getCoreRowModel: getCoreRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
   });
 
   const { rows: tableRows } = table.getRowModel();
@@ -720,6 +842,9 @@ export const TSQLResultsTable = memo(function TSQLResultsTable({
                       <HeaderCellContent
                         alignment={meta?.alignment ?? "left"}
                         tooltip={meta?.outputColumn.description}
+                        onFilterClick={() => setShowFilters(!showFilters)}
+                        showFilters={showFilters}
+                        hasActiveFilter={!!header.column.getFilterValue()}
                       >
                         {flexRender(header.column.columnDef.header, header.getContext())}
                       </HeaderCellContent>
@@ -740,6 +865,18 @@ export const TSQLResultsTable = memo(function TSQLResultsTable({
                 })}
               </tr>
             ))}
+            {/* Filter row - shown when filters are toggled */}
+            {showFilters && (
+              <tr style={{ display: "flex", width: "100%" }}>
+                {table.getHeaderGroups()[0]?.headers.map((header) => (
+                  <FilterCell
+                    key={`filter-${header.id}`}
+                    column={header.column}
+                    width={header.getSize()}
+                  />
+                ))}
+              </tr>
+            )}
           </thead>
           <tbody style={{ display: "grid" }}>
             <tr style={{ display: "flex" }}>
@@ -771,6 +908,7 @@ export const TSQLResultsTable = memo(function TSQLResultsTable({
             zIndex: 1,
           }}
         >
+          {/* Main header row */}
           {table.getHeaderGroups().map((headerGroup) => (
             <tr key={headerGroup.id} style={{ display: "flex", width: "100%" }}>
               {headerGroup.headers.map((header) => {
@@ -787,6 +925,9 @@ export const TSQLResultsTable = memo(function TSQLResultsTable({
                     <HeaderCellContent
                       alignment={meta?.alignment ?? "left"}
                       tooltip={meta?.outputColumn.description}
+                      onFilterClick={() => setShowFilters(!showFilters)}
+                      showFilters={showFilters}
+                      hasActiveFilter={!!header.column.getFilterValue()}
                     >
                       {flexRender(header.column.columnDef.header, header.getContext())}
                     </HeaderCellContent>
@@ -807,6 +948,18 @@ export const TSQLResultsTable = memo(function TSQLResultsTable({
               })}
             </tr>
           ))}
+          {/* Filter row - shown when filters are toggled */}
+          {showFilters && (
+            <tr style={{ display: "flex", width: "100%" }}>
+              {table.getHeaderGroups()[0]?.headers.map((header) => (
+                <FilterCell
+                  key={`filter-${header.id}`}
+                  column={header.column}
+                  width={header.getSize()}
+                />
+              ))}
+            </tr>
+          )}
         </thead>
         <tbody
           style={{
diff --git a/apps/webapp/package.json b/apps/webapp/package.json
index d4d0dffc58..97f4533348 100644
--- a/apps/webapp/package.json
+++ b/apps/webapp/package.json
@@ -113,6 +113,7 @@
     "@socket.io/redis-adapter": "^8.3.0",
     "@tabler/icons-react": "^3.36.1",
     "@tailwindcss/container-queries": "^0.1.1",
+    "@tanstack/match-sorter-utils": "^8.19.4",
     "@tanstack/react-table": "^8.21.3",
     "@tanstack/react-virtual": "^3.0.4",
     "@team-plain/typescript-sdk": "^3.5.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 375363763e..43f0b3aca6 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -468,6 +468,9 @@ importers:
       '@tailwindcss/container-queries':
         specifier: ^0.1.1
         version: 0.1.1(tailwindcss@3.4.1)
+      '@tanstack/match-sorter-utils':
+        specifier: ^8.19.4
+        version: 8.19.4
       '@tanstack/react-table':
         specifier: ^8.21.3
         version: 8.21.3(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
@@ -10273,6 +10276,10 @@ packages:
     peerDependencies:
       tailwindcss: '>=3.0.0 || insiders'
 
+  '@tanstack/match-sorter-utils@8.19.4':
+    resolution: {integrity: sha512-Wo1iKt2b9OT7d+YGhvEPD3DXvPv2etTusIMhMUoG7fbhmxcXCtIjJDEygy91Y2JFlwGyjqiBPRozme7UD8hoqg==}
+    engines: {node: '>=12'}
+
   '@tanstack/query-core@5.76.0':
     resolution: {integrity: sha512-FN375hb8ctzfNAlex5gHI6+WDXTNpe0nbxp/d2YJtnP+IBM6OUm7zcaoCW6T63BawGOYZBbKC0iPvr41TteNVg==}
 
@@ -30353,6 +30360,10 @@ snapshots:
       postcss-selector-parser: 6.0.10
       tailwindcss: 4.0.17
 
+  '@tanstack/match-sorter-utils@8.19.4':
+    dependencies:
+      remove-accents: 0.5.0
+
   '@tanstack/query-core@5.76.0': {}
 
   '@tanstack/react-query@5.76.1(react@18.2.0)':

From 5611959854fd7a570cbf70269a72ed305d172686 Mon Sep 17 00:00:00 2001
From: Matt Aitken <matt@mattaitken.com>
Date: Thu, 15 Jan 2026 23:33:22 +0000
Subject: [PATCH 103/137] Filter against formatted values too

---
 .../app/components/code/TSQLResultsTable.tsx  | 107 +++++++++++++++++-
 1 file changed, 101 insertions(+), 6 deletions(-)

diff --git a/apps/webapp/app/components/code/TSQLResultsTable.tsx b/apps/webapp/app/components/code/TSQLResultsTable.tsx
index debe249093..39a31c6a9d 100644
--- a/apps/webapp/app/components/code/TSQLResultsTable.tsx
+++ b/apps/webapp/app/components/code/TSQLResultsTable.tsx
@@ -53,16 +53,103 @@ type RowData = Record<string, unknown>;
 /**
  * Fuzzy filter function using match-sorter ranking
  */
+/**
+ * Get the formatted display string for a value based on its column type
+ * This mirrors the formatting logic in CellValue component
+ */
+function getFormattedValue(value: unknown, column: OutputColumnMetadata): string {
+  if (value === null) return "NULL";
+  if (value === undefined) return "";
+
+  // Handle custom render types
+  if (column.customRenderType) {
+    switch (column.customRenderType) {
+      case "duration":
+        if (typeof value === "number") {
+          return formatDurationMilliseconds(value, { style: "short" });
+        }
+        break;
+      case "durationSeconds":
+        if (typeof value === "number") {
+          return formatDurationMilliseconds(value * 1000, { style: "short" });
+        }
+        break;
+      case "cost":
+        if (typeof value === "number") {
+          return formatCurrencyAccurate(value / 100);
+        }
+        break;
+      case "costInDollars":
+        if (typeof value === "number") {
+          return formatCurrencyAccurate(value);
+        }
+        break;
+      case "runStatus":
+        // Include friendly status names for searching
+        if (typeof value === "string") {
+          return value;
+        }
+        break;
+    }
+  }
+
+  // Handle DateTime types - format for display
+  if (isDateTimeType(column.type)) {
+    if (typeof value === "string") {
+      try {
+        const date = new Date(value);
+        // Format as a searchable string: "15 Jan 2026 12:34:56"
+        return date.toLocaleDateString("en-GB", {
+          day: "numeric",
+          month: "short",
+          year: "numeric",
+          hour: "2-digit",
+          minute: "2-digit",
+          second: "2-digit",
+        });
+      } catch {
+        return String(value);
+      }
+    }
+  }
+
+  // Handle numeric types - format with separators
+  if (isNumericType(column.type) && typeof value === "number") {
+    return formatNumber(value);
+  }
+
+  // Handle booleans
+  if (isBooleanType(column.type)) {
+    if (typeof value === "boolean") {
+      return value ? "true" : "false";
+    }
+    if (typeof value === "number") {
+      return value === 1 ? "true" : "false";
+    }
+  }
+
+  // Handle objects/arrays
+  if (typeof value === "object") {
+    return JSON.stringify(value);
+  }
+
+  return String(value);
+}
+
 const fuzzyFilter: FilterFn<RowData> = (row, columnId, value, addMeta) => {
-  // Get the cell value and convert to string for matching
+  // Get the cell value
   const cellValue = row.getValue(columnId);
-  const searchValue = String(value);
+  const searchValue = String(value).toLowerCase();
 
   // Handle empty search
   if (!searchValue) return true;
 
-  // Convert cell value to string for ranking
-  const itemValue =
+  // Get the column metadata from the cell
+  const cell = row.getAllCells().find((c) => c.column.id === columnId);
+  const meta = cell?.column.columnDef.meta as ColumnMeta | undefined;
+
+  // Build searchable strings - raw value
+  const rawValue =
     cellValue === null
       ? "NULL"
       : cellValue === undefined
@@ -71,8 +158,16 @@ const fuzzyFilter: FilterFn<RowData> = (row, columnId, value, addMeta) => {
       ? JSON.stringify(cellValue)
       : String(cellValue);
 
-  // Rank the item
-  const itemRank = rankItem(itemValue, searchValue);
+  // Build searchable strings - formatted value (if we have column metadata)
+  const formattedValue = meta?.outputColumn
+    ? getFormattedValue(cellValue, meta.outputColumn)
+    : rawValue;
+
+  // Combine both values for searching (separated by space to allow matching either)
+  const combinedSearchText = `${rawValue} ${formattedValue}`.toLowerCase();
+
+  // Rank against the combined text
+  const itemRank = rankItem(combinedSearchText, searchValue);
 
   // Store the ranking info
   addMeta({ itemRank });

From a3a7b4bcff121d3df27c19e553300dc04b655bbd Mon Sep 17 00:00:00 2001
From: Matt Aitken <matt@mattaitken.com>
Date: Thu, 15 Jan 2026 23:39:45 +0000
Subject: [PATCH 104/137] Nicer filtering styles

---
 .../webapp/app/components/code/TSQLResultsTable.tsx | 13 ++++++-------
 .../route.tsx                                       |  2 +-
 2 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/apps/webapp/app/components/code/TSQLResultsTable.tsx b/apps/webapp/app/components/code/TSQLResultsTable.tsx
index 39a31c6a9d..37c33ec472 100644
--- a/apps/webapp/app/components/code/TSQLResultsTable.tsx
+++ b/apps/webapp/app/components/code/TSQLResultsTable.tsx
@@ -14,7 +14,7 @@ import {
 } from "@tanstack/react-table";
 import { useVirtualizer } from "@tanstack/react-virtual";
 import { formatDurationMilliseconds, MachinePresetName } from "@trigger.dev/core/v3";
-import { ClipboardCheckIcon, ClipboardIcon, FilterIcon } from "lucide-react";
+import { ClipboardCheckIcon, ClipboardIcon } from "lucide-react";
 import { memo, useEffect, useMemo, useRef, useState } from "react";
 import { EnvironmentLabel } from "~/components/environments/EnvironmentLabel";
 import { MachineLabelCombo } from "~/components/MachineLabelCombo";
@@ -36,6 +36,7 @@ import { Paragraph } from "../primitives/Paragraph";
 import { TextLink } from "../primitives/TextLink";
 import { InfoIconTooltip, SimpleTooltip } from "../primitives/Tooltip";
 import { QueueName } from "../runs/v3/QueueName";
+import { FunnelIcon } from "@heroicons/react/20/solid";
 
 const MAX_STRING_DISPLAY_LENGTH = 64;
 const ROW_HEIGHT = 33; // Estimated row height in pixels
@@ -801,13 +802,11 @@ function HeaderCellContent({
           className={cn(
             "flex-shrink-0 rounded p-0.5 transition-colors",
             "hover:bg-charcoal-700",
-            showFilters || hasActiveFilter
-              ? "text-primary"
-              : "text-text-dimmed hover:text-text-bright"
+            "text-text-dimmed hover:text-text-bright"
           )}
           title="Toggle column filters"
         >
-          <FilterIcon className="size-3.5" />
+          <FunnelIcon className="size-3.5" />
         </button>
       )}
     </div>
@@ -821,7 +820,7 @@ function FilterCell({ column, width }: { column: Column<RowData, unknown>; width
   const columnFilterValue = column.getFilterValue() as string;
 
   return (
-    <div className="flex items-center bg-background-dimmed px-1.5 py-1" style={{ width }}>
+    <div className="flex items-center bg-background-dimmed px-1.5 pb-1" style={{ width }}>
       <DebouncedInput
         value={columnFilterValue ?? ""}
         onChange={(value) => column.setFilterValue(value)}
@@ -829,7 +828,7 @@ function FilterCell({ column, width }: { column: Column<RowData, unknown>; width
         className={cn(
           "w-full rounded border border-charcoal-700 bg-charcoal-800 px-2 py-1",
           "text-xs text-text-bright placeholder:text-text-dimmed",
-          "focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary"
+          "focus:border-indigo-500/50 focus:outline-none focus:ring-1 focus:ring-indigo-500/50"
         )}
       />
     </div>
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/route.tsx
index ca177f542c..3ff3bfa654 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/route.tsx
@@ -353,7 +353,7 @@ const QueryEditorForm = forwardRef<
         <input type="hidden" name="query" value={query} />
         <input type="hidden" name="scope" value={scope} />
         <QueryHistoryPopover history={history} onQuerySelected={handleHistorySelected} />
-        <div className="flex items-center gap-2">
+        <div className="flex items-center gap-1">
           <Select
             value={scope}
             setValue={(value) => setScope(value as QueryScope)}

From 3852a0ec9d24531ce75dde6a9364cdfbba2253ed Mon Sep 17 00:00:00 2001
From: Matt Aitken <matt@mattaitken.com>
Date: Fri, 16 Jan 2026 00:21:36 +0000
Subject: [PATCH 105/137] Sorting

---
 .../app/components/code/TSQLResultsTable.tsx  | 45 ++++++++++++++++++-
 1 file changed, 43 insertions(+), 2 deletions(-)

diff --git a/apps/webapp/app/components/code/TSQLResultsTable.tsx b/apps/webapp/app/components/code/TSQLResultsTable.tsx
index 37c33ec472..f682dcb406 100644
--- a/apps/webapp/app/components/code/TSQLResultsTable.tsx
+++ b/apps/webapp/app/components/code/TSQLResultsTable.tsx
@@ -4,6 +4,7 @@ import {
   useReactTable,
   getCoreRowModel,
   getFilteredRowModel,
+  getSortedRowModel,
   flexRender,
   type ColumnDef,
   type CellContext,
@@ -11,6 +12,8 @@ import {
   type ColumnFiltersState,
   type FilterFn,
   type Column,
+  type SortingState,
+  type SortDirection,
 } from "@tanstack/react-table";
 import { useVirtualizer } from "@tanstack/react-virtual";
 import { formatDurationMilliseconds, MachinePresetName } from "@trigger.dev/core/v3";
@@ -36,7 +39,12 @@ import { Paragraph } from "../primitives/Paragraph";
 import { TextLink } from "../primitives/TextLink";
 import { InfoIconTooltip, SimpleTooltip } from "../primitives/Tooltip";
 import { QueueName } from "../runs/v3/QueueName";
-import { FunnelIcon } from "@heroicons/react/20/solid";
+import {
+  FunnelIcon,
+  ChevronUpIcon,
+  ChevronDownIcon,
+  ChevronUpDownIcon,
+} from "@heroicons/react/20/solid";
 
 const MAX_STRING_DISPLAY_LENGTH = 64;
 const ROW_HEIGHT = 33; // Estimated row height in pixels
@@ -757,6 +765,9 @@ function HeaderCellContent({
   onFilterClick,
   showFilters,
   hasActiveFilter,
+  sortDirection,
+  onSortClick,
+  canSort,
 }: {
   alignment: "left" | "right";
   tooltip?: React.ReactNode;
@@ -764,6 +775,9 @@ function HeaderCellContent({
   onFilterClick?: () => void;
   showFilters?: boolean;
   hasActiveFilter?: boolean;
+  sortDirection?: SortDirection | false;
+  onSortClick?: (event: React.MouseEvent) => void;
+  canSort?: boolean;
 }) {
   const [isHovered, setIsHovered] = useState(false);
 
@@ -772,10 +786,12 @@ function HeaderCellContent({
       className={cn(
         "flex w-full items-center gap-1 overflow-hidden bg-background-dimmed px-2 py-1.5",
         "text-sm font-medium text-text-bright",
-        alignment === "right" && "justify-end"
+        alignment === "right" && "justify-end",
+        canSort && "cursor-pointer select-none"
       )}
       onMouseEnter={() => setIsHovered(true)}
       onMouseLeave={() => setIsHovered(false)}
+      onClick={onSortClick}
     >
       {tooltip ? (
         <div
@@ -793,6 +809,20 @@ function HeaderCellContent({
       ) : (
         <span className="min-w-0 flex-1 truncate">{children}</span>
       )}
+      {/* Sort indicator */}
+      {canSort && (
+        <span
+          className={cn("flex-shrink-0", sortDirection ? "text-text-bright" : "text-text-dimmed")}
+        >
+          {sortDirection === "asc" ? (
+            <ChevronUpIcon className="size-4" />
+          ) : sortDirection === "desc" ? (
+            <ChevronDownIcon className="size-4" />
+          ) : (
+            <ChevronUpDownIcon className="size-4" />
+          )}
+        </span>
+      )}
       {onFilterClick && (
         <button
           onClick={(e) => {
@@ -849,6 +879,8 @@ export const TSQLResultsTable = memo(function TSQLResultsTable({
   // State for column filters and filter row visibility
   const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
   const [showFilters, setShowFilters] = useState(false);
+  // State for column sorting
+  const [sorting, setSorting] = useState<SortingState>([]);
 
   // Create TanStack Table column definitions from OutputColumnMetadata
   // Calculate column widths based on content
@@ -885,10 +917,13 @@ export const TSQLResultsTable = memo(function TSQLResultsTable({
     columnResizeMode,
     state: {
       columnFilters,
+      sorting,
     },
     onColumnFiltersChange: setColumnFilters,
+    onSortingChange: setSorting,
     getCoreRowModel: getCoreRowModel(),
     getFilteredRowModel: getFilteredRowModel(),
+    getSortedRowModel: getSortedRowModel(),
   });
 
   const { rows: tableRows } = table.getRowModel();
@@ -939,6 +974,9 @@ export const TSQLResultsTable = memo(function TSQLResultsTable({
                         onFilterClick={() => setShowFilters(!showFilters)}
                         showFilters={showFilters}
                         hasActiveFilter={!!header.column.getFilterValue()}
+                        sortDirection={header.column.getIsSorted()}
+                        onSortClick={header.column.getToggleSortingHandler()}
+                        canSort={header.column.getCanSort()}
                       >
                         {flexRender(header.column.columnDef.header, header.getContext())}
                       </HeaderCellContent>
@@ -1022,6 +1060,9 @@ export const TSQLResultsTable = memo(function TSQLResultsTable({
                       onFilterClick={() => setShowFilters(!showFilters)}
                       showFilters={showFilters}
                       hasActiveFilter={!!header.column.getFilterValue()}
+                      sortDirection={header.column.getIsSorted()}
+                      onSortClick={header.column.getToggleSortingHandler()}
+                      canSort={header.column.getCanSort()}
                     >
                       {flexRender(header.column.columnDef.header, header.getContext())}
                     </HeaderCellContent>

From b40f9980be46a4d9e3f21786ba5dc3b48c097fdd Mon Sep 17 00:00:00 2001
From: Matt Aitken <matt@mattaitken.com>
Date: Fri, 16 Jan 2026 00:24:51 +0000
Subject: [PATCH 106/137] Overscan increased to 20

---
 apps/webapp/app/components/code/TSQLResultsTable.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/webapp/app/components/code/TSQLResultsTable.tsx b/apps/webapp/app/components/code/TSQLResultsTable.tsx
index f682dcb406..943c34d7c7 100644
--- a/apps/webapp/app/components/code/TSQLResultsTable.tsx
+++ b/apps/webapp/app/components/code/TSQLResultsTable.tsx
@@ -933,7 +933,7 @@ export const TSQLResultsTable = memo(function TSQLResultsTable({
     count: tableRows.length,
     estimateSize: () => ROW_HEIGHT,
     getScrollElement: () => tableContainerRef.current,
-    overscan: 5,
+    overscan: 20,
   });
 
   if (!columns.length) return null;

From 40ebad058d17b0e99dbfc82a9d59dbcd84663f65 Mon Sep 17 00:00:00 2001
From: Matt Aitken <matt@mattaitken.com>
Date: Fri, 16 Jan 2026 11:18:47 +0000
Subject: [PATCH 107/137] Working on fixing the Table scrolling

---
 .../app/components/primitives/charts/Card.tsx    |  4 ++--
 .../route.tsx                                    | 16 ++++++++++------
 2 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/apps/webapp/app/components/primitives/charts/Card.tsx b/apps/webapp/app/components/primitives/charts/Card.tsx
index a0db99252f..429c51e331 100644
--- a/apps/webapp/app/components/primitives/charts/Card.tsx
+++ b/apps/webapp/app/components/primitives/charts/Card.tsx
@@ -21,8 +21,8 @@ const CardHeader = ({ children }: { children: ReactNode }) => {
   );
 };
 
-const CardContent = ({ children }: { children: ReactNode }) => {
-  return <div className="px-2">{children}</div>;
+const CardContent = ({ children, className }: { children: ReactNode; className?: string }) => {
+  return <div className={cn("px-2", className)}>{children}</div>;
 };
 
 const CardAccessory = ({ children }: { children: ReactNode }) => {
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/route.tsx
index 3ff3bfa654..de23229552 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/route.tsx
@@ -559,12 +559,16 @@ export default function Page() {
                             . Specify them explicitly to include them.
                           </Callout>
                         )}
-                        <div className="min-h-0 flex-1 overflow-hidden">
-                          <TSQLResultsTable
-                            rows={results.rows}
-                            columns={results.columns}
-                            prettyFormatting={prettyFormatting}
-                          />
+                        <div className="h-full bg-charcoal-900 p-2">
+                          <Card className="max-h-full overflow-hidden p-0">
+                            <Card.Content className="max-h-full overflow-hidden p-0">
+                              <TSQLResultsTable
+                                rows={results.rows}
+                                columns={results.columns}
+                                prettyFormatting={prettyFormatting}
+                              />
+                            </Card.Content>
+                          </Card>
                         </div>
                       </div>
                     ) : (

From cf374444ae02a0954887074222eb841e0de92a3a Mon Sep 17 00:00:00 2001
From: Matt Aitken <matt@mattaitken.com>
Date: Fri, 16 Jan 2026 11:26:39 +0000
Subject: [PATCH 108/137] Fixed table scrolling

---
 apps/webapp/app/components/code/TSQLResultsTable.tsx          | 4 ++--
 .../route.tsx                                                 | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/apps/webapp/app/components/code/TSQLResultsTable.tsx b/apps/webapp/app/components/code/TSQLResultsTable.tsx
index 943c34d7c7..7296924842 100644
--- a/apps/webapp/app/components/code/TSQLResultsTable.tsx
+++ b/apps/webapp/app/components/code/TSQLResultsTable.tsx
@@ -942,7 +942,7 @@ export const TSQLResultsTable = memo(function TSQLResultsTable({
   if (rows.length === 0) {
     return (
       <div
-        className="h-full w-full overflow-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600"
+        className="h-full min-h-0 w-full overflow-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600"
         style={{ position: "relative" }}
       >
         <table style={{ display: "grid" }}>
@@ -1027,7 +1027,7 @@ export const TSQLResultsTable = memo(function TSQLResultsTable({
   return (
     <div
       ref={tableContainerRef}
-      className="h-full w-full overflow-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600"
+      className="h-full min-h-0 w-full overflow-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600"
       style={{ position: "relative" }}
     >
       <table style={{ display: "grid" }}>
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/route.tsx
index de23229552..f9f6fcfad4 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/route.tsx
@@ -560,8 +560,8 @@ export default function Page() {
                           </Callout>
                         )}
                         <div className="h-full bg-charcoal-900 p-2">
-                          <Card className="max-h-full overflow-hidden p-0">
-                            <Card.Content className="max-h-full overflow-hidden p-0">
+                          <Card className="h-full overflow-hidden p-0">
+                            <Card.Content className="min-h-0 flex-1 overflow-hidden p-0">
                               <TSQLResultsTable
                                 rows={results.rows}
                                 columns={results.columns}

From 9c5341e1ffee8bae5e456cbaec980ce876001d01 Mon Sep 17 00:00:00 2001
From: Matt Aitken <matt@mattaitken.com>
Date: Fri, 16 Jan 2026 13:45:17 +0000
Subject: [PATCH 109/137] Make Query scope clearer

---
 .../route.tsx                                          | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/route.tsx
index f9f6fcfad4..c4e0235719 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/route.tsx
@@ -707,11 +707,15 @@ function ScopeItem({ scope }: { scope: QueryScope }) {
 
   switch (scope) {
     case "organization":
-      return organization.title;
+      return `Org: ${organization.title}`;
     case "project":
-      return project.name;
+      return `Project: ${project.name}`;
     case "environment":
-      return <EnvironmentLabel environment={environment} />;
+      return (
+        <>
+          Env: <EnvironmentLabel environment={environment} />
+        </>
+      );
     default:
       return scope;
   }

From f3d459a36c321c0e438e12f64cd09e148af32743 Mon Sep 17 00:00:00 2001
From: Matt Aitken <matt@mattaitken.com>
Date: Fri, 16 Jan 2026 14:00:23 +0000
Subject: [PATCH 110/137] When narrow fixed tabs/stats layout

---
 .../route.tsx                                            | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/route.tsx
index c4e0235719..68359fd85d 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/route.tsx
@@ -466,7 +466,10 @@ export default function Page() {
                   onValueChange={(v) => setResultsView(v as "table" | "graph")}
                   className="grid min-h-0 grid-rows-[auto_1fr] overflow-hidden"
                 >
-                  <ClientTabsList variant="underline" className="shrink-0 pl-3 pr-1">
+                  <ClientTabsList
+                    variant="underline"
+                    className="shrink-0 overflow-hidden pl-3 pr-1"
+                  >
                     <ClientTabsTrigger value="table" variant="underline" layoutId="results-tabs">
                       Table
                     </ClientTabsTrigger>
@@ -479,8 +482,8 @@ export default function Page() {
                       Graph
                     </ClientTabsTrigger>
                     {results?.rows ? (
-                      <div className="flex flex-1 items-center justify-end gap-2 border-b border-grid-dimmed pl-3">
-                        <div className="flex items-center gap-2">
+                      <div className="flex flex-1 items-center justify-end gap-2 overflow-hidden border-b border-grid-dimmed pl-3">
+                        <div className="flex items-center gap-2 overflow-hidden truncate">
                           <span className="text-xs text-text-dimmed">
                             {results?.rows?.length ? `${results.rows.length} Results` : "Results"}
                           </span>

From cfb7f028c13d2af8abe6d8ca729a2d22366f27e9 Mon Sep 17 00:00:00 2001
From: Matt Aitken <matt@mattaitken.com>
Date: Fri, 16 Jan 2026 15:41:26 +0000
Subject: [PATCH 111/137] Better filtering behaviour

---
 .../app/components/code/TSQLResultsTable.tsx  | 71 ++++++++++++++-----
 1 file changed, 54 insertions(+), 17 deletions(-)

diff --git a/apps/webapp/app/components/code/TSQLResultsTable.tsx b/apps/webapp/app/components/code/TSQLResultsTable.tsx
index 7296924842..acb564582f 100644
--- a/apps/webapp/app/components/code/TSQLResultsTable.tsx
+++ b/apps/webapp/app/components/code/TSQLResultsTable.tsx
@@ -18,7 +18,7 @@ import {
 import { useVirtualizer } from "@tanstack/react-virtual";
 import { formatDurationMilliseconds, MachinePresetName } from "@trigger.dev/core/v3";
 import { ClipboardCheckIcon, ClipboardIcon } from "lucide-react";
-import { memo, useEffect, useMemo, useRef, useState } from "react";
+import { forwardRef, memo, useEffect, useMemo, useRef, useState } from "react";
 import { EnvironmentLabel } from "~/components/environments/EnvironmentLabel";
 import { MachineLabelCombo } from "~/components/MachineLabelCombo";
 import { DateTimeAccurate } from "~/components/primitives/DateTime";
@@ -188,16 +188,14 @@ const fuzzyFilter: FilterFn<RowData> = (row, columnId, value, addMeta) => {
 /**
  * Debounced input component for filter inputs
  */
-function DebouncedInput({
-  value: initialValue,
-  onChange,
-  debounce = 300,
-  ...props
-}: {
-  value: string;
-  onChange: (value: string) => void;
-  debounce?: number;
-} & Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange">) {
+const DebouncedInput = forwardRef<
+  HTMLInputElement,
+  {
+    value: string;
+    onChange: (value: string) => void;
+    debounce?: number;
+  } & Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange">
+>(function DebouncedInput({ value: initialValue, onChange, debounce = 300, ...props }, ref) {
   const [value, setValue] = useState(initialValue);
 
   useEffect(() => {
@@ -212,8 +210,8 @@ function DebouncedInput({
     return () => clearTimeout(timeout);
   }, [value, debounce, onChange]);
 
-  return <input {...props} value={value} onChange={(e) => setValue(e.target.value)} />;
-}
+  return <input ref={ref} {...props} value={value} onChange={(e) => setValue(e.target.value)} />;
+});
 
 // Extended column meta to store OutputColumnMetadata
 interface ColumnMeta {
@@ -785,7 +783,7 @@ function HeaderCellContent({
     <div
       className={cn(
         "flex w-full items-center gap-1 overflow-hidden bg-background-dimmed px-2 py-1.5",
-        "text-sm font-medium text-text-bright",
+        "font-mono text-xs font-medium text-text-bright",
         alignment === "right" && "justify-end",
         canSort && "cursor-pointer select-none"
       )}
@@ -846,12 +844,31 @@ function HeaderCellContent({
 /**
  * Filter input cell for the filter row
  */
-function FilterCell({ column, width }: { column: Column<RowData, unknown>; width: number }) {
+function FilterCell({
+  column,
+  width,
+  shouldFocus,
+  onFocused,
+}: {
+  column: Column<RowData, unknown>;
+  width: number;
+  shouldFocus?: boolean;
+  onFocused?: () => void;
+}) {
   const columnFilterValue = column.getFilterValue() as string;
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (shouldFocus && inputRef.current) {
+      inputRef.current.focus();
+      onFocused?.();
+    }
+  }, [shouldFocus, onFocused]);
 
   return (
     <div className="flex items-center bg-background-dimmed px-1.5 pb-1" style={{ width }}>
       <DebouncedInput
+        ref={inputRef}
         value={columnFilterValue ?? ""}
         onChange={(value) => column.setFilterValue(value)}
         placeholder="Filter..."
@@ -879,6 +896,8 @@ export const TSQLResultsTable = memo(function TSQLResultsTable({
   // State for column filters and filter row visibility
   const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
   const [showFilters, setShowFilters] = useState(false);
+  // Track which column's filter should be focused
+  const [focusFilterColumn, setFocusFilterColumn] = useState<string | null>(null);
   // State for column sorting
   const [sorting, setSorting] = useState<SortingState>([]);
 
@@ -971,7 +990,14 @@ export const TSQLResultsTable = memo(function TSQLResultsTable({
                       <HeaderCellContent
                         alignment={meta?.alignment ?? "left"}
                         tooltip={meta?.outputColumn.description}
-                        onFilterClick={() => setShowFilters(!showFilters)}
+                        onFilterClick={() => {
+                          if (!showFilters) {
+                            setFocusFilterColumn(header.id);
+                          } else {
+                            setColumnFilters([]);
+                          }
+                          setShowFilters(!showFilters);
+                        }}
                         showFilters={showFilters}
                         hasActiveFilter={!!header.column.getFilterValue()}
                         sortDirection={header.column.getIsSorted()}
@@ -1005,6 +1031,8 @@ export const TSQLResultsTable = memo(function TSQLResultsTable({
                     key={`filter-${header.id}`}
                     column={header.column}
                     width={header.getSize()}
+                    shouldFocus={focusFilterColumn === header.id}
+                    onFocused={() => setFocusFilterColumn(null)}
                   />
                 ))}
               </tr>
@@ -1057,7 +1085,14 @@ export const TSQLResultsTable = memo(function TSQLResultsTable({
                     <HeaderCellContent
                       alignment={meta?.alignment ?? "left"}
                       tooltip={meta?.outputColumn.description}
-                      onFilterClick={() => setShowFilters(!showFilters)}
+                      onFilterClick={() => {
+                        if (!showFilters) {
+                          setFocusFilterColumn(header.id);
+                        } else {
+                          setColumnFilters([]);
+                        }
+                        setShowFilters(!showFilters);
+                      }}
                       showFilters={showFilters}
                       hasActiveFilter={!!header.column.getFilterValue()}
                       sortDirection={header.column.getIsSorted()}
@@ -1091,6 +1126,8 @@ export const TSQLResultsTable = memo(function TSQLResultsTable({
                   key={`filter-${header.id}`}
                   column={header.column}
                   width={header.getSize()}
+                  shouldFocus={focusFilterColumn === header.id}
+                  onFocused={() => setFocusFilterColumn(null)}
                 />
               ))}
             </tr>

From c9ae2cb442991dc87fded93ae5df8483dabada55 Mon Sep 17 00:00:00 2001
From: Matt Aitken <matt@mattaitken.com>
Date: Fri, 16 Jan 2026 15:45:48 +0000
Subject: [PATCH 112/137] Legend hover improved

---
 .../app/components/code/QueryResultsChart.tsx |  2 +-
 .../primitives/charts/ChartLegendCompound.tsx | 60 ++++++++++++++++---
 2 files changed, 52 insertions(+), 10 deletions(-)

diff --git a/apps/webapp/app/components/code/QueryResultsChart.tsx b/apps/webapp/app/components/code/QueryResultsChart.tsx
index 06b66816ab..7c53b032be 100644
--- a/apps/webapp/app/components/code/QueryResultsChart.tsx
+++ b/apps/webapp/app/components/code/QueryResultsChart.tsx
@@ -841,7 +841,7 @@ export const QueryResultsChart = memo(function QueryResultsChart({
         series={series}
         labelFormatter={legendLabelFormatter}
         showLegend={showLegend}
-        maxLegendItems={8}
+        maxLegendItems={6}
         minHeight="300px"
       >
         <Chart.Bar
diff --git a/apps/webapp/app/components/primitives/charts/ChartLegendCompound.tsx b/apps/webapp/app/components/primitives/charts/ChartLegendCompound.tsx
index a05f8bdc02..643d332cc7 100644
--- a/apps/webapp/app/components/primitives/charts/ChartLegendCompound.tsx
+++ b/apps/webapp/app/components/primitives/charts/ChartLegendCompound.tsx
@@ -99,25 +99,23 @@ export function ChartLegendCompound({
     }));
 
     if (allItems.length <= maxItems) {
-      return { visible: allItems, remaining: 0 };
+      return { visible: allItems, remaining: 0, hoveredHiddenItem: undefined };
     }
 
     const visibleItems = allItems.slice(0, maxItems);
     const remainingCount = allItems.length - maxItems;
 
     // If we're hovering over an item that's not visible in the legend,
-    // add it as an extra item instead of showing the "view more" row
+    // pass it separately to replace the "view more" row
+    let hoveredHiddenItem: (typeof allItems)[0] | undefined;
     if (
       highlight.activeBarKey &&
       !visibleItems.some((item) => item.dataKey === highlight.activeBarKey)
     ) {
-      const hoveredItem = allItems.find((item) => item.dataKey === highlight.activeBarKey);
-      if (hoveredItem) {
-        return { visible: [...visibleItems, hoveredItem], remaining: remainingCount - 1 };
-      }
+      hoveredHiddenItem = allItems.find((item) => item.dataKey === highlight.activeBarKey);
     }
 
-    return { visible: visibleItems, remaining: remainingCount };
+    return { visible: visibleItems, remaining: remainingCount, hoveredHiddenItem };
   }, [config, dataKeys, maxItems, highlight.activeBarKey]);
 
   if (hidden || dataKeys.length === 0) {
@@ -187,8 +185,17 @@ export function ChartLegendCompound({
         );
       })}
 
-      {/* View more row */}
-      {legendItems.remaining > 0 && <ViewAllDataRow remainingCount={legendItems.remaining} />}
+      {/* View more row - replaced by hovered hidden item when applicable */}
+      {legendItems.remaining > 0 &&
+        (legendItems.hoveredHiddenItem ? (
+          <HoveredHiddenItemRow
+            item={legendItems.hoveredHiddenItem}
+            value={currentData[legendItems.hoveredHiddenItem.dataKey] ?? 0}
+            remainingCount={legendItems.remaining - 1}
+          />
+        ) : (
+          <ViewAllDataRow remainingCount={legendItems.remaining} />
+        ))}
     </div>
   );
 }
@@ -212,3 +219,38 @@ function ViewAllDataRow({ remainingCount }: ViewAllDataRowProps) {
     </Button>
   );
 }
+
+type HoveredHiddenItemRowProps = {
+  item: { dataKey: string; color?: string; label: React.ReactNode };
+  value: number;
+  remainingCount: number;
+};
+
+function HoveredHiddenItemRow({ item, value, remainingCount }: HoveredHiddenItemRowProps) {
+  return (
+    <div className="relative flex w-full items-center justify-between gap-2 rounded px-2 py-1">
+      {/* Active highlight background */}
+      {item.color && (
+        <div
+          className="absolute inset-0 rounded opacity-10"
+          style={{ backgroundColor: item.color }}
+        />
+      )}
+      <div className="relative flex w-full items-center justify-between gap-2">
+        <div className="flex items-center gap-1.5">
+          {item.color && (
+            <div
+              className="h-3 w-1 shrink-0 rounded-[2px]"
+              style={{ backgroundColor: item.color }}
+            />
+          )}
+          <span className="text-text-bright">{item.label}</span>
+          {remainingCount > 0 && <span className="text-text-dimmed">+{remainingCount} more</span>}
+        </div>
+        <span className="tabular-nums text-text-bright">
+          <AnimatedNumber value={value} duration={0.25} />
+        </span>
+      </div>
+    </div>
+  );
+}

From 8ba820f5f55a9124829764167d462cc79696f2a9 Mon Sep 17 00:00:00 2001
From: Matt Aitken <matt@mattaitken.com>
Date: Fri, 16 Jan 2026 15:58:27 +0000
Subject: [PATCH 113/137] Environment col shows slug. Improved table header
 styles

---
 .../app/components/code/TSQLResultsTable.tsx       | 14 +++++---------
 .../components/environments/EnvironmentLabel.tsx   |  8 ++++++++
 apps/webapp/app/components/primitives/Tooltip.tsx  |  2 +-
 3 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/apps/webapp/app/components/code/TSQLResultsTable.tsx b/apps/webapp/app/components/code/TSQLResultsTable.tsx
index acb564582f..5789b2dd46 100644
--- a/apps/webapp/app/components/code/TSQLResultsTable.tsx
+++ b/apps/webapp/app/components/code/TSQLResultsTable.tsx
@@ -19,7 +19,7 @@ import { useVirtualizer } from "@tanstack/react-virtual";
 import { formatDurationMilliseconds, MachinePresetName } from "@trigger.dev/core/v3";
 import { ClipboardCheckIcon, ClipboardIcon } from "lucide-react";
 import { forwardRef, memo, useEffect, useMemo, useRef, useState } from "react";
-import { EnvironmentLabel } from "~/components/environments/EnvironmentLabel";
+import { EnvironmentLabel, EnvironmentSlug } from "~/components/environments/EnvironmentLabel";
 import { MachineLabelCombo } from "~/components/MachineLabelCombo";
 import { DateTimeAccurate } from "~/components/primitives/DateTime";
 import {
@@ -666,7 +666,7 @@ function EnvironmentCellValue({ value }: { value: string }) {
     return <span>{value}</span>;
   }
 
-  return <EnvironmentLabel environment={environment} />;
+  return <EnvironmentSlug environment={environment} />;
 }
 
 function JSONCellValue({ value }: { value: unknown }) {
@@ -782,7 +782,7 @@ function HeaderCellContent({
   return (
     <div
       className={cn(
-        "flex w-full items-center gap-1 overflow-hidden bg-background-dimmed px-2 py-1.5",
+        "flex w-full items-center gap-1 overflow-hidden bg-background-dimmed py-1.5 pl-2 pr-1",
         "font-mono text-xs font-medium text-text-bright",
         alignment === "right" && "justify-end",
         canSort && "cursor-pointer select-none"
@@ -827,14 +827,10 @@ function HeaderCellContent({
             e.stopPropagation();
             onFilterClick();
           }}
-          className={cn(
-            "flex-shrink-0 rounded p-0.5 transition-colors",
-            "hover:bg-charcoal-700",
-            "text-text-dimmed hover:text-text-bright"
-          )}
+          className="flex-shrink-0 rounded text-text-dimmed transition-colors hover:bg-charcoal-700 hover:text-text-bright"
           title="Toggle column filters"
         >
-          <FunnelIcon className="size-3.5" />
+          <FunnelIcon className="size-3" />
         </button>
       )}
     </div>
diff --git a/apps/webapp/app/components/environments/EnvironmentLabel.tsx b/apps/webapp/app/components/environments/EnvironmentLabel.tsx
index 08bbe443dd..eed4841d32 100644
--- a/apps/webapp/app/components/environments/EnvironmentLabel.tsx
+++ b/apps/webapp/app/components/environments/EnvironmentLabel.tsx
@@ -138,6 +138,14 @@ export function EnvironmentLabel({
   return content;
 }
 
+export function EnvironmentSlug({ environment }: { environment: Environment & { slug: string } }) {
+  return (
+    <span className={cn("text-sm text-text-bright", environmentTextClassName(environment))}>
+      {environment.slug}
+    </span>
+  );
+}
+
 export function environmentTitle(environment: Environment, username?: string) {
   if (environment.branchName) {
     return environment.branchName;
diff --git a/apps/webapp/app/components/primitives/Tooltip.tsx b/apps/webapp/app/components/primitives/Tooltip.tsx
index 0b6b641d43..9c94673896 100644
--- a/apps/webapp/app/components/primitives/Tooltip.tsx
+++ b/apps/webapp/app/components/primitives/Tooltip.tsx
@@ -123,7 +123,7 @@ export function InfoIconTooltip({
   enabled?: boolean;
 }) {
   const icon = (
-    <InformationCircleIcon className={cn("size-3.5 text-text-dimmed", buttonClassName)} />
+    <InformationCircleIcon className={cn("size-3.5 text-text-dimmed flex-0", buttonClassName)} />
   );
 
   if (!enabled) return icon;

From 37ccc0a358631a44be9b2e81972b6c8ffa7c5e48 Mon Sep 17 00:00:00 2001
From: Matt Aitken <matt@mattaitken.com>
Date: Fri, 16 Jan 2026 16:57:52 +0000
Subject: [PATCH 114/137] Don't have a size on the environment slug component

---
 .../webapp/app/components/environments/EnvironmentLabel.tsx | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/apps/webapp/app/components/environments/EnvironmentLabel.tsx b/apps/webapp/app/components/environments/EnvironmentLabel.tsx
index eed4841d32..929655f546 100644
--- a/apps/webapp/app/components/environments/EnvironmentLabel.tsx
+++ b/apps/webapp/app/components/environments/EnvironmentLabel.tsx
@@ -139,11 +139,7 @@ export function EnvironmentLabel({
 }
 
 export function EnvironmentSlug({ environment }: { environment: Environment & { slug: string } }) {
-  return (
-    <span className={cn("text-sm text-text-bright", environmentTextClassName(environment))}>
-      {environment.slug}
-    </span>
-  );
+  return <span className={environmentTextClassName(environment)}>{environment.slug}</span>;
 }
 
 export function environmentTitle(environment: Environment, username?: string) {

From 9e3c5fd4d81c8f6e3864bbc7e55c641dc703a7c8 Mon Sep 17 00:00:00 2001
From: Matt Aitken <matt@mattaitken.com>
Date: Fri, 16 Jan 2026 16:58:09 +0000
Subject: [PATCH 115/137] whereClauseFallback added to TSQL

---
 internal-packages/tsql/src/index.test.ts | 476 +++++++++++++++++++++++
 internal-packages/tsql/src/index.ts      | 276 ++++++++++++-
 2 files changed, 747 insertions(+), 5 deletions(-)
 create mode 100644 internal-packages/tsql/src/index.test.ts

diff --git a/internal-packages/tsql/src/index.test.ts b/internal-packages/tsql/src/index.test.ts
new file mode 100644
index 0000000000..8621325c8c
--- /dev/null
+++ b/internal-packages/tsql/src/index.test.ts
@@ -0,0 +1,476 @@
+import { describe, it, expect } from "vitest";
+import {
+  compileTSQL,
+  parseTSQLSelect,
+  isColumnReferencedInExpression,
+  createFallbackExpression,
+  injectFallbackConditions,
+  type WhereClauseFallback,
+} from "./index.js";
+import { column, type TableSchema } from "./query/schema.js";
+
+/**
+ * Test table schema for whereClauseFallback tests
+ */
+const taskRunsSchema: TableSchema = {
+  name: "task_runs",
+  clickhouseName: "trigger_dev.task_runs_v2",
+  columns: {
+    id: { name: "id", ...column("String") },
+    status: { name: "status", ...column("String") },
+    created_at: { name: "created_at", ...column("DateTime64") },
+    updated_at: { name: "updated_at", ...column("DateTime64") },
+    time: { name: "time", ...column("DateTime64") },
+    organization_id: { name: "organization_id", ...column("String") },
+    project_id: { name: "project_id", ...column("String") },
+    environment_id: { name: "environment_id", ...column("String") },
+  },
+  tenantColumns: {
+    organizationId: "organization_id",
+    projectId: "project_id",
+    environmentId: "environment_id",
+  },
+};
+
+describe("isColumnReferencedInExpression", () => {
+  it("should detect column in simple WHERE clause", () => {
+    const ast = parseTSQLSelect("SELECT * FROM task_runs WHERE time > '2024-01-01'");
+    if (ast.expression_type === "select_query") {
+      expect(isColumnReferencedInExpression(ast.where, "time")).toBe(true);
+      expect(isColumnReferencedInExpression(ast.where, "status")).toBe(false);
+    }
+  });
+
+  it("should detect column in AND expression", () => {
+    const ast = parseTSQLSelect(
+      "SELECT * FROM task_runs WHERE time > '2024-01-01' AND status = 'completed'"
+    );
+    if (ast.expression_type === "select_query") {
+      expect(isColumnReferencedInExpression(ast.where, "time")).toBe(true);
+      expect(isColumnReferencedInExpression(ast.where, "status")).toBe(true);
+      expect(isColumnReferencedInExpression(ast.where, "id")).toBe(false);
+    }
+  });
+
+  it("should detect column in OR expression", () => {
+    const ast = parseTSQLSelect(
+      "SELECT * FROM task_runs WHERE time > '2024-01-01' OR status = 'completed'"
+    );
+    if (ast.expression_type === "select_query") {
+      expect(isColumnReferencedInExpression(ast.where, "time")).toBe(true);
+      expect(isColumnReferencedInExpression(ast.where, "status")).toBe(true);
+    }
+  });
+
+  it("should detect column in BETWEEN expression", () => {
+    const ast = parseTSQLSelect(
+      "SELECT * FROM task_runs WHERE time BETWEEN '2024-01-01' AND '2024-12-31'"
+    );
+    if (ast.expression_type === "select_query") {
+      expect(isColumnReferencedInExpression(ast.where, "time")).toBe(true);
+      expect(isColumnReferencedInExpression(ast.where, "status")).toBe(false);
+    }
+  });
+
+  it("should detect column in qualified reference (table.column)", () => {
+    const ast = parseTSQLSelect(
+      "SELECT * FROM task_runs WHERE task_runs.time > '2024-01-01'"
+    );
+    if (ast.expression_type === "select_query") {
+      expect(isColumnReferencedInExpression(ast.where, "time")).toBe(true);
+    }
+  });
+
+  it("should return false for empty WHERE clause", () => {
+    const ast = parseTSQLSelect("SELECT * FROM task_runs");
+    if (ast.expression_type === "select_query") {
+      expect(isColumnReferencedInExpression(ast.where, "time")).toBe(false);
+    }
+  });
+
+  it("should detect column in nested NOT expression", () => {
+    const ast = parseTSQLSelect("SELECT * FROM task_runs WHERE NOT time > '2024-01-01'");
+    if (ast.expression_type === "select_query") {
+      expect(isColumnReferencedInExpression(ast.where, "time")).toBe(true);
+    }
+  });
+});
+
+describe("createFallbackExpression", () => {
+  it("should create a simple comparison expression (gt)", () => {
+    const expr = createFallbackExpression("time", { op: "gt", value: "2024-01-01" });
+    expect(expr.expression_type).toBe("compare_operation");
+  });
+
+  it("should create a simple comparison expression (eq)", () => {
+    const expr = createFallbackExpression("status", { op: "eq", value: "completed" });
+    expect(expr.expression_type).toBe("compare_operation");
+  });
+
+  it("should create a between expression", () => {
+    const expr = createFallbackExpression("time", {
+      op: "between",
+      low: "2024-01-01",
+      high: "2024-12-31",
+    });
+    expect(expr.expression_type).toBe("between_expr");
+  });
+
+  it("should convert Date values to ISO strings", () => {
+    const date = new Date("2024-06-15T12:00:00Z");
+    const expr = createFallbackExpression("time", { op: "gte", value: date });
+    expect(expr.expression_type).toBe("compare_operation");
+  });
+});
+
+describe("injectFallbackConditions", () => {
+  it("should inject fallback when column is not in WHERE", () => {
+    const ast = parseTSQLSelect("SELECT * FROM task_runs WHERE status = 'completed'");
+    const fallbacks: Record<string, WhereClauseFallback> = {
+      time: { op: "gte", value: "2024-01-01" },
+    };
+
+    const modified = injectFallbackConditions(ast, fallbacks);
+    if (modified.expression_type === "select_query") {
+      expect(modified.where).toBeDefined();
+      expect(isColumnReferencedInExpression(modified.where, "time")).toBe(true);
+      expect(isColumnReferencedInExpression(modified.where, "status")).toBe(true);
+    }
+  });
+
+  it("should NOT inject fallback when column is already in WHERE", () => {
+    const ast = parseTSQLSelect("SELECT * FROM task_runs WHERE time > '2024-06-01'");
+    const fallbacks: Record<string, WhereClauseFallback> = {
+      time: { op: "gte", value: "2024-01-01" },
+    };
+
+    const modified = injectFallbackConditions(ast, fallbacks);
+    // The WHERE clause should remain as is (no additional time condition)
+    if (modified.expression_type === "select_query" && modified.where) {
+      // It should not be an AND expression - it should be the original compare_operation
+      expect(modified.where.expression_type).toBe("compare_operation");
+    }
+  });
+
+  it("should inject fallback when query has no WHERE clause", () => {
+    const ast = parseTSQLSelect("SELECT * FROM task_runs LIMIT 10");
+    const fallbacks: Record<string, WhereClauseFallback> = {
+      time: { op: "gte", value: "2024-01-01" },
+    };
+
+    const modified = injectFallbackConditions(ast, fallbacks);
+    if (modified.expression_type === "select_query") {
+      expect(modified.where).toBeDefined();
+      expect(isColumnReferencedInExpression(modified.where, "time")).toBe(true);
+    }
+  });
+
+  it("should inject multiple fallbacks", () => {
+    const ast = parseTSQLSelect("SELECT * FROM task_runs LIMIT 10");
+    const fallbacks: Record<string, WhereClauseFallback> = {
+      time: { op: "gte", value: "2024-01-01" },
+      status: { op: "eq", value: "completed" },
+    };
+
+    const modified = injectFallbackConditions(ast, fallbacks);
+    if (modified.expression_type === "select_query") {
+      expect(modified.where).toBeDefined();
+      expect(isColumnReferencedInExpression(modified.where, "time")).toBe(true);
+      expect(isColumnReferencedInExpression(modified.where, "status")).toBe(true);
+    }
+  });
+
+  it("should only inject fallbacks for unreferenced columns", () => {
+    const ast = parseTSQLSelect("SELECT * FROM task_runs WHERE time > '2024-06-01'");
+    const fallbacks: Record<string, WhereClauseFallback> = {
+      time: { op: "gte", value: "2024-01-01" }, // Should NOT be injected
+      status: { op: "eq", value: "completed" }, // Should be injected
+    };
+
+    const modified = injectFallbackConditions(ast, fallbacks);
+    if (modified.expression_type === "select_query" && modified.where) {
+      // Should be an AND expression combining fallback status with original time
+      expect(modified.where.expression_type).toBe("and");
+    }
+  });
+});
+
+describe("compileTSQL with whereClauseFallback", () => {
+  const baseOptions = {
+    organizationId: "org_test123",
+    projectId: "proj_test456",
+    environmentId: "env_test789",
+    tableSchema: [taskRunsSchema],
+  };
+
+  describe("simple comparison fallbacks", () => {
+    it("should apply gt fallback when column not in WHERE", () => {
+      const { sql } = compileTSQL("SELECT * FROM task_runs WHERE status = 'completed'", {
+        ...baseOptions,
+        whereClauseFallback: {
+          time: { op: "gt", value: "2024-01-01" },
+        },
+      });
+
+      // Should contain a time comparison
+      expect(sql).toContain("time");
+      expect(sql).toContain("greater(");
+    });
+
+    it("should apply gte fallback when column not in WHERE", () => {
+      const { sql } = compileTSQL("SELECT id FROM task_runs", {
+        ...baseOptions,
+        whereClauseFallback: {
+          time: { op: "gte", value: "2024-01-01" },
+        },
+      });
+
+      expect(sql).toContain("greaterOrEquals(");
+    });
+
+    it("should apply lt fallback when column not in WHERE", () => {
+      const { sql } = compileTSQL("SELECT id FROM task_runs", {
+        ...baseOptions,
+        whereClauseFallback: {
+          time: { op: "lt", value: "2024-12-31" },
+        },
+      });
+
+      expect(sql).toContain("less(");
+    });
+
+    it("should apply lte fallback when column not in WHERE", () => {
+      const { sql } = compileTSQL("SELECT id FROM task_runs", {
+        ...baseOptions,
+        whereClauseFallback: {
+          time: { op: "lte", value: "2024-12-31" },
+        },
+      });
+
+      expect(sql).toContain("lessOrEquals(");
+    });
+
+    it("should apply eq fallback when column not in WHERE", () => {
+      const { sql } = compileTSQL("SELECT id FROM task_runs", {
+        ...baseOptions,
+        whereClauseFallback: {
+          status: { op: "eq", value: "completed" },
+        },
+      });
+
+      expect(sql).toContain("equals(");
+      expect(sql).toContain("status");
+    });
+
+    it("should apply neq fallback when column not in WHERE", () => {
+      const { sql } = compileTSQL("SELECT id FROM task_runs", {
+        ...baseOptions,
+        whereClauseFallback: {
+          status: { op: "neq", value: "failed" },
+        },
+      });
+
+      expect(sql).toContain("notEquals(");
+      expect(sql).toContain("status");
+    });
+  });
+
+  describe("between fallback", () => {
+    it("should apply BETWEEN fallback when column not in WHERE", () => {
+      const { sql } = compileTSQL("SELECT id FROM task_runs WHERE status = 'completed'", {
+        ...baseOptions,
+        whereClauseFallback: {
+          time: { op: "between", low: "2024-01-01", high: "2024-12-31" },
+        },
+      });
+
+      expect(sql).toContain("time BETWEEN");
+    });
+
+    it("should apply BETWEEN fallback with Date values", () => {
+      const startDate = new Date("2024-01-01T00:00:00Z");
+      const endDate = new Date("2024-12-31T23:59:59Z");
+
+      const { sql, params } = compileTSQL("SELECT id FROM task_runs", {
+        ...baseOptions,
+        whereClauseFallback: {
+          time: { op: "between", low: startDate, high: endDate },
+        },
+      });
+
+      expect(sql).toContain("time BETWEEN");
+      // The dates should be converted to ISO strings and parameterized
+      expect(Object.values(params).some((v) => typeof v === "string" && v.includes("2024"))).toBe(
+        true
+      );
+    });
+  });
+
+  describe("fallback NOT applied when column already filtered", () => {
+    it("should NOT apply fallback when column is in simple WHERE", () => {
+      const { sql } = compileTSQL("SELECT * FROM task_runs WHERE time > '2024-06-01'", {
+        ...baseOptions,
+        whereClauseFallback: {
+          time: { op: "gte", value: "2024-01-01" },
+        },
+      });
+
+      // Should only have the user's time condition, not the fallback
+      // Count occurrences of time comparison - should be 1 (just the user's)
+      const timeMatches = sql.match(/greater\(.*?time/g) || [];
+      expect(timeMatches.length).toBe(1);
+    });
+
+    it("should NOT apply fallback when column is in BETWEEN expression", () => {
+      const { sql } = compileTSQL(
+        "SELECT * FROM task_runs WHERE time BETWEEN '2024-06-01' AND '2024-06-30'",
+        {
+          ...baseOptions,
+          whereClauseFallback: {
+            time: { op: "gte", value: "2024-01-01" },
+          },
+        }
+      );
+
+      // Should have the user's BETWEEN, not the fallback gte
+      expect(sql).toContain("time BETWEEN");
+      expect(sql).not.toContain("greaterOrEquals(");
+    });
+
+    it("should NOT apply fallback when column is in AND expression", () => {
+      const { sql } = compileTSQL(
+        "SELECT * FROM task_runs WHERE status = 'completed' AND time > '2024-06-01'",
+        {
+          ...baseOptions,
+          whereClauseFallback: {
+            time: { op: "gte", value: "2024-01-01" },
+          },
+        }
+      );
+
+      // Should only have one time comparison
+      const timeMatches = sql.match(/greater\(.*?time/g) || [];
+      expect(timeMatches.length).toBe(1);
+    });
+
+    it("should NOT apply fallback when column is in OR expression", () => {
+      const { sql } = compileTSQL(
+        "SELECT * FROM task_runs WHERE status = 'completed' OR time > '2024-06-01'",
+        {
+          ...baseOptions,
+          whereClauseFallback: {
+            time: { op: "gte", value: "2024-01-01" },
+          },
+        }
+      );
+
+      // Fallback should not be applied since time is mentioned in OR
+      const timeGreaterMatches = sql.match(/greater\(.*?time/g) || [];
+      expect(timeGreaterMatches.length).toBe(1);
+    });
+
+    it("should NOT apply fallback when column is in qualified reference", () => {
+      const { sql } = compileTSQL(
+        "SELECT * FROM task_runs WHERE task_runs.time > '2024-06-01'",
+        {
+          ...baseOptions,
+          whereClauseFallback: {
+            time: { op: "gte", value: "2024-01-01" },
+          },
+        }
+      );
+
+      // Fallback should not be applied
+      const timeGreaterMatches = sql.match(/greater.*time/g) || [];
+      expect(timeGreaterMatches.length).toBe(1);
+    });
+  });
+
+  describe("multiple fallbacks", () => {
+    it("should apply multiple fallbacks for different unreferenced columns", () => {
+      const { sql } = compileTSQL("SELECT id FROM task_runs", {
+        ...baseOptions,
+        whereClauseFallback: {
+          time: { op: "gte", value: "2024-01-01" },
+          status: { op: "eq", value: "completed" },
+        },
+      });
+
+      expect(sql).toContain("greaterOrEquals(");
+      expect(sql).toContain("time");
+      expect(sql).toContain("equals(");
+      expect(sql).toContain("status");
+    });
+
+    it("should only apply fallbacks for unreferenced columns when some are filtered", () => {
+      const { sql } = compileTSQL("SELECT id FROM task_runs WHERE time > '2024-06-01'", {
+        ...baseOptions,
+        whereClauseFallback: {
+          time: { op: "gte", value: "2024-01-01" }, // Should NOT be applied
+          status: { op: "eq", value: "completed" }, // Should be applied
+        },
+      });
+
+      // Status fallback should be applied
+      expect(sql).toContain("equals(");
+      expect(sql).toContain("status");
+
+      // Time should only have user's condition
+      const timeGreaterMatches = sql.match(/greater\(.*?time/g) || [];
+      expect(timeGreaterMatches.length).toBe(1);
+    });
+  });
+
+  describe("edge cases", () => {
+    it("should handle empty whereClauseFallback", () => {
+      const { sql } = compileTSQL("SELECT id FROM task_runs", {
+        ...baseOptions,
+        whereClauseFallback: {},
+      });
+
+      // Should just compile normally without errors
+      expect(sql).toContain("SELECT");
+      expect(sql).toContain("FROM");
+    });
+
+    it("should handle undefined whereClauseFallback", () => {
+      const { sql } = compileTSQL("SELECT id FROM task_runs", {
+        ...baseOptions,
+        // whereClauseFallback is undefined
+      });
+
+      // Should just compile normally without errors
+      expect(sql).toContain("SELECT");
+      expect(sql).toContain("FROM");
+    });
+
+    it("should work with UNION queries", () => {
+      const { sql } = compileTSQL(
+        "SELECT id FROM task_runs WHERE status = 'completed' UNION ALL SELECT id FROM task_runs WHERE status = 'failed'",
+        {
+          ...baseOptions,
+          whereClauseFallback: {
+            time: { op: "gte", value: "2024-01-01" },
+          },
+        }
+      );
+
+      // Both queries in the UNION should have the time fallback
+      const timeMatches = sql.match(/greaterOrEquals\(.*?time/g) || [];
+      expect(timeMatches.length).toBe(2);
+    });
+
+    it("should handle numeric values in fallback", () => {
+      const { sql } = compileTSQL("SELECT id FROM task_runs", {
+        ...baseOptions,
+        whereClauseFallback: {
+          id: { op: "gt", value: 100 },
+        },
+      });
+
+      expect(sql).toContain("greater(");
+      expect(sql).toContain("100");
+    });
+  });
+});
+
diff --git a/internal-packages/tsql/src/index.ts b/internal-packages/tsql/src/index.ts
index d60af63766..524d2ed28d 100644
--- a/internal-packages/tsql/src/index.ts
+++ b/internal-packages/tsql/src/index.ts
@@ -6,7 +6,19 @@ import { CharStreams, CommonTokenStream } from "antlr4ts";
 import type { Token } from "antlr4ts/Token";
 import { TSQLLexer } from "./grammar/TSQLLexer.js";
 import { TSQLParser } from "./grammar/TSQLParser.js";
-import type { Expression, SelectQuery, SelectSetQuery } from "./query/ast.js";
+import type {
+  And,
+  BetweenExpr,
+  CompareOperation,
+  Constant,
+  Expression,
+  Field,
+  Not,
+  Or,
+  SelectQuery,
+  SelectSetQuery,
+} from "./query/ast.js";
+import { CompareOperationOp } from "./query/ast.js";
 import { SyntaxError as TSQLSyntaxError } from "./query/errors.js";
 import { TSQLParseTreeConverter } from "./query/parser.js";
 import { printToClickHouse, type PrintResult } from "./query/printer.js";
@@ -203,6 +215,237 @@ export function parseTSQLExpr(expr: string): Expression {
   return converter.visit(parseTree) as Expression;
 }
 
+/**
+ * Check if a column is referenced in an expression (for WHERE clause detection).
+ * Recursively traverses And, Or, CompareOperation, BetweenExpr, and Field nodes.
+ *
+ * @param expr - The expression to search
+ * @param column - The column name to look for
+ * @returns true if the column is referenced in the expression
+ */
+export function isColumnReferencedInExpression(
+  expr: Expression | undefined,
+  column: string
+): boolean {
+  if (!expr) return false;
+
+  const exprType = (expr as Expression).expression_type;
+
+  switch (exprType) {
+    case "and": {
+      const andExpr = expr as And;
+      return andExpr.exprs.some((e) => isColumnReferencedInExpression(e, column));
+    }
+    case "or": {
+      const orExpr = expr as Or;
+      return orExpr.exprs.some((e) => isColumnReferencedInExpression(e, column));
+    }
+    case "compare_operation": {
+      const compareExpr = expr as CompareOperation;
+      return (
+        isColumnReferencedInExpression(compareExpr.left, column) ||
+        isColumnReferencedInExpression(compareExpr.right, column)
+      );
+    }
+    case "between_expr": {
+      const betweenExpr = expr as BetweenExpr;
+      return isColumnReferencedInExpression(betweenExpr.expr, column);
+    }
+    case "field": {
+      const fieldExpr = expr as Field;
+      // Check if any part of the chain matches the column name
+      // Handles both unqualified (column) and qualified (table.column) references
+      return fieldExpr.chain.some((part) => part === column);
+    }
+    case "not": {
+      const notExpr = expr as Not;
+      return isColumnReferencedInExpression(notExpr.expr, column);
+    }
+    default:
+      return false;
+  }
+}
+
+/**
+ * Convert a fallback value to the appropriate type for AST constants
+ */
+function convertFallbackValue(value: Date | string | number): string | number {
+  if (value instanceof Date) {
+    return value.toISOString();
+  }
+  return value;
+}
+
+/**
+ * Map fallback operator to CompareOperationOp
+ */
+function mapFallbackOpToCompareOp(op: SimpleComparisonFallback["op"]): CompareOperationOp {
+  switch (op) {
+    case "eq":
+      return CompareOperationOp.Eq;
+    case "neq":
+      return CompareOperationOp.NotEq;
+    case "gt":
+      return CompareOperationOp.Gt;
+    case "gte":
+      return CompareOperationOp.GtEq;
+    case "lt":
+      return CompareOperationOp.Lt;
+    case "lte":
+      return CompareOperationOp.LtEq;
+  }
+}
+
+/**
+ * Create an AST expression from a fallback condition
+ *
+ * @param column - The column name
+ * @param fallback - The fallback condition
+ * @returns The AST expression for the fallback condition
+ */
+export function createFallbackExpression(
+  column: string,
+  fallback: WhereClauseFallback
+): Expression {
+  const fieldExpr: Field = {
+    expression_type: "field",
+    chain: [column],
+  };
+
+  if (fallback.op === "between") {
+    const betweenExpr: BetweenExpr = {
+      expression_type: "between_expr",
+      expr: fieldExpr,
+      low: {
+        expression_type: "constant",
+        value: convertFallbackValue(fallback.low),
+      } as Constant,
+      high: {
+        expression_type: "constant",
+        value: convertFallbackValue(fallback.high),
+      } as Constant,
+    };
+    return betweenExpr;
+  }
+
+  // Simple comparison
+  const compareExpr: CompareOperation = {
+    expression_type: "compare_operation",
+    left: fieldExpr,
+    right: {
+      expression_type: "constant",
+      value: convertFallbackValue(fallback.value),
+    } as Constant,
+    op: mapFallbackOpToCompareOp(fallback.op),
+  };
+  return compareExpr;
+}
+
+/**
+ * Inject fallback WHERE conditions into a parsed AST.
+ * Only adds fallback conditions for columns not already referenced in the WHERE clause.
+ *
+ * @param ast - The parsed SELECT query AST
+ * @param fallbacks - The fallback conditions to potentially inject
+ * @returns The modified AST with fallback conditions injected
+ */
+export function injectFallbackConditions(
+  ast: SelectQuery | SelectSetQuery,
+  fallbacks: Record<string, WhereClauseFallback>
+): SelectQuery | SelectSetQuery {
+  // Handle SelectSetQuery (UNION, etc.) - apply to each query in the set
+  if (ast.expression_type === "select_set_query") {
+    const setQuery = ast as SelectSetQuery;
+    // Process the initial select query
+    const modifiedInitial = injectFallbackConditions(
+      setQuery.initial_select_query,
+      fallbacks
+    ) as SelectQuery;
+
+    // Process subsequent queries
+    const modifiedSubsequent = setQuery.subsequent_select_queries.map((sq) => ({
+      ...sq,
+      select_query: injectFallbackConditions(sq.select_query, fallbacks) as SelectQuery,
+    }));
+
+    return {
+      ...setQuery,
+      initial_select_query: modifiedInitial,
+      subsequent_select_queries: modifiedSubsequent,
+    };
+  }
+
+  // Handle SelectQuery
+  const selectQuery = ast as SelectQuery;
+  const existingWhere = selectQuery.where;
+
+  // Collect fallback expressions for columns not already in WHERE
+  const fallbackExprs: Expression[] = [];
+  for (const [column, fallback] of Object.entries(fallbacks)) {
+    if (!isColumnReferencedInExpression(existingWhere, column)) {
+      fallbackExprs.push(createFallbackExpression(column, fallback));
+    }
+  }
+
+  // If no fallbacks to add, return original AST
+  if (fallbackExprs.length === 0) {
+    return ast;
+  }
+
+  // Combine fallbacks with existing WHERE using AND
+  let newWhere: Expression;
+  if (!existingWhere) {
+    // No existing WHERE - just use fallbacks
+    if (fallbackExprs.length === 1) {
+      newWhere = fallbackExprs[0];
+    } else {
+      newWhere = {
+        expression_type: "and",
+        exprs: fallbackExprs,
+      } as And;
+    }
+  } else {
+    // Combine existing WHERE with fallbacks
+    newWhere = {
+      expression_type: "and",
+      exprs: [...fallbackExprs, existingWhere],
+    } as And;
+  }
+
+  return {
+    ...selectQuery,
+    where: newWhere,
+  };
+}
+
+/**
+ * A simple comparison fallback condition (e.g., column > value)
+ */
+export interface SimpleComparisonFallback {
+  /** The comparison operator */
+  op: "eq" | "neq" | "gt" | "gte" | "lt" | "lte";
+  /** The value to compare against */
+  value: Date | string | number;
+}
+
+/**
+ * A between fallback condition (e.g., column BETWEEN low AND high)
+ */
+export interface BetweenFallback {
+  /** The between operator */
+  op: "between";
+  /** The low bound of the range */
+  low: Date | string | number;
+  /** The high bound of the range */
+  high: Date | string | number;
+}
+
+/**
+ * A WHERE clause fallback condition.
+ * Used to apply default filters when the user hasn't specified one for a column.
+ */
+export type WhereClauseFallback = SimpleComparisonFallback | BetweenFallback;
+
 /**
  * Options for compiling a TSQL query to ClickHouse SQL
  */
@@ -229,6 +472,24 @@ export interface CompileTSQLOptions {
    * ```
    */
   fieldMappings?: FieldMappings;
+  /**
+   * Fallback WHERE conditions to apply when the user hasn't filtered on a column.
+   * Key is the column name, value is the fallback condition.
+   *
+   * @example
+   * ```typescript
+   * // Apply time > 7 days ago if user doesn't filter on time
+   * whereClauseFallback: {
+   *   time: { op: 'gte', value: new Date(Date.now() - 7 * 24 * 60 * 60 * 1000) }
+   * }
+   *
+   * // Apply time BETWEEN two dates if user doesn't filter on time
+   * whereClauseFallback: {
+   *   time: { op: 'between', low: startDate, high: endDate }
+   * }
+   * ```
+   */
+  whereClauseFallback?: Record<string, WhereClauseFallback>;
 }
 
 /**
@@ -261,12 +522,17 @@ export interface CompileTSQLOptions {
  */
 export function compileTSQL(query: string, options: CompileTSQLOptions): PrintResult {
   // 1. Parse the TSQL query
-  const ast = parseTSQLSelect(query);
+  let ast = parseTSQLSelect(query);
+
+  // 2. Inject fallback WHERE conditions if provided
+  if (options.whereClauseFallback && Object.keys(options.whereClauseFallback).length > 0) {
+    ast = injectFallbackConditions(ast, options.whereClauseFallback);
+  }
 
-  // 2. Create schema registry from table schemas
+  // 3. Create schema registry from table schemas
   const schemaRegistry = createSchemaRegistry(options.tableSchema);
 
-  // 3. Create printer context with tenant IDs and field mappings
+  // 4. Create printer context with tenant IDs and field mappings
   const context = createPrinterContext({
     organizationId: options.organizationId,
     projectId: options.projectId,
@@ -276,6 +542,6 @@ export function compileTSQL(query: string, options: CompileTSQLOptions): PrintRe
     fieldMappings: options.fieldMappings,
   });
 
-  // 4. Print the AST to ClickHouse SQL
+  // 5. Print the AST to ClickHouse SQL
   return printToClickHouse(ast, context);
 }

From 86898f25d84f150c2535c92bf6a83a3145dd9d4f Mon Sep 17 00:00:00 2001
From: Matt Aitken <matt@mattaitken.com>
Date: Sat, 17 Jan 2026 12:51:14 +0000
Subject: [PATCH 116/137] Query date picker works

---
 .../route.tsx                                 | 54 +++++++++++++++++--
 .../app/services/queryService.server.ts       |  2 +
 .../clickhouse/src/client/tsql.ts             | 17 +++++-
 internal-packages/clickhouse/src/index.ts     |  1 +
 internal-packages/tsql/src/index.ts           | 48 +++++++++++------
 5 files changed, 102 insertions(+), 20 deletions(-)

diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/route.tsx
index 68359fd85d..4d2a5d8acf 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/route.tsx
@@ -1,5 +1,5 @@
 import { ArrowDownTrayIcon, ClipboardIcon } from "@heroicons/react/20/solid";
-import type { OutputColumnMetadata } from "@internal/clickhouse";
+import type { OutputColumnMetadata, WhereClauseFallback } from "@internal/clickhouse";
 import { Form, useNavigation } from "@remix-run/react";
 import {
   redirect,
@@ -21,6 +21,8 @@ import { autoFormatSQL, TSQLEditor } from "~/components/code/TSQLEditor";
 import { TSQLResultsTable } from "~/components/code/TSQLResultsTable";
 import { EnvironmentLabel } from "~/components/environments/EnvironmentLabel";
 import { PageBody, PageContainer } from "~/components/layout/AppLayout";
+import { TimeFilter, timeFilters } from "~/components/runs/v3/SharedFilters";
+import { useSearchParams } from "~/hooks/useSearchParam";
 import { Button } from "~/components/primitives/Buttons";
 import { Callout } from "~/components/primitives/Callout";
 import { Card } from "~/components/primitives/charts/Card";
@@ -62,6 +64,8 @@ import { querySchemas } from "~/v3/querySchemas";
 import { QueryHelpSidebar } from "./QueryHelpSidebar";
 import { QueryHistoryPopover } from "./QueryHistoryPopover";
 import { formatQueryStats } from "./utils";
+import { requireUser } from "~/services/session.server";
+import parse from "parse-duration";
 
 async function hasQueryAccess(
   userId: string,
@@ -148,12 +152,15 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
   });
 };
 
-import { requireUser } from "~/services/session.server";
+const DEFAULT_PERIOD = "7d";
 
 const ActionSchema = z.object({
   query: z.string().min(1, "Query is required"),
   scope: z.enum(["environment", "project", "organization"]),
   explain: z.enum(["true", "false"]).nullable().optional(),
+  period: z.string().nullable().optional(),
+  from: z.string().nullable().optional(),
+  to: z.string().nullable().optional(),
 });
 
 export const action = async ({ request, params }: ActionFunctionArgs) => {
@@ -218,6 +225,9 @@ export const action = async ({ request, params }: ActionFunctionArgs) => {
     query: formData.get("query"),
     scope: formData.get("scope"),
     explain: formData.get("explain"),
+    period: formData.get("period"),
+    from: formData.get("from"),
+    to: formData.get("to"),
   });
 
   if (!parsed.success) {
@@ -235,11 +245,35 @@ export const action = async ({ request, params }: ActionFunctionArgs) => {
     );
   }
 
-  const { query, scope, explain: explainParam } = parsed.data;
+  const { query, scope, explain: explainParam, period, from, to } = parsed.data;
   // Only allow explain for admins/impersonating users
   const isAdmin = user.admin || user.isImpersonating;
   const explain = explainParam === "true" && isAdmin;
 
+  // Build time filter fallback for triggered_at column
+  const timeFilter = timeFilters({
+    period: period ?? undefined,
+    from: from ?? undefined,
+    to: to ?? undefined,
+    defaultPeriod: DEFAULT_PERIOD,
+  });
+
+  let triggeredAtFallback: WhereClauseFallback;
+  if (timeFilter.from && timeFilter.to) {
+    // Both from and to specified - use BETWEEN
+    triggeredAtFallback = { op: "between", low: timeFilter.from, high: timeFilter.to };
+  } else if (timeFilter.from) {
+    // Only from specified
+    triggeredAtFallback = { op: "gte", value: timeFilter.from };
+  } else if (timeFilter.to) {
+    // Only to specified
+    triggeredAtFallback = { op: "lte", value: timeFilter.to };
+  } else {
+    // Period specified (or default) - calculate from now
+    const periodMs = parse(timeFilter.period ?? DEFAULT_PERIOD) ?? 7 * 24 * 60 * 60 * 1000;
+    triggeredAtFallback = { op: "gte", value: new Date(Date.now() - periodMs) };
+  }
+
   try {
     const [error, result] = await executeQuery({
       name: "query-page",
@@ -252,6 +286,9 @@ export const action = async ({ request, params }: ActionFunctionArgs) => {
       projectId: project.id,
       environmentId: environment.id,
       explain,
+      whereClauseFallback: {
+        triggered_at: triggeredAtFallback,
+      },
       history: {
         source: "DASHBOARD",
         userId: user.id,
@@ -320,6 +357,12 @@ const QueryEditorForm = forwardRef<
 >(function QueryEditorForm({ defaultQuery, defaultScope, history, isLoading, isAdmin }, ref) {
   const [query, setQuery] = useState(defaultQuery);
   const [scope, setScope] = useState<QueryScope>(defaultScope);
+  const { value: searchParamValue } = useSearchParams();
+
+  // Get time filter values from URL search params
+  const period = searchParamValue("period");
+  const from = searchParamValue("from");
+  const to = searchParamValue("to");
 
   // Expose methods to parent for external query setting (history, AI, examples)
   useImperativeHandle(
@@ -352,6 +395,10 @@ const QueryEditorForm = forwardRef<
       <Form method="post" className="flex items-center justify-between gap-2 px-2">
         <input type="hidden" name="query" value={query} />
         <input type="hidden" name="scope" value={scope} />
+        {/* Pass time filter values to action */}
+        <input type="hidden" name="period" value={period ?? ""} />
+        <input type="hidden" name="from" value={from ?? ""} />
+        <input type="hidden" name="to" value={to ?? ""} />
         <QueryHistoryPopover history={history} onQuerySelected={handleHistorySelected} />
         <div className="flex items-center gap-1">
           <Select
@@ -372,6 +419,7 @@ const QueryEditorForm = forwardRef<
               ))
             }
           </Select>
+          <TimeFilter defaultPeriod={DEFAULT_PERIOD} />
           {isAdmin && (
             <Button
               type="submit"
diff --git a/apps/webapp/app/services/queryService.server.ts b/apps/webapp/app/services/queryService.server.ts
index 4d3ea6f7af..29e349ee81 100644
--- a/apps/webapp/app/services/queryService.server.ts
+++ b/apps/webapp/app/services/queryService.server.ts
@@ -94,6 +94,7 @@ export async function executeQuery<TOut extends z.ZodSchema>(
     environmentId,
     history,
     customOrgConcurrencyLimit,
+    whereClauseFallback,
     ...baseOptions
   } = options;
 
@@ -155,6 +156,7 @@ export async function executeQuery<TOut extends z.ZodSchema>(
       ...baseOptions,
       ...tenantOptions,
       fieldMappings,
+      whereClauseFallback,
       clickhouseSettings: {
         ...getDefaultClickhouseSettings(),
         ...baseOptions.clickhouseSettings, // Allow caller overrides if needed
diff --git a/internal-packages/clickhouse/src/client/tsql.ts b/internal-packages/clickhouse/src/client/tsql.ts
index c5052ab8ed..c68923369d 100644
--- a/internal-packages/clickhouse/src/client/tsql.ts
+++ b/internal-packages/clickhouse/src/client/tsql.ts
@@ -14,6 +14,7 @@ import {
   type TableSchema,
   type QuerySettings,
   type FieldMappings,
+  type WhereClauseFallback,
 } from "@internal/tsql";
 import type { ClickhouseReader, QueryStats } from "./types.js";
 import { QueryError } from "./errors.js";
@@ -24,7 +25,7 @@ const logger = new Logger("tsql", "info");
 
 export type { QueryStats };
 
-export type { TableSchema, QuerySettings, FieldMappings };
+export type { TableSchema, QuerySettings, FieldMappings, WhereClauseFallback };
 
 /**
  * Options for executing a TSQL query
@@ -74,6 +75,19 @@ export interface ExecuteTSQLOptions<TOut extends z.ZodSchema> {
    * @default false
    */
   explain?: boolean;
+  /**
+   * Fallback WHERE conditions to apply when the user hasn't filtered on a column.
+   * Key is the column name, value is the fallback condition.
+   *
+   * @example
+   * ```typescript
+   * // Apply triggered_at >= 7 days ago if user doesn't filter on triggered_at
+   * whereClauseFallback: {
+   *   triggered_at: { op: 'gte', value: new Date(Date.now() - 7 * 24 * 60 * 60 * 1000) }
+   * }
+   * ```
+   */
+  whereClauseFallback?: Record<string, WhereClauseFallback>;
 }
 
 /**
@@ -144,6 +158,7 @@ export async function executeTSQL<TOut extends z.ZodSchema>(
       tableSchema: options.tableSchema,
       settings: options.querySettings,
       fieldMappings: options.fieldMappings,
+      whereClauseFallback: options.whereClauseFallback,
     });
 
     generatedSql = sql;
diff --git a/internal-packages/clickhouse/src/index.ts b/internal-packages/clickhouse/src/index.ts
index 4f98cfbca1..acb3c56a8a 100644
--- a/internal-packages/clickhouse/src/index.ts
+++ b/internal-packages/clickhouse/src/index.ts
@@ -56,6 +56,7 @@ export {
   type TSQLQuerySuccess,
   type QueryStats,
   type FieldMappings,
+  type WhereClauseFallback,
 } from "./client/tsql.js";
 export type { OutputColumnMetadata } from "@internal/tsql";
 
diff --git a/internal-packages/tsql/src/index.ts b/internal-packages/tsql/src/index.ts
index 524d2ed28d..9a7b3ddb20 100644
--- a/internal-packages/tsql/src/index.ts
+++ b/internal-packages/tsql/src/index.ts
@@ -9,6 +9,7 @@ import { TSQLParser } from "./grammar/TSQLParser.js";
 import type {
   And,
   BetweenExpr,
+  Call,
   CompareOperation,
   Constant,
   Expression,
@@ -267,13 +268,37 @@ export function isColumnReferencedInExpression(
 }
 
 /**
- * Convert a fallback value to the appropriate type for AST constants
+ * Format a Date as a ClickHouse-compatible DateTime64 string.
+ * ClickHouse expects format: 'YYYY-MM-DD HH:MM:SS.mmm' (in UTC)
  */
-function convertFallbackValue(value: Date | string | number): string | number {
+function formatDateForClickHouse(date: Date): string {
+  const year = date.getUTCFullYear();
+  const month = String(date.getUTCMonth() + 1).padStart(2, "0");
+  const day = String(date.getUTCDate()).padStart(2, "0");
+  const hours = String(date.getUTCHours()).padStart(2, "0");
+  const minutes = String(date.getUTCMinutes()).padStart(2, "0");
+  const seconds = String(date.getUTCSeconds()).padStart(2, "0");
+  const ms = String(date.getUTCMilliseconds()).padStart(3, "0");
+  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}.${ms}`;
+}
+
+/**
+ * Create an AST expression for a fallback value.
+ * Date values are wrapped in toDateTime64() for ClickHouse compatibility.
+ */
+function createValueExpression(value: Date | string | number): Expression {
   if (value instanceof Date) {
-    return value.toISOString();
+    // Wrap Date in toDateTime64(formatted_string, 3) for ClickHouse DateTime64(3) columns
+    return {
+      expression_type: "call",
+      name: "toDateTime64",
+      args: [
+        { expression_type: "constant", value: formatDateForClickHouse(value) } as Constant,
+        { expression_type: "constant", value: 3 } as Constant,
+      ],
+    } as Call;
   }
-  return value;
+  return { expression_type: "constant", value } as Constant;
 }
 
 /**
@@ -316,14 +341,8 @@ export function createFallbackExpression(
     const betweenExpr: BetweenExpr = {
       expression_type: "between_expr",
       expr: fieldExpr,
-      low: {
-        expression_type: "constant",
-        value: convertFallbackValue(fallback.low),
-      } as Constant,
-      high: {
-        expression_type: "constant",
-        value: convertFallbackValue(fallback.high),
-      } as Constant,
+      low: createValueExpression(fallback.low),
+      high: createValueExpression(fallback.high),
     };
     return betweenExpr;
   }
@@ -332,10 +351,7 @@ export function createFallbackExpression(
   const compareExpr: CompareOperation = {
     expression_type: "compare_operation",
     left: fieldExpr,
-    right: {
-      expression_type: "constant",
-      value: convertFallbackValue(fallback.value),
-    } as Constant,
+    right: createValueExpression(fallback.value),
     op: mapFallbackOpToCompareOp(fallback.op),
   };
   return compareExpr;

From 49e8f107d9992e60f3e3d960f3f3fd4a793d1b93 Mon Sep 17 00:00:00 2001
From: Matt Aitken <matt@mattaitken.com>
Date: Sat, 17 Jan 2026 13:13:53 +0000
Subject: [PATCH 117/137] Improved date filter display

---
 .../app/components/runs/v3/SharedFilters.tsx  | 42 ++++++++++++++-----
 .../route.tsx                                 | 24 +++++------
 2 files changed, 43 insertions(+), 23 deletions(-)

diff --git a/apps/webapp/app/components/runs/v3/SharedFilters.tsx b/apps/webapp/app/components/runs/v3/SharedFilters.tsx
index bbb8ee8dc0..2c35253d3f 100644
--- a/apps/webapp/app/components/runs/v3/SharedFilters.tsx
+++ b/apps/webapp/app/components/runs/v3/SharedFilters.tsx
@@ -28,6 +28,8 @@ import { cn } from "~/utils/cn";
 import { Button } from "../../primitives/Buttons";
 import { filterIcon } from "./RunFilters";
 import { Paragraph } from "~/components/primitives/Paragraph";
+import { ShortcutDefinition } from "~/hooks/useShortcutKeys";
+import { SpanPresenter } from "~/presenters/v3/SpanPresenter.server";
 
 export type DisplayableEnvironment = Pick<RuntimeEnvironment, "type" | "id"> & {
   userName?: string;
@@ -140,11 +142,13 @@ export const timeFilters = ({
   from,
   to,
   defaultPeriod = DEFAULT_PERIOD,
+  labelName = "Created",
 }: {
   period?: string;
   from?: string | number;
   to?: string | number;
   defaultPeriod?: string;
+  labelName?: string;
 }): {
   period?: string;
   from?: Date;
@@ -155,7 +159,11 @@ export const timeFilters = ({
   valueLabel: ReactNode;
 } => {
   if (period) {
-    return { period, isDefault: period === defaultPeriod, ...timeFilterRenderValues({ period }) };
+    return {
+      period,
+      isDefault: period === defaultPeriod,
+      ...timeFilterRenderValues({ period, labelName }),
+    };
   }
 
   if (from && to) {
@@ -165,7 +173,7 @@ export const timeFilters = ({
       from: fromDate,
       to: toDate,
       isDefault: false,
-      ...timeFilterRenderValues({ from: fromDate, to: toDate }),
+      ...timeFilterRenderValues({ from: fromDate, to: toDate, labelName }),
     };
   }
 
@@ -175,7 +183,7 @@ export const timeFilters = ({
     return {
       from: fromDate,
       isDefault: false,
-      ...timeFilterRenderValues({ from: fromDate }),
+      ...timeFilterRenderValues({ from: fromDate, labelName }),
     };
   }
 
@@ -185,14 +193,14 @@ export const timeFilters = ({
     return {
       to: toDate,
       isDefault: false,
-      ...timeFilterRenderValues({ to: toDate }),
+      ...timeFilterRenderValues({ to: toDate, labelName }),
     };
   }
 
   return {
     period: defaultPeriod,
     isDefault: true,
-    ...timeFilterRenderValues({ period: defaultPeriod }),
+    ...timeFilterRenderValues({ period: defaultPeriod, labelName }),
   };
 };
 
@@ -201,11 +209,13 @@ export function timeFilterRenderValues({
   to,
   period,
   defaultPeriod = DEFAULT_PERIOD,
+  labelName = "Created",
 }: {
   from?: Date;
   to?: Date;
   period?: string;
   defaultPeriod?: string;
+  labelName?: string;
 }) {
   const rangeType: TimeRangeType = from && to ? "range" : from ? "from" : to ? "to" : "period";
 
@@ -252,19 +262,22 @@ export function timeFilterRenderValues({
 
   let label =
     rangeType === "range" || rangeType === "period"
-      ? "Created"
+      ? labelName
       : rangeType === "from"
-      ? "Created after"
-      : "Created before";
+      ? `${labelName} after`
+      : `${labelName} before`;
 
   return { label, valueLabel, rangeType };
 }
 
 export interface TimeFilterProps {
   defaultPeriod?: string;
+  /** Label name used in the filter display, defaults to "Created" */
+  labelName?: string;
+  applyShortcut?: ShortcutDefinition | undefined;
 }
 
-export function TimeFilter({ defaultPeriod }: TimeFilterProps = {}) {
+export function TimeFilter({ defaultPeriod, labelName = "Created", applyShortcut }: TimeFilterProps = {}) {
   const { value, del } = useSearchParams();
 
   const { period, from, to, label, valueLabel } = timeFilters({
@@ -272,6 +285,7 @@ export function TimeFilter({ defaultPeriod }: TimeFilterProps = {}) {
     from: value("from"),
     to: value("to"),
     defaultPeriod,
+    labelName,
   });
 
   return (
@@ -293,6 +307,8 @@ export function TimeFilter({ defaultPeriod }: TimeFilterProps = {}) {
           from={from}
           to={to}
           defaultPeriod={defaultPeriod}
+          labelName={labelName}
+          applyShortcut={applyShortcut}
         />
       )}
     </FilterMenuProvider>
@@ -316,12 +332,16 @@ export function TimeDropdown({
   from,
   to,
   defaultPeriod = DEFAULT_PERIOD,
+  labelName = "Created",
+  applyShortcut,
 }: {
   trigger: ReactNode;
   period?: string;
   from?: Date;
   to?: Date;
   defaultPeriod?: string;
+  labelName?: string;
+  applyShortcut?: ShortcutDefinition | undefined;
 }) {
   const [open, setOpen] = useState<boolean | undefined>();
   const { replace } = useSearchParams();
@@ -449,7 +469,7 @@ export function TimeDropdown({
                   activeSection === "duration" && "text-indigo-500"
                 )}
               >
-                Runs created in the last
+                {labelName} in the last
               </Label>
               <div className="grid grid-cols-4 gap-2">
                 {/* Custom duration row */}
@@ -751,7 +771,7 @@ export function TimeDropdown({
             </Button>
             <Button
               variant="primary/small"
-              shortcut={{
+              shortcut={applyShortcut ? applyShortcut : {
                 modifiers: ["mod"],
                 key: "Enter",
                 enabledOnInputElements: true,
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/route.tsx
index 4d2a5d8acf..23f4b84869 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/route.tsx
@@ -401,6 +401,17 @@ const QueryEditorForm = forwardRef<
         <input type="hidden" name="to" value={to ?? ""} />
         <QueryHistoryPopover history={history} onQuerySelected={handleHistorySelected} />
         <div className="flex items-center gap-1">
+          {isAdmin && (
+            <Button
+              type="submit"
+              name="explain"
+              value="true"
+              variant="minimal/small"
+              disabled={isLoading || !query.trim()}
+            >
+              Explain
+            </Button>
+          )}
           <Select
             value={scope}
             setValue={(value) => setScope(value as QueryScope)}
@@ -419,18 +430,7 @@ const QueryEditorForm = forwardRef<
               ))
             }
           </Select>
-          <TimeFilter defaultPeriod={DEFAULT_PERIOD} />
-          {isAdmin && (
-            <Button
-              type="submit"
-              name="explain"
-              value="true"
-              variant="tertiary/small"
-              disabled={isLoading || !query.trim()}
-            >
-              Explain
-            </Button>
-          )}
+          <TimeFilter defaultPeriod={DEFAULT_PERIOD} labelName="Triggered" applyShortcut={{ key: "enter", enabledOnInputElements: true }} />
           <Button
             type="submit"
             variant="primary/small"

From 6599f0c2d4280d7aa4329bf522755ac5c325a802 Mon Sep 17 00:00:00 2001
From: Matt Aitken <matt@mattaitken.com>
Date: Sat, 17 Jan 2026 13:23:05 +0000
Subject: [PATCH 118/137] Fixed loading state

---
 .../route.tsx                                                 | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/route.tsx
index 23f4b84869..79bc1ae9c8 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/route.tsx
@@ -470,7 +470,9 @@ export default function Page() {
     }));
   }, []);
 
-  const isLoading = navigation.state === "submitting" || navigation.state === "loading";
+  const isLoading = (navigation.state === "submitting" || navigation.state === "loading") && navigation.formMethod === "POST";
+
+  console.log(navigation, isLoading);
 
   // Create a stable key from columns to detect schema changes
   const columnsKey = results?.columns

From b8c901b9136b0ed212c0456fd502103a1b0daf51 Mon Sep 17 00:00:00 2001
From: Matt Aitken <matt@mattaitken.com>
Date: Sat, 17 Jan 2026 13:25:55 +0000
Subject: [PATCH 119/137] Remove console.log

---
 .../route.tsx                                                    | 1 -
 1 file changed, 1 deletion(-)

diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/route.tsx
index 79bc1ae9c8..4774ab4dff 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/route.tsx
@@ -472,7 +472,6 @@ export default function Page() {
 
   const isLoading = (navigation.state === "submitting" || navigation.state === "loading") && navigation.formMethod === "POST";
 
-  console.log(navigation, isLoading);
 
   // Create a stable key from columns to detect schema changes
   const columnsKey = results?.columns

From 6d137b503e30950249b2a9fce28cdf1289045def Mon Sep 17 00:00:00 2001
From: Matt Aitken <matt@mattaitken.com>
Date: Sat, 17 Jan 2026 13:29:47 +0000
Subject: [PATCH 120/137] UI updates if triggered is set in the query

---
 .../route.tsx                                          | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/route.tsx
index 4774ab4dff..1286bafc5e 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/route.tsx
@@ -364,6 +364,10 @@ const QueryEditorForm = forwardRef<
   const from = searchParamValue("from");
   const to = searchParamValue("to");
 
+  // Check if the query contains triggered_at in a WHERE clause
+  // This disables the time filter UI since the user is filtering in their query
+  const queryHasTriggeredAt = /\bWHERE\b[\s\S]*\btriggered_at\b/i.test(query);
+
   // Expose methods to parent for external query setting (history, AI, examples)
   useImperativeHandle(
     ref,
@@ -430,7 +434,11 @@ const QueryEditorForm = forwardRef<
               ))
             }
           </Select>
-          <TimeFilter defaultPeriod={DEFAULT_PERIOD} labelName="Triggered" applyShortcut={{ key: "enter", enabledOnInputElements: true }} />
+          {queryHasTriggeredAt ? <Button variant="tertiary/small" disabled={true} type="button">Set in query</Button> : <TimeFilter
+            defaultPeriod={DEFAULT_PERIOD}
+            labelName="Triggered"
+            applyShortcut={{ key: "enter", enabledOnInputElements: true }}
+          />}
           <Button
             type="submit"
             variant="primary/small"

From 597dfd4fd8d9bbbab7173898b225e3dd6169d197 Mon Sep 17 00:00:00 2001
From: Matt Aitken <matt@mattaitken.com>
Date: Sat, 17 Jan 2026 21:01:33 +0000
Subject: [PATCH 121/137] Support multiple series

---
 .../app/components/code/ChartConfigPanel.tsx  | 162 ++++++++++++------
 1 file changed, 112 insertions(+), 50 deletions(-)

diff --git a/apps/webapp/app/components/code/ChartConfigPanel.tsx b/apps/webapp/app/components/code/ChartConfigPanel.tsx
index 5256bcecd0..24a44af47d 100644
--- a/apps/webapp/app/components/code/ChartConfigPanel.tsx
+++ b/apps/webapp/app/components/code/ChartConfigPanel.tsx
@@ -1,5 +1,5 @@
 import type { OutputColumnMetadata } from "@internal/clickhouse";
-import { BarChart, LineChart } from "lucide-react";
+import { BarChart, LineChart, Plus, XIcon } from "lucide-react";
 import { useCallback, useEffect, useMemo, useRef } from "react";
 import { cn } from "~/utils/cn";
 import { Header3 } from "../primitives/Headers";
@@ -322,31 +322,87 @@ export function ChartConfigPanel({ columns, config, onChange, className }: Chart
           </Select>
         </ConfigField>
 
-        {/* Y-Axis */}
-        <ConfigField label="Y-Axis">
+        {/* Y-Axis / Series */}
+        <ConfigField label={config.yAxisColumns.length > 1 ? "Series" : "Y-Axis"}>
           {yAxisOptions.length === 0 ? (
             <span className="text-xs text-text-dimmed">No numeric columns</span>
           ) : (
-            <Select
-              value={config.yAxisColumns[0] ?? ""}
-              setValue={(value) => updateConfig({ yAxisColumns: value ? [value] : [] })}
-              variant="tertiary/small"
-              placeholder="Select column"
-              items={yAxisOptions}
-              dropdownIcon
-              className="min-w-[140px]"
-            >
-              {(items) =>
-                items.map((item) => (
-                  <SelectItem key={item.value} value={item.value}>
-                    <span className="flex items-center gap-2">
-                      <span>{item.label}</span>
-                      <TypeBadge type={item.type} />
-                    </span>
-                  </SelectItem>
-                ))
-              }
-            </Select>
+            <div className="flex flex-col gap-1.5">
+              {config.yAxisColumns.map((col, index) => (
+                <div key={index} className="flex items-center gap-1">
+                  <Select
+                    value={col}
+                    setValue={(value) => {
+                      const newColumns = [...config.yAxisColumns];
+                      if (value) {
+                        newColumns[index] = value;
+                      } else {
+                        newColumns.splice(index, 1);
+                      }
+                      updateConfig({ yAxisColumns: newColumns });
+                    }}
+                    variant="tertiary/small"
+                    placeholder="Select column"
+                    items={yAxisOptions.filter(
+                      (opt) => opt.value === col || !config.yAxisColumns.includes(opt.value)
+                    )}
+                    dropdownIcon
+                    className="min-w-[140px] flex-1"
+                  >
+                    {(items) =>
+                      items.map((item) => (
+                        <SelectItem key={item.value} value={item.value}>
+                          <span className="flex items-center gap-2">
+                            <span>{item.label}</span>
+                            <TypeBadge type={item.type} />
+                          </span>
+                        </SelectItem>
+                      ))
+                    }
+                  </Select>
+                  {index > 0 && (
+                    <button
+                      type="button"
+                      onClick={() => {
+                        const newColumns = config.yAxisColumns.filter((_, i) => i !== index);
+                        updateConfig({ yAxisColumns: newColumns });
+                      }}
+                      className="rounded p-1 text-text-dimmed hover:bg-charcoal-700 hover:text-text-bright"
+                      title="Remove series"
+                    >
+                      <XIcon className="h-3.5 w-3.5" />
+                    </button>
+                  )}
+                </div>
+              ))}
+
+              {/* Add another series button - disabled when group by is set */}
+              {config.yAxisColumns.length < yAxisOptions.length && !config.groupByColumn && (
+                <button
+                  type="button"
+                  onClick={() => {
+                    const availableColumns = yAxisOptions.filter(
+                      (opt) => !config.yAxisColumns.includes(opt.value)
+                    );
+                    if (availableColumns.length > 0) {
+                      updateConfig({
+                        yAxisColumns: [...config.yAxisColumns, availableColumns[0].value],
+                      });
+                    }
+                  }}
+                  className="flex items-center gap-1 self-start rounded px-1 py-0.5 text-xs text-text-dimmed hover:bg-charcoal-700 hover:text-text-bright"
+                >
+                  <Plus className="h-3 w-3" />
+                  Add series
+                </button>
+              )}
+
+              {config.groupByColumn && config.yAxisColumns.length === 1 && (
+                <span className="text-xxs text-text-dimmed">
+                  Remove group by to add multiple series
+                </span>
+              )}
+            </div>
           )}
         </ConfigField>
 
@@ -370,36 +426,42 @@ export function ChartConfigPanel({ columns, config, onChange, className }: Chart
           </Select>
         </ConfigField>
 
-        {/* Group By */}
+        {/* Group By - disabled when multiple series are selected */}
         <ConfigField label="Group by">
-          <Select
-            value={config.groupByColumn ?? "__none__"}
-            setValue={(value) =>
-              updateConfig({ groupByColumn: value === "__none__" ? null : value })
-            }
-            variant="tertiary/small"
-            placeholder="None"
-            items={groupByOptions}
-            dropdownIcon
-            className="min-w-[140px]"
-            text={(t) => (t === "__none__" ? "None" : t)}
-          >
-            {(items) =>
-              items.map((item) => (
-                <SelectItem key={item.value} value={item.value}>
-                  <span className="flex items-center gap-2">
-                    <span>{item.label}</span>
-                    {item.type && <TypeBadge type={item.type} />}
-                  </span>
-                </SelectItem>
-              ))
-            }
-          </Select>
+          {config.yAxisColumns.length > 1 ? (
+            <span className="text-xs text-text-dimmed">
+              Not available with multiple series
+            </span>
+          ) : (
+            <Select
+              value={config.groupByColumn ?? "__none__"}
+              setValue={(value) =>
+                updateConfig({ groupByColumn: value === "__none__" ? null : value })
+              }
+              variant="tertiary/small"
+              placeholder="None"
+              items={groupByOptions}
+              dropdownIcon
+              className="min-w-[140px]"
+              text={(t) => (t === "__none__" ? "None" : t)}
+            >
+              {(items) =>
+                items.map((item) => (
+                  <SelectItem key={item.value} value={item.value}>
+                    <span className="flex items-center gap-2">
+                      <span>{item.label}</span>
+                      {item.type && <TypeBadge type={item.type} />}
+                    </span>
+                  </SelectItem>
+                ))
+              }
+            </Select>
+          )}
         </ConfigField>
 
-        {/* Stacked toggle (only when grouped) */}
-        {config.groupByColumn && (
-          <ConfigField label="Stack groups">
+        {/* Stacked toggle (when grouped or multiple series) */}
+        {(config.groupByColumn || config.yAxisColumns.length > 1) && (
+          <ConfigField label={config.groupByColumn ? "Stack groups" : "Stack series"}>
             <Switch
               variant="medium"
               checked={config.stacked}

From 1afa8012d7754b3bd9a35e8228fd98d556ce9a3e Mon Sep 17 00:00:00 2001
From: Matt Aitken <matt@mattaitken.com>
Date: Sat, 17 Jan 2026 21:09:11 +0000
Subject: [PATCH 122/137] Usage graph

---
 .../route.tsx                                 | 88 +++++++++----------
 1 file changed, 41 insertions(+), 47 deletions(-)

diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.settings.usage/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.settings.usage/route.tsx
index 21f9e95444..9a7bd5552a 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.settings.usage/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.settings.usage/route.tsx
@@ -7,8 +7,9 @@ import { redirect, typeddefer, useTypedLoaderData } from "remix-typedjson";
 import { URL } from "url";
 import { UsageBar } from "~/components/billing/UsageBar";
 import { PageBody, PageContainer } from "~/components/layout/AppLayout";
+import { Card } from "~/components/primitives/charts/Card";
 import type { ChartConfig } from "~/components/primitives/charts/Chart";
-import { ChartBar } from "~/components/primitives/charts/ChartBar";
+import { Chart } from "~/components/primitives/charts/ChartCompound";
 import { Header2 } from "~/components/primitives/Headers";
 import { InfoPanel } from "~/components/primitives/InfoPanel";
 import { NavBar, PageTitle } from "~/components/primitives/PageHeader";
@@ -166,30 +167,30 @@ export default function Page() {
               </Suspense>
             </div>
           </div>
-          <div>
-            <Header2 spacing className="pl-3">
-              Usage by day
-            </Header2>
-            <div className="p-3">
-              <Suspense
-                fallback={
-                  <div className="flex min-h-40 items-center justify-center">
-                    <Spinner />
-                  </div>
-                }
-              >
-                <Await
-                  resolve={usage}
-                  errorElement={
+          <div className="px-3">
+            <Card>
+              <Card.Header>Usage by day</Card.Header>
+              <Card.Content>
+                <Suspense
+                  fallback={
                     <div className="flex min-h-40 items-center justify-center">
-                      <Paragraph variant="small">Failed to load graph.</Paragraph>
+                      <Spinner />
                     </div>
                   }
                 >
-                  {(u) => <UsageChart data={u.timeSeries} />}
-                </Await>
-              </Suspense>
-            </div>
+                  <Await
+                    resolve={usage}
+                    errorElement={
+                      <div className="flex min-h-40 items-center justify-center">
+                        <Paragraph variant="small">Failed to load graph.</Paragraph>
+                      </div>
+                    }
+                  >
+                    {(u) => <UsageChart data={u.timeSeries} />}
+                  </Await>
+                </Suspense>
+              </Card.Content>
+            </Card>
           </div>
           <div>
             <Header2 spacing className="pl-3">
@@ -289,47 +290,40 @@ const tooltipDateFormatter = new Intl.DateTimeFormat("en-US", {
   day: "numeric",
 });
 
+const xAxisTickFormatter = (value: string) => {
+  if (!value) return "";
+  const date = new Date(value);
+  return `${date.getDate()}`;
+};
+
+const tooltipLabelFormatter = (label: string) => {
+  if (!label) return "";
+  return tooltipDateFormatter.format(new Date(label));
+};
+
 function UsageChart({ data }: { data: UsageSeriesData }) {
   const maxDollar = Math.max(...data.map((d) => d.dollars));
   const decimalPlaces = maxDollar < 1 ? 4 : 2;
 
-  const xAxisTickFormatter = useMemo(
-    () => (value: string) => {
-      if (!value) return "";
-      const date = new Date(value);
-      return `${date.getDate()}`;
-    },
-    []
-  );
-
   const yAxisTickFormatter = useMemo(
     () => (value: number) => `$${value.toFixed(decimalPlaces)}`,
     [decimalPlaces]
   );
 
-  const tooltipLabelFormatter = useMemo(
-    () => (_label: string, payload: Array<{ payload?: Record<string, unknown> }>) => {
-      const dateString = payload.at(0)?.payload?.date as string | undefined;
-      if (!dateString) {
-        return "";
-      }
-      return tooltipDateFormatter.format(new Date(dateString));
-    },
-    []
-  );
-
   return (
-    <ChartBar
+    <Chart.Root
       config={chartConfig}
       data={data}
       dataKey="date"
       showLegend={false}
       enableZoom={false}
-      xAxisProps={{ tickFormatter: xAxisTickFormatter }}
-      yAxisProps={{ tickFormatter: yAxisTickFormatter, allowDecimals: true }}
-      tooltipLabelFormatter={tooltipLabelFormatter}
       minHeight="160px"
-      className="max-h-96"
-    />
+    >
+      <Chart.Bar
+        xAxisProps={{ tickFormatter: xAxisTickFormatter }}
+        yAxisProps={{ tickFormatter: yAxisTickFormatter, allowDecimals: true }}
+        tooltipLabelFormatter={tooltipLabelFormatter}
+      />
+    </Chart.Root>
   );
 }

From ee9f1c8e469c944379d77f88c3dac7af75606e63 Mon Sep 17 00:00:00 2001
From: Matt Aitken <matt@mattaitken.com>
Date: Sat, 17 Jan 2026 21:18:11 +0000
Subject: [PATCH 123/137] No data check should only care about null/undefined

---
 apps/webapp/app/components/primitives/charts/ChartRoot.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/apps/webapp/app/components/primitives/charts/ChartRoot.tsx b/apps/webapp/app/components/primitives/charts/ChartRoot.tsx
index a9e5150ecd..1250f888f5 100644
--- a/apps/webapp/app/components/primitives/charts/ChartRoot.tsx
+++ b/apps/webapp/app/components/primitives/charts/ChartRoot.tsx
@@ -140,7 +140,8 @@ function ChartRootInner({
 }
 
 /**
- * Hook to check if all data in the visible range is empty (zero or null).
+ * Hook to check if all data in the visible range is empty (null or undefined).
+ * Zero values are considered valid data and will render.
  * Useful for rendering "no data" states.
  */
 export function useHasNoData(): boolean {
@@ -152,7 +153,7 @@ export function useHasNoData(): boolean {
     return data.every((item) => {
       return dataKeys.every((key) => {
         const value = item[key];
-        return value === 0 || value === null || value === undefined;
+        return value === null || value === undefined;
       });
     });
   }, [data, dataKeys]);

From e9d0b6e48b13c5afa86ee5aa00e595eadf9ddd58 Mon Sep 17 00:00:00 2001
From: Matt Aitken <matt@mattaitken.com>
Date: Sat, 17 Jan 2026 21:22:41 +0000
Subject: [PATCH 124/137] Multiple series

---
 .../app/components/code/ChartConfigPanel.tsx  | 138 ++++++++++--------
 1 file changed, 74 insertions(+), 64 deletions(-)

diff --git a/apps/webapp/app/components/code/ChartConfigPanel.tsx b/apps/webapp/app/components/code/ChartConfigPanel.tsx
index 24a44af47d..7d563e781d 100644
--- a/apps/webapp/app/components/code/ChartConfigPanel.tsx
+++ b/apps/webapp/app/components/code/ChartConfigPanel.tsx
@@ -328,75 +328,85 @@ export function ChartConfigPanel({ columns, config, onChange, className }: Chart
             <span className="text-xs text-text-dimmed">No numeric columns</span>
           ) : (
             <div className="flex flex-col gap-1.5">
-              {config.yAxisColumns.map((col, index) => (
-                <div key={index} className="flex items-center gap-1">
-                  <Select
-                    value={col}
-                    setValue={(value) => {
-                      const newColumns = [...config.yAxisColumns];
-                      if (value) {
-                        newColumns[index] = value;
-                      } else {
-                        newColumns.splice(index, 1);
-                      }
-                      updateConfig({ yAxisColumns: newColumns });
-                    }}
-                    variant="tertiary/small"
-                    placeholder="Select column"
-                    items={yAxisOptions.filter(
-                      (opt) => opt.value === col || !config.yAxisColumns.includes(opt.value)
-                    )}
-                    dropdownIcon
-                    className="min-w-[140px] flex-1"
-                  >
-                    {(items) =>
-                      items.map((item) => (
-                        <SelectItem key={item.value} value={item.value}>
-                          <span className="flex items-center gap-2">
-                            <span>{item.label}</span>
-                            <TypeBadge type={item.type} />
-                          </span>
-                        </SelectItem>
-                      ))
-                    }
-                  </Select>
-                  {index > 0 && (
-                    <button
-                      type="button"
-                      onClick={() => {
-                        const newColumns = config.yAxisColumns.filter((_, i) => i !== index);
+              {/* Always show at least one dropdown, even if yAxisColumns is empty */}
+              {(config.yAxisColumns.length === 0 ? [""] : config.yAxisColumns).map(
+                (col, index) => (
+                  <div key={index} className="flex items-center gap-1">
+                    <Select
+                      value={col}
+                      setValue={(value) => {
+                        const newColumns = [...config.yAxisColumns];
+                        if (value) {
+                          // If this is a new slot (empty string), add it
+                          if (index >= config.yAxisColumns.length) {
+                            newColumns.push(value);
+                          } else {
+                            newColumns[index] = value;
+                          }
+                        } else if (index < config.yAxisColumns.length) {
+                          newColumns.splice(index, 1);
+                        }
                         updateConfig({ yAxisColumns: newColumns });
                       }}
-                      className="rounded p-1 text-text-dimmed hover:bg-charcoal-700 hover:text-text-bright"
-                      title="Remove series"
+                      variant="tertiary/small"
+                      placeholder="Select column"
+                      items={yAxisOptions.filter(
+                        (opt) => opt.value === col || !config.yAxisColumns.includes(opt.value)
+                      )}
+                      dropdownIcon
+                      className="min-w-[140px] flex-1"
                     >
-                      <XIcon className="h-3.5 w-3.5" />
-                    </button>
-                  )}
-                </div>
-              ))}
-
-              {/* Add another series button - disabled when group by is set */}
-              {config.yAxisColumns.length < yAxisOptions.length && !config.groupByColumn && (
-                <button
-                  type="button"
-                  onClick={() => {
-                    const availableColumns = yAxisOptions.filter(
-                      (opt) => !config.yAxisColumns.includes(opt.value)
-                    );
-                    if (availableColumns.length > 0) {
-                      updateConfig({
-                        yAxisColumns: [...config.yAxisColumns, availableColumns[0].value],
-                      });
-                    }
-                  }}
-                  className="flex items-center gap-1 self-start rounded px-1 py-0.5 text-xs text-text-dimmed hover:bg-charcoal-700 hover:text-text-bright"
-                >
-                  <Plus className="h-3 w-3" />
-                  Add series
-                </button>
+                      {(items) =>
+                        items.map((item) => (
+                          <SelectItem key={item.value} value={item.value}>
+                            <span className="flex items-center gap-2">
+                              <span>{item.label}</span>
+                              <TypeBadge type={item.type} />
+                            </span>
+                          </SelectItem>
+                        ))
+                      }
+                    </Select>
+                    {index > 0 && (
+                      <button
+                        type="button"
+                        onClick={() => {
+                          const newColumns = config.yAxisColumns.filter((_, i) => i !== index);
+                          updateConfig({ yAxisColumns: newColumns });
+                        }}
+                        className="rounded p-1 text-text-dimmed hover:bg-charcoal-700 hover:text-text-bright"
+                        title="Remove series"
+                      >
+                        <XIcon className="h-3.5 w-3.5" />
+                      </button>
+                    )}
+                  </div>
+                )
               )}
 
+              {/* Add another series button - only show when we have at least one series and not grouped */}
+              {config.yAxisColumns.length > 0 &&
+                config.yAxisColumns.length < yAxisOptions.length &&
+                !config.groupByColumn && (
+                  <button
+                    type="button"
+                    onClick={() => {
+                      const availableColumns = yAxisOptions.filter(
+                        (opt) => !config.yAxisColumns.includes(opt.value)
+                      );
+                      if (availableColumns.length > 0) {
+                        updateConfig({
+                          yAxisColumns: [...config.yAxisColumns, availableColumns[0].value],
+                        });
+                      }
+                    }}
+                    className="flex items-center gap-1 self-start rounded px-1 py-0.5 text-xs text-text-dimmed hover:bg-charcoal-700 hover:text-text-bright"
+                  >
+                    <Plus className="h-3 w-3" />
+                    Add series
+                  </button>
+                )}
+
               {config.groupByColumn && config.yAxisColumns.length === 1 && (
                 <span className="text-xxs text-text-dimmed">
                   Remove group by to add multiple series

From c7d2b4a3188b0a9dac860387feee9661270480e5 Mon Sep 17 00:00:00 2001
From: Matt Aitken <matt@mattaitken.com>
Date: Sat, 17 Jan 2026 21:23:01 +0000
Subject: [PATCH 125/137] Only hide bar labels when zoom is enabled

---
 apps/webapp/app/components/primitives/charts/ChartBar.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/apps/webapp/app/components/primitives/charts/ChartBar.tsx b/apps/webapp/app/components/primitives/charts/ChartBar.tsx
index 0bf6aa46a5..ae565cb5e6 100644
--- a/apps/webapp/app/components/primitives/charts/ChartBar.tsx
+++ b/apps/webapp/app/components/primitives/charts/ChartBar.tsx
@@ -118,8 +118,9 @@ export function ChartBarRenderer({
   }
 
   // Get the x-axis ticks based on tooltip state
+  // Only hide middle ticks when zoom is enabled (to make room for zoom instructions)
   const xAxisTicks =
-    highlight.tooltipActive && data.length > 2
+    enableZoom && highlight.tooltipActive && data.length > 2
       ? [data[0]?.[dataKey], data[data.length - 1]?.[dataKey]]
       : undefined;
 

From 528905baa91521d87fdd529bc418e1944d2470d2 Mon Sep 17 00:00:00 2001
From: Matt Aitken <matt@mattaitken.com>
Date: Sat, 17 Jan 2026 21:23:27 +0000
Subject: [PATCH 126/137] Usage label $ not ($)

---
 .../routes/_app.orgs.$organizationSlug.settings.usage/route.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.settings.usage/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.settings.usage/route.tsx
index 9a7bd5552a..0957c06d04 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.settings.usage/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.settings.usage/route.tsx
@@ -280,7 +280,7 @@ export default function Page() {
 
 const chartConfig = {
   dollars: {
-    label: "Usage ($)",
+    label: "Usage $",
     color: "#7655fd",
   },
 } satisfies ChartConfig;

From b79a23cfc50c852215e39bf025af2ccb7f96247e Mon Sep 17 00:00:00 2001
From: Matt Aitken <matt@mattaitken.com>
Date: Sat, 17 Jan 2026 21:44:54 +0000
Subject: [PATCH 127/137] Don't save repeated queries to the history

---
 .../app/services/queryService.server.ts       | 42 +++++++++++++------
 1 file changed, 29 insertions(+), 13 deletions(-)

diff --git a/apps/webapp/app/services/queryService.server.ts b/apps/webapp/app/services/queryService.server.ts
index 29e349ee81..ef1f3a7b3f 100644
--- a/apps/webapp/app/services/queryService.server.ts
+++ b/apps/webapp/app/services/queryService.server.ts
@@ -166,23 +166,39 @@ export async function executeQuery<TOut extends z.ZodSchema>(
     // If query succeeded and history options provided, save to history
     // Skip history for EXPLAIN queries (admin debugging) and when explicitly skipped (e.g., impersonating)
     if (result[0] === null && history && !history.skip && !baseOptions.explain) {
-      const stats = result[1].stats;
-      const byteSeconds = parseFloat(stats.byte_seconds) || 0;
-      const costInCents = byteSeconds * env.CENTS_PER_QUERY_BYTE_SECOND;
-
-      await prisma.customerQuery.create({
-        data: {
-          query: options.query,
-          scope: scopeToEnum[scope],
-          stats: { ...stats },
-          costInCents,
-          source: history.source,
+      // Check if this query is the same as the last one saved (avoid duplicate history entries)
+      const lastQuery = await prisma.customerQuery.findFirst({
+        where: {
           organizationId,
-          projectId: scope === "project" || scope === "environment" ? projectId : null,
-          environmentId: scope === "environment" ? environmentId : null,
+          source: history.source,
           userId: history.userId ?? null,
         },
+        orderBy: { createdAt: "desc" },
+        select: { query: true, scope: true },
       });
+
+      const isDuplicate =
+        lastQuery && lastQuery.query === options.query && lastQuery.scope === scopeToEnum[scope];
+
+      if (!isDuplicate) {
+        const stats = result[1].stats;
+        const byteSeconds = parseFloat(stats.byte_seconds) || 0;
+        const costInCents = byteSeconds * env.CENTS_PER_QUERY_BYTE_SECOND;
+
+        await prisma.customerQuery.create({
+          data: {
+            query: options.query,
+            scope: scopeToEnum[scope],
+            stats: { ...stats },
+            costInCents,
+            source: history.source,
+            organizationId,
+            projectId: scope === "project" || scope === "environment" ? projectId : null,
+            environmentId: scope === "environment" ? environmentId : null,
+            userId: history.userId ?? null,
+          },
+        });
+      }
     }
 
     return result;

From 140a0aae43eb06ab3b6049bc6c9368c137e3c58c Mon Sep 17 00:00:00 2001
From: Matt Aitken <matt@mattaitken.com>
Date: Sat, 17 Jan 2026 21:45:16 +0000
Subject: [PATCH 128/137] Always start the y-axis at 0

---
 apps/webapp/app/components/code/QueryResultsChart.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/apps/webapp/app/components/code/QueryResultsChart.tsx b/apps/webapp/app/components/code/QueryResultsChart.tsx
index 7c53b032be..650dc954fa 100644
--- a/apps/webapp/app/components/code/QueryResultsChart.tsx
+++ b/apps/webapp/app/components/code/QueryResultsChart.tsx
@@ -828,6 +828,7 @@ export const QueryResultsChart = memo(function QueryResultsChart({
 
   const yAxisProps = {
     tickFormatter: yAxisFormatter,
+    domain: [0, "auto"] as [number, string],
   };
 
   const showLegend = series.length > 0;

From 077b461b4f2a5ae719ac80ec2218df3e6af1e794 Mon Sep 17 00:00:00 2001
From: Matt Aitken <matt@mattaitken.com>
Date: Sat, 17 Jan 2026 22:13:29 +0000
Subject: [PATCH 129/137] Indigo resize handles

---
 apps/webapp/app/components/code/TSQLResultsTable.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/apps/webapp/app/components/code/TSQLResultsTable.tsx b/apps/webapp/app/components/code/TSQLResultsTable.tsx
index 5789b2dd46..782e20a831 100644
--- a/apps/webapp/app/components/code/TSQLResultsTable.tsx
+++ b/apps/webapp/app/components/code/TSQLResultsTable.tsx
@@ -1008,10 +1008,10 @@ export const TSQLResultsTable = memo(function TSQLResultsTable({
                         onMouseDown={header.getResizeHandler()}
                         onTouchStart={header.getResizeHandler()}
                         className={cn(
-                          "absolute right-0 top-0 h-full w-1 cursor-col-resize touch-none select-none",
+                          "absolute right-0 top-0 h-full w-0.5 cursor-col-resize touch-none select-none",
                           "opacity-0 group-hover/header:opacity-100",
-                          "bg-charcoal-600 hover:bg-primary",
-                          header.column.getIsResizing() && "bg-primary opacity-100"
+                          "bg-charcoal-600 hover:bg-indigo-500",
+                          header.column.getIsResizing() && "bg-indigo-500 opacity-100"
                         )}
                       />
                     </th>
@@ -1105,8 +1105,8 @@ export const TSQLResultsTable = memo(function TSQLResultsTable({
                       className={cn(
                         "absolute right-0 top-0 h-full w-1 cursor-col-resize touch-none select-none",
                         "opacity-0 group-hover/header:opacity-100",
-                        "bg-charcoal-600 hover:bg-primary",
-                        header.column.getIsResizing() && "bg-primary opacity-100"
+                        "bg-charcoal-600 hover:bg-indigo-500",
+                        header.column.getIsResizing() && "bg-indigo-500 opacity-100"
                       )}
                     />
                   </th>

From c64d32d1bf9aa1f0d87edd5efd762394587af613 Mon Sep 17 00:00:00 2001
From: Matt Aitken <matt@mattaitken.com>
Date: Sat, 17 Jan 2026 22:13:46 +0000
Subject: [PATCH 130/137] Fix for bar widths being wrong in small datasets

---
 .../app/components/code/QueryResultsChart.tsx | 33 +++++++++++--------
 1 file changed, 20 insertions(+), 13 deletions(-)

diff --git a/apps/webapp/app/components/code/QueryResultsChart.tsx b/apps/webapp/app/components/code/QueryResultsChart.tsx
index 650dc954fa..106ede3a2a 100644
--- a/apps/webapp/app/components/code/QueryResultsChart.tsx
+++ b/apps/webapp/app/components/code/QueryResultsChart.tsx
@@ -807,24 +807,31 @@ export const QueryResultsChart = memo(function QueryResultsChart({
   const xAxisAngle = timeGranularity === "hours" || timeGranularity === "seconds" ? -45 : 0;
   const xAxisHeight = xAxisAngle !== 0 ? 60 : undefined;
 
-  // Build xAxisProps - different config for date-based (continuous) vs categorical axes
-  const xAxisProps = isDateBased
+  // Base x-axis props shared by all chart types
+  const baseXAxisProps = {
+    tickFormatter: xAxisTickFormatter,
+    angle: xAxisAngle,
+    textAnchor: xAxisAngle !== 0 ? ("end" as const) : ("middle" as const),
+    height: xAxisHeight,
+  };
+
+  // Line charts use continuous time scale for date-based data
+  // This properly represents time gaps between data points
+  const xAxisPropsForLine = isDateBased
     ? {
         type: "number" as const,
         domain: timeDomain ?? (["auto", "auto"] as [string, string]),
         scale: "time" as const,
         // Explicitly specify tick positions so labels appear across the entire range
         ticks: timeTicks ?? undefined,
-        tickFormatter: xAxisTickFormatter,
-        angle: xAxisAngle,
-        textAnchor: xAxisAngle !== 0 ? ("end" as const) : ("middle" as const),
-        height: xAxisHeight,
+        ...baseXAxisProps,
       }
-    : {
-        angle: xAxisAngle,
-        textAnchor: xAxisAngle !== 0 ? ("end" as const) : ("middle" as const),
-        height: xAxisHeight,
-      };
+    : baseXAxisProps;
+
+  // Bar charts always use categorical axis positioning
+  // This ensures bars are evenly distributed regardless of data point count
+  // (prevents massive bars when there are only a few data points)
+  const xAxisPropsForBar = baseXAxisProps;
 
   const yAxisProps = {
     tickFormatter: yAxisFormatter,
@@ -846,7 +853,7 @@ export const QueryResultsChart = memo(function QueryResultsChart({
         minHeight="300px"
       >
         <Chart.Bar
-          xAxisProps={xAxisProps}
+          xAxisProps={xAxisPropsForBar}
           yAxisProps={yAxisProps}
           stackId={stacked ? "stack" : undefined}
           tooltipLabelFormatter={tooltipLabelFormatter}
@@ -868,7 +875,7 @@ export const QueryResultsChart = memo(function QueryResultsChart({
       minHeight="300px"
     >
       <Chart.Line
-        xAxisProps={xAxisProps}
+        xAxisProps={xAxisPropsForLine}
         yAxisProps={yAxisProps}
         stacked={stacked && series.length > 1}
         tooltipLabelFormatter={tooltipLabelFormatter}

From 0ea3c5cba296b1e4c1232cd6f10f329b4786596e Mon Sep 17 00:00:00 2001
From: Matt Aitken <matt@mattaitken.com>
Date: Sat, 17 Jan 2026 22:45:11 +0000
Subject: [PATCH 131/137] When editing the time period it does the query again

---
 .../app/components/runs/v3/SharedFilters.tsx  | 70 ++++++++++++++++---
 .../route.tsx                                 | 24 +++++--
 2 files changed, 78 insertions(+), 16 deletions(-)

diff --git a/apps/webapp/app/components/runs/v3/SharedFilters.tsx b/apps/webapp/app/components/runs/v3/SharedFilters.tsx
index 2c35253d3f..d1285fe6f7 100644
--- a/apps/webapp/app/components/runs/v3/SharedFilters.tsx
+++ b/apps/webapp/app/components/runs/v3/SharedFilters.tsx
@@ -16,7 +16,7 @@ import {
   isSunday,
 } from "date-fns";
 import parse from "parse-duration";
-import { startTransition, useCallback, useEffect, useState, type ReactNode } from "react";
+import { startTransition, useCallback, useEffect, useRef, useState, type ReactNode } from "react";
 import { AppliedFilter } from "~/components/primitives/AppliedFilter";
 import { DateTimePicker } from "~/components/primitives/DateTimePicker";
 import { DateTime } from "~/components/primitives/DateTime";
@@ -30,6 +30,7 @@ import { filterIcon } from "./RunFilters";
 import { Paragraph } from "~/components/primitives/Paragraph";
 import { ShortcutDefinition } from "~/hooks/useShortcutKeys";
 import { SpanPresenter } from "~/presenters/v3/SpanPresenter.server";
+import { useLocation } from "@remix-run/react";
 
 export type DisplayableEnvironment = Pick<RuntimeEnvironment, "type" | "id"> & {
   userName?: string;
@@ -270,23 +271,65 @@ export function timeFilterRenderValues({
   return { label, valueLabel, rangeType };
 }
 
+/** Values passed to onApply callback when a time filter is applied */
+export interface TimeFilterApplyValues {
+  period?: string;
+  from?: string;
+  to?: string;
+}
+
 export interface TimeFilterProps {
   defaultPeriod?: string;
   /** Label name used in the filter display, defaults to "Created" */
   labelName?: string;
   applyShortcut?: ShortcutDefinition | undefined;
+  /** Callback when the user applies a time filter selection, receives the applied values */
+  onApply?: (values: TimeFilterApplyValues) => void;
 }
 
-export function TimeFilter({ defaultPeriod, labelName = "Created", applyShortcut }: TimeFilterProps = {}) {
-  const { value, del } = useSearchParams();
-
+export function TimeFilter({
+  defaultPeriod,
+  labelName = "Created",
+  applyShortcut,
+  onApply,
+}: TimeFilterProps = {}) {
+  const { value } = useSearchParams();
+  const periodValue = value("period");
+  const fromValue = value("from");
+  const toValue = value("to");
+
+  //non-optimistic location
+  const location = useLocation();
+  
   const { period, from, to, label, valueLabel } = timeFilters({
-    period: value("period"),
-    from: value("from"),
-    to: value("to"),
+    period: periodValue,
+    from: fromValue,
+    to: toValue,
     defaultPeriod,
     labelName,
   });
+  
+  // Track the search string, not individual values
+  const previousSearch = useRef<string | null>(null);
+
+  useEffect(() => {
+    // Skip first render - set initial value and return
+    if (previousSearch.current === null) {
+      previousSearch.current = location.search;
+      return;
+    }
+    
+    // Only call onApply if the URL actually changed
+    if (previousSearch.current !== location.search) {
+      const currentSearch = new URLSearchParams(location.search);
+      onApply?.({ 
+        period: currentSearch.get("period") ?? undefined, 
+        from: currentSearch.get("from") ?? undefined, 
+        to: currentSearch.get("to") ?? undefined 
+      });
+      previousSearch.current = location.search;
+    }
+  }, [location.search, onApply]);
 
   return (
     <FilterMenuProvider>
@@ -309,6 +352,7 @@ export function TimeFilter({ defaultPeriod, labelName = "Created", applyShortcut
           defaultPeriod={defaultPeriod}
           labelName={labelName}
           applyShortcut={applyShortcut}
+          onApply={onApply}
         />
       )}
     </FilterMenuProvider>
@@ -334,6 +378,7 @@ export function TimeDropdown({
   defaultPeriod = DEFAULT_PERIOD,
   labelName = "Created",
   applyShortcut,
+  onApply,
 }: {
   trigger: ReactNode;
   period?: string;
@@ -342,6 +387,7 @@ export function TimeDropdown({
   defaultPeriod?: string;
   labelName?: string;
   applyShortcut?: ShortcutDefinition | undefined;
+  onApply?: (values: TimeFilterApplyValues) => void;
 }) {
   const [open, setOpen] = useState<boolean | undefined>();
   const { replace } = useSearchParams();
@@ -409,6 +455,7 @@ export function TimeDropdown({
       setFromValue(undefined);
       setToValue(undefined);
       setOpen(false);
+      onApply?.({ period: periodToApply, from: undefined, to: undefined });
     } else {
       // Validate date range
       if (!fromValue && !toValue) {
@@ -421,15 +468,19 @@ export function TimeDropdown({
         return;
       }
 
+      const fromStr = fromValue?.getTime().toString();
+      const toStr = toValue?.getTime().toString();
+
       replace({
         period: undefined,
         cursor: undefined,
         direction: undefined,
-        from: fromValue?.getTime().toString(),
-        to: toValue?.getTime().toString(),
+        from: fromStr,
+        to: toStr,
       });
 
       setOpen(false);
+      onApply?.({ period: undefined, from: fromStr, to: toStr });
     }
   }, [
     activeSection,
@@ -440,6 +491,7 @@ export function TimeDropdown({
     fromValue,
     toValue,
     replace,
+    onApply,
   ]);
 
   return (
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/route.tsx
index 1286bafc5e..c2c57afb7a 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/route.tsx
@@ -1,6 +1,6 @@
 import { ArrowDownTrayIcon, ClipboardIcon } from "@heroicons/react/20/solid";
 import type { OutputColumnMetadata, WhereClauseFallback } from "@internal/clickhouse";
-import { Form, useNavigation } from "@remix-run/react";
+import { Form, useNavigation, useSubmit } from "@remix-run/react";
 import {
   redirect,
   type ActionFunctionArgs,
@@ -358,6 +358,7 @@ const QueryEditorForm = forwardRef<
   const [query, setQuery] = useState(defaultQuery);
   const [scope, setScope] = useState<QueryScope>(defaultScope);
   const { value: searchParamValue } = useSearchParams();
+  const formRef = useRef<HTMLFormElement>(null);
 
   // Get time filter values from URL search params
   const period = searchParamValue("period");
@@ -368,6 +369,8 @@ const QueryEditorForm = forwardRef<
   // This disables the time filter UI since the user is filtering in their query
   const queryHasTriggeredAt = /\bWHERE\b[\s\S]*\btriggered_at\b/i.test(query);
 
+  
+
   // Expose methods to parent for external query setting (history, AI, examples)
   useImperativeHandle(
     ref,
@@ -396,7 +399,7 @@ const QueryEditorForm = forwardRef<
         minHeight="200px"
         className="min-h-[200px]"
       />
-      <Form method="post" className="flex items-center justify-between gap-2 px-2">
+      <Form ref={formRef} method="post" className="flex items-center justify-between gap-2 px-2">
         <input type="hidden" name="query" value={query} />
         <input type="hidden" name="scope" value={scope} />
         {/* Pass time filter values to action */}
@@ -434,11 +437,18 @@ const QueryEditorForm = forwardRef<
               ))
             }
           </Select>
-          {queryHasTriggeredAt ? <Button variant="tertiary/small" disabled={true} type="button">Set in query</Button> : <TimeFilter
-            defaultPeriod={DEFAULT_PERIOD}
-            labelName="Triggered"
-            applyShortcut={{ key: "enter", enabledOnInputElements: true }}
-          />}
+          {queryHasTriggeredAt ? (
+            <Button variant="tertiary/small" disabled={true} type="button">
+              Set in query
+            </Button>
+          ) : (
+            <TimeFilter
+              defaultPeriod={DEFAULT_PERIOD}
+              labelName="Triggered"
+              applyShortcut={{ key: "enter", enabledOnInputElements: true }}
+              onApply={() => formRef.current?.submit()}
+            />
+          )}
           <Button
             type="submit"
             variant="primary/small"

From 748bc6af953c3581783917553e2d22348b1c2ffe Mon Sep 17 00:00:00 2001
From: Matt Aitken <matt@mattaitken.com>
Date: Sat, 17 Jan 2026 23:15:35 +0000
Subject: [PATCH 132/137] Fix for line/area chart hovering

---
 .../primitives/charts/ChartLine.tsx           | 30 ++++++++++++++++---
 1 file changed, 26 insertions(+), 4 deletions(-)

diff --git a/apps/webapp/app/components/primitives/charts/ChartLine.tsx b/apps/webapp/app/components/primitives/charts/ChartLine.tsx
index befb38513e..4eb29cd4d7 100644
--- a/apps/webapp/app/components/primitives/charts/ChartLine.tsx
+++ b/apps/webapp/app/components/primitives/charts/ChartLine.tsx
@@ -127,6 +127,12 @@ export function ChartLineRenderer({
     ...yAxisPropsProp,
   };
 
+  // Handle mouse leave to also reset highlight
+  const handleMouseLeave = () => {
+    highlight.setTooltipActive(false);
+    highlight.reset();
+  };
+
   // Render stacked area chart if stacked prop is true
   if (stacked && dataKeys.length > 1) {
     return (
@@ -139,8 +145,16 @@ export function ChartLineRenderer({
           left: 12,
           right: 12,
         }}
-        onMouseEnter={() => highlight.setTooltipActive(true)}
-        onMouseLeave={() => highlight.setTooltipActive(false)}
+        onMouseMove={(e: any) => {
+          // Update active payload for legend
+          if (e?.activePayload?.length) {
+            highlight.setActivePayload(e.activePayload);
+            highlight.setTooltipActive(true);
+          } else {
+            highlight.setTooltipActive(false);
+          }
+        }}
+        onMouseLeave={handleMouseLeave}
       >
         <CartesianGrid vertical={false} stroke="#272A2E" strokeDasharray="3 3" />
         <XAxis {...xAxisConfig} />
@@ -178,8 +192,16 @@ export function ChartLineRenderer({
         left: 12,
         right: 12,
       }}
-      onMouseEnter={() => highlight.setTooltipActive(true)}
-      onMouseLeave={() => highlight.setTooltipActive(false)}
+      onMouseMove={(e: any) => {
+        // Update active payload for legend
+        if (e?.activePayload?.length) {
+          highlight.setActivePayload(e.activePayload);
+          highlight.setTooltipActive(true);
+        } else {
+          highlight.setTooltipActive(false);
+        }
+      }}
+      onMouseLeave={handleMouseLeave}
     >
       <CartesianGrid vertical={false} stroke="#272A2E" strokeDasharray="3 3" />
       <XAxis {...xAxisConfig} />

From 07988a0d76fd76be837880a9d3546ac0f61a249a Mon Sep 17 00:00:00 2001
From: Matt Aitken <matt@mattaitken.com>
Date: Sun, 18 Jan 2026 00:53:41 +0000
Subject: [PATCH 133/137] The AI updates the time filter

---
 .../app/components/code/AIQueryInput.tsx      |  28 +++-
 .../AITabContent.tsx                          |   9 ++
 .../QueryHelpSidebar.tsx                      |   9 ++
 .../route.tsx                                 |  23 +++
 ...tParam.env.$envParam.query.ai-generate.tsx |  19 ++-
 .../app/v3/services/aiQueryService.server.ts  | 136 +++++++++++++++---
 6 files changed, 200 insertions(+), 24 deletions(-)

diff --git a/apps/webapp/app/components/code/AIQueryInput.tsx b/apps/webapp/app/components/code/AIQueryInput.tsx
index e7624ba5b1..0bb4d0ab27 100644
--- a/apps/webapp/app/components/code/AIQueryInput.tsx
+++ b/apps/webapp/app/components/code/AIQueryInput.tsx
@@ -20,16 +20,25 @@ import { useOrganization } from "~/hooks/useOrganizations";
 import { useProject } from "~/hooks/useProject";
 import { cn } from "~/utils/cn";
 
+interface AITimeFilter {
+  period?: string;
+  from?: string;
+  to?: string;
+}
+
 type StreamEventType =
   | { type: "thinking"; content: string }
   | { type: "tool_call"; tool: string; args: unknown }
-  | { type: "result"; success: true; query: string }
+  | { type: "time_filter"; filter: AITimeFilter }
+  | { type: "result"; success: true; query: string; timeFilter?: AITimeFilter }
   | { type: "result"; success: false; error: string };
 
 export type AIQueryMode = "new" | "edit";
 
 interface AIQueryInputProps {
   onQueryGenerated: (query: string) => void;
+  /** Called when the AI sets a time filter - updates URL search params */
+  onTimeFilterChange?: (filter: AITimeFilter) => void;
   /** Set this to a prompt to auto-populate and immediately submit */
   autoSubmitPrompt?: string;
   /** Change this to force re-submission even if prompt is the same */
@@ -40,6 +49,7 @@ interface AIQueryInputProps {
 
 export function AIQueryInput({
   onQueryGenerated,
+  onTimeFilterChange,
   autoSubmitPrompt,
   autoSubmitKey,
   getCurrentQuery,
@@ -174,10 +184,22 @@ export function AIQueryInput({
           setThinking((prev) => prev + event.content);
           break;
         case "tool_call":
-          setThinking((prev) => prev + `\nValidating query...\n`);
+          if (event.tool === "setTimeFilter") {
+            setThinking((prev) => prev + `\nSetting time filter...\n`);
+          } else {
+            setThinking((prev) => prev + `\nValidating query...\n`);
+          }
+          break;
+        case "time_filter":
+          // Apply time filter immediately when the AI sets it
+          onTimeFilterChange?.(event.filter);
           break;
         case "result":
           if (event.success) {
+            // Apply time filter if included in result (backup in case time_filter event was missed)
+            if (event.timeFilter) {
+              onTimeFilterChange?.(event.timeFilter);
+            }
             onQueryGenerated(event.query);
             setPrompt("");
             setLastResult("success");
@@ -189,7 +211,7 @@ export function AIQueryInput({
           break;
       }
     },
-    [onQueryGenerated]
+    [onQueryGenerated, onTimeFilterChange]
   );
 
   const handleSubmit = useCallback(
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/AITabContent.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/AITabContent.tsx
index bc0d12fbc3..879ecee1e2 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/AITabContent.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/AITabContent.tsx
@@ -2,12 +2,20 @@ import { useState } from "react";
 import { AIQueryInput } from "~/components/code/AIQueryInput";
 import { Header3 } from "~/components/primitives/Headers";
 
+interface AITimeFilter {
+  period?: string;
+  from?: string;
+  to?: string;
+}
+
 export function AITabContent({
   onQueryGenerated,
+  onTimeFilterChange,
   getCurrentQuery,
   aiFixRequest,
 }: {
   onQueryGenerated: (query: string) => void;
+  onTimeFilterChange?: (filter: AITimeFilter) => void;
   getCurrentQuery: () => string;
   aiFixRequest: { prompt: string; key: number } | null;
 }) {
@@ -31,6 +39,7 @@ export function AITabContent({
     <div className="space-y-2">
       <AIQueryInput
         onQueryGenerated={onQueryGenerated}
+        onTimeFilterChange={onTimeFilterChange}
         autoSubmitPrompt={activeRequest?.prompt}
         autoSubmitKey={activeRequest?.key}
         getCurrentQuery={getCurrentQuery}
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/QueryHelpSidebar.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/QueryHelpSidebar.tsx
index d9c05eae58..44b57e4e6d 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/QueryHelpSidebar.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/QueryHelpSidebar.tsx
@@ -11,9 +11,16 @@ import { ExamplesContent } from "./ExamplesContent";
 import { TableSchemaContent } from "./TableSchemaContent";
 import { TRQLGuideContent } from "./TRQLGuideContent";
 
+interface AITimeFilter {
+  period?: string;
+  from?: string;
+  to?: string;
+}
+
 export function QueryHelpSidebar({
   onTryExample,
   onQueryGenerated,
+  onTimeFilterChange,
   getCurrentQuery,
   activeTab,
   onTabChange,
@@ -21,6 +28,7 @@ export function QueryHelpSidebar({
 }: {
   onTryExample: (query: string, scope: QueryScope) => void;
   onQueryGenerated: (query: string) => void;
+  onTimeFilterChange?: (filter: AITimeFilter) => void;
   getCurrentQuery: () => string;
   activeTab: string;
   onTabChange: (tab: string) => void;
@@ -55,6 +63,7 @@ export function QueryHelpSidebar({
         >
           <AITabContent
             onQueryGenerated={onQueryGenerated}
+            onTimeFilterChange={onTimeFilterChange}
             getCurrentQuery={getCurrentQuery}
             aiFixRequest={aiFixRequest}
           />
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/route.tsx
index c2c57afb7a..ae49b93326 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/route.tsx
@@ -464,10 +464,17 @@ const QueryEditorForm = forwardRef<
   );
 });
 
+interface AITimeFilter {
+  period?: string;
+  from?: string;
+  to?: string;
+}
+
 export default function Page() {
   const { defaultQuery, history, isAdmin } = useTypedLoaderData<typeof loader>();
   const results = useTypedActionData<typeof action>();
   const navigation = useNavigation();
+  const { replace: replaceSearchParams } = useSearchParams();
 
   // Use most recent history item if available, otherwise fall back to defaults
   const initialQuery = history.length > 0 ? history[0].query : defaultQuery;
@@ -488,6 +495,21 @@ export default function Page() {
     }));
   }, []);
 
+  // Handle time filter changes from AI
+  const handleTimeFilterChange = useCallback(
+    (filter: AITimeFilter) => {
+      replaceSearchParams({
+        period: filter.period,
+        from: filter.from,
+        to: filter.to,
+        // Clear cursor/direction when time filter changes
+        cursor: undefined,
+        direction: undefined,
+      });
+    },
+    [replaceSearchParams]
+  );
+
   const isLoading = (navigation.state === "submitting" || navigation.state === "loading") && navigation.formMethod === "POST";
 
 
@@ -702,6 +724,7 @@ export default function Page() {
                 const formatted = autoFormatSQL(query);
                 editorRef.current?.setQuery(formatted);
               }}
+              onTimeFilterChange={handleTimeFilterChange}
               getCurrentQuery={() => editorRef.current?.getQuery() ?? ""}
               activeTab={sidebarTab}
               onTabChange={setSidebarTab}
diff --git a/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query.ai-generate.tsx b/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query.ai-generate.tsx
index e08a396759..6b1702d7e9 100644
--- a/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query.ai-generate.tsx
+++ b/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query.ai-generate.tsx
@@ -6,7 +6,7 @@ import { findProjectBySlug } from "~/models/project.server";
 import { findEnvironmentBySlug } from "~/models/runtimeEnvironment.server";
 import { requireUserId } from "~/services/session.server";
 import { EnvironmentParamSchema } from "~/utils/pathBuilder";
-import { AIQueryService } from "~/v3/services/aiQueryService.server";
+import { AIQueryService, type AITimeFilter } from "~/v3/services/aiQueryService.server";
 import { querySchemas } from "~/v3/querySchemas";
 
 const RequestSchema = z.object({
@@ -102,6 +102,8 @@ export async function action({ request, params }: ActionFunctionArgs) {
         success?: boolean;
         query?: string;
         error?: string;
+        filter?: AITimeFilter;
+        timeFilter?: AITimeFilter;
       }) => {
         controller.enqueue(encoder.encode(`data: ${JSON.stringify(event)}\n\n`));
       };
@@ -122,6 +124,19 @@ export async function action({ request, params }: ActionFunctionArgs) {
                 tool: part.toolName,
                 args: part.args,
               });
+
+              // If it's a setTimeFilter call, emit the time_filter event immediately
+              if (part.toolName === "setTimeFilter") {
+                const args = part.args as { period?: string; from?: string; to?: string };
+                sendEvent({
+                  type: "time_filter",
+                  filter: {
+                    period: args.period,
+                    from: args.from,
+                    to: args.to,
+                  },
+                });
+              }
               break;
             }
             case "error": {
@@ -136,12 +151,14 @@ export async function action({ request, params }: ActionFunctionArgs) {
               // Extract query from the final text
               const finalText = await result.text;
               const query = extractQueryFromText(finalText);
+              const timeFilter = service.getPendingTimeFilter();
 
               if (query) {
                 sendEvent({
                   type: "result",
                   success: true,
                   query,
+                  timeFilter,
                 });
               } else if (
                 finalText.toLowerCase().includes("cannot") ||
diff --git a/apps/webapp/app/v3/services/aiQueryService.server.ts b/apps/webapp/app/v3/services/aiQueryService.server.ts
index 040e79f98c..01eadf02ca 100644
--- a/apps/webapp/app/v3/services/aiQueryService.server.ts
+++ b/apps/webapp/app/v3/services/aiQueryService.server.ts
@@ -8,6 +8,15 @@ import {
 import { streamText, type LanguageModelV1, tool } from "ai";
 import { z } from "zod";
 
+/**
+ * Time filter configuration that can be set by the AI
+ */
+export interface AITimeFilter {
+  period?: string;
+  from?: string;
+  to?: string;
+}
+
 /**
  * Stream event types for AI query generation
  */
@@ -15,13 +24,16 @@ export type AIQueryStreamEvent =
   | { type: "thinking"; content: string }
   | { type: "tool_call"; tool: string; args: unknown }
   | { type: "tool_result"; tool: string; result: unknown }
-  | { type: "result"; success: true; query: string }
+  | { type: "time_filter"; filter: AITimeFilter }
+  | { type: "result"; success: true; query: string; timeFilter?: AITimeFilter }
   | { type: "result"; success: false; error: string };
 
 /**
  * Result type for non-streaming call
  */
-export type AIQueryResult = { success: true; query: string } | { success: false; error: string };
+export type AIQueryResult =
+  | { success: true; query: string; timeFilter?: AITimeFilter }
+  | { success: false; error: string };
 
 /**
  * Options for query generation
@@ -44,6 +56,8 @@ interface QueryValidationResult {
  * Service for generating TSQL queries from natural language using AI
  */
 export class AIQueryService {
+  private pendingTimeFilter: AITimeFilter | undefined;
+
   constructor(
     private readonly tableSchema: TableSchema[],
     private readonly model: LanguageModelV1 = openai("gpt-4o-mini")
@@ -54,6 +68,9 @@ export class AIQueryService {
    */
   streamQuery(prompt: string, options: AIQueryOptions = {}) {
     const { mode = "new", currentQuery } = options;
+    // Reset pending time filter for new request
+    this.pendingTimeFilter = undefined;
+
     const schemaDescription = this.buildSchemaDescription();
     const systemPrompt =
       mode === "edit" && currentQuery
@@ -92,6 +109,40 @@ export class AIQueryService {
             return this.getSchemaInfo(tableName);
           },
         }),
+        setTimeFilter: tool({
+          description:
+            "Set the time filter for the query page UI instead of adding triggered_at conditions to the query. ALWAYS use this tool when the user wants to filter by time (e.g., 'last 7 days', 'past hour', 'yesterday'). The UI will apply this filter automatically. Do NOT add triggered_at to the WHERE clause - use this tool instead.",
+          parameters: z.object({
+            period: z
+              .string()
+              .optional()
+              .describe(
+                "Relative time period like '1m', '5m', '30m', '1h', '6h', '12h', '1d', '3d', '7d', '14d', '30d', '90d'. Use this for 'last X days/hours/minutes' requests."
+              ),
+            from: z
+              .string()
+              .optional()
+              .describe(
+                "ISO 8601 timestamp for the start of an absolute date range. Use with 'to' for specific date ranges."
+              ),
+            to: z
+              .string()
+              .optional()
+              .describe(
+                "ISO 8601 timestamp for the end of an absolute date range. Use with 'from' for specific date ranges."
+              ),
+          }),
+          execute: async ({ period, from, to }) => {
+            // Store the time filter so we can include it in the result
+            this.pendingTimeFilter = { period, from, to };
+            return {
+              success: true,
+              message: period
+                ? `Time filter set to: last ${period}`
+                : `Time filter set to: ${from ?? "start"} - ${to ?? "now"}`,
+            };
+          },
+        }),
       },
       maxSteps: 5,
       experimental_telemetry: {
@@ -104,11 +155,21 @@ export class AIQueryService {
     });
   }
 
+  /**
+   * Get the pending time filter (set by the AI during query generation)
+   */
+  getPendingTimeFilter(): AITimeFilter | undefined {
+    return this.pendingTimeFilter;
+  }
+
   /**
    * Generate a TSQL query from natural language (non-streaming)
    */
   async call(prompt: string, options: AIQueryOptions = {}): Promise<AIQueryResult> {
     const { mode = "new", currentQuery } = options;
+    // Reset pending time filter for new request
+    this.pendingTimeFilter = undefined;
+
     const schemaDescription = this.buildSchemaDescription();
     const systemPrompt =
       mode === "edit" && currentQuery
@@ -147,6 +208,40 @@ export class AIQueryService {
             return this.getSchemaInfo(tableName);
           },
         }),
+        setTimeFilter: tool({
+          description:
+            "Set the time filter for the query page UI instead of adding triggered_at conditions to the query. ALWAYS use this tool when the user wants to filter by time (e.g., 'last 7 days', 'past hour', 'yesterday'). The UI will apply this filter automatically. Do NOT add triggered_at to the WHERE clause - use this tool instead.",
+          parameters: z.object({
+            period: z
+              .string()
+              .optional()
+              .describe(
+                "Relative time period like '1m', '5m', '30m', '1h', '6h', '12h', '1d', '3d', '7d', '14d', '30d', '90d'. Use this for 'last X days/hours/minutes' requests."
+              ),
+            from: z
+              .string()
+              .optional()
+              .describe(
+                "ISO 8601 timestamp for the start of an absolute date range. Use with 'to' for specific date ranges."
+              ),
+            to: z
+              .string()
+              .optional()
+              .describe(
+                "ISO 8601 timestamp for the end of an absolute date range. Use with 'from' for specific date ranges."
+              ),
+          }),
+          execute: async ({ period, from, to }) => {
+            // Store the time filter so we can include it in the result
+            this.pendingTimeFilter = { period, from, to };
+            return {
+              success: true,
+              message: period
+                ? `Time filter set to: last ${period}`
+                : `Time filter set to: ${from ?? "start"} - ${to ?? "now"}`,
+            };
+          },
+        }),
       },
       maxSteps: 5,
       experimental_telemetry: {
@@ -168,7 +263,7 @@ export class AIQueryService {
       // Validate the extracted query one more time
       const validation = this.validateQuery(query);
       if (validation.valid) {
-        return { success: true, query };
+        return { success: true, query, timeFilter: this.pendingTimeFilter };
       } else {
         const errorMessages = validation.issues.map((i) => i.message).join("; ");
         return {
@@ -357,23 +452,23 @@ HAVING cnt > 10
 - INTERVAL n unit - time interval (e.g., INTERVAL 7 DAY)
 
 ### Common Patterns
-- Recent data: WHERE triggered_at > now() - INTERVAL 7 DAY
-- Date range: WHERE triggered_at BETWEEN '2024-01-01' AND '2024-01-31'
 - Status filter: WHERE status = 'Failed' or WHERE status IN ('Failed', 'Crashed')
+- Time filtering: Use the \`setTimeFilter\` tool (NOT triggered_at in WHERE clause)
 
 ## Important Rules
 
 1. NEVER use SELECT * - ClickHouse is a columnar database where SELECT * has very poor performance
 2. Always select only the specific columns needed for the request
 3. When column selection is ambiguous, use the core columns marked [CORE] in the schema
-4. If the user doesn't specify a time period, ALWAYS add a WHERE clause filtering to the last 7 days: \`triggered_at > now() - INTERVAL 7 DAY\`
-5. ALWAYS use the validateTSQLQuery tool to check your query before returning it
-6. If validation fails, fix the issues and try again (up to 3 attempts)
-7. Use column names exactly as defined in the schema (case-sensitive)
-8. For enum columns like status, use the allowed values shown in the schema
-9. Always include a LIMIT clause (default to 100 if not specified)
-10. Use meaningful column aliases with AS for aggregations
-11. Format queries with proper indentation for readability
+4. **TIME FILTERING**: When the user wants to filter by time (e.g., "last 7 days", "past hour", "yesterday"), ALWAYS use the \`setTimeFilter\` tool instead of adding \`triggered_at\` conditions to the query. The UI has a time filter that will apply this automatically.
+5. Do NOT add \`triggered_at\` to WHERE clauses - use \`setTimeFilter\` tool instead. If the user doesn't specify a time period, do NOT add any time filter (the UI defaults to 7 days).
+6. ALWAYS use the validateTSQLQuery tool to check your query before returning it
+7. If validation fails, fix the issues and try again (up to 3 attempts)
+8. Use column names exactly as defined in the schema (case-sensitive)
+9. For enum columns like status, use the allowed values shown in the schema
+10. Always include a LIMIT clause (default to 100 if not specified)
+11. Use meaningful column aliases with AS for aggregations
+12. Format queries with proper indentation for readability
 
 ## Response Format
 
@@ -450,13 +545,14 @@ HAVING cnt > 10
 
 1. NEVER use SELECT * - ClickHouse is a columnar database where SELECT * has very poor performance
 2. If the existing query uses SELECT *, replace it with specific columns (use core columns marked [CORE] as defaults)
-3. ALWAYS use the validateTSQLQuery tool to check your modified query before returning it
-4. If validation fails, fix the issues and try again (up to 3 attempts)
-5. Use column names exactly as defined in the schema (case-sensitive)
-6. For enum columns like status, use the allowed values shown in the schema
-7. Always include a LIMIT clause (default to 100 if not specified)
-8. Preserve the user's existing query structure and style where possible
-9. Only make the changes specifically requested by the user
+3. **TIME FILTERING**: When the user wants to change time filtering (e.g., "change to last 30 days"), use the \`setTimeFilter\` tool instead of modifying \`triggered_at\` conditions. If the existing query has \`triggered_at\` in WHERE, consider removing it and using \`setTimeFilter\` instead.
+4. ALWAYS use the validateTSQLQuery tool to check your modified query before returning it
+5. If validation fails, fix the issues and try again (up to 3 attempts)
+6. Use column names exactly as defined in the schema (case-sensitive)
+7. For enum columns like status, use the allowed values shown in the schema
+8. Always include a LIMIT clause (default to 100 if not specified)
+9. Preserve the user's existing query structure and style where possible
+10. Only make the changes specifically requested by the user
 
 ## Response Format
 

From 9e6c52f1872bb1425000a8bd5ebac8b481a3bb8e Mon Sep 17 00:00:00 2001
From: Matt Aitken <matt@mattaitken.com>
Date: Sun, 18 Jan 2026 16:49:29 +0000
Subject: [PATCH 134/137] useLocalString instead of toLocaleDateString

---
 apps/webapp/app/components/code/TSQLResultsTable.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/webapp/app/components/code/TSQLResultsTable.tsx b/apps/webapp/app/components/code/TSQLResultsTable.tsx
index 782e20a831..123d74c609 100644
--- a/apps/webapp/app/components/code/TSQLResultsTable.tsx
+++ b/apps/webapp/app/components/code/TSQLResultsTable.tsx
@@ -108,7 +108,7 @@ function getFormattedValue(value: unknown, column: OutputColumnMetadata): string
       try {
         const date = new Date(value);
         // Format as a searchable string: "15 Jan 2026 12:34:56"
-        return date.toLocaleDateString("en-GB", {
+        return date.toLocaleString("en-GB", {
           day: "numeric",
           month: "short",
           year: "numeric",

From 9b3f369458a7fff8643568af8197252ac810ddec Mon Sep 17 00:00:00 2001
From: Matt Aitken <matt@mattaitken.com>
Date: Sun, 18 Jan 2026 16:54:20 +0000
Subject: [PATCH 135/137] Legend values should be numbers

---
 .../app/components/primitives/charts/ChartLegendCompound.tsx    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/webapp/app/components/primitives/charts/ChartLegendCompound.tsx b/apps/webapp/app/components/primitives/charts/ChartLegendCompound.tsx
index 643d332cc7..89f9f687da 100644
--- a/apps/webapp/app/components/primitives/charts/ChartLegendCompound.tsx
+++ b/apps/webapp/app/components/primitives/charts/ChartLegendCompound.tsx
@@ -78,7 +78,7 @@ export function ChartLegendCompound({
     // If we have activePayload data from hovering over a bar
     const hoverData = highlight.activePayload.reduce((acc, item) => {
       if (item.dataKey && item.value !== undefined) {
-        acc[item.dataKey] = item.value;
+        acc[item.dataKey] = Number(item.value) || 0;
       }
       return acc;
     }, {} as Record<string, number>);

From 49d03202ff0a2d1f6495e628e82118c11f3c963d Mon Sep 17 00:00:00 2001
From: Matt Aitken <matt@mattaitken.com>
Date: Sun, 18 Jan 2026 17:03:17 +0000
Subject: [PATCH 136/137] Removed legacy/deprecated charts

---
 .../components/primitives/charts/ChartBar.tsx | 71 --------------
 .../primitives/charts/ChartLine.tsx           | 92 -------------------
 .../app/routes/storybook.charts/route.tsx     | 55 +----------
 3 files changed, 4 insertions(+), 214 deletions(-)

diff --git a/apps/webapp/app/components/primitives/charts/ChartBar.tsx b/apps/webapp/app/components/primitives/charts/ChartBar.tsx
index ae565cb5e6..43509231f3 100644
--- a/apps/webapp/app/components/primitives/charts/ChartBar.tsx
+++ b/apps/webapp/app/components/primitives/charts/ChartBar.tsx
@@ -48,12 +48,6 @@ export type ChartBarRendererProps = {
   referenceLine?: ReferenceLineProps;
   /** Custom tooltip label formatter */
   tooltipLabelFormatter?: (label: string, payload: any[]) => string;
-  /** @deprecated Legend is now controlled via Chart.Root showLegend prop */
-  showLegend?: boolean;
-  /** @deprecated Legend is now controlled via Chart.Root maxLegendItems prop */
-  maxLegendItems?: number;
-  /** @deprecated No longer used */
-  simpleLegend?: boolean;
   /** Width injected by ResponsiveContainer */
   width?: number;
   /** Height injected by ResponsiveContainer */
@@ -78,10 +72,6 @@ export function ChartBarRenderer({
   yAxisProps: yAxisPropsProp,
   referenceLine,
   tooltipLabelFormatter,
-  // Deprecated: legend is now controlled via Chart.Root
-  showLegend: _showLegend,
-  maxLegendItems: _maxLegendItems,
-  simpleLegend: _simpleLegend,
   width,
   height,
 }: ChartBarRendererProps) {
@@ -291,8 +281,6 @@ type LegacyChartBarProps = {
   state?: ChartState;
   maxLegendItems?: number;
   referenceLine?: ReferenceLineProps;
-  /** @deprecated Use onZoomChange callback instead */
-  useGlobalDateRange?: boolean;
   minHeight?: string;
   stackId?: string;
   /** Series keys to render (if not provided, derived from config keys) */
@@ -315,62 +303,3 @@ type LegacyChartBarProps = {
   className?: string;
 };
 
-/**
- * Legacy ChartBar component for backward compatibility.
- * Uses the new compound component system internally.
- *
- * For new code, prefer the compound component API:
- * ```tsx
- * <Chart.Root config={config} data={data} dataKey="day" enableZoom onZoomChange={handleZoom}>
- *   <Chart.Bar stackId="a" />
- *   <Chart.Legend />
- * </Chart.Root>
- * ```
- */
-export function ChartBar({
-  config,
-  data,
-  dataKey,
-  state,
-  maxLegendItems = 5,
-  referenceLine,
-  useGlobalDateRange = false,
-  minHeight,
-  stackId,
-  series,
-  xAxisProps,
-  yAxisProps,
-  showLegend = true,
-  enableZoom = true,
-  onZoomChange,
-  tooltipLabelFormatter,
-  simpleLegend = false,
-  className,
-}: LegacyChartBarProps) {
-  // Note: useGlobalDateRange is deprecated - the new compound system uses
-  // DateRangeContext integration via the syncWithDateRange prop on Chart.Zoom
-
-  return (
-    <ChartRoot
-      config={config}
-      data={data}
-      dataKey={dataKey}
-      series={series}
-      state={state}
-      enableZoom={enableZoom}
-      onZoomChange={onZoomChange}
-      minHeight={minHeight}
-      className={className}
-      showLegend={showLegend}
-      maxLegendItems={maxLegendItems}
-    >
-      <ChartBarRenderer
-        stackId={stackId}
-        xAxisProps={xAxisProps}
-        yAxisProps={yAxisProps}
-        referenceLine={referenceLine}
-        tooltipLabelFormatter={tooltipLabelFormatter}
-      />
-    </ChartRoot>
-  );
-}
diff --git a/apps/webapp/app/components/primitives/charts/ChartLine.tsx b/apps/webapp/app/components/primitives/charts/ChartLine.tsx
index 4eb29cd4d7..8c66c82c08 100644
--- a/apps/webapp/app/components/primitives/charts/ChartLine.tsx
+++ b/apps/webapp/app/components/primitives/charts/ChartLine.tsx
@@ -51,8 +51,6 @@ export type ChartLineRendererProps = {
   stacked?: boolean;
   /** Custom tooltip label formatter */
   tooltipLabelFormatter?: (label: string, payload: any[]) => string;
-  /** @deprecated Legend is now controlled via Chart.Root showLegend prop */
-  showLegend?: boolean;
   /** Width injected by ResponsiveContainer */
   width?: number;
   /** Height injected by ResponsiveContainer */
@@ -77,8 +75,6 @@ export function ChartLineRenderer({
   yAxisProps: yAxisPropsProp,
   stacked = false,
   tooltipLabelFormatter,
-  // Deprecated: legend is now controlled via Chart.Root
-  showLegend: _showLegend,
   width,
   height,
 }: ChartLineRendererProps) {
@@ -227,91 +223,3 @@ export function ChartLineRenderer({
     </LineChart>
   );
 }
-
-// ============================================================================
-// LEGACY API (for backward compatibility)
-// ============================================================================
-
-type LegacyChartLineProps = {
-  config: ChartConfig;
-  data: any[];
-  dataKey: string;
-  state?: ChartState;
-  /** @deprecated Use onZoomChange callback instead */
-  useGlobalDateRange?: boolean;
-  lineType?: CurveType;
-  /** Series keys to render (if not provided, derived from config keys) */
-  series?: string[];
-  /** Custom X-axis props to merge with defaults */
-  xAxisProps?: Partial<XAxisProps>;
-  /** Custom Y-axis props to merge with defaults */
-  yAxisProps?: Partial<YAxisProps>;
-  /** Render as stacked area chart instead of line chart */
-  stacked?: boolean;
-  /** Custom tooltip label formatter */
-  tooltipLabelFormatter?: (label: string, payload: any[]) => string;
-  /** Show legend (default false) */
-  showLegend?: boolean;
-  /** Enable zoom selection (default false for line charts) */
-  enableZoom?: boolean;
-  /** Callback when zoom range changes */
-  onZoomChange?: (range: ZoomRange) => void;
-  /** Additional className for the container */
-  className?: string;
-  /** Minimum height for the chart */
-  minHeight?: string;
-};
-
-/**
- * Legacy ChartLine component for backward compatibility.
- * Uses the new compound component system internally.
- *
- * For new code, prefer the compound component API:
- * ```tsx
- * <Chart.Root config={config} data={data} dataKey="day">
- *   <Chart.Line type="step" />
- *   <Chart.Legend simple />
- * </Chart.Root>
- * ```
- */
-export function ChartLine({
-  config,
-  data,
-  dataKey,
-  state,
-  useGlobalDateRange = false,
-  lineType = "step",
-  series,
-  xAxisProps,
-  yAxisProps,
-  stacked = false,
-  tooltipLabelFormatter,
-  showLegend = false,
-  enableZoom = false,
-  onZoomChange,
-  className,
-  minHeight,
-}: LegacyChartLineProps) {
-  return (
-    <ChartRoot
-      config={config}
-      data={data}
-      dataKey={dataKey}
-      series={series}
-      state={state}
-      enableZoom={enableZoom}
-      onZoomChange={onZoomChange}
-      minHeight={minHeight}
-      className={className}
-      showLegend={showLegend}
-    >
-      <ChartLineRenderer
-        lineType={lineType}
-        xAxisProps={xAxisProps}
-        yAxisProps={yAxisProps}
-        stacked={stacked}
-        tooltipLabelFormatter={tooltipLabelFormatter}
-      />
-    </ChartRoot>
-  );
-}
diff --git a/apps/webapp/app/routes/storybook.charts/route.tsx b/apps/webapp/app/routes/storybook.charts/route.tsx
index 69dc6c1b21..182df2ddec 100644
--- a/apps/webapp/app/routes/storybook.charts/route.tsx
+++ b/apps/webapp/app/routes/storybook.charts/route.tsx
@@ -1,25 +1,21 @@
 import { ArrowTrendingUpIcon } from "@heroicons/react/20/solid";
 import { IconTimeline } from "@tabler/icons-react";
 import { useMemo, useState } from "react";
-import { AbacusIcon } from "~/assets/icons/AbacusIcon";
-import { ArrowTopRightBottomLeftIcon } from "~/assets/icons/ArrowTopRightBottomLeftIcon";
 import { Button } from "~/components/primitives/Buttons";
 import { BigNumber } from "~/components/primitives/charts/BigNumber";
 import { Card } from "~/components/primitives/charts/Card";
-import { type ChartState, type ChartConfig } from "~/components/primitives/charts/Chart";
-import { ChartBar } from "~/components/primitives/charts/ChartBar";
-import { ChartLine } from "~/components/primitives/charts/ChartLine";
+import { type ChartConfig, type ChartState } from "~/components/primitives/charts/Chart";
 import { Chart } from "~/components/primitives/charts/ChartCompound";
 import {
   DateRangeProvider,
-  useDateRange,
   formatISODate,
   formatISODateLong,
+  useDateRange,
 } from "~/components/primitives/charts/DateRangeContext";
+import type { ZoomRange } from "~/components/primitives/charts/hooks/useZoomSelection";
 import { Paragraph } from "~/components/primitives/Paragraph";
 import { RadioGroup, RadioGroupItem } from "~/components/primitives/RadioButton";
 import SegmentedControl from "~/components/primitives/SegmentedControl";
-import type { ZoomRange } from "~/components/primitives/charts/hooks/useZoomSelection";
 
 // Date formatters for chart display
 const xAxisTickFormatter = (value: string) => formatISODate(value);
@@ -172,50 +168,7 @@ function ChartsDashboard() {
           </Card.Content>
         </Card>
 
-        {/* Legacy API Example (still works) */}
-        <Card>
-          <Card.Header>
-            <div className="flex items-center gap-1.5">
-              <AbacusIcon className="size-5 text-indigo-500" />
-              Legacy API <span className="font-normal text-text-dimmed">by status</span>
-            </div>
-            <Card.Accessory>
-              <SegmentedControl
-                name="runCountByStatus"
-                options={[
-                  { label: "By status", value: "status" },
-                  { label: "By task", value: "task" },
-                ]}
-                defaultValue="status"
-                variant="secondary/small"
-              />
-              <Button
-                variant="secondary/small"
-                TrailingIcon={<ArrowTopRightBottomLeftIcon className="size-4" />}
-                className="px-1"
-              />
-            </Card.Accessory>
-          </Card.Header>
-          <Card.Content>
-            <ChartBar
-              config={barChartConfig}
-              data={filteredBarData2}
-              dataKey="day"
-              stackId="a"
-              enableZoom
-              onZoomChange={handleZoomChange}
-              referenceLine={{
-                value: 30000,
-                label: "Max concurrency",
-              }}
-              state={chartState === "loaded" ? undefined : chartState}
-              minHeight="400px"
-              xAxisProps={{ tickFormatter: xAxisTickFormatter }}
-              tooltipLabelFormatter={tooltipLabelFormatter}
-            />
-          </Card.Content>
-        </Card>
-
+       
         {/* Simple Line Chart (no zoom, but synced with date range) */}
         <Card>
           <Card.Header>

From ffe7697bb3a29c4b47db0c4149b3e5c10ef3a693 Mon Sep 17 00:00:00 2001
From: Matt Aitken <matt@mattaitken.com>
Date: Sun, 18 Jan 2026 17:48:21 +0000
Subject: [PATCH 137/137] Need to use ClientOnly around random elements

---
 .../app/components/primitives/charts/ChartLoading.tsx     | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/apps/webapp/app/components/primitives/charts/ChartLoading.tsx b/apps/webapp/app/components/primitives/charts/ChartLoading.tsx
index fbe6da64d2..8046f3045f 100644
--- a/apps/webapp/app/components/primitives/charts/ChartLoading.tsx
+++ b/apps/webapp/app/components/primitives/charts/ChartLoading.tsx
@@ -4,6 +4,7 @@ import { Paragraph } from "../Paragraph";
 import { Spinner } from "../Spinner";
 import { useDateRange } from "./DateRangeContext";
 import { useMemo } from "react";
+import { ClientOnly } from "remix-utils/client-only";
 
 export function ChartBarLoading() {
   return (
@@ -121,7 +122,9 @@ function ChartBarLoadingBackground() {
       animate={{ opacity: 1 }}
       transition={{ duration: 0.5 }}
     >
-      <motion.div
+      <ClientOnly fallback={<div />}>
+      {() => (<>
+        <motion.div
         className="flex flex-1 items-end gap-1"
         initial={{ opacity: 0 }}
         animate={{ opacity: 1 }}
@@ -176,6 +179,9 @@ function ChartBarLoadingBackground() {
           </motion.div>
         ))}
       </motion.div>
+      </>)}
+    </ClientOnly>
+      
     </motion.div>
   );
 }