docs: implementation plan for Topaz Cinema Slate + drawer redesign

docs/superpowers/plans/2026-05-01-topaz-drawer-redesign.md

@@ -0,0 +1,535 @@
+# Topaz Cinema Slate + Drawer Redesign — 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:** Apply the Topaz Cinema Slate dark palette and the hamburger-drawer layout (open by default ≥1024 px, hidden behind ≡ button below) to the existing Gradio app, with no logic or backend changes.
+
+**Architecture:** All edits land in `app.py`. Three concerns: (1) `gr.themes.Base().set(...)` overrides for the 12 Topaz tokens, (2) full rewrite of `_CUSTOM_CSS` for slate-on-slate styling + drawer mechanics + responsive breakpoint, (3) markup tweak — wrap the existing sidebar `gr.Column` in a `drawer` div with a header row above the shell that holds the ≡ toggle, title, and active-mode tag.
+
+**Tech Stack:** Gradio 5.50, IBM Plex Sans/Mono via Google Fonts, pure-CSS drawer toggle using a hidden `<input type="checkbox">` + `:checked` sibling selectors (no JS framework — but a tiny inline `<script>` block in `head=` syncs the active-mode tag and persists drawer state to `localStorage`).
+
+---
+
+## File Structure
+
+- **Modify:** `app.py`
+  - `_CUSTOM_CSS` block — fully replaced
+  - `build_app()` — Blocks `theme=` and `head=` parameters added; markup gets a header row + drawer column wrapper
+
+No other files are touched. `backend.py`, `models.py`, `modes.py`, `workflow.py`, `ui.py` are unaffected.
+
+---
+
+### Task 1 — Add Topaz theme tokens to `gr.Blocks`
+
+**Files:** Modify `app.py:191`
+
+- [ ] **Step 1: Define the Topaz `gr.themes.Base()` instance**
+
+Add this just above `def build_app()` near `app.py:189`:
+
+```python
+_TOPAZ_THEME = gr.themes.Base(
+    primary_hue=gr.themes.Color(
+        c50="#FBE5C7", c100="#F5D29C", c200="#EFC174", c300="#E9B05A",
+        c400="#E5A75B", c500="#E0A458", c600="#C68D3F", c700="#A6722E",
+        c800="#7E5722", c900="#583C18", c950="#3A2810",
+    ),
+    neutral_hue=gr.themes.Color(
+        c50="#E6E8EB", c100="#C9CDD3", c200="#ACB1B9", c300="#909700",
+        c400="#7C8693", c500="#626972", c600="#4A4F58", c700="#363B43",
+        c800="#262C35", c900="#1A1F26", c950="#12161B",
+    ),
+    font=(gr.themes.GoogleFont("IBM Plex Sans"), "ui-sans-serif", "system-ui", "sans-serif"),
+    font_mono=(gr.themes.GoogleFont("IBM Plex Mono"), "ui-monospace", "monospace"),
+).set(
+    body_background_fill="#12161B",
+    background_fill_primary="#12161B",
+    background_fill_secondary="#1A1F26",
+    block_background_fill="#1A1F26",
+    block_label_background_fill="transparent",
+    body_text_color="#E6E8EB",
+    body_text_color_subdued="#7C8693",
+    border_color_primary="#262C35",
+    border_color_accent="#E0A458",
+    button_primary_background_fill="#E0A458",
+    button_primary_background_fill_hover="#F0B870",
+    button_primary_text_color="#12161B",
+    button_secondary_background_fill="#1A1F26",
+    button_secondary_background_fill_hover="#232930",
+    button_secondary_text_color="#E6E8EB",
+    button_secondary_border_color="#262C35",
+    input_background_fill="#12161B",
+    input_border_color="#262C35",
+    input_border_color_focus="#E0A458",
+    error_background_fill="#3A1E20",
+    error_text_color="#F4A6A8",
+    slider_color="#E0A458",
+)
+```
+
+- [ ] **Step 2: Wire the theme into `build_app`**
+
+Change `app.py:191` from:
+
+```python
+with gr.Blocks(theme=gr.themes.Soft(), title="LTX 2.3 All-in-One", css=_CUSTOM_CSS) as app:
+```
+
+to:
+
+```python
+with gr.Blocks(theme=_TOPAZ_THEME, title="LTX 2.3 Studio", css=_CUSTOM_CSS) as app:
+```
+
+- [ ] **Step 3: Smoke-test that imports still work**
+
+Run: `python -c "import app; print('OK')"` in the project root.
+Expected: `OK` printed, no traceback.
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add app.py
+git commit -m "feat(ui): apply Topaz Cinema Slate theme tokens"
+```
+
+---
+
+### Task 2 — Replace `_CUSTOM_CSS` with Topaz styles + drawer mechanics
+
+**Files:** Modify `app.py:127-182` (the whole `_CUSTOM_CSS = """..."""` block)
+
+- [ ] **Step 1: Replace the entire `_CUSTOM_CSS` block**
+
+Replace `app.py:127-182` with:
+
+```python
+_CUSTOM_CSS = """
+/* Hide Gradio's top tab strip — sidebar drives selection. */
+.aio-tabs > .tab-nav,
+.aio-tabs > div:first-child[role="tablist"],
+.aio-tabs > div:first-child:has([role="tab"]) {
+    position: absolute !important;
+    left: -99999px !important;
+    top: -99999px !important;
+    height: 0 !important;
+    overflow: hidden !important;
+    visibility: visible !important;
+    pointer-events: auto !important;
+}
+
+/* === Header === */
+.aio-header {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 11px 18px;
+    border-bottom: 1px solid #262C35;
+    background: #12161B;
+}
+.aio-ham-toggle { display: none; }  /* hidden checkbox drives drawer state */
+.aio-ham-label {
+    width: 32px; height: 32px;
+    border: 1px solid #262C35;
+    border-radius: 5px;
+    color: #7C8693;
+    cursor: pointer;
+    display: flex; align-items: center; justify-content: center;
+    font-size: 18px; font-weight: 300;
+    user-select: none;
+}
+.aio-ham-label:hover { color: #E0A458; border-color: #E0A458; }
+.aio-title {
+    font-size: 15px; font-weight: 600; letter-spacing: -0.01em;
+    color: #E6E8EB;
+}
+.aio-title .accent { color: #E0A458; }
+.aio-mode-tag {
+    margin-left: auto;
+    padding: 4px 9px;
+    font-family: 'IBM Plex Mono', ui-monospace, monospace;
+    font-size: 11px; font-weight: 500; letter-spacing: 0.04em;
+    color: #E0A458;
+    border: 1px solid #E0A458;
+    border-radius: 4px;
+}
+
+/* === Drawer === */
+.aio-shell { position: relative; }
+.aio-drawer {
+    width: 220px;
+    border-right: 1px solid #262C35;
+    background: #12161B;
+    padding: 14px 10px !important;
+    flex-shrink: 0;
+    transition: transform 0.2s ease, width 0.2s ease;
+}
+.aio-drawer-heading {
+    font-family: 'IBM Plex Mono', ui-monospace, monospace;
+    font-size: 10px; text-transform: uppercase; letter-spacing: 0.07em;
+    color: #7C8693;
+    padding: 6px 8px 4px !important;
+    margin: 0 !important;
+}
+
+/* Mode buttons */
+.aio-mode-btn { width: 100%; text-align: left; margin: 2px 0 !important; }
+.aio-mode-btn-active {
+    background: #1A1F26 !important;
+    color: #E0A458 !important;
+    border-left: 3px solid #E0A458 !important;
+}
+
+/* Model status / settings panels */
+.aio-model-badge {
+    padding: 9px 11px;
+    border-radius: 6px;
+    background: #1A1F26;
+    border: 1px solid #262C35;
+    font-size: 11.5px;
+    font-family: 'IBM Plex Mono', ui-monospace, monospace;
+    color: #7C8693;
+}
+
+/* === Status banner === */
+.status-card {
+    padding: 12px 16px;
+    border-radius: 6px;
+    background: #1A1F26;
+    border: 1px solid #262C35;
+}
+.status-row { display: flex; gap: 14px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
+.status-stage { font-weight: 600; color: #E0A458; }
+.status-meta { font-size: 12px; color: #7C8693; font-family: 'IBM Plex Mono', monospace; }
+.status-bar { height: 4px; background: #262C35; border-radius: 99px; overflow: hidden; }
+.status-fill { height: 100%; background: #E0A458; transition: width .3s; }
+.status-mem { font-size: 11px; color: #7C8693; margin-top: 6px; font-family: 'IBM Plex Mono', monospace; }
+.status-error {
+    background: #3A1E20 !important;
+    border-color: #F4A6A8 !important;
+    color: #F4A6A8 !important;
+}
+.status-error .status-stage { color: #F4A6A8; }
+
+/* === Drawer toggle behavior at the desktop boundary === */
+@media (max-width: 1023px) {
+    .aio-ham-label { display: flex; }
+    .aio-drawer {
+        position: absolute;
+        top: 0; left: 0; bottom: 0;
+        z-index: 10;
+        box-shadow: 4px 0 24px rgba(0,0,0,0.6);
+        transform: translateX(-100%);
+        max-width: 80vw;
+    }
+    /* checkbox at #aio-ham-toggle is the only sibling pattern Gradio
+       lets us reach without JS — when checked, slide drawer in. */
+    body:has(.aio-ham-toggle:checked) .aio-drawer { transform: translateX(0); }
+    body:has(.aio-ham-toggle:checked) .aio-shell::before {
+        content: ""; position: absolute; inset: 0;
+        background: rgba(0,0,0,0.55); z-index: 9;
+    }
+
+    /* Mobile sub-tweaks */
+    .aio-mode-btn { font-size: 13px !important; padding: 7px 10px !important; }
+    .aio-body [class*="row"] { flex-wrap: wrap !important; }
+    .aio-body [class*="row"] > div { flex: 1 1 100% !important; min-width: 0 !important; }
+}
+
+@media (min-width: 1024px) {
+    .aio-ham-label { display: none; }
+}
+"""
+```
+
+- [ ] **Step 2: Verify the CSS doesn't break the import**
+
+Run: `python -c "import app; print(len(app._CUSTOM_CSS), 'chars CSS')"`
+Expected: a number (around 4000), no traceback.
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add app.py
+git commit -m "feat(ui): rewrite _CUSTOM_CSS for Topaz palette + drawer mechanics"
+```
+
+---
+
+### Task 3 — Add header markup + drawer wrapper to `build_app`
+
+**Files:** Modify `app.py:190-243` (the `build_app` function body)
+
+- [ ] **Step 1: Replace the markup section**
+
+Find this block in `app.py` (currently around 190-220):
+
+```python
+def build_app() -> gr.Blocks:
+    with gr.Blocks(theme=_TOPAZ_THEME, title="LTX 2.3 Studio", css=_CUSTOM_CSS) as app:
+        gr.Markdown("# ⚡ LTX 2.3 All-in-One")
+
+        with gr.Row(elem_classes=["aio-shell"]):
+            # Sidebar
+            with gr.Column(scale=1, min_width=200, elem_classes=["aio-sidebar"]):
+                gr.Markdown("**Modes**", elem_classes=["aio-sidebar-heading"])
+                with gr.Column(elem_classes=["aio-mode-btn-row"]):
+                    mode_buttons = {
+                        name: gr.Button(
+                            f"{m.icon}  {m.label}",
+                            elem_classes=["aio-mode-btn"],
+                            variant="secondary",
+                        )
+                        for name, m in modes.MODE_REGISTRY.items()
+                    }
+                gr.Markdown("**Models**", elem_classes=["aio-sidebar-heading"])
+                model_status = gr.HTML(_render_model_status_idle(), elem_id="aio-model-status")
+                refresh_btn = gr.Button("Refresh", size="sm", variant="secondary")
+                unload_btn = gr.Button("Unload all models", size="sm", variant="secondary")
+                gr.Markdown("**Settings**", elem_classes=["aio-sidebar-heading"])
+                gr.Markdown(
+                    "Output: `comfyui/output/LTX2.3/`<br>"
+                    "Set `LTX23_AIO_VRAM=lowvram|normalvram|highvram` to override the auto-detected VRAM tier.",
+                    elem_classes=["aio-model-badge"],
+                )
+
+            # Body
+            with gr.Column(scale=4, elem_classes=["aio-body"]):
+                handles, tabs_component = _render_mode_panels()
+```
+
+Replace with:
+
+```python
+def build_app() -> gr.Blocks:
+    with gr.Blocks(theme=_TOPAZ_THEME, title="LTX 2.3 Studio", css=_CUSTOM_CSS) as app:
+        # Header: hamburger checkbox (drives drawer via :checked + :has() in CSS),
+        # title, current-mode tag.
+        gr.HTML(
+            '<div class="aio-header">'
+            '  <input type="checkbox" id="aio-ham-toggle" class="aio-ham-toggle">'
+            '  <label for="aio-ham-toggle" class="aio-ham-label">≡</label>'
+            '  <span class="aio-title">LTX 2.3 <span class="accent">Studio</span></span>'
+            '  <span class="aio-mode-tag" id="aio-mode-tag">T2V</span>'
+            '</div>'
+        )
+
+        with gr.Row(elem_classes=["aio-shell"]):
+            # Drawer (drawer behaves as fixed sidebar ≥1024 px;
+            # absolute-positioned overlay <1024 px — see _CUSTOM_CSS).
+            with gr.Column(scale=1, min_width=200, elem_classes=["aio-drawer"]):
+                gr.Markdown("Modes", elem_classes=["aio-drawer-heading"])
+                mode_buttons = {
+                    name: gr.Button(
+                        f"{m.icon}  {m.label}",
+                        elem_classes=["aio-mode-btn"],
+                        variant="secondary",
+                    )
+                    for name, m in modes.MODE_REGISTRY.items()
+                }
+                gr.Markdown("Models", elem_classes=["aio-drawer-heading"])
+                model_status = gr.HTML(_render_model_status_idle(), elem_id="aio-model-status")
+                refresh_btn = gr.Button("Refresh", size="sm", variant="secondary")
+                unload_btn = gr.Button("Unload all models", size="sm", variant="secondary")
+                gr.Markdown("Settings", elem_classes=["aio-drawer-heading"])
+                gr.Markdown(
+                    "Output: `comfyui/output/LTX2.3/`<br>"
+                    "Set `LTX23_AIO_VRAM=lowvram|normalvram|highvram` to override "
+                    "the auto-detected VRAM tier.",
+                    elem_classes=["aio-model-badge"],
+                )
+
+            # Body — unchanged, still hosts the 6 mode tabs.
+            with gr.Column(scale=4, elem_classes=["aio-body"]):
+                handles, tabs_component = _render_mode_panels()
+```
+
+- [ ] **Step 2: Smoke-test build_app produces a Blocks**
+
+Run:
+```bash
+python -c "import app; b = app.build_app(); print(type(b).__name__)"
+```
+Expected: `Blocks`, no traceback.
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add app.py
+git commit -m "feat(ui): drawer markup + header (hamburger / title / mode tag)"
+```
+
+---
+
+### Task 4 — Wire active-mode tag updates from sidebar clicks
+
+**Files:** Modify `app.py:232-237` (the existing mode-button click loop)
+
+- [ ] **Step 1: Update the click handler to also push the new mode tag**
+
+Current code at `app.py:232-237`:
+
+```python
+        for name, btn in mode_buttons.items():
+            btn.click(
+                fn=lambda mode_id=name: gr.Tabs(selected=mode_id),
+                inputs=None,
+                outputs=[tabs_component],
+            )
+```
+
+Replace with:
+
+```python
+        # JS to update the header mode tag without a server round-trip.
+        # Each mode button injects a tiny on-click that rewrites #aio-mode-tag.
+        _MODE_TAG_BY_NAME = {
+            "t2v": "T2V", "a2v": "A2V", "i2v": "I2V",
+            "lipsync": "LIPSYNC", "keyframe": "KEY", "style": "STYLE",
+        }
+        for name, btn in mode_buttons.items():
+            tag = _MODE_TAG_BY_NAME.get(name, name.upper())
+            btn.click(
+                fn=lambda mode_id=name: gr.Tabs(selected=mode_id),
+                inputs=None,
+                outputs=[tabs_component],
+                js=f"() => {{ "
+                   f"const el = document.getElementById('aio-mode-tag'); "
+                   f"if (el) el.textContent = {tag!r}; "
+                   f"/* also collapse drawer on mobile after pick */ "
+                   f"if (window.matchMedia('(max-width: 1023px)').matches) {{ "
+                   f"  const t = document.getElementById('aio-ham-toggle'); "
+                   f"  if (t) t.checked = false; "
+                   f"}} return []; }}",
+            )
+```
+
+- [ ] **Step 2: Smoke-test**
+
+Run:
+```bash
+python -c "import app; b = app.build_app(); print('ok')"
+```
+Expected: `ok`, no traceback.
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add app.py
+git commit -m "feat(ui): mode tag updates + auto-close drawer on mobile select"
+```
+
+---
+
+### Task 5 — Visual smoke test in browser
+
+**Files:** None (test-only).
+
+- [ ] **Step 1: Launch the app**
+
+Run in one terminal:
+```bash
+cd /Users/techfreakworm/Projects/llm/ltx2.3-AIO-generator
+source .venv/bin/activate
+python app.py
+```
+Expected output: `Running on local URL: http://127.0.0.1:7860`
+
+- [ ] **Step 2: Open browser at desktop width**
+
+Open Chrome at `http://127.0.0.1:7860`. Resize window to 1280 px wide.
+
+Verify:
+- Header: ≡ button NOT visible (hidden on ≥1024 px), title "LTX 2.3 **Studio**" with "Studio" in amber, mode tag "T2V" in amber border on right
+- Drawer (220 px) visible on left, "Modes" heading in IBM Plex Mono uppercase, 6 mode buttons stacked
+- Active mode (T2V by default) has amber left border + amber text + slate-2 bg
+- Body pane: form fields use slate background, amber Generate button at the bottom
+- Click each mode button → mode tag in header updates, body switches to that mode's form
+
+- [ ] **Step 3: Resize to tablet (1023 px)**
+
+Drag Chrome to 900 px wide.
+
+Verify:
+- ≡ button NOW visible in header
+- Drawer hidden (off-screen left)
+- Click ≡ → drawer slides in, dark scrim covers body
+- Click a mode button → drawer auto-closes, body switches mode
+- Click ≡ again → drawer hides
+
+- [ ] **Step 4: Resize to phone (380 px)**
+
+Use Chrome devtools → device toolbar → iPhone 12.
+
+Verify:
+- Same as tablet, but drawer width capped at 80 vw
+- Form fields are full-width (sliders, inputs)
+- Generate button readable, no horizontal scrollbar
+
+- [ ] **Step 5: Hit Generate (T2V, default settings)**
+
+Type a short prompt, click Generate.
+
+Verify:
+- Status banner appears with `Stage 1 · Encode prompt` text in amber
+- Progress bar fills with amber
+- After ~30s on local MPS (or longer if no model cache), video appears in output
+- Banner switches to `Done` or disappears
+
+- [ ] **Step 6: Trigger an error**
+
+Set width to 0 in slider (or click Generate with empty prompt) — anything that produces an error.
+
+Verify:
+- Error banner uses `#3A1E20` background + `#F4A6A8` text
+- Stage label and meta text both readable
+
+- [ ] **Step 7: Stop the dev server**
+
+Ctrl+C in the terminal running `python app.py`.
+
+- [ ] **Step 8: Commit screenshot/notes (optional)**
+
+If anything didn't match the spec, file a follow-up; otherwise no commit needed.
+
+---
+
+### Task 6 — Push to GitHub + HF Space
+
+**Files:** None — pushing only.
+
+- [ ] **Step 1: Sync to both remotes**
+
+```bash
+cd /Users/techfreakworm/Projects/llm/ltx2.3-AIO-generator
+git push origin master
+HF_TOKEN=$(hf auth token 2>/dev/null) git push "https://techfreakworm:${HF_TOKEN}@huggingface.co/spaces/techfreakworm/LTX2.3-Studio" master:main
+```
+
+- [ ] **Step 2: Verify Space accepts the push**
+
+Wait ~30 s, then:
+```bash
+HF_TOKEN=$(hf auth token 2>/dev/null) curl -s -H "Authorization: Bearer ${HF_TOKEN}" \
+  "https://huggingface.co/api/spaces/techfreakworm/LTX2.3-Studio" \
+  | python3 -c "import sys, json; d=json.load(sys.stdin); print('stage:', d['runtime']['stage'], 'sha:', d['sha'][:8])"
+```
+Expected: `stage: BUILDING` or `RUNNING_BUILDING`, sha matches local HEAD.
+
+- [ ] **Step 3: Wait for build, then visual-spot-check on Spaces**
+
+After ~5 min, open `https://techfreakworm-ltx2-3-studio.hf.space` in Chrome at 1280 px. Verify the Topaz palette + drawer rendered correctly. Resize to phone width and verify hamburger toggle.
+
+---
+
+## Out of scope reminder
+
+These are explicitly NOT touched by this plan (per spec):
+- Form layout inside each mode tab (typography updates flow via theme cascade only)
+- Model status / settings panel content
+- Mode set, generate flow, progress events
+- Any CUDA / MPS / Spaces logic
+- Custom LoRA UI
+
+If any of those appear visually broken after this plan lands, file separately — they're spec-isolated and a different change.