Vitto Extension Chat UX v2 — Progress Report

For: Stakeholders, product team, and non-developers
Session: S290.20
Date: March 31, 2026
Version: 0.21.0
Status: Complete, ready for testing

What We Did

We upgraded the Vitto chat experience inside VSCode/Cursor to match (and in some areas exceed) what competing AI coding assistants offer. Before this work, Vitto's extension was a functional chat window. After this work, it's a proper coding tool — users can interact with their code directly from the chat.

We studied five competing products (Cursor, GitHub Copilot, Cody by Sourcegraph, Windsurf, and Continue.dev) to identify the exact features that separate a great AI coding assistant from a basic chatbot. Then we implemented the seven most impactful ones.

The Seven Features

1. Drop Zone Overlay (was: invisible drag feedback)

Before: When you dragged a file into the chat, you saw a faint dashed border and nothing else. Users didn't know that in VSCode, you need to hold the Shift key when dragging from the file explorer — so drag-and-drop seemed broken.

After: A frosted-glass overlay appears with a clear upload icon, the message "Drop files here," and a visible hint telling users to hold Shift. The overlay fades in with a smooth animation.

Why it matters: First impressions. If a user tries drag-and-drop once and it seems broken, they never try again.

2. Code Block Action Buttons (was: Copy only)

Before: When Vitto responded with code, the only action was "Copy." Users had to manually copy code, switch to their editor, find the right spot, and paste.

After: Every code block now has up to four buttons:

• Copy — Same as before, copies to clipboard
• Insert — Pastes the code directly at your cursor position in the editor (one click)
• Terminal — Sends shell commands directly to the terminal (only shown for bash/shell blocks)
• Apply — Opens a side-by-side comparison between the suggested code and your existing file (only shown when a filename is specified in the code block)

Why it matters: This is the #1 feature that separates a "chat" from a "coding tool." Every competitor has this. Without it, users are doing manual copy-paste for every suggestion.

3. Streaming Caret (was: text just grew silently)

Before: When Vitto was typing a response, the text would grow but there was no visual indicator of where new text was being added.

After: A blinking cyan cursor appears at the end of the streaming text, just like a real typing cursor.

Why it matters: Small but important polish. It gives users a clear visual anchor and makes the streaming experience feel more natural and responsive.

4. Keyboard Shortcut Hints (was: hidden shortcuts)

Before: The chat header had buttons (New, Copy, History) but no indication that keyboard shortcuts existed.

After: The "New" and "Copy" buttons now show their shortcuts as small badges (e.g., "New ⌘N" on Mac, "New CtrlN" on Windows). Platform-detected automatically.

Why it matters: Power users want keyboard shortcuts. If they don't know they exist, they can't use them.

5. @File Mention System (was: no way to reference files)

Before: Users had to manually type file paths or hope the AI would infer which files to look at.

After: Type @ in the chat, and a searchable dropdown appears showing workspace files. Select a file and it appears as a chip/badge in the input area. When you send the message, that file's content is included as context for Vitto.

Why it matters: This is how every modern AI coding tool works — Cursor uses @file, Copilot uses #file, Cody uses @file. It gives users explicit control over what context the AI sees. The system is built with a "provider" architecture, meaning we can later add @selection (current code selection), @terminal (terminal output), and @errors (current diagnostics) without any rewiring.

6. Editor Tab Drag-and-Drop (was: only OS files worked)

Before: You could drag image files from your desktop into the chat, but dragging a file tab from the editor or a file from the file explorer did nothing.

After: You can now drag editor tabs and file explorer items directly into the chat. They appear as context chips (same as @mentions), and their content is sent with your next message.

Why it matters: Reduces friction. Users instinctively try to drag tabs into the chat — now it works.

7. Context Chips (was: invisible context)

Before: Users had no way to see what information was being sent to the AI with each message.

After: Below each user message, small pills now show what context was included: the active file name, the git branch, error count, attached images, and any @mentioned files. File chips are clickable — clicking one opens that file.

Why it matters: Transparency builds trust. When the AI gives a bad response, users can now see "oh, it was looking at the wrong file" instead of guessing. This feature was pioneered by Cody (Sourcegraph) and is now considered best practice.

Timeline

What Was Built (Technical Summary)

How to Test

1. Install the extension:

   cd apps/vitto-vscode-extension && npm run install:cursor
   

2. Reload: Cmd+Shift+P > Developer: Reload Window
3. Test each feature:
   • Drag a file from your desktop → see the overlay with Shift hint
   • Drag an editor tab into the chat → see it appear as a mention chip
   • Type @ in the chat → see file search dropdown
   • Send a message → see context chips below your message
   • Get a code response → see Copy, Insert, Terminal, Apply buttons
   • Click "Insert" → code appears at your cursor
   • Watch streaming → see the blinking caret
   • Check header buttons → see keyboard shortcut badges

What's Next (Future Phases)

These features were scoped out of v2 but are logical next steps:

Documents Produced

MCP Intelligence Captured