@allbluecn/web-app 0.18.2 → 0.19.0

package/src/routes/_nav/tasks/-components/use-task-filter.ts

@@ -0,0 +1,64 @@
+// 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/>.
+
+// 任务前端过滤搜索（UI 对齐四期任务 47 Q5，设计 §9.3）：纯函数，工具栏中列
+// 搜索框输入 → 标题/指令 includes 匹配（大小写不敏感），assigned 三组与 AI
+// 任务各自在 Tab 内过滤，无 server 往返。
+// ⚠ instruction 为可选字段：列表投影（listAiTasksFn）不含 instruction 大字段，
+// 当前页数据下 AI 任务实际按标题过滤；指令匹配供投影补充字段后即插即用
+// （纯函数按字段存在性自适应，无 serverFn 改动的过渡兼容）。
+import type { AssignedResult } from "@/server/ai-task/types";
+
+/** 可搜索字段（assigned 条目与 AI 任务条目的最小形状） */
+export interface TaskSearchableItem {
+  title: string;
+  instruction?: string | null;
+}
+
+/** 单条匹配：标题/指令 includes（大小写不敏感）；空搜索恒真 */
+export function taskMatchesSearch<T extends TaskSearchableItem>(
+  item: T,
+  search: string,
+): boolean {
+  const q = search.trim().toLowerCase();
+  if (!q) return true;
+  if (item.title.toLowerCase().includes(q)) return true;
+  return item.instruction ? item.instruction.toLowerCase().includes(q) : false;
+}
+
+/**
+ * 任务首页过滤（纯函数）：搜索词同时过滤「分配给我的」条目与 AI 任务列表，
+ * 返回过滤后的同形数据（degraded 原样透传）；空搜索返回原引用不做拷贝。
+ * `searching` 暴露「当前是否有搜索词」供调用方区分搜索无命中与真·无数据空态。
+ */
+export function useTaskFilter<T extends TaskSearchableItem>(
+  search: string,
+  assigned: AssignedResult,
+  aiTasks: T[],
+): { assigned: AssignedResult; ai: T[]; searching: boolean } {
+  if (!search.trim()) {
+    return { assigned, ai: aiTasks, searching: false };
+  }
+  return {
+    assigned: {
+      ...assigned,
+      items: assigned.items.filter((item) => taskMatchesSearch(item, search)),
+    },
+    ai: aiTasks.filter((item) => taskMatchesSearch(item, search)),
+    searching: true,
+  };
+}

package/src/routes/_nav/tasks/-tests/create-ai-task-dialog.test.tsx

