feat(ui): edit tab zones, audio readout, live reload

- Zones/presets/sequence strip and Pipfile dev command fix
- Optional live reload and beat test audio asset + generator

Co-authored-by: Cursor <cursoragent@cursor.com>

src/static/style.css

@@ -199,13 +199,31 @@ header h1 {
 
 .audio-top-indicator {
     display: none;
-    align-items: center;
-    gap: 0.4rem;
+    flex-direction: column;
+    align-items: stretch;
+    gap: 0.15rem;
     padding: 0.25rem 0.55rem;
     border: 1px solid #4a4a4a;
     border-radius: 6px;
     background-color: #1a1a1a;
-    min-width: 6.5rem;
+    min-width: 9rem;
+}
+
+.audio-top-indicator-main {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.4rem;
+}
+
+.audio-top-indicator-extra {
+    font-size: 0.62rem;
+    color: #9e9e9e;
+    line-height: 1.25;
+    text-align: right;
+    max-width: 16rem;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 
 .audio-top-indicator.audio-running {
@@ -226,6 +244,19 @@ header h1 {
     text-align: right;
 }
 
+.audio-top-beat-readout {
+    font-size: 0.62rem;
+    color: #b0bec5;
+    line-height: 1.25;
+    max-width: 12rem;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    flex: 1;
+    min-width: 0;
+    text-align: left;
+}
+
 .audio-top-indicator-subvalue {
     font-size: 0.75rem;
     color: #9e9e9e;
@@ -240,7 +271,9 @@ header h1 {
 
 .audio-top-indicator.flash .audio-top-indicator-value,
 .audio-top-indicator.flash .audio-top-indicator-label,
-.audio-top-indicator.flash .audio-top-indicator-subvalue {
+.audio-top-indicator.flash .audio-top-indicator-subvalue,
+.audio-top-indicator.flash .audio-top-indicator-extra,
+.audio-top-indicator.flash .audio-top-beat-readout {
     color: #fff;
 }
 
@@ -620,7 +653,8 @@ body.preset-ui-run .edit-mode-only {
     overflow-x: hidden;
     display: grid;
     grid-template-columns: repeat(8, minmax(0, 1fr));
-    grid-auto-rows: 5rem;
+    /* min-content height prevents taller tiles (edit actions, wrapping) from overlapping the next row and stealing clicks */
+    grid-auto-rows: minmax(5rem, auto);
     column-gap: 0.3rem;
     row-gap: 0.3rem;
     align-content: start;
@@ -784,6 +818,26 @@ body.preset-ui-run .edit-mode-only {
     border-radius: 6px;
 }
 
+.audio-bpm-row {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.75rem;
+}
+
+.audio-bpm-row .audio-bpm-readout {
+    flex: 0 0 auto;
+    min-width: 5rem;
+}
+
+.audio-modal-beat-readout {
+    flex: 1;
+    min-width: 10rem;
+    font-size: 0.85rem;
+    line-height: 1.35;
+    text-align: left;
+}
+
 .audio-hit-type-readout {
     font-size: 1.1rem;
     font-weight: 600;
@@ -851,17 +905,43 @@ body.preset-ui-run .edit-mode-only {
     flex-direction: row;
     align-items: stretch;
     min-width: 0;
-    min-height: 0;
+    min-height: 5rem;
 }
 
-.preset-tile-row--run .preset-tile-actions {
-    display: none;
+.preset-tile-row-top {
+    display: flex;
+    flex-direction: row;
+    align-items: stretch;
+    flex: 1;
+    min-width: 0;
+    min-height: 5rem;
 }
 
 .preset-tile-main {
     flex: 1;
     min-width: 0;
     height: 5rem;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 0.12rem;
+}
+
+.preset-tile-main .preset-tile-groups {
+    font-size: 0.68rem;
+    font-weight: 500;
+    line-height: 1.15;
+    opacity: 0.88;
+    text-align: center;
+    max-width: 100%;
+    padding: 0 0.35rem;
+    box-sizing: border-box;
+    word-break: break-word;
+}
+
+.preset-tile-row--run .preset-tile-actions {
+    display: none;
 }
 
 /* Edit only beside the preset tile in edit mode. */
@@ -1030,6 +1110,46 @@ body.preset-ui-run .edit-mode-only {
     display: flex;
 }
 
+/* Stack sequence modals below groups / preset editor so in-modal actions stay visible */
+#sequence-editor-modal.active,
+#sequences-modal.active {
+    z-index: 1040;
+}
+#groups-modal.active,
+#edit-group-modal.active,
+#presets-modal.active {
+    z-index: 1050;
+}
+#preset-editor-modal.active {
+    z-index: 1060;
+}
+
+/* Child / overlay modals: must paint above preset editor (1060) and list modals (1050). */
+#color-palette-modal.active,
+#pattern-editor-modal.active,
+#edit-device-modal.active,
+#edit-zone-modal.active {
+    z-index: 1070;
+}
+
+/* Patterns library (often used next to presets); below preset editor, above sequences. */
+#patterns-modal.active {
+    z-index: 1055;
+}
+
+/* Header / global dialogs */
+#help-modal.active,
+#audio-modal.active,
+#settings-modal.active,
+#led-tool-modal.active {
+    z-index: 1080;
+}
+
+/* JS-appended overlays (e.g. preset “From Palette”, add-preset-to-zone) — must sit above #preset-editor-modal */
+.modal.modal-child-overlay.active {
+    z-index: 1080;
+}
+
 .modal-content {
     background-color: #2e2e2e;
     padding: 2rem;