better-rtplot 0.5.0__tar.gz → 0.6.1__tar.gz

{better_rtplot-0.5.0 → better_rtplot-0.6.1}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: better-rtplot
-Version: 0.5.0
+Version: 0.6.1
 Summary: 
 License: MIT
 License-File: LICENSE
@@ -132,6 +132,7 @@ A rising line now draws itself in the browser tab.
 - **Remote-friendly.** Sender or plot host can bind. Live Bind /
   Connect buttons retarget without restart.
 - **Config lives with the data.** The sender declares plot layout.
+- **Responsive presentation.** Native phone sizing, essential actions, compact navigation, and explicit semantic styles. See the [presentation guide](docs/presentation.md) and [before/after screenshots](docs/presentation-screenshots/README.md).
 - **Sections and runtime state.** Optional collapsible sections, persistent status controls, and presentation updates that preserve streaming history. See the [section API](docs/sections.md) and [workflow example](examples/06_sections/README.md).
 - **Interactive controls.** Buttons, sliders, dials, displays — polled
   from your loop, no threads, no callbacks.
@@ -158,3 +159,5 @@ A rising line now draws itself in the browser tab.
 Issues and feature requests:
 [github.com/jmontp/rtplot/issues](https://github.com/jmontp/rtplot/issues).
 
+Dropdown controls: [API and examples](docs/dropdowns.md).
+

{better_rtplot-0.5.0 → better_rtplot-0.6.1}/README.md

@@ -107,6 +107,7 @@ A rising line now draws itself in the browser tab.
 - **Remote-friendly.** Sender or plot host can bind. Live Bind /
   Connect buttons retarget without restart.
 - **Config lives with the data.** The sender declares plot layout.
+- **Responsive presentation.** Native phone sizing, essential actions, compact navigation, and explicit semantic styles. See the [presentation guide](docs/presentation.md) and [before/after screenshots](docs/presentation-screenshots/README.md).
 - **Sections and runtime state.** Optional collapsible sections, persistent status controls, and presentation updates that preserve streaming history. See the [section API](docs/sections.md) and [workflow example](examples/06_sections/README.md).
 - **Interactive controls.** Buttons, sliders, dials, displays — polled
   from your loop, no threads, no callbacks.
@@ -132,3 +133,5 @@ A rising line now draws itself in the browser tab.
 
 Issues and feature requests:
 [github.com/jmontp/rtplot/issues](https://github.com/jmontp/rtplot/issues).
+
+Dropdown controls: [API and examples](docs/dropdowns.md).

{better_rtplot-0.5.0 → better_rtplot-0.6.1}/pyproject.toml

@@ -1,6 +1,6 @@
 [tool.poetry]
 name = "better-rtplot"
-version = "0.5.0"
+version = "0.6.1"
 description = ""
 authors = ["jmontp <jmontp@umich.edu>"]
 license = "MIT"

{better_rtplot-0.5.0 → better_rtplot-0.6.1}/rtplot/client.py

@@ -3,7 +3,7 @@ import numpy as np
 import time
 import uuid
 import warnings
-from .ui_state import META_KEY, declarations, merge_state
+from .ui_state import META_KEY, declarations, merge_state, presentation_requested
 from collections import OrderedDict, namedtuple
 from dataclasses import dataclass, field
 from typing import List, Optional, Tuple, Union
@@ -162,6 +162,7 @@ class Plot:
     xrange: Optional[int] = None
     height: Optional[float] = None
     section: Optional[str] = None
+    min_height: Optional[int] = None
 
     def to_dict(self):
         return _drop_none({
@@ -176,7 +177,7 @@ class Plot:
             "yrange": _range_to_list(self.yrange),
             "xrange": self.xrange,
             "height": self.height,
-            "section": self.section,
+            "section": self.section, "min_height": self.min_height,
         })
 
 
@@ -209,11 +210,12 @@ class Button:
     label: str
     color: Optional[str] = None
     height: Optional[float] = None
+    appearance: Optional[str] = None
 
     def to_dict(self):
         return _drop_none({
             "type": "button", "id": self.id, "label": self.label,
-            "color": self.color, "height": self.height,
+            "color": self.color, "height": self.height, "appearance": self.appearance,
         })
 
 
@@ -267,11 +269,12 @@ class Display:
     label: str
     format: Optional[str] = None
     height: Optional[float] = None
+    appearance: Optional[str] = None
 
     def to_dict(self):
         return _drop_none({
             "type": "display", "id": self.id, "label": self.label,
-            "format": self.format, "height": self.height,
+            "format": self.format, "height": self.height, "appearance": self.appearance,
         })
 
 
@@ -281,11 +284,12 @@ class Text:
     label: str
     value: str = ""
     height: Optional[float] = None
+    appearance: Optional[str] = None
 
     def to_dict(self):
         return _drop_none({
             "type": "text", "id": self.id, "label": self.label,
-            "value": self.value, "height": self.height,
+            "value": self.value, "height": self.height, "appearance": self.appearance,
         })
 
 
@@ -306,18 +310,34 @@ class TextInput:
         })
 
 
+@dataclass
+class Dropdown:
+    """Single choice control. Omitted value selects the first option."""
+    id: str
+    label: str
+    options: List[Union[str, dict]]
+    value: Optional[str] = None
+    height: Optional[float] = None
+
+    def to_dict(self):
+        return _drop_none({"type": "dropdown", "id": self.id, "label": self.label,
+                           "options": self.options, "value": self.value, "height": self.height})
+
+
 @dataclass
 class ControlsRow:
     """A row of control widgets, rendered in place of a plot."""
-    controls: List[Union[Button, Slider, Dial, Display, Text, TextInput, dict]] = field(default_factory=list)
+    controls: List[Union[Button, Slider, Dial, Display, Text, TextInput, Dropdown, dict]] = field(default_factory=list)
 
     section: Optional[str] = None
+    title: Optional[str] = None
+    exclusive: Optional[bool] = None
 
     def to_dict(self):
         return _drop_none({"controls": [
             c.to_dict() if hasattr(c, "to_dict") else c
             for c in self.controls
-        ], "section": self.section})
+        ], "section": self.section, "title": self.title, "exclusive": self.exclusive})
 
 
 @dataclass
@@ -328,6 +348,9 @@ class Section:
     collapsible: bool = False
     collapsed: bool = False
     visible: bool = True
+    navigation: str = "primary"
+    density: str = "normal"
+    show_heading: bool = True
 
     def to_dict(self):
         return dict(vars(self))
@@ -337,11 +360,12 @@ class Section:
 class View:
     sections: List[Union[Section, dict]]
     persistent_section: Optional[str] = None
+    essential_controls: Optional[List[str]] = None
 
     def to_dict(self):
         return _drop_none({"sections": [s.to_dict() if hasattr(s, "to_dict") else s
                                         for s in self.sections],
-                           "persistent_section": self.persistent_section})
+                           "persistent_section": self.persistent_section, "essential_controls": self.essential_controls})
 
 
 def local_plot():
@@ -600,6 +624,15 @@ def initialize_plots(plot_descriptions=1, handshake_timeout=2.0, *, view=None, u
                       "confirm support: layout may be flat and disabled states are NOT enforced.",
                       RuntimeWarning, stacklevel=2)
 
+    if any(c["type"] == "dropdown" for c in _control_registry.values()) and "dropdown_v1" not in _server_capabilities:
+        warnings.warn("Dropdowns require rtplot browser server >= 0.6.1. This server did not "
+                      "confirm support; dropdown controls may be missing or unenforced.",
+                      RuntimeWarning, stacklevel=2)
+    if presentation_requested(plot_desc_dict, _view) and "presentation_v1" not in _server_capabilities:
+        warnings.warn("Presentation options require rtplot browser server >= 0.6.0. This server did not "
+                      "confirm support; essential placement, groups, and styling may be ignored.",
+                      RuntimeWarning, stacklevel=2)
+
 
 def _send_initialize_with_handshake(cfg, timeout):
     """Publish ``cfg`` and block until the server acks it.
@@ -752,12 +785,23 @@ def set_text_input(input_id: str, value):
     socket.send_json({"id": str(input_id), "value": str(value)})
 
 
+def set_dropdown(control_id: str, value: str):
+    """Select a declared option without rebuilding the layout (server >= 0.6.1)."""
+    control = _control_registry.get(control_id, {})
+    if control.get("type") != "dropdown" or value not in control["options"]:
+        raise ValueError("set_dropdown requires a dropdown ID and a declared string value")
+    if "dropdown_v1" not in _server_capabilities:
+        raise RuntimeError("set_dropdown requires rtplot browser server >= 0.6.1")
+    socket.send_string(SENDING_TEXT_INPUT, zmq.SNDMORE)
+    socket.send_json({"id": control_id, "value": value, "session": _session, "generation": _generation})
+
+
 def poll_controls():
     """Drain the return channel non-blocking and return current control state.
 
     Returns a ControlState(values, buttons) where:
       - values: dict of latest control values keyed by id. Sliders/dials
-        remain floats; text_input controls remain strings.
+        remain floats; text_input and dropdown controls remain strings.
       - buttons: list of button ids that fired since the previous poll
         (cleared after this call).
 

{better_rtplot-0.5.0 → better_rtplot-0.6.1}/rtplot/server_browser.py

@@ -622,6 +622,8 @@ def control_allowed(tab, payload, kind):
     state = {**CONTROL_DEFAULTS, **tab.ui_state.get("controls", {}).get(cid, {})}
     if not state["enabled"] or not state["visible"]:
         return False
+    if cid in tab.view.get("essential_controls", []):
+        return True
     sid = info.get("section")
     section = next((s for s in tab.view.get("sections", []) if s["id"] == sid), {})
     return tab.ui_state.get("sections", {}).get(sid, {}).get("visible", section.get("visible", True))
@@ -649,7 +651,8 @@ def _expand_config(config):
                 plots.append((f"{key}/{i}", child))
             layout.append({"kind": "row", "columns": columns, "plots": indices, "section": entry.get("section")})
         elif "controls" in entry:
-            layout.append({"kind": "controls", "index": len(controls), "section": entry.get("section")})
+            layout.append({"kind": "controls", "index": len(controls), "section": entry.get("section"),
+                           "title": entry.get("title"), "exclusive": entry.get("exclusive", False)})
             controls.append(entry["controls"])
         else:
             layout.append({"kind": "plot", "index": len(plots), "section": entry.get("section")})
@@ -673,8 +676,9 @@ def parse_config(tab: Tab, json_config):
         for element in row:
             if element.get("type") in ("slider", "dial") and "value" in element:
                 slider_values[element["id"]] = float(element["value"])
-            elif element.get("type") == "text_input":
-                text_values[element["id"]] = str(element.get("value", ""))
+            elif element.get("type") in ("text_input", "dropdown"):
+                default = registry[element["id"]]["options"][0] if element["type"] == "dropdown" else ""
+                text_values[element["id"]] = str(element.get("value", default))
 
     for plot_counter, (_, plot_description) in enumerate(plot_entries):
         trace_names = plot_description["names"]
@@ -714,10 +718,11 @@ def parse_config(tab: Tab, json_config):
         el["id"]
         for row in control_rows
         for el in row
-        if el.get("type") == "text_input"
+        if el.get("type") in ("text_input", "dropdown")
     }
     tab.text_values = {
-        text_id: tab.text_values.get(text_id, default_value)
+        text_id: (default_value if registry[text_id]["type"] == "dropdown"
+                  else tab.text_values.get(text_id, default_value))
         for text_id, default_value in text_values.items()
         if text_id in active_text_ids
     }
@@ -1261,6 +1266,12 @@ async def zmq_receiver(tab: Tab):
             if text_id is None:
                 continue
             value = str(payload.get("value", ""))
+            control = tab.control_registry.get(text_id, {})
+            if control.get("type") == "dropdown":
+                if (payload.get("session"), payload.get("generation")) != (tab.session, tab.generation):
+                    continue
+                if payload.get("value") not in control["options"]:
+                    continue
             if tab.text_values.get(text_id) != value:
                 tab.text_values[text_id] = value
                 tab.text_dirty.add(text_id)
@@ -1574,6 +1585,7 @@ _INDEX_HTML = _read_static_asset("index.html")
 for _asset in (
     "ui-view.js",
     "ui-view.css",
+    "presentation.css",
     "uPlot.min.css",
     "uPlot.iife.min.js",
     "katex/katex.min.css",
@@ -1697,8 +1709,13 @@ async def handle_ws(request):
                     text_id = payload.get("id")
                     tid = ws_tab.get(ws, BIND_ME_ID)
                     t = tabs.get(tid)
-                    if text_id and t is not None and control_allowed(t, payload, {"text_input"}):
+                    if text_id and t is not None and control_allowed(t, payload, {"text_input", "dropdown"}):
                         value = str(payload.get("value", ""))
+                        control = t.control_registry.get(text_id, {})
+                        if control.get("type") == "dropdown":
+                            if payload.get("value") not in control["options"]:
+                                continue
+                            t.text_dirty.add(text_id)
                         t.text_values[text_id] = value
                         refresh_config_message(t)
                         await send_control_event(

{better_rtplot-0.5.0 → better_rtplot-0.6.1}/rtplot/static/index.html

@@ -2,6 +2,7 @@
 <html lang="en">
 <head>
 <meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
 <title>rtplot</title>
 <link rel="stylesheet" href="/static/uPlot.min.css" />
 <link rel="stylesheet" href="/static/ui-view.css" />
@@ -143,6 +144,7 @@
   .res-stats .rs-tab .rs-hz { color: #2a5db0; font-weight: 500; }
   .res-unavail { font-size: calc(11px * var(--ui-scale)); color: #999; font-style: italic; }
 </style>
+<link rel="stylesheet" href="/static/presentation.css" />
 </head>
 <body>
   <div id="tabbar"></div>
@@ -154,12 +156,13 @@
   </div>
   <div id="header">
     <h1>rtplot</h1>
-    <div id="status" class="green">Rate: -- Hz</div>
-    <div id="zmq-mode">ZMQ: --</div>
     <div id="ws-status">connecting...</div>
     <button id="menu-btn" class="btn" title="Settings" aria-label="Settings">&#9776;</button>
   </div>
   <div id="menu-panel" aria-hidden="true">
+    <h2>Connection and performance</h2>
+    <div id="status" class="green">Rate: -- Hz</div>
+    <div id="zmq-mode">ZMQ: --</div>
     <h2>Settings</h2>
     <div class="menu-row">
       <label for="menu-font">UI font scale</label>
@@ -391,12 +394,25 @@
       }
       menuBtn.addEventListener('click', (e) => {
         e.stopPropagation();
-        menuPanel.classList.toggle('open');
+        const open = menuPanel.classList.toggle('open');
+        const top = Math.max(document.getElementById('header').getBoundingClientRect().bottom,
+                             viewManager?.sticky.getBoundingClientRect().bottom || 0) + 8;
+        menuPanel.style.top = `${top}px`;
+        menuPanel.style.maxHeight = `calc(100dvh - ${top + 8}px)`;
+        menuPanel.setAttribute('aria-hidden', String(!open));
+        menuBtn.setAttribute('aria-expanded', String(open));
+      });
+      document.addEventListener('keydown', e => {
+        if (e.key === 'Escape' && menuPanel.classList.contains('open')) {
+          menuPanel.classList.remove('open'); menuPanel.setAttribute('aria-hidden', 'true');
+          menuBtn.setAttribute('aria-expanded', 'false'); menuBtn.focus();
+        }
       });
       document.addEventListener('click', (e) => {
         if (!menuPanel.classList.contains('open')) return;
         if (menuPanel.contains(e.target) || menuBtn.contains(e.target)) return;
         menuPanel.classList.remove('open');
+        menuPanel.setAttribute('aria-hidden', 'true'); menuBtn.setAttribute('aria-expanded', 'false');
       });
       menuFontInput.addEventListener('input', () => {
         settings.fontScale = Number(menuFontInput.value);
@@ -445,14 +461,22 @@
       let activeLayout = null;
       const controlElements = { displays: {}, displayFormats: {}, displayKinds: {}, sliders: {}, textInputs: {} };
 
+      const presentationTargets = '.section-nav,.section-header,#header,#menu-panel,#tabbar,.uplot';
+      let presentationPointer = false;
+      document.addEventListener('pointerdown', e => {
+        presentationPointer = Boolean(e.target.closest(presentationTargets));
+        setTimeout(() => { presentationPointer = false; }, 0);
+      }, true);
       function sendCtrl(msg) {
         if (msg.type.startsWith('control_')) {
-          if (!viewManager || !viewManager.canInteract(msg.id)) return;
+          if (!viewManager || !viewManager.canInteract(msg.id)) return false;
           msg = {...msg, session: activeLayout?.session, generation: activeLayout?.generation};
         }
         if (socket && socket.readyState === WebSocket.OPEN) {
           socket.send(JSON.stringify(msg));
+          return true;
         }
+        return false;
       }
 
       function parseDisplayFormat(fmt) {
@@ -678,7 +702,7 @@
           const b = document.createElement('button');
           b.className = 'ctrl-btn';
           b.textContent = el.label || el.id;
-          if (el.color != null) {
+          if (el.color != null && (!el.appearance || el.appearance === 'default')) {
             const c = resolveColor(el.color);
             b.style.backgroundColor = c;
             b.style.borderColor = c;
@@ -718,6 +742,28 @@
           item.appendChild(val);
           controlElements.displays[el.id] = val;
           controlElements.displayKinds[el.id] = 'text';
+        } else if (el.type === 'dropdown') {
+          item.classList.add('ctrl-dropdown', 'flex');
+          const label = document.createElement('label');
+          label.textContent = el.label || el.id;
+          const select = document.createElement('select');
+          select.className = 'ctrl-textinput ctrl-select';
+          for (const choice of el.options) {
+            const option = document.createElement('option');
+            option.value = typeof choice === 'string' ? choice : choice.value;
+            option.textContent = typeof choice === 'string' ? choice : (choice.label ?? choice.value);
+            select.appendChild(option);
+          }
+          select.value = el.value ?? select.options[0].value;
+          let committed = select.value;
+          select.addEventListener('change', () => {
+            if (sendCtrl({type: 'control_text', id: el.id, value: select.value})) committed = select.value;
+            else select.value = committed;
+          });
+          select.setServerValue = value => { select.value = value; committed = value; };
+          label.appendChild(select);
+          item.appendChild(label);
+          controlElements.textInputs[el.id] = select;
         } else if (el.type === 'text_input') {
           item.classList.add('ctrl-text-input', 'flex');
           if (el.label) {
@@ -735,9 +781,16 @@
           if (el.max_length !== undefined && Number.isFinite(Number(el.max_length))) {
             input.maxLength = Number(el.max_length);
           }
-          const commit = () => sendCtrl({ type: 'control_text', id: el.id, value: input.value });
-          input.addEventListener('change', commit);
-          input.addEventListener('blur', commit);
+          let committed = input.value;
+          const commit = () => {
+            if (input.value === committed) return;
+            if (sendCtrl({ type: 'control_text', id: el.id, value: input.value })) committed = input.value;
+          };
+          input.addEventListener('blur', e => {
+            // Moving into presentation UI must preserve a draft without sending it.
+            if (presentationPointer || e.relatedTarget?.closest(presentationTargets)) return;
+            commit();
+          });
           input.addEventListener('keydown', (e) => {
             if (e.key === 'Enter') {
               e.preventDefault();
@@ -765,12 +818,20 @@
         }
       }
 
-      function buildControlRow(row, section) {
+      function buildControlRow(row, section, options={}) {
         const div = document.createElement('div');
         div.className = 'ctrl-row';
+        if (options.title) {
+          const title = document.createElement('h3'); title.className = 'control-group-title'; title.textContent = options.title;
+          div.appendChild(title); div.setAttribute('role', 'group'); div.setAttribute('aria-label', options.title);
+        }
+        if (options.exclusive) div.classList.add('exclusive-group');
         row.forEach(el => {
           const item = buildControlElement(el);
           applyElementSize(item, el);
+          item.dataset.appearance = el.appearance || 'default';
+          if (el.appearance === 'state') item.setAttribute('role', 'status');
+          item.querySelectorAll('input,select,svg.ctrl-dial').forEach(input => input.setAttribute('aria-label', el.label || el.id));
           div.appendChild(item);
           viewManager.register(el.id, item, section);
         });
@@ -789,7 +850,8 @@
         if (!values) return;
         for (const [id, val] of Object.entries(values)) {
           const input = controlElements.textInputs[id];
-          if (input) input.value = (val !== undefined && val !== null) ? String(val) : '';
+          if (input?.setServerValue) input.setServerValue(String(val));
+          else if (input) input.value = (val !== undefined && val !== null) ? String(val) : '';
         }
       }
 
@@ -850,11 +912,11 @@
 
         const series = [{}];
         for (let t = 0; t < traceCount; t++) {
-          const dash = (styles[t] === '-') ? [10, 5] : null;
+          const dash = ({'-': [10, 5], dashed: [10, 5], dotted: [2, 4], dashdot: [10, 4, 2, 4]})[styles[t]] || null;
           series.push({
             label: pcfg.names[t],
-            stroke: resolveColor(colors[t]),
-            width: widths[t] || 1,
+            stroke: resolveColor(colors[t] || DEFAULT_COLORS[t % DEFAULT_COLORS.length]),
+            width: (Array.isArray(widths) ? widths[t] : widths) || 1,
             dash: dash || undefined,
             points: { show: false },
             spanGaps: true,
@@ -864,16 +926,15 @@
 
         const baseHeight = rowLayout ? 260 : 320;
         const heightMul = Number(pcfg.height);
-        const plotHeight = (Number.isFinite(heightMul) && heightMul > 0)
-          ? Math.round(baseHeight * heightMul)
-          : baseHeight;
+        const plotHeight = Math.max(pcfg.min_height || 160, (Number.isFinite(heightMul) && heightMul > 0)
+          ? Math.round(baseHeight * heightMul) : baseHeight);
         const wrap = document.createElement('div');
         wrap.className = 'plot-wrap';
         parent.appendChild(wrap);
 
         let plotState = null;
         const opts = {
-          width: Math.max(240, wrap.clientWidth - 16),
+          width: Math.max(120, wrap.clientWidth - 16),
           height: plotHeight,
           title: pcfg.title || '',
           scales: {
@@ -886,6 +947,14 @@
           ],
           series: series,
           legend: { show: true },
+          hooks: { ready: [u => u.root.querySelectorAll('.u-legend .u-series').forEach((tr, i) => {
+            if (!i) return;
+            if (traceCount === 1 && pcfg.title === pcfg.names[0]) tr.querySelector('.u-label').classList.add('sr-only');
+            tr.tabIndex = 0; tr.setAttribute('role', 'button'); tr.setAttribute('aria-pressed', String(u.series[i].show)); tr.setAttribute('aria-label', `Toggle ${pcfg.names[i-1]}`);
+            tr.addEventListener('keydown', e => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); tr.querySelector('.u-label').click(); } });
+          })], setSeries: [u => u.root.querySelectorAll('.u-legend .u-series').forEach((tr, i) => {
+            if (i) tr.setAttribute('aria-pressed', String(u.series[i].show));
+          })] },
           cursor: { drag: { x: false, y: false } },
         };
 
@@ -929,7 +998,7 @@
           plots.forEach(p => {
             const visible = p.wrap.getClientRects().length > 0;
             if (visible) {
-              const width = Math.max(240, p.wrap.clientWidth - 16);
+              const width = Math.max(120, p.wrap.clientWidth - 16);
               if (!p.visible || Math.abs(p.uplot.width - width) > 1) {
                 p.uplot.setSize({width, height: p.height});
                 p.dataDirty = true; p.forceKeepScales = true;
@@ -956,6 +1025,7 @@
         function newRow(count, parent) {
           const row = document.createElement('div'); row.className = 'plot-row';
           row.style.setProperty('--plot-columns', Math.max(1, Math.floor(count)));
+          row.style.setProperty('--compact-columns', Math.max(1, Math.min(2, Math.floor(count))));
           parent.appendChild(row); return row;
         }
         // Trace offsets come ONLY from wire declaration order, never section/DOM order.
@@ -976,9 +1046,10 @@
             entry.plots.forEach(index => buildOnePlot(cfg.plots[index], entry.columns === 1, offsets[index], row));
           } else if (entry.kind === 'controls') {
             implicitRows.delete(parent);
-            parent.appendChild(buildControlRow(controls[entry.index], entry.section));
+            parent.appendChild(buildControlRow(controls[entry.index], entry.section, entry));
           }
         });
+        viewManager.finish();
         applySliderValues(cfg.slider_values); applyTextValues(cfg.text_values); applyDisplayValues(cfg.display_values);
         viewManager.apply(cfg.ui_state || {}, cfg.ui_revision ?? 0);
         renderLatexIn(plotsDiv); applyVisibleSamples(); refreshPresentation(); scheduleRender();
@@ -1140,8 +1211,10 @@
 
           // Stacked labels: name on top, endpoint on a muted subline so
           // users can see at a glance which tab is wired to which device.
-          const labels = document.createElement('div');
-          labels.className = 'tab-labels';
+          const labels = document.createElement('button');
+          labels.className = 'tab-labels tab-select';
+          labels.setAttribute('aria-label', `View ${t.name || id}`);
+          labels.addEventListener('click', e => { e.stopPropagation(); if (id !== activeTab) switchTab(id); });
           const name = document.createElement('span');
           name.className = 'tab-name';
           name.textContent = t.name || id;
@@ -1154,10 +1227,10 @@
           labels.appendChild(ep);
           el.appendChild(labels);
 
-          const reconnect = document.createElement('span');
+          const reconnect = document.createElement('button');
           reconnect.className = 'tab-reconnect';
           reconnect.textContent = '\u21BB';
-          reconnect.title = 'Reconnect';
+          reconnect.title = 'Reconnect'; reconnect.setAttribute('aria-label', `Reconnect ${t.name || id}`);
           reconnect.addEventListener('click', (e) => {
             e.stopPropagation();
             sendCtrl({ type: 'tab_reconnect', id: id });
@@ -1171,17 +1244,17 @@
           el.appendChild(reconnect);
 
           if (id !== 'bind_me') {
-            const ren = document.createElement('span');
+            const ren = document.createElement('button');
             ren.className = 'tab-rename';
             ren.textContent = '\u270E';
-            ren.title = 'Rename';
+            ren.title = 'Rename'; ren.setAttribute('aria-label', `Rename ${t.name || id}`);
             ren.addEventListener('click', (e) => { e.stopPropagation(); beginRename(el, id, t.name); });
             el.appendChild(ren);
 
-            const close = document.createElement('span');
+            const close = document.createElement('button');
             close.className = 'tab-close';
             close.textContent = '\u00D7';
-            close.title = 'Close tab';
+            close.title = 'Close tab'; close.setAttribute('aria-label', `Close ${t.name || id}`);
             close.addEventListener('click', (e) => {
               e.stopPropagation();
               if (confirm(`Close tab "${t.name || id}"?`)) {
@@ -1216,6 +1289,7 @@
         add.className = 'tab-add';
         add.textContent = '+ new device';
         add.title = 'Add a tab that connects to a remote device';
+        add.setAttribute('aria-label', 'Add data source');
         add.addEventListener('click', openCreateForm);
         tabbar.appendChild(add);
 
@@ -1231,10 +1305,15 @@
         input.type = 'text';
         input.className = 'tab-name-input';
         input.value = currentName || '';
-        nameSpan.replaceWith(input);
+        const selector = nameSpan.closest('.tab-select');
+        const original = selector || nameSpan;
+        original.replaceWith(input);
         input.focus();
         input.select();
+        let finished = false;
         const commit = () => {
+          if (finished) return;
+          finished = true;
           const newName = input.value.trim();
           if (newName && newName !== currentName) {
             sendCtrl({ type: 'tab_rename', id: id, name: newName });
@@ -1243,14 +1322,16 @@
             const span = document.createElement('span');
             span.className = 'tab-name';
             span.textContent = currentName || '';
-            input.replaceWith(span);
+            if (selector) { nameSpan.textContent = currentName || ''; input.replaceWith(selector); } else input.replaceWith(span);
           }
         };
         const cancel = () => {
+          if (finished) return;
+          finished = true;
           const span = document.createElement('span');
           span.className = 'tab-name';
           span.textContent = currentName || '';
-          input.replaceWith(span);
+          if (selector) { nameSpan.textContent = currentName || ''; input.replaceWith(selector); } else input.replaceWith(span);
         };
         input.addEventListener('keydown', (e) => {
           if (e.key === 'Enter') { e.preventDefault(); commit(); }
@@ -1339,13 +1420,13 @@
         const proto = location.protocol === 'https:' ? 'wss:' : 'ws:';
         socket = new WebSocket(proto + '//' + location.host + '/ws');
         socket.binaryType = 'arraybuffer';
-        socket.onopen = () => { wsStatus.textContent = 'connected'; };
+        socket.onopen = () => { wsStatus.textContent = 'Server connected'; wsStatus.dataset.health = 'connected'; };
         socket.onclose = () => {
-          wsStatus.textContent = 'disconnected, retrying...';
+          wsStatus.textContent = 'Reconnecting…'; wsStatus.dataset.health = 'disconnected';
           if (viewManager) viewManager.connection(false);
           setTimeout(connect, 1000);
         };
-        socket.onerror = () => { wsStatus.textContent = 'error'; };
+        socket.onerror = () => { wsStatus.textContent = 'Connection error'; wsStatus.dataset.health = 'disconnected'; };
         socket.onmessage = (ev) => {
           if (typeof ev.data === 'string') {
             let msg;