@@ -0,0 +1,175 @@
+// 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/>.
+
+// CreateAiTaskDialog 提交成功后自动关闭（任务 11 验收发现 A 回归测试）：
+// 受控 open 经真实父组件（HoldingParent 持 useState）流转——mutation onSuccess
+// 调 onOpenChange(false) → 父组件 open 翻 false → Base UI Dialog 卸载 Popup。
+// 额外覆盖：退出动画完成事件挂起（getAnimations 返回永不 finished 的动画）时，
+// onSuccess 的 actionsRef.unmount() 延时兜底仍保证 Popup 卸载。
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import {
+  cleanup,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+  within,
+} from "@testing-library/react";
+import { useState } from "react";
+import { CreateAiTaskDialog } from "../-components/create-ai-task-dialog";
+
+vi.mock("@/server/serverFns/tasks/task-crud", () => ({
+  createAiTaskFn: vi.fn().mockResolvedValue({ id: "task-1" }),
+}));
+
+vi.mock("@/server/serverFns/project", () => ({
+  listProjectsBriefFn: vi.fn().mockResolvedValue([]),
+}));
+
+vi.mock("@tanstack/react-router", () => ({
+  useRouter: () => ({ invalidate: vi.fn().mockResolvedValue(undefined) }),
+  useNavigate: () => vi.fn().mockResolvedValue(undefined),
+}));
+
+const clients: QueryClient[] = [];
+
+function client() {
+  const c = new QueryClient({
+    defaultOptions: { queries: { retry: false }, mutations: { retry: false } },
+  });
+  clients.push(c);
+  return c;
+}
+
+/** 模拟 index.lazy.tsx 的真实受控用法（open + onOpenChange 接 useState） */
+function HoldingParent(props: { onOpenChangeSpy?: (open: boolean) => void }) {
+  const [open, setOpen] = useState(true);
+  return (
+    <QueryClientProvider client={client()}>
+      <CreateAiTaskDialog
+        open={open}
+        onOpenChange={(next) => {
+          props.onOpenChangeSpy?.(next);
+          setOpen(next);
+        }}
+      />
+    </QueryClientProvider>
+  );
+}
+
+async function submitAndExpectClosed(name: string) {
+  const { createAiTaskFn } = await import("@/server/serverFns/tasks/task-crud");
+  const onOpenChangeSpy = vi.fn();
+  render(<HoldingParent onOpenChangeSpy={onOpenChangeSpy} />);
+
+  const dialog = await screen.findByRole("dialog");
+  fireEvent.change(screen.getByLabelText(/标题/), {
+    target: { value: "测试任务" },
+  });
+  fireEvent.change(screen.getByLabelText(/指令/), {
+    target: { value: "测试指令" },
+  });
+  fireEvent.click(within(dialog).getByRole("button", { name }));
+
+  await waitFor(() => {
+    expect(createAiTaskFn).toHaveBeenCalledTimes(1);
+  });
+  await waitFor(
+    () => {
+      expect(onOpenChangeSpy).toHaveBeenCalledWith(false);
+    },
+    { timeout: 2000 },
+  );
+  // 弹窗内容应最终离开 DOM（受控 open=false → Popup 卸载）
+  await waitFor(
+    () => {
+      expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+    },
+    { timeout: 2000 },
+  );
+}
+
+describe("CreateAiTaskDialog 成功后自动关闭", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  afterEach(() => {
+    clients.splice(0).forEach((c) => c.clear());
+    cleanup();
+    vi.unstubAllGlobals();
+    // 清理模拟挂起的 getAnimations（见「动画完成事件挂起」用例）
+    delete (Element.prototype as { getAnimations?: unknown }).getAnimations;
+  });
+
+  it.each([
+    { name: "保存为待办" },
+    { name: "创建并运行" },
+  ])("「$name」路径：mutation 成功后 Dialog 关闭", async ({ name }) => {
+    await submitAndExpectClosed(name);
+  });
+
+  it("指令 Textarea 内 Enter（非 Shift）提交、Shift+Enter 不提交", async () => {
+    const { createAiTaskFn } = await import("@/server/serverFns/tasks/task-crud");
+    render(<HoldingParent />);
+
+    await screen.findByRole("dialog");
+    fireEvent.change(screen.getByLabelText(/标题/), {
+      target: { value: "测试任务" },
+    });
+    const textarea = screen.getByLabelText(/指令/);
+    fireEvent.change(textarea, { target: { value: "测试指令" } });
+
+    // Shift+Enter 换行语义：不提交
+    fireEvent.keyDown(textarea, { key: "Enter", shiftKey: true });
+    expect(createAiTaskFn).not.toHaveBeenCalled();
+
+    fireEvent.keyDown(textarea, { key: "Enter" });
+    await waitFor(() => {
+      expect(createAiTaskFn).toHaveBeenCalledTimes(1);
+    });
+    expect(createAiTaskFn).toHaveBeenCalledWith({
+      data: expect.objectContaining({ title: "测试任务", runNow: true }),
+    });
+  });
+
+  it("退出动画完成事件挂起时，兜底强制卸载仍关闭 Dialog", async () => {
+    // 模拟浏览器退出动画门挂起：getAnimations 返回 finished 永不 resolve 的动画
+    // （Base UI useOpenStateTransitions 等该 Promise 才卸载 Popup）。
+    (Element.prototype as unknown as { getAnimations: () => unknown[] }).getAnimations =
+      function mockGetAnimations(this: Element) {
+        // 仅对弹窗挂起；其余元素返回空（立即完成语义）
+        if (this.hasAttribute("data-slot")) {
+          return [
+            {
+              finished: new Promise(() => {}), // never resolves
+              playState: "running",
+            },
+          ];
+        }
+        return [];
+      };
+
+    vi.useFakeTimers({ shouldAdvanceTime: true });
+    try {
+      await submitAndExpectClosed("保存为待办");
+    } finally {
+      vi.useRealTimers();
+    }
+  });
+});

