diff --git a/docs/fork-customizations.md b/docs/fork-customizations.md
new file mode 100644
index 00000000..15617f38
--- /dev/null
+++ b/docs/fork-customizations.md
@@ -0,0 +1,366 @@
+# Fork 定制记录
+
+> 本文档记录本 fork（`SsparKluo/OpenCodeUI`，作者 Louis LUO `<ssparkluo@gmail.com>`）相对于上游 `lehhair/OpenCodeUI` 的全部定制改动，**目的是在未来 merge upstream 时作为参考**：知道改了什么、为什么改、改了哪些文件，从而预判冲突、避免回退、快速重应用。
+
+最后核对基准：上游 `main` = `c49fb49f`（v0.6.34），fork 集成分支 `dev` = `c6898e6d`。
+
+---
+
+## 1. 分支模型
+
+| 分支            | 角色                                                                 |
+| --------------- | -------------------------------------------------------------------- |
+| `upstream/main` | 上游 `lehhair/OpenCodeUI` 主干                                       |
+| `main`          | **纯上游镜像**，始终与 `upstream/main` 对齐（`merge-base` 相同）     |
+| `dev`           | **fork 集成分支**，所有 Louis 的定制都在这里；下游功能分支从此拉出   |
+| `feat/*`、`fix/*`| 主题功能分支，完成后合并回 `dev`                                     |
+| `deploy/cloudflare` | Cloudflare 部署相关配置分支（当前 checkout）                     |
+
+**合并 upstream 的标准流程**：`git fetch upstream` → 在 `dev` 上 `git merge upstream/main` → 参考**第 3 节**逐个冲突点核对意图 → 解决冲突后跑 `pnpm test`。`main` 分支仅用于 fast-forward 到 `upstream/main`，**不要在 main 上做任何 fork 改动**。
+
+---
+
+## 2. 定制概览（按主题）
+
+fork 共有约 70 个非合并提交，归为 12 个主题。下表按「上游冲突风险」排序——风险越高，merge upstream 时越需要重点关注。
+
+| # | 主题                       | 类型      | 冲突风险 | 主要文件                                        |
+| - | -------------------------- | --------- | -------- | ----------------------------------------------- |
+| 1 | 滚动系统重构（v2）         | 重写      | 🔴 高    | `useAutoScroll.ts`、`ChatArea.tsx`              |
+| 2 | 移动端输入框折叠           | 重写      | 🔴 高    | `InputBox.tsx`、`useMobileCollapse.ts`          |
+| 3 | 侧边栏 / 项目选择器重构    | 重写      | 🔴 高    | `SidePanel.tsx`、`Header.tsx`、`useSessions.ts` |
+| 4 | 模型选择器移到输入栏       | UI 迁移   | 🟡 中    | `Header.tsx`、`InputToolbar.tsx`、`ModelSelector.tsx` |
+| 5 | per-block 自动展开控制     | 功能+设置 | 🟡 中    | `MessageRenderer.tsx`、各 PartView、`themeStore.ts` |
+| 6 | 触摸手势 / iOS Safari      | 平台修复  | 🟡 中    | `ChatArea.tsx`、`scrollGesture.ts`、`index.css` |
+| 7 | Diff / 代码预览复制按钮    | 功能      | 🟡 中    | `DiffViewer.tsx`、`CodePreview.tsx`、`diffFormat.ts` |
+| 8 | API 错误处理 / 鉴权        | 健壮性    | 🟢 低    | `sdk.ts`、`errorHandling.ts`、`ServersSettings.tsx` |
+| 9 | aggregateStepFinish 选项   | 功能+设置 | 🟢 低    | `MessageRenderer.tsx`、`ChatSettings.tsx`       |
+| 10 | 文本选择浮窗 Quote/Copy   | 功能      | 🟡 中    | `TextSelectionPopup.tsx`、`popupUtils.ts`、`ChatPane.tsx` |
+| 11 | 队列消息输入栏             | 功能      | 🟡 中    | `QueuedMessagesBar.tsx`、`useChatSession.ts`、`ChatPane.tsx` |
+| 12 | Cloudflare 部署           | 部署专属  | 🟢 低    | `workers/api-proxy/`、`.github/workflows/`      |
+
+---
+
+## 3. 主题详解
+
+### 3.1 滚动系统重构（v2 — 输入事件驱动）🔴
+
+**目的**：上游的聊天滚动实现存在抖动、跟随不可靠、加载新内容时跳屏等问题。fork 用 `@tanstack/react-virtual` 虚拟化聊天页面，配合自研的 `useAutoScroll` hook 重建整个滚动系统。
+
+**架构演进（v1 → v2）**：
+- **v1**（`markBoundaryGesture` + 250ms 时间窗）：用 opencode 的 `markBoundaryGesture` 手工标记手势边界，搭配 `isAuto`/`markAuto` 给程序滚动打标（2px 容差 + 1500ms TTL token）来区分程序 vs 用户滚动。局限：浏览器滚动事件没有 JS 前驱事件（layout shift / find-in-page / history restore）无法归因。
+- **v2**（输入事件驱动，`2026-07`）：彻底移除 `markAuto`/`isAuto`。在 **input 事件层**（wheel/touch/pointerdown/keydown/selectionchange）判断用户意图，`handleScroll` 降级为纯响应（clear `userScrolled` 当返回底部、schedule recover-pin 当漂移）。单一 10px 阈值替代原本 10/60-150/80 分裂阈值。
+
+**关键设计**：
+- 聊天页面按 `chatPageModel.ts` 分页，**倒序存储、正序渲染**（最旧页面在顶部）。
+- `useAutoScroll` 维护「跟随模式」（`userScrolled` ref），用户向上滚动超出 10px 阈值即脱离跟随，返回底部阈值内自动重新跟随。
+- 滚动跟随 vs 自定义滚动条整合：全局 `overlayScrollbar.ts` 隐藏原生滚动条并渲染 `.os-thumb` 层。`useAutoScroll` 通过自定义事件 `OS_DRAG_START`/`OS_DRAG_END` 感知滚动条拖拽（原生 scrollbar-width:none 使原 pointerdown 启发式失效）。
+- Capsule reasoning、BashRenderer、TaskRenderer 的「智能滚动」统一 60px 阈值（`0c729b0`），仅当距底部 ≤60px 时自动跟随流式内容。
+- selectionchange 仅在**流式活跃时**才触发脱离跟随（`c56183f7`）：空闲时选文字复制/引用不打断跟随。
+- 方向感知触摸恢复：`onTouchEnd` 仅在 `touchMaxDownRef > 10`（真实向下拖拽）时尝试恢复跟随，避免轻触/上划回弹误触发。
+- `<ChatArea>` 用 `@tanstack/react-virtual` 的 `anchorTo:"end"` + `resizeItem` 覆盖 + `overflowAnchor:"none"`，完全通过该路径控制滚动。
+
+**输入事件归因规则**：
+- wheel-up 且 target 在 chat root 或 `[data-scrollable]` 内 → 停止跟随（忽略侧栏/输入框/textarea 目标）
+- touchstart / pointerdown 在 scrollbar region 或 chat root 包含嵌套 → 停止
+- selectionchange 非空 → 停止（仅流式时生效）；清除 → 停止
+- scroll 事件驱动的 tryRecover 仅限于：wheel deltaY>0、ArrowDown/PageDown/End、OS_DRAG_END（滚动条拖到底）
+
+**涉及文件**：
+- `src/features/chat/virtual/useAutoScroll.ts`（+ `.test.tsx`）— 核心实现，**几乎全量重写**
+- `src/features/chat/ChatArea.tsx` — 虚拟化容器，托管 scroll-follow
+- `src/features/chat/chatPageModel.ts` + `ChatArea.test.ts` — 页面模型
+- `src/features/chat/ChatPane.tsx`
+- `src/lib/overlayScrollbar.ts` — 自定义滚动条，派发 OS_DRAG 事件
+- `src/features/message/parts/ReasoningPartView.tsx`、`src/features/message/tools/renderers/TaskRenderer.tsx` — 智能滚动适配
+- `src/features/chat/DESIGN.md` — 滚动跟随设计文档
+
+**关键 commits**（按 dev 上的最新版本）：
+- （v1 基础）`f3b5c6a` feat: overhaul scroll system with useAutoScroll + @tanstack/react-virtual
+- （v1 基础）`85cd3c7` fix: reverse chat page order so oldest messages render first
+- （v1 基础）`1c5c18c` refactor: replace 250ms scroll gesture window with markBoundaryGesture
+- `4a897f25` refactor(chat): input-event-driven scroll-follow redesign（v2 核心）
+- `7b00a87` refactor(chat): eliminate stopPendingRef, single-state recovery
+- `c56183f7` feat(chat): selection only affects follow state during active streaming
+- `ee1dbf3` feat(chat): wheel inside nested scrollable always stops follow
+- `db178c8` feat(chat): direction-aware touch recovery + overlayScrollbar events
+- `33c887b0` feat(chat): align nested scroll gestures with upstream boundary
+- `ba574d0` feat(chat): only expanding disclosure stops follow, collapsing doesn't
+- `4b316ee` fix(chat): clearing selection no longer changes follow state
+- `354b11c` fix(chat): preserve stop intent for tiny wheel-up via stopPending
+- `7cfa63d` fix(reasoning): keep capsule scroll when scrolled up during streaming
+- `cdb7e0f` fix(message): stop entry-grow animation on cleanup to avoid stuck height under StrictMode
+
+> ⚠️ **上游冲突高发区**。上游对 `ChatArea` / 滚动逻辑改动频繁，每次 merge 几乎必然冲突。核对意图时优先保证 `useAutoScroll` 的「跟随/脱离/回弹」语义不被破坏，特别留意 `overflowAnchor:"none"` 和 `anchorTo:"end"` 不被上游覆盖。
+
+---
+
+### 3.2 移动端输入框折叠 🔴
+
+**目的**：移动端输入框展开/收起原本用 auto-collapse，体验割裂。fork 改为**手动折叠 + CSS `grid-rows` 过渡**，并把 textarea 高度测量从直接读 DOM 改为**隐藏 mirror 元素**测量，避免输入时布局抖动和页脚被顶出可视区。
+
+**关键设计**：
+- `InputBox.tsx` 用 CSS grid 双行轨道（展开行 / 折叠行）做过渡，折叠时**完全回收**空间（不留 gap — `587f580`）。
+- textarea 高度由 `measureTextareaContentHeight.ts` 隐藏 mirror 测量，`useTextareaAutoHeight.ts` 消费；不再在 auto-resize 时重置高度（`e9bff81`）。
+- Mention/SlashCommand 菜单移出 `overflow-hidden` 容器，防止被裁切（`46a079d`）。
+
+**涉及文件**：
+- `src/features/chat/InputBox.tsx` — **重灾区**，几乎每次 merge 都冲突
+- `src/features/chat/input/useMobileCollapse.ts`
+- `src/features/chat/input/useTextareaAutoHeight.ts`
+- `src/features/chat/input/measureTextareaContentHeight.ts`（新增）
+- `src/features/chat/input/InputActions.tsx`、`InputToolbar.tsx`
+- `src/constants/ui.ts`
+
+**关键 commits**：
+- `d89d815` refactor: mobile input collapse bar with CSS grid-rows transition
+- `a28cac2` refactor: replace auto-collapse with manual collapse toggle on mobile
+- `55c41ca` fix: restructure expanded track grid so collapse fully reclaims space
+- `c5b3601` fix: use textarea mirror for stable height measurement
+- `92fbf69` fix: use hidden mirror element to measure textarea content height
+- `e9bff81` fix: remove unnecessary textarea height reset on auto-resize
+- `587f580` fix: remove collapsed input track gap over chat history
+- `b2b8776` fix: drop expandedHeight reference
+- `46a079d` fix: move MentionMenu/SlashCommandMenu outside overflow-hidden
+- `8911b67` fix(chat): make collapsed input dock click-through except capsule
+- `a7d6d75` fix(chat): 修复输入框折叠的两个滚动态bug
+
+---
+
+### 3.3 侧边栏 / 项目选择器重构 🔴
+
+**目的**：重做侧边栏顶部交互——用「添加项目」按钮替换原项目选择器，并新增**工作区 header location**（会话头部显示/切换所属工作区目录）。同时让 Sidebar 始终挂载，修复折叠/展开过渡丢失的问题。
+
+**关键设计**：
+- `SidePanel.tsx` 顶部改为「Open Project」按钮 + 工作区列表。
+- 新增 `SessionHeaderLocation.tsx` / `SessionHeaderLocationPicker.tsx` / `sessionHeaderContext.ts`，把工作区目录绑定到会话 header。
+- 新增 `useRecentWorkspaceDirectories.ts`、`useSwitchWorkspaceDirectory.ts`、`recentWorkspaceDirectories.ts`、`draftNewChatSession.ts` 等工具。
+- `Sidebar.tsx` 始终挂载（`7f16c55`），靠 CSS 控制可见性，保证过渡动画。
+
+**涉及文件**：
+- `src/features/chat/sidebar/SidePanel.tsx`、`FolderRecentList.tsx`
+- `src/features/chat/Header.tsx`、`PaneHeader.tsx`
+- `src/features/chat/SessionHeaderLocation.tsx`、`SessionHeaderLocationPicker.tsx`、`sessionHeaderContext.ts`（新增）
+- `src/features/chat/sidebar/{draftNewChatSession,recentWorkspaceDirectories}.ts`（新增）
+- `src/features/chat/{useRecentWorkspaceDirectories,useSwitchWorkspaceDirectory}.ts`（新增）
+- `src/features/sessions/SessionList.tsx`、`src/hooks/useSessions.ts`
+- `src/features/chat/{Sidebar.tsx,ChatPane.tsx,InputBox.tsx}`、`src/App.tsx`
+
+**关键 commits**：
+- `261e7b4` refactor: replace project selector with add-project button, add workspace header location
+- `c7527af` feat: rename 'add project' to 'open project' and always show new chat in sidebar
+- `7f16c55` fix: restore sidebar collapse/expand transition by always mounting Sidebar
+- `50c7876` fix: clean up merge fallout — 上次 merge upstream 后的清理性修复
+
+---
+
+### 3.4 模型选择器移到输入栏 🟡
+
+**目的**：把模型选择器从顶部 Header 移到输入框工具栏，让用户在输入时即可切换模型，释放 Header 空间。
+
+**涉及文件**：
+- `src/features/chat/Header.tsx` — 移除 ModelSelector
+- `src/features/chat/input/InputToolbar.tsx` — 接入 ModelSelector
+- `src/features/chat/ModelSelector.tsx`
+- `src/features/chat/ChatPane.tsx`
+
+**关键 commits**：
+- `15f3ed2` feat: move model selector from header to input toolbar
+
+> 上游若调整 Header 或 InputToolbar 布局会冲突；语义上很简单，冲突时保留「ModelSelector 在 InputToolbar」即可。
+
+---
+
+### 3.5 per-block 自动展开控制 🟡
+
+**目的**：给 reasoning / subtask / tool 等消息块增加**逐块自动展开控制**，并新增「沉浸式未读工具折叠」模式——活跃工具运行期间，未读的工具块按用户偏好折叠，避免刷屏。
+
+**关键设计**：
+- 新增 `utils/blockCollapseMode.ts`（+ test）定义折叠模式枚举。
+- 设置项写入 `themeStore.ts`，UI 在 `ChatSettings.tsx`。
+- 各 `PartView` 根据 mode + 「是否活跃运行」决定展开/折叠。
+
+**涉及文件**：
+- `src/features/message/MessageRenderer.tsx`
+- `src/features/message/parts/{ReasoningPartView,SubtaskPartView,ToolPartView}.tsx`
+- `src/utils/blockCollapseMode.ts`（新增）+ `.test.ts`
+- `src/features/settings/components/ChatSettings.tsx`
+- `src/store/themeStore.ts`
+
+**关键 commits**：
+- `a589062` feat: per-block auto-expand control with immersive unread tool option
+- `1c455ca` fix: respect immersive unread tool collapse mode during active tool run
+
+---
+
+### 3.6 触摸手势 / iOS Safari 🟡
+
+**目的**：移动端在 `ChatArea` 上需要同时支持**水平翻页（pager）手势**和**纵向滚动**，但 iOS Safari 默认 `touch-action` 会拦截斜向手势。fork 通过 `touch-pan-y` + 沿 DOM 链向上传播，让 pager 与滚动共存。（曾尝试给 popup 开启垂直 touch pan，最终 revert——iOS 上副作用大于收益。）
+
+**涉及文件**：
+- `src/features/chat/ChatArea.tsx`、`ChatPane.tsx`
+- `src/features/chat/scrollGesture.ts`、`useScrollGestureDetector.ts`（+ tests）
+- `src/index.css` — `touch-action` 相关规则
+
+**关键 commits**：
+- `9a33b19` fix: add touch-pan-y to ChatArea to allow horizontal pager gestures on mobile
+- `fa3c13c` fix: propagate touch-pan-y up the DOM chain to enable horizontal pager gestures
+- `e0e4397`→`41d9ec7`（已 revert）尝试给 iOS Safari popup 开启垂直 touch pan
+
+---
+
+### 3.7 Diff / 代码预览复制按钮 🟡
+
+**目的**：给 diff viewer 和 code preview 加复制按钮，提升可用性。`diffFormat.ts` 抽取统一的 diff 文本格式化逻辑。
+
+**涉及文件**：
+- `src/components/DiffViewer.tsx`（+ `.test.tsx`）、`DiffView.tsx`
+- `src/components/CodePreview.tsx`（+ `.test.tsx`）
+- `src/components/ContentBlock.tsx`、`SessionChangesPanel.tsx`
+- `src/features/message/tools/renderers/DefaultRenderer.tsx`
+- `src/utils/diffFormat.ts`（+ `.test.ts`）
+
+**关键 commits**：
+- `69892a4` feat: add copy button to diff viewer and code preview
+- `c30ded2` fix: close JSX expression in CopyButton conditional render（构建修复）
+
+---
+
+### 3.8 API 错误处理 / 鉴权 🟢
+
+**目的**：上游对 opencode server 错误静默失败，fork 把错误**通过 toast 显式暴露给用户**；并支持**在默认 server 上配置鉴权凭据**（原本只能对自定义 server 配）；**允许在存在其他 server 时删除默认 server**（桌面端除外——桌面端的默认 server 既是配置项也是 app 后端）。
+
+**关键设计**（默认 server 可删除）：
+- `serverStore.removeServer` 守卫由 `server.isDefault` 改为 `server.isDefault && (isTauri() || servers.length <= 1)`。
+- 桌面端（`isTauri()`）禁止删除默认 server——避免 `ServiceSettings` 的「启动本地服务」功能静默失效（`setLocalServerRuntimeUrl` 依赖默认 server 存在）。
+- UI 上删除按钮对默认 server 在 `!isTauri() && servers.length > 1` 时显示；编辑按钮仍隐藏（保持作用域最小）。
+- 持久化无改动——`loadFromStorage` 的「空列表重建默认」逻辑是安全的，因为删除默认 server 必导致列表非空。唯一能清空列表的路径（删完所有 server）会触发重建默认，这是合理的 reset 行为。
+
+**涉及文件**：
+- `src/api/sdk.ts`、`src/utils/errorHandling.ts`（新增）
+- `src/contexts/SessionContext.tsx`、`src/hooks/useSessions.ts`
+- `src/features/chat/sidebar/{FolderRecentList,SidePanel}.tsx`（错误展示接入点）
+- `src/features/settings/components/ServersSettings.tsx`（+ `.test.tsx`）
+- `src/store/serverStore.ts`（+ `.test.ts`）— 删除守卫
+
+**关键 commits**：
+- `ad838c6` fix: surface opencode server errors to users via toast
+- `edd8f49` fix: allow configuring auth credentials on the default server
+- （pending）feat: allow deleting the default server when others exist (non-desktop)
+
+---
+
+### 3.9 aggregateStepFinish 选项 🟢
+
+**目的**：新增设置项控制 step-finish 事件的展示方式（聚合显示），写入 `themeStore`。
+
+**涉及文件**：
+- `src/features/message/MessageRenderer.tsx`（+ `.test.tsx`）
+- `src/features/settings/components/ChatSettings.tsx`
+- `src/store/themeStore.ts`
+
+**关键 commits**：
+- `9fc58a6` feat: add aggregateStepFinish option for step-finish display
+
+---
+
+### 3.10 文本选择浮窗 Quote/Copy 🟡
+
+**目的**：在聊天面板选中文本时浮出 Quote 和 Copy 按钮，提升引用/复制体验。Quote 将选中文本转为 Markdown 块引用，插入当前面板输入框的光标位置；Copy 将原文写入剪贴板。
+
+**关键设计**：
+- 全局挂载一次（`App.tsx`），通过 `createPortal` 渲染到 `document.body`。
+- `selectionchange` 仅维护 pending ref，浮窗在 `mouseup/touchend/Shift+Arrow keyup` 才提交，避免拖拽过程中闪烁。
+- 定位依据鼠标/触摸释放点或键盘选择的 selection rect。
+- 自动关闭条件：外部 pointerdown、scroll、resize、Escape 键。
+- `data-pane-id` 添加到 ChatPane 根元素，使跨分屏面板的选择能解析到正确的 textarea。
+- 过滤 `<input>` / `<textarea>` / `contenteditable` / `[data-no-selection-popup]` 内的选择。
+- Quote 间距遵循 Slack/Notion 惯例（至少一个空行环绕块引用）。
+
+**涉及文件**：
+- `src/features/text-selection-popup/TextSelectionPopup.tsx`（+ `.test.tsx`）— 浮窗组件
+- `src/features/text-selection-popup/popupUtils.ts`（+ `.test.ts`）— 工具函数
+- `src/App.tsx` — 全局挂载
+- `src/features/chat/ChatPane.tsx` — `data-pane-id`
+- `src/locales/{en,zh-CN}/chat.json` — i18n
+
+**关键 commits**：
+- `51a0ec6` feat(text-selection-popup): Quote + Copy actions on chat text selection
+
+---
+
+### 3.11 队列消息输入栏 🟡
+
+**目的**：当会话忙（`isSessionBusy`）时，用户发送的消息不再丢弃或静默排队，而是以 `QueuedFollowupDraft` 存储在 `followupQueueStore` 中，并在输入区域上方显示 `QueuedMessagesBar`，让用户知道消息已排队、等待发送。
+
+**关键设计**：
+- 忙时发送的消息包装为 `QueuedFollowupDraft`，keyed by session ID。
+- 本地占位 `UIMessage`（ID 前缀 `queued_`）插入时间线，通过 `messageStore.upsertLocalMessage` 渲染为普通 `UserMessageView`（无视觉区分）。
+- `QueuedMessagesBar` 显示在输入框上方，展示队列数量。
+- `isSessionBusy` 变 false 时 effect 出队头消息、移除占位、走正常发送路径。
+
+**涉及文件**：
+- `src/features/chat/input/QueuedMessagesBar.tsx`（新增）
+- `src/features/chat/ChatPane.tsx`、`InputBox.tsx`
+- `src/hooks/useChatSession.ts`
+- `src/features/chat/input/InputActions.tsx`
+
+**关键 commits**：
+- `bf61aef` feat(chat): replace queue placeholder messages with QueuedMessagesBar in input area
+
+---
+
+### 3.12 Cloudflare 部署 🟢
+
+**目的**：fork 专属的 Cloudflare Pages + Workers 部署链路。上游无此部分，**理论上不会与上游冲突**（文件隔离），但 merge 后需确认 `pnpm-workspace.yaml` / `package.json` 的 workspace 声明没被上游覆盖。
+
+**关键设计**：
+- `workers/api-proxy/`：独立子包，用 wrangler 部署的 API 代理 Worker；**显式转发请求头**（`58f57ac`，标准 `RequestInit`）。
+- CI 用 `pnpm --ignore-workspace` 让 api-proxy 独立安装，缓存键单独维护。
+- Pages 用 `_routes.json` 优化路由（`be41fe7`），仅必要路径走 Functions。
+
+**涉及文件**：
+- `workers/api-proxy/`（`src/index.ts`、`wrangler.toml`、`package.json`、`tsconfig.json`、`vitest.config.ts`）
+- `.github/workflows/deploy-worker.yml`、`deploy.yml`
+- `docs/cloudflare-pages.md`
+- `functions/`（Cloudflare Pages Functions）
+- `pnpm-workspace.yaml`（声明 workers/api-proxy 为 workspace 成员）
+
+**关键 commits**：
+- `be41fe7` feat(cloudflare): optimize Pages deployment with `_routes.json`
+- `356d8d5` fix(ci): repair deploy-worker pnpm cache on non-monorepo root
+- `6cba3ad` fix(ci): use `pnpm --ignore-workspace` for isolated api-proxy
+- `58f57ac` fix(worker): explicitly forward request headers via standard RequestInit
+- `891a21d` docs(cloudflare): `pnpm install --ignore-workspace` for local api-proxy
+
+---
+
+## 4. 上游合并备忘
+
+### 4.1 必然冲突的「热线」文件
+
+以下文件被多个主题反复修改，且上游也频繁改动，merge 时几乎必冲突：
+
+- `src/features/chat/ChatArea.tsx`（滚动 + 触摸 + 输入事件归因）
+- `src/features/chat/InputBox.tsx`（移动端折叠 + 点击穿透）
+- `src/features/chat/Header.tsx`（侧边栏 + 模型选择器）
+- `src/features/chat/ChatPane.tsx`（多个主题接入 + data-pane-id + QueuedMessagesBar）
+- `src/features/message/MessageRenderer.tsx`（per-block + aggregateStepFinish + entry-grow）
+- `src/features/chat/virtual/useAutoScroll.ts`（滚动核心，几乎全量重写）
+- `src/features/chat/input/QueuedMessagesBar.tsx`（新增，队列消息展示）
+- `src/features/text-selection-popup/TextSelectionPopup.tsx`（新增，选中文本浮窗）
+
+### 4.2 合并后自检清单
+
+1. `pnpm install`（确认 `pnpm-workspace.yaml` 仍含 `workers/api-proxy`）
+2. `pnpm test`（重点看 `useAutoScroll`、`blockCollapseMode`、`diffFormat`、`chatPageModel`、`TextSelectionPopup` 相关测试）
+3. 移动端实测：输入框折叠/展开过渡、折叠点击穿透、水平翻页手势、textarea 高度跟随
+4. 桌面端实测：模型选择器在输入栏、侧边栏「Open Project」、会话 header 工作区切换
+5. 滚动实测：跟随/脱离/回弹、输入事件归因（空闲选择不打断跟随、capsule 流式不拽回）、新内容增长时位置保持
+6. 文本选中浮窗：Quote/Copy 在各面板（含分屏）中的定位正确性、自动关闭
+7. 队列消息：忙时发送后看到 QueuedMessagesBar、忙完自动发送
+8. Cloudflare 部署链路（若该分支要发布）：`pnpm --ignore-workspace` 在 `workers/api-proxy` 可独立构建
+
+### 4.3 维护本文档
+
+每次 merge upstream 或新增 fork 主题后，**同步更新第 2、3 节**：新增主题补进概览表，已有主题追加 commits 和文件。保持「每个定制都有目的 + 文件 + commit」三元组，未来任何一次 merge 都能快速还原意图。
diff --git a/src/App.tsx b/src/App.tsx
index a9a6412c..08124b6d 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -4,6 +4,7 @@ import { invoke } from '@tauri-apps/api/core'
 import { Sidebar } from './features/chat'
 import { ChatPane } from './features/chat/ChatPane'
 import { SplitContainer } from './features/chat/SplitContainer'
+import { TextSelectionPopup } from './features/text-selection-popup'
 import type { CommandItem } from './components/CommandPalette'
 import { ToastContainer } from './components/ToastContainer'
 import { RightPanel } from './components/RightPanel'
@@ -927,7 +928,6 @@ function App() {
                     onNewSession={handleNewSession}
                     onOpen={handleOpenSidebar}
                     onClose={handleCloseSidebar}
-                    contextLimit={focusedController?.contextLimit}
                     onOpenSettings={openSettings}
                     projectDialogOpen={projectDialogOpen}
                     onProjectDialogClose={closeProjectDialog}
@@ -1013,7 +1013,6 @@ function App() {
                 onNewSession={handleNewSession}
                 onOpen={handleOpenSidebar}
                 onClose={handleCloseSidebar}
-                contextLimit={focusedController?.contextLimit}
                 onOpenSettings={openSettings}
                 projectDialogOpen={projectDialogOpen}
                 onProjectDialogClose={closeProjectDialog}
@@ -1045,6 +1044,7 @@ function App() {
             </>
           )}
           <ToastContainer onOpenAbout={openAboutSettings} />
+          <TextSelectionPopup />
         </div>
 
         <Suspense fallback={null}>
diff --git a/src/components/CodeBlock.tsx b/src/components/CodeBlock.tsx
index 5a46bb8e..951f261c 100644
--- a/src/components/CodeBlock.tsx
+++ b/src/components/CodeBlock.tsx
@@ -236,7 +236,7 @@ export const CodeBlock = memo(function CodeBlock({
         className={`rounded-sm overflow-hidden bg-bg-200/25 contain-content ${className}`}
         style={containerStyle}
       >
-        <div className={scrollClasses} style={maxHeight ? { maxHeight } : undefined}>
+        <div data-scrollable className={scrollClasses} style={maxHeight ? { maxHeight } : undefined}>
           {content}
         </div>
       </div>
@@ -275,7 +275,7 @@ export const CodeBlock = memo(function CodeBlock({
       )}
 
       {/* Scrollable content */}
-      <div className={scrollClasses} style={maxHeight ? { maxHeight } : undefined}>
+      <div data-scrollable className={scrollClasses} style={maxHeight ? { maxHeight } : undefined}>
         {content}
       </div>
     </div>
diff --git a/src/components/DiffViewer.tsx b/src/components/DiffViewer.tsx
index 8bc964ef..cfbd173c 100644
--- a/src/components/DiffViewer.tsx
+++ b/src/components/DiffViewer.tsx
@@ -773,6 +773,7 @@ const WrappedSplitDiffView = memo(function WrappedSplitDiffView({
   return (
     <div
       ref={containerRef}
+      data-scrollable
       className="overflow-y-auto overflow-x-hidden custom-scrollbar font-mono text-[length:var(--fs-code)] h-full"
       onScroll={handleScroll}
       style={maxHeight !== undefined ? { maxHeight } : undefined}
@@ -1115,6 +1116,7 @@ const SplitDiffView = memo(function SplitDiffView({
   return (
     <div
       ref={containerRef}
+      data-scrollable
       className="overflow-y-auto overflow-x-hidden custom-scrollbar font-mono text-[length:var(--fs-code)] h-full"
       style={maxHeight !== undefined ? { maxHeight } : undefined}
       onScroll={handleScroll}
@@ -1418,6 +1420,7 @@ const UnifiedDiffView = memo(function UnifiedDiffView({
   return (
     <div
       ref={containerRef}
+      data-scrollable
       className="overflow-y-auto overflow-x-hidden custom-scrollbar font-mono text-[length:var(--fs-code)] h-full"
       style={maxHeight !== undefined ? { maxHeight } : undefined}
       onScroll={handleScroll}
@@ -1586,6 +1589,7 @@ const WrappedUnifiedDiffView = memo(function WrappedUnifiedDiffView({
   return (
     <div
       ref={containerRef}
+      data-scrollable
       className="overflow-y-auto overflow-x-hidden custom-scrollbar font-mono text-[length:var(--fs-code)] h-full"
       onScroll={handleScroll}
       style={maxHeight !== undefined ? { maxHeight } : undefined}
diff --git a/src/components/Icons.tsx b/src/components/Icons.tsx
index 4a369456..f20d9d06 100644
--- a/src/components/Icons.tsx
+++ b/src/components/Icons.tsx
@@ -14,6 +14,7 @@ import {
   Check,
   Send,
   Plus,
+  Quote,
   GraduationCap,
   Settings,
   Sun,
@@ -123,6 +124,7 @@ export const KeyboardIcon = wrap(Keyboard)
 export const CheckIcon = wrap(Check)
 export const SendIcon = wrap(Send)
 export const PlusIcon = wrap(Plus)
+export const QuoteIcon = wrap(Quote)
 export const TeachIcon = wrap(GraduationCap)
 export const SettingsIcon = wrap(Settings)
 export const SunIcon = wrap(Sun)
diff --git a/src/components/MarkdownRenderer.tsx b/src/components/MarkdownRenderer.tsx
index a5bded44..73f9900f 100644
--- a/src/components/MarkdownRenderer.tsx
+++ b/src/components/MarkdownRenderer.tsx
@@ -1581,7 +1581,7 @@ export const HighlightedCode = memo(function HighlightedCode({
   }, [filePath, language])
 
   return (
-    <div className={`overflow-auto ${className}`} style={maxHeight ? { maxHeight } : undefined}>
+    <div data-scrollable className={`overflow-auto ${className}`} style={maxHeight ? { maxHeight } : undefined}>
       <CodeBlock code={code} language={lang} />
     </div>
   )
diff --git a/src/components/ui/ScrollArea.tsx b/src/components/ui/ScrollArea.tsx
index 634e236c..9b3f05b8 100644
--- a/src/components/ui/ScrollArea.tsx
+++ b/src/components/ui/ScrollArea.tsx
@@ -17,6 +17,7 @@ export const ScrollArea = forwardRef<HTMLDivElement, ScrollAreaProps>(
     return (
       <div
         ref={ref}
+        data-scrollable
         className={`overflow-y-auto overflow-x-hidden ${className}`}
         style={{
           maxHeight: typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight,
diff --git a/src/features/chat/ChatArea.tsx b/src/features/chat/ChatArea.tsx
index 7fc7a559..1622b9d2 100644
--- a/src/features/chat/ChatArea.tsx
+++ b/src/features/chat/ChatArea.tsx
@@ -43,6 +43,7 @@ import {
 import { useTheme } from '../../hooks/useTheme'
 import { getStreamingHotIndexes, getTimelineRowYClass, mergeVirtualRangeIndexes } from './chatAreaUtils'
 import { useAutoScroll } from './virtual/useAutoScroll'
+import { AutoScrollProvider } from '../../hooks/AutoScrollContext'
 import { useEmptyWorkingShellGate } from './virtual/useEmptyWorkingShellGate'
 
 const NOOP = () => {}
@@ -98,6 +99,8 @@ interface ChatAreaProps {
   bottomPadding?: number
   onVisibleMessageIdsChange?: (ids: string[]) => void
   onAtBottomChange?: (atBottom: boolean) => void
+  /** 用户跟随状态变化时调用：true=正在贴底跟随，false=用户主动停止跟随 */
+  onFollowingChange?: (following: boolean) => void
 }
 
 export type ChatAreaHandle = {
@@ -342,6 +345,7 @@ export const ChatArea = memo(
         bottomPadding = 0,
         onVisibleMessageIdsChange,
         onAtBottomChange,
+        onFollowingChange,
       },
       ref,
     ) => {
@@ -441,6 +445,8 @@ export const ChatArea = memo(
       onVisibleIdsRef.current = onVisibleMessageIdsChange
       const onAtBottomRef = useRef(onAtBottomChange)
       onAtBottomRef.current = onAtBottomChange
+      const onFollowingRef = useRef(onFollowingChange)
+      onFollowingRef.current = onFollowingChange
       const hasMoreRef = useRef(hasMoreHistory)
       hasMoreRef.current = hasMoreHistory
       const loadStateRef = useRef(loadState)
@@ -459,18 +465,24 @@ export const ChatArea = memo(
       const autoSetScrollRef = auto.setScrollRef
       const autoSetContentRef = auto.setContentRef
       const autoHandleScroll = auto.handleScroll
-      const autoHandleWheel = auto.handleWheel
-      const autoHandleInteraction = auto.handleInteraction
       const autoForceScroll = auto.forceScrollToBottom
       const autoScrollBottom = auto.scrollToBottom
       const autoPause = auto.pause
-      const autoMarkAuto = auto.markAuto
+      const autoSetStreaming = auto.setStreaming
       const userScrolledRef = auto.userScrolledRef
+      const autoSetPinToBottom = auto.setPinToBottom
       const spacerHeight = bottomSpacerHeight(bottomPadding)
       // 贴底判断必须读 ref：wheel→stop 后 state 还没 re-render，
       // 若仍用 state，同一帧的 ResizeObserver 会误判仍可贴底。
       const shouldAnchorBottom = () => !userScrolledRef.current
 
+      // 给 message tree 里的 disclosure widget 用：用户主动操作（展开/折叠）
+      // 时通知这里停止贴底跟随。值 stable（pause 是 useCallback），不会引起消费方 re-render。
+      const autoScrollCtxValue = useMemo(() => ({ pause: autoPause }), [autoPause])
+
+      // 同步 isStreaming 到 useAutoScroll —— selection 只在流式时才影响跟随
+      useEffect(() => { autoSetStreaming(isStreaming) }, [autoSetStreaming, isStreaming])
+
       // ── 滚动状态（同步计算，不使用 rAF） ──
       // prevState.bottom 仍是几何贴底，给 scrollToBottomIfAtBottom 用。
       // onAtBottomChange 给输入区 dock / 回底按钮：只反映 !userScrolled（用户意图），
@@ -536,7 +548,6 @@ export const ChatArea = memo(
         // 预写 total height，避免浏览器把新 offset clamp 到旧高度（oc 同款）
         scrollToFn: (offset, options, instance) => {
           if (contentRef.current) contentRef.current.style.height = `${instance.getTotalSize()}px`
-          autoMarkAuto(scrollRef.current)
           elementScroll(offset, options, instance)
         },
         anchorTo: 'end',
@@ -574,13 +585,13 @@ export const ChatArea = memo(
               })
             })
           }
-          // 核心修复：用户已上滚（userScrolledRef）时，临时关掉 anchorTo:'end'，
+          // 用户已上滚（userScrolledRef）时，临时关掉 anchorTo:'end'，
           // 阻止 virtual-core resizeItem 内部的 wasAtEnd 路径（applyScrollAdjustment 拉回）。
           // wasAtEnd 用 getVirtualDistanceFromEnd()（基于内部 scrollOffset），
           // 但 React commit 阶段 ref 回调触发 measureElement 时 scroll 事件还没 fire，
           // scrollOffset 是陈旧的（仍指向底部），wasAtEnd 误判为 true → 拉回。
-          // userScrolledRef 由 handleWheel 上滚设 true，只由 handleWheel 下滚回底设 false，
-          // handleScroll 不清它（避免流式增长推回时误清）。
+          // userScrolledRef 现在只由输入事件设置（useAutoScroll 的 wheel/touch/...），
+          // handleScroll 在用户回到底部阈值内时清掉。
           if (userScrolledRef.current) {
             const opts = (virtualizer as any).options
             const origAnchor = opts.anchorTo
@@ -598,7 +609,6 @@ export const ChatArea = memo(
               if (!(virtualizer as any).isAtEnd?.(80)) return
               const el = scrollRef.current
               if (!el) return
-              autoMarkAuto(el)
               const max = Math.max(0, el.scrollHeight - el.clientHeight)
               if (max - el.scrollTop >= 2) el.scrollTop = max
             })
@@ -731,10 +741,14 @@ export const ChatArea = memo(
         // 必须滚到整页底（含 retry/error + 输入框 spacer），不能只 scrollToEnd 虚拟消息区
         const el = scrollRef.current
         if (!el) return
-        autoMarkAuto(el)
         const max = Math.max(0, el.scrollHeight - el.clientHeight)
         if (max - el.scrollTop >= 2) el.scrollTop = max
-      }, [autoMarkAuto])
+      }, [])
+
+      // 把 pinToBottom 注入 useAutoScroll，让 drift 自愈路径能调到
+      useEffect(() => {
+        autoSetPinToBottom(pinToBottom)
+      }, [autoSetPinToBottom, pinToBottom])
 
       // ── 事件处理 ──
       const onScroll = useCallback(() => {
@@ -752,13 +766,9 @@ export const ChatArea = memo(
         autoHandleScroll()
       }, [updatePrependAnchor, computeScrollState, autoHandleScroll, loadMore, userScrolledRef])
 
-      const onWheel = useCallback(
-        (e: React.WheelEvent<HTMLDivElement>) => {
-          if (!prependLoading.current) clearPrepend()
-          autoHandleWheel(e.nativeEvent)
-        },
-        [autoHandleWheel, clearPrepend],
-      )
+      const onWheel = useCallback(() => {
+        if (!prependLoading.current) clearPrepend()
+      }, [clearPrepend])
 
       const onTouchStart = useCallback(() => {
         if (!prependLoading.current) clearPrepend()
@@ -825,6 +835,12 @@ export const ChatArea = memo(
         return () => cancelAnimationFrame(frame)
       }, [auto.userScrolled, autoScrollBottom, pinToBottom])
 
+      // 通知父组件跟随状态变化（toBottom 按钮的显隐依据）
+      // useLayoutEffect 避免新 session remount 时按钮闪烁
+      useLayoutEffect(() => {
+        onFollowingRef.current?.(!auto.userScrolled)
+      }, [auto.userScrolled])
+
       // fill effect
       useEffect(() => {
         if (!sessionId || loadState !== 'loaded' || isLoadingMore || auto.userScrolled || !hasMoreHistory) return
@@ -888,59 +904,43 @@ export const ChatArea = memo(
       }, [mountedMessageIdsKey])
 
       // ── 命令式接口 ──
-      useImperativeHandle(
-        ref,
-        () => ({
-          scrollToBottom: () => {
-            autoForceScroll()
-            pinToBottom()
-          },
-          scrollToBottomIfAtBottom: () => {
-            // userScrolled 守卫：用户上滚后 userScrolled=true，此函数由 onScrollRequest
-            //（每个 SSE chunk）调用。autoForceScroll() 的 force=true 会清掉 userScrolled，
-            // 导致 resizeItem 的 anchorTo toggle 失效 → wasAtEnd 恢复拉回。
-            // 不在此处清 userScrolled——用户主动下滚回底时 handleWheel 会清。
-            // 正常贴底跟随（userScrolled=false 时）不受影响。
-            if (userScrolledRef.current) return
-            if (!prevState.current.bottom) return
-            autoForceScroll()
-            pinToBottom()
-          },
-          scrollToLastMessage: () => {
-            if (timeline.length === 0) return
-            autoMarkAuto(scrollRef.current)
-            virtualizer.scrollToIndex(timeline.length - 1, { align: 'end' })
-          },
-          scrollToMessageIndex: (index: number) => {
-            // index 仍按 visibleMessages 语义；过程折叠时映射到 timeline 行
-            if (index < 0 || index >= visibleMessages.length) return
-            const messageId = visibleMessages[index]?.info.id
-            const timelineIndex = messageId != null ? (messageIdToTimelineIndex.get(messageId) ?? index) : index
-            if (timelineIndex < 0 || timelineIndex >= timeline.length) return
-            autoPause()
-            virtualizer.scrollToIndex(timelineIndex, { align: 'center' })
-          },
-          scrollToMessageId: (messageId: string) => {
-            const timelineIndex = messageIdToTimelineIndex.get(messageId)
-            if (timelineIndex == null) return
-            autoPause()
-            virtualizer.scrollToIndex(timelineIndex, { align: 'center' })
-          },
-        }),
-        [
-          autoForceScroll,
-          autoPause,
-          autoMarkAuto,
-          pinToBottom,
-          virtualizer,
-          timeline,
-          visibleMessages,
-          messageIdToTimelineIndex,
-        ],
-      )
+      useImperativeHandle(ref, () => ({
+        scrollToBottom: () => {
+          autoForceScroll()
+        },
+        scrollToBottomIfAtBottom: () => {
+          // 每个 SSE chunk 调用一次。userScrolled=true（用户主动操作过）时直接 return，
+          // 否则贴底。不再用 prevState.bottom 做二次门控——
+          // 用户手势是唯一停止信号，drift 之类不应该让 chunk 停止 pin。
+          if (userScrolledRef.current) return
+          pinToBottom()
+        },
+        scrollToLastMessage: () => {
+          if (timeline.length === 0) return
+          virtualizer.scrollToIndex(timeline.length - 1, { align: 'end' })
+        },
+        scrollToMessageIndex: (index: number) => {
+          // index 仍按 visibleMessages 语义；过程折叠时映射到 timeline 行
+          if (index < 0 || index >= visibleMessages.length) return
+          const messageId = visibleMessages[index]?.info.id
+          const timelineIndex = messageId != null
+            ? (messageIdToTimelineIndex.get(messageId) ?? index)
+            : index
+          if (timelineIndex < 0 || timelineIndex >= timeline.length) return
+          autoPause()
+          virtualizer.scrollToIndex(timelineIndex, { align: 'center' })
+        },
+        scrollToMessageId: (messageId: string) => {
+          const timelineIndex = messageIdToTimelineIndex.get(messageId)
+          if (timelineIndex == null) return
+          autoPause()
+          virtualizer.scrollToIndex(timelineIndex, { align: 'center' })
+        },
+      }), [autoForceScroll, autoPause, pinToBottom, virtualizer, timeline, visibleMessages, messageIdToTimelineIndex])
 
       return (
-        <div className="h-full overflow-hidden contain-strict relative">
+        <AutoScrollProvider value={autoScrollCtxValue}>
+          <div className="h-full overflow-hidden contain-strict relative">
           {loadState === 'loading' && visibleMessages.length === 0 && (
             <div className="absolute inset-0 z-10 flex items-center justify-center">
               <div className="flex flex-col items-center gap-3 text-text-400 session-loading-indicator">
@@ -961,7 +961,6 @@ export const ChatArea = memo(
             onWheel={onWheel}
             onTouchStart={onTouchStart}
             onScroll={onScroll}
-            onClick={autoHandleInteraction}
           >
             {visibleMessages.length > 0 && isLoadingMore && (
               <div className="flex justify-center py-3" aria-live="polite">
@@ -1032,7 +1031,8 @@ export const ChatArea = memo(
 
             <div style={{ height: spacerHeight }} aria-hidden="true" />
           </div>
-        </div>
+          </div>
+        </AutoScrollProvider>
       )
     },
   ),
diff --git a/src/features/chat/ChatPane.tsx b/src/features/chat/ChatPane.tsx
index a74515b3..604bca62 100644
--- a/src/features/chat/ChatPane.tsx
+++ b/src/features/chat/ChatPane.tsx
@@ -18,6 +18,8 @@ import { useFolderProjectDrop } from './useFolderProjectDrop'
 import { FolderProjectDropOverlay } from './FolderProjectDropOverlay'
 import { useChatSession, useModels, useModelSelection } from '../../hooks'
 import { useServerStore } from '../../hooks/useServerStore'
+import { followupQueueStore } from '../../store/followupQueueStore'
+import type { RevertHistoryItem } from '../../store/messageStoreTypes'
 import { useCancelHint } from '../../hooks/useCancelHint'
 import { makeSessionKey, sessionKeyToServerId } from '../../utils/sessionKey'
 import { serverStore } from '../../store/serverStore'
@@ -243,7 +245,10 @@ export const ChatPane = memo(function ChatPane({
     visibleMessageIdsRef.current = ids
     setVisibleMessageIds(ids)
   }, [])
-  const [isAtBottom, setIsAtBottom] = useState(true)
+  /** 用户是否在贴底跟随（true=正在跟随，false=用户主动停止）。
+   *  InputBox 折叠 / 回底按钮都由这个信号驱动（!userScrolled），
+   *  不跟几何 dist —— 流式增长时 dist 抖动会导致 isCollapsed 抖，InputFooter 闪烁。 */
+  const [isFollowing, setIsFollowing] = useState(true)
 
   const handleOutlineScrollToMessage = useCallback((messageId: string) => {
     chatAreaRef.current?.scrollToMessageId(messageId)
@@ -295,6 +300,10 @@ export const ChatPane = memo(function ChatPane({
     handleQuestionReject,
     isReplying,
 
+    queuedFollowups,
+    queuedFollowupFailedId,
+    queuedFollowupSendingId,
+
     loadMoreHistory,
     handleRedoAll,
     clearRevert,
@@ -303,6 +312,7 @@ export const ChatPane = memo(function ChatPane({
     registerInputBox,
 
     handleSend,
+    handleSendQueuedNow,
     handleAbort,
     handleCommand,
     handleUndoWithAnimation,
@@ -325,6 +335,53 @@ export const ChatPane = memo(function ChatPane({
     navigateHome,
   })
 
+  const handleRemoveQueuedMessage = useCallback(
+    (id: string) => {
+      if (routeSessionId) {
+        followupQueueStore.remove(routeSessionId, id)
+      }
+    },
+    [routeSessionId],
+  )
+
+  const handleCancelFailedQueuedMessage = useCallback(
+    (id: string) => {
+      if (routeSessionId) {
+        followupQueueStore.clearFailed(routeSessionId)
+        followupQueueStore.remove(routeSessionId, id)
+      }
+    },
+    [routeSessionId],
+  )
+
+  const handleRevertQueuedMessage = useCallback(
+    (id: string) => {
+      if (!routeSessionId) return
+      const item = followupQueueStore.getItem(routeSessionId, id)
+      if (!item) return
+      setQueuedRevertContent({
+        messageId: item.id,
+        text: item.text,
+        attachments: item.attachments,
+        model: item.model,
+        variant: item.variant,
+        agent: item.agent,
+      })
+      followupQueueStore.clearFailed(routeSessionId)
+      followupQueueStore.remove(routeSessionId, id)
+    },
+    [routeSessionId],
+  )
+
+  const handleReorderQueuedMessage = useCallback(
+    (draggedId: string, targetId: string) => {
+      if (routeSessionId) {
+        followupQueueStore.reorder(routeSessionId, draggedId, targetId)
+      }
+    },
+    [routeSessionId],
+  )
+
   const shouldDeferMessages = displayMode === 'split' && !isStreaming && messages.length > 20
   const messageView = useMemo(() => ({ sessionId: routeSessionId, messages }), [routeSessionId, messages])
   // Streaming never consumes the deferred value, so do not feed every token into a
@@ -343,7 +400,7 @@ export const ChatPane = memo(function ChatPane({
   // 切 session remount 时默认视为贴底，避免回底按钮闪一下
   useEffect(() => {
     if (chatAreaMountKey == null) return
-    setIsAtBottom(true)
+    setIsFollowing(true)
     setVisibleMessageIdsStable([])
   }, [chatAreaMountKey, setVisibleMessageIdsStable])
 
@@ -469,7 +526,16 @@ export const ChatPane = memo(function ChatPane({
   // 只在 session 切换（routeSessionId 变化）或 revert/undo 恢复时执行一次。
   // 流式输出期间 messages 变化不会触发，避免覆盖用户的模型选择。
   // ============================================
-  const inputRestoreContent = revertedContent ?? restoredContent
+  // queued-message revert：把队列中的消息拉回输入框编辑时暂存内容
+  const [queuedRevertContent, setQueuedRevertContent] = useState<RevertHistoryItem | null>(null)
+
+  const inputRestoreContent = queuedRevertContent ?? revertedContent ?? restoredContent
+
+  // 清除输入框恢复内容：同时清除 undo 恢复和队列恢复
+  const handleClearInputRevert = useCallback(() => {
+    clearRevert()
+    setQueuedRevertContent(null)
+  }, [clearRevert])
 
   // revert/undo 恢复：inputRestoreContent 变化时立即恢复
   useEffect(() => {
@@ -844,16 +910,11 @@ export const ChatPane = memo(function ChatPane({
         <div className="absolute top-0 left-0 right-0 z-20 pointer-events-none">
           <div className="pointer-events-auto">
             <Header
-              models={visibleModels}
-              modelsLoading={modelsLoading}
-              selectedModelKey={selectedModelKey}
-              onModelChange={handleModelChange}
               onOpenSidebar={onOpenSidebar}
               onToggleRightPanel={onToggleRightPanel}
               onSplitPane={onSplitPane}
               isPaneFullscreen={isPaneFullscreen}
               onTogglePaneFullscreen={onTogglePaneFullscreen}
-              modelSelectorRef={modelSelectorRef}
             />
           </div>
         </div>
@@ -894,7 +955,7 @@ export const ChatPane = memo(function ChatPane({
                 retryStatus={retryStatus}
                 bottomPadding={inputBoxHeight}
                 onVisibleMessageIdsChange={handleVisibleIdsChange}
-                onAtBottomChange={setIsAtBottom}
+                onFollowingChange={setIsFollowing}
               />
             )}
           </ErrorBoundary>
@@ -956,10 +1017,10 @@ export const ChatPane = memo(function ChatPane({
           revertSteps={redoSteps}
           onRedo={handleRedoWithAnimation}
           onRedoAll={handleRedoAll}
-          onClearRevert={clearRevert}
+          onClearRevert={handleClearInputRevert}
           registerInputBox={registerInputBox}
-          isAtBottom={isAtBottom}
-          showScrollToBottom={!isAtBottom}
+          isAtBottom={isFollowing}
+          showScrollToBottom={!isFollowing}
           onScrollToBottom={handleScrollToBottom}
           collapsedPermission={
             !inlineToolRequests && pendingPermissionRequests.length > 0 && permissionCollapsed
@@ -984,6 +1045,14 @@ export const ChatPane = memo(function ChatPane({
                 }
               : undefined
           }
+          queuedItems={queuedFollowups}
+          queuedFailedId={queuedFollowupFailedId}
+          queuedSendingId={queuedFollowupSendingId}
+          onQueuedRemove={handleRemoveQueuedMessage}
+          onQueuedCancelFailed={handleCancelFailedQueuedMessage}
+          onQueuedSendNow={handleSendQueuedNow}
+          onQueuedRevert={handleRevertQueuedMessage}
+          onQueuedReorder={handleReorderQueuedMessage}
         />
       </div>
 
@@ -1025,6 +1094,7 @@ export const ChatPane = memo(function ChatPane({
       <div
         ref={paneRootRef}
         data-chat-pane-root="true"
+        data-pane-id={paneId}
         className={
           showCompactShell
             ? `relative h-full flex flex-col overflow-hidden rounded-lg transition-colors duration-200 ${
diff --git a/src/features/chat/DESIGN.md b/src/features/chat/DESIGN.md
new file mode 100644
index 00000000..16fa6289
--- /dev/null
+++ b/src/features/chat/DESIGN.md
@@ -0,0 +1,256 @@
+# Chat scroll-follow design
+
+This document explains the design of the chat scroll-following system.
+If you're touching `useAutoScroll.ts`, `ChatArea.tsx`, or any input
+handler that affects scroll behavior, read this first.
+
+## Core principle
+
+`userScrolled` is the single source of truth for "is the user actively
+following the chat stream to the bottom". It is set ONLY by direct user
+input events, NEVER by `scroll` events alone.
+
+This is a deliberate inversion of the previous design, which tried to
+reverse-engineer user intent from `scroll` events using a `markAuto`
+timestamp token (programmatic writes were marked, then `scroll` events
+checked whether a recent mark existed). The old design had several
+unfixable bugs because some `scroll` events have no JS-visible input
+precursor (layout shifts, viewport resize clamps, find-in-page, history
+restoration) — see `CONSTRAINTS` memory #60.
+
+## State machine
+
+```mermaid
+stateDiagram-v2
+    [*] --> following
+    following --> stopped: stopFollow (wheel-up / touch / scrollbar / key-up / selection-start / disclosure-expand)
+    stopped --> following: forceScrollToBottom (button)
+    stopped --> following: tryRecover (wheel-down / key-down / OS_DRAG_END)\n+ atBottom
+    stopped --> following: tryRecover opened window\n+ scroll event reaches atBottom within 500ms
+    following --> following: drift (content grows)\n→ scheduleRecoverPin
+```
+
+Two states, three transition types. No intermediate state.
+
+## Input → intent mapping
+
+| Input | Condition | Action |
+|---|---|---|
+| `wheel` (deltaY < 0) | target in chat root, not editable, no nested boundary | `stopFollow()` |
+| `wheel` (deltaY > 0) | target in chat root, not editable, no nested boundary | mark recovery gesture; `handleScroll` completes it at bottom |
+| `wheel` (any direction) | target inside marked nested scrollable, movement stays inside it | no-op for chat follow |
+| `wheel` (deltaY < 0) | marked nested scrollable is already at top | `stopFollow()` |
+| `wheel` (deltaY > 0) | marked nested scrollable is already at bottom | mark recovery gesture; outer scroll may complete it |
+| `touchstart` | target in chat root, not editable | record start position (no state change) |
+| `touchmove` | finger down >10px (scroll up gesture) | `stopFollow()` |
+| `touchmove` | finger up (scroll down) | update `touchMaxDownRef` |
+| `touchend` | `touchMaxDownRef > 10` (real downward drag) | `tryRecover()` |
+| `touchend` | no downward drag (tap / up-fling) | no-op |
+| `pointerdown` on scrollbar | target === scroll root, clientX in scrollbar region | `stopFollow()` |
+| `pointerup` | (any) | no-op (mouse-up is not a "scroll down" gesture) |
+| `keydown` PageUp/Home/ArrowUp | focus in chat root, not editable | `stopFollow()` |
+| `keydown` PageDown/End/ArrowDown | focus in chat root, not editable | `tryRecover()` |
+| `selectionchange` empty → non-empty | selection anchor in chat root, **only during active streaming** | `stopFollow()` |
+| `selectionchange` non-empty → empty | (any) | no-op |
+| `OS_DRAG_START` (overlayScrollbar) | custom event from custom scrollbar thumb | `stopFollow()` |
+| `OS_DRAG_END` (overlayScrollbar) | custom event on pointerup from thumb | `tryRecover()` |
+| disclosure expand (`withScrollLock(_, true)`) | | `stopFollow()` |
+| disclosure collapse (`withScrollLock(_, false)`) | | no-op |
+| `scrollToMessageId` / `scrollToMessageIndex` | | calls `pause()` (= `stopFollow`) |
+
+## Recovery rules
+
+`userScrolled` is cleared by:
+
+1. `forceScrollToBottom()` — imperative "scroll to bottom" button
+2. `tryRecover()` or `markRecoverGesture()` — invoked by an explicit "down" input:
+   - If `scrollTop` is within `bottomThreshold` → clear immediately
+   - Otherwise → open a 500ms recovery window; subsequent `scroll` events
+     that find `scrollTop` back at bottom will complete the recovery.
+     This handles iOS momentum and "drag-to-bottom-then-release-with-1px-error".
+3. The recovery window closes on: success, timeout (500ms elapsed), or any
+   subsequent `stopFollow` / `setScrolled` call.
+
+`scroll` events themselves **do not** clear `userScrolled` outside of an
+active recovery window — this is what makes "tiny wheel-up persists stop"
+work correctly.
+
+## Why this works
+
+The fundamental insight is that user input events have well-defined
+intent at the moment they fire:
+
+- `wheel` with `deltaY < 0` → user wants to go up
+- `touchstart` → user is touching (likely about to scroll)
+- `pointerdown` on scrollbar → user is dragging the scrollbar
+- `keydown` PageUp → user wants to go up
+- `selectionchange` empty → non-empty → user is selecting text
+
+Each input declares its intent. We don't need to infer it from a
+downstream `scroll` event that conflates user and programmatic scrolls.
+
+**Selection during idle is a no-op.** `selectionchange` only calls
+`stopFollow` when `isStreaming` is true. When the chat is idle,
+selecting text to copy/reference doesn't break follow state or show
+the toBottom button — there's nothing to unfollow.
+
+## Why nested scrollables need special handling
+
+When the wheel target is inside a nested scrollable (code block, diff
+viewer, long thinking block), the user is reading content *inside* that
+block, not navigating the chat. Wheel-down inside a code block doesn't
+mean "I want to follow the chat" — it means "scroll this code down".
+
+Detection: `findScrollableAncestor(target, root)` finds the nearest
+ancestor marked with `data-scrollable`. `shouldMarkBoundaryGesture()`
+then checks whether the wheel delta would move that nested element past
+its top or bottom boundary. This mirrors OpenCode's boundary model:
+scrolling inside a block is private to that block; only an overflow
+attempt becomes an outer chat gesture.
+
+New nested vertical scroll components should mark their scroll viewport
+with `data-scrollable`. Shared `ScrollArea`, `CodeBlock`, `DiffViewer`,
+and Markdown code-preview viewports already do this.
+
+## Bottom threshold
+
+Single threshold: `bottomThreshold = 10` (px). Used for:
+
+- `tryRecover` deciding whether to clear `userScrolled`
+- `handleScroll` deciding whether to schedule `recoverPin`
+
+The 60/150px thresholds in `ChatArea.tsx` are for `isAtBottom` (passed
+to `useMobileCollapse` for the input-box pill behavior) and are
+unrelated to follow state.
+
+## AutoScrollContext
+
+Disclosure widgets (Tool, Reasoning, Task, Todo, Subtask, System,
+MessageError, ProcessCollapse) live deep in the message tree, far from
+ChatArea which owns the `useAutoScroll` instance. They use
+`useDisclosureScrollLock`, which internally `useContext(AutoScrollContext)`
+to get a `pause` callback wired to `useAutoScroll.pause`.
+
+The context value is stable (memoized on `auto.pause`, which is itself
+a stable `useCallback`), so consuming components don't re-render when
+the value changes (it doesn't change).
+
+## ToBottom button visibility
+
+Driven by `userScrolled` (via `onFollowingChange` callback from
+`ChatArea` to `ChatPane`), NOT by positional `isAtBottom`. This means
+a tiny wheel-up that doesn't move scroll position will still show the
+button (because `userScrolled = true`).
+
+This is correct: the button is the recovery mechanism for "user has
+stopped following". Whether they're positionally near the bottom is
+irrelevant to whether they want to recover.
+
+## Testing
+
+29 integration tests in `useAutoScroll.test.tsx` cover the state machine
+end-to-end (wheel, touch, keyboard, OS_DRAG, recovery window, nested
+scrollable, rapid events). Tests use a `Harness` component that calls
+`setScrollRef` from `useLayoutEffect` (matching React's production commit
+order: ref callbacks fire before `useEffect`).
+
+Manual verification still recommended for browser-only behaviors
+(real momentum scrolling, capture phase edge cases, getComputedStyle
+under actual CSS):
+
+1. Streaming stays pinned to bottom
+2. Tiny wheel-up persists stop (button shows)
+3. Wheel-down recovers when reaching bottom (immediate or via window)
+4. Touch scroll: drag up stops, genuine drag down to bottom recovers (tap doesn't)
+5. Scrollbar drag (custom overlayScrollbar): stops on dragstart, recovers on dragend if at bottom
+6. Keyboard: PageUp stops, PageDown recovers at bottom
+7. Text selection stops following; clearing selection doesn't recover
+8. Disclosure expand stops; collapse doesn't change state
+9. Wheel inside code block only affects chat when it overflows the block boundary
+10. Click "scroll to bottom" button always recovers
+11. iOS momentum: drag down, release with 1-2px error → still recovers within 500ms window
+
+## Key scenario sequence diagrams
+
+### Tiny wheel-up persists stop
+
+```mermaid
+sequenceDiagram
+    participant U as User
+    participant W as wheel listener
+    participant H as handleScroll
+    participant S as userScrolled
+
+    U->>W: wheel-up (deltaY=-3, only moves 3px)
+    W->>S: stopFollow() → userScrolled=true
+    Note over S: button shows
+    Note over W: scroll event fires (scrollTop still in atBottom zone)
+    W->>H: scroll event
+    H->>H: check recovery window: none active
+    H->>H: userScrolled=true → return early
+    Note over S: still true (persists stop)
+```
+
+### Disclosure expand during streaming
+
+```mermaid
+sequenceDiagram
+    participant U as User
+    participant D as disclosure widget
+    participant C as AutoScrollContext
+    participant A as useAutoScroll
+
+    U->>D: click expand toggle
+    D->>D: withScrollLock(() => setExpanded(true), expanding=true)
+    D->>C: pause() via context
+    C->>A: stopFollow()
+    A->>A: userScrolled=true
+    Note over A: streaming chunk arrives → scrollToBottomIfAtBottom returns early
+    Note over A: user can read the expanded content
+```
+
+### iOS touch drag-down + momentum recovery
+
+```mermaid
+sequenceDiagram
+    participant U as User
+    participant T as touch listeners
+    participant H as handleScroll
+    participant S as userScrolled
+
+    U->>T: touchstart (y=500)
+    T->>S: stopFollow() + reset touchMaxDownRef
+    U->>T: touchmove (y=100, finger moved up 400px = scroll down 400px)
+    T->>T: touchMaxDownRef = 400
+    U->>T: touchend (release at scrollTop=497, 3px from bottom)
+    T->>T: touchMaxDownRef > 10 → tryRecover()
+    T->>T: atBottom? 500-497=3 < 10 → close, but momentum continues
+    Note over T: actually 500-497=3, in threshold → tryRecover clears immediately
+    Note over S: userScrolled=false
+    Note over U: alt: release at scrollTop=485 (15px from bottom)
+    T->>T: tryRecover → not atBottom → open 500ms window
+    U->>H: momentum fires scroll events
+    H->>H: scrollTop reaches 495 → within window → setScrolled(false)
+    Note over S: userScrolled=false (recovered via window)
+```
+
+### Wheel inside nested code block (only boundary overflow escapes)
+
+```mermaid
+sequenceDiagram
+    participant U as User
+    participant W as wheel listener
+    participant F as findScrollableAncestor
+    participant S as userScrolled
+
+    U->>W: wheel-down (deltaY=+50) inside code block
+    W->>F: findScrollableAncestor(target, root)
+    F-->>W: returns code-block div (data-scrollable)
+    W->>F: shouldMarkBoundaryGesture(delta, nested)
+    F-->>W: false (nested block still has room)
+    Note over S: chat follow state is unchanged
+    U->>W: wheel-down again at code-block bottom
+    W->>F: shouldMarkBoundaryGesture(delta, nested)
+    F-->>W: true (wheel would overflow nested bottom)
+    W->>S: mark recovery gesture; outer scroll can recover at bottom
+```
diff --git a/src/features/chat/Header.tsx b/src/features/chat/Header.tsx
index fc56dfa4..9eb6a079 100644
--- a/src/features/chat/Header.tsx
+++ b/src/features/chat/Header.tsx
@@ -10,7 +10,6 @@ import {
   MinimizeIcon,
 } from '../../components/Icons'
 import { IconButton } from '../../components/ui'
-import { ModelSelector, type ModelSelectorHandle } from './ModelSelector'
 import { ShareDialog } from './ShareDialog'
 import { messageStore, useHeaderSessionMeta } from '../../store'
 import { useLayoutStore, layoutStore } from '../../store/layoutStore'
@@ -19,19 +18,17 @@ import { updateSession } from '../../api'
 import { useDirectory } from '../../contexts/useDirectory'
 import { uiErrorHandler } from '../../utils'
 import { useChatViewport } from './chatViewport'
-import type { ModelInfo } from '../../api'
+import { useSessionHeaderContext } from './sessionHeaderContext'
+import { SessionHeaderLocationPicker } from './SessionHeaderLocationPicker'
+import type { SessionHeaderLocation } from './SessionHeaderLocation'
+
 
 interface HeaderProps {
-  models: ModelInfo[]
-  modelsLoading: boolean
-  selectedModelKey: string | null
-  onModelChange: (modelKey: string, model: ModelInfo) => void
   onOpenSidebar?: () => void
   onToggleRightPanel?: () => void
   onSplitPane?: () => void
   isPaneFullscreen?: boolean
   onTogglePaneFullscreen?: () => void
-  modelSelectorRef?: React.RefObject<ModelSelectorHandle | null>
 }
 
 interface SessionTitleControlProps {
@@ -39,6 +36,8 @@ interface SessionTitleControlProps {
   isEditingTitle: boolean
   editTitle: string
   sessionTitle: string
+  workspaceDirectory?: string
+  sessionLocation?: SessionHeaderLocation | null
   titleInputRef: React.RefObject<HTMLInputElement | null>
   setEditTitle: (value: string) => void
   setIsEditingTitle: (value: boolean) => void
@@ -54,6 +53,8 @@ function SessionTitleControl({
   isEditingTitle,
   editTitle,
   sessionTitle,
+  workspaceDirectory,
+  sessionLocation,
   titleInputRef,
   setEditTitle,
   setIsEditingTitle,
@@ -80,6 +81,19 @@ function SessionTitleControl({
     <div
       className={`flex items-center group ${isEditingTitle ? 'bg-bg-200/50 ring-1 ring-accent-main-100' : 'bg-transparent hover:bg-bg-200/50 border border-transparent hover:border-border-200/50'} rounded-lg transition-all duration-200 p-0.5 min-w-0 shrink`}
     >
+      {!compact && sessionLocation && (
+        <>
+          <SessionHeaderLocationPicker
+            currentDirectory={workspaceDirectory}
+            location={sessionLocation}
+            textClassName="text-[length:var(--fs-base)]"
+            iconSize={compact ? 11 : 12}
+            workspaceMaxWidthClass={compact ? 'max-w-[88px]' : 'max-w-[140px]'}
+            branchMaxWidthClass={compact ? 'max-w-[88px]' : 'max-w-[140px]'}
+          />
+          <span className="shrink-0 text-text-200 opacity-70">·</span>
+        </>
+      )}
       {isEditingTitle ? (
         <input
           ref={titleInputRef}
@@ -112,16 +126,11 @@ function SessionTitleControl({
 }
 
 export function Header({
-  models,
-  modelsLoading,
-  selectedModelKey,
-  onModelChange,
   onOpenSidebar,
   onToggleRightPanel,
   onSplitPane,
   isPaneFullscreen = false,
   onTogglePaneFullscreen,
-  modelSelectorRef,
 }: HeaderProps) {
   const { t } = useTranslation('chat')
   const { sessionId, sessionDirectory, sessionTitle: currentSessionTitle } = useHeaderSessionMeta()
@@ -129,6 +138,7 @@ export function Header({
   const { refresh } = useSessionContext()
   const { currentDirectory } = useDirectory()
   const { presentation, interaction } = useChatViewport()
+  const sessionLocation = useSessionHeaderContext(sessionDirectory || currentDirectory)
 
   const [shareDialogOpen, setShareDialogOpen] = useState(false)
   const [isEditingTitle, setIsEditingTitle] = useState(false)
@@ -184,6 +194,8 @@ export function Header({
       isEditingTitle={isEditingTitle}
       editTitle={editTitle}
       sessionTitle={sessionTitle}
+      workspaceDirectory={sessionDirectory || currentDirectory}
+      sessionLocation={sessionLocation}
       titleInputRef={titleInputRef}
       setEditTitle={setEditTitle}
       setIsEditingTitle={setIsEditingTitle}
@@ -210,16 +222,6 @@ export function Header({
           </IconButton>
         )}
 
-        {!isCompact && (
-          <ModelSelector
-            ref={modelSelectorRef}
-            models={models}
-            selectedModelKey={selectedModelKey}
-            onSelect={onModelChange}
-            isLoading={modelsLoading}
-          />
-        )}
-
         {isCompact && <div className="min-w-0">{titleControl}</div>}
       </div>
 
diff --git a/src/features/chat/InputBox.tsx b/src/features/chat/InputBox.tsx
index 6de44f99..9b04d758 100644
--- a/src/features/chat/InputBox.tsx
+++ b/src/features/chat/InputBox.tsx
@@ -15,7 +15,9 @@ import { InputToolbar } from './input/InputToolbar'
 import type { ModelSelectorHandle } from './ModelSelector'
 import { InputFooter } from './input/InputFooter'
 import { FloatingActions, CollapsedCapsule } from './input/InputActions'
+import { QueuedMessagesBar } from './input/QueuedMessagesBar'
 import { useMobileCollapse } from './input/useMobileCollapse'
+import type { QueuedFollowupDraft } from '../../store/followupQueueStore'
 import { useAttachmentRail } from './input/useAttachmentRail'
 import { useInputHistory } from './input/useInputHistory'
 import {
@@ -159,6 +161,15 @@ export interface InputBoxProps {
   // Collapsed dialog capsules
   collapsedPermission?: CollapsedDialogInfo
   collapsedQuestion?: CollapsedDialogInfo
+  // Queued messages — data + callbacks
+  queuedItems?: QueuedFollowupDraft[]
+  queuedFailedId?: string
+  queuedSendingId?: string
+  onQueuedRemove?: (id: string) => void
+  onQueuedCancelFailed?: (id: string) => void
+  onQueuedSendNow?: (id: string) => void
+  onQueuedRevert?: (id: string) => void
+  onQueuedReorder?: (draggedId: string, targetId: string) => void
 }
 
 // ============================================
@@ -201,6 +212,14 @@ function InputBoxComponent({
   onScrollToBottom,
   collapsedPermission,
   collapsedQuestion,
+  queuedItems = [],
+  queuedFailedId,
+  queuedSendingId,
+  onQueuedRemove,
+  onQueuedCancelFailed,
+  onQueuedSendNow,
+  onQueuedRevert,
+  onQueuedReorder,
 }: InputBoxProps) {
   const { t } = useTranslation('chat')
   // 合并文件能力：优先用 fileCapabilities，回退到 supportsImages
@@ -1265,6 +1284,7 @@ function InputBoxComponent({
               onExpand={handleExpandInput}
               showScrollToBottom={showScrollToBottom}
               onScrollToBottom={onScrollToBottom}
+              queuedCount={queuedItems.length}
             />
           )}
 
@@ -1277,6 +1297,22 @@ function InputBoxComponent({
                 : 'relative opacity-100 scale-100'
             }`}
           >
+            {/* Queued Messages Bar — 在输入框展开时显示 */}
+            {!isCollapsed && queuedItems.length > 0 && (
+              <div className="pb-2">
+                <QueuedMessagesBar
+                  items={queuedItems}
+                  failedId={queuedFailedId}
+                  sendingId={queuedSendingId}
+                  onRemove={onQueuedRemove!}
+                  onCancelFailed={onQueuedCancelFailed!}
+                  onSendNow={onQueuedSendNow!}
+                  onRevert={onQueuedRevert!}
+                  onReorder={onQueuedReorder!}
+                />
+              </div>
+            )}
+
             {/* @ Mention Menu */}
             <MentionMenu
               ref={mentionMenuRef}
diff --git a/src/features/chat/SessionHeaderLocation.tsx b/src/features/chat/SessionHeaderLocation.tsx
new file mode 100644
index 00000000..4e2aba73
--- /dev/null
+++ b/src/features/chat/SessionHeaderLocation.tsx
@@ -0,0 +1,49 @@
+import { FolderIcon, GitBranchIcon } from '../../components/Icons'
+
+export interface SessionHeaderLocation {
+  workspaceName?: string
+  branchName?: string
+}
+
+interface SessionHeaderLocationLabelsProps {
+  location: SessionHeaderLocation
+  textClassName: string
+  iconSize?: number
+  workspaceMaxWidthClass?: string
+  branchMaxWidthClass?: string
+}
+
+export function SessionHeaderLocationLabels({
+  location,
+  textClassName,
+  iconSize = 12,
+  workspaceMaxWidthClass = 'max-w-[120px]',
+  branchMaxWidthClass = 'max-w-[120px]',
+}: SessionHeaderLocationLabelsProps) {
+  const { workspaceName, branchName } = location
+  if (!workspaceName && !branchName) return null
+
+  return (
+    <div className={`flex items-center min-w-0 gap-1.5 shrink-0 font-medium ${textClassName}`}>
+      {workspaceName && (
+        <span
+          className={`inline-flex items-center gap-1 min-w-0 truncate ${workspaceMaxWidthClass}`}
+          title={workspaceName}
+        >
+          <FolderIcon size={iconSize} className="shrink-0" />
+          <span className="truncate">{workspaceName}</span>
+        </span>
+      )}
+      {workspaceName && branchName && <span className="shrink-0 opacity-70">·</span>}
+      {branchName && (
+        <span
+          className={`inline-flex items-center gap-1 min-w-0 truncate ${branchMaxWidthClass}`}
+          title={branchName}
+        >
+          <GitBranchIcon size={iconSize} className="shrink-0" />
+          <span className="truncate">{branchName}</span>
+        </span>
+      )}
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/src/features/chat/SessionHeaderLocationPicker.tsx b/src/features/chat/SessionHeaderLocationPicker.tsx
new file mode 100644
index 00000000..9b02123f
--- /dev/null
+++ b/src/features/chat/SessionHeaderLocationPicker.tsx
@@ -0,0 +1,138 @@
+import { useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+import { ChevronDownIcon, FolderIcon, GitBranchIcon } from '../../components/Icons'
+import { useDropdown, useGitWorkspaceCatalog, useVcsInfo } from '../../hooks'
+import { isSameDirectory, normalizeToForwardSlash } from '../../utils'
+import { SessionHeaderLocationLabels, type SessionHeaderLocation } from './SessionHeaderLocation'
+import { getWorkspaceDisplayName } from './sidebar/recentWorkspaceDirectories'
+import { useRecentWorkspaceDirectories } from './useRecentWorkspaceDirectories'
+import { useSwitchWorkspaceDirectory } from './useSwitchWorkspaceDirectory'
+
+interface SessionHeaderLocationPickerProps {
+  currentDirectory?: string
+  location: SessionHeaderLocation
+  textClassName: string
+  iconSize?: number
+  workspaceMaxWidthClass?: string
+  branchMaxWidthClass?: string
+}
+
+function WorkspaceDropdownOption({
+  directory,
+  isSelected,
+  onSelect,
+}: {
+  directory: string
+  isSelected: boolean
+  onSelect: () => void
+}) {
+  const normalized = normalizeToForwardSlash(directory)
+  const catalogInput = useMemo(() => [normalized], [normalized])
+  const { catalog } = useGitWorkspaceCatalog(catalogInput)
+  const { vcsInfo } = useVcsInfo(normalized)
+  const workspaceName = getWorkspaceDisplayName(normalized, catalog)
+  const branchName = vcsInfo?.branch
+
+  return (
+    <button
+      type="button"
+      onClick={onSelect}
+      className={`w-full flex items-center gap-2 px-2.5 py-2 rounded-lg text-left transition-colors ${
+        isSelected ? 'bg-accent-main-100/10 text-text-100' : 'text-text-300 hover:bg-bg-200/60 hover:text-text-100'
+      }`}
+    >
+      <span className="inline-flex items-center gap-1 min-w-0 flex-1 truncate text-[length:var(--fs-sm)] font-medium">
+        <FolderIcon size={12} className="shrink-0" />
+        <span className="truncate">{workspaceName}</span>
+        {branchName && (
+          <>
+            <span className="opacity-60">·</span>
+            <GitBranchIcon size={12} className="shrink-0" />
+            <span className="truncate">{branchName}</span>
+          </>
+        )}
+      </span>
+    </button>
+  )
+}
+
+export function SessionHeaderLocationPicker({
+  currentDirectory,
+  location,
+  textClassName,
+  iconSize = 12,
+  workspaceMaxWidthClass,
+  branchMaxWidthClass,
+}: SessionHeaderLocationPickerProps) {
+  const { t } = useTranslation('chat')
+  const switchWorkspace = useSwitchWorkspaceDirectory()
+  const workspaceDirectories = useRecentWorkspaceDirectories(currentDirectory)
+  const { isOpen, toggle, close, triggerRef, menuRef } = useDropdown<HTMLDivElement>()
+  const normalizedCurrent = currentDirectory ? normalizeToForwardSlash(currentDirectory) : undefined
+  const canSwitch = workspaceDirectories.length > 0
+
+  if (!location.workspaceName && !location.branchName) return null
+
+  return (
+    <div className="relative shrink-0" ref={menuRef}>
+      <button
+        ref={triggerRef}
+        type="button"
+        onClick={event => {
+          event.stopPropagation()
+          if (canSwitch) toggle()
+        }}
+        disabled={!canSwitch}
+        aria-expanded={isOpen}
+        aria-haspopup="listbox"
+        aria-label={t('header.switchWorkspace')}
+        className={`inline-flex items-center gap-1 px-1.5 py-0.5 text-text-200 transition-colors hover:text-text-100 ${
+          canSwitch ? 'cursor-pointer' : 'cursor-default'
+        } ${textClassName}`}
+      >
+        <SessionHeaderLocationLabels
+          location={location}
+          textClassName={textClassName}
+          iconSize={iconSize}
+          workspaceMaxWidthClass={workspaceMaxWidthClass}
+          branchMaxWidthClass={branchMaxWidthClass}
+        />
+        {canSwitch && (
+          <ChevronDownIcon
+            size={11}
+            className={`shrink-0 opacity-70 transition-transform duration-200 ${isOpen ? 'rotate-180' : ''}`}
+          />
+        )}
+      </button>
+
+      {canSwitch && (
+        <div
+          data-dropdown-open={isOpen ? '' : undefined}
+          className={`absolute left-0 top-full z-50 mt-1 min-w-[220px] max-w-[min(320px,calc(100vw-2rem))] origin-top transition-all duration-200 ${
+            isOpen ? 'pointer-events-auto scale-100 opacity-100' : 'pointer-events-none scale-95 opacity-0'
+          }`}
+          aria-hidden={!isOpen}
+        >
+          <div className="glass overflow-hidden rounded-xl border border-border-200/60 shadow-lg">
+            <div className="px-2.5 py-1.5 text-[length:var(--fs-xxs)] font-semibold uppercase tracking-wider text-text-400/70">
+              {t('header.recentWorkspaces')}
+            </div>
+            <div className="max-h-[240px] overflow-y-auto custom-scrollbar p-1">
+              {workspaceDirectories.map(directory => (
+                <WorkspaceDropdownOption
+                  key={directory}
+                  directory={directory}
+                  isSelected={!!normalizedCurrent && isSameDirectory(directory, normalizedCurrent)}
+                  onSelect={() => {
+                    switchWorkspace(directory)
+                    close()
+                  }}
+                />
+              ))}
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/src/features/chat/Sidebar.tsx b/src/features/chat/Sidebar.tsx
index b8d6eaa7..12224743 100644
--- a/src/features/chat/Sidebar.tsx
+++ b/src/features/chat/Sidebar.tsx
@@ -25,7 +25,6 @@ interface SidebarProps {
   onNewSession: () => void
   onOpen: () => void
   onClose: () => void
-  contextLimit?: number
   onOpenSettings?: () => void
   projectDialogOpen?: boolean
   onProjectDialogClose?: () => void
@@ -39,7 +38,6 @@ export const Sidebar = memo(function Sidebar({
   onNewSession,
   onOpen,
   onClose,
-  contextLimit,
   onOpenSettings,
   projectDialogOpen,
   onProjectDialogClose,
@@ -299,7 +297,6 @@ export const Sidebar = memo(function Sidebar({
               isMobile={true}
               isExpanded={true}
               onToggleSidebar={onClose}
-              contextLimit={contextLimit}
               onOpenSettings={onOpenSettings}
             />
           </div>
@@ -355,7 +352,6 @@ export const Sidebar = memo(function Sidebar({
             isMobile={true}
             isExpanded={true}
             onToggleSidebar={onClose}
-            contextLimit={contextLimit}
             onOpenSettings={onOpenSettings}
           />
         </div>
@@ -392,7 +388,6 @@ export const Sidebar = memo(function Sidebar({
           isMobile={false}
           isExpanded={isOpen}
           onToggleSidebar={handleToggle}
-          contextLimit={contextLimit}
           onOpenSettings={onOpenSettings}
         />
 
diff --git a/src/features/chat/input/ContextUsageButton.tsx b/src/features/chat/input/ContextUsageButton.tsx
new file mode 100644
index 00000000..9ff4bd9a
--- /dev/null
+++ b/src/features/chat/input/ContextUsageButton.tsx
@@ -0,0 +1,135 @@
+import { useState, useCallback, useRef, useEffect, memo } from 'react'
+import { useTranslation } from 'react-i18next'
+import { CircularProgress } from '../../../components/CircularProgress'
+import { useSessionStats, formatTokens, formatCost } from '../../../hooks'
+import { useMessageStore } from '../../../store'
+import { ContextDetailsDialog } from '../sidebar/ContextDetailsDialog'
+import { IconButton, DropdownMenu } from '../../../components/ui'
+
+interface ContextUsageButtonProps {
+  contextLimit?: number
+  disabled?: boolean
+}
+
+export const ContextUsageButton = memo(function ContextUsageButton({
+  contextLimit = 200000,
+  disabled = false,
+}: ContextUsageButtonProps) {
+  const { t } = useTranslation('chat')
+  const { messages } = useMessageStore()
+  const stats = useSessionStats(contextLimit)
+  const hasMessages = messages.length > 0
+  const [menuOpen, setMenuOpen] = useState(false)
+  const [dialogOpen, setDialogOpen] = useState(false)
+  const triggerRef = useRef<HTMLButtonElement>(null)
+  const menuRef = useRef<HTMLDivElement>(null)
+
+  const percent = Math.min(Math.max(stats.contextPercent, 0), 100)
+  const progressColor =
+    percent === 0
+      ? 'text-text-500'
+      : percent >= 90
+        ? 'text-danger-100'
+        : percent >= 70
+          ? 'text-warning-100'
+          : 'text-accent-main-100'
+
+  const statsBarColor =
+    stats.contextPercent >= 90 ? 'bg-danger-100' : stats.contextPercent >= 70 ? 'bg-warning-100' : 'bg-accent-main-100'
+
+  const toggleMenu = useCallback(() => {
+    if (disabled) return
+    setMenuOpen(open => !open)
+  }, [disabled])
+
+  const openDetailsDialog = useCallback(() => {
+    setMenuOpen(false)
+    setDialogOpen(true)
+  }, [])
+
+  useEffect(() => {
+    if (!menuOpen) return
+
+    const handleClickOutside = (e: MouseEvent) => {
+      const target = e.target as Node
+      if (triggerRef.current?.contains(target)) return
+      if (menuRef.current?.contains(target)) return
+      setMenuOpen(false)
+    }
+
+    document.addEventListener('mousedown', handleClickOutside)
+    return () => document.removeEventListener('mousedown', handleClickOutside)
+  }, [menuOpen])
+
+  const title = `Context: ${formatTokens(hasMessages ? stats.contextUsed : 0)} / ${formatTokens(stats.contextLimit)} · ${Math.round(percent)}%`
+
+  return (
+    <>
+      <IconButton
+        ref={triggerRef}
+        aria-label={t('sidebar.contextUsage')}
+        aria-expanded={menuOpen}
+        disabled={disabled}
+        onClick={toggleMenu}
+        className={`relative shrink-0 transition-colors ${
+          menuOpen ? 'text-text-100 bg-bg-200/60' : 'text-text-400 hover:text-text-100'
+        }`}
+        title={title}
+      >
+        <span className="relative inline-flex" style={{ width: 18, height: 18 }}>
+          <CircularProgress
+            progress={percent / 100}
+            size={18}
+            strokeWidth={2.5}
+            trackClassName="text-text-100/15"
+            progressClassName={progressColor}
+          />
+        </span>
+      </IconButton>
+
+      <DropdownMenu
+        triggerRef={triggerRef}
+        isOpen={menuOpen}
+        position="top"
+        align="right"
+        minWidth={300}
+      >
+        <div ref={menuRef} className="p-3 glass-alt border border-border-200/60 rounded-lg shadow-lg">
+          <div className="flex items-center justify-between mb-2">
+            <span className="text-[length:var(--fs-sm)] font-medium text-text-200">{t('sidebar.contextUsage')}</span>
+            <div className="flex items-center gap-2">
+              <span className="text-[length:var(--fs-sm)] font-mono text-text-400">{Math.round(stats.contextPercent)}%</span>
+              <button
+                type="button"
+                onClick={openDetailsDialog}
+                className="
+                shrink-0 h-6 px-2
+                rounded-md border border-border-200/60
+                bg-bg-200/70 hover:bg-bg-300
+                text-[length:var(--fs-xxs)] font-medium text-text-200
+                transition-colors
+              "
+              >
+                {t('sidebar.viewDetails')}
+              </button>
+            </div>
+          </div>
+          <div className="w-full h-1.5 bg-bg-300 rounded-full overflow-hidden relative mb-2">
+            <div
+              className={`absolute inset-0 ${statsBarColor} transition-transform duration-500 ease-out origin-left`}
+              style={{ transform: `scaleX(${Math.min(100, stats.contextPercent) / 100})` }}
+            />
+          </div>
+          <div className="flex justify-between text-[length:var(--fs-xxs)] text-text-400 font-mono">
+            <span>
+              {formatTokens(hasMessages ? stats.contextUsed : 0)} / {formatTokens(stats.contextLimit)}
+            </span>
+            <span>{formatCost(stats.totalCost)}</span>
+          </div>
+        </div>
+      </DropdownMenu>
+
+      <ContextDetailsDialog isOpen={dialogOpen} onClose={() => setDialogOpen(false)} contextLimit={stats.contextLimit} />
+    </>
+  )
+})
\ No newline at end of file
diff --git a/src/features/chat/input/InputActions.tsx b/src/features/chat/input/InputActions.tsx
index a9200228..7681fa2d 100644
--- a/src/features/chat/input/InputActions.tsx
+++ b/src/features/chat/input/InputActions.tsx
@@ -128,12 +128,14 @@ interface CollapsedCapsuleProps {
   onExpand: () => void
   showScrollToBottom?: boolean
   onScrollToBottom?: () => void
+  queuedCount?: number
 }
 
 export const CollapsedCapsule = memo(function CollapsedCapsule({
   onExpand,
   showScrollToBottom,
   onScrollToBottom,
+  queuedCount = 0,
 }: CollapsedCapsuleProps) {
   const { t } = useTranslation(['chat', 'common'])
   return (
@@ -145,6 +147,11 @@ export const CollapsedCapsule = memo(function CollapsedCapsule({
       >
         <ArrowUpIcon size={14} />
         <span className="text-[length:var(--fs-xs)]">{t('inputActions.reply')}</span>
+        {queuedCount > 0 && (
+          <span className="ml-0.5 px-1.5 py-0.5 rounded-full bg-accent-main-100/15 text-accent-main-100 text-[length:var(--fs-xxs)] font-medium leading-none">
+            {queuedCount}
+          </span>
+        )}
       </button>
       {showScrollToBottom && <ScrollToBottomButton onClick={onScrollToBottom} />}
     </div>
diff --git a/src/features/chat/input/InputToolbar.test.tsx b/src/features/chat/input/InputToolbar.test.tsx
index b51e8867..3232a705 100644
--- a/src/features/chat/input/InputToolbar.test.tsx
+++ b/src/features/chat/input/InputToolbar.test.tsx
@@ -90,6 +90,10 @@ vi.mock('../ModelSelector', () => ({
   ModelSelector: () => null,
 }))
 
+vi.mock('./ContextUsageButton', () => ({
+  ContextUsageButton: () => null,
+}))
+
 describe('InputToolbar file selection', () => {
   beforeEach(() => {
     useIsMobileMock.mockReturnValue(false)
diff --git a/src/features/chat/input/InputToolbar.tsx b/src/features/chat/input/InputToolbar.tsx
index d57d6a4d..d8291248 100644
--- a/src/features/chat/input/InputToolbar.tsx
+++ b/src/features/chat/input/InputToolbar.tsx
@@ -3,8 +3,10 @@ import { useTranslation } from 'react-i18next'
 import { ChevronDownIcon, SendIcon, StopIcon, PaperclipIcon, AgentIcon, ThinkingIcon } from '../../../components/Icons'
 import { DropdownMenu, MenuItem, IconButton, AnimatedPresence } from '../../../components/ui'
 import { ModelSelector, type ModelSelectorHandle } from '../ModelSelector'
+import { ContextUsageButton } from './ContextUsageButton'
 import { useChatViewport } from '../chatViewport'
 import { isTauri, isTauriMobile, extToMime } from '../../../utils/tauri'
+import { getModelKey } from '../../../utils/modelUtils'
 import type { ApiAgent } from '../../../api/client'
 import type { ModelInfo, FileCapabilities } from '../../../api'
 
@@ -67,6 +69,7 @@ export function InputToolbar({
   const caps = fileCapabilities ?? { image: false, pdf: false, audio: false, video: false }
   const supportsAnyFile = caps.image || caps.pdf || caps.audio || caps.video
   const controlsDisabled = isSending
+  const contextLimit = models.find(model => getModelKey(model) === selectedModelKey)?.contextLimit
 
   // 动态构建 HTML accept 和 Tauri filter
   const { acceptString, tauriFilters } = useMemo(() => {
@@ -307,22 +310,8 @@ export function InputToolbar({
 
   return (
     <div className="flex items-center justify-between px-3 pb-3 relative">
-      {/* Left side: Model (mobile) + Agent + Variant selectors */}
+      {/* Left side: Agent + Model + Variant selectors */}
       <div className={`flex items-center min-w-0 ${isCompact ? 'gap-1' : 'gap-2'}`}>
-        {/* Model Selector — 移动端显示在最左边 */}
-        {isCompact && onModelChange && (
-          <ModelSelector
-            ref={modelSelectorRef}
-            models={models}
-            selectedModelKey={selectedModelKey}
-            onSelect={onModelChange}
-            isLoading={modelsLoading}
-            position="top"
-            trigger="toolbar"
-            constrainToRef={inputContainerRef}
-          />
-        )}
-
         {/* Agent Selector */}
         <AnimatedPresence show={selectableAgents.length > 1} className={isCompact ? 'shrink-0' : ''}>
           <div className="relative">
@@ -403,6 +392,20 @@ export function InputToolbar({
           </div>
         </AnimatedPresence>
 
+        {/* Model Selector */}
+        {onModelChange && (
+          <ModelSelector
+            ref={modelSelectorRef}
+            models={models}
+            selectedModelKey={selectedModelKey}
+            onSelect={onModelChange}
+            isLoading={modelsLoading}
+            position="top"
+            trigger="toolbar"
+            constrainToRef={inputContainerRef}
+          />
+        )}
+
         {/* Variant Selector */}
         <AnimatedPresence show={variants.length > 0} className={isCompact ? 'shrink-0' : ''}>
           <div className="relative">
@@ -493,6 +496,7 @@ export function InputToolbar({
 
       {/* Action Buttons */}
       <div className="flex items-center gap-1">
+        <ContextUsageButton contextLimit={contextLimit} />
         <AnimatedPresence show={supportsAnyFile}>
           <>
             {/* 浏览器模式下的隐藏文件输入 */}
diff --git a/src/features/chat/input/QueuedMessagesBar.tsx b/src/features/chat/input/QueuedMessagesBar.tsx
new file mode 100644
index 00000000..53b2a43a
--- /dev/null
+++ b/src/features/chat/input/QueuedMessagesBar.tsx
@@ -0,0 +1,261 @@
+import { memo, useCallback, useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+import { SendIcon, ClockIcon, CloseIcon, PencilIcon, GripVerticalIcon } from '../../../components/Icons'
+import { usePresence } from '../../../hooks'
+import type { QueuedFollowupDraft } from '../../../store/followupQueueStore'
+import { useReorderableList } from './useReorderableList'
+
+// ============================================
+// QueuedMessagesBar — 输入框上方的排队消息预览条
+// 宽度与输入框一致，每条消息独立一行，文本溢出截断 + hover 展示全文
+// 支持拖拽排序（桌面 grip pointer / 手机整行长按）
+// ============================================
+
+interface QueuedMessagesBarProps {
+  items: QueuedFollowupDraft[]
+  failedId?: string
+  sendingId?: string
+  onRemove: (id: string) => void
+  onCancelFailed: (id: string) => void
+  onSendNow: (id: string) => void
+  onRevert: (id: string) => void
+  onReorder: (draggedId: string, targetId: string) => void
+}
+
+/** 多行文本压缩为单行，供 title tooltip 使用 */
+function tooltipText(text: string): string {
+  return text.replace(/\s+/g, ' ').trim()
+}
+
+const QueuedMessageRow = memo(function QueuedMessageRow({
+  item,
+  isFailed,
+  isSending,
+  canDrag,
+  isDragged,
+  onRemove,
+  onCancelFailed,
+  onSendNow,
+  onRevert,
+  onDragStart,
+  onTouchDragStart,
+  registerRef,
+}: {
+  item: QueuedFollowupDraft
+  isFailed: boolean
+  isSending: boolean
+  canDrag: boolean
+  isDragged: boolean
+  onRemove: (id: string) => void
+  onCancelFailed: (id: string) => void
+  onSendNow: (id: string) => void
+  onRevert: (id: string) => void
+  onDragStart: (e: React.PointerEvent) => void
+  onTouchDragStart: (e: React.TouchEvent) => void
+  registerRef: (el: HTMLDivElement | null) => void
+}) {
+  const { t } = useTranslation('chat')
+  const { shouldRender, ref: presenceRef } = usePresence<HTMLDivElement>(true, {
+    from: { opacity: 0, transform: 'translateY(-4px)' },
+    to: { opacity: 1, transform: 'translateY(0)' },
+    duration: 0.2,
+  })
+
+  const setRowRef = useCallback(
+    (el: HTMLDivElement | null) => {
+      presenceRef.current = el
+      registerRef(el)
+    },
+    [presenceRef, registerRef],
+  )
+
+  const handleRemove = useCallback(() => onRemove(item.id), [item.id, onRemove])
+  const handleCancelFailed = useCallback(() => onCancelFailed(item.id), [item.id, onCancelFailed])
+  const handleSendNow = useCallback(() => onSendNow(item.id), [item.id, onSendNow])
+  const handleRevert = useCallback(() => onRevert(item.id), [item.id, onRevert])
+  const fullText = tooltipText(item.text)
+
+  if (!shouldRender) return null
+
+  return (
+    <div
+      ref={setRowRef}
+      data-state={isFailed ? 'failed' : isSending ? 'sending' : 'pending'}
+      onTouchStart={canDrag ? onTouchDragStart : undefined}
+      className={`
+        flex items-center gap-2 w-full px-3 py-1.5 text-[length:var(--fs-sm)]
+        transition-colors select-none
+        ${isDragged
+          ? 'z-10 relative shadow-lg shadow-black/20 ring-1 ring-inset ring-accent-main-100/30 bg-bg-100'
+          : ''
+        }
+        ${isFailed
+          ? 'bg-danger-100/8 text-danger-100'
+          : isSending
+            ? 'bg-accent-main-100/8 text-text-200'
+            : isDragged
+              ? 'text-text-200'
+              : 'hover:bg-bg-000/30 text-text-200'
+        }
+      `}
+    >
+      {/* 拖拽把手 — 仅可排序时显示；桌面 pointer 拖，手机走整行长按 */}
+      {canDrag && (
+        <span
+          data-drag-handle
+          onPointerDown={onDragStart}
+          className="shrink-0 flex items-center justify-center -ml-1 p-0.5 cursor-grab active:cursor-grabbing text-text-500 opacity-50 hover:opacity-100 touch-none"
+          title={t('queuedMessages.reorder')}
+          aria-label={t('queuedMessages.reorder')}
+        >
+          <GripVerticalIcon size={14} />
+        </span>
+      )}
+
+      {/* 状态图标 */}
+      <span className="shrink-0">
+        {isSending ? (
+          <span className="inline-block w-3.5 h-3.5 rounded-full border-2 border-accent-main-100/30 border-t-accent-main-100 animate-spin" />
+        ) : (
+          <ClockIcon size={14} />
+        )}
+      </span>
+
+      {/* 消息文本 — 溢出截断，hover 展示全文 */}
+      <span
+        className="flex-1 min-w-0 truncate"
+        title={fullText}
+      >
+        {fullText}
+      </span>
+
+      {/* 附件标记 */}
+      {item.attachments.length > 0 && (
+        <span className="shrink-0 text-text-400 text-[length:var(--fs-xs)]">
+          📎{item.attachments.length}
+        </span>
+      )}
+
+      {/* agent 标记 */}
+      {item.agent && (
+        <span className="shrink-0 text-text-400 text-[length:var(--fs-xs)] bg-bg-300/50 rounded px-1">
+          {item.agent}
+        </span>
+      )}
+
+      {/* 失败标记 */}
+      {isFailed && (
+        <span className="shrink-0 text-danger-100 font-medium text-[length:var(--fs-xs)]">
+          {t('queuedMessages.failed')}
+        </span>
+      )}
+
+      {/* 立即发送按钮（仅排队中显示） */}
+      {!isFailed && !isSending && (
+        <button
+          type="button"
+          onClick={handleSendNow}
+          className="shrink-0 p-1 rounded hover:bg-accent-main-100/15 text-text-400 hover:text-accent-main-100 transition-colors"
+          aria-label={t('queuedMessages.sendNow')}
+        >
+          <SendIcon size={14} />
+        </button>
+      )}
+
+      {/* 编辑/撤回按钮（排队中和失败均可编辑，发送中不可） */}
+      {!isSending && (
+        <button
+          type="button"
+          onClick={handleRevert}
+          className="shrink-0 p-1 rounded hover:bg-accent-main-100/15 text-text-400 hover:text-accent-main-100 transition-colors"
+          aria-label={t('queuedMessages.revert')}
+        >
+          <PencilIcon size={14} />
+        </button>
+      )}
+
+      {/* 删除/放弃按钮 */}
+      <button
+        type="button"
+        onClick={isFailed ? handleCancelFailed : handleRemove}
+        className="shrink-0 p-1 rounded hover:bg-bg-300/50 transition-colors opacity-60 hover:opacity-100 -mr-1"
+        aria-label={isFailed ? t('queuedMessages.cancelFailed') : t('queuedMessages.remove')}
+      >
+        <CloseIcon size={14} />
+      </button>
+    </div>
+  )
+})
+
+export const QueuedMessagesBar = memo(function QueuedMessagesBar({
+  items,
+  failedId,
+  sendingId,
+  onRemove,
+  onCancelFailed,
+  onSendNow,
+  onRevert,
+  onReorder,
+}: QueuedMessagesBarProps) {
+  const ids = useMemo(() => items.map(item => item.id), [items])
+  const itemById = useMemo(() => {
+    const map = new Map<string, QueuedFollowupDraft>()
+    for (const item of items) map.set(item.id, item)
+    return map
+  }, [items])
+
+  const canDragId = useCallback(
+    (id: string) => {
+      if (items.length < 2) return false
+      if (sendingId && id === sendingId) return false
+      return true
+    },
+    [items.length, sendingId],
+  )
+
+  const {
+    draggedId,
+    displayOrder,
+    handlePointerStart,
+    handleTouchStart,
+    handleTouchMove,
+    handleTouchEnd,
+    registerRef,
+  } = useReorderableList({
+    ids,
+    canDrag: canDragId,
+    onCommit: onReorder,
+  })
+
+  if (items.length === 0) return null
+
+  return (
+    <div
+      className="flex flex-col gap-px w-full glass border border-border-200/60 rounded-lg shadow-lg overflow-hidden"
+      onTouchMove={handleTouchMove}
+      onTouchEnd={handleTouchEnd}
+    >
+      {displayOrder.map(id => {
+        const item = itemById.get(id)
+        if (!item) return null
+        return (
+          <QueuedMessageRow
+            key={item.id}
+            item={item}
+            isFailed={item.id === failedId}
+            isSending={item.id === sendingId}
+            canDrag={canDragId(item.id)}
+            isDragged={item.id === draggedId}
+            onRemove={onRemove}
+            onCancelFailed={onCancelFailed}
+            onSendNow={onSendNow}
+            onRevert={onRevert}
+            onDragStart={e => handlePointerStart(item.id, e)}
+            onTouchDragStart={e => handleTouchStart(item.id, e)}
+            registerRef={el => registerRef(item.id, el)}
+          />
+        )
+      })}
+    </div>
+  )
+})
diff --git a/src/features/chat/input/useReorderableList.ts b/src/features/chat/input/useReorderableList.ts
new file mode 100644
index 00000000..0a4fb850
--- /dev/null
+++ b/src/features/chat/input/useReorderableList.ts
@@ -0,0 +1,199 @@
+import { useCallback, useEffect, useRef, useState } from 'react'
+
+// Copied from FolderRecentList for queue-bar scope (extract to shared later).
+
+interface ReorderState {
+  draggedId: string
+  currentOrder: string[]
+}
+
+interface UseReorderableListOptions {
+  ids: string[]
+  canDrag: (id: string) => boolean
+  onCommit: (draggedId: string, targetId: string) => void
+  onDragActivated?: () => void
+  onDragFinished?: () => void
+}
+
+export function useReorderableList({ ids, canDrag, onCommit, onDragActivated, onDragFinished }: UseReorderableListOptions) {
+  const refs = useRef<Map<string, HTMLDivElement>>(new Map())
+  const [dragState, setDragState] = useState<ReorderState | null>(null)
+  const dragStartY = useRef(0)
+  const dragActive = useRef(false)
+  const latestOrderRef = useRef<string[]>([])
+  const longPressTimer = useRef<ReturnType<typeof setTimeout> | null>(null)
+  const touchMovedRef = useRef(false)
+  const touchStartYRef = useRef(0)
+  const touchDragIdRef = useRef<string | null>(null)
+
+  const displayOrder = dragState?.currentOrder ?? ids
+  const draggedId = dragState?.draggedId ?? null
+
+  const calcNewOrder = useCallback((dragId: string, pointerY: number, baseOrder: string[]) => {
+    const items: { id: string; centerY: number }[] = []
+
+    for (const id of baseOrder) {
+      if (id === dragId) continue
+      const element = refs.current.get(id)
+      if (!element) continue
+      const rect = element.getBoundingClientRect()
+      items.push({ id, centerY: rect.top + rect.height / 2 })
+    }
+
+    let insertIndex = items.length
+    for (let i = 0; i < items.length; i++) {
+      if (pointerY < items[i].centerY) {
+        insertIndex = i
+        break
+      }
+    }
+
+    const withoutDragged = items.map(item => item.id)
+    withoutDragged.splice(insertIndex, 0, dragId)
+    return withoutDragged
+  }, [])
+
+  const finishDrag = useCallback(
+    (draggedId: string, originalOrder: string[]) => {
+      const finalOrder = latestOrderRef.current
+      const originalIdx = originalOrder.indexOf(draggedId)
+      const newIdx = finalOrder.indexOf(draggedId)
+
+      if (originalIdx !== -1 && newIdx !== -1 && originalIdx !== newIdx) {
+        const targetId = originalOrder[newIdx]
+        if (targetId) onCommit(draggedId, targetId)
+      }
+
+      setDragState(null)
+      dragActive.current = false
+      latestOrderRef.current = []
+      onDragFinished?.()
+    },
+    [onCommit, onDragFinished],
+  )
+
+  const handlePointerStart = useCallback(
+    (id: string, event: React.PointerEvent) => {
+      if (!canDrag(id)) return
+
+      event.preventDefault()
+      event.stopPropagation()
+      dragStartY.current = event.clientY
+      dragActive.current = false
+
+      const currentOrder = [...ids]
+
+      const onMove = (moveEvent: PointerEvent) => {
+        const dy = Math.abs(moveEvent.clientY - dragStartY.current)
+
+        if (!dragActive.current) {
+          if (dy < 4) return
+          dragActive.current = true
+          onDragActivated?.()
+          document.body.style.cursor = 'grabbing'
+          document.body.style.userSelect = 'none'
+          setDragState({ draggedId: id, currentOrder })
+        }
+
+        const newOrder = calcNewOrder(id, moveEvent.clientY, currentOrder)
+        latestOrderRef.current = newOrder
+        setDragState(prev => (prev ? { ...prev, currentOrder: newOrder } : null))
+      }
+
+      const onUp = () => {
+        document.removeEventListener('pointermove', onMove)
+        document.removeEventListener('pointerup', onUp)
+        document.removeEventListener('pointercancel', onUp)
+        document.body.style.cursor = ''
+        document.body.style.userSelect = ''
+
+        if (dragActive.current) finishDrag(id, currentOrder)
+
+        dragActive.current = false
+      }
+
+      document.addEventListener('pointermove', onMove)
+      document.addEventListener('pointerup', onUp)
+      document.addEventListener('pointercancel', onUp)
+    },
+    [calcNewOrder, canDrag, finishDrag, ids, onDragActivated],
+  )
+
+  const handleTouchStart = useCallback(
+    (id: string, event: React.TouchEvent) => {
+      if (!canDrag(id)) return
+
+      touchMovedRef.current = false
+      touchStartYRef.current = event.touches[0].clientY
+      touchDragIdRef.current = null
+
+      longPressTimer.current = setTimeout(() => {
+        if (!touchMovedRef.current) {
+          touchDragIdRef.current = id
+          dragActive.current = true
+          onDragActivated?.()
+          const currentOrder = [...ids]
+          latestOrderRef.current = currentOrder
+          setDragState({ draggedId: id, currentOrder })
+        }
+      }, 400)
+    },
+    [canDrag, ids, onDragActivated],
+  )
+
+  const handleTouchMove = useCallback(
+    (event: React.TouchEvent) => {
+      const dy = Math.abs(event.touches[0].clientY - touchStartYRef.current)
+      if (dy > 8) touchMovedRef.current = true
+
+      if (longPressTimer.current && touchMovedRef.current && !touchDragIdRef.current) {
+        clearTimeout(longPressTimer.current)
+        longPressTimer.current = null
+      }
+
+      if (!touchDragIdRef.current) return
+
+      event.stopPropagation()
+      const touchY = event.touches[0].clientY
+      const currentOrder = [...ids]
+      const newOrder = calcNewOrder(touchDragIdRef.current, touchY, currentOrder)
+      latestOrderRef.current = newOrder
+      setDragState(prev => (prev ? { ...prev, currentOrder: newOrder } : null))
+    },
+    [calcNewOrder, ids],
+  )
+
+  const handleTouchEnd = useCallback(() => {
+    if (longPressTimer.current) {
+      clearTimeout(longPressTimer.current)
+      longPressTimer.current = null
+    }
+
+    const dragId = touchDragIdRef.current
+    if (dragId) {
+      finishDrag(dragId, [...ids])
+    }
+
+    touchDragIdRef.current = null
+  }, [finishDrag, ids])
+
+  useEffect(() => {
+    return () => {
+      if (longPressTimer.current) clearTimeout(longPressTimer.current)
+    }
+  }, [])
+
+  return {
+    draggedId,
+    isDragging: !!dragState,
+    displayOrder,
+    handlePointerStart,
+    handleTouchStart,
+    handleTouchMove,
+    handleTouchEnd,
+    registerRef: (id: string, element: HTMLDivElement | null) => {
+      if (element) refs.current.set(id, element)
+      else refs.current.delete(id)
+    },
+  }
+}
diff --git a/src/features/chat/sessionHeaderContext.ts b/src/features/chat/sessionHeaderContext.ts
new file mode 100644
index 00000000..fc15a4dd
--- /dev/null
+++ b/src/features/chat/sessionHeaderContext.ts
@@ -0,0 +1,31 @@
+import { useMemo } from 'react'
+import { useGitWorkspaceCatalog, useVcsInfo } from '../../hooks'
+import { getDirectoryName, isSameDirectory, normalizeToForwardSlash } from '../../utils'
+import type { SessionHeaderLocation } from './SessionHeaderLocation'
+
+export function useSessionHeaderContext(directory?: string): SessionHeaderLocation | null {
+  const normalizedDirectory = directory ? normalizeToForwardSlash(directory) : undefined
+  const catalogDirectories = useMemo(
+    () => (normalizedDirectory ? [normalizedDirectory] : []),
+    [normalizedDirectory],
+  )
+  const { catalog } = useGitWorkspaceCatalog(catalogDirectories)
+  const { vcsInfo, isLoading: isBranchLoading } = useVcsInfo(normalizedDirectory)
+
+  return useMemo(() => {
+    if (!normalizedDirectory) return null
+
+    const meta = catalog.get(normalizedDirectory)
+    const workspaceName = meta?.isGit
+      ? isSameDirectory(meta.rootDirectory, normalizedDirectory)
+        ? getDirectoryName(meta.rootDirectory) || meta.rootDirectory
+        : getDirectoryName(normalizedDirectory) || normalizedDirectory
+      : getDirectoryName(normalizedDirectory) || normalizedDirectory
+
+    const branchName = meta?.isGit ? (vcsInfo?.branch ?? (isBranchLoading ? '...' : undefined)) : undefined
+
+    if (!workspaceName && !branchName) return null
+
+    return { workspaceName, branchName }
+  }, [catalog, normalizedDirectory, vcsInfo?.branch, isBranchLoading])
+}
\ No newline at end of file
diff --git a/src/features/chat/sidebar/FolderRecentList.tsx b/src/features/chat/sidebar/FolderRecentList.tsx
index 9bbb7af1..56d827f8 100644
--- a/src/features/chat/sidebar/FolderRecentList.tsx
+++ b/src/features/chat/sidebar/FolderRecentList.tsx
@@ -25,6 +25,7 @@ import { pinnedSessionsStore, type PinnedSessionEntry } from '../../../store/pin
 import { SessionListItem } from '../../sessions'
 import { getSelectionRoundClass } from '../../sessions/selectionRound'
 import { SessionChildrenSlot } from './SessionChildrenSlot'
+import { createDraftNewChatSession, isDraftNewChatSession } from './draftNewChatSession'
 
 const DIRECTORY_PAGE_SIZE = 5
 
@@ -788,6 +789,18 @@ function UnavailablePinnedSessionItem({ entry }: { entry: PinnedSessionEntry })
   )
 }
 
+function shouldShowDraftNewChatInFolder(options: {
+  isEditMode?: boolean
+  selectedSessionId: string | null
+  currentDirectory?: string
+  folderDirectory: string
+}) {
+  if (options.isEditMode) return false
+  if (options.selectedSessionId) return false
+  if (!options.currentDirectory) return false
+  return isSameDirectory(options.currentDirectory, options.folderDirectory)
+}
+
 interface FolderRecentSectionProps {
   project: FolderRecentProject
   /** 数据服务器（多服务器模式；缺省用活动服务器） */
@@ -903,6 +916,18 @@ function FolderRecentSection({
     return sessions.filter(session => !pinnedSet.has(session.id))
   }, [pinnedEntries, sessions])
 
+  const showDraftNewChat = shouldShowDraftNewChatInFolder({
+    isEditMode,
+    selectedSessionId,
+    currentDirectory,
+    folderDirectory: project.worktree,
+  })
+  const draftNewChatTitle = t('header.newChat')
+  const sessionsForFolderList = useMemo(() => {
+    if (!showDraftNewChat) return visibleSessions
+    return [createDraftNewChatSession(project.worktree, draftNewChatTitle), ...visibleSessions]
+  }, [showDraftNewChat, visibleSessions, project.worktree, draftNewChatTitle])
+
   const handleRename = useCallback(
     async (sessionId: string, newTitle: string) => {
       const session = sessions.find(item => item.id === sessionId)
@@ -1081,35 +1106,42 @@ function FolderRecentSection({
                   draggableWorkspaceDirectories={draggableWorkspaceDirectories}
                   onReorderWorkspace={onReorderWorkspace}
                 />
-              ) : visibleSessions.length === 0 ? (
+              ) : sessionsForFolderList.length === 0 ? (
                 <div className="px-2 py-1 text-[length:var(--fs-xs)] text-text-400/50">
                   {t('sidebar.noChatsInFolder')}
                 </div>
               ) : (
                 <>
-                  {visibleSessions.map((session, index) => {
-                    const isChecked = selectedSessionIds?.has(session.id) ?? false
+                  {sessionsForFolderList.map((session, index) => {
+                    const isDraft = isDraftNewChatSession(session)
+                    const isChecked = isDraft ? false : (selectedSessionIds?.has(session.id) ?? false)
                     // 上：前一条 session，或（首条时）父文件夹已选中
                     const prevChecked =
                       isEditMode &&
                       (index > 0
-                        ? (selectedSessionIds?.has(visibleSessions[index - 1].id) ?? false)
+                        ? (selectedSessionIds?.has(sessionsForFolderList[index - 1].id) ?? false)
                         : isProjectChecked)
                     // 下：下一条 session，或（末条时）下一个文件夹已选中
                     const nextChecked =
                       isEditMode &&
-                      (index < visibleSessions.length - 1
-                        ? (selectedSessionIds?.has(visibleSessions[index + 1].id) ?? false)
+                      (index < sessionsForFolderList.length - 1
+                        ? (selectedSessionIds?.has(sessionsForFolderList[index + 1].id) ?? false)
                         : nextProjectChecked)
                     return (
                     <div key={session.id}>
                       <SessionListItem
                         session={session}
-                        activeSessionKey={serverId ? `${serverId}::${session.id}` : undefined}
-                        isSelected={!!selectedSessionId && session.id === splitSessionKey(selectedSessionId).sessionId}
-                        onSelect={() => onSelectSession(session)}
-                        onRename={newTitle => handleRename(session.id, newTitle)}
-                        onDelete={() => handleDelete(session.id)}
+                        activeSessionKey={isDraft ? undefined : serverId ? `${serverId}::${session.id}` : undefined}
+                        isSelected={isDraft ? !selectedSessionId : !!selectedSessionId && session.id === splitSessionKey(selectedSessionId).sessionId}
+                        onSelect={() => {
+                          if (!isDraft) onSelectSession(session)
+                        }}
+                        onRename={newTitle => {
+                          if (!isDraft) handleRename(session.id, newTitle)
+                        }}
+                        onDelete={() => {
+                          if (!isDraft) handleDelete(session.id)
+                        }}
                         preferTouchUi={preferTouchUi}
                         density="minimal"
                         showStats={showSessionDiffStats}
@@ -1119,9 +1151,9 @@ function FolderRecentSection({
                         checkedPrev={prevChecked}
                         checkedNext={nextChecked}
                         onToggleCheck={
-                          onToggleSessionSelection
-                            ? options => onToggleSessionSelection(session.id, options)
-                            : undefined
+                          isDraft || !onToggleSessionSelection
+                            ? undefined
+                            : options => onToggleSessionSelection(session.id, options)
                         }
                       />
                       {onSelectChildSession &&
diff --git a/src/features/chat/sidebar/SidePanel.tsx b/src/features/chat/sidebar/SidePanel.tsx
index da7d59ef..837ff163 100644
--- a/src/features/chat/sidebar/SidePanel.tsx
+++ b/src/features/chat/sidebar/SidePanel.tsx
@@ -65,7 +65,6 @@ interface SidePanelProps {
   isMobile?: boolean
   isExpanded?: boolean
   onToggleSidebar: () => void
-  contextLimit?: number
   onOpenSettings?: () => void
 }
 
@@ -118,7 +117,6 @@ export function SidePanel({
   isMobile = false,
   isExpanded = true,
   onToggleSidebar,
-  contextLimit = 200000,
   onOpenSettings,
 }: SidePanelProps) {
   const { t } = useTranslation(['chat', 'common'])
@@ -1715,7 +1713,6 @@ export function SidePanel({
       <SidebarFooter
         showLabels={showLabels}
         connectionState={connectionState?.state || 'disconnected'}
-        contextLimit={contextLimit}
         onOpenSettings={onOpenSettings}
       />
 
diff --git a/src/features/chat/sidebar/SidebarFooter.tsx b/src/features/chat/sidebar/SidebarFooter.tsx
index 2a072f7d..7e0af2c3 100644
--- a/src/features/chat/sidebar/SidebarFooter.tsx
+++ b/src/features/chat/sidebar/SidebarFooter.tsx
@@ -2,7 +2,6 @@ import { useState, useEffect, useCallback, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import { createPortal } from 'react-dom'
 import { ShareDialog } from '../ShareDialog'
-import { ContextDetailsDialog } from './ContextDetailsDialog'
 import {
   CogIcon,
   SunIcon,
@@ -12,82 +11,20 @@ import {
   MinimizeIcon,
   ShareIcon,
 } from '../../../components/Icons'
-import { CircularProgress } from '../../../components/CircularProgress'
-import { formatTokens, formatCost, useTheme, useSessionStats } from '../../../hooks'
-import { useHasMessages } from '../../../store'
-
-// 状态指示器 - 圆环 + 右下角状态点
-function StatusIndicator({
-  percent,
-  connectionState,
-  size = 24,
-}: {
-  percent: number
-  connectionState: string
-  size?: number
-}) {
-  const clampedPercent = Math.min(Math.max(percent, 0), 100)
-
-  // 进度颜色
-  const progressColor =
-    clampedPercent === 0
-      ? 'text-text-500'
-      : clampedPercent >= 90
-        ? 'text-danger-100'
-        : clampedPercent >= 70
-          ? 'text-warning-100'
-          : 'text-accent-main-100'
-
-  // 连接状态颜色
-  const statusColor =
-    connectionState === 'connected'
-      ? 'bg-success-100'
-      : connectionState === 'connecting'
-        ? 'bg-warning-100 animate-pulse'
-        : connectionState === 'error'
-          ? 'bg-danger-100'
-          : 'bg-text-500'
-
-  return (
-    <div className="relative shrink-0" style={{ width: size, height: size }}>
-      <CircularProgress
-        progress={clampedPercent / 100}
-        size={size}
-        strokeWidth={3}
-        trackClassName="text-text-100/10"
-        progressClassName={progressColor}
-      />
-
-      {/* 右下角状态点 - 带背景边框以突出显示 */}
-      <div
-        className={`absolute -bottom-0.5 -right-0.5 w-2.5 h-2.5 rounded-full border-2 border-bg-200 ${statusColor}`}
-      />
-    </div>
-  )
-}
+import { useTheme } from '../../../hooks'
 
 export interface SidebarFooterProps {
   showLabels: boolean
   connectionState: string
-  contextLimit?: number
   onOpenSettings?: () => void
 }
 
-export function SidebarFooter({
-  showLabels,
-  connectionState,
-  contextLimit = 200000,
-  onOpenSettings,
-}: SidebarFooterProps) {
+export function SidebarFooter({ showLabels, connectionState, onOpenSettings }: SidebarFooterProps) {
   const { t } = useTranslation(['chat', 'common'])
   const { mode: themeMode, setThemeWithAnimation: onThemeChange, isWideMode, toggleWideMode } = useTheme()
-  // 统计与 hasMessages 留在 footer：流式时不让整个 SidePanel 跟着 messages 重渲
-  const hasMessages = useHasMessages()
-  const stats = useSessionStats(contextLimit)
   const [isOpen, setIsOpen] = useState(false)
   const [menuPos, setMenuPos] = useState({ top: 0, left: 0, width: 260, fromBottom: false })
   const [shareDialogOpen, setShareDialogOpen] = useState(false)
-  const [contextDialogOpen, setContextDialogOpen] = useState(false)
   const [isVisible, setIsVisible] = useState(false)
   const prevShowLabelsRef = useRef(showLabels)
   const containerRef = useRef<HTMLDivElement>(null)
@@ -95,7 +32,6 @@ export function SidebarFooter({
   const menuRef = useRef<HTMLDivElement>(null)
   const closeTimeoutIdRef = useRef<ReturnType<typeof setTimeout> | null>(null)
 
-  // 菜单中连接状态显示用
   const statusColorClass =
     {
       connected: 'bg-success-100',
@@ -104,10 +40,6 @@ export function SidebarFooter({
       error: 'bg-danger-100',
     }[connectionState] || 'bg-text-500'
 
-  const statsColor =
-    stats.contextPercent >= 90 ? 'bg-danger-100' : stats.contextPercent >= 70 ? 'bg-warning-100' : 'bg-accent-main-100'
-
-  // 打开菜单
   const openMenu = useCallback(() => {
     if (!buttonRef.current || !containerRef.current) return
 
@@ -116,7 +48,6 @@ export function SidebarFooter({
     const menuWidth = showLabels ? containerRect.width : 260
 
     if (showLabels) {
-      // 展开模式：菜单底部在容器上方，留点间隙
       setMenuPos({
         top: containerRect.top - 8,
         left: containerRect.left,
@@ -124,12 +55,11 @@ export function SidebarFooter({
         fromBottom: true,
       })
     } else {
-      // 收起模式：菜单在按钮右侧，底部对齐按钮底部
       setMenuPos({
-        top: buttonRect.bottom, // 用作 bottom 计算的参考点
-        left: buttonRect.right + 16, // 间距增加到 16px
+        top: buttonRect.bottom,
+        left: buttonRect.right + 16,
         width: 260,
-        fromBottom: true, // 也用 bottom 定位
+        fromBottom: true,
       })
     }
 
@@ -137,22 +67,17 @@ export function SidebarFooter({
     requestAnimationFrame(() => setIsVisible(true))
   }, [showLabels])
 
-  // 关闭菜单
   const closeMenu = useCallback(() => {
     setIsVisible(false)
-    // 使用 ref 追踪 timeout 以便清理
     const closeTimeoutId = setTimeout(() => setIsOpen(false), 150)
-    // 保存到 ref 以便清理
     closeTimeoutIdRef.current = closeTimeoutId
   }, [])
 
-  // 切换菜单
   const toggleMenu = useCallback(() => {
     if (isOpen) closeMenu()
     else openMenu()
   }, [isOpen, openMenu, closeMenu])
 
-  // 点击外部关闭
   useEffect(() => {
     if (!isOpen) return
 
@@ -167,7 +92,6 @@ export function SidebarFooter({
     return () => document.removeEventListener('mousedown', handleClickOutside)
   }, [isOpen, closeMenu])
 
-  // ESC 关闭
   useEffect(() => {
     if (!isOpen) return
     const handleEsc = (e: KeyboardEvent) => {
@@ -177,7 +101,6 @@ export function SidebarFooter({
     return () => document.removeEventListener('keydown', handleEsc)
   }, [isOpen, closeMenu])
 
-  // 侧边栏状态变化时关闭
   useEffect(() => {
     const showLabelsChanged = prevShowLabelsRef.current !== showLabels
     prevShowLabelsRef.current = showLabels
@@ -193,7 +116,6 @@ export function SidebarFooter({
     }
   }, [showLabels, isOpen, closeMenu])
 
-  // 清理 closeTimeout 防止内存泄漏
   useEffect(() => {
     return () => {
       if (closeTimeoutIdRef.current) {
@@ -203,7 +125,6 @@ export function SidebarFooter({
     }
   }, [])
 
-  // 浮动菜单
   const floatingMenu = isOpen
     ? createPortal(
         <div
@@ -217,45 +138,9 @@ export function SidebarFooter({
             bottom: window.innerHeight - menuPos.top,
             left: menuPos.left,
             width: menuPos.width,
-            transformOrigin: showLabels ? 'bottom left' : 'bottom left',
+            transformOrigin: 'bottom left',
           }}
         >
-          {/* Context Stats */}
-          <div className="relative p-3">
-            <div className="flex items-center justify-between mb-2">
-              <span className="text-[length:var(--fs-sm)] font-medium text-text-200">{t('sidebar.contextUsage')}</span>
-              <div className="flex items-baseline gap-1.5">
-                <span className="text-[length:var(--fs-sm)] leading-none text-text-400 tabular-nums">
-                  {Math.round(stats.contextPercent)}%
-                </span>
-                <button
-                  type="button"
-                  onClick={() => {
-                    closeMenu()
-                    setContextDialogOpen(true)
-                  }}
-                  className="shrink-0 text-[length:var(--fs-sm)] leading-none text-text-400 hover:text-text-100 transition-colors"
-                >
-                  {t('sidebar.viewDetails')}
-                </button>
-              </div>
-            </div>
-            <div className="w-full h-1.5 bg-bg-300 rounded-full overflow-hidden relative mb-2">
-              <div
-                className={`absolute inset-0 ${statsColor} transition-transform duration-500 ease-out origin-left`}
-                style={{ transform: `scaleX(${Math.min(100, stats.contextPercent) / 100})` }}
-              />
-            </div>
-            <div className="flex justify-between text-[length:var(--fs-xxs)] text-text-400 font-mono">
-              <span>
-                {formatTokens(stats.contextUsed)} / {formatTokens(stats.contextLimit)}
-              </span>
-              <span>{formatCost(stats.totalCost)}</span>
-            </div>
-            <div className="pointer-events-none absolute inset-x-3 bottom-0 h-px bg-border-200/30" />
-          </div>
-
-          {/* Theme Selector */}
           <div className="relative p-2">
             <div className="text-[length:var(--fs-xxs)] font-bold text-text-400 uppercase tracking-wider px-1 mb-1.5">
               {t('sidebar.appearance')}
@@ -289,7 +174,6 @@ export function SidebarFooter({
             <div className="pointer-events-none absolute inset-x-3 bottom-0 h-px bg-border-200/30" />
           </div>
 
-          {/* Menu Items */}
           <div className="p-1">
             {toggleWideMode && (
               <button
@@ -322,17 +206,16 @@ export function SidebarFooter({
               }}
               className="w-full flex items-center gap-2 px-2 py-1.5 rounded-md text-[length:var(--fs-sm)] text-text-300 hover:text-text-100 hover:bg-bg-200/50 transition-colors text-left"
             >
-              <CogIcon size={14} />
-              <span>{t('sidebar.settings')}</span>
+              <span className="relative shrink-0">
+                <CogIcon size={14} />
+                <span
+                  className={`absolute -bottom-0.5 -right-0.5 w-2 h-2 rounded-full border border-bg-200 ${statusColorClass}`}
+                />
+              </span>
+              <span className="flex-1">{t('sidebar.settings')}</span>
+              <span className="text-[length:var(--fs-xxs)] text-text-400 capitalize">{connectionState}</span>
             </button>
           </div>
-
-          {/* Connection Status */}
-          <div className="relative flex items-center gap-2 px-3 py-2 text-[length:var(--fs-xxs)] text-text-300 cursor-default">
-            <div className="pointer-events-none absolute inset-x-3 top-0 h-px bg-border-200/30" />
-            <div className={`w-1.5 h-1.5 rounded-full ${statusColorClass}`} />
-            <span className="capitalize">{connectionState}</span>
-          </div>
         </div>,
         document.body,
       )
@@ -341,7 +224,6 @@ export function SidebarFooter({
   return (
     <div className="shrink-0 pb-[var(--safe-area-inset-bottom)]">
       <div ref={containerRef} className="flex flex-col gap-0.5 mx-2 py-2">
-        {/* 状态/设置触发按钮 */}
         <button
           ref={buttonRef}
           onClick={toggleMenu}
@@ -351,44 +233,29 @@ export function SidebarFooter({
           `}
           style={{
             width: showLabels ? '100%' : 32,
-            paddingLeft: showLabels ? 6 : 4, // 收起时为了对齐中心线(16px)，24px圆环需要4px padding (4+12=16)
+            paddingLeft: showLabels ? 6 : 4,
             paddingRight: showLabels ? 8 : 4,
           }}
-          title={`Context: ${formatTokens(hasMessages ? stats.contextUsed : 0)} tokens • ${Math.round(stats.contextPercent)}% • ${formatCost(stats.totalCost)}`}
+          title={t('sidebar.settings')}
         >
-          {/* 状态指示器 */}
-          <StatusIndicator percent={stats.contextPercent} connectionState={connectionState} size={24} />
+          <span className="relative shrink-0 size-6 flex items-center justify-center">
+            <CogIcon size={18} />
+            <span
+              className={`absolute -bottom-0.5 -right-0.5 w-2.5 h-2.5 rounded-full border-2 border-bg-200 ${statusColorClass}`}
+            />
+          </span>
 
-          {/* 展开时显示详细信息 */}
           <span
-            className="ml-2 flex-1 flex items-center justify-between min-w-0 transition-opacity duration-300"
+            className="ml-2 flex-1 text-left text-[length:var(--fs-sm)] truncate transition-opacity duration-300"
             style={{ opacity: showLabels ? 1 : 0 }}
           >
-            <span className="text-[length:var(--fs-sm)] font-mono text-text-300 truncate">
-              {hasMessages ? formatTokens(stats.contextUsed) : '0'} / {formatTokens(stats.contextLimit)}
-            </span>
-            <span
-              className={`text-[length:var(--fs-sm)] font-medium ml-2 ${
-                stats.contextPercent >= 90
-                  ? 'text-danger-100'
-                  : stats.contextPercent >= 70
-                    ? 'text-warning-100'
-                    : 'text-text-400'
-              }`}
-            >
-              {Math.round(stats.contextPercent)}%
-            </span>
+            {t('sidebar.settings')}
           </span>
         </button>
       </div>
 
       {floatingMenu}
       <ShareDialog isOpen={shareDialogOpen} onClose={() => setShareDialogOpen(false)} />
-      <ContextDetailsDialog
-        isOpen={contextDialogOpen}
-        onClose={() => setContextDialogOpen(false)}
-        contextLimit={stats.contextLimit}
-      />
     </div>
   )
-}
+}
\ No newline at end of file
diff --git a/src/features/chat/sidebar/draftNewChatSession.ts b/src/features/chat/sidebar/draftNewChatSession.ts
new file mode 100644
index 00000000..5c17ac7f
--- /dev/null
+++ b/src/features/chat/sidebar/draftNewChatSession.ts
@@ -0,0 +1,15 @@
+import type { ApiSession } from '../../../api'
+
+export const DRAFT_NEW_CHAT_SESSION_ID = '__draft_new_chat__'
+
+export function isDraftNewChatSession(session: Pick<ApiSession, 'id'> | null | undefined) {
+  return session?.id === DRAFT_NEW_CHAT_SESSION_ID
+}
+
+export function createDraftNewChatSession(directory: string, title: string): ApiSession {
+  return {
+    id: DRAFT_NEW_CHAT_SESSION_ID,
+    title,
+    directory,
+  } as ApiSession
+}
diff --git a/src/features/chat/sidebar/recentWorkspaceDirectories.ts b/src/features/chat/sidebar/recentWorkspaceDirectories.ts
new file mode 100644
index 00000000..534eb952
--- /dev/null
+++ b/src/features/chat/sidebar/recentWorkspaceDirectories.ts
@@ -0,0 +1,80 @@
+import type { GitWorkspaceCatalog } from '../../../hooks/useGitWorkspaceCatalog'
+import { getProjectGroupIdentity } from './projectGrouping'
+import { getDirectoryName, isSameDirectory, normalizeToForwardSlash } from '../../../utils'
+
+interface SavedDirectory {
+  path: string
+  name?: string
+}
+
+export function collectRecentWorkspaceDirectories(
+  savedDirectories: SavedDirectory[],
+  catalog: GitWorkspaceCatalog,
+): string[] {
+  const groups = new Map<
+    string,
+    { worktree: string; memberDirectories: string[]; workspaceDirectories?: string[] }
+  >()
+
+  for (const directory of savedDirectories) {
+    const normalizedDirectory = normalizeToForwardSlash(directory.path)
+    const meta = catalog.get(normalizedDirectory)
+    const { projectId, workspaceDirectories } = getProjectGroupIdentity(normalizedDirectory, meta)
+    const existing = groups.get(projectId)
+
+    if (existing) {
+      groups.set(projectId, {
+        ...existing,
+        memberDirectories: [...existing.memberDirectories, directory.path],
+      })
+      continue
+    }
+
+    groups.set(projectId, {
+      worktree: projectId,
+      memberDirectories: [directory.path],
+      workspaceDirectories,
+    })
+  }
+
+  const ordered: string[] = []
+  const seen = new Set<string>()
+
+  const pushDirectory = (directory: string) => {
+    const normalized = normalizeToForwardSlash(directory)
+    const key = normalized.toLowerCase()
+    if (seen.has(key)) return
+    seen.add(key)
+    ordered.push(normalized)
+  }
+
+  for (const project of groups.values()) {
+    if (project.workspaceDirectories && project.workspaceDirectories.length > 1) {
+      const savedWorkspaceDirectories = project.memberDirectories
+        .map(directory => normalizeToForwardSlash(directory))
+        .filter(directory => project.workspaceDirectories?.some(workspace => isSameDirectory(workspace, directory)))
+
+      const remainingWorkspaceDirectories = project.workspaceDirectories.filter(
+        workspace => !savedWorkspaceDirectories.some(directory => isSameDirectory(directory, workspace)),
+      )
+
+      for (const workspace of [...savedWorkspaceDirectories, ...remainingWorkspaceDirectories]) {
+        pushDirectory(workspace)
+      }
+      continue
+    }
+
+    pushDirectory(project.worktree)
+  }
+
+  return ordered
+}
+
+export function getWorkspaceDisplayName(directory: string, catalog: GitWorkspaceCatalog): string {
+  const normalized = normalizeToForwardSlash(directory)
+  const meta = catalog.get(normalized)
+  if (meta?.isGit && isSameDirectory(meta.rootDirectory, normalized)) {
+    return getDirectoryName(meta.rootDirectory) || meta.rootDirectory
+  }
+  return getDirectoryName(normalized) || normalized
+}
\ No newline at end of file
diff --git a/src/features/chat/useRecentWorkspaceDirectories.ts b/src/features/chat/useRecentWorkspaceDirectories.ts
new file mode 100644
index 00000000..7e64fed8
--- /dev/null
+++ b/src/features/chat/useRecentWorkspaceDirectories.ts
@@ -0,0 +1,31 @@
+import { useMemo } from 'react'
+import { useDirectory, useGitWorkspaceCatalog } from '../../hooks'
+import { isSameDirectory, normalizeToForwardSlash } from '../../utils'
+import { collectRecentWorkspaceDirectories } from './sidebar/recentWorkspaceDirectories'
+
+export function useRecentWorkspaceDirectories(currentDirectory?: string) {
+  const { savedDirectories } = useDirectory()
+  const catalogDirectories = useMemo(
+    () =>
+      Array.from(
+        new Set(
+          savedDirectories
+            .map(directory => normalizeToForwardSlash(directory.path))
+            .concat(currentDirectory ? [normalizeToForwardSlash(currentDirectory)] : []),
+        ),
+      ),
+    [savedDirectories, currentDirectory],
+  )
+  const { catalog } = useGitWorkspaceCatalog(catalogDirectories)
+
+  return useMemo(() => {
+    const directories = collectRecentWorkspaceDirectories(savedDirectories, catalog)
+    if (currentDirectory) {
+      const normalizedCurrent = normalizeToForwardSlash(currentDirectory)
+      if (!directories.some(directory => isSameDirectory(directory, normalizedCurrent))) {
+        return [normalizedCurrent, ...directories]
+      }
+    }
+    return directories
+  }, [savedDirectories, catalog, currentDirectory])
+}
\ No newline at end of file
diff --git a/src/features/chat/useSwitchWorkspaceDirectory.ts b/src/features/chat/useSwitchWorkspaceDirectory.ts
new file mode 100644
index 00000000..bdba6441
--- /dev/null
+++ b/src/features/chat/useSwitchWorkspaceDirectory.ts
@@ -0,0 +1,26 @@
+import { useCallback } from 'react'
+import { useDirectory, useRouter } from '../../hooks'
+import { paneLayoutStore } from '../../store'
+import { normalizeToForwardSlash } from '../../utils'
+
+export function useSwitchWorkspaceDirectory() {
+  const { addDirectory, setCurrentDirectory } = useDirectory()
+  const { setDirectory } = useRouter()
+
+  return useCallback(
+    (directory: string) => {
+      const normalized = normalizeToForwardSlash(directory)
+      addDirectory(normalized)
+      setCurrentDirectory(normalized)
+
+      const paneId = paneLayoutStore.getFocusedPaneId()
+      if (paneId) {
+        paneLayoutStore.focusPane(paneId)
+        paneLayoutStore.setPaneSession(paneId, null)
+      }
+
+      setDirectory(normalized)
+    },
+    [addDirectory, setCurrentDirectory, setDirectory],
+  )
+}
\ No newline at end of file
diff --git a/src/features/chat/virtual/useAutoScroll.test.tsx b/src/features/chat/virtual/useAutoScroll.test.tsx
new file mode 100644
index 00000000..eaadd8b9
--- /dev/null
+++ b/src/features/chat/virtual/useAutoScroll.test.tsx
@@ -0,0 +1,582 @@
+import { describe, it, expect, afterEach, vi } from 'vitest'
+import { render, act } from '@testing-library/react'
+import { useLayoutEffect } from 'react'
+import { useAutoScroll } from './useAutoScroll'
+
+/**
+ * 集成测试 —— 验证 input-event-driven 状态机的核心转换。
+ *
+ * jsdom 限制：scrollTop/scrollHeight/clientHeight 默认都是 0 且只读，
+ * 需要用 Object.defineProperty 注入 getter。getComputedStyle 默认返回空字符串，
+ * 需要在测试里 spy。
+ */
+
+interface ElDims {
+  scrollHeight?: number
+  clientHeight?: number
+  scrollTop?: number
+}
+
+function mountScrollEl(dims: ElDims = {}) {
+  const state = {
+    scrollHeight: dims.scrollHeight ?? 1000,
+    clientHeight: dims.clientHeight ?? 500,
+    scrollTop: dims.scrollTop ?? 500, // 默认在底部
+  }
+  const el = document.createElement('div')
+  Object.defineProperty(el, 'scrollHeight', { configurable: true, get: () => state.scrollHeight })
+  Object.defineProperty(el, 'clientHeight', { configurable: true, get: () => state.clientHeight })
+  Object.defineProperty(el, 'scrollTop', {
+    configurable: true,
+    get: () => state.scrollTop,
+    set: (v: number) => {
+      state.scrollTop = v
+    },
+  })
+  Object.defineProperty(el, 'style', { configurable: true, value: {} })
+  document.body.innerHTML = ''
+  document.body.appendChild(el)
+  return { el, state }
+}
+
+function setDims(state: { scrollHeight: number; clientHeight: number; scrollTop: number }, patch: ElDims) {
+  if (patch.scrollHeight !== undefined) state.scrollHeight = patch.scrollHeight
+  if (patch.clientHeight !== undefined) state.clientHeight = patch.clientHeight
+  if (patch.scrollTop !== undefined) state.scrollTop = patch.scrollTop
+}
+
+function fireWheel(target: Element, deltaY: number) {
+  target.dispatchEvent(new WheelEvent('wheel', { deltaY, bubbles: true, cancelable: true }))
+}
+
+function fireKey(target: Element, key: string) {
+  target.dispatchEvent(new KeyboardEvent('keydown', { key, bubbles: true, cancelable: true }))
+}
+
+function makeTouch(y: number): Touch {
+  return { clientY: y } as unknown as Touch
+}
+
+function fireTouchStart(target: Element, y = 500) {
+  const e = new TouchEvent('touchstart', { bubbles: true, cancelable: true })
+  Object.defineProperty(e, 'touches', { value: [makeTouch(y)], configurable: true })
+  target.dispatchEvent(e)
+}
+
+function fireTouchMove(target: Element, y: number) {
+  const e = new TouchEvent('touchmove', { bubbles: true, cancelable: true })
+  Object.defineProperty(e, 'touches', { value: [makeTouch(y)], configurable: true })
+  target.dispatchEvent(e)
+}
+
+function fireTouchEnd(target: Element) {
+  const e = new TouchEvent('touchend', { bubbles: true, cancelable: true })
+  Object.defineProperty(e, 'touches', { value: [], configurable: true })
+  target.dispatchEvent(e)
+}
+
+/**
+ * TestComponent 模拟 ChatArea：在 useLayoutEffect 里调 setScrollRef，
+ * 确保 ref 在 useAutoScroll 的 useEffect 运行前就绑定好（生产时 ref callback
+ * 在 commit 阶段调用，先于 useEffect）。
+ */
+let capturedAuto: ReturnType<typeof useAutoScroll> | null = null
+function Harness({ targetEl }: { targetEl: HTMLElement | null }) {
+  const auto = useAutoScroll(10)
+  // eslint-disable-next-line react-hooks/globals -- test-only side effect to expose latest hook value
+  capturedAuto = auto
+  useLayoutEffect(() => {
+    if (targetEl) auto.setScrollRef(targetEl)
+  }, [targetEl])
+  return null
+}
+
+function setup(el: HTMLElement | null) {
+  const utils = render(<Harness targetEl={el} />)
+  return {
+    /**
+     * 读最新 hook 返回值。注意：不要解构！
+     * `const { getResult } = setup()` 会把 getter 求值成一次性快照，
+     * 后续 setState re-render 后 capturedAuto 更新了也读不到。
+     */
+    getResult: () => capturedAuto!,
+    rerender: (nextEl: HTMLElement | null) => utils.rerender(<Harness targetEl={nextEl} />),
+    unmount: utils.unmount,
+  }
+}
+
+describe('useAutoScroll', () => {
+  afterEach(() => {
+    capturedAuto = null
+  })
+
+  it('initial state: not scrolled (following)', () => {
+    const { el } = mountScrollEl()
+    const { getResult } = setup(el)
+    expect(getResult().userScrolled).toBe(false)
+    expect(getResult().userScrolledRef.current).toBe(false)
+  })
+
+  describe('wheel events', () => {
+    it('wheel-up (deltaY<0) stops following', () => {
+      const { el } = mountScrollEl()
+      const { getResult } = setup(el)
+      expect(getResult().userScrolled).toBe(false)
+
+      act(() => fireWheel(el, -100))
+      expect(getResult().userScrolled).toBe(true)
+    })
+
+    it('wheel-down (deltaY>0) at bottom recovers when scroll handles the gesture', () => {
+      const { el, state } = mountScrollEl({ scrollHeight: 1000, clientHeight: 500, scrollTop: 495 })
+      const { getResult } = setup(el)
+
+      act(() => fireWheel(el, -100))
+      expect(getResult().userScrolled).toBe(true)
+
+      setDims(state, { scrollTop: 495 })
+      act(() => fireWheel(el, 100))
+      act(() => getResult().handleScroll())
+      expect(getResult().userScrolled).toBe(false)
+    })
+
+    it('wheel-down NOT at bottom does NOT recover', () => {
+      const { el, state } = mountScrollEl({ scrollHeight: 1000, clientHeight: 500, scrollTop: 200 })
+      const { getResult } = setup(el)
+
+      act(() => fireWheel(el, -100))
+      expect(getResult().userScrolled).toBe(true)
+
+      setDims(state, { scrollTop: 200 })
+      act(() => fireWheel(el, 100))
+      expect(getResult().userScrolled).toBe(true)
+    })
+
+    it('wheel inside nested scrollable only stops when the nested block reaches a boundary', () => {
+      const outer = document.createElement('div')
+      const inner = document.createElement('div')
+      let innerScrollTop = 300
+      Object.defineProperty(outer, 'scrollHeight', { configurable: true, get: () => 1000 })
+      Object.defineProperty(outer, 'clientHeight', { configurable: true, get: () => 500 })
+      Object.defineProperty(outer, 'scrollTop', { configurable: true, get: () => 500, set: () => {} })
+      Object.defineProperty(outer, 'style', { configurable: true, value: {} })
+      Object.defineProperty(inner, 'scrollHeight', { configurable: true, get: () => 1000 })
+      Object.defineProperty(inner, 'clientHeight', { configurable: true, get: () => 200 })
+      Object.defineProperty(inner, 'scrollTop', { configurable: true, get: () => innerScrollTop })
+      inner.dataset.scrollable = ''
+      document.body.innerHTML = ''
+      document.body.appendChild(outer)
+      outer.appendChild(inner)
+
+      const { getResult } = setup(outer)
+
+      // 嵌套块内部仍有空间时，wheel 只滚动嵌套块，不影响 chat 跟随。
+      act(() => fireWheel(inner, 100))
+      expect(getResult().userScrolled).toBe(false)
+
+      // 到顶部后继续向上，边界溢出意图传给 chat。
+      innerScrollTop = 0
+      act(() => fireWheel(inner, -100))
+      expect(getResult().userScrolled).toBe(true)
+
+      // 已经停止后，在嵌套块底部继续向下，边界意图打开恢复窗口；
+      // 外层 scroll 到底时完成恢复。
+      innerScrollTop = 800
+      act(() => fireWheel(inner, 100))
+      act(() => getResult().handleScroll())
+      expect(getResult().userScrolled).toBe(false)
+    })
+
+    it('wheel on editable element does not affect state', () => {
+      const { el } = mountScrollEl()
+      const input = document.createElement('input')
+      el.appendChild(input)
+      const { getResult } = setup(el)
+
+      act(() => fireWheel(input, -100))
+      expect(getResult().userScrolled).toBe(false)
+    })
+  })
+
+  describe('keyboard events', () => {
+    it('PageUp stops following', () => {
+      const { el } = mountScrollEl()
+      const { getResult } = setup(el)
+
+      act(() => fireKey(el, 'PageUp'))
+      expect(getResult().userScrolled).toBe(true)
+    })
+
+    it('ArrowDown at bottom recovers', () => {
+      const { el } = mountScrollEl({ scrollTop: 495 })
+      const { getResult } = setup(el)
+
+      act(() => fireKey(el, 'PageUp'))
+      expect(getResult().userScrolled).toBe(true)
+
+      act(() => fireKey(el, 'ArrowDown'))
+      expect(getResult().userScrolled).toBe(false)
+    })
+
+    it('keyboard on editable element does not affect state', () => {
+      const { el } = mountScrollEl()
+      const textarea = document.createElement('textarea')
+      el.appendChild(textarea)
+      const { getResult } = setup(el)
+
+      act(() => fireKey(textarea, 'PageUp'))
+      expect(getResult().userScrolled).toBe(false)
+    })
+  })
+
+  describe('touch events', () => {
+    it('tap (touchstart + touchend, no movement) does NOT stop following', () => {
+      const { el } = mountScrollEl()
+      const { getResult } = setup(el)
+
+      act(() => fireTouchStart(el, 500))
+      act(() => fireTouchEnd(el))
+      expect(getResult().userScrolled).toBe(false)
+    })
+
+    it('touchmove upward (finger down >10px) stops following', () => {
+      const { el } = mountScrollEl()
+      const { getResult } = setup(el)
+
+      act(() => fireTouchStart(el, 500))
+      act(() => fireTouchMove(el, 520)) // finger down 20px = scroll up
+      expect(getResult().userScrolled).toBe(true)
+    })
+
+    it('small touchmove (<10px) does NOT stop following', () => {
+      const { el } = mountScrollEl()
+      const { getResult } = setup(el)
+
+      act(() => fireTouchStart(el, 500))
+      act(() => fireTouchMove(el, 508)) // finger down 8px = below threshold
+      expect(getResult().userScrolled).toBe(false)
+    })
+
+    it('touchend (plain release, no downward drag) does NOT recover', () => {
+      const { el, state } = mountScrollEl({ scrollTop: 495 })
+      const { getResult } = setup(el)
+
+      // 用 wheel-up 预设 userScrolled（touchstart 不再自动设置）
+      act(() => fireWheel(el, -100))
+      expect(getResult().userScrolled).toBe(true)
+
+      setDims(state, { scrollTop: 495 })
+      act(() => fireTouchStart(el, 500))
+      act(() => fireTouchEnd(el))
+      expect(getResult().userScrolled).toBe(true)
+    })
+
+    it('touchend recovers only after a genuine downward drag to bottom', () => {
+      const { el, state } = mountScrollEl({ scrollTop: 200 })
+      const { getResult } = setup(el)
+
+      act(() => fireWheel(el, -100))
+      expect(getResult().userScrolled).toBe(true)
+
+      // 手指上移 400px → 内容向下滚 400px，已到底部
+      setDims(state, { scrollTop: 495 })
+      act(() => fireTouchStart(el, 500))
+      act(() => fireTouchMove(el, 100))
+      act(() => fireTouchEnd(el))
+      expect(getResult().userScrolled).toBe(false)
+    })
+
+    it('touchend after an upward drag does NOT recover', () => {
+      const { el, state } = mountScrollEl({ scrollTop: 495 })
+      const { getResult } = setup(el)
+
+      act(() => fireWheel(el, -100))
+      expect(getResult().userScrolled).toBe(true)
+
+      // 手指下移（内容向上滚）→ 不是向下滚
+      setDims(state, { scrollTop: 480 })
+      act(() => fireTouchStart(el, 100))
+      act(() => fireTouchMove(el, 500))
+      act(() => fireTouchEnd(el))
+      expect(getResult().userScrolled).toBe(true)
+    })
+  })
+
+  describe('imperative API', () => {
+    it('pause() stops following', () => {
+      const { el } = mountScrollEl()
+      const { getResult } = setup(el)
+
+      act(() => getResult().pause())
+      expect(getResult().userScrolled).toBe(true)
+    })
+
+    it('pause() is no-op when content fits in viewport', () => {
+      const { el } = mountScrollEl({ scrollHeight: 100, clientHeight: 500 })
+      const { getResult } = setup(el)
+
+      act(() => getResult().pause())
+      expect(getResult().userScrolled).toBe(false)
+    })
+
+    it('forceScrollToBottom() recovers even if user had stopped', () => {
+      const { el, state } = mountScrollEl()
+      const { getResult } = setup(el)
+
+      act(() => fireWheel(el, -100))
+      expect(getResult().userScrolled).toBe(true)
+
+      act(() => getResult().forceScrollToBottom())
+      expect(getResult().userScrolled).toBe(false)
+      expect(state.scrollTop).toBe(500) // max = 1000 - 500
+    })
+
+    it('scrollToBottom(non-force) does nothing when user stopped', () => {
+      const { el, state } = mountScrollEl({ scrollTop: 100 })
+      const { getResult } = setup(el)
+
+      act(() => fireWheel(el, -100))
+      expect(getResult().userScrolled).toBe(true)
+
+      const before = state.scrollTop
+      act(() => getResult().scrollToBottom())
+      expect(getResult().userScrolled).toBe(true)
+      expect(state.scrollTop).toBe(before)
+    })
+  })
+
+  describe('handleScroll', () => {
+    it('does NOT clear userScrolled when at bottom (key invariant)', () => {
+      const { el, state } = mountScrollEl({ scrollTop: 495 })
+      const { getResult } = setup(el)
+
+      act(() => fireWheel(el, -100))
+      expect(getResult().userScrolled).toBe(true)
+
+      setDims(state, { scrollTop: 495 })
+      act(() => getResult().handleScroll())
+      expect(getResult().userScrolled).toBe(true)
+    })
+
+    it('schedules recoverPin when following but drifted off bottom', async () => {
+      const { el, state } = mountScrollEl({ scrollTop: 100 })
+      const { getResult } = setup(el)
+
+      const pinFn = vi.fn()
+      act(() => getResult().setPinToBottom(pinFn))
+
+      setDims(state, { scrollTop: 100 })
+      act(() => getResult().handleScroll())
+
+      await act(async () => {
+        await new Promise(r => requestAnimationFrame(r))
+      })
+      expect(pinFn).toHaveBeenCalled()
+    })
+
+    it('does NOT schedule recoverPin when user stopped', async () => {
+      const { el } = mountScrollEl({ scrollTop: 100 })
+      const { getResult } = setup(el)
+
+      const pinFn = vi.fn()
+      act(() => getResult().setPinToBottom(pinFn))
+
+      act(() => fireWheel(el, -100))
+      act(() => getResult().handleScroll())
+
+      await act(async () => {
+        await new Promise(r => requestAnimationFrame(r))
+      })
+      expect(pinFn).not.toHaveBeenCalled()
+    })
+
+    it('does NOT schedule recoverPin when at bottom (no drift)', async () => {
+      const { el, state } = mountScrollEl({ scrollTop: 495 })
+      const { getResult } = setup(el)
+
+      const pinFn = vi.fn()
+      act(() => getResult().setPinToBottom(pinFn))
+
+      setDims(state, { scrollTop: 495 })
+      act(() => getResult().handleScroll())
+
+      await act(async () => {
+        await new Promise(r => requestAnimationFrame(r))
+      })
+      expect(pinFn).not.toHaveBeenCalled()
+    })
+  })
+
+  describe('selection', () => {
+    it('does not crash when selectionchange fires with empty selection', () => {
+      const { el } = mountScrollEl()
+      const { getResult } = setup(el)
+
+      act(() => {
+        document.dispatchEvent(new Event('selectionchange'))
+      })
+      expect(getResult().userScrolled).toBe(false)
+    })
+
+    it('selection during streaming stops following', () => {
+      const { el } = mountScrollEl()
+      const { getResult } = setup(el)
+
+      act(() => getResult().setStreaming(true))
+
+      // 模拟开始选中文字
+      const sel = {
+        toString: () => 'selected',
+        anchorNode: el,
+      } as unknown as Selection
+      vi.spyOn(window, 'getSelection').mockReturnValue(sel)
+
+      act(() => {
+        document.dispatchEvent(new Event('selectionchange'))
+      })
+      expect(getResult().userScrolled).toBe(true)
+    })
+
+    it('selection during idle (non-streaming) does NOT stop following', () => {
+      const { el } = mountScrollEl()
+      const { getResult } = setup(el)
+
+      // 不 setStreaming —— 默认 false
+      const sel = {
+        toString: () => 'selected',
+        anchorNode: el,
+      } as unknown as Selection
+      vi.spyOn(window, 'getSelection').mockReturnValue(sel)
+
+      act(() => {
+        document.dispatchEvent(new Event('selectionchange'))
+      })
+      expect(getResult().userScrolled).toBe(false)
+    })
+  })
+
+  describe('recovery window', () => {
+    it('tryRecover NOT at bottom opens a recovery window; subsequent scroll to bottom recovers', () => {
+      const { el, state } = mountScrollEl({ scrollTop: 200 })
+      const { getResult } = setup(el)
+
+      // 用户停止
+      act(() => fireWheel(el, -100))
+      expect(getResult().userScrolled).toBe(true)
+
+      // wheel-down 但还没到底：打开恢复窗口，不立刻恢复
+      setDims(state, { scrollTop: 300 })
+      act(() => fireWheel(el, 100))
+      expect(getResult().userScrolled).toBe(true)
+
+      // momentum 把 scrollTop 带到底部 → handleScroll 在窗口内恢复
+      setDims(state, { scrollTop: 495 })
+      act(() => getResult().handleScroll())
+      expect(getResult().userScrolled).toBe(false)
+    })
+
+    it('recovery window closes when user stopFollow again', () => {
+      const { el, state } = mountScrollEl({ scrollTop: 200 })
+      const { getResult } = setup(el)
+
+      // 用户先停止
+      act(() => fireWheel(el, -100))
+      expect(getResult().userScrolled).toBe(true)
+
+      // wheel-down 但还没到底：打开恢复窗口，不立刻恢复
+      setDims(state, { scrollTop: 300 })
+      act(() => fireWheel(el, 100))
+      expect(getResult().userScrolled).toBe(true)
+
+      // 用户又向上滚 → stopFollow 关掉窗口
+      setDims(state, { scrollTop: 290 })
+      act(() => fireWheel(el, -100))
+      expect(getResult().userScrolled).toBe(true)
+
+      // 即使后续到达底部，没有窗口也不会被 scroll 事件清掉
+      setDims(state, { scrollTop: 495 })
+      act(() => getResult().handleScroll())
+      expect(getResult().userScrolled).toBe(true)
+    })
+  })
+
+  describe('OS_DRAG events (overlayScrollbar)', () => {
+    it('OS_DRAG_START stops following, OS_DRAG_END at bottom recovers', () => {
+      const { el, state } = mountScrollEl({ scrollTop: 495 })
+      const { getResult } = setup(el)
+
+      act(() => el.dispatchEvent(new CustomEvent('os-scroll-dragstart', { bubbles: true })))
+      expect(getResult().userScrolled).toBe(true)
+
+      setDims(state, { scrollTop: 495 })
+      act(() => el.dispatchEvent(new CustomEvent('os-scroll-dragend', { bubbles: true })))
+      expect(getResult().userScrolled).toBe(false)
+    })
+
+    it('OS_DRAG_END not at bottom does NOT recover', () => {
+      const { el, state } = mountScrollEl({ scrollTop: 100 })
+      const { getResult } = setup(el)
+
+      act(() => el.dispatchEvent(new CustomEvent('os-scroll-dragstart', { bubbles: true })))
+      expect(getResult().userScrolled).toBe(true)
+
+      setDims(state, { scrollTop: 100 })
+      act(() => el.dispatchEvent(new CustomEvent('os-scroll-dragend', { bubbles: true })))
+      expect(getResult().userScrolled).toBe(true)
+    })
+  })
+
+  describe('rapid / multiple events', () => {
+    it('100 rapid wheel-up events do not crash and end with userScrolled=true', () => {
+      const { el } = mountScrollEl()
+      const { getResult } = setup(el)
+
+      act(() => {
+        for (let i = 0; i < 100; i++) fireWheel(el, -100)
+      })
+      expect(getResult().userScrolled).toBe(true)
+    })
+
+    it('alternating wheel-up / wheel-down sequence ends with the last direction', () => {
+      const { el, state } = mountScrollEl({ scrollTop: 495 })
+      const { getResult } = setup(el)
+
+      // up, down, up, down
+      act(() => fireWheel(el, -100))
+      expect(getResult().userScrolled).toBe(true)
+
+      setDims(state, { scrollTop: 495 })
+      act(() => fireWheel(el, 100))
+      act(() => getResult().handleScroll())
+      expect(getResult().userScrolled).toBe(false)
+
+      act(() => fireWheel(el, -100))
+      expect(getResult().userScrolled).toBe(true)
+
+      setDims(state, { scrollTop: 495 })
+      act(() => fireWheel(el, 100))
+      act(() => getResult().handleScroll())
+      expect(getResult().userScrolled).toBe(false)
+    })
+  })
+
+  describe('nested scrollable + keyboard', () => {
+    it('PageUp inside a nested scrollable still stops (nested affects wheel only, not keyboard)', () => {
+      const outer = document.createElement('div')
+      const inner = document.createElement('div')
+      Object.defineProperty(outer, 'scrollHeight', { configurable: true, get: () => 1000 })
+      Object.defineProperty(outer, 'clientHeight', { configurable: true, get: () => 500 })
+      Object.defineProperty(outer, 'scrollTop', { configurable: true, get: () => 500, set: () => {} })
+      Object.defineProperty(outer, 'style', { configurable: true, value: {} })
+      document.body.innerHTML = ''
+      document.body.appendChild(outer)
+      outer.appendChild(inner)
+
+      inner.dataset.scrollable = ''
+
+      const { getResult } = setup(outer)
+      act(() => fireKey(inner, 'PageUp'))
+      expect(getResult().userScrolled).toBe(true)
+    })
+  })
+})
diff --git a/src/features/chat/virtual/useAutoScroll.ts b/src/features/chat/virtual/useAutoScroll.ts
index db16f5ee..759eaa81 100644
--- a/src/features/chat/virtual/useAutoScroll.ts
+++ b/src/features/chat/virtual/useAutoScroll.ts
@@ -1,123 +1,327 @@
 /**
- * useAutoScroll — React 移植自 oc 的 createAutoScroll
+ * useAutoScroll — input-event-driven scroll-follow state machine
  *
- * 核心机制：
- * - userScrolled: 用户离开底部后置 true，阻止程序拉回底部
- * - markAuto/isAuto: 程序滚动时打标记（1500ms TTL, 2px 容差），
- *   防止自己的 scrollToBottom 被误判为用户滚动
- * - handleScroll 可无手势门控调用：靠 isAuto 区分程序滚动
- * - 所有回调稳定（useCallback + useMemo），避免 ref 回调重挂载
+ * 核心原则：userScrolled 只由**直接的用户输入**设置（wheel 向上、touch、滚动条
+ * 拖拽、键盘向上、selection 起、disclosure 展开、scroll-to-message）。
+ * 绝不由 scroll 事件单独设置。这意味着 layout clamp、virtualizer 调整、
+ * viewport resize 等任何「无用户手势」的滚动都不会破坏跟随 —— 它们不匹配
+ * 任何输入信号。
+ *
+ * 恢复（清掉 userScrolled）在三种情况下发生：
+ *   (a) forceScrollToBottom（命令式「回到底部」按钮）
+ *   (b) 显式向下输入时 scrollTop 已在 bottomThreshold 内 —— 立即恢复
+ *   (c) 显式向下输入时 scrollTop 还没到底 —— 打开 500ms 恢复窗口，
+ *       窗口内的 scroll 事件若发现已回到底部，就完成恢复。
+ *       解决 iOS momentum / 触屏「拖到底松手时差几 px」的边界。
+ *
+ * 关键：scroll 事件本身**不会**清 userScrolled，除非在显式向下输入打开的
+ * 恢复窗口内 —— 这样小幅 wheel-up 后紧随的 scroll 事件即使发现 atBottom=true
+ * 也不会把刚表达的停止意图清掉（没有窗口）。
+ *
+ * handleScroll 唯一职责：用户在跟随时若发生 drift（scrollTop 离开底部），
+ * 排一个 rAF 调 pinToBottom 写回去。
+ *
+ * 不再需要 markAuto/isAuto token —— 用户输入在事件源头捕获，
+ * 而不是从 scroll 事件里事后推断。
  */
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { OS_DRAG_START, OS_DRAG_END } from '../../../lib/overlayScrollbar'
+
+const SCROLL_UP_KEYS = new Set(['PageUp', 'Home', 'ArrowUp'])
+const SCROLL_DOWN_KEYS = new Set(['PageDown', 'End', 'ArrowDown'])
+
+/** tryRecover 没立即成功时打开的恢复窗口时长 —— 给 momentum / 连续 scroll 一个机会完成恢复 */
+const RECOVERY_WINDOW_MS = 500
+
+/** 这些元素上的 wheel / 键盘滚动不影响跟随状态（用户在编辑） */
+const EDITABLE_SELECTOR = 'input, textarea, select, [contenteditable="true"], [contenteditable=""]'
+
+/**
+ * 输入事件 handlers 工厂 + 统一 attach/detach。
+ * 把监听器配置从 useEffect 主体里抽出来，让 useAutoScroll 主流程更清晰。
+ * handlers 闭包捕获 ctx 里的 ref 和回调 —— 这些值由 useAutoScroll 提供。
+ */
+interface InputHandlerContext {
+  el: HTMLElement
+  stopFollow: () => void
+  tryRecover: () => void
+  markRecoverGesture: () => void
+  touchStartYRef: React.MutableRefObject<number>
+  touchMaxDownRef: React.MutableRefObject<number>
+  lastSelEmptyRef: React.MutableRefObject<boolean>
+  isStreamingRef: React.MutableRefObject<boolean>
+}
+
+function createInputHandlers(ctx: InputHandlerContext) {
+  const { el, stopFollow, tryRecover, markRecoverGesture } = ctx
 
-const AUTO_TTL = 1500
-const AUTO_TOLERANCE = 2
+  const onWheel = (e: WheelEvent) => {
+    const t = e.target instanceof Element ? e.target : null
+    if (!t || !el.contains(t)) return
+    if (t.closest(EDITABLE_SELECTOR)) return
+    const delta = normalizeWheelDelta(e, el)
+    const nested = findScrollableAncestor(t, el)
+    if (nested && !shouldMarkBoundaryGesture(nested, delta)) return
+    if (delta < 0) {
+      stopFollow()
+    } else if (delta > 0) {
+      // 下滚的实际恢复由 handleScroll 完成；这里仅打开用户恢复窗口。
+      markRecoverGesture()
+    }
+  }
+
+  const isRelevantTouch = (e: TouchEvent): boolean => {
+    const t = e.target instanceof Element ? e.target : null
+    if (!t || !el.contains(t)) return false
+    if (t.closest(EDITABLE_SELECTOR)) return false
+    return true
+  }
+
+  const onTouchStart = (e: TouchEvent) => {
+    if (!isRelevantTouch(e)) return
+    ctx.touchStartYRef.current = e.touches[0]?.clientY ?? 0
+    ctx.touchMaxDownRef.current = 0
+  }
+
+  const onTouchMove = (e: TouchEvent) => {
+    if (!isRelevantTouch(e)) return
+    const y = e.touches[0]?.clientY ?? 0
+    // d > 0: 手指上移 = 内容向下滚（向下滚动）
+    // d < 0: 手指下移 = 内容向上滚（向上滚动）
+    const d = ctx.touchStartYRef.current - y
+    if (d > ctx.touchMaxDownRef.current) ctx.touchMaxDownRef.current = d
+    // 向上滚动手势（手指下移超过阈值）→ 停止跟随，和桌面端 wheel-up 一致
+    if (d < -10) stopFollow()
+  }
+
+  const onTouchEnd = (e: TouchEvent) => {
+    if (!isRelevantTouch(e)) return
+    // 只有「本次触摸是向下滚动手势且已回到底部」才恢复跟随。
+    if (ctx.touchMaxDownRef.current > 10) tryRecover()
+  }
+
+  const onPointerDown = (e: PointerEvent) => {
+    // touch 走 touchstart 处理；这里只处理鼠标 / 笔
+    if (e.pointerType === 'touch') return
+    const t = e.target instanceof Element ? e.target : null
+    // 滚动条是 scroll root 自己渲染的，target === el
+    if (!t || t !== el) return
+    const rect = el.getBoundingClientRect()
+    const sbWidth = rect.width - el.clientWidth
+    if (sbWidth <= 0) return
+    if (e.clientX >= rect.right - sbWidth) stopFollow()
+  }
+
+  const onPointerUp = () => {
+    // 鼠标松开本身不是「向下滚动」手势，不恢复跟随。
+    // 鼠标向下滚动靠 wheel(deltaY>0) 恢复；滚动条拖拽靠 OS_DRAG_END 恢复。
+  }
+
+  const onKeyDown = (e: KeyboardEvent) => {
+    const t = e.target instanceof Element ? e.target : null
+    if (!t || !el.contains(t)) return
+    if (t.closest(EDITABLE_SELECTOR)) return
+    if (SCROLL_UP_KEYS.has(e.key)) {
+      stopFollow()
+    } else if (SCROLL_DOWN_KEYS.has(e.key)) {
+      tryRecover()
+    }
+  }
+
+  const onSelectionChange = () => {
+    // 非流式时 selection 不影响跟随状态 —— 用户只是在复制/引用文字，
+    // 不应该导致 toBottom 按钮出现或下一条消息不贴底
+    if (!ctx.isStreamingRef.current) return
+    const sel = window.getSelection()
+    const isEmpty = !sel || sel.toString().length === 0
+    if (isEmpty === ctx.lastSelEmptyRef.current) return
+    ctx.lastSelEmptyRef.current = isEmpty
+    // 只有「开始选中文字」才停止跟随；清空 selection 不改变状态
+    if (isEmpty) return
+    // 只对 chat root 内的 selection 起反应
+    const node = sel.anchorNode
+    const nodeEl = node
+      ? (node.nodeType === Node.ELEMENT_NODE ? (node as Element) : node.parentElement)
+      : null
+    if (!nodeEl || !el.contains(nodeEl)) return
+    stopFollow()
+  }
+
+  // 自绘滚动条（overlayScrollbar）拖拽：原生 scrollbar 被全局隐藏，
+  // 它的 thumb 在父元素上且 stopPropagation，pointerdown 检测不到。
+  // 这里改监听 overlayScrollbar 广播的 dragstart/dragend。
+  const onOsDragStart = () => stopFollow()
+  const onOsDragEnd = () => tryRecover()
+
+  return {
+    onWheel,
+    onTouchStart,
+    onTouchMove,
+    onTouchEnd,
+    onPointerDown,
+    onPointerUp,
+    onKeyDown,
+    onSelectionChange,
+    onOsDragStart,
+    onOsDragEnd,
+  }
+}
+
+/** 用 AbortController 统一管理所有 listener 的注册/卸载 */
+function attachInputListeners(el: HTMLElement, h: ReturnType<typeof createInputHandlers>) {
+  const ac = new AbortController()
+  const capture = { capture: true, passive: true, signal: ac.signal }
+  const bubble = { passive: true, signal: ac.signal }
+  const keydownOpts = { signal: ac.signal }
+  const osOpts = { signal: ac.signal }
+
+  el.addEventListener('wheel', h.onWheel, capture)
+  el.addEventListener('touchstart', h.onTouchStart, capture)
+  el.addEventListener('touchmove', h.onTouchMove, capture)
+  el.addEventListener('touchend', h.onTouchEnd, bubble)
+  el.addEventListener('pointerdown', h.onPointerDown, capture)
+  el.addEventListener('pointerup', h.onPointerUp, bubble)
+  el.addEventListener('keydown', h.onKeyDown, keydownOpts)
+  el.addEventListener(OS_DRAG_START, h.onOsDragStart, osOpts)
+  el.addEventListener(OS_DRAG_END, h.onOsDragEnd, osOpts)
+  document.addEventListener('selectionchange', h.onSelectionChange, osOpts)
+
+  return () => ac.abort()
+}
+
+/**
+ * 从 target 向上找显式标记的嵌套滚动祖先（不含 root 自己）。
+ * 嵌套块使用 data-scrollable 表达边界，避免每次 wheel 都调用 getComputedStyle。
+ */
+function findScrollableAncestor(target: Element, root: HTMLElement): HTMLElement | null {
+  const nested = target.closest<HTMLElement>('[data-scrollable]')
+  if (!nested || nested === root || !root.contains(nested)) return null
+  return nested
+}
+
+function normalizeWheelDelta(event: WheelEvent, root: HTMLElement) {
+  if (event.deltaMode === 1) return event.deltaY * 40
+  if (event.deltaMode === 2) return event.deltaY * root.clientHeight
+  return event.deltaY
+}
+
+function shouldMarkBoundaryGesture(nested: HTMLElement, delta: number) {
+  const max = nested.scrollHeight - nested.clientHeight
+  if (max <= 1) return true
+  if (!delta) return false
+  if (delta < 0) return nested.scrollTop + delta <= 0
+  return delta > max - nested.scrollTop
+}
 
 export function useAutoScroll(bottomThreshold = 10) {
   const scrollElRef = useRef<HTMLElement | undefined>(undefined)
   const contentElRef = useRef<HTMLElement | undefined>(undefined)
+  /** 是否正在流式输出 —— selection 只在流式时才影响跟随状态 */
+  const isStreamingRef = useRef(false)
   const userScrolledRef = useRef(false)
   const [userScrolled, setUserScrolled] = useState(false)
-
-  const autoMark = useRef<{ top: number; time: number } | undefined>(undefined)
-  const autoTimer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined)
+  const lastSelEmptyRef = useRef(true)
+  const recoverPinFrame = useRef<number | undefined>(undefined)
+  /** 触摸手势中向下滚动的最大位移，用于 touchend 判断是否真的「向下滚到底」 */
+  const touchStartYRef = useRef(0)
+  const touchMaxDownRef = useRef(0)
+  /** 由 ChatArea 注入的「写到底部」函数，drift 时调用以恢复贴底 */
+  const pinToBottomRef = useRef<(() => void) | null>(null)
+  /**
+   * 恢复窗口的截止时间戳（Date.now() + RECOVERY_WINDOW_MS）。
+   * 0 = 没有窗口。显式向下输入在不在线底部时打开窗口，
+   * 之后 scroll 事件若发现已回到底部，就完成恢复。
+   * 解决 iOS momentum / 触屏「拖到底松手时差几 px」的边界。
+   */
+  const recoverUntilRef = useRef(0)
 
   const setScrolled = useCallback((v: boolean) => {
+    if (userScrolledRef.current === v) return
     userScrolledRef.current = v
     setUserScrolled(v)
+    recoverUntilRef.current = 0
   }, [])
 
-  const markAuto = useCallback((el?: HTMLElement | null) => {
-    const target = el ?? scrollElRef.current
-    if (!target) return
-    autoMark.current = { top: target.scrollHeight - target.clientHeight, time: Date.now() }
-    if (autoTimer.current) clearTimeout(autoTimer.current)
-    autoTimer.current = setTimeout(() => { autoMark.current = undefined }, AUTO_TTL)
-  }, [])
-
-  const isAuto = useCallback((el: HTMLElement) => {
-    const a = autoMark.current
-    if (!a) return false
-    if (Date.now() - a.time > AUTO_TTL) { autoMark.current = undefined; return false }
-    return Math.abs(el.scrollTop - a.top) < AUTO_TOLERANCE
-  }, [])
-
-  const scrollToBottom = useCallback((force: boolean) => {
-    const el = scrollElRef.current
-    if (!el) return
-    if (force && userScrolledRef.current) setScrolled(false)
-    if (!force && userScrolledRef.current) return
-    const max = Math.max(0, el.scrollHeight - el.clientHeight)
-    if (max - el.scrollTop < 2) {
-      markAuto(el)
-      return
-    }
-    markAuto(el)
-    el.scrollTop = max
-  }, [markAuto, setScrolled])
-
-  const stop = useCallback(() => {
+  /** 用户表达「停止跟随」：直接置 userScrolled=true，并关掉任何恢复窗口 */
+  const stopFollow = useCallback(() => {
     const el = scrollElRef.current
-    if (!el) return
-    if (el.scrollHeight - el.clientHeight <= 1) {
+    if (el && el.scrollHeight - el.clientHeight <= 1) {
+      // 内容不足一屏，谈不上跟随
       if (userScrolledRef.current) setScrolled(false)
       return
     }
-    if (userScrolledRef.current) return
+    recoverUntilRef.current = 0
     setScrolled(true)
   }, [setScrolled])
 
-  const handleScroll = useCallback(() => {
+  /**
+   * 用户表达「向下」意愿（wheel-down / 向下键 / touchend / pointerup）：
+   * 若 scrollTop 已回到 bottomThreshold 内，立即恢复跟随；
+   * 否则打开 500ms 恢复窗口 —— 让 momentum / 后续 scroll 事件完成恢复。
+   */
+  const tryRecover = useCallback(() => {
+    if (!userScrolledRef.current) return
     const el = scrollElRef.current
     if (!el) return
     const max = el.scrollHeight - el.clientHeight
-    if (max <= 1) {
-      // isAuto 守卫：程序滚动（applyScrollAdjustment 经 scrollToFn→markAuto）
-      // 不清 userScrolled，只有真实用户滚动到无溢出时才清。
-      if (userScrolledRef.current && !isAuto(el)) setScrolled(false)
-      return
-    }
     if (max - el.scrollTop < bottomThreshold) {
-      // 用户已离底时，只有用户主动滚回底才清 userScrolled。
-      // 程序滚动路径（resizeItem → queueMicrotask）受 shouldAnchorBottom 守卫，
-      // 用户离底时不会产生自动回底滚动——所以 isAuto 标记的 scroll 事件到达
-      // 这里只能是用户真实手势，直接清。
-      if (userScrolledRef.current) setScrolled(false)
-      return
-    }
-    if (!userScrolledRef.current && isAuto(el)) {
-      scrollToBottom(false)
+      setScrolled(false)
       return
     }
-    stop()
-  }, [bottomThreshold, isAuto, scrollToBottom, setScrolled, stop])
+    recoverUntilRef.current = Date.now() + RECOVERY_WINDOW_MS
+  }, [bottomThreshold, setScrolled])
+
+  const markRecoverGesture = useCallback(() => {
+    if (!userScrolledRef.current) return
+    recoverUntilRef.current = Date.now() + RECOVERY_WINDOW_MS
+  }, [])
 
-  const handleWheel = useCallback((e: WheelEvent) => {
+  // ── 漂移自愈：scroll 事件发现离底但 userScrolled=false 时排个 rAF 写回底 ──
+  const scheduleRecoverPin = useCallback(() => {
+    if (recoverPinFrame.current !== undefined) return
+    recoverPinFrame.current = requestAnimationFrame(() => {
+      recoverPinFrame.current = undefined
+      if (userScrolledRef.current) return
+      pinToBottomRef.current?.()
+    })
+  }, [])
+
+  const setPinToBottom = useCallback((fn: (() => void) | null) => {
+    pinToBottomRef.current = fn
+  }, [])
+
+  // ── scroll 事件：负责 drift pin 和 recovery window，永远不直接清 userScrolled（除恢复窗口内） ──
+  const handleScroll = useCallback(() => {
     const el = scrollElRef.current
     if (!el) return
     const max = el.scrollHeight - el.clientHeight
-    // 容器无溢出时忽略所有 wheel 事件——空白页 spacer 产生的小溢出不该触发折叠
-    if (max <= 1) return
-    if (e.deltaY >= 0) {
-      // 下滚回底时恢复贴底跟随：用户主动下滚到阈值内才清 userScrolled。
-      // 流式增长推回不会走这里（不是 wheel 事件）。
-      if (userScrolledRef.current) {
-        if (max - el.scrollTop < bottomThreshold) setScrolled(false)
+    const atBottom = max <= 1 || max - el.scrollTop < bottomThreshold
+
+    // 恢复窗口：用户表达过「向下」意愿后，给 momentum 一段时间把 scrollTop 带到底部
+    if (userScrolledRef.current && recoverUntilRef.current > 0) {
+      if (Date.now() > recoverUntilRef.current) {
+        recoverUntilRef.current = 0
+      } else if (atBottom) {
+        setScrolled(false)
+        return
       }
-      return
     }
-    // 上滚立刻离底。清除 auto 标记避免后续 scroll 事件被误判为程序滚动。
-    autoMark.current = undefined
-    const nested = (e.target instanceof Element ? e.target : undefined)?.closest('[data-scrollable]')
-    if (nested && nested !== el) return
-    // 直接写 ref，不等 React re-render——同帧的 RO/measure 必须立刻看到离底
-    if (!userScrolledRef.current) setScrolled(true)
-  }, [bottomThreshold, setScrolled])
 
-  const handleInteraction = useCallback(() => {
-    const sel = window.getSelection()
-    if (sel && sel.toString().length > 0) stop()
-  }, [stop])
+    if (userScrolledRef.current) return
+    if (!atBottom) scheduleRecoverPin()
+  }, [bottomThreshold, scheduleRecoverPin, setScrolled])
+
+  // ── 命令式动作 ──
+  const scrollToBottom = useCallback((force: boolean) => {
+    const el = scrollElRef.current
+    if (!el) return
+    if (force && userScrolledRef.current) setScrolled(false)
+    if (!force && userScrolledRef.current) return
+    const max = Math.max(0, el.scrollHeight - el.clientHeight)
+    if (max - el.scrollTop >= 2) el.scrollTop = max
+  }, [setScrolled])
+
+  const pause = stopFollow
 
   const setScrollRef = useCallback((el: HTMLElement | null) => {
     scrollElRef.current = el ?? undefined
@@ -128,40 +332,56 @@ export function useAutoScroll(bottomThreshold = 10) {
     contentElRef.current = el ?? undefined
   }, [])
 
-  // 不使用 contentRef ResizeObserver：
-  // measureElement 内置 RO → resizeItem → applyScrollAdjustment 已经处理了贴底。
-  // contentRef RO 会在 item 首次测量时触发（container height 变化），
-  // 把 scrollTop 拉回底部，覆盖 applyScrollAdjustment 的正确行为。
+  const setStreaming = useCallback((v: boolean) => {
+    isStreamingRef.current = v
+  }, [])
 
-  useEffect(() => () => { if (autoTimer.current) clearTimeout(autoTimer.current) }, [])
+  // ── 输入事件监听器：mount 一次，cleanup 通过 AbortController 统一 ──
+  useEffect(() => {
+    const el = scrollElRef.current
+    if (!el) return
+    const handlers = createInputHandlers({
+      el,
+      stopFollow,
+      tryRecover,
+      markRecoverGesture,
+      touchStartYRef,
+      touchMaxDownRef,
+      lastSelEmptyRef,
+      isStreamingRef,
+    })
+    return attachInputListeners(el, handlers)
+  }, [markRecoverGesture, stopFollow, tryRecover])
 
-  const reset = useCallback(() => {
-    setScrolled(false)
-  }, [setScrolled])
+  useEffect(() => () => {
+    if (recoverPinFrame.current !== undefined) cancelAnimationFrame(recoverPinFrame.current)
+  }, [])
+
+  const reset = useCallback(() => setScrolled(false), [setScrolled])
 
   const resume = useCallback(() => {
     setScrolled(false)
     scrollToBottom(true)
   }, [scrollToBottom, setScrolled])
+
   const scrollToBottomCb = useCallback(() => scrollToBottom(false), [scrollToBottom])
   const forceScrollToBottom = useCallback(() => scrollToBottom(true), [scrollToBottom])
 
   return useMemo(() => ({
     setScrollRef,
     setContentRef,
+    setPinToBottom,
+    setStreaming,
     handleScroll,
-    handleWheel,
-    handleInteraction,
-    pause: stop,
+    pause,
     reset,
     resume,
-    markAuto,
     scrollToBottom: scrollToBottomCb,
     forceScrollToBottom,
     userScrolledRef,
     userScrolled,
   }), [
-    setScrollRef, setContentRef, handleScroll, handleWheel, handleInteraction,
-    stop, reset, resume, markAuto, scrollToBottomCb, forceScrollToBottom, userScrolled,
+    setScrollRef, setContentRef, setPinToBottom, setStreaming, handleScroll, pause,
+    reset, resume, scrollToBottomCb, forceScrollToBottom, userScrolled,
   ])
 }
diff --git a/src/features/message/MessageRenderer.tsx b/src/features/message/MessageRenderer.tsx
index 64442a95..a182e718 100644
--- a/src/features/message/MessageRenderer.tsx
+++ b/src/features/message/MessageRenderer.tsx
@@ -494,7 +494,7 @@ const CollapsibleUserText = memo(function CollapsibleUserText({
       {showCollapse && (
         <button
           type="button"
-          onClick={() => withScrollLock(() => setExpanded(prev => !prev))}
+          onClick={() => withScrollLock(() => setExpanded(!expanded), !expanded)}
           className="mt-1 text-[length:var(--fs-sm)] text-text-400 hover:text-text-200 transition-colors"
           aria-expanded={expanded}
         >
@@ -636,7 +636,7 @@ const UserMessageView = memo(function UserMessageView({
             <button
               type="button"
               ref={systemContextHeaderRef}
-              onClick={() => withSystemContextScrollLock(() => setShowSystemContext(!showSystemContext))}
+              onClick={() => withSystemContextScrollLock(() => setShowSystemContext(!showSystemContext), !showSystemContext)}
               className="flex items-center gap-1 text-[length:var(--fs-sm)] text-text-400 hover:text-text-300 transition-colors py-1 px-2 rounded hover:bg-bg-200"
             >
               <span>
@@ -1103,7 +1103,7 @@ const ToolGroup = memo(function ToolGroup({
           <button
             type="button"
             ref={stepsHeaderRef}
-            onClick={() => withStepsScrollLock(() => setExpanded(!expanded))}
+            onClick={() => withStepsScrollLock(() => setExpanded(!expanded), !expanded)}
             className={`flex w-full items-baseline rounded-md ${MSG_SPACING.header} text-left hover:bg-bg-200/30 transition-colors`}
           >
             <span className="text-[length:var(--fs-sm)] leading-5">
@@ -1135,7 +1135,7 @@ const ToolGroup = memo(function ToolGroup({
           <button
             type="button"
             ref={stepsHeaderRef}
-            onClick={() => withStepsScrollLock(() => setExpanded(!expanded))}
+            onClick={() => withStepsScrollLock(() => setExpanded(!expanded), !expanded)}
             className={`flex items-center gap-1.5 ${MSG_SPACING.header} text-text-400 text-[length:var(--fs-base)] hover:text-text-200 hover:bg-bg-200/30 rounded-md transition-colors`}
           >
             <span className="inline-flex w-[14px] items-center justify-center shrink-0">
diff --git a/src/features/message/parts/MessageErrorView.tsx b/src/features/message/parts/MessageErrorView.tsx
index 578aed20..efeb1f99 100644
--- a/src/features/message/parts/MessageErrorView.tsx
+++ b/src/features/message/parts/MessageErrorView.tsx
@@ -53,7 +53,7 @@ export const MessageErrorView = memo(function MessageErrorView({ error, stateKey
       <div
         ref={headerRef}
         className={`flex items-center gap-2 ${hasDetails ? 'cursor-pointer' : ''}`}
-        onClick={() => hasDetails && withScrollLock(() => setExpanded(!expanded))}
+        onClick={() => hasDetails && withScrollLock(() => setExpanded(!expanded), !expanded)}
       >
         <AlertCircleIcon className={`w-4 h-4 ${colorClass} flex-shrink-0`} />
         <span className={`text-[length:var(--fs-base)] ${colorClass} flex-1 min-w-0 truncate`}>{title}</span>
diff --git a/src/features/message/parts/ReasoningPartView.tsx b/src/features/message/parts/ReasoningPartView.tsx
index 39b79aae..2416d388 100644
--- a/src/features/message/parts/ReasoningPartView.tsx
+++ b/src/features/message/parts/ReasoningPartView.tsx
@@ -31,11 +31,12 @@ export const ReasoningPartView = memo(function ReasoningPartView({ part, isStrea
   const shouldRenderBody = useMessageExpandRender(expanded)
   const { rootRef, headerRef, withScrollLock } = useDisclosureScrollLock()
   const scrollAreaRef = useRef<HTMLDivElement>(null)
+  const isAtBottomRef = useRef(true)
   const summaryContainerRef = useRef<HTMLDivElement>(null)
   const summaryMeasureRef = useRef<HTMLSpanElement>(null)
   const [summaryOverflow, setSummaryOverflow] = useState(false)
   const toggleExpanded = useCallback(() => {
-    withScrollLock(() => setExpanded(!expanded))
+    withScrollLock(() => setExpanded(!expanded), !expanded)
   }, [expanded, setExpanded, withScrollLock])
 
   const collapsedPreview = useMemo(() => (displayText || '').replace(/\s+/g, ' ').trim(), [displayText])
@@ -83,10 +84,17 @@ export const ReasoningPartView = memo(function ReasoningPartView({ part, isStrea
     }
   }, [hasContent, isPartStreaming, setExpanded])
 
+  const handleCapsuleScroll = useCallback(() => {
+    const el = scrollAreaRef.current
+    if (!el) return
+    isAtBottomRef.current = el.scrollHeight - el.scrollTop - el.clientHeight < 60
+  }, [])
+
   useEffect(() => {
     if (reasoningDisplayMode !== 'capsule') return
-    if (isPartStreaming && expanded && scrollAreaRef.current) {
-      scrollAreaRef.current.scrollTop = scrollAreaRef.current.scrollHeight
+    const el = scrollAreaRef.current
+    if (isPartStreaming && expanded && isAtBottomRef.current && el) {
+      el.scrollTop = el.scrollHeight
     }
   }, [displayText, isPartStreaming, expanded, reasoningDisplayMode])
 
@@ -290,7 +298,12 @@ export const ReasoningPartView = memo(function ReasoningPartView({ part, isStrea
 
       <MessageExpandPanel open={expanded} clip>
         {shouldRenderBody && (
-          <ScrollArea ref={scrollAreaRef} maxHeight={192} className="border-t border-border-300/20 bg-bg-200/30">
+          <ScrollArea
+            ref={scrollAreaRef}
+            maxHeight={192}
+            onScroll={handleCapsuleScroll}
+            className="border-t border-border-300/20 bg-bg-200/30"
+          >
             <div className="px-2 py-2 text-text-300 text-[length:var(--fs-sm)] font-mono whitespace-pre-wrap break-words overflow-x-hidden">
               {displayText}
             </div>
diff --git a/src/features/message/parts/SubtaskPartView.tsx b/src/features/message/parts/SubtaskPartView.tsx
index e7190910..3358c161 100644
--- a/src/features/message/parts/SubtaskPartView.tsx
+++ b/src/features/message/parts/SubtaskPartView.tsx
@@ -51,7 +51,7 @@ export const SubtaskPartView = memo(function SubtaskPartView({ part }: SubtaskPa
       <div
         ref={headerRef}
         className="flex items-center gap-3 px-4 py-3 cursor-pointer hover:bg-bg-200/30 transition-colors"
-        onClick={() => withScrollLock(() => setExpanded(!expanded))}
+        onClick={() => withScrollLock(() => setExpanded(!expanded), !expanded)}
       >
         {/* Status indicator */}
         <div
diff --git a/src/features/message/parts/SystemPartViews.tsx b/src/features/message/parts/SystemPartViews.tsx
index 9dc32f38..d469a618 100644
--- a/src/features/message/parts/SystemPartViews.tsx
+++ b/src/features/message/parts/SystemPartViews.tsx
@@ -29,7 +29,7 @@ export const RetryPartView = memo(function RetryPartView({ part }: RetryPartView
       <button
         type="button"
         ref={headerRef}
-        onClick={() => withScrollLock(() => setExpanded(!expanded))}
+        onClick={() => withScrollLock(() => setExpanded(!expanded), !expanded)}
         aria-expanded={expanded}
         className="flex w-full items-center gap-2 bg-transparent border-none p-0 text-left"
       >
@@ -106,7 +106,7 @@ export const PatchPartView = memo(function PatchPartView({ part }: PatchPartView
       <button
         type="button"
         ref={headerRef}
-        onClick={() => withScrollLock(() => setExpanded(!expanded))}
+        onClick={() => withScrollLock(() => setExpanded(!expanded), !expanded)}
         aria-expanded={expanded}
         className="flex h-8 w-full items-center gap-2 px-3 text-left bg-transparent border-none hover:bg-bg-200/30 transition-colors"
       >
diff --git a/src/features/message/parts/ToolPartView.tsx b/src/features/message/parts/ToolPartView.tsx
index 2a62a559..9bdccbeb 100644
--- a/src/features/message/parts/ToolPartView.tsx
+++ b/src/features/message/parts/ToolPartView.tsx
@@ -135,7 +135,7 @@ export const ToolPartView = memo(function ToolPartView({
   // 展开即挂 body：默认展开的工具 header/body 同帧，不再先 header 后 body
   const shouldRenderBody = useMessageExpandRender(keepMounted)
   const toggleExpanded = useCallback(() => {
-    withScrollLock(() => setExpanded(!expanded))
+    withScrollLock(() => setExpanded(!expanded), !expanded)
   }, [expanded, setExpanded, withScrollLock])
 
   useEffect(() => {
diff --git a/src/features/message/tools/renderers/TaskRenderer.tsx b/src/features/message/tools/renderers/TaskRenderer.tsx
index a4a0d4cf..260ee025 100644
--- a/src/features/message/tools/renderers/TaskRenderer.tsx
+++ b/src/features/message/tools/renderers/TaskRenderer.tsx
@@ -113,7 +113,7 @@ export const TaskRenderer = memo(function TaskRenderer({ part, onFullscreenChang
           status={state.status}
           expanded={expanded}
           headerRef={headerRef}
-          onToggle={() => withScrollLock(() => setExpanded(!expanded))}
+          onToggle={() => withScrollLock(() => setExpanded(!expanded), !expanded)}
           sessionId={targetSessionId}
           onStop={isRunning ? handleStop : undefined}
         />
diff --git a/src/features/message/tools/renderers/TodoRenderer.tsx b/src/features/message/tools/renderers/TodoRenderer.tsx
index eb45fbc5..4fa6944e 100644
--- a/src/features/message/tools/renderers/TodoRenderer.tsx
+++ b/src/features/message/tools/renderers/TodoRenderer.tsx
@@ -49,7 +49,7 @@ function TodoList({ todos, stateKey }: { todos: TodoItem[]; stateKey: string })
       <div
         ref={headerRef}
         className="flex items-center justify-between px-3 h-8 bg-bg-200/50 hover:bg-bg-200 cursor-pointer select-none transition-colors"
-        onClick={() => withScrollLock(() => setCollapsed(!collapsed))}
+        onClick={() => withScrollLock(() => setCollapsed(!collapsed), collapsed)}
       >
         <div className="flex items-center gap-2">
           <span className={chevronClass(!collapsed, 'md', 'text-text-400')}>
diff --git a/src/features/settings/components/ServersSettings.test.tsx b/src/features/settings/components/ServersSettings.test.tsx
index 1b9df89f..03dd1b0a 100644
--- a/src/features/settings/components/ServersSettings.test.tsx
+++ b/src/features/settings/components/ServersSettings.test.tsx
@@ -2,10 +2,11 @@ import { fireEvent, render, screen, waitFor } from '@testing-library/react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { ServersSettings } from './ServersSettings'
 
-const { useServerStoreMock, navigateHomeMock, clearSessionMock } = vi.hoisted(() => ({
+const { useServerStoreMock, navigateHomeMock, clearSessionMock, isTauriMock } = vi.hoisted(() => ({
   useServerStoreMock: vi.fn(),
   navigateHomeMock: vi.fn(),
   clearSessionMock: vi.fn(),
+  isTauriMock: vi.fn(() => false),
 }))
 
 vi.mock('react-i18next', () => ({
@@ -15,6 +16,10 @@ vi.mock('react-i18next', () => ({
   }),
 }))
 
+vi.mock('../../../utils/tauri', () => ({
+  isTauri: isTauriMock,
+}))
+
 vi.mock('../../../hooks', () => ({
   useServerStore: useServerStoreMock,
   useRouter: () => ({ navigateHome: navigateHomeMock, sessionId: 'session-1' }),
@@ -36,6 +41,7 @@ describe('ServersSettings', () => {
     setActiveServerMock.mockReset()
     navigateHomeMock.mockReset()
     clearSessionMock.mockReset()
+    isTauriMock.mockReturnValue(false)
     useServerStoreMock.mockReturnValue({
       servers: [localServer, remoteServer],
       activeServer: localServer,
@@ -63,4 +69,18 @@ describe('ServersSettings', () => {
     expect(navigateHomeMock).toHaveBeenCalled()
     expect(clearSessionMock).toHaveBeenCalledWith('session-1')
   })
+
+  it('shows a delete button on the default server when other servers exist', () => {
+    render(<ServersSettings />)
+
+    expect(screen.getAllByRole('button', { name: 'common:remove' })).toHaveLength(2)
+  })
+
+  it('hides the delete button on the default server on Tauri desktop', () => {
+    isTauriMock.mockReturnValue(true)
+
+    render(<ServersSettings />)
+
+    expect(screen.getAllByRole('button', { name: 'common:remove' })).toHaveLength(1)
+  })
 })
diff --git a/src/features/settings/components/ServersSettings.tsx b/src/features/settings/components/ServersSettings.tsx
index a4aeded1..b22a4830 100644
--- a/src/features/settings/components/ServersSettings.tsx
+++ b/src/features/settings/components/ServersSettings.tsx
@@ -15,6 +15,7 @@ import {
 } from '../../../components/Icons'
 import { useServerStore, useRouter } from '../../../hooks'
 import { messageStore } from '../../../store'
+import { isTauri } from '../../../utils/tauri'
 import { useMultiServerStore, multiServerStore } from '../../../store/multiServerStore'
 import { settingsFieldClass, SettingsSection, SettingRow, Toggle } from './SettingsUI'
 import type { ServerConfig, ServerHealth } from '../../../store/serverStore'
@@ -41,6 +42,7 @@ function ServerItem({
   server,
   health,
   isActive,
+  canDeleteDefault,
   subscribed,
   multiServerEnabled,
   onSelect,
@@ -52,6 +54,7 @@ function ServerItem({
   server: ServerConfig
   health: ServerHealth | null
   isActive: boolean
+  canDeleteDefault: boolean
   subscribed: boolean
   multiServerEnabled: boolean
   onSelect: () => void
@@ -172,32 +175,32 @@ function ServerItem({
             {statusIcon()}
           </button>
           {!server.isDefault && (
-            <>
-              <button
-                type="button"
-                className="p-1.5 rounded-md text-text-400 hover:text-accent-main-100 hover:bg-accent-main-100/10 transition-colors"
-                onClick={e => {
-                  e.stopPropagation()
-                  setEditing(true)
-                }}
-                title={t('servers.editServer')}
-                aria-label={t('servers.editServer')}
-              >
-                <PencilIcon size={13} />
-              </button>
-              <button
-                type="button"
-                className="p-1.5 rounded-md text-text-400 hover:text-danger-100 hover:bg-danger-100/10 transition-colors"
-                onClick={e => {
-                  e.stopPropagation()
-                  setConfirmDelete(true)
-                }}
-                title={t('common:remove')}
-                aria-label={t('common:remove')}
-              >
-                <TrashIcon size={13} />
-              </button>
-            </>
+            <button
+              type="button"
+              className="p-1.5 rounded-md text-text-400 hover:text-accent-main-100 hover:bg-accent-main-100/10 transition-colors"
+              onClick={e => {
+                e.stopPropagation()
+                setEditing(true)
+              }}
+              title={t('servers.editServer')}
+              aria-label={t('servers.editServer')}
+            >
+              <PencilIcon size={13} />
+            </button>
+          )}
+          {(!server.isDefault || canDeleteDefault) && (
+            <button
+              type="button"
+              className="p-1.5 rounded-md text-text-400 hover:text-danger-100 hover:bg-danger-100/10 transition-colors"
+              onClick={e => {
+                e.stopPropagation()
+                setConfirmDelete(true)
+              }}
+              title={t('common:remove')}
+              aria-label={t('common:remove')}
+            >
+              <TrashIcon size={13} />
+            </button>
           )}
         </div>
       </div>
@@ -546,6 +549,7 @@ export function ServersSettings() {
     getHealth,
   } = useServerStore()
   const { navigateHome, sessionId: routeSessionId } = useRouter()
+  const canDeleteDefault = !isTauri() && servers.length > 1
   const orderedServers = useMemo(() => {
     if (!activeServer) return servers
     const active = servers.find(s => s.id === activeServer.id)
@@ -634,6 +638,7 @@ export function ServersSettings() {
               server={s}
               health={getHealth(s.id)}
               isActive={activeServer?.id === s.id}
+              canDeleteDefault={canDeleteDefault}
               subscribed={multiServerStore.isSubscribed(s.id)}
               multiServerEnabled={multiServerConfig.enabled}
               onSelect={() => handleSelectServer(s.id)}
diff --git a/src/features/text-selection-popup/TextSelectionPopup.test.tsx b/src/features/text-selection-popup/TextSelectionPopup.test.tsx
new file mode 100644
index 00000000..023b6f33
--- /dev/null
+++ b/src/features/text-selection-popup/TextSelectionPopup.test.tsx
@@ -0,0 +1,226 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { act, fireEvent, render } from '@testing-library/react'
+import { TextSelectionPopup } from './TextSelectionPopup'
+
+vi.mock('../../utils/clipboard', () => ({
+  copyTextToClipboard: vi.fn(async () => undefined),
+}))
+
+vi.mock('../../utils/errorHandling', () => ({
+  clipboardErrorHandler: vi.fn(),
+}))
+
+import { copyTextToClipboard } from '../../utils/clipboard'
+
+const COPY_MOCK = copyTextToClipboard as unknown as ReturnType<typeof vi.fn>
+
+let container: HTMLDivElement
+
+beforeEach(() => {
+  container = document.createElement('div')
+  document.body.appendChild(container)
+  COPY_MOCK.mockClear()
+})
+
+afterEach(() => {
+  document.body.removeChild(container)
+})
+
+function setupSelectionPane(selectionText: string) {
+  container.innerHTML = `
+    <div data-pane-id="pane-test" data-chat-pane-root="true">
+      <div data-test-target><span id="anchor-text">${selectionText}</span></div>
+      <textarea data-testid="textarea" placeholder="..."></textarea>
+    </div>
+  `
+  const anchor = container.querySelector('#anchor-text')!.firstChild!
+  const range = document.createRange()
+  range.setStart(anchor, 0)
+  range.setEnd(anchor, anchor.textContent!.length)
+
+  // jsdom doesn't compute layout, so getBoundingClientRect returns 0s. The
+  // popup relies on a real rect to position itself, so override it for the
+  // synthetic range. In a real browser this stays untouched.
+  range.getBoundingClientRect = () =>
+    ({
+      top: 100,
+      left: 200,
+      right: 300,
+      bottom: 120,
+      width: 100,
+      height: 20,
+      x: 200,
+      y: 100,
+      toJSON: () => ({}),
+    }) as DOMRect
+
+  const selection = window.getSelection()
+  selection?.removeAllRanges()
+  selection?.addRange(range)
+  return {
+    textarea: container.querySelector<HTMLTextAreaElement>('[data-testid="textarea"]')!,
+    selection,
+    range,
+  }
+}
+
+function releasePointer(clientX = 250, clientY = 110) {
+  fireEvent.mouseUp(document.body, { clientX, clientY })
+}
+
+async function flush() {
+  await act(async () => {
+    await new Promise(r => setTimeout(r, 50))
+  })
+}
+
+describe('TextSelectionPopup', () => {
+  it('does NOT appear during a selection drag — only after mouseup commits', async () => {
+    setupSelectionPane('hello there')
+
+    render(<TextSelectionPopup />)
+    await flush()
+
+    // selectionchange ran mid-test setup; no mouseup yet → popup must be hidden.
+    expect(document.body.querySelector('[data-text-selection-popup]')).toBeNull()
+
+    await act(async () => {
+      releasePointer(280, 140)
+    })
+
+    expect(document.body.querySelector('[data-text-selection-popup]')).not.toBeNull()
+  })
+
+  it('renders Quote and Copy buttons after mouseup over a valid selection', async () => {
+    setupSelectionPane('hello there')
+    render(<TextSelectionPopup />)
+    await flush()
+    await act(async () => {
+      releasePointer()
+    })
+
+    const popup = document.body.querySelector('[data-text-selection-popup]')
+    expect(popup).not.toBeNull()
+    const quoteButton = popup?.querySelector('button[aria-label="Quote"]')
+    const copyButton = popup?.querySelector('button[aria-label="Copy"]')
+    expect(quoteButton).not.toBeNull()
+    expect(copyButton).not.toBeNull()
+  })
+
+  it('does not appear for selections outside any data-pane-id container', async () => {
+    container.innerHTML = `
+      <div>plain outside pane
+        <span id="anchor-text">${'outside'}</span>
+      </div>
+    `
+    const anchor = container.querySelector('#anchor-text')!.firstChild!
+    const range = document.createRange()
+    range.setStart(anchor, 0)
+    range.setEnd(anchor, anchor.textContent!.length)
+    const selection = window.getSelection()
+    selection?.removeAllRanges()
+    selection?.addRange(range)
+
+    render(<TextSelectionPopup />)
+    await flush()
+    await act(async () => {
+      releasePointer()
+    })
+
+    expect(document.body.querySelector('[data-text-selection-popup]')).toBeNull()
+  })
+
+  it('Quote writes a markdown block-quote into the pane textarea and focuses it', async () => {
+    const { textarea } = setupSelectionPane('how does this work?')
+
+    render(<TextSelectionPopup />)
+    await flush()
+    await act(async () => {
+      releasePointer()
+    })
+
+    const quoteButton = document.body.querySelector('button[aria-label="Quote"]') as HTMLButtonElement
+    expect(quoteButton).not.toBeNull()
+
+    act(() => {
+      fireEvent.click(quoteButton)
+    })
+
+    expect(textarea.value.startsWith('> how does this work?')).toBe(true)
+    expect(COPY_MOCK).not.toHaveBeenCalled()
+  })
+
+  it('Copy writes the selection to the clipboard without touching the textarea', async () => {
+    const { textarea } = setupSelectionPane('plain copy text')
+    render(<TextSelectionPopup />)
+    await flush()
+    await act(async () => {
+      releasePointer()
+    })
+
+    const copyButton = document.body.querySelector('button[aria-label="Copy"]') as HTMLButtonElement
+    expect(copyButton).not.toBeNull()
+
+    await act(async () => {
+      fireEvent.click(copyButton)
+    })
+
+    expect(COPY_MOCK).toHaveBeenCalledWith('plain copy text')
+    expect(textarea.value).toBe('')
+  })
+
+  it('hides on Escape after a mouseup-committed selection', async () => {
+    setupSelectionPane('escape me')
+    render(<TextSelectionPopup />)
+    await flush()
+    await act(async () => {
+      releasePointer()
+    })
+    expect(document.body.querySelector('[data-text-selection-popup]')).not.toBeNull()
+
+    await act(async () => {
+      fireEvent.keyDown(document, { key: 'Escape' })
+    })
+
+    expect(document.body.querySelector('[data-text-selection-popup]')).toBeNull()
+  })
+
+  it('hides on scroll after a mouseup-committed selection', async () => {
+    setupSelectionPane('scroll away')
+    render(<TextSelectionPopup />)
+    await flush()
+    await act(async () => {
+      releasePointer()
+    })
+    expect(document.body.querySelector('[data-text-selection-popup]')).not.toBeNull()
+
+    await act(async () => {
+      window.dispatchEvent(new Event('scroll'))
+    })
+    expect(document.body.querySelector('[data-text-selection-popup]')).toBeNull()
+  })
+
+  it('places the popup near the pointer release point, not the selection start', async () => {
+    setupSelectionPane('anchor for position math')
+    render(<TextSelectionPopup />)
+    await flush()
+    await act(async () => {
+      // Release at coordinates far from the synthetic selection rect
+      // (rect is at top=100/left=200 — pick something the rect-aware path
+      // would never choose).
+      releasePointer(900, 600)
+    })
+
+    const popup = document.body.querySelector<HTMLDivElement>('[data-text-selection-popup]')
+    expect(popup).not.toBeNull()
+    // Read the inline style values applied by computePopupAtPointer.
+    expect(popup!.style.position).toBe('fixed')
+    expect(popup!.style.top).toMatch(/^\d+(\.\d+)?px$/)
+    expect(popup!.style.left).toMatch(/^\d+(\.\d+)?px$/)
+    const leftPx = Number.parseFloat(popup!.style.left)
+    // Should not coincide with the synthetic rect's left (200).
+    expect(leftPx).not.toBe(200)
+    // 900 - popupWidth estimate (200) places the cursor's left edge of the popup.
+    expect(leftPx).toBeGreaterThan(500)
+  })
+})
diff --git a/src/features/text-selection-popup/TextSelectionPopup.tsx b/src/features/text-selection-popup/TextSelectionPopup.tsx
new file mode 100644
index 00000000..9f10f3f7
--- /dev/null
+++ b/src/features/text-selection-popup/TextSelectionPopup.tsx
@@ -0,0 +1,272 @@
+/**
+ * TextSelectionPopup — global floating popup that surfaces "Quote" and "Copy"
+ * actions when the user highlights text inside a chat pane.
+ *
+ *  - selectionchange tracks a *pending* selection into a ref. The popup
+ *    never appears during a drag — it only commits on mouseup / touchend /
+ *    keyboard Shift+arrow release so the toolbar never flickers mid-drag.
+ *  - Positions near the pointer release point (mouse / touch), or near the
+ *    selection's bounding rect for keyboard selections.
+ *  - Renders into document.body via createPortal so its fixed position is
+ *    unaffected by ancestor transform / overflow.
+ *  - Auto-hides on: outside pointerdown, scroll, resize, Esc.
+ */
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react'
+import { createPortal } from 'react-dom'
+import { useTranslation } from 'react-i18next'
+import { CheckIcon, CopyIcon, QuoteIcon } from '../../components/Icons'
+import { copyTextToClipboard } from '../../utils/clipboard'
+import { clipboardErrorHandler } from '../../utils/errorHandling'
+import {
+  buildQuotePatch,
+  computePopupPosition,
+  findTargetTextarea,
+  shouldShowPopupForSelection,
+} from './popupUtils'
+
+const POPUP_WIDTH_ESTIMATE = 180
+const POPUP_HEIGHT_ESTIMATE = 30
+const COPIED_FEEDBACK_MS = 1500
+
+type PendingSelection = {
+  text: string
+  rect: DOMRect
+  textarea: HTMLTextAreaElement
+}
+
+type PlacedPopup = PendingSelection & {
+  /** Pointer release point in viewport coordinates; null for keyboard selection. */
+  pointer: { x: number; y: number } | null
+}
+
+export function TextSelectionPopup() {
+  const { t } = useTranslation('chat')
+  const [placed, setPlaced] = useState<PlacedPopup | null>(null)
+  const [copied, setCopied] = useState(false)
+  const [popupWidth, setPopupWidth] = useState(POPUP_WIDTH_ESTIMATE)
+  const [popupHeight, setPopupHeight] = useState(POPUP_HEIGHT_ESTIMATE)
+  const popupRef = useRef<HTMLDivElement | null>(null)
+  const copiedTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+  /**
+   * Latest valid selection, kept current via selectionchange. The popup
+   * never renders from this — only from mouseup/touchend/keyup commits.
+   */
+  const pendingRef = useRef<PendingSelection | null>(null)
+
+  // ── selectionchange: maintain pending ref only, never show popup ──
+  useEffect(() => {
+    if (typeof document === 'undefined') return
+    const handler = () => {
+      const selection = window.getSelection()
+      if (!selection || !shouldShowPopupForSelection(selection)) {
+        pendingRef.current = null
+        return
+      }
+      const textarea = findTargetTextarea(selection)
+      const range = selection.getRangeAt(0)
+      const rect = range.getBoundingClientRect()
+      // Zero-by-zero rect = browser hasn't laid out the selection (display:none
+      // content, or the jsdom test env). The toolbar needs real geometry.
+      if (!textarea || (rect.width === 0 && rect.height === 0)) {
+        pendingRef.current = null
+        return
+      }
+      pendingRef.current = { text: selection.toString(), rect, textarea }
+    }
+    document.addEventListener('selectionchange', handler)
+    return () => document.removeEventListener('selectionchange', handler)
+  }, [])
+
+  // ── pointerdown outside popup: dismiss + clear pending ──
+  useEffect(() => {
+    if (typeof document === 'undefined') return
+    const handler = (e: PointerEvent) => {
+      const popup = popupRef.current
+      if (popup && e.target instanceof Node && popup.contains(e.target)) return
+      setPlaced(null)
+      pendingRef.current = null
+    }
+    document.addEventListener('pointerdown', handler)
+    return () => document.removeEventListener('pointerdown', handler)
+  }, [])
+
+  // ── mouseup / touchend: commit pending + position at pointer ──
+  useEffect(() => {
+    if (typeof document === 'undefined') return
+    const commit = (pointer: { x: number; y: number } | null) => {
+      const pending = pendingRef.current
+      if (!pending) return
+      setPlaced({ ...pending, pointer })
+    }
+    const onMouseUp = (e: MouseEvent) => commit({ x: e.clientX, y: e.clientY })
+    const onTouchEnd = (e: TouchEvent) => {
+      const t = e.changedTouches[0]
+      if (t) commit({ x: t.clientX, y: t.clientY })
+    }
+    document.addEventListener('mouseup', onMouseUp)
+    document.addEventListener('touchend', onTouchEnd)
+    return () => {
+      document.removeEventListener('mouseup', onMouseUp)
+      document.removeEventListener('touchend', onTouchEnd)
+    }
+  }, [])
+
+  // ── keyboard Shift+arrow: commit pending, no pointer coords ──
+  useEffect(() => {
+    if (typeof document === 'undefined') return
+    const SELECTION_KEYS = new Set([
+      'ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown',
+      'Home', 'End', 'PageUp', 'PageDown',
+    ])
+    const handler = (e: KeyboardEvent) => {
+      if (!e.shiftKey || !SELECTION_KEYS.has(e.key)) return
+      const pending = pendingRef.current
+      if (!pending) return
+      setPlaced({ ...pending, pointer: null })
+    }
+    document.addEventListener('keyup', handler)
+    return () => document.removeEventListener('keyup', handler)
+  }, [])
+
+  // ── dismiss on scroll / resize / Escape (only while popup is open) ──
+  useEffect(() => {
+    if (!placed) return
+    const hide = () => setPlaced(null)
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        setPlaced(null)
+        window.getSelection()?.removeAllRanges()
+      }
+    }
+    window.addEventListener('scroll', hide, true)
+    window.addEventListener('resize', hide)
+    document.addEventListener('keydown', onKey)
+    return () => {
+      window.removeEventListener('scroll', hide, true)
+      window.removeEventListener('resize', hide)
+      document.removeEventListener('keydown', onKey)
+    }
+  }, [placed])
+
+  // ── measure actual popup size for accurate positioning ──
+  useLayoutEffect(() => {
+    if (!placed) return
+    const popup = popupRef.current
+    if (!popup) return
+    const ro = new ResizeObserver(entries => {
+      for (const entry of entries) {
+        const { width, height } = entry.contentRect
+        if (width > 0) setPopupWidth(width)
+        if (height > 0) setPopupHeight(height)
+      }
+    })
+    ro.observe(popup)
+    return () => ro.disconnect()
+  }, [placed])
+
+  // ── cleanup copied feedback timer on unmount ──
+  useEffect(() => {
+    return () => {
+      if (copiedTimerRef.current !== null) clearTimeout(copiedTimerRef.current)
+    }
+  }, [])
+
+  const handleCopy = useCallback(async () => {
+    if (!placed) return
+    try {
+      await copyTextToClipboard(placed.text)
+      setCopied(true)
+      if (copiedTimerRef.current !== null) clearTimeout(copiedTimerRef.current)
+      copiedTimerRef.current = setTimeout(() => {
+        setCopied(false)
+        copiedTimerRef.current = null
+      }, COPIED_FEEDBACK_MS)
+    } catch (err) {
+      clipboardErrorHandler('copy selection', err)
+    }
+  }, [placed])
+
+  const handleQuote = useCallback(() => {
+    if (!placed) return
+    const textarea = placed.textarea
+    const existing = textarea.value
+    const cursor = typeof textarea.selectionStart === 'number' ? textarea.selectionStart : existing.length
+    const { newText, newCursor } = buildQuotePatch(existing, cursor, placed.text)
+
+    // Drive the textarea via its native value setter so React sees a real
+    // input event and syncs the controlled state on the next render.
+    const valueSetter = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(textarea), 'value')?.set
+    if (valueSetter) valueSetter.call(textarea, newText)
+    textarea.dispatchEvent(new Event('input', { bubbles: true }))
+
+    requestAnimationFrame(() => {
+      textarea.focus()
+      textarea.setSelectionRange(newCursor, newCursor)
+    })
+
+    window.getSelection()?.removeAllRanges()
+    setPlaced(null)
+  }, [placed])
+
+  // Position: use pointer coords when available (mouse/touch), otherwise
+  // the selection's bounding rect (keyboard).
+  const position = useMemo(() => {
+    if (!placed) return null
+    const anchor = placed.pointer
+      ? { top: placed.pointer.y, bottom: placed.pointer.y, left: placed.pointer.x }
+      : { top: placed.rect.top, bottom: placed.rect.bottom, left: placed.rect.left }
+    const vw = typeof window !== 'undefined' ? window.innerWidth : 1024
+    return computePopupPosition(anchor, popupHeight, popupWidth, vw)
+  }, [placed, popupHeight, popupWidth])
+
+  if (!placed || !position) return null
+
+  return createPortal(
+    <div
+      ref={popupRef}
+      role="toolbar"
+      aria-label={t('textSelectionPopup.label')}
+      data-text-selection-popup="true"
+      style={{
+        position: 'fixed',
+        top: `${position.top}px`,
+        left: `${position.left}px`,
+        zIndex: 70,
+      }}
+      onMouseDown={e => e.preventDefault()}
+    >
+      <div className="glass rounded-md shadow-lg border border-border-200/60 px-1 py-0.5 flex items-center gap-0.5">
+        <button
+          type="button"
+          onClick={handleQuote}
+          className="flex items-center gap-1 rounded px-1.5 py-0.5 text-[length:var(--fs-xs)] text-text-200 hover:bg-bg-200 transition-colors"
+          aria-label={t('textSelectionPopup.quote')}
+        >
+          <QuoteIcon size={12} aria-hidden="true" />
+          <span>{t('textSelectionPopup.quote')}</span>
+        </button>
+        <div className="w-px h-4 bg-border-200/50" aria-hidden="true" />
+        <button
+          type="button"
+          onClick={handleCopy}
+          className="flex items-center gap-1 rounded px-1.5 py-0.5 text-[length:var(--fs-xs)] text-text-200 hover:bg-bg-200 transition-colors"
+          aria-label={copied ? t('textSelectionPopup.copied') : t('textSelectionPopup.copy')}
+          aria-live="polite"
+        >
+          {copied ? (
+            <>
+              <CheckIcon size={12} aria-hidden="true" className="text-success-100" />
+              <span className="text-success-100">{t('textSelectionPopup.copied')}</span>
+            </>
+          ) : (
+            <>
+              <CopyIcon size={12} aria-hidden="true" />
+              <span>{t('textSelectionPopup.copy')}</span>
+            </>
+          )}
+        </button>
+      </div>
+    </div>,
+    document.body,
+  )
+}
diff --git a/src/features/text-selection-popup/index.ts b/src/features/text-selection-popup/index.ts
new file mode 100644
index 00000000..a3b13cec
--- /dev/null
+++ b/src/features/text-selection-popup/index.ts
@@ -0,0 +1 @@
+export { TextSelectionPopup } from './TextSelectionPopup'
diff --git a/src/features/text-selection-popup/popupUtils.test.ts b/src/features/text-selection-popup/popupUtils.test.ts
new file mode 100644
index 00000000..b834f857
--- /dev/null
+++ b/src/features/text-selection-popup/popupUtils.test.ts
@@ -0,0 +1,251 @@
+import { afterEach, beforeEach, describe, expect, it } from 'vitest'
+import {
+  buildQuotePatch,
+  computePopupPosition,
+  findTargetTextarea,
+  formatQuote,
+  shouldShowPopupForSelection,
+} from './popupUtils'
+
+let container: HTMLDivElement
+
+beforeEach(() => {
+  container = document.createElement('div')
+  document.body.appendChild(container)
+})
+
+afterEach(() => {
+  document.body.removeChild(container)
+})
+
+/**
+ * Build a minimal fake `Selection` for `findTargetTextarea` / `shouldShow*`.
+ * jsdom doesn't implement window.getSelection in a useful way, so we unit-test
+ * the helpers with stub objects that quack like a Selection.
+ */
+function makeFakeSelection(opts: {
+  anchorElement: Element | null
+  text?: string
+  isCollapsed?: boolean
+  rangeCount?: number
+}): Partial<Selection> {
+  const rangeCount = opts.rangeCount ?? 1
+  return {
+    anchorNode: opts.anchorElement,
+    isCollapsed: opts.isCollapsed ?? false,
+    rangeCount,
+    toString: () => opts.text ?? '',
+    getRangeAt: () => ({}) as Range,
+  }
+}
+
+describe('formatQuote', () => {
+  it('prefixes a single line with "> "', () => {
+    expect(formatQuote('hello world')).toBe('> hello world')
+  })
+
+  it('prefixes each line of a multi-line selection', () => {
+    expect(formatQuote('line one\nline two\nline three')).toBe('> line one\n> line two\n> line three')
+  })
+
+  it('emits a lone ">" for blank lines so Markdown stays a valid blockquote', () => {
+    expect(formatQuote('first\n\nthird')).toBe('> first\n>\n> third')
+  })
+
+  it('returns an empty string for empty input', () => {
+    expect(formatQuote('')).toBe('')
+  })
+})
+
+describe('buildQuotePatch', () => {
+  it('quotes into an empty input and leaves the cursor on a fresh line below', () => {
+    const result = buildQuotePatch('', 0, 'first line\nsecond line')
+    expect(result.newText).toBe('> first line\n> second line\n\n')
+    expect(result.newCursor).toBe('> first line\n> second line\n\n'.length)
+  })
+
+  it('wraps the quote with blank lines when appending to text that ends with a single newline', () => {
+    const existing = 'Please look at this:\n'
+    const result = buildQuotePatch(existing, existing.length, 'quoted block')
+    expect(result.newText).toBe('Please look at this:\n\n> quoted block\n\n')
+    expect(result.newCursor).toBe(result.newText.length)
+  })
+
+  it('keeps the existing blank line above and still adds one below when text ends with a blank line', () => {
+    const existing = 'Already has a blank line:\n\n'
+    const result = buildQuotePatch(existing, existing.length, 'quoted block')
+    expect(result.newText).toBe('Already has a blank line:\n\n> quoted block\n\n')
+  })
+
+  it('quotes in the middle of a non-empty input with blank lines on both sides', () => {
+    const existing = 'prefix suffix'
+    const result = buildQuotePatch(existing, 'prefix '.length, 'line one\nline two')
+    expect(result.newText).toBe('prefix \n\n> line one\n> line two\n\nsuffix')
+    expect(result.newCursor).toBe('prefix \n\n> line one\n> line two\n\n'.length)
+  })
+
+  it('wraps the quote with blank lines even when the cursor is clamped to the end', () => {
+    const result = buildQuotePatch('abc', 99, 'quoted')
+    expect(result.newText).toBe('abc\n\n> quoted\n\n')
+    expect(result.newCursor).toBe('abc\n\n> quoted\n\n'.length)
+  })
+
+  it('handles multi-line selections and still leaves a trailing blank line', () => {
+    const result = buildQuotePatch('hi ', 3, 'foo\nbar')
+    expect(result.newText).toBe('hi \n\n> foo\n> bar\n\n')
+    expect(result.newCursor).toBe('hi \n\n> foo\n> bar\n\n'.length)
+  })
+})
+
+describe('findTargetTextarea', () => {
+  it('returns null when selection is null', () => {
+    expect(findTargetTextarea(null)).toBeNull()
+  })
+
+  it('returns null when the selection is not inside any pane', () => {
+    container.innerHTML = '<div>no pane here</div>'
+    const anchor = container.querySelector('div')
+    const sel = makeFakeSelection({ anchorElement: anchor })
+    expect(findTargetTextarea(sel as Selection)).toBeNull()
+  })
+
+  it('returns the textarea inside the closest data-pane-id ancestor', () => {
+    container.innerHTML = `
+      <div data-pane-id="pane-a">
+        <p>inside pane a</p>
+        <textarea></textarea>
+      </div>
+    `
+    const anchor = container.querySelector('p')
+    const sel = makeFakeSelection({ anchorElement: anchor })
+    const textarea = findTargetTextarea(sel as Selection)
+    expect(textarea).toBe(container.querySelector('textarea'))
+  })
+
+  it('walks up to a shared pane ancestor when textarea lives in a sibling subtree', () => {
+    // Real ChatPane DOM: messages and the input live in different subtrees
+    // under the same data-pane-id wrapper. Selection deep inside a message
+    // must still resolve to the input textarea in the same pane.
+    container.innerHTML = `
+      <div data-pane-id="pane-realistic">
+        <section class="messages">
+          <p id="msg">a thought provoking sentence worth quoting</p>
+        </section>
+        <section class="input-area">
+          <div data-pane-id="pane-realistic" data-input-box="true">
+            <textarea></textarea>
+          </div>
+        </section>
+      </div>
+    `
+    const anchor = container.querySelector('#msg')
+    const sel = makeFakeSelection({ anchorElement: anchor })
+    const textarea = findTargetTextarea(sel as Selection)
+    expect(textarea).toBe(container.querySelector('textarea'))
+  })
+})
+
+describe('shouldShowPopupForSelection', () => {
+  it('rejects null selections', () => {
+    expect(shouldShowPopupForSelection(null)).toBe(false)
+  })
+
+  it('rejects collapsed selections', () => {
+    container.innerHTML = `
+      <div data-pane-id="pane-b">
+        <p>just sitting here</p>
+      </div>
+    `
+    const anchor = container.querySelector('p')
+    const sel = makeFakeSelection({ anchorElement: anchor, isCollapsed: true, text: 'something' })
+    expect(shouldShowPopupForSelection(sel as Selection)).toBe(false)
+  })
+
+  it('rejects selections whose text is whitespace only', () => {
+    container.innerHTML = `
+      <div data-pane-id="pane-c">
+        <p>content</p>
+      </div>
+    `
+    const anchor = container.querySelector('p')
+    const sel = makeFakeSelection({ anchorElement: anchor, text: '   ' })
+    expect(shouldShowPopupForSelection(sel as Selection)).toBe(false)
+  })
+
+  it('rejects selections inside an input/textarea', () => {
+    container.innerHTML = `
+      <div data-pane-id="pane-d">
+        <textarea>some user draft</textarea>
+      </div>
+    `
+    const textarea = container.querySelector('textarea')!
+    const sel = makeFakeSelection({ anchorElement: textarea, text: 'user draft' })
+    expect(shouldShowPopupForSelection(sel as Selection)).toBe(false)
+  })
+
+  it('rejects selections inside elements marked with data-no-selection-popup', () => {
+    container.innerHTML = `
+      <div data-pane-id="pane-e">
+        <div data-no-selection-popup><span>opt-out</span></div>
+      </div>
+    `
+    const anchor = container.querySelector('span')
+    const sel = makeFakeSelection({ anchorElement: anchor, text: 'opt-out' })
+    expect(shouldShowPopupForSelection(sel as Selection)).toBe(false)
+  })
+
+  it('accepts ordinary text inside a pane', () => {
+    container.innerHTML = `
+      <div data-pane-id="pane-f">
+        <p>an interesting fact</p>
+      </div>
+    `
+    const anchor = container.querySelector('p')
+    const sel = makeFakeSelection({ anchorElement: anchor, text: 'an interesting fact' })
+    expect(shouldShowPopupForSelection(sel as Selection)).toBe(true)
+  })
+})
+
+describe('computePopupPosition', () => {
+  // The function takes a simple anchor {top, bottom, left} that works for
+  // both pointer-release coords (top==bottom==y) and selection rects.
+  function anchor(top: number, bottom: number, left: number) {
+    return { top, bottom, left }
+  }
+
+  it('places above when there is room', () => {
+    const result = computePopupPosition(anchor(200, 220, 50), 40, 200, 1024, 8, 800)
+    expect(result.placement).toBe('above')
+    expect(result.top).toBe(152) // 200 - 40 - 8
+    expect(result.left).toBe(50)
+  })
+
+  it('places below when above would clip', () => {
+    const result = computePopupPosition(anchor(20, 30, 50), 40, 200, 1024, 8, 800)
+    expect(result.placement).toBe('below')
+    expect(result.top).toBe(38) // 30 + 8
+  })
+
+  it('clamps to the right edge of the viewport', () => {
+    const result = computePopupPosition(anchor(200, 220, 900), 40, 200, 1024, 8, 800)
+    expect(result.left).toBeLessThanOrEqual(1024 - 200 - 8)
+  })
+
+  it('clamps to the left edge of the viewport', () => {
+    const result = computePopupPosition(anchor(200, 220, -100), 40, 200, 1024, 8, 800)
+    expect(result.left).toBe(8)
+  })
+
+  it('falls back to above (clamped) when both directions are tight', () => {
+    const result = computePopupPosition(anchor(2, 4, 0), 40, 200, 1024, 8, 50)
+    expect(result.placement).toBe('above')
+    expect(result.top).toBeGreaterThanOrEqual(8)
+  })
+
+  it('works with a zero-height anchor (pointer release point)', () => {
+    const result = computePopupPosition(anchor(200, 200, 100), 30, 180, 1024, 8, 800)
+    expect(result.placement).toBe('above')
+    expect(result.top).toBe(162) // 200 - 30 - 8
+    expect(result.left).toBe(100)
+  })
+})
diff --git a/src/features/text-selection-popup/popupUtils.ts b/src/features/text-selection-popup/popupUtils.ts
new file mode 100644
index 00000000..42e71ef6
--- /dev/null
+++ b/src/features/text-selection-popup/popupUtils.ts
@@ -0,0 +1,155 @@
+/**
+ * Pure helpers for the text-selection floating popup. Kept dependency-free so
+ * they can be unit-tested without a DOM or React runtime.
+ */
+
+/**
+ * Format a selection as a Markdown blockquote prefix. Each line gets a `> `
+ * (or a single `>` for blank lines), matching the convention used by GitHub,
+ * Slack and other Markdown dialects.
+ */
+export function formatQuote(text: string): string {
+  if (text.length === 0) return ''
+  return text
+    .split('\n')
+    .map(line => (line.length > 0 ? `> ${line}` : '>'))
+    .join('\n')
+}
+
+/**
+ * Count the newlines needed before the quote so it lands on its own blank
+ * line in the rendered Markdown.
+ *   - empty `before`        → 0 (quote at the very start, nothing above it)
+ *   - ends with `\n\n`+     → 0 (blank line already exists)
+ *   - ends with `\n`        → 1 (add one more for a blank line)
+ *   - ends with non-newline → 2 (full blank line)
+ */
+function leadNewlinesFor(before: string): string {
+  if (before.length === 0) return ''
+  if (/\n\s*\n\s*$/.test(before)) return ''
+  if (/\n\s*$/.test(before)) return '\n'
+  return '\n\n'
+}
+
+/**
+ * Newlines needed after the quote so it is always separated from what follows
+ * by a blank line — including when nothing follows, so the user can type a
+ * reply below the blockquote instead of appending to its last line.
+ *   - empty `after`         → 2 (blank line, lands cursor on a fresh line)
+ *   - starts with `\n\n`+   → 0 (blank line already exists)
+ *   - starts with `\n`      → 1 (add one more for a blank line)
+ *   - starts with non-newline → 2 (full blank line)
+ */
+function trailingNewlinesFor(after: string): string {
+  if (after.length === 0) return '\n\n'
+  if (/^\s*\n\s*\n/.test(after)) return ''
+  if (/^\s*\n/.test(after)) return '\n'
+  return '\n\n'
+}
+
+/**
+ * Build a text patch that inserts a quoted version of `selected` into
+ * `existing` at `cursor`, returning the next text + the cursor position just
+ * past the trailing separator (so the user can keep typing a reply below the
+ * blockquote).
+ */
+export function buildQuotePatch(
+  existing: string,
+  cursor: number,
+  selected: string,
+): { newText: string; newCursor: number } {
+  const safeCursor = Math.max(0, Math.min(cursor, existing.length))
+  const before = existing.slice(0, safeCursor)
+  const after = existing.slice(safeCursor)
+  const quoted = formatQuote(selected)
+
+  const lead = leadNewlinesFor(before)
+  const trail = trailingNewlinesFor(after)
+
+  const newText = `${before}${lead}${quoted}${trail}${after}`
+  const newCursor = before.length + lead.length + quoted.length + trail.length
+
+  return { newText, newCursor }
+}
+
+/**
+ * Locate the target `<textarea>` for a Selection. Walks up from the
+ * `selection.anchorNode` until it finds an element with `data-pane-id`, then
+ * returns the textarea inside that element. Returns `null` when the selection
+ * is not inside a chat pane (e.g. inside the sidebar, terminal or a
+ * contenteditable editor).
+ */
+export function findTargetTextarea(selection: Selection | null): HTMLTextAreaElement | null {
+  if (!selection || selection.rangeCount === 0) return null
+  const anchor = selection.anchorNode
+  if (!anchor) return null
+
+  const startElement = anchor.nodeType === Node.ELEMENT_NODE ? (anchor as Element) : anchor.parentElement
+  if (!startElement) return null
+
+  const pane = startElement.closest<HTMLElement>('[data-pane-id]')
+  if (!pane) return null
+
+  return pane.querySelector<HTMLTextAreaElement>('textarea')
+}
+
+/**
+ * Decide whether the current selection is "interesting" enough to surface a
+ * floating popup. Excludes collapsed selections, selections inside form fields
+ * or contenteditable surfaces, and text inside elements explicitly opted out
+ * via `data-no-selection-popup`.
+ */
+export function shouldShowPopupForSelection(selection: Selection | null): boolean {
+  if (!selection || selection.rangeCount === 0) return false
+  if (selection.isCollapsed) return false
+  const text = selection.toString().trim()
+  if (text.length === 0) return false
+
+  const anchor = selection.anchorNode
+  if (!anchor) return false
+  const startElement = anchor.nodeType === Node.ELEMENT_NODE ? (anchor as Element) : anchor.parentElement
+  if (!startElement) return false
+
+  const pane = startElement.closest<HTMLElement>('[data-pane-id]')
+  if (!pane) return false
+
+  if (startElement.closest<HTMLElement>('input, textarea, [contenteditable="true"]')) {
+    return false
+  }
+  if (startElement.closest<HTMLElement>('[data-no-selection-popup]')) {
+    return false
+  }
+
+  return true
+}
+
+/**
+ * Position the popup near a pointer release point (mouse / touch) or a
+ * fallback anchor rect (keyboard selection). Sits above the anchor with a
+ * small gap; flips below when there's no room above. Clamps horizontally to
+ * the viewport.
+ */
+export function computePopupPosition(
+  anchor: { top: number; bottom: number; left: number },
+  popupHeight: number,
+  popupWidth: number,
+  viewportWidth: number,
+  gap = 8,
+  viewportHeight: number = typeof window !== 'undefined' ? window.innerHeight : 800,
+): { top: number; left: number; placement: 'above' | 'below' } {
+  const desiredTop = anchor.top - popupHeight - gap
+  const placement: 'above' | 'below' =
+    desiredTop >= 8
+      ? 'above'
+      : anchor.bottom + gap + popupHeight <= viewportHeight
+        ? 'below'
+        : 'above'
+
+  const top =
+    placement === 'above' ? Math.max(8, anchor.top - popupHeight - gap) : anchor.bottom + gap
+
+  const maxLeft = Math.max(8, viewportWidth - popupWidth - 8)
+  const left = Math.max(8, Math.min(anchor.left, maxLeft))
+
+  return { top, left, placement }
+}
diff --git a/src/hooks/AutoScrollContext.ts b/src/hooks/AutoScrollContext.ts
new file mode 100644
index 00000000..6656a6b7
--- /dev/null
+++ b/src/hooks/AutoScrollContext.ts
@@ -0,0 +1,20 @@
+import { createContext, useContext } from 'react'
+
+/**
+ * 让 message tree 里的子组件（如 disclosure widget）能通知 ChatArea：
+ * 「用户做了某个会停止贴底跟随的操作」（展开/折叠工具调用、跳转到消息等）。
+ *
+ * 由 ChatArea 提供，consume 方通过 useAutoScrollIntent() 拿到 pause。
+ * Context 值应当 stable（pause 是 useCallback），不会引起消费方 re-render。
+ */
+export interface AutoScrollContextValue {
+  pause: () => void
+}
+
+const AutoScrollContext = createContext<AutoScrollContextValue | null>(null)
+
+export const AutoScrollProvider = AutoScrollContext.Provider
+
+export function useAutoScrollIntent(): AutoScrollContextValue | null {
+  return useContext(AutoScrollContext)
+}
diff --git a/src/hooks/useChatSession.ts b/src/hooks/useChatSession.ts
index 06df67aa..ee5a22f2 100644
--- a/src/hooks/useChatSession.ts
+++ b/src/hooks/useChatSession.ts
@@ -297,86 +297,6 @@ export function useChatSession({
     }
   }, [approvePendingOnFullAuto, fullAutoMode, pendingPermissionRequests, replyPermissionOnceAutomatically])
 
-  const buildLocalQueuedMessage = useCallback(
-    (input: {
-      sessionId: string
-      messageId: string
-      text: string
-      attachments: Attachment[]
-      agent?: string
-      model: { providerID: string; modelID: string; variant?: string }
-      createdAt: number
-    }): UIMessage => {
-      const parts: UIMessage['parts'] = [
-        {
-          id: `${input.messageId}:text`,
-          type: 'text',
-          text: input.text,
-          synthetic: false,
-          sessionID: input.sessionId,
-          messageID: input.messageId,
-        },
-      ]
-
-      for (const attachment of input.attachments) {
-        if (attachment.type === 'agent') {
-          parts.push({
-            id: attachment.id || `${input.messageId}:agent:${parts.length}`,
-            type: 'agent',
-            name: attachment.agentName || attachment.displayName,
-            source: attachment.textRange
-              ? {
-                  value: attachment.textRange.value,
-                  start: attachment.textRange.start,
-                  end: attachment.textRange.end,
-                }
-              : undefined,
-            sessionID: input.sessionId,
-            messageID: input.messageId,
-          })
-          continue
-        }
-
-        if (attachment.type !== 'file' && attachment.type !== 'folder') continue
-
-        parts.push({
-          id: attachment.id || `${input.messageId}:file:${parts.length}`,
-          type: 'file',
-          mime: attachment.mime || (attachment.type === 'folder' ? 'application/x-directory' : 'text/plain'),
-          filename: attachment.displayName,
-          url: attachment.url || '',
-          source: attachment.textRange
-            ? {
-                type: 'file',
-                path: attachment.relativePath || attachment.displayName,
-                text: {
-                  value: attachment.textRange.value,
-                  start: attachment.textRange.start,
-                  end: attachment.textRange.end,
-                },
-              }
-            : undefined,
-          sessionID: input.sessionId,
-          messageID: input.messageId,
-        })
-      }
-
-      return {
-        info: {
-          id: input.messageId,
-          sessionID: input.sessionId,
-          role: 'user',
-          time: { created: input.createdAt },
-          agent: input.agent || '',
-          model: input.model,
-        },
-        parts,
-        isStreaming: false,
-      }
-    },
-    [],
-  )
-
   // ============================================
   // SSE 事件回调（permission / question / scroll / idle / error / reconnect）
   // 每个 pane 都注册自己的 consumer，由 App 顶层统一建立 SSE 连接
@@ -770,7 +690,7 @@ export function useChatSession({
         !!routeSessionId && (queuedFollowups.length > 0 || (queueFollowupMessages && isSessionBusy))
 
       if (shouldQueueFollowup) {
-        const queued = followupQueueStore.enqueue({
+        followupQueueStore.enqueue({
           sessionId: routeSessionId,
           directory: effectiveDirectory || '',
           text: content,
@@ -783,17 +703,6 @@ export function useChatSession({
           variant: options?.variant,
           agent: options?.agent,
         })
-        messageStore.upsertLocalMessage(
-          buildLocalQueuedMessage({
-            sessionId: queued.sessionId,
-            messageId: queued.id,
-            text: queued.text,
-            attachments: queued.attachments,
-            agent: queued.agent,
-            model: queued.model,
-            createdAt: queued.createdAt,
-          }),
-        )
         return true
       }
 
@@ -818,7 +727,6 @@ export function useChatSession({
       queueFollowupMessages,
       isSessionBusy,
       effectiveDirectory,
-      buildLocalQueuedMessage,
       sendMessageNow,
     ],
   )
@@ -829,9 +737,6 @@ export function useChatSession({
       if (!draft) return false
       if (!followupQueueStore.startSending(draft.sessionId, draft.id)) return false
 
-      // 发送前先移除占位消息，让 sendMessageNow 走和正常发送完全一样的路径
-      messageStore.removeMessage(draft.sessionId, draft.id)
-
       const ok = await sendMessageNow({
         sessionId: draft.sessionId,
         content: draft.text,
@@ -854,11 +759,6 @@ export function useChatSession({
       } else {
         // 标记失败，阻塞后续队列项
         followupQueueStore.markFailed(draft.sessionId, draft.id)
-        // 移除剩余排队消息的本地占位，恢复队头到输入框
-        const remaining = followupQueueStore.getItems(draft.sessionId)
-        for (const item of remaining) {
-          messageStore.removeMessage(draft.sessionId, item.id)
-        }
         setRestoredContent({
           sessionId: draft.sessionId,
           content: {
@@ -877,6 +777,27 @@ export function useChatSession({
     [sendMessageNow],
   )
 
+  // 立即发送排队消息（跳过队列检查，直接发送）
+  const handleSendQueuedNow = useCallback(
+    async (draftId: string) => {
+      if (!routeSessionId) return false
+      const draft = followupQueueStore.getItem(routeSessionId, draftId)
+      if (!draft) return false
+
+      followupQueueStore.remove(routeSessionId, draftId)
+
+      return sendMessageNow({
+        sessionId: routeSessionId,
+        content: draft.text,
+        attachments: draft.attachments,
+        model: { providerID: draft.model.providerID, modelID: draft.model.modelID },
+        options: { agent: draft.agent, variant: draft.variant },
+        directory: draft.directory,
+      })
+    },
+    [routeSessionId, sendMessageNow],
+  )
+
   useEffect(() => {
     if (!routeSessionId) return
 
@@ -966,6 +887,8 @@ export function useChatSession({
   // Abort handler
   const handleAbort = useCallback(async () => {
     if (!routeSessionId) return
+    // 放弃当前回复时清空队列，排队消息不应继续发送
+    followupQueueStore.clearSession(routeSessionId)
     try {
       const directory = sessionDirectory || currentDirectory
       await abortSession(routeSessionId, directory, paneServerId)
@@ -1192,6 +1115,7 @@ export function useChatSession({
     pendingQuestionRequests,
     queuedFollowups,
     queuedFollowupSendingId,
+    queuedFollowupFailedId,
     handlePermissionReply,
     handleQuestionReply,
     handleQuestionReject,
@@ -1208,6 +1132,7 @@ export function useChatSession({
 
     // Handlers
     handleSend,
+    handleSendQueuedNow,
     handleAbort,
     handleCommand,
     handleUndoWithAnimation,
diff --git a/src/hooks/useDisclosureScrollLock.ts b/src/hooks/useDisclosureScrollLock.ts
index 988fb766..9d1bc08f 100644
--- a/src/hooks/useDisclosureScrollLock.ts
+++ b/src/hooks/useDisclosureScrollLock.ts
@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useRef, type RefCallback } from 'react'
 import { lockScrollAroundAnchor, type LockScrollAroundAnchorOptions } from '../utils/scrollUtils'
+import { useAutoScrollIntent } from './AutoScrollContext'
 
 /**
  * 折叠/展开时把 header 钉在视口原位置。
@@ -7,13 +8,19 @@ import { lockScrollAroundAnchor, type LockScrollAroundAnchorOptions } from '../u
  * 用法：
  * - rootRef 挂在整块折叠容器（观察高度变化）
  * - headerRef 挂在点击条 / 标题
- * - 用户切换状态前调用 withScrollLock(() => setExpanded(...))
+ * - 用户切换状态前调用 withScrollLock(() => setExpanded(...), expanding)
+ *
+ * expanding=true（展开）时同时通知 AutoScrollContext 停止贴底跟随 ——
+ * 用户主动展开表示要停下来看内容，不应被流式拉走。
+ * expanding=false（折叠）时不改变跟随状态 —— 折叠只是收起已看过的内容，
+ * 不表达「我要停下来读」的意图。
  */
 export function useDisclosureScrollLock(options?: LockScrollAroundAnchorOptions) {
   const rootNodeRef = useRef<HTMLElement | null>(null)
   const headerNodeRef = useRef<HTMLElement | null>(null)
   const unlockRef = useRef<(() => void) | null>(null)
   const optionsRef = useRef(options)
+  const autoScroll = useAutoScrollIntent()
 
   useEffect(() => {
     optionsRef.current = options
@@ -34,14 +41,19 @@ export function useDisclosureScrollLock(options?: LockScrollAroundAnchorOptions)
     headerNodeRef.current = node
   }, [])
 
-  const withScrollLock = useCallback((action: () => void) => {
+  /**
+   * @param action 实际切换状态的回调
+   * @param expanding 是否是「展开」操作（true=展开→停止跟随；false=折叠→不动状态）
+   */
+  const withScrollLock = useCallback((action: () => void, expanding: boolean) => {
     unlockRef.current?.()
     unlockRef.current = lockScrollAroundAnchor(headerNodeRef.current, {
       observe: rootNodeRef.current,
       ...optionsRef.current,
     })
+    if (expanding) autoScroll?.pause()
     action()
-  }, [])
+  }, [autoScroll])
 
   return { rootRef, headerRef, withScrollLock }
 }
diff --git a/src/lib/overlayScrollbar.ts b/src/lib/overlayScrollbar.ts
index 20bb1743..8c44830f 100644
--- a/src/lib/overlayScrollbar.ts
+++ b/src/lib/overlayScrollbar.ts
@@ -26,6 +26,18 @@ const TRACK_PAD = 8
 const MIN_THUMB = 32
 const FADE_MS = 800
 
+/**
+ * 拖拽自绘 thumb 时，在 vp 上广播 dragstart / dragend。
+ * useAutoScroll 监听这两个事件来设置/清除 userScrolled，
+ * 否则拖拽 thumb 改了 scrollTop 却没表达「停止跟随」，
+ * 会被 handleScroll 的 drift 自愈立刻拉回底部 → 滚动条拖不动。
+ */
+export const OS_DRAG_START = 'os-scroll-dragstart'
+export const OS_DRAG_END = 'os-scroll-dragend'
+function emitOsDrag(vp: HTMLElement, type: string) {
+  vp.dispatchEvent(new CustomEvent(type, { bubbles: true }))
+}
+
 // ── 方向判断 ────────────────────────────────────────────
 
 /** 带 no-scrollbar / scrollbar-none 的元素故意不要滚动条，跳过 */
@@ -159,6 +171,7 @@ function createAxisThumb(axis: 'v' | 'h', vp: HTMLElement, parent: HTMLElement):
     dragging = true
     thumb.classList.add('os-dragging')
     thumb.setPointerCapture(e.pointerId)
+    emitOsDrag(vp, OS_DRAG_START)
 
     const startPos = axis === 'v' ? e.clientY : e.clientX
     const startScroll = axis === 'v' ? vp.scrollTop : vp.scrollLeft
@@ -182,6 +195,7 @@ function createAxisThumb(axis: 'v' | 'h', vp: HTMLElement, parent: HTMLElement):
       thumb.removeEventListener('pointermove', onMove)
       thumb.removeEventListener('pointerup', onUp)
       scheduleFade()
+      emitOsDrag(vp, OS_DRAG_END)
     }
 
     thumb.addEventListener('pointermove', onMove)
diff --git a/src/locales/en/chat.json b/src/locales/en/chat.json
index a335a02e..4530dd7a 100644
--- a/src/locales/en/chat.json
+++ b/src/locales/en/chat.json
@@ -112,6 +112,13 @@
     "scrollToBottom": "Scroll to bottom",
     "reply": "Reply..."
   },
+  "textSelectionPopup": {
+    "label": "Text actions",
+    "quote": "Quote",
+    "copy": "Copy",
+    "copied": "Copied",
+    "copyFailed": "Could not copy to clipboard"
+  },
   "undoStatus": {
     "editing": "Editing",
     "redo": "Redo",
@@ -201,6 +208,16 @@
     "cacheRW": "Cache (r/w)",
     "rawMessages": "Raw Messages"
   },
+  "queuedMessages": {
+    "count": "{{count}} queued",
+    "sending": "Sending…",
+    "failed": "Failed",
+    "remove": "Remove from queue",
+    "cancelFailed": "Dismiss",
+    "sendNow": "Send now",
+    "revert": "Edit",
+    "reorder": "Drag to reorder"
+  },
   "hints": {
     "pressEscAgain": "Press <1>Esc</1> again to stop",
     "autoApproveAll": "Auto-approve: all sessions",
diff --git a/src/locales/zh-CN/chat.json b/src/locales/zh-CN/chat.json
index 91423b53..14b07344 100644
--- a/src/locales/zh-CN/chat.json
+++ b/src/locales/zh-CN/chat.json
@@ -112,6 +112,13 @@
     "scrollToBottom": "滚动到底部",
     "reply": "回复..."
   },
+  "textSelectionPopup": {
+    "label": "文本操作",
+    "quote": "引用",
+    "copy": "复制",
+    "copied": "已复制",
+    "copyFailed": "复制到剪贴板失败"
+  },
   "undoStatus": {
     "editing": "Editing",
     "redo": "Redo",
@@ -201,6 +208,16 @@
     "cacheRW": "缓存 (读/写)",
     "rawMessages": "原始消息"
   },
+  "queuedMessages": {
+    "count": "{{count}} 条排队中",
+    "sending": "发送中…",
+    "failed": "发送失败",
+    "remove": "从队列移除",
+    "cancelFailed": "放弃",
+    "sendNow": "立即发送",
+    "revert": "编辑",
+    "reorder": "拖动调整顺序"
+  },
   "hints": {
     "pressEscAgain": "再按一次 <1>Esc</1> 停止",
     "autoApproveAll": "自动放行：全部会话",
diff --git a/src/store/followupQueueStore.ts b/src/store/followupQueueStore.ts
index 8443f11e..bfebdcf8 100644
--- a/src/store/followupQueueStore.ts
+++ b/src/store/followupQueueStore.ts
@@ -114,6 +114,29 @@ class FollowupQueueStore {
     })
   }
 
+  /** Move draggedId to the index currently occupied by targetId (same semantics as directory reorder). */
+  reorder(sessionId: string, draggedId: string, targetId: string) {
+    if (draggedId === targetId) return
+    const current = this.state.itemsBySession[sessionId] ?? EMPTY_ITEMS
+    if (current.length < 2) return
+
+    const draggedIndex = current.findIndex(item => item.id === draggedId)
+    const targetIndex = current.findIndex(item => item.id === targetId)
+    if (draggedIndex === -1 || targetIndex === -1 || draggedIndex === targetIndex) return
+
+    const next = [...current]
+    const [dragged] = next.splice(draggedIndex, 1)
+    next.splice(targetIndex, 0, dragged)
+
+    this.setState({
+      ...this.state,
+      itemsBySession: {
+        ...this.state.itemsBySession,
+        [sessionId]: next,
+      },
+    })
+  }
+
   markFailed(sessionId: string, id: string | undefined) {
     const nextFailedBySession = { ...this.state.failedBySession }
     if (!id) delete nextFailedBySession[sessionId]
diff --git a/src/store/serverStore.test.ts b/src/store/serverStore.test.ts
index e5000800..72e851ef 100644
--- a/src/store/serverStore.test.ts
+++ b/src/store/serverStore.test.ts
@@ -70,6 +70,51 @@ describe('serverStore clock calibration', () => {
   })
 })
 
+describe('serverStore removeServer', () => {
+  beforeEach(() => {
+    vi.resetModules()
+    localStorage.clear()
+    sessionStorage.clear()
+  })
+
+  afterEach(() => {
+    vi.unstubAllGlobals()
+  })
+
+  it('removes the default server when other servers exist', async () => {
+    const { serverStore } = await import('./serverStore')
+    serverStore.addServer({ name: 'Remote', url: 'http://remote.test' })
+
+    expect(serverStore.removeServer('local')).toBe(true)
+    expect(serverStore.getStoredServers().some(s => s.id === 'local')).toBe(false)
+  })
+
+  it('switches the active server when removing the active default', async () => {
+    const { serverStore } = await import('./serverStore')
+    const remote = serverStore.addServer({ name: 'Remote', url: 'http://remote.test' })
+
+    serverStore.removeServer('local')
+
+    expect(serverStore.getActiveServerId()).toBe(remote.id)
+  })
+
+  it('refuses to remove the default server when it is the only one', async () => {
+    const { serverStore } = await import('./serverStore')
+
+    expect(serverStore.removeServer('local')).toBe(false)
+    expect(serverStore.getStoredServers().some(s => s.id === 'local')).toBe(true)
+  })
+
+  it('refuses to remove the default server on Tauri desktop', async () => {
+    vi.stubGlobal('__TAURI_INTERNALS__', { invoke: vi.fn() })
+    const { serverStore } = await import('./serverStore')
+    serverStore.addServer({ name: 'Remote', url: 'http://remote.test' })
+
+    expect(serverStore.removeServer('local')).toBe(false)
+    expect(serverStore.getStoredServers().some(s => s.id === 'local')).toBe(true)
+  })
+})
+
 describe('serverStore local runtime URL', () => {
   beforeEach(() => {
     vi.resetModules()
diff --git a/src/store/serverStore.ts b/src/store/serverStore.ts
index ee2d5afa..518a427b 100644
--- a/src/store/serverStore.ts
+++ b/src/store/serverStore.ts
@@ -430,9 +430,10 @@ class ServerStore {
    * 删除服务器
    */
   removeServer(id: string): boolean {
-    // 不能删除默认服务器
     const server = this.servers.find(s => s.id === id)
-    if (!server || server.isDefault) return false
+    if (!server) return false
+    // 默认服务器仅在有其他服务器且非桌面端时可删除
+    if (server.isDefault && (isTauri() || this.servers.length <= 1)) return false
 
     this.servers = this.servers.filter(s => s.id !== id)
     this.healthMap.delete(id)
diff --git a/src/themes/index.ts b/src/themes/index.ts
index e9ce3bdc..0a78fb2d 100644
--- a/src/themes/index.ts
+++ b/src/themes/index.ts
@@ -900,6 +900,246 @@ export const obsidianTheme: ThemePreset = {
   dark: obsidianDark,
 }
 
+// ============================================
+// GitHub 主题 - Primer 设计系统
+// ============================================
+// 颜色来源：primer/primitives + primer/github-vscode-theme
+// - Light canvas/inset #ffffff / #f6f8fa，accent #0969da，fg #1f2328
+// - Dark canvas #0d1117 / surface #21262d，accent #2f81f7，fg #e6edf3
+
+const githubLight: ThemeColors = {
+  background: {
+    bg000: '0 0% 100%', // canvas.default #ffffff
+    bg100: '210 29% 97%', // canvas.inset #f6f8fa
+    bg200: '210 24% 93%', // neutral.subtle #eaeef2
+    bg300: '210 18% 84%', // border.default #d0d7de
+    bg400: '210 13% 72%', // neutral.emphasis #afb8c1
+  },
+  text: {
+    text000: '0 0% 100%',
+    text100: '213 13% 14%', // fg.default #1f2328
+    text200: '212 8% 43%', // fg.muted #656d76
+    text300: '212 8% 47%', // fg.subtle #6e7781
+    text400: '215 8% 62%', // fg.disabled #8c959f
+    text500: '215 8% 75%',
+    text600: '215 8% 84%',
+  },
+  accent: {
+    brand: '212 92% 45%', // accent.fg #0969da
+    main000: '212 90% 40%',
+    main100: '212 92% 45%',
+    main200: '211 100% 56%', // accent.bright #218bff
+    secondary100: '261 69% 59%', // done.fg #8250df
+  },
+  semantic: {
+    success100: '137 66% 30%', // success.fg #1a7f37
+    success200: '137 63% 25%',
+    successBg: '133 80% 92%', // success.subtle #dafbe1
+    warning100: '40 100% 30%', // attention.fg #9a6700
+    warning200: '41 95% 25%',
+    warningBg: '53 100% 89%', // attention.subtle #fff8c5
+    danger000: '356 72% 47%', // danger.fg #cf222e
+    danger100: '356 72% 47%',
+    danger200: '356 70% 40%',
+    dangerBg: '5 100% 96%', // danger.subtle #ffebe9
+    danger900: '5 80% 92%',
+    info100: '212 92% 45%',
+    info200: '211 100% 56%',
+    infoBg: '199 100% 93%', // accent.subtle #ddf4ff
+  },
+  border: {
+    border100: '210 18% 84%', // border.default #d0d7de
+    border200: '210 18% 87%', // border.muted #d8dee4
+    border300: '210 13% 72%', // neutral #afb8c1
+  },
+  special: {
+    alwaysBlack: '0 0% 0%',
+    alwaysWhite: '0 0% 100%',
+    oncolor100: '0 0% 100%',
+  },
+}
+
+const githubDark: ThemeColors = {
+  background: {
+    bg000: '215 15% 15%', // surface #21262d
+    bg100: '215 21% 11%', // canvas.subtle #161b22
+    bg200: '216 28% 7%', // canvas.default #0d1117
+    bg300: '218 80% 4%',
+    bg400: '218 80% 2%', // canvas.inset #010409
+  },
+  text: {
+    text000: '0 0% 100%',
+    text100: '208 35% 93%', // fg.default #e6edf3
+    text200: '215 8% 53%', // fg.muted #7d8590
+    text300: '215 8% 43%',
+    text400: '215 7% 35%',
+    text500: '215 6% 28%',
+    text600: '215 5% 22%',
+  },
+  accent: {
+    brand: '215 93% 58%', // accent.fg #2f81f7
+    main000: '216 84% 52%', // accent.emphasis #1f6feb
+    main100: '215 93% 58%',
+    main200: '215 93% 67%',
+    secondary100: '262 89% 71%', // done.fg #a371f7
+  },
+  semantic: {
+    success100: '128 49% 49%', // success.fg #3fb950
+    success200: '128 50% 60%',
+    successBg: '141 90% 12%', // success.subtle #033a16
+    warning100: '41 72% 48%', // attention.fg #d29922
+    warning200: '41 75% 58%',
+    warningBg: '29 34% 17%', // attention.subtle
+    danger000: '3 93% 63%', // danger.fg #f85149
+    danger100: '3 90% 60%',
+    danger200: '3 90% 68%',
+    dangerBg: '352 70% 17%', // danger.subtle
+    danger900: '352 60% 25%',
+    info100: '215 93% 58%',
+    info200: '215 93% 68%',
+    infoBg: '219 80% 23%', // accent.subtle
+  },
+  border: {
+    border100: '212 12% 21%', // border.default #30363d
+    border200: '215 15% 15%', // border.muted #21262d
+    border300: '212 12% 30%',
+  },
+  special: {
+    alwaysBlack: '0 0% 0%',
+    alwaysWhite: '0 0% 100%',
+    oncolor100: '0 0% 100%',
+  },
+}
+
+export const githubTheme: ThemePreset = {
+  id: 'github',
+  name: 'GitHub',
+  description: 'Primer palette, signature GitHub blue on neutral canvas',
+  light: githubLight,
+  dark: githubDark,
+}
+
+// ============================================
+// One 主题 - Atom One Dark / Light
+// ============================================
+// 颜色来源：base16 one-light-scheme + onedark (verbatim base00–base0F)
+// - Light #fafafa 底，accent = base0B string green #50a14f（也是 inline code 色），fg #383a42
+// - Dark  #282c34 底，accent = base0B string green #98c379，fg #abb2bf
+// 注：OpenCodeUI 把 brand 与 inline code 都绑在 accent.main100 上，所以选了 Atom
+// 最具辨识度的 string green 当 brand；secondary 退回 base0D blue（function hue）。
+
+const oneLight: ThemeColors = {
+  background: {
+    bg000: '0 0% 100%',
+    bg100: '0 0% 98%', // base00 #fafafa
+    bg200: '240 3% 94%', // base01 #f0f0f1
+    bg300: '240 2% 90%', // base02 #e5e5e6
+    bg400: '231 4% 80%',
+  },
+  text: {
+    text000: '0 0% 100%',
+    text100: '228 8% 24%', // base05 #383a42
+    text200: '227 6% 44%', // base04 #696c77
+    text300: '231 4% 64%', // base03 #a0a1a7
+    text400: '230 4% 75%',
+    text500: '230 3% 85%',
+    text600: '230 3% 90%',
+  },
+  accent: {
+    brand: '119 34% 47%', // base0B #50a14f (string green)
+    main000: '119 35% 38%',
+    main100: '119 34% 47%',
+    main200: '119 38% 55%',
+    secondary100: '221 87% 60%', // base0D #4078f2 (function blue)
+  },
+  semantic: {
+    success100: '119 34% 47%', // base0B #50a14f
+    success200: '119 35% 35%',
+    successBg: '120 30% 92%',
+    warning100: '41 99% 38%', // base0A #c18401
+    warning200: '41 90% 30%',
+    warningBg: '42 100% 92%',
+    danger000: '344 84% 43%', // base08 #ca1243
+    danger100: '344 84% 43%',
+    danger200: '344 80% 50%',
+    dangerBg: '345 70% 95%',
+    danger900: '345 50% 92%',
+    info100: '198 99% 37%', // base0C #0184bc
+    info200: '198 90% 47%',
+    infoBg: '199 80% 95%',
+  },
+  border: {
+    border100: '240 2% 90%', // base02 #e5e5e6
+    border200: '240 3% 94%', // base01 #f0f0f1
+    border300: '228 8% 80%',
+  },
+  special: {
+    alwaysBlack: '0 0% 0%',
+    alwaysWhite: '0 0% 100%',
+    oncolor100: '0 0% 100%',
+  },
+}
+
+const oneDark: ThemeColors = {
+  background: {
+    bg000: '218 13% 24%', // base01 #353b45
+    bg100: '220 13% 18%', // base00 #282c34
+    bg200: '220 14% 14%',
+    bg300: '220 14% 10%',
+    bg400: '220 14% 6%',
+  },
+  text: {
+    text000: '0 0% 100%',
+    text100: '219 14% 71%', // base05 #abb2bf
+    text200: '219 12% 60%',
+    text300: '219 10% 50%',
+    text400: '223 8% 38%', // base04 #565c64
+    text500: '220 6% 30%',
+    text600: '220 5% 22%',
+  },
+  accent: {
+    brand: '95 38% 62%', // base0B #98c379 (string green)
+    main000: '95 38% 52%',
+    main100: '95 38% 62%',
+    main200: '95 42% 70%',
+    secondary100: '207 82% 66%', // base0D #61afef (function blue)
+  },
+  semantic: {
+    success100: '95 38% 62%', // base0B #98c379
+    success200: '95 35% 70%',
+    successBg: '95 30% 15%',
+    warning100: '39 67% 69%', // base0A #e5c07b
+    warning200: '39 65% 75%',
+    warningBg: '39 30% 15%',
+    danger000: '355 65% 65%', // base08 #e06c75
+    danger100: '355 65% 65%',
+    danger200: '355 60% 72%',
+    dangerBg: '355 40% 15%',
+    danger900: '355 30% 22%',
+    info100: '187 47% 55%', // base0C #56b6c2
+    info200: '187 50% 62%',
+    infoBg: '187 40% 15%',
+  },
+  border: {
+    border100: '220 14% 24%',
+    border200: '220 13% 20%',
+    border300: '218 13% 28%', // base02 #3e4451
+  },
+  special: {
+    alwaysBlack: '0 0% 0%',
+    alwaysWhite: '0 0% 100%',
+    oncolor100: '0 0% 100%',
+  },
+}
+
+export const oneTheme: ThemePreset = {
+  id: 'one',
+  name: 'One',
+  description: 'Atom One palette, string-green accent with five-color syntax tones',
+  light: oneLight,
+  dark: oneDark,
+}
+
 // ============================================
 // Theme Registry
 // ============================================
@@ -912,6 +1152,8 @@ export const builtinThemes: ThemePreset[] = [
   oceanTheme,
   draculaTheme,
   obsidianTheme,
+  githubTheme,
+  oneTheme,
 ]
 
 export function getThemePreset(id: string): ThemePreset | undefined {