Editor

┌─────────────────────────────────────────────────────────────┐
│  Menu Bar                                              ⚙️  │
├─────────────┬───────────────────────────────┬───────────────┤
│             │                               │               │
│   Explorer  │      Code Editor              │  Agent Panel  │
│             │                               │               │
│   Files     │   function hello() {          │  💬 Chat      │
│   ├─ src/   │     return "world";           │               │
│   ├─ lib/   │   }                           │  📋 Artifacts │
│   └─ ...    │                               │               │
│             │                               │  🔧 Tools     │
│             │                               │               │
├─────────────┴───────────────────────────────┴───────────────┤
│  Terminal / Output / Problems                               │
└─────────────────────────────────────────────────────────────┘

// Bạn gõ:
function calculateTotalPrice(items
 
// Tab suggests:
function calculateTotalPrice(items: CartItem[]): number {
  return items.reduce((total, item) => total + item.price * item.quantity, 0);
}

// Create a function that validates email format
// Agent generates:
function validateEmail(email: string): boolean {
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  return emailRegex.test(email);
}

// Refactor this to use async/await
fetch(url)
  .then(res => res.json())
  .then(data => console.log(data));
 
// Agent generates:
const response = await fetch(url);
const data = await response.json();
console.log(data);

@filename.ts - Reference entire file
@selection - Reference selected code

You: "Explain this function to me"
     @src/utils/auth.ts:25-40

Agent: "This function validateToken() does:
1. Decodes the JWT token
2. Checks expiration date
3. Verifies signature
4. Returns user payload or throws error"

// ❌ Vague
// make this better
 
// ✅ Specific
// refactor to use early return pattern and handle null case