npm - agent-relay-server - Versions diffs - 0.11.9 → 0.12.0 - Mend

agent-relay-server 0.11.9 → 0.12.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (4) hide show

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "agent-relay-server",
-  "version": "0.11.9",
+  "version": "0.12.0",
   "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 CHANGED Viewed

@@ -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) {
@@ -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);
   }
@@ -158081,6 +158377,10 @@ if ("serviceWorker" in navigator) {
     rotate: 45deg;
   }
+  .rotate-90 {
+    rotate: 90deg;
+  }
   .rotate-\[-90deg\] {
     rotate: -90deg;
   }
@@ -158181,6 +158481,10 @@ if ("serviceWorker" in navigator) {
     flex-wrap: wrap;
   }
+  .items-baseline {
+    align-items: baseline;
+  }
   .items-center {
     align-items: center;
   }
@@ -160301,6 +160605,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 +161131,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);
     }
@@ -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);
     }

package/runner/src/adapter.ts CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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;