# UI Shell Rework — Wave 1 (Foundation) 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:** Stand up a Tailwind + flyon-ui build pipeline in `services/web-ui` and define every CSS primitive the rework needs, without changing any user-visible page yet. End state: `docker compose up -d --build web-ui` succeeds, `app.[hash].css` is served, no existing page is broken.

**Architecture:** Add a Node build stage to the web-ui Dockerfile that runs `tailwindcss --minify` once at image-build time. Tailwind config defines a custom flyon-ui theme that maps the existing oklch palette into flyon-ui's color slots, preserving brand hue 266. CSS primitives are split one-per-file under `src/css/components/` so each file holds one responsibility and stays small. Runtime image stays nginx-static.

**Tech Stack:** Tailwind CSS 3, flyon-ui plugin, PostCSS, nginx (runtime), Docker multi-stage build. No JavaScript runtime added — build-only Node.

**Reference spec:** `docs/superpowers/specs/2026-05-21-ui-shell-rework-design.md`

---

## File structure

**Files this wave creates or modifies:**

```
services/web-ui/
├── Dockerfile                          (MODIFY: add Node build stage)
├── package.json                        (CREATE: tailwind/flyon-ui deps)
├── tailwind.config.js                  (CREATE: theme port + flyon-ui plugin)
├── postcss.config.js                   (CREATE: tailwindcss + autoprefixer)
├── .gitignore                          (MODIFY: ignore node_modules + dist)
├── nginx.conf                          (MODIFY: long-cache /dist/*)
├── src/
│   └── css/
│       ├── app.css                     (CREATE: Tailwind directives + @layer + imports)
│       └── components/
│           ├── tokens.css              (CREATE: :root oklch token definitions)
│           ├── motion.css              (CREATE: shimmer/stutter keyframes + reduced-motion)
│           ├── sidebar.css             (CREATE: .wd-sidebar, .wd-nav-item, IN DEV pill)
│           ├── topbar.css              (CREATE: .wd-topbar, .wd-breadcrumb, .wd-search)
│           ├── button.css              (CREATE: .wd-btn variants × sizes)
│           ├── form-controls.css       (CREATE: .wd-input, .wd-label, .wd-hint, .wd-toggle)
│           ├── field-group.css         (CREATE: tabbed-section primitive)
│           ├── slide-panel.css         (CREATE: locked-layout slide-panel)
│           ├── card-asset.css          (CREATE: asset card family)
│           ├── card-operational.css    (CREATE: operational card family)
│           ├── list-row.css            (CREATE: inline list row)
│           ├── empty-state.css         (CREATE: empty-state pattern)
│           ├── badge.css               (CREATE: status pills + signal badges)
│           └── toast.css               (CREATE: toast with top-strip)
├── public/
│   ├── dist/                           (CREATE: gitignored, build output target)
│   └── fonts/                          (CREATE: self-hosted woff2)
│       ├── inter-400.woff2
│       ├── inter-500.woff2
│       ├── inter-600.woff2
│       ├── jetbrains-mono-400.woff2
│       └── jetbrains-mono-600.woff2
└── (existing HTML files untouched in wave 1)
```

**Files this wave does NOT touch:** every `services/web-ui/public/*.html`. Wave 2+ migrates them.

---

## Tasks

### Task 1: Scaffold Node build deps

**Files:**
- Create: `services/web-ui/package.json`
- Modify: `services/web-ui/.gitignore`

- [ ] **Step 1: Create package.json**

Write `services/web-ui/package.json`:

```json
{
  "name": "wild-dragon-web-ui-build",
  "version": "0.1.0",
  "private": true,
  "description": "Build-time-only deps for the Wild Dragon web-ui Tailwind/flyon-ui pipeline. Not shipped at runtime.",
  "scripts": {
    "build:css": "tailwindcss -i ./src/css/app.css -o ./public/dist/app.css --minify"
  },
  "devDependencies": {
    "tailwindcss": "^3.4.0",
    "postcss": "^8.4.35",
    "autoprefixer": "^10.4.17",
    "flyonui": "^1.0.0"
  }
}
```

- [ ] **Step 2: Update .gitignore**

Append to `services/web-ui/.gitignore` (create if missing):

```gitignore
node_modules/
public/dist/
```

- [ ] **Step 3: Commit**

```bash
cd /opt/wild-dragon
HOME=/root git add services/web-ui/package.json services/web-ui/.gitignore
HOME=/root git commit -m "web-ui: scaffold tailwind+flyon-ui build deps"
```

---

### Task 2: PostCSS config

**Files:**
- Create: `services/web-ui/postcss.config.js`

- [ ] **Step 1: Write postcss.config.js**

```js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};
```

- [ ] **Step 2: Commit**

```bash
HOME=/root git add services/web-ui/postcss.config.js
HOME=/root git commit -m "web-ui: add postcss config for tailwind+autoprefixer"
```

---

### Task 3: Tailwind config with custom flyon-ui theme

**Files:**
- Create: `services/web-ui/tailwind.config.js`

Maps the existing oklch palette into flyon-ui's color slots. Brand hue 266 preserved. Wave-1 deliberately keeps the theme tight — only colors, fonts, and spacing scale. Additional theme keys (animation curves, radii, etc.) live in component CSS files via `@layer`.

- [ ] **Step 1: Write tailwind.config.js**

```js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './public/**/*.html',
    './src/**/*.{css,js}',
  ],
  darkMode: 'class',
  theme: {
    extend: {
      colors: {
        // ── Surfaces (5-step depth, tinted toward brand hue 266) ──
        'bg-deep':    'oklch(8% 0.011 266)',
        'bg-base':    'oklch(11% 0.010 266)',
        'bg-panel':   'oklch(15% 0.013 266)',
        'bg-surface': 'oklch(19% 0.014 266)',
        'bg-raised':  'oklch(24% 0.015 266)',
        'bg-hover':   'oklch(28% 0.015 266)',

        // ── Accent (brand) ──
        accent: {
          DEFAULT: 'oklch(45% 0.20 266)',
          subtle:  'oklch(55% 0.20 266 / 0.12)',
          border:  'oklch(55% 0.20 266 / 0.36)',
        },

        // ── Text ──
        'text-primary':   'oklch(94% 0.008 266)',
        'text-secondary': 'oklch(72% 0.014 266)',
        // tertiary bumped from 52% to 56% per a11y section in the spec
        'text-tertiary':  'oklch(56% 0.012 266)',
        'text-disabled':  'oklch(38% 0.010 266)',

        // ── Borders ──
        'border-faint':   'oklch(22% 0.013 266)',
        'border-default': 'oklch(28% 0.015 266)',
        'border-strong':  'oklch(38% 0.018 266)',

        // ── Status / semantic signal ──
        'signal-good': 'oklch(70% 0.18 148)',
        'signal-bad':  'oklch(64% 0.22 25)',
        'signal-warn': 'oklch(80% 0.16 90)',
        'signal-idle': 'oklch(58% 0.012 266)',
        'signal-good-bg': 'oklch(70% 0.18 148 / 0.12)',
        'signal-bad-bg':  'oklch(64% 0.22 25  / 0.12)',
        'signal-warn-bg': 'oklch(80% 0.16 90  / 0.12)',
      },
      fontFamily: {
        sans: ['Inter', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'system-ui', 'sans-serif'],
        mono: ['"JetBrains Mono"', 'ui-monospace', '"SF Mono"', 'Consolas', 'monospace'],
      },
      fontSize: {
        // tighter scale per density target
        'xs':   ['11px', { lineHeight: '1.4' }],
        'sm':   ['13px', { lineHeight: '1.5' }],
        'base': ['14px', { lineHeight: '1.5' }],
        'md':   ['16px', { lineHeight: '1.4' }],
        'lg':   ['18px', { lineHeight: '1.4' }],
        'xl':   ['22px', { lineHeight: '1.3' }],
        '2xl':  ['28px', { lineHeight: '1.2' }],
        '3xl':  ['40px', { lineHeight: '1.1' }],
        'tc':   ['64px', { lineHeight: '1' }], // tally-grade timecode
      },
      borderRadius: {
        'sm': '4px',
        'md': '6px',
        'lg': '8px',
      },
      transitionTimingFunction: {
        'out-quart': 'cubic-bezier(0.25, 1, 0.5, 1)',
        'out-expo':  'cubic-bezier(0.16, 1, 0.3, 1)',
      },
      transitionDuration: {
        '120': '120ms',
        '180': '180ms',
        '240': '240ms',
      },
      zIndex: {
        'dropdown': '40',
        'overlay':  '80',
        'panel':    '90',
        'toast':   '200',
      },
    },
  },
  plugins: [
    require('flyonui'),
  ],
};
```

