@agimon-ai/doompi-runner 0.0.1-alpha.67 → 0.0.1-alpha.69

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agimon-ai/doompi-runner",
-  "version": "0.0.1-alpha.67",
+  "version": "0.0.1-alpha.69",
   "description": "Supervised shell execution, background process control, and run logs for Pi coding agents.",
   "keywords": [
     "ai",
@@ -39,7 +39,8 @@
     "src/types/webRunnerLog.ts",
     "README.md",
     "LICENSE",
-    "package.json"
+    "package.json",
+    "!src/web/**/*.stories.tsx"
   ],
   "type": "module",
   "main": "./dist/index.cjs",
@@ -324,12 +325,12 @@
     "@xterm/headless": "6.0.0",
     "hono": "4.13.5",
     "typebox": "1.3.25",
-    "@agimon-ai/doompi-extension-contracts": "0.0.1-alpha.66",
-    "@agimon-ai/doompi-telemetry": "0.0.1-alpha.65",
-    "@agimon-ai/doompi-ui": "0.0.1-alpha.67",
-    "@agimon-ai/doompi-web-components": "0.0.1-alpha.26",
-    "@agimon-ai/doompi-web-contracts": "0.0.1-alpha.29",
-    "@agimon-ai/doompi-web-security": "0.0.1-alpha.28"
+    "@agimon-ai/doompi-ui": "0.0.1-alpha.69",
+    "@agimon-ai/doompi-extension-contracts": "0.0.1-alpha.68",
+    "@agimon-ai/doompi-telemetry": "0.0.1-alpha.67",
+    "@agimon-ai/doompi-web-components": "0.0.1-alpha.28",
+    "@agimon-ai/doompi-web-contracts": "0.0.1-alpha.31",
+    "@agimon-ai/doompi-web-security": "0.0.1-alpha.30"
   },
   "devDependencies": {
     "@earendil-works/pi-coding-agent": "0.85.1",
@@ -340,6 +341,7 @@
     "@types/react": "19.2.18",
     "@vitest/coverage-v8": "5.0.0",
     "react": "19.2.8",
+    "react-dom": "19.2.8",
     "tsdown": "0.23.0",
     "typescript": "7.0.2",
     "vitest": "5.0.0"
@@ -357,14 +359,14 @@
     }
   },
   "optionalDependencies": {
-    "@agimon-ai/doompi-runner-rmux-darwin-arm64": "0.0.1-alpha.63",
-    "@agimon-ai/doompi-runner-rmux-linux-arm64": "0.0.1-alpha.63",
-    "@agimon-ai/doompi-runner-rmux-linux-x64": "0.0.1-alpha.63",
-    "@agimon-ai/doompi-runner-rtk-darwin-arm64": "0.0.1-alpha.63",
-    "@agimon-ai/doompi-runner-rtk-darwin-x64": "0.0.1-alpha.63",
-    "@agimon-ai/doompi-runner-rtk-linux-arm64": "0.0.1-alpha.63",
-    "@agimon-ai/doompi-runner-rtk-linux-x64": "0.0.1-alpha.63",
-    "@agimon-ai/doompi-runner-rmux-darwin-x64": "0.0.1-alpha.63"
+    "@agimon-ai/doompi-runner-rmux-darwin-x64": "0.0.1-alpha.65",
+    "@agimon-ai/doompi-runner-rmux-linux-arm64": "0.0.1-alpha.65",
+    "@agimon-ai/doompi-runner-rmux-darwin-arm64": "0.0.1-alpha.65",
+    "@agimon-ai/doompi-runner-rtk-darwin-arm64": "0.0.1-alpha.65",
+    "@agimon-ai/doompi-runner-rmux-linux-x64": "0.0.1-alpha.65",
+    "@agimon-ai/doompi-runner-rtk-linux-x64": "0.0.1-alpha.65",
+    "@agimon-ai/doompi-runner-rtk-linux-arm64": "0.0.1-alpha.65",
+    "@agimon-ai/doompi-runner-rtk-darwin-x64": "0.0.1-alpha.65"
   },
   "engines": {
     "node": ">=22.19.0"

package/src/web/components/BashToolMessage.tsx

@@ -101,7 +101,7 @@ export function BashToolMessage({
                     event.stopPropagation();
                     openTransientTab(runnerLogTab(run));
                   }}
-                  className="shrink-0 gap-1 px-1.5 text-[9px] font-bold"
+                  className="shrink-0 gap-1 px-1.5 text-2xs font-bold"
                 >
                   <FileIcon className="h-2.5 w-2.5" />
                   log
@@ -122,7 +122,7 @@ export function BashToolMessage({
                     if (sessionId !== null && runnerId !== undefined)
                       requestRunnerStop(sendSessionFrame, sessionId, runnerId);
                   }}
-                  className="shrink-0 px-1.5 text-[9px] font-bold"
+                  className="shrink-0 px-1.5 text-2xs font-bold"
                 >
                   {stopping ? 'stopping…' : 'stop'}
                 </Button>

package/src/web/components/LaunchRunnerDialog.tsx

@@ -19,7 +19,7 @@ const COMMAND_ROWS = 3;
 const INTERACTIVE_FIELD_ID = 'runner-launch-interactive-field';
 
 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>;
 }
 
 /**
@@ -77,7 +77,7 @@ export function LaunchRunnerDialog({
               value={command}
               placeholder="pnpm test"
               onChange={(event) => setCommand(event.target.value)}
-              className="text-[11px]"
+              className="text-sm"
             />
           </div>
 
@@ -90,7 +90,7 @@ export function LaunchRunnerDialog({
                 value={cwd}
                 placeholder="the session's own directory"
                 onChange={(event) => setCwd(event.target.value)}
-                className="text-[10px]"
+                className="text-xs"
               />
             </div>
             <div className="flex min-w-0 flex-1 flex-col gap-1">
@@ -101,7 +101,7 @@ export function LaunchRunnerDialog({
                 value={name}
                 placeholder="chosen for you when empty"
                 onChange={(event) => setName(event.target.value)}
-                className="text-[10px]"
+                className="text-xs"
               />
             </div>
           </div>
@@ -115,29 +115,26 @@ export function LaunchRunnerDialog({
               checked={interactive}
               onCheckedChange={(checked) => setInteractive(checked === true)}
             />
-            <label htmlFor={INTERACTIVE_FIELD_ID} className="text-[10px] text-doom-dim">
+            <label htmlFor={INTERACTIVE_FIELD_ID} className="text-xs text-doom-dim">
               needs a terminal, for a command that prompts (requires rmux or tmux)
             </label>
           </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="runner-launch-line"
-              className="whitespace-pre-wrap break-words text-[10px] text-doom-green"
-            >
+            <pre data-testid="runner-launch-line" className="whitespace-pre-wrap break-words text-xs text-doom-green">
               {line}
             </pre>
           </div>
 
           {problems.length > 0 ? (
-            <p data-testid="runner-launch-problem" className="text-[10px] text-doom-red">
+            <p data-testid="runner-launch-problem" className="text-xs text-doom-red">
               {problems.join(' ')}
             </p>
           ) : null}
 
           <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">
               it appears above once the runtime starts it
             </span>
             <span className="min-w-0 flex-1" />

package/src/web/components/RunnerLogPanel.tsx

@@ -56,8 +56,8 @@ function isMatch(line: string, needle: string, ignoreCase: boolean): boolean {
 function MetaRow({ label, value }: { label: string; value: string }) {
   return (
     <span className="flex min-w-0 gap-2.5">
-      <span className="w-14 shrink-0 text-[10px] text-doom-faint">{label}</span>
-      <span className="min-w-0 flex-1 break-all text-[10px] text-doom-dim">{value}</span>
+      <span className="w-14 shrink-0 text-xs text-doom-faint">{label}</span>
+      <span className="min-w-0 flex-1 break-all text-xs text-doom-dim">{value}</span>
     </span>
   );
 }
@@ -74,17 +74,17 @@ function LogRow({ number, line, matched }: { number: number | undefined; line: s
   return (
     <div data-testid="runner-log-row" data-matched={matched} className="flex min-w-0 gap-2">
       {number === undefined ? null : (
-        <span className="w-12 shrink-0 select-none text-right text-[10px] leading-[1.6] text-doom-faint">{number}</span>
+        <span className="w-12 shrink-0 select-none text-right text-xs leading-relaxed text-doom-faint">{number}</span>
       )}
       <span
         aria-hidden
-        className={`w-4 shrink-0 select-none text-[10px] leading-[1.6] ${matched ? 'text-doom-yellow' : 'text-doom-faint'}`}
+        className={`w-4 shrink-0 select-none text-xs leading-relaxed ${matched ? 'text-doom-yellow' : 'text-doom-faint'}`}
       >
         {matched ? '>>' : ''}
       </span>
       <AnsiLine
         line={line}
-        className={`min-w-0 flex-1 whitespace-pre-wrap break-words font-mono text-[10px] leading-[1.6] ${
+        className={`min-w-0 flex-1 whitespace-pre-wrap break-words font-mono text-xs leading-relaxed ${
           matched ? 'text-doom-text' : 'text-doom-dim'
         }`}
       />
@@ -207,7 +207,7 @@ export function RunnerLogPanel({ sessionId, runId, sendSessionFrame }: WebPlugin
   return (
     <div data-testid="runner-log-panel" className="flex min-h-0 flex-1 flex-col">
       <div className="flex min-h-11 shrink-0 flex-wrap items-center gap-2 border-b border-doom-border-soft px-3 py-2 sm:h-11 sm:flex-nowrap sm:gap-2.5 sm:px-[26px] sm:py-0">
-        <span data-testid="runner-log-name" className="shrink-0 truncate text-[12px] font-bold text-doom-hi">
+        <span data-testid="runner-log-name" className="shrink-0 truncate text-sm font-bold text-doom-hi">
           {run?.name ?? runId}
         </span>
         <StatusBadge tone={badge.tone} data-testid="runner-log-state">
@@ -215,13 +215,13 @@ export function RunnerLogPanel({ sessionId, runId, sendSessionFrame }: WebPlugin
         </StatusBadge>
         {run ? (
           <>
-            <span className="shrink-0 text-[10px] text-doom-faint">{elapsed}</span>
-            <span className="shrink-0 text-[10px] text-doom-faint">
+            <span className="shrink-0 text-xs text-doom-faint">{elapsed}</span>
+            <span className="shrink-0 text-xs text-doom-faint">
               {`pid ${String(run.pid)} · ${run.backend}${run.interactive ? ' · tty' : ''}`}
             </span>
           </>
         ) : (
-          <span data-testid="runner-log-gone" className="text-[10px] text-doom-faint">
+          <span data-testid="runner-log-gone" className="text-xs text-doom-faint">
             no longer listed; its log stays readable
           </span>
         )}
@@ -234,7 +234,7 @@ export function RunnerLogPanel({ sessionId, runId, sendSessionFrame }: WebPlugin
             disabled={stopping}
             title={stopping ? 'stop requested; the runner reports its own exit' : 'ask the runtime to stop this runner'}
             onClick={() => requestRunnerStop(sendSessionFrame, sessionId, run.id)}
-            className="px-2 text-[9px] font-bold"
+            className="px-2 text-2xs font-bold"
           >
             {stopping ? 'stopping…' : 'stop'}
           </Button>
@@ -257,7 +257,7 @@ export function RunnerLogPanel({ sessionId, runId, sendSessionFrame }: WebPlugin
             value={typed}
             placeholder="search this log"
             onChange={(event) => setTyped(event.target.value)}
-            className="pl-7 text-[10px]"
+            className="pl-7 text-xs"
           />
         </span>
         <Button
@@ -267,7 +267,7 @@ export function RunnerLogPanel({ sessionId, runId, sendSessionFrame }: WebPlugin
           aria-pressed={ignoreCase}
           title="match regardless of case"
           onClick={() => setIgnoreCase((current) => !current)}
-          className="px-2 text-[9px] font-bold"
+          className="px-2 text-2xs font-bold"
         >
           aA
         </Button>
@@ -278,14 +278,14 @@ export function RunnerLogPanel({ sessionId, runId, sendSessionFrame }: WebPlugin
           disabled={!filtering}
           title="lines of context kept either side of a match"
           onClick={() => setContext((current) => (current === 0 ? CONTEXT_LINES : 0))}
-          className="px-2 text-[9px] font-bold"
+          className="px-2 text-2xs font-bold"
         >
           {`± ${String(context)} lines`}
         </Button>
         <span className="min-w-0 flex-1" />
         <span
           data-testid="runner-log-stats"
-          className="min-w-0 basis-full truncate text-[10px] text-doom-faint sm:basis-auto"
+          className="min-w-0 basis-full truncate text-xs text-doom-faint sm:basis-auto"
         >
           {slice === undefined
             ? 'reading…'
@@ -302,7 +302,7 @@ export function RunnerLogPanel({ sessionId, runId, sendSessionFrame }: WebPlugin
           disabled={filtering || slice?.running !== true}
           title={filtering ? 'a filtered view is a snapshot; clear the query to follow' : 'follow the log as it grows'}
           onClick={() => setFollowing((current) => !current)}
-          className="px-2 text-[9px] font-bold"
+          className="px-2 text-2xs font-bold"
         >
           {filtering ? 'follow · paused' : 'follow'}
         </Button>
@@ -316,17 +316,17 @@ export function RunnerLogPanel({ sessionId, runId, sendSessionFrame }: WebPlugin
           className="h-full overflow-auto bg-doom-panel-deep px-3 py-3 sm:px-[26px]"
         >
           {error !== undefined ? (
-            <p data-testid="runner-log-error" className="text-[10px] text-doom-red">
+            <p data-testid="runner-log-error" className="text-xs text-doom-red">
               {error}
             </p>
           ) : slice === undefined ? (
-            <p data-testid="runner-log-reading" className="text-[10px] text-doom-faint">
+            <p data-testid="runner-log-reading" className="text-xs text-doom-faint">
               reading…
             </p>
           ) : slice.exists === false ? (
-            <p className="text-[10px] text-doom-faint">this runner has not written a log yet</p>
+            <p className="text-xs text-doom-faint">this runner has not written a log yet</p>
           ) : view.lines.length === 0 ? (
-            <p className="text-[10px] text-doom-faint">{filtering ? 'nothing matched' : 'the log is empty'}</p>
+            <p className="text-xs text-doom-faint">{filtering ? 'nothing matched' : 'the log is empty'}</p>
           ) : (
             view.lines.map((line, index) => {
               const number = numbers[index];
@@ -338,7 +338,7 @@ export function RunnerLogPanel({ sessionId, runId, sendSessionFrame }: WebPlugin
                     <div
                       data-testid="runner-log-gap"
                       aria-hidden
-                      className="select-none py-0.5 pl-12 text-[10px] leading-[1.6] text-doom-faint"
+                      className="select-none py-0.5 pl-12 text-xs leading-relaxed text-doom-faint"
                     >
                       ⋯
                     </div>
@@ -360,7 +360,7 @@ export function RunnerLogPanel({ sessionId, runId, sendSessionFrame }: WebPlugin
               setPinned(true);
               bottom.current?.scrollIntoView({ block: 'end' });
             }}
-            className="absolute bottom-3 right-3 px-2 text-[9px] font-bold"
+            className="absolute bottom-3 right-3 px-2 text-2xs font-bold"
           >
             jump to latest
           </Button>
@@ -368,11 +368,11 @@ export function RunnerLogPanel({ sessionId, runId, sendSessionFrame }: WebPlugin
       </div>
 
       <div className="flex h-8 shrink-0 items-center gap-2.5 border-t border-doom-border-soft px-3 sm:px-[26px]">
-        <span data-testid="runner-log-path" className="min-w-0 flex-1 truncate text-[9px] text-doom-faint">
+        <span data-testid="runner-log-path" className="min-w-0 flex-1 truncate text-2xs text-doom-faint">
           {run?.logPath ?? slice?.path ?? ''}
         </span>
         {slice !== undefined ? (
-          <span className="shrink-0 text-[9px] text-doom-faint">{formatSize(slice.fileSize)}</span>
+          <span className="shrink-0 text-2xs text-doom-faint">{formatSize(slice.fileSize)}</span>
         ) : null}
       </div>
     </div>

package/src/web/components/RunnerShellPanel.tsx

@@ -80,7 +80,7 @@ export function RunnerShellPanel({ sessionId, runId }: WebPluginSlotProps & { ru
   return (
     <div data-testid="runner-shell-panel" className="flex min-h-0 flex-1 flex-col">
       <div className="flex min-h-11 shrink-0 items-center gap-2.5 border-b border-doom-border-soft px-3 sm:h-11 sm:px-[26px]">
-        <span data-testid="runner-shell-name" className="shrink-0 truncate text-[12px] font-bold text-doom-hi">
+        <span data-testid="runner-shell-name" className="shrink-0 truncate text-sm font-bold text-doom-hi">
           {run?.name ?? runId}
         </span>
         <StatusBadge tone={live ? 'running' : 'neutral'} data-testid="runner-shell-state">
@@ -88,7 +88,7 @@ export function RunnerShellPanel({ sessionId, runId }: WebPluginSlotProps & { ru
         </StatusBadge>
         <span className="min-w-0 flex-1" />
         {lost ? (
-          <span data-testid="runner-shell-lost" className="shrink-0 text-[9px] text-doom-red">
+          <span data-testid="runner-shell-lost" className="shrink-0 text-2xs text-doom-red">
             the connection to this pane dropped
           </span>
         ) : null}
@@ -99,7 +99,7 @@ export function RunnerShellPanel({ sessionId, runId }: WebPluginSlotProps & { ru
             data-testid="runner-shell-interrupt"
             title="send ctrl-c"
             onClick={() => send('\u0003')}
-            className="px-2 text-[9px] font-bold"
+            className="px-2 text-2xs font-bold"
           >
             ctrl-c
           </Button>
@@ -114,14 +114,14 @@ export function RunnerShellPanel({ sessionId, runId }: WebPluginSlotProps & { ru
           onReady={() => setReady(true)}
         />
         {ready ? null : (
-          <p data-testid="runner-shell-reading" className="text-[10px] text-doom-faint">
+          <p data-testid="runner-shell-reading" className="text-xs text-doom-faint">
             attaching…
           </p>
         )}
       </div>
 
       <div className="flex h-8 shrink-0 items-center border-t border-doom-border-soft px-3 sm:px-[26px]">
-        <span className="min-w-0 flex-1 truncate text-[9px] text-doom-faint">
+        <span className="min-w-0 flex-1 truncate text-2xs text-doom-faint">
           {live ? 'typing goes straight to the runner' : 'this runner is no longer accepting input'}
         </span>
       </div>

package/src/web/components/RunnersActivitySection.tsx

@@ -34,7 +34,7 @@ export function RunnersActivitySection({ sessionId, sendSessionFrame, openTransi
   if (running.length === 0) {
     return (
       <div className="flex items-center gap-2 px-1">
-        <p data-testid="activity-summary-runners" className="px-1 text-[10px] text-doom-faint">
+        <p data-testid="activity-summary-runners" className="px-1 text-xs text-doom-faint">
           idle
         </p>
         {sessionId === null ? null : (
@@ -98,12 +98,12 @@ function RunnerRow({
         if (sessionId === null) return;
         openTransientTab(runnerLogTab(run));
       }}
-      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="yellow" pulse />
-        <span className="min-w-0 flex-1 truncate text-left text-[10px] font-bold text-doom-hi">{run.name}</span>
-        <span className="shrink-0 text-[9px] text-doom-faint">
+        <span className="min-w-0 flex-1 truncate text-left text-xs font-bold text-doom-hi">{run.name}</span>
+        <span className="shrink-0 text-2xs text-doom-faint">
           {formatRunnerUptime(run.startedAt, now)}
           {run.interactive ? ' · tty' : ''}
         </span>
@@ -117,7 +117,7 @@ function RunnerRow({
             title={
               stopRequested ? 'stop requested; the runner reports its own exit' : 'ask the runtime to stop this runner'
             }
-            className="px-1.5 text-[8px] font-bold"
+            className="px-1.5 text-2xs font-bold"
           >
             {/* The row is already a button, so the stop control lends it
                 the primitive's styling rather than nesting a second one. */}
