From 288f36ab2b67c08b215bb4237fc6cb660461350e Mon Sep 17 00:00:00 2001
From: zilin <276161014@qq.com>
Date: Thu, 3 Sep 2026 15:26:47 +0800
Subject: [PATCH 1/2] feat: split project and artifacts drawers

Co-authored-by: CommandCodeBot <noreply@commandcode.ai>
---
 app/thread-chat/branching/branchable-chat.tsx |   3 +-
 .../gate-3-harness/normalized-harness.tsx     | 127 +++-
 .../net/persistence/workspace-state.ts        |   5 +-
 .../artifacts/artifact-drawer.tsx             | 104 ---
 .../orchestration/artifacts/artifact-open.ts  |  44 ++
 .../artifacts/artifacts-drawer.tsx            | 333 ++++++++++
 .../artifacts/layered-drawer.tsx              | 289 +++++++++
 .../artifacts/markdown-artifact-card.tsx      |  19 +-
 .../artifacts/message-artifacts.tsx           |   3 +-
 .../artifacts/project-drawer.tsx              | 514 +++++++++++++++
 .../orchestration/artifacts/project-panel.tsx | 613 ------------------
 .../store-bound-artifacts-drawer.tsx          | 106 +++
 .../artifacts/store-bound-project-drawer.tsx  |  92 +++
 .../artifacts/store-bound-project-panel.tsx   | 123 ----
 .../orchestration/canvas/canvas-actions.ts    |   3 +-
 .../orchestration/canvas/thread-canvas.tsx    |   3 +-
 .../navigation/thread-chat-topbar.tsx         |  66 +-
 .../orchestration/overlays/help-panel.tsx     |   2 +-
 .../overlays/use-workspace-overlays.ts        | 263 ++++++--
 .../overlays/workspace-overlay-logic.ts       |  90 ++-
 app/thread-chat/styles/drawer.css             | 153 ++---
 app/thread-chat/styles/selection.css          |   2 +-
 app/thread-chat/styles/topbar.css             |  13 +-
 app/thread-chat/thread-chat-demo.tsx          |  84 ++-
 constants/project-workspace.ts                |   3 +
 constants/workspace-drawers.ts                |  20 +
 .../artifact-drawer-accessibility.test.mjs    |  60 +-
 e2e/thread-chat/artifact-drawer-copy.test.mjs |   6 +-
 e2e/thread-chat/artifact-drawer-css.test.mjs  |  51 +-
 e2e/thread-chat/message-artifacts.test.mjs    |  32 +
 .../normalized-client-store.test.mjs          |  44 +-
 .../project-panel-ui-contract.test.mjs        | 141 ++--
 .../project-panel-workspace-state.test.mjs    |   2 +-
 e2e/thread-chat/thread-chat-topbar.test.mjs   |  35 +-
 e2e/thread-chat/workspace-overlay.test.mjs    | 119 +++-
 .../.openspec.yaml                            |   2 +
 .../split-project-artifacts-drawers/design.md | 167 +++++
 .../proposal.md                               |  84 +++
 .../specs/project-workspace/spec.md           |  96 +++
 .../specs/workspace-drawers/spec.md           | 126 ++++
 .../split-project-artifacts-drawers/tasks.md  |  69 ++
 41 files changed, 2928 insertions(+), 1183 deletions(-)
 delete mode 100644 app/thread-chat/orchestration/artifacts/artifact-drawer.tsx
 create mode 100644 app/thread-chat/orchestration/artifacts/artifact-open.ts
 create mode 100644 app/thread-chat/orchestration/artifacts/artifacts-drawer.tsx
 create mode 100644 app/thread-chat/orchestration/artifacts/layered-drawer.tsx
 create mode 100644 app/thread-chat/orchestration/artifacts/project-drawer.tsx
 delete mode 100644 app/thread-chat/orchestration/artifacts/project-panel.tsx
 create mode 100644 app/thread-chat/orchestration/artifacts/store-bound-artifacts-drawer.tsx
 create mode 100644 app/thread-chat/orchestration/artifacts/store-bound-project-drawer.tsx
 delete mode 100644 app/thread-chat/orchestration/artifacts/store-bound-project-panel.tsx
 create mode 100644 constants/workspace-drawers.ts
 create mode 100644 openspec/changes/split-project-artifacts-drawers/.openspec.yaml
 create mode 100644 openspec/changes/split-project-artifacts-drawers/design.md
 create mode 100644 openspec/changes/split-project-artifacts-drawers/proposal.md
 create mode 100644 openspec/changes/split-project-artifacts-drawers/specs/project-workspace/spec.md
 create mode 100644 openspec/changes/split-project-artifacts-drawers/specs/workspace-drawers/spec.md
 create mode 100644 openspec/changes/split-project-artifacts-drawers/tasks.md

diff --git a/app/thread-chat/branching/branchable-chat.tsx b/app/thread-chat/branching/branchable-chat.tsx
index 49d85baf..4bd8569d 100644
--- a/app/thread-chat/branching/branchable-chat.tsx
+++ b/app/thread-chat/branching/branchable-chat.tsx
@@ -25,6 +25,7 @@ import { MessageArtifacts } from "../orchestration/artifacts/message-artifacts"
 import { AnchoredAssistantBody } from "./assistant/anchored-assistant-body"
 import type { MessageActionViewState } from "../chat/actions/message-action-types"
 import type { ThreadMessageActionCommands } from "../chat/actions/message-action-commands"
