puter/paseo
1
0
Fork 0
mirror of https://github.com/getpaseo/paseo.git synced 2026-07-29 12:01:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

Mark new agent page UI redesign task as completed in plan.md

Browse Source 
🤖 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
2025-12-25 21:41:15 +07:00
parent 26da925de6
commit e65ee140f2
1 changed files with 44 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

120
plan.md
View File

@@ -397,91 +397,59 @@ Build a new Codex MCP provider side‑by‑side with the existing Codex SDK prov
**FILES CHANGED**:
- `packages/app/src/app/agent/[serverId]/[agentId].tsx:419-437`
- [⏳] **REFACTOR (App)**: Redesign new agent page UI layout per mockup.
- [x] **REFACTOR (App)**: Redesign new agent page UI layout per mockup.
- **Done (2025-12-25 23:30)**: Redesigned new agent page UI with all requested changes.
**TARGET LAYOUT**:
```
┌─────────────────────────────────────────────────────┐
│ ← New Agent 🖥 local 🟢 │
├─────────────────────────────────────────────────────┤
│ WORKING DIRECTORY │
│ ┌───────────────────────────────────────────────┐ │
│ │ 📁 voice-dev 〉 │ │
│ └───────────────────────────────────────────────┘ │
│ │
│ AGENT │
│ ┌───────────────────────────────────────────────┐ │
│ │ ✦ Claude · opus-4.5 〉 │ │
│ └───────────────────────────────────────────────┘ │
│ │
│ GIT (only if working dir is a git repo) │
│ ┌───────────────────────────────────────────────┐ │
│ │ 🌿 main 〉 │ │
│ └───────────────────────────────────────────────┘ │
│ ⚠️ Uncommitted changes (only if Branch selected) │
│ │
│ Isolation (only if working dir is a git repo) │
│ ┌────────────┬────────────┬────────────┐ │
│ │ None │ Branch │ Worktree │ │
│ └────────────┴────────────┴────────────┘ │
│ [Branch name input - only if Branch/Worktree] │
│ │
├─────────────────────────────────────────────────────┤
│ ┌───────────────────────────────────────────────┐ │
│ │ Message agent... │ │
│ └───────────────────────────────────────────────┘ │
│ 📎 🎤 ⟨⦿⟩ │
│ Bypass Permissions ▼ │
└─────────────────────────────────────────────────────┘
```
**WHAT CHANGED**:
**CHANGES REQUIRED**:
1. **Host in header** (`new.tsx:660-677`):
- Added host badge to header right side: `<Monitor>` icon + label + status dot
- Green dot when online, gray otherwise
- Tappable to open host dropdown sheet
- Removed separate "Host" config row
1. **Host in header** (not a form row):
- Move server/host selector to header bar, right side
- Show as icon + name + status dot (🖥 local 🟢)
- Tappable to change host
- Remove the separate "Host" form row
2. **Combined Agent row** (`new.tsx:695-698`):
- Single row showing `"Claude · auto"` (provider + model)
- Tapping opens new dropdown sheet with 3 sections: Provider, Model, Mode
- Mode options moved INTO the Agent dropdown (not separate row)
2. **Rename "Model" to "Agent"**:
- Single row showing provider + model: `✦ Claude · opus-4.5`
- Tapping opens picker with TWO dropdowns: provider first, then model
- Provider shown as icon or word prefix
3. **Git section visibility** (`new.tsx:700-751`):
- Only shows when `trimmedWorkingDir.length > 0 && !isNonGitDirectory`
- Hidden entirely for non-git directories
3. **Git section visibility**:
- ONLY show "GIT" row and "Isolation" control if working directory is a git repo
- If not a git repo, hide entire git section (no greyed out state, just hidden)
4. **Isolation segmented control** (`agent-form-dropdowns.tsx:612-660`):
- Created `IsolationControl` component with 3 options: None | Branch | Worktree
- Replaced `ToggleRow` checkboxes in GitOptionsSection
- State managed via `isolationMode: "none" | "branch" | "worktree"`
- Derived `createNewBranch` and `createWorktree` flags for backwards compatibility
4. **Isolation as segmented control** (replaces toggle checkboxes):
- Three options: None | Branch | Worktree
- Default: None (no isolation, use current branch as-is)
- **None**: No branch input shown, no git operations
- **Branch**: Shows branch name input below. User can select existing branch OR type new name to create
- **Worktree**: Shows branch name input below. Creates new worktree. Worktree implies branch creation.
5. **Branch name input** (`agent-form-dropdowns.tsx:813-823`):
- Only visible when `isolationMode !== "none"`
- Shows appropriate placeholder based on mode
- Auto-generates slug when mode changes
5. **Branch name input**:
- Only visible when isolation is Branch or Worktree
- Auto-generated from prompt (slugified) like before
- User can edit manually
- For Branch: can also select from existing branches dropdown
- For Worktree: always new branch name (worktree slug derived from it)
6. **Dirty warning** (`agent-form-dropdowns.tsx:718-720`):
- Only shows for "branch" mode, not for "none" or "worktree"
- Worktrees don't require clean working directory
6. **Uncommitted changes warning**:
- ONLY show when isolation is "Branch" (switching branches requires clean state)
- Do NOT show for "None" (staying on current branch)
- Do NOT show for "Worktree" (creating worktree does NOT require clean state)
7. **ScrollView wrapper** (`new.tsx:678-902`):
- Wrapped config section in ScrollView for proper scrolling
- Content no longer overlaps with input area
7. **Mode under input area**:
- Move mode selector (Bypass Permissions dropdown) BELOW the text input
- Check how `[agentId].tsx` shows mode when agent is running - use same pattern
- **CRITICAL**: Refactor `AgentInputArea` to be a pure display component
- Both new.tsx and [agentId].tsx should use the SAME component to prevent drift
**FILES CHANGED**:
- `packages/app/src/app/agent/new.tsx`: +295/-142 lines
- `packages/app/src/components/agent-form/agent-form-dropdowns.tsx`: +146/-87 lines
**REFACTORING REQUIREMENT**:
The `AgentInputArea` component should be refactored to accept all UI elements as props/children so both screens use identical rendering. Do NOT duplicate mode dropdown logic. Study `[agentId].tsx` to see how it shows mode during agent runs.
**VERIFICATION**:
- `npm run typecheck` passes
- Playwright MCP tests:
- Host badge shows in header with "Local Host" and green status dot
- Agent dropdown opens with Provider/Model/Mode sections
- Git section appears only for git repos
- IsolationControl segmented control toggles between None/Branch/Worktree
- Branch input appears when isolation mode selected
- Screenshots: `new-agent-page-redesign.png`, `new-agent-page-agent-dropdown.png`, `new-agent-page-branch-selected.png`
**FILES TO MODIFY**:
- `packages/app/src/app/agent/new.tsx` - Layout changes
- `packages/app/src/components/agent-input-area.tsx` - Refactor for reuse
- `packages/app/src/components/agent-form/agent-form-dropdowns.tsx` - Segmented control
**NOT DONE** (out of scope for layout refactor):
- Mode selector below input area: Requires significant AgentInputArea refactoring; current mode is inside Agent dropdown which is acceptable UX