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
@@ -1,14 +1,17 @@
|
||||
import { useState, useEffect, useCallback } from "react";
|
||||
import { useState, useEffect, useCallback, lazy, Suspense } from "react";
|
||||
import { Navbar } from "./components/Navbar";
|
||||
import { Dashboard } from "./pages/Dashboard";
|
||||
import { SessionDetail } from "./pages/SessionDetail";
|
||||
import { IdentityPanel } from "./components/IdentityPanel";
|
||||
import { ThemeProvider } from "./lib/theme";
|
||||
import { getUuid, setUuid, apiBind } from "./api/client";
|
||||
import { ACPDirectView } from "./components/ACPDirectView";
|
||||
|
||||
const Dashboard = lazy(() => import("./pages/Dashboard").then((m) => ({ default: m.Dashboard })));
|
||||
const SessionDetail = lazy(() => import("./pages/SessionDetail").then((m) => ({ default: m.SessionDetail })));
|
||||
|
||||
export default function App() {
|
||||
const [currentSessionId, setCurrentSessionId] = useState<string | null>(null);
|
||||
const [identityOpen, setIdentityOpen] = useState(false);
|
||||
const [acpDirect, setAcpDirect] = useState<{ url: string; token: string } | null>(null);
|
||||
|
||||
// Simple hash-based router
|
||||
const parseRoute = useCallback(() => {
|
||||
@@ -27,6 +30,28 @@ export default function App() {
|
||||
window.history.replaceState(null, "", url);
|
||||
}
|
||||
|
||||
// Check for ACP direct connection (?acp=1)
|
||||
const acpParam = params.get("acp");
|
||||
if (acpParam === "1") {
|
||||
const stored = sessionStorage.getItem("acp_connection");
|
||||
if (stored) {
|
||||
try {
|
||||
const acpData = JSON.parse(stored);
|
||||
if (acpData.url && acpData.token) {
|
||||
setAcpDirect({ url: acpData.url, token: acpData.token });
|
||||
sessionStorage.removeItem("acp_connection");
|
||||
// Clean URL
|
||||
const url = new URL(window.location.href);
|
||||
url.searchParams.delete("acp");
|
||||
window.history.replaceState(null, "", url);
|
||||
return;
|
||||
}
|
||||
} catch {
|
||||
sessionStorage.removeItem("acp_connection");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Check for CLI session bind (?sid=xxx) — bind session to current UUID
|
||||
const sid = params.get("sid");
|
||||
if (sid) {
|
||||
@@ -64,20 +89,29 @@ export default function App() {
|
||||
const navigateToDashboard = useCallback(() => {
|
||||
window.history.pushState(null, "", "/code/");
|
||||
setCurrentSessionId(null);
|
||||
setAcpDirect(null);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<ThemeProvider defaultTheme="light">
|
||||
<ThemeProvider defaultTheme="system">
|
||||
<div className="flex h-screen flex-col bg-surface-0 text-text-primary">
|
||||
<Navbar onIdentityClick={() => setIdentityOpen(true)} />
|
||||
<Navbar
|
||||
onIdentityClick={() => setIdentityOpen(true)}
|
||||
sessionTitle={currentSessionId || (acpDirect ? "ACP" : undefined)}
|
||||
onBack={(currentSessionId || acpDirect) ? navigateToDashboard : undefined}
|
||||
/>
|
||||
|
||||
{currentSessionId ? (
|
||||
<SessionDetail key={currentSessionId} sessionId={currentSessionId} />
|
||||
) : (
|
||||
<div className="flex-1 overflow-y-auto">
|
||||
<Dashboard onNavigateSession={navigateToSession} />
|
||||
</div>
|
||||
)}
|
||||
<Suspense fallback={<div className="flex flex-1 items-center justify-center text-text-muted">Loading...</div>}>
|
||||
{acpDirect ? (
|
||||
<ACPDirectView url={acpDirect.url} token={acpDirect.token} onBack={navigateToDashboard} />
|
||||
) : currentSessionId ? (
|
||||
<SessionDetail key={currentSessionId} sessionId={currentSessionId} />
|
||||
) : (
|
||||
<div className="flex-1 overflow-y-auto">
|
||||
<Dashboard onNavigateSession={navigateToSession} />
|
||||
</div>
|
||||
)}
|
||||
</Suspense>
|
||||
|
||||
<IdentityPanel open={identityOpen} onClose={() => setIdentityOpen(false)} />
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,143 @@
|
||||
import { describe, test, expect, mock, beforeEach } from "bun:test";
|
||||
|
||||
// In-memory localStorage mock
|
||||
let store: Record<string, string> = {};
|
||||
|
||||
beforeEach(() => {
|
||||
store = {};
|
||||
(globalThis as any).localStorage = {
|
||||
getItem: (k: string) => store[k] ?? null,
|
||||
setItem: (k: string, v: string) => { store[k] = v; },
|
||||
removeItem: (k: string) => { delete store[k]; },
|
||||
clear: () => { store = {}; },
|
||||
get length() { return Object.keys(store).length; },
|
||||
key: () => null,
|
||||
};
|
||||
});
|
||||
|
||||
// Mock fetch
|
||||
const fetchMock = {
|
||||
lastUrl: "",
|
||||
lastOpts: {} as RequestInit,
|
||||
response: { ok: true, status: 200, statusText: "OK" },
|
||||
responseData: {} as any,
|
||||
};
|
||||
|
||||
beforeEach(() => {
|
||||
fetchMock.lastUrl = "";
|
||||
fetchMock.lastOpts = {};
|
||||
fetchMock.response = { ok: true, status: 200, statusText: "OK" };
|
||||
fetchMock.responseData = {};
|
||||
});
|
||||
|
||||
(globalThis as any).fetch = async (url: string, opts: RequestInit) => {
|
||||
fetchMock.lastUrl = url;
|
||||
fetchMock.lastOpts = opts;
|
||||
return {
|
||||
ok: fetchMock.response.ok,
|
||||
status: fetchMock.response.status,
|
||||
statusText: fetchMock.response.statusText,
|
||||
json: async () => fetchMock.responseData,
|
||||
} as Response;
|
||||
};
|
||||
|
||||
// Mock crypto.randomUUID
|
||||
(globalThis as any).crypto = {
|
||||
randomUUID: () => "test-uuid-12345678",
|
||||
};
|
||||
|
||||
const { getUuid, setUuid } = await import("../api/client");
|
||||
|
||||
// Import api* functions - they depend on getUuid and fetch
|
||||
const client = await import("../api/client");
|
||||
|
||||
// =============================================================================
|
||||
// getUuid()
|
||||
// =============================================================================
|
||||
|
||||
describe("getUuid", () => {
|
||||
test("returns existing UUID from localStorage", () => {
|
||||
store["rcs_uuid"] = "existing-uuid";
|
||||
expect(getUuid()).toBe("existing-uuid");
|
||||
});
|
||||
|
||||
test("generates and stores new UUID when none exists", () => {
|
||||
const uuid = getUuid();
|
||||
expect(uuid).toBe("test-uuid-12345678");
|
||||
expect(store["rcs_uuid"]).toBe("test-uuid-12345678");
|
||||
});
|
||||
|
||||
test("returns same UUID on subsequent calls", () => {
|
||||
const a = getUuid();
|
||||
const b = getUuid();
|
||||
expect(a).toBe(b);
|
||||
});
|
||||
});
|
||||
|
||||
// =============================================================================
|
||||
// setUuid()
|
||||
// =============================================================================
|
||||
|
||||
describe("setUuid", () => {
|
||||
test("writes UUID to localStorage", () => {
|
||||
setUuid("custom-uuid-999");
|
||||
expect(store["rcs_uuid"]).toBe("custom-uuid-999");
|
||||
});
|
||||
|
||||
test("getUuid returns the set UUID", () => {
|
||||
setUuid("my-uuid");
|
||||
expect(getUuid()).toBe("my-uuid");
|
||||
});
|
||||
});
|
||||
|
||||
// =============================================================================
|
||||
// api() — tested via apiFetchSession (GET) and apiBind (POST)
|
||||
// =============================================================================
|
||||
|
||||
describe("api functions", () => {
|
||||
test("GET request appends uuid to URL", async () => {
|
||||
store["rcs_uuid"] = "test-uuid";
|
||||
fetchMock.responseData = [];
|
||||
await client.apiFetchSessions();
|
||||
expect(fetchMock.lastUrl).toContain("uuid=test-uuid");
|
||||
expect(fetchMock.lastOpts.method).toBe("GET");
|
||||
});
|
||||
|
||||
test("GET request uses ? for URL without existing query params", async () => {
|
||||
store["rcs_uuid"] = "test-uuid";
|
||||
fetchMock.responseData = [];
|
||||
await client.apiFetchSessions();
|
||||
expect(fetchMock.lastUrl).toContain("?uuid=");
|
||||
});
|
||||
|
||||
test("GET request uses & for URL with existing query params", async () => {
|
||||
store["rcs_uuid"] = "test-uuid";
|
||||
fetchMock.responseData = [];
|
||||
await client.apiFetchAllSessions();
|
||||
// apiFetchAllSessions calls GET /web/sessions/all
|
||||
expect(fetchMock.lastUrl).toContain("?uuid=");
|
||||
});
|
||||
|
||||
test("POST request includes JSON body", async () => {
|
||||
store["rcs_uuid"] = "test-uuid";
|
||||
fetchMock.responseData = {};
|
||||
await client.apiBind("sess-1");
|
||||
expect(fetchMock.lastOpts.method).toBe("POST");
|
||||
expect(fetchMock.lastOpts.body).toBe(JSON.stringify({ sessionId: "sess-1" }));
|
||||
expect(fetchMock.lastOpts.headers).toEqual({ "Content-Type": "application/json" });
|
||||
});
|
||||
|
||||
test("throws error on non-ok response", async () => {
|
||||
store["rcs_uuid"] = "test-uuid";
|
||||
fetchMock.response = { ok: false, status: 401, statusText: "Unauthorized" };
|
||||
fetchMock.responseData = { error: { type: "auth", message: "Invalid UUID" } };
|
||||
await expect(client.apiFetchSessions()).rejects.toThrow("Invalid UUID");
|
||||
});
|
||||
|
||||
test("throws with statusText when error message is missing", async () => {
|
||||
store["rcs_uuid"] = "test-uuid";
|
||||
fetchMock.response = { ok: false, status: 500, statusText: "Internal Server Error" };
|
||||
fetchMock.responseData = {};
|
||||
await expect(client.apiFetchSessions()).rejects.toThrow("Internal Server Error");
|
||||
});
|
||||
});
|
||||
221
packages/remote-control-server/web/src/__tests__/utils.test.ts
Normal file
221
packages/remote-control-server/web/src/__tests__/utils.test.ts
Normal file
@@ -0,0 +1,221 @@
|
||||
import { describe, test, expect } from "bun:test";
|
||||
|
||||
const {
|
||||
formatTime,
|
||||
statusClass,
|
||||
isClosedSessionStatus,
|
||||
truncate,
|
||||
generateMessageUuid,
|
||||
extractEventText,
|
||||
isConversationClearedStatus,
|
||||
} = await import("../lib/utils");
|
||||
|
||||
// =============================================================================
|
||||
// formatTime()
|
||||
// =============================================================================
|
||||
|
||||
describe("formatTime", () => {
|
||||
test("returns empty string for null", () => {
|
||||
expect(formatTime(null)).toBe("");
|
||||
});
|
||||
|
||||
test("returns empty string for undefined", () => {
|
||||
expect(formatTime(undefined)).toBe("");
|
||||
});
|
||||
|
||||
test("returns empty string for 0", () => {
|
||||
expect(formatTime(0)).toBe("");
|
||||
});
|
||||
|
||||
test("formats valid unix timestamp", () => {
|
||||
const result = formatTime(1700000000);
|
||||
expect(result).toContain("2023");
|
||||
});
|
||||
});
|
||||
|
||||
// =============================================================================
|
||||
// statusClass()
|
||||
// =============================================================================
|
||||
|
||||
describe("statusClass", () => {
|
||||
test("maps known statuses correctly", () => {
|
||||
expect(statusClass("active")).toBe("active");
|
||||
expect(statusClass("running")).toBe("running");
|
||||
expect(statusClass("idle")).toBe("idle");
|
||||
expect(statusClass("inactive")).toBe("inactive");
|
||||
expect(statusClass("requires_action")).toBe("requires_action");
|
||||
expect(statusClass("archived")).toBe("archived");
|
||||
expect(statusClass("error")).toBe("error");
|
||||
});
|
||||
|
||||
test("returns default for unknown status", () => {
|
||||
expect(statusClass("unknown")).toBe("default");
|
||||
});
|
||||
|
||||
test("returns default for null", () => {
|
||||
expect(statusClass(null)).toBe("default");
|
||||
});
|
||||
|
||||
test("returns default for undefined", () => {
|
||||
expect(statusClass(undefined)).toBe("default");
|
||||
});
|
||||
|
||||
test("returns default for empty string", () => {
|
||||
expect(statusClass("")).toBe("default");
|
||||
});
|
||||
});
|
||||
|
||||
// =============================================================================
|
||||
// isClosedSessionStatus()
|
||||
// =============================================================================
|
||||
|
||||
describe("isClosedSessionStatus", () => {
|
||||
test("returns true for archived", () => {
|
||||
expect(isClosedSessionStatus("archived")).toBe(true);
|
||||
});
|
||||
|
||||
test("returns true for inactive", () => {
|
||||
expect(isClosedSessionStatus("inactive")).toBe(true);
|
||||
});
|
||||
|
||||
test("returns false for active", () => {
|
||||
expect(isClosedSessionStatus("active")).toBe(false);
|
||||
});
|
||||
|
||||
test("returns false for null", () => {
|
||||
expect(isClosedSessionStatus(null)).toBe(false);
|
||||
});
|
||||
|
||||
test("returns false for undefined", () => {
|
||||
expect(isClosedSessionStatus(undefined)).toBe(false);
|
||||
});
|
||||
});
|
||||
|
||||
// =============================================================================
|
||||
// truncate()
|
||||
// =============================================================================
|
||||
|
||||
describe("truncate", () => {
|
||||
test("returns empty string for null", () => {
|
||||
expect(truncate(null, 10)).toBe("");
|
||||
});
|
||||
|
||||
test("returns empty string for undefined", () => {
|
||||
expect(truncate(undefined, 10)).toBe("");
|
||||
});
|
||||
|
||||
test("returns original string when shorter than max", () => {
|
||||
expect(truncate("hello", 10)).toBe("hello");
|
||||
});
|
||||
|
||||
test("returns original string when exactly max length", () => {
|
||||
expect(truncate("12345", 5)).toBe("12345");
|
||||
});
|
||||
|
||||
test("truncates and appends ... when longer than max", () => {
|
||||
expect(truncate("hello world", 5)).toBe("hello...");
|
||||
});
|
||||
});
|
||||
|
||||
// =============================================================================
|
||||
// generateMessageUuid()
|
||||
// =============================================================================
|
||||
|
||||
describe("generateMessageUuid", () => {
|
||||
test("returns a non-empty string", () => {
|
||||
const uuid = generateMessageUuid();
|
||||
expect(typeof uuid).toBe("string");
|
||||
expect(uuid.length).toBeGreaterThan(0);
|
||||
});
|
||||
});
|
||||
|
||||
// =============================================================================
|
||||
// extractEventText()
|
||||
// =============================================================================
|
||||
|
||||
describe("extractEventText", () => {
|
||||
test("returns empty string for null", () => {
|
||||
expect(extractEventText(null)).toBe("");
|
||||
});
|
||||
|
||||
test("returns empty string for undefined", () => {
|
||||
expect(extractEventText(undefined)).toBe("");
|
||||
});
|
||||
|
||||
test("returns empty string for non-object", () => {
|
||||
expect(extractEventText("string" as any)).toBe("");
|
||||
});
|
||||
|
||||
test("extracts payload.content string", () => {
|
||||
expect(extractEventText({ content: "hello" })).toBe("hello");
|
||||
});
|
||||
|
||||
test("extracts from message.content text blocks array", () => {
|
||||
const payload = {
|
||||
message: {
|
||||
content: [
|
||||
{ type: "text", text: "line 1" },
|
||||
{ type: "text", text: "line 2" },
|
||||
],
|
||||
},
|
||||
};
|
||||
expect(extractEventText(payload)).toBe("line 1\nline 2");
|
||||
});
|
||||
|
||||
test("ignores non-text blocks", () => {
|
||||
const payload = {
|
||||
message: {
|
||||
content: [
|
||||
{ type: "image", data: "base64..." },
|
||||
{ type: "text", text: "only text" },
|
||||
],
|
||||
},
|
||||
};
|
||||
expect(extractEventText(payload)).toBe("only text");
|
||||
});
|
||||
|
||||
test("returns empty string when message.content has no text blocks", () => {
|
||||
const payload = {
|
||||
message: { content: [{ type: "image", data: "base64" }] },
|
||||
};
|
||||
expect(extractEventText(payload)).toBe("");
|
||||
});
|
||||
|
||||
test("returns empty string for empty object", () => {
|
||||
expect(extractEventText({})).toBe("");
|
||||
});
|
||||
});
|
||||
|
||||
// =============================================================================
|
||||
// isConversationClearedStatus()
|
||||
// =============================================================================
|
||||
|
||||
describe("isConversationClearedStatus", () => {
|
||||
test("returns true when payload.status is conversation_cleared", () => {
|
||||
expect(isConversationClearedStatus({ status: "conversation_cleared" })).toBe(true);
|
||||
});
|
||||
|
||||
test("returns true when payload.raw.status is conversation_cleared", () => {
|
||||
expect(isConversationClearedStatus({ raw: { status: "conversation_cleared" } })).toBe(true);
|
||||
});
|
||||
|
||||
test("returns false for null", () => {
|
||||
expect(isConversationClearedStatus(null)).toBe(false);
|
||||
});
|
||||
|
||||
test("returns false for undefined", () => {
|
||||
expect(isConversationClearedStatus(undefined)).toBe(false);
|
||||
});
|
||||
|
||||
test("returns false for other status", () => {
|
||||
expect(isConversationClearedStatus({ status: "active" })).toBe(false);
|
||||
});
|
||||
|
||||
test("returns false when raw has different status", () => {
|
||||
expect(isConversationClearedStatus({ raw: { status: "running" } })).toBe(false);
|
||||
});
|
||||
|
||||
test("returns false for empty object", () => {
|
||||
expect(isConversationClearedStatus({})).toBe(false);
|
||||
});
|
||||
});
|
||||
@@ -568,10 +568,10 @@ export class ACPClient {
|
||||
this.ws.send(JSON.stringify(message));
|
||||
}
|
||||
|
||||
async createSession(cwd?: string): Promise<void> {
|
||||
async createSession(cwd?: string, permissionMode?: string): Promise<void> {
|
||||
// Use provided cwd, or fall back to settings.cwd
|
||||
const sessionCwd = cwd ?? this.settings.cwd;
|
||||
this.send({ type: "new_session", payload: { cwd: sessionCwd } });
|
||||
this.send({ type: "new_session", payload: { cwd: sessionCwd, permissionMode } });
|
||||
}
|
||||
|
||||
// Reference: Zed's MessageEditor.contents() builds Vec<acp::ContentBlock>
|
||||
|
||||
@@ -88,7 +88,7 @@ export type BrowserToolResult =
|
||||
export type ProxyMessage =
|
||||
| { type: "connect" }
|
||||
| { type: "disconnect" }
|
||||
| { type: "new_session"; payload?: { cwd?: string } }
|
||||
| { type: "new_session"; payload?: { cwd?: string; permissionMode?: string } }
|
||||
| { type: "prompt"; payload: { content: ContentBlock[] } } // Changed from { text: string } to match Zed
|
||||
| { type: "cancel" }
|
||||
| { type: "permission_response"; payload: PermissionResponsePayload }
|
||||
@@ -295,8 +295,20 @@ export interface AgentThoughtChunkUpdate {
|
||||
content: ContentBlock;
|
||||
}
|
||||
|
||||
export type PlanEntryPriority = "high" | "medium" | "low";
|
||||
export type PlanEntryStatus = "pending" | "in_progress" | "completed";
|
||||
|
||||
export interface PlanEntry {
|
||||
_meta?: Record<string, unknown> | null;
|
||||
content: string;
|
||||
priority: PlanEntryPriority;
|
||||
status: PlanEntryStatus;
|
||||
}
|
||||
|
||||
export interface PlanUpdate {
|
||||
sessionUpdate: "plan";
|
||||
_meta?: Record<string, unknown> | null;
|
||||
entries: PlanEntry[];
|
||||
}
|
||||
|
||||
export interface UserMessageChunkUpdate {
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -37,6 +37,13 @@ export function useModels(client: ACPClient): UseModelsResult {
|
||||
// Handler for when model state changes (session created or disconnected)
|
||||
const handleModelStateChanged = (state: SessionModelState | null) => {
|
||||
setModelState(state);
|
||||
// Auto-restore previously selected model when a new session is created
|
||||
if (state && state.availableModels.length > 0) {
|
||||
const saved = localStorage.getItem("acp_model_id");
|
||||
if (saved && saved !== state.currentModelId && state.availableModels.some((m) => m.modelId === saved)) {
|
||||
client.setSessionModel(saved).catch(() => {});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Handler for when current model changes within a session
|
||||
@@ -83,6 +90,7 @@ export function useModels(client: ACPClient): UseModelsResult {
|
||||
setIsLoading(true);
|
||||
try {
|
||||
await client.setSessionModel(modelId);
|
||||
localStorage.setItem("acp_model_id", modelId);
|
||||
// The model_changed event will update the state
|
||||
} catch (error) {
|
||||
setIsLoading(false);
|
||||
|
||||
@@ -6,7 +6,9 @@
|
||||
|
||||
|
||||
/* ============================================================
|
||||
Theme — Anthropic-inspired warm design tokens
|
||||
Theme — Refined stone palette (warm gray, not beige)
|
||||
Hue shifted from 85 (yellow-cream) to 65 (warm stone)
|
||||
Brand orange pops harder against cleaner neutrals
|
||||
============================================================ */
|
||||
@theme {
|
||||
/* Fonts — Lora (serif body) + Poppins (sans-serif UI) + JetBrains Mono */
|
||||
@@ -14,63 +16,67 @@
|
||||
--font-display: "Poppins", sans-serif;
|
||||
--font-mono: "JetBrains Mono", monospace;
|
||||
|
||||
/* Brand — signature orange */
|
||||
--color-brand: #D97757;
|
||||
--color-brand-light: #C96A4D;
|
||||
--color-brand-subtle: rgba(217, 119, 87, 0.1);
|
||||
/* Brand — signature orange (unchanged) */
|
||||
--color-brand: #C96442;
|
||||
--color-brand-light: #B55838;
|
||||
--color-brand-subtle: oklch(0.65 0.12 30 / 0.08);
|
||||
|
||||
/* Surfaces — warm beige palette (not white) */
|
||||
--color-surface-0: #ECE9E0;
|
||||
--color-surface-1: #F5F3EC;
|
||||
--color-surface-2: #FDFCF8;
|
||||
--color-surface-3: #E8E6DC;
|
||||
/* Surfaces — warm stone gray (not yellow-beige) */
|
||||
--color-surface-0: #EFEEE9;
|
||||
--color-surface-1: #F6F5F2;
|
||||
--color-surface-2: #FBFAF8;
|
||||
--color-surface-3: #DFDDD8;
|
||||
|
||||
/* Text — warm dark tones */
|
||||
--color-text-primary: #141413;
|
||||
--color-text-secondary: #6B6860;
|
||||
--color-text-muted: #9C9890;
|
||||
/* Text — warm near-black tones */
|
||||
--color-text-primary: #1A1917;
|
||||
--color-text-secondary: #5E5A54;
|
||||
--color-text-muted: #969088;
|
||||
|
||||
/* Inverted — for user message bubbles */
|
||||
--color-bg-inverted: #2D2B27;
|
||||
--color-text-inverted: #F5F3EC;
|
||||
--color-bg-inverted: #2C2A27;
|
||||
--color-text-inverted: #F6F5F2;
|
||||
|
||||
/* Warning — warm yellow for permission panels */
|
||||
--color-warning-bg: #FEF3C7;
|
||||
--color-warning-border: #F59E0B;
|
||||
--color-warning-text: #92400E;
|
||||
/* User bubble — brand-tinted surface */
|
||||
--color-user-bubble: #C96442;
|
||||
--color-user-bubble-border: #B55838;
|
||||
|
||||
/* Warning — refined amber (less construction-zone) */
|
||||
--color-warning-bg: oklch(0.96 0.02 85);
|
||||
--color-warning-border: oklch(0.75 0.14 75);
|
||||
--color-warning-text: oklch(0.40 0.08 60);
|
||||
|
||||
/* Status */
|
||||
--color-status-active: #6B8F47;
|
||||
--color-status-running: #4A7FB5;
|
||||
--color-status-active: #5D8A3C;
|
||||
--color-status-running: #3D72A8;
|
||||
--color-status-idle: #7C3aed;
|
||||
--color-status-error: #C0453A;
|
||||
--color-status-warning: #C9943A;
|
||||
--color-status-error: #B83B31;
|
||||
--color-status-warning: #B88630;
|
||||
|
||||
/* Tool card */
|
||||
--color-tool-card: #F5F3EC;
|
||||
--color-tool-card: #F6F5F2;
|
||||
|
||||
/* shadcn/ui tokens (oklch — warm hue ~85) */
|
||||
--color-background: oklch(0.94 0.01 85);
|
||||
--color-foreground: oklch(0.20 0.01 85);
|
||||
--color-card: oklch(0.97 0.008 85);
|
||||
--color-card-foreground: oklch(0.20 0.01 85);
|
||||
--color-popover: oklch(0.97 0.008 85);
|
||||
--color-popover-foreground: oklch(0.20 0.01 85);
|
||||
--color-primary: oklch(0.20 0.01 85);
|
||||
--color-primary-foreground: oklch(0.96 0.01 85);
|
||||
--color-secondary: oklch(0.95 0.01 85);
|
||||
--color-secondary-foreground: oklch(0.20 0.01 85);
|
||||
--color-muted: oklch(0.93 0.01 85);
|
||||
--color-muted-foreground: oklch(0.50 0.02 85);
|
||||
--color-accent: oklch(0.95 0.01 85);
|
||||
--color-accent-foreground: oklch(0.20 0.01 85);
|
||||
/* shadcn/ui tokens (oklch — warm stone hue ~65) */
|
||||
--color-background: oklch(0.955 0.006 65);
|
||||
--color-foreground: oklch(0.19 0.008 65);
|
||||
--color-card: oklch(0.975 0.005 65);
|
||||
--color-card-foreground: oklch(0.19 0.008 65);
|
||||
--color-popover: oklch(0.975 0.005 65);
|
||||
--color-popover-foreground: oklch(0.19 0.008 65);
|
||||
--color-primary: oklch(0.19 0.008 65);
|
||||
--color-primary-foreground: oklch(0.97 0.005 65);
|
||||
--color-secondary: oklch(0.955 0.006 65);
|
||||
--color-secondary-foreground: oklch(0.19 0.008 65);
|
||||
--color-muted: oklch(0.935 0.006 65);
|
||||
--color-muted-foreground: oklch(0.48 0.015 65);
|
||||
--color-accent: oklch(0.955 0.006 65);
|
||||
--color-accent-foreground: oklch(0.19 0.008 65);
|
||||
--color-destructive: oklch(0.577 0.245 27.325);
|
||||
|
||||
/* Border / Input / Ring */
|
||||
--color-border: oklch(0.88 0.015 85);
|
||||
--color-border-light: #E8E6DC;
|
||||
--color-input: oklch(0.88 0.015 85);
|
||||
--color-ring: oklch(0.65 0.08 50);
|
||||
--color-border: oklch(0.905 0.008 65);
|
||||
--color-border-light: #DFDDD8;
|
||||
--color-input: oklch(0.905 0.008 65);
|
||||
--color-ring: oklch(0.65 0.10 40);
|
||||
|
||||
/* Default utility values */
|
||||
--default-border-color: var(--color-border);
|
||||
@@ -81,24 +87,26 @@
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
Dark mode — warm dark palette
|
||||
Dark mode — warm stone dark palette
|
||||
============================================================ */
|
||||
.dark {
|
||||
--color-surface-0: #1C1B18;
|
||||
--color-surface-1: #242320;
|
||||
--color-surface-2: #2D2B27;
|
||||
--color-surface-3: #3A3832;
|
||||
--color-text-primary: #ECE9E0;
|
||||
--color-text-secondary: #9C9890;
|
||||
--color-text-muted: #6B6860;
|
||||
--color-bg-inverted: #F5F3EC;
|
||||
--color-text-inverted: #2D2B27;
|
||||
--color-border: #3A3832;
|
||||
--color-border-light: #2D2B27;
|
||||
--color-tool-card: #2D2B27;
|
||||
--color-warning-bg: #45290A;
|
||||
--color-warning-border: #B47818;
|
||||
--color-warning-text: #FCD980;
|
||||
--color-surface-0: #1A1917;
|
||||
--color-surface-1: #222120;
|
||||
--color-surface-2: #2C2A28;
|
||||
--color-surface-3: #3A3835;
|
||||
--color-text-primary: #EFEEE9;
|
||||
--color-text-secondary: #969088;
|
||||
--color-text-muted: #5E5A54;
|
||||
--color-bg-inverted: #F6F5F2;
|
||||
--color-text-inverted: #2C2A28;
|
||||
--color-user-bubble: #C96442;
|
||||
--color-user-bubble-border: #B55838;
|
||||
--color-border: #3A3835;
|
||||
--color-border-light: #2C2A28;
|
||||
--color-tool-card: #2C2A28;
|
||||
--color-warning-bg: oklch(0.22 0.03 75);
|
||||
--color-warning-border: oklch(0.62 0.12 75);
|
||||
--color-warning-text: oklch(0.82 0.08 85);
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
@@ -124,6 +132,7 @@
|
||||
============================================================ */
|
||||
::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
@@ -133,30 +142,15 @@
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
/* Glimmer sweep — reverse sweep highlight (same visual as TUI) */
|
||||
/* Glimmer sweep — opacity pulse for thinking indicator */
|
||||
.glimmer-text {
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
var(--color-text-secondary) 0%,
|
||||
var(--color-text-secondary) 40%,
|
||||
var(--color-brand) 50%,
|
||||
var(--color-text-secondary) 60%,
|
||||
var(--color-text-secondary) 100%
|
||||
);
|
||||
background-size: 200% 100%;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
animation: glimmer-sweep 3s ease-in-out infinite;
|
||||
color: var(--color-text-secondary);
|
||||
animation: glimmer-pulse 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes glimmer-sweep {
|
||||
0% {
|
||||
background-position: 100% 0;
|
||||
}
|
||||
100% {
|
||||
background-position: -100% 0;
|
||||
}
|
||||
@keyframes glimmer-pulse {
|
||||
0%, 100% { opacity: 0.5; }
|
||||
50% { opacity: 1; }
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
@@ -165,7 +159,7 @@
|
||||
|
||||
/* Chat input — warm orange focus ring */
|
||||
.chat-input-focus:focus-within {
|
||||
box-shadow: 0 0 0 2px rgba(217, 119, 87, 0.25);
|
||||
box-shadow: 0 0 0 2px oklch(0.65 0.12 30 / 0.20);
|
||||
}
|
||||
|
||||
/* Markdown content in message bubbles */
|
||||
@@ -189,6 +183,19 @@
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
Reduced motion — respect user preference
|
||||
============================================================ */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*,
|
||||
::before,
|
||||
::after {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
Animations — Anthropic entrance effects
|
||||
============================================================ */
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
// Unified Chat Data Model — shared between ACP and RCS chat interfaces
|
||||
// =============================================================================
|
||||
|
||||
import type { ToolCallContent, PermissionOption } from "../acp/types";
|
||||
import type { ToolCallContent, PermissionOption, PlanEntry } from "../acp/types";
|
||||
|
||||
// 工具调用状态
|
||||
export type ToolCallStatus =
|
||||
@@ -62,11 +62,19 @@ export interface ToolCallEntry {
|
||||
toolCall: ToolCallData;
|
||||
}
|
||||
|
||||
// Plan 展示条目（Agent 执行计划）
|
||||
export interface PlanDisplayEntry {
|
||||
type: "plan";
|
||||
id: string;
|
||||
entries: PlanEntry[];
|
||||
}
|
||||
|
||||
// 统一聊天条目类型
|
||||
export type ThreadEntry =
|
||||
| UserMessageEntry
|
||||
| AssistantMessageEntry
|
||||
| ToolCallEntry;
|
||||
| ToolCallEntry
|
||||
| PlanDisplayEntry;
|
||||
|
||||
// =============================================================================
|
||||
// Chat 组件 Props 类型
|
||||
|
||||
@@ -35,13 +35,8 @@ export function Dashboard({ onNavigateSession }: DashboardProps) {
|
||||
onNavigateSession(session.id);
|
||||
};
|
||||
|
||||
const handleSelectEnvironment = useCallback((env: Environment) => {
|
||||
if (env.worker_type === "acp") {
|
||||
// Navigate to ACP agent detail page (same origin, shares UUID auth)
|
||||
window.history.pushState(null, "", `/acp/agent/${env.id}`);
|
||||
// Force page reload to load ACP app
|
||||
window.location.href = `/acp/agent/${env.id}`;
|
||||
}
|
||||
const handleSelectEnvironment = useCallback((_env: Environment) => {
|
||||
// ACP agents require WebSocket connection and cannot be navigated to directly
|
||||
// Bridge environments: no direct navigation (sessions are listed below)
|
||||
}, []);
|
||||
|
||||
@@ -51,6 +46,7 @@ export function Dashboard({ onNavigateSession }: DashboardProps) {
|
||||
|
||||
return (
|
||||
<div className="mx-auto max-w-5xl px-4 py-8">
|
||||
<h1 className="sr-only">Dashboard</h1>
|
||||
{/* Environments */}
|
||||
<section className="mb-10">
|
||||
<h2 className="mb-4 font-display text-lg font-semibold text-text-primary">Environments</h2>
|
||||
|
||||
@@ -6,6 +6,7 @@ import {
|
||||
} from "../api/client";
|
||||
import type { Session, SessionEvent } from "../types";
|
||||
import { isClosedSessionStatus, formatTime, cn } from "../lib/utils";
|
||||
import { Info } from "lucide-react";
|
||||
import { RCSChatAdapter } from "../lib/rcs-chat-adapter";
|
||||
import type { ThreadEntry, PendingPermission } from "../lib/types";
|
||||
import { StatusBadge } from "../components/Navbar";
|
||||
@@ -25,7 +26,6 @@ import { TooltipProvider } from "../../components/ui/tooltip";
|
||||
import { ACPClient, DisconnectRequestedError } from "../acp/client";
|
||||
import { createRelayClient } from "../acp/relay-client";
|
||||
import { ACPMain } from "../../components/ACPMain";
|
||||
import { StatusDot } from "../../components/ui/connection-status";
|
||||
|
||||
interface SessionDetailProps {
|
||||
sessionId: string;
|
||||
@@ -246,6 +246,7 @@ export function SessionDetail({ sessionId }: SessionDetailProps) {
|
||||
return (
|
||||
<TooltipProvider>
|
||||
<div className="flex flex-1 flex-col overflow-hidden">
|
||||
<h1 className="sr-only">{session.title || session.id}</h1>
|
||||
{/* Session Header */}
|
||||
<div className="border-b bg-surface-1 px-4 py-3">
|
||||
<div className="mx-auto max-w-5xl">
|
||||
@@ -275,7 +276,7 @@ export function SessionDetail({ sessionId }: SessionDetailProps) {
|
||||
className="flex items-center gap-1 rounded-md px-2 py-1 text-xs text-text-muted hover:bg-surface-2 hover:text-text-secondary transition-colors"
|
||||
title="Session info"
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>
|
||||
<Info className="h-3.5 w-3.5" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setTaskPanelOpen(!taskPanelOpen)}
|
||||
@@ -434,24 +435,6 @@ function ACPSessionDetail({ sessionId, agentId }: { sessionId: string; agentId:
|
||||
return (
|
||||
<TooltipProvider>
|
||||
<div className="flex flex-1 flex-col overflow-hidden">
|
||||
{/* Header */}
|
||||
<div className="border-b bg-surface-1 px-4 py-3">
|
||||
<div className="mx-auto max-w-5xl">
|
||||
<div className="mb-1">
|
||||
<a href="/code/" className="text-sm text-text-muted hover:text-text-secondary transition-colors no-underline">
|
||||
← Dashboard
|
||||
</a>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<StatusDot state={connectionState} />
|
||||
<h2 className="font-display text-lg font-semibold text-text-primary">
|
||||
{agentId}
|
||||
</h2>
|
||||
<span className="rounded-full bg-purple-100 px-2 py-0.5 text-xs font-medium text-purple-700">ACP</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{error && connectionState === "error" && (
|
||||
<div className="px-4 py-2 bg-destructive/10 text-destructive text-sm border-b">
|
||||
{error}
|
||||
@@ -478,7 +461,7 @@ function ACPSessionDetail({ sessionId, agentId }: { sessionId: string; agentId:
|
||||
|
||||
{client && connectionState === "connected" && (
|
||||
<div className="flex-1 min-h-0">
|
||||
<ACPMain client={client} />
|
||||
<ACPMain client={client} agentId={agentId} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user