agent-relay-server 0.11.9 → 0.12.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agent-relay-server",
-  "version": "0.11.9",
+  "version": "0.12.1",
   "description": "Lightweight HTTP message relay for inter-agent communication across machines",
   "module": "src/index.ts",
   "type": "module",
@@ -32,7 +32,7 @@
     "CONTRIBUTING.md"
   ],
   "dependencies": {
-    "agent-relay-sdk": "0.2.5"
+    "agent-relay-sdk": "0.2.6"
   },
   "scripts": {
     "prepack": "bun run build:dashboard >&2",

package/public/index.html

@@ -10591,6 +10591,7 @@ function isAgentStale(now, agent) {
 function agentSupportsControlAction(agent, action) {
 	if (!agent || isBuiltInAgent(agent) || isChannelAgent(agent)) return false;
 	if (action === "resume") return false;
+	if (action === "interrupt") return agent.providerCapabilities?.liveSession?.interrupt === true && agent.status === "busy";
 	if (agentType(agent) === "claude" && (action === "restart" || action === "shutdown" || action === "compact" || action === "clearContext") && !agentHasTmuxSession(agent)) return false;
 	const lifecycle = agent.providerCapabilities?.lifecycle;
 	if (lifecycle) {
@@ -124029,18 +124030,18 @@ function useFileListing(orchestratorId, selectedPath, git = false) {
 }
 function RawTextContent({ content, line, lineRef }) {
 	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-		className: "min-w-full py-2 font-mono text-xs leading-5",
+		className: "w-full py-2 font-mono text-xs leading-5",
 		children: content.split("\n").map((text, index) => {
 			const lineNumber = index + 1;
 			const active = lineNumber === line;
 			return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
 				ref: active ? lineRef : void 0,
-				className: `grid grid-cols-[4rem_minmax(0,1fr)] px-2 ${active ? "bg-primary/15" : ""}`,
+				className: `grid grid-cols-[2.5rem_minmax(0,1fr)] px-1 sm:grid-cols-[4rem_minmax(0,1fr)] sm:px-2 ${active ? "bg-primary/15" : ""}`,
 				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-					className: "select-none pr-3 text-right text-muted-foreground",
+					className: "select-none pr-2 text-right text-muted-foreground sm:pr-3",
 					children: lineNumber
 				}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("pre", {
-					className: "overflow-visible whitespace-pre-wrap break-words",
+					className: "overflow-hidden whitespace-pre-wrap break-words",
 					children: text || " "
 				})]
 			}, lineNumber);
@@ -124374,7 +124375,7 @@ function FileBrowser({ overlay = false }) {
 		className: overlay ? "flex h-full flex-col" : "flex h-[calc(100dvh-5rem)] flex-col gap-3 md:gap-4",
 		children: [
 			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-				className: "flex flex-wrap items-center gap-2",
+				className: `flex flex-wrap items-center gap-2 ${selectedPath ? "hidden md:flex" : ""}`,
 				children: [
 					/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
 						className: "flex items-center gap-2 text-lg font-semibold",
@@ -124403,7 +124404,7 @@ function FileBrowser({ overlay = false }) {
 				]
 			}),
 			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-				className: "flex flex-wrap items-center gap-2",
+				className: `flex flex-wrap items-center gap-2 ${selectedPath ? "hidden md:flex" : ""}`,
 				children: [
 					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Input, {
 						value: pathDraft,
@@ -124461,7 +124462,7 @@ function FileBrowser({ overlay = false }) {
 				]
 			}),
 			segments.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-				className: "flex flex-wrap items-center gap-1 text-xs text-muted-foreground",
+				className: `flex flex-wrap items-center gap-1 text-xs text-muted-foreground ${selectedPath ? "hidden md:flex" : ""}`,
 				children: segments.map((segment, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", {
 					type: "button",
 					className: "rounded px-1.5 py-0.5 font-mono hover:bg-accent hover:text-foreground",
@@ -124478,7 +124479,7 @@ function FileBrowser({ overlay = false }) {
 				children: visibleError
 			}),
 			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-				className: "grid min-h-0 flex-1 overflow-hidden rounded-md border border-border md:grid-cols-[22rem_minmax(0,1fr)]",
+				className: `grid min-h-0 flex-1 overflow-hidden md:rounded-md md:border md:border-border md:grid-cols-[22rem_minmax(0,1fr)] ${selectedPath ? "" : "rounded-md border border-border"}`,
 				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
 					className: `min-h-0 overflow-auto border-b border-border bg-card md:border-b-0 md:border-r ${selectedPath ? "hidden md:block" : ""}`,
 					children: [
@@ -124567,6 +124568,101 @@ function Textarea({ className, ...props }) {
 	});
 }
 //#endregion
+//#region src/lib/slash-commands.ts
+var RELAY_SLASH_COMMANDS = [
+	{
+		name: "/reply",
+		source: "skill",
+		description: "Reply to a relay message by id",
+		argumentHint: "<messageId> <body>"
+	},
+	{
+		name: "/message",
+		source: "skill",
+		description: "Send a relay message to an agent, label, tag, or broadcast",
+		argumentHint: "<target> <body>"
+	},
+	{
+		name: "/pair",
+		source: "skill",
+		description: "Start or manage a two-agent pair session"
+	},
+	{
+		name: "/react",
+		source: "skill",
+		description: "Add a reaction to a relay message",
+		argumentHint: "<messageId> <emoji>"
+	},
+	{
+		name: "/read-message",
+		source: "skill",
+		description: "Fetch a full relay message by id",
+		argumentHint: "<messageId>"
+	},
+	{
+		name: "/send-claimable",
+		source: "skill",
+		description: "Enqueue a claimable work item for one agent to claim"
+	},
+	{
+		name: "/status",
+		source: "skill",
+		description: "Show this agent's relay status"
+	},
+	{
+		name: "/tags",
+		source: "skill",
+		description: "List or update this agent's relay tags"
+	},
+	{
+		name: "/label",
+		source: "skill",
+		description: "Read, set, or clear this agent's relay label"
+	},
+	{
+		name: "/disconnect",
+		source: "skill",
+		description: "End the current relay pair session"
+	}
+];
+var CLAUDE_BUILTIN_SLASH_COMMANDS = [
+	{
+		name: "/clear",
+		source: "builtin",
+		description: "Clear conversation history and free up context"
+	},
+	{
+		name: "/compact",
+		source: "builtin",
+		description: "Compact the conversation to reclaim context",
+		argumentHint: "[instructions]"
+	},
+	{
+		name: "/model",
+		source: "builtin",
+		description: "Switch the active model",
+		argumentHint: "[model]"
+	},
+	{
+		name: "/help",
+		source: "builtin",
+		description: "Show help"
+	}
+];
+var CODEX_BUILTIN_SLASH_COMMANDS = [{
+	name: "/compact",
+	source: "builtin",
+	description: "Compact the conversation to reclaim context"
+}, {
+	name: "/new",
+	source: "builtin",
+	description: "Start a new thread"
+}];
+/** Slash-command catalog for a provider's chat-input autocomplete palette. */
+function providerSlashCommands(provider) {
+	return [...provider === "claude" ? CLAUDE_BUILTIN_SLASH_COMMANDS : provider === "codex" ? CODEX_BUILTIN_SLASH_COMMANDS : [], ...RELAY_SLASH_COMMANDS];
+}
+//#endregion
 //#region src/components/views/chat.tsx
 function formatBytes(size) {
 	if (size < 1024) return `${size} B`;
@@ -125163,7 +125259,7 @@ function StatusMarker({ event }) {
 		]
 	});
 }
-function BusyIndicator({ blockedLabel }) {
+function BusyIndicator({ blockedLabel, onInterrupt }) {
 	if (blockedLabel) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
 		className: "flex justify-start mb-3",
 		children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
@@ -125178,16 +125274,78 @@ function BusyIndicator({ blockedLabel }) {
 		className: "flex justify-start mb-3",
 		children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
 			className: "flex items-center gap-2 rounded-2xl rounded-bl-sm bg-card ring-1 ring-foreground/10 px-4 py-2.5",
-			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-				className: "flex items-center gap-1",
+			children: [
+				/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+					className: "flex items-center gap-1",
+					children: [
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "w-1.5 h-1.5 rounded-full bg-yellow-400 animate-[pulse_1.4s_ease-in-out_infinite]" }),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "w-1.5 h-1.5 rounded-full bg-yellow-400 animate-[pulse_1.4s_ease-in-out_0.2s_infinite]" }),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "w-1.5 h-1.5 rounded-full bg-yellow-400 animate-[pulse_1.4s_ease-in-out_0.4s_infinite]" })
+					]
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+					className: "text-xs text-muted-foreground",
+					children: "working"
+				}),
+				onInterrupt && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", {
+					onClick: onInterrupt,
+					title: "Interrupt",
+					className: "ml-1 flex items-center gap-1 rounded-full px-1.5 py-0.5 text-xs text-muted-foreground hover:text-red-300 hover:bg-red-500/10 transition-colors",
+					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(CircleStop, { className: "w-3.5 h-3.5" }), "Stop"]
+				})
+			]
+		})
+	});
+}
+function ActivityTrace({ steps }) {
+	const [expanded, setExpanded] = (0, import_react.useState)(false);
+	const last = steps[steps.length - 1];
+	if (!last) return null;
+	const summary = (last.label || last.text || "").replace(/\s+/g, " ").trim();
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+		className: "flex justify-start mb-2",
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+			className: "max-w-[85%] md:max-w-[75%] min-w-0",
+			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", {
+				onClick: () => setExpanded((v) => !v),
+				className: "flex items-center gap-1.5 text-xs text-muted-foreground/70 hover:text-muted-foreground transition-colors w-full text-left",
 				children: [
-					/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "w-1.5 h-1.5 rounded-full bg-yellow-400 animate-[pulse_1.4s_ease-in-out_infinite]" }),
-					/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "w-1.5 h-1.5 rounded-full bg-yellow-400 animate-[pulse_1.4s_ease-in-out_0.2s_infinite]" }),
-					/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "w-1.5 h-1.5 rounded-full bg-yellow-400 animate-[pulse_1.4s_ease-in-out_0.4s_infinite]" })
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Brain, { className: "w-3.5 h-3.5 shrink-0" }),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+						className: "truncate",
+						children: expanded ? "Activity" : summary.length > 80 ? `${summary.slice(0, 79)}…` : summary || "thinking"
+					}),
+					steps.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
+						className: "opacity-60 shrink-0",
+						children: [
+							"· ",
+							steps.length,
+							" steps"
+						]
+					}),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChevronRight, { className: cn$2("w-3 h-3 shrink-0 transition-transform", expanded && "rotate-90") })
 				]
