fix(ui): replace gr.Tabs with sidebar nav per wireframes

The previous M0 implementation used gr.Tabs which renders top-positioned
horizontal tabs — contradicting the approved wireframes at
docs/superpowers/specs/mockups/ which show a LEFT sidebar with 5 mode
pills + History section.

This rewrite uses a gr.Radio (re-skinned via CSS) as the sidebar nav,
with 5 gr.Group panes in the content column whose visibility is
toggled by the radio's change event. The radio's native :checked
pseudo-class supplies the active-item highlight (white text + white
left border + dark bg).

theme.py:
- New .ams-body row layout (sidebar + content gap)
- .ams-sidebar fixed-width column (190-210px)
- .ams-side-radio re-skin: vertical, full-width pills, no native circle
- .ams-side-radio label:has(input:checked) — active state
- .ams-history block below the radio
- .ams-content right column with min-height
- Responsive: tablet shrinks sidebar to icon rail, mobile flips to top tab strip

app.py:
- Build header status with detected device suffix (READY · MPS / CUDA / CPU)
- Sidebar (gr.Column min_width=190) holds radio + history HTML
- Content column holds 5 gr.Group panes, generate visible by default
- mode.change(_switch_pane, ...) returns visibility updates for all panes

DO NOT switch back to gr.Tabs — the wireframes are the source of truth.

app.py

@@ -1,8 +1,36 @@
 """ACE Music Studio — Gradio entrypoint.
 
-On HF Spaces, `_bootstrap()` runs once on import to mirror the read-only
-preload cache into a writable tree. On Mac/Linux locally, it's a no-op.
-The backend singleton is lazy-loaded on first generation request.
+UI ARCHITECTURE (locked — read this before editing):
+
+The five "modes" (Generate / Cover / Extend / Edit / Lyrics) are NOT
+implemented via ``gr.Tabs``. The wireframes at
+``docs/superpowers/specs/mockups/`` show a LEFT sidebar with mode pills +
+a session History section, and a single content column on the right.
+
+The implementation pattern is:
+
+  gr.Row(elem_classes=["ams-body"])
+  ├── gr.Column(min_width=190, elem_classes=["ams-sidebar"])
+  │   ├── gr.Radio(label=None, elem_classes=["ams-side-radio"])   ← 5 mode choices
+  │   └── gr.HTML(... "History · session" ...)
+  └── gr.Column(elem_classes=["ams-content"])
+      ├── gr.Group(visible=True)  ← pane_generate
+      ├── gr.Group(visible=False) ← pane_cover
+      ├── gr.Group(visible=False) ← pane_extend
+      ├── gr.Group(visible=False) ← pane_edit
+      └── gr.Group(visible=False) ← pane_lyrics
+
+The Radio's ``change`` event fires ``_switch_pane(mode)`` which returns
+visibility updates for the five Groups. The Radio's native ``:checked``
+state gives us the sidebar "active item" highlight for free via CSS
+(see ``theme.CSS`` for ``.ams-side-radio`` selectors).
+
+DO NOT switch this back to ``gr.Tabs`` — that produces top-positioned
+horizontal tabs which contradicts the wireframes.
+
+On HF Spaces, ``_bootstrap()`` runs once on import to mirror the
+read-only preload cache into a writable tree. On Mac/Linux locally,
+it's a no-op until M7.
 """
 
 from __future__ import annotations
@@ -17,6 +45,7 @@ os.environ.setdefault("HF_HUB_ENABLE_HF_TRANSFER", "1")
 
 import gradio as gr
 
+import ace_pipeline
 import theme
 
 HEADER_HTML = """
@@ -24,10 +53,23 @@ HEADER_HTML = """
   <div>
     <div class="ams-brand">ACE Music Studio<span class="ams-brand-period">.</span></div>
   </div>
-  <div class="ams-status">ready</div>
+  <div class="ams-status" id="ams-status">ready</div>
 </div>
 """.strip()
 
+
+def _status_html(device: str) -> str:
+    """Right-aligned status indicator in the header. Updated at boot only."""
+    return f"""
+<div class="ams-header">
+  <div>
+    <div class="ams-brand">ACE Music Studio<span class="ams-brand-period">.</span></div>
+  </div>
+  <div class="ams-status">ready · {device.upper()}</div>
+</div>
+""".strip()
+
+
 CTA_HTML = """
 <div class="ams-cta">
   Built with <span class="ams-cta-heart">♥</span>.
@@ -39,6 +81,23 @@ CTA_HTML = """
 """.strip()
 
 