package/src/routes/_nav/tasks/-tests/task-filter.test.ts

@@ -0,0 +1,134 @@
+// 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/>.
+
+// 任务前端过滤搜索回归（UI 对齐四期任务 47 Q5，设计 §9.3）：
+// ① 搜索「部署」后 assigned 三组仅剩标题含词项（AI 任务按标题/指令命中）；
+// ② 清空搜索恢复全量。
+import { describe, expect, it } from "vitest";
+import { useTaskFilter } from "../-components/use-task-filter";
+import type { AssignedResult } from "@/server/ai-task/types";
+import type { AiTaskListItem } from "../-components/ai-task-list";
+
+const ISO = "2026-01-01T00:00:00.000Z";
+
+const assigned: AssignedResult = {
+  items: [
+    {
+      source: "story",
+      id: "s1",
+      identifier: "STORY-1",
+      title: "部署流水线搭建",
+      projectId: "p1",
+      projectName: "独立需求",
+      priority: "P1",
+      dueAt: null,
+      href: "/stories/s1",
+      updatedAt: ISO,
+    },
+    {
+      source: "bug",
+      id: "b1",
+      identifier: "BUG-1",
+      title: "Deploy docs page",
+      projectId: "p1",
+      projectName: "独立需求",
+      priority: null,
+      dueAt: null,
+      href: "/bugs/b1",
+      updatedAt: ISO,
+    },
+    {
+      source: "testcase",
+      id: "t1",
+      identifier: "TC-1",
+      title: "部署回滚用例",
+      projectId: "p1",
+      projectName: "独立需求",
+      priority: "P2",
+      dueAt: null,
+      href: "/test-cases/t1",
+      updatedAt: ISO,
+    },
+    {
+      source: "testcase",
+      id: "t2",
+      identifier: "TC-2",
+      title: "登录态校验用例",
+      projectId: "p1",
+      projectName: "独立需求",
+      priority: null,
+      dueAt: null,
+      href: "/test-cases/t2",
+      updatedAt: ISO,
+    },
+  ],
+  degraded: [],
+};
+
+type AiFixture = AiTaskListItem & { instruction: string };
+
+const aiTasks: AiFixture[] = [
+  {
+    id: "a1",
+    title: "诊断任务",
+    status: "backlog",
+    runCount: 0,
+    lastRunAt: null,
+    sourceType: null,
+    sourceId: null,
+    updatedAt: ISO,
+    instruction: "协助部署验证并输出结论",
+  },
+  {
+    id: "a2",
+    title: "巡检任务",
+    status: "completed",
+    runCount: 1,
+    lastRunAt: ISO,
+    sourceType: null,
+    sourceId: null,
+    updatedAt: ISO,
+    instruction: "巡检服务健康度",
+  },
+];
+
+describe("useTaskFilter 前端过滤搜索（任务 47）", () => {
+  it("搜索「部署」后 assigned 三组仅剩标题含词项；AI 任务按标题/指令命中；大小写不敏感", () => {
+    const result = useTaskFilter("部署", assigned, aiTasks);
+    // 三组过滤：仅剩标题含「部署」的 story 与 testcase 条目，bug 组清空
+    expect(result.assigned.items.map((i) => i.identifier)).toEqual(["STORY-1", "TC-1"]);
+    // AI 任务标题不含词但指令命中
+    expect(result.ai.map((i) => i.id)).toEqual(["a1"]);
+    // includes 匹配大小写不敏感
+    expect(useTaskFilter("deploy", assigned, aiTasks).assigned.items.map((i) => i.identifier)).toEqual([
+      "BUG-1",
+    ]);
+  });
+
+  it("清空搜索恢复全量（assigned 与 AI 任务原样返回）", () => {
+    const result = useTaskFilter("", assigned, aiTasks);
+    expect(result.assigned.items).toHaveLength(4);
+    expect(result.assigned.degraded).toEqual([]);
+    expect(result.ai).toHaveLength(2);
+  });
+
+  it("searching 标志区分搜索态与无搜索态（空态文案判断依据）", () => {
+    expect(useTaskFilter("不存在的词", assigned, aiTasks).searching).toBe(true);
+    expect(useTaskFilter("", assigned, aiTasks).searching).toBe(false);
+    expect(useTaskFilter("   ", assigned, aiTasks).searching).toBe(false);
+  });
+});

