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

package/dist/extensions/native.mjs

@@ -2,7 +2,7 @@ import { createApiClient, defineActivityGroup, defineChannelFile, defineFill, de
 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 { Button, Dot, Input, Label, ListRow, StatusBadge, fontOf } from "@agimon-ai/po-native-components";
 import { useCallback, useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
 import { StyleSheet } from "react-native-unistyles";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -54,7 +54,7 @@ function tailLineNumbers(lastLineNumber, count) {
 //#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 +70,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 +95,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 +104,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";
@@ -164,115 +173,6 @@ const runnerRunsChannel = runners.channel({
 	}
 });
 //#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
-	};
-	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"
-				}),
-				/* @__PURE__ */ jsx(Text, {
-					style: styles$3.meta,
-					children: "It appears above once the runtime starts it."
-				})
-			]
-		}) })] })
-	});
-}
-const styles$3 = StyleSheet.create((theme) => ({
-	form: {
-		gap: theme.spacing(2),
-		uni__dependencies: [0]
-	},
-	line: {
-		color: theme.colors.green,
-		fontFamily: fontOf(theme.fontFamily.mono),
-		fontSize: theme.fontSize.sm,
-		uni__dependencies: [0]
-	},
-	error: {
-		color: theme.colors.red,
-		fontFamily: fontOf(theme.fontFamily.sans),
-		fontSize: theme.fontSize.base,
-		uni__dependencies: [0]
-	},
-	meta: {
-		color: theme.colors.dim,
-		fontFamily: fontOf(theme.fontFamily.sans),
-		fontSize: theme.fontSize.sm,
-		uni__dependencies: [0]
-	}
-}));
-//#endregion
 //#region src/constants/webRunnerLog.ts
 const RUN_ID_PARAM = "runId";
 //#endregion
@@ -672,26 +572,110 @@ 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__ */ jsxs(View, {
+				style: styles$1.header,
+				children: [
+					/* @__PURE__ */ jsx(Text, {
+						numberOfLines: 1,
+						style: styles$1.title,
+						children: run?.name ?? runId
+					}),
+					/* @__PURE__ */ jsx(StatusBadge, {
+						tone: live ? "running" : "neutral",
+						children: live ? "Running" : "Ended"
+					}),
+					/* @__PURE__ */ jsx(View, { style: styles$1.grow }),
+					live && sessionId !== null ? /* @__PURE__ */ jsx(Button, {
+						testID: "runner-shell-stop",
+						variant: stopping ? "outline" : "danger-outline",
+						disabled: stopping,
+						onPress: () => requestRunnerStop(sendSessionFrame, sessionId, runId),
+						children: stopping ? "Stopping…" : "Stop"
+					}) : null
+				]
+			}),
+			run ? /* @__PURE__ */ jsx(Text, {
+				numberOfLines: 1,
+				style: styles$1.command,
+				children: run.command
+			}) : 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: [live && sessionId !== null ? /* @__PURE__ */ jsx(Button, {
+					testID: "runner-shell-interrupt",
+					variant: "outline",
+					onPress: () => void sendRunnerInput(sessionId, runId, ""),
+					children: "Ctrl-C"
+				}) : null, run ? /* @__PURE__ */ jsx(Button, {
+					testID: "runner-shell-search",
+					variant: "outline",
+					onPress: () => openTransientTab(runnerLogTab(run)),
+					children: "Search output"
+				}) : 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]
 	},
