From 51d58a904c34b5fb65dd0bd0aa2cc14d707c278d Mon Sep 17 00:00:00 2001
From: Bryan Helmkamp <bryan@brynary.com>
Date: Sat, 28 Feb 2026 15:56:43 -0500
Subject: [PATCH] Brand diff theme and reorganize run detail tabs

- Add CSS variable overrides for @pierre/diffs to match brand palette:
  navy backgrounds, mint additions, coral deletions, JetBrains Mono font
- Replace Logs tab with Overview tab as the new index route
- Move Stages to /stages sub-route
- Clean up unused imports from run-files-changed

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 apps/arc-web/app/app.css                      | 26 +++++++++++++++++
 apps/arc-web/app/routes.ts                    |  4 +--
 apps/arc-web/app/routes/run-detail.tsx        |  4 +--
 apps/arc-web/app/routes/run-files-changed.tsx | 28 -------------------
 apps/arc-web/app/routes/run-overview.tsx      |  3 ++
 5 files changed, 33 insertions(+), 32 deletions(-)
 create mode 100644 apps/arc-web/app/routes/run-overview.tsx

diff --git a/apps/arc-web/app/app.css b/apps/arc-web/app/app.css
index c04e165fc..901b51bb4 100644
--- a/apps/arc-web/app/app.css
+++ b/apps/arc-web/app/app.css
@@ -50,6 +50,32 @@
   font-family: inherit;
 }
 
+/* ── @pierre/diffs brand overrides ── */
+
+:root {
+  --diffs-font-family: "JetBrains Mono", ui-monospace, monospace;
+  --diffs-header-font-family: "Geist", ui-sans-serif, system-ui, sans-serif;
+  --diffs-font-size: 13px;
+  --diffs-line-height: 20px;
+
+  /* Surfaces */
+  --diffs-bg-buffer-override: #0F1729;
+  --diffs-bg-context-override: #161d2e;
+  --diffs-bg-hover-override: #1c2438;
+  --diffs-bg-separator-override: #252C3D;
+
+  /* Line numbers */
+  --diffs-fg-number-override: #4B5768;
+
+  /* Additions — mint */
+  --diffs-addition-color-override: #5AC8A8;
+  --diffs-fg-number-addition-override: rgba(90, 200, 168, 0.5);
+
+  /* Deletions — coral */
+  --diffs-deletion-color-override: #E86B6B;
+  --diffs-fg-number-deletion-override: rgba(232, 107, 107, 0.5);
+}
+
 .bg-atmosphere::before {
   content: "";
   position: fixed;
diff --git a/apps/arc-web/app/routes.ts b/apps/arc-web/app/routes.ts
index e4a73bf9a..504e6b3dd 100644
--- a/apps/arc-web/app/routes.ts
+++ b/apps/arc-web/app/routes.ts
@@ -17,9 +17,9 @@ export default [
     ]),
     route("runs", "routes/pipelines.tsx"),
     route("runs/:id", "routes/run-detail.tsx", [
-      index("routes/run-stages.tsx"),
+      index("routes/run-overview.tsx"),
+      route("stages", "routes/run-stages.tsx"),
       route("files", "routes/run-files-changed.tsx"),
-      route("logs", "routes/run-logs.tsx"),
     ]),
     route("insights", "routes/insights.tsx"),
     route("settings", "routes/settings.tsx"),
diff --git a/apps/arc-web/app/routes/run-detail.tsx b/apps/arc-web/app/routes/run-detail.tsx
index 714bf51d6..6af9d54d9 100644
--- a/apps/arc-web/app/routes/run-detail.tsx
+++ b/apps/arc-web/app/routes/run-detail.tsx
@@ -5,9 +5,9 @@ import { workflowData } from "./workflow-detail";
 import type { Route } from "./+types/run-detail";
 
 const tabs = [
-  { name: "Stages", path: "" },
+  { name: "Overview", path: "" },
+  { name: "Stages", path: "/stages" },
   { name: "Files Changed", path: "/files" },
-  { name: "Logs", path: "/logs" },
 ];
 
 export const handle = { hideHeader: true };
diff --git a/apps/arc-web/app/routes/run-files-changed.tsx b/apps/arc-web/app/routes/run-files-changed.tsx
index 13b607775..201994a40 100644
--- a/apps/arc-web/app/routes/run-files-changed.tsx
+++ b/apps/arc-web/app/routes/run-files-changed.tsx
@@ -1,35 +1,7 @@
-import { ChevronRightIcon } from "@heroicons/react/20/solid";
 import { MultiFileDiff } from "@pierre/diffs/react";
-import { useState } from "react";
 
 export const handle = { wide: true };
 
-function countLines(oldContents: string, newContents: string) {
-  const oldLines = oldContents ? oldContents.split("\n") : [];
-  const newLines = newContents ? newContents.split("\n") : [];
-  let additions = 0;
-  let deletions = 0;
-  const max = Math.max(oldLines.length, newLines.length);
-  for (let i = 0; i < max; i++) {
-    if (oldLines[i] !== newLines[i]) {
-      if (i < newLines.length) additions++;
-      if (i < oldLines.length) deletions++;
-    }
-  }
-  return { additions, deletions };
-}
-
-function FileStatus({ oldContents, newContents }: { oldContents: string; newContents: string }) {
-  if (!oldContents) return <span className="rounded-full bg-mint/15 px-2 py-0.5 text-xs font-medium text-mint">Added</span>;
-  const { additions, deletions } = countLines(oldContents, newContents);
-  return (
-    <span className="flex items-center gap-2 font-mono text-xs">
-      {additions > 0 && <span className="text-mint">+{additions}</span>}
-      {deletions > 0 && <span className="text-coral">-{deletions}</span>}
-    </span>
-  );
-}
-
 const files = [
   {
     oldFile: {
diff --git a/apps/arc-web/app/routes/run-overview.tsx b/apps/arc-web/app/routes/run-overview.tsx
new file mode 100644
index 000000000..0520db15f
--- /dev/null
+++ b/apps/arc-web/app/routes/run-overview.tsx
@@ -0,0 +1,3 @@
+export default function RunOverview() {
+  return <p className="text-sm text-navy-600">Overview will appear here.</p>;
+}