UI Feedback Demonstration

This document demonstrates the new real-time feedback mechanism for package installation and command execution in the E2B sandbox UI.

What's New

1. Real-time Package Installation Feedback

When packages are detected and installed from XML tags, users now see:

🔍 Initial Analysis: "Analyzing code and detecting dependencies..."
📦 Package Detection: "Step 1: Installing X packages..."
NPM Output: Real-time npm install output with proper formatting
- Blue text for commands ($ npm install react-router-dom)
- Gray text for standard output
- Red text for errors
✅ Success Messages: Clear confirmation when packages are installed

2. File Creation Progress

📝 File Creation Start: "Creating X files..."
Individual File Updates: Progress for each file being created/updated
✅ Completion Status: Visual confirmation for each file

3. Command Execution Feedback

When <command> tags are executed:

⚡ Command Start: Shows the command being executed
Real-time Output: Displays stdout/stderr as it happens
✅/❌ Exit Status: Clear success/failure indicators

Example Flow

Here's what users see when applying code with packages and commands:

🔍 Analyzing code and detecting dependencies...
📦 Starting code application...
Step 1: Installing 3 packages...
$ npm install react-router-dom
> added 3 packages in 2.3s
$ npm install axios
> added 1 package in 1.1s
$ npm install @heroicons/react
> added 1 package in 0.9s
✅ Successfully installed: react-router-dom, axios, @heroicons/react

Step 2: Creating 5 files...
📝 Creating 5 files...

Step 3: Executing 1 commands...
⚡ executing command: npm run dev
> app@0.0.0 dev
> vite
> VITE ready in 523ms
✅ Command completed successfully

UI Components

Chat Message Types

The UI now supports these message types with distinct styling:

System Messages (bg-[#36322F] text-white text-sm)
- General information and status updates
Command Messages (bg-gray-100 text-gray-600 font-mono text-sm)
- Input commands: Blue prefix ($)
- Output: Gray text
- Errors: Red text
- Success: Green text
User Messages (bg-[#36322F] text-white)
- User input and queries
AI Messages (bg-secondary text-foreground)
- AI responses

Visual Indicators

🔍 Analyzing/Detection phase
📦 Package operations
📝 File operations
⚡ Command execution
✅ Success states
❌ Error states
⚠️ Warnings

Implementation Details

Streaming Response Format

The new /api/apply-ai-code-stream endpoint sends Server-Sent Events:

data: {"type": "start", "message": "Starting code application...", "totalSteps": 3}
data: {"type": "step", "step": 1, "message": "Installing 3 packages..."}
data: {"type": "package-progress", "type": "output", "message": "added 3 packages"}
data: {"type": "file-progress", "current": 1, "total": 5, "fileName": "App.jsx"}
data: {"type": "command-output", "command": "npm run dev", "output": "VITE ready", "stream": "stdout"}
data: {"type": "complete", "results": {...}, "message": "Success"}

Error Handling

Errors are displayed inline with context:

Package installation failures
File creation errors
Command execution failures

Each error includes the specific operation that failed and helpful error messages.

Benefits

Transparency: Users see exactly what's happening in real-time
Debugging: Easy to identify where issues occur
Progress Tracking: Clear indication of progress through multi-step operations
Professional Feel: Terminal-like output for technical operations
Accessibility: Color-coded output for quick scanning

Usage

The feedback system automatically activates when:

Code with <package> or <packages> tags is applied
Files are created or updated
Commands from <command> tags are executed
Packages are auto-detected from import statements

No additional configuration is required - the UI automatically provides rich feedback for all operations.

4.0 KiB Raw Blame History