mirror of
https://github.com/claude-code-best/claude-code.git
synced 2026-06-22 16:25:51 +00:00
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>
This commit is contained in:
claude-code-best
472
packages/remote-control-server/web/src/lib/rcs-chat-adapter.ts
Normal file
472
packages/remote-control-server/web/src/lib/rcs-chat-adapter.ts
Normal file
@@ -0,0 +1,472 @@
|
||||
import type { SetStateAction } from "react";
|
||||
import {
|
||||
apiFetchSession,
|
||||
apiFetchSessionHistory,
|
||||
apiBind,
|
||||
apiSendEvent,
|
||||
apiSendControl,
|
||||
apiInterrupt,
|
||||
getUuid,
|
||||
} from "../api/client";
|
||||
import type { SessionEvent, EventPayload } from "../types";
|
||||
import type {
|
||||
ThreadEntry,
|
||||
ToolCallData,
|
||||
ToolCallStatus,
|
||||
UserMessageEntry,
|
||||
AssistantMessageEntry,
|
||||
ToolCallEntry,
|
||||
UserMessageImage,
|
||||
PendingPermission,
|
||||
} from "./types";
|
||||
|
||||
// SSE Event Bus — 复用自 rcs-transport.ts，仅保留连接管理
|
||||
type SSEEventHandler = (event: SessionEvent) => void;
|
||||
|
||||
class SSEBus {
|
||||
private listeners: Set<SSEEventHandler> = new Set();
|
||||
private eventSource: EventSource | null = null;
|
||||
|
||||
onEvent(handler: SSEEventHandler): () => void {
|
||||
this.listeners.add(handler);
|
||||
return () => this.listeners.delete(handler);
|
||||
}
|
||||
|
||||
connect(sessionId: string): void {
|
||||
this.disconnect();
|
||||
const uuid = getUuid();
|
||||
const url = `/web/sessions/${sessionId}/events?uuid=${encodeURIComponent(uuid)}`;
|
||||
const es = new EventSource(url);
|
||||
this.eventSource = es;
|
||||
|
||||
es.addEventListener("message", (e: MessageEvent) => {
|
||||
try {
|
||||
const data = JSON.parse(e.data) as SessionEvent;
|
||||
for (const handler of this.listeners) {
|
||||
handler(data);
|
||||
}
|
||||
} catch {
|
||||
// ignore parse errors
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
disconnect(): void {
|
||||
if (this.eventSource) {
|
||||
this.eventSource.close();
|
||||
this.eventSource = null;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 全局 SSE bus 实例
|
||||
export const sseBus = new SSEBus();
|
||||
|
||||
// =============================================================================
|
||||
// RCS Chat Adapter — 将 SSE 事件转为 ThreadEntry
|
||||
// =============================================================================
|
||||
|
||||
function mapToolStatus(status: string): ToolCallStatus {
|
||||
if (status === "completed") return "complete";
|
||||
if (status === "failed") return "error";
|
||||
return "running";
|
||||
}
|
||||
|
||||
function extractEventText(payload: EventPayload): string {
|
||||
if (typeof payload.content === "string") return payload.content;
|
||||
if (payload.message && typeof payload.message === "object") {
|
||||
const msg = payload.message as Record<string, unknown>;
|
||||
if (typeof msg.content === "string") return msg.content;
|
||||
if (Array.isArray(msg.content)) {
|
||||
return (msg.content as Array<Record<string, unknown>>)
|
||||
.filter((b) => b.type === "text" && typeof b.text === "string")
|
||||
.map((b) => b.text as string)
|
||||
.join("");
|
||||
}
|
||||
}
|
||||
return "";
|
||||
}
|
||||
|
||||
function findToolCallIndex(entries: ThreadEntry[], toolCallId: string): number {
|
||||
for (let i = entries.length - 1; i >= 0; i--) {
|
||||
const entry = entries[i];
|
||||
if (entry && entry.type === "tool_call" && entry.toolCall.id === toolCallId) {
|
||||
return i;
|
||||
}
|
||||
}
|
||||
return -1;
|
||||
}
|
||||
|
||||
export class RCSChatAdapter {
|
||||
private sessionId: string;
|
||||
private setEntries: React.Dispatch<SetStateAction<ThreadEntry[]>>;
|
||||
private unsub: (() => void) | null = null;
|
||||
private onStatusChange?: (status: string) => void;
|
||||
private onError?: (error: string) => void;
|
||||
private onPermissionRequest?: (permission: PendingPermission) => void;
|
||||
|
||||
constructor(
|
||||
sessionId: string,
|
||||
setEntries: React.Dispatch<SetStateAction<ThreadEntry[]>>,
|
||||
options?: {
|
||||
onStatusChange?: (status: string) => void;
|
||||
onError?: (error: string) => void;
|
||||
onPermissionRequest?: (permission: PendingPermission) => void;
|
||||
},
|
||||
) {
|
||||
this.sessionId = sessionId;
|
||||
this.setEntries = setEntries;
|
||||
this.onStatusChange = options?.onStatusChange;
|
||||
this.onError = options?.onError;
|
||||
this.onPermissionRequest = options?.onPermissionRequest;
|
||||
}
|
||||
|
||||
/** 初始化：绑定会话、加载历史、连接 SSE */
|
||||
async init(): Promise<void> {
|
||||
try {
|
||||
await apiBind(this.sessionId);
|
||||
} catch {
|
||||
// may already be bound
|
||||
}
|
||||
|
||||
await this.loadHistory();
|
||||
this.connectSSE();
|
||||
}
|
||||
|
||||
/** 加载历史事件并转为 ThreadEntry */
|
||||
async loadHistory(): Promise<void> {
|
||||
const { events } = await apiFetchSessionHistory(this.sessionId);
|
||||
if (!events || events.length === 0) return;
|
||||
|
||||
const historyEntries: ThreadEntry[] = [];
|
||||
let currentAssistant: AssistantMessageEntry | null = null;
|
||||
|
||||
const flushAssistant = () => {
|
||||
if (currentAssistant) {
|
||||
historyEntries.push(currentAssistant);
|
||||
currentAssistant = null;
|
||||
}
|
||||
};
|
||||
|
||||
for (const event of events) {
|
||||
const payload = event.payload || ({} as EventPayload);
|
||||
|
||||
if (event.type === "user") {
|
||||
if (event.direction === "outbound") continue; // skip echoed user messages
|
||||
flushAssistant();
|
||||
const text = extractEventText(payload);
|
||||
if (text) {
|
||||
historyEntries.push({
|
||||
type: "user_message",
|
||||
id: event.id || `hist-user-${historyEntries.length}`,
|
||||
content: text,
|
||||
});
|
||||
}
|
||||
} else if (event.type === "assistant") {
|
||||
flushAssistant();
|
||||
const text = extractEventText(payload);
|
||||
const toolParts: ThreadEntry[] = [];
|
||||
|
||||
const msg = payload.message as Record<string, unknown> | undefined;
|
||||
if (msg && typeof msg === "object" && Array.isArray(msg.content)) {
|
||||
for (const block of msg.content as Array<Record<string, unknown>>) {
|
||||
if (block.type === "tool_use") {
|
||||
toolParts.push({
|
||||
type: "tool_call",
|
||||
toolCall: {
|
||||
id: (block.id as string) || `hist-tool-${historyEntries.length}`,
|
||||
title: (block.name as string) || "tool",
|
||||
status: "complete",
|
||||
rawInput: (block.input as Record<string, unknown>) || {},
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (text || toolParts.length > 0) {
|
||||
currentAssistant = {
|
||||
type: "assistant_message",
|
||||
id: event.id || `hist-asst-${historyEntries.length}`,
|
||||
chunks: text ? [{ type: "message", text }] : [],
|
||||
};
|
||||
historyEntries.push(currentAssistant);
|
||||
// Push tool calls after assistant message
|
||||
for (const tp of toolParts) {
|
||||
historyEntries.push(tp);
|
||||
}
|
||||
currentAssistant = null; // Tool calls are separate entries
|
||||
}
|
||||
} else if (event.type === "tool_use") {
|
||||
const p = payload as Record<string, unknown>;
|
||||
const tc: ToolCallEntry = {
|
||||
type: "tool_call",
|
||||
toolCall: {
|
||||
id: (p.tool_call_id as string) || `hist-tool-${historyEntries.length}`,
|
||||
title: (p.tool_name as string) || "tool",
|
||||
status: "complete",
|
||||
rawInput: (p.tool_input as Record<string, unknown>) || {},
|
||||
},
|
||||
};
|
||||
historyEntries.push(tc);
|
||||
} else if (event.type === "tool_result") {
|
||||
const p = payload as Record<string, unknown>;
|
||||
// Find last tool call and update with output
|
||||
const idx = findToolCallIndex(historyEntries, (p.tool_call_id as string) || "");
|
||||
if (idx >= 0) {
|
||||
const entry = historyEntries[idx] as ToolCallEntry;
|
||||
historyEntries[idx] = {
|
||||
type: "tool_call",
|
||||
toolCall: {
|
||||
...entry.toolCall,
|
||||
rawOutput: { output: p.content || p.output || "" },
|
||||
},
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
flushAssistant();
|
||||
this.setEntries(historyEntries);
|
||||
}
|
||||
|
||||
/** 连接 SSE 事件流 */
|
||||
connectSSE(): void {
|
||||
sseBus.connect(this.sessionId);
|
||||
this.unsub = sseBus.onEvent((event) => this.handleEvent(event));
|
||||
}
|
||||
|
||||
/** 断开 SSE */
|
||||
disconnect(): void {
|
||||
if (this.unsub) {
|
||||
this.unsub();
|
||||
this.unsub = null;
|
||||
}
|
||||
sseBus.disconnect();
|
||||
}
|
||||
|
||||
/** 处理 SSE 事件 */
|
||||
handleEvent(event: SessionEvent): void {
|
||||
const type = event.type;
|
||||
const payload = event.payload || ({} as EventPayload);
|
||||
|
||||
// Skip bridge init noise
|
||||
const serialized = JSON.stringify(event);
|
||||
if (/Remote Control connecting/i.test(serialized)) return;
|
||||
|
||||
switch (type) {
|
||||
// ---- 助手消息 ----
|
||||
case "assistant": {
|
||||
const content = typeof payload.content === "string" ? payload.content : "";
|
||||
this.setEntries((prev) => {
|
||||
const lastEntry = prev[prev.length - 1];
|
||||
|
||||
// If last entry is AssistantMessage, append to it
|
||||
if (lastEntry?.type === "assistant_message") {
|
||||
const lastChunk = lastEntry.chunks[lastEntry.chunks.length - 1];
|
||||
if (lastChunk?.type === "message") {
|
||||
return [
|
||||
...prev.slice(0, -1),
|
||||
{ ...lastEntry, chunks: [...lastEntry.chunks.slice(0, -1), { type: "message", text: lastChunk.text + content }] },
|
||||
];
|
||||
}
|
||||
return [
|
||||
...prev.slice(0, -1),
|
||||
{ ...lastEntry, chunks: [...lastEntry.chunks, { type: "message", text: content }] },
|
||||
];
|
||||
}
|
||||
|
||||
// Create new AssistantMessage
|
||||
if (content && content.trim()) {
|
||||
const newEntry: AssistantMessageEntry = {
|
||||
type: "assistant_message",
|
||||
id: `assistant-${Date.now()}`,
|
||||
chunks: [{ type: "message", text: content }],
|
||||
};
|
||||
return [...prev, newEntry];
|
||||
}
|
||||
return prev;
|
||||
});
|
||||
|
||||
// Check for embedded tool_use blocks
|
||||
const msg = payload.message as Record<string, unknown> | undefined;
|
||||
if (msg && typeof msg === "object" && Array.isArray(msg.content)) {
|
||||
const toolBlocks = (msg.content as Array<Record<string, unknown>>).filter((b) => b.type === "tool_use");
|
||||
for (const block of toolBlocks) {
|
||||
const toolCallId = (block.id as string) || `call-${Date.now()}-${Math.random().toString(16).slice(2, 8)}`;
|
||||
const toolData: ToolCallData = {
|
||||
id: toolCallId,
|
||||
title: (block.name as string) || "tool",
|
||||
status: "running",
|
||||
rawInput: (block.input as Record<string, unknown>) || {},
|
||||
};
|
||||
this.setEntries((prev) => [...prev, { type: "tool_call", toolCall: toolData }]);
|
||||
}
|
||||
}
|
||||
break;
|
||||
}
|
||||
|
||||
// ---- 工具调用 ----
|
||||
case "tool_use": {
|
||||
const p = payload as Record<string, unknown>;
|
||||
const toolCallId = (p.tool_call_id as string) || `call-${Date.now()}`;
|
||||
const toolData: ToolCallData = {
|
||||
id: toolCallId,
|
||||
title: (p.tool_name as string) || "tool",
|
||||
status: "running",
|
||||
rawInput: (p.tool_input as Record<string, unknown>) || {},
|
||||
};
|
||||
this.setEntries((prev) => [...prev, { type: "tool_call", toolCall: toolData }]);
|
||||
break;
|
||||
}
|
||||
|
||||
// ---- 工具结果 ----
|
||||
case "tool_result": {
|
||||
const p = payload as Record<string, unknown>;
|
||||
const callId = (p.tool_call_id as string) || "";
|
||||
this.setEntries((prev) => {
|
||||
const idx = findToolCallIndex(prev, callId);
|
||||
if (idx < 0) return prev;
|
||||
const entry = prev[idx] as ToolCallEntry;
|
||||
return prev.map((e, i) =>
|
||||
i === idx
|
||||
? { type: "tool_call", toolCall: { ...entry.toolCall, status: "complete" as ToolCallStatus, rawOutput: { output: p.content || p.output || "" } } }
|
||||
: e,
|
||||
);
|
||||
});
|
||||
break;
|
||||
}
|
||||
|
||||
// ---- 权限请求 ----
|
||||
case "control_request":
|
||||
case "permission_request": {
|
||||
const req = payload.request as Record<string, unknown> | undefined;
|
||||
if (req && req.subtype === "can_use_tool") {
|
||||
const requestId = payload.request_id || "";
|
||||
const toolName = (req.tool_name as string) || "unknown";
|
||||
const toolInput = (req.input || req.tool_input || {}) as Record<string, unknown>;
|
||||
const description = (req.description as string) || "";
|
||||
|
||||
// Update tool call status
|
||||
this.setEntries((prev) => {
|
||||
// Find matching tool call
|
||||
const idx = [...prev].reverse().findIndex((e) => e.type === "tool_call");
|
||||
if (idx >= 0) {
|
||||
const realIdx = prev.length - 1 - idx;
|
||||
const entry = prev[realIdx] as ToolCallEntry;
|
||||
if (entry.toolCall.status === "running") {
|
||||
return prev.map((e, i) =>
|
||||
i === realIdx
|
||||
? { type: "tool_call", toolCall: { ...entry.toolCall, status: "waiting_for_confirmation" as ToolCallStatus, permissionRequest: { requestId, options: [] } } }
|
||||
: e,
|
||||
);
|
||||
}
|
||||
}
|
||||
return prev;
|
||||
});
|
||||
|
||||
// Notify parent
|
||||
this.onPermissionRequest?.({
|
||||
requestId,
|
||||
toolName,
|
||||
toolInput,
|
||||
description,
|
||||
});
|
||||
}
|
||||
break;
|
||||
}
|
||||
|
||||
// ---- 会话状态 ----
|
||||
case "session_status": {
|
||||
if (typeof payload.status === "string") {
|
||||
this.onStatusChange?.(payload.status);
|
||||
}
|
||||
break;
|
||||
}
|
||||
|
||||
// ---- 错误 ----
|
||||
case "error": {
|
||||
const errorMsg = String(payload.message || payload.content || "Unknown error");
|
||||
this.onError?.(errorMsg);
|
||||
break;
|
||||
}
|
||||
|
||||
// ---- 忽略的事件类型 ----
|
||||
case "partial_assistant":
|
||||
case "result":
|
||||
case "result_success":
|
||||
case "control_response":
|
||||
case "permission_response":
|
||||
case "system":
|
||||
case "task_state":
|
||||
case "automation_state":
|
||||
case "status":
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
/** 发送用户消息 */
|
||||
async sendMessage(text: string, images?: UserMessageImage[]): Promise<void> {
|
||||
if (!text.trim() && (!images || images.length === 0)) return;
|
||||
|
||||
// Add user message to entries
|
||||
const userEntry: UserMessageEntry = {
|
||||
type: "user_message",
|
||||
id: `user-${Date.now()}`,
|
||||
content: text,
|
||||
images: images && images.length > 0 ? images : undefined,
|
||||
};
|
||||
this.setEntries((prev) => [...prev, userEntry]);
|
||||
|
||||
// Send to backend
|
||||
await apiSendEvent(this.sessionId, {
|
||||
type: "user",
|
||||
uuid: crypto.randomUUID(),
|
||||
content: text,
|
||||
message: { content: text },
|
||||
});
|
||||
}
|
||||
|
||||
/** 响应权限请求 */
|
||||
async respondPermission(requestId: string, approved: boolean, extra?: Record<string, unknown>): Promise<void> {
|
||||
await apiSendControl(this.sessionId, {
|
||||
type: "permission_response",
|
||||
approved,
|
||||
request_id: requestId,
|
||||
...extra,
|
||||
});
|
||||
|
||||
// Update tool call status
|
||||
this.setEntries((prev) =>
|
||||
prev.map((entry) => {
|
||||
if (entry.type !== "tool_call") return entry;
|
||||
if (entry.toolCall.permissionRequest?.requestId !== requestId) return entry;
|
||||
return {
|
||||
type: "tool_call",
|
||||
toolCall: {
|
||||
...entry.toolCall,
|
||||
status: approved ? "running" : ("rejected" as ToolCallStatus),
|
||||
permissionRequest: undefined,
|
||||
},
|
||||
};
|
||||
}),
|
||||
);
|
||||
}
|
||||
|
||||
/** 中断当前操作 */
|
||||
async interrupt(): Promise<void> {
|
||||
// Mark running tools as canceled
|
||||
this.setEntries((prev) =>
|
||||
prev.map((entry) => {
|
||||
if (entry.type !== "tool_call") return entry;
|
||||
if (entry.toolCall.status !== "running" && entry.toolCall.status !== "waiting_for_confirmation") return entry;
|
||||
return {
|
||||
type: "tool_call",
|
||||
toolCall: { ...entry.toolCall, status: "canceled" as ToolCallStatus, permissionRequest: undefined },
|
||||
};
|
||||
}),
|
||||
);
|
||||
|
||||
await apiInterrupt(this.sessionId);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user