🏗️ Architecture: How should we architect 7 new chat UX features (drop overlay...

Date: 2026-03-31
Time: 18:41:51 UTC
Session: gspace1-290.23
Agent: architecture
Confidence: 95%
Status: ✅ Documented

📋 Decision Context

Question:

How should we architect 7 new chat UX features (drop overlay, code block actions, streaming caret, keyboard hints, @mention, tab drag-drop, context chips) for the VSCode extension?

Task: Chat UX v2 architecture decision

🎯 Decision Made

Chosen:

3 new reusable Lit components (drop-zone-overlay, mention-autocomplete, context-chips) composed into the existing agent-chat-view, with 7 new extension host message types bridging webview actions to VSCode APIs

Options Considered:

1. Inline all features directly in agent-chat-view.ts (faster but unmaintainable)
2. Create separate Angular-style services for each feature (over-engineered for webview)
3. 3 reusable Lit components composed into existing view (chosen)
4. Build a plugin system like chat-plugin-core for each feature (too abstract for 7 concrete features)

💭 Reasoning

agent-chat-view.ts was already 2064 lines. Inlining 7 features would make it unmaintainable. Component extraction follows the Lit composition pattern — each feature is a focused, reusable component with clear props/events. The mention system uses a provider interface (MentionSource) so @file ships now but @selection/@terminal/@errors can be added by registering new providers without structural changes. Extension host handlers follow the existing message protocol pattern (switch cases in handleMessage). Cross-product research showed every competitor (Cursor, Copilot, Cody, Windsurf) uses these exact patterns — this is table stakes, not innovation. The 3 shared components (drop-zone-overlay, mention-autocomplete, context-chips) are placed in components/shared/ for reuse across other views like repositories.

📁 Files Involved

• apps/vitto-vscode-extension/src/panels/webview/components/shared/drop-zone-overlay.ts
• apps/vitto-vscode-extension/src/panels/webview/components/shared/mention-autocomplete.ts
• apps/vitto-vscode-extension/src/panels/webview/components/shared/context-chips.ts
• apps/vitto-vscode-extension/src/panels/webview/components/agent/agent-chat-view.ts
• apps/vitto-vscode-extension/src/panels/main-panel.ts

🔗 Related

• Decision ID: dev_1774982511271_z0fi7g8
• Session: 290
• Workspace: gspace1

Auto-generated by MCP Smart Consolidation