package/src/routes/_nav/tasks/-tests/task-styles.test.tsx

@@ -0,0 +1,119 @@
+// 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/>.
+
+// 任务模块样式层对齐回归（UI 对齐四期任务 46，设计 §9.3 / §5.1 / §6.2）：
+// ① 状态徽章色板 /15 公式 + dark: 变体成对；② running 保留 LoaderCircle 旋转；
+// ③ 空态容器 h-40 居中。
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { cleanup, render } from "@testing-library/react";
+import { TASK_STATUS_COLOR } from "../-components/task-constants";
+import { AiTaskStatusBadge } from "../-components/ai-task-status-badge";
+import { AssignedList } from "../-components/assigned-list";
+import { AiTaskList } from "../-components/ai-task-list";
+
+vi.mock("@tanstack/react-router", () => ({
+  Link: ({ children }: { children: React.ReactNode }) => <a>{children}</a>,
+  useRouter: () => ({ invalidate: vi.fn().mockResolvedValue(undefined) }),
+}));
+
+vi.mock("@/server/serverFns/tasks/task-crud", () => ({
+  createAiTaskFn: vi.fn().mockResolvedValue({ id: "task-1" }),
+  runAiTaskFn: vi.fn().mockResolvedValue({}),
+  deleteAiTaskFn: vi.fn().mockResolvedValue({}),
+}));
+
+function makeQueryClient() {
+  return new QueryClient({
+    defaultOptions: { queries: { retry: false }, mutations: { retry: false } },
+  });
+}
+
+afterEach(() => {
+  cleanup();
+});
+
+describe("任务样式层对齐（任务 46）", () => {
+  it("状态徽章色板遵循 §5.1 /15 公式且 dark: 变体成对", () => {
+    const entries = Object.entries(TASK_STATUS_COLOR);
+    // 六状态齐备
+    expect(entries).toHaveLength(6);
+    for (const [, color] of entries) {
+      if (color.includes("-500/15")) {
+        // 彩色态：/15 底色 + 字色与 dark: 变体成对
+        expect(color).toMatch(/bg-[a-z]+-500\/15/);
+        expect(color).toMatch(/text-[a-z]+-600 dark:text-[a-z]+-400/);
+      } else {
+        // 中性态：bg-muted + muted-foreground
+        expect(color).toContain("bg-muted text-muted-foreground");
+      }
+    }
+    // 渲染形态（completed=绿色 /15）核验徽章 className 携带同一 token
+    const { container } = render(<AiTaskStatusBadge status="completed" />);
+    const badge = container.firstElementChild;
+    expect(badge?.className).toContain("bg-green-500/15");
+    expect(badge?.className).toContain("dark:text-green-400");
+  });
+
+  it("running 徽章保留 LoaderCircle 旋转（animate-spin）", () => {
+    const { container } = render(<AiTaskStatusBadge status="running" />);
+    const spinner = container.querySelector("svg.animate-spin");
+    expect(spinner).not.toBeNull();
+    expect(spinner?.getAttribute("class")).toContain("lucide-loader-circle");
+  });
+
+  it("空态容器 h-40 居中（§5.3）", () => {
+    const assigned = render(<AssignedList result={{ items: [], degraded: [] }} />);
+    expect(assigned.container.firstElementChild?.className).toContain("h-40");
+
+    const ai = render(
+      <QueryClientProvider client={makeQueryClient()}>
+        <AiTaskList items={[]} onRequestCreate={() => {}} />
+      </QueryClientProvider>,
+    );
+    expect(ai.container.firstElementChild?.className).toContain("h-40");
+  });
+
+  it("搜索空态与无数据空态区分（B7）：searching=true 显示「无匹配任务」，false 保持各自暂无文案", () => {
+    // searching=true：assigned 与 AI 任务均显示「无匹配任务」
+    const assignedSearching = render(
+      <AssignedList result={{ items: [], degraded: [] }} searching />,
+    );
+    expect(assignedSearching.container.textContent).toContain("无匹配任务");
+
+    const aiSearching = render(
+      <QueryClientProvider client={makeQueryClient()}>
+        <AiTaskList items={[]} onRequestCreate={() => {}} searching />
+      </QueryClientProvider>,
+    );
+    expect(aiSearching.container.textContent).toContain("无匹配任务");
+    // 搜索无命中不带新建入口（新建不改变「搜索词无匹配」事实）
+    expect(aiSearching.container.textContent).not.toContain("新建任务");
+
+    // searching=false：真·无数据，保持各自暂无文案（AI 任务带新建入口）
+    const assignedEmpty = render(<AssignedList result={{ items: [], degraded: [] }} />);
+    expect(assignedEmpty.container.textContent).toContain("暂无分配给我的任务");
+
+    const aiEmpty = render(
+      <QueryClientProvider client={makeQueryClient()}>
+        <AiTaskList items={[]} onRequestCreate={() => {}} />
+      </QueryClientProvider>,
+    );
+    expect(aiEmpty.container.textContent).toContain("暂无 AI 任务");
+    expect(aiEmpty.container.textContent).toContain("新建任务");
+  });
+});

package/src/routes/_nav/tasks/index.lazy.tsx

@@ -0,0 +1,114 @@
+// 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/>.
+
+// 任务首页（任务 9 / 四期任务 47 对齐）：ToolbarShell 三列网格工具栏——左簇
+// 双 Tab 切换（分配给我的/AI 任务）、中列搜索（useTaskFilter 纯函数前端过滤，
+// 标题/指令 includes 匹配）、右簇「新建任务」；@container 行由 flex-col 直排
+// 拿满宽（页面容器 h-full p-4 应用式，无需 min-w-0 包装）。数据来自 index.tsx
+// beforeLoad context（Route.useRouteContext）；AI 任务创建触发 CreateAiTaskDialog；
+// 桌面端降级（ai.degraded）时禁用新建并提示。Skeleton pending 由 index.tsx 承担。
+import { useState } from "react";
+import { createLazyFileRoute } from "@tanstack/react-router";
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "@/components/ui/tabs";
+import {
+  CREATE_ICON,
+  SEARCH_ICON,
+} from "@/components/shared-kit/list-kit/icon-semantics";
+import { ToolbarShell } from "@/components/shared-kit/list-kit/toolbar-shell";
+import { AssignedList } from "./-components/assigned-list";
+import { AiTaskList } from "./-components/ai-task-list";
+import { CreateAiTaskDialog } from "./-components/create-ai-task-dialog";
+import { useTaskFilter } from "./-components/use-task-filter";
+import { m } from "@/paraglide/messages.js";
+
+function TasksIndexPage() {
+  const { assigned, ai } = Route.useRouteContext();
+  const [createOpen, setCreateOpen] = useState(false);
+  const [search, setSearch] = useState("");
+  const desktopDegraded = ai.degraded === true;
+  const filtered = useTaskFilter(search, assigned, ai.items);
+
+  return (
+    <div className="flex h-full w-full flex-col gap-4 p-4">
+      <Tabs defaultValue="assigned" className="flex min-h-0 flex-1 flex-col gap-3">
+        <ToolbarShell
+          left={
+            <TabsList>
+              <TabsTrigger value="assigned">{m.tasks_tab_assigned()}</TabsTrigger>
+              <TabsTrigger value="ai">{m.tasks_tab_ai()}</TabsTrigger>
+            </TabsList>
+          }
+          search={
+            <>
+              <SEARCH_ICON className="pointer-events-none absolute left-2.5 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
+              <Input
+                value={search}
+                onChange={(e) => setSearch(e.target.value)}
+                placeholder={m.tasks_search_placeholder()}
+                className="h-8 w-full pl-8 text-sm md:text-sm"
+              />
+            </>
+          }
+          right={
+            <Button
+              size="sm"
+              onClick={() => setCreateOpen(true)}
+              disabled={desktopDegraded}
+            >
+              <CREATE_ICON data-icon="inline-start" />
+              {m.tasks_create_new()}
+            </Button>
+          }
+          below={
+            <>
+              <TabsContent value="assigned">
+                <AssignedList result={filtered.assigned} searching={filtered.searching} />
+              </TabsContent>
+              <TabsContent value="ai" className="flex flex-col gap-3">
+                {desktopDegraded ? (
+                  <Alert>
+                    <AlertDescription>{m.tasks_ai_desktop_notice()}</AlertDescription>
+                  </Alert>
+                ) : null}
+                <AiTaskList
+                  items={filtered.ai}
+                  onRequestCreate={() => setCreateOpen(true)}
+                  createDisabled={desktopDegraded}
+                  runDisabled={desktopDegraded}
+                  searching={filtered.searching}
+                />
+              </TabsContent>
+            </>
+          }
+        />
+      </Tabs>
+      <CreateAiTaskDialog open={createOpen} onOpenChange={setCreateOpen} />
+    </div>
+  );
+}
+
+export const Route = createLazyFileRoute("/_nav/tasks/")({
+  component: TasksIndexPage,
+});

package/src/routes/_nav/tasks/index.tsx

@@ -0,0 +1,47 @@
+// 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/>.
+
+// 任务模块首页 loader（任务 8）：双列表预取（分配给我的 + AI 任务），鉴权由
+// serverFn 首行 requireAuth 自查；桌面端 SQLite 降级由 listAiTasksFn 返回
+// degraded 标记，不在路由层分支。
+import { createFileRoute } from "@tanstack/react-router";
+import { Skeleton } from "@/components/ui/skeleton";
+import {
+  listAiTasksFn,
+  listAssignedToMeFn,
+} from "@/server/serverFns/tasks/task-queries";
+
+function TasksSkeleton() {
+  return (
+    <div className="flex h-full w-full flex-col gap-4 p-4">
+      <Skeleton className="h-8 w-64" />
+      <Skeleton className="h-9 w-72" />
+      <Skeleton className="flex-1 w-full rounded-lg" />
+    </div>
+  );
+}
+
+export const Route = createFileRoute("/_nav/tasks/")({
+  beforeLoad: async () => {
+    const [assigned, ai] = await Promise.all([
+      listAssignedToMeFn(),
+      listAiTasksFn(),
+    ]);
+    return { assigned, ai };
+  },
+  pendingComponent: TasksSkeleton,
+});

package/src/routes/_nav/{tags → tasks}/route.tsx

@@ -15,8 +15,8 @@
 // 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 { createFileRoute, Outlet } from '@tanstack/react-router'
+import { createFileRoute, Outlet } from "@tanstack/react-router";
 
-export const Route = createFileRoute('/_nav/tags')({
+export const Route = createFileRoute("/_nav/tasks")({
   component: () => <Outlet />,
-})
+});

package/src/routes/_nav/test-cases/$caseId/route.lazy.tsx

@@ -21,11 +21,13 @@ import { createLazyFileRoute } from "@tanstack/react-router";
 import { CaseDetailBody } from "@/components/testcase/detail/case-detail-body";
 
 function CaseDetailPage() {
-  const { testCase, users, folders, activities } = Route.useLoaderData();
+  const { testCase, collab, users, folders, activities } = Route.useLoaderData();
   return (
     <CaseDetailBody
       key={testCase.id}
       testCase={testCase}
+      collab={collab != null}
+      collabSnapshot={collab?.snapshot ?? null}
       users={users}
       folders={folders}
       activities={activities}