1

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

docs/superpowers/plans/2026-08-08-frontend-dark-theme-sidebar-search-chat.md

@@ -0,0 +1,503 @@
+# Frontend 深色主题 + 会话搜索/分组 + 聊天收紧 Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** 把 frontend 页面调整为：石墨黑 + 蓝紫 accent 的深色主题、会话侧栏顶部"搜索会话"输入框、按 `今天 / 昨天 / 更早` 分组且"当前会话所在分组自动展开、其他折叠"、聊天模块气泡节奏收紧对齐 chat.png。本次仅修改本地代码，不做 git 推送。
+
+**Architecture:** 三个文件局部改动，不新增组件、不引入新依赖。`theme.scss` 替换 `:root` 变量值；`ConversationSidebar.vue` 在 header 与 scrollbar 之间插入搜索框，scrollbar 内部从一维列表改为分组结构，添加 `groupOf / parseTimestamp / sessionGroups / expandedGroups / syncExpandedWithCurrent` 等本地逻辑；`ChatWindow.vue` 仅调整气泡相关 SCSS。所有改动通过 `--fe-*` 变量串联，浅色主题不受影响。
+
+**Tech Stack:** Vue 3.5 + Composition API + Element Plus 2.13 + Sass（sass-embedded 1.97）。测试使用 Vitest（需在 Task 1 中确认是否已配置）。
+
+---
+
+## File Structure
+
+| 文件 | 操作 | 职责 |
+|---|---|---|
+| `src/views/frontend/styles/theme.scss` | 改 | 仅替换 `:root` 下 `--fe-*` 值；其它块保持原样 |
+| `src/views/frontend/components/ConversationSidebar.vue` | 改 | header 下新增搜索框；scrollbar 内分组渲染；新增本地状态/方法；新增分组标题样式 |
+| `src/views/frontend/components/ChatWindow.vue` | 改 | 仅 `<style scoped>` 内调整 `padding / margin-bottom / border-radius` |
+
+无新增文件；不新增组件抽象。
+
+---
+
+## Task 1: 摸底测试栈与现有测试位置
+
+**Files:**
+- Inspect: `package.json`, `vitest.config.*`, `tests/`、`src/**/*.test.{js,ts}`
+
+- [ ] **Step 1: 检查 package.json 是否声明了测试框架**
+
+```bash
+cd "D:/数科智联/项目/agent-frontend-web"
+grep -E "vitest|jest|@vue/test-utils" package.json
+```
+
+预期：很可能没有测试框架；如果 `npm ls vitest` 无输出，跳过 vitest 步骤（前端为视觉改动，以手动 dev 验证为主）。记录结论到 Task 1 末尾的"测试结论"。
+
+- [ ] **Step 2: 若无测试框架，标注结论并跳过所有 TDD 步骤**
+
+在执行 Task 2~4 时，把"Write the failing test / Run it to verify it fails"两步替换为"手动 dev 验证（启动 `npm run dev` 在浏览器查看）"。
+
+测试结论：当前仓库未配置前端单元测试；本次采用手动 dev 验证（步骤在 Task 5 统一列出）。
+
+---
+
+## Task 2: 替换 `theme.scss` 深色调色板
+
+**Files:**
+- Modify: `src/views/frontend/styles/theme.scss:3-46`（`:root` 块）
+
+- [ ] **Step 1: 替换 `:root` 变量值**
+
+将 `src/views/frontend/styles/theme.scss` 的 `:root { ... }` 块整体替换为以下内容（变量名不变，仅改值）：
+
+```scss
+:root {
+  // —— 基础色 ——
+  --fe-bg-base: #14171c;
+  --fe-bg-elevated: #1c1f24;
+  --fe-bg-overlay: #23272e;
+  --fe-bg-input: #2a2e35;
+  --fe-bg-hover: #1f2329;
+
+  // —— 边框 ——
+  --fe-border: #2c3138;
+  --fe-border-strong: #4a505a;
+
+  // —— 文本 ——
+  --fe-text-primary: #e4e6eb;
+  --fe-text-secondary: #9aa0a6;
+  --fe-text-muted: #6b7280;
+  --fe-text-inverse: #14171c;
+
+  // —— 品牌色 ——
+  --fe-accent: #6c8cff;
+  --fe-accent-hover: #8aa3ff;
+  --fe-accent-soft: rgba(108, 140, 255, 0.15);
+  --fe-danger: #f07178;
+  --fe-danger-soft: rgba(240, 113, 120, 0.1);
+  --fe-warning: #e0a050;
+  --fe-info: #6cc4d6;
+  --fe-info-soft: rgba(108, 196, 214, 0.1);
+  --fe-info-border: rgba(108, 196, 214, 0.4);
+  --fe-accent-border: rgba(108, 140, 255, 0.4);
+  --fe-danger-border: rgba(240, 113, 120, 0.4);
+
+  // —— 布局尺寸 ——
+  --fe-sidebar-width: 260px;
+  --fe-file-panel-width: 280px;
+  --fe-file-preview-width: 600px;
+
+  // —— 阴影 / 圆角 ——
+  --fe-radius-sm: 4px;
+  --fe-radius-md: 6px;
+  --fe-radius-lg: 12px;
+  --fe-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
+  --fe-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.55);
+  --fe-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.65);
+}
+```
+
+- [ ] **Step 2: 校验未触碰其它块**
+
+```bash
+cd "D:/数科智联/项目/agent-frontend-web"
+sed -n '47,90p' src/views/frontend/styles/theme.scss
+```
+
+预期：`body[data-fe-theme="light"]` 块保持 `body[data-fe-theme="light"] { --fe-bg-base: #ffffff; ... }` 原样输出。
+
+- [ ] **Step 3: 校验 `.frontend-container` 与浅色 el-* 块未改**
+
+```bash
+cd "D:/数科智联/项目/agent-frontend-web"
+grep -n "frontend-container" src/views/frontend/styles/theme.scss
+```
+
+预期：仍有两处 `.frontend-container`（不含 light 子选择器与 light 修饰），行号与改前一致。
+
+- [ ] **Step 4: 启动 dev，目测深色页面底色与 accent 是否变为石墨黑/蓝紫**
+
+```bash
+cd "D:/数科智联/项目/agent-frontend-web"
+npm run dev
+```
+
+打开 `/frontend` 路由，深色主题下容器底色变 `#14171c`、accent 高亮变 `#6c8cff`；切到浅色主题，颜色与之前完全一致。
+
+---
+
+## Task 3: `ConversationSidebar.vue` —— 模板新增搜索框 + 分组渲染
+
+**Files:**
+- Modify: `src/views/frontend/components/ConversationSidebar.vue:10-59`（模板）、`:372-`（.conversation-item 圆角）
+
+- [ ] **Step 1: 在 `sidebar-header` 之后插入搜索框**
+
+在 `<div class="sidebar-header">...</div>` 之后、`<el-scrollbar class="sidebar-scrollbar">` 之前，插入：
+
+```html
+<div class="sidebar-search">
+  <el-input
+    v-model="searchKeyword"
+    placeholder="搜索会话"
+    :prefix-icon="Search"
+    clearable
+  />
+</div>
+```
+
+- [ ] **Step 2: 把 scrollbar 内的列表改成分组渲染**
+
+将 `<div v-for="session in sessionList" ...>` 整段替换为：
+
+```html
+<template v-for="group in sessionGroups" :key="group.key">
+  <template v-if="group.items.length > 0">
+    <div class="group-header" @click="toggleGroup(group.key)">
+      <span class="group-title">{{ group.label }}</span>
+      <el-icon class="group-toggle">
+        <ArrowDown v-if="expandedGroups.has(group.key)" />
+        <ArrowRight v-else />
+      </el-icon>
+    </div>
+    <div v-show="expandedGroups.has(group.key)" class="group-items">
+      <div
+        v-for="session in group.items"
+        :key="session.sessionId"
+        class="conversation-item"
+        :class="{ active: currentSession?.sessionId === session.sessionId, 'has-new-message': session.hasNewMessage }"
+        @click="selectSession(session)"
+        @contextmenu.prevent="handleRightClick($event, session)"
+      >
+        <div class="conv-dot"></div>
+        <div class="conv-info">
+          <span class="conv-name">{{ session.title || session.name }}</span>
+          <span class="conv-time">{{ formatTimeAgo(session.updateTime) }}</span>
+        </div>
+        <div v-if="session.hasNewMessage" class="new-message-dot"></div>
+      </div>
+    </div>
+  </template>
+</template>
+```
+
+空列表提示 `<div v-if="!loading && sessionList.length === 0" class="empty-sessions">暂无会话</div>` 保持不变。
+
+- [ ] **Step 3: 把 `.conversation-item` 的固定 8px 圆角改为变量**
+
+在 `<style scoped lang="scss">` 中找到：
+
+```scss
+.conversation-item {
+  ...
+  border-radius: 8px;
+  ...
+}
+```
+
+将 `border-radius: 8px;` 改为 `border-radius: var(--fe-radius-md);`。
+
+- [ ] **Step 4: 在 `<style scoped lang="scss">` 内追加搜索框与分组样式**
+
+紧跟在 `.sidebar-header { ... }` 块之后追加：
+
+```scss
+.sidebar-search {
+  padding: 8px 12px 0;
+  :deep(.el-input__wrapper) {
+    background: var(--fe-bg-elevated);
+    box-shadow: 0 0 0 1px var(--fe-border) inset;
+    border-radius: var(--fe-radius-md);
+  }
+  :deep(.el-input__inner) {
+    color: var(--fe-text-primary);
+    &::placeholder { color: var(--fe-text-muted); }
+  }
+  :deep(.el-input__prefix .el-icon) { color: var(--fe-text-muted); }
+}
+
+.group-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 16px 6px;
+  cursor: pointer;
+  user-select: none;
+  .group-title {
+    font-size: 12px;
+    font-weight: 600;
+    color: var(--fe-accent);
+    letter-spacing: 0.5px;
+  }
+  .group-toggle {
+    color: var(--fe-text-secondary);
+    font-size: 12px;
+  }
+  &:hover .group-toggle { color: var(--fe-text-primary); }
+}
+
+.group-items { padding: 0 8px; }
+```
+
+- [ ] **Step 5: dev 验证（任务3）**
+
+启动 dev，进入 `/frontend`，目测：
+- header 下方出现搜索框；
+- 列表按 `今天 / 昨天 / 更早` 三段渲染；
+- 分组标题为蓝紫色，左侧 ▾/▸ 图标。
+
+---
+
+## Task 4: `ConversationSidebar.vue` —— 脚本新增分组逻辑
+
+**Files:**
+- Modify: `src/views/frontend/components/ConversationSidebar.vue:68-262`（script setup）
+
+- [ ] **Step 1: 扩展 icon 导入**
+
+将：
+
+```js
+import { DArrowLeft, DArrowRight, Refresh, Plus, Delete, Loading } from '@element-plus/icons-vue'
+```
+
+改为：
+
+```js
+import { DArrowLeft, DArrowRight, Refresh, Plus, Delete, Loading, Search, ArrowDown, ArrowRight } from '@element-plus/icons-vue'
+```
+
+- [ ] **Step 2: 扩展 import，引入 computed**
+
+将 `import { ref, onMounted, onUnmounted } from 'vue'` 改为 `import { ref, computed, onMounted, onUnmounted } from 'vue'`。
+
+- [ ] **Step 3: 新增 state 与 helper，放在 `currentSession` 之后**
+
+在 `const currentSession = ref(null)` 之后插入：
+
+```js
+// —— 搜索关键字（仅样式占位，本次不绑定行为） ——
+const searchKeyword = ref('')
+
+// —— 分组折叠状态：'today' | 'yesterday' | 'earlier' ——
+const expandedGroups = ref(new Set())
+
+function parseTimestamp(t) {
+  if (!t) return null
+  if (typeof t === 'number' && String(t).length === 13) return t
+  if (typeof t === 'number' || /^\d{14}$/.test(t)) {
+    const s = String(t)
+    return new Date(`${s.slice(0,4)}-${s.slice(4,6)}-${s.slice(6,8)}T${s.slice(8,10)}:${s.slice(10,12)}:${s.slice(12,14)}`).getTime()
+  }
+  if (typeof t === 'string' && t.includes(' ')) {
+    const iso = t.replace(' ', 'T').replace(/\.(\d+)?$/, '')
+    const ms = new Date(iso).getTime()
+    return Number.isNaN(ms) ? null : ms
+  }
+  const ms = new Date(t).getTime()
+  return Number.isNaN(ms) ? null : ms
+}
+
+function groupOf(session) {
+  const ts = parseTimestamp(session?.updateTime)
+  if (ts == null) {
+    console.warn('[ConversationSidebar] 无法解析会话时间', session)
+    return 'earlier'
+  }
+  const now = new Date()
+  const d = new Date(ts)
+  const sameDay = (a, b) =>
+    a.getFullYear() === b.getFullYear() &&
+    a.getMonth() === b.getMonth() &&
+    a.getDate() === b.getDate()
+  const yesterday = new Date(now); yesterday.setDate(now.getDate() - 1)
+  if (sameDay(d, now)) return 'today'
+  if (sameDay(d, yesterday)) return 'yesterday'
+  return 'earlier'
+}
+
+const sessionGroups = computed(() => {
+  const groups = { today: [], yesterday: [], earlier: [] }
+  for (const s of sessionList.value) {
+    groups[groupOf(s)].push(s)
+  }
+  return [
+    { key: 'today', label: '今天', items: groups.today },
+    { key: 'yesterday', label: '昨天', items: groups.yesterday },
+    { key: 'earlier', label: '更早', items: groups.earlier }
+  ]
+})
+
+function toggleGroup(key) {
+  const next = new Set(expandedGroups.value)
+  if (next.has(key)) next.delete(key)
+  else next.add(key)
+  expandedGroups.value = next
+}
+
+function syncExpandedWithCurrent() {
+  if (currentSession.value) {
+    expandedGroups.value = new Set([groupOf(currentSession.value)])
+  } else {
+    expandedGroups.value = new Set(['today'])
+  }
+}
+```
+
+- [ ] **Step 4: 在 `selectSession` 末尾追加 `syncExpandedWithCurrent()`**
+
+将：
+
+```js
+function selectSession(session) {
+  currentSession.value = session
+  emit('select', session)
+}
+```
+
+改为：
+
+```js
+function selectSession(session) {
+  currentSession.value = session
+  emit('select', session)
+  syncExpandedWithCurrent()
+}
+```
+
+- [ ] **Step 5: 在 `fetchSessions` 的 `finally` 中调用 `syncExpandedWithCurrent()`**
+
+将 `fetchSessions` 函数体中 `finally` 块改为：
+
+```js
+} finally {
+  // 强制最小 loading 时长，避免接口返回过快导致 icon 一闪而过
+  const elapsed = Date.now() - start
+  const remain = 300 - elapsed
+  if (remain > 0) await new Promise(resolve => setTimeout(resolve, remain))
+  loading.value = false
+  syncExpandedWithCurrent()
+  emit('ready')
+}
+```
+
+- [ ] **Step 6: 在 `handleDeleteSession` 删除条目后追加 `syncExpandedWithCurrent()`**
+
+找到：
+
+```js
+if (currentSession.value?.sessionId === session.sessionId) {
+  currentSession.value = null
+  emit('select', null)
+}
+```
+
+在它之后追加：
+
+```js
+syncExpandedWithCurrent()
+```
+
+- [ ] **Step 7: dev 验证（任务4）**
+
+启动 dev，进入 `/frontend`：
+- 列表加载完成后默认 `今天` 展开、昨天 / 更早折叠；
+- 点击任一会话 → 仅其所在分组展开；
+- 点击分组标题 → 切换展开 / 折叠。
+
+---
+
+## Task 5: `ChatWindow.vue` —— 气泡节奏收紧
+
+**Files:**
+- Modify: `src/views/frontend/components/ChatWindow.vue`（`<style scoped lang="scss">` 段）
+
+- [ ] **Step 1: 收紧容器与消息组**
+
+在 `<style scoped lang="scss">` 中定位 `.chat-window` 与 `.message-group`，将：
+
+```scss
+.chat-window {
+  ...
+  padding: 16px 20px;
+  ...
+}
+
+.message-group {
+  margin-bottom: 12px;
+  ...
+}
+```
+
+分别改为：
+
+```scss
+.chat-window {
+  ...
+  padding: 12px 16px;
+  ...
+}
+
+.message-group {
+  margin-bottom: 10px;
+  ...
+}
+```
+
+- [ ] **Step 2: 收紧气泡**
+
+定位 `.message-bubble`（user / assistant 共享样式），将 `padding: 10px 14px;` 改为 `padding: 9px 13px;`；将 `border-radius: 12px;` 改为 `border-radius: 10px;`。
+
+- [ ] **Step 3: dev 验证（任务5）**
+
+启动 dev，进入 `/frontend`，选择一个会话发消息，目测：
+- 用户 / 助手气泡圆角 10px；
+- 气泡内边距 9 / 13px；
+- 消息组间距 10px；
+- 整体节奏与 `chat.png` 一致；
+- 发送消息后流式追加仍自动滚到底。
+
+---
+
+## Task 6: 端到端冒烟清单（合并验证）
+
+**Files:** 无新增；仅执行 dev 自检。
+
+- [ ] **Step 1: 深色主题**
+
+进入 `/frontend` 默认深色：
+- 容器底色 `#14171c`、卡片背景 `#1c1f24`；
+- ChatHeader、ConversationSidebar、ChatWindow、InputArea 颜色一致；
+- accent 高亮 `#6c8cff`（搜索框聚焦边框、分组标题、新建会话图标等）。
+
+- [ ] **Step 2: 浅色主题未变**
+
+切到浅色主题：底色 `#ffffff`、accent `#1890ff`；与改动前完全一致。
+
+- [ ] **Step 3: 上下文 popover / 模型选择 / ElMessageBox**
+
+点击 ChatHeader 切换模型、点击 InputArea 右下角上下文指示器、删除会话触发确认弹窗：新深色系跟随；浅色下保持原样。
+
+- [ ] **Step 4: 侧栏分组 + 搜索框**
+
+- 列表加载默认 `今天` 展开；
+- 点击分组标题切换展开 / 折叠；
+- 选中任一会话 → 仅其所在分组展开；
+- 删除当前会话后折叠状态回退到 `今天`（或当前会话所在分组）；
+- 搜索框聚焦高亮、placeholder "搜索会话"、输入不改变列表；
+- 右键菜单仍可重命名 / 删除会话。
+
+- [ ] **Step 5: 聊天模块**
+
+- 用户 / 助手气泡圆角 10px、内边距 9/13px；
+- 消息组间距 10px；
+- 流式追加自动滚到底；
+- 上拉后向下箭头按钮仍可点击回到底部；
+- 处理详情折叠面板（thinking / tool）展开 / 折叠正常。
+
+- [ ] **Step 6: 不做 git 推送**
+
+本次仅修改本地文件，不运行 `git push` / `git commit`（如果用户希望记录变更，可手动提交）。

