leaveFocus(event.relatedTarget)}>
-
{details.data?.name ?? workspace.name}
+
{details.data?.name ?? workspace.name}
+ {onTogglePin && }
+
{details.data ? <>
{t(`${details.data.thread_count} 个聊天 · ${details.data.active_thread_count} 个活跃聊天`,
`${details.data.thread_count} chats · ${details.data.active_thread_count} active`)}
diff --git a/web/src/v2/components/project-pins.test.tsx b/web/src/v2/components/project-pins.test.tsx
new file mode 100644
index 00000000..cf0d9b28
--- /dev/null
+++ b/web/src/v2/components/project-pins.test.tsx
@@ -0,0 +1,94 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { cleanup, render, screen, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import type { ThreadView } from "../../api/types";
+import { LocaleProvider } from "../../lib/locale";
+import { V2RecoveryProvider } from "../recovery-storage";
+import { V2Sidebar } from "./sidebar";
+
+const projects = [
+ { id: "project-a", name: "页面设计", created_at: "2026-10-22T00:00:00Z" },
+ { id: "project-b", name: "接口实现", created_at: "2026-10-22T00:00:00Z" },
+];
+const thread: ThreadView = { id: "chat-a", protocol_version: "thread.v1", workspace_id: "project-a", project_workspace_id: "project-a",
+ mission_id: "mission-a", title: "页面讨论", status: "active", active_run_id: "run-a", last_run_id: "run-a", version: 1,
+ composer_state: "ready", created_at: "2026-10-22T00:00:00Z", updated_at: "2026-10-22T00:00:00Z" };
+const threads = [thread, { ...thread, id: "chat-b", title: "接口讨论", project_workspace_id: "project-b" },
+ { ...thread, id: "chat-local", title: "本地讨论", project_workspace_id: "" },
+ { ...thread, id: "chat-pin", title: "置顶讨论", pinned: true }];
+const onVisibleChatOrder = vi.fn();
+function page(scopeID = "store-a", baseURL = "/api/v1") {
+ return
+
+
+
+ ;
+}
+function projectOrder() {
+ return screen.getAllByRole("region", { name: /^项目 / }).map((element) => element.getAttribute("aria-label"));
+}
+beforeEach(() => { localStorage.clear(); localStorage.setItem("prayu.locale.v1", "zh-CN"); vi.clearAllMocks(); });
+afterEach(cleanup);
+
+it("pins and unpins a project from the keyboard and keeps chat navigation in rendered order", async () => {
+ const user = userEvent.setup();
+ render(page());
+ expect(onVisibleChatOrder).toHaveBeenLastCalledWith(["chat-pin", "chat-a", "chat-b", "chat-local"]);
+ await user.click(screen.getByRole("button", { name: "接口实现 项目信息" }));
+ await user.tab();
+ const pin = screen.getByRole("button", { name: "置顶项目" });
+ expect(pin).toHaveFocus();
+ await user.keyboard("{Enter}");
+ expect(projectOrder()).toEqual(["项目 接口实现", "项目 页面设计", "项目 本地聊天"]);
+ expect(onVisibleChatOrder).toHaveBeenLastCalledWith(["chat-pin", "chat-b", "chat-a", "chat-local"]);
+ expect(within(screen.getByRole("region", { name: "项目 接口实现" })).getByRole("button", { name: "接口讨论" })).toBeVisible();
+ expect(screen.getByRole("button", { name: "取消置顶项目" })).toHaveAttribute("aria-pressed", "true");
+ expect(screen.getByRole("button", { name: "取消置顶项目" })).toHaveFocus();
+ await user.keyboard("{Enter}");
+ expect(projectOrder()).toEqual(["项目 页面设计", "项目 接口实现", "项目 本地聊天"]);
+ expect(onVisibleChatOrder).toHaveBeenLastCalledWith(["chat-pin", "chat-a", "chat-b", "chat-local"]);
+});
+
+it("restores project pins only for the same API and data store", async () => {
+ const user = userEvent.setup();
+ const first = render(page());
+ await user.click(screen.getByRole("button", { name: "接口实现 项目信息" }));
+ await user.click(screen.getByRole("button", { name: "置顶项目" }));
+ first.unmount();
+ const restored = render(page());
+ expect(projectOrder()[0]).toBe("项目 接口实现");
+ restored.rerender(page("store-b"));
+ expect(projectOrder()[0]).toBe("项目 页面设计");
+ restored.rerender(page("store-a", "/other-api"));
+ expect(projectOrder()[0]).toBe("项目 页面设计");
+ restored.rerender(page());
+ expect(projectOrder()[0]).toBe("项目 接口实现");
+});
+
+it("keeps pin focus after opening details that were already visible on hover", async () => {
+ const user = userEvent.setup();
+ render(page());
+ const details = screen.getByRole("button", { name: "接口实现 项目信息" });
+ await user.hover(details);
+ await screen.findByRole("dialog", { name: "接口实现 项目信息" });
+ await user.click(details);
+ await user.tab();
+ expect(screen.getByRole("button", { name: "置顶项目" })).toHaveFocus();
+ await user.keyboard("{Enter}");
+ expect(screen.getByRole("button", { name: "取消置顶项目" })).toHaveFocus();
+});
+
+it("ignores invalid stored preference values and offers the action in English", async () => {
+ localStorage.setItem("prayu.locale.v1", "en-US");
+ const key = `v2_recovery.v1:${encodeURIComponent(window.location.origin)}:${encodeURIComponent("/api/v1")}:store-a:pinned-projects`;
+ localStorage.setItem(key, JSON.stringify({ version: "v2_recovery.v1", value: { invalid: true } }));
+ const user = userEvent.setup();
+ render(page());
+ expect(screen.getAllByRole("region", { name: /^Project / })[0]).toHaveAccessibleName("Project 页面设计");
+ await user.click(screen.getByRole("button", { name: "接口实现 project details" }));
+ await user.click(screen.getByRole("button", { name: "Pin project" }));
+ expect(screen.getByRole("button", { name: "Unpin project" })).toHaveAttribute("aria-pressed", "true");
+ expect(screen.getAllByRole("region", { name: /^Project / })[0]).toHaveAccessibleName("Project 接口实现");
+});
diff --git a/web/src/v2/components/project-sidebar.css b/web/src/v2/components/project-sidebar.css
index 9729db49..50e96023 100644
--- a/web/src/v2/components/project-sidebar.css
+++ b/web/src/v2/components/project-sidebar.css
@@ -24,6 +24,11 @@
.v2-project-card { background: var(--prayu-surface-solid); border: 1px solid var(--v2-border-strong); border-radius: 14px; box-shadow: 0 8px 28px rgb(0 0 0 / 12%); box-sizing: border-box; color: var(--v2-ink); font: 13px/1.6 var(--prayu-font-ui); max-height: calc(100dvh - 24px); overflow: auto; padding: 12px; position: fixed; width: min(350px, calc(100vw - 24px)); z-index: 200; }
.v2-project-card > strong, .v2-project-card > p { align-items: flex-start; display: flex; gap: 10px; margin: 0; padding: 5px 2px; overflow-wrap: anywhere; }
.v2-project-card > strong { font-size: 15px; font-weight: 600; }
+.v2-project-card > strong > span { flex: 1; min-width: 0; }
+.v2-project-pin { align-items: center; background: transparent; border: 0; border-radius: 6px; color: var(--v2-muted); cursor: pointer; display: inline-flex; flex: 0 0 28px; height: 28px; justify-content: center; margin-top: -2px; padding: 0; }
+.v2-project-pin:hover, .v2-project-pin[aria-pressed="true"] { background: var(--v2-control-hover); color: var(--v2-ink); }
+.v2-project-pin:focus-visible { outline: 2px solid var(--v2-accent); outline-offset: 2px; }
+.v2-project-pin-marker { color: var(--v2-muted); }
.v2-project-card svg { flex-shrink: 0; margin-top: 3px; }
.v2-project-card > p svg { color: var(--v2-muted); }
.v2-project-card > .v2-project-card-path { border-top: 1px solid var(--v2-border); margin-top: 7px; padding-block: 12px; }
diff --git a/web/src/v2/components/sidebar.tsx b/web/src/v2/components/sidebar.tsx
index f15ee20b..09795f06 100644
--- a/web/src/v2/components/sidebar.tsx
+++ b/web/src/v2/components/sidebar.tsx
@@ -8,8 +8,13 @@ import { useLocale } from "../../lib/locale";
import { ThreadProjectDialog, threadProjectID } from "./thread-project-dialog";
import { ProjectHeader } from "./project-header";
import { ThreadActions } from "./thread-actions";
+import { useV2PersistentState } from "../recovery-storage";
import "./project-sidebar.css";
+function projectPinIDs(value: unknown): string[] {
+ return Array.isArray(value) ? value.filter((id): id is string => typeof id === "string" && id.length > 0) : [];
+}
+
export type V2SettingsSection = "general" | "permissions" | "appearance" | "voice" |
"models" | "plugins" | "browser" | "hooks" | "git" | "environment" |
"worktrees" | "keyboard" | "inspector" | "archived" | "extensions" | "skills" |
@@ -89,6 +94,12 @@ export function V2Sidebar({ threads, workspaces, selectedThreadID, searchOpen, o
const [projectCandidate, setProjectCandidate] = useState
(null);
const [projectsExpanded, setProjectsExpanded] = useState(true);
const [collapsedProjects, setCollapsedProjects] = useState>(() => new Set());
+ const [savedProjectPins, setProjectPins] = useV2PersistentState("pinned-projects", []);
+ const pinnedProjects = useMemo(() => new Set(projectPinIDs(savedProjectPins)), [savedProjectPins]);
+ const toggleProjectPin = (id: string) => setProjectPins((previous: unknown) => {
+ const ids = projectPinIDs(previous);
+ return ids.includes(id) ? ids.filter((value) => value !== id) : [...ids, id];
+ });
const pinsQuery = useInfiniteQuery({
queryKey: ["v2", "threads", "active", "pinned", executionFilter],
queryFn: ({ signal, pageParam }) => client!.getPage("/threads", {
@@ -119,8 +130,8 @@ export function V2Sidebar({ threads, workspaces, selectedThreadID, searchOpen, o
if (draggingThreadID && !result.has("")) result.set("", []);
const order = new Map(workspaces.map((workspace, index) => [workspace.id, index]));
return [...result.entries()].sort(([a], [b]) => a === "" ? 1 : b === "" ? -1
- : (order.get(a) ?? order.size) - (order.get(b) ?? order.size));
- }, [threads, workspaces, onNewInProject, draggingThreadID, executionFilter, pinnedIDs]);
+ : Number(pinnedProjects.has(b)) - Number(pinnedProjects.has(a)) || (order.get(a) ?? order.size) - (order.get(b) ?? order.size));
+ }, [threads, workspaces, onNewInProject, draggingThreadID, executionFilter, pinnedIDs, pinnedProjects]);
const duplicateNames = useMemo(() => {
const counts = new Map();
for (const { name } of workspaces) counts.set(name, (counts.get(name) ?? 0) + 1);
@@ -261,6 +272,7 @@ export function V2Sidebar({ threads, workspaces, selectedThreadID, searchOpen, o
event.preventDefault(); setDropProjectID(null); setDraggingThreadID(""); onMoveThread?.(draggedThread, workspaceID);
}}>
{workspaceID ? toggleProjectPin(workspaceID)}
onToggle={() => setCollapsedProjects((previous) => { const next = new Set(previous); if (next.has(workspaceID)) next.delete(workspaceID); else next.add(workspaceID); return next; })}
onNewChat={onNewInProject ? () => onNewInProject(workspaceID) : undefined} onEdit={onEditProject} />
: {label}
diff --git a/web/vite.config.ts b/web/vite.config.ts
index 7faf222b..fd8574df 100644
--- a/web/vite.config.ts
+++ b/web/vite.config.ts
@@ -1,7 +1,23 @@
+import { fileURLToPath } from "node:url";
import react from "@vitejs/plugin-react";
-import { loadEnv } from "vite";
+import { loadEnv, normalizePath, type Plugin } from "vite";
import { defineConfig } from "vitest/config";
+// npm overrides cannot replace Monaco's embedded copy. Redirect its sanitizer import
+// in both Vite and the separate dependency prebundler to the installed DOMPurify.
+const monacoSanitizer = normalizePath(fileURLToPath(import.meta.resolve("monaco-editor/base/browser/domSanitize.js")));
+const monacoDOMPurify: Plugin = {
+ name: "monaco-dompurify",
+ enforce: "pre",
+ async resolveId(source, importer) {
+ if (source === "./dompurify/dompurify.js" && importer && normalizePath(importer) === monacoSanitizer) {
+ const resolved = await this.resolve("dompurify", importer, { skipSelf: true });
+ if (!resolved) throw new Error("Cannot resolve installed DOMPurify for the Monaco sanitizer");
+ return resolved;
+ }
+ },
+};
+
export default defineConfig(({ mode }) => {
const env = loadEnv(mode, ".", "");
const apiTarget = env.CYBERAGENT_API_TARGET || "http://127.0.0.1:8765";
@@ -19,7 +35,10 @@ export default defineConfig(({ mode }) => {
};
return {
- plugins: [react()],
+ plugins: [react(), monacoDOMPurify],
+ optimizeDeps: {
+ rolldownOptions: { plugins: [monacoDOMPurify] },
+ },
server: {
host: "127.0.0.1",
port: 5173,
@@ -39,6 +58,7 @@ export default defineConfig(({ mode }) => {
},
test: {
include: ["src/**/*.{test,spec}.{ts,tsx}"],
+ server: { deps: { inline: ["monaco-editor"] } },
environment: "jsdom",
globals: true,
setupFiles: "./src/test/setup.ts",