- [ ] **Step 2: Commit**

```bash
HOME=/root git add services/web-ui/tailwind.config.js
HOME=/root git commit -m "web-ui: tailwind config with oklch theme port (brand hue 266 preserved)"
```

---

### Task 4: Create design-token CSS

**Files:**
- Create: `services/web-ui/src/css/components/tokens.css`

Tailwind exposes the colors as utility classes, but we also keep CSS custom properties so non-Tailwind callers (the existing JS that sets `el.style.color = 'var(--accent)'`) still work.

- [ ] **Step 1: Write tokens.css**

```css
/* tokens.css ─ oklch design tokens
 * Mirrors tailwind.config.js so legacy callers that read
 * var(--accent), var(--bg-panel), etc. keep working during the
 * page-by-page migration. After all pages migrate to Tailwind
 * utility classes (wave 4 complete), this file shrinks to
 * just the few tokens that are referenced from inline styles. */
:root {
  /* Surfaces */
  --bg-deep:    oklch(8% 0.011 266);
  --bg-base:    oklch(11% 0.010 266);
  --bg-panel:   oklch(15% 0.013 266);
  --bg-surface: oklch(19% 0.014 266);
  --bg-raised:  oklch(24% 0.015 266);
  --bg-hover:   oklch(28% 0.015 266);

  /* Accent */
  --accent:        oklch(45% 0.20 266);
  --accent-subtle: oklch(55% 0.20 266 / 0.12);
  --accent-border: oklch(55% 0.20 266 / 0.36);

  /* Text — tertiary bumped to 56% for AA contrast on bg-panel */
  --text-primary:   oklch(94% 0.008 266);
  --text-secondary: oklch(72% 0.014 266);
  --text-tertiary:  oklch(56% 0.012 266);
  --text-disabled:  oklch(38% 0.010 266);

  /* Borders */
  --border-faint:   oklch(22% 0.013 266);
  --border:         oklch(28% 0.015 266);
  --border-strong:  oklch(38% 0.018 266);

  /* Semantic signal */
  --signal-good: oklch(70% 0.18 148);
  --signal-bad:  oklch(64% 0.22 25);
  --signal-warn: oklch(80% 0.16 90);
  --signal-idle: oklch(58% 0.012 266);
  --signal-good-bg: oklch(70% 0.18 148 / 0.12);
  --signal-bad-bg:  oklch(64% 0.22 25  / 0.12);
  --signal-warn-bg: oklch(80% 0.16 90  / 0.12);

  /* Spacing (mirrors Tailwind 4pt scale) */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-12: 48px;

  /* Type */
  --font:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;

  /* Layout */
  --sidebar-w: 200px;
  --topbar-h:  48px;

  /* Z */
  --z-dropdown: 40;
  --z-overlay:  80;
  --z-panel:    90;
  --z-toast:   200;
}
```

- [ ] **Step 2: Commit**

```bash
HOME=/root git add services/web-ui/src/css/components/tokens.css
HOME=/root git commit -m "web-ui: oklch design tokens (mirror tailwind theme for legacy callers)"
```

---

### Task 5: Create motion CSS (shimmer + stutter + reduced-motion)

**Files:**
- Create: `services/web-ui/src/css/components/motion.css`

- [ ] **Step 1: Write motion.css**

```css
/* motion.css ─ keyframes + global reduced-motion override.
 * Keep keyframes here, not scattered across primitive files,
 * so a single import disables them under prefers-reduced-motion. */

/* Skeleton shimmer — gradient sweep, NOT opacity pulse */
@keyframes wd-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

/* "LIVE" tally-light stutter — bright 0.9s / dim 0.3s / bright 0.9s */
@keyframes wd-stutter {
  0%, 42%       { opacity: 1; }
  42.01%, 56%   { opacity: 0.55; }
  56.01%, 100%  { opacity: 1; }
}

/* Signal-strip sweep for recording cards */
@keyframes wd-signal-sweep {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.wd-shimmer {
  background: linear-gradient(
    90deg,
    var(--bg-surface) 0%,
    var(--bg-hover)   50%,
    var(--bg-surface) 100%
  );
  background-size: 200% 100%;
  animation: wd-shimmer 1.8s ease-in-out infinite;
}

.wd-stutter   { animation: wd-stutter      2.1s ease-in-out infinite; }
.wd-sweep     { animation: wd-signal-sweep 1.8s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .wd-shimmer, .wd-stutter, .wd-sweep {
    animation: none;
  }
  *, *::before, *::after {
    transition-duration: 0ms !important;
    animation-duration: 0ms !important;
  }
}
```

- [ ] **Step 2: Commit**

```bash
HOME=/root git add services/web-ui/src/css/components/motion.css
HOME=/root git commit -m "web-ui: motion primitives (shimmer/stutter/sweep + reduced-motion)"
```

---

### Task 6: Create sidebar CSS primitive

**Files:**
- Create: `services/web-ui/src/css/components/sidebar.css`

Matches design section 2: 200px wide, 28px rows, leading 4px accent dot for active (NOT a side-stripe).

- [ ] **Step 1: Write sidebar.css**

```css
/* sidebar.css ─ flat app navigation rail (200px, 28px rows) */

.wd-sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg-panel);
  border-right: 1px solid var(--border);
  overflow-y: auto;
  overflow-x: hidden;
}

.wd-sidebar-header {
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border-bottom: 1px solid var(--border-faint);
  flex-shrink: 0;
}
.wd-sidebar-logo  { width: 18px; height: 18px; }
.wd-sidebar-brand { font: 600 13px/1 var(--font); letter-spacing: -0.01em; color: var(--text-primary); }

.wd-sidebar-nav {
  display: flex;
  flex-direction: column;
  padding: 8px 0;
  gap: 1px;
}

.wd-sidebar-section {
  font: 600 10px/1 var(--font);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  padding: 16px 12px 4px;
}

.wd-nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 28px;
  padding: 0 8px 0 16px;     /* extra left padding for the accent-dot indent */
  font: 500 13px/1 var(--font);
  color: var(--text-secondary);
  text-decoration: none;
  transition: background-color 120ms cubic-bezier(0.25, 1, 0.5, 1),
              color           120ms cubic-bezier(0.25, 1, 0.5, 1);
}
.wd-nav-item:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}
.wd-nav-item svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--text-tertiary); }
.wd-nav-item:hover svg { color: var(--text-secondary); }

.wd-nav-item.is-active {
  background: var(--bg-surface);
  color: var(--text-primary);
}
.wd-nav-item.is-active svg { color: var(--text-primary); }

/* 4px leading accent dot — NOT a side-stripe border (banned).
 * Vertically centered, 8px tall, 4px from the left edge. */
.wd-nav-item.is-active::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 8px;
  border-radius: 2px;
  background: var(--accent);
}

/* IN DEV pill (auth-guard.js injects this) */
.wd-nav-item .nav-dev-badge {
  margin-left: auto;
  font: 700 9px/1 var(--font);
  letter-spacing: 0.12em;
  padding: 2px 5px;
  border-radius: 3px;
  background: oklch(28% 0.14 80 / 0.45);
  color: oklch(85% 0.16 85);
  border: 1px solid oklch(50% 0.16 80 / 0.55);
  text-transform: uppercase;
  flex-shrink: 0;
}

/* Footer user widget */
.wd-sidebar-footer {
  margin-top: auto;
  padding: 12px;
  border-top: 1px solid var(--border-faint);
}
.wd-sidebar-user {
  display: flex;
  align-items: center;
  gap: 8px;
}
.wd-sidebar-user-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--bg-surface);
  display: flex; align-items: center; justify-content: center;
  font: 600 11px/1 var(--font);
  color: var(--text-secondary);
  flex-shrink: 0;
}
.wd-sidebar-user-info { flex: 1; min-width: 0; }
.wd-sidebar-user-name { font: 500 12px/1.3 var(--font); color: var(--text-primary); }
.wd-sidebar-user-role { font: 500 10px/1.3 var(--font); color: var(--text-tertiary); letter-spacing: 0.06em; text-transform: uppercase; }
.wd-sidebar-user-logout { opacity: 0; transition: opacity 120ms cubic-bezier(0.25, 1, 0.5, 1); }
.wd-sidebar-user:hover .wd-sidebar-user-logout { opacity: 1; }
```

