Add 'right' option to app:tabbar

[tuner-lab]

Closes #3279.

Summary

Extends app:tabbar to accept "right" in addition to "top" and "left". When set to "right", the vertical tab bar renders at the outer-right edge of the window.

Approach

The existing "left" layout already wraps the vtab and AI panel together in a "leftGroup" that sits in an outer panel beside content. Rather than introduce a parallel render tree, this PR mirrors the same structure via react-resizable-panels order props:

• tabBarOnRight = (tabbar === "right")
• Outer group: side group order flips between 0 and 1; content order flips correspondingly.
• Inner group: vtab order flips so vtab stays at the outermost edge of the side group on whichever side it's on. AI panel sits inboard.
• Resize handlers (handleOuterPanelLayout, handleInnerPanelLayout) use sizes[1] instead of sizes[0] for the relevant panel when on the right.
• AI panel inner padding flips from pr-0.5 to pl-0.5.

defaultSize percentages stay unchanged — only the visual ordering flips, which is what react-resizable-panels uses order for.

Files changed

File	Change
pkg/wconfig/settingsconfig.go	jsonschema enum: top,left,right
schema/settings.json	published JSON schema: same
frontend/app/workspace/workspace.tsx	derive showVTabBar / tabBarOnRight; conditional order and padding
frontend/app/workspace/workspace-layout-model.ts	track tabBarOnRight; swap sizes[] index in resize handlers; rename setShowLeftTabBar → setShowVTabBar (only internal callsite was workspace.tsx)

Design notes / open questions for maintainers

1. Symmetric mirror vs. decoupled AI panel. This PR moves both the vtab and the AI panel to the right when tabbar=right, with the AI panel inboard of the vtab. An alternative design keeps the AI panel anchored on the left and only moves the vtab. The mirror approach was chosen because it requires no changes to the layout model's grouping logic — the "leftGroup" simply becomes "sideGroup". Happy to refactor to the decoupled variant if you'd prefer it.
2. AIPanel.roundTopLeft is left wired to showLeftTabBar only. In right mode, the AI panel does not currently round the mirrored corner. If AIPanel should accept a roundTopRight prop for symmetry, I can add that in a follow-up.
3. Naming. Renamed setShowLeftTabBar → setShowVTabBar and the parameter in getLeftGroupInitialPercentage etc. from showLeftTabBar → showVTabBar. Left the method getLeftGroupInitialPercentage un-renamed because the semantic ("the percentage occupied by the side group, regardless of which side") still reads acceptably and renaming would touch more callsites. Open to renaming if you'd prefer.

Verification

• go build ./pkg/wconfig/... — clean.
• npx tsc --noEmit -p tsconfig.json — no errors introduced in the touched files. (17 pre-existing errors in frontend/preview/mock/* and processviewer.preview.tsx on main are unchanged.)
• Runtime testing has not been performed — I do not have a local Wave dev build set up to exercise the layout interactively. Maintainer smoke-test before merge recommended. Specifically worth checking: drag-resize behavior on both edges, AI panel toggle while in right mode, and tab-bar position transitions (left → right) without page reload.

Test plan

• Set "app:tabbar": "right" in settings.json, restart Wave, confirm vtab appears on right edge.
• With vtab on right, open the AI panel — confirm it appears between content and vtab and is collapsible/draggable.
• Drag the outer resize handle — confirm the side group resizes and width persists across restart.
• Drag the inner resize handle (between AI panel and vtab) — confirm vtab width persists.
• Toggle "app:tabbar" from "left" → "right" → "top" at runtime — confirm transitions are clean (transitions are debounced via enableTransitions(250)).
• Confirm "app:tabbar": "left" still works exactly as before (no regression).

🤖 Generated with Claude Code

[CLAassistant]

Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.
_{You have signed the CLA already but the status is still pending? Let us recheck it.}

[coderabbitai]

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: aacaadb8-df61-43fe-8c92-f1ff02034ecf

📥 Commits

Reviewing files that changed from the base of the PR and between 2e25ea1 and 890ee31.

📒 Files selected for processing (4)

• frontend/app/workspace/workspace-layout-model.ts
• frontend/app/workspace/workspace.tsx
• pkg/wconfig/settingsconfig.go
• schema/settings.json

---

Walkthrough

The pull request adds support for positioning the vertical tab bar on the right side of the workspace layout. A new tabBarOnRight state flag is introduced in the layout model to track tab bar positioning. Layout resizing logic is updated to interpret panel size percentages based on which side the tab bar occupies. Method signatures are refactored from showLeftTabBar to showVTabBar semantics. The workspace component conditionally flips panel ordering and padding when the tab bar is on the right. Configuration schemas are extended to include "right" as a valid option for the app:tabbar setting.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

✨ 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 feat/tabbar-right

Tip

💬 Introducing Slack Agent: The best way for teams to turn conversations into code.

Slack Agent is built on CodeRabbit's deep understanding of your code, so your team can collaborate across the entire SDLC without losing context.

• Generate code and open pull requests
• Plan features and break down work
• Investigate incidents and troubleshoot customer tickets together
• Automate recurring tasks and respond to alerts with triggers
• Summarize progress and report instantly

Built for teams:

• Shared memory across your entire org—no repeating context
• Per-thread sandboxes to safely plan and execute work
• Governance built-in—scoped access, auditability, and budget controls

One agent for your entire SDLC. Right inside Slack.

👉 Get started

---

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

_{Review rate limit: 7/8 reviews remaining, refill in 7 minutes and 30 seconds.}

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