Variant card layout — title above audio; bars on 3 lines, v-name bottom-right; anchor matches

app.py

@@ -815,17 +815,28 @@ def regenerate_variants(prompt_text: str, last_run_state, duration: int = 15, ap
     paths: list[str | None] = [None, None, None, None, None]
     matches: list[dict | None] = [None, None, None, None, None]
 
-    def _slot(idx: int):
-        """Build the gr.update for slot idx. Label encodes the BPM / Harm /
-        Rhyt bar breakdown once we've scored the variant against the anchor;
-        plain `v3` before scoring or on failure."""
-        label = _match_label(idx, matches[idx])
+    def _audio_slot(idx: int):
+        """gr.update for the Audio component at slot idx. Label is empty
+        because the visible title is now the gr.HTML above it."""
         if paths[idx]:
-            return gr.update(value=paths[idx], visible=True, label=label)
-        return gr.update(value=None, visible=True, label=label)
+            return gr.update(value=paths[idx], visible=True)
+        return gr.update(value=None, visible=True)
+
+    def _title_slot(idx: int):
+        """gr.update for the gr.HTML title above slot idx. Carries the
+        BPM/Harm/Rhyt bar breakdown once we've scored the variant."""
+        return gr.update(value=_variant_title_html(idx, matches[idx]))
 
     def _emit(status: str):
-        return (*(_slot(i) for i in range(5)), status)
+        # Output order matches the regen_btn.click outputs binding:
+        # (var1, var2, var3, var4, var5,
+        #  var1_title, var2_title, var3_title, var4_title, var5_title,
+        #  regen_status)
+        return (
+            *(_audio_slot(i) for i in range(5)),
+            *(_title_slot(i) for i in range(5)),
+            status,
+        )
 
     if not (prompt_text or "").strip():
         yield _emit("_❌ Enter a prompt to regenerate from._")
@@ -1050,26 +1061,39 @@ def _quick_match(variant_path: str, anchor_bpm: float | None,
         return None
 
 
-def _match_label(idx: int, breakdown: dict | None) -> str:
-    """Render the variant Audio's label as `V3 · BPM ▮▮▮▯ · Harm ▮▮▮▮ · Rhyt ▮▮▯▯`.
+def _bars(v: int) -> str:
+    """Map a 0–100 score to a 4-block bar string. Quartiles at 12/38/63/88."""
+    if v >= 88: n = 4
+    elif v >= 63: n = 3
+    elif v >= 38: n = 2
+    elif v >= 12: n = 1
+    else: n = 0
+    return "▮" * n + "▯" * (4 - n)
+
 
-    Each axis maps 0–100 → 0–4 filled blocks (▮) padded to 4 with ▯.
-    Pre-regen / failure: returns just `v3`."""
+def _variant_title_html(idx: int, breakdown: dict | None) -> str:
+    """Render a per-variant title block to sit above the Audio component.
+
+    Layout: BPM/Harm/Rhyt as three left-aligned lines (`Harm ▮▮▮▮`), name
+    (`v1`) bottom-right. Pre-regen / failure: just the name."""
+    name = f"v{idx + 1}"
     if not breakdown:
-        return f"v{idx + 1}"
-    def bars(v: int) -> str:
-        # Quartile thresholds 12 / 38 / 63 / 88. Tightening these later
-        # is cheap if the spread feels off in practice.
-        if v >= 88: n = 4
-        elif v >= 63: n = 3
-        elif v >= 38: n = 2
-        elif v >= 12: n = 1
-        else: n = 0
-        return "▮" * n + "▯" * (4 - n)
-    return (f"V{idx + 1} · "
-            f"BPM {bars(breakdown['bpm'])} · "
-            f"Harm {bars(breakdown['harm'])} · "
-            f"Rhyt {bars(breakdown['rhyt'])}")
+        return (
+            '<div class="dc-variant-title">'
+            f'<div class="bars placeholder">BPM ▯▯▯▯<br>Harm ▯▯▯▯<br>Rhyt ▯▯▯▯</div>'
+            f'<div class="name">{name}</div>'
+            '</div>'
+        )
+    return (
+        '<div class="dc-variant-title">'
+        '<div class="bars">'
+        f'BPM {_bars(breakdown["bpm"])}<br>'
+        f'Harm {_bars(breakdown["harm"])}<br>'
+        f'Rhyt {_bars(breakdown["rhyt"])}'
+        '</div>'
+        f'<div class="name">{name}</div>'
+        '</div>'
+    )
 
 
 def _section_seek_html(a) -> str:
@@ -1453,21 +1477,47 @@ def build_ui() -> gr.Blocks:
                 gr.HTML(cost_pip_html(SA3_COST_PER_CALL * 5, suffix="5 variants · flat"))
                 regen_status = gr.Markdown("")
                 # Anchor + 5 variants on one row so users can A/B-test
-                # each variant against the original. The anchor's audio
-                # path is populated from last_run on analysis-complete;
-                # hidden until then so the slot doesn't sit empty.
+                # each variant against the original. Each card is a Column
+                # with a custom HTML header (so the BPM/Harm/Rhyt bars can
+                # render left-aligned on three lines) + an Audio component
+                # with show_label=False (since the header replaces the label).
+                # Same column wrapping for the anchor so all 6 cards line up.
                 gr.HTML('<div class="dc-label" style="margin-top:14px;">'
                         'ANCHOR + 5 VARIANTS</div>')
                 with gr.Row(elem_classes=["dc-variant-row"]):
-                    anchor_audio = gr.Audio(label="★ ANCHOR", interactive=False,
-                                             type="filepath", scale=1,
-                                             visible=False,
-                                             elem_classes=["dc-anchor-audio"])
-                    var1 = gr.Audio(label="v1", interactive=False, type="filepath", scale=1)
-                    var2 = gr.Audio(label="v2", interactive=False, type="filepath", scale=1)
-                    var3 = gr.Audio(label="v3", interactive=False, type="filepath", scale=1)
-                    var4 = gr.Audio(label="v4", interactive=False, type="filepath", scale=1)
-                    var5 = gr.Audio(label="v5", interactive=False, type="filepath", scale=1)
+                    with gr.Column(scale=1, elem_classes=["dc-variant-cell"]):
+                        anchor_title = gr.HTML(
+                            '<div class="dc-variant-title">'
+                            '<div class="bars anchor-label">★ ANCHOR</div>'
+                            '<div class="name">orig</div>'
+                            '</div>',
+                            visible=False,
+                        )
+                        anchor_audio = gr.Audio(label="", show_label=False,
+                                                 interactive=False,
+                                                 type="filepath", scale=1,
+                                                 visible=False,
+                                                 elem_classes=["dc-anchor-audio"])
+                    with gr.Column(scale=1, elem_classes=["dc-variant-cell"]):
+                        var1_title = gr.HTML(_variant_title_html(0, None))
+                        var1 = gr.Audio(label="", show_label=False,
+                                         interactive=False, type="filepath", scale=1)
+                    with gr.Column(scale=1, elem_classes=["dc-variant-cell"]):
+                        var2_title = gr.HTML(_variant_title_html(1, None))
+                        var2 = gr.Audio(label="", show_label=False,
+                                         interactive=False, type="filepath", scale=1)
+                    with gr.Column(scale=1, elem_classes=["dc-variant-cell"]):
+                        var3_title = gr.HTML(_variant_title_html(2, None))
+                        var3 = gr.Audio(label="", show_label=False,
+                                         interactive=False, type="filepath", scale=1)
+                    with gr.Column(scale=1, elem_classes=["dc-variant-cell"]):
+                        var4_title = gr.HTML(_variant_title_html(3, None))
+                        var4 = gr.Audio(label="", show_label=False,
+                                         interactive=False, type="filepath", scale=1)
+                    with gr.Column(scale=1, elem_classes=["dc-variant-cell"]):
+                        var5_title = gr.HTML(_variant_title_html(4, None))
+                        var5 = gr.Audio(label="", show_label=False,
+                                         interactive=False, type="filepath", scale=1)
 
             # Downstream outputs — three copy-paste artefacts a producer
             # leaves with after the brief. Collapsed by default; expand
@@ -1786,17 +1836,21 @@ def build_ui() -> gr.Blocks:
 
         # Populate the anchor audio slot from last_run.audio_path so the
         # user can A/B against the original next to V1–V5 in one row.
+        # Anchor title + audio flip visibility together.
         def _set_anchor(lr):
             if not isinstance(lr, dict):
-                return gr.update(value=None, visible=False)
+                return (gr.update(visible=False),
+                        gr.update(value=None, visible=False))
             path = lr.get("audio_path") or None
             if not path:
-                return gr.update(value=None, visible=False)
-            return gr.update(value=path, visible=True)
+                return (gr.update(visible=False),
+                        gr.update(value=None, visible=False))
+            return (gr.update(visible=True),
+                    gr.update(value=path, visible=True))
         last_run.change(
             fn=_set_anchor,
             inputs=[last_run],
-            outputs=[anchor_audio],
+            outputs=[anchor_title, anchor_audio],
         )
 
         # Auto-snap variant duration to the closest preset for the anchor.
@@ -1825,7 +1879,9 @@ def build_ui() -> gr.Blocks:
         regen_chain = regen_btn.click(
             fn=regenerate_variants,
             inputs=[sa3_var, last_run, regen_duration, api_key_state],
-            outputs=[var1, var2, var3, var4, var5, regen_status],
+            outputs=[var1, var2, var3, var4, var5,
+                     var1_title, var2_title, var3_title, var4_title, var5_title,
+                     regen_status],
             api_name="regenerate_variants",
         ).then(
             # After all 5 land, refresh the crate dropdown so the new tiles

theme.py

@@ -335,6 +335,60 @@ h3 { font-size: 13px; color: #C9CDD4; }
     background: #14171D;
 }
 .dc-var-hold .chips { display: flex; gap: 6px; }
+/* ---- Variant cards (anchor + 5 variants in one row) — each is a
+       Column containing a custom HTML title + an Audio component, so
+       they all line up at the same height regardless of how the audio
+       widget grows. Title carries the BPM/Harm/Rhyt bar breakdown on
+       three left-aligned lines + the v-name in the bottom-right. */
+.dc-variant-cell {
+    min-width: 0;  /* let columns shrink in a tight row */
+}
+.dc-variant-title {
+    background: #14171D;
+    border: 1px solid #232831;
+    border-radius: 8px 8px 0 0;
+    border-bottom: none;
+    padding: 8px 10px;
+    min-height: 76px;
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-end;
+    gap: 6px;
+}
+.dc-variant-title .bars {
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 10px;
+    line-height: 1.5;
+    color: #C9CDD4;
+    text-align: left;
+    flex: 1;
+}
+.dc-variant-title .bars.placeholder {
+    color: #3A3F47;  /* faded — pre-regen state */
+}
+.dc-variant-title .bars.anchor-label {
+    font-size: 12px;
+    color: #FFC24B;  /* amber for the anchor */
+    font-weight: 600;
+    letter-spacing: 0.05em;
+}
+.dc-variant-title .name {
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 11px;
+    color: #5E6671;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+}
+/* The Audio sits directly under the title — kill its rounded top so
+   they read as one card. */
+.dc-variant-cell .audio-container,
+.dc-variant-cell [class*="audio"] > div:first-child {
+    border-top-left-radius: 0 !important;
+    border-top-right-radius: 0 !important;
+    border-top: none !important;
+}
+
 /* ---- Section seek strip — clickable chips beneath the analysis
        waveform. Each section's chip carries a 2px top-border in its
        semantic colour (mint-deep Intro / mint Build / coral Core /