- [ ] **Step 2: Commit**

```bash
HOME=/root git add services/web-ui/src/css/components/sidebar.css
HOME=/root git commit -m "web-ui: sidebar primitive (200px, 28px rows, leading accent dot)"
```

---

### Task 7: Create topbar CSS primitive

**Files:**
- Create: `services/web-ui/src/css/components/topbar.css`

- [ ] **Step 1: Write topbar.css**

```css
/* topbar.css ─ sticky 48px topbar with breadcrumb + scoped search */

.wd-topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  padding: 0 12px 0 16px;
  gap: 16px;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border-faint);
  flex-shrink: 0;
}

.wd-topbar-left   { flex: 0 1 auto; min-width: 0; }
.wd-topbar-center { flex: 1 1 360px; display: flex; justify-content: center; }
.wd-topbar-right  { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; margin-left: auto; }

/* Breadcrumb */
.wd-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0;
  font: 500 13px/1 var(--font);
}
.wd-breadcrumb-crumb { color: var(--text-secondary); }
.wd-breadcrumb-crumb:last-child { color: var(--text-primary); font-weight: 600; }
.wd-breadcrumb-sep {
  width: 10px; height: 10px;
  margin: 0 8px;
  color: var(--text-tertiary);
  flex-shrink: 0;
}

/* Page-scoped search */
.wd-topbar-search {
  width: 100%;
  max-width: 360px;
  height: 28px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  background: var(--bg-deep);
  border: 1px solid var(--border-faint);
  border-radius: 4px;
}
.wd-topbar-search:focus-within {
  border-color: var(--accent-border);
  outline: 2px solid var(--accent-subtle);
  outline-offset: 1px;
}
.wd-topbar-search svg {
  width: 12px; height: 12px;
  color: var(--text-tertiary);
  flex-shrink: 0;
}
.wd-topbar-search input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: 0;
  font: 400 13px/1 var(--font-mono);
  color: var(--text-primary);
}
.wd-topbar-search input::placeholder {
  color: var(--text-tertiary);
  font: 400 13px/1 var(--font-mono);
}

/* Vertical divider between secondary actions and primary CTA */
.wd-topbar-divider {
  width: 1px;
  height: 20px;
  background: var(--border-faint);
  margin: 0 4px;
}
```

- [ ] **Step 2: Commit**

```bash
HOME=/root git add services/web-ui/src/css/components/topbar.css
HOME=/root git commit -m "web-ui: topbar primitive (breadcrumb + scoped search + sticky)"
```

---

### Task 8: Create button CSS primitive

**Files:**
- Create: `services/web-ui/src/css/components/button.css`

- [ ] **Step 1: Write button.css**

```css
/* button.css ─ sm/md/lg × primary/secondary/ghost/danger */

.wd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 4px;
  border: 1px solid transparent;
  font: 500 13px/1 var(--font);
  cursor: pointer;
  user-select: none;
  transition: background-color 120ms cubic-bezier(0.25, 1, 0.5, 1),
              border-color     120ms cubic-bezier(0.25, 1, 0.5, 1),
              color           120ms cubic-bezier(0.25, 1, 0.5, 1);
}
.wd-btn:focus-visible {
  outline: 2px solid var(--accent-subtle);
  outline-offset: 1px;
}
.wd-btn:active:not(:disabled) { opacity: 0.85; transition: opacity 60ms; }
.wd-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.wd-btn > svg { width: 12px; height: 12px; flex-shrink: 0; }

/* Sizes */
.wd-btn--sm { height: 28px; padding: 0 10px; font-size: 12px; }
.wd-btn--md { height: 32px; padding: 0 12px; font-size: 13px; }
.wd-btn--lg { height: 36px; padding: 0 14px; font-size: 13px; }

/* Variants */
.wd-btn--primary {
  background: var(--accent);
  color: oklch(98% 0.005 266);
}
.wd-btn--primary:hover:not(:disabled) {
  background: oklch(52% 0.20 266);
}

.wd-btn--secondary {
  background: var(--bg-surface);
  color: var(--text-primary);
  border-color: var(--border);
}
.wd-btn--secondary:hover:not(:disabled) {
  background: var(--bg-hover);
  border-color: var(--border-strong);
}

.wd-btn--ghost {
  background: transparent;
  color: var(--text-secondary);
}
.wd-btn--ghost:hover:not(:disabled) {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.wd-btn--danger {
  background: var(--signal-bad);
  color: oklch(98% 0.005 25);
}
.wd-btn--danger:hover:not(:disabled) {
  background: oklch(68% 0.22 25);
}

/* Icon-only (28px square) */
.wd-btn--icon {
  width: 28px;
  padding: 0;
}
```

- [ ] **Step 2: Commit**

```bash
HOME=/root git add services/web-ui/src/css/components/button.css
HOME=/root git commit -m "web-ui: button primitive (sm/md/lg x primary/secondary/ghost/danger)"
```

---

### Task 9: Create form-controls CSS primitive

**Files:**
- Create: `services/web-ui/src/css/components/form-controls.css`

- [ ] **Step 1: Write form-controls.css**

```css
/* form-controls.css ─ label/input/select/textarea/hint/toggle */

.wd-label {
  display: block;
  font: 600 11px/1 var(--font);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 4px;
}

.wd-input, .wd-select, .wd-textarea {
  width: 100%;
  height: 32px;
  padding: 0 10px;
  background: var(--bg-deep);
  border: 1px solid var(--border);
  border-radius: 4px;
  font: 400 13px/1 var(--font);
  color: var(--text-primary);
  transition: border-color 120ms cubic-bezier(0.25, 1, 0.5, 1);
}
.wd-textarea { height: auto; min-height: 80px; padding: 8px 10px; line-height: 1.5; resize: vertical; }
.wd-input:focus, .wd-select:focus, .wd-textarea:focus {
  border-color: var(--accent-border);
  outline: 2px solid var(--accent-subtle);
  outline-offset: 1px;
}
.wd-input:disabled, .wd-select:disabled, .wd-textarea:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.wd-input::placeholder, .wd-textarea::placeholder {
  color: var(--text-tertiary);
}

.wd-hint {
  font: 400 11px/1.5 var(--font);
  color: var(--text-tertiary);
  margin-top: 4px;
}
.wd-hint code {
  font-family: var(--font-mono);
  font-size: 11px;
  background: var(--bg-surface);
  padding: 1px 4px;
  border-radius: 2px;
}

.wd-form-group  { display: flex; flex-direction: column; }
.wd-form-row    { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.wd-form-row--3 { grid-template-columns: 1fr 1fr 1fr; }

/* Toggle switch — 34x18 */
.wd-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}
.wd-toggle input {
  position: absolute;
  opacity: 0;
  width: 0; height: 0;
}
.wd-toggle-track {
  position: relative;
  width: 34px;
  height: 18px;
  background: var(--bg-hover);
  border: 1px solid var(--border);
  border-radius: 999px;
  transition: background 200ms cubic-bezier(0.25, 1, 0.5, 1);
}
.wd-toggle-track::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--text-secondary);
  transition: transform 200ms cubic-bezier(0.25, 1, 0.5, 1),
              background 200ms cubic-bezier(0.25, 1, 0.5, 1);
}
.wd-toggle input:checked ~ .wd-toggle-track {
  background: var(--accent);
  border-color: var(--accent);
}
.wd-toggle input:checked ~ .wd-toggle-track::after {
  transform: translateX(16px);
  background: oklch(98% 0.005 266);
}
.wd-toggle-label { font: 400 13px/1 var(--font); color: var(--text-secondary); }
```

