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>

packages/remote-control-server/web/components/model-selector/ModelSelectorPicker.tsx

@@ -0,0 +1,108 @@
+import { useState, useMemo } from "react";
+import { Check } from "lucide-react";
+import {
+  Command,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+} from "../ui/command";
+import type { ModelInfo } from "../../src/acp/types";
+import { cn } from "../../src/lib/utils";
+
+interface ModelSelectorPickerProps {
+  models: ModelInfo[];
+  currentModelId: string | null;
+  onSelect: (model: ModelInfo) => void;
+  /** Whether to show the search input (default: true) */
+  showSearch?: boolean;
+  /** Whether we're on a mobile device (disables auto-selection) */
+  isMobile?: boolean;
+}
+
+/**
+ * Fuzzy search implementation for model filtering.
+ * Reference: Zed's fuzzy_search() in model_selector.rs
+ */
+function fuzzyMatch(query: string, text: string): boolean {
+  if (!query) return true;
+  const lowerQuery = query.toLowerCase();
+  const lowerText = text.toLowerCase();
+
+  // Simple fuzzy match - check if all query chars appear in order
+  let queryIdx = 0;
+  for (let i = 0; i < lowerText.length && queryIdx < lowerQuery.length; i++) {
+    if (lowerText[i] === lowerQuery[queryIdx]) {
+      queryIdx++;
+    }
+  }
+  return queryIdx === lowerQuery.length;
+}
+
+/**
+ * Model picker using cmdk Command component.
+ * Reference: Zed's AcpModelPickerDelegate with fuzzy search support.
+ */
+export function ModelSelectorPicker({
+  models,
+  currentModelId,
+  onSelect,
+  showSearch = true,
+  isMobile = false,
+}: ModelSelectorPickerProps) {
+  const [search, setSearch] = useState("");
+  // On mobile, don't auto-select first item (no keyboard navigation needed)
+  // Use a non-existent value to prevent any item from being selected
+  const [selectedValue, setSelectedValue] = useState(isMobile ? "__none__" : undefined);
+
+  // Filter models using fuzzy search
+  const filteredModels = useMemo(() => {
+    if (!search) return models;
+    return models.filter((model) =>
+      fuzzyMatch(search, model.name) ||
+      fuzzyMatch(search, model.modelId)
+    );
+  }, [models, search]);
+
+  return (
+    <Command shouldFilter={false} value={selectedValue} onValueChange={setSelectedValue}>
+      {showSearch && (
+        <CommandInput
+          placeholder="Select a model…"
+          value={search}
+          onValueChange={setSearch}
+        />
+      )}
+      <CommandList>
+        <CommandEmpty>No models found.</CommandEmpty>
+        <CommandGroup>
+          {filteredModels.map((model) => (
+            <CommandItem
+              key={model.modelId}
+              value={model.modelId}
+              onSelect={() => onSelect(model)}
+              className="flex items-center justify-between gap-2"
+            >
+              <div className="flex flex-col gap-0.5 min-w-0">
+                <span className="truncate font-medium">{model.name}</span>
+                {model.description && (
+                  <span className="text-xs text-muted-foreground truncate">
+                    {model.description}
+                  </span>
+                )}
+              </div>
+              <Check
+                className={cn(
+                  "h-4 w-4 shrink-0",
+                  currentModelId === model.modelId ? "opacity-100" : "opacity-0"
+                )}
+              />
+            </CommandItem>
+          ))}
+        </CommandGroup>
+      </CommandList>
+    </Command>
+  );
+}
+

packages/remote-control-server/web/components/model-selector/ModelSelectorPopover.tsx

@@ -0,0 +1,85 @@
+import { useState } from "react";
+import { ChevronDown, ChevronUp, Loader2 } from "lucide-react";
+import { Button } from "../ui/button";
+import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
+import { ModelSelectorPicker } from "./ModelSelectorPicker";
+import type { ACPClient } from "../../src/acp/client";
+import type { ModelInfo } from "../../src/acp/types";
+import { useModels } from "../../src/hooks/useModels";
+
+interface ModelSelectorPopoverProps {
+  /** ACPClient instance for model state management */
+  client: ACPClient;
+  /** Callback when a model is selected */
+  onModelSelect?: (modelId: string) => void;
+}
+
+/**
+ * Model selector popover component.
+ * Reference: Zed's AcpModelSelectorPopover that shows current model and allows switching.
+ */
+export function ModelSelectorPopover({
+  client,
+  onModelSelect,
+}: ModelSelectorPopoverProps) {
+  const [open, setOpen] = useState(false);
+  const {
+    supportsModelSelection,
+    availableModels,
+    currentModel,
+    setModel,
+    isLoading,
+  } = useModels(client);
+
+  // Always show the button — disable dropdown when no models available
+  const hasModels = supportsModelSelection && availableModels.length > 0;
+
+  // Check if we're on a mobile device (touch-only)
+  const isMobile = typeof window !== "undefined" &&
+    window.matchMedia("(hover: none) and (pointer: coarse)").matches;
+
+  const handleSelect = async (model: ModelInfo) => {
+    try {
+      await setModel(model.modelId);
+      onModelSelect?.(model.modelId);
+      setOpen(false);
+    } catch (error) {
+      console.error("[ModelSelector] Failed to set model:", error);
+    }
+  };
+
+  return (
+    <Popover open={open} onOpenChange={hasModels ? setOpen : undefined}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="ghost"
+          size="sm"
+          className="gap-1.5 text-muted-foreground hover:text-foreground h-7 px-2"
+          disabled={!hasModels || isLoading}
+        >
+          {isLoading ? (
+            <Loader2 className="h-3 w-3 animate-spin" />
+          ) : null}
+          <span className="max-w-32 truncate">
+            {currentModel?.name ?? "Select Model"}
+          </span>
+          {open ? (
+            <ChevronUp className="h-3 w-3" />
+          ) : (
+            <ChevronDown className="h-3 w-3" />
+          )}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-72 p-0" align="end">
+        <ModelSelectorPicker
+          models={availableModels}
+          currentModelId={currentModel?.modelId ?? null}
+          onSelect={handleSelect}
+          showSearch={!isMobile}
+          isMobile={isMobile}
+        />
+      </PopoverContent>
+    </Popover>
+  );
+}
+

packages/remote-control-server/web/components/model-selector/index.ts

@@ -0,0 +1,3 @@
+export { ModelSelectorPopover } from "./ModelSelectorPopover";
+export { ModelSelectorPicker } from "./ModelSelectorPicker";
+