Skip to content

feat(ui): redesign entry surfaces + remote machine - #44

Merged
dvaJi merged 3 commits into
masterfrom
feat/entry-surfaces-redesign
Aug 7, 2026
Merged

dvaJi merged 3 commits into
masterfrom
feat/entry-surfaces-redesign

Conversation

@dvaJi

@dvaJi dvaJi commented Aug 7, 2026

Copy link
Copy Markdown
Owner

Summary

Redesigns the app's entry surfaces to a Linear/Vercel-grade language and adds the add-remote-machine flow.

  • WelcomePage: onboarding checklist layout, hairline provider grid, cyan accent discipline, click-block fix via drag-region classes
  • AgentWelcomePage: theme-aware logo tile, hairline agent grid, primary empty-state action, brand wordmark backdrop
  • NewThreadPage: opencode-style giant brand wordmark backdrop behind the centered composer; machine + project meta folded into a single quiet row under the input
  • Polish shared across surfaces: entrance stagger, keyboard focus rings, overflow isolation, reduced motion honored
  • Remote machine: add AddRemoteMachineDialog rendering + remoteSetup store, wired in MainLayout

Scope

Only staged changes were included (14 files). Skills files, skills-lock.json, and feature docs remain out of this PR.

Summary by CodeRabbit

  • New Features

    • Added a streamlined remote workspace setup and recovery flow.
    • Added centralized remote workspace dialog handling, including save and save-and-switch actions.
    • Redesigned onboarding with progress tracking, setup steps, provider configuration, and ACP connection options.
    • Refreshed welcome screens with responsive layouts, themed branding, agent management, and empty states.
  • Improvements

    • Simplified workspace, chat, image, and file context-menu interactions.
    • Removed distracting UI animations from sidebar width and chat layout changes.
    • Improved remote pairing instructions, progress feedback, and form usability.

Copilot AI lite review requested due to automatic review settings August 7, 2026 00:14
@coderabbitai

coderabbitai Bot commented Aug 7, 2026

Copy link
Copy Markdown

Review Change Stack

Warning

Review limit reached

@dvaJi, you've reached your PR review limit, so we couldn't start this review.

Next review available in: 30 minutes

You've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository.

How can I continue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews.

How do review limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window.

Please refer docs for additional details.

Review details
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: c403bd48-1b8c-4443-9724-ffa72049a4db

📥 Commits

Reviewing files that changed from the base of the PR and between 4e85310 and f767947.

📒 Files selected for processing (12)
  • docs/features/welcome-page-redesign/plan.md
  • docs/features/welcome-page-redesign/spec.md
  • docs/features/welcome-page-redesign/tasks.md
  • packages/ui/src/components/WorkspaceSelector.tsx
  • packages/ui/src/components/brand/BrandWordmark.tsx
  • packages/ui/src/components/workspace/RemoteWorkspaceSetup.tsx
  • packages/ui/src/components/workspace/WorkspaceSelectorDialogs.tsx
  • packages/ui/src/lib/pageMotion.ts
  • packages/ui/src/pages/AgentWelcomePage.tsx
  • packages/ui/src/pages/NewThreadPage.tsx
  • packages/ui/src/pages/WelcomePage.tsx
  • packages/ui/src/stores/ui/remoteSetup.ts
📝 Walkthrough

Walkthrough

The PR centralizes remote workspace setup through a shared store and global dialog. It restructures pairing instructions, updates onboarding and page layouts, changes menu actions to use click handlers, and removes selected UI transitions.

Changes

Remote setup flow

