[mmabrouk]

Context

Middle-clicking (or ctrl+clicking) items in the sidebar did nothing for most of the clickable surface. Sidebar rows rendered a real anchor only around the title text; the icon and the rest of the row navigated through router.push in JavaScript, which the browser cannot open in a new tab. The workflow switcher dropdown (the agents list at the top of the sidebar) had no anchors at all, so none of its items could be opened in a new tab.

Changes

Sidebar menu rows (SidebarMenu.tsx): each link's anchor now stretches over the whole row with an absolutely positioned ::before, so the icon, the padding, and the text are all part of one real link. Rows (.ant-menu-item, .ant-menu-submenu-title) become the positioned containers. Submenu popups render in a portal, so they get the same positioning rules through popupClassName. Two guards keep behavior identical:

• the expand caret sits above the anchor (z-[1]), so it still toggles the group without navigating
• anchors inside disabled rows get pointer-events: none, so disabled items stay inert

In collapsed mode the invisible title overlay that covers each rail icon computed to width 0, so even the old text anchor never covered the icon. It now gets w-full, which makes the rail icons middle-clickable too.

Workflow picker (useWorkflowSwitcher.tsx): every dropdown item is now wrapped in a real <Link>. The href is the same URL a click would push, built by the new appSwitchHrefAtom (extracted from routerAppNavigationAtom in fetcher.ts so both share one URL source of truth, including the keep-current-subpage behavior). Plain left clicks preventDefault() and stay on the existing antd onClick path; modified clicks (middle, ctrl, cmd, shift) fall through to the native anchor.

Scope / risk

Only the sidebar menu engine and the workflow picker are touched. Other JS-navigated surfaces (the projects and orgs lists in the sidebar header, table rows) are unchanged and still not middle-clickable. The stretched-anchor pattern covers the full row, so any future row content that needs its own click handler must be positioned above the anchor like the caret.

Tests / notes

• pnpm lint-fix clean; tsc shows no new errors in the touched files (remaining errors are pre-existing in Playwright test helpers).
• Verified live on the EE dev stack via browser hit-testing: every linkable row (expanded and collapsed rail) resolves to its own anchor at icon, text, and row end, with no cross-row bleed; caret toggling, left-click SPA navigation, and dropdown open/close behave exactly as before.

How to QA

Prerequisites: any running stack (the Hetzner dev box at the live port works). Log in and open a project.

Steps:

1. In the main sidebar, middle-click the Agents entry, once on its icon and once on its text.
2. Expand the Agents group with the caret and middle-click an agent row.
3. Collapse the sidebar and middle-click a rail icon (for example Observability).
4. Open an agent, click the workflow name at the top of the sidebar, and middle-click another agent in the dropdown.
5. Left-click the same items.

Expected result: every middle-click opens the target page in a new background tab. Every left-click navigates in place exactly as before (no full page reload, dropdown closes after switching, caret only toggles the group).

Automated tests: none; this is CSS/anchor wiring with no unit-testable logic. Coverage is the manual matrix above.

Edge cases: disabled items (cloud-only features in OSS) must stay unclickable. The expand caret must never navigate.

https://claude.ai/code/session_016NT3qqbMYQ97xFqVpbtbL1

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
agenta-documentation	Ready	Preview, Comment	Jul 10, 2026 4:47pm

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: f8583b48-dcc0-4c1d-a4d3-64493ad805cf

📥 Commits

Reviewing files that changed from the base of the PR and between c38222a and b5d6fe3.

📒 Files selected for processing (3)

• web/oss/src/components/Sidebar/engine/SidebarMenu.tsx
• web/oss/src/components/Sidebar/hooks/useWorkflowSwitcher.tsx
• web/oss/src/state/app/atoms/fetcher.ts

---

📝 Walkthrough

Summary by CodeRabbit

• Bug Fixes
  • Improved sidebar menu interactions by making entire menu rows clickable.
  • Preserved expand/collapse toggle functionality and correctly handled disabled menu items.
  • Fixed workflow navigation to support standard links and modifier-click behavior for opening items in new tabs.
  • Improved app switching so navigation preserves or resets context appropriately.

Walkthrough

The app-switch destination is centralized in a shared atom, workflow items now render native links with modifier-click support, and sidebar styling stretches link interaction across menu rows while preserving toggle and disabled-row behavior.

Changes

Workflow navigation

Layer / File(s)	Summary
Shared app-switch URL computation web/oss/src/state/app/atoms/fetcher.ts	appSwitchHrefAtom computes app-switch destinations, and router navigation reuses it with an early return when no href exists.
Workflow switcher link integration web/oss/src/components/Sidebar/hooks/useWorkflowSwitcher.tsx	Workflow items render next/link anchors when an href is available; normal clicks remain in-app while modifier clicks use native link behavior.
Full-row sidebar link interaction web/oss/src/components/Sidebar/engine/SidebarMenu.tsx	Menu rows receive full-row anchor overlays, protected expand toggles, portal-compatible submenu styles, disabled-row pointer handling, and expanded collapsed-title overlays.

Estimated code review effort: 3 (Moderate) | ~20 minutes

Sequence Diagram(s)

sequenceDiagram
  participant WorkflowSwitcher
  participant appSwitchHrefAtom
  participant SidebarMenu
  participant nextLink
  participant routerAppNavigationAtom
  WorkflowSwitcher->>appSwitchHrefAtom: read app-switch href
  appSwitchHrefAtom-->>WorkflowSwitcher: return destination href
  WorkflowSwitcher->>nextLink: render WorkflowIdentity as link
  SidebarMenu->>nextLink: stretch link interaction across menu row
  nextLink->>WorkflowSwitcher: receive normal or modifier click
  WorkflowSwitcher->>routerAppNavigationAtom: trigger normal app navigation

Loading

Possibly related PRs

• Agenta-AI/agenta#4987: Introduced the sidebar menu and workflow switcher implementation that this change extends.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly matches the main change: making sidebar rows and workflow picker items middle-clickable links.
Description check	✅ Passed	The description accurately describes the sidebar and workflow picker link behavior changes in the PR.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
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

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/sidebar-middle-click-links

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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

[mmabrouk]

@coderabbitai review

[coderabbitai]

✅ Action performed

Review finished.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.