Rewrite WebUI with Preact + Vite, add WebSocket runtime controls

- New Preact SPA in ui/ with Vite build to content/ (23KB gzipped)
- FFT/waterfall with peak hold, click-to-tune, modern dark theme
- Collapsible control panel: frequency, demod mode, filter BW, display
- WebSocket service with reconnect, audio playback, control messages
- Go: add control.go handler for runtime param changes + pipeline rebuild
- Go: add WS read loop for incoming control messages
- Dockerfile: add node build stage, CI: add setup-node + UI build step
- Updated content.go embed paths for Vite output (content/assets/)

 🤖 Generated with Mister Maluco

Co-Authored-By: MisterMal <teskeslab@lucasteske.dev>

Author: racerxdl

.github/workflows/ci.yml

@@ -16,6 +16,13 @@ jobs:
         with:
           go-version: "1.25"
 
+      - uses: actions/setup-node@v4
+        with:
+          node-version: "22"
+
+      - name: Build UI
+        run: cd ui && npm ci && npm run build
+
       - name: golangci-lint
         uses: golangci/golangci-lint-action@v7
         with:

.gitignore

@@ -23,3 +23,6 @@ bins
 qemu-*
 x86_64_*
 segdsp_worker*
+
+ui/node_modules/
+ui/dist/

AGENTS.md

