feat: 支持 acp-link 包进行 acp 通用的 remote-control (#292)

* fix: 修复超时问题 * feat: 添加 acp-link 代码 * refactor: 样式重构完成 * feat: RCS 添加 ACP 后端支持 - 新增 ACP WebSocket handler (agent 注册、EventBus 订阅) - 新增 relay handler (前端 WS → acp-link 透传 + EventBus inbound 转发) - 新增 SSE event stream 供外部消费者订阅 channel group 事件 - ACP REST 接口无鉴权 (agents、channel-groups) - WebSocket 端点保留 token 鉴权 - SPA 路由 /acp/ 指向 acp.html Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * feat: 添加 ACP 专属前端界面 - 新增 /acp/ SPA 页面 (agent 列表 + 实时交互) - Agent 列表按 channel group 分组，显示在线状态 - 通过 RCS WebSocket relay 与 agent 通信 - Vite multi-page 构建 (index.html + acp.html) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * feat: acp-link 支持 RCS relay 双向通信 - rcs-upstream 新增 messageHandler 转发非控制消息 - server.ts 新增虚拟 WS + relay client state 处理 relay ACP 消息 - newSession/loadSession 补充 mcpServers 参数 - 连接成功后显示 ACP Dashboard URL Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * refactor: 移除 FileExplorer 及文件操作相关代码 - 删除 FileExplorer 组件 - ACPMain 移除 Files tab，仅保留 Chat 和 History - client.ts 移除 listDir/readFile/onFileChanges 等方法 - types.ts 移除 FileItem/FileContent/FileChange 等类型 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * fix: 修复类型问题 * feat: RCS 后端统一 ACP/Bridge 注册逻辑 - store: EnvironmentRecord 增加 capabilities 字段、storeFindEnvironmentByMachineName 复用逻辑 - store: 新增 storeGetSessionOwners，支持未绑定 session 自动 claim - environment: registerEnvironment 支持 ACP 复用已有记录，返回 session_id - session: resolveOwnedWebSessionId 支持无 owner session 自动绑定 - acp-ws-handler: 新增 handleIdentify 支持 REST+WS 两步注册 - acp routes: /acp/relay 和 /acp/agents 支持 UUID 认证 - event-bus: 增加 error 类型 payload 日志 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * feat: acp-link 改 REST 注册 + WS identify 两步流程 - rcs-upstream: 新增 registerViaRest() 通过 POST /v1/environments/bridge 注册 - rcs-upstream: WS 连接后发送 identify 替代 register，携带 agentId - rcs-upstream: 入口链接改为 /code/?sid=${sessionId} 实现用户绑定 - server: 修复心跳跳过 relay 虚拟连接的 bug - server: maxSessions 配置传入 RCS upstream Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * feat: 前端统一 Chat 组件 + ACP 聊天界面重构 - 新增 chat/ 组件: ChatView, ChatInput, MessageBubble, ToolCallGroup, PermissionPanel, SessionSidebar, CommandMenu - ACPMain: 重构支持完整 ACP 协议交互（session/prompt/permission） - rcs-chat-adapter: 统一 bridge session SSE 适配器 - ACPClient: 增强 session 管理、permission 流程、streaming 支持 - index.css: 新增 chat 相关样式、动画、布局 - useCommands: 新增快捷命令 hook Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * refactor: 删除 /acp/ 独立页面，ACP 聊天统一到 /code/:sessionId - 删除 acp.html、acp-main.tsx 入口文件和 pages/acp/ 目录 - SessionDetail: ACP session 在同一页面渲染 ACPSessionDetail 组件 - App.tsx: ?sid= 参数自动调用 apiBind 绑定用户 UUID - Dashboard: 统一 session 列表导航，ACP 显示紫色标签 - relay-client: 改用 UUID 认证替代 API token - EnvironmentList: 显示 workerType 标签（ACP Agent / Claude Code） - index.ts: 移除 /acp/ SPA 路由，vite.config 移除 acp 入口 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * build: 更新构建及测试修复 --------- Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
2026-06-18 06:15:51 +00:00 · 2026-04-18 17:59:29 +08:00
parent 29cc74a170
commit 34154ee3f5
142 changed files with 17847 additions and 5577 deletions
--- a/packages/remote-control-server/web/src/components/ControlBar.tsx
+++ b/packages/remote-control-server/web/src/components/ControlBar.tsx
@@ -0,0 +1,85 @@
+import { useState, useRef, useEffect } from "react";
+import { cn, isClosedSessionStatus } from "../lib/utils";
+
+interface ControlBarProps {
+  sessionId: string;
+  sessionStatus: string | null;
+  activityMode: string;
+  onSend: (text: string) => Promise<void>;
+  onInterrupt: () => Promise<void>;
+}
+
+export function ControlBar({
+  sessionId,
+  sessionStatus,
+  activityMode,
+  onSend,
+  onInterrupt,
+}: ControlBarProps) {
+  const [text, setText] = useState("");
+  const inputRef = useRef<HTMLInputElement>(null);
+  const closed = isClosedSessionStatus(sessionStatus);
+  const working = activityMode === "working";
+
+  const handleSend = async () => {
+    const trimmed = text.trim();
+    if (!trimmed || closed) return;
+    setText("");
+    try {
+      await onSend(trimmed);
+    } catch {
+      setText(trimmed);
+    }
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === "Enter" && !e.shiftKey && !e.nativeEvent?.isComposing) {
+      e.preventDefault();
+      handleSend();
+    }
+  };
+
+  useEffect(() => {
+    inputRef.current?.focus();
+  }, [sessionId]);
+
+  return (
+    <div className="border-t border-border bg-surface-1 px-4 py-3">
+      <div className="mx-auto flex max-w-5xl items-center gap-2">
+        <input
+          ref={inputRef}
+          type="text"
+          value={text}
+          onChange={(e) => setText(e.target.value)}
+          onKeyDown={handleKeyDown}
+          placeholder={closed ? "Session is closed" : "Type a message..."}
+          disabled={closed}
+          className="flex-1 rounded-lg border border-border bg-surface-2 px-4 py-2.5 text-sm text-text-primary placeholder:text-text-muted focus:border-brand focus:outline-none focus:ring-1 focus:ring-brand/20 disabled:opacity-50 transition-colors"
+        />
+        <button
+          onClick={working ? onInterrupt : handleSend}
+          disabled={closed}
+          className={cn(
+            "flex h-10 w-10 items-center justify-center rounded-lg transition-colors",
+            working
+              ? "bg-status-error/20 text-status-error hover:bg-status-error/30"
+              : "bg-brand text-white hover:bg-brand-light",
+            closed && "opacity-50 cursor-not-allowed",
+          )}
+          aria-label={working ? "Stop" : "Send"}
+          title={closed ? "Session is closed" : working ? "Stop" : "Send"}
+        >
+          {working ? (
+            <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
+              <rect x="3" y="3" width="12" height="12" rx="2" fill="currentColor" />
+            </svg>
+          ) : (
+            <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+              <path d="M3 10L17 3L10 17L9 11L3 10Z" fill="currentColor" />
+            </svg>
+          )}
+        </button>
+      </div>
+    </div>
+  );
+}
--- a/packages/remote-control-server/web/src/components/EnvironmentList.tsx
+++ b/packages/remote-control-server/web/src/components/EnvironmentList.tsx
@@ -0,0 +1,56 @@
+import type { Environment } from "../types";
+import { StatusBadge } from "./Navbar";
+import { esc, formatTime } from "../lib/utils";
+
+interface EnvironmentListProps {
+  environments: Environment[];
+  onSelectEnvironment?: (env: Environment) => void;
+}
+
+export function EnvironmentList({ environments, onSelectEnvironment }: EnvironmentListProps) {
+  if (!environments || environments.length === 0) {
+    return (
+      <div className="rounded-xl border border-border bg-surface-1 p-8 text-center text-text-muted">
+        No active environments
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-2">
+      {environments.map((env) => {
+        const isAcp = env.worker_type === "acp";
+        const typeLabel = isAcp ? "ACP Agent" : "Claude Code";
+        const typeColor = isAcp ? "bg-purple-100 text-purple-700" : "bg-blue-100 text-blue-700";
+
+        return (
+          <div
+            key={env.id}
+            onClick={() => onSelectEnvironment?.(env)}
+            className={`flex items-center justify-between rounded-xl border border-border bg-surface-1 px-4 py-3 transition-colors hover:border-border-light ${onSelectEnvironment ? "cursor-pointer" : ""}`}
+          >
+            <div className="flex items-center gap-3">
+              <div>
+                <div className="flex items-center gap-2">
+                  <span className="font-medium text-text-primary">
+                    {env.machine_name || env.id}
+                  </span>
+                  <span className={`rounded-full px-2 py-0.5 text-xs font-medium ${typeColor}`}>
+                    {typeLabel}
+                  </span>
+                </div>
+                <div className="text-sm text-text-muted">{env.directory || ""}</div>
+              </div>
+            </div>
+            <div className="text-right">
+              <StatusBadge status={env.status} />
+              <div className="mt-1 text-xs text-text-muted">
+                {env.branch || ""}
+              </div>
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
--- a/packages/remote-control-server/web/src/components/EventStream.tsx
+++ b/packages/remote-control-server/web/src/components/EventStream.tsx
--- a/packages/remote-control-server/web/src/components/IdentityPanel.tsx
+++ b/packages/remote-control-server/web/src/components/IdentityPanel.tsx
@@ -0,0 +1,218 @@
+import { useState, useRef, useEffect } from "react";
+import QRCode from "qrcode";
+import QrScanner from "qr-scanner";
+import { getUuid, setUuid } from "../api/client";
+import { cn } from "../lib/utils";
+
+interface IdentityPanelProps {
+  open: boolean;
+  onClose: () => void;
+}
+
+export function IdentityPanel({ open, onClose }: IdentityPanelProps) {
+  const [copied, setCopied] = useState(false);
+  const [scanning, setScanning] = useState(false);
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const videoRef = useRef<HTMLVideoElement>(null);
+  const scannerRef = useRef<QrScanner | null>(null);
+  const uuid = getUuid();
+
+  useEffect(() => {
+    if (!open || !canvasRef.current) return;
+    const qrUrl = `${window.location.origin}/code?uuid=${encodeURIComponent(uuid)}`;
+    QRCode.toCanvas(canvasRef.current, qrUrl, {
+      width: 200,
+      margin: 1,
+      color: { dark: "#f0f0f2", light: "#141416" },
+    });
+  }, [open, uuid]);
+
+  // Cleanup scanner on close
+  useEffect(() => {
+    if (!open && scannerRef.current) {
+      scannerRef.current.stop();
+      scannerRef.current.destroy();
+      scannerRef.current = null;
+      setScanning(false);
+    }
+  }, [open]);
+
+  if (!open) return null;
+
+  const handleCopy = async () => {
+    await navigator.clipboard.writeText(uuid);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  const startCamera = async () => {
+    if (!videoRef.current) return;
+    setScanning(true);
+    try {
+      const scanner = new QrScanner(
+        videoRef.current,
+        (result) => {
+          handleScannedData(result.data);
+        },
+        { returnDetailedScanResult: true },
+      );
+      scannerRef.current = scanner;
+      await scanner.start();
+    } catch (e) {
+      console.error("Camera error:", e);
+      setScanning(false);
+    }
+  };
+
+  const stopCamera = () => {
+    if (scannerRef.current) {
+      scannerRef.current.stop();
+      scannerRef.current.destroy();
+      scannerRef.current = null;
+    }
+    setScanning(false);
+  };
+
+  const handleScannedData = (data: string) => {
+    try {
+      // Try ACP format: { url, token }
+      const parsed = JSON.parse(data);
+      if (parsed.url && parsed.token) {
+        // ACP format — extract token as UUID-like identifier
+        stopCamera();
+        onClose();
+        return;
+      }
+    } catch {
+      // Not JSON
+    }
+
+    // Try URL with uuid param
+    try {
+      const url = new URL(data);
+      const importedUuid = url.searchParams.get("uuid");
+      if (importedUuid) {
+        setUuid(importedUuid);
+        stopCamera();
+        onClose();
+        return;
+      }
+    } catch {
+      // Not a URL
+    }
+
+    // Raw UUID string
+    if (data.length >= 32) {
+      setUuid(data);
+      stopCamera();
+      onClose();
+      return;
+    }
+  };
+
+  const handleScanUpload = () => {
+    const input = document.createElement("input");
+    input.type = "file";
+    input.accept = "image/*";
+    input.onchange = async (e) => {
+      const file = (e.target as HTMLInputElement).files?.[0];
+      if (!file) return;
+      try {
+        const result = await QrScanner.scanImage(file, {
+          returnDetailedScanResult: true,
+        });
+        handleScannedData(result.data);
+      } catch {
+        alert("No QR code found in image");
+      }
+    };
+    input.click();
+  };
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50" onClick={onClose}>
+      <div
+        className="w-full max-w-sm rounded-2xl border border-border bg-surface-1 p-6 shadow-2xl"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="mb-4 flex items-center justify-between">
+          <h3 className="font-display text-lg font-semibold text-text-primary">Identity</h3>
+          <button
+            onClick={onClose}
+            className="rounded-md px-2 py-1 text-text-muted hover:bg-surface-2 hover:text-text-secondary transition-colors"
+          >
+            &times;
+          </button>
+        </div>
+
+        <div className="space-y-6">
+          {/* UUID */}
+          <div>
+            <label className="mb-1 block text-sm text-text-secondary">Your UUID</label>
+            <div className="flex items-center gap-2">
+              <code className="flex-1 truncate rounded-lg bg-surface-2 px-3 py-2 font-mono text-xs text-text-primary">
+                {uuid}
+              </code>
+              <button
+                onClick={handleCopy}
+                className="rounded-lg border border-border px-3 py-2 text-sm text-text-secondary hover:bg-surface-2 transition-colors"
+              >
+                {copied ? "Copied!" : "Copy"}
+              </button>
+            </div>
+          </div>
+
+          {/* QR Code display */}
+          {!scanning && (
+            <div>
+              <label className="mb-2 block text-sm text-text-secondary">Scan on another device</label>
+              <div className="flex justify-center">
+                <canvas ref={canvasRef} />
+              </div>
+            </div>
+          )}
+
+          {/* Camera scanner */}
+          {scanning && (
+            <div>
+              <label className="mb-2 block text-sm text-text-secondary">Camera scanner</label>
+              <div className="relative overflow-hidden rounded-lg">
+                <video ref={videoRef} className="w-full" />
+              </div>
+              <button
+                onClick={stopCamera}
+                className="mt-2 w-full rounded-lg border border-border px-4 py-2 text-sm text-text-secondary hover:bg-surface-2 transition-colors"
+              >
+                Stop scanning
+              </button>
+            </div>
+          )}
+
+          {/* Action buttons */}
+          <div className="flex gap-2">
+            <button
+              onClick={scanning ? stopCamera : startCamera}
+              className={cn(
+                "flex items-center gap-2 rounded-lg border px-4 py-2 text-sm transition-colors",
+                scanning
+                  ? "border-status-error/30 text-status-error hover:bg-status-error/10"
+                  : "border-border text-text-secondary hover:bg-surface-2",
+              )}
+            >
+              <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+                <path d="M1 1H5V3H3V5H1V1ZM11 1H15V5H13V3H11V1ZM1 11H3V13H5V15H1V11ZM13 11H15V15H11V13H13V11ZM6 6H10V10H6V6Z" fill="currentColor" />
+              </svg>
+              {scanning ? "Stop Camera" : "Scan with Camera"}
+            </button>
+            <button
+              onClick={handleScanUpload}
+              className="flex items-center gap-2 rounded-lg border border-border px-4 py-2 text-sm text-text-secondary hover:bg-surface-2 transition-colors"
+            >
+              Upload QR Image
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/packages/remote-control-server/web/src/components/LoadingIndicator.tsx
+++ b/packages/remote-control-server/web/src/components/LoadingIndicator.tsx
@@ -0,0 +1,52 @@
+import { useState, useEffect, useRef } from "react";
+
+const SPINNER_FRAMES = ["·", "✢", "✱", "✶", "✻", "✽"];
+const SPINNER_CYCLE = [...SPINNER_FRAMES, ...SPINNER_FRAMES.slice().reverse()];
+
+interface LoadingIndicatorProps {
+  verb?: string;
+  stalled?: boolean;
+}
+
+export function LoadingIndicator({ verb = "Thinking", stalled = false }: LoadingIndicatorProps) {
+  const [frame, setFrame] = useState(0);
+  const [elapsed, setElapsed] = useState(0);
+  const startTimeRef = useRef(Date.now());
+
+  // Spinner animation — 120ms per frame
+  useEffect(() => {
+    const id = setInterval(() => {
+      setFrame((f) => (f + 1) % SPINNER_CYCLE.length);
+    }, 120);
+    return () => clearInterval(id);
+  }, []);
+
+  // Timer — 1s updates
+  useEffect(() => {
+    startTimeRef.current = Date.now();
+    const id = setInterval(() => {
+      setElapsed(Math.floor((Date.now() - startTimeRef.current) / 1000));
+    }, 1000);
+    return () => clearInterval(id);
+  }, []);
+
+  return (
+    <div className="flex items-center gap-2.5 py-2">
+      <span
+        className="text-xl leading-none min-w-[1.2em] transition-colors duration-2000"
+        style={{ color: stalled ? "var(--color-status-error)" : "var(--color-brand)" }}
+      >
+        {SPINNER_CYCLE[frame]}
+      </span>
+      <span
+        className="glimmer-text text-sm font-medium transition-colors duration-2000"
+        style={stalled ? undefined : undefined}
+      >
+        {verb}…
+      </span>
+      <span className="ml-auto text-xs font-mono text-text-muted">
+        {elapsed}s
+      </span>
+    </div>
+  );
+}
--- a/packages/remote-control-server/web/src/components/Navbar.tsx
+++ b/packages/remote-control-server/web/src/components/Navbar.tsx
@@ -0,0 +1,67 @@
+import { cn } from "../lib/utils";
+
+interface NavbarProps {
+  onIdentityClick: () => void;
+}
+
+export function Navbar({ onIdentityClick }: NavbarProps) {
+  return (
+    <nav className="sticky top-0 z-40 border-b border-border bg-surface-1/80 backdrop-blur-md">
+      <div className="mx-auto flex h-14 max-w-5xl items-center justify-between px-4">
+        <a href="/code/" className="flex items-center gap-2 font-display text-lg font-semibold text-text-primary no-underline">
+          <svg width="20" height="20" viewBox="0 0 20 20" fill="none" aria-hidden="true">
+            <path
+              d="M10 1L12.2 7.8L19 10L12.2 12.2L10 19L7.8 12.2L1 10L7.8 7.8L10 1Z"
+              fill="#D97757"
+            />
+          </svg>
+          Remote Control
+        </a>
+        <div className="flex items-center gap-1">
+          <a
+            href="/code/"
+            className="rounded-md px-3 py-1.5 text-sm text-text-secondary hover:bg-surface-2 hover:text-text-primary no-underline transition-colors"
+          >
+            Dashboard
+          </a>
+          <button
+            onClick={onIdentityClick}
+            className="flex items-center gap-1 rounded-md px-3 py-1.5 text-sm text-text-secondary hover:bg-surface-2 hover:text-text-primary transition-colors"
+            title="Identity & QR"
+          >
+            <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+              <path
+                d="M6 8C7.66 8 9 6.66 9 5C9 3.34 7.66 2 6 2C4.34 2 3 3.34 3 5C3 6.66 4.34 8 6 8ZM6 10C3.99 10 0 11.01 0 13V14H12V13C12 11.01 8.01 10 6 10ZM13 8V5H11V8H8V10H11V13H13V10H16V8H13Z"
+                fill="currentColor"
+              />
+            </svg>
+            Identity
+          </button>
+        </div>
+      </div>
+    </nav>
+  );
+}
+
+export function StatusBadge({ status }: { status: string }) {
+  const colorMap: Record<string, string> = {
+    active: "bg-status-active/20 text-status-active",
+    running: "bg-status-running/20 text-status-running",
+    idle: "bg-status-idle/20 text-status-idle",
+    inactive: "bg-text-muted/20 text-text-muted",
+    requires_action: "bg-status-warning/20 text-status-warning",
+    archived: "bg-text-muted/20 text-text-muted",
+    error: "bg-status-error/20 text-status-error",
+  };
+
+  return (
+    <span
+      className={cn(
+        "inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium",
+        colorMap[status] || "bg-surface-3 text-text-secondary",
+      )}
+    >
+      {status}
+    </span>
+  );
+}
--- a/packages/remote-control-server/web/src/components/NewSessionDialog.tsx
+++ b/packages/remote-control-server/web/src/components/NewSessionDialog.tsx
@@ -0,0 +1,101 @@
+import { useState, useEffect } from "react";
+import type { Environment, Session } from "../types";
+import { apiCreateSession } from "../api/client";
+
+interface NewSessionDialogProps {
+  open: boolean;
+  environments: Environment[];
+  onClose: () => void;
+  onCreated: (session: Session) => void;
+}
+
+export function NewSessionDialog({ open, environments, onClose, onCreated }: NewSessionDialogProps) {
+  const [title, setTitle] = useState("");
+  const [envId, setEnvId] = useState("");
+  const [error, setError] = useState("");
+  const [creating, setCreating] = useState(false);
+
+  useEffect(() => {
+    if (open) {
+      setTitle("");
+      setEnvId("");
+      setError("");
+    }
+  }, [open]);
+
+  if (!open) return null;
+
+  const handleCreate = async () => {
+    setCreating(true);
+    setError("");
+    try {
+      const body: Record<string, string> = {};
+      if (title.trim()) body.title = title.trim();
+      if (envId) body.environment_id = envId;
+      const session = await apiCreateSession(body);
+      onCreated(session);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to create session");
+    } finally {
+      setCreating(false);
+    }
+  };
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50" onClick={onClose}>
+      <div
+        className="w-full max-w-md rounded-2xl border border-border bg-surface-1 p-6 shadow-2xl"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <h3 className="mb-4 font-display text-lg font-semibold text-text-primary">New Session</h3>
+
+        <div className="space-y-4">
+          <div>
+            <label className="mb-1 block text-sm text-text-secondary">Title (optional)</label>
+            <input
+              type="text"
+              value={title}
+              onChange={(e) => setTitle(e.target.value)}
+              placeholder="My session"
+              className="w-full rounded-lg border border-border bg-surface-2 px-3 py-2 text-sm text-text-primary placeholder:text-text-muted focus:border-brand focus:outline-none"
+            />
+          </div>
+
+          <div>
+            <label className="mb-1 block text-sm text-text-secondary">Environment</label>
+            <select
+              value={envId}
+              onChange={(e) => setEnvId(e.target.value)}
+              className="w-full rounded-lg border border-border bg-surface-2 px-3 py-2 text-sm text-text-primary focus:border-brand focus:outline-none"
+            >
+              <option value="">-- None --</option>
+              {environments.map((env) => (
+                <option key={env.id} value={env.id}>
+                  {env.machine_name || env.id} ({env.branch || "no branch"})
+                </option>
+              ))}
+            </select>
+          </div>
+
+          {error && <div className="text-sm text-status-error">{error}</div>}
+
+          <div className="flex justify-end gap-2 pt-2">
+            <button
+              onClick={onClose}
+              className="rounded-lg border border-border px-4 py-2 text-sm text-text-secondary hover:bg-surface-2 transition-colors"
+            >
+              Cancel
+            </button>
+            <button
+              onClick={handleCreate}
+              disabled={creating}
+              className="rounded-lg bg-brand px-4 py-2 text-sm font-medium text-white hover:bg-brand-light disabled:opacity-50 transition-colors"
+            >
+              {creating ? "Creating..." : "Create"}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/packages/remote-control-server/web/src/components/PermissionViews.tsx
+++ b/packages/remote-control-server/web/src/components/PermissionViews.tsx
@@ -0,0 +1,368 @@
+import { useState } from "react";
+import type { Question } from "../types";
+import { esc, cn, truncate } from "../lib/utils";
+
+// ============================================================
+// PermissionPromptView — simple approve/reject for tool use
+// ============================================================
+
+export function PermissionPromptView({
+  requestId,
+  toolName,
+  toolInput,
+  description,
+  onApprove,
+  onReject,
+}: {
+  requestId: string;
+  toolName: string;
+  toolInput: unknown;
+  description: string;
+  onApprove: () => void;
+  onReject: () => void;
+}) {
+  const inputStr = typeof toolInput === "string" ? toolInput : JSON.stringify(toolInput, null, 2);
+
+  return (
+    <div className="rounded-xl border border-warning-border/30 border-l-3 border-l-warning-border bg-surface-1 p-4">
+      <div className="mb-2 flex items-center gap-2">
+        <span className="flex h-5 w-5 items-center justify-center rounded-full bg-warning-border/15 text-warning-text">
+          <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
+            <path d="M6 1L11 10H1L6 1Z" fill="currentColor" />
+          </svg>
+        </span>
+        <span className="text-sm font-semibold text-warning-text">Permission Request</span>
+      </div>
+      {description && <div className="mb-2 text-sm text-text-secondary">{esc(description)}</div>}
+      <div className="mb-2 font-mono text-xs font-bold text-text-primary">{esc(toolName)}</div>
+      {toolName !== "AskUserQuestion" && (
+        <pre className="mb-3 max-h-40 overflow-auto rounded-lg bg-surface-1 p-2 text-xs text-text-secondary font-mono">
+          {truncate(inputStr, 500)}
+        </pre>
+      )}
+      <div className="flex gap-2">
+        <button
+          onClick={onApprove}
+          className="rounded-lg bg-brand px-4 py-2 text-sm font-medium text-white hover:bg-brand-light transition-colors"
+        >
+          Approve
+        </button>
+        <button
+          onClick={onReject}
+          className="rounded-lg bg-status-error/20 px-4 py-2 text-sm font-medium text-status-error hover:bg-status-error/30 transition-colors"
+        >
+          Reject
+        </button>
+      </div>
+    </div>
+  );
+}
+
+// ============================================================
+// AskUserPanelView — multi-question interactive panel
+// ============================================================
+
+export function AskUserPanelView({
+  questions,
+  description,
+  onSubmit,
+  onSkip,
+}: {
+  requestId: string;
+  questions: Question[];
+  description: string;
+  onSubmit: (answers: Record<string, unknown>) => void;
+  onSkip: () => void;
+}) {
+  const [answers, setAnswers] = useState<Record<string, unknown>>({});
+  const [otherTexts, setOtherTexts] = useState<Record<string, string>>({});
+  const [activeTab, setActiveTab] = useState(0);
+
+  const handleSelect = (qIdx: number, oIdx: number, multiSelect: boolean) => {
+    if (multiSelect) {
+      const current = (answers[qIdx] as number[]) || [];
+      const next = current.includes(oIdx) ? current.filter((i) => i !== oIdx) : [...current, oIdx];
+      setAnswers({ ...answers, [qIdx]: next });
+    } else {
+      setAnswers({ ...answers, [qIdx]: oIdx });
+    }
+  };
+
+  const handleOtherSubmit = (qIdx: number) => {
+    const text = otherTexts[qIdx]?.trim();
+    if (!text) return;
+    setAnswers({ ...answers, [qIdx]: text });
+    setOtherTexts({ ...otherTexts, [qIdx]: "" });
+  };
+
+  const handleSubmit = () => {
+    const mapped: Record<string, unknown> = {};
+    for (const [qIdx, val] of Object.entries(answers)) {
+      const q = questions[parseInt(qIdx)];
+      if (!q) continue;
+      if (typeof val === "number") mapped[qIdx] = q.options?.[val]?.label || String(val);
+      else if (Array.isArray(val)) mapped[qIdx] = val.map((i) => q.options?.[i]?.label || String(i));
+      else mapped[qIdx] = val;
+    }
+    onSubmit(mapped);
+  };
+
+  // Single question — simple layout
+  if (questions.length <= 1) {
+    const q = questions[0] || { question: description, options: [], multiSelect: false };
+    const multiSelect = q.multiSelect || false;
+
+    return (
+      <div className="rounded-xl border border-brand/30 bg-surface-1 p-4">
+        <div className="mb-3 text-sm font-semibold text-text-primary">
+          {esc(description || q.question || "Question")}
+        </div>
+        <div className="space-y-2">
+          {(q.options || []).map((opt, j) => {
+            const isSelected = multiSelect
+              ? ((answers[0] as number[]) || []).includes(j)
+              : answers[0] === j;
+            return (
+              <button
+                key={j}
+                onClick={() => handleSelect(0, j, multiSelect)}
+                className={cn(
+                  "w-full rounded-lg border px-4 py-2.5 text-left text-sm transition-colors",
+                  isSelected
+                    ? "border-brand bg-brand/10 text-text-primary"
+                    : "border-border bg-surface-2 text-text-secondary hover:border-border-light",
+                )}
+              >
+                <div className="font-medium">{esc(opt.label)}</div>
+                {opt.description && <div className="mt-0.5 text-xs text-text-muted">{esc(opt.description)}</div>}
+              </button>
+            );
+          })}
+          <div className="flex gap-2">
+            <input
+              type="text"
+              value={otherTexts[0] || ""}
+              onChange={(e) => setOtherTexts({ ...otherTexts, [0]: e.target.value })}
+              placeholder="Other..."
+              className="flex-1 rounded-lg border border-border bg-surface-2 px-3 py-2 text-sm text-text-primary placeholder:text-text-muted focus:border-brand focus:outline-none"
+              onKeyDown={(e) => e.key === "Enter" && handleOtherSubmit(0)}
+            />
+            <button onClick={() => handleOtherSubmit(0)} className="rounded-lg border border-border px-3 py-2 text-sm text-text-secondary hover:bg-surface-2 transition-colors">
+              Send
+            </button>
+          </div>
+        </div>
+        <div className="mt-4 flex gap-2">
+          <button onClick={handleSubmit} className="rounded-lg bg-brand px-4 py-2 text-sm font-medium text-white hover:bg-brand-light transition-colors">Submit</button>
+          <button onClick={onSkip} className="rounded-lg border border-border px-4 py-2 text-sm text-text-secondary hover:bg-surface-2 transition-colors">Skip</button>
+        </div>
+      </div>
+    );
+  }
+
+  // Multiple questions — tab layout
+  const currentQ = questions[activeTab];
+
+  return (
+    <div className="rounded-xl border border-brand/30 bg-surface-1 p-4">
+      <div className="mb-3 text-sm font-semibold text-text-primary">{esc(description || "Questions")}</div>
+      <div className="mb-3 flex gap-1 overflow-x-auto">
+        {questions.map((q, i) => (
+          <button
+            key={i}
+            onClick={() => setActiveTab(i)}
+            className={cn(
+              "rounded-md px-3 py-1.5 text-xs whitespace-nowrap transition-colors",
+              activeTab === i ? "bg-brand/20 text-brand" : "text-text-muted hover:bg-surface-2",
+            )}
+          >
+            {q.header || `Q${i + 1}`}
+          </button>
+        ))}
+      </div>
+
+      {currentQ && (
+        <QuestionTab
+          question={currentQ}
+          qIdx={activeTab}
+          answers={answers}
+          otherTexts={otherTexts}
+          onSelect={handleSelect}
+          onOtherTextChange={(qIdx, text) => setOtherTexts({ ...otherTexts, [qIdx]: text })}
+          onOtherSubmit={handleOtherSubmit}
+        />
+      )}
+
+      <div className="mt-4 flex items-center justify-between">
+        <span className="text-xs text-text-muted">{activeTab + 1} / {questions.length}</span>
+        <div className="flex gap-2">
+          <button onClick={handleSubmit} className="rounded-lg bg-brand px-4 py-2 text-sm font-medium text-white hover:bg-brand-light transition-colors">Submit All</button>
+          <button onClick={onSkip} className="rounded-lg border border-border px-4 py-2 text-sm text-text-secondary hover:bg-surface-2 transition-colors">Skip</button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function QuestionTab({
+  question, qIdx, answers, otherTexts, onSelect, onOtherTextChange, onOtherSubmit,
+}: {
+  question: Question;
+  qIdx: number;
+  answers: Record<string, unknown>;
+  otherTexts: Record<string, string>;
+  onSelect: (qIdx: number, oIdx: number, multiSelect: boolean) => void;
+  onOtherTextChange: (qIdx: number, text: string) => void;
+  onOtherSubmit: (qIdx: number) => void;
+}) {
+  const multiSelect = question.multiSelect || false;
+
+  return (
+    <div>
+      <div className="mb-2 text-sm text-text-secondary">{esc(question.question)}</div>
+      <div className="space-y-2">
+        {(question.options || []).map((opt, j) => {
+          const isSelected = multiSelect
+            ? ((answers[qIdx] as number[]) || []).includes(j)
+            : answers[qIdx] === j;
+          return (
+            <button
+              key={j}
+              onClick={() => onSelect(qIdx, j, multiSelect)}
+              className={cn(
+                "w-full rounded-lg border px-4 py-2.5 text-left text-sm transition-colors",
+                isSelected
+                  ? "border-brand bg-brand/10 text-text-primary"
+                  : "border-border bg-surface-2 text-text-secondary hover:border-border-light",
+              )}
+            >
+              <div className="font-medium">{esc(opt.label)}</div>
+              {opt.description && <div className="mt-0.5 text-xs text-text-muted">{esc(opt.description)}</div>}
+            </button>
+          );
+        })}
+        <div className="flex gap-2">
+          <input
+            type="text"
+            value={otherTexts[qIdx] || ""}
+            onChange={(e) => onOtherTextChange(qIdx, e.target.value)}
+            placeholder="Other..."
+            className="flex-1 rounded-lg border border-border bg-surface-2 px-3 py-2 text-sm text-text-primary placeholder:text-text-muted focus:border-brand focus:outline-none"
+            onKeyDown={(e) => e.key === "Enter" && onOtherSubmit(qIdx)}
+          />
+          <button onClick={() => onOtherSubmit(qIdx)} className="rounded-lg border border-border px-3 py-2 text-sm text-text-secondary hover:bg-surface-2 transition-colors">Send</button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// ============================================================
+// PlanPanelView — plan approval with feedback
+// ============================================================
+
+export function PlanPanelView({
+  planContent,
+  description,
+  onSubmit,
+}: {
+  requestId: string;
+  planContent: string;
+  description: string;
+  onSubmit: (value: string, feedback?: string) => void;
+}) {
+  const [selected, setSelected] = useState<string | null>(null);
+  const [feedback, setFeedback] = useState("");
+  const isEmpty = !planContent || !planContent.trim();
+
+  const handleSubmit = () => {
+    if (!selected) return;
+    onSubmit(selected, selected === "no" ? feedback : undefined);
+  };
+
+  return (
+    <div className="rounded-xl border border-brand/30 bg-surface-1 p-4">
+      <div className="mb-3 flex items-center gap-2">
+        <span className="flex h-5 w-5 items-center justify-center rounded-full bg-brand/15 text-brand">
+          <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
+            <path d="M2 6L5 9L10 3" stroke="currentColor" strokeWidth="1.5" fill="none" />
+          </svg>
+        </span>
+        <span className="text-sm font-semibold text-text-primary">
+          {isEmpty ? "Exit plan mode?" : "Ready to code?"}
+        </span>
+      </div>
+      {!isEmpty && (
+        <div
+          className="mb-4 max-h-64 overflow-auto rounded-lg bg-tool-card p-4 text-sm text-text-secondary"
+          dangerouslySetInnerHTML={{ __html: formatPlanContent(planContent) }}
+        />
+      )}
+      <div className="space-y-2">
+        {isEmpty ? (
+          <>
+            <PlanOption selected={selected === "yes-default"} onClick={() => setSelected("yes-default")} label="Yes" />
+            <PlanOption selected={selected === "no"} onClick={() => setSelected("no")} label="No" />
+          </>
+        ) : (
+          <>
+            <PlanOption selected={selected === "yes-accept-edits"} onClick={() => setSelected("yes-accept-edits")} label="Yes, auto-accept edits" desc="Approve plan and auto-accept file edits" />
+            <PlanOption selected={selected === "yes-default"} onClick={() => setSelected("yes-default")} label="Yes, manually approve edits" desc="Approve plan but confirm each edit" />
+            <PlanOption selected={selected === "no"} onClick={() => setSelected("no")} label="No, keep planning" desc="Provide feedback to refine the plan" />
+          </>
+        )}
+      </div>
+      {selected === "no" && (
+        <textarea
+          value={feedback}
+          onChange={(e) => setFeedback(e.target.value)}
+          placeholder="Tell Claude what to change..."
+          className="mt-3 w-full rounded-lg border border-border bg-surface-2 px-3 py-2 text-sm text-text-primary placeholder:text-text-muted focus:border-brand focus:outline-none"
+          rows={3}
+        />
+      )}
+      <div className="mt-4">
+        <button
+          onClick={handleSubmit}
+          disabled={!selected}
+          className="rounded-lg bg-brand px-4 py-2 text-sm font-medium text-white hover:bg-brand-light disabled:opacity-50 transition-colors"
+        >
+          Submit
+        </button>
+      </div>
+    </div>
+  );
+}
+
+function PlanOption({ selected, onClick, label, desc }: { selected: boolean; onClick: () => void; label: string; desc?: string }) {
+  return (
+    <button
+      onClick={onClick}
+      className={cn(
+        "w-full rounded-lg border px-4 py-2.5 text-left text-sm transition-colors",
+        selected ? "border-brand bg-brand/10 text-text-primary" : "border-border bg-surface-2 text-text-secondary hover:border-border-light",
+      )}
+    >
+      <div className="flex items-center gap-2">
+        <span className={cn(
+          "flex h-4 w-4 items-center justify-center rounded-full border text-[10px] transition-colors",
+          selected ? "border-brand bg-brand text-white" : "border-border",
+        )}>
+          {selected && "\u2713"}
+        </span>
+        <span className="font-medium">{label}</span>
+      </div>
+      {desc && <div className="mt-0.5 pl-6 text-xs text-text-muted">{desc}</div>}
+    </button>
+  );
+}
+
+function formatPlanContent(content: string): string {
+  let html = esc(content);
+  html = html.replace(/```(\w*)\n?([\s\S]*?)```/g, (_, _l, code) =>
+    `<pre class="my-2 overflow-x-auto rounded-lg bg-tool-card p-3 font-mono text-xs">${code.trim()}</pre>`
+  );
+  html = html.replace(/`([^`]+)`/g, '<code class="rounded bg-tool-card px-1.5 py-0.5 font-mono text-xs">$1</code>');
+  html = html.replace(/\*\*([^*]+)\*\*/g, "<strong>$1</strong>");
+  return html;
+}
--- a/packages/remote-control-server/web/src/components/SessionList.tsx
+++ b/packages/remote-control-server/web/src/components/SessionList.tsx
@@ -0,0 +1,52 @@
+import type { Session } from "../types";
+import { StatusBadge } from "./Navbar";
+import { esc, formatTime } from "../lib/utils";
+
+interface SessionListProps {
+  sessions: Session[];
+  onSelect: (sessionId: string) => void;
+}
+
+export function SessionList({ sessions, onSelect }: SessionListProps) {
+  if (!sessions || sessions.length === 0) {
+    return (
+      <div className="rounded-xl border border-border bg-surface-1 p-8 text-center text-text-muted">
+        No sessions
+      </div>
+    );
+  }
+
+  const sorted = [...sessions].sort((a, b) => (b.updated_at || 0) - (a.updated_at || 0));
+
+  return (
+    <div className="space-y-2">
+      {sorted.map((session) => (
+        <div
+          key={session.id}
+          onClick={() => onSelect(session.id)}
+          className="flex cursor-pointer items-center justify-between rounded-xl border border-border bg-surface-1 px-4 py-3 transition-colors hover:border-border-light hover:bg-surface-2"
+        >
+          <div className="min-w-0 flex-1">
+            <div className="flex items-center gap-2">
+              <span className="truncate font-medium text-text-primary">
+                {session.title || session.id}
+              </span>
+              {session.source === "acp" && (
+                <span className="rounded-full bg-purple-100 px-2 py-0.5 text-xs font-medium text-purple-700">
+                  ACP
+                </span>
+              )}
+            </div>
+            <div className="truncate text-xs text-text-muted">{session.id}</div>
+          </div>
+          <div className="flex items-center gap-3">
+            <StatusBadge status={session.status} />
+            <span className="text-xs text-text-muted">
+              {formatTime(session.created_at || session.updated_at)}
+            </span>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
--- a/packages/remote-control-server/web/src/components/TaskPanel.tsx
+++ b/packages/remote-control-server/web/src/components/TaskPanel.tsx
@@ -0,0 +1,25 @@
+interface TaskPanelProps {
+  onClose: () => void;
+}
+
+export function TaskPanel({ onClose }: TaskPanelProps) {
+  return (
+    <div className="fixed inset-0 z-50 flex justify-end bg-black/30" onClick={onClose}>
+      <div
+        className="w-80 border-l border-border bg-surface-1 p-4"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="mb-4 flex items-center justify-between">
+          <h3 className="font-display font-semibold text-text-primary">Tasks</h3>
+          <button
+            onClick={onClose}
+            className="rounded-md px-2 py-1 text-text-muted hover:bg-surface-2 hover:text-text-secondary transition-colors"
+          >
+            &times;
+          </button>
+        </div>
+        <div className="text-sm text-text-muted">No active tasks</div>
+      </div>
+    </div>
+  );
+}