mirror of
https://github.com/claude-code-best/claude-code.git
synced 2026-06-22 00:05: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,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;
|
||||
}
|
||||
Reference in New Issue
Block a user