feat: reuse agent command chat for agents page

[Nikhil (shadowfax92)]

Summary

• Reuse the existing agent-command chat for chats launched from the Agents page.
• Add a navigable /agents/:agentId route with Agents-page back navigation.
• Remove the duplicate AgentChat implementation and keep sidebar state coherent for nested Agents routes.

Design

The Agents management page remains responsible for setup, lifecycle, terminal, create, delete, and list flows. Chat buttons now navigate to /agents/:agentId, which is wrapped in AgentCommandLayout and renders AgentCommandConversation in a page layout. The existing /home/agents/:agentId command-center route keeps its immersive layout and home navigation.

Test plan

• bunx biome check apps/agent/components/sidebar/SidebarNavigation.tsx apps/agent/entrypoints/app/App.tsx apps/agent/entrypoints/app/agent-command/AgentCommandConversation.tsx apps/agent/entrypoints/app/agents/AgentsPage.tsx
• bun run --filter @browseros/agent typecheck
• bun run --filter @browseros/agent lint
• bun run test:agent
• BrowserOS UI inspect: verified #/agents, Chat -> #/agents/main, Back to agents, and existing #/home/agents/main Back to home behavior

[Nikhil (shadowfax92)]

Claude (@claude) review

[Nikhil (shadowfax92)]

Greptile (@greptileai) review

[claude]

Claude finished Nikhil (@shadowfax92)'s task in 1m 35s —— View job

---

Code Review

• Gather context and understand the PR
• Read changed files
• Analyze code for bugs, issues, and improvements
• Post review feedback

---

Good refactor overall. Deleting 686 lines (the duplicate AgentChat.tsx) while adding a cleaner parameterized path is the right direction. A few things worth addressing:

Issues

1. Redirect target mismatch in page variant — AgentCommandConversation.tsx:149

When agentId is missing from the URL (e.g. /agents/ with no id), the component always redirects to /home:

if (shouldRedirectHome) {
  return <Navigate to="/home" replace />
}

In the page variant, this should redirect to /agents instead. A user who navigates to a bad /agents/ URL will be unexpectedly dumped on the home page. Suggested fix: Fix this →

// Before
if (shouldRedirectHome) {
  return <Navigate to="/home" replace />
}

// After
if (shouldRedirectHome) {
  return <Navigate to={backPath} replace />
}

2. Two separate alphaEnabled guards for related routes — App.tsx:115-135

The agents and admin routes are both gated on alphaEnabled in separate conditional blocks. These can be merged:

// Current — two blocks
{alphaEnabled ? (
  <>
    <Route path="agents" element={<AgentsPage />} />
    <Route element={<AgentCommandLayout />}>
      <Route path="agents/:agentId" element={...} />
    </Route>
  </>
) : null}
{alphaEnabled ? (
  <Route path="admin" element={<AdminDashboardPage />} />
) : null}

// Simpler — one block
{alphaEnabled && (
  <>
    <Route path="agents" element={<AgentsPage />} />
    <Route element={<AgentCommandLayout />}>
      <Route path="agents/:agentId" element={...} />
    </Route>
    <Route path="admin" element={<AdminDashboardPage />} />
  </>
)}

3. Hardcoded viewport height offset — AgentCommandConversation.tsx:162

isPageVariant
  ? 'h-[calc(100vh-7rem)] min-h-[620px]'
  : 'absolute inset-0',

The 7rem assumes a fixed header height from the surrounding SidebarLayout. If that layout changes (e.g., the top bar height shifts), the page variant conversation will overflow or leave a gap without any type-level or test-level signal. Consider using a named CSS custom property (var(--app-header-height)) or restructuring to use flex/grid fill, or at minimum leaving a comment documenting where 7rem comes from.

4. No max-width constraint in page variant — AgentCommandConversation.tsx:170

isPageVariant ? 'mx-auto' : 'mx-auto max-w-3xl px-4 pt-4 pb-2',

The command variant constrains itself to max-w-3xl. The page variant has none, so on a wide sidebar-content area the conversation stretches edge-to-edge. If this is intentional (filling the available content area), it's fine, but worth confirming the design intent.

Nits

• AgentCommandConversation has backTarget: 'home' | 'page' on ConversationHeader but variant: 'command' | 'page' on the outer component — mixing naming conventions for the same concept. Consider using 'command' / 'page' throughout, or derive BackIcon directly from variant.
• resolvedAgentId = agentId ?? '' — the empty string fallback only exists to satisfy the type; it's dead code given the shouldRedirectHome guard above it. A non-null assertion or early return with a proper type guard would be cleaner.

What's good

• The isNavItemActive extraction in SidebarNavigation.tsx is clean and the /agents/ prefix check handles nested routes correctly.
• Parameterizing backPath, agentPathPrefix, and createAgentPath rather than duplicating the whole conversation component is the right approach.
• The AgentCommandLayout re-use for the page-variant route is correct: it gets its own data-fetch context, which is appropriate since AgentsPage is a sibling, not a parent.

[github-actions]

✅ Tests passed — 792/795

