[web] UI polish: inline durations, font fixes, trace viewer scrolling fix (#554)

VaguelySerious · web-flow · commit 24e627159200 · 2025-12-05T12:43:39.000-08:00
diff --git a/.changeset/honest-fans-change.md b/.changeset/honest-fans-change.md
@@ -0,0 +1,6 @@
+---
+"@workflow/web": patch
+"@workflow/web-shared": patch
+---
+
+UI polish: inline durations, font fixes, trace viewer scrolling fix
diff --git a/packages/web/src/app/page.tsx b/packages/web/src/app/page.tsx
@@ -15,7 +15,7 @@ import {
   useTabState,
   useWorkflowIdState,
 } from '@/lib/url-state';
-import { useWorkflowGraphManifest } from '@/lib/use-workflow-graph';
+import { useWorkflowGraphManifest } from '@/lib/flow-graph/use-workflow-graph';
 
 export default function Home() {
   const router = useRouter();
diff --git a/packages/web/src/components/display-utils/status-badge.tsx b/packages/web/src/components/display-utils/status-badge.tsx
@@ -62,7 +62,7 @@ export function StatusBadge({
   };
 
   const content = (
-    <span className={cn('flex flex-col', className)}>
+    <span className={cn('flex flex-row gap-2', className)}>
       <span className="flex items-center gap-1.5">
         <span
           className={cn('size-2 rounded-full shrink-0', getCircleColor())}
@@ -73,7 +73,7 @@ export function StatusBadge({
       </span>
       {durationMs !== undefined && (
         <span className="text-muted-foreground/70 text-xs">
-          {formatDuration(durationMs)}
+          ({formatDuration(durationMs)})
         </span>
       )}
     </span>
diff --git a/packages/web/src/components/flow-graph/workflow-graph-execution-viewer.tsx b/packages/web/src/components/flow-graph/workflow-graph-execution-viewer.tsx
@@ -23,7 +23,7 @@ import type {
   StepExecution,
   WorkflowGraph,
   WorkflowRunExecution,
-} from '@/lib/workflow-graph-types';
+} from '@/lib/flow-graph/workflow-graph-types';
 
 interface WorkflowGraphExecutionViewerProps {
   workflow: WorkflowGraph;
diff --git a/packages/web/src/components/flow-graph/workflow-graph-viewer.css b/packages/web/src/components/flow-graph/workflow-graph-viewer.css
diff --git a/packages/web/src/components/flow-graph/workflow-graph-viewer.tsx b/packages/web/src/components/flow-graph/workflow-graph-viewer.tsx
@@ -15,7 +15,10 @@ import { useEffect, useMemo } from 'react';
 import '@xyflow/react/dist/style.css';
 import { GitBranch, PlayCircle, StopCircle } from 'lucide-react';
 import './workflow-graph-viewer.css';
-import type { GraphNode, WorkflowGraph } from '@/lib/workflow-graph-types';
+import type {
+  GraphNode,
+  WorkflowGraph,
+} from '@/lib/flow-graph/workflow-graph-types';
 
 interface WorkflowGraphViewerProps {
   workflow: WorkflowGraph;
diff --git a/packages/web/src/components/run-detail-view.tsx b/packages/web/src/components/run-detail-view.tsx
@@ -252,7 +252,7 @@ export function RunDetailView({
         </AlertDialogContent>
       </AlertDialog>
 
-      <div className="flex flex-col h-[calc(100vh-88px)]">
+      <div className="flex flex-col h-[calc(100vh-97px)]">
         <div className="flex-none space-y-4">
           <Breadcrumb>
             <BreadcrumbList>
@@ -409,7 +409,7 @@ export function RunDetailView({
                       </p>
                     </TooltipContent>
                   </Tooltip>
-                  <div className="text-sm">
+                  <div className="text-xs">
                     <RelativeTime date={run.expiredAt} />
                   </div>
                 </div>
diff --git a/packages/web/src/components/runs-table.tsx b/packages/web/src/components/runs-table.tsx
@@ -404,7 +404,7 @@ export function RunsTable({ config, onRunClick }: RunsTableProps) {
                           {run.runId}
                         </CopyableText>
                       </TableCell>
-                      <TableCell className="py-2 align-top">
+                      <TableCell className="py-2">
                         <StatusBadge
                           status={run.status}
                           context={run}
diff --git a/packages/web/src/components/workflows-list.tsx b/packages/web/src/components/workflows-list.tsx
@@ -19,8 +19,8 @@ import {
   TableHeader,
   TableRow,
 } from '@/components/ui/table';
-import { WorkflowGraphViewer } from '@/components/workflow-graph-viewer';
-import type { WorkflowGraph } from '@/lib/workflow-graph-types';
+import { WorkflowGraphViewer } from '@/components/flow-graph/workflow-graph-viewer';
+import type { WorkflowGraph } from '@/lib/flow-graph/workflow-graph-types';
 import { TableSkeleton } from './display-utils/table-skeleton';
 
 interface WorkflowsListProps {
diff --git a/packages/web/src/lib/flow-graph/graph-execution-mapper.ts b/packages/web/src/lib/flow-graph/graph-execution-mapper.ts
diff --git a/packages/web/src/lib/flow-graph/manifest-adapter.ts b/packages/web/src/lib/flow-graph/manifest-adapter.ts
diff --git a/packages/web/src/lib/flow-graph/use-workflow-graph.ts b/packages/web/src/lib/flow-graph/use-workflow-graph.ts
@@ -8,11 +8,11 @@ import {
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { worldConfigToEnvMap } from '@/lib/config';
 import type { WorldConfig } from '@/lib/config-world';
-import { adaptManifest } from '@/lib/manifest-adapter';
+import { adaptManifest } from '@/lib/flow-graph/manifest-adapter';
 import type {
   RawWorkflowsManifest,
   WorkflowGraphManifest,
-} from '@/lib/workflow-graph-types';
+} from '@/lib/flow-graph/workflow-graph-types';
 
 /**
  * Hook to fetch the workflow graph manifest from the workflow data directory
diff --git a/packages/web/src/lib/flow-graph/workflow-graph-types.ts b/packages/web/src/lib/flow-graph/workflow-graph-types.ts