- [ ] **Step 2: Commit**

```bash
HOME=/root git add services/web-ui/src/css/components/form-controls.css
HOME=/root git commit -m "web-ui: form controls primitive (label/input/select/textarea/hint/toggle)"
```

---

### Task 10: Create field-group CSS primitive (tabbed sections)

**Files:**
- Create: `services/web-ui/src/css/components/field-group.css`

Generalization of the codec-block pattern from the recent recorders rewrite.

- [ ] **Step 1: Write field-group.css**

```css
/* field-group.css ─ titled section with optional inner tabs.
 * Generalized from the codec-block pattern in recorders.html. */

.wd-field-group {
  border: 1px solid var(--border-faint);
  border-radius: 6px;
  background: var(--bg-panel);
  overflow: hidden;
}

.wd-field-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 36px;
  padding: 0 14px;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-faint);
}
.wd-field-group-title {
  font: 600 11px/1 var(--font);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.wd-tabs {
  display: flex;
  height: 32px;
  background: var(--bg-deep);
  border-bottom: 1px solid var(--border-faint);
}
.wd-tab {
  flex: 1;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  font: 500 11px/1 var(--font);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  cursor: pointer;
  transition: color 120ms cubic-bezier(0.25, 1, 0.5, 1),
              border-color 120ms cubic-bezier(0.25, 1, 0.5, 1);
}
.wd-tab:hover { color: var(--text-secondary); }
.wd-tab.is-active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.wd-tab-panel { display: none; padding: 14px; }
.wd-tab-panel.is-active { display: block; }
```

- [ ] **Step 2: Commit**

```bash
HOME=/root git add services/web-ui/src/css/components/field-group.css
HOME=/root git commit -m "web-ui: field-group primitive (tabbed section, codec-block generalized)"
```

---

### Task 11: Create slide-panel CSS primitive

**Files:**
- Create: `services/web-ui/src/css/components/slide-panel.css`

Codifies the layout fix from the codec-clipping bug as the primitive.

- [ ] **Step 1: Write slide-panel.css**

```css
/* slide-panel.css ─ right-sliding 460px panel with locked flex layout.
 * The min-height:0 on body is the flex-overflow footgun fix from
 * the codec-clipping bug. Don't remove it. */

.wd-slide-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background: oklch(8% 0.010 266 / 0.65);
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms cubic-bezier(0.25, 1, 0.5, 1);
}
.wd-slide-overlay.is-open {
  opacity: 1;
  pointer-events: all;
}

.wd-slide-panel {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 460px;
  height: 100vh;
  max-height: 100vh;
  z-index: var(--z-panel);
  background: var(--bg-panel);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateX(100%);
  transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1);
}
.wd-slide-panel.is-open { transform: translateX(0); }

.wd-slide-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 52px;
  padding: 0 18px;
  border-bottom: 1px solid var(--border-faint);
  flex-shrink: 0;
}
.wd-slide-panel-title {
  font: 600 14px/1 var(--font);
  letter-spacing: -0.005em;
  color: var(--text-primary);
}

.wd-slide-panel-body {
  flex: 1;
  min-height: 0;            /* critical for flex overflow */
  overflow-y: auto;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.wd-slide-panel-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 18px;
  background: var(--bg-deep);
  border-top: 1px solid var(--border-faint);
  flex-shrink: 0;
}
```

- [ ] **Step 2: Commit**

```bash
HOME=/root git add services/web-ui/src/css/components/slide-panel.css
HOME=/root git commit -m "web-ui: slide-panel primitive (locked flex, codec-clipping bug codified)"
```

---

### Task 12: Create asset card CSS primitive

**Files:**
- Create: `services/web-ui/src/css/components/card-asset.css`

- [ ] **Step 1: Write card-asset.css**

```css
/* card-asset.css ─ 16:9 thumbnail + metadata + role pill.
 * For Library, Project asset grids, recorder cards' video portion. */

.wd-card-asset {
  display: flex;
  flex-direction: column;
  background: var(--bg-panel);
  border: 1px solid var(--border-faint);
  border-radius: 6px;
  overflow: hidden;
  transition: border-color 120ms cubic-bezier(0.25, 1, 0.5, 1);
}
.wd-card-asset:hover {
  border-color: var(--border);
}

.wd-card-asset-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: oklch(0% 0 0);
  overflow: hidden;
}
.wd-card-asset-thumb img,
.wd-card-asset-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: filter 120ms cubic-bezier(0.25, 1, 0.5, 1);
}
.wd-card-asset:hover .wd-card-asset-thumb img,
.wd-card-asset:hover .wd-card-asset-thumb video {
  filter: brightness(1.04);
}

.wd-card-asset-chip {
  position: absolute;
  font: 500 10px/1 var(--font-mono);
  color: var(--text-primary);
  background: oklch(8% 0.010 266 / 0.7);
  border: 1px solid var(--border-faint);
  border-radius: 3px;
  padding: 3px 6px;
  letter-spacing: 0.02em;
}
.wd-card-asset-chip--duration { bottom: 8px; right: 8px; }
.wd-card-asset-chip--comments {
  bottom: 8px; left: 8px;
  display: inline-flex; align-items: center; gap: 4px;
}
.wd-card-asset-chip--version  { top: 8px; right: 8px; font-weight: 600; }

.wd-card-asset-checkbox {
  position: absolute;
  top: 8px; left: 8px;
  opacity: 0;
  transition: opacity 120ms cubic-bezier(0.25, 1, 0.5, 1);
}
.wd-card-asset:hover .wd-card-asset-checkbox,
.wd-card-asset.is-selected .wd-card-asset-checkbox,
.wd-card-asset-grid.has-selection .wd-card-asset-checkbox { opacity: 1; }

.wd-card-asset-meta {
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.wd-card-asset-name {
  font: 500 13px/1.3 var(--font);
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wd-card-asset-sub {
  font: 400 11px/1.3 var(--font);
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}

.wd-card-asset-role {
  display: block;
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--border-faint);
  border-top: 0;
  background: var(--bg-deep);
  font: 600 10px/1 var(--font);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  cursor: pointer;
}
.wd-card-asset-role--unset {
  border-style: dashed;
  color: var(--text-tertiary);
}

/* Grid container */
.wd-card-asset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
```

- [ ] **Step 2: Commit**

```bash
HOME=/root git add services/web-ui/src/css/components/card-asset.css
HOME=/root git commit -m "web-ui: asset card primitive (16:9 thumb + role pill, replay-style)"
```

---

### Task 13: Create operational card CSS primitive

**Files:**
- Create: `services/web-ui/src/css/components/card-operational.css`

- [ ] **Step 1: Write card-operational.css**

