Add Jupyter workspace runtime

2026-05-12 21:27:43 +08:00
parent 126f35ae46
commit 295d5d1ea1
7 changed files with 1207 additions and 5 deletions
@@ -0,0 +1,83 @@
+import { getCurrentAccount } from "@/lib/claw-auth";
+
+const CLAW_API_URL = process.env.CLAW_API_URL ?? "http://127.0.0.1:8765";
+
+type JupyterBindPayload = {
+	session_id?: string;
+	base_url?: string;
+	password?: string;
+	workspace_root?: string;
+};
+
+export async function GET(req: Request) {
+	const account = await getCurrentAccount();
+	if (!account)
+		return Response.json({ error: "请先登录账号" }, { status: 401 });
+
+	const url = new URL(req.url);
+	const sessionId = url.searchParams.get("session_id");
+	if (!sessionId)
+		return Response.json({ error: "缺少 session_id" }, { status: 400 });
+
+	try {
+		const target = new URL(`${CLAW_API_URL}/api/jupyter/session`);
+		target.searchParams.set("account_id", account.id);
+		target.searchParams.set("session_id", sessionId);
+		const response = await fetch(target, { cache: "no-store" });
+		const body = await response.text();
+		return new Response(body, {
+			status: response.status,
+			headers: {
+				"content-type":
+					response.headers.get("content-type") ?? "application/json",
+			},
+		});
+	} catch (err) {
+		return Response.json(
+			{
+				error:
+					err instanceof Error
+						? `Unable to reach Claw backend: ${err.message}`
+						: "Unable to reach Claw backend",
+			},
+			{ status: 502 },
+		);
+	}
+}
+
+export async function POST(req: Request) {
+	const account = await getCurrentAccount();
+	if (!account)
+		return Response.json({ error: "请先登录账号" }, { status: 401 });
+
+	const payload = (await req.json()) as JupyterBindPayload;
+	try {
+		const response = await fetch(`${CLAW_API_URL}/api/jupyter/bind-session`, {
+			method: "POST",
+			headers: { "content-type": "application/json" },
+			body: JSON.stringify({
+				...payload,
+				account_id: account.id,
+			}),
+			cache: "no-store",
+		});
+		const body = await response.text();
+		return new Response(body, {
+			status: response.status,
+			headers: {
+				"content-type":
+					response.headers.get("content-type") ?? "application/json",
+			},
+		});
+	} catch (err) {
+		return Response.json(
+			{
+				error:
+					err instanceof Error
+						? `Unable to reach Claw backend: ${err.message}`
+						: "Unable to reach Claw backend",
+			},
+			{ status: 502 },
+		);
+	}
+}
@@ -33,7 +33,14 @@ import {
 } from "lucide-react";
 import { Popover as PopoverPrimitive } from "radix-ui";
 import type { ComponentProps, FC, KeyboardEvent, ReactNode } from "react";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import {
+	useCallback,
+	useEffect,
+	useId,
+	useMemo,
+	useRef,
+	useState,
+} from "react";
 import TextareaAutosize from "react-textarea-autosize";
 import { useActivityPanel } from "@/components/assistant-ui/activity-panel";
 import {
@@ -53,10 +60,13 @@ import { Button } from "@/components/ui/button";
 import {
 	Dialog,
 	DialogContent,
+	DialogDescription,
+	DialogFooter,
 	DialogHeader,
 	DialogTitle,
 	DialogTrigger,
 } from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
 import {
 	Tooltip,
 	TooltipContent,
@@ -279,9 +289,13 @@ async function cancelLatestRun(sessionId: string, runId?: string | null) {

 const ChatTopActions: FC = () => {
 	const { openFiles } = useActivityPanel();
+	const [workspaceOpen, setWorkspaceOpen] = useState(false);
 	const latestSessionId = useAuiState((s) =>
 		findLatestMessageMetadataValue(s.thread.messages, "sessionId"),
 	);
+	const normalizedSessionId = normalizeSessionId(
+		typeof latestSessionId === "string" ? latestSessionId : null,
+	);

 	return (
 		<div className="pointer-events-none sticky top-3 z-20 mr-4 flex justify-end">
@@ -316,13 +330,194 @@ const ChatTopActions: FC = () => {
 							<FileTextIcon className="size-4 text-muted-foreground" />
 							聊天中的文件
 						</button>
+						<button
+							type="button"
+							className="flex w-full items-center gap-2 rounded-lg px-3 py-2 text-left text-sm transition-colors hover:bg-muted"
+							onClick={() => setWorkspaceOpen(true)}
+						>
+							<WrenchIcon className="size-4 text-muted-foreground" />
+							切换工作区
+						</button>
 					</PopoverPrimitive.Content>
 				</PopoverPrimitive.Portal>
 			</PopoverPrimitive.Root>
+			<WorkspaceSwitchDialog
+				open={workspaceOpen}
+				onOpenChange={setWorkspaceOpen}
+				sessionId={normalizedSessionId}
+			/>
 		</div>
 	);
 };

+type JupyterWorkspaceStatus = {
+	connected?: boolean;
+	session_id?: string;
+	workspace_cwd?: string;
+	jupyter_tree_url?: string;
+	detail?: string;
+	error?: string;
+};
+
+function WorkspaceSwitchDialog({
+	open,
+	onOpenChange,
+	sessionId,
+}: {
+	open: boolean;
+	onOpenChange: (open: boolean) => void;
+	sessionId: string | null;
+}) {
+	const [jupyterUrl, setJupyterUrl] = useState("");
+	const [password, setPassword] = useState("");
+	const [workspaceRoot, setWorkspaceRoot] = useState(
+		"/root/zk_agent_workspaces",
+	);
+	const [status, setStatus] = useState<JupyterWorkspaceStatus | null>(null);
+	const [submitting, setSubmitting] = useState(false);
+	const [message, setMessage] = useState("");
+	const fieldId = useId();
+	const effectiveSessionId =
+		sessionId ??
+		(typeof window !== "undefined"
+			? normalizeSessionId(readActiveSessionId())
+			: null);
+
+	useEffect(() => {
+		if (!open || !effectiveSessionId) return;
+		const sessionIdForRequest = effectiveSessionId;
+		let cancelled = false;
+		async function refreshStatus() {
+			const response = await fetch(
+				`/api/claw/jupyter?session_id=${encodeURIComponent(sessionIdForRequest)}`,
+				{ cache: "no-store" },
+			);
+			const payload = (await response.json().catch(() => ({}))) as
+				| JupyterWorkspaceStatus
+				| Record<string, never>;
+			if (!cancelled) setStatus(payload as JupyterWorkspaceStatus);
+		}
+		void refreshStatus().catch(() => undefined);
+		return () => {
+			cancelled = true;
+		};
+	}, [open, effectiveSessionId]);
+
+	async function submit() {
+		setMessage("");
+		if (!effectiveSessionId) {
+			setMessage("请先发送一条消息创建 session，再切换工作区。");
+			return;
+		}
+		if (!jupyterUrl.trim() || !password) {
+			setMessage("请填写 Jupyter 地址和密码。");
+			return;
+		}
+		setSubmitting(true);
+		try {
+			const response = await fetch("/api/claw/jupyter", {
+				method: "POST",
+				headers: { "content-type": "application/json" },
+				body: JSON.stringify({
+					session_id: effectiveSessionId,
+					base_url: jupyterUrl.trim(),
+					password,
+					workspace_root: workspaceRoot.trim() || "/root/zk_agent_workspaces",
+				}),
+			});
+			const payload = (await response.json().catch(() => ({}))) as
+				| JupyterWorkspaceStatus
+				| { detail?: string; error?: string };
+			if (!response.ok) {
+				setMessage(payload.detail ?? payload.error ?? "切换工作区失败");
+				return;
+			}
+			setStatus(payload as JupyterWorkspaceStatus);
+			setMessage("工作区切换成功，后续工具会在远端 Jupyter 工作区执行。");
+			setPassword("");
+		} finally {
+			setSubmitting(false);
+		}
+	}
+
+	return (
+		<Dialog open={open} onOpenChange={onOpenChange}>
+			<DialogContent className="pointer-events-auto sm:max-w-xl">
+				<DialogHeader>
+					<DialogTitle>切换工作区</DialogTitle>
+					<DialogDescription>
+						把当前 session 的工具执行切换到远端 Jupyter 开发机。
+					</DialogDescription>
+				</DialogHeader>
+				<div className="grid gap-4 text-sm">
+					{status?.connected ? (
+						<div className="rounded-md border bg-muted/40 p-3 text-muted-foreground">
+							<div className="font-medium text-foreground">当前已连接</div>
+							<div className="mt-1 break-all">
+								工作目录：{status.workspace_cwd}
+							</div>
+							{status.jupyter_tree_url ? (
+								<a
+									className="mt-1 block break-all text-primary underline-offset-4 hover:underline"
+									href={status.jupyter_tree_url}
+									target="_blank"
+									rel="noreferrer"
+								>
+									打开 Jupyter 工作区
+								</a>
+							) : null}
+						</div>
+					) : null}
+					<label className="grid gap-1.5" htmlFor={`${fieldId}-url`}>
+						<span className="text-muted-foreground">Jupyter 地址</span>
+						<Input
+							id={`${fieldId}-url`}
+							value={jupyterUrl}
+							onChange={(event) => setJupyterUrl(event.target.value)}
+							placeholder="https://...-jupyter.../lab"
+						/>
+					</label>
+					<label className="grid gap-1.5" htmlFor={`${fieldId}-password`}>
+						<span className="text-muted-foreground">密码</span>
+						<Input
+							id={`${fieldId}-password`}
+							type="password"
+							value={password}
+							onChange={(event) => setPassword(event.target.value)}
+							placeholder="Jupyter 登录密码"
+						/>
+					</label>
+					<label className="grid gap-1.5" htmlFor={`${fieldId}-root`}>
+						<span className="text-muted-foreground">远端工作区根目录</span>
+						<Input
+							id={`${fieldId}-root`}
+							value={workspaceRoot}
+							onChange={(event) => setWorkspaceRoot(event.target.value)}
+						/>
+					</label>
+					{message ? (
+						<div className="rounded-md bg-muted px-3 py-2 text-muted-foreground">
+							{message}
+						</div>
+					) : null}
+				</div>
+				<DialogFooter>
+					<Button
+						type="button"
+						variant="outline"
+						onClick={() => onOpenChange(false)}
+					>
+						关闭
+					</Button>
+					<Button type="button" disabled={submitting} onClick={submit}>
+						{submitting ? "连接中..." : "切换"}
+					</Button>
+				</DialogFooter>
+			</DialogContent>
+		</Dialog>
+	);
+}
+
 const ThreadMessage: FC = () => {
 	const role = useAuiState((s) => s.message.role);
 	const isEditing = useAuiState((s) => s.message.composer.isEditing);