--- phase: 06- plan: 02 type: execute wave: 2 depends_on: - 06-01 files_modified: - frontend/src/components/workspace/input-box.tsx - frontend/src/components/ai-elements/prompt-input.tsx - frontend/src/core/uploads/hooks.ts - frontend/src/components/ui/dropdown-menu.tsx autonomous: true requirements: - ATREF-01 - ATREF-02 must_haves: truths: - "用户在输入框输入 @ 后可立即看到当前线程文件候选,并可继续输入过滤。" - "用户选择候选后在输入区看到可删除 chip,而不是纯文本 @文件名。" - "同名文件可通过类型徽标和路径尾段区分,且超过 10 个引用会被阻止。" artifacts: - path: "frontend/src/components/workspace/input-box.tsx" provides: "@候选收集、过滤、dropdown 展示、chip 管理" - path: "frontend/src/components/ai-elements/prompt-input.tsx" provides: "textarea 键盘事件和 chip 删除协同" key_links: - from: "frontend/src/components/workspace/input-box.tsx" to: "frontend/src/core/uploads/hooks.ts" via: "useUploadedFiles(threadId)" pattern: "useUploadedFiles" - from: "frontend/src/components/workspace/input-box.tsx" to: "frontend/src/components/ui/dropdown-menu.tsx" via: "DropdownMenu 候选面板" pattern: "DropdownMenuContent" --- 实现输入态 `@` 引用交互,覆盖候选展示、过滤、选择、chip、上限与键盘操作。 Purpose: 把 D-01/D-02/D-03/D-04/D-08/D-09 直接转成可见交互,且不突破线程边界。 Output: 输入框引用交互闭环(dropdown + chip + 限制策略)。 @/home/mt/.codex/get-shit-done/workflows/execute-plan.md @/home/mt/.codex/get-shit-done/templates/summary.md @.planning/PROJECT.md @.planning/ROADMAP.md @.planning/phases/06-/06-CONTEXT.md @.planning/phases/06-/06-RESEARCH.md @frontend/src/components/workspace/input-box.tsx @frontend/src/components/ai-elements/prompt-input.tsx @frontend/src/core/uploads/hooks.ts @frontend/src/components/workspace/chats/chat-box.tsx @frontend/src/components/ui/dropdown-menu.tsx From `frontend/src/core/uploads/hooks.ts`: ```typescript export function useUploadedFiles(threadId: string) ``` From `frontend/src/components/ui/dropdown-menu.tsx`: ```typescript export { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } ``` From `frontend/src/components/workspace/chats/chat-box.tsx`: ```typescript const { thread } = useThread(); // artifacts 来源:thread.values.artifacts ``` Task 1: 构建 thread-scoped @ 候选聚合与 dropdown 触发过滤 frontend/src/components/workspace/input-box.tsx, frontend/src/core/uploads/hooks.ts - frontend/src/components/workspace/input-box.tsx - frontend/src/components/workspace/chats/chat-box.tsx - frontend/src/core/uploads/hooks.ts - frontend/src/components/ui/dropdown-menu.tsx - .planning/phases/06-/06-CONTEXT.md 在 `InputBox` 增加 `referenceCandidates` 与 `mentionQuery` 状态;候选源固定为当前 `threadId` 的 `artifacts + uploads`(按 D-01);检测 textarea 输入中最后一个 `@` token:输入 `@` 立即打开 dropdown(按 D-02),继续输入做前缀过滤;候选项渲染包含“文件名 + 类型徽标 + 路径尾段”(按 D-04);面板必须使用 `DropdownMenu*` 组件(按 D-09),禁止自定义绝对定位浮层。 - `rg -n "useUploadedFiles\\(" frontend/src/components/workspace/input-box.tsx` 命中候选上传源。 - `rg -n "thread\\.values\\.artifacts|artifacts" frontend/src/components/workspace/input-box.tsx` 命中 artifact 源。 - `rg -n "DropdownMenu|DropdownMenuContent|DropdownMenuItem" frontend/src/components/workspace/input-box.tsx` 命中 dropdown 实现。 - `rg -n "mentionQuery|@\"|lastIndexOf\\(\"@\"" frontend/src/components/workspace/input-box.tsx` 命中触发过滤逻辑。 cd frontend && pnpm -s typecheck 输入 `@` 可见 thread 内候选,过滤生效,且候选 UI 满足去歧义展示。 Task 2: 实现 chip 选择/删除、上限控制与键盘行为 frontend/src/components/workspace/input-box.tsx, frontend/src/components/ai-elements/prompt-input.tsx - frontend/src/components/workspace/input-box.tsx - frontend/src/components/ai-elements/prompt-input.tsx - .planning/phases/06-/06-CONTEXT.md - .planning/phases/06-/06-RESEARCH.md 选中候选后写入 `references` 状态并在输入区展示可删除 chip(按 D-03),不把引用作为纯文本提交;按 `source+path` 去重;引用数量达到 10 时用 `toast.error` 提示并阻止新增(按 D-08);实现键盘交互:`ArrowUp/ArrowDown` 切换候选、`Enter` 选中、`Escape` 关闭、空输入时 `Backspace` 删除最后一个 chip;与 IME 组合输入状态兼容(`isComposing` 时不触发选择提交)。 - `rg -n "references|chip|Tag" frontend/src/components/workspace/input-box.tsx` 命中 chip 渲染与状态。 - `rg -n "10|MAX_.*REFERENCE|超限|toast\\.error" frontend/src/components/workspace/input-box.tsx` 命中上限控制。 - `rg -n "ArrowDown|ArrowUp|Escape|Backspace|isComposing" frontend/src/components/workspace/input-box.tsx frontend/src/components/ai-elements/prompt-input.tsx` 命中键盘实现。 cd frontend && pnpm -s typecheck chip 交互、上限、键盘行为与 IME 保护均实现并可编译。 ## Trust Boundaries | Boundary | Description | |----------|-------------| | textarea 输入→候选匹配 | 用户输入内容驱动候选过滤 | | 候选列表→引用状态 | 可展示文件元数据进入可提交状态 | ## STRIDE Threat Register | Threat ID | Category | Component | Disposition | Mitigation Plan | |-----------|----------|-----------|-------------|-----------------| | T-06-02-01 | I | `input-box.tsx` 候选聚合 | mitigate | 候选严格绑定当前 `threadId` 的 artifacts/uploads,禁止全局池(ASVS V4,per D-01)。 | | T-06-02-02 | T | `@` 查询与选择 | mitigate | 选择仅可来自候选对象,提交不信任自由文本路径(ASVS V5)。 | | T-06-02-03 | D | 引用数量控制 | mitigate | 强制 10 个上限并阻止继续添加,降低前端/提交膨胀风险(per D-08)。 | - `cd frontend && pnpm -s typecheck` - `cd frontend && pnpm -s lint -- src/components/workspace/input-box.tsx src/components/ai-elements/prompt-input.tsx` - `@` 触发、过滤、选择、关闭行为完整可用。 - 引用展示为 chip,支持删除、去重、键盘操作。 - 候选来源与组件实现满足 D-01/D-09 的硬约束。 After completion, create `.planning/phases/06-/06-02-SUMMARY.md`