mirror of
https://github.com/claude-code-best/claude-code.git
synced 2026-06-18 14: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);
|
||||
}
|
||||
}
|
||||
335
packages/remote-control-server/web/src/lib/rcs-transport.ts
Normal file
335
packages/remote-control-server/web/src/lib/rcs-transport.ts
Normal file
@@ -0,0 +1,335 @@
|
||||
import type { ChatTransport, UIMessage, UIMessageChunk } from "ai";
|
||||
import { getUuid } from "../api/client";
|
||||
import type { SessionEvent, EventPayload } from "../types";
|
||||
|
||||
// ============================================================
|
||||
// SSE Event Bus — shared between SSE listener and transport
|
||||
// ============================================================
|
||||
|
||||
type SSEEventHandler = (event: SessionEvent) => void;
|
||||
|
||||
class SSEEventBus {
|
||||
private listeners: Set<SSEEventHandler> = new Set();
|
||||
private eventSource: EventSource | null = null;
|
||||
private _lastSeqNum = 0;
|
||||
|
||||
get lastSeqNum() {
|
||||
return this._lastSeqNum;
|
||||
}
|
||||
|
||||
/** Register a listener for SSE events */
|
||||
onEvent(handler: SSEEventHandler): () => void {
|
||||
this.listeners.add(handler);
|
||||
return () => this.listeners.delete(handler);
|
||||
}
|
||||
|
||||
/** Connect to the SSE stream for a session */
|
||||
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;
|
||||
if (data.seqNum !== undefined && data.seqNum <= this._lastSeqNum) return;
|
||||
if (data.seqNum !== undefined) this._lastSeqNum = data.seqNum;
|
||||
for (const handler of this.listeners) {
|
||||
handler(data);
|
||||
}
|
||||
} catch {
|
||||
// ignore parse errors
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/** Disconnect the SSE stream */
|
||||
disconnect(): void {
|
||||
if (this.eventSource) {
|
||||
this.eventSource.close();
|
||||
this.eventSource = null;
|
||||
}
|
||||
this._lastSeqNum = 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Singleton event bus
|
||||
export const sseBus = new SSEEventBus();
|
||||
|
||||
// ============================================================
|
||||
// RCS ChatTransport — bridges RCS SSE to AI SDK UIMessageChunk
|
||||
// ============================================================
|
||||
|
||||
interface RCSTransportOptions {
|
||||
sessionId: string;
|
||||
onPermissionRequest?: (event: SessionEvent) => void;
|
||||
onSessionStatus?: (status: string) => void;
|
||||
onError?: (error: string) => void;
|
||||
}
|
||||
|
||||
export class RCSTransport implements ChatTransport<UIMessage> {
|
||||
private sessionId: string;
|
||||
private onPermissionRequest?: (event: SessionEvent) => void;
|
||||
private onSessionStatus?: (status: string) => void;
|
||||
private onError?: (error: string) => void;
|
||||
private unsub: (() => void) | null = null;
|
||||
|
||||
constructor(options: RCSTransportOptions) {
|
||||
this.sessionId = options.sessionId;
|
||||
this.onPermissionRequest = options.onPermissionRequest;
|
||||
this.onSessionStatus = options.onSessionStatus;
|
||||
this.onError = options.onError;
|
||||
}
|
||||
|
||||
async sendMessages({
|
||||
messages,
|
||||
abortSignal,
|
||||
}: Parameters<ChatTransport<UIMessage>["sendMessages"]>[0]): Promise<ReadableStream<UIMessageChunk>> {
|
||||
const lastMessage = messages[messages.length - 1];
|
||||
if (!lastMessage || lastMessage.role !== "user") {
|
||||
// Return empty stream if no user message
|
||||
return new ReadableStream({ start: (c) => c.close() });
|
||||
}
|
||||
|
||||
// Extract text from the user message parts
|
||||
const text = lastMessage.parts
|
||||
.filter((p: UIMessage["parts"][number]): p is Extract<typeof p, { type: "text" }> => p.type === "text")
|
||||
.map((p: { text: string }) => p.text)
|
||||
.join("");
|
||||
|
||||
if (!text.trim()) {
|
||||
return new ReadableStream({ start: (c) => c.close() });
|
||||
}
|
||||
|
||||
// POST user message to the RCS backend
|
||||
const uuid = getUuid();
|
||||
const response = await fetch(
|
||||
`/web/sessions/${this.sessionId}/events?uuid=${encodeURIComponent(uuid)}`,
|
||||
{
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({
|
||||
type: "user",
|
||||
uuid: crypto.randomUUID(),
|
||||
content: text,
|
||||
message: { content: text },
|
||||
}),
|
||||
signal: abortSignal,
|
||||
},
|
||||
);
|
||||
|
||||
if (!response.ok) {
|
||||
const data = await response.json().catch(() => ({ error: { message: response.statusText } }));
|
||||
throw new Error(data.error?.message || "Failed to send message");
|
||||
}
|
||||
|
||||
// Create a ReadableStream from the SSE event bus
|
||||
// Collects events until the assistant turn is complete
|
||||
return new ReadableStream<UIMessageChunk>({
|
||||
start: (controller) => {
|
||||
let textId = `text-${Date.now()}`;
|
||||
let started = false;
|
||||
|
||||
const ensureStarted = () => {
|
||||
if (!started) {
|
||||
started = true;
|
||||
controller.enqueue({ type: "start", messageId: `msg-${Date.now()}` });
|
||||
}
|
||||
};
|
||||
|
||||
const handler = (event: SessionEvent) => {
|
||||
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) {
|
||||
// ---- Assistant text ----
|
||||
case "assistant": {
|
||||
const content =
|
||||
typeof payload.content === "string"
|
||||
? payload.content
|
||||
: "";
|
||||
if (content && content.trim()) {
|
||||
ensureStarted();
|
||||
controller.enqueue({ type: "text-start", id: textId });
|
||||
controller.enqueue({ type: "text-delta", id: textId, delta: content });
|
||||
controller.enqueue({ type: "text-end", id: textId });
|
||||
}
|
||||
|
||||
// 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) {
|
||||
ensureStarted();
|
||||
const toolCallId = (block.id as string) || `call-${Date.now()}-${Math.random().toString(16).slice(2, 8)}`;
|
||||
controller.enqueue({
|
||||
type: "tool-input-available",
|
||||
toolCallId,
|
||||
toolName: (block.name as string) || "tool",
|
||||
input: block.input || {},
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Finish after assistant message
|
||||
ensureStarted();
|
||||
controller.enqueue({ type: "finish", finishReason: "stop" });
|
||||
controller.close();
|
||||
cleanup();
|
||||
break;
|
||||
}
|
||||
|
||||
// ---- Tool use events ----
|
||||
case "tool_use": {
|
||||
ensureStarted();
|
||||
const toolCallId =
|
||||
(payload as Record<string, unknown>).tool_call_id as string ||
|
||||
`call-${Date.now()}-${Math.random().toString(16).slice(2, 8)}`;
|
||||
controller.enqueue({
|
||||
type: "tool-input-available",
|
||||
toolCallId,
|
||||
toolName: (payload as Record<string, unknown>).tool_name as string || "tool",
|
||||
input: (payload as Record<string, unknown>).tool_input || {},
|
||||
});
|
||||
break;
|
||||
}
|
||||
|
||||
// ---- Tool result events ----
|
||||
case "tool_result": {
|
||||
ensureStarted();
|
||||
const resultCallId =
|
||||
(payload as Record<string, unknown>).tool_call_id as string ||
|
||||
`call-${Date.now()}-${Math.random().toString(16).slice(2, 8)}`;
|
||||
const output =
|
||||
typeof (payload as Record<string, unknown>).output === "string"
|
||||
? (payload as Record<string, unknown>).output
|
||||
: (payload as Record<string, unknown>).content || "";
|
||||
controller.enqueue({
|
||||
type: "tool-output-available",
|
||||
toolCallId: resultCallId,
|
||||
output: output as string,
|
||||
});
|
||||
break;
|
||||
}
|
||||
|
||||
// ---- Permission / control requests ----
|
||||
case "control_request":
|
||||
case "permission_request": {
|
||||
const req = payload.request as Record<string, unknown> | undefined;
|
||||
if (req && req.subtype === "can_use_tool") {
|
||||
// Forward to the UI layer for handling
|
||||
this.onPermissionRequest?.(event);
|
||||
}
|
||||
// Don't close the stream — wait for the response
|
||||
break;
|
||||
}
|
||||
|
||||
// ---- Status events ----
|
||||
case "status": {
|
||||
const msg =
|
||||
(typeof payload.message === "string" ? payload.message : "") ||
|
||||
payload.content ||
|
||||
"";
|
||||
if (/connecting|waiting|initializing|Remote Control/i.test(msg)) return;
|
||||
break;
|
||||
}
|
||||
|
||||
// ---- Session status ----
|
||||
case "session_status": {
|
||||
if (typeof payload.status === "string") {
|
||||
this.onSessionStatus?.(payload.status);
|
||||
if (
|
||||
payload.status === "archived" ||
|
||||
payload.status === "inactive"
|
||||
) {
|
||||
ensureStarted();
|
||||
controller.enqueue({ type: "finish", finishReason: "stop" });
|
||||
controller.close();
|
||||
cleanup();
|
||||
}
|
||||
}
|
||||
break;
|
||||
}
|
||||
|
||||
// ---- Errors ----
|
||||
case "error": {
|
||||
ensureStarted();
|
||||
controller.enqueue({
|
||||
type: "error",
|
||||
errorText: String(payload.message || payload.content || "Unknown error"),
|
||||
});
|
||||
controller.enqueue({ type: "finish", finishReason: "error" });
|
||||
controller.close();
|
||||
cleanup();
|
||||
break;
|
||||
}
|
||||
|
||||
// ---- Interrupt ----
|
||||
case "interrupt": {
|
||||
ensureStarted();
|
||||
controller.enqueue({ type: "abort", reason: "Session interrupted" });
|
||||
controller.close();
|
||||
cleanup();
|
||||
break;
|
||||
}
|
||||
|
||||
// ---- Skip noise ----
|
||||
case "partial_assistant":
|
||||
case "result":
|
||||
case "result_success":
|
||||
case "control_response":
|
||||
case "permission_response":
|
||||
case "system":
|
||||
case "task_state":
|
||||
case "automation_state":
|
||||
return;
|
||||
|
||||
default:
|
||||
return;
|
||||
}
|
||||
};
|
||||
|
||||
const cleanup = () => {
|
||||
if (this.unsub) {
|
||||
this.unsub();
|
||||
this.unsub = null;
|
||||
}
|
||||
};
|
||||
|
||||
this.unsub = sseBus.onEvent(handler);
|
||||
|
||||
// Handle abort
|
||||
if (abortSignal) {
|
||||
const onAbort = () => {
|
||||
controller.enqueue({ type: "abort", reason: "Aborted" });
|
||||
controller.close();
|
||||
cleanup();
|
||||
abortSignal.removeEventListener("abort", onAbort);
|
||||
};
|
||||
abortSignal.addEventListener("abort", onAbort);
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
/** Not supported — RCS doesn't have stream resumption */
|
||||
reconnectToStream(): Promise<ReadableStream<UIMessageChunk> | null> {
|
||||
return Promise.resolve(null);
|
||||
}
|
||||
|
||||
/** Clean up listeners */
|
||||
destroy(): void {
|
||||
if (this.unsub) {
|
||||
this.unsub();
|
||||
this.unsub = null;
|
||||
}
|
||||
}
|
||||
}
|
||||
97
packages/remote-control-server/web/src/lib/theme.ts
Normal file
97
packages/remote-control-server/web/src/lib/theme.ts
Normal file
@@ -0,0 +1,97 @@
|
||||
import React, { createContext, useContext, useEffect, useState, useCallback } from "react";
|
||||
|
||||
export type Theme = "light" | "dark" | "system";
|
||||
|
||||
interface ThemeContextValue {
|
||||
theme: Theme;
|
||||
resolvedTheme: "light" | "dark";
|
||||
setTheme: (theme: Theme) => void;
|
||||
}
|
||||
|
||||
const ThemeContext = createContext<ThemeContextValue | undefined>(undefined);
|
||||
|
||||
const STORAGE_KEY = "theme";
|
||||
|
||||
function getSystemTheme(): "light" | "dark" {
|
||||
if (typeof window === "undefined") return "light";
|
||||
return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
|
||||
}
|
||||
|
||||
function getStoredTheme(): Theme {
|
||||
if (typeof window === "undefined") return "system";
|
||||
try {
|
||||
const stored = localStorage.getItem(STORAGE_KEY);
|
||||
if (stored === "light" || stored === "dark" || stored === "system") {
|
||||
return stored;
|
||||
}
|
||||
} catch {
|
||||
// localStorage not available
|
||||
}
|
||||
return "system";
|
||||
}
|
||||
|
||||
function applyTheme(theme: "light" | "dark") {
|
||||
const root = document.documentElement;
|
||||
root.classList.remove("light", "dark");
|
||||
root.classList.add(theme);
|
||||
}
|
||||
|
||||
export function useTheme() {
|
||||
const context = useContext(ThemeContext);
|
||||
if (!context) {
|
||||
throw new Error("useTheme must be used within a ThemeProvider");
|
||||
}
|
||||
return context;
|
||||
}
|
||||
|
||||
interface ThemeProviderProps {
|
||||
children: React.ReactNode;
|
||||
defaultTheme?: Theme;
|
||||
}
|
||||
|
||||
export function ThemeProvider({ children, defaultTheme = "system" }: ThemeProviderProps) {
|
||||
const [theme, setThemeState] = useState<Theme>(() => getStoredTheme() || defaultTheme);
|
||||
const [resolvedTheme, setResolvedTheme] = useState<"light" | "dark">(() => {
|
||||
const stored = getStoredTheme() || defaultTheme;
|
||||
return stored === "system" ? getSystemTheme() : stored;
|
||||
});
|
||||
|
||||
const setTheme = useCallback((newTheme: Theme) => {
|
||||
setThemeState(newTheme);
|
||||
try {
|
||||
localStorage.setItem(STORAGE_KEY, newTheme);
|
||||
} catch {
|
||||
// localStorage not available
|
||||
}
|
||||
}, []);
|
||||
|
||||
// Apply theme on mount and when theme changes
|
||||
useEffect(() => {
|
||||
const resolved = theme === "system" ? getSystemTheme() : theme;
|
||||
setResolvedTheme(resolved);
|
||||
applyTheme(resolved);
|
||||
}, [theme]);
|
||||
|
||||
// Listen for system theme changes
|
||||
useEffect(() => {
|
||||
if (theme !== "system") return;
|
||||
|
||||
const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
|
||||
const handleChange = (e: MediaQueryListEvent) => {
|
||||
const newTheme = e.matches ? "dark" : "light";
|
||||
setResolvedTheme(newTheme);
|
||||
applyTheme(newTheme);
|
||||
};
|
||||
|
||||
mediaQuery.addEventListener("change", handleChange);
|
||||
return () => mediaQuery.removeEventListener("change", handleChange);
|
||||
}, [theme]);
|
||||
|
||||
const value: ThemeContextValue = {
|
||||
theme,
|
||||
resolvedTheme,
|
||||
setTheme,
|
||||
};
|
||||
|
||||
return React.createElement(ThemeContext.Provider, { value }, children);
|
||||
}
|
||||
96
packages/remote-control-server/web/src/lib/types.ts
Normal file
96
packages/remote-control-server/web/src/lib/types.ts
Normal file
@@ -0,0 +1,96 @@
|
||||
// =============================================================================
|
||||
// Unified Chat Data Model — shared between ACP and RCS chat interfaces
|
||||
// =============================================================================
|
||||
|
||||
import type { ToolCallContent, PermissionOption } from "../acp/types";
|
||||
|
||||
// 工具调用状态
|
||||
export type ToolCallStatus =
|
||||
| "running"
|
||||
| "complete"
|
||||
| "error"
|
||||
| "waiting_for_confirmation"
|
||||
| "rejected"
|
||||
| "canceled";
|
||||
|
||||
// 工具调用数据
|
||||
export interface ToolCallData {
|
||||
id: string;
|
||||
title: string;
|
||||
status: ToolCallStatus;
|
||||
content?: ToolCallContent[];
|
||||
rawInput?: Record<string, unknown>;
|
||||
rawOutput?: Record<string, unknown>;
|
||||
// 权限请求（仅当 status === "waiting_for_confirmation"）
|
||||
permissionRequest?: {
|
||||
requestId: string;
|
||||
options: PermissionOption[];
|
||||
};
|
||||
// 独立权限请求（无匹配工具调用时创建）
|
||||
isStandalonePermission?: boolean;
|
||||
}
|
||||
|
||||
// 助手消息块 — 普通消息或思考过程
|
||||
export type AssistantChunk =
|
||||
| { type: "message"; text: string }
|
||||
| { type: "thought"; text: string };
|
||||
|
||||
// 用户消息中的图片
|
||||
export interface UserMessageImage {
|
||||
mimeType: string;
|
||||
data: string; // base64 encoded
|
||||
}
|
||||
|
||||
// 用户消息条目
|
||||
export interface UserMessageEntry {
|
||||
type: "user_message";
|
||||
id: string;
|
||||
content: string;
|
||||
images?: UserMessageImage[];
|
||||
}
|
||||
|
||||
// 助手消息条目
|
||||
export interface AssistantMessageEntry {
|
||||
type: "assistant_message";
|
||||
id: string;
|
||||
chunks: AssistantChunk[];
|
||||
}
|
||||
|
||||
// 工具调用条目
|
||||
export interface ToolCallEntry {
|
||||
type: "tool_call";
|
||||
toolCall: ToolCallData;
|
||||
}
|
||||
|
||||
// 统一聊天条目类型
|
||||
export type ThreadEntry =
|
||||
| UserMessageEntry
|
||||
| AssistantMessageEntry
|
||||
| ToolCallEntry;
|
||||
|
||||
// =============================================================================
|
||||
// Chat 组件 Props 类型
|
||||
// =============================================================================
|
||||
|
||||
// ChatInput 提交消息
|
||||
export interface ChatInputMessage {
|
||||
text: string;
|
||||
images?: UserMessageImage[];
|
||||
}
|
||||
|
||||
// 权限请求条目（用于 PermissionPanel）
|
||||
export interface PendingPermission {
|
||||
requestId: string;
|
||||
toolName: string;
|
||||
toolInput: Record<string, unknown>;
|
||||
description?: string;
|
||||
options?: PermissionOption[];
|
||||
}
|
||||
|
||||
// 会话列表条目（用于 SessionSidebar）
|
||||
export interface SessionListItem {
|
||||
id: string;
|
||||
title?: string | null;
|
||||
updatedAt?: string | null;
|
||||
isActive?: boolean;
|
||||
}
|
||||
71
packages/remote-control-server/web/src/lib/utils.ts
Normal file
71
packages/remote-control-server/web/src/lib/utils.ts
Normal file
@@ -0,0 +1,71 @@
|
||||
import { type ClassValue, clsx } from "clsx";
|
||||
import { twMerge } from "tailwind-merge";
|
||||
|
||||
export function cn(...inputs: ClassValue[]) {
|
||||
return twMerge(clsx(inputs));
|
||||
}
|
||||
|
||||
export function esc(str: string | null | undefined): string {
|
||||
if (!str) return "";
|
||||
const value = String(str);
|
||||
const div = document.createElement("div");
|
||||
div.textContent = value;
|
||||
return div.innerHTML;
|
||||
}
|
||||
|
||||
export function formatTime(ts: number | null | undefined): string {
|
||||
if (!ts) return "";
|
||||
return new Date(ts * 1000).toLocaleString();
|
||||
}
|
||||
|
||||
export function statusClass(status: string | null | undefined): string {
|
||||
const map: Record<string, string> = {
|
||||
active: "active",
|
||||
running: "running",
|
||||
idle: "idle",
|
||||
inactive: "inactive",
|
||||
requires_action: "requires_action",
|
||||
archived: "archived",
|
||||
error: "error",
|
||||
};
|
||||
return map[status || ""] || "default";
|
||||
}
|
||||
|
||||
export function isClosedSessionStatus(status: string | null | undefined): boolean {
|
||||
return status === "archived" || status === "inactive";
|
||||
}
|
||||
|
||||
export function truncate(str: string | null | undefined, max: number): string {
|
||||
if (!str) return "";
|
||||
const s = String(str);
|
||||
return s.length > max ? s.slice(0, max) + "..." : s;
|
||||
}
|
||||
|
||||
export function generateMessageUuid(): string {
|
||||
if (typeof crypto !== "undefined" && typeof crypto.randomUUID === "function") {
|
||||
return crypto.randomUUID();
|
||||
}
|
||||
return `msg_${Date.now()}_${Math.random().toString(16).slice(2)}`;
|
||||
}
|
||||
|
||||
export function extractEventText(payload: Record<string, unknown> | null | undefined): string {
|
||||
if (!payload || typeof payload !== "object") return "";
|
||||
if (typeof payload.content === "string") return payload.content;
|
||||
const msg = payload.message as Record<string, unknown> | undefined;
|
||||
if (msg && typeof msg === "object" && Array.isArray(msg.content)) {
|
||||
const texts = msg.content
|
||||
.filter((b: Record<string, unknown>) => b && b.type === "text" && typeof b.text === "string")
|
||||
.map((b: Record<string, unknown>) => b.text as string);
|
||||
if (texts.length > 0) return texts.join("\n");
|
||||
}
|
||||
return "";
|
||||
}
|
||||
|
||||
export function isConversationClearedStatus(
|
||||
payload: Record<string, unknown> | null | undefined,
|
||||
): boolean {
|
||||
if (!payload || typeof payload !== "object") return false;
|
||||
if (payload.status === "conversation_cleared") return true;
|
||||
const raw = payload.raw as Record<string, unknown> | undefined;
|
||||
return !!raw && typeof raw === "object" && raw.status === "conversation_cleared";
|
||||
}
|
||||
Reference in New Issue
Block a user