feat: 优化项目 Agent 工作区布局

增加四阶段进度、项目上下文侧栏和更清晰的执行卡片层级，同时保留现有流式事件接收、确认与恢复流程。

web-ui/src/pages/ProjectPage.test.ts

@@ -66,22 +66,34 @@ const enabledModels = [
   { id: 'model-c', name: '停用模型', modelId: 'model-c', enabled: false, defaultModel: false }
 ]
 
-function mountProject(runStatus: 'RUNNING' | 'INTERRUPTED') {
-  apiMock.mockImplementation(async (url: string, options?: RequestInit) => {
+interface ProjectFixtureOptions {
+  projectStatus?: 'MATERIAL_CHECK' | 'PLANNING' | 'WRITING' | 'DELIVERED' | 'FAILED' | 'ARCHIVED'
+  files?: Array<Record<string, unknown>>
+  artifacts?: Array<Record<string, unknown>>
+}
+
+/**
+ * 构造项目页的最小服务端数据集，允许每个测试只覆盖自己关心的业务状态。
+ * 默认仍保持原有“申报书编写中”场景，避免模型切换测试因视觉改造改变测试语义。
+ */
+function mountProject(runStatus: 'RUNNING' | 'INTERRUPTED', options: ProjectFixtureOptions = {}) {
+  apiMock.mockImplementation(async (url: string, requestOptions?: RequestInit) => {
     if (url === '/api/projects/project-1') {
       return {
         id: 'project-1', companyName: '测试企业', projectName: '申报项目', threadId: 'thread-1',
-        applicationLevel: 'ADVANCED', status: 'WRITING', createdAt: '', updatedAt: ''
+        applicationLevel: 'ADVANCED', status: options.projectStatus || 'WRITING',
+        createdAt: '2026-08-31T09:00:00Z', updatedAt: '2026-08-31T10:00:00Z'
       }
     }
-    if (url === '/api/projects/project-1/files' || url === '/api/projects/project-1/artifacts'
-        || url.startsWith('/api/projects/project-1/events')) return []
+    if (url === '/api/projects/project-1/files') return options.files || []
+    if (url === '/api/projects/project-1/artifacts') return options.artifacts || []
+    if (url.startsWith('/api/projects/project-1/events')) return []
     if (url === '/api/projects/project-1/plan') return null
     if (url === '/api/projects/project-1/runs/latest') {
       return { status: runStatus, modelConfigId: 'model-a' }
     }
     if (url === '/api/models') return enabledModels
-    if (options?.method === 'POST') return { status: 'RUNNING' }
+    if (requestOptions?.method === 'POST') return { status: 'RUNNING' }
     throw new Error(`未处理的测试请求：${url}`)
   })
 
@@ -137,3 +149,38 @@ describe('ProjectPage 模型切换', () => {
     })
   })
 })
+
+describe('ProjectPage 项目工作区', () => {
+  beforeEach(() => {
+    apiMock.mockReset()
+  })
+
+  it('根据项目状态展示四阶段进度，并在右侧汇总模型、材料和生成文件', async () => {
+    const wrapper = mountProject('RUNNING', {
+      projectStatus: 'WRITING',
+      files: [
+        { id: 'file-1', name: '企业营业执照.pdf', relativePath: '企业营业执照.pdf', extension: 'pdf', sizeBytes: 1024, status: 'READY', createdAt: '' },
+        { id: 'file-2', name: '财务报表.xlsx', relativePath: '财务报表.xlsx', extension: 'xlsx', sizeBytes: 2048, status: 'READY', createdAt: '' }
+      ],
+      artifacts: [
+        { id: 'artifact-1', name: '先进级申报书.docx', kind: 'DOCX', sizeBytes: 4096, metadataJson: '{}', publishedAt: '' }
+      ]
+    })
+    await flushPromises()
+
+    const stages = wrapper.findAll('.project-stage')
+    expect(stages).toHaveLength(4)
+    expect(stages.slice(0, 2).every(stage => stage.classes().includes('is-complete'))).toBe(true)
+    expect(stages[2]!.text()).toContain('申报书编写')
+    expect(stages[2]!.attributes('aria-current')).toBe('step')
+
+    const context = wrapper.get('.project-context-panel')
+    expect(context.text()).toContain('当前模型')
+    expect(context.text()).toContain('当前模型 · model-a')
+    expect(context.text()).toContain('2 个文件')
+    expect(context.text()).toContain('企业营业执照.pdf')
+    expect(context.text()).toContain('1 个文件')
+    expect(context.text()).toContain('先进级申报书.docx')
+    expect(context.get('a').attributes('href')).toBe('/api/artifacts/artifact-1/download')
+  })
+})

