mirror of
https://github.com/claude-code-best/claude-code.git
synced 2026-06-22 16:25:51 +00:00
feat: ACP 协议版本 remote control (#293)
* fix: 添加 usage 字段缺失时的防御性防护 第三方 API（如智谱 GLM）在某些流式响应中不返回 usage 字段， 导致 usage.input_tokens 访问 undefined 崩溃并连锁影响后续所有请求。 - claude.ts: content_block_stop 创建消息时 fallback 到 EMPTY_USAGE - LocalAgentTask.tsx: usage 为 undefined 时提前返回 - tokens.ts: getTokenCountFromUsage 加 null guard 和 ?? 0 - cost-tracker.ts: input_tokens/output_tokens 加 ?? 0 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * feat: ACP Plan 展示 — 支持 session/update plan 类型的可视化 补全 PlanUpdate 类型定义（PlanEntry/Priority/Status），新建 PlanView 组件 渲染进度条、状态图标和优先级标签，在 ChatInterface 中处理 plan 更新逻辑。 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * feat: 穷鬼模式下跳过 verification agent 以节省 token Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * test: 补充 RCS 后端 + 前端测试覆盖 (+116 tests) 后端新增 3 个测试文件 (70 tests): - automationState: normalize/snapshot/equals 纯函数 - client-payload: toClientPayload 协议转换 - transport-normalize: normalizePayload + extractContent 前端新增 2 个测试文件 (46 tests): - utils: formatTime/statusClass/truncate/extractEventText 等 - api-client: getUuid/setUuid/api GET/POST 错误处理 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * feat: RCS ACP 页面添加权限模式选择器 + 权限响应修复 - 新增权限模式选择器 UI（6种模式：默认/自动接受编辑/跳过权限/规划/不询问/自动判断） - 权限模式通过 ACP _meta 从 web → acp-link → agent 全链路传递 - 修复 PermissionPanel 点击"允许"发送 cancelled 而非 selected 的 bug - 权限模式和模型选择持久化到 localStorage - acp-link 直接连接路径同步支持 permissionMode 透传 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * feat: RCS Web UI 重构 + QR 修复 + ACP 扫描自动跳转 - RCS Web UI 组件全面重构: Dialog 迁移 Radix UI, lazy loading, 主题系统改进, 组件样式优化 - IdentityPanel QR 码显示修复: requestAnimationFrame 延迟绘制 解决 Radix Dialog Portal 挂载时序问题 - ACP QR 扫描自动跳转: IdentityPanel 扫描 ACP 格式 { url, token } 后存储 sessionStorage 并跳转 /code/?acp=1 - 新增 ACPDirectView 组件: ACP 直连视图, 用 ACPClient 连接并 渲染 ACPMain 聊天界面 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * feat: ACP 权限管道改进 — 模式同步 + bypass 检测 + 统一权限流水线 - agent.ts: applySessionMode 同步 appState.toolPermissionContext.mode - agent.ts: bypassPermissions 可用性检测 (非 root 或 sandbox 环境) - permissions.ts: createAcpCanUseTool 接入 hasPermissionsToUseTool 统一权限流水线, 替代原来分散的处理逻辑 - permissions.ts: 支持 onModeChange 回调, 模式变更时实时同步 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * fix: acp-link 支持 permissionMode 默认值传递给 agent 客户端 (Zed/VS Code 等) 的 new_session 不一定携带 permissionMode, 导致 agent 收到 _meta: undefined, permission 回退到 default。 修复: handleNewSession 使用 fallback 链: 客户端传值 > config.permissionMode > ACP_PERMISSION_MODE 环境变量 使用: ACP_PERMISSION_MODE=auto acp-link claude Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * docs: 更新文档及说明 * fix: 修复类型错误 * chore: 提交脚本 --------- Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
claude-code-best
@@ -1,11 +1,15 @@
|
||||
import { useState, useRef, useEffect, useCallback } from "react";
|
||||
import type { UserMessageEntry, AssistantMessageEntry, UserMessageImage } from "../../src/lib/types";
|
||||
import { cn, esc } from "../../src/lib/utils";
|
||||
import { MessageResponse } from "../ai-elements/message";
|
||||
import { Reasoning, ReasoningTrigger, ReasoningContent } from "../ai-elements/reasoning";
|
||||
import { ChevronDown } from "lucide-react";
|
||||
|
||||
// 用户消息折叠最大高度（px）
|
||||
const COLLAPSED_MAX_HEIGHT = 200;
|
||||
|
||||
// =============================================================================
|
||||
// 用户消息 — 右对齐，深色反转背景，无气泡边框
|
||||
// Anthropic: right-aligned, inverted dark bg, rounded-xl with bottom-right notch
|
||||
// 用户消息 — 右对齐，品牌色淡底，可折叠
|
||||
// =============================================================================
|
||||
|
||||
interface UserBubbleProps {
|
||||
@@ -13,9 +17,23 @@ interface UserBubbleProps {
|
||||
}
|
||||
|
||||
export function UserBubble({ entry }: UserBubbleProps) {
|
||||
const [expanded, setExpanded] = useState(false);
|
||||
const [overflowing, setOverflowing] = useState(false);
|
||||
const contentRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
const checkOverflow = useCallback(() => {
|
||||
const el = contentRef.current;
|
||||
if (!el) return;
|
||||
setOverflowing(el.scrollHeight > COLLAPSED_MAX_HEIGHT + 4);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
checkOverflow();
|
||||
}, [checkOverflow, entry.content]);
|
||||
|
||||
return (
|
||||
<div className="flex justify-end">
|
||||
<div className="max-w-[85%] sm:max-w-[75%]">
|
||||
<div className="max-w-[85%] sm:max-w-[70%]">
|
||||
{/* 图片附件 */}
|
||||
{entry.images && entry.images.length > 0 && (
|
||||
<div className="flex flex-wrap gap-2 mb-2 justify-end">
|
||||
@@ -24,10 +42,32 @@ export function UserBubble({ entry }: UserBubbleProps) {
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{/* 文本内容 */}
|
||||
{/* 文本内容 — 品牌色淡底 + 折叠 */}
|
||||
{entry.content && (
|
||||
<div className="rounded-2xl rounded-br-md bg-bg-inverted px-4 py-2.5 text-sm text-text-inverted whitespace-pre-wrap font-display leading-relaxed">
|
||||
{esc(entry.content)}
|
||||
<div className="relative rounded-2xl rounded-br-md bg-user-bubble border border-user-bubble-border overflow-hidden">
|
||||
<div
|
||||
ref={contentRef}
|
||||
className={cn(
|
||||
"px-5 py-3 text-sm text-white whitespace-pre-wrap font-display leading-relaxed",
|
||||
!expanded && overflowing && `max-h-[${COLLAPSED_MAX_HEIGHT}px]`,
|
||||
)}
|
||||
style={!expanded && overflowing ? { maxHeight: `${COLLAPSED_MAX_HEIGHT}px` } : undefined}
|
||||
>
|
||||
{esc(entry.content)}
|
||||
</div>
|
||||
{/* 折叠渐变遮罩 + 展开按钮 */}
|
||||
{!expanded && overflowing && (
|
||||
<div className="absolute bottom-0 inset-x-0 flex flex-col items-center pt-8 bg-gradient-to-t from-user-bubble via-user-bubble/80 to-transparent">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setExpanded(true)}
|
||||
className="flex items-center gap-1 px-3 py-1 rounded-full text-xs font-display font-medium text-white/90 hover:bg-white/15 transition-colors"
|
||||
>
|
||||
<span>展开</span>
|
||||
<ChevronDown className="h-3 w-3" />
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
@@ -37,7 +77,6 @@ export function UserBubble({ entry }: UserBubbleProps) {
|
||||
|
||||
// =============================================================================
|
||||
// 助手消息 — 左对齐，无背景卡片，编辑式排版
|
||||
// Anthropic: avatar + plain text, no bubble/card wrapper, serif body font
|
||||
// =============================================================================
|
||||
|
||||
interface AssistantBubbleProps {
|
||||
@@ -47,17 +86,17 @@ interface AssistantBubbleProps {
|
||||
|
||||
export function AssistantBubble({ entry, isStreaming }: AssistantBubbleProps) {
|
||||
return (
|
||||
<div className="flex gap-3 items-start">
|
||||
<div className="flex gap-4 items-start">
|
||||
{/* Orange triangle avatar */}
|
||||
<div className="w-7 h-7 rounded-lg bg-brand/10 flex items-center justify-center flex-shrink-0 mt-0.5">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true">
|
||||
<path d="M7 2L12 12H2L7 2Z" fill="var(--color-brand)" opacity=".85" />
|
||||
<div className="w-8 h-8 rounded-lg bg-brand/8 flex items-center justify-center flex-shrink-0 mt-0.5">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path d="M4.709 15.955l4.72-2.647.08-.23-.08-.128H9.2l-.79-.048-2.698-.073-2.339-.097-2.266-.122-.571-.121L0 11.784l.055-.352.48-.321.686.06 1.52.103 2.278.158 1.652.097 2.449.255h.389l.055-.157-.134-.098-.103-.097-2.358-1.596-2.552-1.688-1.336-.972-.724-.491-.364-.462-.158-1.008.656-.722.881.06.225.061.893.686 1.908 1.476 2.491 1.833.365.304.145-.103.019-.073-.164-.274-1.355-2.446-1.446-2.49-.644-1.032-.17-.619a2.97 2.97 0 01-.104-.729L6.283.134 6.696 0l.996.134.42.364.62 1.414 1.002 2.229 1.555 3.03.456.898.243.832.091.255h.158V9.01l.128-1.706.237-2.095.23-2.695.08-.76.376-.91.747-.492.584.28.48.685-.067.444-.286 1.851-.559 2.903-.364 1.942h.212l.243-.242.985-1.306 1.652-2.064.73-.82.85-.904.547-.431h1.033l.76 1.129-.34 1.166-1.064 1.347-.881 1.142-1.264 1.7-.79 1.36.073.11.188-.02 2.856-.606 1.543-.28 1.841-.315.833.388.091.395-.328.807-1.969.486-2.309.462-3.439.813-.042.03.049.061 1.549.146.662.036h1.622l3.02.225.79.522.474.638-.079.485-1.215.62-1.64-.389-3.829-.91-1.312-.329h-.182v.11l1.093 1.068 2.006 1.81 2.509 2.33.127.578-.322.455-.34-.049-2.205-1.657-.851-.747-1.926-1.62h-.128v.17l.444.649 2.345 3.521.122 1.08-.17.353-.608.213-.668-.122-1.374-1.925-1.415-2.167-1.143-1.943-.14.08-.674 7.254-.316.37-.729.28-.607-.461-.322-.747.322-1.476.389-1.924.315-1.53.286-1.9.17-.632-.012-.042-.14.018-1.434 1.967-2.18 2.945-1.726 1.845-.414.164-.717-.37.067-.662.401-.589 2.388-3.036 1.44-1.882.93-1.086-.006-.158h-.055L4.132 18.56l-1.13.146-.487-.456.061-.746.231-.243 1.908-1.312-.006.006z" fill="var(--color-brand)" fillRule="nonzero" />
|
||||
</svg>
|
||||
</div>
|
||||
{/* 内容 — 无卡片背景，直接排版 */}
|
||||
<div className="flex-1 min-w-0 space-y-3">
|
||||
<div className="flex-1 min-w-0 space-y-4">
|
||||
{/* Sender label */}
|
||||
<span className="text-sm font-medium text-text-primary font-display">Claude</span>
|
||||
<span className="text-sm font-semibold text-text-primary font-display">Claude</span>
|
||||
{entry.chunks.map((chunk, i) => {
|
||||
if (chunk.type === "thought") {
|
||||
const isLastChunk = i === entry.chunks.length - 1;
|
||||
@@ -66,7 +105,7 @@ export function AssistantBubble({ entry, isStreaming }: AssistantBubbleProps) {
|
||||
<Reasoning key={i} isStreaming={isThoughtStreaming}>
|
||||
<ReasoningTrigger />
|
||||
<ReasoningContent>
|
||||
<div className="text-sm text-text-secondary">
|
||||
<div className="text-sm text-text-secondary leading-relaxed">
|
||||
{chunk.text}
|
||||
</div>
|
||||
</ReasoningContent>
|
||||
@@ -75,7 +114,7 @@ export function AssistantBubble({ entry, isStreaming }: AssistantBubbleProps) {
|
||||
}
|
||||
// 普通消息块 — 直接输出，无包裹卡片
|
||||
return (
|
||||
<div key={i} className="message-content text-text-primary leading-loose">
|
||||
<div key={i} className="message-content text-text-primary leading-[1.75]">
|
||||
<MessageResponse>{chunk.text}</MessageResponse>
|
||||
</div>
|
||||
);
|
||||
@@ -96,7 +135,6 @@ function ImageThumbnail({ image }: { image: UserMessageImage }) {
|
||||
type="button"
|
||||
className="rounded-lg overflow-hidden border border-border hover:border-brand/40 transition-colors cursor-pointer"
|
||||
onClick={() => {
|
||||
// 简单的点击放大 — 在新标签页打开图片
|
||||
const w = window.open("");
|
||||
if (w) {
|
||||
w.document.write(`<img src="${dataUrl}" style="max-width:100%;max-height:100%" />`);
|
||||
@@ -105,7 +143,7 @@ function ImageThumbnail({ image }: { image: UserMessageImage }) {
|
||||
>
|
||||
<img
|
||||
src={dataUrl}
|
||||
alt="用户上传的图片"
|
||||
alt="Uploaded image"
|
||||
className="h-20 w-20 object-cover"
|
||||
/>
|
||||
</button>
|
||||
|
||||
Reference in New Issue
Block a user