-			}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
-				className: "text-xs text-muted-foreground",
-				children: "working"
+			}), expanded && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+				className: "mt-1.5 space-y-1.5 border-l border-foreground/10 pl-2.5",
+				children: steps.map((step) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+					className: "text-xs leading-relaxed",
+					children: step.kind === "reasoning" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+						className: "italic text-muted-foreground/80 whitespace-pre-wrap break-words",
+						children: step.text
+					}) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
+						className: "text-muted-foreground flex items-start gap-1.5",
+						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Terminal, { className: "w-3 h-3 mt-0.5 shrink-0 opacity-70" }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
+							className: "min-w-0 break-words",
+							children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+								className: "font-medium",
+								children: step.label || "tool"
+							}), step.text ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
+								className: "opacity-70",
+								children: [" — ", step.text]
+							}) : null]
+						})]
+					})
+				}, step.id))
 			})]
 		})
 	});
@@ -125218,23 +125376,31 @@ function PermissionRequestBubble({ agentId, approval }) {
 			setSubmitting(null);
 		}
 	}
+	const isPlan = approval.kind === "plan";
 	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
 		className: "flex justify-start mb-3",
 		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
 			className: "max-w-[92%] md:max-w-[78%] rounded-2xl rounded-bl-sm bg-card ring-1 ring-amber-500/35 px-3.5 py-3 text-sm",
 			children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
 				className: "flex items-start gap-2",
