@agimon-ai/doompi-workflow 0.0.1-alpha.67 → 0.0.1-alpha.68

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agimon-ai/doompi-workflow",
-  "version": "0.0.1-alpha.67",
+  "version": "0.0.1-alpha.68",
   "description": "GitHub Actions-style workflow graphs, artifacts, recovery, and asynchronous runs for DoomPi.",
   "keywords": [
     "ai",
@@ -34,7 +34,8 @@
     "src/web",
     "src/exports/webClient.ts",
     "src/types/webWorkflows.ts",
-    "src/types/webWorkflowTerminal.ts"
+    "src/types/webWorkflowTerminal.ts",
+    "!src/web/**/*.stories.tsx"
   ],
   "type": "module",
   "main": "./dist/index.cjs",
@@ -68,12 +69,12 @@
     "@modelcontextprotocol/sdk": "1.30.0",
     "hono": "4.13.5",
     "zod": "4.5.4",
-    "@agimon-ai/doompi-extension-contracts": "0.0.1-alpha.66",
-    "@agimon-ai/doompi-ui": "0.0.1-alpha.67",
-    "@agimon-ai/doompi-web-security": "0.0.1-alpha.28",
-    "@agimon-ai/doompi-telemetry": "0.0.1-alpha.65",
-    "@agimon-ai/doompi-web-contracts": "0.0.1-alpha.29",
-    "@agimon-ai/doompi-web-components": "0.0.1-alpha.26"
+    "@agimon-ai/doompi-extension-contracts": "0.0.1-alpha.67",
+    "@agimon-ai/doompi-telemetry": "0.0.1-alpha.66",
+    "@agimon-ai/doompi-web-components": "0.0.1-alpha.27",
+    "@agimon-ai/doompi-web-contracts": "0.0.1-alpha.30",
+    "@agimon-ai/doompi-web-security": "0.0.1-alpha.29",
+    "@agimon-ai/doompi-ui": "0.0.1-alpha.68"
   },
   "devDependencies": {
     "@earendil-works/pi-coding-agent": "0.85.1",

package/src/web/components/ArtifactsPane.tsx

@@ -76,7 +76,7 @@ function DelimitedPreview({ text, delimiter }: { text: string; delimiter: ',' |
   const [head = [], ...body] = rows;
   return (
     <div className="overflow-auto">
-      <table data-testid="artifact-table" className="min-w-full border-collapse font-mono text-[11px]">
+      <table data-testid="artifact-table" className="min-w-full border-collapse font-mono text-sm">
         <thead className="sticky top-0 bg-doom-panel text-doom-hi">
           <tr>
             {head.map((cell, index) => (
@@ -142,12 +142,12 @@ function ArtifactPreview({
     return raw ? (
       <pre
         data-testid="artifact-raw"
-        className="whitespace-pre-wrap break-words font-mono text-[11px] leading-[17px] text-doom-text"
+        className="whitespace-pre-wrap break-words font-mono text-sm leading-snug text-doom-text"
       >
         {text}
       </pre>
     ) : (
-      <div data-testid="artifact-markdown" className="max-w-5xl text-[13px] text-doom-text">
+      <div data-testid="artifact-markdown" className="max-w-5xl text-base text-doom-text">
         <Markdown text={text} />
       </div>
     );
@@ -160,9 +160,7 @@ function ArtifactPreview({
       // An incomplete file remains useful as literal text while a workflow writes it.
     }
     return (
-      <pre className="whitespace-pre-wrap break-words font-mono text-[11px] leading-[17px] text-doom-text">
-        {formatted}
-      </pre>
+      <pre className="whitespace-pre-wrap break-words font-mono text-sm leading-snug text-doom-text">{formatted}</pre>
     );
   }
   if (mimeType === 'text/csv' || mimeType === 'text/tab-separated-values') {
@@ -216,9 +214,7 @@ function ArtifactPreview({
     );
   }
   if (content.text !== undefined) {
-    return (
-      <pre className="whitespace-pre-wrap break-words font-mono text-[11px] leading-[17px] text-doom-text">{text}</pre>
-    );
+    return <pre className="whitespace-pre-wrap break-words font-mono text-sm leading-snug text-doom-text">{text}</pre>;
   }
   return (
     <EmptyState title="preview unavailable" description="Download this artifact to open it with a local application." />
@@ -278,9 +274,9 @@ export function ArtifactViewerPanel({
   return (
     <div data-testid="artifact-viewer" className="flex min-h-0 flex-1 flex-col px-[26px] py-[18px]">
       <div className="flex items-center gap-2.5 pb-3">
-        <span className="truncate text-[12px] font-bold text-doom-hi">{path}</span>
+        <span className="truncate text-sm font-bold text-doom-hi">{path}</span>
         <Badge size="xs">{mimeType ?? 'artifact'}</Badge>
-        <span className="text-[9px] text-doom-faint">
+        <span className="text-2xs text-doom-faint">
           {content === undefined ? '' : `${formatSize(content.size)} · written ${formatWhen(content.modifiedAt)}`}
         </span>
         <span className="min-w-0 flex-1" />
@@ -320,17 +316,17 @@ export function ArtifactViewerPanel({
       </div>
       <div className="min-h-0 flex-1 overflow-auto rounded-md border border-doom-border bg-doom-deep p-4">
         {error !== undefined ? (
-          <span data-testid="artifact-error" className="text-[10px] text-doom-yellow">
+          <span data-testid="artifact-error" className="text-xs text-doom-yellow">
             {error}
           </span>
         ) : content === undefined ? (
-          <span className="text-[10px] text-doom-faint">loading preview</span>
+          <span className="text-xs text-doom-faint">loading preview</span>
         ) : (
           <ArtifactPreview content={content} rawUrl={rawUrl} raw={raw} />
         )}
       </div>
       {content?.truncated === true ? (
-        <span className="pt-2 text-[9px] text-doom-faint">
+        <span className="pt-2 text-2xs text-doom-faint">
           this preview shows the first {formatSize(content.text?.length)}; download the artifact for the complete file
         </span>
       ) : null}
@@ -397,8 +393,8 @@ export function ArtifactsPane({
         className={`flex flex-col gap-0.5 px-3 py-1.5 text-left ${openable ? 'cursor-pointer hover:bg-doom-panel' : 'cursor-default'}`}
       >
         <span className="flex min-w-0 items-center gap-2">
-          <span className={`w-3 shrink-0 text-[10px] ${glyph.className}`}>{glyph.glyph}</span>
-          <span className={`truncate text-[11px] ${entry.state === 'pending' ? 'text-doom-dim' : 'text-doom-hi'}`}>
+          <span className={`w-3 shrink-0 text-xs ${glyph.className}`}>{glyph.glyph}</span>
+          <span className={`truncate text-sm ${entry.state === 'pending' ? 'text-doom-dim' : 'text-doom-hi'}`}>
             {entry.path}
           </span>
           {entry.producedBy.length === 0 ? null : (
@@ -407,14 +403,14 @@ export function ArtifactsPane({
             </Badge>
           )}
           <span className="min-w-0 flex-1" />
-          <span className="shrink-0 text-[9px] text-doom-faint">
+          <span className="shrink-0 text-2xs text-doom-faint">
             {entry.state === 'pending'
               ? 'not written yet'
               : `${formatSize(entry.size)} · ${formatWhen(entry.modifiedAt)}`}
           </span>
         </span>
         {entry.description === '' ? null : (
-          <span className="truncate pl-5 text-[9px] text-doom-faint">{entry.description}</span>
+          <span className="truncate pl-5 text-2xs text-doom-faint">{entry.description}</span>
         )}
       </button>
     );
@@ -430,7 +426,7 @@ export function ArtifactsPane({
       ) : null}
       {declared.length === 0 ? null : (
         <>
-          <span className="px-3 pb-1 pt-2 text-[9px] font-bold tracking-[0.14em] text-doom-faint">
+          <span className="px-3 pb-1 pt-2 text-2xs font-bold tracking-wider text-doom-faint">
             DECLARED · {listing?.description || 'run-directory'}
           </span>
           {declared.map((entry) => (
@@ -440,16 +436,14 @@ export function ArtifactsPane({
       )}
       {found.length === 0 ? null : (
         <>
-          <span className="px-3 pb-1 pt-3 text-[9px] font-bold tracking-[0.14em] text-doom-faint">
-            ALSO IN THE FOLDER
-          </span>
+          <span className="px-3 pb-1 pt-3 text-2xs font-bold tracking-wider text-doom-faint">ALSO IN THE FOLDER</span>
           {found.map((entry) => (
             <Row key={entry.path} entry={entry} />
           ))}
         </>
       )}
       {listing === undefined ? null : (
-        <span className="truncate px-3 py-2 text-[9px] text-doom-faint">{listing.runDir}</span>
+        <span className="truncate px-3 py-2 text-2xs text-doom-faint">{listing.runDir}</span>
       )}
     </div>
   );

package/src/web/components/LaunchWorkflowDialog.tsx

@@ -32,7 +32,7 @@ const BOOLEAN_TYPE = 'boolean';
 const BOOLEAN_VALUES = ['true', 'false'] as const;
 
 function FieldLabel({ children }: { children: string }) {
-  return <span className="text-[9px] font-bold tracking-[0.18em] text-doom-faint">{children}</span>;
+  return <span className="text-2xs font-bold tracking-widest text-doom-faint">{children}</span>;
 }
 
 /** One `workflow_dispatch` input: a picker when the workflow constrains it, a field otherwise. */
@@ -58,7 +58,7 @@ function InputField({
       className="flex flex-col gap-1.5 sm:flex-row sm:items-center sm:gap-2.5"
       data-testid={`launch-input-${input.name}`}
     >
-      <span className="min-w-0 truncate text-[10px] font-bold text-doom-text sm:w-28 sm:shrink-0">
+      <span className="min-w-0 truncate text-xs font-bold text-doom-text sm:w-28 sm:shrink-0">
         {input.name}
         {input.required === true ? <span className="text-doom-yellow"> *</span> : null}
       </span>
@@ -71,7 +71,7 @@ function InputField({
         />
       ) : (
         <Select value={value === '' ? undefined : value} onValueChange={onChange}>
-          <SelectTrigger className="h-7 w-full min-w-0 text-[10px] sm:min-w-[160px]">
+          <SelectTrigger className="h-7 w-full min-w-0 text-xs sm:min-w-[160px]">
             <SelectValue placeholder="choose…" />
           </SelectTrigger>
           <SelectContent>
@@ -83,7 +83,7 @@ function InputField({
           </SelectContent>
         </Select>
       )}
-      <span className="min-w-0 truncate text-[9px] text-doom-faint sm:w-40 sm:shrink-0">{hint}</span>
+      <span className="min-w-0 truncate text-2xs text-doom-faint sm:w-40 sm:shrink-0">{hint}</span>
     </div>
   );
 }
@@ -144,7 +144,7 @@ export function LaunchWorkflowDialog({
       <DialogContent width="lg" data-testid="launch-workflow-dialog" aria-describedby={undefined}>
         <DialogHeader>
           <div className="flex min-w-0 flex-col items-start gap-1 sm:flex-row sm:items-center sm:gap-2.5">
-            <span className="text-[9px] text-doom-faint">launch workflow</span>
+            <span className="text-2xs text-doom-faint">launch workflow</span>
             <DialogTitle data-testid="launch-workflow-name" className="max-w-full break-words">
               {workflow.name}
             </DialogTitle>
@@ -154,7 +154,7 @@ export function LaunchWorkflowDialog({
           </div>
         </DialogHeader>
         <DialogBody>
-          <p className="text-[11px] leading-relaxed text-doom-dim">
+          <p className="text-sm leading-relaxed text-doom-dim">
             {workflow.description || 'This workflow declares no description.'}
           </p>
           <div className="flex flex-col gap-1.5">
@@ -168,15 +168,13 @@ export function LaunchWorkflowDialog({
               onChange={(event) => setPrompt(event.target.value)}
               onKeyDown={onPromptKeyDown}
             />
-            <span className="text-[9px] text-doom-faint">enter launches · shift+enter for a new line</span>
+            <span className="text-2xs text-doom-faint">enter launches · shift+enter for a new line</span>
           </div>
           {workflow.inputs.length === 0 ? null : (
             <div className="flex flex-col gap-2">
               <div className="flex items-center gap-2">
                 <FieldLabel>INPUTS</FieldLabel>
-                <span className="text-[9px] text-doom-faint">
-                  workflow_dispatch · {workflow.inputs.length} declared
-                </span>
+                <span className="text-2xs text-doom-faint">workflow_dispatch · {workflow.inputs.length} declared</span>
               </div>
               {workflow.inputs.map((input) => (
                 <InputField
@@ -192,13 +190,10 @@ export function LaunchWorkflowDialog({
             <div className="flex flex-col gap-1.5">
               <FieldLabel>RUNNER</FieldLabel>
               {workflow.runners === undefined || workflow.runners.length === 0 ? (
-                <span className="flex h-7 items-center text-[10px] text-doom-dim">whatever the workflow resolves</span>
+                <span className="flex h-7 items-center text-xs text-doom-dim">whatever the workflow resolves</span>
               ) : (
                 <Select value={runner} onValueChange={setRunner}>
-                  <SelectTrigger
-                    data-testid="launch-runner"
-                    className="h-7 w-full min-w-0 text-[10px] sm:min-w-[160px]"
-                  >
+                  <SelectTrigger data-testid="launch-runner" className="h-7 w-full min-w-0 text-xs sm:min-w-[160px]">
                     <SelectValue />
                   </SelectTrigger>
                   <SelectContent>
@@ -210,36 +205,36 @@ export function LaunchWorkflowDialog({
                   </SelectContent>
                 </Select>
               )}
-              <span className="text-[9px] text-doom-faint">
+              <span className="text-2xs text-doom-faint">
                 {workflow.runners === undefined ? 'no runner map declared' : 'the runners every step agrees on'}
               </span>
             </div>
             <div className="flex flex-col gap-1.5">
               <FieldLabel>JOBS</FieldLabel>
-              <span className="flex h-7 items-center text-[10px] text-doom-dim">
+              <span className="flex h-7 items-center text-xs text-doom-dim">
                 {workflow.jobs.map((job) => job.name).join(' → ') || 'none declared'}
               </span>
-              <span className="text-[9px] text-doom-faint">in the order the file declares them</span>
+              <span className="text-2xs text-doom-faint">in the order the file declares them</span>
             </div>
             <div className="flex flex-col gap-1.5">
               <FieldLabel>CWD</FieldLabel>
-              <span className="flex h-7 items-center text-[10px] text-doom-dim">{cwd}</span>
-              <span className="text-[9px] text-doom-faint">the session's directory</span>
+              <span className="flex h-7 items-center text-xs text-doom-dim">{cwd}</span>
+              <span className="text-2xs text-doom-faint">the session's directory</span>
             </div>
           </div>
           <div className="flex flex-col gap-1 rounded-md border border-doom-border bg-doom-deep px-3 py-2">
             <FieldLabel>SENT TO THE SESSION</FieldLabel>
-            <pre data-testid="launch-line" className="whitespace-pre-wrap break-words text-[10px] text-doom-green">
+            <pre data-testid="launch-line" className="whitespace-pre-wrap break-words text-xs text-doom-green">
               {line}
             </pre>
           </div>
           {problems.length === 0 ? null : (
-            <p data-testid="launch-problems" className="text-[10px] text-doom-yellow">
+            <p data-testid="launch-problems" className="text-xs text-doom-yellow">
               {problems.join(' ')}
             </p>
           )}
           <DialogFooter className="flex-wrap sm:flex-nowrap">
-            <span className="w-full text-[9px] text-doom-faint sm:w-auto">
+            <span className="w-full text-2xs text-doom-faint sm:w-auto">
               the run appears on the board as soon as it starts
             </span>
             <span className="min-w-0 flex-1" />

package/src/web/components/StepTerminalPanel.tsx

@@ -160,15 +160,13 @@ export function StepTerminalPanel({ sessionId, target }: WebPluginSlotProps & {
   return (
     <div data-testid="step-terminal-panel" className="flex min-h-0 flex-1 flex-col px-[26px] py-[18px]">
       <div data-testid="step-terminal-head" className="flex items-center gap-2.5 pb-3">
-        <span className="shrink-0 truncate text-[12px] font-bold text-doom-hi">
-          {run?.displayName ?? target.runKey}
-        </span>
-        <span className="text-[10px] text-doom-faint">›</span>
-        <span className="shrink-0 truncate text-[11px] font-bold text-doom-blue">{target.job}</span>
+        <span className="shrink-0 truncate text-sm font-bold text-doom-hi">{run?.displayName ?? target.runKey}</span>
+        <span className="text-xs text-doom-faint">›</span>
+        <span className="shrink-0 truncate text-sm font-bold text-doom-blue">{target.job}</span>
         {target.step === undefined ? null : (
           <>
-            <span className="text-[10px] text-doom-faint">›</span>
-            <span className="min-w-0 truncate text-[11px] text-doom-text">{target.step}</span>
+            <span className="text-xs text-doom-faint">›</span>
+            <span className="min-w-0 truncate text-sm text-doom-text">{target.step}</span>
           </>
         )}
         {run === undefined ? null : (
@@ -204,12 +202,12 @@ export function StepTerminalPanel({ sessionId, target }: WebPluginSlotProps & {
         data-testid="step-terminal-screen"
         tabIndex={0}
         onKeyDown={onKeyDown}
-        className={`min-h-0 flex-1 overflow-y-auto rounded-md border bg-doom-deep px-4 py-3 font-mono text-[11px] leading-[15px] text-doom-text outline-none ${
+        className={`min-h-0 flex-1 overflow-y-auto rounded-md border bg-doom-deep px-4 py-3 font-mono text-sm leading-tight text-doom-text outline-none ${
           held ? 'border-doom-blue/60' : 'border-doom-border'
         }`}
       >
         {lines.length === 0 ? (
-          <span className="text-[10px] text-doom-faint">
+          <span className="text-xs text-doom-faint">
             {capabilities?.readable === false
               ? (capabilities.reason ?? 'This run has no terminal to read.')
               : 'waiting for the run to paint…'}
@@ -220,7 +218,7 @@ export function StepTerminalPanel({ sessionId, target }: WebPluginSlotProps & {
         {held && !ended ? <StreamCursor className="mt-0.5 h-[12px] w-1.5" /> : null}
       </div>
       <div className="flex items-center gap-3 pt-2.5">
-        <span data-testid="step-terminal-hint" className="text-[9px] text-doom-faint">
+        <span data-testid="step-terminal-hint" className="text-2xs text-doom-faint">
           {held
             ? 'keys go to the run · ctrl-c and ctrl-d pass through · esc releases the keyboard'
             : capabilities?.writable === false
@@ -229,12 +227,12 @@ export function StepTerminalPanel({ sessionId, target }: WebPluginSlotProps & {
         </span>
         <span className="min-w-0 flex-1" />
         {ended ? (
-          <span data-testid="step-terminal-ended" className="text-[9px] text-doom-faint">
+          <span data-testid="step-terminal-ended" className="text-2xs text-doom-faint">
             the run has settled; this is its last screen
           </span>
         ) : null}
         {notice === undefined ? null : (
-          <span data-testid="step-terminal-notice" className="text-[9px] text-doom-yellow">
+          <span data-testid="step-terminal-notice" className="text-2xs text-doom-yellow">
             {notice}
           </span>
         )}

package/src/web/components/WorkflowCatalogDrawer.tsx

@@ -27,7 +27,7 @@ function Detail({ workflow }: { workflow: WorkflowCatalogEntryView }) {
     ['file', workflow.relativePath],
   ];
   return (
-    <dl data-testid={`catalog-detail-${workflow.name}`} className="flex flex-col gap-1 pt-1 text-[9px]">
+    <dl data-testid={`catalog-detail-${workflow.name}`} className="flex flex-col gap-1 pt-1 text-2xs">
       {rows.map(([label, value]) => (
         <div key={label} className="flex gap-2">
           <dt className="w-16 shrink-0 text-doom-faint">{label}</dt>
@@ -69,26 +69,26 @@ function WorkflowRow({
       }`}
     >
       <div className="flex min-w-0 items-center gap-2">
-        <span className="truncate text-[12px] font-bold text-doom-hi">{workflow.name}</span>
+        <span className="truncate text-sm font-bold text-doom-hi">{workflow.name}</span>
         {workflow.tags.map((tag) => (
           <Badge key={tag} size="xs" className="shrink-0">
             {tag}
           </Badge>
         ))}
         <span className="min-w-0 flex-1" />
-        <span className={`shrink-0 text-[9px] ${workflow.error === undefined ? 'text-doom-cyan' : 'text-doom-red'}`}>
+        <span className={`shrink-0 text-2xs ${workflow.error === undefined ? 'text-doom-cyan' : 'text-doom-red'}`}>
           {workflow.error === undefined ? `${jobs} job${jobs === 1 ? '' : 's'}` : 'unreadable'}
         </span>
       </div>
-      <span className="truncate text-[10px] text-doom-dim">{workflow.description || workflow.relativePath}</span>
+      <span className="truncate text-xs text-doom-dim">{workflow.description || workflow.relativePath}</span>
       {workflow.error === undefined ? (
-        <span className="truncate text-[9px] text-doom-faint">
+        <span className="truncate text-2xs text-doom-faint">
           {workflow.inputs.length} input{workflow.inputs.length === 1 ? '' : 's'} ·{' '}
           {workflow.runners === undefined ? 'any runner' : workflow.runners.join(', ') || 'no runner in common'}
           {workflow.artifacts.length > 0 ? ` · ${workflow.artifacts.length} artifacts` : ''}
         </span>
       ) : (
-        <span className="truncate text-[9px] text-doom-red">{workflow.error}</span>
+        <span className="truncate text-2xs text-doom-red">{workflow.error}</span>
       )}
       {selected ? (
         <div className="flex items-center gap-3 pt-0.5">
@@ -179,7 +179,7 @@ export function WorkflowCatalogDrawer({
       className="flex w-[min(440px,calc(100vw-24px))] shrink-0 flex-col overflow-hidden border-l border-doom-border bg-doom-rail outline-none"
     >
       <div className="flex h-11 shrink-0 items-center gap-2.5 border-b border-doom-border px-4">
-        <span className="text-[13px] font-bold text-doom-hi">workflow catalog</span>
+        <span className="text-base font-bold text-doom-hi">workflow catalog</span>
         <Badge size="xs" data-testid="catalog-count">
           {state.workflows.length} workflow{state.workflows.length === 1 ? '' : 's'}
         </Badge>
@@ -200,7 +200,7 @@ export function WorkflowCatalogDrawer({
       </div>
       <div role="listbox" className="flex min-h-0 flex-1 flex-col overflow-y-auto pb-2">
         {shown.length === 0 ? (
-          <p data-testid="catalog-empty" className="px-4 py-3 text-[10px] text-doom-faint">
+          <p data-testid="catalog-empty" className="px-4 py-3 text-xs text-doom-faint">
             {state.warning ??
               (state.workflows.length === 0
                 ? 'no workflows found for this session; add one under automations/workflows'
@@ -220,8 +220,8 @@ export function WorkflowCatalogDrawer({
         ))}
       </div>
       <div className="flex h-8 shrink-0 items-center justify-between border-t border-doom-border-soft bg-doom-deep px-4">
-        <span className="text-[9px] text-doom-faint">↑↓ choose · enter launch · i inspect · esc close</span>
-        <span className="text-[9px] text-doom-faint">{state.cwd}</span>
+        <span className="text-2xs text-doom-faint">↑↓ choose · enter launch · i inspect · esc close</span>
+        <span className="text-2xs text-doom-faint">{state.cwd}</span>
       </div>
     </aside>
   );

package/src/web/components/WorkflowsActivitySection.tsx

@@ -59,7 +59,7 @@ export function WorkflowsActivitySection({ sessionId, openTransientTab }: WebPlu
   if (groups.length === 0) {
     return (
       <div className="flex items-center gap-2 px-1">
-        <p data-testid="activity-summary-workflows" className="text-[10px] text-doom-faint">
+        <p data-testid="activity-summary-workflows" className="text-xs text-doom-faint">
           idle
         </p>
         <Button
@@ -91,20 +91,20 @@ export function WorkflowsActivitySection({ sessionId, openTransientTab }: WebPlu
         focusRun(sessionId, row.identity);
         openTransientTab(workflowsTab());
       }}
-      className="min-w-0 gap-0.5 rounded-[5px] px-1 py-1 hover:bg-doom-panel"
+      className="min-w-0 gap-0.5 rounded-md px-1 py-1 hover:bg-doom-panel"
     >
       <span className="flex min-w-0 items-center gap-1.5">
         <Dot tone={TONE_DOT[row.tone]} pulse={row.tone === 'running'} />
         <span
-          className={`min-w-0 flex-1 truncate text-[10px] font-bold ${
+          className={`min-w-0 flex-1 truncate text-xs font-bold ${
             row.tone === 'running' || row.tone === 'paused' ? 'text-doom-hi' : 'text-doom-dim'
           }`}
         >
           {row.name}
         </span>
-        <span className="shrink-0 text-[9px] text-doom-faint">{row.elapsed}</span>
+        <span className="shrink-0 text-2xs text-doom-faint">{row.elapsed}</span>
       </span>
-      <span className={`truncate pl-3 text-[9px] ${TONE_DETAIL[row.tone]}`}>{row.detail}</span>
+      <span className={`truncate pl-3 text-2xs ${TONE_DETAIL[row.tone]}`}>{row.detail}</span>
     </Button>
   );
 
@@ -121,15 +121,15 @@ export function WorkflowsActivitySection({ sessionId, openTransientTab }: WebPlu
               data-open={open}
               aria-expanded={open}
               onClick={() => setFolded((current) => ({ ...current, [group.name]: !open }))}
-              className="justify-start gap-1.5 rounded-[5px] px-1 py-0.5 hover:bg-doom-panel"
+              className="justify-start gap-1.5 rounded-md px-1 py-0.5 hover:bg-doom-panel"
             >
               {open ? (
                 <ChevronDownIcon className="h-2.5 w-2.5 text-doom-faint" />
               ) : (
                 <ChevronRightIcon className="h-2.5 w-2.5 text-doom-faint" />
               )}
-              <span className={`text-[10px] font-bold ${GROUP_LABEL[group.name]}`}>{group.name}</span>
-              <span className="text-[9px] text-doom-faint">{group.rows.length}</span>
+              <span className={`text-xs font-bold ${GROUP_LABEL[group.name]}`}>{group.name}</span>
+              <span className="text-2xs text-doom-faint">{group.rows.length}</span>
             </Button>
             {open ? (
               <div className="flex flex-col gap-0.5 pl-2">
@@ -138,7 +138,7 @@ export function WorkflowsActivitySection({ sessionId, openTransientTab }: WebPlu
                 ))}
               </div>
             ) : (
-              <span className="truncate pl-5 text-[9px] text-doom-faint">
+              <span className="truncate pl-5 text-2xs text-doom-faint">
                 {group.rows
                   .slice(0, 2)
                   .map((row) => row.name)

package/src/web/components/WorkflowsPanel.tsx

@@ -154,7 +154,7 @@ function WorkflowPicker({
         >
           <SearchIcon className="h-3 w-3 shrink-0 text-doom-faint" />
           <span className="min-w-0 flex-1 truncate text-left font-bold text-doom-hi">{selected.displayName}</span>
-          <span className="shrink-0 text-[9px] font-normal text-doom-faint">{runs.length} workflows</span>
+          <span className="shrink-0 text-2xs font-normal text-doom-faint">{runs.length} workflows</span>
           <ChevronDownIcon className="h-3 w-3 shrink-0 text-doom-dim" />
         </Button>
       </PopoverTrigger>
@@ -175,13 +175,11 @@ function WorkflowPicker({
         </PopoverHeader>
         <div className="grid max-h-[360px] grid-cols-1 gap-2 overflow-y-auto p-2 sm:grid-cols-2">
           {sections.length === 0 ? (
-            <span className="px-2 py-5 text-center text-[10px] text-doom-faint sm:col-span-2">
-              no matching workflows
-            </span>
+            <span className="px-2 py-5 text-center text-xs text-doom-faint sm:col-span-2">no matching workflows</span>
           ) : (
             sections.map((section) => (
               <div key={section.label} className="flex min-w-0 flex-col gap-0.5">
-                <span className="px-2 py-1 text-[8px] font-bold uppercase tracking-[0.14em] text-doom-faint">
+                <span className="px-2 py-1 text-2xs font-bold uppercase tracking-wider text-doom-faint">
                   {section.label} · {section.runs.length}
                 </span>
                 {section.runs.map((run) => {
@@ -204,12 +202,12 @@ function WorkflowPicker({
                     >
                       <span className="flex min-w-0 items-center gap-2">
                         <Dot tone={runDot(run)} pulse={run.stage === 'running'} />
-                        <span className={cn('min-w-0 flex-1 truncate text-[10px]', active && 'font-bold text-doom-hi')}>
+                        <span className={cn('min-w-0 flex-1 truncate text-xs', active && 'font-bold text-doom-hi')}>
                           {run.displayName}
                         </span>
-                        <span className="shrink-0 text-[8px] text-doom-faint">{runState(run)}</span>
+                        <span className="shrink-0 text-2xs text-doom-faint">{runState(run)}</span>
                       </span>
-                      <span className="truncate pl-3.5 text-[8px] text-doom-dim">
+                      <span className="truncate pl-3.5 text-2xs text-doom-dim">
                         {[run.position?.job, run.position?.step].filter(Boolean).join(' · ') || 'settled'}
                       </span>
                     </button>
@@ -244,10 +242,10 @@ function SelectedAttention({ run }: { run: WorkflowRunView }) {
       <StatusBadge size="xs" tone={attention.kind === 'error' ? 'error' : 'running'}>
         {attention.kind === 'error' ? 'ERROR' : 'PAUSED'}
       </StatusBadge>
-      <span data-testid={`needs-card-${run.runKey}`} className="min-w-0 flex-1 truncate text-[10px] text-doom-text">
+      <span data-testid={`needs-card-${run.runKey}`} className="min-w-0 flex-1 truncate text-xs text-doom-text">
         {run.displayName}: {attention.text}
       </span>
-      <span className="shrink-0 text-[9px] text-doom-faint">
+      <span className="shrink-0 text-2xs text-doom-faint">
         {attention.kind === 'error' ? 'recover from the owning session' : 'resume from the owning session'}
       </span>
     </div>
@@ -275,11 +273,11 @@ function JobRow({
       onClick={onSelect}
       className={cn('gap-2 rounded px-2 py-1.5', !selected && 'hover:bg-doom-deep')}
     >
-      <span className={`w-3 shrink-0 text-[10px] ${icon.className}`}>{icon.glyph}</span>
-      <OptionLabel density="compact" className={cn('text-[10px]', selected ? 'text-doom-hi' : 'text-doom-text')}>
+      <span className={`w-3 shrink-0 text-xs ${icon.className}`}>{icon.glyph}</span>
+      <OptionLabel density="compact" className={cn('text-xs', selected ? 'text-doom-hi' : 'text-doom-text')}>
         {job.name}
       </OptionLabel>
-      <span className="shrink-0 text-[8px] text-doom-faint">{spanDuration(job.startedAt, job.endedAt, now) ?? ''}</span>
+      <span className="shrink-0 text-2xs text-doom-faint">{spanDuration(job.startedAt, job.endedAt, now) ?? ''}</span>
     </OptionRow>
   );
 }
@@ -309,23 +307,21 @@ function StepRow({
       )}
     >
       <span className="flex items-center gap-2">
-        <span className={`w-3 shrink-0 text-[10px] ${icon.className}`}>{icon.glyph}</span>
+        <span className={`w-3 shrink-0 text-xs ${icon.className}`}>{icon.glyph}</span>
         <span
           className={cn(
-            'min-w-0 flex-1 truncate text-[9px]',
+            'min-w-0 flex-1 truncate text-2xs',
             step.status === 'failed' ? 'text-doom-red' : 'text-doom-text',
           )}
         >
           {step.name}
         </span>
-        <span className="shrink-0 text-[8px] text-doom-faint">
+        <span className="shrink-0 text-2xs text-doom-faint">
           {spanDuration(step.startedAt, step.endedAt, now) ?? ''}
         </span>
       </span>
       {step.reason === undefined ? null : (
-        <span
-          className={cn('truncate pl-5 text-[8px]', step.status === 'failed' ? 'text-doom-red' : 'text-doom-faint')}
-        >
+        <span className={cn('truncate pl-5 text-2xs', step.status === 'failed' ? 'text-doom-red' : 'text-doom-faint')}>
           {step.reason}
         </span>
       )}
@@ -385,12 +381,12 @@ function InlineStepOutput({
     <div data-testid="workflow-inline-output" className="flex min-h-0 flex-1 flex-col bg-doom-deep">
       <div className="flex h-9 shrink-0 items-center gap-2 border-b border-doom-border-soft px-3">
         <Dot tone={ended ? 'neutral' : 'blue'} pulse={!ended && run.stage === 'running'} />
-        <span className={cn('text-[9px] font-bold', ended ? 'text-doom-faint' : 'text-doom-blue')}>
+        <span className={cn('text-2xs font-bold', ended ? 'text-doom-faint' : 'text-doom-blue')}>
           {ended ? 'FINAL OUTPUT' : 'LIVE OUTPUT'}
         </span>
-        <span className="min-w-0 truncate text-[10px] font-bold text-doom-hi">{step?.name ?? job.name}</span>
+        <span className="min-w-0 truncate text-xs font-bold text-doom-hi">{step?.name ?? job.name}</span>
         <span className="min-w-0 flex-1" />
-        <span className="text-[8px] text-doom-faint">{ended ? 'settled' : 'following · 500ms'}</span>
+        <span className="text-2xs text-doom-faint">{ended ? 'settled' : 'following · 500ms'}</span>
         <Button variant="outline" size="xs" data-testid="workflow-open-terminal" onClick={onOpenTerminal}>
           open terminal
         </Button>
@@ -398,10 +394,10 @@ function InlineStepOutput({
       <div
         ref={screenRef}
         data-testid="workflow-inline-screen"
-        className="min-h-0 flex-1 overflow-y-auto px-4 py-3 font-mono text-[11px] leading-[15px] text-doom-text"
+        className="min-h-0 flex-1 overflow-y-auto px-4 py-3 font-mono text-sm leading-tight text-doom-text"
       >
         {lines.length === 0 ? (
-          <span className="text-[10px] text-doom-faint">
+          <span className="text-xs text-doom-faint">
             {capabilities?.readable === false
               ? (capabilities.reason ?? 'This run has no terminal to read.')
               : 'waiting for the run to paint…'}
@@ -411,7 +407,7 @@ function InlineStepOutput({
         )}
         {!ended && run.stage === 'running' ? <StreamCursor className="mt-0.5 h-[12px] w-1.5" /> : null}
       </div>
-      <div className="flex h-7 shrink-0 items-center gap-2 border-t border-doom-border-soft px-3 text-[8px] text-doom-faint">
+      <div className="flex h-7 shrink-0 items-center gap-2 border-t border-doom-border-soft px-3 text-2xs text-doom-faint">
         <span>output follows automatically · select another step to inspect its current screen</span>
         <span className="min-w-0 flex-1" />
         <span>last 48 lines</span>
@@ -459,11 +455,11 @@ function DeleteWorkflowDialog({
           <DialogTitle>Delete {run.displayName}?</DialogTitle>
         </DialogHeader>
         <DialogBody>
-          <p className="text-[11px] leading-relaxed text-doom-dim">
+          <p className="text-sm leading-relaxed text-doom-dim">
             This permanently removes the workflow run, including its logs and artifacts. This action cannot be undone.
           </p>
           {error === undefined ? null : (
-            <p data-testid="delete-workflow-error" className="text-[10px] text-doom-red">
+            <p data-testid="delete-workflow-error" className="text-xs text-doom-red">
               {error}
             </p>
           )}
@@ -569,13 +565,13 @@ export function WorkflowsPanel({ sessionId, openTransientTab, sendSessionFrame }
               <StatusBadge tone={run.stage === 'error' ? 'error' : run.stage === 'running' ? 'info' : 'ok'}>
                 {runState(run)}
               </StatusBadge>
-              <span className="truncate text-[9px] text-doom-dim">
+              <span className="truncate text-2xs text-doom-dim">
                 {[run.position?.job, run.position?.step].filter(Boolean).join(' · ') ||
                   run.workflowName ||
                   run.displayName}
               </span>
               <span className="min-w-0 flex-1" />
-              <span data-testid="workflows-tally" className="text-[9px] text-doom-faint">
+              <span data-testid="workflows-tally" className="text-2xs text-doom-faint">
                 {runs.filter((candidate) => candidate.stage === 'running').length} running · {runs.length} total
               </span>
               {run.stage === 'running' ? null : (
@@ -606,9 +602,9 @@ export function WorkflowsPanel({ sessionId, openTransientTab, sendSessionFrame }
                 className="flex max-h-44 w-full shrink-0 flex-col overflow-y-auto rounded-md border border-doom-border bg-doom-panel p-1.5 sm:max-h-none sm:w-[214px]"
               >
                 <div className="flex items-center px-2 pb-1 pt-1">
-                  <span className="text-[8px] font-bold tracking-[0.14em] text-doom-faint">JOBS</span>
+                  <span className="text-2xs font-bold tracking-wider text-doom-faint">JOBS</span>
                   <span className="min-w-0 flex-1" />
-                  <span className="text-[8px] text-doom-faint">
+                  <span className="text-2xs text-doom-faint">
                     {jobs.filter((candidate) => candidate.status === 'completed').length}/{jobs.length}
                   </span>
                 </div>
@@ -635,11 +631,11 @@ export function WorkflowsPanel({ sessionId, openTransientTab, sendSessionFrame }
                     <div className="flex items-center px-2 pb-1">
                       <span
                         data-testid="job-pane-name"
-                        className="min-w-0 flex-1 truncate text-[9px] font-bold text-doom-hi"
+                        className="min-w-0 flex-1 truncate text-2xs font-bold text-doom-hi"
                       >
                         {job.name}
                       </span>
-                      <span className="text-[8px] text-doom-faint">
+                      <span className="text-2xs text-doom-faint">
                         {spanDuration(job.startedAt, job.endedAt, now) ?? ''}
                       </span>
                     </div>
@@ -662,7 +658,7 @@ export function WorkflowsPanel({ sessionId, openTransientTab, sendSessionFrame }
               </div>
               <DetailPane>
                 <div className="flex h-9 shrink-0 items-center gap-2 border-b border-doom-border-soft bg-doom-panel px-3">
-                  <span className="min-w-0 truncate text-[10px] font-bold text-doom-hi">
+                  <span className="min-w-0 truncate text-xs font-bold text-doom-hi">
                     {job?.name ?? run.displayName}
                   </span>
                   {job === undefined ? null : (