From 4a1788bb004a1056167be31d68164e927bd6ca97 Mon Sep 17 00:00:00 2001
From: Karthik Kalyanaraman <karthik@scale3labs.com>
Date: Sat, 22 Nov 2025 11:13:50 -0800
Subject: [PATCH 01/11] Fix formatting for configuration error state

---
 packages/web/src/components/settings-sidebar.tsx | 14 ++++++--------
 1 file changed, 6 insertions(+), 8 deletions(-)

diff --git a/packages/web/src/components/settings-sidebar.tsx b/packages/web/src/components/settings-sidebar.tsx
index f5affa3ba..2099f36d6 100644
--- a/packages/web/src/components/settings-sidebar.tsx
+++ b/packages/web/src/components/settings-sidebar.tsx
@@ -143,7 +143,7 @@ export function SettingsSidebar() {
                         }
                       />
                       {getFieldError('port') && (
-                        <p className="text-sm text-destructive">
+                        <p className="text-sm text-destructive break-words">
                           {getFieldError('port')}
                         </p>
                       )}
@@ -162,11 +162,6 @@ export function SettingsSidebar() {
                           getFieldError('dataDir') ? 'border-destructive' : ''
                         }
                       />
-                      {getFieldError('dataDir') && (
-                        <p className="text-sm text-destructive">
-                          {getFieldError('dataDir')}
-                        </p>
-                      )}
                       <p className="text-xs text-muted-foreground">
                         Path to the workflow data directory. Can be relative or
                         absolute.
