From 58769e7ece165330a94f11d743ad8496a367e164 Mon Sep 17 00:00:00 2001 From: Mohamed Boudra Date: Thu, 25 Dec 2025 21:04:06 +0700 Subject: [PATCH] Review new agent page vs old modal - produce specific fix tasks MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- REPORT-new-agent-page-deep-comparison.md | 203 +++++++++++++++++++++++ plan.md | 48 +++++- 2 files changed, 247 insertions(+), 4 deletions(-) create mode 100644 REPORT-new-agent-page-deep-comparison.md diff --git a/REPORT-new-agent-page-deep-comparison.md b/REPORT-new-agent-page-deep-comparison.md new file mode 100644 index 000000000..525681091 --- /dev/null +++ b/REPORT-new-agent-page-deep-comparison.md @@ -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 `` 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 + +``` + +**Agent Screen** (`[agentId].tsx:687-688`): +```tsx + +``` + +**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 +- `` 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 | diff --git a/plan.md b/plan.md index 93902d575..30143c038 100644 --- a/plan.md +++ b/plan.md @@ -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 `` 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`