Layer / File(s) Summary
Remote setup store contract
packages/ui/src/stores/ui/remoteSetup.ts
Adds shared dialog state, recovery data, handler registration, save operations, and the useRemoteSetupStore hook.
Shared remote setup integration
packages/ui/src/components/WorkspaceSelector.tsx, packages/ui/src/components/workspace/WorkspaceSelectorDialogs.tsx, packages/ui/src/routes/_main.tsx
Routes remote setup, recovery, saving, and switching through the shared store and global dialog.
Remote pairing and instructions views
packages/ui/src/components/workspace/RemoteWorkspaceSetup.tsx
Replaces shadcn Tabs with standalone view state and a custom toggle. Updates pairing progress, form disabling, review layout, and instructions.
Onboarding and page layouts
packages/ui/src/pages/WelcomePage.tsx, packages/ui/src/pages/AgentWelcomePage.tsx, packages/ui/src/pages/NewThreadPage.tsx
Redesigns onboarding, agent welcome, and new-thread layouts with updated progress, branding, controls, and empty states.
Menu interaction and shell styling
packages/ui/src/components/chat/*, packages/ui/src/components/message/*, packages/ui/src/components/workspace/WorkspaceFileNode.tsx, packages/ui/src/components/WindowSideBar.tsx
Changes menu actions from onSelect to onClick and removes sidebar and chat padding transitions.

Estimated code review effort: 4 (Complex) | ~45 minutes

Sequence Diagram(s)

sequenceDiagram
  participant WorkspaceSelector
  participant remoteSetup
  participant AddRemoteMachineDialog
  participant RemoteWorkspaceSetup
  WorkspaceSelector->>remoteSetup: Open shared remote dialog
  remoteSetup->>AddRemoteMachineDialog: Provide dialog state and handlers
  AddRemoteMachineDialog->>RemoteWorkspaceSetup: Render setup view
  RemoteWorkspaceSetup->>remoteSetup: Save workspace draft
  remoteSetup->>WorkspaceSelector: Invoke registered save handler
  remoteSetup->>AddRemoteMachineDialog: Close dialog
Loading

Possibly related PRs

  • dvaJi/argos#35: Introduces the pairing-first remote-machine and shared setup-store flows extended here.
  • dvaJi/argos#36: Overlaps with the remote setup and ACP UI files changed in this PR.
  • dvaJi/argos#43: Overlaps with the menu, workspace, sidebar, and chat components changed here.

Suggested reviewers: copilot

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title clearly summarizes the main changes: redesigned entry surfaces and the remote machine flow.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
✨ Finishing Touches 💡 1
📝 Generate docstrings 💡
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch feat/entry-surfaces-redesign

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@github-actions

github-actions Bot commented Aug 7, 2026

Copy link
Copy Markdown

React Doctor found no new issues. 🎉

Reviewed by React Doctor for commit f767947.

@greptile-apps

greptile-apps Bot commented Aug 7, 2026

Copy link
Copy Markdown

Confidence Score: 4/5

The remote-machine dialog lifecycle defect should be fixed before merging because collapsing the sidebar can replace an active setup flow with an empty dialog.

The global dialog remains open after its sidebar-owned handlers are cleared, causing its entire setup component and in-progress local state to be unmounted.

Files Needing Attention: packages/ui/src/components/workspace/WorkspaceSelectorDialogs.tsx, packages/ui/src/components/WorkspaceSelector.tsx, packages/ui/src/stores/ui/remoteSetup.ts

Important Files Changed

Filename Overview
packages/ui/src/components/workspace/WorkspaceSelectorDialogs.tsx Globalizes the remote-machine dialog, but conditionally removes its setup content when sidebar-owned handlers disappear.
packages/ui/src/components/WorkspaceSelector.tsx Registers remote setup handlers through component lifecycle, coupling the global dialog to a conditionally mounted sidebar control.
packages/ui/src/stores/ui/remoteSetup.ts Adds global dialog state and save dispatch, but clearing handlers does not reconcile the dialog's open state.
packages/ui/src/components/workspace/RemoteWorkspaceSetup.tsx Restyles and reorganizes the pairing, review, and instruction views while retaining the existing pairing workflow.
packages/ui/src/pages/WelcomePage.tsx Replaces the onboarding coachmark with a progress checklist and direct step navigation.
packages/ui/src/pages/NewThreadPage.tsx Redesigns the new-thread surface and consolidates machine and project metadata beneath the composer.
packages/ui/src/pages/AgentWelcomePage.tsx Adds theme-aware branding, a redesigned agent grid, and an actionable empty state.
packages/ui/src/routes/_main.tsx Mounts the remote-machine dialog globally within MainLayout.

Fix All in Codex

Prompt To Fix All With AI
### Issue 1
packages/ui/src/components/workspace/WorkspaceSelectorDialogs.tsx:51-59
**Sidebar collapse empties setup dialog**

When the sidebar is collapsed while remote-machine setup is open, `WorkspaceSelector` unmounts and clears the handlers, so this condition removes `RemoteWorkspaceSetup` while the global dialog remains open, leaving an empty dialog and discarding the active pairing or review state.

---

For each issue above, determine whether it is valid and should be fixed. If so, fix it directly.

Reviews (1): Last reviewed commit: "feat(ui): redesign entry surfaces + remo..." | Re-trigger Greptile

Comment on lines +51 to +59
{handlers && (
<RemoteWorkspaceSetup
existingRemoteUrls={handlers.remoteUrls}
initialRemoteUrl={remoteSetup.recoveryWorkspace?.remoteUrl}
onAddWorkspace={remoteSetup.saveWorkspace}
onSaveAndSwitch={handlers.onSaveAndSwitch ? remoteSetup.saveWorkspaceAndSwitch : undefined}
onCancel={remoteSetup.closeRemoteDialog}
/>
)}

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P1 Sidebar collapse empties setup dialog

When the sidebar is collapsed while remote-machine setup is open, WorkspaceSelector unmounts and clears the handlers, so this condition removes RemoteWorkspaceSetup while the global dialog remains open, leaving an empty dialog and discarding the active pairing or review state.

Prompt To Fix With AI
This is a comment left during a code review.
Path: packages/ui/src/components/workspace/WorkspaceSelectorDialogs.tsx
Line: 51-59

Comment:
**Sidebar collapse empties setup dialog**

When the sidebar is collapsed while remote-machine setup is open, `WorkspaceSelector` unmounts and clears the handlers, so this condition removes `RemoteWorkspaceSetup` while the global dialog remains open, leaving an empty dialog and discarding the active pairing or review state.

---

For each issue above, determine whether it is valid and should be fixed. If so, fix it directly.

Fix in Codex

Copy link
Copy Markdown
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed in 785777f. WorkspaceSelector no longer calls remoteSetup.clearHandlers() on unmount, so handlers stay registered for the app lifetime — AddRemoteMachineDialog (rendered in MainLayout) keeps its body and pairing/review state when the sidebar is collapsed. WorkspaceSelectorDialogs.tsx also renders a non-empty fallback body when handlers is null.

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 8

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)
packages/ui/src/components/WorkspaceSelector.tsx (1)

169-180: 🎯 Functional Correctness | 🟠 Major | ⚡ Quick win

Mark an accepted re-pairing as paired.

Line 180 retains identity-changed after the user pairs successfully with a new verified identity. handleSwitch at Lines 225-230 then always reopens the pairing dialog. The user must pair twice before the workspace becomes selectable.

After the user reviews and saves the new credential, set trustState to "paired".

Proposed fix
-        trustState: identityChanged ? "identity-changed" : workspace.credentialRef ? "paired" : "pairing-required",
+        trustState: workspace.credentialRef ? "paired" : "pairing-required",
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@packages/ui/src/components/WorkspaceSelector.tsx` around lines 169 - 180,
Update the workspace state update in the identity-change handling around
identityChanged so a successfully saved new credential sets trustState to
"paired" instead of retaining "identity-changed". Preserve the existing
pairing-required behavior when no credential is present and the paired behavior
for normal credentialed updates.
🧹 Nitpick comments (5)
packages/ui/src/pages/NewThreadPage.tsx (2)

793-802: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value

Remove the redundant live-region attribute.

role="status" already implies aria-live="polite". The machine name changes rarely. The duplicate attribute adds no value. Keep role="status" only.

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@packages/ui/src/pages/NewThreadPage.tsx` around lines 793 - 802, Remove the
redundant aria-live="polite" attribute from the span identified by
data-testid="new-thread-active-machine" in the NewThreadPage component,
preserving role="status" and the existing machine-name content.

823-857: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value

Align the group label with the group contents and bound the list.

Two points:

  1. DropdownMenuLabel says "Recent Projects", but the group also contains "No Project" and "Open Folder". Move those two items outside the group, or rename the label.
  2. Line 834 maps every entry in projectState.projects. The list is not truncated. A user with many projects gets a very long menu. Apply a slice for the recent list.
♻️ Proposed change
-              <DropdownMenuGroup>
-                <DropdownMenuLabel className="text-xs">Recent Projects</DropdownMenuLabel>
-                <DropdownMenuItem
+              <DropdownMenuItem
                   data-testid="new-thread-clear-project"
                   className="gap-2 text-xs py-1.5 px-2"
                   disabled={!canClearProjectSelection}
                   onClick={clearSelectedProject}
                 >
                   <span>No Project</span>
-                </DropdownMenuItem>
-                <DropdownMenuSeparator />
-                {projectState.projects.map((project) => (
+              </DropdownMenuItem>
+              <DropdownMenuSeparator />
+              <DropdownMenuGroup>
+                <DropdownMenuLabel className="text-xs">Recent Projects</DropdownMenuLabel>
+                {projectState.projects.slice(0, RECENT_PROJECT_LIMIT).map((project) => (
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@packages/ui/src/pages/NewThreadPage.tsx` around lines 823 - 857, Update the
dropdown around the Recent Projects group so its label covers only project
entries: move the “No Project” and “Open Folder” items outside the labeled
group, or rename the label to reflect all contents. In the
projectState.projects.map rendering, limit displayed entries with the
established recent-list bound by slicing the collection before mapping.
packages/ui/src/pages/WelcomePage.tsx (1)

47-47: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

Duplicated entranceClass constant in both welcome pages. Both files declare the same module-level animation class string, and both use camelCase for a constant. The shared root cause is a missing shared definition.

  • packages/ui/src/pages/WelcomePage.tsx#L47-L47: remove the local declaration, import the shared constant, and use SCREAMING_SNAKE_CASE at the definition site.
  • packages/ui/src/pages/AgentWelcomePage.tsx#L13-L13: remove the local declaration and import the same shared constant.

As per coding guidelines: "Use PascalCase for React components, camelCase for variables and functions, PascalCase for types and classes, and SCREAMING_SNAKE_CASE for constants."

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@packages/ui/src/pages/WelcomePage.tsx` at line 47, Extract the duplicated
entrance animation string into one shared SCREAMING_SNAKE_CASE constant, then
remove the local declaration and import/use that shared constant in
packages/ui/src/pages/WelcomePage.tsx:47-47 and
packages/ui/src/pages/AgentWelcomePage.tsx:13-13. Ensure both pages reference
the same definition.

Source: Coding guidelines

packages/ui/src/pages/AgentWelcomePage.tsx (2)

16-17: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value

Use one store hook for both subscriptions.

useSelector(agentStore, (s) => s) returns the whole state. The selector adds no narrowing and defeats the purpose of useSelector. Line 17 already uses useStore. Use useStore(agentStore) for consistency, or select only agents.

♻️ Proposed change
-  const agentState = useSelector(agentStore, (s) => s);
+  const agentState = useStore(agentStore);
   const theme = useStore(themeStore);

Remove useSelector from the import at line 2 if it becomes unused.

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@packages/ui/src/pages/AgentWelcomePage.tsx` around lines 16 - 17, Replace the
whole-state useSelector call assigned to agentState with useStore(agentStore),
matching the existing themeStore subscription; remove the unused useSelector
import from AgentWelcomePage.

35-42: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

Extract the decorative wordmark into a shared component.

The same wordmark markup exists in packages/ui/src/pages/NewThreadPage.tsx at lines 742-749. Only the top-* offset differs. Extract one component that accepts the offset as a prop.

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@packages/ui/src/pages/AgentWelcomePage.tsx` around lines 35 - 42, Extract the
duplicated decorative “argos” wordmark markup from AgentWelcomePage and
NewThreadPage into a shared component. Add a prop for the differing top offset,
preserve all existing styling and accessibility attributes, and update both
pages to render the shared component with their respective offsets.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@packages/ui/src/components/workspace/WorkspaceSelectorDialogs.tsx`:
- Around line 37-43: Update the remote setup dialog’s onOpenChange handler and
dismissal flow around pendingWorkspace.credentialRef to invoke
discardPendingCredential before every dialog close, including direct dismissal
during review. Keep the pending credential intact when the save operation
succeeds, and preserve the existing form Cancel and review Back behavior without
duplicating cleanup.

In `@packages/ui/src/pages/AgentWelcomePage.tsx`:
- Around line 55-56: Update AgentWelcomePage’s displayedAgents rendering so
users with more than nine enabled agents can access the remaining agents: add a
visible overflow count or a “show all” control associated with the truncated
list, and wire it to reveal or navigate to the full agent set while preserving
the existing grid behavior for up to nine agents.

In `@packages/ui/src/pages/NewThreadPage.tsx`:
- Around line 737-741: Update the root layout around guideRootRef in
NewThreadPage so short viewports do not clip the notice, chat input,
machine/project row, or ChatStatusBar. Preserve the wordmark’s horizontal
clipping by replacing the broad overflow rule with horizontal clipping and add a
dedicated vertical scroll container for the content, following the
AgentWelcomePage pattern.
- Around line 816-820: Update the warning spans in the NewThreadPage rendering
blocks, including the repeated block near the second occurrence, to provide an
accessible label describing the missing or unavailable project while marking the
⚠ glyph as decorative. Do not rely on the span title alone; ensure assistive
technology receives the label through the warning element’s accessibility
attributes.

In `@packages/ui/src/pages/WelcomePage.tsx`:
- Around line 230-238: Add the established keyboard focus classes
focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring/60 to
every interactive control in WelcomePage.tsx, including the skip control
identified by welcome-guide-expert-action, the primary action, step-list
buttons, provider tiles, and ACP card. Apply the same styling consistently
without changing their existing behavior.
- Around line 100-103: Update the completedStepCount calculation in WelcomePage
to count steps with either "completed" or "skipped" status, matching the
terminal-state handling in stepStatusIcon. Keep other progress-counting behavior
unchanged so skipped steps contribute to the total and allow the progress
display to reach completion.
- Around line 277-288: Add an accessible name to the progressbar in the
WelcomePage component, using the page’s existing localization or labeling
conventions. Ensure aria-valuemax is always a valid positive maximum when
guideSteps is empty, while preserving the current zero-width behavior and
completed-step calculations.
- Line 336: Update the entrance blocks in WelcomePage, including the div using
entranceClass and animationDelay, to disable animations and reset delays when
prefers-reduced-motion is enabled. Apply the existing motion-reduce utility or
equivalent reduced-motion CSS while preserving the current staggered behavior
for users without the preference.

---

Outside diff comments:
In `@packages/ui/src/components/WorkspaceSelector.tsx`:
- Around line 169-180: Update the workspace state update in the identity-change
handling around identityChanged so a successfully saved new credential sets
trustState to "paired" instead of retaining "identity-changed". Preserve the
existing pairing-required behavior when no credential is present and the paired
behavior for normal credentialed updates.

---

Nitpick comments:
In `@packages/ui/src/pages/AgentWelcomePage.tsx`:
- Around line 16-17: Replace the whole-state useSelector call assigned to
agentState with useStore(agentStore), matching the existing themeStore
subscription; remove the unused useSelector import from AgentWelcomePage.
- Around line 35-42: Extract the duplicated decorative “argos” wordmark markup
from AgentWelcomePage and NewThreadPage into a shared component. Add a prop for
the differing top offset, preserve all existing styling and accessibility
attributes, and update both pages to render the shared component with their
respective offsets.

In `@packages/ui/src/pages/NewThreadPage.tsx`:
- Around line 793-802: Remove the redundant aria-live="polite" attribute from
the span identified by data-testid="new-thread-active-machine" in the
NewThreadPage component, preserving role="status" and the existing machine-name
content.
- Around line 823-857: Update the dropdown around the Recent Projects group so
its label covers only project entries: move the “No Project” and “Open Folder”
items outside the labeled group, or rename the label to reflect all contents. In
the projectState.projects.map rendering, limit displayed entries with the
established recent-list bound by slicing the collection before mapping.

In `@packages/ui/src/pages/WelcomePage.tsx`:
- Line 47: Extract the duplicated entrance animation string into one shared
SCREAMING_SNAKE_CASE constant, then remove the local declaration and import/use
that shared constant in packages/ui/src/pages/WelcomePage.tsx:47-47 and
packages/ui/src/pages/AgentWelcomePage.tsx:13-13. Ensure both pages reference
the same definition.
🪄 Autofix

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: ba733463-5552-4783-a927-30ebc6adf599

📥 Commits

Reviewing files that changed from the base of the PR and between 6f817d5 and 4e85310.

📒 Files selected for processing (14)
  • packages/ui/src/components/WindowSideBar.tsx
  • packages/ui/src/components/WorkspaceSelector.tsx
  • packages/ui/src/components/chat/ChatStatusBar.tsx
  • packages/ui/src/components/chat/ChatTopBar.tsx
  • packages/ui/src/components/message/ImageActionContextMenu.tsx
  • packages/ui/src/components/message/MessageItemAssistant.tsx
  • packages/ui/src/components/workspace/RemoteWorkspaceSetup.tsx
  • packages/ui/src/components/workspace/WorkspaceFileNode.tsx
  • packages/ui/src/components/workspace/WorkspaceSelectorDialogs.tsx
  • packages/ui/src/pages/AgentWelcomePage.tsx
  • packages/ui/src/pages/NewThreadPage.tsx
  • packages/ui/src/pages/WelcomePage.tsx
  • packages/ui/src/routes/_main.tsx
  • packages/ui/src/stores/ui/remoteSetup.ts

Comment thread packages/ui/src/components/workspace/WorkspaceSelectorDialogs.tsx
Comment thread packages/ui/src/pages/AgentWelcomePage.tsx Outdated
Comment thread packages/ui/src/pages/NewThreadPage.tsx
Comment thread packages/ui/src/pages/NewThreadPage.tsx
Comment thread packages/ui/src/pages/WelcomePage.tsx
Comment thread packages/ui/src/pages/WelcomePage.tsx
Comment thread packages/ui/src/pages/WelcomePage.tsx
Comment thread packages/ui/src/pages/WelcomePage.tsx Outdated

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR modernizes Argos’ entry surfaces (Welcome, Agent selection, New Thread) with a more polished onboarding/empty-state layout and introduces a globally-rendered “Connect remote machine” dialog flow wired through a new remoteSetup UI store and the workspace selector.

Changes:

  • Redesign WelcomePage, AgentWelcomePage, and NewThreadPage layouts (new composition, backdrop wordmark, refined progress/cta surfaces, drag-region fixes).
  • Add a global remote-machine dialog flow (remoteSetup store + AddRemoteMachineDialog mounted in MainLayout) and refactor workspace selector to open it.
  • Update menu/context-menu action handlers to use onClick and add grouping in dropdown menus for consistency.

Reviewed changes

Copilot reviewed 14 out of 14 changed files in this pull request and generated 3 comments.

Show a summary per file
File Description
packages/ui/src/stores/ui/remoteSetup.ts New TanStack store to control remote-machine dialog state + handlers.
packages/ui/src/routes/_main.tsx Mounts AddRemoteMachineDialog at the app layout level.
packages/ui/src/pages/WelcomePage.tsx Welcome/onboarding surface redesign (progress card, provider grid, ACP CTA).
packages/ui/src/pages/NewThreadPage.tsx New thread empty state redesign with brand backdrop + consolidated machine/project row.
packages/ui/src/pages/AgentWelcomePage.tsx Agent selection surface redesign + empty-state primary action.
packages/ui/src/components/WorkspaceSelector.tsx Refactors remote-machine actions to open the global dialog via remoteSetup.
packages/ui/src/components/workspace/WorkspaceSelectorDialogs.tsx Converts AddRemoteMachineDialog to read from remoteSetup store instead of props.
packages/ui/src/components/workspace/WorkspaceFileNode.tsx Context menu items switched to onClick.
packages/ui/src/components/workspace/RemoteWorkspaceSetup.tsx UI restructuring (view toggle, stage labels/sr text, improved form/review flow).
packages/ui/src/components/WindowSideBar.tsx Sidebar shell class adjustments (removes width-transition classes).
packages/ui/src/components/message/MessageItemAssistant.tsx Context menu items switched to onClick.
packages/ui/src/components/message/ImageActionContextMenu.tsx Context menu items switched to onClick.
packages/ui/src/components/chat/ChatTopBar.tsx Top bar class adjustments + dropdown items switched to onClick.
packages/ui/src/components/chat/ChatStatusBar.tsx Dropdown item switched to onClick.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

const store = useWorkspaceStore();
const [addDialogOpen, setAddDialogOpen] = useState(false);
const remoteSetup = useRemoteSetupStore();
const [recoveryWorkspace, setRecoveryWorkspace] = useState<WorkspaceEntry | null>(null);

Copy link
Copy Markdown
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed in 785777f. Removed the now-unused local recoveryWorkspace state from WorkspaceSelector.tsx; the store-level value is retained for the dialog's initialUrl prefill.

Comment on lines +209 to +220
useEffect(() => {
remoteSetup.registerHandlers({
remoteUrls,
onSave: handleSave,
onSaveAndSwitch: handleSaveAndSwitch,
});
return () => {
remoteSetup.clearHandlers();
};
// handleSave/handleSaveAndSwitch close over `store` and `workspaces`; re-register when workspaces change.
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [workspaces, store]);

Copy link
Copy Markdown
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed in 785777f. Removed the clearHandlers() unmount cleanup — handlers stay registered (re-registered when workspaces/store change), so collapsing the sidebar no longer nulls the handlers while the dialog is open.

Comment on lines +51 to +59
{handlers && (
<RemoteWorkspaceSetup
existingRemoteUrls={handlers.remoteUrls}
initialRemoteUrl={remoteSetup.recoveryWorkspace?.remoteUrl}
onAddWorkspace={remoteSetup.saveWorkspace}
onSaveAndSwitch={handlers.onSaveAndSwitch ? remoteSetup.saveWorkspaceAndSwitch : undefined}
onCancel={remoteSetup.closeRemoteDialog}
/>
)}

Copy link
Copy Markdown
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed in 785777f. AddRemoteMachineDialog now renders a non-empty fallback body with a Close button when handlers is null, so the user is never stuck in an empty dialog.

const agents = useStore(agentStore, (s) => s.agents);
const isDark = useStore(themeStore, (s) => s.isDark);

const enabledAgents = useMemo(() => agents.filter((a) => a.enabled), [agents]);

Copy link
Copy Markdown
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed in f767947. Removed the manual useMemo wrappers around the agents.filter(...) and slice in AgentWelcomePage.tsx — the project enables the React Compiler (reactCompilerPreset in the UI Vite config), so the compiler caches these pure derivations automatically. useStore is scoped to the agents slice so re-renders stay narrow.

const isDark = useStore(themeStore, (s) => s.isDark);

const enabledAgents = useMemo(() => agents.filter((a) => a.enabled), [agents]);
const displayedAgents = useMemo(() => enabledAgents.slice(0, 9), [enabledAgents]);

Copy link
Copy Markdown
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed in f767947. Removed the manual useMemo around displayedAgents (enabledAgents.slice(0, 9)) — React Compiler handles the memoization, and the value is pure over the stable store slice.

@dvaJi
dvaJi merged commit ff45a7d into master Aug 7, 2026
5 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants