(CODUX-124) Warm-void surfaces and clean empty state in preview components

[numnx]

🧩 Task: Warm-void surfaces and clean empty state in preview components

Automated task PR opened by Code UX for T03.

📋 Summary

Sprint: Sprint 194 · Enhance Browser Preview · Task: T03

Enhance the Browser Preview page (dashboard/src/v2/BrowserPage.tsx and dashboard/src/v2/components/browser/*): apply the shared warm-void card surface tokens, remove the large empty card behind the 'No preview active' state, collapse all right-column panels by default except Launch Container (surfacing linked ports while collapsed), and move the preview container selection cards from the top to the bottom below the browser.

🤖 Model & Provider

Provider	Codex CLI
Model	gpt-5.5

⏱️ Timing

Started	2026-07-09 02:01:14 UTC
Finished	2026-07-09 02:05:35 UTC
Duration	4m 21s

📊 Token Usage

Metric	Value
Input tokens	54,165
Cached input tokens	667,520
Output tokens	7,003
Total tokens	728,688
Invocations	1
Tool calls	29
Active time	3m 54s

Included usage estimate (subscription/local login): $0.81

✅ QA Review

⏳ QA review runs after this PR is opened. Check the task card in the dashboard for the outcome once it lands.

📝 Full Task Prompt

## Objective
Align the extracted Browser Preview components with the warm-void color scheme and make the 'No preview active' state clean by removing the large empty card wrapper behind it.

## Scope
- dashboard/src/v2/components/browser/PreviewWindowChrome.tsx (the `if (!session)` empty-state branch; the active window chrome surfaces)
- dashboard/src/v2/components/browser/PreviewSessionSlider.tsx (session card surfaces)
- dashboard/src/v2/components/browser/LaunchContainerPanel.tsx (panel surface)
- Reference tokens: `--surface-glass`, `--surface-glass-hover`, `--border-hairline`, `--elevation-base` in dashboard/src/v2/styles/globals.css

## Implementation Requirements
1. In `PreviewWindowChrome.tsx`, rework the `if (!session)` return so the 'No preview active' compass icon, heading, and description are shown cleanly without the large full-height empty card wrapper (remove the outer `rounded-[1.75rem] border ... bg-white/72 ...` card and the inner `h-[calc(100vh-23rem)] min-h-[540px] bg-slate-100/70 dark:bg-void-950` filler block). Center the message with light spacing/padding only, no bordered/filled card behind it.
2. In `PreviewWindowChrome.tsx`, replace the remaining hardcoded card surfaces on the active/minimized/closed window chrome (`bg-white/72 ... dark:bg-void-900/45` / `dark:bg-void-900/55`) with the shared warm-void tokens (`bg-[var(--surface-glass)]`, `border-[color:var(--border-hairline)]`, `shadow-[var(--elevation-base)]`), keeping the iframe viewport background (`bg-slate-100/70 dark:bg-void-950`) as-is.
3. In `PreviewSessionSlider.tsx`, swap the inactive session card surface (`bg-white/68 ... dark:bg-void-900/35`) and hover states to the warm-void tokens while preserving the active-card signal ring/glow styling and status/health tones.
4. In `LaunchContainerPanel.tsx`, swap the panel container surface (`bg-white/72 ... dark:bg-void-900/45`) to the warm-void tokens, leaving the signal-colored launch button and select control untouched.

## Constraints
- This task edits only the three component files above; do not modify BrowserPage.tsx (it is owned by T01/T02).
- Preserve all props, handlers, `aria-*`/`title` attributes, window state machine (`normal`/`minimized`/`fullscreen`/`closed`), and the port/health formatting helpers.
- Do not remove the informational text of the empty state, only the surrounding empty card container.
- Keep light and dark mode both legible using the shared tokens.

## Verification
- Run `pnpm run typecheck:dashboard`.
- Run `pnpm test tests/dashboard/v2/browser-page-components.test.tsx` and confirm existing component assertions still pass.
- Run `pnpm run build`.
- Manually confirm (or via test) that with no session the 'No preview active' message renders without a large empty card, and component surfaces use `var(--surface-glass)`.

🌿 Branch Info

Base: feature/CODUX-194-enhance-browser-preview
Head: task/feature-codux-194-enhance-browser-preview-t03-codex-mrcv1poc

---

🤖 Generated by Code UX