Review new agent page vs old modal - produce specific fix tasks
Deep comparison completed between: - new.tsx (600 lines) - new agent page - create-agent-modal.tsx (~2700 lines) - old modal - [agentId].tsx (1152 lines) - agent screen FINDINGS: 1. Loading state: Has isLoading but NO visual feedback (needs fix) 2. Input area styling: MATCHES (both use AgentInputArea) 3. Git options: MISSING (~200 lines) - needs feature task 4. Error handling: FIXED (all validation in place) 5. Visual parity: GOOD (verified with Playwright screenshots) Added specific fix tasks to plan: - FIX: Add visual loading indicator during creation - FEATURE: Add Git Options Section (base branch, new branch, worktree) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Mohamed Boudra
co-authored by
Claude Opus 4.5
Claude Opus 4.5
parent
a398f67527
commit
58769e7ece
@@ -0,0 +1,203 @@
|
||||
# Deep Comparison: New Agent Page vs Old Modal
|
||||
|
||||
**Date**: 2025-12-25
|
||||
**Files Compared**:
|
||||
- New: `packages/app/src/app/agent/new.tsx` (600 lines)
|
||||
- Old: `packages/app/src/components/create-agent-modal.tsx` (~2700 lines)
|
||||
- Reference: `packages/app/src/app/agent/[serverId]/[agentId].tsx` (1152 lines)
|
||||
|
||||
## Executive Summary
|
||||
|
||||
The new agent page (`/agent/new`) has addressed the critical bugs identified in the previous review. The remaining gaps are mostly **feature parity** issues (Git options) rather than bugs. The input area styling matches the agent screen well.
|
||||
|
||||
---
|
||||
|
||||
## 1. Loading State ✅ FIXED
|
||||
|
||||
**New Page** (`new.tsx:122-123, 228-229, 248-252, 291, 296-300`):
|
||||
- Has `isLoading` state variable
|
||||
- Prevents double-submit with `if (isLoading) { return; }`
|
||||
- Sets `setIsLoading(true)` before creation, `setIsLoading(false)` on completion/failure
|
||||
|
||||
**Old Modal** (`create-agent-modal.tsx:456, 1338, 1368, 1554, 1577, 2015-2024`):
|
||||
- Same pattern with `isLoading` state
|
||||
- Shows `<ActivityIndicator>` and "Creating..." text when loading
|
||||
- Disables button when `createDisabled` (includes `isLoading`)
|
||||
|
||||
**Gap**: The new page does NOT show a visual loading indicator. The button still says "send" and has no disabled styling.
|
||||
|
||||
### Fix Task Required
|
||||
```
|
||||
- [ ] **FIX (App)**: New agent page - add visual loading indicator during creation
|
||||
- `new.tsx`: Currently has `isLoading` state but no visual feedback
|
||||
- Add ActivityIndicator or "Creating..." text like old modal (`create-agent-modal.tsx:2015-2024`)
|
||||
- Disable the submit button visually when `isLoading` is true
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 2. Input Area Styling ✅ MATCHES
|
||||
|
||||
**Visual Comparison**: Both screens use the same `AgentInputArea` component.
|
||||
|
||||
**New Page** (`new.tsx:468-472`):
|
||||
```tsx
|
||||
<AgentInputArea
|
||||
agentId={DRAFT_AGENT_ID}
|
||||
serverId={selectedServerId ?? ""}
|
||||
onSubmitMessage={handleCreateFromInput}
|
||||
/>
|
||||
```
|
||||
|
||||
**Agent Screen** (`[agentId].tsx:687-688`):
|
||||
```tsx
|
||||
<AgentInputArea agentId={resolvedAgentId} serverId={serverId} />
|
||||
```
|
||||
|
||||
**Playwright Verification**: Screenshots show identical input area styling:
|
||||
- Same gray rounded input box
|
||||
- Same button layout (attachment, mic, realtime)
|
||||
- Same spacing and padding
|
||||
|
||||
**Result**: No fix needed - styling matches.
|
||||
|
||||
---
|
||||
|
||||
## 3. Git Options ❌ MISSING (~200 lines)
|
||||
|
||||
The old modal has a complete Git configuration section that is entirely absent from the new page.
|
||||
|
||||
**Old Modal Features** (`create-agent-modal.tsx:1936-1993`):
|
||||
1. **Base branch dropdown** - Select which branch to base work on
|
||||
2. **Create new branch toggle** - Checkbox + branch name input
|
||||
3. **Create worktree toggle** - Checkbox + worktree slug input
|
||||
4. **Git validation errors** - Shows blocking errors (`gitBlockingError`)
|
||||
5. **Dirty directory warnings** - Warns about uncommitted changes
|
||||
6. **Non-git directory detection** - Disables git options gracefully
|
||||
|
||||
**Git State Variables** (`create-agent-modal.tsx:448-454`):
|
||||
```tsx
|
||||
const [baseBranch, setBaseBranch] = useState("");
|
||||
const [createNewBranch, setCreateNewBranch] = useState(false);
|
||||
const [branchName, setBranchName] = useState("");
|
||||
const [createWorktree, setCreateWorktree] = useState(false);
|
||||
const [worktreeSlug, setWorktreeSlug] = useState("");
|
||||
```
|
||||
|
||||
**Git Validation Logic** (`create-agent-modal.tsx:1653-1707`):
|
||||
- Validates branch name format
|
||||
- Validates worktree slug format
|
||||
- Checks for uncommitted changes + checkout intent
|
||||
- Returns blocking error or null
|
||||
|
||||
**New Page**: Has NONE of these. The `createAgent` call only includes:
|
||||
```tsx
|
||||
const config: AgentSessionConfig = {
|
||||
provider: selectedProvider,
|
||||
cwd: trimmedPath,
|
||||
...(modeId ? { modeId } : {}),
|
||||
...(trimmedModel ? { model: trimmedModel } : {}),
|
||||
};
|
||||
```
|
||||
|
||||
### Fix Task Required
|
||||
```
|
||||
- [ ] **FEATURE (App)**: New agent page - add Git Options Section
|
||||
- Port `GitOptionsSection` component usage from old modal
|
||||
- Add state: baseBranch, createNewBranch, branchName, createWorktree, worktreeSlug
|
||||
- Add git repo info request hook (already exists in old modal)
|
||||
- Add gitBlockingError validation
|
||||
- Pass git options to createAgent call
|
||||
- Reference: create-agent-modal.tsx:1936-1993 (UI), 1653-1707 (validation), 1388-1401 (createAgent call)
|
||||
- Estimated: ~200 lines of code
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 4. Error Handling ✅ FIXED
|
||||
|
||||
**New Page** (`new.tsx:122, 213-234, 289-292, 461-464`):
|
||||
- Has `errorMessage` state
|
||||
- Validates: working directory, prompt, host selection, connection
|
||||
- Shows creation failure errors from server
|
||||
- Displays error in styled container
|
||||
|
||||
**Comparison to Old Modal**:
|
||||
| Check | Old Modal | New Page |
|
||||
|-------|-----------|----------|
|
||||
| Working dir empty | ✅ | ✅ |
|
||||
| Prompt empty | ✅ | ✅ |
|
||||
| No host selected | ✅ | ✅ |
|
||||
| Host offline | ✅ | ✅ (line 233) |
|
||||
| Creation failed | ✅ | ✅ (line 289-292) |
|
||||
| Git validation | ✅ | ❌ (no git options) |
|
||||
|
||||
**Result**: Error handling is complete for current features. Git errors will come with Git feature.
|
||||
|
||||
---
|
||||
|
||||
## 5. Visual Parity ✅ GOOD
|
||||
|
||||
**Playwright Screenshots Analysis**:
|
||||
|
||||
| Element | New Page | Agent Screen | Match? |
|
||||
|---------|----------|--------------|--------|
|
||||
| Header | "New Agent" title + back arrow | Agent title + back arrow + menu | ✅ Similar |
|
||||
| Config rows | Card style with chevron | N/A (agent screen has no config) | ✅ Appropriate |
|
||||
| Input area | Gray rounded box | Gray rounded box | ✅ Identical |
|
||||
| Button row | Attachment, mic, realtime | Same + status bar | ✅ Matches |
|
||||
| Error display | Red background container | N/A | ✅ Styled |
|
||||
|
||||
**Minor Styling Notes**:
|
||||
- New page config rows use card styling that looks clean
|
||||
- Input placeholder "Message agent..." is consistent
|
||||
- Colors match the theme
|
||||
|
||||
---
|
||||
|
||||
## 6. Dead Code ✅ ALREADY FIXED
|
||||
|
||||
Per the previous review task completion, the dead `CreateAgentModal` code in `home-footer.tsx` has been cleaned up:
|
||||
- `showCreateModal` state (line 25) - REMOVED
|
||||
- `<CreateAgentModal>` component (lines 206-209) - REMOVED
|
||||
|
||||
---
|
||||
|
||||
## Summary of Required Fix Tasks
|
||||
|
||||
### P1 - Should Fix Soon
|
||||
```
|
||||
- [ ] **FIX (App)**: New agent page - add visual loading indicator during creation
|
||||
Location: new.tsx
|
||||
Issue: Has isLoading state but no visual feedback (button doesn't show loading, no spinner)
|
||||
Fix: Add ActivityIndicator when isLoading, change button text to "Creating...", disable button visually
|
||||
Effort: ~20 lines
|
||||
```
|
||||
|
||||
### P2 - Feature Parity
|
||||
```
|
||||
- [ ] **FEATURE (App)**: New agent page - add Git Options Section
|
||||
Location: new.tsx
|
||||
Issue: Missing base branch, new branch, worktree options from old modal
|
||||
Fix: Port GitOptionsSection and related state/validation from create-agent-modal.tsx
|
||||
Effort: ~200 lines
|
||||
Reference: create-agent-modal.tsx:1388-1401, 1653-1707, 1936-1993
|
||||
```
|
||||
|
||||
### Already Completed (Previous Task)
|
||||
- [x] Fix image attachments (early return removed)
|
||||
- [x] Fix creation failure display (error shown to user)
|
||||
- [x] Add error/loading states
|
||||
- [x] Remove dead CreateAgentModal code
|
||||
|
||||
---
|
||||
|
||||
## Files Reference
|
||||
|
||||
| File | Lines | Purpose |
|
||||
|------|-------|---------|
|
||||
| `new.tsx` | 600 | New agent page |
|
||||
| `create-agent-modal.tsx` | 2700 | Old modal (reference for git options) |
|
||||
| `[agentId].tsx` | 1152 | Agent screen (reference for styling) |
|
||||
| `agent-input-area.tsx` | 1287 | Shared input component |
|
||||
| `agent-form-dropdowns.tsx` | - | Shared dropdown components |
|
||||
@@ -292,7 +292,47 @@ Build a new Codex MCP provider side‑by‑side with the existing Codex SDK prov
|
||||
| P2 | Git Options Section | ~200 lines |
|
||||
|
||||
**FOLLOW-UP TASKS NEEDED**:
|
||||
- [ ] **FIX (App)**: New agent page - fix image attachments (remove early return, wire images to createAgent)
|
||||
- [ ] **FIX (App)**: New agent page - add error/loading states and failure display
|
||||
- [ ] **FEATURE (App)**: New agent page - add Git Options Section
|
||||
- [ ] **CLEANUP (App)**: Remove dead CreateAgentModal code from home-footer.tsx
|
||||
- [x] **REVIEW (App)**: Deep comparison of new agent page vs old modal - produce specific fix tasks.
|
||||
- **Done (2025-12-25 23:59)**: Completed deep comparison. See `REPORT-new-agent-page-deep-comparison.md` for full analysis.
|
||||
|
||||
**FINDINGS**:
|
||||
1. **Loading state**: Has `isLoading` state but NO visual feedback (no spinner, button doesn't change)
|
||||
2. **Input area styling**: ✅ MATCHES - Both use same `AgentInputArea` component, verified with Playwright screenshots
|
||||
3. **Git options**: ❌ MISSING - Entire Git section (~200 lines) absent: base branch, new branch, worktree
|
||||
4. **Error handling**: ✅ FIXED - Validates all inputs, shows creation failures, daemon offline errors
|
||||
5. **Visual parity**: ✅ GOOD - Config rows styled well, input area identical to agent screen
|
||||
|
||||
**PREVIOUS FIXES VERIFIED** (from task above):
|
||||
- Image attachments: Fixed (early return removed, warning logged)
|
||||
- Error/loading states: Fixed (errorMessage state, isLoading state)
|
||||
- Creation failure display: Fixed (setErrorMessage on agent_create_failed)
|
||||
- Dead code cleanup: Fixed (CreateAgentModal removed from home-footer.tsx)
|
||||
|
||||
**FILES REVIEWED**:
|
||||
- `packages/app/src/app/agent/new.tsx:122-123, 228-252, 289-292, 461-472`
|
||||
- `packages/app/src/components/create-agent-modal.tsx:448-454, 1388-1401, 1653-1707, 1936-1993, 2015-2024`
|
||||
- `packages/app/src/app/agent/[serverId]/[agentId].tsx:687-688`
|
||||
- Playwright screenshots: `new-agent-page.png`, `existing-agent-screen.png`
|
||||
|
||||
- [ ] **FIX (App)**: New agent page - add visual loading indicator during creation
|
||||
- Location: `new.tsx`
|
||||
- Issue: Has `isLoading` state (line 123) but no visual feedback
|
||||
- Fix: When `isLoading` is true:
|
||||
1. Show `<ActivityIndicator>` in submit button area
|
||||
2. Change submit icon/text to indicate loading
|
||||
3. Disable submit button visually (opacity, non-clickable)
|
||||
- Reference: `create-agent-modal.tsx:2015-2024` for loading button pattern
|
||||
|
||||
- [ ] **FEATURE (App)**: New agent page - add Git Options Section
|
||||
- Location: `new.tsx`
|
||||
- Issue: Missing ~200 lines of git configuration from old modal
|
||||
- What's missing:
|
||||
- State: baseBranch, createNewBranch, branchName, createWorktree, worktreeSlug
|
||||
- UI: `GitOptionsSection` component with toggles and inputs
|
||||
- Validation: `gitBlockingError` logic for branch names, dirty directories
|
||||
- Request: `useDaemonRequest` for `git_repo_info_request`
|
||||
- Reference files:
|
||||
- UI: `create-agent-modal.tsx:1936-1993`
|
||||
- Validation: `create-agent-modal.tsx:1653-1707`
|
||||
- State: `create-agent-modal.tsx:448-454`
|
||||
- createAgent call: `create-agent-modal.tsx:1388-1401`
|
||||
|
||||
Reference in New Issue
Block a user