@robota-sdk/agent-web-ui 3.0.0-beta.64

package/dist/browser/index.js

@@ -0,0 +1,648 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/client/ws-session-client.ts
+const RECONNECT_DELAY_MS = 2e3;
+const MAX_RECONNECT_ATTEMPTS = 10;
+function createWsSessionClient(url, callbacks) {
+	let ws = null;
+	let currentStatus = "disconnected";
+	let reconnectTimer = null;
+	let reconnectAttempts = 0;
+	let intentionalDisconnect = false;
+	function setStatus(s) {
+		currentStatus = s;
+		callbacks.onStatusChange(s);
+	}
+	function scheduleReconnect() {
+		if (intentionalDisconnect || reconnectAttempts >= MAX_RECONNECT_ATTEMPTS) return;
+		reconnectTimer = setTimeout(() => {
+			reconnectAttempts++;
+			doConnect();
+		}, RECONNECT_DELAY_MS);
+	}
+	function doConnect() {
+		setStatus("connecting");
+		ws = new WebSocket(url);
+		ws.onopen = () => {
+			reconnectAttempts = 0;
+			setStatus("connected");
+			send({ type: "get-messages" });
+		};
+		ws.onmessage = (event) => {
+			const data = event.data;
+			if (typeof data !== "string") return;
+			const msg = JSON.parse(data);
+			callbacks.onMessage(msg);
+		};
+		ws.onclose = () => {
+			ws = null;
+			if (!intentionalDisconnect) {
+				setStatus("disconnected");
+				scheduleReconnect();
+			} else setStatus("disconnected");
+		};
+		ws.onerror = () => {
+			setStatus("error");
+		};
+	}
+	function connect() {
+		intentionalDisconnect = false;
+		if (reconnectTimer !== null) {
+			clearTimeout(reconnectTimer);
+			reconnectTimer = null;
+		}
+		doConnect();
+	}
+	function disconnect() {
+		intentionalDisconnect = true;
+		if (reconnectTimer !== null) {
+			clearTimeout(reconnectTimer);
+			reconnectTimer = null;
+		}
+		ws?.close();
+		ws = null;
+		setStatus("disconnected");
+	}
+	function send(msg) {
+		if (ws?.readyState === WebSocket.OPEN) ws.send(JSON.stringify(msg));
+	}
+	return {
+		connect,
+		disconnect,
+		send,
+		status: () => currentStatus
+	};
+}
+//#endregion
+//#region src/hooks/useWsSession.ts
+/**
+* React hook that connects to an agent-cli sidecar WebSocket and
+* reconstructs conversation state from TServerMessage events.
+*/
+let msgCounter = 0;
+function nextId() {
+	return `msg_${++msgCounter}_${Date.now()}`;
+}
+function useWsSession(url) {
+	const [status, setStatus] = useState("disconnected");
+	const [messages, setMessages] = useState([]);
+	const [activeTools, setActiveTools] = useState([]);
+	const [streamingText, setStreamingText] = useState("");
+	const [isThinking, setIsThinking] = useState(false);
+	const [executionWorkspace, setExecutionWorkspace] = useState(null);
+	const clientRef = useRef(null);
+	const streamingIdRef = useRef(null);
+	const streamingTextRef = useRef("");
+	const handleMessage = useCallback((msg) => {
+		switch (msg.type) {
+			case "messages":
+				setMessages(msg.messages.flatMap((m) => {
+					if (m.role !== "user" && m.role !== "assistant") return [];
+					const content = m.content ?? "";
+					return [{
+						id: nextId(),
+						role: m.role,
+						content
+					}];
+				}));
+				break;
+			case "user_message":
+				setMessages((prev) => [...prev, {
+					id: nextId(),
+					role: "user",
+					content: msg.content
+				}]);
+				break;
+			case "text_delta":
+				setStreamingText((prev) => {
+					const next = prev + msg.delta;
+					streamingTextRef.current = next;
+					if (streamingIdRef.current === null) streamingIdRef.current = nextId();
+					return next;
+				});
+				break;
+			case "thinking":
+				setIsThinking(msg.isThinking);
+				break;
+			case "tool_start": {
+				const { state } = msg;
+				const toolId = nextId();
+				setActiveTools((prev) => [...prev, {
+					id: toolId,
+					name: state.toolName,
+					status: "running",
+					input: state.firstArg
+				}]);
+				break;
+			}
+			case "tool_end": {
+				const { state } = msg;
+				setActiveTools((prev) => prev.map((t) => t.name === state.toolName && t.status === "running" ? {
+					...t,
+					status: state.isRunning ? "running" : "done",
+					result: state.result
+				} : t));
+				break;
+			}
+			case "execution_workspace_event":
+				setExecutionWorkspace(msg.snapshot);
+				break;
+			case "complete":
+			case "interrupted": {
+				const finalText = streamingTextRef.current;
+				const sid = streamingIdRef.current;
+				streamingTextRef.current = "";
+				streamingIdRef.current = null;
+				setStreamingText("");
+				setIsThinking(false);
+				setActiveTools([]);
+				if (finalText) setMessages((prev) => [...prev, {
+					id: sid ?? nextId(),
+					role: "assistant",
+					content: finalText
+				}]);
+				break;
+			}
+		}
+	}, []);
+	const send = useCallback((msg) => {
+		clientRef.current?.send(msg);
+	}, []);
+	useEffect(() => {
+		const client = createWsSessionClient(url, {
+			onMessage: handleMessage,
+			onStatusChange: setStatus
+		});
+		clientRef.current = client;
+		client.connect();
+		return () => {
+			client.disconnect();
+			clientRef.current = null;
+		};
+	}, [url, handleMessage]);
+	return {
+		status,
+		messages,
+		activeTools,
+		streamingText,
+		isThinking,
+		executionWorkspace,
+		send
+	};
+}
+//#endregion
+//#region src/components/ConversationView.tsx
+function AgentMarkdown({ children }) {
+	return /* @__PURE__ */ jsx(ReactMarkdown, {
+		remarkPlugins: [remarkGfm],
+		components: {
+			h1: ({ children: c }) => /* @__PURE__ */ jsx("h1", {
+				className: "text-base font-bold mt-4 mb-2 text-foreground border-b border-border/50 pb-1.5",
+				children: c
+			}),
+			h2: ({ children: c }) => /* @__PURE__ */ jsx("h2", {
+				className: "text-sm font-semibold mt-3 mb-1.5 text-foreground",
+				children: c
+			}),
+			h3: ({ children: c }) => /* @__PURE__ */ jsx("h3", {
+				className: "text-sm font-medium mt-2 mb-1 text-muted-foreground",
+				children: c
+			}),
+			p: ({ children: c }) => /* @__PURE__ */ jsx("p", {
+				className: "mb-2 last:mb-0 leading-relaxed text-sm",
+				children: c
+			}),
+			pre: ({ children: c }) => /* @__PURE__ */ jsx("pre", {
+				className: "bg-black/30 border border-border/40 rounded-lg p-3 my-2 overflow-x-auto text-xs font-mono leading-relaxed",
+				children: c
+			}),
+			code: ({ className, children: c }) => {
+				return Boolean(className) ? /* @__PURE__ */ jsx("code", {
+					className: `font-mono leading-relaxed ${className ?? ""}`,
+					children: c
+				}) : /* @__PURE__ */ jsx("code", {
+					className: "font-mono text-[11px] bg-black/25 px-1.5 py-0.5 rounded text-amber-300/80 border border-border/30",
+					children: c
+				});
+			},
+			ul: ({ children: c }) => /* @__PURE__ */ jsx("ul", {
+				className: "list-disc list-outside ml-4 mb-2 space-y-0.5 text-sm",
+				children: c
+			}),
+			ol: ({ children: c }) => /* @__PURE__ */ jsx("ol", {
+				className: "list-decimal list-outside ml-4 mb-2 space-y-0.5 text-sm",
+				children: c
+			}),
+			li: ({ children: c }) => /* @__PURE__ */ jsx("li", {
+				className: "leading-relaxed",
+				children: c
+			}),
+			strong: ({ children: c }) => /* @__PURE__ */ jsx("strong", {
+				className: "font-semibold text-foreground",
+				children: c
+			}),
+			em: ({ children: c }) => /* @__PURE__ */ jsx("em", {
+				className: "italic text-muted-foreground/80",
+				children: c
+			}),
+			a: ({ href, children: c }) => /* @__PURE__ */ jsx("a", {
+				href,
+				className: "text-primary underline underline-offset-2 hover:opacity-75 transition-opacity",
+				target: "_blank",
+				rel: "noopener noreferrer",
+				children: c
+			}),
+			table: ({ children: c }) => /* @__PURE__ */ jsx("div", {
+				className: "overflow-x-auto my-2 rounded-lg border border-border/50",
+				children: /* @__PURE__ */ jsx("table", {
+					className: "w-full text-xs border-collapse",
+					children: c
+				})
+			}),
+			thead: ({ children: c }) => /* @__PURE__ */ jsx("thead", {
+				className: "bg-muted/40",
+				children: c
+			}),
+			th: ({ children: c }) => /* @__PURE__ */ jsx("th", {
+				className: "px-3 py-2 text-left font-medium text-muted-foreground border-b border-border/50 text-[11px] tracking-wide",
+				children: c
+			}),
+			td: ({ children: c }) => /* @__PURE__ */ jsx("td", {
+				className: "px-3 py-2 border-b border-border/30 text-xs last-of-type:border-0",
+				children: c
+			}),
+			blockquote: ({ children: c }) => /* @__PURE__ */ jsx("blockquote", {
+				className: "border-l-2 border-primary/40 pl-3 my-2 text-muted-foreground text-sm italic",
+				children: c
+			}),
+			hr: () => /* @__PURE__ */ jsx("hr", { className: "border-border/50 my-3" })
+		},
+		children
+	});
+}
+function UserBlock({ content }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-1",
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "text-[10px] font-mono tracking-[0.14em] uppercase text-primary/50 px-1",
+			children: "You"
+		}), /* @__PURE__ */ jsx("div", {
+			className: "rounded-xl border border-primary/20 bg-primary/8 px-4 py-3 text-sm leading-relaxed text-foreground",
+			children: content
+		})]
+	});
+}
+function AgentBlock({ content, isStreaming = false }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-1",
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "text-[10px] font-mono tracking-[0.14em] uppercase text-muted-foreground/50 px-1",
+			children: "Agent"
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "rounded-xl border border-border/60 bg-card px-4 py-3 text-card-foreground",
+			children: [/* @__PURE__ */ jsx(AgentMarkdown, { children: content }), isStreaming && /* @__PURE__ */ jsx("span", { className: "inline-block w-[2px] h-[14px] bg-primary/60 ml-0.5 align-middle animate-pulse" })]
+		})]
+	});
+}
+function ToolCard({ tool }) {
+	const running = tool.status === "running";
+	return /* @__PURE__ */ jsxs("div", {
+		className: `flex items-center gap-2.5 rounded-lg border px-3.5 py-2 text-[11px] font-mono transition-colors ${running ? "bg-amber-500/5 border-amber-500/20 text-amber-300/80" : "bg-emerald-500/5 border-emerald-500/20 text-emerald-300/80"}`,
+		children: [
+			/* @__PURE__ */ jsx("span", { className: `h-1.5 w-1.5 rounded-full flex-shrink-0 ${running ? "bg-amber-400 animate-pulse" : "bg-emerald-400"}` }),
+			/* @__PURE__ */ jsx("span", {
+				className: "opacity-50",
+				children: running ? "▶" : "✓"
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "font-medium tracking-wide",
+				children: tool.name
+			}),
+			typeof tool.input === "string" && tool.input && /* @__PURE__ */ jsx("span", {
+				className: "opacity-35 truncate max-w-[200px] text-[10px]",
+				children: tool.input
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "ml-auto opacity-35 text-[10px]",
+				children: running ? "running…" : "done"
+			})
+		]
+	});
+}
+function ThinkingIndicator() {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center gap-2.5 px-1",
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "text-[10px] font-mono tracking-[0.14em] uppercase text-muted-foreground/50",
+			children: "Agent"
+		}), /* @__PURE__ */ jsx("div", {
+			className: "flex gap-1 items-center",
+			children: [
+				0,
+				1,
+				2
+			].map((i) => /* @__PURE__ */ jsx("span", {
+				className: "w-1.5 h-1.5 rounded-full bg-emerald-400/60 animate-bounce",
+				style: { animationDelay: `${i * 150}ms` }
+			}, i))
+		})]
+	});
+}
+function ConversationView({ messages, activeTools, streamingText, isThinking }) {
+	const bottomRef = useRef(null);
+	useEffect(() => {
+		bottomRef.current?.scrollIntoView({ behavior: "smooth" });
+	}, [
+		messages.length,
+		streamingText,
+		isThinking,
+		activeTools.length
+	]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-3 p-4 overflow-y-auto h-full",
+		children: [
+			messages.length === 0 && !isThinking && activeTools.length === 0 && !streamingText && /* @__PURE__ */ jsx("div", {
+				className: "flex h-full items-center justify-center",
+				children: /* @__PURE__ */ jsx("p", {
+					className: "text-xs font-mono text-muted-foreground/50 tracking-widest uppercase",
+					children: "No messages yet"
+				})
+			}),
+			messages.map((msg) => msg.role === "user" ? /* @__PURE__ */ jsx(UserBlock, { content: msg.content }, msg.id) : /* @__PURE__ */ jsx(AgentBlock, { content: msg.content }, msg.id)),
+			isThinking && !streamingText && /* @__PURE__ */ jsx(ThinkingIndicator, {}),
+			activeTools.map((tool) => /* @__PURE__ */ jsx(ToolCard, { tool }, tool.id)),
+			streamingText && /* @__PURE__ */ jsx(AgentBlock, {
+				content: streamingText,
+				isStreaming: true
+			}),
+			/* @__PURE__ */ jsx("div", { ref: bottomRef })
+		]
+	});
+}
+//#endregion
+//#region src/components/AgentActivityPanel.tsx
+function AgentActivityPanel({ tasks, className }) {
+	const runningCount = tasks.filter((t) => t.status === "running").length;
+	return /* @__PURE__ */ jsxs("div", {
+		className: `flex flex-col overflow-hidden bg-card/10 ${className ?? ""}`,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "px-3 py-2 border-b border-border/50 flex items-center gap-2 flex-shrink-0",
+			children: [
+				runningCount > 0 ? /* @__PURE__ */ jsxs("span", {
+					className: "relative flex h-1.5 w-1.5 flex-shrink-0",
+					children: [/* @__PURE__ */ jsx("span", { className: "animate-ping absolute inline-flex h-full w-full rounded-full bg-amber-400 opacity-60" }), /* @__PURE__ */ jsx("span", { className: "relative inline-flex h-1.5 w-1.5 rounded-full bg-amber-500" })]
+				}) : /* @__PURE__ */ jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-zinc-600 flex-shrink-0" }),
+				/* @__PURE__ */ jsx("span", {
+					className: "text-[10px] font-mono font-semibold tracking-[0.14em] uppercase text-muted-foreground",
+					children: "Agents"
+				}),
+				runningCount > 0 && /* @__PURE__ */ jsxs("span", {
+					className: "ml-auto text-[10px] font-mono text-amber-400/70 tabular-nums",
+					children: [runningCount, " running"]
+				})
+			]
+		}), /* @__PURE__ */ jsx("div", {
+			className: "flex-1 overflow-y-auto px-2 py-2 space-y-1.5",
+			children: tasks.map((entry) => /* @__PURE__ */ jsx(AgentCard, { entry }, entry.id))
+		})]
+	});
+}
+function AgentCard({ entry }) {
+	const tokens = getStatusTokens(entry.status, entry.attention);
+	return /* @__PURE__ */ jsxs("div", {
+		className: `relative rounded-md overflow-hidden border transition-opacity duration-500 ${tokens.cardCls} ${entry.status === "completed" ? "opacity-40" : ""}`,
+		children: [/* @__PURE__ */ jsx("div", { className: `absolute left-0 top-0 bottom-0 w-0.5 ${tokens.barCls}` }), /* @__PURE__ */ jsxs("div", {
+			className: "pl-3.5 pr-3 py-2",
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-2",
+					children: [
+						/* @__PURE__ */ jsx(StatusDot, {
+							status: entry.status,
+							attention: entry.attention
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: "text-[11px] font-mono font-medium text-foreground/90 truncate flex-1 leading-none",
+							children: entry.title
+						}),
+						/* @__PURE__ */ jsx(AttentionTag, {
+							attention: entry.attention,
+							status: entry.status
+						})
+					]
+				}),
+				entry.currentAction && /* @__PURE__ */ jsx("p", {
+					className: "text-[10px] text-foreground/50 leading-snug mt-1.5 truncate",
+					children: entry.currentAction
+				}),
+				entry.preview && /* @__PURE__ */ jsxs("p", {
+					className: "text-[10px] font-mono text-muted-foreground/40 leading-snug mt-0.5 truncate",
+					children: [
+						"“",
+						entry.preview,
+						"”"
+					]
+				})
+			]
+		})]
+	});
+}
+function StatusDot({ status, attention }) {
+	if (attention === "permission" || status === "waiting_permission") return /* @__PURE__ */ jsxs("span", {
+		className: "relative flex h-1.5 w-1.5 flex-shrink-0",
+		children: [/* @__PURE__ */ jsx("span", { className: "animate-ping absolute inline-flex h-full w-full rounded-full bg-rose-400 opacity-70" }), /* @__PURE__ */ jsx("span", { className: "relative inline-flex h-1.5 w-1.5 rounded-full bg-rose-500" })]
+	});
+	if (attention === "failed" || status === "failed") return /* @__PURE__ */ jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-rose-500 flex-shrink-0" });
+	if (status === "running") return /* @__PURE__ */ jsxs("span", {
+		className: "relative flex h-1.5 w-1.5 flex-shrink-0",
+		children: [/* @__PURE__ */ jsx("span", { className: "animate-ping absolute inline-flex h-full w-full rounded-full bg-amber-400 opacity-55" }), /* @__PURE__ */ jsx("span", { className: "relative inline-flex h-1.5 w-1.5 rounded-full bg-amber-400" })]
+	});
+	if (status === "completed") return /* @__PURE__ */ jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-emerald-400/60 flex-shrink-0" });
+	return /* @__PURE__ */ jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-zinc-600 flex-shrink-0" });
+}
+function AttentionTag({ attention, status }) {
+	if (attention === "permission" || status === "waiting_permission") return /* @__PURE__ */ jsx("span", {
+		className: "text-[9px] font-mono text-rose-400 bg-rose-500/10 border border-rose-500/25 px-1.5 py-px rounded flex-shrink-0",
+		children: "perm"
+	});
+	if (attention === "failed" || status === "failed") return /* @__PURE__ */ jsx("span", {
+		className: "text-[9px] font-mono text-rose-400 bg-rose-500/10 border border-rose-500/25 px-1.5 py-px rounded flex-shrink-0",
+		children: "err"
+	});
+	if (status === "completed") return /* @__PURE__ */ jsx("span", {
+		className: "text-[9px] font-mono text-emerald-400/50 flex-shrink-0",
+		children: "done"
+	});
+	if (status === "queued") return /* @__PURE__ */ jsx("span", {
+		className: "text-[9px] font-mono text-zinc-500 flex-shrink-0",
+		children: "queued"
+	});
+	return null;
+}
+function getStatusTokens(status, attention) {
+	if (attention === "permission" || status === "waiting_permission") return {
+		cardCls: "border-rose-500/40 bg-rose-950/10",
+		barCls: "bg-rose-400"
+	};
+	if (attention === "failed" || status === "failed") return {
+		cardCls: "border-rose-500/30 bg-rose-950/15",
+		barCls: "bg-rose-500"
+	};
+	if (status === "running") return {
+		cardCls: "border-amber-500/20 bg-card/30",
+		barCls: "bg-amber-400"
+	};
+	if (status === "completed") return {
+		cardCls: "border-border/20 bg-card/20",
+		barCls: "bg-emerald-400/50"
+	};
+	return {
+		cardCls: "border-border/30 bg-card/25",
+		barCls: "bg-zinc-600/50"
+	};
+}
+//#endregion
+//#region src/components/SessionMonitor.tsx
+const STATUS_CONFIG = {
+	connected: {
+		label: "Connected",
+		dot: "bg-emerald-400",
+		text: "text-emerald-400",
+		glow: "shadow-[0_0_7px_1px_rgba(52,211,153,0.55)]"
+	},
+	connecting: {
+		label: "Connecting…",
+		dot: "bg-amber-400 animate-pulse",
+		text: "text-amber-400",
+		glow: ""
+	},
+	disconnected: {
+		label: "Disconnected",
+		dot: "bg-zinc-600",
+		text: "text-zinc-500",
+		glow: ""
+	},
+	error: {
+		label: "Error",
+		dot: "bg-rose-500",
+		text: "text-rose-400",
+		glow: ""
+	}
+};
+function SessionMonitor({ wsUrl, className }) {
+	const [url, setUrl] = useState(wsUrl);
+	const [inputUrl, setInputUrl] = useState(wsUrl);
+	const { status, messages, activeTools, streamingText, isThinking, executionWorkspace, send } = useWsSession(url);
+	const cfg = STATUS_CONFIG[status] ?? STATUS_CONFIG.disconnected;
+	const backgroundTasks = executionWorkspace?.entries.filter((e) => e.kind === "background_task" && e.visibility !== "collapsed") ?? [];
+	const hasAgents = backgroundTasks.length > 0;
+	return /* @__PURE__ */ jsxs("div", {
+		className: `flex flex-col h-full overflow-hidden bg-background ${className ?? ""}`,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-3 border-b border-border/50 px-4 py-2.5 bg-card/30 flex-shrink-0",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2.5",
+				children: [
+					/* @__PURE__ */ jsx("span", { className: `h-2 w-2 rounded-full flex-shrink-0 ${cfg.dot} ${cfg.glow}` }),
+					/* @__PURE__ */ jsx("span", {
+						className: "text-[11px] font-mono font-semibold tracking-[0.14em] uppercase text-foreground/70",
+						children: "CLI Monitor"
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "text-border/60 font-mono text-xs",
+						children: "·"
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: `text-[11px] font-mono ${cfg.text}`,
+						children: cfg.label
+					})
+				]
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "ml-auto flex items-center gap-2",
+				children: [/* @__PURE__ */ jsx("input", {
+					className: "h-7 rounded-lg border border-border/60 bg-background/60 px-2.5 text-[11px] font-mono text-foreground/70 placeholder:text-muted-foreground/35 focus:outline-none focus:border-primary/50 focus:ring-1 focus:ring-primary/15 w-52 transition-all",
+					value: inputUrl,
+					onChange: (e) => setInputUrl(e.target.value),
+					onKeyDown: (e) => {
+						if (e.key === "Enter") setUrl(inputUrl);
+					},
+					placeholder: "ws://localhost:7070"
+				}), /* @__PURE__ */ jsx("button", {
+					className: "h-7 rounded-lg border border-border/60 px-3 text-[11px] font-mono text-muted-foreground hover:text-foreground hover:border-primary/40 hover:bg-primary/5 transition-all",
+					onClick: () => setUrl(inputUrl),
+					children: "Connect"
+				})]
+			})]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-1 overflow-hidden",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: `flex flex-col overflow-hidden min-w-0 ${hasAgents ? "flex-[2]" : "flex-1"}`,
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "flex-1 overflow-hidden",
+					children: status === "disconnected" || status === "connecting" ? /* @__PURE__ */ jsx("div", {
+						className: "flex h-full items-center justify-center",
+						children: /* @__PURE__ */ jsxs("div", {
+							className: "flex flex-col items-center gap-3 text-center px-8",
+							children: [/* @__PURE__ */ jsx("div", {
+								className: "h-9 w-9 rounded-full border border-border/50 flex items-center justify-center",
+								children: /* @__PURE__ */ jsx("span", { className: `h-2.5 w-2.5 rounded-full ${cfg.dot}` })
+							}), /* @__PURE__ */ jsx("p", {
+								className: "text-xs font-mono text-muted-foreground max-w-[260px] leading-relaxed",
+								children: status === "connecting" ? `Connecting to ${url}…` : `Run robota to start the CLI (WS transport starts automatically).`
+							})]
+						})
+					}) : /* @__PURE__ */ jsx(ConversationView, {
+						messages,
+						activeTools,
+						streamingText,
+						isThinking
+					})
+				}), /* @__PURE__ */ jsx(SessionInput, {
+					enabled: status === "connected",
+					onSubmit: (prompt) => send({
+						type: "submit",
+						prompt
+					})
+				})]
+			}), hasAgents && /* @__PURE__ */ jsx(AgentActivityPanel, {
+				tasks: backgroundTasks,
+				className: "flex-1 border-l border-border/50"
+			})]
+		})]
+	});
+}
+function SessionInput({ enabled, onSubmit }) {
+	const [value, setValue] = useState("");
+	const handleSubmit = () => {
+		const trimmed = value.trim();
+		if (!trimmed) return;
+		onSubmit(trimmed);
+		setValue("");
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "border-t border-border/50 px-3 py-2.5 flex gap-2 items-end bg-card/20 flex-shrink-0",
+		children: [/* @__PURE__ */ jsx("textarea", {
+			className: "flex-1 resize-none rounded-xl border border-border/60 bg-background/50 px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground/35 focus:outline-none focus:border-primary/45 focus:ring-1 focus:ring-primary/15 min-h-[36px] max-h-[120px] transition-all font-[inherit] leading-relaxed",
+			rows: 1,
+			placeholder: enabled ? "Send a message…" : "Connect to send messages",
+			disabled: !enabled,
+			value,
+			onChange: (e) => setValue(e.target.value),
+			onKeyDown: (e) => {
+				if (e.key === "Enter" && !e.shiftKey) {
+					e.preventDefault();
+					handleSubmit();
+				}
+			}
+		}), /* @__PURE__ */ jsx("button", {
+			className: "h-9 rounded-xl border border-border/60 px-3.5 text-[11px] font-mono text-muted-foreground hover:text-foreground hover:border-primary/40 hover:bg-primary/5 transition-all disabled:opacity-25 disabled:cursor-not-allowed",
+			disabled: !enabled || !value.trim(),
+			onClick: handleSubmit,
+			children: "Send"
+		})]
+	});
+}
+//#endregion
+export { ConversationView, SessionMonitor, useWsSession };