```css
/* card-operational.css ─ header + content + footer, for recorders/cluster/jobs.
 * Different SHAPE than asset cards on purpose (impeccable ban: identical card grids). */

.wd-card-op {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  background: var(--bg-panel);
  border: 1px solid var(--border-faint);
  border-radius: 6px;
  transition: border-color 120ms cubic-bezier(0.25, 1, 0.5, 1);
}
.wd-card-op:hover { border-color: var(--border); }
.wd-card-op.is-active { border-color: var(--accent-border); }

.wd-card-op-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.wd-card-op-name {
  font: 600 14px/1.2 var(--font);
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wd-card-op-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font: 400 13px/1.4 var(--font);
  color: var(--text-secondary);
}

.wd-card-op-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border-faint);
}
.wd-card-op-meta {
  font: 400 11px/1 var(--font-mono);
  color: var(--text-tertiary);
  letter-spacing: 0.02em;
}
.wd-card-op-actions { display: flex; gap: 6px; }

/* Mini bars (CPU/mem on cluster cards) */
.wd-mini-bar {
  width: 100%;
  height: 4px;
  background: var(--bg-deep);
  border-radius: 2px;
  overflow: hidden;
}
.wd-mini-bar-fill {
  height: 100%;
  background: var(--accent);
  transition: width 240ms cubic-bezier(0.16, 1, 0.3, 1);
}
.wd-mini-bar-fill--warn { background: var(--signal-warn); }
.wd-mini-bar-fill--bad  { background: var(--signal-bad); }

/* Signal strip (recorder live indicator) */
.wd-signal-strip {
  position: relative;
  height: 4px;
  background: var(--bg-deep);
  border-radius: 2px;
  overflow: hidden;
}
.wd-signal-strip-fill {
  position: absolute;
  inset: 0;
  width: 100%;
  background: linear-gradient(90deg, var(--accent), oklch(70% 0.18 266));
}

/* Grid container */
.wd-card-op-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: 14px;
}
```

- [ ] **Step 2: Commit**

```bash
HOME=/root git add services/web-ui/src/css/components/card-operational.css
HOME=/root git commit -m "web-ui: operational card primitive (header/content/footer, recorder/cluster/jobs)"
```

---

### Task 14: Create list-row + empty-state primitives

**Files:**
- Create: `services/web-ui/src/css/components/list-row.css`
- Create: `services/web-ui/src/css/components/empty-state.css`

Two small files batched into one task to keep granularity bite-sized but avoid trivial single-rule commits.

- [ ] **Step 1: Write list-row.css**

```css
/* list-row.css ─ table-like row, NOT a card. For containers/users/tokens. */

.wd-list {
  display: flex;
  flex-direction: column;
}
.wd-list-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  height: 44px;
  padding: 0 16px;
  border-bottom: 1px solid var(--border-faint);
  transition: background-color 120ms cubic-bezier(0.25, 1, 0.5, 1);
}
.wd-list-row:hover { background: var(--bg-hover); }
.wd-list-row.is-selected { background: var(--bg-surface); }
.wd-list-row.is-selected::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 8px;
  border-radius: 2px;
  background: var(--accent);
}

.wd-list-cell {
  font: 400 13px/1 var(--font);
  color: var(--text-primary);
}
.wd-list-cell--name      { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.wd-list-cell--meta      { color: var(--text-tertiary); font-family: var(--font-mono); font-size: 12px; }
.wd-list-cell--actions   { margin-left: auto; display: flex; gap: 6px; }

.wd-list-header {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 36px;
  padding: 0 16px;
  border-bottom: 1px solid var(--border);
  font: 600 11px/1 var(--font);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
```

- [ ] **Step 2: Write empty-state.css**

```css
/* empty-state.css ─ centered icon + title + body + CTA, no card chrome */

.wd-empty {
  min-height: 360px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  padding: 48px 24px;
}
.wd-empty-icon {
  width: 28px;
  height: 28px;
  color: var(--text-tertiary);
}
.wd-empty-title {
  font: 600 14px/1.3 var(--font);
  color: var(--text-primary);
}
.wd-empty-body {
  font: 400 13px/1.5 var(--font);
  color: var(--text-secondary);
  max-width: 360px;
}
.wd-empty-actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}
```

- [ ] **Step 3: Commit**

```bash
HOME=/root git add services/web-ui/src/css/components/list-row.css services/web-ui/src/css/components/empty-state.css
HOME=/root git commit -m "web-ui: list-row + empty-state primitives"
```

---

### Task 15: Create badge + toast primitives

**Files:**
- Create: `services/web-ui/src/css/components/badge.css`
- Create: `services/web-ui/src/css/components/toast.css`

- [ ] **Step 1: Write badge.css**

```css
/* badge.css ─ status pills + signal badges */

.wd-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 18px;
  padding: 0 6px;
  border-radius: 3px;
  font: 600 10px/1 var(--font);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.wd-badge--good { background: var(--signal-good-bg); color: var(--signal-good); }
.wd-badge--bad  { background: var(--signal-bad-bg);  color: var(--signal-bad); }
.wd-badge--warn { background: var(--signal-warn-bg); color: var(--signal-warn); }
.wd-badge--idle { background: var(--bg-surface);     color: var(--text-tertiary); }
.wd-badge--info { background: var(--accent-subtle);  color: var(--accent); }

/* Status dot (4px circle, leading indicator on cards/rows) */
.wd-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.wd-dot--good { background: var(--signal-good); }
.wd-dot--bad  { background: var(--signal-bad); }
.wd-dot--warn { background: var(--signal-warn); }
.wd-dot--idle { background: var(--signal-idle); }
```

- [ ] **Step 2: Write toast.css**

```css
/* toast.css ─ bottom-right, top-strip variant.
 * 4px top strip = allowed (not a side-stripe). */

.wd-toast-container {
  position: fixed;
  bottom: 16px;
  right: 16px;
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 320px;
}

.wd-toast {
  position: relative;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 12px 14px 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: 0 12px 32px -16px oklch(0% 0 0 / 0.7);
}
.wd-toast::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  border-radius: 4px 4px 0 0;
}

.wd-toast--success  { border-color: var(--signal-good); }
.wd-toast--success::before { background: var(--signal-good); }

.wd-toast--error    { border-color: var(--signal-bad); }
.wd-toast--error::before { background: var(--signal-bad); }

.wd-toast--warning  { border-color: var(--signal-warn); }
.wd-toast--warning::before { background: var(--signal-warn); }

.wd-toast--info     { border-color: var(--accent); }
.wd-toast--info::before { background: var(--accent); }

.wd-toast-title {
  font: 600 13px/1.3 var(--font);
  color: var(--text-primary);
  margin-top: 4px;
}
.wd-toast-body {
  font: 400 12px/1.5 var(--font);
  color: var(--text-secondary);
}
```

- [ ] **Step 3: Commit**

```bash
HOME=/root git add services/web-ui/src/css/components/badge.css services/web-ui/src/css/components/toast.css
HOME=/root git commit -m "web-ui: badge + toast primitives"
```

---

### Task 16: Create entry CSS that imports everything

**Files:**
- Create: `services/web-ui/src/css/app.css`

- [ ] **Step 1: Write app.css**

```css
/* app.css ─ Tailwind directives + primitive imports.
 *
 * Order matters:
 *   1. tokens (CSS custom properties for legacy callers)
 *   2. tailwind base (CSS reset)
 *   3. tailwind components
 *   4. our primitives (use tokens + can be overridden by utilities)
 *   5. tailwind utilities (highest specificity, last word)
 *   6. motion (animations + reduced-motion override)
 */

@import "./components/tokens.css";

@tailwind base;
@tailwind components;

/* Primitives — each one ~50-200 lines, one responsibility per file */
@import "./components/sidebar.css";
@import "./components/topbar.css";
@import "./components/button.css";
@import "./components/form-controls.css";
@import "./components/field-group.css";
@import "./components/slide-panel.css";
@import "./components/card-asset.css";
@import "./components/card-operational.css";
@import "./components/list-row.css";
@import "./components/empty-state.css";
@import "./components/badge.css";
@import "./components/toast.css";

@tailwind utilities;

@import "./components/motion.css";

/* Global base — self-hosted fonts */
@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/fonts/jetbrains-mono-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/fonts/jetbrains-mono-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

html {
  font-family: var(--font);
  background: var(--bg-base);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
}
```