@@ -146,7 +146,7 @@ function RunnerRow({
       <span
         data-testid={`activity-runner-detail-${run.id}`}
         data-detail={tail === undefined ? 'command' : 'tail'}
-        className="truncate pl-3 text-left text-[9px] text-doom-faint"
+        className="truncate pl-3 text-left text-2xs text-doom-faint"
       >
         {tail ?? run.command}
       </span>

package/src/web/components/RunnersPanel.tsx

@@ -80,8 +80,8 @@ export function RunnersPanel({ sessionId, sendSessionFrame, openTransientTab }:
   return (
     <div data-testid="runners-panel" className="flex min-h-0 flex-1 flex-col overflow-auto">
       <div className="flex min-h-11 shrink-0 items-center gap-2.5 border-b border-doom-border-soft px-3 sm:h-11 sm:px-[26px]">
-        <span className="text-[12px] font-bold text-doom-hi">runners</span>
-        <span data-testid="runners-panel-count" className="text-[10px] text-doom-faint">
+        <span className="text-sm font-bold text-doom-hi">runners</span>
+        <span data-testid="runners-panel-count" className="text-xs text-doom-faint">
           {running.length === 0 ? 'nothing running' : `${String(running.length)} running`}
         </span>
         <span className="min-w-0 flex-1" />
@@ -124,7 +124,7 @@ export function RunnersPanel({ sessionId, sendSessionFrame, openTransientTab }:
               size="xs"
               data-testid="runners-panel-launch-empty"
               onClick={() => setLaunching(true)}
-              className="px-2 text-[9px] font-bold"
+              className="px-2 text-2xs font-bold"
             >
               launch a runner
             </Button>
@@ -181,26 +181,26 @@ function RunnerCard({
   return (
     <div
       data-testid={`runners-card-${run.id}`}
-      className="flex min-w-0 flex-col gap-1.5 rounded-[5px] border border-doom-border-soft bg-doom-panel p-2.5"
+      className="flex min-w-0 flex-col gap-1.5 rounded-md border border-doom-border-soft bg-doom-panel p-2.5"
     >
       <div className="flex min-w-0 items-center gap-1.5">
         <Dot tone="yellow" pulse />
-        <span className="min-w-0 flex-1 truncate text-[11px] font-bold text-doom-hi">{run.name}</span>
-        <span className="shrink-0 text-[9px] text-doom-faint">
+        <span className="min-w-0 flex-1 truncate text-sm font-bold text-doom-hi">{run.name}</span>
+        <span className="shrink-0 text-2xs text-doom-faint">
           {formatRunnerUptime(run.startedAt, now)}
           {run.interactive ? ' · tty' : ''}
         </span>
       </div>
 
-      <span className="min-w-0 break-all text-[9px] leading-[1.5] text-doom-dim">{run.command}</span>
-      <span className="min-w-0 truncate text-[9px] text-doom-faint">{run.cwd}</span>
+      <span className="min-w-0 break-all text-2xs leading-normal text-doom-dim">{run.command}</span>
+      <span className="min-w-0 truncate text-2xs text-doom-faint">{run.cwd}</span>
 
       {/* What it is doing, falling back to what it was asked to do until the
           first line of output arrives. */}
       <span
         data-testid={`runners-card-detail-${run.id}`}
         data-detail={tail === undefined ? 'command' : 'tail'}
-        className="min-w-0 truncate text-[9px] text-doom-faint"
+        className="min-w-0 truncate text-2xs text-doom-faint"
       >
         {tail ?? '…'}
       </span>
@@ -212,7 +212,7 @@ function RunnerCard({
           data-testid={`runners-card-log-${run.id}`}
           title="open this runner's log"
           onClick={() => openTransientTab(runnerLogTab(run))}
-          className="px-2 text-[9px] font-bold"
+          className="px-2 text-2xs font-bold"
         >
           log
         </Button>
@@ -225,7 +225,7 @@ function RunnerCard({
             data-testid={`runners-card-shell-${run.id}`}
             title="attach to this runner's terminal"
             onClick={() => openTransientTab(runnerShellTab(run))}
-            className="px-2 text-[9px] font-bold"
+            className="px-2 text-2xs font-bold"
           >
             shell
           </Button>
@@ -241,7 +241,7 @@ function RunnerCard({
               stopRequested ? 'stop requested; the runner reports its own exit' : 'ask the runtime to stop this runner'
             }
             onClick={() => requestRunnerStop(sendSessionFrame, sessionId, run.id)}
-            className="px-2 text-[9px] font-bold"
+            className="px-2 text-2xs font-bold"
           >
             {stopRequested ? 'stopping…' : 'stop'}
           </Button>