web-ui/src/pages/ProjectPage.vue

@@ -10,6 +10,21 @@ import { api, streamEvents, type AgentEvent, type Artifact, type PlanView, type
 import { cacheEvents, deleteCachedEvents, readCachedEvents } from '../eventCache'
 import { appendUniqueEvents } from '../eventUtils'
 
+interface ModelOption {
+  id: string
+  name: string
+  modelId: string
+  enabled: boolean
+  defaultModel: boolean
+}
+
+const projectStageDefinitions = [
+  { key: 'materials', label: '材料检查', description: '核验企业材料' },
+  { key: 'planning', label: '规划确认', description: '确认建设规划' },
+  { key: 'writing', label: '申报书编写', description: '生成并校验内容' },
+  { key: 'delivery', label: '交付', description: '下载最终文件' }
+] as const
+
 const route = useRoute()
 const router = useRouter()
 const emit = defineEmits<{ 'projects-changed': [] }>()
@@ -32,7 +47,8 @@ const modelPickerVisible = ref(false)
 const modelPickerLoading = ref(false)
 const modelPickerMode = ref<'resume' | 'switch'>('resume')
 const selectedModelConfigId = ref('')
-const selectableModels = ref<Array<{ id: string; name: string; modelId: string; enabled: boolean; defaultModel: boolean }>>([])
+const modelCatalog = ref<ModelOption[]>([])
+const selectableModels = ref<ModelOption[]>([])
 let stopStream: (() => void) | null = null
 let loadVersion = 0
 const folderInput = ref<HTMLInputElement | null>(null)
@@ -49,6 +65,42 @@ const statusLabel = computed(() => running.value ? '运行中' : interrupted.val
   MATERIAL_CHECK: '材料检验', PLANNING: '规划确认', WRITING: '运行中', DELIVERED: '已完成', FAILED: '执行失败', ARCHIVED: '已归档'
 }[project.value?.status || 'MATERIAL_CHECK']))
 
