scriptoriumadmin/fabro
1
0
Fork 0
mirror of https://github.com/fabro-sh/fabro.git synced 2026-10-06 02:48:25 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

style(web): remove stage label/duration header from run stages tab

Browse source 
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>
This commit is contained in:
Bryan Helmkamp 2026-05-07 10:30:52 -07:00
parent fd66797635
commit 59e8f2d30b
No known key found for this signature in database
1 changed files with 2 additions and 47 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

49
apps/fabro-web/app/routes/run-stages.tsx
View file

@ -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":