+HISTORY_HTML = """
+<div class="ams-history">
+  <div class="ams-history-title">History · session</div>
+  <div class="ams-history-empty">No generations yet</div>
+</div>
+""".strip()
+
+
+MODE_CHOICES = [
+    ("🎵 Generate", "generate"),
+    ("🎤 Cover", "cover"),
+    ("⏩ Extend", "extend"),
+    ("✏️ Edit", "edit"),
+    ("✍️ Lyrics", "lyrics"),
+]
+
+
 def _bootstrap() -> None:
     """HF Spaces: mirror read-only preload cache into a writable tree.
 
@@ -48,21 +107,45 @@ def _bootstrap() -> None:
 
 
 def build_app() -> gr.Blocks:
+    device = ace_pipeline.detect_device()
+
     with gr.Blocks(theme=theme.build_theme(), css=theme.CSS, title="ACE Music Studio") as demo:
-        gr.HTML(HEADER_HTML)
+        gr.HTML(_status_html(device))
         gr.HTML(CTA_HTML)
 
-        with gr.Tabs():
-            with gr.Tab("🎵 Generate"):
-                gr.Markdown("Generate tab placeholder — implemented in M1.")
-            with gr.Tab("🎤 Cover"):
-                gr.Markdown("Cover tab placeholder — implemented in M3.")
-            with gr.Tab("⏩ Extend"):
-                gr.Markdown("Extend tab placeholder — implemented in M3.")
-            with gr.Tab("✏️ Edit"):
-                gr.Markdown("Edit tab placeholder — implemented in M3.")
-            with gr.Tab("✍️ Lyrics"):
-                gr.Markdown("Lyrics tab placeholder — implemented in M4.")
+        with gr.Row(elem_classes=["ams-body"]):
+            # --- Sidebar ----------------------------------------------------
+            with gr.Column(scale=0, min_width=190, elem_classes=["ams-sidebar"]):
+                mode = gr.Radio(
+                    choices=MODE_CHOICES,
+                    value="generate",
+                    label=None,
+                    show_label=False,
+                    container=False,
+                    elem_classes=["ams-side-radio"],
+                )
+                gr.HTML(HISTORY_HTML)
+
+            # --- Content ----------------------------------------------------
+            with gr.Column(scale=10, elem_classes=["ams-content"]):
+                with gr.Group(visible=True, elem_classes=["ams-tab-pane"]) as pane_generate:
+                    gr.Markdown("### 🎵 Generate\n\nPlaceholder — implemented in M1.")
+                with gr.Group(visible=False, elem_classes=["ams-tab-pane"]) as pane_cover:
+                    gr.Markdown("### 🎤 Cover\n\nPlaceholder — implemented in M3.")
+                with gr.Group(visible=False, elem_classes=["ams-tab-pane"]) as pane_extend:
+                    gr.Markdown("### ⏩ Extend\n\nPlaceholder — implemented in M3.")
+                with gr.Group(visible=False, elem_classes=["ams-tab-pane"]) as pane_edit:
+                    gr.Markdown("### ✏️ Edit\n\nPlaceholder — implemented in M3.")
+                with gr.Group(visible=False, elem_classes=["ams-tab-pane"]) as pane_lyrics:
+                    gr.Markdown("### ✍️ Lyrics\n\nPlaceholder — implemented in M4.")
+
+        panes = [pane_generate, pane_cover, pane_extend, pane_edit, pane_lyrics]
+
+        def _switch_pane(selected: str):
+            order = ["generate", "cover", "extend", "edit", "lyrics"]
+            return tuple(gr.Group(visible=(selected == name)) for name in order)
+
+        mode.change(fn=_switch_pane, inputs=mode, outputs=panes)
 
     return demo
 

theme.py

@@ -2,6 +2,19 @@
 
 Palette tokens are the source of truth; CSS pulls from them. The audio
 waveform is the only optionally-colored element (rendered white in v1).
+
+UI architecture (locked):
+- Sidebar layout (NOT ``gr.Tabs``) per wireframes at
+  ``docs/superpowers/specs/mockups/``.
+- ``.ams-sidebar`` is a flex column at desktop, fixed-width 170-190 px.
+- ``.ams-side-radio`` is the mode-nav: a ``gr.Radio`` re-skinned via CSS
+  so each option renders as a full-width sidebar pill. The native
+  ``:checked`` pseudo-class supplies the "active" highlight.
+- ``.ams-content`` is the right column containing 5 ``.ams-tab-pane``
+  groups; one is visible at a time.
+- Media queries: at ``<= 1024 px`` the sidebar shrinks to an icon rail.
+  At ``<= 640 px`` the sidebar is replaced by a horizontal scroll strip
+  at the top.
 """
 
 from __future__ import annotations