@@ -5,6 +5,11 @@ Go SDR demodulator. Single-module, single-binary project.
 ## Commands
 
 ```bash
+# UI (run from ui/)
+cd ui && npm ci && npm run build    # builds to content/
+cd ui && npm run dev                 # dev server with proxy to :8080
+
+# Go
 go build -o segdsp .
 go test -v -race ./...
 golangci-lint run
@@ -23,7 +28,11 @@ No Makefile or task runner exists.
 - `demodcore/` — Demodulator interface + FM/AM implementations
 - `eventmanager/` — Channel-based pub/sub event bus
 - `recorders/` — WAV file recording
-- `content/` — Static web UI embedded via `go:embed`
+- `content/` — Built web UI (Vite output), embedded via `go:embed`
+- `ui/` — Preact + Vite source for the web UI
+- `control.go` — WebSocket control message handler (runtime param changes)
+- `helpers.go` — Message types (FFT, device, control)
+- `websocket.go` — WebSocket server with broadcast + incoming control read loop
 
 ## Gotchas
 
@@ -32,6 +41,8 @@ No Makefile or task runner exists.
 - The app **cannot start** without a running `radioserver` instance (external SDR IQ source, not in this repo)
 - Default branch is `master`; releases are tag-triggered via GitHub Actions (`release.yml`)
 - Multi-arch Docker builds (amd64, arm32v6, arm64v8) use QEMU emulation in CI — no host-side cross-compilation needed
+- `content/` is auto-generated by `npm run build` in `ui/` — do not edit directly
+- The Dockerfile has a multi-stage build: node → go → alpine runtime
 
 ## Testing
 
@@ -41,4 +52,7 @@ All tests are pure unit tests (DSP math primitives). No integration tests, no ex
 
 - HTTP routing uses stdlib `http.HandleFunc` directly, no router library
 - CLI flags parsed with stdlib `flag`, env vars set in `common.go:setEnv()`
-- WebSocket endpoint at `/ws`, static UI at `/` and `/static/*`
+- WebSocket endpoint at `/ws`, UI at `/`, assets at `/assets/*`
+- Control messages: clients send `{"MessageType":"control", ...}` JSON to `/ws` when `WebCanControl=true`
+- Runtime changes to demod mode / filter BW / squelch trigger a DSP pipeline rebuild
+- Frequency changes are applied directly to the RadioServer without rebuild

Dockerfile

@@ -1,3 +1,11 @@
+FROM node:22-alpine AS uibuild
+
+WORKDIR /ui
+COPY ui/package.json ui/package-lock.json ./
+RUN npm ci
+COPY ui/ .
+RUN npm run build
+
 FROM golang:1.25-alpine AS build
 
 WORKDIR /build
@@ -6,6 +14,7 @@ COPY go.mod go.sum ./
 RUN go mod download
 
 COPY . .
+COPY --from=uibuild /build/content/ content/
 RUN CGO_ENABLED=0 GOOS=linux go build -o segdsp_worker .
 
 FROM alpine:latest

content.go

@@ -9,17 +9,21 @@ import (
 //go:embed content/index.html
 var indexHTML []byte
 
-//go:embed content/static
-var staticFS embed.FS
+//go:embed content/assets
+var assetsFS embed.FS
 
 func content(w http.ResponseWriter, r *http.Request) {
-	w.Header().Set("Content-Type", "text/html; charset=utf-8")
-	_, _ = w.Write(indexHTML)
+	if r.URL.Path == "/" {
+		w.Header().Set("Content-Type", "text/html; charset=utf-8")
+		_, _ = w.Write(indexHTML)
+		return
+	}
+	assetsServer.ServeHTTP(w, r)
 }
 
+var assetsServer http.Handler
+
 func init() {
-	sub, _ := fs.Sub(staticFS, "content/static")
-	staticFileServer = http.FileServer(http.FS(sub))
+	sub, _ := fs.Sub(assetsFS, "content/assets")
+	assetsServer = http.StripPrefix("/assets/", http.FileServer(http.FS(sub)))
 }
-
-var staticFileServer http.Handler

content/assets/index-B0TpdYkt.js

@@ -1,75 +1,13 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <meta charset="UTF-8">
-    <title>SegDSP</title>
-    <style type="text/css">
-        body {
-            padding: 0;
-            margin: 0.5cm 0 0 0;
-            background-color: #001111;
-            color: white;
-            font-family: Arial, serif;
-            font-size: 15px;
-        }
-        .content {
-            position: relative;
-            margin: auto;
-            padding: 10px;
-        }
-        .lockedBorder {
-            -webkit-border-radius: 10px;
-            -moz-border-radius: 10px;
-            border-radius: 10px;
-            border: 2px dashed goldenrod;
-        }
-        .locked {
-            position: absolute;
-            right: -12px;
-            top: -12px;
-        }
-        .unlocked {
-            position: absolute;
-            right: -12px;
-            top: -12px;
-            display: none;
-        }
-        #headText {
-            color: darkgreen;
-        }
-        #description {
-            position: relative;
-            padding: 0;
-            line-height: 20px;
-        }
-        #avgTraffic {
-            position: absolute;
-            right: 10px;
-            bottom: 0;
-        }
-    </style>
-    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
-    <script type="text/javascript" src="/static/segdsp.js"></script>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
+  <title>SegDSP</title>
+  <script type="module" crossorigin src="/assets/index-B0TpdYkt.js"></script>
+  <link rel="stylesheet" crossorigin href="/assets/index-DIhbbABO.css">
 </head>
-<body onLoad="Init()">
-    <div id="contentDiv" class="content" style="margin: auto; max-width: 400px">
-        <div id="lockedImg" class="unlocked">
-            <img src="/static/locked.png" width="24"/>
-        </div>
-        <div id="headText">Connecting...</div>
-        <canvas id="fft" width="400" height="400"></canvas>
-        <div id="description">
-            Demodulator Mode: <span id="demodMode">FM</span><BR>
-            Demodulator Level: <span id="channelLevel">0 dB</span><BR>
-            Filter BW: <span id="filterBw">120 kHz</span><BR>
-            Channel BW: <span id="channelBw">1.5 MHz</span><BR>
-            FFT Center Frequency: <span id="fftFreq">106.3 MHz</span><BR>
-            Channel Center Frequency: <span id="channelFreq">106.3 MHz</span><BR>
-            <div id="avgTraffic">
-                Avg. Traffic: 207.38 kb/s
-            </div>
-        </div>
-    </div>
+<body>
+  <div id="app"></div>
 </body>
-</html>
+</html>