docs/superpowers/plans/2026-08-08-frontend-header-restructure.md

@@ -0,0 +1,542 @@
+# Frontend 顶部重排 + 搜索高亮 + 分组默认展开 Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** 把 ChatHeader 顶部右侧改为"清空 icon + 模型下拉 + 文件面板折叠 icon"；标题前加 agentName 首字圆形 icon；文件面板默认展开；侧栏搜索框聚焦高亮；分组默认全部展开。
+
+**Architecture:** 三个文件局部改动，不新增组件。ChatHeader 改为 props-driven（`modelOptions`、`modelValue`、`filePanelVisible`），通过 `update:modelValue` 与 `toggle-file-panel` 两个事件与父组件通讯。ConversationSidebar 调整 `syncExpandedWithCurrent` 默认行为并补充搜索框 `:focus` 样式。index.vue 默认 `filePanelVisible = true`、新增 `handleModelSelectChange` / `handleToggleFilePanel`、删除 `handleTabChange` 与 `setActiveTab` 调用。LlmModelModal 文件保留不引用。
+
+**Tech Stack:** Vue 3.5 + Composition API + Element Plus 2.13（`el-select` / `el-option` / `Fold` / `Expand` / `Delete` 图标）+ Sass（sass-embedded 1.97）。无前端测试框架，沿用手动 dev 验证（Task 5）。
+
+---
+
+## File Structure
+
+| 文件 | 操作 | 职责 |
+|---|---|---|
+| `src/views/frontend/components/ChatHeader.vue` | 改 | 模板重排（avatar / clear icon / model select / sidebar fold icon）；脚本替换（LlmModelModal 移除、新增 modelOptions 等 props、单一 update:modelValue 通道）；样式新增（.agent-avatar / .icon-btn / .model-select） |
+| `src/views/frontend/components/ConversationSidebar.vue` | 改 | `.sidebar-search` 追加 `:focus` 样式；`syncExpandedWithCurrent` 改为全部展开 |
+| `src/views/frontend/index.vue` | 改 | `filePanelVisible` 默认 `true`；删除 `handleTabChange`；`handleFilePanelClose` 中移除 `setActiveTab` 调用；新增 `modelSelectOptions` computed、`handleModelSelectChange`、`handleToggleFilePanel`；模板 ChatHeader props 与事件调整 |
+| `src/views/frontend/components/LlmModelModal.vue` | 保留 | 文件保留，未来如需"更多模型"入口再启用 |
+
+无新增文件；不新增组件抽象。
+
+---
+
+## Task 1: ChatHeader —— props 与事件契约改造
+
+**Files:**
+- Modify: `src/views/frontend/components/ChatHeader.vue:33-67`（`<script setup>` 段）
+
+- [ ] **Step 1: 替换 icon 导入**
+
+将：
+
+```js
+import { Cpu } from '@element-plus/icons-vue'
+import LlmModelModal from './LlmModelModal.vue'
+```
+
+改为：
+
+```js
+import { Delete, Fold, Expand } from '@element-plus/icons-vue'
+```
+
+- [ ] **Step 2: 删除 LlmModelModal 引用与 tab 状态**
+
+删除以下声明（出现在 `import` 之后、`defineProps` 之前）：
+
+```js
+const activeTab = ref('agent')
+const showModelModal = ref(false)
+```
+
+- [ ] **Step 3: 扩展 props**
+
+将：
+
+```js
+const props = defineProps({
+  agentName: {
+    type: String,
+    default: '请选择会话'
+  },
+  currentModel: {
+    type: Object,
+    default: null
+  }
+})
+```
+
+改为：
+
+```js
+const props = defineProps({
+  agentName: {
+    type: String,
+    default: '请选择会话'
+  },
+  currentModel: {
+    type: Object,
+    default: null
+  },
+  modelOptions: {
+    type: Array,
+    default: () => []
+  },
+  modelValue: {
+    type: String,
+    default: ''
+  },
+  filePanelVisible: {
+    type: Boolean,
+    default: true
+  }
+})
+```
+
+- [ ] **Step 4: 替换 emits**
+
+将：
+
+```js
+const emit = defineEmits(['tab-change', 'model-change', 'clear'])
+```
+
+改为：
+
+```js
+const emit = defineEmits(['clear', 'update:modelValue', 'toggle-file-panel'])
+```
+
+- [ ] **Step 5: 删除 tab/modal 相关函数、删除 expose，新增 `agentNameInitial` / `handleSelectChange` / `handleToggleClick`**
+
+将整个 `<script setup>` 中除 `defineProps` / `defineEmits` / icon 导入之外的所有函数（含 `handleTabClick` / `handleModelSelect` / `defineExpose` 块）替换为：
+
+```js
+const agentNameInitial = computed(() => {
+  const name = (props.agentName || '').trim()
+  if (!name) return '?'
+  // 中文取首字，英文取首字母
+  return [...name][0]
+})
+
+function handleSelectChange(value) {
+  emit('update:modelValue', value)
+}
+
+function handleToggleClick() {
+  emit('toggle-file-panel')
+}
+```
+
+并在 `<script setup>` 顶部补充 `import { computed } from 'vue'`（如果尚未导入）。
+
+---
+
+## Task 2: ChatHeader —— 模板替换
+
+**Files:**
+- Modify: `src/views/frontend/components/ChatHeader.vue:0-31`（`<template>` 段）
+
+- [ ] **Step 1: 整段替换 `<template>` 内容**
+
+将 `<template>` 块从：
+
+```vue
+<template>
+  <div class="chat-header">
+    <div class="header-left">
+      <span class="conversation-name">{{ agentName }}</span>
+    </div>
+    <div class="header-right">
+      <!-- 清空会话 -->
+      <el-button @click="emit('clear')">
+        清空会话
+      </el-button>
+      <!-- 模型选择 -->
+      <el-button @click="showModelModal = true">
+        {{ currentModel?.name || currentModel?.modelName || '选择模型' }}
+      </el-button>
+      <el-button
+        :type="activeTab === 'agent' ? 'primary' : 'default'"
+        @click="handleTabClick('agent')"
+      >
+        智能体
+      </el-button>
+      <el-button
+        :type="activeTab === 'file' ? 'primary' : 'default'"
+        @click="handleTabClick('file')"
+      >
+        文件
+      </el-button>
+    </div>
+
+    <!-- 模型选择弹窗 -->
+    <LlmModelModal v-model="showModelModal" @select="handleModelSelect" />
+  </div>
+</template>
+```
+
+替换为：
+
+```vue
+<template>
+  <div class="chat-header">
+    <div class="header-left">
+      <div class="agent-avatar">{{ agentNameInitial }}</div>
+      <span class="conversation-name">{{ agentName }}</span>
+    </div>
+    <div class="header-right">
+      <el-tooltip content="清空会话" placement="bottom" :show-after="300">
+        <el-button class="icon-btn" link @click="emit('clear')">
+          <el-icon><Delete /></el-icon>
+        </el-button>
+      </el-tooltip>
+
+      <el-select
+        class="model-select"
+        :model-value="modelValue"
+        @update:model-value="handleSelectChange"
+        placeholder="选择模型"
+      >
+        <el-option
+          v-for="opt in modelOptions"
+          :key="opt.value"
+          :label="opt.label"
+          :value="opt.value"
+        />
+      </el-select>
+
+      <el-tooltip
+        :content="filePanelVisible ? '收起文件面板' : '展开文件面板'"
+        placement="bottom"
+        :show-after="300"
+      >
+        <el-button class="icon-btn" link @click="handleToggleClick">
+          <el-icon>
+            <component :is="filePanelVisible ? Fold : Expand" />
+          </el-icon>
+        </el-button>
+      </el-tooltip>
+    </div>
+  </div>
+</template>
+```
+
+---
+
+## Task 3: ChatHeader —— 样式新增
+
+**Files:**
+- Modify: `src/views/frontend/components/ChatHeader.vue`（`<style scoped lang="scss">` 段）
+
+- [ ] **Step 1: 重写 `<style scoped lang="scss">` 内容**
+
+将现有 `<style scoped lang="scss">` 整段替换为：
+
+```scss
+.chat-header {
+  padding: 11px;
+  border-bottom: 1px solid var(--fe-border);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: var(--fe-bg-elevated);
+  color: var(--fe-text-primary);
+
+  .header-left {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    max-width: 480px;
+
+    .agent-avatar {
+      width: 32px;
+      height: 32px;
+      border-radius: 50%;
+      background: var(--fe-accent);
+      color: var(--fe-text-inverse);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 14px;
+      font-weight: 600;
+      flex-shrink: 0;
+    }
+
+    .conversation-name {
+      font-size: 16px;
+      font-weight: 600;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: block;
+    }
+  }
+
+  .header-right {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+
+    .icon-btn {
+      padding: 4px 8px;
+      background: transparent;
+      border: none;
+      color: var(--fe-text-secondary);
+      height: 32px;
+      width: 32px;
+      cursor: pointer;
+      border-radius: var(--fe-radius-md);
+      transition: all 0.2s;
+
+      &:hover {
+        background: var(--fe-bg-hover);
+        color: var(--fe-text-primary);
+      }
+
+      .el-icon {
+        font-size: 18px;
+      }
+    }
+
+    .model-select {
+      width: 180px;
+      :deep(.el-select__wrapper) {
+        background: var(--fe-bg-elevated);
+        box-shadow: 0 0 0 1px var(--fe-border) inset;
+        border-radius: var(--fe-radius-md);
+      }
+      :deep(.el-select__placeholder) { color: var(--fe-text-muted); }
+      :deep(.el-select__selected-item) { color: var(--fe-text-primary); }
+    }
+  }
+}
+```
+
+---
+
+## Task 4: ConversationSidebar —— 搜索框聚焦高亮
+
+**Files:**
+- Modify: `src/views/frontend/components/ConversationSidebar.vue`（`<style scoped lang="scss">` 中 `.sidebar-search` 块）
+
+- [ ] **Step 1: 在 `.sidebar-search` 内追加 `:focus` 规则**
+
+找到：
+
+```scss
+.sidebar-search {
+  padding: 8px 12px 0;
+  :deep(.el-input__wrapper) {
+    background: var(--fe-bg-elevated);
+    box-shadow: 0 0 0 1px var(--fe-border) inset;
+    border-radius: var(--fe-radius-md);
+  }
+  :deep(.el-input__inner) {
+    color: var(--fe-text-primary);
+    &::placeholder { color: var(--fe-text-muted); }
+  }
+  :deep(.el-input__prefix .el-icon) { color: var(--fe-text-muted); }
+}
+```
+
+替换为：
+
+```scss
+.sidebar-search {
+  padding: 8px 12px 0;
+  :deep(.el-input__wrapper) {
+    background: var(--fe-bg-elevated);
+    box-shadow: 0 0 0 1px var(--fe-border) inset;
+    border-radius: var(--fe-radius-md);
+    transition: box-shadow 0.15s, background 0.15s;
+  }
+  :deep(.el-input__wrapper.is-focus) {
+    box-shadow: 0 0 0 1px var(--fe-accent) inset;
+    background: var(--fe-bg-elevated);
+  }
+  :deep(.el-input__inner) {
+    color: var(--fe-text-primary);
+    &::placeholder { color: var(--fe-text-muted); }
+  }
+  :deep(.el-input__wrapper.is-focus .el-input__inner::placeholder) {
+    color: var(--fe-text-secondary);
+  }
+  :deep(.el-input__prefix .el-icon) { color: var(--fe-text-muted); }
+}
+```
+
+---
+
+## Task 5: ConversationSidebar —— 分组默认全部展开
+
+**Files:**
+- Modify: `src/views/frontend/components/ConversationSidebar.vue`（`<script setup>` 中 `syncExpandedWithCurrent`）
+
+- [ ] **Step 1: 重写 `syncExpandedWithCurrent` 函数体**
+
+将：
+
+```js
+function syncExpandedWithCurrent() {
+  if (currentSession.value) {
+    expandedGroups.value = new Set([groupOf(currentSession.value)])
+  } else {
+    expandedGroups.value = new Set(['today'])
+  }
+}
+```
+
+替换为：
+
+```js
+function syncExpandedWithCurrent() {
+  // 用户要求默认全部展开；用户可点击分组标题手动收/展
+  expandedGroups.value = new Set(['today', 'yesterday', 'earlier'])
+}
+```
+
+---
+
+## Task 6: index.vue —— 文件面板默认展开 + 新增模型切换与折叠处理
+
+**Files:**
+- Modify: `src/views/frontend/index.vue`
+
+- [ ] **Step 1: 文件面板默认 `true`**
+
+将 `const filePanelVisible = ref(false);` 改为 `const filePanelVisible = ref(true);`。
+
+- [ ] **Step 2: 新增 `modelSelectOptions` computed 与 `handleModelSelectChange`**
+
+在 `currentModel = ref(null)` 附近、`initModels` 之前，插入：
+
+```js
+const modelSelectOptions = computed(() => modelList.value.map(m => ({
+  label: m.name || m.modelName || '',
+  value: m.modelName || m.name || ''
+})))
+
+function handleModelSelectChange(value) {
+  const found = modelList.value.find(m => (m.modelName || m.name) === value)
+  if (found) {
+    currentModel.value = found
+    ElMessage.success(`已选择模型: ${found.name || found.modelName}`)
+  }
+}
+```
+
+- [ ] **Step 3: 新增 `handleToggleFilePanel`**
+
+在 `handleModelChange` 之后插入：
+
+```js
+function handleToggleFilePanel() {
+  filePanelVisible.value = !filePanelVisible.value
+}
+```
+
+- [ ] **Step 4: 删除 `handleTabChange` 函数体**
+
+将 `handleTabChange` 整个函数（含之前的 `function handleTabChange(tab) { ... }`）连同其上方空行一起删除。
+
+- [ ] **Step 5: 删除 `handleFilePanelClose` 中的 `setActiveTab` 调用**
+
+将：
+
+```js
+function handleFilePanelClose() {
+  filePanelVisible.value = false;
+  previewVisible.value = false;
+  chatHeaderRef.value?.setActiveTab('agent');
+}
+```
+
+改为：
+
+```js
+function handleFilePanelClose() {
+  filePanelVisible.value = false;
+  previewVisible.value = false;
+}
+```
+
+- [ ] **Step 6: 替换模板上的 `<ChatHeader>` 标签**
+
+将：
+
+```html
+<ChatHeader
+  ref="chatHeaderRef"
+  :agent-name="currentConversation?.agentName || '请选择会话'"
+  :current-model="currentModel"
+  @tab-change="handleTabChange"
+  @model-change="handleModelChange"
+  @clear="handleClear"
+/>
+```
+
+替换为：
+
+```html
+<ChatHeader
+  ref="chatHeaderRef"
+  :agent-name="currentConversation?.agentName || '请选择会话'"
+  :current-model="currentModel"
+  :model-options="modelSelectOptions"
+  :model-value="currentModel?.modelName || currentModel?.name || ''"
+  :file-panel-visible="filePanelVisible"
+  @update:model-value="handleModelSelectChange"
+  @toggle-file-panel="handleToggleFilePanel"
+  @clear="handleClear"
+/>
+```
+
+---
+
+## Task 7: 端到端冒烟清单
+
+**Files:** 无新增；仅执行 dev 自检。
+
+- [ ] **Step 1: ChatHeader 视觉**
+
+启动 `npm run dev`，进入 `/frontend`，目测：
+- 左侧 `agent-avatar` 圆形 icon（accent 背景、白字、显示 agentName 首字），后跟 agentName；
+- 右侧依次：垃圾桶 icon（清空）、模型 el-select 下拉、文件面板折叠 icon（默认 Fold，因为 filePanelVisible 默认 true）；
+- 不再有 "智能体" / "文件" 两个 tab 按钮；不再有 `LlmModelModal` 弹窗入口。
+
+- [ ] **Step 2: 文件面板默认展开 + icon 切换**
+
+- 页面加载后文件面板可见；
+- 点击 ChatHeader 右侧 Fold icon → 文件面板收起，icon 变为 Expand；
+- 再点 Expand icon → 文件面板展开，icon 变回 Fold。
+
+- [ ] **Step 3: 模型下拉**
+
+- el-select 显示当前模型名称；
+- 切换下拉 → 立即生效（chatWindow 后续发送消息会带上新模型）；
+- `ElMessage` 提示"已选择模型: …"。
+
+- [ ] **Step 4: 清空 icon**
+
+- 点击垃圾桶 icon → WebSocket 发送 `clear` 类型消息，聊天区消息清空；
+- 控制台无 error。
+
+- [ ] **Step 5: 搜索框聚焦高亮**
+
+- 点击侧栏搜索框 → 输入框边框变为 accent 色；
+- placeholder 颜色由 muted 变 secondary；
+- 失焦恢复。
+
+- [ ] **Step 6: 分组默认全部展开**
+
+- 页面加载后 今天 / 昨天 / 更早 三段同时展开；
+- 切换会话后仍全部展开（不回到"仅当前分组"）；
+- 点击任一分组标题可手动折叠；切换会话或刷新会重置为全部展开。
+
+- [ ] **Step 7: 不做 git 推送**
+
+本次仅修改本地文件，不运行 `git push` / `git commit`（用户自行决定是否提交）。