@@ -18,6 +31,7 @@ INK = "#E5E5E5"
 INK_MUTED = "#6B6B6B"
 PRIMARY = "#FFFFFF"
 ERROR_BG = "#1A1A1A"
+HOVER_BG = "#1A1A1A"
 RADIUS = "6px"
 FONT_STACK = '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif'
 
@@ -48,38 +62,129 @@ def build_theme() -> gr.themes.Base:
 
 
 CSS = f"""
-/* --- Sole brand bits --------------------------------------------------- */
+/* === Body chrome ======================================================= */
 .ams-header {{
   display:flex; justify-content:space-between; align-items:baseline;
-  padding:8px 0 4px 0;
+  padding:10px 4px 6px 4px;
 }}
 .ams-brand {{
-  font-size:16px; font-weight:600; letter-spacing:-0.01em; color:{INK};
+  font-size:18px; font-weight:600; letter-spacing:-0.01em; color:{INK};
 }}
 .ams-brand-period {{ color:{PRIMARY}; }}
-.ams-status {{ font-size:11px; color:{INK_MUTED}; letter-spacing:0.02em; }}
+.ams-status {{
+  font-size:11px; color:{INK_MUTED};
+  letter-spacing:0.06em; text-transform:uppercase;
+}}
 
-/* --- CTA banner -------------------------------------------------------- */
 .ams-cta {{
-  font-size:13px; color:{INK_MUTED}; margin:2px 0 12px 0; padding-bottom:10px;
+  font-size:13px; color:{INK_MUTED};
+  margin:2px 4px 14px 4px; padding-bottom:12px;
   border-bottom:1px solid {BORDER};
 }}
 .ams-cta strong {{ color:{INK}; }}
 .ams-cta-heart {{ color:{PRIMARY}; }}
 .ams-cta a {{ color:{INK}; text-decoration:underline; }}
 
-/* --- Sidebar nav (desktop >= 1024) ------------------------------------ */
-.ams-sidebar {{ background:{SURFACE_STRONG}; padding:14px 10px; border-radius:{RADIUS}; min-width:170px; }}
-.ams-side-item {{
-  display:block; padding:8px 10px; border-radius:4px; margin-bottom:3px;
-  font-size:13px; color:{INK_MUTED}; cursor:pointer; text-decoration:none;
+/* === Body row (sidebar + content) ====================================== */
+.ams-body {{
+  gap:16px !important;
+  align-items:stretch !important;
+}}
+
+/* === Sidebar (desktop >= 1024px) ======================================= */
+.ams-sidebar {{
+  background:{SURFACE_STRONG} !important;
+  padding:14px 8px !important;
+  border-radius:{RADIUS} !important;
+  border:1px solid {BORDER} !important;
+  min-width:190px;
+  max-width:210px;
+}}
+
+/* --- Mode radio (re-skin gr.Radio as a vertical sidebar nav) ----------- */
+.ams-side-radio {{
+  background:transparent !important;
+  border:none !important;
+  padding:0 !important;
+  width:100%;
+}}
+.ams-side-radio .wrap {{
+  display:flex !important;
+  flex-direction:column !important;
+  gap:2px !important;
+  background:transparent !important;
+  border:none !important;
+}}
+/* Each radio option becomes a sidebar pill */
+.ams-side-radio label {{
+  display:flex !important;
+  align-items:center !important;
+  padding:9px 12px !important;
+  margin:0 !important;
+  border-radius:4px !important;
+  border:none !important;
+  border-left:2px solid transparent !important;
+  background:transparent !important;
+  color:{INK_MUTED} !important;
+  font-size:13px !important;
+  font-weight:500 !important;
+  cursor:pointer !important;
+  transition:background 80ms ease, color 80ms ease, border-color 80ms ease;
+  min-height:0 !important;
+  width:100%;
+  box-sizing:border-box;
+}}
+.ams-side-radio label:hover {{
+  background:{HOVER_BG} !important;
+  color:{INK} !important;
+}}
+/* Hide the native radio circle */
+.ams-side-radio label input[type="radio"] {{
+  display:none !important;
+}}
+/* Active state: white text + white left border + dark bg */
+.ams-side-radio label.selected,
+.ams-side-radio label:has(input[type="radio"]:checked) {{
+  background:{HOVER_BG} !important;
+  color:{PRIMARY} !important;
+  border-left-color:{PRIMARY} !important;
+  font-weight:600 !important;
+}}
+/* Hide the (now-empty) form-element-info row that gr.Radio injects */
+.ams-side-radio + div:empty {{ display:none !important; }}
+
+/* --- Session history block (below the mode radio) --------------------- */
+.ams-history {{
+  margin-top:14px;
+  padding-top:10px;
+  border-top:1px solid {BORDER};
+}}
+.ams-history-title {{
+  font-size:10px; color:{INK_MUTED};
+  letter-spacing:0.1em; text-transform:uppercase;
+  padding:0 4px 6px 4px;
+}}
+.ams-history-empty {{
+  font-size:11px; color:#3F3F3F;
+  font-style:italic;
+  padding:6px 4px;
+}}
+
+/* === Content area ====================================================== */
+.ams-content {{
+  background:{SURFACE} !important;
+  border:1px solid {BORDER} !important;
+  border-radius:{RADIUS} !important;
+  padding:16px !important;
+  min-height:540px;
 }}
-.ams-side-item.active {{
-  background:#1A1A1A; color:{PRIMARY};
-  border-left:2px solid {PRIMARY}; padding-left:8px;
+.ams-tab-pane {{
+  background:transparent !important;
+  border:none !important;
+  padding:0 !important;
 }}
 
-/* --- LoRA chip pill --------------------------------------------------- */
+/* === LoRA chip pill (used in M2+) ====================================== */
 .ams-chip {{
   display:inline-block; padding:5px 10px; border-radius:14px;
   font-size:11px; margin:0 5px 5px 0; background:{SURFACE_STRONG};
@@ -88,22 +193,64 @@ CSS = f"""
 .ams-chip.on {{ border-color:{PRIMARY}; color:{PRIMARY}; }}
 .ams-chip.upload {{ border-style:dashed; color:{PRIMARY}; }}
 
