From 912ecdd9ede0f1ba616ca06d2dfa690980511bcd Mon Sep 17 00:00:00 2001
From: Martino Ferrari <martinogiordano.ferrari@iter.org>
Date: Wed, 6 May 2026 15:55:45 +0200
Subject: [PATCH] Improved UI

---
 docs/FUNCTIONAL_SPEC.md                     | 166 ++++++++-----
 docs/TECHNICAL_SPEC.md                      | 248 +++++++++++++-------
 internal/datasource/synthetic/dsp_bridge.go |  10 +
 internal/dsp/nodes.go                       |  62 +++++
 web/src/App.tsx                             |   2 +
 web/src/EditMode.tsx                        |  28 ++-
 web/src/InterfaceList.tsx                   |   5 +-
 web/src/LuaEditor.tsx                       | 137 +++++++++++
 web/src/PlotPanel.tsx                       | 224 +++++++++++++++---
 web/src/PropertiesPane.tsx                  |   5 +-
 web/src/SignalTree.tsx                      |   5 +-
 web/src/SyntheticEditor.tsx                 |  42 ++--
 web/src/SyntheticWizard.tsx                 |  36 ++-
 web/src/ViewMode.tsx                        |  33 ++-
 web/src/ZoomControl.tsx                     |  35 +++
 web/src/styles.css                          | 210 ++++++++++++++++-
 web/src/widgets/Gauge.tsx                   |  23 +-
 web/src/widgets/PlotWidget.tsx              |  64 +++--
 web/src/widgets/SetValue.tsx                |  85 +++++--
 19 files changed, 1141 insertions(+), 279 deletions(-)
 create mode 100644 web/src/LuaEditor.tsx
 create mode 100644 web/src/ZoomControl.tsx

diff --git a/docs/FUNCTIONAL_SPEC.md b/docs/FUNCTIONAL_SPEC.md
index deed87e..97e69af 100644
--- a/docs/FUNCTIONAL_SPEC.md
+++ b/docs/FUNCTIONAL_SPEC.md
@@ -24,58 +24,97 @@ In the initial version all users share the same access level. Role-based access
 
 The default mode when opening the application.
 
-**Interface list pane (left, collapsible)**
-- Displays all interfaces saved on the server, grouped into a tree by folder.
+**Interface list pane (left, collapsible, resizable)**
+- Displays all interfaces saved on the server.
 - Right-click on an interface: options to open in Edit mode or clone it.
 - "New interface" button opens Edit mode with a blank canvas.
-- "Import" option loads an interface from a local XML file.
+- The pane width can be adjusted by dragging the resize handle on its right edge.
+
+**Tabs**
+- **HMI tab**: the live widget canvas (described below).
+- **Plot tab**: a dedicated live multi-signal plot panel (see §3.3).
+- **Info tab**: signal info and metadata display for the last right-clicked signal.
 
 **HMI canvas (center)**
 - Renders the selected interface as a live, interactive panel.
 - Widgets display real-time data; controls (set-value, buttons) are active.
 - No drag, resize, or layout operations are possible in this mode.
 - Right-clicking any widget opens a context menu:
-  - **Signal info** — floating window showing DS name, type, unit, range, current value and timestamp.
+  - **Signal info** — switches to the Info tab showing DS name, type, unit, range, current value and timestamp.
   - **Copy signal name** — copies the signal identifier to the clipboard.
-  - **Export data to CSV** — downloads buffered/historical data for the signal(s) used by the widget.
+  - **Export data to CSV** — downloads buffered data for the signal(s) used by the widget.
+  - **Plot** — adds the signal(s) to the Plot tab.
 
 **Top toolbar**
 - Show/hide interface list pane.
-- Time selector: navigate to a past timestamp (enabled only when the server has archive access for all signals on the canvas).
-- "Live" button: return to real-time data after historical navigation.
+- **⏱ History** button: toggle historical time navigation bar.
+- Zoom control (A− / % / A+): adjust the UI scale (see §3.4).
+- Edit button: switch to Edit mode for the current interface.
+- Connection status indicator.
+
+**Historical time navigation bar** (shown when History is active)
+- Date/time range pickers (start and end).
+- **Load** button fetches archive data and replaces live data in all widgets.
+- **Live** button discards archive data and resumes real-time streaming.
+- Status shown on plot widgets: "Loading history…", "No archive data for this range", "Archive unavailable".
 
 ### 3.2 Edit Mode
 
-Activated via the "New interface" button or by right-clicking an existing interface.
+Activated via the "New interface" button or by clicking Edit in the toolbar.
 
 **Signal tree pane (left, resizable and collapsible)**
 - Shows all signals known to each connected data source.
 - Sources are shown as top-level nodes; signals are nested within.
 - User can add custom entries:
   - For EPICS: manually enter a PV name.
-  - For Synthetic: define a new synthetic signal (see §5.2).
-- User can load a CSV file with columns `NAME, DataSource, DS_PARAMETERS` to import a batch of signals.
+  - For Synthetic: define a new synthetic signal via the Synthetic Wizard (see §5.2).
 - Filter/search box to narrow the list.
+- Synthetic signals show an edit (✎) button to reopen the wizard.
 
 **Widget canvas (center)**
 - Free-form canvas where widgets can be placed at arbitrary pixel positions.
-- Background grid with optional snap-to-grid.
+- Background grid with snap-to-grid.
 
-**Properties pane (right, collapsible)**
+**Properties pane (right, resizable and collapsible)**
 - Appears when one or more widgets are selected.
 - Displays and edits all options for the selected widget (see §4).
+- Width is adjustable by dragging the resize handle on its left edge.
 
 **Top toolbar**
-- Show/hide signal pane.
-- Show/hide properties pane.
+- Show/hide signal pane / properties pane.
 - Undo / Redo (also Ctrl+Z / Ctrl+Shift+Z).
+- Import / Export interface to/from local XML file.
 - Save interface to server.
-- Load interface from server.
-- Export interface to local XML file.
-- Import interface from local XML file.
-- "Add text" tool — inserts a static text label.
-- "Add image" tool — inserts a static image (uploaded to server or embedded as base64).
-- "Add link" tool — inserts a button that opens another interface.
+- Close (return to View mode).
+- Zoom control (A− / % / A+).
+
+### 3.3 Plot Tab (Live Multi-Signal Plot)
+
+A dedicated panel for live time-series plotting of any signals, independent of the interface layout.
+
+**Adding signals:** right-click any widget in the HMI tab → **Plot**. The signal is added to the Plot tab immediately.
+
+**Time window selector:** 10s / 30s / 1m / 5m / 15m / 1h buttons control how much history is displayed.
+
+**Per-signal legend:**
+- Color swatch and signal name.
+- Statistics table: Last / Min / Max / Mean over the current window.
+- ✎ button opens an inline style editor:
+  - **Color**: color picker.
+  - **Width**: line width (none, 1, 1.5, 2, 3 px).
+  - **Line**: solid / dashed / dotted.
+  - **Markers**: none, S (3 px), M (5 px), L (8 px).
+- ✕ button removes the signal from the plot.
+
+**Chart area:** rendered with uPlot; auto-scaled Y axis; time axis tracks the rolling window in real time.
+
+### 3.4 UI Zoom
+
+The toolbar in both modes contains a zoom control (**A−** / **nn%** / **A+**) that adjusts the base font size of the entire UI:
+
+- 11 zoom steps from 50% to 250% (50, 60, 75, 85, 100, 115, 130, 150, 175, 200, 250%).
+- The selected zoom level is persisted in `localStorage` and restored on the next page load.
+- At 100%, the base font size adapts to viewport height via `clamp(13px, 1.5vh, 18px)`, making the UI naturally usable on 4K displays without any manual adjustment.
 
 ---
 
@@ -83,7 +122,7 @@ Activated via the "New interface" button or by right-clicking an existing interf
 
 ### 4.1 Creating Widgets
 
-Drag a signal from the signal tree and drop it onto the canvas. A picker appears showing all widget types compatible with the signal's data type (iconised). The user selects one and the widget is placed at the drop location with default size.
+Drag a signal from the signal tree and drop it onto the canvas. A picker appears showing all widget types compatible with the signal's data type. The user selects one and the widget is placed at the drop location with default size.
 
 ### 4.2 Selecting Widgets
 
@@ -104,8 +143,7 @@ When multiple widgets are selected:
 - An align/distribute toolbar appears above the canvas with:
   - Align left / center horizontal / right.
   - Align top / center vertical / bottom.
-  - Distribute evenly — by center spacing (horizontal/vertical).
-  - Distribute evenly — by gap size (horizontal/vertical).
+  - Distribute evenly (horizontal/vertical).
 
 ### 4.4 Widget Catalogue
 
@@ -115,7 +153,7 @@ When multiple widgets are selected:
 | Gauge | numeric scalar | Circular or arc gauge with configurable range |
 | Vertical bar | numeric scalar | Vertical level indicator |
 | Horizontal bar | numeric scalar | Horizontal level indicator |
-| Set value | numeric or string, writable | Shows `name: [input field] current_value unit` + Set button |
+| Set value | numeric, string, or enum; writable | Input field or enum dropdown + Set button |
 | LED | boolean / numeric | Coloured indicator with configurable condition and label |
 | Multi-LED | integer (bitset) | One LED per bit with individual labels and conditions |
 | Button | writable | Sends a fixed value or command on click |
@@ -140,45 +178,62 @@ When multiple widgets are selected:
 Common to all:
 - Label text, font size, text colour.
 - Position (X, Y) and size (W, H) — editable numerically.
-- Data source and signal name (read-only after creation; reassignable via drag).
+- Data source and signal name.
 
 Per type:
 - **Gauge / Bar**: min value, max value, alert thresholds with colours, unit label.
-- **LED / Multi-LED**: condition expression (e.g. `value > 0`), colours for true/false states.
-- **Plot**: plot sub-type selector, Y-axis range (auto or manual), time window duration, legend position, colour per signal, line style.
-- **Set value**: input type (numeric / string / enum), confirmation prompt toggle.
+- **LED / Multi-LED**: condition expression (e.g. `value > 0`), colours for true/false states, label.
+- **Plot**: plot sub-type selector, Y-axis range (auto or manual min/max), time window duration, legend position (top / bottom / none), value format string.
+- **Set value**: no special options — enum mode is detected automatically from signal metadata.
 - **Link**: target interface name.
 
+### 4.6 Set-value Widget — Enum Mode
+
+When the signal's metadata reports enum strings (e.g. EPICS mbbi/mbbo records):
+- The input field is replaced by a `<select>` dropdown showing all enum options.
+- The current live value is shown as the pre-selected option (display only).
+- The user selects a value from the dropdown, then clicks **Set** to write it.
+- The Set button is always required; changing the dropdown does not write immediately.
+
 ---
 
 ## 5. Data Sources
 
 ### 5.1 EPICS
 
-- Connects to an EPICS environment via Channel Access (CA) or PVAccess (PVA).
-- On connect, retrieves full metadata from the PV name: data type, engineering units, display range (DRVL/DRVH, LOPR/HOPR), alarm limits, enum strings (for mbbi/mbbo records), read/write mode, acquisition mode.
-- Prefers monitor/subscription over polling. Falls back to polling only when monitors are unavailable.
-- Attempts to enumerate available PV names from the IOC (e.g. via PV lists or Channel Finder). Unknown PVs can still be manually added by the user.
-- When an EPICS Archive Appliance or Channel Archiver is configured, the server can satisfy historical data requests.
+- Connects to an EPICS environment via Channel Access (CA).
+- On connect, retrieves full metadata from the PV name: data type, engineering units, display range, alarm limits, enum strings (for mbbi/mbbo records), read/write mode.
+- Uses `ca_add_event` monitors — no polling.
+- When an EPICS Archive Appliance is configured, the server can satisfy historical data requests from the toolbar time navigator.
 
-### 5.2 Synthetic
+### 5.2 Synthetic Signals
 
-A signal defined by composing one or more input signals (from any data source) through a chain of processing functions.
+A signal defined by composing one or more input signals through a chain of processing nodes.
 
-**Built-in processing functions (non-exhaustive):**
-- Arithmetic: gain, offset, add, subtract, multiply, divide.
-- Signal processing: moving average (N samples or time window), RMS, bandpass filter (IIR/FIR), lowpass / highpass filter, derivative, integral.
-- FFT, inverse FFT.
-- Peak detection, threshold crossing.
-- Custom formula: inline expression (`a * sin(b) + c`).
-- Lua script block: arbitrary Lua code with access to input values and state.
-
-**User workflow:**
+**New Synthetic Signal Wizard:**
 1. Click "New synthetic signal" in the signal tree.
