diff --git a/api/pages/list.go b/api/pages/list.go
index 9fdcd5a..4656bcf 100644
--- a/api/pages/list.go
+++ b/api/pages/list.go
@@ -6,6 +6,7 @@ import xSnowflake "github.com/bamboo-services/bamboo-base-go/common/snowflake"
 type PageListRequest struct {
 	ProjectID   xSnowflake.SnowflakeID `form:"project_id"`   // 项目ID筛选
 	WorkspaceID xSnowflake.SnowflakeID `form:"workspace_id"` // 所属空间ID筛选，零值不过滤
+	Status      string                 `form:"status"`       // 状态筛选，空值不过滤
 	Page        int                    `form:"page"`         // 页码
 	Size        int                    `form:"size"`         // 每页数量
 }
diff --git a/api/project/list.go b/api/project/list.go
index 513447c..746ff6c 100644
--- a/api/project/list.go
+++ b/api/project/list.go
@@ -7,4 +7,5 @@ type ProjectListRequest struct {
 	Page        int                    `form:"page"`         // 页码
 	Size        int                    `form:"size"`         // 每页数量
 	WorkspaceID xSnowflake.SnowflakeID `form:"workspace_id"` // 所属空间ID筛选，零值不过滤
+	Search      string                 `form:"search"`       // 项目名称/别名模糊搜索，空值不过滤
 }
diff --git a/components/src/lpw/annotation.test.tsx b/components/src/lpw/annotation.test.tsx
index 0317b46..c277122 100644
--- a/components/src/lpw/annotation.test.tsx
+++ b/components/src/lpw/annotation.test.tsx
@@ -197,7 +197,11 @@ describe('annotation', () => {
     expect(container.querySelector('#frame-md-annotated')).toBeTruthy()
   })
 
