From 59e8f2d30bcd2fe7792105e9288c13e529fa15b5 Mon Sep 17 00:00:00 2001
From: Bryan Helmkamp <bryan@brynary.com>
Date: Thu, 7 May 2026 10:30:52 -0700
Subject: [PATCH] style(web): remove stage label/duration header from run
 stages tab

The stage label and ticking duration were a redundant repeat of the
sidebar's selected entry. Drop the sticky header (and the now-unused
RunningStageDuration helper) so the right column focuses on the stage
activity.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 apps/fabro-web/app/routes/run-stages.tsx | 49 +-----------------------
 1 file changed, 2 insertions(+), 47 deletions(-)

diff --git a/apps/fabro-web/app/routes/run-stages.tsx b/apps/fabro-web/app/routes/run-stages.tsx
index b23637f62..d6ef9514d 100644
--- a/apps/fabro-web/app/routes/run-stages.tsx
+++ b/apps/fabro-web/app/routes/run-stages.tsx
@@ -35,15 +35,13 @@ markedSafe.use({
 import { CommandLineIcon, ChatBubbleLeftIcon, PlayIcon } from "@heroicons/react/24/outline";
 import { ToolBlock } from "../components/tool-use";
 import type { ToolUse } from "../components/tool-use";
-import { StageSidebar, statusConfig } from "../components/stage-sidebar";
+import { StageSidebar } from "../components/stage-sidebar";
 import type { Stage } from "../components/stage-sidebar";
 import { EmptyState } from "../components/state";
 import { CopyButton } from "../components/ui";
-import { formatDurationSecs } from "../lib/format";
-import { useTickingNow } from "../lib/time";
 import { fetchRunCommandLog, useRunStageEvents, useRunStages } from "../lib/queries";
 import { STAGE_ACTIVITY_EVENT_TYPES, type StageActivityEventType } from "../lib/run-events";
-import { ACTIVE_STAGE_STATES, formatStageLabel, mapRunStagesToSidebarStages } from "../lib/stage-sidebar";
+import { mapRunStagesToSidebarStages } from "../lib/stage-sidebar";
 import { getNumber, getString, type UnknownRecord } from "../lib/unknown";
 import {
   CommandOutputStream,
@@ -554,32 +552,6 @@ function CommandBlock({
   );
 }
 
-function RunningStageDuration({
-  isRunning,
-  duration,
-}: {
-  isRunning: boolean;
-  duration: string;
-}) {
-  const [startedAt, setStartedAt] = useState<number | null>(() =>
-    isRunning ? Date.now() : null,
-  );
-
-  useEffect(() => {
-    setStartedAt((current) => {
-      if (!isRunning) return null;
-      return current ?? Date.now();
-    });
-  }, [isRunning]);
-
-  const now = useTickingNow(isRunning);
-
-  if (isRunning && startedAt) {
-    return formatDurationSecs(Math.floor((now - startedAt) / 1000));
-  }
-  return duration;
-}
-
 export default function RunStages() {
   const { id, stageId } = useParams();
   const stagesQuery = useRunStages(id);
@@ -598,7 +570,6 @@ export default function RunStages() {
         : [],
     [stageEventsQuery.data, selectedStageId],
   );
-  const isActive = selectedStage ? ACTIVE_STAGE_STATES.has(selectedStage.status) : false;
 
   if (!id || !stages.length) {
     return (
@@ -611,9 +582,6 @@ export default function RunStages() {
     );
   }
 
-  const selectedConfig = statusConfig[selectedStage.status];
-  const SelectedIcon = selectedConfig.icon;
-
   return (
     <div className="-mt-6 -mb-6 flex h-[calc(100%+3rem)] min-h-0">
       <div className="shrink-0 pb-6 pr-3 pt-6">
@@ -623,19 +591,6 @@ export default function RunStages() {
       <div className="w-px shrink-0 bg-line" aria-hidden="true" />
 
       <div className="min-w-0 flex-1 space-y-3 overflow-y-auto pb-6 pl-3 pt-6">
-        <div className="sticky top-0 z-10 -mx-2 flex items-center gap-2 bg-page/85 px-2 py-2 backdrop-blur">
-          <SelectedIcon className={`size-5 ${selectedConfig.color} ${isActive ? "animate-spin" : ""}`} />
-          <h3 className="text-base font-semibold text-fg">
-            {formatStageLabel(selectedStage)}
-          </h3>
-          <span className="font-mono text-xs tabular-nums text-fg-muted">
-            <RunningStageDuration
-              isRunning={isActive}
-              duration={selectedStage.duration}
-            />
-          </span>
-        </div>
-
         {turns.map((turn: TurnType, i: number) => {
           switch (turn.kind) {
             case "system":