docs/superpowers/specs/2026-08-07-frontend-context-popover-theme-fix-design.md

@@ -0,0 +1,59 @@
+# Frontend 上下文窗口 popover 主题适配 — Design Spec
+
+**日期：** 2026-08-07
+**状态：** Approved
+**范围：** Bug 修复（CSS 变量 / Element Plus Teleport）
+
+## 背景
+
+`src/views/frontend/components/InputArea.vue` 中的"上下文窗口"指示器（`.context-indicator`）点击后弹出 `el-popover`，其中显示 token 使用量、阈值百分比等。当前问题是：该 popover 没有适配 frontend 的深 / 浅色主题。
+
+## 根因
+
+Element Plus 的 `el-popover` 默认 `teleported: true`（已确认，源码 `element-plus/es/components/tooltip/src/content.mjs`），弹出层被 Teleport 到 body 之外。
+
+`body[data-fe-theme="light"]` 只覆盖了 `--fe-*` 系列变量，未覆盖 Element Plus 内部用到的 `--el-bg-color-overlay`、`--el-border-color-lighter`、`--el-text-color-regular` 等。结果是：
+
+- popover 容器（`.el-popper`）回退到 Element Plus 默认值（浅色背景 + 浅色文本）
+- 在深色主题下，与 frontend 整体深色风格不一致
+- 而 `.context-popover` 内部的 `--fe-*` 变量虽然继承自 `:root`，但 popover 容器本身的背景 / 边框 / 文字色来自 `--el-*`，这些没被覆盖
+
+## 方案
+
+**给 `el-popover` 设置 `:teleported="false"`**，让 popover 容器保留在 `.frontend-container` DOM 树内，从而继承 `.frontend-container` 下的所有 `--el-*` / `--fe-*` 变量映射。
+
+### 改动点
+
+`src/views/frontend/components/InputArea.vue` 第 81-85 行的 `el-popover` 标签，新增 `:teleported="false"`：
+
+```vue
+<el-popover
+  placement="top"
+  :width="280"
+  trigger="click"
+  :teleported="false"
+>
+```
+
+`.context-popover` 现有的 scoped 样式（`.popover-title` / `.popover-body` / `.popover-footer` / `.token-count`）保持不变，因为它们使用 `--fe-*` 变量，本来就能工作。
+
+### 不需要改动
+
+- `theme.scss`：`.frontend-container` 已经把 `--el-bg-color-overlay`、`--el-text-color-regular`、`--el-color-success`、`--el-color-danger` 等都映射到 `--fe-*` 变量，只要 popover 在 `.frontend-container` 内就能自动生效
+- 浅色覆盖：`.frontend-container[data-theme="light"]` 同样完整覆盖了 `--el-*` 系列
+- `.context-popover` 的 scoped 样式：因为 `.context-popover` 本身在 InputArea 模板中，scoped 的 `data-v-xxx` 仍会附加到元素上，popover 留在组件树内后所有选择器自然匹配
+
+## 验证
+
+1. 切到深色主题，点击输入框右下角的"XX%"指示器 → popover 应为深色背景（`#252526` / `--fe-bg-elevated`）、浅色文字
+2. 切到浅色主题，点击同一指示器 → popover 应为白色（`#ffffff` / `--el-bg-color`）、深色文字
+3. 百分比 `el-tag`：深色主题下 `success` 是青色（`#4ec9b0`），`danger` 是珊瑚红（`#f48771`）；浅色主题下 `success` 是蓝色（`#1890ff`），`danger` 是红色（`#f56c6c`）
+4. `token-count` 文字：深色下青色，浅色下蓝色
+5. 重复点击 / 多次切换主题，popover 位置不漂移、不被聊天内容遮挡
+
+## 非目标
+
+- 不改 `el-popover` 的其它属性（placement、width、trigger）
+- 不改 `theme.scss`
+- 不改 `.context-popover` 现有样式（变量已经够用）
+- 不动 `el-tooltip`（左下角 `@` 按钮的 tooltip，独立组件，独立处理）