+/**
+ * 将后端业务状态投影为稳定的四阶段索引。失败状态通常发生在内容生成阶段，
+ * 因而仍停留在“申报书编写”，方便用户理解失败位置并继续使用原有重试入口。
+ */
+const currentStageIndex = computed(() => ({
+  MATERIAL_CHECK: 0,
+  PLANNING: 1,
+  WRITING: 2,
+  FAILED: 2,
+  DELIVERED: 3,
+  ARCHIVED: 3
+}[project.value?.status || 'MATERIAL_CHECK']))
+
+/** 为阶段条补充完成、当前和待开始状态；这里只改变展示，不参与后端流程判断。 */
+const projectStages = computed(() => projectStageDefinitions.map((stage, index) => ({
+  ...stage,
+  state: project.value?.status === 'DELIVERED' || project.value?.status === 'ARCHIVED'
+    ? 'complete'
+    : index < currentStageIndex.value
+      ? 'complete'
+      : index === currentStageIndex.value ? 'current' : 'upcoming'
+})))
+
+const currentStageLabel = computed(() => projectStageDefinitions[currentStageIndex.value]?.label || '材料检查')
+const currentModelLabel = computed(() => {
+  const model = modelCatalog.value.find(item => item.id === currentModelConfigId.value)
+  if (model) return `${model.name} · ${model.modelId}`
+  return currentModelConfigId.value ? '已绑定运行模型' : '尚未选择'
+})
+const updatedAtLabel = computed(() => {
+  const updatedAt = project.value?.updatedAt
+  if (!updatedAt) return '--'
+  const value = new Date(updatedAt)
+  return Number.isNaN(value.getTime()) ? '--' : value.toLocaleString('zh-CN', { hour12: false })
+})
+
 async function load(id: string) {
   const version = ++loadVersion
   historyLoading.value = true
@@ -58,12 +110,14 @@ async function load(id: string) {
   events.value = []
   try {
     const cached = await readCachedEvents(id).catch(() => [])
-    const [loadedProject, loadedFiles, loadedArtifacts, loadedPlan, latest] = await Promise.all([
+    const [loadedProject, loadedFiles, loadedArtifacts, loadedPlan, latest, loadedModels] = await Promise.all([
       api<Project>(`/api/projects/${id}`),
       api<ProjectFile[]>(`/api/projects/${id}/files`),
       api<Artifact[]>(`/api/projects/${id}/artifacts`),
       api<PlanView | null>(`/api/projects/${id}/plan`),
-      api<{ status: string; modelConfigId?: string; pendingInterrupt?: string } | null>(`/api/projects/${id}/runs/latest`)
+      api<{ status: string; modelConfigId?: string; pendingInterrupt?: string } | null>(`/api/projects/${id}/runs/latest`),
+      // 模型摘要只服务于右侧信息栏；加载失败不能阻断项目主体和历史事件恢复。
+      api<ModelOption[]>('/api/models').catch(() => [])
     ])
     const loadedEvents = await fetchMissingEvents(id, cached)
     if (version !== loadVersion || id !== projectId.value) return
@@ -74,6 +128,7 @@ async function load(id: string) {
     events.value = loadedEvents
     runStatus.value = latest?.status || ''
     currentModelConfigId.value = latest?.modelConfigId || ''
+    modelCatalog.value = loadedModels
     pendingAsk.value = parseAsk(latest?.pendingInterrupt)
     startStream(id, version)
   } finally {
@@ -252,7 +307,8 @@ async function openModelPicker(mode: 'resume' | 'switch') {
   modelPickerMode.value = mode
   modelPickerLoading.value = true
   try {
-    const models = await api<Array<{ id: string; name: string; modelId: string; enabled: boolean; defaultModel: boolean }>>('/api/models')
+    const models = await api<ModelOption[]>('/api/models')
+    modelCatalog.value = models
     selectableModels.value = models.filter(model => model.enabled)
     if (!selectableModels.value.length) {
       ElMessage.error('没有可用模型，请先启用模型配置')
@@ -441,51 +497,107 @@ onBeforeUnmount(() => {
       </template>
     </el-dialog>
 
-    <div class="work-scroll">
-      <section v-if="historyLoading && !events.length" class="history-loading" aria-live="polite">加载记录</section>
-      <section v-else-if="!events.length" class="material-start">
-        <h2>企业材料</h2>
-        <el-upload drag multiple :show-file-list="false" :http-request="upload" class="upload-box">
-          <el-icon><UploadFilled /></el-icon>
-          <p>拖入企业材料，或点击上传</p>
-          <small>支持 PDF、DOCX、XLSX、PPTX、图片</small>
-        </el-upload>
-        <div class="folder-upload">
-          <el-button :loading="folderUploading" @click="folderInput?.click()">上传文件夹</el-button>
-          <input ref="folderInput" type="file" multiple webkitdirectory aria-label="上传文件夹" @change="uploadFolder" />
-        </div>
-        <div v-if="files.length" class="file-chips">
-          <span v-for="file in files.slice(0, 12)" :key="file.id" :title="file.relativePath"><Document />{{ file.name }}</span>
-          <small v-if="files.length > 12">共 {{ files.length }} 个文件</small>
-        </div>
-        <el-button type="primary" size="large" :loading="loading" :disabled="folderUploading" @click="startCheck">开始材料检验</el-button>
-      </section>
+    <div class="project-workspace">
+      <main class="workspace-main">
+        <ol class="project-stage-bar" aria-label="项目执行阶段">
+          <li
+            v-for="(stage, index) in projectStages"
+            :key="stage.key"
+            class="project-stage"
+            :class="`is-${stage.state}`"
+            :aria-current="stage.state === 'current' ? 'step' : undefined"
+          >
+            <span class="stage-marker" aria-hidden="true">{{ stage.state === 'complete' ? '✓' : index + 1 }}</span>
+            <span class="stage-copy"><strong>{{ stage.label }}</strong><small>{{ stage.description }}</small></span>
+          </li>
+        </ol>
 
-      <AgentTimeline v-if="events.length" :events="events" :running="running" :project-id="projectId" />
-      <MaterialAskCard
-        v-if="waitingMaterials"
-        :ask="pendingAsk as any"
-        :loading="loading"
-        :upload-file="uploadFile"
-        @confirm="confirmMaterials"
-      />
-      <PlanCard
-        v-if="waitingPlan"
-        :plan-id="plan!.id"
-        :plan="plan!.plan"
-        :loading="loading"
-        @confirm="confirmPlan"
-      />
+        <div class="work-scroll">
+          <section v-if="historyLoading && !events.length" class="history-loading" aria-live="polite">加载记录</section>
+          <section v-else-if="!events.length" class="material-start">
+            <h2>企业材料</h2>
+            <el-upload drag multiple :show-file-list="false" :http-request="upload" class="upload-box">
+              <el-icon><UploadFilled /></el-icon>
+              <p>拖入企业材料，或点击上传</p>
+              <small>支持 PDF、DOCX、XLSX、PPTX、图片</small>
+            </el-upload>
+            <div class="folder-upload">
+              <el-button :loading="folderUploading" @click="folderInput?.click()">上传文件夹</el-button>
+              <input ref="folderInput" type="file" multiple webkitdirectory aria-label="上传文件夹" @change="uploadFolder" />
+            </div>
+            <div v-if="files.length" class="file-chips">
+              <span v-for="file in files.slice(0, 12)" :key="file.id" :title="file.relativePath"><Document />{{ file.name }}</span>
+              <small v-if="files.length > 12">共 {{ files.length }} 个文件</small>
+            </div>
+            <el-button type="primary" size="large" :loading="loading" :disabled="folderUploading" @click="startCheck">开始材料检验</el-button>
+          </section>
 
-      <section v-if="artifacts.length" class="artifact-card">
-        <div v-for="artifact in artifacts" :key="artifact.id" class="artifact-row">
-          <Document />
-          <div><strong>{{ artifact.name }}</strong><small>{{ Math.ceil(artifact.sizeBytes / 1024) }} KB</small></div>
-          <a :href="`/api/artifacts/${artifact.id}/download`">下载</a>
+          <!-- AgentTimeline 继续消费原始流式事件，视觉布局不会替换或截断事件内容。 -->
+          <AgentTimeline v-if="events.length" :events="events" :running="running" :project-id="projectId" />
+          <MaterialAskCard
+            v-if="waitingMaterials"
+            :ask="pendingAsk as any"
+            :loading="loading"
+            :upload-file="uploadFile"
+            @confirm="confirmMaterials"
+          />
+          <PlanCard
+            v-if="waitingPlan"
+            :plan-id="plan!.id"
+            :plan="plan!.plan"
+            :loading="loading"
+            @confirm="confirmPlan"
+          />
+
+          <section v-if="artifacts.length" class="artifact-card">
+            <div v-for="artifact in artifacts" :key="artifact.id" class="artifact-row">
+              <Document />
+              <div><strong>{{ artifact.name }}</strong><small>{{ Math.ceil(artifact.sizeBytes / 1024) }} KB</small></div>
+              <a :href="`/api/artifacts/${artifact.id}/download`">下载</a>
+            </div>
+          </section>
+          <el-button v-if="project.status === 'FAILED' && !running" class="retry-button" :loading="loading" @click="retry">重新运行</el-button>
+          <button v-if="streamError" class="stream-error" @click="load(projectId)">连接中断，点击重连</button>
         </div>
-      </section>
-      <el-button v-if="project.status === 'FAILED' && !running" class="retry-button" :loading="loading" @click="retry">重新运行</el-button>
-      <button v-if="streamError" class="stream-error" @click="load(projectId)">连接中断，点击重连</button>
+      </main>
+
+      <aside class="project-context-panel" aria-label="项目上下文">
+        <section class="context-card stage-context-card">
+          <h2>当前阶段</h2>
+          <div class="context-stage-summary">
+            <span class="context-stage-index">{{ currentStageIndex + 1 }}</span>
+            <div><strong>{{ currentStageLabel }}</strong><small>{{ statusLabel }}</small></div>
+          </div>
+          <dl class="context-definition-list">
+            <div><dt>最近更新</dt><dd>{{ updatedAtLabel }}</dd></div>
+          </dl>
+        </section>
+
+        <section class="context-card">
+          <div class="context-card-heading"><h2>当前模型</h2><span v-if="running" class="context-status">使用中</span></div>
+          <strong class="current-model-name">{{ currentModelLabel }}</strong>
+        </section>
+
+        <section class="context-card">
+          <div class="context-card-heading"><h2>企业材料</h2><span>{{ files.length }} 个文件</span></div>
+          <ul v-if="files.length" class="context-file-list">
+            <li v-for="file in files.slice(0, 4)" :key="file.id"><Document /><span :title="file.relativePath">{{ file.name }}</span></li>
+          </ul>
+          <p v-else class="context-empty">尚未上传材料</p>
+          <small v-if="files.length > 4" class="context-more">另有 {{ files.length - 4 }} 个文件</small>
+        </section>
+
+        <section class="context-card">
+          <div class="context-card-heading"><h2>生成文件</h2><span>{{ artifacts.length }} 个文件</span></div>
+          <ul v-if="artifacts.length" class="context-file-list artifact-context-list">
+            <li v-for="artifact in artifacts.slice(0, 3)" :key="artifact.id">
+              <Document />
+              <a :href="`/api/artifacts/${artifact.id}/download`" :title="artifact.name">{{ artifact.name }}</a>
+            </li>
+          </ul>
+          <p v-else class="context-empty">完成后将在这里显示交付物</p>
+        </section>
+      </aside>
     </div>
     <button v-if="showBackToBottom" class="back-to-bottom" aria-label="回到底部" @click="scrollToBottom">↓</button>
   </section>

web-ui/src/styles.css

@@ -1,13 +1,15 @@
 :root {
   font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
   color: #111827;
-  background: #fff;
+  background: #f6f7f9;
   font-synthesis: none;
-  --blue: #0f5df5;
-  --blue-soft: #f2f7ff;
+  --blue: #1769e8;
+  --blue-soft: #eef5ff;
   --muted: #667085;
-  --line: #e8edf5;
+  --line: #e3e8ef;
   --green: #087d41;
+  --surface: #fff;
+  --canvas: #f6f7f9;
 }
 
 * { box-sizing: border-box; }
@@ -15,16 +17,16 @@ body { margin: 0; min-width: 0; min-height: 100vh; }
 button, input, textarea { font: inherit; }
 a { color: inherit; text-decoration: none; }
 
-.app-shell { min-height: 100vh; display: flex; background: #fff; }
-.rail { width: 84px; flex: 0 0 84px; height: 100vh; position: sticky; top: 0; border-right: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; padding: 20px 10px; gap: 18px; }
+.app-shell { min-height: 100vh; display: flex; background: var(--canvas); }
+.rail { width: 76px; flex: 0 0 76px; height: 100vh; position: sticky; top: 0; border-right: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; padding: 20px 8px; gap: 16px; background: var(--surface); }
 .brand { width: 46px; height: 46px; border-radius: 9px; background: var(--blue); color: #fff; display: grid; place-items: center; font-weight: 700; }
 .brand svg { width: 24px; }
-.rail a { width: 64px; height: 66px; border-radius: 9px; color: #405170; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; font-size: 15px; }
+.rail a { width: 60px; height: 62px; border-radius: 8px; color: #526078; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; font-size: 14px; }
 .rail a svg { width: 24px; height: 24px; }
 .rail a.active { background: var(--blue); color: #fff; }
 .rail .brand + a { margin-top: 6px; }
 
-.project-list { width: 276px; flex: 0 0 276px; height: 100vh; position: sticky; top: 0; overflow-y: auto; border-right: 1px solid var(--line); padding: 24px 16px; background: #fff; }
+.project-list { width: 264px; flex: 0 0 264px; height: 100vh; position: sticky; top: 0; overflow-y: auto; border-right: 1px solid var(--line); padding: 24px 14px; background: var(--surface); }
 .aside-title { display: flex; align-items: center; justify-content: space-between; padding: 0 12px; }
 .aside-title h2 { font-size: 20px; margin: 0; }
 .icon-button { width: 32px; height: 32px; border: 1px solid #9aa8bd; border-radius: 50%; background: #fff; color: #395277; font-size: 23px; line-height: 27px; cursor: pointer; }
@@ -34,16 +36,53 @@ a { color: inherit; text-decoration: none; }
 .project-item time { color: #697794; font-size: 13px; }
 .project-item.selected { background: #edf4ff; color: var(--blue); }
 .aside-empty { padding: 20px 12px; color: #98a2b3; }
-.main-view { min-width: 0; flex: 1; }
+.main-view { min-width: 0; flex: 1; background: var(--surface); }
 
-.project-page { min-height: 100vh; display: flex; flex-direction: column; }
-.page-header { height: 80px; flex: 0 0 80px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 32px; background: rgba(255,255,255,.95); position: sticky; top: 0; z-index: 3; }
+.project-page { min-height: 100vh; display: flex; flex-direction: column; background: var(--canvas); }
+.page-header { height: 72px; flex: 0 0 72px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 28px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.96); position: sticky; top: 0; z-index: 3; }
 .page-heading, .run-actions { display: flex; align-items: center; gap: 12px; }
-.page-header h1 { margin: 0; font-size: 25px; letter-spacing: -.02em; }
-.tag { display: inline-flex; align-items: center; height: 30px; padding: 0 11px; border: 1px solid #cfd7e4; border-radius: 6px; color: #52617b; font-size: 14px; font-weight: 500; white-space: nowrap; }
+.page-header h1 { margin: 0; font-size: 24px; letter-spacing: -.02em; }
+.tag { display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border: 1px solid #cfd7e4; border-radius: 6px; color: #52617b; font-size: 13px; font-weight: 500; white-space: nowrap; }
 .tag.blue { color: var(--blue); border-color: #9dbdff; }
 .tag.green { color: var(--green); border-color: #9be0bd; }
-.work-scroll { width: min(920px, calc(100% - 64px)); margin: 0 auto; padding: 32px 0 72px; }
+.project-workspace { width: min(1280px, 100%); margin: 0 auto; padding: 24px; display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 24px; align-items: start; }
+.workspace-main { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); }
+.project-stage-bar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 20px 24px; border-bottom: 1px solid var(--line); list-style: none; }
+.project-stage { min-width: 0; position: relative; display: flex; align-items: center; gap: 10px; color: #8a94a6; }
+.project-stage:not(:last-child)::after { content: ""; height: 1px; position: absolute; top: 15px; left: 42px; right: 12px; background: #dce2eb; }
+.project-stage.is-complete:not(:last-child)::after { background: #8fb6f4; }
+.stage-marker { width: 30px; height: 30px; flex: 0 0 30px; position: relative; z-index: 1; display: grid; place-items: center; border: 1px solid #cfd7e4; border-radius: 50%; background: #f8fafc; color: #68758a; font-size: 13px; font-weight: 700; }
+.project-stage.is-complete .stage-marker { border-color: #b8e0cc; background: #e9f7f0; color: var(--green); }
+.project-stage.is-current .stage-marker { border-color: var(--blue); background: var(--blue); color: #fff; }
+.stage-copy { min-width: 0; position: relative; z-index: 1; display: flex; flex-direction: column; gap: 3px; padding-right: 10px; background: var(--surface); }
+.stage-copy strong { overflow: hidden; color: #4f5d73; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
+.stage-copy small { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
+.project-stage.is-current .stage-copy strong { color: #172033; }
+.project-stage.is-complete .stage-copy strong { color: #344054; }
+.work-scroll { width: min(900px, calc(100% - 48px)); margin: 0 auto; padding: 28px 0 72px; }
+.project-context-panel { min-width: 0; position: sticky; top: 96px; display: grid; gap: 12px; }
+.context-card { padding: 18px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
+.context-card h2 { margin: 0; color: #253047; font-size: 15px; }
+.context-card-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
+.context-card-heading > span, .context-status { color: #768399; font-size: 12px; white-space: nowrap; }
+.context-status { padding: 3px 7px; border-radius: 4px; background: #e9f7f0; color: var(--green); }
+.context-stage-summary { display: flex; align-items: center; gap: 10px; margin-top: 16px; }
+.context-stage-index { width: 28px; height: 28px; flex: 0 0 28px; display: grid; place-items: center; border-radius: 50%; background: var(--blue); color: #fff; font-size: 13px; font-weight: 700; }
+.context-stage-summary > div { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
+.context-stage-summary strong { color: #202b3f; font-size: 14px; }
+.context-stage-summary small { color: var(--blue); font-size: 12px; }
+.context-definition-list { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--line); }
+.context-definition-list > div { display: flex; justify-content: space-between; gap: 12px; color: #748096; font-size: 12px; }
+.context-definition-list dt, .context-definition-list dd { margin: 0; }
+.context-definition-list dd { overflow: hidden; color: #47546a; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
+.current-model-name { display: block; overflow: hidden; color: #344054; font-size: 13px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
+.context-file-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
+.context-file-list li { min-width: 0; display: flex; align-items: center; gap: 8px; color: #536078; font-size: 13px; }
+.context-file-list svg { width: 16px; flex: 0 0 16px; color: #728099; }
+.context-file-list span, .context-file-list a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.artifact-context-list a { color: var(--blue); }
+.context-empty { margin: 0; color: #8a94a6; font-size: 13px; line-height: 1.6; }
+.context-more { display: block; margin-top: 12px; color: #768399; }
 .history-loading { margin-top: 24vh; text-align: center; color: var(--muted); }
 
 .material-start { width: 640px; max-width: 100%; margin: 10vh auto 0; }
@@ -59,11 +98,11 @@ a { color: inherit; text-decoration: none; }
 .file-chips svg { width: 16px; color: var(--blue); }
 .file-chips > small { align-self: center; color: var(--muted); }
 
-.timeline { display: flex; flex-direction: column; gap: 12px; }
+.timeline { display: flex; flex-direction: column; gap: 10px; }
 .load-earlier { align-self: center; border: 0; background: transparent; color: var(--muted); cursor: pointer; padding: 8px 16px; }
 .load-earlier:hover, .load-earlier:focus-visible { color: var(--primary); }
 .flow-row { min-width: 0; content-visibility: auto; contain-intrinsic-size: 54px; }
-.flow-message { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; margin: 0; }
+.flow-message { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; margin: 0; padding: 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
 .flow-message > .flow-content { grid-column: 2; }
 .flow-tool, .flow-reasoning, .flow-notice { position: relative; padding-left: 54px; }
 .agent-avatar { width: 38px; height: 38px; border-radius: 11px; background: #edf4ff; color: var(--blue); display: grid; place-items: center; }
@@ -89,7 +128,9 @@ a { color: inherit; text-decoration: none; }
 .agent-markdown a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
 .agent-markdown table { display: block; max-width: 100%; margin: 12px 0; overflow-x: auto; border-collapse: collapse; }
 .agent-markdown th, .agent-markdown td { padding: 7px 10px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
-.activity-row { color: #778195; font-size: 13px; border: 0; }
+.activity-row { color: #6f7b90; font-size: 13px; border: 0; }
+.flow-tool .activity-row { padding: 9px 12px; border: 1px solid var(--line); border-radius: 7px; background: #fafbfc; }
+.flow-tool .activity-row summary { width: 100%; }
 .activity-row summary { width: max-content; max-width: 100%; display: flex; align-items: center; gap: 8px; padding: 3px 0; cursor: pointer; list-style: none; }
 .activity-row summary::-webkit-details-marker { display: none; }
 .activity-row summary::after { content: "›"; margin-left: 2px; color: #a1a9b7; transition: transform .16s ease; }
@@ -107,15 +148,15 @@ a { color: inherit; text-decoration: none; }
 .finalizing-row span { color: transparent; background: linear-gradient(90deg, #8d96a6 25%, #3f83ed 50%, #8d96a6 75%); background-size: 220% 100%; background-clip: text; animation: activity-shimmer 1.7s linear infinite; }
 @keyframes activity-shimmer { to { background-position: -220% 0; } }
 @media (prefers-reduced-motion: reduce) { .activity-row.active summary span, .finalizing-row span { color: inherit; background: none; animation: none; } }
-.notice-row { display: flex; align-items: center; gap: 9px; padding: 12px 14px; border-radius: 8px; background: #f6f9ff; }
+.notice-row { display: flex; align-items: center; gap: 9px; padding: 12px 14px; border: 1px solid #dce5f2; border-radius: 8px; background: #f6f9ff; }
 .notice-row svg { width: 18px; }
 .notice-row.success { color: #087d41; }
 .notice-row.error { color: #c53131; background: #fff7f7; }
 .notice-row.info { color: #45658f; background: #f7f9fc; }
 .pending { opacity: .9; }
 
-.ask-card { width: 700px; max-width: calc(100% - 60px); margin: 28px 0 0 60px; padding: 22px; border-radius: 9px; background: #f6f9ff; box-shadow: inset 0 0 0 1px #d7e4fb; }
-.ask-card h3 { color: var(--blue); margin: 0 0 5px; font-size: 20px; }
+.ask-card { width: 700px; max-width: calc(100% - 60px); margin: 28px 0 0 60px; padding: 22px; border-radius: 9px; background: #fffaf2; box-shadow: inset 0 0 0 1px #f1ca8b; }
+.ask-card h3 { color: #28354a; margin: 0 0 5px; font-size: 19px; }
 .ask-card > p { color: #697794; margin: 0 0 16px; font-size: 14px; }
 .plan-fields { overflow: hidden; border-radius: 6px; background: #fff; box-shadow: inset 0 0 0 1px #dce4ef; }
 .plan-fields label { display: grid; grid-template-columns: 150px 1fr; align-items: center; min-height: 52px; border-bottom: 1px solid var(--line); }
@@ -127,7 +168,7 @@ a { color: inherit; text-decoration: none; }
 .plan-summary { margin: 12px 0 16px; padding: 11px 14px; border-radius: 6px; color: #4b6188; background: #eaf2ff; }
 .plan-note { display: block; margin-bottom: 16px; }
 .plan-note > span { display: block; margin-bottom: 8px; color: #53617b; font-size: 14px; }
-.ask-actions { display: flex; gap: 8px; }
+.ask-actions { display: flex; justify-content: flex-end; gap: 8px; }
 .material-items { margin-bottom: 16px; overflow: hidden; border-radius: 7px; background: #fff; box-shadow: inset 0 0 0 1px #dce4ef; }
 .material-item { min-height: 72px; display: grid; grid-template-columns: minmax(180px, 1fr) 190px 58px; gap: 10px; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--line); }
 .material-item:last-child { border-bottom: 0; }
@@ -141,7 +182,7 @@ a { color: inherit; text-decoration: none; }
 .material-clear { margin: 0; padding: 16px; color: var(--green); }
 .material-more { width: 100%; padding: 11px; border: 0; border-top: 1px solid var(--line); background: #fff; color: var(--blue); cursor: pointer; }
 .material-upload:focus-within, .material-more:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
-.artifact-card { margin: 28px 0 min(28vh, 280px) 60px; border-radius: 8px; overflow: hidden; box-shadow: inset 0 0 0 1px #dce4ef; }
+.artifact-card { margin: 28px 0 72px 60px; border-radius: 8px; overflow: hidden; background: var(--surface); box-shadow: inset 0 0 0 1px #dce4ef; }
 .artifact-row { display: grid; grid-template-columns: 32px 1fr auto; gap: 12px; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--line); }
 .artifact-row:last-child { border: 0; }
 .artifact-row > svg { width: 25px; color: var(--blue); }
@@ -222,8 +263,16 @@ a { color: inherit; text-decoration: none; }
 .el-input__wrapper, .el-textarea__inner { box-shadow: inset 0 0 0 1px #d9e0ea; }
 .el-dialog { border-radius: 12px; }
 
+@media (max-width: 1320px) {
+  .project-workspace { max-width: 960px; grid-template-columns: minmax(0, 1fr); }
+  .project-context-panel { display: none; }
+}
+
 @media (max-width: 1180px) {
   .project-list { width: 240px; flex-basis: 240px; }
+  .project-workspace { padding: 20px; }
+  .project-stage-bar { padding-right: 18px; padding-left: 18px; }
+  .stage-copy small { display: none; }
   .settings-page { padding-left: 28px; padding-right: 28px; }
   .settings-grid { grid-template-columns: 310px 1fr; }
   .skill-grid { grid-template-columns: 390px 1fr; }
@@ -236,6 +285,10 @@ a { color: inherit; text-decoration: none; }
   .rail { width: 64px; flex-basis: 64px; padding-left: 0; padding-right: 0; }
   .rail a { width: 52px; font-size: 12px; }
   .project-list { width: 190px; flex-basis: 190px; padding: 20px 10px; }
+  .project-workspace { padding: 12px; }
+  .workspace-main { border-radius: 7px; }
+  .project-stage-bar { grid-template-columns: repeat(4, minmax(112px, 1fr)); overflow-x: auto; padding: 16px; }
+  .project-stage:not(:last-child)::after { right: 8px; }
   .work-scroll { width: calc(100% - 32px); }
   .page-header { padding: 0 16px; }
   .page-header h1 { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 20px; }