paseo/REPORT-new-agent-page-deep-comparison.md

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):

<AgentInputArea
  agentId={DRAFT_AGENT_ID}
  serverId={selectedServerId ?? ""}
  onSubmitMessage={handleCreateFromInput}
/>

Agent Screen ([agentId].tsx:687-688):

<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):

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:

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)

• Fix image attachments (early return removed)
• Fix creation failure display (error shown to user)
• Add error/loading states
• 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