From 5fb3bb2ebc5ed7767dae67efa0f8b8e68c5c24e2 Mon Sep 17 00:00:00 2001
From: Timothy <timothy.look@gmail.com>
Date: Thu, 2 Jul 2026 18:21:59 +0200
Subject: [PATCH] feat(web): add ChicoryTV app shell

refs #82
---
 .../2026-07-02-chicorytv-spa-app-shell.md     |  77 ++
 web/src/App.test.tsx                          |  72 +-
 web/src/App.tsx                               | 877 ++++++++++++------
 web/src/shell.css                             | 751 +++++++++------
 4 files changed, 1182 insertions(+), 595 deletions(-)
 create mode 100644 docs/superpowers/plans/2026-07-02-chicorytv-spa-app-shell.md

diff --git a/docs/superpowers/plans/2026-07-02-chicorytv-spa-app-shell.md b/docs/superpowers/plans/2026-07-02-chicorytv-spa-app-shell.md
new file mode 100644
index 000000000..fbe9c072d
--- /dev/null
+++ b/docs/superpowers/plans/2026-07-02-chicorytv-spa-app-shell.md
@@ -0,0 +1,77 @@
+# ChicoryTV SPA App Shell Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Build the ChicoryTV React admin shell for Gitea issue #82: fixed sidebar, compact top bar, client-side screen slots, Connect menu, and mounted theme switcher.
+
+**Architecture:** Keep the shell in `web/src/App.tsx` because the current SPA is still small and the issue is about top-level chrome. Use local React state plus `history.pushState`/`popstate` for lightweight client-side routing without adding dependencies. Keep styling in the existing `web/src/shell.css` stub and reuse the ported design-system primitives.
+
+**Tech Stack:** React 19, TypeScript, Vite, Vitest, Testing Library, Lucide React, ChicoryTV design-system CSS tokens.
+
+---
+
+### Task 1: Shell Behavior Tests
+
+**Files:**
+- Modify: `web/src/App.test.tsx`
+
+- [ ] **Step 1: Replace scaffold expectations with shell expectations**
+
+Add tests that render `App`, assert the 232px sidebar/top-bar shell content is present, verify navigation moves between placeholder screens, verify the Connect menu exposes M3U/XMLTV endpoints, and keep the existing theme persistence coverage.
+
+- [ ] **Step 2: Run tests to verify failure**
+
+Run: `cd web && npm test -- --run src/App.test.tsx`
+
+Expected: tests fail because the current scaffold still renders "SPA foundation ready" and does not implement routed placeholder screens or the Connect menu.
+
+### Task 2: App Shell Implementation
+
+**Files:**
+- Modify: `web/src/App.tsx`
+- Modify: `web/src/shell.css`
+
+- [ ] **Step 1: Implement shell structure**
+
+Replace the scaffold/gallery with:
+- Sidebar brand row, primary/media/system nav, health footer.
+- Top bar with page title, search input, Connect menu, help/notification/avatar controls, and per-screen primary action slot.
+- Theme switcher mounted in the shell.
+- Placeholder content for Dashboard, Channels, New Channel, Guide, Schedules, Playouts, Collections, Libraries, and Settings.
+
+- [ ] **Step 2: Implement routing**
+
+Use a route table with paths under `/app`, `window.location.pathname`, `history.pushState`, and `popstate` to update active nav and rendered screen without a full reload.
+
+- [ ] **Step 3: Style to prototype**
+
+Rewrite `shell.css` so the sidebar is 232px, top bar is 52px, active nav uses accent rail plus soft tint, content scrolls independently, and the layout remains usable on narrow screens.
+
+- [ ] **Step 4: Run focused tests**
+
+Run: `cd web && npm test -- --run src/App.test.tsx`
+
+Expected: all `App` tests pass.
+
+### Task 3: Verification
+
+**Files:**
+- No code changes expected.
+
+- [ ] **Step 1: Run web test suite**
+
+Run: `cd web && npm test -- --run`
+
+Expected: all tests pass.
+
+- [ ] **Step 2: Run lint**
+
+Run: `cd web && npm run lint`
+
+Expected: no lint errors.
+
+- [ ] **Step 3: Run production build**
+
+Run: `cd web && npm run build`
+
+Expected: TypeScript and Vite build successfully.
diff --git a/web/src/App.test.tsx b/web/src/App.test.tsx
index 9a957c8a6..b3cfc18ed 100644
--- a/web/src/App.test.tsx
+++ b/web/src/App.test.tsx
@@ -11,11 +11,13 @@ import {
 describe('ChicoryTV SPA scaffold', () => {
   afterEach(() => {
     cleanup();
+    window.history.replaceState(null, '', '/');
   });
 
   beforeEach(() => {
     window.localStorage.clear();
     document.documentElement.removeAttribute('data-theme');
+    window.history.replaceState(null, '', '/app');
     vi.restoreAllMocks();
     vi.spyOn(window, 'fetch').mockResolvedValue(
       new Response(JSON.stringify([]), {
@@ -25,15 +27,62 @@ describe('ChicoryTV SPA scaffold', () => {
     );
   });
 
-  it('renders the placeholder shell and loads the design system stylesheet', () => {
+  it('renders the admin shell chrome and loads the design system stylesheet', () => {
     render(<App />);
 
-    expect(screen.getByRole('heading', { name: 'ChicoryTV' })).toBeInTheDocument();
+    expect(screen.getByRole('img', { name: 'ChicoryTV' })).toBeInTheDocument();
     expect(screen.getByRole('navigation', { name: 'Primary' })).toBeInTheDocument();
-    expect(screen.getByText('SPA foundation ready')).toBeInTheDocument();
+    expect(screen.getByRole('banner')).toBeInTheDocument();
+    expect(screen.getByRole('searchbox', { name: 'Search' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Connect' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Add Channel' })).toBeInTheDocument();
+    expect(screen.getByText('Healthy')).toBeInTheDocument();
     expect(designSystemStylesheet).toBe('../../design-system/styles.css');
   });
 
+  it('routes between shell screen slots without a page reload', () => {
+    render(<App />);
+
+    fireEvent.click(screen.getByRole('link', { name: 'Channels' }));
+
+    expect(screen.getByRole('heading', { name: 'Channels' })).toBeInTheDocument();
+    expect(screen.getByText('Channel list workspace')).toBeInTheDocument();
+    expect(screen.getByRole('link', { name: 'Channels' })).toHaveAttribute(
+      'aria-current',
+      'page'
+    );
+    expect(window.location.pathname).toBe('/app/channels');
+
+    fireEvent.click(screen.getByRole('link', { name: 'Schedules' }));
+
+    expect(screen.getByRole('heading', { name: 'Schedules' })).toBeInTheDocument();
+    expect(screen.getByText('Schedule editor workspace')).toBeInTheDocument();
+    expect(window.location.pathname).toBe('/app/schedules');
+  });
+
+  it('selects the active screen from the current location', () => {
+    window.history.replaceState(null, '', '/app/guide');
+
+    render(<App />);
+
+    expect(screen.getByRole('heading', { name: 'Guide' })).toBeInTheDocument();
+    expect(screen.getByText('EPG grid workspace')).toBeInTheDocument();
+    expect(screen.getByRole('link', { name: 'Guide' })).toHaveAttribute('aria-current', 'page');
+  });
+
+  it('opens the Connect menu with player endpoints and enabled-only option', () => {
+    render(<App />);
+
+    fireEvent.click(screen.getByRole('button', { name: 'Connect' }));
+
+    expect(screen.getByRole('dialog', { name: 'Connect a player' })).toBeInTheDocument();
+    expect(screen.getByText('M3U playlist')).toBeInTheDocument();
+    expect(screen.getByText('XMLTV guide')).toBeInTheDocument();
+    expect(screen.getByText('/iptv/channels.m3u?enabled=1')).toBeInTheDocument();
+    expect(screen.getByText('/iptv/xmltv.xml?enabled=1')).toBeInTheDocument();
+    expect(screen.getByRole('checkbox', { name: 'Only enabled channels' })).toBeChecked();
+  });
+
   it('applies the warm design-system default by removing the theme attribute', () => {
     document.documentElement.dataset.theme = 'cool';
 
@@ -69,21 +118,12 @@ describe('ChicoryTV SPA scaffold', () => {
     );
   });
 
-  it('renders the component gallery primitives', () => {
+  it('renders routed placeholder cards for the downstream screen work', () => {
     render(<App />);
 
-    expect(screen.getByRole('heading', { name: 'Component gallery' })).toBeInTheDocument();
-    expect(screen.getByRole('heading', { name: 'Forms' })).toBeInTheDocument();
-    expect(screen.getByRole('heading', { name: 'Data display' })).toBeInTheDocument();
-    expect(screen.getByRole('heading', { name: 'Feedback' })).toBeInTheDocument();
-    expect(screen.getByRole('heading', { name: 'Navigation' })).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: 'Add Channel' })).toBeInTheDocument();
-    expect(screen.getByText('HLS Segmenter')).toBeInTheDocument();
-    expect(screen.getByText('Channel saved')).toBeInTheDocument();
-    expect(screen.getByRole('tab', { name: 'Streaming' })).toHaveAttribute(
-      'aria-selected',
-      'true'
-    );
+    expect(screen.getByText('On air now')).toBeInTheDocument();
+    expect(screen.getByText('Health checks')).toBeInTheDocument();
+    expect(screen.getByText('Recent activity')).toBeInTheDocument();
   });
 
   it('renders live channel data from the typed API client', async () => {
diff --git a/web/src/App.tsx b/web/src/App.tsx
index a2d332ec4..5ff243c29 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -1,20 +1,23 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState, type MouseEvent, type ReactNode } from 'react';
 import {
-  Activity,
+  Bell,
   CalendarClock,
+  Cast,
+  Check,
+  ChevronDown,
+  CircleHelp,
+  ClipboardCopy,
   FolderTree,
   Info,
   LayoutDashboard,
+  LayoutGrid,
   Library,
   ListVideo,
   Play,
   Plus,
   Radio,
-  RefreshCw,
   Search,
   Settings,
-  Tag as TagIcon,
-  Trash2,
   Tv
 } from 'lucide-react';
 import chicoryIconUrl from '../../design-system/assets/chicorytv-icon.svg';
@@ -23,21 +26,14 @@ import {
   Button,
   Card,
   ChannelLogo,
-  Checkbox,
   IconButton,
-  Input,
   NavItem,
   NavSection,
   ProgressBar,
-  Select,
   Spinner,
   Stat,
   StatusDot,
-  Switch,
-  Tabs,
-  Tag,
-  Toast,
-  Tooltip
+  Tag
 } from './components';
 import { useChannelsQuery } from './api';
 import {
@@ -47,310 +43,583 @@ import {
   type DesignSystemThemeId
 } from './designSystem';
 
-const navItems = [
-  { label: 'Dashboard', icon: <LayoutDashboard aria-hidden="true" size={16} />, active: true },
-  { label: 'Channels', icon: <Tv aria-hidden="true" size={16} /> },
-  { label: 'Guide', icon: <ListVideo aria-hidden="true" size={16} /> },
-  { label: 'Schedules', icon: <CalendarClock aria-hidden="true" size={16} /> },
-  { label: 'Libraries', icon: <Library aria-hidden="true" size={16} /> },
-  { label: 'Settings', icon: <Settings aria-hidden="true" size={16} /> }
+type ScreenId =
+  | 'dashboard'
+  | 'channels'
+  | 'builder'
+  | 'guide'
+  | 'schedules'
+  | 'playouts'
+  | 'collections'
+  | 'libraries'
+  | 'settings';
+
+interface ScreenRoute {
+  id: ScreenId;
+  path: string;
+  label: string;
+  title: string;
+  kicker: string;
+  description: string;
+  icon: ReactNode;
+  primaryAction: string;
+  placeholder: string;
+  badge?: number;
+}
+
+const routes: ScreenRoute[] = [
+  {
+    id: 'dashboard',
+    path: '/app',
+    label: 'Dashboard',
+    title: 'Dashboard',
+    kicker: 'Overview',
+    description: 'On-air status, health checks, and recent server activity.',
+    icon: <LayoutDashboard aria-hidden="true" size={16} />,
+    primaryAction: 'Add Channel',
+    placeholder: 'Dashboard workspace'
+  },
+  {
+    id: 'channels',
+    path: '/app/channels',
+    label: 'Channels',
+    title: 'Channels',
+    kicker: 'Lineup',
+    description: 'Dense channel table, ordering tools, bulk actions, and playback status.',
+    icon: <Tv aria-hidden="true" size={16} />,
+    primaryAction: 'Add Channel',
+    placeholder: 'Channel list workspace'
+  },
+  {
+    id: 'builder',
+    path: '/app/new-channel',
+    label: 'New Channel',
+    title: 'New Channel',
+    kicker: 'Builder',
+    description: 'Library-to-lineup channel creation flow with template-backed defaults.',
+    icon: <Plus aria-hidden="true" size={16} />,
+    primaryAction: 'Create Channel',
+    placeholder: 'Channel builder workspace'
+  },
+  {
+    id: 'guide',
+    path: '/app/guide',
+    label: 'Guide',
+    title: 'Guide',
+    kicker: 'EPG',
+    description: 'Timeline grid with channel rows, programme blocks, and a live now marker.',
+    icon: <LayoutGrid aria-hidden="true" size={16} />,
+    primaryAction: 'Jump To Now',
+    placeholder: 'EPG grid workspace'
+  },
+  {
+    id: 'schedules',
+    path: '/app/schedules',
+    label: 'Schedules',
+    title: 'Schedules',
+    kicker: 'Programming',
+    description: 'Two-pane schedule editor with drag ordering and progressive details.',
+    icon: <CalendarClock aria-hidden="true" size={16} />,
+    primaryAction: 'Add Schedule',
+    placeholder: 'Schedule editor workspace'
+  },
+  {
+    id: 'playouts',
+    path: '/app/playouts',
+    label: 'Playouts',
+    title: 'Playouts',
+    kicker: 'Runtime',
+    description: 'Playout state, reset controls, timeline diagnostics, and build warnings.',
+    icon: <ListVideo aria-hidden="true" size={16} />,
+    primaryAction: 'Reset All',
+    placeholder: 'Playouts workspace',
+    badge: 3
+  },
+  {
+    id: 'collections',
+    path: '/app/collections',
+    label: 'Collections',
+    title: 'Collections',
+    kicker: 'Media',
+    description: 'Manual, smart, multi, playlist, search, and rerun collection management.',
+    icon: <FolderTree aria-hidden="true" size={16} />,
+    primaryAction: 'Add Collection',
+    placeholder: 'Collections workspace'
+  },
+  {
+    id: 'libraries',
+    path: '/app/libraries',
+    label: 'Libraries',
+    title: 'Libraries',
+    kicker: 'Sources',
+    description: 'Local, Plex, Jellyfin, and Emby media source monitoring.',
+    icon: <Library aria-hidden="true" size={16} />,
+    primaryAction: 'Scan',
+    placeholder: 'Libraries workspace'
+  },
+  {
+    id: 'settings',
+    path: '/app/settings',
+    label: 'Settings',
+    title: 'Settings',
+    kicker: 'System',
+    description: 'Server configuration, access keys, FFmpeg profiles, and UI preferences.',
+    icon: <Settings aria-hidden="true" size={16} />,
+    primaryAction: 'Save Changes',
+    placeholder: 'Settings workspace'
+  }
 ];
 
-const stats = [
-  { label: 'Channels', value: '0' },
-  { label: 'Playouts', value: '0' },
-  { label: 'Libraries', value: '0' }
+const routeById = new Map(routes.map((route) => [route.id, route]));
+const dashboardRoute = routeById.get('dashboard')!;
+
+const primaryNavIds: ScreenId[] = [
+  'dashboard',
+  'channels',
+  'builder',
+  'guide',
+  'schedules',
+  'playouts'
 ];
+const mediaNavIds: ScreenId[] = ['collections', 'libraries'];
+const systemNavIds: ScreenId[] = ['settings'];
+
+function normalizePath(pathname: string): string {
+  return pathname.replace(/\/+$/, '') || '/app';
+}
+
+function routeFromLocation(): ScreenRoute {
+  const pathname = normalizePath(window.location.pathname);
+
+  return routes.find((route) => route.path === pathname) ?? dashboardRoute;
+}
+
+function routeHref(route: ScreenRoute): string {
+  return route.id === 'dashboard' ? '/app' : route.path;
+}
+
+function SidebarNavGroup({
+  activeRoute,
+  ids,
+  onNavigate
+}: {
+  activeRoute: ScreenRoute;
+  ids: ScreenId[];
+  onNavigate: (route: ScreenRoute, event: MouseEvent) => void;
+}) {
+  return (
+    <>
+      {ids.map((id) => {
+        const route = routeById.get(id)!;
+
+        return (
+          <NavItem
+            key={route.id}
+            icon={route.icon}
+            label={route.label}
+            active={route.id === activeRoute.id}
+            badge={route.badge}
+            badgeTone="warn"
+            href={routeHref(route)}
+            onClick={(event) => onNavigate(route, event)}
+          />
+        );
+      })}
+    </>
+  );
+}
+
+function ThemeSwitcher({
+  theme,
+  onThemeChange
+}: {
+  theme: DesignSystemThemeId;
+  onThemeChange: (theme: DesignSystemThemeId) => void;
+}) {
+  return (
+    <section className="ctv-theme-switcher" aria-label="Theme">
+      <span>Theme</span>
+      <div>
+        {designSystemThemes.map(({ id, description, label }) => (
+          <button
+            key={id}
+            type="button"
+            className={`ctv-theme-swatch ctv-theme-swatch-${id}`}
+            aria-label={description}
+            aria-pressed={theme === id}
+            title={label}
+            onClick={() => onThemeChange(id)}
+          />
+        ))}
+      </div>
+    </section>
+  );
+}
+
+function Sidebar({
+  activeRoute,
+  onNavigate
+}: {
+  activeRoute: ScreenRoute;
+  onNavigate: (route: ScreenRoute, event: MouseEvent) => void;
+}) {
+  return (
+    <aside className="ctv-sidebar">
+      <div className="ctv-brand">
+        <img src={chicoryIconUrl} alt="ChicoryTV" />
+        <span className="ctv-brand-wordmark">
+          Chicory<span>TV</span>
+        </span>
+      </div>
+
+      <nav aria-label="Primary" className="ctv-nav">
+        <SidebarNavGroup activeRoute={activeRoute} ids={primaryNavIds} onNavigate={onNavigate} />
+        <NavSection>Media</NavSection>
+        <SidebarNavGroup activeRoute={activeRoute} ids={mediaNavIds} onNavigate={onNavigate} />
+        <NavSection>System</NavSection>
+        <SidebarNavGroup activeRoute={activeRoute} ids={systemNavIds} onNavigate={onNavigate} />
+      </nav>
+
+      <div className="ctv-sidebar-health">
+        <div>
+          <span>ChicoryTV</span>
+          <code>v26.4.0</code>
+        </div>
+        <StatusDot status="ok" label="Healthy" />
+      </div>
+    </aside>
+  );
+}
+
+function EndpointRow({ icon, label, url }: { icon: ReactNode; label: string; url: string }) {
+  const [copied, setCopied] = useState(false);
+
+  const copyUrl = () => {
+    void navigator.clipboard?.writeText(url);
+    setCopied(true);
+    window.setTimeout(() => setCopied(false), 1200);
+  };
+
+  return (
+    <div className="ctv-connect-endpoint">
+      <span className="ctv-connect-endpoint-icon">{icon}</span>
+      <div>
+        <strong>{label}</strong>
+        <code>{url}</code>
+      </div>
+      <button type="button" onClick={copyUrl}>
+        {copied ? <Check aria-hidden="true" size={13} /> : <ClipboardCopy aria-hidden="true" size={13} />}
+        {copied ? 'Copied' : 'Copy'}
+      </button>
+    </div>
+  );
+}
+
+function ConnectMenu() {
+  const [open, setOpen] = useState(false);
+  const [enabledOnly, setEnabledOnly] = useState(true);
+  const suffix = enabledOnly ? '?enabled=1' : '';
+
+  return (
+    <div className="ctv-connect">
+      <button
+        type="button"
+        className="ctv-connect-button"
+        aria-expanded={open}
+        onClick={() => setOpen((current) => !current)}
+      >
+        <Cast aria-hidden="true" size={15} />
+        Connect
+        <ChevronDown aria-hidden="true" size={13} />
+      </button>
+
+      {open && (
+        <>
+          <button
+            type="button"
+            className="ctv-connect-dismiss"
+            aria-label="Close Connect menu"
+            onClick={() => setOpen(false)}
+          />
+          <div className="ctv-connect-menu" role="dialog" aria-label="Connect a player">
+            <div className="ctv-connect-header">
+              <strong>Connect a player</strong>
+              <span>128 channels</span>
+            </div>
+            <EndpointRow
+              icon={<ListVideo aria-hidden="true" size={15} />}
+              label="M3U playlist"
+              url={`/iptv/channels.m3u${suffix}`}
+            />
+            <EndpointRow
+              icon={<CalendarClock aria-hidden="true" size={15} />}
+              label="XMLTV guide"
+              url={`/iptv/xmltv.xml${suffix}`}
+            />
+            <label className="ctv-connect-option">
+              <input
+                type="checkbox"
+                checked={enabledOnly}
+                onChange={(event) => setEnabledOnly(event.target.checked)}
+              />
+              <span>Only enabled channels</span>
+            </label>
+            <p>
+              <Info aria-hidden="true" size={13} />
+              Works with any IPTV player.
+            </p>
+          </div>
+        </>
+      )}
+    </div>
+  );
+}
+
+function TopBar({ route }: { route: ScreenRoute }) {
+  return (
+    <header className="ctv-topbar">
+      <div className="ctv-topbar-title">
+        <p>{route.kicker}</p>
+        <h1>{route.title}</h1>
+      </div>
+
+      <label className="ctv-topbar-search">
+        <Search aria-hidden="true" size={15} />
+        <input type="search" aria-label="Search" placeholder="Search channels, schedules..." />
+      </label>
+
+      <div className="ctv-topbar-spacer" />
+
+      <div className="ctv-topbar-tools">
+        <ConnectMenu />
+        <span className="ctv-topbar-divider" />
+        <IconButton title="Documentation" size="sm">
+          <CircleHelp aria-hidden="true" size={17} />
+        </IconButton>
+        <IconButton title="Notifications" size="sm">
+          <Bell aria-hidden="true" size={17} />
+        </IconButton>
+        <span className="ctv-avatar">TB</span>
+      </div>
+
+      <Button startIcon={<Plus aria-hidden="true" size={15} />}>{route.primaryAction}</Button>
+    </header>
+  );
+}
+
+function OnAirCard({
+  number,
+  name,
+  program,
+  progress
+}: {
+  number: string;
+  name: string;
+  program: string;
+  progress: number;
+}) {
+  return (
+    <div className="ctv-onair-card">
+      <div className="ctv-onair-head">
+        <ChannelLogo name={name} size={34} />
+        <div>
+          <code>{number}</code>
+          <strong>{name}</strong>
+        </div>
+        <Badge tone="accent" dot>
+          On air
+        </Badge>
+      </div>
+      <p>{program}</p>
+      <ProgressBar value={progress} />
+    </div>
+  );
+}
+
+function LiveChannelsCard() {
+  const channelsQuery = useChannelsQuery();
+  const liveChannelCount = channelsQuery.channels?.length ?? 0;
+
+  return (
+    <Card
+      title={<h2>Live channels</h2>}
+      subtitle="Typed API client sample"
+      actions={
+        <Badge tone={channelsQuery.status === 'error' ? 'error' : 'ok'}>
+          {channelsQuery.status === 'success' ? `${liveChannelCount} live` : 'Connecting'}
+        </Badge>
+      }
+    >
+      <div className="ctv-live-channel-body">
+        {channelsQuery.status === 'loading' && (
+          <div className="ctv-live-channel-state">
+            <Spinner size={18} tone="accent" />
+            <span>Loading channels</span>
+          </div>
+        )}
+
+        {channelsQuery.status === 'error' && (
+          <div className="ctv-live-channel-state ctv-live-channel-state-error">
+            <span>Channel API unavailable</span>
+            <strong>{channelsQuery.error}</strong>
+          </div>
+        )}
+
+        {channelsQuery.status === 'success' && channelsQuery.channels.length === 0 && (
+          <div className="ctv-live-channel-state">
+            <span>No channels found</span>
+          </div>
+        )}
+
+        {channelsQuery.status === 'success' && channelsQuery.channels.length > 0 && (
+          <div className="ctv-live-channel-list">
+            {channelsQuery.channels.map((channel) => (
+              <div className="ctv-live-channel-row" key={channel.id}>
+                <ChannelLogo name={channel.name ?? channel.number ?? 'Channel'} size={34} />
+                <div>
+                  <strong>{channel.name ?? 'Unnamed channel'}</strong>
+                  <span>{channel.streamingMode ?? 'Default streaming'}</span>
+                </div>
+                <code>{channel.number ?? channel.id}</code>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </Card>
+  );
+}
+
+function DashboardScreen() {
+  return (
+    <div className="ctv-screen-stack">
+      <section className="ctv-dashboard-grid">
+        <Card title={<h2>On air now</h2>} subtitle="Current programmes by channel">
+          <div className="ctv-onair-grid">
+            <OnAirCard number="12.1" name="Classic Cartoons" program="Duck Dodgers marathon" progress={62} />
+            <OnAirCard number="30.2" name="World News" program="World update" progress={34} />
+            <OnAirCard number="41" name="Late Night" program="Cult cinema block" progress={81} />
+          </div>
+        </Card>
+
+        <Card title={<h2>Health checks</h2>} subtitle="Condensed server status">
+          <div className="ctv-health-list">
+            <StatusDot status="ok" label="Database" />
+            <StatusDot status="ok" label="FFmpeg" />
+            <StatusDot status="warn" label="EPG refresh delayed" />
+            <StatusDot status="ok" label="Storage" />
+          </div>
+        </Card>
+      </section>
+
+      <section className="ctv-stat-row" aria-label="At a glance">
+        <Stat label="Channels" value="128" icon={<Tv aria-hidden="true" size={15} />} />
+        <Stat label="Active playouts" value="23" icon={<Radio aria-hidden="true" size={15} />} />
+        <Stat label="Transcodes" value="7" icon={<Play aria-hidden="true" size={15} />} delta="+2" deltaTone="up" />
+        <Stat label="Libraries" value="4" icon={<Library aria-hidden="true" size={15} />} />
+      </section>
+
+      <section className="ctv-dashboard-grid">
+        <Card title={<h2>Recent activity</h2>} subtitle="Scans, playout resets, and runtime notices">
+          <div className="ctv-activity-list">
+            <div>
+              <Tag tone="accent">Scan</Tag>
+              <span>Movies library completed in 00:04:21</span>
+              <code>18:03</code>
+            </div>
+            <div>
+              <Tag>Playout</Tag>
+              <span>Retro Cartoons advanced to next item</span>
+              <code>17:52</code>
+            </div>
+            <div>
+              <Tag>Warn</Tag>
+              <span>News 24 FFmpeg profile is not normalizing audio</span>
+              <code>17:31</code>
+            </div>
+          </div>
+        </Card>
+
+        <LiveChannelsCard />
+      </section>
+    </div>
+  );
+}
+
+function PlaceholderScreen({ route }: { route: ScreenRoute }) {
+  return (
+    <div className="ctv-screen-stack">
+      <Card
+        title={<h2>{route.placeholder}</h2>}
+        subtitle={route.description}
+        actions={<Badge tone="accent">Issue slot</Badge>}
+      >
+        <div className="ctv-placeholder-layout">
+          <div className="ctv-placeholder-icon">{route.icon}</div>
+          <div>
+            <h3>Screen slot</h3>
+            <p>{route.description}</p>
+          </div>
+        </div>
+      </Card>
+      <Card title={<h2>Ready for implementation</h2>} subtitle="Screen-specific work lands in later issues">
+        <div className="ctv-slot-grid">
+          <span>Controls</span>
+          <span>Data table</span>
+          <span>Details panel</span>
+        </div>
+      </Card>
+    </div>
+  );
+}
+
+function ScreenContent({ route }: { route: ScreenRoute }) {
+  if (route.id === 'dashboard') {
+    return <DashboardScreen />;
+  }
+
+  return <PlaceholderScreen route={route} />;
+}
 
 export function App() {
   const [theme, setTheme] = useState<DesignSystemThemeId>(() => getStoredDesignSystemTheme());
-  const [showDisabled, setShowDisabled] = useState(true);
-  const [inEpg, setInEpg] = useState(true);
-  const [galleryTab, setGalleryTab] = useState('streaming');
-  const channelsQuery = useChannelsQuery();
-  const liveChannelCount = channelsQuery.channels?.length ?? 0;
+  const [activeRoute, setActiveRoute] = useState<ScreenRoute>(() => routeFromLocation());
 
   useEffect(() => {
     applyDesignSystemTheme(theme);
   }, [theme]);
 
+  useEffect(() => {
+    const onPopState = () => setActiveRoute(routeFromLocation());
+
+    window.addEventListener('popstate', onPopState);
+
+    return () => window.removeEventListener('popstate', onPopState);
+  }, []);
+
+  const route = useMemo(() => activeRoute, [activeRoute]);
+
+  const navigate = (nextRoute: ScreenRoute, event: MouseEvent) => {
+    event.preventDefault();
+
+    if (nextRoute.id === route.id) {
+      return;
+    }
+
+    window.history.pushState(null, '', routeHref(nextRoute));
+    setActiveRoute(nextRoute);
+  };
+
   return (
     <div className="ctv-app-shell">
-      <aside className="ctv-sidebar">
-        <div className="ctv-brand">
-          <img src={chicoryIconUrl} alt="" aria-hidden="true" />
-          <div>
-            <h1>ChicoryTV</h1>
-            <span>Media server console</span>
-          </div>
-        </div>
-
-        <nav aria-label="Primary" className="ctv-nav">
-          {navItems.map(({ label, icon, active }) => (
-            <NavItem key={label} icon={icon} label={label} active={active} href="/app/" />
-          ))}
-        </nav>
-      </aside>
-
-      <main className="ctv-main">
-        <header className="ctv-topbar">
-          <div>
-            <p>Foundation</p>
-            <h2>SPA foundation ready</h2>
-          </div>
-          <Button startIcon={<Play aria-hidden="true" size={15} />}>Open App</Button>
-        </header>
-
-        <section className="ctv-theme-switcher" aria-label="Theme">
-          <span>Theme</span>
-          <div>
-            {designSystemThemes.map(({ id, description, label }) => (
-              <button
-                key={id}
-                type="button"
-                className={`ctv-theme-swatch ctv-theme-swatch-${id}`}
-                aria-label={description}
-                aria-pressed={theme === id}
-                title={label}
-                onClick={() => setTheme(id)}
-              />
-            ))}
-          </div>
-        </section>
-
-        <section className="ctv-panel" aria-labelledby="foundation-title">
-          <div className="ctv-panel-header">
-            <div>
-              <p>Issue #78</p>
-              <h3 id="foundation-title">React shell mounted at /app</h3>
-            </div>
-            <span className="ctv-status">
-              <Radio aria-hidden="true" size={14} />
-              Ready
-            </span>
-          </div>
-
-          <div className="ctv-stats">
-            {stats.map(({ label, value }) => (
-              <div key={label}>
-                <span>{label}</span>
-                <strong>{label === 'Channels' ? liveChannelCount : value}</strong>
-              </div>
-            ))}
-          </div>
-        </section>
-
-        <section className="ctv-panel ctv-live-panel" aria-labelledby="live-channels-title">
-          <div className="ctv-panel-header">
-            <div>
-              <p>Issue #81</p>
-              <h3 id="live-channels-title">Live channels</h3>
-            </div>
-            <span className="ctv-status">
-              <Tv aria-hidden="true" size={14} />
-              {channelsQuery.status === 'success' ? `${liveChannelCount} live` : 'Connecting'}
-            </span>
-          </div>
-
-          <div className="ctv-live-channel-body">
-            {channelsQuery.status === 'loading' && (
-              <div className="ctv-live-channel-state">
-                <Spinner size={18} tone="accent" />
-                <span>Loading channels</span>
-              </div>
-            )}
-
-            {channelsQuery.status === 'error' && (
-              <div className="ctv-live-channel-state ctv-live-channel-state-error">
-                <span>Channel API unavailable</span>
-                <strong>{channelsQuery.error}</strong>
-              </div>
-            )}
-
-            {channelsQuery.status === 'success' && channelsQuery.channels.length === 0 && (
-              <div className="ctv-live-channel-state">
-                <span>No channels found</span>
-              </div>
-            )}
-
-            {channelsQuery.status === 'success' && channelsQuery.channels.length > 0 && (
-              <div className="ctv-live-channel-list">
-                {channelsQuery.channels.map((channel) => (
-                  <div className="ctv-live-channel-row" key={channel.id}>
-                    <ChannelLogo name={channel.name ?? channel.number ?? 'Channel'} size={34} />
-                    <div>
-                      <strong>{channel.name ?? 'Unnamed channel'}</strong>
-                      <span>{channel.streamingMode ?? 'Default streaming'}</span>
-                    </div>
-                    <code>{channel.number ?? channel.id}</code>
-                  </div>
-                ))}
-              </div>
-            )}
-          </div>
-        </section>
-
-        <section className="ctv-gallery" aria-labelledby="gallery-title">
-          <div className="ctv-gallery-heading">
-            <p>Issue #80</p>
-            <h2 id="gallery-title">Component gallery</h2>
-          </div>
-
-          <div className="ctv-gallery-grid">
-            <Card title={<h3>Forms</h3>} subtitle="Button, IconButton, Input, Select, Switch, Checkbox">
-              <div className="ctv-demo-stack">
-                <div className="ctv-demo-row">
-                  <Button variant="primary" startIcon={<Plus aria-hidden="true" size={16} />}>
-                    Add Channel
-                  </Button>
-                  <Button variant="secondary">Edit Numbers</Button>
-                  <Button variant="ghost" size="sm">
-                    Cancel
-                  </Button>
-                  <Button variant="danger" startIcon={<Trash2 aria-hidden="true" size={15} />}>
-                    Delete
-                  </Button>
-                  <Button loading>Saving</Button>
-                </div>
-                <div className="ctv-demo-row">
-                  <IconButton title="Preview" variant="solid">
-                    <Play aria-hidden="true" size={16} />
-                  </IconButton>
-                  <IconButton title="Refresh">
-                    <RefreshCw aria-hidden="true" size={16} />
-                  </IconButton>
-                  <IconButton title="Info">
-                    <Info aria-hidden="true" size={16} />
-                  </IconButton>
-                  <Switch checked={showDisabled} onChange={setShowDisabled} label="Show disabled" />
-                  <Checkbox checked={inEpg} onChange={setInEpg} label="In EPG" />
-                </div>
-                <div className="ctv-demo-fields">
-                  <Input label="Channel name" value="Retro Cartoons" onChange={() => {}} />
-                  <Select
-                    label="Streaming mode"
-                    value="HLS Direct"
-                    onChange={() => {}}
-                    options={['HLS Direct', 'MPEG-TS']}
-                  />
-                  <Input leadingIcon={<Search aria-hidden="true" size={16} />} placeholder="Search channels" />
-                  <Input
-                    label="Channel number"
-                    value="5.1"
-                    error="Already in use"
-                    onChange={() => {}}
-                  />
-                </div>
-              </div>
-            </Card>
-
-            <Card title={<h3>Data display</h3>} subtitle="Badge, StatusDot, Tag, ChannelLogo, Stat, ProgressBar">
-              <div className="ctv-demo-stack">
-                <div className="ctv-demo-row">
-                  <Badge tone="accent" dot>
-                    Live
-                  </Badge>
-                  <Badge tone="ok">Healthy</Badge>
-                  <Badge tone="warn">Not normalizing</Badge>
-                  <Badge tone="error" solid>
-                    Error
-                  </Badge>
-                  <Badge tone="neutral">HLS Segmenter</Badge>
-                  <StatusDot status="live" label="On air" />
-                  <StatusDot status="ok" label="Idle" />
-                </div>
-                <div className="ctv-demo-row">
-                  <Tag icon={<TagIcon aria-hidden="true" size={12} />}>genre: comedy</Tag>
-                  <Tag tone="accent" onRemove={() => {}}>
-                    released 1990
-                  </Tag>
-                  <ChannelLogo name="Retro Cartoons" size={38} />
-                  <ChannelLogo name="News 24" size={38} />
-                  <ChannelLogo name="Late Night" size={38} />
-                </div>
-                <div className="ctv-stat-grid">
-                  <Stat label="Active streams" value="7" icon={<Radio aria-hidden="true" size={15} />} delta="+2" deltaTone="up" />
-                  <Stat label="Channels" value="128" icon={<Tv aria-hidden="true" size={15} />} />
-                  <Stat label="Scheduled" value="1,204" icon={<CalendarClock aria-hidden="true" size={15} />} />
-                  <Stat label="Uptime" value="14d 06h" icon={<Activity aria-hidden="true" size={15} />} />
-                </div>
-                <div className="ctv-demo-progress">
-                  <ProgressBar value={62} showLabel />
-                  <ProgressBar value={null} tone="accent" />
-                  <ProgressBar value={100} tone="ok" showLabel />
-                </div>
-              </div>
-            </Card>
-
-            <Card title={<h3>Feedback</h3>} subtitle="Toast, Tooltip, Spinner">
-              <div className="ctv-feedback-grid">
-                <div className="ctv-demo-stack">
-                  <Toast
-                    tone="ok"
-                    title="Channel saved"
-                    message="Retro Cartoons is now on air."
-                    onClose={() => {}}
-                  />
-                  <Toast
-                    tone="warn"
-                    title="FFmpeg profile is not normalizing"
-                    message="Playback may stutter in some browsers."
-                    onClose={() => {}}
-                  />
-                  <Toast
-                    tone="error"
-                    title="Playout build failed"
-                    message="No items match the schedule window."
-                    onClose={() => {}}
-                  />
-                </div>
-                <div className="ctv-demo-row">
-                  <Tooltip label="Reset playout">
-                    <IconButton title="Reset">
-                      <RefreshCw aria-hidden="true" size={16} />
-                    </IconButton>
-                  </Tooltip>
-                  <Tooltip label="Troubleshoot" placement="bottom">
-                    <IconButton title="Troubleshoot">
-                      <Info aria-hidden="true" size={16} />
-                    </IconButton>
-                  </Tooltip>
-                  <Spinner size={18} tone="accent" />
-                  <Spinner size={18} tone="muted" />
-                </div>
-              </div>
-            </Card>
-
-            <Card title={<h3>Navigation</h3>} subtitle="NavItem, NavSection, Tabs">
-              <div className="ctv-navigation-demo">
-                <div className="ctv-navigation-panel">
-                  <NavItem icon={<LayoutDashboard aria-hidden="true" size={16} />} label="Dashboard" />
-                  <NavItem icon={<Tv aria-hidden="true" size={16} />} label="Channels" active />
-                  <NavItem icon={<CalendarClock aria-hidden="true" size={16} />} label="Schedules" />
-                  <NavItem
-                    icon={<ListVideo aria-hidden="true" size={16} />}
-                    label="Playouts"
-                    badge={3}
-                    badgeTone="warn"
-                  />
-                  <NavSection>Media</NavSection>
-                  <NavItem icon={<Library aria-hidden="true" size={16} />} label="Libraries" />
-                  <NavItem icon={<FolderTree aria-hidden="true" size={16} />} label="Collections" />
-                </div>
-                <Tabs
-                  value={galleryTab}
-                  onChange={setGalleryTab}
-                  tabs={[
-                    { value: 'general', label: 'General' },
-                    { value: 'streaming', label: 'Streaming' },
-                    { value: 'items', label: 'Schedule items', count: 12 }
-                  ]}
-                />
-              </div>
-            </Card>
-          </div>
-        </section>
-      </main>
+      <Sidebar activeRoute={route} onNavigate={navigate} />
+      <div className="ctv-shell-body">
+        <TopBar route={route} />
+        <main className="ctv-main">
+          <ThemeSwitcher theme={theme} onThemeChange={setTheme} />
+          <ScreenContent route={route} />
+        </main>
+      </div>
     </div>
   );
 }
diff --git a/web/src/shell.css b/web/src/shell.css
index d6ca62102..9b1a0108f 100644
--- a/web/src/shell.css
+++ b/web/src/shell.css
@@ -2,141 +2,196 @@
   min-height: 100vh;
   display: grid;
   grid-template-columns: var(--sidebar-w, 232px) minmax(0, 1fr);
-  background: var(--surface-app, #12100e);
-  color: var(--text-primary, #f0ebe4);
+  overflow: hidden;
+  background: var(--surface-app);
+  color: var(--text-primary);
   font-family: var(--font-sans, system-ui, sans-serif);
   font-size: var(--text-sm, 13px);
-  line-height: var(--leading-normal, 1.5);
 }
 
 .ctv-sidebar {
-  border-right: 1px solid var(--border-hairline, #2e2823);
-  background: var(--ctv-bg-sunken, #0c0b09);
-  padding: var(--space-7, 16px) var(--space-5, 10px);
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  border-right: 1px solid var(--border-hairline);
+  background: var(--surface-card);
 }
 
 .ctv-brand {
+  height: var(--topbar-h, 52px);
   display: flex;
+  flex: 0 0 auto;
   align-items: center;
   gap: var(--space-5, 10px);
-  padding: 0 var(--space-5, 10px) var(--space-8, 20px);
+  padding: 0 14px;
+  border-bottom: 1px solid var(--border-hairline);
 }
 
 .ctv-brand img {
-  width: 34px;
-  height: 34px;
+  width: 24px;
+  height: 24px;
 }
 
-.ctv-brand h1,
-.ctv-topbar h2,
-.ctv-panel h3 {
-  margin: 0;
-  letter-spacing: var(--tracking-normal, 0);
-}
-
-.ctv-brand h1 {
+.ctv-brand-wordmark {
+  color: var(--text-primary);
   font-size: var(--text-lg, 16px);
-  line-height: var(--leading-tight, 1.2);
+  font-weight: var(--weight-semibold, 600);
+  line-height: 1;
 }
 
-.ctv-brand span,
-.ctv-topbar p,
-.ctv-panel-header p,
-.ctv-stats span {
-  color: var(--text-secondary, #9aa4b2);
-}
-
-.ctv-brand span,
-.ctv-panel-header p,
-.ctv-topbar p {
-  font-size: var(--text-xs, 12px);
+.ctv-brand-wordmark span {
+  color: var(--action-primary);
 }
 
 .ctv-nav {
-  display: grid;
-  gap: var(--space-2, 4px);
+  flex: 1;
+  overflow: auto;
+  padding: var(--space-4, 8px) var(--space-4, 8px) var(--space-8, 20px);
 }
 
-.ctv-nav a {
-  position: relative;
+.ctv-sidebar-health {
+  min-height: 58px;
+  display: flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-5, 10px);
+  padding: var(--space-6, 12px) 14px;
+  border-top: 1px solid var(--border-hairline);
+}
+
+.ctv-sidebar-health div {
+  min-width: 0;
+  display: grid;
+  gap: var(--space-1, 2px);
+}
+
+.ctv-sidebar-health span {
+  color: var(--text-disabled);
+  font-size: var(--text-2xs, 11px);
+}
+
+.ctv-sidebar-health code {
+  color: var(--text-secondary);
+  font-family: var(--font-mono, ui-monospace, monospace);
+  font-size: var(--text-2xs, 11px);
+}
+
+.ctv-shell-body {
+  min-width: 0;
+  height: 100vh;
+  display: grid;
+  grid-template-rows: var(--topbar-h, 52px) minmax(0, 1fr);
+  overflow: hidden;
+}
+
+.ctv-topbar {
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: var(--space-7, 16px);
+  padding: 0 20px;
+  border-bottom: 1px solid var(--border-hairline);
+  background: var(--surface-app);
+}
+
+.ctv-topbar-title {
+  width: 150px;
+  flex: 0 0 auto;
+  min-width: 0;
+}
+
+.ctv-topbar-title p {
+  margin: 0 0 var(--space-1, 2px);
+  color: var(--text-disabled);
+  font-size: var(--text-2xs, 11px);
+  font-weight: var(--weight-semibold, 600);
+  letter-spacing: var(--tracking-caps, 0.06em);
+  line-height: 1;
+  text-transform: uppercase;
+}
+
+.ctv-topbar-title h1 {
+  margin: 0;
+  overflow: hidden;
+  color: var(--text-primary);
+  font-size: var(--text-lg, 16px);
+  font-weight: var(--weight-semibold, 600);
+  letter-spacing: var(--tracking-tight, -0.01em);
+  line-height: 1.1;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ctv-topbar-search {
+  width: min(300px, 28vw);
+  height: var(--control-h-sm, 28px);
   display: flex;
   align-items: center;
   gap: var(--space-4, 8px);
-  height: var(--control-h, 34px);
-  padding: 0 var(--space-5, 10px);
+  border: 1px solid var(--border-control);
   border-radius: var(--radius-sm, 5px);
-  color: var(--text-secondary, #a89e92);
-  text-decoration: none;
-  font-size: var(--text-sm, 13px);
-  transition:
-    background var(--dur-fast, 90ms) var(--ease-standard, ease),
-    color var(--dur-fast, 90ms) var(--ease-standard, ease);
+  background: var(--ctv-bg-sunken);
+  color: var(--text-disabled);
+  padding: 0 var(--space-5, 10px);
 }
 
-.ctv-nav a:hover,
-.ctv-nav a.is-active {
-  background: var(--surface-selected, #2c2620);
-  color: var(--text-primary, #f0ebe4);
+.ctv-topbar-search:focus-within {
+  border-color: var(--action-primary);
+  box-shadow: var(--ring-focus);
 }
 
-.ctv-nav a.is-active::before {
-  position: absolute;
-  left: 0;
-  width: 3px;
-  height: var(--space-8, 20px);
+.ctv-topbar-search input {
+  min-width: 0;
+  flex: 1;
+  border: 0;
+  outline: 0;
+  background: transparent;
+  color: var(--text-primary);
+  font: inherit;
+}
+
+.ctv-topbar-search input::placeholder {
+  color: var(--text-disabled);
+}
+
+.ctv-topbar-spacer {
+  flex: 1;
+}
+
+.ctv-topbar-tools {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3, 6px);
+}
+
+.ctv-topbar-divider {
+  width: 1px;
+  height: 18px;
+  margin: 0 var(--space-2, 4px);
+  background: var(--border-hairline);
+}
+
+.ctv-avatar {
+  width: 28px;
+  height: 28px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid color-mix(in srgb, var(--action-primary) 35%, transparent);
   border-radius: var(--radius-pill, 999px);
-  background: var(--action-primary, #e08a3c);
-  content: "";
+  background: var(--ctv-accent-soft);
+  color: var(--action-primary);
+  font-family: var(--font-mono, ui-monospace, monospace);
+  font-size: var(--text-2xs, 11px);
+  font-weight: var(--weight-semibold, 600);
 }
 
 .ctv-main {
   min-width: 0;
-  padding: var(--space-9, 24px) var(--pad-page, 32px);
-}
-
-.ctv-topbar {
-  min-height: var(--topbar-h, 52px);
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--space-7, 16px);
-  border-bottom: 1px solid var(--border-hairline, #2e2823);
-  padding-bottom: var(--space-8, 20px);
-}
-
-.ctv-topbar h2 {
-  font-size: var(--text-xl, 20px);
-  line-height: var(--leading-tight, 1.2);
-}
-
-.ctv-topbar p,
-.ctv-panel-header p {
-  margin: 0 0 var(--space-2, 4px);
-  text-transform: uppercase;
-  font-weight: var(--weight-semibold, 600);
-  letter-spacing: var(--tracking-caps, 0.06em);
-}
-
-.ctv-primary-action {
-  height: var(--control-h, 34px);
-  display: inline-flex;
-  align-items: center;
-  gap: var(--gap-inline, 8px);
-  border: 1px solid var(--action-primary, #e08a3c);
-  border-radius: var(--radius-sm, 5px);
-  background: var(--action-primary, #e08a3c);
-  color: var(--text-on-accent, #1f1204);
-  padding: 0 var(--space-6, 12px);
-  font: inherit;
-  font-weight: var(--weight-semibold, 600);
-  transition:
-    background var(--dur-fast, 90ms) var(--ease-standard, ease),
-    border-color var(--dur-fast, 90ms) var(--ease-standard, ease);
-}
-
-.ctv-primary-action:hover {
-  border-color: var(--action-primary-hover, #ec9a52);
-  background: var(--action-primary-hover, #ec9a52);
+  overflow: auto;
+  padding: var(--space-7, 16px) var(--pad-page, 32px) var(--pad-page, 32px);
 }
 
 .ctv-theme-switcher {
@@ -144,12 +199,12 @@
   align-items: center;
   justify-content: flex-end;
   gap: var(--gap-inline, 8px);
-  margin-top: var(--space-7, 16px);
-  color: var(--text-secondary, #a89e92);
+  margin-bottom: var(--space-7, 16px);
+  color: var(--text-secondary);
   font-size: var(--text-xs, 12px);
 }
 
-.ctv-theme-switcher span {
+.ctv-theme-switcher > span {
   font-weight: var(--weight-semibold, 600);
   letter-spacing: var(--tracking-caps, 0.06em);
   text-transform: uppercase;
@@ -167,22 +222,15 @@
   border-radius: var(--radius-pill, 999px);
   cursor: pointer;
   padding: 0;
-  transition:
-    border-color var(--dur-fast, 90ms) var(--ease-standard, ease),
-    transform var(--dur-fast, 90ms) var(--ease-standard, ease);
-}
-
-.ctv-theme-swatch:hover {
-  transform: translateY(-1px);
 }
 
 .ctv-theme-swatch:focus-visible {
   outline: 0;
-  box-shadow: var(--ring-focus, 0 0 0 3px var(--focus-ring));
+  box-shadow: var(--ring-focus);
 }
 
 .ctv-theme-swatch[aria-pressed="true"] {
-  border-color: var(--text-primary, #f0ebe4);
+  border-color: var(--text-primary);
 }
 
 .ctv-theme-swatch-warm {
@@ -197,88 +245,287 @@
   background: linear-gradient(135deg, #5b7cfa 0 50%, #f0663f 50% 100%);
 }
 
-.ctv-panel {
-  margin-top: var(--space-9, 24px);
-  border: 1px solid var(--border-hairline, #2e2823);
-  border-radius: var(--radius-md, 7px);
-  background: var(--surface-card, #1c1917);
+.ctv-connect {
+  position: relative;
 }
 
-.ctv-panel-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--space-7, 16px);
-  padding: var(--space-7, 16px);
-  border-bottom: 1px solid var(--border-hairline, #2e2823);
-}
-
-.ctv-panel h3 {
-  font-size: var(--text-lg, 16px);
-  line-height: var(--leading-snug, 1.35);
-}
-
-.ctv-status {
+.ctv-connect-button {
+  height: var(--control-h-sm, 28px);
   display: inline-flex;
   align-items: center;
   gap: var(--space-3, 6px);
-  border-radius: var(--radius-pill, 999px);
-  background: var(--ctv-ok-soft, rgba(63, 185, 132, 0.14));
-  color: var(--status-ok, #3fb984);
-  padding: var(--space-2, 4px) var(--space-4, 8px);
-  font-size: var(--text-xs, 12px);
-  font-weight: var(--weight-semibold, 600);
+  border: 1px solid var(--border-control);
+  border-radius: var(--radius-sm, 5px);
+  background: var(--surface-raised);
+  color: var(--text-primary);
+  cursor: pointer;
+  padding: 0 var(--space-5, 10px);
+  font: inherit;
+  font-weight: var(--weight-medium, 500);
 }
 
-.ctv-stats {
+.ctv-connect-button svg:first-child {
+  color: var(--action-primary);
+}
+
+.ctv-connect-dismiss {
+  position: fixed;
+  inset: 0;
+  z-index: 40;
+  border: 0;
+  background: transparent;
+  cursor: default;
+}
+
+.ctv-connect-menu {
+  position: absolute;
+  top: calc(100% + 8px);
+  right: 0;
+  z-index: 41;
+  width: 340px;
+  display: grid;
+  gap: var(--space-4, 8px);
+  border: 1px solid var(--border-control);
+  border-radius: var(--radius-md, 7px);
+  background: var(--surface-raised);
+  box-shadow: var(--shadow-pop);
+  padding: 14px;
+}
+
+.ctv-connect-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: var(--space-2, 4px);
+}
+
+.ctv-connect-header strong {
+  font-size: var(--text-sm, 13px);
+}
+
+.ctv-connect-header span,
+.ctv-connect-menu p {
+  color: var(--text-disabled);
+  font-size: var(--text-2xs, 11px);
+}
+
+.ctv-connect-endpoint {
+  min-width: 0;
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: center;
+  gap: var(--space-5, 10px);
+  border: 1px solid var(--border-hairline);
+  border-radius: var(--radius-sm, 5px);
+  background: var(--ctv-bg-sunken);
+  padding: var(--space-5, 10px);
+}
+
+.ctv-connect-endpoint-icon {
+  width: 30px;
+  height: 30px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-xs, 3px);
+  background: var(--surface-selected);
+  color: var(--action-primary);
+}
+
+.ctv-connect-endpoint div {
+  min-width: 0;
+  display: grid;
+  gap: var(--space-1, 2px);
+}
+
+.ctv-connect-endpoint strong {
+  color: var(--text-primary);
+  font-size: var(--text-xs, 12px);
+}
+
+.ctv-connect-endpoint code {
+  overflow: hidden;
+  color: var(--text-secondary);
+  font-family: var(--font-mono, ui-monospace, monospace);
+  font-size: var(--text-2xs, 11px);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ctv-connect-endpoint button {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2, 4px);
+  border: 1px solid var(--border-control);
+  border-radius: var(--radius-xs, 3px);
+  background: var(--surface-raised);
+  color: var(--text-secondary);
+  cursor: pointer;
+  padding: var(--space-2, 4px) var(--space-4, 8px);
+  font: inherit;
+  font-size: var(--text-2xs, 11px);
+  font-weight: var(--weight-medium, 500);
+}
+
+.ctv-connect-option {
+  display: flex;
+  align-items: center;
+  gap: var(--space-4, 8px);
+  border: 1px solid var(--border-hairline);
+  border-radius: var(--radius-sm, 5px);
+  background: var(--ctv-bg-sunken);
+  color: var(--text-primary);
+  cursor: pointer;
+  padding: var(--space-4, 8px) var(--space-5, 10px);
+  font-size: var(--text-xs, 12px);
+}
+
+.ctv-connect-option input {
+  accent-color: var(--action-primary);
+}
+
+.ctv-connect-menu p {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3, 6px);
+  margin: var(--space-2, 4px) 0 0;
+}
+
+.ctv-screen-stack {
+  display: grid;
+  gap: var(--space-7, 16px);
+}
+
+.ctv-dashboard-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
+  gap: var(--space-7, 16px);
+  align-items: start;
+}
+
+.ctv-card-title h2,
+.ctv-placeholder-layout h3 {
+  margin: 0;
+  color: var(--text-primary);
+  font-size: var(--text-md, 14px);
+  font-weight: var(--weight-semibold, 600);
+  line-height: 1.2;
+}
+
+.ctv-onair-grid {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: var(--space-5, 10px);
 }
 
-.ctv-stats div {
+.ctv-onair-card {
+  min-width: 0;
+  display: grid;
+  gap: var(--space-5, 10px);
+  border: 1px solid var(--border-hairline);
+  border-radius: var(--radius-md, 7px);
+  background: var(--ctv-bg-sunken);
+  padding: var(--space-6, 12px);
+}
+
+.ctv-onair-head {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: center;
+  gap: var(--space-4, 8px);
+}
+
+.ctv-onair-head div {
+  min-width: 0;
+  display: grid;
+  gap: var(--space-1, 2px);
+}
+
+.ctv-onair-head code,
+.ctv-activity-list code,
+.ctv-live-channel-row code {
+  color: var(--text-secondary);
+  font-family: var(--font-mono, ui-monospace, monospace);
+  font-size: var(--text-2xs, 11px);
+}
+
+.ctv-onair-head strong,
+.ctv-onair-card p,
+.ctv-live-channel-row strong,
+.ctv-live-channel-row span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ctv-onair-card p {
+  margin: 0;
+  color: var(--text-primary);
+}
+
+.ctv-health-list {
+  display: grid;
+  gap: var(--space-5, 10px);
+}
+
+.ctv-stat-row {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: var(--space-7, 16px);
+}
+
+.ctv-activity-list {
   display: grid;
   gap: var(--space-3, 6px);
-  padding: var(--space-7, 16px);
-  border-right: 1px solid var(--border-hairline, #2e2823);
 }
 
-.ctv-stats div:last-child {
-  border-right: 0;
+.ctv-activity-list div {
+  min-height: 40px;
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: center;
+  gap: var(--space-4, 8px);
+  border-bottom: 1px solid var(--border-hairline);
 }
 
-.ctv-stats strong {
-  font-family: var(--font-mono, ui-monospace, monospace);
-  font-size: var(--text-2xl, 26px);
-  font-feature-settings: var(--numeric-feature);
-  font-variant-numeric: tabular-nums;
-  line-height: 1;
+.ctv-activity-list div:last-child {
+  border-bottom: 0;
+}
+
+.ctv-activity-list span:nth-child(2) {
+  overflow: hidden;
+  color: var(--text-primary);
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .ctv-live-channel-body {
-  padding: var(--space-7, 16px);
+  min-height: 96px;
 }
 
 .ctv-live-channel-state {
-  min-height: 72px;
+  min-height: 96px;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: var(--space-4, 8px);
-  color: var(--text-secondary, #a89e92);
+  color: var(--text-secondary);
 }
 
 .ctv-live-channel-state-error {
+  min-height: 0;
   align-items: flex-start;
   flex-direction: column;
-  border: 1px solid var(--status-error, #f0663f);
+  justify-content: flex-start;
+  border: 1px solid var(--status-error);
   border-radius: var(--radius-md, 7px);
-  background: var(--ctv-error-soft, rgba(240, 102, 63, 0.14));
-  color: var(--text-primary, #f0ebe4);
+  background: var(--ctv-error-soft);
+  color: var(--text-primary);
   padding: var(--space-6, 12px);
 }
 
 .ctv-live-channel-state-error span {
-  color: var(--status-error, #f0663f);
+  color: var(--status-error);
   font-size: var(--text-xs, 12px);
   font-weight: var(--weight-semibold, 600);
   letter-spacing: var(--tracking-caps, 0.06em);
@@ -296,169 +543,123 @@
   grid-template-columns: auto minmax(0, 1fr) auto;
   align-items: center;
   gap: var(--space-5, 10px);
-  border: 1px solid var(--border-hairline, #2e2823);
+  border: 1px solid var(--border-hairline);
   border-radius: var(--radius-sm, 5px);
-  background: var(--surface-raised, #211d19);
+  background: var(--ctv-bg-sunken);
   padding: var(--space-4, 8px);
 }
 
 .ctv-live-channel-row div {
   min-width: 0;
   display: grid;
-}
-
-.ctv-live-channel-row strong,
-.ctv-live-channel-row span {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  gap: var(--space-1, 2px);
 }
 
 .ctv-live-channel-row span {
-  color: var(--text-secondary, #a89e92);
+  color: var(--text-secondary);
   font-size: var(--text-xs, 12px);
 }
 
 .ctv-live-channel-row code {
   border-radius: var(--radius-sm, 5px);
-  background: var(--surface-selected, #2c2620);
-  color: var(--text-primary, #f0ebe4);
-  font-family: var(--font-mono, ui-monospace, monospace);
-  font-size: var(--text-xs, 12px);
+  background: var(--surface-selected);
+  color: var(--text-primary);
   padding: var(--space-2, 4px) var(--space-3, 6px);
 }
 
-.ctv-gallery {
-  margin-top: var(--space-9, 24px);
+.ctv-placeholder-layout {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  align-items: center;
+  gap: var(--space-7, 16px);
+  min-height: 160px;
 }
 
-.ctv-gallery-heading {
-  margin-bottom: var(--space-7, 16px);
+.ctv-placeholder-icon {
+  width: 52px;
+  height: 52px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid color-mix(in srgb, var(--action-primary) 30%, transparent);
+  border-radius: var(--radius-md, 7px);
+  background: var(--ctv-accent-soft);
+  color: var(--action-primary);
 }
 
-.ctv-gallery-heading p {
-  margin: 0 0 var(--space-2, 4px);
-  color: var(--text-secondary, #a89e92);
+.ctv-placeholder-icon svg {
+  width: 22px;
+  height: 22px;
+}
+
+.ctv-placeholder-layout p {
+  max-width: 640px;
+  margin: var(--space-3, 6px) 0 0;
+  color: var(--text-secondary);
+}
+
+.ctv-slot-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: var(--space-5, 10px);
+}
+
+.ctv-slot-grid span {
+  min-height: 92px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px dashed var(--border-control);
+  border-radius: var(--radius-md, 7px);
+  background: var(--ctv-bg-sunken);
+  color: var(--text-secondary);
   font-size: var(--text-xs, 12px);
   font-weight: var(--weight-semibold, 600);
   letter-spacing: var(--tracking-caps, 0.06em);
   text-transform: uppercase;
 }
 
-.ctv-gallery-heading h2 {
-  margin: 0;
-  font-size: var(--text-xl, 20px);
-  line-height: var(--leading-tight, 1.2);
-}
-
-.ctv-gallery-grid {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: var(--space-7, 16px);
-}
-
-.ctv-card-title h3 {
-  margin: 0;
-  font-size: var(--text-md, 14px);
-  line-height: 1.2;
-}
-
-.ctv-demo-stack {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-7, 16px);
-}
-
-.ctv-demo-row {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: var(--space-5, 10px);
-}
-
-.ctv-demo-fields {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: var(--space-7, 16px);
-}
-
-.ctv-stat-grid {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: var(--space-8, 20px);
-}
-
-.ctv-demo-progress {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-6, 12px);
-}
-
-.ctv-feedback-grid {
-  display: grid;
-  grid-template-columns: minmax(260px, 1fr) auto;
-  gap: var(--space-7, 16px);
-  align-items: start;
-}
-
-.ctv-navigation-demo {
-  display: grid;
-  grid-template-columns: 216px minmax(0, 1fr);
-  gap: var(--space-8, 20px);
-  align-items: start;
-}
-
-.ctv-navigation-panel {
-  border: 1px solid var(--border-hairline, #2e2823);
-  border-radius: var(--radius-md, 7px);
-  background: var(--surface-card, #1c1917);
-  padding: var(--space-3, 6px);
-}
-
-@media (max-width: 720px) {
+@media (max-width: 980px) {
   .ctv-app-shell {
     grid-template-columns: 1fr;
+    overflow: auto;
+  }
+
+  .ctv-sidebar,
+  .ctv-shell-body {
+    height: auto;
   }
 
   .ctv-sidebar {
-    border-right: 0;
-    border-bottom: 1px solid var(--border-hairline, #2e2823);
+    position: sticky;
+    top: 0;
+    z-index: 20;
   }
 
   .ctv-nav,
-  .ctv-stats {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-
-  .ctv-main {
-    padding: var(--space-8, 20px) var(--space-7, 16px);
+  .ctv-sidebar-health {
+    display: none;
   }
 
   .ctv-topbar {
-    align-items: flex-start;
-    flex-direction: column;
+    flex-wrap: wrap;
+    height: auto;
+    min-height: var(--topbar-h, 52px);
+    padding: var(--space-4, 8px) var(--space-6, 12px);
   }
 
-  .ctv-theme-switcher {
-    justify-content: flex-start;
+  .ctv-topbar-search {
+    width: min(100%, 340px);
   }
 
-  .ctv-gallery-grid,
-  .ctv-demo-fields,
-  .ctv-feedback-grid,
-  .ctv-navigation-demo {
+  .ctv-main {
+    padding: var(--space-6, 12px);
+  }
+
+  .ctv-dashboard-grid,
+  .ctv-stat-row,
+  .ctv-onair-grid,
+  .ctv-slot-grid {
     grid-template-columns: 1fr;
   }
 }
-
-@media (prefers-reduced-motion: reduce) {
-  .ctv-nav a,
-  .ctv-primary-action,
-  .ctv-theme-swatch {
-    transition: none;
-  }
-
-  .ctv-theme-swatch:hover {
-    transform: none;
-  }
-}