diff --git a/internal/handler/preview.go b/internal/handler/preview.go
index 08b6d4b..531e745 100644
--- a/internal/handler/preview.go
+++ b/internal/handler/preview.go
@@ -110,7 +110,7 @@ func (h *PreviewHandler) GetFile(ctx *gin.Context) {
 	// 对可执行 MIME 施加 sandbox，防止上传的恶意 HTML/SVG 在 Lumina 同源下执行脚本窃取令牌
 	// 存储的 HTML MIME 为常量 PreviewMimeHTML（"text/html; charset=utf-8"），故用 HasPrefix 匹配
 	if mime := strings.ToLower(file.MimeType); strings.HasPrefix(mime, "text/html") || mime == "image/svg+xml" || strings.Contains(mime, "javascript") {
-		ctx.Header("Content-Security-Policy", "sandbox allow-scripts")
+		ctx.Header("Content-Security-Policy", "sandbox allow-scripts allow-popups")
 	}
 	ctx.Data(http.StatusOK, file.MimeType, []byte(file.Content))
 }
diff --git a/internal/handler/serve.go b/internal/handler/serve.go
index 4c70051..b92c044 100644
--- a/internal/handler/serve.go
+++ b/internal/handler/serve.go
@@ -70,7 +70,7 @@ func writeServedFile(ctx *gin.Context, filename, mimeType, content string) {
 	}
 
 	if strings.HasPrefix(mime, "text/html") || mime == "image/svg+xml" || strings.Contains(mime, "javascript") {
-		ctx.Header("Content-Security-Policy", "sandbox allow-scripts")
+		ctx.Header("Content-Security-Policy", "sandbox allow-scripts allow-popups")
 	}
 	if strings.HasPrefix(mime, "text/html") {
 		body = injectNavigateShim(body)
diff --git a/internal/logic/qa_logic.go b/internal/logic/qa_logic.go
index 4d37fe9..c7515d5 100644
--- a/internal/logic/qa_logic.go
+++ b/internal/logic/qa_logic.go
@@ -378,6 +378,9 @@ func (l *QaLogic) UpdateQaConfig(ctx context.Context, req *qa.UpdateQaConfigRequ
 
 	// 更新运行时域名
 	if req.RuntimeDomain != nil {
+		if xErr := ValidateSiteDomain(ctx, *req.RuntimeDomain); xErr != nil {
+			return nil, xErr
+		}
 		if xErr := l.repo.info.UpdateValue(ctx, bConst.InfoKeySiteDomain, *req.RuntimeDomain); xErr != nil {
 			return nil, xError.NewError(ctx, xError.DatabaseError, "更新运行时域名失败", false, nil)
 		}
diff --git a/internal/logic/settings.go b/internal/logic/settings.go
index 7215a2c..3abde98 100644
--- a/internal/logic/settings.go
+++ b/internal/logic/settings.go
@@ -3,7 +3,10 @@ package logic
 import (
 	"context"
 	"fmt"
+	"net/url"
 	"strconv"
+	"strings"
+	"unicode"
 
 	apiSettings "github.com/xiaolfeng/Lumina/api/settings"
 	bConst "github.com/xiaolfeng/Lumina/internal/constant"
@@ -155,9 +158,47 @@ func (l *SettingsLogic) GetSettingBool(ctx context.Context, key string) (bool, *
 	return value == "true", nil
 }
 
+// ValidateSiteDomain 校验对外站点域名格式。
+//
+// 允许空字符串（未配置时回退到默认监听地址）。
+// 非空时必须为合法的 HTTP 或 HTTPS 绝对地址，拥有非空 Host，
+// 禁止包含账号凭据 (userinfo)、查询参数 (?)、锚点 (#)、控制字符或空白字符。
+func ValidateSiteDomain(ctx context.Context, value string) *xError.Error {
+	if value == "" {
+		return nil
+	}
+
+	// 拦截包含任何空白字符或控制字符（包含 Unicode 空格、行分隔符等）
+	for _, r := range value {
+		if unicode.IsSpace(r) || unicode.IsControl(r) {
+			return xError.NewError(ctx, xError.BadRequest, xError.ErrMessage("站点域名不得包含空白字符或控制字符"), false, nil)
+		}
+	}
+
+	// 拦截命令行特殊符号、查询参数与锚点标识
+	if strings.ContainsAny(value, "\"'`$<>|&?#\\") {
+		return xError.NewError(ctx, xError.BadRequest, xError.ErrMessage("站点域名必须为合法的 HTTP 或 HTTPS 根地址，不得包含查询参数 (?)、页面锚点 (#) 或特殊字符"), false, nil)
+	}
+
+	parsedURL, err := url.ParseRequestURI(value)
+	if err != nil || (parsedURL.Scheme != "http" && parsedURL.Scheme != "https") || parsedURL.Host == "" {
+		return xError.NewError(ctx, xError.BadRequest, xError.ErrMessage("站点域名必须为合法的 HTTP 或 HTTPS 地址（例如 https://lumina.example.com）"), false, err)
+	}
+
+	if parsedURL.User != nil {
+		return xError.NewError(ctx, xError.BadRequest, xError.ErrMessage("站点域名不得包含账号或密码凭据信息"), false, nil)
+	}
+
+	if parsedURL.RawQuery != "" || parsedURL.Fragment != "" {
+		return xError.NewError(ctx, xError.BadRequest, xError.ErrMessage("站点域名不得包含查询参数或页面锚点"), false, nil)
+	}
+
+	return nil
+}
+
 // validateSettingValue 根据 KeyDef.Type 校验值合法性
 //
-// int → strconv.Atoi 必须成功；bool → 必须为 "true" 或 "false"；string → 不校验。
+// int → strconv.Atoi 必须成功；bool → 必须为 "true" 或 "false"；string → 特定键（如 site.domain）校验合法 URL 格式。
 func validateSettingValue(ctx context.Context, def bConst.SettingKeyDef, value string) *xError.Error {
 	switch def.Type {
 	case "int":
@@ -172,6 +213,12 @@ func validateSettingValue(ctx context.Context, def bConst.SettingKeyDef, value s
 		if value != "true" && value != "false" {
 			return xError.NewError(ctx, xError.BadRequest, xError.ErrMessage("设置项 ["+def.Key+"] 值 ["+value+"] 不是有效的布尔值（true/false）"), false, nil)
 		}
+	case "string":
+		if def.Key == bConst.InfoKeySiteDomain {
+			if xErr := ValidateSiteDomain(ctx, value); xErr != nil {
+				return xErr
+			}
+		}
 	}
 	return nil
 }
diff --git a/internal/logic/settings_validation_test.go b/internal/logic/settings_validation_test.go
new file mode 100644
index 0000000..649fd17
--- /dev/null
+++ b/internal/logic/settings_validation_test.go
@@ -0,0 +1,86 @@
+package logic
+
+import (
+	"context"
+	"testing"
+
+	bConst "github.com/xiaolfeng/Lumina/internal/constant"
+)
+
+func TestValidateSettingValue_SiteDomain(t *testing.T) {
+	ctx := context.Background()
+	def := bConst.SettingKeyDef{
+		Key:      bConst.InfoKeySiteDomain,
+		Category: bConst.SettingCategorySite,
+		Type:     "string",
+	}
+
+	validCases := []string{
+		"",
+		"https://lumina.example.com",
+		"http://localhost:8080",
+		"https://127.0.0.1:8800/subpath",
+	}
+
+	for _, val := range validCases {
+		if err := validateSettingValue(ctx, def, val); err != nil {
+			t.Errorf("validateSettingValue should allow %q, got error: %v", val, err)
+		}
+	}
+
+	invalidCases := []string{
+		"not-a-url",
+		"javascript:alert(1)",
+		"https://lumina.example.com; rm -rf /",
+		"https://lumina.example.com/foo bar",
+		"https://lumina.example.com\" && echo evil",
+		"https://lumina.example.com\nmalicious",
+		"ftp://lumina.example.com",
+		"https://lumina.example.com?x=1",
+		"https://lumina.example.com/foo#bar",
+		"https://user:pass@lumina.example.com",
+		"https://lumina.example.com/\u2028evil",
+	}
+
+	for _, val := range invalidCases {
+		if err := validateSettingValue(ctx, def, val); err == nil {
+			t.Errorf("validateSettingValue should reject %q, but got nil", val)
+		}
+	}
+}
+
+func TestValidateSiteDomain_Direct(t *testing.T) {
+	ctx := context.Background()
+
+	// 合法用例
+	valid := []string{
+		"",
+		"https://example.com",
+		"http://localhost:3000",
+		"https://sub.domain.org/path",
+		"http://192.168.1.1:8800",
+	}
+	for _, v := range valid {
+		if err := ValidateSiteDomain(ctx, v); err != nil {
+			t.Errorf("ValidateSiteDomain(%q) expected nil, got: %v", v, err)
+		}
+	}
+
+	// 非法用例
+	invalid := []string{
+		"ftp://example.com",
+		"https://example.com?query=1",
+		"https://example.com#hash",
+		"https://user:pass@example.com",
+		"https://example.com/foo bar",
+		"https://example.com\nmalicious",
+		"https://example.com; rm -rf /",
+		"https://example.com`whoami`",
+		"https://example.com/\u2028split",
+	}
+	for _, inv := range invalid {
+		if err := ValidateSiteDomain(ctx, inv); err == nil {
+			t.Errorf("ValidateSiteDomain(%q) expected error, got nil", inv)
+		}
+	}
+}
diff --git a/web/AGENTS.md b/web/AGENTS.md
index 3233d10..4d9c74c 100644
--- a/web/AGENTS.md
+++ b/web/AGENTS.md
@@ -7,6 +7,7 @@
 TanStack Start（React 19）+ Tailwind CSS 4 + shadcn/ui 构建的 Lumina 前端应用，通过 REST API + WebSocket 与后端通信。前端构建产物通过 `go:embed` 嵌入 Go 二进制，支持单文件部署。同时通过 `@lumina/components` workspace 包与 `web-wiki` 共享 shadcn/ui 组件、Markdown 原语、motion 动画变体和微明主题 CSS。
 
 ## 目录结构
+
 ```text
 web/
 ├── package.json                # pnpm 管理；React 19 + TanStack Start + Tailwind CSS 4
@@ -285,39 +286,39 @@ web/
 
 ## 导航指南
 
-| 任务 | 位置 | 说明 |
-|---|---|---|
-| 新增页面 | `src/routes/` | 文件路径即路由路径；布局路由以 `_` 前缀 |
-| 新增控制台子页面 | `src/routes/console/` | 在 `console.tsx` 布局下添加，自动继承 Sidebar + Breadcrumb |
-| 新增工作空间管理 | `src/routes/console/workspace.tsx` | 工作空间增删改查、默认空间保障与图标配置 |
-| 新增 Pages 管理页 | `src/routes/console/pages/` | 已发布页面列表、版本查询、访问策略与密码门设置 |
-| 新增 Pages 展示页 | `src/routes/pages/` | 路径式寻址 `/pages/:projectName/:slug`，密码门认证、沉浸壳展示 |
-| 新增 Preview 工作台 | `src/routes/preview/$sessionHash/$.tsx` | 路径式寻址 `/preview/:hash/:file`，视口缩放、源码查看、晋升对话框 |
-| 新增 LPW 文档渲染 | `@lumina/components/lpw` | 25+ 块组件与 4 种容器，支持 React 直渲与 ECharts 懒加载 |
-| 新增 MCP 接入说明 | `src/routes/console/connect.tsx` | 四级信道：插件安装 / 手动 MCP / 技能安装 / 工具速览；模板在 `mcp-connect.ts` + `plugin-connect.ts` |
-| 新增 MCP 接入组件 | `src/components/mcp/` | 复制块/端点卡/插件安装/技能安装/手动配置/工具目录；令牌弹窗复用 `created-key-panel` |
-| 新增 OAuth 同意页 | `src/routes/_public/oauth.tsx` | 公开布局；`?authorize_id=` 对应后端授权请求缓存；未登录先走登录再裁决 |
-| 新增项目级子页面 | `src/routes/console/project/$projectId/` | 按模块划分子目录（如 `repowiki/`） |
-| 新增 Interact 子页面 | `src/routes/interact/` | 在 `interact.tsx` 布局下添加 |
-| 新增通用组件 | `src/components/` | 全局级组件（Navbar/Footer/Sidebar/通用对话框/骨架屏等） |
-| 新增首页落地页区块 | `src/components/landing/` | 首页拆分为 hero/features/tech 等区块组件 |
-| 新增业务组件 | `src/components/<domain>/` | 按业务域组织（apikey/、workspace/、project/、pin/、profile/、qa/、preview/、pages/、interact/、llm/、ssh/、repowiki/、settings/） |
-| 新增题型组件 | `src/components/interact/question-*.tsx` | 遵循 `question-<type>.tsx` 命名，通过 `question-card.tsx` 分发 |
-| 新增交互原语 | `src/components/interact/primitives/` | 可复用的展示原语（Kicker/PanelCard/SandboxFrame/PreviewFrame 等）；Markdown 原语由 `@lumina/components` 提供 |
-| 新增 LLM 配置组件 | `src/components/llm/` | Provider/Model CRUD + Agent 角色模型分配 |
-| 新增 SSH Key 组件 | `src/components/ssh/` | CRUD 对话框 + 密钥生成入口 |
-| 新增 RepoWiki 组件 | `src/components/repowiki/` | 配置表单/版本管理/分析触发/Webhook 配置 |
-| 新增系统设置组件 | `src/components/settings/` | 按分组组织（站点/安全/Q&A/RepoWiki/Preview） |
-| 新增 shadcn/ui 组件 | `components/src/ui/` | 通过 `pnpm dlx shadcn@latest add <name>` 添加到共享包 |
-| 新增 API 接口 | `src/lib/apis/` | 使用 apiClient 封装，返回类型化响应 |
-| 新增数据 Hook | `src/hooks/` | 基于 TanStack Query 的 useMutation/useQuery |
-| 新增类型定义 | `src/lib/models/` | 按 request/response 子目录组织 |
-| 新增 WebAuthn 辅助函数 | `src/lib/webauthn/helpers.ts` | 浏览器端 base64 编解码、选项解析 |
-| 新增题型格式化 | `src/lib/format-answer.ts` | 各题型 answer → 可读字符串，跨 QA/interact 复用 |
-| 修改全局主题色 | `components/src/styles/theme.css` | 主题色盘已迁到共享包（静烛 v1） |
-| 修改路由配置 | `src/router.tsx` | 预加载策略、滚动恢复等 |
-| 修改动画配置 | `components/src/motion/` | 缓动函数和全局动画变体（共享包，详见 [components/](../components/AGENTS.md)） |
-| 工具函数 | `src/lib/` 或 `components/src/lib/` | 通用工具（如 `cn()`） |
+| 任务                   | 位置                                     | 说明                                                                                                                              |
+| ---------------------- | ---------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------- |
+| 新增页面               | `src/routes/`                            | 文件路径即路由路径；布局路由以 `_` 前缀                                                                                           |
+| 新增控制台子页面       | `src/routes/console/`                    | 在 `console.tsx` 布局下添加，自动继承 Sidebar + Breadcrumb                                                                        |
+| 新增工作空间管理       | `src/routes/console/workspace.tsx`       | 工作空间增删改查、默认空间保障与图标配置                                                                                          |
+| 新增 Pages 管理页      | `src/routes/console/pages/`              | 已发布页面列表、版本查询、访问策略与密码门设置                                                                                    |
+| 新增 Pages 展示页      | `src/routes/pages/`                      | 路径式寻址 `/pages/:projectName/:slug`，密码门认证、沉浸壳展示                                                                    |
+| 新增 Preview 工作台    | `src/routes/preview/$sessionHash/$.tsx`  | 路径式寻址 `/preview/:hash/:file`，视口缩放、源码查看、晋升对话框                                                                 |
+| 新增 LPW 文档渲染      | `@lumina/components/lpw`                 | 25+ 块组件与 4 种容器，支持 React 直渲与 ECharts 懒加载                                                                           |
+| 新增 MCP 接入说明      | `src/routes/console/connect.tsx`         | 四级信道：插件安装 / 手动 MCP / 技能安装 / 工具速览；模板在 `mcp-connect.ts` + `plugin-connect.ts`                                |
+| 新增 MCP 接入组件      | `src/components/mcp/`                    | 复制块/端点卡/插件安装/技能安装/手动配置/工具目录；令牌弹窗复用 `created-key-panel`                                               |
+| 新增 OAuth 同意页      | `src/routes/_public/oauth.tsx`           | 公开布局；`?authorize_id=` 对应后端授权请求缓存；未登录先走登录再裁决                                                             |
+| 新增项目级子页面       | `src/routes/console/project/$projectId/` | 按模块划分子目录（如 `repowiki/`）                                                                                                |
+| 新增 Interact 子页面   | `src/routes/interact/`                   | 在 `interact.tsx` 布局下添加                                                                                                      |
+| 新增通用组件           | `src/components/`                        | 全局级组件（Navbar/Footer/Sidebar/通用对话框/骨架屏等）                                                                           |
+| 新增首页落地页区块     | `src/components/landing/`                | 首页拆分为 hero/features/tech 等区块组件                                                                                          |
+| 新增业务组件           | `src/components/<domain>/`               | 按业务域组织（apikey/、workspace/、project/、pin/、profile/、qa/、preview/、pages/、interact/、llm/、ssh/、repowiki/、settings/） |
+| 新增题型组件           | `src/components/interact/question-*.tsx` | 遵循 `question-<type>.tsx` 命名，通过 `question-card.tsx` 分发                                                                    |
+| 新增交互原语           | `src/components/interact/primitives/`    | 可复用的展示原语（Kicker/PanelCard/SandboxFrame/PreviewFrame 等）；Markdown 原语由 `@lumina/components` 提供                      |
+| 新增 LLM 配置组件      | `src/components/llm/`                    | Provider/Model CRUD + Agent 角色模型分配                                                                                          |
+| 新增 SSH Key 组件      | `src/components/ssh/`                    | CRUD 对话框 + 密钥生成入口                                                                                                        |
+| 新增 RepoWiki 组件     | `src/components/repowiki/`               | 配置表单/版本管理/分析触发/Webhook 配置                                                                                           |
+| 新增系统设置组件       | `src/components/settings/`               | 按分组组织（站点/安全/Q&A/RepoWiki/Preview）                                                                                      |
+| 新增 shadcn/ui 组件    | `components/src/ui/`                     | 通过 `pnpm dlx shadcn@latest add <name>` 添加到共享包                                                                             |
+| 新增 API 接口          | `src/lib/apis/`                          | 使用 apiClient 封装，返回类型化响应                                                                                               |
+| 新增数据 Hook          | `src/hooks/`                             | 基于 TanStack Query 的 useMutation/useQuery                                                                                       |
+| 新增类型定义           | `src/lib/models/`                        | 按 request/response 子目录组织                                                                                                    |
+| 新增 WebAuthn 辅助函数 | `src/lib/webauthn/helpers.ts`            | 浏览器端 base64 编解码、选项解析                                                                                                  |
+| 新增题型格式化         | `src/lib/format-answer.ts`               | 各题型 answer → 可读字符串，跨 QA/interact 复用                                                                                   |
+| 修改全局主题色         | `components/src/styles/theme.css`        | 主题色盘已迁到共享包（静烛 v1）                                                                                                   |
+| 修改路由配置           | `src/router.tsx`                         | 预加载策略、滚动恢复等                                                                                                            |
+| 修改动画配置           | `components/src/motion/`                 | 缓动函数和全局动画变体（共享包，详见 [components/](../components/AGENTS.md)）                                                     |
+| 工具函数               | `src/lib/` 或 `components/src/lib/`      | 通用工具（如 `cn()`）                                                                                                             |
 
 ## 约定
 
diff --git a/web/src/components/apikey/edit-dialog.tsx b/web/src/components/apikey/edit-dialog.tsx
index 65bc9e0..bcad45d 100644
--- a/web/src/components/apikey/edit-dialog.tsx
+++ b/web/src/components/apikey/edit-dialog.tsx
@@ -54,9 +54,7 @@ export function EditDialog({ open, onOpenChange, item }: EditDialogProps) {
       <DialogContent>
         <DialogHeader>
           <DialogTitle>编辑令牌</DialogTitle>
-          <DialogDescription>
-            修改令牌的名称、描述和状态。
-          </DialogDescription>
+          <DialogDescription>修改令牌的名称、描述和状态。</DialogDescription>
         </DialogHeader>
         <div className="grid gap-4 py-4">
           <div className="grid gap-2">
diff --git a/web/src/components/data-table-pagination.tsx b/web/src/components/data-table-pagination.tsx
index f5e5351..b6b2634 100644
--- a/web/src/components/data-table-pagination.tsx
+++ b/web/src/components/data-table-pagination.tsx
@@ -28,10 +28,7 @@ export function DataTablePagination({
       </div>
       <div className="flex flex-wrap items-center gap-4">
         <div className="flex items-center gap-2">
-          <label
-            htmlFor={pageSizeId}
-            className="text-sm text-muted-foreground"
-          >
+          <label htmlFor={pageSizeId} className="text-sm text-muted-foreground">
             每页
           </label>
           <select
diff --git a/web/src/components/data-table.tsx b/web/src/components/data-table.tsx
index 6dbd6d8..a886c5c 100644
--- a/web/src/components/data-table.tsx
+++ b/web/src/components/data-table.tsx
@@ -1,9 +1,10 @@
 import {
-  type ColumnDef,
+  
   flexRender,
   getCoreRowModel,
-  useReactTable,
+  useReactTable
 } from '@tanstack/react-table'
+import type {ColumnDef} from '@tanstack/react-table';
 
 import {
   Table,
@@ -59,20 +60,14 @@ export function DataTable<TData, TValue>({
               >
                 {row.getVisibleCells().map((cell) => (
                   <TableCell key={cell.id}>
-                    {flexRender(
-                      cell.column.columnDef.cell,
-                      cell.getContext(),
-                    )}
+                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
                   </TableCell>
                 ))}
               </TableRow>
             ))
           ) : (
             <TableRow>
-              <TableCell
-                colSpan={columns.length}
-                className="h-24 text-center"
-              >
+              <TableCell colSpan={columns.length} className="h-24 text-center">
                 暂无数据
               </TableCell>
             </TableRow>
diff --git a/web/src/components/interact/decision-buttons.tsx b/web/src/components/interact/decision-buttons.tsx
index 974509c..d25dbdf 100644
--- a/web/src/components/interact/decision-buttons.tsx
+++ b/web/src/components/interact/decision-buttons.tsx
@@ -13,91 +13,85 @@ import { Button } from '@lumina/components/ui/button'
 type DecisionValue = 'approve' | 'reject' | 'edit' | 'revise'
 
 interface DecisionButtonsProps {
-	variant: 'three' | 'two'
-	/** 当前选中的决策（null = 未选） */
-	value: DecisionValue | null
-	onChange: (value: DecisionValue | null) => void
-	disabled?: boolean
-	/** 三色模式下第三个按钮（edit）的文案，默认"编辑"（plan 传"修订"） */
-	thirdLabel?: string
+  variant: 'three' | 'two'
+  /** 当前选中的决策（null = 未选） */
+  value: DecisionValue | null
+  onChange: (value: DecisionValue | null) => void
+  disabled?: boolean
+  /** 三色模式下第三个按钮（edit）的文案，默认"编辑"（plan 传"修订"） */
+  thirdLabel?: string
 }
 
 const activeCls = {
-	approve: 'bg-emerald-600 hover:bg-emerald-700',
-	reject: 'bg-red-600 hover:bg-red-700',
-	edit: 'bg-amber-600 hover:bg-amber-700',
-	revise: 'bg-amber-600 hover:bg-amber-700',
+  approve: 'bg-emerald-600 hover:bg-emerald-700',
+  reject: 'bg-red-600 hover:bg-red-700',
+  edit: 'bg-amber-600 hover:bg-amber-700',
+  revise: 'bg-amber-600 hover:bg-amber-700',
 }
 const idleCls = {
-	approve: 'border-emerald-300 text-emerald-700 hover:bg-emerald-50',
-	reject: 'border-red-300 text-red-700 hover:bg-red-50',
-	edit: 'border-amber-300 text-amber-700 hover:bg-amber-50',
-	revise: 'border-amber-300 text-amber-700 hover:bg-amber-50',
+  approve: 'border-emerald-300 text-emerald-700 hover:bg-emerald-50',
+  reject: 'border-red-300 text-red-700 hover:bg-red-50',
+  edit: 'border-amber-300 text-amber-700 hover:bg-amber-50',
+  revise: 'border-amber-300 text-amber-700 hover:bg-amber-50',
 }
 
 export function DecisionButtons({
-	variant,
-	value,
-	onChange,
-	disabled = false,
-	thirdLabel = '编辑',
+  variant,
+  value,
+  onChange,
+  disabled = false,
+  thirdLabel = '编辑',
 }: DecisionButtonsProps) {
-	return (
-		<div
-			className={`flex flex-wrap gap-2 ${disabled ? 'pointer-events-none opacity-50' : ''}`}
-		>
-			<Button
-				variant={value === 'approve' ? 'default' : 'outline'}
-				size="sm"
-				onClick={() => onChange(value === 'approve' ? null : 'approve')}
-				disabled={disabled}
-				className={
-					value === 'approve' ? activeCls.approve : idleCls.approve
-				}
-			>
-				<CheckCircle className="mr-1 size-3.5" aria-hidden />
-				批准
-			</Button>
+  return (
+    <div
+      className={`flex flex-wrap gap-2 ${disabled ? 'pointer-events-none opacity-50' : ''}`}
+    >
+      <Button
+        variant={value === 'approve' ? 'default' : 'outline'}
+        size="sm"
+        onClick={() => onChange(value === 'approve' ? null : 'approve')}
+        disabled={disabled}
+        className={value === 'approve' ? activeCls.approve : idleCls.approve}
+      >
+        <CheckCircle className="mr-1 size-3.5" aria-hidden />
+        批准
+      </Button>
 
-			{variant === 'three' ? (
-				<>
-					<Button
-						variant={value === 'reject' ? 'default' : 'outline'}
-						size="sm"
-						onClick={() => onChange(value === 'reject' ? null : 'reject')}
-						disabled={disabled}
-						className={
-							value === 'reject' ? activeCls.reject : idleCls.reject
-						}
-					>
-						<XCircle className="mr-1 size-3.5" aria-hidden />
-						拒绝
-					</Button>
-					<Button
-						variant={value === 'edit' ? 'default' : 'outline'}
-						size="sm"
-						onClick={() => onChange(value === 'edit' ? null : 'edit')}
-						disabled={disabled}
-						className={value === 'edit' ? activeCls.edit : idleCls.edit}
-					>
-						<Pencil className="mr-1 size-3.5" aria-hidden />
-						{thirdLabel}
-					</Button>
-				</>
-			) : (
-				<Button
-					variant={value === 'revise' ? 'default' : 'outline'}
-					size="sm"
-					onClick={() => onChange(value === 'revise' ? null : 'revise')}
-					disabled={disabled}
-					className={
-						value === 'revise' ? activeCls.revise : idleCls.revise
-					}
-				>
-					<Pencil className="mr-1 size-3.5" aria-hidden />
-					修改
-				</Button>
-			)}
-		</div>
-	)
+      {variant === 'three' ? (
+        <>
+          <Button
+            variant={value === 'reject' ? 'default' : 'outline'}
+            size="sm"
+            onClick={() => onChange(value === 'reject' ? null : 'reject')}
+            disabled={disabled}
+            className={value === 'reject' ? activeCls.reject : idleCls.reject}
+          >
+            <XCircle className="mr-1 size-3.5" aria-hidden />
+            拒绝
+          </Button>
+          <Button
+            variant={value === 'edit' ? 'default' : 'outline'}
+            size="sm"
+            onClick={() => onChange(value === 'edit' ? null : 'edit')}
+            disabled={disabled}
+            className={value === 'edit' ? activeCls.edit : idleCls.edit}
+          >
+            <Pencil className="mr-1 size-3.5" aria-hidden />
+            {thirdLabel}
+          </Button>
+        </>
+      ) : (
+        <Button
+          variant={value === 'revise' ? 'default' : 'outline'}
+          size="sm"
+          onClick={() => onChange(value === 'revise' ? null : 'revise')}
+          disabled={disabled}
+          className={value === 'revise' ? activeCls.revise : idleCls.revise}
+        >
+          <Pencil className="mr-1 size-3.5" aria-hidden />
+          修改
+        </Button>
+      )}
+    </div>
+  )
 }
diff --git a/web/src/components/interact/detail-panel.tsx b/web/src/components/interact/detail-panel.tsx
index e6a72f8..689bfbd 100644
--- a/web/src/components/interact/detail-panel.tsx
+++ b/web/src/components/interact/detail-panel.tsx
@@ -1,164 +1,175 @@
-import { ArrowLeft, RotateCw } from "lucide-react";
-import { useState } from "react";
-import { AnimatePresence, motion } from "motion/react";
-import { Button } from "@lumina/components/ui/button";
-import { ScrollArea } from "@lumina/components/ui/scroll-area";
-import { ease } from "@lumina/components/motion";
+import { ArrowLeft, RotateCw } from 'lucide-react'
+import { useState } from 'react'
+import { AnimatePresence, motion } from 'motion/react'
+import { Button } from '@lumina/components/ui/button'
+import { ScrollArea } from '@lumina/components/ui/scroll-area'
+import { ease } from '@lumina/components/motion'
 
-import { Markdown, proseArticle, SandboxFrame, PreviewSupplement } from "./primitives";
-import { MotionDemoPanel } from "./motion-demo-panel";
-import type { Question } from "./types";
+import {
+  Markdown,
+  proseArticle,
+  SandboxFrame,
+  PreviewSupplement,
+} from './primitives'
+import { MotionDemoPanel } from './motion-demo-panel'
+import type { Question } from './types'
 
 interface DetailPanelProps {
-	visible: boolean;
-	activeOption: { label: string } | null;
-	isMotionDemo: boolean;
-	/** 底层（问题级）补充内容 */
-	questionContent: string;
-	/** 底层内容类型：markdown / html */
-	questionContentType: string;
-	/** 上层（选项级）补充内容，为空时不渲染上层 */
-	optionContent: string;
-	/** 上层内容类型：markdown / html */
-	optionContentType: string;
-	/** 当前选项级 supplement 的 ID（用于内容切换动画 key） */
-	optionId: string;
-	onBack: () => void;
+  visible: boolean
+  activeOption: { label: string } | null
+  isMotionDemo: boolean
+  /** 底层（问题级）补充内容 */
+  questionContent: string
+  /** 底层内容类型：markdown / html */
+  questionContentType: string
+  /** 上层（选项级）补充内容，为空时不渲染上层 */
+  optionContent: string
+  /** 上层内容类型：markdown / html */
+  optionContentType: string
+  /** 当前选项级 supplement 的 ID（用于内容切换动画 key） */
+  optionId: string
+  onBack: () => void
 }
 
 /** 渲染补充内容：markdown 用统一 Markdown 组件（含高亮/katex/mermaid），html 走 iframe sandbox 沙盒隔离，preview 走跨文件引用预览 */
-function SupplementContent({ content, contentType }: { content: string; contentType: string }) {
-	if (contentType === "html") {
-		return <SandboxFrame content={content} className="w-full" />;
-	}
-	if (contentType === "preview") {
-		return <PreviewSupplement content={content} />;
-	}
-	return (
-		<article className={`${proseArticle} max-w-3xl`}>
-			<Markdown>{content}</Markdown>
-		</article>
-	);
+function SupplementContent({
+  content,
+  contentType,
+}: {
+  content: string
+  contentType: string
+}) {
+  if (contentType === 'html') {
+    return <SandboxFrame content={content} className="w-full" />
+  }
+  if (contentType === 'preview') {
+    return <PreviewSupplement content={content} />
+  }
+  return (
+    <article className={`${proseArticle} max-w-3xl`}>
+      <Markdown>{content}</Markdown>
+    </article>
+  )
 }
 
 function FillPreview({ content }: { content: string }) {
-	return (
-		<div className="flex min-h-0 flex-1 flex-col">
-			<PreviewSupplement content={content} />
-		</div>
-	);
+  return (
+    <div className="flex min-h-0 flex-1 flex-col">
+      <PreviewSupplement content={content} />
+    </div>
+  )
 }
 
 export function DetailPanel({
-	visible,
-	activeOption,
-	isMotionDemo,
-	questionContent,
-	questionContentType,
-	optionContent,
-	optionContentType,
-	optionId,
-	onBack,
+  visible,
+  activeOption,
+  isMotionDemo,
+  questionContent,
+  questionContentType,
+  optionContent,
+  optionContentType,
+  optionId,
+  onBack,
 }: DetailPanelProps) {
-	const [renderKey, setRenderKey] = useState(0);
-	const hasOption = optionContent.length > 0;
-	const questionFill = !isMotionDemo && questionContentType === "preview";
-	const optionFill = optionContentType === "preview";
+  const [renderKey, setRenderKey] = useState(0)
+  const hasOption = optionContent.length > 0
+  const questionFill = !isMotionDemo && questionContentType === 'preview'
+  const optionFill = optionContentType === 'preview'
 
-	return (
-		<AnimatePresence mode="popLayout">
-			{visible && (
-				<motion.main
-					key="detail-panel"
-					initial={{ opacity: 0, x: 60 }}
-					animate={{ opacity: 1, x: 0 }}
-					exit={{ opacity: 0, x: 60 }}
-					transition={{ duration: 0.5, ease }}
-					className="relative flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden"
-				>
-					{questionFill ? (
-						<FillPreview content={questionContent} />
-					) : (
-						<ScrollArea className="flex-1 min-h-0 pt-2" hideScrollbar>
-							<div className="p-4">
-								{activeOption && isMotionDemo ? (
-									<MotionDemoPanel
-										selectedLabel={activeOption.label}
-										onBack={onBack}
-									/>
-								) : (
-									<SupplementContent
-										content={questionContent}
-										contentType={questionContentType}
-									/>
-								)}
-							</div>
-						</ScrollArea>
-					)}
+  return (
+    <AnimatePresence mode="popLayout">
+      {visible && (
+        <motion.main
+          key="detail-panel"
+          initial={{ opacity: 0, x: 60 }}
+          animate={{ opacity: 1, x: 0 }}
+          exit={{ opacity: 0, x: 60 }}
+          transition={{ duration: 0.5, ease }}
+          className="relative flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden"
+        >
+          {questionFill ? (
+            <FillPreview content={questionContent} />
+          ) : (
+            <ScrollArea className="flex-1 min-h-0 pt-2" hideScrollbar>
+              <div className="p-4">
+                {activeOption && isMotionDemo ? (
+                  <MotionDemoPanel
+                    selectedLabel={activeOption.label}
+                    onBack={onBack}
+                  />
+                ) : (
+                  <SupplementContent
+                    content={questionContent}
+                    contentType={questionContentType}
+                  />
+                )}
+              </div>
+            </ScrollArea>
+          )}
 
-					<AnimatePresence>
-						{hasOption && (
-							<motion.div
-								key="option-overlay"
-								initial={{ x: "100%" }}
-								animate={{ x: 0 }}
-								exit={{ x: "100%" }}
-								transition={{ duration: 0.4, ease }}
-								className="absolute inset-0 z-10 flex flex-col bg-bg-base"
-							>
-								<div className="flex items-center justify-between border-b border-line/50 p-4 pt-6 pb-2">
-									<Button
-										variant="ghost"
-										size="sm"
-										onClick={onBack}
-										className="text-xs text-sea-ink-soft"
-									>
-										<ArrowLeft className="mr-1 size-3.5" aria-hidden />
-										返回
-									</Button>
-									{optionContentType === "html" && (
-										<Button
-											variant="ghost"
-											size="sm"
-											onClick={() => setRenderKey((k) => k + 1)}
-											className="text-xs text-sea-ink-soft"
-										>
-											<RotateCw className="mr-1 size-3.5" aria-hidden />
-											重新渲染
-										</Button>
-									)}
-								</div>
-								{optionFill ? (
-									<FillPreview content={optionContent} />
-								) : (
-									<ScrollArea className="flex-1 min-h-0" hideScrollbar>
-										<div className="px-4 pb-4 pt-3">
-											<AnimatePresence mode="wait">
-												<motion.div
-													key={`${optionId}-${renderKey}`}
-													initial={{ opacity: 0 }}
-													animate={{ opacity: 1 }}
-													exit={{ opacity: 0 }}
-													transition={{ duration: 0.2, ease }}
-												>
-													<SupplementContent
-														content={optionContent}
-														contentType={optionContentType}
-													/>
-												</motion.div>
-											</AnimatePresence>
-										</div>
-									</ScrollArea>
-								)}
-							</motion.div>
-						)}
-					</AnimatePresence>
-				</motion.main>
-			)}
-		</AnimatePresence>
-	);
+          <AnimatePresence>
+            {hasOption && (
+              <motion.div
+                key="option-overlay"
+                initial={{ x: '100%' }}
+                animate={{ x: 0 }}
+                exit={{ x: '100%' }}
+                transition={{ duration: 0.4, ease }}
+                className="absolute inset-0 z-10 flex flex-col bg-bg-base"
+              >
+                <div className="flex items-center justify-between border-b border-line/50 p-4 pt-6 pb-2">
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={onBack}
+                    className="text-xs text-sea-ink-soft"
+                  >
+                    <ArrowLeft className="mr-1 size-3.5" aria-hidden />
+                    返回
+                  </Button>
+                  {optionContentType === 'html' && (
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => setRenderKey((k) => k + 1)}
+                      className="text-xs text-sea-ink-soft"
+                    >
+                      <RotateCw className="mr-1 size-3.5" aria-hidden />
+                      重新渲染
+                    </Button>
+                  )}
+                </div>
+                {optionFill ? (
+                  <FillPreview content={optionContent} />
+                ) : (
+                  <ScrollArea className="flex-1 min-h-0" hideScrollbar>
+                    <div className="px-4 pb-4 pt-3">
+                      <AnimatePresence mode="wait">
+                        <motion.div
+                          key={`${optionId}-${renderKey}`}
+                          initial={{ opacity: 0 }}
+                          animate={{ opacity: 1 }}
+                          exit={{ opacity: 0 }}
+                          transition={{ duration: 0.2, ease }}
+                        >
+                          <SupplementContent
+                            content={optionContent}
+                            contentType={optionContentType}
+                          />
+                        </motion.div>
+                      </AnimatePresence>
+                    </div>
+                  </ScrollArea>
+                )}
+              </motion.div>
+            )}
+          </AnimatePresence>
+        </motion.main>
+      )}
+    </AnimatePresence>
+  )
 }
 
 export function isMotionDemoQuestion(q: Question | undefined): boolean {
-	return q?.id === "debug-motion";
+  return q?.id === 'debug-motion'
 }
diff --git a/web/src/components/interact/lobby-view.tsx b/web/src/components/interact/lobby-view.tsx
index 50a7e7d..c67010c 100644
--- a/web/src/components/interact/lobby-view.tsx
+++ b/web/src/components/interact/lobby-view.tsx
@@ -8,180 +8,180 @@ import { getProjectList } from '#/lib/apis/project'
 import type { ProjectItem } from '#/lib/models/response/project'
 import { useSidebarOpen } from '#/hooks/useSidebarOpen'
 
-import { Kicker, PanelCard, LoadingState  } from './primitives'
+import { Kicker, PanelCard, LoadingState } from './primitives'
 import type { Session } from './types'
 
 /**
  * 未连接态大厅：项目选择 + 活跃会话列表。
  */
 export function LobbyView({ sessions }: { sessions: Session[] }) {
-	const navigate = useNavigate()
-	const [projects, setProjects] = useState<ProjectItem[]>([])
-	const [loadingProjects, setLoadingProjects] = useState(true)
-	const [creating, setCreating] = useState(false)
+  const navigate = useNavigate()
+  const [projects, setProjects] = useState<ProjectItem[]>([])
+  const [loadingProjects, setLoadingProjects] = useState(true)
+  const [creating, setCreating] = useState(false)
 
-	useEffect(() => {
-		;(async () => {
-			try {
-				const res = await getProjectList({ size: 100 })
-				setProjects(res.data?.items || [])
-			} catch (e) {
-				console.error('Failed to load projects:', e)
-			} finally {
-				setLoadingProjects(false)
-			}
-		})()
-	}, [])
+  useEffect(() => {
+    ;(async () => {
+      try {
+        const res = await getProjectList({ size: 100 })
+        setProjects(res.data?.items || [])
+      } catch (e) {
+        console.error('Failed to load projects:', e)
+      } finally {
+        setLoadingProjects(false)
+      }
+    })()
+  }, [])
 
-	async function handleCreate(projectId: string) {
-		setCreating(true)
-		try {
-			const createRes = await createSession({
-				project_id: projectId,
-				title: `临时问答 ${new Date().toLocaleString('zh-CN')}`,
-				agent: 'web',
-				type: 'temporary',
-			})
-			const newSession = createRes.data
-			if (newSession?.hash) {
-				navigate({
-					to: '/interact',
-					search: { session: newSession.hash },
-					replace: true,
-				})
-			}
-		} catch (e) {
-			console.error('Failed to create session:', e)
-		} finally {
-			setCreating(false)
-		}
-	}
+  async function handleCreate(projectId: string) {
+    setCreating(true)
+    try {
+      const createRes = await createSession({
+        project_id: projectId,
+        title: `临时问答 ${new Date().toLocaleString('zh-CN')}`,
+        agent: 'web',
+        type: 'temporary',
+      })
+      const newSession = createRes.data
+      if (newSession?.hash) {
+        navigate({
+          to: '/interact',
+          search: { session: newSession.hash },
+          replace: true,
+        })
+      }
+    } catch (e) {
+      console.error('Failed to create session:', e)
+    } finally {
+      setCreating(false)
+    }
+  }
 
-	return (
-		<div className="flex min-h-0 flex-1 items-center justify-center gap-8 p-6">
-			<div className="w-full max-w-sm space-y-4">
-				<PanelCard
-					flushHeader
-					header={
-						<div className="px-4 py-2.5">
-							<Kicker>选择项目</Kicker>
-						</div>
-					}
-				>
-					{loadingProjects ? (
-						<LoadingState text="加载项目中…" />
-					) : projects.length === 0 ? (
-						<div className="py-8 text-center">
-							<FolderOpen
-								className="mx-auto mb-2 size-8 text-sea-ink-soft/30"
-								aria-hidden
-							/>
-							<p className="text-xs text-sea-ink-soft/50">暂无可用项目</p>
-						</div>
-					) : (
-						<div className="divide-y divide-line/30">
-							{projects.map((project) => (
-								<button
-									key={project.id}
-									type="button"
-									disabled={creating}
-									onClick={() => handleCreate(project.id)}
-									className="group flex w-full cursor-pointer items-center gap-3 px-4 py-3 text-left transition-colors duration-150 hover:bg-lagoon/5 disabled:cursor-wait"
-								>
-									<FolderOpen
-										className="size-4 shrink-0 text-lagoon/70 group-hover:text-lagoon"
-										aria-hidden
-									/>
-									<div className="min-w-0 flex-1">
-										<p className="truncate text-sm font-medium text-sea-ink">
-											{project.name}
-										</p>
-										{project.description && (
-											<p className="truncate text-[11px] text-sea-ink-soft/60">
-												{project.description}
-											</p>
-										)}
-									</div>
-									{creating ? (
-										<Loader2
-											className="size-4 animate-spin text-sea-ink-soft/40"
-											aria-hidden
-										/>
-									) : (
-										<Plus
-											className="size-4 text-sea-ink-soft/30 group-hover:text-lagoon"
-											aria-hidden
-										/>
-									)}
-								</button>
-							))}
-						</div>
-					)}
-				</PanelCard>
-			</div>
+  return (
+    <div className="flex min-h-0 flex-1 items-center justify-center gap-8 p-6">
+      <div className="w-full max-w-sm space-y-4">
+        <PanelCard
+          flushHeader
+          header={
+            <div className="px-4 py-2.5">
+              <Kicker>选择项目</Kicker>
+            </div>
+          }
+        >
+          {loadingProjects ? (
+            <LoadingState text="加载项目中…" />
+          ) : projects.length === 0 ? (
+            <div className="py-8 text-center">
+              <FolderOpen
+                className="mx-auto mb-2 size-8 text-sea-ink-soft/30"
+                aria-hidden
+              />
+              <p className="text-xs text-sea-ink-soft/50">暂无可用项目</p>
+            </div>
+          ) : (
+            <div className="divide-y divide-line/30">
+              {projects.map((project) => (
+                <button
+                  key={project.id}
+                  type="button"
+                  disabled={creating}
+                  onClick={() => handleCreate(project.id)}
+                  className="group flex w-full cursor-pointer items-center gap-3 px-4 py-3 text-left transition-colors duration-150 hover:bg-lagoon/5 disabled:cursor-wait"
+                >
+                  <FolderOpen
+                    className="size-4 shrink-0 text-lagoon/70 group-hover:text-lagoon"
+                    aria-hidden
+                  />
+                  <div className="min-w-0 flex-1">
+                    <p className="truncate text-sm font-medium text-sea-ink">
+                      {project.name}
+                    </p>
+                    {project.description && (
+                      <p className="truncate text-[11px] text-sea-ink-soft/60">
+                        {project.description}
+                      </p>
+                    )}
+                  </div>
+                  {creating ? (
+                    <Loader2
+                      className="size-4 animate-spin text-sea-ink-soft/40"
+                      aria-hidden
+                    />
+                  ) : (
+                    <Plus
+                      className="size-4 text-sea-ink-soft/30 group-hover:text-lagoon"
+                      aria-hidden
+                    />
+                  )}
+                </button>
+              ))}
+            </div>
+          )}
+        </PanelCard>
+      </div>
 
-			<ActiveSessionList sessions={sessions} />
-		</div>
-	)
+      <ActiveSessionList sessions={sessions} />
+    </div>
+  )
 }
 
 function ActiveSessionList({ sessions }: { sessions: Session[] }) {
-	const navigate = useNavigate()
-	const { setOpen } = useSidebarOpen()
+  const navigate = useNavigate()
+  const { setOpen } = useSidebarOpen()
 
-	if (sessions.length === 0) return null
+  if (sessions.length === 0) return null
 
-	return (
-		<div className="w-full max-w-sm">
-			<PanelCard
-				flushHeader
-				header={
-					<div className="px-4 py-2.5">
-						<Kicker>活跃会话</Kicker>
-					</div>
-				}
-				bodyClassName="p-0"
-			>
-				<ScrollArea className="max-h-[400px]">
-					<div className="space-y-1 p-2">
-						{sessions.map((session) => (
-							<button
-								key={session.id}
-								type="button"
-								onClick={() => {
-									setOpen(false)
-									if (session.hash) {
-										navigate({
-											to: '/interact',
-											search: { session: session.hash },
-											replace: true,
-										})
-									}
-								}}
-								className="group flex w-full cursor-pointer flex-col gap-1 rounded-lg px-3 py-2.5 text-left transition-colors duration-150 hover:bg-lagoon/5"
-							>
-								<span className="text-sm font-medium leading-tight text-sea-ink">
-									{session.title}
-								</span>
-								<div className="flex items-center gap-2 text-[11px] text-sea-ink-soft">
-									<span className="flex items-center gap-0.5">
-										<Bot className="size-3" aria-hidden />
-										{session.agent}
-									</span>
-									<span className="flex items-center gap-0.5">
-										<Users className="size-3" aria-hidden />
-										{session.onlineDevices}
-									</span>
-									<span className="flex items-center gap-0.5">
-										<Clock className="size-2.5" aria-hidden />
-										{session.updatedAt}
-									</span>
-								</div>
-							</button>
-						))}
-					</div>
-				</ScrollArea>
-			</PanelCard>
-		</div>
-	)
+  return (
+    <div className="w-full max-w-sm">
+      <PanelCard
+        flushHeader
+        header={
+          <div className="px-4 py-2.5">
+            <Kicker>活跃会话</Kicker>
+          </div>
+        }
+        bodyClassName="p-0"
+      >
+        <ScrollArea className="max-h-[400px]">
+          <div className="space-y-1 p-2">
+            {sessions.map((session) => (
+              <button
+                key={session.id}
+                type="button"
+                onClick={() => {
+                  setOpen(false)
+                  if (session.hash) {
+                    navigate({
+                      to: '/interact',
+                      search: { session: session.hash },
+                      replace: true,
+                    })
+                  }
+                }}
+                className="group flex w-full cursor-pointer flex-col gap-1 rounded-lg px-3 py-2.5 text-left transition-colors duration-150 hover:bg-lagoon/5"
+              >
+                <span className="text-sm font-medium leading-tight text-sea-ink">
+                  {session.title}
+                </span>
+                <div className="flex items-center gap-2 text-[11px] text-sea-ink-soft">
+                  <span className="flex items-center gap-0.5">
+                    <Bot className="size-3" aria-hidden />
+                    {session.agent}
+                  </span>
+                  <span className="flex items-center gap-0.5">
+                    <Users className="size-3" aria-hidden />
+                    {session.onlineDevices}
+                  </span>
+                  <span className="flex items-center gap-0.5">
+                    <Clock className="size-2.5" aria-hidden />
+                    {session.updatedAt}
+                  </span>
+                </div>
+              </button>
+            ))}
+          </div>
+        </ScrollArea>
+      </PanelCard>
+    </div>
+  )
 }
diff --git a/web/src/components/interact/motion-demo-panel.tsx b/web/src/components/interact/motion-demo-panel.tsx
index ad303c1..f8705e0 100644
--- a/web/src/components/interact/motion-demo-panel.tsx
+++ b/web/src/components/interact/motion-demo-panel.tsx
@@ -1,133 +1,133 @@
-import { ArrowLeft } from "lucide-react";
-import { motion } from "motion/react";
-import { useEffect, useState } from "react";
+import { ArrowLeft } from 'lucide-react'
+import { motion } from 'motion/react'
+import { useEffect, useState } from 'react'
 
 const motionConfig = {
-	从上到下滑入: {
-		title: "从上到下滑入",
-		initial: { y: -40, opacity: 0 },
-		animate: { y: 0, opacity: 1 },
-		transition: { duration: 0.5, ease: "easeOut" as const },
-		code: `{ initial: { y: -40, opacity: 0 },\n  animate: { y: 0, opacity: 1 },\n  transition: { duration: 0.5, ease: "easeOut" } }`,
-		desc: "组件从视口上方滑入，模拟物理空间的「落下」感。适合列表项依次出现、通知弹窗、下拉菜单等场景。",
-		tags: ["列表项", "通知弹窗", "下拉菜单"],
-	},
-	淡入: {
-		title: "淡入",
-		initial: { opacity: 0 },
-		animate: { opacity: 1 },
-		transition: { duration: 0.4 },
-		code: `{ initial: { opacity: 0 },\n  animate: { opacity: 1 },\n  transition: { duration: 0.4 } }`,
-		desc: "最温和的动画方案。不涉及位移，仅通过透明度渐变实现入场。适合内容区块、图片加载完成后的展示。",
-		tags: ["内容区块", "图片展示", "Tab 切换"],
-	},
-	从左到右滑入: {
-		title: "从左到右滑入",
-		initial: { x: -40, opacity: 0 },
-		animate: { x: 0, opacity: 1 },
-		transition: { duration: 0.5, ease: "easeOut" as const },
-		code: `{ initial: { x: -40, opacity: 0 },\n  animate: { x: 0, opacity: 1 },\n  transition: { duration: 0.5, ease: "easeOut" } }`,
-		desc: "模拟阅读方向的动态入场，符合从左到右的视觉习惯。适合侧边栏、导航项、步骤条等水平方向组件。",
-		tags: ["侧边栏", "导航项", "步骤条"],
-	},
-	缩放弹入: {
-		title: "缩放弹入",
-		initial: { scale: 0.8, opacity: 0 },
-		animate: { scale: 1, opacity: 1 },
-		transition: { duration: 0.5, ease: [0.34, 1.56, 0.64, 1] },
-		code: `{ initial: { scale: 0.8, opacity: 0 },\n  animate: { scale: 1, opacity: 1 },\n  transition: { duration: 0.5, ease: [0.34, 1.56, 0.64, 1] } }`,
-		desc: "带弹性缓动的缩放入场，视觉冲击力强。适合模态弹窗、悬浮卡片、重要操作反馈等需要吸引注意力的场景。",
-		tags: ["模态弹窗", "悬浮卡片", "操作反馈"],
-	},
-} as const;
+  从上到下滑入: {
+    title: '从上到下滑入',
+    initial: { y: -40, opacity: 0 },
+    animate: { y: 0, opacity: 1 },
+    transition: { duration: 0.5, ease: 'easeOut' as const },
+    code: `{ initial: { y: -40, opacity: 0 },\n  animate: { y: 0, opacity: 1 },\n  transition: { duration: 0.5, ease: "easeOut" } }`,
+    desc: '组件从视口上方滑入，模拟物理空间的「落下」感。适合列表项依次出现、通知弹窗、下拉菜单等场景。',
+    tags: ['列表项', '通知弹窗', '下拉菜单'],
+  },
+  淡入: {
+    title: '淡入',
+    initial: { opacity: 0 },
+    animate: { opacity: 1 },
+    transition: { duration: 0.4 },
+    code: `{ initial: { opacity: 0 },\n  animate: { opacity: 1 },\n  transition: { duration: 0.4 } }`,
+    desc: '最温和的动画方案。不涉及位移，仅通过透明度渐变实现入场。适合内容区块、图片加载完成后的展示。',
+    tags: ['内容区块', '图片展示', 'Tab 切换'],
+  },
+  从左到右滑入: {
+    title: '从左到右滑入',
+    initial: { x: -40, opacity: 0 },
+    animate: { x: 0, opacity: 1 },
+    transition: { duration: 0.5, ease: 'easeOut' as const },
+    code: `{ initial: { x: -40, opacity: 0 },\n  animate: { x: 0, opacity: 1 },\n  transition: { duration: 0.5, ease: "easeOut" } }`,
+    desc: '模拟阅读方向的动态入场，符合从左到右的视觉习惯。适合侧边栏、导航项、步骤条等水平方向组件。',
+    tags: ['侧边栏', '导航项', '步骤条'],
+  },
+  缩放弹入: {
+    title: '缩放弹入',
+    initial: { scale: 0.8, opacity: 0 },
+    animate: { scale: 1, opacity: 1 },
+    transition: { duration: 0.5, ease: [0.34, 1.56, 0.64, 1] },
+    code: `{ initial: { scale: 0.8, opacity: 0 },\n  animate: { scale: 1, opacity: 1 },\n  transition: { duration: 0.5, ease: [0.34, 1.56, 0.64, 1] } }`,
+    desc: '带弹性缓动的缩放入场，视觉冲击力强。适合模态弹窗、悬浮卡片、重要操作反馈等需要吸引注意力的场景。',
+    tags: ['模态弹窗', '悬浮卡片', '操作反馈'],
+  },
+} as const
 
-type MotionKey = keyof typeof motionConfig;
+type MotionKey = keyof typeof motionConfig
 
 interface MotionDemoPanelProps {
-	selectedLabel: string;
-	onBack: () => void;
+  selectedLabel: string
+  onBack: () => void
 }
 
 export function MotionDemoPanel({
-	selectedLabel,
-	onBack,
+  selectedLabel,
+  onBack,
 }: MotionDemoPanelProps) {
-	const [replayKey, setReplayKey] = useState(0);
+  const [replayKey, setReplayKey] = useState(0)
 
-	const cfg = motionConfig[selectedLabel as MotionKey];
+  const cfg = motionConfig[selectedLabel as MotionKey]
 
-	useEffect(() => {
-		setReplayKey((k) => k + 1);
-	}, []);
+  useEffect(() => {
+    setReplayKey((k) => k + 1)
+  }, [])
 
-	if (!cfg) return null;
+  if (!cfg) return null
 
-	return (
-		<div className="p-8">
-			<div className="mb-6 flex items-center justify-between">
-				<button
-					type="button"
-					onClick={onBack}
-					className="inline-flex items-center gap-1.5 rounded-lg border border-line bg-surface px-3 py-1.5 text-xs font-medium text-sea-ink-soft shadow-sm transition-colors duration-150 hover:border-lagoon/30 hover:text-lagoon-deep cursor-pointer"
-				>
-					<ArrowLeft className="size-3.5" aria-hidden />
-					返回
-				</button>
-				<button
-					type="button"
-					onClick={() => setReplayKey((k) => k + 1)}
-					className="inline-flex items-center gap-1.5 rounded-lg border border-line bg-surface px-3 py-1.5 text-xs font-medium text-sea-ink-soft shadow-sm transition-colors duration-150 hover:border-lagoon/30 hover:text-lagoon-deep cursor-pointer"
-				>
-					⟳ 重播
-				</button>
-			</div>
+  return (
+    <div className="p-8">
+      <div className="mb-6 flex items-center justify-between">
+        <button
+          type="button"
+          onClick={onBack}
+          className="inline-flex items-center gap-1.5 rounded-lg border border-line bg-surface px-3 py-1.5 text-xs font-medium text-sea-ink-soft shadow-sm transition-colors duration-150 hover:border-lagoon/30 hover:text-lagoon-deep cursor-pointer"
+        >
+          <ArrowLeft className="size-3.5" aria-hidden />
+          返回
+        </button>
+        <button
+          type="button"
+          onClick={() => setReplayKey((k) => k + 1)}
+          className="inline-flex items-center gap-1.5 rounded-lg border border-line bg-surface px-3 py-1.5 text-xs font-medium text-sea-ink-soft shadow-sm transition-colors duration-150 hover:border-lagoon/30 hover:text-lagoon-deep cursor-pointer"
+        >
+          ⟳ 重播
+        </button>
+      </div>
 
-			<div className="space-y-6">
-				<div>
-					<h2 className="display-title mb-2 text-xl font-bold text-sea-ink">
-						{cfg.title}
-					</h2>
-					<p className="mb-4 text-sm leading-relaxed text-sea-ink-soft">
-						{cfg.desc}
-					</p>
-					<pre className="overflow-x-auto rounded-lg border border-line bg-foam p-4 text-xs leading-relaxed text-sea-ink">
-						<code>{cfg.code}</code>
-					</pre>
-				</div>
+      <div className="space-y-6">
+        <div>
+          <h2 className="display-title mb-2 text-xl font-bold text-sea-ink">
+            {cfg.title}
+          </h2>
+          <p className="mb-4 text-sm leading-relaxed text-sea-ink-soft">
+            {cfg.desc}
+          </p>
+          <pre className="overflow-x-auto rounded-lg border border-line bg-foam p-4 text-xs leading-relaxed text-sea-ink">
+            <code>{cfg.code}</code>
+          </pre>
+        </div>
 
-				<div className="border border-line p-5">
-					<p className="mb-3 text-[11px] font-semibold uppercase tracking-[0.15em] text-sea-ink-soft">
-						实际效果预览
-					</p>
-					<motion.div
-						key={`${selectedLabel}-${replayKey}`}
-						initial={cfg.initial}
-						animate={cfg.animate}
-						transition={cfg.transition}
-						className="rounded-lg bg-foam p-4"
-					>
-						<div className="flex items-center gap-3">
-							<div className="size-10 rounded-lg bg-lagoon/15" />
-							<div className="flex-1 space-y-1.5">
-								<div className="h-2.5 w-48 rounded-full bg-sea-ink/12" />
-								<div className="h-2 w-32 rounded-full bg-sea-ink/8" />
-							</div>
-							<div className="h-7 w-16 rounded-md bg-lagoon/20" />
-						</div>
-					</motion.div>
-				</div>
+        <div className="border border-line p-5">
+          <p className="mb-3 text-[11px] font-semibold uppercase tracking-[0.15em] text-sea-ink-soft">
+            实际效果预览
+          </p>
+          <motion.div
+            key={`${selectedLabel}-${replayKey}`}
+            initial={cfg.initial}
+            animate={cfg.animate}
+            transition={cfg.transition}
+            className="rounded-lg bg-foam p-4"
+          >
+            <div className="flex items-center gap-3">
+              <div className="size-10 rounded-lg bg-lagoon/15" />
+              <div className="flex-1 space-y-1.5">
+                <div className="h-2.5 w-48 rounded-full bg-sea-ink/12" />
+                <div className="h-2 w-32 rounded-full bg-sea-ink/8" />
+              </div>
+              <div className="h-7 w-16 rounded-md bg-lagoon/20" />
+            </div>
+          </motion.div>
+        </div>
 
-				<div className="flex flex-wrap gap-2">
-					{cfg.tags.map((tag) => (
-						<span
-							key={tag}
-							className="rounded-md border border-line bg-foam px-2.5 py-1 text-xs text-sea-ink-soft"
-						>
-							{tag}
-						</span>
-					))}
-				</div>
-			</div>
-		</div>
-	);
+        <div className="flex flex-wrap gap-2">
+          {cfg.tags.map((tag) => (
+            <span
+              key={tag}
+              className="rounded-md border border-line bg-foam px-2.5 py-1 text-xs text-sea-ink-soft"
+            >
+              {tag}
+            </span>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
 }
diff --git a/web/src/components/interact/primitives/index.ts b/web/src/components/interact/primitives/index.ts
index 6345556..347e2a7 100644
--- a/web/src/components/interact/primitives/index.ts
+++ b/web/src/components/interact/primitives/index.ts
@@ -1,5 +1,9 @@
 export { Markdown, MarkdownLite } from '@lumina/components/markdown'
-export { proseQuestion, proseHint, proseArticle } from '@lumina/components/markdown'
+export {
+  proseQuestion,
+  proseHint,
+  proseArticle,
+} from '@lumina/components/markdown'
 export { SandboxFrame } from './sandbox-frame'
 export { PreviewFrame, PreviewSupplement } from './preview-frame'
 export { Kicker } from './kicker'
diff --git a/web/src/components/interact/primitives/kicker.tsx b/web/src/components/interact/primitives/kicker.tsx
index a015811..15a9f87 100644
--- a/web/src/components/interact/primitives/kicker.tsx
+++ b/web/src/components/interact/primitives/kicker.tsx
@@ -11,35 +11,35 @@ import { cn } from '#/lib/utils'
 type KickerTone = 'kicker' | 'sea-ink-soft' | 'lagoon-deep'
 
 const toneClass: Record<KickerTone, string> = {
-	kicker: 'text-kicker',
-	'sea-ink-soft': 'text-sea-ink-soft',
-	'lagoon-deep': 'text-lagoon-deep',
+  kicker: 'text-kicker',
+  'sea-ink-soft': 'text-sea-ink-soft',
+  'lagoon-deep': 'text-lagoon-deep',
 }
 
 interface KickerProps {
-	children: ReactNode
-	tone?: KickerTone
-	/** 是否显示左侧琥珀竖线装饰（默认 true） */
-	accent?: boolean
-	className?: string
+  children: ReactNode
+  tone?: KickerTone
+  /** 是否显示左侧琥珀竖线装饰（默认 true） */
+  accent?: boolean
+  className?: string
 }
 
 export function Kicker({
-	children,
-	tone = 'kicker',
-	accent = true,
-	className,
+  children,
+  tone = 'kicker',
+  accent = true,
+  className,
 }: KickerProps) {
-	return (
-		<span
-			className={cn(
-				'inline-flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-[0.15em]',
-				toneClass[tone],
-				accent && 'before:h-3 before:w-0.5 before:bg-lagoon',
-				className,
-			)}
-		>
-			{children}
-		</span>
-	)
+  return (
+    <span
+      className={cn(
+        'inline-flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-[0.15em]',
+        toneClass[tone],
+        accent && 'before:h-3 before:w-0.5 before:bg-lagoon',
+        className,
+      )}
+    >
+      {children}
+    </span>
+  )
 }
diff --git a/web/src/components/interact/primitives/panel-card.tsx b/web/src/components/interact/primitives/panel-card.tsx
index 94ec895..b911652 100644
--- a/web/src/components/interact/primitives/panel-card.tsx
+++ b/web/src/components/interact/primitives/panel-card.tsx
@@ -9,44 +9,41 @@ import { cn } from '#/lib/utils'
  * 支持 header / footer slot（带分隔线）。
  */
 interface PanelCardProps {
-	children: ReactNode
-	/** 头部内容（可选），渲染时带底部分隔线 */
-	header?: ReactNode
-	/** 底部内容（可选），渲染时带顶部分隔线 */
-	footer?: ReactNode
-	/** 头部是否紧凑（无 padding，由调用方自定） */
-	flushHeader?: boolean
-	className?: string
-	bodyClassName?: string
+  children: ReactNode
+  /** 头部内容（可选），渲染时带底部分隔线 */
+  header?: ReactNode
+  /** 底部内容（可选），渲染时带顶部分隔线 */
+  footer?: ReactNode
+  /** 头部是否紧凑（无 padding，由调用方自定） */
+  flushHeader?: boolean
+  className?: string
+  bodyClassName?: string
 }
 
 export function PanelCard({
-	children,
-	header,
-	footer,
-	flushHeader,
-	className,
-	bodyClassName,
+  children,
+  header,
+  footer,
+  flushHeader,
+  className,
+  bodyClassName,
 }: PanelCardProps) {
-	return (
-		<section
-			className={cn(
-				'overflow-hidden border border-line bg-surface',
-				className,
-			)}
-		>
-			{header && (
-				<div
-					className={cn(
-						!flushHeader && 'px-4 py-2.5',
-						footer || children ? 'border-b border-line/50' : '',
-					)}
-				>
-					{header}
-				</div>
-			)}
-			<div className={cn('p-4', bodyClassName)}>{children}</div>
-			{footer && <div className="border-t border-line/50">{footer}</div>}
-		</section>
-	)
+  return (
+    <section
+      className={cn('overflow-hidden border border-line bg-surface', className)}
+    >
+      {header && (
+        <div
+          className={cn(
+            !flushHeader && 'px-4 py-2.5',
+            footer || children ? 'border-b border-line/50' : '',
+          )}
+        >
+          {header}
+        </div>
+      )}
+      <div className={cn('p-4', bodyClassName)}>{children}</div>
+      {footer && <div className="border-t border-line/50">{footer}</div>}
+    </section>
+  )
 }
diff --git a/web/src/components/interact/primitives/preview-frame.test.tsx b/web/src/components/interact/primitives/preview-frame.test.tsx
index 611f368..c1eb8f5 100644
--- a/web/src/components/interact/primitives/preview-frame.test.tsx
+++ b/web/src/components/interact/primitives/preview-frame.test.tsx
@@ -1,8 +1,8 @@
 /** @vitest-environment jsdom */
-import { cleanup, render, screen, waitFor } from '@testing-library/react'
+import { act, cleanup, render, screen, waitFor } from '@testing-library/react'
 import { afterEach, describe, expect, it, vi } from 'vitest'
 import * as previewApi from '#/lib/apis/preview'
-import { PreviewSupplement } from './preview-frame'
+import { PreviewFrame, PreviewSupplement } from './preview-frame'
 
 afterEach(() => {
   cleanup()
@@ -36,6 +36,7 @@ describe('PreviewSupplement', () => {
       const iframe = screen.getByTitle('前端预览')
       expect(iframe).toBeTruthy()
       expect(iframe.tagName.toLowerCase()).toBe('iframe')
+      expect(iframe.getAttribute('sandbox')).toBe('allow-scripts allow-popups')
     })
   })
 
@@ -76,3 +77,106 @@ describe('PreviewSupplement', () => {
     })
   })
 })
+
+describe('PreviewFrame', () => {
+  it('初次加载完成后触发 onLoad 应处于 loaded 状态', async () => {
+    const { container } = render(
+      <PreviewFrame src="/preview/test/index.html" />,
+    )
+    const iframe = screen.getByTitle('前端预览')
+    expect(iframe).toBeDefined()
+
+    // 触发 onLoad
+    iframe.dispatchEvent(new Event('load'))
+
+    await waitFor(() => {
+      // 初次加载完成之后，iframe 容器应存在
+      expect(container.querySelector('iframe')).toBeTruthy()
+    })
+  })
+
+  it('LUMINA-22: 当 src 更新时，不应弹出全屏硬核 LoadingSlot 覆盖层，且应启用 pointer-events-none 防止误触', async () => {
+    const { rerender, container } = render(
+      <PreviewFrame src="/preview/test/index.html?v=1" />,
+    )
+    const iframe = screen.getByTitle('前端预览')
+
+    // 完成初次加载
+    iframe.dispatchEvent(new Event('load'))
+
+    await waitFor(() => {
+      expect(screen.queryByText('正在加载中')).toBeNull()
+    })
+
+    // 更新 src（例如 WebSocket preview_sync 触发）
+    rerender(<PreviewFrame src="/preview/test/index.html?v=2" />)
+
+    // 严禁重新弹出硬核全屏 LoadingSlot ("正在加载中")
+    expect(screen.queryByText('正在加载中')).toBeNull()
+
+    // 在过渡/刷新期间，iframe 视口应被施加 pointer-events-none (S-02)
+    const motionWrapper = container.querySelector(
+      '[data-testid="preview-frame-viewport"]',
+    )
+    expect(motionWrapper).toBeTruthy()
+    expect(motionWrapper?.className).toContain('pointer-events-none')
+
+    // 细进度条应显示
+    expect(screen.getByTestId('preview-sync-bar')).toBeDefined()
+
+    // 新 iframe 加载完成
+    iframe.dispatchEvent(new Event('load'))
+
+    await waitFor(() => {
+      expect(motionWrapper?.className).not.toContain('pointer-events-none')
+      expect(screen.queryByTestId('preview-sync-bar')).toBeNull()
+    })
+  })
+
+  it('Q-04: 当 iframe onLoad 未触发超时（5s）时，应自动恢复交互状态避免界面卡死', async () => {
+    vi.useFakeTimers()
+    const { rerender, container } = render(
+      <PreviewFrame src="/preview/test/index.html?v=1" />,
+    )
+    const iframe = screen.getByTitle('前端预览')
+    iframe.dispatchEvent(new Event('load'))
+
+    // 更新 src
+    rerender(<PreviewFrame src="/preview/test/index.html?v=2" />)
+    const motionWrapper = container.querySelector(
+      '[data-testid="preview-frame-viewport"]',
+    )
+    expect(motionWrapper?.className).toContain('pointer-events-none')
+
+    // 快进 5000ms
+    act(() => {
+      vi.advanceTimersByTime(5000)
+    })
+
+    // 应自动解除 pointer-events-none
+    expect(motionWrapper?.className).not.toContain('pointer-events-none')
+    vi.useRealTimers()
+  })
+
+  it('Q-02 (subagent发现): 首次加载超时后，下一次 src 更新仍应被视为增量更新，不应重新弹出全屏 LoadingSlot', async () => {
+    vi.useFakeTimers()
+    const { rerender } = render(
+      <PreviewFrame src="/preview/test/index.html?v=1" />,
+    )
+
+    // 首次不派发 load 事件，直接快进 5000ms 触发超时恢复
+    act(() => {
+      vi.advanceTimersByTime(5000)
+    })
+
+    // 超时后全屏 LoadingSlot 应已解除
+    expect(screen.queryByText('正在加载中')).toBeNull()
+
+    // 触发下一次增量更新
+    rerender(<PreviewFrame src="/preview/test/index.html?v=2" />)
+
+    // 不得再次退回全屏 LoadingSlot ("正在加载中")
+    expect(screen.queryByText('正在加载中')).toBeNull()
+    vi.useRealTimers()
+  })
+})
diff --git a/web/src/components/interact/primitives/preview-frame.tsx b/web/src/components/interact/primitives/preview-frame.tsx
index d003320..502534d 100644
--- a/web/src/components/interact/primitives/preview-frame.tsx
+++ b/web/src/components/interact/primitives/preview-frame.tsx
@@ -1,4 +1,6 @@
 import { useEffect, useRef, useState } from 'react'
+import { AnimatePresence, motion, useReducedMotion } from 'motion/react'
+import { ease } from '@lumina/components/motion'
 
 import { PreviewLpwInlineViewer } from '@lumina/components/lpw'
 import { PreviewMdxInlineViewer } from '@lumina/components/mdx'
@@ -13,7 +15,7 @@ import { previewKindFromFilename } from '#/lib/preview-file'
  * 原生解析 <link href="style.css"> / <script src="app.js"> 等相对引用 ——
  * 相对引用会基于 iframe 的 src 解析，命中同 Session 的其它文件。
  *
- * - sandbox="allow-scripts" 刻意不配 allow-same-origin，脚本运行在隔离 origin
+ * - sandbox="allow-scripts allow-popups" 刻意不配 allow-same-origin，脚本运行在隔离 origin
  * - iframe 高度由父容器决定（h-full），内部滚动，无需 postMessage 高度回传
  */
 export interface PreviewFrameProps {
@@ -36,6 +38,8 @@ function LoadingSlot() {
 export function PreviewFrame({ src, className, title }: PreviewFrameProps) {
   const [mounted, setMounted] = useState(false)
   const [loaded, setLoaded] = useState(false)
+  const isFirstMountRef = useRef(true)
+  const shouldReduceMotion = useReducedMotion()
 
   useEffect(() => {
     setMounted(true)
@@ -45,17 +49,72 @@ export function PreviewFrame({ src, className, title }: PreviewFrameProps) {
     setLoaded(false)
   }, [src])
 
+  // 超时保护：防止 iframe onLoad 异常导致界面永久停留在半透明态 (Q-04 / Q-02)
+  useEffect(() => {
+    if (loaded) return
+    const timer = setTimeout(() => {
+      setLoaded(true)
+      isFirstMountRef.current = false
+    }, 5000)
+    return () => clearTimeout(timer)
+  }, [loaded, src])
+
+  const handleLoad = () => {
+    setLoaded(true)
+    isFirstMountRef.current = false
+  }
+
+  const isInitialLoading = !mounted || (!loaded && isFirstMountRef.current)
+
   return (
-    <div className={`relative min-h-0 h-full w-full ${className ?? ''}`}>
-      {(!mounted || !loaded) && <LoadingSlot />}
+    <div
+      className={`relative min-h-0 h-full w-full overflow-hidden ${
+        className ?? ''
+      }`}
+    >
+      {/* 首次加载占位 */}
+      {isInitialLoading && <LoadingSlot />}
+
+      {/* 增量同步顶部细进度条 (LUMINA-22) */}
+      <AnimatePresence>
+        {!loaded && !isFirstMountRef.current ? (
+          <motion.div
+            key="preview-sync-bar"
+            data-testid="preview-sync-bar"
+            initial={{ opacity: 0, scaleX: 0 }}
+            animate={{ opacity: 1, scaleX: 1 }}
+            exit={{ opacity: 0 }}
+            transition={{
+              duration: shouldReduceMotion ? 0 : 0.15,
+              ease,
+            }}
+            className="absolute top-0 left-0 right-0 z-20 h-0.5 origin-left bg-lagoon shadow-[0_0_8px_var(--color-lagoon)] pointer-events-none"
+          />
+        ) : null}
+      </AnimatePresence>
+
+      {/* iframe 动效容器 (Q-02, Q-06, S-02) */}
       {mounted ? (
-        <iframe
-          src={src}
-          title={title ?? '前端预览'}
-          sandbox="allow-scripts"
-          onLoad={() => setLoaded(true)}
-          className="block h-full w-full border-0"
-        />
+        <motion.div
+          data-testid="preview-frame-viewport"
+          className={`h-full w-full ${!loaded ? 'pointer-events-none' : ''}`}
+          initial={false}
+          animate={{
+            opacity: loaded ? 1 : 0.35,
+          }}
+          transition={{
+            duration: shouldReduceMotion ? 0 : loaded ? 0.18 : 0.12,
+            ease,
+          }}
+        >
+          <iframe
+            src={src}
+            title={title ?? '前端预览'}
+            sandbox="allow-scripts allow-popups"
+            onLoad={handleLoad}
+            className="block h-full w-full border-0"
+          />
+        </motion.div>
       ) : null}
     </div>
   )
diff --git a/web/src/components/interact/primitives/sandbox-frame.tsx b/web/src/components/interact/primitives/sandbox-frame.tsx
index 66a9bf7..cd7478a 100644
--- a/web/src/components/interact/primitives/sandbox-frame.tsx
+++ b/web/src/components/interact/primitives/sandbox-frame.tsx
@@ -16,21 +16,21 @@
  * - 内容高度经 postMessage 回传，iframe 自适应内容高度（无内部滚动条）
  */
 
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react'
 
 export interface SandboxFrameProps {
-	/** 原始 HTML 片段（body 内容，可含 <style>/<script>） */
-	content: string;
-	/** 额外注入 <head> 的 CSS 字符串（可选） */
-	css?: string;
-	/** 作用于 iframe 元素的 className（布局，不作用于内容排版） */
-	className?: string;
-	/** iframe 无障碍标题 */
-	title?: string;
+  /** 原始 HTML 片段（body 内容，可含 <style>/<script>） */
+  content: string
+  /** 额外注入 <head> 的 CSS 字符串（可选） */
+  css?: string
+  /** 作用于 iframe 元素的 className（布局，不作用于内容排版） */
+  className?: string
+  /** iframe 无障碍标题 */
+  title?: string
 }
 
 /** 高度回传消息类型 —— 与 iframe 内注入脚本约定 */
-const HEIGHT_MSG_TYPE = 'lumina:frame-height';
+const HEIGHT_MSG_TYPE = 'lumina:frame-height'
 
 /**
  * 注入 iframe 的主题 CSS 变量白名单（微明主题语义前缀）。
@@ -38,23 +38,23 @@ const HEIGHT_MSG_TYPE = 'lumina:frame-height';
  * `--*` 自定义属性（如动态注入的 token / 密钥）一并交给沙箱内不可信内容脚本读取。
  */
 const THEME_VAR_PREFIXES = [
-	'--sea-',
-	'--lagoon',
-	'--palm',
-	'--sand',
-	'--foam',
-	'--line',
-];
+  '--sea-',
+  '--lagoon',
+  '--palm',
+  '--sand',
+  '--foam',
+  '--line',
+]
 
 /** 收集根元素上主题命名空间的 CSS 自定义属性（仅主题变量） */
 function collectThemeVariables(): string {
-	const styles = getComputedStyle(document.documentElement);
-	return Array.from({ length: styles.length }, (_, i) => styles.item(i))
-		.filter((name) =>
-			THEME_VAR_PREFIXES.some((prefix) => name.startsWith(prefix)),
-		)
-		.map((name) => `${name}: ${styles.getPropertyValue(name).trim()};`)
-		.join('\n');
+  const styles = getComputedStyle(document.documentElement)
+  return Array.from({ length: styles.length }, (_, i) => styles.item(i))
+    .filter((name) =>
+      THEME_VAR_PREFIXES.some((prefix) => name.startsWith(prefix)),
+    )
+    .map((name) => `${name}: ${styles.getPropertyValue(name).trim()};`)
+    .join('\n')
 }
 
 /**
@@ -123,14 +123,14 @@ const BASE_STYLE = `
 	pre code { background: transparent; padding: 0; color: inherit; font-size: inherit; }
 	hr { border: none; border-top: 1px solid var(--line, rgba(51,39,28,0.11)); margin: 1em 0; }
 	img { max-width: 100%; height: auto; border-radius: 8px; }
-`;
+`
 
 /**
  * 构建 iframe 完整 HTML 文档。
  * base 样式置于 <head>，用户 content 置于 <body>（靠后声明，其 <style> 自然覆盖 base）。
  */
 function buildDoc(content: string, css: string, themeVars: string): string {
-	return `<!DOCTYPE html>
+  return `<!DOCTYPE html>
 <html lang="zh-CN">
 <head>
 <meta charset="utf-8" />
@@ -168,74 +168,88 @@ ${content}
 })();
 </script>
 </body>
-</html>`;
+</html>`
 }
 
-export function SandboxFrame({ content, css, className, title }: SandboxFrameProps) {
-	const frameRef = useRef<HTMLIFrameElement>(null);
-	const [mounted, setMounted] = useState(false);
-	const [height, setHeight] = useState(0);
-	const [loaded, setLoaded] = useState(false);
-	const [themeVars, setThemeVars] = useState<string>(() =>
-		typeof document !== 'undefined' ? collectThemeVariables() : ''
-	);
+export function SandboxFrame({
+  content,
+  css,
+  className,
+  title,
+}: SandboxFrameProps) {
+  const frameRef = useRef<HTMLIFrameElement>(null)
+  const [mounted, setMounted] = useState(false)
+  const [height, setHeight] = useState(0)
+  const [loaded, setLoaded] = useState(false)
+  const [themeVars, setThemeVars] = useState<string>(() =>
+    typeof document !== 'undefined' ? collectThemeVariables() : '',
+  )
 
-	// 首次挂载后再渲染 iframe，规避 SSR 下 srcDoc 序列化与 document 访问问题
-	useEffect(() => {
-		setMounted(true);
-	}, []);
+  // 首次挂载后再渲染 iframe，规避 SSR 下 srcDoc 序列化与 document 访问问题
+  useEffect(() => {
+    setMounted(true)
+  }, [])
 
-	// 主题切换（.dark 类增删）时重新收集变量 → srcDoc 重算 → iframe 重载
-	useEffect(() => {
-		if (typeof MutationObserver === 'undefined') return;
-		const observer = new MutationObserver(() => setThemeVars(collectThemeVariables()));
-		observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });
-		return () => observer.disconnect();
-	}, []);
+  // 主题切换（.dark 类增删）时重新收集变量 → srcDoc 重算 → iframe 重载
+  useEffect(() => {
+    if (typeof MutationObserver === 'undefined') return
+    const observer = new MutationObserver(() =>
+      setThemeVars(collectThemeVariables()),
+    )
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['class'],
+    })
+    return () => observer.disconnect()
+  }, [])
 
-	// 监听 iframe 高度回传 —— 用 e.source 校验来源（sandbox 下 origin 恒为 "null"，不可靠）
-	useEffect(() => {
-		const onMessage = (e: MessageEvent) => {
-			const frame = frameRef.current;
-			if (!frame || e.source !== frame.contentWindow) return;
-			const data = e.data;
-			if (data && data.type === HEIGHT_MSG_TYPE && typeof data.height === 'number') {
-				setHeight(data.height);
-				if (data.height > 0) setLoaded(true);
-			}
-		};
-		window.addEventListener('message', onMessage);
-		return () => window.removeEventListener('message', onMessage);
-	}, []);
+  // 监听 iframe 高度回传 —— 用 e.source 校验来源（sandbox 下 origin 恒为 "null"，不可靠）
+  useEffect(() => {
+    const onMessage = (e: MessageEvent) => {
+      const frame = frameRef.current
+      if (!frame || e.source !== frame.contentWindow) return
+      const data = e.data
+      if (
+        data &&
+        data.type === HEIGHT_MSG_TYPE &&
+        typeof data.height === 'number'
+      ) {
+        setHeight(data.height)
+        if (data.height > 0) setLoaded(true)
+      }
+    }
+    window.addEventListener('message', onMessage)
+    return () => window.removeEventListener('message', onMessage)
+  }, [])
 
-	const doc = useMemo(
-		() => buildDoc(content, css ?? '', themeVars),
-		[content, css, themeVars]
-	);
+  const doc = useMemo(
+    () => buildDoc(content, css ?? '', themeVars),
+    [content, css, themeVars],
+  )
 
-	useEffect(() => {
-		setLoaded(false);
-		setHeight(0);
-	}, [doc]);
+  useEffect(() => {
+    setLoaded(false)
+    setHeight(0)
+  }, [doc])
 
-	return (
-		<div className={`relative min-h-40 w-full ${className ?? ''}`}>
-			{(!mounted || !loaded) && (
-				<div className="absolute inset-0 z-10 flex items-center justify-center bg-bg-base">
-					<p className="text-sm text-sea-ink-soft/50">正在加载中</p>
-				</div>
-			)}
-			{mounted ? (
-				<iframe
-					ref={frameRef}
-					title={title ?? '即时渲染预览'}
-					sandbox="allow-scripts"
-					srcDoc={doc}
-					onLoad={() => setLoaded(true)}
-					style={{ height: height > 0 ? height : 160 }}
-					className="block w-full border-0"
-				/>
-			) : null}
-		</div>
-	);
+  return (
+    <div className={`relative min-h-40 w-full ${className ?? ''}`}>
+      {(!mounted || !loaded) && (
+        <div className="absolute inset-0 z-10 flex items-center justify-center bg-bg-base">
+          <p className="text-sm text-sea-ink-soft/50">正在加载中</p>
+        </div>
+      )}
+      {mounted ? (
+        <iframe
+          ref={frameRef}
+          title={title ?? '即时渲染预览'}
+          sandbox="allow-scripts"
+          srcDoc={doc}
+          onLoad={() => setLoaded(true)}
+          style={{ height: height > 0 ? height : 160 }}
+          className="block w-full border-0"
+        />
+      ) : null}
+    </div>
+  )
 }
diff --git a/web/src/components/interact/primitives/state-views.tsx b/web/src/components/interact/primitives/state-views.tsx
index 6ba8460..029af63 100644
--- a/web/src/components/interact/primitives/state-views.tsx
+++ b/web/src/components/interact/primitives/state-views.tsx
@@ -4,11 +4,11 @@ import { Loader2 } from 'lucide-react'
  * 空状态 —— 收敛 index.tsx 内联的 EmptyCard。
  */
 export function EmptyState({ text }: { text: string }) {
-	return (
-		<div className="border border-line bg-surface px-4 py-12 text-center">
-			<p className="text-xs text-sea-ink-soft/50">{text}</p>
-		</div>
-	)
+  return (
+    <div className="border border-line bg-surface px-4 py-12 text-center">
+      <p className="text-xs text-sea-ink-soft/50">{text}</p>
+    </div>
+  )
 }
 
 /**
@@ -16,12 +16,15 @@ export function EmptyState({ text }: { text: string }) {
  * 用 Loader2 替代手写 spinner，统一图标体系。
  */
 export function LoadingState({ text }: { text: string }) {
-	return (
-		<div className="border border-line bg-surface px-4 py-12">
-			<div className="flex flex-col items-center justify-center gap-3">
-				<Loader2 className="size-6 animate-spin text-sea-ink-soft/40" aria-hidden />
-				<p className="text-xs text-sea-ink-soft/50">{text}</p>
-			</div>
-		</div>
-	)
+  return (
+    <div className="border border-line bg-surface px-4 py-12">
+      <div className="flex flex-col items-center justify-center gap-3">
+        <Loader2
+          className="size-6 animate-spin text-sea-ink-soft/40"
+          aria-hidden
+        />
+        <p className="text-xs text-sea-ink-soft/50">{text}</p>
+      </div>
+    </div>
+  )
 }
diff --git a/web/src/components/interact/question-code.tsx b/web/src/components/interact/question-code.tsx
index aec6729..1da0a1b 100644
--- a/web/src/components/interact/question-code.tsx
+++ b/web/src/components/interact/question-code.tsx
@@ -17,12 +17,25 @@ import type { QuestionComponentProps } from './question-shell'
  * 改为按需动态 import：仅当用户实际使用某种语言时才下载对应包。
  */
 const LANG_LOADERS: Record<string, (() => Promise<any>) | undefined> = {
-  javascript: () => import('@codemirror/lang-javascript').then((m) => m.javascript()),
+  javascript: () =>
+    import('@codemirror/lang-javascript').then((m) => m.javascript()),
   js: () => import('@codemirror/lang-javascript').then((m) => m.javascript()),
-  jsx: () => import('@codemirror/lang-javascript').then((m) => m.javascript({ jsx: true })),
-  typescript: () => import('@codemirror/lang-javascript').then((m) => m.javascript({ typescript: true })),
-  ts: () => import('@codemirror/lang-javascript').then((m) => m.javascript({ typescript: true })),
-  tsx: () => import('@codemirror/lang-javascript').then((m) => m.javascript({ jsx: true, typescript: true })),
+  jsx: () =>
+    import('@codemirror/lang-javascript').then((m) =>
+      m.javascript({ jsx: true }),
+    ),
+  typescript: () =>
+    import('@codemirror/lang-javascript').then((m) =>
+      m.javascript({ typescript: true }),
+    ),
+  ts: () =>
+    import('@codemirror/lang-javascript').then((m) =>
+      m.javascript({ typescript: true }),
+    ),
+  tsx: () =>
+    import('@codemirror/lang-javascript').then((m) =>
+      m.javascript({ jsx: true, typescript: true }),
+    ),
   python: () => import('@codemirror/lang-python').then((m) => m.python()),
   py: () => import('@codemirror/lang-python').then((m) => m.python()),
   json: () => import('@codemirror/lang-json').then((m) => m.json()),
@@ -44,8 +57,10 @@ const LANG_LOADERS: Record<string, (() => Promise<any>) | undefined> = {
   yml: () => import('@codemirror/lang-yaml').then((m) => m.yaml()),
   go: () => import('@codemirror/lang-go').then((m) => m.go()),
   golang: () => import('@codemirror/lang-go').then((m) => m.go()),
-  regex: () => import('@codemirror/lang-javascript').then((m) => m.javascript()),
-  shell: () => import('@codemirror/lang-javascript').then((m) => m.javascript()),
+  regex: () =>
+    import('@codemirror/lang-javascript').then((m) => m.javascript()),
+  shell: () =>
+    import('@codemirror/lang-javascript').then((m) => m.javascript()),
   bash: () => import('@codemirror/lang-javascript').then((m) => m.javascript()),
   sh: () => import('@codemirror/lang-javascript').then((m) => m.javascript()),
 }
diff --git a/web/src/components/interact/question-diff.tsx b/web/src/components/interact/question-diff.tsx
index 58fae77..2318395 100644
--- a/web/src/components/interact/question-diff.tsx
+++ b/web/src/components/interact/question-diff.tsx
@@ -11,126 +11,126 @@ import type { QuestionComponentProps } from './question-shell'
 type Decision = 'approve' | 'reject' | 'edit'
 
 export function QuestionDiff({
-	question,
-	onSubmit,
-	onSkip,
-	onRequestSupplement,
-	isSupplementLoading = false,
+  question,
+  onSubmit,
+  onSkip,
+  onRequestSupplement,
+  isSupplementLoading = false,
 }: QuestionComponentProps) {
-	const [decision, setDecision] = useState<Decision | null>(null)
-	const [editedCode, setEditedCode] = useState('')
-	const [feedback, setFeedback] = useState('')
+  const [decision, setDecision] = useState<Decision | null>(null)
+  const [editedCode, setEditedCode] = useState('')
+  const [feedback, setFeedback] = useState('')
 
-	const before = (question.config?.before as string | undefined) ?? ''
-	const after = (question.config?.after as string | undefined) ?? ''
-	const filePath = (question.config?.filePath as string | undefined) ?? ''
-	const language = (question.config?.language as string | undefined) ?? ''
+  const before = (question.config?.before as string | undefined) ?? ''
+  const after = (question.config?.after as string | undefined) ?? ''
+  const filePath = (question.config?.filePath as string | undefined) ?? ''
+  const language = (question.config?.language as string | undefined) ?? ''
 
-	const isEditing = decision === 'edit'
+  const isEditing = decision === 'edit'
 
-	const handleSubmit = () => {
-		if (!decision) return
-		onSubmit({
-			decision,
-			...(isEditing ? { edited: editedCode || after } : {}),
-			...(feedback.trim() ? { feedback: feedback.trim() } : {}),
-		})
-	}
+  const handleSubmit = () => {
+    if (!decision) return
+    onSubmit({
+      decision,
+      ...(isEditing ? { edited: editedCode || after } : {}),
+      ...(feedback.trim() ? { feedback: feedback.trim() } : {}),
+    })
+  }
 
-	return (
-		<QuestionShell
-			question={question}
-			isSupplementLoading={isSupplementLoading}
-			onSkip={onSkip}
-			onRequestSupplement={onRequestSupplement}
-			submitDisabled={!decision}
-			onSubmit={handleSubmit}
-		>
-			{filePath && (
-				<p className="inline-flex items-center gap-1.5 rounded-md bg-foam px-3 py-1.5 font-mono text-xs text-sea-ink-soft">
-					<FileText className="size-3.5" aria-hidden />
-					{filePath}
-				</p>
-			)}
+  return (
+    <QuestionShell
+      question={question}
+      isSupplementLoading={isSupplementLoading}
+      onSkip={onSkip}
+      onRequestSupplement={onRequestSupplement}
+      submitDisabled={!decision}
+      onSubmit={handleSubmit}
+    >
+      {filePath && (
+        <p className="inline-flex items-center gap-1.5 rounded-md bg-foam px-3 py-1.5 font-mono text-xs text-sea-ink-soft">
+          <FileText className="size-3.5" aria-hidden />
+          {filePath}
+        </p>
+      )}
 
-			{isEditing ? (
-				<div className="space-y-1.5">
-					<p className="text-xs font-semibold uppercase tracking-wide text-amber-500">
-						编辑模式 — 修改后内容
-					</p>
-					<Textarea
-						value={editedCode || after}
-						onChange={(e) => setEditedCode(e.target.value)}
-						disabled={isSupplementLoading}
-						className="min-h-[200px] resize-y rounded-lg border-line bg-foam font-mono text-xs tabular-nums disabled:opacity-50"
-						placeholder="编辑代码..."
-					/>
-				</div>
-			) : (
-				<div className="max-h-[400px] overflow-auto rounded-lg border border-line">
-					<ReactDiffViewer
-						oldValue={before}
-						newValue={after}
-						splitView={false}
-						compareMethod={DiffMethod.WORDS}
-						useDarkTheme={false}
-						hideLineNumbers={false}
-						showDiffOnly={false}
-						styles={{
-							variables: {
-								light: {
-									diffViewerBackground: '#ffffff',
-									diffViewerColor: '#33271c',
-									addedBackground: '#f0fdf4',
-									addedColor: '#166534',
-									removedBackground: '#fef2f2',
-									removedColor: '#991b1b',
-									wordAddedBackground: '#bbf7d0',
-									wordRemovedBackground: '#fecaca',
-									addedGutterBackground: '#dcfce7',
-									removedGutterBackground: '#fee2e2',
-									gutterBackground: '#fafaf9',
-									diffViewerTitleBackground: '#f5f5f4',
-									diffViewerTitleColor: '#57534e',
-									diffViewerTitleBorderColor: '#e7e5e4',
-								},
-							},
-							diffContainer: {
-								minWidth: '100%',
-							},
-							line: {
-								padding: '2px 10px',
-							},
-							contentText: {
-								fontSize: '12px',
-								fontFamily:
-									'ui-monospace, SFMono-Regular, Menlo, Monaco, monospace',
-							},
-						}}
-					/>
-				</div>
-			)}
+      {isEditing ? (
+        <div className="space-y-1.5">
+          <p className="text-xs font-semibold uppercase tracking-wide text-amber-500">
+            编辑模式 — 修改后内容
+          </p>
+          <Textarea
+            value={editedCode || after}
+            onChange={(e) => setEditedCode(e.target.value)}
+            disabled={isSupplementLoading}
+            className="min-h-[200px] resize-y rounded-lg border-line bg-foam font-mono text-xs tabular-nums disabled:opacity-50"
+            placeholder="编辑代码..."
+          />
+        </div>
+      ) : (
+        <div className="max-h-[400px] overflow-auto rounded-lg border border-line">
+          <ReactDiffViewer
+            oldValue={before}
+            newValue={after}
+            splitView={false}
+            compareMethod={DiffMethod.WORDS}
+            useDarkTheme={false}
+            hideLineNumbers={false}
+            showDiffOnly={false}
+            styles={{
+              variables: {
+                light: {
+                  diffViewerBackground: '#ffffff',
+                  diffViewerColor: '#33271c',
+                  addedBackground: '#f0fdf4',
+                  addedColor: '#166534',
+                  removedBackground: '#fef2f2',
+                  removedColor: '#991b1b',
+                  wordAddedBackground: '#bbf7d0',
+                  wordRemovedBackground: '#fecaca',
+                  addedGutterBackground: '#dcfce7',
+                  removedGutterBackground: '#fee2e2',
+                  gutterBackground: '#fafaf9',
+                  diffViewerTitleBackground: '#f5f5f4',
+                  diffViewerTitleColor: '#57534e',
+                  diffViewerTitleBorderColor: '#e7e5e4',
+                },
+              },
+              diffContainer: {
+                minWidth: '100%',
+              },
+              line: {
+                padding: '2px 10px',
+              },
+              contentText: {
+                fontSize: '12px',
+                fontFamily:
+                  'ui-monospace, SFMono-Regular, Menlo, Monaco, monospace',
+              },
+            }}
+          />
+        </div>
+      )}
 
-			{language && (
-				<p className="text-center text-[10px] text-sea-ink-soft">
-					语言：{language}
-				</p>
-			)}
+      {language && (
+        <p className="text-center text-[10px] text-sea-ink-soft">
+          语言：{language}
+        </p>
+      )}
 
-			<DecisionButtons
-				variant="three"
-				value={decision}
-				onChange={(v) => setDecision(v as Decision)}
-				disabled={isSupplementLoading}
-			/>
+      <DecisionButtons
+        variant="three"
+        value={decision}
+        onChange={(v) => setDecision(v as Decision)}
+        disabled={isSupplementLoading}
+      />
 
-			<Textarea
-				placeholder="可选：添加反馈意见..."
-				value={feedback}
-				onChange={(e) => setFeedback(e.target.value)}
-				disabled={isSupplementLoading}
-				className="min-h-[60px] resize-y rounded-lg border-line bg-foam text-sm disabled:opacity-50"
-			/>
-		</QuestionShell>
-	)
+      <Textarea
+        placeholder="可选：添加反馈意见..."
+        value={feedback}
+        onChange={(e) => setFeedback(e.target.value)}
+        disabled={isSupplementLoading}
+        className="min-h-[60px] resize-y rounded-lg border-line bg-foam text-sm disabled:opacity-50"
+      />
+    </QuestionShell>
+  )
 }
diff --git a/web/src/components/interact/question-rate.tsx b/web/src/components/interact/question-rate.tsx
index c2c4a33..d91269a 100644
--- a/web/src/components/interact/question-rate.tsx
+++ b/web/src/components/interact/question-rate.tsx
@@ -1,110 +1,110 @@
 import { Star } from 'lucide-react'
 import { useState } from 'react'
 
-import { QuestionShell  } from './question-shell'
-import type {QuestionComponentProps} from './question-shell';
+import { QuestionShell } from './question-shell'
+import type { QuestionComponentProps } from './question-shell'
 
 export function QuestionRate({
-	question,
-	onSubmit,
-	onSkip,
-	onRequestSupplement,
-	isSupplementLoading = false,
+  question,
+  onSubmit,
+  onSkip,
+  onRequestSupplement,
+  isSupplementLoading = false,
 }: QuestionComponentProps) {
-	const options = question.options ?? []
-	const min = (question.config?.min as number) ?? 1
-	const max = (question.config?.max as number) ?? 5
-	const step = (question.config?.step as number) ?? 1
-	const useStars = (question.config?.useStars as boolean) ?? true
+  const options = question.options ?? []
+  const min = (question.config?.min as number) ?? 1
+  const max = (question.config?.max as number) ?? 5
+  const step = (question.config?.step as number) ?? 1
+  const useStars = (question.config?.useStars as boolean) ?? true
 
-	const [ratings, setRatings] = useState<Record<string, number>>(() => {
-		const initial: Record<string, number> = {}
-		options.forEach((opt) => {
-			initial[opt.id] = min
-		})
-		return initial
-	})
+  const [ratings, setRatings] = useState<Record<string, number>>(() => {
+    const initial: Record<string, number> = {}
+    options.forEach((opt) => {
+      initial[opt.id] = min
+    })
+    return initial
+  })
 
-	const setRating = (optionId: string, value: number) => {
-		setRatings((prev) => ({ ...prev, [optionId]: value }))
-	}
+  const setRating = (optionId: string, value: number) => {
+    setRatings((prev) => ({ ...prev, [optionId]: value }))
+  }
 
-	const renderRatingControl = (optionId: string, current: number) => {
-		if (useStars) {
-			const count = Math.round((max - min) / step) + 1
-			return (
-				<div className="flex gap-1">
-					{Array.from({ length: count }, (_, i) => {
-						const val = min + i * step
-						const filled = val <= current
-						return (
-							<button
-								key={val}
-								type="button"
-								onClick={() => setRating(optionId, val)}
-								className="group cursor-pointer rounded p-0.5 transition-transform hover:scale-110"
-								aria-label={`${val} 分`}
-							>
-								<Star
-									className={`size-6 transition-colors ${
-										filled
-											? 'fill-amber-400 text-amber-400'
-											: 'fill-transparent text-gray-300 group-hover:text-amber-200'
-									}`}
-								/>
-							</button>
-						)
-					})}
-				</div>
-			)
-		}
-		return (
-			<input
-				type="number"
-				min={min}
-				max={max}
-				step={step}
-				value={current}
-				onChange={(e) => setRating(optionId, Number(e.target.value))}
-				className="w-24 cursor-pointer rounded-lg border border-line bg-foam px-3 py-1.5 text-center font-mono text-sm tabular-nums"
-			/>
-		)
-	}
+  const renderRatingControl = (optionId: string, current: number) => {
+    if (useStars) {
+      const count = Math.round((max - min) / step) + 1
+      return (
+        <div className="flex gap-1">
+          {Array.from({ length: count }, (_, i) => {
+            const val = min + i * step
+            const filled = val <= current
+            return (
+              <button
+                key={val}
+                type="button"
+                onClick={() => setRating(optionId, val)}
+                className="group cursor-pointer rounded p-0.5 transition-transform hover:scale-110"
+                aria-label={`${val} 分`}
+              >
+                <Star
+                  className={`size-6 transition-colors ${
+                    filled
+                      ? 'fill-amber-400 text-amber-400'
+                      : 'fill-transparent text-gray-300 group-hover:text-amber-200'
+                  }`}
+                />
+              </button>
+            )
+          })}
+        </div>
+      )
+    }
+    return (
+      <input
+        type="number"
+        min={min}
+        max={max}
+        step={step}
+        value={current}
+        onChange={(e) => setRating(optionId, Number(e.target.value))}
+        className="w-24 cursor-pointer rounded-lg border border-line bg-foam px-3 py-1.5 text-center font-mono text-sm tabular-nums"
+      />
+    )
+  }
 
-	return (
-		<QuestionShell
-			question={question}
-			isSupplementLoading={isSupplementLoading}
-			onSkip={onSkip}
-			onRequestSupplement={onRequestSupplement}
-			onSubmit={() => onSubmit({ ratings: { ...ratings } })}
-		>
-			<div className="space-y-3">
-				{options.map((opt) => (
-					<div
-						key={opt.id}
-						className="flex flex-col gap-2 rounded-lg border border-line bg-foam px-4 py-3 sm:flex-row sm:items-center sm:justify-between"
-					>
-						<div className="min-w-0 flex-1">
-							<p className="text-sm font-medium">{opt.label}</p>
-							{opt.description && (
-								<p className="text-xs text-sea-ink-soft">{opt.description}</p>
-							)}
-						</div>
-						<div className="flex items-center gap-3 sm:shrink-0">
-							{renderRatingControl(opt.id, ratings[opt.id] ?? min)}
-							<span className="w-8 text-center font-mono text-sm font-semibold text-lagoon-deep">
-								{ratings[opt.id] ?? min}
-							</span>
-						</div>
-					</div>
-				))}
-			</div>
+  return (
+    <QuestionShell
+      question={question}
+      isSupplementLoading={isSupplementLoading}
+      onSkip={onSkip}
+      onRequestSupplement={onRequestSupplement}
+      onSubmit={() => onSubmit({ ratings: { ...ratings } })}
+    >
+      <div className="space-y-3">
+        {options.map((opt) => (
+          <div
+            key={opt.id}
+            className="flex flex-col gap-2 rounded-lg border border-line bg-foam px-4 py-3 sm:flex-row sm:items-center sm:justify-between"
+          >
+            <div className="min-w-0 flex-1">
+              <p className="text-sm font-medium">{opt.label}</p>
+              {opt.description && (
+                <p className="text-xs text-sea-ink-soft">{opt.description}</p>
+              )}
+            </div>
+            <div className="flex items-center gap-3 sm:shrink-0">
+              {renderRatingControl(opt.id, ratings[opt.id] ?? min)}
+              <span className="w-8 text-center font-mono text-sm font-semibold text-lagoon-deep">
+                {ratings[opt.id] ?? min}
+              </span>
+            </div>
+          </div>
+        ))}
+      </div>
 
-			<p className="text-center text-[11px] text-sea-ink-soft">
-				评分范围：{min} — {max}
-				{step !== 1 && `（步长 ${step}）`}
-			</p>
-		</QuestionShell>
-	)
+      <p className="text-center text-[11px] text-sea-ink-soft">
+        评分范围：{min} — {max}
+        {step !== 1 && `（步长 ${step}）`}
+      </p>
+    </QuestionShell>
+  )
 }
diff --git a/web/src/components/interact/question-text.tsx b/web/src/components/interact/question-text.tsx
index 1aa91c5..05cb5e1 100644
--- a/web/src/components/interact/question-text.tsx
+++ b/web/src/components/interact/question-text.tsx
@@ -3,57 +3,57 @@ import { useState } from 'react'
 import { Input } from '@lumina/components/ui/input'
 import { Textarea } from '@lumina/components/ui/textarea'
 
-import { QuestionShell  } from './question-shell'
-import type {QuestionComponentProps} from './question-shell';
+import { QuestionShell } from './question-shell'
+import type { QuestionComponentProps } from './question-shell'
 
 export function QuestionText({
-	question,
-	onSubmit,
-	onSkip,
-	onRequestSupplement,
-	isSupplementLoading = false,
+  question,
+  onSubmit,
+  onSkip,
+  onRequestSupplement,
+  isSupplementLoading = false,
 }: QuestionComponentProps) {
-	const [value, setValue] = useState('')
-
-	const multiline = question.config?.multiline === true
-	const maxLength = question.config?.maxLength as number | undefined
-	const placeholder =
-		(question.config?.placeholder as string | undefined) || '输入你的回答...'
-
-	const charCount = value.length
-	const isOverLimit = maxLength !== undefined && charCount > maxLength
-
-	const InputEl = multiline ? Textarea : Input
-
-	return (
-		<QuestionShell
-			question={question}
-			isSupplementLoading={isSupplementLoading}
-			onSkip={onSkip}
-			onRequestSupplement={onRequestSupplement}
-			submitDisabled={!value.trim() || isOverLimit}
-			onSubmit={() => value.trim() && onSubmit({ text: value })}
-		>
-			<InputEl
-				placeholder={placeholder}
-				value={value}
-				onChange={(e) => setValue(e.target.value)}
-				maxLength={maxLength}
-				disabled={isSupplementLoading}
-				className={
-					multiline
-						? 'min-h-[100px] resize-y rounded-lg border-line bg-foam'
-						: 'rounded-lg border-line bg-foam'
-				}
-			/>
-
-			{maxLength && (
-				<p
-					className={`text-right text-xs ${isOverLimit ? 'font-medium text-red-500' : 'text-sea-ink-soft'}`}
-				>
-					{charCount} / {maxLength}
-				</p>
-			)}
-		</QuestionShell>
-	)
+  const [value, setValue] = useState('')
+
+  const multiline = question.config?.multiline === true
+  const maxLength = question.config?.maxLength as number | undefined
+  const placeholder =
+    (question.config?.placeholder as string | undefined) || '输入你的回答...'
+
+  const charCount = value.length
+  const isOverLimit = maxLength !== undefined && charCount > maxLength
+
+  const InputEl = multiline ? Textarea : Input
+
+  return (
+    <QuestionShell
+      question={question}
+      isSupplementLoading={isSupplementLoading}
+      onSkip={onSkip}
+      onRequestSupplement={onRequestSupplement}
+      submitDisabled={!value.trim() || isOverLimit}
+      onSubmit={() => value.trim() && onSubmit({ text: value })}
+    >
+      <InputEl
+        placeholder={placeholder}
+        value={value}
+        onChange={(e) => setValue(e.target.value)}
+        maxLength={maxLength}
+        disabled={isSupplementLoading}
+        className={
+          multiline
+            ? 'min-h-[100px] resize-y rounded-lg border-line bg-foam'
+            : 'rounded-lg border-line bg-foam'
+        }
+      />
+
+      {maxLength && (
+        <p
+          className={`text-right text-xs ${isOverLimit ? 'font-medium text-red-500' : 'text-sea-ink-soft'}`}
+        >
+          {charCount} / {maxLength}
+        </p>
+      )}
+    </QuestionShell>
+  )
 }
diff --git a/web/src/components/interact/session-drawer.tsx b/web/src/components/interact/session-drawer.tsx
index cf0e6e6..f3f9347 100644
--- a/web/src/components/interact/session-drawer.tsx
+++ b/web/src/components/interact/session-drawer.tsx
@@ -11,45 +11,45 @@ import type { Session } from './types'
  * 桌面端（≥ xl）自动隐藏。
  */
 export function MobileSessionDrawer({
-	sessions,
-	selectedId,
-	onSelect,
+  sessions,
+  selectedId,
+  onSelect,
 }: {
-	sessions: Session[]
-	selectedId: string
-	onSelect: (id: string) => void
+  sessions: Session[]
+  selectedId: string
+  onSelect: (id: string) => void
 }) {
-	const { open, setOpen } = useSidebarOpen()
-	const [isDesktop, setIsDesktop] = useState(false)
+  const { open, setOpen } = useSidebarOpen()
+  const [isDesktop, setIsDesktop] = useState(false)
 
-	useEffect(() => {
-		const mq = window.matchMedia('(min-width: 1280px)')
-		setIsDesktop(mq.matches)
-		const handler = (e: MediaQueryListEvent) => setIsDesktop(e.matches)
-		mq.addEventListener('change', handler)
-		return () => mq.removeEventListener('change', handler)
-	}, [])
+  useEffect(() => {
+    const mq = window.matchMedia('(min-width: 1280px)')
+    setIsDesktop(mq.matches)
+    const handler = (e: MediaQueryListEvent) => setIsDesktop(e.matches)
+    mq.addEventListener('change', handler)
+    return () => mq.removeEventListener('change', handler)
+  }, [])
 
-	if (isDesktop) return null
+  if (isDesktop) return null
 
-	return (
-		<Sheet open={open} onOpenChange={setOpen}>
-			<SheetContent
-				side="right"
-				showCloseButton={false}
-				overlayClassName="bg-black/20 backdrop-blur-sm"
-				className="m-3 h-[calc(100%-1.5rem)] w-[340px] border border-line bg-surface-strong data-[state=open]:duration-300 data-[state=closed]:duration-200"
-			>
-				<SessionPanel
-					sessions={sessions}
-					selectedId={selectedId}
-					onSelect={(id) => {
-						setOpen(false)
-						onSelect(id)
-					}}
-					onClose={() => setOpen(false)}
-				/>
-			</SheetContent>
-		</Sheet>
-	)
+  return (
+    <Sheet open={open} onOpenChange={setOpen}>
+      <SheetContent
+        side="right"
+        showCloseButton={false}
+        overlayClassName="bg-black/20 backdrop-blur-sm"
+        className="m-3 h-[calc(100%-1.5rem)] w-[340px] border border-line bg-surface-strong data-[state=open]:duration-300 data-[state=closed]:duration-200"
+      >
+        <SessionPanel
+          sessions={sessions}
+          selectedId={selectedId}
+          onSelect={(id) => {
+            setOpen(false)
+            onSelect(id)
+          }}
+          onClose={() => setOpen(false)}
+        />
+      </SheetContent>
+    </Sheet>
+  )
 }
diff --git a/web/src/components/interact/session-item.tsx b/web/src/components/interact/session-item.tsx
index 8d6a135..f8ec9a3 100644
--- a/web/src/components/interact/session-item.tsx
+++ b/web/src/components/interact/session-item.tsx
@@ -6,51 +6,53 @@ import type { Session } from './types'
  * 会话列表项 —— 被 session-panel（桌面第三列/移动抽屉）复用。
  */
 export function SessionItem({
-	session,
-	isActive,
-	onSelect,
+  session,
+  isActive,
+  onSelect,
 }: {
-	session: Session
-	isActive: boolean
-	onSelect: (id: string) => void
+  session: Session
+  isActive: boolean
+  onSelect: (id: string) => void
 }) {
-	const pending = session.questions.filter((q) => !q.answered).length
+  const pending = session.questions.filter((q) => !q.answered).length
 
-	return (
-		<button
-			type="button"
-			onClick={() => onSelect(session.id)}
-			className={`group flex w-full cursor-pointer flex-col gap-1.5 rounded-chip px-3 py-2.5 text-left transition-colors duration-150 ${
-				isActive
-					? 'bg-lagoon/10 text-sea-ink'
-					: 'text-sea-ink-soft hover:bg-lagoon/5 hover:text-sea-ink'
-			}`}
-			aria-label={`会话：${session.title}`}
-		>
-			<span className="display-title text-sm font-medium leading-tight">{session.title}</span>
-			<div className="flex items-center gap-2 text-[11px]">
-				<span className="flex items-center gap-0.5">
-					<Bot className="size-3" aria-hidden />
-					{session.agent}
-				</span>
-				<span className="flex items-center gap-0.5">
-					<Users className="size-3" aria-hidden />
-					{session.onlineDevices}
-				</span>
-			</div>
-			<div className="flex items-center justify-between">
-				<span className="flex items-center gap-0.5 text-[10px]">
-					<Clock className="size-2.5" aria-hidden />
-					{session.updatedAt}
-				</span>
-				{pending > 0 ? (
-					<span className="inline-flex size-4 items-center justify-center rounded-full bg-lagoon text-[9px] font-bold text-white">
-						{pending}
-					</span>
-				) : (
-					<Check className="size-3.5 text-lagoon" aria-hidden />
-				)}
-			</div>
-		</button>
-	)
+  return (
+    <button
+      type="button"
+      onClick={() => onSelect(session.id)}
+      className={`group flex w-full cursor-pointer flex-col gap-1.5 rounded-chip px-3 py-2.5 text-left transition-colors duration-150 ${
+        isActive
+          ? 'bg-lagoon/10 text-sea-ink'
+          : 'text-sea-ink-soft hover:bg-lagoon/5 hover:text-sea-ink'
+      }`}
+      aria-label={`会话：${session.title}`}
+    >
+      <span className="display-title text-sm font-medium leading-tight">
+        {session.title}
+      </span>
+      <div className="flex items-center gap-2 text-[11px]">
+        <span className="flex items-center gap-0.5">
+          <Bot className="size-3" aria-hidden />
+          {session.agent}
+        </span>
+        <span className="flex items-center gap-0.5">
+          <Users className="size-3" aria-hidden />
+          {session.onlineDevices}
+        </span>
+      </div>
+      <div className="flex items-center justify-between">
+        <span className="flex items-center gap-0.5 text-[10px]">
+          <Clock className="size-2.5" aria-hidden />
+          {session.updatedAt}
+        </span>
+        {pending > 0 ? (
+          <span className="inline-flex size-4 items-center justify-center rounded-full bg-lagoon text-[9px] font-bold text-white">
+            {pending}
+          </span>
+        ) : (
+          <Check className="size-3.5 text-lagoon" aria-hidden />
+        )}
+      </div>
+    </button>
+  )
 }
diff --git a/web/src/components/interact/session-panel.tsx b/web/src/components/interact/session-panel.tsx
index 1358b84..52d0fab 100644
--- a/web/src/components/interact/session-panel.tsx
+++ b/web/src/components/interact/session-panel.tsx
@@ -12,117 +12,121 @@ import type { Session } from './types'
  * isMobile=true 时渲染拖拽手柄与关闭按钮。
  */
 export function SessionPanel({
-	sessions,
-	selectedId,
-	onSelect,
-	onClose,
+  sessions,
+  selectedId,
+  onSelect,
+  onClose,
 }: {
-	sessions: Session[]
-	selectedId: string
-	onSelect: (id: string) => void
-	onClose?: () => void
+  sessions: Session[]
+  selectedId: string
+  onSelect: (id: string) => void
+  onClose?: () => void
 }) {
-	const current = sessions.find((s) => s.id === selectedId)
-	const answeredCount = current
-		? current.questions.filter((q) => q.answered).length
-		: 0
-	const totalCount = current?.questions.length ?? 0
-	const remainingCount = totalCount - answeredCount
-	const percent =
-		totalCount > 0 ? Math.round((answeredCount / totalCount) * 100) : 0
-	const isMobile = !!onClose
+  const current = sessions.find((s) => s.id === selectedId)
+  const answeredCount = current
+    ? current.questions.filter((q) => q.answered).length
+    : 0
+  const totalCount = current?.questions.length ?? 0
+  const remainingCount = totalCount - answeredCount
+  const percent =
+    totalCount > 0 ? Math.round((answeredCount / totalCount) * 100) : 0
+  const isMobile = !!onClose
 
-	return (
-		<>
-			{isMobile && (
-				<div className="flex items-center justify-center pb-1 pt-2.5">
-					<div className="h-1.5 w-10 rounded-full bg-line" />
-				</div>
-			)}
+  return (
+    <>
+      {isMobile && (
+        <div className="flex items-center justify-center pb-1 pt-2.5">
+          <div className="h-1.5 w-10 rounded-full bg-line" />
+        </div>
+      )}
 
-			<div
-				className={`flex items-center justify-between ${isMobile ? 'px-4 py-2' : 'px-3 py-2'}`}
-			>
-				<Kicker>永久会话列表</Kicker>
-				{isMobile && onClose && (
-					<button
-						type="button"
-						onClick={onClose}
-						className="inline-flex items-center justify-center rounded-lg p-1 text-sea-ink-soft transition-colors duration-200 hover:bg-line/30 hover:text-sea-ink"
-						aria-label="关闭"
-					>
-						<X className="size-4" aria-hidden />
-					</button>
-				)}
-			</div>
+      <div
+        className={`flex items-center justify-between ${isMobile ? 'px-4 py-2' : 'px-3 py-2'}`}
+      >
+        <Kicker>永久会话列表</Kicker>
+        {isMobile && onClose && (
+          <button
+            type="button"
+            onClick={onClose}
+            className="inline-flex items-center justify-center rounded-lg p-1 text-sea-ink-soft transition-colors duration-200 hover:bg-line/30 hover:text-sea-ink"
+            aria-label="关闭"
+          >
+            <X className="size-4" aria-hidden />
+          </button>
+        )}
+      </div>
 
-			<Separator className="bg-line" />
+      <Separator className="bg-line" />
 
-			<ScrollArea className={`flex-1 ${isMobile ? 'px-3' : 'px-2'}`}>
-				<div className="space-y-1 pb-3 py-1">
-					{sessions.map((session) => (
-						<SessionItem
-							key={session.id}
-							session={session}
-							isActive={session.id === selectedId}
-							onSelect={onSelect}
-						/>
-					))}
-				</div>
-			</ScrollArea>
+      <ScrollArea className={`flex-1 ${isMobile ? 'px-3' : 'px-2'}`}>
+        <div className="space-y-1 pb-3 py-1">
+          {sessions.map((session) => (
+            <SessionItem
+              key={session.id}
+              session={session}
+              isActive={session.id === selectedId}
+              onSelect={onSelect}
+            />
+          ))}
+        </div>
+      </ScrollArea>
 
-			{current && (
-				<>
-					<Separator className="bg-line" />
-					<div className={isMobile ? 'p-4' : 'p-3'}>
-						<div
-							className={`border border-line bg-foam ${isMobile ? 'p-4' : 'p-3'}`}
-						>
-							<div
-								className={`${isMobile ? 'mb-3' : 'mb-2'} flex items-center justify-between`}
-							>
-								<span className="text-[10px] font-semibold uppercase tracking-wider text-sea-ink-soft">
-									会话信息
-								</span>
-								<span className="inline-flex items-center gap-1 bg-lagoon/10 px-2 py-0.5 text-[10px] font-medium text-lagoon-deep">
-									<span className="inline-block size-1.5 rounded-full bg-lagoon" />
-									活跃
-								</span>
-							</div>
-							<div className={isMobile ? 'space-y-2' : 'space-y-1.5'}>
-								<div className="flex items-center justify-between text-xs">
-									<span className="text-sea-ink-soft">Agent</span>
-									<span className="font-medium text-sea-ink">{current.agent}</span>
-								</div>
-								<div className="flex items-center justify-between text-xs">
-									<span className="text-sea-ink-soft">进度</span>
-									<span className="font-medium text-sea-ink">
-										已答 {answeredCount} · 剩余 {remainingCount}
-									</span>
-								</div>
-							</div>
-							<div className={isMobile ? 'mt-3' : 'mt-2'}>
-								{isMobile && (
-									<div className="mb-1 flex items-center justify-between">
-										<span className="text-[10px] text-sea-ink-soft">完成度</span>
-										<span className="text-[10px] font-medium text-sea-ink">
-											{percent}%
-										</span>
-									</div>
-								)}
-								<div
-									className={`${isMobile ? 'h-2' : 'h-1.5'} overflow-hidden rounded-full bg-line`}
-								>
-									<div
-										className="h-full bg-lagoon transition-all duration-500"
-										style={{ width: `${percent}%` }}
-									/>
-								</div>
-							</div>
-						</div>
-					</div>
-				</>
-			)}
-		</>
-	)
+      {current && (
+        <>
+          <Separator className="bg-line" />
+          <div className={isMobile ? 'p-4' : 'p-3'}>
+            <div
+              className={`border border-line bg-foam ${isMobile ? 'p-4' : 'p-3'}`}
+            >
+              <div
+                className={`${isMobile ? 'mb-3' : 'mb-2'} flex items-center justify-between`}
+              >
+                <span className="text-[10px] font-semibold uppercase tracking-wider text-sea-ink-soft">
+                  会话信息
+                </span>
+                <span className="inline-flex items-center gap-1 bg-lagoon/10 px-2 py-0.5 text-[10px] font-medium text-lagoon-deep">
+                  <span className="inline-block size-1.5 rounded-full bg-lagoon" />
+                  活跃
+                </span>
+              </div>
+              <div className={isMobile ? 'space-y-2' : 'space-y-1.5'}>
+                <div className="flex items-center justify-between text-xs">
+                  <span className="text-sea-ink-soft">Agent</span>
+                  <span className="font-medium text-sea-ink">
+                    {current.agent}
+                  </span>
+                </div>
+                <div className="flex items-center justify-between text-xs">
+                  <span className="text-sea-ink-soft">进度</span>
+                  <span className="font-medium text-sea-ink">
+                    已答 {answeredCount} · 剩余 {remainingCount}
+                  </span>
+                </div>
+              </div>
+              <div className={isMobile ? 'mt-3' : 'mt-2'}>
+                {isMobile && (
+                  <div className="mb-1 flex items-center justify-between">
+                    <span className="text-[10px] text-sea-ink-soft">
+                      完成度
+                    </span>
+                    <span className="text-[10px] font-medium text-sea-ink">
+                      {percent}%
+                    </span>
+                  </div>
+                )}
+                <div
+                  className={`${isMobile ? 'h-2' : 'h-1.5'} overflow-hidden rounded-full bg-line`}
+                >
+                  <div
+                    className="h-full bg-lagoon transition-all duration-500"
+                    style={{ width: `${percent}%` }}
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </>
+      )}
+    </>
+  )
 }
diff --git a/web/src/components/interact/session-sidebar-compact.tsx b/web/src/components/interact/session-sidebar-compact.tsx
index 75c16b5..6baaa2b 100644
--- a/web/src/components/interact/session-sidebar-compact.tsx
+++ b/web/src/components/interact/session-sidebar-compact.tsx
@@ -6,29 +6,29 @@ import type { Session } from './types'
  * 桌面端第三列（≥ xl）—— 真 flex 子列，宽度由 sidebar open 状态过渡。
  */
 export function SessionSidebarCompact({
-	sessions,
-	selectedId,
-	onSelect,
+  sessions,
+  selectedId,
+  onSelect,
 }: {
-	sessions: Session[]
-	selectedId: string
-	onSelect: (id: string) => void
+  sessions: Session[]
+  selectedId: string
+  onSelect: (id: string) => void
 }) {
-	const { open } = useSidebarOpen()
+  const { open } = useSidebarOpen()
 
-	return (
-		<aside
-			className={`hidden shrink-0 flex-col overflow-hidden border border-line bg-surface transition-[width,opacity,margin] duration-300 ease-[cubic-bezier(0.16,1,0.3,1)] xl:flex ${
-				open
-					? 'm-4 w-[320px] opacity-100'
-					: 'm-0 w-0 rounded-none border-0 opacity-0 shadow-none pointer-events-none'
-			}`}
-		>
-			<SessionPanel
-				sessions={sessions}
-				selectedId={selectedId}
-				onSelect={onSelect}
-			/>
-		</aside>
-	)
+  return (
+    <aside
+      className={`hidden shrink-0 flex-col overflow-hidden border border-line bg-surface transition-[width,opacity,margin] duration-300 ease-[cubic-bezier(0.16,1,0.3,1)] xl:flex ${
+        open
+          ? 'm-4 w-[320px] opacity-100'
+          : 'm-0 w-0 rounded-none border-0 opacity-0 shadow-none pointer-events-none'
+      }`}
+    >
+      <SessionPanel
+        sessions={sessions}
+        selectedId={selectedId}
+        onSelect={onSelect}
+      />
+    </aside>
+  )
 }
diff --git a/web/src/components/interact/supplement-dialog.tsx b/web/src/components/interact/supplement-dialog.tsx
index 8148982..7bdd695 100644
--- a/web/src/components/interact/supplement-dialog.tsx
+++ b/web/src/components/interact/supplement-dialog.tsx
@@ -1,108 +1,108 @@
-import { useState } from "react";
+import { useState } from 'react'
 
-import { Button } from "@lumina/components/ui/button";
+import { Button } from '@lumina/components/ui/button'
 import {
-	Dialog,
-	DialogContent,
-	DialogDescription,
-	DialogFooter,
-	DialogHeader,
-	DialogTitle,
-} from "@lumina/components/ui/dialog";
-import { Label } from "@lumina/components/ui/label";
-import { Switch } from "@lumina/components/ui/switch";
-import { Textarea } from "@lumina/components/ui/textarea";
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@lumina/components/ui/dialog'
+import { Label } from '@lumina/components/ui/label'
+import { Switch } from '@lumina/components/ui/switch'
+import { Textarea } from '@lumina/components/ui/textarea'
 
 export interface SupplementRequestPayload {
-	note: string;
-	withOptions: boolean;
+  note: string
+  withOptions: boolean
 }
 
 interface SupplementRequestDialogProps {
-	open: boolean;
-	onOpenChange: (open: boolean) => void;
-	/** 选择题（select/multi-select）传 true 显示选项开关，其余题型传 false */
-	showOptionSwitch: boolean;
-	/** 选项数量，开关旁展示提示用 */
-	optionCount?: number;
-	onConfirm: (payload: SupplementRequestPayload) => void;
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  /** 选择题（select/multi-select）传 true 显示选项开关，其余题型传 false */
+  showOptionSwitch: boolean
+  /** 选项数量，开关旁展示提示用 */
+  optionCount?: number
+  onConfirm: (payload: SupplementRequestPayload) => void
 }
 
 export function SupplementRequestDialog({
-	open,
-	onOpenChange,
-	showOptionSwitch,
-	optionCount,
-	onConfirm,
+  open,
+  onOpenChange,
+  showOptionSwitch,
+  optionCount,
+  onConfirm,
 }: SupplementRequestDialogProps) {
-	const [note, setNote] = useState("");
-	const [withOptions, setWithOptions] = useState(false);
+  const [note, setNote] = useState('')
+  const [withOptions, setWithOptions] = useState(false)
 
-	const handleConfirm = () => {
-		onConfirm({ note: note.trim(), withOptions });
-		setNote("");
-		setWithOptions(false);
-		onOpenChange(false);
-	};
+  const handleConfirm = () => {
+    onConfirm({ note: note.trim(), withOptions })
+    setNote('')
+    setWithOptions(false)
+    onOpenChange(false)
+  }
 
-	const handleOpenChange = (next: boolean) => {
-		if (!next) {
-			setNote("");
-			setWithOptions(false);
-		}
-		onOpenChange(next);
-	};
+  const handleOpenChange = (next: boolean) => {
+    if (!next) {
+      setNote('')
+      setWithOptions(false)
+    }
+    onOpenChange(next)
+  }
 
-	return (
-		<Dialog open={open} onOpenChange={handleOpenChange}>
-			<DialogContent>
-				<DialogHeader>
-					<DialogTitle>请求补充信息</DialogTitle>
-					<DialogDescription>
-						向 AI 请求对当前问题的更详细说明。可以填写备注指引补充方向。
-					</DialogDescription>
-				</DialogHeader>
-				<div className="grid gap-4 py-4">
-					<div className="grid gap-2">
-						<Label htmlFor="supplement-note">补充说明（可选）</Label>
-						<Textarea
-							id="supplement-note"
-							value={note}
-							onChange={(e) => setNote(e.target.value)}
-							placeholder="补充说明（可选）..."
-							className="min-h-[100px] resize-y"
-						/>
-					</div>
-					{showOptionSwitch && (
-						<div className="flex items-center justify-between rounded-lg border border-line bg-foam px-3 py-2.5">
-							<div className="flex flex-col gap-0.5">
-								<Label
-									htmlFor="supplement-options-switch"
-									className="cursor-pointer"
-								>
-									同时为所有选项请求详细补充
-								</Label>
-								{optionCount !== undefined && (
-									<span className="text-xs text-sea-ink-soft">
-										将请求为 {optionCount} 个选项逐一补充说明
-									</span>
-								)}
-							</div>
-							<Switch
-								id="supplement-options-switch"
-								checked={withOptions}
-								onCheckedChange={setWithOptions}
-							/>
-						</div>
-					)}
-				</div>
-				<DialogFooter>
-					<Button variant="outline" onClick={() => handleOpenChange(false)}>
-						取消
-					</Button>
-					<Button onClick={handleConfirm}>确认请求</Button>
-				</DialogFooter>
-			</DialogContent>
-		</Dialog>
-	);
+  return (
+    <Dialog open={open} onOpenChange={handleOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>请求补充信息</DialogTitle>
+          <DialogDescription>
+            向 AI 请求对当前问题的更详细说明。可以填写备注指引补充方向。
+          </DialogDescription>
+        </DialogHeader>
+        <div className="grid gap-4 py-4">
+          <div className="grid gap-2">
+            <Label htmlFor="supplement-note">补充说明（可选）</Label>
+            <Textarea
+              id="supplement-note"
+              value={note}
+              onChange={(e) => setNote(e.target.value)}
+              placeholder="补充说明（可选）..."
+              className="min-h-[100px] resize-y"
+            />
+          </div>
+          {showOptionSwitch && (
+            <div className="flex items-center justify-between rounded-lg border border-line bg-foam px-3 py-2.5">
+              <div className="flex flex-col gap-0.5">
+                <Label
+                  htmlFor="supplement-options-switch"
+                  className="cursor-pointer"
+                >
+                  同时为所有选项请求详细补充
+                </Label>
+                {optionCount !== undefined && (
+                  <span className="text-xs text-sea-ink-soft">
+                    将请求为 {optionCount} 个选项逐一补充说明
+                  </span>
+                )}
+              </div>
+              <Switch
+                id="supplement-options-switch"
+                checked={withOptions}
+                onCheckedChange={setWithOptions}
+              />
+            </div>
+          )}
+        </div>
+        <DialogFooter>
+          <Button variant="outline" onClick={() => handleOpenChange(false)}>
+            取消
+          </Button>
+          <Button onClick={handleConfirm}>确认请求</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
 }
diff --git a/web/src/components/interact/types.ts b/web/src/components/interact/types.ts
index cbfd95a..114b7ad 100644
--- a/web/src/components/interact/types.ts
+++ b/web/src/components/interact/types.ts
@@ -1,66 +1,66 @@
 export type QuestionType =
-	| "select"
-	| "multi-select"
-	| "text"
-	| "boolean"
-	| "code"
-	| "image"
-	| "file"
-	| "diff"
-	| "plan"
-	| "options"
-	| "review"
-	| "slider"
-	| "rank"
-	| "rate";
+  | 'select'
+  | 'multi-select'
+  | 'text'
+  | 'boolean'
+  | 'code'
+  | 'image'
+  | 'file'
+  | 'diff'
+  | 'plan'
+  | 'options'
+  | 'review'
+  | 'slider'
+  | 'rank'
+  | 'rate'
 
 export interface OptionItem {
-	id: string;
-	label: string;
-	description?: string;
+  id: string
+  label: string
+  description?: string
 }
 
 export interface Question {
-	id: string;
-	sessionId: string;
-	content: string;
-	description?: string;
-	type: QuestionType;
-	options?: OptionItem[];
-	allowOther?: boolean;
-	groupLabel: string;
-	batch?: { group_id: string; sequence: number; total: number };
-	config?: Record<string, any>;
-	status: 'pending' | 'answered' | 'skipped' | 'cancelled';
-	answered: boolean;
-	answer?: any;
-	supplements?: SupplementItem[];
-	supplement?: boolean; // 是否携带补充内容
-	media?: any;
-	createdAt: string;
-	answeredAt?: string;
+  id: string
+  sessionId: string
+  content: string
+  description?: string
+  type: QuestionType
+  options?: OptionItem[]
+  allowOther?: boolean
+  groupLabel: string
+  batch?: { group_id: string; sequence: number; total: number }
+  config?: Record<string, any>
+  status: 'pending' | 'answered' | 'skipped' | 'cancelled'
+  answered: boolean
+  answer?: any
+  supplements?: SupplementItem[]
+  supplement?: boolean // 是否携带补充内容
+  media?: any
+  createdAt: string
+  answeredAt?: string
 }
 
 export interface Session {
-  id: string;
-  hash: string; // 会话唯一哈希标识
-  title: string;
-	agent: string;
-	type: 'temporary' | 'permanent';
-	status: 'active' | 'expired' | 'deleted';
-	updatedAt: string;
-	expiresAt: string;
-	owner: string;
-	onlineDevices: number;
-	questions: Question[];
+  id: string
+  hash: string // 会话唯一哈希标识
+  title: string
+  agent: string
+  type: 'temporary' | 'permanent'
+  status: 'active' | 'expired' | 'deleted'
+  updatedAt: string
+  expiresAt: string
+  owner: string
+  onlineDevices: number
+  questions: Question[]
 }
 
 export interface SupplementItem {
-	id: string;
-	target_type: 'question' | 'option';
-	target_id: string;
-	content_type: 'markdown' | 'html' | 'preview';
-	content: string;
-	created_at: string;
-	updated_at: string;
+  id: string
+  target_type: 'question' | 'option'
+  target_id: string
+  content_type: 'markdown' | 'html' | 'preview'
+  content: string
+  created_at: string
+  updated_at: string
 }
diff --git a/web/src/components/landing/tech-section.tsx b/web/src/components/landing/tech-section.tsx
index 3f627ca..7a1b0a1 100644
--- a/web/src/components/landing/tech-section.tsx
+++ b/web/src/components/landing/tech-section.tsx
@@ -6,7 +6,7 @@ const channels = [
   {
     kicker: '对外通道',
     name: 'MCP Server',
-    description: 'Streamable HTTP 协议，30 个工具供 Agent 编排调用。',
+    description: 'Streamable HTTP 协议，40 个工具供 Agent 编排调用。',
   },
   {
     kicker: '对外通道',
diff --git a/web/src/components/llm/agent-model-assign.tsx b/web/src/components/llm/agent-model-assign.tsx
index 349adb2..0fd8444 100644
--- a/web/src/components/llm/agent-model-assign.tsx
+++ b/web/src/components/llm/agent-model-assign.tsx
@@ -46,9 +46,7 @@ const ROLE_DISPLAY_MAP: Partial<Record<string, RoleDisplay>> = {
   },
 }
 
-export function AgentModelAssignGroup({
-  module,
-}: AgentModelAssignGroupProps) {
+export function AgentModelAssignGroup({ module }: AgentModelAssignGroupProps) {
   const { data: agentData } = useAgentModels(module)
   const { data: modelsData } = useModels()
 
@@ -82,10 +80,7 @@ interface AgentModelSelectProps {
   models: Array<{ id: string; display_name: string }>
 }
 
-function AgentModelSelect({
-  assignment,
-  models,
-}: AgentModelSelectProps) {
+function AgentModelSelect({ assignment, models }: AgentModelSelectProps) {
   const updateMutation = useUpdateAgentModel()
   const [selectedModelId, setSelectedModelId] = useState(
     assignment.model_id ?? '',
@@ -114,8 +109,7 @@ function AgentModelSelect({
 
   const display = ROLE_DISPLAY_MAP[assignment.role]
   const label = display?.label ?? assignment.role
-  const description =
-    display?.description ?? '为 Agent 角色分配默认使用的模型'
+  const description = display?.description ?? '为 Agent 角色分配默认使用的模型'
 
   return (
     <div className="flex items-center justify-between rounded-lg border p-4">
diff --git a/web/src/components/llm/model-columns.tsx b/web/src/components/llm/model-columns.tsx
index 8f49a4c..1ae0636 100644
--- a/web/src/components/llm/model-columns.tsx
+++ b/web/src/components/llm/model-columns.tsx
@@ -34,9 +34,7 @@ export function getModelColumns(
       accessorKey: 'display_name',
       header: '显示名称',
       cell: ({ row }) => (
-        <span className="font-medium">
-          {row.getValue('display_name')}
-        </span>
+        <span className="font-medium">{row.getValue('display_name')}</span>
       ),
     },
     {
diff --git a/web/src/components/llm/model-create-dialog.tsx b/web/src/components/llm/model-create-dialog.tsx
index f862c67..fe895c9 100644
--- a/web/src/components/llm/model-create-dialog.tsx
+++ b/web/src/components/llm/model-create-dialog.tsx
@@ -83,9 +83,7 @@ export function ModelCreateDialog({
       <DialogContent>
         <DialogHeader>
           <DialogTitle>创建 Model</DialogTitle>
-          <DialogDescription>
-            配置一个新的 LLM Model。
-          </DialogDescription>
+          <DialogDescription>配置一个新的 LLM Model。</DialogDescription>
         </DialogHeader>
         <div className="grid gap-4 py-4">
           <div className="grid gap-2">
diff --git a/web/src/components/llm/model-edit-dialog.tsx b/web/src/components/llm/model-edit-dialog.tsx
index 06bb522..bc34c39 100644
--- a/web/src/components/llm/model-edit-dialog.tsx
+++ b/web/src/components/llm/model-edit-dialog.tsx
@@ -94,9 +94,7 @@ export function ModelEditDialog({
       <DialogContent>
         <DialogHeader>
           <DialogTitle>编辑 Model</DialogTitle>
-          <DialogDescription>
-            修改 Model 的配置信息。
-          </DialogDescription>
+          <DialogDescription>修改 Model 的配置信息。</DialogDescription>
         </DialogHeader>
         <div className="grid gap-4 py-4">
           <div className="grid gap-2">
diff --git a/web/src/components/llm/provider-create-dialog.tsx b/web/src/components/llm/provider-create-dialog.tsx
index 69340b2..ea17357 100644
--- a/web/src/components/llm/provider-create-dialog.tsx
+++ b/web/src/components/llm/provider-create-dialog.tsx
@@ -73,9 +73,7 @@ export function ProviderCreateDialog({
       <DialogContent>
         <DialogHeader>
           <DialogTitle>创建 Provider</DialogTitle>
-          <DialogDescription>
-            配置一个新的 LLM Provider。
-          </DialogDescription>
+          <DialogDescription>配置一个新的 LLM Provider。</DialogDescription>
         </DialogHeader>
         <div className="grid gap-4 py-4">
           <div className="grid gap-2">
@@ -134,7 +132,9 @@ export function ProviderCreateDialog({
           </Button>
           <Button
             onClick={handleSubmit}
-            disabled={!name.trim() || !apiKey.trim() || createMutation.isPending}
+            disabled={
+              !name.trim() || !apiKey.trim() || createMutation.isPending
+            }
           >
             {createMutation.isPending ? '创建中...' : '创建'}
           </Button>
diff --git a/web/src/components/llm/provider-edit-dialog.tsx b/web/src/components/llm/provider-edit-dialog.tsx
index aa3d0f2..ff1cff5 100644
--- a/web/src/components/llm/provider-edit-dialog.tsx
+++ b/web/src/components/llm/provider-edit-dialog.tsx
@@ -91,9 +91,7 @@ export function ProviderEditDialog({
       <DialogContent>
         <DialogHeader>
           <DialogTitle>编辑 Provider</DialogTitle>
-          <DialogDescription>
-            修改 Provider 的配置信息。
-          </DialogDescription>
+          <DialogDescription>修改 Provider 的配置信息。</DialogDescription>
         </DialogHeader>
         <div className="grid gap-4 py-4">
           <div className="grid gap-2">
diff --git a/web/src/components/mcp/manual-connect-panel.tsx b/web/src/components/mcp/manual-connect-panel.tsx
index b0e96e0..ae10c6a 100644
--- a/web/src/components/mcp/manual-connect-panel.tsx
+++ b/web/src/components/mcp/manual-connect-panel.tsx
@@ -1,7 +1,12 @@
 import { useState } from 'react'
 import { KeyRound, PlugZap, ShieldCheck } from 'lucide-react'
 
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@lumina/components/ui/tabs'
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from '@lumina/components/ui/tabs'
 
 import { ChannelKicker } from './channel-band'
 import { ClientConfigPanel } from './client-config-panel'
diff --git a/web/src/components/mcp/plugin-install-panel.tsx b/web/src/components/mcp/plugin-install-panel.tsx
index 40e34a7..ab81891 100644
--- a/web/src/components/mcp/plugin-install-panel.tsx
+++ b/web/src/components/mcp/plugin-install-panel.tsx
@@ -20,7 +20,7 @@ interface PluginInstallPanelProps {
 }
 
 const pluginBenefits = [
-  '自动连接当前 Lumina 的 30 个 MCP 工具',
+  '自动连接当前 Lumina 的 40 个 MCP 工具',
   '同时安装 Q&A、Preview、Pages、Pin 与 RepoWiki 技能',
   '后续更新继续沿用同一个插件入口',
 ]
@@ -47,8 +47,9 @@ export function PluginInstallPanel({ origin }: PluginInstallPanelProps) {
       </div>
 
       <p className="mt-3 max-w-[48em] text-[15px] leading-relaxed text-sea-ink-soft">
-        插件随包携带 Q&A、Preview、Pin 与 RepoWiki 技能说明，并按客户端机制读取随包提供的
-        MCP 配置连接到当前站点。MCP 采用 OAuth 登录授权，首次连接时完成一次登录即可，无需手动管理密钥。
+        插件随包携带 Q&A、Preview、Pin 与 RepoWiki
+        技能说明，并按客户端机制读取随包提供的 MCP 配置连接到当前站点。MCP 采用
+        OAuth 登录授权，首次连接时完成一次登录即可，无需手动管理密钥。
       </p>
 
       <div className="mt-5 grid gap-px bg-line sm:grid-cols-1">
@@ -120,8 +121,7 @@ export function PluginInstallPanel({ origin }: PluginInstallPanelProps) {
             </p>
             <p className="text-xs leading-relaxed text-sea-ink-soft">
               <Wrench className="mr-1 inline size-3.5" aria-hidden />
-              旧版本 Claude Code 不支持 archive
-              插件源时，可改用仓库市场：
+              旧版本 Claude Code 不支持 archive 插件源时，可改用仓库市场：
               <span className="font-mono break-all text-sea-ink">
                 {buildClaudeRepoMarketplaceAdd()}
               </span>
@@ -130,19 +130,18 @@ export function PluginInstallPanel({ origin }: PluginInstallPanelProps) {
           </TabsContent>
           <TabsContent value="zcode" className="space-y-3">
             <p className="text-[13px] leading-relaxed text-sea-ink-soft">
-              打开 ZCode 的「设置 → 插件管理 → 发现」，点击{' '}
-              <code>+</code>{' '}
-              粘贴下方专用市场地址并安装 <code>lumina</code>{' '}
-              插件，完成后重启 ZCode。
+              打开 ZCode 的「设置 → 插件管理 → 发现」，点击 <code>+</code>{' '}
+              粘贴下方专用市场地址并安装 <code>lumina</code> 插件，完成后重启
+              ZCode。
             </p>
             <CopyBlock
               code={zcodeMarketplaceUrl}
               filename="ZCode · 专用市场地址"
             />
             <p className="text-xs leading-relaxed text-sea-ink-soft">
-              该地址始终返回 ZCode 兼容的 url + zip
-              清单变体，不会出现「不支持 archive
-              源」的报错。若 ZCode 未自动完成 MCP 连接，请使用方案二手动接入。
+              该地址始终返回 ZCode 兼容的 url + zip 清单变体，不会出现「不支持
+              archive 源」的报错。若 ZCode 未自动完成 MCP
+              连接，请使用方案二手动接入。
             </p>
           </TabsContent>
           <TabsContent value="codex" className="space-y-3">
@@ -152,9 +151,9 @@ export function PluginInstallPanel({ origin }: PluginInstallPanelProps) {
             </p>
             <CopyBlock code={buildCodexPluginSnippet()} filename="Codex" />
             <p className="text-xs leading-relaxed text-sea-ink-soft">
-              插件提供 Q&A、Preview、Pin 与 RepoWiki
-              技能。Codex 不消费动态插件包内的 MCP 配置，连接 MCP 请使用方案二的
-              OAuth 直连（<code>codex mcp login</code>）或 API Key 配置。
+              插件提供 Q&A、Preview、Pin 与 RepoWiki 技能。Codex
+              不消费动态插件包内的 MCP 配置，连接 MCP 请使用方案二的 OAuth
+              直连（<code>codex mcp login</code>）或 API Key 配置。
             </p>
           </TabsContent>
         </Tabs>
diff --git a/web/src/components/mcp/skills-install-panel.tsx b/web/src/components/mcp/skills-install-panel.tsx
index 0200e22..0d1568c 100644
--- a/web/src/components/mcp/skills-install-panel.tsx
+++ b/web/src/components/mcp/skills-install-panel.tsx
@@ -14,8 +14,8 @@ export function SkillsInstallPanel({ origin }: SkillsInstallPanelProps) {
         只装 Q&amp;A、Preview、Pin 与 RepoWiki 技能
       </h2>
       <p className="mt-2 mb-4 max-w-[48em] text-[13px] leading-relaxed text-sea-ink-soft">
-        只想把 Lumina 的使用说明装进支持 Agent Skills
-        的客户端、不连接 MCP 时，选择这个方式。它不会自动配置
+        只想把 Lumina 的使用说明装进支持 Agent Skills 的客户端、不连接 MCP
+        时，选择这个方式。它不会自动配置
         MCP；需要工具调用时请回到方案一或方案二。
       </p>
       {origin ? (
diff --git a/web/src/components/mcp/tool-catalog.tsx b/web/src/components/mcp/tool-catalog.tsx
index e22671f..205efa3 100644
--- a/web/src/components/mcp/tool-catalog.tsx
+++ b/web/src/components/mcp/tool-catalog.tsx
@@ -6,7 +6,7 @@ export function ToolCatalog() {
     <div>
       <ChannelKicker>可以做什么</ChannelKicker>
       <h2 className="display-title mt-2 text-[22px] font-medium text-sea-ink">
-        五组能力，覆盖日常项目协作
+        八大核心能力域，40 套标准协作工具
       </h2>
       <div className="mt-4">
         {MCP_TOOL_MODULES.map((module) => (
diff --git a/web/src/components/pages/password-gate.tsx b/web/src/components/pages/password-gate.tsx
index 12e6456..2db805b 100644
--- a/web/src/components/pages/password-gate.tsx
+++ b/web/src/components/pages/password-gate.tsx
@@ -52,7 +52,11 @@ export function PagesPasswordGate({
               {unlock.error.message || '密码错误，请重试'}
             </p>
           )}
-          <Button type="submit" className="w-full" disabled={unlock.isPending || !password.trim()}>
+          <Button
+            type="submit"
+            className="w-full"
+            disabled={unlock.isPending || !password.trim()}
+          >
             {unlock.isPending ? '解锁中…' : '解锁'}
           </Button>
         </form>
diff --git a/web/src/components/pages/showcase-page.tsx b/web/src/components/pages/showcase-page.tsx
index 7dfc01e..02585cc 100644
--- a/web/src/components/pages/showcase-page.tsx
+++ b/web/src/components/pages/showcase-page.tsx
@@ -107,4 +107,4 @@ export function PagesShowcasePage({
       versions={versions.data?.data?.items ?? [meta.data.data.version]}
     />
   )
-}
\ No newline at end of file
+}
diff --git a/web/src/components/pin/create-dialog.tsx b/web/src/components/pin/create-dialog.tsx
index 3d3f564..b518fca 100644
--- a/web/src/components/pin/create-dialog.tsx
+++ b/web/src/components/pin/create-dialog.tsx
@@ -81,7 +81,9 @@ function ProjectCombobox({
           aria-expanded={open}
           className="w-full justify-between"
         >
-          {selectedProject ? selectedProject.name : (placeholder ?? '选择项目...')}
+          {selectedProject
+            ? selectedProject.name
+            : (placeholder ?? '选择项目...')}
           <ChevronsUpDown className="ml-2 size-4 shrink-0 opacity-50" />
         </Button>
       </PopoverTrigger>
@@ -128,7 +130,14 @@ export function CreatePinDialog({ open, onOpenChange }: CreateDialogProps) {
   const createMutation = useCreatePin()
 
   const handleSubmit = () => {
-    if (!title.trim() || !content.trim() || !priority || !toProjectId || !fromProjectId) return
+    if (
+      !title.trim() ||
+      !content.trim() ||
+      !priority ||
+      !toProjectId ||
+      !fromProjectId
+    )
+      return
     createMutation.mutate(
       {
         title: title.trim(),
diff --git a/web/src/components/preview/file-viewer.test.tsx b/web/src/components/preview/file-viewer.test.tsx
index 0f6e545..a43a400 100644
--- a/web/src/components/preview/file-viewer.test.tsx
+++ b/web/src/components/preview/file-viewer.test.tsx
@@ -37,4 +37,36 @@ icon: ShieldCheck
       expect(screen.getByText('正文内容')).toBeDefined()
     })
   })
+
+  it('Q-03: 当同文件 src 增量更新时，PreviewSourceViewer 应保留现有内容，不应闪现“整理预览中…”占位', async () => {
+    vi.spyOn(globalThis, 'fetch')
+      .mockResolvedValueOnce(
+        new Response('console.log("version 1")', { status: 200 }),
+      )
+      .mockImplementationOnce(() => new Promise(() => {})) // 模拟第二次请求 pending
+
+    const { rerender } = render(
+      <PreviewFileViewer
+        kind="code"
+        src="/preview/test/app.js?_lumina_sync=1"
+        filename="app.js"
+      />,
+    )
+
+    await waitFor(() => {
+      expect(screen.getByText(/version 1/)).toBeDefined()
+    })
+
+    // 触发增量更新（相同 filename，不同 src）
+    rerender(
+      <PreviewFileViewer
+        kind="code"
+        src="/preview/test/app.js?_lumina_sync=2"
+        filename="app.js"
+      />,
+    )
+
+    // 不应退回到“整理预览中…”占位符
+    expect(screen.queryByText('整理预览中…')).toBeNull()
+  })
 })
diff --git a/web/src/components/preview/file-viewer.tsx b/web/src/components/preview/file-viewer.tsx
index 0d267cb..81dd4d0 100644
--- a/web/src/components/preview/file-viewer.tsx
+++ b/web/src/components/preview/file-viewer.tsx
@@ -1,4 +1,6 @@
-import { useEffect, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
+import { AnimatePresence, motion, useReducedMotion } from 'motion/react'
+import { ease } from '@lumina/components/motion'
 
 import { PreviewFrame } from '#/components/interact/primitives/preview-frame'
 import { formatPreviewSource } from '#/lib/format-preview-source'
@@ -17,19 +19,34 @@ export function PreviewFileViewer({
   src: string
   filename: string
 }) {
-  if (kind === 'lpw') {
-    return <PreviewLpwViewer src={src} filename={filename} />
-  }
-
-  if (kind === 'mdx') {
-    return <PreviewMdxViewer src={src} filename={filename} />
-  }
+  const shouldReduceMotion = useReducedMotion()
 
+  // 对于 HTML/SVG/TSX 视图，复用单一 PreviewFrame 实例，利用内部 motion.div 驱动平滑过渡，
+  // 避免外层 key 随文件名切换导致 PreviewFrame 实例被硬销毁重挂并重现全屏 LoadingSlot
   if (kind === 'html' || kind === 'svg' || kind === 'tsx') {
     return <PreviewFrame src={src} className="flex-1" title={filename} />
   }
 
-  return <PreviewSourceViewer src={src} filename={filename} kind={kind} />
+  return (
+    <motion.div
+      key={`${filename}:${kind}`}
+      initial={{ opacity: shouldReduceMotion ? 1 : 0.4 }}
+      animate={{ opacity: 1 }}
+      transition={{
+        duration: shouldReduceMotion ? 0 : 0.18,
+        ease,
+      }}
+      className="flex min-h-0 flex-1 flex-col h-full w-full"
+    >
+      {kind === 'lpw' ? (
+        <PreviewLpwViewer src={src} filename={filename} />
+      ) : kind === 'mdx' ? (
+        <PreviewMdxViewer src={src} filename={filename} />
+      ) : (
+        <PreviewSourceViewer src={src} filename={filename} kind={kind} />
+      )}
+    </motion.div>
+  )
 }
 
 function PreviewSourceViewer({
@@ -43,21 +60,36 @@ function PreviewSourceViewer({
 }) {
   const [source, setSource] = useState<string | null>(null)
   const [error, setError] = useState('')
+  const [isUpdating, setIsUpdating] = useState(false)
+  const prevFilenameRef = useRef(filename)
+  const shouldReduceMotion = useReducedMotion()
 
   useEffect(() => {
     const ac = new AbortController()
-    setSource(null)
+    const fileChanged = prevFilenameRef.current !== filename
+    prevFilenameRef.current = filename
+
+    // 仅在真实切换文件时重置 source 触发占位态；同文件增量推送时保持现有视图 (Q-03)
+    if (fileChanged) {
+      setSource(null)
+    }
+    setIsUpdating(true)
     setError('')
+
     void (async () => {
       try {
         const rawUrl = src.includes('?') ? `${src}&raw=1` : `${src}?raw=1`
         const res = await fetch(rawUrl, { signal: ac.signal })
         if (!res.ok) throw new Error(`HTTP ${res.status}`)
         const text = await res.text()
-        setSource(formatPreviewSource(filename, text))
+        if (!ac.signal.aborted) {
+          setSource(formatPreviewSource(filename, text))
+          setIsUpdating(false)
+        }
       } catch {
         if (ac.signal.aborted) return
         setError('读取文件内容失败')
+        setIsUpdating(false)
       }
     })()
     return () => ac.abort()
@@ -77,12 +109,32 @@ function PreviewSourceViewer({
       </div>
     )
   }
-  if (kind === 'markdown') {
-    return <PreviewMarkdownView source={source} />
-  }
+
   return (
-    <div className="flex min-h-0 flex-1 flex-col">
-      <PreviewCodeView filename={filename} source={source} />
+    <div className="relative flex min-h-0 flex-1 flex-col h-full w-full">
+      <AnimatePresence>
+        {isUpdating ? (
+          <motion.div
+            key="source-sync-bar"
+            data-testid="source-sync-bar"
+            initial={{ opacity: 0, scaleX: 0 }}
+            animate={{ opacity: 1, scaleX: 1 }}
+            exit={{ opacity: 0 }}
+            transition={{
+              duration: shouldReduceMotion ? 0 : 0.15,
+              ease,
+            }}
+            className="absolute top-0 left-0 right-0 z-20 h-0.5 origin-left bg-lagoon shadow-[0_0_8px_var(--color-lagoon)] pointer-events-none"
+          />
+        ) : null}
+      </AnimatePresence>
+      {kind === 'markdown' ? (
+        <PreviewMarkdownView source={source} />
+      ) : (
+        <div className="flex min-h-0 flex-1 flex-col">
+          <PreviewCodeView filename={filename} source={source} />
+        </div>
+      )}
     </div>
   )
 }
diff --git a/web/src/components/preview/workbench-canvas.tsx b/web/src/components/preview/workbench-canvas.tsx
index 7050e3a..bb96f28 100644
--- a/web/src/components/preview/workbench-canvas.tsx
+++ b/web/src/components/preview/workbench-canvas.tsx
@@ -54,7 +54,10 @@ export function WorkbenchCanvas({
     const preset = DEVICE_PRESETS.find((item) => item.id === device)
     if (preset?.width) {
       setWidth((current) =>
-        clampDeviceWidth(preset.width, typeof window === 'undefined' ? current : window.innerWidth),
+        clampDeviceWidth(
+          preset.width,
+          typeof window === 'undefined' ? current : window.innerWidth,
+        ),
       )
     }
   }, [device])
@@ -140,7 +143,9 @@ export function WorkbenchCanvas({
               max={Math.min(1100, widthUpperBound)}
               value={width}
               onChange={(event) =>
-                setWidth(clampDeviceWidth(Number(event.target.value), viewportWidth))
+                setWidth(
+                  clampDeviceWidth(Number(event.target.value), viewportWidth),
+                )
               }
             />
             {QUICK_WIDTHS.map((value) => (
diff --git a/web/src/components/preview/workbench-page.test.tsx b/web/src/components/preview/workbench-page.test.tsx
new file mode 100644
index 0000000..f0e1e51
--- /dev/null
+++ b/web/src/components/preview/workbench-page.test.tsx
@@ -0,0 +1,140 @@
+/** @vitest-environment jsdom */
+import { act, cleanup, render, screen, waitFor } from '@testing-library/react'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import * as previewApi from '#/lib/apis/preview'
+import { PreviewWorkbenchPage } from './workbench-page'
+
+const mockNavigate = vi.fn()
+
+vi.mock('@tanstack/react-router', () => ({
+  useNavigate: () => mockNavigate,
+}))
+
+vi.mock('#/hooks/usePreviewHeader', () => ({
+  usePreviewHeader: () => ({
+    setTitle: vi.fn(),
+    setControls: vi.fn(),
+  }),
+}))
+
+vi.mock('#/hooks/usePreviewWebSocket', () => ({
+  usePreviewWebSocket: () => ({
+    status: 'connected',
+    disconnect: vi.fn(),
+    reconnect: vi.fn(),
+  }),
+}))
+
+afterEach(() => {
+  cleanup()
+  vi.restoreAllMocks()
+  mockNavigate.mockReset()
+})
+
+describe('PreviewWorkbenchPage (S-01 & Q-01)', () => {
+  const sessionData = {
+    session: {
+      id: 'sess-1',
+      hash: 'hash-123',
+      title: '测试预览',
+      status: 'active' as const,
+      source_page_id: null,
+      source_page_slug: null,
+      created_at: '2026-09-20T00:00:00Z',
+      updated_at: '2026-09-20T00:00:00Z',
+      expires_at: '2026-09-30T00:00:00Z',
+    },
+    files: [
+      {
+        id: 'f-1',
+        session_id: 'sess-1',
+        filename: 'index.html',
+        mime_type: 'text/html; charset=utf-8',
+        size: 100,
+        created_at: '2026-09-20T00:00:00Z',
+        updated_at: '2026-09-20T00:00:00Z',
+      },
+      {
+        id: 'f-2',
+        session_id: 'sess-1',
+        filename: 'about.html',
+        mime_type: 'text/html; charset=utf-8',
+        size: 100,
+        created_at: '2026-09-20T00:00:00Z',
+        updated_at: '2026-09-20T00:00:00Z',
+      },
+    ],
+  }
+
+  beforeEach(() => {
+    vi.spyOn(previewApi, 'getPreviewSessionDetail').mockResolvedValue({
+      code: 200,
+      message: 'OK',
+      data: sessionData as any,
+    })
+  })
+
+  it('S-01: 来自未授权外部窗口（伪造 event.source）的 lumina:navigate 事件应被严格忽略', async () => {
+    render(
+      <PreviewWorkbenchPage
+        sessionHash="hash-123"
+        requestedFile="index.html"
+      />,
+    )
+
+    await waitFor(() => {
+      expect(screen.getByTitle('index.html')).toBeDefined()
+    })
+
+    // 模拟恶意外部弹窗/窗口发送 postMessage
+    const fakeExternalWindow = {} as Window
+    act(() => {
+      const messageEvent = new MessageEvent('message', {
+        data: { type: 'lumina:navigate', href: 'about.html' },
+        source: fakeExternalWindow,
+        origin: 'http://evil.com',
+      })
+      window.dispatchEvent(messageEvent)
+    })
+
+    // 外部伪造来源必须被拦截，不得触发路由跳转
+    expect(mockNavigate).not.toHaveBeenCalledWith(
+      expect.objectContaining({
+        params: expect.objectContaining({ _splat: 'about.html' }),
+      }),
+    )
+  })
+
+  it('S-01 & Q-01: 来自合法 iframe contentWindow 的 lumina:navigate 应受信任并联动', async () => {
+    const { container } = render(
+      <PreviewWorkbenchPage
+        sessionHash="hash-123"
+        requestedFile="index.html"
+      />,
+    )
+
+    await waitFor(() => {
+      expect(screen.getByTitle('index.html')).toBeDefined()
+    })
+
+    const iframe = container.querySelector('iframe')
+    expect(iframe).toBeTruthy()
+
+    // 模拟来自 iframe.contentWindow 的合法内部导航事件
+    act(() => {
+      const messageEvent = new MessageEvent('message', {
+        data: { type: 'lumina:navigate', href: 'about.html' },
+        source: iframe?.contentWindow,
+        origin: 'null',
+      })
+      window.dispatchEvent(messageEvent)
+    })
+
+    // 应允许导航并同步路由状态
+    expect(mockNavigate).toHaveBeenCalledWith({
+      to: '/preview/$sessionHash/$',
+      params: { sessionHash: 'hash-123', _splat: 'about.html' },
+      replace: true,
+    })
+  })
+})
diff --git a/web/src/components/preview/workbench-page.tsx b/web/src/components/preview/workbench-page.tsx
index e6275dd..c32fbf6 100644
--- a/web/src/components/preview/workbench-page.tsx
+++ b/web/src/components/preview/workbench-page.tsx
@@ -134,6 +134,16 @@ export function PreviewWorkbenchPage({
       ) {
         return
       }
+
+      // S-01: 来源鉴权守卫 — 严格校验消息是否来自当前 DOM 中挂载的预览 iframe
+      const iframes = Array.from(document.querySelectorAll('iframe'))
+      const isFromPreviewIframe = iframes.some(
+        (iframe) => iframe.contentWindow === event.source,
+      )
+      if (!isFromPreviewIframe) {
+        return
+      }
+
       const rawHref = event.data.href.split(/[?#]/)[0]
       const href = rawHref.split('/').pop()
       if (!href) return
@@ -179,7 +189,8 @@ export function PreviewWorkbenchPage({
 
   useEffect(() => {
     if (internalNavRef.current === activeFile) {
-      // 来自 iframe 内部导航：iframe 已完成或正在自然加载目标文件，避免重设 src 触发二次硬重载
+      // 来自 iframe 内部导航：iframe 已完成原生跳转（保留其 hash 与 query 参数），
+      // 避免立即用 computedSrc 重设 iframe.src 导致参数被抹除或触发二次重复硬重载
       internalNavRef.current = null
       return
     }
diff --git a/web/src/components/profile/biometric-tab.tsx b/web/src/components/profile/biometric-tab.tsx
index 7a64d27..e9154cf 100644
--- a/web/src/components/profile/biometric-tab.tsx
+++ b/web/src/components/profile/biometric-tab.tsx
@@ -1,6 +1,11 @@
 import { useState } from 'react'
 import { formatDateTime } from '#/lib/format-date'
-import { Card, CardContent, CardHeader, CardTitle } from '@lumina/components/ui/card'
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from '@lumina/components/ui/card'
 import { Button } from '@lumina/components/ui/button'
 import { Input } from '@lumina/components/ui/input'
 import { Label } from '@lumina/components/ui/label'
@@ -24,7 +29,11 @@ import {
   AlertDialogTitle,
 } from '@lumina/components/ui/alert-dialog'
 import { Fingerprint, Plus, Trash2, Monitor } from 'lucide-react'
-import { useBiometricCredentials, useRegisterBiometric, useDeleteBiometric } from '#/hooks/useBiometric'
+import {
+  useBiometricCredentials,
+  useRegisterBiometric,
+  useDeleteBiometric,
+} from '#/hooks/useBiometric'
 import type { BiometricCredentialItem } from '#/lib/models/response/user'
 import { toast } from 'sonner'
 
@@ -96,10 +105,16 @@ export function BiometricTab() {
                 />
               </div>
               <DialogFooter>
-                <Button variant="outline" onClick={() => setRegisterOpen(false)}>
+                <Button
+                  variant="outline"
+                  onClick={() => setRegisterOpen(false)}
+                >
                   取消
                 </Button>
-                <Button onClick={handleRegister} disabled={registerBiometric.isPending}>
+                <Button
+                  onClick={handleRegister}
+                  disabled={registerBiometric.isPending}
+                >
                   {registerBiometric.isPending ? '注册中…' : '开始注册'}
                 </Button>
               </DialogFooter>
@@ -111,7 +126,9 @@ export function BiometricTab() {
         {isLoading ? (
           <p className="text-sm text-sea-ink-soft">加载中…</p>
         ) : credentials.length === 0 ? (
-          <p className="text-sm text-sea-ink-soft">尚未注册任何生物特征凭证。</p>
+          <p className="text-sm text-sea-ink-soft">
+            尚未注册任何生物特征凭证。
+          </p>
         ) : (
           <div className="space-y-3">
             {credentials.map((cred: BiometricCredentialItem) => (
@@ -124,7 +141,9 @@ export function BiometricTab() {
                     <Monitor className="size-4" />
                   </div>
                   <div>
-                    <p className="text-sm font-medium text-sea-ink">{cred.device_name}</p>
+                    <p className="text-sm font-medium text-sea-ink">
+                      {cred.device_name}
+                    </p>
                     <p className="text-xs text-sea-ink-soft">
                       {cred.last_used_at
                         ? `最后使用：${formatDateTime(cred.last_used_at * 1000)}`
@@ -145,7 +164,10 @@ export function BiometricTab() {
         )}
       </CardContent>
 
-      <AlertDialog open={!!deleteId} onOpenChange={(open) => !open && setDeleteId(null)}>
+      <AlertDialog
+        open={!!deleteId}
+        onOpenChange={(open) => !open && setDeleteId(null)}
+      >
         <AlertDialogContent>
           <AlertDialogHeader>
             <AlertDialogTitle>确认删除凭证？</AlertDialogTitle>
@@ -155,7 +177,9 @@ export function BiometricTab() {
           </AlertDialogHeader>
           <AlertDialogFooter>
             <AlertDialogCancel>取消</AlertDialogCancel>
-            <AlertDialogAction onClick={handleDelete}>确认删除</AlertDialogAction>
+            <AlertDialogAction onClick={handleDelete}>
+              确认删除
+            </AlertDialogAction>
           </AlertDialogFooter>
         </AlertDialogContent>
       </AlertDialog>
diff --git a/web/src/components/profile/password-tab.tsx b/web/src/components/profile/password-tab.tsx
index c38dde6..668ef1b 100644
--- a/web/src/components/profile/password-tab.tsx
+++ b/web/src/components/profile/password-tab.tsx
@@ -1,5 +1,10 @@
 import { useState } from 'react'
-import { Card, CardContent, CardHeader, CardTitle } from '@lumina/components/ui/card'
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from '@lumina/components/ui/card'
 import { Button } from '@lumina/components/ui/button'
 import { Input } from '@lumina/components/ui/input'
 import { Label } from '@lumina/components/ui/label'
diff --git a/web/src/components/profile/profile-tab.tsx b/web/src/components/profile/profile-tab.tsx
index 9f93e1e..e9f8024 100644
--- a/web/src/components/profile/profile-tab.tsx
+++ b/web/src/components/profile/profile-tab.tsx
@@ -1,5 +1,10 @@
 import { useState, useEffect } from 'react'
-import { Card, CardContent, CardHeader, CardTitle } from '@lumina/components/ui/card'
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from '@lumina/components/ui/card'
 import { Button } from '@lumina/components/ui/button'
 import { Input } from '@lumina/components/ui/input'
 import { Label } from '@lumina/components/ui/label'
diff --git a/web/src/components/project/detail-sheet.tsx b/web/src/components/project/detail-sheet.tsx
new file mode 100644
index 0000000..5470036
--- /dev/null
+++ b/web/src/components/project/detail-sheet.tsx
@@ -0,0 +1,242 @@
+import { useState } from 'react'
+import { useNavigate } from '@tanstack/react-router'
+import { BookOpen, Check, Copy, ExternalLink, Pencil } from 'lucide-react'
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetDescription,
+} from '@lumina/components/ui/sheet'
+import { Button } from '@lumina/components/ui/button'
+import { formatDateTime } from '#/lib/format-date'
+import type { ProjectItem } from '#/lib/models/response/project'
+
+interface DetailSheetProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  item: ProjectItem | null
+  wikiStatus?: string
+  pendingPinCount?: number
+  previewStatus?: string
+  onEdit?: (item: ProjectItem) => void
+}
+
+export function ProjectDetailSheet({
+  open,
+  onOpenChange,
+  item,
+  wikiStatus = '未初始化',
+  pendingPinCount = 0,
+  previewStatus = '无活跃沙盒',
+  onEdit,
+}: DetailSheetProps) {
+  const navigate = useNavigate()
+  const [copiedId, setCopiedId] = useState(false)
+
+  if (!item) return null
+
+  const handleCopyId = () => {
+    void navigator.clipboard.writeText(item.id)
+    setCopiedId(true)
+    setTimeout(() => setCopiedId(false), 2000)
+  }
+
+  const handleOpenWiki = () => {
+    onOpenChange(false)
+    void navigate({
+      to: '/console/project/$projectId/repowiki',
+      params: { projectId: item.id },
+    })
+  }
+
+  const handleEdit = () => {
+    onOpenChange(false)
+    if (onEdit) onEdit(item)
+  }
+
+  const matchPaths =
+    item.match_path && item.match_path.length > 0 ? item.match_path : []
+
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <SheetContent
+        side="right"
+        className="w-full rounded-none border-l border-line bg-foam p-0 sm:max-w-lg flex flex-col"
+      >
+        <SheetHeader className="border-b border-line bg-surface-strong px-6 py-5 text-left">
+          <div className="flex items-center gap-2">
+            <span className="size-2 rotate-45 bg-lagoon" />
+            <SheetTitle className="text-base font-semibold text-sea-ink">
+              项目完整概览
+            </SheetTitle>
+          </div>
+          <SheetDescription className="text-xs text-sea-ink-soft">
+            查看项目的标识别名、底层绝对路径映射与资产配置属性
+          </SheetDescription>
+        </SheetHeader>
+
+        <div className="flex-1 overflow-y-auto px-6 py-5 space-y-5 text-[13px]">
+          {/* 项目别名 */}
+          <div className="flex flex-col gap-1.5 border-b border-dashed border-line pb-4">
+            <span className="text-[11px] font-bold uppercase tracking-wider text-lagoon-deep">
+              项目别名 (Alias)
+            </span>
+            <div className="flex items-center gap-2">
+              <span className="font-mono text-sm font-semibold text-sea-ink bg-sand border border-line px-2 py-0.5">
+                {item.alias_name || '未配置'}
+              </span>
+            </div>
+          </div>
+
+          {/* 实际项目全称 */}
+          <div className="flex flex-col gap-1.5 border-b border-dashed border-line pb-4">
+            <span className="text-[11px] font-bold uppercase tracking-wider text-lagoon-deep">
+              实际项目全称 (Name)
+            </span>
+            <span className="text-sm font-semibold text-sea-ink">
+              {item.name}
+            </span>
+          </div>
+
+          {/* 雪花 ID */}
+          <div className="flex flex-col gap-1.5 border-b border-dashed border-line pb-4">
+            <span className="text-[11px] font-bold uppercase tracking-wider text-lagoon-deep">
+              实体雪花 ID
+            </span>
+            <div className="flex items-center justify-between bg-sand border border-line p-2">
+              <span className="font-mono text-xs text-sea-ink select-all">
+                {item.id}
+              </span>
+              <button
+                type="button"
+                onClick={handleCopyId}
+                className="inline-flex items-center gap-1 text-[11px] text-sea-ink-soft hover:text-lagoon transition-colors"
+                title="复制 ID"
+              >
+                {copiedId ? (
+                  <>
+                    <Check className="size-3 text-lagoon" />
+                    <span>已复制</span>
+                  </>
+                ) : (
+                  <>
+                    <Copy className="size-3" />
+                    <span>复制</span>
+                  </>
+                )}
+              </button>
+            </div>
+          </div>
+
+          {/* 项目描述 */}
+          <div className="flex flex-col gap-1.5 border-b border-dashed border-line pb-4">
+            <span className="text-[11px] font-bold uppercase tracking-wider text-lagoon-deep">
+              项目介绍 (Description)
+            </span>
+            <p className="text-xs text-sea-ink-soft leading-relaxed">
+              {item.description || '暂无详细描述'}
+            </p>
+          </div>
+
+          {/* 底层路径映射 MatchPath */}
+          <div className="flex flex-col gap-1.5 border-b border-dashed border-line pb-4">
+            <span className="text-[11px] font-bold uppercase tracking-wider text-lagoon-deep">
+              底层匹配路径 (MatchPath)
+            </span>
+            <p className="text-[11.5px] text-sea-ink-soft">
+              Agent 与 MCP 将通过以下本地绝对路径或工作区相对路径自动寻址该项目：
+            </p>
+            {matchPaths.length > 0 ? (
+              <div className="space-y-1.5 mt-1">
+                {matchPaths.map((path) => (
+                  <div
+                    key={path}
+                    className="font-mono text-xs bg-sand border border-line px-2.5 py-1.5 text-sea-ink break-all select-all"
+                  >
+                    {path}
+                  </div>
+                ))}
+              </div>
+            ) : (
+              <div className="font-mono text-xs bg-sand border border-dashed border-line px-2.5 py-2 text-sea-ink-soft">
+                未配置底层路径映射
+              </div>
+            )}
+          </div>
+
+          {/* 关联资产概览 (真实动态传入) */}
+          <div className="flex flex-col gap-1.5 border-b border-dashed border-line pb-4">
+            <span className="text-[11px] font-bold uppercase tracking-wider text-lagoon-deep">
+              核心关联资产状态
+            </span>
+            <div className="grid grid-cols-3 gap-2 mt-1">
+              <div className="bg-sand border border-line p-2.5 flex flex-col gap-1">
+                <span className="text-[10px] uppercase font-bold text-sea-ink-soft">RepoWiki</span>
+                <span className="font-mono text-xs font-semibold text-sea-ink truncate" title={wikiStatus}>
+                  {wikiStatus}
+                </span>
+              </div>
+              <div className="bg-sand border border-line p-2.5 flex flex-col gap-1">
+                <span className="text-[10px] uppercase font-bold text-sea-ink-soft">Pin 待办</span>
+                <span className="font-mono text-xs font-semibold text-sea-ink">
+                  {pendingPinCount} 待办
+                </span>
+              </div>
+              <div className="bg-sand border border-line p-2.5 flex flex-col gap-1">
+                <span className="text-[10px] uppercase font-bold text-sea-ink-soft">Preview</span>
+                <span className="font-mono text-xs font-semibold text-sea-ink truncate" title={previewStatus}>
+                  {previewStatus}
+                </span>
+              </div>
+            </div>
+          </div>
+
+          {/* 资产与时间信息 */}
+          <div className="space-y-2 text-xs text-sea-ink-soft">
+            <div className="flex justify-between py-1 border-b border-line">
+              <span>工作空间 ID</span>
+              <span className="font-mono text-sea-ink">
+                {item.workspace_id}
+              </span>
+            </div>
+            <div className="flex justify-between py-1 border-b border-line">
+              <span>创建时间</span>
+              <span className="font-mono text-sea-ink">
+                {formatDateTime(item.created_at)}
+              </span>
+            </div>
+            <div className="flex justify-between py-1 border-b border-line">
+              <span>更新时间</span>
+              <span className="font-mono text-sea-ink">
+                {formatDateTime(item.updated_at)}
+              </span>
+            </div>
+          </div>
+        </div>
+
+        {/* 底部操作工具栏 */}
+        <div className="border-t border-line bg-surface-strong px-6 py-4 flex items-center justify-between gap-3">
+          <Button
+            type="button"
+            variant="outline"
+            className="rounded-none border-line text-sea-ink hover:bg-chip-bg flex-1"
+            onClick={handleEdit}
+          >
+            <Pencil className="mr-1.5 size-3.5" />
+            编辑配置
+          </Button>
+          <Button
+            type="button"
+            className="rounded-none bg-lagoon text-foam hover:bg-lagoon-deep flex-1"
+            onClick={handleOpenWiki}
+          >
+            <BookOpen className="mr-1.5 size-3.5" />
+            知识库 Wiki
+            <ExternalLink className="ml-1 size-3" />
+          </Button>
+        </div>
+      </SheetContent>
+    </Sheet>
+  )
+}
diff --git a/web/src/components/qa/question-card.tsx b/web/src/components/qa/question-card.tsx
index c98409b..fc2b456 100644
--- a/web/src/components/qa/question-card.tsx
+++ b/web/src/components/qa/question-card.tsx
@@ -1,15 +1,32 @@
-import { Card, CardContent, CardHeader, CardTitle } from '@lumina/components/ui/card'
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from '@lumina/components/ui/card'
 import { Badge } from '@lumina/components/ui/badge'
-import type { QuestionSummary, SupplementItem } from '#/lib/models/response/qa-admin'
-import { Markdown, proseHint, SandboxFrame, PreviewSupplement } from '#/components/interact/primitives'
-import { formatAnswer, type AnswerOption } from '#/lib/format-answer'
+import type {
+  QuestionSummary,
+  SupplementItem,
+} from '#/lib/models/response/qa-admin'
+import {
+  Markdown,
+  proseHint,
+  SandboxFrame,
+  PreviewSupplement,
+} from '#/components/interact/primitives'
+import { formatAnswer  } from '#/lib/format-answer'
+import type {AnswerOption} from '#/lib/format-answer';
 import { formatDateTime } from '#/lib/format-date'
 
 interface QuestionCardProps {
   question: QuestionSummary
 }
 
-const statusVariantMap: Record<QuestionSummary['status'], 'default' | 'outline' | 'destructive' | 'secondary'> = {
+const statusVariantMap: Record<
+  QuestionSummary['status'],
+  'default' | 'outline' | 'destructive' | 'secondary'
+> = {
   answered: 'default',
   skipped: 'outline',
   cancelled: 'destructive',
@@ -55,7 +72,9 @@ export function QuestionCard({ question }: QuestionCardProps) {
         {question.status === 'answered' && question.answer != null && (
           <div>
             <h4 className="text-sm font-semibold mb-1">回答</h4>
-            <p className="text-sm text-sea-ink">{formatAnswer(question.answer, options)}</p>
+            <p className="text-sm text-sea-ink">
+              {formatAnswer(question.answer, options)}
+            </p>
           </div>
         )}
 
@@ -68,14 +87,25 @@ export function QuestionCard({ question }: QuestionCardProps) {
                 const supplements = optionSupplements.get(opt.id) ?? []
                 return (
                   <li key={opt.id} className="text-sm">
-                    <span className="font-medium text-sea-ink">{opt.label}</span>
+                    <span className="font-medium text-sea-ink">
+                      {opt.label}
+                    </span>
                     {opt.description && (
-                      <span className="text-sea-ink-soft"> — {opt.description}</span>
+                      <span className="text-sea-ink-soft">
+                        {' '}
+                        — {opt.description}
+                      </span>
                     )}
                     {supplements.map((s) => (
-                      <div key={s.id} className="mt-1.5 rounded-md bg-muted p-2.5">
+                      <div
+                        key={s.id}
+                        className="mt-1.5 rounded-md bg-muted p-2.5"
+                      >
                         {s.content_type === 'html' ? (
-                          <SandboxFrame content={s.content} className="w-full" />
+                          <SandboxFrame
+                            content={s.content}
+                            className="w-full"
+                          />
                         ) : s.content_type === 'preview' ? (
                           <PreviewSupplement content={s.content} />
                         ) : (
@@ -117,7 +147,8 @@ export function QuestionCard({ question }: QuestionCardProps) {
 
         <div className="text-xs text-muted-foreground">
           创建: {formatDateTime(question.created_at)}
-          {question.answered_at && ` | 回答: ${formatDateTime(question.answered_at)}`}
+          {question.answered_at &&
+            ` | 回答: ${formatDateTime(question.answered_at)}`}
         </div>
       </CardContent>
     </Card>
diff --git a/web/src/components/qa/session-detail-drawer.tsx b/web/src/components/qa/session-detail-drawer.tsx
index 4798506..8c655bb 100644
--- a/web/src/components/qa/session-detail-drawer.tsx
+++ b/web/src/components/qa/session-detail-drawer.tsx
@@ -1,4 +1,10 @@
-import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from '@lumina/components/ui/sheet'
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from '@lumina/components/ui/sheet'
 import { useSessionDetail } from '#/hooks/useQaAdmin'
 import { SessionDetail } from './session-detail'
 import { QuestionCard } from './question-card'
@@ -9,14 +15,25 @@ interface SessionDetailDrawerProps {
   onClose: () => void
 }
 
-export function SessionDetailDrawer({ sessionId, onClose }: SessionDetailDrawerProps) {
+export function SessionDetailDrawer({
+  sessionId,
+  onClose,
+}: SessionDetailDrawerProps) {
   // 懒加载：仅当抽屉打开（sessionId 非空）时才发起详情请求
   const { data, isLoading } = useSessionDetail(sessionId ?? '')
   const session = data?.data
 
   return (
-    <Sheet open={!!sessionId} onOpenChange={(open) => { if (!open) onClose() }}>
-      <SheetContent side="right" className="w-[min(560px,92vw)] gap-0 border-line sm:max-w-[560px]">
+    <Sheet
+      open={!!sessionId}
+      onOpenChange={(open) => {
+        if (!open) onClose()
+      }}
+    >
+      <SheetContent
+        side="right"
+        className="w-[min(560px,92vw)] gap-0 border-line sm:max-w-[560px]"
+      >
         <SheetHeader className="border-b border-line px-6 py-4">
           <SheetTitle>会话详情</SheetTitle>
           <SheetDescription>查看该会话的问题、选项与补充内容</SheetDescription>
@@ -24,7 +41,9 @@ export function SessionDetailDrawer({ sessionId, onClose }: SessionDetailDrawerP
 
         <div className="flex-1 overflow-y-auto px-6 py-5">
           {isLoading ? (
-            <div className="py-12 text-center text-muted-foreground">加载中…</div>
+            <div className="py-12 text-center text-muted-foreground">
+              加载中…
+            </div>
           ) : session ? (
             <div className="space-y-6">
               <SessionDetail session={session} />
@@ -37,13 +56,17 @@ export function SessionDetailDrawer({ sessionId, onClose }: SessionDetailDrawerP
                     <QuestionCard key={q.id} question={q} />
                   ))}
                   {(!session.questions || session.questions.length === 0) && (
-                    <p className="py-8 text-center text-muted-foreground">暂无问题</p>
+                    <p className="py-8 text-center text-muted-foreground">
+                      暂无问题
+                    </p>
                   )}
                 </div>
               </div>
             </div>
           ) : (
-            <div className="py-12 text-center text-muted-foreground">会话不存在</div>
+            <div className="py-12 text-center text-muted-foreground">
+              会话不存在
+            </div>
           )}
         </div>
       </SheetContent>
diff --git a/web/src/components/qa/session-detail.tsx b/web/src/components/qa/session-detail.tsx
index b4c28ae..5426f6a 100644
--- a/web/src/components/qa/session-detail.tsx
+++ b/web/src/components/qa/session-detail.tsx
@@ -1,4 +1,9 @@
-import { Card, CardContent, CardHeader, CardTitle } from '@lumina/components/ui/card'
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from '@lumina/components/ui/card'
 import { Badge } from '@lumina/components/ui/badge'
 import { formatDateTime } from '#/lib/format-date'
 import type { SessionDetailResponse } from '#/lib/models/response/qa-admin'
@@ -8,8 +13,18 @@ interface SessionDetailProps {
 }
 
 export function SessionDetail({ session }: SessionDetailProps) {
-  const statusVariant = session.status === 'active' ? 'default' : session.status === 'expired' ? 'outline' : 'destructive'
-  const statusLabel = session.status === 'active' ? '活跃' : session.status === 'expired' ? '已过期' : '已删除'
+  const statusVariant =
+    session.status === 'active'
+      ? 'default'
+      : session.status === 'expired'
+        ? 'outline'
+        : 'destructive'
+  const statusLabel =
+    session.status === 'active'
+      ? '活跃'
+      : session.status === 'expired'
+        ? '已过期'
+        : '已删除'
   const typeLabel = session.type === 'permanent' ? '永久' : '临时'
 
   return (
@@ -29,11 +44,15 @@ export function SessionDetail({ session }: SessionDetailProps) {
           </div>
           <div>
             <span className="text-muted-foreground">类型</span>
-            <p><Badge variant="secondary">{typeLabel}</Badge></p>
+            <p>
+              <Badge variant="secondary">{typeLabel}</Badge>
+            </p>
           </div>
           <div>
             <span className="text-muted-foreground">状态</span>
-            <p><Badge variant={statusVariant}>{statusLabel}</Badge></p>
+            <p>
+              <Badge variant={statusVariant}>{statusLabel}</Badge>
+            </p>
           </div>
           <div>
             <span className="text-muted-foreground">在线设备</span>
@@ -45,7 +64,11 @@ export function SessionDetail({ session }: SessionDetailProps) {
           </div>
           <div>
             <span className="text-muted-foreground">过期时间</span>
-            <p className="font-medium">{session.expires_at ? formatDateTime(session.expires_at) : '永久有效'}</p>
+            <p className="font-medium">
+              {session.expires_at
+                ? formatDateTime(session.expires_at)
+                : '永久有效'}
+            </p>
           </div>
         </div>
       </CardContent>
diff --git a/web/src/components/repowiki/analyze-dialog.tsx b/web/src/components/repowiki/analyze-dialog.tsx
index 30640d7..ba27434 100644
--- a/web/src/components/repowiki/analyze-dialog.tsx
+++ b/web/src/components/repowiki/analyze-dialog.tsx
@@ -1,12 +1,12 @@
 import { useState } from 'react'
 import {
-	Dialog,
-	DialogTrigger,
-	DialogContent,
-	DialogHeader,
-	DialogTitle,
-	DialogDescription,
-	DialogFooter,
+  Dialog,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
 } from '@lumina/components/ui/dialog'
 import { Textarea } from '@lumina/components/ui/textarea'
 import { Button } from '@lumina/components/ui/button'
@@ -14,79 +14,91 @@ import { Loader2, Play, RefreshCw } from 'lucide-react'
 import { useRepoWikiAnalyze, useRepoWikiUpdate } from '#/hooks/useRepoWiki'
 
 interface AnalyzeDialogProps {
-	configId: string
-	mode: 'analyze' | 'update'
-	trigger?: React.ReactNode
-	open?: boolean
-	onOpenChange?: (open: boolean) => void
+  configId: string
+  mode: 'analyze' | 'update'
+  trigger?: React.ReactNode
+  open?: boolean
+  onOpenChange?: (open: boolean) => void
 }
 
-export function AnalyzeDialog({ configId, mode, trigger, open, onOpenChange }: AnalyzeDialogProps) {
-	const [extraPrompt, setExtraPrompt] = useState('')
-	const [internalOpen, setInternalOpen] = useState(false)
+export function AnalyzeDialog({
+  configId,
+  mode,
+  trigger,
+  open,
+  onOpenChange,
+}: AnalyzeDialogProps) {
+  const [extraPrompt, setExtraPrompt] = useState('')
+  const [internalOpen, setInternalOpen] = useState(false)
 
-	const isControlled = open !== undefined
-	const isOpen = isControlled ? open : internalOpen
-	const setOpen = isControlled ? (onOpenChange ?? (() => {})) : setInternalOpen
+  const isControlled = open !== undefined
+  const isOpen = isControlled ? open : internalOpen
+  const setOpen = isControlled ? (onOpenChange ?? (() => {})) : setInternalOpen
 
-	const analyzeMutation = useRepoWikiAnalyze(configId)
-	const updateMutation = useRepoWikiUpdate(configId)
-	const mutation = mode === 'analyze' ? analyzeMutation : updateMutation
-	const isPending = mutation.isPending
+  const analyzeMutation = useRepoWikiAnalyze(configId)
+  const updateMutation = useRepoWikiUpdate(configId)
+  const mutation = mode === 'analyze' ? analyzeMutation : updateMutation
+  const isPending = mutation.isPending
 
-	const handleConfirm = () => {
-		mutation.mutate(
-			{ extra_prompt: extraPrompt.trim() || undefined },
-			{
-				onSuccess: () => {
-					setOpen(false)
-					setExtraPrompt('')
-				},
-			},
-		)
-	}
+  const handleConfirm = () => {
+    mutation.mutate(
+      { extra_prompt: extraPrompt.trim() || undefined },
+      {
+        onSuccess: () => {
+          setOpen(false)
+          setExtraPrompt('')
+        },
+      },
+    )
+  }
 
-	const titleText = mode === 'analyze' ? '开始分析' : '增量更新'
-	const descText =
-		mode === 'analyze'
-			? '这将触发一次完整的仓库分析流程，可能需要较长时间。'
-			: '将基于已有分析结果进行增量更新。'
-	const confirmText = mode === 'analyze' ? '开始分析' : '增量更新'
-	const Icon = mode === 'analyze' ? Play : RefreshCw
+  const titleText = mode === 'analyze' ? '开始分析' : '增量更新'
+  const descText =
+    mode === 'analyze'
+      ? '这将触发一次完整的仓库分析流程，可能需要较长时间。'
+      : '将基于已有分析结果进行增量更新。'
+  const confirmText = mode === 'analyze' ? '开始分析' : '增量更新'
+  const Icon = mode === 'analyze' ? Play : RefreshCw
 
-	return (
-		<Dialog open={isOpen} onOpenChange={setOpen}>
-			{trigger && <DialogTrigger asChild>{trigger}</DialogTrigger>}
-			<DialogContent>
-				<DialogHeader>
-					<DialogTitle>{titleText}</DialogTitle>
-					<DialogDescription>{descText}</DialogDescription>
-				</DialogHeader>
-				<div className="grid gap-2 py-4">
-					<label className="text-sm font-medium">额外提示词（可选）</label>
-					<Textarea
-						value={extraPrompt}
-						onChange={(e) => setExtraPrompt(e.target.value)}
-						placeholder="为本次分析添加额外指示，如「重点关注鉴权模块」..."
-						rows={4}
-						disabled={isPending}
-					/>
-					<p className="text-xs text-muted-foreground">此提示词仅在本次分析生效，不会持久化。</p>
-				</div>
-				<DialogFooter>
-					<Button variant="outline" onClick={() => setOpen(false)} disabled={isPending}>
-						取消
-					</Button>
-					<Button onClick={handleConfirm} disabled={isPending}>
-						{isPending ? (
-							<Loader2 className="mr-2 size-4 animate-spin" />
-						) : (
-							<Icon className="mr-2 size-4" />
-						)}
-						{confirmText}
-					</Button>
-				</DialogFooter>
-			</DialogContent>
-		</Dialog>
-	)
+  return (
+    <Dialog open={isOpen} onOpenChange={setOpen}>
+      {trigger && <DialogTrigger asChild>{trigger}</DialogTrigger>}
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>{titleText}</DialogTitle>
+          <DialogDescription>{descText}</DialogDescription>
+        </DialogHeader>
+        <div className="grid gap-2 py-4">
+          <label className="text-sm font-medium">额外提示词（可选）</label>
+          <Textarea
+            value={extraPrompt}
+            onChange={(e) => setExtraPrompt(e.target.value)}
+            placeholder="为本次分析添加额外指示，如「重点关注鉴权模块」..."
+            rows={4}
+            disabled={isPending}
+          />
+          <p className="text-xs text-muted-foreground">
+            此提示词仅在本次分析生效，不会持久化。
+          </p>
+        </div>
+        <DialogFooter>
+          <Button
+            variant="outline"
+            onClick={() => setOpen(false)}
+            disabled={isPending}
+          >
+            取消
+          </Button>
+          <Button onClick={handleConfirm} disabled={isPending}>
+            {isPending ? (
+              <Loader2 className="mr-2 size-4 animate-spin" />
+            ) : (
+              <Icon className="mr-2 size-4" />
+            )}
+            {confirmText}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
 }
diff --git a/web/src/components/repowiki/config-form.tsx b/web/src/components/repowiki/config-form.tsx
index 3d48088..f3bd069 100644
--- a/web/src/components/repowiki/config-form.tsx
+++ b/web/src/components/repowiki/config-form.tsx
@@ -4,137 +4,151 @@ import { Button } from '@lumina/components/ui/button'
 import { Input } from '@lumina/components/ui/input'
 import { Label } from '@lumina/components/ui/label'
 import {
-	Select,
-	SelectContent,
-	SelectItem,
-	SelectTrigger,
-	SelectValue,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
 } from '@lumina/components/ui/select'
 import type { CreateRepoWikiConfigRequest } from '#/lib/models/request/repowiki'
 import { useSshKeyList } from '#/hooks/useSshKey'
 
 interface ConfigFormProps {
-	onSubmit: (data: CreateRepoWikiConfigRequest) => void
-	isPending?: boolean
-	onCancel?: () => void
-	projectId?: string
+  onSubmit: (data: CreateRepoWikiConfigRequest) => void
+  isPending?: boolean
+  onCancel?: () => void
+  projectId?: string
 }
 
-export function ConfigForm({ onSubmit, isPending, onCancel, projectId }: ConfigFormProps) {
-	const [repoUrl, setRepoUrl] = useState('')
-	const [defaultBranch, setDefaultBranch] = useState('main')
-	const [defaultLanguage, setDefaultLanguage] = useState('zh')
-	const [sshKeyId, setSshKeyId] = useState('__none__')
-	const [wikiPassword, setWikiPassword] = useState('')
+export function ConfigForm({
+  onSubmit,
+  isPending,
+  onCancel,
+  projectId,
+}: ConfigFormProps) {
+  const [repoUrl, setRepoUrl] = useState('')
+  const [defaultBranch, setDefaultBranch] = useState('main')
+  const [defaultLanguage, setDefaultLanguage] = useState('zh')
+  const [sshKeyId, setSshKeyId] = useState('__none__')
+  const [wikiPassword, setWikiPassword] = useState('')
 
-	const { data: sshData } = useSshKeyList()
-	const sshKeys = sshData?.data?.items ?? []
+  const { data: sshData } = useSshKeyList()
+  const sshKeys = sshData?.data?.items ?? []
 
-	const handleSubmit = (e: React.FormEvent) => {
-		e.preventDefault()
-		if (!repoUrl.trim()) return
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+    if (!repoUrl.trim()) return
 
-		onSubmit({
-			repo_url: repoUrl.trim(),
-			default_branch: defaultBranch.trim() || undefined,
-			default_language: defaultLanguage.trim() || undefined,
-			ssh_key_id: sshKeyId && sshKeyId !== '__none__' ? sshKeyId : undefined,
-			wiki_password: wikiPassword.trim() || undefined,
-			project_id: projectId ?? '',
-		})
-	}
+    onSubmit({
+      repo_url: repoUrl.trim(),
+      default_branch: defaultBranch.trim() || undefined,
+      default_language: defaultLanguage.trim() || undefined,
+      ssh_key_id: sshKeyId && sshKeyId !== '__none__' ? sshKeyId : undefined,
+      wiki_password: wikiPassword.trim() || undefined,
+      project_id: projectId ?? '',
+    })
+  }
 
-	return (
-		<form onSubmit={handleSubmit} className="grid gap-4 py-4">
-			{/* 仓库地址 */}
-			<div className="grid gap-2">
-				<Label htmlFor="rw-url">仓库地址 *</Label>
-				<Input
-					id="rw-url"
-					value={repoUrl}
-					onChange={(e) => setRepoUrl(e.target.value)}
-					placeholder="https://github.com/owner/repo.git 或 git@github.com:owner/repo.git"
-					disabled={isPending}
-				/>
-			</div>
+  return (
+    <form onSubmit={handleSubmit} className="grid gap-4 py-4">
+      {/* 仓库地址 */}
+      <div className="grid gap-2">
+        <Label htmlFor="rw-url">仓库地址 *</Label>
+        <Input
+          id="rw-url"
+          value={repoUrl}
+          onChange={(e) => setRepoUrl(e.target.value)}
+          placeholder="https://github.com/owner/repo.git 或 git@github.com:owner/repo.git"
+          disabled={isPending}
+        />
+      </div>
 
-			{/* 默认分支 & 默认语言 - 两列布局 */}
-			<div className="grid grid-cols-2 gap-4">
-				<div className="grid gap-2">
-					<Label htmlFor="rw-branch">默认分支</Label>
-					<Input
-						id="rw-branch"
-						value={defaultBranch}
-						onChange={(e) => setDefaultBranch(e.target.value)}
-						placeholder="main"
-						disabled={isPending}
-					/>
-				</div>
-				<div className="grid gap-2">
-					<Label htmlFor="rw-lang">默认语言</Label>
-					<Input
-						id="rw-lang"
-						value={defaultLanguage}
-						onChange={(e) => setDefaultLanguage(e.target.value)}
-						placeholder="zh"
-						disabled={isPending}
-					/>
-				</div>
-			</div>
+      {/* 默认分支 & 默认语言 - 两列布局 */}
+      <div className="grid grid-cols-2 gap-4">
+        <div className="grid gap-2">
+          <Label htmlFor="rw-branch">默认分支</Label>
+          <Input
+            id="rw-branch"
+            value={defaultBranch}
+            onChange={(e) => setDefaultBranch(e.target.value)}
+            placeholder="main"
+            disabled={isPending}
+          />
+        </div>
+        <div className="grid gap-2">
+          <Label htmlFor="rw-lang">默认语言</Label>
+          <Input
+            id="rw-lang"
+            value={defaultLanguage}
+            onChange={(e) => setDefaultLanguage(e.target.value)}
+            placeholder="zh"
+            disabled={isPending}
+          />
+        </div>
+      </div>
 
-			{/* SSH 密钥选择 */}
-			<div className="grid gap-2">
-				<Label>SSH 密钥</Label>
-				<Select value={sshKeyId} onValueChange={setSshKeyId} disabled={isPending}>
-					<SelectTrigger className="w-full">
-						<SelectValue placeholder="不使用 SSH 密钥" />
-					</SelectTrigger>
-					<SelectContent>
-						<SelectItem value="__none__">不使用 SSH 密钥</SelectItem>
-						{sshKeys.map((key) => (
-							<SelectItem key={key.id} value={key.id}>
-								{key.name}
-								{key.description ? ` (${key.description})` : ''}
-							</SelectItem>
-						))}
-					</SelectContent>
-				</Select>
-				<p className="text-xs text-muted-foreground">
-					用于克隆私有仓库（可选）·{' '}
-					<Link to="/console/ssh" className="underline hover:text-foreground">
-						管理 SSH 密钥
-					</Link>
-				</p>
-			</div>
+      {/* SSH 密钥选择 */}
+      <div className="grid gap-2">
+        <Label>SSH 密钥</Label>
+        <Select
+          value={sshKeyId}
+          onValueChange={setSshKeyId}
+          disabled={isPending}
+        >
+          <SelectTrigger className="w-full">
+            <SelectValue placeholder="不使用 SSH 密钥" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="__none__">不使用 SSH 密钥</SelectItem>
+            {sshKeys.map((key) => (
+              <SelectItem key={key.id} value={key.id}>
+                {key.name}
+                {key.description ? ` (${key.description})` : ''}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+        <p className="text-xs text-muted-foreground">
+          用于克隆私有仓库（可选）·{' '}
+          <Link to="/console/ssh" className="underline hover:text-foreground">
+            管理 SSH 密钥
+          </Link>
+        </p>
+      </div>
 
-			{/* Wiki 密码 */}
-			<div className="grid gap-2">
-				<Label htmlFor="rw-password">Wiki 密码</Label>
-				<Input
-					id="rw-password"
-					type="password"
-					value={wikiPassword}
-					onChange={(e) => setWikiPassword(e.target.value)}
-					placeholder="访问 Wiki 的密码（可选）"
-					disabled={isPending}
-				/>
-			</div>
+      {/* Wiki 密码 */}
+      <div className="grid gap-2">
+        <Label htmlFor="rw-password">Wiki 密码</Label>
+        <Input
+          id="rw-password"
+          type="password"
+          value={wikiPassword}
+          onChange={(e) => setWikiPassword(e.target.value)}
+          placeholder="访问 Wiki 的密码（可选）"
+          disabled={isPending}
+        />
+      </div>
 
-			{/* 操作按钮 */}
-			<div className="flex justify-end gap-2 pt-2">
-				{onCancel && (
-					<Button type="button" variant="outline" onClick={onCancel} disabled={isPending}>
-						取消
-					</Button>
-				)}
-				<Button
-					type="submit"
-					disabled={!repoUrl.trim() || isPending}
-					className="bg-lagoon text-foam hover:bg-lagoon-deep"
-				>
-					{isPending ? '提交中...' : '创建配置'}
-				</Button>
-			</div>
-		</form>
-	)
+      {/* 操作按钮 */}
+      <div className="flex justify-end gap-2 pt-2">
+        {onCancel && (
+          <Button
+            type="button"
+            variant="outline"
+            onClick={onCancel}
+            disabled={isPending}
+          >
+            取消
+          </Button>
+        )}
+        <Button
+          type="submit"
+          disabled={!repoUrl.trim() || isPending}
+          className="bg-lagoon text-foam hover:bg-lagoon-deep"
+        >
+          {isPending ? '提交中...' : '创建配置'}
+        </Button>
+      </div>
+    </form>
+  )
 }
diff --git a/web/src/components/repowiki/status-badge.tsx b/web/src/components/repowiki/status-badge.tsx
index 2b92ee7..6ea3e1b 100644
--- a/web/src/components/repowiki/status-badge.tsx
+++ b/web/src/components/repowiki/status-badge.tsx
@@ -3,87 +3,90 @@ import { Loader2 } from 'lucide-react'
 import type { LucideIcon } from 'lucide-react'
 
 interface StatusConfig {
-	label: string
-	variant: 'default' | 'secondary' | 'destructive' | 'outline'
-	className: string
-	icon?: LucideIcon
-	spinning?: boolean
+  label: string
+  variant: 'default' | 'secondary' | 'destructive' | 'outline'
+  className: string
+  icon?: LucideIcon
+  spinning?: boolean
 }
 
 const STATUS_MAP: Record<string, StatusConfig> = {
-	pending: {
-		label: '等待中',
-		variant: 'outline',
-		className: 'border-muted-foreground/30 text-muted-foreground',
-	},
-	cloning: {
-		label: '克隆中',
-		variant: 'default',
-		className: 'bg-blue-50 text-blue-700 border-blue-200 dark:bg-blue-950 dark:text-blue-300 dark:border-blue-800',
-		icon: Loader2,
-		spinning: true,
-	},
-	scanning: {
-		label: '扫描中',
-		variant: 'default',
-		className: 'bg-blue-50 text-blue-700 border-blue-200 dark:bg-blue-950 dark:text-blue-300 dark:border-blue-800',
-		icon: Loader2,
-		spinning: true,
-	},
-	analyzing: {
-		label: '分析中',
-		variant: 'default',
-		className: 'bg-blue-50 text-blue-700 border-blue-200 dark:bg-blue-950 dark:text-blue-300 dark:border-blue-800',
-		icon: Loader2,
-		spinning: true,
-	},
-	assembling: {
-		label: '组装中',
-		variant: 'default',
-		className: 'bg-blue-50 text-blue-700 border-blue-200 dark:bg-blue-950 dark:text-blue-300 dark:border-blue-800',
-		icon: Loader2,
-		spinning: true,
-	},
-	completed: {
-		label: '已完成',
-		variant: 'default',
-		className: 'bg-emerald-50 text-emerald-700 border-emerald-200 dark:bg-emerald-950 dark:text-emerald-300 dark:border-emerald-800',
-	},
-	failed: {
-		label: '失败',
-		variant: 'destructive',
-		className: '',
-	},
-	cancelled: {
-		label: '已取消',
-		variant: 'outline',
-		className: 'border-muted-foreground/30 text-muted-foreground',
-	},
+  pending: {
+    label: '等待中',
+    variant: 'outline',
+    className: 'border-muted-foreground/30 text-muted-foreground',
+  },
+  cloning: {
+    label: '克隆中',
+    variant: 'default',
+    className:
+      'bg-blue-50 text-blue-700 border-blue-200 dark:bg-blue-950 dark:text-blue-300 dark:border-blue-800',
+    icon: Loader2,
+    spinning: true,
+  },
+  scanning: {
+    label: '扫描中',
+    variant: 'default',
+    className:
+      'bg-blue-50 text-blue-700 border-blue-200 dark:bg-blue-950 dark:text-blue-300 dark:border-blue-800',
+    icon: Loader2,
+    spinning: true,
+  },
+  analyzing: {
+    label: '分析中',
+    variant: 'default',
+    className:
+      'bg-blue-50 text-blue-700 border-blue-200 dark:bg-blue-950 dark:text-blue-300 dark:border-blue-800',
+    icon: Loader2,
+    spinning: true,
+  },
+  assembling: {
+    label: '组装中',
+    variant: 'default',
+    className:
+      'bg-blue-50 text-blue-700 border-blue-200 dark:bg-blue-950 dark:text-blue-300 dark:border-blue-800',
+    icon: Loader2,
+    spinning: true,
+  },
+  completed: {
+    label: '已完成',
+    variant: 'default',
+    className:
+      'bg-emerald-50 text-emerald-700 border-emerald-200 dark:bg-emerald-950 dark:text-emerald-300 dark:border-emerald-800',
+  },
+  failed: {
+    label: '失败',
+    variant: 'destructive',
+    className: '',
+  },
+  cancelled: {
+    label: '已取消',
+    variant: 'outline',
+    className: 'border-muted-foreground/30 text-muted-foreground',
+  },
 }
 
 interface StatusBadgeProps {
-	status: string
-	className?: string
+  status: string
+  className?: string
 }
 
 export function StatusBadge({ status, className }: StatusBadgeProps) {
-	const config = STATUS_MAP[status] ?? {
-		label: status,
-		variant: 'outline' as const,
-		className: '',
-	}
+  const config = STATUS_MAP[status] ?? {
+    label: status,
+    variant: 'outline' as const,
+    className: '',
+  }
 
-	const Icon = config.icon
+  const Icon = config.icon
 
-	return (
-		<Badge
-			variant={config.variant}
-			className={`gap-1.5 ${config.className} ${className ?? ''}`}
-		>
-			{Icon && config.spinning && (
-				<Icon className="size-3 animate-spin" />
-			)}
-			{config.label}
-		</Badge>
-	)
+  return (
+    <Badge
+      variant={config.variant}
+      className={`gap-1.5 ${config.className} ${className ?? ''}`}
+    >
+      {Icon && config.spinning && <Icon className="size-3 animate-spin" />}
+      {config.label}
+    </Badge>
+  )
 }
diff --git a/web/src/components/repowiki/version-list.tsx b/web/src/components/repowiki/version-list.tsx
index 9f96c1e..45d19a7 100644
--- a/web/src/components/repowiki/version-list.tsx
+++ b/web/src/components/repowiki/version-list.tsx
@@ -1,411 +1,452 @@
 import { useState } from 'react'
 import { Button } from '@lumina/components/ui/button'
 import {
-	Table,
-	TableBody,
-	TableCell,
-	TableHead,
-	TableHeader,
-	TableRow,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
 } from '@lumina/components/ui/table'
 import {
-	AlertDialog,
-	AlertDialogAction,
-	AlertDialogCancel,
-	AlertDialogContent,
-	AlertDialogDescription,
-	AlertDialogFooter,
-	AlertDialogHeader,
-	AlertDialogTitle,
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
 } from '@lumina/components/ui/alert-dialog'
 import { SkeletonTable } from '#/components/skeleton-table'
 import { StatusBadge } from '#/components/repowiki/status-badge'
 import { DataTablePagination } from '#/components/data-table-pagination'
 import {
-	useRepoWikiVersions,
-	useRepoWikiAnalyze,
-	useRepoWikiUpdate,
-	useUpdateSelectedVersion,
-	ACTIVE_STATUSES,
+  useRepoWikiVersions,
+  useRepoWikiAnalyze,
+  useRepoWikiUpdate,
+  useUpdateSelectedVersion,
+  ACTIVE_STATUSES,
 } from '#/hooks/useRepoWiki'
 import { buildWikiReaderUrl } from '#/lib/utils'
 import { formatDateTime } from '#/lib/format-date'
 import {
-	Play,
-	RefreshCw,
-	ChevronDown,
-	ChevronRight,
-	Clock,
-	Loader2,
-	ExternalLink,
-	Check,
+  Play,
+  RefreshCw,
+  ChevronDown,
+  ChevronRight,
+  Clock,
+  Loader2,
+  ExternalLink,
+  Check,
 } from 'lucide-react'
 import { toast } from 'sonner'
 
 // ── 阶段配置 ──
 
 const STAGE_LABELS: Record<string, string> = {
-	scan: '扫描',
-	pass1: '分析 Pass 1',
-	pass2: '分析 Pass 2',
-	pass3: '分析 Pass 3',
-	pass4: '分析 Pass 4',
-	assemble: '组装',
+  scan: '扫描',
+  pass1: '分析 Pass 1',
+  pass2: '分析 Pass 2',
+  pass3: '分析 Pass 3',
+  pass4: '分析 Pass 4',
+  assemble: '组装',
 }
 
 const STAGE_ORDER = ['scan', 'pass1', 'pass2', 'pass3', 'pass4', 'assemble']
 
 // ── 阶段进度指示器 ──
 
-function StageProgress({ currentStage, durationMs }: { currentStage?: string; durationMs?: number }) {
-	if (!currentStage && !durationMs) return <span className="text-xs text-muted-foreground">—</span>
-
-	const currentIndex = currentStage ? STAGE_ORDER.indexOf(currentStage) : -1
-	const totalStages = STAGE_ORDER.length
-	const progress = currentIndex >= 0 ? ((currentIndex + 1) / totalStages) * 100 : 0
-
-	return (
-		<div className="flex items-center gap-3 text-xs text-muted-foreground">
-			{currentStage && (
-				<div className="flex items-center gap-1.5">
-					<span className="font-medium text-foreground">当前阶段:</span>
-					<span className="text-lagoon font-medium">{STAGE_LABELS[currentStage] || currentStage}</span>
-				</div>
-			)}
-			{durationMs !== undefined && durationMs > 0 && (
-				<div className="flex items-center gap-1">
-					<Clock className="size-3" />
-					<span>{(durationMs / 1000).toFixed(1)}s</span>
-				</div>
-			)}
-			{currentIndex >= 0 && (
-				<div className="flex items-center gap-2 flex-1 max-w-[120px]">
-					<div className="h-1.5 flex-1 rounded-full bg-muted overflow-hidden">
-						<div
-							className="h-full bg-lagoon rounded-full transition-all duration-500 ease-out"
-							style={{ width: `${progress}%` }}
-						/>
-					</div>
-					<span className="text-[10px] tabular-nums">{Math.round(progress)}%</span>
-				</div>
-			)}
-		</div>
-	)
+function StageProgress({
+  currentStage,
+  durationMs,
+}: {
+  currentStage?: string
+  durationMs?: number
+}) {
+  if (!currentStage && !durationMs)
+    return <span className="text-xs text-muted-foreground">—</span>
+
+  const currentIndex = currentStage ? STAGE_ORDER.indexOf(currentStage) : -1
+  const totalStages = STAGE_ORDER.length
+  const progress =
+    currentIndex >= 0 ? ((currentIndex + 1) / totalStages) * 100 : 0
+
+  return (
+    <div className="flex items-center gap-3 text-xs text-muted-foreground">
+      {currentStage && (
+        <div className="flex items-center gap-1.5">
+          <span className="font-medium text-foreground">当前阶段:</span>
+          <span className="text-lagoon font-medium">
+            {STAGE_LABELS[currentStage] || currentStage}
+          </span>
+        </div>
+      )}
+      {durationMs !== undefined && durationMs > 0 && (
+        <div className="flex items-center gap-1">
+          <Clock className="size-3" />
+          <span>{(durationMs / 1000).toFixed(1)}s</span>
+        </div>
+      )}
+      {currentIndex >= 0 && (
+        <div className="flex items-center gap-2 flex-1 max-w-[120px]">
+          <div className="h-1.5 flex-1 rounded-full bg-muted overflow-hidden">
+            <div
+              className="h-full bg-lagoon rounded-full transition-all duration-500 ease-out"
+              style={{ width: `${progress}%` }}
+            />
+          </div>
+          <span className="text-[10px] tabular-nums">
+            {Math.round(progress)}%
+          </span>
+        </div>
+      )}
+    </div>
+  )
 }
 
 // ── 错误信息（可折叠） ──
 
 function ErrorMessage({ message }: { message: string }) {
-	const [expanded, setExpanded] = useState(false)
-
-	return (
-		<div className="mt-1.5">
-			<button
-				type="button"
-				onClick={() => setExpanded(!expanded)}
-				className="flex items-center gap-1 text-xs text-destructive hover:text-destructive/80 transition-colors cursor-pointer"
-			>
-				{expanded ? <ChevronDown className="size-3" /> : <ChevronRight className="size-3" />}
-				<span>{expanded ? '收起错误详情' : '展开错误详情'}</span>
-			</button>
-			{expanded && (
-				<div className="mt-1.5 p-2.5 rounded-md bg-destructive/10 border border-destructive/20 text-xs text-destructive font-mono leading-relaxed break-all max-h-[120px] overflow-y-auto">
-					{message}
-				</div>
-			)}
-		</div>
-	)
+  const [expanded, setExpanded] = useState(false)
+
+  return (
+    <div className="mt-1.5">
+      <button
+        type="button"
+        onClick={() => setExpanded(!expanded)}
+        className="flex items-center gap-1 text-xs text-destructive hover:text-destructive/80 transition-colors cursor-pointer"
+      >
+        {expanded ? (
+          <ChevronDown className="size-3" />
+        ) : (
+          <ChevronRight className="size-3" />
+        )}
+        <span>{expanded ? '收起错误详情' : '展开错误详情'}</span>
+      </button>
+      {expanded && (
+        <div className="mt-1.5 p-2.5 rounded-md bg-destructive/10 border border-destructive/20 text-xs text-destructive font-mono leading-relaxed break-all max-h-[120px] overflow-y-auto">
+          {message}
+        </div>
+      )}
+    </div>
+  )
 }
 
 // ── 分析按钮 + 确认对话框 ──
 
 export function AnalyzeButton({ configId }: { configId: string }) {
-	const [dialogOpen, setDialogOpen] = useState(false)
-	const analyzeMutation = useRepoWikiAnalyze(configId)
-
-	const handleConfirm = () => {
-		analyzeMutation.mutate(undefined)
-		setDialogOpen(false)
-	}
-
-	return (
-		<>
-			<Button
-				onClick={() => setDialogOpen(true)}
-				disabled={analyzeMutation.isPending}
-				className="gap-2 bg-lagoon text-foam hover:bg-lagoon-deep"
-			>
-				<Play className="size-4" />
-				开始分析
-			</Button>
-
-			<AlertDialog open={dialogOpen} onOpenChange={setDialogOpen}>
-				<AlertDialogContent>
-					<AlertDialogHeader>
-						<AlertDialogTitle>确认启动分析？</AlertDialogTitle>
-						<AlertDialogDescription>
-							这将触发一次完整的仓库克隆和分析流程，可能需要较长时间。确定要继续吗？
-						</AlertDialogDescription>
-					</AlertDialogHeader>
-					<AlertDialogFooter>
-						<AlertDialogCancel disabled={analyzeMutation.isPending}>取消</AlertDialogCancel>
-						<AlertDialogAction onClick={handleConfirm} disabled={analyzeMutation.isPending}>
-							{analyzeMutation.isPending ? (
-								<span className="flex items-center gap-2">
-									<Loader2 className="size-4 animate-spin" />
-									启动中...
-								</span>
-							) : (
-								'确认启动'
-							)}
-						</AlertDialogAction>
-					</AlertDialogFooter>
-				</AlertDialogContent>
-			</AlertDialog>
-		</>
-	)
+  const [dialogOpen, setDialogOpen] = useState(false)
+  const analyzeMutation = useRepoWikiAnalyze(configId)
+
+  const handleConfirm = () => {
+    analyzeMutation.mutate(undefined)
+    setDialogOpen(false)
+  }
+
+  return (
+    <>
+      <Button
+        onClick={() => setDialogOpen(true)}
+        disabled={analyzeMutation.isPending}
+        className="gap-2 bg-lagoon text-foam hover:bg-lagoon-deep"
+      >
+        <Play className="size-4" />
+        开始分析
+      </Button>
+
+      <AlertDialog open={dialogOpen} onOpenChange={setDialogOpen}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>确认启动分析？</AlertDialogTitle>
+            <AlertDialogDescription>
+              这将触发一次完整的仓库克隆和分析流程，可能需要较长时间。确定要继续吗？
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel disabled={analyzeMutation.isPending}>
+              取消
+            </AlertDialogCancel>
+            <AlertDialogAction
+              onClick={handleConfirm}
+              disabled={analyzeMutation.isPending}
+            >
+              {analyzeMutation.isPending ? (
+                <span className="flex items-center gap-2">
+                  <Loader2 className="size-4 animate-spin" />
+                  启动中...
+                </span>
+              ) : (
+                '确认启动'
+              )}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </>
+  )
 }
 
 // ── 增量更新按钮 + 确认对话框 ──
 
 export function UpdateButton({ configId }: { configId: string }) {
-	const [dialogOpen, setDialogOpen] = useState(false)
-	const updateMutation = useRepoWikiUpdate(configId)
-
-	const handleConfirm = () => {
-		updateMutation.mutate(undefined)
-		setDialogOpen(false)
-	}
-
-	return (
-		<>
-			<Button
-				variant="outline"
-				onClick={() => setDialogOpen(true)}
-				disabled={updateMutation.isPending}
-				className="gap-2"
-			>
-				<RefreshCw className={`size-4 ${updateMutation.isPending ? 'animate-spin' : ''}`} />
-				增量更新
-			</Button>
-
-			<AlertDialog open={dialogOpen} onOpenChange={setDialogOpen}>
-				<AlertDialogContent>
-					<AlertDialogHeader>
-						<AlertDialogTitle>确认增量更新？</AlertDialogTitle>
-						<AlertDialogDescription>
-							这将拉取最新代码并执行增量分析。相比全量分析更快，但仅适用于已有历史版本的仓库。
-						</AlertDialogDescription>
-					</AlertDialogHeader>
-					<AlertDialogFooter>
-						<AlertDialogCancel disabled={updateMutation.isPending}>取消</AlertDialogCancel>
-						<AlertDialogAction onClick={handleConfirm} disabled={updateMutation.isPending}>
-							{updateMutation.isPending ? (
-								<span className="flex items-center gap-2">
-									<Loader2 className="size-4 animate-spin" />
-									启动中...
-								</span>
-							) : (
-								'确认更新'
-							)}
-						</AlertDialogAction>
-					</AlertDialogFooter>
-				</AlertDialogContent>
-			</AlertDialog>
-		</>
-	)
+  const [dialogOpen, setDialogOpen] = useState(false)
+  const updateMutation = useRepoWikiUpdate(configId)
+
+  const handleConfirm = () => {
+    updateMutation.mutate(undefined)
+    setDialogOpen(false)
+  }
+
+  return (
+    <>
+      <Button
+        variant="outline"
+        onClick={() => setDialogOpen(true)}
+        disabled={updateMutation.isPending}
+        className="gap-2"
+      >
+        <RefreshCw
+          className={`size-4 ${updateMutation.isPending ? 'animate-spin' : ''}`}
+        />
+        增量更新
+      </Button>
+
+      <AlertDialog open={dialogOpen} onOpenChange={setDialogOpen}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>确认增量更新？</AlertDialogTitle>
+            <AlertDialogDescription>
+              这将拉取最新代码并执行增量分析。相比全量分析更快，但仅适用于已有历史版本的仓库。
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel disabled={updateMutation.isPending}>
+              取消
+            </AlertDialogCancel>
+            <AlertDialogAction
+              onClick={handleConfirm}
+              disabled={updateMutation.isPending}
+            >
+              {updateMutation.isPending ? (
+                <span className="flex items-center gap-2">
+                  <Loader2 className="size-4 animate-spin" />
+                  启动中...
+                </span>
+              ) : (
+                '确认更新'
+              )}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </>
+  )
 }
 
 // ── 版本列表主组件（含选中版本切换） ──
 
 interface VersionListProps {
-	configId: string
-	/** 当前选中的版本 ID（用于对外服务） */
-	selectedVersionId?: string
+  configId: string
+  /** 当前选中的版本 ID（用于对外服务） */
+  selectedVersionId?: string
 }
 
 export function VersionList({ configId, selectedVersionId }: VersionListProps) {
-	const [page, setPage] = useState(1)
-	const [pageSize, setPageSize] = useState(20)
-	const { data, isLoading, isError, error } = useRepoWikiVersions(configId, page, pageSize)
-	const updateSelectedMutation = useUpdateSelectedVersion()
-
-	if (isLoading) return <SkeletonTable rows={5} />
-
-	if (isError) {
-		return (
-			<div className="text-center py-12 text-destructive">
-				<p className="font-medium">加载版本列表失败</p>
-				<p className="text-sm mt-1">{error.message || '请稍后重试'}</p>
-			</div>
-		)
-	}
-
-	const versions = data?.items ?? []
-	const total = data?.total ?? 0
-	const totalPages = pageSize > 0 ? Math.ceil(total / pageSize) : 1
-
-	if (versions.length === 0) {
-		return (
-			<div className="text-center py-12 text-muted-foreground">
-				<p className="text-lg font-medium mb-1">暂无版本记录</p>
-				<p className="text-sm">点击「开始分析」创建第一个版本</p>
-			</div>
-		)
-	}
-
-	const handleSwitchVersion = (versionId: string) => {
-		if (versionId === selectedVersionId) return
-		updateSelectedMutation.mutate(
-			{ configId, versionId },
-			{
-				onError: (err: Error) => toast.error(err.message || '切换版本失败'),
-			},
-		)
-	}
-
-	return (
-		<div className="space-y-4">
-			{/* 版本概览 KPI · 发丝线分栏 */}
-			<div className="grid grid-cols-3 border-b border-line">
-				<div className="border-r border-line py-6 md:px-5 md:first:pl-0">
-					<p className="text-[10.5px] font-bold uppercase tracking-[0.18em] text-sea-ink-soft">
-						版本总数
-					</p>
-					<p className="display-title mt-3 text-5xl font-medium tracking-tight text-sea-ink">
-						{total}
-					</p>
-				</div>
-				<div className="border-r border-line py-6 md:px-5">
-					<p className="text-[10.5px] font-bold uppercase tracking-[0.18em] text-sea-ink-soft">
-						已完成
-					</p>
-					<p className="display-title mt-3 text-5xl font-medium tracking-tight text-sea-ink">
-						{data?.completed_count ?? 0}
-					</p>
-				</div>
-				<div className="py-6 md:px-5">
-					<p className="text-[10.5px] font-bold uppercase tracking-[0.18em] text-sea-ink-soft">
-						生成中
-					</p>
-					<p className="display-title mt-3 text-5xl font-medium tracking-tight text-sea-ink">
-						{data?.generating_count ?? 0}
-					</p>
-				</div>
-			</div>
-
-			<div className="min-w-0 overflow-hidden rounded-lg border">
-				<Table>
-					<TableHeader>
-						<TableRow className="bg-muted/50 hover:bg-muted/50">
-							<TableHead className="w-[60px]">选中</TableHead>
-							<TableHead className="w-[110px]">版本号</TableHead>
-							<TableHead className="w-[120px]">提交哈希</TableHead>
-							<TableHead className="w-[110px]">状态</TableHead>
-							<TableHead className="min-w-[280px]">进度</TableHead>
-							<TableHead className="w-[160px]">创建时间</TableHead>
-							<TableHead className="w-[60px]" />
-						</TableRow>
-					</TableHeader>
-					<TableBody>
-						{versions.map((version) => {
-							const isActive = ACTIVE_STATUSES.includes(
-								version.status as (typeof ACTIVE_STATUSES)[number],
-							)
-							const isCompleted = version.status === 'completed'
-							const isSelected = version.id === selectedVersionId
-							const isSwitchingThisRow =
-								updateSelectedMutation.isPending &&
-								updateSelectedMutation.variables.versionId === version.id
-
-							return (
-								<TableRow
-									key={version.id}
-									className={`group transition-colors ${
-										isSelected
-											? 'bg-lagoon/5 hover:bg-lagoon/10 border-l-2 border-l-lagoon'
-											: isActive
-												? 'bg-blue-50/30 hover:bg-blue-50/50 dark:bg-blue-950/10 dark:hover:bg-blue-950/20'
-												: ''
-									}`}
-								>
-									<TableCell>
-										{isCompleted ? (
-											<button
-												type="button"
-												onClick={() => handleSwitchVersion(version.id)}
-												disabled={isSwitchingThisRow || isSelected}
-												aria-label={`将版本 ${version.id} 设为当前选中`}
-												className="flex size-5 items-center justify-center rounded-full border-2 transition-colors cursor-pointer disabled:cursor-default disabled:opacity-100"
-												style={{
-													borderColor: isSelected ? 'var(--color-lagoon)' : 'var(--color-border)',
-													backgroundColor: isSelected ? 'var(--color-lagoon)' : 'transparent',
-												}}
-											>
-												{isSelected && <Check className="size-3 text-foam" />}
-												{isSwitchingThisRow && (
-													<Loader2 className="size-3 animate-spin text-muted-foreground" />
-												)}
-											</button>
-										) : (
-											<span className="inline-block size-5 rounded-full border-2 border-dashed border-muted-foreground/20" aria-hidden />
-										)}
-									</TableCell>
-									<TableCell className="font-mono text-sm font-medium">{version.id}</TableCell>
-									<TableCell>
-										<code className="text-xs bg-muted px-1.5 py-0.5 rounded font-mono">
-											{version.commit_hash.slice(0, 7)}
-										</code>
-									</TableCell>
-									<TableCell>
-										<StatusBadge status={version.status} />
-									</TableCell>
-									<TableCell>
-										<div className="space-y-1">
-											<StageProgress
-												currentStage={version.current_stage}
-												durationMs={version.duration_ms}
-											/>
-											{version.status === 'failed' && version.error_msg && (
-												<ErrorMessage message={version.error_msg} />
-											)}
-										</div>
-									</TableCell>
-									<TableCell className="text-sm text-muted-foreground">
-										{formatDateTime(version.created_at)}
-									</TableCell>
-									<TableCell className="text-right">
-										{isCompleted && (
-											<Button variant="ghost" size="sm" asChild>
-												<a
-													href={buildWikiReaderUrl(configId)}
-													target="_blank"
-													rel="noopener noreferrer"
-												>
-													<ExternalLink className="size-3.5" />
-													查看
-												</a>
-											</Button>
-										)}
-									</TableCell>
-								</TableRow>
-							)
-						})}
-					</TableBody>
-				</Table>
-			</div>
-
-			<DataTablePagination
-				currentPage={page}
-				totalPages={totalPages}
-				totalItems={total}
-				pageSize={pageSize}
-				onPageChange={(newPage) => setPage(newPage)}
-				onPageSizeChange={(newSize) => {
-					setPageSize(newSize)
-					setPage(1)
-				}}
-			/>
-		</div>
-	)
+  const [page, setPage] = useState(1)
+  const [pageSize, setPageSize] = useState(20)
+  const { data, isLoading, isError, error } = useRepoWikiVersions(
+    configId,
+    page,
+    pageSize,
+  )
+  const updateSelectedMutation = useUpdateSelectedVersion()
+
+  if (isLoading) return <SkeletonTable rows={5} />
+
+  if (isError) {
+    return (
+      <div className="text-center py-12 text-destructive">
+        <p className="font-medium">加载版本列表失败</p>
+        <p className="text-sm mt-1">{error.message || '请稍后重试'}</p>
+      </div>
+    )
+  }
+
+  const versions = data?.items ?? []
+  const total = data?.total ?? 0
+  const totalPages = pageSize > 0 ? Math.ceil(total / pageSize) : 1
+
+  if (versions.length === 0) {
+    return (
+      <div className="text-center py-12 text-muted-foreground">
+        <p className="text-lg font-medium mb-1">暂无版本记录</p>
+        <p className="text-sm">点击「开始分析」创建第一个版本</p>
+      </div>
+    )
+  }
+
+  const handleSwitchVersion = (versionId: string) => {
+    if (versionId === selectedVersionId) return
+    updateSelectedMutation.mutate(
+      { configId, versionId },
+      {
+        onError: (err: Error) => toast.error(err.message || '切换版本失败'),
+      },
+    )
+  }
+
+  return (
+    <div className="space-y-4">
+      {/* 版本概览 KPI · 发丝线分栏 */}
+      <div className="grid grid-cols-3 border-b border-line">
+        <div className="border-r border-line py-6 md:px-5 md:first:pl-0">
+          <p className="text-[10.5px] font-bold uppercase tracking-[0.18em] text-sea-ink-soft">
+            版本总数
+          </p>
+          <p className="display-title mt-3 text-5xl font-medium tracking-tight text-sea-ink">
+            {total}
+          </p>
+        </div>
+        <div className="border-r border-line py-6 md:px-5">
+          <p className="text-[10.5px] font-bold uppercase tracking-[0.18em] text-sea-ink-soft">
+            已完成
+          </p>
+          <p className="display-title mt-3 text-5xl font-medium tracking-tight text-sea-ink">
+            {data?.completed_count ?? 0}
+          </p>
+        </div>
+        <div className="py-6 md:px-5">
+          <p className="text-[10.5px] font-bold uppercase tracking-[0.18em] text-sea-ink-soft">
+            生成中
+          </p>
+          <p className="display-title mt-3 text-5xl font-medium tracking-tight text-sea-ink">
+            {data?.generating_count ?? 0}
+          </p>
+        </div>
+      </div>
+
+      <div className="min-w-0 overflow-hidden rounded-lg border">
+        <Table>
+          <TableHeader>
+            <TableRow className="bg-muted/50 hover:bg-muted/50">
+              <TableHead className="w-[60px]">选中</TableHead>
+              <TableHead className="w-[110px]">版本号</TableHead>
+              <TableHead className="w-[120px]">提交哈希</TableHead>
+              <TableHead className="w-[110px]">状态</TableHead>
+              <TableHead className="min-w-[280px]">进度</TableHead>
+              <TableHead className="w-[160px]">创建时间</TableHead>
+              <TableHead className="w-[60px]" />
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {versions.map((version) => {
+              const isActive = ACTIVE_STATUSES.includes(
+                version.status as (typeof ACTIVE_STATUSES)[number],
+              )
+              const isCompleted = version.status === 'completed'
+              const isSelected = version.id === selectedVersionId
+              const isSwitchingThisRow =
+                updateSelectedMutation.isPending &&
+                updateSelectedMutation.variables.versionId === version.id
+
+              return (
+                <TableRow
+                  key={version.id}
+                  className={`group transition-colors ${
+                    isSelected
+                      ? 'bg-lagoon/5 hover:bg-lagoon/10 border-l-2 border-l-lagoon'
+                      : isActive
+                        ? 'bg-blue-50/30 hover:bg-blue-50/50 dark:bg-blue-950/10 dark:hover:bg-blue-950/20'
+                        : ''
+                  }`}
+                >
+                  <TableCell>
+                    {isCompleted ? (
+                      <button
+                        type="button"
+                        onClick={() => handleSwitchVersion(version.id)}
+                        disabled={isSwitchingThisRow || isSelected}
+                        aria-label={`将版本 ${version.id} 设为当前选中`}
+                        className="flex size-5 items-center justify-center rounded-full border-2 transition-colors cursor-pointer disabled:cursor-default disabled:opacity-100"
+                        style={{
+                          borderColor: isSelected
+                            ? 'var(--color-lagoon)'
+                            : 'var(--color-border)',
+                          backgroundColor: isSelected
+                            ? 'var(--color-lagoon)'
+                            : 'transparent',
+                        }}
+                      >
+                        {isSelected && <Check className="size-3 text-foam" />}
+                        {isSwitchingThisRow && (
+                          <Loader2 className="size-3 animate-spin text-muted-foreground" />
+                        )}
+                      </button>
+                    ) : (
+                      <span
+                        className="inline-block size-5 rounded-full border-2 border-dashed border-muted-foreground/20"
+                        aria-hidden
+                      />
+                    )}
+                  </TableCell>
+                  <TableCell className="font-mono text-sm font-medium">
+                    {version.id}
+                  </TableCell>
+                  <TableCell>
+                    <code className="text-xs bg-muted px-1.5 py-0.5 rounded font-mono">
+                      {version.commit_hash.slice(0, 7)}
+                    </code>
+                  </TableCell>
+                  <TableCell>
+                    <StatusBadge status={version.status} />
+                  </TableCell>
+                  <TableCell>
+                    <div className="space-y-1">
+                      <StageProgress
+                        currentStage={version.current_stage}
+                        durationMs={version.duration_ms}
+                      />
+                      {version.status === 'failed' && version.error_msg && (
+                        <ErrorMessage message={version.error_msg} />
+                      )}
+                    </div>
+                  </TableCell>
+                  <TableCell className="text-sm text-muted-foreground">
+                    {formatDateTime(version.created_at)}
+                  </TableCell>
+                  <TableCell className="text-right">
+                    {isCompleted && (
+                      <Button variant="ghost" size="sm" asChild>
+                        <a
+                          href={buildWikiReaderUrl(configId)}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                        >
+                          <ExternalLink className="size-3.5" />
+                          查看
+                        </a>
+                      </Button>
+                    )}
+                  </TableCell>
+                </TableRow>
+              )
+            })}
+          </TableBody>
+        </Table>
+      </div>
+
+      <DataTablePagination
+        currentPage={page}
+        totalPages={totalPages}
+        totalItems={total}
+        pageSize={pageSize}
+        onPageChange={(newPage) => setPage(newPage)}
+        onPageSizeChange={(newSize) => {
+          setPageSize(newSize)
+          setPage(1)
+        }}
+      />
+    </div>
+  )
 }
diff --git a/web/src/components/repowiki/webhook-branches.tsx b/web/src/components/repowiki/webhook-branches.tsx
index 893922d..df402ca 100644
--- a/web/src/components/repowiki/webhook-branches.tsx
+++ b/web/src/components/repowiki/webhook-branches.tsx
@@ -7,7 +7,7 @@ import { X, Plus } from 'lucide-react'
 import { toast } from 'sonner'
 
 interface WebhookBranchesProps {
-	configId: string
+  configId: string
 }
 
 /**
@@ -15,108 +15,108 @@ interface WebhookBranchesProps {
  * 由 WebhookTab 组合使用。
  */
 export function WebhookBranches({ configId }: WebhookBranchesProps) {
-	const { data, isLoading } = useWebhookConfig(configId)
-	const updateMutation = useUpdateWebhookBranches(configId)
-	const [newBranch, setNewBranch] = useState('')
+  const { data, isLoading } = useWebhookConfig(configId)
+  const updateMutation = useUpdateWebhookBranches(configId)
+  const [newBranch, setNewBranch] = useState('')
 
-	const branches = data?.data?.branches ?? []
+  const branches = data?.data?.branches ?? []
 
-	const handleAdd = () => {
-		const trimmed = newBranch.trim()
-		if (!trimmed) return
-		if (branches.includes(trimmed)) {
-			toast.error('该分支已存在')
-			return
-		}
-		const updated = [...branches, trimmed]
-		updateMutation.mutate(updated, {
-			onSuccess: () => {
-				setNewBranch('')
-				toast.success('分支已添加')
-			},
-			onError: (error: Error) => {
-				toast.error(error.message || '添加失败')
-			},
-		})
-	}
+  const handleAdd = () => {
+    const trimmed = newBranch.trim()
+    if (!trimmed) return
+    if (branches.includes(trimmed)) {
+      toast.error('该分支已存在')
+      return
+    }
+    const updated = [...branches, trimmed]
+    updateMutation.mutate(updated, {
+      onSuccess: () => {
+        setNewBranch('')
+        toast.success('分支已添加')
+      },
+      onError: (error: Error) => {
+        toast.error(error.message || '添加失败')
+      },
+    })
+  }
 
-	const handleRemove = (branch: string) => {
-		const updated = branches.filter((b) => b !== branch)
-		updateMutation.mutate(updated, {
-			onSuccess: () => {
-				toast.success('分支已移除')
-			},
-			onError: (error: Error) => {
-				toast.error(error.message || '移除失败')
-			},
-		})
-	}
+  const handleRemove = (branch: string) => {
+    const updated = branches.filter((b) => b !== branch)
+    updateMutation.mutate(updated, {
+      onSuccess: () => {
+        toast.success('分支已移除')
+      },
+      onError: (error: Error) => {
+        toast.error(error.message || '移除失败')
+      },
+    })
+  }
 
-	const handleKeyDown = (e: React.KeyboardEvent) => {
-		if (e.key === 'Enter') {
-			e.preventDefault()
-			handleAdd()
-		}
-	}
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter') {
+      e.preventDefault()
+      handleAdd()
+    }
+  }
 
-	if (isLoading) {
-		return (
-			<div className="space-y-3">
-				<div className="h-8 w-24 animate-pulse rounded bg-muted" />
-				<div className="h-9 animate-pulse rounded bg-muted" />
-			</div>
-		)
-	}
+  if (isLoading) {
+    return (
+      <div className="space-y-3">
+        <div className="h-8 w-24 animate-pulse rounded bg-muted" />
+        <div className="h-9 animate-pulse rounded bg-muted" />
+      </div>
+    )
+  }
 
-	return (
-		<div className="space-y-3">
-			{/* Add branch */}
-			<div className="flex gap-2">
-				<Input
-					value={newBranch}
-					onChange={(e) => setNewBranch(e.target.value)}
-					onKeyDown={handleKeyDown}
-					placeholder="输入分支名称（如 main），回车添加"
-					disabled={updateMutation.isPending}
-				/>
-				<Button
-					onClick={handleAdd}
-					disabled={!newBranch.trim() || updateMutation.isPending}
-					className="gap-2"
-				>
-					<Plus className="size-4" />
-					添加
-				</Button>
-			</div>
+  return (
+    <div className="space-y-3">
+      {/* Add branch */}
+      <div className="flex gap-2">
+        <Input
+          value={newBranch}
+          onChange={(e) => setNewBranch(e.target.value)}
+          onKeyDown={handleKeyDown}
+          placeholder="输入分支名称（如 main），回车添加"
+          disabled={updateMutation.isPending}
+        />
+        <Button
+          onClick={handleAdd}
+          disabled={!newBranch.trim() || updateMutation.isPending}
+          className="gap-2"
+        >
+          <Plus className="size-4" />
+          添加
+        </Button>
+      </div>
 
-			{/* Branch list */}
-			{branches.length === 0 ? (
-				<div className="rounded-md border border-dashed p-4 text-center">
-					<p className="text-muted-foreground text-sm">
-						未配置监听分支，Webhook 不会触发分析
-					</p>
-				</div>
-			) : (
-				<div className="flex flex-wrap gap-2">
-					{branches.map((branch) => (
-						<Badge
-							key={branch}
-							variant="secondary"
-							className="gap-1 px-2.5 py-1 text-sm font-mono"
-						>
-							{branch}
-							<button
-								onClick={() => handleRemove(branch)}
-								disabled={updateMutation.isPending}
-								className="ml-1 rounded-full p-0.5 hover:bg-muted-foreground/20 transition-colors disabled:opacity-50 cursor-pointer"
-								aria-label={`移除分支 ${branch}`}
-							>
-								<X className="size-3" />
-							</button>
-						</Badge>
-					))}
-				</div>
-			)}
-		</div>
-	)
+      {/* Branch list */}
+      {branches.length === 0 ? (
+        <div className="rounded-md border border-dashed p-4 text-center">
+          <p className="text-muted-foreground text-sm">
+            未配置监听分支，Webhook 不会触发分析
+          </p>
+        </div>
+      ) : (
+        <div className="flex flex-wrap gap-2">
+          {branches.map((branch) => (
+            <Badge
+              key={branch}
+              variant="secondary"
+              className="gap-1 px-2.5 py-1 text-sm font-mono"
+            >
+              {branch}
+              <button
+                onClick={() => handleRemove(branch)}
+                disabled={updateMutation.isPending}
+                className="ml-1 rounded-full p-0.5 hover:bg-muted-foreground/20 transition-colors disabled:opacity-50 cursor-pointer"
+                aria-label={`移除分支 ${branch}`}
+              >
+                <X className="size-3" />
+              </button>
+            </Badge>
+          ))}
+        </div>
+      )}
+    </div>
+  )
 }
diff --git a/web/src/components/repowiki/webhook-config.tsx b/web/src/components/repowiki/webhook-config.tsx
index ed6206f..ea0eaa7 100644
--- a/web/src/components/repowiki/webhook-config.tsx
+++ b/web/src/components/repowiki/webhook-config.tsx
@@ -3,26 +3,26 @@ import { Button } from '@lumina/components/ui/button'
 import { Input } from '@lumina/components/ui/input'
 import { Label } from '@lumina/components/ui/label'
 import {
-	Dialog,
-	DialogContent,
-	DialogDescription,
-	DialogFooter,
-	DialogHeader,
-	DialogTitle,
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
 } from '@lumina/components/ui/dialog'
 import {
-	Select,
-	SelectContent,
-	SelectItem,
-	SelectTrigger,
-	SelectValue,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
 } from '@lumina/components/ui/select'
 import { useWebhookConfig, useRegenerateWebhook } from '#/hooks/useWebhook'
 import { Copy, Check, AlertTriangle, RefreshCw, Shield } from 'lucide-react'
 import { toast } from 'sonner'
 
 interface WebhookConfigProps {
-	configId: string
+  configId: string
 }
 
 /**
@@ -30,256 +30,299 @@ interface WebhookConfigProps {
  * 由 WebhookTab 组合使用。
  */
 export function WebhookConfig({ configId }: WebhookConfigProps) {
-	const { data, isLoading } = useWebhookConfig(configId)
-	const regenerateMutation = useRegenerateWebhook(configId)
-	const [confirmOpen, setConfirmOpen] = useState(false)
-	const [resultOpen, setResultOpen] = useState(false)
-	const [copied, setCopied] = useState<string | null>(null)
-	const [selectedProvider, setSelectedProvider] = useState('')
+  const { data, isLoading } = useWebhookConfig(configId)
+  const regenerateMutation = useRegenerateWebhook(configId)
+  const [confirmOpen, setConfirmOpen] = useState(false)
+  const [resultOpen, setResultOpen] = useState(false)
+  const [copied, setCopied] = useState<string | null>(null)
+  const [selectedProvider, setSelectedProvider] = useState('')
 
-	const config = data?.data
+  const config = data?.data
 
-	const handleCopy = async (text: string, label: string) => {
-		try {
-			await navigator.clipboard.writeText(text)
-			setCopied(label)
-			setTimeout(() => setCopied(null), 2000)
-			toast.success(`${label} 已复制到剪贴板`)
-		} catch {
-			toast.error('复制失败')
-		}
-	}
+  const handleCopy = async (text: string, label: string) => {
+    try {
+      await navigator.clipboard.writeText(text)
+      setCopied(label)
+      setTimeout(() => setCopied(null), 2000)
+      toast.success(`${label} 已复制到剪贴板`)
+    } catch {
+      toast.error('复制失败')
+    }
+  }
 
-	const handleRegenerate = () => {
-		regenerateMutation.mutate(undefined, {
-			onSuccess: () => {
-				setConfirmOpen(false)
-				setResultOpen(true)
-			},
-			onError: (error: Error) => {
-				toast.error(error.message || '重新生成失败')
-			},
-		})
-	}
+  const handleRegenerate = () => {
+    regenerateMutation.mutate(undefined, {
+      onSuccess: () => {
+        setConfirmOpen(false)
+        setResultOpen(true)
+      },
+      onError: (error: Error) => {
+        toast.error(error.message || '重新生成失败')
+      },
+    })
+  }
 
-	if (isLoading) {
-		return (
-			<div className="space-y-3">
-				<div className="h-9 animate-pulse rounded bg-muted" />
-				<div className="h-9 animate-pulse rounded bg-muted" />
-				<div className="h-9 animate-pulse rounded bg-muted" />
-			</div>
-		)
-	}
+  if (isLoading) {
+    return (
+      <div className="space-y-3">
+        <div className="h-9 animate-pulse rounded bg-muted" />
+        <div className="h-9 animate-pulse rounded bg-muted" />
+        <div className="h-9 animate-pulse rounded bg-muted" />
+      </div>
+    )
+  }
 
-	if (!config) {
-		return <p className="text-sm text-muted-foreground">加载 Webhook 配置失败</p>
-	}
+  if (!config) {
+    return (
+      <p className="text-sm text-muted-foreground">加载 Webhook 配置失败</p>
+    )
+  }
 
-	const providers = Object.entries(config.provider_guide ?? {})
-	const guideText =
-		selectedProvider && config.provider_guide ? config.provider_guide[selectedProvider] : ''
+  const providers = Object.entries(config.provider_guide ?? {})
+  const guideText =
+    selectedProvider && config.provider_guide
+      ? config.provider_guide[selectedProvider]
+      : ''
 
-	return (
-		<>
-			<div className="space-y-5">
-				{/* Webhook URL */}
-				<div className="space-y-1.5">
-					<Label className="text-xs text-muted-foreground">Webhook URL</Label>
-					<div className="flex gap-2">
-						<Input value={config.url} readOnly className="font-mono text-sm" />
-						<Button
-							variant="outline"
-							size="icon"
-							onClick={() => handleCopy(config.url, 'URL')}
-							aria-label="复制 Webhook URL"
-						>
-							{copied === 'URL' ? (
-								<Check className="size-4 text-emerald-500" />
-							) : (
-								<Copy className="size-4" />
-							)}
-						</Button>
-					</div>
-				</div>
+  return (
+    <>
+      <div className="space-y-5">
+        {/* Webhook URL */}
+        <div className="space-y-1.5">
+          <Label className="text-xs text-muted-foreground">Webhook URL</Label>
+          <div className="flex gap-2">
+            <Input value={config.url} readOnly className="font-mono text-sm" />
+            <Button
+              variant="outline"
+              size="icon"
+              onClick={() => handleCopy(config.url, 'URL')}
+              aria-label="复制 Webhook URL"
+            >
+              {copied === 'URL' ? (
+                <Check className="size-4 text-emerald-500" />
+              ) : (
+                <Copy className="size-4" />
+              )}
+            </Button>
+          </div>
+        </div>
 
-				{/* Token */}
-				<div className="space-y-1.5">
-					<Label className="text-xs text-muted-foreground">Token</Label>
-					<div className="flex items-center gap-2">
-						<code className="flex-1 rounded border bg-muted px-2.5 py-1.5 font-mono text-sm truncate">
-							{config.token}
-						</code>
-						<Button
-							variant="outline"
-							size="icon"
-							onClick={() => handleCopy(config.token, 'Token')}
-							aria-label="复制 Token"
-						>
-							{copied === 'Token' ? (
-								<Check className="size-4 text-emerald-500" />
-							) : (
-								<Copy className="size-4" />
-							)}
-						</Button>
-					</div>
-				</div>
+        {/* Token */}
+        <div className="space-y-1.5">
+          <Label className="text-xs text-muted-foreground">Token</Label>
+          <div className="flex items-center gap-2">
+            <code className="flex-1 rounded border bg-muted px-2.5 py-1.5 font-mono text-sm truncate">
+              {config.token}
+            </code>
+            <Button
+              variant="outline"
+              size="icon"
+              onClick={() => handleCopy(config.token, 'Token')}
+              aria-label="复制 Token"
+            >
+              {copied === 'Token' ? (
+                <Check className="size-4 text-emerald-500" />
+              ) : (
+                <Copy className="size-4" />
+              )}
+            </Button>
+          </div>
+        </div>
 
-				{/* Secret status */}
-				<div className="flex items-center gap-2 text-sm">
-					<Shield
-						className={`size-4 ${config.has_secret ? 'text-emerald-500' : 'text-muted-foreground'}`}
-					/>
-					<span className={config.has_secret ? 'text-foreground' : 'text-muted-foreground'}>
-						{config.has_secret ? '已设置 Secret（HMAC 签名校验已启用）' : '未设置 Secret（建议配置以启用签名校验）'}
-					</span>
-				</div>
+        {/* Secret status */}
+        <div className="flex items-center gap-2 text-sm">
+          <Shield
+            className={`size-4 ${config.has_secret ? 'text-emerald-500' : 'text-muted-foreground'}`}
+          />
+          <span
+            className={
+              config.has_secret ? 'text-foreground' : 'text-muted-foreground'
+            }
+          >
+            {config.has_secret
+              ? '已设置 Secret（HMAC 签名校验已启用）'
+              : '未设置 Secret（建议配置以启用签名校验）'}
+          </span>
+        </div>
 
-				{/* Provider Guide */}
-				{providers.length > 0 && (
-					<div className="space-y-1.5">
-						<Label className="text-xs text-muted-foreground">提供商配置指南</Label>
-						<Select value={selectedProvider} onValueChange={setSelectedProvider}>
-							<SelectTrigger>
-								<SelectValue placeholder="选择 Git 提供商查看配置示例" />
-							</SelectTrigger>
-							<SelectContent>
-								{providers.map(([key]) => (
-									<SelectItem key={key} value={key}>
-										{key}
-									</SelectItem>
-								))}
-							</SelectContent>
-						</Select>
-						{guideText && (
-							<div className="rounded-md border bg-muted/50 p-3">
-								<pre className="whitespace-pre-wrap text-xs leading-relaxed font-mono">{guideText}</pre>
-							</div>
-						)}
-					</div>
-				)}
+        {/* Provider Guide */}
+        {providers.length > 0 && (
+          <div className="space-y-1.5">
+            <Label className="text-xs text-muted-foreground">
+              提供商配置指南
+            </Label>
+            <Select
+              value={selectedProvider}
+              onValueChange={setSelectedProvider}
+            >
+              <SelectTrigger>
+                <SelectValue placeholder="选择 Git 提供商查看配置示例" />
+              </SelectTrigger>
+              <SelectContent>
+                {providers.map(([key]) => (
+                  <SelectItem key={key} value={key}>
+                    {key}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+            {guideText && (
+              <div className="rounded-md border bg-muted/50 p-3">
+                <pre className="whitespace-pre-wrap text-xs leading-relaxed font-mono">
+                  {guideText}
+                </pre>
+              </div>
+            )}
+          </div>
+        )}
 
-				{/* Regenerate */}
-				<div className="pt-1">
-					<Button variant="outline" onClick={() => setConfirmOpen(true)} className="gap-2">
-						<RefreshCw className="size-4" />
-						重新生成凭据
-					</Button>
-				</div>
-			</div>
+        {/* Regenerate */}
+        <div className="pt-1">
+          <Button
+            variant="outline"
+            onClick={() => setConfirmOpen(true)}
+            className="gap-2"
+          >
+            <RefreshCw className="size-4" />
+            重新生成凭据
+          </Button>
+        </div>
+      </div>
 
-			{/* Confirm dialog */}
-			<Dialog open={confirmOpen} onOpenChange={setConfirmOpen}>
-				<DialogContent>
-					<DialogHeader>
-						<DialogTitle className="flex items-center gap-2">
-							<AlertTriangle className="size-5 text-amber-500" />
-							确认重新生成？
-						</DialogTitle>
-						<DialogDescription>
-							重新生成后，旧的 Token 和 Secret 将立即失效。所有使用旧凭据的 Webhook 请求都会被拒绝。
-						</DialogDescription>
-					</DialogHeader>
-					<DialogFooter>
-						<Button variant="outline" onClick={() => setConfirmOpen(false)}>
-							取消
-						</Button>
-						<Button onClick={handleRegenerate} disabled={regenerateMutation.isPending} className="gap-2">
-							{regenerateMutation.isPending ? (
-								<>
-									<RefreshCw className="size-4 animate-spin" />
-									生成中...
-								</>
-							) : (
-								'确认重新生成'
-							)}
-						</Button>
-					</DialogFooter>
-				</DialogContent>
-			</Dialog>
+      {/* Confirm dialog */}
+      <Dialog open={confirmOpen} onOpenChange={setConfirmOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle className="flex items-center gap-2">
+              <AlertTriangle className="size-5 text-amber-500" />
+              确认重新生成？
+            </DialogTitle>
+            <DialogDescription>
+              重新生成后，旧的 Token 和 Secret 将立即失效。所有使用旧凭据的
+              Webhook 请求都会被拒绝。
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setConfirmOpen(false)}>
+              取消
+            </Button>
+            <Button
+              onClick={handleRegenerate}
+              disabled={regenerateMutation.isPending}
+              className="gap-2"
+            >
+              {regenerateMutation.isPending ? (
+                <>
+                  <RefreshCw className="size-4 animate-spin" />
+                  生成中...
+                </>
+              ) : (
+                '确认重新生成'
+              )}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
 
-			{/* Result dialog */}
-			<Dialog open={resultOpen} onOpenChange={setResultOpen}>
-				<DialogContent className="max-w-lg">
-					<DialogHeader>
-						<DialogTitle>凭据已重新生成</DialogTitle>
-						<DialogDescription>
-							请立即保存以下信息，关闭后将无法再次查看完整凭据。
-						</DialogDescription>
-					</DialogHeader>
-					<div className="space-y-4">
-						<div className="space-y-1.5">
-							<Label className="text-xs text-muted-foreground">Token</Label>
-							<div className="flex gap-2">
-								<Input
-									value={regenerateMutation.data?.data?.token ?? ''}
-									readOnly
-									className="font-mono text-sm"
-								/>
-								<Button
-									variant="outline"
-									size="icon"
-									onClick={() => handleCopy(regenerateMutation.data?.data?.token ?? '', '新 Token')}
-									aria-label="复制新 Token"
-								>
-									{copied === '新 Token' ? (
-										<Check className="size-4 text-emerald-500" />
-									) : (
-										<Copy className="size-4" />
-									)}
-								</Button>
-							</div>
-						</div>
-						<div className="space-y-1.5">
-							<Label className="text-xs text-muted-foreground">Secret</Label>
-							<div className="flex gap-2">
-								<Input
-									value={regenerateMutation.data?.data?.secret ?? ''}
-									readOnly
-									className="font-mono text-sm"
-								/>
-								<Button
-									variant="outline"
-									size="icon"
-									onClick={() => handleCopy(regenerateMutation.data?.data?.secret ?? '', '新 Secret')}
-									aria-label="复制新 Secret"
-								>
-									{copied === '新 Secret' ? (
-										<Check className="size-4 text-emerald-500" />
-									) : (
-										<Copy className="size-4" />
-									)}
-								</Button>
-							</div>
-						</div>
-						<div className="space-y-1.5">
-							<Label className="text-xs text-muted-foreground">Webhook URL</Label>
-							<div className="flex gap-2">
-								<Input
-									value={regenerateMutation.data?.data?.url ?? ''}
-									readOnly
-									className="font-mono text-sm"
-								/>
-								<Button
-									variant="outline"
-									size="icon"
-									onClick={() => handleCopy(regenerateMutation.data?.data?.url ?? '', '新 URL')}
-									aria-label="复制新 URL"
-								>
-									{copied === '新 URL' ? (
-										<Check className="size-4 text-emerald-500" />
-									) : (
-										<Copy className="size-4" />
-									)}
-								</Button>
-							</div>
-						</div>
-					</div>
-					<DialogFooter>
-						<Button onClick={() => setResultOpen(false)}>关闭</Button>
-					</DialogFooter>
-				</DialogContent>
-			</Dialog>
-		</>
-	)
+      {/* Result dialog */}
+      <Dialog open={resultOpen} onOpenChange={setResultOpen}>
+        <DialogContent className="max-w-lg">
+          <DialogHeader>
+            <DialogTitle>凭据已重新生成</DialogTitle>
+            <DialogDescription>
+              请立即保存以下信息，关闭后将无法再次查看完整凭据。
+            </DialogDescription>
+          </DialogHeader>
+          <div className="space-y-4">
+            <div className="space-y-1.5">
+              <Label className="text-xs text-muted-foreground">Token</Label>
+              <div className="flex gap-2">
+                <Input
+                  value={regenerateMutation.data?.data?.token ?? ''}
+                  readOnly
+                  className="font-mono text-sm"
+                />
+                <Button
+                  variant="outline"
+                  size="icon"
+                  onClick={() =>
+                    handleCopy(
+                      regenerateMutation.data?.data?.token ?? '',
+                      '新 Token',
+                    )
+                  }
+                  aria-label="复制新 Token"
+                >
+                  {copied === '新 Token' ? (
+                    <Check className="size-4 text-emerald-500" />
+                  ) : (
+                    <Copy className="size-4" />
+                  )}
+                </Button>
+              </div>
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs text-muted-foreground">Secret</Label>
+              <div className="flex gap-2">
+                <Input
+                  value={regenerateMutation.data?.data?.secret ?? ''}
+                  readOnly
+                  className="font-mono text-sm"
+                />
+                <Button
+                  variant="outline"
+                  size="icon"
+                  onClick={() =>
+                    handleCopy(
+                      regenerateMutation.data?.data?.secret ?? '',
+                      '新 Secret',
+                    )
+                  }
+                  aria-label="复制新 Secret"
+                >
+                  {copied === '新 Secret' ? (
+                    <Check className="size-4 text-emerald-500" />
+                  ) : (
+                    <Copy className="size-4" />
+                  )}
+                </Button>
+              </div>
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs text-muted-foreground">
+                Webhook URL
+              </Label>
+              <div className="flex gap-2">
+                <Input
+                  value={regenerateMutation.data?.data?.url ?? ''}
+                  readOnly
+                  className="font-mono text-sm"
+                />
+                <Button
+                  variant="outline"
+                  size="icon"
+                  onClick={() =>
+                    handleCopy(
+                      regenerateMutation.data?.data?.url ?? '',
+                      '新 URL',
+                    )
+                  }
+                  aria-label="复制新 URL"
+                >
+                  {copied === '新 URL' ? (
+                    <Check className="size-4 text-emerald-500" />
+                  ) : (
+                    <Copy className="size-4" />
+                  )}
+                </Button>
+              </div>
+            </div>
+          </div>
+          <DialogFooter>
+            <Button onClick={() => setResultOpen(false)}>关闭</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </>
+  )
 }
diff --git a/web/src/components/repowiki/webhook-events.tsx b/web/src/components/repowiki/webhook-events.tsx
index 411a87a..efbf6d1 100644
--- a/web/src/components/repowiki/webhook-events.tsx
+++ b/web/src/components/repowiki/webhook-events.tsx
@@ -1,11 +1,11 @@
 import { useState } from 'react'
 import {
-	Table,
-	TableBody,
-	TableCell,
-	TableHead,
-	TableHeader,
-	TableRow,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
 } from '@lumina/components/ui/table'
 import { Badge } from '@lumina/components/ui/badge'
 import { Button } from '@lumina/components/ui/button'
@@ -15,17 +15,20 @@ import { ChevronLeft, ChevronRight } from 'lucide-react'
 import { formatDateTime } from '#/lib/format-date'
 
 interface WebhookEventsProps {
-	configId: string
+  configId: string
 }
 
 const STATUS_VARIANTS: Record<
-	string,
-	{ label: string; variant: 'default' | 'secondary' | 'destructive' | 'outline' }
+  string,
+  {
+    label: string
+    variant: 'default' | 'secondary' | 'destructive' | 'outline'
+  }
 > = {
-	accepted: { label: '已接受', variant: 'default' as const },
-	ignored: { label: '已忽略', variant: 'secondary' as const },
-	failed: { label: '失败', variant: 'destructive' as const },
-	pending: { label: '处理中', variant: 'outline' as const },
+  accepted: { label: '已接受', variant: 'default' as const },
+  ignored: { label: '已忽略', variant: 'secondary' as const },
+  failed: { label: '失败', variant: 'destructive' as const },
+  pending: { label: '处理中', variant: 'outline' as const },
 }
 
 /**
@@ -33,104 +36,110 @@ const STATUS_VARIANTS: Record<
  * 由 WebhookTab 组合使用。
  */
 export function WebhookEvents({ configId }: WebhookEventsProps) {
-	const [page, setPage] = useState(1)
-	const [pageSize] = useState(20)
-	const { data, isLoading, isError, error } = useWebhookEvents(configId, page, pageSize)
+  const [page, setPage] = useState(1)
+  const [pageSize] = useState(20)
+  const { data, isLoading, isError, error } = useWebhookEvents(
+    configId,
+    page,
+    pageSize,
+  )
 
-	if (isLoading) {
-		return <SkeletonTable rows={5} />
-	}
+  if (isLoading) {
+    return <SkeletonTable rows={5} />
+  }
 
-	if (isError) {
-		return (
-			<div className="text-center py-8 text-destructive">
-				<p className="font-medium">加载事件日志失败</p>
-				<p className="text-sm mt-1">{error.message || '请稍后重试'}</p>
-			</div>
-		)
-	}
+  if (isError) {
+    return (
+      <div className="text-center py-8 text-destructive">
+        <p className="font-medium">加载事件日志失败</p>
+        <p className="text-sm mt-1">{error.message || '请稍后重试'}</p>
+      </div>
+    )
+  }
 
-	const events = data?.data?.items ?? []
-	const total = data?.data?.total ?? 0
-	const totalPages = pageSize > 0 ? Math.ceil(total / pageSize) : 1
+  const events = data?.data?.items ?? []
+  const total = data?.data?.total ?? 0
+  const totalPages = pageSize > 0 ? Math.ceil(total / pageSize) : 1
 
-	if (events.length === 0) {
-		return (
-			<div className="text-center py-8 text-muted-foreground">
-				<p className="text-sm">暂无 Webhook 事件记录</p>
-			</div>
-		)
-	}
+  if (events.length === 0) {
+    return (
+      <div className="text-center py-8 text-muted-foreground">
+        <p className="text-sm">暂无 Webhook 事件记录</p>
+      </div>
+    )
+  }
 
-	return (
-		<div className="space-y-3">
-			<div className="min-w-0 overflow-hidden rounded-lg border">
-				<Table>
-					<TableHeader>
-						<TableRow className="bg-muted/50 hover:bg-muted/50">
-							<TableHead className="w-[160px]">时间</TableHead>
-							<TableHead className="w-[100px]">提供商</TableHead>
-							<TableHead className="w-[120px]">分支</TableHead>
-							<TableHead className="w-[100px]">状态</TableHead>
-							<TableHead>原因</TableHead>
-						</TableRow>
-					</TableHeader>
-					<TableBody>
-						{events.map((event) => {
-							const statusConfig = STATUS_VARIANTS[event.status] ?? {
-								label: event.status,
-								variant: 'outline' as const,
-							}
-							return (
-								<TableRow key={event.id}>
-									<TableCell className="text-sm text-muted-foreground">
-										{formatDateTime(event.received_at)}
-									</TableCell>
-									<TableCell className="text-sm">{event.provider}</TableCell>
-									<TableCell className="text-sm font-mono">{event.branch ?? '-'}</TableCell>
-									<TableCell>
-										<Badge variant={statusConfig.variant} className="text-xs">
-											{statusConfig.label}
-										</Badge>
-									</TableCell>
-									<TableCell className="text-sm text-muted-foreground max-w-[300px] truncate">
-										{event.reason ?? '-'}
-									</TableCell>
-								</TableRow>
-							)
-						})}
-					</TableBody>
-				</Table>
-			</div>
+  return (
+    <div className="space-y-3">
+      <div className="min-w-0 overflow-hidden rounded-lg border">
+        <Table>
+          <TableHeader>
+            <TableRow className="bg-muted/50 hover:bg-muted/50">
+              <TableHead className="w-[160px]">时间</TableHead>
+              <TableHead className="w-[100px]">提供商</TableHead>
+              <TableHead className="w-[120px]">分支</TableHead>
+              <TableHead className="w-[100px]">状态</TableHead>
+              <TableHead>原因</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {events.map((event) => {
+              const statusConfig = STATUS_VARIANTS[event.status] ?? {
+                label: event.status,
+                variant: 'outline' as const,
+              }
+              return (
+                <TableRow key={event.id}>
+                  <TableCell className="text-sm text-muted-foreground">
+                    {formatDateTime(event.received_at)}
+                  </TableCell>
+                  <TableCell className="text-sm">{event.provider}</TableCell>
+                  <TableCell className="text-sm font-mono">
+                    {event.branch ?? '-'}
+                  </TableCell>
+                  <TableCell>
+                    <Badge variant={statusConfig.variant} className="text-xs">
+                      {statusConfig.label}
+                    </Badge>
+                  </TableCell>
+                  <TableCell className="text-sm text-muted-foreground max-w-[300px] truncate">
+                    {event.reason ?? '-'}
+                  </TableCell>
+                </TableRow>
+              )
+            })}
+          </TableBody>
+        </Table>
+      </div>
 
-			<div className="flex items-center justify-between">
-				<div className="text-sm text-muted-foreground">共 {total} 条记录</div>
-				<div className="flex items-center gap-2">
-					<Button
-						variant="outline"
-						size="sm"
-						className="size-11"
-						onClick={() => setPage((p) => Math.max(1, p - 1))}
-						disabled={page <= 1}
-						aria-label="上一页"
-					>
-						<ChevronLeft className="size-4" />
-					</Button>
-					<span className="text-sm text-muted-foreground tabular-nums">
-						第 {page} / {totalPages} 页
-					</span>
-					<Button
-						variant="outline"
-						size="sm"
-						className="size-11"
-						onClick={() => setPage((p) => Math.min(totalPages, p + 1))}
-						disabled={page >= totalPages}
-						aria-label="下一页"
-					>
-						<ChevronRight className="size-4" />
-					</Button>
-				</div>
-			</div>
-		</div>
-	)
+      <div className="flex items-center justify-between">
+        <div className="text-sm text-muted-foreground">共 {total} 条记录</div>
+        <div className="flex items-center gap-2">
+          <Button
+            variant="outline"
+            size="sm"
+            className="size-11"
+            onClick={() => setPage((p) => Math.max(1, p - 1))}
+            disabled={page <= 1}
+            aria-label="上一页"
+          >
+            <ChevronLeft className="size-4" />
+          </Button>
+          <span className="text-sm text-muted-foreground tabular-nums">
+            第 {page} / {totalPages} 页
+          </span>
+          <Button
+            variant="outline"
+            size="sm"
+            className="size-11"
+            onClick={() => setPage((p) => Math.min(totalPages, p + 1))}
+            disabled={page >= totalPages}
+            aria-label="下一页"
+          >
+            <ChevronRight className="size-4" />
+          </Button>
+        </div>
+      </div>
+    </div>
+  )
 }
diff --git a/web/src/components/repowiki/webhook-tab.tsx b/web/src/components/repowiki/webhook-tab.tsx
index 13e040a..20a18bd 100644
--- a/web/src/components/repowiki/webhook-tab.tsx
+++ b/web/src/components/repowiki/webhook-tab.tsx
@@ -3,7 +3,7 @@ import { WebhookBranches } from '#/components/repowiki/webhook-branches'
 import { WebhookEvents } from '#/components/repowiki/webhook-events'
 
 interface WebhookTabProps {
-	configId: string
+  configId: string
 }
 
 /**
@@ -11,31 +11,37 @@ interface WebhookTabProps {
  * 用 Separator 分隔，避免每个子组件各自包裹 Card 造成的嵌套。
  */
 export function WebhookTab({ configId }: WebhookTabProps) {
-	return (
-		<div className="divide-y">
-			<section className="space-y-3 pb-6">
-				<header>
-					<h3 className="text-sm font-semibold text-foreground">凭据配置</h3>
-					<p className="text-xs text-muted-foreground">将以下 URL 与 Token 配置到 Git 提供商的 Webhook 设置中</p>
-				</header>
-				<WebhookConfig configId={configId} />
-			</section>
+  return (
+    <div className="divide-y">
+      <section className="space-y-3 pb-6">
+        <header>
+          <h3 className="text-sm font-semibold text-foreground">凭据配置</h3>
+          <p className="text-xs text-muted-foreground">
+            将以下 URL 与 Token 配置到 Git 提供商的 Webhook 设置中
+          </p>
+        </header>
+        <WebhookConfig configId={configId} />
+      </section>
 
-			<section className="space-y-3 py-6">
-				<header>
-					<h3 className="text-sm font-semibold text-foreground">监听分支</h3>
-					<p className="text-xs text-muted-foreground">仅当推送到以下分支时才会触发 Wiki 自动分析</p>
-				</header>
-				<WebhookBranches configId={configId} />
-			</section>
+      <section className="space-y-3 py-6">
+        <header>
+          <h3 className="text-sm font-semibold text-foreground">监听分支</h3>
+          <p className="text-xs text-muted-foreground">
+            仅当推送到以下分支时才会触发 Wiki 自动分析
+          </p>
+        </header>
+        <WebhookBranches configId={configId} />
+      </section>
 
-			<section className="space-y-3 pt-6">
-				<header>
-					<h3 className="text-sm font-semibold text-foreground">事件日志</h3>
-					<p className="text-xs text-muted-foreground">最近的 Webhook 接收与处理记录</p>
-				</header>
-				<WebhookEvents configId={configId} />
-			</section>
-		</div>
-	)
+      <section className="space-y-3 pt-6">
+        <header>
+          <h3 className="text-sm font-semibold text-foreground">事件日志</h3>
+          <p className="text-xs text-muted-foreground">
+            最近的 Webhook 接收与处理记录
+          </p>
+        </header>
+        <WebhookEvents configId={configId} />
+      </section>
+    </div>
+  )
 }
diff --git a/web/src/components/settings/env-info-card.tsx b/web/src/components/settings/env-info-card.tsx
index e85a141..5c4bf46 100644
--- a/web/src/components/settings/env-info-card.tsx
+++ b/web/src/components/settings/env-info-card.tsx
@@ -1,5 +1,3 @@
-import { Card, CardContent, CardHeader, CardTitle } from '@lumina/components/ui/card'
-
 interface EnvInfoItem {
   label: string
   value: string
@@ -11,24 +9,29 @@ interface EnvInfoCardProps {
 
 export function EnvInfoCard({ items }: EnvInfoCardProps) {
   return (
-    <Card className="mt-6 border-dashed">
-      <CardHeader>
-        <CardTitle className="text-sm font-medium text-muted-foreground">
-          环境变量（只读）
-        </CardTitle>
-      </CardHeader>
-      <CardContent>
-        <div className="grid gap-3 sm:grid-cols-2">
-          {items.map((item) => (
-            <div key={item.label} className="space-y-1">
-              <p className="text-xs font-medium text-muted-foreground">
-                {item.label}
-              </p>
-              <p className="text-sm font-mono break-all">{item.value}</p>
-            </div>
-          ))}
-        </div>
-      </CardContent>
-    </Card>
+    <div className="mt-8 border border-line bg-foam">
+      <div className="border-b border-line bg-sand px-5 py-3">
+        <span className="text-[11px] font-bold uppercase tracking-wider text-sea-ink-soft">
+          底层环境变量与只读参数 (ENVIRONMENT READONLY)
+        </span>
+      </div>
+      <div className="grid gap-0 sm:grid-cols-2">
+        {items.map((item, idx) => (
+          <div
+            key={item.label}
+            className={`p-4 px-5 border-b sm:border-b-0 border-line last:border-b-0 flex flex-col gap-1 ${
+              idx % 2 === 0 ? 'sm:border-r' : ''
+            }`}
+          >
+            <span className="font-mono text-[10.5px] font-bold uppercase tracking-wider text-lagoon-deep">
+              {item.label}
+            </span>
+            <span className="font-mono text-xs text-sea-ink break-all select-all">
+              {item.value}
+            </span>
+          </div>
+        ))}
+      </div>
+    </div>
   )
 }
diff --git a/web/src/components/settings/preview-settings-form.tsx b/web/src/components/settings/preview-settings-form.tsx
index 59dd96b..df2d9ce 100644
--- a/web/src/components/settings/preview-settings-form.tsx
+++ b/web/src/components/settings/preview-settings-form.tsx
@@ -1,9 +1,7 @@
-import { useState, useEffect } from 'react'
-import { Card, CardContent, CardHeader, CardTitle } from '@lumina/components/ui/card'
-import { Button } from '@lumina/components/ui/button'
+import { useState, useEffect, useMemo } from 'react'
 import { Input } from '@lumina/components/ui/input'
-import { Label } from '@lumina/components/ui/label'
 import { useSettings, useUpdateSettings } from '#/hooks/useSettings'
+import { PropertyGrid, PropertyRow, SettingsCommitDock } from './property-grid'
 import { toast } from 'sonner'
 import { motion } from 'motion/react'
 import { staggerContainer, staggerItem } from '@lumina/components/motion'
@@ -11,6 +9,7 @@ import { staggerContainer, staggerItem } from '@lumina/components/motion'
 export function PreviewSettingsForm() {
   const { data, isLoading } = useSettings('preview')
   const updateMutation = useUpdateSettings()
+  const [initialValues, setInitialValues] = useState<Record<string, string>>({})
   const [formValues, setFormValues] = useState<Record<string, string>>({})
 
   useEffect(() => {
@@ -19,14 +18,29 @@ export function PreviewSettingsForm() {
       data.data.items.forEach((item) => {
         map[item.key] = item.value
       })
+      setInitialValues(map)
       setFormValues(map)
     }
   }, [data])
 
+  const dirtyKeys = useMemo(() => {
+    const keys: string[] = []
+    for (const key of Object.keys(formValues)) {
+      if ((formValues[key] || '') !== (initialValues[key] || '')) {
+        keys.push(key)
+      }
+    }
+    return keys
+  }, [formValues, initialValues])
+
   const handleChange = (key: string, value: string) => {
     setFormValues((prev) => ({ ...prev, [key]: value }))
   }
 
+  const handleReset = () => {
+    setFormValues(initialValues)
+  }
+
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault()
     const items = Object.entries(formValues).map(([key, value]) => ({
@@ -37,10 +51,11 @@ export function PreviewSettingsForm() {
       { category: 'preview', items },
       {
         onSuccess: () => {
-          toast.success('保存成功')
+          toast.success('Preview 设置已保存')
+          setInitialValues(formValues)
         },
         onError: () => {
-          toast.error('保存失败')
+          toast.error('保存失败，请重试')
         },
       },
     )
@@ -48,11 +63,10 @@ export function PreviewSettingsForm() {
 
   if (isLoading) {
     return (
-      <Card>
-        <CardContent className="pt-6">
-          <div className="h-40 animate-pulse rounded-lg bg-muted" />
-        </CardContent>
-      </Card>
+      <div className="border border-line bg-foam p-8 space-y-4">
+        <div className="h-6 w-48 bg-muted animate-pulse rounded-none" />
+        <div className="h-10 w-full bg-muted animate-pulse rounded-none" />
+      </div>
     )
   }
 
@@ -61,38 +75,36 @@ export function PreviewSettingsForm() {
       variants={staggerContainer}
       initial="hidden"
       animate="visible"
+      className="space-y-6"
     >
       <motion.div variants={staggerItem}>
-        <Card>
-          <CardHeader>
-            <CardTitle>Preview 设置</CardTitle>
-          </CardHeader>
-          <CardContent>
-            <form onSubmit={handleSubmit} className="space-y-4">
-              <div className="space-y-2">
-                <Label htmlFor="preview.session.ttl">
-                  会话 TTL（秒）
-                </Label>
-                <Input
-                  id="preview.session.ttl"
-                  type="number"
-                  min={1}
-                  value={formValues['preview.session.ttl'] || ''}
-                  onChange={(e) =>
-                    handleChange('preview.session.ttl', e.target.value)
-                  }
-                  placeholder="604800"
-                />
-                <p className="text-xs text-muted-foreground">
-                  默认 604800（7 天）。只作用于新创建的会话，不回溯已有过期时间。
-                </p>
-              </div>
-              <Button type="submit" disabled={updateMutation.isPending}>
-                {updateMutation.isPending ? '保存中…' : '保存'}
-              </Button>
-            </form>
-          </CardContent>
-        </Card>
+        <form onSubmit={handleSubmit}>
+          <PropertyGrid>
+            <PropertyRow
+              title="会话生存周期 (Session TTL)"
+              propKey="preview.session.ttl"
+              description="默认 604800 秒（7 天）。只作用于新创建的预览沙盒会话，不回溯已有过期时间。"
+            >
+              <Input
+                id="preview.session.ttl"
+                type="number"
+                min={1}
+                value={formValues['preview.session.ttl'] || ''}
+                onChange={(e) =>
+                  handleChange('preview.session.ttl', e.target.value)
+                }
+                placeholder="604800"
+                className="max-w-xs rounded-none border-line text-xs font-mono focus:border-lagoon"
+              />
+            </PropertyRow>
+          </PropertyGrid>
+
+          <SettingsCommitDock
+            dirtyCount={dirtyKeys.length}
+            isSubmitting={updateMutation.isPending}
+            onReset={handleReset}
+          />
+        </form>
       </motion.div>
     </motion.div>
   )
diff --git a/web/src/components/settings/property-grid.tsx b/web/src/components/settings/property-grid.tsx
new file mode 100644
index 0000000..13e45c6
--- /dev/null
+++ b/web/src/components/settings/property-grid.tsx
@@ -0,0 +1,96 @@
+import type { ReactNode } from 'react'
+import { Button } from '@lumina/components/ui/button'
+
+interface PropertyRowProps {
+  title: string
+  propKey: string
+  description?: string
+  children: ReactNode
+}
+
+export function PropertyRow({
+  title,
+  propKey,
+  description,
+  children,
+}: PropertyRowProps) {
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-[320px_1fr] border-b border-line last:border-b-0 hover:bg-sand/40 transition-colors">
+      <div className="p-4 px-5 border-b md:border-b-0 md:border-r border-line bg-sand/60 flex flex-col gap-1">
+        <span className="text-xs font-semibold text-sea-ink">{title}</span>
+        <span className="font-mono text-[10px] text-lagoon-deep select-all">
+          {propKey}
+        </span>
+        {description ? (
+          <p className="text-[11.5px] text-sea-ink-soft leading-relaxed mt-0.5">
+            {description}
+          </p>
+        ) : null}
+      </div>
+      <div className="p-4 px-6 flex items-center">{children}</div>
+    </div>
+  )
+}
+
+interface PropertyGridProps {
+  children: ReactNode
+  className?: string
+}
+
+export function PropertyGrid({ children, className = '' }: PropertyGridProps) {
+  return (
+    <div className={`border border-line bg-foam ${className}`}>{children}</div>
+  )
+}
+
+interface SettingsCommitDockProps {
+  dirtyCount: number
+  isSubmitting?: boolean
+  onReset: () => void
+  disabled?: boolean
+}
+
+export function SettingsCommitDock({
+  dirtyCount,
+  isSubmitting,
+  onReset,
+  disabled,
+}: SettingsCommitDockProps) {
+  const isDirty = dirtyCount > 0
+
+  return (
+    <div className="sticky bottom-0 -mx-4 -mb-4 mt-6 border-t border-line bg-surface-strong/95 p-3.5 px-6 backdrop-blur-md flex items-center justify-between z-30">
+      <div className="flex items-center gap-3">
+        {isDirty ? (
+          <span className="font-mono text-xs font-bold text-lagoon-deep bg-[#fff3e6] border border-lagoon/40 px-2.5 py-0.5">
+            已修改 {dirtyCount} 项待保存
+          </span>
+        ) : (
+          <span className="text-xs text-sea-ink-soft">
+            所有配置已与服务端保持同步
+          </span>
+        )}
+      </div>
+      <div className="flex items-center gap-2">
+        {isDirty && (
+          <Button
+            type="button"
+            variant="outline"
+            onClick={onReset}
+            disabled={isSubmitting}
+            className="rounded-none border-line text-xs hover:bg-chip-bg text-sea-ink"
+          >
+            放弃修改
+          </Button>
+        )}
+        <Button
+          type="submit"
+          disabled={!isDirty || isSubmitting || disabled}
+          className="rounded-none bg-lagoon text-foam hover:bg-lagoon-deep text-xs font-semibold"
+        >
+          {isSubmitting ? '保存中…' : '保存变更'}
+        </Button>
+      </div>
+    </div>
+  )
+}
diff --git a/web/src/components/settings/qa-settings-form.tsx b/web/src/components/settings/qa-settings-form.tsx
index fe5697f..d0f332c 100644
--- a/web/src/components/settings/qa-settings-form.tsx
+++ b/web/src/components/settings/qa-settings-form.tsx
@@ -1,10 +1,8 @@
-import { useState, useEffect } from 'react'
-import { Card, CardContent, CardHeader, CardTitle } from '@lumina/components/ui/card'
-import { Button } from '@lumina/components/ui/button'
+import { useState, useEffect, useMemo } from 'react'
 import { Input } from '@lumina/components/ui/input'
-import { Label } from '@lumina/components/ui/label'
 import { Switch } from '@lumina/components/ui/switch'
 import { useSettings, useUpdateSettings } from '#/hooks/useSettings'
+import { PropertyGrid, PropertyRow, SettingsCommitDock } from './property-grid'
 import { toast } from 'sonner'
 import { motion } from 'motion/react'
 import { staggerContainer, staggerItem } from '@lumina/components/motion'
@@ -12,6 +10,7 @@ import { staggerContainer, staggerItem } from '@lumina/components/motion'
 export function QaSettingsForm() {
   const { data, isLoading } = useSettings('qa')
   const updateMutation = useUpdateSettings()
+  const [initialValues, setInitialValues] = useState<Record<string, string>>({})
   const [formValues, setFormValues] = useState<Record<string, string>>({})
 
   useEffect(() => {
@@ -20,10 +19,21 @@ export function QaSettingsForm() {
       data.data.items.forEach((item) => {
         map[item.key] = item.value
       })
+      setInitialValues(map)
       setFormValues(map)
     }
   }, [data])
 
+  const dirtyKeys = useMemo(() => {
+    const keys: string[] = []
+    for (const key of Object.keys(formValues)) {
+      if ((formValues[key] || '') !== (initialValues[key] || '')) {
+        keys.push(key)
+      }
+    }
+    return keys
+  }, [formValues, initialValues])
+
   const handleChange = (key: string, value: string) => {
     setFormValues((prev) => ({ ...prev, [key]: value }))
   }
@@ -32,6 +42,10 @@ export function QaSettingsForm() {
     setFormValues((prev) => ({ ...prev, [key]: String(checked) }))
   }
 
+  const handleReset = () => {
+    setFormValues(initialValues)
+  }
+
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault()
     const items = Object.entries(formValues).map(([key, value]) => ({
@@ -42,10 +56,11 @@ export function QaSettingsForm() {
       { category: 'qa', items },
       {
         onSuccess: () => {
-          toast.success('保存成功')
+          toast.success('Q&A 设置已保存')
+          setInitialValues(formValues)
         },
         onError: () => {
-          toast.error('保存失败')
+          toast.error('保存失败，请重试')
         },
       },
     )
@@ -53,11 +68,11 @@ export function QaSettingsForm() {
 
   if (isLoading) {
     return (
-      <Card>
-        <CardContent className="pt-6">
-          <div className="h-40 animate-pulse rounded-lg bg-muted" />
-        </CardContent>
-      </Card>
+      <div className="border border-line bg-foam p-8 space-y-4">
+        <div className="h-6 w-48 bg-muted animate-pulse rounded-none" />
+        <div className="h-10 w-full bg-muted animate-pulse rounded-none" />
+        <div className="h-10 w-full bg-muted animate-pulse rounded-none" />
+      </div>
     )
   }
 
@@ -66,93 +81,106 @@ export function QaSettingsForm() {
       variants={staggerContainer}
       initial="hidden"
       animate="visible"
+      className="space-y-6"
     >
       <motion.div variants={staggerItem}>
-        <Card>
-          <CardHeader>
-            <CardTitle>Q&A 设置</CardTitle>
-          </CardHeader>
-          <CardContent>
-            <form onSubmit={handleSubmit} className="space-y-4">
-              <div className="space-y-2">
-                <Label htmlFor="qa.session.ttl">
-                  Session TTL（秒）
-                </Label>
-                <Input
-                  id="qa.session.ttl"
-                  type="number"
-                  value={formValues['qa.session.ttl'] || ''}
-                  onChange={(e) =>
-                    handleChange('qa.session.ttl', e.target.value)
-                  }
-                  placeholder="604800"
-                />
-              </div>
-              <div className="space-y-2">
-                <Label htmlFor="qa.get-answer.poll-slice">
-                  轮询间隔（毫秒）
-                </Label>
-                <Input
-                  id="qa.get-answer.poll-slice"
-                  type="number"
-                  value={formValues['qa.get-answer.poll-slice'] || ''}
-                  onChange={(e) =>
-                    handleChange('qa.get-answer.poll-slice', e.target.value)
-                  }
-                  placeholder="1000"
-                />
-              </div>
-              <div className="space-y-2">
-                <Label htmlFor="qa.get-answer.max-retries">
-                  最大重试次数
-                </Label>
-                <Input
-                  id="qa.get-answer.max-retries"
-                  type="number"
-                  value={formValues['qa.get-answer.max-retries'] || ''}
-                  onChange={(e) =>
-                    handleChange('qa.get-answer.max-retries', e.target.value)
-                  }
-                  placeholder="30"
-                />
-              </div>
-              <div className="space-y-2">
-                <Label htmlFor="qa.max-active-sessions">
-                  最大活跃会话数
-                </Label>
-                <Input
-                  id="qa.max-active-sessions"
-                  type="number"
-                  value={formValues['qa.max-active-sessions'] || ''}
-                  onChange={(e) =>
-                    handleChange('qa.max-active-sessions', e.target.value)
-                  }
-                  placeholder="100"
-                />
-              </div>
-              <div className="flex items-center justify-between rounded-lg border p-4">
-                <div className="space-y-0.5">
-                  <Label htmlFor="qa.enable-file-upload" className="text-base">
-                    启用文件上传
-                  </Label>
-                  <p className="text-sm text-muted-foreground">
-                    允许用户在问答中上传文件
-                  </p>
-                </div>
+        <form onSubmit={handleSubmit}>
+          <PropertyGrid>
+            <PropertyRow
+              title="会话生存周期 (Session TTL)"
+              propKey="qa.session.ttl"
+              description="问答会话在未发生交互后的存活秒数，超时后自动归档（默认 7 天）。"
+            >
+              <Input
+                id="qa.session.ttl"
+                type="number"
+                value={formValues['qa.session.ttl'] || ''}
+                onChange={(e) => handleChange('qa.session.ttl', e.target.value)}
+                placeholder="604800"
+                className="max-w-xs rounded-none border-line text-xs font-mono focus:border-lagoon"
+              />
+            </PropertyRow>
+
+            <PropertyRow
+              title="队列轮询片节拍 (Poll Slice)"
+              propKey="qa.get-answer.poll-slice"
+              description="Agent 通过 MCP 等待回答时，后台队列轮询的时间步长（毫秒）。"
+            >
+              <Input
+                id="qa.get-answer.poll-slice"
+                type="number"
+                value={formValues['qa.get-answer.poll-slice'] || ''}
+                onChange={(e) =>
+                  handleChange('qa.get-answer.poll-slice', e.target.value)
+                }
+                placeholder="1000"
+                className="max-w-xs rounded-none border-line text-xs font-mono focus:border-lagoon"
+              />
+            </PropertyRow>
+
+            <PropertyRow
+              title="最大重试轮次 (Max Retries)"
+              propKey="qa.get-answer.max-retries"
+              description="等待回答超时的最大轮询次数上限，超过后向 Agent 返回超时。"
+            >
+              <Input
+                id="qa.get-answer.max-retries"
+                type="number"
+                value={formValues['qa.get-answer.max-retries'] || ''}
+                onChange={(e) =>
+                  handleChange('qa.get-answer.max-retries', e.target.value)
+                }
+                placeholder="30"
+                className="max-w-xs rounded-none border-line text-xs font-mono focus:border-lagoon"
+              />
+            </PropertyRow>
+
+            <PropertyRow
+              title="最大活跃会话并发限制"
+              propKey="qa.max-active-sessions"
+              description="当前工作空间允许同时处于等待或应答状态的最大会话数。"
+            >
+              <Input
+                id="qa.max-active-sessions"
+                type="number"
+                value={formValues['qa.max-active-sessions'] || ''}
+                onChange={(e) =>
+                  handleChange('qa.max-active-sessions', e.target.value)
+                }
+                placeholder="100"
+                className="max-w-xs rounded-none border-line text-xs font-mono focus:border-lagoon"
+              />
+            </PropertyRow>
+
+            <PropertyRow
+              title="交互式文件附件上传"
+              propKey="qa.enable-file-upload"
+              description="允许用户在问答交互界面提交图片与本地辅助文件附件。"
+            >
+              <div className="flex items-center gap-3">
                 <Switch
                   id="qa.enable-file-upload"
                   checked={formValues['qa.enable-file-upload'] === 'true'}
                   onCheckedChange={(checked) =>
                     handleSwitchChange('qa.enable-file-upload', checked)
                   }
+                  className="rounded-none data-[state=checked]:bg-lagoon"
                 />
+                <span className="font-mono text-xs text-sea-ink-soft">
+                  {formValues['qa.enable-file-upload'] === 'true'
+                    ? '已启用 (ENABLED)'
+                    : '已禁用 (DISABLED)'}
+                </span>
               </div>
-              <Button type="submit" disabled={updateMutation.isPending}>
-                {updateMutation.isPending ? '保存中…' : '保存'}
-              </Button>
-            </form>
-          </CardContent>
-        </Card>
+            </PropertyRow>
+          </PropertyGrid>
+
+          <SettingsCommitDock
+            dirtyCount={dirtyKeys.length}
+            isSubmitting={updateMutation.isPending}
+            onReset={handleReset}
+          />
+        </form>
       </motion.div>
     </motion.div>
   )
diff --git a/web/src/components/settings/repowiki-settings-form.tsx b/web/src/components/settings/repowiki-settings-form.tsx
index ed70a89..6e29cb0 100644
--- a/web/src/components/settings/repowiki-settings-form.tsx
+++ b/web/src/components/settings/repowiki-settings-form.tsx
@@ -1,10 +1,8 @@
-import { useState, useEffect } from 'react'
-import { Card, CardContent, CardHeader, CardTitle } from '@lumina/components/ui/card'
-import { Button } from '@lumina/components/ui/button'
+import { useState, useEffect, useMemo } from 'react'
 import { Input } from '@lumina/components/ui/input'
-import { Label } from '@lumina/components/ui/label'
 import { useSettings, useUpdateSettings } from '#/hooks/useSettings'
 import { EnvInfoCard } from './env-info-card'
+import { PropertyGrid, PropertyRow, SettingsCommitDock } from './property-grid'
 import { toast } from 'sonner'
 import { motion } from 'motion/react'
 import { staggerContainer, staggerItem } from '@lumina/components/motion'
@@ -12,6 +10,7 @@ import { staggerContainer, staggerItem } from '@lumina/components/motion'
 export function RepowikiSettingsForm() {
   const { data, isLoading } = useSettings('repowiki')
   const updateMutation = useUpdateSettings()
+  const [initialValues, setInitialValues] = useState<Record<string, string>>({})
   const [formValues, setFormValues] = useState<Record<string, string>>({})
 
   useEffect(() => {
@@ -20,14 +19,30 @@ export function RepowikiSettingsForm() {
       data.data.items.forEach((item) => {
         map[item.key] = item.value
       })
+      setInitialValues(map)
       setFormValues(map)
     }
   }, [data])
 
+  const dirtyCount = useMemo(() => {
+    let count = 0
+    Object.keys(formValues).forEach((key) => {
+      if ((formValues[key] || '') !== (initialValues[key] || '')) {
+        count++
+      }
+    })
+    return count
+  }, [formValues, initialValues])
+
   const handleChange = (key: string, value: string) => {
     setFormValues((prev) => ({ ...prev, [key]: value }))
   }
 
+  const handleReset = () => {
+    setFormValues(initialValues)
+    toast.info('已撤销所有未保存的修改')
+  }
+
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault()
     const items = Object.entries(formValues).map(([key, value]) => ({
@@ -38,10 +53,11 @@ export function RepowikiSettingsForm() {
       { category: 'repowiki', items },
       {
         onSuccess: () => {
-          toast.success('保存成功')
+          setInitialValues(formValues)
+          toast.success('RepoWiki 设置已保存')
         },
         onError: () => {
-          toast.error('保存失败')
+          toast.error('保存失败，请检查参数')
         },
       },
     )
@@ -49,11 +65,9 @@ export function RepowikiSettingsForm() {
 
   if (isLoading) {
     return (
-      <Card>
-        <CardContent className="pt-6">
-          <div className="h-40 animate-pulse rounded-lg bg-muted" />
-        </CardContent>
-      </Card>
+      <div className="border border-line bg-foam p-6">
+        <div className="h-40 animate-pulse bg-muted" />
+      </div>
     )
   }
 
@@ -62,69 +76,84 @@ export function RepowikiSettingsForm() {
       variants={staggerContainer}
       initial="hidden"
       animate="visible"
+      className="space-y-6"
     >
       <motion.div variants={staggerItem}>
-        <Card>
-          <CardHeader>
-            <CardTitle>RepoWiki 设置</CardTitle>
-          </CardHeader>
-          <CardContent>
-            <form onSubmit={handleSubmit} className="space-y-4">
-              <div className="space-y-2">
-                <Label htmlFor="repowiki.default-language">
-                  默认语言
-                </Label>
-                <Input
-                  id="repowiki.default-language"
-                  value={formValues['repowiki.default-language'] || ''}
-                  onChange={(e) =>
-                    handleChange('repowiki.default-language', e.target.value)
-                  }
-                  placeholder="zh-CN"
-                />
-              </div>
-              <div className="space-y-2">
-                <Label htmlFor="repowiki.default-branch">
-                  默认分支
-                </Label>
-                <Input
-                  id="repowiki.default-branch"
-                  value={formValues['repowiki.default-branch'] || ''}
-                  onChange={(e) =>
-                    handleChange('repowiki.default-branch', e.target.value)
-                  }
-                  placeholder="main"
-                />
-              </div>
-              <div className="space-y-2">
-                <Label htmlFor="repowiki.wiki-cookie-max-age">
-                  Wiki Cookie 有效期（秒）
-                </Label>
-                <Input
-                  id="repowiki.wiki-cookie-max-age"
-                  type="number"
-                  value={formValues['repowiki.wiki-cookie-max-age'] || ''}
-                  onChange={(e) =>
-                    handleChange(
-                      'repowiki.wiki-cookie-max-age',
-                      e.target.value,
-                    )
-                  }
-                  placeholder="3600"
-                />
-              </div>
-              <Button type="submit" disabled={updateMutation.isPending}>
-                {updateMutation.isPending ? '保存中…' : '保存'}
-              </Button>
-            </form>
-          </CardContent>
-        </Card>
+        <form onSubmit={handleSubmit}>
+          <PropertyGrid>
+            <PropertyRow
+              title="默认文档语言"
+              propKey="repowiki.default-language"
+              description="RepoWiki 生成架构文档与 Markdown 报告时的首选语言标识。"
+            >
+              <Input
+                id="repowiki.default-language"
+                value={formValues['repowiki.default-language'] || ''}
+                onChange={(e) =>
+                  handleChange('repowiki.default-language', e.target.value)
+                }
+                placeholder="zh-CN"
+                className="max-w-md rounded-none border-line bg-foam text-xs"
+              />
+            </PropertyRow>
+
+            <PropertyRow
+              title="默认分析分支"
+              propKey="repowiki.default-branch"
+              description="代码仓库进行 5 角色 SubAgent 分析时默认检出并扫描的目标分支。"
+            >
+              <Input
+                id="repowiki.default-branch"
+                value={formValues['repowiki.default-branch'] || ''}
+                onChange={(e) =>
+                  handleChange('repowiki.default-branch', e.target.value)
+                }
+                placeholder="main"
+                className="max-w-md rounded-none border-line bg-foam text-xs"
+              />
+            </PropertyRow>
+
+            <PropertyRow
+              title="Wiki Cookie 有效期 (秒)"
+              propKey="repowiki.wiki-cookie-max-age"
+              description="Wiki Reader 密码门访问认证 Token 的浏览器 Cookie 保持时长。"
+            >
+              <Input
+                id="repowiki.wiki-cookie-max-age"
+                type="number"
+                value={formValues['repowiki.wiki-cookie-max-age'] || ''}
+                onChange={(e) =>
+                  handleChange('repowiki.wiki-cookie-max-age', e.target.value)
+                }
+                placeholder="3600"
+                className="max-w-md rounded-none border-line bg-foam text-xs"
+              />
+            </PropertyRow>
+          </PropertyGrid>
+
+          <SettingsCommitDock
+            dirtyCount={dirtyCount}
+            isSubmitting={updateMutation.isPending}
+            onReset={handleReset}
+          />
+        </form>
       </motion.div>
+
       <motion.div variants={staggerItem}>
         <EnvInfoCard
           items={[
-            { label: 'REPOWIKI_STORAGE_PATH', value: '/data/repowiki' },
-            { label: 'REPOWIKI_MAX_CONCURRENT', value: '5' },
+            {
+              label: 'REPOWIKI_STORAGE_PATH',
+              value: 'Wiki 文档存储根目录路径 (只读)',
+            },
+            {
+              label: 'REPOWIKI_MAX_CONCURRENT',
+              value: '最大并发分析任务数 (只读)',
+            },
+            {
+              label: 'REPOWIKI_TASK_TIMEOUT',
+              value: '单次分析任务超时时间 (只读)',
+            },
           ]}
         />
       </motion.div>
diff --git a/web/src/components/settings/security-settings-form.tsx b/web/src/components/settings/security-settings-form.tsx
index 690591d..6d01cfb 100644
--- a/web/src/components/settings/security-settings-form.tsx
+++ b/web/src/components/settings/security-settings-form.tsx
@@ -1,9 +1,7 @@
-import { useState, useEffect } from 'react'
-import { Card, CardContent, CardHeader, CardTitle } from '@lumina/components/ui/card'
-import { Button } from '@lumina/components/ui/button'
+import { useState, useEffect, useMemo } from 'react'
 import { Input } from '@lumina/components/ui/input'
-import { Label } from '@lumina/components/ui/label'
 import { useSettings, useUpdateSettings } from '#/hooks/useSettings'
+import { PropertyGrid, PropertyRow, SettingsCommitDock } from './property-grid'
 import { toast } from 'sonner'
 import { motion } from 'motion/react'
 import { staggerContainer, staggerItem } from '@lumina/components/motion'
@@ -11,6 +9,7 @@ import { staggerContainer, staggerItem } from '@lumina/components/motion'
 export function SecuritySettingsForm() {
   const { data, isLoading } = useSettings('security')
   const updateMutation = useUpdateSettings()
+  const [initialValues, setInitialValues] = useState<Record<string, string>>({})
   const [formValues, setFormValues] = useState<Record<string, string>>({})
 
   useEffect(() => {
@@ -19,14 +18,30 @@ export function SecuritySettingsForm() {
       data.data.items.forEach((item) => {
         map[item.key] = item.value
       })
+      setInitialValues(map)
       setFormValues(map)
     }
   }, [data])
 
+  const dirtyCount = useMemo(() => {
+    let count = 0
+    Object.keys(formValues).forEach((key) => {
+      if ((formValues[key] || '') !== (initialValues[key] || '')) {
+        count++
+      }
+    })
+    return count
+  }, [formValues, initialValues])
+
   const handleChange = (key: string, value: string) => {
     setFormValues((prev) => ({ ...prev, [key]: value }))
   }
 
+  const handleReset = () => {
+    setFormValues(initialValues)
+    toast.info('已撤销所有未保存的修改')
+  }
+
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault()
     const items = Object.entries(formValues).map(([key, value]) => ({
@@ -37,10 +52,11 @@ export function SecuritySettingsForm() {
       { category: 'security', items },
       {
         onSuccess: () => {
-          toast.success('保存成功')
+          setInitialValues(formValues)
+          toast.success('安全策略设置已保存')
         },
         onError: () => {
-          toast.error('保存失败')
+          toast.error('保存失败，请检查参数')
         },
       },
     )
@@ -48,11 +64,9 @@ export function SecuritySettingsForm() {
 
   if (isLoading) {
     return (
-      <Card>
-        <CardContent className="pt-6">
-          <div className="h-40 animate-pulse rounded-lg bg-muted" />
-        </CardContent>
-      </Card>
+      <div className="border border-line bg-foam p-6">
+        <div className="h-40 animate-pulse bg-muted" />
+      </div>
     )
   }
 
@@ -61,76 +75,86 @@ export function SecuritySettingsForm() {
       variants={staggerContainer}
       initial="hidden"
       animate="visible"
+      className="space-y-6"
     >
       <motion.div variants={staggerItem}>
-        <Card>
-          <CardHeader>
-            <CardTitle>安全设置</CardTitle>
-          </CardHeader>
-          <CardContent>
-            <form onSubmit={handleSubmit} className="space-y-4">
-              <div className="space-y-2">
-                <Label htmlFor="security.access-token-ttl">
-                  Access Token TTL（秒）
-                </Label>
-                <Input
-                  id="security.access-token-ttl"
-                  type="number"
-                  value={formValues['security.access-token-ttl'] || ''}
-                  onChange={(e) =>
-                    handleChange('security.access-token-ttl', e.target.value)
-                  }
-                  placeholder="3600"
-                />
-              </div>
-              <div className="space-y-2">
-                <Label htmlFor="security.refresh-token-ttl">
-                  Refresh Token TTL（秒）
-                </Label>
-                <Input
-                  id="security.refresh-token-ttl"
-                  type="number"
-                  value={formValues['security.refresh-token-ttl'] || ''}
-                  onChange={(e) =>
-                    handleChange('security.refresh-token-ttl', e.target.value)
-                  }
-                  placeholder="604800"
-                />
-              </div>
-              <div className="space-y-2">
-                <Label htmlFor="security.max-api-keys">
-                  最大 API Key 数量
-                </Label>
-                <Input
-                  id="security.max-api-keys"
-                  type="number"
-                  value={formValues['security.max-api-keys'] || ''}
-                  onChange={(e) =>
-                    handleChange('security.max-api-keys', e.target.value)
-                  }
-                  placeholder="10"
-                />
-              </div>
-              <div className="space-y-2">
-                <Label htmlFor="security.webauthn-timeout">
-                  WebAuthn 超时（毫秒）
-                </Label>
-                <Input
-                  id="security.webauthn-timeout"
-                  type="number"
-                  value={formValues['security.webauthn-timeout'] || ''}
-                  onChange={(e) =>
-                    handleChange('security.webauthn-timeout', e.target.value)
-                  }
-                  placeholder="60000"
-                />
-              </div>
-              <Button type="submit" disabled={updateMutation.isPending}>
-                {updateMutation.isPending ? '保存中…' : '保存'}
-              </Button>
-            </form>
-          </CardContent>
-        </Card>
+        <form onSubmit={handleSubmit}>
+          <PropertyGrid>
+            <PropertyRow
+              title="Access Token TTL (秒)"
+              propKey="security.access-token-ttl"
+              description="控制台 Bearer 访问令牌的生存有效时长。"
+            >
+              <Input
+                id="security.access-token-ttl"
+                type="number"
+                value={formValues['security.access-token-ttl'] || ''}
+                onChange={(e) =>
+                  handleChange('security.access-token-ttl', e.target.value)
+                }
+                placeholder="3600"
+                className="max-w-md rounded-none border-line bg-foam text-xs"
+              />
+            </PropertyRow>
+
+            <PropertyRow
+              title="Refresh Token TTL (秒)"
+              propKey="security.refresh-token-ttl"
+              description="用于刷新登录态的 Refresh Token 保持时限。"
+            >
+              <Input
+                id="security.refresh-token-ttl"
+                type="number"
+                value={formValues['security.refresh-token-ttl'] || ''}
+                onChange={(e) =>
+                  handleChange('security.refresh-token-ttl', e.target.value)
+                }
+                placeholder="604800"
+                className="max-w-md rounded-none border-line bg-foam text-xs"
+              />
+            </PropertyRow>
+
+            <PropertyRow
+              title="最大 API Key 数量配额"
+              propKey="security.max-api-keys"
+              description="每个工作空间或单个用户允许创建的活动 API Key 上限。"
+            >
+              <Input
+                id="security.max-api-keys"
+                type="number"
+                value={formValues['security.max-api-keys'] || ''}
+                onChange={(e) =>
+                  handleChange('security.max-api-keys', e.target.value)
+                }
+                placeholder="10"
+                className="max-w-md rounded-none border-line bg-foam text-xs"
+              />
+            </PropertyRow>
+
+            <PropertyRow
+              title="WebAuthn 超时时间 (毫秒)"
+              propKey="security.webauthn-timeout"
+              description="通行密钥 (Passkey) 生物认证请求的浏览器握手等待时限。"
+            >
+              <Input
+                id="security.webauthn-timeout"
+                type="number"
+                value={formValues['security.webauthn-timeout'] || ''}
+                onChange={(e) =>
+                  handleChange('security.webauthn-timeout', e.target.value)
+                }
+                placeholder="60000"
+                className="max-w-md rounded-none border-line bg-foam text-xs"
+              />
+            </PropertyRow>
+          </PropertyGrid>
+
+          <SettingsCommitDock
+            dirtyCount={dirtyCount}
+            isSubmitting={updateMutation.isPending}
+            onReset={handleReset}
+          />
+        </form>
       </motion.div>
     </motion.div>
   )
diff --git a/web/src/components/settings/settings-sidebar.tsx b/web/src/components/settings/settings-sidebar.tsx
new file mode 100644
index 0000000..62aeccf
--- /dev/null
+++ b/web/src/components/settings/settings-sidebar.tsx
@@ -0,0 +1,286 @@
+import { useMemo, useState } from 'react'
+import { useNavigate, useSearch } from '@tanstack/react-router'
+import { motion } from 'motion/react'
+import { Search } from 'lucide-react'
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarHeader,
+} from '@lumina/components/ui/sidebar'
+import { sidebarItem, sidebarStaggerContainer } from '@lumina/components/motion'
+
+export type SettingsTabId =
+  | 'site'
+  | 'profile'
+  | 'apikey'
+  | 'qa'
+  | 'preview'
+  | 'repowiki'
+  | 'security'
+  | 'provider'
+  | 'model'
+  | 'agent'
+
+export interface SettingsCategoryItem {
+  id: SettingsTabId
+  name: string
+  slug: string
+  chip: string
+  description: string
+  keywords: string[]
+  externalPath?: string
+}
+
+export interface SettingsCategoryGroup {
+  groupLabel: string
+  items: SettingsCategoryItem[]
+}
+
+export const SETTINGS_GROUPS: SettingsCategoryGroup[] = [
+  {
+    groupLabel: '基础标识',
+    items: [
+      {
+        id: 'site',
+        name: '站点信息',
+        slug: 'sys.site.*',
+        chip: '就绪',
+        description: '配置站点全称、对外访问域名与公共端点标识。',
+        keywords: ['site', '站点', '域名', 'logo', 'footer'],
+      },
+      {
+        id: 'profile',
+        name: '个人资料',
+        slug: 'sys.user.*',
+        chip: 'ROOT',
+        description: '维护管理员账号、邮箱与密码/WebAuthn凭据。',
+        keywords: ['profile', 'user', '个人资料', '密码', 'webauthn'],
+        externalPath: '/console/profile',
+      },
+      {
+        id: 'apikey',
+        name: '令牌管理',
+        slug: 'sys.token.*',
+        chip: '密钥',
+        description: '发放与管理用于 MCP 及 REST API 调用的访问令牌。',
+        keywords: ['apikey', 'token', '令牌', '密钥'],
+        externalPath: '/console/apikey',
+      },
+    ],
+  },
+  {
+    groupLabel: '运行时生命周期',
+    items: [
+      {
+        id: 'qa',
+        name: 'Q&A 参数',
+        slug: 'qa.session.*',
+        chip: '7 天',
+        description: '问答会话存活时长、轮询节拍与 WebSocket 同步超时。',
+        keywords: ['qa', '问答', 'ttl', 'queue', 'token'],
+      },
+      {
+        id: 'preview',
+        name: 'Preview 沙盒',
+        slug: 'preview.sync.*',
+        chip: '256KB',
+        description: '单文件大小配额、实时刷新心跳与会话生命周期回收。',
+        keywords: ['preview', '预览', '沙盒', 'quota', 'sync', '256kb'],
+      },
+      {
+        id: 'repowiki',
+        name: 'RepoWiki 参数',
+        slug: 'wiki.engine.*',
+        chip: '5 角色',
+        description: 'SubAgent 编排超时、Git 克隆深度与自动化流水线重试。',
+        keywords: ['repowiki', 'wiki', 'subagent', 'git', 'agent', '5角色'],
+      },
+    ],
+  },
+  {
+    groupLabel: '智能网格与安全',
+    items: [
+      {
+        id: 'provider',
+        name: 'Provider 供应',
+        slug: 'llm.provider.*',
+        chip: 'AES',
+        description:
+          '管理 OpenAI、Anthropic、DeepSeek 等模型上游端点与加密凭据。',
+        keywords: ['provider', 'llm', '供应商', 'endpoint', 'api key', '密钥'],
+      },
+      {
+        id: 'model',
+        name: '模型目录',
+        slug: 'llm.model.*',
+        chip: '多模型',
+        description: '注册大语言模型实例，配置上下文长度与能力特性。',
+        keywords: ['model', '模型', 'llm', 'model list', 'gpt', 'claude'],
+      },
+      {
+        id: 'agent',
+        name: 'Agent 分配',
+        slug: 'llm.agent.*',
+        chip: '角色编排',
+        description:
+          '为 Coordinator、Explore、Architect、Writer 等角色绑定模型。',
+        keywords: [
+          'agent',
+          '角色',
+          'coordinator',
+          'explore',
+          'writer',
+          'validator',
+        ],
+      },
+      {
+        id: 'security',
+        name: '安全策略',
+        slug: 'security.*',
+        chip: '严格',
+        description: '跨域 CORS 白名单、令牌有效周期与 WebAuthn 凭据安全。',
+        keywords: [
+          'security',
+          '安全',
+          'cors',
+          'token',
+          'biometric',
+          'webauthn',
+        ],
+      },
+    ],
+  },
+]
+
+export function SettingsSidebar() {
+  const navigate = useNavigate()
+  const search = useSearch({ strict: false })
+  const currentTab = search.tab || 'site'
+  const [filterQuery, setFilterQuery] = useState('')
+
+  const filteredGroups = useMemo(() => {
+    if (!filterQuery.trim()) return SETTINGS_GROUPS
+    const q = filterQuery.toLowerCase().trim()
+    return SETTINGS_GROUPS.map((group) => ({
+      ...group,
+      items: group.items.filter(
+        (item) =>
+          item.name.toLowerCase().includes(q) ||
+          item.slug.toLowerCase().includes(q) ||
+          item.keywords.some((k) => k.toLowerCase().includes(q)),
+      ),
+    })).filter((group) => group.items.length > 0)
+  }, [filterQuery])
+
+  const handleSelectTab = (item: SettingsCategoryItem) => {
+    if (item.externalPath) {
+      void navigate({ to: item.externalPath })
+      return
+    }
+    void navigate({
+      to: '/console/settings',
+      search: { tab: item.id as 'site' | 'qa' | 'preview' | 'repowiki' | 'security' | 'provider' | 'model' | 'agent' },
+      replace: true,
+    })
+  }
+
+  return (
+    <Sidebar variant="inset" className="border-r border-line bg-sidebar">
+      <motion.div
+        className="flex h-full flex-col"
+        initial="hidden"
+        animate="visible"
+        variants={sidebarStaggerContainer}
+      >
+        {/* 顶部纯粹标识与搜索框：不放重复的返回按钮 */}
+        <SidebarHeader className="border-b border-line bg-surface-strong p-4 pb-3.5 flex flex-col gap-3">
+          <motion.div
+            variants={sidebarItem}
+            className="flex items-center justify-between"
+          >
+            <div className="flex items-center gap-2">
+              <span className="size-2 rounded-full bg-lagoon shadow-[0_0_0_2px_rgba(201,136,58,0.2)]" />
+              <span className="text-sm font-semibold tracking-wide text-sea-ink">
+                系统设置
+              </span>
+            </div>
+            <span className="font-mono text-[10px] tracking-wider text-lagoon-deep bg-chip-bg border border-chip-line px-1.5 py-0.5">
+              SETTINGS
+            </span>
+          </motion.div>
+
+          <motion.div variants={sidebarItem}>
+            <div className="flex h-8 items-center gap-2 border border-line bg-foam px-2.5 transition-colors focus-within:border-lagoon">
+              <Search className="size-3 text-sea-ink-soft shrink-0" />
+              <input
+                type="text"
+                value={filterQuery}
+                onChange={(e) => setFilterQuery(e.target.value)}
+                placeholder="按名称或 Key 过滤设置..."
+                className="w-full bg-transparent text-xs text-sea-ink outline-none placeholder:text-sea-ink-soft"
+              />
+            </div>
+          </motion.div>
+        </SidebarHeader>
+
+        {/* 分类索引树 */}
+        <SidebarContent className="flex-1 overflow-y-auto px-0 py-3 space-y-4">
+          {filteredGroups.map((group) => (
+            <div key={group.groupLabel} className="flex flex-col">
+              <div className="px-4 pb-1.5 text-[10.5px] font-bold uppercase tracking-wider text-lagoon-deep">
+                {group.groupLabel}
+              </div>
+              <div className="flex flex-col">
+                {group.items.map((item) => {
+                  const isActive = currentTab === item.id
+                  return (
+                    <button
+                      key={item.id}
+                      type="button"
+                      onClick={() => handleSelectTab(item)}
+                      className={`group flex items-center justify-between px-4 py-2 text-left transition-colors border-l-3 ${
+                        isActive
+                          ? 'border-l-lagoon bg-foam shadow-[0_1px_3px_rgba(43,32,24,0.04)] font-medium'
+                          : 'border-l-transparent text-sea-ink-soft hover:bg-link-bg-hover hover:text-sea-ink'
+                      }`}
+                    >
+                      <div className="flex flex-col gap-0.5 min-w-0">
+                        <span
+                          className={`text-xs truncate ${
+                            isActive
+                              ? 'text-sea-ink font-semibold'
+                              : 'text-sea-ink'
+                          }`}
+                        >
+                          {item.name}
+                        </span>
+                        <span className="font-mono text-[9.5px] text-sea-ink-soft truncate">
+                          {item.slug}
+                        </span>
+                      </div>
+                      <span className="font-mono text-[9.5px] px-1.5 py-0.5 shrink-0 bg-chip-bg text-lagoon-deep border border-chip-line">
+                        {item.chip}
+                      </span>
+                    </button>
+                  )
+                })}
+              </div>
+            </div>
+          ))}
+          {filteredGroups.length === 0 ? (
+            <div className="px-4 py-6 text-center text-xs text-sea-ink-soft">
+              无匹配的设置项
+            </div>
+          ) : null}
+        </SidebarContent>
+
+        {/* 底部信息栏 */}
+        <SidebarFooter className="border-t border-line bg-sand px-4 py-3 flex items-center justify-between text-[11px] font-mono text-sea-ink-soft">
+          <span>HOST: lumina-node</span>
+          <span className="text-[#2e6930] font-semibold">STATUS: READY</span>
+        </SidebarFooter>
+      </motion.div>
+    </Sidebar>
+  )
+}
diff --git a/web/src/components/settings/site-settings-form.tsx b/web/src/components/settings/site-settings-form.tsx
index bfdf89b..561b958 100644
--- a/web/src/components/settings/site-settings-form.tsx
+++ b/web/src/components/settings/site-settings-form.tsx
@@ -1,11 +1,9 @@
-import { useState, useEffect } from 'react'
-import { Card, CardContent, CardHeader, CardTitle } from '@lumina/components/ui/card'
-import { Button } from '@lumina/components/ui/button'
+import { useState, useEffect, useMemo } from 'react'
 import { Input } from '@lumina/components/ui/input'
-import { Label } from '@lumina/components/ui/label'
 import { Textarea } from '@lumina/components/ui/textarea'
 import { useSettings, useUpdateSettings } from '#/hooks/useSettings'
 import { EnvInfoCard } from './env-info-card'
+import { PropertyGrid, PropertyRow, SettingsCommitDock } from './property-grid'
 import { toast } from 'sonner'
 import { motion } from 'motion/react'
 import { staggerContainer, staggerItem } from '@lumina/components/motion'
@@ -13,6 +11,7 @@ import { staggerContainer, staggerItem } from '@lumina/components/motion'
 export function SiteSettingsForm() {
   const { data, isLoading } = useSettings('site')
   const updateMutation = useUpdateSettings()
+  const [initialValues, setInitialValues] = useState<Record<string, string>>({})
   const [formValues, setFormValues] = useState<Record<string, string>>({})
 
   useEffect(() => {
@@ -21,14 +20,29 @@ export function SiteSettingsForm() {
       data.data.items.forEach((item) => {
         map[item.key] = item.value
       })
+      setInitialValues(map)
       setFormValues(map)
     }
   }, [data])
 
+  const dirtyKeys = useMemo(() => {
+    const keys: string[] = []
+    for (const key of Object.keys(formValues)) {
+      if ((formValues[key] || '') !== (initialValues[key] || '')) {
+        keys.push(key)
+      }
+    }
+    return keys
+  }, [formValues, initialValues])
+
   const handleChange = (key: string, value: string) => {
     setFormValues((prev) => ({ ...prev, [key]: value }))
   }
 
+  const handleReset = () => {
+    setFormValues(initialValues)
+  }
+
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault()
     const items = Object.entries(formValues).map(([key, value]) => ({
@@ -39,10 +53,11 @@ export function SiteSettingsForm() {
       { category: 'site', items },
       {
         onSuccess: () => {
-          toast.success('保存成功')
+          toast.success('站点设置已保存')
+          setInitialValues(formValues)
         },
         onError: () => {
-          toast.error('保存失败')
+          toast.error('保存失败，请重试')
         },
       },
     )
@@ -50,11 +65,11 @@ export function SiteSettingsForm() {
 
   if (isLoading) {
     return (
-      <Card>
-        <CardContent className="pt-6">
-          <div className="h-40 animate-pulse rounded-lg bg-muted" />
-        </CardContent>
-      </Card>
+      <div className="border border-line bg-foam p-8 space-y-4">
+        <div className="h-6 w-48 bg-muted animate-pulse rounded-none" />
+        <div className="h-10 w-full bg-muted animate-pulse rounded-none" />
+        <div className="h-10 w-full bg-muted animate-pulse rounded-none" />
+      </div>
     )
   }
 
@@ -63,80 +78,100 @@ export function SiteSettingsForm() {
       variants={staggerContainer}
       initial="hidden"
       animate="visible"
+      className="space-y-6"
     >
       <motion.div variants={staggerItem}>
-        <Card>
-          <CardHeader>
-            <CardTitle>站点设置</CardTitle>
-          </CardHeader>
-          <CardContent>
-            <form onSubmit={handleSubmit} className="space-y-4">
-              <div className="space-y-2">
-                <Label htmlFor="site.name">站点名称</Label>
-                <Input
-                  id="site.name"
-                  value={formValues['site.name'] || ''}
-                  onChange={(e) => handleChange('site.name', e.target.value)}
-                  placeholder="输入站点名称"
-                />
-              </div>
-              <div className="space-y-2">
-                <Label htmlFor="site.description">站点描述</Label>
-                <Textarea
-                  id="site.description"
-                  value={formValues['site.description'] || ''}
-                  onChange={(e) =>
-                    handleChange('site.description', e.target.value)
-                  }
-                  placeholder="输入站点描述"
-                  rows={3}
-                />
-              </div>
-              <div className="space-y-2">
-                <Label htmlFor="site.logo-url">站点 Logo URL</Label>
-                <Input
-                  id="site.logo-url"
-                  value={formValues['site.logo-url'] || ''}
-                  onChange={(e) =>
-                    handleChange('site.logo-url', e.target.value)
-                  }
-                  placeholder="https://example.com/logo.png"
-                />
-              </div>
-              <div className="space-y-2">
-                <Label htmlFor="site.domain">对外访问域名</Label>
-                <Input
-                  id="site.domain"
-                  value={formValues['site.domain'] || ''}
-                  onChange={(e) =>
-                    handleChange('site.domain', e.target.value)
-                  }
-                  placeholder="https://your-domain.com"
-                />
-              </div>
-              <div className="space-y-2">
-                <Label htmlFor="site.footer-text">页脚文本</Label>
-                <Input
-                  id="site.footer-text"
-                  value={formValues['site.footer-text'] || ''}
-                  onChange={(e) =>
-                    handleChange('site.footer-text', e.target.value)
-                  }
-                  placeholder="输入页脚文本"
-                />
-              </div>
-              <Button type="submit" disabled={updateMutation.isPending}>
-                {updateMutation.isPending ? '保存中…' : '保存'}
-              </Button>
-            </form>
-          </CardContent>
-        </Card>
+        <form onSubmit={handleSubmit}>
+          <PropertyGrid>
+            <PropertyRow
+              title="站点全称 (Site Name)"
+              propKey="site.name"
+              description="控制台顶部导航栏与浏览器标签页显示的显式名称。"
+            >
+              <Input
+                id="site.name"
+                value={formValues['site.name'] || ''}
+                onChange={(e) => handleChange('site.name', e.target.value)}
+                placeholder="例如：Lumina · 微明"
+                className="max-w-lg rounded-none border-line text-xs focus:border-lagoon"
+              />
+            </PropertyRow>
+
+            <PropertyRow
+              title="站点描述 (Description)"
+              propKey="site.description"
+              description="简短的项目定位说明，用于公开页与元数据标签。"
+            >
+              <Textarea
+                id="site.description"
+                value={formValues['site.description'] || ''}
+                onChange={(e) =>
+                  handleChange('site.description', e.target.value)
+                }
+                placeholder="输入站点描述"
+                rows={3}
+                className="max-w-lg rounded-none border-line text-xs focus:border-lagoon"
+              />
+            </PropertyRow>
+
+            <PropertyRow
+              title="站点 Logo 资源路径"
+              propKey="site.logo-url"
+              description="站点左上角展示的图标矢量图或 PNG 图片网络 URL。"
+            >
+              <Input
+                id="site.logo-url"
+                value={formValues['site.logo-url'] || ''}
+                onChange={(e) => handleChange('site.logo-url', e.target.value)}
+                placeholder="https://example.com/logo.png"
+                className="max-w-lg rounded-none border-line text-xs focus:border-lagoon"
+              />
+            </PropertyRow>
+
+            <PropertyRow
+              title="对外访问域名 (Domain)"
+              propKey="site.domain"
+              description="用于拼接 MCP 接入端点、OAuth 回调以及外部分享深链根端点。"
+            >
+              <Input
+                id="site.domain"
+                value={formValues['site.domain'] || ''}
+                onChange={(e) => handleChange('site.domain', e.target.value)}
+                placeholder="https://your-domain.com"
+                className="max-w-lg rounded-none border-line text-xs focus:border-lagoon"
+              />
+            </PropertyRow>
+
+            <PropertyRow
+              title="页脚展示文本 (Footer Text)"
+              propKey="site.footer-text"
+              description="展示在控制台底部与公开展示态页面的版权与说明文本。"
+            >
+              <Input
+                id="site.footer-text"
+                value={formValues['site.footer-text'] || ''}
+                onChange={(e) =>
+                  handleChange('site.footer-text', e.target.value)
+                }
+                placeholder="输入页脚文本"
+                className="max-w-lg rounded-none border-line text-xs focus:border-lagoon"
+              />
+            </PropertyRow>
+          </PropertyGrid>
+
+          <SettingsCommitDock
+            dirtyCount={dirtyKeys.length}
+            isSubmitting={updateMutation.isPending}
+            onReset={handleReset}
+          />
+        </form>
       </motion.div>
+
       <motion.div variants={staggerItem}>
         <EnvInfoCard
           items={[
             { label: 'APP_NAME', value: 'Lumina' },
-            { label: 'APP_VERSION', value: 'v0.1.0' },
+            { label: 'APP_VERSION', value: 'v1.0.0' },
           ]}
         />
       </motion.div>
diff --git a/web/src/components/ssh/create-dialog.tsx b/web/src/components/ssh/create-dialog.tsx
index b689f56..5df62d8 100644
--- a/web/src/components/ssh/create-dialog.tsx
+++ b/web/src/components/ssh/create-dialog.tsx
@@ -1,17 +1,22 @@
 import { useState } from 'react'
 import { Button } from '@lumina/components/ui/button'
 import {
-	Dialog,
-	DialogContent,
-	DialogDescription,
-	DialogFooter,
-	DialogHeader,
-	DialogTitle,
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
 } from '@lumina/components/ui/dialog'
 import { Input } from '@lumina/components/ui/input'
 import { Label } from '@lumina/components/ui/label'
 import { Textarea } from '@lumina/components/ui/textarea'
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@lumina/components/ui/tabs'
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from '@lumina/components/ui/tabs'
 import { useCreateSshKey } from '#/hooks/useSshKey'
 import type { CreateSshKeyResponse } from '#/lib/models/response/ssh'
 import { Copy, Check, Download, KeyRound } from 'lucide-react'
@@ -19,211 +24,231 @@ import { toast } from 'sonner'
 import { getSshPublicKey } from '#/lib/apis/ssh'
 
 interface CreateDialogProps {
-	open: boolean
-	onOpenChange: (open: boolean) => void
+  open: boolean
+  onOpenChange: (open: boolean) => void
 }
 
 export function CreateDialog({ open, onOpenChange }: CreateDialogProps) {
-	const [activeTab, setActiveTab] = useState<'generate' | 'import'>('generate')
-	const [name, setName] = useState('')
-	const [description, setDescription] = useState('')
-	const [privateKey, setPrivateKey] = useState('')
-	const [result, setResult] = useState<CreateSshKeyResponse | null>(null)
-	const [copied, setCopied] = useState(false)
+  const [activeTab, setActiveTab] = useState<'generate' | 'import'>('generate')
+  const [name, setName] = useState('')
+  const [description, setDescription] = useState('')
+  const [privateKey, setPrivateKey] = useState('')
+  const [result, setResult] = useState<CreateSshKeyResponse | null>(null)
+  const [copied, setCopied] = useState(false)
 
-	const createMutation = useCreateSshKey()
+  const createMutation = useCreateSshKey()
 
-	const handleSubmit = () => {
-		if (!name.trim()) return
+  const handleSubmit = () => {
+    if (!name.trim()) return
 
-		if (activeTab === 'generate') {
-			createMutation.mutate(
-				{ source: 'generated', name: name.trim(), description: description.trim() || undefined },
-				{
-					onSuccess: (res) => {
-						if (res.data) setResult(res.data)
-					},
-				},
-			)
-		} else {
-			if (!privateKey.trim()) return
-			createMutation.mutate(
-				{
-					source: 'imported',
-					name: name.trim(),
-					description: description.trim() || undefined,
-					private_key: privateKey.trim(),
-				},
-				{
-					onSuccess: (res) => {
-						if (res.data) setResult(res.data)
-					},
-				},
-			)
-		}
-	}
+    if (activeTab === 'generate') {
+      createMutation.mutate(
+        {
+          source: 'generated',
+          name: name.trim(),
+          description: description.trim() || undefined,
+        },
+        {
+          onSuccess: (res) => {
+            if (res.data) setResult(res.data)
+          },
+        },
+      )
+    } else {
+      if (!privateKey.trim()) return
+      createMutation.mutate(
+        {
+          source: 'imported',
+          name: name.trim(),
+          description: description.trim() || undefined,
+          private_key: privateKey.trim(),
+        },
+        {
+          onSuccess: (res) => {
+            if (res.data) setResult(res.data)
+          },
+        },
+      )
+    }
+  }
 
-	const handleCopy = async () => {
-		if (!result?.public_key) return
-		await navigator.clipboard.writeText(result.public_key)
-		setCopied(true)
-		toast.success('已复制到剪贴板')
-		setTimeout(() => setCopied(false), 2000)
-	}
+  const handleCopy = async () => {
+    if (!result?.public_key) return
+    await navigator.clipboard.writeText(result.public_key)
+    setCopied(true)
+    toast.success('已复制到剪贴板')
+    setTimeout(() => setCopied(false), 2000)
+  }
 
-	const handleDownload = () => {
-		if (!result) return
-		getSshPublicKey(result.id)
-			.then((blob) => {
-				const url = URL.createObjectURL(blob)
-				const a = document.createElement('a')
-				a.href = url
-				a.download = `${result.name}-id_${result.key_type}.pub`
-				document.body.appendChild(a)
-				a.click()
-				document.body.removeChild(a)
-				URL.revokeObjectURL(url)
-			})
-			.catch(() => toast.error('下载失败'))
-	}
+  const handleDownload = () => {
+    if (!result) return
+    getSshPublicKey(result.id)
+      .then((blob) => {
+        const url = URL.createObjectURL(blob)
+        const a = document.createElement('a')
+        a.href = url
+        a.download = `${result.name}-id_${result.key_type}.pub`
+        document.body.appendChild(a)
+        a.click()
+        document.body.removeChild(a)
+        URL.revokeObjectURL(url)
+      })
+      .catch(() => toast.error('下载失败'))
+  }
 
-	const handleClose = () => {
-		setName('')
-		setDescription('')
-		setPrivateKey('')
-		setResult(null)
-		setCopied(false)
-		setActiveTab('generate')
-		onOpenChange(false)
-	}
+  const handleClose = () => {
+    setName('')
+    setDescription('')
+    setPrivateKey('')
+    setResult(null)
+    setCopied(false)
+    setActiveTab('generate')
+    onOpenChange(false)
+  }
 
-	const isFormValid = name.trim() && (activeTab === 'generate' || privateKey.trim())
+  const isFormValid =
+    name.trim() && (activeTab === 'generate' || privateKey.trim())
 
-	return (
-		<Dialog open={open} onOpenChange={result ? undefined : onOpenChange}>
-			<DialogContent
-				className="sm:max-w-lg"
-				onPointerDownOutside={result ? (e) => e.preventDefault() : undefined}
-			>
-				{!result ? (
-					<>
-						<DialogHeader>
-							<DialogTitle>添加 SSH 密钥</DialogTitle>
-							<DialogDescription>
-								生成新密钥对或导入已有 PEM 格式私钥
-							</DialogDescription>
-						</DialogHeader>
+  return (
+    <Dialog open={open} onOpenChange={result ? undefined : onOpenChange}>
+      <DialogContent
+        className="sm:max-w-lg"
+        onPointerDownOutside={result ? (e) => e.preventDefault() : undefined}
+      >
+        {!result ? (
+          <>
+            <DialogHeader>
+              <DialogTitle>添加 SSH 密钥</DialogTitle>
+              <DialogDescription>
+                生成新密钥对或导入已有 PEM 格式私钥
+              </DialogDescription>
+            </DialogHeader>
 
-						<Tabs value={activeTab} onValueChange={(v) => setActiveTab(v as 'generate' | 'import')}>
-							<TabsList className="grid w-full grid-cols-2">
-								<TabsTrigger value="generate">生成密钥</TabsTrigger>
-								<TabsTrigger value="import">导入密钥</TabsTrigger>
-							</TabsList>
+            <Tabs
+              value={activeTab}
+              onValueChange={(v) => setActiveTab(v as 'generate' | 'import')}
+            >
+              <TabsList className="grid w-full grid-cols-2">
+                <TabsTrigger value="generate">生成密钥</TabsTrigger>
+                <TabsTrigger value="import">导入密钥</TabsTrigger>
+              </TabsList>
 
-							<TabsContent value="generate" className="grid gap-4 py-4">
-								<div className="grid gap-2">
-									<Label htmlFor="gen-name">名称 *</Label>
-									<Input
-										id="gen-name"
-										value={name}
-										onChange={(e) => setName(e.target.value)}
-										placeholder="输入密钥名称，如：我的 Mac"
-									/>
-								</div>
-								<div className="grid gap-2">
-									<Label htmlFor="gen-desc">描述</Label>
-									<Input
-										id="gen-desc"
-										value={description}
-										onChange={(e) => setDescription(e.target.value)}
-										placeholder="输入描述（可选）"
-									/>
-								</div>
-							</TabsContent>
+              <TabsContent value="generate" className="grid gap-4 py-4">
+                <div className="grid gap-2">
+                  <Label htmlFor="gen-name">名称 *</Label>
+                  <Input
+                    id="gen-name"
+                    value={name}
+                    onChange={(e) => setName(e.target.value)}
+                    placeholder="输入密钥名称，如：我的 Mac"
+                  />
+                </div>
+                <div className="grid gap-2">
+                  <Label htmlFor="gen-desc">描述</Label>
+                  <Input
+                    id="gen-desc"
+                    value={description}
+                    onChange={(e) => setDescription(e.target.value)}
+                    placeholder="输入描述（可选）"
+                  />
+                </div>
+              </TabsContent>
 
-							<TabsContent value="import" className="grid gap-4 py-4">
-								<div className="grid gap-2">
-									<Label htmlFor="imp-name">名称 *</Label>
-									<Input
-										id="imp-name"
-										value={name}
-										onChange={(e) => setName(e.target.value)}
-										placeholder="输入密钥名称"
-									/>
-								</div>
-								<div className="grid gap-2">
-									<Label htmlFor="imp-desc">描述</Label>
-									<Input
-										id="imp-desc"
-										value={description}
-										onChange={(e) => setDescription(e.target.value)}
-										placeholder="输入描述（可选）"
-									/>
-								</div>
-								<div className="grid gap-2">
-									<Label htmlFor="imp-key">PEM 私钥 *</Label>
-									<Textarea
-										id="imp-key"
-										value={privateKey}
-										onChange={(e) => setPrivateKey(e.target.value)}
-										placeholder="-----BEGIN OPENSSH PRIVATE KEY-----&#10;...&#10;-----END OPENSSH PRIVATE KEY-----"
-										rows={6}
-										className="font-mono text-xs"
-									/>
-								</div>
-							</TabsContent>
-						</Tabs>
+              <TabsContent value="import" className="grid gap-4 py-4">
+                <div className="grid gap-2">
+                  <Label htmlFor="imp-name">名称 *</Label>
+                  <Input
+                    id="imp-name"
+                    value={name}
+                    onChange={(e) => setName(e.target.value)}
+                    placeholder="输入密钥名称"
+                  />
+                </div>
+                <div className="grid gap-2">
+                  <Label htmlFor="imp-desc">描述</Label>
+                  <Input
+                    id="imp-desc"
+                    value={description}
+                    onChange={(e) => setDescription(e.target.value)}
+                    placeholder="输入描述（可选）"
+                  />
+                </div>
+                <div className="grid gap-2">
+                  <Label htmlFor="imp-key">PEM 私钥 *</Label>
+                  <Textarea
+                    id="imp-key"
+                    value={privateKey}
+                    onChange={(e) => setPrivateKey(e.target.value)}
+                    placeholder="-----BEGIN OPENSSH PRIVATE KEY-----&#10;...&#10;-----END OPENSSH PRIVATE KEY-----"
+                    rows={6}
+                    className="font-mono text-xs"
+                  />
+                </div>
+              </TabsContent>
+            </Tabs>
 
-						<DialogFooter>
-							<Button variant="outline" onClick={handleClose}>
-								取消
-							</Button>
-							<Button
-								onClick={handleSubmit}
-								disabled={!isFormValid || createMutation.isPending}
-								className="bg-lagoon text-foam hover:bg-lagoon-deep"
-							>
-								{createMutation.isPending ? '创建中...' : '创建'}
-							</Button>
-						</DialogFooter>
-					</>
-				) : (
-					<>
-						<DialogHeader>
-							<DialogTitle>密钥已创建</DialogTitle>
-							<DialogDescription>
-								请妥善保存公钥内容。私钥不会在此展示。
-							</DialogDescription>
-						</DialogHeader>
-						<div className="space-y-4 py-4">
-							<div className="flex items-center gap-2 text-sm text-muted-foreground">
-								<KeyRound className="size-4" />
-								<span>指纹：{result.fingerprint}</span>
-							</div>
-							<div className="rounded-md bg-muted p-4">
-								<pre className="max-h-52 overflow-auto whitespace-pre text-xs font-mono leading-relaxed">
-									{result.public_key}
-								</pre>
-							</div>
-							<div className="flex gap-2">
-								<Button variant="outline" className="flex-1" onClick={handleCopy}>
-									{copied ? <Check className="mr-2 size-4" /> : <Copy className="mr-2 size-4" />}
-									{copied ? '已复制' : '复制公钥'}
-								</Button>
-								<Button variant="outline" className="flex-1" onClick={handleDownload}>
-									<Download className="mr-2 size-4" />
-									下载公钥
-								</Button>
-							</div>
-						</div>
-						<DialogFooter>
-							<Button onClick={handleClose} className="w-full">
-								我已保存
-							</Button>
-						</DialogFooter>
-					</>
-				)}
-			</DialogContent>
-		</Dialog>
-	)
+            <DialogFooter>
+              <Button variant="outline" onClick={handleClose}>
+                取消
+              </Button>
+              <Button
+                onClick={handleSubmit}
+                disabled={!isFormValid || createMutation.isPending}
+                className="bg-lagoon text-foam hover:bg-lagoon-deep"
+              >
+                {createMutation.isPending ? '创建中...' : '创建'}
+              </Button>
+            </DialogFooter>
+          </>
+        ) : (
+          <>
+            <DialogHeader>
+              <DialogTitle>密钥已创建</DialogTitle>
+              <DialogDescription>
+                请妥善保存公钥内容。私钥不会在此展示。
+              </DialogDescription>
+            </DialogHeader>
+            <div className="space-y-4 py-4">
+              <div className="flex items-center gap-2 text-sm text-muted-foreground">
+                <KeyRound className="size-4" />
+                <span>指纹：{result.fingerprint}</span>
+              </div>
+              <div className="rounded-md bg-muted p-4">
+                <pre className="max-h-52 overflow-auto whitespace-pre text-xs font-mono leading-relaxed">
+                  {result.public_key}
+                </pre>
+              </div>
+              <div className="flex gap-2">
+                <Button
+                  variant="outline"
+                  className="flex-1"
+                  onClick={handleCopy}
+                >
+                  {copied ? (
+                    <Check className="mr-2 size-4" />
+                  ) : (
+                    <Copy className="mr-2 size-4" />
+                  )}
+                  {copied ? '已复制' : '复制公钥'}
+                </Button>
+                <Button
+                  variant="outline"
+                  className="flex-1"
+                  onClick={handleDownload}
+                >
+                  <Download className="mr-2 size-4" />
+                  下载公钥
+                </Button>
+              </div>
+            </div>
+            <DialogFooter>
+              <Button onClick={handleClose} className="w-full">
+                我已保存
+              </Button>
+            </DialogFooter>
+          </>
+        )}
+      </DialogContent>
+    </Dialog>
+  )
 }
diff --git a/web/src/components/ssh/edit-dialog.tsx b/web/src/components/ssh/edit-dialog.tsx
index aa95471..7e6782e 100644
--- a/web/src/components/ssh/edit-dialog.tsx
+++ b/web/src/components/ssh/edit-dialog.tsx
@@ -1,12 +1,12 @@
 import { useEffect, useState } from 'react'
 import { Button } from '@lumina/components/ui/button'
 import {
-	Dialog,
-	DialogContent,
-	DialogDescription,
-	DialogFooter,
-	DialogHeader,
-	DialogTitle,
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
 } from '@lumina/components/ui/dialog'
 import { Input } from '@lumina/components/ui/input'
 import { Label } from '@lumina/components/ui/label'
@@ -14,86 +14,86 @@ import { useUpdateSshKey } from '#/hooks/useSshKey'
 import type { SshKeyItem } from '#/lib/models/response/ssh'
 
 interface EditDialogProps {
-	open: boolean
-	onOpenChange: (open: boolean) => void
-	item: SshKeyItem | null
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  item: SshKeyItem | null
 }
 
 export function EditDialog({ open, onOpenChange, item }: EditDialogProps) {
-	const [name, setName] = useState('')
-	const [description, setDescription] = useState('')
+  const [name, setName] = useState('')
+  const [description, setDescription] = useState('')
 
-	const updateMutation = useUpdateSshKey()
+  const updateMutation = useUpdateSshKey()
 
-	useEffect(() => {
-		if (open && item) {
-			setName(item.name)
-			setDescription(item.description)
-		}
-	}, [open, item])
+  useEffect(() => {
+    if (open && item) {
+      setName(item.name)
+      setDescription(item.description)
+    }
+  }, [open, item])
 
-	const handleSubmit = () => {
-		if (!item || !name.trim()) return
-		updateMutation.mutate(
-			{
-				id: item.id,
-				data: {
-					name: name.trim(),
-					description: description.trim() || undefined,
-				},
-			},
-			{
-				onSuccess: () => onOpenChange(false),
-			},
-		)
-	}
+  const handleSubmit = () => {
+    if (!item || !name.trim()) return
+    updateMutation.mutate(
+      {
+        id: item.id,
+        data: {
+          name: name.trim(),
+          description: description.trim() || undefined,
+        },
+      },
+      {
+        onSuccess: () => onOpenChange(false),
+      },
+    )
+  }
 
-	const handleClose = () => {
-		setName('')
-		setDescription('')
-		onOpenChange(false)
-	}
+  const handleClose = () => {
+    setName('')
+    setDescription('')
+    onOpenChange(false)
+  }
 
-	return (
-		<Dialog open={open} onOpenChange={handleClose}>
-			<DialogContent className="sm:max-w-md">
-				<DialogHeader>
-					<DialogTitle>编辑 SSH 密钥</DialogTitle>
-					<DialogDescription>修改密钥的名称和描述信息</DialogDescription>
-				</DialogHeader>
-				<div className="grid gap-4 py-4">
-					<div className="grid gap-2">
-						<Label htmlFor="edit-name">名称 *</Label>
-						<Input
-							id="edit-name"
-							value={name}
-							onChange={(e) => setName(e.target.value)}
-							placeholder="输入密钥名称"
-						/>
-					</div>
-					<div className="grid gap-2">
-						<Label htmlFor="edit-desc">描述</Label>
-						<Input
-							id="edit-desc"
-							value={description}
-							onChange={(e) => setDescription(e.target.value)}
-							placeholder="输入描述（可选）"
-						/>
-					</div>
-				</div>
-				<DialogFooter>
-					<Button variant="outline" onClick={handleClose}>
-						取消
-					</Button>
-					<Button
-						onClick={handleSubmit}
-						disabled={!name.trim() || updateMutation.isPending}
-						className="bg-lagoon text-foam hover:bg-lagoon-deep"
-					>
-						{updateMutation.isPending ? '保存中...' : '保存'}
-					</Button>
-				</DialogFooter>
-			</DialogContent>
-		</Dialog>
-	)
+  return (
+    <Dialog open={open} onOpenChange={handleClose}>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>编辑 SSH 密钥</DialogTitle>
+          <DialogDescription>修改密钥的名称和描述信息</DialogDescription>
+        </DialogHeader>
+        <div className="grid gap-4 py-4">
+          <div className="grid gap-2">
+            <Label htmlFor="edit-name">名称 *</Label>
+            <Input
+              id="edit-name"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              placeholder="输入密钥名称"
+            />
+          </div>
+          <div className="grid gap-2">
+            <Label htmlFor="edit-desc">描述</Label>
+            <Input
+              id="edit-desc"
+              value={description}
+              onChange={(e) => setDescription(e.target.value)}
+              placeholder="输入描述（可选）"
+            />
+          </div>
+        </div>
+        <DialogFooter>
+          <Button variant="outline" onClick={handleClose}>
+            取消
+          </Button>
+          <Button
+            onClick={handleSubmit}
+            disabled={!name.trim() || updateMutation.isPending}
+            className="bg-lagoon text-foam hover:bg-lagoon-deep"
+          >
+            {updateMutation.isPending ? '保存中...' : '保存'}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
 }
diff --git a/web/src/hooks/usePages.ts b/web/src/hooks/usePages.ts
index 6bc8a44..1775651 100644
--- a/web/src/hooks/usePages.ts
+++ b/web/src/hooks/usePages.ts
@@ -81,7 +81,12 @@ export function useUnlockPage() {
         }),
       )
       queryClient.invalidateQueries({
-        queryKey: ['pages', 'auth-check', variables.projectName, variables.slug],
+        queryKey: [
+          'pages',
+          'auth-check',
+          variables.projectName,
+          variables.slug,
+        ],
       })
       queryClient.invalidateQueries({
         queryKey: ['pages', 'meta', variables.projectName, variables.slug],
diff --git a/web/src/hooks/usePreviewWebSocket.ts b/web/src/hooks/usePreviewWebSocket.ts
index 3fab451..fd1e91a 100644
--- a/web/src/hooks/usePreviewWebSocket.ts
+++ b/web/src/hooks/usePreviewWebSocket.ts
@@ -16,7 +16,8 @@ export interface WsMessage {
   timestamp: number
 }
 
-export type ConnectionStatus = 'idle' | 'connecting' | 'connected' | 'disconnected' | 'rejected'
+export type ConnectionStatus =
+  'idle' | 'connecting' | 'connected' | 'disconnected' | 'rejected'
 
 // ── Hook Options ──
 
diff --git a/web/src/hooks/useProfile.ts b/web/src/hooks/useProfile.ts
index c4e0cb8..b4ab17a 100644
--- a/web/src/hooks/useProfile.ts
+++ b/web/src/hooks/useProfile.ts
@@ -1,22 +1,34 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query'
 import Cookies from 'js-cookie'
 import * as userApi from '#/lib/apis/user'
-import type { UpdateProfileResponseWrapper, UpdatePasswordResponseWrapper } from '#/lib/models/response/user'
-import type { UpdateProfileRequest, UpdatePasswordRequest } from '#/lib/models/request/user'
+import type {
+  UpdateProfileResponseWrapper,
+  UpdatePasswordResponseWrapper,
+} from '#/lib/models/response/user'
+import type {
+  UpdateProfileRequest,
+  UpdatePasswordRequest,
+} from '#/lib/models/request/user'
 
 export function useUpdateProfile() {
   const queryClient = useQueryClient()
-  return useMutation<UpdateProfileResponseWrapper, Error, UpdateProfileRequest>({
-    mutationFn: (data) => userApi.updateProfile(data),
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['user', 'current'] })
+  return useMutation<UpdateProfileResponseWrapper, Error, UpdateProfileRequest>(
+    {
+      mutationFn: (data) => userApi.updateProfile(data),
+      onSuccess: () => {
+        queryClient.invalidateQueries({ queryKey: ['user', 'current'] })
+      },
     },
-  })
+  )
 }
 
 export function useUpdatePassword() {
   const queryClient = useQueryClient()
-  return useMutation<UpdatePasswordResponseWrapper, Error, UpdatePasswordRequest>({
+  return useMutation<
+    UpdatePasswordResponseWrapper,
+    Error,
+    UpdatePasswordRequest
+  >({
     mutationFn: (data) => userApi.updatePassword(data),
     onSuccess: () => {
       queryClient.clear()
diff --git a/web/src/hooks/useQaWebSocket.ts b/web/src/hooks/useQaWebSocket.ts
index a9ce329..adebd23 100644
--- a/web/src/hooks/useQaWebSocket.ts
+++ b/web/src/hooks/useQaWebSocket.ts
@@ -34,7 +34,8 @@ export interface WsMessage {
   timestamp: number
 }
 
-export type ConnectionStatus = 'idle' | 'connecting' | 'connected' | 'disconnected' | 'rejected'
+export type ConnectionStatus =
+  'idle' | 'connecting' | 'connected' | 'disconnected' | 'rejected'
 
 // ── Hook Options ──
 
diff --git a/web/src/hooks/useRepoWiki.ts b/web/src/hooks/useRepoWiki.ts
index 2124288..9a19d51 100644
--- a/web/src/hooks/useRepoWiki.ts
+++ b/web/src/hooks/useRepoWiki.ts
@@ -1,233 +1,274 @@
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 import { toast } from 'sonner'
 import {
-	getRepoWikiConfigList,
-	getRepoWikiConfig,
-	getConfigByProjectId,
-	createRepoWikiConfig,
-	deleteRepoWikiConfig as deleteRepoWikiConfigApi,
-	updateRepoWikiConfig as updateRepoWikiConfigApi,
-	analyzeRepoWiki,
-	updateRepoWiki as updateRepoWikiApi,
-	getRepoWikiVersionList,
-	updateSelectedVersion,
-	cleanFailedVersions,
-	keepLatestVersions,
-	cleanRepoWikiGitCache,
+  getRepoWikiConfigList,
+  getRepoWikiConfig,
+  getConfigByProjectId,
+  createRepoWikiConfig,
+  deleteRepoWikiConfig as deleteRepoWikiConfigApi,
+  updateRepoWikiConfig as updateRepoWikiConfigApi,
+  analyzeRepoWiki,
+  updateRepoWiki as updateRepoWikiApi,
+  getRepoWikiVersionList,
+  updateSelectedVersion,
+  cleanFailedVersions,
+  keepLatestVersions,
+  cleanRepoWikiGitCache,
 } from '#/lib/apis/repowiki'
 import type {
-	CreateRepoWikiConfigRequest,
-	RepoWikiConfigListParams,
-	UpdateRepoWikiConfigRequest,
+  CreateRepoWikiConfigRequest,
+  RepoWikiConfigListParams,
+  UpdateRepoWikiConfigRequest,
 } from '#/lib/models/request/repowiki'
 
 // ── 版本状态常量 ──
 
-export const ACTIVE_STATUSES = ['pending', 'cloning', 'scanning', 'analyzing', 'assembling'] as const
+export const ACTIVE_STATUSES = [
+  'pending',
+  'cloning',
+  'scanning',
+  'analyzing',
+  'assembling',
+] as const
 export const TERMINAL_STATUSES = ['completed', 'failed', 'cancelled'] as const
 
 // ── 配置列表 ──
 
 export function useRepoWikiConfigs(params?: RepoWikiConfigListParams) {
-	return useQuery({
-		queryKey: ['repowiki', 'list', params],
-		queryFn: () => getRepoWikiConfigList(params),
-	})
+  return useQuery({
+    queryKey: ['repowiki', 'list', params],
+    queryFn: () => getRepoWikiConfigList(params),
+  })
 }
 
 // ── 单个配置详情 ──
 
 export function useRepoWikiConfig(id: string) {
-	return useQuery({
-		queryKey: ['repowiki', 'detail', id],
-		queryFn: () => getRepoWikiConfig(id),
-		enabled: !!id,
-	})
+  return useQuery({
+    queryKey: ['repowiki', 'detail', id],
+    queryFn: () => getRepoWikiConfig(id),
+    enabled: !!id,
+  })
 }
 
 // ── 按项目 ID 查询配置 ──
 
 export function useRepoWikiConfigByProjectId(projectId: string) {
-	return useQuery({
-		queryKey: ['repowiki', 'by-project', projectId],
-		queryFn: () => getConfigByProjectId(projectId),
-		enabled: !!projectId,
-	})
+  return useQuery({
+    queryKey: ['repowiki', 'by-project', projectId],
+    queryFn: () => getConfigByProjectId(projectId),
+    enabled: !!projectId,
+  })
 }
 
 // ── 创建配置 ──
 
 export function useCreateRepoWikiConfig() {
-	const queryClient = useQueryClient()
-	return useMutation({
-		mutationFn: (data: CreateRepoWikiConfigRequest) => createRepoWikiConfig(data),
-		onSuccess: () => {
-			toast.success('配置创建成功')
-			queryClient.invalidateQueries({ queryKey: ['repowiki', 'list'] })
-		},
-		onError: (error: Error) => {
-			toast.error(error.message || '创建失败')
-		},
-	})
+  const queryClient = useQueryClient()
+  return useMutation({
+    mutationFn: (data: CreateRepoWikiConfigRequest) =>
+      createRepoWikiConfig(data),
+    onSuccess: () => {
+      toast.success('配置创建成功')
+      queryClient.invalidateQueries({ queryKey: ['repowiki', 'list'] })
+    },
+    onError: (error: Error) => {
+      toast.error(error.message || '创建失败')
+    },
+  })
 }
 
 // ── 删除配置 ──
 
 export function useDeleteRepoWikiConfig() {
-	const queryClient = useQueryClient()
-	return useMutation({
-		mutationFn: deleteRepoWikiConfigApi,
-		onSuccess: () => {
-			toast.success('配置已删除')
-			queryClient.invalidateQueries({ queryKey: ['repowiki', 'list'] })
-		},
-		onError: (error: Error) => {
-			toast.error(error.message || '删除失败')
-		},
-	})
+  const queryClient = useQueryClient()
+  return useMutation({
+    mutationFn: deleteRepoWikiConfigApi,
+    onSuccess: () => {
+      toast.success('配置已删除')
+      queryClient.invalidateQueries({ queryKey: ['repowiki', 'list'] })
+    },
+    onError: (error: Error) => {
+      toast.error(error.message || '删除失败')
+    },
+  })
 }
 
 // ── 清理失败版本 ──
 
 export function useCleanFailedVersions() {
-	const queryClient = useQueryClient()
-	return useMutation({
-		mutationFn: ({ configId }: { configId: string; projectId: string }) =>
-			cleanFailedVersions(configId),
-		onSuccess: (data, { configId, projectId }) => {
-			toast.success(`已清理 ${data.data?.cleaned ?? 0} 个失败版本`)
-			queryClient.invalidateQueries({ queryKey: ['repowiki', 'versions', 'list', configId] })
-			queryClient.invalidateQueries({ queryKey: ['repowiki', 'by-project', projectId] })
-			queryClient.invalidateQueries({ queryKey: ['repowiki', 'detail', configId] })
-			queryClient.invalidateQueries({ queryKey: ['repowiki', 'list'] })
-		},
-		onError: (error: Error) => toast.error(error.message || '清理失败'),
-	})
+  const queryClient = useQueryClient()
+  return useMutation({
+    mutationFn: ({ configId }: { configId: string; projectId: string }) =>
+      cleanFailedVersions(configId),
+    onSuccess: (data, { configId, projectId }) => {
+      toast.success(`已清理 ${data.data?.cleaned ?? 0} 个失败版本`)
+      queryClient.invalidateQueries({
+        queryKey: ['repowiki', 'versions', 'list', configId],
+      })
+      queryClient.invalidateQueries({
+        queryKey: ['repowiki', 'by-project', projectId],
+      })
+      queryClient.invalidateQueries({
+        queryKey: ['repowiki', 'detail', configId],
+      })
+      queryClient.invalidateQueries({ queryKey: ['repowiki', 'list'] })
+    },
+    onError: (error: Error) => toast.error(error.message || '清理失败'),
+  })
 }
 
 // ── 只保留最新版本 ──
 
 export function useKeepLatestVersions() {
-	const queryClient = useQueryClient()
-	return useMutation({
-		mutationFn: ({ configId }: { configId: string; projectId: string }) =>
-			keepLatestVersions(configId),
-		onSuccess: (data, { configId, projectId }) => {
-			const d = data.data
-			toast.success(
-				`已清理 ${d?.cleaned ?? 0} 个版本，跳过 ${d?.skipped ?? 0} 个进行中版本`,
-			)
-			queryClient.invalidateQueries({ queryKey: ['repowiki', 'versions', 'list', configId] })
-			queryClient.invalidateQueries({ queryKey: ['repowiki', 'by-project', projectId] })
-			queryClient.invalidateQueries({ queryKey: ['repowiki', 'detail', configId] })
-			queryClient.invalidateQueries({ queryKey: ['repowiki', 'list'] })
-		},
-		onError: (error: Error) => toast.error(error.message || '操作失败'),
-	})
+  const queryClient = useQueryClient()
+  return useMutation({
+    mutationFn: ({ configId }: { configId: string; projectId: string }) =>
+      keepLatestVersions(configId),
+    onSuccess: (data, { configId, projectId }) => {
+      const d = data.data
+      toast.success(
+        `已清理 ${d?.cleaned ?? 0} 个版本，跳过 ${d?.skipped ?? 0} 个进行中版本`,
+      )
+      queryClient.invalidateQueries({
+        queryKey: ['repowiki', 'versions', 'list', configId],
+      })
+      queryClient.invalidateQueries({
+        queryKey: ['repowiki', 'by-project', projectId],
+      })
+      queryClient.invalidateQueries({
+        queryKey: ['repowiki', 'detail', configId],
+      })
+      queryClient.invalidateQueries({ queryKey: ['repowiki', 'list'] })
+    },
+    onError: (error: Error) => toast.error(error.message || '操作失败'),
+  })
 }
 
 // ── 清理 Git 缓存 ──
 
 export function useCleanRepoWikiGitCache() {
-	const queryClient = useQueryClient()
-	return useMutation({
-		mutationFn: ({ configId }: { configId: string; projectId: string }) =>
-			cleanRepoWikiGitCache(configId),
-		onSuccess: (_, { configId, projectId }) => {
-			toast.success('Git 缓存已清理')
-			queryClient.invalidateQueries({ queryKey: ['repowiki', 'versions', 'list', configId] })
-			queryClient.invalidateQueries({ queryKey: ['repowiki', 'by-project', projectId] })
-			queryClient.invalidateQueries({ queryKey: ['repowiki', 'detail', configId] })
-			queryClient.invalidateQueries({ queryKey: ['repowiki', 'list'] })
-		},
-		onError: (error: Error) => toast.error(error.message || '清理失败'),
-	})
+  const queryClient = useQueryClient()
+  return useMutation({
+    mutationFn: ({ configId }: { configId: string; projectId: string }) =>
+      cleanRepoWikiGitCache(configId),
+    onSuccess: (_, { configId, projectId }) => {
+      toast.success('Git 缓存已清理')
+      queryClient.invalidateQueries({
+        queryKey: ['repowiki', 'versions', 'list', configId],
+      })
+      queryClient.invalidateQueries({
+        queryKey: ['repowiki', 'by-project', projectId],
+      })
+      queryClient.invalidateQueries({
+        queryKey: ['repowiki', 'detail', configId],
+      })
+      queryClient.invalidateQueries({ queryKey: ['repowiki', 'list'] })
+    },
+    onError: (error: Error) => toast.error(error.message || '清理失败'),
+  })
 }
 
 // ── 更新配置 ──
 
 export function useUpdateRepoWikiConfig() {
-	const queryClient = useQueryClient()
-	return useMutation({
-		mutationFn: ({ id, data }: { id: string; data: UpdateRepoWikiConfigRequest }) =>
-			updateRepoWikiConfigApi(id, data),
-		onSuccess: () => {
-			toast.success('配置已更新')
-			queryClient.invalidateQueries({ queryKey: ['repowiki'] })
-		},
-		onError: (error: Error) => toast.error(error.message || '更新失败'),
-	})
+  const queryClient = useQueryClient()
+  return useMutation({
+    mutationFn: ({
+      id,
+      data,
+    }: {
+      id: string
+      data: UpdateRepoWikiConfigRequest
+    }) => updateRepoWikiConfigApi(id, data),
+    onSuccess: () => {
+      toast.success('配置已更新')
+      queryClient.invalidateQueries({ queryKey: ['repowiki'] })
+    },
+    onError: (error: Error) => toast.error(error.message || '更新失败'),
+  })
 }
 
 // ── 触发分析（绑定到特定 config） ──
 
 export function useRepoWikiAnalyze(configId: string) {
-	const queryClient = useQueryClient()
-	return useMutation({
-		mutationFn: (data?: { extra_prompt?: string }) => analyzeRepoWiki(configId, data),
-		onSuccess: () => {
-			toast.success('分析任务已启动')
-			queryClient.invalidateQueries({ queryKey: ['repowiki', 'versions', 'list', configId] })
-		},
-		onError: (error: Error) => {
-			toast.error(error.message || '启动分析失败')
-		},
-	})
+  const queryClient = useQueryClient()
+  return useMutation({
+    mutationFn: (data?: { extra_prompt?: string }) =>
+      analyzeRepoWiki(configId, data),
+    onSuccess: () => {
+      toast.success('分析任务已启动')
+      queryClient.invalidateQueries({
+        queryKey: ['repowiki', 'versions', 'list', configId],
+      })
+    },
+    onError: (error: Error) => {
+      toast.error(error.message || '启动分析失败')
+    },
+  })
 }
 
 // ── 增量更新（绑定到特定 config） ──
 
 export function useRepoWikiUpdate(configId: string) {
-	const queryClient = useQueryClient()
-	return useMutation({
-		mutationFn: (data?: { extra_prompt?: string }) => updateRepoWikiApi(configId, data),
-		onSuccess: () => {
-			toast.success('增量更新已启动')
-			queryClient.invalidateQueries({ queryKey: ['repowiki', 'versions', 'list', configId] })
-		},
-		onError: (error: Error) => {
-			toast.error(error.message || '启动更新失败')
-		},
-	})
+  const queryClient = useQueryClient()
+  return useMutation({
+    mutationFn: (data?: { extra_prompt?: string }) =>
+      updateRepoWikiApi(configId, data),
+    onSuccess: () => {
+      toast.success('增量更新已启动')
+      queryClient.invalidateQueries({
+        queryKey: ['repowiki', 'versions', 'list', configId],
+      })
+    },
+    onError: (error: Error) => {
+      toast.error(error.message || '启动更新失败')
+    },
+  })
 }
 
 // ── 版本列表（含自动轮询） ──
 
 export function useRepoWikiVersions(configId: string, page = 1, size = 20) {
-	return useQuery({
-		queryKey: ['repowiki', 'versions', 'list', configId, page, size],
-		queryFn: async () => {
-			const res = await getRepoWikiVersionList(configId, { page, size })
-			return res.data
-		},
-		enabled: !!configId,
-		// 如果有任何版本处于活跃状态，每 3 秒刷新
-		refetchInterval: (query) => {
-			const data = query.state.data
-			if (!data?.items) return false
-			const hasActive = data.items.some((v) =>
-				ACTIVE_STATUSES.includes(v.status as (typeof ACTIVE_STATUSES)[number]),
-			)
-			return hasActive ? 3000 : false
-		},
-	})
+  return useQuery({
+    queryKey: ['repowiki', 'versions', 'list', configId, page, size],
+    queryFn: async () => {
+      const res = await getRepoWikiVersionList(configId, { page, size })
+      return res.data
+    },
+    enabled: !!configId,
+    // 如果有任何版本处于活跃状态，每 3 秒刷新
+    refetchInterval: (query) => {
+      const data = query.state.data
+      if (!data?.items) return false
+      const hasActive = data.items.some((v) =>
+        ACTIVE_STATUSES.includes(v.status as (typeof ACTIVE_STATUSES)[number]),
+      )
+      return hasActive ? 3000 : false
+    },
+  })
 }
 
 // ── 切换选中版本 ──
 
 export function useUpdateSelectedVersion() {
-	const queryClient = useQueryClient()
-	return useMutation({
-		mutationFn: ({ configId, versionId }: { configId: string; versionId: string }) =>
-			updateSelectedVersion(configId, versionId),
-		onSuccess: () => {
-			toast.success('已切换选中版本')
-			queryClient.invalidateQueries({ queryKey: ['repowiki', 'configs'] })
-			queryClient.invalidateQueries({ queryKey: ['repowiki', 'list'] })
-			queryClient.invalidateQueries({ queryKey: ['repowiki', 'by-project'] })
-		},
-		onError: (error: Error) => {
-			toast.error(error.message || '切换版本失败')
-		},
-	})
+  const queryClient = useQueryClient()
+  return useMutation({
+    mutationFn: ({
+      configId,
+      versionId,
+    }: {
+      configId: string
+      versionId: string
+    }) => updateSelectedVersion(configId, versionId),
+    onSuccess: () => {
+      toast.success('已切换选中版本')
+      queryClient.invalidateQueries({ queryKey: ['repowiki', 'configs'] })
+      queryClient.invalidateQueries({ queryKey: ['repowiki', 'list'] })
+      queryClient.invalidateQueries({ queryKey: ['repowiki', 'by-project'] })
+    },
+    onError: (error: Error) => {
+      toast.error(error.message || '切换版本失败')
+    },
+  })
 }
diff --git a/web/src/hooks/useSshKey.ts b/web/src/hooks/useSshKey.ts
index c0438d2..6cad60e 100644
--- a/web/src/hooks/useSshKey.ts
+++ b/web/src/hooks/useSshKey.ts
@@ -2,64 +2,64 @@ import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 import { toast } from 'sonner'
 import * as api from '#/lib/apis/ssh'
 import type {
-	UpdateSshKeyRequest,
-	SshKeyListParams,
+  UpdateSshKeyRequest,
+  SshKeyListParams,
 } from '#/lib/models/request/ssh'
 
 export function useSshKeyList(params?: SshKeyListParams) {
-	return useQuery({
-		queryKey: ['ssh', 'list', params],
-		queryFn: () => api.listSshKeys(params),
-	})
+  return useQuery({
+    queryKey: ['ssh', 'list', params],
+    queryFn: () => api.listSshKeys(params),
+  })
 }
 
 export function useSshKeyDetail(id: string) {
-	return useQuery({
-		queryKey: ['ssh', 'detail', id],
-		queryFn: () => api.getSshKey(id),
-		enabled: !!id,
-	})
+  return useQuery({
+    queryKey: ['ssh', 'detail', id],
+    queryFn: () => api.getSshKey(id),
+    enabled: !!id,
+  })
 }
 
 export function useCreateSshKey() {
-	const queryClient = useQueryClient()
-	return useMutation({
-		mutationFn: api.createSshKey,
-		onSuccess: () => {
-			toast.success('SSH 密钥创建成功')
-			queryClient.invalidateQueries({ queryKey: ['ssh', 'list'] })
-		},
-		onError: (error: Error) => {
-			toast.error(error.message || '创建失败')
-		},
-	})
+  const queryClient = useQueryClient()
+  return useMutation({
+    mutationFn: api.createSshKey,
+    onSuccess: () => {
+      toast.success('SSH 密钥创建成功')
+      queryClient.invalidateQueries({ queryKey: ['ssh', 'list'] })
+    },
+    onError: (error: Error) => {
+      toast.error(error.message || '创建失败')
+    },
+  })
 }
 
 export function useUpdateSshKey() {
-	const queryClient = useQueryClient()
-	return useMutation({
-		mutationFn: ({ id, data }: { id: string; data: UpdateSshKeyRequest }) =>
-			api.updateSshKey(id, data),
-		onSuccess: () => {
-			toast.success('SSH 密钥更新成功')
-			queryClient.invalidateQueries({ queryKey: ['ssh', 'list'] })
-		},
-		onError: (error: Error) => {
-			toast.error(error.message || '更新失败')
-		},
-	})
+  const queryClient = useQueryClient()
+  return useMutation({
+    mutationFn: ({ id, data }: { id: string; data: UpdateSshKeyRequest }) =>
+      api.updateSshKey(id, data),
+    onSuccess: () => {
+      toast.success('SSH 密钥更新成功')
+      queryClient.invalidateQueries({ queryKey: ['ssh', 'list'] })
+    },
+    onError: (error: Error) => {
+      toast.error(error.message || '更新失败')
+    },
+  })
 }
 
 export function useDeleteSshKey() {
-	const queryClient = useQueryClient()
-	return useMutation({
-		mutationFn: api.deleteSshKey,
-		onSuccess: () => {
-			toast.success('SSH 密钥已删除')
-			queryClient.invalidateQueries({ queryKey: ['ssh', 'list'] })
-		},
-		onError: (error: Error) => {
-			toast.error(error.message || '删除失败')
-		},
-	})
+  const queryClient = useQueryClient()
+  return useMutation({
+    mutationFn: api.deleteSshKey,
+    onSuccess: () => {
+      toast.success('SSH 密钥已删除')
+      queryClient.invalidateQueries({ queryKey: ['ssh', 'list'] })
+    },
+    onError: (error: Error) => {
+      toast.error(error.message || '删除失败')
+    },
+  })
 }
diff --git a/web/src/hooks/useWebhook.ts b/web/src/hooks/useWebhook.ts
index d941568..04c3ee0 100644
--- a/web/src/hooks/useWebhook.ts
+++ b/web/src/hooks/useWebhook.ts
@@ -11,8 +11,10 @@ export function useWebhookConfig(configId: string) {
 export function useUpdateWebhookBranches(configId: string) {
   const qc = useQueryClient()
   return useMutation({
-    mutationFn: (branches: string[]) => webhookApi.updateWebhookBranches(configId, branches),
-    onSuccess: () => qc.invalidateQueries({ queryKey: ['webhook-config', configId] }),
+    mutationFn: (branches: string[]) =>
+      webhookApi.updateWebhookBranches(configId, branches),
+    onSuccess: () =>
+      qc.invalidateQueries({ queryKey: ['webhook-config', configId] }),
   })
 }
 
@@ -20,7 +22,8 @@ export function useRegenerateWebhook(configId: string) {
   const qc = useQueryClient()
   return useMutation({
     mutationFn: () => webhookApi.regenerateWebhook(configId),
-    onSuccess: () => qc.invalidateQueries({ queryKey: ['webhook-config', configId] }),
+    onSuccess: () =>
+      qc.invalidateQueries({ queryKey: ['webhook-config', configId] }),
   })
 }
 
diff --git a/web/src/lib/apis/biometric.ts b/web/src/lib/apis/biometric.ts
index 2d60b84..514ac61 100644
--- a/web/src/lib/apis/biometric.ts
+++ b/web/src/lib/apis/biometric.ts
@@ -6,7 +6,11 @@ import type {
   LoginStartResponseWrapper,
   LoginFinishResponseWrapper,
 } from '../models/response/biometric'
-import type { RegisterStartRequest, RegisterFinishRequest, LoginFinishRequest } from '../models/request/biometric'
+import type {
+  RegisterStartRequest,
+  RegisterFinishRequest,
+  LoginFinishRequest,
+} from '../models/request/biometric'
 
 /**
  * 获取生物特征登录可用性（公开接口）
diff --git a/web/src/lib/apis/dashboard.ts b/web/src/lib/apis/dashboard.ts
index 1e0b227..07a912b 100644
--- a/web/src/lib/apis/dashboard.ts
+++ b/web/src/lib/apis/dashboard.ts
@@ -2,6 +2,8 @@ import { apiClient } from './client'
 import type { BaseResponse } from '../models/response/common'
 import type { DashboardOverview } from '../models/response/dashboard'
 
-export function getDashboardOverview(): Promise<BaseResponse<DashboardOverview>> {
+export function getDashboardOverview(): Promise<
+  BaseResponse<DashboardOverview>
+> {
   return apiClient.get('/api/v1/dashboard/overview')
 }
diff --git a/web/src/lib/apis/pages.ts b/web/src/lib/apis/pages.ts
index 9c6448f..e9b68d2 100644
--- a/web/src/lib/apis/pages.ts
+++ b/web/src/lib/apis/pages.ts
@@ -40,7 +40,9 @@ export function switchActiveVersion(
   id: string,
   versionId: string,
 ): Promise<BaseResponse<unknown>> {
-  return apiClient.post(`/api/v1/pages/${id}/versions/${versionId}/switch-active`)
+  return apiClient.post(
+    `/api/v1/pages/${id}/versions/${versionId}/switch-active`,
+  )
 }
 
 export function forkPage(
@@ -76,7 +78,9 @@ export function getPageVersionsByProject(
   projectName: string,
   slug: string,
 ): Promise<BaseResponse<PageVersionListResponse>> {
-  return publicApiClient.get(`/api/v1/pages/by-project/${projectName}/${slug}/versions`)
+  return publicApiClient.get(
+    `/api/v1/pages/by-project/${projectName}/${slug}/versions`,
+  )
 }
 
 export function checkPageAuth(
@@ -106,8 +110,10 @@ export function getPageMeta(
   slug: string,
   version?: string,
 ): Promise<BaseResponse<PagePublicMetaResponse>> {
-  return publicApiClient.get(`/api/v1/pages/by-project/${projectName}/${slug}/meta`, {
-    params: version ? { v: version } : undefined,
-  })
+  return publicApiClient.get(
+    `/api/v1/pages/by-project/${projectName}/${slug}/meta`,
+    {
+      params: version ? { v: version } : undefined,
+    },
+  )
 }
-
diff --git a/web/src/lib/apis/project.ts b/web/src/lib/apis/project.ts
index 33d3d9f..127b256 100644
--- a/web/src/lib/apis/project.ts
+++ b/web/src/lib/apis/project.ts
@@ -1,6 +1,9 @@
 import { apiClient } from './client'
 import type { BaseResponse } from '../models/response/common'
-import type { ProjectItem, ProjectListResponse } from '../models/response/project'
+import type {
+  ProjectItem,
+  ProjectListResponse,
+} from '../models/response/project'
 import type {
   CreateProjectRequest,
   UpdateProjectRequest,
diff --git a/web/src/lib/apis/repowiki.ts b/web/src/lib/apis/repowiki.ts
index 035ce54..c066eb5 100644
--- a/web/src/lib/apis/repowiki.ts
+++ b/web/src/lib/apis/repowiki.ts
@@ -1,102 +1,109 @@
 import { apiClient } from './client'
 import type { BaseResponse } from '../models/response/common'
 import type {
-	RepoWikiConfigListParams,
-	CreateRepoWikiConfigRequest,
-	UpdateRepoWikiConfigRequest,
-	AnalyzeRepoWikiRequest,
+  RepoWikiConfigListParams,
+  CreateRepoWikiConfigRequest,
+  UpdateRepoWikiConfigRequest,
+  AnalyzeRepoWikiRequest,
 } from '../models/request/repowiki'
 import type {
-	RepoWikiConfigItem,
-	RepoWikiConfigListResponse,
-	RepoWikiVersionListResponse,
-	CleanFailedVersionsResponse,
-	KeepLatestVersionsResponse,
+  RepoWikiConfigItem,
+  RepoWikiConfigListResponse,
+  RepoWikiVersionListResponse,
+  CleanFailedVersionsResponse,
+  KeepLatestVersionsResponse,
 } from '../models/response/repowiki'
 
 export function getRepoWikiConfigList(
-	params?: RepoWikiConfigListParams,
+  params?: RepoWikiConfigListParams,
 ): Promise<BaseResponse<RepoWikiConfigListResponse>> {
-	return apiClient.get('/api/v1/repowiki/configs', { params })
+  return apiClient.get('/api/v1/repowiki/configs', { params })
 }
 
-export function getRepoWikiConfig(id: string): Promise<BaseResponse<RepoWikiConfigItem>> {
-	return apiClient.get(`/api/v1/repowiki/configs/${id}`)
+export function getRepoWikiConfig(
+  id: string,
+): Promise<BaseResponse<RepoWikiConfigItem>> {
+  return apiClient.get(`/api/v1/repowiki/configs/${id}`)
 }
 
 export function createRepoWikiConfig(
-	data: CreateRepoWikiConfigRequest,
+  data: CreateRepoWikiConfigRequest,
 ): Promise<BaseResponse<RepoWikiConfigItem>> {
-	return apiClient.post('/api/v1/repowiki/configs', data)
+  return apiClient.post('/api/v1/repowiki/configs', data)
 }
 
 export function updateRepoWikiConfig(
-	id: string,
-	data: UpdateRepoWikiConfigRequest,
+  id: string,
+  data: UpdateRepoWikiConfigRequest,
 ): Promise<BaseResponse<RepoWikiConfigItem>> {
-	return apiClient.put(`/api/v1/repowiki/configs/${id}`, data)
+  return apiClient.put(`/api/v1/repowiki/configs/${id}`, data)
 }
 
 export function deleteRepoWikiConfig(id: string): Promise<BaseResponse> {
-	return apiClient.delete(`/api/v1/repowiki/configs/${id}`)
+  return apiClient.delete(`/api/v1/repowiki/configs/${id}`)
 }
 
 export function analyzeRepoWiki(
-	id: string,
-	data?: AnalyzeRepoWikiRequest,
+  id: string,
+  data?: AnalyzeRepoWikiRequest,
 ): Promise<BaseResponse> {
-	return apiClient.post(`/api/v1/repowiki/configs/${id}/analyze`, data ?? {})
+  return apiClient.post(`/api/v1/repowiki/configs/${id}/analyze`, data ?? {})
 }
 
 export function updateRepoWiki(
-	id: string,
-	data?: { extra_prompt?: string },
+  id: string,
+  data?: { extra_prompt?: string },
 ): Promise<BaseResponse> {
-	return apiClient.put(`/api/v1/repowiki/configs/${id}/update`, data)
+  return apiClient.put(`/api/v1/repowiki/configs/${id}/update`, data)
 }
 
 export function getRepoWikiVersionList(
-	configId: string,
-	params?: RepoWikiConfigListParams,
+  configId: string,
+  params?: RepoWikiConfigListParams,
 ): Promise<BaseResponse<RepoWikiVersionListResponse>> {
-	return apiClient.get(`/api/v1/repowiki/configs/${configId}/versions`, { params })
+  return apiClient.get(`/api/v1/repowiki/configs/${configId}/versions`, {
+    params,
+  })
 }
 
 export function getRepoWikiVersionStatus(
-	versionId: string,
+  versionId: string,
 ): Promise<BaseResponse<{ status: string; message?: string }>> {
-	return apiClient.get(`/api/v1/repowiki/versions/${versionId}/status`)
+  return apiClient.get(`/api/v1/repowiki/versions/${versionId}/status`)
 }
 
 export function getConfigByProjectId(
-	projectId: string,
+  projectId: string,
 ): Promise<BaseResponse<RepoWikiConfigItem | null>> {
-	return apiClient.get(`/api/v1/repowiki/by-project/${projectId}`)
+  return apiClient.get(`/api/v1/repowiki/by-project/${projectId}`)
 }
 
 export function updateSelectedVersion(
-	configId: string,
-	versionId: string,
+  configId: string,
+  versionId: string,
 ): Promise<BaseResponse> {
-	return apiClient.put(`/api/v1/repowiki/configs/${configId}/selected-version`, { version_id: versionId })
+  return apiClient.put(
+    `/api/v1/repowiki/configs/${configId}/selected-version`,
+    { version_id: versionId },
+  )
 }
 
 export function cleanFailedVersions(
-	configId: string,
+  configId: string,
 ): Promise<BaseResponse<CleanFailedVersionsResponse>> {
-	return apiClient.delete(`/api/v1/repowiki/configs/${configId}/versions/failed`)
+  return apiClient.delete(
+    `/api/v1/repowiki/configs/${configId}/versions/failed`,
+  )
 }
 
 export function keepLatestVersions(
-	configId: string,
+  configId: string,
 ): Promise<BaseResponse<KeepLatestVersionsResponse>> {
-	return apiClient.delete(`/api/v1/repowiki/configs/${configId}/versions`, {
-		params: { keep: 'latest' },
-	})
+  return apiClient.delete(`/api/v1/repowiki/configs/${configId}/versions`, {
+    params: { keep: 'latest' },
+  })
 }
 
-export function cleanRepoWikiGitCache(
-	configId: string,
-): Promise<BaseResponse> {
-	return apiClient.delete(`/api/v1/repowiki/configs/${configId}/cache`)
+export function cleanRepoWikiGitCache(configId: string): Promise<BaseResponse> {
+  return apiClient.delete(`/api/v1/repowiki/configs/${configId}/cache`)
 }
diff --git a/web/src/lib/apis/ssh.ts b/web/src/lib/apis/ssh.ts
index c5859e0..a83bda7 100644
--- a/web/src/lib/apis/ssh.ts
+++ b/web/src/lib/apis/ssh.ts
@@ -1,45 +1,45 @@
 import { apiClient } from './client'
 import type { BaseResponse } from '../models/response/common'
 import type {
-	CreateSshKeyRequest,
-	UpdateSshKeyRequest,
-	SshKeyListParams,
+  CreateSshKeyRequest,
+  UpdateSshKeyRequest,
+  SshKeyListParams,
 } from '../models/request/ssh'
 import type {
-	SshKeyItem,
-	CreateSshKeyResponse,
-	SshKeyListResponse,
+  SshKeyItem,
+  CreateSshKeyResponse,
+  SshKeyListResponse,
 } from '../models/response/ssh'
 
 export function createSshKey(
-	data: CreateSshKeyRequest,
+  data: CreateSshKeyRequest,
 ): Promise<BaseResponse<CreateSshKeyResponse>> {
-	return apiClient.post('/api/v1/ssh', data)
+  return apiClient.post('/api/v1/ssh', data)
 }
 
 export function listSshKeys(
-	params?: SshKeyListParams,
+  params?: SshKeyListParams,
 ): Promise<BaseResponse<SshKeyListResponse>> {
-	return apiClient.get('/api/v1/ssh', { params })
+  return apiClient.get('/api/v1/ssh', { params })
 }
 
 export function getSshKey(id: string): Promise<BaseResponse<SshKeyItem>> {
-	return apiClient.get(`/api/v1/ssh/${id}`)
+  return apiClient.get(`/api/v1/ssh/${id}`)
 }
 
 export function updateSshKey(
-	id: string,
-	data: UpdateSshKeyRequest,
+  id: string,
+  data: UpdateSshKeyRequest,
 ): Promise<BaseResponse<SshKeyItem>> {
-	return apiClient.put(`/api/v1/ssh/${id}`, data)
+  return apiClient.put(`/api/v1/ssh/${id}`, data)
 }
 
 export function deleteSshKey(id: string): Promise<BaseResponse> {
-	return apiClient.delete(`/api/v1/ssh/${id}`)
+  return apiClient.delete(`/api/v1/ssh/${id}`)
 }
 
 export function getSshPublicKey(id: string): Promise<Blob> {
-	return apiClient.get(`/api/v1/ssh/${id}/public-key`, {
-		responseType: 'blob',
-	})
+  return apiClient.get(`/api/v1/ssh/${id}/public-key`, {
+    responseType: 'blob',
+  })
 }
diff --git a/web/src/lib/apis/user.ts b/web/src/lib/apis/user.ts
index 20ae4f2..9e3ed26 100644
--- a/web/src/lib/apis/user.ts
+++ b/web/src/lib/apis/user.ts
@@ -6,7 +6,10 @@ import type {
   UpdatePasswordResponseWrapper,
   BiometricCredentialListResponseWrapper,
 } from '../models/response/user'
-import type { UpdateProfileRequest, UpdatePasswordRequest } from '../models/request/user'
+import type {
+  UpdateProfileRequest,
+  UpdatePasswordRequest,
+} from '../models/request/user'
 
 /** 获取当前用户信息 */
 export function getCurrentUser(): Promise<UserInfoResponseWrapper> {
@@ -46,4 +49,4 @@ export async function deleteBiometricCredential(
   id: string,
 ): Promise<BaseResponse<null>> {
   return apiClient.delete(`/api/v1/user/biometric/credentials/${id}`)
-}
\ No newline at end of file
+}
diff --git a/web/src/lib/apis/webhook.ts b/web/src/lib/apis/webhook.ts
index 8986bbd..ddc44f1 100644
--- a/web/src/lib/apis/webhook.ts
+++ b/web/src/lib/apis/webhook.ts
@@ -40,7 +40,9 @@ export interface WebhookEventList {
   items: WebhookEvent[]
 }
 
-export async function getWebhookConfig(configId: string): Promise<BaseResponse<WebhookConfig>> {
+export async function getWebhookConfig(
+  configId: string,
+): Promise<BaseResponse<WebhookConfig>> {
   return apiClient.get(`/api/v1/repowiki/configs/${configId}/webhook`)
 }
 
@@ -48,13 +50,18 @@ export async function updateWebhookBranches(
   configId: string,
   branches: string[],
 ): Promise<BaseResponse> {
-  return apiClient.put(`/api/v1/repowiki/configs/${configId}/webhook/branches`, { branches })
+  return apiClient.put(
+    `/api/v1/repowiki/configs/${configId}/webhook/branches`,
+    { branches },
+  )
 }
 
 export async function regenerateWebhook(
   configId: string,
 ): Promise<BaseResponse<RegenerateWebhookResponse>> {
-  return apiClient.post(`/api/v1/repowiki/configs/${configId}/webhook/regenerate`)
+  return apiClient.post(
+    `/api/v1/repowiki/configs/${configId}/webhook/regenerate`,
+  )
 }
 
 export async function listWebhookEvents(
diff --git a/web/src/lib/cookie.test.ts b/web/src/lib/cookie.test.ts
index b647623..9683df8 100644
--- a/web/src/lib/cookie.test.ts
+++ b/web/src/lib/cookie.test.ts
@@ -88,7 +88,9 @@ describe('cookie governance', () => {
 
     it('returns null if cookie value is invalid or out of range', () => {
       // 恶意或异常非数值
-      Cookies.set(COOKIE_KEYS.QA_SPLITTER_RATIO, 'invalid_number', { path: '/' })
+      Cookies.set(COOKIE_KEYS.QA_SPLITTER_RATIO, 'invalid_number', {
+        path: '/',
+      })
       expect(getQaSplitterRatio()).toBeNull()
 
       // 外部篡改为超出界限的值
diff --git a/web/src/lib/format-answer.ts b/web/src/lib/format-answer.ts
index 88b3730..ef31b54 100644
--- a/web/src/lib/format-answer.ts
+++ b/web/src/lib/format-answer.ts
@@ -18,7 +18,10 @@ function labelOf(options: AnswerOption[] | undefined, id: string): string {
 /** 将各题型提交的 answer 格式化为可读字符串。
  *  对于存选项 ID 的题型（select/multi-select/options/rank/rate），
  *  通过 options 把雪花 ID 映射回 label；不传 options 则回退显示原始值。 */
-export function formatAnswer(answer: unknown, options?: AnswerOption[]): string {
+export function formatAnswer(
+  answer: unknown,
+  options?: AnswerOption[],
+): string {
   if (answer == null) return '—'
   if (typeof answer === 'string') return answer
   if (typeof answer === 'number' || typeof answer === 'boolean')
@@ -70,7 +73,9 @@ export function formatAnswer(answer: unknown, options?: AnswerOption[]): string
             : '',
         )
         .filter(Boolean)
-      return names.length > 0 ? `📷 ${names.join('、')}` : `📷 ${obj.images.length} 张图片`
+      return names.length > 0
+        ? `📷 ${names.join('、')}`
+        : `📷 ${obj.images.length} 张图片`
     }
     // 文件: { files: [{ filename, ... }] }
     if ('files' in obj && Array.isArray(obj.files)) {
@@ -81,7 +86,9 @@ export function formatAnswer(answer: unknown, options?: AnswerOption[]): string
             : '',
         )
         .filter(Boolean)
-      return names.length > 0 ? `📎 ${names.join('、')}` : `📎 ${obj.files.length} 个文件`
+      return names.length > 0
+        ? `📎 ${names.join('、')}`
+        : `📎 ${obj.files.length} 个文件`
     }
     // 布尔: { choice: "yes" | "no" }
     if ('choice' in obj) return String(obj.choice)
@@ -100,17 +107,25 @@ export function formatAnswer(answer: unknown, options?: AnswerOption[]): string
     // 决策题 (diff/plan/review): { decision, feedback?, edited?, annotations? }
     if ('decision' in obj) {
       const decision = String(obj.decision)
-      const labels: Record<string, string> = { approve: '批准', reject: '拒绝', edit: '已编辑', revise: '需修订' }
+      const labels: Record<string, string> = {
+        approve: '批准',
+        reject: '拒绝',
+        edit: '已编辑',
+        revise: '需修订',
+      }
       const parts: string[] = [labels[decision] ?? decision]
       if ('feedback' in obj && obj.feedback) parts.push(String(obj.feedback))
       return parts.join('（') + (parts.length > 1 ? '）' : '')
     }
     // 兜底：过滤掉 content 等大字段后显示 JSON key 名
-    const { content: _c, ...rest } = obj as Record<string, unknown>
+    const { content: _c, ...rest } = obj
     const keys = Object.keys(rest)
     if (keys.length === 0) return '—'
     return keys
-      .map((k) => `${k}: ${typeof rest[k] === 'string' ? String(rest[k]) : JSON.stringify(rest[k])}`)
+      .map(
+        (k) =>
+          `${k}: ${typeof rest[k] === 'string' ? String(rest[k]) : JSON.stringify(rest[k])}`,
+      )
       .join(', ')
   }
   return String(answer)
diff --git a/web/src/lib/mcp-connect.test.ts b/web/src/lib/mcp-connect.test.ts
index 3176d12..c3eaadb 100644
--- a/web/src/lib/mcp-connect.test.ts
+++ b/web/src/lib/mcp-connect.test.ts
@@ -4,7 +4,9 @@ import {
   MCP_KEY_PLACEHOLDER,
   MCP_PATH,
   MCP_SERVER_NAME,
+  MCP_TOOL_MODULES,
   MCP_TOOL_NAMES,
+  MCP_WORKFLOW_STEPS,
   buildAuthorizationHeader,
   buildAuthorizationValue,
   buildClaudeOAuthAdd,
@@ -45,8 +47,18 @@ const expectedTools = [
   'preview_session_create',
   'preview_session_list',
   'preview_file_upload',
+  'preview_file_edit',
+  'preview_file_delete',
   'preview_file_list',
   'preview_file_get',
+  'preview_lpw_init',
+  'preview_lpw_node_add',
+  'preview_lpw_node_edit',
+  'preview_lpw_node_remove',
+  'preview_lpw_node_sort',
+  'preview_lpw_meta_set',
+  'preview_lpw_outline',
+  'preview_lpw_schema',
   'workspace_list',
   'workspace_get',
   'pages_list',
@@ -104,13 +116,59 @@ describe('api key helpers', () => {
 })
 
 describe('tool catalog', () => {
-  it('lists the 30 backend MCP tools', () => {
-    expect(MCP_TOOL_NAMES).toHaveLength(30)
+  it('lists the 40 backend MCP tools', () => {
+    expect(MCP_TOOL_NAMES).toHaveLength(40)
     expect([...MCP_TOOL_NAMES].sort()).toEqual([...expectedTools].sort())
     expect(MCP_TOOL_NAMES).not.toContain('qa_pushQuestion')
     expect(MCP_TOOL_NAMES).not.toContain('memory_create')
     expect(MCP_TOOL_NAMES).not.toContain('repoWiki_analyze')
   })
+
+  it('organizes tools into 8 core capability modules', () => {
+    expect(MCP_TOOL_MODULES).toHaveLength(8)
+    const moduleIds = MCP_TOOL_MODULES.map((mod) => mod.id)
+    expect(moduleIds).toEqual([
+      'workspace',
+      'project',
+      'qa',
+      'preview',
+      'preview_lpw',
+      'pages',
+      'repowiki',
+      'pin',
+    ])
+
+    const previewMod = MCP_TOOL_MODULES.find((m) => m.id === 'preview')
+    expect(previewMod?.tools.map((t) => t.name)).toContain('preview_file_edit')
+    expect(previewMod?.tools.map((t) => t.name)).toContain(
+      'preview_file_delete',
+    )
+    expect(previewMod?.tools).toHaveLength(7)
+
+    const lpwMod = MCP_TOOL_MODULES.find((m) => m.id === 'preview_lpw')
+    expect(lpwMod?.tools).toHaveLength(8)
+    expect(lpwMod?.tools.map((t) => t.name)).toEqual([
+      'preview_lpw_init',
+      'preview_lpw_node_add',
+      'preview_lpw_node_edit',
+      'preview_lpw_node_remove',
+      'preview_lpw_node_sort',
+      'preview_lpw_meta_set',
+      'preview_lpw_outline',
+      'preview_lpw_schema',
+    ])
+  })
+
+  it('includes incremental editing and LPW steps in workflow', () => {
+    expect(MCP_WORKFLOW_STEPS).toHaveLength(8)
+    const step3 = MCP_WORKFLOW_STEPS.find((s) => s.step === 3)
+    expect(step3?.tools).toContain('preview_file_edit')
+    expect(step3?.tools).toContain('preview_file_delete')
+
+    const step4 = MCP_WORKFLOW_STEPS.find((s) => s.step === 4)
+    expect(step4?.tools).toContain('preview_lpw_init')
+    expect(step4?.tools).toContain('preview_lpw_node_add')
+  })
 })
 
 describe('client snippets', () => {
diff --git a/web/src/lib/mcp-connect.ts b/web/src/lib/mcp-connect.ts
index e478f51..2c57a6e 100644
--- a/web/src/lib/mcp-connect.ts
+++ b/web/src/lib/mcp-connect.ts
@@ -308,7 +308,10 @@ export const MCP_TOOL_MODULES: McpToolModule[] = [
     name: 'Workspace',
     summary: '先选定工作空间，再在该空间内解析项目。单用户用来拆开生活与工作。',
     tools: [
-      { name: 'workspace_list', summary: '列出全部空间，默认空间 slug 为 default' },
+      {
+        name: 'workspace_list',
+        summary: '列出全部空间，默认空间 slug 为 default',
+      },
       { name: 'workspace_get', summary: '按 ID 或 slug 查看空间' },
     ],
   },
@@ -347,11 +350,59 @@ export const MCP_TOOL_MODULES: McpToolModule[] = [
     summary:
       '把 HTML、CSS 和 JavaScript 原型放进安全沙盒，先看见真实效果，再决定怎样落到项目里。',
     tools: [
-      { name: 'preview_session_list', summary: '复用当前任务的预览会话' },
-      { name: 'preview_session_create', summary: '创建空会话，不会生成代码' },
-      { name: 'preview_file_upload', summary: '逐文件上传，单文件上限 256KB' },
-      { name: 'preview_file_list', summary: '打开页面前核对文件清单' },
-      { name: 'preview_file_get', summary: '读取单个预览文件' },
+      { name: 'preview_session_list', summary: '复用当前任务未过期的有效预览' },
+      {
+        name: 'preview_session_create',
+        summary: '创建空预览会话（生成专属哈希访问通道）',
+      },
+      {
+        name: 'preview_file_upload',
+        summary: '上传或覆写单个静态资源文件（单文件上限 256KB）',
+      },
+      { name: 'preview_file_edit', summary: '行级精准增量替换与代码段修补' },
+      { name: 'preview_file_delete', summary: '删除会话中的冗余或废弃文件' },
+      {
+        name: 'preview_file_list',
+        summary: '打开沙盒前核对会话文件清单与入口文件',
+      },
+      { name: 'preview_file_get', summary: '读取指定文件全文或指定行号区间' },
+    ],
+  },
+  {
+    id: 'preview_lpw',
+    name: 'Preview LPW',
+    summary:
+      '按 1.1 节点层级语义分块编排出版级交互文档，包含布局、容器与 26 种原子块，提供极速大纲与规范速查。',
+    tools: [
+      {
+        name: 'preview_lpw_init',
+        summary: '初始化或重置出版级 LPW 节点树骨架',
+      },
+      {
+        name: 'preview_lpw_node_add',
+        summary: '按层级追加或按位置插入结构化节点',
+      },
+      {
+        name: 'preview_lpw_node_edit',
+        summary: '精准编辑指定节点的属性、正文或容器变体',
+      },
+      { name: 'preview_lpw_node_remove', summary: '移除不需要的特定节点' },
+      {
+        name: 'preview_lpw_node_sort',
+        summary: '批量调整节点树排序与层级拓扑',
+      },
+      {
+        name: 'preview_lpw_meta_set',
+        summary: '声明或修改文档标题、导读与元数据',
+      },
+      {
+        name: 'preview_lpw_outline',
+        summary: '极速提取大纲树，辅助 Agent 掌握文档脉络',
+      },
+      {
+        name: 'preview_lpw_schema',
+        summary: '动态拉取 LPW Schema 规范定义与只读契约',
+      },
     ],
   },
   {
@@ -362,7 +413,10 @@ export const MCP_TOOL_MODULES: McpToolModule[] = [
     tools: [
       { name: 'pages_list', summary: '列出项目已发布页面与生效版本' },
       { name: 'pages_promote', summary: '将预览会话晋升为 Pages 快照' },
-      { name: 'pages_fork', summary: '从已发布页面派生可继续修改的 Preview 草稿' },
+      {
+        name: 'pages_fork',
+        summary: '从已发布页面派生可继续修改的 Preview 草稿',
+      },
     ],
   },
   {
@@ -400,7 +454,13 @@ export const MCP_WORKFLOW_STEPS: McpWorkflowStep[] = [
     step: 1,
     title: '先选定空间，再找到当前项目',
     body: 'Agent 先列出空间并选定一个，再按项目路径在该空间内查找。第一次接入的代码库，确认没有重复记录后再创建。',
-    tools: ['workspace_list', 'workspace_get', 'project_get', 'project_list', 'project_create'],
+    tools: [
+      'workspace_list',
+      'workspace_get',
+      'project_get',
+      'project_list',
+      'project_create',
+    ],
   },
   {
     step: 2,
@@ -417,35 +477,53 @@ export const MCP_WORKFLOW_STEPS: McpWorkflowStep[] = [
   },
   {
     step: 3,
-    title: '界面想法先放进预览',
-    body: '涉及页面或交互时，可以先上传一个可操作的沙盒原型。核对文件清单后，再把预览交给你体验。',
+    title: '界面想法放进预览，支持行级微调',
+    body: '涉及页面或交互时，可以先上传或按行编辑沙盒原型。局部改动通过行区间精准替换，核对清单后即可实时查看。',
     tools: [
       'preview_session_list',
       'preview_session_create',
       'preview_file_upload',
+      'preview_file_get',
+      'preview_file_edit',
+      'preview_file_delete',
       'preview_file_list',
     ],
   },
   {
     step: 4,
+    title: '结构化方案采用 LPW 节点编排',
+    body: '对于架构评审、技术简报或数据看板，Agent 按三层节点树增量构建出版级 LPW 文档，并在生成大纲确认无误后交付。',
+    tools: [
+      'preview_lpw_init',
+      'preview_lpw_node_add',
+      'preview_lpw_node_edit',
+      'preview_lpw_node_remove',
+      'preview_lpw_node_sort',
+      'preview_lpw_meta_set',
+      'preview_lpw_outline',
+      'preview_lpw_schema',
+    ],
+  },
+  {
+    step: 5,
     title: '草稿确认后晋升为 Pages',
     body: '需要对外路径式访问时，先列出已发布页面确认 slug，再把当前 Preview 晋升为不可变快照。密码保护只在控制台配置。',
     tools: ['pages_list', 'pages_promote', 'pages_fork'],
   },
   {
-    step: 5,
+    step: 6,
     title: '把预览带回同一次讨论',
     body: 'Agent 可以直接打开预览链接，也可以把预览作为问答补充发到交互页，让设计和反馈留在同一个会话里。',
     tools: ['qa_push_supplement', 'qa_get_answer'],
   },
   {
-    step: 6,
+    step: 7,
     title: '需要全局视野时翻阅 Wiki',
     body: '先找到已完成的 Wiki 版本，再读取相关页面。版本更新由仓库的 Git Webhook 自动触发。',
     tools: ['repoWiki_list', 'repoWiki_query'],
   },
   {
-    step: 7,
+    step: 8,
     title: '跨项目变化及时传递',
     body: '接口变化或依赖升级会影响其他代码库时，先查看目标项目的待处理约束，再推送或消费对应记录。',
     tools: ['pin_peek', 'pin_list', 'pin_push', 'pin_consume'],
diff --git a/web/src/lib/models/request/repowiki.ts b/web/src/lib/models/request/repowiki.ts
index 0895e07..b5b36cf 100644
--- a/web/src/lib/models/request/repowiki.ts
+++ b/web/src/lib/models/request/repowiki.ts
@@ -1,28 +1,28 @@
 export interface RepoWikiConfigListParams {
-	page?: number
-	size?: number
+  page?: number
+  size?: number
 }
 
 export interface CreateRepoWikiConfigRequest {
-	repo_url: string
-	default_branch?: string
-	default_language?: string
-	ssh_key_id?: string
-	wiki_password?: string
-	project_id: string
+  repo_url: string
+  default_branch?: string
+  default_language?: string
+  ssh_key_id?: string
+  wiki_password?: string
+  project_id: string
 }
 
 export interface UpdateRepoWikiConfigRequest {
-	repo_url?: string
-	default_branch?: string
-	default_language?: string
-	ssh_key_id?: string
-	wiki_password?: string
-	custom_prompt?: string
+  repo_url?: string
+  default_branch?: string
+  default_language?: string
+  ssh_key_id?: string
+  wiki_password?: string
+  custom_prompt?: string
 }
 
 export interface AnalyzeRepoWikiRequest {
-	language?: string
-	branch?: string
-	extra_prompt?: string
+  language?: string
+  branch?: string
+  extra_prompt?: string
 }
diff --git a/web/src/lib/models/request/ssh.ts b/web/src/lib/models/request/ssh.ts
index 840f04a..e2c8f4f 100644
--- a/web/src/lib/models/request/ssh.ts
+++ b/web/src/lib/models/request/ssh.ts
@@ -1,16 +1,16 @@
 export interface CreateSshKeyRequest {
-	source: 'generated' | 'imported'
-	name: string
-	description?: string
-	private_key?: string // 仅 imported 时必填
+  source: 'generated' | 'imported'
+  name: string
+  description?: string
+  private_key?: string // 仅 imported 时必填
 }
 
 export interface UpdateSshKeyRequest {
-	name?: string
-	description?: string
+  name?: string
+  description?: string
 }
 
 export interface SshKeyListParams {
-	page?: number
-	size?: number
+  page?: number
+  size?: number
 }
diff --git a/web/src/lib/models/response/repowiki.ts b/web/src/lib/models/response/repowiki.ts
index 49bf830..21f67a3 100644
--- a/web/src/lib/models/response/repowiki.ts
+++ b/web/src/lib/models/response/repowiki.ts
@@ -1,59 +1,59 @@
 import type { ProjectItem } from './project'
 
 export interface RepoWikiConfigItem {
-	id: string
-	project_id: string
-	project?: ProjectItem
-	repo_url: string
-	default_branch: string
-	default_language: string
-	status: string
-	ssh_key_id?: string
-	has_password: boolean
-	custom_prompt?: string
-	selected_version_id?: string
-	last_accessed_at?: string
-	latest_version?: RepoWikiVersionItem
-	created_at: string
-	updated_at: string
+  id: string
+  project_id: string
+  project?: ProjectItem
+  repo_url: string
+  default_branch: string
+  default_language: string
+  status: string
+  ssh_key_id?: string
+  has_password: boolean
+  custom_prompt?: string
+  selected_version_id?: string
+  last_accessed_at?: string
+  latest_version?: RepoWikiVersionItem
+  created_at: string
+  updated_at: string
 }
 
 export interface RepoWikiVersionItem {
-	id: string
-	config_id: string
-	commit_hash: string
-	branch: string
-	language: string
-	status: string // pending | cloning | scanning | analyzing | assembling | completed | failed | cancelled
-	current_stage?: string // scan | dep_extract | pass1 | pass2 | pass3 | pass4 | assemble
-	progress_percent: number
-	error_msg?: string
-	file_count: number
-	token_count: number
-	duration_ms: number
-	started_at?: string
-	completed_at?: string
-	created_at: string
+  id: string
+  config_id: string
+  commit_hash: string
+  branch: string
+  language: string
+  status: string // pending | cloning | scanning | analyzing | assembling | completed | failed | cancelled
+  current_stage?: string // scan | dep_extract | pass1 | pass2 | pass3 | pass4 | assemble
+  progress_percent: number
+  error_msg?: string
+  file_count: number
+  token_count: number
+  duration_ms: number
+  started_at?: string
+  completed_at?: string
+  created_at: string
 }
 
 export interface RepoWikiConfigListResponse {
-	items: RepoWikiConfigItem[]
-	total: number
+  items: RepoWikiConfigItem[]
+  total: number
 }
 
 export interface RepoWikiVersionListResponse {
-	items: RepoWikiVersionItem[]
-	total: number
-	completed_count: number
-	generating_count: number
+  items: RepoWikiVersionItem[]
+  total: number
+  completed_count: number
+  generating_count: number
 }
 
 export interface CleanFailedVersionsResponse {
-	cleaned: number
+  cleaned: number
 }
 
 export interface KeepLatestVersionsResponse {
-	cleaned: number
-	skipped: number
-	kept_version_id?: string
+  cleaned: number
+  skipped: number
+  kept_version_id?: string
 }
diff --git a/web/src/lib/models/response/ssh.ts b/web/src/lib/models/response/ssh.ts
index f8eb519..a726da9 100644
--- a/web/src/lib/models/response/ssh.ts
+++ b/web/src/lib/models/response/ssh.ts
@@ -1,20 +1,20 @@
 export interface SshKeyItem {
-	id: string
-	name: string
-	description: string
-	key_type: string // 'ed25519' | 'rsa'
-	public_key: string
-	fingerprint: string
-	source: 'generated' | 'imported'
-	created_at: string
-	updated_at: string
+  id: string
+  name: string
+  description: string
+  key_type: string // 'ed25519' | 'rsa'
+  public_key: string
+  fingerprint: string
+  source: 'generated' | 'imported'
+  created_at: string
+  updated_at: string
 }
 
 export interface CreateSshKeyResponse extends SshKeyItem {
-	public_key_download_url: string
+  public_key_download_url: string
 }
 
 export interface SshKeyListResponse {
-	total: number
-	items: SshKeyItem[]
+  total: number
+  items: SshKeyItem[]
 }
diff --git a/web/src/lib/plugin-connect.ts b/web/src/lib/plugin-connect.ts
index 7167e35..32cad15 100644
--- a/web/src/lib/plugin-connect.ts
+++ b/web/src/lib/plugin-connect.ts
@@ -62,10 +62,9 @@ export function buildNpxSkillsSnippet(origin: string): string {
 }
 
 export function buildClaudePluginSnippet(origin: string): string {
-  return [
-    buildClaudeMarketplaceAdd(origin),
-    buildClaudePluginInstall(),
-  ].join('\n')
+  return [buildClaudeMarketplaceAdd(origin), buildClaudePluginInstall()].join(
+    '\n',
+  )
 }
 
 export function buildCodexMarketplaceAdd(): string {
diff --git a/web/src/lib/preview-file.ts b/web/src/lib/preview-file.ts
index 3fd0c85..1f03e85 100644
--- a/web/src/lib/preview-file.ts
+++ b/web/src/lib/preview-file.ts
@@ -1,4 +1,5 @@
-export type PreviewKind = 'html' | 'markdown' | 'code' | 'svg' | 'lpw' | 'tsx' | 'mdx'
+export type PreviewKind =
+  'html' | 'markdown' | 'code' | 'svg' | 'lpw' | 'tsx' | 'mdx'
 
 const LPW_EXT = new Set(['lpw'])
 const MDX_EXT = new Set(['mdx'])
diff --git a/web/src/routes/__root.tsx b/web/src/routes/__root.tsx
index f678bb8..958953e 100644
--- a/web/src/routes/__root.tsx
+++ b/web/src/routes/__root.tsx
@@ -35,7 +35,9 @@ function RootComponent() {
   return (
     <QueryClientProvider client={queryClient}>
       <Outlet />
-      {import.meta.env.DEV && <TanStackRouterDevtools position="bottom-right" />}
+      {import.meta.env.DEV && (
+        <TanStackRouterDevtools position="bottom-right" />
+      )}
     </QueryClientProvider>
   )
 }
diff --git a/web/src/routes/_public/oauth.tsx b/web/src/routes/_public/oauth.tsx
index 77410c7..de706da 100644
--- a/web/src/routes/_public/oauth.tsx
+++ b/web/src/routes/_public/oauth.tsx
@@ -1,4 +1,5 @@
-import { useCallback, useEffect, useState, type FormEvent } from 'react'
+import { useCallback, useEffect, useState  } from 'react'
+import type {FormEvent} from 'react';
 import { createFileRoute } from '@tanstack/react-router'
 import { CheckCircle2, ShieldCheck, XCircle } from 'lucide-react'
 import { toast } from 'sonner'
@@ -10,9 +11,10 @@ import { Label } from '@lumina/components/ui/label'
 import { useAuth, useLogin } from '#/hooks/useAuth'
 import {
   getOAuthConsentDetail,
-  postOAuthConsent,
-  type OAuthConsentDetail,
+  postOAuthConsent
+  
 } from '#/lib/apis/oauth'
+import type {OAuthConsentDetail} from '#/lib/apis/oauth';
 
 interface OAuthSearch {
   authorize_id?: string
@@ -130,11 +132,7 @@ function OAuthAuthorizePage() {
                 autoComplete="current-password"
               />
             </div>
-            <Button
-              type="submit"
-              className="w-full"
-              disabled={login.isPending}
-            >
+            <Button type="submit" className="w-full" disabled={login.isPending}>
               {login.isPending ? '登录中…' : '登录并继续授权'}
             </Button>
           </form>
@@ -185,7 +183,10 @@ function useOAuthSearch(): OAuthSearch {
 function Notice({ text }: { text: string }) {
   return (
     <div className="flex items-start gap-2 text-[13px] leading-relaxed text-sea-ink-soft">
-      <XCircle className="mt-0.5 size-4 shrink-0 text-lagoon-deep" aria-hidden />
+      <XCircle
+        className="mt-0.5 size-4 shrink-0 text-lagoon-deep"
+        aria-hidden
+      />
       <span>{text}</span>
     </div>
   )
diff --git a/web/src/routes/_public/start.tsx b/web/src/routes/_public/start.tsx
index 4d7b201..4ecadd5 100644
--- a/web/src/routes/_public/start.tsx
+++ b/web/src/routes/_public/start.tsx
@@ -7,6 +7,7 @@ import {
   Brain,
   CheckCircle2,
   FolderKanban,
+  Layers,
   LayoutGrid,
   MessageCircle,
   MonitorPlay,
@@ -90,6 +91,8 @@ function iconForModule(id: string) {
       return MessageCircle
     case 'preview':
       return MonitorPlay
+    case 'preview_lpw':
+      return Layers
     case 'pages':
       return Sparkles
     case 'pin':
@@ -348,7 +351,7 @@ function StartPage() {
             className="display-title mb-8 text-center text-2xl font-bold text-sea-ink sm:text-3xl"
             variants={fadeUp}
           >
-            30 个工具，按任务编排
+            40 个工具，按任务编排
           </motion.h2>
           <div className="mx-auto grid max-w-5xl grid-cols-1 gap-px border border-line bg-line sm:grid-cols-2 lg:grid-cols-3">
             {MCP_TOOL_MODULES.map((mod) => {
diff --git a/web/src/routes/auth/login.tsx b/web/src/routes/auth/login.tsx
index 6401d05..d45c4e6 100644
--- a/web/src/routes/auth/login.tsx
+++ b/web/src/routes/auth/login.tsx
@@ -1,6 +1,11 @@
 import { useState, useRef, useEffect } from 'react'
 import type { FormEvent } from 'react'
-import { createFileRoute, Link, useRouter, useSearch } from '@tanstack/react-router'
+import {
+  createFileRoute,
+  Link,
+  useRouter,
+  useSearch,
+} from '@tanstack/react-router'
 import { motion } from 'motion/react'
 import { Eye, EyeOff, Fingerprint, LogIn } from 'lucide-react'
 
@@ -9,7 +14,12 @@ import { Input } from '@lumina/components/ui/input'
 import { Label } from '@lumina/components/ui/label'
 import { Separator } from '@lumina/components/ui/separator'
 
-import { useLogin, useAuth, useBiometricAvailability, useBiometricLogin } from '#/hooks/useAuth'
+import {
+  useLogin,
+  useAuth,
+  useBiometricAvailability,
+  useBiometricLogin,
+} from '#/hooks/useAuth'
 import { getSafeRedirect } from '#/lib/apis/client'
 import { rightItemVariants } from '../auth'
 
@@ -90,9 +100,7 @@ function LoginPage() {
         <h1 className="display-title text-2xl font-bold text-sea-ink lg:text-3xl">
           欢迎回来
         </h1>
-        <p className="mt-2 text-sm text-sea-ink-soft">
-          登录到你的知识中枢
-        </p>
+        <p className="mt-2 text-sm text-sea-ink-soft">登录到你的知识中枢</p>
       </motion.div>
 
       {/* Form */}
diff --git a/web/src/routes/console.tsx b/web/src/routes/console.tsx
index b583805..d855d9a 100644
--- a/web/src/routes/console.tsx
+++ b/web/src/routes/console.tsx
@@ -3,14 +3,18 @@ import {
   Outlet,
   redirect,
   useLocation,
+  useNavigate,
 } from '@tanstack/react-router'
 import { motion, AnimatePresence } from 'motion/react'
+import { ArrowLeft } from 'lucide-react'
+import { Button } from '@lumina/components/ui/button'
 import {
   SidebarProvider,
   SidebarInset,
   SidebarTrigger,
 } from '@lumina/components/ui/sidebar'
 import { AppSidebar } from '#/components/app-sidebar'
+import { SettingsSidebar } from '#/components/settings/settings-sidebar'
 import { ConsoleBreadcrumb } from '#/components/console-breadcrumb'
 import { Toaster } from '@lumina/components/ui/sonner'
 import Cookies from 'js-cookie'
@@ -43,6 +47,10 @@ const headerVariants = {
 
 function ConsoleLayout() {
   const location = useLocation()
+  const navigate = useNavigate()
+  const isSettingsRoute =
+    location.pathname === '/console/settings' ||
+    location.pathname.startsWith('/console/settings/')
 
   return (
     <SidebarProvider>
@@ -52,17 +60,36 @@ function ConsoleLayout() {
       >
         跳到主内容
       </a>
-      <AppSidebar />
+      {isSettingsRoute ? <SettingsSidebar /> : <AppSidebar />}
 
       <SidebarInset className="min-w-0">
         <motion.div
-          className="flex h-16 shrink-0 items-center gap-2 px-4"
+          className="flex h-16 shrink-0 items-center justify-between px-4"
           initial="hidden"
           animate="visible"
           variants={headerVariants}
         >
-          <SidebarTrigger className="-ml-1 transition-colors hover:text-lagoon" />
-          <ConsoleBreadcrumb />
+          <div className="flex items-center gap-2">
+            <SidebarTrigger className="-ml-1 transition-colors hover:text-lagoon" />
+            <ConsoleBreadcrumb />
+          </div>
+
+          {/* 🌟 系统设置下顶栏右侧集中唯一的退出返回按钮 */}
+          {isSettingsRoute && (
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => void navigate({ to: '/console/dashboard' })}
+              className="flex items-center gap-2 rounded-none border-line bg-foam text-xs text-sea-ink hover:border-lagoon hover:bg-chip-bg hover:text-lagoon-deep"
+              title="退出系统设置并返回控制台主看板 (ESC)"
+            >
+              <ArrowLeft className="size-3.5" />
+              <span>退出设置返回看板</span>
+              <kbd className="font-mono text-[9.5px] bg-sand border border-line px-1 py-0.5 text-sea-ink-soft">
+                ESC
+              </kbd>
+            </Button>
+          )}
         </motion.div>
 
         <div
diff --git a/web/src/routes/console/profile.tsx b/web/src/routes/console/profile.tsx
index b66b05a..36efbc0 100644
--- a/web/src/routes/console/profile.tsx
+++ b/web/src/routes/console/profile.tsx
@@ -1,6 +1,11 @@
 import { createFileRoute } from '@tanstack/react-router'
 import { motion } from 'motion/react'
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@lumina/components/ui/tabs'
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from '@lumina/components/ui/tabs'
 import { staggerContainer, staggerItem } from '@lumina/components/motion'
 import { PageHeader } from '#/components/page-header'
 import { ProfileTab } from '#/components/profile/profile-tab'
diff --git a/web/src/routes/console/project.tsx b/web/src/routes/console/project.tsx
index e45a306..3a8fa49 100644
--- a/web/src/routes/console/project.tsx
+++ b/web/src/routes/console/project.tsx
@@ -1,10 +1,10 @@
 import { createFileRoute, Outlet } from '@tanstack/react-router'
 
 export const Route = createFileRoute('/console/project')({
-	staticData: { crumb: '项目管理' },
-	component: ProjectLayout,
+  staticData: { crumb: '项目管理' },
+  component: ProjectLayout,
 })
 
 function ProjectLayout() {
-	return <Outlet />
+  return <Outlet />
 }
diff --git a/web/src/routes/console/project/$projectId/repowiki/create.tsx b/web/src/routes/console/project/$projectId/repowiki/create.tsx
index 4263780..c4d3d21 100644
--- a/web/src/routes/console/project/$projectId/repowiki/create.tsx
+++ b/web/src/routes/console/project/$projectId/repowiki/create.tsx
@@ -2,78 +2,89 @@ import { createFileRoute, useNavigate } from '@tanstack/react-router'
 import { motion } from 'motion/react'
 import { ArrowLeft } from 'lucide-react'
 import { Button } from '@lumina/components/ui/button'
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@lumina/components/ui/card'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@lumina/components/ui/card'
 import { useCreateRepoWikiConfig } from '#/hooks/useRepoWiki'
 import { ConfigForm } from '#/components/repowiki/config-form'
 import { staggerContainer, staggerItem } from '@lumina/components/motion'
 import { PageHeader } from '#/components/page-header'
 
-export const Route = createFileRoute('/console/project/$projectId/repowiki/create')({
-	staticData: { crumb: '新建配置' },
-	component: CreateConfigPage,
+export const Route = createFileRoute(
+  '/console/project/$projectId/repowiki/create',
+)({
+  staticData: { crumb: '新建配置' },
+  component: CreateConfigPage,
 })
 
 function CreateConfigPage() {
-	const { projectId } = Route.useParams()
-	const navigate = useNavigate()
-	const createMutation = useCreateRepoWikiConfig()
+  const { projectId } = Route.useParams()
+  const navigate = useNavigate()
+  const createMutation = useCreateRepoWikiConfig()
 
-	return (
-		<motion.div
-			className="space-y-4"
-			initial="hidden"
-			animate="visible"
-			variants={staggerContainer}
-		>
-			<PageHeader
-				title="创建 Wiki 配置"
-				description="添加新的代码仓库，开始自动生成 Wiki 文档"
-				action={
-					<Button
-						variant="outline"
-						onClick={() =>
-							navigate({ to: '/console/project/$projectId/repowiki', params: { projectId } })
-						}
-					>
-						<ArrowLeft className="mr-2 size-4" />
-						返回 Wiki 管理
-					</Button>
-				}
-			/>
+  return (
+    <motion.div
+      className="space-y-4"
+      initial="hidden"
+      animate="visible"
+      variants={staggerContainer}
+    >
+      <PageHeader
+        title="创建 Wiki 配置"
+        description="添加新的代码仓库，开始自动生成 Wiki 文档"
+        action={
+          <Button
+            variant="outline"
+            onClick={() =>
+              navigate({
+                to: '/console/project/$projectId/repowiki',
+                params: { projectId },
+              })
+            }
+          >
+            <ArrowLeft className="mr-2 size-4" />
+            返回 Wiki 管理
+          </Button>
+        }
+      />
 
-			{/* 表单卡片 */}
-			<motion.div variants={staggerItem}>
-				<Card className="border-border bg-card">
-					<CardHeader>
-						<CardTitle>仓库信息</CardTitle>
-						<CardDescription>
-							填写仓库的基本配置信息，支持 HTTPS 和 SSH 协议
-						</CardDescription>
-					</CardHeader>
-					<CardContent>
-						<ConfigForm
-							onSubmit={(data) =>
-								createMutation.mutate(data, {
-									onSuccess: () => {
-										navigate({
-											to: '/console/project/$projectId/repowiki',
-											params: { projectId },
-										})
-									},
-								})
-							}
-							isPending={createMutation.isPending}
-							onCancel={() =>
-								navigate({
-									to: '/console/project/$projectId/repowiki',
-									params: { projectId },
-								})
-							}
-							projectId={projectId}
-						/>
-					</CardContent>
-				</Card>
-			</motion.div>
-		</motion.div>
-	)
+      {/* 表单卡片 */}
+      <motion.div variants={staggerItem}>
+        <Card className="border-border bg-card">
+          <CardHeader>
+            <CardTitle>仓库信息</CardTitle>
+            <CardDescription>
+              填写仓库的基本配置信息，支持 HTTPS 和 SSH 协议
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <ConfigForm
+              onSubmit={(data) =>
+                createMutation.mutate(data, {
+                  onSuccess: () => {
+                    navigate({
+                      to: '/console/project/$projectId/repowiki',
+                      params: { projectId },
+                    })
+                  },
+                })
+              }
+              isPending={createMutation.isPending}
+              onCancel={() =>
+                navigate({
+                  to: '/console/project/$projectId/repowiki',
+                  params: { projectId },
+                })
+              }
+              projectId={projectId}
+            />
+          </CardContent>
+        </Card>
+      </motion.div>
+    </motion.div>
+  )
 }
diff --git a/web/src/routes/console/project/$projectId/repowiki/index.tsx b/web/src/routes/console/project/$projectId/repowiki/index.tsx
index c25f7e1..95da4f6 100644
--- a/web/src/routes/console/project/$projectId/repowiki/index.tsx
+++ b/web/src/routes/console/project/$projectId/repowiki/index.tsx
@@ -2,28 +2,28 @@ import { useState } from 'react'
 import { createFileRoute, Link, useNavigate } from '@tanstack/react-router'
 import { motion } from 'motion/react'
 import {
-	ArrowLeft,
-	BookOpen,
-	Plus,
-	ExternalLink,
-	Copy,
-	Check,
-	GitBranch,
-	Globe,
-	KeyRound,
-	Lock,
-	Clock,
-	FileText,
-	Webhook,
-	Settings2,
-	Settings,
-	RefreshCw,
-	Play,
-	Trash2,
-	Loader2,
-	XCircle,
-	Layers,
-	HardDriveDownload,
+  ArrowLeft,
+  BookOpen,
+  Plus,
+  ExternalLink,
+  Copy,
+  Check,
+  GitBranch,
+  Globe,
+  KeyRound,
+  Lock,
+  Clock,
+  FileText,
+  Webhook,
+  Settings2,
+  Settings,
+  RefreshCw,
+  Play,
+  Trash2,
+  Loader2,
+  XCircle,
+  Layers,
+  HardDriveDownload,
 } from 'lucide-react'
 import { Button } from '@lumina/components/ui/button'
 import { Card, CardContent } from '@lumina/components/ui/card'
@@ -31,16 +31,21 @@ import { Input } from '@lumina/components/ui/input'
 import { Label } from '@lumina/components/ui/label'
 import { Textarea } from '@lumina/components/ui/textarea'
 import { Separator } from '@lumina/components/ui/separator'
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@lumina/components/ui/tabs'
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from '@lumina/components/ui/tabs'
 import { PageHeader } from '#/components/page-header'
 import { StatusBadge } from '#/components/repowiki/status-badge'
 import {
-	useRepoWikiConfigByProjectId,
-	useUpdateRepoWikiConfig,
-	useDeleteRepoWikiConfig,
-	useCleanFailedVersions,
-	useKeepLatestVersions,
-	useCleanRepoWikiGitCache,
+  useRepoWikiConfigByProjectId,
+  useUpdateRepoWikiConfig,
+  useDeleteRepoWikiConfig,
+  useCleanFailedVersions,
+  useKeepLatestVersions,
+  useCleanRepoWikiGitCache,
 } from '#/hooks/useRepoWiki'
 import { VersionList } from '#/components/repowiki/version-list'
 import { WebhookTab } from '#/components/repowiki/webhook-tab'
@@ -58,649 +63,715 @@ const REPOWIKI_TABS = ['versions', 'webhook', 'config', 'settings'] as const
 type RepoWikiTab = (typeof REPOWIKI_TABS)[number]
 
 function isRepoWikiTab(value: unknown): value is RepoWikiTab {
-	return (
-		typeof value === 'string' &&
-		(REPOWIKI_TABS as readonly string[]).includes(value)
-	)
+  return (
+    typeof value === 'string' &&
+    (REPOWIKI_TABS as readonly string[]).includes(value)
+  )
 }
 
 export const Route = createFileRoute('/console/project/$projectId/repowiki/')({
-	validateSearch: (
-		search: Record<string, unknown>,
-	): { tab?: RepoWikiTab } => ({
-		tab: isRepoWikiTab(search.tab) ? search.tab : undefined,
-	}),
-	component: RepoWikiDetailPage,
+  validateSearch: (search: Record<string, unknown>): { tab?: RepoWikiTab } => ({
+    tab: isRepoWikiTab(search.tab) ? search.tab : undefined,
+  }),
+  component: RepoWikiDetailPage,
 })
 
 function RepoWikiDetailPage() {
-	const { projectId } = Route.useParams()
-	const { tab = 'versions' } = Route.useSearch()
-	const navigate = useNavigate()
-
-	const { data, isLoading } = useRepoWikiConfigByProjectId(projectId)
-
-	const config = data?.data
-
-	if (isLoading) {
-		return (
-			<motion.div className="space-y-4" initial="hidden" animate="visible" variants={staggerContainer}>
-				<PageHeader title="Wiki 管理" description="加载中…" />
-				<div className="grid gap-4">
-					{[1, 2, 3].map((i) => (
-						<motion.div key={i} variants={staggerItem}>
-							<Card className="border-border bg-card">
-								<CardContent className="h-32 animate-pulse bg-muted/50" />
-							</Card>
-						</motion.div>
-					))}
-				</div>
-			</motion.div>
-		)
-	}
-
-	// 未创建配置 → 显示空状态
-	if (!config) {
-		return (
-			<motion.div className="space-y-4" initial="hidden" animate="visible" variants={staggerContainer}>
-				<PageHeader
-					title="Wiki 管理"
-					description="为该项目配置代码仓库 Wiki 分析"
-					action={
-						<Button variant="outline" onClick={() => navigate({ to: '/console/project' })}>
-							<ArrowLeft className="mr-2 size-4" />
-							返回项目
-						</Button>
-					}
-				/>
-				<motion.div variants={staggerItem}>
-					<Card className="border-border bg-card">
-						<CardContent className="flex flex-col items-center justify-center py-16">
-							<BookOpen className="mb-4 size-12 text-muted-foreground/40" />
-							<h3 className="mb-2 text-lg font-semibold">尚未创建 Wiki 配置</h3>
-							<p className="mb-6 max-w-md text-center text-sm text-muted-foreground">
-								添加仓库地址后，Lumina 将自动分析代码结构并生成结构化 Wiki 文档
-							</p>
-							<Link to="/console/project/$projectId/repowiki/create" params={{ projectId }}>
-								<Button className="bg-lagoon text-foam hover:bg-lagoon-deep">
-									<Plus className="mr-2 size-4" />
-									创建 Wiki 配置
-								</Button>
-							</Link>
-						</CardContent>
-					</Card>
-				</motion.div>
-			</motion.div>
-		)
-	}
-
-	const hasCompletedVersion = config.latest_version?.status === 'completed'
-
-	// 已有配置 → 概览卡 + Tabs
-	return (
-		<motion.div className="space-y-5" initial="hidden" animate="visible" variants={staggerContainer}>
-			{/* PageHeader：操作按钮精简为 分析/查看Wiki/返回 */}
-			<motion.div variants={staggerItem}>
-				<PageHeader
-					title={`Wiki 管理 — ${config.project?.name ?? config.repo_url}`}
-					action={
-						<div className="flex flex-wrap items-center gap-2">
-							{hasCompletedVersion ? (
-								<AnalyzeDialog
-									configId={config.id}
-									mode="update"
-									trigger={
-										<Button variant="outline" className="gap-2">
-											<RefreshCw className="size-4" />
-											增量更新
-										</Button>
-									}
-								/>
-							) : (
-								<AnalyzeDialog
-									configId={config.id}
-									mode="analyze"
-									trigger={
-										<Button className="gap-2">
-											<Play className="size-4" />
-											开始分析
-										</Button>
-									}
-								/>
-							)}
-							{hasCompletedVersion && (
-								<Button variant="outline" asChild className="gap-2">
-									<a
-										href={buildWikiReaderUrl(config.id)}
-										target="_blank"
-										rel="noopener noreferrer"
-									>
-										<ExternalLink className="size-4" />
-										查看 Wiki
-									</a>
-								</Button>
-							)}
-							<Button variant="ghost" onClick={() => navigate({ to: '/console/project' })}>
-								<ArrowLeft className="mr-2 size-4" />
-								返回项目
-							</Button>
-						</div>
-					}
-				/>
-			</motion.div>
-
-			{/* 扁平概览条：无 Card 包裹，仓库地址 + 状态 + 关键指标一行展示 */}
-			<motion.div variants={staggerItem}>
-				<OverviewBar config={config} />
-			</motion.div>
-
-			{/* Tabs：版本管理 / Webhook / 配置详情（只读）/ 设置（可编辑） */}
-			<motion.div variants={staggerItem}>
-				<Tabs
-					value={tab}
-					onValueChange={(value) => {
-						if (!isRepoWikiTab(value)) return
-						void navigate({
-							to: '/console/project/$projectId/repowiki',
-							params: { projectId },
-							search: { tab: value },
-							replace: true,
-						})
-					}}
-					className="min-w-0 gap-3"
-				>
-					<TabsList variant="line" className="w-full justify-start gap-6">
-						<TabsTrigger value="versions" className="gap-1.5">
-							<FileText className="size-3.5" />
-							版本管理
-						</TabsTrigger>
-						<TabsTrigger value="webhook" className="gap-1.5">
-							<Webhook className="size-3.5" />
-							Webhook
-						</TabsTrigger>
-						<TabsTrigger value="config" className="gap-1.5">
-							<Settings2 className="size-3.5" />
-							配置详情
-						</TabsTrigger>
-						<TabsTrigger value="settings" className="gap-1.5">
-							<Settings className="size-3.5" />
-							设置
-						</TabsTrigger>
-					</TabsList>
-
-					<TabsContent value="versions" className="mt-0">
-						<div className="rounded-lg border bg-card p-4">
-							<VersionList configId={config.id} selectedVersionId={config.selected_version_id} />
-						</div>
-					</TabsContent>
-
-					<TabsContent value="webhook" className="mt-0">
-						<div className="rounded-lg border bg-card p-4">
-							<WebhookTab configId={config.id} />
-						</div>
-					</TabsContent>
-
-					<TabsContent value="config" className="mt-0">
-						<div className="rounded-lg border bg-card p-4">
-							<ConfigDetails config={config} />
-						</div>
-					</TabsContent>
-
-					<TabsContent value="settings" className="mt-0">
-						<div className="rounded-lg border bg-card p-4">
-							<SettingsTab config={config} projectId={projectId} />
-						</div>
-					</TabsContent>
-				</Tabs>
-			</motion.div>
-		</motion.div>
-	)
+  const { projectId } = Route.useParams()
+  const { tab = 'versions' } = Route.useSearch()
+  const navigate = useNavigate()
+
+  const { data, isLoading } = useRepoWikiConfigByProjectId(projectId)
+
+  const config = data?.data
+
+  if (isLoading) {
+    return (
+      <motion.div
+        className="space-y-4"
+        initial="hidden"
+        animate="visible"
+        variants={staggerContainer}
+      >
+        <PageHeader title="Wiki 管理" description="加载中…" />
+        <div className="grid gap-4">
+          {[1, 2, 3].map((i) => (
+            <motion.div key={i} variants={staggerItem}>
+              <Card className="border-border bg-card">
+                <CardContent className="h-32 animate-pulse bg-muted/50" />
+              </Card>
+            </motion.div>
+          ))}
+        </div>
+      </motion.div>
+    )
+  }
+
+  // 未创建配置 → 显示空状态
+  if (!config) {
+    return (
+      <motion.div
+        className="space-y-4"
+        initial="hidden"
+        animate="visible"
+        variants={staggerContainer}
+      >
+        <PageHeader
+          title="Wiki 管理"
+          description="为该项目配置代码仓库 Wiki 分析"
+          action={
+            <Button
+              variant="outline"
+              onClick={() => navigate({ to: '/console/project' })}
+            >
+              <ArrowLeft className="mr-2 size-4" />
+              返回项目
+            </Button>
+          }
+        />
+        <motion.div variants={staggerItem}>
+          <Card className="border-border bg-card">
+            <CardContent className="flex flex-col items-center justify-center py-16">
+              <BookOpen className="mb-4 size-12 text-muted-foreground/40" />
+              <h3 className="mb-2 text-lg font-semibold">尚未创建 Wiki 配置</h3>
+              <p className="mb-6 max-w-md text-center text-sm text-muted-foreground">
+                添加仓库地址后，Lumina 将自动分析代码结构并生成结构化 Wiki 文档
+              </p>
+              <Link
+                to="/console/project/$projectId/repowiki/create"
+                params={{ projectId }}
+              >
+                <Button className="bg-lagoon text-foam hover:bg-lagoon-deep">
+                  <Plus className="mr-2 size-4" />
+                  创建 Wiki 配置
+                </Button>
+              </Link>
+            </CardContent>
+          </Card>
+        </motion.div>
+      </motion.div>
+    )
+  }
+
+  const hasCompletedVersion = config.latest_version?.status === 'completed'
+
+  // 已有配置 → 概览卡 + Tabs
+  return (
+    <motion.div
+      className="space-y-5"
+      initial="hidden"
+      animate="visible"
+      variants={staggerContainer}
+    >
+      {/* PageHeader：操作按钮精简为 分析/查看Wiki/返回 */}
+      <motion.div variants={staggerItem}>
+        <PageHeader
+          title={`Wiki 管理 — ${config.project?.name ?? config.repo_url}`}
+          action={
+            <div className="flex flex-wrap items-center gap-2">
+              {hasCompletedVersion ? (
+                <AnalyzeDialog
+                  configId={config.id}
+                  mode="update"
+                  trigger={
+                    <Button variant="outline" className="gap-2">
+                      <RefreshCw className="size-4" />
+                      增量更新
+                    </Button>
+                  }
+                />
+              ) : (
+                <AnalyzeDialog
+                  configId={config.id}
+                  mode="analyze"
+                  trigger={
+                    <Button className="gap-2">
+                      <Play className="size-4" />
+                      开始分析
+                    </Button>
+                  }
+                />
+              )}
+              {hasCompletedVersion && (
+                <Button variant="outline" asChild className="gap-2">
+                  <a
+                    href={buildWikiReaderUrl(config.id)}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    <ExternalLink className="size-4" />
+                    查看 Wiki
+                  </a>
+                </Button>
+              )}
+              <Button
+                variant="ghost"
+                onClick={() => navigate({ to: '/console/project' })}
+              >
+                <ArrowLeft className="mr-2 size-4" />
+                返回项目
+              </Button>
+            </div>
+          }
+        />
+      </motion.div>
+
+      {/* 扁平概览条：无 Card 包裹，仓库地址 + 状态 + 关键指标一行展示 */}
+      <motion.div variants={staggerItem}>
+        <OverviewBar config={config} />
+      </motion.div>
+
+      {/* Tabs：版本管理 / Webhook / 配置详情（只读）/ 设置（可编辑） */}
+      <motion.div variants={staggerItem}>
+        <Tabs
+          value={tab}
+          onValueChange={(value) => {
+            if (!isRepoWikiTab(value)) return
+            void navigate({
+              to: '/console/project/$projectId/repowiki',
+              params: { projectId },
+              search: { tab: value },
+              replace: true,
+            })
+          }}
+          className="min-w-0 gap-3"
+        >
+          <TabsList variant="line" className="w-full justify-start gap-6">
+            <TabsTrigger value="versions" className="gap-1.5">
+              <FileText className="size-3.5" />
+              版本管理
+            </TabsTrigger>
+            <TabsTrigger value="webhook" className="gap-1.5">
+              <Webhook className="size-3.5" />
+              Webhook
+            </TabsTrigger>
+            <TabsTrigger value="config" className="gap-1.5">
+              <Settings2 className="size-3.5" />
+              配置详情
+            </TabsTrigger>
+            <TabsTrigger value="settings" className="gap-1.5">
+              <Settings className="size-3.5" />
+              设置
+            </TabsTrigger>
+          </TabsList>
+
+          <TabsContent value="versions" className="mt-0">
+            <div className="rounded-lg border bg-card p-4">
+              <VersionList
+                configId={config.id}
+                selectedVersionId={config.selected_version_id}
+              />
+            </div>
+          </TabsContent>
+
+          <TabsContent value="webhook" className="mt-0">
+            <div className="rounded-lg border bg-card p-4">
+              <WebhookTab configId={config.id} />
+            </div>
+          </TabsContent>
+
+          <TabsContent value="config" className="mt-0">
+            <div className="rounded-lg border bg-card p-4">
+              <ConfigDetails config={config} />
+            </div>
+          </TabsContent>
+
+          <TabsContent value="settings" className="mt-0">
+            <div className="rounded-lg border bg-card p-4">
+              <SettingsTab config={config} projectId={projectId} />
+            </div>
+          </TabsContent>
+        </Tabs>
+      </motion.div>
+    </motion.div>
+  )
 }
 
 // ── 扁平概览条：仓库地址 + 状态 + 关键指标（无 Card 包裹） ──
 
 function OverviewBar({ config }: { config: RepoWikiConfigItem }) {
-	const [copied, setCopied] = useState(false)
-
-	const handleCopyUrl = async () => {
-		try {
-			await navigator.clipboard.writeText(config.repo_url)
-			setCopied(true)
-			setTimeout(() => setCopied(false), 2000)
-			toast.success('仓库地址已复制')
-		} catch {
-			toast.error('复制失败')
-		}
-	}
-
-	const lastAccessed = config.last_accessed_at
-		? formatDateTime(config.last_accessed_at)
-		: null
-
-	return (
-		<div className="flex flex-wrap items-center gap-x-3 gap-y-2 text-sm">
-			{/* 仓库地址（mono + 复制） */}
-			<div className="flex items-center gap-1 min-w-0 max-w-full">
-				<code className="truncate rounded border bg-muted px-2 py-0.5 font-mono text-xs text-foreground">
-					{config.repo_url}
-				</code>
-				<Button
-					variant="ghost"
-					size="icon"
-					onClick={handleCopyUrl}
-					aria-label="复制仓库地址"
-					className="size-11 shrink-0"
-				>
-					{copied ? (
-						<Check className="size-3.5 text-emerald-500" />
-					) : (
-						<Copy className="size-3.5" />
-					)}
-				</Button>
-			</div>
-
-			<Separator orientation="vertical" className="h-4 shrink-0" />
-
-			<StatusBadge status={config.status} />
-
-			{config.selected_version_id && (
-				<span className="flex items-center gap-1 text-xs text-muted-foreground">
-					当前选中
-					<code className="font-mono text-foreground">#{config.selected_version_id}</code>
-				</span>
-			)}
-
-			{config.latest_version && config.latest_version.duration_ms > 0 && (
-				<span className="flex items-center gap-1 text-xs text-muted-foreground">
-					<Clock className="size-3" />
-					{(config.latest_version.duration_ms / 1000).toFixed(1)}s
-				</span>
-			)}
-
-			{lastAccessed && (
-				<span className="text-xs text-muted-foreground">最后访问 {lastAccessed}</span>
-			)}
-		</div>
-	)
+  const [copied, setCopied] = useState(false)
+
+  const handleCopyUrl = async () => {
+    try {
+      await navigator.clipboard.writeText(config.repo_url)
+      setCopied(true)
+      setTimeout(() => setCopied(false), 2000)
+      toast.success('仓库地址已复制')
+    } catch {
+      toast.error('复制失败')
+    }
+  }
+
+  const lastAccessed = config.last_accessed_at
+    ? formatDateTime(config.last_accessed_at)
+    : null
+
+  return (
+    <div className="flex flex-wrap items-center gap-x-3 gap-y-2 text-sm">
+      {/* 仓库地址（mono + 复制） */}
+      <div className="flex items-center gap-1 min-w-0 max-w-full">
+        <code className="truncate rounded border bg-muted px-2 py-0.5 font-mono text-xs text-foreground">
+          {config.repo_url}
+        </code>
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={handleCopyUrl}
+          aria-label="复制仓库地址"
+          className="size-11 shrink-0"
+        >
+          {copied ? (
+            <Check className="size-3.5 text-emerald-500" />
+          ) : (
+            <Copy className="size-3.5" />
+          )}
+        </Button>
+      </div>
+
+      <Separator orientation="vertical" className="h-4 shrink-0" />
+
+      <StatusBadge status={config.status} />
+
+      {config.selected_version_id && (
+        <span className="flex items-center gap-1 text-xs text-muted-foreground">
+          当前选中
+          <code className="font-mono text-foreground">
+            #{config.selected_version_id}
+          </code>
+        </span>
+      )}
+
+      {config.latest_version && config.latest_version.duration_ms > 0 && (
+        <span className="flex items-center gap-1 text-xs text-muted-foreground">
+          <Clock className="size-3" />
+          {(config.latest_version.duration_ms / 1000).toFixed(1)}s
+        </span>
+      )}
+
+      {lastAccessed && (
+        <span className="text-xs text-muted-foreground">
+          最后访问 {lastAccessed}
+        </span>
+      )}
+    </div>
+  )
 }
 
 // ── 配置详情：只读 Definition List（无边框） ──
 
 function ConfigDetails({ config }: { config: RepoWikiConfigItem }) {
-	const items: Array<{ label: string; value: React.ReactNode; mono?: boolean; icon?: React.ReactNode }> = [
-		{
-			label: '仓库名称',
-			value: config.project?.name ?? '-',
-			icon: <BookOpen className="size-4 text-muted-foreground" />,
-		},
-		{
-			label: '仓库地址',
-			value: config.repo_url,
-			mono: true,
-			icon: <Globe className="size-4 text-muted-foreground" />,
-		},
-		{
-			label: '默认分支',
-			value: config.default_branch,
-			mono: true,
-			icon: <GitBranch className="size-4 text-muted-foreground" />,
-		},
-		{
-			label: '默认语言',
-			value: config.default_language,
-			icon: <Globe className="size-4 text-muted-foreground" />,
-		},
-		{
-			label: 'SSH 密钥',
-			value: config.ssh_key_id ? '已关联' : '未使用',
-			icon: <KeyRound className="size-4 text-muted-foreground" />,
-		},
-		{
-			label: 'Wiki 密码',
-			value: config.has_password ? '已设置' : '未设置',
-			icon: <Lock className="size-4 text-muted-foreground" />,
-		},
-		{
-			label: '自定义提示词',
-			value: config.custom_prompt ? (
-				<span className="line-clamp-2 max-w-xs text-right text-xs text-muted-foreground">
-					{config.custom_prompt}
-				</span>
-			) : (
-				'未设置'
-			),
-		},
-		{
-			label: '当前状态',
-			value: <StatusBadge status={config.status} />,
-		},
-		{
-			label: '选中版本',
-			value: config.selected_version_id ? (
-				<code className="font-mono text-xs">#{config.selected_version_id}</code>
-			) : (
-				'未选择'
-			),
-		},
-		{
-			label: '最后访问',
-			value: config.last_accessed_at
-				? formatDateTime(config.last_accessed_at)
-				: '—',
-		},
-		{
-			label: '创建时间',
-			value: formatDateTime(config.created_at),
-		},
-	]
-
-	return (
-		<dl className="grid grid-cols-1 gap-x-8 gap-y-3 sm:grid-cols-2">
-			{items.map((item) => (
-				<div key={item.label} className="flex items-start justify-between gap-3 py-1.5">
-					<dt className="flex items-center gap-2 shrink-0 text-sm text-muted-foreground">
-						{item.icon}
-						{item.label}
-					</dt>
-					<dd
-						className={`text-right text-sm font-medium ${
-							item.mono ? 'font-mono text-xs break-all' : 'text-foreground'
-						}`}
-					>
-						{item.value ?? '—'}
-					</dd>
-				</div>
-			))}
-		</dl>
-	)
+  const items: Array<{
+    label: string
+    value: React.ReactNode
+    mono?: boolean
+    icon?: React.ReactNode
+  }> = [
+    {
+      label: '仓库名称',
+      value: config.project?.name ?? '-',
+      icon: <BookOpen className="size-4 text-muted-foreground" />,
+    },
+    {
+      label: '仓库地址',
+      value: config.repo_url,
+      mono: true,
+      icon: <Globe className="size-4 text-muted-foreground" />,
+    },
+    {
+      label: '默认分支',
+      value: config.default_branch,
+      mono: true,
+      icon: <GitBranch className="size-4 text-muted-foreground" />,
+    },
+    {
+      label: '默认语言',
+      value: config.default_language,
+      icon: <Globe className="size-4 text-muted-foreground" />,
+    },
+    {
+      label: 'SSH 密钥',
+      value: config.ssh_key_id ? '已关联' : '未使用',
+      icon: <KeyRound className="size-4 text-muted-foreground" />,
+    },
+    {
+      label: 'Wiki 密码',
+      value: config.has_password ? '已设置' : '未设置',
+      icon: <Lock className="size-4 text-muted-foreground" />,
+    },
+    {
+      label: '自定义提示词',
+      value: config.custom_prompt ? (
+        <span className="line-clamp-2 max-w-xs text-right text-xs text-muted-foreground">
+          {config.custom_prompt}
+        </span>
+      ) : (
+        '未设置'
+      ),
+    },
+    {
+      label: '当前状态',
+      value: <StatusBadge status={config.status} />,
+    },
+    {
+      label: '选中版本',
+      value: config.selected_version_id ? (
+        <code className="font-mono text-xs">#{config.selected_version_id}</code>
+      ) : (
+        '未选择'
+      ),
+    },
+    {
+      label: '最后访问',
+      value: config.last_accessed_at
+        ? formatDateTime(config.last_accessed_at)
+        : '—',
+    },
+    {
+      label: '创建时间',
+      value: formatDateTime(config.created_at),
+    },
+  ]
+
+  return (
+    <dl className="grid grid-cols-1 gap-x-8 gap-y-3 sm:grid-cols-2">
+      {items.map((item) => (
+        <div
+          key={item.label}
+          className="flex items-start justify-between gap-3 py-1.5"
+        >
+          <dt className="flex items-center gap-2 shrink-0 text-sm text-muted-foreground">
+            {item.icon}
+            {item.label}
+          </dt>
+          <dd
+            className={`text-right text-sm font-medium ${
+              item.mono ? 'font-mono text-xs break-all' : 'text-foreground'
+            }`}
+          >
+            {item.value ?? '—'}
+          </dd>
+        </div>
+      ))}
+    </dl>
+  )
 }
 
 // ── 设置 Tab：可编辑表单 + 密码清除 + 危险操作 ──
 
-function SettingsTab({ config, projectId }: { config: RepoWikiConfigItem; projectId: string }) {
-	const navigate = useNavigate()
-	const [repoUrl, setRepoUrl] = useState(config.repo_url)
-	const [defaultBranch, setDefaultBranch] = useState(config.default_branch)
-	const [defaultLanguage, setDefaultLanguage] = useState(config.default_language)
-	const [wikiPassword, setWikiPassword] = useState('')
-	const [removePassword, setRemovePassword] = useState(false)
-	const [customPrompt, setCustomPrompt] = useState(config.custom_prompt ?? '')
-	const [deleteOpen, setDeleteOpen] = useState(false)
-	const [cleanFailedOpen, setCleanFailedOpen] = useState(false)
-	const [keepLatestOpen, setKeepLatestOpen] = useState(false)
-	const [cleanCacheOpen, setCleanCacheOpen] = useState(false)
-
-	const updateMutation = useUpdateRepoWikiConfig()
-	const deleteMutation = useDeleteRepoWikiConfig()
-	const cleanFailedMutation = useCleanFailedVersions()
-	const keepLatestMutation = useKeepLatestVersions()
-	const cleanCacheMutation = useCleanRepoWikiGitCache()
-	const isPending = updateMutation.isPending
-
-	const handleSave = () => {
-		const data: UpdateRepoWikiConfigRequest = {
-			repo_url: repoUrl.trim() || undefined,
-			default_branch: defaultBranch.trim() || undefined,
-			default_language: defaultLanguage.trim() || undefined,
-			custom_prompt: customPrompt.trim(),
-		}
-
-		// 密码三态处理：
-		//   removePassword === true → 传空字符串，后端清除密码
-		//   密码框有值             → 传新密码
-		//   密码框为空且不勾选      → undefined，后端不修改
-		if (removePassword) {
-			data.wiki_password = ''
-		} else if (wikiPassword.trim()) {
-			data.wiki_password = wikiPassword.trim()
-		}
-
-		updateMutation.mutate(
-			{ id: config.id, data },
-			{
-				onSuccess: () => {
-					setWikiPassword('')
-					setRemovePassword(false)
-				},
-			},
-		)
-	}
-
-	const handleDelete = () => {
-		deleteMutation.mutate(config.id, {
-			onSuccess: () => {
-				setDeleteOpen(false)
-				navigate({ to: '/console/project' })
-			},
-		})
-	}
-
-	return (
-		<div className="space-y-6">
-			{/* 基础配置区 */}
-			<div className="grid gap-4">
-				<h3 className="text-sm font-semibold text-foreground">基础配置</h3>
-
-				<div className="grid gap-2">
-					<Label htmlFor="cfg-repo-url">仓库地址</Label>
-					<Input
-						id="cfg-repo-url"
-						value={repoUrl}
-						onChange={(e) => setRepoUrl(e.target.value)}
-						placeholder="https://github.com/owner/repo.git"
-						disabled={isPending}
-					/>
-				</div>
-
-				<div className="grid grid-cols-2 gap-4">
-					<div className="grid gap-2">
-						<Label htmlFor="cfg-branch">默认分支</Label>
-						<Input
-							id="cfg-branch"
-							value={defaultBranch}
-							onChange={(e) => setDefaultBranch(e.target.value)}
-							placeholder="main"
-							disabled={isPending}
-						/>
-					</div>
-					<div className="grid gap-2">
-						<Label htmlFor="cfg-lang">默认语言</Label>
-						<Input
-							id="cfg-lang"
-							value={defaultLanguage}
-							onChange={(e) => setDefaultLanguage(e.target.value)}
-							placeholder="zh"
-							disabled={isPending}
-						/>
-					</div>
-				</div>
-
-				{/* Wiki 密码：三态交互（不修改 / 替换 / 移除） */}
-				<div className="grid gap-2">
-					<div className="flex items-center justify-between">
-						<Label htmlFor="cfg-password">Wiki 密码</Label>
-						{config.has_password && !removePassword && (
-							<button
-								type="button"
-								className="text-xs text-destructive hover:underline"
-								onClick={() => setRemovePassword(true)}
-								disabled={isPending}
-							>
-								移除密码
-							</button>
-						)}
-					</div>
-					{removePassword ? (
-						<div className="flex items-center gap-2 rounded-md border border-destructive/30 bg-destructive/5 px-3 py-2">
-							<Lock className="size-4 shrink-0 text-destructive" />
-							<span className="flex-1 text-sm text-destructive">密码将被移除</span>
-							<Button
-								type="button"
-								variant="ghost"
-								size="sm"
-								className="h-7"
-								onClick={() => setRemovePassword(false)}
-								disabled={isPending}
-							>
-								取消
-							</Button>
-						</div>
-					) : (
-						<>
-							<Input
-								id="cfg-password"
-								type="password"
-								value={wikiPassword}
-								onChange={(e) => setWikiPassword(e.target.value)}
-								placeholder={
-									config.has_password ? '输入新密码以替换当前密码' : '设置访问密码（可选）'
-								}
-								disabled={isPending}
-							/>
-							<p className="text-xs text-muted-foreground">
-								{config.has_password
-									? '当前已设置密码，输入新密码可替换'
-									: '留空表示不设置密码'}
-							</p>
-						</>
-					)}
-				</div>
-
-				{/* 自定义提示词 */}
-				<div className="grid gap-2">
-					<Label htmlFor="cfg-prompt">自定义提示词（项目级）</Label>
-					<Textarea
-						id="cfg-prompt"
-						value={customPrompt}
-						onChange={(e) => setCustomPrompt(e.target.value)}
-						placeholder="为所有分析阶段添加全局自定义指示..."
-						rows={4}
-						disabled={isPending}
-					/>
-					<p className="text-xs text-muted-foreground">
-						此提示词会持久化并应用于每次分析
-					</p>
-				</div>
-
-				<div className="flex justify-end pt-1">
-					<Button
-						type="button"
-						onClick={handleSave}
-						disabled={isPending || !repoUrl.trim()}
-						className="bg-lagoon text-foam hover:bg-lagoon-deep"
-					>
-						{isPending ? (
-							<>
-								<Loader2 className="mr-2 size-4 animate-spin" />
-								保存中...
-							</>
-						) : (
-							'保存配置'
-						)}
-					</Button>
-				</div>
-			</div>
-
-			<Separator />
-
-			{/* 危险操作区 */}
-			<div className="space-y-3">
-				<h3 className="text-sm font-semibold text-destructive">危险操作</h3>
-
-				<div className="space-y-2">
-					<Button variant="destructive" onClick={() => setDeleteOpen(true)} className="gap-2">
-						<Trash2 className="size-4" />
-						删除此 Wiki 配置
-					</Button>
-					<p className="text-xs text-muted-foreground">
-						将永久清除配置、所有版本数据、Git 缓存和 Webhook 事件，不可恢复
-					</p>
-				</div>
-
-				<div className="space-y-2">
-					<Button variant="destructive" onClick={() => setCleanFailedOpen(true)} className="gap-2">
-						<XCircle className="size-4" />
-						清理失败版本
-					</Button>
-					<p className="text-xs text-muted-foreground">
-						删除所有状态为失败的版本记录及其文件，不影响进行中或已完成的版本
-					</p>
-				</div>
-
-				<div className="space-y-2">
-					<Button variant="destructive" onClick={() => setKeepLatestOpen(true)} className="gap-2">
-						<Layers className="size-4" />
-						只保留最新版本
-					</Button>
-					<p className="text-xs text-muted-foreground">
-						保留当前选中（或最近完成）的版本，删除其余已完成/已取消版本；进行中的版本会被跳过
-					</p>
-				</div>
-
-				<div className="space-y-2">
-					<Button variant="destructive" onClick={() => setCleanCacheOpen(true)} className="gap-2">
-						<HardDriveDownload className="size-4" />
-						清理 Git 缓存
-					</Button>
-					<p className="text-xs text-muted-foreground">
-						删除本地 Git 克隆缓存，下次更新时将重新拉取。不影响已生成的 Wiki 版本
-					</p>
-				</div>
-			</div>
-
-			<ConfirmDeleteDialog
-				open={deleteOpen}
-				onOpenChange={setDeleteOpen}
-				title="删除配置"
-				description="确定要删除此 Wiki 配置吗？将永久清除配置、所有版本数据、Git 缓存和 Webhook 事件，不可恢复。"
-				onConfirm={handleDelete}
-				isPending={deleteMutation.isPending}
-			/>
-			<ConfirmDeleteDialog
-				open={cleanFailedOpen}
-				onOpenChange={setCleanFailedOpen}
-				title="清理失败版本"
-				description="确定要删除所有状态为失败的版本吗？此操作不可恢复。"
-				confirmText="确认清理"
-				pendingText="清理中..."
-				onConfirm={() => {
-					cleanFailedMutation.mutate(
-						{ configId: config.id, projectId },
-						{ onSuccess: () => setCleanFailedOpen(false) },
-					)
-				}}
-				isPending={cleanFailedMutation.isPending}
-			/>
-			<ConfirmDeleteDialog
-				open={keepLatestOpen}
-				onOpenChange={setKeepLatestOpen}
-				title="只保留最新版本"
-				description="确定要只保留最新版本吗？其余已完成/已取消版本将被删除，进行中的版本会被跳过。"
-				confirmText="确认清理"
-				pendingText="清理中..."
-				onConfirm={() => {
-					keepLatestMutation.mutate(
-						{ configId: config.id, projectId },
-						{ onSuccess: () => setKeepLatestOpen(false) },
-					)
-				}}
-				isPending={keepLatestMutation.isPending}
-			/>
-			<ConfirmDeleteDialog
-				open={cleanCacheOpen}
-				onOpenChange={setCleanCacheOpen}
-				title="清理 Git 缓存"
-				description="确定要删除本地 Git 克隆缓存吗？下次更新时将重新拉取。不影响已生成的 Wiki 版本。"
-				confirmText="确认清理"
-				pendingText="清理中..."
-				onConfirm={() => {
-					cleanCacheMutation.mutate(
-						{ configId: config.id, projectId },
-						{ onSuccess: () => setCleanCacheOpen(false) },
-					)
-				}}
-				isPending={cleanCacheMutation.isPending}
-			/>
-		</div>
-	)
+function SettingsTab({
+  config,
+  projectId,
+}: {
+  config: RepoWikiConfigItem
+  projectId: string
+}) {
+  const navigate = useNavigate()
+  const [repoUrl, setRepoUrl] = useState(config.repo_url)
+  const [defaultBranch, setDefaultBranch] = useState(config.default_branch)
+  const [defaultLanguage, setDefaultLanguage] = useState(
+    config.default_language,
+  )
+  const [wikiPassword, setWikiPassword] = useState('')
+  const [removePassword, setRemovePassword] = useState(false)
+  const [customPrompt, setCustomPrompt] = useState(config.custom_prompt ?? '')
+  const [deleteOpen, setDeleteOpen] = useState(false)
+  const [cleanFailedOpen, setCleanFailedOpen] = useState(false)
+  const [keepLatestOpen, setKeepLatestOpen] = useState(false)
+  const [cleanCacheOpen, setCleanCacheOpen] = useState(false)
+
+  const updateMutation = useUpdateRepoWikiConfig()
+  const deleteMutation = useDeleteRepoWikiConfig()
+  const cleanFailedMutation = useCleanFailedVersions()
+  const keepLatestMutation = useKeepLatestVersions()
+  const cleanCacheMutation = useCleanRepoWikiGitCache()
+  const isPending = updateMutation.isPending
+
+  const handleSave = () => {
+    const data: UpdateRepoWikiConfigRequest = {
+      repo_url: repoUrl.trim() || undefined,
+      default_branch: defaultBranch.trim() || undefined,
+      default_language: defaultLanguage.trim() || undefined,
+      custom_prompt: customPrompt.trim(),
+    }
+
+    // 密码三态处理：
+    //   removePassword === true → 传空字符串，后端清除密码
+    //   密码框有值             → 传新密码
+    //   密码框为空且不勾选      → undefined，后端不修改
+    if (removePassword) {
+      data.wiki_password = ''
+    } else if (wikiPassword.trim()) {
+      data.wiki_password = wikiPassword.trim()
+    }
+
+    updateMutation.mutate(
+      { id: config.id, data },
+      {
+        onSuccess: () => {
+          setWikiPassword('')
+          setRemovePassword(false)
+        },
+      },
+    )
+  }
+
+  const handleDelete = () => {
+    deleteMutation.mutate(config.id, {
+      onSuccess: () => {
+        setDeleteOpen(false)
+        navigate({ to: '/console/project' })
+      },
+    })
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* 基础配置区 */}
+      <div className="grid gap-4">
+        <h3 className="text-sm font-semibold text-foreground">基础配置</h3>
+
+        <div className="grid gap-2">
+          <Label htmlFor="cfg-repo-url">仓库地址</Label>
+          <Input
+            id="cfg-repo-url"
+            value={repoUrl}
+            onChange={(e) => setRepoUrl(e.target.value)}
+            placeholder="https://github.com/owner/repo.git"
+            disabled={isPending}
+          />
+        </div>
+
+        <div className="grid grid-cols-2 gap-4">
+          <div className="grid gap-2">
+            <Label htmlFor="cfg-branch">默认分支</Label>
+            <Input
+              id="cfg-branch"
+              value={defaultBranch}
+              onChange={(e) => setDefaultBranch(e.target.value)}
+              placeholder="main"
+              disabled={isPending}
+            />
+          </div>
+          <div className="grid gap-2">
+            <Label htmlFor="cfg-lang">默认语言</Label>
+            <Input
+              id="cfg-lang"
+              value={defaultLanguage}
+              onChange={(e) => setDefaultLanguage(e.target.value)}
+              placeholder="zh"
+              disabled={isPending}
+            />
+          </div>
+        </div>
+
+        {/* Wiki 密码：三态交互（不修改 / 替换 / 移除） */}
+        <div className="grid gap-2">
+          <div className="flex items-center justify-between">
+            <Label htmlFor="cfg-password">Wiki 密码</Label>
+            {config.has_password && !removePassword && (
+              <button
+                type="button"
+                className="text-xs text-destructive hover:underline"
+                onClick={() => setRemovePassword(true)}
+                disabled={isPending}
+              >
+                移除密码
+              </button>
+            )}
+          </div>
+          {removePassword ? (
+            <div className="flex items-center gap-2 rounded-md border border-destructive/30 bg-destructive/5 px-3 py-2">
+              <Lock className="size-4 shrink-0 text-destructive" />
+              <span className="flex-1 text-sm text-destructive">
+                密码将被移除
+              </span>
+              <Button
+                type="button"
+                variant="ghost"
+                size="sm"
+                className="h-7"
+                onClick={() => setRemovePassword(false)}
+                disabled={isPending}
+              >
+                取消
+              </Button>
+            </div>
+          ) : (
+            <>
+              <Input
+                id="cfg-password"
+                type="password"
+                value={wikiPassword}
+                onChange={(e) => setWikiPassword(e.target.value)}
+                placeholder={
+                  config.has_password
+                    ? '输入新密码以替换当前密码'
+                    : '设置访问密码（可选）'
+                }
+                disabled={isPending}
+              />
+              <p className="text-xs text-muted-foreground">
+                {config.has_password
+                  ? '当前已设置密码，输入新密码可替换'
+                  : '留空表示不设置密码'}
+              </p>
+            </>
+          )}
+        </div>
+
+        {/* 自定义提示词 */}
+        <div className="grid gap-2">
+          <Label htmlFor="cfg-prompt">自定义提示词（项目级）</Label>
+          <Textarea
+            id="cfg-prompt"
+            value={customPrompt}
+            onChange={(e) => setCustomPrompt(e.target.value)}
+            placeholder="为所有分析阶段添加全局自定义指示..."
+            rows={4}
+            disabled={isPending}
+          />
+          <p className="text-xs text-muted-foreground">
+            此提示词会持久化并应用于每次分析
+          </p>
+        </div>
+
+        <div className="flex justify-end pt-1">
+          <Button
+            type="button"
+            onClick={handleSave}
+            disabled={isPending || !repoUrl.trim()}
+            className="bg-lagoon text-foam hover:bg-lagoon-deep"
+          >
+            {isPending ? (
+              <>
+                <Loader2 className="mr-2 size-4 animate-spin" />
+                保存中...
+              </>
+            ) : (
+              '保存配置'
+            )}
+          </Button>
+        </div>
+      </div>
+
+      <Separator />
+
+      {/* 危险操作区 */}
+      <div className="space-y-3">
+        <h3 className="text-sm font-semibold text-destructive">危险操作</h3>
+
+        <div className="space-y-2">
+          <Button
+            variant="destructive"
+            onClick={() => setDeleteOpen(true)}
+            className="gap-2"
+          >
+            <Trash2 className="size-4" />
+            删除此 Wiki 配置
+          </Button>
+          <p className="text-xs text-muted-foreground">
+            将永久清除配置、所有版本数据、Git 缓存和 Webhook 事件，不可恢复
+          </p>
+        </div>
+
+        <div className="space-y-2">
+          <Button
+            variant="destructive"
+            onClick={() => setCleanFailedOpen(true)}
+            className="gap-2"
+          >
+            <XCircle className="size-4" />
+            清理失败版本
+          </Button>
+          <p className="text-xs text-muted-foreground">
+            删除所有状态为失败的版本记录及其文件，不影响进行中或已完成的版本
+          </p>
+        </div>
+
+        <div className="space-y-2">
+          <Button
+            variant="destructive"
+            onClick={() => setKeepLatestOpen(true)}
+            className="gap-2"
+          >
+            <Layers className="size-4" />
+            只保留最新版本
+          </Button>
+          <p className="text-xs text-muted-foreground">
+            保留当前选中（或最近完成）的版本，删除其余已完成/已取消版本；进行中的版本会被跳过
+          </p>
+        </div>
+
+        <div className="space-y-2">
+          <Button
+            variant="destructive"
+            onClick={() => setCleanCacheOpen(true)}
+            className="gap-2"
+          >
+            <HardDriveDownload className="size-4" />
+            清理 Git 缓存
+          </Button>
+          <p className="text-xs text-muted-foreground">
+            删除本地 Git 克隆缓存，下次更新时将重新拉取。不影响已生成的 Wiki
+            版本
+          </p>
+        </div>
+      </div>
+
+      <ConfirmDeleteDialog
+        open={deleteOpen}
+        onOpenChange={setDeleteOpen}
+        title="删除配置"
+        description="确定要删除此 Wiki 配置吗？将永久清除配置、所有版本数据、Git 缓存和 Webhook 事件，不可恢复。"
+        onConfirm={handleDelete}
+        isPending={deleteMutation.isPending}
+      />
+      <ConfirmDeleteDialog
+        open={cleanFailedOpen}
+        onOpenChange={setCleanFailedOpen}
+        title="清理失败版本"
+        description="确定要删除所有状态为失败的版本吗？此操作不可恢复。"
+        confirmText="确认清理"
+        pendingText="清理中..."
+        onConfirm={() => {
+          cleanFailedMutation.mutate(
+            { configId: config.id, projectId },
+            { onSuccess: () => setCleanFailedOpen(false) },
+          )
+        }}
+        isPending={cleanFailedMutation.isPending}
+      />
+      <ConfirmDeleteDialog
+        open={keepLatestOpen}
+        onOpenChange={setKeepLatestOpen}
+        title="只保留最新版本"
+        description="确定要只保留最新版本吗？其余已完成/已取消版本将被删除，进行中的版本会被跳过。"
+        confirmText="确认清理"
+        pendingText="清理中..."
+        onConfirm={() => {
+          keepLatestMutation.mutate(
+            { configId: config.id, projectId },
+            { onSuccess: () => setKeepLatestOpen(false) },
+          )
+        }}
+        isPending={keepLatestMutation.isPending}
+      />
+      <ConfirmDeleteDialog
+        open={cleanCacheOpen}
+        onOpenChange={setCleanCacheOpen}
+        title="清理 Git 缓存"
+        description="确定要删除本地 Git 克隆缓存吗？下次更新时将重新拉取。不影响已生成的 Wiki 版本。"
+        confirmText="确认清理"
+        pendingText="清理中..."
+        onConfirm={() => {
+          cleanCacheMutation.mutate(
+            { configId: config.id, projectId },
+            { onSuccess: () => setCleanCacheOpen(false) },
+          )
+        }}
+        isPending={cleanCacheMutation.isPending}
+      />
+    </div>
+  )
 }
diff --git a/web/src/routes/console/project/index.tsx b/web/src/routes/console/project/index.tsx
index f0e0f78..6fe6033 100644
--- a/web/src/routes/console/project/index.tsx
+++ b/web/src/routes/console/project/index.tsx
@@ -1,19 +1,31 @@
-import { useEffect, useState } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import { createFileRoute, useNavigate } from '@tanstack/react-router'
 import { motion } from 'motion/react'
-import { BookOpen, Pencil, Plus, Trash2 } from 'lucide-react'
+import { BookOpen, Eye, Pencil, Plus, Search, Trash2 } from 'lucide-react'
 import { Button } from '@lumina/components/ui/button'
 import { Skeleton } from '@lumina/components/ui/skeleton'
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@lumina/components/ui/tooltip'
 import { DataTablePagination } from '#/components/data-table-pagination'
 import { useProjectList, useDeleteProject } from '#/hooks/useProject'
 import { useCurrentWorkspace } from '#/hooks/useCurrentWorkspace'
+import { usePinList } from '#/hooks/usePin'
+import { useRepoWikiConfigs } from '#/hooks/useRepoWiki'
+import { usePreviewSessionList } from '#/hooks/usePreviewAdmin'
 import { CreateDialog } from '#/components/project/create-dialog'
 import { EditDialog } from '#/components/project/edit-dialog'
+import { ProjectDetailSheet } from '#/components/project/detail-sheet'
 import { ConfirmDeleteDialog } from '#/components/confirm-delete-dialog'
 import { staggerContainer, staggerItem } from '@lumina/components/motion'
 import { PageHeader } from '#/components/page-header'
 import { formatDate } from '#/lib/format-date'
 import type { ProjectItem } from '#/lib/models/response/project'
+import type { RepoWikiConfigItem } from '#/lib/models/response/repowiki'
+import type { PreviewSessionItem } from '#/lib/models/response/preview'
 
 export const Route = createFileRoute('/console/project/')({
   component: ProjectPage,
@@ -21,72 +33,204 @@ export const Route = createFileRoute('/console/project/')({
 
 function ProjectRow({
   item,
+  index,
+  page,
+  pageSize,
+  wikiConfig,
+  pendingPinCount,
+  previewSession,
+  onView,
   onEdit,
   onDelete,
   onOpenWiki,
 }: {
   item: ProjectItem
+  index: number
+  page: number
+  pageSize: number
+  wikiConfig?: RepoWikiConfigItem
+  pendingPinCount: number
+  previewSession?: PreviewSessionItem
+  onView: (item: ProjectItem) => void
   onEdit: (item: ProjectItem) => void
   onDelete: (item: ProjectItem) => void
   onOpenWiki: (item: ProjectItem) => void
 }) {
+  const seq = String(index + 1 + (page - 1) * pageSize).padStart(2, '0')
+  // 🌟 外层展示别名；无别名时明确标记未设置别名，绝不暴露真实名称
+  const outerAlias = item.alias_name || '未设置别名'
+  const matchPathText =
+    item.match_path && item.match_path.length > 0
+      ? item.match_path.join(', ')
+      : '未配置匹配路径'
+
+  const hasWiki = Boolean(wikiConfig?.selected_version_id || wikiConfig?.latest_version)
+  const isPreviewLive = Boolean(previewSession && previewSession.status === 'active')
+
+  // 🌟 项目管理 Tooltip 浮窗：无默认箭头、纯平发线、顶端 3px 琥珀色微明横线
   return (
-    <div className="flex items-center gap-4 border-b border-line px-2 py-4 transition-colors hover:bg-chip-bg">
-      <div className="flex min-w-0 flex-1 flex-col gap-1">
-        <div className="flex flex-wrap items-center gap-2">
-          <span className="truncate text-sm font-semibold text-sea-ink">
-            {item.name}
+    <tr className="border-b border-line transition-colors hover:bg-sand/70">
+      {/* 序号列 */}
+      <td className="w-16 px-4 py-3.5 font-mono text-xs font-bold text-lagoon-deep">
+        {seq}
+      </td>
+
+      {/* 项目别名与 Tooltip：外层仅展示别名，Tooltip 浮窗展示实际全名与介绍 */}
+      <td className="w-72 px-4 py-3.5">
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <div className="inline-flex max-w-[240px] cursor-pointer items-center gap-2 border-b border-dashed border-lagoon/60 pb-0.5 transition-opacity hover:opacity-80">
+              <span className="size-1.5 shrink-0 rotate-45 bg-lagoon" />
+              <span
+                className={`truncate font-mono text-sm font-semibold ${
+                  item.alias_name ? 'text-sea-ink' : 'text-sea-ink-soft italic'
+                }`}
+                title={outerAlias}
+              >
+                {outerAlias}
+              </span>
+            </div>
+          </TooltipTrigger>
+          <TooltipContent
+            side="bottom"
+            align="start"
+            sideOffset={8}
+            className="w-84 max-w-sm rounded-none border border-sea-ink border-t-[3px] border-t-lagoon bg-foam p-3.5 text-sea-ink shadow-xl [&>svg]:hidden"
+          >
+            <div className="flex flex-col gap-2">
+              <div className="flex flex-col gap-0.5">
+                <span className="text-[10px] font-bold uppercase tracking-wider text-lagoon-deep">
+                  实际项目名称
+                </span>
+                <div className="flex items-center justify-between gap-2">
+                  <span className="text-sm font-semibold text-sea-ink">
+                    {item.name}
+                  </span>
+                  {item.alias_name ? (
+                    <span className="font-mono text-[10px] text-sea-ink-soft bg-sand border border-line px-1.5 py-0.5">
+                      别名: {item.alias_name}
+                    </span>
+                  ) : null}
+                </div>
+              </div>
+
+              <div className="flex flex-col gap-0.5">
+                <span className="text-[10px] font-bold uppercase tracking-wider text-lagoon-deep">
+                  项目介绍
+                </span>
+                <p className="text-xs text-sea-ink-soft leading-relaxed">
+                  {item.description || '暂无详细介绍'}
+                </p>
+              </div>
+
+              <div className="flex flex-col gap-0.5">
+                <span className="text-[10px] font-bold uppercase tracking-wider text-lagoon-deep">
+                  底层路径 (MatchPath)
+                </span>
+                <div className="font-mono text-[11px] text-sea-ink-soft bg-sand p-1.5 border border-line break-all">
+                  {matchPathText}
+                </div>
+              </div>
+            </div>
+          </TooltipContent>
+        </Tooltip>
+      </td>
+
+      {/* 核心关联资产徽章 (真实关联动态呈现) */}
+      <td className="px-4 py-3.5">
+        <div className="flex flex-wrap items-center gap-1.5">
+          <span
+            className={`inline-flex items-center gap-1.5 border border-line px-2 py-0.5 font-mono text-[11px] ${
+              hasWiki
+                ? 'bg-[#edf6ee] border-[#2e6930]/30 text-[#245b26] font-semibold'
+                : 'bg-sand text-sea-ink-soft'
+            }`}
+          >
+            <span
+              className={`size-1.5 rounded-full ${
+                hasWiki ? 'bg-[#2e6930]' : 'bg-sea-ink-soft'
+              }`}
+            />
+            {hasWiki ? 'Wiki: 已就绪' : 'Wiki: 待生成'}
+          </span>
+          <span
+            className={`inline-flex items-center gap-1.5 border border-line px-2 py-0.5 font-mono text-[11px] ${
+              pendingPinCount > 0
+                ? 'bg-[#fff4e6] border-lagoon/40 text-lagoon-deep font-semibold'
+                : 'bg-sand text-sea-ink-soft'
+            }`}
+          >
+            <span
+              className={`size-1.5 rounded-full ${
+                pendingPinCount > 0 ? 'bg-lagoon' : 'bg-sea-ink-soft'
+              }`}
+            />
+            {pendingPinCount > 0 ? `Pin: ${pendingPinCount} 待办` : 'Pin: 0 待办'}
+          </span>
+          <span
+            className={`inline-flex items-center gap-1.5 border border-line px-2 py-0.5 font-mono text-[11px] ${
+              isPreviewLive
+                ? 'bg-[#f7f3ed] border-chip-line text-sea-ink font-semibold'
+                : 'bg-sand text-sea-ink-soft'
+            }`}
+          >
+            <span
+              className={`size-1.5 rounded-full ${
+                isPreviewLive ? 'bg-[#2e6930]' : 'bg-sea-ink-soft'
+              }`}
+            />
+            {isPreviewLive ? 'Preview: LIVE' : 'Preview: 无'}
           </span>
-          {item.alias_name ? (
-            <span className="inline-flex items-center border border-chip-line bg-lagoon/10 px-1.5 py-0.5 text-[11px] leading-5 font-semibold text-lagoon-deep">
-              {item.alias_name}
-            </span>
-          ) : null}
         </div>
-        {item.description ? (
-          <p
-            className="truncate text-[13px] text-sea-ink-soft"
-            title={item.description}
+      </td>
+
+      {/* 更新时间 */}
+      <td className="w-36 px-4 py-3.5 whitespace-nowrap text-xs text-sea-ink-soft">
+        {formatDate(item.updated_at)}
+      </td>
+
+      {/* 操作列：紧凑 Lucide 图标按钮组 */}
+      <td className="w-48 px-4 py-3.5 text-right whitespace-nowrap">
+        <div className="inline-flex items-center gap-1">
+          <button
+            type="button"
+            className="grid size-8 place-items-center border border-line bg-foam text-sea-ink-soft transition-colors hover:border-lagoon hover:bg-chip-bg hover:text-lagoon-deep"
+            aria-label={`查看 ${item.name} 详情`}
+            title="查看项目详情概览抽屉"
+            onClick={() => onView(item)}
+          >
+            <Eye className="size-4" />
+          </button>
+          <button
+            type="button"
+            className="grid size-8 place-items-center border border-line bg-foam text-sea-ink-soft transition-colors hover:border-lagoon hover:bg-lagoon hover:text-foam"
+            aria-label={`打开 ${item.name} Wiki`}
+            title="打开 RepoWiki 知识库"
+            onClick={() => onOpenWiki(item)}
+          >
+            <BookOpen className="size-4" />
+          </button>
+          <button
+            type="button"
+            className="grid size-8 place-items-center border border-line bg-foam text-sea-ink-soft transition-colors hover:border-lagoon hover:bg-chip-bg hover:text-lagoon-deep"
+            aria-label={`编辑 ${item.name}`}
+            title="编辑项目配置"
+            onClick={() => onEdit(item)}
           >
-            {item.description}
-          </p>
-        ) : null}
-        <div className="flex flex-wrap items-center gap-2 text-xs text-sea-ink-soft">
-          <span>创建于 {formatDate(item.created_at)}</span>
-          <span>·</span>
-          <span>更新于 {formatDate(item.updated_at)}</span>
+            <Pencil className="size-3.5" />
+          </button>
+          <button
+            type="button"
+            className="grid size-8 place-items-center border border-line bg-foam text-sea-ink-soft transition-colors hover:border-destructive hover:bg-destructive/10 hover:text-destructive"
+            aria-label={`删除 ${item.name}`}
+            title="删除项目"
+            onClick={() => onDelete(item)}
+          >
+            <Trash2 className="size-3.5" />
+          </button>
         </div>
-      </div>
-      <div className="flex shrink-0 items-center gap-1">
-        <button
-          type="button"
-          className="grid size-9 place-items-center text-sea-ink-soft transition-colors hover:bg-foam hover:text-sea-ink"
-          aria-label={`打开 ${item.name} Wiki`}
-          title="Wiki 管理"
-          onClick={() => onOpenWiki(item)}
-        >
-          <BookOpen className="size-4" />
-        </button>
-        <button
-          type="button"
-          className="grid size-9 place-items-center text-sea-ink-soft transition-colors hover:bg-foam hover:text-sea-ink"
-          aria-label={`编辑 ${item.name}`}
-          title="编辑项目"
-          onClick={() => onEdit(item)}
-        >
-          <Pencil className="size-3.5" />
-        </button>
-        <button
-          type="button"
-          className="grid size-9 place-items-center text-sea-ink-soft transition-colors hover:bg-destructive/10 hover:text-destructive"
-          aria-label={`删除 ${item.name}`}
-          title="删除项目"
-          onClick={() => onDelete(item)}
-        >
-          <Trash2 className="size-3.5" />
-        </button>
-      </div>
-    </div>
+      </td>
+    </tr>
   )
 }
 
@@ -94,28 +238,114 @@ function ProjectPage() {
   const navigate = useNavigate()
   const [page, setPage] = useState(1)
   const [pageSize, setPageSize] = useState(10)
+  const [searchTerm, setSearchTerm] = useState('')
+  const [filterMode, setFilterMode] = useState<'all' | 'wiki' | 'pin'>('all')
   const [createOpen, setCreateOpen] = useState(false)
   const [editOpen, setEditOpen] = useState(false)
   const [deleteOpen, setDeleteOpen] = useState(false)
+  const [detailOpen, setDetailOpen] = useState(false)
   const [selectedItem, setSelectedItem] = useState<ProjectItem | null>(null)
 
   const { current } = useCurrentWorkspace()
   const { data, isLoading } = useProjectList({
-    page,
-    size: pageSize,
+    page: 1,
+    size: 200, // 在工作空间内拉取全集以支持客户端联动搜索与资产统计
+    workspace_id: current?.id,
+  })
+  const { data: pinData } = usePinList({
+    workspace_id: current?.id,
+    status: 'pending',
+  })
+  const { data: wikiConfigsData } = useRepoWikiConfigs()
+  const { data: previewData } = usePreviewSessionList({
     workspace_id: current?.id,
   })
+
   const showLoading = !current?.id || isLoading
   const deleteMutation = useDeleteProject()
 
-  const items = data?.data?.items ?? []
+  const rawItems = data?.data?.items ?? []
   const totalItems = data?.data?.total ?? 0
-  const totalPages = Math.max(1, Math.ceil(totalItems / pageSize))
+
+  // 映射各项目的关联资产状态
+  const wikiConfigMap = useMemo(() => {
+    const map = new Map<string, RepoWikiConfigItem>()
+    wikiConfigsData?.data?.items.forEach((c) => {
+      map.set(c.project_id, c)
+    })
+    return map
+  }, [wikiConfigsData])
+
+  const pendingPinCountMap = useMemo(() => {
+    const map = new Map<string, number>()
+    pinData?.data?.items.forEach((p) => {
+      if (p.to_project_id) {
+        map.set(p.to_project_id, (map.get(p.to_project_id) || 0) + 1)
+      }
+    })
+    return map
+  }, [pinData])
+
+  const previewSessionMap = useMemo(() => {
+    const map = new Map<string, PreviewSessionItem>()
+    previewData?.data?.items.forEach((s) => {
+      if (s.project_id && !map.has(s.project_id)) {
+        map.set(s.project_id, s)
+      }
+    })
+    return map
+  }, [previewData])
+
+  // 客户端辅助搜索与分类胶囊过滤全集
+  const filteredAllItems = useMemo(() => {
+    let list = rawItems
+    if (filterMode === 'wiki') {
+      list = list.filter((item) => {
+        const c = wikiConfigMap.get(item.id)
+        return Boolean(c?.selected_version_id || c?.latest_version)
+      })
+    } else if (filterMode === 'pin') {
+      list = list.filter((item) => (pendingPinCountMap.get(item.id) || 0) > 0)
+    }
+
+    if (!searchTerm.trim()) return list
+    const term = searchTerm.toLowerCase().trim()
+    return list.filter(
+      (item) =>
+        item.name.toLowerCase().includes(term) ||
+        (item.alias_name && item.alias_name.toLowerCase().includes(term)),
+    )
+  }, [rawItems, filterMode, searchTerm, wikiConfigMap, pendingPinCountMap])
+
+  // 按 pageSize 真实切片当前页数据
+  const totalFiltered = filteredAllItems.length
+  const totalPages = Math.max(1, Math.ceil(totalFiltered / pageSize))
+  const paginatedItems = useMemo(() => {
+    const start = (page - 1) * pageSize
+    return filteredAllItems.slice(start, start + pageSize)
+  }, [filteredAllItems, page, pageSize])
+
+  // 统计当前空间真实的 KPI
+  const kpiProjects = totalItems
+  const kpiPendingPins = pinData?.data?.total ?? 0
+  const kpiActivePreviews = previewData?.data?.total ?? 0
+  const kpiWikiVersions = useMemo(() => {
+    let count = 0
+    wikiConfigsData?.data?.items.forEach((c) => {
+      if (c.selected_version_id || c.latest_version) count++
+    })
+    return count
+  }, [wikiConfigsData])
+
+  useEffect(() => {
+    setPage(1)
+  }, [filterMode, searchTerm])
 
   useEffect(() => {
     setPage(1)
     setEditOpen(false)
     setDeleteOpen(false)
+    setDetailOpen(false)
     setSelectedItem(null)
   }, [current?.id])
 
@@ -124,98 +354,290 @@ function ProjectPage() {
   }, [showLoading, page, totalPages])
 
   return (
-    <motion.div
-      className="space-y-4"
-      initial="hidden"
-      animate="visible"
-      variants={staggerContainer}
-    >
-      <PageHeader
-        title="项目管理"
-        description="管理你的项目，用于组织 Pin 和 Q&A"
-        action={
-          <Button
-            onClick={() => setCreateOpen(true)}
-            className="bg-lagoon text-foam hover:bg-lagoon-deep"
-          >
-            <Plus className="mr-2 size-4" />
-            创建项目
-          </Button>
-        }
-      />
-
-      <motion.div variants={staggerItem} className="space-y-4">
-        {/* 流式项目列表（不展示匹配路径，空间留给名称与描述） */}
-        <div className="border-t border-line">
-          {showLoading ? (
-            <div className="flex flex-col gap-2 py-4">
-              <Skeleton className="h-20 w-full" />
-              <Skeleton className="h-20 w-full" />
-              <Skeleton className="h-20 w-full" />
+    <TooltipProvider delayDuration={150}>
+      <motion.div
+        className="space-y-5"
+        initial="hidden"
+        animate="visible"
+        variants={staggerContainer}
+      >
+        <PageHeader
+          title="项目管理"
+          description="管理代码项目实体与 RepoWiki、Pin 约束与 Q&A 资产映射"
+          action={
+            <Button
+              onClick={() => setCreateOpen(true)}
+              className="rounded-none bg-lagoon text-foam hover:bg-lagoon-deep font-semibold"
+            >
+              <Plus className="mr-1.5 size-4" />
+              创建项目
+            </Button>
+          }
+        />
+
+        {/* 顶部 4 项 KPI 概览带 */}
+        <motion.div variants={staggerItem}>
+          <div className="grid grid-cols-2 md:grid-cols-4 border border-line bg-foam">
+            <div className="p-3.5 px-4.5 border-r border-b md:border-b-0 border-line flex flex-col gap-0.5">
+              <div className="flex justify-between items-center text-[10.5px] font-bold uppercase tracking-wider text-sea-ink-soft">
+                <span>注册项目总数</span>
+                <span className="font-mono">PRJ</span>
+              </div>
+              <span className="font-mono text-[22px] font-bold text-sea-ink mt-0.5">
+                {kpiProjects} 个
+              </span>
+              <span className="text-[11px] text-[#2e6930]">
+                ● 当前空间下代码实体
+              </span>
             </div>
-          ) : items.length === 0 ? (
-            <div className="py-14 text-center">
-              <p className="text-sm font-semibold text-sea-ink">暂无项目</p>
-              <p className="mt-1 text-[13px] text-sea-ink-soft">
-                创建第一个项目，开始组织 Pin 和 Q&A
-              </p>
+            <div className="p-3.5 px-4.5 border-b md:border-b-0 md:border-r border-line flex flex-col gap-0.5">
+              <div className="flex justify-between items-center text-[10.5px] font-bold uppercase tracking-wider text-sea-ink-soft">
+                <span>待消费 Pin 队列</span>
+                <span className="font-mono">FIFO</span>
+              </div>
+              <span className="font-mono text-[22px] font-bold text-sea-ink mt-0.5">
+                {kpiPendingPins} 条
+              </span>
+              <span
+                className={`text-[11px] ${
+                  kpiPendingPins > 0
+                    ? 'text-lagoon-deep font-semibold'
+                    : 'text-sea-ink-soft'
+                }`}
+              >
+                {kpiPendingPins > 0 ? '▲ 存在跨项目依赖阻断' : '● 无阻塞约束'}
+              </span>
             </div>
-          ) : (
-            items.map((item) => (
-              <ProjectRow
-                key={item.id}
-                item={item}
-                onEdit={(target) => {
-                  setSelectedItem(target)
-                  setEditOpen(true)
-                }}
-                onDelete={(target) => {
-                  setSelectedItem(target)
-                  setDeleteOpen(true)
-                }}
-                onOpenWiki={(target) => {
-                  navigate({
-                    to: '/console/project/$projectId/repowiki',
-                    params: { projectId: target.id },
-                  })
-                }}
-              />
-            ))
-          )}
-        </div>
+            <div className="p-3.5 px-4.5 border-r border-line flex flex-col gap-0.5">
+              <div className="flex justify-between items-center text-[10.5px] font-bold uppercase tracking-wider text-sea-ink-soft">
+                <span>Preview 活跃沙盒</span>
+                <span className="font-mono">LIVE</span>
+              </div>
+              <span className="font-mono text-[22px] font-bold text-sea-ink mt-0.5">
+                {kpiActivePreviews} 个
+              </span>
+              <span className="text-[11px] text-[#2e6930]">
+                ● 实时 WebSocket 监听中
+              </span>
+            </div>
+            <div className="p-3.5 px-4.5 flex flex-col gap-0.5">
+              <div className="flex justify-between items-center text-[10.5px] font-bold uppercase tracking-wider text-sea-ink-soft">
+                <span>Wiki 架构版本</span>
+                <span className="font-mono">MDX</span>
+              </div>
+              <span className="font-mono text-[22px] font-bold text-sea-ink mt-0.5">
+                {kpiWikiVersions} 份
+              </span>
+              <span className="text-[11px] text-[#2e6930]">
+                ● 全量索引已就绪
+              </span>
+            </div>
+          </div>
+        </motion.div>
+
+        {/* 过滤工具栏 */}
+        <motion.div
+          variants={staggerItem}
+          className="flex flex-wrap items-center justify-between gap-4"
+        >
+          <div className="flex items-center gap-2 border border-line bg-foam px-3 h-9 w-80">
+            <Search className="size-3.5 text-sea-ink-soft" />
+            <input
+              type="text"
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+              placeholder="按项目别名搜索过滤..."
+              className="w-full bg-transparent text-xs text-sea-ink outline-none placeholder:text-sea-ink-soft"
+            />
+          </div>
+          <div className="flex items-center gap-1.5">
+            <button
+              type="button"
+              onClick={() => setFilterMode('all')}
+              className={`px-3 py-1.5 text-xs border transition-colors ${
+                filterMode === 'all'
+                  ? 'bg-chip-bg border-lagoon text-lagoon-deep font-semibold'
+                  : 'bg-foam border-line text-sea-ink-soft hover:text-sea-ink'
+              }`}
+            >
+              全部 ({totalItems})
+            </button>
+            <button
+              type="button"
+              onClick={() => setFilterMode('wiki')}
+              className={`px-3 py-1.5 text-xs border transition-colors ${
+                filterMode === 'wiki'
+                  ? 'bg-chip-bg border-lagoon text-lagoon-deep font-semibold'
+                  : 'bg-foam border-line text-sea-ink-soft hover:text-sea-ink'
+              }`}
+            >
+              带 Wiki ({kpiWikiVersions})
+            </button>
+            <button
+              type="button"
+              onClick={() => setFilterMode('pin')}
+              className={`px-3 py-1.5 text-xs border transition-colors ${
+                filterMode === 'pin'
+                  ? 'bg-chip-bg border-lagoon text-lagoon-deep font-semibold'
+                  : 'bg-foam border-line text-sea-ink-soft hover:text-sea-ink'
+              }`}
+            >
+              带待办 Pin ({kpiPendingPins})
+            </button>
+          </div>
+        </motion.div>
+
+        {/* 台账表格 */}
+        <motion.div variants={staggerItem} className="space-y-4">
+          <div className="border border-line bg-foam overflow-x-auto">
+            <table className="w-full border-collapse text-left text-xs">
+              <thead>
+                <tr className="border-b border-line bg-sand">
+                  <th className="w-16 px-4 py-3 font-mono text-[10.5px] font-bold uppercase tracking-wider text-lagoon-deep">
+                    序号
+                  </th>
+                  <th className="w-72 px-4 py-3 font-mono text-[10.5px] font-bold uppercase tracking-wider text-lagoon-deep">
+                    项目标识 (悬浮查看实际名称与介绍)
+                  </th>
+                  <th className="px-4 py-3 font-mono text-[10.5px] font-bold uppercase tracking-wider text-lagoon-deep">
+                    核心关联资产
+                  </th>
+                  <th className="w-36 px-4 py-3 font-mono text-[10.5px] font-bold uppercase tracking-wider text-lagoon-deep">
+                    更新时间
+                  </th>
+                  <th className="w-48 px-4 py-3 text-right font-mono text-[10.5px] font-bold uppercase tracking-wider text-lagoon-deep">
+                    操作
+                  </th>
+                </tr>
+              </thead>
+              <tbody>
+                {showLoading ? (
+                  <tr>
+                    <td colSpan={5} className="p-4">
+                      <div className="flex flex-col gap-2">
+                        <Skeleton className="h-10 w-full rounded-none" />
+                        <Skeleton className="h-10 w-full rounded-none" />
+                        <Skeleton className="h-10 w-full rounded-none" />
+                      </div>
+                    </td>
+                  </tr>
+                ) : paginatedItems.length === 0 ? (
+                  <tr>
+                    <td colSpan={5} className="py-14 text-center">
+                      <p className="text-sm font-semibold text-sea-ink">
+                        {searchTerm || filterMode !== 'all'
+                          ? '无匹配项目'
+                          : '暂无项目'}
+                      </p>
+                      <p className="mt-1 text-xs text-sea-ink-soft">
+                        {searchTerm || filterMode !== 'all'
+                          ? '尝试使用其他别名或清除筛选条件'
+                          : '创建第一个项目，开始组织 Pin 和 Q&A'}
+                      </p>
+                    </td>
+                  </tr>
+                ) : (
+                  paginatedItems.map((item, idx) => (
+                    <ProjectRow
+                      key={item.id}
+                      item={item}
+                      index={idx}
+                      page={page}
+                      pageSize={pageSize}
+                      wikiConfig={wikiConfigMap.get(item.id)}
+                      pendingPinCount={pendingPinCountMap.get(item.id) || 0}
+                      previewSession={previewSessionMap.get(item.id)}
+                      onView={(target) => {
+                        setSelectedItem(target)
+                        setDetailOpen(true)
+                      }}
+                      onEdit={(target) => {
+                        setSelectedItem(target)
+                        setEditOpen(true)
+                      }}
+                      onDelete={(target) => {
+                        setSelectedItem(target)
+                        setDeleteOpen(true)
+                      }}
+                      onOpenWiki={(target) => {
+                        const config = wikiConfigMap.get(target.id)
+                        if (config?.selected_version_id || config?.latest_version) {
+                          window.open(`/wiki/${target.name}`, '_blank')
+                        } else {
+                          navigate({
+                            to: '/console/project/$projectId/repowiki',
+                            params: { projectId: target.id },
+                          })
+                        }
+                      }}
+                    />
+                  ))
+                )}
+              </tbody>
+            </table>
+          </div>
+
+          <DataTablePagination
+            currentPage={page}
+            totalPages={totalPages}
+            totalItems={totalFiltered}
+            pageSize={pageSize}
+            onPageChange={setPage}
+            onPageSizeChange={(size) => {
+              setPageSize(size)
+              setPage(1)
+            }}
+          />
+        </motion.div>
 
-        <DataTablePagination
-          currentPage={page}
-          totalPages={totalPages}
-          totalItems={totalItems}
-          pageSize={pageSize}
-          onPageChange={setPage}
-          onPageSizeChange={(size) => {
-            setPageSize(size)
-            setPage(1)
+        {/* 弹窗与抽屉 */}
+        <CreateDialog open={createOpen} onOpenChange={setCreateOpen} />
+        <EditDialog
+          open={editOpen}
+          onOpenChange={setEditOpen}
+          item={selectedItem}
+        />
+        <ProjectDetailSheet
+          open={detailOpen}
+          onOpenChange={setDetailOpen}
+          item={selectedItem}
+          wikiStatus={
+            selectedItem
+              ? wikiConfigMap.get(selectedItem.id)?.selected_version_id ||
+                wikiConfigMap.get(selectedItem.id)?.latest_version
+                ? '已生成版本'
+                : '未初始化'
+              : undefined
+          }
+          pendingPinCount={
+            selectedItem ? pendingPinCountMap.get(selectedItem.id) || 0 : 0
+          }
+          previewStatus={
+            selectedItem
+              ? previewSessionMap.get(selectedItem.id)?.status === 'active'
+                ? '沙盒活跃 (LIVE)'
+                : '无活跃沙盒'
+              : undefined
+          }
+          onEdit={(target) => {
+            setSelectedItem(target)
+            setEditOpen(true)
+          }}
+        />
+        <ConfirmDeleteDialog
+          open={deleteOpen}
+          onOpenChange={(open) => {
+            if (!open) setDeleteOpen(false)
           }}
+          title="删除项目"
+          description={`确定删除「${selectedItem?.name}」？关联的 Pin 与 Q&A 配置将一并失效。`}
+          onConfirm={() => {
+            if (selectedItem) deleteMutation.mutate(selectedItem.id)
+            setDeleteOpen(false)
+          }}
+          isPending={deleteMutation.isPending}
         />
       </motion.div>
-
-      <CreateDialog open={createOpen} onOpenChange={setCreateOpen} />
-      <EditDialog
-        open={editOpen}
-        onOpenChange={setEditOpen}
-        item={selectedItem}
-      />
-      <ConfirmDeleteDialog
-        open={deleteOpen}
-        onOpenChange={(open) => {
-          if (!open) setDeleteOpen(false)
-        }}
-        title="删除项目"
-        description={`确定删除「${selectedItem?.name}」？关联的 Pin 与 Q&A 配置将一并失效。`}
-        onConfirm={() => {
-          if (selectedItem) deleteMutation.mutate(selectedItem.id)
-          setDeleteOpen(false)
-        }}
-        isPending={deleteMutation.isPending}
-      />
-    </motion.div>
+    </TooltipProvider>
   )
 }
diff --git a/web/src/routes/console/qa.tsx b/web/src/routes/console/qa.tsx
index 2c6d810..4ed8c97 100644
--- a/web/src/routes/console/qa.tsx
+++ b/web/src/routes/console/qa.tsx
@@ -1,10 +1,10 @@
 import { createFileRoute, Outlet } from '@tanstack/react-router'
 
 export const Route = createFileRoute('/console/qa')({
-	staticData: { crumb: '问答管理' },
-	component: QaLayout,
+  staticData: { crumb: '问答管理' },
+  component: QaLayout,
 })
 
 function QaLayout() {
-	return <Outlet />
+  return <Outlet />
 }
diff --git a/web/src/routes/console/qa/$sessionId.tsx b/web/src/routes/console/qa/$sessionId.tsx
index b93d83d..8db9233 100644
--- a/web/src/routes/console/qa/$sessionId.tsx
+++ b/web/src/routes/console/qa/$sessionId.tsx
@@ -14,12 +14,16 @@ function SessionDetailPage() {
   const { data, isLoading } = useSessionDetail(sessionId)
 
   if (isLoading) {
-    return <div className="text-center py-12 text-muted-foreground">加载中…</div>
+    return (
+      <div className="text-center py-12 text-muted-foreground">加载中…</div>
+    )
   }
 
   const session = data?.data
   if (!session) {
-    return <div className="text-center py-12 text-muted-foreground">会话不存在</div>
+    return (
+      <div className="text-center py-12 text-muted-foreground">会话不存在</div>
+    )
   }
 
   return (
@@ -32,7 +36,9 @@ function SessionDetailPage() {
       <SessionDetail session={session} />
 
       <div>
-        <h2 className="text-lg font-semibold mb-4">问题列表 ({session.questions?.length ?? 0})</h2>
+        <h2 className="text-lg font-semibold mb-4">
+          问题列表 ({session.questions?.length ?? 0})
+        </h2>
         <div className="space-y-3">
           {session.questions?.map((q: QuestionSummary) => (
             <QuestionCard key={q.id} question={q} />
diff --git a/web/src/routes/console/qa/index.tsx b/web/src/routes/console/qa/index.tsx
index 625f20c..6c1834a 100644
--- a/web/src/routes/console/qa/index.tsx
+++ b/web/src/routes/console/qa/index.tsx
@@ -200,9 +200,7 @@ function Kpi({
           {value ?? 0}
         </p>
       )}
-      {delta && (
-        <p className="mt-2 text-[11.5px] text-sea-ink-soft">{delta}</p>
-      )}
+      {delta && <p className="mt-2 text-[11.5px] text-sea-ink-soft">{delta}</p>}
     </div>
   )
 }
@@ -215,11 +213,17 @@ function SessionStatus({ status }: { status: SessionItem['status'] }) {
       text: 'text-sea-ink-soft',
       label: '已归档',
     },
-    deleted: { dot: 'bg-destructive', text: 'text-destructive', label: '已删除' },
+    deleted: {
+      dot: 'bg-destructive',
+      text: 'text-destructive',
+      label: '已删除',
+    },
   }[status]
 
   return (
-    <span className={`inline-flex items-center gap-1.5 text-xs font-medium ${config.text}`}>
+    <span
+      className={`inline-flex items-center gap-1.5 text-xs font-medium ${config.text}`}
+    >
       <span className={`inline-block size-[7px] rounded-full ${config.dot}`} />
       {config.label}
     </span>
diff --git a/web/src/routes/console/settings.tsx b/web/src/routes/console/settings.tsx
index 5151fa8..0a15e09 100644
--- a/web/src/routes/console/settings.tsx
+++ b/web/src/routes/console/settings.tsx
@@ -1,9 +1,9 @@
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import { createFileRoute } from '@tanstack/react-router'
 import { motion } from 'motion/react'
 import { Plus } from 'lucide-react'
 import { Button } from '@lumina/components/ui/button'
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@lumina/components/ui/tabs'
+import { Tabs, TabsContent } from '@lumina/components/ui/tabs'
 import { PageHeader } from '#/components/page-header'
 import { DataTable } from '#/components/data-table'
 import { SkeletonTable } from '#/components/skeleton-table'
@@ -64,7 +64,9 @@ function SettingsPage() {
   const [createProviderOpen, setCreateProviderOpen] = useState(false)
   const [editProviderOpen, setEditProviderOpen] = useState(false)
   const [deleteProviderOpen, setDeleteProviderOpen] = useState(false)
-  const [selectedProvider, setSelectedProvider] = useState<Provider | null>(null)
+  const [selectedProvider, setSelectedProvider] = useState<Provider | null>(
+    null,
+  )
 
   // Model dialog state
   const [createModelOpen, setCreateModelOpen] = useState(false)
@@ -107,6 +109,45 @@ function SettingsPage() {
     providerItems,
   )
 
+  // 🌟 监听 ESC 键一键退出设置并返回控制台看板（仅在没有任何内部弹窗打开时触发）
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        const hasOpenDialog =
+          createProviderOpen ||
+          editProviderOpen ||
+          deleteProviderOpen ||
+          createModelOpen ||
+          editModelOpen ||
+          deleteModelOpen
+        if (!hasOpenDialog) {
+          void navigate({ to: '/console/dashboard' })
+        }
+      }
+    }
+    window.addEventListener('keydown', handleKeyDown)
+    return () => window.removeEventListener('keydown', handleKeyDown)
+  }, [
+    createModelOpen,
+    createProviderOpen,
+    deleteModelOpen,
+    deleteProviderOpen,
+    editModelOpen,
+    editProviderOpen,
+    navigate,
+  ])
+
+  const tabLabels: Record<SettingsTab, string> = {
+    site: '站点基础信息',
+    qa: 'Q&A 运行配置',
+    preview: 'Preview 沙盒配置',
+    repowiki: 'RepoWiki 分析参数',
+    security: '安全策略与访问控制',
+    provider: 'Provider 供应方管理',
+    model: '模型目录管理',
+    agent: 'Agent 角色模型分配',
+  }
+
   return (
     <motion.div
       className="space-y-4"
@@ -115,29 +156,11 @@ function SettingsPage() {
       variants={staggerContainer}
     >
       <PageHeader
-        title="系统设置"
+        title={tabLabels[tab] || '系统设置'}
         description="管理 LLM 配置、站点信息、模块运行参数和安全策略"
       />
 
-      <Tabs
-        value={tab}
-        onValueChange={(value) => {
-          if (!isSettingsTab(value)) return
-          void navigate({ search: { tab: value }, replace: true })
-        }}
-        className="min-w-0 space-y-4"
-      >
-        <TabsList variant="line" className="w-full justify-start gap-6">
-          <TabsTrigger value="site">站点信息</TabsTrigger>
-          <TabsTrigger value="qa">Q&A 配置</TabsTrigger>
-          <TabsTrigger value="preview">Preview</TabsTrigger>
-          <TabsTrigger value="repowiki">RepoWiki</TabsTrigger>
-          <TabsTrigger value="security">安全策略</TabsTrigger>
-          <TabsTrigger value="provider">Provider 管理</TabsTrigger>
-          <TabsTrigger value="model">模型管理</TabsTrigger>
-          <TabsTrigger value="agent">Agent 分配</TabsTrigger>
-        </TabsList>
-
+      <Tabs value={tab} className="min-w-0 space-y-4">
         {/* 站点信息 */}
         <TabsContent value="site">
           <motion.div variants={staggerItem}>
diff --git a/web/src/routes/console/ssh.tsx b/web/src/routes/console/ssh.tsx
index 67cb1be..f28d13e 100644
--- a/web/src/routes/console/ssh.tsx
+++ b/web/src/routes/console/ssh.tsx
@@ -16,98 +16,98 @@ import { staggerContainer, staggerItem } from '@lumina/components/motion'
 import { PageHeader } from '#/components/page-header'
 
 export const Route = createFileRoute('/console/ssh')({
-	staticData: { crumb: 'SSH 密钥' },
-	component: SshPage,
+  staticData: { crumb: 'SSH 密钥' },
+  component: SshPage,
 })
 
 function SshPage() {
-	const [page, setPage] = useState(1)
-	const [pageSize, setPageSize] = useState(10)
-	const [createOpen, setCreateOpen] = useState(false)
-	const [editOpen, setEditOpen] = useState(false)
-	const [deleteOpen, setDeleteOpen] = useState(false)
-	const [selectedItem, setSelectedItem] = useState<SshKeyItem | null>(null)
+  const [page, setPage] = useState(1)
+  const [pageSize, setPageSize] = useState(10)
+  const [createOpen, setCreateOpen] = useState(false)
+  const [editOpen, setEditOpen] = useState(false)
+  const [deleteOpen, setDeleteOpen] = useState(false)
+  const [selectedItem, setSelectedItem] = useState<SshKeyItem | null>(null)
 
-	const { data, isLoading } = useSshKeyList({ page, size: pageSize })
-	const deleteMutation = useDeleteSshKey()
+  const { data, isLoading } = useSshKeyList({ page, size: pageSize })
+  const deleteMutation = useDeleteSshKey()
 
-	const items = data?.data?.items ?? []
-	const totalItems = data?.data?.total ?? 0
-	const totalPages = pageSize > 0 ? Math.ceil(totalItems / pageSize) : 1
+  const items = data?.data?.items ?? []
+  const totalItems = data?.data?.total ?? 0
+  const totalPages = pageSize > 0 ? Math.ceil(totalItems / pageSize) : 1
 
-	const columns = getColumns({
-		onEdit: (item) => {
-			setSelectedItem(item)
-			setEditOpen(true)
-		},
-		onDelete: (item) => {
-			setSelectedItem(item)
-			setDeleteOpen(true)
-		},
-	})
+  const columns = getColumns({
+    onEdit: (item) => {
+      setSelectedItem(item)
+      setEditOpen(true)
+    },
+    onDelete: (item) => {
+      setSelectedItem(item)
+      setDeleteOpen(true)
+    },
+  })
 
-	return (
-		<motion.div
-			className="space-y-4"
-			initial="hidden"
-			animate="visible"
-			variants={staggerContainer}
-		>
-			<PageHeader
-				title="SSH 密钥管理"
-				description="管理用于 Git 仓库访问的 SSH 密钥"
-				action={
-					<Button
-						onClick={() => setCreateOpen(true)}
-						className="bg-lagoon text-foam hover:bg-lagoon-deep"
-					>
-						<Plus className="mr-2 size-4" />
-						添加密钥
-					</Button>
-				}
-			/>
+  return (
+    <motion.div
+      className="space-y-4"
+      initial="hidden"
+      animate="visible"
+      variants={staggerContainer}
+    >
+      <PageHeader
+        title="SSH 密钥管理"
+        description="管理用于 Git 仓库访问的 SSH 密钥"
+        action={
+          <Button
+            onClick={() => setCreateOpen(true)}
+            className="bg-lagoon text-foam hover:bg-lagoon-deep"
+          >
+            <Plus className="mr-2 size-4" />
+            添加密钥
+          </Button>
+        }
+      />
 
-			{/* 表格区域 */}
-			<motion.div variants={staggerItem}>
-				{isLoading ? (
-					<SkeletonTable />
-				) : (
-					<>
-						<DataTable columns={columns} data={items} />
-						<DataTablePagination
-							currentPage={page}
-							totalPages={totalPages}
-							totalItems={totalItems}
-							pageSize={pageSize}
-							onPageChange={setPage}
-							onPageSizeChange={(size) => {
-								setPageSize(size)
-								setPage(1)
-							}}
-						/>
-					</>
-				)}
-			</motion.div>
+      {/* 表格区域 */}
+      <motion.div variants={staggerItem}>
+        {isLoading ? (
+          <SkeletonTable />
+        ) : (
+          <>
+            <DataTable columns={columns} data={items} />
+            <DataTablePagination
+              currentPage={page}
+              totalPages={totalPages}
+              totalItems={totalItems}
+              pageSize={pageSize}
+              onPageChange={setPage}
+              onPageSizeChange={(size) => {
+                setPageSize(size)
+                setPage(1)
+              }}
+            />
+          </>
+        )}
+      </motion.div>
 
-			<CreateDialog open={createOpen} onOpenChange={setCreateOpen} />
-			<EditDialog
-				open={editOpen}
-				onOpenChange={setEditOpen}
-				item={selectedItem}
-			/>
-			<ConfirmDeleteDialog
-				open={deleteOpen}
-				onOpenChange={setDeleteOpen}
-				title="确定要删除此 SSH 密钥吗？"
-				description={`此操作不可撤销。删除后，使用「${selectedItem?.name ?? ''}」密钥的 Git 访问将立即失效。`}
-				onConfirm={() => {
-					if (!selectedItem) return
-					deleteMutation.mutate(selectedItem.id, {
-						onSuccess: () => setDeleteOpen(false),
-					})
-				}}
-				isPending={deleteMutation.isPending}
-			/>
-		</motion.div>
-	)
+      <CreateDialog open={createOpen} onOpenChange={setCreateOpen} />
+      <EditDialog
+        open={editOpen}
+        onOpenChange={setEditOpen}
+        item={selectedItem}
+      />
+      <ConfirmDeleteDialog
+        open={deleteOpen}
+        onOpenChange={setDeleteOpen}
+        title="确定要删除此 SSH 密钥吗？"
+        description={`此操作不可撤销。删除后，使用「${selectedItem?.name ?? ''}」密钥的 Git 访问将立即失效。`}
+        onConfirm={() => {
+          if (!selectedItem) return
+          deleteMutation.mutate(selectedItem.id, {
+            onSuccess: () => setDeleteOpen(false),
+          })
+        }}
+        isPending={deleteMutation.isPending}
+      />
+    </motion.div>
+  )
 }
diff --git a/web/src/routes/console/workspace.tsx b/web/src/routes/console/workspace.tsx
index 150321a..2b65051 100644
--- a/web/src/routes/console/workspace.tsx
+++ b/web/src/routes/console/workspace.tsx
@@ -11,10 +11,7 @@ import { ConfirmDeleteDialog } from '#/components/confirm-delete-dialog'
 import { CreateWorkspaceDialog } from '#/components/workspace/create-dialog'
 import { EditWorkspaceDialog } from '#/components/workspace/edit-dialog'
 import { getWorkspaceColumns } from '#/components/workspace/columns'
-import {
-  useWorkspaceList,
-  useDeleteWorkspace,
-} from '#/hooks/useWorkspace'
+import { useWorkspaceList, useDeleteWorkspace } from '#/hooks/useWorkspace'
 import type { WorkspaceItem } from '#/lib/models/response/workspace'
 import { staggerContainer, staggerItem } from '@lumina/components/motion'
 
diff --git a/web/src/routes/pages/$projectName/$slug.tsx b/web/src/routes/pages/$projectName/$slug.tsx
index cdfc5b9..8d8de85 100644
--- a/web/src/routes/pages/$projectName/$slug.tsx
+++ b/web/src/routes/pages/$projectName/$slug.tsx
@@ -1,4 +1,9 @@
-import { createFileRoute, Outlet, useMatches, useParams } from '@tanstack/react-router'
+import {
+  createFileRoute,
+  Outlet,
+  useMatches,
+  useParams,
+} from '@tanstack/react-router'
 import { PagesShowcasePage } from '#/components/pages/showcase-page'
 
 export const Route = createFileRoute('/pages/$projectName/$slug')({
@@ -9,7 +14,9 @@ export const Route = createFileRoute('/pages/$projectName/$slug')({
 function PagesSlugRoute() {
   const { projectName, slug } = useParams({ from: '/pages/$projectName/$slug' })
   const matches = useMatches()
-  if (matches.some((match) => match.routeId === '/pages/$projectName/$slug/$')) {
+  if (
+    matches.some((match) => match.routeId === '/pages/$projectName/$slug/$')
+  ) {
     return <Outlet />
   }
   return <PagesShowcasePage projectName={projectName} slug={slug} filepath="" />
diff --git a/web/src/routes/pages/$projectName/$slug/$.tsx b/web/src/routes/pages/$projectName/$slug/$.tsx
index 253cf62..c84262a 100644
--- a/web/src/routes/pages/$projectName/$slug/$.tsx
+++ b/web/src/routes/pages/$projectName/$slug/$.tsx
@@ -7,7 +7,10 @@ export const Route = createFileRoute('/pages/$projectName/$slug/$')({
 
 function PagesSplatRoute() {
   const params = useParams({ from: '/pages/$projectName/$slug/$' })
-  const filepath = ((params as { _splat?: string })._splat ?? '').replace(/^\/+/, '')
+  const filepath = ((params as { _splat?: string })._splat ?? '').replace(
+    /^\/+/,
+    '',
+  )
   return (
     <PagesShowcasePage
       projectName={params.projectName}
diff --git a/web/src/routes/preview/$sessionHash.tsx b/web/src/routes/preview/$sessionHash.tsx
index 931e03d..17e07e8 100644
--- a/web/src/routes/preview/$sessionHash.tsx
+++ b/web/src/routes/preview/$sessionHash.tsx
@@ -1,4 +1,10 @@
-import { createFileRoute, Outlet, redirect, useMatches, useParams } from '@tanstack/react-router'
+import {
+  createFileRoute,
+  Outlet,
+  redirect,
+  useMatches,
+  useParams,
+} from '@tanstack/react-router'
 import Cookies from 'js-cookie'
 import { PreviewWorkbenchPage } from '#/components/preview/workbench-page'
 import { getSafeRedirect } from '#/lib/apis/client'
diff --git a/web/src/routes/preview/$sessionHash/$.tsx b/web/src/routes/preview/$sessionHash/$.tsx
index f4ab7a0..e7ee5fd 100644
--- a/web/src/routes/preview/$sessionHash/$.tsx
+++ b/web/src/routes/preview/$sessionHash/$.tsx
@@ -28,6 +28,9 @@ function PreviewSplatPage() {
     '',
   )
   return (
-    <PreviewWorkbenchPage sessionHash={sessionHash} requestedFile={requestedFile} />
+    <PreviewWorkbenchPage
+      sessionHash={sessionHash}
+      requestedFile={requestedFile}
+    />
   )
 }