mirror of
https://github.com/claude-code-best/claude-code.git
synced 2026-06-18 22:35: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
@@ -0,0 +1,86 @@
|
||||
import { useState, useEffect, useRef } from "react";
|
||||
import { ACPClient, DisconnectRequestedError } from "../acp/client";
|
||||
import type { ConnectionState } from "../acp/types";
|
||||
import { ACPMain } from "../../components/ACPMain";
|
||||
|
||||
interface ACPDirectViewProps {
|
||||
url: string;
|
||||
token: string;
|
||||
onBack: () => void;
|
||||
}
|
||||
|
||||
export function ACPDirectView({ url, token, onBack }: ACPDirectViewProps) {
|
||||
const [client, setClient] = useState<ACPClient | null>(null);
|
||||
const [connectionState, setConnectionState] = useState<ConnectionState>("disconnected");
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const clientRef = useRef<ACPClient | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const acpClient = new ACPClient({ proxyUrl: url, token });
|
||||
|
||||
acpClient.setConnectionStateHandler((state, err) => {
|
||||
setConnectionState(state);
|
||||
setError(err || null);
|
||||
});
|
||||
|
||||
clientRef.current = acpClient;
|
||||
setClient(acpClient);
|
||||
|
||||
acpClient.connect().catch((e) => {
|
||||
if (e instanceof DisconnectRequestedError) return;
|
||||
setError((e as Error).message);
|
||||
setConnectionState("error");
|
||||
});
|
||||
|
||||
return () => {
|
||||
acpClient.disconnect();
|
||||
clientRef.current = null;
|
||||
setClient(null);
|
||||
setConnectionState("disconnected");
|
||||
};
|
||||
}, [url, token]);
|
||||
|
||||
return (
|
||||
<div className="flex flex-1 flex-col overflow-hidden">
|
||||
{error && connectionState === "error" && (
|
||||
<div className="px-4 py-2 bg-status-error/10 text-status-error text-sm border-b">
|
||||
{error}
|
||||
<button
|
||||
onClick={onBack}
|
||||
className="ml-3 underline hover:no-underline"
|
||||
>
|
||||
Back to Dashboard
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{connectionState === "connecting" && (
|
||||
<div className="flex-1 flex items-center justify-center">
|
||||
<div className="text-center">
|
||||
<div className="animate-spin h-8 w-8 border-2 border-brand border-t-transparent rounded-full mx-auto mb-3" />
|
||||
<p className="text-text-muted text-sm">Connecting to ACP agent...</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{connectionState === "error" && !client && (
|
||||
<div className="flex-1 flex items-center justify-center">
|
||||
<div className="text-center">
|
||||
<p className="font-medium mb-1">Connection Failed</p>
|
||||
<p className="text-text-muted text-sm mb-3">{error}</p>
|
||||
<button
|
||||
onClick={onBack}
|
||||
className="rounded-lg bg-brand px-4 py-2 text-sm font-medium text-white hover:bg-brand-light transition-colors"
|
||||
>
|
||||
Back to Dashboard
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{client && connectionState === "connected" && (
|
||||
<ACPMain client={client} />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,5 +1,6 @@
|
||||
import { useState, useRef, useEffect } from "react";
|
||||
import { cn, isClosedSessionStatus } from "../lib/utils";
|
||||
import { Square, SendHorizonal } from "lucide-react";
|
||||
|
||||
interface ControlBarProps {
|
||||
sessionId: string;
|
||||
@@ -70,13 +71,9 @@ export function ControlBar({
|
||||
title={closed ? "Session is closed" : working ? "Stop" : "Send"}
|
||||
>
|
||||
{working ? (
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none">
|
||||
<rect x="3" y="3" width="12" height="12" rx="2" fill="currentColor" />
|
||||
</svg>
|
||||
<Square className="h-4.5 w-4.5 fill-current" />
|
||||
) : (
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
|
||||
<path d="M3 10L17 3L10 17L9 11L3 10Z" fill="currentColor" />
|
||||
</svg>
|
||||
<SendHorizonal className="h-5 w-5 fill-current" />
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -21,13 +21,15 @@ export function EnvironmentList({ environments, onSelectEnvironment }: Environme
|
||||
{environments.map((env) => {
|
||||
const isAcp = env.worker_type === "acp";
|
||||
const typeLabel = isAcp ? "ACP Agent" : "Claude Code";
|
||||
const typeColor = isAcp ? "bg-purple-100 text-purple-700" : "bg-blue-100 text-blue-700";
|
||||
const typeColor = isAcp ? "bg-brand/15 text-brand" : "bg-status-running/15 text-status-running";
|
||||
|
||||
return (
|
||||
<div
|
||||
<button
|
||||
key={env.id}
|
||||
type="button"
|
||||
onClick={() => onSelectEnvironment?.(env)}
|
||||
className={`flex items-center justify-between rounded-xl border border-border bg-surface-1 px-4 py-3 transition-colors hover:border-border-light ${onSelectEnvironment ? "cursor-pointer" : ""}`}
|
||||
disabled={isAcp}
|
||||
className={`flex w-full items-center justify-between rounded-xl border border-border bg-surface-1 px-4 py-3 text-left transition-colors ${isAcp ? "cursor-default opacity-80" : "hover:border-border-light cursor-pointer"}`}
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<div>
|
||||
@@ -48,7 +50,7 @@ export function EnvironmentList({ environments, onSelectEnvironment }: Environme
|
||||
{env.branch || ""}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
@@ -3,6 +3,14 @@ import QRCode from "qrcode";
|
||||
import QrScanner from "qr-scanner";
|
||||
import { getUuid, setUuid } from "../api/client";
|
||||
import { cn } from "../lib/utils";
|
||||
import { Scan } from "lucide-react";
|
||||
import { useTheme } from "../lib/theme";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "../../components/ui/dialog";
|
||||
|
||||
interface IdentityPanelProps {
|
||||
open: boolean;
|
||||
@@ -16,16 +24,28 @@ export function IdentityPanel({ open, onClose }: IdentityPanelProps) {
|
||||
const videoRef = useRef<HTMLVideoElement>(null);
|
||||
const scannerRef = useRef<QrScanner | null>(null);
|
||||
const uuid = getUuid();
|
||||
const { resolvedTheme } = useTheme();
|
||||
|
||||
const qrColors = resolvedTheme === "dark"
|
||||
? { dark: "#ECE9E0", light: "#1C1B18" }
|
||||
: { dark: "#141413", light: "#FDFCF8" };
|
||||
|
||||
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" },
|
||||
if (!open) return;
|
||||
// Defer one frame so Radix Dialog Portal has finished mounting the canvas
|
||||
const rafId = requestAnimationFrame(() => {
|
||||
if (!canvasRef.current) return;
|
||||
const qrUrl = `${window.location.origin}/code?uuid=${encodeURIComponent(uuid)}`;
|
||||
QRCode.toCanvas(canvasRef.current, qrUrl, {
|
||||
width: 200,
|
||||
margin: 1,
|
||||
color: qrColors,
|
||||
}).catch((err: unknown) => {
|
||||
console.error("QR generation failed:", err);
|
||||
});
|
||||
});
|
||||
}, [open, uuid]);
|
||||
return () => cancelAnimationFrame(rafId);
|
||||
}, [open, uuid, resolvedTheme]);
|
||||
|
||||
// Cleanup scanner on close
|
||||
useEffect(() => {
|
||||
@@ -78,9 +98,11 @@ export function IdentityPanel({ open, onClose }: IdentityPanelProps) {
|
||||
// Try ACP format: { url, token }
|
||||
const parsed = JSON.parse(data);
|
||||
if (parsed.url && parsed.token) {
|
||||
// ACP format — extract token as UUID-like identifier
|
||||
// Store ACP connection data and navigate to ACP direct connect view
|
||||
stopCamera();
|
||||
onClose();
|
||||
sessionStorage.setItem("acp_connection", JSON.stringify({ url: parsed.url, token: parsed.token }));
|
||||
window.location.href = "/code/?acp=1";
|
||||
return;
|
||||
}
|
||||
} catch {
|
||||
@@ -130,20 +152,11 @@ export function IdentityPanel({ open, onClose }: IdentityPanelProps) {
|
||||
};
|
||||
|
||||
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>
|
||||
<Dialog open={open} onOpenChange={(o) => { if (!o) onClose(); }}>
|
||||
<DialogContent className="max-w-sm rounded-2xl border-border bg-surface-1 p-6 shadow-2xl">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="font-display text-lg font-semibold text-text-primary">Identity</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="space-y-6">
|
||||
{/* UUID */}
|
||||
@@ -199,9 +212,7 @@ export function IdentityPanel({ open, onClose }: IdentityPanelProps) {
|
||||
: "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>
|
||||
<Scan className="h-4 w-4" />
|
||||
{scanning ? "Stop Camera" : "Scan with Camera"}
|
||||
</button>
|
||||
<button
|
||||
@@ -212,7 +223,7 @@ export function IdentityPanel({ open, onClose }: IdentityPanelProps) {
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,41 +1,63 @@
|
||||
import { cn } from "../lib/utils";
|
||||
import { ThemeToggle } from "../../components/ui/theme-toggle";
|
||||
import { ChevronLeft, LayoutGrid, UserPlus } from "lucide-react";
|
||||
|
||||
interface NavbarProps {
|
||||
onIdentityClick: () => void;
|
||||
sessionTitle?: string;
|
||||
onBack?: () => void;
|
||||
}
|
||||
|
||||
export function Navbar({ onIdentityClick }: NavbarProps) {
|
||||
export function Navbar({ onIdentityClick, sessionTitle, onBack }: NavbarProps) {
|
||||
return (
|
||||
<nav className="sticky top-0 z-40 border-b border-border bg-surface-1/80 backdrop-blur-md">
|
||||
<div className="mx-auto flex h-14 max-w-5xl items-center justify-between px-4">
|
||||
<a href="/code/" className="flex items-center gap-2 font-display text-lg font-semibold text-text-primary no-underline">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" aria-hidden="true">
|
||||
<path
|
||||
d="M10 1L12.2 7.8L19 10L12.2 12.2L10 19L7.8 12.2L1 10L7.8 7.8L10 1Z"
|
||||
fill="#D97757"
|
||||
/>
|
||||
</svg>
|
||||
Remote Control
|
||||
</a>
|
||||
<div className="flex items-center gap-1">
|
||||
<a
|
||||
href="/code/"
|
||||
className="rounded-md px-3 py-1.5 text-sm text-text-secondary hover:bg-surface-2 hover:text-text-primary no-underline transition-colors"
|
||||
>
|
||||
Dashboard
|
||||
</a>
|
||||
<button
|
||||
onClick={onIdentityClick}
|
||||
className="flex items-center gap-1 rounded-md px-3 py-1.5 text-sm text-text-secondary hover:bg-surface-2 hover:text-text-primary transition-colors"
|
||||
title="Identity & QR"
|
||||
>
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
|
||||
<div className="mx-auto flex h-11 sm:h-12 max-w-5xl items-center justify-between px-3 sm:px-4">
|
||||
{sessionTitle ? (
|
||||
/* Session 页面 — 返回按钮 + agent 名 */
|
||||
<div className="flex items-center gap-2 min-w-0">
|
||||
<button
|
||||
type="button"
|
||||
onClick={onBack}
|
||||
className="flex items-center gap-1 text-sm text-text-muted hover:text-text-primary transition-colors flex-shrink-0"
|
||||
>
|
||||
<ChevronLeft className="h-4 w-4" />
|
||||
<span className="hidden sm:inline">Dashboard</span>
|
||||
</button>
|
||||
<span className="text-text-muted/40">/</span>
|
||||
<span className="text-sm font-display font-medium text-text-primary truncate">{sessionTitle}</span>
|
||||
<span className="rounded-full bg-brand/15 px-2 py-0.5 text-[10px] font-medium text-brand flex-shrink-0">ACP</span>
|
||||
</div>
|
||||
) : (
|
||||
/* Dashboard 页面 — 品牌 */
|
||||
<a href="/code/" className="flex items-center gap-2 font-display text-lg font-semibold text-text-primary no-underline">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" aria-hidden="true" className="flex-shrink-0">
|
||||
<path
|
||||
d="M6 8C7.66 8 9 6.66 9 5C9 3.34 7.66 2 6 2C4.34 2 3 3.34 3 5C3 6.66 4.34 8 6 8ZM6 10C3.99 10 0 11.01 0 13V14H12V13C12 11.01 8.01 10 6 10ZM13 8V5H11V8H8V10H11V13H13V10H16V8H13Z"
|
||||
fill="currentColor"
|
||||
d="M10 1L12.2 7.8L19 10L12.2 12.2L10 19L7.8 12.2L1 10L7.8 7.8L10 1Z"
|
||||
fill="var(--color-brand)"
|
||||
/>
|
||||
</svg>
|
||||
Identity
|
||||
<span className="hidden sm:inline">Remote Control</span>
|
||||
</a>
|
||||
)}
|
||||
<div className="flex items-center gap-0.5 sm:gap-1">
|
||||
{!sessionTitle && (
|
||||
<a
|
||||
href="/code/"
|
||||
className="flex items-center gap-1 rounded-md px-2 sm:px-3 py-1.5 text-sm text-text-secondary hover:bg-surface-2 hover:text-text-primary no-underline transition-colors"
|
||||
title="Dashboard"
|
||||
>
|
||||
<LayoutGrid className="h-4 w-4" />
|
||||
<span className="hidden sm:inline">Dashboard</span>
|
||||
</a>
|
||||
)}
|
||||
<ThemeToggle />
|
||||
<button
|
||||
onClick={onIdentityClick}
|
||||
className="flex items-center gap-1 rounded-md px-2 sm:px-3 py-1.5 text-sm text-text-secondary hover:bg-surface-2 hover:text-text-primary transition-colors"
|
||||
title="Identity & QR"
|
||||
>
|
||||
<UserPlus className="h-4 w-4" />
|
||||
<span className="hidden sm:inline">Identity</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,6 +1,13 @@
|
||||
import { useState, useEffect } from "react";
|
||||
import type { Environment, Session } from "../types";
|
||||
import { apiCreateSession } from "../api/client";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogFooter,
|
||||
} from "../../components/ui/dialog";
|
||||
|
||||
interface NewSessionDialogProps {
|
||||
open: boolean;
|
||||
@@ -23,8 +30,6 @@ export function NewSessionDialog({ open, environments, onClose, onCreated }: New
|
||||
}
|
||||
}, [open]);
|
||||
|
||||
if (!open) return null;
|
||||
|
||||
const handleCreate = async () => {
|
||||
setCreating(true);
|
||||
setError("");
|
||||
@@ -42,12 +47,11 @@ export function NewSessionDialog({ open, environments, onClose, onCreated }: New
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50" onClick={onClose}>
|
||||
<div
|
||||
className="w-full max-w-md rounded-2xl border border-border bg-surface-1 p-6 shadow-2xl"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<h3 className="mb-4 font-display text-lg font-semibold text-text-primary">New Session</h3>
|
||||
<Dialog open={open} onOpenChange={(o) => { if (!o) onClose(); }}>
|
||||
<DialogContent className="max-w-md rounded-2xl border-border bg-surface-1 p-6 shadow-2xl">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="font-display text-lg font-semibold text-text-primary">New Session</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
@@ -78,24 +82,24 @@ export function NewSessionDialog({ open, environments, onClose, onCreated }: New
|
||||
</div>
|
||||
|
||||
{error && <div className="text-sm text-status-error">{error}</div>}
|
||||
|
||||
<div className="flex justify-end gap-2 pt-2">
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="rounded-lg border border-border px-4 py-2 text-sm text-text-secondary hover:bg-surface-2 transition-colors"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
onClick={handleCreate}
|
||||
disabled={creating}
|
||||
className="rounded-lg bg-brand px-4 py-2 text-sm font-medium text-white hover:bg-brand-light disabled:opacity-50 transition-colors"
|
||||
>
|
||||
{creating ? "Creating..." : "Create"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<DialogFooter>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="rounded-lg border border-border px-4 py-2 text-sm text-text-secondary hover:bg-surface-2 transition-colors"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
onClick={handleCreate}
|
||||
disabled={creating}
|
||||
className="rounded-lg bg-brand px-4 py-2 text-sm font-medium text-white hover:bg-brand-light disabled:opacity-50 transition-colors"
|
||||
>
|
||||
{creating ? "Creating..." : "Create"}
|
||||
</button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import { useState } from "react";
|
||||
import type { Question } from "../types";
|
||||
import { esc, cn, truncate } from "../lib/utils";
|
||||
import { TriangleAlert, Check } from "lucide-react";
|
||||
|
||||
// ============================================================
|
||||
// PermissionPromptView — simple approve/reject for tool use
|
||||
@@ -24,12 +25,10 @@ export function PermissionPromptView({
|
||||
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="rounded-xl border border-warning-border/30 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>
|
||||
<TriangleAlert className="h-3 w-3" />
|
||||
</span>
|
||||
<span className="text-sm font-semibold text-warning-text">Permission Request</span>
|
||||
</div>
|
||||
@@ -284,9 +283,7 @@ export function PlanPanelView({
|
||||
<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>
|
||||
<Check className="h-3 w-3" strokeWidth={2.5} />
|
||||
</span>
|
||||
<span className="text-sm font-semibold text-text-primary">
|
||||
{isEmpty ? "Exit plan mode?" : "Ready to code?"}
|
||||
|
||||
@@ -21,10 +21,11 @@ export function SessionList({ sessions, onSelect }: SessionListProps) {
|
||||
return (
|
||||
<div className="space-y-2">
|
||||
{sorted.map((session) => (
|
||||
<div
|
||||
<button
|
||||
key={session.id}
|
||||
type="button"
|
||||
onClick={() => onSelect(session.id)}
|
||||
className="flex cursor-pointer items-center justify-between rounded-xl border border-border bg-surface-1 px-4 py-3 transition-colors hover:border-border-light hover:bg-surface-2"
|
||||
className="flex w-full items-center justify-between rounded-xl border border-border bg-surface-1 px-4 py-3 text-left transition-colors hover:border-border-light hover:bg-surface-2"
|
||||
>
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="flex items-center gap-2">
|
||||
@@ -32,7 +33,7 @@ export function SessionList({ sessions, onSelect }: SessionListProps) {
|
||||
{session.title || session.id}
|
||||
</span>
|
||||
{session.source === "acp" && (
|
||||
<span className="rounded-full bg-purple-100 px-2 py-0.5 text-xs font-medium text-purple-700">
|
||||
<span className="rounded-full bg-brand/15 px-2 py-0.5 text-xs font-medium text-brand">
|
||||
ACP
|
||||
</span>
|
||||
)}
|
||||
@@ -45,7 +46,7 @@ export function SessionList({ sessions, onSelect }: SessionListProps) {
|
||||
{formatTime(session.created_at || session.updated_at)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -1,25 +1,26 @@
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "../../components/ui/dialog";
|
||||
|
||||
interface TaskPanelProps {
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
export function TaskPanel({ onClose }: TaskPanelProps) {
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex justify-end bg-black/30" onClick={onClose}>
|
||||
<div
|
||||
className="w-80 border-l border-border bg-surface-1 p-4"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
<Dialog open={true} onOpenChange={(o) => { if (!o) onClose(); }}>
|
||||
<DialogContent
|
||||
showCloseButton={false}
|
||||
className="fixed inset-y-0 right-0 top-auto left-auto translate-x-0 translate-y-0 w-full sm:w-80 h-full max-w-none max-h-none rounded-none border-l border-border bg-surface-1 p-4 sm:max-w-sm"
|
||||
>
|
||||
<div className="mb-4 flex items-center justify-between">
|
||||
<h3 className="font-display font-semibold text-text-primary">Tasks</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>
|
||||
<DialogHeader>
|
||||
<DialogTitle className="font-display font-semibold text-text-primary">Tasks</DialogTitle>
|
||||
</DialogHeader>
|
||||
<div className="text-sm text-text-muted">No active tasks</div>
|
||||
</div>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user