meshbay.git/packages/meshbay-hub/src/meshbay_hub/static/music-app.js, branch 0.7

feat(hub): audio_root wiring, mutually-exclusive players, Settings rework

2026-08-24T20:44:27Z

Five related pieces of polish against the Music app and Settings, all from the same conversation: - Music app now requires audio_root, same as Videos requires video_root: an empty-state message until one is set, and grouping filtered to only what's under it (underAudioRoot, mirroring video-app.js's underVideoRoot). Wires the new audio_root/audio_root_ack pair through transport.js and group-page.js state the same way video_root already flows. - Starting one player now stops the other — opening a film closes the music queue, starting a track closes the video modal. Both used to run at once, found live. - Group Settings reworked: every section but a bare form (invite, pair-operator, approve-device) is now collapsible (CollapsibleSection); the uploads on/off button is a real toggle switch (ToggleSwitch, reused for TMDB/MusicBrainz's enabled switches too, each now with an icon + status badge in its header instead of a plain checkbox row); and shared directories, the Videos root picker, and the new Music root picker are merged into one "Directories" section (RootFolderRow) instead of three separate ones scattered down the page — the root pickers only show once their app is actually enabled.

fix(hub): give the Music flat list its own look instead of Videos' reskin

2026-08-24T19:51:18Z

Two complaints against real use: the artist -> album -> track hierarchy was invisible (every depth sat flush left, distinguishable only by which chevron happened to be open — Videos' own flat list never needed more than one level, so there was nothing to reuse for this), and a filled-in album unfolded into a wall of identical little icon-box squares, one per track, carrying no information a track row can actually use (unlike Videos' per-episode thumbnail). Track rows now reuse Mode A's own numbered tracklist style (.music-track-row: number, title, duration, no icon box) instead of Videos' boxy thumb-slot row. A folder's expanded contents get wrapped in a new .music-flat-children indent + rule line, so nesting reads as visible steps into the tree rather than same-level siblings. Folder rows (artist/album headers) still reuse Videos' flat-row style, which fits them fine — this is not a wholesale rewrite, only what didn't actually work.

feat(hub): consolidate loose tracks, "&"/"and" fold, player close/queue

2026-08-24T17:46:06Z

Album-grid readability, part two: - groupMusicEntries (music-app.js): an album bucket left with exactly one track - a real album tag, but only one song from it, not the whole release - clutters the grid the same way an untagged loose track does. Both kinds now fold into one " - Various" tile per artist, unless there is only one leftover track overall, where relabeling buys nothing and the track keeps its own name (or the generic placeholder, if it never had one). - foldKey also normalizes "&" vs "and" ("Artist & The Band" / "Artist and The Band" is one act, tagged both ways across different rips of the same catalogue) alongside the existing case/whitespace fold. - music-player.js: a close button pauses and tears the player down; an unmount cleanup effect (pause, revoke every cached blob URL) fires either way, whether that's the close button or the shell tearing the bar down on its own. A "current queue" button opens an overlay listing the whole playing queue with the current track highlighted, click any to jump to it - works identically regardless of how the queue was built (an album, the consolidated misc bucket, a single standalone track), since it only ever reads the player's own live tracks/order/pos. - group-page.js: this component is not remounted when switching to a *different* group on the same /group/:id route (only the groupId prop changes) - so without an explicit reset, music from one group would carry into the next one opened. Resets musicQueue to null on groupId change; a tab switch inside one group still leaves it alone. - Scrubbed real artist/band names that had leaked into code comments and test fixtures (enrich_audio.py's docstrings, several test_enrich_audio.py assertions, a music-app.js comment) - replaced with generic placeholders, no behavioural change. - i18n: music.various, music.player_close, music.player_queue, music.queue_title added across all ten locales. Client-side only except none of this touches the node at all. npm run sync-ui re-run. Full suite: 1129 passed, no regressions. Co-Authored-By: Claude Sonnet 5 Claude-Session: https://claude.ai/code/session_01KBi7ALLGfwcjBXt57yNMcy

feat(hub): draw an actual CD for covers with no art, not a flat icon

2026-08-24T17:11:43Z

The monochrome disc icon from the previous commit read as placeholder UI chrome, not as artwork - too plain for something that is, for most tiles in a real library, the default look of the grid. - DiscPlaceholder (music-app.js): a small inline SVG illustration - dark disc base, an iridescent radial-gradient sheen mimicking the rainbow reflection a real CD's data side has, two faint groove rings, a light label ring, a dark spindle hole. Each instance gets its own gradient id (a module-level counter) rather than one literal id repeated - a grid renders many of these at once, and a shared id would leave every disc after the first pointing at whichever the browser happened to resolve. - AlbumCard and MusicDetailModal now branch on coverHash directly: MediaThumb (the real chunk-path image) when there is one, DiscPlaceholder when there isn't - rather than routing "no cover" through MediaThumb's own generic small-icon fallback, which is still right for its other callers (list rows, Videos). - icon.js: the flat monochrome "disc" icon this replaces is removed - nothing else used it. - style.css: .music-disc-empty/.music-disc-svg replace the old .video-thumb-empty overrides; still sized relative to the tile (82%) so it scales with .music-grid's auto-fill columns. Client-side only. npm run sync-ui re-run. Full suite: 1129 passed, no regressions. Co-Authored-By: Claude Sonnet 5 Claude-Session: https://claude.ai/code/session_01KBi7ALLGfwcjBXt57yNMcy

feat(hub): big monochrome disc placeholder for covers with no art

2026-08-24T17:04:41Z

Album tiles/detail covers with no embedded art, no sibling image file, and no MusicBrainz match (or MusicBrainz off) used the same small music-note icon list rows use elsewhere - fine as a rare fallback, but most tiles in a real library land here, so it read as broken rather than as the default look of the grid. - icon.js: a "disc" icon (two concentric circles, same stroked style as the rest of the set) - a plain CD/vinyl glyph. - music-app.js: AlbumCard and MusicDetailModal's cover now pass emptyIcon="disc" instead of "music". - style.css: sized at 55% of the tile via CSS rather than a fixed px value, so it scales with .music-grid's auto-fill columns; color stays var(--text-dim), the same neutral tone every other empty state already uses - monochrome, not a new accent. Client-side only. npm run sync-ui re-run. Full suite: 1129 passed, no regressions. Co-Authored-By: Claude Sonnet 5 Claude-Session: https://claude.ai/code/session_01KBi7ALLGfwcjBXt57yNMcy

fix(hub): repair NUL-byte corruption in music-app.js, simplify grouping

2026-08-24T16:55:33Z

Two spots in music-app.js held a literal NUL byte where a plain space was intended - present since the file's very first commit (the LazyTile key's template literal joining artist and album) and reintroduced by the previous commit's sentinel key for the untagged bucket. Root cause looks like a tool/transport artifact rather than anything in the logic itself: git rendering the file as binary ("0 insertions/0 deletions" on a real content change) was the tell, caught before it reached anyone actually running this code. Fixed by rewriting the file clean and, while at it, removing the sentinel-key approach that produced the second NUL entirely: the untagged-tracks bucket is now a plain array on each artist entry, appended as a synthetic album only at the end, rather than a Map key that had to be guaranteed to never collide with a real folded album name. No behavioural change from the previous commit's intent - same grouping, same flat-mode rendering - just without the fragile mechanism that broke. Verified: zero NUL bytes anywhere in the file (checked the whole repo for the same class of corruption - only genuine binaries, PNG/WASM, have any), valid UTF-8, node --check passes, git diff renders as text again. npm run sync-ui re-run. test_hook_ordering.py, test_transport_contracts.py, test_locales.py: 31 passed. Co-Authored-By: Claude Sonnet 5 Claude-Session: https://claude.ai/code/session_01KBi7ALLGfwcjBXt57yNMcy

fix(hub): fold case/whitespace in album grouping, flatten loose tracks

2026-08-24T16:49:34Z

- groupMusicEntries: artist/album grouping keys are now case- and whitespace-folded ("Racing With The Sun" vs "Racing with the sun" — a single mistagged track split a real album into two cards, reported live). The first spelling seen stays the display string; nothing is rewritten. Validated against a real ~5700-file library: 22 distinct (artist, album) pairs had more than one raw spelling before this, including the reported Chinese Man case. - The untagged-tracks bucket per artist gets a dedicated, non-foldable key rather than folding the translated placeholder text, so it stays one bucket regardless of UI language, and sorts after every real album rather than wherever the placeholder's spelling lands alphabetically. - Flat mode: an artist folder whose only "album" is that untagged bucket — a real, common shape here, a pile of loose singles with no album layer at all — no longer nests them behind an always-empty "Unknown album" row to expand first. They render directly under the artist. onPlayQueue already builds its queue from the whole bucket regardless of nesting, so previous/next already spanned the full pile; this only removes the pointless extra click to reach it. Client-side only, no protocol/index change — a page reload picks it up, no node restart needed. `npm run sync-ui` re-run. Full suite: 1129 passed, no regressions (JS structural checks — test_hook_ordering.py, test_transport_contracts.py — included). Co-Authored-By: Claude Sonnet 5 Claude-Session: https://claude.ai/code/session_01KBi7ALLGfwcjBXt57yNMcy

feat(hub): Music app client — album grid, flat list, persistent player

2026-08-24T15:39:41Z

Implements the client half of docs/musicbay.md against MNP 0.8: - music-app.js: album grid (grouped by artist -> album, from index-time artist/album fields) or flat folder view, per-group localStorage toggle like Videos. MusicBrainz (music_meta_req) is only looked up when a track has no embedded cover at all — well-tagged files never trigger a network call, unlike Videos where TMDB is unconditional. Reuses video-app.js's MediaThumb/LazyTile (now exported) rather than duplicating the chunk-path thumbnail decode + virtualization. - music-player.js: the persistent player bar — queue, shuffle (Fisher- Yates, keeps the current track in place when toggled), repeat (off/ all/one), volume (localStorage), prev/next, a one-track prefetch cache. No MSE, no node-side streaming: a track is downloaded and decrypted once via file-utils.js's pipelinedDownload, same chunk pipeline Files already uses, then played from a blob URL. - group-page.js: owns musicQueue/musicbrainzConfig state and renders MusicPlayerBar outside the tab-switched area — deliberately, so playback survives navigating to Chat/Files, the same reasoning the video/preview modals are shell-owned rather than app-owned. - apps.js: registers "music". transport.js: fetchMusicMeta (keyed by path, same reordering-hazard fix as fetchMediaMeta), setMusicbrainzConfig/setMusicbrainzEnabled (signed ops, mirroring TMDB's), and the three new ack handlers. group-settings.js: a MusicBrainz settings section (contact string, per-group toggle) — the existing Applications checklist already picks up "music" for free, per apps.md's own claim. - icon.js: music/pause/skip-next/skip-prev/shuffle/repeat/volume, drawn in the same stroked style as the existing set. - i18n: group.tab_music, the music.* and settings_node.musicbrainz_* keys, translated (not just copied) across all ten locales, Polish carrying full one/few/many/other plural forms for music.n_tracks. - webapp.py's _ASSETS, test_hook_ordering.py's STATIC_FILES and test_transport_contracts.py's SPLIT_FILES gain the two new files. Full suite (common + hub + node): 1116 passed, no regressions. `npm run sync-ui` in meshbay-client confirmed both files copied. Co-Authored-By: Claude Sonnet 5 Claude-Session: https://claude.ai/code/session_01KBi7ALLGfwcjBXt57yNMcy