@vibe-forge/client 3.0.0-alpha.5 → 3.0.0-alpha.7

package/src/components/chat/AGENTS.md

@@ -1,177 +0,0 @@
-# Chat 组件维护说明
-
-本目录承载聊天页内部视图。涉及消息级交互时，优先从这里读起，而不是只看顶层 route。
-
-## 关键文件职责
-
-- `ChatHistoryView.tsx`
-  - 会话消息列表的父层编排。
-  - 管理 `editingMessageId`。
-  - 负责“已有一条消息正在编辑”的冲突提示。
-  - 负责编辑期间隐藏底部主 sender。
-- `messages/MessageItem.tsx`
-  - 单条消息渲染。
-  - 消息 footer 操作按钮。
-  - inline edit 的消息内挂载点。
-  - 原始文本复制逻辑。
-- `messages/MessageFooter.tsx`
-  - 消息 footer 的统一承载层。
-  - 改 footer 文案或按钮时，优先改这里，不要散落到 `MessageItem`。
-- `sender/Sender.tsx`
-  - 默认 sender 和 inline edit 共用的最外层装配入口。
-  - 只保留 sender 壳层、局部视图拼装和少量同目录引用，不再承载大段状态编排。
-- `sender/Sender.scss`
-  - sender 和 inline edit 的共同样式来源。
-- `sender/@components/`
-  - sender 私有的通用视图组件与子模块目录，例如 `sender-toolbar/`、`model-select/`。
-- `sender/@core/`
-  - sender 私有的编排与纯逻辑，例如 toolbar bindings、content 组装、interaction 判断。
-- `sender/@hooks/`
-  - sender 私有的状态编排、快捷键、focus restore、overlay 控制、提交逻辑等 hooks。
-- `sender/@types/`
-  - sender 私有类型定义。
-- `sender/@utils/`
-  - sender 私有常量与轻量工具函数。
-- `../../dock-panel/DockPanel.tsx`
-  - 聊天页底部可复用 dock 面板壳层。
-  - 统一承载标题、meta、关闭动作和拖拽调高能力。
-  - terminal 以及后续其他底部面板优先复用这里，不要再各自复制一套 resize/header 逻辑。
-- `../../components/workspace/ContextFilePicker.tsx`
-  - 工作区文件选择器；如果别的输入入口也要复用文件引用弹窗，直接走这里。
-- `../../components/workspace/project-file-tree/ProjectFileTree.tsx`
-  - 可复用项目目录树；目录抽屉和文件引用弹窗共用这里，不要在 chat 局部再复制树结构、展开状态或右键菜单逻辑。
-
-## 消息级操作的当前约束
-
-- assistant 消息不允许 fork；前端不显示按钮，后端也会拒绝。
-- inline edit 必须复用 `Sender`，不要另造一套 textarea/composer。
-- 编辑期间底部主 sender 必须隐藏，避免出现双输入源。
-- 同一时间只允许一条消息进入编辑态；冲突时保留当前编辑器并提示用户。
-- `复制原文` 复制的是原始 markdown/text，不是渲染后的可见 DOM 文本。
-- 编辑确认按钮固定使用 `发送`，不要改回实现导向文案。
-- 用户消息的 hover 操作按钮固定挂在消息左侧的独立 action rail，不要再塞回 footer 里挤占阅读流。
-- assistant 消息的可见 footer 操作按钮只保留最后一条；更早的 assistant / tool 消息只能通过右键菜单触发操作。
-- 消息级右键菜单必须同时兼容普通消息和工具调用块；`复制消息链接` 走 `#message-*` hash 锚点，落点要能直接滚动到对应消息位置，而不只是会话页。
-- 消息级操作要始终基于原始 message id，而不是渲染拆分后的临时 id；`text/tool-group` 拆分只影响展示，不应影响 `edit / recall / fork / copy id / copy link`。
-
-## Sender 结构约束
-
-- sender 只是当前已按“前端模块通用组织规范”落地的一个示例，不是特殊规则来源。
-- 通用规则入口：`../../../../.ai/rules/frontend-standard/module-organization.md`
-- sender 目录不要长期平铺文件；模块根只保留入口和极少量顶层样式。
-- sender 私有实现按 `@components / @core / @hooks / @types / @utils / @store` 分层。
-- sender 的状态型 hooks 放在 `sender/@hooks/`，不要再回塞到 `Sender.tsx` 或平铺在模块根目录。
-- sender 的纯逻辑和装配放在 `sender/@core/`，不要混进视图组件。
-- sender 的类型定义统一放在 `sender/@types/`，不要散在 core 和 component 里。
-- sender 中如果出现可跨页面或跨模块复用的组件，应提升到更公共的 `src/components/...` 目录，不继续留在 `sender/` 私有目录。
-- sender 相关单文件应尽量收敛在 200 行以内；超过后优先拆视图子组件、hooks、utils、样式文件，而不是继续在原文件加条件分支。
-- 子模块如果已经独立成形，例如 `model-select`、`reference-actions`、`sender-toolbar`，应建子目录，并在子目录内继续按职责拆分，而不是把新的辅助文件继续堆回 sender 根目录。
-
-## Sender 上方 Composer Card 设计约束
-
-- sender 上方的信息卡片统一视为 `composer card stack`，不要为 TODO、thinking、ask-user-question 各自维护一套独立容器样式。
-- 这类卡片优先复用 `ChatComposerCard`；新信息块先接入统一 card，再谈局部样式差异。
-- `composer card stack` 与 sender 之间默认不留额外空隙；宽度、边框和背景基调保持一致，视觉上应是一组连续的信息层。
-- 堆叠时只有最上方卡片保留上圆角，只有最下方的 sender 保留自己的完整圆角；中间卡片不应出现额外圆角或断开的分组感。
-- sender 上方卡片的展示优先级固定为：`todos`、`steer messages`、`next messages`、`ask user questions`；当前未接入的项也按这个顺序预留。
-- TODO 卡片默认折叠；折叠/展开时只让 body 参与动画，不要让 header 高度跳变。
-- TODO、thinking、ask-user-question 在信息密度上保持一致，优先通过布局收紧层级，不要只靠压缩 `padding` / `margin`。
-- 标题区的图标、字号、字重、行高应复用同一套节奏；ask-user-question 不应出现比 TODO 更重或更大的标题视觉。
-- 卡片表面保持简洁：不加阴影，背景色与 sender 基本一致；需要状态区分时优先用图标、文案和轻量色差，不单独造一套强强调背景。
-- 选项型列表默认纵向一行一个；说明信息放进 tooltip 或其他延迟展示入口，不直接铺在主列表里。
-- 选项 hover 优先做背景色和边框色过渡，避免通过新增/移除 border 造成闪烁或布局抖动。
-
-## Sender import 约定
-
-- `Sender` 及其子组件按固定顺序组织 import：
-  1. 本文件样式
-  2. 第三方依赖
-  3. workspace 包
-  4. `#~/` 绝对路径
-  5. 当前目录相对路径
-- 每个 group 之间保留一个空行。
-- sender 目录内部，同子模块兄弟文件继续使用相对路径。
-- sender 入口或跨子模块引用模块私有实现时，优先显式指向 `@components / @core / @hooks / @types / @utils / @store`，避免重新打平目录边界。
-
-## 改动时容易漏掉的地方
-
-### 1. i18n
-
-- 新增或调整消息操作文案时，同时更新：
-  - `src/resources/locales/zh.json`
-  - `src/resources/locales/en.json`
-
-### 2. 可编辑内容类型
-
-- `Sender` 支持 `ChatMessageContent[]`，但 inline edit 只应该接受 `text / image`。
-- 如果在 `MessageItem` 里直接把 `ChatMessageContent[]` 当成可编辑内容使用，`typecheck` 很容易在 `tool_use / tool_result` 分支上失败。
-
-### 3. 真实界面验证
-
-- 这块交互非常依赖真实布局、hover 和按钮语义。
-- 只跑单测或后端测试不够；改完必须用真实 Chrome 回归。
-
-### 4. 临时脚本脆弱性
-
-- 浏览器验证不要强依赖易变按钮文案。
-- 更稳妥的是依赖 `aria-label`、稳定类名或结构断言。
-
-## Sender / 浮层调试经验
-
-- `ChatHeader` 需要同时保留显式和隐藏两条调试入口：
-  - 右上角 `更多` 左边的 debug 状态按钮默认隐藏，只有当前 URL 已经带 `debug` query 时才显示；显示后点击按钮切换 URL 上的 `debug` query。
-  - debug 状态切换只在 `debug=true / debug=false` 之间切，不要通过按钮把 `debug` query 直接删掉。
-  - 标题支持隐藏调试入口：连续点击标题 5 次时，同样切换 URL 上的 `debug` 状态；不能只留在 console 里。
-- 只要 URL 上存在 `debug` query，就视为 debug 模式：
-  - `debug=true` 才算真正开启调试模式；`debug=false` 只保留入口，不展示调试内容。
-  - 调试元信息展示在 `settings` 视图，不再展示在标题下面。
-  - 消息时间戳只在 `debug=true` 时展示。
-  - 后续如果继续精简 header 或 settings，也要保留这条 query 驱动的可见调试通路。
-- `Sender.tsx` 同时组合了 `Tooltip`、`Popover`、`Select` 和自定义 trigger；一旦外层包装组件不透传 `ref` 或 DOM props，触发器很容易直接失效。
-- 包装触发器时不要用无效 DOM 结构，例如 `span` 包 `div`；这类 nesting warning 往往伴随点击异常。
-- 同一个控件如果既有 tooltip 又有 popup，popup 打开时要显式禁用 tooltip；否则 hover 层会抢事件或扰乱 focus。
-- 自定义 select 箭头后，必须分别验证：
-  - 文本区能打开
-  - 箭头区能打开
-  - 关闭后 focus 回输入框
-- sender 的颜色改动要谨慎收窄 selector，避免把下面这些一起误伤：
-  - 最高推理强度图标
-  - 权限菜单勾选图标
-  - 发送按钮
-  - disabled / hover / selected 态
-- 通用 tooltip 的字号、min-height 这类全局表面样式，优先改 `src/styles/global.scss` 或主题配置，不要只在 sender 局部覆盖。
-- 调 tooltip / popover / 主题样式后，先 reload 页面，再看 computed style 和 console warning；隐藏浮层节点和旧 bundle warning 很容易导致误判。
-
-## Sender 最小回归清单
-
-1. `更多` 主菜单能打开，权限二级菜单能展开。
-2. 模型和推理强度的文本区、箭头区都能打开。
-3. popup 打开时不会叠出自己的 tooltip。
-4. popup 关闭后输入框重新获得 focus。
-5. reload 后没有 React DOM nesting warning，也没有 Ant deprecation warning。
-6. 同时检查浅色 / 深色主题下的 tooltip、勾选图标、推理强度图标和发送按钮。
-
-## 推荐调试顺序
-
-1. 先看 `ChatHistoryView.tsx`，确认父层状态是不是放对了。
-2. 再看 `MessageItem.tsx`，确认消息级入口和 sender 挂载点。
-3. 如涉及输入能力，再看 `Sender.tsx`。
-4. 如涉及消息操作请求，再看 `src/hooks/chat/use-chat-session-actions.ts` 和 `src/api/sessions.ts`。
-5. 最后回到真实 Chrome 做界面验证。
-
-## 推荐回归命令
-
-```bash
-pnpm tools message-actions verify
-```
-
-如果需要只看最终结果，不看中间子命令输出：
-
-```bash
-pnpm tools message-actions verify --quiet
-```
-
-进一步的经验和工具说明见：
-
-- `../../../../../.ai/rules/maintenance/message-actions.md`
-- `../../../../../.ai/rules/maintenance/tooling.md`

package/src/components/chat/ChatComposerCard.scss

@@ -1,77 +0,0 @@
-.chat-composer-card {
-  --chat-composer-card-bg: var(--input-bg, #f9fafb);
-  --chat-composer-card-border: var(--border-color);
-
-  width: 100%;
-  min-width: 0;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  border: 1px solid var(--chat-composer-card-border);
-  border-radius: 14px;
-  background: var(--chat-composer-card-bg);
-  box-shadow: none;
-
-  &--narrow {
-    width: calc(100% - 24px);
-    align-self: center;
-  }
-
-  &.is-collapsed {
-    .chat-composer-card__content {
-      grid-template-rows: 0fr;
-      opacity: 0;
-    }
-  }
-
-  &.is-expanded .chat-composer-card__content {
-    grid-template-rows: 1fr;
-    opacity: 1;
-  }
-
-  &__summary {
-    width: 100%;
-    min-width: 0;
-    margin: 0;
-    border: none;
-    min-height: 36px;
-    padding: 6px 8px;
-    background: transparent;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 8px;
-    text-align: left;
-    color: inherit;
-    transition: padding .22s ease;
-  }
-
-  button.chat-composer-card__summary {
-    cursor: pointer;
-  }
-
-  &__content {
-    display: grid;
-    min-width: 0;
-    grid-template-rows: 0fr;
-    opacity: 0;
-    transition: grid-template-rows .24s ease, opacity .18s ease;
-  }
-
-  &__body {
-    min-height: 0;
-    min-width: 0;
-    overflow: hidden;
-    padding: 0 4px 4px;
-  }
-}
-
-html.dark .chat-composer-card {
-  --chat-composer-card-bg: var(--input-bg, #1f1f1f);
-}
-
-@media (max-width: 768px) {
-  .chat-composer-card--narrow {
-    width: calc(100% - 16px);
-  }
-}

package/src/components/chat/ChatComposerCard.tsx

@@ -1,59 +0,0 @@
-import './ChatComposerCard.scss'
-
-import type { ReactNode } from 'react'
-
-export function ChatComposerCard({
-  className,
-  summary,
-  summaryClassName,
-  bodyClassName,
-  progress,
-  children,
-  expanded = true,
-  onToggle,
-  narrow = false
-}: {
-  className?: string
-  summary: ReactNode
-  summaryClassName?: string
-  bodyClassName?: string
-  progress?: ReactNode
-  children?: ReactNode
-  expanded?: boolean
-  onToggle?: () => void
-  narrow?: boolean
-}) {
-  const classes = [
-    'chat-composer-card',
-    narrow ? 'chat-composer-card--narrow' : '',
-    expanded ? 'is-expanded' : 'is-collapsed',
-    className ?? ''
-  ].filter(Boolean).join(' ')
-  const summaryClasses = ['chat-composer-card__summary', summaryClassName ?? ''].filter(Boolean).join(' ')
-  const bodyClasses = ['chat-composer-card__body', bodyClassName ?? ''].filter(Boolean).join(' ')
-  const hasBody = children != null
-
-  return (
-    <section className={classes}>
-      {onToggle != null
-        ? (
-          <button type='button' className={summaryClasses} onClick={onToggle}>
-            {summary}
-          </button>
-        )
-        : (
-          <div className={summaryClasses}>
-            {summary}
-          </div>
-        )}
-      {progress}
-      {hasBody && (
-        <div className='chat-composer-card__content' aria-hidden={!expanded}>
-          <div className={bodyClasses}>
-            {children}
-          </div>
-        </div>
-      )}
-    </section>
-  )
-}