-				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(CircleAlert, { className: "mt-0.5 h-4 w-4 shrink-0 text-amber-400" }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+				children: [isPlan ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ListChecks, { className: "mt-0.5 h-4 w-4 shrink-0 text-amber-400" }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CircleAlert, { className: "mt-0.5 h-4 w-4 shrink-0 text-amber-400" }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
 					className: "min-w-0 flex-1",
 					children: [
 						/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
 							className: "text-sm font-medium text-amber-100",
 							children: approval.title
 						}),
-						approval.body && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("pre", {
+						approval.body && (isPlan ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+							className: "mt-2 max-h-72 overflow-auto rounded-md bg-background/60 p-2.5 text-xs leading-relaxed",
+							children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FormattedBody, {
+								text: approval.body,
+								rawBody: approval.body,
+								className: "leading-relaxed"
+							})
+						}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("pre", {
 							className: "mt-2 max-h-44 overflow-auto whitespace-pre-wrap break-words rounded-md bg-background/80 p-2 font-mono text-xs leading-relaxed text-muted-foreground",
 							children: approval.body
-						}),
+						})),
 						/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
 							className: "mt-2 flex flex-wrap gap-1.5",
 							children: choices.map((choice) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Button, {
@@ -125936,6 +126102,19 @@ var MessageBubble = (0, import_react.memo)(function MessageBubble({ msg, peer, o
 		})
 	});
 });