- [ ] **Step 2: Commit**

```bash
HOME=/root git add services/web-ui/src/css/app.css
HOME=/root git commit -m "web-ui: app.css entry — tailwind directives + primitive imports"
```

---

### Task 17: Add self-hosted font files

**Files:**
- Create: `services/web-ui/public/fonts/inter-400.woff2`
- Create: `services/web-ui/public/fonts/inter-500.woff2`
- Create: `services/web-ui/public/fonts/inter-600.woff2`
- Create: `services/web-ui/public/fonts/jetbrains-mono-400.woff2`
- Create: `services/web-ui/public/fonts/jetbrains-mono-600.woff2`

Download from Google Fonts API (woff2 only, latin subset). These are binary files committed to the repo.

- [ ] **Step 1: Download font files via MeshCentral on zampp1**

Run on zampp1:

```bash
cd /opt/wild-dragon/services/web-ui/public
mkdir -p fonts
cd fonts

# Inter
for WEIGHT in 400 500 600; do
  curl -sL -o "inter-${WEIGHT}.woff2" \
    "https://github.com/rsms/inter/raw/master/docs/font-files/Inter-$(case $WEIGHT in 400) echo Regular;; 500) echo Medium;; 600) echo SemiBold;; esac).woff2"
done

# JetBrains Mono
for WEIGHT in 400 600; do
  curl -sL -o "jetbrains-mono-${WEIGHT}.woff2" \
    "https://github.com/JetBrains/JetBrainsMono/raw/master/fonts/webfonts/JetBrainsMono-$(case $WEIGHT in 400) echo Regular;; 600) echo SemiBold;; esac).woff2"
done

ls -la
```

Expected: 5 .woff2 files, each 50-200KB.

- [ ] **Step 2: Verify each file is a valid woff2**

```bash
for f in *.woff2; do
  echo "$f: $(file "$f" | grep -c 'Web Open Font Format')"
done
```

Expected: each line ends in `: 1`.

- [ ] **Step 3: Commit binary files**

```bash
cd /opt/wild-dragon
HOME=/root git add services/web-ui/public/fonts/*.woff2
HOME=/root git commit -m "web-ui: self-host Inter + JetBrains Mono woff2 fonts"
```

---

### Task 18: Modify Dockerfile to add Node build stage

**Files:**
- Modify: `services/web-ui/Dockerfile`

- [ ] **Step 1: Read existing Dockerfile to see current structure**

Run on zampp1:

```bash
cat /opt/wild-dragon/services/web-ui/Dockerfile
```

Note the structure. The current single-stage Dockerfile is likely just `FROM nginx + COPY public/ + COPY nginx.conf`. The new file is multi-stage.

- [ ] **Step 2: Rewrite Dockerfile as two-stage build**

Replace `services/web-ui/Dockerfile` with:

```dockerfile
# ── Stage 1: build CSS bundle ─────────────────────────────────
FROM node:20-alpine AS css-build
WORKDIR /build

# Copy only the files needed to install deps (better cache layering)
COPY package.json package-lock.json* ./
RUN npm install --no-audit --no-fund

# Copy source CSS + tailwind config + every HTML file (tailwind
# scans HTML to determine which utilities to emit)
COPY tailwind.config.js postcss.config.js ./
COPY src/ ./src/
COPY public/ ./public/

# Build into public/dist/app.css
RUN npx tailwindcss -i ./src/css/app.css -o ./public/dist/app.css --minify

# ── Stage 2: runtime ──────────────────────────────────────────
FROM nginx:1.27-alpine
COPY --from=css-build /build/public/ /usr/share/nginx/html/
COPY nginx.conf /etc/nginx/conf.d/default.conf
```

- [ ] **Step 3: Commit**

```bash
HOME=/root git add services/web-ui/Dockerfile
HOME=/root git commit -m "web-ui: two-stage Dockerfile (Node build + nginx runtime)"
```

---

### Task 19: Modify nginx.conf to cache /dist/* aggressively

**Files:**
- Modify: `services/web-ui/nginx.conf`

- [ ] **Step 1: Read existing nginx.conf**

```bash
cat /opt/wild-dragon/services/web-ui/nginx.conf
```

