From 628ba98d3b2c3e8c028554c4261783693b6a46a7 Mon Sep 17 00:00:00 2001
From: Jakub Zych <jakub@keios.eu>
Date: Mon, 27 Apr 2026 03:45:31 +0200
Subject: [PATCH] Music Box scene + Desktop scene right-sidebar rework
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

New full-screen scene (Music Box, Ctrl+M) for music-only foreground use.
Built on the same terminal pattern as Goodbye/Loading: typed boot
sequence (music --boot --shuffle, [audio] subscribing, library count,
queue: shuffle on, standby ✓), scrolling [audio] now: <title> history
on track changes, static-HTML pinned block at the bottom (3-up
next/then/then + arrow-pulse now-playing line). Below the terminal,
a dedicated "CHAT  !skip · !queue · !info" status strip — kept outside
the scrolling area on purpose so the command help stays visible
regardless of terminal contents.

Desktop scene now mirrors Game's right-sidebar layout:
- Camera moved into top-right at the Game-scene transform (1937,98 ×
  0.286), always visible (vs. Game which toggles per-session).
- New Music Box widget (music-box/widget.html) directly below camera,
  same width (549 px) so the two pair as one column. 880 px tall to
  fill the right sidebar down to the canvas bottom. Authored at native
  pixel size with bounds_type 0 (no stretch) — pinned 3-up next +
  inline arrow/title/time + chat help; same scrolling [audio] history
  pattern as the full-screen Music Box.
- HUD swapped from the shared Game HUD to a forked desktop/index.html:
  same top-strip + camera-frame OBS-sync, but no game-name slot
  (status reads "DESKTOP"), no manifest dependence, no status-bar
  music widget (lives in the dedicated sidebar source now).

Pinned blocks in both Music Box overlays are static HTML so the
structure renders even if a script throws — JS only updates text
content.
---
 basic/scenes/Default_Stream_HUD.json | 397 +++++++++++++++++++-
 desktop/index.html                   | 344 +++++++++++++++++
 music-box/index.html                 | 538 +++++++++++++++++++++++++++
 music-box/widget.html                | 314 ++++++++++++++++
 4 files changed, 1586 insertions(+), 7 deletions(-)
 create mode 100644 desktop/index.html
 create mode 100644 music-box/index.html
 create mode 100644 music-box/widget.html

diff --git a/basic/scenes/Default_Stream_HUD.json b/basic/scenes/Default_Stream_HUD.json
index 0232785..285e7b9 100644
--- a/basic/scenes/Default_Stream_HUD.json
+++ b/basic/scenes/Default_Stream_HUD.json
@@ -507,7 +507,7 @@
             "mixers": 255,
             "sync": 0,
             "flags": 0,
-            "volume": 0.34666880965232849,
+            "volume": 0.0,
             "balance": 0.5,
             "enabled": true,
             "muted": false,
@@ -538,7 +538,7 @@
             "mixers": 255,
             "sync": 0,
             "flags": 0,
-            "volume": 0.012610126286745071,
+            "volume": 0.0053968820720911026,
             "balance": 0.5,
             "enabled": true,
             "muted": false,
@@ -557,6 +557,121 @@
             "monitoring_type": 0,
             "private_settings": {}
         },
