agent-relay-server 0.12.0 → 0.12.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agent-relay-server",
-  "version": "0.12.0",
+  "version": "0.12.2",
   "description": "Lightweight HTTP message relay for inter-agent communication across machines",
   "module": "src/index.ts",
   "type": "module",

package/public/index.html

@@ -123798,6 +123798,68 @@ function Input({ className, type, ...props }) {
 	});
 }
 //#endregion
+//#region src/components/shared/zoomable-image.tsx
+function ImageLightbox({ src, alt, onClose }) {
+	const [zoomed, setZoomed] = (0, import_react.useState)(false);
+	(0, import_react.useEffect)(() => {
+		const prev = document.body.style.overflow;
+		document.body.style.overflow = "hidden";
+		function onKey(e) {
+			if (e.key === "Escape") onClose();
+		}
+		document.addEventListener("keydown", onKey);
+		return () => {
+			document.body.style.overflow = prev;
+			document.removeEventListener("keydown", onKey);
+		};
+	}, [onClose]);
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		className: "fixed inset-0 z-[100] flex flex-col bg-black/95",
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+			className: "flex shrink-0 items-center justify-end gap-2 p-2",
+			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
+				type: "button",
+				className: "rounded-full bg-white/10 p-2 text-white/70 hover:bg-white/20 hover:text-white",
+				onClick: () => setZoomed(!zoomed),
+				title: zoomed ? "Fit to screen" : "Actual size",
+				children: zoomed ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ZoomOut, { className: "h-4 w-4" }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ZoomIn, { className: "h-4 w-4" })
+			}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
+				type: "button",
+				className: "rounded-full bg-white/10 p-2 text-white/70 hover:bg-white/20 hover:text-white",
+				onClick: onClose,
+				title: "Close",
+				children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(X$3, { className: "h-4 w-4" })
+			})]
+		}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+			className: `min-h-0 flex-1 ${zoomed ? "overflow-auto" : "flex items-center justify-center overflow-hidden p-4"}`,
+			onClick: zoomed ? void 0 : onClose,
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", {
+				src,
+				alt,
+				className: zoomed ? "max-w-none" : "max-h-full max-w-full cursor-zoom-in object-contain",
+				onClick: (e) => {
+					e.stopPropagation();
+					setZoomed(!zoomed);
+				}
+			})
+		})]
+	});
+}
+function ZoomableImage({ src, alt = "", className, style }) {
+	const [open, setOpen] = (0, import_react.useState)(false);
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", {
+		src,
+		alt,
+		className: `${className || ""} cursor-zoom-in`,
+		style,
+		onClick: () => setOpen(true)
+	}), open && (0, import_react_dom.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ImageLightbox, {
+		src,
+		alt,
+		onClose: () => setOpen(false)
+	}), document.body)] });
+}
+//#endregion
 //#region src/components/shared/markdown-preview.tsx
 var markdownSchema = {
 	...defaultSchema,
@@ -123815,7 +123877,7 @@ function externalLinkProps(href) {
 }
 function MarkdownPreview({ content, path }) {
 	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-		className: "markdown-preview max-w-none p-4 text-sm leading-6",
+		className: "markdown-preview max-w-none overflow-hidden p-4 text-sm leading-6",
 		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Markdown, {
 			remarkPlugins: [remarkGfm],
 			rehypePlugins: [[rehypeSanitize, markdownSchema]],
@@ -123827,6 +123889,14 @@ function MarkdownPreview({ content, path }) {
 						children
 					});
 				},
+				img({ src, alt }) {
+					if (!src) return null;
+					return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ZoomableImage, {
+						src,
+						alt,
+						className: "max-w-full"
+					});
+				},
 				code({ className, children, ...props }) {
 					const match = /language-([\w-]+)/.exec(className || "");
 					const code = String(children).replace(/\n$/, "");
@@ -124030,18 +124100,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);
@@ -124183,7 +124253,7 @@ function FileContent({ orchestratorId, selectedPath, line, onReadError }) {
 			]
 		}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
 			className: "flex min-h-0 flex-1 items-center justify-center overflow-auto p-4",
-			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", {
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ZoomableImage, {
 				src: `data:${file.mediaType};base64,${file.content ?? ""}`,
 				alt: file.name,
 				className: "max-h-full max-w-full object-contain",
@@ -124375,7 +124445,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",
@@ -124404,7 +124474,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,
@@ -124462,7 +124532,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",
@@ -124479,7 +124549,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: [
@@ -124522,7 +124592,7 @@ function FileBrowser({ overlay = false }) {
 						})
 					]
 				}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-					className: `flex min-h-0 flex-col ${selectedPath ? "" : "hidden md:flex"}`,
+					className: `flex min-h-0 flex-col overflow-hidden ${selectedPath ? "" : "hidden md:flex"}`,
 					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", {
 						type: "button",
 						className: "flex items-center gap-1.5 border-b border-border px-3 py-2 text-xs text-muted-foreground hover:text-foreground md:hidden",