+function sessionActivityStep(msg) {
+	if (msg.kind !== "session") return null;
+	const s = msg.payload?.session;
+	if (!s || s.type !== "reasoning" && s.type !== "tool") return null;
+	return {
+		id: msg.id,
+		kind: s.type,
+		label: typeof s.label === "string" ? s.label : void 0,
+		text: msg.body,
+		ts: new Date(msg.createdAt).getTime(),
+		turnId: typeof s.turnId === "string" ? s.turnId : void 0
+	};
+}
 function dateKey(ts) {
 	const d = new Date(ts);
 	return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
@@ -126013,6 +126192,18 @@ function buildTimeline(messages, statusEvents, createdAt, importedHistory = [])
 	}
 	for (const msg of messages) {
 		if (isReactionEvent(msg)) continue;
+		const step = sessionActivityStep(msg);
+		if (step) {
+			raw.push({
+				ts: step.ts,
+				entry: {
+					type: "activity",
+					steps: [step],
+					timestamp: step.ts
+				}
+			});
+			continue;
+		}
 		raw.push({
 			ts: new Date(msg.createdAt).getTime(),
 			entry: {
@@ -126034,6 +126225,7 @@ function buildTimeline(messages, statusEvents, createdAt, importedHistory = [])
 		"import-boundary": 2,
 		"imported-message": 3,
 		message: 4,
+		activity: 4,
 		status: 5
 	};
 	raw.sort((a, b) => {
@@ -126057,10 +126249,23 @@ function buildTimeline(messages, statusEvents, createdAt, importedHistory = [])
 			});
 			lastDate = dk;
 		}
+		if (entry.type === "activity") {
+			const prev = entries[entries.length - 1];
+			if (prev && prev.type === "activity" && sameActivityTurn(prev, entry)) {
+				prev.steps.push(...entry.steps);
+				continue;
+			}
+		}
 		entries.push(entry);
 	}
 	return entries;
 }
+function sameActivityTurn(a, b) {
+	const at = a.steps[a.steps.length - 1]?.turnId;
+	const bt = b.steps[0]?.turnId;
+	if (at && bt) return at === bt;
+	return !at && !bt;
+}
 function ChatPanel({ threads, onBack, showBackButton }) {
 	const selectedInboxThread = useRelayStore((s) => s.selectedInboxThread);
 	const agentsById = useRelayStore((s) => s.agentsById);
@@ -126131,6 +126336,25 @@ function ChatPanel({ threads, onBack, showBackButton }) {
 	const canCompact = agentSupportsControlAction(agent, "compact");
 	const canClearContext = agentSupportsControlAction(agent, "clearContext");
 	const canShutdown = agentSupportsControlAction(agent, "shutdown");
+	const canInterrupt = agentSupportsControlAction(agent, "interrupt");
+	const interruptAgent = () => {
+		if (agent) doAgentAction(agent, "interrupt");
+	};
+	const [slashIndex, setSlashIndex] = (0, import_react.useState)(0);
+	const [slashClosed, setSlashClosed] = (0, import_react.useState)(false);
+	const slashEnabled = agent?.providerCapabilities?.liveSession?.slashCommands === true;
+	const slashProvider = agent?.providerCapabilities?.model?.provider ?? (typeof agent?.meta?.provider === "string" ? agent.meta.provider : void 0);
+	const slashMatches = slashEnabled && !slashClosed && /^\/\S*$/.test(draft) ? providerSlashCommands(slashProvider).filter((c) => c.name.toLowerCase().startsWith(draft.toLowerCase())) : [];
+	const slashActiveIndex = slashMatches.length ? Math.min(slashIndex, slashMatches.length - 1) : 0;
+	function acceptSlash(cmd) {
+		setReplyDraft(selectedInboxThread, `${cmd.name} `);
+		setSlashIndex(0);
+	}
+	function handleDraftChange(value) {
+		setReplyDraft(selectedInboxThread, value);
+		if (slashClosed) setSlashClosed(false);
+		setSlashIndex(0);
+	}
 	const hasPendingUploads = pendingAttachments.some((item) => item.uploading);
 	const readyAttachments = pendingAttachments.filter((item) => item.artifact);
 	useBackNavProtection(draft.trim().length > 0 || pendingAttachments.length > 0, (0, import_react.useCallback)(() => {}, []));
@@ -126320,6 +126544,29 @@ function ChatPanel({ threads, onBack, showBackButton }) {
 		clearPendingAttachments();
 	}
 	function handleKeyDown(e) {
+		if (slashMatches.length) {
+			if (e.key === "ArrowDown") {
+				e.preventDefault();
+				setSlashIndex((i) => Math.min(i + 1, slashMatches.length - 1));
+				return;
+			}
+			if (e.key === "ArrowUp") {
+				e.preventDefault();
+				setSlashIndex((i) => Math.max(i - 1, 0));
+				return;
+			}
+			if (e.key === "Escape") {
+				e.preventDefault();
+				setSlashClosed(true);
+				return;
+			}
+			if (e.key === "Enter" || e.key === "Tab") {
+				e.preventDefault();
+				const cmd = slashMatches[slashActiveIndex];
+				if (cmd) acceptSlash(cmd);
+				return;
+			}
+		}
 		if (e.key === "Enter" && !e.shiftKey) {
 			e.preventDefault();
 			handleSend();
@@ -126406,6 +126653,14 @@ function ChatPanel({ threads, onBack, showBackButton }) {
 									onClick: () => void handleOpenTerminal(),
 									children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Terminal, { className: "w-3.5 h-3.5" })
 								}),
+								canInterrupt && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, {
+									variant: "ghost",
+									size: "icon-sm",
+									className: "text-red-400 hover:text-red-300",
+									title: "Interrupt",
+									onClick: interruptAgent,
+									children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CircleStop, { className: "w-3.5 h-3.5" })
+								}),
 								canCompact && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, {
 									variant: "ghost",
 									size: "icon-sm",
@@ -126489,6 +126744,10 @@ function ChatPanel({ threads, onBack, showBackButton }) {
 											onClick: () => void handleOpenTerminal(),
 											children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Terminal, { className: "w-3.5 h-3.5" }), "Terminal"]
 										}),