Suite	Passed	Failed	Skipped
✅ agent-sdk	44/44	0	0
✅ agent	20/20	0	0
✅ build	7/7	0	0
✅ eval	8/8	0	0
✅ server-agent	261/261	0	0
✅ server-api	125/125	0	0
✅ server-browser	3/3	0	0
✅ server-integration	9/9	0	0
✅ server-root	42/45	0	3
✅ server-sdk	11/11	0	0
✅ server-skills	31/31	0	0
✅ server-tools	231/231	0	0

View workflow run

[greptile-apps]

Greptile Summary

This PR eliminates the duplicate AgentChat component by routing the Agents page's Chat button to the existing AgentCommandConversation via a new /agents/:agentId route, and keeps sidebar state coherent by extending isNavItemActive to highlight the Agents item for all /agents/* paths. AgentsPage is also heavily refactored — inline JSX blocks are extracted into named sub-components and the local chatAgent state is replaced with router navigation, reducing the monolithic component significantly.

Confidence Score: 5/5

Safe to merge; all remaining findings are minor P2 style/consistency suggestions

The refactor cleanly removes ~400 lines of duplicated code and the routing logic is correct. Both P2 findings have no practical impact given the current route definitions, and neither affects data integrity or the primary user path.

AgentCommandConversation.tsx — two minor style/consistency issues in the new variant logic

Important Files Changed

Filename	Overview
packages/browseros-agent/apps/agent/entrypoints/app/agent-command/AgentCommandConversation.tsx	Extended with variant/backPath/agentPathPrefix/createAgentPath props; two minor issues — hardcoded /home redirect ignores backPath, page variant missing max-width constraint
packages/browseros-agent/apps/agent/entrypoints/app/App.tsx	Adds /agents/:agentId route wrapped in AgentCommandLayout alongside existing /agents page; routing structure is correct
packages/browseros-agent/apps/agent/components/sidebar/SidebarNavigation.tsx	Extracts inline isActive logic into isNavItemActive function; correctly activates Agents nav item for /agents and /agents/* routes
packages/browseros-agent/apps/agent/entrypoints/app/agents/AgentChat.tsx	Deleted — duplicate implementation replaced by the shared AgentCommandConversation component
packages/browseros-agent/apps/agent/entrypoints/app/agents/AgentsPage.tsx	Large refactor: inline JSX extracted into named sub-components, chatAgent state replaced with navigate, FALLBACK_CONTROL_PLANE_COPY used correctly for TypeScript satisfaction

Comments Outside Diff (1)

1. packages/browseros-agent/apps/agent/entrypoints/app/agent-command/AgentCommandConversation.tsx, line 149-151 (link)

   Hardcoded redirect destination ignores backPath prop

   The Navigate to="/home" always redirects to /home regardless of the backPath prop. In the page variant, the semantically correct redirect target is backPath. In practice, shouldRedirectHome (!agentId) can never be true on the /agents/:agentId route, so this is unreachable today — but it's inconsistent with the prop contract and could silently misdirect if the component is ever reused in another context.

   Prompt To Fix With AI

   This is a comment left during a code review.
   Path: packages/browseros-agent/apps/agent/entrypoints/app/agent-command/AgentCommandConversation.tsx
   Line: 149-151
   
   Comment:
   **Hardcoded redirect destination ignores `backPath` prop**
   
   The `Navigate to="/home"` always redirects to `/home` regardless of the `backPath` prop. In the `page` variant, the semantically correct redirect target is `backPath`. In practice, `shouldRedirectHome` (`!agentId`) can never be `true` on the `/agents/:agentId` route, so this is unreachable today — but it's inconsistent with the prop contract and could silently misdirect if the component is ever reused in another context.
   
   
   
   How can I resolve this? If you propose a fix, please make it concise.

Prompt To Fix All With AI

This is a comment left during a code review.
Path: packages/browseros-agent/apps/agent/entrypoints/app/agent-command/AgentCommandConversation.tsx
Line: 149-151

Comment:
**Hardcoded redirect destination ignores `backPath` prop**

The `Navigate to="/home"` always redirects to `/home` regardless of the `backPath` prop. In the `page` variant, the semantically correct redirect target is `backPath`. In practice, `shouldRedirectHome` (`!agentId`) can never be `true` on the `/agents/:agentId` route, so this is unreachable today — but it's inconsistent with the prop contract and could silently misdirect if the component is ever reused in another context.

```suggestion
  if (shouldRedirectHome) {
    return <Navigate to={backPath} replace />
  }
```

How can I resolve this? If you propose a fix, please make it concise.

---

This is a comment left during a code review.
Path: packages/browseros-agent/apps/agent/entrypoints/app/agent-command/AgentCommandConversation.tsx
Line: 171

Comment:
**`page` variant lacks `max-w-3xl` width cap**

The `command` variant applies `max-w-3xl px-4 pt-4 pb-2` to the inner flex column, but the `page` variant only adds `mx-auto` with no `max-w-*` constraint. Since `AgentCommandLayout` renders a bare `<Outlet>` with no intrinsic width limit, the conversation will stretch to the full content-area width on wide viewports. Consider adding an appropriate max-width, or confirm the wider layout is intentional.

How can I resolve this? If you propose a fix, please make it concise.

_{Reviews (1): Last reviewed commit: "feat: reuse agent command chat for agent..." | Re-trigger Greptile}