-2. Name the signal and choose input signals.
-3. Build a processing pipeline by chaining function blocks (UI similar to a node graph or an ordered list).
-4. Optionally write a Lua snippet for custom logic.
-5. The synthetic signal appears in the tree and can be used like any other signal.
+2. Name the signal and optionally set a unit.
+3. Add processing nodes from the node type dropdown and connect them.
+4. Configure each node's parameters inline.
+5. Click Create — the signal appears in the tree and updates live.
+
+The wizard dialog is resizable (drag its corner) and defaults to 600 px wide to accommodate the Lua editor.
+
+**Editing an existing synthetic signal:** click the ✎ button next to the signal in the tree to reopen the wizard.
+
+**Built-in node types:**
+
+| Node | Parameters | Description |
+|------|------------|-------------|
+| Source | DS, signal name | Input from any data source |
+| Gain | factor | Multiply by constant |
+| Offset | value | Add constant |
+| Moving average | window (samples) | Rolling mean |
+| Low-pass filter | frequency (Hz), order (1–8) | IIR low-pass; correct for non-uniform sample rates |
+| Formula | expression | Inline math (variables: `a`, `b`, …) |
+| Lua script | script | Arbitrary Lua 5.1 with persistent state table |
+
+**Lua editor:** the Lua node parameter uses a code editor with syntax highlighting (keywords, strings, comments, numbers rendered in distinct colours). The editor is a full-height multi-line input that grows with the dialog.
 
 ---
 
@@ -192,11 +247,13 @@ A signal defined by composing one or more input signals (from any data source) t
 
 ## 7. Historical Data Navigation
 
-When the server has archive access for all signals on the current canvas:
-- The top toolbar shows a date/time picker.
-- Selecting a past time replays data from the archive into all widgets.
-- The "Live" button resumes real-time streaming.
-- Widgets that support time-axis (plots) show the historical range; point-value widgets show the value at the selected time.
+When the server has archive access configured:
+- The **⏱ History** button in the View mode toolbar reveals a time range bar.
+- Users set a start and end date/time and click **Load**.
+- Plot widgets fetch and display the archived data for the selected range.
+- Point-value widgets (text view, gauge, bar, LED) show the value at the end of the selected range.
+- The **Live** button resumes real-time streaming.
+- Status overlays on plot widgets indicate loading, empty, or error states.
 
 ---
 
@@ -210,4 +267,5 @@ When the server has archive access for all signals on the current canvas:
 | Concurrent clients | ≥ 20 simultaneous browser clients |
 | Data fan-out latency | < 5 ms added latency vs. raw EPICS update rate |
 | Frontend responsiveness | 60 fps canvas rendering during live updates |
-| Screen DPI | Frontend adapts to device pixel ratio |
+| Screen DPI | UI scales with viewport height; manual zoom 50–250% |
+| Plot buffer | 200,000 samples per signal retained in-browser |
diff --git a/docs/TECHNICAL_SPEC.md b/docs/TECHNICAL_SPEC.md
index 8b2b210..09c09c4 100644
--- a/docs/TECHNICAL_SPEC.md
+++ b/docs/TECHNICAL_SPEC.md
@@ -20,31 +20,31 @@
 | Package                      | Purpose                                                |
 | ---------------------------- | ------------------------------------------------------ |
 | `nhooyr.io/websocket`        | WebSocket server (no CGo, more ergonomic than gorilla) |
-| `go-epics/ca` or CGo wrapper | EPICS Channel Access                                   |
+| CGo wrapper to `libca`       | EPICS Channel Access                                   |
 | `yuin/gopher-lua`            | Lua 5.1 runtime for synthetic signals                  |
-| `gonum.org/v1/gonum`         | DSP and math functions (FFT, filters)                  |
+| `BurntSushi/toml`            | TOML config parsing                                    |
 | `encoding/xml` (stdlib)      | Interface file serialisation                           |
 | `net/http` (stdlib)          | HTTP server and static file serving                    |
 
-### 1.2 Frontend — Svelte + TypeScript
+### 1.2 Frontend — Preact + TypeScript
 
 **Rationale:**
 
-- Svelte compiles to vanilla JS with no virtual DOM, giving the smallest bundle and lowest runtime overhead — essential for the 60 fps reactive feel required.
-- Fine-grained reactivity via Svelte stores keeps widget rendering decoupled from data arrival.
+- Preact is a 3 kB React-compatible virtual DOM library — small bundle, fast diffing, no extra framework overhead.
+- esbuild (invoked via its Go API) bundles the TypeScript/TSX source in milliseconds with no Node.js or npm dependency at build time.
 - TypeScript catches signal subscription and widget property type errors at build time.
+- All vendor JS/CSS is checked into `web/vendor/` so the repo builds without internet access.
 
-**Key dependencies:**
+**Key dependencies (vendored):**
 
-| Package           | Purpose                                                                        |
-| ----------------- | ------------------------------------------------------------------------------ |
-| `svelte` + `vite` | Framework and build toolchain                                                  |
-| `uPlot`           | Extremely fast time-series/line plot (canvas-based, < 40 kB)                   |
-| `Apache ECharts`  | FFT, waterfall, histogram, bar, logic analyser plots                           |
-| `konva`           | 2-D canvas scene graph for the edit-mode widget canvas (handles, drag, resize) |
-| `svelte-konva`    | Svelte bindings for Konva                                                      |
+| Package          | Purpose                                                         |
+| ---------------- | --------------------------------------------------------------- |
+| `preact` 10      | Virtual DOM UI framework                                        |
+| `uPlot`          | Extremely fast time-series/line plot (canvas-based, < 40 kB)    |
+| `Apache ECharts` | FFT, waterfall, histogram, bar, logic analyser plots            |
+| `uplot.css`      | uPlot default stylesheet                                        |
 
-**Intentionally excluded:** React, Vue, WebGPU, jQuery.
+**Intentionally excluded:** React, Vue, Svelte, Konva, WebGPU, jQuery, npm at runtime.
 
 ---
 
@@ -52,36 +52,49 @@
 
 ```
 uopi/
-├── cmd/uopi/           # main package — CLI flags, wiring
+├── cmd/uopi/               # main package — CLI flags, wiring
 ├── internal/
-│   ├── server/         # HTTP + WebSocket handlers
-│   ├── broker/         # signal fan-out to clients
+│   ├── server/             # HTTP + WebSocket handlers
+│   ├── broker/             # signal fan-out to clients
 │   ├── datasource/
-│   │   ├── iface.go    # DataSource interface
-│   │   ├── epics/      # EPICS CA/PVA implementation
-│   │   └── synthetic/  # synthetic signal engine
-│   ├── lua/            # Lua sandbox helpers
-│   ├── dsp/            # DSP functions (wraps gonum + custom)
-│   ├── storage/        # interface XML read/write
-│   └── api/            # REST handler functions
-├── web/                # Svelte source
-│   ├── src/
+│   │   ├── iface.go        # DataSource interface
+│   │   ├── epics/          # EPICS CA implementation (CGo)
+│   │   └── synthetic/      # synthetic signal engine + DSP bridge
+│   ├── dsp/                # DSP node implementations (lowpass, MA, etc.)
+│   ├── storage/            # interface XML read/write
+│   └── api/                # REST handler functions
+├── web/
+│   ├── embed.go            # //go:embed dist — exports FS to Go
+│   ├── src/                # TypeScript/TSX source (Preact)
 │   │   ├── lib/
 │   │   │   ├── ws.ts           # WebSocket client + subscription manager
-│   │   │   ├── stores.ts       # Svelte stores for signal values
-│   │   │   ├── widgets/        # one .svelte file per widget type
-│   │   │   └── editor/         # edit-mode canvas, toolbar, properties pane
-│   │   ├── routes/
-│   │   │   ├── +page.svelte    # view mode
-│   │   │   └── edit/+page.svelte  # edit mode
-│   │   └── app.html
-│   ├── package.json
-│   └── vite.config.ts
-├── docs/               # specs, work plan
+│   │   │   ├── stores.ts       # signal value + metadata stores
+│   │   │   ├── types.ts        # shared TypeScript interfaces
+│   │   │   ├── xml.ts          # interface XML parse/serialize
+│   │   │   └── format.ts       # value formatting helpers
+│   │   ├── widgets/            # one .tsx file per widget type
+│   │   ├── App.tsx             # top-level component, mode routing
+│   │   ├── ViewMode.tsx        # view mode layout + tabs
+│   │   ├── EditMode.tsx        # edit mode layout + toolbar
+│   │   ├── Canvas.tsx          # live HMI canvas (view mode)
+│   │   ├── EditCanvas.tsx      # free-form widget editor canvas
+│   │   ├── PlotPanel.tsx       # live plot side-panel (Plot tab)
+│   │   ├── InfoPanel.tsx       # signal info side-panel
+│   │   ├── ZoomControl.tsx     # UI zoom A-/A+ control
+│   │   ├── SyntheticWizard.tsx # new synthetic signal dialog
+│   │   ├── SyntheticEditor.tsx # edit existing synthetic signal
+│   │   ├── LuaEditor.tsx       # Lua code editor with syntax highlight
+│   │   └── styles.css          # all component styles
+│   ├── vendor/             # vendored JS/CSS (preact, uplot, echarts)
+│   └── dist/               # built frontend — generated, not committed
+├── tools/buildfrontend/    # esbuild Go API bundler (go generate)
+├── docs/                   # specs, work plan
 ├── CLAUDE.md
 └── README.md
 ```
 
+The embed package lives at `web/embed.go` (not in `cmd/`) because `//go:embed` paths cannot use `..`.
+
 ---
 
 ## 3. Backend Architecture
@@ -187,8 +200,8 @@ Base path: `/api/v1`
 
 ### 3.5 EPICS Data Source
 
-- Uses CGo bindings to EPICS Base `libca` (Channel Access). PVAccess support via `p4p` C library or a pure-Go PVA client if available.
-- Channel connections are lazy: a channel is connected on first Subscribe and disconnected when the broker releases it.
+- Uses CGo bindings to EPICS Base `libca` (Channel Access).
+- Channel connections are lazy: connected on first Subscribe, disconnected when the broker releases it.
 - On connect, a `ca_get` retrieves full DBR_CTRL metadata (units, limits, enum strings).
 - `ca_add_event` sets up the monitor. Update callbacks push into the broker's raw channel.
 - Multiple PV subscriptions share one CA context per data source instance (thread-safe with `ca_attach_context`).
@@ -198,9 +211,24 @@ Base path: `/api/v1`
 
 - Each synthetic signal is defined as a directed acyclic graph (DAG) of processing nodes.
 - Processing nodes are re-evaluated whenever any upstream signal emits a new value.
-- Built-in node types implemented on top of `gonum/dsp` and custom code.
-- Lua nodes receive a sandboxed `lua.LState` with access to input values and a persistent state table.
-- Synthetic signal definitions are stored as part of the server configuration (JSON/TOML file), distinct from interface XML files.
+- Definitions are stored in a configurable JSON/TOML file alongside server configuration.
+- The `dsp_bridge.go` file maps node type names to `dsp.Node` implementations.
+
+**Built-in node types:**
+
+| Node type    | Parameters                          | Description                                      |
+| ------------ | ----------------------------------- | ------------------------------------------------ |
+| `source`     | `ds`, `name`                        | Reads a signal from any data source              |
+| `gain`       | `factor`                            | Multiplies by a constant                         |
+| `offset`     | `value`                             | Adds a constant                                  |
+| `moving_avg` | `window` (samples)                  | Rolling mean                                     |
+| `lowpass`    | `freq` (Hz), `order` (1–8)          | Cascaded IIR Butterworth-style low-pass filter   |
+| `formula`    | `expr`                              | Inline math expression (variables: `a`, `b`, …) |
+| `lua`        | `script`                            | Arbitrary Lua 5.1 code with persistent state     |
+
+**Low-pass filter implementation:** Cascaded first-order IIR sections. Each stage computes `y = y_prev + α·(x − y_prev)` where `α = dt / (RC + dt)` and `RC = 1/(2π·fc)`. `dt` is computed per sample from source timestamps so the filter is correct for event-driven (non-uniform) data.
+
+**Lua node:** Receives `inputs` table (indexed by signal name) and a persistent `state` table across calls. The `os`, `io`, `package`, and `debug` libraries are disabled.
 
 ### 3.7 Interface Storage
 
@@ -215,6 +243,7 @@ Interfaces are stored as XML files in a configurable directory on the server.
     <option key="yMin" value="auto"/>
     <option key="yMax" value="auto"/>
     <option key="timeWindow" value="60"/>
+    <option key="legend" value="bottom"/>
   </widget>
   <widget id="w2" type="led" x="50" y="50" w="80" h="80">
     <signal ds="epics" name="EPICS:STATUS"/>
@@ -230,47 +259,79 @@ Interfaces are stored as XML files in a configurable directory on the server.
 
 ## 4. Frontend Architecture
 
-### 4.1 WebSocket Client (`ws.ts`)
+### 4.1 WebSocket Client (`lib/ws.ts`)
 
 - Singleton WebSocket connection, reconnects with exponential back-off.
 - Subscription reference counting: multiple widgets subscribing to the same signal result in one server subscription message.
-- Incoming updates are dispatched to signal stores.
+- Incoming updates are dispatched to per-signal stores.
+- `wsClient.history(sig, start, end, maxPoints)` returns a Promise resolving to timestamped point arrays.
 
-### 4.2 Signal Stores (`stores.ts`)
+### 4.2 Signal Stores (`lib/stores.ts`)
 
 ```typescript
-// One writable store per subscribed signal
-const signalStores = new Map<string, Writable<SignalValue>>();
+// One nanostores atom per subscribed signal
+const signalStores = new Map<string, SignalStore>();
 
-function getStore(signal: string): Readable<SignalValue> { ... }
+export function getSignalStore(ref: SignalRef): SignalStore { ... }
+export function getMetaStore(ref: SignalRef): MetaStore { ... }
 ```
 
-Widgets import `getStore(signalName)` and bind to it reactively. Svelte's fine-grained reactivity ensures only the relevant widgets re-render on each update.
+Widgets subscribe to stores directly; store updates trigger re-renders only in the consuming component.
 
-### 4.3 Edit Mode Canvas
+### 4.3 Edit Mode Canvas (`EditCanvas.tsx`)
 
-The edit-mode canvas is implemented with **Konva.js** via `svelte-konva`:
+The edit canvas is a free-form HTML div with absolutely positioned widget components:
 
-- Each widget is a Konva Group containing its visual elements.
-- A `Transformer` node provides resize handles and enforces minimum sizes.
-- Drag-and-drop from the signal tree uses the HTML Drag-and-Drop API; on drop, the canvas coordinate is computed from `stage.getPointerPosition()`.
-- Undo/redo uses a command pattern: each mutating operation pushes an inverse operation onto a stack (max depth 100).
-- Align/distribute operations compute target positions geometrically and generate a single grouped undo entry.
+- Each widget renders as an absolutely positioned `<div>` at `(x, y)` with `(w, h)` dimensions.
+- Selection shows a CSS-outlined bounding box with 8 resize handles rendered as small squares.
+- Drag-and-drop from the signal tree uses the HTML Drag-and-Drop API; on drop, the canvas coordinate is computed from the drop event offset.
+- Undo/redo uses an array of past interface snapshots (max depth 50).
+- Align/distribute operations compute target positions geometrically and generate a single undo entry.
+- Multi-select via Ctrl+click or rubber-band area select.
 
-### 4.4 Widget Rendering in View Mode
+### 4.4 Widget Rendering in View Mode (`Canvas.tsx`)
 
-In view mode the Konva canvas is replaced with a lightweight SVG/HTML layer. Each widget is a Svelte component that:
+View mode renders widgets as absolutely positioned Preact components on a scrollable canvas div:
 
-1. Subscribes to its signal store(s) in `onMount`.
-2. Receives reactive updates and re-renders only its own DOM subtree.
+- Each widget subscribes to its signal store(s) in a `useEffect` and re-renders only when values change.
+- uPlot (time series) and ECharts (histogram, bar, FFT, waterfall, logic analyser) manage their own canvas elements inside their widget component.
+- Plot widgets maintain a rolling ring buffer of 200,000 samples per signal for smooth long-window display.
+- Step-hold interpolation: when multiple signals at different update rates share a plot, the most recent value is carried forward to fill the shared time axis correctly.
 
-Plot widgets (`uPlot` for time series, `ECharts` for others) manage their own canvas elements inside the Svelte component.
+### 4.5 Plot Panel (`PlotPanel.tsx`)
 
-### 4.5 DPI Adaptation
+A live multi-signal plot panel accessible from the "Plot" tab in View mode:
 
-- CSS uses `rem` units throughout for text.
-- Canvas elements read `window.devicePixelRatio` and set `canvas.width` / `canvas.height` accordingly while keeping CSS size fixed.
-- Konva's `Stage` is scaled by `devicePixelRatio` on init and on `resize`.
+- Signals are added by right-clicking any widget and choosing "Plot".
+- Supports configurable time window (10s to 1h).
+- Per-signal style editor: color picker, line width (0 = hidden), line dash (solid/dashed/dotted), marker size (none/S/M/L).
+- Statistics table per signal: last, min, max, mean over the current time window.
+- Uses a `requestAnimationFrame` loop limited to ≤1 redraw/second when data is not changing.
+- Chart fills its container; `ResizeObserver` keeps the uPlot canvas sized correctly.
+
+### 4.6 Resizable Panels
+
+Both edit and view modes support mouse-drag panel resizing:
+
+- **View mode**: drag handle between the interface list pane and the main content area.
+- **Edit mode**: drag handles on both sides of the central canvas (signal tree ↔ canvas, canvas ↔ properties pane).
+- Handle width: 5 px, cursor changes to `ew-resize` on hover.
+- Minimum panel widths enforced to prevent collapse below usable size.
+
+### 4.7 HiDPI / Zoom Support
+
+- `html { font-size: clamp(13px, 1.5vh, 18px); }` — base font scales with viewport height, making the UI naturally larger on 4K screens where the browser zoom level is 100%.
+- Key structural heights (toolbar, panel headers, tab bar, plot toolbar) are expressed in `rem` so they scale with the base font.
+- **ZoomControl** (A− / % / A+) in the toolbar lets users manually override the zoom level in 11 steps from 50% to 250%. The preference is persisted in `localStorage` (`uopi:ui-zoom`) and applied by setting `document.documentElement.style.fontSize` on load.
+- Canvas pixel rendering (uPlot, ECharts) reads `window.devicePixelRatio` and sizes canvases accordingly.
+
+### 4.8 Lua Editor (`LuaEditor.tsx`)
+
+A syntax-highlighted code editor for Lua scripts in the Synthetic signal wizard:
+
+- Implemented as a `<textarea>` overlaid on a `<pre>` element; the textarea has `color: transparent; caret-color: #e2e8f0` so only the caret is visible — the `<pre>` provides the coloured text behind it.
+- Tokeniser handles: `--` line comments, `"..."` / `'...'` string literals, `[[...]]` long strings, hex and float numeric literals, and all Lua 5.1 keywords.
+- Scroll position is synchronised between textarea and pre on every scroll event.
 
 ---
 
@@ -278,34 +339,42 @@ Plot widgets (`uPlot` for time series, `ECharts` for others) manage their own ca
 
 ### 5.1 Backend
 
-```makefile
-# Build static binary (requires EPICS base installed or cross-compiled libca)
-CGO_ENABLED=1 GOOS=linux GOARCH=amd64 \
-  go build -ldflags="-s -w" -o dist/uopi ./cmd/uopi
+```bash
+# Full build (frontend then backend)
+make all
 
-# Run tests
-go test ./...
+# Backend only (frontend must already be built)
+make backend
 
-# Run a single test
+# All tests
+make test
+
+# Single Go test
 go test ./internal/broker/... -run TestFanOut
+
+# Go vet
+go vet ./...
 ```
 
 EPICS `libca.a` is statically linked via `CGO_LDFLAGS` in `internal/datasource/epics/cgo.go`.
 
 ### 5.2 Frontend
 
+The frontend is built by a Go tool in `tools/buildfrontend/` that invokes the esbuild Go API:
+
 ```bash
-cd web
-npm install
-npm run dev        # dev server at http://localhost:5173 (proxies /api to backend)
-npm run build      # outputs to web/dist/
-npm run check      # svelte-check type checking
-npm run lint       # eslint + prettier
+make frontend
+# or equivalently:
+go generate ./web/...
 ```
 
-### 5.3 Combined Build
+No Node.js, npm, or any JS build tool is required on the host. The bundler:
+- Reads entry point `web/src/main.tsx`.
+- Resolves `preact`, `uplot`, and `echarts` imports from `web/vendor/`.
+- Outputs `web/dist/main.js` and `web/dist/main.css`.
+- Copies `web/dist/index.html`, vendor CSS, and other static assets.
 
-A `Makefile` at the repo root:
+### 5.3 Combined Build
 
 ```makefile
 .PHONY: all frontend backend clean
@@ -313,20 +382,19 @@ A `Makefile` at the repo root:
 all: frontend backend
 
 frontend:
-	cd web && npm ci && npm run build
+    go run ./tools/buildfrontend
 
-backend: frontend
-	go build -ldflags="-s -w" -o dist/uopi ./cmd/uopi
+backend:
+    CGO_ENABLED=1 go build -ldflags="-s -w" -o dist/uopi ./cmd/uopi
 
 test:
-	go test ./...
-	cd web && npm run check
+    go test ./...
 
 clean:
-	rm -rf dist/ web/dist/
+    rm -rf dist/ web/dist/
 ```
 
-The backend's `//go:embed web/dist` directive picks up the built frontend automatically.
+The backend's `//go:embed dist` directive in `web/embed.go` picks up the built frontend automatically. `main.go` does `fs.Sub(web.FS, "dist")` to serve a clean root.
 
 ---
 
@@ -346,10 +414,10 @@ archive_url = ""           # EPICS Archive Appliance URL
 
 [datasource.synthetic]
 enabled = true
-definitions_file = "./synthetic.json"
+definitions_file = "./synthetic.toml"
 ```
 
-All settings can also be overridden with environment variables: `UOPI_SERVER_LISTEN`, `UOPI_EPICS_CA_ADDR_LIST`, etc.
+All settings can also be overridden with `UOPI_*` environment variables (e.g. `UOPI_SERVER_LISTEN`, `UOPI_EPICS_CA_ADDR_LIST`).
 
 ---
 
@@ -359,11 +427,11 @@ All settings can also be overridden with environment variables: `UOPI_SERVER_LIS
 | ------------------ | --------------------------------------------------------------------------------- |
 | Broker             | Unit tests with mock data source; verify fan-out, subscribe/unsubscribe lifecycle |
 | Synthetic DSP      | Table-driven unit tests against known signal inputs/outputs                       |
+| Low-pass filter    | Unit tests: step response, frequency attenuation vs. analytical expectation       |
 | Lua sandbox        | Unit tests for sandbox isolation and API surface                                  |
 | REST API           | `httptest` integration tests                                                      |
 | WebSocket protocol | Integration tests with a test client                                              |
-| EPICS data source  | Integration tests against a local SoftIOC (optional, CI-gated)                    |
-| Frontend           | Svelte component tests via `vitest` + `@testing-library/svelte`                   |
+| EPICS data source  | Integration tests against a local SoftIOC (optional, CI-gated)                   |
 
 ---
 
diff --git a/internal/datasource/synthetic/dsp_bridge.go b/internal/datasource/synthetic/dsp_bridge.go
index b46ef0b..e01ef8b 100644
--- a/internal/datasource/synthetic/dsp_bridge.go
+++ b/internal/datasource/synthetic/dsp_bridge.go
@@ -99,6 +99,16 @@ func buildNode(d NodeDef) (dsp.Node, error) {
 	case "expr":
 		return &dsp.ExprNode{Expr: stringParam(p, "expr")}, nil
 
+	case "lowpass":
+		order := int(floatParam(p, "order"))
+		if order < 1 {
+			order = 1
+		}
+		return &dsp.LowPassNode{
+			Freq:  floatParam(p, "freq"),
+			Order: order,
+		}, nil
+
 	case "lua":
 		return &dsp.LuaNode{Script: stringParam(p, "script")}, nil
 
diff --git a/internal/dsp/nodes.go b/internal/dsp/nodes.go
index d977911..7181f86 100644
--- a/internal/dsp/nodes.go
+++ b/internal/dsp/nodes.go
@@ -535,6 +535,68 @@ func (p *exprParser) parseFactor() (float64, error) {
 	return 0, fmt.Errorf("unexpected character %q at position %d", ch, p.pos)
 }
 
+// ── LowPassNode ───────────────────────────────────────────────────────────────
+
+// LowPassNode implements a cascaded first-order IIR (RC) low-pass filter.
+// The filter coefficient α is recomputed each sample from the elapsed time so
+// it is correct for event-driven (non-fixed-rate) signals.
+// For Order > 1 the single-pole stage is cascaded Order times, approximating
+// a Butterworth response with -20·Order dB/decade roll-off.
+type LowPassNode struct {
+	Freq  float64 // cutoff frequency in Hz (–3 dB point)
+	Order int     // number of cascaded stages (1–8)
+}
+
+func (n *LowPassNode) Type() string { return "lowpass" }
+
+func (n *LowPassNode) Process(inputs []float64, state map[string]any) (float64, error) {
+	if len(inputs) == 0 {
+		return 0, errors.New("lowpass: no inputs")
+	}
+	x := inputs[0]
+	now := time.Now()
+
+	order := n.Order
+	if order < 1 {
+		order = 1
+	}
+	if order > 8 {
+		order = 8
+	}
+	fc := n.Freq
+	if fc <= 0 {
+		fc = 1.0
+	}
+
+	prevT, hasT := state["t"].(time.Time)
+	if !hasT {
+		// First sample: prime all stage states with the input value.
+		for i := range order {
+			state[fmt.Sprintf("y%d", i)] = x
+		}
+		state["t"] = now
+		return x, nil
+	}
+
+	dt := now.Sub(prevT).Seconds()
+	state["t"] = now
+	if dt <= 0 {
+		dt = 1e-9
+	}
+
+	rc := 1.0 / (2.0 * math.Pi * fc)
+	alpha := dt / (rc + dt)
+
+	y := x
+	for i := range order {
+		key := fmt.Sprintf("y%d", i)
+		prev, _ := state[key].(float64)
+		y = alpha*y + (1-alpha)*prev
+		state[key] = y
+	}
+	return y, nil
+}
+
 // ── LuaNode ───────────────────────────────────────────────────────────────────
 
 // LuaNode runs a Lua script in a sandboxed gopher-lua VM.
diff --git a/web/src/App.tsx b/web/src/App.tsx
index 52222ae..583993b 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -4,6 +4,7 @@ import { wsClient } from './lib/ws';
 import ViewMode from './ViewMode';
 import EditMode from './EditMode';
 import FullscreenMode from './FullscreenMode';
+import { applyZoom, getStoredZoom } from './ZoomControl';
 import type { Interface } from './lib/types';
 
 type AppMode = 'view' | 'edit';
@@ -26,6 +27,7 @@ export default function App() {
   useEffect(() => {
     const dpr = window.devicePixelRatio ?? 1;
     document.documentElement.style.setProperty('--dpr', String(dpr));
+    applyZoom(getStoredZoom());
     if (!fsParam) wsClient.connect('/ws');
   }, []);
 
diff --git a/web/src/EditMode.tsx b/web/src/EditMode.tsx
index 937bf1c..fcfb919 100644
--- a/web/src/EditMode.tsx
+++ b/web/src/EditMode.tsx
@@ -7,6 +7,7 @@ import EditCanvas, { genWidgetId, DEFAULT_SIZES } from './EditCanvas';
 import PropertiesPane from './PropertiesPane';
 import ContextualHelp from './ContextualHelp';
 import HelpModal from './HelpModal';
+import ZoomControl from './ZoomControl';
 
 interface Props {
   initial: Interface | null;
@@ -83,6 +84,27 @@ export default function EditMode({ initial, onDone }: Props) {
   const [showInsertMenu, setShowInsertMenu] = useState(false);
   const [showHelp, setShowHelp] = useState(false);
   const [helpSection, setHelpSection] = useState('edit');
+  const [leftW, setLeftW] = useState(220);
+  const [rightW, setRightW] = useState(260);
+
+  function startResize(side: 'left' | 'right') {
+    return (e: MouseEvent) => {
+      e.preventDefault();
+      const startX = e.clientX;
+      const startW = side === 'left' ? leftW : rightW;
+      function onMove(mv: MouseEvent) {
+        const dx = mv.clientX - startX;
+        if (side === 'left') setLeftW(Math.max(140, startW + dx));
+        else setRightW(Math.max(180, startW - dx));
+      }
+      function onUp() {
+        window.removeEventListener('mousemove', onMove);
+        window.removeEventListener('mouseup', onUp);
+      }
+      window.addEventListener('mousemove', onMove);
+      window.addEventListener('mouseup', onUp);
+    };
+  }
   function openHelp(section = 'edit') { setHelpSection(section); setShowHelp(true); }
 
   // Undo / redo
@@ -344,6 +366,7 @@ export default function EditMode({ initial, onDone }: Props) {
         </div>
 
         <div class="toolbar-right">
+          <ZoomControl />
           <ContextualHelp mode="edit" onOpenManual={openHelp} />
           <button class="icon-btn help-manual-btn" onClick={() => openHelp('edit')} title="Open user manual">📖</button>
           <button class="toolbar-btn" onClick={handleImport}>Import</button>
@@ -357,7 +380,8 @@ export default function EditMode({ initial, onDone }: Props) {
 
       {/* ── Three-panel body ── */}
       <div class="edit-body">
-        <SignalTree />
+        <SignalTree width={leftW} />
+        <div class="panel-resize-handle" onMouseDown={startResize('left')} />
         <EditCanvas
           iface={iface}
           selectedIds={selectedIds}
@@ -365,12 +389,14 @@ export default function EditMode({ initial, onDone }: Props) {
           onChange={handleWidgetsChange}
           snapGrid={snapGrid}
         />
+        <div class="panel-resize-handle" onMouseDown={startResize('right')} />
         <PropertiesPane
           selected={selectedWidget}
           multiCount={multiSelected ? selectedIds.length : 0}
           iface={iface}
           onChange={handleWidgetChange}
           onIfaceChange={handleIfaceChange}
+          width={rightW}
         />
       </div>
 
diff --git a/web/src/InterfaceList.tsx b/web/src/InterfaceList.tsx
index 5374c94..5aed343 100644
--- a/web/src/InterfaceList.tsx
+++ b/web/src/InterfaceList.tsx
@@ -13,9 +13,10 @@ interface Props {
   onSelect?: (id: string) => void;
   onEdit?: (iface?: Interface) => void;
   onEditId?: (id: string) => void;
+  width?: number;
 }
 
-export default function InterfaceList({ onLoad, onSelect, onEdit, onEditId }: Props) {
+export default function InterfaceList({ onLoad, onSelect, onEdit, onEditId, width }: Props) {
   const [collapsed, setCollapsed] = useState(false);
   const [interfaces, setInterfaces] = useState<ServerInterface[]>([]);
   const [loading, setLoading] = useState(true);
@@ -66,7 +67,7 @@ export default function InterfaceList({ onLoad, onSelect, onEdit, onEditId }: Pr
   }
 
   return (
-    <aside class={`panel${collapsed ? ' collapsed' : ''}`}>
+    <aside class={`panel${collapsed ? ' collapsed' : ''}`} style={!collapsed && width ? `width:${width}px;min-width:${width}px;` : undefined}>
       <div class="panel-header">
         {!collapsed && <span class="panel-title">Interfaces</span>}
         <button
diff --git a/web/src/LuaEditor.tsx b/web/src/LuaEditor.tsx
new file mode 100644
index 0000000..b123f9c
--- /dev/null
+++ b/web/src/LuaEditor.tsx
@@ -0,0 +1,137 @@
+import { h } from 'preact';
+import { useRef } from 'preact/hooks';
+
+// ── Tokenizer ─────────────────────────────────────────────────────────────────
+
+type TT = 'kw' | 'str' | 'cmt' | 'num' | 'text';
+
+const LUA_KEYWORDS = new Set([
+  'if', 'then', 'else', 'elseif', 'end', 'while', 'do', 'for', 'in',
+  'return', 'local', 'function', 'not', 'and', 'or', 'nil', 'true',
+  'false', 'break', 'repeat', 'until',
+]);
+
+interface Tok { t: TT; s: string; }
+
+function isAlpha(c: string) { return (c >= 'a' && c <= 'z') || (c >= 'A' && c <= 'Z') || c === '_'; }
+function isAlNum(c: string) { return isAlpha(c) || (c >= '0' && c <= '9'); }
+function isDigit(c: string) { return c >= '0' && c <= '9'; }
+
+function tokenize(src: string): Tok[] {
+  const out: Tok[] = [];
+  let i = 0;
+
+  while (i < src.length) {
+    const c = src[i];
+
+    // Single-line comment
+    if (c === '-' && src[i + 1] === '-') {
+      const end = src.indexOf('\n', i);
+      const stop = end < 0 ? src.length : end;
+      out.push({ t: 'cmt', s: src.slice(i, stop) });
+      i = stop;
+      continue;
+    }
+
+    // String: "..." or '...'
+    if (c === '"' || c === "'") {
+      let j = i + 1;
+      while (j < src.length) {
+        if (src[j] === '\\') { j += 2; continue; }
+        if (src[j] === c) { j++; break; }
+        j++;
+      }
+      out.push({ t: 'str', s: src.slice(i, j) });
+      i = j;
+      continue;
+    }
+
+    // Long string [[...]]
+    if (c === '[' && src[i + 1] === '[') {
+      const end = src.indexOf(']]', i + 2);
+      const stop = end < 0 ? src.length : end + 2;
+      out.push({ t: 'str', s: src.slice(i, stop) });
+      i = stop;
+      continue;
+    }
+
+    // Number
+    if (isDigit(c) || (c === '.' && isDigit(src[i + 1] ?? ''))) {
+      let j = i;
+      if (src[j] === '0' && (src[j + 1] === 'x' || src[j + 1] === 'X')) {
+        j += 2;
+        while (j < src.length && /[0-9a-fA-F]/.test(src[j])) j++;
+      } else {
+        while (j < src.length && (isDigit(src[j]) || src[j] === '.')) j++;
+        if (j < src.length && (src[j] === 'e' || src[j] === 'E')) {
+          j++;
+          if (src[j] === '+' || src[j] === '-') j++;
+          while (j < src.length && isDigit(src[j])) j++;
+        }
+      }
+      out.push({ t: 'num', s: src.slice(i, j) });
+      i = j;
+      continue;
+    }
+
+    // Identifier / keyword
+    if (isAlpha(c)) {
+      let j = i;
+      while (j < src.length && isAlNum(src[j])) j++;
+      const word = src.slice(i, j);
+      out.push({ t: LUA_KEYWORDS.has(word) ? 'kw' : 'text', s: word });
+      i = j;
+      continue;
+    }
+
+    out.push({ t: 'text', s: c });
+    i++;
+  }
+
+  return out;
+}
+
+function renderTokens(src: string) {
+  return tokenize(src).map((tok, idx) =>
+    tok.t === 'text'
+      ? <span key={idx}>{tok.s}</span>
+      : <span key={idx} class={`lua-${tok.t}`}>{tok.s}</span>
+  );
+}
+
+// ── Component ─────────────────────────────────────────────────────────────────
+
+interface Props {
+  value: string;
+  onChange: (v: string) => void;
+  rows?: number;
+}
+
+export default function LuaEditor({ value, onChange, rows = 12 }: Props) {
+  const preRef = useRef<HTMLPreElement>(null);
+
+  function syncScroll(e: Event) {
+    const ta = e.target as HTMLTextAreaElement;
+    if (preRef.current) {
+      preRef.current.scrollTop = ta.scrollTop;
+      preRef.current.scrollLeft = ta.scrollLeft;
+    }
+  }
+
+  return (
+    <div class="lua-editor" style={`height:${rows * 1.5}em;`}>
+      <pre ref={preRef} class="lua-pre" aria-hidden="true">
+        {renderTokens(value)}
+        {'\n'}
+      </pre>
+      <textarea
+        class="lua-textarea"
+        value={value}
+        spellcheck={false}
+        autocomplete="off"
+        onInput={(e) => onChange((e.target as HTMLTextAreaElement).value)}
+        onScroll={syncScroll}
+      />
+    </div>
+  );
+}
diff --git a/web/src/PlotPanel.tsx b/web/src/PlotPanel.tsx
index 55ad38f..707a974 100644
--- a/web/src/PlotPanel.tsx
+++ b/web/src/PlotPanel.tsx
@@ -4,20 +4,31 @@ import uPlot from 'uplot';
 import { getSignalStore, getMetaStore } from './lib/stores';
 import type { SignalRef, SignalMeta } from './lib/types';
 
+// ── Public types ──────────────────────────────────────────────────────────────
+
+export interface PlotSignalStyle {
+  color: string;
+  lineWidth: number;   // px; 0 = no line (markers-only)
+  lineDash: number[];  // [] = solid, [8,4] = dashed, [2,4] = dotted
+  markerSize: number;  // diameter px; 0 = no markers
+}
+
 export interface PlotSignal {
   ref: SignalRef;
-  color: string;
+  style: PlotSignalStyle;
 }
 
 interface Props {
   signals: PlotSignal[];
   onRemove: (ref: SignalRef) => void;
+  onStyleChange: (ref: SignalRef, style: PlotSignalStyle) => void;
 }
 
+// ── Constants ─────────────────────────────────────────────────────────────────
+
 interface Buf { ts: number[]; vals: number[]; }
 
-// Large enough to hold a full 1-hour window at ~10 Hz per signal.
-const RING_MAX = 50_000;
+const RING_MAX = 200_000;
 
 const TIME_WINDOWS = [
   { label: '10s', secs: 10 },
@@ -28,6 +39,29 @@ const TIME_WINDOWS = [
   { label: '1h',  secs: 3600 },
 ];
 
+const LINE_WIDTHS: Array<{ label: string; value: number }> = [
+  { label: '✕', value: 0 },
+  { label: '1', value: 1 },
+  { label: '1.5', value: 1.5 },
+  { label: '2', value: 2 },
+  { label: '3', value: 3 },
+];
+
+const LINE_DASHES: Array<{ label: string; value: number[] }> = [
+  { label: '━━', value: [] },
+  { label: '╍╍', value: [8, 4] },
+  { label: '⋯', value: [2, 4] },
+];
+
+const MARKER_SIZES: Array<{ label: string; value: number }> = [
+  { label: '✕', value: 0 },
+  { label: 'S', value: 3 },
+  { label: 'M', value: 5 },
+  { label: 'L', value: 8 },
+];
+
+// ── Pure helpers ──────────────────────────────────────────────────────────────
+
 interface Stat { min: number; max: number; mean: number; last: number; }
 
 function pushSample(buf: Buf, t: number, v: number) {
@@ -41,6 +75,7 @@ function pushSample(buf: Buf, t: number, v: number) {
 
 function buildData(signals: PlotSignal[], bufs: Map<string, Buf>, windowSec: number): uPlot.AlignedData {
   const cutoff = Date.now() / 1000 - windowSec;
+
   const allTs = new Set<number>();
   for (const s of signals) {
     const buf = bufs.get(`${s.ref.ds}\0${s.ref.name}`);
@@ -48,14 +83,23 @@ function buildData(signals: PlotSignal[], bufs: Map<string, Buf>, windowSec: num
   }
   const sorted = Array.from(allTs).sort((a, b) => a - b);
   if (sorted.length === 0) return [[], ...signals.map(() => [])] as uPlot.AlignedData;
+
   return [
     sorted,
     ...signals.map(s => {
       const buf = bufs.get(`${s.ref.ds}\0${s.ref.name}`);
-      if (!buf) return sorted.map(() => null);
-      const m = new Map<number, number>();
-      buf.ts.forEach((t, i) => { if (t >= cutoff) m.set(t, buf.vals[i]); });
-      return sorted.map(t => m.get(t) ?? null);
+      if (!buf || buf.ts.length === 0) return sorted.map(() => null);
+
+      // Step-hold: carry the most recent sample forward so signals with
+      // different update rates align correctly on the shared time axis.
+      let bi = 0;
+      let hold: number | null = null;
+      while (bi < buf.ts.length && buf.ts[bi] < cutoff) hold = buf.vals[bi++];
+
+      return sorted.map(t => {
+        while (bi < buf.ts.length && buf.ts[bi] <= t) hold = buf.vals[bi++];
+        return hold;
+      });
     }),
   ] as uPlot.AlignedData;
 }
@@ -78,22 +122,47 @@ function fmtN(v: number | undefined | null): string {
   return v.toPrecision(4).replace(/\.?0+$/, '');
 }
 
-export default function PlotPanel({ signals, onRemove }: Props) {
+function dashEq(a: number[], b: number[]): boolean {
+  return a.length === b.length && a.every((v, i) => v === b[i]);
+}
+
+function styleKey(s: PlotSignal): string {
+  return `${s.ref.ds}:${s.ref.name}:${s.style.color}:${s.style.lineWidth}:${s.style.lineDash.join(',')}:${s.style.markerSize}`;
+}
+
+function makeSeries(s: PlotSignal): uPlot.Series {
+  const { color, lineWidth, lineDash, markerSize } = s.style;
+  return {
+    label: s.ref.name,
+    stroke: color,
+    width: lineWidth,
+    dash: lineDash.length > 0 ? lineDash : undefined,
+    points: {
+      show: markerSize > 0,
+      size: markerSize,
+      stroke: color,
+      fill: color,
+    },
+    spanGaps: false,
+  };
+}
+
+// ── Component ─────────────────────────────────────────────────────────────────
+
+export default function PlotPanel({ signals, onRemove, onStyleChange }: Props) {
   const chartRef = useRef<HTMLDivElement>(null);
   const [windowSec, setWindowSec] = useState(60);
   const [stats, setStats] = useState<Array<Stat | null>>([]);
   const [metas, setMetas] = useState<Map<string, SignalMeta>>(new Map());
+  const [editingKey, setEditingKey] = useState<string | null>(null);
 
-  // Persistent ring buffers survive signal list changes (so we don't lose history)
   const bufsRef = useRef<Map<string, Buf>>(new Map());
-
-  const signalsKey = signals.map(s => `${s.ref.ds}:${s.ref.name}:${s.color}`).join(',');
+  const signalsKey = signals.map(styleKey).join('|');
 
   useEffect(() => {
     if (!chartRef.current) return;
     const el = chartRef.current;
 
-    // Ensure buffers exist for all current signals
     for (const s of signals) {
       const key = `${s.ref.ds}\0${s.ref.name}`;
       if (!bufsRef.current.has(key)) bufsRef.current.set(key, { ts: [], vals: [] });
@@ -101,23 +170,21 @@ export default function PlotPanel({ signals, onRemove }: Props) {
 
     if (signals.length === 0) return;
 
-    // Must be defined BEFORE new uPlot() because the range function closes over it
-    // and uPlot calls range() synchronously during construction.
     let currentWindow = windowSec;
 
-    // Create uPlot
-    let uplot = new uPlot(
+    const uplot = new uPlot(
       {
         width: Math.max(el.clientWidth, 200),
         height: Math.max(el.clientHeight, 100),
         legend: { show: false },
         cursor: { show: true },
         axes: [
-          { stroke: '#64748b', grid: { stroke: '#2d3748' }, ticks: { stroke: '#475569' } },
+          { stroke: '#94a3b8', grid: { stroke: '#2d3748' }, ticks: { stroke: '#475569' } },
           {
-            stroke: '#64748b',
+            stroke: '#94a3b8',
             grid: { stroke: '#2d3748' },
             ticks: { stroke: '#475569' },
+            size: 55,
             values: (_u: uPlot, vals: (number | null)[]) =>
               vals.map(v => (v === null || v === undefined) ? '' : fmtN(v)),
           },
@@ -125,28 +192,28 @@ export default function PlotPanel({ signals, onRemove }: Props) {
         scales: {
           x: {
             time: true,
-            range: (_u: uPlot, _min: number, _max: number): [number, number] => {
+            range: (): [number, number] => {
               const now = Date.now() / 1000;
               return [now - currentWindow, now];
             },
           },
-          y: { auto: true },
+          y: {
+            auto: true,
+            range: (_u: uPlot, min: number, max: number): [number, number] => {
+              if (!isFinite(min) || !isFinite(max) || min === max) {
+                const mid = isFinite(min) ? min : 0;
+                return [mid - 1, mid + 1];
+              }
+              return [min, max];
+            },
+          },
         },
-        series: [
-          {},
-          ...signals.map(s => ({
-            label: s.ref.name,
-            stroke: s.color,
-            width: 1.5,
-            spanGaps: false,
-          })),
-        ],
+        series: [{}, ...signals.map(makeSeries)],
       },
       buildData(signals, bufsRef.current, windowSec),
       el,
     );
 
-    // Subscriptions to signal stores
     const unsubs: Array<() => void> = [];
     let dirty = false;
 
@@ -170,13 +237,8 @@ export default function PlotPanel({ signals, onRemove }: Props) {
       unsubs.push(unsubM);
     });
 
-    // Expose a setter for the window so the windowSec useEffect can poke it
     (el as any)._setWindow = (secs: number) => { currentWindow = secs; dirty = true; };
 
-    // RAF update loop — redraws on new data, every ~1 s to advance the time axis,
-    // or immediately when the chart becomes visible again after being hidden.
-    // Skips updates while the chart is hidden (display:none → 0×0) to prevent
-    // uPlot internal state corruption.
     let lastDrawTime = 0;
     let wasVisible = false;
     let rafId = requestAnimationFrame(function tick(ts) {
@@ -186,6 +248,10 @@ export default function PlotPanel({ signals, onRemove }: Props) {
       if (isVisible && (dirty || becameVisible || ts - lastDrawTime >= 1000)) {
         dirty = false;
         lastDrawTime = ts;
+        if (becameVisible) {
+          const nw = el.clientWidth, nh = el.clientHeight;
+          if (nw > 0 && nh > 0) uplot.setSize({ width: nw, height: nh });
+        }
         uplot.setData(buildData(signals, bufsRef.current, currentWindow));
         setStats(signals.map(s =>
           computeStats(bufsRef.current.get(`${s.ref.ds}\0${s.ref.name}`), currentWindow)
@@ -194,7 +260,6 @@ export default function PlotPanel({ signals, onRemove }: Props) {
       rafId = requestAnimationFrame(tick);
     });
 
-    // Resize observer
     const ro = new ResizeObserver(() => {
       const w = el.clientWidth, h = el.clientHeight;
       if (w > 0 && h > 0) uplot.setSize({ width: w, height: h });
@@ -210,11 +275,12 @@ export default function PlotPanel({ signals, onRemove }: Props) {
     };
   }, [signalsKey]);
 
-  // When the window selector changes, poke the running chart
   useEffect(() => {
     if (chartRef.current) (chartRef.current as any)._setWindow?.(windowSec);
   }, [windowSec]);
 
+  // ── Render ──────────────────────────────────────────────────────────────────
+
   return (
     <div class="plot-panel">
       <div class="plot-panel-toolbar">
@@ -245,15 +311,34 @@ export default function PlotPanel({ signals, onRemove }: Props) {
                 const st = stats[i] ?? null;
                 const meta = metas.get(key);
                 const unit = meta?.unit ?? '';
+                const isEditing = editingKey === key;
+                const { color, lineWidth, lineDash, markerSize } = s.style;
+
+                function update(patch: Partial<PlotSignalStyle>) {
+                  onStyleChange(s.ref, { ...s.style, ...patch });
+                }
+
                 return (
                   <div class="plot-legend-item" key={key}>
+                    {/* Header row */}
                     <div class="plot-legend-hdr">
-                      <span class="plot-legend-swatch" style={`background:${s.color};`} />
+                      <span class="plot-legend-swatch" style={`background:${color};`} />
                       <span class="plot-legend-name" title={`${s.ref.ds} / ${s.ref.name}`}>
                         {s.ref.name}
                       </span>
-                      <button class="plot-legend-rm" onClick={() => onRemove(s.ref)} title="Remove">✕</button>
+                      <button
+                        class={`plot-legend-icon-btn${isEditing ? ' active' : ''}`}
+                        onClick={() => setEditingKey(isEditing ? null : key)}
+                        title="Edit style"
+                      >✎</button>
+                      <button
+                        class="plot-legend-icon-btn"
+                        onClick={() => onRemove(s.ref)}
+                        title="Remove"
+                      >✕</button>
                     </div>
+
+                    {/* Stats */}
                     <table class="plot-stats-tbl">
                       <tbody>
                         <tr>
@@ -265,6 +350,67 @@ export default function PlotPanel({ signals, onRemove }: Props) {
                         <tr><td>Mean</td><td>{st ? fmtN(st.mean) : '—'}</td></tr>
                       </tbody>
                     </table>
+
+                    {/* Inline style editor */}
+                    {isEditing && (
+                      <div class="plot-style-editor">
+                        {/* Color */}
+                        <div class="plot-style-row">
+                          <span class="plot-style-label">Color</span>
+                          <input
+                            type="color"
+                            class="plot-style-color"
+                            value={color}
+                            onInput={e => update({ color: (e.target as HTMLInputElement).value })}
+                          />
+                        </div>
+
+                        {/* Line width */}
+                        <div class="plot-style-row">
+                          <span class="plot-style-label">Width</span>
+                          <div class="plot-style-btns">
+                            {LINE_WIDTHS.map(lw => (
+                              <button
+                                key={lw.value}
+                                class={`plot-style-btn${lineWidth === lw.value ? ' active' : ''}`}
+                                onClick={() => update({ lineWidth: lw.value })}
+                                title={lw.value === 0 ? 'No line' : `${lw.value}px`}
+                              >{lw.label}</button>
+                            ))}
+                          </div>
+                        </div>
+
+                        {/* Line dash */}
+                        <div class="plot-style-row">
+                          <span class="plot-style-label">Line</span>
+                          <div class="plot-style-btns">
+                            {LINE_DASHES.map(ld => (
+                              <button
+                                key={ld.label}
+                                class={`plot-style-btn${dashEq(lineDash, ld.value) ? ' active' : ''}`}
+                                onClick={() => update({ lineDash: ld.value })}
+                                title={ld.value.length === 0 ? 'Solid' : ld.value[0] > 4 ? 'Dashed' : 'Dotted'}
+                              >{ld.label}</button>
+                            ))}
+                          </div>
+                        </div>
+
+                        {/* Markers */}
+                        <div class="plot-style-row">
+                          <span class="plot-style-label">Markers</span>
+                          <div class="plot-style-btns">
+                            {MARKER_SIZES.map(ms => (
+                              <button
+                                key={ms.value}
+                                class={`plot-style-btn${markerSize === ms.value ? ' active' : ''}`}
+                                onClick={() => update({ markerSize: ms.value })}
+                                title={ms.value === 0 ? 'None' : `Size ${ms.value}`}
+                              >{ms.label}</button>
+                            ))}
+                          </div>
+                        </div>
+                      </div>
+                    )}
                   </div>
                 );
               })}
diff --git a/web/src/PropertiesPane.tsx b/web/src/PropertiesPane.tsx
index e7c8bb9..c839751 100644
--- a/web/src/PropertiesPane.tsx
+++ b/web/src/PropertiesPane.tsx
@@ -8,6 +8,7 @@ interface Props {
   iface: Interface;
   onChange: (updated: Widget) => void;
   onIfaceChange: (updated: Interface) => void;
+  width?: number;
 }
 
 function Field({ label, children }: { label: string; children: any }) {
@@ -44,7 +45,7 @@ const LABEL_WIDGETS = new Set(['textview', 'gauge', 'barh', 'barv', 'setvalue',
 // Widgets with multiple signals
 const MULTI_SIGNAL_WIDGETS = new Set(['plot', 'multiled']);
 
-export default function PropertiesPane({ selected, multiCount, iface, onChange, onIfaceChange }: Props) {
+export default function PropertiesPane({ selected, multiCount, iface, onChange, onIfaceChange, width }: Props) {
   const [collapsed, setCollapsed] = useState(false);
 
   function setOpt(key: string, value: string) {
@@ -66,7 +67,7 @@ export default function PropertiesPane({ selected, multiCount, iface, onChange,
   const w = selected;
 
   return (
-    <aside class={`panel props-panel${collapsed ? ' collapsed' : ''}`} style="border-left:1px solid #2d3748;border-right:none;">
+    <aside class={`panel props-panel${collapsed ? ' collapsed' : ''}`} style={`border-left:1px solid #2d3748;border-right:none;${!collapsed && width ? `width:${width}px;min-width:${width}px;` : ''}`}>
       <div class="panel-header">
         {!collapsed && <span class="panel-title">Properties</span>}
         <button class="icon-btn" onClick={() => setCollapsed(c => !c)} title={collapsed ? 'Expand' : 'Collapse'}>
diff --git a/web/src/SignalTree.tsx b/web/src/SignalTree.tsx
index 88a4bdf..41dda32 100644
--- a/web/src/SignalTree.tsx
+++ b/web/src/SignalTree.tsx
@@ -37,9 +37,10 @@ function saveCustom(signals: Array<{ ds: string; name: string }>) {
 
 interface Props {
   onDragStart?: (sig: SignalRef) => void;
+  width?: number;
 }
 
-export default function SignalTree({ onDragStart }: Props) {
+export default function SignalTree({ onDragStart, width }: Props) {
   const [collapsed, setCollapsed] = useState(false);
   const [groups, setGroups] = useState<DsGroup[]>([]);
   const [customSignals, setCustomSignals] = useState<Array<{ ds: string; name: string }>>(loadCustom);
@@ -211,7 +212,7 @@ export default function SignalTree({ onDragStart }: Props) {
   }
 
   return (
-    <aside class={`panel signal-tree-panel${collapsed ? ' collapsed' : ''}`}>
+    <aside class={`panel signal-tree-panel${collapsed ? ' collapsed' : ''}`} style={!collapsed && width ? `width:${width}px;min-width:${width}px;` : undefined}>
       <div class="panel-header">
         {!collapsed && <span class="panel-title">Signals</span>}
         <button class="icon-btn" onClick={() => setCollapsed(c => !c)} title={collapsed ? 'Expand' : 'Collapse'}>
diff --git a/web/src/SyntheticEditor.tsx b/web/src/SyntheticEditor.tsx
index c218920..ae41300 100644
--- a/web/src/SyntheticEditor.tsx
+++ b/web/src/SyntheticEditor.tsx
@@ -1,22 +1,27 @@
 import { h } from 'preact';
 import { useState, useEffect } from 'preact/hooks';
+import LuaEditor from './LuaEditor';
 
 interface NodeParam {
   label: string;
   key: string;
-  type: 'number' | 'text';
+  type: 'number' | 'text' | 'lua';
   default: string;
 }
 
 const NODE_TYPES: Array<{ type: string; label: string; params: NodeParam[] }> = [
-  { type: 'gain',           label: 'Gain',           params: [{ label: 'Factor',        key: 'gain',   type: 'number', default: '1' }] },
-  { type: 'offset',         label: 'Offset',         params: [{ label: 'Offset',        key: 'offset', type: 'number', default: '0' }] },
-  { type: 'moving_average', label: 'Moving Average', params: [{ label: 'Window (n)',    key: 'window', type: 'number', default: '10' }] },
-  { type: 'rms',            label: 'RMS',            params: [{ label: 'Window (n)',    key: 'window', type: 'number', default: '10' }] },
-  { type: 'derivative',     label: 'Derivative',     params: [] },
-  { type: 'clamp',          label: 'Clamp',          params: [{ label: 'Min', key: 'min', type: 'number', default: '0' }, { label: 'Max', key: 'max', type: 'number', default: '100' }] },
-  { type: 'expr',           label: 'Formula',        params: [{ label: 'Expression (a=input)', key: 'expr', type: 'text', default: 'a * 1.0' }] },
-  { type: 'lua',            label: 'Lua Script',     params: [{ label: 'Script (a=input)',      key: 'script', type: 'text', default: 'return a' }] },
+  { type: 'gain',           label: 'Gain',            params: [{ label: 'Factor',           key: 'gain',   type: 'number', default: '1' }] },
+  { type: 'offset',         label: 'Offset',          params: [{ label: 'Offset',           key: 'offset', type: 'number', default: '0' }] },
+  { type: 'moving_average', label: 'Moving Average',  params: [{ label: 'Window (n)',       key: 'window', type: 'number', default: '10' }] },
+  { type: 'rms',            label: 'RMS',             params: [{ label: 'Window (n)',       key: 'window', type: 'number', default: '10' }] },
+  { type: 'lowpass',        label: 'Low-pass Filter', params: [
+    { label: 'Cutoff freq (Hz)', key: 'freq',  type: 'number', default: '1' },
+    { label: 'Order (1–8)',      key: 'order', type: 'number', default: '1' },
+  ]},
+  { type: 'derivative',     label: 'Derivative',      params: [] },
+  { type: 'clamp',          label: 'Clamp',           params: [{ label: 'Min', key: 'min', type: 'number', default: '0' }, { label: 'Max', key: 'max', type: 'number', default: '100' }] },
+  { type: 'expr',           label: 'Formula',         params: [{ label: 'Expression (a=input)', key: 'expr',   type: 'text', default: 'a * 1.0' }] },
+  { type: 'lua',            label: 'Lua Script',      params: [{ label: 'Script (a=input)',      key: 'script', type: 'lua',  default: 'return a' }] },
 ];
 
 interface PipelineNode {
@@ -160,12 +165,19 @@ export default function SyntheticEditor({ name, onClose, onSaved }: Props) {
                     {paramDefs.map(pd => (
                       <div key={pd.key} class="wizard-field wizard-field-inline">
                         <label>{pd.label}</label>
-                        <input
-                          class="prop-input"
-                          type={pd.type === 'number' ? 'number' : 'text'}
-                          value={node.params[pd.key] ?? pd.default}
-                          onInput={(e) => setNodeParam(idx, pd.key, (e.target as HTMLInputElement).value)}
-                        />
+                        {pd.type === 'lua' ? (
+                          <LuaEditor
+                            value={String(node.params[pd.key] ?? pd.default)}
+                            onChange={(v) => setNodeParam(idx, pd.key, v)}
+                          />
+                        ) : (
+                          <input
+                            class="prop-input"
+                            type={pd.type === 'number' ? 'number' : 'text'}
+                            value={node.params[pd.key] ?? pd.default}
+                            onInput={(e) => setNodeParam(idx, pd.key, (e.target as HTMLInputElement).value)}
+                          />
+                        )}
                       </div>
                     ))}
                   </div>
diff --git a/web/src/SyntheticWizard.tsx b/web/src/SyntheticWizard.tsx
index 4b62652..1c9ec5c 100644
--- a/web/src/SyntheticWizard.tsx
+++ b/web/src/SyntheticWizard.tsx
@@ -1,5 +1,6 @@
 import { h } from 'preact';
 import { useState } from 'preact/hooks';
+import LuaEditor from './LuaEditor';
 
 interface Props {
   onClose: () => void;
@@ -9,19 +10,23 @@ interface Props {
 interface NodeParam {
   label: string;
   key: string;
-  type: 'number' | 'text';
+  type: 'number' | 'text' | 'lua';
   default: string;
 }
 
 const NODE_TYPES: Array<{ type: string; label: string; params: NodeParam[] }> = [
-  { type: 'gain',           label: 'Gain',           params: [{ label: 'Factor',        key: 'gain',   type: 'number', default: '1' }] },
-  { type: 'offset',         label: 'Offset',         params: [{ label: 'Offset',        key: 'offset', type: 'number', default: '0' }] },
-  { type: 'moving_average', label: 'Moving Average', params: [{ label: 'Window (n)',    key: 'window', type: 'number', default: '10' }] },
-  { type: 'rms',            label: 'RMS',            params: [{ label: 'Window (n)',    key: 'window', type: 'number', default: '10' }] },
-  { type: 'derivative',     label: 'Derivative',     params: [] },
-  { type: 'clamp',          label: 'Clamp',          params: [{ label: 'Min', key: 'min', type: 'number', default: '0' }, { label: 'Max', key: 'max', type: 'number', default: '100' }] },
-  { type: 'expr',           label: 'Formula',        params: [{ label: 'Expression (a=input)', key: 'expr', type: 'text', default: 'a * 1.0' }] },
-  { type: 'lua',            label: 'Lua Script',     params: [{ label: 'Script (a=input)',      key: 'script', type: 'text', default: 'return a' }] },
+  { type: 'gain',           label: 'Gain',            params: [{ label: 'Factor',           key: 'gain',   type: 'number', default: '1' }] },
+  { type: 'offset',         label: 'Offset',          params: [{ label: 'Offset',           key: 'offset', type: 'number', default: '0' }] },
+  { type: 'moving_average', label: 'Moving Average',  params: [{ label: 'Window (n)',       key: 'window', type: 'number', default: '10' }] },
+  { type: 'rms',            label: 'RMS',             params: [{ label: 'Window (n)',       key: 'window', type: 'number', default: '10' }] },
+  { type: 'lowpass',        label: 'Low-pass Filter', params: [
+    { label: 'Cutoff freq (Hz)', key: 'freq',  type: 'number', default: '1' },
+    { label: 'Order (1–8)',      key: 'order', type: 'number', default: '1' },
+  ]},
+  { type: 'derivative',     label: 'Derivative',      params: [] },
+  { type: 'clamp',          label: 'Clamp',           params: [{ label: 'Min', key: 'min', type: 'number', default: '0' }, { label: 'Max', key: 'max', type: 'number', default: '100' }] },
+  { type: 'expr',           label: 'Formula',         params: [{ label: 'Expression (a=input)', key: 'expr',   type: 'text', default: 'a * 1.0' }] },
+  { type: 'lua',            label: 'Lua Script',      params: [{ label: 'Script (a=input)',      key: 'script', type: 'lua',  default: 'return a' }] },
 ];
 
 export default function SyntheticWizard({ onClose, onCreated }: Props) {
@@ -137,9 +142,16 @@ export default function SyntheticWizard({ onClose, onCreated }: Props) {
           {nodeDef.params.map(p => (
             <div key={p.key} class="wizard-field">
               <label>{p.label}</label>
-              <input class="prop-input" type={p.type === 'number' ? 'number' : 'text'}
-                value={getParam(p.key, p.default)}
-                onInput={(e) => setParam(p.key, (e.target as HTMLInputElement).value)} />
+              {p.type === 'lua' ? (
+                <LuaEditor
+                  value={getParam(p.key, p.default)}
+                  onChange={(v) => setParam(p.key, v)}
+                />
+              ) : (
+                <input class="prop-input" type={p.type === 'number' ? 'number' : 'text'}
+                  value={getParam(p.key, p.default)}
+                  onInput={(e) => setParam(p.key, (e.target as HTMLInputElement).value)} />
+              )}
             </div>
           ))}
 
diff --git a/web/src/ViewMode.tsx b/web/src/ViewMode.tsx
index 9a3fa33..68f2d2c 100644
--- a/web/src/ViewMode.tsx
+++ b/web/src/ViewMode.tsx
@@ -3,12 +3,13 @@ import { useState, useMemo, useEffect } from 'preact/hooks';
 import InterfaceList from './InterfaceList';
 import Canvas from './Canvas';
 import PlotPanel from './PlotPanel';
-import type { PlotSignal } from './PlotPanel';
+import type { PlotSignal, PlotSignalStyle } from './PlotPanel';
 import { wsClient } from './lib/ws';
 import { parseInterface } from './lib/xml';
 import type { Interface, SignalRef } from './lib/types';
 import ContextualHelp from './ContextualHelp';
 import HelpModal from './HelpModal';
+import ZoomControl from './ZoomControl';
 
 interface Props {
   onEdit?: (iface?: Interface) => void;
@@ -34,6 +35,22 @@ export default function ViewMode({ onEdit, initialInterface }: Props) {
   const [showTimeNav, setShowTimeNav] = useState(false);
   const [viewTab, setViewTab] = useState<ViewTab>('hmi');
   const [plotSignals, setPlotSignals] = useState<PlotSignal[]>([]);
+  const [leftW, setLeftW] = useState(220);
+
+  function startResize(e: MouseEvent) {
+    e.preventDefault();
+    const startX = e.clientX;
+    const startW = leftW;
+    function onMove(mv: MouseEvent) {
+      setLeftW(Math.max(140, startW + mv.clientX - startX));
+    }
+    function onUp() {
+      window.removeEventListener('mousemove', onMove);
+      window.removeEventListener('mouseup', onUp);
+    }
+    window.addEventListener('mousemove', onMove);
+    window.addEventListener('mouseup', onUp);
+  }
 
   function openHelp(section = 'start') { setHelpSection(section); setShowHelp(true); }
 
@@ -100,7 +117,8 @@ export default function ViewMode({ onEdit, initialInterface }: Props) {
     const already = plotSignals.some(s => `${s.ref.ds}\0${s.ref.name}` === key);
     if (!already) {
       const color = PLOT_COLORS[plotSignals.length % PLOT_COLORS.length];
-      setPlotSignals(prev => [...prev, { ref, color }]);
+      const style: PlotSignalStyle = { color, lineWidth: 1.5, lineDash: [], markerSize: 5 };
+      setPlotSignals(prev => [...prev, { ref, style }]);
     }
     setViewTab('plot');
   }
@@ -109,6 +127,12 @@ export default function ViewMode({ onEdit, initialInterface }: Props) {
     setPlotSignals(prev => prev.filter(s => !(s.ref.ds === ref.ds && s.ref.name === ref.name)));
   }
 
+  function updateSignalStyle(ref: SignalRef, style: PlotSignalStyle) {
+    setPlotSignals(prev => prev.map(s =>
+      s.ref.ds === ref.ds && s.ref.name === ref.name ? { ...s, style } : s
+    ));
+  }
+
   const isLive = timeRange === null;
 
   return (
@@ -145,6 +169,7 @@ export default function ViewMode({ onEdit, initialInterface }: Props) {
           >
             📖
           </button>
+          <ZoomControl />
           <button
             class="btn-edit"
             onClick={() => onEdit?.(currentInterface ?? undefined)}
@@ -195,6 +220,7 @@ export default function ViewMode({ onEdit, initialInterface }: Props) {
           onLoad={handleLoad}
           onEdit={onEdit}
           onEditId={handleEditById}
+          width={leftW}
           onSelect={async (id) => {
             try {
               const res = await fetch(`/api/v1/interfaces/${encodeURIComponent(id)}`);
@@ -206,6 +232,7 @@ export default function ViewMode({ onEdit, initialInterface }: Props) {
             }
           }}
         />
+        <div class="panel-resize-handle" onMouseDown={startResize} />
 
         <div class="view-content-area">
           {/* Tab bar */}
@@ -234,7 +261,7 @@ export default function ViewMode({ onEdit, initialInterface }: Props) {
             />
           </div>
           <div style={`display:${viewTab === 'plot' ? 'contents' : 'none'}`}>
-            <PlotPanel signals={plotSignals} onRemove={removeFromPlot} />
+            <PlotPanel signals={plotSignals} onRemove={removeFromPlot} onStyleChange={updateSignalStyle} />
           </div>
         </div>
       </div>
diff --git a/web/src/ZoomControl.tsx b/web/src/ZoomControl.tsx
new file mode 100644
index 0000000..08fdc89
--- /dev/null
+++ b/web/src/ZoomControl.tsx
@@ -0,0 +1,35 @@
+import { h } from 'preact';
+import { useState } from 'preact/hooks';
+
+const LS_KEY = 'uopi:ui-zoom';
+const STEPS = [0.5, 0.6, 0.75, 0.85, 1.0, 1.15, 1.3, 1.5, 1.75, 2.0, 2.5];
+
+export function getStoredZoom(): number {
+  const v = parseFloat(localStorage.getItem(LS_KEY) ?? '1');
+  return isFinite(v) ? Math.max(STEPS[0], Math.min(STEPS[STEPS.length - 1], v)) : 1;
+}
+
+export function applyZoom(z: number): number {
+  const clamped = Math.max(STEPS[0], Math.min(STEPS[STEPS.length - 1], z));
+  localStorage.setItem(LS_KEY, String(clamped));
+  document.documentElement.style.fontSize = `${Math.round(16 * clamped)}px`;
+  return clamped;
+}
+
+export default function ZoomControl() {
+  const [zoom, setZoom] = useState(getStoredZoom);
+
+  function step(dir: number) {
+    const idx = STEPS.findIndex(s => s >= zoom - 0.01);
+    const nextIdx = Math.max(0, Math.min(STEPS.length - 1, idx + dir));
+    setZoom(applyZoom(STEPS[nextIdx]));
+  }
+
+  return (
+    <div class="zoom-control" title="UI zoom">
+      <button class="icon-btn zoom-btn" onClick={() => step(-1)} title="Zoom out (smaller UI)">A−</button>
+      <span class="zoom-pct">{Math.round(zoom * 100)}%</span>
+      <button class="icon-btn zoom-btn" onClick={() => step(1)} title="Zoom in (larger UI)">A+</button>
+    </div>
+  );
+}
diff --git a/web/src/styles.css b/web/src/styles.css
index 032dbf5..819bbf1 100644
--- a/web/src/styles.css
+++ b/web/src/styles.css
@@ -5,6 +5,10 @@
   padding: 0;
 }
 
+html {
+  font-size: clamp(13px, 1.5vh, 18px);
+}
+
 body {
   background: #0f1117;
   color: #e2e8f0;
@@ -52,7 +56,7 @@ body {
   align-items: center;
   justify-content: space-between;
   padding: 0 1rem;
-  height: 44px;
+  height: 2.75rem;
   background: #1a1f2e;
   border-bottom: 1px solid #2d3748;
   flex-shrink: 0;
@@ -167,6 +171,22 @@ body {
   min-height: 0;
 }
 
+/* ── Panel resize handle ─────────────────────────────────────────────────── */
+
+.panel-resize-handle {
+  width: 5px;
+  flex-shrink: 0;
+  background: transparent;
+  cursor: ew-resize;
+  position: relative;
+  z-index: 10;
+  transition: background 0.15s;
+}
+.panel-resize-handle:hover,
+.panel-resize-handle.dragging {
+  background: #4a9eff55;
+}
+
 /* ── EditMode ──────────────────────────────────────────────────────────── */
 
 .edit-mode {
@@ -204,7 +224,7 @@ body {
   justify-content: space-between;
   padding: 0.5rem 0.5rem 0.5rem 0.75rem;
   border-bottom: 1px solid #2d3748;
-  min-height: 40px;
+  min-height: 2.5rem;
   flex-shrink: 0;
 }
 
@@ -472,7 +492,6 @@ body {
 .gauge-svg {
   width: 100%;
   flex: 1;
-  overflow: visible;
 }
 
 .gauge-value {
@@ -776,6 +795,12 @@ body {
   border-color: #4a9eff;
 }
 
+.sv-select {
+  flex: 1;
+  width: auto;
+  cursor: pointer;
+}
+
 .sv-current {
   font-family: ui-monospace, monospace;
   font-size: 0.85rem;
@@ -914,7 +939,7 @@ body {
 }
 
 .chart-area {
-  overflow: hidden;
+  overflow: visible;
 }
 
 /* uPlot dark overrides */
@@ -1301,9 +1326,13 @@ body {
   background: #1e2535;
   border: 1px solid #2d3748;
   border-radius: 8px;
-  width: 420px;
+  width: min(600px, 92vw);
+  min-width: 380px;
+  min-height: 440px;
   max-width: 95vw;
-  max-height: 90vh;
+  max-height: 92vh;
+  resize: both;
+  overflow: hidden;
   display: flex;
   flex-direction: column;
   box-shadow: 0 8px 32px rgba(0,0,0,0.5);
@@ -1374,6 +1403,68 @@ body {
 
 /* ── Synthetic Editor ────────────────────────────────────────────────────── */
 
+/* ── Lua editor ────────────────────────────────────────────────────────────── */
+
+.lua-editor {
+  position: relative;
+  border: 1px solid #3d4f6e;
+  border-radius: 4px;
+  overflow: hidden;
+  background: #0a0d14;
+  font-family: ui-monospace, 'Cascadia Code', 'Fira Code', monospace;
+  font-size: 12px;
+  line-height: 1.5;
+  min-height: 6em;
+}
+
+.lua-pre,
+.lua-textarea {
+  position: absolute;
+  inset: 0;
+  margin: 0;
+  padding: 6px 8px;
+  border: none;
+  outline: none;
+  overflow: auto;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  tab-size: 2;
+  font: inherit;
+  box-sizing: border-box;
+}
+
+.lua-pre {
+  color: #e2e8f0;
+  pointer-events: none;
+  z-index: 0;
+  overflow: hidden;
+}
+
+.lua-textarea {
+  color: transparent;
+  caret-color: #e2e8f0;
+  background: transparent;
+  resize: none;
+  z-index: 1;
+  width: 100%;
+  height: 100%;
+}
+
+.lua-textarea:focus {
+  outline: none;
+  box-shadow: inset 0 0 0 1px #4a9eff;
+}
+
+/* Syntax token colours */
+.lua-kw  { color: #c792ea; font-weight: 600; }
+.lua-str { color: #c3e88d; }
+.lua-cmt { color: #546e7a; font-style: italic; }
+.lua-num { color: #f78c6c; }
+
+/* wizard is already wide enough and resizable — no extra :has() rule needed */
+
+/* ── Synthetic pipeline ─────────────────────────────────────────────────────── */
+
 .synth-pipeline-node {
   background: #1a2234;
   border: 1px solid #2d3748;
@@ -2170,7 +2261,7 @@ kbd {
   align-items: center;
   gap: 2px;
   padding: 0 0.5rem;
-  height: 36px;
+  height: 2.25rem;
   background: #0f1117;
   border-bottom: 1px solid #1e293b;
   flex-shrink: 0;
@@ -2312,7 +2403,7 @@ kbd {
   align-items: center;
   gap: 0.5rem;
   padding: 0 0.75rem;
-  height: 40px;
+  height: 2.5rem;
   background: #0f1117;
   border-bottom: 1px solid #1e293b;
   flex-shrink: 0;
@@ -2350,7 +2441,11 @@ kbd {
 }
 
 .plot-panel-content {
-  display: contents;
+  display: flex;
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
 }
 
 .plot-panel-legend {
@@ -2394,6 +2489,21 @@ kbd {
   white-space: nowrap;
 }
 
+.plot-legend-icon-btn {
+  background: none;
+  border: none;
+  color: #475569;
+  cursor: pointer;
+  font-size: 0.75rem;
+  padding: 0 0.15rem;
+  line-height: 1;
+  opacity: 0.6;
+  border-radius: 3px;
+}
+.plot-legend-icon-btn:hover { opacity: 1; color: #94a3b8; }
+.plot-legend-icon-btn.active { opacity: 1; color: #4a9eff; }
+
+/* kept for back-compat — remove button is now .plot-legend-icon-btn */
 .plot-legend-rm {
   background: none;
   border: none;
@@ -2405,6 +2515,60 @@ kbd {
 }
 .plot-legend-rm:hover { opacity: 1; color: #f87171; }
 
+/* ── Per-signal style editor ────────────────────────────────────────────── */
+
+.plot-style-editor {
+  margin-top: 0.4rem;
+  padding-top: 0.4rem;
+  border-top: 1px solid #1e293b;
+  display: flex;
+  flex-direction: column;
+  gap: 0.3rem;
+}
+
+.plot-style-row {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+}
+
+.plot-style-label {
+  font-size: 0.68rem;
+  color: #64748b;
+  width: 2.8rem;
+  flex-shrink: 0;
+}
+
+.plot-style-color {
+  width: 28px;
+  height: 20px;
+  border: 1px solid #2d3748;
+  border-radius: 3px;
+  padding: 0;
+  cursor: pointer;
+  background: none;
+}
+
+.plot-style-btns {
+  display: flex;
+  gap: 2px;
+}
+
+.plot-style-btn {
+  background: #1e293b;
+  border: 1px solid #2d3748;
+  color: #64748b;
+  cursor: pointer;
+  font-size: 0.68rem;
+  padding: 1px 5px;
+  border-radius: 3px;
+  line-height: 1.4;
+  min-width: 1.6rem;
+  text-align: center;
+}
+.plot-style-btn:hover { color: #cbd5e1; border-color: #475569; }
+.plot-style-btn.active { background: #1e3a5f; border-color: #4a9eff; color: #e2e8f0; }
+
 .plot-stats-tbl {
   width: 100%;
   border-collapse: collapse;
@@ -2437,3 +2601,31 @@ kbd {
   width: 100% !important;
   height: 100% !important;
 }
+
+/* ── Zoom control ─────────────────────────────────────────────────────────── */
+
+.zoom-control {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+
+.zoom-btn {
+  background: #1e293b;
+  border: 1px solid #2d3748;
+  color: #94a3b8;
+  cursor: pointer;
+  font-size: 0.75rem;
+  padding: 2px 7px;
+  border-radius: 4px;
+  line-height: 1.4;
+}
+.zoom-btn:hover { color: #e2e8f0; border-color: #475569; background: #273244; }
+
+.zoom-pct {
+  font-size: 0.72rem;
+  color: #64748b;
+  width: 2.8rem;
+  text-align: center;
+  font-variant-numeric: tabular-nums;
+}
diff --git a/web/src/widgets/Gauge.tsx b/web/src/widgets/Gauge.tsx
index 4c47e93..827a41c 100644
--- a/web/src/widgets/Gauge.tsx
+++ b/web/src/widgets/Gauge.tsx
@@ -15,11 +15,12 @@ function qualityColor(q: string): string {
   }
 }
 
-// Arc: -135deg to +135deg (270deg total)
-const START_DEG = -135;
-const END_DEG = 135;
+// Arc: 135° (lower-left, 7 o'clock = min) → 45° (lower-right, 5 o'clock = max),
+// sweeping clockwise through the top (12 o'clock). 270° total sweep.
+const START_DEG = 135;
+const END_DEG = 45;
 const TOTAL_DEG = 270;
-const cx = 50, cy = 54, r = 38;
+const cx = 50, cy = 50, r = 38;
 
 function degToRad(deg: number) { return (deg * Math.PI) / 180; }
 function polarToXY(deg: number, radius: number) {
@@ -29,7 +30,9 @@ function polarToXY(deg: number, radius: number) {
 function arcPath(startDeg: number, endDeg: number, radius: number): string {
   const s = polarToXY(startDeg, radius);
   const e = polarToXY(endDeg, radius);
-  const largeArc = endDeg - startDeg > 180 ? 1 : 0;
+  // Compute the clockwise angular span so wrap-around works correctly.
+  const span = ((endDeg - startDeg) % 360 + 360) % 360;
+  const largeArc = span > 180 ? 1 : 0;
   return `M ${s.x} ${s.y} A ${radius} ${radius} 0 ${largeArc} 1 ${e.x} ${e.y}`;
 }
 function valueToDeg(v: number, minVal: number, maxVal: number): number {
@@ -91,16 +94,16 @@ export default function Gauge({ widget, onContextMenu }: Props) {
       onContextMenu={onContextMenu}
     >
       <span class="quality-dot" style={`background:${qualityColor(quality)};`} title={`Quality: ${quality}`} />
-      <svg viewBox="0 0 100 80" class="gauge-svg">
+      <svg viewBox="0 0 100 90" class="gauge-svg">
         <path d={bgPath} fill="none" stroke="#2d3748" stroke-width="6" stroke-linecap="round" />
         {fillPath && (
           <path d={fillPath} fill="none" stroke={fc} stroke-width="6" stroke-linecap="round" />
         )}
         <circle cx={needlePos.x} cy={needlePos.y} r="3" fill={fc} />
-        <text x={cx} y={cy + 10} text-anchor="middle" class="gauge-value">{displayValue()}</text>
-        {unit && <text x={cx} y={cy + 20} text-anchor="middle" class="gauge-unit">{unit}</text>}
-        <text x="12" y="76" text-anchor="middle" class="gauge-range">{minVal}</text>
-        <text x="88" y="76" text-anchor="middle" class="gauge-range">{maxVal}</text>
+        <text x={cx} y={cy + 6} text-anchor="middle" class="gauge-value">{displayValue()}</text>
+        {unit && <text x={cx} y={cy + 17} text-anchor="middle" class="gauge-unit">{unit}</text>}
+        <text x="14" y="80" text-anchor="middle" class="gauge-range">{minVal}</text>
+        <text x="86" y="80" text-anchor="middle" class="gauge-range">{maxVal}</text>
       </svg>
       {label && <div class="gauge-label">{label}</div>}
     </div>
diff --git a/web/src/widgets/PlotWidget.tsx b/web/src/widgets/PlotWidget.tsx
index 04c5bb4..9b2cd9d 100644
--- a/web/src/widgets/PlotWidget.tsx
+++ b/web/src/widgets/PlotWidget.tsx
@@ -18,7 +18,7 @@ interface SeriesBuffer {
   values: number[];
 }
 
-const RING_MAX = 4000;
+const RING_MAX = 200_000;
 const COLORS = ['#4a9eff', '#22c55e', '#f59e0b', '#ef4444', '#a78bfa', '#f472b6', '#34d399', '#fb923c'];
 
 const ECHARTS_DARK = {
@@ -91,6 +91,8 @@ export default function PlotWidget({ widget, onContextMenu, timeRange }: Props)
     // windowSec: apply rolling window for live mode; 0 = use full buffer (historical)
     function uplotData(windowSec = 0): uPlot.AlignedData {
       if (signals.length === 0) return [[]];
+      const cutoff = windowSec > 0 ? Date.now() / 1000 - windowSec : -Infinity;
+
       const allTs = new Set<number>();
       buffers.forEach(b => {
         const pts = windowSec > 0 ? windowedSlice(b, windowSec).ts : b.timestamps;
@@ -100,46 +102,68 @@ export default function PlotWidget({ widget, onContextMenu, timeRange }: Props)
       if (tsSorted.length === 0) {
         return [[], ...signals.map(() => [])] as uPlot.AlignedData;
       }
-      const tsMap = buffers.map(b => {
-        const m = new Map<number, number>();
-        const pts = windowSec > 0 ? windowedSlice(b, windowSec) : { ts: b.timestamps, vals: b.values };
-        pts.ts.forEach((t, i) => m.set(t, pts.vals[i]));
-        return m;
-      });
+
+      // Step-hold interpolation: carry the most recent sample forward so signals
+      // with different update rates align correctly on the shared time axis.
       return [
         tsSorted,
-        ...tsMap.map(m => tsSorted.map(t => m.get(t) ?? null)),
+        ...buffers.map(b => {
+          if (b.timestamps.length === 0) return tsSorted.map(() => null);
+          let bi = 0;
+          let hold: number | null = null;
+          while (bi < b.timestamps.length && b.timestamps[bi] < cutoff) {
+            hold = b.values[bi++];
+          }
+          return tsSorted.map(t => {
+            while (bi < b.timestamps.length && b.timestamps[bi] <= t) {
+              hold = b.values[bi++];
+            }
+            return hold;
+          });
+        }),
       ] as uPlot.AlignedData;
     }
 
     function makeUplotOpts(): uPlot.Options {
       const yAxis: uPlot.Axis = {
-        stroke: '#64748b',
+        stroke: '#94a3b8',
         grid: { stroke: '#2d3748' },
         ticks: { stroke: '#475569' },
+        size: 55,
       };
       if (fmt) {
         yAxis.values = (_u: uPlot, vals: (number | null)[]) =>
           vals.map(v => (v === null || v === undefined) ? '' : formatValue(v, fmt));
       }
+      const scaleYRange = (_u: uPlot, min: number, max: number): [number, number] => {
+        if (!isFinite(min) || !isFinite(max) || min === max) {
+          const mid = isFinite(min) ? min : 0;
+          return [mid - 1, mid + 1];
+        }
+        return [min, max];
+      };
       const seriesConf: uPlot.Series[] = [
         {},
-        ...signals.map((s, i) => ({
-          label: s.name,
-          stroke: s.color ?? COLORS[i % COLORS.length],
-          width: 1.5,
-        })),
+        ...signals.map((s, i) => {
+          const color = s.color ?? COLORS[i % COLORS.length];
+          return {
+            label: s.name,
+            stroke: color,
+            width: 1.5,
+            points: { show: true, size: 5, stroke: color, fill: color },
+          };
+        }),
       ];
       return {
         width: w,
-        height: h,
+        height: Math.max(50, h - legendH),
         series: seriesConf,
         legend: { show: showLegend },
         axes: [
-          { stroke: '#64748b', grid: { stroke: '#2d3748' }, ticks: { stroke: '#475569' } },
+          { stroke: '#94a3b8', grid: { stroke: '#2d3748' }, ticks: { stroke: '#475569' } },
           yAxis,
         ],
-        scales: { x: { time: true }, y: scaleY },
+        scales: { x: { time: true }, y: { ...scaleY, range: scaleYRange } },
       };
     }
 
@@ -247,6 +271,8 @@ export default function PlotWidget({ widget, onContextMenu, timeRange }: Props)
     const el = chartRef.current;
     const w = el.clientWidth || widget.w;
     const h = el.clientHeight || widget.h;
+    // Reserve vertical space for the uPlot legend so it isn't clipped.
+    const legendH = showLegend ? 30 : 0;
 
     const scaleY: uPlot.Scale = {};
     if (yMin !== undefined && yMin !== 'auto') scaleY.min = parseFloat(yMin);
@@ -334,7 +360,7 @@ export default function PlotWidget({ widget, onContextMenu, timeRange }: Props)
       const nw = chartRef.current.clientWidth;
       const nh = chartRef.current.clientHeight;
       if (nw > 0 && nh > 0) {
-        if (uplot) uplot.setSize({ width: nw, height: nh });
+        if (uplot) uplot.setSize({ width: nw, height: Math.max(50, nh - legendH) });
         if (echart) echart.resize();
       }
     });
@@ -346,7 +372,7 @@ export default function PlotWidget({ widget, onContextMenu, timeRange }: Props)
       if (uplot) uplot.destroy();
       if (echart) echart.dispose();
     };
-  }, [widget.id, timeRangeKey, plotType, signalsKey]);
+  }, [widget.id, timeRangeKey, plotType, signalsKey, widget.options['timeWindow'] ?? '60', widget.options['format'] ?? '', widget.options['yMin'] ?? '', widget.options['yMax'] ?? '']);
 
   return (
     <div
diff --git a/web/src/widgets/SetValue.tsx b/web/src/widgets/SetValue.tsx
index ac65970..82495c4 100644
--- a/web/src/widgets/SetValue.tsx
+++ b/web/src/widgets/SetValue.tsx
@@ -1,4 +1,4 @@
-import { h } from 'preact';
+import { h, Fragment } from 'preact';
 import { useState, useEffect } from 'preact/hooks';
 import { getSignalStore, getMetaStore } from '../lib/stores';
 import { wsClient } from '../lib/ws';
@@ -35,32 +35,40 @@ export default function SetValue({ widget, onContextMenu }: Props) {
   const unit = rawUnit === 'none' ? '' : (rawUnit || meta?.unit || '');
   const confirm = widget.options['confirm'] === 'true';
   const isNumeric = meta ? meta.type !== 'string' : true;
+  const isEnum = !!(meta?.enumStrings && meta.enumStrings.length > 0);
   const quality = sv.quality;
 
   function displayValue(): string {
     const v = sv.value;
     if (v === null || v === undefined) return '---';
+    if (isEnum && meta?.enumStrings) {
+      const idx = typeof v === 'number' ? Math.round(v) : parseInt(String(v), 10);
+      return meta.enumStrings[idx] ?? String(v);
+    }
     if (typeof v === 'number') {
       return Number.isFinite(v) ? v.toPrecision(4).replace(/\.?0+$/, '') : String(v);
     }
     return String(v);
   }
 
+  function doWrite(raw: string) {
+    if (!sigRef || !raw.trim()) return;
+    const val = isNumeric ? parseFloat(raw) : raw;
+    wsClient.write(sigRef, val);
+    setInputValue('');
+  }
+
   function handleSet() {
     if (!sigRef) return;
     const raw = inputValue.trim();
     if (!raw) return;
-
-    const doWrite = () => {
-      const val = isNumeric ? parseFloat(raw) : raw;
-      wsClient.write(sigRef, val);
-      setInputValue('');
-    };
-
     if (confirm) {
-      if (window.confirm(`Set ${label} to ${raw}?`)) doWrite();
+      const display = isEnum && meta?.enumStrings
+        ? meta.enumStrings[parseInt(raw, 10)] ?? raw
+        : raw;
+      if (window.confirm(`Set ${label} to ${display}?`)) doWrite(raw);
     } else {
-      doWrite();
+      doWrite(raw);
     }
   }
 
@@ -68,6 +76,24 @@ export default function SetValue({ widget, onContextMenu }: Props) {
     if (e.key === 'Enter') handleSet();
   }
 
+  const currentEnumIdx = isEnum && sv.value !== null
+    ? Math.round(typeof sv.value === 'number' ? sv.value : parseFloat(String(sv.value)))
+    : -1;
+
+  // Tracks the user's selection in the dropdown before they click Set
+  const [enumSelected, setEnumSelected] = useState(currentEnumIdx >= 0 ? String(currentEnumIdx) : '0');
+
+  function handleEnumSet() {
+    if (!sigRef) return;
+    const doEnumWrite = () => { wsClient.write(sigRef, parseFloat(enumSelected)); };
+    if (confirm) {
+      const display = meta?.enumStrings?.[parseInt(enumSelected, 10)] ?? enumSelected;
+      if (window.confirm(`Set ${label} to ${display}?`)) doEnumWrite();
+    } else {
+      doEnumWrite();
+    }
+  }
+
   return (
     <div
       class="setvalue"
@@ -76,17 +102,34 @@ export default function SetValue({ widget, onContextMenu }: Props) {
     >
       <span class="quality-dot" style={`background:${qualityColor(quality)};`} title={`Quality: ${quality}`} />
       <span class="sv-label">{label}:</span>
-      <input
-        class="sv-input"
-        type={isNumeric ? 'number' : 'text'}
-        value={inputValue}
-        onInput={(e: Event) => setInputValue((e.target as HTMLInputElement).value)}
-        onKeyDown={handleKeydown}
-        placeholder="value"
-      />
-      <span class="sv-current">{displayValue()}</span>
-      {unit && <span class="sv-unit">{unit}</span>}
-      <button class="sv-btn" onClick={handleSet}>Set</button>
+      {isEnum ? (
+        <>
+          <select
+            class="sv-input sv-select"
+            value={enumSelected}
+            onChange={(e: Event) => setEnumSelected((e.target as HTMLSelectElement).value)}
+          >
+            {meta!.enumStrings!.map((s, i) => (
+              <option key={i} value={String(i)}>{s}</option>
+            ))}
+          </select>
+          <button class="sv-btn" onClick={handleEnumSet}>Set</button>
+        </>
+      ) : (
+        <>
+          <input
+            class="sv-input"
+            type={isNumeric ? 'number' : 'text'}
+            value={inputValue}
+            onInput={(e: Event) => setInputValue((e.target as HTMLInputElement).value)}
+            onKeyDown={handleKeydown}
+            placeholder="value"
+          />
+          <span class="sv-current">{displayValue()}</span>
+          {unit && <span class="sv-unit">{unit}</span>}
+          <button class="sv-btn" onClick={handleSet}>Set</button>
+        </>
+      )}
     </div>
   );
 }