+	header: {
+		flexDirection: "row",
+		alignItems: "center",
+		gap: theme.spacing(2),
+		uni__dependencies: [0]
+	},
+	actions: {
+		flexDirection: "row",
+		gap: theme.spacing(2),
+		uni__dependencies: [0]
+	},
+	grow: { flex: 1 },
+	terminal: { flex: 1 },
+	title: {
+		flexShrink: 1,
+		color: theme.colors.hi,
+		fontFamily: fontOf(theme.fontFamily.sans),
+		fontSize: theme.fontSize.lg,
+		fontWeight: "600",
+		uni__dependencies: [0]
+	},
+	command: {
+		color: theme.colors.dim,
+		fontFamily: fontOf(theme.fontFamily.mono),
+		fontSize: theme.fontSize.sm,
+		uni__dependencies: [0]
+	},
 	meta: {
 		color: theme.colors.dim,
 		fontFamily: fontOf(theme.fontFamily.sans),
@@ -701,6 +685,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,7 +696,7 @@ 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, {
 		testID: `activity-runner-${run.id}`,
@@ -720,47 +708,27 @@ function RunnerRow({ run, props, stopping, now, detail = false }) {
 					pulse: true
 				}),
 				title: run.name,
-				description: `${formatRunnerUptime(run.startedAt, now)}${run.interactive ? " · tty" : ""}`,
-				onPress: () => props.openTransientTab(runnerLogTab(run))
+				description: `${run.command} · ${formatRunnerUptime(run.startedAt, now)}`,
+				disclosure: true,
+				onPress: () => props.openTransientTab(runnerTab(run))
 			}),
-			/* @__PURE__ */ jsx(Text, {
-				numberOfLines: detail ? void 0 : 1,
+			tail === void 0 ? null : /* @__PURE__ */ jsx(Text, {
+				numberOfLines: 1,
 				style: styles.meta,
-				children: tail ?? run.command
+				children: tail
 			}),
-			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, {
+			props.sessionId !== null ? /* @__PURE__ */ jsx(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
-				]
-			})
+				children: /* @__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
 		]
 	});
 }
@@ -790,11 +758,17 @@ 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 [now, setNow] = useState(() => Date.now());
 	const baseline = useRef(null);
 	const timeout = useRef(void 0);
@@ -804,66 +778,101 @@ 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]);
 	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, ""));
+		setCommand("");
+	};
 	return /* @__PURE__ */ jsxs(View, {
 		style: styles.panel,
 		children: [
-			/* @__PURE__ */ jsx(Text, {
-				style: styles.title,
-				children: running.length === 0 ? "Nothing running" : `${running.length} running`
+			/* @__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__ */ 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"
+				style: styles.bar,
+				children: [/* @__PURE__ */ jsxs(View, {
+					style: styles.actions,
+					children: [/* @__PURE__ */ jsx(View, {
+						style: styles.grow,
+						children: /* @__PURE__ */ jsx(Input, {
+							testID: "runners-panel-command",
+							accessibilityLabel: "Command to run",
+							size: "lg",
+							value: command,
+							onChangeText: setCommand,
+							onSubmitEditing: launch,
+							placeholder: "a command, like pnpm dev",
+							autoCapitalize: "none",
+							autoCorrect: false,
+							returnKeyType: "go"
+						})
+					}), /* @__PURE__ */ jsx(Button, {
+						testID: "runners-panel-run",
+						variant: "primary",
+						size: "lg",
+						onPress: launch,
+						children: command.trim() === "" ? "Open shell" : "Run"
+					})]
+				}), /* @__PURE__ */ jsx(Text, {
+					style: styles.meta,
+					children: "Runs in the session's directory. Leave it empty for a plain shell."
 				})]
 			}) : 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]
+	},
+	bar: {
+		gap: theme.spacing(1.5),
+		uni__dependencies: [0]
+	},
+	grow: { flex: 1 },
 	row: {
 		gap: theme.spacing(1),
 		paddingVertical: theme.spacing(2),
@@ -871,14 +880,14 @@ const styles = StyleSheet.create((theme) => ({
 	},
 	actions: {
 		flexDirection: "row",
-		flexWrap: "wrap",
+		alignItems: "center",
 		gap: theme.spacing(2),
 		uni__dependencies: [0]
 	},
 	title: {
 		color: theme.colors.hi,
 		fontFamily: fontOf(theme.fontFamily.sans),
-		fontSize: theme.fontSize.base,
+		fontSize: theme.fontSize.lg,
 		fontWeight: "600",
 		uni__dependencies: [0]
 	},