docs/superpowers/specs/2026-08-08-frontend-dark-theme-sidebar-search-chat-design.md

@@ -0,0 +1,271 @@
+# Frontend 深色主题 + 会话搜索/分组 + 聊天模块收紧 — Design Spec
+
+**日期：** 2026-08-08
+**状态：** Approved
+**范围：** UI 调整（仅本地代码，不做 git 推送）
+
+## 背景
+
+根目录提供两张参考图：
+
+- `image.png` — frontend 整体布局：深色主题 + 侧栏"会话列表"标题 + 下方按时间分组的会话项 + 右侧聊天主区；
+- `chat.png` — 聊天区细节：用户消息右侧气泡、青色主题色、深色背景、紧凑留白。
+
+当前 `src/views/frontend/` 已具备 `theme.scss`、`ConversationSidebar.vue`、`ChatWindow.vue` 的完整骨架，但：
+
+1. 深色 `--fe-*` 变量停留在首版调色（VS Code 暗色 + 青色 accent），与 image.png 期望的"冷感石墨黑 + 蓝紫 accent"仍有差距；
+2. 会话侧栏只有一维列表，没有"今天 / 昨天 / 更早"分组，也没有搜索入口；
+3. 聊天模块的内边距、圆角与 chat.png 的紧凑节奏仍有可收敛空间。
+
+## 目标 / 非目标
+
+**目标**
+
+- 把 `:root` 下 `--fe-*` 替换为石墨黑底 + 蓝紫 accent；
+- 会话侧栏顶部新增"搜索会话"输入框（仅样式）；
+- 会话按 `今天 / 昨天 / 更早` 分组，分组支持展开/折叠，且"当前会话所在分组自动展开，其他折叠"；
+- 聊天模块气泡、消息组、滚动按钮的圆角与内边距收紧，与 chat.png 节奏对齐。
+
+**非目标**
+
+- 不修改浅色主题（`body[data-fe-theme="light"]` 与 `.frontend-container[data-theme="light"]`）；
+- 不修改 WebSocket、流式消息、自动下拉、模型选择、上下文 popover、`UserArea`、右键菜单、其它视图；
+- 不引入新接口；搜索框不绑定行为；分组折叠状态不持久化。
+
+## 改动清单
+
+### 1. `src/views/frontend/styles/theme.scss`
+
+替换 `:root` 块下所有 `--fe-*` 变量值，保持变量名不变。`body[data-fe-theme="light"]`、`.frontend-container { --el-* }`、`.frontend-container[data-theme="light"]` 三个块完全不动。`.frontend-el-message-box` 与全局 `.context-menu` 由于使用 `--fe-*` 变量，自动跟随新调色板，不需要修改。
+
+```scss
+:root {
+  // —— 基础色 ——
+  --fe-bg-base: #14171c;          // 容器底色（石墨黑）
+  --fe-bg-elevated: #1c1f24;      // 卡片 / hover
+  --fe-bg-overlay: #23272e;       // 弹层 / 高亮
+  --fe-bg-input: #2a2e35;         // 输入区背景
+  --fe-bg-hover: #1f2329;         // 行 hover
+
+  // —— 边框 ——
+  --fe-border: #2c3138;
+  --fe-border-strong: #4a505a;
+
+  // —— 文本 ——
+  --fe-text-primary: #e4e6eb;
+  --fe-text-secondary: #9aa0a6;
+  --fe-text-muted: #6b7280;
+  --fe-text-inverse: #14171c;
+
+  // —— 品牌色 ——
+  --fe-accent: #6c8cff;            // 蓝紫 accent
+  --fe-accent-hover: #8aa3ff;
+  --fe-accent-soft: rgba(108, 140, 255, 0.15);
+  --fe-danger: #f07178;
+  --fe-danger-soft: rgba(240, 113, 120, 0.1);
+  --fe-warning: #e0a050;
+  --fe-info: #6cc4d6;
+  --fe-info-soft: rgba(108, 196, 214, 0.1);
+  --fe-info-border: rgba(108, 196, 214, 0.4);
+  --fe-accent-border: rgba(108, 140, 255, 0.4);
+  --fe-danger-border: rgba(240, 113, 120, 0.4);
+
+  // —— 布局尺寸 ——
+  --fe-sidebar-width: 260px;
+  --fe-file-panel-width: 280px;
+  --fe-file-preview-width: 600px;
+
+  // —— 阴影 / 圆角 ——
+  --fe-radius-sm: 4px;
+  --fe-radius-md: 6px;
+  --fe-radius-lg: 12px;
+  --fe-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
+  --fe-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.55);
+  --fe-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.65);
+}
+```
+
+### 2. `src/views/frontend/components/ConversationSidebar.vue`
+
+#### 模板变更
+
+- 在 `sidebar-header` 之后新增 `<div class="sidebar-search">`，内含 `<el-input v-model="searchKeyword" placeholder="搜索会话">`，前缀图标 `Search`；
+- `<el-scrollbar>` 内部从 `v-for="session in sessionList"` 改为 `v-for="group in sessionGroups" :key="group.key"`：
+  - 每个 `group.items.length === 0` 不渲染；
+  - `<div class="group-header" @click="toggleGroup(group.key)">` 包含 `<span class="group-title">{{ group.label }}</span>` 与 `<el-icon class="group-toggle"><ArrowDown v-if="expandedGroups.has(group.key)" /><ArrowRight v-else /></el-icon>`；
+  - `<div v-show="expandedGroups.has(group.key)" class="group-items">` 渲染 `v-for="session in group.items"`：复用现有 `.conversation-item` 结构。
+
+#### 脚本新增
+
+```js
+import { Search, ArrowDown, ArrowRight } from '@element-plus/icons-vue'
+
+const searchKeyword = ref('')           // 仅留口子，本次不绑定行为
+const expandedGroups = ref(new Set())   // 'today' | 'yesterday' | 'earlier'
+
+function groupOf(session) {
+  const ts = parseTimestamp(session?.updateTime)
+  if (ts == null) return 'earlier'
+  const now = new Date()
+  const d = new Date(ts)
+  const sameDay = (a, b) =>
+    a.getFullYear() === b.getFullYear() &&
+    a.getMonth() === b.getMonth() &&
+    a.getDate() === b.getDate()
+  const yesterday = new Date(now); yesterday.setDate(now.getDate() - 1)
+  if (sameDay(d, now)) return 'today'
+  if (sameDay(d, yesterday)) return 'yesterday'
+  return 'earlier'
+}
+
+function parseTimestamp(t) {
+  if (!t) return null
+  if (typeof t === 'number' && String(t).length === 13) return t
+  if (typeof t === 'number' || /^\d{14}$/.test(t)) {
+    const s = String(t)
+    return new Date(`${s.slice(0,4)}-${s.slice(4,6)}-${s.slice(6,8)}T${s.slice(8,10)}:${s.slice(10,12)}:${s.slice(12,14)}`).getTime()
+  }
+  if (typeof t === 'string' && t.includes(' ')) {
+    const iso = t.replace(' ', 'T').replace(/\.(\d+)?$/, '')
+    const ms = new Date(iso).getTime()
+    return Number.isNaN(ms) ? null : ms
+  }
+  const ms = new Date(t).getTime()
+  return Number.isNaN(ms) ? null : ms
+}
+
+const sessionGroups = computed(() => {
+  const groups = { today: [], yesterday: [], earlier: [] }
+  for (const s of sessionList.value) {
+    groups[groupOf(s)].push(s)
+  }
+  return [
+    { key: 'today', label: '今天', items: groups.today },
+    { key: 'yesterday', label: '昨天', items: groups.yesterday },
+    { key: 'earlier', label: '更早', items: groups.earlier }
+  ]
+})
+
+function toggleGroup(key) {
+  const next = new Set(expandedGroups.value)
+  if (next.has(key)) next.delete(key); else next.add(key)
+  expandedGroups.value = next
+}
+
+function syncExpandedWithCurrent() {
+  if (currentSession.value) {
+    expandedGroups.value = new Set([groupOf(currentSession.value)])
+  } else {
+    expandedGroups.value = new Set(['today'])
+  }
+}
+```
+
+调用点：
+
+- `fetchSessions` `finally` 中调用 `syncExpandedWithCurrent()`（含首屏无会话、列表为空、列表非空三种情况）；
+- `selectSession(session)` 末尾追加 `syncExpandedWithCurrent()`；
+- `handleDeleteSession` 移除条目后调用 `syncExpandedWithCurrent()`。
+
+#### 样式新增（仅作用域内）
+
+```scss
+.sidebar-search {
+  padding: 8px 12px 0;
+  :deep(.el-input__wrapper) {
+    background: var(--fe-bg-elevated);
+    box-shadow: 0 0 0 1px var(--fe-border) inset;
+    border-radius: var(--fe-radius-md);
+  }
+  :deep(.el-input__inner) {
+    color: var(--fe-text-primary);
+    &::placeholder { color: var(--fe-text-muted); }
+  }
+  :deep(.el-input__prefix .el-icon) { color: var(--fe-text-muted); }
+}
+
+.group-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 16px 6px;
+  cursor: pointer;
+  user-select: none;
+  .group-title {
+    font-size: 12px;
+    font-weight: 600;
+    color: var(--fe-accent);
+    letter-spacing: 0.5px;
+  }
+  .group-toggle {
+    color: var(--fe-text-secondary);
+    font-size: 12px;
+  }
+  &:hover .group-toggle { color: var(--fe-text-primary); }
+}
+
+.group-items { padding: 0 8px; }
+```
+
+保留现有 `.conversation-item` 圆角 8px → 改为 `var(--fe-radius-md)`，与 `--fe-radius-md` 同步到 6px。
+
+### 3. `src/views/frontend/components/ChatWindow.vue`
+
+仅改 `<style scoped lang="scss">`：
+
+```scss
+.chat-window {
+  // padding: 16px 20px;
+  padding: 12px 16px;
+}
+
+.message-group {
+  // margin-bottom: 12px;
+  margin-bottom: 10px;
+}
+
+.message-bubble {
+  // padding: 10px 14px;
+  padding: 9px 13px;
+  // border-radius: 12px;
+  border-radius: 10px;
+}
+```
+
+模板、`<script setup>`、`watch`、`onMounted`、`process-panel`、`scroll-to-bottom` 全部保持原样；`.scroll-to-bottom` 的颜色/阴影通过 `--fe-bg-elevated` / `--fe-shadow-md` 自动跟随新调色。
+
+## 数据流
+
+1. `ConversationSidebar.fetchSessions()` → `sessionList` 更新；
+2. `sessionGroups`（computed）按 `updateTime` 派生今天 / 昨天 / 更早；
+3. `syncExpandedWithCurrent()` 决定 `expandedGroups`；
+4. 模板渲染：分组标题 + 当前展开分组内的会话项。
+
+聊天模块无新增数据流，仅样式收紧。
+
+## 异常处理
+
+- `updateTime` 无法解析 → `parseTimestamp` 返回 `null` → `groupOf` 落回 `'earlier'`；控制台 `console.warn('无法解析会话时间', session)` 一次；
+- 折叠 Set 为空 → `syncExpandedWithCurrent` 总能产出至少一个 key（`'today'` 或当前会话所在分组）；
+- 搜索框无异常路径：用户输入不会改变列表。
+
+## 验证
+
+| 步骤 | 期望 |
+|---|---|
+| 1 | 启动 dev，深色主题下 frontend 容器底色变 `#14171c`，accent 高亮变 `#6c8cff` |
+| 2 | 切到浅色主题：颜色与之前完全一致（`#ffffff` / `#1890ff`） |
+| 3 | 上下文 popover / ChatHeader 模型选择 / `ElMessageBox` 弹窗主题一致（新色系跟随） |
+| 4 | 列表加载完成后默认 `今天` 展开、昨天 / 更早折叠 |
+| 5 | 点击任一会话 → 仅其所在分组展开 |
+| 6 | 点击分组标题 → 切换展开 / 折叠 |
+| 7 | 搜索框：聚焦高亮、placeholder "搜索会话"、输入无任何列表变化 |
+| 8 | 聊天区：用户 / 助手气泡圆角 10px、内边距 9/13px；消息间距 10px；与 chat.png 节奏一致 |
+| 9 | 发消息后流式追加仍自动滚到底；不回归 |
+| 10 | 删会话后折叠状态保持 `今天`（或当前会话所在分组） |
+
+## 风险
+
+- 颜色变量变更可能与前端测试中硬编码颜色（如 `ChatWindow.vue` 内的 `color="#67C23A"` 等 icon 颜色）冲突；本次只动 `--fe-*` 全局变量，硬编码 icon 颜色保留原值；
+- `parseTimestamp` 仅识别现有 3 种格式（毫秒 / 14 位 / 空格分隔），与 `ChatWindow.formatTime` 保持一致；其它格式落回 "更早" 不报错；
+- 不做 git 推送；用户在本地合并 / 推送。