+        {
+            "prev_ver": 536936450,
+            "name": "Desktop HUD",
+            "uuid": "8acfb832-cfb4-4310-8ebb-b58fad2b3509",
+            "id": "browser_source",
+            "versioned_id": "browser_source",
+            "settings": {
+                "is_local_file": true,
+                "local_file": "/home/jin/.config/obs-studio/desktop/index.html",
+                "width": 2560,
+                "height": 1336,
+                "fps": 15,
+                "fps_custom": true,
+                "shutdown": true
+            },
+            "mixers": 255,
+            "sync": 0,
+            "flags": 0,
+            "volume": 1.0,
+            "balance": 0.5,
+            "enabled": true,
+            "muted": false,
+            "push-to-mute": false,
+            "push-to-mute-delay": 0,
+            "push-to-talk": false,
+            "push-to-talk-delay": 0,
+            "hotkeys": {
+                "libobs.mute": [],
+                "libobs.unmute": [],
+                "libobs.push-to-mute": [],
+                "libobs.push-to-talk": [],
+                "ObsBrowser.Refresh": []
+            },
+            "deinterlace_mode": 0,
+            "deinterlace_field_order": 0,
+            "monitoring_type": 0,
+            "private_settings": {}
+        },
+        {
+            "prev_ver": 536936450,
+            "name": "Music Box HUD",
+            "uuid": "1b9f5436-864d-4f24-9f92-f45702a23953",
+            "id": "browser_source",
+            "versioned_id": "browser_source",
+            "settings": {
+                "is_local_file": true,
+                "local_file": "/home/jin/.config/obs-studio/music-box/index.html",
+                "width": 2560,
+                "height": 1336,
+                "fps": 30,
+                "fps_custom": true,
+                "shutdown": true,
+                "restart_when_active": true
+            },
+            "mixers": 255,
+            "sync": 0,
+            "flags": 0,
+            "volume": 1.0,
+            "balance": 0.5,
+            "enabled": true,
+            "muted": false,
+            "push-to-mute": false,
+            "push-to-mute-delay": 0,
+            "push-to-talk": false,
+            "push-to-talk-delay": 0,
+            "hotkeys": {
+                "libobs.mute": [],
+                "libobs.unmute": [],
+                "libobs.push-to-mute": [],
+                "libobs.push-to-talk": [],
+                "ObsBrowser.Refresh": []
+            },
+            "deinterlace_mode": 0,
+            "deinterlace_field_order": 0,
+            "monitoring_type": 0,
+            "private_settings": {}
+        },
+        {
+            "prev_ver": 536936450,
+            "name": "Music Box Widget",
+            "uuid": "f662d513-6fe6-49fd-99f6-ea7f44e8de18",
+            "id": "browser_source",
+            "versioned_id": "browser_source",
+            "settings": {
+                "is_local_file": true,
+                "local_file": "/home/jin/.config/obs-studio/music-box/widget.html",
+                "width": 549,
+                "height": 880,
+                "fps": 15,
+                "fps_custom": true,
+                "shutdown": true
+            },
+            "mixers": 255,
+            "sync": 0,
+            "flags": 0,
+            "volume": 1.0,
+            "balance": 0.5,
+            "enabled": true,
+            "muted": false,
+            "push-to-mute": false,
+            "push-to-mute-delay": 0,
+            "push-to-talk": false,
+            "push-to-talk-delay": 0,
+            "hotkeys": {
+                "libobs.mute": [],
+                "libobs.unmute": [],
+                "libobs.push-to-mute": [],
+                "libobs.push-to-talk": [],
+                "ObsBrowser.Refresh": []
+            },
+            "deinterlace_mode": 0,
+            "deinterlace_field_order": 0,
+            "monitoring_type": 0,
+            "private_settings": {}
+        },
         {
             "prev_ver": 536936450,
             "name": "Desktop",
@@ -565,7 +680,7 @@
             "versioned_id": "scene",
             "settings": {
                 "custom_size": false,
-                "id_counter": 15,
+                "id_counter": 17,
                 "items": [
                     {
                         "name": "Screen Capture (PipeWire)",
@@ -678,8 +793,8 @@
                         "private_settings": {}
                     },
                     {
-                        "name": "HUD",
-                        "source_uuid": "f409a999-358f-488d-98db-c5c6a01d01b9",
+                        "name": "Desktop HUD",
+                        "source_uuid": "8acfb832-cfb4-4310-8ebb-b58fad2b3509",
                         "visible": true,
                         "locked": false,
                         "rot": 0.0,
@@ -688,7 +803,7 @@
                             "y": 1336.0
                         },
                         "align": 5,
-                        "bounds_type": 0,
+                        "bounds_type": 1,
                         "bounds_align": 0,
                         "bounds_crop": false,
                         "crop_left": 0,
@@ -713,6 +828,116 @@
                             "x": 1.0,
                             "y": 1.0
                         },
+                        "bounds": {
+                            "x": 2560.0,
+                            "y": 1336.0
+                        },
+                        "bounds_rel": {
+                            "x": 3.8323352336883545,
+                            "y": 2.0
+                        },
+                        "scale_filter": "disable",
+                        "blend_method": "default",
+                        "blend_type": "normal",
+                        "show_transition": {
+                            "duration": 300
+                        },
+                        "hide_transition": {
+                            "duration": 300
+                        },
+                        "private_settings": {}
+                    },
+                    {
+                        "name": "Camera",
+                        "source_uuid": "a8b362a1-91a6-491b-8751-26e2dad55ccd",
+                        "visible": false,
+                        "locked": false,
+                        "rot": 0.0,
+                        "scale_ref": {
+                            "x": 1920.0,
+                            "y": 1080.0
+                        },
+                        "align": 5,
+                        "bounds_type": 0,
+                        "bounds_align": 0,
+                        "bounds_crop": false,
+                        "crop_left": 0,
+                        "crop_top": 0,
+                        "crop_right": 0,
+                        "crop_bottom": 0,
+                        "id": 16,
+                        "group_item_backup": false,
+                        "pos": {
+                            "x": 1990.0,
+                            "y": 49.0
+                        },
+                        "pos_rel": {
+                            "x": 1.0628741979598999,
+                            "y": -0.92664670944213867
+                        },
+                        "scale": {
+                            "x": 0.28593748807907104,
+                            "y": 0.28611111640930176
+                        },
+                        "scale_rel": {
+                            "x": 0.23114706575870514,
+                            "y": 0.23128743469715118
+                        },
+                        "bounds": {
+                            "x": 0.0,
+                            "y": 0.0
+                        },
+                        "bounds_rel": {
+                            "x": 0.0,
+                            "y": 0.0
+                        },
+                        "scale_filter": "disable",
+                        "blend_method": "default",
+                        "blend_type": "normal",
+                        "show_transition": {
+                            "duration": 0
+                        },
+                        "hide_transition": {
+                            "duration": 0
+                        },
+                        "private_settings": {}
+                    },
+                    {
+                        "name": "Music Box Widget",
+                        "source_uuid": "f662d513-6fe6-49fd-99f6-ea7f44e8de18",
+                        "visible": true,
+                        "locked": false,
+                        "rot": 0.0,
+                        "scale_ref": {
+                            "x": 549.0,
+                            "y": 880.0
+                        },
+                        "align": 5,
+                        "bounds_type": 0,
+                        "bounds_align": 0,
+                        "bounds_crop": false,
+                        "crop_left": 0,
+                        "crop_top": 0,
+                        "crop_right": 0,
+                        "crop_bottom": 0,
+                        "id": 17,
+                        "group_item_backup": false,
+                        "pos": {
+                            "x": 1984.0,
+                            "y": 392.0
+                        },
+                        "pos_rel": {
+                            "x": 1.0538922548294067,
+                            "y": -0.41317367553710938
+                        },
+                        "scale": {
+                            "x": 1.0364298820495605,
+                            "y": 1.0363636016845703
+                        },
+                        "scale_rel": {
+                            "x": 0.68267840147018433,
+                            "y": 0.68263471126556396
+                        },
                         "bounds": {
                             "x": 0.0,
                             "y": 0.0
@@ -757,7 +982,11 @@
                 "libobs.show_scene_item.14": [],
                 "libobs.hide_scene_item.14": [],
                 "libobs.show_scene_item.15": [],
-                "libobs.hide_scene_item.15": []
+                "libobs.hide_scene_item.15": [],
+                "libobs.show_scene_item.16": [],
+                "libobs.hide_scene_item.16": [],
+                "libobs.show_scene_item.17": [],
+                "libobs.hide_scene_item.17": []
             },
             "deinterlace_mode": 0,
             "deinterlace_field_order": 0,
@@ -1990,6 +2219,157 @@
             "monitoring_type": 0,
             "canvas_uuid": "6c69626f-6273-4c00-9d88-c5136d61696e",
             "private_settings": {}
+        },
+        {
+            "prev_ver": 536936450,
+            "name": "Music Box",
+            "uuid": "747b2411-45a9-471a-b0dc-dfe39b0d6385",
+            "id": "scene",
+            "versioned_id": "scene",
+            "settings": {
+                "id_counter": 2,
+                "custom_size": false,
+                "items": [
+                    {
+                        "name": "MPD",
+                        "source_uuid": "25440930-0606-46d9-ba2c-be786ff4a3ae",
+                        "visible": true,
+                        "locked": false,
+                        "rot": 0.0,
+                        "scale_ref": {
+                            "x": 2560.0,
+                            "y": 1336.0
+                        },
+                        "align": 5,
+                        "bounds_type": 0,
+                        "bounds_align": 0,
+                        "bounds_crop": false,
+                        "crop_left": 0,
+                        "crop_top": 0,
+                        "crop_right": 0,
+                        "crop_bottom": 0,
+                        "id": 1,
+                        "group_item_backup": false,
+                        "pos": {
+                            "x": 0.0,
+                            "y": 0.0
+                        },
+                        "pos_rel": {
+                            "x": -1.9161676168441772,
+                            "y": -1.0
+                        },
+                        "scale": {
+                            "x": 1.0,
+                            "y": 1.0
+                        },
+                        "scale_rel": {
+                            "x": 1.0,
+                            "y": 1.0
+                        },
+                        "bounds": {
+                            "x": 0.0,
+                            "y": 0.0
+                        },
+                        "bounds_rel": {
+                            "x": 0.0,
+                            "y": 0.0
+                        },
+                        "scale_filter": "disable",
+                        "blend_method": "default",
+                        "blend_type": "normal",
+                        "show_transition": {
+                            "duration": 300
+                        },
+                        "hide_transition": {
+                            "duration": 300
+                        },
+                        "private_settings": {}
+                    },
+                    {
+                        "name": "Music Box HUD",
+                        "source_uuid": "1b9f5436-864d-4f24-9f92-f45702a23953",
+                        "visible": true,
+                        "locked": false,
+                        "rot": 0.0,
+                        "scale_ref": {
+                            "x": 2560.0,
+                            "y": 1336.0
+                        },
+                        "align": 5,
+                        "bounds_type": 1,
+                        "bounds_align": 0,
+                        "bounds_crop": false,
+                        "crop_left": 0,
+                        "crop_top": 0,
+                        "crop_right": 0,
+                        "crop_bottom": 0,
+                        "id": 2,
+                        "group_item_backup": false,
+                        "pos": {
+                            "x": 0.0,
+                            "y": 0.0
+                        },
+                        "pos_rel": {
+                            "x": -1.9161676168441772,
+                            "y": -1.0
+                        },
+                        "scale": {
+                            "x": 1.0,
+                            "y": 1.0
+                        },
+                        "scale_rel": {
+                            "x": 1.0,
+                            "y": 1.0
+                        },
+                        "bounds": {
+                            "x": 2560.0,
+                            "y": 1336.0
+                        },
+                        "bounds_rel": {
+                            "x": 3.8323352336883545,
+                            "y": 2.0
+                        },
+                        "scale_filter": "disable",
+                        "blend_method": "default",
+                        "blend_type": "normal",
+                        "show_transition": {
+                            "duration": 300
+                        },
+                        "hide_transition": {
+                            "duration": 300
+                        },
+                        "private_settings": {}
+                    }
+                ]
+            },
+            "mixers": 0,
+            "sync": 0,
+            "flags": 0,
+            "volume": 1.0,
+            "balance": 0.5,
+            "enabled": true,
+            "muted": false,
+            "push-to-mute": false,
+            "push-to-mute-delay": 0,
+            "push-to-talk": false,
+            "push-to-talk-delay": 0,
+            "hotkeys": {
+                "OBSBasic.SelectScene": [
+                    {
+                        "control": true,
+                        "key": "OBS_KEY_M"
+                    }
+                ],
+                "libobs.show_scene_item.1": [],
+                "libobs.hide_scene_item.1": [],
+                "libobs.show_scene_item.2": [],
+                "libobs.hide_scene_item.2": []
+            },
+            "deinterlace_mode": 0,
+            "deinterlace_field_order": 0,
+            "monitoring_type": 0,
+            "canvas_uuid": "6c69626f-6273-4c00-9d88-c5136d61696e",
+            "private_settings": {}
         }
     ],
     "groups": [
@@ -2215,6 +2595,9 @@
         {
             "name": "Desktop"
         },
+        {
+            "name": "Music Box"
+        },
         {
             "name": "Good Bye"
         }
diff --git a/desktop/index.html b/desktop/index.html
new file mode 100644
index 0000000..d8667be
--- /dev/null
+++ b/desktop/index.html
@@ -0,0 +1,344 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>OPHI-118 / DESKTOP</title>
+<style>
+  :root {
+    --ink:        #e8e8e0;
+    --ink-dim:    rgba(232, 232, 224, 0.62);
+    --hud:        #4fd2ff;
+    --hud-dim:    #2a7fa6;
+    --hud-edge:   rgba(79, 210, 255, 0.85);
+    --hud-glow:   rgba(79, 210, 255, 0.40);
+    --accent:     #e63a2e;
+    --warn:       #ffd000;
+    --term-fg:    #5fdc62;
+    --term-fg-dim:#2c8d2f;
+    --mono:       'DejaVu Sans Mono', 'Liberation Mono', 'Consolas', monospace;
+    --display:    'DejaVu Sans', 'Liberation Sans', 'Helvetica', 'Arial', sans-serif;
+    --pad-y:      40px;
+    --pad-x:      72px;
+    /* Camera frame transform — auto-synced from the Desktop scene's Camera
+       item via OBS WS. These defaults are first-paint fallback. */
+    --cam-x:      1937px;
+    --cam-y:      98px;
+    --cam-w:      549px;
+    --cam-h:      309px;
+    --cam-pad:    10px;
+  }
+
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+  html, body {
+    width: 100%; height: 100%;
+    background: transparent;
+    color: var(--ink);
+    font-family: var(--display);
+    overflow: hidden;
+    user-select: none;
+  }
+
+  /* ───────── Top HUD ───────── */
+  .hud {
+    position: absolute;
+    top: var(--pad-y);
+    left: var(--pad-x);
+    right: var(--pad-x);
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    align-items: center;
+    font-family: var(--mono);
+    font-size: 20px;
+    font-weight: 700;
+    color: var(--hud);
+    letter-spacing: 0.08em;
+    text-shadow: 0 0 8px rgba(7, 8, 13, 0.9), 0 0 4px rgba(7, 8, 13, 0.9);
+  }
+  .hud .group { display: flex; gap: 24px; align-items: center; }
+  .hud > .group:nth-child(1) { justify-self: start;  }
+  .hud > .group:nth-child(2) { justify-self: center; }
+  .hud > .group:nth-child(3) { justify-self: end;    }
+  .hud .dim { color: var(--hud-dim); }
+  .hud .group > span { display: inline-flex; align-items: center; gap: 10px; }
+  .hud .led {
+    display: inline-block;
+    width: 10px; height: 10px;
+    border-radius: 50%;
+    background: var(--accent);
+    box-shadow: 0 0 10px var(--accent);
+    margin-top: -0.08em;
+    animation: rec-blink 1.6s ease-in-out infinite;
+  }
+  #signal {
+    display: inline-block;
+    transform: translateY(-0.10em);
+  }
+  @keyframes rec-blink {
+    0%, 55% { opacity: 1; }
+    65%, 100% { opacity: 0.2; }
+  }
+
+  /* ───────── Camera frame (shared logic with game/index.html) ───────── */
+  .camera-frame {
+    position: absolute;
+    top:    calc(var(--cam-y) - var(--cam-pad));
+    left:   calc(var(--cam-x) - var(--cam-pad));
+    width:  calc(var(--cam-w) + var(--cam-pad) * 2);
+    height: calc(var(--cam-h) + var(--cam-pad) * 2);
+    pointer-events: none;
+    background: rgba(6, 10, 18, 0.85);
+    border: 1.5px solid rgba(79, 210, 255, 0.55);
+    box-shadow:
+      0 0 28px rgba(79, 210, 255, 0.20),
+      inset 0 0 60px rgba(0, 0, 0, 0.55);
+  }
+  .camera-frame .tick {
+    position: absolute;
+    width: 24px; height: 24px;
+    border: 3px solid var(--hud-edge);
+    box-shadow: 0 0 8px var(--hud-glow);
+  }
+  .camera-frame .tick.tl { top: -2px; left:  -2px; border-right: none; border-bottom: none; }
+  .camera-frame .tick.tr { top: -2px; right: -2px; border-left:  none; border-bottom: none; }
+  .camera-frame .tick.bl { bottom: -2px; left:  -2px; border-right: none; border-top: none; }
+  .camera-frame .tick.br { bottom: -2px; right: -2px; border-left:  none; border-top: none; }
+  .camera-frame .label {
+    position: absolute;
+    top: 10px; left: 14px;
+    font-family: var(--mono);
+    font-size: 12px;
+    color: var(--hud);
+    letter-spacing: 0.32em;
+    text-shadow: 0 0 4px rgba(7, 8, 13, 0.9);
+  }
+  .camera-frame .placeholder {
+    position: absolute; inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    gap: 14px;
+    font-family: var(--mono);
+    color: var(--hud);
+    pointer-events: none;
+  }
+  .camera-frame .placeholder svg { opacity: 0.6; }
+  .camera-frame .placeholder .ph-text {
+    font-size: 13px;
+    letter-spacing: 0.45em;
+    color: rgba(79, 210, 255, 0.7);
+  }
+  .camera-frame .placeholder .ph-coords {
+    font-size: 11px;
+    letter-spacing: 0.20em;
+    color: var(--hud-dim);
+  }
+  .camera-frame.off { display: none; }
+
+  /* ───────── Bottom status bar ───────── */
+  .status-bar {
+    position: absolute;
+    bottom: 0;
+    left: 0; right: 0;
+    padding: 22px var(--pad-x) 26px;
+    background:
+      linear-gradient(
+        to top,
+        rgba(7, 8, 13, 0.96) 0%,
+        rgba(7, 8, 13, 0.96) 65%,
+        rgba(7, 8, 13, 0.50) 90%,
+        rgba(7, 8, 13, 0)    100%
+      );
+    border-top: 1px solid rgba(79, 210, 255, 0.28);
+    box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.5);
+    font-family: var(--mono);
+    letter-spacing: 0.08em;
+  }
+  .status-line { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
+  .status-line + .status-line { margin-top: 8px; }
+  .status-line .sep { color: var(--hud-dim); }
+
+  .live-block {
+    display: flex; align-items: center; gap: 10px;
+    color: var(--accent);
+    font-weight: 700;
+    letter-spacing: 0.14em;
+    font-size: 18px;
+  }
+  .live-dot {
+    width: 11px; height: 11px;
+    border-radius: 50%;
+    background: var(--accent);
+    box-shadow: 0 0 10px var(--accent);
+    animation: rec-blink 1.6s ease-in-out infinite;
+  }
+  /* The "DESKTOP" label fills the slot the Game HUD uses for game name. */
+  .scene-name {
+    color: var(--ink);
+    font-weight: 700;
+    font-size: 22px;
+    letter-spacing: 0.10em;
+  }
+  .meta-line {
+    color: var(--ink-dim);
+    font-size: 16px;
+  }
+  .meta-line .icon { color: var(--hud); }
+</style>
+</head>
+<body>
+
+  <header class="hud">
+    <div class="group">
+      <span><span class="led"></span>TRANSMISSION</span>
+      <span>OPHI-118 // DESKTOP</span>
+    </div>
+    <div class="group">
+      <span class="dim">SIGNAL</span>
+      <span id="signal">▮▮▮▯▯</span>
+    </div>
+    <div class="group">
+      <span class="dim">UTC</span>
+      <span id="clock">--:--:--</span>
+    </div>
+  </header>
+
+  <div class="camera-frame" id="cam">
+    <span class="tick tl"></span>
+    <span class="tick tr"></span>
+    <span class="tick bl"></span>
+    <span class="tick br"></span>
+    <span class="label">CAM 01</span>
+    <div class="placeholder">
+      <svg width="64" height="48" viewBox="0 0 64 48" xmlns="http://www.w3.org/2000/svg" fill="none">
+        <rect x="2" y="8" width="44" height="32" rx="2" stroke="#4fd2ff" stroke-width="2"/>
+        <path d="M46 18 L60 10 L60 38 L46 30 Z" stroke="#4fd2ff" stroke-width="2" stroke-linejoin="round"/>
+        <circle cx="14" cy="14" r="2" fill="#e63a2e"/>
+      </svg>
+      <span class="ph-text">— WAITING FOR CAMERA —</span>
+      <span class="ph-coords">auto-syncs from OBS scene transform</span>
+    </div>
+  </div>
+
+  <footer class="status-bar">
+    <div class="status-line">
+      <div class="live-block">
+        <span class="live-dot"></span>
+        <span>LIVE</span>
+      </div>
+      <span class="sep">·</span>
+      <span class="scene-name">DESKTOP</span>
+    </div>
+    <div class="status-line meta-line">
+      <span class="icon">◷</span>
+      <span class="elapsed" id="elapsed">00:00:00</span>
+      <span class="sep">·</span>
+      <span class="icon" title="microphone">🎙</span>
+      <span style="color: var(--term-fg);">ON</span>
+    </div>
+  </footer>
+
+  <script src="../vendor/obs-config.js"></script>
+  <script src="../vendor/obs-ws-mini.js"></script>
+
+<script>
+  'use strict';
+  const pad = n => String(n).padStart(2, '0');
+
+  // ── UTC clock ──
+  const clockEl = document.getElementById('clock');
+  function tickClock() {
+    const d = new Date();
+    clockEl.textContent =
+      `${pad(d.getUTCHours())}:${pad(d.getUTCMinutes())}:${pad(d.getUTCSeconds())}`;
+  }
+  tickClock(); setInterval(tickClock, 1000);
+
+  // ── Signal bar fluctuation (steady, like Game) ──
+  const sigEl = document.getElementById('signal');
+  setInterval(() => {
+    const r = Math.random();
+    const n = r < 0.06 ? 2 : r < 0.70 ? 3 : r < 0.95 ? 4 : 5;
+    sigEl.textContent = '▮'.repeat(n) + '▯'.repeat(5 - n);
+  }, 1500);
+
+  // ── Stream elapsed time (since page load / scene activation) ──
+  const streamStart = Date.now();
+  function tickElapsed() {
+    const s = Math.floor((Date.now() - streamStart) / 1000);
+    const h = Math.floor(s / 3600);
+    const mm = Math.floor((s / 60) % 60);
+    const ss = s % 60;
+    document.getElementById('elapsed').textContent = `${pad(h)}:${pad(mm)}:${pad(ss)}`;
+  }
+  tickElapsed(); setInterval(tickElapsed, 1000);
+
+  // ── OBS WS: live camera frame sync ──
+  // URL params let you rename the camera source / scene without editing JS:
+  //   ?camera=Webcam&scene=Desktop
+  const params       = new URLSearchParams(location.search);
+  const CAM_SOURCE   = params.get('camera') || 'Camera';
+  const CAM_SCENE    = params.get('scene')  || 'Desktop';
+
+  const camEl   = document.getElementById('cam');
+  const rootStyle = document.documentElement.style;
+  function setCameraVisible(visible) { camEl.classList.toggle('off', !visible); }
+  // Map an OBS sceneItemTransform into the four CSS vars driving the frame.
+  // Assumes alignment 5 (top-left) — OBS's default for newly added items.
+  function setCameraTransform(t) {
+    if (!t) return;
+    const w = (t.sourceWidth  ?? 0) * (t.scaleX ?? 1);
+    const h = (t.sourceHeight ?? 0) * (t.scaleY ?? 1);
+    if (!(w > 0 && h > 0)) return;
+    rootStyle.setProperty('--cam-x', `${t.positionX}px`);
+    rootStyle.setProperty('--cam-y', `${t.positionY}px`);
+    rootStyle.setProperty('--cam-w', `${w}px`);
+    rootStyle.setProperty('--cam-h', `${h}px`);
+  }
+
+  async function syncCamera(obs) {
+    let camItemId = null;
+    try {
+      const r = await obs.call('GetSceneItemId',
+        { sceneName: CAM_SCENE, sourceName: CAM_SOURCE });
+      camItemId = r.sceneItemId;
+      const e = await obs.call('GetSceneItemEnabled',
+        { sceneName: CAM_SCENE, sceneItemId: camItemId });
+      setCameraVisible(e.sceneItemEnabled);
+      const t = await obs.call('GetSceneItemTransform',
+        { sceneName: CAM_SCENE, sceneItemId: camItemId });
+      setCameraTransform(t.sceneItemTransform);
+    } catch (err) {
+      console.warn(`[desktop] camera sync init failed (${CAM_SCENE}/${CAM_SOURCE}):`, err.message);
+      return;
+    }
+    obs.addEventListener('event', (ev) => {
+      const d = ev.detail || {};
+      if (d.eventData?.sceneName !== CAM_SCENE
+          || d.eventData?.sceneItemId !== camItemId) return;
+      if (d.eventType === 'SceneItemEnableStateChanged') {
+        setCameraVisible(d.eventData.sceneItemEnabled);
+      } else if (d.eventType === 'SceneItemTransformChanged') {
+        setCameraTransform(d.eventData.sceneItemTransform);
+      }
+    });
+  }
+
+  async function connectOBS() {
+    if (!window.__OBSWS || !window.OBSWSMini) return;
+    try {
+      const obs = new OBSWSMini(window.__OBSWS.url, window.__OBSWS.password);
+      await obs.connect();
+      obs.addEventListener('close', () => {
+        setTimeout(connectOBS, 2500);
+      });
+      await syncCamera(obs);
+    } catch (e) {
+      // OBS WS optional — silently retry; defaults stand meanwhile.
+      setTimeout(connectOBS, 2500);
+    }
+  }
+  connectOBS();
+</script>
+</body>
+</html>
diff --git a/music-box/index.html b/music-box/index.html
new file mode 100644
index 0000000..aeefaa0
--- /dev/null
+++ b/music-box/index.html
@@ -0,0 +1,538 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>OPHI-118 / MUSIC BOX</title>
+<style>
+:root {
+  --bg:               #07080d;
+  --ink:              #e8e8e0;
+  --hud:              #4fd2ff;
+  --hud-dim:          #2a7fa6;
+  --accent:           #e63a2e;
+  --warn:             #ffd000;
+  --onair:            #5fdc62;
+
+  --term-bg:          #04120a;
+  --term-fg:          #5fdc62;
+  --term-fg-bright:   #97f99a;
+  --term-fg-dim:      #2c8d2f;
+  --term-glow:        rgba(80, 220, 100, 0.55);
+  --term-edge:        rgba(80, 220, 100, 0.45);
+
+  --mono:             'DejaVu Sans Mono', 'Liberation Mono', 'Consolas', monospace;
+  --display:          'DejaVu Sans', 'Liberation Sans', 'Helvetica', 'Arial', sans-serif;
+}
+
+* { margin: 0; padding: 0; box-sizing: border-box; }
+
+html, body {
+  width: 100%; height: 100%;
+  background: var(--bg);
+  color: var(--ink);
+  font-family: var(--display);
+  overflow: hidden;
+  user-select: none;
+}
+
+body {
+  position: relative;
+  display: grid;
+  /* HUD | terminal | status-strip | banner | footer */
+  grid-template-rows: auto 1fr auto auto auto;
+  padding: 40px 72px;
+  gap: 22px;
+}
+
+/* ───────── HUD top strip ───────── */
+.hud {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  align-items: center;
+  font-family: var(--mono);
+  font-size: 22px;
+  font-weight: 700;
+  color: var(--hud);
+  letter-spacing: 0.08em;
+}
+.hud .group { display: flex; gap: 28px; align-items: center; }
+.hud > .group:nth-child(1) { justify-self: start;  }
+.hud > .group:nth-child(2) { justify-self: center; }
+.hud > .group:nth-child(3) { justify-self: end;    }
+.hud .dim { color: var(--hud-dim); }
+.hud .group > span { display: inline-flex; align-items: center; gap: 12px; }
+.hud .led {
+  display: inline-block;
+  width: 11px; height: 11px;
+  border-radius: 50%;
+  background: var(--onair);
+  box-shadow: 0 0 10px var(--onair);
+  margin-top: -0.08em;
+  animation: rec-blink 1.6s ease-in-out infinite;
+}
+#signal { display: inline-block; transform: translateY(-0.10em); }
+@keyframes rec-blink {
+  0%, 55% { opacity: 1; }
+  65%, 100% { opacity: 0.20; }
+}
+
+/* ───────── Terminal stage ───────── */
+.stage {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.terminal {
+  width: 64vw;
+  max-width: 1480px;
+  height: 60vh;
+  max-height: 760px;
+  min-height: 420px;
+  position: relative;
+  overflow: hidden;
+  background: var(--term-bg);
+  border: 2px solid var(--term-edge);
+  border-radius: 6px;
+  padding: 28px 36px;
+  font-family: var(--mono);
+  font-size: 24px;
+  line-height: 1.55;
+  color: var(--term-fg);
+  text-shadow: 0 0 6px var(--term-glow);
+  box-shadow:
+    0 0 60px rgba(80, 220, 100, 0.10),
+    inset 0 0 90px rgba(0, 30, 0, 0.65);
+  display: flex;
+  flex-direction: column;
+}
+#termOutput {
+  flex: 1 1 auto;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  overflow: hidden;
+}
+.terminal::after {
+  content: '';
+  position: absolute; inset: 0;
+  pointer-events: none;
+  background: repeating-linear-gradient(
+    to bottom,
+    rgba(0,0,0,0)    0px,
+    rgba(0,0,0,0)    2px,
+    rgba(0,0,0,0.28) 3px,
+    rgba(0,0,0,0.28) 4px
+  );
+  opacity: 0.55;
+  mix-blend-mode: multiply;
+}
+.term-line { word-break: break-word; }
+.term-prompt { color: var(--term-fg-bright); }
+.term-out    { color: var(--term-fg); }
+.term-dim    { color: var(--term-fg-dim); }
+.term-warn   { color: var(--warn); }
+
+.pin-spacer { height: 14px; }
+
+.np-line .np-arrow {
+  color: var(--term-fg-bright);
+  margin-right: 12px;
+  display: inline-block;
+  animation: np-pulse 1.05s ease-in-out infinite alternate;
+}
+.np-line .np-title { color: var(--term-fg-bright); }
+.np-line .np-time  { color: var(--term-fg-dim); margin-left: 14px; }
+@keyframes np-pulse {
+  0%   { opacity: 0.45; }
+  100% { opacity: 1.00; }
+}
+.next-line .next-arrow { color: var(--term-fg-dim); margin-right: 10px; }
+.next-line .next-label { color: var(--term-fg-dim); margin-right: 6px; }
+.next-line .next-title { color: var(--term-fg); }
+.next-line .next-title.empty { color: var(--term-fg-dim); }
+
+/* ───────── Status strip (chat commands — always visible, not in scroll) ─────────
+   Sits between the terminal and the banner. Mirrors the "always-visible
+   bottom bar" pattern from terminal apps: scrolling history above, fixed
+   row of available commands here. */
+.status-strip {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 28px;
+  font-family: var(--mono);
+  font-size: 18px;
+  letter-spacing: 0.18em;
+  color: var(--hud-dim);
+  padding: 10px 24px;
+  border-top: 1px solid rgba(79, 210, 255, 0.22);
+  border-bottom: 1px solid rgba(79, 210, 255, 0.22);
+  background: rgba(7, 8, 13, 0.55);
+}
+.status-strip .label { color: var(--hud); letter-spacing: 0.32em; }
+.status-strip .cmd-group { display: inline-flex; gap: 18px; }
+.status-strip .cmd {
+  color: var(--term-fg-bright);
+  text-shadow: 0 0 6px var(--term-glow);
+}
+.status-strip .desc { color: var(--hud-dim); margin-left: 6px; font-size: 16px; letter-spacing: 0.10em; }
+
+/* ───────── Big MUSIC BOX banner ───────── */
+.banner { text-align: center; }
+.banner .label {
+  font-family: var(--mono);
+  font-size: 22px;
+  letter-spacing: 0.45em;
+  text-indent: 0.45em;
+  color: var(--hud-dim);
+  margin-bottom: 12px;
+}
+.banner .title {
+  font-family: var(--mono);
+  font-size: 88px;
+  font-weight: 900;
+  letter-spacing: 0.18em;
+  text-indent: 0.18em;
+  line-height: 1;
+  color: var(--ink);
+  text-shadow:
+    0 0 22px rgba(95, 220, 98, 0.18),
+    0 0 48px rgba(80, 200, 100, 0.10);
+  animation: sign-pulse 3.6s ease-in-out infinite;
+}
+.banner .sub {
+  margin-top: 14px;
+  font-family: var(--mono);
+  font-size: 22px;
+  letter-spacing: 0.45em;
+  text-indent: 0.45em;
+  color: var(--hud-dim);
+}
+@keyframes sign-pulse {
+  0%, 100% { opacity: 0.88; }
+  50%      { opacity: 1.00; }
+}
+
+/* ───────── Footer ───────── */
+.foot {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  align-items: center;
+  font-family: var(--mono);
+  font-size: 19px;
+  color: var(--hud-dim);
+  letter-spacing: 0.12em;
+}
+.foot > *:nth-child(1) { justify-self: start;  }
+.foot > *:nth-child(2) { justify-self: center; }
+.foot > *:nth-child(3) { justify-self: end;    }
+.foot .onair { color: var(--onair); }
+
+/* ───────── Body overlays ───────── */
+#static {
+  position: absolute; inset: 0;
+  width: 100%; height: 100%;
+  pointer-events: none;
+  opacity: 0.045;
+  mix-blend-mode: screen;
+  image-rendering: pixelated;
+}
+.scanlines {
+  position: absolute; inset: 0;
+  pointer-events: none;
+  background: repeating-linear-gradient(
+    to bottom,
+    rgba(0,0,0,0)    0px,
+    rgba(0,0,0,0)    2px,
+    rgba(0,0,0,0.20) 3px,
+    rgba(0,0,0,0.20) 4px
+  );
+  opacity: 0.5;
+  mix-blend-mode: multiply;
+}
+.vignette {
+  position: absolute; inset: 0;
+  pointer-events: none;
+  background: radial-gradient(
+    ellipse at center,
+    rgba(0,0,0,0)    45%,
+    rgba(0,0,0,0.60) 100%
+  );
+}
+.flicker {
+  position: absolute; inset: 0;
+  pointer-events: none;
+  background: rgba(0,0,0,0);
+  animation: flicker 11s ease-in-out infinite;
+}
+@keyframes flicker {
+  0%,   100%  { background: rgba(0,0,0,0); }
+  18%         { background: rgba(0,0,0,0); }
+  18.3%       { background: rgba(0,0,0,0.06); }
+  18.5%       { background: rgba(0,0,0,0); }
+  47%         { background: rgba(0,0,0,0); }
+  47.3%       { background: rgba(0,0,0,0.08); }
+  47.5%       { background: rgba(0,0,0,0); }
+  78%         { background: rgba(0,0,0,0); }
+  78.4%       { background: rgba(0,0,0,0.05); }
+  78.7%       { background: rgba(0,0,0,0); }
+}
+</style>
+</head>
+<body>
+
+  <header class="hud">
+    <div class="group">
+      <span><span class="led"></span>ON AIR</span>
+      <span>OPHI-118 // MUSIC</span>
+    </div>
+    <div class="group">
+      <span class="dim">SIGNAL</span>
+      <span id="signal">▮▮▮▮▯</span>
+    </div>
+    <div class="group">
+      <span class="dim">UTC</span>
+      <span id="clock">--:--:--</span>
+    </div>
+  </header>
+
+  <main class="stage">
+    <div class="terminal">
+      <!-- Pinned block is static HTML — JS only updates text content.
+           If JS errors, the structure is still visible. New log lines
+           are inserted before #pinnedBlock by the JS. -->
+      <div id="termOutput">
+        <div id="pinnedBlock">
+          <div class="pin-spacer"></div>
+          <div class="term-line next-line">
+            <span class="next-arrow">↳</span><span class="next-label">next:</span><span class="next-title empty" data-slot="0">— end of queue —</span>
+          </div>
+          <div class="term-line next-line">
+            <span class="next-arrow">↳</span><span class="next-label">then:</span><span class="next-title empty" data-slot="1">—</span>
+          </div>
+          <div class="term-line next-line">
+            <span class="next-arrow">↳</span><span class="next-label">then:</span><span class="next-title empty" data-slot="2">—</span>
+          </div>
+          <div class="pin-spacer"></div>
+          <div class="term-line np-line">
+            <span class="np-arrow">▶</span><span class="np-title">connecting to daemon…</span><span class="np-time">[--:-- / --:--]</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </main>
+
+  <section class="status-strip">
+    <span class="label">CHAT</span>
+    <span class="cmd-group">
+      <span><span class="cmd">!skip</span><span class="desc">next track</span></span>
+      <span><span class="cmd">!queue</span><span class="desc">peek next 3</span></span>
+      <span><span class="cmd">!info</span><span class="desc">full metadata</span></span>
+    </span>
+  </section>
+
+  <section class="banner">
+    <div class="label">— TRANSMISSION OPEN —</div>
+    <div class="title">MUSIC&nbsp;BOX</div>
+    <div class="sub">— STAY TUNED —</div>
+  </section>
+
+  <footer class="foot">
+    <span>CH 118.0 MHz</span>
+    <span id="rig">— LOADING PLAYLIST —</span>
+    <span class="onair">■ ON AIR</span>
+  </footer>
+
+  <canvas id="static"></canvas>
+  <div class="scanlines"></div>
+  <div class="vignette"></div>
+  <div class="flicker"></div>
+
+<script src="../loading/playlist.js"></script>
+<script src="../vendor/obs-config.js"></script>
+<script src="../vendor/obs-ws-mini.js"></script>
+
+<script>
+  'use strict';
+  const pad   = n => String(n).padStart(2, '0');
+  const sleep = ms => new Promise(r => setTimeout(r, ms));
+
+  // ── UTC clock ──
+  const clockEl = document.getElementById('clock');
+  const tickClock = () => {
+    const d = new Date();
+    clockEl.textContent =
+      `${pad(d.getUTCHours())}:${pad(d.getUTCMinutes())}:${pad(d.getUTCSeconds())}`;
+  };
+  tickClock(); setInterval(tickClock, 1000);
+
+  // ── Signal ──
+  const sigEl = document.getElementById('signal');
+  setInterval(() => {
+    const r = Math.random();
+    const n = r < 0.15 ? 3 : r < 0.65 ? 4 : 5;
+    sigEl.textContent = '▮'.repeat(n) + '▯'.repeat(5 - n);
+  }, 1500);
+
+  // ── Static (CRT noise) ──
+  const cv = document.getElementById('static'), ctx = cv.getContext('2d');
+  const W = 320, H = 180;
+  cv.width = W; cv.height = H;
+  const img = ctx.createImageData(W, H);
+  const drawNoise = () => {
+    const d = img.data;
+    for (let i = 0; i < d.length; i += 4) {
+      const v = (Math.random() * 255) | 0;
+      d[i] = d[i+1] = d[i+2] = v;
+      d[i+3] = 255;
+    }
+    ctx.putImageData(img, 0, 0);
+  };
+  drawNoise();
+  setInterval(drawNoise, 1000 / 8);
+
+  // ── Footer track count from playlist manifest ──
+  const playlistData = window.__PLAYLIST || { tracks: [] };
+  const trackCount = (playlistData.tracks || []).length;
+  document.getElementById('rig').textContent =
+    trackCount > 0 ? `LIBRARY :: ${trackCount} TRACKS` : '— EMPTY LIBRARY —';
+
+  // ── Terminal ──
+  const term         = document.getElementById('termOutput');
+  const pinnedBlock  = document.getElementById('pinnedBlock');
+  const npTitle      = pinnedBlock.querySelector('.np-title');
+  const npTime       = pinnedBlock.querySelector('.np-time');
+  const nextSlots    = [0, 1, 2].map(i => pinnedBlock.querySelector(`[data-slot="${i}"]`));
+  const PROMPT       = 'OPHI-118://> ';
+  const MAX_TERM_LINES = 200;
+
+  function pruneTerminal() {
+    while (term.children.length > MAX_TERM_LINES) {
+      const first = term.firstElementChild;
+      if (!first || first === pinnedBlock) break;
+      term.removeChild(first);
+    }
+    while (term.children.length > 1) {
+      let total = 0;
+      for (const c of term.children) total += c.getBoundingClientRect().height;
+      if (total <= term.clientHeight) break;
+      const first = term.firstElementChild;
+      if (!first || first === pinnedBlock) break;
+      term.removeChild(first);
+    }
+  }
+
+  function logBeforePins(text, cls = 'term-out', prompt = '> ') {
+    const div = document.createElement('div');
+    div.className = 'term-line';
+    if (prompt) {
+      const p = document.createElement('span');
+      p.className = 'term-prompt';
+      p.textContent = prompt;
+      div.appendChild(p);
+    }
+    const t = document.createElement('span');
+    if (cls) t.className = cls;
+    t.textContent = text;
+    div.appendChild(t);
+    term.insertBefore(div, pinnedBlock);
+    pruneTerminal();
+  }
+
+  async function typeCommand(text) {
+    const div = document.createElement('div');
+    div.className = 'term-line';
+    const p = document.createElement('span');
+    p.className = 'term-prompt';
+    p.textContent = PROMPT;
+    div.appendChild(p);
+    const body = document.createElement('span');
+    body.className = 'term-out';
+    div.appendChild(body);
+    term.insertBefore(div, pinnedBlock);
+    for (const c of text) {
+      body.textContent += c;
+      await sleep(38);
+    }
+    await sleep(280);
+  }
+
+  function fmtClock(s) {
+    if (!isFinite(s) || s < 0) return '--:--';
+    return `${pad(Math.floor(s / 60))}:${pad(Math.floor(s % 60))}`;
+  }
+
+  // ── State application ──
+  let lastTrackIndex = null;
+  function applyState(s) {
+    if (lastTrackIndex !== null && s.index !== lastTrackIndex && s.title) {
+      logBeforePins(`[audio] now: ${s.title}`);
+    }
+    lastTrackIndex = s.index;
+
+    npTitle.textContent = s.title || '—';
+    npTime.textContent  = `[${fmtClock(s.currentTime)} / ${fmtClock(s.duration)}]`;
+
+    const titles = Array.isArray(s.nextTitles) ? s.nextTitles : [];
+    nextSlots.forEach((slot, i) => {
+      const v = titles[i];
+      if (v) {
+        slot.textContent = v;
+        slot.classList.remove('empty');
+      } else {
+        slot.textContent = i === 0 ? '— end of queue —' : '—';
+        slot.classList.add('empty');
+      }
+    });
+    pruneTerminal();
+  }
+
+  function setOffline(msg) {
+    npTitle.textContent = msg;
+    npTime.textContent  = '[--:-- / --:--]';
+  }
+
+  let obs = null;
+  async function connectMusic() {
+    if (!window.__OBSWS) {
+      logBeforePins('[audio] vendor/obs-config.js missing — run scripts/setup.sh', 'term-dim');
+      return;
+    }
+    try {
+      obs = new OBSWSMini(window.__OBSWS.url, window.__OBSWS.password);
+      await obs.connect();
+      obs.addEventListener('close', () => {
+        logBeforePins('[audio] daemon connection lost — retrying', 'term-dim');
+        setOffline('daemon disconnected');
+        setTimeout(connectMusic, 2000);
+      });
+      obs.onCustom('mpd:state', applyState);
+    } catch (e) {
+      logBeforePins(`[audio] daemon unreachable (${e.message}) — retrying`, 'term-dim');
+      setTimeout(connectMusic, 2500);
+    }
+  }
+
+  // Boot sequence
+  (async () => {
+    await sleep(450);
+    await typeCommand('music --boot --shuffle');
+    logBeforePins('[audio] subscribing to mpd:state events', 'term-out');
+    await sleep(220);
+    if (trackCount > 0) {
+      logBeforePins(`[audio] library: ${trackCount} tracks`, 'term-out');
+    } else {
+      logBeforePins('[audio] library manifest empty', 'term-dim');
+    }
+    await sleep(180);
+    logBeforePins('[audio] queue: shuffle on', 'term-out');
+    await sleep(180);
+    logBeforePins('[audio] standby for transmission ✓', 'term-out');
+    await sleep(280);
+    connectMusic();
+  })();
+</script>
+</body>
+</html>
diff --git a/music-box/widget.html b/music-box/widget.html
new file mode 100644
index 0000000..d56805f
--- /dev/null
+++ b/music-box/widget.html
@@ -0,0 +1,314 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>Music Box widget</title>
+<style>
+:root {
+  --bg:               #04120a;
+  --hud:              #4fd2ff;
+  --hud-dim:          #2a7fa6;
+  --term-fg:          #5fdc62;
+  --term-fg-bright:   #97f99a;
+  --term-fg-dim:      #2c8d2f;
+  --term-glow:        rgba(80, 220, 100, 0.45);
+  --frame:            rgba(79, 210, 255, 0.85);
+  --frame-glow:       rgba(79, 210, 255, 0.30);
+  --mono:             'DejaVu Sans Mono', 'Liberation Mono', 'Consolas', monospace;
+}
+
+* { margin: 0; padding: 0; box-sizing: border-box; }
+
+html, body {
+  width: 100%; height: 100%;
+  background: var(--bg);
+  color: var(--term-fg);
+  font-family: var(--mono);
+  overflow: hidden;
+  user-select: none;
+}
+
+/* Body == widget panel == terminal. Authored at native 549×880; the OBS
+   browser_source must match (bounds_type 0, no stretch). */
+body {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  border: 1.5px solid var(--frame);
+  box-shadow:
+    0 0 18px var(--frame-glow),
+    inset 0 0 50px rgba(0, 30, 0, 0.55);
+  text-shadow: 0 0 4px var(--term-glow);
+}
+
+.corner {
+  position: absolute;
+  width: 14px; height: 14px;
+  border-color: var(--frame);
+  border-style: solid;
+  border-width: 0;
+}
+.corner.tl { top: 4px;    left: 4px;   border-top-width: 2px;    border-left-width: 2px;  }
+.corner.tr { top: 4px;    right: 4px;  border-top-width: 2px;    border-right-width: 2px; }
+.corner.bl { bottom: 4px; left: 4px;   border-bottom-width: 2px; border-left-width: 2px;  }
+.corner.br { bottom: 4px; right: 4px;  border-bottom-width: 2px; border-right-width: 2px; }
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 14px 22px 10px;
+  font-size: 13px;
+  letter-spacing: 0.22em;
+  color: var(--hud);
+  border-bottom: 1px solid rgba(79, 210, 255, 0.22);
+  flex: 0 0 auto;
+}
+.header .left { display: inline-flex; gap: 10px; align-items: center; }
+.header .right { color: var(--hud-dim); font-size: 13px; letter-spacing: 0.12em; }
+
+.terminal {
+  flex: 1 1 auto;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  padding: 12px 22px 16px;
+  font-size: 16px;
+  line-height: 1.5;
+  color: var(--term-fg);
+}
+#termOutput {
+  flex: 1 1 auto;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  overflow: hidden;
+}
+.term-line { word-break: break-word; }
+.term-prompt { color: var(--term-fg-bright); }
+.term-out    { color: var(--term-fg); }
+.term-dim    { color: var(--term-fg-dim); }
+
+.scanlines {
+  position: absolute; inset: 0;
+  pointer-events: none;
+  background: repeating-linear-gradient(
+    to bottom,
+    rgba(0,0,0,0)    0px,
+    rgba(0,0,0,0)    2px,
+    rgba(0,0,0,0.18) 3px,
+    rgba(0,0,0,0.18) 4px
+  );
+  opacity: 0.45;
+  mix-blend-mode: multiply;
+}
+
+/* ───────── pinned bottom block ───────── */
+.pin-spacer { height: 10px; }
+.np-line {
+  display: flex;
+  gap: 10px;
+  align-items: baseline;
+}
+.np-line .np-arrow {
+  color: var(--term-fg-bright);
+  flex: 0 0 auto;
+  animation: np-pulse 1.05s ease-in-out infinite alternate;
+}
+.np-line .np-title {
+  color: var(--term-fg-bright);
+  flex: 1 1 auto;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: 0;
+}
+.np-line .np-time {
+  color: var(--term-fg-dim);
+  flex: 0 0 auto;
+  font-size: 14px;
+}
+@keyframes np-pulse {
+  0%   { opacity: 0.45; }
+  100% { opacity: 1.00; }
+}
+.next-line {
+  display: flex;
+  gap: 8px;
+  align-items: baseline;
+  font-size: 14px;
+}
+.next-line .next-arrow { color: var(--term-fg-dim); flex: 0 0 auto; }
+.next-line .next-label { color: var(--term-fg-dim); flex: 0 0 auto; }
+.next-line .next-title {
+  color: var(--term-fg);
+  flex: 1 1 auto;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: 0;
+}
+.next-line .next-title.empty { color: var(--term-fg-dim); }
+.chat-line {
+  font-size: 13px;
+  color: var(--term-fg-dim);
+  letter-spacing: 0.06em;
+  border-top: 1px solid rgba(95, 220, 98, 0.18);
+  padding-top: 8px;
+  margin-top: 6px;
+}
+.chat-line .cmd { color: var(--term-fg-bright); }
+</style>
+</head>
+<body>
+  <span class="corner tl"></span>
+  <span class="corner tr"></span>
+  <span class="corner bl"></span>
+  <span class="corner br"></span>
+
+  <div class="header">
+    <span class="left">NOW PLAYING</span>
+    <span class="right">CH 118.0 // MUSIC</span>
+  </div>
+
+  <div class="terminal">
+    <!-- Static pinned block — JS only updates text content. If JS fails,
+         the structure is still visible (better than an empty panel). -->
+    <div id="termOutput">
+      <div id="pinnedBlock">
+        <div class="pin-spacer"></div>
+        <div class="term-line next-line">
+          <span class="next-arrow">↳</span><span class="next-label">next:</span><span class="next-title empty" data-slot="0">— end of queue —</span>
+        </div>
+        <div class="term-line next-line">
+          <span class="next-arrow">↳</span><span class="next-label">then:</span><span class="next-title empty" data-slot="1">—</span>
+        </div>
+        <div class="term-line next-line">
+          <span class="next-arrow">↳</span><span class="next-label">then:</span><span class="next-title empty" data-slot="2">—</span>
+        </div>
+        <div class="pin-spacer"></div>
+        <div class="term-line np-line">
+          <span class="np-arrow">▶</span><span class="np-title">connecting…</span><span class="np-time">[--:-- / --:--]</span>
+        </div>
+        <div class="term-line chat-line">
+          chat: <span class="cmd">!skip</span> · <span class="cmd">!queue</span> · <span class="cmd">!info</span>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="scanlines"></div>
+
+<script src="../vendor/obs-config.js"></script>
+<script src="../vendor/obs-ws-mini.js"></script>
+<script>
+  'use strict';
+  const pad = n => String(n).padStart(2, '0');
+  const sleep = ms => new Promise(r => setTimeout(r, ms));
+  const fmtClock = s => (!isFinite(s) || s < 0)
+    ? '--:--' : `${pad(Math.floor(s / 60))}:${pad(Math.floor(s % 60))}`;
+
+  const term         = document.getElementById('termOutput');
+  const pinnedBlock  = document.getElementById('pinnedBlock');
+  const npTitle      = pinnedBlock.querySelector('.np-title');
+  const npTime       = pinnedBlock.querySelector('.np-time');
+  const nextSlots    = [0, 1, 2].map(i => pinnedBlock.querySelector(`[data-slot="${i}"]`));
+
+  const MAX_TERM_LINES = 60;
+  function pruneTerminal() {
+    while (term.children.length > MAX_TERM_LINES) {
+      const first = term.firstElementChild;
+      if (!first || first === pinnedBlock) break;
+      term.removeChild(first);
+    }
+    while (term.children.length > 1) {
+      let total = 0;
+      for (const c of term.children) total += c.getBoundingClientRect().height;
+      if (total <= term.clientHeight) break;
+      const first = term.firstElementChild;
+      if (!first || first === pinnedBlock) break;
+      term.removeChild(first);
+    }
+  }
+
+  function logBeforePins(text, cls = 'term-out', prompt = '> ') {
+    const div = document.createElement('div');
+    div.className = 'term-line';
+    if (prompt) {
+      const p = document.createElement('span');
+      p.className = 'term-prompt';
+      p.textContent = prompt;
+      div.appendChild(p);
+    }
+    const t = document.createElement('span');
+    if (cls) t.className = cls;
+    t.textContent = text;
+    div.appendChild(t);
+    term.insertBefore(div, pinnedBlock);
+    pruneTerminal();
+  }
+
+  let lastTrackIndex = null;
+  function applyState(s) {
+    if (lastTrackIndex !== null && s.index !== lastTrackIndex && s.title) {
+      logBeforePins(`[audio] now: ${s.title}`);
+    }
+    lastTrackIndex = s.index;
+
+    npTitle.textContent = s.title || '—';
+    npTime.textContent  = `[${fmtClock(s.currentTime)} / ${fmtClock(s.duration)}]`;
+
+    const titles = Array.isArray(s.nextTitles) ? s.nextTitles : [];
+    nextSlots.forEach((slot, i) => {
+      const v = titles[i];
+      if (v) {
+        slot.textContent = v;
+        slot.classList.remove('empty');
+      } else {
+        slot.textContent = i === 0 ? '— end of queue —' : '—';
+        slot.classList.add('empty');
+      }
+    });
+    pruneTerminal();
+  }
+
+  function setOffline(msg) {
+    npTitle.textContent = msg;
+    npTime.textContent  = '[--:-- / --:--]';
+  }
+
+  let obs = null;
+  async function connectMusic() {
+    if (!window.__OBSWS) {
+      logBeforePins('config missing', 'term-dim');
+      return;
+    }
+    try {
+      obs = new OBSWSMini(window.__OBSWS.url, window.__OBSWS.password);
+      await obs.connect();
+      obs.addEventListener('close', () => {
+        logBeforePins('daemon disconnected', 'term-dim');
+        setOffline('disconnected');
+        setTimeout(connectMusic, 2000);
+      });
+      obs.onCustom('mpd:state', applyState);
+    } catch (e) {
+      logBeforePins('daemon unreachable', 'term-dim');
+      setTimeout(connectMusic, 2500);
+    }
+  }
+
+  (async () => {
+    await sleep(200);
+    logBeforePins('[audio] subscribing to mpd:state', 'term-out');
+    await sleep(180);
+    logBeforePins('[audio] queue: shuffle on', 'term-out');
+    await sleep(180);
+    logBeforePins('[audio] standby ✓', 'term-out');
+    await sleep(220);
+    connectMusic();
+  })();
+</script>
+</body>
+</html>