@allbluecn/web-app 0.10.3 → 0.11.0

package/src/__tests__/security/ssrf-url-whitelist.test.ts

@@ -0,0 +1,54 @@
+import { describe, expect, it } from 'vitest'
+import { isAllowedUri, sanitizeUrl } from '@/components/tiptap/lib/utils/url'
+
+// 安全测试样板：SSRF / 协议注入防护（富文本编辑器 URL 白名单）。
+// 对应攻击面：用户构造恶意链接协议（javascript:/data:/file:）进入 DOM。
+// 防线：isAllowedUri 协议白名单（http/https/ftp/ftps/mailto/tel/callto/sms/cid/xmpp）。
+
+describe('SSRF 防护：isAllowedUri 协议白名单', () => {
+  it.each([
+    'javascript:alert(1)',
+    'JavaScript:alert(1)', // 大小写绕过
+    'data:text/html;base64,PHNjcmlwdD5hbGVydCgxKTwvc2NyaXB0Pg==',
+    'vbscript:msgbox(1)',
+    'file:///etc/passwd',
+    'chrome://settings',
+  ])('拒绝危险协议：%s', (uri) => {
+    expect(isAllowedUri(uri)).toBeFalsy()
+  })
+
+  it.each([
+    'https://example.com/page',
+    'http://example.com',
+    'mailto:user@example.com',
+    'tel:+8613800000000',
+    '/relative/path',
+    '#anchor',
+    undefined,
+  ])('放行安全 URI：%s', (uri) => {
+    expect(isAllowedUri(uri)).toBeTruthy()
+  })
+
+  it('空白字符混淆绕过被拦截（\\u0000-\\u0020 控制字符剥离后仍校验协议）', () => {
+    // "java\tscript:" 类混淆：控制字符剥离后按协议匹配拒绝
+    expect(isAllowedUri('java\tscript:alert(1)')).toBeFalsy()
+  })
+})
+
+describe('SSRF 防护：sanitizeUrl 兜底为 #', () => {
+  it('危险协议链接降级为 #（不进入 DOM 的 href）', () => {
+    expect(sanitizeUrl('javascript:alert(1)', 'https://example.com')).toBe('#')
+  })
+
+  it('合法 URL 解析为绝对地址放行', () => {
+    expect(sanitizeUrl('/docs/a', 'https://example.com')).toBe('https://example.com/docs/a')
+  })
+
+  // 已知边界（gap，非缺陷）：isAllowedUri 只校验协议不校验主机。
+  // 云元数据地址（169.254.169.254）/内网 IP 在协议白名单内会被放行。
+  // 编辑器场景（仅生成链接不服务端 fetch）可接受；服务端 fetch 场景
+  // （SearXNG web_search / 附件抓取）需要独立的主机级白名单，见测试方案设计文档。
+  it('边界记录：内网地址协议合法时被放行（仅协议级校验）', () => {
+    expect(isAllowedUri('http://169.254.169.254/latest/meta-data')).toBeTruthy()
+  })
+})

package/src/__tests__/security/xss-sanitize.test.ts

@@ -0,0 +1,99 @@
+import { describe, expect, it } from 'vitest'
+import { sanitize, sanitizeSvg } from '@/lib/sanitize'
+
+// 安全测试样板：XSS 防护（渲染链路 DOMPurify 清理）。
+// 对应攻击面：用户输入 → 富文本/HTML 渲染 → 存储型/反射型 XSS。
+// 防线：AGENTS.md 约定「所有 HTML 渲染必须经过 sanitize() 清理」。
+
+describe('XSS 防护：sanitize() 攻击载荷清理', () => {
+  it.each([
+    ['script 标签注入', '<script>alert("xss")</script>', 'script'],
+    ['img onerror 事件注入', '<img src=x onerror="alert(1)">', 'onerror'],
+    ['内联事件属性注入', '<div onclick="steal()">click</div>', 'onclick'],
+    ['javascript: 协议链接', '<a href="javascript:alert(1)">click</a>', 'javascript:'],
+    ['iframe 嵌套注入', '<iframe src="https://evil.example"></iframe>', 'iframe'],
+    ['SVG onload 注入', '<svg onload="alert(1)"></svg>', 'onload'],
+  ])('清理 %s', (_name, payload, marker) => {
+    const cleaned = sanitize(payload)
+    expect(cleaned.toLowerCase()).not.toContain(marker)
+  })
+
+  it('合法内容不被误杀（保真性）', () => {
+    const html = '<p>hello <strong>world</strong> <a href="https://example.com">link</a></p>'
+    const cleaned = sanitize(html)
+    expect(cleaned).toContain('<p>hello <strong>world</strong>')
+    expect(cleaned).toContain('href="https://example.com"')
+  })
+
+  it('混合攻击载荷与正常内容的定向清理', () => {
+    const html = '<p>正常段落</p><script>evil()</script><p>另一段</p>'
+    const cleaned = sanitize(html)
+    expect(cleaned).toContain('正常段落')
+    expect(cleaned).toContain('另一段')
+    expect(cleaned).not.toContain('evil()')
+  })
+})
+
+// sanitizeSvg 双向断言：
+// - 正向（不误杀）：NotionAvatar 依赖的 SVG 滤镜链结构完整保留，任何 DOMPurify 升级
+//   若静默改变默认配置破坏滤镜链，此处立即报红，防止头像渲染白屏
+// - 反向（不放过）：SVG 内嵌的 script / 事件处理器 / javascript: 协议仍被清除，
+//   静态资源被篡改时提供纵深防御
+describe('XSS 防护：sanitizeSvg() SVG 结构完整性 + 恶意内容清理', () => {
+  // 与 notion-avatar.tsx 中 SVGFilter 常量 + buildAvatar() 输出同构的样例
+  const avatarSvg = `<svg viewBox="0 0 1080 1080" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:100%;height:100%">
+  <defs>
+    <filter id="notion-avatar-filter" x="-20%" y="-20%" width="140%" height="140%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="linearRGB">
+      <feMorphology operator="dilate" radius="20" in="SourceAlpha" result="morphology"/>
+      <feFlood flood-color="#ffffff" flood-opacity="1" result="flood"/>
+      <feComposite in="flood" in2="morphology" operator="in" result="composite"/>
+      <feMerge result="merge">
+        <feMergeNode in="composite" result="mergeNode"/>
+        <feMergeNode in="SourceGraphic" result="mergeNode1"/>
+      </feMerge>
+    </filter>
+  </defs>
+  <g id="avatar" transform="scale(-1,1) translate(-1080, 0)">
+    <path d="M10 20 L100 50" stroke="#000" fill="#fff"/>
+  </g>
+</svg>`
+
+  it.each([
+    ['<defs> 元素', /<defs[\s>]/],
+    ['<filter> 元素', /<filter[\s>]/],
+    ['<feMorphology> 元素', /<feMorphology[\s>]/],
+    ['<feFlood> 元素', /<feFlood[\s>]/],
+    ['<feComposite> 元素', /<feComposite[\s>]/],
+    ['<feMerge> 元素', /<feMerge[\s>]/],
+    ['<feMergeNode> 元素', /<feMergeNode[\s>]/],
+    ['<g> 元素', /<g[\s>]/],
+    ['<path> 元素', /<path[\s>]/],
+    ['filterUnits 属性', /filterUnits=/],
+    ['primitiveUnits 属性', /primitiveUnits=/],
+    ['color-interpolation-filters 属性', /color-interpolation-filters=/],
+    ['operator 属性', /operator=/],
+    ['radius 属性', /radius=/],
+    ['flood-color 属性', /flood-color=/],
+    ['flood-opacity 属性', /flood-opacity=/],
+    [' in 属性', / in=/],
+    [' in2 属性', / in2=/],
+    [' result 属性', / result=/],
+    ['transform 属性', /transform=/],
+    ['viewBox 属性', /viewBox=/],
+    ['xmlns 属性', /xmlns=/],
+  ])('%s 保留', (_name, re) => {
+    const cleaned = sanitizeSvg(avatarSvg)
+    expect(cleaned).toMatch(re)
+  })
+
+  it.each([
+    ['script 标签', '<svg><script>alert(1)</script></svg>', /<script/i],
+    ['path onload 事件', '<svg><path onload="alert(1)"/></svg>', /onload=/i],
+    ['svg onload 事件', '<svg onload="alert(1)"></svg>', /onload=/i],
+    ['a javascript: 协议', '<svg><a href="javascript:alert(1)">x</a></svg>', /javascript:/i],
+    ['foreignObject 嵌套', '<svg><foreignObject><body onload="alert(1)"></foreignObject></svg>', /onload=/i],
+  ])('%s 被清除', (_name, payload, marker) => {
+    const cleaned = sanitizeSvg(payload)
+    expect(cleaned).not.toMatch(marker)
+  })
+})

package/src/__tests__/setup.ts