- [ ] **Step 2: Add a location block for /dist/ and /fonts/**

Add the following inside the existing `server` block (above the catch-all `location /`):

```nginx
location /dist/ {
  expires 1y;
  add_header Cache-Control "public, immutable";
  access_log off;
}

location /fonts/ {
  expires 1y;
  add_header Cache-Control "public, immutable";
  access_log off;
}
```

- [ ] **Step 3: Commit**

```bash
HOME=/root git add services/web-ui/nginx.conf
HOME=/root git commit -m "web-ui: aggressive caching for /dist/ and /fonts/"
```

---

### Task 20: Build and verify the new image locally on zampp1

**Files:** none modified, verification only.

- [ ] **Step 1: Build the new image**

On zampp1:

```bash
cd /opt/wild-dragon
docker compose build web-ui 2>&1 | tail -40
```

Expected: build succeeds. Look for `tailwindcss` running and `app.css` being emitted. No errors.

- [ ] **Step 2: Restart the container with the new image**

```bash
docker compose up -d web-ui
sleep 3
docker ps --filter name=wild-dragon-web-ui --format 'table {{.Names}}\t{{.Status}}'
```

Expected: container running, recent uptime.

- [ ] **Step 3: Verify the new CSS bundle is being served**

```bash
curl -sk -o /dev/null -w 'HTTP=%{http_code} size=%{size_download}\n' http://localhost:47434/dist/app.css
```

Expected: HTTP=200, size > 10000 bytes (minified CSS bundle).

- [ ] **Step 4: Verify fonts are being served**

```bash
for f in inter-400 inter-500 inter-600 jetbrains-mono-400 jetbrains-mono-600; do
  STATUS=$(curl -sk -o /dev/null -w '%{http_code}/%{size_download}' "http://localhost:47434/fonts/${f}.woff2")
  echo "  ${f}.woff2: $STATUS"
done
```

Expected: each line ends in `: 200/<size>` where size is 50000-200000.

- [ ] **Step 5: Verify existing pages STILL WORK (no regression)**

```bash
for p in home recorders cluster index login editor; do
  STATUS=$(curl -sk -o /dev/null -w '%{http_code}' "http://localhost:47434/${p}.html")
  echo "  ${p}.html: $STATUS"
done
```

Expected: every page returns 200. (No page references the new CSS yet, but the build must not have broken anything.)

- [ ] **Step 6: Verify the recorders page specifically still has its codec UI intact**

```bash
curl -sk http://localhost:47434/recorders.html | grep -cE 'codec-tab|sdi-card-wrap|min-height: 0|BMDCards.render'
```

Expected: 4+ matches (the in-page CSS + JS from the previous rewrite is still there).

- [ ] **Step 7: Commit a verification note**

Nothing to commit — this is verification only. If all steps pass, move on. If any fails, stop and debug before continuing.

---

### Task 21: Smoke-test sample HTML against the new primitives

**Files:**
- Create: `services/web-ui/public/_primitives-smoke.html`

A one-off page that exercises every primitive class so we can visually QA the bundle without migrating a real page yet. Will be deleted at the end of wave 4.

- [ ] **Step 1: Write the smoke-test page**

Write `services/web-ui/public/_primitives-smoke.html`:

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Primitives smoke test</title>
  <link rel="stylesheet" href="/dist/app.css">
</head>
<body>
  <div style="display:flex; min-height:100vh;">
    <nav class="wd-sidebar">
      <div class="wd-sidebar-header">
        <div style="width:18px;height:18px;background:var(--accent);border-radius:3px"></div>
        <span class="wd-sidebar-brand">Z-AMPP</span>
      </div>
      <div class="wd-sidebar-nav">
        <a href="#" class="wd-nav-item is-active"><span style="width:14px;height:14px;background:currentColor;opacity:0.6"></span>Home</a>
        <a href="#" class="wd-nav-item"><span style="width:14px;height:14px;background:currentColor;opacity:0.6"></span>Library</a>
        <a href="#" class="wd-nav-item"><span style="width:14px;height:14px;background:currentColor;opacity:0.6"></span>Recorders</a>
        <div class="wd-sidebar-section">Admin</div>
        <a href="#" class="wd-nav-item"><span style="width:14px;height:14px;background:currentColor;opacity:0.6"></span>Settings <span class="nav-dev-badge">IN DEV</span></a>
      </div>
    </nav>

    <div style="flex:1;display:flex;flex-direction:column;">
      <header class="wd-topbar">
        <div class="wd-topbar-left">
          <nav class="wd-breadcrumb">
            <span class="wd-breadcrumb-crumb">Library</span>
            <svg class="wd-breadcrumb-sep" viewBox="0 0 10 10"><path d="M3 1l4 4-4 4" fill="none" stroke="currentColor"/></svg>
            <span class="wd-breadcrumb-crumb">Project Alpha</span>
            <svg class="wd-breadcrumb-sep" viewBox="0 0 10 10"><path d="M3 1l4 4-4 4" fill="none" stroke="currentColor"/></svg>
            <span class="wd-breadcrumb-crumb">Key Scenes</span>
          </nav>
        </div>
        <div class="wd-topbar-center">
          <div class="wd-topbar-search">
            <svg viewBox="0 0 12 12"><circle cx="5" cy="5" r="3.5" fill="none" stroke="currentColor"/><path d="M8 8l3 3" stroke="currentColor"/></svg>
            <input type="text" placeholder="Search in Key Scenes...">
          </div>
        </div>
        <div class="wd-topbar-right">
          <button class="wd-btn wd-btn--ghost wd-btn--sm wd-btn--icon" aria-label="Filter">f</button>
          <button class="wd-btn wd-btn--ghost wd-btn--sm wd-btn--icon" aria-label="Sort">s</button>
          <div class="wd-topbar-divider"></div>
          <button class="wd-btn wd-btn--primary wd-btn--sm">+ New asset</button>
        </div>
      </header>

      <main style="flex:1; padding:20px 20px 32px;">
        <!-- Asset card grid -->
        <h2 style="font:600 13px/1 var(--font); letter-spacing:0.08em; text-transform:uppercase; color:var(--text-tertiary); margin:0 0 12px;">Asset cards</h2>
        <div class="wd-card-asset-grid" style="margin-bottom:32px;">
          <article class="wd-card-asset">
            <div class="wd-card-asset-thumb" style="background:linear-gradient(135deg,#333,#111)">
              <span class="wd-card-asset-chip wd-card-asset-chip--duration">00:30</span>
              <span class="wd-card-asset-chip wd-card-asset-chip--comments">2</span>
            </div>
            <div class="wd-card-asset-meta">
              <div class="wd-card-asset-name">DRP_B004_081606_V1_0099.mov</div>
              <div class="wd-card-asset-sub">Alissa Morris · Oct 14th, 2024</div>
            </div>
            <button class="wd-card-asset-role" style="color:var(--signal-warn)">Coloring</button>
          </article>
          <article class="wd-card-asset">
            <div class="wd-card-asset-thumb" style="background:linear-gradient(135deg,#553,#221)">
              <span class="wd-card-asset-chip wd-card-asset-chip--duration">00:05</span>
              <span class="wd-card-asset-chip wd-card-asset-chip--version">V2</span>
            </div>
            <div class="wd-card-asset-meta">
              <div class="wd-card-asset-name">DRP_A015_0815OF_V1_0023.mov</div>
              <div class="wd-card-asset-sub">Alissa Morris · Oct 14th, 2024</div>
            </div>
            <button class="wd-card-asset-role wd-card-asset-role--unset">Select role</button>
          </article>
        </div>

        <!-- Operational cards -->
        <h2 style="font:600 13px/1 var(--font); letter-spacing:0.08em; text-transform:uppercase; color:var(--text-tertiary); margin:0 0 12px;">Operational cards</h2>
        <div class="wd-card-op-grid" style="margin-bottom:32px;">
          <article class="wd-card-op is-active">
            <header class="wd-card-op-header">
              <span class="wd-card-op-name">Studio A SRT</span>
              <span class="wd-badge wd-badge--bad"><span class="wd-dot wd-dot--bad"></span>Recording</span>
            </header>
            <div class="wd-card-op-content">
              <div class="wd-signal-strip"><div class="wd-signal-strip-fill wd-sweep"></div></div>
              <div style="display:flex; justify-content:space-between; align-items:center;">
                <span>Receiving · 12450 fr · 30 fps</span>
                <span style="font-family:var(--font-mono); font-variant-numeric:tabular-nums; color:var(--signal-bad); font-weight:600;">00:23:14</span>
              </div>
            </div>
            <footer class="wd-card-op-footer">
              <span class="wd-card-op-meta">Last: Oct 14th, 2024 4:00 PM</span>
              <div class="wd-card-op-actions">
                <button class="wd-btn wd-btn--danger wd-btn--sm">Stop</button>
              </div>
            </footer>
          </article>
          <article class="wd-card-op">
            <header class="wd-card-op-header">
              <span class="wd-card-op-name">zampp2</span>
              <span class="wd-badge wd-badge--good"><span class="wd-dot wd-dot--good"></span>Online</span>
            </header>
            <div class="wd-card-op-content">
              <div>
                <div style="display:flex; justify-content:space-between; font:400 11px/1 var(--font-mono); color:var(--text-tertiary); margin-bottom:4px;">
                  <span>CPU</span><span>42%</span>
                </div>
                <div class="wd-mini-bar"><div class="wd-mini-bar-fill" style="width:42%"></div></div>
              </div>
              <div>
                <div style="display:flex; justify-content:space-between; font:400 11px/1 var(--font-mono); color:var(--text-tertiary); margin-bottom:4px;">
                  <span>Memory</span><span>71%</span>
                </div>
                <div class="wd-mini-bar"><div class="wd-mini-bar-fill wd-mini-bar-fill--warn" style="width:71%"></div></div>
              </div>
            </div>
            <footer class="wd-card-op-footer">
              <span class="wd-card-op-meta">DeckLink Duo 2 · 4 ports</span>
              <div class="wd-card-op-actions">
                <button class="wd-btn wd-btn--ghost wd-btn--sm">Ping</button>
              </div>
            </footer>
          </article>
        </div>

        <!-- List rows -->
        <h2 style="font:600 13px/1 var(--font); letter-spacing:0.08em; text-transform:uppercase; color:var(--text-tertiary); margin:0 0 12px;">List rows</h2>
        <div class="wd-list" style="margin-bottom:32px; border:1px solid var(--border-faint); border-radius:6px; overflow:hidden;">
          <div class="wd-list-header">
            <span style="flex:1">Name</span>
            <span>Image</span>
            <span>Status</span>
            <span>Actions</span>
          </div>
          <div class="wd-list-row is-selected">
            <span class="wd-list-cell wd-list-cell--name">wild-dragon-mam-api-1</span>
            <span class="wd-list-cell wd-list-cell--meta">wild-dragon-mam-api:latest</span>
            <span><span class="wd-badge wd-badge--good">Up</span></span>
            <span class="wd-list-cell--actions"><button class="wd-btn wd-btn--ghost wd-btn--sm">Logs</button></span>
          </div>
          <div class="wd-list-row">
            <span class="wd-list-cell wd-list-cell--name">wild-dragon-web-ui-1</span>
            <span class="wd-list-cell wd-list-cell--meta">wild-dragon-web-ui:latest</span>
            <span><span class="wd-badge wd-badge--good">Up</span></span>
            <span class="wd-list-cell--actions"><button class="wd-btn wd-btn--ghost wd-btn--sm">Logs</button></span>
          </div>
        </div>

        <!-- Buttons matrix -->
        <h2 style="font:600 13px/1 var(--font); letter-spacing:0.08em; text-transform:uppercase; color:var(--text-tertiary); margin:0 0 12px;">Buttons</h2>
        <div style="display:flex; gap:12px; flex-wrap:wrap; margin-bottom:32px;">
          <button class="wd-btn wd-btn--primary wd-btn--sm">Primary sm</button>
          <button class="wd-btn wd-btn--primary wd-btn--md">Primary md</button>
          <button class="wd-btn wd-btn--secondary wd-btn--md">Secondary md</button>
          <button class="wd-btn wd-btn--ghost wd-btn--md">Ghost md</button>
          <button class="wd-btn wd-btn--danger wd-btn--md">Danger md</button>
          <button class="wd-btn wd-btn--primary wd-btn--md" disabled>Disabled</button>
        </div>

        <!-- Forms -->
        <h2 style="font:600 13px/1 var(--font); letter-spacing:0.08em; text-transform:uppercase; color:var(--text-tertiary); margin:0 0 12px;">Form controls</h2>
        <div style="max-width:460px; display:flex; flex-direction:column; gap:14px; margin-bottom:32px;">
          <div class="wd-form-group">
            <label class="wd-label" for="smoke-input">Recorder name</label>
            <input class="wd-input" id="smoke-input" placeholder="e.g. Studio A SRT">
            <div class="wd-hint">Letters, numbers, dashes. Used in clip filenames.</div>
          </div>
          <div class="wd-form-row">
            <div class="wd-form-group">
              <label class="wd-label" for="smoke-select">Codec</label>
              <select class="wd-select" id="smoke-select">
                <option>ProRes 422 HQ</option>
                <option>H.264 NVENC</option>
              </select>
            </div>
            <div class="wd-form-group">
              <label class="wd-label" for="smoke-fps">Framerate</label>
              <input class="wd-input" id="smoke-fps" value="29.97">
            </div>
          </div>
          <label class="wd-toggle">
            <input type="checkbox" checked>
            <span class="wd-toggle-track"></span>
            <span class="wd-toggle-label">Generate proxy</span>
          </label>
        </div>

        <!-- Field-group with tabs -->
        <h2 style="font:600 13px/1 var(--font); letter-spacing:0.08em; text-transform:uppercase; color:var(--text-tertiary); margin:0 0 12px;">Field group</h2>
        <div style="max-width:460px; margin-bottom:32px;">
          <div class="wd-field-group">
            <div class="wd-field-group-header">
              <span class="wd-field-group-title">Master recording</span>
            </div>
            <div class="wd-tabs">
              <button class="wd-tab is-active">Video</button>
              <button class="wd-tab">Audio</button>
              <button class="wd-tab">Container</button>
            </div>
            <div class="wd-tab-panel is-active">
              <div class="wd-form-row">
                <div class="wd-form-group">
                  <label class="wd-label">Codec</label>
                  <select class="wd-select"><option>ProRes 422 HQ</option></select>
                </div>
                <div class="wd-form-group">
                  <label class="wd-label">Resolution</label>
                  <select class="wd-select"><option>1920×1080</option></select>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- Empty state -->
        <h2 style="font:600 13px/1 var(--font); letter-spacing:0.08em; text-transform:uppercase; color:var(--text-tertiary); margin:0 0 12px;">Empty state</h2>
        <div class="wd-empty">
          <svg class="wd-empty-icon" viewBox="0 0 28 28" fill="none" stroke="currentColor" stroke-width="1.5">
            <rect x="2" y="6" width="18" height="16" rx="2"/><path d="M20 11l6-3v12l-6-3"/>
          </svg>
          <div class="wd-empty-title">No recorders yet</div>
          <div class="wd-empty-body">Create a recorder to ingest live streams via SRT, RTMP, or SDI.</div>
          <div class="wd-empty-actions">
            <button class="wd-btn wd-btn--primary wd-btn--sm">+ New recorder</button>
          </div>
        </div>
      </main>
    </div>
  </div>
</body>
</html>
```

- [ ] **Step 2: Rebuild the web-ui image so the smoke page ships**

```bash
cd /opt/wild-dragon
docker compose up -d --build web-ui 2>&1 | tail -8
```

Expected: image rebuilt, container restarted, exit code 0.

- [ ] **Step 3: Verify the smoke page renders**

```bash
curl -sk -o /dev/null -w 'HTTP=%{http_code} size=%{size_download}\n' http://localhost:47434/_primitives-smoke.html
```

Expected: HTTP=200, size > 5000 bytes.

- [ ] **Step 4: Inspect the rendered CSS for known primitive classes**

```bash
curl -sk http://localhost:47434/dist/app.css | grep -cE '\.wd-sidebar|\.wd-card-asset|\.wd-card-op|\.wd-slide-panel|\.wd-field-group|\.wd-toast|\.wd-btn|\.wd-input'
```

Expected: at least 30 matches.

- [ ] **Step 5: Commit the smoke page**

```bash
HOME=/root git add services/web-ui/public/_primitives-smoke.html
HOME=/root git commit -m "web-ui: add _primitives-smoke.html for wave-1 QA (delete at wave-4 end)"
```

- [ ] **Step 6: User QA gate**

Stop. Ask user to load `http://<zampp1-ip>:47434/_primitives-smoke.html` in their browser and visually QA the new primitives. If any primitive looks wrong, file a new task to fix it. Do not proceed to wave 2 until the user signs off on the visual quality of the smoke page.

---

### Task 22: Push everything to forge.wilddragon.net

**Files:** none modified.

- [ ] **Step 1: Push commits to main**

```bash
cd /opt/wild-dragon
HOME=/root git push origin main 2>&1 | tail -5
```

Expected: push succeeds, several commits land on `origin/main`.

- [ ] **Step 2: Verify the new files exist in the remote**

```bash
curl -s -H "Authorization: token <token>" \
  "https://forge.wilddragon.net/api/v1/repos/zgaetano/wild-dragon/contents/services/web-ui/src/css/app.css?ref=main" \
  | head -c 200
```

Expected: JSON response with `"sha"` field, not 404.

---

## Wave 2 / 3 / 4 placeholder

These waves are **out of scope for this plan document**. Each will get its own detailed plan after the prior wave ships and is verified.

- **Wave 2** (`docs/superpowers/plans/2026-05-2X-ui-shell-rework-wave-2-plan.md`): migrate `login.html`, `home.html`, `settings.html`, `tokens.html`, `users.html`, `containers.html` to the new primitives. One task per page.
- **Wave 3** (`docs/superpowers/plans/2026-05-2X-ui-shell-rework-wave-3-plan.md`): migrate `index.html`, `projects.html`, `upload.html`, `jobs.html`, `api-tokens.html`. One task per page.
- **Wave 4** (`docs/superpowers/plans/2026-05-2X-ui-shell-rework-wave-4-plan.md`): migrate `recorders.html`, `cluster.html`, `capture.html`. One task per page, plus a final task to delete `_primitives-smoke.html`.

---

## Self-review notes

(For the implementer / reviewer.)

- **Spec coverage:** Every numbered section of the spec maps to at least one task. Tokens → task 4. Sidebar → task 6. Topbar → task 7. Cards (4 families) → tasks 12, 13, 14. Forms → tasks 9, 10. Slide-panel → task 11. Motion → task 5. Badges/toasts → task 15. A11y (tertiary lightness bump) → task 4. Build/theme port → tasks 1-3, 18, 19. Self-hosted fonts → task 17. Smoke test → task 21.
- **Placeholders:** none. Every code step has the actual code.
- **Type consistency:** class names use the `wd-` prefix throughout. Sidebar active state uses `.is-active` everywhere. Slide-panel uses `.is-open` everywhere. List-row selected uses `.is-selected`.
- **Open risk:** the Inter / JetBrains Mono download URLs in task 17 step 1 depend on those GitHub repos remaining at the same paths. If they 404, fall back to fonts.google.com woff2 downloads or vendor the files in manually.