@@ -127481,11 +127551,12 @@ function LogViewer({ orchestratorId, session, lines = 200 }) {
 	const [logLines, setLogLines] = (0, import_react.useState)([]);
 	const [query, setQuery] = (0, import_react.useState)("");
 	const [paused, setPaused] = (0, import_react.useState)(false);
+	const [stream, setStream] = (0, import_react.useState)("provider");
 	const [error, setError] = (0, import_react.useState)(null);
 	async function load() {
 		if (paused) return;
 		try {
-			setLogLines((await apiCall("GET", `/orchestrators/${encodeURIComponent(orchestratorId)}/logs/${encodeURIComponent(session)}?lines=${lines}`)).lines || []);
+			setLogLines((await apiCall("GET", `/orchestrators/${encodeURIComponent(orchestratorId)}/logs/${encodeURIComponent(session)}?lines=${lines}${stream === "mirror" ? "&stream=mirror" : ""}`)).lines || []);
 			setError(null);
 		} catch (e) {
 			setError(e instanceof Error ? e.message : String(e));
@@ -127498,7 +127569,8 @@ function LogViewer({ orchestratorId, session, lines = 200 }) {
 	}, [
 		orchestratorId,
 		session,
-		paused
+		paused,
+		stream
 	]);
 	const visible = query ? logLines.filter((line) => line.toLowerCase().includes(query.toLowerCase())) : logLines;
 	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
@@ -127516,6 +127588,22 @@ function LogViewer({ orchestratorId, session, lines = 200 }) {
 							placeholder: "Search logs"
 						})]
 					}),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+						className: "flex rounded-md border border-border overflow-hidden",
+						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", {
+							type: "button",
+							onClick: () => setStream("provider"),
+							title: "Provider output",
+							className: cn$2("flex items-center gap-1 px-2 py-1.5 text-xs", stream === "provider" ? "bg-accent text-accent-foreground" : "text-muted-foreground hover:bg-accent/50"),
+							children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Terminal, { className: "h-3.5 w-3.5" }), " Output"]
+						}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", {
+							type: "button",
+							onClick: () => setStream("mirror"),
+							title: "Session-mirror diagnostics (clean)",
+							className: cn$2("flex items-center gap-1 px-2 py-1.5 text-xs border-l border-border", stream === "mirror" ? "bg-accent text-accent-foreground" : "text-muted-foreground hover:bg-accent/50"),
+							children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Brain, { className: "h-3.5 w-3.5" }), " Mirror"]
+						})]
+					}),
 					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, {
 						type: "button",
 						variant: "outline",
@@ -157588,6 +157676,10 @@ if ("serviceWorker" in navigator) {
     z-index: 50;
   }
 
+  .z-\[100\] {
+    z-index: 100;
+  }
+
   .col-span-2 {
     grid-column: span 2 / span 2;
   }
@@ -158311,10 +158403,6 @@ if ("serviceWorker" in navigator) {
     min-width: 980px;
   }
 
-  .min-w-full {
-    min-width: 100%;
-  }
-
   .flex-1 {
     flex: 1;
   }
@@ -158417,6 +158505,10 @@ if ("serviceWorker" in navigator) {
     cursor: pointer;
   }
 
+  .cursor-zoom-in {
+    cursor: zoom-in;
+  }
+
   .touch-none {
     touch-action: none;
   }
@@ -158457,12 +158549,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\] {
@@ -158663,10 +158755,6 @@ if ("serviceWorker" in navigator) {
     overflow: hidden;
   }
 
-  .overflow-visible {
-    overflow: visible;
-  }
-
   .overflow-x-auto {
     overflow-x: auto;
   }
@@ -159787,6 +159875,16 @@ if ("serviceWorker" in navigator) {
     }
   }
 
+  .bg-white\/10 {
+    background-color: #ffffff1a;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-white\/10 {
+      background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
+    }
+  }
+
   .bg-yellow-400 {
     background-color: var(--color-yellow-400);
   }
@@ -160061,10 +160159,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);
   }
@@ -160281,6 +160375,10 @@ if ("serviceWorker" in navigator) {
     white-space: pre-wrap;
   }
 
+  .text-accent-foreground {
+    color: var(--accent-foreground);
+  }
+
   .text-amber-50\/55 {
     color: #fffbeb8c;
   }
@@ -160563,6 +160661,16 @@ if ("serviceWorker" in navigator) {
     color: var(--color-white);
   }
 
+  .text-white\/70 {
+    color: #ffffffb3;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .text-white\/70 {
+      color: color-mix(in oklab, var(--color-white) 70%, transparent);
+    }
+  }
+
   .text-yellow-200\/80 {
     color: #fff085cc;
   }
@@ -161213,6 +161321,16 @@ if ("serviceWorker" in navigator) {
       }
     }
 
+    .hover\:bg-white\/20:hover {
+      background-color: #fff3;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .hover\:bg-white\/20:hover {
+        background-color: color-mix(in oklab, var(--color-white) 20%, transparent);
+      }
+    }
+
     .hover\:bg-zinc-800\/50:hover {
       background-color: #27272a80;
     }
@@ -161259,6 +161377,10 @@ if ("serviceWorker" in navigator) {
       color: var(--color-violet-300);
     }
 
+    .hover\:text-white:hover {
+      color: var(--color-white);
+    }
+
     .hover\:text-zinc-100:hover {
       color: var(--color-zinc-100);
     }
@@ -161793,6 +161915,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;
     }
@@ -161801,6 +161927,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;
     }
@@ -161885,6 +162019,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;
@@ -161895,6 +162038,10 @@ if ("serviceWorker" in navigator) {
       border-bottom-width: 0;
     }
 
+    .md\:border-border {
+      border-color: var(--border);
+    }
+
     .md\:p-6 {
       padding: calc(var(--spacing) * 6);
     }
@@ -163201,6 +163348,11 @@ if ("serviceWorker" in navigator) {
   font-size: .85em;
 }
 
+.markdown-preview img {
+  max-width: 100%;
+  height: auto;
+}
+
 .markdown-preview pre {
   border: 1px solid var(--border);
   background: var(--muted);