+										canInterrupt && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(DropdownMenuItem, {
+											onClick: interruptAgent,
+											children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(CircleStop, { className: "w-3.5 h-3.5" }), "Interrupt"]
+										}),
 										canCompact && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(DropdownMenuItem, {
 											onClick: () => openConfirm("Compact Agent", `Compact context for ${displayName(agent)}?`, () => doAgentAction(agent, "compact")),
 											children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Minimize2, { className: "w-3.5 h-3.5" }), "Compact"]
@@ -126550,6 +126809,7 @@ function ChatPanel({ threads, onBack, showBackButton }) {
 									onPreviewReferencedPath: previewReferencedFile,
 									onPreviewReferencedPathEnd: scheduleCloseReferencedFilePreview
 								}, entry.msg.id);
+								if (entry.type === "activity") return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ActivityTrace, { steps: entry.steps }, `act-${entry.steps[0]?.id ?? entry.timestamp}`);
 								if (entry.type === "import-boundary") return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ImportedHistoryMarker, { history: entry.history }, `import-${entry.history.id}`);
 								if (entry.type === "imported-message") return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ImportedMessageBubble, {
 									entry: entry.entry,
@@ -126564,11 +126824,14 @@ function ChatPanel({ threads, onBack, showBackButton }) {
 								agentId: agent.id,
 								approval: pendingApproval
 							}),
-							agent?.status === "busy" && !pendingApproval && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BusyIndicator, { blockedLabel: blockedState?.label })
+							agent?.status === "busy" && !pendingApproval && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BusyIndicator, {
+								blockedLabel: blockedState?.label,
+								onInterrupt: canInterrupt ? interruptAgent : void 0
+							})
 						] })
 					}),
 					/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-						className: cn$2("shrink-0 border-t border-border px-3 md:px-4 py-2.5 md:py-3 safe-area-bottom", dragActive && "bg-primary/5 ring-1 ring-primary/40"),
+						className: cn$2("relative shrink-0 border-t border-border px-3 md:px-4 py-2.5 md:py-3 safe-area-bottom", dragActive && "bg-primary/5 ring-1 ring-primary/40"),
 						onDragOver: (e) => {
 							e.preventDefault();
 							setDragActive(true);
@@ -126597,6 +126860,31 @@ function ChatPanel({ threads, onBack, showBackButton }) {
 									e.currentTarget.value = "";
 								}
 							}),
