From b2cf623007fa480ed28124e98a594f54e7580e2f Mon Sep 17 00:00:00 2001
From: Bryan Helmkamp <bryan@brynary.com>
Date: Sat, 28 Feb 2026 15:30:31 -0500
Subject: [PATCH] Lighten button styles, add Run button, and widen runs page

- Restyle Create Workflow split button to lightweight border/mint style
- Add "Run" icon button to workflow detail header
- Remove max-width constraint for wide pages so runs board uses full width
- Remove unused nav items (Start, Insights)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 apps/arc-web/app/layouts/app-shell.tsx      | 6 +-----
 apps/arc-web/app/routes/workflow-detail.tsx | 5 +++--
 apps/arc-web/app/routes/workflows.tsx       | 8 ++++----
 3 files changed, 8 insertions(+), 11 deletions(-)

diff --git a/apps/arc-web/app/layouts/app-shell.tsx b/apps/arc-web/app/layouts/app-shell.tsx
index b6a1c6e0b..8b088ebb4 100644
--- a/apps/arc-web/app/layouts/app-shell.tsx
+++ b/apps/arc-web/app/layouts/app-shell.tsx
@@ -9,11 +9,9 @@ import {
 } from "@headlessui/react";
 import {
   Bars3Icon,
-  ChartBarIcon,
   Cog6ToothIcon,
   PlayIcon,
   RectangleStackIcon,
-  RocketLaunchIcon,
   XMarkIcon,
 } from "@heroicons/react/24/outline";
 import { Link, Outlet, useLocation, useMatches } from "react-router";
@@ -26,10 +24,8 @@ const user = {
 };
 
 const navigation = [
-  { name: "Start", href: "/start", icon: RocketLaunchIcon },
   { name: "Workflows", href: "/workflows", icon: RectangleStackIcon },
   { name: "Runs", href: "/runs", icon: PlayIcon },
-  { name: "Insights", href: "/insights", icon: ChartBarIcon },
   { name: "Settings", href: "/settings", icon: Cog6ToothIcon },
 ];
 
@@ -47,7 +43,7 @@ export default function AppShell() {
   const lastMatch = matches[matches.length - 1];
   const handle = lastMatch?.handle as { headerExtra?: React.ReactNode; wide?: boolean } | undefined;
   const headerExtra = handle?.headerExtra;
-  const maxWidth = handle?.wide ? "max-w-7xl" : "max-w-5xl";
+  const maxWidth = handle?.wide ? "" : "max-w-5xl";
 
   return (
     <div className="min-h-full">
diff --git a/apps/arc-web/app/routes/workflow-detail.tsx b/apps/arc-web/app/routes/workflow-detail.tsx
index e1091dd56..0f65d1615 100644
--- a/apps/arc-web/app/routes/workflow-detail.tsx
+++ b/apps/arc-web/app/routes/workflow-detail.tsx
@@ -286,11 +286,12 @@ export default function WorkflowDetail() {
         <button
           type="button"
           title="Run workflow"
-          className="flex size-9 shrink-0 items-center justify-center rounded-full border border-mint/20 text-mint transition-colors hover:border-mint/50 hover:bg-mint/10 hover:text-white"
+          className="flex shrink-0 items-center gap-1.5 rounded-md border border-mint/20 px-3 py-1.5 text-sm font-medium text-mint transition-colors hover:border-mint/50 hover:bg-mint/10 hover:text-white"
         >
-          <svg viewBox="0 0 24 24" fill="currentColor" className="size-4" aria-hidden="true">
+          <svg viewBox="0 0 24 24" fill="currentColor" className="size-3.5" aria-hidden="true">
             <path fillRule="evenodd" d="M4.5 5.653c0-1.427 1.529-2.33 2.779-1.643l11.54 6.347c1.295.712 1.295 2.573 0 3.286L7.28 19.99c-1.25.687-2.779-.217-2.779-1.643V5.653Z" clipRule="evenodd" />
           </svg>
+          Run
         </button>
       </div>
 
diff --git a/apps/arc-web/app/routes/workflows.tsx b/apps/arc-web/app/routes/workflows.tsx
index 0cd843084..e25441a8a 100644
--- a/apps/arc-web/app/routes/workflows.tsx
+++ b/apps/arc-web/app/routes/workflows.tsx
@@ -20,14 +20,14 @@ export const handle = {
     <div className="relative inline-flex rounded-md">
       <button
         type="button"
-        className="inline-flex items-center gap-2 rounded-l-md bg-teal-700 px-3.5 py-2 text-sm font-semibold text-white transition-colors hover:bg-teal-500"
+        className="inline-flex items-center gap-1.5 rounded-l-md border border-r-0 border-mint/20 px-3 py-1.5 text-sm font-medium text-mint transition-colors hover:border-mint/50 hover:bg-mint/10 hover:text-white"
       >
-        <PlusIcon className="size-4" aria-hidden="true" />
+        <PlusIcon className="size-3.5" aria-hidden="true" />
         Create Workflow
       </button>
       <Menu as="div" className="relative -ml-px flex">
-        <MenuButton className="inline-flex items-center rounded-r-md border-l border-teal-500/30 bg-teal-700 px-2 text-white transition-colors hover:bg-teal-500">
-          <ChevronDownIcon className="size-4" aria-hidden="true" />
+        <MenuButton className="inline-flex items-center rounded-r-md border border-mint/20 px-1.5 text-mint transition-colors hover:border-mint/50 hover:bg-mint/10 hover:text-white">
+          <ChevronDownIcon className="size-3.5" aria-hidden="true" />
         </MenuButton>
         <MenuItems
           transition