-  it('Q-04 重叠批注压缩，点击后展开', async () => {
+  it('Q-04 MD 尺寸下重叠批注压缩，点击后展开；LG 尺寸下默认展开', async () => {
+    // 模拟 MD 大小 (例如 800px)
+    window.innerWidth = 800
+    window.dispatchEvent(new Event('resize'))
+
     const ann: LpwAnnotation = { kind: 'note', message: '第一条' }
     const ann2: LpwAnnotation = { kind: 'issue', message: '第二条' }
     render(
@@ -220,6 +224,38 @@ describe('annotation', () => {
     expect(screen.getAllByTestId('annotation-bubble').length).toBeGreaterThanOrEqual(
       2,
     )
+
+    // 切回 LG 尺寸 (1200px)
+    window.innerWidth = 1200
+    window.dispatchEvent(new Event('resize'))
+  })
+
+  it('移动端/MD 浮动批注按钮与精致侧边抽屉设计', async () => {
+    window.innerWidth = 640
+    window.dispatchEvent(new Event('resize'))
+
+    const ann: LpwAnnotation = { kind: 'note', message: '移动端批注' }
+    render(
+      <div data-testid="lpw-paper">
+        <AnnotationProvider>
+          <AnnotationFrame nodeId="n-m" annotation={ann}>
+            <div>移动正文</div>
+          </AnnotationFrame>
+          <AnnotationGutter />
+        </AnnotationProvider>
+      </div>,
+    )
+
+    const triggerBtn = screen.getByRole('button', { name: /查看 1 条批注/ })
+    expect(triggerBtn).toBeTruthy()
+    fireEvent.click(triggerBtn)
+
+    // 打开抽屉
+    expect(await screen.findByText('文档批注与审查建议')).toBeTruthy()
+    expect(screen.getAllByText('移动端批注').length).toBeGreaterThanOrEqual(1)
+
+    window.innerWidth = 1200
+    window.dispatchEvent(new Event('resize'))
   })
 
   it('supports unicode and case-insensitive flags combined (iu)', () => {
diff --git a/components/src/lpw/annotation.tsx b/components/src/lpw/annotation.tsx
index f9762bb..648cbfe 100644
--- a/components/src/lpw/annotation.tsx
+++ b/components/src/lpw/annotation.tsx
@@ -9,6 +9,7 @@ import {
 } from "lucide-react";
 import type React from "react";
 import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetDescription } from "../ui/sheet";
 import { useAnnotationContext } from "./annotation-context";
 import type { RegisteredAnnotation } from "./annotation-context";
 import { isSafeAnnotationPattern } from "./safe-pattern";
@@ -314,8 +315,20 @@ export const AnnotationGutter: React.FC = () => {
   const annotations = ctx?.annotations ?? [];
   const asideRef = useRef<HTMLElement>(null);
   const [tops, setTops] = useState<Record<string, number>>({});
-  const [expandedKey, setExpandedKey] = useState<string | null>(null);
-  const [mobileOpen, setMobileOpen] = useState(false);
+  const [isLg, setIsLg] = useState(false);
+  const [expandedKeys, setExpandedKeys] = useState<Set<string>>(new Set());
+  const [collapsedKeys, setCollapsedKeys] = useState<Set<string>>(new Set());
+  const [sheetOpen, setSheetOpen] = useState(false);
+
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    const checkLg = () => {
+      setIsLg(window.innerWidth >= 1024);
+    };
+    checkLg();
+    window.addEventListener("resize", checkLg);
+    return () => window.removeEventListener("resize", checkLg);
+  }, []);
 
   useLayoutEffect(() => {
     if (annotations.length === 0) return;
@@ -362,6 +375,38 @@ export const AnnotationGutter: React.FC = () => {
     [annotations, tops],
   );
 
+  const isGroupExpanded = (key: string, groupLen: number) => {
+    if (groupLen <= 1) return true;
+    if (isLg) {
+      return !collapsedKeys.has(key);
+    }
+    return expandedKeys.has(key);
+  };
+
+  const handleToggleGroup = (key: string, currentlyExpanded: boolean) => {
+    if (currentlyExpanded) {
+      if (isLg) {
+        setCollapsedKeys((prev) => new Set([...prev, key]));
+      } else {
+        setExpandedKeys((prev) => {
+          const next = new Set(prev);
+          next.delete(key);
+          return next;
+        });
+      }
+    } else {
+      if (isLg) {
+        setCollapsedKeys((prev) => {
+          const next = new Set(prev);
+          next.delete(key);
+          return next;
+        });
+      } else {
+        setExpandedKeys((prev) => new Set([...prev, key]));
+      }
+    }
+  };
+
   const clusterTops = useMemo(() => {
     const result: Record<string, number> = {};
     let minTop = 0;
@@ -386,12 +431,12 @@ export const AnnotationGutter: React.FC = () => {
         ref={asideRef}
         data-testid="annotation-gutter"
         aria-label="文档批注"
-        className="relative hidden w-64 shrink-0 self-stretch py-2 pr-2 md:block"
+        className="relative hidden w-60 lg:w-64 shrink-0 self-stretch py-2 pr-2 md:block"
       >
         {clusters.map((group) => {
           const key = group.map((g) => g.nodeId).join("-");
           const top = clusterTops[key] ?? (tops[group[0].nodeId] ?? 0);
-          const expanded = expandedKey === key || group.length === 1;
+          const expanded = isGroupExpanded(key, group.length);
 
           return (
             <div
@@ -411,7 +456,7 @@ export const AnnotationGutter: React.FC = () => {
                   {group.length > 1 ? (
                     <button
                       type="button"
-                      onClick={() => setExpandedKey(null)}
+                      onClick={() => handleToggleGroup(key, true)}
                       className="font-mono text-[10px] text-sea-ink-soft hover:text-sea-ink cursor-pointer"
                     >
                       收起
@@ -423,7 +468,7 @@ export const AnnotationGutter: React.FC = () => {
                   type="button"
                   data-testid="annotation-cluster"
                   aria-label={`展开 ${group.length} 条批注`}
-                  onClick={() => setExpandedKey(key)}
+                  onClick={() => handleToggleGroup(key, false)}
                   className="relative w-full cursor-pointer text-left"
                 >
                   <MessageBubble
@@ -440,35 +485,69 @@ export const AnnotationGutter: React.FC = () => {
         })}
       </aside>
 
+      {/* 移动端与 MD 屏幕下的优雅隐藏批注触发栏与侧边抽屉 */}
       <div
         data-testid="annotation-mobile-strip"
-        className="w-full border-t border-line/60 bg-surface/40 md:hidden"
+        className="fixed bottom-5 right-5 z-40 lg:hidden print:hidden"
       >
         <button
           type="button"
-          aria-expanded={mobileOpen}
+          aria-expanded={sheetOpen}
           aria-label={`查看 ${annotations.length} 条批注`}
-          onClick={() => setMobileOpen((v) => !v)}
-          className="flex w-full cursor-pointer items-center justify-between px-4 py-3 font-mono text-xs text-sea-ink"
+          onClick={() => {
+            setSheetOpen(true);
+          }}
+          className="flex cursor-pointer items-center gap-2 border border-line bg-surface-strong/95 px-3.5 py-2 font-mono text-xs text-sea-ink shadow-lg backdrop-blur-sm transition-all hover:border-lagoon hover:shadow-xl focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-lagoon/40"
         >
-          <span className="flex items-center gap-2">
-            <MessageSquare className="h-4 w-4 text-lagoon" />
-            批注 ({annotations.length})
+          <MessageSquare className="h-4 w-4 text-lagoon" />
+          <span className="font-sans font-medium">批注</span>
+          <span className="flex h-4 min-w-4 items-center justify-center border border-lagoon/50 bg-lagoon/15 px-1 font-mono text-[10px] font-semibold text-lagoon-deep">
+            {annotations.length}
           </span>
-          <span className="text-sea-ink-soft">{mobileOpen ? "收起" : "展开"}</span>
         </button>
-        {mobileOpen ? (
-          <div className="space-y-3 px-4 pb-4">
+      </div>
+
+      <Sheet open={sheetOpen} onOpenChange={setSheetOpen}>
+        <SheetContent
+          side="right"
+          className="w-full sm:max-w-md bg-surface-strong border-l border-line p-0 flex flex-col font-sans"
+        >
+          <SheetHeader className="p-5 border-b border-line bg-surface/50">
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-2">
+                <div className="flex h-7 w-7 items-center justify-center border border-lagoon/40 bg-lagoon/10">
+                  <MessageSquare className="h-4 w-4 text-lagoon" />
+                </div>
+                <div>
+                  <SheetTitle className="font-serif text-base font-semibold text-sea-ink">
+                    文档批注与审查建议
+                  </SheetTitle>
+                  <SheetDescription className="font-mono text-[11px] text-sea-ink-soft">
+                    共 {annotations.length} 条批注 · 点击条目直达正文
+                  </SheetDescription>
+                </div>
+              </div>
+            </div>
+          </SheetHeader>
+
+          <div className="flex-1 overflow-y-auto p-5 space-y-3.5">
             {annotations.map((item) => (
-              <MessageBubble
+              <div
                 key={item.nodeId}
-                nodeId={item.nodeId}
-                annotation={item.annotation}
-              />
+                onClick={() => {
+                  setSheetOpen(false);
+                  ctx?.scrollToNode(item.nodeId);
+                }}
+              >
+                <MessageBubble
+                  nodeId={item.nodeId}
+                  annotation={item.annotation}
+                />
+              </div>
             ))}
           </div>
-        ) : null}
-      </div>
+        </SheetContent>
+      </Sheet>
     </>
   );
 };
diff --git a/components/src/lpw/block/image.test.tsx b/components/src/lpw/block/image.test.tsx
index 5958cd3..2ca0aaf 100644
--- a/components/src/lpw/block/image.test.tsx
+++ b/components/src/lpw/block/image.test.tsx
@@ -28,6 +28,33 @@ describe('ImageBlock', () => {
     expect(screen.getByText('图 1. 架构流向')).toBeTruthy()
   })
 
+  it('默认页面级宽度应为 80%，嵌套在 layout/container 内时应为 100%', () => {
+    const { rerender } = render(
+      <ImageBlock
+        blockId="img-default"
+        props={{
+          src: '/preview.png',
+          alt: '顶层图片',
+        }}
+        location={{ jsonPath: '/content/0', idPath: [] }}
+      />,
+    )
+    const figTop = screen.getByTestId('image-block')
+    expect(figTop.style.width).toBe('80%')
+
+    rerender(
+      <ImageBlock
+        blockId="img-nested"
+        props={{
+          src: '/preview.png',
+          alt: '嵌套图片',
+        }}
+        location={{ jsonPath: '/content/0/children/0', idPath: ['container-1'] }}
+      />,
+    )
+    expect(figTop.style.width).toBe('100%')
+  })
+
   it('图片加载失败触发 onError 时应切换为占位卡', () => {
     render(
       <ImageBlock
diff --git a/components/src/lpw/block/image.tsx b/components/src/lpw/block/image.tsx
index 78223c6..94d692f 100644
--- a/components/src/lpw/block/image.tsx
+++ b/components/src/lpw/block/image.tsx
@@ -5,6 +5,7 @@ import type { LpwBlockSlotProps, LpwImageProps } from '../types'
 
 export const ImageBlock: React.FC<LpwBlockSlotProps<LpwImageProps>> = ({
   props,
+  location,
 }) => {
   const [hasError, setHasError] = useState(false)
   const runtime = useLpwRuntime()
@@ -14,6 +15,9 @@ export const ImageBlock: React.FC<LpwBlockSlotProps<LpwImageProps>> = ({
     setHasError(false)
   }, [props.src])
 
+  const isNested = Boolean(location?.idPath && location.idPath.length > 0)
+  const targetWidth = props.width ? props.width : isNested ? '100%' : '80%'
+
   if (hasError) {
     return (
       <figure
@@ -31,14 +35,18 @@ export const ImageBlock: React.FC<LpwBlockSlotProps<LpwImageProps>> = ({
   }
 
   return (
-    <figure className="flex max-w-full min-w-0 flex-col items-center font-sans">
-      <div className="max-w-full min-w-0 border border-line bg-surface p-1.5">
+    <figure
+      data-testid="image-block"
+      className="flex max-w-full min-w-0 flex-col items-center font-sans"
+      style={{ width: targetWidth, maxWidth: '100%', margin: '0 auto' }}
+    >
+      <div className="w-full max-w-full min-w-0 border border-line bg-surface p-1.5 flex justify-center">
         <img
           src={resolvedSrc}
           alt={props.alt}
           style={props.width ? { width: props.width } : undefined}
           onError={() => setHasError(true)}
-          className="max-w-full object-contain bg-surface-muted/20"
+          className="w-full max-w-full object-contain bg-surface-muted/20"
         />
       </div>
       {props.caption && (
diff --git a/components/src/lpw/block/mermaid.test.tsx b/components/src/lpw/block/mermaid.test.tsx
index a7c2c97..cf93038 100644
--- a/components/src/lpw/block/mermaid.test.tsx
+++ b/components/src/lpw/block/mermaid.test.tsx
@@ -23,4 +23,41 @@ describe('MermaidBlock', () => {
     expect(screen.getByTestId('mermaid-block')).toBeTruthy()
     expect(screen.getByText('图 2. 流程拓扑')).toBeTruthy()
   })
+
+  it('默认页面级宽度应为 80%，嵌套在 layout/container 内时应为 100%，且支持自定义 width', () => {
+    const { rerender } = render(
+      <MermaidBlock
+        blockId="mm-top"
+        props={{
+          content: 'flowchart LR\n  A-->B',
+        }}
+        location={{ jsonPath: '/content/0', idPath: [] }}
+      />,
+    )
+    const fig = screen.getByTestId('mermaid-block')
+    expect(fig.style.width).toBe('80%')
+
+    rerender(
+      <MermaidBlock
+        blockId="mm-nested"
+        props={{
+          content: 'flowchart LR\n  A-->B',
+        }}
+        location={{ jsonPath: '/content/0/children/0', idPath: ['container-1'] }}
+      />,
+    )
+    expect(fig.style.width).toBe('100%')
+
+    rerender(
+      <MermaidBlock
+        blockId="mm-custom"
+        props={{
+          content: 'flowchart LR\n  A-->B',
+          width: '60%',
+        }}
+        location={{ jsonPath: '/content/0', idPath: [] }}
+      />,
+    )
+    expect(fig.style.width).toBe('60%')
+  })
 })
diff --git a/components/src/lpw/block/mermaid.tsx b/components/src/lpw/block/mermaid.tsx
index 123d2f0..32e4e46 100644
--- a/components/src/lpw/block/mermaid.tsx
+++ b/components/src/lpw/block/mermaid.tsx
@@ -5,11 +5,18 @@ import { MermaidViewport } from './mermaid-viewport'
 
 export const MermaidBlock: React.FC<LpwBlockSlotProps<LpwMermaidProps>> = ({
   props,
+  location,
 }) => {
   const fenced = '```mermaid\n' + props.content.trim() + '\n```'
+  const isNested = Boolean(location?.idPath && location.idPath.length > 0)
+  const targetWidth = props.width ? props.width : isNested ? '100%' : '80%'
 
   return (
-    <figure data-testid="mermaid-block" className="font-sans">
+    <figure
+      data-testid="mermaid-block"
+      className="font-sans"
+      style={{ width: targetWidth, maxWidth: '100%', margin: '0 auto' }}
+    >
       <MermaidViewport>
         <Markdown>{fenced}</Markdown>
       </MermaidViewport>
diff --git a/components/src/lpw/document-viewer.test.tsx b/components/src/lpw/document-viewer.test.tsx
index 714af8d..6fd97b5 100644
--- a/components/src/lpw/document-viewer.test.tsx
+++ b/components/src/lpw/document-viewer.test.tsx
@@ -183,7 +183,7 @@ describe('LpwDocumentViewer', () => {
     expect(screen.queryByText(/IMPRIMATUR/)).toBeNull()
   })
 
-  it('Q-04 批注栏在纸张外部，没有视口 fixed FAB 和右上角 label', async () => {
+  it('Q-04 批注栏在纸张外部，没有右上角 label', async () => {
     const source = JSON.stringify({
       version: '1.1',
       meta: { title: '批注纸外' },
@@ -208,12 +208,11 @@ describe('LpwDocumentViewer', () => {
         },
       ],
     })
-    const { container } = render(<LpwDocumentViewer source={source} />)
+    render(<LpwDocumentViewer source={source} />)
     const gutter = await screen.findByTestId('annotation-gutter')
     expect(gutter).toBeTruthy()
     const paper = await screen.findByTestId('lpw-paper')
     expect(paper.querySelector('[data-testid="annotation-gutter"]')).toBeNull()
-    expect(container.querySelector('.fixed')).toBeNull()
     expect(screen.queryByRole('button', { name: /批注：/ })).toBeNull()
     expect(document.getElementById('frame-md-1')).toBeTruthy()
   })
diff --git a/components/src/lpw/document-viewer.tsx b/components/src/lpw/document-viewer.tsx
index 9d6f3be..a7865c0 100644
--- a/components/src/lpw/document-viewer.tsx
+++ b/components/src/lpw/document-viewer.tsx
@@ -50,10 +50,10 @@ export const LpwDocumentViewer: React.FC<LpwDocumentViewerProps> = ({
 
   return (
     <AnnotationProvider>
-      <div className="w-full max-w-7xl mx-auto px-3 py-4 sm:px-6 sm:py-8 flex justify-center items-start gap-8 min-w-0">
+      <div className="w-full max-w-7xl mx-auto px-3 py-4 sm:px-6 sm:py-8 flex justify-center items-start gap-4 lg:gap-8 min-w-0">
         <div
           data-testid="lpw-paper"
-          className="@container/lpw w-full max-w-5xl shrink-0 bg-surface-strong border border-line shadow-[0_18px_60px_rgba(43,32,24,0.07)] relative text-sea-ink font-sans min-w-0"
+          className="@container/lpw w-full max-w-5xl flex-1 bg-surface-strong border border-line shadow-[0_18px_60px_rgba(43,32,24,0.07)] relative text-sea-ink font-sans min-w-0"
         >
           <div aria-hidden="true" className="h-0.5 bg-gradient-to-r from-lagoon via-palm/70 to-transparent" />
 
diff --git a/components/src/lpw/types.ts b/components/src/lpw/types.ts
index d8d9dad..f89e1c6 100644
--- a/components/src/lpw/types.ts
+++ b/components/src/lpw/types.ts
@@ -289,6 +289,7 @@ export interface LpwCardsProps {
 export interface LpwMermaidProps {
   content: string
   caption?: string
+  width?: string
 }
 
 export type LpwChartType =
diff --git a/internal/handler/pages.go b/internal/handler/pages.go
index bd2877f..96ade4d 100644
--- a/internal/handler/pages.go
+++ b/internal/handler/pages.go
@@ -23,6 +23,7 @@ var _ = apiCommon.BaseResponse{}
 // @Param       Authorization  header  string  true  "Bearer Access Token"
 // @Param       project_id     query   string  false "项目ID"
 // @Param       workspace_id   query   string  false "空间ID"
+// @Param       status         query   string  false "状态筛选（published/archived）"
 // @Param       page           query   int     false "页码"
 // @Param       size           query   int     false "每页数量"
 // @Success     200  {object}  apiCommon.BaseResponse{data=apiPages.PageListResponse}  "查询成功"
@@ -33,7 +34,7 @@ func (h *PagesHandler) ListPages(ctx *gin.Context) {
 	if !BindQuery(ctx, &req) {
 		return
 	}
-	resp, xErr := h.service.pagesLogic.List(ctx.Request.Context(), req.ProjectID, req.WorkspaceID, req.Page, req.Size)
+	resp, xErr := h.service.pagesLogic.List(ctx.Request.Context(), req.ProjectID, req.WorkspaceID, req.Status, req.Page, req.Size)
 	if xErr != nil {
 		_ = ctx.Error(xErr)
 		return
diff --git a/internal/handler/project.go b/internal/handler/project.go
index fdca9d8..e27c54b 100644
--- a/internal/handler/project.go
+++ b/internal/handler/project.go
@@ -52,6 +52,9 @@ func (h *ProjectHandler) CreateProject(ctx *gin.Context) {
 // @Param       page           query     int      false  "页码"
 // @Param       size           query     int      false  "每页数量"
 // @Param       workspace_id   query     string   false  "所属空间ID"
+// @Param       search         query     string   false  "项目名称/别名模糊搜索"
+// @Param       page           query     int      false  "页码（默认 1）"
+// @Param       size           query     int      false  "每页数量（默认 10）"
 // @Success     200  {object}  apiCommon.BaseResponse{data=apiProject.ProjectListResponse}  "获取成功"
 // @Failure     401  {object}  apiCommon.BaseResponse  "未授权"
 // @Router      /api/v1/project [GET]
@@ -63,7 +66,7 @@ func (h *ProjectHandler) ListProjects(ctx *gin.Context) {
 		return
 	}
 
-	resp, xErr := h.service.projectLogic.List(ctx, req.Page, req.Size, req.WorkspaceID)
+	resp, xErr := h.service.projectLogic.List(ctx, req.Page, req.Size, req.WorkspaceID, req.Search)
 	if xErr != nil {
 		_ = ctx.Error(xErr)
 		return
diff --git a/internal/logic/pages_logic.go b/internal/logic/pages_logic.go
index 413d9db..0936c99 100644
--- a/internal/logic/pages_logic.go
+++ b/internal/logic/pages_logic.go
@@ -67,8 +67,8 @@ func (l *PagesLogic) AuthToken() *service.PageAuthTokenService {
 }
 
 // List 分页列出页面
-func (l *PagesLogic) List(ctx context.Context, projectID, workspaceID xSnowflake.SnowflakeID, page, size int) (*apiPages.PageListResponse, *xError.Error) {
-	pages, total, xErr := l.repo.page.List(ctx, projectID, workspaceID, page, size)
+func (l *PagesLogic) List(ctx context.Context, projectID, workspaceID xSnowflake.SnowflakeID, status string, page, size int) (*apiPages.PageListResponse, *xError.Error) {
+	pages, total, xErr := l.repo.page.List(ctx, projectID, workspaceID, status, page, size)
 	if xErr != nil {
 		return nil, xErr
 	}
diff --git a/internal/logic/project.go b/internal/logic/project.go
index 984431a..28ea3f0 100644
--- a/internal/logic/project.go
+++ b/internal/logic/project.go
@@ -116,15 +116,15 @@ func (l *ProjectLogic) GetByID(ctx context.Context, id string) (*apiProject.Proj
 	return l.toResponse(project), nil
 }
 
-// List 分页获取项目列表；workspaceID 为零时不过滤
-func (l *ProjectLogic) List(ctx context.Context, page, size int, workspaceID xSnowflake.SnowflakeID) (*apiProject.ProjectListResponse, *xError.Error) {
-	l.log.Info(ctx, fmt.Sprintf("List - 获取项目列表 [page=%d, size=%d, workspace=%d]", page, size, workspaceID.Int64()))
+// List 分页获取项目列表；workspaceID 为零时不过滤，search 不为空时模糊搜索
+func (l *ProjectLogic) List(ctx context.Context, page, size int, workspaceID xSnowflake.SnowflakeID, search string) (*apiProject.ProjectListResponse, *xError.Error) {
+	l.log.Info(ctx, fmt.Sprintf("List - 获取项目列表 [page=%d, size=%d, workspace=%d, search=%s]", page, size, workspaceID.Int64(), search))
 
 	pageReq := xModels.PageRequest{Page: int64(page), Size: int64(size)}.Normalize()
 	page = int(pageReq.Page)
 	size = int(pageReq.Size)
 
-	projects, total, xErr := l.repo.project.List(ctx, page, size, workspaceID)
+	projects, total, xErr := l.repo.project.List(ctx, page, size, workspaceID, search)
 	if xErr != nil {
 		return nil, xErr
 	}
diff --git a/internal/logic/project_test.go b/internal/logic/project_test.go
index df69198..57e1733 100644
--- a/internal/logic/project_test.go
+++ b/internal/logic/project_test.go
@@ -133,7 +133,7 @@ func TestProjectLogic_List(t *testing.T) {
 	}
 
 	// 分页查询
-	listResp, xErr := l.List(ctx, 1, 10, 0)
+	listResp, xErr := l.List(ctx, 1, 10, 0, "")
 	if xErr != nil {
 		t.Fatalf("List failed: %v", xErr)
 	}
diff --git a/internal/logic/project_workspace_test.go b/internal/logic/project_workspace_test.go
index 938b8e8..9a57cf7 100644
--- a/internal/logic/project_workspace_test.go
+++ b/internal/logic/project_workspace_test.go
@@ -126,11 +126,11 @@ func TestProjectUpdateWorkspacePreservesProjectAndLists(t *testing.T) {
 	if resp.ID.String() != "100000000000000003" || resp.AliasName != "alias" || resp.Description != "original" || len(resp.MatchPath) != 1 || resp.MatchPath[0] != "/test" {
 		t.Fatalf("migration changed project identity or fields: %+v", resp)
 	}
-	oldList, xErr := l.List(ctx, 1, 10, 100000000000000001)
+	oldList, xErr := l.List(ctx, 1, 10, 100000000000000001, "")
 	if xErr != nil || oldList.Total != 0 {
 		t.Fatalf("old list = %+v, error = %v", oldList, xErr)
 	}
-	newList, xErr := l.List(ctx, 1, 10, 100000000000000002)
+	newList, xErr := l.List(ctx, 1, 10, 100000000000000002, "")
 	if xErr != nil || newList.Total != 1 || newList.Items[0].ID != resp.ID {
 		t.Fatalf("new list = %+v, error = %v", newList, xErr)
 	}
diff --git a/internal/mcp/pages_tools.go b/internal/mcp/pages_tools.go
index 7e3a1a9..d1fe756 100644
--- a/internal/mcp/pages_tools.go
+++ b/internal/mcp/pages_tools.go
@@ -124,7 +124,7 @@ func handlePagesList(ctx context.Context, req *mcp.CallToolRequest) (*mcp.CallTo
 	if s, ok := args["size"].(float64); ok && s > 0 && s <= 100 {
 		size = int(s)
 	}
-	resp, xErr := pagesLogic.List(ctx, projectID, 0, page, size)
+	resp, xErr := pagesLogic.List(ctx, projectID, 0, "", page, size)
 	if xErr != nil {
 		return previewErrorResult(fmt.Sprintf("获取页面列表失败: %s", xErr.Error())), nil
 	}
diff --git a/internal/mcp/preview_lpw_spec.go b/internal/mcp/preview_lpw_spec.go
index 780c8aa..160bc35 100644
--- a/internal/mcp/preview_lpw_spec.go
+++ b/internal/mcp/preview_lpw_spec.go
@@ -90,7 +90,7 @@ func GetLpwTextSpec(kindFilter, typeFilter string) string {
 		sb.WriteString("  image:       props: src*(str), alt*(str), caption(str), width(str)\n")
 		sb.WriteString("  divider:     props: {} (无必填字段)\n")
 		sb.WriteString("  cards:       props: items*([ {title*, description, href} ], 1..12)\n")
-		sb.WriteString("  mermaid:     props: content*(str: Mermaid 语法, 1..8192), caption(str)\n")
+		sb.WriteString("  mermaid:     props: content*(str: Mermaid 语法, 1..8192), caption(str), width(str)\n")
 		sb.WriteString("  comparison:  props: plans*([ {name*, recommended(bool)} ]), rows*([ {dimension*, values*([ {text*, verdict:\"good\"|\"warn\"|\"bad\"} ])} ]), title\n")
 		sb.WriteString("  progress:    props: items*([ {label*, value*(0..100), status:\"wait\"|\"process\"|\"finish\"|\"error\"} ], 1..12), title\n")
 		sb.WriteString("  tree:        props: nodes*([ {label*, note, children:[treeNode]} ]), title\n")
@@ -240,7 +240,8 @@ func getSpecificTypeSpec(nodeType string) string {
 属性:
   props: {
     content: string (合法的 Mermaid 源码文本，如 graph TD / sequenceDiagram)*,
-    caption: string (图表注脚说明)
+    caption: string (图表注脚说明),
+    width: string (可选宽度，如 "80%" 或 "600px", 默认 "80%")
   }`
 
 	case "table":
diff --git a/internal/mcp/project_tools.go b/internal/mcp/project_tools.go
index 612e176..6dd7889 100644
--- a/internal/mcp/project_tools.go
+++ b/internal/mcp/project_tools.go
@@ -248,7 +248,7 @@ func handleProjectList(_ context.Context, req *mcp.CallToolRequest) (*mcp.CallTo
 	if errMsg != "" {
 		return errorTextResult(errMsg), nil
 	}
-	resp, xErr := projectLogic.List(context.Background(), page, size, workspaceID)
+	resp, xErr := projectLogic.List(context.Background(), page, size, workspaceID, "")
 	if xErr != nil {
 		return errorTextResult(fmt.Sprintf("获取项目列表失败: %s", xErr.Error())), nil
 	}
diff --git a/internal/repository/page.go b/internal/repository/page.go
index 4bce975..16a6f27 100644
--- a/internal/repository/page.go
+++ b/internal/repository/page.go
@@ -85,11 +85,11 @@ func (r *PageRepo) GetByIDs(ctx context.Context, ids []xSnowflake.SnowflakeID) (
 	return pages, nil
 }
 
-// List 分页获取页面列表（按更新时间降序；projectID / workspaceID 为零值时不过滤）
-func (r *PageRepo) List(ctx context.Context, projectID, workspaceID xSnowflake.SnowflakeID, page, size int) ([]*entity.Page, int64, *xError.Error) {
+// List 分页获取页面列表（按更新时间降序；projectID / workspaceID 为零值时不过滤；status 为空不过滤）
+func (r *PageRepo) List(ctx context.Context, projectID, workspaceID xSnowflake.SnowflakeID, status string, page, size int) ([]*entity.Page, int64, *xError.Error) {
 	pageReq := xModels.PageRequest{Page: int64(page), Size: int64(size)}.Normalize()
 	page, size = int(pageReq.Page), int(pageReq.Size)
-	r.log.Info(ctx, fmt.Sprintf("List - 分页获取页面列表 [projectID=%d, workspace=%d, page=%d, size=%d]", projectID.Int64(), workspaceID.Int64(), page, size))
+	r.log.Info(ctx, fmt.Sprintf("List - 分页获取页面列表 [projectID=%d, workspace=%d, status=%s, page=%d, size=%d]", projectID.Int64(), workspaceID.Int64(), status, page, size))
 
 	query := r.db.WithContext(ctx).Model(&entity.Page{})
 	if !projectID.IsZero() {
@@ -99,6 +99,9 @@ func (r *PageRepo) List(ctx context.Context, projectID, workspaceID xSnowflake.S
 		projects := r.db.WithContext(ctx).Model(&entity.Project{}).Select("id").Where("workspace_id = ?", workspaceID)
 		query = query.Where("project_id IN (?)", projects)
 	}
+	if status != "" {
+		query = query.Where("status = ?", status)
+	}
 
 	var total int64
 	if err := query.Count(&total).Error; err != nil {
diff --git a/internal/repository/project.go b/internal/repository/project.go
index 8ca492f..15e7c37 100644
--- a/internal/repository/project.go
+++ b/internal/repository/project.go
@@ -134,14 +134,18 @@ func (r *ProjectRepo) GetByName(ctx context.Context, name string) (*entity.Proje
 
 // List 分页获取项目列表（按创建时间降序）
 //
-// workspaceID 为零值时不过滤空间，与现网行为相同。
-func (r *ProjectRepo) List(ctx context.Context, page, size int, workspaceID xSnowflake.SnowflakeID) ([]*entity.Project, int64, *xError.Error) {
-	r.log.Info(ctx, fmt.Sprintf("List - 分页获取项目列表 [page=%d, size=%d, workspace=%d]", page, size, workspaceID.Int64()))
+// workspaceID 为零值时不过滤空间，search 不为空时按名称/别名模糊匹配
+func (r *ProjectRepo) List(ctx context.Context, page, size int, workspaceID xSnowflake.SnowflakeID, search string) ([]*entity.Project, int64, *xError.Error) {
+	r.log.Info(ctx, fmt.Sprintf("List - 分页获取项目列表 [page=%d, size=%d, workspace=%d, search=%s]", page, size, workspaceID.Int64(), search))
 
 	query := r.db.WithContext(ctx).Model(&entity.Project{})
 	if !workspaceID.IsZero() {
 		query = query.Where("workspace_id = ?", workspaceID)
 	}
+	if search != "" {
+		like := "%" + search + "%"
+		query = query.Where("name ILIKE ? OR alias_name ILIKE ?", like, like)
+	}
 
 	var total int64
 	if err := query.Count(&total).Error; err != nil {
diff --git a/internal/repository/project_test.go b/internal/repository/project_test.go
index 643d41d..9c4d623 100644
--- a/internal/repository/project_test.go
+++ b/internal/repository/project_test.go
@@ -107,7 +107,7 @@ func TestProjectRepo_List(t *testing.T) {
 	repo := setupTestRepo(t)
 	ctx := context.Background()
 
-	projects, total, xErr := repo.List(ctx, 1, 10, 0)
+	projects, total, xErr := repo.List(ctx, 1, 10, 0, "")
 	if xErr != nil {
 		t.Fatalf("List failed: %v", xErr)
 	}
diff --git a/resources/lpw/schema/v1.1.json b/resources/lpw/schema/v1.1.json
index 8672a6a..815e6a6 100644
--- a/resources/lpw/schema/v1.1.json
+++ b/resources/lpw/schema/v1.1.json
@@ -1362,6 +1362,11 @@
             "caption": {
               "type": "string",
               "maxLength": 200
+            },
+            "width": {
+              "type": "string",
+              "maxLength": 16,
+              "pattern": "^(auto|[0-9]{1,4}(px|%)?)$"
             }
           }
         },
diff --git a/web/src/components/llm/model-workbench.tsx b/web/src/components/llm/model-workbench.tsx
new file mode 100644
index 0000000..593e008
--- /dev/null
+++ b/web/src/components/llm/model-workbench.tsx
@@ -0,0 +1,504 @@
+import { useEffect, useMemo, useRef, useState } from 'react'
+import { Plus, Search, Trash2 } from 'lucide-react'
+import { Button } from '@lumina/components/ui/button'
+import { Input } from '@lumina/components/ui/input'
+import { Label } from '@lumina/components/ui/label'
+import { Badge } from '@lumina/components/ui/badge'
+import { Switch } from '@lumina/components/ui/switch'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@lumina/components/ui/select'
+import { ProviderOption } from '#/components/llm/provider-option'
+import {
+  useCreateModel,
+  useDeleteModel,
+  useModels,
+  useProviders,
+  useUpdateModel,
+} from '#/hooks/useLlmConfig'
+import { ConfirmDeleteDialog } from '#/components/confirm-delete-dialog'
+import { SkeletonTable } from '#/components/skeleton-table'
+import type { Model } from '#/lib/models/response/llm'
+import { toast } from 'sonner'
+
+export function ModelWorkbench() {
+  const { data: modelsData, isLoading: modelsLoading } = useModels()
+  const { data: providersData, isLoading: providersLoading } = useProviders()
+  const createMutation = useCreateModel()
+  const updateMutation = useUpdateModel()
+  const deleteMutation = useDeleteModel()
+
+  const rawModels = modelsData?.data?.items ?? []
+  const providers = providersData?.data?.items ?? []
+
+  // 当前选中的模型，null 表示「新建模式」
+  const [selectedId, setSelectedId] = useState<string | null>(null)
+  const [isCreating, setIsCreating] = useState(false)
+  const [searchTerm, setSearchTerm] = useState('')
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false)
+  const [modelToDelete, setModelToDelete] = useState<Model | null>(null)
+
+  // 标记是否已执行过初次装载默认选中
+  const hasInitialized = useRef(false)
+
+  // 表单状态
+  const [providerId, setProviderId] = useState('')
+  const [modelName, setModelName] = useState('')
+  const [displayName, setDisplayName] = useState('')
+  const [maxTokens, setMaxTokens] = useState('32000')
+  const [contextWindow, setContextWindow] = useState('128000')
+  const [temperature, setTemperature] = useState('0.3')
+  const [description, setDescription] = useState('')
+  const [isActive, setIsActive] = useState(true)
+
+  // 过滤后的模型列表
+  const filteredModels = useMemo(() => {
+    if (!searchTerm.trim()) return rawModels
+    const t = searchTerm.toLowerCase().trim()
+    return rawModels.filter(
+      (m) =>
+        m.model_name.toLowerCase().includes(t) ||
+        m.display_name.toLowerCase().includes(t),
+    )
+  }, [rawModels, searchTerm])
+
+  const selectedModel = useMemo(
+    () => rawModels.find((m) => m.id === selectedId) ?? null,
+    [rawModels, selectedId],
+  )
+
+  // 初始化或切换选中项时回填表单
+  useEffect(() => {
+    if (!isCreating && selectedModel) {
+      setProviderId(selectedModel.provider_id)
+      setModelName(selectedModel.model_name)
+      setDisplayName(selectedModel.display_name)
+      setMaxTokens(String(selectedModel.max_tokens))
+      setContextWindow(String(selectedModel.context_window))
+      setTemperature(String(selectedModel.temperature))
+      setDescription(selectedModel.description || '')
+      setIsActive(selectedModel.is_active)
+    } else if (isCreating) {
+      // 默认切换到新建模式，自动绑定第一个 Provider
+      setProviderId(providers[0]?.id || '')
+      setModelName('')
+      setDisplayName('')
+      setMaxTokens('32000')
+      setContextWindow('128000')
+      setTemperature('0.3')
+      setDescription('')
+      setIsActive(true)
+    }
+  }, [selectedModel, providers, isCreating])
+
+  // 仅在首次拉取到数据时默认选中第一个已有模型
+  useEffect(() => {
+    if (!hasInitialized.current && rawModels.length > 0) {
+      setSelectedId(rawModels[0].id)
+      setIsCreating(false)
+      hasInitialized.current = true
+    } else if (rawModels.length === 0 && !isCreating) {
+      setIsCreating(true)
+      setSelectedId(null)
+    }
+  }, [rawModels, isCreating])
+
+  const handleStartCreate = () => {
+    setIsCreating(true)
+    setSelectedId(null)
+    setProviderId(providers[0]?.id || '')
+    setModelName('')
+    setDisplayName('')
+    setMaxTokens('32000')
+    setContextWindow('128000')
+    setTemperature('0.3')
+    setDescription('')
+    setIsActive(true)
+  }
+
+  const handleSelectModel = (id: string) => {
+    setIsCreating(false)
+    setSelectedId(id)
+  }
+
+  const handleCancelCreate = () => {
+    setIsCreating(false)
+    if (rawModels.length > 0) {
+      setSelectedId(rawModels[0].id)
+    }
+  }
+
+  const handleSave = () => {
+    if (!providerId || !modelName.trim() || !displayName.trim()) {
+      toast.error('表单校验未通过', {
+        description: 'Provider、模型标识与显示名称为必填项',
+      })
+      return
+    }
+
+    if (isCreating) {
+      createMutation.mutate(
+        {
+          provider_id: providerId,
+          model_name: modelName.trim(),
+          display_name: displayName.trim(),
+          max_tokens: parseInt(maxTokens, 10) || 32000,
+          context_window: parseInt(contextWindow, 10) || 128000,
+          temperature: parseFloat(temperature) || 0.3,
+          description: description.trim() || '',
+        },
+        {
+          onSuccess: (res) => {
+            toast.success('模型创建成功', {
+              description: `已成功配置模型 [${displayName}]`,
+            })
+            setIsCreating(false)
+            if (res.data?.id) {
+              setSelectedId(res.data.id)
+            }
+          },
+          onError: (err) => {
+            toast.error('创建失败', { description: err.message })
+          },
+        },
+      )
+    } else if (selectedModel) {
+      updateMutation.mutate(
+        {
+          id: selectedModel.id,
+          data: {
+            provider_id: providerId,
+            model_name: modelName.trim(),
+            display_name: displayName.trim(),
+            max_tokens: parseInt(maxTokens, 10) || 32000,
+            context_window: parseInt(contextWindow, 10) || 128000,
+            temperature: parseFloat(temperature) || 0.3,
+            is_active: isActive,
+            description: description.trim(),
+          },
+        },
+        {
+          onSuccess: () => {
+            toast.success('模型已更新', { description: `配置已生效同步` })
+          },
+          onError: (err) => {
+            toast.error('更新失败', { description: err.message })
+          },
+        },
+      )
+    }
+  }
+
+  const handleDeleteClick = (e: React.MouseEvent, m: Model) => {
+    e.stopPropagation()
+    setModelToDelete(m)
+    setDeleteDialogOpen(true)
+  }
+
+  if (modelsLoading || providersLoading) {
+    return <SkeletonTable />
+  }
+
+  return (
+    <div className="grid grid-cols-1 lg:grid-cols-12 gap-5 items-start">
+      {/* ── 左侧：模型 Master 列表工作区 (占 5 列) ── */}
+      <div className="lg:col-span-5 flex flex-col gap-3">
+        {/* 顶部工具栏 */}
+        <div className="flex items-center gap-2">
+          <div className="relative flex-1">
+            <Search className="absolute left-2.5 top-2.5 size-3.5 text-sea-ink-soft" />
+            <Input
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+              placeholder="搜索模型名称或标识..."
+              className="h-8 pl-8 text-xs bg-foam"
+            />
+          </div>
+          <Button
+            size="sm"
+            onClick={handleStartCreate}
+            className={`h-8 shrink-0 text-xs gap-1.5 ${
+              isCreating
+                ? 'bg-lagoon text-foam'
+                : 'bg-primary text-primary-foreground hover:bg-primary/90'
+            }`}
+          >
+            <Plus className="size-3.5" />
+            新建模型
+          </Button>
+        </div>
+
+        {/* 模型列表项 */}
+        <div className="space-y-2 max-h-[calc(100vh-280px)] overflow-y-auto pr-1">
+          {filteredModels.length === 0 ? (
+            <div className="border border-dashed border-line p-8 text-center bg-foam text-xs text-sea-ink-soft">
+              暂无匹配的模型。点击右上角「新建模型」添加。
+            </div>
+          ) : (
+            filteredModels.map((m) => {
+              const isSelected = selectedId === m.id
+              const p = providers.find((item) => item.id === m.provider_id)
+              return (
+                <div
+                  key={m.id}
+                  onClick={() => handleSelectModel(m.id)}
+                  className={`group relative flex flex-col gap-1.5 p-3.5 border transition-all cursor-pointer ${
+                    isSelected
+                      ? 'border-lagoon bg-foam shadow-sm border-l-4'
+                      : 'border-line bg-surface hover:bg-sand/60'
+                  }`}
+                >
+                  <div className="flex items-start justify-between gap-2">
+                    <div className="flex flex-col min-w-0">
+                      <span className="text-xs font-semibold text-sea-ink truncate">
+                        {m.display_name}
+                      </span>
+                      <span className="font-mono text-[11px] text-sea-ink-soft truncate">
+                        {m.model_name}
+                      </span>
+                    </div>
+                    <div className="flex items-center gap-1.5 shrink-0">
+                      <Badge
+                        variant={m.is_active ? 'default' : 'secondary'}
+                        className="text-[10px] px-1.5 py-0"
+                      >
+                        {m.is_active ? '已启用' : '已停用'}
+                      </Badge>
+                      <button
+                        type="button"
+                        onClick={(e) => handleDeleteClick(e, m)}
+                        className="opacity-0 group-hover:opacity-100 text-sea-ink-soft hover:text-destructive transition-opacity p-0.5"
+                        title="删除模型"
+                      >
+                        <Trash2 className="size-3.5" />
+                      </button>
+                    </div>
+                  </div>
+
+                  {/* 胶囊参数行 */}
+                  <div className="flex items-center gap-2 pt-1 border-t border-dashed border-line/60 text-[10px] text-sea-ink-soft">
+                    <span className="truncate max-w-[120px] font-medium text-lagoon-deep">
+                      {p?.name || '未知 Provider'}
+                    </span>
+                    <span>•</span>
+                    <span>{m.context_window.toLocaleString()} ctx</span>
+                    <span>•</span>
+                    <span>T={m.temperature}</span>
+                  </div>
+                </div>
+              )
+            })
+          )}
+        </div>
+      </div>
+
+      {/* ── 右侧：专属编辑与创建工作台 (占 7 列) ── */}
+      <div className="lg:col-span-7 border border-line bg-foam p-5 shadow-sm">
+        {/* 头部标题区 */}
+        <div className="flex items-center justify-between pb-4 mb-5 border-b border-line">
+          <div className="flex items-center gap-2">
+            <span className="size-2 rotate-45 bg-lagoon" />
+            <h3 className="text-sm font-semibold text-sea-ink">
+              {isCreating
+                ? '新建 LLM 模型配置'
+                : `配置模型 · ${selectedModel?.display_name || ''}`}
+            </h3>
+          </div>
+          <div className="flex items-center gap-2">
+            {isCreating && rawModels.length > 0 && (
+              <Button
+                type="button"
+                variant="outline"
+                size="sm"
+                onClick={handleCancelCreate}
+                className="h-7 text-xs rounded-none border-line text-sea-ink hover:bg-chip-bg"
+              >
+                取消新建
+              </Button>
+            )}
+            <span className="font-mono text-[10px] text-lagoon-deep bg-sand px-2 py-0.5 border border-line">
+              {isCreating ? 'CREATE' : 'EDIT'}
+            </span>
+          </div>
+        </div>
+
+        {/* 表单主体 */}
+        <div className="space-y-4">
+          <div className="grid gap-1.5">
+            <Label className="text-xs font-semibold text-sea-ink">
+              归属 Provider <span className="text-destructive">*</span>
+            </Label>
+            <Select value={providerId} onValueChange={setProviderId}>
+              <SelectTrigger className="w-full bg-sand/30">
+                <SelectValue placeholder="选择所属供应方" />
+              </SelectTrigger>
+              <SelectContent>
+                {providers.map((p) => (
+                  <SelectItem key={p.id} value={p.id}>
+                    <ProviderOption provider={p} />
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+
+          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+            <div className="grid gap-1.5">
+              <Label className="text-xs font-semibold text-sea-ink">
+                模型标识 (model_name){' '}
+                <span className="text-destructive">*</span>
+              </Label>
+              <Input
+                value={modelName}
+                onChange={(e) => setModelName(e.target.value)}
+                placeholder="如 gpt-4o / claude-3-5-sonnet"
+                className="bg-sand/30 font-mono text-xs"
+              />
+            </div>
+            <div className="grid gap-1.5">
+              <Label className="text-xs font-semibold text-sea-ink">
+                显示名称 (display_name){' '}
+                <span className="text-destructive">*</span>
+              </Label>
+              <Input
+                value={displayName}
+                onChange={(e) => setDisplayName(e.target.value)}
+                placeholder="如 GPT-4o Omni / Claude 3.5 Sonnet"
+                className="bg-sand/30 text-xs"
+              />
+            </div>
+          </div>
+
+          <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
+            <div className="grid gap-1.5">
+              <Label className="text-xs font-semibold text-sea-ink">
+                最大输出 Tokens
+              </Label>
+              <Input
+                type="number"
+                value={maxTokens}
+                onChange={(e) => setMaxTokens(e.target.value)}
+                className="bg-sand/30 font-mono text-xs"
+              />
+            </div>
+            <div className="grid gap-1.5">
+              <Label className="text-xs font-semibold text-sea-ink">
+                上下文窗口 (Context)
+              </Label>
+              <Input
+                type="number"
+                value={contextWindow}
+                onChange={(e) => setContextWindow(e.target.value)}
+                className="bg-sand/30 font-mono text-xs"
+              />
+            </div>
+            <div className="grid gap-1.5">
+              <Label className="text-xs font-semibold text-sea-ink">
+                温度 (Temperature)
+              </Label>
+              <Input
+                type="number"
+                step="0.1"
+                min="0"
+                max="2"
+                value={temperature}
+                onChange={(e) => setTemperature(e.target.value)}
+                className="bg-sand/30 font-mono text-xs"
+              />
+            </div>
+          </div>
+
+          <div className="grid gap-1.5">
+            <Label className="text-xs font-semibold text-sea-ink">
+              模型描述 (可选)
+            </Label>
+            <textarea
+              value={description}
+              onChange={(e) => setDescription(e.target.value)}
+              placeholder="输入模型的适用场景或配置说明"
+              className="flex min-h-[64px] w-full border border-input bg-sand/30 px-3 py-2 text-xs ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+            />
+          </div>
+
+          {!isCreating ? (
+            <div className="flex items-center justify-between border-t border-line pt-3">
+              <div className="flex flex-col">
+                <span className="text-xs font-semibold text-sea-ink">
+                  模型激活状态
+                </span>
+                <span className="text-[11px] text-sea-ink-soft">
+                  停用后，Agent 将无法调度该模型
+                </span>
+              </div>
+              <Switch checked={isActive} onCheckedChange={setIsActive} />
+            </div>
+          ) : null}
+
+          {/* 底部专属操作栏 */}
+          <div className="flex items-center justify-between border-t border-line pt-4 mt-6">
+            <div className="text-[11px] text-sea-ink-soft">
+              {isCreating
+                ? '新模型将在保存后自动绑定到当前系统目录'
+                : `正在编辑 ID: ${selectedModel?.id || ''}`}
+            </div>
+            <div className="flex items-center gap-2">
+              {!isCreating ? (
+                <Button
+                  type="button"
+                  variant="outline"
+                  size="sm"
+                  onClick={handleStartCreate}
+                  className="text-xs"
+                >
+                  放弃编辑 / 新建
+                </Button>
+              ) : null}
+              <Button
+                size="sm"
+                onClick={handleSave}
+                disabled={
+                  !providerId ||
+                  !modelName.trim() ||
+                  !displayName.trim() ||
+                  createMutation.isPending ||
+                  updateMutation.isPending
+                }
+                className="bg-primary text-primary-foreground hover:bg-primary/90 text-xs px-4"
+              >
+                {createMutation.isPending || updateMutation.isPending
+                  ? '保存中...'
+                  : isCreating
+                    ? '立即创建模型'
+                    : '保存模型配置'}
+              </Button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* 删除确认对话框（仅限破坏性删除） */}
+      <ConfirmDeleteDialog
+        open={deleteDialogOpen}
+        onOpenChange={setDeleteDialogOpen}
+        title="删除模型"
+        description={`确定要删除模型「${modelToDelete?.display_name ?? ''}」吗？此操作不可撤销。`}
+        onConfirm={() => {
+          if (!modelToDelete) return
+          deleteMutation.mutate(modelToDelete.id, {
+            onSuccess: () => {
+              setDeleteDialogOpen(false)
+              if (selectedId === modelToDelete.id) {
+                setSelectedId(null)
+              }
+            },
+          })
+        }}
+        isPending={deleteMutation.isPending}
+      />
+    </div>
+  )
+}
diff --git a/web/src/components/llm/provider-workbench.tsx b/web/src/components/llm/provider-workbench.tsx
new file mode 100644
index 0000000..09f830b
--- /dev/null
+++ b/web/src/components/llm/provider-workbench.tsx
@@ -0,0 +1,447 @@
+import { useEffect, useMemo, useRef, useState } from 'react'
+import { Plus, Search, Trash2 } from 'lucide-react'
+import { Button } from '@lumina/components/ui/button'
+import { Input } from '@lumina/components/ui/input'
+import { Label } from '@lumina/components/ui/label'
+import { Badge } from '@lumina/components/ui/badge'
+import { Switch } from '@lumina/components/ui/switch'
+import {
+  useCreateProvider,
+  useDeleteProvider,
+  useProviders,
+  useUpdateProvider,
+} from '#/hooks/useLlmConfig'
+import { ConfirmDeleteDialog } from '#/components/confirm-delete-dialog'
+import { SkeletonTable } from '#/components/skeleton-table'
+import type { Provider } from '#/lib/models/response/llm'
+import { toast } from 'sonner'
+
+export function ProviderWorkbench() {
+  const { data: providersData, isLoading: providersLoading } = useProviders()
+  const createMutation = useCreateProvider()
+  const updateMutation = useUpdateProvider()
+  const deleteMutation = useDeleteProvider()
+
+  const rawProviders = providersData?.data?.items ?? []
+
+  const [selectedId, setSelectedId] = useState<string | null>(null)
+  const [isCreating, setIsCreating] = useState(false)
+  const [searchTerm, setSearchTerm] = useState('')
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false)
+  const [providerToDelete, setProviderToDelete] = useState<Provider | null>(
+    null,
+  )
+
+  // 标记是否已执行过初次装载默认选中
+  const hasInitialized = useRef(false)
+
+  // 表单状态
+  const [name, setName] = useState('')
+  const [protocol, setProtocol] = useState('openai')
+  const [baseUrl, setBaseUrl] = useState('')
+  const [apiKey, setApiKey] = useState('')
+  const [description, setDescription] = useState('')
+  const [isActive, setIsActive] = useState(true)
+
+  const filteredProviders = useMemo(() => {
+    if (!searchTerm.trim()) return rawProviders
+    const t = searchTerm.toLowerCase().trim()
+    return rawProviders.filter(
+      (p) =>
+        p.name.toLowerCase().includes(t) ||
+        p.protocol.toLowerCase().includes(t),
+    )
+  }, [rawProviders, searchTerm])
+
+  const selectedProvider = useMemo(
+    () => rawProviders.find((p) => p.id === selectedId) ?? null,
+    [rawProviders, selectedId],
+  )
+
+  useEffect(() => {
+    if (!isCreating && selectedProvider) {
+      setName(selectedProvider.name)
+      setProtocol(selectedProvider.protocol)
+      setBaseUrl(selectedProvider.base_url || '')
+      setApiKey('') // 密钥不回显，留空表示不修改
+      setDescription(selectedProvider.description || '')
+      setIsActive(selectedProvider.is_active)
+    } else if (isCreating) {
+      setName('')
+      setProtocol('openai')
+      setBaseUrl('https://api.openai.com/v1')
+      setApiKey('')
+      setDescription('')
+      setIsActive(true)
+    }
+  }, [selectedProvider, isCreating])
+
+  // 仅在首次拉取到数据时默认选中第一个
+  useEffect(() => {
+    if (!hasInitialized.current && rawProviders.length > 0) {
+      setSelectedId(rawProviders[0].id)
+      setIsCreating(false)
+      hasInitialized.current = true
+    } else if (rawProviders.length === 0 && !isCreating) {
+      setIsCreating(true)
+      setSelectedId(null)
+    }
+  }, [rawProviders, isCreating])
+
+  const handleStartCreate = () => {
+    setIsCreating(true)
+    setSelectedId(null)
+    setName('')
+    setProtocol('openai')
+    setBaseUrl('https://api.openai.com/v1')
+    setApiKey('')
+    setDescription('')
+    setIsActive(true)
+  }
+
+  const handleSelectProvider = (id: string) => {
+    setIsCreating(false)
+    setSelectedId(id)
+  }
+
+  const handleCancelCreate = () => {
+    setIsCreating(false)
+    if (rawProviders.length > 0) {
+      setSelectedId(rawProviders[0].id)
+    }
+  }
+
+  const handleSave = () => {
+    if (!name.trim() || !protocol.trim()) {
+      toast.error('表单校验未通过', { description: '名称与协议为必填项' })
+      return
+    }
+
+    if (isCreating) {
+      if (!apiKey.trim()) {
+        toast.error('表单校验未通过', {
+          description: '创建 Provider 时 API 密钥为必填项',
+        })
+        return
+      }
+      createMutation.mutate(
+        {
+          name: name.trim(),
+          protocol: protocol.trim(),
+          base_url: baseUrl.trim(),
+          api_key: apiKey.trim(),
+          description: description.trim(),
+        },
+        {
+          onSuccess: (res) => {
+            toast.success('Provider 创建成功', {
+              description: `已成功接入 ${name}`,
+            })
+            setIsCreating(false)
+            if (res.data?.id) {
+              setSelectedId(res.data.id)
+            }
+          },
+          onError: (err) => {
+            toast.error('创建失败', { description: err.message })
+          },
+        },
+      )
+    } else if (selectedProvider) {
+      updateMutation.mutate(
+        {
+          id: selectedProvider.id,
+          data: {
+            name: name.trim(),
+            protocol: protocol.trim(),
+            base_url: baseUrl.trim() || undefined,
+            api_key: apiKey.trim() || undefined,
+            is_active: isActive,
+            description: description.trim() || undefined,
+          },
+        },
+        {
+          onSuccess: () => {
+            toast.success('Provider 已更新', { description: '配置已生效保存' })
+          },
+          onError: (err) => {
+            toast.error('更新失败', { description: err.message })
+          },
+        },
+      )
+    }
+  }
+
+  const handleDeleteClick = (e: React.MouseEvent, p: Provider) => {
+    e.stopPropagation()
+    setProviderToDelete(p)
+    setDeleteDialogOpen(true)
+  }
+
+  if (providersLoading) {
+    return <SkeletonTable />
+  }
+
+  return (
+    <div className="grid grid-cols-1 lg:grid-cols-12 gap-5 items-start">
+      {/* ── 左侧：Provider Master 列表 (占 5 列) ── */}
+      <div className="lg:col-span-5 flex flex-col gap-3">
+        <div className="flex items-center gap-2">
+          <div className="relative flex-1">
+            <Search className="absolute left-2.5 top-2.5 size-3.5 text-sea-ink-soft" />
+            <Input
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+              placeholder="搜索供应方名称或协议..."
+              className="h-8 pl-8 text-xs bg-foam"
+            />
+          </div>
+          <Button
+            size="sm"
+            onClick={handleStartCreate}
+            className={`h-8 shrink-0 text-xs gap-1.5 ${
+              isCreating
+                ? 'bg-lagoon text-foam'
+                : 'bg-primary text-primary-foreground hover:bg-primary/90'
+            }`}
+          >
+            <Plus className="size-3.5" />
+            新建 Provider
+          </Button>
+        </div>
+
+        <div className="space-y-2 max-h-[calc(100vh-280px)] overflow-y-auto pr-1">
+          {filteredProviders.length === 0 ? (
+            <div className="border border-dashed border-line p-8 text-center bg-foam text-xs text-sea-ink-soft">
+              暂无匹配的 Provider。点击右上角新建。
+            </div>
+          ) : (
+            filteredProviders.map((p) => {
+              const isSelected = selectedId === p.id
+              return (
+                <div
+                  key={p.id}
+                  onClick={() => handleSelectProvider(p.id)}
+                  className={`group relative flex flex-col gap-1.5 p-3.5 border transition-all cursor-pointer ${
+                    isSelected
+                      ? 'border-lagoon bg-foam shadow-sm border-l-4'
+                      : 'border-line bg-surface hover:bg-sand/60'
+                  }`}
+                >
+                  <div className="flex items-start justify-between gap-2">
+                    <div className="flex flex-col min-w-0">
+                      <span className="text-xs font-semibold text-sea-ink truncate">
+                        {p.name}
+                      </span>
+                      <span className="font-mono text-[11px] text-sea-ink-soft truncate">
+                        {p.base_url || '默认 BaseURL'}
+                      </span>
+                    </div>
+                    <div className="flex items-center gap-1.5 shrink-0">
+                      <Badge
+                        variant={p.is_active ? 'default' : 'secondary'}
+                        className="text-[10px] px-1.5 py-0"
+                      >
+                        {p.is_active ? '启用' : '停用'}
+                      </Badge>
+                      <button
+                        type="button"
+                        onClick={(e) => handleDeleteClick(e, p)}
+                        className="opacity-0 group-hover:opacity-100 text-sea-ink-soft hover:text-destructive transition-opacity p-0.5"
+                        title="删除 Provider"
+                      >
+                        <Trash2 className="size-3.5" />
+                      </button>
+                    </div>
+                  </div>
+
+                  <div className="flex items-center gap-2 pt-1 border-t border-dashed border-line/60 text-[10px] text-sea-ink-soft font-mono">
+                    <span className="font-semibold text-lagoon-deep uppercase">
+                      {p.protocol}
+                    </span>
+                    <span>•</span>
+                    <span>{p.has_key ? '已加密存盘' : '无密钥'}</span>
+                  </div>
+                </div>
+              )
+            })
+          )}
+        </div>
+      </div>
+
+      {/* ── 右侧：专属编辑与创建工作台 (占 7 列) ── */}
+      <div className="lg:col-span-7 border border-line bg-foam p-5 shadow-sm">
+        <div className="flex items-center justify-between pb-4 mb-5 border-b border-line">
+          <div className="flex items-center gap-2">
+            <span className="size-2 rotate-45 bg-lagoon" />
+            <h3 className="text-sm font-semibold text-sea-ink">
+              {isCreating
+                ? '接入新的 LLM 供应方'
+                : `配置供应方 · ${selectedProvider?.name || ''}`}
+            </h3>
+          </div>
+          <div className="flex items-center gap-2">
+            {isCreating && rawProviders.length > 0 && (
+              <Button
+                type="button"
+                variant="outline"
+                size="sm"
+                onClick={handleCancelCreate}
+                className="h-7 text-xs rounded-none border-line text-sea-ink hover:bg-chip-bg"
+              >
+                取消新建
+              </Button>
+            )}
+            <span className="font-mono text-[10px] text-lagoon-deep bg-sand px-2 py-0.5 border border-line">
+              {isCreating ? 'CREATE' : 'EDIT'}
+            </span>
+          </div>
+        </div>
+
+        <div className="space-y-4">
+          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+            <div className="grid gap-1.5">
+              <Label className="text-xs font-semibold text-sea-ink">
+                供应方名称 <span className="text-destructive">*</span>
+              </Label>
+              <Input
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+                placeholder="如 OpenAI / Anthropic / DeepSeek"
+                className="bg-sand/30 text-xs"
+              />
+            </div>
+            <div className="grid gap-1.5">
+              <Label className="text-xs font-semibold text-sea-ink">
+                接口协议 (Protocol) <span className="text-destructive">*</span>
+              </Label>
+              <Input
+                value={protocol}
+                onChange={(e) => setProtocol(e.target.value)}
+                placeholder="如 openai / anthropic / ollama"
+                className="bg-sand/30 font-mono text-xs"
+              />
+            </div>
+          </div>
+
+          <div className="grid gap-1.5">
+            <Label className="text-xs font-semibold text-sea-ink">
+              Base URL 端点
+            </Label>
+            <Input
+              value={baseUrl}
+              onChange={(e) => setBaseUrl(e.target.value)}
+              placeholder="如 https://api.openai.com/v1"
+              className="bg-sand/30 font-mono text-xs"
+            />
+          </div>
+
+          <div className="grid gap-1.5">
+            <Label className="text-xs font-semibold text-sea-ink">
+              API Key (密钥){' '}
+              {isCreating ? <span className="text-destructive">*</span> : null}
+            </Label>
+            <Input
+              type="password"
+              value={apiKey}
+              onChange={(e) => setApiKey(e.target.value)}
+              placeholder={
+                isCreating
+                  ? '输入 API Key（将经 AES-256-GCM 加密落库）'
+                  : '留空表示保持现有加密密钥不变'
+              }
+              className="bg-sand/30 font-mono text-xs"
+            />
+            <p className="text-[11px] text-sea-ink-soft">
+              密钥将经由系统 AES-256-GCM 加密存储，绝不以明文暴露。
+            </p>
+          </div>
+
+          <div className="grid gap-1.5">
+            <Label className="text-xs font-semibold text-sea-ink">
+              描述 (可选)
+            </Label>
+            <textarea
+              value={description}
+              onChange={(e) => setDescription(e.target.value)}
+              placeholder="输入供应方的相关说明"
+              className="flex min-h-[64px] w-full border border-input bg-sand/30 px-3 py-2 text-xs ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+            />
+          </div>
+
+          {!isCreating ? (
+            <div className="flex items-center justify-between border-t border-line pt-3">
+              <div className="flex flex-col">
+                <span className="text-xs font-semibold text-sea-ink">
+                  供应方激活状态
+                </span>
+                <span className="text-[11px] text-sea-ink-soft">
+                  停用后，其下所有模型将自动处于不可调度状态
+                </span>
+              </div>
+              <Switch checked={isActive} onCheckedChange={setIsActive} />
+            </div>
+          ) : null}
+
+          <div className="flex items-center justify-between border-t border-line pt-4 mt-6">
+            <div className="text-[11px] text-sea-ink-soft">
+              {isCreating
+                ? '创建后可立即为其添加专属模型'
+                : `ID: ${selectedProvider?.id || ''}`}
+            </div>
+            <div className="flex items-center gap-2">
+              {!isCreating ? (
+                <Button
+                  type="button"
+                  variant="outline"
+                  size="sm"
+                  onClick={handleStartCreate}
+                  className="text-xs"
+                >
+                  放弃编辑 / 新建
+                </Button>
+              ) : null}
+              <Button
+                size="sm"
+                onClick={handleSave}
+                disabled={
+                  !name.trim() ||
+                  !protocol.trim() ||
+                  (isCreating && !apiKey.trim()) ||
+                  createMutation.isPending ||
+                  updateMutation.isPending
+                }
+                className="bg-primary text-primary-foreground hover:bg-primary/90 text-xs px-4"
+              >
+                {createMutation.isPending || updateMutation.isPending
+                  ? '保存中...'
+                  : isCreating
+                    ? '立即创建 Provider'
+                    : '保存配置'}
+              </Button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <ConfirmDeleteDialog
+        open={deleteDialogOpen}
+        onOpenChange={setDeleteDialogOpen}
+        title="删除 Provider"
+        description={`确定要删除 Provider「${providerToDelete?.name ?? ''}」吗？此操作不可撤销。`}
+        onConfirm={() => {
+          if (!providerToDelete) return
+          deleteMutation.mutate(providerToDelete.id, {
+            onSuccess: () => {
+              setDeleteDialogOpen(false)
+              if (selectedId === providerToDelete.id) {
+                setSelectedId(null)
+              }
+            },
+          })
+        }}
+        isPending={deleteMutation.isPending}
+      />
+    </div>
+  )
+}
diff --git a/web/src/components/pages/page-detail-sheet.tsx b/web/src/components/pages/page-detail-sheet.tsx
new file mode 100644
index 0000000..d895b68
--- /dev/null
+++ b/web/src/components/pages/page-detail-sheet.tsx
@@ -0,0 +1,497 @@
+import { useEffect, useState } from 'react'
+import {
+  Check,
+  Copy,
+  ExternalLink,
+  GitFork,
+  History,
+  Lock,
+  Shield,
+  Unlock,
+} from 'lucide-react'
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetDescription,
+} from '@lumina/components/ui/sheet'
+import { Button } from '@lumina/components/ui/button'
+import { Input } from '@lumina/components/ui/input'
+import { Label } from '@lumina/components/ui/label'
+import {
+  useForkPage,
+  usePageVersions,
+  useSwitchActiveVersion,
+  useUpdateAccessPolicy,
+} from '#/hooks/usePages'
+import { formatDateTime } from '#/lib/format-date'
+import type { PageItem, PageVersionItem } from '#/lib/models/response/pages'
+import { toast } from 'sonner'
+
+interface PageDetailSheetProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  item: PageItem | null
+  initialMode?: 'view' | 'policy'
+}
+
+export function PageDetailSheet({
+  open,
+  onOpenChange,
+  item,
+  initialMode = 'view',
+}: PageDetailSheetProps) {
+  const [copiedSlug, setCopiedSlug] = useState(false)
+  const [currentItem, setCurrentItem] = useState<PageItem | null>(item)
+  const [isEditingPolicy, setIsEditingPolicy] = useState(
+    initialMode === 'policy',
+  )
+  const [accessMode, setAccessMode] = useState<'public' | 'password'>('public')
+  const [password, setPassword] = useState('')
+
+  const { data: versionsData, isLoading: versionsLoading } = usePageVersions(
+    currentItem?.id,
+  )
+  const versions: PageVersionItem[] = versionsData?.data?.items ?? []
+
+  const updatePolicy = useUpdateAccessPolicy()
+  const switchVersion = useSwitchActiveVersion()
+  const forkMutation = useForkPage()
+
+  useEffect(() => {
+    if (open && item) {
+      setCurrentItem(item)
+      setIsEditingPolicy(initialMode === 'policy')
+      setAccessMode(item.access_mode)
+      setPassword('')
+      setCopiedSlug(false)
+    }
+  }, [open, item, initialMode])
+
+  if (!currentItem) return null
+
+  const isPasswordProtected = currentItem.access_mode === 'password'
+  const isPublished = currentItem.status === 'published'
+  const publicUrl = `/pages/${currentItem.project_name || currentItem.project_id}/${currentItem.slug}`
+
+  const handleCopyUrl = () => {
+    const full = `${window.location.origin}${publicUrl}`
+    void navigator.clipboard.writeText(full)
+    setCopiedSlug(true)
+    setTimeout(() => setCopiedSlug(false), 2000)
+    toast.success('页面公开访问地址已复制')
+  }
+
+  const handleSavePolicy = () => {
+    if (accessMode === 'password' && !password.trim()) {
+      toast.error('表单校验未通过', {
+        description: '启用密码门时必须输入有效口令',
+      })
+      return
+    }
+    updatePolicy.mutate(
+      {
+        id: currentItem.id,
+        access_mode: accessMode,
+        password: accessMode === 'password' ? password : undefined,
+      },
+      {
+        onSuccess: () => {
+          setIsEditingPolicy(false)
+          setPassword('')
+          setCurrentItem((prev) =>
+            prev ? { ...prev, access_mode: accessMode } : null,
+          )
+        },
+      },
+    )
+  }
+
+  const handleSwitchVersion = (versionId: string) => {
+    switchVersion.mutate(
+      {
+        id: currentItem.id,
+        versionId,
+      },
+      {
+        onSuccess: () => {
+          setCurrentItem((prev) =>
+            prev ? { ...prev, latest_version_id: versionId } : null,
+          )
+        },
+      },
+    )
+  }
+
+  const handleFork = (versionId?: string) => {
+    forkMutation.mutate(
+      { id: currentItem.id, versionId },
+      {
+        onSuccess: (res) => {
+          toast.success('已从该快照派生新 Preview 沙盒会话')
+          const d = res.data
+          const url =
+            d?.preview_url ||
+            (d?.session.hash ? `/preview/${d.session.hash}/index.html` : null)
+          if (url) {
+            window.open(url, '_blank')
+          }
+        },
+      },
+    )
+  }
+
+  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-xl flex flex-col"
+      >
+        <SheetHeader className="border-b border-line bg-surface-strong px-6 py-5 text-left">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-2">
+              <span className="size-2 rotate-45 bg-lagoon" />
+              <SheetTitle className="text-base font-semibold text-sea-ink">
+                {isEditingPolicy ? '配置访问策略' : '即时页面全景资产'}
+              </SheetTitle>
+            </div>
+            <span className="font-mono text-[10px] text-lagoon-deep bg-sand px-2 py-0.5 border border-line">
+              {isEditingPolicy ? 'POLICY' : 'PAGE'}
+            </span>
+          </div>
+          <SheetDescription className="text-xs text-sea-ink-soft">
+            {isEditingPolicy
+              ? '配置不可变页面快照的对外访问权限与密码门保护'
+              : '管理生效版本指针、访问策略、查看快照版本时间线与 Fork 派生'}
+          </SheetDescription>
+        </SheetHeader>
+
+        <div className="flex-1 overflow-y-auto px-6 py-5 space-y-5 text-[13px]">
+          {isEditingPolicy ? (
+            /* ── 策略编辑模式 ── */
+            <div className="space-y-4">
+              <div className="border border-line bg-sand/40 p-3 space-y-2 text-xs">
+                <span className="font-semibold text-sea-ink block">
+                  密码门访问策略说明：
+                </span>
+                <p className="text-sea-ink-soft leading-relaxed">
+                  密码门策略通过安全 HMAC Cookie
+                  签发会话凭据。启用密码保护后，外部访客需在门锁页输入口令方可访问。
+                </p>
+              </div>
+
+              <div className="space-y-2">
+                <Label className="text-xs font-semibold text-sea-ink">
+                  访问安全模式 <span className="text-destructive">*</span>
+                </Label>
+                <div className="grid grid-cols-2 gap-3">
+                  <div
+                    onClick={() => setAccessMode('public')}
+                    className={`cursor-pointer border p-3 flex flex-col gap-1 transition-colors ${
+                      accessMode === 'public'
+                        ? 'border-lagoon bg-foam shadow-sm'
+                        : 'border-line bg-surface hover:bg-sand/60'
+                    }`}
+                  >
+                    <div className="flex items-center gap-1.5 font-semibold text-xs text-sea-ink">
+                      <Unlock className="size-3.5 text-lagoon" />
+                      <span>公开直出</span>
+                    </div>
+                    <span className="text-[11px] text-sea-ink-soft">
+                      任何访客均可自由直接访问
+                    </span>
+                  </div>
+
+                  <div
+                    onClick={() => setAccessMode('password')}
+                    className={`cursor-pointer border p-3 flex flex-col gap-1 transition-colors ${
+                      accessMode === 'password'
+                        ? 'border-lagoon bg-foam shadow-sm'
+                        : 'border-line bg-surface hover:bg-sand/60'
+                    }`}
+                  >
+                    <div className="flex items-center gap-1.5 font-semibold text-xs text-sea-ink">
+                      <Lock className="size-3.5 text-lagoon" />
+                      <span>密码保护门</span>
+                    </div>
+                    <span className="text-[11px] text-sea-ink-soft">
+                      需输入指定访问口令解锁
+                    </span>
+                  </div>
+                </div>
+              </div>
+
+              {accessMode === 'password' && (
+                <div className="space-y-1.5">
+                  <Label className="text-xs font-semibold text-sea-ink">
+                    设置访问口令 <span className="text-destructive">*</span>
+                  </Label>
+                  <Input
+                    type="password"
+                    value={password}
+                    onChange={(e) => setPassword(e.target.value)}
+                    placeholder="输入新的安全访问口令..."
+                    className="bg-sand/40 text-xs font-mono"
+                  />
+                  <p className="text-[11px] text-sea-ink-soft">
+                    保存后立即生效并使此前签发的过期会话凭据失效。
+                  </p>
+                </div>
+              )}
+            </div>
+          ) : (
+            /* ── 查看全景模式 ── */
+            <>
+              {/* Slug 标识与状态 */}
+              <div className="flex flex-col gap-1.5 border-b border-dashed border-line pb-4">
+                <div className="flex items-center justify-between">
+                  <span className="text-[11px] font-bold uppercase tracking-wider text-lagoon-deep">
+                    页面 Slug 标识与状态
+                  </span>
+                  <div className="flex items-center gap-1.5">
+                    <span
+                      className={`font-mono text-[10px] px-1.5 py-0.5 border ${
+                        isPublished
+                          ? 'border-chip-line bg-lagoon/10 text-lagoon-deep font-semibold'
+                          : 'border-line bg-chip-bg text-sea-ink-soft'
+                      }`}
+                    >
+                      {isPublished ? '已上线' : '已归档'}
+                    </span>
+                    <span
+                      className={`font-mono text-[10px] px-1.5 py-0.5 border ${
+                        isPasswordProtected
+                          ? 'border-destructive/30 bg-destructive/10 text-destructive'
+                          : 'border-line bg-sand text-sea-ink-soft'
+                      }`}
+                    >
+                      {isPasswordProtected ? '密码保护门' : '公开直出'}
+                    </span>
+                  </div>
+                </div>
+                <div className="flex items-center justify-between bg-sand border border-line p-2 mt-1">
+                  <span className="font-mono text-xs text-sea-ink select-all">
+                    {publicUrl}
+                  </span>
+                  <button
+                    type="button"
+                    onClick={handleCopyUrl}
+                    className="inline-flex items-center gap-1 text-[11px] text-sea-ink-soft hover:text-lagoon transition-colors"
+                    title="复制访问链接"
+                  >
+                    {copiedSlug ? (
+                      <>
+                        <Check className="size-3 text-lagoon" />
+                        <span>已复制</span>
+                      </>
+                    ) : (
+                      <>
+                        <Copy className="size-3" />
+                        <span>复制</span>
+                      </>
+                    )}
+                  </button>
+                </div>
+              </div>
+
+              {/* 归属项目与访问策略 */}
+              <div className="grid grid-cols-2 gap-3 border-b border-dashed border-line pb-4">
+                <div className="bg-sand border border-line p-2.5">
+                  <span className="text-[10px] text-sea-ink-soft uppercase font-bold block mb-1">
+                    所属项目
+                  </span>
+                  <span className="font-semibold text-xs text-sea-ink truncate block">
+                    {currentItem.project_name || '未关联项目'}
+                  </span>
+                </div>
+                <div className="bg-sand border border-line p-2.5">
+                  <span className="text-[10px] text-sea-ink-soft uppercase font-bold block mb-1">
+                    线上版本 ID
+                  </span>
+                  <span className="font-mono text-xs text-lagoon-deep font-semibold truncate block">
+                    {currentItem.latest_version_id
+                      ? currentItem.latest_version_id.slice(0, 12)
+                      : '无版本'}
+                  </span>
+                </div>
+              </div>
+
+              {/* 版本快照历史时间线 */}
+              <div className="space-y-3 border-b border-dashed border-line pb-4">
+                <div className="flex items-center justify-between">
+                  <div className="flex items-center gap-1.5">
+                    <History className="size-3.5 text-lagoon" />
+                    <span className="text-[11px] font-bold uppercase tracking-wider text-lagoon-deep">
+                      不可变版本快照历史 ({versions.length})
+                    </span>
+                  </div>
+                  <span className="text-[11px] text-sea-ink-soft">
+                    支持一键切换生效指针
+                  </span>
+                </div>
+
+                {versionsLoading ? (
+                  <div className="text-center py-6 text-xs text-sea-ink-soft">
+                    加载版本时间线中...
+                  </div>
+                ) : versions.length === 0 ? (
+                  <div className="border border-dashed border-line p-4 text-center text-xs text-sea-ink-soft">
+                    暂无历史版本快照
+                  </div>
+                ) : (
+                  <div className="space-y-2 max-h-56 overflow-y-auto pr-1">
+                    {versions.map((ver) => {
+                      const isCurrentActive =
+                        currentItem.latest_version_id === ver.id
+                      return (
+                        <div
+                          key={ver.id}
+                          className={`p-3 border flex flex-col gap-1.5 transition-colors ${
+                            isCurrentActive
+                              ? 'border-lagoon bg-sand/50 shadow-sm'
+                              : 'border-line bg-surface hover:bg-sand/30'
+                          }`}
+                        >
+                          <div className="flex items-center justify-between">
+                            <div className="flex items-center gap-2">
+                              <span className="font-mono text-xs font-semibold text-sea-ink">
+                                {ver.version}
+                              </span>
+                              {isCurrentActive && (
+                                <span className="font-mono text-[9.5px] px-1.5 py-0.2 bg-lagoon text-foam font-bold">
+                                  CURRENT ACTIVE
+                                </span>
+                              )}
+                            </div>
+                            <span className="font-mono text-[10px] text-sea-ink-soft">
+                              {formatDateTime(ver.created_at)}
+                            </span>
+                          </div>
+
+                          {ver.changelog && (
+                            <p className="text-xs text-sea-ink-soft line-clamp-1">
+                              {ver.changelog}
+                            </p>
+                          )}
+
+                          <div className="flex items-center justify-between pt-1 border-t border-dashed border-line/60">
+                            <span className="font-mono text-[10px] text-sea-ink-soft">
+                              {ver.file_count} 个静态文件
+                            </span>
+                            <div className="flex items-center gap-2">
+                              <button
+                                type="button"
+                                onClick={() => handleFork(ver.id)}
+                                className="inline-flex items-center gap-1 text-[11px] text-sea-ink-soft hover:text-lagoon transition-colors"
+                                title="从该快照派生 Preview 沙盒"
+                              >
+                                <GitFork className="size-3" />
+                                <span>Fork</span>
+                              </button>
+                              {!isCurrentActive && (
+                                <button
+                                  type="button"
+                                  onClick={() => handleSwitchVersion(ver.id)}
+                                  disabled={switchVersion.isPending}
+                                  className="text-[11px] text-lagoon-deep font-semibold hover:underline"
+                                >
+                                  设为生效
+                                </button>
+                              )}
+                            </div>
+                          </div>
+                        </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">
+                    {currentItem.id}
+                  </span>
+                </div>
+                <div className="flex justify-between py-1 border-b border-line">
+                  <span>创建时间</span>
+                  <span className="font-mono text-sea-ink">
+                    {formatDateTime(currentItem.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(currentItem.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">
+          {isEditingPolicy ? (
+            <>
+              <Button
+                type="button"
+                variant="outline"
+                className="rounded-none border-line text-sea-ink hover:bg-chip-bg flex-1"
+                onClick={() => setIsEditingPolicy(false)}
+                disabled={updatePolicy.isPending}
+              >
+                取消
+              </Button>
+              <Button
+                type="button"
+                className="rounded-none bg-primary text-primary-foreground hover:bg-primary/90 flex-1"
+                onClick={handleSavePolicy}
+                disabled={
+                  updatePolicy.isPending ||
+                  (accessMode === 'password' && !password.trim())
+                }
+              >
+                {updatePolicy.isPending ? '保存中...' : '保存策略'}
+              </Button>
+            </>
+          ) : (
+            <>
+              <Button
+                type="button"
+                variant="outline"
+                className="rounded-none border-line text-sea-ink hover:bg-chip-bg flex-1"
+                onClick={() => setIsEditingPolicy(true)}
+              >
+                <Shield className="mr-1.5 size-3.5 text-lagoon" />
+                调整访问策略
+              </Button>
+              {isPublished ? (
+                <Button
+                  type="button"
+                  className="rounded-none bg-lagoon text-foam hover:bg-lagoon-deep flex-1"
+                  onClick={() => window.open(publicUrl, '_blank')}
+                >
+                  <span>直出访问页面</span>
+                  <ExternalLink className="ml-1.5 size-3.5" />
+                </Button>
+              ) : (
+                <Button
+                  type="button"
+                  variant="outline"
+                  disabled
+                  className="rounded-none border-line text-sea-ink-soft/60 flex-1 cursor-not-allowed"
+                >
+                  <span>页面已归档下线</span>
+                </Button>
+              )}
+            </>
+          )}
+        </div>
+      </SheetContent>
+    </Sheet>
+  )
+}
diff --git a/web/src/components/pin/pin-detail-sheet.tsx b/web/src/components/pin/pin-detail-sheet.tsx
new file mode 100644
index 0000000..ca7ea46
--- /dev/null
+++ b/web/src/components/pin/pin-detail-sheet.tsx
@@ -0,0 +1,374 @@
+import { useEffect, useState } from 'react'
+import { Check, Copy, Pencil } from 'lucide-react'
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetDescription,
+} from '@lumina/components/ui/sheet'
+import { Button } from '@lumina/components/ui/button'
+import { Label } from '@lumina/components/ui/label'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@lumina/components/ui/select'
+import { useUpdatePin } from '#/hooks/usePin'
+import { useProjectNameMap } from '#/hooks/useProject'
+import { formatDateTime } from '#/lib/format-date'
+import type { PinItem } from '#/lib/models/response/pin'
+import { toast } from 'sonner'
+
+interface PinDetailSheetProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  item: PinItem | null
+  initialMode?: 'view' | 'edit'
+}
+
+const CATEGORY_OPTIONS = [
+  { value: 'notice', label: '注意事项' },
+  { value: 'dependency', label: '依赖约束' },
+  { value: 'api_change', label: '接口变更' },
+  { value: 'other', label: '其他' },
+] as const
+
+const PRIORITY_OPTIONS = [
+  { value: 'high', label: '高优先级 (High)' },
+  { value: 'medium', label: '中优先级 (Medium)' },
+  { value: 'low', label: '低优先级 (Low)' },
+] as const
+
+const categoryLabels: Record<string, string> = {
+  notice: '注意事项',
+  dependency: '依赖约束',
+  api_change: '接口变更',
+  other: '其他',
+}
+
+const priorityLabels: Record<string, string> = {
+  high: '高',
+  medium: '中',
+  low: '低',
+}
+
+export function PinDetailSheet({
+  open,
+  onOpenChange,
+  item,
+  initialMode = 'view',
+}: PinDetailSheetProps) {
+  const [copiedId, setCopiedId] = useState(false)
+  const [currentPin, setCurrentPin] = useState<PinItem | null>(item)
+  const [isEditing, setIsEditing] = useState(initialMode === 'edit')
+
+  const [category, setCategory] = useState('notice')
+  const [priority, setPriority] = useState('medium')
+
+  const { names } = useProjectNameMap()
+  const updateMutation = useUpdatePin()
+
+  useEffect(() => {
+    if (open && item) {
+      setCurrentPin(item)
+      setIsEditing(initialMode === 'edit')
+      setCategory(item.category || 'notice')
+      setPriority(item.priority || 'medium')
+      setCopiedId(false)
+    }
+  }, [open, item, initialMode])
+
+  if (!currentPin) return null
+
+  const fromName =
+    names[currentPin.from_project_id] ?? currentPin.from_project_id
+  const toName = names[currentPin.to_project_id] ?? currentPin.to_project_id
+  const isPending = currentPin.status === 'pending'
+
+  const handleCopyId = () => {
+    void navigator.clipboard.writeText(currentPin.id)
+    setCopiedId(true)
+    setTimeout(() => setCopiedId(false), 2000)
+    toast.success('Pin 实体雪花 ID 已复制到剪贴板')
+  }
+
+  const handleSaveEdit = () => {
+    updateMutation.mutate(
+      {
+        id: currentPin.id,
+        data: {
+          category,
+          priority,
+        },
+      },
+      {
+        onSuccess: () => {
+          toast.success('Pin 约束属性已更新')
+          setIsEditing(false)
+          setCurrentPin((prev) =>
+            prev ? { ...prev, category, priority } : null,
+          )
+        },
+        onError: (err) => {
+          toast.error('更新失败', { description: err.message })
+        },
+      },
+    )
+  }
+
+  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 justify-between">
+            <div className="flex items-center gap-2">
+              <span className="size-2 rotate-45 bg-lagoon" />
+              <SheetTitle className="text-base font-semibold text-sea-ink">
+                {isEditing ? '调整约束属性' : 'Pin 约束全景详情'}
+              </SheetTitle>
+            </div>
+            <span className="font-mono text-[10px] text-lagoon-deep bg-sand px-2 py-0.5 border border-line">
+              {isEditing ? 'EDITING' : 'VIEW'}
+            </span>
+          </div>
+          <SheetDescription className="text-xs text-sea-ink-soft">
+            {isEditing
+              ? '就地修改该约束的分类属性与优先级评级'
+              : '查看跨项目依赖约束契约、投递流向与不可变约束正文'}
+          </SheetDescription>
+        </SheetHeader>
+
+        <div className="flex-1 overflow-y-auto px-6 py-5 space-y-5 text-[13px]">
+          {isEditing ? (
+            /* ── 编辑模式 ── */
+            <div className="space-y-4">
+              <div className="bg-sand border border-line p-3 text-xs text-sea-ink-soft">
+                <span className="font-semibold text-sea-ink">
+                  约束不可变原则：
+                </span>
+                约束标题与正文作为跨项目交付契约已归档上链，仅支持就地调整分发属性与优先级。
+              </div>
+
+              <div className="grid gap-1.5">
+                <Label className="text-xs font-semibold text-sea-ink">
+                  约束分类 (Category){' '}
+                  <span className="text-destructive">*</span>
+                </Label>
+                <Select value={category} onValueChange={setCategory}>
+                  <SelectTrigger className="w-full bg-sand/40 text-xs">
+                    <SelectValue placeholder="选择约束分类" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {CATEGORY_OPTIONS.map((opt) => (
+                      <SelectItem
+                        key={opt.value}
+                        value={opt.value}
+                        className="text-xs"
+                      >
+                        {opt.label}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+
+              <div className="grid gap-1.5">
+                <Label className="text-xs font-semibold text-sea-ink">
+                  处理优先级 (Priority){' '}
+                  <span className="text-destructive">*</span>
+                </Label>
+                <Select value={priority} onValueChange={setPriority}>
+                  <SelectTrigger className="w-full bg-sand/40 text-xs">
+                    <SelectValue placeholder="选择优先级" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {PRIORITY_OPTIONS.map((opt) => (
+                      <SelectItem
+                        key={opt.value}
+                        value={opt.value}
+                        className="text-xs"
+                      >
+                        {opt.label}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+            </div>
+          ) : (
+            /* ── 查看模式 ── */
+            <>
+              {/* 约束标题与状态 */}
+              <div className="flex flex-col gap-1.5 border-b border-dashed border-line pb-4">
+                <div className="flex items-center justify-between">
+                  <span className="text-[11px] font-bold uppercase tracking-wider text-lagoon-deep">
+                    约束主题 (Title)
+                  </span>
+                  <span
+                    className={`font-mono text-[10.5px] px-2 py-0.5 border ${
+                      isPending
+                        ? 'border-chip-line bg-lagoon/10 text-lagoon-deep'
+                        : 'border-line bg-chip-bg text-sea-ink-soft'
+                    }`}
+                  >
+                    {isPending
+                      ? '待下游消费 (PENDING)'
+                      : '已消费完成 (CONSUMED)'}
+                  </span>
+                </div>
+                <span className="text-sm font-semibold text-sea-ink">
+                  {currentPin.title}
+                </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">
+                    {currentPin.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">
+                  依赖流向关系 (Stream)
+                </span>
+                <div className="flex items-center justify-between bg-sand border border-line p-3 text-xs">
+                  <div className="flex flex-col gap-0.5">
+                    <span className="text-[10px] text-sea-ink-soft uppercase font-bold">
+                      来源项目 (From)
+                    </span>
+                    <span className="font-semibold text-sea-ink">
+                      {fromName}
+                    </span>
+                  </div>
+                  <span className="text-lagoon font-bold text-base">➔</span>
+                  <div className="flex flex-col gap-0.5 text-right">
+                    <span className="text-[10px] text-sea-ink-soft uppercase font-bold">
+                      目标项目 (To)
+                    </span>
+                    <span className="font-semibold text-sea-ink">{toName}</span>
+                  </div>
+                </div>
+              </div>
+
+              {/* 属性胶囊 */}
+              <div className="grid grid-cols-2 gap-3 border-b border-dashed border-line pb-4">
+                <div className="bg-sand border border-line p-2.5">
+                  <span className="text-[10px] text-sea-ink-soft uppercase font-bold block mb-1">
+                    分类
+                  </span>
+                  <span className="font-semibold text-xs text-sea-ink">
+                    {categoryLabels[currentPin.category] ||
+                      currentPin.category ||
+                      '其他'}
+                  </span>
+                </div>
+                <div className="bg-sand border border-line p-2.5">
+                  <span className="text-[10px] text-sea-ink-soft uppercase font-bold block mb-1">
+                    优先级
+                  </span>
+                  <span className="font-semibold text-xs text-sea-ink">
+                    {priorityLabels[currentPin.priority] ||
+                      currentPin.priority ||
+                      '未定义'}
+                  </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">
+                  约束正文内容 (Content)
+                </span>
+                <div className="border border-line bg-surface p-3.5 text-xs text-sea-ink leading-relaxed whitespace-pre-wrap font-mono break-all max-h-72 overflow-y-auto">
+                  {currentPin.content || '（无详细约束正文）'}
+                </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>创建时间</span>
+                  <span className="font-mono text-sea-ink">
+                    {formatDateTime(currentPin.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(currentPin.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">
+          {isEditing ? (
+            <>
+              <Button
+                type="button"
+                variant="outline"
+                className="rounded-none border-line text-sea-ink hover:bg-chip-bg flex-1"
+                onClick={() => setIsEditing(false)}
+                disabled={updateMutation.isPending}
+              >
+                取消
+              </Button>
+              <Button
+                type="button"
+                className="rounded-none bg-primary text-primary-foreground hover:bg-primary/90 flex-1"
+                onClick={handleSaveEdit}
+                disabled={updateMutation.isPending}
+              >
+                {updateMutation.isPending ? '保存中...' : '保存更改'}
+              </Button>
+            </>
+          ) : (
+            <Button
+              type="button"
+              variant="outline"
+              className="rounded-none border-line text-sea-ink hover:bg-chip-bg w-full"
+              onClick={() => setIsEditing(true)}
+            >
+              <Pencil className="mr-1.5 size-3.5" />
+              调整约束属性
+            </Button>
+          )}
+        </div>
+      </SheetContent>
+    </Sheet>
+  )
+}
diff --git a/web/src/components/preview/session-detail-drawer.tsx b/web/src/components/preview/session-detail-drawer.tsx
index 74c1f9e..b107226 100644
--- a/web/src/components/preview/session-detail-drawer.tsx
+++ b/web/src/components/preview/session-detail-drawer.tsx
@@ -8,8 +8,12 @@ import {
   SheetTitle,
 } from '@lumina/components/ui/sheet'
 import { Button } from '@lumina/components/ui/button'
+import { ConfirmDeleteDialog } from '#/components/confirm-delete-dialog'
 import { usePreviewWebSocket } from '#/hooks/usePreviewWebSocket'
-import { useDeletePreviewFile } from '#/hooks/usePreviewAdmin'
+import {
+  useDeletePreviewFile,
+  usePreviewSessionDetail,
+} from '#/hooks/usePreviewAdmin'
 import { formatDateTime } from '#/lib/format-date'
 import type {
   PreviewFileItem,
@@ -35,148 +39,204 @@ export function PreviewSessionDetailDrawer({
 
   const hash = session?.hash ?? null
   const [detail, setDetail] = useState<PreviewSyncData | null>(null)
+  const [fileToDelete, setFileToDelete] = useState<PreviewFileItem | null>(null)
+
+  // 1. REST API 作为静态快照基础兜底
+  const {
+    data: restDetailData,
+    isLoading: restLoading,
+    error: restError,
+    refetch: restRefetch,
+  } = usePreviewSessionDetail(session ? hash : null)
+
+  // 会话切换或抽屉关闭时首先重置详情缓存，避免展示上一会话的残留数据
+  useEffect(() => {
+    setDetail(null)
+    setFileToDelete(null)
+  }, [hash])
 
-  // WS 实时同步：详情与文件列表由 preview_sync 消息驱动（连接快照 / 文件变更推送）
+  useEffect(() => {
+    const payload = restDetailData?.data
+    if (payload && payload.session.hash === hash) {
+      setDetail((prev) => {
+        // 如果 WebSocket 已经推过当前 hash 的最新快照，则保留 WS 数据
+        if (prev && prev.session.hash === hash) return prev
+        return {
+          session: payload.session,
+          files: payload.files,
+        }
+      })
+    }
+  }, [restDetailData, hash])
+
+  // 2. WS 实时同步：详情与文件列表由 preview_sync 消息驱动（连接快照 / 文件变更推送）
   const { status } = usePreviewWebSocket(hash, {
     onSync: (data) => {
       if (!data?.session) return
       const syncData = data as PreviewSyncData
-      setDetail(syncData)
+      if (syncData.session.hash === hash) {
+        setDetail(syncData)
+      }
     },
   })
 
-  // 会话切换或抽屉关闭时重置详情缓存，避免展示上一会话的残留数据
-  useEffect(() => {
-    setDetail(null)
-  }, [hash])
-
-  // WS 状态驱动加载态：idle / connecting 视为加载中
-  const isLoading = status === 'idle' || status === 'connecting'
+  // 🌟 R-03 严格校验 detail 必须完全属于当前展开会话的 hash，彻底消除切换会话时的瞬时旧数据残留
+  const currentDetail = detail?.session.hash === hash ? detail : null
+  const isLoading = !currentDetail && restLoading
 
   return (
-    <Sheet
-      open={!!session}
-      onOpenChange={(open) => {
-        if (!open) onClose()
-      }}
-    >
-      <SheetContent
-        side="right"
-        className="w-[min(560px,92vw)] gap-0 border-line sm:max-w-[560px]"
+    <>
+      <Sheet
+        open={!!session}
+        onOpenChange={(open) => {
+          if (!open) onClose()
+        }}
       >
-        <SheetHeader className="border-b border-line px-6 py-4">
-          <SheetTitle>预览会话详情</SheetTitle>
-          <SheetDescription>查看该会话的前端文件并管理</SheetDescription>
-        </SheetHeader>
+        <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>
+          </SheetHeader>
 
-        <div className="flex-1 overflow-y-auto px-6 py-5">
-          {status === 'rejected' ? (
-            <div className="py-12 text-center text-muted-foreground">
-              会话不存在
-            </div>
-          ) : isLoading || !detail ? (
-            <div className="py-12 text-center text-muted-foreground">
-              加载中…
-            </div>
-          ) : (
-            <div className="space-y-6">
-              <div className="space-y-2 text-sm">
-                <div className="flex items-center justify-between">
-                  <span className="text-sea-ink-soft">标题</span>
-                  <span className="font-medium text-sea-ink">
-                    {detail.session.title}
-                  </span>
-                </div>
-                <div className="flex items-center justify-between">
-                  <span className="text-sea-ink-soft">状态</span>
-                  <span className="font-medium text-sea-ink">
-                    {detail.session.status === 'active' ? '活跃' : '已过期'}
-                  </span>
-                </div>
-                <div className="flex items-center justify-between">
-                  <span className="text-sea-ink-soft">过期时间</span>
-                  <span className="font-medium text-sea-ink">
-                    {formatDateTime(detail.session.expires_at)}
-                  </span>
-                </div>
-                <div className="flex items-center justify-between">
-                  <span className="text-sea-ink-soft">创建时间</span>
-                  <span className="font-medium text-sea-ink">
-                    {formatDateTime(detail.session.created_at)}
-                  </span>
-                </div>
+          <div className="flex-1 overflow-y-auto px-6 py-5">
+            {status === 'rejected' ? (
+              <div className="py-12 text-center text-muted-foreground">
+                会话不存在
               </div>
+            ) : restError && !currentDetail ? (
+              <div className="py-12 text-center space-y-3">
+                <p className="text-xs text-destructive">
+                  获取预览会话详情失败：{restError.message}
+                </p>
+                <Button
+                  size="sm"
+                  variant="outline"
+                  onClick={() => void restRefetch()}
+                  className="rounded-none text-xs"
+                >
+                  重新加载
+                </Button>
+              </div>
+            ) : isLoading || !currentDetail ? (
+              <div className="py-12 text-center text-muted-foreground">
+                加载中…
+              </div>
+            ) : (
+              <div className="space-y-6">
+                <div className="rounded-md border border-line bg-surface p-4 text-sm">
+                  <div className="flex justify-between py-1">
+                    <span className="text-sea-ink-soft">标题</span>
+                    <span className="font-medium text-sea-ink">
+                      {currentDetail.session.title || '（未命名）'}
+                    </span>
+                  </div>
+                  <div className="flex justify-between py-1">
+                    <span className="text-sea-ink-soft">Hash</span>
+                    <span className="font-mono text-xs text-sea-ink">
+                      {currentDetail.session.hash}
+                    </span>
+                  </div>
+                  <div className="flex justify-between py-1">
+                    <span className="text-sea-ink-soft">状态</span>
+                    <span className="font-medium text-sea-ink">
+                      {currentDetail.session.status}
+                    </span>
+                  </div>
+                  <div className="flex justify-between py-1">
+                    <span className="text-sea-ink-soft">过期时间</span>
+                    <span className="text-xs text-sea-ink-soft">
+                      {formatDateTime(currentDetail.session.expires_at)}
+                    </span>
+                  </div>
+                </div>
 
-              {(() => {
-                const isExpired =
-                  detail.session.status !== 'active' ||
-                  (detail.session.expires_at
-                    ? new Date(detail.session.expires_at).getTime() <=
-                      Date.now()
-                    : false)
-                return (
-                  <Button
-                    variant="outline"
-                    className="w-full"
-                    disabled={isExpired}
-                    onClick={() => {
-                      if (isExpired) return
-                      window.open(`/preview/${detail.session.hash}/`, '_blank')
-                    }}
-                    title={
-                      isExpired ? '该会话已过期，访问链接已收回' : '打开预览'
-                    }
-                  >
-                    <ExternalLink className="mr-2 size-4" aria-hidden />
-                    {isExpired ? '预览已过期（链接已收回）' : '打开预览'}
-                  </Button>
-                )
-              })()}
+                {(() => {
+                  const isExpired =
+                    new Date(currentDetail.session.expires_at).getTime() <=
+                    Date.now()
+                  return (
+                    <Button
+                      variant="outline"
+                      className="w-full"
+                      disabled={isExpired}
+                      onClick={() =>
+                        window.open(
+                          `/preview/${currentDetail.session.hash}/index.html`,
+                          '_blank',
+                        )
+                      }
+                    >
+                      <ExternalLink className="mr-2 size-4" aria-hidden />
+                      {isExpired ? '预览已过期（链接已收回）' : '打开预览'}
+                    </Button>
+                  )
+                })()}
 
-              <div>
-                <h3 className="mb-3 text-sm font-semibold">
-                  文件列表 ({detail.files.length})
-                </h3>
-                {detail.files.length === 0 ? (
-                  <p className="py-8 text-center text-muted-foreground">
-                    暂无文件
-                  </p>
-                ) : (
-                  <ul className="space-y-2">
-                    {detail.files.map((f) => (
-                      <li
-                        key={f.id}
-                        className="flex items-center justify-between rounded-md border border-line px-3 py-2"
-                      >
-                        <div className="flex min-w-0 items-center gap-2">
-                          <FileCode2
-                            className="size-4 shrink-0 text-sea-ink-soft"
-                            aria-hidden
-                          />
-                          <span className="truncate text-sm text-sea-ink">
-                            {f.filename}
-                          </span>
-                          <span className="text-xs text-sea-ink-soft/60">
-                            {f.size} B
-                          </span>
-                        </div>
-                        <Button
-                          variant="ghost"
-                          size="icon"
-                          title="删除文件"
-                          onClick={() => deleteFileMutation.mutate(f.id)}
+                <div>
+                  <h3 className="mb-3 text-sm font-semibold">
+                    文件列表 ({currentDetail.files.length})
+                  </h3>
+                  {currentDetail.files.length === 0 ? (
+                    <p className="py-8 text-center text-muted-foreground">
+                      暂无文件
+                    </p>
+                  ) : (
+                    <ul className="space-y-2">
+                      {currentDetail.files.map((f) => (
+                        <li
+                          key={f.id}
+                          className="flex items-center justify-between rounded-md border border-line px-3 py-2"
                         >
-                          <Trash2 className="size-4 text-destructive" />
-                        </Button>
-                      </li>
-                    ))}
-                  </ul>
-                )}
+                          <div className="flex min-w-0 items-center gap-2">
+                            <FileCode2
+                              className="size-4 shrink-0 text-sea-ink-soft"
+                              aria-hidden
+                            />
+                            <span className="truncate text-sm text-sea-ink">
+                              {f.filename}
+                            </span>
+                            <span className="text-xs text-sea-ink-soft/60">
+                              {f.size} B
+                            </span>
+                          </div>
+                          <Button
+                            variant="ghost"
+                            size="icon"
+                            title="删除文件"
+                            onClick={() => setFileToDelete(f)}
+                          >
+                            <Trash2 className="size-4 text-destructive" />
+                          </Button>
+                        </li>
+                      ))}
+                    </ul>
+                  )}
+                </div>
               </div>
-            </div>
-          )}
-        </div>
-      </SheetContent>
-    </Sheet>
+            )}
+          </div>
+        </SheetContent>
+      </Sheet>
+
+      {/* 🌟 Q-08 文件删除确认弹窗保护 */}
+      <ConfirmDeleteDialog
+        open={!!fileToDelete}
+        onOpenChange={(open) => {
+          if (!open) setFileToDelete(null)
+        }}
+        title="确认删除预览文件"
+        description={`确定要从该会话中删除文件「${fileToDelete?.filename ?? ''}」吗？此操作将立即生效并同步刷新工作台。`}
+        onConfirm={() => {
+          if (!fileToDelete) return
+          deleteFileMutation.mutate(fileToDelete.id, {
+            onSuccess: () => setFileToDelete(null),
+          })
+        }}
+        isPending={deleteFileMutation.isPending}
+      />
+    </>
   )
 }
diff --git a/web/src/components/project/create-dialog.tsx b/web/src/components/project/create-dialog.tsx
index 39473a4..83b36b3 100644
--- a/web/src/components/project/create-dialog.tsx
+++ b/web/src/components/project/create-dialog.tsx
@@ -1,4 +1,5 @@
 import { useState } from 'react'
+import { ChevronDown, ChevronRight, FolderCode, Plus, X } from 'lucide-react'
 import { Button } from '@lumina/components/ui/button'
 import {
   Dialog,
@@ -21,23 +22,34 @@ interface CreateDialogProps {
 export function CreateDialog({ open, onOpenChange }: CreateDialogProps) {
   const [name, setName] = useState('')
   const [aliasName, setAliasName] = useState('')
-  const [matchPathInput, setMatchPathInput] = useState('')
   const [description, setDescription] = useState('')
+  const [paths, setPaths] = useState<string[]>([])
+  const [newPathInput, setNewPathInput] = useState('')
+  const [showAdvanced, setShowAdvanced] = useState(false)
   const { current } = useCurrentWorkspace()
 
   const createMutation = useCreateProject()
 
+  const handleAddPath = () => {
+    const trimmed = newPathInput.trim()
+    if (!trimmed) return
+    if (!paths.includes(trimmed)) {
+      setPaths([...paths, trimmed])
+    }
+    setNewPathInput('')
+  }
+
+  const handleRemovePath = (index: number) => {
+    setPaths(paths.filter((_, i) => i !== index))
+  }
+
   const handleSubmit = () => {
     if (!name.trim() || !current?.id) return
-    const matchPaths = matchPathInput
-      .split(',')
-      .map((s) => s.trim())
-      .filter(Boolean)
     createMutation.mutate(
       {
         name: name.trim(),
         alias_name: aliasName.trim() || undefined,
-        match_path: matchPaths.length > 0 ? matchPaths : undefined,
+        match_path: paths.length > 0 ? paths : undefined,
         description: description.trim() || undefined,
         workspace_id: current.id,
       },
@@ -50,71 +62,180 @@ export function CreateDialog({ open, onOpenChange }: CreateDialogProps) {
   const handleClose = () => {
     setName('')
     setAliasName('')
-    setMatchPathInput('')
     setDescription('')
+    setPaths([])
+    setNewPathInput('')
+    setShowAdvanced(false)
     onOpenChange(false)
   }
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent>
+      <DialogContent className="sm:max-w-lg">
         <DialogHeader>
-          <DialogTitle>创建项目</DialogTitle>
+          <div className="flex items-center gap-2">
+            <span className="size-2 rotate-45 bg-lagoon" />
+            <DialogTitle>新建项目</DialogTitle>
+          </div>
           <DialogDescription>
-            创建一个新的项目，用于组织 Pin 和 Q&A。
+            为当前空间配置新的代码项目，用于组织 RepoWiki、Pin 依赖与 Q&A 会话。
           </DialogDescription>
         </DialogHeader>
-        <div className="grid gap-4 py-4">
+
+        <div className="grid gap-4 py-2">
+          {/* 所属空间提示 */}
+          <div className="flex items-center justify-between bg-sand border border-line px-3 py-2 text-xs">
+            <span className="text-sea-ink-soft">归属工作空间</span>
+            <span className="font-semibold text-sea-ink">
+              {current?.name || '默认空间'}
+              {current?.slug ? ` (${current.slug})` : ''}
+            </span>
+          </div>
+
+          {/* 基础表单：项目全称与别名 */}
           <div className="grid gap-2">
-            <Label htmlFor="p-name">项目名称 *</Label>
+            <Label
+              htmlFor="p-name"
+              className="text-xs font-semibold text-sea-ink"
+            >
+              项目全名 (Name) <span className="text-destructive">*</span>
+            </Label>
             <Input
               id="p-name"
               value={name}
               onChange={(e) => setName(e.target.value)}
-              placeholder="输入项目名称"
+              placeholder="如 Lumina / studio"
+              className="bg-foam"
             />
           </div>
+
           <div className="grid gap-2">
-            <Label htmlFor="p-alias">别名</Label>
+            <Label
+              htmlFor="p-alias"
+              className="text-xs font-semibold text-sea-ink"
+            >
+              显示别名 (Alias)
+            </Label>
             <Input
               id="p-alias"
               value={aliasName}
               onChange={(e) => setAliasName(e.target.value)}
-              placeholder="输入项目别名"
-            />
-          </div>
-          <div className="grid gap-2">
-            <Label htmlFor="p-match-path">匹配路径</Label>
-            <Input
-              id="p-match-path"
-              value={matchPathInput}
-              onChange={(e) => setMatchPathInput(e.target.value)}
-              placeholder="逗号分隔，如: /api/v1/*,/docs/*"
+              placeholder="如 微明 / 零号台（用于在台账中优雅呈现）"
+              className="bg-foam"
             />
-            <p className="text-xs text-muted-foreground">
-              支持通配符 * 匹配，用于自动关联请求路径
-            </p>
           </div>
+
           <div className="grid gap-2">
-            <Label htmlFor="p-desc">描述</Label>
+            <Label
+              htmlFor="p-desc"
+              className="text-xs font-semibold text-sea-ink"
+            >
+              项目描述
+            </Label>
             <textarea
               id="p-desc"
               value={description}
               onChange={(e) => setDescription(e.target.value)}
-              placeholder="输入项目描述（可选）"
-              className="flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+              placeholder="简要描述项目的职责与业务范畴（可选）"
+              className="flex min-h-[72px] w-full rounded-none border border-input bg-foam px-3 py-2 text-xs ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
             />
           </div>
+
+          {/* 高级选项：本地 Agent 检出路径映射 */}
+          <div className="border border-line bg-sand/40 p-3">
+            <button
+              type="button"
+              onClick={() => setShowAdvanced(!showAdvanced)}
+              className="flex w-full items-center justify-between text-xs font-medium text-sea-ink hover:text-lagoon transition-colors"
+            >
+              <div className="flex items-center gap-1.5">
+                <FolderCode className="size-3.5 text-lagoon" />
+                <span>高级设置 · 本地工作目录关联 (MatchPath)</span>
+              </div>
+              {showAdvanced ? (
+                <ChevronDown className="size-3.5 text-sea-ink-soft" />
+              ) : (
+                <ChevronRight className="size-3.5 text-sea-ink-soft" />
+              )}
+            </button>
+
+            {showAdvanced ? (
+              <div className="mt-3 space-y-2.5 pt-2 border-t border-dashed border-line">
+                <p className="text-[11px] text-sea-ink-soft leading-relaxed">
+                  供本地 Agent (如 MCP / CLI)
+                  在此目录下工作时自动寻址该项目。可留空，后续由 Agent
+                  运行时自动关联。
+                </p>
+
+                {/* 路径添加输入框 */}
+                <div className="flex gap-2">
+                  <Input
+                    value={newPathInput}
+                    onChange={(e) => setNewPathInput(e.target.value)}
+                    onKeyDown={(e) => {
+                      if (e.key === 'Enter') {
+                        e.preventDefault()
+                        handleAddPath()
+                      }
+                    }}
+                    placeholder="如: /Users/username/workspace/repo"
+                    className="h-8 text-xs font-mono bg-foam"
+                  />
+                  <Button
+                    type="button"
+                    variant="outline"
+                    size="sm"
+                    onClick={handleAddPath}
+                    className="h-8 shrink-0 text-xs px-2.5"
+                  >
+                    <Plus className="size-3 mr-1" />
+                    添加
+                  </Button>
+                </div>
+
+                {/* 已添加路径 Tag 胶囊列表 */}
+                {paths.length > 0 ? (
+                  <div className="space-y-1.5 max-h-32 overflow-y-auto">
+                    {paths.map((p, idx) => (
+                      <div
+                        key={p}
+                        className="flex items-center justify-between gap-2 bg-foam border border-line px-2.5 py-1 text-[11px] font-mono"
+                      >
+                        <span className="truncate text-sea-ink select-all">
+                          {p}
+                        </span>
+                        <button
+                          type="button"
+                          onClick={() => handleRemovePath(idx)}
+                          className="text-sea-ink-soft hover:text-destructive shrink-0"
+                          title="移除此路径"
+                        >
+                          <X className="size-3" />
+                        </button>
+                      </div>
+                    ))}
+                  </div>
+                ) : (
+                  <div className="text-[11px] text-sea-ink-soft italic">
+                    尚未添加路径映射（建议通过 Agent 自动绑定）
+                  </div>
+                )}
+              </div>
+            ) : null}
+          </div>
         </div>
-        <DialogFooter>
-          <Button variant="outline" onClick={handleClose}>
+
+        <DialogFooter className="border-t border-line pt-3 mt-1">
+          <Button variant="outline" size="sm" onClick={handleClose}>
             取消
           </Button>
           <Button
+            size="sm"
             onClick={handleSubmit}
+            className="bg-primary text-primary-foreground hover:bg-primary/90"
             disabled={!name.trim() || !current?.id || createMutation.isPending}
           >
-            {createMutation.isPending ? '创建中...' : '创建'}
+            {createMutation.isPending ? '创建中...' : '立即创建'}
           </Button>
         </DialogFooter>
       </DialogContent>
diff --git a/web/src/components/project/detail-sheet.tsx b/web/src/components/project/detail-sheet.tsx
index 5470036..2b9ddc6 100644
--- a/web/src/components/project/detail-sheet.tsx
+++ b/web/src/components/project/detail-sheet.tsx
@@ -1,6 +1,15 @@
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import { useNavigate } from '@tanstack/react-router'
-import { BookOpen, Check, Copy, ExternalLink, Pencil } from 'lucide-react'
+import {
+  BookOpen,
+  Check,
+  Copy,
+  ExternalLink,
+  FolderCode,
+  Pencil,
+  Plus,
+  X,
+} from 'lucide-react'
 import {
   Sheet,
   SheetContent,
@@ -9,8 +18,21 @@ import {
   SheetDescription,
 } from '@lumina/components/ui/sheet'
 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,
+} from '@lumina/components/ui/select'
+import { WorkspaceIcon } from '#/components/workspace-icon'
+import { useWorkspaceOptions } from '#/hooks/useWorkspace'
+import { useUpdateProject } from '#/hooks/useProject'
 import { formatDateTime } from '#/lib/format-date'
 import type { ProjectItem } from '#/lib/models/response/project'
+import { toast } from 'sonner'
 
 interface DetailSheetProps {
   open: boolean
@@ -19,7 +41,7 @@ interface DetailSheetProps {
   wikiStatus?: string
   pendingPinCount?: number
   previewStatus?: string
-  onEdit?: (item: ProjectItem) => void
+  initialMode?: 'view' | 'edit'
 }
 
 export function ProjectDetailSheet({
@@ -29,10 +51,35 @@ export function ProjectDetailSheet({
   wikiStatus = '未初始化',
   pendingPinCount = 0,
   previewStatus = '无活跃沙盒',
-  onEdit,
+  initialMode = 'view',
 }: DetailSheetProps) {
   const navigate = useNavigate()
   const [copiedId, setCopiedId] = useState(false)
+  const [isEditing, setIsEditing] = useState(initialMode === 'edit')
+
+  // 编辑表单状态
+  const [name, setName] = useState('')
+  const [aliasName, setAliasName] = useState('')
+  const [description, setDescription] = useState('')
+  const [workspaceId, setWorkspaceId] = useState('')
+  const [paths, setPaths] = useState<string[]>([])
+  const [newPathInput, setNewPathInput] = useState('')
+
+  const workspaceOptions = useWorkspaceOptions()
+  const workspaces = workspaceOptions.data ?? []
+  const updateMutation = useUpdateProject()
+
+  useEffect(() => {
+    if (open && item) {
+      setIsEditing(initialMode === 'edit')
+      setName(item.name)
+      setAliasName(item.alias_name || '')
+      setDescription(item.description || '')
+      setWorkspaceId(item.workspace_id)
+      setPaths(item.match_path ? [...item.match_path] : [])
+      setNewPathInput('')
+    }
+  }, [open, item, initialMode])
 
   if (!item) return null
 
@@ -50,9 +97,43 @@ export function ProjectDetailSheet({
     })
   }
 
-  const handleEdit = () => {
-    onOpenChange(false)
-    if (onEdit) onEdit(item)
+  const handleAddPath = () => {
+    const trimmed = newPathInput.trim()
+    if (!trimmed) return
+    if (!paths.includes(trimmed)) {
+      setPaths([...paths, trimmed])
+    }
+    setNewPathInput('')
+  }
+
+  const handleRemovePath = (index: number) => {
+    setPaths(paths.filter((_, i) => i !== index))
+  }
+
+  const handleSaveEdit = () => {
+    if (!name.trim() || !workspaceId) return
+    updateMutation.mutate(
+      {
+        id: item.id,
+        data: {
+          workspace_id:
+            workspaceId !== item.workspace_id ? workspaceId : undefined,
+          name: name.trim(),
+          alias_name: aliasName.trim() || undefined,
+          match_path: paths,
+          description: description.trim() || undefined,
+        },
+      },
+      {
+        onSuccess: () => {
+          toast.success('项目配置已更新')
+          setIsEditing(false)
+        },
+        onError: (err) => {
+          toast.error('更新失败', { description: err.message })
+        },
+      },
+    )
   }
 
   const matchPaths =
@@ -65,176 +146,347 @@ export function ProjectDetailSheet({
         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 className="flex items-center justify-between">
+            <div className="flex items-center gap-2">
+              <span className="size-2 rotate-45 bg-lagoon" />
+              <SheetTitle className="text-base font-semibold text-sea-ink">
+                {isEditing ? '编辑项目配置' : '项目完整概览'}
+              </SheetTitle>
+            </div>
+            <span className="font-mono text-[10px] text-lagoon-deep bg-sand px-2 py-0.5 border border-line">
+              {isEditing ? 'EDITING' : 'VIEW'}
+            </span>
           </div>
           <SheetDescription className="text-xs text-sea-ink-soft">
-            查看项目的标识别名、底层绝对路径映射与资产配置属性
+            {isEditing
+              ? '修改项目基础资料、所属空间以及本地 Agent 检出路径映射'
+              : '查看项目的标识别名、底层路径映射与核心关联资产状态'}
           </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>
+          {isEditing ? (
+            /* ── 编辑模式专属工作区 ── */
+            <div className="space-y-4">
+              <div className="grid gap-1.5">
+                <Label className="text-xs font-semibold text-sea-ink">
+                  所属空间 <span className="text-destructive">*</span>
+                </Label>
+                <Select value={workspaceId} onValueChange={setWorkspaceId}>
+                  <SelectTrigger className="w-full bg-sand/40">
+                    <SelectValue placeholder="选择所属空间" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {workspaces.map((ws) => (
+                      <SelectItem key={ws.id} value={ws.id}>
+                        <div className="flex items-center gap-2">
+                          <WorkspaceIcon name={ws.icon} />
+                          <span>{ws.name}</span>
+                        </div>
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </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>
+              <div className="grid gap-1.5">
+                <Label className="text-xs font-semibold text-sea-ink">
+                  项目全名 (Name) <span className="text-destructive">*</span>
+                </Label>
+                <Input
+                  value={name}
+                  onChange={(e) => setName(e.target.value)}
+                  placeholder="项目全称"
+                  className="bg-sand/40 text-xs"
+                />
+              </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>
-                  </>
+              <div className="grid gap-1.5">
+                <Label className="text-xs font-semibold text-sea-ink">
+                  显示别名 (Alias)
+                </Label>
+                <Input
+                  value={aliasName}
+                  onChange={(e) => setAliasName(e.target.value)}
+                  placeholder="项目别名（用于台账优雅呈现）"
+                  className="bg-sand/40 text-xs"
+                />
+              </div>
+
+              {/* MatchPath Tag 列表 */}
+              <div className="border border-line bg-sand/40 p-3 space-y-2.5">
+                <div className="flex items-center gap-1.5 text-xs font-medium text-sea-ink">
+                  <FolderCode className="size-3.5 text-lagoon" />
+                  <span>本地工作目录映射 (MatchPath)</span>
+                </div>
+                <p className="text-[11px] text-sea-ink-soft leading-relaxed">
+                  供本地 Agent (如 MCP / CLI) 在此目录下工作时自动寻址该项目。
+                </p>
+                <div className="flex gap-2">
+                  <Input
+                    value={newPathInput}
+                    onChange={(e) => setNewPathInput(e.target.value)}
+                    onKeyDown={(e) => {
+                      if (e.key === 'Enter') {
+                        e.preventDefault()
+                        handleAddPath()
+                      }
+                    }}
+                    placeholder="如: /Users/username/workspace/repo"
+                    className="h-8 text-xs font-mono bg-foam"
+                  />
+                  <Button
+                    type="button"
+                    variant="outline"
+                    size="sm"
+                    onClick={handleAddPath}
+                    className="h-8 shrink-0 text-xs px-2.5"
+                  >
+                    <Plus className="size-3 mr-1" />
+                    添加
+                  </Button>
+                </div>
+                {paths.length > 0 ? (
+                  <div className="space-y-1.5 max-h-32 overflow-y-auto">
+                    {paths.map((p, idx) => (
+                      <div
+                        key={p}
+                        className="flex items-center justify-between gap-2 bg-foam border border-line px-2.5 py-1 text-[11px] font-mono"
+                      >
+                        <span className="truncate text-sea-ink select-all">
+                          {p}
+                        </span>
+                        <button
+                          type="button"
+                          onClick={() => handleRemovePath(idx)}
+                          className="text-sea-ink-soft hover:text-destructive shrink-0"
+                          title="移除"
+                        >
+                          <X className="size-3" />
+                        </button>
+                      </div>
+                    ))}
+                  </div>
                 ) : (
-                  <>
-                    <Copy className="size-3" />
-                    <span>复制</span>
-                  </>
+                  <div className="text-[11px] text-sea-ink-soft italic">
+                    暂未配置路径映射
+                  </div>
                 )}
-              </button>
+              </div>
+
+              <div className="grid gap-1.5">
+                <Label className="text-xs font-semibold text-sea-ink">
+                  项目介绍
+                </Label>
+                <textarea
+                  value={description}
+                  onChange={(e) => setDescription(e.target.value)}
+                  placeholder="简述该项目职责"
+                  className="flex min-h-[72px] w-full border border-input bg-sand/40 px-3 py-2 text-xs ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+                />
+              </div>
             </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">
+                  项目别名 (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">
-              项目介绍 (Description)
-            </span>
-            <p className="text-xs text-sea-ink-soft leading-relaxed">
-              {item.description || '暂无详细描述'}
-            </p>
-          </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>
 
-          {/* 底层路径映射 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"
+              {/* 雪花 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"
                   >
-                    {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">
-                未配置底层路径映射
+                    {copiedId ? (
+                      <>
+                        <Check className="size-3 text-lagoon" />
+                        <span>已复制</span>
+                      </>
+                    ) : (
+                      <>
+                        <Copy className="size-3" />
+                        <span>复制</span>
+                      </>
+                    )}
+                  </button>
+                </div>
               </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}
+              {/* 项目描述 */}
+              <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>
-              <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} 待办
+
+              {/* 底层路径映射 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">
+                    未配置本地路径映射（建议通过 Agent 自动绑定）
+                  </div>
+                )}
               </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}
+
+              {/* 关联资产概览 */}
+              <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>
-          </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 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>
+          {isEditing ? (
+            <>
+              <Button
+                type="button"
+                variant="outline"
+                className="rounded-none border-line text-sea-ink hover:bg-chip-bg flex-1"
+                onClick={() => setIsEditing(false)}
+                disabled={updateMutation.isPending}
+              >
+                取消
+              </Button>
+              <Button
+                type="button"
+                className="rounded-none bg-primary text-primary-foreground hover:bg-primary/90 flex-1"
+                onClick={handleSaveEdit}
+                disabled={
+                  !name.trim() || !workspaceId || updateMutation.isPending
+                }
+              >
+                {updateMutation.isPending ? '保存中...' : '保存更改'}
+              </Button>
+            </>
+          ) : (
+            <>
+              <Button
+                type="button"
+                variant="outline"
+                className="rounded-none border-line text-sea-ink hover:bg-chip-bg flex-1"
+                onClick={() => setIsEditing(true)}
+              >
+                <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/project/edit-dialog.tsx b/web/src/components/project/edit-dialog.tsx
index 359d5c2..95ef85b 100644
--- a/web/src/components/project/edit-dialog.tsx
+++ b/web/src/components/project/edit-dialog.tsx
@@ -1,4 +1,5 @@
 import { useEffect, useState } from 'react'
+import { FolderCode, Plus, X } from 'lucide-react'
 import { Button } from '@lumina/components/ui/button'
 import {
   Dialog,
@@ -31,7 +32,8 @@ interface EditDialogProps {
 export function EditDialog({ open, onOpenChange, item }: EditDialogProps) {
   const [name, setName] = useState('')
   const [aliasName, setAliasName] = useState('')
-  const [matchPathInput, setMatchPathInput] = useState('')
+  const [paths, setPaths] = useState<string[]>([])
+  const [newPathInput, setNewPathInput] = useState('')
   const [description, setDescription] = useState('')
   const [workspaceId, setWorkspaceId] = useState('')
   const workspaceOptions = useWorkspaceOptions()
@@ -50,18 +52,28 @@ export function EditDialog({ open, onOpenChange, item }: EditDialogProps) {
     if (open && item) {
       setName(item.name)
       setAliasName(item.alias_name || '')
-      setMatchPathInput(item.match_path?.join(', ') ?? '')
+      setPaths(item.match_path ? [...item.match_path] : [])
+      setNewPathInput('')
       setDescription(item.description)
       setWorkspaceId(item.workspace_id)
     }
   }, [item, open])
 
+  const handleAddPath = () => {
+    const trimmed = newPathInput.trim()
+    if (!trimmed) return
+    if (!paths.includes(trimmed)) {
+      setPaths([...paths, trimmed])
+    }
+    setNewPathInput('')
+  }
+
+  const handleRemovePath = (index: number) => {
+    setPaths(paths.filter((_, i) => i !== index))
+  }
+
   const handleSubmit = () => {
     if (!item || !canSubmit) return
-    const matchPaths = matchPathInput
-      .split(',')
-      .map((s) => s.trim())
-      .filter(Boolean)
     updateMutation.mutate(
       {
         id: item.id,
@@ -70,7 +82,7 @@ export function EditDialog({ open, onOpenChange, item }: EditDialogProps) {
             workspaceId !== item.workspace_id ? workspaceId : undefined,
           name: name.trim(),
           alias_name: aliasName.trim() || undefined,
-          match_path: matchPaths,
+          match_path: paths,
           description: description.trim() || undefined,
         },
       },
@@ -168,17 +180,65 @@ export function EditDialog({ open, onOpenChange, item }: EditDialogProps) {
               placeholder="输入项目别名"
             />
           </div>
-          <div className="grid gap-2">
-            <Label htmlFor="e-match-path">匹配路径</Label>
-            <Input
-              id="e-match-path"
-              value={matchPathInput}
-              onChange={(e) => setMatchPathInput(e.target.value)}
-              placeholder="逗号分隔，如: /api/v1/*,/docs/*"
-            />
-            <p className="text-xs text-muted-foreground">
-              支持通配符 * 匹配，用于自动关联请求路径
+          {/* 本地 Agent 检出路径映射 Tag 列表 */}
+          <div className="border border-line bg-sand/40 p-3 space-y-2.5">
+            <div className="flex items-center gap-1.5 text-xs font-medium text-sea-ink">
+              <FolderCode className="size-3.5 text-lagoon" />
+              <span>本地工作目录映射 (MatchPath)</span>
+            </div>
+            <p className="text-[11px] text-sea-ink-soft leading-relaxed">
+              供本地 Agent (如 MCP / CLI) 在此目录下工作时自动关联该项目。
             </p>
+            <div className="flex gap-2">
+              <Input
+                value={newPathInput}
+                onChange={(e) => setNewPathInput(e.target.value)}
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter') {
+                    e.preventDefault()
+                    handleAddPath()
+                  }
+                }}
+                placeholder="如: /Users/username/workspace/repo"
+                className="h-8 text-xs font-mono bg-foam"
+              />
+              <Button
+                type="button"
+                variant="outline"
+                size="sm"
+                onClick={handleAddPath}
+                className="h-8 shrink-0 text-xs px-2.5"
+              >
+                <Plus className="size-3 mr-1" />
+                添加
+              </Button>
+            </div>
+            {paths.length > 0 ? (
+              <div className="space-y-1.5 max-h-32 overflow-y-auto">
+                {paths.map((p, idx) => (
+                  <div
+                    key={p}
+                    className="flex items-center justify-between gap-2 bg-foam border border-line px-2.5 py-1 text-[11px] font-mono"
+                  >
+                    <span className="truncate text-sea-ink select-all">
+                      {p}
+                    </span>
+                    <button
+                      type="button"
+                      onClick={() => handleRemovePath(idx)}
+                      className="text-sea-ink-soft hover:text-destructive shrink-0"
+                      title="移除此路径"
+                    >
+                      <X className="size-3" />
+                    </button>
+                  </div>
+                ))}
+              </div>
+            ) : (
+              <div className="text-[11px] text-sea-ink-soft italic">
+                暂未绑定路径映射（建议通过 Agent 自动绑定）
+              </div>
+            )}
           </div>
           <div className="grid gap-2">
             <Label htmlFor="e-desc">描述</Label>
diff --git a/web/src/components/qa/session-detail-drawer.tsx b/web/src/components/qa/session-detail-drawer.tsx
index 8c655bb..d592a13 100644
--- a/web/src/components/qa/session-detail-drawer.tsx
+++ b/web/src/components/qa/session-detail-drawer.tsx
@@ -1,3 +1,4 @@
+import { ExternalLink } from 'lucide-react'
 import {
   Sheet,
   SheetContent,
@@ -5,6 +6,7 @@ import {
   SheetHeader,
   SheetTitle,
 } from '@lumina/components/ui/sheet'
+import { Button } from '@lumina/components/ui/button'
 import { useSessionDetail } from '#/hooks/useQaAdmin'
 import { SessionDetail } from './session-detail'
 import { QuestionCard } from './question-card'
@@ -32,43 +34,80 @@ export function SessionDetailDrawer({
     >
       <SheetContent
         side="right"
-        className="w-[min(560px,92vw)] gap-0 border-line sm:max-w-[560px]"
+        className="w-full rounded-none border-l border-line bg-foam p-0 sm:max-w-xl flex flex-col"
       >
-        <SheetHeader className="border-b border-line px-6 py-4">
-          <SheetTitle>会话详情</SheetTitle>
-          <SheetDescription>查看该会话的问题、选项与补充内容</SheetDescription>
+        <SheetHeader className="border-b border-line bg-surface-strong px-6 py-5 text-left">
+          <div className="flex items-center justify-between">
+            <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>
+            <span className="font-mono text-[10px] text-lagoon-deep bg-sand px-2 py-0.5 border border-line">
+              SESSION
+            </span>
+          </div>
+          <SheetDescription className="text-xs text-sea-ink-soft">
+            查看该会话的关联项目、在线设备、问题流与回答时间线
+          </SheetDescription>
         </SheetHeader>
 
-        <div className="flex-1 overflow-y-auto px-6 py-5">
+        <div className="flex-1 overflow-y-auto px-6 py-5 space-y-5">
           {isLoading ? (
-            <div className="py-12 text-center text-muted-foreground">
-              加载中…
+            <div className="py-16 text-center text-xs text-sea-ink-soft">
+              加载会话详细数据中…
             </div>
           ) : session ? (
             <div className="space-y-6">
               <SessionDetail session={session} />
               <div>
-                <h3 className="mb-3 text-lg font-semibold">
-                  问题列表 ({session.questions?.length ?? 0})
-                </h3>
+                <div className="flex items-center justify-between mb-3">
+                  <h3 className="text-xs font-semibold uppercase tracking-wider text-lagoon-deep">
+                    交互问题流 ({session.questions.length})
+                  </h3>
+                  <span className="text-[11px] text-sea-ink-soft">
+                    按推送顺序排序
+                  </span>
+                </div>
                 <div className="space-y-3">
-                  {session.questions?.map((q: QuestionSummary) => (
+                  {session.questions.map((q: QuestionSummary) => (
                     <QuestionCard key={q.id} question={q} />
                   ))}
-                  {(!session.questions || session.questions.length === 0) && (
-                    <p className="py-8 text-center text-muted-foreground">
-                      暂无问题
-                    </p>
+                  {session.questions.length === 0 && (
+                    <div className="border border-dashed border-line bg-sand/30 py-8 text-center text-xs text-sea-ink-soft">
+                      该会话目前尚未产生任何问题
+                    </div>
                   )}
                 </div>
               </div>
             </div>
           ) : (
-            <div className="py-12 text-center text-muted-foreground">
-              会话不存在
+            <div className="py-16 text-center text-xs text-sea-ink-soft">
+              会话不存在或已被归档清理
             </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={onClose}
+          >
+            关闭详情
+          </Button>
+          <Button
+            type="button"
+            className="rounded-none bg-lagoon text-foam hover:bg-lagoon-deep flex-1"
+            onClick={() => window.open('/interact', '_blank')}
+          >
+            <span>进入问答交互大厅</span>
+            <ExternalLink className="ml-1.5 size-3.5" />
+          </Button>
+        </div>
       </SheetContent>
     </Sheet>
   )
diff --git a/web/src/components/settings/settings-sidebar.tsx b/web/src/components/settings/settings-sidebar.tsx
index 62aeccf..c2a4c6b 100644
--- a/web/src/components/settings/settings-sidebar.tsx
+++ b/web/src/components/settings/settings-sidebar.tsx
@@ -1,5 +1,5 @@
 import { useMemo, useState } from 'react'
-import { useNavigate, useSearch } from '@tanstack/react-router'
+import { useLocation, useNavigate, useSearch } from '@tanstack/react-router'
 import { motion } from 'motion/react'
 import { Search } from 'lucide-react'
 import {
@@ -14,6 +14,8 @@ export type SettingsTabId =
   | 'site'
   | 'profile'
   | 'apikey'
+  | 'ssh'
+  | 'workspace'
   | 'qa'
   | 'preview'
   | 'repowiki'
@@ -39,7 +41,7 @@ export interface SettingsCategoryGroup {
 
 export const SETTINGS_GROUPS: SettingsCategoryGroup[] = [
   {
-    groupLabel: '基础标识',
+    groupLabel: '账号与凭据',
     items: [
       {
         id: 'site',
@@ -67,6 +69,29 @@ export const SETTINGS_GROUPS: SettingsCategoryGroup[] = [
         keywords: ['apikey', 'token', '令牌', '密钥'],
         externalPath: '/console/apikey',
       },
+      {
+        id: 'ssh',
+        name: 'SSH 密钥',
+        slug: 'sys.ssh.*',
+        chip: '加密',
+        description: '配置用于访问私有 Git 仓库与 RepoWiki 的 SSH 密钥。',
+        keywords: ['ssh', 'git', '密钥', '私钥', '公钥'],
+        externalPath: '/console/ssh',
+      },
+    ],
+  },
+  {
+    groupLabel: '空间与组织',
+    items: [
+      {
+        id: 'workspace',
+        name: '工作空间',
+        slug: 'sys.workspace.*',
+        chip: '多空间',
+        description: '管理工作空间隔离环境、空间图标与默认空间标记。',
+        keywords: ['workspace', '工作空间', '空间', '隔离', '租户'],
+        externalPath: '/console/workspace',
+      },
     ],
   },
   {
@@ -155,10 +180,19 @@ export const SETTINGS_GROUPS: SettingsCategoryGroup[] = [
 
 export function SettingsSidebar() {
   const navigate = useNavigate()
+  const location = useLocation()
   const search = useSearch({ strict: false })
-  const currentTab = search.tab || 'site'
+  const fromParam = (search as { from?: string }).from
   const [filterQuery, setFilterQuery] = useState('')
 
+  const currentTab = useMemo(() => {
+    if (location.pathname === '/console/profile') return 'profile'
+    if (location.pathname === '/console/apikey') return 'apikey'
+    if (location.pathname === '/console/ssh') return 'ssh'
+    if (location.pathname === '/console/workspace') return 'workspace'
+    return (search as { tab?: string }).tab || 'site'
+  }, [location.pathname, search])
+
   const filteredGroups = useMemo(() => {
     if (!filterQuery.trim()) return SETTINGS_GROUPS
     const q = filterQuery.toLowerCase().trim()
@@ -175,12 +209,18 @@ export function SettingsSidebar() {
 
   const handleSelectTab = (item: SettingsCategoryItem) => {
     if (item.externalPath) {
-      void navigate({ to: item.externalPath })
+      void (navigate as any)({
+        to: item.externalPath,
+        search: fromParam ? { from: fromParam } : undefined,
+      })
       return
     }
-    void navigate({
+    void (navigate as any)({
       to: '/console/settings',
-      search: { tab: item.id as 'site' | 'qa' | 'preview' | 'repowiki' | 'security' | 'provider' | 'model' | 'agent' },
+      search: {
+        tab: item.id,
+        ...(fromParam ? { from: fromParam } : {}),
+      },
       replace: true,
     })
   }
diff --git a/web/src/hooks/usePreviewAdmin.ts b/web/src/hooks/usePreviewAdmin.ts
index 0be778e..293b247 100644
--- a/web/src/hooks/usePreviewAdmin.ts
+++ b/web/src/hooks/usePreviewAdmin.ts
@@ -39,6 +39,14 @@ export function useDeletePreviewSession() {
   })
 }
 
+export function usePreviewSessionDetail(hash: string | null) {
+  return useQuery({
+    queryKey: ['preview', 'session-detail', hash],
+    queryFn: () => api.getPreviewSessionDetail(hash!),
+    enabled: Boolean(hash),
+  })
+}
+
 export function useDeletePreviewFile() {
   const queryClient = useQueryClient()
   return useMutation({
diff --git a/web/src/lib/apis/pages.ts b/web/src/lib/apis/pages.ts
index e9b68d2..3d672e2 100644
--- a/web/src/lib/apis/pages.ts
+++ b/web/src/lib/apis/pages.ts
@@ -14,6 +14,7 @@ import type { PromotePreviewSessionRequest } from './preview'
 export interface PageListParams {
   project_id?: string
   workspace_id?: string
+  status?: string
   page?: number
   size?: number
 }
diff --git a/web/src/lib/models/request/project.ts b/web/src/lib/models/request/project.ts
index 5a6eba8..c9572b2 100644
--- a/web/src/lib/models/request/project.ts
+++ b/web/src/lib/models/request/project.ts
@@ -18,4 +18,5 @@ export interface ProjectListParams {
   page?: number
   size?: number
   workspace_id?: string
+  search?: string
 }
diff --git a/web/src/routes/console.tsx b/web/src/routes/console.tsx
index d855d9a..c38d2e5 100644
--- a/web/src/routes/console.tsx
+++ b/web/src/routes/console.tsx
@@ -4,8 +4,9 @@ import {
   redirect,
   useLocation,
   useNavigate,
+  useSearch,
 } from '@tanstack/react-router'
-import { motion, AnimatePresence } from 'motion/react'
+import { motion } from 'motion/react'
 import { ArrowLeft } from 'lucide-react'
 import { Button } from '@lumina/components/ui/button'
 import {
@@ -48,9 +49,23 @@ const headerVariants = {
 function ConsoleLayout() {
   const location = useLocation()
   const navigate = useNavigate()
+  const search = useSearch({ strict: false }) as unknown as { from?: string }
+
   const isSettingsRoute =
     location.pathname === '/console/settings' ||
-    location.pathname.startsWith('/console/settings/')
+    location.pathname.startsWith('/console/settings/') ||
+    location.pathname === '/console/profile' ||
+    location.pathname === '/console/apikey' ||
+    location.pathname === '/console/ssh' ||
+    location.pathname === '/console/workspace'
+
+  const handleExitSettings = () => {
+    if (search.from && search.from.startsWith('/console/')) {
+      void navigate({ to: search.from })
+    } else {
+      void navigate({ to: '/console/dashboard' })
+    }
+  }
 
   return (
     <SidebarProvider>
@@ -74,41 +89,27 @@ function ConsoleLayout() {
             <ConsoleBreadcrumb />
           </div>
 
-          {/* 🌟 系统设置下顶栏右侧集中唯一的退出返回按钮 */}
+          {/* 🌟 设置中心顶栏右侧统一的退出返回按钮 */}
           {isSettingsRoute && (
             <Button
               variant="outline"
               size="sm"
-              onClick={() => void navigate({ to: '/console/dashboard' })}
+              onClick={handleExitSettings}
               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)"
+              title="退出设置并返回"
             >
               <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>
+              <span>{search.from ? '返回来源页面' : '退出设置返回看板'}</span>
             </Button>
           )}
         </motion.div>
 
-        <div
+        <main
           id="console-main"
           className="flex min-w-0 flex-1 flex-col gap-4 p-4 pt-0"
         >
-          <AnimatePresence mode="wait">
-            <motion.div
-              key={location.pathname}
-              className="min-w-0"
-              initial={{ opacity: 0, x: 30 }}
-              animate={{ opacity: 1, x: 0 }}
-              exit={{ opacity: 0, x: -15 }}
-              transition={{ duration: 0.3, ease }}
-            >
-              <Outlet />
-            </motion.div>
-          </AnimatePresence>
-        </div>
+          <Outlet />
+        </main>
       </SidebarInset>
 
       <Toaster />
diff --git a/web/src/routes/console/pages/index.tsx b/web/src/routes/console/pages/index.tsx
index f409346..b741adf 100644
--- a/web/src/routes/console/pages/index.tsx
+++ b/web/src/routes/console/pages/index.tsx
@@ -1,34 +1,22 @@
-import { useState } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import { createFileRoute } from '@tanstack/react-router'
 import { motion } from 'motion/react'
-import { Archive, ExternalLink, Shield } from 'lucide-react'
+import { Archive, ExternalLink, Eye, Search, Shield } from 'lucide-react'
 import { Button } from '@lumina/components/ui/button'
 import { Input } from '@lumina/components/ui/input'
-import { Label } from '@lumina/components/ui/label'
 import { Skeleton } from '@lumina/components/ui/skeleton'
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from '@lumina/components/ui/dialog'
 import { PageHeader } from '#/components/page-header'
 import { ConfirmDeleteDialog } from '#/components/confirm-delete-dialog'
 import { DataTablePagination } from '#/components/data-table-pagination'
 import { useCurrentWorkspace } from '#/hooks/useCurrentWorkspace'
-import {
-  useArchivePage,
-  usePageList,
-  useUpdateAccessPolicy,
-} from '#/hooks/usePages'
+import { useArchivePage, usePageList } from '#/hooks/usePages'
+import { PageDetailSheet } from '#/components/pages/page-detail-sheet'
 import { staggerContainer, staggerItem } from '@lumina/components/motion'
 import { formatDateTime } from '#/lib/format-date'
 import type { PageItem } from '#/lib/models/response/pages'
 
 export const Route = createFileRoute('/console/pages/')({
-  staticData: { crumb: '页面' },
+  staticData: { crumb: '页面管理' },
   component: ConsolePagesPage,
 })
 
@@ -36,228 +24,282 @@ function ConsolePagesPage() {
   const [page, setPage] = useState(1)
   const [pageSize, setPageSize] = useState(10)
   const [tab, setTab] = useState<'published' | 'archived'>('published')
+  const [searchQuery, setSearchQuery] = useState('')
+
   const [archiveTarget, setArchiveTarget] = useState<PageItem | null>(null)
-  const [policyTarget, setPolicyTarget] = useState<PageItem | null>(null)
-  const [accessMode, setAccessMode] = useState<'public' | 'password'>('public')
-  const [password, setPassword] = useState('')
+  const [detailTarget, setDetailTarget] = useState<PageItem | null>(null)
+  const [detailMode, setDetailMode] = useState<'view' | 'policy'>('view')
+
   const { current } = useCurrentWorkspace()
+
+  // 🌟 Q-04 切换工作空间时重置选中态
+  useEffect(() => {
+    setPage(1)
+    setArchiveTarget(null)
+    setDetailTarget(null)
+  }, [current?.id])
+
   const { data, isLoading } = usePageList({
     page,
     size: pageSize,
     workspace_id: current?.id,
+    status: tab,
   })
   const archive = useArchivePage()
-  const updatePolicy = useUpdateAccessPolicy()
-  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 publishedItems = items.filter((item) => item.status === 'published')
-  const archivedItems = items.filter((item) => item.status === 'archived')
-  const currentItems = tab === 'published' ? publishedItems : archivedItems
+  // 客户端检索过滤
+  const items = useMemo(() => {
+    if (!searchQuery.trim()) return rawItems
+    const q = searchQuery.toLowerCase().trim()
+    return rawItems.filter(
+      (item) =>
+        (item.title && item.title.toLowerCase().includes(q)) ||
+        item.slug.toLowerCase().includes(q) ||
+        (item.project_name && item.project_name.toLowerCase().includes(q)),
+    )
+  }, [rawItems, searchQuery])
 
-  const publishedCount = publishedItems.length
-  const archivedCount = archivedItems.length
-  const protectedCount = publishedItems.filter(
-    (item) => item.access_mode === 'password',
-  ).length
+  const handleTabChange = (nextTab: 'published' | 'archived') => {
+    setTab(nextTab)
+    setPage(1)
+  }
 
   return (
     <motion.div
       initial="hidden"
       animate="visible"
       variants={staggerContainer}
-      className="mx-auto max-w-5xl space-y-8"
+      className="space-y-4"
     >
       <PageHeader
-        title="页面管理"
-        description="管理已发布的即时页面、版本生效指针与访问策略。密码保护只在这里设置。"
+        title="即时页面管理"
+        description="管理从前端原型沙盒晋升的不可变即时页面快照、版本生效指针与安全访问策略"
       />
 
-      {/* ─── KPI band ─── */}
+      {/* ─── KPI 指标带 ─── */}
       <motion.div variants={staggerItem}>
-        <div className="grid grid-cols-2 md:grid-cols-4 border-b border-line">
-          <Kpi
-            label="线上已发布"
-            value={publishedCount}
-            delta="对外开放访问中"
-            loading={isLoading}
-          />
-          <Kpi
-            label="密码保护"
-            value={protectedCount}
-            delta="受口令安全策略保护"
-            loading={isLoading}
-          />
-          <Kpi
-            label="归档收纳"
-            value={archivedCount}
-            delta="已停用并收纳历史页"
-            loading={isLoading}
-          />
-          <Kpi
-            label="总记录数"
-            value={totalItems}
-            delta="当前空间全部页面"
-            loading={isLoading}
-            last
-          />
+        <div className="grid grid-cols-2 md:grid-cols-4 border border-line bg-sand/30">
+          <div className="p-4 border-r border-line">
+            <span className="text-[10.5px] font-bold uppercase tracking-wider text-sea-ink-soft block">
+              当前视图记录
+            </span>
+            <span className="font-mono text-xl font-semibold text-lagoon-deep">
+              {totalItems}
+            </span>
+            <p className="text-[11px] text-sea-ink-soft mt-0.5">
+              {tab === 'published' ? '对外开放访问中' : '历史收纳归档箱'}
+            </p>
+          </div>
+          <div className="p-4 border-r border-line">
+            <span className="text-[10.5px] font-bold uppercase tracking-wider text-sea-ink-soft block">
+              受密码门保护 (当页)
+            </span>
+            <span className="font-mono text-xl font-semibold text-sea-ink">
+              {items.filter((i) => i.access_mode === 'password').length}
+            </span>
+            <p className="text-[11px] text-sea-ink-soft mt-0.5">
+              受 HMAC 安全口令守护
+            </p>
+          </div>
+          <div className="p-4 border-r border-line">
+            <span className="text-[10.5px] font-bold uppercase tracking-wider text-sea-ink-soft block">
+              当前筛选分类
+            </span>
+            <span className="text-sm font-semibold text-sea-ink block mt-1">
+              {tab === 'published' ? '线上已发布页面' : '归档收纳存储'}
+            </span>
+          </div>
+          <div className="p-4">
+            <span className="text-[10.5px] font-bold uppercase tracking-wider text-sea-ink-soft block">
+              每页分页容量
+            </span>
+            <span className="font-mono text-xl font-semibold text-sea-ink">
+              {pageSize}
+            </span>
+            <p className="text-[11px] text-sea-ink-soft mt-0.5">条记录 / 页</p>
+          </div>
         </div>
       </motion.div>
 
-      {/* ─── 页面列表区域（方案 A：Tab 隔离收纳） ─── */}
-      <motion.div variants={staggerItem} className="space-y-4">
-        <div className="flex items-center justify-between border-b border-line">
-          <div className="-mb-px flex items-center gap-2">
+      {/* ─── 工具栏与 Tab 分类 ─── */}
+      <motion.div variants={staggerItem} className="space-y-3">
+        <div className="flex flex-wrap items-center justify-between gap-3 border-b border-line pb-3">
+          <div className="flex items-center border border-line bg-foam p-0.5">
             <button
               type="button"
-              onClick={() => setTab('published')}
-              className={`flex items-center gap-2 border-b-2 px-4 py-3 text-sm font-semibold transition-colors ${
+              onClick={() => handleTabChange('published')}
+              className={`px-3 py-1 text-xs transition-colors flex items-center gap-1.5 ${
                 tab === 'published'
-                  ? 'border-lagoon text-sea-ink'
-                  : 'border-transparent text-sea-ink-soft hover:text-sea-ink'
+                  ? 'bg-lagoon text-foam font-semibold'
+                  : 'text-sea-ink-soft hover:text-sea-ink'
               }`}
             >
               <span>已发布页面</span>
-              <span
-                className={`px-1.5 py-0.5 text-xs font-mono font-bold ${
-                  tab === 'published'
-                    ? 'bg-lagoon text-foam'
-                    : 'border border-line bg-chip-bg text-sea-ink-soft'
-                }`}
-              >
-                {publishedCount}
+              <span className="font-mono text-[10px] opacity-80">
+                {tab === 'published' ? totalItems : ''}
               </span>
             </button>
             <button
               type="button"
-              onClick={() => setTab('archived')}
-              className={`flex items-center gap-2 border-b-2 px-4 py-3 text-sm font-semibold transition-colors ${
+              onClick={() => handleTabChange('archived')}
+              className={`px-3 py-1 text-xs transition-colors flex items-center gap-1.5 ${
                 tab === 'archived'
-                  ? 'border-lagoon text-sea-ink'
-                  : 'border-transparent text-sea-ink-soft hover:text-sea-ink'
+                  ? 'bg-sea-ink text-foam font-semibold'
+                  : 'text-sea-ink-soft hover:text-sea-ink'
               }`}
             >
-              <Archive className="size-3.5" />
+              <Archive className="size-3" />
               <span>归档收纳箱</span>
-              <span
-                className={`px-1.5 py-0.5 text-xs font-mono font-bold ${
-                  tab === 'archived'
-                    ? 'bg-lagoon text-foam'
-                    : 'border border-line bg-chip-bg text-sea-ink-soft'
-                }`}
-              >
-                {archivedCount}
+              <span className="font-mono text-[10px] opacity-80">
+                {tab === 'archived' ? totalItems : ''}
               </span>
             </button>
           </div>
-          <span className="text-xs text-sea-ink-soft">
-            共 {items.length} 个页面记录
-          </span>
+
+          <div className="flex items-center gap-2 border border-line bg-foam px-2.5 py-1 w-64 focus-within:border-lagoon">
+            <Search className="size-3.5 text-sea-ink-soft shrink-0" />
+            <Input
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              placeholder="过滤当前页 Slug 或项目..."
+              className="h-6 border-0 bg-transparent p-0 text-xs shadow-none focus-visible:ring-0"
+            />
+          </div>
         </div>
 
-        <div>
+        {/* ─── 页面台账列表 ─── */}
+        <div className="border border-line bg-surface">
           {isLoading ? (
-            <div className="space-y-2 py-4">
-              <Skeleton className="h-12 w-full" />
-              <Skeleton className="h-12 w-full" />
-              <Skeleton className="h-12 w-full" />
+            <div className="space-y-2 p-4">
+              <Skeleton className="h-14 w-full" />
+              <Skeleton className="h-14 w-full" />
+              <Skeleton className="h-14 w-full" />
             </div>
-          ) : currentItems.length === 0 ? (
-            <div className="border border-line px-8 py-16 text-center">
-              <p className="display-title text-xl font-semibold text-sea-ink">
-                {tab === 'published' ? '暂无已发布页面' : '归档箱为空'}
+          ) : items.length === 0 ? (
+            <div className="border-b border-line px-8 py-16 text-center">
+              <p className="text-sm font-semibold text-sea-ink">
+                {tab === 'published'
+                  ? '暂无已发布的即时页面'
+                  : '归档收纳箱为空'}
               </p>
-              <p className="mt-2.5 text-sm text-sea-ink-soft">
+              <p className="mt-1 text-xs text-sea-ink-soft">
                 {tab === 'published'
-                  ? '从 Preview 工作台晋升后会出现在这里。'
-                  : '已下线或不再对外展示的页面会被收纳在这里，不占用线上主列表展示。'}
+                  ? '从 Preview 预览工作台核验通过后晋升即可呈现在此。'
+                  : '已下线的历史页面将被安全收纳于此，不影响线上服务。'}
               </p>
             </div>
           ) : (
-            currentItems.map((item) => (
-              <div
-                key={item.id}
-                className="flex items-center gap-4 border-b border-line px-1 py-4 transition-colors hover:bg-chip-bg"
-              >
-                <div className="min-w-0 flex-1">
-                  <div className="flex flex-wrap items-center gap-2.5">
-                    <p className="truncate text-sm font-semibold text-sea-ink">
-                      {item.title}
-                    </p>
-                    {item.status === 'archived' ? (
-                      <span className="inline-flex items-center border border-line bg-chip-bg px-1.5 py-0.5 text-[11px] font-medium text-sea-ink-soft">
-                        已收纳
+            items.map((item) => {
+              const isPassword = item.access_mode === 'password'
+              const publicUrl = `/pages/${item.project_name || item.project_id}/${item.slug}`
+
+              return (
+                <div
+                  key={item.id}
+                  className="flex items-center justify-between gap-4 border-b border-line px-4 py-3.5 transition-colors hover:bg-chip-bg last:border-b-0"
+                >
+                  <div className="min-w-0 flex-1 flex flex-col gap-1">
+                    <div className="flex items-center gap-2">
+                      <span
+                        onClick={() => {
+                          setDetailTarget(item)
+                          setDetailMode('view')
+                        }}
+                        className="cursor-pointer font-semibold text-sm text-sea-ink hover:text-lagoon transition-colors truncate max-w-lg"
+                        title={item.title || item.slug}
+                      >
+                        {item.title || item.slug}
                       </span>
-                    ) : item.access_mode === 'password' ? (
-                      <span className="inline-flex items-center gap-1 border border-chip-line bg-lagoon/10 px-1.5 py-0.5 text-[11px] font-medium text-lagoon-deep">
-                        <Shield className="size-3" />
-                        密码保护
+                      <span
+                        className={`font-mono text-[10px] px-1.5 py-0.5 border ${
+                          item.status === 'published'
+                            ? 'border-chip-line bg-lagoon/10 text-lagoon-deep font-semibold'
+                            : 'border-line bg-chip-bg text-sea-ink-soft'
+                        }`}
+                      >
+                        {item.status === 'published' ? '已上线' : '已归档'}
                       </span>
-                    ) : (
-                      <span className="inline-flex items-center border border-line bg-chip-bg px-1.5 py-0.5 text-[11px] font-medium text-sea-ink-soft">
-                        公开访问
+                      <span
+                        className={`font-mono text-[10px] px-1.5 py-0.5 border flex items-center gap-1 ${
+                          isPassword
+                            ? 'border-destructive/30 bg-destructive/10 text-destructive'
+                            : 'border-line bg-sand text-sea-ink-soft'
+                        }`}
+                      >
+                        {isPassword && <Shield className="size-2.5" />}
+                        {isPassword ? '密码门' : '公开'}
                       </span>
-                    )}
-                  </div>
-                  <div className="mt-1 flex flex-wrap items-center gap-2.5 text-xs text-sea-ink-soft">
-                    <span className="border border-line bg-surface px-1.5 py-0.5 font-mono text-sea-ink">
-                      /{item.project_name}/{item.slug}/
-                    </span>
-                    <span className="font-mono font-semibold text-lagoon-deep">
-                      {item.latest_version}
-                    </span>
-                    <span>·</span>
-                    <span>更新于 {formatDateTime(item.updated_at)}</span>
+                    </div>
+
+                    <div className="flex flex-wrap items-center gap-2 text-xs text-sea-ink-soft">
+                      <span className="font-mono text-sea-ink bg-sand/60 px-1.5 py-0.2 border border-line">
+                        /{item.project_name || item.project_id}/{item.slug}/
+                      </span>
+                      <span>•</span>
+                      <span className="font-mono text-lagoon-deep font-medium">
+                        版本 {item.latest_version || 'v1'}
+                      </span>
+                      <span>•</span>
+                      <span>更新于 {formatDateTime(item.updated_at)}</span>
+                    </div>
                   </div>
-                </div>
 
-                {item.status === 'published' ? (
-                  <>
-                    {/* page_url 的域名在 site.domain 未配置时回退 localhost，跨部署不可靠；
-                        改用相对裸路径，入口由展示页按 version.entry_filename 兜底解析 */}
-                    <a
-                      href={`/pages/${item.project_name}/${item.slug}/`}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      className="grid size-11 place-items-center text-sea-ink-soft transition-colors hover:text-sea-ink"
-                      title="在新标签页打开访问地址"
-                      aria-label={`打开 ${item.title} 线上页面`}
-                    >
-                      <ExternalLink className="size-3.5" />
-                    </a>
-                    <button
-                      type="button"
-                      className="grid size-11 place-items-center text-sea-ink-soft transition-colors hover:text-sea-ink"
+                  <div className="flex shrink-0 items-center gap-1.5">
+                    <Button
+                      variant="outline"
+                      size="sm"
                       onClick={() => {
-                        setPolicyTarget(item)
-                        setAccessMode(item.access_mode)
-                        setPassword('')
+                        setDetailTarget(item)
+                        setDetailMode('view')
                       }}
-                      title="配置安全与访问策略"
-                      aria-label={`配置 ${item.title} 安全策略`}
+                      className="h-7 text-xs rounded-none border-line px-2 text-sea-ink hover:bg-foam"
+                      title="打开页面全景抽屉查看版本与资产"
                     >
-                      <Shield className="size-3.5" />
-                    </button>
-                    <button
-                      type="button"
-                      onClick={() => setArchiveTarget(item)}
-                      className="grid size-11 place-items-center text-sea-ink-soft transition-colors hover:text-destructive"
-                      title="收纳归档此页面"
-                      aria-label={`归档 ${item.title}`}
+                      <Eye className="mr-1 size-3" />
+                      全景详情
+                    </Button>
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      onClick={() => {
+                        setDetailTarget(item)
+                        setDetailMode('policy')
+                      }}
+                      className="h-7 text-xs rounded-none border-line px-2 text-sea-ink hover:bg-foam"
+                      title="就地调整安全与密码门策略"
                     >
-                      <Archive className="size-3.5" />
-                    </button>
-                  </>
-                ) : (
-                  <div className="flex items-center gap-2 pr-2">
-                    <span className="text-xs text-sea-ink-soft">
-                      已归档收纳
-                    </span>
+                      <Shield className="mr-1 size-3 text-lagoon" />
+                      策略
+                    </Button>
+                    {item.status === 'published' ? (
+                      <>
+                        <Button
+                          size="sm"
+                          onClick={() => window.open(publicUrl, '_blank')}
+                          className="h-7 text-xs rounded-none bg-primary text-primary-foreground hover:bg-primary/90 px-2"
+                          title="在新窗口中访问页面"
+                        >
+                          <ExternalLink className="mr-1 size-3" />
+                          访问
+                        </Button>
+                        <button
+                          type="button"
+                          onClick={() => setArchiveTarget(item)}
+                          className="grid size-7 place-items-center text-sea-ink-soft transition-colors hover:bg-destructive/10 hover:text-destructive border border-transparent hover:border-destructive/30"
+                          title="收纳归档此页面"
+                        >
+                          <Archive className="size-3.5" />
+                        </button>
+                      </>
+                    ) : null}
                   </div>
-                )}
-              </div>
-            ))
+                </div>
+              )
+            })
           )}
         </div>
 
@@ -276,117 +318,33 @@ function ConsolePagesPage() {
         ) : null}
       </motion.div>
 
+      {/* 归档确认弹窗 */}
       <ConfirmDeleteDialog
         open={!!archiveTarget}
         onOpenChange={(open) => {
           if (!open) setArchiveTarget(null)
         }}
-        title="归档页面"
-        description={`确定归档「${archiveTarget?.title}」？归档后对外路径将不可访问，页面将移入「归档收纳箱」。`}
+        title="确认归档页面"
+        description={`确定归档「${archiveTarget?.title || archiveTarget?.slug}」吗？归档后对外公开路径将关闭，页面将移入「归档收纳箱」。`}
         onConfirm={() => {
-          if (archiveTarget) archive.mutate(archiveTarget.id)
-          setArchiveTarget(null)
+          if (archiveTarget) {
+            archive.mutate(archiveTarget.id, {
+              onSuccess: () => setArchiveTarget(null),
+            })
+          }
         }}
         isPending={archive.isPending}
       />
 
-      <Dialog
-        open={!!policyTarget}
+      {/* 🌟 即时页面全景资产抽屉 (包含版本快照时间线、在位策略编辑与 Fork) */}
+      <PageDetailSheet
+        open={!!detailTarget}
         onOpenChange={(open) => {
-          if (!open) setPolicyTarget(null)
+          if (!open) setDetailTarget(null)
         }}
-      >
-        <DialogContent className="border-line sm:max-w-md">
-          <DialogHeader>
-            <DialogTitle>页面安全设置</DialogTitle>
-            <DialogDescription>
-              访问策略只在管理员端口配置，不会出现在晋升弹窗里。
-            </DialogDescription>
-          </DialogHeader>
-          <div className="space-y-3 py-2">
-            <label className="flex items-center gap-2 text-sm">
-              <input
-                type="radio"
-                checked={accessMode === 'public'}
-                onChange={() => setAccessMode('public')}
-              />
-              公开访问
-            </label>
-            <label className="flex items-center gap-2 text-sm">
-              <input
-                type="radio"
-                checked={accessMode === 'password'}
-                onChange={() => setAccessMode('password')}
-              />
-              密码保护
-            </label>
-            {accessMode === 'password' ? (
-              <div className="space-y-1">
-                <Label>访问密码</Label>
-                <Input
-                  type="password"
-                  value={password}
-                  onChange={(event) => setPassword(event.target.value)}
-                />
-              </div>
-            ) : null}
-          </div>
-          <DialogFooter>
-            <Button variant="outline" onClick={() => setPolicyTarget(null)}>
-              取消
-            </Button>
-            <Button
-              disabled={
-                updatePolicy.isPending ||
-                (accessMode === 'password' && !password)
-              }
-              onClick={() => {
-                if (!policyTarget) return
-                updatePolicy.mutate({
-                  id: policyTarget.id,
-                  access_mode: accessMode,
-                  password: accessMode === 'password' ? password : undefined,
-                })
-                setPolicyTarget(null)
-              }}
-            >
-              保存生效
-            </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
+        item={detailTarget}
+        initialMode={detailMode}
+      />
     </motion.div>
   )
 }
-
-function Kpi({
-  label,
-  value,
-  delta,
-  loading,
-  last,
-}: {
-  label: string
-  value?: number
-  delta?: string
-  loading?: boolean
-  last?: boolean
-}) {
-  return (
-    <div
-      className={`py-7 ${last ? '' : 'border-r border-line'} first:pl-0 md:px-6`}
-    >
-      <p className="text-[10.5px] font-bold uppercase tracking-[0.18em] text-sea-ink-soft">
-        {label}
-      </p>
-      {loading ? (
-        <Skeleton className="mt-3 h-11 w-16" />
-      ) : (
-        <p className="display-title mt-3 text-5xl font-medium tracking-tight text-sea-ink">
-          {value ?? 0}
-        </p>
-      )}
-      {delta && <p className="mt-2 text-[11.5px] text-sea-ink-soft">{delta}</p>}
-    </div>
-  )
-}
diff --git a/web/src/routes/console/pin.tsx b/web/src/routes/console/pin.tsx
index c521792..81ba9b0 100644
--- a/web/src/routes/console/pin.tsx
+++ b/web/src/routes/console/pin.tsx
@@ -1,14 +1,15 @@
-import { useState } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import { createFileRoute } from '@tanstack/react-router'
 import { motion } from 'motion/react'
-import { Pencil, Plus, Trash2 } from 'lucide-react'
+import { Eye, Pencil, Plus, Search, Trash2 } from 'lucide-react'
 import { Button } from '@lumina/components/ui/button'
+import { Input } from '@lumina/components/ui/input'
 import { DataTablePagination } from '#/components/data-table-pagination'
 import { usePinList, useDeletePin } from '#/hooks/usePin'
 import { useProjectNameMap } from '#/hooks/useProject'
 import { useCurrentWorkspace } from '#/hooks/useCurrentWorkspace'
 import { CreatePinDialog } from '#/components/pin/create-dialog'
-import { EditPinDialog } from '#/components/pin/edit-dialog'
+import { PinDetailSheet } from '#/components/pin/pin-detail-sheet'
 import { ConfirmDeleteDialog } from '#/components/confirm-delete-dialog'
 import { Skeleton } from '@lumina/components/ui/skeleton'
 import { staggerContainer, staggerItem } from '@lumina/components/motion'
@@ -17,65 +18,51 @@ import { formatDate } from '#/lib/format-date'
 import type { PinItem } from '#/lib/models/response/pin'
 
 export const Route = createFileRoute('/console/pin')({
-  staticData: { crumb: 'Pin 管理' },
+  staticData: { crumb: 'Pin 约束' },
   component: PinPage,
 })
 
-// ── 筛选选项常量 ──
-const statusOptions = [
-  { value: '', label: '全部' },
+const STATUS_FILTERS = [
+  { value: '', label: '全部状态' },
   { value: 'pending', label: '待消费' },
   { value: 'consumed', label: '已消费' },
-]
+] as const
 
-const categoryOptions = [
-  { value: '', label: '全部' },
+const CATEGORY_FILTERS = [
+  { value: '', label: '全部分类' },
   { value: 'notice', label: '注意事项' },
   { value: 'dependency', label: '依赖约束' },
   { value: 'api_change', label: '接口变更' },
   { value: 'other', label: '其他' },
-]
+] as const
 
 const categoryLabels: Record<string, string> = {
   notice: '注意事项',
   dependency: '依赖约束',
   api_change: '接口变更',
+  other: '其他',
 }
 
 const priorityStyles: Record<string, string> = {
-  high: 'border-destructive/30 bg-destructive/10 text-destructive',
+  high: 'border-destructive/40 bg-destructive/10 text-destructive',
   medium: 'border-chip-line bg-lagoon/10 text-lagoon-deep',
   low: 'border-line bg-chip-bg text-sea-ink-soft',
 }
 
 const priorityLabels: Record<string, string> = {
-  high: '高',
-  medium: '中',
-  low: '低',
-}
-
-function PinBadge({
-  className,
-  children,
-}: {
-  className?: string
-  children: React.ReactNode
-}) {
-  return (
-    <span
-      className={`inline-flex items-center border px-1.5 py-0.5 text-[11px] leading-5 font-semibold ${className ?? 'border-line bg-surface text-sea-ink-soft'}`}
-    >
-      {children}
-    </span>
-  )
+  high: '高优',
+  medium: '中优',
+  low: '低优',
 }
 
 function PinRow({
   item,
+  onView,
   onEdit,
   onDelete,
 }: {
   item: PinItem
+  onView: (item: PinItem) => void
   onEdit: (item: PinItem) => void
   onDelete: (item: PinItem) => void
 }) {
@@ -88,55 +75,77 @@ function PinRow({
   const isPending = item.status === 'pending'
 
   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 items-center justify-between gap-4 border-b border-line bg-surface px-4 py-3.5 transition-colors hover:bg-chip-bg">
+      <div className="flex min-w-0 flex-1 flex-col gap-1.5">
         <div className="flex flex-wrap items-center gap-2">
-          <span className="truncate text-sm font-semibold text-sea-ink">
+          <span
+            onClick={() => onView(item)}
+            className="cursor-pointer font-semibold text-sm text-sea-ink hover:text-lagoon transition-colors truncate max-w-md"
+            title={item.title}
+          >
             {item.title}
           </span>
-          {isPending ? (
-            <PinBadge className="border-chip-line bg-lagoon/10 text-lagoon-deep">
-              待消费
-            </PinBadge>
-          ) : (
-            <PinBadge className="border-line bg-chip-bg text-sea-ink-soft">
-              已消费
-            </PinBadge>
-          )}
-          {item.priority ? (
-            <PinBadge className={priorityStyle}>{priorityLabel}</PinBadge>
-          ) : null}
-          <PinBadge>{categoryLabel}</PinBadge>
+          <span
+            className={`font-mono text-[10px] px-1.5 py-0.5 border ${
+              isPending
+                ? 'border-chip-line bg-lagoon/10 text-lagoon-deep font-semibold'
+                : 'border-line bg-chip-bg text-sea-ink-soft'
+            }`}
+          >
+            {isPending ? '待消费' : '已消费'}
+          </span>
+          <span
+            className={`font-mono text-[10px] px-1.5 py-0.5 border ${priorityStyle}`}
+          >
+            {priorityLabel}
+          </span>
+          <span className="font-mono text-[10px] px-1.5 py-0.5 border border-line bg-sand text-sea-ink-soft">
+            {categoryLabel}
+          </span>
         </div>
+
         {item.content ? (
           <p
-            className="truncate text-[13px] text-sea-ink-soft"
+            className="truncate text-xs text-sea-ink-soft max-w-2xl font-mono"
             title={item.content}
           >
             {item.content}
           </p>
         ) : null}
-        <div className="flex flex-wrap items-center gap-2 text-xs text-sea-ink-soft">
-          <span className="font-mono text-[11.5px] text-sea-ink">
-            {fromName} <span className="text-lagoon">➔</span> {toName}
+
+        <div className="flex flex-wrap items-center gap-2 text-[11px] text-sea-ink-soft">
+          <span className="font-mono text-sea-ink bg-sand/60 px-1.5 py-0.2 border border-line">
+            {fromName} <span className="text-lagoon font-bold">➔</span> {toName}
           </span>
-          <span>·</span>
+          <span>•</span>
           <span>{formatDate(item.created_at)}</span>
         </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.title}`}
-          title="编辑约束"
+
+      <div className="flex shrink-0 items-center gap-1.5">
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() => onView(item)}
+          className="h-7 text-xs rounded-none border-line px-2 text-sea-ink hover:bg-foam"
+          title="查看约束详情"
+        >
+          <Eye className="mr-1 size-3" />
+          详情
+        </Button>
+        <Button
+          variant="outline"
+          size="sm"
           onClick={() => onEdit(item)}
+          className="h-7 text-xs rounded-none border-line px-2 text-sea-ink hover:bg-foam"
+          title="编辑约束属性"
         >
-          <Pencil className="size-3.5" />
-        </button>
+          <Pencil className="mr-1 size-3" />
+          编辑
+        </Button>
         <button
           type="button"
-          className="grid size-9 place-items-center text-sea-ink-soft transition-colors hover:bg-destructive/10 hover:text-destructive"
+          className="grid size-7 place-items-center text-sea-ink-soft transition-colors hover:bg-destructive/10 hover:text-destructive border border-transparent hover:border-destructive/30"
           aria-label={`删除 ${item.title}`}
           title="删除约束"
           onClick={() => onDelete(item)}
@@ -153,12 +162,25 @@ function PinPage() {
   const [pageSize, setPageSize] = useState(10)
   const [statusFilter, setStatusFilter] = useState('')
   const [categoryFilter, setCategoryFilter] = useState('')
+  const [searchQuery, setSearchQuery] = useState('')
+
   const [createOpen, setCreateOpen] = useState(false)
-  const [editOpen, setEditOpen] = useState(false)
+  const [detailOpen, setDetailOpen] = useState(false)
+  const [detailMode, setDetailMode] = useState<'view' | 'edit'>('view')
   const [deleteOpen, setDeleteOpen] = useState(false)
   const [selectedItem, setSelectedItem] = useState<PinItem | null>(null)
 
   const { current } = useCurrentWorkspace()
+
+  // 🌟 Q-04 切换空间时清空选中态
+  useEffect(() => {
+    setPage(1)
+    setCreateOpen(false)
+    setDetailOpen(false)
+    setDeleteOpen(false)
+    setSelectedItem(null)
+  }, [current?.id])
+
   const { data, isLoading } = usePinList({
     page,
     size: pageSize,
@@ -169,18 +191,32 @@ function PinPage() {
   const showLoading = !current?.id || isLoading
   const deleteMutation = useDeletePin()
 
-  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 handleStatusChange = (value: string) => {
-    setStatusFilter(value)
+  // 前端搜索过滤
+  const items = useMemo(() => {
+    if (!searchQuery.trim()) return rawItems
+    const q = searchQuery.toLowerCase().trim()
+    return rawItems.filter(
+      (item) =>
+        item.title.toLowerCase().includes(q) ||
+        (item.content && item.content.toLowerCase().includes(q)),
+    )
+  }, [rawItems, searchQuery])
+
+  // 统计概览
+  const pendingCount = rawItems.filter((i) => i.status === 'pending').length
+  const consumedCount = rawItems.filter((i) => i.status === 'consumed').length
+
+  const handleStatusChange = (val: string) => {
+    setStatusFilter(val)
     setPage(1)
   }
 
-  const handleCategoryChange = (value: string) => {
-    setCategoryFilter(value)
+  const handleCategoryChange = (val: string) => {
+    setCategoryFilter(val)
     setPage(1)
   }
 
@@ -192,79 +228,126 @@ function PinPage() {
       variants={staggerContainer}
     >
       <PageHeader
-        title="Pin 管理"
-        description="跨项目依赖约束传递与点对点定向推送"
+        title="Pin 约束管理"
+        description="跨项目依赖约束传递与点对点定向推送，保障多仓库架构协同一致性"
         action={
           <Button
             onClick={() => setCreateOpen(true)}
-            className="bg-lagoon text-foam hover:bg-lagoon-deep"
+            className="bg-lagoon text-foam hover:bg-lagoon-deep rounded-none"
           >
-            <Plus className="mr-2 size-4" />
-            创建 Pin
+            <Plus className="mr-1.5 size-4" />
+            推送新 Pin 约束
           </Button>
         }
       />
 
-      <motion.div variants={staggerItem} className="space-y-4">
-        {/* 筛选工具栏 */}
-        <div className="flex flex-wrap items-center gap-4">
-          <div className="flex items-center gap-2">
-            <label
-              htmlFor="pin-status-filter"
-              className="text-sm text-sea-ink-soft"
-            >
-              状态
-            </label>
-            <select
-              id="pin-status-filter"
-              value={statusFilter}
-              onChange={(e) => handleStatusChange(e.target.value)}
-              className="h-8 border border-line bg-sand px-2.5 text-sm text-sea-ink outline-none transition-colors focus:border-lagoon"
-            >
-              {statusOptions.map((opt) => (
-                <option key={opt.value} value={opt.value}>
-                  {opt.label}
-                </option>
-              ))}
-            </select>
+      {/* KPI 指标带 */}
+      <motion.div variants={staggerItem}>
+        <div className="grid grid-cols-3 border border-line bg-sand/30">
+          <div className="p-4 border-r border-line">
+            <span className="text-[10.5px] font-bold uppercase tracking-wider text-sea-ink-soft block">
+              待处理约束 (当页 PENDING)
+            </span>
+            <span className="font-mono text-xl font-semibold text-lagoon-deep">
+              {pendingCount}
+            </span>
+            <p className="text-[11px] text-sea-ink-soft mt-0.5">
+              待下游消费的架构约束
+            </p>
+          </div>
+          <div className="p-4 border-r border-line">
+            <span className="text-[10.5px] font-bold uppercase tracking-wider text-sea-ink-soft block">
+              已闭环消费 (当页 CONSUMED)
+            </span>
+            <span className="font-mono text-xl font-semibold text-sea-ink">
+              {consumedCount}
+            </span>
+            <p className="text-[11px] text-sea-ink-soft mt-0.5">
+              已被下游确认消费闭环
+            </p>
+          </div>
+          <div className="p-4">
+            <span className="text-[10.5px] font-bold uppercase tracking-wider text-sea-ink-soft block">
+              当前条件总约束数
+            </span>
+            <span className="font-mono text-xl font-semibold text-sea-ink">
+              {totalItems}
+            </span>
+            <p className="text-[11px] text-sea-ink-soft mt-0.5">
+              服务端全量契约统计
+            </p>
           </div>
-          <div className="flex items-center gap-2">
-            <label
-              htmlFor="pin-category-filter"
-              className="text-sm text-sea-ink-soft"
-            >
-              分类
-            </label>
-            <select
-              id="pin-category-filter"
-              value={categoryFilter}
-              onChange={(e) => handleCategoryChange(e.target.value)}
-              className="h-8 border border-line bg-sand px-2.5 text-sm text-sea-ink outline-none transition-colors focus:border-lagoon"
-            >
-              {categoryOptions.map((opt) => (
-                <option key={opt.value} value={opt.value}>
-                  {opt.label}
-                </option>
+        </div>
+      </motion.div>
+
+      {/* Filter 胶囊组合与搜索栏 */}
+      <motion.div variants={staggerItem} className="space-y-3">
+        <div className="flex flex-wrap items-center justify-between gap-3 border-b border-line pb-3">
+          <div className="flex flex-wrap items-center gap-2">
+            {/* 状态胶囊 */}
+            <div className="flex items-center border border-line bg-foam p-0.5">
+              {STATUS_FILTERS.map((s) => (
+                <button
+                  key={s.value}
+                  type="button"
+                  onClick={() => handleStatusChange(s.value)}
+                  className={`px-2.5 py-1 text-xs transition-colors ${
+                    statusFilter === s.value
+                      ? 'bg-lagoon text-foam font-semibold'
+                      : 'text-sea-ink-soft hover:text-sea-ink'
+                  }`}
+                >
+                  {s.label}
+                </button>
+              ))}
+            </div>
+
+            {/* 分类胶囊 */}
+            <div className="flex items-center border border-line bg-foam p-0.5">
+              {CATEGORY_FILTERS.map((c) => (
+                <button
+                  key={c.value}
+                  type="button"
+                  onClick={() => handleCategoryChange(c.value)}
+                  className={`px-2.5 py-1 text-xs transition-colors ${
+                    categoryFilter === c.value
+                      ? 'bg-sea-ink text-foam font-semibold'
+                      : 'text-sea-ink-soft hover:text-sea-ink'
+                  }`}
+                >
+                  {c.label}
+                </button>
               ))}
-            </select>
+            </div>
+          </div>
+
+          {/* 搜索框 */}
+          <div className="flex items-center gap-2 border border-line bg-foam px-2.5 py-1 w-64 focus-within:border-lagoon">
+            <Search className="size-3.5 text-sea-ink-soft shrink-0" />
+            <Input
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              placeholder="过滤当前页约束标题或正文..."
+              className="h-6 border-0 bg-transparent p-0 text-xs shadow-none focus-visible:ring-0"
+            />
           </div>
         </div>
 
-        {/* 流式约束列表 */}
-        <div className="border-t border-line">
+        {/* 约束台账列表 */}
+        <div className="border border-line bg-surface">
           {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" />
+            <div className="flex flex-col gap-2 p-4">
+              <Skeleton className="h-16 w-full" />
+              <Skeleton className="h-16 w-full" />
+              <Skeleton className="h-16 w-full" />
             </div>
           ) : items.length === 0 ? (
-            <div className="py-14 text-center">
+            <div className="py-16 text-center">
               <p className="text-sm font-semibold text-sea-ink">
-                暂无匹配的约束
+                暂无匹配的 Pin 约束契约
               </p>
-              <p className="mt-1 text-[13px] text-sea-ink-soft">
-                当前队列空闲，或调整筛选条件
+              <p className="mt-1 text-xs text-sea-ink-soft">
+                当前项目队列空闲，或尝试调整上方分类/状态筛选条件
               </p>
             </div>
           ) : (
@@ -272,9 +355,15 @@ function PinPage() {
               <PinRow
                 key={item.id}
                 item={item}
+                onView={(target) => {
+                  setSelectedItem(target)
+                  setDetailMode('view')
+                  setDetailOpen(true)
+                }}
                 onEdit={(target) => {
                   setSelectedItem(target)
-                  setEditOpen(true)
+                  setDetailMode('edit')
+                  setDetailOpen(true)
                 }}
                 onDelete={(target) => {
                   setSelectedItem(target)
@@ -298,22 +387,30 @@ function PinPage() {
         />
       </motion.div>
 
+      {/* 创建对话框 */}
       <CreatePinDialog open={createOpen} onOpenChange={setCreateOpen} />
-      <EditPinDialog
-        open={editOpen}
-        onOpenChange={setEditOpen}
-        pin={selectedItem}
+
+      {/* 🌟 专属全景详情与在位编辑抽屉 */}
+      <PinDetailSheet
+        open={detailOpen}
+        onOpenChange={setDetailOpen}
+        item={selectedItem}
+        initialMode={detailMode}
       />
+
+      {/* 删除确认对话框 */}
       <ConfirmDeleteDialog
         open={deleteOpen}
         onOpenChange={(open) => {
           if (!open) setDeleteOpen(false)
         }}
-        title="删除 Pin"
-        description={`确定删除「${selectedItem?.title}」？目标项目将不再收到该约束提醒。`}
+        title="确认删除约束契约"
+        description={`确定要删除约束「${selectedItem?.title ?? ''}」吗？此操作将永久废弃该跨项目约束。`}
         onConfirm={() => {
-          if (selectedItem) deleteMutation.mutate(selectedItem.id)
-          setDeleteOpen(false)
+          if (!selectedItem) return
+          deleteMutation.mutate(selectedItem.id, {
+            onSuccess: () => setDeleteOpen(false),
+          })
         }}
         isPending={deleteMutation.isPending}
       />
diff --git a/web/src/routes/console/preview/index.tsx b/web/src/routes/console/preview/index.tsx
index 4c3a457..a5d10e8 100644
--- a/web/src/routes/console/preview/index.tsx
+++ b/web/src/routes/console/preview/index.tsx
@@ -1,6 +1,7 @@
-import { useState } from 'react'
-import { createFileRoute } from '@tanstack/react-router'
+import { useEffect, useMemo, useState } from 'react'
+import { createFileRoute, useNavigate } from '@tanstack/react-router'
 import { motion } from 'motion/react'
+import { ExternalLink, Eye, Plus, Search, Settings, Trash2 } from 'lucide-react'
 import { Button } from '@lumina/components/ui/button'
 import { Skeleton } from '@lumina/components/ui/skeleton'
 import {
@@ -20,30 +21,43 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@lumina/components/ui/select'
-import { ExternalLink, Eye, Plus, Trash2 } from 'lucide-react'
+import { PageHeader } from '#/components/page-header'
+import { ConfirmDeleteDialog } from '#/components/confirm-delete-dialog'
+import { DataTablePagination } from '#/components/data-table-pagination'
+import { useCurrentWorkspace } from '#/hooks/useCurrentWorkspace'
+import { useProjectList } from '#/hooks/useProject'
 import {
-  usePreviewSessionList,
-  useDeletePreviewSession,
   useCreatePreviewSession,
+  useDeletePreviewSession,
+  usePreviewSessionList,
 } from '#/hooks/usePreviewAdmin'
-import { useProjectList } from '#/hooks/useProject'
-import { useCurrentWorkspace } from '#/hooks/useCurrentWorkspace'
 import { useDashboardOverview } from '#/hooks/useDashboard'
 import { PreviewSessionDetailDrawer } from '#/components/preview/session-detail-drawer'
-import { ConfirmDeleteDialog } from '#/components/confirm-delete-dialog'
-import { DataTablePagination } from '#/components/data-table-pagination'
 import { staggerContainer, staggerItem } from '@lumina/components/motion'
 import { formatDateTime } from '#/lib/format-date'
 import type { PreviewSessionItem } from '#/lib/models/response/preview'
+import { toast } from 'sonner'
 
 export const Route = createFileRoute('/console/preview/')({
   staticData: { crumb: '预览管理' },
   component: PreviewPage,
 })
 
+function isPreviewExpired(session: PreviewSessionItem): boolean {
+  if (session.status === 'deleted') return true
+  if (!session.expires_at) return false
+  return new Date(session.expires_at).getTime() <= Date.now()
+}
+
 function PreviewPage() {
+  const navigate = useNavigate()
   const [page, setPage] = useState(1)
   const [pageSize, setPageSize] = useState(10)
+  const [statusFilter, setStatusFilter] = useState<
+    'all' | 'active' | 'expired'
+  >('all')
+  const [searchQuery, setSearchQuery] = useState('')
+
   const [deleteTarget, setDeleteTarget] = useState<PreviewSessionItem | null>(
     null,
   )
@@ -51,8 +65,21 @@ function PreviewPage() {
   const [createOpen, setCreateOpen] = useState(false)
   const [createTitle, setCreateTitle] = useState('')
   const [createProjectId, setCreateProjectId] = useState('')
+  const [projectSearch, setProjectSearch] = useState('')
 
   const { current } = useCurrentWorkspace()
+
+  // 🌟 Q-04 & R-02 切换工作空间时重置选中态与全部创建表单草稿
+  useEffect(() => {
+    setPage(1)
+    setDeleteTarget(null)
+    setViewTarget(null)
+    setCreateOpen(false)
+    setCreateTitle('')
+    setCreateProjectId('')
+    setProjectSearch('')
+  }, [current?.id])
+
   const { data, isLoading } = usePreviewSessionList({
     page,
     size: pageSize,
@@ -60,22 +87,48 @@ function PreviewPage() {
   })
   const showLoading = !current?.id || isLoading
   const { data: overviewData } = useDashboardOverview()
+
+  // 🌟 服务端按关键词直接检索空间项目（彻底根除 Q-05 客户端分页截断上限）
   const { data: projectData } = useProjectList({
     page: 1,
     size: 50,
     workspace_id: current?.id,
+    search: projectSearch.trim() || undefined,
   })
   const deleteMutation = useDeletePreviewSession()
   const createMutation = useCreatePreviewSession()
 
-  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 projects = projectData?.data?.items ?? []
   const previewStats = overviewData?.data?.preview
 
+  // 本地根据状态与关键词过滤
+  const items = useMemo(() => {
+    return rawItems.filter((item) => {
+      const expired = isPreviewExpired(item)
+      if (statusFilter === 'active' && expired) return false
+      if (statusFilter === 'expired' && !expired) return false
+
+      if (searchQuery.trim()) {
+        const q = searchQuery.toLowerCase().trim()
+        const titleMatch = (item.title || '').toLowerCase().includes(q)
+        const hashMatch = item.hash.toLowerCase().includes(q)
+        if (!titleMatch && !hashMatch) return false
+      }
+      return true
+    })
+  }, [rawItems, statusFilter, searchQuery])
+
+  // 新建弹窗直接使用后端检索返回的候选项目列表
+  const filteredProjects = projects
+
   const handleCreate = () => {
-    if (!createProjectId) return
+    if (!createProjectId) {
+      toast.error('请选择当前工作空间下的有效项目')
+      return
+    }
     createMutation.mutate(
       { project_id: createProjectId, title: createTitle.trim() || undefined },
       {
@@ -83,6 +136,7 @@ function PreviewPage() {
           setCreateOpen(false)
           setCreateTitle('')
           setCreateProjectId('')
+          setProjectSearch('')
         },
       },
     )
@@ -93,118 +147,228 @@ function PreviewPage() {
       initial="hidden"
       animate="visible"
       variants={staggerContainer}
-      className="mx-auto max-w-5xl space-y-8"
+      className="space-y-4"
     >
-      {/* ─── KPI band ─── */}
+      <PageHeader
+        title="预览管理"
+        description="管理 HTML/CSS/JS 与 React 前端原型沙盒会话，支持路径式寻址、实时同步与快照晋升"
+        action={
+          <div className="flex items-center gap-2">
+            <Button
+              variant="outline"
+              onClick={() =>
+                void (navigate as any)({
+                  to: '/console/settings',
+                  search: { tab: 'preview', from: '/console/preview' },
+                })
+              }
+              className="rounded-none border-line text-xs text-sea-ink hover:bg-chip-bg"
+              title="跳转至系统设置配置 Preview 沙盒配额"
+            >
+              <Settings className="mr-1.5 size-3.5 text-lagoon" />
+              Preview 沙盒配额配置
+            </Button>
+            <Button
+              onClick={() => setCreateOpen(true)}
+              className="bg-lagoon text-foam hover:bg-lagoon-deep rounded-none text-xs"
+            >
+              <Plus className="mr-1.5 size-3.5" />
+              新建预览会话
+            </Button>
+          </div>
+        }
+      />
+
+      {/* KPI 指标带 */}
       <motion.div variants={staggerItem}>
-        <div className="grid grid-cols-2 border-b border-line">
-          <Kpi
-            label="活跃会话"
-            value={previewStats?.active}
-            delta="会话以 hash 分享"
-            loading={!previewStats}
-          />
-          <Kpi
-            label="文件总数"
-            value={previewStats?.files}
-            delta="扁平单层 · 单文件 ≤ 256KB"
-            loading={!previewStats}
-            last
-          />
+        <div className="grid grid-cols-1 border border-line bg-sand/30 sm:grid-cols-3">
+          <div className="p-4 border-b border-line sm:border-b-0 sm:border-r">
+            <span className="text-[10.5px] font-bold uppercase tracking-wider text-sea-ink-soft block">
+              活跃沙盒 (ACTIVE)
+            </span>
+            <span className="font-mono text-xl font-semibold text-lagoon-deep">
+              {previewStats?.active ?? 0}
+            </span>
+            <p className="text-[11px] text-sea-ink-soft mt-0.5">
+              路径式独立沙盒可实时访问
+            </p>
+          </div>
+          <div className="p-4 border-b border-line sm:border-b-0 sm:border-r">
+            <span className="text-[10.5px] font-bold uppercase tracking-wider text-sea-ink-soft block">
+              承载文件总数
+            </span>
+            <span className="font-mono text-xl font-semibold text-sea-ink">
+              {previewStats?.files ?? 0}
+            </span>
+            <p className="text-[11px] text-sea-ink-soft mt-0.5">
+              单文件上限 256KB · 扁平组织
+            </p>
+          </div>
+          <div className="p-4">
+            <span className="text-[10.5px] font-bold uppercase tracking-wider text-sea-ink-soft block">
+              全部历史会话
+            </span>
+            <span className="font-mono text-xl font-semibold text-sea-ink">
+              {totalItems}
+            </span>
+            <p className="text-[11px] text-sea-ink-soft mt-0.5">
+              当前工作空间会话总量
+            </p>
+          </div>
         </div>
       </motion.div>
 
-      {/* ─── 会话列表 ─── */}
-      <motion.div variants={staggerItem}>
-        <div className="mb-6 flex items-center justify-between">
-          <h3 className="display-title text-lg font-semibold text-sea-ink">
-            预览会话
-            <span className="ml-1 text-lagoon">──</span>
-          </h3>
-          <Button
-            onClick={() => setCreateOpen(true)}
-            className="bg-sea-ink text-foam hover:bg-lagoon-deep"
-          >
-            <Plus className="size-4" />
-            新建会话
-          </Button>
+      {/* 工具栏与筛选胶囊 */}
+      <motion.div variants={staggerItem} className="space-y-3">
+        <div className="flex flex-wrap items-center justify-between gap-3 border-b border-line pb-3">
+          {/* 状态 Filter 胶囊 */}
+          <div className="flex items-center border border-line bg-foam p-0.5">
+            <button
+              type="button"
+              onClick={() => setStatusFilter('all')}
+              className={`px-2.5 py-1 text-xs transition-colors ${
+                statusFilter === 'all'
+                  ? 'bg-lagoon text-foam font-semibold'
+                  : 'text-sea-ink-soft hover:text-sea-ink'
+              }`}
+            >
+              全部会话
+            </button>
+            <button
+              type="button"
+              onClick={() => setStatusFilter('active')}
+              className={`px-2.5 py-1 text-xs transition-colors ${
+                statusFilter === 'active'
+                  ? 'bg-lagoon text-foam font-semibold'
+                  : 'text-sea-ink-soft hover:text-sea-ink'
+              }`}
+            >
+              活跃中
+            </button>
+            <button
+              type="button"
+              onClick={() => setStatusFilter('expired')}
+              className={`px-2.5 py-1 text-xs transition-colors ${
+                statusFilter === 'expired'
+                  ? 'bg-sea-ink text-foam font-semibold'
+                  : 'text-sea-ink-soft hover:text-sea-ink'
+              }`}
+            >
+              已过期
+            </button>
+          </div>
+
+          {/* 搜索框 */}
+          <div className="flex items-center gap-2 border border-line bg-foam px-2.5 py-1 w-64 focus-within:border-lagoon">
+            <Search className="size-3.5 text-sea-ink-soft shrink-0" />
+            <Input
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              placeholder="过滤当前页会话标题或 Hash..."
+              className="h-6 border-0 bg-transparent p-0 text-xs shadow-none focus-visible:ring-0"
+            />
+          </div>
         </div>
 
-        <div className="border-t border-line">
+        {/* 会话台账列表 */}
+        <div className="border border-line bg-surface">
           {showLoading ? (
-            <div className="space-y-2 py-4">
-              <Skeleton className="h-12 w-full" />
-              <Skeleton className="h-12 w-full" />
-              <Skeleton className="h-12 w-full" />
+            <div className="space-y-2 p-4">
+              <Skeleton className="h-14 w-full" />
+              <Skeleton className="h-14 w-full" />
+              <Skeleton className="h-14 w-full" />
             </div>
           ) : items.length > 0 ? (
-            items.map((item) => (
-              <div
-                key={item.id}
-                className="flex items-center gap-4 border-b border-line px-1 py-4 transition-colors hover:bg-chip-bg"
-              >
-                <div className="min-w-0 flex-1">
-                  <p className="truncate text-sm font-semibold text-sea-ink">
-                    {item.title}
-                  </p>
-                  <div className="mt-1 flex items-center gap-2.5 text-xs text-sea-ink-soft">
-                    <span className="font-mono">{item.hash.slice(0, 8)}</span>
-                    <span>
-                      {item.file_count} 文件 · {relativeTime(item.updated_at)}
-                    </span>
-                    {item.expires_at ? (
-                      <span>过期 {formatDateTime(item.expires_at)}</span>
+            items.map((item) => {
+              const expired = isPreviewExpired(item)
+              return (
+                <div
+                  key={item.id}
+                  className="flex items-center justify-between gap-4 border-b border-line px-4 py-3.5 transition-colors hover:bg-chip-bg last:border-b-0"
+                >
+                  <div className="min-w-0 flex-1 flex flex-col gap-1">
+                    <div className="flex items-center gap-2">
+                      <span
+                        onClick={() => setViewTarget(item)}
+                        className="cursor-pointer font-semibold text-sm text-sea-ink hover:text-lagoon transition-colors truncate max-w-lg"
+                        title={item.title}
+                      >
+                        {item.title || '（未命名会话）'}
+                      </span>
+                      <span
+                        className={`font-mono text-[10px] px-1.5 py-0.5 border ${
+                          !expired
+                            ? 'border-chip-line bg-lagoon/10 text-lagoon-deep font-semibold'
+                            : 'border-line bg-chip-bg text-sea-ink-soft'
+                        }`}
+                      >
+                        {!expired ? '活跃沙盒' : '已过期收回'}
+                      </span>
+                      <span className="font-mono text-[10px] bg-sand px-1.5 py-0.5 border border-line text-sea-ink-soft">
+                        {item.hash.slice(0, 8)}
+                      </span>
+                    </div>
+
+                    <div className="flex flex-wrap items-center gap-2 text-xs text-sea-ink-soft">
+                      <span className="font-mono text-sea-ink bg-sand/60 px-1.5 py-0.2 border border-line">
+                        {item.file_count} 个前端文件
+                      </span>
+                      <span>•</span>
+                      <span>
+                        {expired
+                          ? `于 ${formatDateTime(item.expires_at)} 到期`
+                          : `有效期至 ${formatDateTime(item.expires_at)}`}
+                      </span>
+                    </div>
+                  </div>
+
+                  <div className="flex shrink-0 items-center gap-1.5">
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      onClick={() => setViewTarget(item)}
+                      className="h-7 text-xs rounded-none border-line px-2 text-sea-ink hover:bg-foam"
+                      title="打开会话详情管理文件"
+                    >
+                      <Eye className="mr-1 size-3" />
+                      文件详情
+                    </Button>
+                    {!expired ? (
+                      <Button
+                        size="sm"
+                        onClick={() =>
+                          window.open(
+                            `/preview/${item.hash}/index.html`,
+                            '_blank',
+                          )
+                        }
+                        className="h-7 text-xs rounded-none bg-primary text-primary-foreground hover:bg-primary/90 px-2"
+                        title="在独立窗口中打开预览工作台"
+                      >
+                        <ExternalLink className="mr-1 size-3" />
+                        访问沙盒
+                      </Button>
                     ) : null}
-                    <StatusDot expired={isPreviewExpired(item)} />
+                    <button
+                      type="button"
+                      onClick={() => setDeleteTarget(item)}
+                      className="grid size-7 place-items-center text-sea-ink-soft transition-colors hover:bg-destructive/10 hover:text-destructive border border-transparent hover:border-destructive/30"
+                      aria-label={`删除 ${item.title}`}
+                      title="删除会话"
+                    >
+                      <Trash2 className="size-3.5" />
+                    </button>
                   </div>
                 </div>
-                <button
-                  type="button"
-                  onClick={() => setViewTarget(item)}
-                  className="grid size-11 place-items-center text-sea-ink-soft transition-colors hover:text-sea-ink"
-                  aria-label={`打开 ${item.title} 详情`}
-                  title="查看会话详情与文件"
-                >
-                  <Eye className="size-3.5" />
-                </button>
-                {isPreviewExpired(item) ? (
-                  <span
-                    className="grid size-11 place-items-center text-sea-ink-soft/30 cursor-not-allowed"
-                    title="会话已过期，预览地址已收回"
-                    aria-label={`${item.title} 预览已过期不可打开`}
-                  >
-                    <ExternalLink className="size-3.5" />
-                  </span>
-                ) : (
-                  <a
-                    href={`/preview/${item.hash}/`}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className="grid size-11 place-items-center text-sea-ink-soft transition-colors hover:text-sea-ink"
-                    aria-label={`打开 ${item.title} 预览`}
-                    title="在独立标签页打开预览"
-                  >
-                    <ExternalLink className="size-3.5" />
-                  </a>
-                )}
-                <button
-                  type="button"
-                  onClick={() => setDeleteTarget(item)}
-                  className="grid size-11 place-items-center text-sea-ink-soft transition-colors hover:text-destructive"
-                  aria-label={`删除 ${item.title}`}
-                  title="删除此会话"
-                >
-                  <Trash2 className="size-3.5" />
-                </button>
-              </div>
-            ))
+              )
+            })
           ) : (
             <div className="border border-line px-8 py-16 text-center">
-              <p className="display-title text-xl font-semibold text-sea-ink">
-                暂无预览会话
+              <p className="text-sm font-semibold text-sea-ink">
+                暂无匹配的预览会话
               </p>
-              <p className="mt-2.5 text-sm text-sea-ink-soft">
-                创建第一个预览会话，可视化你的前端原型。
+              <p className="mt-1 text-xs text-sea-ink-soft">
+                可通过上方「新建预览会话」按钮创建第一个前端原型沙盒。
               </p>
             </div>
           )}
@@ -225,66 +389,97 @@ function PreviewPage() {
         )}
       </motion.div>
 
-      {/* ─── 新建会话 dialog ─── */}
+      {/* 新建会话 Dialog (已升级搜索支持 Q-05) */}
       <Dialog open={createOpen} onOpenChange={setCreateOpen}>
-        <DialogContent className="border-line sm:max-w-md">
+        <DialogContent className="border-line rounded-none sm:max-w-md bg-foam">
           <DialogHeader>
-            <DialogTitle>新建预览会话</DialogTitle>
-            <DialogDescription>
-              选择关联项目并填写会话标题，创建后可通过 hash 分享预览。
+            <div className="flex items-center gap-2">
+              <span className="size-2 rotate-45 bg-lagoon" />
+              <DialogTitle className="text-base font-semibold">
+                新建预览会话
+              </DialogTitle>
+            </div>
+            <DialogDescription className="text-xs text-sea-ink-soft">
+              选择所属项目并填写会话标题，创建后可通过 Hash
+              进行路径式访问或直接上传文件。
             </DialogDescription>
           </DialogHeader>
-          <div className="space-y-4 py-2">
-            <div className="space-y-2">
-              <Label className="text-xs text-sea-ink-soft">关联项目</Label>
+
+          <div className="space-y-4 py-2 text-xs">
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold text-sea-ink">
+                关联项目 <span className="text-destructive">*</span>
+              </Label>
+              <Input
+                value={projectSearch}
+                onChange={(e) => setProjectSearch(e.target.value)}
+                placeholder="键入关键词过滤项目..."
+                className="h-7 text-xs bg-sand/30 font-mono mb-1"
+              />
               <Select
                 value={createProjectId}
                 onValueChange={setCreateProjectId}
               >
-                <SelectTrigger className="w-full">
-                  <SelectValue placeholder="选择项目" />
+                <SelectTrigger className="w-full text-xs bg-sand/30">
+                  <SelectValue placeholder="从筛选结果中选择项目" />
                 </SelectTrigger>
-                <SelectContent>
-                  {projects.map((p) => (
-                    <SelectItem key={p.id} value={p.id}>
-                      {p.name}
+                <SelectContent className="max-h-48">
+                  {filteredProjects.map((p) => (
+                    <SelectItem key={p.id} value={p.id} className="text-xs">
+                      {p.name} {p.alias_name ? `(${p.alias_name})` : ''}
                     </SelectItem>
                   ))}
+                  {filteredProjects.length === 0 && (
+                    <div className="p-2 text-center text-xs text-sea-ink-soft">
+                      未找到匹配的项目
+                    </div>
+                  )}
                 </SelectContent>
               </Select>
             </div>
-            <div className="space-y-2">
-              <Label className="text-xs text-sea-ink-soft">会话标题</Label>
+
+            <div className="space-y-1.5">
+              <Label className="text-xs font-semibold text-sea-ink">
+                会话标题
+              </Label>
               <Input
                 value={createTitle}
                 onChange={(e) => setCreateTitle(e.target.value)}
-                placeholder="未命名预览"
+                placeholder="如：LPW 文档大纲原型 (留空将自动生成)"
+                className="text-xs bg-sand/30"
               />
             </div>
           </div>
-          <DialogFooter>
-            <Button variant="outline" onClick={() => setCreateOpen(false)}>
+
+          <DialogFooter className="border-t border-line pt-3">
+            <Button
+              variant="outline"
+              size="sm"
+              className="rounded-none text-xs"
+              onClick={() => setCreateOpen(false)}
+            >
               取消
             </Button>
             <Button
+              size="sm"
               onClick={handleCreate}
               disabled={!createProjectId || createMutation.isPending}
-              className="bg-sea-ink text-foam hover:bg-lagoon-deep"
+              className="rounded-none bg-primary text-primary-foreground hover:bg-primary/90 text-xs"
             >
-              {createMutation.isPending ? '创建中...' : '创建'}
+              {createMutation.isPending ? '创建中...' : '立即创建'}
             </Button>
           </DialogFooter>
         </DialogContent>
       </Dialog>
 
-      {/* ─── 删除确认 ─── */}
+      {/* 删除确认对话框 */}
       <ConfirmDeleteDialog
         open={!!deleteTarget}
         onOpenChange={(open) => {
           if (!open) setDeleteTarget(null)
         }}
-        title="删除预览会话"
-        description={`确定要删除会话「${deleteTarget?.title ?? ''}」吗？删除后该会话下的所有前端文件将不可恢复。`}
+        title="确认删除预览会话"
+        description={`确定要删除会话「${deleteTarget?.title || deleteTarget?.hash.slice(0, 8)}」吗？删除后沙盒内的前端文件将被清空。`}
         onConfirm={() => {
           if (deleteTarget) {
             deleteMutation.mutate(deleteTarget.id, {
@@ -295,7 +490,7 @@ function PreviewPage() {
         isPending={deleteMutation.isPending}
       />
 
-      {/* ─── 详情抽屉 ─── */}
+      {/* 🌟 详情抽屉（带 REST 兜底与文件删除确认） */}
       <PreviewSessionDetailDrawer
         session={viewTarget}
         onClose={() => setViewTarget(null)}
@@ -303,70 +498,3 @@ function PreviewPage() {
     </motion.div>
   )
 }
-
-function Kpi({
-  label,
-  value,
-  delta,
-  loading,
-  last,
-}: {
-  label: string
-  value?: number
-  delta?: string
-  loading?: boolean
-  last?: boolean
-}) {
-  return (
-    <div
-      className={`py-7 ${last ? '' : 'border-r border-line'} first:pl-0 md:px-6`}
-    >
-      <p className="text-[10.5px] font-bold uppercase tracking-[0.18em] text-sea-ink-soft">
-        {label}
-      </p>
-      {loading ? (
-        <Skeleton className="mt-3 h-11 w-16" />
-      ) : (
-        <p className="display-title mt-3 text-5xl font-medium tracking-tight text-sea-ink">
-          {value ?? 0}
-        </p>
-      )}
-      {delta && <p className="mt-2 text-[11.5px] text-sea-ink-soft">{delta}</p>}
-    </div>
-  )
-}
-
-function isPreviewExpired(item: PreviewSessionItem): boolean {
-  if (item.status !== 'active') return true
-  if (!item.expires_at) return false
-  const ts = new Date(item.expires_at).getTime()
-  return !Number.isNaN(ts) && ts <= Date.now()
-}
-
-function StatusDot({ expired }: { expired: boolean }) {
-  return (
-    <span className="inline-flex items-center gap-1.5 text-xs font-medium">
-      <span
-        className={`inline-block size-[7px] rounded-full ${
-          expired ? 'bg-sea-ink-soft/40' : 'bg-green-600'
-        }`}
-      />
-      <span className={expired ? 'text-sea-ink-soft' : 'text-green-700'}>
-        {expired ? '已过期' : '活跃'}
-      </span>
-    </span>
-  )
-}
-
-function relativeTime(iso: string): string {
-  const time = new Date(iso).getTime()
-  if (Number.isNaN(time)) return ''
-  const diff = Date.now() - time
-  const min = Math.floor(diff / 60000)
-  if (min < 1) return '刚刚'
-  if (min < 60) return `${min} 分钟前`
-  const hour = Math.floor(min / 60)
-  if (hour < 24) return `${hour} 小时前`
-  const day = Math.floor(hour / 24)
-  return `${day} 天前`
-}
diff --git a/web/src/routes/console/project/index.tsx b/web/src/routes/console/project/index.tsx
index 6fe6033..88b772d 100644
--- a/web/src/routes/console/project/index.tsx
+++ b/web/src/routes/console/project/index.tsx
@@ -64,8 +64,12 @@ function ProjectRow({
       ? item.match_path.join(', ')
       : '未配置匹配路径'
 
-  const hasWiki = Boolean(wikiConfig?.selected_version_id || wikiConfig?.latest_version)
-  const isPreviewLive = Boolean(previewSession && previewSession.status === 'active')
+  const hasWiki = Boolean(
+    wikiConfig?.selected_version_id || wikiConfig?.latest_version,
+  )
+  const isPreviewLive = Boolean(
+    previewSession && previewSession.status === 'active',
+  )
 
   // 🌟 项目管理 Tooltip 浮窗：无默认箭头、纯平发线、顶端 3px 琥珀色微明横线
   return (
@@ -165,7 +169,9 @@ function ProjectRow({
                 pendingPinCount > 0 ? 'bg-lagoon' : 'bg-sea-ink-soft'
               }`}
             />
-            {pendingPinCount > 0 ? `Pin: ${pendingPinCount} 待办` : 'Pin: 0 待办'}
+            {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] ${
@@ -244,6 +250,7 @@ function ProjectPage() {
   const [editOpen, setEditOpen] = useState(false)
   const [deleteOpen, setDeleteOpen] = useState(false)
   const [detailOpen, setDetailOpen] = useState(false)
+  const [detailMode, setDetailMode] = useState<'view' | 'edit'>('view')
   const [selectedItem, setSelectedItem] = useState<ProjectItem | null>(null)
 
   const { current } = useCurrentWorkspace()
@@ -549,11 +556,13 @@ function ProjectPage() {
                       previewSession={previewSessionMap.get(item.id)}
                       onView={(target) => {
                         setSelectedItem(target)
+                        setDetailMode('view')
                         setDetailOpen(true)
                       }}
                       onEdit={(target) => {
                         setSelectedItem(target)
-                        setEditOpen(true)
+                        setDetailMode('edit')
+                        setDetailOpen(true)
                       }}
                       onDelete={(target) => {
                         setSelectedItem(target)
@@ -561,7 +570,10 @@ function ProjectPage() {
                       }}
                       onOpenWiki={(target) => {
                         const config = wikiConfigMap.get(target.id)
-                        if (config?.selected_version_id || config?.latest_version) {
+                        if (
+                          config?.selected_version_id ||
+                          config?.latest_version
+                        ) {
                           window.open(`/wiki/${target.name}`, '_blank')
                         } else {
                           navigate({
@@ -601,6 +613,7 @@ function ProjectPage() {
           open={detailOpen}
           onOpenChange={setDetailOpen}
           item={selectedItem}
+          initialMode={detailMode}
           wikiStatus={
             selectedItem
               ? wikiConfigMap.get(selectedItem.id)?.selected_version_id ||
@@ -619,10 +632,6 @@ function ProjectPage() {
                 : '无活跃沙盒'
               : undefined
           }
-          onEdit={(target) => {
-            setSelectedItem(target)
-            setEditOpen(true)
-          }}
         />
         <ConfirmDeleteDialog
           open={deleteOpen}
diff --git a/web/src/routes/console/qa/index.tsx b/web/src/routes/console/qa/index.tsx
index 6c1834a..0d8fcf7 100644
--- a/web/src/routes/console/qa/index.tsx
+++ b/web/src/routes/console/qa/index.tsx
@@ -1,8 +1,16 @@
-import { useState } from 'react'
-import { createFileRoute } from '@tanstack/react-router'
+import { useEffect, useMemo, useState } from 'react'
+import { createFileRoute, useNavigate } from '@tanstack/react-router'
 import { motion } from 'motion/react'
 import { Skeleton } from '@lumina/components/ui/skeleton'
-import { Eye, Trash2 } from 'lucide-react'
+import {
+  Eye,
+  MessageCircleQuestion,
+  Search,
+  Settings,
+  Trash2,
+} from 'lucide-react'
+import { Button } from '@lumina/components/ui/button'
+import { Input } from '@lumina/components/ui/input'
 import { useSessionList, useDeleteSession } from '#/hooks/useQaAdmin'
 import { useCurrentWorkspace } from '#/hooks/useCurrentWorkspace'
 import { useDashboardOverview } from '#/hooks/useDashboard'
@@ -10,122 +18,273 @@ import { SessionDetailDrawer } from '#/components/qa/session-detail-drawer'
 import { ConfirmDeleteDialog } from '#/components/confirm-delete-dialog'
 import { DataTablePagination } from '#/components/data-table-pagination'
 import { staggerContainer, staggerItem } from '@lumina/components/motion'
+import { PageHeader } from '#/components/page-header'
+import { formatDateTime } from '#/lib/format-date'
 import type { SessionItem } from '#/lib/models/response/qa-admin'
 
 export const Route = createFileRoute('/console/qa/')({
+  staticData: { crumb: '问答管理' },
   component: QaPage,
 })
 
+type SessionStatusFilter = '' | 'active' | 'expired' | 'deleted'
+
+const STATUS_FILTERS: { value: SessionStatusFilter; label: string }[] = [
+  { value: '', label: '全部会话' },
+  { value: 'active', label: '活跃中' },
+  { value: 'expired', label: '已过期' },
+]
+
+function SessionStatusBadge({ status }: { status: string }) {
+  if (status === 'active') {
+    return (
+      <span className="font-mono text-[10px] px-1.5 py-0.5 border border-chip-line bg-lagoon/10 text-lagoon-deep font-semibold">
+        活跃中
+      </span>
+    )
+  }
+  if (status === 'expired') {
+    return (
+      <span className="font-mono text-[10px] px-1.5 py-0.5 border border-line bg-chip-bg text-sea-ink-soft">
+        已过期
+      </span>
+    )
+  }
+  return (
+    <span className="font-mono text-[10px] px-1.5 py-0.5 border border-line bg-sand text-sea-ink-soft">
+      {status}
+    </span>
+  )
+}
+
 function QaPage() {
+  const navigate = useNavigate()
   const [page, setPage] = useState(1)
   const [pageSize, setPageSize] = useState(10)
+  const [statusFilter, setStatusFilter] = useState<SessionStatusFilter>('')
+  const [searchQuery, setSearchQuery] = useState('')
+
   const [deleteTarget, setDeleteTarget] = useState<SessionItem | null>(null)
   const [viewTarget, setViewTarget] = useState<string | null>(null)
 
   const { current } = useCurrentWorkspace()
+
+  // 🌟 Q-04 切换空间时重置选中态
+  useEffect(() => {
+    setPage(1)
+    setDeleteTarget(null)
+    setViewTarget(null)
+  }, [current?.id])
+
   const { data, isLoading } = useSessionList({
     page,
     size: pageSize,
     workspace_id: current?.id,
+    ...(statusFilter ? { status: statusFilter } : {}),
   })
   const showLoading = !current?.id || isLoading
   const { data: overviewData } = useDashboardOverview()
   const deleteMutation = useDeleteSession()
 
-  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 qaStats = overviewData?.data?.qa
 
+  // 本地搜索过滤
+  const items = useMemo(() => {
+    if (!searchQuery.trim()) return rawItems
+    const q = searchQuery.toLowerCase().trim()
+    return rawItems.filter(
+      (item) =>
+        item.title.toLowerCase().includes(q) ||
+        (item.agent && item.agent.toLowerCase().includes(q)) ||
+        (item.project_name && item.project_name.toLowerCase().includes(q)),
+    )
+  }, [rawItems, searchQuery])
+
+  const handleStatusChange = (val: SessionStatusFilter) => {
+    setStatusFilter(val)
+    setPage(1)
+  }
+
   return (
     <motion.div
       initial="hidden"
       animate="visible"
       variants={staggerContainer}
-      className="mx-auto max-w-5xl space-y-8"
+      className="space-y-4"
     >
-      {/* ─── KPI band ─── */}
+      <PageHeader
+        title="问答管理"
+        description="查看 Agent 发起的交互式富问答会话、待答队列状态与历史归档"
+        action={
+          <div className="flex items-center gap-2">
+            <Button
+              variant="outline"
+              onClick={() =>
+                void (navigate as any)({
+                  to: '/console/settings',
+                  search: { tab: 'qa', from: '/console/qa' },
+                })
+              }
+              className="rounded-none border-line text-xs text-sea-ink hover:bg-chip-bg"
+              title="跳转至系统设置配置 Q&A 参数"
+            >
+              <Settings className="mr-1.5 size-3.5 text-lagoon" />
+              Q&A 运行参数配置
+            </Button>
+            <Button
+              onClick={() => window.open('/interact', '_blank')}
+              className="bg-lagoon text-foam hover:bg-lagoon-deep rounded-none text-xs"
+            >
+              <MessageCircleQuestion className="mr-1.5 size-3.5" />
+              进入交互大厅
+            </Button>
+          </div>
+        }
+      />
+
+      {/* KPI 指标带 */}
       <motion.div variants={staggerItem}>
-        <div className="grid grid-cols-1 border-b border-line sm:grid-cols-3">
-          <Kpi
-            label="活跃会话"
-            value={qaStats?.active}
-            delta="临时会话 48h 过期"
-            loading={!qaStats}
-          />
-          <Kpi
-            label="待回答问题"
-            value={qaStats?.pending_questions}
-            delta="等待用户回答"
-            loading={!qaStats}
-          />
-          <Kpi
-            label="已归档"
-            value={qaStats?.expired}
-            delta={`共 ${qaStats?.total ?? 0} 个会话`}
-            loading={!qaStats}
-            last
-          />
+        <div className="grid grid-cols-1 border border-line bg-sand/30 sm:grid-cols-3">
+          <div className="p-4 border-b border-line sm:border-b-0 sm:border-r">
+            <span className="text-[10.5px] font-bold uppercase tracking-wider text-sea-ink-soft block">
+              活跃会话 (ACTIVE)
+            </span>
+            <span className="font-mono text-xl font-semibold text-lagoon-deep">
+              {qaStats?.active ?? 0}
+            </span>
+            <p className="text-[11px] text-sea-ink-soft mt-0.5">
+              临时会话默认保留 48h
+            </p>
+          </div>
+          <div className="p-4 border-b border-line sm:border-b-0 sm:border-r">
+            <span className="text-[10.5px] font-bold uppercase tracking-wider text-sea-ink-soft block">
+              待回答问题 (PENDING)
+            </span>
+            <span className="font-mono text-xl font-semibold text-destructive">
+              {qaStats?.pending_questions ?? 0}
+            </span>
+            <p className="text-[11px] text-sea-ink-soft mt-0.5">
+              阻塞等待用户裁决中
+            </p>
+          </div>
+          <div className="p-4">
+            <span className="text-[10.5px] font-bold uppercase tracking-wider text-sea-ink-soft block">
+              累计历史会话
+            </span>
+            <span className="font-mono text-xl font-semibold text-sea-ink">
+              {qaStats?.total ?? totalItems}
+            </span>
+            <p className="text-[11px] text-sea-ink-soft mt-0.5">
+              已归档 {qaStats?.expired ?? 0} 个会话
+            </p>
+          </div>
         </div>
       </motion.div>
 
-      {/* ─── 会话列表 ─── */}
-      <motion.div variants={staggerItem}>
-        <h3 className="display-title mb-2 text-lg font-semibold text-sea-ink">
-          问答会话
-          <span className="ml-1 text-lagoon">──</span>
-        </h3>
+      {/* 工具栏与筛选胶囊 */}
+      <motion.div variants={staggerItem} className="space-y-3">
+        <div className="flex flex-wrap items-center justify-between gap-3 border-b border-line pb-3">
+          {/* 状态筛选胶囊 */}
+          <div className="flex items-center border border-line bg-foam p-0.5">
+            {STATUS_FILTERS.map((s) => (
+              <button
+                key={s.value}
+                type="button"
+                onClick={() => handleStatusChange(s.value)}
+                className={`px-2.5 py-1 text-xs transition-colors ${
+                  statusFilter === s.value
+                    ? 'bg-lagoon text-foam font-semibold'
+                    : 'text-sea-ink-soft hover:text-sea-ink'
+                }`}
+              >
+                {s.label}
+              </button>
+            ))}
+          </div>
+
+          {/* 搜索框 */}
+          <div className="flex items-center gap-2 border border-line bg-foam px-2.5 py-1 w-64 focus-within:border-lagoon">
+            <Search className="size-3.5 text-sea-ink-soft shrink-0" />
+            <Input
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              placeholder="过滤当前页会话主题或 Agent..."
+              className="h-6 border-0 bg-transparent p-0 text-xs shadow-none focus-visible:ring-0"
+            />
+          </div>
+        </div>
 
-        <div className="border-t border-line">
+        {/* 会话台账列表 */}
+        <div className="border border-line bg-surface">
           {showLoading ? (
-            <div className="space-y-2 py-4">
-              <Skeleton className="h-12 w-full" />
-              <Skeleton className="h-12 w-full" />
-              <Skeleton className="h-12 w-full" />
+            <div className="space-y-2 p-4">
+              <Skeleton className="h-14 w-full" />
+              <Skeleton className="h-14 w-full" />
+              <Skeleton className="h-14 w-full" />
             </div>
           ) : items.length > 0 ? (
             items.map((item) => (
               <div
                 key={item.id}
-                className="flex items-center gap-4 border-b border-line px-1 py-4 transition-colors hover:bg-chip-bg"
+                className="flex items-center justify-between gap-4 border-b border-line px-4 py-3.5 transition-colors hover:bg-chip-bg last:border-b-0"
               >
-                <div className="min-w-0 flex-1">
-                  <p className="truncate text-sm font-semibold text-sea-ink">
-                    {item.title}
-                  </p>
-                  <div className="mt-1 flex items-center gap-2.5 text-xs text-sea-ink-soft">
-                    <SessionStatus status={item.status} />
+                <div className="min-w-0 flex-1 flex flex-col gap-1">
+                  <div className="flex items-center gap-2">
+                    <span
+                      onClick={() => setViewTarget(item.id)}
+                      className="cursor-pointer font-semibold text-sm text-sea-ink hover:text-lagoon transition-colors truncate max-w-lg"
+                      title={item.title}
+                    >
+                      {item.title}
+                    </span>
+                    <SessionStatusBadge status={item.status} />
+                  </div>
+                  <div className="flex flex-wrap items-center gap-2 text-xs text-sea-ink-soft">
+                    <span className="font-mono text-sea-ink bg-sand/60 px-1.5 py-0.2 border border-line">
+                      Agent: {item.agent || '系统'}
+                    </span>
+                    <span>•</span>
                     <span>
-                      {item.question_count} 问题 · 已答 {item.answered_count}
+                      {item.question_count} 个问题 (已答 {item.answered_count})
                     </span>
-                    <span>{relativeTime(item.updated_at)}</span>
+                    <span>•</span>
+                    <span>更新于 {formatDateTime(item.updated_at)}</span>
                   </div>
                 </div>
-                <button
-                  type="button"
-                  onClick={() => setViewTarget(item.id)}
-                  className="grid size-11 place-items-center text-sea-ink-soft transition-colors hover:text-sea-ink"
-                  aria-label={`查看 ${item.title} 详情`}
-                >
-                  <Eye className="size-3.5" />
-                </button>
-                <button
-                  type="button"
-                  onClick={() => setDeleteTarget(item)}
-                  className="grid size-11 place-items-center text-sea-ink-soft transition-colors hover:text-destructive"
-                  aria-label={`删除 ${item.title}`}
-                >
-                  <Trash2 className="size-3.5" />
-                </button>
+
+                <div className="flex shrink-0 items-center gap-1.5">
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() => setViewTarget(item.id)}
+                    className="h-7 text-xs rounded-none border-line px-2 text-sea-ink hover:bg-foam"
+                    title="查看会话全景详情"
+                  >
+                    <Eye className="mr-1 size-3" />
+                    详情
+                  </Button>
+                  <button
+                    type="button"
+                    onClick={() => setDeleteTarget(item)}
+                    className="grid size-7 place-items-center text-sea-ink-soft transition-colors hover:bg-destructive/10 hover:text-destructive border border-transparent hover:border-destructive/30"
+                    aria-label={`删除 ${item.title}`}
+                    title="删除会话"
+                  >
+                    <Trash2 className="size-3.5" />
+                  </button>
+                </div>
               </div>
             ))
           ) : (
             <div className="border border-line px-8 py-16 text-center">
-              <p className="display-title text-xl font-semibold text-sea-ink">
-                暂无问答会话
+              <p className="text-sm font-semibold text-sea-ink">
+                暂无问答会话记录
               </p>
-              <p className="mt-2.5 text-sm text-sea-ink-soft">
-                Agent 发起交互问答后，会话将在此展示。
+              <p className="mt-1 text-xs text-sea-ink-soft">
+                Agent 发起交互问答后，会话将在此实时同步展示。
               </p>
             </div>
           )}
@@ -146,14 +305,14 @@ function QaPage() {
         )}
       </motion.div>
 
-      {/* ─── 删除确认 ─── */}
+      {/* 删除确认对话框 */}
       <ConfirmDeleteDialog
         open={!!deleteTarget}
         onOpenChange={(open) => {
           if (!open) setDeleteTarget(null)
         }}
-        title="删除会话"
-        description={`确定要删除会话「${deleteTarget?.title ?? ''}」吗？删除后所有问答数据将不可恢复。`}
+        title="确认删除问答会话"
+        description={`确定要删除会话「${deleteTarget?.title ?? ''}」吗？删除后所有问答与选项记录将不可恢复。`}
         onConfirm={() => {
           if (deleteTarget) {
             deleteMutation.mutate(deleteTarget.id, {
@@ -164,7 +323,7 @@ function QaPage() {
         isPending={deleteMutation.isPending}
       />
 
-      {/* ─── 详情抽屉 ─── */}
+      {/* 🌟 详情全景抽屉 */}
       <SessionDetailDrawer
         sessionId={viewTarget}
         onClose={() => setViewTarget(null)}
@@ -172,73 +331,3 @@ function QaPage() {
     </motion.div>
   )
 }
-
-function Kpi({
-  label,
-  value,
-  delta,
-  loading,
-  last,
-}: {
-  label: string
-  value?: number
-  delta?: string
-  loading?: boolean
-  last?: boolean
-}) {
-  return (
-    <div
-      className={`py-7 ${last ? '' : 'border-r border-line'} first:pl-0 md:px-6`}
-    >
-      <p className="text-[10.5px] font-bold uppercase tracking-[0.18em] text-sea-ink-soft">
-        {label}
-      </p>
-      {loading ? (
-        <Skeleton className="mt-3 h-11 w-16" />
-      ) : (
-        <p className="display-title mt-3 text-5xl font-medium tracking-tight text-sea-ink">
-          {value ?? 0}
-        </p>
-      )}
-      {delta && <p className="mt-2 text-[11.5px] text-sea-ink-soft">{delta}</p>}
-    </div>
-  )
-}
-
-function SessionStatus({ status }: { status: SessionItem['status'] }) {
-  const config = {
-    active: { dot: 'bg-green-600', text: 'text-green-700', label: '进行中' },
-    expired: {
-      dot: 'bg-sea-ink-soft/40',
-      text: 'text-sea-ink-soft',
-      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-block size-[7px] rounded-full ${config.dot}`} />
-      {config.label}
-    </span>
-  )
-}
-
-function relativeTime(iso: string): string {
-  const time = new Date(iso).getTime()
-  if (Number.isNaN(time)) return ''
-  const diff = Date.now() - time
-  const min = Math.floor(diff / 60000)
-  if (min < 1) return '刚刚'
-  if (min < 60) return `${min} 分钟前`
-  const hour = Math.floor(min / 60)
-  if (hour < 24) return `${hour} 小时前`
-  const day = Math.floor(hour / 24)
-  return `${day} 天前`
-}
diff --git a/web/src/routes/console/settings.tsx b/web/src/routes/console/settings.tsx
index 0a15e09..3dc72a9 100644
--- a/web/src/routes/console/settings.tsx
+++ b/web/src/routes/console/settings.tsx
@@ -1,33 +1,16 @@
-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 } from '@lumina/components/ui/tabs'
 import { PageHeader } from '#/components/page-header'
-import { DataTable } from '#/components/data-table'
-import { SkeletonTable } from '#/components/skeleton-table'
-import { ConfirmDeleteDialog } from '#/components/confirm-delete-dialog'
-import { getProviderColumns } from '#/components/llm/provider-columns'
-import { ProviderCreateDialog } from '#/components/llm/provider-create-dialog'
-import { ProviderEditDialog } from '#/components/llm/provider-edit-dialog'
-import { getModelColumns } from '#/components/llm/model-columns'
-import { ModelCreateDialog } from '#/components/llm/model-create-dialog'
-import { ModelEditDialog } from '#/components/llm/model-edit-dialog'
+import { ProviderWorkbench } from '#/components/llm/provider-workbench'
+import { ModelWorkbench } from '#/components/llm/model-workbench'
 import { AgentModelAssignGroup } from '#/components/llm/agent-model-assign'
 import { SiteSettingsForm } from '#/components/settings/site-settings-form'
 import { QaSettingsForm } from '#/components/settings/qa-settings-form'
 import { RepowikiSettingsForm } from '#/components/settings/repowiki-settings-form'
 import { SecuritySettingsForm } from '#/components/settings/security-settings-form'
 import { PreviewSettingsForm } from '#/components/settings/preview-settings-form'
-import {
-  useProviders,
-  useDeleteProvider,
-  useModels,
-  useDeleteModel,
-} from '#/hooks/useLlmConfig'
 import { staggerContainer, staggerItem } from '@lumina/components/motion'
-import type { Provider, Model } from '#/lib/models/response/llm'
 
 const SETTINGS_TABS = [
   'site',
@@ -59,83 +42,6 @@ export const Route = createFileRoute('/console/settings')({
 
 function SettingsPage() {
   const { tab = 'site' } = Route.useSearch()
-  const navigate = Route.useNavigate()
-  // Provider dialog state
-  const [createProviderOpen, setCreateProviderOpen] = useState(false)
-  const [editProviderOpen, setEditProviderOpen] = useState(false)
-  const [deleteProviderOpen, setDeleteProviderOpen] = useState(false)
-  const [selectedProvider, setSelectedProvider] = useState<Provider | null>(
-    null,
-  )
-
-  // Model dialog state
-  const [createModelOpen, setCreateModelOpen] = useState(false)
-  const [editModelOpen, setEditModelOpen] = useState(false)
-  const [deleteModelOpen, setDeleteModelOpen] = useState(false)
-  const [selectedModel, setSelectedModel] = useState<Model | null>(null)
-
-  // Data hooks
-  const { data: providersData, isLoading: providersLoading } = useProviders()
-  const { data: modelsData, isLoading: modelsLoading } = useModels()
-  const deleteProviderMutation = useDeleteProvider()
-  const deleteModelMutation = useDeleteModel()
-
-  const providerItems = providersData?.data?.items ?? []
-  const modelItems = modelsData?.data?.items ?? []
-
-  // Column definitions
-  const providerColumns = getProviderColumns({
-    onEdit: (item) => {
-      setSelectedProvider(item)
-      setEditProviderOpen(true)
-    },
-    onDelete: (item) => {
-      setSelectedProvider(item)
-      setDeleteProviderOpen(true)
-    },
-  })
-
-  const modelColumns = getModelColumns(
-    {
-      onEdit: (item) => {
-        setSelectedModel(item)
-        setEditModelOpen(true)
-      },
-      onDelete: (item) => {
-        setSelectedModel(item)
-        setDeleteModelOpen(true)
-      },
-    },
-    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: '站点基础信息',
@@ -195,43 +101,17 @@ function SettingsPage() {
           </motion.div>
         </TabsContent>
 
-        {/* Provider 管理 */}
+        {/* Provider 管理：专属 Master-Detail 工作台 */}
         <TabsContent value="provider">
-          <motion.div variants={staggerItem} className="space-y-4">
-            <div className="flex justify-end">
-              <Button
-                onClick={() => setCreateProviderOpen(true)}
-                className="bg-lagoon text-foam hover:bg-lagoon-deep"
-              >
-                <Plus className="mr-2 size-4" />
-                创建 Provider
-              </Button>
-            </div>
-            {providersLoading ? (
-              <SkeletonTable />
-            ) : (
-              <DataTable columns={providerColumns} data={providerItems} />
-            )}
+          <motion.div variants={staggerItem}>
+            <ProviderWorkbench />
           </motion.div>
         </TabsContent>
 
-        {/* 模型管理 */}
+        {/* 模型管理：专属 Master-Detail 工作台 */}
         <TabsContent value="model">
-          <motion.div variants={staggerItem} className="space-y-4">
-            <div className="flex justify-end">
-              <Button
-                onClick={() => setCreateModelOpen(true)}
-                className="bg-lagoon text-foam hover:bg-lagoon-deep"
-              >
-                <Plus className="mr-2 size-4" />
-                创建模型
-              </Button>
-            </div>
-            {modelsLoading ? (
-              <SkeletonTable />
-            ) : (
-              <DataTable columns={modelColumns} data={modelItems} />
-            )}
+          <motion.div variants={staggerItem}>
+            <ModelWorkbench />
           </motion.div>
         </TabsContent>
 
@@ -242,54 +122,6 @@ function SettingsPage() {
           </motion.div>
         </TabsContent>
       </Tabs>
-
-      {/* Provider Dialogs */}
-      <ProviderCreateDialog
-        open={createProviderOpen}
-        onOpenChange={setCreateProviderOpen}
-      />
-      <ProviderEditDialog
-        item={selectedProvider}
-        open={editProviderOpen}
-        onOpenChange={setEditProviderOpen}
-      />
-      <ConfirmDeleteDialog
-        open={deleteProviderOpen}
-        onOpenChange={setDeleteProviderOpen}
-        title="删除 Provider"
-        description={`确定要删除 Provider「${selectedProvider?.name ?? ''}」吗？此操作不可撤销。`}
-        onConfirm={() => {
-          if (!selectedProvider) return
-          deleteProviderMutation.mutate(selectedProvider.id, {
-            onSuccess: () => setDeleteProviderOpen(false),
-          })
-        }}
-        isPending={deleteProviderMutation.isPending}
-      />
-
-      {/* Model Dialogs */}
-      <ModelCreateDialog
-        open={createModelOpen}
-        onOpenChange={setCreateModelOpen}
-      />
-      <ModelEditDialog
-        item={selectedModel}
-        open={editModelOpen}
-        onOpenChange={setEditModelOpen}
-      />
-      <ConfirmDeleteDialog
-        open={deleteModelOpen}
-        onOpenChange={setDeleteModelOpen}
-        title="删除模型"
-        description={`确定要删除模型「${selectedModel?.display_name ?? ''}」吗？此操作不可撤销。`}
-        onConfirm={() => {
-          if (!selectedModel) return
-          deleteModelMutation.mutate(selectedModel.id, {
-            onSuccess: () => setDeleteModelOpen(false),
-          })
-        }}
-        isPending={deleteModelMutation.isPending}
-      />
     </motion.div>
   )
 }