+							slashMatches.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+								className: "absolute bottom-full left-3 right-3 md:left-4 md:right-4 mb-2 z-20 max-h-64 overflow-auto rounded-xl border border-border bg-popover shadow-lg",
+								children: slashMatches.map((cmd, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", {
+									onMouseDown: (e) => {
+										e.preventDefault();
+										acceptSlash(cmd);
+									},
+									onMouseEnter: () => setSlashIndex(i),
+									className: cn$2("flex w-full items-baseline gap-2 px-3 py-1.5 text-left text-sm", i === slashActiveIndex ? "bg-accent" : "hover:bg-accent/50"),
+									children: [
+										/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+											className: "font-medium shrink-0",
+											children: cmd.name
+										}),
+										cmd.argumentHint && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+											className: "text-xs text-muted-foreground shrink-0",
+											children: cmd.argumentHint
+										}),
+										cmd.description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+											className: "ml-auto truncate text-xs text-muted-foreground/70",
+											children: cmd.description
+										})
+									]
+								}, cmd.name))
+							}),
 							/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
 								className: "hidden md:flex items-end gap-2",
 								children: [
@@ -126611,7 +126899,7 @@ function ChatPanel({ threads, onBack, showBackButton }) {
 									}),
 									/* @__PURE__ */ (0, import_jsx_runtime.jsx)(AutoGrowTextarea, {
 										value: draft,
-										onChange: (e) => setReplyDraft(selectedInboxThread, e.target.value),
+										onChange: (e) => handleDraftChange(e.target.value),
 										onKeyDown: handleKeyDown,
 										onPaste: handlePaste,
 										placeholder: `Message ${agent ? displayName(agent) : selectedInboxThread}…`,
@@ -126630,7 +126918,7 @@ function ChatPanel({ threads, onBack, showBackButton }) {
 								className: "md:hidden space-y-2",
 								children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(AutoGrowTextarea, {
 									value: draft,
-									onChange: (e) => setReplyDraft(selectedInboxThread, e.target.value),
+									onChange: (e) => handleDraftChange(e.target.value),
 									onKeyDown: handleKeyDown,
 									onPaste: handlePaste,
 									placeholder: `Message ${agent ? displayName(agent) : selectedInboxThread}…`,
@@ -157272,6 +157560,10 @@ if ("serviceWorker" in navigator) {
     left: calc(var(--spacing) * 2.5);
   }
 
+  .left-3 {
+    left: calc(var(--spacing) * 3);
+  }
+
   .isolate {
     isolation: isolate;
   }
@@ -157703,6 +157995,10 @@ if ("serviceWorker" in navigator) {
     max-height: calc(var(--spacing) * 44);
   }
 
+  .max-h-64 {
+    max-height: calc(var(--spacing) * 64);
+  }
+
   .max-h-72 {
     max-height: calc(var(--spacing) * 72);
   }
@@ -158015,10 +158311,6 @@ if ("serviceWorker" in navigator) {
     min-width: 980px;
   }
 
-  .min-w-full {
-    min-width: 100%;
-  }
-
   .flex-1 {
     flex: 1;
   }
@@ -158081,6 +158373,10 @@ if ("serviceWorker" in navigator) {
     rotate: 45deg;
   }
 
+  .rotate-90 {
+    rotate: 90deg;
+  }
+
   .rotate-\[-90deg\] {
     rotate: -90deg;
   }
@@ -158157,12 +158453,12 @@ if ("serviceWorker" in navigator) {
     grid-template-columns: 1fr auto;
   }
 
-  .grid-cols-\[4\.5rem_minmax\(0\,1fr\)\] {
-    grid-template-columns: 4.5rem minmax(0, 1fr);
+  .grid-cols-\[2\.5rem_minmax\(0\,1fr\)\] {
+    grid-template-columns: 2.5rem minmax(0, 1fr);
   }
 
-  .grid-cols-\[4rem_minmax\(0\,1fr\)\] {
-    grid-template-columns: 4rem minmax(0, 1fr);
+  .grid-cols-\[4\.5rem_minmax\(0\,1fr\)\] {
+    grid-template-columns: 4.5rem minmax(0, 1fr);
   }
 
   .grid-cols-\[minmax\(10rem\,1fr\)_8rem_8rem_7rem_7rem_5rem\] {
@@ -158181,6 +158477,10 @@ if ("serviceWorker" in navigator) {
     flex-wrap: wrap;
   }
 
+  .items-baseline {
+    align-items: baseline;
+  }
+
   .items-center {
     align-items: center;
   }
@@ -158359,10 +158659,6 @@ if ("serviceWorker" in navigator) {
     overflow: hidden;
   }
 
-  .overflow-visible {
-    overflow: visible;
-  }
-
   .overflow-x-auto {
     overflow-x: auto;
   }
@@ -159757,10 +160053,6 @@ if ("serviceWorker" in navigator) {
     padding-right: calc(var(--spacing) * 2);
   }
 
-  .pr-3 {
-    padding-right: calc(var(--spacing) * 3);
-  }
-
   .pr-4 {
     padding-right: calc(var(--spacing) * 4);
   }
@@ -160301,6 +160593,10 @@ if ("serviceWorker" in navigator) {
     text-transform: uppercase;
   }
 
+  .italic {
+    font-style: italic;
+  }
+
   .tabular-nums {
     --tw-numeric-spacing: tabular-nums;
     font-variant-numeric: var(--tw-ordinal, ) var(--tw-slashed-zero, ) var(--tw-numeric-figure, ) var(--tw-numeric-spacing, ) var(--tw-numeric-fraction, );
@@ -160823,6 +161119,16 @@ if ("serviceWorker" in navigator) {
       }
     }
 
+    .hover\:bg-accent\/50:hover {
+      background-color: var(--accent);
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .hover\:bg-accent\/50:hover {
+        background-color: color-mix(in oklab, var(--accent) 50%, transparent);
+      }
+    }
+
     .hover\:bg-background:hover {
       background-color: var(--background);
     }
@@ -161475,6 +161781,10 @@ if ("serviceWorker" in navigator) {
       grid-template-columns: repeat(3, minmax(0, 1fr));
     }
 
+    .sm\:grid-cols-\[4rem_minmax\(0\,1fr\)\] {
+      grid-template-columns: 4rem minmax(0, 1fr);
+    }
+
     .sm\:flex-row {
       flex-direction: row;
     }
@@ -161483,6 +161793,14 @@ if ("serviceWorker" in navigator) {
       justify-content: flex-end;
     }
 
+    .sm\:px-2 {
+      padding-inline: calc(var(--spacing) * 2);
+    }
+
+    .sm\:pr-3 {
+      padding-right: calc(var(--spacing) * 3);
+    }
+
     .sm\:opacity-0 {
       opacity: 0;
     }
@@ -161495,6 +161813,14 @@ if ("serviceWorker" in navigator) {
   }
 
   @media (min-width: 48rem) {
+    .md\:right-4 {
+      right: calc(var(--spacing) * 4);
+    }
+
+    .md\:left-4 {
+      left: calc(var(--spacing) * 4);
+    }
+
     .md\:-m-6 {
       margin: calc(var(--spacing) * -6);
     }
@@ -161559,6 +161885,15 @@ if ("serviceWorker" in navigator) {
       gap: calc(var(--spacing) * 4);
     }
 
+    .md\:rounded-md {
+      border-radius: calc(var(--radius) * .8);
+    }
+
+    .md\:border {
+      border-style: var(--tw-border-style);
+      border-width: 1px;
+    }
+
     .md\:border-r {
       border-right-style: var(--tw-border-style);
       border-right-width: 1px;
@@ -161569,6 +161904,10 @@ if ("serviceWorker" in navigator) {
       border-bottom-width: 0;
     }
 
+    .md\:border-border {
+      border-color: var(--border);
+    }
+
     .md\:p-6 {
       padding: calc(var(--spacing) * 6);
     }

package/runner/src/adapter.ts

@@ -27,6 +27,20 @@ export interface ProviderStatusEvent {
 
 export type ProviderStatusUpdate = SemanticStatus | ProviderStatusEvent;
 
+/**
+ * A session-mirror event surfaced by an adapter that learns about session
+ * activity through provider events rather than hooks/transcripts (e.g. the Codex
+ * app-server). The runner turns these into `kind: "session"` chat messages, the
+ * same lane Claude's transcript capture uses. Provider-independent boundary.
+ */
+export interface ProviderSessionEvent {
+  type: "prompt" | "response" | "reasoning" | "tool";
+  body: string;
+  origin?: "chat" | "terminal" | "provider";
+  turnId?: string;
+  label?: string;
+}
+
 export interface ProviderConfig {
   command: string;
   defaultArgs: string[];
@@ -36,6 +50,9 @@ export interface ProviderConfig {
   defaultApprovalMode: string;
   defaultTags: string[];
   chatCaptureMode: "final" | "full";
+  // When false, the runner does not stream reasoning/tool steps into chat. Defaults
+  // to enabled (steps render discreetly, never as chat bubbles).
+  reasoningCapture?: boolean;
   headless: {
     tmuxPrefix: string;
     shutdownTimeoutMs: number;
@@ -110,11 +127,24 @@ export interface ProviderAdapter {
   shutdown(process: ManagedProcess, opts: { graceful: boolean; timeoutMs: number }): Promise<void>;
   compact?(process: ManagedProcess): Promise<Record<string, unknown> | void>;
   clearContext?(process: ManagedProcess): Promise<Record<string, unknown> | void>;
+  // Interrupt the in-flight turn without ending the session (ESC for Claude's
+  // tmux pane, turn/interrupt for the Codex app-server). Provider-independent at
+  // the runner boundary; each adapter does what its provider actually supports.
+  interrupt?(process: ManagedProcess): Promise<Record<string, unknown> | void>;
+  // Out-of-band activity probe for the busy-state reconciler: returns the real
+  // provider activity when the runner's claim state may have gone stale (e.g. the
+  // turn was interrupted from the web terminal so no Stop hook fired). "unknown"
+  // means the provider can't be cheaply probed and the reconciler should defer.
+  probeActivity?(process: ManagedProcess): Promise<"busy" | "idle" | "unknown">;
   terminalAttachSpec?(process: ManagedProcess): Promise<TerminalAttachSpec>;
   respondToPermissionDecision?(process: ManagedProcess, input: ProviderPermissionDecisionInput): Promise<Record<string, unknown> | void>;
   deliverInitialPrompt?(process: ManagedProcess, prompt: string): Promise<void>;
   deliver(process: ManagedProcess, messages: Message[]): Promise<void>;
   onStatusChange(cb: (status: ProviderStatusUpdate) => void): void;
+  // Subscribe to session-mirror events from providers that emit them directly
+  // (Codex app-server item events). Claude mirrors via hooks/transcript instead,
+  // so it leaves this unimplemented.
+  onSessionEvent?(cb: (event: ProviderSessionEvent) => void): void;
   // Headless providers with no tmux session (e.g. the Codex app-server) still
   // warrant an automatic restart on unexpected exit. Returning true opts the
   // provider into the runner's restart-with-backoff path.

package/src/routes.ts

@@ -320,7 +320,7 @@ const VALID_CHANNEL_BINDING_TARGET_TYPES = ["agent", "label", "tag", "capability
 const VALID_WORKSPACE_MODES = ["isolated", "shared", "inherit"] as const;
 const VALID_WORKSPACE_STATUSES = ["active", "ready", "conflict", "review_requested", "merge_planned", "merged", "abandoned", "cleanup_requested", "cleaned"] as const;
 const VALID_CHANNEL_BINDING_MODES = ["exclusive", "broadcast"] as const;
-const VALID_AGENT_ACTIONS = ["restart", "shutdown", "reconnect", "compact", "clearContext", "resume"] as const;
+const VALID_AGENT_ACTIONS = ["restart", "shutdown", "reconnect", "compact", "clearContext", "resume", "interrupt"] as const;
 const CLAUDE_RESUME_ID_RE = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
 const VALID_AGENT_SPAWN_PROVIDERS = ["codex"] as const;
 const VALID_CODEX_SPAWN_APPROVALS = ["open", "guarded", "read-only"] as const;
@@ -2147,11 +2147,12 @@ const deleteAgentById: Handler = (_req, params) => {
 
 type AgentControlAction = (typeof VALID_AGENT_ACTIONS)[number];
 
-function agentControlActionCommandType(action: AgentControlAction): "agent.restart" | "agent.shutdown" | "agent.reconnect" | "agent.compact" | "agent.clearContext" {
+function agentControlActionCommandType(action: AgentControlAction): "agent.restart" | "agent.shutdown" | "agent.reconnect" | "agent.compact" | "agent.clearContext" | "agent.interrupt" {
   if (action === "restart" || action === "resume") return "agent.restart";
   if (action === "shutdown") return "agent.shutdown";
   if (action === "compact") return "agent.compact";
   if (action === "clearContext") return "agent.clearContext";
+  if (action === "interrupt") return "agent.interrupt";
   return "agent.reconnect";
 }
 
@@ -2161,6 +2162,7 @@ function agentControlActionFromCommandType(type: string): AgentControlAction | n
   if (type === "agent.reconnect") return "reconnect";
   if (type === "agent.compact") return "compact";
   if (type === "agent.clearContext") return "clearContext";
+  if (type === "agent.interrupt") return "interrupt";
   return null;
 }
 
@@ -2170,6 +2172,7 @@ function agentControlActionRequestedTitle(action: AgentControlAction): string {
   if (action === "shutdown") return "Agent shutdown requested";
   if (action === "compact") return "Agent compaction requested";
   if (action === "clearContext") return "Agent context clear requested";
+  if (action === "interrupt") return "Agent interrupt requested";
   return "Agent reconnect requested";
 }
 
@@ -2179,6 +2182,7 @@ function agentControlActionCompletedTitle(action: AgentControlAction): string {
   if (action === "shutdown") return "Agent shut down";
   if (action === "compact") return "Agent compacted";
   if (action === "clearContext") return "Agent context cleared";
+  if (action === "interrupt") return "Agent interrupted";
   return "Agent reconnected";
 }
 
@@ -2187,6 +2191,7 @@ function agentControlActionIcon(action: AgentControlAction): string {
   if (action === "compact") return "ti-compress";
   if (action === "clearContext") return "ti-eraser";
   if (action === "resume") return "ti-player-play";
+  if (action === "interrupt") return "ti-player-stop";
   return "ti-refresh";
 }
 
@@ -2200,6 +2205,9 @@ function agentIsControlEligible(agent: AgentCard): boolean {
 function agentCanReceiveControlAction(agent: AgentCard, action: AgentControlAction): boolean {
   if (!agentIsControlEligible(agent)) return false;
   if (action === "resume") return agentRuntimeProvider(agent) === "claude" && (agent.status === "offline" || agent.status === "stale");
+  // Interrupt only makes sense while the provider is mid-turn, and only if the
+  // provider advertises it can be interrupted from the dashboard.
+  if (action === "interrupt") return agent.providerCapabilities?.liveSession?.interrupt === true && agent.status === "busy";
   const lifecycle = agent.providerCapabilities?.lifecycle;
   if (lifecycle) {
     if (action === "restart") return lifecycle.restartHard === true;