-/* --- LoRA file drop zone (tighten Gradio default ~400px height) ------ */
+/* === LoRA file drop zone (tighten Gradio default ~400px height) ======== */
 .ams-lora-file .upload-container {{ min-height:56px !important; }}
 
-/* --- Hide Gradio footer ----------------------------------------------- */
+/* === Hide Gradio footer ================================================ */
 footer {{ display:none !important; }}
 
-/* --- Responsive: tablet 640-1024 px ----------------------------------- */
+/* === Responsive: tablet 640-1024 px ==================================== */
 @media (max-width: 1024px) {{
-  .ams-sidebar {{ min-width:34px; padding:6px 4px; }}
-  .ams-side-item {{ font-size:0; padding:6px; }}
-  .ams-side-item::first-letter {{ font-size:16px; }}
+  .ams-sidebar {{
+    min-width:48px !important;
+    max-width:48px !important;
+    padding:8px 4px !important;
+  }}
+  /* Hide labels, keep only the leading emoji */
+  .ams-side-radio label {{
+    font-size:0 !important;
+    padding:8px 0 !important;
+    justify-content:center !important;
+  }}
+  .ams-side-radio label::first-letter {{
+    font-size:16px !important;
+  }}
+  /* Hide history in tablet rail mode */
+  .ams-history {{ display:none !important; }}
 }}
 
-/* --- Responsive: mobile < 640 px -------------------------------------- */
+/* === Responsive: mobile < 640 px ======================================= */
 @media (max-width: 640px) {{
-  .ams-sidebar {{ display:none; }}
+  .ams-body {{
+    flex-direction:column !important;
+  }}
+  .ams-sidebar {{
+    min-width:100% !important;
+    max-width:100% !important;
+    padding:6px !important;
+  }}
+  /* Mobile: switch sidebar to horizontal scroll strip */
+  .ams-side-radio .wrap {{
+    flex-direction:row !important;
+    overflow-x:auto !important;
+    gap:4px !important;
+  }}
+  .ams-side-radio label {{
+    font-size:11px !important;
+    white-space:nowrap !important;
+    border-left:none !important;
+    border-bottom:2px solid transparent !important;
+    padding:8px 10px !important;
+    justify-content:flex-start !important;
+  }}
+  .ams-side-radio label::first-letter {{
+    font-size:13px !important;
+  }}
+  .ams-side-radio label:has(input[type="radio"]:checked) {{
+    border-left-color:transparent !important;
+    border-bottom-color:{PRIMARY} !important;
+  }}
+  .ams-history {{ display:none !important; }}
   .ams-cta {{ font-size:11px; }}
 }}
 """