+import type { OpenArtifact } from "../orchestration/artifacts/artifact-open"
 
 export interface BranchableChatProps {
   state: ThreadTreeState
@@ -36,7 +37,7 @@ export interface BranchableChatProps {
   /** 统一意图：打开某会话（本列作为「来源列」参与放置策略）。
       opts.keepSource：⌘/Ctrl 点击 = 保留本列，把目标开在紧邻右侧 */
   onOpenThread: (targetId: string, opts?: { keepSource?: boolean }) => void
-  onOpenArtifact: (artifactId: string) => void
+  onOpenArtifact: OpenArtifact
   /** 面包屑就地回退（collapse 语义由 orchestration 实现） */
   onCrumbNav: (targetId: string) => void
   /** ⇄ 把本列切换为任意会话（弹出 local 切换器，锚定在按钮上） */
diff --git a/app/thread-chat/gate-3-harness/normalized-harness.tsx b/app/thread-chat/gate-3-harness/normalized-harness.tsx
index 31429b2e..b595ffba 100644
--- a/app/thread-chat/gate-3-harness/normalized-harness.tsx
+++ b/app/thread-chat/gate-3-harness/normalized-harness.tsx
@@ -1,7 +1,7 @@
 "use client"
 
 import dynamic from "next/dynamic"
-import React, { useEffect, useMemo, useRef, useState } from "react"
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react"
 import { createConversationStore, type ConversationStore } from "../core/store"
 import { useConversationStore } from "../core/use-thread-store"
 import {
@@ -34,7 +34,17 @@ import { kickoffQuestion } from "../net/prompt/prompt-pure"
 import { ThreadColumns } from "../orchestration/columns/thread-columns"
 import type { Slot } from "../orchestration/columns/placement"
 import { ThreadChatTopbar } from "../orchestration/navigation/thread-chat-topbar"
-import { ArtifactDrawer } from "../orchestration/artifacts/artifact-drawer"
+import { StoreBoundArtifactsDrawer } from "../orchestration/artifacts/store-bound-artifacts-drawer"
+import { StoreBoundProjectDrawer } from "../orchestration/artifacts/store-bound-project-drawer"
+import {
+  drawerSideForAnchor,
+  isNarrowDrawerViewport,
+  layerZIndex,
+  openLayer,
+  type DrawerId,
+  type DrawerSide,
+} from "../orchestration/overlays/workspace-overlay-logic"
+import type { OpenArtifact } from "../orchestration/artifacts/artifact-open"
 import type { CanvasChatActions } from "../orchestration/canvas/canvas-actions"
 import type { CanvasViewState } from "../orchestration/canvas/use-canvas-layout"
 import {
@@ -139,13 +149,15 @@ export function NormalizedGate3Harness({
   const [scenario, setScenario] = useState<Gate3HarnessScenario>("normal")
   const [status, setStatus] = useState("开发 harness 已就绪")
   const [selection, setSelection] = useState<SelectionInfo | null>(null)
-  const [drawerOpen, setDrawerOpen] = useState(false)
+  const [drawerStack, setDrawerStack] = useState<DrawerId[]>([])
+  const [artifactSide, setArtifactSide] = useState<DrawerSide>("right")
   const [activeArtifactId, setActiveArtifactId] = useState<string | null>(null)
   const [forceCols, setForceCols] = useState<number | null>(3)
   const [placementMode, setPlacementMode] = useState<"replace" | "fold">(
     "replace"
   )
   const [titleDraft, setTitleDraft] = useState("规范化会话验收")
+  const rootRef = useRef<HTMLDivElement | null>(null)
   const columnsRef = useRef<HTMLDivElement | null>(null)
   const [columnWidths, setColumnWidths] = useState<Record<string, number>>({})
   const [canvasViewState] = useState<CanvasViewState>(() => ({
@@ -395,14 +407,69 @@ export function NormalizedGate3Harness({
 
   const rootHasMessages = (tree.threads.main?.messages.length ?? 0) > 0
   const branchCount = Math.max(0, Object.keys(tree.threads).length - 1)
-  const markdownCount = Object.values(tree.artifacts).filter(
-    (artifact) => artifact.kind === "markdown"
-  ).length
+  const artifactCount = state.artifactOrder.length
   const selectedScenarioLabel =
     SCENARIOS.find((entry) => entry.id === scenario)?.label ?? scenario
+  const narrowDrawers = isNarrowDrawerViewport(windowWidth ?? 1600)
+  const topDrawer = drawerStack.at(-1) ?? null
+  const projectDrawerIndex = drawerStack.indexOf("project")
+  const artifactsDrawerIndex = drawerStack.indexOf("artifacts")
+  const openDrawer = (id: DrawerId) => {
+    setDrawerStack((current) =>
+      narrowDrawers ? [id] : openLayer(current, id)
+    )
+  }
+  const toggleDrawer = (id: DrawerId) => {
+    setDrawerStack((current) => {
+      if (current.at(-1) === id) return current.filter((item) => item !== id)
+      return narrowDrawers ? [id] : openLayer(current, id)
+    })
+  }
+  const closeDrawer = useCallback((id: DrawerId) => {
+    setDrawerStack((current) => current.filter((item) => item !== id))
+  }, [])
+  useEffect(() => {
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (
+        event.key !== "Escape" ||
+        event.defaultPrevented ||
+        event.isComposing ||
+        event.repeat
+      )
+        return
+      const top = drawerStack.at(-1)
+      if (top) closeDrawer(top)
+    }
+    document.addEventListener("keydown", onKeyDown)
+    return () => document.removeEventListener("keydown", onKeyDown)
+  }, [closeDrawer, drawerStack])
+  const openArtifact = useCallback<OpenArtifact>(
+    (artifactId, options) => {
+      setActiveArtifactId(artifactId)
+      setDrawerStack((current) => {
+        if (!current.includes("artifacts")) {
+          const width =
+            state.workspace.panelSizes.artifactDrawer ??
+            Math.round(window.innerWidth / 3)
+          setArtifactSide(
+            options.source === "pointer" && options.anchorRect
+              ? drawerSideForAnchor({
+                  anchorLeft: options.anchorRect.left,
+                  anchorRight: options.anchorRect.right,
+                  viewportWidth: window.innerWidth,
+                  drawerWidth: width,
+                })
+              : "right"
+          )
+        }
+        return narrowDrawers ? ["artifacts"] : openLayer(current, "artifacts")
+      })
+    },
+    [narrowDrawers, state.workspace.panelSizes.artifactDrawer]
+  )
 
   return (
-    <div className="tc" data-gate3-normalized-harness="true">
+    <div ref={rootRef} className="tc" data-gate3-normalized-harness="true">
       <ThreadChatTopbar
         viewMode={viewMode}
         showHelp
@@ -410,7 +477,7 @@ export function NormalizedGate3Harness({
         forceCols={forceCols}
         placementMode={placementMode}
         branchCount={branchCount}
-        markdownCount={markdownCount}
+        artifactCount={artifactCount}
         onNewConversation={() => window.location.reload()}
         onToggleTreeList={() =>
           setStatus("对话列表将在 Gate 4 接正式 Project list API")
@@ -425,7 +492,8 @@ export function NormalizedGate3Harness({
         onForceCols={setForceCols}
         onPlacementModeChange={setPlacementMode}
         onToggleThreadTree={() => openThread(GATE3_HARNESS_IDS.nestedThreadId)}
-        onToggleMarkdown={() => setDrawerOpen((open) => !open)}
+        onToggleProject={() => toggleDrawer("project")}
+        onToggleArtifacts={() => toggleDrawer("artifacts")}
       />
 
       <aside
@@ -434,7 +502,7 @@ export function NormalizedGate3Harness({
           position: "fixed",
           zIndex: 80,
           right: 12,
-          top: 52,
+          top: narrowDrawers ? 148 : 52,
           display: "grid",
           gap: 6,
           width: 230,
@@ -539,10 +607,7 @@ export function NormalizedGate3Harness({
                     : undefined
                 }
                 onOpenThread={(target) => openThread(target)}
-                onOpenArtifact={(artifactId) => {
-                  setActiveArtifactId(artifactId)
-                  setDrawerOpen(true)
-                }}
+                onOpenArtifact={openArtifact}
                 onCrumbNav={openThread}
                 onOpenSwitcher={() =>
                   setStatus("Switcher 数据已由 normalized tree selector 提供")
@@ -587,10 +652,7 @@ export function NormalizedGate3Harness({
             runtime.store.getState().setWorkspace({ view: "columns" })
             openThread(threadId)
           }}
-          onOpenArtifact={(artifactId) => {
-            setActiveArtifactId(artifactId)
-            setDrawerOpen(true)
-          }}
+          onOpenArtifact={openArtifact}
         />
       )}
 
@@ -604,11 +666,32 @@ export function NormalizedGate3Harness({
         maxExpanded={Math.max(1, (forceCols ?? 3) - 1)}
         lastActiveOf={(threadId) => tree.threads[threadId]?.lastActive ?? 0}
       />
-      <ArtifactDrawer
-        state={tree}
-        open={drawerOpen}
+      <StoreBoundProjectDrawer
+        projectId={projectId}
+        store={runtime.store}
+        client={runtime.mock.client}
+        commands={runtime.commands}
+        open={projectDrawerIndex >= 0}
+        zIndex={layerZIndex(Math.max(0, projectDrawerIndex))}
+        topLayer={topDrawer === "project"}
+        narrow={narrowDrawers}
+        container={rootRef}
+        onActivate={() => openDrawer("project")}
+        onClose={() => closeDrawer("project")}
+      />
+      <StoreBoundArtifactsDrawer
+        store={runtime.store}
+        open={artifactsDrawerIndex >= 0}
         activeId={activeArtifactId}
-        onClose={() => setDrawerOpen(false)}
+        zIndex={layerZIndex(Math.max(0, artifactsDrawerIndex))}
+        side={artifactSide}
+        topLayer={topDrawer === "artifacts"}
+        narrow={narrowDrawers}
+        container={rootRef}
+        panelSizes={state.workspace.panelSizes}
+        setWorkspace={(next) => runtime.store.getState().setWorkspace(next)}
+        onActivate={() => openDrawer("artifacts")}
+        onClose={() => closeDrawer("artifacts")}
         onSelect={setActiveArtifactId}
         onLocate={(threadId) => {
           runtime.store.getState().setWorkspace({ view: "columns" })
diff --git a/app/thread-chat/net/persistence/workspace-state.ts b/app/thread-chat/net/persistence/workspace-state.ts
index 6ee43fbb..e3070d7d 100644
--- a/app/thread-chat/net/persistence/workspace-state.ts
+++ b/app/thread-chat/net/persistence/workspace-state.ts
@@ -1,3 +1,4 @@
+import { WORKSPACE_DRAWER } from "@/constants/workspace-drawers"
 import type { WorkspaceUiState } from "../../core/types"
 
 const WORKSPACE_VERSION = 1
@@ -112,7 +113,9 @@ export function sanitizeWorkspaceState(
           }
         : {}),
       ...(typeof panelRaw.artifactDrawer === "number" &&
-      Number.isFinite(panelRaw.artifactDrawer)
+      Number.isFinite(panelRaw.artifactDrawer) &&
+      panelRaw.artifactDrawer >= WORKSPACE_DRAWER.artifactMinWidth &&
+      panelRaw.artifactDrawer <= WORKSPACE_DRAWER.artifactMaxPersistedWidth
         ? { artifactDrawer: panelRaw.artifactDrawer }
         : {}),
     },
diff --git a/app/thread-chat/orchestration/artifacts/artifact-drawer.tsx b/app/thread-chat/orchestration/artifacts/artifact-drawer.tsx
deleted file mode 100644
index 0db22051..00000000
--- a/app/thread-chat/orchestration/artifacts/artifact-drawer.tsx
+++ /dev/null
@@ -1,104 +0,0 @@
-"use client"
-
-import { useMemo } from "react"
-import type { ArtifactDTO, ProjectDTO } from "@/lib/thread-chat/contracts/dto"
-import type { MessageStatus, ThreadTreeState } from "../../core/types"
-import { ProjectPanel } from "./project-panel"
-
-export interface ArtifactDrawerProps {
-  state: ThreadTreeState
-  open: boolean
-  activeId: string | null
-  onClose(): void
-  onSelect(id: string): void
-  onLocate(threadId: string, sourceMessageId: string): void
-}
-
-const HARNESS_TIMESTAMP = "1970-01-01T00:00:00.000Z"
-
-function sourceStatus(status: MessageStatus | undefined): ArtifactDTO["sourceMessageStatus"] {
-  if (status === "stopped") return "stopped"
-  if (status === "error") return "failed"
-  if (status === "pending" || status === "streaming") return "generating"
-  return "completed"
-}
-
-/**
- * Gate 3 旧 harness 的薄适配层。生产入口只使用 StoreBoundProjectPanel；这里仅把
- * 旧 ThreadTreeState 转成统一 ProjectPanel 所需 DTO，避免保留第二套 Drawer UI。
- */
-export function ArtifactDrawer({
-  state,
-  open,
-  activeId,
-  onClose,
-  onSelect,
-  onLocate,
-}: ArtifactDrawerProps) {
-  const root = state.threads.main ?? Object.values(state.threads).find((thread) => thread.parentId === null)
-  const project = useMemo<ProjectDTO | null>(
-    () =>
-      root
-        ? {
-            id: "gate-3-harness-project",
-            rootThreadId: root.id,
-            autoTitle: root.title || null,
-            customTitle: null,
-            target: null,
-            instructions: null,
-            contractVersion: 0,
-            archivedAt: null,
-            createdAt: HARNESS_TIMESTAMP,
-            updatedAt: HARNESS_TIMESTAMP,
-          }
-        : null,
-    [root]
-  )
-  const artifacts = useMemo<ArtifactDTO[]>(
-    () =>
-      state.artifactOrder.flatMap((artifactId) => {
-        const artifact = state.artifacts[artifactId]
-        if (!artifact) return []
-        const thread = state.threads[artifact.sourceThreadId]
-        const sourceMessage = thread?.messages.find(
-          (message) => message.id === artifact.sourceMessageId
-        )
-        return [
-          {
-            id: artifact.id,
-            projectId: project?.id ?? "gate-3-harness-project",
-            threadId: artifact.sourceThreadId,
-            sourceMessageId: artifact.sourceMessageId,
-            sourceThreadTitle: thread?.title ?? null,
-            sourceThreadFootnote: thread?.footnote ?? null,
-            sourceMessageStatus: sourceStatus(sourceMessage?.status),
-            kind: artifact.kind,
-            title: artifact.title,
-            content: artifact.content,
-            language: artifact.lang ?? null,
-            metadata: {},
-            createdAt: HARNESS_TIMESTAMP,
-            updatedAt: HARNESS_TIMESTAMP,
-          },
-        ]
-      }),
-    [project?.id, state.artifactOrder, state.artifacts, state.threads]
-  )
-
-  return (
-    <ProjectPanel
-      project={project}
-      files={[]}
-      artifacts={artifacts}
-      open={open}
-      activeId={activeId}
-      onClose={onClose}
-      onSelect={onSelect}
-      onLocate={onLocate}
-      onRefresh={() => Promise.resolve()}
-      onSaveContract={() => Promise.resolve()}
-      onAddProjectFile={() => Promise.resolve()}
-      onRemoveProjectFile={() => Promise.resolve()}
-    />
-  )
-}
diff --git a/app/thread-chat/orchestration/artifacts/artifact-open.ts b/app/thread-chat/orchestration/artifacts/artifact-open.ts
new file mode 100644
index 00000000..4c36d9da
--- /dev/null
+++ b/app/thread-chat/orchestration/artifacts/artifact-open.ts
@@ -0,0 +1,44 @@
+import type { DrawerSide } from "../overlays/workspace-overlay-logic"
+
+/** 可跨客户端组件边界传递的卡片位置，不携带 DOMRect 方法。 */
+export interface ArtifactAnchorRect {
+  left: number
+  right: number
+  top: number
+  bottom: number
+  width: number
+  height: number
+}
+
+export interface OpenArtifactOptions {
+  source: "pointer" | "keyboard" | "topbar"
+  anchorRect?: ArtifactAnchorRect
+}
+
+export type OpenArtifact = (
+  artifactId: string,
+  options: OpenArtifactOptions
+) => void
+
+export function serializeArtifactAnchorRect(
+  rect: DOMRect
+): ArtifactAnchorRect {
+  return {
+    left: rect.left,
+    right: rect.right,
+    top: rect.top,
+    bottom: rect.bottom,
+    width: rect.width,
+    height: rect.height,
+  }
+}
+
+export const TOPBAR_ARTIFACT_OPEN: OpenArtifactOptions = { source: "topbar" }
+export const KEYBOARD_ARTIFACT_OPEN: OpenArtifactOptions = {
+  source: "keyboard",
+}
+
+export interface ArtifactDrawerPlacement {
+  side: DrawerSide
+  width: number
+}
diff --git a/app/thread-chat/orchestration/artifacts/artifacts-drawer.tsx b/app/thread-chat/orchestration/artifacts/artifacts-drawer.tsx
new file mode 100644
index 00000000..15ddcaad
--- /dev/null
+++ b/app/thread-chat/orchestration/artifacts/artifacts-drawer.tsx
@@ -0,0 +1,333 @@
+"use client"
+
+import {
+  useEffect,
+  useId,
+  useMemo,
+  useRef,
+  useState,
+  type RefObject,
+} from "react"
+import {
+  Check,
+  Copy,
+  FileText,
+  FolderOpen,
+  LocateFixed,
+  Search,
+  X,
+} from "lucide-react"
+import { ARTIFACT_SEARCH_THRESHOLD } from "@/constants/project-workspace"
+import type { ArtifactDTO, ProjectDTO } from "@/lib/thread-chat/contracts/dto"
+import type { WorkspacePanelSizes, WorkspaceUiState } from "../../core/types"
+import { useCopyMarkdown } from "../../chat/actions/use-copy-markdown"
+import { MarkdownBody } from "../../chat/message/markdown-body"
+import type { DrawerSide } from "../overlays/workspace-overlay-logic"
+import { LayeredDrawer } from "./layered-drawer"
+
+function formatDate(value: string) {
+  return new Intl.DateTimeFormat("zh-CN", {
+    month: "short",
+    day: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+  }).format(new Date(value))
+}
+
+function sourceStatusLabel(status: ArtifactDTO["sourceMessageStatus"]) {
+  if (status === "completed") return "已完成"
+  if (status === "stopped") return "已停止"
+  if (status === "failed") return "失败"
+  return "生成中"
+}
+
+function artifactKindLabel(kind: ArtifactDTO["kind"]) {
+  if (kind === "markdown") return "Markdown"
+  if (kind === "code") return "Code"
+  return "Note"
+}
+
+export interface ArtifactsDrawerProps {
+  project: ProjectDTO | null
+  artifacts: ArtifactDTO[]
+  open: boolean
+  activeId: string | null
+  zIndex: number
+  side: DrawerSide
+  topLayer: boolean
+  narrow: boolean
+  container?: HTMLElement | null | RefObject<HTMLElement | null>
+  panelSizes?: WorkspacePanelSizes
+  setWorkspace?(next: Partial<WorkspaceUiState>): void
+  onActivate(): void
+  onClose(): void
+  onOpenChangeComplete?(open: boolean): void
+  onSelect(id: string | null): void
+  onLocate(threadId: string, sourceMessageId: string): void
+}
+
+export function ArtifactsDrawer({
+  project,
+  artifacts,
+  open,
+  activeId,
+  zIndex,
+  side,
+  topLayer,
+  narrow,
+  container,
+  panelSizes,
+  setWorkspace,
+  onActivate,
+  onClose,
+  onOpenChangeComplete,
+  onSelect,
+  onLocate,
+}: ArtifactsDrawerProps) {
+  const titleId = useId()
+  const listRef = useRef<HTMLDivElement | null>(null)
+  const detailRef = useRef<HTMLDivElement | null>(null)
+  const backButtonRef = useRef<HTMLButtonElement | null>(null)
+  const listScrollRef = useRef(0)
+  const showSearch = artifacts.length >= ARTIFACT_SEARCH_THRESHOLD
+  const [searchState, setSearchState] = useState({
+    visible: showSearch,
+    query: "",
+  })
+  if (searchState.visible !== showSearch) {
+    setSearchState({ visible: showSearch, query: "" })
+  }
+  const query = searchState.query
+  const setQuery = (value: string) =>
+    setSearchState({ visible: showSearch, query: value })
+  const [error, setError] = useState<string | null>(null)
+  const { copied, copy } = useCopyMarkdown(setError)
+  const selectedArtifact = useMemo(
+    () => artifacts.find((artifact) => artifact.id === activeId) ?? null,
+    [activeId, artifacts]
+  )
+  const filteredArtifacts = useMemo(() => {
+    const normalizedQuery = query.trim().toLowerCase()
+    return [...artifacts]
+      .sort((left, right) => right.createdAt.localeCompare(left.createdAt))
+      .filter((artifact) => {
+        if (!normalizedQuery) return true
+        return [artifact.title, artifact.kind, artifact.sourceThreadTitle ?? ""]
+          .join(" ")
+          .toLowerCase()
+          .includes(normalizedQuery)
+      })
+  }, [artifacts, query])
+
+  useEffect(() => {
+    if (!activeId) return
+    detailRef.current?.scrollTo({ top: 0 })
+    backButtonRef.current?.focus()
+  }, [activeId])
+
+  useEffect(() => {
+    if (!selectedArtifact) {
+      requestAnimationFrame(() => {
+        if (listRef.current) listRef.current.scrollTop = listScrollRef.current
+      })
+    }
+  }, [selectedArtifact])
+
+  const returnToList = () => onSelect(null)
+  const selectArtifact = (id: string) => {
+    listScrollRef.current = listRef.current?.scrollTop ?? 0
+    onSelect(id)
+  }
+  const locateArtifact = (artifact: ArtifactDTO) => {
+    const viewThreadId =
+      project?.rootThreadId === artifact.threadId ? "main" : artifact.threadId
+    onLocate(viewThreadId, artifact.sourceMessageId)
+  }
+
+  return (
+    <LayeredDrawer
+      open={open}
+      zIndex={zIndex}
+      side={side}
+      topLayer={topLayer}
+      onActivate={onActivate}
+      onClose={onClose}
+      onOpenChangeComplete={onOpenChangeComplete}
+      container={container}
+      resizable
+      narrow={narrow}
+      panelSizes={panelSizes}
+      setWorkspace={setWorkspace}
+      className="artifacts-drawer"
+    >
+      <section
+        className="artifacts-drawer-shell"
+        role="dialog"
+        aria-modal="false"
+        aria-labelledby={titleId}
+        onKeyDownCapture={(event) => {
+          if (
+            event.key !== "Escape" ||
+            event.nativeEvent.isComposing ||
+            event.repeat
+          )
+            return
+          if (selectedArtifact) {
+            event.preventDefault()
+            event.stopPropagation()
+            returnToList()
+          } else if (query) {
+            event.preventDefault()
+            event.stopPropagation()
+            setQuery("")
+          }
+        }}
+      >
+        <header className="art-head artifacts-drawer-head">
+          <FolderOpen size={16} aria-hidden="true" />
+          <h3 id={titleId}>Artifacts</h3>
+          <span className="artifacts-total">{artifacts.length}</span>
+          <button
+            type="button"
+            className="art-x"
+            data-layered-drawer-close
+            aria-label="关闭 Artifacts"
+            title="关闭 Artifacts"
+            onClick={onClose}
+          >
+            <X size={13} aria-hidden="true" />
+          </button>
+        </header>
+
+        {error ? <div className="project-error">{error}</div> : null}
+
+        {selectedArtifact ? (
+          <div className="art-body project-panel-body" ref={detailRef}>
+            <div className="project-artifact-detail">
+              <button
+                ref={backButtonRef}
+                className="project-back"
+                onClick={returnToList}
+              >
+                ← 全部 Artifacts
+              </button>
+              <div className="project-section-heading artifact-detail-heading">
+                <div>
+                  <div className="project-eyebrow">
+                    {artifactKindLabel(selectedArtifact.kind)}
+                  </div>
+                  <h4>{selectedArtifact.title}</h4>
+                  <p>
+                    来源：{selectedArtifact.sourceThreadTitle ?? "未命名 Thread"}
+                    {selectedArtifact.sourceThreadFootnote !== null
+                      ? ` · 脚注 ${selectedArtifact.sourceThreadFootnote}`
+                      : ""}
+                    {` · ${sourceStatusLabel(selectedArtifact.sourceMessageStatus)}`}
+                    {` · ${formatDate(selectedArtifact.createdAt)}`}
+                  </p>
+                </div>
+                <div className="project-actions">
+                  {selectedArtifact.kind === "markdown" ? (
+                    <button
+                      type="button"
+                      className="project-icon-button"
+                      aria-label={copied ? "Markdown 已复制" : "复制 Markdown"}
+                      title={copied ? "Markdown 已复制" : "复制 Markdown"}
+                      onClick={() => void copy(selectedArtifact.content)}
+                    >
+                      {copied ? <Check size={13} /> : <Copy size={13} />}
+                    </button>
+                  ) : null}
+                  <button
+                    type="button"
+                    className="project-icon-button"
+                    aria-label="定位来源消息"
+                    title="定位来源消息"
+                    onClick={() => locateArtifact(selectedArtifact)}
+                  >
+                    <LocateFixed size={13} />
+                  </button>
+                </div>
+              </div>
+              <div className="project-artifact-content">
+                {selectedArtifact.kind === "markdown" ? (
+                  <MarkdownBody source={selectedArtifact.content} />
+                ) : null}
+                {selectedArtifact.kind === "code" ? (
+                  <pre className="art-code">{selectedArtifact.content}</pre>
+                ) : null}
+                {selectedArtifact.kind === "note" ? (
+                  <div className="art-note">
+                    {selectedArtifact.content
+                      .split("\n\n")
+                      .map((paragraph, index) => (
+                        <p key={index}>{paragraph}</p>
+                      ))}
+                  </div>
+                ) : null}
+              </div>
+            </div>
+          </div>
+        ) : (
+          <div className="art-body artifacts-list-body" ref={listRef}>
+            {showSearch ? (
+              <label className="project-search">
+                <Search size={13} aria-hidden="true" />
+                <input
+                  value={query}
+                  onChange={(event) => setQuery(event.target.value)}
+                  placeholder="搜索标题、类型或来源 Thread"
+                  aria-label="搜索 Artifacts"
+                />
+              </label>
+            ) : null}
+
+            {artifacts.length === 0 ? (
+              <div className="project-empty artifacts-empty">
+                <FileText size={18} aria-hidden="true" />
+                <strong>还没有 Artifact</strong>
+                <span>在任意 Thread 中生成 Markdown、Code 或 Note 后会出现在这里。</span>
+              </div>
+            ) : filteredArtifacts.length === 0 ? (
+              <div className="project-empty artifacts-empty">
+                <Search size={18} aria-hidden="true" />
+                <strong>无匹配 Artifact</strong>
+                <span>换个标题、类型或来源 Thread 关键词试试。</span>
+              </div>
+            ) : (
+              <div className="project-resource-list dense">
+                {filteredArtifacts.map((artifact) => (
+                  <button
+                    key={artifact.id}
+                    className="project-resource-card project-artifact-row"
+                    onClick={() => selectArtifact(artifact.id)}
+                  >
+                    <div className="project-resource-icon">
+                      <FileText size={13} aria-hidden="true" />
+                    </div>
+                    <div className="project-resource-main">
+                      <div className="project-resource-title-row">
+                        <strong>{artifact.title}</strong>
+                        <span className="project-kind">
+                          {artifactKindLabel(artifact.kind)}
+                        </span>
+                      </div>
+                      <div className="project-resource-meta">
+                        {artifact.sourceThreadTitle ?? "未命名 Thread"}
+                        {artifact.sourceThreadFootnote !== null
+                          ? ` · 脚注 ${artifact.sourceThreadFootnote}`
+                          : ""}
+                        {` · ${sourceStatusLabel(artifact.sourceMessageStatus)}`}
+                        {` · ${formatDate(artifact.createdAt)}`}
+                      </div>
+                    </div>
+                  </button>
+                ))}
+              </div>
+            )}
+          </div>
+        )}
+      </section>
+    </LayeredDrawer>
+  )
+}
diff --git a/app/thread-chat/orchestration/artifacts/layered-drawer.tsx b/app/thread-chat/orchestration/artifacts/layered-drawer.tsx
new file mode 100644
index 00000000..8e49bbe0
--- /dev/null
+++ b/app/thread-chat/orchestration/artifacts/layered-drawer.tsx
@@ -0,0 +1,289 @@
+"use client"
+
+import { Drawer } from "@base-ui/react/drawer"
+import {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+  type CSSProperties,
+  type KeyboardEvent,
+  type PointerEvent,
+  type ReactNode,
+  type RefObject,
+} from "react"
+import { WORKSPACE_DRAWER } from "@/constants/workspace-drawers"
+import type { WorkspacePanelSizes, WorkspaceUiState } from "../../core/types"
+import {
+  clampArtifactDrawerWidth,
+  type DrawerSide,
+} from "../overlays/workspace-overlay-logic"
+
+function focusable(element: HTMLElement | null): element is HTMLElement {
+  if (!element?.isConnected || element.closest("[inert]")) return false
+  const rect = element.getBoundingClientRect()
+  return rect.width > 0 && rect.height > 0
+}
+
+function fallbackFocus(): HTMLElement | null {
+  const topClose = document.querySelector<HTMLElement>(
+    '[data-layered-drawer-top="true"] [data-layered-drawer-close]'
+  )
+  if (focusable(topClose)) return topClose
+  const topbarControl = document.querySelector<HTMLElement>(
+    ".tc .topbar button:not(:disabled)"
+  )
+  return focusable(topbarControl) ? topbarControl : null
+}
+
+export interface LayeredDrawerProps {
+  open: boolean
+  zIndex: number
+  side: DrawerSide
+  topLayer?: boolean
+  onActivate(): void
+  onClose(): void
+  onOpenChangeComplete?(open: boolean): void
+  children: ReactNode
+  className?: string
+  container?: HTMLElement | null | RefObject<HTMLElement | null>
+  initialWidth?: number
+  resizable?: boolean
+  narrow?: boolean
+  onWidthCommit?(width: number): void
+  onWidthReset?(): void
+  panelSizes?: WorkspacePanelSizes
+  setWorkspace?(next: Partial<WorkspaceUiState>): void
+}
+
+export function LayeredDrawer({
+  open,
+  zIndex,
+  side,
+  topLayer = true,
+  onActivate,
+  onClose,
+  onOpenChangeComplete,
+  children,
+  className = "",
+  container,
+  initialWidth,
+  resizable = false,
+  narrow = false,
+  onWidthCommit,
+  onWidthReset,
+  panelSizes,
+  setWorkspace,
+}: LayeredDrawerProps) {
+  const triggerRef = useRef<HTMLElement | null>(null)
+  const popupRef = useRef<HTMLDivElement | null>(null)
+  const wasOpenRef = useRef(false)
+  const dragRef = useRef<{
+    pointerId: number
+    startX: number
+    startWidth: number
+    currentWidth: number
+  } | null>(null)
+  const defaultWidth = WORKSPACE_DRAWER.artifactDefaultWidth
+  const [width, setWidth] = useState(
+    initialWidth ?? panelSizes?.artifactDrawer ?? defaultWidth
+  )
+
+  useEffect(() => {
+    if (initialWidth !== undefined && !dragRef.current) setWidth(initialWidth)
+  }, [initialWidth])
+
+  useLayoutEffect(() => {
+    if (!open) {
+      wasOpenRef.current = false
+      return
+    }
+    if (wasOpenRef.current) return
+    triggerRef.current =
+      document.activeElement instanceof HTMLElement
+        ? document.activeElement
+        : null
+    wasOpenRef.current = true
+    queueMicrotask(() =>
+      popupRef.current
+        ?.querySelector<HTMLElement>("[data-layered-drawer-close]")
+        ?.focus()
+    )
+  }, [open])
+  const restoreFocus = useCallback(() => {
+    const target = focusable(triggerRef.current)
+      ? triggerRef.current
+      : fallbackFocus()
+    target?.focus()
+  }, [])
+  const commitWidth = useCallback(
+    (next: number) => {
+      onWidthCommit?.(next)
+      if (setWorkspace) {
+        setWorkspace({
+          panelSizes: { ...panelSizes, artifactDrawer: next },
+        })
+      }
+    },
+    [onWidthCommit, panelSizes, setWorkspace]
+  )
+  const resetWidth = useCallback(() => {
+    setWidth(WORKSPACE_DRAWER.artifactDefaultWidth)
+    onWidthReset?.()
+    if (setWorkspace) {
+      const nextPanelSizes = { ...panelSizes }
+      delete nextPanelSizes.artifactDrawer
+      setWorkspace({ panelSizes: nextPanelSizes })
+    }
+  }, [onWidthReset, panelSizes, setWorkspace])
+  const commitKeyboardWidth = useCallback(
+    (next: number) => {
+      setWidth(next)
+      commitWidth(next)
+    },
+    [commitWidth]
+  )
+  const onResizeKeyDown = useCallback(
+    (event: KeyboardEvent<HTMLDivElement>) => {
+      if (event.key === "Home") {
+        event.preventDefault()
+        resetWidth()
+        return
+      }
+      if (event.key !== "ArrowLeft" && event.key !== "ArrowRight") return
+      event.preventDefault()
+      const direction = event.key === "ArrowRight" ? 1 : -1
+      const mirrored = side === "left" ? direction : -direction
+      const step = event.shiftKey
+        ? WORKSPACE_DRAWER.resizeKeyboardLargeStep
+        : WORKSPACE_DRAWER.resizeKeyboardStep
+      commitKeyboardWidth(
+        clampArtifactDrawerWidth(width + mirrored * step, window.innerWidth)
+      )
+    },
+    [commitKeyboardWidth, resetWidth, side, width]
+  )
+  const onResizePointerDown = useCallback(
+    (event: PointerEvent<HTMLDivElement>) => {
+      event.currentTarget.setPointerCapture(event.pointerId)
+      dragRef.current = {
+        pointerId: event.pointerId,
+        startX: event.clientX,
+        startWidth: width,
+        currentWidth: width,
+      }
+      document.body.classList.add("drawer-resizing")
+    },
+    [width]
+  )
+  const onResizePointerMove = useCallback(
+    (event: PointerEvent<HTMLDivElement>) => {
+      const drag = dragRef.current
+      if (!drag || drag.pointerId !== event.pointerId) return
+      const delta = event.clientX - drag.startX
+      const next = clampArtifactDrawerWidth(
+        drag.startWidth + (side === "left" ? delta : -delta),
+        window.innerWidth
+      )
+      drag.currentWidth = next
+      setWidth(next)
+    },
+    [side]
+  )
+  const finishResize = useCallback(
+    (event: PointerEvent<HTMLDivElement>, commit: boolean) => {
+      if (dragRef.current?.pointerId !== event.pointerId) return
+      const next = dragRef.current.currentWidth
+      if (event.currentTarget.hasPointerCapture(event.pointerId))
+        event.currentTarget.releasePointerCapture(event.pointerId)
+      dragRef.current = null
+      document.body.classList.remove("drawer-resizing")
+      if (commit) commitWidth(next)
+    },
+    [commitWidth]
+  )
+
+  const viewportWidth =
+    typeof window === "undefined"
+      ? WORKSPACE_DRAWER.narrowBreakpoint
+      : window.innerWidth
+  const boundedWidth = clampArtifactDrawerWidth(width, viewportWidth)
+  const renderedWidth = narrow
+    ? `${WORKSPACE_DRAWER.narrowViewportRatio * 100}vw`
+    : `${boundedWidth}px`
+  const style = {
+    zIndex,
+    "--layered-drawer-width": renderedWidth,
+  } as CSSProperties
+
+  return (
+    <Drawer.Root
+      open={open}
+      modal={false}
+      disablePointerDismissal
+      swipeDirection={side === "left" ? "left" : "right"}
+      onOpenChange={(nextOpen, details) => {
+        if (nextOpen) return
+        if (details.reason === "escape-key") {
+          details.cancel()
+          details.allowPropagation()
+          return
+        }
+        if (details.reason === "outside-press") {
+          details.cancel()
+          return
+        }
+        onClose()
+      }}
+      onOpenChangeComplete={(nextOpen) => {
+        if (!nextOpen) queueMicrotask(restoreFocus)
+        onOpenChangeComplete?.(nextOpen)
+      }}
+    >
+      <Drawer.Portal
+        className="tc layered-drawer-portal"
+        container={container}
+        keepMounted
+      >
+        <Drawer.Viewport className="layered-drawer-viewport" style={{ zIndex }}>
+          <Drawer.Popup
+            className={`layered-drawer ${side} ${narrow ? "narrow" : ""} ${className}`}
+            ref={popupRef}
+            style={style}
+            data-layered-drawer-top={topLayer ? "true" : "false"}
+            aria-hidden={!open || !topLayer}
+            inert={!open || !topLayer}
+            initialFocus={false}
+            finalFocus={false}
+            onPointerDown={onActivate}
+          >
+            {resizable && !narrow && (
+              <div
+                className="layered-drawer-resizer"
+                role="separator"
+                aria-label="调整抽屉宽度"
+                aria-orientation="vertical"
+                aria-valuemin={WORKSPACE_DRAWER.artifactMinWidth}
+                aria-valuemax={Math.floor(
+                  viewportWidth * WORKSPACE_DRAWER.artifactMaxViewportRatio
+                )}
+                aria-valuenow={Math.round(boundedWidth)}
+                tabIndex={0}
+                onKeyDown={onResizeKeyDown}
+                onDoubleClick={resetWidth}
+                onPointerDown={onResizePointerDown}
+                onPointerMove={onResizePointerMove}
+                onPointerUp={(event) => finishResize(event, true)}
+                onPointerCancel={(event) => finishResize(event, false)}
+              />
+            )}
+            <Drawer.Content className="layered-drawer-content">
+              {children}
+            </Drawer.Content>
+          </Drawer.Popup>
+        </Drawer.Viewport>
+      </Drawer.Portal>
+    </Drawer.Root>
+  )
+}
diff --git a/app/thread-chat/orchestration/artifacts/markdown-artifact-card.tsx b/app/thread-chat/orchestration/artifacts/markdown-artifact-card.tsx
index 09dd51e8..878f76e5 100644
--- a/app/thread-chat/orchestration/artifacts/markdown-artifact-card.tsx
+++ b/app/thread-chat/orchestration/artifacts/markdown-artifact-card.tsx
@@ -3,11 +3,13 @@
 import { FileCode2, FileText, LoaderCircle } from "lucide-react"
 import type { Artifact, MarkdownGenerationProgress } from "../../core/types"
 import { dc } from "../../theme"
+import type { OpenArtifact } from "./artifact-open"
+import { serializeArtifactAnchorRect } from "./artifact-open"
 
 export interface MarkdownArtifactCardProps {
   artifact: Artifact
   sourceDepth: number | null
-  onOpen: (artifactId: string) => void
+  onOpen: OpenArtifact
   compact?: boolean
 }
 
@@ -78,7 +80,18 @@ export function MarkdownArtifactCard({
   return (
     <button
       className={`acard ${depthClass} ${compact ? "compact" : ""}`}
-      onClick={() => onOpen(artifact.id)}
+      onClick={(event) =>
+        onOpen(artifact.id, {
+          source: event.detail === 0 ? "keyboard" : "pointer",
+          ...(event.detail === 0
+            ? {}
+            : {
+                anchorRect: serializeArtifactAnchorRect(
+                  event.currentTarget.getBoundingClientRect()
+                ),
+              }),
+        })
+      }
     >
       <span className="ic">
         {artifact.kind === "code" ? (
@@ -95,7 +108,7 @@ export function MarkdownArtifactCard({
             : `ARTIFACT · ${artifact.kind === "code" ? (artifact.lang ?? "code") : "note"}`}
         </span>
       </span>
-      <span className="go">{isMarkdown ? "打开预览 →" : "抽屉打开 →"}</span>
+      <span className="go">{isMarkdown ? "打开预览" : "打开详情"}</span>
     </button>
   )
 }
diff --git a/app/thread-chat/orchestration/artifacts/message-artifacts.tsx b/app/thread-chat/orchestration/artifacts/message-artifacts.tsx
index 8a730fd9..d15cb501 100644
--- a/app/thread-chat/orchestration/artifacts/message-artifacts.tsx
+++ b/app/thread-chat/orchestration/artifacts/message-artifacts.tsx
@@ -1,6 +1,7 @@
 "use client"
 
 import type { Message, ThreadTreeState } from "../../core/types"
+import type { OpenArtifact } from "./artifact-open"
 import {
   MarkdownArtifactCard,
   MarkdownArtifactProgressCard,
@@ -18,7 +19,7 @@ export function MessageArtifacts({
   message: Message
   sourceDepth: number | null
   compact?: boolean
-  onOpen?: (artifactId: string) => void
+  onOpen?: OpenArtifact
 }) {
   const artifacts = onOpen ? selectMessageArtifacts(state, message) : []
   if (!message.markdownGeneration && artifacts.length === 0) return null
diff --git a/app/thread-chat/orchestration/artifacts/project-drawer.tsx b/app/thread-chat/orchestration/artifacts/project-drawer.tsx
new file mode 100644
index 00000000..ddd8bb2a
--- /dev/null
+++ b/app/thread-chat/orchestration/artifacts/project-drawer.tsx
@@ -0,0 +1,514 @@
+"use client"
+
+import {
+  useId,
+  useMemo,
+  useRef,
+  useState,
+  type KeyboardEvent,
+  type RefObject,
+} from "react"
+import {
+  ExternalLink,
+  FolderKanban,
+  Paperclip,
+  Pencil,
+  Trash2,
+  Upload,
+  X,
+} from "lucide-react"
+import { ATTACHMENT_ACCEPT } from "@/constants/attachment"
+import {
+  PROJECT_INSTRUCTIONS_MAX_CHARS,
+  PROJECT_TARGET_MAX_CHARS,
+  PROJECT_WORKSPACE_COPY,
+} from "@/constants/project-workspace"
+import { WORKSPACE_DRAWER } from "@/constants/workspace-drawers"
+import type {
+  ProjectDTO,
+  ProjectFileDTO,
+} from "@/lib/thread-chat/contracts/dto"
+import { uploadProjectFile } from "../../net/project-file-upload"
+import { LayeredDrawer } from "./layered-drawer"
+
+type ProjectDrawerSection = "overview" | "files"
+
+export interface ProjectDrawerProps {
+  project: ProjectDTO | null
+  files: ProjectFileDTO[]
+  open: boolean
+  zIndex: number
+  topLayer: boolean
+  narrow: boolean
+  container: HTMLElement | null | RefObject<HTMLElement | null>
+  onActivate(): void
+  onClose(): void
+  onRefresh(): Promise<void>
+  onSaveContract(target: string, instructions: string): Promise<void>
+  onAddProjectFile(attachmentId: string): Promise<void>
+  onRemoveProjectFile(attachmentId: string): Promise<void>
+}
+
+function formatBytes(size: number) {
+  if (size < 1024) return `${size} B`
+  if (size < 1024 * 1024) return `${(size / 1024).toFixed(1)} KB`
+  return `${(size / (1024 * 1024)).toFixed(1)} MB`
+}
+
+function formatDate(value: string) {
+  return new Intl.DateTimeFormat("zh-CN", {
+    month: "short",
+    day: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+  }).format(new Date(value))
+}
+
+function fileStatusLabel(file: ProjectFileDTO) {
+  if (file.status === "ready") return "可用"
+  if (file.status === "failed") return "失败"
+  return "处理中"
+}
+
+export function ProjectDrawer({
+  project,
+  files,
+  open,
+  zIndex,
+  topLayer,
+  narrow,
+  container,
+  onActivate,
+  onClose,
+  onRefresh,
+  onSaveContract,
+  onAddProjectFile,
+  onRemoveProjectFile,
+}: ProjectDrawerProps) {
+  const titleId = useId()
+  const overviewTabId = useId()
+  const overviewPanelId = useId()
+  const filesTabId = useId()
+  const filesPanelId = useId()
+  const fileInputRef = useRef<HTMLInputElement | null>(null)
+  const overviewTabRef = useRef<HTMLButtonElement | null>(null)
+  const filesTabRef = useRef<HTMLButtonElement | null>(null)
+  const [section, setSection] = useState<ProjectDrawerSection>("overview")
+  const [editing, setEditing] = useState(false)
+  const [targetDraft, setTargetDraft] = useState("")
+  const [instructionsDraft, setInstructionsDraft] = useState("")
+  const [saving, setSaving] = useState(false)
+  const [uploading, setUploading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const archived = Boolean(project?.archivedAt)
+  const emptyProjectState = (
+    <div className="project-empty">
+      <FolderKanban size={18} />
+      <strong>Project 尚未创建</strong>
+      <span>发送第一条消息后，即可配置 Project 的目标、长期指令和文件。</span>
+    </div>
+  )
+
+  const sortedFiles = useMemo(
+    () =>
+      [...files].sort((left, right) =>
+        right.addedAt.localeCompare(left.addedAt)
+      ),
+    [files]
+  )
+
+  const beginEdit = () => {
+    if (!project) return
+    setTargetDraft(project.target ?? "")
+    setInstructionsDraft(project.instructions ?? "")
+    setError(null)
+    setEditing(true)
+  }
+
+  const cancelEdit = () => {
+    setTargetDraft(project?.target ?? "")
+    setInstructionsDraft(project?.instructions ?? "")
+    setError(null)
+    setEditing(false)
+  }
+
+  const saveContract = async () => {
+    if (!project || archived) return
+    setSaving(true)
+    setError(null)
+    try {
+      await onSaveContract(targetDraft, instructionsDraft)
+      setEditing(false)
+    } catch (cause) {
+      setError(
+        cause instanceof Error
+          ? cause.message
+          : PROJECT_WORKSPACE_COPY.contractConflict
+      )
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  const upload = async (file: File) => {
+    if (!project || archived) return
+    setUploading(true)
+    setError(null)
+    try {
+      await uploadProjectFile(file, { onAttachmentCreated: onAddProjectFile })
+      await onRefresh()
+    } catch (cause) {
+      setError(cause instanceof Error ? cause.message : "文件上传失败")
+      await onRefresh().catch(() => {})
+    } finally {
+      setUploading(false)
+      if (fileInputRef.current) fileInputRef.current.value = ""
+    }
+  }
+
+  const remove = async (file: ProjectFileDTO) => {
+    if (!project || archived) return
+    const confirmed = window.confirm(
+      `从 Project 中移除「${file.filename}」？历史消息中的附件不会被删除。`
+    )
+    if (!confirmed) return
+    setError(null)
+    try {
+      await onRemoveProjectFile(file.attachmentId)
+    } catch (cause) {
+      setError(cause instanceof Error ? cause.message : "移除文件失败")
+    }
+  }
+
+  const selectSection = (next: ProjectDrawerSection) => {
+    setSection(next)
+    requestAnimationFrame(() => {
+      ;(next === "overview" ? overviewTabRef : filesTabRef).current?.focus()
+    })
+  }
+
+  const onTabKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {
+    if (event.key === "Home") {
+      event.preventDefault()
+      selectSection("overview")
+      return
+    }
+    if (event.key === "End") {
+      event.preventDefault()
+      selectSection("files")
+      return
+    }
+    if (event.key !== "ArrowLeft" && event.key !== "ArrowRight") return
+    event.preventDefault()
+    selectSection(section === "overview" ? "files" : "overview")
+  }
+
+  return (
+    <LayeredDrawer
+      open={open}
+      zIndex={zIndex}
+      side="right"
+      topLayer={topLayer}
+      narrow={narrow}
+      container={container}
+      initialWidth={WORKSPACE_DRAWER.projectWidth}
+      className="project-drawer"
+      onActivate={onActivate}
+      onClose={onClose}
+    >
+      <div
+        className="project-drawer-shell"
+        role="dialog"
+        aria-modal={false}
+        aria-labelledby={titleId}
+        onKeyDownCapture={(event) => {
+          if (
+            editing &&
+            event.key === "Escape" &&
+            !event.nativeEvent.isComposing &&
+            !event.repeat
+          ) {
+            event.preventDefault()
+            event.stopPropagation()
+            cancelEdit()
+          }
+        }}
+      >
+        <div className="art-head project-panel-head">
+          <FolderKanban size={16} />
+          <h3 id={titleId}>
+            Project
+            {project && (
+              <span className="project-version">
+                v{project.contractVersion}
+              </span>
+            )}
+          </h3>
+          {archived && <span className="project-readonly">只读</span>}
+          <button
+            type="button"
+            className="art-x"
+            title="收起 Project"
+            aria-label="收起 Project"
+            data-layered-drawer-close
+            onClick={onClose}
+          >
+            <X size={13} />
+          </button>
+        </div>
+
+        <div
+          className="project-sections"
+          role="tablist"
+          aria-label="Project workspace"
+        >
+          <button
+            ref={overviewTabRef}
+            id={overviewTabId}
+            type="button"
+            role="tab"
+            className={section === "overview" ? "on" : ""}
+            aria-selected={section === "overview"}
+            aria-controls={overviewPanelId}
+            tabIndex={section === "overview" ? 0 : -1}
+            onClick={() => setSection("overview")}
+            onKeyDown={onTabKeyDown}
+          >
+            Overview
+          </button>
+          <button
+            ref={filesTabRef}
+            id={filesTabId}
+            type="button"
+            role="tab"
+            className={section === "files" ? "on" : ""}
+            aria-selected={section === "files"}
+            aria-controls={filesPanelId}
+            tabIndex={section === "files" ? 0 : -1}
+            onClick={() => setSection("files")}
+            onKeyDown={onTabKeyDown}
+          >
+            Files <span>{files.length}</span>
+          </button>
+        </div>
+
+        {error && <div className="project-error">{error}</div>}
+        {archived && (
+          <div className="project-readonly-banner">
+            {PROJECT_WORKSPACE_COPY.archivedReadOnly}
+          </div>
+        )}
+
+        <div className="art-body project-panel-body">
+          <section
+            id={overviewPanelId}
+            role="tabpanel"
+            aria-labelledby={overviewTabId}
+            hidden={section !== "overview"}
+            className="project-overview"
+          >
+            {!project ? (
+              emptyProjectState
+            ) : (
+              <>
+                <div className="project-section-heading">
+                  <div>
+                    <div className="project-eyebrow">PROJECT CONTRACT</div>
+                    <h4>目标与长期指令</h4>
+                    <p>
+                      保存后只影响之后启动的生成，不改写历史消息、Artifact 或
+                      Fork Context。
+                    </p>
+                  </div>
+                  {!archived && !editing && project && (
+                    <button className="project-secondary" onClick={beginEdit}>
+                      <Pencil size={12} /> 编辑
+                    </button>
+                  )}
+                </div>
+
+                <label className="project-field">
+                  <span>Target</span>
+                  {editing ? (
+                    <textarea
+                      value={targetDraft}
+                      maxLength={PROJECT_TARGET_MAX_CHARS}
+                      onChange={(event) => setTargetDraft(event.target.value)}
+                      placeholder="这个 Project 最终希望达成什么？"
+                      rows={5}
+                    />
+                  ) : (
+                    <div className="project-read-value">
+                      {project?.target || "尚未设置 Target。"}
+                    </div>
+                  )}
+                  {editing && (
+                    <small>
+                      {targetDraft.length}/{PROJECT_TARGET_MAX_CHARS}
+                    </small>
+                  )}
+                </label>
+
+                <label className="project-field">
+                  <span>Instructions</span>
+                  {editing ? (
+                    <textarea
+                      value={instructionsDraft}
+                      maxLength={PROJECT_INSTRUCTIONS_MAX_CHARS}
+                      onChange={(event) =>
+                        setInstructionsDraft(event.target.value)
+                      }
+                      placeholder="模型在这个 Project 中应持续遵循哪些工作方式、约束和偏好？"
+                      rows={10}
+                    />
+                  ) : (
+                    <div className="project-read-value project-instructions-value">
+                      {project?.instructions || "尚未设置 Instructions。"}
+                    </div>
+                  )}
+                  {editing && (
+                    <small>
+                      {instructionsDraft.length}/
+                      {PROJECT_INSTRUCTIONS_MAX_CHARS}
+                    </small>
+                  )}
+                </label>
+
+                {editing && (
+                  <div className="project-actions">
+                    <button
+                      className="project-secondary"
+                      disabled={saving}
+                      onClick={cancelEdit}
+                    >
+                      取消
+                    </button>
+                    <button
+                      className="project-primary"
+                      disabled={saving}
+                      onClick={() => void saveContract()}
+                    >
+                      {saving ? "保存中…" : "保存 Contract"}
+                    </button>
+                  </div>
+                )}
+              </>
+            )}
+          </section>
+
+          <section
+            id={filesPanelId}
+            role="tabpanel"
+            aria-labelledby={filesTabId}
+            hidden={section !== "files"}
+            className="project-files"
+          >
+            {!project ? (
+              emptyProjectState
+            ) : (
+              <>
+                <div className="project-section-heading">
+                  <div>
+                    <div className="project-eyebrow">PROJECT FILES</div>
+                    <h4>跨 Thread 可用的原始资料</h4>
+                    <p>
+                      Ready 文件会在统一预算内参与未来生成；移除只解除 Project
+                      成员关系。
+                    </p>
+                  </div>
+                  {!archived && project && (
+                    <>
+                      <input
+                        ref={fileInputRef}
+                        className="project-file-input"
+                        type="file"
+                        accept={ATTACHMENT_ACCEPT}
+                        onChange={(event) => {
+                          const file = event.currentTarget.files?.[0]
+                          if (file) void upload(file)
+                        }}
+                      />
+                      <button
+                        className="project-primary"
+                        disabled={uploading}
+                        onClick={() => fileInputRef.current?.click()}
+                      >
+                        <Upload size={12} />{" "}
+                        {uploading ? "上传中…" : "上传文件"}
+                      </button>
+                    </>
+                  )}
+                </div>
+
+                {sortedFiles.length === 0 ? (
+                  <div className="project-empty">
+                    <Paperclip size={18} />
+                    <strong>还没有 Project File</strong>
+                    <span>
+                      上传资料后，同一 Project 的所有 Thread
+                      都可以在后续生成中使用它。
+                    </span>
+                  </div>
+                ) : (
+                  <div className="project-resource-list">
+                    {sortedFiles.map((file) => (
+                      <article
+                        className="project-resource-card"
+                        key={file.attachmentId}
+                      >
+                        <div className="project-resource-icon">
+                          <Paperclip size={15} />
+                        </div>
+                        <div className="project-resource-main">
+                          <div className="project-resource-title-row">
+                            <strong title={file.filename}>
+                              {file.filename}
+                            </strong>
+                            <span className={`project-status ${file.status}`}>
+                              {fileStatusLabel(file)}
+                            </span>
+                          </div>
+                          <div className="project-resource-meta">
+                            {file.mimeType} · {formatBytes(file.size)}
+                            {file.pageCount ? ` · ${file.pageCount} 页` : ""}
+                            {` · 加入于 ${formatDate(file.addedAt)}`}
+                          </div>
+                          {file.summary && <p>{file.summary}</p>}
+                          {file.error && (
+                            <p className="project-file-error">{file.error}</p>
+                          )}
+                        </div>
+                        <div className="project-resource-actions">
+                          <a
+                            className="project-icon-button"
+                            href={file.url}
+                            target="_blank"
+                            rel="noreferrer"
+                            title="打开文件"
+                            aria-label={`打开文件：${file.filename}`}
+                          >
+                            <ExternalLink size={13} />
+                          </a>
+                          {!archived && (
+                            <button
+                              className="project-icon-button danger"
+                              title="从 Project 移除"
+                              aria-label={`从 Project 移除：${file.filename}`}
+                              onClick={() => void remove(file)}
+                            >
+                              <Trash2 size={13} />
+                            </button>
+                          )}
+                        </div>
+                      </article>
+                    ))}
+                  </div>
+                )}
+              </>
+            )}
+          </section>
+        </div>
+      </div>
+    </LayeredDrawer>
+  )
+}
diff --git a/app/thread-chat/orchestration/artifacts/project-panel.tsx b/app/thread-chat/orchestration/artifacts/project-panel.tsx
deleted file mode 100644
index 43b692a1..00000000
--- a/app/thread-chat/orchestration/artifacts/project-panel.tsx
+++ /dev/null
@@ -1,613 +0,0 @@
-"use client"
-
-import React, { useEffect, useId, useMemo, useRef, useState } from "react"
-import {
-  Check,
-  Copy,
-  ExternalLink,
-  FileText,
-  FolderKanban,
-  LocateFixed,
-  Paperclip,
-  Pencil,
-  Search,
-  Trash2,
-  Upload,
-  X,
-} from "lucide-react"
-import { ATTACHMENT_ACCEPT } from "@/constants/attachment"
-import {
-  PROJECT_INSTRUCTIONS_MAX_CHARS,
-  PROJECT_TARGET_MAX_CHARS,
-  PROJECT_WORKSPACE_COPY,
-} from "@/constants/project-workspace"
-import type {
-  ArtifactDTO,
-  ProjectDTO,
-  ProjectFileDTO,
-} from "@/lib/thread-chat/contracts/dto"
-import { MarkdownBody } from "../../chat/message/markdown-body"
-import { useCopyMarkdown } from "../../chat/actions/use-copy-markdown"
-import { uploadProjectFile } from "../../net/project-file-upload"
-
-export interface ProjectPanelProps {
-  project: ProjectDTO | null
-  files: ProjectFileDTO[]
-  artifacts: ArtifactDTO[]
-  open: boolean
-  activeId: string | null
-  onClose(): void
-  onSelect(id: string): void
-  onLocate(threadId: string, sourceMessageId: string): void
-  onRefresh(): Promise<void>
-  onSaveContract(target: string, instructions: string): Promise<void>
-  onAddProjectFile(attachmentId: string): Promise<void>
-  onRemoveProjectFile(attachmentId: string): Promise<void>
-}
-
-type ProjectPanelSection = "overview" | "files" | "artifacts"
-
-function formatBytes(size: number) {
-  if (size < 1024) return `${size} B`
-  if (size < 1024 * 1024) return `${(size / 1024).toFixed(1)} KB`
-  return `${(size / (1024 * 1024)).toFixed(1)} MB`
-}
-
-function formatDate(value: string) {
-  return new Intl.DateTimeFormat("zh-CN", {
-    month: "short",
-    day: "numeric",
-    hour: "2-digit",
-    minute: "2-digit",
-  }).format(new Date(value))
-}
-
-function sourceStatusLabel(status: ArtifactDTO["sourceMessageStatus"]) {
-  if (status === "completed") return "已完成"
-  if (status === "stopped") return "已停止"
-  if (status === "failed") return "失败"
-  return "生成中"
-}
-
-function artifactKindLabel(kind: ArtifactDTO["kind"]) {
-  if (kind === "markdown") return "Markdown"
-  if (kind === "code") return "Code"
-  return "Note"
-}
-
-function fileStatusLabel(file: ProjectFileDTO) {
-  if (file.status === "ready") return "可用"
-  if (file.status === "failed") return "失败"
-  return "处理中"
-}
-
-export function ProjectPanel({
-  project,
-  files,
-  artifacts,
-  open,
-  activeId,
-  onClose,
-  onSelect,
-  onLocate,
-  onRefresh,
-  onSaveContract,
-  onAddProjectFile,
-  onRemoveProjectFile,
-}: ProjectPanelProps) {
-  const titleId = useId()
-  const fileInputRef = useRef<HTMLInputElement | null>(null)
-  const closeButtonRef = useRef<HTMLButtonElement | null>(null)
-  const returnFocusRef = useRef<HTMLElement | null>(null)
-  const wasOpenRef = useRef(false)
-  const [section, setSection] = useState<ProjectPanelSection>("overview")
-  const [editing, setEditing] = useState(false)
-  const [targetDraft, setTargetDraft] = useState("")
-  const [instructionsDraft, setInstructionsDraft] = useState("")
-  const [saving, setSaving] = useState(false)
-  const [uploading, setUploading] = useState(false)
-  const [error, setError] = useState<string | null>(null)
-  const [artifactQuery, setArtifactQuery] = useState("")
-  const { copied, copy } = useCopyMarkdown(setError)
-  const archived = Boolean(project?.archivedAt)
-  const loading = open && !project
-  const displayedSection: ProjectPanelSection = activeId ? "artifacts" : section
-
-  useEffect(() => {
-    if (!open) return
-    let cancelled = false
-    void onRefresh()
-      .then(() => {
-        if (!cancelled) setError(null)
-      })
-      .catch((cause) => {
-        if (!cancelled) {
-          setError(cause instanceof Error ? cause.message : "Project 加载失败")
-        }
-      })
-    return () => {
-      cancelled = true
-    }
-  }, [onRefresh, open])
-
-  useEffect(() => {
-    if (open) {
-      if (!wasOpenRef.current) {
-        returnFocusRef.current =
-          document.activeElement instanceof HTMLElement
-            ? document.activeElement
-            : null
-      }
-      wasOpenRef.current = true
-      const frame = requestAnimationFrame(() => closeButtonRef.current?.focus())
-      return () => cancelAnimationFrame(frame)
-    }
-    if (wasOpenRef.current) {
-      wasOpenRef.current = false
-      returnFocusRef.current?.focus()
-      returnFocusRef.current = null
-    }
-  }, [open])
-
-  const selectedArtifact = useMemo(
-    () => artifacts.find((artifact) => artifact.id === activeId) ?? null,
-    [activeId, artifacts]
-  )
-  const sortedArtifacts = useMemo(
-    () =>
-      [...artifacts]
-        .sort((left, right) => right.createdAt.localeCompare(left.createdAt))
-        .filter((artifact) => {
-          const query = artifactQuery.trim().toLowerCase()
-          if (!query) return true
-          return [artifact.title, artifact.kind, artifact.sourceThreadTitle ?? ""]
-            .join(" ")
-            .toLowerCase()
-            .includes(query)
-        }),
-    [artifactQuery, artifacts]
-  )
-  const sortedFiles = useMemo(
-    () => [...files].sort((left, right) => right.addedAt.localeCompare(left.addedAt)),
-    [files]
-  )
-
-  const selectSection = (next: ProjectPanelSection) => {
-    if (next !== "artifacts" && activeId) onSelect("")
-    setSection(next)
-  }
-
-  const beginEdit = () => {
-    if (!project) return
-    setTargetDraft(project.target ?? "")
-    setInstructionsDraft(project.instructions ?? "")
-    setError(null)
-    setEditing(true)
-  }
-
-  const cancelEdit = () => {
-    setTargetDraft(project?.target ?? "")
-    setInstructionsDraft(project?.instructions ?? "")
-    setError(null)
-    setEditing(false)
-  }
-
-  const saveContract = async () => {
-    if (!project || archived) return
-    setSaving(true)
-    setError(null)
-    try {
-      await onSaveContract(targetDraft, instructionsDraft)
-      setEditing(false)
-    } catch (cause) {
-      setError(
-        cause instanceof Error
-          ? cause.message
-          : PROJECT_WORKSPACE_COPY.contractConflict
-      )
-    } finally {
-      setSaving(false)
-    }
-  }
-
-  const upload = async (file: File) => {
-    if (!project || archived) return
-    setUploading(true)
-    setError(null)
-    try {
-      await uploadProjectFile(file, {
-        onAttachmentCreated: onAddProjectFile,
-      })
-      await onRefresh()
-    } catch (cause) {
-      setError(cause instanceof Error ? cause.message : "文件上传失败")
-      await onRefresh().catch(() => {})
-    } finally {
-      setUploading(false)
-      if (fileInputRef.current) fileInputRef.current.value = ""
-    }
-  }
-
-  const remove = async (file: ProjectFileDTO) => {
-    if (!project || archived) return
-    const confirmed = window.confirm(
-      `从 Project 中移除「${file.filename}」？历史消息中的附件不会被删除。`
-    )
-    if (!confirmed) return
-    setError(null)
-    try {
-      await onRemoveProjectFile(file.attachmentId)
-    } catch (cause) {
-      setError(cause instanceof Error ? cause.message : "移除文件失败")
-    }
-  }
-
-  const locateArtifact = (artifact: ArtifactDTO) => {
-    const viewThreadId =
-      project?.rootThreadId === artifact.threadId ? "main" : artifact.threadId
-    onLocate(viewThreadId, artifact.sourceMessageId)
-  }
-
-  return (
-    <div
-      className={`art-drawer project-panel ${open ? "open" : ""}`}
-      role="dialog"
-      aria-modal={false}
-      aria-labelledby={titleId}
-      aria-hidden={!open}
-      inert={!open}
-    >
-      <div className="art-head project-panel-head">
-        <FolderKanban size={16} />
-        <h3 id={titleId}>
-          Project
-          {project && (
-            <span className="project-version">v{project.contractVersion}</span>
-          )}
-        </h3>
-        {archived && <span className="project-readonly">只读</span>}
-        <button
-          ref={closeButtonRef}
-          type="button"
-          className="art-x"
-          title="收起 Project Panel"
-          onClick={onClose}
-        >
-          <X size={13} />
-        </button>
-      </div>
-
-      <div className="project-sections" role="tablist" aria-label="Project workspace">
-        <button
-          className={displayedSection === "overview" ? "on" : ""}
-          onClick={() => selectSection("overview")}
-        >
-          Overview
-        </button>
-        <button
-          className={displayedSection === "files" ? "on" : ""}
-          onClick={() => selectSection("files")}
-        >
-          Files <span>{files.length}</span>
-        </button>
-        <button
-          className={displayedSection === "artifacts" ? "on" : ""}
-          onClick={() => selectSection("artifacts")}
-        >
-          Artifacts <span>{artifacts.length}</span>
-        </button>
-      </div>
-
-      {error && <div className="project-error">{error}</div>}
-      {archived && (
-        <div className="project-readonly-banner">
-          {PROJECT_WORKSPACE_COPY.archivedReadOnly}
-        </div>
-      )}
-
-      <div className="art-body project-panel-body">
-        {loading ? <div className="project-empty">Project 加载中…</div> : null}
-
-        {displayedSection === "overview" && !loading && (
-          <section className="project-overview">
-            <div className="project-section-heading">
-              <div>
-                <div className="project-eyebrow">PROJECT CONTRACT</div>
-                <h4>目标与长期指令</h4>
-                <p>保存后只影响之后启动的生成，不改写历史消息、Artifact 或 Fork Context。</p>
-              </div>
-              {!archived && !editing && project && (
-                <button className="project-secondary" onClick={beginEdit}>
-                  <Pencil size={12} /> 编辑
-                </button>
-              )}
-            </div>
-
-            <label className="project-field">
-              <span>Target</span>
-              {editing ? (
-                <textarea
-                  value={targetDraft}
-                  maxLength={PROJECT_TARGET_MAX_CHARS}
-                  onChange={(event) => setTargetDraft(event.target.value)}
-                  placeholder="这个 Project 最终希望达成什么？"
-                  rows={5}
-                />
-              ) : (
-                <div className="project-read-value">
-                  {project?.target || "尚未设置 Target。"}
-                </div>
-              )}
-              {editing && (
-                <small>
-                  {targetDraft.length}/{PROJECT_TARGET_MAX_CHARS}
-                </small>
-              )}
-            </label>
-
-            <label className="project-field">
-              <span>Instructions</span>
-              {editing ? (
-                <textarea
-                  value={instructionsDraft}
-                  maxLength={PROJECT_INSTRUCTIONS_MAX_CHARS}
-                  onChange={(event) => setInstructionsDraft(event.target.value)}
-                  placeholder="模型在这个 Project 中应持续遵循哪些工作方式、约束和偏好？"
-                  rows={10}
-                />
-              ) : (
-                <div className="project-read-value project-instructions-value">
-                  {project?.instructions || "尚未设置 Instructions。"}
-                </div>
-              )}
-              {editing && (
-                <small>
-                  {instructionsDraft.length}/{PROJECT_INSTRUCTIONS_MAX_CHARS}
-                </small>
-              )}
-            </label>
-
-            {editing && (
-              <div className="project-actions">
-                <button
-                  className="project-secondary"
-                  disabled={saving}
-                  onClick={cancelEdit}
-                >
-                  取消
-                </button>
-                <button
-                  className="project-primary"
-                  disabled={saving}
-                  onClick={() => void saveContract()}
-                >
-                  {saving ? "保存中…" : "保存 Contract"}
-                </button>
-              </div>
-            )}
-          </section>
-        )}
-
-        {displayedSection === "files" && (
-          <section className="project-files">
-            <div className="project-section-heading">
-              <div>
-                <div className="project-eyebrow">PROJECT FILES</div>
-                <h4>跨 Thread 可用的原始资料</h4>
-                <p>Ready 文件会在统一预算内参与未来生成；移除只解除 Project 成员关系。</p>
-              </div>
-              {!archived && project && (
-                <>
-                  <input
-                    ref={fileInputRef}
-                    className="project-file-input"
-                    type="file"
-                    accept={ATTACHMENT_ACCEPT}
-                    onChange={(event) => {
-                      const file = event.currentTarget.files?.[0]
-                      if (file) void upload(file)
-                    }}
-                  />
-                  <button
-                    className="project-primary"
-                    disabled={uploading}
-                    onClick={() => fileInputRef.current?.click()}
-                  >
-                    <Upload size={12} /> {uploading ? "上传中…" : "上传文件"}
-                  </button>
-                </>
-              )}
-            </div>
-
-            {sortedFiles.length === 0 ? (
-              <div className="project-empty">
-                <Paperclip size={18} />
-                <strong>还没有 Project File</strong>
-                <span>上传资料后，同一 Project 的所有 Thread 都可以在后续生成中使用它。</span>
-              </div>
-            ) : (
-              <div className="project-resource-list">
-                {sortedFiles.map((file) => (
-                  <article
-                    className="project-resource-card"
-                    key={file.attachmentId}
-                  >
-                    <div className="project-resource-icon">
-                      <Paperclip size={15} />
-                    </div>
-                    <div className="project-resource-main">
-                      <div className="project-resource-title-row">
-                        <strong title={file.filename}>{file.filename}</strong>
-                        <span className={`project-status ${file.status}`}>
-                          {fileStatusLabel(file)}
-                        </span>
-                      </div>
-                      <div className="project-resource-meta">
-                        {file.mimeType} · {formatBytes(file.size)}
-                        {file.pageCount ? ` · ${file.pageCount} 页` : ""}
-                        {` · 加入于 ${formatDate(file.addedAt)}`}
-                      </div>
-                      {file.summary && <p>{file.summary}</p>}
-                      {file.error && (
-                        <p className="project-file-error">{file.error}</p>
-                      )}
-                    </div>
-                    <div className="project-resource-actions">
-                      <a
-                        className="project-icon-button"
-                        href={file.url}
-                        target="_blank"
-                        rel="noreferrer"
-                        title="打开文件"
-                      >
-                        <ExternalLink size={13} />
-                      </a>
-                      {!archived && (
-                        <button
-                          className="project-icon-button danger"
-                          title="从 Project 移除"
-                          onClick={() => void remove(file)}
-                        >
-                          <Trash2 size={13} />
-                        </button>
-                      )}
-                    </div>
-                  </article>
-                ))}
-              </div>
-            )}
-          </section>
-        )}
-
-        {displayedSection === "artifacts" && (
-          <section className="project-artifacts">
-            {selectedArtifact ? (
-              <div className="project-artifact-detail">
-                <button className="project-back" onClick={() => onSelect("")}>
-                  ← 全部 Artifacts
-                </button>
-                <div className="project-section-heading artifact-detail-heading">
-                  <div>
-                    <div className="project-eyebrow">
-                      {artifactKindLabel(selectedArtifact.kind)}
-                    </div>
-                    <h4>{selectedArtifact.title}</h4>
-                    <p>
-                      来源：{selectedArtifact.sourceThreadTitle ?? "未命名 Thread"}
-                      {selectedArtifact.sourceThreadFootnote !== null
-                        ? ` · 脚注 ${selectedArtifact.sourceThreadFootnote}`
-                        : ""}
-                      {` · ${sourceStatusLabel(selectedArtifact.sourceMessageStatus)}`}
-                      {` · ${formatDate(selectedArtifact.createdAt)}`}
-                    </p>
-                  </div>
-                  <div className="project-actions">
-                    {selectedArtifact.kind === "markdown" && (
-                      <button
-                        type="button"
-                        className="project-secondary"
-                        title={
-                          copied
-                            ? "Markdown raw 内容已复制"
-                            : "复制 Markdown raw 内容"
-                        }
-                        onClick={() => void copy(selectedArtifact.content)}
-                      >
-                        {copied ? <Check size={12} /> : <Copy size={12} />}
-                        <span aria-live="polite">
-                          {copied ? "已复制" : "复制"}
-                        </span>
-                      </button>
-                    )}
-                    <button
-                      className="project-secondary"
-                      onClick={() => locateArtifact(selectedArtifact)}
-                    >
-                      <LocateFixed size={12} /> 定位来源
-                    </button>
-                  </div>
-                </div>
-                <div className="project-artifact-content">
-                  {selectedArtifact.kind === "markdown" && (
-                    <MarkdownBody source={selectedArtifact.content} />
-                  )}
-                  {selectedArtifact.kind === "code" && (
-                    <pre className="art-code">{selectedArtifact.content}</pre>
-                  )}
-                  {selectedArtifact.kind === "note" && (
-                    <div className="art-note">
-                      {selectedArtifact.content
-                        .split("\n\n")
-                        .map((paragraph, index) => (
-                          <p key={index}>{paragraph}</p>
-                        ))}
-                    </div>
-                  )}
-                </div>
-              </div>
-            ) : (
-              <>
-                <div className="project-section-heading">
-                  <div>
-                    <div className="project-eyebrow">PROJECT ARTIFACTS</div>
-                    <h4>整个 Project 的持久化成果</h4>
-                    <p>
-                      包含根 Thread 和所有 Fork 产生的 Artifact；仅发现与查看，不会自动注入无关 Thread。
-                    </p>
-                  </div>
-                </div>
-                <label className="project-search">
-                  <Search size={13} />
-                  <input
-                    value={artifactQuery}
-                    onChange={(event) => setArtifactQuery(event.target.value)}
-                    placeholder="搜索标题、类型或来源 Thread"
-                  />
-                </label>
-                {sortedArtifacts.length === 0 ? (
-                  <div className="project-empty">
-                    <FileText size={18} />
-                    <strong>还没有 Artifact</strong>
-                    <span>
-                      在任意 Thread 中生成 Markdown、Code 或 Note 后会出现在这里。
-                    </span>
-                  </div>
-                ) : (
-                  <div className="project-resource-list">
-                    {sortedArtifacts.map((artifact) => (
-                      <button
-                        key={artifact.id}
-                        className="project-resource-card project-artifact-row"
-                        onClick={() => onSelect(artifact.id)}
-                      >
-                        <div className="project-resource-icon">
-                          <FileText size={15} />
-                        </div>
-                        <div className="project-resource-main">
-                          <div className="project-resource-title-row">
-                            <strong>{artifact.title}</strong>
-                            <span className="project-kind">
-                              {artifactKindLabel(artifact.kind)}
-                            </span>
-                          </div>
-                          <div className="project-resource-meta">
-                            {artifact.sourceThreadTitle ?? "未命名 Thread"}
-                            {artifact.sourceThreadFootnote !== null
-                              ? ` · 脚注 ${artifact.sourceThreadFootnote}`
-                              : ""}
-                            {` · ${sourceStatusLabel(artifact.sourceMessageStatus)}`}
-                            {` · ${formatDate(artifact.createdAt)}`}
-                          </div>
-                        </div>
-                      </button>
-                    ))}
-                  </div>
-                )}
-              </>
-            )}
-          </section>
-        )}
-      </div>
-    </div>
-  )
-}
diff --git a/app/thread-chat/orchestration/artifacts/store-bound-artifacts-drawer.tsx b/app/thread-chat/orchestration/artifacts/store-bound-artifacts-drawer.tsx
new file mode 100644
index 00000000..b0d2dbb0
--- /dev/null
+++ b/app/thread-chat/orchestration/artifacts/store-bound-artifacts-drawer.tsx
@@ -0,0 +1,106 @@
+"use client"
+
+import { useCallback, useMemo, type RefObject } from "react"
+import type { ConversationStore } from "../../core/store"
+import type { WorkspacePanelSizes, WorkspaceUiState } from "../../core/types"
+import { useConversationStore } from "../../core/use-thread-store"
+import type { DrawerSide } from "../overlays/workspace-overlay-logic"
+import { ArtifactsDrawer } from "./artifacts-drawer"
+
+function findMessageElement(messageId: string): HTMLElement | null {
+  return (
+    [...document.querySelectorAll<HTMLElement>("[data-thread-chat-message-id]")].find(
+      (element) => element.dataset.threadChatMessageId === messageId
+    ) ?? null
+  )
+}
+
+function revealMessage(messageId: string, attempt = 0) {
+  const element = findMessageElement(messageId)
+  if (!element) {
+    if (attempt < 8)
+      window.setTimeout(() => revealMessage(messageId, attempt + 1), 60)
+    return
+  }
+  element.scrollIntoView({ behavior: "smooth", block: "center" })
+  element.animate(
+    [
+      { backgroundColor: "transparent" },
+      { backgroundColor: "color-mix(in srgb, currentColor 8%, transparent)" },
+      { backgroundColor: "transparent" },
+    ],
+    { duration: 1600, easing: "ease-out" }
+  )
+}
+
+export function StoreBoundArtifactsDrawer({
+  store,
+  open,
+  activeId,
+  zIndex,
+  side,
+  topLayer,
+  narrow,
+  container,
+  panelSizes,
+  setWorkspace,
+  onActivate,
+  onClose,
+  onOpenChangeComplete,
+  onSelect,
+  onLocate,
+}: {
+  store: ConversationStore
+  open: boolean
+  activeId: string | null
+  zIndex: number
+  side: DrawerSide
+  topLayer: boolean
+  narrow: boolean
+  container?: HTMLElement | null | RefObject<HTMLElement | null>
+  panelSizes?: WorkspacePanelSizes
+  setWorkspace?(next: Partial<WorkspaceUiState>): void
+  onActivate(): void
+  onClose(): void
+  onOpenChangeComplete?(open: boolean): void
+  onSelect(id: string | null): void
+  onLocate(threadId: string, sourceMessageId: string): void
+}) {
+  const state = useConversationStore(store, (value) => value)
+  const artifacts = useMemo(
+    () =>
+      state.artifactOrder.flatMap((id) => {
+        const artifact = state.artifactsById[id]
+        return artifact ? [artifact] : []
+      }),
+    [state.artifactOrder, state.artifactsById]
+  )
+  const locate = useCallback(
+    (threadId: string, sourceMessageId: string) => {
+      onLocate(threadId, sourceMessageId)
+      revealMessage(sourceMessageId)
+    },
+    [onLocate]
+  )
+
+  return (
+    <ArtifactsDrawer
+      project={state.project}
+      artifacts={artifacts}
+      open={open}
+      activeId={activeId}
+      zIndex={zIndex}
+      side={side}
+      topLayer={topLayer}
+      narrow={narrow}
+      container={container}
+      panelSizes={panelSizes}
+      setWorkspace={setWorkspace}
+      onActivate={onActivate}
+      onClose={onClose}
+      onOpenChangeComplete={onOpenChangeComplete}
+      onSelect={onSelect}
+      onLocate={locate}
+    />
+  )
+}
diff --git a/app/thread-chat/orchestration/artifacts/store-bound-project-drawer.tsx b/app/thread-chat/orchestration/artifacts/store-bound-project-drawer.tsx
new file mode 100644
index 00000000..82d15b69
--- /dev/null
+++ b/app/thread-chat/orchestration/artifacts/store-bound-project-drawer.tsx
@@ -0,0 +1,92 @@
+"use client"
+
+import { useCallback, useMemo, type RefObject } from "react"
+import type { ConversationStore } from "../../core/store"
+import { useConversationStore } from "../../core/use-thread-store"
+import type { ThreadChatClient } from "../../net/client"
+import type { ConversationCommands } from "../../net/commands/conversation-commands"
+import { ProjectDrawer } from "./project-drawer"
+
+export function StoreBoundProjectDrawer({
+  projectId,
+  store,
+  client,
+  commands,
+  open,
+  zIndex,
+  topLayer,
+  narrow,
+  container,
+  onActivate,
+  onClose,
+  onRefresh,
+}: {
+  projectId: string
+  store: ConversationStore
+  client: ThreadChatClient
+  commands: ConversationCommands
+  open: boolean
+  zIndex: number
+  topLayer: boolean
+  narrow: boolean
+  container: HTMLElement | null | RefObject<HTMLElement | null>
+  onActivate(): void
+  onClose(): void
+  onRefresh?(): Promise<void>
+}) {
+  const state = useConversationStore(store, (value) => value)
+  const files = useMemo(
+    () =>
+      state.projectFileOrder.flatMap((id) => {
+        const file = state.projectFilesById[id]
+        return file ? [file] : []
+      }),
+    [state.projectFileOrder, state.projectFilesById]
+  )
+
+  const refresh = useCallback(async () => {
+    if (onRefresh) {
+      await onRefresh()
+      return
+    }
+    const bootstrap = await client.getProject(projectId)
+    store.getState().hydrateProject(bootstrap)
+  }, [client, onRefresh, projectId, store])
+
+  const saveContract = useCallback(
+    async (target: string, instructions: string) => {
+      await commands.updateProjectContract({ projectId, target, instructions })
+    },
+    [commands, projectId]
+  )
+  const addProjectFile = useCallback(
+    async (attachmentId: string) => {
+      await commands.addProjectFile(attachmentId)
+    },
+    [commands]
+  )
+  const removeProjectFile = useCallback(
+    async (attachmentId: string) => {
+      await commands.removeProjectFile(attachmentId)
+    },
+    [commands]
+  )
+
+  return (
+    <ProjectDrawer
+      project={state.project}
+      files={files}
+      open={open}
+      zIndex={zIndex}
+      topLayer={topLayer}
+      narrow={narrow}
+      container={container}
+      onActivate={onActivate}
+      onClose={onClose}
+      onRefresh={refresh}
+      onSaveContract={saveContract}
+      onAddProjectFile={addProjectFile}
+      onRemoveProjectFile={removeProjectFile}
+    />
+  )
+}
diff --git a/app/thread-chat/orchestration/artifacts/store-bound-project-panel.tsx b/app/thread-chat/orchestration/artifacts/store-bound-project-panel.tsx
deleted file mode 100644
index bcd3d291..00000000
--- a/app/thread-chat/orchestration/artifacts/store-bound-project-panel.tsx
+++ /dev/null
@@ -1,123 +0,0 @@
-"use client"
-
-import { useCallback, useMemo } from "react"
-import type { ConversationStore } from "../../core/store"
-import { useConversationStore } from "../../core/use-thread-store"
-import type { ThreadChatClient } from "../../net/client"
-import type { ConversationCommands } from "../../net/commands/conversation-commands"
-import { ProjectPanel } from "./project-panel"
-
-function findMessageElement(messageId: string): HTMLElement | null {
-  return [...document.querySelectorAll<HTMLElement>("[data-thread-chat-message-id]")].find(
-    (element) => element.dataset.threadChatMessageId === messageId
-  ) ?? null
-}
-
-function revealMessage(messageId: string, attempt = 0) {
-  const element = findMessageElement(messageId)
-  if (!element) {
-    if (attempt < 8) window.setTimeout(() => revealMessage(messageId, attempt + 1), 60)
-    return
-  }
-  element.scrollIntoView({ behavior: "smooth", block: "center" })
-  element.animate(
-    [
-      { backgroundColor: "transparent" },
-      { backgroundColor: "color-mix(in srgb, currentColor 8%, transparent)" },
-      { backgroundColor: "transparent" },
-    ],
-    { duration: 1600, easing: "ease-out" }
-  )
-}
-
-export function StoreBoundProjectPanel({
-  projectId,
-  store,
-  client,
-  commands,
-  open,
-  activeId,
-  onClose,
-  onSelect,
-  onLocate,
-}: {
-  projectId: string
-  store: ConversationStore
-  client: ThreadChatClient
-  commands: ConversationCommands
-  open: boolean
-  activeId: string | null
-  onClose(): void
-  onSelect(id: string): void
-  onLocate(threadId: string, sourceMessageId: string): void
-}) {
-  const state = useConversationStore(store, (value) => value)
-  const files = useMemo(
-    () =>
-      state.projectFileOrder.flatMap((id) => {
-        const file = state.projectFilesById[id]
-        return file ? [file] : []
-      }),
-    [state.projectFileOrder, state.projectFilesById]
-  )
-  const artifacts = useMemo(
-    () =>
-      state.artifactOrder.flatMap((id) => {
-        const artifact = state.artifactsById[id]
-        return artifact ? [artifact] : []
-      }),
-    [state.artifactOrder, state.artifactsById]
-  )
-
-  const refresh = useCallback(async () => {
-    const bootstrap = await client.getProject(projectId)
-    store.getState().hydrateProject(bootstrap)
-  }, [client, projectId, store])
-
-  const saveContract = useCallback(
-    async (target: string, instructions: string) => {
-      await commands.updateProjectContract({
-        projectId,
-        target,
-        instructions,
-      })
-    },
-    [commands, projectId]
-  )
-  const addProjectFile = useCallback(
-    async (attachmentId: string) => {
-      await commands.addProjectFile(attachmentId)
-    },
-    [commands]
-  )
-  const removeProjectFile = useCallback(
-    async (attachmentId: string) => {
-      await commands.removeProjectFile(attachmentId)
-    },
-    [commands]
-  )
-  const locate = useCallback(
-    (threadId: string, sourceMessageId: string) => {
-      onLocate(threadId, sourceMessageId)
-      revealMessage(sourceMessageId)
-    },
-    [onLocate]
-  )
-
-  return (
-    <ProjectPanel
-      project={state.project}
-      files={files}
-      artifacts={artifacts}
-      open={open}
-      activeId={activeId}
-      onClose={onClose}
-      onSelect={onSelect}
-      onLocate={locate}
-      onRefresh={refresh}
-      onSaveContract={saveContract}
-      onAddProjectFile={addProjectFile}
-      onRemoveProjectFile={removeProjectFile}
-    />
-  )
-}
diff --git a/app/thread-chat/orchestration/canvas/canvas-actions.ts b/app/thread-chat/orchestration/canvas/canvas-actions.ts
index bb07443c..c483acc4 100644
--- a/app/thread-chat/orchestration/canvas/canvas-actions.ts
+++ b/app/thread-chat/orchestration/canvas/canvas-actions.ts
@@ -4,6 +4,7 @@ import { createContext } from "react"
 import type { ThreadTreeState } from "../../core/types"
 import type { MessageActionViewState } from "../../chat/actions/message-action-types"
 import type { ThreadMessageActionCommands } from "../../chat/actions/message-action-commands"
+import type { OpenArtifact } from "../artifacts/artifact-open"
 
 /** 壳层用 chat-controller 组装后注入画布的会话动作。 */
 export interface CanvasChatActions extends ThreadMessageActionCommands {
@@ -15,7 +16,7 @@ export interface CanvasChatActions extends ThreadMessageActionCommands {
 /** 画布节点面板可用的完整组合能力。 */
 export interface CanvasActions extends CanvasChatActions {
   focusThread: (threadId: string) => void
-  openArtifact: (artifactId: string) => void
+  openArtifact: OpenArtifact
   getState: () => ThreadTreeState
   setThreadModel: (threadId: string, modelId: string) => void
   messageActionState: MessageActionViewState
diff --git a/app/thread-chat/orchestration/canvas/thread-canvas.tsx b/app/thread-chat/orchestration/canvas/thread-canvas.tsx
index 5a4c77ac..334228d2 100644
--- a/app/thread-chat/orchestration/canvas/thread-canvas.tsx
+++ b/app/thread-chat/orchestration/canvas/thread-canvas.tsx
@@ -46,6 +46,7 @@ import { CanvasCard, type CanvasCardNode } from "./canvas-node"
 import { CANVAS_EXPAND_WIDTH } from "./canvas-dimensions"
 import { useCanvasLayout, type CanvasViewState } from "./use-canvas-layout"
 import type { MessageActionViewState } from "../../chat/actions/message-action-types"
+import type { OpenArtifact } from "../artifacts/artifact-open"
 
 /** nodeTypes 稳定引用：模块级定义，避免 React Flow 整树重挂（skill 契约 #4） */
 const nodeTypes = { threadCard: CanvasCard }
@@ -73,7 +74,7 @@ export interface ThreadCanvasProps {
   /** 统一意图：双击节点 = 回列模式打开该会话（壳层 openBranchUI） */
   onOpenThread: (threadId: string) => void
   /** 打开全局 Markdown 面板并选中对应交付物。 */
-  onOpenArtifact: (artifactId: string) => void
+  onOpenArtifact: OpenArtifact
   /** 会话动作（send/abort/retry）：壳层用 chat-controller 组装（D3，同一发送链路） */
   chat: CanvasChatActions
   messageActionState: MessageActionViewState
diff --git a/app/thread-chat/orchestration/navigation/thread-chat-topbar.tsx b/app/thread-chat/orchestration/navigation/thread-chat-topbar.tsx
index b6624e89..66470a5e 100644
--- a/app/thread-chat/orchestration/navigation/thread-chat-topbar.tsx
+++ b/app/thread-chat/orchestration/navigation/thread-chat-topbar.tsx
@@ -3,6 +3,7 @@
 import {
   CircleHelp,
   Columns3,
+  FileText,
   FolderKanban,
   ListTodo,
   Network,
@@ -17,6 +18,26 @@ import { ShortcutHint } from "../overlays/shortcut-hint"
 import { COL_MIN_W } from "../columns/use-column-viewport"
 import { columnCountChoices } from "./thread-chat-topbar-logic"
 
+type ThreadChatTopbarProps = {
+  viewMode: ViewMode
+  showHelp: boolean
+  windowWidth: number | null
+  forceCols: number | null
+  placementMode: PlacementMode
+  branchCount: number
+  artifactCount: number
+  onNewConversation(openInNewPage: boolean): void
+  onToggleTreeList(): void
+  onOpenHelp(): void
+  onShowColumns(): void
+  onShowCanvas(): void
+  onForceCols(value: number | null): void
+  onPlacementModeChange(mode: PlacementMode): void
+  onToggleThreadTree(): void
+  onToggleProject(): void
+  onToggleArtifacts(): void
+}
+
 export function ThreadChatTopbar({
   viewMode,
   showHelp,
@@ -24,7 +45,7 @@ export function ThreadChatTopbar({
   forceCols,
   placementMode,
   branchCount,
-  markdownCount,
+  artifactCount,
   onNewConversation,
   onToggleTreeList,
   onOpenHelp,
@@ -33,26 +54,9 @@ export function ThreadChatTopbar({
   onForceCols,
   onPlacementModeChange,
   onToggleThreadTree,
-  onToggleMarkdown,
-}: {
-  viewMode: ViewMode
-  showHelp: boolean
-  windowWidth: number | null
-  forceCols: number | null
-  placementMode: PlacementMode
-  branchCount: number
-  /** Project 资源总数。保留旧 prop 名，避免对 Topbar 消费方制造无关 API churn。 */
-  markdownCount: number
-  onNewConversation(openInNewPage: boolean): void
-  onToggleTreeList(): void
-  onOpenHelp(): void
-  onShowColumns(): void
-  onShowCanvas(): void
-  onForceCols(value: number | null): void
-  onPlacementModeChange(mode: PlacementMode): void
-  onToggleThreadTree(): void
-  onToggleMarkdown(): void
-}) {
+  onToggleProject,
+  onToggleArtifacts,
+}: ThreadChatTopbarProps) {
   return (
     <div className="topbar">
       <button
@@ -164,13 +168,21 @@ export function ThreadChatTopbar({
         <ShortcutHint {...THREAD_CHAT_SHORTCUTS.openThreadTree} />
       </button>
       <button
-        className="tbtn"
-        title="打开 / 收起 Project Workspace"
-        onClick={onToggleMarkdown}
+        className="tbtn workspace-tool"
+        title="Project"
+        aria-label="打开 / 收起 Project"
+        onClick={onToggleProject}
+      >
+        <FolderKanban size={14} aria-hidden="true" />
+      </button>
+      <button
+        className="tbtn workspace-tool"
+        title="Artifacts"
+        aria-label="打开 / 收起 Artifacts"
+        onClick={onToggleArtifacts}
       >
-        <FolderKanban size={13} />
-        Project
-        <span className="cnt">{markdownCount}</span>
+        <FileText size={14} aria-hidden="true" />
+        <span className="cnt">{artifactCount}</span>
       </button>
       <AccountButton />
     </div>
diff --git a/app/thread-chat/orchestration/overlays/help-panel.tsx b/app/thread-chat/orchestration/overlays/help-panel.tsx
index 8d1b8c78..e63870c9 100644
--- a/app/thread-chat/orchestration/overlays/help-panel.tsx
+++ b/app/thread-chat/orchestration/overlays/help-panel.tsx
@@ -46,7 +46,7 @@ function UsageTips() {
       <section className="helpx-section">
         <h3 className="helpx-section-title">内容与视图</h3>
         <ul>
-          <li>对话里生成的 Markdown 会插入消息流，点击后在右侧面板预览</li>
+          <li>对话里生成的 Markdown 会插入消息流，点击后在 Artifacts 抽屉预览</li>
           <li>顶栏可切换画布视图纵览全树，单击节点就地对话，双击回到列模式</li>
           <li>对话自动保存，刷新或同链接重开可恢复；「新对话」另起一棵树</li>
         </ul>
diff --git a/app/thread-chat/orchestration/overlays/use-workspace-overlays.ts b/app/thread-chat/orchestration/overlays/use-workspace-overlays.ts
index 14a27824..9e128bec 100644
--- a/app/thread-chat/orchestration/overlays/use-workspace-overlays.ts
+++ b/app/thread-chat/orchestration/overlays/use-workspace-overlays.ts
@@ -1,11 +1,34 @@
 "use client"
 
-import { useCallback, useEffect, useRef, useState } from "react"
+import {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react"
 import { POPUP_EXIT_MS } from "@/constants/thread-chat"
+import {
+  WORKSPACE_DRAWER,
+  WORKSPACE_DRAWER_EXIT_MS,
+} from "@/constants/workspace-drawers"
 import type { SelectionInfo } from "../../branching/selection/selection-bubble"
 import type { SwitcherMode } from "../navigation/thread-switcher"
-import { escapeOverlayTarget, popupPosition } from "./workspace-overlay-logic"
 import { SWITCHER_DIMENSIONS } from "../navigation/switcher-dimensions"
+import type { OpenArtifactOptions } from "../artifacts/artifact-open"
+import {
+  closeLayer,
+  drawerSideForAnchor,
+  escapeOverlayTarget,
+  isNarrowDrawerViewport,
+  openLayer,
+  popupPosition,
+  topLayer,
+  type DrawerId,
+  type DrawerSide,
+  type TransientOverlayId,
+} from "./workspace-overlay-logic"
 
 type ClosingOverlay = { n: number; closing?: boolean }
 
@@ -17,8 +40,13 @@ export function useWorkspaceOverlays() {
   >(null)
   const [treeList, setTreeList] = useState<ClosingOverlay | null>(null)
   const [helpPanel, setHelpPanel] = useState<ClosingOverlay | null>(null)
-  const [drawerOpen, setDrawerOpen] = useState(false)
+  const [drawerStack, setDrawerStack] = useState<DrawerId[]>([])
+  const [closingDrawers, setClosingDrawers] = useState<
+    Partial<Record<DrawerId, boolean>>
+  >({})
+  const [artifactSide, setArtifactSide] = useState<DrawerSide>("right")
   const [activeArtifactId, setActiveArtifactId] = useState<string | null>(null)
+  const [narrowDrawers, setNarrowDrawers] = useState(false)
   const switcherSequenceRef = useRef(0)
   const treeListSequenceRef = useRef(0)
   const helpSequenceRef = useRef(0)
@@ -38,6 +66,11 @@ export function useWorkspaceOverlays() {
       current && !current.closing ? { ...current, closing: true } : current
     )
   }, [])
+  const closeTransientOverlays = useCallback(() => {
+    closeSwitcher()
+    closeTreeList()
+    closeHelpPanel()
+  }, [closeHelpPanel, closeSwitcher, closeTreeList])
 
   useEffect(() => {
     if (!switcher?.closing) return
@@ -54,8 +87,21 @@ export function useWorkspaceOverlays() {
     const timer = setTimeout(() => setHelpPanel(null), POPUP_EXIT_MS)
     return () => clearTimeout(timer)
   }, [helpPanel])
+  useEffect(() => {
+    const update = () =>
+      setNarrowDrawers(isNarrowDrawerViewport(window.innerWidth))
+    update()
+    window.addEventListener("resize", update)
+    return () => window.removeEventListener("resize", update)
+  }, [])
 
   const toggleGlobalSwitcher = useCallback(() => {
+    setTreeList((current) =>
+      current && !current.closing ? { ...current, closing: true } : current
+    )
+    setHelpPanel((current) =>
+      current && !current.closing ? { ...current, closing: true } : current
+    )
     setSwitcher((current) =>
       current?.kind === "global" && !current.closing
         ? { ...current, closing: true }
@@ -74,6 +120,7 @@ export function useWorkspaceOverlays() {
         viewportWidth: window.innerWidth,
         viewportHeight: window.innerHeight,
       })
+      closeTransientOverlays()
       setSwitcher({
         kind: "column",
         vpIndex: viewportIndex,
@@ -82,28 +129,38 @@ export function useWorkspaceOverlays() {
         n: ++switcherSequenceRef.current,
       })
     },
-    []
+    [closeTransientOverlays]
+  )
+  const openSubtree = useCallback(
+    (rootId: string, button: HTMLElement) => {
+      const rect = button.getBoundingClientRect()
+      const dimensions = SWITCHER_DIMENSIONS.subtree
+      const { x, y } = popupPosition({
+        right: rect.right,
+        bottom: rect.bottom,
+        panelWidth: dimensions.width,
+        panelHeight: dimensions.height,
+        viewportWidth: window.innerWidth,
+        viewportHeight: window.innerHeight,
+      })
+      closeTransientOverlays()
+      setSwitcher({
+        kind: "subtree",
+        rootId,
+        x,
+        y,
+        n: ++switcherSequenceRef.current,
+      })
+    },
+    [closeTransientOverlays]
   )
-  const openSubtree = useCallback((rootId: string, button: HTMLElement) => {
-    const rect = button.getBoundingClientRect()
-    const dimensions = SWITCHER_DIMENSIONS.subtree
-    const { x, y } = popupPosition({
-      right: rect.right,
-      bottom: rect.bottom,
-      panelWidth: dimensions.width,
-      panelHeight: dimensions.height,
-      viewportWidth: window.innerWidth,
-      viewportHeight: window.innerHeight,
-    })
-    setSwitcher({
-      kind: "subtree",
-      rootId,
-      x,
-      y,
-      n: ++switcherSequenceRef.current,
-    })
-  }, [])
   const toggleTreeList = useCallback(() => {
+    setSwitcher((current) =>
+      current && !current.closing ? { ...current, closing: true } : current
+    )
+    setHelpPanel((current) =>
+      current && !current.closing ? { ...current, closing: true } : current
+    )
     setTreeList((current) =>
       current && !current.closing
         ? { ...current, closing: true }
@@ -111,18 +168,118 @@ export function useWorkspaceOverlays() {
     )
   }, [])
   const openHelpPanel = useCallback(() => {
+    closeTransientOverlays()
     setHelpPanel({ n: ++helpSequenceRef.current })
+  }, [closeTransientOverlays])
+
+  const activateDrawer = useCallback((id: DrawerId) => {
+    setClosingDrawers((current) => ({ ...current, [id]: false }))
+    setDrawerStack((current) => openLayer(current, id))
   }, [])
-  const openArtifact = useCallback((artifactId: string) => {
-    setActiveArtifactId(artifactId)
-    setDrawerOpen(true)
-  }, [])
-  const toggleDrawer = useCallback(() => {
-    setDrawerOpen((open) => !open)
+  const openDrawer = useCallback(
+    (id: DrawerId) => {
+      if (narrowDrawers) {
+        const other: DrawerId = id === "project" ? "artifacts" : "project"
+        setClosingDrawers((current) => ({ ...current, [other]: true }))
+      }
+      activateDrawer(id)
+    },
+    [activateDrawer, narrowDrawers]
+  )
+  const closeDrawer = useCallback((id: DrawerId) => {
+    setClosingDrawers((current) => ({ ...current, [id]: true }))
   }, [])
-  const closeDrawer = useCallback(() => {
-    setDrawerOpen(false)
+  const toggleDrawer = useCallback(
+    (id: DrawerId) => {
+      setDrawerStack((current) => {
+        const activeStack = current.filter((item) => !closingDrawers[item])
+        if (current.includes(id) && !closingDrawers[id]) {
+          if (topLayer(activeStack) === id) {
+            setClosingDrawers((closing) => ({ ...closing, [id]: true }))
+            return current
+          }
+          return openLayer(current, id)
+        }
+        if (narrowDrawers) {
+          const other: DrawerId = id === "project" ? "artifacts" : "project"
+          setClosingDrawers((closing) => ({
+            ...closing,
+            [other]: true,
+            [id]: false,
+          }))
+        } else {
+          setClosingDrawers((closing) => ({ ...closing, [id]: false }))
+        }
+        return openLayer(current, id)
+      })
+    },
+    [closingDrawers, narrowDrawers]
+  )
+  const completeDrawerClose = useCallback((id: DrawerId) => {
+    setDrawerStack((current) => closeLayer(current, id))
+    setClosingDrawers((current) => ({ ...current, [id]: false }))
   }, [])
+  useEffect(() => {
+    const timers = (Object.keys(closingDrawers) as DrawerId[]).flatMap((id) =>
+      closingDrawers[id]
+        ? [
+            window.setTimeout(
+              () => completeDrawerClose(id),
+              WORKSPACE_DRAWER_EXIT_MS
+            ),
+          ]
+        : []
+    )
+    return () => timers.forEach(window.clearTimeout)
+  }, [closingDrawers, completeDrawerClose])
+
+  const openArtifact = useCallback(
+    (
+      artifactId: string,
+      options: OpenArtifactOptions,
+      drawerWidth?: number
+    ) => {
+      setActiveArtifactId(artifactId || null)
+      if (!drawerStack.includes("artifacts")) {
+        const side =
+          options.source === "pointer" && options.anchorRect
+            ? drawerSideForAnchor({
+                anchorLeft: options.anchorRect.left,
+                anchorRight: options.anchorRect.right,
+                viewportWidth: window.innerWidth,
+                drawerWidth:
+                  drawerWidth ??
+                  WORKSPACE_DRAWER.artifactDefaultWidth,
+              })
+            : "right"
+        setArtifactSide(side)
+      }
+      openDrawer("artifacts")
+    },
+    [drawerStack, openDrawer]
+  )
+
+  const transientStack = useMemo(() => {
+    const entries: Array<{ id: TransientOverlayId; n: number }> = []
+    if (helpPanel && !helpPanel.closing)
+      entries.push({ id: "help", n: helpPanel.n })
+    if (treeList && !treeList.closing)
+      entries.push({ id: "tree-list", n: treeList.n })
+    if (switcher && !switcher.closing)
+      entries.push({ id: "switcher", n: switcher.n })
+    if (selection) entries.push({ id: "selection", n: Number.MAX_SAFE_INTEGER })
+    return entries
+      .sort((left, right) => left.n - right.n)
+      .map((entry) => entry.id)
+  }, [helpPanel, selection, switcher, treeList])
+  const escapeStateRef = useRef({
+    transientStack,
+    drawerStack,
+    closingDrawers,
+  })
+  useLayoutEffect(() => {
+    escapeStateRef.current = { transientStack, drawerStack, closingDrawers }
+  }, [transientStack, drawerStack, closingDrawers])
 
   useEffect(() => {
     const onKey = (event: KeyboardEvent) => {
@@ -133,28 +290,26 @@ export function useWorkspaceOverlays() {
         return
       }
       if (event.key !== "Escape") return
-
+      const current = escapeStateRef.current
       const target = escapeOverlayTarget({
-        helpOpen: Boolean(helpPanel && !helpPanel.closing),
-        treeListOpen: Boolean(treeList && !treeList.closing),
-        selectionOpen: Boolean(selection),
-        switcherOpen: Boolean(switcher && !switcher.closing),
-        drawerOpen,
+        transientStack: current.transientStack,
+        drawerStack: current.drawerStack.filter(
+          (id) => !current.closingDrawers[id]
+        ),
+        isComposing: event.isComposing,
+        repeat: event.repeat,
       })
-      if (target === "help") closeHelpPanel()
-      else if (target === "tree-list") closeTreeList()
-      else if (target === "selection") setSelection(null)
-      else if (target === "switcher") closeSwitcher()
-      else if (target === "drawer") closeDrawer()
+      if (!target) return
+      if (target.kind === "transient") {
+        if (target.id === "help") closeHelpPanel()
+        else if (target.id === "tree-list") closeTreeList()
+        else if (target.id === "selection") setSelection(null)
+        else closeSwitcher()
+      } else if (target.kind === "drawer") closeDrawer(target.id)
     }
     document.addEventListener("keydown", onKey)
     return () => document.removeEventListener("keydown", onKey)
   }, [
-    selection,
-    switcher,
-    drawerOpen,
-    treeList,
-    helpPanel,
     toggleGlobalSwitcher,
     toggleTreeList,
     closeSwitcher,
@@ -178,11 +333,21 @@ export function useWorkspaceOverlays() {
     helpPanel,
     closeHelpPanel,
     openHelpPanel,
-    drawerOpen,
+    drawerStack,
+    closingDrawers,
+    narrowDrawers,
+    artifactSide,
     activeArtifactId,
     setActiveArtifactId,
     openArtifact,
-    toggleDrawer,
+    openDrawer,
     closeDrawer,
+    toggleDrawer,
+    activateDrawer,
+    completeDrawerClose,
+    drawerOpen: drawerStack.includes("artifacts") && !closingDrawers.artifacts,
+    toggleArtifactsDrawer: () => toggleDrawer("artifacts"),
+    closeArtifactsDrawer: () => closeDrawer("artifacts"),
+    topDrawer: topLayer(drawerStack.filter((id) => !closingDrawers[id])),
   }
 }
diff --git a/app/thread-chat/orchestration/overlays/workspace-overlay-logic.ts b/app/thread-chat/orchestration/overlays/workspace-overlay-logic.ts
index 8d2c3e0a..0bb4e51c 100644
--- a/app/thread-chat/orchestration/overlays/workspace-overlay-logic.ts
+++ b/app/thread-chat/orchestration/overlays/workspace-overlay-logic.ts
@@ -1,19 +1,85 @@
+import { WORKSPACE_DRAWER } from "@/constants/workspace-drawers"
+
+export type DrawerId = "project" | "artifacts"
+export type DrawerSide = "left" | "right"
+export type TransientOverlayId = "help" | "tree-list" | "switcher" | "selection"
 export type EscapeOverlayTarget =
-  "help" | "tree-list" | "selection" | "switcher" | "drawer" | null
+  | { kind: "internal" }
+  | { kind: "transient"; id: TransientOverlayId }
+  | { kind: "drawer"; id: DrawerId }
+  | null
+
+export function openLayer(stack: DrawerId[], id: DrawerId): DrawerId[] {
+  return [...stack.filter((item) => item !== id), id]
+}
+
+export function closeLayer(stack: DrawerId[], id: DrawerId): DrawerId[] {
+  return stack.filter((item) => item !== id)
+}
+
+export function topLayer(stack: DrawerId[]): DrawerId | null {
+  return stack.at(-1) ?? null
+}
+
+export function layerZIndex(index: number): number {
+  return WORKSPACE_DRAWER.baseZIndex + index * WORKSPACE_DRAWER.zIndexStep
+}
 
 export function escapeOverlayTarget(state: {
-  helpOpen: boolean
-  treeListOpen: boolean
-  selectionOpen: boolean
-  switcherOpen: boolean
-  drawerOpen: boolean
+  internalOpen?: boolean
+  transientStack: TransientOverlayId[]
+  drawerStack: DrawerId[]
+  isComposing?: boolean
+  repeat?: boolean
 }): EscapeOverlayTarget {
-  if (state.helpOpen) return "help"
-  if (state.treeListOpen) return "tree-list"
-  if (state.selectionOpen) return "selection"
-  if (state.switcherOpen) return "switcher"
-  if (state.drawerOpen) return "drawer"
-  return null
+  if (state.isComposing || state.repeat) return null
+  if (state.internalOpen) return { kind: "internal" }
+  const transient = state.transientStack.at(-1)
+  if (transient) return { kind: "transient", id: transient }
+  const drawer = topLayer(state.drawerStack)
+  return drawer ? { kind: "drawer", id: drawer } : null
+}
+
+export function isNarrowDrawerViewport(viewportWidth: number): boolean {
+  return viewportWidth < WORKSPACE_DRAWER.narrowBreakpoint
+}
+
+export function drawerWidthBounds(viewportWidth: number) {
+  return {
+    min: Math.min(WORKSPACE_DRAWER.artifactMinWidth, viewportWidth),
+    max: Math.max(
+      Math.min(WORKSPACE_DRAWER.artifactMinWidth, viewportWidth),
+      Math.floor(viewportWidth * WORKSPACE_DRAWER.artifactMaxViewportRatio)
+    ),
+  }
+}
+
+export function clampArtifactDrawerWidth(
+  width: number,
+  viewportWidth: number
+): number {
+  const { min, max } = drawerWidthBounds(viewportWidth)
+  return Math.min(max, Math.max(min, width))
+}
+
+export function drawerSideForAnchor({
+  anchorLeft,
+  anchorRight,
+  viewportWidth,
+  drawerWidth,
+}: {
+  anchorLeft: number
+  anchorRight: number
+  viewportWidth: number
+  drawerWidth: number
+}): DrawerSide {
+  const preferred: DrawerSide =
+    (anchorLeft + anchorRight) / 2 < viewportWidth / 2 ? "right" : "left"
+  const overlaps =
+    preferred === "right"
+      ? anchorRight > viewportWidth - drawerWidth
+      : anchorLeft < drawerWidth
+  return overlaps ? (preferred === "right" ? "left" : "right") : preferred
 }
 
 export function popupPosition({
diff --git a/app/thread-chat/styles/drawer.css b/app/thread-chat/styles/drawer.css
index 73dc04f2..df75949c 100644
--- a/app/thread-chat/styles/drawer.css
+++ b/app/thread-chat/styles/drawer.css
@@ -1,21 +1,58 @@
 /* ── @/thread-chat/styles ── Artifact / Project workspace drawer */
 
-.tc .art-drawer {
+.tc .layered-drawer-viewport {
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+}
+.tc .layered-drawer {
   position: fixed;
   top: 0;
-  right: 0;
   bottom: 0;
-  z-index: 65;
-  width: min(max(50vw, 420px), 92vw);
+  width: var(--layered-drawer-width);
+  display: flex;
   background: var(--paper);
-  border-left: 1px solid var(--rule-strong);
+  pointer-events: auto;
   box-shadow: -18px 0 44px -18px rgba(30, 26, 20, 0.35);
+  transition: transform 0.22s cubic-bezier(0.4, 0, 1, 1);
+}
+.tc .layered-drawer.right {
+  right: 0;
+  border-left: 1px solid var(--rule-strong);
   transform: translateX(103%);
-  transition: transform 0.34s cubic-bezier(0.32, 0.72, 0, 1);
-  display: flex;
-  flex-direction: column;
 }
-.tc .art-drawer.open { transform: translateX(0); }
+.tc .layered-drawer.left {
+  left: 0;
+  border-right: 1px solid var(--rule-strong);
+  box-shadow: 18px 0 44px -18px rgba(30, 26, 20, 0.35);
+  transform: translateX(-103%);
+}
+.tc .layered-drawer[data-open] {
+  transform: translateX(0);
+  transition-duration: 0.34s;
+  transition-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
+}
+.tc .layered-drawer.right[data-starting-style] {
+  transform: translateX(103%);
+}
+.tc .layered-drawer.left[data-starting-style] {
+  transform: translateX(-103%);
+}
+.tc .layered-drawer-content { min-width: 0; flex: 1; display: flex; flex-direction: column; container-type: inline-size; }
+.tc .layered-drawer-resizer {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 12px;
+  cursor: col-resize;
+  touch-action: none;
+  z-index: 1;
+}
+.tc .layered-drawer.right .layered-drawer-resizer { left: -6px; }
+.tc .layered-drawer.left .layered-drawer-resizer { right: -6px; }
+.tc .layered-drawer-resizer:focus-visible { outline: 2px solid var(--d1); outline-offset: -2px; }
+body.drawer-resizing { user-select: none; cursor: col-resize; }
+
 .tc .art-head {
   flex: none;
   display: flex;
@@ -50,42 +87,6 @@
   line-height: 1;
 }
 .tc .art-x:hover { color: var(--ink); border-color: var(--ink-faint); }
-.tc .art-tabs {
-  flex: none;
-  display: flex;
-  gap: 6px;
-  padding: 10px 12px;
-  border-bottom: 1px solid var(--rule);
-  overflow-x: auto;
-  background: #ffffff55;
-}
-.tc .art-tab {
-  display: inline-flex;
-  align-items: center;
-  gap: 7px;
-  border: 1px solid var(--rule-strong);
-  background: #fff;
-  border-radius: 8px;
-  padding: 6px 10px;
-  font-size: 12px;
-  cursor: pointer;
-  white-space: nowrap;
-  color: var(--ink-soft);
-  font-family: var(--font-ui);
-}
-.tc .art-tab .dot {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  flex: none;
-  background: var(--dc, #8a8377);
-}
-.tc .historical-artifact { margin-left: 4px; color: var(--ink-faint); font-size: 9px; }
-.tc .art-tab.on {
-  border-color: var(--dc, #8a8377);
-  color: var(--ink);
-  background: color-mix(in srgb, var(--dc, #8a8377) 8%, #fff);
-}
 .tc .art-body { flex: 1; overflow-y: auto; padding: 16px; }
 .tc .art-code {
   margin: 0;
@@ -102,37 +103,15 @@
 .tc .art-note { font-family: var(--font-read); font-size: 14.5px; line-height: 1.85; color: var(--ink); }
 .tc .art-note p { margin: 0 0 13px; white-space: pre-wrap; }
 .tc .art-body .md-body { font-size: 14.5px; line-height: 1.75; }
-.tc .art-src {
-  flex: none;
-  border-top: 1px solid var(--rule);
-  padding: 10px 16px;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 12px;
-  color: var(--ink-soft);
-  background: #ffffff66;
-}
-.tc .art-src .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--dc, #8a8377); }
-.tc .art-src .nm { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-.tc .art-src .loc {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  cursor: pointer;
-  border: 1px solid var(--rule-strong);
-  background: #fff;
-  border-radius: 7px;
-  padding: 4px 9px;
-  font-size: 12px;
-  color: var(--ink-soft);
-  white-space: nowrap;
-}
-.tc .art-src .loc:hover { border-color: var(--dc, #8a8377); color: var(--dc, #8a8377); }
-.tc .art-empty { margin: auto; text-align: center; color: var(--ink-faint); font-size: 13px; padding: 30px; }
 
 /* ---------------- Project workspace ---------------- */
-.tc .project-panel { width: min(max(46vw, 520px), 94vw); }
+.tc .project-drawer-shell {
+  min-width: 0;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
 .tc .project-panel-head svg { color: #526a5a; }
 .tc .project-version,
 .tc .project-readonly,
@@ -333,8 +312,32 @@
 .tc .project-artifact-content { padding: 2px 2px 20px; }
 .tc .project-artifact-content .md-body { font-size: 14px; line-height: 1.75; }
 
+/* ---------------- Artifacts drawer ---------------- */
+.tc .artifacts-drawer-shell { min-width: 0; flex: 1; display: flex; flex-direction: column; }
+.tc .artifacts-drawer-head svg { color: #526a5a; }
+.tc .artifacts-total { color: var(--ink-faint); font: 600 10px var(--font-ui); }
+.tc .artifacts-list-body { padding: 12px; }
+.tc .artifacts-empty { min-height: 160px; }
+.tc .project-resource-list.dense { gap: 5px; }
+.tc .project-resource-list.dense .project-resource-card { gap: 8px; padding: 8px 9px; border-radius: 8px; }
+.tc .project-resource-list.dense .project-resource-icon { width: 25px; height: 25px; border-radius: 6px; }
+.tc .project-resource-list.dense .project-resource-meta {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+@container (max-width: 340px) {
+  .tc .project-resource-list.dense .project-resource-meta {
+    display: -webkit-box;
+    overflow: hidden;
+    white-space: normal;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+  }
+}
+
 @media (max-width: 720px) {
-  .tc .project-panel { width: 94vw; min-width: 0; }
   .tc .project-panel-body { padding: 16px; }
   .tc .project-section-heading { flex-direction: column; }
   .tc .project-section-heading > .project-primary,
diff --git a/app/thread-chat/styles/selection.css b/app/thread-chat/styles/selection.css
index 46edc7f1..6a7d56b4 100644
--- a/app/thread-chat/styles/selection.css
+++ b/app/thread-chat/styles/selection.css
@@ -9,7 +9,7 @@
    branching/selection/selection-draft-guard.css，不进本桶。 */
 .tc .sel-bubble {
   position: fixed;
-  z-index: 60;
+  z-index: 71;
   color: #fff;
 }
 /* 平滑曲线轮廓背景层：铺满面板宽度，尾巴靠 svg overflow 溢出面板上/下沿；
diff --git a/app/thread-chat/styles/topbar.css b/app/thread-chat/styles/topbar.css
index ab450edb..5c53b479 100644
--- a/app/thread-chat/styles/topbar.css
+++ b/app/thread-chat/styles/topbar.css
@@ -2,6 +2,8 @@
 
 /* ---------------- 顶栏 ---------------- */
 .tc .topbar {
+  position: relative;
+  z-index: 69;
   flex: none;
   display: flex;
   align-items: center;
@@ -81,11 +83,15 @@
   border-color: var(--d1);
   color: var(--d1);
 }
-.tc .tbtn.help {
+.tc .tbtn.help,
+.tc .tbtn.workspace-tool {
   padding: 5px 7px;
   line-height: 0;
   color: var(--ink-soft);
 }
+.tc .tbtn.workspace-tool:has(.cnt) {
+  padding-right: 6px;
+}
 .tc .tbtn.help:hover {
   color: var(--ink);
 }
@@ -95,8 +101,13 @@
   pointer-events: none;
 }
 .tc .tbtn .cnt {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 18px;
   font-size: 10px;
   font-weight: 700;
+  line-height: 14px;
   color: #fff;
   background: var(--d2);
   border-radius: 999px;
diff --git a/app/thread-chat/thread-chat-demo.tsx b/app/thread-chat/thread-chat-demo.tsx
index 16955ae6..7b8e25e5 100644
--- a/app/thread-chat/thread-chat-demo.tsx
+++ b/app/thread-chat/thread-chat-demo.tsx
@@ -9,11 +9,7 @@ import type {
   MessageDTO,
   ProjectBootstrapDTO,
 } from "@/lib/thread-chat/contracts/dto"
-import {
-  activePathArtifacts,
-  threadTitle,
-  type TreeRow,
-} from "./core/selectors"
+import { threadTitle, type TreeRow } from "./core/selectors"
 import { useConversationStore } from "./core/use-thread-store"
 import {
   fromConversationViewThreadId,
@@ -49,7 +45,10 @@ import {
   TreeList,
   type TreeListItem,
 } from "./orchestration/navigation/tree-list"
-import { StoreBoundProjectPanel } from "./orchestration/artifacts/store-bound-project-panel"
+import { StoreBoundProjectDrawer } from "./orchestration/artifacts/store-bound-project-drawer"
+import { StoreBoundArtifactsDrawer } from "./orchestration/artifacts/store-bound-artifacts-drawer"
+import type { OpenArtifact } from "./orchestration/artifacts/artifact-open"
+import { layerZIndex } from "./orchestration/overlays/workspace-overlay-logic"
 import type { CanvasChatActions } from "./orchestration/canvas/canvas-actions"
 import { HelpPanel, UsageHint } from "./orchestration/overlays/help-panel"
 import { useWorkspaceOverlays } from "./orchestration/overlays/use-workspace-overlays"
@@ -226,12 +225,18 @@ function NormalizedThreadChat({
     helpPanel,
     closeHelpPanel,
     openHelpPanel,
-    drawerOpen,
+    drawerStack,
+    closingDrawers,
+    narrowDrawers,
+    artifactSide,
     activeArtifactId,
     setActiveArtifactId,
     openArtifact,
+    toggleArtifactsDrawer,
     toggleDrawer,
     closeDrawer,
+    activateDrawer,
+    topDrawer,
   } = useWorkspaceOverlays()
   const [hintDismissed, setHintDismissed] = useState(false)
 
@@ -515,7 +520,9 @@ function NormalizedThreadChat({
         return {
           id: project.id,
           title:
-            project.customTitle ?? project.autoTitle ?? deriveProjectTitle(bootstrap),
+            project.customTitle ??
+            project.autoTitle ??
+            deriveProjectTitle(bootstrap),
           updatedAt: project.updatedAt,
           threadCount: bootstrap.threads.length,
         }
@@ -559,9 +566,27 @@ function NormalizedThreadChat({
     state.project?.customTitle ?? state.project?.autoTitle ?? derivedSubtitle
   const hintVisible = !hintDismissed && !mainHasMessage
   const branchCount = Math.max(0, Object.keys(tree.threads).length - 1)
-  const markdownCount = activePathArtifacts(tree).reduce(
-    (count, artifact) => count + (artifact.kind === "markdown" ? 1 : 0),
-    0
+  const artifactCount = state.artifactOrder.length
+  const projectDrawerIndex = drawerStack.indexOf("project")
+  const artifactsDrawerIndex = drawerStack.indexOf("artifacts")
+  const projectDrawerOpen =
+    projectDrawerIndex >= 0 && !closingDrawers.project
+  const artifactsDrawerOpen =
+    artifactsDrawerIndex >= 0 && !closingDrawers.artifacts
+  const panelSizes = state.workspace.panelSizes
+  const refreshProject = useCallback(async () => {
+    const bootstrap = await runtime.client.getProject(treeId)
+    runtime.store.getState().hydrateProject(bootstrap)
+  }, [runtime.client, runtime.store, treeId])
+  const anyDrawerOpen = projectDrawerOpen || artifactsDrawerOpen
+  useEffect(() => {
+    if (!anyDrawerOpen) return
+    void refreshProject().catch(() => showToast("Project 加载失败，请重试"))
+  }, [anyDrawerOpen, refreshProject, showToast])
+  const openArtifactWithWorkspaceWidth = useCallback<OpenArtifact>(
+    (artifactId, options) =>
+      openArtifact(artifactId, options, panelSizes.artifactDrawer),
+    [openArtifact, panelSizes.artifactDrawer]
   )
 
   return (
@@ -573,7 +598,7 @@ function NormalizedThreadChat({
         forceCols={workspace.forceCols}
         placementMode={workspace.mode}
         branchCount={branchCount}
-        markdownCount={markdownCount}
+        artifactCount={artifactCount}
         onNewConversation={(openInNewPage) => {
           const newConversationUrl = `/thread-chat/${crypto.randomUUID()}`
           if (openInNewPage) {
@@ -595,7 +620,11 @@ function NormalizedThreadChat({
         onForceCols={workspace.setForceCols}
         onPlacementModeChange={changeMode}
         onToggleThreadTree={toggleGlobalSwitcher}
-        onToggleMarkdown={toggleDrawer}
+        onToggleProject={() => toggleDrawer("project")}
+        onToggleArtifacts={() => {
+          if (artifactsDrawerOpen) toggleArtifactsDrawer()
+          else openArtifact("", { source: "topbar" }, panelSizes.artifactDrawer)
+        }}
       />
 
       {workspace.viewMode === "columns" ? (
@@ -624,7 +653,7 @@ function NormalizedThreadChat({
                 onOpenThread={(target, options) =>
                   openBranchUI(target, viewThreadId, options)
                 }
-                onOpenArtifact={openArtifact}
+                onOpenArtifact={openArtifactWithWorkspaceWidth}
                 onCrumbNav={(target) =>
                   workspace.columns.navColumn(viewportIndex, target, "collapse")
                 }
@@ -663,7 +692,7 @@ function NormalizedThreadChat({
           messageActionState={messageActionState}
           focusNode={workspace.focusNode}
           onOpenThread={(id) => openBranchUI(id, null)}
-          onOpenArtifact={openArtifact}
+          onOpenArtifact={openArtifactWithWorkspaceWidth}
         />
       )}
 
@@ -726,14 +755,33 @@ function NormalizedThreadChat({
         />
       )}
 
-      <StoreBoundProjectPanel
+      <StoreBoundProjectDrawer
         projectId={treeId}
         store={runtime.store}
         client={runtime.client}
         commands={runtime.commands}
-        open={drawerOpen}
+        open={projectDrawerOpen}
+        zIndex={layerZIndex(Math.max(0, projectDrawerIndex))}
+        topLayer={topDrawer === "project"}
+        narrow={narrowDrawers}
+        container={rootRef}
+        onActivate={() => activateDrawer("project")}
+        onClose={() => closeDrawer("project")}
+        onRefresh={refreshProject}
+      />
+      <StoreBoundArtifactsDrawer
+        store={runtime.store}
+        open={artifactsDrawerOpen}
         activeId={activeArtifactId}
-        onClose={closeDrawer}
+        zIndex={layerZIndex(Math.max(0, artifactsDrawerIndex))}
+        side={artifactSide}
+        topLayer={topDrawer === "artifacts"}
+        narrow={narrowDrawers}
+        container={rootRef}
+        panelSizes={panelSizes}
+        setWorkspace={(next) => runtime.store.getState().setWorkspace(next)}
+        onActivate={() => activateDrawer("artifacts")}
+        onClose={() => closeDrawer("artifacts")}
         onSelect={setActiveArtifactId}
         onLocate={(threadId) => openBranchUI(threadId, null)}
       />
diff --git a/constants/project-workspace.ts b/constants/project-workspace.ts
index 5fb480a2..64a2141d 100644
--- a/constants/project-workspace.ts
+++ b/constants/project-workspace.ts
@@ -2,6 +2,9 @@
 export const PROJECT_TARGET_MAX_CHARS = 4_000
 export const PROJECT_INSTRUCTIONS_MAX_CHARS = 20_000
 
+/** Artifacts 达到此总数后显示抽屉内搜索。 */
+export const ARTIFACT_SEARCH_THRESHOLD = 6
+
 /** Message attachments 与 Project Files 共用的单次模型上下文字符预算。 */
 export const PROJECT_FILE_CONTEXT_CHAR_BUDGET = 120_000
 
diff --git a/constants/workspace-drawers.ts b/constants/workspace-drawers.ts
new file mode 100644
index 00000000..fd2c3673
--- /dev/null
+++ b/constants/workspace-drawers.ts
@@ -0,0 +1,20 @@
+/** 工作区抽屉的层级、尺寸与窄屏降级参数。 */
+export const WORKSPACE_DRAWER = {
+  baseZIndex: 65,
+  zIndexStep: 2,
+  projectWidth: 520,
+  artifactDefaultWidth: 520,
+  artifactMinWidth: 320,
+  narrowBreakpoint: 960,
+  artifactMaxViewportRatio: 2 / 3,
+  artifactMaxPersistedWidth: 4096,
+  narrowViewportRatio: 0.94,
+  resizeKeyboardStep: 16,
+  resizeKeyboardLargeStep: 48,
+} as const
+
+/** 抽屉关闭过渡时长，与壳层退场动画保持一致。 */
+export const WORKSPACE_DRAWER_EXIT_MS = 340
+
+/** 划选气泡需位于全部工作区抽屉之上。 */
+export const WORKSPACE_SELECTION_Z_INDEX = 71
diff --git a/e2e/thread-chat/artifact-drawer-accessibility.test.mjs b/e2e/thread-chat/artifact-drawer-accessibility.test.mjs
index e1c9aac6..68c35935 100644
--- a/e2e/thread-chat/artifact-drawer-accessibility.test.mjs
+++ b/e2e/thread-chat/artifact-drawer-accessibility.test.mjs
@@ -1,20 +1,52 @@
 import assert from "node:assert/strict"
 import { readFile } from "node:fs/promises"
 
-const source = await readFile(
-  new URL(
-    "../../app/thread-chat/orchestration/artifacts/artifact-drawer.tsx",
-    import.meta.url
-  ),
-  "utf8"
+const base = new URL(
+  "../../app/thread-chat/orchestration/artifacts/",
+  import.meta.url
 )
+const [layered, project, artifacts] = await Promise.all([
+  readFile(new URL("layered-drawer.tsx", base), "utf8"),
+  readFile(new URL("project-drawer.tsx", base), "utf8"),
+  readFile(new URL("artifacts-drawer.tsx", base), "utf8"),
+])
 
-assert.match(source, /role="dialog"/)
-assert.match(source, /aria-labelledby=\{titleId\}/)
-assert.match(source, /inert=\{!open\}/)
-assert.match(source, /closeButtonRef\.current\?\.focus\(\)/)
-assert.match(source, /returnFocusRef\.current\?\.focus\(\)/)
+// LayeredDrawer 统一处理非模态层、下层 inert 与三级焦点归还。
+assert.match(layered, /modal=\{false\}/)
+assert.match(layered, /aria-hidden=\{!open \|\| !topLayer\}/)
+assert.match(layered, /inert=\{!open \|\| !topLayer\}/)
+assert.match(layered, /data-layered-drawer-top=/)
+assert.match(layered, /element\.closest\("\[inert\]"\)/)
+assert.match(layered, /triggerRef\.current/)
+assert.match(layered, /data-layered-drawer-close/)
+assert.match(layered, /\.tc \.topbar/)
+assert.match(layered, /finalFocus=\{false\}/)
+assert.match(layered, /if \(!nextOpen\) queueMicrotask\(restoreFocus\)/)
+assert.match(layered, /target\?\.focus\(\)/)
 
-console.log(
-  "PASS  artifact drawer removes closed controls from focus and restores trigger focus"
-)
+// 可调宽把手提供 separator、键盘、指针捕获、取消与复位语义。
+assert.match(layered, /role="separator"/)
+assert.match(layered, /aria-orientation="vertical"/)
+assert.match(layered, /aria-valuemin=/)
+assert.match(layered, /aria-valuemax=/)
+assert.match(layered, /aria-valuenow=/)
+assert.match(layered, /ArrowLeft/)
+assert.match(layered, /ArrowRight/)
+assert.match(layered, /event\.currentTarget\.setPointerCapture/)
+assert.match(layered, /releasePointerCapture/)
+assert.match(layered, /onPointerCancel=/)
+assert.match(layered, /onDoubleClick=\{resetWidth\}/)
+assert.match(layered, /delete nextPanelSizes\.artifactDrawer/)
+assert.match(layered, /side === "left"/)
+
+// 内容组件保留 dialog 命名、关闭按钮和内态优先消费 Esc。
+for (const source of [project, artifacts]) {
+  assert.match(source, /role="dialog"/)
+  assert.match(source, /aria-labelledby=\{titleId\}/)
+  assert.match(source, /data-layered-drawer-close/)
+  assert.match(source, /onKeyDownCapture=/)
+  assert.match(source, /event\.key\s*[!=]==?\s*"Escape"/)
+  assert.match(source, /event\.stopPropagation\(\)/)
+}
+
+console.log("PASS  layered drawers expose inert, focus, Escape, and resize accessibility")
diff --git a/e2e/thread-chat/artifact-drawer-copy.test.mjs b/e2e/thread-chat/artifact-drawer-copy.test.mjs
index 17b8d174..84c06050 100644
--- a/e2e/thread-chat/artifact-drawer-copy.test.mjs
+++ b/e2e/thread-chat/artifact-drawer-copy.test.mjs
@@ -3,7 +3,7 @@ import { readFile } from "node:fs/promises"
 
 const source = await readFile(
   new URL(
-    "../../app/thread-chat/orchestration/artifacts/project-panel.tsx",
+    "../../app/thread-chat/orchestration/artifacts/artifacts-drawer.tsx",
     import.meta.url
   ),
   "utf8"
@@ -11,7 +11,7 @@ const source = await readFile(
 
 assert.match(source, /selectedArtifact\.kind === "markdown"/)
 assert.match(source, /copy\(selectedArtifact\.content\)/)
-assert.match(source, /copied \? "已复制" : "复制"/)
+assert.match(source, /copied \? "Markdown 已复制" : "复制 Markdown"/)
 assert.doesNotMatch(source, /copy\([^)]*(innerHTML|textContent)/)
 
-console.log("PASS  artifact drawer copies the active raw Markdown content")
+console.log("PASS  Artifacts Drawer copies the selected raw Markdown content")
diff --git a/e2e/thread-chat/artifact-drawer-css.test.mjs b/e2e/thread-chat/artifact-drawer-css.test.mjs
index 40a78a07..a993d59a 100644
--- a/e2e/thread-chat/artifact-drawer-css.test.mjs
+++ b/e2e/thread-chat/artifact-drawer-css.test.mjs
@@ -9,14 +9,49 @@ const drawer = readFileSync(
   new URL("../../app/thread-chat/styles/drawer.css", import.meta.url),
   "utf8"
 )
-
-assert.doesNotMatch(actions, /\.historical-artifact/)
-assert.equal(
-  drawer.match(/\.tc \.historical-artifact\s*\{/g)?.length,
-  1
+const topbar = readFileSync(
+  new URL("../../app/thread-chat/styles/topbar.css", import.meta.url),
+  "utf8"
 )
-assert.match(drawer, /\.historical-artifact[\s\S]*?font-size:\s*9px;/)
 
-console.log(
-  "PASS  historical artifact badge styles are owned only by the artifact drawer"
+for (const deadSelector of [
+  "historical-artifact",
+  "art-tabs",
+  "art-tab",
+  "art-src",
+  "art-empty",
+]) {
+  assert.doesNotMatch(`${actions}\n${drawer}`, new RegExp(`\\.${deadSelector}(?![\\w-])`))
+}
+
+assert.match(drawer, /\.layered-drawer\.right/)
+assert.match(drawer, /\.layered-drawer\.left/)
+assert.match(drawer, /\.layered-drawer\.left[\s\S]*?left:\s*0/)
+assert.match(drawer, /\.layered-drawer\.left[\s\S]*?translateX\(-103%\)/)
+assert.match(drawer, /\.layered-drawer\.left \.layered-drawer-resizer/)
+assert.match(
+  drawer,
+  /transition:\s*transform 0\.22s cubic-bezier\(0\.4, 0, 1, 1\)/
+)
+assert.match(
+  drawer,
+  /\.layered-drawer\[data-open\][\s\S]*?transition-duration:\s*0\.34s/
 )
+assert.match(
+  drawer,
+  /\.layered-drawer\[data-open\][\s\S]*?cubic-bezier\(0\.32, 0\.72, 0, 1\)/
+)
+assert.match(
+  drawer,
+  /\.layered-drawer\.right\[data-starting-style\][\s\S]*?translateX\(103%\)/
+)
+assert.match(
+  drawer,
+  /\.layered-drawer\.left\[data-starting-style\][\s\S]*?translateX\(-103%\)/
+)
+assert.match(drawer, /touch-action:\s*none/)
+assert.match(drawer, /\.project-resource-list\.dense/)
+assert.match(drawer, /@container\s*\(max-width:\s*340px\)/)
+assert.match(topbar, /\.tc \.topbar[\s\S]*?z-index:\s*69/)
+
+console.log("PASS  drawer CSS has layered sides, dense mode, topbar level, and no dead selectors")
diff --git a/e2e/thread-chat/message-artifacts.test.mjs b/e2e/thread-chat/message-artifacts.test.mjs
index 0dd5b4ab..d719595f 100644
--- a/e2e/thread-chat/message-artifacts.test.mjs
+++ b/e2e/thread-chat/message-artifacts.test.mjs
@@ -1,4 +1,5 @@
 import assert from "node:assert/strict"
+import { readFile } from "node:fs/promises"
 import { selectMessageArtifacts } from "../../app/thread-chat/orchestration/artifacts/message-artifacts-logic.ts"
 
 const first = { id: "artifact-1", sourceThreadId: "main" }
@@ -22,6 +23,37 @@ assert.deepEqual(
 )
 assert.deepEqual(selectMessageArtifacts(state, {}), [])
 
+const [messageArtifacts, card, openContract] = await Promise.all([
+  readFile(
+    new URL(
+      "../../app/thread-chat/orchestration/artifacts/message-artifacts.tsx",
+      import.meta.url
+    ),
+    "utf8"
+  ),
+  readFile(
+    new URL(
+      "../../app/thread-chat/orchestration/artifacts/markdown-artifact-card.tsx",
+      import.meta.url
+    ),
+    "utf8"
+  ),
+  readFile(
+    new URL(
+      "../../app/thread-chat/orchestration/artifacts/artifact-open.ts",
+      import.meta.url
+    ),
+    "utf8"
+  ),
+])
+assert.match(messageArtifacts, /onOpen\?: OpenArtifact/)
+assert.match(card, /source: event\.detail === 0 \? "keyboard" : "pointer"/)
+assert.match(card, /getBoundingClientRect\(\)/)
+assert.match(card, /serializeArtifactAnchorRect/)
+assert.match(openContract, /source: "pointer" \| "keyboard" \| "topbar"/)
+assert.match(openContract, /anchorRect\?: ArtifactAnchorRect/)
+assert.match(openContract, /artifactId: string,[\s\S]*options: OpenArtifactOptions/)
+
 console.log(
   "PASS  message artifacts preserve message order and skip missing/unavailable records"
 )
diff --git a/e2e/thread-chat/normalized-client-store.test.mjs b/e2e/thread-chat/normalized-client-store.test.mjs
index c1093801..688c3d79 100644
--- a/e2e/thread-chat/normalized-client-store.test.mjs
+++ b/e2e/thread-chat/normalized-client-store.test.mjs
@@ -89,6 +89,7 @@ function bootstrap(overrides = {}) {
     project: project(),
     threads: [thread()],
     messages: [message()],
+    files: [],
     artifacts: [],
     activeGenerationIds: [],
     ...overrides,
@@ -990,22 +991,36 @@ async function testPartsProjectionAndWorkspaceIsolation() {
   )
   assert.equal(saved.includes("messagesById"), false)
   assert.equal(saved.includes("正文"), false)
-  assert.equal(
-    sanitizeWorkspaceState({
+  const sanitized = sanitizeWorkspaceState({
+    version: 1,
+    workspace: {
+      view: "canvas",
+      openThreadIds: [thread().id, 3],
+      selectedThreadId: thread().id,
+      recents: [],
+      canvas: { pins: {} },
+      panelSizes: {
+        columns: [480, 640],
+        artifactDrawer: 12,
+      },
+      expandedNodes: [],
+      messagesById: { leaked: true },
+    },
+  })
+  assert.equal(sanitized.view, "canvas")
+  assert.deepEqual(sanitized.panelSizes.columns, [480, 640])
+  assert.equal("artifactDrawer" in sanitized.panelSizes, false)
+
+  for (const artifactDrawer of [Number.NaN, Number.POSITIVE_INFINITY, 5000]) {
+    const invalid = sanitizeWorkspaceState({
       version: 1,
       workspace: {
-        view: "canvas",
-        openThreadIds: [thread().id, 3],
-        selectedThreadId: thread().id,
-        recents: [],
-        canvas: { pins: {} },
-        panelSizes: {},
-        expandedNodes: [],
-        messagesById: { leaked: true },
+        view: "columns",
+        panelSizes: { artifactDrawer },
       },
-    }).view,
-    "canvas"
-  )
+    })
+    assert.equal("artifactDrawer" in invalid.panelSizes, false)
+  }
 }
 
 async function testStoppedProjectionPreservesExistingPresentation() {
@@ -1078,7 +1093,8 @@ async function testGate3HarnessIsolation() {
     "ThreadColumns",
     "ThreadCanvas",
     "BranchableChat",
-    "ArtifactDrawer",
+    "StoreBoundProjectDrawer",
+    "StoreBoundArtifactsDrawer",
     "createConversationCommands",
   ])
     assert.match(harness, new RegExp(component))
diff --git a/e2e/thread-chat/project-panel-ui-contract.test.mjs b/e2e/thread-chat/project-panel-ui-contract.test.mjs
index 13fe70fa..dcdc98f6 100644
--- a/e2e/thread-chat/project-panel-ui-contract.test.mjs
+++ b/e2e/thread-chat/project-panel-ui-contract.test.mjs
@@ -1,80 +1,83 @@
 import assert from "node:assert/strict"
-import { readFile } from "node:fs/promises"
+import { access, readFile } from "node:fs/promises"
 
-const panel = await readFile(
-  new URL(
-    "../../app/thread-chat/orchestration/artifacts/project-panel.tsx",
-    import.meta.url
-  ),
-  "utf8"
-)
-const bound = await readFile(
-  new URL(
-    "../../app/thread-chat/orchestration/artifacts/store-bound-project-panel.tsx",
-    import.meta.url
-  ),
-  "utf8"
-)
-const chatView = await readFile(
-  new URL("../../app/thread-chat/chat/chat-view.tsx", import.meta.url),
-  "utf8"
-)
-const shell = await readFile(
-  new URL("../../app/thread-chat/thread-chat-demo.tsx", import.meta.url),
-  "utf8"
+const root = new URL("../../", import.meta.url)
+const artifactDir = new URL(
+  "app/thread-chat/orchestration/artifacts/",
+  root
 )
+const [projectDrawer, artifactsDrawer, projectBound, artifactsBound, shell, chatView] =
+  await Promise.all([
+    readFile(new URL("project-drawer.tsx", artifactDir), "utf8"),
+    readFile(new URL("artifacts-drawer.tsx", artifactDir), "utf8"),
+    readFile(new URL("store-bound-project-drawer.tsx", artifactDir), "utf8"),
+    readFile(new URL("store-bound-artifacts-drawer.tsx", artifactDir), "utf8"),
+    readFile(new URL("app/thread-chat/thread-chat-demo.tsx", root), "utf8"),
+    readFile(new URL("app/thread-chat/chat/chat-view.tsx", root), "utf8"),
+  ])
 
-// Contract edit UX: draft is local; cancel restores authoritative server values;
-// save failure only sets error and therefore preserves the unsaved draft.
-assert.match(panel, /const \[targetDraft, setTargetDraft\] = useState\(""\)/)
-assert.match(panel, /const \[instructionsDraft, setInstructionsDraft\] = useState\(""\)/)
-assert.match(panel, /setTargetDraft\(project\?\.target \?\? ""\)/)
-assert.match(panel, /setInstructionsDraft\(project\?\.instructions \?\? ""\)/)
-assert.match(panel, /const cancelEdit = \(\) =>/)
-assert.match(panel, /await onSaveContract\(targetDraft, instructionsDraft\)/)
-assert.match(panel, /setError\(/)
-assert.doesNotMatch(
-  panel.match(/const saveContract = async \(\) => \{[\s\S]*?\n  \}/)?.[0] ?? "",
-  /setTargetDraft\(project/
-)
+for (const legacyFile of [
+  "project-panel.tsx",
+  "store-bound-project-panel.tsx",
+  "artifact-drawer.tsx",
+]) {
+  await assert.rejects(access(new URL(legacyFile, artifactDir)), { code: "ENOENT" })
+}
+
+// Project Drawer 只承载 Overview / Files，并提供完整 tab 语义与编辑态 Esc。
+assert.match(projectDrawer, /type ProjectDrawerSection = "overview" \| "files"/)
+assert.doesNotMatch(projectDrawer, /ProjectDrawerSection[^\n]*artifacts/)
+assert.equal(projectDrawer.match(/role="tab"/g)?.length, 2)
+assert.equal(projectDrawer.match(/role="tabpanel"/g)?.length, 2)
+assert.match(projectDrawer, /aria-selected=/)
+assert.match(projectDrawer, /aria-controls=/)
+assert.match(projectDrawer, /onKeyDownCapture=/)
+assert.match(projectDrawer, /event\.key === "Escape"/)
+assert.match(projectDrawer, /event\.stopPropagation\(\)/)
+assert.match(projectDrawer, /cancelEdit\(\)/)
 
-// File lifecycle and removal are visible/recoverable rather than silently hidden.
-assert.match(panel, /uploadProjectFile\(file,/)
-assert.match(panel, /uploading \? "上传中…" : "上传文件"/)
-assert.match(panel, /file\.status === "failed"/)
-assert.match(panel, /file\.error/)
-assert.match(panel, /window\.confirm\(/)
-assert.match(panel, /历史消息中的附件不会被删除/)
+// 原 Contract 与 File 生命周期能力仍在 Project Drawer 内。
+assert.match(projectDrawer, /await onSaveContract\(targetDraft, instructionsDraft\)/)
+assert.match(projectDrawer, /uploadProjectFile\(file,/)
+assert.match(projectDrawer, /file\.status === "failed"/)
+assert.match(projectDrawer, /window\.confirm\(/)
+assert.match(projectDrawer, /历史消息中的附件不会被删除/)
+assert.match(projectDrawer, /PROJECT_WORKSPACE_COPY\.archivedReadOnly/)
 
-// Project-wide artifact discovery/detail: search, descending createdAt, provenance,
-// stopped/failed status labels, and source navigation are all present.
-assert.match(panel, /right\.createdAt\.localeCompare\(left\.createdAt\)/)
-assert.match(panel, /artifactQuery\.trim\(\)\.toLowerCase\(\)/)
-assert.match(panel, /sourceThreadTitle/)
-assert.match(panel, /sourceMessageStatus/)
-assert.match(panel, /sourceStatusLabel\(selectedArtifact\.sourceMessageStatus\)/)
-assert.match(panel, /onLocate\(viewThreadId, artifact\.sourceMessageId\)/)
+// 尚未持久化的 UUID 是明确空态，不得被误报为无限加载。
+assert.match(projectDrawer, /Project 尚未创建/)
+assert.match(projectDrawer, /发送第一条消息后/)
+assert.match(projectDrawer, /!project \? \(/)
+assert.doesNotMatch(projectDrawer, /Project 加载中/)
 
-// Archived workspaces expose read-only state and suppress edit/upload/remove controls.
-assert.match(panel, /const archived = Boolean\(project\?\.archivedAt\)/)
-assert.match(panel, /PROJECT_WORKSPACE_COPY\.archivedReadOnly/)
-assert.match(panel, /!archived && !editing && project/)
-assert.match(panel, /!archived && project/)
-assert.match(panel, /!archived && \(/)
+// Artifacts Drawer 独立负责全 Project 列表、搜索、详情和来源定位。
+assert.match(artifactsDrawer, /artifacts\.length >= ARTIFACT_SEARCH_THRESHOLD/)
+assert.match(artifactsDrawer, /right\.createdAt\.localeCompare\(left\.createdAt\)/)
+assert.match(artifactsDrawer, /无匹配 Artifact/)
+assert.match(artifactsDrawer, /还没有 Artifact/)
+assert.match(artifactsDrawer, /selectedArtifact/)
+assert.match(artifactsDrawer, /onLocate\(viewThreadId, artifact\.sourceMessageId\)/)
+assert.match(artifactsDrawer, /listScrollRef/)
+assert.match(artifactsDrawer, /detailRef\.current\?\.scrollTo/)
+assert.match(artifactsDrawer, /className="project-resource-list dense"/)
 
-// The live panel consumes the same normalized store/runtime commands as ThreadChat.
-assert.match(bound, /useConversationStore\(store/)
-assert.match(bound, /store\.getState\(\)\.hydrateProject\(bootstrap\)/)
-assert.match(bound, /commands\.updateProjectContract/)
-assert.match(bound, /commands\.addProjectFile/)
-assert.match(bound, /commands\.removeProjectFile/)
-assert.match(shell, /<StoreBoundProjectPanel/)
-assert.doesNotMatch(shell, /<ArtifactDrawer/)
+// 两个 store-bound 组件订阅同一 normalized store；壳层只做一次刷新并组合渲染。
+assert.match(projectBound, /useConversationStore\(store/)
+assert.match(artifactsBound, /useConversationStore\(store/)
+assert.match(projectBound, /commands\.updateProjectContract/)
+assert.match(projectBound, /commands\.addProjectFile/)
+assert.match(projectBound, /commands\.removeProjectFile/)
+assert.match(artifactsBound, /state\.artifactOrder/)
+assert.match(shell, /const refreshProject = useCallback/)
+assert.match(shell, /runtime\.client\.getProject\(treeId\)/)
+assert.match(shell, /<StoreBoundProjectDrawer/)
+assert.match(shell, /<StoreBoundArtifactsDrawer/)
+assert.doesNotMatch(shell, /<ProjectPanel|<ArtifactDrawer/)
 
-// Artifact provenance can target an exact rendered message and briefly highlight it.
+// 来源消息仍可被精确定位并短暂高亮。
 assert.match(chatView, /data-thread-chat-message-id=\{msg\.id\}/)
-assert.match(bound, /scrollIntoView\(\{ behavior: "smooth", block: "center" \}\)/)
-assert.match(bound, /element\.animate\(/)
-assert.match(bound, /revealMessage\(sourceMessageId\)/)
+assert.match(artifactsBound, /scrollIntoView\(/)
+assert.match(artifactsBound, /element\.animate\(/)
+assert.match(artifactsBound, /revealMessage\(sourceMessageId\)/)
 
-console.log("project panel UI contract tests passed")
+console.log("PASS  split Project/Artifacts drawers preserve workspace UI contracts")
diff --git a/e2e/thread-chat/project-panel-workspace-state.test.mjs b/e2e/thread-chat/project-panel-workspace-state.test.mjs
index 245684b7..0f024887 100644
--- a/e2e/thread-chat/project-panel-workspace-state.test.mjs
+++ b/e2e/thread-chat/project-panel-workspace-state.test.mjs
@@ -112,7 +112,7 @@ const initialWorkspace = {
     pins: { [rootThreadId]: { x: 123, y: 456 } },
     viewport: { x: 30, y: 40, zoom: 0.8 },
   },
-  panelSizes: { projectPanel: 520 },
+  panelSizes: { columns: [520, 640], artifactDrawer: 560 },
   expandedNodes: [rootThreadId],
 }
 
diff --git a/e2e/thread-chat/thread-chat-topbar.test.mjs b/e2e/thread-chat/thread-chat-topbar.test.mjs
index 09749bc5..f5946ea2 100644
--- a/e2e/thread-chat/thread-chat-topbar.test.mjs
+++ b/e2e/thread-chat/thread-chat-topbar.test.mjs
@@ -13,7 +13,7 @@ assert.deepEqual(
   [{ value: 3, label: "3", active: true }]
 )
 
-const [topbar, messageActionsCss] = await Promise.all([
+const [topbar, shell, messageActionsCss, topbarCss] = await Promise.all([
   readFile(
     new URL(
       "../../app/thread-chat/orchestration/navigation/thread-chat-topbar.tsx",
@@ -21,6 +21,10 @@ const [topbar, messageActionsCss] = await Promise.all([
     ),
     "utf8"
   ),
+  readFile(
+    new URL("../../app/thread-chat/thread-chat-demo.tsx", import.meta.url),
+    "utf8"
+  ),
   readFile(
     new URL(
       "../../app/thread-chat/styles/message-actions.css",
@@ -28,12 +32,41 @@ const [topbar, messageActionsCss] = await Promise.all([
     ),
     "utf8"
   ),
+  readFile(
+    new URL("../../app/thread-chat/styles/topbar.css", import.meta.url),
+    "utf8"
+  ),
 ])
 assert.match(topbar, /aria-label="视图模式"/)
 assert.match(topbar, /aria-label="列数"/)
 assert.match(topbar, /aria-pressed=\{viewMode === "columns"\}/)
 assert.match(topbar, /aria-pressed=\{choice\.active\}/)
 assert.match(topbar, /aria-pressed=\{placementMode === "replace"\}/)
+assert.match(topbar, /onToggleProject\(\)/)
+assert.match(topbar, /onToggleArtifacts\(\)/)
+assert.match(topbar, /title="Project"/)
+assert.match(topbar, /title="Artifacts"/)
+assert.match(topbar, /aria-label="打开 \/ 收起 Project"/)
+assert.match(topbar, /aria-label="打开 \/ 收起 Artifacts"/)
+assert.doesNotMatch(topbar, />\s*Project\s*</)
+assert.doesNotMatch(topbar, />\s*Artifacts\s*</)
+assert.match(topbar, /<span className="cnt">\{artifactCount\}<\/span>/)
+assert.doesNotMatch(topbar, /artifactCount > 0/)
+assert.match(shell, /const artifactCount = state\.artifactOrder\.length/)
+assert.match(topbarCss, /\.tc \.tbtn \.cnt \{[\s\S]*line-height: 14px;/)
+assert.doesNotMatch(`${topbar}\n${shell}`, /markdownCount|onToggleMarkdown/)
+
+const projectButton = topbar.match(
+  /<button[\s\S]*?onClick=\{onToggleProject\}[\s\S]*?<\/button>/
+)?.[0]
+const artifactsButton = topbar.match(
+  /<button[\s\S]*?onClick=\{onToggleArtifacts\}[\s\S]*?<\/button>/
+)?.[0]
+assert.ok(projectButton)
+assert.ok(artifactsButton)
+assert.doesNotMatch(projectButton, /className="cnt"/)
+assert.match(artifactsButton, /className="cnt"/)
+
 await assert.rejects(
   access(
     new URL(
diff --git a/e2e/thread-chat/workspace-overlay.test.mjs b/e2e/thread-chat/workspace-overlay.test.mjs
index 3bd8b630..5c590d4a 100644
--- a/e2e/thread-chat/workspace-overlay.test.mjs
+++ b/e2e/thread-chat/workspace-overlay.test.mjs
@@ -1,41 +1,108 @@
 import assert from "node:assert/strict"
+import { readFile } from "node:fs/promises"
 import {
+  clampArtifactDrawerWidth,
+  closeLayer,
+  drawerSideForAnchor,
   escapeOverlayTarget,
+  isNarrowDrawerViewport,
+  layerZIndex,
+  openLayer,
   popupPosition,
+  topLayer,
 } from "../../app/thread-chat/orchestration/overlays/workspace-overlay-logic.ts"
 import { SWITCHER_DIMENSIONS } from "../../app/thread-chat/orchestration/navigation/switcher-dimensions.ts"
+import { WORKSPACE_DRAWER } from "../../constants/workspace-drawers.ts"
 
-assert.equal(
+assert.deepEqual(openLayer(["project"], "artifacts"), ["project", "artifacts"])
+assert.deepEqual(openLayer(["project", "artifacts"], "project"), [
+  "artifacts",
+  "project",
+])
+assert.deepEqual(closeLayer(["project", "artifacts"], "project"), ["artifacts"])
+assert.equal(topLayer(["project", "artifacts"]), "artifacts")
+assert.equal(topLayer([]), null)
+assert.equal(layerZIndex(1) > layerZIndex(0), true)
+assert.deepEqual(openLayer(["project", "artifacts"], "artifacts"), [
+  "project",
+  "artifacts",
+])
+
+assert.deepEqual(
+  escapeOverlayTarget({
+    internalOpen: true,
+    transientStack: ["selection"],
+    drawerStack: ["project"],
+  }),
+  { kind: "internal" }
+)
+assert.deepEqual(
   escapeOverlayTarget({
-    helpOpen: true,
-    treeListOpen: true,
-    selectionOpen: true,
-    switcherOpen: true,
-    drawerOpen: true,
+    transientStack: ["help", "selection"],
+    drawerStack: ["project", "artifacts"],
   }),
-  "help"
+  { kind: "transient", id: "selection" }
+)
+assert.deepEqual(
+  escapeOverlayTarget({
+    transientStack: [],
+    drawerStack: ["project", "artifacts"],
+  }),
+  { kind: "drawer", id: "artifacts" }
 )
 assert.equal(
   escapeOverlayTarget({
-    helpOpen: false,
-    treeListOpen: false,
-    selectionOpen: true,
-    switcherOpen: true,
-    drawerOpen: true,
+    transientStack: ["help"],
+    drawerStack: ["project"],
+    isComposing: true,
   }),
-  "selection"
+  null
 )
 assert.equal(
   escapeOverlayTarget({
-    helpOpen: false,
-    treeListOpen: false,
-    selectionOpen: false,
-    switcherOpen: false,
-    drawerOpen: false,
+    transientStack: ["help"],
+    drawerStack: ["project"],
+    repeat: true,
   }),
   null
 )
 
+assert.equal(WORKSPACE_DRAWER.projectWidth, 520)
+assert.equal(WORKSPACE_DRAWER.artifactDefaultWidth, WORKSPACE_DRAWER.projectWidth)
+assert.equal(isNarrowDrawerViewport(959), true)
+assert.equal(isNarrowDrawerViewport(960), false)
+assert.equal(clampArtifactDrawerWidth(100, 1200), 320)
+assert.equal(clampArtifactDrawerWidth(1000, 1200), 800)
+assert.equal(clampArtifactDrawerWidth(200, 280), 280)
+assert.equal(
+  drawerSideForAnchor({
+    anchorLeft: 100,
+    anchorRight: 200,
+    viewportWidth: 1200,
+    drawerWidth: 400,
+  }),
+  "right"
+)
+assert.equal(
+  drawerSideForAnchor({
+    anchorLeft: 900,
+    anchorRight: 1000,
+    viewportWidth: 1200,
+    drawerWidth: 400,
+  }),
+  "left"
+)
+assert.equal(
+  drawerSideForAnchor({
+    anchorLeft: 500,
+    anchorRight: 590,
+    viewportWidth: 1200,
+    drawerWidth: 700,
+  }),
+  "left",
+  "默认右侧会碰撞 anchor 时应翻到左侧"
+)
+
 assert.deepEqual(
   popupPosition({
     right: 900,
@@ -59,6 +126,20 @@ assert.deepEqual(
   { x: 8, y: 56 }
 )
 
+const overlayHook = await readFile(
+  new URL(
+    "../../app/thread-chat/orchestration/overlays/use-workspace-overlays.ts",
+    import.meta.url
+  ),
+  "utf8"
+)
+assert.match(overlayHook, /const escapeStateRef = useRef/)
+assert.match(overlayHook, /const current = escapeStateRef\.current/)
+assert.match(
+  overlayHook,
+  /document\.removeEventListener\("keydown", onKey\)\n  \}, \[\n    toggleGlobalSwitcher,\n    toggleTreeList,\n    closeSwitcher,\n    closeTreeList,\n    closeHelpPanel,\n    closeDrawer,\n  \]\)/
+)
+
 console.log(
-  "PASS  workspace overlays preserve Escape priority and clamp popup positions"
+  "PASS  workspace overlay stack, Escape, sizing, side, and popup logic"
 )
diff --git a/openspec/changes/split-project-artifacts-drawers/.openspec.yaml b/openspec/changes/split-project-artifacts-drawers/.openspec.yaml
new file mode 100644
index 00000000..9696e00f
--- /dev/null
+++ b/openspec/changes/split-project-artifacts-drawers/.openspec.yaml
@@ -0,0 +1,2 @@
+schema: spec-driven
+created: 2026-09-03
diff --git a/openspec/changes/split-project-artifacts-drawers/design.md b/openspec/changes/split-project-artifacts-drawers/design.md
new file mode 100644
index 00000000..3d3167f2
--- /dev/null
+++ b/openspec/changes/split-project-artifacts-drawers/design.md
@@ -0,0 +1,167 @@
+# Design: split-project-artifacts-drawers
+
+## Context
+
+现状（勘察结论，动机见 proposal.md）：
+
+- 单抽屉 `ProjectPanel`（`art-drawer project-panel`，z-index 65，`top:0` 覆盖顶栏），
+  内部 `ProjectPanelSection = "overview" | "files" | "artifacts"` 三 Tab；自定义 fixed
+  div + `inert`，非 Base UI Dialog。
+- 壳层 overlay 状态在 `use-workspace-overlays.ts`：`drawerOpen` boolean +
+  `activeArtifactId`；Esc 走 `escapeOverlayTarget` **固定优先级链**
+  （help > tree-list > selection > switcher > drawer）。
+- 既有 z-index：selection 60 / drawer 65 / switcher scrim+panel 72/74 / toast 80；
+  顶栏（topbar）无 z-index，被抽屉覆盖。
+- 会话树/会话列表弹窗的规约：Base UI Dialog `modal={false}` +
+  `disablePointerDismissal` + `dialogCloseToShell`（Esc 取消内建关闭、冒泡给壳层）；
+  组件内编辑/确认态在捕获期 `stopPropagation` 消费 Esc。
+- 仓库已装 `@base-ui/react` Drawer（`modal={false}`、`initialFocus/finalFocus`、
+  swipe 支持齐全）。工作区已有持久化 `workspace.panelSizes.artifactDrawer`
+  （`core/types.ts` / `workspace-state.ts`），sanitizer 目前只查 finite。
+- Artifact 卡片 click 位于 `markdown-artifact-card.tsx`，`onClick={() => onOpen(id)}`
+  丢弃事件；链：`branchable-chat → canvas-actions → thread-canvas/demo`。
+- gate-3 legacy 适配器 `artifact-drawer.tsx` 仅 harness 使用；死 CSS
+  `.art-tabs/.art-tab/.art-src/.historical-artifact/.art-empty`（后者有测试强制保留）。
+- 依赖约束：`add-project-workspace-mvp`（43/46，未归档）的 spec 定义了被本 change
+  MODIFIED 的 requirement；本 change 归档顺序必须在其之后。
+
+## Goals / Non-Goals
+
+**Goals:**
+
+- 双抽屉可共存、严格单一权威层叠栈；Esc 三级模型一次只关一层。
+- 抽出共用 `LayeredDrawer` 壳（侧向/过渡/inert/focus/栈索引/拖拽把手），
+  Project 与 Artifacts 只填内容。
+- Artifacts 紧凑纵向列表 + 渐进披露；位置感知侧向，尽量不遮挡被点卡片。
+- 命名与死代码清理一次性做完，不留兼容壳。
+
+**Non-Goals:**
+
+- 不动 API/DB/DTO；Artifact 的分页/虚拟化（Bootstrap 全量返回，面向中等规模，
+  大规模另开 change）。
+- TreeList/Switcher 的 Dialog 外壳不重构（仅把它们的关系从不一致改为互斥）；
+  不引入全局状态管理库。
+- Artifact 编辑/删除/跨 Thread 引用（沿用 MVP 既有边界）。
+
+## Decisions
+
+### D1：层叠栈的唯一权威在壳层 hook，Drawer 只收 props
+
+`use-workspace-overlays` 以 `drawerStack: DrawerId[]`（`"project" | "artifacts"`，
+按打开先后入栈）取代 `drawerOpen` boolean。纯函数放 `workspace-overlay-logic.ts`
+（可单测）：`openLayer(stack,id)`（已开则移至栈顶）/ `closeLayer(stack,id)` /
+`topLayer(stack)` / `layerZIndex(index)`。Drawer 组件**不自行注册**，只接收
+`open / zIndex / side / onActivate / onClose`。关闭动画期间由壳层保留其 z-index
+（closing 项暂存栈中，动画结束定时器到期才出栈，沿用 POPUP_EXIT_MS 模式）。
+
+备选：Drawer 自注册自注销 → 双状态源（review 已否决），弃。
+
+配套修正：
+
+- 顶栏提升到抽屉之上（z-index 高于抽屉栈峰值），保证两个触发器恒可达——
+  用户定稿「不互斥、先后决定 z-index」依赖触发器可点。
+- 同侧重叠时下层抽屉 `inert` + `aria-hidden`；`onActivate`（pointerdown）提升到栈顶。
+- Help/TreeList/Switcher 改为互斥（开一关其余），消除「固定链先关 TreeList 而
+  Switcher 视觉在上」的错位。
+- Esc 三级：① 抽屉/弹层内态（捕获期 stopPropagation 消费：搜索词非空先清搜索、
+  详情先回列表、Contract 编辑态先取消编辑）→ ② 瞬态弹层（互斥后按打开序）→
+  ③ `topLayer(drawerStack)`。keydown 处理器统一忽略 `isComposing` 与 `repeat`。
+
+### D2：先验证 Base UI Drawer，不通过才留自定义壳
+
+`LayeredDrawer` 首选以 `@base-ui/react` Drawer 为底座（`modal={false}`、
+`disablePointerDismissal`、`initialFocus={false}`、关闭动画用 data 属性驱动），
+复用 D1 的栈 props。验收门（spike，半天内可判）：非模态下能否（a）自由控制
+left/right 锚定与进场方向；（b）关掉 swipe 或将其限制在窄屏；（c）`finalFocus`
+支持「isConnected/可见性校验 → 剩余顶层抽屉关闭钮 → 顶栏」三级回落函数。
+三条任一不满足即退回：沿用 `.art-drawer` 自定义壳，手写 focus 捕获/归还按上述
+三级回落实现（现状仅记录 `activeElement` + 关闭即归还，两抽屉场景会抢焦点，必须改）。
+
+备选：原生 `<dialog>`/自研全套 → 无既有过渡状态机，工作量与风险均高，弃。
+
+### D3：焦点与 Esc 语义对齐既有弹窗规约，tab 语义补齐
+
+- 打开记录触发元素（仅 closed→open 边沿记录；激活提升不重复记录/抢焦）。
+- 归还校验 `isConnected` 且非 inert 后方调用 `.focus()`。
+- Esc 归壳层 keydown 权威（与 `dialogCloseToShell` 规约一致）；内态消费走捕获期
+  stopPropagation，与 tree-list 编辑态做法同构。
+- Project Drawer 的 Overview/Files 段头补全 `role="tab"`/`aria-selected`/
+  `aria-controls`（现状只有 tablist）。
+- 窄屏检测：`viewportW < 960px` → 单抽屉互斥 + ~94vw + 禁拖拽；常规屏幕下
+  Project 与 Artifacts 默认同为 520px。该断点以常量收敛，避免中等屏幕过早进入窄屏模式。
+
+### D4：位置感知侧向以「碰撞判定」而非裸半屏
+
+`onOpen` 签名整条链改为 `openArtifact(id, { source: "pointer" | "keyboard" | "topbar", anchorRect?: DOMRect })`：
+
+- `source: "pointer"`：默认侧向 = anchorRect 中心在左半屏 → right，反之 left；
+  若抽屉**当前宽度**在默认侧仍会覆盖 anchorRect，则取对侧（纠正「抽屉 >50vw 后
+  半屏规则失效」）。已在栈中打开的，仅 `openLayer` 提层 + 选中，**不翻边**。
+- `keyboard` / `topbar`：恒 right。
+- 消息卡片上的方向箭头/「打开预览 →」与 help-panel「右侧面板预览」文案按侧向
+  动态化或改为方向中立表述。
+
+备选：裸传 `clientX` 半屏判定 → 实现最简但宽抽屉下承诺破产（review 已指出），弃。
+
+### D5：宽度状态并入既有 workspace panelSizes，不造新 key
+
+- 拖拽把手复用列分割线的交互规约（`role="separator"`、方向键步进、双击复位、
+  `setPointerCapture`、`pointercancel` 清理、`touch-action:none`、拖动时禁选文本）；
+  左侧形态时位移方向取反。
+- 拖动过程只更新本地态/CSS var；`pointerup`（或键盘 commit）才
+  `setWorkspace({ panelSizes: {...prev, artifactDrawer: w} })` 浅合并写入；sanitizer
+  增加数域校验（320 ≤ w ≤ floor(viewportW*2/3) 的持久值改为比例或 clamp 后存）。
+- 复位 = 删除 `artifactDrawer` 键，恢复与 Project Drawer 相同的 520px 默认宽度。
+- 宽度变化时「当前宽度」需回喂 D4 的碰撞判定。
+
+### D6：Artifacts 渐进披露与细节
+
+- 搜索阈值常量（默认 6），以**总数**判定；隐藏即清空 query。
+- 「无匹配」与「还没有 Artifact」两种空态；详情返列表恢复 query 与滚动；
+  切换 artifact 详情滚到顶。
+- 行高压缩（`.dense` 修饰类）：icon 盒缩小、meta 单行 ellipsis；320px 下 meta 允许
+  两行或保留完整可访问文本；icon-only 操作一律 `aria-label`。
+- badge=`artifactOrder.length`，包括 0；Project 按钮去徽标。
+
+### D7：拆分与清理的落点
+
+- `project-panel.tsx` → `project-drawer.tsx`（Overview/Files）+ `artifacts-drawer.tsx`
+  （搜索/列表/详情，迁自 482-608）+ `layered-drawer.tsx` 壳。
+- `store-bound-project-panel.tsx` → 两个 store-bound 组件；**共享一次**
+  `client.getProject` 刷新（提到壳层一次调用、两 drawer 各自订阅 store），避免重复
+  hydrate；「定位来源」依赖 `project.rootThreadId` 的数据接线保留在 Artifacts 侧。
+- 改名：`markdownCount`→`artifactCount`（新语义）、`onToggleMarkdown`→
+  `onToggleProject`/`onToggleArtifacts`、`drawerOpen`→`drawerStack`。
+- gate-3 harness 迁移到 store-bound 组合后删除 `artifact-drawer.tsx`；删死 CSS 及其
+  保留性测试断言；`artifact-drawer-accessibility.test.mjs`（当前已失败）随重写修复。
+
+## Risks / Trade-offs
+
+- **[Base UI Drawer 非模态验收不通过]** → D2 有自定义壳回退路径，任务拆分时 spike
+  先行，不回溯主链路。
+- **[e2e 几乎都是源码正则断言，覆盖不了层叠/焦点/拖拽]** → 本 change 至少补齐纯函数
+  单测（栈操作、Esc 三级、阈值计算）+ 关键 DOM 契约重写；真实浏览器契约单独立项，
+  不阻塞本 change。
+- **[Help/TreeList/Switcher 改互斥属既有行为变更]** → 与「弹层语义统一」为同一目标；
+  在 specs 中显式写出互斥 scenario，回归点列入 tasks。
+- **[与未归档 add-project-workspace-mvp 的规格依赖]** → proposal 已声明归档顺序；
+  若 MVP 先归档则本 delta 直接可应用。
+- **[同侧重叠时下层内容不可见被部分用户视为遮挡]** → 接受（用户明确「不互斥、
+  先后定 z」）；以「点击/按钮提升」+「窄屏互斥」两端兜底可操作性。
+- **[anchorRect 穿过多层 props 增加链签名改动面]** → 一处类型
+  `OpenArtifactOptions` 收敛，五处文件机械改名，e2e 契约同步重写。
+
+## Migration Plan
+
+1. 纯函数层 + 壳层 hook（栈、Esc 三级、互斥）先行，单测绿。
+2. D2 spike → 定壳底座；落 `LayeredDrawer`。
+3. `ProjectDrawer` 迁移（Overview/Files），顶栏按钮拆出 Project，旧面板行为等价。
+4. `ArtifactsDrawer` 迁移 + 紧凑/渐进披露 + badge；链签名与侧向。
+5. 清理（改名/legacy adapter/死 CSS/help 文案）+ harness 迁移。
+6. 测试重写与补齐；`openspec validate`；归档（须在 add-project-workspace-mvp 之后）。
+   回滚：纯前端无数据迁移，整体 revert 即回旧单面板。
+
+## Open Questions
+
+- D2 的 Base UI Drawer 验收结果（spike 输出，决定壳底座实现路径）。
+- 真实浏览器端到端（Playwright 类）契约的落地范围，随本 change 实现期另行评估。
diff --git a/openspec/changes/split-project-artifacts-drawers/proposal.md b/openspec/changes/split-project-artifacts-drawers/proposal.md
new file mode 100644
index 00000000..72f6a6fe
--- /dev/null
+++ b/openspec/changes/split-project-artifacts-drawers/proposal.md
@@ -0,0 +1,84 @@
+# Proposal: split-project-artifacts-drawers
+
+## Why
+
+当前右上角只有一个 Project 按钮，打开单个 ProjectPanel 抽屉、内部以
+Overview / Files / Artifacts 三个 Tab 承载全部内容。随着 Project 收敛的 Artifact
+增多，「工程配置（Contract/Files）」与「成果浏览（Artifacts）」混在一个面板里
+互相挤占空间：看文档时摆脱不掉 Tab  chrome，编辑 Contract 时也无法参照
+Artifact。拆成两个可共存的独立 Drawer，让两条动线各占其位、互不干扰，并让
+Artifacts 以节省空间的紧凑形态展示文档。
+
+## What Changes
+
+- **顶栏双按钮（BREAKING UI）**：`Project` 与 `Artifacts` 两个按钮。Project 按钮去掉
+  badge；Artifacts badge 改为整个 Project 的持久化 Artifact 总数（store
+  `artifactOrder.length`），包括 0。原 `markdownCount`（只数 active path 上
+  的 markdown artifact）语义废弃。
+- **ProjectPanel 拆分**：Overview + Files 留在 `ProjectDrawer`；Artifacts 区块
+  （搜索 + 列表 + 详情钻取）迁入独立 `ArtifactsDrawer`。
+- **两抽屉可共存，不互斥**：打开先后顺序决定 z-index（后开者在上）；点击下层抽屉
+  或其顶栏按钮将其提升到栈顶；同侧重叠时仅顶层可交互（下层 inert）；视口宽度不足
+  时降级为单抽屉互斥、约 94vw 呈现。
+- **ArtifactsDrawer 宽度可调**：默认与 Project Drawer 同为 520px，拖拽内缘可在
+  320px 至最大 66vw 间调整，pointerup 时持久化到既有
+  `workspace.panelSizes.artifactDrawer`；双击把手（及键盘复位）恢复 520px 默认值并清除
+  覆盖值。仅在视口小于 960px 的窄屏模式下改为约 94vw 且禁用拖拽。
+- **点击位置感知侧向**：从 Thread 内 ArtifactCard 打开时按点击位置选择抽屉侧向
+  （点在左半屏 → 抽屉开右侧；点在右半屏 → 开左侧），尽量不遮挡正在阅读的卡片；
+  键盘激活无坐标时回退右侧；顶栏按钮打开恒为右侧。ProjectDrawer 恒右。
+- **Artifacts 列表渐进披露**：恒为纵向紧凑列表 + 抽屉内详情钻取；总数 < 6 时隐藏
+  搜索框与冗余 heading，≥ 6 时显示搜索；meta 单行截断，无搜索结果与空列表分态。
+- **Overlay/Esc 体系收敛**：抽出 Drawer 层叠栈（open/close/activate，后进先出）；
+  Esc 三级模型——抽屉内态（搜索/详情/编辑草稿）→ 瞬态弹层（Help/TreeList/Switcher
+  改为互斥）→ Drawer 栈顶；修复 selection bubble（z-60）视觉层级低于 drawer（z-65）
+  却被 Esc 优先关闭的既有错位。
+- **规格改写（BREAKING 规格语义）**：改写 add-project-workspace-mvp 中
+  "Unified Project Panel" 与 "Open an Artifact from a message card" 两条要求——
+  不再禁止两个竞争抽屉，而是以层叠栈统一定义它们的行为。
+- **命名清理**：`markdownCount`/`onToggleMarkdown`/`drawerOpen` 改名或重定义；
+  gate-3 legacy 适配器 `artifact-drawer.tsx` 随 harness 迁移后删除；删除死 CSS
+  （`.art-tabs`/`.art-tab`/`.art-src`/`.historical-artifact`/`.art-empty`）及其
+  强制保留死样式的测试断言。
+- **测试更新**：重写 `project-panel-ui-contract.test.mjs` 为双抽屉契约；修复当前已
+  失败的 `artifact-drawer-accessibility.test.mjs`；更新受波及的其他断言型测试
+  （topbar、workspace-overlay、message-artifacts、drawer-copy、drawer-css、
+  workspace-state、normalized-client-store）。
+
+## Capabilities
+
+### New Capabilities
+
+- `workspace-drawers`: ThreadChat 工作区的层叠抽屉基础设施——侧锚定非模态抽屉壳、
+  打开顺序层叠栈（z-index/激活/提升）、Esc 分层模型、焦点捕获与归还、左右侧形态、
+  拖拽调宽与持久化、窄屏降级。Project 与 Artifacts 抽屉共用此能力，后续工作区扩展
+  （如更多面板）复用同一壳。
+
+### Modified Capabilities
+
+- `project-workspace`: 改写 "Unified Project Panel"——单面板三 Tab 改为
+  Project Drawer（Overview/Files）与独立 Artifacts Drawer（基于 workspace-drawers
+  能力共存）；改写 "Open an Artifact from a message card"——打开独立 Artifacts
+  Drawer 并按点击位置选侧，删除「不维护两个竞争抽屉」的限制并代以层叠栈语义；
+  补充 Artifacts 紧凑浏览（渐进披露/搜索分态/详情钻取）与 badge 语义要求。
+
+## Impact
+
+- **UI 组件**：`thread-chat-topbar.tsx`（双按钮）、`project-panel.tsx`（拆分）、
+  新增 `layered-drawer.tsx` 壳与 `artifacts-drawer.tsx`、
+  `store-bound-project-panel.tsx` 拆分、gate-3 harness 迁移。
+- **Overlay 状态**：`use-workspace-overlays.ts`（层叠栈替代 drawerOpen boolean）、
+  `workspace-overlay-logic.ts`（纯函数栈操作 + Esc 三级）。
+- **点击链签名**：`message-artifacts.tsx` / `markdown-artifact-card.tsx` /
+  `branchable-chat.tsx` / `canvas-actions.ts` / `thread-canvas.tsx` /
+  `canvas-expand.tsx` 的 `onOpen` 由 `(id)` 变为 `(id, { source, preferredSide? })`。
+- **持久化**：`core/types.ts` / `core/store.ts` /
+  `net/persistence/workspace-state.ts`（panelSizes.artifactDrawer 的校验与合入）。
+- **样式**：`drawer.css`（左右侧形态、dense 变体、拖拽把手、死 CSS 删除）、
+  `topbar.css`（层级），常量收敛（z-index 基值/搜索阈值/宽度限）。
+- **文案**：`help-panel.tsx`「右侧面板预览」表述、artifact 卡片的方向箭头。
+- **OpenSpec**：与 `add-project-workspace-mvp`（43/46，未归档）存在规格依赖——
+  本 change 的 delta 以 `project-workspace` capability 为目标，归档顺序须在其之后。
+- **测试**：8+ 个 e2e/断言测试文件更新；建议新增真实浏览器契约（双抽屉层叠顺序、
+  Esc 逐层、拖拽持久化、窄屏降级、焦点归还）。
+- **无 API/DB 变更**：仅前端工作区壳层与组件改造。
diff --git a/openspec/changes/split-project-artifacts-drawers/specs/project-workspace/spec.md b/openspec/changes/split-project-artifacts-drawers/specs/project-workspace/spec.md
new file mode 100644
index 00000000..b48819ca
--- /dev/null
+++ b/openspec/changes/split-project-artifacts-drawers/specs/project-workspace/spec.md
@@ -0,0 +1,96 @@
+# project-workspace Specification Delta
+
+## MODIFIED Requirements
+
+### Requirement: Unified Project Panel
+
+系统 SHALL 在 ThreadChat Workspace 顶栏提供 Project 与 Artifacts 两个独立入口，分别打开两个基于 workspace-drawers 能力、可共存的抽屉：Project Drawer 承载 Overview（Target、Instructions）与 Files（列表、上传、状态、打开、移除）；Artifacts Drawer 承载全 Project Artifact 的列表、预览与定位来源。抽屉的打开、关闭和切换 MUST NOT 改变当前 Thread 路由、列布局、画布位置或生成状态。
+
+#### Scenario: Open Project Drawer from columns view
+
+- **WHEN** 用户在列视图点击 Project 入口
+- **THEN** 打开 Project Drawer，显示当前 Project 的 Overview 与 Files 区域
+
+#### Scenario: Open Project Drawer from canvas view
+
+- **WHEN** 用户在画布视图点击 Project 入口
+- **THEN** 打开功能等价的 Project Drawer，当前画布节点和视口状态保持不变
+
+#### Scenario: Open Artifacts Drawer from the topbar
+
+- **WHEN** 用户点击 Artifacts 入口
+- **THEN** 以右侧形态打开 Artifacts Drawer，显示全 Project Artifact 列表
+
+#### Scenario: Open an Artifact from a message card
+
+- **WHEN** 用户点击现有消息中的 Artifact card
+- **THEN** 系统打开独立 Artifacts Drawer 的 Artifact detail；Project Drawer 的打开状态不被改变
+
+#### Scenario: Empty Project resources
+
+- **WHEN** Project 尚无 Files 或 Artifacts
+- **THEN** 对应抽屉区域显示明确空态和可执行的下一步，不隐藏 Contract 编辑能力
+
+## ADDED Requirements
+
+### Requirement: Artifacts 紧凑浏览与渐进披露
+
+Artifacts Drawer SHALL 以纵向紧凑列表展示全部 Artifact：每行包含标题、kind 标记与单行截断的来源元信息，点击行进入抽屉内详情视图，详情视图可返回列表。Artifact 总数低于系统阈值时 MUST 隐藏搜索框；达到阈值时 MUST 显示搜索框，阈值判定基于总数而非过滤后数量。隐藏搜索框时 MUST 清空已有搜索词。搜索无结果 MUST 显示「无匹配」空态，与「还没有 Artifact」的空列表态区分。
+
+#### Scenario: 少文件不显示搜索框
+
+- **WHEN** Project 中 Artifact 总数低于阈值
+- **THEN** 列表直接呈现全部条目，不渲染搜索框
+
+#### Scenario: 多文件显示搜索框
+
+- **WHEN** Project 中 Artifact 总数达到阈值
+- **THEN** 列表上方显示搜索框，可按标题、类型或来源 Thread 过滤
+
+#### Scenario: 搜索无结果
+
+- **WHEN** 用户输入的搜索词没有匹配任何 Artifact
+- **THEN** 显示「无匹配」空态，而非「还没有 Artifact」
+
+#### Scenario: 详情返回列表保留上下文
+
+- **WHEN** 用户从详情视图返回列表
+- **THEN** 搜索词与列表滚动位置保持返回前状态
+
+### Requirement: 位置感知的 Artifact 打开
+
+系统 SHALL 在用户从消息内 Artifact 卡片打开 Artifact 时，根据点击位置决定 Artifacts Drawer 的侧向：点击位置在视口左半区时抽屉开右侧，在右半区时开左侧，使抽屉尽量不遮挡被点击的卡片。键盘激活等无指针坐标的打开 MUST 回退为右侧。抽屉已打开时再次点击卡片：MUST 选中对应 Artifact 并将抽屉提升至栈顶，MUST NOT 改变既有侧向。
+
+#### Scenario: 点击左半区卡片
+
+- **WHEN** 用户在视口左半区点击 Artifact 卡片
+- **THEN** Artifacts Drawer 以右侧形态打开并展示对应 Artifact detail
+
+#### Scenario: 点击右半区卡片
+
+- **WHEN** 用户在视口右半区点击 Artifact 卡片
+- **THEN** Artifacts Drawer 以左侧形态打开并展示对应 Artifact detail
+
+#### Scenario: 键盘激活卡片
+
+- **WHEN** 用户通过键盘激活 Artifact 卡片
+- **THEN** Artifacts Drawer 以右侧形态打开
+
+#### Scenario: 抽屉已开时点另一张卡片
+
+- **WHEN** Artifacts Drawer 已打开，用户点击另一张 Artifact 卡片
+- **THEN** 抽屉展示新选中 Artifact 并提升至栈顶，侧向保持不变
+
+### Requirement: Artifacts 入口徽标语义
+
+顶栏 Artifacts 入口的计数徽标 SHALL 始终表示当前 Project 的持久化 Artifact 总数（含 Markdown、Code、Note 各 kind，含来源消息为 stopped/failed 但内容可读的 Artifact），计数为零时 MUST 显示 `0`。Project 入口不显示计数徽标。
+
+#### Scenario: 徽标计数
+
+- **WHEN** 当前 Project 存在持久化 Artifact
+- **THEN** Artifacts 入口显示与总数一致的徽标，新增 Artifact 后徽标即时更新
+
+#### Scenario: 零计数显示徽标
+
+- **WHEN** 当前 Project 没有任何持久化 Artifact
+- **THEN** Artifacts 入口显示计数 `0`
diff --git a/openspec/changes/split-project-artifacts-drawers/specs/workspace-drawers/spec.md b/openspec/changes/split-project-artifacts-drawers/specs/workspace-drawers/spec.md
new file mode 100644
index 00000000..bd5bc8fa
--- /dev/null
+++ b/openspec/changes/split-project-artifacts-drawers/specs/workspace-drawers/spec.md
@@ -0,0 +1,126 @@
+# workspace-drawers Specification
+
+## Purpose
+
+为 ThreadChat 工作区提供可共存的侧锚定抽屉基础设施：统一的打开顺序层叠栈、Esc 分层关闭、键盘可达的焦点管理、左右侧形态与可调宽度，供 Project、Artifacts 及后续工作区面板共用。
+
+## ADDED Requirements
+
+### Requirement: 抽屉共存与打开顺序层叠
+
+系统 SHALL 允许 Project Drawer 与 Artifacts Drawer 同时处于打开状态。多个抽屉的 z-index 由打开先后顺序决定，后打开者位于上层。用户点击某个已打开但被遮盖的抽屉、或其顶栏触发按钮时，该抽屉 MUST 被提升至栈顶。同侧重叠时，被遮盖的下层抽屉 MUST 不可交互（inert）。
+
+#### Scenario: 后开的抽屉在上层
+
+- **WHEN** Project Drawer 已打开，用户再打开 Artifacts Drawer
+- **THEN** Artifacts Drawer 覆盖在 Project Drawer 之上，两个抽屉均保持其内部状态
+
+#### Scenario: 提升下层抽屉
+
+- **WHEN** 两个抽屉同侧重叠，用户点击下层抽屉可见区域或其顶栏按钮
+- **THEN** 下层抽屉提升至栈顶并可交互，另一抽屉转为下层
+
+#### Scenario: 关闭动画期间层级不跌落
+
+- **WHEN** 顶层抽屉开始播放关闭动画，另一抽屉仍处于打开状态
+- **THEN** 正在关闭的抽屉保持原 z-index 直至退场结束，不出现先坠落到下层再消失的视觉跳变
+
+#### Scenario: 顶栏触发器始终可达
+
+- **WHEN** 任一抽屉处于打开状态
+- **THEN** 顶栏的 Project 与 Artifacts 按钮仍可点击，不被任何抽屉遮挡
+
+### Requirement: 窄屏单抽屉降级
+
+当视口宽度小于 960px 时，系统 SHALL 降级为单抽屉模式：一次只允许一个抽屉可见，另一个保留内部状态但隐藏且不可交互；可见抽屉以接近全屏宽度呈现，且该模式下 MUST 禁用拖拽调宽。视口宽度大于或等于 960px 时 MUST 保持常规抽屉宽度行为，不得过早切换为接近全屏宽度。
+
+#### Scenario: 窄屏打开第二个抽屉
+
+- **WHEN** 窄屏视口下 Artifacts Drawer 可见，用户打开 Project Drawer
+- **THEN** Project Drawer 替换 Artifacts Drawer 呈现，Artifacts Drawer 的滚动位置与选中状态被保留
+
+#### Scenario: 窄屏禁用拖拽
+
+- **WHEN** 视口处于窄屏模式
+- **THEN** 抽屉不显示拖拽把手，或拖拽把手不产生调宽行为
+
+#### Scenario: 常规宽度边界
+
+- **WHEN** 视口宽度为 960px 或更大
+- **THEN** 抽屉保持常规宽度与拖拽能力，不切换为接近全屏宽度
+
+### Requirement: Esc 分层关闭
+
+Esc 按一次只关闭一层，优先级自内向外为：（1）抽屉或弹层内部的瞬态状态（如搜索输入、详情视图、编辑草稿态）；（2）瞬态弹层（帮助面板、会话树、会话列表、划选气泡）；（3）抽屉层叠栈的栈顶。帮助面板、会话树与会话列表之间 MUST 互斥（打开一个即关闭其他）。输入法组合中（isComposing）与按键重复（repeat）产生的 Esc MUST 被忽略。
+
+#### Scenario: 抽屉内态先于抽屉关闭
+
+- **WHEN** Artifacts Drawer 处于详情视图，用户按下 Esc
+- **THEN** 先返回列表视图，抽屉保持打开；再次按下 Esc 才关闭抽屉
+
+#### Scenario: 瞬态弹层先于抽屉关闭
+
+- **WHEN** 抽屉打开且会话列表弹层打开，用户按下 Esc
+- **THEN** 会话列表关闭，抽屉保持打开
+
+#### Scenario: 弹层互斥
+
+- **WHEN** 帮助面板已打开，用户触发会话树弹层
+- **THEN** 帮助面板关闭，会话树弹层打开
+
+#### Scenario: 输入法组合中的 Esc 被忽略
+
+- **WHEN** 用户正在中文输入法组合会话中，按下 Esc
+- **THEN** 不触发任何弹层或抽屉的关闭
+
+### Requirement: 焦点捕获与归还
+
+抽屉打开时系统 SHALL 记录触发元素并将焦点移入抽屉。抽屉关闭时 SHALL 将焦点归还触发元素；触发元素已不存在或不可见时，MUST 依次回落到当前最上层抽屉的关闭按钮、再到顶栏。仅提升已打开抽屉的层级时 MUST NOT 重复抢夺焦点。视觉层级最高但只是被遮盖而未关闭的抽屉 MUST 保持其焦点不可达状态，键盘 Tab MUST NOT 进入被 inert 标记的下层抽屉。
+
+#### Scenario: 正常归还
+
+- **WHEN** 用户从顶栏按钮打开抽屉后关闭它
+- **THEN** 焦点归还到该顶栏按钮
+
+#### Scenario: 触发元素已卸载
+
+- **WHEN** 触发元素在抽屉打开期间被卸载，用户关闭抽屉
+- **THEN** 焦点回落到剩余最上层抽屉的关闭按钮；若无其他抽屉，则回落到顶栏
+
+#### Scenario: 提升层级不抢焦点
+
+- **WHEN** 用户点击下层抽屉使其提升到栈顶
+- **THEN** 焦点停留在用户点击的位置，不被强制移动到抽屉关闭按钮
+
+### Requirement: 可调宽度与持久化
+
+Artifacts 抽屉 SHALL 支持拖拽内缘调整宽度：未设置持久化覆盖值时默认与 Project Drawer 同为 520px，最小 320px，最大不超过视口宽度的三分之二。宽度 MUST 在拖拽结束时才持久化到工作区面板尺寸状态，拖拽过程中不写持久层；持久化写入 MUST 保留工作区状态中其他面板尺寸字段。用户 MUST 能通过双击拖拽把手或键盘操作恢复默认宽度，恢复动作清除持久化覆盖值而非写入固定像素。拖拽把手 MUST 支持键盘（方向键微调）并暴露 separator 语义与当前/最小/最大宽度值。
+
+#### Scenario: 拖拽并持久化
+
+- **WHEN** 用户拖拽把手后释放
+- **THEN** 抽屉保持新宽度，刷新页面后宽度保持；工作区其他面板尺寸不受影响
+
+#### Scenario: 恢复默认宽度
+
+- **WHEN** 用户双击拖拽把手
+- **THEN** 抽屉回到与 Project Drawer 相同的 520px 默认宽度，持久化的宽度覆盖被清除
+
+#### Scenario: 键盘调宽
+
+- **WHEN** 拖拽把手获得焦点，用户按方向键
+- **THEN** 抽屉宽度按步进调整，宽限仍受最小/最大值约束
+
+### Requirement: 左右侧形态
+
+抽屉 SHALL 支持左侧与右侧两种锚定形态。右侧形态的进场动画、边框、阴影与把手位置 MUST 在左侧形态下镜像。任一时刻单个抽屉实例只呈现一种形态，形态在打开时确定、关闭前不改变。
+
+#### Scenario: 左侧形态渲染
+
+- **WHEN** Artifacts Drawer 以左侧形态打开
+- **THEN** 抽屉锚定在视口左缘，自左侧滑入，拖拽把手位于抽屉右缘
+
+#### Scenario: 视口缩放不翻边
+
+- **WHEN** 抽屉已打开期间用户调整窗口大小
+- **THEN** 抽屉保持其打开时的侧向，仅宽度按约束重算；仅在进入窄屏模式时切换为全宽呈现，退出窄屏后恢复原侧向
diff --git a/openspec/changes/split-project-artifacts-drawers/tasks.md b/openspec/changes/split-project-artifacts-drawers/tasks.md
new file mode 100644
index 00000000..45075094
--- /dev/null
+++ b/openspec/changes/split-project-artifacts-drawers/tasks.md
@@ -0,0 +1,69 @@
+# Tasks: split-project-artifacts-drawers
+
+## 1. 纯函数层与壳层状态（先行，单测驱动）
+
+- [x] 1.1 `workspace-overlay-logic.ts` 新增栈纯函数：`openLayer`（已开移栈顶）/ `closeLayer` / `topLayer` / `layerZIndex`；补单测
+- [x] 1.2 Esc 三级解析函数（内态 → 瞬态弹层 → 抽屉栈顶）替代 `escapeOverlayTarget` 的固定链；忽略 `isComposing`/`repeat`；补单测
+- [x] 1.3 窄屏降级阈值函数（两抽屉最小宽 + 正文保留宽 → boolean），常量集中到 `constants/`；补单测
+- [x] 1.4 `use-workspace-overlays.ts`：`drawerOpen` → `drawerStack: DrawerId[]`，含 closing 暂存项（动画期间保留 z-index，到期出栈）
+
+## 2. 壳底座 spike（D2 验收门）
+
+- [x] 2.1 验证 Base UI Drawer 非模态形态：左右锚定/进场方向、swipe 限定、`initialFocus/finalFocus` 与三级焦点回落的可行性；输出结论
+- [x] 2.2 根据 spike 结论实现 `layered-drawer.tsx`：`open/zIndex/side/onActivate/onClose` props、进出场过渡、`inert`/`aria-hidden`、焦点捕获与三级归还
+- [x] 2.3 `LayeredDrawer` 的拖拽把手：`role="separator"`、方向键步进、双击复位、`setPointerCapture`、`pointercancel`、`touch-action:none`、左侧镜向位移
+
+## 3. ProjectDrawer 迁移
+
+- [x] 3.1 `project-panel.tsx` 拆出 `project-drawer.tsx`：仅 Overview/Files 两段，tab 语义补齐（`role="tab"`/`aria-selected`/`aria-controls`）
+- [x] 3.2 Overview 编辑态 Esc 捕获期消费（取消编辑、不冒泡关抽屉）
+- [x] 3.3 `store-bound-project-panel.tsx` 拆出 `store-bound-project-drawer.tsx`；`getProject` 刷新提升到壳层一次调用
+
+## 4. ArtifactsDrawer 迁移与紧凑浏览
+
+- [x] 4.1 `artifacts-drawer.tsx`：搜索/列表/详情迁自 project-panel 482-608；`store-bound-artifacts-drawer.tsx`（保留 `rootThreadId` 定位接线）
+- [x] 4.2 渐进披露：搜索阈值（默认 6，按总数判定）、隐藏清空 query、「无匹配」空态、详情返回恢复 query/滚动、切换详情滚顶
+- [x] 4.3 `.dense` 密度变体 + 320px 下 meta 可读性 + icon-only 按钮 `aria-label`
+- [x] 4.4 Artifacts 详情态/搜索态 Esc 捕获期消费（详情→列表、清空搜索，再冒泡）
+
+## 5. 侧向与位置感知
+
+- [x] 5.1 龙一签名 `openArtifact(id, { source, anchorRect? })` 贯穿 `markdown-artifact-card` → `branchable-chat` → `canvas-actions` → `thread-canvas`/`canvas-expand` → demo
+- [x] 5.2 侧向决策：半屏默认 + 当前宽度碰撞判定取对侧；keyboard/topbar 恒右；已开仅提层选中不翻边
+- [x] 5.3 `drawer.css` `.left` 形态镜像（`left:0; right:auto`、transform/阴影/把手位置）+ `topbar.css` 层级提升
+- [x] 5.4 卡片箭头/「打开预览 →」与 `help-panel.tsx` 文案改为侧向中立表述
+
+## 6. 顶栏双入口
+
+- [x] 6.1 `thread-chat-topbar.tsx`：拆 `Project`/`Artifacts` 两按钮；去掉 Project 徽标；`artifactCount` = `artifactOrder.length`，包括 0
+- [x] 6.2 改名落地：`onToggleMarkdown`→`onToggleProject`/`onToggleArtifacts`、调用点同步
+
+## 7. 宽度持久化
+
+- [x] 7.1 `panelSizes.artifactDrawer` 写入路径：pointerup/键盘 commit 才 `setWorkspace` 浅合并；复位删覆盖键
+- [x] 7.2 `workspace-state.ts` sanitizer 增加数值域校验（clamp 或丢弃非法值）
+- [x] 7.3 窄屏模式禁拖拽、~94vw 呈现、退出窄屏恢复侧向与宽度
+
+## 8. 瞬态弹层一致性与层级修正
+
+- [x] 8.1 Help/TreeList/Switcher 打开互斥（开一关其余）
+- [x] 8.2 selection bubble 视觉层级与 Esc 优先级对齐（z-index 高于 drawer 或调整三级顺序）
+
+## 9. 清理
+
+- [x] 9.1 gate-3 harness 迁移到 store-bound 组合；删除 `artifact-drawer.tsx` legacy 适配器
+- [x] 9.2 删除死 CSS（`.art-tabs/.art-tab/.art-src/.historical-artifact/.art-empty`）及强制保留死样式的断言
+
+## 10. 测试与验收
+
+- [x] 10.1 `project-panel-ui-contract.test.mjs` 重写为双抽屉 DOM 契约
+- [x] 10.2 修复并重写 `artifact-drawer-accessibility.test.mjs`（当前已失败：断言错位到 project-panel）
+- [x] 10.3 更新受波及断言测试：`workspace-overlay` / `thread-chat-topbar` / `message-artifacts` / `artifact-drawer-copy` / `artifact-drawer-css` / `project-panel-workspace-state` / `normalized-client-store`
+- [x] 10.4 手动验收清单：双开层叠与提升、Esc 逐层、focus 归还三回落、拖拽持久化与复位、位置感知侧向、窄屏降级
+- [x] 10.5 `openspec validate split-project-artifacts-drawers --strict` 通过
+
+## 11. 宽度默认值与窄屏断点调整
+
+- [x] 11.1 Artifacts Drawer 无持久化覆盖时默认宽度改为与 Project Drawer 相同的 520px，保留拖拽与历史宽度
+- [x] 11.2 窄屏切换断点改为 960px，并补 959/960px 边界测试
+- [x] 11.3 更新宽度相关回归测试并通过 typecheck、lint 与 OpenSpec strict validate

From a344b722d853675bc3b47a7beac08a997fbd1d74 Mon Sep 17 00:00:00 2001
From: zilin <276161014@qq.com>
Date: Thu, 3 Sep 2026 16:48:21 +0800
Subject: [PATCH 2/2] chore: share project taste

Co-authored-by: CommandCodeBot <noreply@commandcode.ai>
---
 .commandcode/taste/taste.md       |  2 ++
 .commandcode/taste/taste/taste.md | 11 +++++++++++
 2 files changed, 13 insertions(+)
 create mode 100644 .commandcode/taste/taste.md
 create mode 100644 .commandcode/taste/taste/taste.md

diff --git a/.commandcode/taste/taste.md b/.commandcode/taste/taste.md
new file mode 100644
index 00000000..1e0e8821
--- /dev/null
+++ b/.commandcode/taste/taste.md
@@ -0,0 +1,2 @@
+# Taste
+See [taste/taste.md](taste/taste.md)
diff --git a/.commandcode/taste/taste/taste.md b/.commandcode/taste/taste/taste.md
new file mode 100644
index 00000000..89bd6c3b
--- /dev/null
+++ b/.commandcode/taste/taste/taste.md
@@ -0,0 +1,11 @@
+# Taste
+- Communicates in Simplified Chinese with English technical terms mixed in; respond in Chinese. Confidence: 0.95
+- Answers numbered design questions point-by-point with terse, decision-oriented replies; comfortable being presented explicit options and trade-offs to pick from. Confidence: 0.7
+- Plan-gated: wants a written pre-proposal/design draft to review and approve before implementation begins ("你先把预方案给我看下"). Confidence: 0.85
+- Uses the codex CLI (@codex / `codex exec`) as an independent second reviewer for design documents before proceeding. Confidence: 0.8
+- Expects proposals grounded in the actual codebase — inspect how existing implementations handle a concern (e.g., Esc/focus in existing popups) before designing the new one. Confidence: 0.75
+- The thread-chatbot project captures design changes as OpenSpec change proposals (proposal + design + spec deltas via `openspec` CLI); UI changes that conflict with existing specs must rewrite those requirements as deltas. Confidence: 0.7
+- Non-intrusive UI is a core principle ("不干扰"): panels/drawers must avoid covering what the user is currently reading or just clicked — e.g., pick drawer side based on the click position. Confidence: 0.8
+- Prefers one adaptive mechanism that scales gracefully across the few-to-many spectrum (progressive disclosure) over separate fixed layouts for different scales. Confidence: 0.75
+- Prefers reusing existing patterns in the codebase and extracting shared components/abstractions ("或许可以把组件抽出来") over inventing parallel new ones. Confidence: 0.8
+- Cleans up legacy naming debt and dead code within the same refactor rather than deferring ("一起改掉"). Confidence: 0.75