S290.20 — Chat UX v2 Technical Summary

Session: S290.20 | Date: 2026-03-31 | Version: 0.21.0 | Branch: session-290-299
Commits: 12 (38083e19f..71e123fd5)

Architecture

Component Model

Three new reusable Lit components in components/shared/, composed into the existing agent-chat-view (2064 lines pre-change). No new Angular libraries — all changes are within the extension source.

apps/vitto-vscode-extension/src/
  panels/
    main-panel.ts                    # +5 case handlers, +1 helper method
    webview/
      api.ts                         # +request/response resolver for file search
      types.ts                       # +2 interfaces, +7 message variants
      components/
        shared/
          drop-zone-overlay.ts       # NEW: reusable drag overlay
          mention-autocomplete.ts    # NEW: provider-based @mention
          context-chips.ts           # NEW: context transparency pills
          markdown-view.ts           # Modified: 4 action buttons on code blocks
        agent/
          agent-chat-view.ts         # Modified: integration of all features
          agent-message.ts           # Modified: streaming caret, context chips

Message Protocol Extensions

Seven new message types following the existing MessageToExtension / MessageFromExtension union pattern:

Provider Architecture (@mentions)

interface MentionSource {
  id: string;              // 'file', 'selection', 'terminal', 'errors'
  label: string;           // 'Files'
  icon: string;            // emoji
  search(query: string): Promise<MentionItem[]>;
  showOnEmpty?: boolean;   // show in initial dropdown
}

Shipped: FileMentionSource — searches workspace via searchWorkspaceFiles message, falls back to open files from ideContext.openFiles.

Planned providers (one class + one array push each):

• SelectionMentionSource — current editor selection
• TerminalMentionSource — last N lines of terminal output
• ErrorsMentionSource — diagnostics from ideContext.diagnostics

Context Snapshot Flow

User types message
  -> captureContextSnapshot() reads ideContext + pendingMentions + pendingAttachments
  -> ContextSnapshot stored in messages[] alongside user message
  -> Persisted in NativeChatPersistedMessage (survives panel reload)
  -> <context-chips> component renders pills from ContextSnapshot
  -> File chips dispatch 'chip-click' -> 'open-file' -> send({ type: 'openFile' })

Drag-Drop MIME Type Handling

Priority 1: Files         (OS file drops — images, documents)
  -> ingestFiles() -> Canvas compression -> PendingAgentAttachment

Priority 2: text/uri-list (editor tabs, file explorer)
  -> addFileContextFromUri() -> readFileForContext -> PendingMention

Priority 3: text/plain    (fallback, path-like strings)
  -> addFileContextFromUri() if starts with / or file://

Code Block Action Visibility

markdown-it fence renderer extracts:
  - lang: first token of fence info
  - filename: parsed from colon (ts:file.ts) or space (typescript file.ts)

Button visibility:
  Copy     -> always
  Insert   -> always
  Terminal -> SHELL_LANGS.has(lang)  // bash, sh, shell, zsh, powershell, cmd, console, bat
  Apply    -> filename !== null

Files Changed

Created (3)

Modified (6)

Commit Log

71e123fd5 [S290.20] chore: bump to v0.21.0 Chat UX v2
0c21c168d [S290.20] feat: integrate @mention autocomplete, tab drag-drop, mention chips, and context snapshots
dde77ca6a [S290.20] feat: wire workspaceFilesResult and fileContextResult to request/response correlation
91b334319 [S290.20] feat: add reusable <context-chips> component showing per-message context transparency
b8a74d5ac [S290.20] feat: add reusable <mention-autocomplete> with provider interface and keyboard navigation
beb0fd5a1 [S290.20] feat: add keyboard shortcut hints to chat header buttons
cdcc9fea2 [S290.20] feat: add Insert, Terminal, Apply action buttons to code blocks in markdown-view
c48765663 [S290.20] feat: add reusable <drop-zone-overlay> with Shift hint, replace CSS pseudo-element
fec37a13d [S290.20] feat: add extension host handlers for insertAtCursor, sendToTerminal, applyCodeToFile, searchWorkspaceFiles, readFileForContext
f9e38ddf0 [S290.20] feat: add blinking streaming caret to AI text messages
38083e19f [S290.20] feat: add Chat UX v2 types — ContextSnapshot, FileSearchResult, 7 new message variants
3402cac98 [S290.20] docs: add Chat UX v2 spec and implementation plan

MCP Intelligence

Decisions Logged (7)

Conventions Added (4)

Reflections (7 lessons)

1. Cross-product research before implementation ensures features match industry standards
2. Parallel subagent dispatch (4 simultaneous) = 3-4x faster than sequential
3. Provider interfaces add minimal overhead but prevent architectural rewrites
4. Event delegation with data-action is the cleanest pattern for markdown-it rendered HTML
5. ContextSnapshot must be captured at send-time, not render-time
6. Textarea + chip row avoids contenteditable complexity trap
7. Extension host message protocol (types.ts union + main-panel.ts switch) scales well

Edge Cases and Known Limitations

Testing Checklist

• Drag OS file -> overlay appears with Shift hint -> file attaches
• Drag editor tab -> adds as mention chip in composer
• Type @con -> dropdown shows matching files -> select -> chip appears
• ArrowUp/Down navigates mention dropdown, Enter selects, Escape dismisses
• Send message with @mention -> context chips show below user bubble
• Click a file chip -> file opens in editor
• AI code response -> see Copy, Insert buttons on all blocks
• Bash code block -> see Terminal button
• Code block with ts:src/config.ts -> see Apply button
• Click Insert -> code appears at cursor position
• Click Terminal -> command sent to Vitto terminal
• Click Apply with filename -> diff view opens
• During streaming -> blinking cyan caret visible
• Header shows "New ⌘N" and "Copy ⌘⇧C" (Mac) or Ctrl variants
• New chat clears mention chips
• Session persistence -> context chips survive panel reload