@@ -229,13 +224,16 @@ export function SettingsSidebar() {
                 )}
 
                 {errors.length > 0 && (
-                  <Alert variant="destructive">
+                  <Alert
+                    variant="destructive"
+                    className="!bg-destructive/10 !border-destructive"
+                  >
                     <AlertCircle className="h-4 w-4" />
                     <AlertTitle>Configuration Error</AlertTitle>
                     <AlertDescription>
                       <ul className="list-disc list-inside space-y-1">
                         {errors.map((error, idx) => (
-                          <li key={`error-${idx}`}>
+                          <li key={`error-${idx}`} className="break-words">
                             {error.field !== 'general' && (
                               <strong>{error.field}:</strong>
                             )}{' '}

From f07301495b3a0ccdc4035eede31bb6bda1dd7ced Mon Sep 17 00:00:00 2001
From: Karthik Kalyanaraman <karthik@scale3labs.com>
Date: Sat, 22 Nov 2025 12:06:01 -0800
Subject: [PATCH 02/11] Move hooks and runs as tabs

---
 packages/web-shared/src/index.ts              |  2 +
 packages/web/package.json                     |  3 +-
 packages/web/src/app/layout-client.tsx        |  4 +-
 packages/web/src/app/page.tsx                 | 44 ++++++++-----
 .../display-utils/relative-time.tsx           |  2 +-
 packages/web/src/components/hooks-table.tsx   | 19 +++---
 packages/web/src/components/runs-table.tsx    | 11 ++--
 .../web/src/components/stream-detail-view.tsx |  3 +-
 packages/web/src/components/ui/tabs.tsx       | 66 +++++++++++++++++++
 packages/web/src/lib/config.ts                |  2 +-
 pnpm-lock.yaml                                | 58 ++++++++++++----
 11 files changed, 165 insertions(+), 49 deletions(-)
 create mode 100644 packages/web/src/components/ui/tabs.tsx

diff --git a/packages/web-shared/src/index.ts b/packages/web-shared/src/index.ts
index 60e9d2465..f4cafdab8 100644
--- a/packages/web-shared/src/index.ts
+++ b/packages/web-shared/src/index.ts
@@ -5,6 +5,8 @@ export {
 
 export type { Event, Hook, Step, WorkflowRun } from '@workflow/world';
 export * from './api/workflow-api-client';
+export type { EnvMap } from './api/workflow-server-actions';
+export { fetchEventsByCorrelationId } from './api/workflow-server-actions';
 export { RunTraceView } from './run-trace-view';
 export type { Span, SpanEvent } from './trace-viewer/types';
 export { WorkflowTraceViewer } from './workflow-trace-view';
diff --git a/packages/web/package.json b/packages/web/package.json
index f46a757d2..740a97af5 100644
--- a/packages/web/package.json
+++ b/packages/web/package.json
@@ -26,6 +26,7 @@
     "format": "biome format --write"
   },
   "dependencies": {
+    "@radix-ui/react-tabs": "^1.1.13",
     "next": "15.5.4"
   },
   "devDependencies": {
@@ -41,8 +42,8 @@
     "@types/react": "19",
     "@types/react-dom": "19",
     "@workflow/core": "workspace:*",
-    "@workflow/world": "workspace:*",
     "@workflow/web-shared": "workspace:*",
+    "@workflow/world": "workspace:*",
     "class-variance-authority": "0.7.1",
     "clsx": "2.1.1",
     "date-fns": "4.1.0",
diff --git a/packages/web/src/app/layout-client.tsx b/packages/web/src/app/layout-client.tsx
index 451d54745..0dd593f5b 100644
--- a/packages/web/src/app/layout-client.tsx
+++ b/packages/web/src/app/layout-client.tsx
@@ -119,9 +119,9 @@ export function LayoutClient({ children }: LayoutClientProps) {
       enableSystem
       disableTransitionOnChange
     >
-      <div className="min-h-screen px-8 pt-8">
+      <div className="min-h-screen px-6 pt-8">
         <TooltipProvider delayDuration={0}>
-          <div className="max-w-7xl mx-auto">
+          <div>
             <div className="flex items-start justify-between">
               <div className="mb-8 items-center flex justify-between w-full">
                 <Link href="https://useworkflow.dev" target="_blank">
diff --git a/packages/web/src/app/page.tsx b/packages/web/src/app/page.tsx
index 088d59ca2..4d52e3400 100644
--- a/packages/web/src/app/page.tsx
+++ b/packages/web/src/app/page.tsx
@@ -4,6 +4,7 @@ import { useRouter, useSearchParams } from 'next/navigation';
 import { ErrorBoundary } from '@/components/error-boundary';
 import { HooksTable } from '@/components/hooks-table';
 import { RunsTable } from '@/components/runs-table';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { buildUrlWithConfig, useQueryParamConfig } from '@/lib/config';
 
 export default function Home() {
@@ -40,23 +41,32 @@ export default function Home() {
 
   return (
     <div className="space-y-6">
-      <ErrorBoundary
-        title="Runs Error"
-        description="Failed to load workflow runs. Please try refreshing the page."
-      >
-        <RunsTable config={config} onRunClick={handleRunClick} />
-      </ErrorBoundary>
-
-      <ErrorBoundary
-        title="Hooks Error"
-        description="Failed to load hooks. Please try refreshing the page."
-      >
-        <HooksTable
-          config={config}
-          onHookClick={handleHookSelect}
-          selectedHookId={selectedHookId}
-        />
-      </ErrorBoundary>
+      <Tabs defaultValue="runs" className="w-full">
+        <TabsList className="mb-4">
+          <TabsTrigger value="runs">Runs</TabsTrigger>
+          <TabsTrigger value="hooks">Hooks</TabsTrigger>
+        </TabsList>
+        <TabsContent value="runs">
+          <ErrorBoundary
+            title="Runs Error"
+            description="Failed to load workflow runs. Please try refreshing the page."
+          >
+            <RunsTable config={config} onRunClick={handleRunClick} />
+          </ErrorBoundary>
+        </TabsContent>
+        <TabsContent value="hooks">
+          <ErrorBoundary
+            title="Hooks Error"
+            description="Failed to load hooks. Please try refreshing the page."
+          >
+            <HooksTable
+              config={config}
+              onHookClick={handleHookSelect}
+              selectedHookId={selectedHookId}
+            />
+          </ErrorBoundary>
+        </TabsContent>
+      </Tabs>
     </div>
   );
 }
diff --git a/packages/web/src/components/display-utils/relative-time.tsx b/packages/web/src/components/display-utils/relative-time.tsx
index 82466716f..aa89741c0 100644
--- a/packages/web/src/components/display-utils/relative-time.tsx
+++ b/packages/web/src/components/display-utils/relative-time.tsx
@@ -48,7 +48,7 @@ export function RelativeTime({
     <Tooltip>
       <TooltipTrigger asChild>
         <span className={`${className} cursor-help border-b border-dotted`}>
-          {relativeTime}
+          Last refreshed: {relativeTime}
         </span>
       </TooltipTrigger>
       <TooltipContent>
diff --git a/packages/web/src/components/hooks-table.tsx b/packages/web/src/components/hooks-table.tsx
index dc8b228c7..0da715da4 100644
--- a/packages/web/src/components/hooks-table.tsx
+++ b/packages/web/src/components/hooks-table.tsx
@@ -1,10 +1,14 @@
 'use client';
 
-import { getErrorMessage, useWorkflowHooks } from '@workflow/web-shared';
-import { fetchEventsByCorrelationId } from '@workflow/web-shared/server';
+import {
+  fetchEventsByCorrelationId,
+  getErrorMessage,
+  useWorkflowHooks,
+} from '@workflow/web-shared';
 import type { Event, Hook } from '@workflow/world';
 import {
   AlertCircle,
+  ArrowUpRight,
   ChevronLeft,
   ChevronRight,
   RefreshCw,
@@ -209,11 +213,8 @@ export function HooksTable({
 
   return (
     <div>
-      <div className="flex items-center justify-between my-4">
-        <h2 className="text-2xl my-2 font-semibold leading-none tracking-tight">
-          Hooks
-        </h2>
-        <div className="flex items-center gap-4">
+      <div className="flex items-center justify-between">
+        <div className="flex items-center justify-between">
           {lastRefreshTime && (
             <RelativeTime
               date={lastRefreshTime}
@@ -221,6 +222,8 @@ export function HooksTable({
               type="distance"
             />
           )}
+        </div>
+        <div className="flex items-center gap-4">
           <Tooltip>
             <TooltipTrigger asChild>
               <Button
@@ -245,7 +248,7 @@ export function HooksTable({
         </Alert>
       ) : !loading && (!hooks || hooks.length === 0) ? (
         <div className="text-center py-8 text-muted-foreground">
-          No active hooks found.{' '}
+          No active hooks found. <br />
           <DocsLink href="https://useworkflow.dev/docs/api-reference/workflow/create-hook">
             Learn how to create a hook
           </DocsLink>
diff --git a/packages/web/src/components/runs-table.tsx b/packages/web/src/components/runs-table.tsx
index d8e32891d..b5f14702c 100644
--- a/packages/web/src/components/runs-table.tsx
+++ b/packages/web/src/components/runs-table.tsx
@@ -141,9 +141,8 @@ export function RunsTable({ config, onRunClick }: RunsTableProps) {
 
   return (
     <div>
-      <div className="flex items-center justify-between my-4">
-        <h2 className="text-2xl my-2 font-semibold leading-none tracking-tight flex gap-4 items-end">
-          <span className="flex items-center gap-2">Runs</span>
+      <div className="flex items-center justify-between">
+        <div className="flex items-end">
           {lastRefreshTime && (
             <RelativeTime
               date={lastRefreshTime}
@@ -151,7 +150,7 @@ export function RunsTable({ config, onRunClick }: RunsTableProps) {
               type="distance"
             />
           )}
-        </h2>
+        </div>
         <div className="flex items-center gap-4">
           {
             <>
@@ -287,14 +286,14 @@ export function RunsTable({ config, onRunClick }: RunsTableProps) {
         <TableSkeleton />
       ) : !loading && (!data.data || data.data.length === 0) ? (
         <div className="text-center py-8 text-muted-foreground">
-          No workflow runs found.{' '}
+          No workflow runs found. <br />
           <DocsLink href="https://useworkflow.dev/docs/foundations/workflows-and-steps">
             Learn how to create a workflow
           </DocsLink>
         </div>
       ) : (
         <>
-          <Table>
+          <Table className="mt-4">
             <TableHeader>
               <TableRow>
                 <TableHead>Workflow</TableHead>
diff --git a/packages/web/src/components/stream-detail-view.tsx b/packages/web/src/components/stream-detail-view.tsx
index 4a4db95e0..8b4bad67b 100644
--- a/packages/web/src/components/stream-detail-view.tsx
+++ b/packages/web/src/components/stream-detail-view.tsx
@@ -1,7 +1,6 @@
 'use client';
 
-import { readStream } from '@workflow/web-shared';
-import type { EnvMap } from '@workflow/web-shared/server';
+import { type EnvMap, readStream } from '@workflow/web-shared';
 import { useParams } from 'next/navigation';
 import { useEffect, useRef, useState } from 'react';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
diff --git a/packages/web/src/components/ui/tabs.tsx b/packages/web/src/components/ui/tabs.tsx
new file mode 100644
index 000000000..a7a9a521d
--- /dev/null
+++ b/packages/web/src/components/ui/tabs.tsx
@@ -0,0 +1,66 @@
+'use client';
+
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+import type * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+function Tabs({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Root>) {
+  return (
+    <TabsPrimitive.Root
+      data-slot="tabs"
+      className={cn('flex flex-col gap-2', className)}
+      {...props}
+    />
+  );
+}
+
+function TabsList({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.List>) {
+  return (
+    <TabsPrimitive.List
+      data-slot="tabs-list"
+      className={cn(
+        'bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg border border-input p-[3px]',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function TabsTrigger({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
+  return (
+    <TabsPrimitive.Trigger
+      data-slot="tabs-trigger"
+      className={cn(
+        "data-[state=active]:bg-background data-[state=active]:border-input dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function TabsContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Content>) {
+  return (
+    <TabsPrimitive.Content
+      data-slot="tabs-content"
+      className={cn('flex-1 outline-none', className)}
+      {...props}
+    />
+  );
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent };
diff --git a/packages/web/src/lib/config.ts b/packages/web/src/lib/config.ts
index 6d01d59a5..df8e6e9b7 100644
--- a/packages/web/src/lib/config.ts
+++ b/packages/web/src/lib/config.ts
@@ -1,6 +1,6 @@
 'use client';
 
-import type { EnvMap } from '@workflow/web-shared/server';
+import type { EnvMap } from '@workflow/web-shared';
 import { usePathname, useRouter, useSearchParams } from 'next/navigation';
 import { useMemo } from 'react';
 import type { WorldConfig } from '@/lib/config-world';
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 849006af1..9a9b8c4bc 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -628,7 +628,7 @@ importers:
     devDependencies:
       '@nuxt/module-builder':
         specifier: 1.0.2
-        version: 1.0.2(@nuxt/cli@3.29.3(magicast@0.3.5))(@vue/compiler-core@3.5.22)(esbuild@0.25.12)(typescript@5.9.3)(vue@3.5.22(typescript@5.9.3))
+        version: 1.0.2(@nuxt/cli@3.29.3(magicast@0.3.5))(@vue/compiler-core@3.5.22)(esbuild@0.25.11)(typescript@5.9.3)(vue@3.5.22(typescript@5.9.3))
       '@nuxt/schema':
         specifier: 4.2.0
         version: 4.2.0
@@ -729,6 +729,9 @@ importers:
 
   packages/web:
     dependencies:
+      '@radix-ui/react-tabs':
+        specifier: ^1.1.13
+        version: 1.1.13(@types/react-dom@19.1.9(@types/react@19.1.13))(@types/react@19.1.13)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
       next:
         specifier: 15.5.4
         version: 15.5.4(@opentelemetry/api@1.9.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
@@ -14492,7 +14495,7 @@ snapshots:
     transitivePeerDependencies:
       - magicast
 
-  '@nuxt/module-builder@1.0.2(@nuxt/cli@3.29.3(magicast@0.3.5))(@vue/compiler-core@3.5.22)(esbuild@0.25.12)(typescript@5.9.3)(vue@3.5.22(typescript@5.9.3))':
+  '@nuxt/module-builder@1.0.2(@nuxt/cli@3.29.3(magicast@0.3.5))(@vue/compiler-core@3.5.22)(esbuild@0.25.11)(typescript@5.9.3)(vue@3.5.22(typescript@5.9.3))':
     dependencies:
       '@nuxt/cli': 3.29.3(magicast@0.3.5)
       citty: 0.1.6
@@ -14500,14 +14503,14 @@ snapshots:
       defu: 6.1.4
       jiti: 2.6.1
       magic-regexp: 0.10.0
-      mkdist: 2.4.1(typescript@5.9.3)(vue-sfc-transformer@0.1.17(@vue/compiler-core@3.5.22)(esbuild@0.25.12)(vue@3.5.22(typescript@5.9.3)))(vue@3.5.22(typescript@5.9.3))
+      mkdist: 2.4.1(typescript@5.9.3)(vue-sfc-transformer@0.1.17(@vue/compiler-core@3.5.22)(esbuild@0.25.11)(vue@3.5.22(typescript@5.9.3)))(vue@3.5.22(typescript@5.9.3))
       mlly: 1.8.0
       pathe: 2.0.3
       pkg-types: 2.3.0
       tsconfck: 3.1.6(typescript@5.9.3)
       typescript: 5.9.3
-      unbuild: 3.6.1(typescript@5.9.3)(vue-sfc-transformer@0.1.17(@vue/compiler-core@3.5.22)(esbuild@0.25.12)(vue@3.5.22(typescript@5.9.3)))(vue@3.5.22(typescript@5.9.3))
-      vue-sfc-transformer: 0.1.17(@vue/compiler-core@3.5.22)(esbuild@0.25.12)(vue@3.5.22(typescript@5.9.3))
+      unbuild: 3.6.1(typescript@5.9.3)(vue-sfc-transformer@0.1.17(@vue/compiler-core@3.5.22)(esbuild@0.25.11)(vue@3.5.22(typescript@5.9.3)))(vue@3.5.22(typescript@5.9.3))
+      vue-sfc-transformer: 0.1.17(@vue/compiler-core@3.5.22)(esbuild@0.25.11)(vue@3.5.22(typescript@5.9.3))
     transitivePeerDependencies:
       - '@vue/compiler-core'
       - esbuild
@@ -16159,6 +16162,23 @@ snapshots:
       '@types/react': 19.1.13
       '@types/react-dom': 19.1.9(@types/react@19.1.13)
 
+  '@radix-ui/react-roving-focus@1.1.11(@types/react-dom@19.1.9(@types/react@19.1.13))(@types/react@19.1.13)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.1.9(@types/react@19.1.13))(@types/react@19.1.13)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.13)(react@19.1.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.13)(react@19.1.0)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.1.13)(react@19.1.0)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.1.13)(react@19.1.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9(@types/react@19.1.13))(@types/react@19.1.13)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.1.13)(react@19.1.0)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.13)(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.13
+      '@types/react-dom': 19.1.9(@types/react@19.1.13)
+
   '@radix-ui/react-roving-focus@1.1.11(@types/react-dom@19.1.9(@types/react@19.1.13))(@types/react@19.1.13)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
     dependencies:
       '@radix-ui/primitive': 1.1.3
@@ -16337,6 +16357,22 @@ snapshots:
       '@types/react': 19.1.13
       '@types/react-dom': 19.1.9(@types/react@19.1.13)
 
+  '@radix-ui/react-tabs@1.1.13(@types/react-dom@19.1.9(@types/react@19.1.13))(@types/react@19.1.13)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.13)(react@19.1.0)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.1.13)(react@19.1.0)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.1.13)(react@19.1.0)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.1.9(@types/react@19.1.13))(@types/react@19.1.13)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9(@types/react@19.1.13))(@types/react@19.1.13)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-roving-focus': 1.1.11(@types/react-dom@19.1.9(@types/react@19.1.13))(@types/react@19.1.13)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.13)(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.13
+      '@types/react-dom': 19.1.9(@types/react@19.1.13)
+
   '@radix-ui/react-tabs@1.1.13(@types/react-dom@19.1.9(@types/react@19.1.13))(@types/react@19.1.13)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
     dependencies:
       '@radix-ui/primitive': 1.1.3
@@ -21676,7 +21712,7 @@ snapshots:
 
   mkdirp@3.0.1: {}
 
-  mkdist@2.4.1(typescript@5.9.3)(vue-sfc-transformer@0.1.17(@vue/compiler-core@3.5.22)(esbuild@0.25.12)(vue@3.5.22(typescript@5.9.3)))(vue@3.5.22(typescript@5.9.3)):
+  mkdist@2.4.1(typescript@5.9.3)(vue-sfc-transformer@0.1.17(@vue/compiler-core@3.5.22)(esbuild@0.25.11)(vue@3.5.22(typescript@5.9.3)))(vue@3.5.22(typescript@5.9.3)):
     dependencies:
       autoprefixer: 10.4.21(postcss@8.5.6)
       citty: 0.1.6
@@ -21694,7 +21730,7 @@ snapshots:
     optionalDependencies:
       typescript: 5.9.3
       vue: 3.5.22(typescript@5.9.3)
-      vue-sfc-transformer: 0.1.17(@vue/compiler-core@3.5.22)(esbuild@0.25.12)(vue@3.5.22(typescript@5.9.3))
+      vue-sfc-transformer: 0.1.17(@vue/compiler-core@3.5.22)(esbuild@0.25.11)(vue@3.5.22(typescript@5.9.3))
 
   mlly@1.8.0:
     dependencies:
@@ -24686,7 +24722,7 @@ snapshots:
 
   ultrahtml@1.6.0: {}
 
-  unbuild@3.6.1(typescript@5.9.3)(vue-sfc-transformer@0.1.17(@vue/compiler-core@3.5.22)(esbuild@0.25.12)(vue@3.5.22(typescript@5.9.3)))(vue@3.5.22(typescript@5.9.3)):
+  unbuild@3.6.1(typescript@5.9.3)(vue-sfc-transformer@0.1.17(@vue/compiler-core@3.5.22)(esbuild@0.25.11)(vue@3.5.22(typescript@5.9.3)))(vue@3.5.22(typescript@5.9.3)):
     dependencies:
       '@rollup/plugin-alias': 5.1.1(rollup@4.53.2)
       '@rollup/plugin-commonjs': 28.0.9(rollup@4.53.2)
@@ -24702,7 +24738,7 @@ snapshots:
       hookable: 5.5.3
       jiti: 2.6.1
       magic-string: 0.30.21
-      mkdist: 2.4.1(typescript@5.9.3)(vue-sfc-transformer@0.1.17(@vue/compiler-core@3.5.22)(esbuild@0.25.12)(vue@3.5.22(typescript@5.9.3)))(vue@3.5.22(typescript@5.9.3))
+      mkdist: 2.4.1(typescript@5.9.3)(vue-sfc-transformer@0.1.17(@vue/compiler-core@3.5.22)(esbuild@0.25.11)(vue@3.5.22(typescript@5.9.3)))(vue@3.5.22(typescript@5.9.3))
       mlly: 1.8.0
       pathe: 2.0.3
       pkg-types: 2.3.0
@@ -25364,11 +25400,11 @@ snapshots:
       '@vue/devtools-api': 6.6.4
       vue: 3.5.22(typescript@5.9.3)
 
-  vue-sfc-transformer@0.1.17(@vue/compiler-core@3.5.22)(esbuild@0.25.12)(vue@3.5.22(typescript@5.9.3)):
+  vue-sfc-transformer@0.1.17(@vue/compiler-core@3.5.22)(esbuild@0.25.11)(vue@3.5.22(typescript@5.9.3)):
     dependencies:
       '@babel/parser': 7.28.5
       '@vue/compiler-core': 3.5.22
-      esbuild: 0.25.12
+      esbuild: 0.25.11
       vue: 3.5.22(typescript@5.9.3)
 
   vue@3.5.22(typescript@5.9.3):

From 82240ef4270a7da1b3767f7765396002ef8cd6a2 Mon Sep 17 00:00:00 2001
From: Karthik Kalyanaraman <karthik@scale3labs.com>
Date: Sat, 22 Nov 2025 17:03:00 -0800
Subject: [PATCH 03/11] Theme updates

---
 packages/web/package.json                     |   1 +
 packages/web/src/app/globals.css              | 542 +++++++++---------
 packages/web/src/app/layout-client.tsx        | 111 ++--
 packages/web/src/app/page.tsx                 |  28 +-
 .../display-utils/relative-time.tsx           |   2 +-
 .../components/display-utils/status-badge.tsx |  23 +-
 .../display-utils/table-skeleton.tsx          |   4 +-
 packages/web/src/components/hooks-table.tsx   |  25 +-
 .../web/src/components/run-detail-view.tsx    |  11 +-
 packages/web/src/components/runs-table.tsx    |  23 +-
 .../web/src/components/settings-dropdown.tsx  |  92 +++
 .../web/src/components/settings-sidebar.tsx   |  32 +-
 .../web/src/components/stream-detail-view.tsx |   8 +-
 .../web/src/components/ui/dropdown-menu.tsx   | 200 +++++++
 .../src/components/ui/segmented-control.tsx   |  44 ++
 packages/web/src/components/ui/tabs.tsx       |   2 +-
 packages/web/src/lib/config.ts                |  11 +-
 pnpm-lock.yaml                                | 347 ++++++++++-
 18 files changed, 1118 insertions(+), 388 deletions(-)
 create mode 100644 packages/web/src/components/settings-dropdown.tsx
 create mode 100644 packages/web/src/components/ui/dropdown-menu.tsx
 create mode 100644 packages/web/src/components/ui/segmented-control.tsx

diff --git a/packages/web/package.json b/packages/web/package.json
index 740a97af5..e2157bfc3 100644
--- a/packages/web/package.json
+++ b/packages/web/package.json
@@ -32,6 +32,7 @@
   "devDependencies": {
     "@biomejs/biome": "catalog:",
     "@radix-ui/react-alert-dialog": "1.1.5",
+    "@radix-ui/react-dropdown-menu": "2.1.6",
     "@radix-ui/react-label": "2.1.7",
     "@radix-ui/react-select": "2.2.6",
     "@radix-ui/react-slot": "1.1.1",
diff --git a/packages/web/src/app/globals.css b/packages/web/src/app/globals.css
index eba38b97a..7d6c3cb3e 100644
--- a/packages/web/src/app/globals.css
+++ b/packages/web/src/app/globals.css
@@ -2,30 +2,83 @@
 
 /* Scan web-shared package for Tailwind classes */
 @source "../../../web-shared/src";
+@source "../components";
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+}
 
 :root {
-  --background: 0 0% 100%;
-  --foreground: 0 0% 3.9%;
-  --card: 0 0% 100%;
-  --card-foreground: 0 0% 3.9%;
-  --popover: 0 0% 100%;
-  --popover-foreground: 0 0% 3.9%;
-  --primary: 0 0% 9%;
-  --primary-foreground: 0 0% 98%;
-  --secondary: 0 0% 96.1%;
-  --secondary-foreground: 0 0% 9%;
-  --muted: 0 0% 96.1%;
-  --muted-foreground: 0 0% 45.1%;
-  --accent: 0 0% 96.1%;
-  --accent-foreground: 0 0% 9%;
-  --destructive: 0 84.2% 60.2%;
-  --destructive-foreground: 0 0% 98%;
-  --border: 0 0% 89.8%;
-  --input: 0 0% 89.8%;
-  --ring: 0 0% 3.9%;
-  --radius: 0.5rem;
-
-  /* Geist Design System Colors */
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+
+  /* Geist Design System Colors - Light Mode */
   /* Backgrounds */
   --ds-background-100: rgb(255 255 255);
   --ds-background-200: rgb(250 250 250);
@@ -42,17 +95,6 @@
   --ds-gray-900: rgb(23 23 23);
   --ds-gray-1000: rgb(0 0 0);
 
-  /* Gray Alpha (with transparency) */
-  --ds-gray-alpha-100: rgb(0 0 0 / 0.02);
-  --ds-gray-alpha-200: rgb(0 0 0 / 0.04);
-  --ds-gray-alpha-300: rgb(0 0 0 / 0.08);
-  --ds-gray-alpha-400: rgb(0 0 0 / 0.12);
-  --ds-gray-alpha-500: rgb(0 0 0 / 0.3);
-  --ds-gray-alpha-600: rgb(0 0 0 / 0.5);
-  --ds-gray-alpha-700: rgb(0 0 0 / 0.6);
-  --ds-gray-alpha-800: rgb(0 0 0 / 0.7);
-  --ds-gray-alpha-900: rgb(0 0 0 / 0.9);
-
   /* Blue */
   --ds-blue-100: rgb(224 242 254);
   --ds-blue-200: rgb(186 230 253);
@@ -101,18 +143,6 @@
   --ds-green-900: rgb(20 83 45);
   --ds-green-1000: rgb(5 46 22);
 
-  /* Teal */
-  --ds-teal-100: rgb(204 251 241);
-  --ds-teal-200: rgb(153 246 228);
-  --ds-teal-300: rgb(94 234 212);
-  --ds-teal-400: rgb(45 212 191);
-  --ds-teal-500: rgb(20 184 166);
-  --ds-teal-600: rgb(13 148 136);
-  --ds-teal-700: rgb(15 118 110);
-  --ds-teal-800: rgb(17 94 89);
-  --ds-teal-900: rgb(19 78 74);
-  --ds-teal-1000: rgb(4 47 46);
-
   /* Purple */
   --ds-purple-100: rgb(243 232 255);
   --ds-purple-200: rgb(233 213 255);
@@ -125,17 +155,17 @@
   --ds-purple-900: rgb(88 28 135);
   --ds-purple-1000: rgb(59 7 100);
 
-  /* Pink */
-  --ds-pink-100: rgb(252 231 243);
-  --ds-pink-200: rgb(251 207 232);
-  --ds-pink-300: rgb(249 168 212);
-  --ds-pink-400: rgb(244 114 182);
-  --ds-pink-500: rgb(236 72 153);
-  --ds-pink-600: rgb(219 39 119);
-  --ds-pink-700: rgb(190 24 93);
-  --ds-pink-800: rgb(157 23 77);
-  --ds-pink-900: rgb(131 24 67);
-  --ds-pink-1000: rgb(80 7 36);
+  /* Teal */
+  --ds-teal-100: rgb(204 251 241);
+  --ds-teal-200: rgb(153 246 228);
+  --ds-teal-300: rgb(94 234 212);
+  --ds-teal-400: rgb(45 212 191);
+  --ds-teal-500: rgb(20 184 166);
+  --ds-teal-600: rgb(13 148 136);
+  --ds-teal-700: rgb(15 118 110);
+  --ds-teal-800: rgb(17 94 89);
+  --ds-teal-900: rgb(19 78 74);
+  --ds-teal-1000: rgb(4 47 46);
 
   /* Shadows */
   --ds-shadow-small: 0 0 0 1px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.05), 0 12px 24px rgba(0, 0, 0, 0.05);
@@ -143,169 +173,38 @@
   --ds-shadow-large: 0 0 0 1px rgba(0, 0, 0, 0.07), 0 8px 16px rgba(0, 0, 0, 0.10), 0 48px 96px rgba(0, 0, 0, 0.10);
 }
 
-/* Dark mode: applies when system prefers dark (and no .light class override) */
-@media (prefers-color-scheme: dark) {
-  :root:not(.light) {
-    --background: 0 0% 3.9%;
-    --foreground: 0 0% 98%;
-    --card: 0 0% 3.9%;
-    --card-foreground: 0 0% 98%;
-    --popover: 0 0% 3.9%;
-    --popover-foreground: 0 0% 98%;
-    --primary: 0 0% 98%;
-    --primary-foreground: 0 0% 9%;
-    --secondary: 0 0% 14.9%;
-    --secondary-foreground: 0 0% 98%;
-    --muted: 0 0% 14.9%;
-    --muted-foreground: 0 0% 63.9%;
-    --accent: 0 0% 14.9%;
-    --accent-foreground: 0 0% 98%;
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 0 0% 98%;
-    --border: 0 0% 14.9%;
-    --input: 0 0% 14.9%;
-    --ring: 0 0% 83.1%;
-
-    /* Geist Design System Colors - Dark Mode */
-    /* Backgrounds */
-    --ds-background-100: rgb(0 0 0);
-    --ds-background-200: rgb(10 10 10);
-
-    /* Gray Scale */
-    --ds-gray-100: rgb(17 17 17);
-    --ds-gray-200: rgb(23 23 23);
-    --ds-gray-300: rgb(41 41 41);
-    --ds-gray-400: rgb(64 64 64);
-    --ds-gray-500: rgb(115 115 115);
-    --ds-gray-600: rgb(163 163 163);
-    --ds-gray-700: rgb(212 212 212);
-    --ds-gray-800: rgb(229 229 229);
-    --ds-gray-900: rgb(245 245 245);
-    --ds-gray-1000: rgb(255 255 255);
-
-    /* Gray Alpha (with transparency) */
-    --ds-gray-alpha-100: rgb(255 255 255 / 0.02);
-    --ds-gray-alpha-200: rgb(255 255 255 / 0.04);
-    --ds-gray-alpha-300: rgb(255 255 255 / 0.08);
-    --ds-gray-alpha-400: rgb(255 255 255 / 0.12);
-    --ds-gray-alpha-500: rgb(255 255 255 / 0.3);
-    --ds-gray-alpha-600: rgb(255 255 255 / 0.5);
-    --ds-gray-alpha-700: rgb(255 255 255 / 0.6);
-    --ds-gray-alpha-800: rgb(255 255 255 / 0.7);
-    --ds-gray-alpha-900: rgb(255 255 255 / 0.9);
-
-    /* Blue - Dark Mode */
-    --ds-blue-100: rgb(8 47 73);
-    --ds-blue-200: rgb(12 74 110);
-    --ds-blue-300: rgb(7 89 133);
-    --ds-blue-400: rgb(3 105 161);
-    --ds-blue-500: rgb(2 132 199);
-    --ds-blue-600: rgb(14 165 233);
-    --ds-blue-700: rgb(56 189 248);
-    --ds-blue-800: rgb(125 211 252);
-    --ds-blue-900: rgb(186 230 253);
-    --ds-blue-1000: rgb(224 242 254);
-
-    /* Red - Dark Mode */
-    --ds-red-100: rgb(69 10 10);
-    --ds-red-200: rgb(127 29 29);
-    --ds-red-300: rgb(153 27 27);
-    --ds-red-400: rgb(185 28 28);
-    --ds-red-500: rgb(220 38 38);
-    --ds-red-600: rgb(239 68 68);
-    --ds-red-700: rgb(248 113 113);
-    --ds-red-800: rgb(252 165 165);
-    --ds-red-900: rgb(254 202 202);
-    --ds-red-1000: rgb(254 226 226);
-
-    /* Amber - Dark Mode */
-    --ds-amber-100: rgb(69 26 3);
-    --ds-amber-200: rgb(120 53 15);
-    --ds-amber-300: rgb(146 64 14);
-    --ds-amber-400: rgb(180 83 9);
-    --ds-amber-500: rgb(217 119 6);
-    --ds-amber-600: rgb(245 158 11);
-    --ds-amber-700: rgb(251 191 36);
-    --ds-amber-800: rgb(252 211 77);
-    --ds-amber-900: rgb(253 230 138);
-    --ds-amber-1000: rgb(254 243 199);
-
-    /* Green - Dark Mode */
-    --ds-green-100: rgb(5 46 22);
-    --ds-green-200: rgb(20 83 45);
-    --ds-green-300: rgb(22 101 52);
-    --ds-green-400: rgb(21 128 61);
-    --ds-green-500: rgb(22 163 74);
-    --ds-green-600: rgb(34 197 94);
-    --ds-green-700: rgb(74 222 128);
-    --ds-green-800: rgb(134 239 172);
-    --ds-green-900: rgb(187 247 208);
-    --ds-green-1000: rgb(220 252 231);
-
-    /* Teal - Dark Mode */
-    --ds-teal-100: rgb(4 47 46);
-    --ds-teal-200: rgb(19 78 74);
-    --ds-teal-300: rgb(17 94 89);
-    --ds-teal-400: rgb(15 118 110);
-    --ds-teal-500: rgb(13 148 136);
-    --ds-teal-600: rgb(20 184 166);
-    --ds-teal-700: rgb(45 212 191);
-    --ds-teal-800: rgb(94 234 212);
-    --ds-teal-900: rgb(153 246 228);
-    --ds-teal-1000: rgb(204 251 241);
-
-    /* Purple - Dark Mode */
-    --ds-purple-100: rgb(59 7 100);
-    --ds-purple-200: rgb(88 28 135);
-    --ds-purple-300: rgb(107 33 168);
-    --ds-purple-400: rgb(126 34 206);
-    --ds-purple-500: rgb(147 51 234);
-    --ds-purple-600: rgb(168 85 247);
-    --ds-purple-700: rgb(192 132 252);
-    --ds-purple-800: rgb(216 180 254);
-    --ds-purple-900: rgb(233 213 255);
-    --ds-purple-1000: rgb(243 232 255);
-
-    /* Pink - Dark Mode */
-    --ds-pink-100: rgb(80 7 36);
-    --ds-pink-200: rgb(131 24 67);
-    --ds-pink-300: rgb(157 23 77);
-    --ds-pink-400: rgb(190 24 93);
-    --ds-pink-500: rgb(219 39 119);
-    --ds-pink-600: rgb(236 72 153);
-    --ds-pink-700: rgb(244 114 182);
-    --ds-pink-800: rgb(249 168 212);
-    --ds-pink-900: rgb(251 207 232);
-    --ds-pink-1000: rgb(252 231 243);
-
-    /* Shadows - Dark Mode */
-    --ds-shadow-small: 0 0 0 1px rgba(255, 255, 255, 0.07), 0 2px 4px rgba(0, 0, 0, 0.3), 0 12px 24px rgba(0, 0, 0, 0.3);
-    --ds-shadow-medium: 0 0 0 1px rgba(255, 255, 255, 0.07), 0 4px 8px rgba(0, 0, 0, 0.4), 0 24px 48px rgba(0, 0, 0, 0.4);
-    --ds-shadow-large: 0 0 0 1px rgba(255, 255, 255, 0.07), 0 8px 16px rgba(0, 0, 0, 0.5), 0 48px 96px rgba(0, 0, 0, 0.5);
-  }
-}
-
-/* Dark mode: applies when .dark class is present (overrides system preference) */
 .dark {
-  --background: 0 0% 3.9%;
-  --foreground: 0 0% 98%;
-  --card: 0 0% 3.9%;
-  --card-foreground: 0 0% 98%;
-  --popover: 0 0% 3.9%;
-  --popover-foreground: 0 0% 98%;
-  --primary: 0 0% 98%;
-  --primary-foreground: 0 0% 9%;
-  --secondary: 0 0% 14.9%;
-  --secondary-foreground: 0 0% 98%;
-  --muted: 0 0% 14.9%;
-  --muted-foreground: 0 0% 63.9%;
-  --accent: 0 0% 14.9%;
-  --accent-foreground: 0 0% 98%;
-  --destructive: 0 62.8% 30.6%;
-  --destructive-foreground: 0 0% 98%;
-  --border: 0 0% 14.9%;
-  --input: 0 0% 14.9%;
-  --ring: 0 0% 83.1%;
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
 
   /* Geist Design System Colors - Dark Mode */
   /* Backgrounds */
@@ -324,17 +223,6 @@
   --ds-gray-900: rgb(245 245 245);
   --ds-gray-1000: rgb(255 255 255);
 
-  /* Gray Alpha (with transparency) */
-  --ds-gray-alpha-100: rgb(255 255 255 / 0.02);
-  --ds-gray-alpha-200: rgb(255 255 255 / 0.04);
-  --ds-gray-alpha-300: rgb(255 255 255 / 0.08);
-  --ds-gray-alpha-400: rgb(255 255 255 / 0.12);
-  --ds-gray-alpha-500: rgb(255 255 255 / 0.3);
-  --ds-gray-alpha-600: rgb(255 255 255 / 0.5);
-  --ds-gray-alpha-700: rgb(255 255 255 / 0.6);
-  --ds-gray-alpha-800: rgb(255 255 255 / 0.7);
-  --ds-gray-alpha-900: rgb(255 255 255 / 0.9);
-
   /* Blue - Dark Mode */
   --ds-blue-100: rgb(8 47 73);
   --ds-blue-200: rgb(12 74 110);
@@ -383,18 +271,6 @@
   --ds-green-900: rgb(187 247 208);
   --ds-green-1000: rgb(220 252 231);
 
-  /* Teal - Dark Mode */
-  --ds-teal-100: rgb(4 47 46);
-  --ds-teal-200: rgb(19 78 74);
-  --ds-teal-300: rgb(17 94 89);
-  --ds-teal-400: rgb(15 118 110);
-  --ds-teal-500: rgb(13 148 136);
-  --ds-teal-600: rgb(20 184 166);
-  --ds-teal-700: rgb(45 212 191);
-  --ds-teal-800: rgb(94 234 212);
-  --ds-teal-900: rgb(153 246 228);
-  --ds-teal-1000: rgb(204 251 241);
-
   /* Purple - Dark Mode */
   --ds-purple-100: rgb(59 7 100);
   --ds-purple-200: rgb(88 28 135);
@@ -407,17 +283,17 @@
   --ds-purple-900: rgb(233 213 255);
   --ds-purple-1000: rgb(243 232 255);
 
-  /* Pink - Dark Mode */
-  --ds-pink-100: rgb(80 7 36);
-  --ds-pink-200: rgb(131 24 67);
-  --ds-pink-300: rgb(157 23 77);
-  --ds-pink-400: rgb(190 24 93);
-  --ds-pink-500: rgb(219 39 119);
-  --ds-pink-600: rgb(236 72 153);
-  --ds-pink-700: rgb(244 114 182);
-  --ds-pink-800: rgb(249 168 212);
-  --ds-pink-900: rgb(251 207 232);
-  --ds-pink-1000: rgb(252 231 243);
+  /* Teal - Dark Mode */
+  --ds-teal-100: rgb(4 47 46);
+  --ds-teal-200: rgb(19 78 74);
+  --ds-teal-300: rgb(17 94 89);
+  --ds-teal-400: rgb(15 118 110);
+  --ds-teal-500: rgb(13 148 136);
+  --ds-teal-600: rgb(20 184 166);
+  --ds-teal-700: rgb(45 212 191);
+  --ds-teal-800: rgb(94 234 212);
+  --ds-teal-900: rgb(153 246 228);
+  --ds-teal-1000: rgb(204 251 241);
 
   /* Shadows - Dark Mode */
   --ds-shadow-small: 0 0 0 1px rgba(255, 255, 255, 0.07), 0 2px 4px rgba(0, 0, 0, 0.3), 0 12px 24px rgba(0, 0, 0, 0.3);
@@ -425,41 +301,137 @@
   --ds-shadow-large: 0 0 0 1px rgba(255, 255, 255, 0.07), 0 8px 16px rgba(0, 0, 0, 0.5), 0 48px 96px rgba(0, 0, 0, 0.5);
 }
 
-@theme {
-  /* Allow Tailwind's default color palette while also defining custom colors */
-  --color-background: hsl(var(--background));
-  --color-foreground: hsl(var(--foreground));
-  --color-card: hsl(var(--card));
-  --color-card-foreground: hsl(var(--card-foreground));
-  --color-popover: hsl(var(--popover));
-  --color-popover-foreground: hsl(var(--popover-foreground));
-  --color-primary: hsl(var(--primary));
-  --color-primary-foreground: hsl(var(--primary-foreground));
-  --color-secondary: hsl(var(--secondary));
-  --color-secondary-foreground: hsl(var(--secondary-foreground));
-  --color-muted: hsl(var(--muted));
-  --color-muted-foreground: hsl(var(--muted-foreground));
-  --color-accent: hsl(var(--accent));
-  --color-accent-foreground: hsl(var(--accent-foreground));
-  --color-destructive: hsl(var(--destructive));
-  --color-destructive-foreground: hsl(var(--destructive-foreground));
-  --color-border: hsl(var(--border));
-  --color-input: hsl(var(--input));
-  --color-ring: hsl(var(--ring));
-
-  --radius-sm: 0.375rem;
-  --radius: calc(var(--radius));
-  --radius-md: calc(var(--radius));
-  --radius-lg: 0.75rem;
-  --radius-xl: 1rem;
+/* System dark mode preference (when no explicit light/dark class is set) */
+@media (prefers-color-scheme: dark) {
+  :root:not(.light) {
+    --background: oklch(0.145 0 0);
+    --foreground: oklch(0.985 0 0);
+    --card: oklch(0.205 0 0);
+    --card-foreground: oklch(0.985 0 0);
+    --popover: oklch(0.205 0 0);
+    --popover-foreground: oklch(0.985 0 0);
+    --primary: oklch(0.922 0 0);
+    --primary-foreground: oklch(0.205 0 0);
+    --secondary: oklch(0.269 0 0);
+    --secondary-foreground: oklch(0.985 0 0);
+    --muted: oklch(0.269 0 0);
+    --muted-foreground: oklch(0.708 0 0);
+    --accent: oklch(0.269 0 0);
+    --accent-foreground: oklch(0.985 0 0);
+    --destructive: oklch(0.704 0.191 22.216);
+    --border: oklch(1 0 0 / 10%);
+    --input: oklch(1 0 0 / 15%);
+    --ring: oklch(0.556 0 0);
+    --chart-1: oklch(0.488 0.243 264.376);
+    --chart-2: oklch(0.696 0.17 162.48);
+    --chart-3: oklch(0.769 0.188 70.08);
+    --chart-4: oklch(0.627 0.265 303.9);
+    --chart-5: oklch(0.645 0.246 16.439);
+    --sidebar: oklch(0.205 0 0);
+    --sidebar-foreground: oklch(0.985 0 0);
+    --sidebar-primary: oklch(0.488 0.243 264.376);
+    --sidebar-primary-foreground: oklch(0.985 0 0);
+    --sidebar-accent: oklch(0.269 0 0);
+    --sidebar-accent-foreground: oklch(0.985 0 0);
+    --sidebar-border: oklch(1 0 0 / 10%);
+    --sidebar-ring: oklch(0.556 0 0);
+
+    /* Geist Design System Colors - Dark Mode (same as .dark) */
+    --ds-background-100: rgb(0 0 0);
+    --ds-background-200: rgb(10 10 10);
+    --ds-gray-100: rgb(17 17 17);
+    --ds-gray-200: rgb(23 23 23);
+    --ds-gray-300: rgb(41 41 41);
+    --ds-gray-400: rgb(64 64 64);
+    --ds-gray-500: rgb(115 115 115);
+    --ds-gray-600: rgb(163 163 163);
+    --ds-gray-700: rgb(212 212 212);
+    --ds-gray-800: rgb(229 229 229);
+    --ds-gray-900: rgb(245 245 245);
+    --ds-gray-1000: rgb(255 255 255);
+    --ds-blue-100: rgb(8 47 73);
+    --ds-blue-200: rgb(12 74 110);
+    --ds-blue-300: rgb(7 89 133);
+    --ds-blue-400: rgb(3 105 161);
+    --ds-blue-500: rgb(2 132 199);
+    --ds-blue-600: rgb(14 165 233);
+    --ds-blue-700: rgb(56 189 248);
+    --ds-blue-800: rgb(125 211 252);
+    --ds-blue-900: rgb(186 230 253);
+    --ds-blue-1000: rgb(224 242 254);
+    --ds-red-100: rgb(69 10 10);
+    --ds-red-200: rgb(127 29 29);
+    --ds-red-300: rgb(153 27 27);
+    --ds-red-400: rgb(185 28 28);
+    --ds-red-500: rgb(220 38 38);
+    --ds-red-600: rgb(239 68 68);
+    --ds-red-700: rgb(248 113 113);
+    --ds-red-800: rgb(252 165 165);
+    --ds-red-900: rgb(254 202 202);
+    --ds-red-1000: rgb(254 226 226);
+    --ds-amber-100: rgb(69 26 3);
+    --ds-amber-200: rgb(120 53 15);
+    --ds-amber-300: rgb(146 64 14);
+    --ds-amber-400: rgb(180 83 9);
+    --ds-amber-500: rgb(217 119 6);
+    --ds-amber-600: rgb(245 158 11);
+    --ds-amber-700: rgb(251 191 36);
+    --ds-amber-800: rgb(252 211 77);
+    --ds-amber-900: rgb(253 230 138);
+    --ds-amber-1000: rgb(254 243 199);
+    --ds-green-100: rgb(5 46 22);
+    --ds-green-200: rgb(20 83 45);
+    --ds-green-300: rgb(22 101 52);
+    --ds-green-400: rgb(21 128 61);
+    --ds-green-500: rgb(22 163 74);
+    --ds-green-600: rgb(34 197 94);
+    --ds-green-700: rgb(74 222 128);
+    --ds-green-800: rgb(134 239 172);
+    --ds-green-900: rgb(187 247 208);
+    --ds-green-1000: rgb(220 252 231);
+    --ds-purple-100: rgb(59 7 100);
+    --ds-purple-200: rgb(88 28 135);
+    --ds-purple-300: rgb(107 33 168);
+    --ds-purple-400: rgb(126 34 206);
+    --ds-purple-500: rgb(147 51 234);
+    --ds-purple-600: rgb(168 85 247);
+    --ds-purple-700: rgb(192 132 252);
+    --ds-purple-800: rgb(216 180 254);
+    --ds-purple-900: rgb(233 213 255);
+    --ds-purple-1000: rgb(243 232 255);
+    --ds-teal-100: rgb(4 47 46);
+    --ds-teal-200: rgb(19 78 74);
+    --ds-teal-300: rgb(17 94 89);
+    --ds-teal-400: rgb(15 118 110);
+    --ds-teal-500: rgb(13 148 136);
+    --ds-teal-600: rgb(20 184 166);
+    --ds-teal-700: rgb(45 212 191);
+    --ds-teal-800: rgb(94 234 212);
+    --ds-teal-900: rgb(153 246 228);
+    --ds-teal-1000: rgb(204 251 241);
+    --ds-shadow-small: 0 0 0 1px rgba(255, 255, 255, 0.07), 0 2px 4px rgba(0, 0, 0, 0.3), 0 12px 24px rgba(0, 0, 0, 0.3);
+    --ds-shadow-medium: 0 0 0 1px rgba(255, 255, 255, 0.07), 0 4px 8px rgba(0, 0, 0, 0.4), 0 24px 48px rgba(0, 0, 0, 0.4);
+    --ds-shadow-large: 0 0 0 1px rgba(255, 255, 255, 0.07), 0 8px 16px rgba(0, 0, 0, 0.5), 0 48px 96px rgba(0, 0, 0, 0.5);
+  }
 }
 
-* {
-  border-color: hsl(var(--border));
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground overscroll-none;
+  }
+  html {
+    @apply overscroll-none;
+  }
 }
 
-body {
-  background: hsl(var(--background));
-  color: hsl(var(--foreground));
-  font-feature-settings: "rlig" 1, "calt" 1;
+@keyframes gradient {
+  0%, 100% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
 }
diff --git a/packages/web/src/app/layout-client.tsx b/packages/web/src/app/layout-client.tsx
index 0dd593f5b..78e46b99c 100644
--- a/packages/web/src/app/layout-client.tsx
+++ b/packages/web/src/app/layout-client.tsx
@@ -6,7 +6,7 @@ import { useRouter, useSearchParams } from 'next/navigation';
 import { ThemeProvider } from 'next-themes';
 import { useEffect } from 'react';
 import { ConnectionStatus } from '@/components/display-utils/connection-status';
-import { SettingsSidebar } from '@/components/settings-sidebar';
+import { SettingsDropdown } from '@/components/settings-dropdown';
 import { Toaster } from '@/components/ui/sonner';
 import { buildUrlWithConfig, useQueryParamConfig } from '@/lib/config';
 import { Logo } from '../icons/logo';
@@ -49,19 +49,34 @@ export function LayoutClient({ children }: LayoutClientProps) {
         let targetUrl: string;
         if (stepId) {
           // Open run with step sidebar
-          targetUrl = buildUrlWithConfig(`/run/${runId}`, config, {
-            sidebar: 'step',
-            stepId,
-          });
+          targetUrl = buildUrlWithConfig(
+            `/run/${runId}`,
+            config,
+            {
+              sidebar: 'step',
+              stepId,
+            },
+            searchParams
+          );
         } else if (hookId) {
           // Open run with hook sidebar
-          targetUrl = buildUrlWithConfig(`/run/${runId}`, config, {
-            sidebar: 'hook',
-            hookId,
-          });
+          targetUrl = buildUrlWithConfig(
+            `/run/${runId}`,
+            config,
+            {
+              sidebar: 'hook',
+              hookId,
+            },
+            searchParams
+          );
         } else {
           // Just open the run
-          targetUrl = buildUrlWithConfig(`/run/${runId}`, config);
+          targetUrl = buildUrlWithConfig(
+            `/run/${runId}`,
+            config,
+            undefined,
+            searchParams
+          );
         }
         router.push(targetUrl);
         return;
@@ -77,40 +92,70 @@ export function LayoutClient({ children }: LayoutClientProps) {
 
     let targetUrl: string;
     if (resource === 'run') {
-      targetUrl = buildUrlWithConfig(`/run/${id}`, config);
+      targetUrl = buildUrlWithConfig(
+        `/run/${id}`,
+        config,
+        undefined,
+        searchParams
+      );
     } else if (resource === 'step' && runId) {
-      targetUrl = buildUrlWithConfig(`/run/${runId}`, config, {
-        sidebar: 'step',
-        stepId: id,
-      });
+      targetUrl = buildUrlWithConfig(
+        `/run/${runId}`,
+        config,
+        {
+          sidebar: 'step',
+          stepId: id,
+        },
+        searchParams
+      );
     } else if (resource === 'stream' && runId) {
-      targetUrl = buildUrlWithConfig(`/run/${runId}`, config, {
-        sidebar: 'stream',
-        streamId: id,
-      });
+      targetUrl = buildUrlWithConfig(
+        `/run/${runId}`,
+        config,
+        {
+          sidebar: 'stream',
+          streamId: id,
+        },
+        searchParams
+      );
     } else if (resource === 'event' && runId) {
-      targetUrl = buildUrlWithConfig(`/run/${runId}`, config, {
-        sidebar: 'event',
-        eventId: id,
-      });
+      targetUrl = buildUrlWithConfig(
+        `/run/${runId}`,
+        config,
+        {
+          sidebar: 'event',
+          eventId: id,
+        },
+        searchParams
+      );
     } else if (resource === 'hook' && runId) {
-      targetUrl = buildUrlWithConfig(`/run/${runId}`, config, {
-        sidebar: 'hook',
-        hookId: id,
-      });
+      targetUrl = buildUrlWithConfig(
+        `/run/${runId}`,
+        config,
+        {
+          sidebar: 'hook',
+          hookId: id,
+        },
+        searchParams
+      );
     } else if (resource === 'hook' && !runId) {
       // Hook without runId - go to home page with hook sidebar
-      targetUrl = buildUrlWithConfig('/', config, {
-        sidebar: 'hook',
-        hookId: id,
-      });
+      targetUrl = buildUrlWithConfig(
+        '/',
+        config,
+        {
+          sidebar: 'hook',
+          hookId: id,
+        },
+        searchParams
+      );
     } else {
       console.warn(`Can't deep-link to ${resource} ${id}.`);
       return;
     }
 
     router.push(targetUrl);
-  }, [resource, id, runId, stepId, hookId, router, config]);
+  }, [resource, id, runId, stepId, hookId, router, config, searchParams]);
 
   return (
     <ThemeProvider
@@ -134,7 +179,7 @@ export function LayoutClient({ children }: LayoutClientProps) {
                 </Link>
                 <div className="ml-auto flex items-center gap-2">
                   <ConnectionStatus config={config} />
-                  <SettingsSidebar />
+                  <SettingsDropdown />
                 </div>
               </div>
             </div>
diff --git a/packages/web/src/app/page.tsx b/packages/web/src/app/page.tsx
index 4d52e3400..c78dd96a7 100644
--- a/packages/web/src/app/page.tsx
+++ b/packages/web/src/app/page.tsx
@@ -18,10 +18,17 @@ export default function Home() {
 
   const handleRunClick = (runId: string, streamId?: string) => {
     if (!streamId) {
-      router.push(buildUrlWithConfig(`/run/${runId}`, config));
+      router.push(
+        buildUrlWithConfig(`/run/${runId}`, config, undefined, searchParams)
+      );
     } else {
       router.push(
-        buildUrlWithConfig(`/run/${runId}/streams/${streamId}`, config)
+        buildUrlWithConfig(
+          `/run/${runId}/streams/${streamId}`,
+          config,
+          undefined,
+          searchParams
+        )
       );
     }
   };
@@ -29,13 +36,20 @@ export default function Home() {
   const handleHookSelect = (hookId: string, runId?: string) => {
     if (hookId) {
       router.push(
-        buildUrlWithConfig(`/run/${runId}`, config, {
-          sidebar: 'hook',
-          hookId,
-        })
+        buildUrlWithConfig(
+          `/run/${runId}`,
+          config,
+          {
+            sidebar: 'hook',
+            hookId,
+          },
+          searchParams
+        )
       );
     } else {
-      router.push(buildUrlWithConfig(`/run/${runId}`, config));
+      router.push(
+        buildUrlWithConfig(`/run/${runId}`, config, undefined, searchParams)
+      );
     }
   };
 
diff --git a/packages/web/src/components/display-utils/relative-time.tsx b/packages/web/src/components/display-utils/relative-time.tsx
index aa89741c0..82466716f 100644
--- a/packages/web/src/components/display-utils/relative-time.tsx
+++ b/packages/web/src/components/display-utils/relative-time.tsx
@@ -48,7 +48,7 @@ export function RelativeTime({
     <Tooltip>
       <TooltipTrigger asChild>
         <span className={`${className} cursor-help border-b border-dotted`}>
-          Last refreshed: {relativeTime}
+          {relativeTime}
         </span>
       </TooltipTrigger>
       <TooltipContent>
diff --git a/packages/web/src/components/display-utils/status-badge.tsx b/packages/web/src/components/display-utils/status-badge.tsx
index 09fe7fe99..dbffea309 100644
--- a/packages/web/src/components/display-utils/status-badge.tsx
+++ b/packages/web/src/components/display-utils/status-badge.tsx
@@ -6,6 +6,7 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from '@/components/ui/tooltip';
+import { cn } from '@/lib/utils';
 
 interface StatusBadgeProps {
   status: WorkflowRun['status'] | Step['status'];
@@ -17,19 +18,19 @@ export function StatusBadge({ status, context, className }: StatusBadgeProps) {
   const getStatusClasses = () => {
     switch (status) {
       case 'running':
-        return 'text-blue-600 dark:text-blue-400';
+        return 'text-blue-600 dark:text-blue-600 font-semibold';
       case 'completed':
-        return 'text-green-600 dark:text-green-400';
+        return 'text-green-600 dark:text-green-600 font-semibold';
       case 'failed':
-        return 'text-red-600 dark:text-red-400';
+        return 'text-red-600 dark:text-red-600 font-semibold';
       case 'cancelled':
-        return 'text-yellow-600 dark:text-yellow-400';
+        return 'text-yellow-600 dark:text-yellow-600 font-semibold';
       case 'pending':
-        return 'text-gray-600 dark:text-gray-400';
+        return 'text-gray-600 dark:text-gray-600 font-semibold';
       case 'paused':
-        return 'text-orange-600 dark:text-orange-400';
+        return 'text-orange-600 dark:text-orange-600 font-semibold';
       default:
-        return 'text-gray-500 dark:text-gray-400';
+        return 'text-gray-600 dark:text-gray-600 font-semibold';
     }
   };
 
@@ -46,7 +47,11 @@ export function StatusBadge({ status, context, className }: StatusBadgeProps) {
       <Tooltip>
         <TooltipTrigger asChild>
           <span
-            className={`${className} border-b border-dotted cursor-help ${getStatusClasses()}`}
+            className={cn(
+              'border-b border-dotted cursor-help',
+              getStatusClasses(),
+              className
+            )}
           >
             {status}
           </span>
@@ -60,5 +65,5 @@ export function StatusBadge({ status, context, className }: StatusBadgeProps) {
     );
   }
 
-  return <span className={`${className} ${getStatusClasses()}`}>{status}</span>;
+  return <span className={cn(getStatusClasses(), className)}>{status}</span>;
 }
diff --git a/packages/web/src/components/display-utils/table-skeleton.tsx b/packages/web/src/components/display-utils/table-skeleton.tsx
index 183c41562..7eb3dd00b 100644
--- a/packages/web/src/components/display-utils/table-skeleton.tsx
+++ b/packages/web/src/components/display-utils/table-skeleton.tsx
@@ -15,10 +15,10 @@ export function TableSkeleton({
   return (
     <div className="w-full">
       <div className="space-y-3" style={{ minHeight: '512px' }}>
-        <Skeleton className="h-[40px] p-1 w-full" />
+        <Skeleton className="h-10 p-1 w-full" />
         <div className="border-b border-gray-alpha-400 w-full"></div>
         {Array.from({ length: rows }, (_, i) => (
-          <div key={`skeleton-row-${i}`} className="flex gap-4 py-3">
+          <div key={`skeleton-row-${i}`} className="flex gap-4 py-2">
             <Skeleton className="h-4 w-1/4" />
             <Skeleton className="h-4 w-1/4" />
             <Skeleton className="h-4 w-1/6" />
diff --git a/packages/web/src/components/hooks-table.tsx b/packages/web/src/components/hooks-table.tsx
index 0da715da4..4500279fa 100644
--- a/packages/web/src/components/hooks-table.tsx
+++ b/packages/web/src/components/hooks-table.tsx
@@ -214,7 +214,8 @@ export function HooksTable({
   return (
     <div>
       <div className="flex items-center justify-between">
-        <div className="flex items-center justify-between">
+        <div className="flex items-end gap-2">
+          <p className="text-sm text-muted-foreground">Last refreshed</p>
           {lastRefreshTime && (
             <RelativeTime
               date={lastRefreshTime}
@@ -260,11 +261,11 @@ export function HooksTable({
           <Table>
             <TableHeader>
               <TableRow>
-                <TableHead>Hook ID</TableHead>
-                <TableHead>Run ID</TableHead>
-                <TableHead>Token</TableHead>
-                <TableHead>Created</TableHead>
-                <TableHead>Invocations</TableHead>
+                <TableHead className="h-10">Hook ID</TableHead>
+                <TableHead className="h-10">Run ID</TableHead>
+                <TableHead className="h-10">Token</TableHead>
+                <TableHead className="h-10">Created</TableHead>
+                <TableHead className="h-10">Invocations</TableHead>
               </TableRow>
             </TableHeader>
             <TableBody>
@@ -275,23 +276,25 @@ export function HooksTable({
                   onClick={() => onHookClick(hook.hookId, hook.runId)}
                   data-selected={hook.hookId === selectedHookId}
                 >
-                  <TableCell className="font-mono text-xs">
+                  <TableCell className="font-mono text-xs py-2">
                     {hook.hookId}
                   </TableCell>
-                  <TableCell className="font-mono text-xs">
+                  <TableCell className="font-mono text-xs py-2">
                     {hook.runId}
                   </TableCell>
-                  <TableCell className="font-mono text-xs">
+                  <TableCell className="font-mono text-xs py-2">
                     {hook.token.substring(0, 12)}...
                   </TableCell>
-                  <TableCell>
+                  <TableCell className="py-2">
                     {hook.createdAt ? (
                       <RelativeTime date={hook.createdAt} />
                     ) : (
                       '-'
                     )}
                   </TableCell>
-                  <TableCell>{renderInvocationCount(hook)}</TableCell>
+                  <TableCell className="py-2">
+                    {renderInvocationCount(hook)}
+                  </TableCell>
                 </TableRow>
               ))}
             </TableBody>
diff --git a/packages/web/src/components/run-detail-view.tsx b/packages/web/src/components/run-detail-view.tsx
index d8d51061f..d034cf635 100644
--- a/packages/web/src/components/run-detail-view.tsx
+++ b/packages/web/src/components/run-detail-view.tsx
@@ -9,7 +9,7 @@ import {
   WorkflowTraceViewer,
 } from '@workflow/web-shared';
 import { AlertCircle, Loader2 } from 'lucide-react';
-import { useRouter } from 'next/navigation';
+import { useRouter, useSearchParams } from 'next/navigation';
 import { useMemo, useState } from 'react';
 import { toast } from 'sonner';
 import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
@@ -47,6 +47,7 @@ export function RunDetailView({
   selectedId: _selectedId,
 }: RunDetailViewProps) {
   const router = useRouter();
+  const searchParams = useSearchParams();
   const [cancelling, setCancelling] = useState(false);
   const [rerunning, setRerunning] = useState(false);
   const [showCancelDialog, setShowCancelDialog] = useState(false);
@@ -107,7 +108,9 @@ export function RunDetailView({
         description: `Run ID: ${newRunId}`,
       });
       // Navigate to the new run
-      router.push(buildUrlWithConfig(`/run/${newRunId}`, config));
+      router.push(
+        buildUrlWithConfig(`/run/${newRunId}`, config, undefined, searchParams)
+      );
     } catch (err) {
       console.error('Failed to re-run workflow:', err);
       toast.error('Failed to start new run', {
@@ -208,7 +211,9 @@ export function RunDetailView({
         style={{ height: 'calc(100vh - 7rem)' }}
       >
         <div className="flex-none space-y-6">
-          <BackLink href={buildUrlWithConfig('/', config)} />
+          <BackLink
+            href={buildUrlWithConfig('/', config, undefined, searchParams)}
+          />
 
           {/* Run Overview Header */}
           <div className="space-y-4 pb-6 border-b">
diff --git a/packages/web/src/components/runs-table.tsx b/packages/web/src/components/runs-table.tsx
index b5f14702c..42c0ae7a8 100644
--- a/packages/web/src/components/runs-table.tsx
+++ b/packages/web/src/components/runs-table.tsx
@@ -142,7 +142,8 @@ export function RunsTable({ config, onRunClick }: RunsTableProps) {
   return (
     <div>
       <div className="flex items-center justify-between">
-        <div className="flex items-end">
+        <div className="flex items-end gap-2">
+          <p className="text-sm text-muted-foreground">Last refreshed</p>
           {lastRefreshTime && (
             <RelativeTime
               date={lastRefreshTime}
@@ -296,11 +297,11 @@ export function RunsTable({ config, onRunClick }: RunsTableProps) {
           <Table className="mt-4">
             <TableHeader>
               <TableRow>
-                <TableHead>Workflow</TableHead>
-                <TableHead>Run ID</TableHead>
-                <TableHead>Status</TableHead>
-                <TableHead>Started</TableHead>
-                <TableHead>Completed</TableHead>
+                <TableHead className="h-10">Workflow</TableHead>
+                <TableHead className="h-10">Run ID</TableHead>
+                <TableHead className="h-10">Status</TableHead>
+                <TableHead className="h-10">Started</TableHead>
+                <TableHead className="h-10">Completed</TableHead>
               </TableRow>
             </TableHeader>
             <TableBody>
@@ -310,23 +311,23 @@ export function RunsTable({ config, onRunClick }: RunsTableProps) {
                   className="cursor-pointer group relative"
                   onClick={() => onRunClick(run.runId)}
                 >
-                  <TableCell>
+                  <TableCell className="py-2">
                     {parseWorkflowName(run.workflowName)?.shortName || '?'}
                   </TableCell>
-                  <TableCell className="font-mono text-xs">
+                  <TableCell className="font-mono text-xs py-2">
                     {run.runId}
                   </TableCell>
-                  <TableCell>
+                  <TableCell className="py-2">
                     <StatusBadge status={run.status} context={run} />
                   </TableCell>
-                  <TableCell>
+                  <TableCell className="py-2">
                     {run.startedAt ? (
                       <RelativeTime date={run.startedAt} />
                     ) : (
                       '-'
                     )}
                   </TableCell>
-                  <TableCell>
+                  <TableCell className="py-2">
                     {run.completedAt ? (
                       <RelativeTime date={run.completedAt} />
                     ) : (
diff --git a/packages/web/src/components/settings-dropdown.tsx b/packages/web/src/components/settings-dropdown.tsx
new file mode 100644
index 000000000..b93dfa60f
--- /dev/null
+++ b/packages/web/src/components/settings-dropdown.tsx
@@ -0,0 +1,92 @@
+'use client';
+
+import { Monitor, Moon, Settings, Sun } from 'lucide-react';
+import { usePathname, useRouter, useSearchParams } from 'next/navigation';
+import { useState } from 'react';
+import { Button } from '@/components/ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { SegmentedControl } from '@/components/ui/segmented-control';
+import { SettingsSidebar } from './settings-sidebar';
+
+// Controlled version that doesn't show the trigger button
+function SettingsSidebarDialog({
+  open,
+  onOpenChange,
+}: {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}) {
+  return <SettingsSidebar open={open} onOpenChange={onOpenChange} />;
+}
+
+export function SettingsDropdown() {
+  const router = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  const [settingsOpen, setSettingsOpen] = useState(false);
+  const currentTheme = searchParams.get('theme') || 'system';
+
+  const updateTheme = (theme: string) => {
+    const params = new URLSearchParams(searchParams.toString());
+    if (theme === 'system') {
+      params.delete('theme');
+    } else {
+      params.set('theme', theme);
+    }
+    const queryString = params.toString();
+    const newUrl = queryString ? `${pathname}?${queryString}` : pathname;
+    router.push(newUrl);
+  };
+
+  return (
+    <>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button variant="outline" size="icon" className="rounded-full">
+            <Settings className="h-[1.2rem] w-[1.2rem]" />
+            <span className="sr-only">Settings</span>
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end" className="w-56">
+          <div className="px-2 py-1.5 flex items-center gap-3">
+            <DropdownMenuLabel className="px-0 mb-0">Theme</DropdownMenuLabel>
+            <SegmentedControl
+              value={currentTheme}
+              onValueChange={updateTheme}
+              options={[
+                {
+                  value: 'system',
+                  icon: <Monitor className="h-4 w-4" />,
+                },
+                {
+                  value: 'light',
+                  icon: <Sun className="h-4 w-4" />,
+                },
+                {
+                  value: 'dark',
+                  icon: <Moon className="h-4 w-4" />,
+                },
+              ]}
+            />
+          </div>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem onSelect={() => setSettingsOpen(true)}>
+            <span>Configuration</span>
+            <Settings className="ml-auto h-4 w-4" />
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+      <SettingsSidebarDialog
+        open={settingsOpen}
+        onOpenChange={setSettingsOpen}
+      />
+    </>
+  );
+}
diff --git a/packages/web/src/components/settings-sidebar.tsx b/packages/web/src/components/settings-sidebar.tsx
index 2099f36d6..ec1cdee95 100644
--- a/packages/web/src/components/settings-sidebar.tsx
+++ b/packages/web/src/components/settings-sidebar.tsx
@@ -21,11 +21,21 @@ import {
   type WorldConfig,
 } from '@/lib/config-world';
 
-export function SettingsSidebar() {
+interface SettingsSidebarProps {
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+}
+
+export function SettingsSidebar({
+  open: controlledOpen,
+  onOpenChange,
+}: SettingsSidebarProps = {}) {
   const config = useQueryParamConfig();
   const updateConfig = useUpdateConfigQueryParams();
 
-  const [isOpen, setIsOpen] = useState(false);
+  const [internalOpen, setInternalOpen] = useState(false);
+  const isOpen = controlledOpen !== undefined ? controlledOpen : internalOpen;
+  const setIsOpen = onOpenChange || setInternalOpen;
   const [localConfig, setLocalConfig] = useState<WorldConfig>(config);
   const [errors, setErrors] = useState<ValidationError[]>([]);
   const [isValidating, setIsValidating] = useState(false);
@@ -76,14 +86,16 @@ export function SettingsSidebar() {
 
   return (
     <>
-      <button
-        type="button"
-        onClick={() => setIsOpen(true)}
-        className="p-2 rounded-full hover:bg-accent transition-colors"
-        title="Configuration"
-      >
-        <Settings className="h-6 w-6" />
-      </button>
+      {controlledOpen === undefined && (
+        <button
+          type="button"
+          onClick={() => setIsOpen(true)}
+          className="p-2 rounded-full hover:bg-accent transition-colors"
+          title="Configuration"
+        >
+          <Settings className="h-6 w-6" />
+        </button>
+      )}
       {isOpen && (
         <>
           {/* Backdrop */}
diff --git a/packages/web/src/components/stream-detail-view.tsx b/packages/web/src/components/stream-detail-view.tsx
index 8b4bad67b..a11d3b7d5 100644
--- a/packages/web/src/components/stream-detail-view.tsx
+++ b/packages/web/src/components/stream-detail-view.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { type EnvMap, readStream } from '@workflow/web-shared';
-import { useParams } from 'next/navigation';
+import { useParams, useSearchParams } from 'next/navigation';
 import { useEffect, useRef, useState } from 'react';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { buildUrlWithConfig } from '@/lib/config';
@@ -19,6 +19,7 @@ interface Chunk {
 
 export function StreamDetailView({ env, streamId }: StreamDetailViewProps) {
   const params = useParams();
+  const searchParams = useSearchParams();
   const runId = params.runId as string | undefined;
   const [chunks, setChunks] = useState<Chunk[]>([]);
   const [isLive, setIsLive] = useState(true);
@@ -105,9 +106,10 @@ export function StreamDetailView({ env, streamId }: StreamDetailViewProps) {
   }, [env, streamId]);
 
   // Determine back link - if we have a runId, go back to the run detail page, otherwise go home
+  // Note: buildUrlWithConfig expects WorldConfig, but env is EnvMap - this may need fixing
   const backHref = runId
-    ? buildUrlWithConfig(`/run/${runId}`, env)
-    : buildUrlWithConfig('/', env);
+    ? buildUrlWithConfig(`/run/${runId}`, env as any, undefined, searchParams)
+    : buildUrlWithConfig('/', env as any, undefined, searchParams);
 
   return (
     <div className="space-y-6">
diff --git a/packages/web/src/components/ui/dropdown-menu.tsx b/packages/web/src/components/ui/dropdown-menu.tsx
new file mode 100644
index 000000000..99635132b
--- /dev/null
+++ b/packages/web/src/components/ui/dropdown-menu.tsx
@@ -0,0 +1,200 @@
+'use client';
+
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import { Check, ChevronRight, Circle } from 'lucide-react';
+import * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+const DropdownMenu = DropdownMenuPrimitive.Root;
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+
+const DropdownMenuGroup = DropdownMenuPrimitive.Group;
+
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
+
+const DropdownMenuSub = DropdownMenuPrimitive.Sub;
+
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
+
+const DropdownMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+    inset?: boolean;
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent',
+      inset && 'pl-8',
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ml-auto h-4 w-4" />
+  </DropdownMenuPrimitive.SubTrigger>
+));
+DropdownMenuSubTrigger.displayName =
+  DropdownMenuPrimitive.SubTrigger.displayName;
+
+const DropdownMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+      className
+    )}
+    {...props}
+  />
+));
+DropdownMenuSubContent.displayName =
+  DropdownMenuPrimitive.SubContent.displayName;
+
+const DropdownMenuContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        className
+      )}
+      {...props}
+    />
+  </DropdownMenuPrimitive.Portal>
+));
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
+
+const DropdownMenuItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      inset && 'pl-8',
+      className
+    )}
+    {...props}
+  />
+));
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
+
+const DropdownMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <DropdownMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      className
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.CheckboxItem>
+));
+DropdownMenuCheckboxItem.displayName =
+  DropdownMenuPrimitive.CheckboxItem.displayName;
+
+const DropdownMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Circle className="h-2 w-2 fill-current" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.RadioItem>
+));
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
+
+const DropdownMenuLabel = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Label
+    ref={ref}
+    className={cn(
+      'px-2 py-1.5 text-sm font-semibold',
+      inset && 'pl-8',
+      className
+    )}
+    {...props}
+  />
+));
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
+
+const DropdownMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Separator
+    ref={ref}
+    className={cn('-mx-1 my-1 h-px bg-muted', className)}
+    {...props}
+  />
+));
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
+
+const DropdownMenuShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn('ml-auto text-xs tracking-widest opacity-60', className)}
+      {...props}
+    />
+  );
+};
+DropdownMenuShortcut.displayName = 'DropdownMenuShortcut';
+
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+};
diff --git a/packages/web/src/components/ui/segmented-control.tsx b/packages/web/src/components/ui/segmented-control.tsx
new file mode 100644
index 000000000..fc8d641ad
--- /dev/null
+++ b/packages/web/src/components/ui/segmented-control.tsx
@@ -0,0 +1,44 @@
+'use client';
+
+import type * as React from 'react';
+import { cn } from '@/lib/utils';
+
+interface SegmentedControlProps {
+  value: string;
+  onValueChange: (value: string) => void;
+  options: Array<{ value: string; icon: React.ReactNode; label?: string }>;
+  className?: string;
+}
+
+export function SegmentedControl({
+  value,
+  onValueChange,
+  options,
+  className,
+}: SegmentedControlProps) {
+  return (
+    <div
+      className={cn(
+        'inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground',
+        className
+      )}
+    >
+      {options.map((option) => (
+        <button
+          key={option.value}
+          type="button"
+          onClick={() => onValueChange(option.value)}
+          className={cn(
+            'inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+            value === option.value
+              ? 'bg-background text-foreground shadow'
+              : 'hover:bg-background/50'
+          )}
+        >
+          {option.icon}
+          {option.label && <span className="ml-2">{option.label}</span>}
+        </button>
+      ))}
+    </div>
+  );
+}
diff --git a/packages/web/src/components/ui/tabs.tsx b/packages/web/src/components/ui/tabs.tsx
index a7a9a521d..66678a489 100644
--- a/packages/web/src/components/ui/tabs.tsx
+++ b/packages/web/src/components/ui/tabs.tsx
@@ -42,7 +42,7 @@ function TabsTrigger({
     <TabsPrimitive.Trigger
       data-slot="tabs-trigger"
       className={cn(
-        "data-[state=active]:bg-background data-[state=active]:border-input dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        'inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow',
         className
       )}
       {...props}
diff --git a/packages/web/src/lib/config.ts b/packages/web/src/lib/config.ts
index df8e6e9b7..94aeff271 100644
--- a/packages/web/src/lib/config.ts
+++ b/packages/web/src/lib/config.ts
@@ -114,10 +114,19 @@ export function getConfigParams(config: WorldConfig): URLSearchParams {
 export function buildUrlWithConfig(
   path: string,
   config: WorldConfig,
-  additionalParams?: Record<string, string>
+  additionalParams?: Record<string, string>,
+  currentSearchParams?: URLSearchParams
 ): string {
   const params = getConfigParams(config);
 
+  // Preserve theme parameter from current URL if present
+  if (currentSearchParams) {
+    const theme = currentSearchParams.get('theme');
+    if (theme) {
+      params.set('theme', theme);
+    }
+  }
+
   // Add additional params
   if (additionalParams) {
     for (const [key, value] of Object.entries(additionalParams)) {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9a9b8c4bc..b7408bab1 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -628,7 +628,7 @@ importers:
     devDependencies:
       '@nuxt/module-builder':
         specifier: 1.0.2
-        version: 1.0.2(@nuxt/cli@3.29.3(magicast@0.3.5))(@vue/compiler-core@3.5.22)(esbuild@0.25.11)(typescript@5.9.3)(vue@3.5.22(typescript@5.9.3))
+        version: 1.0.2(@nuxt/cli@3.29.3(magicast@0.3.5))(@vue/compiler-core@3.5.22)(esbuild@0.25.12)(typescript@5.9.3)(vue@3.5.22(typescript@5.9.3))
       '@nuxt/schema':
         specifier: 4.2.0
         version: 4.2.0
@@ -742,6 +742,9 @@ importers:
       '@radix-ui/react-alert-dialog':
         specifier: 1.1.5
         version: 1.1.5(@types/react-dom@19.1.9(@types/react@19.1.13))(@types/react@19.1.13)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-dropdown-menu':
+        specifier: 2.1.6
+        version: 2.1.6(@types/react-dom@19.1.9(@types/react@19.1.13))(@types/react@19.1.13)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
       '@radix-ui/react-label':
         specifier: 2.1.7
         version: 2.1.7(@types/react-dom@19.1.9(@types/react@19.1.13))(@types/react@19.1.13)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
@@ -4420,6 +4423,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-arrow@1.1.2':
+    resolution: {integrity: sha512-G+KcpzXHq24iH0uGG/pF8LyzpFJYGD4RfLjCIBfGdSLXvjLHST31RUiRVrupIBMvIppMgSzQ6l66iAxl03tdlg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-arrow@1.1.7':
     resolution: {integrity: sha512-F+M1tLhO+mlQaOWspE8Wstg+z6PwxwRd8oQ8IXceWz92kfAmalTRf0EjrouQeo7QssEPfCn05B4Ihs1K9WQ/7w==}
     peerDependencies:
@@ -4485,6 +4501,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-collection@1.1.2':
+    resolution: {integrity: sha512-9z54IEKRxIa9VityapoEYMuByaG42iSy1ZXlY2KcuLSEtq8x4987/N6m15ppoMffgZX72gER2uHe1D9Y6Unlcw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-collection@1.1.7':
     resolution: {integrity: sha512-Fh9rGN0MoI4ZFUNyfFVNU4y9LUz93u9/0K+yLgA2bwRojxM8JU1DyvvMBabnZPBgMWREAJvU2jjVzq+LrFUglw==}
     peerDependencies:
@@ -4573,6 +4602,15 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-direction@1.1.0':
+    resolution: {integrity: sha512-BUuBvgThEiAXh2DWu93XsT+a3aWrGqolGlqqw5VU1kG7p/ZH2cuDlM1sRLNnY3QcBS69UIz2mcKhMxDsdewhjg==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@radix-ui/react-direction@1.1.1':
     resolution: {integrity: sha512-1UEWRX6jnOA2y4H5WczZ44gOOjTEmlqv1uNW4GAJEO5+bauCBhv8snY65Iw5/VOS/ghKN9gr2KjnLKxrsvoMVw==}
     peerDependencies:
@@ -4608,6 +4646,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-dismissable-layer@1.1.5':
+    resolution: {integrity: sha512-E4TywXY6UsXNRhFrECa5HAvE5/4BFcGyfTyK36gP+pAW1ed7UTK4vKwdr53gAJYwqbfCWC6ATvJa3J3R/9+Qrg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-dropdown-menu@2.1.16':
     resolution: {integrity: sha512-1PLGQEynI/3OX/ftV54COn+3Sud/Mn8vALg2rWnBLnRaGtJDduNW/22XjlGgPdpcIbiQxjKtb7BkcjP00nqfJw==}
     peerDependencies:
@@ -4621,6 +4672,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-dropdown-menu@2.1.6':
+    resolution: {integrity: sha512-no3X7V5fD487wab/ZYSHXq3H37u4NVeLDKI/Ks724X/eEFSSEFYZxWgsIlr1UBeEyDaM29HM5x9p1Nv8DuTYPA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-focus-guards@1.1.1':
     resolution: {integrity: sha512-pSIwfrT1a6sIoDASCSpFwOasEwKTZWDw/iBdtnqKO7v6FeOzYJ7U53cPzYFVR3geGGXgVHaH+CdngrrAzqUGxg==}
     peerDependencies:
@@ -4652,6 +4716,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-focus-scope@1.1.2':
+    resolution: {integrity: sha512-zxwE80FCU7lcXUGWkdt6XpTTCKPitG1XKOwViTxHVKIJhZl9MvIl2dVHeZENCWD9+EdWv05wlaEkRXUykU27RA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-focus-scope@1.1.7':
     resolution: {integrity: sha512-t2ODlkXBQyn7jkl6TNaw/MtVEVvIGelJDCG41Okq/KwUsJBwQ4XVZsHAVUkK4mBv3ewiAS3PGuUWuY2BoK4ZUw==}
     peerDependencies:
@@ -4735,6 +4812,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-menu@2.1.6':
+    resolution: {integrity: sha512-tBBb5CXDJW3t2mo9WlO7r6GTmWV0F0uzHZVFmlRmYpiSK1CDU5IKojP1pm7oknpBOrFZx/YgBRW9oorPO2S/Lg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-menubar@1.1.16':
     resolution: {integrity: sha512-EB1FktTz5xRRi2Er974AUQZWg2yVBb1yjip38/lgwtCVRd3a+maUoGHN/xs9Yv8SY8QwbSEb+YrxGadVWbEutA==}
     peerDependencies:
@@ -4800,6 +4890,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-popper@1.2.2':
+    resolution: {integrity: sha512-Rvqc3nOpwseCyj/rgjlJDYAgyfw7OC1tTkKn2ivhaMGcYt8FSBlahHOZak2i3QwkRXUXgGgzeEe2RuqeEHuHgA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-popper@1.2.8':
     resolution: {integrity: sha512-0NJQ4LFFUuWkE7Oxf0htBKS6zLkkjBH+hM1uk7Ng705ReR8m/uelduy1DBo0PyBXPKVnBA6YBlU94MBGXrSBCw==}
     peerDependencies:
@@ -4826,6 +4929,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-portal@1.1.4':
+    resolution: {integrity: sha512-sn2O9k1rPFYVyKd5LAJfo96JlSGVFpa1fS6UuBJfrZadudiw5tAmru+n1x7aMRQ84qDM71Zh1+SzK5QwU0tJfA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-portal@1.1.9':
     resolution: {integrity: sha512-bpIxvq03if6UNwXZ+HTK71JLh4APvnXntDc6XOX8UVq4XQOVl7lwok0AvIl+b8zgCw3fSaVTZMpAPPagXbKmHQ==}
     peerDependencies:
@@ -4878,6 +4994,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-primitive@2.0.2':
+    resolution: {integrity: sha512-Ec/0d38EIuvDF+GZjcMU/Ze6MxntVJYO/fRlCPhCaVUyPY9WTalHJw54tp9sXeJo3tlShWpy41vQRgLRGOuz+w==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-primitive@2.1.3':
     resolution: {integrity: sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==}
     peerDependencies:
@@ -4930,6 +5059,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-roving-focus@1.1.2':
+    resolution: {integrity: sha512-zgMQWkNO169GtGqRvYrzb0Zf8NhMHS2DuEB/TiEmVnpr5OqPU3i8lfbxaAmC2J/KYuIQxyoQQ6DxepyXp61/xw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-scroll-area@1.2.10':
     resolution: {integrity: sha512-tAXIa1g3sM5CGpVT0uIbUx/U3Gs5N8T52IICuCtObaos1S8fzsrPXG5WObkQN3S6NVl6wKgPhAIiBGbWnvc97A==}
     peerDependencies:
@@ -4991,6 +5133,15 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/react-slot@1.1.2':
+    resolution: {integrity: sha512-YAKxaiGsSQJ38VzKH86/BPRC4rh+b1Jpa+JneA5LRE7skmLPNAyeG8kPJj/oo4STLvlrs8vkf/iYyc3A5stYCQ==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@radix-ui/react-slot@1.2.3':
     resolution: {integrity: sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==}
     peerDependencies:
@@ -5221,6 +5372,15 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/react-use-rect@1.1.0':
+    resolution: {integrity: sha512-0Fmkebhr6PiseyZlYAOtLS+nb7jLmpqTrJyv61Pe68MKYW6OWdRE2kI70TaYY27u7H0lajqM3hSMMLFq18Z7nQ==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@radix-ui/react-use-rect@1.1.1':
     resolution: {integrity: sha512-QTYuDesS0VtuHNNvMh+CjlKJ4LJickCMUAqjlE3+j8w+RlRpwyX3apEQKGFzbZGdo7XNG1tXa+bQqIE7HIXT2w==}
     peerDependencies:
@@ -5261,6 +5421,9 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/rect@1.1.0':
+    resolution: {integrity: sha512-A9+lCBZoaMJlVKcRBz2YByCG+Cp2t6nAnMnNba+XiWxnj6r4JUFqfsgwocMBZU9LPtdxC6wB56ySYpc7LQIoJg==}
+
   '@radix-ui/rect@1.1.1':
     resolution: {integrity: sha512-HPwpGIzkl28mWyZqG52jiqDJ12waP11Pa1lGoiyUkIEuMLBP0oeK/C89esbXrxsky5we7dfd8U58nm0SgAWpVw==}
 
@@ -14495,7 +14658,7 @@ snapshots:
     transitivePeerDependencies:
       - magicast
 
-  '@nuxt/module-builder@1.0.2(@nuxt/cli@3.29.3(magicast@0.3.5))(@vue/compiler-core@3.5.22)(esbuild@0.25.11)(typescript@5.9.3)(vue@3.5.22(typescript@5.9.3))':
+  '@nuxt/module-builder@1.0.2(@nuxt/cli@3.29.3(magicast@0.3.5))(@vue/compiler-core@3.5.22)(esbuild@0.25.12)(typescript@5.9.3)(vue@3.5.22(typescript@5.9.3))':
     dependencies:
       '@nuxt/cli': 3.29.3(magicast@0.3.5)
       citty: 0.1.6
@@ -14503,14 +14666,14 @@ snapshots:
       defu: 6.1.4
       jiti: 2.6.1
       magic-regexp: 0.10.0
-      mkdist: 2.4.1(typescript@5.9.3)(vue-sfc-transformer@0.1.17(@vue/compiler-core@3.5.22)(esbuild@0.25.11)(vue@3.5.22(typescript@5.9.3)))(vue@3.5.22(typescript@5.9.3))
+      mkdist: 2.4.1(typescript@5.9.3)(vue-sfc-transformer@0.1.17(@vue/compiler-core@3.5.22)(esbuild@0.25.12)(vue@3.5.22(typescript@5.9.3)))(vue@3.5.22(typescript@5.9.3))
       mlly: 1.8.0
       pathe: 2.0.3
       pkg-types: 2.3.0
       tsconfck: 3.1.6(typescript@5.9.3)
       typescript: 5.9.3
-      unbuild: 3.6.1(typescript@5.9.3)(vue-sfc-transformer@0.1.17(@vue/compiler-core@3.5.22)(esbuild@0.25.11)(vue@3.5.22(typescript@5.9.3)))(vue@3.5.22(typescript@5.9.3))
-      vue-sfc-transformer: 0.1.17(@vue/compiler-core@3.5.22)(esbuild@0.25.11)(vue@3.5.22(typescript@5.9.3))
+      unbuild: 3.6.1(typescript@5.9.3)(vue-sfc-transformer@0.1.17(@vue/compiler-core@3.5.22)(esbuild@0.25.12)(vue@3.5.22(typescript@5.9.3)))(vue@3.5.22(typescript@5.9.3))
+      vue-sfc-transformer: 0.1.17(@vue/compiler-core@3.5.22)(esbuild@0.25.12)(vue@3.5.22(typescript@5.9.3))
     transitivePeerDependencies:
       - '@vue/compiler-core'
       - esbuild
@@ -15509,6 +15672,15 @@ snapshots:
       '@types/react': 19.1.13
       '@types/react-dom': 19.1.9(@types/react@19.1.13)
 
+  '@radix-ui/react-arrow@1.1.2(@types/react-dom@19.1.9(@types/react@19.1.13))(@types/react@19.1.13)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.0.2(@types/react-dom@19.1.9(@types/react@19.1.13))(@types/react@19.1.13)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.13
+      '@types/react-dom': 19.1.9(@types/react@19.1.13)
+
   '@radix-ui/react-arrow@1.1.7(@types/react-dom@19.1.9(@types/react@19.1.13))(@types/react@19.1.13)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
     dependencies:
       '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9(@types/react@19.1.13))(@types/react@19.1.13)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
@@ -15581,6 +15753,18 @@ snapshots:
       '@types/react': 19.1.13
       '@types/react-dom': 19.1.9(@types/react@19.1.13)
 
+  '@radix-ui/react-collection@1.1.2(@types/react-dom@19.1.9(@types/react@19.1.13))(@types/react@19.1.13)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@19.1.13)(react@19.1.0)
+      '@radix-ui/react-context': 1.1.1(@types/react@19.1.13)(react@19.1.0)
+      '@radix-ui/react-primitive': 2.0.2(@types/react-dom@19.1.9(@types/react@19.1.13))(@types/react@19.1.13)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-slot': 1.1.2(@types/react@19.1.13)(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.13
+      '@types/react-dom': 19.1.9(@types/react@19.1.13)
+
   '@radix-ui/react-collection@1.1.7(@types/react-dom@19.1.9(@types/react@19.1.13))(@types/react@19.1.13)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
     dependencies:
       '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.13)(react@19.1.0)
@@ -15699,6 +15883,12 @@ snapshots:
       '@types/react': 19.1.13
       '@types/react-dom': 19.1.9(@types/react@19.1.13)
 
+  '@radix-ui/react-direction@1.1.0(@types/react@19.1.13)(react@19.1.0)':
+    dependencies:
+      react: 19.1.0
+    optionalDependencies:
+      '@types/react': 19.1.13
+
   '@radix-ui/react-direction@1.1.1(@types/react@19.1.13)(react@19.1.0)':
     dependencies:
       react: 19.1.0
@@ -15750,6 +15940,19 @@ snapshots:
       '@types/react': 19.1.13
       '@types/react-dom': 19.1.9(@types/react@19.1.13)
 
+  '@radix-ui/react-dismissable-layer@1.1.5(@types/react-dom@19.1.9(@types/react@19.1.13))(@types/react@19.1.13)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.1
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@19.1.13)(react@19.1.0)
+      '@radix-ui/react-primitive': 2.0.2(@types/react-dom@19.1.9(@types/react@19.1.13))(@types/react@19.1.13)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@19.1.13)(react@19.1.0)
+      '@radix-ui/react-use-escape-keydown': 1.1.0(@types/react@19.1.13)(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.13
+      '@types/react-dom': 19.1.9(@types/react@19.1.13)
+
   '@radix-ui/react-dropdown-menu@2.1.16(@types/react-dom@19.1.9(@types/react@19.1.13))(@types/react@19.1.13)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
     dependencies:
       '@radix-ui/primitive': 1.1.3
@@ -15765,6 +15968,21 @@ snapshots:
       '@types/react': 19.1.13
       '@types/react-dom': 19.1.9(@types/react@19.1.13)
 
+  '@radix-ui/react-dropdown-menu@2.1.6(@types/react-dom@19.1.9(@types/react@19.1.13))(@types/react@19.1.13)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.1
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@19.1.13)(react@19.1.0)
+      '@radix-ui/react-context': 1.1.1(@types/react@19.1.13)(react@19.1.0)
+      '@radix-ui/react-id': 1.1.0(@types/react@19.1.13)(react@19.1.0)
+      '@radix-ui/react-menu': 2.1.6(@types/react-dom@19.1.9(@types/react@19.1.13))(@types/react@19.1.13)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-primitive': 2.0.2(@types/react-dom@19.1.9(@types/react@19.1.13))(@types/react@19.1.13)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@19.1.13)(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.13
+      '@types/react-dom': 19.1.9(@types/react@19.1.13)
+
   '@radix-ui/react-focus-guards@1.1.1(@types/react@19.1.13)(react@19.1.0)':
     dependencies:
       react: 19.1.0
@@ -15794,6 +16012,17 @@ snapshots:
       '@types/react': 19.1.13
       '@types/react-dom': 19.1.9(@types/react@19.1.13)
 
+  '@radix-ui/react-focus-scope@1.1.2(@types/react-dom@19.1.9(@types/react@19.1.13))(@types/react@19.1.13)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@19.1.13)(react@19.1.0)
+      '@radix-ui/react-primitive': 2.0.2(@types/react-dom@19.1.9(@types/react@19.1.13))(@types/react@19.1.13)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@19.1.13)(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.13
+      '@types/react-dom': 19.1.9(@types/react@19.1.13)
+
   '@radix-ui/react-focus-scope@1.1.7(@types/react-dom@19.1.9(@types/react@19.1.13))(@types/react@19.1.13)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
     dependencies:
       '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.13)(react@19.1.0)
@@ -15912,6 +16141,32 @@ snapshots:
       '@types/react': 19.1.13
       '@types/react-dom': 19.1.9(@types/react@19.1.13)
 
+  '@radix-ui/react-menu@2.1.6(@types/react-dom@19.1.9(@types/react@19.1.13))(@types/react@19.1.13)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.1
+      '@radix-ui/react-collection': 1.1.2(@types/react-dom@19.1.9(@types/react@19.1.13))(@types/react@19.1.13)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@19.1.13)(react@19.1.0)
+      '@radix-ui/react-context': 1.1.1(@types/react@19.1.13)(react@19.1.0)
+      '@radix-ui/react-direction': 1.1.0(@types/react@19.1.13)(react@19.1.0)
+      '@radix-ui/react-dismissable-layer': 1.1.5(@types/react-dom@19.1.9(@types/react@19.1.13))(@types/react@19.1.13)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-focus-guards': 1.1.1(@types/react@19.1.13)(react@19.1.0)
+      '@radix-ui/react-focus-scope': 1.1.2(@types/react-dom@19.1.9(@types/react@19.1.13))(@types/react@19.1.13)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-id': 1.1.0(@types/react@19.1.13)(react@19.1.0)
+      '@radix-ui/react-popper': 1.2.2(@types/react-dom@19.1.9(@types/react@19.1.13))(@types/react@19.1.13)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-portal': 1.1.4(@types/react-dom@19.1.9(@types/react@19.1.13))(@types/react@19.1.13)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-presence': 1.1.2(@types/react-dom@19.1.9(@types/react@19.1.13))(@types/react@19.1.13)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-primitive': 2.0.2(@types/react-dom@19.1.9(@types/react@19.1.13))(@types/react@19.1.13)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-roving-focus': 1.1.2(@types/react-dom@19.1.9(@types/react@19.1.13))(@types/react@19.1.13)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-slot': 1.1.2(@types/react@19.1.13)(react@19.1.0)
+      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@19.1.13)(react@19.1.0)
+      aria-hidden: 1.2.6
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+      react-remove-scroll: 2.7.1(@types/react@19.1.13)(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.13
+      '@types/react-dom': 19.1.9(@types/react@19.1.13)
+
   '@radix-ui/react-menubar@1.1.16(@types/react-dom@19.1.9(@types/react@19.1.13))(@types/react@19.1.13)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
     dependencies:
       '@radix-ui/primitive': 1.1.3
@@ -16011,6 +16266,24 @@ snapshots:
       '@types/react': 19.1.13
       '@types/react-dom': 19.1.9(@types/react@19.1.13)
 
+  '@radix-ui/react-popper@1.2.2(@types/react-dom@19.1.9(@types/react@19.1.13))(@types/react@19.1.13)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@floating-ui/react-dom': 2.1.6(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-arrow': 1.1.2(@types/react-dom@19.1.9(@types/react@19.1.13))(@types/react@19.1.13)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@19.1.13)(react@19.1.0)
+      '@radix-ui/react-context': 1.1.1(@types/react@19.1.13)(react@19.1.0)
+      '@radix-ui/react-primitive': 2.0.2(@types/react-dom@19.1.9(@types/react@19.1.13))(@types/react@19.1.13)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@19.1.13)(react@19.1.0)
+      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@19.1.13)(react@19.1.0)
+      '@radix-ui/react-use-rect': 1.1.0(@types/react@19.1.13)(react@19.1.0)
+      '@radix-ui/react-use-size': 1.1.0(@types/react@19.1.13)(react@19.1.0)
+      '@radix-ui/rect': 1.1.0
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.13
+      '@types/react-dom': 19.1.9(@types/react@19.1.13)
+
   '@radix-ui/react-popper@1.2.8(@types/react-dom@19.1.9(@types/react@19.1.13))(@types/react@19.1.13)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
     dependencies:
       '@floating-ui/react-dom': 2.1.6(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
@@ -16057,6 +16330,16 @@ snapshots:
       '@types/react': 19.1.13
       '@types/react-dom': 19.1.9(@types/react@19.1.13)
 
+  '@radix-ui/react-portal@1.1.4(@types/react-dom@19.1.9(@types/react@19.1.13))(@types/react@19.1.13)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.0.2(@types/react-dom@19.1.9(@types/react@19.1.13))(@types/react@19.1.13)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@19.1.13)(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.13
+      '@types/react-dom': 19.1.9(@types/react@19.1.13)
+
   '@radix-ui/react-portal@1.1.9(@types/react-dom@19.1.9(@types/react@19.1.13))(@types/react@19.1.13)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
     dependencies:
       '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9(@types/react@19.1.13))(@types/react@19.1.13)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
@@ -16116,6 +16399,15 @@ snapshots:
       '@types/react': 19.1.13
       '@types/react-dom': 19.1.9(@types/react@19.1.13)
 
+  '@radix-ui/react-primitive@2.0.2(@types/react-dom@19.1.9(@types/react@19.1.13))(@types/react@19.1.13)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@radix-ui/react-slot': 1.1.2(@types/react@19.1.13)(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.13
+      '@types/react-dom': 19.1.9(@types/react@19.1.13)
+
   '@radix-ui/react-primitive@2.1.3(@types/react-dom@19.1.9(@types/react@19.1.13))(@types/react@19.1.13)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
     dependencies:
       '@radix-ui/react-slot': 1.2.3(@types/react@19.1.13)(react@19.1.0)
@@ -16196,6 +16488,23 @@ snapshots:
       '@types/react': 19.1.13
       '@types/react-dom': 19.1.9(@types/react@19.1.13)
 
+  '@radix-ui/react-roving-focus@1.1.2(@types/react-dom@19.1.9(@types/react@19.1.13))(@types/react@19.1.13)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.1
+      '@radix-ui/react-collection': 1.1.2(@types/react-dom@19.1.9(@types/react@19.1.13))(@types/react@19.1.13)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@19.1.13)(react@19.1.0)
+      '@radix-ui/react-context': 1.1.1(@types/react@19.1.13)(react@19.1.0)
+      '@radix-ui/react-direction': 1.1.0(@types/react@19.1.13)(react@19.1.0)
+      '@radix-ui/react-id': 1.1.0(@types/react@19.1.13)(react@19.1.0)
+      '@radix-ui/react-primitive': 2.0.2(@types/react-dom@19.1.9(@types/react@19.1.13))(@types/react@19.1.13)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@19.1.13)(react@19.1.0)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@19.1.13)(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.13
+      '@types/react-dom': 19.1.9(@types/react@19.1.13)
+
   '@radix-ui/react-scroll-area@1.2.10(@types/react-dom@19.1.9(@types/react@19.1.13))(@types/react@19.1.13)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
     dependencies:
       '@radix-ui/number': 1.1.1
@@ -16306,6 +16615,13 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.1.13
 
+  '@radix-ui/react-slot@1.1.2(@types/react@19.1.13)(react@19.1.0)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@19.1.13)(react@19.1.0)
+      react: 19.1.0
+    optionalDependencies:
+      '@types/react': 19.1.13
+
   '@radix-ui/react-slot@1.2.3(@types/react@19.1.13)(react@19.1.0)':
     dependencies:
       '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.13)(react@19.1.0)
@@ -16609,6 +16925,13 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.1.13
 
+  '@radix-ui/react-use-rect@1.1.0(@types/react@19.1.13)(react@19.1.0)':
+    dependencies:
+      '@radix-ui/rect': 1.1.0
+      react: 19.1.0
+    optionalDependencies:
+      '@types/react': 19.1.13
+
   '@radix-ui/react-use-rect@1.1.1(@types/react@19.1.13)(react@19.1.0)':
     dependencies:
       '@radix-ui/rect': 1.1.1
@@ -16662,6 +16985,8 @@ snapshots:
       '@types/react': 19.1.13
       '@types/react-dom': 19.1.9(@types/react@19.1.13)
 
+  '@radix-ui/rect@1.1.0': {}
+
   '@radix-ui/rect@1.1.1': {}
 
   '@rolldown/pluginutils@1.0.0-beta.29': {}
@@ -21712,7 +22037,7 @@ snapshots:
 
   mkdirp@3.0.1: {}
 
-  mkdist@2.4.1(typescript@5.9.3)(vue-sfc-transformer@0.1.17(@vue/compiler-core@3.5.22)(esbuild@0.25.11)(vue@3.5.22(typescript@5.9.3)))(vue@3.5.22(typescript@5.9.3)):
+  mkdist@2.4.1(typescript@5.9.3)(vue-sfc-transformer@0.1.17(@vue/compiler-core@3.5.22)(esbuild@0.25.12)(vue@3.5.22(typescript@5.9.3)))(vue@3.5.22(typescript@5.9.3)):
     dependencies:
       autoprefixer: 10.4.21(postcss@8.5.6)
       citty: 0.1.6
@@ -21730,7 +22055,7 @@ snapshots:
     optionalDependencies:
       typescript: 5.9.3
       vue: 3.5.22(typescript@5.9.3)
-      vue-sfc-transformer: 0.1.17(@vue/compiler-core@3.5.22)(esbuild@0.25.11)(vue@3.5.22(typescript@5.9.3))
+      vue-sfc-transformer: 0.1.17(@vue/compiler-core@3.5.22)(esbuild@0.25.12)(vue@3.5.22(typescript@5.9.3))
 
   mlly@1.8.0:
     dependencies:
@@ -24722,7 +25047,7 @@ snapshots:
 
   ultrahtml@1.6.0: {}
 
-  unbuild@3.6.1(typescript@5.9.3)(vue-sfc-transformer@0.1.17(@vue/compiler-core@3.5.22)(esbuild@0.25.11)(vue@3.5.22(typescript@5.9.3)))(vue@3.5.22(typescript@5.9.3)):
+  unbuild@3.6.1(typescript@5.9.3)(vue-sfc-transformer@0.1.17(@vue/compiler-core@3.5.22)(esbuild@0.25.12)(vue@3.5.22(typescript@5.9.3)))(vue@3.5.22(typescript@5.9.3)):
     dependencies:
       '@rollup/plugin-alias': 5.1.1(rollup@4.53.2)
       '@rollup/plugin-commonjs': 28.0.9(rollup@4.53.2)
@@ -24738,7 +25063,7 @@ snapshots:
       hookable: 5.5.3
       jiti: 2.6.1
       magic-string: 0.30.21
-      mkdist: 2.4.1(typescript@5.9.3)(vue-sfc-transformer@0.1.17(@vue/compiler-core@3.5.22)(esbuild@0.25.11)(vue@3.5.22(typescript@5.9.3)))(vue@3.5.22(typescript@5.9.3))
+      mkdist: 2.4.1(typescript@5.9.3)(vue-sfc-transformer@0.1.17(@vue/compiler-core@3.5.22)(esbuild@0.25.12)(vue@3.5.22(typescript@5.9.3)))(vue@3.5.22(typescript@5.9.3))
       mlly: 1.8.0
       pathe: 2.0.3
       pkg-types: 2.3.0
@@ -25400,11 +25725,11 @@ snapshots:
       '@vue/devtools-api': 6.6.4
       vue: 3.5.22(typescript@5.9.3)
 
-  vue-sfc-transformer@0.1.17(@vue/compiler-core@3.5.22)(esbuild@0.25.11)(vue@3.5.22(typescript@5.9.3)):
+  vue-sfc-transformer@0.1.17(@vue/compiler-core@3.5.22)(esbuild@0.25.12)(vue@3.5.22(typescript@5.9.3)):
     dependencies:
       '@babel/parser': 7.28.5
       '@vue/compiler-core': 3.5.22
-      esbuild: 0.25.11
+      esbuild: 0.25.12
       vue: 3.5.22(typescript@5.9.3)
 
   vue@3.5.22(typescript@5.9.3):

From ab8759678f4e9da68e79fa879eb00ebb82fd157c Mon Sep 17 00:00:00 2001
From: Karthik Kalyanaraman <karthik@scale3labs.com>
Date: Sat, 22 Nov 2025 17:30:46 -0800
Subject: [PATCH 04/11] Migrate to nuqs

---
 packages/web/package.json                 |   3 +-
 packages/web/src/app/layout.tsx           |   5 +-
 packages/web/src/app/page.tsx             |  39 +++----
 packages/web/src/app/run/[runId]/page.tsx |  22 ++--
 packages/web/src/lib/config.ts            | 128 ++++++++--------------
 packages/web/src/lib/url-state.ts         |  59 ++++++++++
 6 files changed, 135 insertions(+), 121 deletions(-)
 create mode 100644 packages/web/src/lib/url-state.ts

diff --git a/packages/web/package.json b/packages/web/package.json
index e2157bfc3..a7c1faa2b 100644
--- a/packages/web/package.json
+++ b/packages/web/package.json
@@ -27,7 +27,8 @@
   },
   "dependencies": {
     "@radix-ui/react-tabs": "^1.1.13",
-    "next": "15.5.4"
+    "next": "15.5.4",
+    "nuqs": "^2.2.5"
   },
   "devDependencies": {
     "@biomejs/biome": "catalog:",
diff --git a/packages/web/src/app/layout.tsx b/packages/web/src/app/layout.tsx
index 9f31ae308..fe198b9e1 100644
--- a/packages/web/src/app/layout.tsx
+++ b/packages/web/src/app/layout.tsx
@@ -2,6 +2,7 @@ import type { Metadata } from 'next';
 import { Geist, Geist_Mono } from 'next/font/google';
 import './globals.css';
 import { connection } from 'next/server';
+import { NuqsAdapter } from 'nuqs/adapters/next/app';
 import { LayoutClient } from './layout-client';
 
 const geistSans = Geist({
@@ -34,7 +35,9 @@ export default async function RootLayout({
       <body
         className={`${geistSans.variable} ${geistMono.variable} antialiased`}
       >
-        <LayoutClient>{children}</LayoutClient>
+        <NuqsAdapter>
+          <LayoutClient>{children}</LayoutClient>
+        </NuqsAdapter>
       </body>
     </html>
   );
diff --git a/packages/web/src/app/page.tsx b/packages/web/src/app/page.tsx
index c78dd96a7..36e8572f6 100644
--- a/packages/web/src/app/page.tsx
+++ b/packages/web/src/app/page.tsx
@@ -1,34 +1,28 @@
 'use client';
 
-import { useRouter, useSearchParams } from 'next/navigation';
+import { useRouter } from 'next/navigation';
 import { ErrorBoundary } from '@/components/error-boundary';
 import { HooksTable } from '@/components/hooks-table';
 import { RunsTable } from '@/components/runs-table';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { buildUrlWithConfig, useQueryParamConfig } from '@/lib/config';
+import { useHookIdState, useSidebarState, useTabState } from '@/lib/url-state';
 
 export default function Home() {
   const router = useRouter();
-  const searchParams = useSearchParams();
   const config = useQueryParamConfig();
+  const [sidebar] = useSidebarState();
+  const [hookId] = useHookIdState();
+  const [tab, setTab] = useTabState();
 
-  const sidebar = searchParams.get('sidebar');
-  const hookId = searchParams.get('hookId') || searchParams.get('hook');
   const selectedHookId = sidebar === 'hook' && hookId ? hookId : undefined;
 
   const handleRunClick = (runId: string, streamId?: string) => {
     if (!streamId) {
-      router.push(
-        buildUrlWithConfig(`/run/${runId}`, config, undefined, searchParams)
-      );
+      router.push(buildUrlWithConfig(`/run/${runId}`, config));
     } else {
       router.push(
-        buildUrlWithConfig(
-          `/run/${runId}/streams/${streamId}`,
-          config,
-          undefined,
-          searchParams
-        )
+        buildUrlWithConfig(`/run/${runId}/streams/${streamId}`, config)
       );
     }
   };
@@ -36,26 +30,19 @@ export default function Home() {
   const handleHookSelect = (hookId: string, runId?: string) => {
     if (hookId) {
       router.push(
-        buildUrlWithConfig(
-          `/run/${runId}`,
-          config,
-          {
-            sidebar: 'hook',
-            hookId,
-          },
-          searchParams
-        )
+        buildUrlWithConfig(`/run/${runId}`, config, {
+          sidebar: 'hook',
+          hookId,
+        })
       );
     } else {
-      router.push(
-        buildUrlWithConfig(`/run/${runId}`, config, undefined, searchParams)
-      );
+      router.push(buildUrlWithConfig(`/run/${runId}`, config));
     }
   };
 
   return (
     <div className="space-y-6">
-      <Tabs defaultValue="runs" className="w-full">
+      <Tabs value={tab} onValueChange={setTab} className="w-full">
         <TabsList className="mb-4">
           <TabsTrigger value="runs">Runs</TabsTrigger>
           <TabsTrigger value="hooks">Hooks</TabsTrigger>
diff --git a/packages/web/src/app/run/[runId]/page.tsx b/packages/web/src/app/run/[runId]/page.tsx
index 803589fb8..debf597d3 100644
--- a/packages/web/src/app/run/[runId]/page.tsx
+++ b/packages/web/src/app/run/[runId]/page.tsx
@@ -1,26 +1,24 @@
 'use client';
 
-import { useParams, useSearchParams } from 'next/navigation';
+import { useParams } from 'next/navigation';
 import { ErrorBoundary } from '@/components/error-boundary';
 import { RunDetailView } from '@/components/run-detail-view';
 import { useQueryParamConfig } from '@/lib/config';
+import {
+  useEventIdState,
+  useHookIdState,
+  useStepIdState,
+} from '@/lib/url-state';
 
 export default function RunDetailPage() {
   const params = useParams();
-  const searchParams = useSearchParams();
   const config = useQueryParamConfig();
+  const [stepId] = useStepIdState();
+  const [eventId] = useEventIdState();
+  const [hookId] = useHookIdState();
 
   const runId = params.runId as string;
-  const stepId = searchParams.get('stepId') || searchParams.get('step');
-  const eventId = searchParams.get('eventId') || searchParams.get('event');
-  const hookId = searchParams.get('hookId') || searchParams.get('hook');
-  const selectedId = stepId
-    ? stepId
-    : eventId
-      ? eventId
-      : hookId
-        ? hookId
-        : undefined;
+  const selectedId = stepId || eventId || hookId || undefined;
 
   return (
     <ErrorBoundary
diff --git a/packages/web/src/lib/config.ts b/packages/web/src/lib/config.ts
index 94aeff271..cbaa76a94 100644
--- a/packages/web/src/lib/config.ts
+++ b/packages/web/src/lib/config.ts
@@ -1,8 +1,7 @@
 'use client';
 
 import type { EnvMap } from '@workflow/web-shared';
-import { usePathname, useRouter, useSearchParams } from 'next/navigation';
-import { useMemo } from 'react';
+import { createSerializer, parseAsString, useQueryStates } from 'nuqs';
 import type { WorldConfig } from '@/lib/config-world';
 
 // Default configuration
@@ -13,103 +12,68 @@ const DEFAULT_CONFIG: WorldConfig = {
   env: 'production',
 };
 
-// Config query param keys
-const CONFIG_PARAM_KEYS = [
-  'backend',
-  'env',
-  'authToken',
-  'project',
-  'team',
-  'port',
-  'dataDir',
-] as const;
+// nuqs parsers for config params
+const configParsers = {
+  backend: parseAsString.withDefault(DEFAULT_CONFIG.backend || 'embedded'),
+  env: parseAsString.withDefault(DEFAULT_CONFIG.env || 'production'),
+  authToken: parseAsString,
+  project: parseAsString,
+  team: parseAsString,
+  port: parseAsString.withDefault(DEFAULT_CONFIG.port || '3000'),
+  dataDir: parseAsString.withDefault(
+    DEFAULT_CONFIG.dataDir || './.next/workflow-data'
+  ),
+};
+
+// Create a serializer for config params
+const serializeConfig = createSerializer(configParsers);
 
 /**
  * Hook that reads query params and returns the current config
+ * Uses nuqs for type-safe URL state management
  * Config is derived from default config + query params
  */
 export function useQueryParamConfig(): WorldConfig {
-  const searchParams = useSearchParams();
-
-  const config = useMemo(() => {
-    const configFromParams: WorldConfig = { ...DEFAULT_CONFIG };
+  const [config] = useQueryStates(configParsers, {
+    history: 'push',
+    shallow: true,
+  });
 
-    // Override with query parameters
-    for (const key of CONFIG_PARAM_KEYS) {
-      const value = searchParams.get(key);
-      if (value) {
-        configFromParams[key] = value;
-      }
-    }
-
-    return configFromParams;
-  }, [searchParams]);
-
-  return config;
+  return config as WorldConfig;
 }
 
 /**
  * Hook that returns a function to update config query params
+ * Uses nuqs for type-safe URL state management
  * Preserves all other query params while updating config params
  */
 export function useUpdateConfigQueryParams() {
-  const router = useRouter();
-  const pathname = usePathname();
-  const searchParams = useSearchParams();
-
-  const updateConfig = useMemo(
-    () => (newConfig: WorldConfig) => {
-      const params = new URLSearchParams(searchParams.toString());
-
-      // Update config params
-      for (const key of CONFIG_PARAM_KEYS) {
-        const value = newConfig[key];
-        if (value !== undefined && value !== null && value !== '') {
-          // Only set if it differs from default or if it was already set
-          if (value !== DEFAULT_CONFIG[key] || searchParams.has(key)) {
-            params.set(key, value);
-          }
-        } else {
-          // Remove param if it's undefined/null/empty
-          params.delete(key);
-        }
+  const [, setConfig] = useQueryStates(configParsers, {
+    history: 'push',
+    shallow: true,
+  });
+
+  return (newConfig: WorldConfig) => {
+    // Filter out null/undefined values and only set non-default values
+    const filtered: Record<string, string | null> = {};
+
+    for (const [key, value] of Object.entries(newConfig)) {
+      if (value === undefined || value === null || value === '') {
+        filtered[key] = null; // nuqs uses null to clear params
+      } else if (value !== DEFAULT_CONFIG[key as keyof WorldConfig]) {
+        filtered[key] = value;
+      } else {
+        filtered[key] = null;
       }
-
-      // Navigate with updated params
-      const queryString = params.toString();
-      const newUrl = queryString ? `${pathname}?${queryString}` : pathname;
-      router.push(newUrl);
-    },
-    [router, pathname, searchParams]
-  );
-
-  return updateConfig;
-}
-
-/**
- * Helper to get config params from a URLSearchParams object
- * Useful for building URLs with config params
- */
-export function getConfigParams(config: WorldConfig): URLSearchParams {
-  const params = new URLSearchParams();
-
-  for (const key of CONFIG_PARAM_KEYS) {
-    const value = config[key];
-    if (
-      value !== undefined &&
-      value !== null &&
-      value !== '' &&
-      value !== DEFAULT_CONFIG[key]
-    ) {
-      params.set(key, value);
     }
-  }
 
-  return params;
+    setConfig(filtered);
+  };
 }
 
 /**
  * Helper to build a URL with config params while preserving other params
+ * Uses nuqs serializer for type-safe URL construction
  */
 export function buildUrlWithConfig(
   path: string,
@@ -117,7 +81,9 @@ export function buildUrlWithConfig(
   additionalParams?: Record<string, string>,
   currentSearchParams?: URLSearchParams
 ): string {
-  const params = getConfigParams(config);
+  // Serialize config params using nuqs
+  const queryString = serializeConfig(config);
+  const params = new URLSearchParams(queryString);
 
   // Preserve theme parameter from current URL if present
   if (currentSearchParams) {
@@ -136,8 +102,8 @@ export function buildUrlWithConfig(
     }
   }
 
-  const queryString = params.toString();
-  return queryString ? `${path}?${queryString}` : path;
+  const search = params.toString();
+  return search ? `${path}?${search}` : path;
 }
 
 export const worldConfigToEnvMap = (config: WorldConfig): EnvMap => {
diff --git a/packages/web/src/lib/url-state.ts b/packages/web/src/lib/url-state.ts
new file mode 100644
index 000000000..287e5137a
--- /dev/null
+++ b/packages/web/src/lib/url-state.ts
@@ -0,0 +1,59 @@
+'use client';
+
+import { parseAsString, useQueryState, useQueryStates } from 'nuqs';
+
+/**
+ * Hook to manage sidebar state in URL
+ */
+export function useSidebarState() {
+  return useQueryState('sidebar', parseAsString);
+}
+
+/**
+ * Hook to manage theme state in URL
+ */
+export function useThemeState() {
+  return useQueryState('theme', parseAsString.withDefault('system'));
+}
+
+/**
+ * Hook to manage tab selection state in URL
+ */
+export function useTabState() {
+  return useQueryState('tab', parseAsString.withDefault('runs'));
+}
+
+/**
+ * Hook to manage multiple navigation params at once
+ */
+export function useNavigationParams() {
+  return useQueryStates({
+    sidebar: parseAsString,
+    hookId: parseAsString,
+    stepId: parseAsString,
+    eventId: parseAsString,
+    streamId: parseAsString,
+    runId: parseAsString,
+    id: parseAsString,
+    resource: parseAsString,
+  });
+}
+
+/**
+ * Hook to manage individual navigation params
+ */
+export function useHookIdState() {
+  return useQueryState('hookId', parseAsString);
+}
+
+export function useStepIdState() {
+  return useQueryState('stepId', parseAsString);
+}
+
+export function useEventIdState() {
+  return useQueryState('eventId', parseAsString);
+}
+
+export function useStreamIdState() {
+  return useQueryState('streamId', parseAsString);
+}

From 1dc7df5bf9c05e2bcb9812a1062c1a58022c696d Mon Sep 17 00:00:00 2001
From: Karthik Kalyanaraman <karthik@scale3labs.com>
Date: Sat, 22 Nov 2025 18:07:06 -0800
Subject: [PATCH 05/11] fix warnings

---
 packages/web/src/components/runs-table.tsx | 350 ++++++++++++---------
 1 file changed, 201 insertions(+), 149 deletions(-)

diff --git a/packages/web/src/components/runs-table.tsx b/packages/web/src/components/runs-table.tsx
index 42c0ae7a8..1c31db4f7 100644
--- a/packages/web/src/components/runs-table.tsx
+++ b/packages/web/src/components/runs-table.tsx
@@ -56,15 +56,198 @@ const statusMap: Record<WorkflowRunStatus, { label: string; color: string }> = {
   cancelled: { label: 'Cancelled', color: 'bg-gray-600 dark:bg-gray-400' },
 };
 
+// Helper: Handle workflow filter changes
+function useWorkflowFilter() {
+  const router = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+
+  return useCallback(
+    (value: string) => {
+      const params = new URLSearchParams(searchParams.toString());
+      if (value === 'all') {
+        params.delete('workflow');
+        params.delete('status');
+      } else {
+        params.set('workflow', value);
+      }
+      router.push(`${pathname}?${params.toString()}`);
+    },
+    [router, pathname, searchParams]
+  );
+}
+
+// Helper: Handle status filter changes
+function useStatusFilter() {
+  const router = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+
+  return useCallback(
+    (value: string) => {
+      const params = new URLSearchParams(searchParams.toString());
+      if (value === 'all') {
+        params.delete('status');
+      } else {
+        params.set('status', value);
+      }
+      router.push(`${pathname}?${params.toString()}`);
+    },
+    [router, pathname, searchParams]
+  );
+}
+
+// Filter controls component
+interface FilterControlsProps {
+  workflowNameFilter: string | 'all';
+  status: WorkflowRunStatus | 'all' | undefined;
+  seenWorkflowNames: Set<string>;
+  sortOrder: 'asc' | 'desc';
+  loading: boolean;
+  statusFilterRequiresWorkflowNameFilter: boolean;
+  onWorkflowChange: (value: string) => void;
+  onStatusChange: (value: string) => void;
+  onSortToggle: () => void;
+  onRefresh: () => void;
+  lastRefreshTime: Date | null;
+}
+
+function FilterControls({
+  workflowNameFilter,
+  status,
+  seenWorkflowNames,
+  sortOrder,
+  loading,
+  statusFilterRequiresWorkflowNameFilter,
+  onWorkflowChange,
+  onStatusChange,
+  onSortToggle,
+  onRefresh,
+  lastRefreshTime,
+}: FilterControlsProps) {
+  return (
+    <div className="flex items-center justify-between">
+      <div className="flex items-end gap-2">
+        <p className="text-sm text-muted-foreground">Last refreshed</p>
+        {lastRefreshTime && (
+          <RelativeTime
+            date={lastRefreshTime}
+            className="text-sm text-muted-foreground"
+            type="distance"
+          />
+        )}
+      </div>
+      <div className="flex items-center gap-4">
+        <Select
+          value={workflowNameFilter ?? 'all'}
+          onValueChange={onWorkflowChange}
+          disabled={loading}
+        >
+          <SelectTrigger className="w-[180px] h-9">
+            <SelectValue placeholder="Filter by workflow" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="all">All Workflows</SelectItem>
+            {Array.from(seenWorkflowNames)
+              .sort()
+              .map((name) => (
+                <SelectItem key={name} value={name}>
+                  {parseWorkflowName(name)?.shortName || name}
+                </SelectItem>
+              ))}
+          </SelectContent>
+        </Select>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <div>
+              <Select
+                value={status || 'all'}
+                onValueChange={onStatusChange}
+                disabled={
+                  loading ||
+                  (statusFilterRequiresWorkflowNameFilter &&
+                    !workflowNameFilter)
+                }
+              >
+                <SelectTrigger className="w-[140px] h-9">
+                  <SelectValue placeholder="Filter by status" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="all">Any status</SelectItem>
+                  {Object.entries(statusMap).map(
+                    ([status, { label, color }]) => (
+                      <SelectItem key={status} value={status}>
+                        <div className="flex items-center">
+                          <span
+                            className={`${color} size-1.5 rounded-full mr-2`}
+                          />
+                          {label}
+                        </div>
+                      </SelectItem>
+                    )
+                  )}
+                </SelectContent>
+              </Select>
+            </div>
+          </TooltipTrigger>
+          <TooltipContent>
+            {statusFilterRequiresWorkflowNameFilter &&
+            workflowNameFilter === 'all'
+              ? 'Select a workflow first to filter by status'
+              : 'Filter runs by status'}
+          </TooltipContent>
+        </Tooltip>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={onSortToggle}
+              disabled={loading}
+            >
+              {sortOrder === 'desc' ? (
+                <ArrowDownAZ className="h-4 w-4" />
+              ) : (
+                <ArrowUpAZ className="h-4 w-4" />
+              )}
+              {sortOrder === 'desc' ? 'Newest' : 'Oldest'}
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>
+            {sortOrder === 'desc'
+              ? 'Showing newest first'
+              : 'Showing oldest first'}
+          </TooltipContent>
+        </Tooltip>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={onRefresh}
+              disabled={loading}
+            >
+              <RefreshCw className={loading ? 'animate-spin' : ''} />
+              Refresh
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>Note that this resets pages</TooltipContent>
+        </Tooltip>
+      </div>
+    </div>
+  );
+}
+
 /**
  * RunsTable - Displays workflow runs with server-side pagination.
  * Uses the PaginatingTable pattern: fetches data for each page as needed from the server.
  * The table and fetching behavior are intertwined - pagination controls trigger new API calls.
  */
 export function RunsTable({ config, onRunClick }: RunsTableProps) {
-  const router = useRouter();
-  const pathname = usePathname();
   const searchParams = useSearchParams();
+  const handleWorkflowFilter = useWorkflowFilter();
+  const handleStatusFilter = useStatusFilter();
+
   // Validate status parameter - only allow known valid statuses or 'all'
   const rawStatus = searchParams.get('status');
   const validStatuses = Object.keys(statusMap) as WorkflowRunStatus[];
@@ -82,7 +265,7 @@ export function RunsTable({ config, onRunClick }: RunsTableProps) {
 
   // TODO: World-vercel doesn't support filtering by status without a workflow name filter
   const statusFilterRequiresWorkflowNameFilter =
-    config.backend?.includes('vercel');
+    config.backend?.includes('vercel') || false;
   // TODO: This is a workaround. We should be getting a list of valid workflow names
   // from the manifest, which we need to put on the World interface.
   const [seenWorkflowNames, setSeenWorkflowNames] = useState<Set<string>>(
@@ -129,154 +312,23 @@ export function RunsTable({ config, onRunClick }: RunsTableProps) {
     setSortOrder((prev) => (prev === 'desc' ? 'asc' : 'desc'));
   };
 
-  const createQueryString = useCallback(
-    (name: string, value: string) => {
-      const params = new URLSearchParams(searchParams.toString());
-      params.set(name, value);
-
-      return params.toString();
-    },
-    [searchParams]
-  );
-
   return (
     <div>
-      <div className="flex items-center justify-between">
-        <div className="flex items-end gap-2">
-          <p className="text-sm text-muted-foreground">Last refreshed</p>
-          {lastRefreshTime && (
-            <RelativeTime
-              date={lastRefreshTime}
-              className="text-sm text-muted-foreground"
-              type="distance"
-            />
-          )}
-        </div>
-        <div className="flex items-center gap-4">
-          {
-            <>
-              <Select
-                value={workflowNameFilter ?? 'all'}
-                onValueChange={(value) => {
-                  if (value === 'all') {
-                    const params = new URLSearchParams(searchParams.toString());
-                    params.delete('workflow');
-                    params.delete('status');
-                    router.push(`${pathname}?${params.toString()}`);
-                  } else {
-                    router.push(
-                      `${pathname}?${createQueryString('workflow', value)}`
-                    );
-                  }
-                }}
-                disabled={loading}
-              >
-                <SelectTrigger className="w-[180px] h-9">
-                  <SelectValue placeholder="Filter by workflow" />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="all">All Workflows</SelectItem>
-                  {Array.from(seenWorkflowNames)
-                    .sort()
-                    .map((name) => (
-                      <SelectItem key={name} value={name}>
-                        {parseWorkflowName(name)?.shortName || name}
-                      </SelectItem>
-                    ))}
-                </SelectContent>
-              </Select>
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <div>
-                    <Select
-                      value={status || 'all'}
-                      onValueChange={(value) => {
-                        if (value === 'all') {
-                          const params = new URLSearchParams(
-                            searchParams.toString()
-                          );
-                          params.delete('status');
-                          router.push(`${pathname}?${params.toString()}`);
-                        } else {
-                          router.push(
-                            `${pathname}?${createQueryString('status', value)}`
-                          );
-                        }
-                      }}
-                      disabled={
-                        loading ||
-                        (statusFilterRequiresWorkflowNameFilter &&
-                          !workflowNameFilter)
-                      }
-                    >
-                      <SelectTrigger className="w-[140px] h-9">
-                        <SelectValue placeholder="Filter by status" />
-                      </SelectTrigger>
-                      <SelectContent>
-                        <SelectItem value="all">Any status</SelectItem>
-                        {Object.entries(statusMap).map(
-                          ([status, { label, color }]) => (
-                            <SelectItem key={status} value={status}>
-                              <div className="flex items-center">
-                                <span
-                                  className={`${color} size-1.5 rounded-full mr-2`}
-                                />
-                                {label}
-                              </div>
-                            </SelectItem>
-                          )
-                        )}
-                      </SelectContent>
-                    </Select>
-                  </div>
-                </TooltipTrigger>
-                <TooltipContent>
-                  {statusFilterRequiresWorkflowNameFilter &&
-                  workflowNameFilter === 'all'
-                    ? 'Select a workflow first to filter by status'
-                    : 'Filter runs by status'}
-                </TooltipContent>
-              </Tooltip>
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <Button
-                    variant="outline"
-                    size="sm"
-                    onClick={toggleSortOrder}
-                    disabled={loading}
-                  >
-                    {sortOrder === 'desc' ? (
-                      <ArrowDownAZ className="h-4 w-4" />
-                    ) : (
-                      <ArrowUpAZ className="h-4 w-4" />
-                    )}
-                    {sortOrder === 'desc' ? 'Newest' : 'Oldest'}
-                  </Button>
-                </TooltipTrigger>
-                <TooltipContent>
-                  {sortOrder === 'desc'
-                    ? 'Showing newest first'
-                    : 'Showing oldest first'}
-                </TooltipContent>
-              </Tooltip>
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <Button
-                    variant="outline"
-                    size="sm"
-                    onClick={onReload}
-                    disabled={loading}
-                  >
-                    <RefreshCw className={loading ? 'animate-spin' : ''} />
-                    Refresh
-                  </Button>
-                </TooltipTrigger>
-                <TooltipContent>Note that this resets pages</TooltipContent>
-              </Tooltip>
-            </>
-          }
-        </div>
-      </div>
+      <FilterControls
+        workflowNameFilter={workflowNameFilter}
+        status={status}
+        seenWorkflowNames={seenWorkflowNames}
+        sortOrder={sortOrder}
+        loading={loading}
+        statusFilterRequiresWorkflowNameFilter={
+          statusFilterRequiresWorkflowNameFilter
+        }
+        onWorkflowChange={handleWorkflowFilter}
+        onStatusChange={handleStatusFilter}
+        onSortToggle={toggleSortOrder}
+        onRefresh={onReload}
+        lastRefreshTime={lastRefreshTime}
+      />
       {error ? (
         <Alert variant="destructive">
           <AlertCircle className="h-4 w-4" />

From acb109ab255cf83bed343d662e08af73b0bcd8b0 Mon Sep 17 00:00:00 2001
From: Karthik Kalyanaraman <karthik@scale3labs.com>
Date: Sat, 22 Nov 2025 18:58:16 -0800
Subject: [PATCH 06/11] Minor fixes

---
 packages/web/src/components/hooks-table.tsx |  1 -
 pnpm-lock.yaml                              | 31 +++++++++++++++++++++
 2 files changed, 31 insertions(+), 1 deletion(-)

diff --git a/packages/web/src/components/hooks-table.tsx b/packages/web/src/components/hooks-table.tsx
index 4500279fa..b292b7c0d 100644
--- a/packages/web/src/components/hooks-table.tsx
+++ b/packages/web/src/components/hooks-table.tsx
@@ -8,7 +8,6 @@ import {
 import type { Event, Hook } from '@workflow/world';
 import {
   AlertCircle,
-  ArrowUpRight,
   ChevronLeft,
   ChevronRight,
   RefreshCw,
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b7408bab1..d22895c60 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -735,6 +735,9 @@ importers:
       next:
         specifier: 15.5.4
         version: 15.5.4(@opentelemetry/api@1.9.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      nuqs:
+        specifier: ^2.2.5
+        version: 2.8.1(next@15.5.4(@opentelemetry/api@1.9.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(react@19.1.0)
     devDependencies:
       '@biomejs/biome':
         specifier: 'catalog:'
@@ -10065,6 +10068,27 @@ packages:
   nth-check@2.1.1:
     resolution: {integrity: sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==}
 
+  nuqs@2.8.1:
+    resolution: {integrity: sha512-kIw8UW5KXXfVla6B9h0EKzSH/YDpee6lojniQoMyul8wq9brwV0kElE2Jzg4NSCLBo7n2E3wc1J3o7IyPYVlqQ==}
+    peerDependencies:
+      '@remix-run/react': '>=2'
+      '@tanstack/react-router': ^1
+      next: '>=14.2.0'
+      react: '>=18.2.0 || ^19.0.0-0'
+      react-router: ^5 || ^6 || ^7
+      react-router-dom: ^5 || ^6 || ^7
+    peerDependenciesMeta:
+      '@remix-run/react':
+        optional: true
+      '@tanstack/react-router':
+        optional: true
+      next:
+        optional: true
+      react-router:
+        optional: true
+      react-router-dom:
+        optional: true
+
   nuxt@4.0.0:
     resolution: {integrity: sha512-HMhAEW59Ws3ty8SUZ0icOPoqP5xMaThZA5h7A7pz1Gl/feW1FwtJZnqjZ/aO/Xv2TlTIbkil2OOolDpJOAQjUg==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -22616,6 +22640,13 @@ snapshots:
     dependencies:
       boolbase: 1.0.0
 
+  nuqs@2.8.1(next@15.5.4(@opentelemetry/api@1.9.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(react@19.1.0):
+    dependencies:
+      '@standard-schema/spec': 1.0.0
+      react: 19.1.0
+    optionalDependencies:
+      next: 15.5.4(@opentelemetry/api@1.9.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+
   nuxt@4.0.0(@biomejs/biome@2.3.3)(@netlify/blobs@9.1.2)(@parcel/watcher@2.5.1)(@types/node@22.19.0)(@vercel/functions@3.1.4(@aws-sdk/credential-provider-web-identity@3.844.0))(@vue/compiler-sfc@3.5.22)(better-sqlite3@11.10.0)(db0@0.3.4(better-sqlite3@11.10.0)(drizzle-orm@0.44.7(@opentelemetry/api@1.9.0)(better-sqlite3@11.10.0)(pg@8.16.3)(postgres@3.4.7)))(drizzle-orm@0.44.7(@opentelemetry/api@1.9.0)(better-sqlite3@11.10.0)(pg@8.16.3)(postgres@3.4.7))(eslint@9.38.0(jiti@2.6.1))(ioredis@5.8.2)(lightningcss@1.30.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.53.2)(terser@5.44.0)(tsx@4.20.6)(typescript@5.9.3)(vite@7.1.12(@types/node@22.19.0)(jiti@2.6.1)(lightningcss@1.30.1)(terser@5.44.0)(tsx@4.20.6)(yaml@2.8.1))(yaml@2.8.1):
     dependencies:
       '@nuxt/cli': 3.29.3(magicast@0.3.5)

From 1bfd16d9d897ef96ae4895d9aedb99a44837772d Mon Sep 17 00:00:00 2001
From: Karthik Kalyanaraman <karthik@scale3labs.com>
Date: Sat, 22 Nov 2025 18:58:37 -0800
Subject: [PATCH 07/11] Minor fixes

---
 .changeset/migrate-nuqs-url-state.md | 6 ++++++
 1 file changed, 6 insertions(+)
 create mode 100644 .changeset/migrate-nuqs-url-state.md

diff --git a/.changeset/migrate-nuqs-url-state.md b/.changeset/migrate-nuqs-url-state.md
new file mode 100644
index 000000000..b068ea791
--- /dev/null
+++ b/.changeset/migrate-nuqs-url-state.md
@@ -0,0 +1,6 @@
+---
+"@workflow/web": patch
+---
+
+Migrate to nuqs for URL state management. Replaces custom URL parameter hooks with the nuqs library for better type-safety and simpler state management.
+

From 4b4b55a0a4c3ab2a90b4fb53ba4f404ee7c28afb Mon Sep 17 00:00:00 2001
From: Karthik Kalyanaraman <karthik@scale3labs.com>
Date: Sat, 22 Nov 2025 19:12:32 -0800
Subject: [PATCH 08/11] fix back button

---
 .../components/display-utils/back-link.tsx    | 21 ---------------
 .../web/src/components/run-detail-view.tsx    | 16 ++++++++----
 .../web/src/components/settings-dropdown.tsx  |  2 +-
 .../web/src/components/settings-sidebar.tsx   |  7 ++---
 .../web/src/components/stream-detail-view.tsx | 26 +++++++++----------
 5 files changed, 29 insertions(+), 43 deletions(-)
 delete mode 100644 packages/web/src/components/display-utils/back-link.tsx

diff --git a/packages/web/src/components/display-utils/back-link.tsx b/packages/web/src/components/display-utils/back-link.tsx
deleted file mode 100644
index 6e2ebe012..000000000
--- a/packages/web/src/components/display-utils/back-link.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-'use client';
-
-import { ArrowLeft } from 'lucide-react';
-import Link from 'next/link';
-
-interface BackLinkProps {
-  href: string;
-  label?: string;
-}
-
-export function BackLink({ href, label = 'Back' }: BackLinkProps) {
-  return (
-    <Link
-      href={href}
-      className="inline-flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground transition-colors mb-2"
-    >
-      <ArrowLeft className="h-4 w-4" />
-      {label}
-    </Link>
-  );
-}
diff --git a/packages/web/src/components/run-detail-view.tsx b/packages/web/src/components/run-detail-view.tsx
index d034cf635..d60361f22 100644
--- a/packages/web/src/components/run-detail-view.tsx
+++ b/packages/web/src/components/run-detail-view.tsx
@@ -8,7 +8,7 @@ import {
   type WorkflowRun,
   WorkflowTraceViewer,
 } from '@workflow/web-shared';
-import { AlertCircle, Loader2 } from 'lucide-react';
+import { AlertCircle, ChevronLeft, Loader2 } from 'lucide-react';
 import { useRouter, useSearchParams } from 'next/navigation';
 import { useMemo, useState } from 'react';
 import { toast } from 'sonner';
@@ -23,9 +23,9 @@ import {
   AlertDialogHeader,
   AlertDialogTitle,
 } from '@/components/ui/alert-dialog';
+import { Button } from '@/components/ui/button';
 import { buildUrlWithConfig, worldConfigToEnvMap } from '@/lib/config';
 import type { WorldConfig } from '@/lib/config-world';
-import { BackLink } from './display-utils/back-link';
 import { CancelButton } from './display-utils/cancel-button';
 import { CopyableText } from './display-utils/copyable-text';
 import { LiveStatus } from './display-utils/live-status';
@@ -211,9 +211,15 @@ export function RunDetailView({
         style={{ height: 'calc(100vh - 7rem)' }}
       >
         <div className="flex-none space-y-6">
-          <BackLink
-            href={buildUrlWithConfig('/', config, undefined, searchParams)}
-          />
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={() => router.back()}
+            className="gap-2"
+          >
+            <ChevronLeft className="size-4" />
+            Back
+          </Button>
 
           {/* Run Overview Header */}
           <div className="space-y-4 pb-6 border-b">
diff --git a/packages/web/src/components/settings-dropdown.tsx b/packages/web/src/components/settings-dropdown.tsx
index b93dfa60f..f4c4699f7 100644
--- a/packages/web/src/components/settings-dropdown.tsx
+++ b/packages/web/src/components/settings-dropdown.tsx
@@ -49,7 +49,7 @@ export function SettingsDropdown() {
     <>
       <DropdownMenu>
         <DropdownMenuTrigger asChild>
-          <Button variant="outline" size="icon" className="rounded-full">
+          <Button variant="outline" size="icon">
             <Settings className="h-[1.2rem] w-[1.2rem]" />
             <span className="sr-only">Settings</span>
           </Button>
diff --git a/packages/web/src/components/settings-sidebar.tsx b/packages/web/src/components/settings-sidebar.tsx
index ec1cdee95..a6363fa09 100644
--- a/packages/web/src/components/settings-sidebar.tsx
+++ b/packages/web/src/components/settings-sidebar.tsx
@@ -111,13 +111,14 @@ export function SettingsSidebar({
             <div className="p-6">
               <div className="flex items-center justify-between mb-6">
                 <h2 className="text-2xl font-bold">Configuration</h2>
-                <button
+                <Button
                   type="button"
                   onClick={() => setIsOpen(false)}
-                  className="p-2 hover:bg-accent rounded-full transition-colors"
+                  variant="outline"
+                  size="icon"
                 >
                   <X className="h-5 w-5" />
-                </button>
+                </Button>
               </div>
 
               <div className="space-y-4">
diff --git a/packages/web/src/components/stream-detail-view.tsx b/packages/web/src/components/stream-detail-view.tsx
index a11d3b7d5..ca2116016 100644
--- a/packages/web/src/components/stream-detail-view.tsx
+++ b/packages/web/src/components/stream-detail-view.tsx
@@ -1,11 +1,11 @@
 'use client';
 
 import { type EnvMap, readStream } from '@workflow/web-shared';
-import { useParams, useSearchParams } from 'next/navigation';
+import { ChevronLeft } from 'lucide-react';
+import { useParams, useRouter, useSearchParams } from 'next/navigation';
 import { useEffect, useRef, useState } from 'react';
+import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
-import { buildUrlWithConfig } from '@/lib/config';
-import { BackLink } from './display-utils/back-link';
 
 interface StreamDetailViewProps {
   env: EnvMap;
@@ -18,9 +18,7 @@ interface Chunk {
 }
 
 export function StreamDetailView({ env, streamId }: StreamDetailViewProps) {
-  const params = useParams();
-  const searchParams = useSearchParams();
-  const runId = params.runId as string | undefined;
+  const router = useRouter();
   const [chunks, setChunks] = useState<Chunk[]>([]);
   const [isLive, setIsLive] = useState(true);
   const [error, setError] = useState<string | null>(null);
@@ -105,15 +103,17 @@ export function StreamDetailView({ env, streamId }: StreamDetailViewProps) {
     };
   }, [env, streamId]);
 
-  // Determine back link - if we have a runId, go back to the run detail page, otherwise go home
-  // Note: buildUrlWithConfig expects WorldConfig, but env is EnvMap - this may need fixing
-  const backHref = runId
-    ? buildUrlWithConfig(`/run/${runId}`, env as any, undefined, searchParams)
-    : buildUrlWithConfig('/', env as any, undefined, searchParams);
-
   return (
     <div className="space-y-6">
-      <BackLink href={backHref} />
+      <Button
+        variant="ghost"
+        size="sm"
+        onClick={() => router.back()}
+        className="gap-2"
+      >
+        <ChevronLeft className="h-4 w-4" />
+        Back
+      </Button>
 
       <Card>
         <CardHeader>

From 53dacc14241e6f7a4e2d696fa8ebbd3eea60b2d9 Mon Sep 17 00:00:00 2001
From: Karthik Kalyanaraman <karthik@scale3labs.com>
Date: Sat, 22 Nov 2025 19:16:05 -0800
Subject: [PATCH 09/11] make font size small

---
 .../src/components/display-utils/status-badge.tsx  | 14 +++++++-------
 packages/web/src/components/stream-detail-view.tsx |  2 +-
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/web/src/components/display-utils/status-badge.tsx b/packages/web/src/components/display-utils/status-badge.tsx
index dbffea309..1cc28951c 100644
--- a/packages/web/src/components/display-utils/status-badge.tsx
+++ b/packages/web/src/components/display-utils/status-badge.tsx
@@ -18,19 +18,19 @@ export function StatusBadge({ status, context, className }: StatusBadgeProps) {
   const getStatusClasses = () => {
     switch (status) {
       case 'running':
-        return 'text-blue-600 dark:text-blue-600 font-semibold';
+        return 'text-blue-600 dark:text-blue-600 font-medium capitalize text-sm';
       case 'completed':
-        return 'text-green-600 dark:text-green-600 font-semibold';
+        return 'text-green-600 dark:text-green-600 font-medium capitalize text-sm';
       case 'failed':
-        return 'text-red-600 dark:text-red-600 font-semibold';
+        return 'text-red-600 dark:text-red-600 font-medium capitalize text-sm';
       case 'cancelled':
-        return 'text-yellow-600 dark:text-yellow-600 font-semibold';
+        return 'text-yellow-600 dark:text-yellow-600 font-medium capitalize text-sm';
       case 'pending':
-        return 'text-gray-600 dark:text-gray-600 font-semibold';
+        return 'text-gray-600 dark:text-gray-600 font-medium capitalize text-sm';
       case 'paused':
-        return 'text-orange-600 dark:text-orange-600 font-semibold';
+        return 'text-orange-600 dark:text-orange-600 font-medium capitalize text-sm';
       default:
-        return 'text-gray-600 dark:text-gray-600 font-semibold';
+        return 'text-gray-600 dark:text-gray-600 font-medium capitalize text-sm';
     }
   };
 
diff --git a/packages/web/src/components/stream-detail-view.tsx b/packages/web/src/components/stream-detail-view.tsx
index ca2116016..8a206ecc5 100644
--- a/packages/web/src/components/stream-detail-view.tsx
+++ b/packages/web/src/components/stream-detail-view.tsx
@@ -2,7 +2,7 @@
 
 import { type EnvMap, readStream } from '@workflow/web-shared';
 import { ChevronLeft } from 'lucide-react';
-import { useParams, useRouter, useSearchParams } from 'next/navigation';
+import { useRouter } from 'next/navigation';
 import { useEffect, useRef, useState } from 'react';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';

From ef0ab99497064dc2c58eb29f76e260360884a531 Mon Sep 17 00:00:00 2001
From: Karthik Kalyanaraman <karthik@scale3labs.com>
Date: Sat, 22 Nov 2025 20:23:27 -0800
Subject: [PATCH 10/11] Fix theme issue

---
 packages/web/src/app/layout-client.tsx        | 214 ++++++++----------
 .../web/src/components/run-detail-view.tsx    |   7 +-
 .../web/src/components/settings-dropdown.tsx  |  22 +-
 packages/web/src/lib/config.ts                |  11 +-
 4 files changed, 104 insertions(+), 150 deletions(-)

diff --git a/packages/web/src/app/layout-client.tsx b/packages/web/src/app/layout-client.tsx
index 78e46b99c..9fa15e969 100644
--- a/packages/web/src/app/layout-client.tsx
+++ b/packages/web/src/app/layout-client.tsx
@@ -2,9 +2,9 @@
 
 import { TooltipProvider } from '@radix-ui/react-tooltip';
 import Link from 'next/link';
-import { useRouter, useSearchParams } from 'next/navigation';
-import { ThemeProvider } from 'next-themes';
-import { useEffect } from 'react';
+import { usePathname, useRouter, useSearchParams } from 'next/navigation';
+import { ThemeProvider, useTheme } from 'next-themes';
+import { useEffect, useRef } from 'react';
 import { ConnectionStatus } from '@/components/display-utils/connection-status';
 import { SettingsDropdown } from '@/components/settings-dropdown';
 import { Toaster } from '@/components/ui/sonner';
@@ -15,33 +15,49 @@ interface LayoutClientProps {
   children: React.ReactNode;
 }
 
-export function LayoutClient({ children }: LayoutClientProps) {
+function LayoutContent({ children }: LayoutClientProps) {
   const router = useRouter();
+  const pathname = usePathname();
   const searchParams = useSearchParams();
   const config = useQueryParamConfig();
+  const { setTheme } = useTheme();
 
   const id = searchParams.get('id');
   const runId = searchParams.get('runId');
   const stepId = searchParams.get('stepId');
   const hookId = searchParams.get('hookId');
   const resource = searchParams.get('resource');
-  const theme = searchParams.get('theme') || 'system';
-
-  // Apply theme class to document
-  useEffect(() => {
-    const html = document.documentElement;
+  const themeParam = searchParams.get('theme');
 
-    // Remove existing theme classes
-    html.classList.remove('light', 'dark');
+  // Track if we've already handled the initial navigation
+  const hasNavigatedRef = useRef(false);
 
-    // Apply theme class (system will use CSS media query)
-    if (theme === 'light' || theme === 'dark') {
-      html.classList.add(theme);
+  // Sync theme from URL param to next-themes (one-time or when explicitly changed)
+  useEffect(() => {
+    if (
+      themeParam &&
+      (themeParam === 'light' ||
+        themeParam === 'dark' ||
+        themeParam === 'system')
+    ) {
+      setTheme(themeParam);
     }
-  }, [theme]);
+  }, [themeParam, setTheme]);
 
   // If initialized with a resource/id or direct ID params, we navigate to the appropriate page
+  // Only run this logic once on mount or when we're on the root path with special params
   useEffect(() => {
+    // Skip if we're not on the root path and we've already navigated
+    if (pathname !== '/' && hasNavigatedRef.current) {
+      return;
+    }
+
+    // Skip if we're already on a run page (prevents interference with back navigation)
+    if (pathname.startsWith('/run/')) {
+      hasNavigatedRef.current = true;
+      return;
+    }
+
     // Handle direct ID parameters (runId, stepId, hookId) without resource
     if (!resource) {
       if (runId) {
@@ -49,35 +65,21 @@ export function LayoutClient({ children }: LayoutClientProps) {
         let targetUrl: string;
         if (stepId) {
           // Open run with step sidebar
-          targetUrl = buildUrlWithConfig(
-            `/run/${runId}`,
-            config,
-            {
-              sidebar: 'step',
-              stepId,
-            },
-            searchParams
-          );
+          targetUrl = buildUrlWithConfig(`/run/${runId}`, config, {
+            sidebar: 'step',
+            stepId,
+          });
         } else if (hookId) {
           // Open run with hook sidebar
-          targetUrl = buildUrlWithConfig(
-            `/run/${runId}`,
-            config,
-            {
-              sidebar: 'hook',
-              hookId,
-            },
-            searchParams
-          );
+          targetUrl = buildUrlWithConfig(`/run/${runId}`, config, {
+            sidebar: 'hook',
+            hookId,
+          });
         } else {
           // Just open the run
-          targetUrl = buildUrlWithConfig(
-            `/run/${runId}`,
-            config,
-            undefined,
-            searchParams
-          );
+          targetUrl = buildUrlWithConfig(`/run/${runId}`, config);
         }
+        hasNavigatedRef.current = true;
         router.push(targetUrl);
         return;
       }
@@ -92,103 +94,81 @@ export function LayoutClient({ children }: LayoutClientProps) {
 
     let targetUrl: string;
     if (resource === 'run') {
-      targetUrl = buildUrlWithConfig(
-        `/run/${id}`,
-        config,
-        undefined,
-        searchParams
-      );
+      targetUrl = buildUrlWithConfig(`/run/${id}`, config);
     } else if (resource === 'step' && runId) {
-      targetUrl = buildUrlWithConfig(
-        `/run/${runId}`,
-        config,
-        {
-          sidebar: 'step',
-          stepId: id,
-        },
-        searchParams
-      );
+      targetUrl = buildUrlWithConfig(`/run/${runId}`, config, {
+        sidebar: 'step',
+        stepId: id,
+      });
     } else if (resource === 'stream' && runId) {
-      targetUrl = buildUrlWithConfig(
-        `/run/${runId}`,
-        config,
-        {
-          sidebar: 'stream',
-          streamId: id,
-        },
-        searchParams
-      );
+      targetUrl = buildUrlWithConfig(`/run/${runId}`, config, {
+        sidebar: 'stream',
+        streamId: id,
+      });
     } else if (resource === 'event' && runId) {
-      targetUrl = buildUrlWithConfig(
-        `/run/${runId}`,
-        config,
-        {
-          sidebar: 'event',
-          eventId: id,
-        },
-        searchParams
-      );
+      targetUrl = buildUrlWithConfig(`/run/${runId}`, config, {
+        sidebar: 'event',
+        eventId: id,
+      });
     } else if (resource === 'hook' && runId) {
-      targetUrl = buildUrlWithConfig(
-        `/run/${runId}`,
-        config,
-        {
-          sidebar: 'hook',
-          hookId: id,
-        },
-        searchParams
-      );
+      targetUrl = buildUrlWithConfig(`/run/${runId}`, config, {
+        sidebar: 'hook',
+        hookId: id,
+      });
     } else if (resource === 'hook' && !runId) {
       // Hook without runId - go to home page with hook sidebar
-      targetUrl = buildUrlWithConfig(
-        '/',
-        config,
-        {
-          sidebar: 'hook',
-          hookId: id,
-        },
-        searchParams
-      );
+      targetUrl = buildUrlWithConfig('/', config, {
+        sidebar: 'hook',
+        hookId: id,
+      });
     } else {
       console.warn(`Can't deep-link to ${resource} ${id}.`);
       return;
     }
 
+    hasNavigatedRef.current = true;
     router.push(targetUrl);
-  }, [resource, id, runId, stepId, hookId, router, config, searchParams]);
+  }, [resource, id, runId, stepId, hookId, router, config, pathname]);
 
+  return (
+    <div className="min-h-screen px-6 pt-8">
+      <TooltipProvider delayDuration={0}>
+        <div>
+          <div className="flex items-start justify-between">
+            <div className="mb-8 items-center flex justify-between w-full">
+              <Link href="https://useworkflow.dev" target="_blank">
+                <h1
+                  className="flex items-center gap-2 mb-2"
+                  title="Workflow Observability"
+                >
+                  <Logo />
+                </h1>
+              </Link>
+              <div className="ml-auto flex items-center gap-2">
+                <ConnectionStatus config={config} />
+                <SettingsDropdown />
+              </div>
+            </div>
+          </div>
+
+          {children}
+        </div>
+      </TooltipProvider>
+      <Toaster />
+    </div>
+  );
+}
+
+export function LayoutClient({ children }: LayoutClientProps) {
   return (
     <ThemeProvider
       attribute="class"
-      defaultTheme={theme}
+      defaultTheme="system"
       enableSystem
       disableTransitionOnChange
+      storageKey="workflow-theme"
     >
-      <div className="min-h-screen px-6 pt-8">
-        <TooltipProvider delayDuration={0}>
-          <div>
-            <div className="flex items-start justify-between">
-              <div className="mb-8 items-center flex justify-between w-full">
-                <Link href="https://useworkflow.dev" target="_blank">
-                  <h1
-                    className="flex items-center gap-2 mb-2"
-                    title="Workflow Observability"
-                  >
-                    <Logo />
-                  </h1>
-                </Link>
-                <div className="ml-auto flex items-center gap-2">
-                  <ConnectionStatus config={config} />
-                  <SettingsDropdown />
-                </div>
-              </div>
-            </div>
-
-            {children}
-          </div>
-        </TooltipProvider>
-        <Toaster />
-      </div>
+      <LayoutContent>{children}</LayoutContent>
     </ThemeProvider>
   );
 }
diff --git a/packages/web/src/components/run-detail-view.tsx b/packages/web/src/components/run-detail-view.tsx
index d60361f22..34283b13f 100644
--- a/packages/web/src/components/run-detail-view.tsx
+++ b/packages/web/src/components/run-detail-view.tsx
@@ -9,7 +9,7 @@ import {
   WorkflowTraceViewer,
 } from '@workflow/web-shared';
 import { AlertCircle, ChevronLeft, Loader2 } from 'lucide-react';
-import { useRouter, useSearchParams } from 'next/navigation';
+import { useRouter } from 'next/navigation';
 import { useMemo, useState } from 'react';
 import { toast } from 'sonner';
 import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
@@ -47,7 +47,6 @@ export function RunDetailView({
   selectedId: _selectedId,
 }: RunDetailViewProps) {
   const router = useRouter();
-  const searchParams = useSearchParams();
   const [cancelling, setCancelling] = useState(false);
   const [rerunning, setRerunning] = useState(false);
   const [showCancelDialog, setShowCancelDialog] = useState(false);
@@ -108,9 +107,7 @@ export function RunDetailView({
         description: `Run ID: ${newRunId}`,
       });
       // Navigate to the new run
-      router.push(
-        buildUrlWithConfig(`/run/${newRunId}`, config, undefined, searchParams)
-      );
+      router.push(buildUrlWithConfig(`/run/${newRunId}`, config));
     } catch (err) {
       console.error('Failed to re-run workflow:', err);
       toast.error('Failed to start new run', {
diff --git a/packages/web/src/components/settings-dropdown.tsx b/packages/web/src/components/settings-dropdown.tsx
index f4c4699f7..34bf0fe88 100644
--- a/packages/web/src/components/settings-dropdown.tsx
+++ b/packages/web/src/components/settings-dropdown.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { Monitor, Moon, Settings, Sun } from 'lucide-react';
-import { usePathname, useRouter, useSearchParams } from 'next/navigation';
+import { useTheme } from 'next-themes';
 import { useState } from 'react';
 import { Button } from '@/components/ui/button';
 import {
@@ -27,23 +27,9 @@ function SettingsSidebarDialog({
 }
 
 export function SettingsDropdown() {
-  const router = useRouter();
-  const pathname = usePathname();
-  const searchParams = useSearchParams();
   const [settingsOpen, setSettingsOpen] = useState(false);
-  const currentTheme = searchParams.get('theme') || 'system';
-
-  const updateTheme = (theme: string) => {
-    const params = new URLSearchParams(searchParams.toString());
-    if (theme === 'system') {
-      params.delete('theme');
-    } else {
-      params.set('theme', theme);
-    }
-    const queryString = params.toString();
-    const newUrl = queryString ? `${pathname}?${queryString}` : pathname;
-    router.push(newUrl);
-  };
+  const { theme, setTheme } = useTheme();
+  const currentTheme = theme || 'system';
 
   return (
     <>
@@ -59,7 +45,7 @@ export function SettingsDropdown() {
             <DropdownMenuLabel className="px-0 mb-0">Theme</DropdownMenuLabel>
             <SegmentedControl
               value={currentTheme}
-              onValueChange={updateTheme}
+              onValueChange={setTheme}
               options={[
                 {
                   value: 'system',
diff --git a/packages/web/src/lib/config.ts b/packages/web/src/lib/config.ts
index cbaa76a94..a58f15f6e 100644
--- a/packages/web/src/lib/config.ts
+++ b/packages/web/src/lib/config.ts
@@ -78,21 +78,12 @@ export function useUpdateConfigQueryParams() {
 export function buildUrlWithConfig(
   path: string,
   config: WorldConfig,
-  additionalParams?: Record<string, string>,
-  currentSearchParams?: URLSearchParams
+  additionalParams?: Record<string, string>
 ): string {
   // Serialize config params using nuqs
   const queryString = serializeConfig(config);
   const params = new URLSearchParams(queryString);
 
-  // Preserve theme parameter from current URL if present
-  if (currentSearchParams) {
-    const theme = currentSearchParams.get('theme');
-    if (theme) {
-      params.set('theme', theme);
-    }
-  }
-
   // Add additional params
   if (additionalParams) {
     for (const [key, value] of Object.entries(additionalParams)) {

From 0af4c2d89f8486aba689b6f4a1c382f5b4d6d3f5 Mon Sep 17 00:00:00 2001
From: Karthik Kalyanaraman <karthik@scale3labs.com>
Date: Sun, 23 Nov 2025 12:39:13 -0800
Subject: [PATCH 11/11] workflow views

---
 .changeset/graph-step-traversal.md            |   6 +
 packages/builders/src/apply-swc-transform.ts  |  49 +-
 packages/builders/src/base-builder.ts         |  89 ++-
 packages/builders/src/standalone.ts           |  21 +
 packages/next/src/builder.ts                  |  48 ++
 .../transform/src/graph.rs                    | 220 ++++++
 .../swc-plugin-workflow/transform/src/lib.rs  | 671 +++++++++++++++---
 .../transform/tests/graph.rs                  |  26 +
 .../tests/graph/loop-step-call/input.js       |  12 +
 .../graph/loop-step-call/output-graph.js      |  12 +
 .../tests/graph/map-callback/input.js         |  10 +
 .../tests/graph/map-callback/output-graph.js  |  10 +
 .../tests/graph/tool-reference/input.js       |  17 +
 .../graph/tool-reference/output-graph.js      |  17 +
 .../web-shared/src/api/workflow-api-client.ts |   2 +-
 .../src/api/workflow-server-actions.ts        |  37 +
 packages/web-shared/src/index.ts              |   5 +-
 packages/web/package.json                     |   2 +
 packages/web/src/app/page.tsx                 |  42 +-
 .../web/src/components/run-detail-view.tsx    | 118 ++-
 packages/web/src/components/ui/badge.tsx      |  36 +
 packages/web/src/components/ui/sheet.tsx      | 139 ++++
 .../workflow-graph-execution-viewer.tsx       | 415 +++++++++++
 .../src/components/workflow-graph-viewer.css  |  46 ++
 .../src/components/workflow-graph-viewer.tsx  | 188 +++++
 .../web/src/components/workflows-list.tsx     | 193 +++++
 .../web/src/lib/graph-execution-mapper.ts     | 381 ++++++++++
 packages/web/src/lib/url-state.ts             |   7 +
 packages/web/src/lib/use-workflow-graph.ts    |  61 ++
 packages/web/src/lib/workflow-graph-types.ts  |  76 ++
 pnpm-lock.yaml                                | 109 ++-
 workbench/nextjs-turbopack/public/.gitignore  |   3 +
 32 files changed, 2934 insertions(+), 134 deletions(-)
 create mode 100644 .changeset/graph-step-traversal.md
 create mode 100644 packages/swc-plugin-workflow/transform/src/graph.rs
 create mode 100644 packages/swc-plugin-workflow/transform/tests/graph.rs
 create mode 100644 packages/swc-plugin-workflow/transform/tests/graph/loop-step-call/input.js
 create mode 100644 packages/swc-plugin-workflow/transform/tests/graph/loop-step-call/output-graph.js
 create mode 100644 packages/swc-plugin-workflow/transform/tests/graph/map-callback/input.js
 create mode 100644 packages/swc-plugin-workflow/transform/tests/graph/map-callback/output-graph.js
 create mode 100644 packages/swc-plugin-workflow/transform/tests/graph/tool-reference/input.js
 create mode 100644 packages/swc-plugin-workflow/transform/tests/graph/tool-reference/output-graph.js
 create mode 100644 packages/web/src/components/ui/badge.tsx
 create mode 100644 packages/web/src/components/ui/sheet.tsx
 create mode 100644 packages/web/src/components/workflow-graph-execution-viewer.tsx
 create mode 100644 packages/web/src/components/workflow-graph-viewer.css
 create mode 100644 packages/web/src/components/workflow-graph-viewer.tsx
 create mode 100644 packages/web/src/components/workflows-list.tsx
 create mode 100644 packages/web/src/lib/graph-execution-mapper.ts
 create mode 100644 packages/web/src/lib/use-workflow-graph.ts
 create mode 100644 packages/web/src/lib/workflow-graph-types.ts
 create mode 100644 workbench/nextjs-turbopack/public/.gitignore

diff --git a/.changeset/graph-step-traversal.md b/.changeset/graph-step-traversal.md
new file mode 100644
index 000000000..f67dc141a
--- /dev/null
+++ b/.changeset/graph-step-traversal.md
@@ -0,0 +1,6 @@
+---
+'@workflow/swc-plugin': patch
+---
+
+Fix graph mode traversal so it walks workflow bodies with a DFS pass, capturing direct calls, callbacks, and nested workflow references in the emitted graph manifest.
+
diff --git a/packages/builders/src/apply-swc-transform.ts b/packages/builders/src/apply-swc-transform.ts
index c4fc76616..cec2d89cb 100644
--- a/packages/builders/src/apply-swc-transform.ts
+++ b/packages/builders/src/apply-swc-transform.ts
@@ -20,10 +20,38 @@ export type WorkflowManifest = {
   };
 };
 
+export type GraphManifest = {
+  version: string;
+  workflows: {
+    [workflowName: string]: {
+      workflowId: string;
+      workflowName: string;
+      filePath: string;
+      nodes: Array<{
+        id: string;
+        type: string;
+        position: { x: number; y: number };
+        data: {
+          label: string;
+          nodeKind: string;
+          stepId?: string;
+          line: number;
+        };
+      }>;
+      edges: Array<{
+        id: string;
+        source: string;
+        target: string;
+        type: string;
+      }>;
+    };
+  };
+};
+
 export async function applySwcTransform(
   filename: string,
   source: string,
-  mode: 'workflow' | 'step' | 'client' | false,
+  mode: 'workflow' | 'step' | 'client' | 'graph' | false,
   jscConfig?: {
     paths?: Record<string, string[]>;
     // this must be absolute path
@@ -32,6 +60,7 @@ export async function applySwcTransform(
 ): Promise<{
   code: string;
   workflowManifest: WorkflowManifest;
+  graphManifest?: GraphManifest;
 }> {
   // Determine if this is a TypeScript file
   const isTypeScript = filename.endsWith('.ts') || filename.endsWith('.tsx');
@@ -65,12 +94,24 @@ export async function applySwcTransform(
     /\/\*\*__internal_workflows({.*?})\*\//s
   );
 
-  const parsedWorkflows = JSON.parse(
-    workflowCommentMatch?.[1] || '{}'
-  ) as WorkflowManifest;
+  const metadata = JSON.parse(workflowCommentMatch?.[1] || '{}');
+
+  const parsedWorkflows = {
+    steps: metadata.steps,
+    workflows: metadata.workflows,
+  } as WorkflowManifest;
+
+  // Extract graph manifest from separate comment
+  const graphCommentMatch = result.code.match(
+    /\/\*\*__workflow_graph({.*?})\*\//s
+  );
+  const graphManifest = graphCommentMatch?.[1]
+    ? (JSON.parse(graphCommentMatch[1]) as GraphManifest)
+    : undefined;
 
   return {
     code: result.code,
     workflowManifest: parsedWorkflows || {},
+    graphManifest,
   };
 }
diff --git a/packages/builders/src/base-builder.ts b/packages/builders/src/base-builder.ts
index 4319251d2..e20f08c3d 100644
--- a/packages/builders/src/base-builder.ts
+++ b/packages/builders/src/base-builder.ts
@@ -7,7 +7,7 @@ import enhancedResolveOriginal from 'enhanced-resolve';
 import * as esbuild from 'esbuild';
 import { findUp } from 'find-up';
 import { glob } from 'tinyglobby';
-import type { WorkflowManifest } from './apply-swc-transform.js';
+import type { GraphManifest, WorkflowManifest } from './apply-swc-transform.js';
 import { createDiscoverEntriesPlugin } from './discover-entries-esbuild-plugin.js';
 import { createNodeModuleErrorPlugin } from './node-module-esbuild-plugin.js';
 import { createSwcPlugin } from './swc-esbuild-plugin.js';
@@ -838,4 +838,91 @@ export const OPTIONS = handler;`;
       // We're intentionally silently ignoring this error - creating .gitignore isn't critical
     }
   }
+
+  /**
+   * Creates a graph manifest JSON file by running the SWC plugin in 'graph' mode.
+   * The manifest contains React Flow-compatible graph data for visualizing workflows.
+   */
+  protected async createGraphManifest({
+    inputFiles,
+    outfile,
+    tsBaseUrl,
+    tsPaths,
+  }: {
+    inputFiles: string[];
+    outfile: string;
+    tsBaseUrl?: string;
+    tsPaths?: Record<string, string[]>;
+  }): Promise<void> {
+    const graphBuildStart = Date.now();
+    console.log('Creating workflow graph manifest...');
+
+    const { discoveredWorkflows: workflowFiles } = await this.discoverEntries(
+      inputFiles,
+      dirname(outfile)
+    );
+
+    if (workflowFiles.length === 0) {
+      console.log('No workflow files found, skipping graph generation');
+      return;
+    }
+
+    // Import applySwcTransform dynamically
+    const { applySwcTransform } = await import('./apply-swc-transform.js');
+
+    // Aggregate all graph data from all workflow files
+    const combinedGraphManifest: GraphManifest = {
+      version: '1.0.0',
+      workflows: {},
+    };
+
+    for (const workflowFile of workflowFiles) {
+      try {
+        const source = await readFile(workflowFile, 'utf-8');
+        const normalizedWorkingDir = this.config.workingDir.replace(/\\/g, '/');
+        const normalizedFile = workflowFile.replace(/\\/g, '/');
+        let relativePath = relative(
+          normalizedWorkingDir,
+          normalizedFile
+        ).replace(/\\/g, '/');
+        if (!relativePath.startsWith('.')) {
+          relativePath = `./${relativePath}`;
+        }
+
+        const { graphManifest } = await applySwcTransform(
+          relativePath,
+          source,
+          'graph',
+          {
+            paths: tsPaths,
+            baseUrl: tsBaseUrl,
+          }
+        );
+
+        if (graphManifest && graphManifest.workflows) {
+          // Merge the workflows from this file into the combined manifest
+          Object.assign(
+            combinedGraphManifest.workflows,
+            graphManifest.workflows
+          );
+        }
+      } catch (error) {
+        console.warn(
+          `Failed to extract graph from ${workflowFile}:`,
+          error instanceof Error ? error.message : String(error)
+        );
+      }
+    }
+
+    // Write the combined graph manifest
+    await this.ensureDirectory(outfile);
+    await writeFile(outfile, JSON.stringify(combinedGraphManifest, null, 2));
+
+    console.log(
+      `Created graph manifest with ${
+        Object.keys(combinedGraphManifest.workflows).length
+      } workflow(s)`,
+      `${Date.now() - graphBuildStart}ms`
+    );
+  }
 }
diff --git a/packages/builders/src/standalone.ts b/packages/builders/src/standalone.ts
index c4ef2c936..b62396e35 100644
--- a/packages/builders/src/standalone.ts
+++ b/packages/builders/src/standalone.ts
@@ -13,6 +13,7 @@ export class StandaloneBuilder extends BaseBuilder {
     await this.buildStepsBundle(options);
     await this.buildWorkflowsBundle(options);
     await this.buildWebhookFunction();
+    await this.buildGraphManifest(options);
 
     await this.createClientLibrary();
   }
@@ -76,4 +77,24 @@ export class StandaloneBuilder extends BaseBuilder {
       outfile: webhookBundlePath,
     });
   }
+
+  private async buildGraphManifest({
+    inputFiles,
+    tsPaths,
+    tsBaseUrl,
+  }: {
+    inputFiles: string[];
+    tsBaseUrl?: string;
+    tsPaths?: Record<string, string[]>;
+  }): Promise<void> {
+    const graphManifestPath = this.resolvePath('.swc/graph-manifest.json');
+    await this.ensureDirectory(graphManifestPath);
+
+    await this.createGraphManifest({
+      inputFiles,
+      outfile: graphManifestPath,
+      tsBaseUrl,
+      tsPaths,
+    });
+  }
 }
diff --git a/packages/next/src/builder.ts b/packages/next/src/builder.ts
index 28a52e681..8ade4a666 100644
--- a/packages/next/src/builder.ts
+++ b/packages/next/src/builder.ts
@@ -46,6 +46,20 @@ export async function getNextBuilder() {
       const stepsBuildContext = await this.buildStepsFunction(options);
       const workflowsBundle = await this.buildWorkflowsFunction(options);
       await this.buildWebhookRoute({ workflowGeneratedDir });
+
+      // Write graph manifest to workflow data directory
+      const workflowDataDir = join(
+        this.config.workingDir,
+        '.next/workflow-data'
+      );
+      await mkdir(workflowDataDir, { recursive: true });
+      await this.createGraphManifest({
+        inputFiles: options.inputFiles,
+        outfile: join(workflowDataDir, 'graph-manifest.json'),
+        tsBaseUrl: options.tsBaseUrl,
+        tsPaths: options.tsPaths,
+      });
+
       await this.writeFunctionsConfig(outputDir);
 
       if (this.config.watch) {
@@ -166,6 +180,23 @@ export async function getNextBuilder() {
             );
           }
           workflowsCtx = newWorkflowsCtx;
+
+          // Rebuild graph manifest to workflow data directory
+          try {
+            const workflowDataDir = join(
+              this.config.workingDir,
+              '.next/workflow-data'
+            );
+            await mkdir(workflowDataDir, { recursive: true });
+            await this.createGraphManifest({
+              inputFiles: options.inputFiles,
+              outfile: join(workflowDataDir, 'graph-manifest.json'),
+              tsBaseUrl: options.tsBaseUrl,
+              tsPaths: options.tsPaths,
+            });
+          } catch (error) {
+            console.error('Failed to rebuild graph manifest:', error);
+          }
         };
 
         const logBuildMessages = (
@@ -220,6 +251,23 @@ export async function getNextBuilder() {
             'Rebuilt workflow bundle',
             `${Date.now() - rebuiltWorkflowStart}ms`
           );
+
+          // Rebuild graph manifest to workflow data directory
+          try {
+            const workflowDataDir = join(
+              this.config.workingDir,
+              '.next/workflow-data'
+            );
+            await mkdir(workflowDataDir, { recursive: true });
+            await this.createGraphManifest({
+              inputFiles: options.inputFiles,
+              outfile: join(workflowDataDir, 'graph-manifest.json'),
+              tsBaseUrl: options.tsBaseUrl,
+              tsPaths: options.tsPaths,
+            });
+          } catch (error) {
+            console.error('Failed to rebuild graph manifest:', error);
+          }
         };
 
         const isWatchableFile = (path: string) =>
diff --git a/packages/swc-plugin-workflow/transform/src/graph.rs b/packages/swc-plugin-workflow/transform/src/graph.rs
new file mode 100644
index 000000000..69b75e5b4
--- /dev/null
+++ b/packages/swc-plugin-workflow/transform/src/graph.rs
@@ -0,0 +1,220 @@
+use serde::Serialize;
+use std::collections::HashMap;
+
+#[derive(Debug, Serialize)]
+#[serde(rename_all = "camelCase")]
+pub struct WorkflowGraphManifest {
+    pub version: String,
+    pub workflows: HashMap<String, WorkflowGraph>,
+}
+
+#[derive(Debug, Serialize, Clone)]
+#[serde(rename_all = "camelCase")]
+pub struct WorkflowGraph {
+    pub workflow_id: String,
+    pub workflow_name: String,
+    pub file_path: String,
+    pub nodes: Vec<GraphNode>,
+    pub edges: Vec<GraphEdge>,
+}
+
+#[derive(Debug, Serialize, Clone)]
+#[serde(rename_all = "camelCase")]
+pub struct GraphNode {
+    pub id: String,
+    #[serde(rename = "type")]
+    pub node_type: String,
+    pub position: Position,
+    pub data: NodeData,
+}
+
+#[derive(Debug, Serialize, Clone)]
+pub struct Position {
+    pub x: f64,
+    pub y: f64,
+}
+
+#[derive(Debug, Serialize, Clone)]
+#[serde(rename_all = "camelCase")]
+pub struct NodeData {
+    pub label: String,
+    pub node_kind: String,
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub step_id: Option<String>,
+    pub line: usize,
+}
+
+#[derive(Debug, Serialize, Clone)]
+#[serde(rename_all = "camelCase")]
+pub struct GraphEdge {
+    pub id: String,
+    pub source: String,
+    pub target: String,
+    #[serde(rename = "type")]
+    pub edge_type: String,
+}
+
+#[derive(Debug)]
+pub struct GraphBuilder {
+    graphs: HashMap<String, WorkflowGraph>,
+    current_workflow: Option<String>,
+    current_y: f64,
+    node_count: usize,
+    prev_node_id: Option<String>,
+}
+
+impl GraphBuilder {
+    pub fn new() -> Self {
+        Self {
+            graphs: HashMap::new(),
+            current_workflow: None,
+            current_y: 0.0,
+            node_count: 0,
+            prev_node_id: None,
+        }
+    }
+
+    pub fn start_workflow(&mut self, name: &str, file_path: &str, workflow_id: &str) {
+        let graph = WorkflowGraph {
+            workflow_id: workflow_id.to_string(),
+            workflow_name: name.to_string(),
+            file_path: file_path.to_string(),
+            nodes: vec![],
+            edges: vec![],
+        };
+
+        self.graphs.insert(name.to_string(), graph);
+        self.current_workflow = Some(name.to_string());
+        self.current_y = 0.0;
+        self.node_count = 0;
+        self.prev_node_id = None;
+
+        // Add start node
+        self.add_node(
+            "start",
+            "workflowStart",
+            &format!("Start: {}", name),
+            "workflow_start",
+            None,
+            0,
+        );
+    }
+
+    pub fn add_step_node(&mut self, step_name: &str, step_id: &str, line: usize) {
+        let node_id = format!("node_{}", self.node_count);
+        self.add_node(
+            &node_id,
+            "step",
+            step_name,
+            "step",
+            Some(step_id.to_string()),
+            line,
+        );
+    }
+
+    pub fn add_workflow_node(&mut self, workflow_name: &str, workflow_id: &str, line: usize) {
+        let node_id = format!("node_{}", self.node_count);
+        self.add_node(
+            &node_id,
+            "workflowCall",
+            workflow_name,
+            "workflow",
+            Some(workflow_id.to_string()),
+            line,
+        );
+    }
+
+    fn add_node(
+        &mut self,
+        id: &str,
+        node_type: &str,
+        label: &str,
+        node_kind: &str,
+        step_id: Option<String>,
+        line: usize,
+    ) {
+        if let Some(workflow_name) = &self.current_workflow {
+            if let Some(graph) = self.graphs.get_mut(workflow_name) {
+                let node = GraphNode {
+                    id: id.to_string(),
+                    node_type: node_type.to_string(),
+                    position: Position {
+                        x: 250.0,
+                        y: self.current_y,
+                    },
+                    data: NodeData {
+                        label: label.to_string(),
+                        node_kind: node_kind.to_string(),
+                        step_id,
+                        line,
+                    },
+                };
+
+                // Add edge from previous node
+                if let Some(prev_id) = &self.prev_node_id {
+                    let edge = GraphEdge {
+                        id: format!("e_{}_{}", prev_id, id),
+                        source: prev_id.clone(),
+                        target: id.to_string(),
+                        edge_type: "default".to_string(),
+                    };
+                    graph.edges.push(edge);
+                }
+
+                graph.nodes.push(node);
+                self.prev_node_id = Some(id.to_string());
+                self.current_y += 100.0;
+                self.node_count += 1;
+            }
+        }
+    }
+
+    pub fn finish_workflow(&mut self) {
+        if let Some(workflow_name) = &self.current_workflow {
+            if let Some(graph) = self.graphs.get_mut(workflow_name) {
+                // Add end node
+                let end_node = GraphNode {
+                    id: "end".to_string(),
+                    node_type: "workflowEnd".to_string(),
+                    position: Position {
+                        x: 250.0,
+                        y: self.current_y,
+                    },
+                    data: NodeData {
+                        label: "Return".to_string(),
+                        node_kind: "workflow_end".to_string(),
+                        step_id: None,
+                        line: 0,
+                    },
+                };
+
+                // Add edge from last node to end
+                if let Some(prev_id) = &self.prev_node_id {
+                    let edge = GraphEdge {
+                        id: format!("e_{}_end", prev_id),
+                        source: prev_id.clone(),
+                        target: "end".to_string(),
+                        edge_type: "default".to_string(),
+                    };
+                    graph.edges.push(edge);
+                }
+
+                graph.nodes.push(end_node);
+            }
+        }
+
+        self.current_workflow = None;
+        self.prev_node_id = None;
+    }
+
+    pub fn to_manifest(self) -> WorkflowGraphManifest {
+        WorkflowGraphManifest {
+            version: "1.0.0".to_string(),
+            workflows: self.graphs,
+        }
+    }
+
+    pub fn has_workflows(&self) -> bool {
+        !self.graphs.is_empty()
+    }
+}
diff --git a/packages/swc-plugin-workflow/transform/src/lib.rs b/packages/swc-plugin-workflow/transform/src/lib.rs
index ac490f47a..b6a0a025d 100644
--- a/packages/swc-plugin-workflow/transform/src/lib.rs
+++ b/packages/swc-plugin-workflow/transform/src/lib.rs
@@ -1,12 +1,13 @@
+mod graph;
 mod naming;
 
 use serde::Deserialize;
-use std::collections::{HashSet, HashMap};
+use std::collections::{HashMap, HashSet};
 use swc_core::{
     common::{DUMMY_SP, SyntaxContext, errors::HANDLER},
     ecma::{
         ast::*,
-        visit::{VisitMut, VisitMutWith, noop_visit_mut_type},
+        visit::{Visit, VisitMut, VisitMutWith, VisitWith, noop_visit_mut_type},
     },
 };
 
@@ -144,6 +145,7 @@ pub enum TransformMode {
     Step,
     Workflow,
     Client,
+    Graph,
 }
 
 #[derive(Debug)]
@@ -196,11 +198,163 @@ pub struct StepTransform {
     // Track object properties that need to be converted to initializer calls in workflow mode
     // (parent_var_name, prop_name, step_id)
     object_property_workflow_conversions: Vec<(String, String, String)>,
+    // Graph builder for graph mode
+    graph_builder: Option<graph::GraphBuilder>,
+    pending_graph_workflows: Vec<(String, String, Function)>,
     // Current context: variable name being processed when visiting object properties
     #[allow(dead_code)]
     current_var_context: Option<String>,
 }
 
+#[derive(Debug, Clone, Copy, PartialEq, Eq)]
+enum GraphCallKind {
+    Step,
+    Workflow,
+}
+
+#[derive(Debug, Clone)]
+struct GraphCallEvent {
+    fn_name: String,
+    span: swc_core::common::Span,
+    kind: GraphCallKind,
+}
+
+#[derive(Debug, Clone)]
+struct GraphNodeRef {
+    name: String,
+    kind: GraphCallKind,
+}
+
+struct GraphUsageCollector<'a> {
+    step_function_names: &'a HashSet<String>,
+    workflow_function_names: &'a HashSet<String>,
+    aliases: HashMap<Id, GraphNodeRef>,
+    calls: Vec<GraphCallEvent>,
+}
+
+impl<'a> GraphUsageCollector<'a> {
+    fn new(
+        step_function_names: &'a HashSet<String>,
+        workflow_function_names: &'a HashSet<String>,
+    ) -> Self {
+        Self {
+            step_function_names,
+            workflow_function_names,
+            aliases: HashMap::new(),
+            calls: Vec::new(),
+        }
+    }
+
+    fn collect(mut self, function: &Function) -> Vec<GraphCallEvent> {
+        if let Some(body) = &function.body {
+            body.visit_with(&mut self);
+        }
+        self.calls
+    }
+
+    fn resolve_symbol_name(&self, name: &str) -> Option<GraphNodeRef> {
+        if self.step_function_names.contains(name) {
+            Some(GraphNodeRef {
+                name: name.to_string(),
+                kind: GraphCallKind::Step,
+            })
+        } else if self.workflow_function_names.contains(name) {
+            Some(GraphNodeRef {
+                name: name.to_string(),
+                kind: GraphCallKind::Workflow,
+            })
+        } else {
+            None
+        }
+    }
+
+    fn resolve_ident_direct(&self, ident: &Ident) -> Option<GraphNodeRef> {
+        self.resolve_symbol_name(&ident.sym.to_string())
+    }
+
+    fn resolve_ident(&self, ident: &Ident) -> Option<GraphNodeRef> {
+        if let Some(alias) = self.aliases.get(&ident.to_id()) {
+            return Some(alias.clone());
+        }
+        self.resolve_ident_direct(ident)
+    }
+
+    fn resolve_expr_to_node(&self, expr: &Expr) -> Option<GraphNodeRef> {
+        match expr {
+            Expr::Ident(ident) => self.resolve_ident(ident),
+            Expr::Paren(paren) => self.resolve_expr_to_node(&paren.expr),
+            Expr::Await(await_expr) => self.resolve_expr_to_node(&await_expr.arg),
+            _ => None,
+        }
+    }
+
+    fn resolve_callee(&self, callee: &Callee) -> Option<GraphNodeRef> {
+        match callee {
+            Callee::Expr(expr) => self.resolve_expr_to_node(expr),
+            _ => None,
+        }
+    }
+
+    fn record_usage(&mut self, node: GraphNodeRef, span: swc_core::common::Span) {
+        self.calls.push(GraphCallEvent {
+            fn_name: node.name,
+            span,
+            kind: node.kind,
+        });
+    }
+}
+
+impl<'a> Visit for GraphUsageCollector<'a> {
+    fn visit_call_expr(&mut self, call: &CallExpr) {
+        if let Some(node) = self.resolve_callee(&call.callee) {
+            self.record_usage(node, call.span);
+        }
+        match &call.callee {
+            Callee::Expr(expr) => {
+                if !matches!(expr.as_ref(), Expr::Ident(_)) {
+                    expr.visit_with(self);
+                }
+            }
+            Callee::Super(super_callee) => {
+                super_callee.visit_with(self);
+            }
+            Callee::Import(import) => {
+                import.visit_with(self);
+            }
+        }
+        for arg in &call.args {
+            arg.visit_with(self);
+        }
+        if let Some(type_args) = &call.type_args {
+            type_args.visit_with(self);
+        }
+    }
+
+    fn visit_expr(&mut self, expr: &Expr) {
+        match expr {
+            Expr::Ident(ident) => {
+                if let Some(node) = self.resolve_ident(ident) {
+                    self.record_usage(node, ident.span);
+                }
+            }
+            _ => {
+                expr.visit_children_with(self);
+            }
+        }
+    }
+
+    fn visit_var_declarator(&mut self, decl: &VarDeclarator) {
+        if let Some(init) = &decl.init {
+            if let Some(target) = self.resolve_expr_to_node(init) {
+                if let Pat::Ident(binding) = &decl.name {
+                    self.aliases.insert(binding.id.to_id(), target);
+                }
+            }
+        }
+        decl.visit_children_with(self);
+    }
+}
+
 // Structure to track variable names and their access patterns
 #[derive(Debug, Clone, PartialEq, Eq)]
 struct Name {
@@ -334,6 +488,10 @@ impl StepTransform {
                                     *stmt = Stmt::Empty(EmptyStmt { span: DUMMY_SP });
                                     return;
                                 }
+                                TransformMode::Graph => {
+                                    // No transformation in graph mode, but continue traversing
+                                    stmt.visit_mut_children_with(self);
+                                }
                             }
                         } else {
                             match self.mode {
@@ -376,6 +534,10 @@ impl StepTransform {
                                     self.remove_use_step_directive(&mut fn_decl.function.body);
                                     stmt.visit_mut_children_with(self);
                                 }
+                                TransformMode::Graph => {
+                                    // No transformation in graph mode, but continue traversing
+                                    stmt.visit_mut_children_with(self);
+                                }
                             }
                         }
                     }
@@ -425,21 +587,99 @@ impl StepTransform {
                                     .push((fn_name.clone(), fn_decl.function.span));
                                 stmt.visit_mut_children_with(self);
                             }
+                            TransformMode::Graph => {
+                                // No transformation in graph mode
+                                stmt.visit_mut_children_with(self);
+                            }
                         }
                     }
                 } else {
                     stmt.visit_mut_children_with(self);
                 }
             }
-            Stmt::Decl(Decl::Var(_)) => {
-                stmt.visit_mut_children_with(self);
-            }
             _ => {
+                // For all other statement types, continue traversing to detect nested step calls
                 stmt.visit_mut_children_with(self);
             }
         }
     }
+
+    fn queue_workflow_graph(
+        &mut self,
+        workflow_name: &str,
+        workflow_id: &str,
+        function: &Function,
+    ) {
+        if self.mode != TransformMode::Graph {
+            return;
+        }
+        self.pending_graph_workflows.push((
+            workflow_name.to_string(),
+            workflow_id.to_string(),
+            function.clone(),
+        ));
+    }
+
+    fn process_pending_workflow_graphs(&mut self) {
+        if self.mode != TransformMode::Graph {
+            return;
+        }
+        let pending = std::mem::take(&mut self.pending_graph_workflows);
+        for (workflow_name, workflow_id, function) in pending {
+            self.build_workflow_graph(&workflow_name, workflow_id, &function);
+        }
+    }
+
+    fn build_workflow_graph(
+        &mut self,
+        workflow_name: &str,
+        workflow_id: String,
+        function: &Function,
+    ) {
+        if self.mode != TransformMode::Graph {
+            return;
+        }
+
+        let Some(mut builder) = self.graph_builder.take() else {
+            return;
+        };
+
+        let collector =
+            GraphUsageCollector::new(&self.step_function_names, &self.workflow_function_names)
+                .collect(function);
+        eprintln!(
+            "[graph] collected {} calls for {}",
+            collector.len(),
+            workflow_name
+        );
+
+        let file_path = self.filename.clone();
+        builder.start_workflow(workflow_name, &file_path, &workflow_id);
+        for event in collector {
+            let line = event.span.lo.0 as usize;
+            match event.kind {
+                GraphCallKind::Step => {
+                    let step_id = self.create_id(Some(&event.fn_name), event.span, false);
+                    builder.add_step_node(&event.fn_name, &step_id, line);
+                }
+                GraphCallKind::Workflow => {
+                    let nested_id = self.create_id(Some(&event.fn_name), event.span, true);
+                    builder.add_workflow_node(&event.fn_name, &nested_id, line);
+                }
+            }
+        }
+        builder.finish_workflow();
+
+        self.graph_builder = Some(builder);
+    }
+
     pub fn new(mode: TransformMode, filename: String) -> Self {
+        let graph_builder = if mode == TransformMode::Graph {
+            Some(graph::GraphBuilder::new())
+        } else {
+            None
+        };
+
         Self {
             mode,
             filename,
@@ -466,6 +706,8 @@ impl StepTransform {
             nested_step_functions: Vec::new(),
             anonymous_fn_counter: 0,
             object_property_workflow_conversions: Vec::new(),
+            graph_builder,
+            pending_graph_workflows: Vec::new(),
             current_var_context: None,
         }
     }
@@ -498,12 +740,12 @@ impl StepTransform {
     fn generate_unique_name(&self, base_name: &str) -> String {
         let mut name = base_name.to_string();
         let mut counter = 0;
-        
+
         while self.declared_identifiers.contains(&name) {
             counter += 1;
             name = format!("{}${}", base_name, counter);
         }
-        
+
         name
     }
 
@@ -511,10 +753,27 @@ impl StepTransform {
     fn collect_declared_identifiers(&mut self, items: &[ModuleItem]) {
         for item in items {
             match item {
-                ModuleItem::Stmt(Stmt::Decl(decl)) => {
-                    match decl {
+                ModuleItem::Stmt(Stmt::Decl(decl)) => match decl {
+                    Decl::Fn(fn_decl) => {
+                        self.declared_identifiers
+                            .insert(fn_decl.ident.sym.to_string());
+                    }
+                    Decl::Var(var_decl) => {
+                        for declarator in &var_decl.decls {
+                            self.collect_idents_from_pat(&declarator.name);
+                        }
+                    }
+                    Decl::Class(class_decl) => {
+                        self.declared_identifiers
+                            .insert(class_decl.ident.sym.to_string());
+                    }
+                    _ => {}
+                },
+                ModuleItem::ModuleDecl(module_decl) => match module_decl {
+                    ModuleDecl::ExportDecl(export_decl) => match &export_decl.decl {
                         Decl::Fn(fn_decl) => {
-                            self.declared_identifiers.insert(fn_decl.ident.sym.to_string());
+                            self.declared_identifiers
+                                .insert(fn_decl.ident.sym.to_string());
                         }
                         Decl::Var(var_decl) => {
                             for declarator in &var_decl.decls {
@@ -522,60 +781,76 @@ impl StepTransform {
                             }
                         }
                         Decl::Class(class_decl) => {
-                            self.declared_identifiers.insert(class_decl.ident.sym.to_string());
+                            self.declared_identifiers
+                                .insert(class_decl.ident.sym.to_string());
                         }
                         _ => {}
-                    }
-                }
-                ModuleItem::ModuleDecl(module_decl) => {
-                    match module_decl {
-                        ModuleDecl::ExportDecl(export_decl) => {
-                            match &export_decl.decl {
-                                Decl::Fn(fn_decl) => {
-                                    self.declared_identifiers.insert(fn_decl.ident.sym.to_string());
-                                }
-                                Decl::Var(var_decl) => {
-                                    for declarator in &var_decl.decls {
-                                        self.collect_idents_from_pat(&declarator.name);
-                                    }
-                                }
-                                Decl::Class(class_decl) => {
-                                    self.declared_identifiers.insert(class_decl.ident.sym.to_string());
-                                }
-                                _ => {}
+                    },
+                    ModuleDecl::ExportDefaultDecl(default_decl) => match &default_decl.decl {
+                        DefaultDecl::Fn(fn_expr) => {
+                            if let Some(ident) = &fn_expr.ident {
+                                self.declared_identifiers.insert(ident.sym.to_string());
                             }
                         }
-                        ModuleDecl::ExportDefaultDecl(default_decl) => {
-                            match &default_decl.decl {
-                                DefaultDecl::Fn(fn_expr) => {
-                                    if let Some(ident) = &fn_expr.ident {
-                                        self.declared_identifiers.insert(ident.sym.to_string());
-                                    }
-                                }
-                                DefaultDecl::Class(class_expr) => {
-                                    if let Some(ident) = &class_expr.ident {
-                                        self.declared_identifiers.insert(ident.sym.to_string());
-                                    }
-                                }
-                                _ => {}
+                        DefaultDecl::Class(class_expr) => {
+                            if let Some(ident) = &class_expr.ident {
+                                self.declared_identifiers.insert(ident.sym.to_string());
                             }
                         }
-                        ModuleDecl::Import(import_decl) => {
-                            for specifier in &import_decl.specifiers {
-                                match specifier {
-                                    ImportSpecifier::Named(named) => {
-                                        self.declared_identifiers.insert(named.local.sym.to_string());
-                                    }
-                                    ImportSpecifier::Default(default) => {
-                                        self.declared_identifiers.insert(default.local.sym.to_string());
-                                    }
-                                    ImportSpecifier::Namespace(namespace) => {
-                                        self.declared_identifiers.insert(namespace.local.sym.to_string());
-                                    }
+                        _ => {}
+                    },
+                    ModuleDecl::Import(import_decl) => {
+                        for specifier in &import_decl.specifiers {
+                            match specifier {
+                                ImportSpecifier::Named(named) => {
+                                    self.declared_identifiers
+                                        .insert(named.local.sym.to_string());
+                                }
+                                ImportSpecifier::Default(default) => {
+                                    self.declared_identifiers
+                                        .insert(default.local.sym.to_string());
+                                }
+                                ImportSpecifier::Namespace(namespace) => {
+                                    self.declared_identifiers
+                                        .insert(namespace.local.sym.to_string());
                                 }
                             }
                         }
-                        _ => {}
+                    }
+                    _ => {}
+                },
+                _ => {}
+            }
+        }
+    }
+
+    // Collect step and workflow function names in a pre-pass (for graph mode)
+    // This ensures we know about all step functions before traversing workflow bodies
+    fn collect_workflow_metadata(&mut self, items: &[ModuleItem]) {
+        for item in items {
+            match item {
+                ModuleItem::Stmt(Stmt::Decl(Decl::Fn(fn_decl))) => {
+                    self.collect_function_metadata(
+                        &fn_decl.function,
+                        &fn_decl.ident.sym.to_string(),
+                    );
+                }
+                ModuleItem::ModuleDecl(ModuleDecl::ExportDecl(export_decl)) => {
+                    if let Decl::Fn(fn_decl) = &export_decl.decl {
+                        self.collect_function_metadata(
+                            &fn_decl.function,
+                            &fn_decl.ident.sym.to_string(),
+                        );
+                    }
+                }
+                ModuleItem::ModuleDecl(ModuleDecl::ExportDefaultDecl(default_decl)) => {
+                    if let DefaultDecl::Fn(fn_expr) = &default_decl.decl {
+                        if let Some(ident) = &fn_expr.ident {
+                            self.collect_function_metadata(
+                                &fn_expr.function,
+                                &ident.sym.to_string(),
+                            );
+                        }
                     }
                 }
                 _ => {}
@@ -583,6 +858,23 @@ impl StepTransform {
         }
     }
 
+    // Helper to check if a function has step or workflow directive and collect metadata
+    fn collect_function_metadata(&mut self, func: &Function, name: &str) {
+        if let Some(body) = &func.body {
+            if let Some(first_stmt) = body.stmts.first() {
+                if let Stmt::Expr(ExprStmt { expr, .. }) = first_stmt {
+                    if let Expr::Lit(Lit::Str(Str { value, .. })) = &**expr {
+                        if value == "use step" {
+                            self.step_function_names.insert(name.to_string());
+                        } else if value == "use workflow" {
+                            self.workflow_function_names.insert(name.to_string());
+                        }
+                    }
+                }
+            }
+        }
+    }
+
     // Helper to collect identifiers from patterns (for destructuring, etc.)
     fn collect_idents_from_pat(&mut self, pat: &Pat) {
         match pat {
@@ -859,6 +1151,9 @@ impl StepTransform {
                                     TransformMode::Client => {
                                         // In client mode, just remove the directive (already done above)
                                     }
+                                    TransformMode::Graph => {
+                                        // No transformation in graph mode
+                                    }
                                 }
                             }
                         }
@@ -907,6 +1202,9 @@ impl StepTransform {
             TransformMode::Client => {
                 // In client mode, just remove the directive
             }
+            TransformMode::Graph => {
+                // No transformation in graph mode
+            }
         }
     }
 
@@ -1957,7 +2255,8 @@ impl StepTransform {
                 .map(|fn_name| {
                     // Check if this export name has a different const name (e.g., "default" -> "__default")
                     let fn_name_str: &str = fn_name;
-                    let actual_name = self.workflow_export_to_const_name
+                    let actual_name = self
+                        .workflow_export_to_const_name
                         .get(fn_name_str)
                         .map(|s| s.as_str())
                         .unwrap_or(fn_name_str);
@@ -2189,9 +2488,22 @@ impl<'a> VisitMut for ComprehensiveUsageCollector<'a> {
 
 impl VisitMut for StepTransform {
     fn visit_mut_program(&mut self, program: &mut Program) {
+        // In Graph mode, do a pre-pass to collect all step and workflow function names
+        // This ensures we know about all step functions before we start building the graph
+        if self.mode == TransformMode::Graph {
+            if let Program::Module(module) = program {
+                self.collect_workflow_metadata(&module.body);
+            }
+        }
+
         // First pass: collect step functions
         program.visit_mut_children_with(self);
 
+        // Ensure graph data is processed after traversing entire program
+        if self.mode == TransformMode::Graph {
+            self.process_pending_workflow_graphs();
+        }
+
         // Add necessary imports and registrations
         match program {
             Program::Module(module) => {
@@ -2212,6 +2524,41 @@ impl VisitMut for StepTransform {
                     TransformMode::Client => {
                         // No imports needed for client mode since step functions are not transformed
                     }
+                    TransformMode::Graph => {
+                        // Output graph as a comment in graph mode
+                        if let Some(builder) = self.graph_builder.take() {
+                            if builder.has_workflows() {
+                                let manifest = builder.to_manifest();
+                                // Output as a comment similar to workflow metadata
+                                if let Ok(json) = serde_json::to_string(&manifest) {
+                                    let comment = format!("/**__workflow_graph{}*/", json);
+                                    // Insert the graph comment at the beginning of the file
+                                    let insert_position = module
+                                        .body
+                                        .iter()
+                                        .position(|item| {
+                                            !matches!(
+                                                item,
+                                                ModuleItem::ModuleDecl(ModuleDecl::Import(_))
+                                            )
+                                        })
+                                        .unwrap_or(0);
+
+                                    module.body.insert(
+                                        insert_position,
+                                        ModuleItem::Stmt(Stmt::Expr(ExprStmt {
+                                            span: DUMMY_SP,
+                                            expr: Box::new(Expr::Lit(Lit::Str(Str {
+                                                span: DUMMY_SP,
+                                                value: comment.clone().into(),
+                                                raw: Some(comment.into()),
+                                            }))),
+                                        })),
+                                    );
+                                }
+                            }
+                        }
+                    }
                 }
 
                 // Add imports at the beginning
@@ -2421,6 +2768,9 @@ impl VisitMut for StepTransform {
                         TransformMode::Client => {
                             // No imports needed for workflow mode
                         }
+                        TransformMode::Graph => {
+                            // No imports needed for graph mode
+                        }
                     }
 
                     // Convert script statements to module items
@@ -2586,7 +2936,13 @@ impl VisitMut for StepTransform {
     fn visit_mut_module_items(&mut self, items: &mut Vec<ModuleItem>) {
         // Collect all declared identifiers to avoid naming collisions
         self.collect_declared_identifiers(items);
-        
+
+        // In Graph mode, collect all step and workflow function names first
+        // This ensures we know about all step functions before we start building the graph
+        if self.mode == TransformMode::Graph {
+            self.collect_workflow_metadata(items);
+        }
+
         // Check for file-level directives
         self.has_file_step_directive = self.check_module_directive(items);
         self.has_file_workflow_directive = self.check_module_workflow_directive(items);
@@ -2599,6 +2955,7 @@ impl VisitMut for StepTransform {
                         TransformMode::Step => value == "use step",
                         TransformMode::Workflow => value == "use workflow",
                         TransformMode::Client => value == "use step" || value == "use workflow",
+                        TransformMode::Graph => false,
                     };
                     if should_remove {
                         items.remove(0);
@@ -2922,8 +3279,9 @@ impl VisitMut for StepTransform {
         // Handle default workflow exports (workflow and client modes)
         // We need to: 1) find the export default position, 2) replace it with const declaration,
         // 3) add workflowId assignment, 4) add export default at the end
-        if (self.mode == TransformMode::Workflow || self.mode == TransformMode::Client) 
-            && !self.default_workflow_exports.is_empty() {
+        if (self.mode == TransformMode::Workflow || self.mode == TransformMode::Client)
+            && !self.default_workflow_exports.is_empty()
+        {
             let default_workflows: Vec<_> = self.default_workflow_exports.drain(..).collect();
             let default_exports: Vec<_> = self.default_exports_to_replace.drain(..).collect();
 
@@ -2931,8 +3289,8 @@ impl VisitMut for StepTransform {
             let mut export_position = None;
             for (i, item) in items.iter().enumerate() {
                 match item {
-                    ModuleItem::ModuleDecl(ModuleDecl::ExportDefaultExpr(_)) |
-                    ModuleItem::ModuleDecl(ModuleDecl::ExportDefaultDecl(_)) => {
+                    ModuleItem::ModuleDecl(ModuleDecl::ExportDefaultExpr(_))
+                    | ModuleItem::ModuleDecl(ModuleDecl::ExportDefaultDecl(_)) => {
                         export_position = Some(i);
                         break;
                     }
@@ -2947,35 +3305,46 @@ impl VisitMut for StepTransform {
                 // Insert in correct order: const, workflowId, export default
                 for (const_name, fn_expr, span) in default_workflows {
                     // Insert const declaration at the original export position
-                    items.insert(pos, ModuleItem::Stmt(Stmt::Decl(Decl::Var(Box::new(VarDecl {
-                        span: DUMMY_SP,
-                        ctxt: SyntaxContext::empty(),
-                        kind: VarDeclKind::Const,
-                        declare: false,
-                        decls: vec![VarDeclarator {
+                    items.insert(
+                        pos,
+                        ModuleItem::Stmt(Stmt::Decl(Decl::Var(Box::new(VarDecl {
                             span: DUMMY_SP,
-                            name: Pat::Ident(BindingIdent {
-                                id: Ident::new(const_name.clone().into(), DUMMY_SP, SyntaxContext::empty()),
-                                type_ann: None,
-                            }),
-                            init: Some(Box::new(fn_expr)),
-                            definite: false,
-                        }],
-                    })))));
-                    
+                            ctxt: SyntaxContext::empty(),
+                            kind: VarDeclKind::Const,
+                            declare: false,
+                            decls: vec![VarDeclarator {
+                                span: DUMMY_SP,
+                                name: Pat::Ident(BindingIdent {
+                                    id: Ident::new(
+                                        const_name.clone().into(),
+                                        DUMMY_SP,
+                                        SyntaxContext::empty(),
+                                    ),
+                                    type_ann: None,
+                                }),
+                                init: Some(Box::new(fn_expr)),
+                                definite: false,
+                            }],
+                        })))),
+                    );
+
                     // Insert workflowId assignment after const
-                    items.insert(pos + 1, ModuleItem::Stmt(
-                        self.create_workflow_id_assignment(&const_name, span),
-                    ));
+                    items.insert(
+                        pos + 1,
+                        ModuleItem::Stmt(self.create_workflow_id_assignment(&const_name, span)),
+                    );
 
                     // Insert export default at the end (after workflowId)
                     for (_export_name, replacement_expr) in &default_exports {
-                        items.insert(pos + 2, ModuleItem::ModuleDecl(ModuleDecl::ExportDefaultExpr(
-                            ExportDefaultExpr {
-                                span: DUMMY_SP,
-                                expr: Box::new(replacement_expr.clone()),
-                            },
-                        )));
+                        items.insert(
+                            pos + 2,
+                            ModuleItem::ModuleDecl(ModuleDecl::ExportDefaultExpr(
+                                ExportDefaultExpr {
+                                    span: DUMMY_SP,
+                                    expr: Box::new(replacement_expr.clone()),
+                                },
+                            )),
+                        );
                     }
                 }
             }
@@ -3212,6 +3581,9 @@ impl VisitMut for StepTransform {
                         // Step functions are completely removed in client mode
                         // This will be handled at a higher level
                     }
+                    TransformMode::Graph => {
+                        // No transformation in graph mode
+                    }
                 }
             }
         } else if self.has_workflow_directive(&fn_decl.function, false) {
@@ -3225,6 +3597,7 @@ impl VisitMut for StepTransform {
                 // It's valid - proceed with transformation
                 self.workflow_function_names.insert(fn_name.clone());
 
+                let mut graph_workflow_id: Option<String> = None;
                 match self.mode {
                     TransformMode::Step => {
                         // Workflow functions are not processed in step mode
@@ -3237,7 +3610,25 @@ impl VisitMut for StepTransform {
                         // Workflow functions are transformed in client mode
                         // This will be handled at a higher level
                     }
+                    TransformMode::Graph => {
+                        // Start tracking this workflow in graph mode
+                        let workflow_id =
+                            self.create_id(Some(&fn_name), fn_decl.function.span, true);
+                        graph_workflow_id = Some(workflow_id);
+                        // Set flag so we can detect step calls inside the workflow
+                        self.in_workflow_function = true;
+                    }
                 }
+
+                fn_decl.visit_mut_children_with(self);
+
+                // Finish workflow graph if we started one
+                if let Some(workflow_id) = graph_workflow_id {
+                    self.queue_workflow_graph(&fn_name, &workflow_id, &fn_decl.function);
+                    // Reset the flag
+                    self.in_workflow_function = false;
+                }
+                return;
             }
         }
 
@@ -3315,6 +3706,9 @@ impl VisitMut for StepTransform {
                                 self.remove_use_step_directive(&mut fn_decl.function.body);
                                 export_decl.visit_mut_children_with(self);
                             }
+                            TransformMode::Graph => {
+                                // No transformation in graph mode
+                            }
                         }
                     }
                 } else if is_workflow_function {
@@ -3395,6 +3789,19 @@ impl VisitMut for StepTransform {
                                 self.workflow_functions_needing_id
                                     .push((fn_name.clone(), fn_decl.function.span));
                             }
+                            TransformMode::Graph => {
+                                let workflow_id =
+                                    self.create_id(Some(&fn_name), fn_decl.function.span, true);
+                                self.in_workflow_function = true;
+                                fn_decl.visit_mut_children_with(self);
+                                self.queue_workflow_graph(
+                                    &fn_name,
+                                    &workflow_id,
+                                    &fn_decl.function,
+                                );
+                                self.in_workflow_function = old_in_workflow;
+                                return;
+                            }
                         }
                     }
                     // Visit children for workflow functions OUTSIDE the match to avoid borrow issues
@@ -3485,6 +3892,9 @@ impl VisitMut for StepTransform {
                                                         &mut fn_expr.function.body,
                                                     );
                                                 }
+                                                TransformMode::Graph => {
+                                                    // No transformation in graph mode
+                                                }
                                             }
                                         }
                                     } else if self
@@ -3567,8 +3977,13 @@ impl VisitMut for StepTransform {
                                                         fn_expr.function.span,
                                                     ));
                                                 }
+                                                TransformMode::Graph => {
+                                                    // No transformation in graph mode
+                                                }
                                             }
                                         }
+
+                                        self.in_workflow_function = old_in_workflow;
                                     }
                                 }
                                 Expr::Arrow(arrow_expr) => {
@@ -3615,6 +4030,9 @@ impl VisitMut for StepTransform {
                                                         &mut arrow_expr.body,
                                                     );
                                                 }
+                                                TransformMode::Graph => {
+                                                    // No transformation in graph mode
+                                                }
                                             }
                                         }
                                     } else if self.has_workflow_directive_arrow(arrow_expr, true) {
@@ -3700,6 +4118,9 @@ impl VisitMut for StepTransform {
                                                     self.workflow_functions_needing_id
                                                         .push((name.clone(), arrow_expr.span));
                                                 }
+                                                TransformMode::Graph => {
+                                                    // No transformation in graph mode
+                                                }
                                             }
                                         }
                                     }
@@ -3841,6 +4262,9 @@ impl VisitMut for StepTransform {
                                                 &mut fn_expr.function.body,
                                             );
                                         }
+                                        TransformMode::Graph => {
+                                            // No transformation in graph mode
+                                        }
                                     }
                                 }
                             } else if self.has_workflow_directive(&fn_expr.function, false) {
@@ -3901,6 +4325,9 @@ impl VisitMut for StepTransform {
                                             self.workflow_functions_needing_id
                                                 .push((name.clone(), fn_expr.function.span));
                                         }
+                                        TransformMode::Graph => {
+                                            // No transformation in graph mode
+                                        }
                                     }
                                 }
                             }
@@ -4005,6 +4432,9 @@ impl VisitMut for StepTransform {
                                                     span: DUMMY_SP,
                                                 }));
                                             }
+                                            TransformMode::Graph => {
+                                                // No transformation in graph mode
+                                            }
                                         }
                                     } else {
                                         // Not in a workflow function - handle normally
@@ -4062,6 +4492,9 @@ impl VisitMut for StepTransform {
                                                     &mut arrow_expr.body,
                                                 );
                                             }
+                                            TransformMode::Graph => {
+                                                // No transformation in graph mode
+                                            }
                                         }
                                     }
                                 }
@@ -4126,6 +4559,9 @@ impl VisitMut for StepTransform {
                                             self.workflow_functions_needing_id
                                                 .push((name.clone(), arrow_expr.span));
                                         }
+                                        TransformMode::Graph => {
+                                            // No transformation in graph mode
+                                        }
                                     }
                                 }
                             }
@@ -4267,14 +4703,16 @@ impl VisitMut for StepTransform {
                         let const_name = if fn_name == "default" {
                             // Anonymous: generate unique name
                             let unique_name = self.generate_unique_name("__default");
-                            self.workflow_export_to_const_name.insert("default".to_string(), unique_name.clone());
+                            self.workflow_export_to_const_name
+                                .insert("default".to_string(), unique_name.clone());
                             unique_name
                         } else {
                             // Named: use the function name
-                            self.workflow_export_to_const_name.insert("default".to_string(), fn_name.clone());
+                            self.workflow_export_to_const_name
+                                .insert("default".to_string(), fn_name.clone());
                             fn_name.clone()
                         };
-                        
+
                         // Always use "default" as the metadata key for default exports
                         self.workflow_function_names.insert("default".to_string());
 
@@ -4294,7 +4732,7 @@ impl VisitMut for StepTransform {
                                         Expr::Fn(fn_expr.clone()),
                                         fn_expr.function.span,
                                     ));
-                                    
+
                                     // Track for replacement with identifier
                                     self.default_exports_to_replace.push((
                                         fn_name.clone(),
@@ -4318,7 +4756,7 @@ impl VisitMut for StepTransform {
                             TransformMode::Client => {
                                 // In client mode, replace workflow function body with error throw
                                 self.remove_use_workflow_directive(&mut fn_expr.function.body);
-                                
+
                                 let error_msg = format!(
                                     "You attempted to execute workflow {} function directly. To start a workflow, use start({}) from workflow/api",
                                     const_name, const_name
@@ -4347,7 +4785,7 @@ impl VisitMut for StepTransform {
                                         arg: Box::new(error_expr),
                                     })];
                                 }
-                                
+
                                 // For anonymous functions, convert to const declaration so we can assign workflowId
                                 if fn_name == "default" {
                                     // Track for const declaration and workflowId assignment
@@ -4356,7 +4794,7 @@ impl VisitMut for StepTransform {
                                         Expr::Fn(fn_expr.clone()),
                                         fn_expr.function.span,
                                     ));
-                                    
+
                                     // Track for replacement with identifier
                                     self.default_exports_to_replace.push((
                                         fn_name.clone(),
@@ -4373,6 +4811,9 @@ impl VisitMut for StepTransform {
                                         .push((const_name, fn_expr.function.span));
                                 }
                             }
+                            TransformMode::Graph => {
+                                // No transformation in graph mode
+                            }
                         }
                     }
                 } else if self.should_transform_function(&fn_expr.function, true) {
@@ -4423,6 +4864,9 @@ impl VisitMut for StepTransform {
                                 // Transform step function body to use step run call
                                 self.remove_use_step_directive(&mut fn_expr.function.body);
                             }
+                            TransformMode::Graph => {
+                                // No transformation in graph mode
+                            }
                         }
                     }
                 }
@@ -4445,8 +4889,9 @@ impl VisitMut for StepTransform {
                         // Generate unique name first so we can use it in workflow_function_names
                         let unique_name = self.generate_unique_name("__default");
                         // For function expression default exports, track mapping from "default" to actual const name
-                        self.workflow_export_to_const_name.insert("default".to_string(), unique_name.clone());
-                        
+                        self.workflow_export_to_const_name
+                            .insert("default".to_string(), unique_name.clone());
+
                         // Always use "default" as the metadata key for default exports
                         self.workflow_function_names.insert("default".to_string());
 
@@ -4457,14 +4902,14 @@ impl VisitMut for StepTransform {
                             TransformMode::Workflow => {
                                 // In workflow mode, convert to const declaration
                                 self.remove_use_workflow_directive(&mut fn_expr.function.body);
-                                
+
                                 // Track for const declaration and workflowId assignment
                                 self.default_workflow_exports.push((
                                     unique_name.clone(),
                                     Expr::Fn(fn_expr.clone()),
                                     fn_expr.function.span,
                                 ));
-                                
+
                                 // Track for replacement with identifier
                                 self.default_exports_to_replace.push((
                                     "default".to_string(),
@@ -4506,14 +4951,14 @@ impl VisitMut for StepTransform {
                                         arg: Box::new(error_expr),
                                     })];
                                 }
-                                
+
                                 // Track for const declaration and workflowId assignment
                                 self.default_workflow_exports.push((
                                     unique_name.clone(),
                                     Expr::Fn(fn_expr.clone()),
                                     fn_expr.function.span,
                                 ));
-                                
+
                                 // Track for replacement with identifier
                                 self.default_exports_to_replace.push((
                                     "default".to_string(),
@@ -4524,6 +4969,9 @@ impl VisitMut for StepTransform {
                                     )),
                                 ));
                             }
+                            TransformMode::Graph => {
+                                // No transformation in graph mode
+                            }
                         }
                     }
                 } else if self.should_transform_function(&fn_expr.function, true) {
@@ -4545,11 +4993,12 @@ impl VisitMut for StepTransform {
                     } else {
                         // For arrow function default exports, generate unique name and track mapping
                         let unique_name = self.generate_unique_name("__default");
-                        self.workflow_export_to_const_name.insert("default".to_string(), unique_name.clone());
-                        
+                        self.workflow_export_to_const_name
+                            .insert("default".to_string(), unique_name.clone());
+
                         // Always use "default" as the metadata key for default exports
                         self.workflow_function_names.insert("default".to_string());
-                        
+
                         match self.mode {
                             TransformMode::Step => {
                                 // Workflow functions are not processed in step mode
@@ -4557,14 +5006,14 @@ impl VisitMut for StepTransform {
                             TransformMode::Workflow => {
                                 // In workflow mode, convert to const declaration
                                 self.remove_use_workflow_directive_arrow(&mut arrow_expr.body);
-                                
+
                                 // Track for const declaration and workflowId assignment
                                 self.default_workflow_exports.push((
                                     unique_name.clone(),
                                     Expr::Arrow(arrow_expr.clone()),
                                     arrow_expr.span,
                                 ));
-                                
+
                                 // Track for replacement with identifier
                                 self.default_exports_to_replace.push((
                                     "default".to_string(),
@@ -4609,14 +5058,14 @@ impl VisitMut for StepTransform {
                                         arg: Box::new(error_expr),
                                     })],
                                 }));
-                                
+
                                 // Track for const declaration and workflowId assignment
                                 self.default_workflow_exports.push((
                                     unique_name.clone(),
                                     Expr::Arrow(arrow_expr.clone()),
                                     arrow_expr.span,
                                 ));
-                                
+
                                 // Track for replacement with identifier
                                 self.default_exports_to_replace.push((
                                     "default".to_string(),
@@ -4627,6 +5076,9 @@ impl VisitMut for StepTransform {
                                     )),
                                 ));
                             }
+                            TransformMode::Graph => {
+                                // No transformation in graph mode
+                            }
                         }
                     }
                 } else if self.has_step_directive_arrow(arrow_expr, true) {
@@ -4797,6 +5249,9 @@ impl VisitMut for StepTransform {
                                                             &mut arrow_expr.body,
                                                         );
                                                     }
+                                                    TransformMode::Graph => {
+                                                        // No transformation in graph mode
+                                                    }
                                                 }
                                             }
                                         }
@@ -4867,6 +5322,9 @@ impl VisitMut for StepTransform {
                                                             &mut fn_expr.function.body,
                                                         );
                                                     }
+                                                    TransformMode::Graph => {
+                                                        // No transformation in graph mode
+                                                    }
                                                 }
                                             }
                                         }
@@ -4953,6 +5411,9 @@ impl VisitMut for StepTransform {
                                                     &mut method_prop.function.body,
                                                 );
                                             }
+                                            TransformMode::Graph => {
+                                                // No transformation in graph mode
+                                            }
                                         }
                                     }
                                 }
diff --git a/packages/swc-plugin-workflow/transform/tests/graph.rs b/packages/swc-plugin-workflow/transform/tests/graph.rs
new file mode 100644
index 000000000..5a9578018
--- /dev/null
+++ b/packages/swc-plugin-workflow/transform/tests/graph.rs
@@ -0,0 +1,26 @@
+use std::path::PathBuf;
+use swc_core::ecma::{
+    transforms::testing::{FixtureTestConfig, test_fixture},
+    visit::visit_mut_pass,
+};
+use swc_workflow::{StepTransform, TransformMode};
+
+#[testing::fixture("tests/graph/**/input.js")]
+fn graph_mode(input: PathBuf) {
+    let graph_output = input.parent().unwrap().join("output-graph.js");
+    test_fixture(
+        Default::default(),
+        &|_| {
+            visit_mut_pass(StepTransform::new(
+                TransformMode::Graph,
+                input.file_name().unwrap().to_string_lossy().to_string(),
+            ))
+        },
+        &input,
+        &graph_output,
+        FixtureTestConfig {
+            module: Some(true),
+            ..Default::default()
+        },
+    );
+}
diff --git a/packages/swc-plugin-workflow/transform/tests/graph/loop-step-call/input.js b/packages/swc-plugin-workflow/transform/tests/graph/loop-step-call/input.js
new file mode 100644
index 000000000..2acfe8fd5
--- /dev/null
+++ b/packages/swc-plugin-workflow/transform/tests/graph/loop-step-call/input.js
@@ -0,0 +1,12 @@
+export async function loopWorkflow(items) {
+  'use workflow';
+
+  for (const item of items) {
+    await stepFn(item);
+  }
+}
+
+async function stepFn(value) {
+  'use step';
+  return value;
+}
diff --git a/packages/swc-plugin-workflow/transform/tests/graph/loop-step-call/output-graph.js b/packages/swc-plugin-workflow/transform/tests/graph/loop-step-call/output-graph.js
new file mode 100644
index 000000000..3b97477f5
--- /dev/null
+++ b/packages/swc-plugin-workflow/transform/tests/graph/loop-step-call/output-graph.js
@@ -0,0 +1,12 @@
+/**__internal_workflows{"workflows":{"input.js":{"loopWorkflow":{"workflowId":"workflow//input.js//loopWorkflow"}}},"steps":{"input.js":{"stepFn":{"stepId":"step//input.js//stepFn"}}}}*/
+/**__workflow_graph{"version":"1.0.0","workflows":{"loopWorkflow":{"workflowId":"workflow//input.js//loopWorkflow","workflowName":"loopWorkflow","filePath":"input.js","nodes":[{"id":"start","type":"workflowStart","position":{"x":250.0,"y":0.0},"data":{"label":"Start: loopWorkflow","nodeKind":"workflow_start","line":0}},{"id":"node_1","type":"step","position":{"x":250.0,"y":100.0},"data":{"label":"stepFn","nodeKind":"step","stepId":"step//input.js//stepFn","line":104}},{"id":"end","type":"workflowEnd","position":{"x":250.0,"y":200.0},"data":{"label":"Return","nodeKind":"workflow_end","line":0}}],"edges":[{"id":"e_start_node_1","source":"start","target":"node_1","type":"default"},{"id":"e_node_1_end","source":"node_1","target":"end","type":"default"}]}}}*/
+export async function loopWorkflow(items) {
+  'use workflow';
+  for (const item of items) {
+    await stepFn(item);
+  }
+}
+async function stepFn(value) {
+  'use step';
+  return value;
+}
diff --git a/packages/swc-plugin-workflow/transform/tests/graph/map-callback/input.js b/packages/swc-plugin-workflow/transform/tests/graph/map-callback/input.js
new file mode 100644
index 000000000..0c5e8966e
--- /dev/null
+++ b/packages/swc-plugin-workflow/transform/tests/graph/map-callback/input.js
@@ -0,0 +1,10 @@
+async function logItem(item) {
+  'use step';
+  console.log(item);
+}
+
+export async function batchOverSteps(items) {
+  'use workflow';
+
+  await Promise.all(items.map(logItem));
+}
diff --git a/packages/swc-plugin-workflow/transform/tests/graph/map-callback/output-graph.js b/packages/swc-plugin-workflow/transform/tests/graph/map-callback/output-graph.js
new file mode 100644
index 000000000..0925323e6
--- /dev/null
+++ b/packages/swc-plugin-workflow/transform/tests/graph/map-callback/output-graph.js
@@ -0,0 +1,10 @@
+/**__internal_workflows{"workflows":{"input.js":{"batchOverSteps":{"workflowId":"workflow//input.js//batchOverSteps"}}},"steps":{"input.js":{"logItem":{"stepId":"step//input.js//logItem"}}}}*/
+/**__workflow_graph{"version":"1.0.0","workflows":{"batchOverSteps":{"workflowId":"workflow//input.js//batchOverSteps","workflowName":"batchOverSteps","filePath":"input.js","nodes":[{"id":"start","type":"workflowStart","position":{"x":250.0,"y":0.0},"data":{"label":"Start: batchOverSteps","nodeKind":"workflow_start","line":0}},{"id":"node_1","type":"step","position":{"x":250.0,"y":100.0},"data":{"label":"logItem","nodeKind":"step","stepId":"step//input.js//logItem","line":165}},{"id":"end","type":"workflowEnd","position":{"x":250.0,"y":200.0},"data":{"label":"Return","nodeKind":"workflow_end","line":0}}],"edges":[{"id":"e_start_node_1","source":"start","target":"node_1","type":"default"},{"id":"e_node_1_end","source":"node_1","target":"end","type":"default"}]}}}*/
+async function logItem(item) {
+  'use step';
+  console.log(item);
+}
+export async function batchOverSteps(items) {
+  'use workflow';
+  await Promise.all(items.map(logItem));
+}
diff --git a/packages/swc-plugin-workflow/transform/tests/graph/tool-reference/input.js b/packages/swc-plugin-workflow/transform/tests/graph/tool-reference/input.js
new file mode 100644
index 000000000..b0b96e3f7
--- /dev/null
+++ b/packages/swc-plugin-workflow/transform/tests/graph/tool-reference/input.js
@@ -0,0 +1,17 @@
+async function getWeatherInformation(city) {
+  'use step';
+  return `Weather for ${city}`;
+}
+
+export async function agent(prompt) {
+  'use workflow';
+
+  await generate({
+    prompt,
+    tools: {
+      weather: {
+        execute: getWeatherInformation,
+      },
+    },
+  });
+}
diff --git a/packages/swc-plugin-workflow/transform/tests/graph/tool-reference/output-graph.js b/packages/swc-plugin-workflow/transform/tests/graph/tool-reference/output-graph.js
new file mode 100644
index 000000000..ea75abb5c
--- /dev/null
+++ b/packages/swc-plugin-workflow/transform/tests/graph/tool-reference/output-graph.js
@@ -0,0 +1,17 @@
+/**__internal_workflows{"workflows":{"input.js":{"agent":{"workflowId":"workflow//input.js//agent"}}},"steps":{"input.js":{"getWeatherInformation":{"stepId":"step//input.js//getWeatherInformation"}}}}*/
+/**__workflow_graph{"version":"1.0.0","workflows":{"agent":{"workflowId":"workflow//input.js//agent","workflowName":"agent","filePath":"input.js","nodes":[{"id":"start","type":"workflowStart","position":{"x":250.0,"y":0.0},"data":{"label":"Start: agent","nodeKind":"workflow_start","line":0}},{"id":"node_1","type":"step","position":{"x":250.0,"y":100.0},"data":{"label":"getWeatherInformation","nodeKind":"step","stepId":"step//input.js//getWeatherInformation","line":230}},{"id":"end","type":"workflowEnd","position":{"x":250.0,"y":200.0},"data":{"label":"Return","nodeKind":"workflow_end","line":0}}],"edges":[{"id":"e_start_node_1","source":"start","target":"node_1","type":"default"},{"id":"e_node_1_end","source":"node_1","target":"end","type":"default"}]}}}*/
+async function getWeatherInformation(city) {
+  'use step';
+  return `Weather for ${city}`;
+}
+export async function agent(prompt) {
+  'use workflow';
+  await generate({
+    prompt,
+    tools: {
+      weather: {
+        execute: getWeatherInformation,
+      },
+    },
+  });
+}
diff --git a/packages/web-shared/src/api/workflow-api-client.ts b/packages/web-shared/src/api/workflow-api-client.ts
index ee1a7527b..3143c5524 100644
--- a/packages/web-shared/src/api/workflow-api-client.ts
+++ b/packages/web-shared/src/api/workflow-api-client.ts
@@ -64,7 +64,7 @@ export const getErrorMessage = (error: Error | WorkflowAPIError): string => {
 /**
  * Helper to handle server action results and throw WorkflowAPIError on failure
  */
-function unwrapServerActionResult<T>(result: {
+export function unwrapServerActionResult<T>(result: {
   success: boolean;
   data?: T;
   error?: ServerActionError;
diff --git a/packages/web-shared/src/api/workflow-server-actions.ts b/packages/web-shared/src/api/workflow-server-actions.ts
index 66230d452..fe0a98ed8 100644
--- a/packages/web-shared/src/api/workflow-server-actions.ts
+++ b/packages/web-shared/src/api/workflow-server-actions.ts
@@ -499,3 +499,40 @@ export async function readStreamServerAction(
     };
   }
 }
+
+/**
+ * Fetch the workflow graph manifest from the data directory
+ * The manifest is generated at build time and contains static structure info about workflows
+ */
+export async function fetchGraphManifest(
+  worldEnv: EnvMap
+): Promise<ServerActionResult<any>> {
+  try {
+    // Get the data directory from the world environment config
+    // This contains the correct absolute path passed from the client
+    const dataDir =
+      worldEnv.WORKFLOW_EMBEDDED_DATA_DIR ||
+      process.env.WORKFLOW_EMBEDDED_DATA_DIR ||
+      '.next/workflow-data';
+
+    // Read the manifest file
+    const fs = await import('fs/promises');
+    const path = await import('path');
+
+    // If dataDir is absolute, use it directly; otherwise join with cwd
+    const fullPath = path.isAbsolute(dataDir)
+      ? path.join(dataDir, 'graph-manifest.json')
+      : path.join(process.cwd(), dataDir, 'graph-manifest.json');
+
+    const content = await fs.readFile(fullPath, 'utf-8');
+    const manifest = JSON.parse(content);
+
+    return createResponse(manifest);
+  } catch (error) {
+    console.error('Failed to fetch graph manifest:', error);
+    return {
+      success: false,
+      error: createServerActionError(error, 'fetchGraphManifest', {}),
+    };
+  }
+}
diff --git a/packages/web-shared/src/index.ts b/packages/web-shared/src/index.ts
index f4cafdab8..f1592da95 100644
--- a/packages/web-shared/src/index.ts
+++ b/packages/web-shared/src/index.ts
@@ -6,7 +6,10 @@ export {
 export type { Event, Hook, Step, WorkflowRun } from '@workflow/world';
 export * from './api/workflow-api-client';
 export type { EnvMap } from './api/workflow-server-actions';
-export { fetchEventsByCorrelationId } from './api/workflow-server-actions';
+export {
+  fetchEventsByCorrelationId,
+  fetchGraphManifest,
+} from './api/workflow-server-actions';
 export { RunTraceView } from './run-trace-view';
 export type { Span, SpanEvent } from './trace-viewer/types';
 export { WorkflowTraceViewer } from './workflow-trace-view';
diff --git a/packages/web/package.json b/packages/web/package.json
index a7c1faa2b..641de4da7 100644
--- a/packages/web/package.json
+++ b/packages/web/package.json
@@ -26,7 +26,9 @@
     "format": "biome format --write"
   },
   "dependencies": {
+    "@radix-ui/react-dialog": "1.1.15",
     "@radix-ui/react-tabs": "^1.1.13",
+    "@xyflow/react": "12.9.3",
     "next": "15.5.4",
     "nuqs": "^2.2.5"
   },
diff --git a/packages/web/src/app/page.tsx b/packages/web/src/app/page.tsx
index 36e8572f6..be6c3e1e5 100644
--- a/packages/web/src/app/page.tsx
+++ b/packages/web/src/app/page.tsx
@@ -1,12 +1,21 @@
 'use client';
 
+import { AlertCircle } from 'lucide-react';
 import { useRouter } from 'next/navigation';
 import { ErrorBoundary } from '@/components/error-boundary';
 import { HooksTable } from '@/components/hooks-table';
 import { RunsTable } from '@/components/runs-table';
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { WorkflowsList } from '@/components/workflows-list';
 import { buildUrlWithConfig, useQueryParamConfig } from '@/lib/config';
-import { useHookIdState, useSidebarState, useTabState } from '@/lib/url-state';
+import {
+  useHookIdState,
+  useSidebarState,
+  useTabState,
+  useWorkflowIdState,
+} from '@/lib/url-state';
+import { useWorkflowGraphManifest } from '@/lib/use-workflow-graph';
 
 export default function Home() {
   const router = useRouter();
@@ -17,6 +26,13 @@ export default function Home() {
 
   const selectedHookId = sidebar === 'hook' && hookId ? hookId : undefined;
 
+  // Fetch workflow graph manifest
+  const {
+    manifest: graphManifest,
+    loading: graphLoading,
+    error: graphError,
+  } = useWorkflowGraphManifest(config);
+
   const handleRunClick = (runId: string, streamId?: string) => {
     if (!streamId) {
       router.push(buildUrlWithConfig(`/run/${runId}`, config));
@@ -40,12 +56,15 @@ export default function Home() {
     }
   };
 
+  const workflows = graphManifest ? Object.values(graphManifest.workflows) : [];
+
   return (
     <div className="space-y-6">
       <Tabs value={tab} onValueChange={setTab} className="w-full">
         <TabsList className="mb-4">
           <TabsTrigger value="runs">Runs</TabsTrigger>
           <TabsTrigger value="hooks">Hooks</TabsTrigger>
+          <TabsTrigger value="workflows">Workflows</TabsTrigger>
         </TabsList>
         <TabsContent value="runs">
           <ErrorBoundary
@@ -67,6 +86,27 @@ export default function Home() {
             />
           </ErrorBoundary>
         </TabsContent>
+        <TabsContent value="workflows">
+          <ErrorBoundary
+            title="Workflows Error"
+            description="Failed to load workflow graph data. Please try refreshing the page."
+          >
+            <div className="space-y-6">
+              {graphError && (
+                <Alert variant="destructive">
+                  <AlertCircle className="h-4 w-4" />
+                  <AlertTitle>Error Loading Workflows</AlertTitle>
+                  <AlertDescription>{graphError.message}</AlertDescription>
+                </Alert>
+              )}
+              <WorkflowsList
+                workflows={workflows}
+                onWorkflowSelect={() => {}}
+                loading={graphLoading}
+              />
+            </div>
+          </ErrorBoundary>
+        </TabsContent>
       </Tabs>
     </div>
   );
diff --git a/packages/web/src/components/run-detail-view.tsx b/packages/web/src/components/run-detail-view.tsx
index 34283b13f..66b0e92c6 100644
--- a/packages/web/src/components/run-detail-view.tsx
+++ b/packages/web/src/components/run-detail-view.tsx
@@ -8,7 +8,7 @@ import {
   type WorkflowRun,
   WorkflowTraceViewer,
 } from '@workflow/web-shared';
-import { AlertCircle, ChevronLeft, Loader2 } from 'lucide-react';
+import { AlertCircle, ChevronLeft, List, Loader2, Network } from 'lucide-react';
 import { useRouter } from 'next/navigation';
 import { useMemo, useState } from 'react';
 import { toast } from 'sonner';
@@ -24,8 +24,12 @@ import {
   AlertDialogTitle,
 } from '@/components/ui/alert-dialog';
 import { Button } from '@/components/ui/button';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { WorkflowGraphExecutionViewer } from '@/components/workflow-graph-execution-viewer';
 import { buildUrlWithConfig, worldConfigToEnvMap } from '@/lib/config';
 import type { WorldConfig } from '@/lib/config-world';
+import { mapRunToExecution } from '@/lib/graph-execution-mapper';
+import { useWorkflowGraphManifest } from '@/lib/use-workflow-graph';
 import { CancelButton } from './display-utils/cancel-button';
 import { CopyableText } from './display-utils/copyable-text';
 import { LiveStatus } from './display-utils/live-status';
@@ -51,8 +55,16 @@ export function RunDetailView({
   const [rerunning, setRerunning] = useState(false);
   const [showCancelDialog, setShowCancelDialog] = useState(false);
   const [showRerunDialog, setShowRerunDialog] = useState(false);
+  const [activeTab, setActiveTab] = useState<'trace' | 'graph'>('trace');
   const env = useMemo(() => worldConfigToEnvMap(config), [config]);
 
+  // Fetch workflow graph manifest
+  const {
+    manifest: graphManifest,
+    loading: graphLoading,
+    error: graphError,
+  } = useWorkflowGraphManifest(config);
+
   // Fetch all run data with live updates
   const {
     run: runData,
@@ -66,6 +78,30 @@ export function RunDetailView({
   } = useWorkflowTraceViewerData(env, runId, { live: true });
   const run = runData ?? ({} as WorkflowRun);
 
+  // Find the workflow graph for this run
+  const workflowGraph = useMemo(() => {
+    if (!graphManifest || !run.workflowName) return null;
+
+    // Try to find by exact workflowName match first
+    const workflow = Object.values(graphManifest.workflows).find((w) =>
+      run.workflowName.includes(w.workflowName)
+    );
+
+    return workflow || null;
+  }, [graphManifest, run.workflowName]);
+
+  // Map run data to execution overlay
+  const execution = useMemo(() => {
+    if (!workflowGraph || !run.runId) return null;
+
+    return mapRunToExecution(
+      run,
+      allSteps || [],
+      allEvents || [],
+      workflowGraph
+    );
+  }, [workflowGraph, run, allSteps, allEvents]);
+
   const handleCancelClick = () => {
     setShowCancelDialog(true);
   };
@@ -313,15 +349,77 @@ export function RunDetailView({
         </div>
 
         <div className="flex-1 min-h-0 relative">
-          <WorkflowTraceViewer
-            error={error}
-            steps={allSteps}
-            events={allEvents}
-            hooks={allHooks}
-            env={env}
-            run={run}
-            isLoading={loading}
-          />
+          <Tabs
+            value={activeTab}
+            onValueChange={(v) => setActiveTab(v as 'trace' | 'graph')}
+            className="h-full flex flex-col"
+          >
+            <TabsList className="flex-none">
+              <TabsTrigger value="trace" className="gap-2">
+                <List className="h-4 w-4" />
+                Trace
+              </TabsTrigger>
+              <TabsTrigger value="graph" className="gap-2">
+                <Network className="h-4 w-4" />
+                Graph
+              </TabsTrigger>
+            </TabsList>
+
+            <TabsContent
+              value="trace"
+              className="flex-1 min-h-0 mt-0 data-[state=active]:flex data-[state=active]:flex-col"
+            >
+              <WorkflowTraceViewer
+                error={error}
+                steps={allSteps}
+                events={allEvents}
+                hooks={allHooks}
+                env={env}
+                run={run}
+                isLoading={loading}
+              />
+            </TabsContent>
+
+            <TabsContent
+              value="graph"
+              className="flex-1 min-h-0 mt-0 data-[state=active]:flex"
+            >
+              {graphLoading ? (
+                <div className="flex items-center justify-center w-full h-full">
+                  <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
+                  <span className="ml-4 text-muted-foreground">
+                    Loading workflow graph...
+                  </span>
+                </div>
+              ) : graphError ? (
+                <div className="flex items-center justify-center w-full h-full p-4">
+                  <Alert variant="destructive" className="max-w-lg">
+                    <AlertCircle className="h-4 w-4" />
+                    <AlertTitle>Error Loading Workflow Graph</AlertTitle>
+                    <AlertDescription>{graphError.message}</AlertDescription>
+                  </Alert>
+                </div>
+              ) : !workflowGraph ? (
+                <div className="flex items-center justify-center w-full h-full">
+                  <Alert className="max-w-lg">
+                    <AlertCircle className="h-4 w-4" />
+                    <AlertTitle>Workflow Graph Not Found</AlertTitle>
+                    <AlertDescription>
+                      Could not find the workflow graph for this run. The
+                      workflow may have been deleted or the graph manifest may
+                      need to be regenerated.
+                    </AlertDescription>
+                  </Alert>
+                </div>
+              ) : (
+                <WorkflowGraphExecutionViewer
+                  workflow={workflowGraph}
+                  execution={execution || undefined}
+                />
+              )}
+            </TabsContent>
+          </Tabs>
+
           {auxiliaryDataLoading && (
             <div className="absolute flex items-center justify-center left-4 bottom-4">
               <Loader2 className="size-4 animate-spin" />
diff --git a/packages/web/src/components/ui/badge.tsx b/packages/web/src/components/ui/badge.tsx
new file mode 100644
index 000000000..797ce1561
--- /dev/null
+++ b/packages/web/src/components/ui/badge.tsx
@@ -0,0 +1,36 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+import type * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+const badgeVariants = cva(
+  'inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+  {
+    variants: {
+      variant: {
+        default:
+          'border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80',
+        secondary:
+          'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        destructive:
+          'border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80',
+        outline: 'text-foreground',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  }
+);
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  );
+}
+
+export { Badge, badgeVariants };
diff --git a/packages/web/src/components/ui/sheet.tsx b/packages/web/src/components/ui/sheet.tsx
new file mode 100644
index 000000000..bcad7ed55
--- /dev/null
+++ b/packages/web/src/components/ui/sheet.tsx
@@ -0,0 +1,139 @@
+'use client';
+
+import * as React from 'react';
+import * as SheetPrimitive from '@radix-ui/react-dialog';
+import { XIcon } from 'lucide-react';
+
+import { cn } from '@/lib/utils';
+
+function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
+  return <SheetPrimitive.Root data-slot="sheet" {...props} />;
+}
+
+function SheetTrigger({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
+  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />;
+}
+
+function SheetClose({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Close>) {
+  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />;
+}
+
+function SheetPortal({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Portal>) {
+  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />;
+}
+
+function SheetOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
+  return (
+    <SheetPrimitive.Overlay
+      data-slot="sheet-overlay"
+      className={cn(
+        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function SheetContent({
+  className,
+  children,
+  side = 'right',
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Content> & {
+  side?: 'top' | 'right' | 'bottom' | 'left';
+}) {
+  return (
+    <SheetPortal>
+      <SheetOverlay />
+      <SheetPrimitive.Content
+        data-slot="sheet-content"
+        className={cn(
+          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
+          side === 'right' &&
+            'data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm',
+          side === 'left' &&
+            'data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm',
+          side === 'top' &&
+            'data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b',
+          side === 'bottom' &&
+            'data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t',
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
+          <XIcon className="size-4" />
+          <span className="sr-only">Close</span>
+        </SheetPrimitive.Close>
+      </SheetPrimitive.Content>
+    </SheetPortal>
+  );
+}
+
+function SheetHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="sheet-header"
+      className={cn('flex flex-col gap-1.5 p-4', className)}
+      {...props}
+    />
+  );
+}
+
+function SheetFooter({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="sheet-footer"
+      className={cn('mt-auto flex flex-col gap-2 p-4', className)}
+      {...props}
+    />
+  );
+}
+
+function SheetTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Title>) {
+  return (
+    <SheetPrimitive.Title
+      data-slot="sheet-title"
+      className={cn('text-foreground font-semibold', className)}
+      {...props}
+    />
+  );
+}
+
+function SheetDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Description>) {
+  return (
+    <SheetPrimitive.Description
+      data-slot="sheet-description"
+      className={cn('text-muted-foreground text-sm', className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Sheet,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+};
diff --git a/packages/web/src/components/workflow-graph-execution-viewer.tsx b/packages/web/src/components/workflow-graph-execution-viewer.tsx
new file mode 100644
index 000000000..66537416f
--- /dev/null
+++ b/packages/web/src/components/workflow-graph-execution-viewer.tsx
@@ -0,0 +1,415 @@
+'use client';
+
+import {
+  Background,
+  Controls,
+  type Edge,
+  MarkerType,
+  type Node,
+  Panel,
+  ReactFlow,
+  useEdgesState,
+  useNodesState,
+} from '@xyflow/react';
+import { useCallback, useEffect, useMemo } from 'react';
+import '@xyflow/react/dist/style.css';
+import { GitBranch, PlayCircle, StopCircle } from 'lucide-react';
+import './workflow-graph-viewer.css';
+import { Badge } from '@/components/ui/badge';
+import type {
+  StepExecution,
+  WorkflowGraph,
+  WorkflowRunExecution,
+} from '@/lib/workflow-graph-types';
+
+interface WorkflowGraphExecutionViewerProps {
+  workflow: WorkflowGraph;
+  execution?: WorkflowRunExecution;
+  onNodeClick?: (nodeId: string, executions: StepExecution[]) => void;
+}
+
+// Custom node components
+const nodeTypes = {};
+
+// Get node styling based on node kind and execution state
+function getNodeStyle(nodeKind: string, executions?: StepExecution[]) {
+  const baseStyle = {
+    color: 'hsl(var(--card-foreground))',
+  };
+
+  // Base colors for node types
+  let baseColors = {
+    background: 'rgba(96, 165, 250, 0.15)', // blue
+    border: '#60a5fa',
+  };
+
+  if (nodeKind === 'workflow_start') {
+    baseColors = {
+      background: 'rgba(34, 197, 94, 0.15)', // green
+      border: '#22c55e',
+    };
+  } else if (nodeKind === 'workflow_end') {
+    baseColors = {
+      background: 'rgba(148, 163, 184, 0.15)', // slate
+      border: '#94a3b8',
+    };
+  }
+
+  // If no execution data, show faded state
+  if (!executions || executions.length === 0) {
+    return {
+      ...baseStyle,
+      backgroundColor: baseColors.background,
+      borderColor: baseColors.border,
+      opacity: 0.4,
+    };
+  }
+
+  const latestExecution = executions[executions.length - 1];
+
+  // Override colors based on execution status
+  switch (latestExecution.status) {
+    case 'running':
+      return {
+        ...baseStyle,
+        backgroundColor: 'rgba(251, 191, 36, 0.25)', // amber
+        borderColor: '#f59e0b',
+        borderWidth: 3,
+        boxShadow: '0 0 0 3px rgba(251, 191, 36, 0.2)',
+      };
+    case 'completed':
+      return {
+        ...baseStyle,
+        backgroundColor: 'rgba(34, 197, 94, 0.25)', // green
+        borderColor: '#22c55e',
+        borderWidth: 2,
+      };
+    case 'failed':
+      return {
+        ...baseStyle,
+        backgroundColor: 'rgba(239, 68, 68, 0.25)', // red
+        borderColor: '#ef4444',
+        borderWidth: 3,
+      };
+    case 'retrying':
+      return {
+        ...baseStyle,
+        backgroundColor: 'rgba(249, 115, 22, 0.25)', // orange
+        borderColor: '#f97316',
+        borderStyle: 'dashed',
+        borderWidth: 2,
+      };
+    case 'pending':
+      return {
+        ...baseStyle,
+        backgroundColor: baseColors.background,
+        borderColor: baseColors.border,
+        opacity: 0.6,
+      };
+    default:
+      return {
+        ...baseStyle,
+        backgroundColor: baseColors.background,
+        borderColor: baseColors.border,
+      };
+  }
+}
+
+// Get node icon based on node kind
+function getNodeIcon(nodeKind: string) {
+  if (nodeKind === 'workflow_start') {
+    return (
+      <PlayCircle className="h-3.5 w-3.5 text-green-600 dark:text-green-400" />
+    );
+  }
+  if (nodeKind === 'workflow_end') {
+    return (
+      <StopCircle className="h-3.5 w-3.5 text-gray-600 dark:text-gray-400" />
+    );
+  }
+  return <GitBranch className="h-3.5 w-3.5 text-blue-600 dark:text-blue-400" />;
+}
+
+function formatDuration(ms: number): string {
+  if (ms < 1000) return `${ms}ms`;
+  if (ms < 60000) return `${(ms / 1000).toFixed(1)}s`;
+  return `${(ms / 60000).toFixed(1)}m`;
+}
+
+// Enhanced node label with execution info
+function renderNodeLabel(
+  nodeData: { label: string; nodeKind: string },
+  executions?: StepExecution[]
+) {
+  const baseLabel = (
+    <div className="flex items-start gap-2 w-full overflow-hidden">
+      <div className="flex-shrink-0">{getNodeIcon(nodeData.nodeKind)}</div>
+      <span className="text-sm font-medium break-words whitespace-normal leading-tight flex-1 min-w-0">
+        {nodeData.label}
+      </span>
+    </div>
+  );
+
+  if (!executions || executions.length === 0) {
+    return baseLabel;
+  }
+
+  const latestExecution = executions[executions.length - 1];
+  const totalAttempts = executions.length;
+  const hasRetries = totalAttempts > 1;
+
+  return (
+    <div className="flex flex-col gap-1.5 w-full">
+      {baseLabel}
+
+      {/* Execution metadata */}
+      <div className="flex flex-wrap gap-1 text-xs">
+        {/* Status badge */}
+        <Badge
+          variant={
+            latestExecution.status === 'completed'
+              ? 'default'
+              : latestExecution.status === 'failed'
+                ? 'destructive'
+                : latestExecution.status === 'running'
+                  ? 'secondary'
+                  : 'outline'
+          }
+          className="text-xs px-1.5 py-0"
+        >
+          {latestExecution.status}
+        </Badge>
+
+        {/* Retry indicator */}
+        {hasRetries && (
+          <Badge
+            variant="outline"
+            className="text-xs px-1.5 py-0 border-orange-500 text-orange-700 dark:text-orange-300"
+          >
+            ↻ {totalAttempts}x
+          </Badge>
+        )}
+
+        {/* Duration */}
+        {latestExecution.duration && latestExecution.duration > 0 && (
+          <Badge variant="outline" className="text-xs px-1.5 py-0">
+            ⏱ {formatDuration(latestExecution.duration)}
+          </Badge>
+        )}
+      </div>
+    </div>
+  );
+}
+
+// Convert nodes with execution overlay
+function convertToReactFlowNodes(
+  workflow: WorkflowGraph,
+  execution?: WorkflowRunExecution
+): Node[] {
+  return workflow.nodes.map((node) => {
+    const executions = execution?.nodeExecutions.get(node.id);
+    const styles = getNodeStyle(node.data.nodeKind, executions);
+    const isCurrentNode = execution?.currentNode === node.id;
+
+    let nodeType: 'input' | 'output' | 'default' = 'default';
+    if (node.type === 'workflowStart') {
+      nodeType = 'input';
+    } else if (node.type === 'workflowEnd') {
+      nodeType = 'output';
+    }
+
+    return {
+      id: node.id,
+      type: nodeType,
+      position: node.position,
+      data: {
+        ...node.data,
+        label: renderNodeLabel(node.data, executions),
+        executions, // Store for onClick handler
+      },
+      style: {
+        borderWidth: 2,
+        borderRadius: 8,
+        padding: 12,
+        width: 220,
+        ...styles,
+      },
+      className: isCurrentNode ? 'animate-pulse-subtle' : '',
+    };
+  });
+}
+
+// Convert edges with execution overlay
+function convertToReactFlowEdges(
+  workflow: WorkflowGraph,
+  execution?: WorkflowRunExecution
+): Edge[] {
+  return workflow.edges.map((edge) => {
+    const traversal = execution?.edgeTraversals.get(edge.id);
+    const isTraversed = traversal && traversal.traversalCount > 0;
+
+    // Calculate average timing if available
+    const avgTiming = traversal?.timings.length
+      ? traversal.timings.reduce((a, b) => a + b, 0) / traversal.timings.length
+      : undefined;
+
+    return {
+      id: edge.id,
+      source: edge.source,
+      target: edge.target,
+      type: 'smoothstep',
+      animated: isTraversed && execution?.status === 'running',
+      label:
+        traversal && traversal.traversalCount > 1 ? (
+          <div className="flex flex-col items-center gap-0.5">
+            <Badge variant="secondary" className="text-xs px-1.5 py-0">
+              {traversal.traversalCount}×
+            </Badge>
+            {avgTiming && avgTiming > 0 && (
+              <span className="text-[10px] text-muted-foreground">
+                ~{formatDuration(avgTiming)}
+              </span>
+            )}
+          </div>
+        ) : undefined,
+      labelStyle: {
+        fill: 'hsl(var(--foreground))',
+        fontWeight: 500,
+      },
+      labelBgStyle: {
+        fill: 'hsl(var(--background))',
+        fillOpacity: 0.8,
+      },
+      markerEnd: {
+        type: MarkerType.ArrowClosed,
+        width: 20,
+        height: 20,
+        color: isTraversed ? '#22c55e' : '#94a3b8',
+      },
+      style: {
+        strokeWidth: isTraversed ? 3 : 2,
+        stroke: isTraversed ? '#22c55e' : '#94a3b8',
+        opacity: execution && !isTraversed ? 0.3 : 1,
+        strokeDasharray:
+          traversal && traversal.traversalCount > 1 ? '5,5' : undefined,
+      },
+    };
+  });
+}
+
+export function WorkflowGraphExecutionViewer({
+  workflow,
+  execution,
+  onNodeClick,
+}: WorkflowGraphExecutionViewerProps) {
+  const initialNodes = useMemo(
+    () => convertToReactFlowNodes(workflow, execution),
+    [workflow, execution]
+  );
+  const initialEdges = useMemo(
+    () => convertToReactFlowEdges(workflow, execution),
+    [workflow, execution]
+  );
+
+  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
+  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
+
+  // Update nodes and edges when workflow or execution changes
+  useEffect(() => {
+    setNodes(convertToReactFlowNodes(workflow, execution));
+    setEdges(convertToReactFlowEdges(workflow, execution));
+  }, [workflow, execution, setNodes, setEdges]);
+
+  const handleNodeClick = useCallback(
+    (_event: React.MouseEvent, node: Node) => {
+      if (onNodeClick && node.data.executions) {
+        onNodeClick(node.id, node.data.executions as StepExecution[]);
+      }
+    },
+    [onNodeClick]
+  );
+
+  return (
+    <div className="h-full w-full border rounded-none bg-background relative">
+      <ReactFlow
+        nodes={nodes}
+        edges={edges}
+        onNodesChange={onNodesChange}
+        onEdgesChange={onEdgesChange}
+        onNodeClick={handleNodeClick}
+        nodeTypes={nodeTypes}
+        fitView
+        minZoom={0.1}
+        maxZoom={2}
+        defaultViewport={{ x: 0, y: 0, zoom: 1 }}
+        proOptions={{ hideAttribution: true }}
+      >
+        <Background />
+        <Controls />
+
+        {/* Legend with execution states */}
+        <Panel
+          position="top-left"
+          className="bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 border rounded-lg p-2 text-xs"
+        >
+          <div className="space-y-1">
+            <div className="flex items-center gap-2">
+              <div className="w-3 h-3 rounded-full bg-green-100 dark:bg-green-950 border-2 border-green-600" />
+              <span>Completed</span>
+            </div>
+            <div className="flex items-center gap-2">
+              <div className="w-3 h-3 rounded-full bg-amber-100 dark:bg-amber-950 border-2 border-amber-600" />
+              <span>Running</span>
+            </div>
+            <div className="flex items-center gap-2">
+              <div className="w-3 h-3 rounded-full bg-red-100 dark:bg-red-950 border-2 border-red-600" />
+              <span>Failed</span>
+            </div>
+            <div className="flex items-center gap-2">
+              <div
+                className="w-3 h-3 rounded-full bg-orange-100 dark:bg-orange-950 border-2 border-orange-600"
+                style={{ borderStyle: 'dashed' }}
+              />
+              <span>Retrying</span>
+            </div>
+            <div className="flex items-center gap-2 opacity-50">
+              <div className="w-3 h-3 rounded-full bg-gray-100 dark:bg-gray-800 border-2 border-gray-400" />
+              <span>Not Executed</span>
+            </div>
+          </div>
+        </Panel>
+
+        {/* Execution summary panel */}
+        {execution && (
+          <Panel
+            position="top-right"
+            className="bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 border rounded-lg p-3 text-xs space-y-1.5"
+          >
+            <div className="font-semibold text-sm">Execution</div>
+            <div className="flex items-center gap-2">
+              <span className="text-muted-foreground">Status:</span>
+              <Badge
+                variant={
+                  execution.status === 'completed'
+                    ? 'default'
+                    : execution.status === 'failed'
+                      ? 'destructive'
+                      : 'secondary'
+                }
+                className="text-xs"
+              >
+                {execution.status}
+              </Badge>
+            </div>
+            <div className="flex items-center gap-2">
+              <span className="text-muted-foreground">Progress:</span>
+              <span className="font-mono">
+                {execution.executionPath.length} / {workflow.nodes.length}
+              </span>
+            </div>
+          </Panel>
+        )}
+      </ReactFlow>
+    </div>
+  );
+}
diff --git a/packages/web/src/components/workflow-graph-viewer.css b/packages/web/src/components/workflow-graph-viewer.css
new file mode 100644
index 000000000..787963b21
--- /dev/null
+++ b/packages/web/src/components/workflow-graph-viewer.css
@@ -0,0 +1,46 @@
+/* Custom styling for React Flow controls in dark mode */
+.react-flow__controls {
+  button {
+    background-color: hsl(var(--background));
+    border: 1px solid hsl(var(--border));
+    color: hsl(var(--foreground));
+  }
+
+  button:hover {
+    background-color: hsl(var(--accent));
+  }
+
+  button path {
+    fill: currentColor;
+  }
+}
+
+/* Ensure text wraps properly in nodes */
+.react-flow__node {
+  word-break: break-word;
+  overflow-wrap: anywhere;
+  white-space: normal;
+}
+
+.react-flow__node-default,
+.react-flow__node-input,
+.react-flow__node-output {
+  width: 220px !important;
+  min-width: 220px !important;
+  max-width: 220px !important;
+}
+
+/* Pulse animation for currently executing node */
+@keyframes pulse-subtle {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.7;
+  }
+}
+
+.animate-pulse-subtle {
+  animation: pulse-subtle 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
diff --git a/packages/web/src/components/workflow-graph-viewer.tsx b/packages/web/src/components/workflow-graph-viewer.tsx
new file mode 100644
index 000000000..017bbbcf2
--- /dev/null
+++ b/packages/web/src/components/workflow-graph-viewer.tsx
@@ -0,0 +1,188 @@
+'use client';
+
+import {
+  Background,
+  Controls,
+  type Edge,
+  MarkerType,
+  type Node,
+  Panel,
+  ReactFlow,
+  useEdgesState,
+  useNodesState,
+} from '@xyflow/react';
+import { useEffect, useMemo } from 'react';
+import '@xyflow/react/dist/style.css';
+import { GitBranch, PlayCircle, StopCircle } from 'lucide-react';
+import './workflow-graph-viewer.css';
+import type { WorkflowGraph } from '@/lib/workflow-graph-types';
+
+interface WorkflowGraphViewerProps {
+  workflow: WorkflowGraph;
+}
+
+// Custom node components
+const nodeTypes = {};
+
+// Get node styling based on node kind - uses theme-aware colors
+function getNodeStyle(nodeKind: string) {
+  const baseStyle = {
+    color: 'hsl(var(--card-foreground))',
+  };
+
+  if (nodeKind === 'workflow_start') {
+    return {
+      ...baseStyle,
+      backgroundColor: 'rgba(34, 197, 94, 0.15)', // green with 15% opacity
+      borderColor: '#22c55e', // green-500 - works in both light and dark
+    };
+  }
+  if (nodeKind === 'workflow_end') {
+    return {
+      ...baseStyle,
+      backgroundColor: 'rgba(148, 163, 184, 0.15)', // slate with 15% opacity
+      borderColor: '#94a3b8', // slate-400 - works in both light and dark
+    };
+  }
+  return {
+    ...baseStyle,
+    backgroundColor: 'rgba(96, 165, 250, 0.15)', // blue with 15% opacity
+    borderColor: '#60a5fa', // blue-400 - works in both light and dark
+  };
+}
+
+// Get node icon based on node kind
+function getNodeIcon(nodeKind: string) {
+  if (nodeKind === 'workflow_start') {
+    return (
+      <PlayCircle className="h-3.5 w-3.5 text-green-600 dark:text-green-400" />
+    );
+  }
+  if (nodeKind === 'workflow_end') {
+    return (
+      <StopCircle className="h-3.5 w-3.5 text-gray-600 dark:text-gray-400" />
+    );
+  }
+  return <GitBranch className="h-3.5 w-3.5 text-blue-600 dark:text-blue-400" />;
+}
+
+// Convert our graph nodes to React Flow format
+function convertToReactFlowNodes(workflow: WorkflowGraph): Node[] {
+  return workflow.nodes.map((node) => {
+    const styles = getNodeStyle(node.data.nodeKind);
+
+    // Determine node type based on its role in the workflow
+    let nodeType: 'input' | 'output' | 'default' = 'default';
+    if (node.type === 'workflowStart') {
+      nodeType = 'input'; // Only source handle (outputs edges)
+    } else if (node.type === 'workflowEnd') {
+      nodeType = 'output'; // Only target handle (receives edges)
+    }
+
+    return {
+      id: node.id,
+      type: nodeType,
+      position: node.position,
+      data: {
+        ...node.data,
+        label: (
+          <div className="flex items-start gap-2 w-full overflow-hidden">
+            <div className="flex-shrink-0">
+              {getNodeIcon(node.data.nodeKind)}
+            </div>
+            <span className="text-sm font-medium break-words whitespace-normal leading-tight flex-1 min-w-0">
+              {node.data.label}
+            </span>
+          </div>
+        ),
+      },
+      style: {
+        borderWidth: 2,
+        borderRadius: 8,
+        padding: 12,
+        width: 220,
+        ...styles,
+      },
+    };
+  });
+}
+
+// Convert our graph edges to React Flow format
+function convertToReactFlowEdges(workflow: WorkflowGraph): Edge[] {
+  return workflow.edges.map((edge) => ({
+    id: edge.id,
+    source: edge.source,
+    target: edge.target,
+    type: 'smoothstep',
+    animated: false,
+    markerEnd: {
+      type: MarkerType.ArrowClosed,
+      width: 20,
+      height: 20,
+      color: '#94a3b8',
+    },
+    style: {
+      strokeWidth: 2,
+      stroke: '#94a3b8',
+    },
+  }));
+}
+
+export function WorkflowGraphViewer({ workflow }: WorkflowGraphViewerProps) {
+  const initialNodes = useMemo(
+    () => convertToReactFlowNodes(workflow),
+    [workflow]
+  );
+  const initialEdges = useMemo(
+    () => convertToReactFlowEdges(workflow),
+    [workflow]
+  );
+
+  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
+  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
+
+  // Update nodes and edges when workflow changes
+  useEffect(() => {
+    setNodes(convertToReactFlowNodes(workflow));
+    setEdges(convertToReactFlowEdges(workflow));
+  }, [workflow, setNodes, setEdges]);
+
+  return (
+    <div className="h-full w-full border rounded-none bg-background relative">
+      <ReactFlow
+        nodes={nodes}
+        edges={edges}
+        onNodesChange={onNodesChange}
+        onEdgesChange={onEdgesChange}
+        nodeTypes={nodeTypes}
+        fitView
+        minZoom={0.1}
+        maxZoom={2}
+        defaultViewport={{ x: 0, y: 0, zoom: 1 }}
+        proOptions={{ hideAttribution: true }}
+      >
+        <Background />
+        <Controls />
+        <Panel
+          position="top-left"
+          className="bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 border rounded-lg p-2 text-xs"
+        >
+          <div className="space-y-1">
+            <div className="flex items-center gap-2">
+              <div className="w-3 h-3 rounded-full bg-green-100 dark:bg-green-950 border-2 border-green-600 dark:border-green-400" />
+              <span>Workflow Start</span>
+            </div>
+            <div className="flex items-center gap-2">
+              <div className="w-3 h-3 rounded-full bg-blue-100 dark:bg-blue-950 border-2 border-blue-600 dark:border-blue-400" />
+              <span>Step</span>
+            </div>
+            <div className="flex items-center gap-2">
+              <div className="w-3 h-3 rounded-full bg-gray-100 dark:bg-gray-800 border-2 border-gray-600 dark:border-gray-400" />
+              <span>Workflow End</span>
+            </div>
+          </div>
+        </Panel>
+      </ReactFlow>
+    </div>
+  );
+}
diff --git a/packages/web/src/components/workflows-list.tsx b/packages/web/src/components/workflows-list.tsx
new file mode 100644
index 000000000..210d8c6d8
--- /dev/null
+++ b/packages/web/src/components/workflows-list.tsx
@@ -0,0 +1,193 @@
+'use client';
+
+import { FileCode2, GitBranch, Workflow } from 'lucide-react';
+import { useState } from 'react';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent } from '@/components/ui/card';
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet';
+import { Skeleton } from '@/components/ui/skeleton';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { WorkflowGraphViewer } from '@/components/workflow-graph-viewer';
+import type { WorkflowGraph } from '@/lib/workflow-graph-types';
+
+interface WorkflowsListProps {
+  workflows: WorkflowGraph[];
+  onWorkflowSelect: (workflowName: string) => void;
+  loading?: boolean;
+}
+
+export function WorkflowsList({
+  workflows,
+  onWorkflowSelect,
+  loading,
+}: WorkflowsListProps) {
+  const [sheetOpen, setSheetOpen] = useState(false);
+  const [selectedWorkflow, setSelectedWorkflow] =
+    useState<WorkflowGraph | null>(null);
+
+  const handleViewWorkflow = (workflow: WorkflowGraph) => {
+    setSelectedWorkflow(workflow);
+    setSheetOpen(true);
+    onWorkflowSelect(workflow.workflowName);
+  };
+
+  if (loading) {
+    return (
+      <Card>
+        <CardContent className="p-6">
+          <div className="space-y-3">
+            <Skeleton className="h-10 w-full" />
+            <Skeleton className="h-10 w-full" />
+            <Skeleton className="h-10 w-full" />
+            <Skeleton className="h-10 w-full" />
+          </div>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  if (workflows.length === 0) {
+    return (
+      <Card>
+        <CardContent className="p-12 text-center">
+          <Workflow className="mx-auto h-12 w-12 text-muted-foreground mb-4" />
+          <h3 className="text-lg font-semibold mb-2">No Workflows Found</h3>
+          <p className="text-sm text-muted-foreground">
+            No workflow definitions were found in the graph manifest.
+          </p>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return (
+    <>
+      <Card>
+        <CardContent className="p-0 max-h-[calc(100vh-200px)] overflow-auto">
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead className="sticky top-0 bg-card z-10 border-b shadow-sm">
+                  Workflow
+                </TableHead>
+                <TableHead className="sticky top-0 bg-card z-10 border-b shadow-sm">
+                  File
+                </TableHead>
+                <TableHead className="text-center sticky top-0 bg-card z-10 border-b shadow-sm">
+                  Steps
+                </TableHead>
+                <TableHead className="text-right sticky top-0 bg-card z-10 border-b shadow-sm">
+                  Actions
+                </TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {workflows.map((workflow) => {
+                const stepCount = workflow.nodes.filter(
+                  (node) => node.data.nodeKind === 'step'
+                ).length;
+
+                return (
+                  <TableRow key={workflow.workflowName}>
+                    <TableCell>
+                      <div className="flex items-center gap-2">
+                        <Workflow className="h-4 w-4 text-muted-foreground" />
+                        <div>
+                          <div className="font-medium">
+                            {workflow.workflowName}
+                          </div>
+                          <div className="text-xs text-muted-foreground">
+                            {workflow.workflowId}
+                          </div>
+                        </div>
+                      </div>
+                    </TableCell>
+                    <TableCell>
+                      <div className="flex items-center gap-2 text-sm">
+                        <FileCode2 className="h-3.5 w-3.5 text-muted-foreground" />
+                        <code className="text-xs">{workflow.filePath}</code>
+                      </div>
+                    </TableCell>
+                    <TableCell className="text-center">
+                      <Badge variant="secondary" className="gap-1">
+                        <GitBranch className="h-3 w-3" />
+                        {stepCount} {stepCount === 1 ? 'step' : 'steps'}
+                      </Badge>
+                    </TableCell>
+                    <TableCell className="text-right">
+                      <Button
+                        size="sm"
+                        variant="outline"
+                        onClick={() => handleViewWorkflow(workflow)}
+                      >
+                        View Workflow
+                      </Button>
+                    </TableCell>
+                  </TableRow>
+                );
+              })}
+            </TableBody>
+          </Table>
+        </CardContent>
+      </Card>
+
+      <Sheet open={sheetOpen} onOpenChange={setSheetOpen}>
+        <SheetContent
+          side="right"
+          className="w-[50vw] max-w-[50vw] sm:max-w-[50vw]"
+        >
+          <SheetHeader>
+            <SheetTitle className="flex items-center gap-2">
+              <Workflow className="h-5 w-5" />
+              {selectedWorkflow?.workflowName}
+            </SheetTitle>
+            {selectedWorkflow && (
+              <SheetDescription asChild>
+                <div className="space-y-2">
+                  <div className="flex items-center gap-2 text-sm">
+                    <FileCode2 className="h-3.5 w-3.5" />
+                    <code className="text-xs">{selectedWorkflow.filePath}</code>
+                  </div>
+                  <div>
+                    <Badge variant="outline" className="gap-1">
+                      <GitBranch className="h-3 w-3" />
+                      {
+                        selectedWorkflow.nodes.filter(
+                          (node) => node.data.nodeKind === 'step'
+                        ).length
+                      }{' '}
+                      {selectedWorkflow.nodes.filter(
+                        (node) => node.data.nodeKind === 'step'
+                      ).length === 1
+                        ? 'step'
+                        : 'steps'}
+                    </Badge>
+                  </div>
+                </div>
+              </SheetDescription>
+            )}
+          </SheetHeader>
+          <div className="mt-6 h-[calc(100vh-180px)]">
+            {selectedWorkflow && (
+              <WorkflowGraphViewer workflow={selectedWorkflow} />
+            )}
+          </div>
+        </SheetContent>
+      </Sheet>
+    </>
+  );
+}
diff --git a/packages/web/src/lib/graph-execution-mapper.ts b/packages/web/src/lib/graph-execution-mapper.ts
new file mode 100644
index 000000000..e902df782
--- /dev/null
+++ b/packages/web/src/lib/graph-execution-mapper.ts
@@ -0,0 +1,381 @@
+/**
+ * Utilities to map workflow run data to graph execution overlays
+ */
+
+import type { Event, Step, WorkflowRun } from '@workflow/web-shared';
+import type {
+  EdgeTraversal,
+  GraphNode,
+  StepExecution,
+  WorkflowGraph,
+  WorkflowRunExecution,
+} from './workflow-graph-types';
+
+/**
+ * Normalize step/workflow names by removing path traversal patterns
+ * Graph has: "step//../example/workflows/1_simple.ts//add"
+ * Runtime has: "step//example/workflows/1_simple.ts//add"
+ */
+function normalizeStepName(name: string): string {
+  // Remove //../ patterns (path traversal)
+  return name.replace(/\/\/\.\.\//g, '//');
+}
+
+/**
+ * Create execution data for a single step attempt
+ */
+function createStepExecution(
+  attemptStep: Step,
+  graphNodeId: string,
+  idx: number,
+  totalAttempts: number
+): StepExecution {
+  let status: StepExecution['status'] = 'pending';
+  if (attemptStep.status === 'completed') {
+    status = 'completed';
+  } else if (attemptStep.status === 'failed') {
+    status = idx < totalAttempts - 1 ? 'retrying' : 'failed';
+  } else if (attemptStep.status === 'running') {
+    status = 'running';
+  }
+
+  const duration =
+    attemptStep.completedAt && attemptStep.startedAt
+      ? new Date(attemptStep.completedAt).getTime() -
+        new Date(attemptStep.startedAt).getTime()
+      : undefined;
+
+  return {
+    nodeId: graphNodeId,
+    stepId: attemptStep.stepId,
+    attemptNumber: attemptStep.attempt,
+    status,
+    startedAt: attemptStep.startedAt
+      ? new Date(attemptStep.startedAt).toISOString()
+      : undefined,
+    completedAt: attemptStep.completedAt
+      ? new Date(attemptStep.completedAt).toISOString()
+      : undefined,
+    duration,
+    input: attemptStep.input,
+    output: attemptStep.output,
+    error: attemptStep.error
+      ? {
+          message: attemptStep.error.message,
+          stack: attemptStep.error.stack || '',
+        }
+      : undefined,
+  };
+}
+
+/**
+ * Build index of graph nodes by normalized stepId
+ */
+function buildNodeIndex(nodes: GraphNode[]): Map<string, GraphNode[]> {
+  const nodesByStepId = new Map<string, GraphNode[]>();
+  for (const node of nodes) {
+    if (node.data.stepId) {
+      const normalizedStepId = normalizeStepName(node.data.stepId);
+      const existing = nodesByStepId.get(normalizedStepId) || [];
+      existing.push(node);
+      nodesByStepId.set(normalizedStepId, existing);
+    }
+  }
+  return nodesByStepId;
+}
+
+/**
+ * Calculate edge traversals based on execution path
+ */
+function calculateEdgeTraversals(
+  executionPath: string[],
+  graph: WorkflowGraph
+): Map<string, EdgeTraversal> {
+  const edgeTraversals = new Map<string, EdgeTraversal>();
+
+  for (let i = 0; i < executionPath.length - 1; i++) {
+    const sourceNodeId = executionPath[i];
+    const targetNodeId = executionPath[i + 1];
+
+    const edge = graph.edges.find(
+      (e) => e.source === sourceNodeId && e.target === targetNodeId
+    );
+
+    if (edge) {
+      const existing = edgeTraversals.get(edge.id);
+      if (existing) {
+        existing.traversalCount++;
+      } else {
+        edgeTraversals.set(edge.id, {
+          edgeId: edge.id,
+          traversalCount: 1,
+          timings: [],
+        });
+      }
+    }
+  }
+
+  return edgeTraversals;
+}
+
+/**
+ * Initialize start node execution
+ */
+function initializeStartNode(
+  run: WorkflowRun,
+  graph: WorkflowGraph,
+  executionPath: string[],
+  nodeExecutions: Map<string, StepExecution[]>
+): void {
+  const startNode = graph.nodes.find(
+    (n) => n.data.nodeKind === 'workflow_start'
+  );
+  if (startNode) {
+    executionPath.push(startNode.id);
+    nodeExecutions.set(startNode.id, [
+      {
+        nodeId: startNode.id,
+        attemptNumber: 1,
+        status: 'completed',
+        startedAt: run.startedAt
+          ? new Date(run.startedAt).toISOString()
+          : undefined,
+        completedAt: run.startedAt
+          ? new Date(run.startedAt).toISOString()
+          : undefined,
+        duration: 0,
+      },
+    ]);
+  }
+}
+
+/**
+ * Add end node execution if workflow is complete
+ */
+function addEndNodeExecution(
+  run: WorkflowRun,
+  graph: WorkflowGraph,
+  executionPath: string[],
+  nodeExecutions: Map<string, StepExecution[]>
+): void {
+  if (run.status === 'completed' || run.status === 'failed') {
+    const endNode = graph.nodes.find((n) => n.data.nodeKind === 'workflow_end');
+    if (endNode && !executionPath.includes(endNode.id)) {
+      executionPath.push(endNode.id);
+      nodeExecutions.set(endNode.id, [
+        {
+          nodeId: endNode.id,
+          attemptNumber: 1,
+          status: run.status === 'completed' ? 'completed' : 'failed',
+          startedAt: run.completedAt
+            ? new Date(run.completedAt).toISOString()
+            : undefined,
+          completedAt: run.completedAt
+            ? new Date(run.completedAt).toISOString()
+            : undefined,
+          duration: 0,
+        },
+      ]);
+    }
+  }
+}
+
+/**
+ * Process a group of step attempts and map to graph node
+ */
+function processStepGroup(
+  stepGroup: Step[],
+  stepName: string,
+  nodesByStepId: Map<string, GraphNode[]>,
+  occurrenceCount: Map<string, number>,
+  nodeExecutions: Map<string, StepExecution[]>,
+  executionPath: string[]
+): string | undefined {
+  const normalizedStepName = normalizeStepName(stepName);
+  const occurrenceIndex = occurrenceCount.get(normalizedStepName) || 0;
+  occurrenceCount.set(normalizedStepName, occurrenceIndex + 1);
+
+  const nodesWithStepId = nodesByStepId.get(normalizedStepName) || [];
+
+  // If there's only one node for this step but multiple invocations,
+  // map all invocations to that single node
+  const graphNode =
+    nodesWithStepId.length === 1
+      ? nodesWithStepId[0]
+      : nodesWithStepId[occurrenceIndex];
+
+  console.log('[Graph Mapper] Processing step group:', {
+    stepName,
+    normalizedStepName,
+    attempts: stepGroup.length,
+    occurrenceIndex,
+    totalNodesWithStepId: nodesWithStepId.length,
+    selectedNode: graphNode?.id,
+    allNodesWithStepId: nodesWithStepId.map((n) => n.id),
+    strategy:
+      nodesWithStepId.length === 1
+        ? 'single-node-multiple-invocations'
+        : 'occurrence-based',
+  });
+
+  if (!graphNode) {
+    return undefined;
+  }
+
+  const executions: StepExecution[] = stepGroup.map((attemptStep, idx) =>
+    createStepExecution(attemptStep, graphNode.id, idx, stepGroup.length)
+  );
+
+  // If there's only one node, append executions instead of replacing
+  if (nodesWithStepId.length === 1) {
+    const existing = nodeExecutions.get(graphNode.id) || [];
+    nodeExecutions.set(graphNode.id, [...existing, ...executions]);
+  } else {
+    nodeExecutions.set(graphNode.id, executions);
+  }
+
+  if (!executionPath.includes(graphNode.id)) {
+    executionPath.push(graphNode.id);
+  }
+
+  const latestExecution = executions[executions.length - 1];
+  return latestExecution.status === 'running' ? graphNode.id : undefined;
+}
+
+/**
+ * Maps a workflow run and its steps/events to an execution overlay for the graph
+ */
+export function mapRunToExecution(
+  run: WorkflowRun,
+  steps: Step[],
+  _events: Event[],
+  graph: WorkflowGraph
+): WorkflowRunExecution {
+  const nodeExecutions = new Map<string, StepExecution[]>();
+  const executionPath: string[] = [];
+  let currentNode: string | undefined;
+
+  console.log('[Graph Mapper] Mapping run to execution:', {
+    runId: run.runId,
+    workflowName: run.workflowName,
+    graphNodes: graph.nodes.length,
+    stepsCount: steps.length,
+  });
+
+  // Start node is always executed first
+  initializeStartNode(run, graph, executionPath, nodeExecutions);
+
+  // Map steps to graph nodes
+  // Sort steps by createdAt to process in execution order
+  const sortedSteps = [...steps].sort(
+    (a, b) => new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime()
+  );
+
+  console.log(
+    '[Graph Mapper] Sorted steps:',
+    sortedSteps.map((s) => ({
+      stepId: s.stepId,
+      stepName: s.stepName,
+      attempt: s.attempt,
+      status: s.status,
+      createdAt: s.createdAt,
+    }))
+  );
+
+  // Build an index of graph nodes by normalized stepId for quick lookup
+  const nodesByStepId = buildNodeIndex(graph.nodes);
+
+  console.log('[Graph Mapper] Graph nodes by stepId:', {
+    allGraphNodes: graph.nodes.map((n) => ({
+      id: n.id,
+      stepId: n.data.stepId,
+      normalizedStepId: n.data.stepId
+        ? normalizeStepName(n.data.stepId)
+        : undefined,
+      nodeKind: n.data.nodeKind,
+    })),
+    nodesByStepId: Array.from(nodesByStepId.entries()).map(
+      ([stepId, nodes]) => ({
+        stepId,
+        nodeIds: nodes.map((n) => n.id),
+      })
+    ),
+  });
+
+  // Track how many times we've seen each stepName to map to the correct occurrence
+  const stepNameOccurrenceCount = new Map<string, number>();
+
+  // Group consecutive retries: steps with the same stepId (unique per invocation) are retries
+  let currentStepGroup: Step[] = [];
+  let currentStepId: string | null = null;
+  let currentStepName: string | null = null;
+
+  for (let i = 0; i <= sortedSteps.length; i++) {
+    const step = sortedSteps[i];
+
+    // Start a new group if:
+    // 1. Different stepId (each invocation has a unique stepId, retries share the same stepId)
+    // 2. End of array
+    const isNewInvocation = !step || step.stepId !== currentStepId;
+
+    if (isNewInvocation) {
+      // Process the previous group if it exists
+      if (currentStepGroup.length > 0 && currentStepName) {
+        const runningNode = processStepGroup(
+          currentStepGroup,
+          currentStepName,
+          nodesByStepId,
+          stepNameOccurrenceCount,
+          nodeExecutions,
+          executionPath
+        );
+        if (runningNode) {
+          currentNode = runningNode;
+        }
+      }
+
+      // Start a new group with current step (if not at end)
+      if (step) {
+        currentStepGroup = [step];
+        currentStepId = step.stepId;
+        currentStepName = step.stepName;
+      }
+    } else {
+      // Add to current group (this is a retry: same stepId)
+      currentStepGroup.push(step);
+    }
+  }
+
+  // Add end node if workflow is completed/failed
+  addEndNodeExecution(run, graph, executionPath, nodeExecutions);
+
+  // Calculate edge traversals based on execution path
+  const edgeTraversals = calculateEdgeTraversals(executionPath, graph);
+
+  // Map run status to execution status (filter out unsupported statuses)
+  const executionStatus: WorkflowRunExecution['status'] =
+    run.status === 'paused' ? 'running' : run.status;
+
+  const result: WorkflowRunExecution = {
+    runId: run.runId,
+    status: executionStatus,
+    nodeExecutions,
+    edgeTraversals,
+    currentNode,
+    executionPath,
+  };
+
+  console.log('[Graph Mapper] Mapping complete:', {
+    executionPath,
+    nodeExecutionsCount: nodeExecutions.size,
+    nodeExecutions: Array.from(nodeExecutions.entries()).map(
+      ([nodeId, execs]) => ({
+        nodeId,
+        executionCount: execs.length,
+        latestStatus: execs[execs.length - 1]?.status,
+      })
+    ),
+  });
+
+  return result;
+}
diff --git a/packages/web/src/lib/url-state.ts b/packages/web/src/lib/url-state.ts
index 287e5137a..b5d0a045c 100644
--- a/packages/web/src/lib/url-state.ts
+++ b/packages/web/src/lib/url-state.ts
@@ -57,3 +57,10 @@ export function useEventIdState() {
 export function useStreamIdState() {
   return useQueryState('streamId', parseAsString);
 }
+
+/**
+ * Hook to manage selected workflow ID for graph visualization
+ */
+export function useWorkflowIdState() {
+  return useQueryState('workflowId', parseAsString);
+}
diff --git a/packages/web/src/lib/use-workflow-graph.ts b/packages/web/src/lib/use-workflow-graph.ts
new file mode 100644
index 000000000..38cb74167
--- /dev/null
+++ b/packages/web/src/lib/use-workflow-graph.ts
@@ -0,0 +1,61 @@
+'use client';
+
+import {
+  fetchGraphManifest,
+  unwrapServerActionResult,
+  WorkflowAPIError,
+} from '@workflow/web-shared';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { worldConfigToEnvMap } from '@/lib/config';
+import type { WorldConfig } from '@/lib/config-world';
+import type { WorkflowGraphManifest } from '@/lib/workflow-graph-types';
+
+/**
+ * Hook to fetch the workflow graph manifest from the workflow data directory
+ * The manifest contains static structure information about all workflows
+ */
+export function useWorkflowGraphManifest(config: WorldConfig) {
+  const [manifest, setManifest] = useState<WorkflowGraphManifest | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<Error | null>(null);
+  const isFetchingRef = useRef(false);
+
+  const fetchManifest = useCallback(async () => {
+    if (isFetchingRef.current) {
+      return;
+    }
+    isFetchingRef.current = true;
+    setLoading(true);
+    setError(null);
+
+    try {
+      const env = worldConfigToEnvMap(config);
+      const serverResult = await fetchGraphManifest(env);
+      const result = unwrapServerActionResult(serverResult);
+      setManifest(result);
+    } catch (err) {
+      const error =
+        err instanceof WorkflowAPIError
+          ? err
+          : err instanceof Error
+            ? new WorkflowAPIError(err.message, { cause: err, layer: 'client' })
+            : new WorkflowAPIError(String(err), { layer: 'client' });
+      setError(error);
+      setManifest(null);
+    } finally {
+      setLoading(false);
+      isFetchingRef.current = false;
+    }
+  }, [config]);
+
+  useEffect(() => {
+    fetchManifest();
+  }, [fetchManifest]);
+
+  return {
+    manifest,
+    loading,
+    error,
+    refetch: fetchManifest,
+  };
+}
diff --git a/packages/web/src/lib/workflow-graph-types.ts b/packages/web/src/lib/workflow-graph-types.ts
new file mode 100644
index 000000000..69773402e
--- /dev/null
+++ b/packages/web/src/lib/workflow-graph-types.ts
@@ -0,0 +1,76 @@
+/**
+ * Types for workflow graph visualization
+ * These match the structure generated by the SWC plugin in graph mode
+ */
+
+export interface Position {
+  x: number;
+  y: number;
+}
+
+export interface NodeData {
+  label: string;
+  nodeKind: 'workflow_start' | 'workflow_end' | 'step';
+  stepId?: string;
+  line: number;
+}
+
+export interface GraphNode {
+  id: string;
+  type: string;
+  position: Position;
+  data: NodeData;
+}
+
+export interface GraphEdge {
+  id: string;
+  source: string;
+  target: string;
+  type: string;
+}
+
+export interface WorkflowGraph {
+  workflowId: string;
+  workflowName: string;
+  filePath: string;
+  nodes: GraphNode[];
+  edges: GraphEdge[];
+}
+
+export interface WorkflowGraphManifest {
+  version: string;
+  workflows: Record<string, WorkflowGraph>;
+}
+
+/**
+ * Types for overlaying execution data on workflow graphs
+ */
+
+export interface StepExecution {
+  nodeId: string;
+  stepId?: string;
+  attemptNumber: number;
+  status: 'pending' | 'running' | 'completed' | 'failed' | 'retrying';
+  startedAt?: string;
+  completedAt?: string;
+  duration?: number;
+  input?: unknown;
+  output?: unknown;
+  error?: { message: string; stack: string };
+}
+
+export interface EdgeTraversal {
+  edgeId: string;
+  traversalCount: number;
+  lastTraversedAt?: string;
+  timings: number[]; // time taken to traverse (ms)
+}
+
+export interface WorkflowRunExecution {
+  runId: string;
+  status: 'running' | 'completed' | 'failed' | 'pending' | 'cancelled';
+  nodeExecutions: Map<string, StepExecution[]>; // nodeId -> array of executions (for retries)
+  edgeTraversals: Map<string, EdgeTraversal>; // edgeId -> traversal info
+  currentNode?: string; // for running workflows
+  executionPath: string[]; // ordered list of nodeIds
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d22895c60..453a43398 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -628,7 +628,7 @@ importers:
     devDependencies:
       '@nuxt/module-builder':
         specifier: 1.0.2
-        version: 1.0.2(@nuxt/cli@3.29.3(magicast@0.3.5))(@vue/compiler-core@3.5.22)(esbuild@0.25.12)(typescript@5.9.3)(vue@3.5.22(typescript@5.9.3))
+        version: 1.0.2(@nuxt/cli@3.29.3(magicast@0.3.5))(@vue/compiler-core@3.5.22)(esbuild@0.25.11)(typescript@5.9.3)(vue@3.5.22(typescript@5.9.3))
       '@nuxt/schema':
         specifier: 4.2.0
         version: 4.2.0
@@ -729,9 +729,15 @@ importers:
 
   packages/web:
     dependencies:
+      '@radix-ui/react-dialog':
+        specifier: 1.1.15
+        version: 1.1.15(@types/react-dom@19.1.9(@types/react@19.1.13))(@types/react@19.1.13)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
       '@radix-ui/react-tabs':
         specifier: ^1.1.13
         version: 1.1.13(@types/react-dom@19.1.9(@types/react@19.1.13))(@types/react@19.1.13)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@xyflow/react':
+        specifier: 12.9.3
+        version: 12.9.3(@types/react@19.1.13)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
       next:
         specifier: 15.5.4
         version: 15.5.4(@opentelemetry/api@1.9.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
@@ -6670,6 +6676,15 @@ packages:
     resolution: {integrity: sha512-ueFCcIPaMgtuYDS9u0qlUoEvj6GiSsKrwnOLPp9SshqjtcRaR1IEHRjoReq3sXNydsF5i0ZnmuYgXq9dV53t0g==}
     engines: {node: '>=18.0.0'}
 
+  '@xyflow/react@12.9.3':
+    resolution: {integrity: sha512-PSWoJ8vHiEqSIkLIkge+0eiHWiw4C6dyFDA03VKWJkqbU4A13VlDIVwKqf/Znuysn2GQw/zA61zpHE4rGgax7Q==}
+    peerDependencies:
+      react: '>=17'
+      react-dom: '>=17'
+
+  '@xyflow/system@0.0.73':
+    resolution: {integrity: sha512-C2ymH2V4mYDkdVSiRx0D7R0s3dvfXiupVBcko6tXP5K4tVdSBMo22/e3V9yRNdn+2HQFv44RFKzwOyCcUUDAVQ==}
+
   abbrev@3.0.1:
     resolution: {integrity: sha512-AO2ac6pjRB3SJmGJo+v5/aK6Omggp6fsLrs6wN9bd35ulu4cCwaAU9+7ZhXjeqHVkaHThLuzH0nZr0YpCDhygg==}
     engines: {node: ^18.17.0 || >=20.5.0}
@@ -7113,6 +7128,9 @@ packages:
   class-variance-authority@0.7.1:
     resolution: {integrity: sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==}
 
+  classcat@5.0.5:
+    resolution: {integrity: sha512-JhZUT7JFcQy/EzW605k/ktHtncoo9vnyW/2GspNYwFlN1C/WmjuV/xtS04e9SOkL2sTdw0VAZ2UGCcQ9lR6p6w==}
+
   clean-stack@3.0.1:
     resolution: {integrity: sha512-lR9wNiMRcVQjSB3a7xXGLuz4cr4wJuuXlaAEbRutGowQTmlp7R72/DOgN21e8jdwblMWl9UOJMJXarX94pzKdg==}
     engines: {node: '>=10'}
@@ -12690,6 +12708,21 @@ packages:
   zod@4.1.12:
     resolution: {integrity: sha512-JInaHOamG8pt5+Ey8kGmdcAcg3OL9reK8ltczgHTAwNhMys/6ThXHityHxVV2p3fkw/c+MAvBHFVYHFZDmjMCQ==}
 
+  zustand@4.5.7:
+    resolution: {integrity: sha512-CHOUy7mu3lbD6o6LJLfllpjkzhHXSBlX8B9+qPddUsIfeF5S/UZ5q0kmCsnRqT1UHFQZchNFDDzMbQsuesHWlw==}
+    engines: {node: '>=12.7.0'}
+    peerDependencies:
+      '@types/react': '>=16.8'
+      immer: '>=9.0.6'
+      react: '>=16.8'
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      immer:
+        optional: true
+      react:
+        optional: true
+
   zwitch@2.0.4:
     resolution: {integrity: sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==}
 
@@ -14682,7 +14715,7 @@ snapshots:
     transitivePeerDependencies:
       - magicast
 
-  '@nuxt/module-builder@1.0.2(@nuxt/cli@3.29.3(magicast@0.3.5))(@vue/compiler-core@3.5.22)(esbuild@0.25.12)(typescript@5.9.3)(vue@3.5.22(typescript@5.9.3))':
+  '@nuxt/module-builder@1.0.2(@nuxt/cli@3.29.3(magicast@0.3.5))(@vue/compiler-core@3.5.22)(esbuild@0.25.11)(typescript@5.9.3)(vue@3.5.22(typescript@5.9.3))':
     dependencies:
       '@nuxt/cli': 3.29.3(magicast@0.3.5)
       citty: 0.1.6
@@ -14690,14 +14723,14 @@ snapshots:
       defu: 6.1.4
       jiti: 2.6.1
       magic-regexp: 0.10.0
-      mkdist: 2.4.1(typescript@5.9.3)(vue-sfc-transformer@0.1.17(@vue/compiler-core@3.5.22)(esbuild@0.25.12)(vue@3.5.22(typescript@5.9.3)))(vue@3.5.22(typescript@5.9.3))
+      mkdist: 2.4.1(typescript@5.9.3)(vue-sfc-transformer@0.1.17(@vue/compiler-core@3.5.22)(esbuild@0.25.11)(vue@3.5.22(typescript@5.9.3)))(vue@3.5.22(typescript@5.9.3))
       mlly: 1.8.0
       pathe: 2.0.3
       pkg-types: 2.3.0
       tsconfck: 3.1.6(typescript@5.9.3)
       typescript: 5.9.3
-      unbuild: 3.6.1(typescript@5.9.3)(vue-sfc-transformer@0.1.17(@vue/compiler-core@3.5.22)(esbuild@0.25.12)(vue@3.5.22(typescript@5.9.3)))(vue@3.5.22(typescript@5.9.3))
-      vue-sfc-transformer: 0.1.17(@vue/compiler-core@3.5.22)(esbuild@0.25.12)(vue@3.5.22(typescript@5.9.3))
+      unbuild: 3.6.1(typescript@5.9.3)(vue-sfc-transformer@0.1.17(@vue/compiler-core@3.5.22)(esbuild@0.25.11)(vue@3.5.22(typescript@5.9.3)))(vue@3.5.22(typescript@5.9.3))
+      vue-sfc-transformer: 0.1.17(@vue/compiler-core@3.5.22)(esbuild@0.25.11)(vue@3.5.22(typescript@5.9.3))
     transitivePeerDependencies:
       - '@vue/compiler-core'
       - esbuild
@@ -15863,6 +15896,28 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.1.13
 
+  '@radix-ui/react-dialog@1.1.15(@types/react-dom@19.1.9(@types/react@19.1.13))(@types/react@19.1.13)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.13)(react@19.1.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.13)(react@19.1.0)
+      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@19.1.9(@types/react@19.1.13))(@types/react@19.1.13)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-focus-guards': 1.1.3(@types/react@19.1.13)(react@19.1.0)
+      '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@19.1.9(@types/react@19.1.13))(@types/react@19.1.13)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.1.13)(react@19.1.0)
+      '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.1.9(@types/react@19.1.13))(@types/react@19.1.13)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.1.9(@types/react@19.1.13))(@types/react@19.1.13)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9(@types/react@19.1.13))(@types/react@19.1.13)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.1.13)(react@19.1.0)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.13)(react@19.1.0)
+      aria-hidden: 1.2.6
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+      react-remove-scroll: 2.7.1(@types/react@19.1.13)(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.13
+      '@types/react-dom': 19.1.9(@types/react@19.1.13)
+
   '@radix-ui/react-dialog@1.1.15(@types/react-dom@19.1.9(@types/react@19.1.13))(@types/react@19.1.13)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
     dependencies:
       '@radix-ui/primitive': 1.1.3
@@ -18526,6 +18581,29 @@ snapshots:
       '@whatwg-node/promise-helpers': 1.3.2
       tslib: 2.8.1
 
+  '@xyflow/react@12.9.3(@types/react@19.1.13)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@xyflow/system': 0.0.73
+      classcat: 5.0.5
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+      zustand: 4.5.7(@types/react@19.1.13)(react@19.1.0)
+    transitivePeerDependencies:
+      - '@types/react'
+      - immer
+
+  '@xyflow/system@0.0.73':
+    dependencies:
+      '@types/d3-drag': 3.0.7
+      '@types/d3-interpolate': 3.0.4
+      '@types/d3-selection': 3.0.11
+      '@types/d3-transition': 3.0.9
+      '@types/d3-zoom': 3.0.8
+      d3-drag: 3.0.0
+      d3-interpolate: 3.0.1
+      d3-selection: 3.0.0
+      d3-zoom: 3.0.0
+
   abbrev@3.0.1: {}
 
   abort-controller@3.0.0:
@@ -18985,6 +19063,8 @@ snapshots:
     dependencies:
       clsx: 2.1.1
 
+  classcat@5.0.5: {}
+
   clean-stack@3.0.1:
     dependencies:
       escape-string-regexp: 4.0.0
@@ -22061,7 +22141,7 @@ snapshots:
 
   mkdirp@3.0.1: {}
 
-  mkdist@2.4.1(typescript@5.9.3)(vue-sfc-transformer@0.1.17(@vue/compiler-core@3.5.22)(esbuild@0.25.12)(vue@3.5.22(typescript@5.9.3)))(vue@3.5.22(typescript@5.9.3)):
+  mkdist@2.4.1(typescript@5.9.3)(vue-sfc-transformer@0.1.17(@vue/compiler-core@3.5.22)(esbuild@0.25.11)(vue@3.5.22(typescript@5.9.3)))(vue@3.5.22(typescript@5.9.3)):
     dependencies:
       autoprefixer: 10.4.21(postcss@8.5.6)
       citty: 0.1.6
@@ -22079,7 +22159,7 @@ snapshots:
     optionalDependencies:
       typescript: 5.9.3
       vue: 3.5.22(typescript@5.9.3)
-      vue-sfc-transformer: 0.1.17(@vue/compiler-core@3.5.22)(esbuild@0.25.12)(vue@3.5.22(typescript@5.9.3))
+      vue-sfc-transformer: 0.1.17(@vue/compiler-core@3.5.22)(esbuild@0.25.11)(vue@3.5.22(typescript@5.9.3))
 
   mlly@1.8.0:
     dependencies:
@@ -25078,7 +25158,7 @@ snapshots:
 
   ultrahtml@1.6.0: {}
 
-  unbuild@3.6.1(typescript@5.9.3)(vue-sfc-transformer@0.1.17(@vue/compiler-core@3.5.22)(esbuild@0.25.12)(vue@3.5.22(typescript@5.9.3)))(vue@3.5.22(typescript@5.9.3)):
+  unbuild@3.6.1(typescript@5.9.3)(vue-sfc-transformer@0.1.17(@vue/compiler-core@3.5.22)(esbuild@0.25.11)(vue@3.5.22(typescript@5.9.3)))(vue@3.5.22(typescript@5.9.3)):
     dependencies:
       '@rollup/plugin-alias': 5.1.1(rollup@4.53.2)
       '@rollup/plugin-commonjs': 28.0.9(rollup@4.53.2)
@@ -25094,7 +25174,7 @@ snapshots:
       hookable: 5.5.3
       jiti: 2.6.1
       magic-string: 0.30.21
-      mkdist: 2.4.1(typescript@5.9.3)(vue-sfc-transformer@0.1.17(@vue/compiler-core@3.5.22)(esbuild@0.25.12)(vue@3.5.22(typescript@5.9.3)))(vue@3.5.22(typescript@5.9.3))
+      mkdist: 2.4.1(typescript@5.9.3)(vue-sfc-transformer@0.1.17(@vue/compiler-core@3.5.22)(esbuild@0.25.11)(vue@3.5.22(typescript@5.9.3)))(vue@3.5.22(typescript@5.9.3))
       mlly: 1.8.0
       pathe: 2.0.3
       pkg-types: 2.3.0
@@ -25756,11 +25836,11 @@ snapshots:
       '@vue/devtools-api': 6.6.4
       vue: 3.5.22(typescript@5.9.3)
 
-  vue-sfc-transformer@0.1.17(@vue/compiler-core@3.5.22)(esbuild@0.25.12)(vue@3.5.22(typescript@5.9.3)):
+  vue-sfc-transformer@0.1.17(@vue/compiler-core@3.5.22)(esbuild@0.25.11)(vue@3.5.22(typescript@5.9.3)):
     dependencies:
       '@babel/parser': 7.28.5
       '@vue/compiler-core': 3.5.22
-      esbuild: 0.25.12
+      esbuild: 0.25.11
       vue: 3.5.22(typescript@5.9.3)
 
   vue@3.5.22(typescript@5.9.3):
@@ -25964,4 +26044,11 @@ snapshots:
 
   zod@4.1.12: {}
 
+  zustand@4.5.7(@types/react@19.1.13)(react@19.1.0):
+    dependencies:
+      use-sync-external-store: 1.5.0(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.13
+      react: 19.1.0
+
   zwitch@2.0.4: {}
diff --git a/workbench/nextjs-turbopack/public/.gitignore b/workbench/nextjs-turbopack/public/.gitignore
new file mode 100644
index 000000000..af62f4216
--- /dev/null
+++ b/workbench/nextjs-turbopack/public/.gitignore
@@ -0,0 +1,3 @@
+# Ignore generated workflow graph manifest
+.well-known/
+