agent-relay-server 0.12.1 → 0.12.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agent-relay-server",
-  "version": "0.12.1",
+  "version": "0.12.3",
   "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$/, "");
@@ -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",
@@ -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",
@@ -125313,7 +125383,7 @@ function ActivityTrace({ steps }) {
 					/* @__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"
+						children: expanded || steps.length > 1 ? "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",
@@ -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;
   }
@@ -158413,6 +158505,10 @@ if ("serviceWorker" in navigator) {
     cursor: pointer;
   }
 
+  .cursor-zoom-in {
+    cursor: zoom-in;
+  }
+
   .touch-none {
     touch-action: none;
   }
@@ -159779,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);
   }
@@ -160269,6 +160375,10 @@ if ("serviceWorker" in navigator) {
     white-space: pre-wrap;
   }
 
+  .text-accent-foreground {
+    color: var(--accent-foreground);
+  }
+
   .text-amber-50\/55 {
     color: #fffbeb8c;
   }
@@ -160551,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;
   }
@@ -161201,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;
     }
@@ -161247,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);
     }
@@ -163214,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);