Skip to content

feat: Signal UX redesign#7

Merged
msitarzewski merged 2 commits intomainfrom
feat/signal-ux-redesign
Mar 14, 2026
Merged

feat: Signal UX redesign#7
msitarzewski merged 2 commits intomainfrom
feat/signal-ux-redesign

Conversation

@msitarzewski
Copy link
Owner

Summary

  • Complete visual redesign of the web client with the "Signal" design system — an atmospheric broadcast studio experience inspired by underground radio
  • New color palette (void/signal/data), typography (Space Grotesk / Inter / JetBrains Mono), and atmospheric effects (scan lines, vignette, noise texture)
  • ON AIR animations, segmented LED meters, waveform oscilloscope, speaking detection, collapsible deck panels, channel strip participant cards
  • Local mic now routed into program bus so Signal Output shows the complete broadcast mix
  • All 3 E2E tests passing (WebRTC, Recording, Return Feed)

Test plan

  • Load http://localhost:6736 and confirm Signal design renders (dark atmosphere, amber wordmark, scan lines)
  • Start Broadcast → verify ON AIR state (red signal line, red wordmark, red card accents)
  • Speak into mic → verify waveform oscilloscope responds, LED meter lights up, participant card glows amber
  • Second peer joins → verify card entrance animation (tune-in), speaking detection on both cards
  • Peer leaves → verify card exit animation (tune-out)
  • Record → verify REC blink, deck panel auto-expands, timer runs
  • End Broadcast → verify all animations reset, empty state shows "The frequency is clear."
  • Responsive: resize to 768px and 480px breakpoints
  • prefers-reduced-motion: enable in DevTools → verify no animations
  • node tests/test-webrtc.mjs && node tests/test-recording.mjs && node tests/test-return-feed.mjs

🤖 Generated with Claude Code

msitarzewski and others added 2 commits March 14, 2026 11:56
Complete visual redesign of OpenStudio web client with "Signal" design
system. Transforms generic dark-themed UI into an atmospheric broadcast
experience inspired by underground radio.

Design system:
- Void/Signal/Data color palette (amber standby, red live)
- Space Grotesk / Inter / JetBrains Mono typography
- Scan lines, vignette, noise texture atmosphere
- ON AIR animations driven by body.broadcasting CSS class

Components:
- Channel strip participant cards with speaking detection
- Segmented LED meters (amber→red, ghost segments, peak hold)
- Waveform oscilloscope for program bus signal output
- Collapsible deck panels for recording/streaming details
- Transport controls with amber-outlined broadcast button

Audio:
- Local mic now routed into program bus for complete broadcast mix
- VolumeMeter supports meter/waveform modes + speaking callback
- HiDPI canvas support with deferred setup

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Signal UX redesign changed button text to uppercase (MUTED, UNMUTED,
MUTED (HOST)) but tests were checking for mixed-case (Muted, Unmuted).
Also fix unmute test matching wrong card by requiring gain slider exists
and excluding "unmuted" when looking for muted state.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@msitarzewski msitarzewski merged commit 321a2a2 into main Mar 14, 2026
3 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant