Feature: Prompt Refine Button #478
Description
Feature: Prompt Refine Button
Summary: Add a style dropdown and refine button next to the Send button. Users select a refinement style, click Refine, review the diff, and submit or abandon. The original prompt is never lost.
Reference: Google Workspace pencil icon in Gems and Gmail.
UI Components
Main Input Area
| Element | Position | Behavior |
|---|---|---|
| Style dropdown | Left of Refine button | Selects refinement style before clicking Refine |
| Refine button | Just Left of Send button (close to it) | Opens confirmation modal (first time) or refinement popup |
| Send button | Right side | Sends prompt to model |
Confirmation Modal ("Refine your prompt?")
Appears on first click only. User can check "Don't show this again" to skip in future.
| Element | Position | Behavior |
|---|---|---|
| VS Code button | Top right header | Opens original prompt in VS Code |
| Cursor button | Top right header | Opens original prompt in Cursor |
| Style dropdown | Below description | Shows selected style with descriptions |
| "Don't show again" checkbox | Below dropdown | Stores preference in user profile |
| Cancel button | Bottom left | Returns to input |
| Refine button | Bottom right | Proceeds to refinement |
Refinement Popup
| Element | Position | Behavior |
|---|---|---|
| Diff view | Top section | Word-level changes with reason tooltips |
| Refresh button | Top left of textarea | Re-sends original prompt for new refinement |
| Copy button | Top right of textarea | Copies refined prompt to clipboard, shows toast |
| Editable textarea | Center | Allows editing refined prompt |
| Back button | Bottom left | Abandons refinement, returns to original prompt |
| Submit button | Bottom right | Sends refined prompt to model |
Style Options
Built-in Styles
| Style | Description |
|---|---|
| Concise | Shorter, removes redundancy |
| Detailed | Adds context and specificity |
| Technical | Adds precision for code tasks |
Codebase Agents (Auto-detected)
Scan main repo for agents at .claude/agents/{reponame}-dev.md.
Example: If main repo is platform, check for .claude/agents/platform-dev.md. If found, add "Platform Dev" as a style option with an "Agent" badge.
Detection runs when workspace loads. Cache result until workspace changes.
User Flow
- User types prompt in input field
- User selects style from dropdown (default: Concise)
- User clicks Refine button
- System checks
user.preferences.skipRefineConfirmation- If
false: Show confirmation modal with style dropdown and IDE buttons - If
true: Skip to step 5
- If
- System calls
POST /api/refine(does not count against message quota) - System displays refinement popup with diff view
- User takes one of these actions:
- Back: Return to original prompt in main input field (original never lost)
- Refresh: Re-send original prompt, get new refinement (also used as retry after errors)
- Copy: Copy refined text to clipboard, show toast
- Edit: Modify text in textarea
- Submit: Send refined prompt to model
API Contract
// Request
POST /api/refine
{
prompt: string;
style: 'concise' | 'detailed' | 'technical' | string;
agentPath?: string; // path to agent .md file if custom agent
}
// Response
{
refined: string;
changes: Array<{
type: 'addition' | 'deletion' | 'modification';
original?: string;
replacement?: string;
reason: string;
}>;
}Agent Detection
async function detectCodebaseAgents(mainRepo: Repo): Promise<Agent[]> {
const repoName = mainRepo.name;
const agentPath = `.claude/agents/${repoName}-dev.md`;
const exists = await mainRepo.fileExists(agentPath);
if (!exists) return [];
const content = await mainRepo.readFile(agentPath);
const frontmatter = parseFrontmatter(content);
return [{
name: frontmatter.name || `${repoName} Dev`,
path: agentPath,
description: frontmatter.description
}];
}IDE Integration
function openInIDE(ide: 'vscode' | 'cursor', content: string): void {
const tempFile = writeTempFile(content, 'prompt.md');
if (ide === 'vscode') {
exec(`code ${tempFile}`);
} else {
exec(`cursor ${tempFile}`);
}
}Supported IDEs:
- VS Code
- Cursor
Data Persistence
interface UserPreferences {
skipRefineConfirmation: boolean; // default: false
defaultRefineStyle: string; // default: 'concise'
}Original prompt stored in component state. Never overwritten until user clicks Submit.
Error Handling
| Error | User Message | UI Behavior |
|---|---|---|
| API timeout (10s) | "Refinement is taking too long. Click Refresh to try again." | Show message in popup, Refresh button retries |
| API failure (5xx) | "Something went wrong. Click Refresh to try again." | Show message in popup, Refresh button retries |
| API failure (4xx) | "Could not refine this prompt. Click Refresh to try again." | Show message in popup, Refresh button retries |
| Network error | "No connection. Check your network and click Refresh." | Show message in popup, Refresh button retries |
| VS Code not found | "Could not open VS Code." | Toast only, no install link |
| Cursor not found | "Could not open Cursor." | Toast only, no install link |
| Agent file malformed | Silent | Fall back to repo name, log warning |
| Copy failed | "Could not copy to clipboard." | Toast only |
When refinement fails, the popup displays:
- Error message (centered, friendly tone)
- Refresh button (prominent, acts as retry)
- Back button (still available)
No diff view or textarea shown during error state.
Toast Messages
| Action | Message |
|---|---|
| Copy success | "Copied to clipboard" |
| Copy failure | "Could not copy to clipboard." |
| VS Code failure | "Could not open VS Code." |
| Cursor failure | "Could not open Cursor." |
Use existing toast system.
Acceptance Criteria
Main Input Area:
- Style dropdown appears left of Refine button
- Refine button appears left of Send button
- Dropdown shows built-in styles (Concise, Detailed, Technical)
- Dropdown shows detected codebase agents with "Agent" badge
Codebase Agent Detection:
- Scans
.claude/agents/{reponame}-dev.mdin main repo only - Falls back to repo name if agent file malformed
- Caches result until workspace changes
Confirmation Modal:
- Appears on first Refine click only
- Shows VS Code and Cursor buttons with actual icons in header
- Shows style dropdown with descriptions for each option
- "Don't show again" checkbox persists preference across sessions
- Cancel returns to input, Refine proceeds to refinement
Refinement Popup:
- Displays word-level diff with reason tooltips on hover
- Refresh button re-sends original prompt (also acts as retry)
- Copy button copies refined text, shows toast
- Back button returns to original prompt (original never lost)
- Submit sends refined prompt to model
- Editable textarea allows modifying refined prompt
API & Quota:
- Refinement does not count against message quota
- Loading state during API call (initial and refresh)
- Timeout after 10s with friendly message
- API errors show friendly message with Refresh retry option
Error Handling:
- IDE errors show toast only (no install links)
- Copy errors show toast
- Agent file errors fail silently with fallback
Visual Mockup
┌─────────────────────────────────────────────────────────────────┐
│ │
│ [Type your prompt here...] │
│ │
├─────────────────────────────────────────────────────────────────┤
│ [Concise ▼] [✨ Refine] [Send →] │
└─────────────────────────────────────────────────────────────────┘
↓ Click Refine (first time)
┌─────────────────────────────────────────────────────────────────┐
│ ✨ Refine your prompt? [VSCode] [Cursor] │
├─────────────────────────────────────────────────────────────────┤
│ │
│ This will send your prompt to the AI to improve clarity and │
│ specificity. You can review and edit the result before sending.│
│ │
│ Refinement Style │
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ Concise ▼ │ │
│ └─────────────────────────────────────────────────────────┘ │
│ │
│ ☐ Don't show this again │
│ │
│ [Cancel] [Refine] │
└─────────────────────────────────────────────────────────────────┘
↓ Click Refine
┌─────────────────────────────────────────────────────────────────┐
│ Refined Prompt │
├─────────────────────────────────────────────────────────────────┤
│ Changes │
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ ~ write → Write (Capitalized for proper...) │ │
│ │ + TypeScript (Added language specificity) │ │
│ │ ~ a function → ... (Added explicit function name) │ │
│ └─────────────────────────────────────────────────────────┘ │
│ │
│ Refined Prompt [↻ Refresh] [📋] │
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ Write a TypeScript function named `sumNumbers` that │ │
│ │ accepts an array of numbers as input and returns their │ │
│ │ sum. Include parameter validation... │ │
│ └─────────────────────────────────────────────────────────┘ │
│ │
│ [← Back] [Submit →] │
└─────────────────────────────────────────────────────────────────┘
Icons
VS Code: Use official VS Code icon from https://code.visualstudio.com/assets/images/code-stable.png
Cursor: Use Cursor app icon (light/dark mode variants):
- Light mode:
APP_ICON_25D_LIGHT.png - Dark mode:
APP_ICON_25D_DARK.png
Out of Scope
- Diff view undo/redo (not included)
- Install links for missing IDEs (show error toast only)
- Refinement counting against message quota (explicitly excluded)