From 093eecdb6ef2e406a70a3270a26a02c7dbb3e382 Mon Sep 17 00:00:00 2001
From: Bryan Helmkamp <bryan@brynary.com>
Date: Sat, 28 Feb 2026 13:56:13 -0500
Subject: [PATCH] Convert workflow detail tabs to nested routes

Definition at /workflows/:name, Diagram at /workflows/:name/diagram,
Runs at /workflows/:name/runs. Detail page is now a layout with Outlet.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 apps/arc-web/app/routes.ts                    |  6 +-
 .../app/routes/workflow-definition.tsx        |  3 +
 apps/arc-web/app/routes/workflow-detail.tsx   | 56 +++++++++----------
 apps/arc-web/app/routes/workflow-diagram.tsx  |  3 +
 apps/arc-web/app/routes/workflow-runs.tsx     |  3 +
 5 files changed, 41 insertions(+), 30 deletions(-)
 create mode 100644 apps/arc-web/app/routes/workflow-definition.tsx
 create mode 100644 apps/arc-web/app/routes/workflow-diagram.tsx
 create mode 100644 apps/arc-web/app/routes/workflow-runs.tsx

diff --git a/apps/arc-web/app/routes.ts b/apps/arc-web/app/routes.ts
index ad5dd550b..bdc7d7154 100644
--- a/apps/arc-web/app/routes.ts
+++ b/apps/arc-web/app/routes.ts
@@ -10,7 +10,11 @@ export default [
   layout("layouts/app-shell.tsx", [
     route("start", "routes/start.tsx"),
     route("workflows", "routes/workflows.tsx"),
-    route("workflows/:name", "routes/workflow-detail.tsx"),
+    route("workflows/:name", "routes/workflow-detail.tsx", [
+      index("routes/workflow-definition.tsx"),
+      route("diagram", "routes/workflow-diagram.tsx"),
+      route("runs", "routes/workflow-runs.tsx"),
+    ]),
     route("runs", "routes/pipelines.tsx"),
     route("insights", "routes/insights.tsx"),
     route("settings", "routes/settings.tsx"),
diff --git a/apps/arc-web/app/routes/workflow-definition.tsx b/apps/arc-web/app/routes/workflow-definition.tsx
new file mode 100644
index 000000000..68c7ed6fe
--- /dev/null
+++ b/apps/arc-web/app/routes/workflow-definition.tsx
@@ -0,0 +1,3 @@
+export default function WorkflowDefinition() {
+  return <p className="text-sm text-navy-600">Workflow definition will appear here.</p>;
+}
diff --git a/apps/arc-web/app/routes/workflow-detail.tsx b/apps/arc-web/app/routes/workflow-detail.tsx
index 1dfa9466b..e5fefb240 100644
--- a/apps/arc-web/app/routes/workflow-detail.tsx
+++ b/apps/arc-web/app/routes/workflow-detail.tsx
@@ -1,8 +1,7 @@
-import { useState } from "react";
-import { useParams } from "react-router";
+import { Link, Outlet, useLocation, useParams } from "react-router";
 import type { Route } from "./+types/workflow-detail";
 
-const workflowData: Record<string, { title: string; description: string; filename: string }> = {
+export const workflowData: Record<string, { title: string; description: string; filename: string }> = {
   fix_build: {
     title: "Fix Build",
     filename: "fix_build.dot",
@@ -25,8 +24,11 @@ const workflowData: Record<string, { title: string; description: string; filenam
   },
 };
 
-const tabs = ["Definition", "Diagram", "Runs"] as const;
-type Tab = (typeof tabs)[number];
+const tabs = [
+  { name: "Definition", path: "" },
+  { name: "Diagram", path: "/diagram" },
+  { name: "Runs", path: "/runs" },
+];
 
 export function meta({ params }: Route.MetaArgs) {
   const workflow = workflowData[params.name ?? ""];
@@ -36,8 +38,9 @@ export function meta({ params }: Route.MetaArgs) {
 
 export default function WorkflowDetail() {
   const { name } = useParams();
+  const { pathname } = useLocation();
   const workflow = workflowData[name ?? ""];
-  const [activeTab, setActiveTab] = useState<Tab>("Definition");
+  const basePath = `/workflows/${name}`;
 
   if (workflow == null) {
     return <p className="text-sm text-ice-300">Workflow not found.</p>;
@@ -55,33 +58,28 @@ export default function WorkflowDetail() {
 
       <div className="border-b border-white/[0.06]">
         <nav className="-mb-px flex gap-6">
-          {tabs.map((tab) => (
-            <button
-              key={tab}
-              type="button"
-              onClick={() => setActiveTab(tab)}
-              className={`border-b-2 pb-3 text-sm font-medium transition-colors ${
-                activeTab === tab
-                  ? "border-teal-500 text-white"
-                  : "border-transparent text-navy-600 hover:border-white/10 hover:text-ice-300"
-              }`}
-            >
-              {tab}
-            </button>
-          ))}
+          {tabs.map((tab) => {
+            const tabPath = `${basePath}${tab.path}`;
+            const isActive = pathname === tabPath;
+            return (
+              <Link
+                key={tab.name}
+                to={tabPath}
+                className={`border-b-2 pb-3 text-sm font-medium transition-colors ${
+                  isActive
+                    ? "border-teal-500 text-white"
+                    : "border-transparent text-navy-600 hover:border-white/10 hover:text-ice-300"
+                }`}
+              >
+                {tab.name}
+              </Link>
+            );
+          })}
         </nav>
       </div>
 
       <div className="mt-6">
-        {activeTab === "Definition" && (
-          <p className="text-sm text-navy-600">Workflow definition will appear here.</p>
-        )}
-        {activeTab === "Diagram" && (
-          <p className="text-sm text-navy-600">Workflow diagram will appear here.</p>
-        )}
-        {activeTab === "Runs" && (
-          <p className="text-sm text-navy-600">Recent runs will appear here.</p>
-        )}
+        <Outlet />
       </div>
     </div>
   );
diff --git a/apps/arc-web/app/routes/workflow-diagram.tsx b/apps/arc-web/app/routes/workflow-diagram.tsx
new file mode 100644
index 000000000..d5f1b2b6f
--- /dev/null
+++ b/apps/arc-web/app/routes/workflow-diagram.tsx
@@ -0,0 +1,3 @@
+export default function WorkflowDiagram() {
+  return <p className="text-sm text-navy-600">Workflow diagram will appear here.</p>;
+}
diff --git a/apps/arc-web/app/routes/workflow-runs.tsx b/apps/arc-web/app/routes/workflow-runs.tsx
new file mode 100644
index 000000000..d6b500876
--- /dev/null
+++ b/apps/arc-web/app/routes/workflow-runs.tsx
@@ -0,0 +1,3 @@
+export default function WorkflowRuns() {
+  return <p className="text-sm text-navy-600">Recent runs will appear here.</p>;
+}