refactor: unified top bar layout for workspace readiness

[BlueHotDog]

Summary

Restructure the Frontman client layout from two separate panel headers into a single 32px unified zoned top bar. This is a layout-only refactor — same functionality, new structure — that prepares the UI for future workspace/git integration features.

Spec: docs/superpowers/specs/2026-04-08-unified-top-bar-design.md

Motivation

The current layout has three problems that block multi-workspace work:

1. No "where am I" — the task title is a small label in a crowded 40px header with no visual weight
2. Session switching is buried — hidden behind a clock icon dropdown
3. Preview has zero workspace context — its nav bar is disconnected from the chat panel's identity

Design

Zoned Top Bar (32px)

A single strip spanning the full width, visually split by the panel divider extending upward.

┌──────────────────────────────────────────────────────────────────────┐
│ [F] [▼ Workspace name]           + New  │  ↻  [  URL bar  ]  📱  ⚙  │
│         LEFT ZONE (above chat)          │   RIGHT ZONE (above preview) │
└──────────────────────────────────────────────────────────────────────┘

Left zone (above chat):

Element	Behavior
Logo (18x18px)	Frontman "F", click opens overflow menu (settings, help, open-in-new-window)
Workspace dropdown pill	Current workspace name + chevron. Click opens dropdown.
"+ New" button	Ghost button, creates new workspace (same as current "+ New task")

Right zone (above preview):

Element	Behavior
Reload (22x22px)	Refreshes preview iframe
URL bar	Flexible width, read-only display of current preview URL
Device mode toggle (22x22px)	Toggles responsive device simulation
Settings gear (22x22px)	Opens settings panel

Workspace Dropdown

Opens below the workspace pill. Width: 280px.

• Search bar at top (filters by name)
• Workspace list sorted by last activity (most recent first)
• Each entry: workspace name, "Current" badge on active workspace, relative timestamp
• Click to switch workspace

Removed from Headers

Element	Disposition
Help (?)	→ Logo overflow menu
Back / Forward	Removed (rarely used)
Annotation mode (pen)	Already in chat panel, removed from preview nav
Open in new window	→ Logo overflow menu
Task history (clock)	Replaced by workspace dropdown

Both Panels Become Headerless

• Chat panel: Remove TaskTabs. Starts directly with scroll container + messages.
• Preview panel: Remove Nav.Navigation. Starts directly with DeviceBar (if active) or iframe viewport.

Implementation Tasks

1. Create Client__TopBar component

• 32px height, flex row, full width
• Two children: left zone and right zone
• Left zone width tracks the resizable chat panel width (same resize hook)
• Right zone takes remaining space
• Vertical divider between zones continues the panel border

2. Create Client__TopBar__WorkspaceDropdown component

• Triggered by clicking the workspace pill
• 280px popover panel with search + workspace list
• Reads from existing tasks state via Client__State.useSelector
• Click switches workspace (same switchTask action as current)
• "Current" badge on active workspace
• Relative timestamps

3. Create Client__TopBar__LogoMenu component

• Simple popover menu on logo click
• Items: Settings, Help (Discord link), Open in new window
• Wire settings click to existing settings panel open action

4. Move preview nav controls to top bar right zone

• Relocate reload, URL bar, device mode toggle, settings gear from Client__WebPreview__Nav to the right zone of Client__TopBar
• These need access to the preview's state (URL, device mode) — pass via props or selectors

5. Modify Client__App layout

• Change from flex row: [Chat | Preview] to flex col: [TopBar] / [flex row: [Chat | Preview]]
• Top bar sits above the existing split layout

6. Remove Client__TaskTabs

• Delete the component
• Remove its usage from Client__Chatbox
• Chat panel starts directly with scroll container

7. Remove Client__WebPreview__Nav.Navigation

• Remove the nav bar from the preview panel
• Preview starts with DeviceBar (conditional) or iframe viewport directly

8. Storybook stories

• Client__TopBar.story.res — top bar in various states (with/without workspaces)
• Client__TopBar__WorkspaceDropdown.story.res — dropdown open, with search, various workspace counts

State Changes

None. The workspace dropdown reads the same tasks dict and currentTask state. No new actions, reducers, or effects.

Styling

• Tailwind utilities, dark theme
• Top bar background: #130d20, border: #1e1538
• Dropdown: #1a1030 background, #2e2346 border, shadow
• Consistent with existing color palette

Future Slots (not in this PR)

These elements are designed into the layout but not rendered in this step. They will be added by future PRs:

• Status dots (Draft/In review/Changes requested/Merged) on workspace entries
• Status text in the top bar left zone ("Draft · 3 changes")
• Change count per workspace
• Notification badges for review comments
• Section headers in dropdown ("Active" / "Recent")

Acceptance Criteria

• Single 32px top bar replaces both panel headers
• Left zone shows logo, workspace dropdown pill, "+ New" button
• Right zone shows reload, URL bar, device mode, settings
• Workspace dropdown opens on pill click with search and workspace list
• Logo click opens overflow menu with settings, help, open-in-new-window
• Chat panel has no header — messages start immediately
• Preview panel has no nav bar — iframe starts immediately (or DeviceBar if active)
• All existing functionality preserved (task switching, settings, preview nav, device mode)
• Storybook stories for new components
• Resizable divider still works and the top bar left zone tracks its width