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
@@ -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"
|
||||
>
|
||||
×
|
||||
</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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user