docs/superpowers/specs/2026-08-08-frontend-header-restructure-design.md

@@ -0,0 +1,276 @@
+# Frontend 顶部重排 + 搜索高亮 + 分组默认展开 Design Spec
+
+**日期：** 2026-08-08
+**状态：** Approved
+**范围：** UI 调整（仅本地代码，不做 git 推送）
+**前置：** 已完成 docs/superpowers/specs/2026-08-08-frontend-dark-theme-sidebar-search-chat-design.md 的深色主题 + 会话搜索/分组 + 聊天气泡节奏改动。本 spec 在此基础上扩展。
+
+## 背景
+
+根目录 `chat.png` 中聊天区顶部为：`[agent avatar] [agent name]  ……  [icon: clear] [model select] [icon: collapse]`。
+
+当前 `ChatHeader.vue` 顶部右侧有四个按钮：清空会话 / 选择模型 / 智能体 / 文件。"智能体" / "文件" 是互斥 tab，会同时影响 `filePanelVisible` 与 `previewVisible`。本次去掉两个 tab，换成一个独立的"折叠文件面板"icon，让文件面板默认展开，由 icon 控制显隐。
+
+同时修正：
+- 搜索框聚焦时仅边框变 accent、placeholder 略亮（已配置样式但未生效）；
+- 会话分组默认全部展开（当前默认仅当前会话所在分组展开）。
+
+## 目标 / 非目标
+
+**目标**
+
+- ChatHeader 顶部右侧：`[icon: clear]` + `[el-select: model]` + `[icon: sidebar-fold/unfold]`；
+- 标题前加 `agentName` 首字圆形 icon（accent 背景，白色字）；
+- 文件面板默认展开，点击 sidebar-fold icon 折叠，再点 sidebar-unfold icon 展开；
+- 搜索框聚焦高亮边框与 placeholder；
+- 会话分组默认全部展开（`today / yesterday / earlier`）；
+- 移除 `LlmModelModal` 在 ChatHeader 中的引用（文件保留）；
+- 移除 `handleTabChange` 中"agent"分支与 `setActiveTab` 调用点。
+
+**非目标**
+
+- 不改 WebSocket、流式消息、自动下拉、`InputArea`、`UserArea`、右键菜单、`ChatWindow`、浅色主题、`theme.scss`；
+- 不持久化文件面板折叠状态、模型选择状态；
+- 不动后端 `listLlmModels`、`getLlmAngent` 等接口；
+- 不在本次引入 `useFilePanelStore` / `useModelStore`（保持父组件持有状态）。
+
+## 改动清单
+
+### 1. `src/views/frontend/components/ChatHeader.vue`
+
+#### 模板变更
+
+```vue
+<template>
+  <div class="chat-header">
+    <div class="header-left">
+      <div class="agent-avatar">{{ agentNameInitial }}</div>
+      <span class="conversation-name">{{ agentName }}</span>
+    </div>
+    <div class="header-right">
+      <el-tooltip content="清空会话" placement="bottom" :show-after="300">
+        <el-button class="icon-btn" link @click="emit('clear')">
+          <el-icon><Delete /></el-icon>
+        </el-button>
+      </el-tooltip>
+
+      <el-select
+        class="model-select"
+        :model-value="modelValue"
+        @update:model-value="handleSelectChange"
+        size="default"
+        placeholder="选择模型"
+      >
+        <el-option
+          v-for="opt in modelOptions"
+          :key="opt.value"
+          :label="opt.label"
+          :value="opt.value"
+        />
+      </el-select>
+
+      <el-tooltip :content="filePanelVisible ? '收起文件面板' : '展开文件面板'" placement="bottom" :show-after="300">
+        <el-button class="icon-btn" link @click="handleToggleClick">
+          <el-icon><component :is="filePanelVisible ? Fold : Expand" /></el-icon>
+        </el-button>
+      </el-tooltip>
+    </div>
+  </div>
+</template>
+```
+
+> 注：Element Plus 图标库中"面板折叠 / 展开"对应的图标名为 `Fold` / `Expand`（无 `SidebarFold` / `SidebarUnfold` 同名图标）。语义与"收起 / 展开文件面板"完全对应。
+```
+
+#### 脚本变更
+
+- `import { Delete, Fold, Expand } from '@element-plus/icons-vue'`；
+- 删除 `import LlmModelModal from './LlmModelModal.vue'`、`activeTab` ref、`showModelModal` ref、`handleTabClick` 函数、`setActiveTab` expose 方法；
+- 删除 `emit('tab-change', tab)`；
+- 新增 props：`modelOptions: Array<{label, value}>`、`modelValue: String`、`filePanelVisible: Boolean`；
+- 新增 emits：`update:modelValue`、`toggle-file-panel`；
+- 新增 computed `agentNameInitial`：取 `agentName` 的第一个字符（中文取首字、英文取首字母），为空时返回 `?`；
+- 新增 `handleSelectChange(value)`：emit `update:modelValue`；
+- 新增 `handleToggleClick()`：emit `toggle-file-panel`；
+- 删除 `handleModelSelect(model)` 与 `model-change` emit——切换模型统一通过 `update:modelValue` 单事件流，避免重复。
+
+#### 样式新增
+
+```scss
+.agent-avatar {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background: var(--fe-accent);
+  color: var(--fe-text-inverse);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  font-weight: 600;
+  flex-shrink: 0;
+}
+
+.header-left {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  max-width: 480px;
+}
+
+.icon-btn {
+  padding: 4px 8px;
+  background: transparent;
+  border: none;
+  color: var(--fe-text-secondary);
+  height: 32px;
+  width: 32px;
+  cursor: pointer;
+  border-radius: var(--fe-radius-md);
+  &:hover {
+    background: var(--fe-bg-hover);
+    color: var(--fe-text-primary);
+  }
+  .el-icon { font-size: 18px; }
+}
+
+.model-select {
+  width: 180px;
+  :deep(.el-select__wrapper) {
+    background: var(--fe-bg-elevated);
+    box-shadow: 0 0 0 1px var(--fe-border) inset;
+    border-radius: var(--fe-radius-md);
+  }
+  :deep(.el-select__placeholder) { color: var(--fe-text-muted); }
+  :deep(.el-select__selected-item) { color: var(--fe-text-primary); }
+}
+```
+
+### 2. `src/views/frontend/components/ConversationSidebar.vue`
+
+#### 搜索框聚焦高亮
+
+在已有 `.sidebar-search` 块内追加：
+
+```scss
+.sidebar-search {
+  :deep(.el-input__wrapper.is-focus) {
+    box-shadow: 0 0 0 1px var(--fe-accent) inset;
+    background: var(--fe-bg-elevated);
+  }
+  :deep(.el-input__wrapper.is-focus .el-input__inner::placeholder) {
+    color: var(--fe-text-secondary);
+  }
+}
+```
+
+#### 分组默认全部展开
+
+修改 `syncExpandedWithCurrent`：
+
+```js
+function syncExpandedWithCurrent() {
+  // 用户要求默认全部展开；当前会话所在分组由图标高亮区分，无需特殊收/展
+  expandedGroups.value = new Set(['today', 'yesterday', 'earlier'])
+}
+```
+
+`toggleGroup` 行为保持不变——用户可手动收/展某个分组，刷新或切换会话后会重置为全部展开。
+
+### 3. `src/views/frontend/index.vue`
+
+#### 状态修改
+
+```js
+const filePanelVisible = ref(true)   // 原为 false
+```
+
+#### 删除 / 新增函数
+
+- 整体删除 `handleTabChange` 函数体（index.vue 模板上 `@tab-change="..."` 也删除）；
+- 删除 `handleFilePanelClose` 中对 `chatHeaderRef.value?.setActiveTab('agent')` 的调用（仅保留函数体中 `filePanelVisible.value = false; previewVisible.value = false`）；
+- 删除模板上 `@model-change="handleModelChange"`、`@clear` 保留；改用 `@update:model-value="handleModelSelectChange"` 单一通道；
+- 新增 `handleToggleFilePanel()`：
+
+```js
+function handleToggleFilePanel() {
+  filePanelVisible.value = !filePanelVisible.value
+}
+```
+
+#### 模板调整
+
+把 `<ChatHeader>` 改为：
+
+```html
+<ChatHeader
+  ref="chatHeaderRef"
+  :agent-name="currentConversation?.agentName || '请选择会话'"
+  :current-model="currentModel"
+  :model-options="modelSelectOptions"
+  :model-value="currentModel?.modelName || currentModel?.name || ''"
+  :file-panel-visible="filePanelVisible"
+  @update:model-value="handleModelSelectChange"
+  @toggle-file-panel="handleToggleFilePanel"
+  @clear="handleClear"
+/>
+```
+
+#### 脚本新增
+
+```js
+const modelSelectOptions = computed(() => modelList.value.map(m => ({
+  label: m.name || m.modelName || '',
+  value: m.modelName || m.name || ''
+})))
+
+function handleModelSelectChange(value) {
+  const found = modelList.value.find(m => (m.modelName || m.name) === value)
+  if (found) {
+    currentModel.value = found
+    ElMessage.success(`已选择模型: ${found.name || found.modelName}`)
+  }
+}
+```
+
+### 4. `src/views/frontend/components/LlmModelModal.vue`
+
+不修改，保留文件以备后续扩展（不再从 ChatHeader 引用）。
+
+## 数据流
+
+1. `index.vue` 持有 `currentModel` / `modelList` / `filePanelVisible`；
+2. 把 `modelSelectOptions` 与 `model-value` 传给 ChatHeader；
+3. ChatHeader `el-select` change → emit `update:modelValue(value)` → 父按 value 在 `modelList` 中查找匹配项 → 写 `currentModel` → emit `model-change`；
+4. ChatHeader 点击折叠 icon → emit `toggle-file-panel` → 父翻转 `filePanelVisible`；
+5. 父根据 `filePanelVisible` 渲染 `<FilePanel>`。
+
+## 异常处理
+
+- `modelList` 为空：`el-select` 下拉空选项，不报错；
+- `currentModel` 找不到匹配项：`handleModelSelectChange` 静默不更新，保留旧值；
+- `agentName` 为空：`agent-avatar` 显示 `?`；
+- 文件面板折叠 / 展开不持久化，刷新页面后默认展开；
+- `LlmModelModal.vue` 文件保留但失去引用入口——下一轮如需"更多模型"再加回；本轮不删文件。
+
+## 验证
+
+| 步骤 | 期望 |
+|---|---|
+| 1 | 启动 dev，深色主题下顶部 ChatHeader：左侧 `agent-avatar` 圆形（accent 背景）+ agent 名称；右侧依次：垃圾桶 icon、模型下拉、文件面板折叠 icon |
+| 2 | 切换会话，`agent-avatar` 文字随 `agentName` 首字变化 |
+| 3 | 文件面板默认展开；点击 sidebar-fold icon → 文件面板收起，icon 变为 sidebar-unfold；再点 → 展开 |
+| 4 | 切换模型下拉 → 立即生效；ChatHeader 模型 select 与后端 `listLlmModels` 一致 |
+| 5 | 点击垃圾桶 icon → 触发 `handleClear`，WebSocket 发送 `clear` 类型消息，会话消息清空 |
+| 6 | 搜索框聚焦：边框变为 accent 色，placeholder 颜色变浅；失焦恢复 |
+| 7 | 会话侧栏分组今天 / 昨天 / 更早 默认全部展开；点击任一分组标题可手动折叠 |
+| 8 | 浅色主题下所有上述功能保持一致（继承 `--fe-*`） |
+| 9 | WebSocket 流式消息、自动下拉、Token 轮询等不回归 |
+| 10 | 不做 git 推送；本地变更未提交 |
+
+## 风险
+
+- 删除 `handleTabChange` 时要确认 index.vue 模板上无 `@tab-change="..."` 残留；
+- 删除 `setActiveTab` expose 方法时确认 index.vue 内无 `chatHeaderRef.value?.setActiveTab(...)` 调用（`handleFilePanelClose` 中有，需要一并删除）；
+- 移除 `LlmModelModal` 引用可能使该文件成为孤儿；保留即可，无外部影响；
+- `el-select` 与 `el-button` 共存于 `.header-right` 的 `gap: 8px` 样式需保持视觉留白与上一轮 `8px` 一致。

src/views/frontend/components/ChatHeader.vue

@@ -1,40 +1,49 @@
 <template>
   <div class="chat-header">
     <div class="header-left">
+      <div class="agent-avatar">{{ agentNameInitial }}</div>
       <span class="conversation-name">{{ agentName }}</span>
     </div>
     <div class="header-right">
-      <!-- 清空会话 -->
-      <el-button @click="emit('clear')">
-        清空会话
-      </el-button>
-      <!-- 模型选择 -->
-      <el-button @click="showModelModal = true">
-        {{ currentModel?.name || currentModel?.modelName || '选择模型' }}
-      </el-button>
-      <el-button
-        :type="activeTab === 'agent' ? 'primary' : 'default'"
-        @click="handleTabClick('agent')"
-      >
-        智能体
-      </el-button>
-      <el-button
-        :type="activeTab === 'file' ? 'primary' : 'default'"
-        @click="handleTabClick('file')"
-      >
-        文件
-      </el-button>
-    </div>
+      <el-tooltip content="清空会话" placement="bottom" :show-after="300">
+        <el-button class="icon-btn icon-btn--danger" link @click="emit('clear')">
+          <el-icon><Brush /></el-icon>
+        </el-button>
+      </el-tooltip>
 
-    <!-- 模型选择弹窗 -->
-    <LlmModelModal v-model="showModelModal" @select="handleModelSelect" />
+      <el-select
+        class="model-select"
+        :model-value="modelValue"
+        @update:model-value="handleSelectChange"
+        popper-class="frontend-el-select-dropdown"
+        placeholder="选择模型"
+      >
+        <el-option
+          v-for="opt in modelOptions"
+          :key="opt.value"
+          :label="opt.label"
+          :value="opt.value"
+        />
+      </el-select>
+
+      <el-tooltip
+        :content="filePanelVisible ? '收起文件面板' : '展开文件面板'"
+        placement="bottom"
+        :show-after="300"
+      >
+        <el-button class="icon-btn" link @click="handleToggleClick">
+          <el-icon>
+            <component :is="filePanelVisible ? Fold : Expand" />
+          </el-icon>
+        </el-button>
+      </el-tooltip>
+    </div>
   </div>
 </template>
 
 <script setup>
-import { ref } from 'vue'
-import { Cpu } from '@element-plus/icons-vue'
-import LlmModelModal from './LlmModelModal.vue'
+import { computed } from 'vue'
+import { Brush, Fold, Expand } from '@element-plus/icons-vue'
 
 const props = defineProps({
   agentName: {
@@ -44,26 +53,36 @@ const props = defineProps({
   currentModel: {
     type: Object,
     default: null
+  },
+  modelOptions: {
+    type: Array,
+    default: () => []
+  },
+  modelValue: {
+    type: String,
+    default: ''
+  },
+  filePanelVisible: {
+    type: Boolean,
+    default: true
   }
 })
 
-const activeTab = ref('agent')
-const showModelModal = ref(false)
+const emit = defineEmits(['clear', 'update:modelValue', 'toggle-file-panel'])
 
-const emit = defineEmits(['tab-change', 'model-change', 'clear'])
+const agentNameInitial = computed(() => {
+  const name = (props.agentName || '').trim()
+  if (!name) return '?'
+  // 中文取首字，英文取首字母
+  return [...name][0]
+})
 
-function handleTabClick(tab) {
-  activeTab.value = tab
-  emit('tab-change', tab)
+function handleSelectChange(value) {
+  emit('update:modelValue', value)
 }
 
-defineExpose({
-  setActiveTab: (tab) => {
-    activeTab.value = tab
-  }
-})
-function handleModelSelect(model) {
-  emit('model-change', model)
+function handleToggleClick() {
+  emit('toggle-file-panel')
 }
 </script>
 
@@ -78,8 +97,25 @@ function handleModelSelect(model) {
   color: var(--fe-text-primary);
 
   .header-left {
-    max-width: 400px;
-    overflow: hidden;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    max-width: 480px;
+
+    .agent-avatar {
+      width: 32px;
+      height: 32px;
+      border-radius: 50%;
+      background: var(--fe-accent);
+      color: var(--fe-text-inverse);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 14px;
+      font-weight: 600;
+      flex-shrink: 0;
+    }
+
     .conversation-name {
       font-size: 16px;
       font-weight: 600;
@@ -93,6 +129,43 @@ function handleModelSelect(model) {
   .header-right {
     display: flex;
     gap: 8px;
+    align-items: center;
+
+    .icon-btn {
+      padding: 4px 8px;
+      background: transparent;
+      border: none;
+      color: var(--fe-text-secondary);
+      height: 32px;
+      width: 32px;
+      cursor: pointer;
+      border-radius: var(--fe-radius-md);
+      transition: all 0.2s;
+
+      &:hover {
+        background: var(--fe-bg-hover);
+        color: var(--fe-text-primary);
+      }
+
+      &--danger:hover {
+        color: var(--fe-danger);
+      }
+
+      .el-icon {
+        font-size: 18px;
+      }
+    }
+
+    .model-select {
+      width: 180px;
+      :deep(.el-select__wrapper) {
+        background: var(--fe-bg-elevated);
+        box-shadow: 0 0 0 1px var(--fe-border) inset;
+        border-radius: var(--fe-radius-md);
+      }
+      :deep(.el-select__placeholder) { color: var(--fe-text-muted); }
+      :deep(.el-select__selected-item) { color: var(--fe-text-primary); }
+    }
   }
 }
 </style>

src/views/frontend/components/ChatWindow.vue

@@ -445,7 +445,7 @@ defineExpose({ scrollToBottom, forceScrollToBottom })
 .chat-window {
   position: relative;
   flex: 1;
-  padding: 16px 20px;
+  padding: 12px 16px;
   overflow: hidden;
   display: flex;
   flex-direction: column;
@@ -491,7 +491,7 @@ defineExpose({ scrollToBottom, forceScrollToBottom })
   }
 
   .message-group {
-    margin-bottom: 12px;
+    margin-bottom: 10px;
 
     &.user-group {
       display: flex;
@@ -501,7 +501,7 @@ defineExpose({ scrollToBottom, forceScrollToBottom })
       .message-bubble {
         background: var(--fe-bg-elevated);
         color: var(--fe-text-primary);
-        border-radius: 16px 16px 4px 16px;
+        border-radius: 10px 10px 4px 10px;
         box-shadow: var(--fe-shadow-sm);
         max-width: 70%;
 
@@ -530,15 +530,16 @@ defineExpose({ scrollToBottom, forceScrollToBottom })
       .message-bubble {
         background: var(--fe-bg-elevated);
         color: var(--fe-text-primary);
-        border-radius: 16px 16px 16px 4px;
+        border-radius: 10px 10px 10px 4px;
         box-shadow: var(--fe-shadow-sm);
         max-width: 70%;
       }
     }
 
     .message-bubble {
-      padding: 10px 14px;
+      padding: 9px 13px;
       line-height: 1.6;
+      border-radius: 10px;
 
       .message-text {
         margin: 0;

src/views/frontend/components/ConversationSidebar.vue

@@ -24,25 +24,46 @@
               </el-tooltip>
             </div>
           </div>
+          <div class="sidebar-search">
+            <el-input
+              v-model="searchKeyword"
+              placeholder="搜索会话"
+              :prefix-icon="Search"
+              clearable
+            />
+          </div>
           <el-scrollbar class="sidebar-scrollbar">
             <div v-if="loading && sessionList.length === 0" class="loading-tip">
               加载中...
             </div>
-            <div
-              v-for="session in sessionList"
-              :key="session.sessionId"
-              class="conversation-item"
-              :class="{ active: currentSession?.sessionId === session.sessionId, 'has-new-message': session.hasNewMessage }"
-              @click="selectSession(session)"
-              @contextmenu.prevent="handleRightClick($event, session)"
-            >
-              <div class="conv-dot"></div>
-              <div class="conv-info">
-                <span class="conv-name">{{ session.title || session.name }}</span>
-                <span class="conv-time">{{ formatTimeAgo(session.updateTime) }}</span>
-              </div>
-              <div v-if="session.hasNewMessage" class="new-message-dot"></div>
-            </div>
+            <template v-for="group in sessionGroups" :key="group.key">
+              <template v-if="group.items.length > 0">
+                <div class="group-header" @click="toggleGroup(group.key)">
+                  <span class="group-title">{{ group.label }}</span>
+                  <el-icon class="group-toggle">
+                    <ArrowDown v-if="expandedGroups.has(group.key)" />
+                    <ArrowRight v-else />
+                  </el-icon>
+                </div>
+                <div v-show="expandedGroups.has(group.key)" class="group-items">
+                  <div
+                    v-for="session in group.items"
+                    :key="session.sessionId"
+                    class="conversation-item"
+                    :class="{ active: currentSession?.sessionId === session.sessionId, 'has-new-message': session.hasNewMessage }"
+                    @click="selectSession(session)"
+                    @contextmenu.prevent="handleRightClick($event, session)"
+                  >
+                    <div class="conv-dot"></div>
+                    <div class="conv-info">
+                      <span class="conv-name">{{ session.title || session.name }}</span>
+                      <span class="conv-time">{{ formatTimeAgo(session.updateTime) }}</span>
+                    </div>
+                    <div v-if="session.hasNewMessage" class="new-message-dot"></div>
+                  </div>
+                </div>
+              </template>
+            </template>
 
             <!-- 右键菜单 -->
             <teleport to="body">
@@ -67,9 +88,9 @@
 </template>
 
 <script setup>
-import { ref, onMounted, onUnmounted } from 'vue'
+import { ref, computed, onMounted, onUnmounted } from 'vue'
 import { useRoute } from 'vue-router'
-import { DArrowLeft, DArrowRight, Refresh, Plus, Delete, Loading } from '@element-plus/icons-vue'
+import { DArrowLeft, DArrowRight, Refresh, Plus, Delete, Loading, Search, ArrowDown, ArrowRight } from '@element-plus/icons-vue'
 import { listChatSessions, deleteChatSession, renameChatSession } from '@/api/frontend'
 import { formatTimeAgo } from '@/utils/time'
 import { ElMessage, ElMessageBox } from 'element-plus'
@@ -82,6 +103,70 @@ const currentSession = ref(null)
 const loading = ref(false)
 const emit = defineEmits(['select', 'new-session', 'ready'])
 
+// —— 搜索关键字（仅样式占位，本次不绑定行为） ——
+const searchKeyword = ref('')
+
+// —— 分组折叠状态：'today' | 'yesterday' | 'earlier' ——
+const expandedGroups = ref(new Set())
+
+function parseTimestamp(t) {
+  if (!t) return null
+  if (typeof t === 'number' && String(t).length === 13) return t
+  if (typeof t === 'number' || /^\d{14}$/.test(t)) {
+    const s = String(t)
+    return new Date(`${s.slice(0,4)}-${s.slice(4,6)}-${s.slice(6,8)}T${s.slice(8,10)}:${s.slice(10,12)}:${s.slice(12,14)}`).getTime()
+  }
+  if (typeof t === 'string' && t.includes(' ')) {
+    const iso = t.replace(' ', 'T').replace(/\.(\d+)?$/, '')
+    const ms = new Date(iso).getTime()
+    return Number.isNaN(ms) ? null : ms
+  }
+  const ms = new Date(t).getTime()
+  return Number.isNaN(ms) ? null : ms
+}
+
+function groupOf(session) {
+  const ts = parseTimestamp(session?.updateTime)
+  if (ts == null) {
+    console.warn('[ConversationSidebar] 无法解析会话时间', session)
+    return 'earlier'
+  }
+  const now = new Date()
+  const d = new Date(ts)
+  const sameDay = (a, b) =>
+    a.getFullYear() === b.getFullYear() &&
+    a.getMonth() === b.getMonth() &&
+    a.getDate() === b.getDate()
+  const yesterday = new Date(now); yesterday.setDate(now.getDate() - 1)
+  if (sameDay(d, now)) return 'today'
+  if (sameDay(d, yesterday)) return 'yesterday'
+  return 'earlier'
+}
+
+const sessionGroups = computed(() => {
+  const groups = { today: [], yesterday: [], earlier: [] }
+  for (const s of sessionList.value) {
+    groups[groupOf(s)].push(s)
+  }
+  return [
+    { key: 'today', label: '今天', items: groups.today },
+    { key: 'yesterday', label: '昨天', items: groups.yesterday },
+    { key: 'earlier', label: '更早', items: groups.earlier }
+  ]
+})
+
+function toggleGroup(key) {
+  const next = new Set(expandedGroups.value)
+  if (next.has(key)) next.delete(key)
+  else next.add(key)
+  expandedGroups.value = next
+}
+
+function syncExpandedWithCurrent() {
+  // 用户要求默认全部展开；用户可点击分组标题手动收/展
+  expandedGroups.value = new Set(['today', 'yesterday', 'earlier'])
+}
+
 // 响应式：viewport ≤ 900px 收缩，> 900px 展开
 let sidebarMediaQuery = null
 const sidebarBreakpointHandler = (e) => {
@@ -148,6 +233,7 @@ function toggleSidebar() {
 function selectSession(session) {
   currentSession.value = session
   emit('select', session)
+  syncExpandedWithCurrent()
 }
 
 async function fetchSessions() {
@@ -169,6 +255,7 @@ async function fetchSessions() {
     const remain = 300 - elapsed
     if (remain > 0) await new Promise(resolve => setTimeout(resolve, remain))
     loading.value = false
+    syncExpandedWithCurrent()
     emit('ready')
   }
 }
@@ -201,6 +288,7 @@ async function handleDeleteSession(session) {
       currentSession.value = null
       emit('select', null)
     }
+    syncExpandedWithCurrent()
   } catch (error) {
     if (error !== 'cancel') {
       console.error('删除会话失败:', error)
@@ -352,6 +440,50 @@ defineExpose({
       }
     }
 
+    .sidebar-search {
+      padding: 8px 12px 0;
+      :deep(.el-input__wrapper) {
+        background: var(--fe-bg-elevated);
+        box-shadow: 0 0 0 1px var(--fe-border) inset;
+        border-radius: var(--fe-radius-md);
+        transition: box-shadow 0.15s, background 0.15s;
+      }
+      :deep(.el-input__wrapper.is-focus) {
+        box-shadow: 0 0 0 1px var(--fe-accent) inset;
+        background: var(--fe-bg-elevated);
+      }
+      :deep(.el-input__inner) {
+        color: var(--fe-text-primary);
+        &::placeholder { color: var(--fe-text-muted); }
+      }
+      :deep(.el-input__wrapper.is-focus .el-input__inner::placeholder) {
+        color: var(--fe-text-secondary);
+      }
+      :deep(.el-input__prefix .el-icon) { color: var(--fe-text-muted); }
+    }
+
+    .group-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 12px 16px 6px;
+      cursor: pointer;
+      user-select: none;
+      .group-title {
+        font-size: 12px;
+        font-weight: 600;
+        color: var(--fe-accent);
+        letter-spacing: 0.5px;
+      }
+      .group-toggle {
+        color: var(--fe-text-secondary);
+        font-size: 12px;
+      }
+      &:hover .group-toggle { color: var(--fe-text-primary); }
+    }
+
+    .group-items { padding: 0 8px; }
+
     @keyframes sidebar-rotate {
       from { transform: rotate(0deg); }
       to { transform: rotate(360deg); }
@@ -378,7 +510,7 @@ defineExpose({
       align-items: center;
       gap: 10px;
       transition: all 0.2s;
-      border-radius: 8px;
+      border-radius: var(--fe-radius-md);
       color: var(--fe-text-primary);
       font-size: 14px;
 

src/views/frontend/components/FilePanel.vue

@@ -790,6 +790,13 @@ function handleNodeClick(data) {
     overflow: hidden;
     position: relative;
 
+    // 浅色主题下 el-scrollbar 滚动区背景设白
+    :deep(.el-scrollbar__wrap) {
+      body[data-fe-theme="light"] & {
+        background: #ffffff;
+      }
+    }
+
     .loading-wrapper,
     .empty-wrapper {
       padding:20px;

src/views/frontend/index.vue

@@ -11,11 +11,13 @@
     <div class="main-content">
       <!-- 顶部栏 -->
       <ChatHeader
-        ref="chatHeaderRef"
         :agent-name="currentConversation?.agentName || '请选择会话'"
         :current-model="currentModel"
-        @tab-change="handleTabChange"
-        @model-change="handleModelChange"
+        :model-options="modelSelectOptions"
+        :model-value="currentModel?.modelName || currentModel?.name || ''"
+        :file-panel-visible="filePanelVisible"
+        @update:model-value="handleModelSelectChange"
+        @toggle-file-panel="handleToggleFilePanel"
         @clear="handleClear"
       />
 
@@ -183,14 +185,13 @@ const chatWindowRef = ref();
 const inputAreaRef = ref();
 const conversationSidebarRef = ref();
 const editorTextareaRef = ref();
-const chatHeaderRef = ref();
 
 const currentConversation = ref(null);
 const messages = ref([]);
 const quotedFiles = ref([]);
 const loading = ref(false);
 const switchingConversation = ref(false);
-const filePanelVisible = ref(false);
+const filePanelVisible = ref(true);
 
 // 智能体市场跳转带来的 agentId
 const agentId = ref(null);
@@ -206,7 +207,6 @@ const activeWorkspacePath = computed(() => {
 // 模型相关
 const currentModel = ref(null);
 const modelList = ref([]);
-const showModelModal = ref(false);
 
 // 文件预览相关
 const previewVisible = ref(false);
@@ -307,6 +307,19 @@ async function loadAgentIfNeeded() {
   }
 }
 
+const modelSelectOptions = computed(() => modelList.value.map(m => ({
+  label: m.name || m.modelName || '',
+  value: m.modelName || m.name || ''
+})))
+
+function handleModelSelectChange(value) {
+  const found = modelList.value.find(m => (m.modelName || m.name) === value)
+  if (found) {
+    currentModel.value = found
+    ElMessage.success(`已选择模型: ${found.name || found.modelName}`)
+  }
+}
+
 // 初始化模型列表
 async function initModels() {
   try {
@@ -806,24 +819,13 @@ function transformMessages(rawMessages) {
   return result;
 }
 
-function handleTabChange(tab) {
-  if (tab === "agent") {
-    filePanelVisible.value = false;
-    previewVisible.value = false;
-  } else if (tab === "file") {
-    filePanelVisible.value = true;
-  }
-}
-
 function handleFilePanelClose() {
   filePanelVisible.value = false;
   previewVisible.value = false;
-  chatHeaderRef.value?.setActiveTab('agent');
 }
 
-function handleModelChange(model) {
-  currentModel.value = model;
-  ElMessage.success(`已选择模型: ${model.name || model.modelName || model.llmName}`);
+function handleToggleFilePanel() {
+  filePanelVisible.value = !filePanelVisible.value
 }
 
 function handleClear() {

src/views/frontend/styles/theme.scss

@@ -3,34 +3,34 @@
 // --fe- 前缀保证不会与 admin 主题变量冲突（admin 模块未使用 --fe-*）。
 :root {
   // —— 基础色 ——
-  --fe-bg-base: #1e1e1e;
-  --fe-bg-elevated: #252526;
-  --fe-bg-overlay: #2d2d30;
-  --fe-bg-input: #3c3c3c;
-  --fe-bg-hover: #2a2d2e;
+  --fe-bg-base: #14171c;
+  --fe-bg-elevated: #1c1f24;
+  --fe-bg-overlay: #23272e;
+  --fe-bg-input: #2a2e35;
+  --fe-bg-hover: #1f2329;
 
   // —— 边框 ——
-  --fe-border: #3c3c3c;
-  --fe-border-strong: #555555;
+  --fe-border: #2c3138;
+  --fe-border-strong: #4a505a;
 
   // —— 文本 ——
-  --fe-text-primary: #e6e6e6;
-  --fe-text-secondary: #a0a0a0;
-  --fe-text-muted: #6e6e6e;
-  --fe-text-inverse: #1e1e1e;
+  --fe-text-primary: #e4e6eb;
+  --fe-text-secondary: #9aa0a6;
+  --fe-text-muted: #6b7280;
+  --fe-text-inverse: #14171c;
 
   // —— 品牌色 ——
-  --fe-accent: #4ec9b0;
-  --fe-accent-hover: #5fd9c0;
-  --fe-accent-soft: rgba(78, 201, 176, 0.15);
-  --fe-danger: #f48771;
-  --fe-danger-soft: rgba(244, 135, 113, 0.1);
-  --fe-warning: #dcdcaa;
-  --fe-info: #569cd6;
-  --fe-info-soft: rgba(86, 156, 214, 0.1);
-  --fe-info-border: rgba(86, 156, 214, 0.4);
-  --fe-accent-border: rgba(78, 201, 176, 0.4);
-  --fe-danger-border: rgba(244, 135, 113, 0.4);
+  --fe-accent: #6c8cff;
+  --fe-accent-hover: #8aa3ff;
+  --fe-accent-soft: rgba(108, 140, 255, 0.15);
+  --fe-danger: #f07178;
+  --fe-danger-soft: rgba(240, 113, 120, 0.1);
+  --fe-warning: #e0a050;
+  --fe-info: #6cc4d6;
+  --fe-info-soft: rgba(108, 196, 214, 0.1);
+  --fe-info-border: rgba(108, 196, 214, 0.4);
+  --fe-accent-border: rgba(108, 140, 255, 0.4);
+  --fe-danger-border: rgba(240, 113, 120, 0.4);
 
   // —— 布局尺寸 ——
   --fe-sidebar-width: 260px;
@@ -41,9 +41,9 @@
   --fe-radius-sm: 4px;
   --fe-radius-md: 6px;
   --fe-radius-lg: 12px;
-  --fe-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
-  --fe-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
-  --fe-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.5);
+  --fe-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
+  --fe-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.55);
+  --fe-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.65);
 }
 
 // —— 浅色主题覆盖（通过 body[data-fe-theme="light"] 切换，由 settings.js 同步）——
@@ -215,6 +215,34 @@ body[data-fe-theme="light"] {
   }
 }
 
+// —— ElSelect 下拉面板（Teleport 到 body，需打 popper-class 标记）——
+// 在 ChatHeader 模型下拉里使用 popper-class="frontend-el-select-dropdown"，
+// 让弹出的 .el-select-dropdown 继承 frontend 主题。
+.frontend-el-select-dropdown {
+  --el-bg-color: var(--fe-bg-elevated);
+  --el-bg-color-overlay: var(--fe-bg-overlay);
+  --el-text-color-primary: var(--fe-text-primary);
+  --el-text-color-regular: var(--fe-text-secondary);
+  --el-text-color-secondary: var(--fe-text-muted);
+  --el-text-color-placeholder: var(--fe-text-muted);
+  --el-border-color: var(--fe-border);
+  --el-border-color-light: var(--fe-border);
+  --el-border-color-lighter: var(--fe-border);
+  --el-border-color-extra-light: var(--fe-border);
+  --el-fill-color-blank: var(--fe-bg-elevated);
+  --el-fill-color-light: var(--fe-bg-hover);
+  --el-fill-color-lighter: var(--fe-bg-hover);
+  --el-color-primary: var(--fe-accent);
+  --el-color-primary-light-3: var(--fe-accent-hover);
+  --el-color-primary-light-5: var(--fe-accent-soft);
+  --el-color-primary-light-7: var(--fe-accent-soft);
+  --el-color-primary-light-9: var(--fe-accent-soft);
+  --el-color-danger: var(--fe-danger);
+
+  border: 1px solid var(--fe-border);
+  box-shadow: var(--fe-shadow-md);
+}
+
 // —— 全局右键菜单（用于会话列表 / 文件面板等，通过 Teleport 渲染到 body）——
 // --fe-* 变量在 :root 全局可继承，菜单元素样式不受所在 DOM 位置影响。
 .context-menu {