@agimon-ai/po-runner 0.0.0-alpha.21 → 0.0.0-alpha.23

package/dist/extensions/native.mjs

@@ -1,9 +1,10 @@
 import { createApiClient, defineActivityGroup, defineChannelFile, defineFill, defineNativePlugin, defineSessionStore, nativeApiTransport, sessionApiAddress } from "@agimon-ai/po-core/native";
+import { ArrowRightIcon, Button, Dot, FolderIcon, Input, ListRow, PlayCircleIcon, SearchIcon, Sheet, SheetBody, SheetContent, SheetFooter, SheetHeader, SheetTitle, StatusBadge, fontOf } from "@agimon-ai/po-native-components";
+import { createElement, useCallback, useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
 import { View } from "react-native-unistyles/components/native/View";
 import { Text } from "react-native-unistyles/components/native/Text";
 import { ScrollView } from "react-native-unistyles/components/native/ScrollView";
-import { Button, Dot, Input, Label, ListRow, Sheet, SheetBody, SheetContent, SheetHeader, SheetTitle, Textarea, fontOf } from "@agimon-ai/po-native-components";
-import { useCallback, useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
+import { Pressable } from "react-native-unistyles/components/native/Pressable";
 import { StyleSheet } from "react-native-unistyles";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/extensions/workspaces/sessions/(frontend)/_lib/format.ts
@@ -51,10 +52,55 @@ function tailLineNumbers(lastLineNumber, count) {
 	const first = Math.max(1, lastLineNumber - count + 1);
 	return Array.from({ length: count }, (_, index) => first + index);
 }
+/**
+* A folder as the command bar names it: the session directory by its last
+* segment, a folder inside it relative to it, anything else as written.
+*/
+function runnerFolderLabel(folder, sessionDirectory) {
+	if (folder === "" || folder === sessionDirectory) return sessionDirectory === void 0 ? "session directory" : sessionDirectory.split("/").pop() ?? sessionDirectory;
+	if (sessionDirectory !== void 0 && folder.startsWith(`${sessionDirectory}/`)) return folder.slice(sessionDirectory.length + 1);
+	return folder;
+}
+/** The folders the picker offers past the session directory: those in use, then the one in effect. */
+function runnerFolders(inUse, current, sessionDirectory) {
+	const folders = /* @__PURE__ */ new Set([...inUse, current]);
+	folders.delete("");
+	if (sessionDirectory !== void 0) folders.delete(sessionDirectory);
+	return [...folders];
+}
+/**
+* Undoes iOS smart punctuation, which React Native cannot switch off: a shell
+* reads ‘hi’ as literal quotes and a long dash before port as no flag at all.
+*/
+function plainPunctuation(text) {
+	return text.replace(/[‘’]/g, "'").replace(/[“”]/g, "\"").replace(/\u2014/g, "--");
+}
+/** The badge a run wears: its state while running, then how it ended. */
+function runnerBadge(run) {
+	if (run === void 0) return {
+		tone: "neutral",
+		label: "gone"
+	};
+	if (run.state === "running") return {
+		tone: "running",
+		label: "running"
+	};
+	if (run.exit === void 0 || run.exit.reason === "stopped") return {
+		tone: "neutral",
+		label: "stopped"
+	};
+	return run.exit.reason === "completed" && (run.exit.code === 0 || run.exit.code === null) ? {
+		tone: "ok",
+		label: "done"
+	} : {
+		tone: "error",
+		label: run.exit.reason.replace("_", " ")
+	};
+}
 //#endregion
 //#region src/extensions/workspaces/sessions/(frontend)/_lib/launchLine.ts
 /**
-* The `/runners start` line the launch form sends.
+* The `/runners start` line the runners panel's command bar sends.
 *
 * WHY THE BUILDER LIVES HERE AND THE PARSER DOES NOT:
 * Cockpit code is compiled into the host bundle and may import only this
@@ -70,6 +116,21 @@ const RUNNER_SHELL_REQUEST = {
 	name: "shell",
 	interactive: true
 };
+/**
+* What the runners panel's Run sends: the typed command on a terminal when
+* one is available, or a login shell when nothing was typed.
+*/
+function runnerRunRequest(command, cwd) {
+	const where = cwd.trim() === "" ? {} : { cwd };
+	return command.trim() === "" ? {
+		...RUNNER_SHELL_REQUEST,
+		...where
+	} : {
+		command,
+		...where,
+		preferInteractive: true
+	};
+}
 /** Quotes a value that carries whitespace, which is how a value survives tokenizing. */
 function quote(value) {
 	return /\s/u.test(value) ? `"${value}"` : value;
@@ -80,7 +141,7 @@ function runnerLaunchLine(request) {
 	const pairs = [
 		...name === "" ? [] : [`name=${quote(name)}`],
 		...cwd === "" ? [] : [`cwd=${quote(cwd)}`],
-		...request.interactive === true ? ["interactive=true"] : []
+		...request.interactive === true ? ["interactive=true"] : request.preferInteractive === true ? ["interactive=prefer"] : []
 	];
 	return [
 		RUNNERS_START_LINE,
@@ -89,12 +150,6 @@ function runnerLaunchLine(request) {
 		request.command.trim()
 	].join(" ");
 }
-/** What the form will not let a reader send, worded the way the session would answer. */
-function launchProblems(request) {
-	const problems = [];
-	if (request.command.trim() === "") problems.push("A runner needs a command to run.");
-	return problems;
-}
 //#endregion
 //#region src/constants/webRunners.ts
 const RUNNER_RUNS_TYPE = "runner_runs";
@@ -153,122 +208,142 @@ const runnerRunsChannel = runners.channel({
 	channel: RUNNER_RUNS_TYPE,
 	parse(input) {
 		if (!isRecord$1(input) || !Array.isArray(input.runs)) return null;
-		return { runs: input.runs.filter(isRecord$1) };
+		const failure = input.startFailure;
+		return {
+			runs: input.runs.filter(isRecord$1),
+			...typeof input.sessionDirectory === "string" ? { sessionDirectory: input.sessionDirectory } : {},
+			...isRecord$1(failure) && typeof failure.id === "string" && typeof failure.message === "string" ? { startFailure: {
+				id: failure.id,
+				message: failure.message
+			} } : {}
+		};
 	},
-	reduce(current, { runs }) {
-		const stillRunning = new Set(runs.filter((run) => run.state === "running").map((run) => run.id));
+	reduce(current, payload) {
+		const stillRunning = new Set(payload.runs.filter((run) => run.state === "running").map((run) => run.id));
 		return {
-			runs,
+			...payload,
 			stopRequested: current.stopRequested.filter((id) => stillRunning.has(id))
 		};
 	}
 });
 //#endregion
-//#region src/extensions/workspaces/sessions/(frontend)/_components/LaunchRunnerSheet.native.tsx
-function LaunchRunnerSheet({ sessionId, send, defaultCwd, onClose }) {
-	const [command, setCommand] = useState("");
-	const [cwd, setCwd] = useState(defaultCwd ?? "");
-	const [name, setName] = useState("");
-	const [interactive, setInteractive] = useState(false);
-	const request = {
-		command,
-		cwd,
-		name,
-		interactive
+//#region src/extensions/workspaces/sessions/(frontend)/_components/RunnerCommandBar.native.tsx
+/**
+* The phone's command bar: the command and Run on one line, the folder it runs
+* in on the row under it, chosen from a bottom sheet.
+*/
+function RunnerCommandBar({ command, onCommandChange, cwd, onCwdChange, sessionDirectory, folders, problem, onLaunch, defaultFolderOpen = false }) {
+	const [folderOpen, setFolderOpen] = useState(defaultFolderOpen);
+	const [path, setPath] = useState("");
+	const pick = (next) => {
+		onCwdChange(next);
+		setPath("");
+		setFolderOpen(false);
 	};
-	const problems = launchProblems(request);
-	return /* @__PURE__ */ jsx(Sheet, {
-		open: true,
-		onOpenChange: (open) => {
-			if (!open) onClose();
-		},
-		children: /* @__PURE__ */ jsxs(SheetContent, { children: [/* @__PURE__ */ jsx(SheetHeader, { children: /* @__PURE__ */ jsx(SheetTitle, { children: "Launch a runner" }) }), /* @__PURE__ */ jsx(SheetBody, { children: /* @__PURE__ */ jsxs(View, {
-			style: styles$3.form,
-			children: [
-				/* @__PURE__ */ jsx(Label, { children: "Command" }),
-				/* @__PURE__ */ jsx(Textarea, {
-					testID: "runner-launch-command",
-					value: command,
-					onChangeText: setCommand,
-					placeholder: "pnpm test"
-				}),
-				/* @__PURE__ */ jsx(Label, { children: "Cwd" }),
-				/* @__PURE__ */ jsx(Input, {
-					testID: "runner-launch-cwd",
-					value: cwd,
-					onChangeText: setCwd,
-					placeholder: "the session's own directory"
-				}),
-				/* @__PURE__ */ jsx(Label, { children: "Name" }),
-				/* @__PURE__ */ jsx(Input, {
-					testID: "runner-launch-name",
-					value: name,
-					onChangeText: setName,
-					placeholder: "chosen for you when empty"
-				}),
-				/* @__PURE__ */ jsx(Label, { children: "Needs a terminal, for a command that prompts (requires rmux or tmux)" }),
-				/* @__PURE__ */ jsx(Button, {
-					testID: "runner-launch-interactive",
-					variant: "outline",
-					accessibilityState: { checked: interactive },
-					onPress: () => setInteractive((value) => !value),
-					children: interactive ? "Terminal enabled" : "Terminal off"
-				}),
-				/* @__PURE__ */ jsx(Label, { children: "Sent to the session" }),
-				/* @__PURE__ */ jsx(Text, {
-					selectable: true,
-					testID: "runner-launch-line",
-					style: styles$3.line,
-					children: runnerLaunchLine(request)
-				}),
-				problems.length > 0 ? /* @__PURE__ */ jsx(Text, {
-					style: styles$3.error,
-					children: problems.join(" ")
-				}) : null,
-				/* @__PURE__ */ jsx(Button, {
-					variant: "outline",
-					onPress: onClose,
-					children: "Cancel"
-				}),
-				/* @__PURE__ */ jsx(Button, {
-					testID: "runner-launch-submit",
-					disabled: problems.length > 0,
-					onPress: () => {
-						if (problems.length > 0) return;
-						requestRunnerStart(send, sessionId, request);
-						onClose();
-					},
-					children: "Launch"
+	const choices = ["", ...runnerFolders(folders, cwd, sessionDirectory)];
+	return /* @__PURE__ */ jsxs(View, {
+		style: styles$3.bar,
+		children: [
+			/* @__PURE__ */ jsxs(View, {
+				style: styles$3.line,
+				children: [/* @__PURE__ */ jsx(View, {
+					style: styles$3.grow,
+					children: /* @__PURE__ */ jsx(Input, {
+						testID: "runners-panel-command",
+						accessibilityLabel: "Command to run",
+						size: "lg",
+						value: command,
+						onChangeText: (text) => onCommandChange(plainPunctuation(text)),
+						onSubmitEditing: onLaunch,
+						placeholder: "a command, like pnpm dev",
+						autoCapitalize: "none",
+						autoCorrect: false,
+						returnKeyType: "go"
+					})
+				}), /* @__PURE__ */ jsx(Button, {
+					testID: "runners-panel-run",
+					variant: "primary",
+					size: "lg",
+					onPress: onLaunch,
+					children: command.trim() === "" ? "Open shell" : "Run"
+				})]
+			}),
+			/* @__PURE__ */ jsx(ListRow, {
+				leading: /* @__PURE__ */ jsx(FolderIcon, {
+					size: 14,
+					color: problem === void 0 ? "faint" : "red"
 				}),
-				/* @__PURE__ */ jsx(Text, {
-					style: styles$3.meta,
-					children: "It appears above once the runtime starts it."
-				})
-			]
-		}) })] })
+				title: runnerFolderLabel(cwd, sessionDirectory),
+				description: "Runs in",
+				disclosure: true,
+				accessibilityLabel: `Runs in ${runnerFolderLabel(cwd, sessionDirectory)}`,
+				onPress: () => setFolderOpen(true)
+			}),
+			problem === void 0 ? /* @__PURE__ */ jsx(Text, {
+				style: styles$3.meta,
+				children: "Leave the command empty for a plain shell."
+			}) : /* @__PURE__ */ jsx(Text, {
+				accessibilityRole: "alert",
+				testID: "runners-panel-problem",
+				style: styles$3.problem,
+				children: problem
+			}),
+			/* @__PURE__ */ jsx(Sheet, {
+				open: folderOpen,
+				onOpenChange: setFolderOpen,
+				children: /* @__PURE__ */ jsxs(SheetContent, { children: [
+					/* @__PURE__ */ jsx(SheetHeader, {
+						closeLabel: "Close folders",
+						children: /* @__PURE__ */ jsx(SheetTitle, { children: "Runs in" })
+					}),
+					/* @__PURE__ */ jsxs(SheetBody, { children: [/* @__PURE__ */ jsx(View, { children: choices.map((folder) => /* @__PURE__ */ jsx(ListRow, {
+						title: folder === "" ? "Session directory" : runnerFolderLabel(folder, sessionDirectory),
+						description: folder === "" ? sessionDirectory ?? "Where this session started" : folder,
+						selected: folder === cwd,
+						onPress: () => pick(folder)
+					}, folder)) }), /* @__PURE__ */ jsx(Input, {
+						testID: "runners-panel-cwd-path",
+						accessibilityLabel: "Another folder",
+						value: path,
+						onChangeText: (text) => setPath(plainPunctuation(text)),
+						onSubmitEditing: () => {
+							if (path.trim() !== "") pick(path.trim());
+						},
+						placeholder: "another folder, like packages/web",
+						autoCapitalize: "none",
+						autoCorrect: false,
+						returnKeyType: "done"
+					})] }),
+					/* @__PURE__ */ jsx(SheetFooter, { children: "A relative folder starts from the session directory." })
+				] })
+			})
+		]
 	});
 }
 const styles$3 = StyleSheet.create((theme) => ({
-	form: {
-		gap: theme.spacing(2),
+	bar: {
+		gap: theme.spacing(1.5),
 		uni__dependencies: [0]
 	},
 	line: {
-		color: theme.colors.green,
-		fontFamily: fontOf(theme.fontFamily.mono),
-		fontSize: theme.fontSize.sm,
+		flexDirection: "row",
+		alignItems: "center",
+		gap: theme.spacing(2),
 		uni__dependencies: [0]
 	},
-	error: {
-		color: theme.colors.red,
+	grow: { flex: 1 },
+	meta: {
+		color: theme.colors.dim,
 		fontFamily: fontOf(theme.fontFamily.sans),
-		fontSize: theme.fontSize.base,
+		fontSize: theme.fontSize.sm,
+		lineHeight: theme.lineHeight.sm,
 		uni__dependencies: [0]
 	},
-	meta: {
-		color: theme.colors.dim,
+	problem: {
+		color: theme.colors.red,
 		fontFamily: fontOf(theme.fontFamily.sans),
 		fontSize: theme.fontSize.sm,
+		lineHeight: theme.lineHeight.sm,
 		uni__dependencies: [0]
 	}
 }));
@@ -437,6 +512,43 @@ function useRunnerTail(sessionId, runId, running) {
 }
 //#endregion
 //#region src/extensions/workspaces/sessions/(frontend)/_components/RunnerLogPanel.native.tsx
+/** The top of both runner screens: name, outcome, an action, and the command in its folder. */
+function RunnerRunHeader({ run, name, sessionDirectory, action }) {
+	const badge = runnerBadge(run);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(View, {
+		style: styles$2.header,
+		children: [
+			/* @__PURE__ */ jsx(Text, {
+				numberOfLines: 1,
+				style: styles$2.title,
+				children: name
+			}),
+			/* @__PURE__ */ jsx(StatusBadge, {
+				tone: badge.tone,
+				children: badge.label
+			}),
+			/* @__PURE__ */ jsx(View, { style: styles$2.grow }),
+			action
+		]
+	}), run ? /* @__PURE__ */ jsxs(View, {
+		style: styles$2.commandBox,
+		children: [/* @__PURE__ */ jsxs(Text, {
+			selectable: true,
+			style: styles$2.command,
+			children: [/* @__PURE__ */ jsx(Text, {
+				style: styles$2.prompt,
+				children: "$ "
+			}), run.command]
+		}), /* @__PURE__ */ jsxs(Text, {
+			numberOfLines: 1,
+			style: styles$2.folder,
+			children: ["in ", runnerFolderLabel(run.cwd, sessionDirectory)]
+		})]
+	}) : /* @__PURE__ */ jsx(Text, {
+		style: styles$2.meta,
+		children: "No longer listed; its log stays readable."
+	})] });
+}
 function runnerLogTab(run) {
 	return {
 		id: `runner-log-${run.id}`,
@@ -501,74 +613,66 @@ function RunnerLogPanel({ sessionId, runId, sendSessionFrame }) {
 	]);
 	const lines = logViewLines(slice?.text ?? "", [], 2e3).lines;
 	const numbers = query === "" ? tailLineNumbers(slice?.totalLines ?? 0, lines.length) : slice?.lineNumbers ?? [];
+	const gutter = String(numbers.at(-1) ?? 0).length;
 	const stopping = session.stopRequested.includes(runId);
+	const live = following && query === "" && slice?.running === true;
 	return /* @__PURE__ */ jsxs(View, {
 		testID: "runner-log-panel",
 		style: styles$2.panel,
 		children: [
-			/* @__PURE__ */ jsx(Text, {
-				style: styles$2.title,
-				children: run?.name ?? runId
-			}),
-			/* @__PURE__ */ jsx(Text, {
-				style: styles$2.meta,
-				children: run?.state ?? "no longer listed; its log stays readable"
+			/* @__PURE__ */ jsx(RunnerRunHeader, {
+				run,
+				name: run?.name ?? runId,
+				sessionDirectory: session.sessionDirectory,
+				action: run?.state === "running" && sessionId !== null ? /* @__PURE__ */ jsx(Button, {
+					variant: stopping ? "outline" : "danger-outline",
+					size: "sm",
+					disabled: stopping,
+					onPress: () => requestRunnerStop(sendSessionFrame, sessionId, runId),
+					children: stopping ? "Stopping…" : "Stop"
+				}) : null
 			}),
-			run ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Text, {
-				selectable: true,
-				style: styles$2.meta,
-				children: run.command
-			}), /* @__PURE__ */ jsx(Text, {
-				selectable: true,
-				style: styles$2.meta,
-				children: run.cwd
-			})] }) : null,
-			run?.state === "running" && sessionId !== null ? /* @__PURE__ */ jsx(Button, {
-				variant: "danger-outline",
-				disabled: stopping,
-				onPress: () => requestRunnerStop(sendSessionFrame, sessionId, runId),
-				children: stopping ? "Stopping…" : "Stop"
-			}) : null,
-			/* @__PURE__ */ jsx(Label, { children: "Search this log" }),
 			/* @__PURE__ */ jsx(Input, {
 				testID: "runner-log-search",
+				accessibilityLabel: "Search this log",
+				placeholder: "Search output",
 				value: typed,
-				onChangeText: setTyped
+				onChangeText: setTyped,
+				autoCapitalize: "none",
+				returnKeyType: "search"
 			}),
 			/* @__PURE__ */ jsxs(View, {
 				style: styles$2.actions,
 				children: [
 					/* @__PURE__ */ jsx(Button, {
-						variant: "outline",
+						variant: ignoreCase ? "subtle" : "outline",
+						size: "sm",
 						accessibilityState: { selected: ignoreCase },
 						onPress: () => setIgnoreCase((value) => !value),
-						children: "aA"
+						children: ignoreCase ? "Any case" : "Match case"
 					}),
-					/* @__PURE__ */ jsxs(Button, {
-						variant: "outline",
-						disabled: query === "",
+					query === "" ? null : /* @__PURE__ */ jsx(Button, {
+						variant: context > 0 ? "subtle" : "outline",
+						size: "sm",
 						onPress: () => setContext((value) => value === 0 ? 2 : 0),
-						children: [
-							"± ",
-							context,
-							" lines"
-						]
+						children: `± ${String(context)} lines`
 					}),
-					/* @__PURE__ */ jsx(Button, {
-						variant: "outline",
-						disabled: query !== "" || slice?.running !== true,
-						accessibilityState: { selected: following },
+					query === "" && slice?.running === true ? /* @__PURE__ */ jsx(Button, {
+						variant: live ? "subtle" : "outline",
+						size: "sm",
+						accessibilityState: { selected: live },
 						onPress: () => setFollowing((value) => !value),
-						children: query !== "" ? "Follow · paused" : "Follow"
-					})
+						children: live ? "Following" : "Follow"
+					}) : null
 				]
 			}),
 			/* @__PURE__ */ jsx(Text, {
 				style: styles$2.meta,
-				children: slice === void 0 ? "Reading…" : query !== "" ? `${slice.lineCount} matching of ${slice.totalLines} lines` : `${following && slice.running ? "Tailing" : "Showing"} last ${lines.length} of ${slice.totalLines} lines`
+				children: slice === void 0 ? error === "" ? "Reading…" : "" : query !== "" ? `${slice.lineCount} matching of ${slice.totalLines} lines` : `${live ? "Tailing" : "Showing"} last ${lines.length} of ${slice.totalLines} lines`
 			}),
 			/* @__PURE__ */ jsx(ScrollView, {
 				style: styles$2.log,
+				contentContainerStyle: styles$2.logBody,
 				children: error !== "" ? /* @__PURE__ */ jsx(Text, {
 					accessibilityRole: "alert",
 					style: styles$2.error,
@@ -581,17 +685,18 @@ function RunnerLogPanel({ sessionId, runId, sendSessionFrame }) {
 					children: query === "" ? "The log is empty." : "Nothing matched."
 				}) : lines.map((line, index) => /* @__PURE__ */ jsxs(Text, {
 					selectable: true,
-					style: styles$2.meta,
-					children: [
-						numbers[index],
-						" ",
-						line
-					]
+					style: styles$2.line,
+					children: [/* @__PURE__ */ jsx(Text, {
+						style: styles$2.number,
+						children: `${String(numbers[index] ?? "").padStart(gutter)}  `
+					}), line]
 				}, `${numbers[index] ?? index}`))
 			}),
 			/* @__PURE__ */ jsx(Text, {
 				selectable: true,
-				style: styles$2.meta,
+				numberOfLines: 1,
+				ellipsizeMode: "middle",
+				style: styles$2.path,
 				children: run?.logPath ?? slice?.path ?? ""
 			})
 		]
@@ -605,13 +710,46 @@ const styles$2 = StyleSheet.create((theme) => ({
 		backgroundColor: theme.colors.bg,
 		uni__dependencies: [0]
 	},
+	header: {
+		flexDirection: "row",
+		alignItems: "center",
+		gap: theme.spacing(2),
+		minHeight: 32,
+		uni__dependencies: [0]
+	},
+	grow: { flex: 1 },
 	title: {
+		flexShrink: 1,
 		color: theme.colors.hi,
 		fontWeight: "600",
 		fontFamily: fontOf(theme.fontFamily.sans),
 		fontSize: theme.fontSize.base,
 		uni__dependencies: [0]
 	},
+	commandBox: {
+		gap: theme.spacing(1),
+		paddingHorizontal: theme.spacing(3),
+		paddingVertical: theme.spacing(2),
+		borderRadius: theme.borderRadius.md,
+		backgroundColor: theme.colors.deep,
+		uni__dependencies: [0]
+	},
+	command: {
+		color: theme.colors.hi,
+		fontFamily: fontOf(theme.fontFamily.mono),
+		fontSize: theme.fontSize.sm,
+		uni__dependencies: [0]
+	},
+	prompt: {
+		color: theme.colors.faint,
+		uni__dependencies: [0]
+	},
+	folder: {
+		color: theme.colors.dim,
+		fontFamily: fontOf(theme.fontFamily.mono),
+		fontSize: theme.fontSize.xs,
+		uni__dependencies: [0]
+	},
 	meta: {
 		color: theme.colors.dim,
 		fontFamily: fontOf(theme.fontFamily.sans),
@@ -622,7 +760,7 @@ const styles$2 = StyleSheet.create((theme) => ({
 	error: {
 		color: theme.colors.red,
 		fontFamily: fontOf(theme.fontFamily.sans),
-		fontSize: theme.fontSize.base,
+		fontSize: theme.fontSize.sm,
 		uni__dependencies: [0]
 	},
 	actions: {
@@ -633,8 +771,30 @@ const styles$2 = StyleSheet.create((theme) => ({
 	},
 	log: {
 		flex: 1,
+		borderRadius: theme.borderRadius.md,
 		backgroundColor: theme.colors.deep,
 		uni__dependencies: [0]
+	},
+	logBody: {
+		padding: theme.spacing(3),
+		uni__dependencies: [0]
+	},
+	line: {
+		color: theme.colors.text,
+		fontFamily: fontOf(theme.fontFamily.mono),
+		fontSize: theme.fontSize.xs,
+		lineHeight: theme.lineHeight.sm,
+		uni__dependencies: [0]
+	},
+	number: {
+		color: theme.colors.faint,
+		uni__dependencies: [0]
+	},
+	path: {
+		color: theme.colors.faint,
+		fontFamily: fontOf(theme.fontFamily.mono),
+		fontSize: theme.fontSize.xs,
+		uni__dependencies: [0]
 	}
 }));
 //#endregion
@@ -672,26 +832,78 @@ function runnerShellTab(run) {
 		})
 	};
 }
-function RunnerShellPanel({ sessionId, runId, renderRunnerTerminal }) {
+/**
+* One terminal runner, full screen. A phone keyboard has no Ctrl key, so
+* Ctrl-C is a button; Search opens the runner's log, which the sink keeps
+* scrubbed beside the raw bytes for exactly that.
+*/
+function RunnerShellPanel({ sessionId, runId, renderRunnerTerminal, sendSessionFrame, openTransientTab }) {
+	const session = useRunners(sessionId);
+	const run = session.runs.find((candidate) => candidate.id === runId);
+	const live = run?.state === "running";
+	const stopping = session.stopRequested.includes(runId);
 	const request = useMemo(() => sessionId === null ? void 0 : {
 		key: `${sessionId}:${runId}`,
 		read: (from, generation, signal) => readRunnerScreen(sessionId, runId, from, generation, signal),
 		write: (text) => sendRunnerInput(sessionId, runId, text)
 	}, [sessionId, runId]);
-	return /* @__PURE__ */ jsx(View, {
+	return /* @__PURE__ */ jsxs(View, {
 		style: styles$1.panel,
-		children: request === void 0 ? /* @__PURE__ */ jsx(Text, {
-			style: styles$1.meta,
-			children: "Select a session to attach to this runner."
-		}) : renderRunnerTerminal?.(request)
+		children: [
+			/* @__PURE__ */ jsx(RunnerRunHeader, {
+				run,
+				name: run?.name ?? runId,
+				sessionDirectory: session.sessionDirectory,
+				action: live && sessionId !== null ? /* @__PURE__ */ jsx(Button, {
+					testID: "runner-shell-stop",
+					variant: stopping ? "outline" : "danger-outline",
+					size: "sm",
+					disabled: stopping,
+					onPress: () => requestRunnerStop(sendSessionFrame, sessionId, runId),
+					children: stopping ? "Stopping…" : "Stop"
+				}) : null
+			}),
+			/* @__PURE__ */ jsx(View, {
+				style: styles$1.terminal,
+				children: request === void 0 ? /* @__PURE__ */ jsx(Text, {
+					style: styles$1.meta,
+					children: "Select a session to attach to this runner."
+				}) : renderRunnerTerminal?.(request)
+			}),
+			/* @__PURE__ */ jsxs(View, {
+				style: styles$1.actions,
+				children: [run ? /* @__PURE__ */ jsxs(Button, {
+					testID: "runner-shell-search",
+					variant: "outline",
+					onPress: () => openTransientTab(runnerLogTab(run)),
+					style: styles$1.action,
+					children: [/* @__PURE__ */ jsx(SearchIcon, { size: 14 }), "Search output"]
+				}) : null, live && sessionId !== null ? /* @__PURE__ */ jsx(Button, {
+					testID: "runner-shell-interrupt",
+					variant: "outline",
+					onPress: () => void sendRunnerInput(sessionId, runId, ""),
+					style: styles$1.action,
+					children: "Ctrl-C"
+				}) : null]
+			})
+		]
 	});
 }
 const styles$1 = StyleSheet.create((theme) => ({
 	panel: {
 		flex: 1,
+		gap: theme.spacing(2),
+		padding: theme.spacing(3),
 		backgroundColor: theme.colors.bg,
 		uni__dependencies: [0]
 	},
+	actions: {
+		flexDirection: "row",
+		gap: theme.spacing(2),
+		uni__dependencies: [0]
+	},
+	action: { flex: 1 },
+	terminal: { flex: 1 },
 	meta: {
 		color: theme.colors.dim,
 		fontFamily: fontOf(theme.fontFamily.sans),
@@ -701,6 +913,10 @@ const styles$1 = StyleSheet.create((theme) => ({
 }));
 //#endregion
 //#region src/extensions/workspaces/sessions/(frontend)/_components/RunnersPanel.native.tsx
+/** A runner's own screen: its terminal when it has one, its log when it does not. */
+function runnerTab(run) {
+	return run.interactive ? runnerShellTab(run) : runnerLogTab(run);
+}
 function runnersTab() {
 	return {
 		id: "runner-runs",
@@ -708,60 +924,46 @@ function runnersTab() {
 		panel: RunnersPanel
 	};
 }
-function RunnerRow({ run, props, stopping, now, detail = false }) {
+function RunnerRow({ run, props, stopping, now }) {
 	const tail = useRunnerTail(props.sessionId, run.id, run.state === "running");
-	return /* @__PURE__ */ jsxs(View, {
+	return /* @__PURE__ */ jsxs(Pressable, {
 		testID: `activity-runner-${run.id}`,
-		style: styles.row,
-		children: [
-			/* @__PURE__ */ jsx(ListRow, {
-				leading: /* @__PURE__ */ jsx(Dot, {
+		accessibilityRole: "button",
+		accessibilityLabel: `Open ${run.name}`,
+		onPress: () => props.openTransientTab(runnerTab(run)),
+		style: ({ pressed }) => [styles.row, pressed && styles.pressed],
+		children: [/* @__PURE__ */ jsxs(View, {
+			style: styles.line,
+			children: [
+				/* @__PURE__ */ jsx(Dot, {
 					tone: "yellow",
 					pulse: true
 				}),
-				title: run.name,
-				description: `${formatRunnerUptime(run.startedAt, now)}${run.interactive ? " · tty" : ""}`,
-				onPress: () => props.openTransientTab(runnerLogTab(run))
-			}),
-			/* @__PURE__ */ jsx(Text, {
-				numberOfLines: detail ? void 0 : 1,
-				style: styles.meta,
-				children: tail ?? run.command
-			}),
-			detail ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Text, {
-				selectable: true,
-				style: styles.meta,
-				children: run.command
-			}), /* @__PURE__ */ jsx(Text, {
-				selectable: true,
-				style: styles.meta,
-				children: run.cwd
-			})] }) : null,
-			/* @__PURE__ */ jsxs(View, {
-				style: styles.actions,
-				children: [
-					detail ? /* @__PURE__ */ jsx(Button, {
-						variant: "outline",
-						onPress: () => props.openTransientTab(runnerLogTab(run)),
-						children: "Log"
-					}) : null,
-					detail && run.interactive && props.sessionId !== null ? /* @__PURE__ */ jsx(Button, {
-						variant: "outline",
-						onPress: () => props.openTransientTab(runnerShellTab(run)),
-						children: "Shell"
-					}) : null,
-					props.sessionId !== null ? /* @__PURE__ */ jsx(Button, {
-						testID: `activity-runner-stop-${run.id}`,
-						variant: stopping ? "outline" : "danger-outline",
-						disabled: stopping,
-						onPress: () => {
-							if (props.sessionId !== null) requestRunnerStop(props.sendSessionFrame, props.sessionId, run.id);
-						},
-						children: stopping ? "Stopping…" : "Stop"
-					}) : null
-				]
-			})
-		]
+				/* @__PURE__ */ jsx(Text, {
+					numberOfLines: 1,
+					style: styles.name,
+					children: run.name
+				}),
+				/* @__PURE__ */ jsx(Text, {
+					style: styles.meta,
+					children: formatRunnerUptime(run.startedAt, now)
+				}),
+				props.sessionId !== null ? /* @__PURE__ */ jsx(Button, {
+					testID: `activity-runner-stop-${run.id}`,
+					size: "xs",
+					variant: stopping ? "outline" : "danger-outline",
+					disabled: stopping,
+					onPress: () => {
+						if (props.sessionId !== null) requestRunnerStop(props.sendSessionFrame, props.sessionId, run.id);
+					},
+					children: stopping ? "Stopping…" : "Stop"
+				}) : null
+			]
+		}), /* @__PURE__ */ jsx(Text, {
+			numberOfLines: 1,
+			style: styles.tail,
+			children: tail ?? `$ ${run.command}`
+		})]
 	});
 }
 function RunnersActivitySection(props) {
@@ -773,15 +975,23 @@ function RunnersActivitySection(props) {
 		return () => clearInterval(timer);
 	}, []);
 	return running.length === 0 ? /* @__PURE__ */ jsxs(View, {
-		style: styles.row,
+		style: styles.idle,
 		children: [/* @__PURE__ */ jsx(Text, {
 			style: styles.meta,
 			children: "Idle"
-		}), props.sessionId !== null ? /* @__PURE__ */ jsx(Button, {
-			variant: "ghost",
+		}), props.sessionId !== null ? /* @__PURE__ */ jsxs(Pressable, {
+			accessibilityRole: "button",
 			testID: "activity-runner-launch",
+			hitSlop: 10,
 			onPress: () => props.openTransientTab(runnersTab()),
-			children: "Launch a runner"
+			style: styles.launch,
+			children: [/* @__PURE__ */ jsx(Text, {
+				style: styles.launchText,
+				children: "Launch a runner"
+			}), /* @__PURE__ */ jsx(ArrowRightIcon, {
+				size: 14,
+				color: "green"
+			})]
 		}) : null]
 	}) : /* @__PURE__ */ jsx(View, { children: running.map((run) => /* @__PURE__ */ jsx(RunnerRow, {
 		run,
@@ -790,13 +1000,22 @@ function RunnersActivitySection(props) {
 		stopping: session.stopRequested.includes(run.id)
 	}, run.id)) });
 }
+/**
+* Every running runner and the one place to start another: type a command
+* and Run hosts it on a terminal (plain output when the host has no rmux or
+* tmux), or leave it empty for a login shell. The started runner opens on
+* its own screen.
+*/
 function RunnersPanel(props) {
 	const { openTransientTab } = props;
 	const session = useRunners(props.sessionId);
 	const running = session.runs.filter((run) => run.state === "running");
-	const [launching, setLaunching] = useState(false);
+	const [command, setCommand] = useState("");
+	const [cwd, setCwd] = useState("");
 	const [now, setNow] = useState(() => Date.now());
 	const baseline = useRef(null);
+	/** What the pending launch ran, put back if the start fails. */
+	const launched = useRef("");
 	const timeout = useRef(void 0);
 	useEffect(() => {
 		const timer = setInterval(() => setNow(Date.now()), 1e4);
@@ -804,81 +1023,117 @@ function RunnersPanel(props) {
 	}, []);
 	useEffect(() => {
 		if (baseline.current === null) return;
-		const shell = session.runs.find((run) => run.state === "running" && run.interactive && !baseline.current?.has(run.id));
-		if (shell === void 0) return;
+		const started = session.runs.find((run) => run.state === "running" && !baseline.current?.has(run.id));
+		if (started === void 0) return;
 		baseline.current = null;
 		clearTimeout(timeout.current);
-		openTransientTab(runnerShellTab(shell));
+		openTransientTab(runnerTab(started));
 	}, [session.runs, openTransientTab]);
+	const failureId = session.startFailure?.id;
+	useEffect(() => {
+		if (failureId === void 0 || baseline.current === null) return;
+		baseline.current = null;
+		clearTimeout(timeout.current);
+		setCommand(launched.current);
+	}, [failureId]);
 	useEffect(() => () => clearTimeout(timeout.current), []);
+	const launch = () => {
+		if (props.sessionId === null) return;
+		baseline.current = new Set(session.runs.map((run) => run.id));
+		clearTimeout(timeout.current);
+		timeout.current = setTimeout(() => {
+			baseline.current = null;
+		}, 3e4);
+		requestRunnerStart(props.sendSessionFrame, props.sessionId, runnerRunRequest(command, cwd));
+		launched.current = command;
+		setCommand("");
+	};
 	return /* @__PURE__ */ jsxs(View, {
 		style: styles.panel,
 		children: [
-			/* @__PURE__ */ jsx(Text, {
-				style: styles.title,
-				children: running.length === 0 ? "Nothing running" : `${running.length} running`
-			}),
-			props.sessionId !== null ? /* @__PURE__ */ jsxs(View, {
-				style: styles.actions,
-				children: [/* @__PURE__ */ jsx(Button, {
-					variant: "outline",
-					onPress: () => {
-						if (props.sessionId === null) return;
-						baseline.current = new Set(session.runs.map((run) => run.id));
-						clearTimeout(timeout.current);
-						timeout.current = setTimeout(() => {
-							baseline.current = null;
-						}, 3e4);
-						requestRunnerStart(props.sendSessionFrame, props.sessionId, RUNNER_SHELL_REQUEST);
-					},
-					children: "Start shell"
-				}), /* @__PURE__ */ jsx(Button, {
-					onPress: () => setLaunching(true),
-					children: "Run command"
+			/* @__PURE__ */ jsxs(View, {
+				style: styles.header,
+				children: [/* @__PURE__ */ jsx(Text, {
+					style: styles.title,
+					children: "Runners"
+				}), /* @__PURE__ */ jsx(Text, {
+					style: styles.meta,
+					children: running.length === 0 ? "Nothing running" : `${running.length} running`
 				})]
+			}),
+			props.sessionId !== null ? /* @__PURE__ */ jsx(RunnerCommandBar, {
+				command,
+				onCommandChange: setCommand,
+				cwd,
+				onCwdChange: setCwd,
+				folders: running.map((run) => run.cwd),
+				...session.sessionDirectory === void 0 ? {} : { sessionDirectory: session.sessionDirectory },
+				...session.startFailure === void 0 ? {} : { problem: session.startFailure.message },
+				onLaunch: launch
 			}) : null,
 			/* @__PURE__ */ jsx(ScrollView, { children: running.length === 0 ? /* @__PURE__ */ jsx(Text, {
 				style: styles.meta,
-				children: "A command that outlives its turn moves to a runner and appears here while it works."
-			}) : running.map((run) => /* @__PURE__ */ jsx(RunnerRow, {
-				run,
-				props,
-				now,
-				stopping: session.stopRequested.includes(run.id),
-				detail: true
-			}, run.id)) }),
-			launching && props.sessionId !== null ? /* @__PURE__ */ jsx(LaunchRunnerSheet, {
-				sessionId: props.sessionId,
-				send: props.sendSessionFrame,
-				defaultCwd: running[0]?.cwd,
-				onClose: () => setLaunching(false)
-			}) : null
+				children: props.sessionId === null ? "Open a session to start a runner." : "Nothing running yet. Type a command above, like pnpm dev, and it opens as a live terminal."
+			}) : running.map((run) => /* @__PURE__ */ jsx(ListRow, {
+				leading: /* @__PURE__ */ jsx(Dot, {
+					tone: "yellow",
+					pulse: true
+				}),
+				title: run.name,
+				description: `${run.command} · ${formatRunnerUptime(run.startedAt, now)}`,
+				disclosure: true,
+				onPress: () => openTransientTab(runnerTab(run))
+			}, run.id)) })
 		]
 	});
 }
 const styles = StyleSheet.create((theme) => ({
 	panel: {
 		flex: 1,
-		gap: theme.spacing(2),
-		padding: theme.spacing(3),
+		gap: theme.spacing(3),
+		padding: theme.spacing(4),
 		backgroundColor: theme.colors.bg,
 		uni__dependencies: [0]
 	},
+	header: {
+		flexDirection: "row",
+		alignItems: "center",
+		gap: theme.spacing(2),
+		uni__dependencies: [0]
+	},
 	row: {
 		gap: theme.spacing(1),
 		paddingVertical: theme.spacing(2),
 		uni__dependencies: [0]
 	},
-	actions: {
+	pressed: { opacity: .6 },
+	line: {
 		flexDirection: "row",
-		flexWrap: "wrap",
+		alignItems: "center",
 		gap: theme.spacing(2),
 		uni__dependencies: [0]
 	},
-	title: {
+	name: {
+		flex: 1,
 		color: theme.colors.hi,
 		fontFamily: fontOf(theme.fontFamily.sans),
 		fontSize: theme.fontSize.base,
+		lineHeight: theme.lineHeight.base,
+		fontWeight: theme.fontWeight.medium,
+		uni__dependencies: [0]
+	},
+	tail: {
+		paddingLeft: theme.spacing(3.5),
+		color: theme.colors.dim,
+		fontFamily: fontOf(theme.fontFamily.mono),
+		fontSize: theme.fontSize.sm,
+		lineHeight: theme.lineHeight.sm,
+		uni__dependencies: [0]
+	},
+	title: {
+		color: theme.colors.hi,
+		fontFamily: fontOf(theme.fontFamily.sans),
+		fontSize: theme.fontSize.lg,
 		fontWeight: "600",
 		uni__dependencies: [0]
 	},
@@ -888,6 +1143,27 @@ const styles = StyleSheet.create((theme) => ({
 		fontSize: theme.fontSize.sm,
 		lineHeight: theme.lineHeight.sm,
 		uni__dependencies: [0]
+	},
+	idle: {
+		flexDirection: "row",
+		alignItems: "center",
+		flexWrap: "wrap",
+		gap: theme.spacing(4),
+		uni__dependencies: [0]
+	},
+	launch: {
+		flexDirection: "row",
+		alignItems: "center",
+		gap: theme.spacing(1),
+		uni__dependencies: [0]
+	},
+	launchText: {
+		color: theme.colors.green,
+		fontFamily: fontOf(theme.fontFamily.sans),
+		fontSize: theme.fontSize.base,
+		lineHeight: theme.lineHeight.base,
+		fontWeight: theme.fontWeight.medium,
+		uni__dependencies: [0]
 	}
 }));
 //#endregion
@@ -895,6 +1171,7 @@ const styles = StyleSheet.create((theme) => ({
 var runners_native_default = defineActivityGroup({
 	name: "runners",
 	keys: "r l",
+	icon: () => createElement(PlayCircleIcon),
 	statusKey: "po-runner-runners",
 	activeSource: runnerActivitySource,
 	transientTab: runnersTab,