@@ -20,6 +20,15 @@ import '@testing-library/jest-dom/vitest'
 
 import { overwriteGetLocale } from '@/paraglide/runtime.js'
 
+// jsdom 无 ResizeObserver（@dnd-kit/dom 等库模块加载时引用）
+if (typeof globalThis.ResizeObserver === 'undefined') {
+  globalThis.ResizeObserver = class ResizeObserver {
+    observe() {}
+    unobserve() {}
+    disconnect() {}
+  } as unknown as typeof globalThis.ResizeObserver
+}
+
 // Global i18n key resolver for test mocks
 const zhMessages = JSON.parse(
   require('fs').readFileSync(

package/src/__tests__/visual/theme-surface.vrt.test.tsx

@@ -0,0 +1,54 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+// VRT 视觉回归：主题表面聚合组件的亮色/暗色渲染基线。
+// 基线由 darwin 本机生成并提交入库；本机即门禁环境（同一台机器生成+对比）。
+
+import { expect, test } from 'vitest'
+import { page } from 'vitest/browser'
+import { render } from 'vitest-browser-react'
+import { ThemeProvider } from 'next-themes'
+import { TooltipProvider } from '@/components/ui/tooltip'
+import { ThemeSurface } from '@/components/shared-kit/theme/theme-surface'
+
+test('theme surface light baseline', async () => {
+  await render(
+    <ThemeProvider forcedTheme="light">
+      <TooltipProvider>
+        <ThemeSurface />
+      </TooltipProvider>
+    </ThemeProvider>,
+  )
+  await expect(page.getByTestId('theme-surface')).toMatchScreenshot({
+    comparatorName: 'pixelmatch',
+    comparatorOptions: { threshold: 0.2, allowedMismatchedPixelRatio: 0.01 },
+  })
+})
+
+test('theme surface dark baseline', async () => {
+  await render(
+    <ThemeProvider forcedTheme="dark">
+      <TooltipProvider>
+        <ThemeSurface />
+      </TooltipProvider>
+    </ThemeProvider>,
+  )
+  await expect(page.getByTestId('theme-surface')).toMatchScreenshot({
+    comparatorName: 'pixelmatch',
+    comparatorOptions: { threshold: 0.2, allowedMismatchedPixelRatio: 0.01 },
+  })
+})

package/src/__tests__/visual/user-avatar.vrt.test.tsx

@@ -0,0 +1,32 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+// VRT 视觉回归：UserAvatar 首字母 fallback 渲染基线。
+
+import { expect, test } from 'vitest'
+import { page } from 'vitest/browser'
+import { render } from 'vitest-browser-react'
+import { UserAvatar } from '@/components/shared-kit'
+
+test('user avatar initial fallback baseline', async () => {
+  const screen = await render(<UserAvatar name="张三" size="lg" />)
+  const root = screen.container.firstChild as HTMLElement
+  await expect(page.elementLocator(root)).toMatchScreenshot({
+    comparatorName: 'pixelmatch',
+    comparatorOptions: { threshold: 0.2, allowedMismatchedPixelRatio: 0.01 },
+  })
+})

package/src/components/error/global-error-boundary.tsx

@@ -17,7 +17,7 @@
 
 import { Link, useLocation } from '@tanstack/react-router'
 import { useMemo } from 'react'
-import { LogIn, FileQuestionIcon } from 'lucide-react'
+import { LogIn, CircleAlert } from 'lucide-react'
 import { isUnauthorizedError } from '@/lib/auth/anonymous-safe'
 import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from '@/components/ui/empty'
 import { Button } from '@/components/ui/button'
@@ -41,7 +41,7 @@ function GlobalErrorBoundaryInner({ error, info }: { error: unknown; info?: { co
       <Empty>
         <EmptyHeader>
           <EmptyMedia variant="icon">
-            {unauthorized ? <LogIn /> : <FileQuestionIcon />}
+            {unauthorized ? <LogIn className="size-5" /> : <CircleAlert className="size-5" />}
           </EmptyMedia>
           <EmptyTitle>
             {unauthorized ? m.common_errorPage_loginRequired() : m.common_errorPage_error()}

package/src/components/knowledge/general-groups.ts

@@ -0,0 +1,15 @@
+import { m } from '@/paraglide/messages.js'
+
+const GROUP_LABELS: Record<string, () => string> = {
+  legal: m.story_knowledgeDialog_groupLegal,
+  compliance: m.story_knowledgeDialog_groupCompliance,
+  dictionary: m.story_knowledgeDialog_groupDictionary,
+  bookmark: m.story_knowledgeDialog_groupBookmark,
+  summary: m.story_knowledgeDialog_groupSummary,
+}
+
+/** 通用知识库分组 key → 标签（未知 key 原样返回） */
+export function generalGroupLabel(group: string): string {
+  const labelFn = GROUP_LABELS[group]
+  return labelFn ? labelFn() : group
+}

package/src/components/knowledge/kb-filter-popover.tsx

@@ -0,0 +1,143 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import * as React from "react";
+import { BookOpenText, Bookmark, BookMarked, Check, ChevronsUpDown, Scale, ShieldCheck, Sprout } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { LucideIconByName } from "@/components/shared-kit/icons/lucide-icon-picker/lucide-icon-by-name";
+import { generalGroupLabel } from "./general-groups";
+import { m } from "@/paraglide/messages.js";
+
+export type KbFilter = { type: "kb"; id: string } | { type: "general"; group: string } | null;
+
+const GENERAL_GROUP_ICONS: Record<string, React.ComponentType<{ className?: string }>> = {
+  legal: Scale,
+  compliance: ShieldCheck,
+  dictionary: BookMarked,
+  bookmark: Bookmark,
+  summary: Sprout,
+};
+
+const GENERAL_GROUP_META = [
+  { key: "legal" },
+  { key: "compliance" },
+  { key: "dictionary" },
+  { key: "bookmark" },
+  { key: "summary" },
+] as const;
+
+interface KbFilterPopoverProps {
+  search: string;
+  onSearchChange: (q: string) => void;
+  filter: KbFilter;
+  onFilterChange: (f: KbFilter) => void;
+  userKbs: Array<{ id: string; name: string; icon?: string | null }>;
+  /** 文案覆盖（缺省用 workspace_kb_* 通用文案）；story 弹窗传入保持原文案零变化 */
+  searchPlaceholder?: string;
+  allLabel?: string;
+  userKbsLabel?: string;
+  generalKbsLabel?: string;
+}
+
+/** 搜索框 + 知识库筛选下拉（用户 team 库 + 通用知识库两组）。story 关联弹窗与工作空间快捷文档弹窗共用。 */
+export function KbFilterPopover({
+  search, onSearchChange, filter, onFilterChange, userKbs,
+  searchPlaceholder, allLabel, userKbsLabel, generalKbsLabel,
+}: KbFilterPopoverProps) {
+  const [open, setOpen] = React.useState(false);
+  const activeKb = filter?.type === "kb" ? userKbs.find((k) => k.id === filter.id) : undefined;
+
+  const select = (f: KbFilter) => {
+    onFilterChange(f);
+    setOpen(false);
+  };
+
+  return (
+    <div className="flex items-center gap-2">
+      <Input
+        placeholder={searchPlaceholder ?? m.workspace_kb_searchPlaceholder()}
+        value={search}
+        onChange={(e) => onSearchChange(e.target.value)}
+        className="h-8"
+      />
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <Button variant="outline" size="sm" className="h-8 shrink-0 gap-1">
+            <BookOpenText className="size-3.5" />
+            {activeKb
+              ? activeKb.name
+              : filter?.type === "general"
+                ? generalGroupLabel(filter.group)
+                : (allLabel ?? m.workspace_kb_allKbs())}
+            <ChevronsUpDown className="size-3.5 opacity-50" />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent align="end" className="w-60 p-1">
+          <button
+            type="button"
+            className="mt-1 flex w-full items-center justify-between rounded-sm px-2 py-1.5 text-sm hover:bg-muted"
+            onClick={() => select(null)}
+          >
+            {allLabel ?? m.workspace_kb_allKbs()}
+            {filter === null && <Check className="size-3.5" />}
+          </button>
+          <div className="border-t px-2 pt-3 text-xs font-medium text-muted-foreground">
+            {userKbsLabel ?? m.workspace_kb_userKbs()}
+          </div>
+          {userKbs.map((kb) => (
+            <button
+              key={kb.id}
+              type="button"
+              className="flex w-full items-center justify-between rounded-sm px-2 py-1.5 text-sm hover:bg-muted"
+              onClick={() => select({ type: "kb", id: kb.id })}
+            >
+              <span className="flex min-w-0 items-center gap-2">
+                {kb.icon && (
+                  <LucideIconByName name={kb.icon} size={14} className="shrink-0 text-muted-foreground" />
+                )}
+                <span className="truncate">{kb.name}</span>
+              </span>
+              {filter?.type === "kb" && filter.id === kb.id && <Check className="size-3.5" />}
+            </button>
+          ))}
+          <div className="border-t px-2 pt-3 text-xs font-medium text-muted-foreground">
+            {generalKbsLabel ?? m.workspace_kb_generalKbs()}
+          </div>
+          {GENERAL_GROUP_META.map((group) => {
+            const Icon = GENERAL_GROUP_ICONS[group.key];
+            return (
+              <button
+                key={group.key}
+                type="button"
+                className="flex w-full items-center justify-between rounded-sm px-2 py-1.5 text-sm hover:bg-muted"
+                onClick={() => select({ type: "general", group: group.key })}
+              >
+                <span className="flex min-w-0 items-center gap-2">
+                  <Icon className="size-3.5 shrink-0 text-muted-foreground" />
+                  <span className="truncate">{generalGroupLabel(group.key)}</span>
+                </span>
+                {filter?.type === "general" && filter.group === group.key && <Check className="size-3.5" />}
+              </button>
+            );
+          })}
+        </PopoverContent>
+      </Popover>
+    </div>
+  );
+}

package/src/components/knowledge-public/legal-compliance-editor.tsx

@@ -197,8 +197,9 @@ export function LegalComplianceEditor({ type, editingId }: Props) {
       } else {
         await updateComplianceFn({ data: payload })
       }
+      qc.invalidateQueries({ queryKey: [type] })
     },
-    [editingId, type],
+    [editingId, type, qc],
   )
 
   const handlePropertyChange = useCallback((key: string, value: unknown) => {
@@ -237,9 +238,10 @@ export function LegalComplianceEditor({ type, editingId }: Props) {
         } else {
           await updateComplianceFn({ data: payload })
         }
+        qc.invalidateQueries({ queryKey: [type] })
       },
     }),
-    [editingId, type, saveField],
+    [editingId, type, saveField, qc],
   )
 
   if (!record) {

package/src/components/layout/sidebar-03/__tests__/nav-workspace.test.tsx

@@ -4,7 +4,7 @@ import { overwriteGetLocale } from "@/paraglide/runtime.js";
 
 overwriteGetLocale(() => "zh");
 
-const mockUseLiveQuery = vi.fn();
+const mockUseQuery = vi.fn();
 const mockUseLocation = vi.fn();
 const mockUseSidebar = vi.fn();
 
@@ -13,10 +13,12 @@ vi.mock("@tanstack/react-router", () => ({
     <a href={to}>{children}</a>
   ),
   useLocation: () => mockUseLocation(),
+  useRouter: () => ({ navigate: vi.fn() }),
 }));
 
-vi.mock("@tanstack/react-db", () => ({
-  useLiveQuery: (...args: any[]) => mockUseLiveQuery(...args),
+vi.mock("@tanstack/react-query", () => ({
+  useQuery: (...args: any[]) => mockUseQuery(...args),
+  useQueryClient: () => ({ invalidateQueries: vi.fn() }),
 }));
 
 vi.mock("@/components/ui/sidebar", () => ({
@@ -52,10 +54,11 @@ vi.mock("@/lib/utils", () => ({
 }));
 
 vi.mock("@/lib/collections/reference/workspaces-collection", () => ({
-  workspacesCollection: { id: "workspaces" },
+  WORKSPACES_QUERY_KEY: ["workspaces"],
 }));
 
 vi.mock("@/server/serverFns/workspace", () => ({
+  listPinnedWorkspacesBriefFn: vi.fn().mockResolvedValue([]),
   toggleWorkspacePinFn: vi.fn().mockResolvedValue({ success: true }),
 }));
 
@@ -68,7 +71,7 @@ beforeEach(() => {
   cleanup();
   mockUseLocation.mockReturnValue({ pathname: "/workspaces" });
   mockUseSidebar.mockReturnValue({ state: "expanded" });
-  mockUseLiveQuery.mockReturnValue({
+  mockUseQuery.mockReturnValue({
     data: [
       { id: "ws1", name: "工作空间 A", icon: "folder" },
       { id: "ws2", name: "工作空间 B", icon: "folder-kanban" },
@@ -103,7 +106,7 @@ describe("NavWorkspace", () => {
   });
 
   it("空 collection 时不渲染工作空间列表项", async () => {
-    mockUseLiveQuery.mockReturnValue({ data: [] });
+    mockUseQuery.mockReturnValue({ data: [] });
     render(<NavWorkspace />);
     await waitFor(() => {
       expect(screen.queryByTestId("project-icon")).not.toBeInTheDocument();

package/src/components/layout/sidebar-03/nav-knowledge.tsx

@@ -70,11 +70,14 @@ import { Link, useLocation } from "@tanstack/react-router";
 import { cn } from "@/lib/utils";
 import { isParentActive } from "@/lib/sidebar-utils";
 import { useEffect, useState } from "react";
-import { useLiveQuery } from "@tanstack/react-db";
-import { knowledgeBasesCollection } from "@/lib/collections/knowledge/knowledge-bases-collection";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { KNOWLEDGE_BASES_QUERY_KEY } from "@/lib/collections/knowledge/knowledge-bases-collection";
+import {
+  listKnowledgeFn,
+  toggleKnowledgePinFn,
+} from "@/server/serverFns/knowledge";
 import { KnowledgeFormDialog } from "@/components/knowledge/dialog/knowledge-form-dialog";
 import { useServerFn } from "@tanstack/react-start";
-import { toggleKnowledgePinFn } from "@/server/serverFns/knowledge";
 
 import { AnimatedGradientText } from "@/components/magicui/animated-gradient-text";
 import { m } from "@/paraglide/messages.js";
@@ -151,6 +154,7 @@ interface KnowledgeItem {
 
 function UnpinButton({ kb }: { kb: KnowledgeItem }) {
   const togglePin = useServerFn(toggleKnowledgePinFn);
+  const queryClient = useQueryClient();
   const [pinned, setPinned] = useState(kb.pinnedToSidebar);
 
   const handleClick = async () => {
@@ -158,7 +162,7 @@ function UnpinButton({ kb }: { kb: KnowledgeItem }) {
     setPinned(newPinned);
     try {
       await togglePin({ data: { kbId: kb.id, pinned: newPinned } });
-      (knowledgeBasesCollection as any).utils?.refetch?.();
+      void queryClient.invalidateQueries({ queryKey: KNOWLEDGE_BASES_QUERY_KEY });
       window.dispatchEvent(new CustomEvent("knowledge-pinned", { detail: { kbId: kb.id, pinned: newPinned } }));
     } catch {
       setPinned(!newPinned);
@@ -183,11 +187,13 @@ function UnpinButton({ kb }: { kb: KnowledgeItem }) {
 }
 
 function KnowledgeBaseLinks({ pathname }: { pathname: string }) {
-  const { data: items } = useLiveQuery(
-    (q) => q.from({ kb: knowledgeBasesCollection })
-  );
-  const itemsList =
-    (items as unknown as Array<KnowledgeItem> | undefined) ?? [];
+  // useQuery 直读 per-request queryClient（_nav loader 已 SSR 预取），
+  // 列表随 SSR HTML 直出，刷新无需等待；避免 module-level collection 的跨请求泄漏
+  const { data: items } = useQuery({
+    queryKey: KNOWLEDGE_BASES_QUERY_KEY,
+    queryFn: () => listKnowledgeFn(),
+  });
+  const itemsList = (items as unknown as Array<KnowledgeItem> | undefined) ?? [];
 
   if (itemsList.length === 0) return null;
 
@@ -228,18 +234,14 @@ export function NavKnowledge() {
   const { state } = useSidebar();
   const { pathname } = useLocation();
   const isCollapsed = state === "collapsed";
-  const [mounted, setMounted] = useState(false);
   const [open, setOpen] = useState(false);
   const [createOpen, setCreateOpen] = useState(false);
+  const queryClient = useQueryClient();
   const active = isParentActive(pathname, "/knowledge");
 
-  useEffect(() => {
-    setMounted(true);
-  }, []);
-
   useEffect(() => {
     const refresh = () => {
-      (knowledgeBasesCollection as any).utils?.refetch?.();
+      void queryClient.invalidateQueries({ queryKey: KNOWLEDGE_BASES_QUERY_KEY });
     };
     window.addEventListener("knowledge-created", refresh);
     window.addEventListener("knowledge-updated", refresh);
@@ -251,7 +253,7 @@ export function NavKnowledge() {
       window.removeEventListener("knowledge-deleted", refresh);
       window.removeEventListener("knowledge-pinned", refresh);
     };
-  }, []);
+  }, [queryClient]);
 
   return (
     <SidebarGroup className="p-0 space-y-1">
@@ -350,7 +352,7 @@ export function NavKnowledge() {
         )}
       </Collapsible>
 
-      {!isCollapsed && mounted && (
+      {!isCollapsed && (
         <KnowledgeBaseLinks pathname={pathname} />
       )}