From 5ee368b504199d846da7e2f24b8f34be952ebc9d Mon Sep 17 00:00:00 2001
From: LucHeart <luc@luc.cat>
Date: Sat, 2 May 2026 23:39:12 +0200
Subject: [PATCH 1/9] add ctrl + click to live buttons

---
 .../ControlModules/LiveButton.svelte          | 84 +++++++++++--------
 .../ControlModules/impl/LiveSlider.svelte     | 16 ++--
 src/lib/state/live-control-state.svelte.ts    | 58 +++++++++++++
 src/routes/(app)/shockers/own/+page.svelte    | 26 ++----
 src/routes/(app)/shockers/shared/+page.svelte | 26 ++----
 src/routes/+layout.svelte                     | 39 +++++----
 .../public/[shareId=guid]/ControlView.svelte  | 64 ++++++--------
 7 files changed, 182 insertions(+), 131 deletions(-)

diff --git a/src/lib/components/ControlModules/LiveButton.svelte b/src/lib/components/ControlModules/LiveButton.svelte
index c47e3e7b..25fb48eb 100644
--- a/src/lib/components/ControlModules/LiveButton.svelte
+++ b/src/lib/components/ControlModules/LiveButton.svelte
@@ -1,53 +1,71 @@
 <script lang="ts">
   import { Loader } from '@lucide/svelte';
+  import * as Tooltip from '$lib/components/ui/tooltip';
   import {
-    type LiveDeviceConnection,
-    type LiveShockerState,
     LiveConnectionState,
+    getLiveConnection,
+    setHubLiveControl,
     toggleShockerLiveControl,
   } from '$lib/state/live-control-state.svelte';
 
   interface Props {
     hubId: string;
     shockerId: string;
-    isPaused: boolean;
-    connection?: LiveDeviceConnection;
-    liveState?: LiveShockerState;
     compact?: boolean;
   }
 
-  let { hubId, shockerId, isPaused, connection, liveState, compact = false }: Props = $props();
+  let { hubId, shockerId, compact = false }: Props = $props();
 
-  let isActive = $derived(
-    (liveState?.isLive ?? false) && connection?.state === LiveConnectionState.Connected
-  );
-  let isConnecting = $derived(
-    (liveState?.isLive ?? false) && connection?.state === LiveConnectionState.Connecting
-  );
-  let isDisabled = $derived(isPaused && !(liveState?.isLive ?? false));
+  let connection = $derived(getLiveConnection(hubId));
+  let liveState = $derived(connection?.getShockerState(shockerId));
+
+  let isLive = $derived(liveState?.isLive ?? false);
+  let isPaused = $derived(liveState?.isPaused ?? false);
+  let isActive = $derived(isLive && connection?.state === LiveConnectionState.Connected);
+  let isConnecting = $derived(isLive && connection?.state === LiveConnectionState.Connecting);
+  let isDisabled = $derived(isPaused && !isLive);
+
+  function onClick(event: MouseEvent) {
+    if (event.ctrlKey || event.metaKey) {
+      setHubLiveControl(hubId, !isLive);
+    } else {
+      toggleShockerLiveControl(hubId, shockerId);
+    }
+  }
 </script>
 
 <div class="flex items-center gap-1.5 {compact ? '' : 'mb-1'}">
-  <button
-    class="border-border text-muted-foreground hover:border-foreground hover:text-foreground cursor-pointer rounded border bg-transparent px-1.5 py-px text-[10px] font-bold tracking-wider transition-all duration-200
-      {isActive
-      ? 'bg-gradient-to-r from-[rgb(185,123,255)] to-[#e100ff] bg-clip-text text-transparent [border-image:linear-gradient(to_right,rgb(167,89,255),#e100ff)_1]'
-      : ''}
-      {isConnecting ? 'border-muted-foreground text-muted-foreground' : ''}
-      {isDisabled ? 'pointer-events-none opacity-40' : ''}"
-    onclick={() => toggleShockerLiveControl(hubId, shockerId)}
-    disabled={isDisabled}
-    title={isActive
-      ? `Live — ${connection?.gateway} (${connection?.country}) — ${connection?.latency}ms`
-      : isConnecting
-        ? 'Connecting...'
-        : 'Connect to Live Control'}
-  >
-    LIVE
-    {#if isConnecting}
-      <Loader class="inline size-3 animate-spin" />
-    {/if}
-  </button>
+  <Tooltip.Root>
+    <Tooltip.Trigger
+      onclick={onClick}
+      disabled={isDisabled}
+      class="border-border text-muted-foreground hover:border-foreground hover:text-foreground cursor-pointer rounded border bg-transparent px-1.5 py-px text-[10px] font-bold tracking-wider transition-all duration-200
+        {isActive
+        ? 'bg-gradient-to-r from-[rgb(185,123,255)] to-[#e100ff] bg-clip-text text-transparent [border-image:linear-gradient(to_right,rgb(167,89,255),#e100ff)_1]'
+        : ''}
+        {isConnecting ? 'border-muted-foreground text-muted-foreground' : ''}
+        {isDisabled ? 'pointer-events-none opacity-40' : ''}"
+    >
+      LIVE
+      {#if isConnecting}
+        <Loader class="inline size-3 animate-spin" />
+      {/if}
+    </Tooltip.Trigger>
+    <Tooltip.Content>
+      <div class="flex flex-col gap-0.5 text-xs">
+        <span>
+          {#if isActive}
+            Live — {connection?.gateway} ({connection?.country}) — {connection?.latency}ms
+          {:else if isConnecting}
+            Connecting...
+          {:else}
+            Connect to Live Control
+          {/if}
+        </span>
+        <span class="text-muted-foreground">Ctrl+click for whole hub</span>
+      </div>
+    </Tooltip.Content>
+  </Tooltip.Root>
   {#if isActive && connection && !compact}
     <span class="text-muted-foreground text-[10px]">
       {connection.gateway} ({connection.country}) — {connection.latency}ms
diff --git a/src/lib/components/ControlModules/impl/LiveSlider.svelte b/src/lib/components/ControlModules/impl/LiveSlider.svelte
index 4d8fd82f..2cdef036 100644
--- a/src/lib/components/ControlModules/impl/LiveSlider.svelte
+++ b/src/lib/components/ControlModules/impl/LiveSlider.svelte
@@ -72,7 +72,7 @@
 <div class="relative h-full w-full p-4 select-none">
   <div
     bind:this={container}
-    class="border-border relative h-full w-full cursor-pointer overflow-hidden rounded-md border"
+    class="relative h-full w-full cursor-pointer"
     onpointerdown={startDrag}
     onpointermove={onPointerMove}
     onpointerup={stopDrag}
@@ -85,13 +85,15 @@
     aria-label="Live intensity"
     tabindex="0"
   >
-    <!-- Fill from bottom -->
-    <div
-      class="bg-muted pointer-events-none absolute bottom-0 left-0 w-full transition-none"
-      style="height: {(1 - y) * 100}%"
-    ></div>
+    <!-- Rectangle with clipped fill -->
+    <div class="border-border absolute inset-0 overflow-hidden rounded-md border">
+      <div
+        class="bg-muted pointer-events-none absolute bottom-0 left-0 w-full transition-none"
+        style="height: {(1 - y) * 100}%"
+      ></div>
+    </div>
 
-    <!-- Handle -->
+    <!-- Handle (outside the clipped rectangle so text can overflow) -->
     <div
       class="pointer-events-none absolute -translate-x-1/2 -translate-y-1/2 rounded-full transition-none
         {liveState.isDragging
diff --git a/src/lib/state/live-control-state.svelte.ts b/src/lib/state/live-control-state.svelte.ts
index 119698de..5531d01d 100644
--- a/src/lib/state/live-control-state.svelte.ts
+++ b/src/lib/state/live-control-state.svelte.ts
@@ -16,6 +16,7 @@ export class LiveShockerState {
   intensity = $state(0);
   type = $state<ControlType>(ControlType.Vibrate);
   isLive = $state(false);
+  isPaused = $state(false);
 }
 
 export class LiveDeviceConnection {
@@ -44,6 +45,26 @@ export class LiveDeviceConnection {
     }
   }
 
+  /**
+   * Register the full set of shockers belonging to this hub. Updates pause state for
+   * existing entries, creates missing ones, and removes entries no longer present.
+   * Call from $effect or event handler.
+   */
+  registerHubShockers(shockers: { id: string; isPaused: boolean }[]): void {
+    const ids = new Set(shockers.map((s) => s.id));
+    for (const s of shockers) {
+      let state = this.shockers.get(s.id);
+      if (!state) {
+        state = new LiveShockerState();
+        this.shockers.set(s.id, state);
+      }
+      state.isPaused = s.isPaused;
+    }
+    for (const id of this.shockers.keys()) {
+      if (!ids.has(id)) this.shockers.delete(id);
+    }
+  }
+
   /**
    * Read-only getter, safe for templates. Returns undefined if not yet initialised.
    */
@@ -216,6 +237,43 @@ export function getLiveConnection(deviceId: string): LiveDeviceConnection | unde
   return liveConnections.get(deviceId);
 }
 
+/**
+ * Register a hub's shockers with the live-control state store. Idempotent.
+ */
+export function registerHubShockers(
+  deviceId: string,
+  shockers: { id: string; isPaused: boolean }[]
+): void {
+  ensureLiveConnection(deviceId);
+  liveConnections.get(deviceId)!.registerHubShockers(shockers);
+}
+
+/**
+ * Start or stop live control for every registered shocker in the hub at once.
+ * When starting, paused shockers are skipped. When stopping, every shocker is stopped.
+ */
+export async function setHubLiveControl(deviceId: string, isLive: boolean) {
+  const conn = liveConnections.get(deviceId);
+  if (!conn) return;
+
+  if (isLive) {
+    for (const state of conn.shockers.values()) {
+      if (!state.isPaused) state.isLive = true;
+    }
+    const anyLive = [...conn.shockers.values()].some((x) => x.isLive);
+    if (anyLive && conn.state === LiveConnectionState.Disconnected) {
+      await conn.connect();
+    }
+  } else {
+    for (const state of conn.shockers.values()) {
+      state.isLive = false;
+    }
+    if (conn.state !== LiveConnectionState.Disconnected) {
+      conn.disconnect();
+    }
+  }
+}
+
 export async function toggleShockerLiveControl(deviceId: string, shockerId: string) {
   ensureLiveConnection(deviceId);
   const conn = liveConnections.get(deviceId)!;
diff --git a/src/routes/(app)/shockers/own/+page.svelte b/src/routes/(app)/shockers/own/+page.svelte
index d791496b..5447a5f0 100644
--- a/src/routes/(app)/shockers/own/+page.svelte
+++ b/src/routes/(app)/shockers/own/+page.svelte
@@ -28,10 +28,10 @@
   import { registerBreadcrumbs } from '$lib/state/breadcrumbs-state.svelte';
   import { ownHubs, onlineHubs, refreshOwnHubs } from '$lib/state/hubs-state.svelte';
   import {
-    ensureLiveConnection,
     getLiveConnection,
     liveConnections,
     LiveConnectionState,
+    registerHubShockers,
   } from '$lib/state/live-control-state.svelte';
   import { PersistedState } from '$lib/state/classes/persisted-state.svelte';
   import { onMount } from 'svelte';
@@ -51,21 +51,16 @@
     )
   );
 
-  // Eagerly create LiveDeviceConnection and LiveShockerState entries
-  // so template reads never mutate state (Svelte 5 forbids mutation in $derived/templates).
+  // Register each hub's shockers with the live-control state store
   $effect(() => {
     const currentHubIds: string[] = [];
     for (const [hubId, hub] of ownHubs) {
       currentHubIds.push(hubId);
-      ensureLiveConnection(hubId);
-      const conn = getLiveConnection(hubId);
-      if (conn) {
-        for (const shocker of hub.shockers) {
-          conn.ensureShockerState(shocker.id);
-        }
-      }
+      registerHubShockers(
+        hubId,
+        hub.shockers.map((s) => ({ id: s.id, isPaused: s.isPaused }))
+      );
     }
-    // Clean up connections for hubs that no longer exist
     for (const [hubId, conn] of liveConnections) {
       if (!currentHubIds.includes(hubId)) {
         conn.disconnect();
@@ -162,14 +157,7 @@
     resume={() => ownResume(shocker.id)}
   >
     {#snippet live()}
-      <LiveButton
-        {hubId}
-        shockerId={shocker.id}
-        isPaused={shocker.isPaused}
-        connection={liveConn}
-        {liveState}
-        compact
-      />
+      <LiveButton {hubId} shockerId={shocker.id} compact />
     {/snippet}
     {#snippet menu()}
       <ShockerMenu {shocker} />
diff --git a/src/routes/(app)/shockers/shared/+page.svelte b/src/routes/(app)/shockers/shared/+page.svelte
index 93e983e1..d636cb47 100644
--- a/src/routes/(app)/shockers/shared/+page.svelte
+++ b/src/routes/(app)/shockers/shared/+page.svelte
@@ -12,10 +12,10 @@
   import { getConnection } from '$lib/signalr/user.svelte';
   import { serializeControlMessages } from '$lib/signalr/serializers/Control';
   import {
-    ensureLiveConnection,
     getLiveConnection,
     liveConnections,
     LiveConnectionState,
+    registerHubShockers,
   } from '$lib/state/live-control-state.svelte';
   import { sharedHubsState, refreshSharedHubs } from '$lib/state/shared-hubs-state.svelte';
   import { onMount } from 'svelte';
@@ -32,19 +32,18 @@
     if (conn) serializeControlMessages(conn, [{ id, type, intensity, duration }]);
   }
 
-  // Eagerly create LiveDeviceConnection and LiveShockerState entries
+  // Register each hub's shockers with the live-control state store
   $effect(() => {
     const currentDeviceIds: string[] = [];
     for (const owner of sharedHubsState.value) {
       for (const device of owner.devices) {
         currentDeviceIds.push(device.id);
-        ensureLiveConnection(device.id);
-        const conn = getLiveConnection(device.id);
-        if (conn) {
-          for (const shocker of device.shockers) {
-            conn.ensureShockerState(shocker.id);
-          }
-        }
+        registerHubShockers(
+          device.id,
+          device.shockers
+            .filter((s) => s.permissions.live)
+            .map((s) => ({ id: s.id, isPaused: s.isPaused }))
+        );
       }
     }
     for (const [deviceId, conn] of liveConnections) {
@@ -116,14 +115,7 @@
                   >
                     {#snippet live()}
                       {#if shocker.permissions.live}
-                        <LiveButton
-                          hubId={device.id}
-                          shockerId={shocker.id}
-                          isPaused={shocker.isPaused}
-                          connection={liveConn}
-                          {liveState}
-                          compact
-                        />
+                        <LiveButton hubId={device.id} shockerId={shocker.id} compact />
                       {/if}
                     {/snippet}
                     {#if isShockerLiveActive && liveState && liveConn}
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index d9fdb8ce..06df8ccb 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -4,6 +4,7 @@
   import { BasicTags, OpenGraphTags, TwitterSummaryTags } from '$lib/components/metadata';
   import { SidebarProvider } from '$lib/components/ui/sidebar';
   import { Toaster } from '$lib/components/ui/sonner';
+  import * as Tooltip from '$lib/components/ui/tooltip';
   import { buildMetaData } from '$lib/metadata';
   import { type Snippet } from 'svelte';
   import Footer from './Footer.svelte';
@@ -35,21 +36,23 @@
 
 <DialogManager />
 
-<SidebarProvider open={isOpen} onOpenChange={(v) => (sidebarOpen.value = v)}>
-  <Sidebar />
-  <div class="flex h-screen w-screen flex-1 flex-col overflow-hidden">
-    {#if PUBLIC_DEVELOPMENT_BANNER === 'true'}
-      <div class="top-0 left-0 z-1 flex-none bg-[orangered] text-center text-white">
-        <p>
-          This is the OpenShock <b>DEVELOPMENT</b> environment. <u>No data is saved</u>, and
-          regularly overwritten by production data
-        </p>
-      </div>
-    {/if}
-    <Header />
-    <main class="min-h-0 flex-1 overflow-x-hidden">
-      {@render children?.()}
-    </main>
-    <Footer />
-  </div>
-</SidebarProvider>
+<Tooltip.Provider delayDuration={250}>
+  <SidebarProvider open={isOpen} onOpenChange={(v) => (sidebarOpen.value = v)}>
+    <Sidebar />
+    <div class="flex h-screen w-screen flex-1 flex-col overflow-hidden">
+      {#if PUBLIC_DEVELOPMENT_BANNER === 'true'}
+        <div class="top-0 left-0 z-1 flex-none bg-[orangered] text-center text-white">
+          <p>
+            This is the OpenShock <b>DEVELOPMENT</b> environment. <u>No data is saved</u>, and
+            regularly overwritten by production data
+          </p>
+        </div>
+      {/if}
+      <Header />
+      <main class="min-h-0 flex-1 overflow-x-hidden">
+        {@render children?.()}
+      </main>
+      <Footer />
+    </div>
+  </SidebarProvider>
+</Tooltip.Provider>
diff --git a/src/routes/shares/public/[shareId=guid]/ControlView.svelte b/src/routes/shares/public/[shareId=guid]/ControlView.svelte
index 23a8cd71..24f8c149 100644
--- a/src/routes/shares/public/[shareId=guid]/ControlView.svelte
+++ b/src/routes/shares/public/[shareId=guid]/ControlView.svelte
@@ -12,10 +12,10 @@
   import type { Control } from '$lib/signalr/models/Control';
   import { ControlType } from '$lib/signalr/models/ControlType';
   import {
-    ensureLiveConnection,
     getLiveConnection,
     liveConnections,
     LiveConnectionState,
+    registerHubShockers,
   } from '$lib/state/live-control-state.svelte';
   import { onMount, untrack } from 'svelte';
   import { page } from '$app/state';
@@ -68,18 +68,17 @@
     )
   );
 
-  // Eagerly create LiveDeviceConnection and LiveShockerState entries
+  // Register each hub's shockers with the live-control state store
   $effect(() => {
     const currentDeviceIds: string[] = [];
     for (const device of shareLinkRoot.devices ?? []) {
       currentDeviceIds.push(device.id);
-      ensureLiveConnection(device.id);
-      const conn = getLiveConnection(device.id);
-      if (conn) {
-        for (const shocker of device.shockers) {
-          conn.ensureShockerState(shocker.id);
-        }
-      }
+      registerHubShockers(
+        device.id,
+        device.shockers
+          .filter((s) => s.permissions.live)
+          .map((s) => ({ id: s.id, isPaused: s.paused !== 0 }))
+      );
     }
     for (const [deviceId, conn] of liveConnections) {
       if (!currentDeviceIds.includes(deviceId)) {
@@ -112,26 +111,24 @@
         <Button variant="outline" href={editUrl}><Pencil /> Edit</Button>
       {/if}
 
-      <Tooltip.Provider>
-        <Tooltip.Root delayDuration={250}>
-          <Tooltip.Trigger>
-            <span
-              class="mr-10 flex flex-row items-center rounded-md px-4 py-2 outline-1 outline-gray-500"
-            >
-              <Avatar.Root class="h-10 w-10">
-                <Avatar.Image src={shareLinkRoot.author.image} alt="User Avatar" />
-                <Avatar.Fallback>
-                  {shareLinkRoot.author.name.charAt(0)}
-                </Avatar.Fallback>
-              </Avatar.Root>
-              <p class="ml-4">{shareLinkRoot.author.name}</p>
-            </span>
-          </Tooltip.Trigger>
-          <Tooltip.Content>
-            <p>Shared by</p>
-          </Tooltip.Content>
-        </Tooltip.Root>
-      </Tooltip.Provider>
+      <Tooltip.Root>
+        <Tooltip.Trigger>
+          <span
+            class="mr-10 flex flex-row items-center rounded-md px-4 py-2 outline-1 outline-gray-500"
+          >
+            <Avatar.Root class="h-10 w-10">
+              <Avatar.Image src={shareLinkRoot.author.image} alt="User Avatar" />
+              <Avatar.Fallback>
+                {shareLinkRoot.author.name.charAt(0)}
+              </Avatar.Fallback>
+            </Avatar.Root>
+            <p class="ml-4">{shareLinkRoot.author.name}</p>
+          </span>
+        </Tooltip.Trigger>
+        <Tooltip.Content>
+          <p>Shared by</p>
+        </Tooltip.Content>
+      </Tooltip.Root>
     </div>
   </div>
 
@@ -148,14 +145,7 @@
       >
         {#snippet live()}
           {#if shocker.permissions.live}
-            <LiveButton
-              hubId={deviceId}
-              shockerId={shocker.id}
-              isPaused={shocker.paused !== 0}
-              connection={liveConn}
-              {liveState}
-              compact
-            />
+            <LiveButton hubId={deviceId} shockerId={shocker.id} compact />
           {/if}
         {/snippet}
         {#if isShockerLiveActive && liveState && liveConn}

From fa2771ac9b1704f158044c11319461e315ae6d5e Mon Sep 17 00:00:00 2001
From: LucHeart <luc@luc.cat>
Date: Tue, 5 May 2026 04:05:50 +0200
Subject: [PATCH 2/9] add sloppa history graph

---
 package.json                                  |   2 +-
 .../ControlModules/impl/LiveSlider.svelte     | 111 +++++++++++++++++-
 2 files changed, 107 insertions(+), 6 deletions(-)

diff --git a/package.json b/package.json
index cb51bc39..673ce757 100644
--- a/package.json
+++ b/package.json
@@ -83,4 +83,4 @@
 		"defaults and fully supports es6-module"
 	],
 	"packageManager": "pnpm@10.33.2"
-}
\ No newline at end of file
+}
diff --git a/src/lib/components/ControlModules/impl/LiveSlider.svelte b/src/lib/components/ControlModules/impl/LiveSlider.svelte
index 2cdef036..a7f5a601 100644
--- a/src/lib/components/ControlModules/impl/LiveSlider.svelte
+++ b/src/lib/components/ControlModules/impl/LiveSlider.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { onDestroy, onMount } from 'svelte';
   import type { LiveShockerState } from '$lib/state/live-control-state.svelte';
 
   interface Props {
@@ -10,10 +11,109 @@
   let { liveState, maxIntensity = 100, onRelease }: Props = $props();
 
   let container: HTMLDivElement | undefined = $state();
+  let canvas: HTMLCanvasElement | undefined = $state();
   let y = $state(1);
 
   let intensity = $derived(Math.round((1 - y) * maxIntensity));
 
+  const WINDOW_MS = 3000;
+  const SAMPLE_INTERVAL_MS = 16;
+  const MAX_SAMPLES = Math.ceil(WINDOW_MS / SAMPLE_INTERVAL_MS) + 2;
+
+  const SMOOTHING_TAU_MS = 50;
+
+  const samples: { t: number; v: number }[] = [];
+  let smoothed = 0;
+  let lastFrameAt = 0;
+  let lastSampleAt = 0;
+  let rafId = 0;
+  let strokeColor = '#ffffff';
+
+  function pushSample(now: number) {
+    samples.push({ t: now, v: smoothed });
+    if (samples.length > MAX_SAMPLES) samples.shift();
+    lastSampleAt = now;
+  }
+
+  function draw(now: number) {
+    rafId = requestAnimationFrame(draw);
+    if (!canvas) return;
+
+    const dt = lastFrameAt === 0 ? 0 : now - lastFrameAt;
+    lastFrameAt = now;
+    const alpha = 1 - Math.exp(-dt / SMOOTHING_TAU_MS);
+    smoothed += (liveState.intensity - smoothed) * alpha;
+
+    if (now - lastSampleAt >= SAMPLE_INTERVAL_MS) pushSample(now);
+
+    const dpr = window.devicePixelRatio || 1;
+    const cssW = canvas.clientWidth;
+    const cssH = canvas.clientHeight;
+    const w = Math.round(cssW * dpr);
+    const h = Math.round(cssH * dpr);
+    if (canvas.width !== w || canvas.height !== h) {
+      canvas.width = w;
+      canvas.height = h;
+    }
+
+    const ctx = canvas.getContext('2d');
+    if (!ctx) return;
+    ctx.clearRect(0, 0, w, h);
+    if (samples.length < 2) return;
+
+    const SUBSTEPS = 1;
+    const toX = (t: number) => w - ((now - t) / WINDOW_MS) * w;
+    const toY = (v: number) => h - (Math.min(v, maxIntensity) / maxIntensity) * h;
+
+    ctx.beginPath();
+    const first = samples[0];
+    ctx.moveTo(toX(first.t), toY(first.v));
+    for (let i = 1; i < samples.length; i++) {
+      const a = samples[i - 1];
+      const b = samples[i];
+      const ax = toX(a.t);
+      const bx = toX(b.t);
+      const ay = toY(a.v);
+      const by = toY(b.v);
+      for (let s = 1; s <= SUBSTEPS; s++) {
+        const t = s / SUBSTEPS;
+        const e = t * t * (3 - 2 * t);
+        ctx.lineTo(ax + (bx - ax) * t, ay + (by - ay) * e);
+      }
+    }
+
+    const gradient = ctx.createLinearGradient(0, 0, w, 0);
+    gradient.addColorStop(0, 'transparent');
+    gradient.addColorStop(0.4, strokeColor);
+    gradient.addColorStop(1, strokeColor);
+
+    ctx.lineJoin = 'round';
+    ctx.lineCap = 'round';
+
+    // Outer blurred glow pass
+    ctx.save();
+    ctx.lineWidth = 8 * dpr;
+    ctx.strokeStyle = gradient;
+    ctx.globalAlpha = 0.35;
+    ctx.filter = `blur(${4 * dpr}px)`;
+    ctx.stroke();
+    ctx.restore();
+
+    // Crisp inner pass
+    ctx.lineWidth = 4 * dpr;
+    ctx.strokeStyle = gradient;
+    ctx.stroke();
+  }
+
+  onMount(() => {
+    const styles = getComputedStyle(canvas!);
+    strokeColor = styles.color || strokeColor;
+    pushSample(performance.now());
+    rafId = requestAnimationFrame(draw);
+  });
+
+  onDestroy(() => cancelAnimationFrame(rafId));
+
   function startDrag(event: PointerEvent) {
     if (!container) return;
     liveState.isDragging = true;
@@ -85,12 +185,13 @@
     aria-label="Live intensity"
     tabindex="0"
   >
-    <!-- Rectangle with clipped fill -->
+    <!-- Intensity-history graph: newest on the right, slides smoothly left over time -->
     <div class="border-border absolute inset-0 overflow-hidden rounded-md border">
-      <div
-        class="bg-muted pointer-events-none absolute bottom-0 left-0 w-full transition-none"
-        style="height: {(1 - y) * 100}%"
-      ></div>
+      <canvas
+        bind:this={canvas}
+        class="text-primary pointer-events-none absolute inset-0 h-full w-full"
+        aria-hidden="true"
+      ></canvas>
     </div>
 
     <!-- Handle (outside the clipped rectangle so text can overflow) -->

From 3c0cf3c5f8ab88fd7d0b42963ed398f10f8abd5c Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Tue, 19 May 2026 00:51:48 +0000
Subject: [PATCH 3/9] fix(live-control): disconnect when pruning live shocker
 state

When registerHubShockers removed a shocker that was still live (e.g. the
hub list refreshed without it, or shared permissions.live flipped off),
its isLive flag was dropped without going through disconnect. The tick
loop and WebSocket stayed open with nothing to send until the hub itself
unmounted. Clear the removed entry's runtime state and disconnect when
no live shockers remain.
---
 src/lib/state/live-control-state.svelte.ts | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/lib/state/live-control-state.svelte.ts b/src/lib/state/live-control-state.svelte.ts
index 5531d01d..c068dd16 100644
--- a/src/lib/state/live-control-state.svelte.ts
+++ b/src/lib/state/live-control-state.svelte.ts
@@ -60,8 +60,20 @@ export class LiveDeviceConnection {
       }
       state.isPaused = s.isPaused;
     }
-    for (const id of this.shockers.keys()) {
-      if (!ids.has(id)) this.shockers.delete(id);
+    let removedLive = false;
+    for (const [id, state] of this.shockers) {
+      if (ids.has(id)) continue;
+      if (state.isLive) removedLive = true;
+      state.isLive = false;
+      state.isDragging = false;
+      state.intensity = 0;
+      this.shockers.delete(id);
+    }
+    if (removedLive) {
+      const anyLive = [...this.shockers.values()].some((s) => s.isLive);
+      if (!anyLive && this.state !== LiveConnectionState.Disconnected) {
+        this.disconnect();
+      }
     }
   }
 

From 27f2ed8b8044e03b19b38f114db646b136323353 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Tue, 19 May 2026 00:59:57 +0000
Subject: [PATCH 4/9] fix(live-control): tighten LiveSlider graph + clarify
 hub-toggle tooltip

- Drop the SUBSTEPS=1 smoothstep loop in LiveSlider: with one substep
  the eased curve collapsed to a straight lineTo, so the inner loop was
  dead work. Use a direct lineTo per sample.
- Initialise the smoothing accumulator from the current intensity on
  mount so the line does not ramp up from zero when the component
  appears mid-session.
- Re-read the stroke color from computed style each frame so the graph
  follows theme changes without remounting.
- Spell out the ctrl-click action in the LiveButton tooltip so users
  see whether it will start or stop the hub from the current state.
---
 .../ControlModules/LiveButton.svelte          |  4 +++-
 .../ControlModules/impl/LiveSlider.svelte     | 20 ++++++-------------
 2 files changed, 9 insertions(+), 15 deletions(-)

diff --git a/src/lib/components/ControlModules/LiveButton.svelte b/src/lib/components/ControlModules/LiveButton.svelte
index 7a5adc11..2f133e4e 100644
--- a/src/lib/components/ControlModules/LiveButton.svelte
+++ b/src/lib/components/ControlModules/LiveButton.svelte
@@ -62,7 +62,9 @@
             Connect to Live Control
           {/if}
         </span>
-        <span class="text-muted-foreground">Ctrl+click for whole hub</span>
+        <span class="text-muted-foreground">
+          Ctrl+click to {isLive ? 'stop' : 'start'} the whole hub
+        </span>
       </div>
     </Tooltip.Content>
   </Tooltip.Root>
diff --git a/src/lib/components/ControlModules/impl/LiveSlider.svelte b/src/lib/components/ControlModules/impl/LiveSlider.svelte
index a7f5a601..1ee4f21b 100644
--- a/src/lib/components/ControlModules/impl/LiveSlider.svelte
+++ b/src/lib/components/ControlModules/impl/LiveSlider.svelte
@@ -61,7 +61,8 @@
     ctx.clearRect(0, 0, w, h);
     if (samples.length < 2) return;
 
-    const SUBSTEPS = 1;
+    strokeColor = getComputedStyle(canvas).color || strokeColor;
+
     const toX = (t: number) => w - ((now - t) / WINDOW_MS) * w;
     const toY = (v: number) => h - (Math.min(v, maxIntensity) / maxIntensity) * h;
 
@@ -69,17 +70,8 @@
     const first = samples[0];
     ctx.moveTo(toX(first.t), toY(first.v));
     for (let i = 1; i < samples.length; i++) {
-      const a = samples[i - 1];
-      const b = samples[i];
-      const ax = toX(a.t);
-      const bx = toX(b.t);
-      const ay = toY(a.v);
-      const by = toY(b.v);
-      for (let s = 1; s <= SUBSTEPS; s++) {
-        const t = s / SUBSTEPS;
-        const e = t * t * (3 - 2 * t);
-        ctx.lineTo(ax + (bx - ax) * t, ay + (by - ay) * e);
-      }
+      const s = samples[i];
+      ctx.lineTo(toX(s.t), toY(s.v));
     }
 
     const gradient = ctx.createLinearGradient(0, 0, w, 0);
@@ -106,8 +98,8 @@
   }
 
   onMount(() => {
-    const styles = getComputedStyle(canvas!);
-    strokeColor = styles.color || strokeColor;
+    strokeColor = getComputedStyle(canvas!).color || strokeColor;
+    smoothed = liveState.intensity;
     pushSample(performance.now());
     rafId = requestAnimationFrame(draw);
   });

From 36600d293fb7381e032b119c8011e4638bf335dd Mon Sep 17 00:00:00 2001
From: LucHeart <luc@luc.cat>
Date: Tue, 19 May 2026 03:06:12 +0200
Subject: [PATCH 5/9] fix lint

---
 src/lib/state/live-control-state.svelte.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/lib/state/live-control-state.svelte.ts b/src/lib/state/live-control-state.svelte.ts
index c068dd16..e34d08d6 100644
--- a/src/lib/state/live-control-state.svelte.ts
+++ b/src/lib/state/live-control-state.svelte.ts
@@ -1,7 +1,7 @@
 import { hubManagementV1Api } from '$lib/api';
 import { ControlType } from '$lib/signalr/models/ControlType';
 import { toast } from 'svelte-sonner';
-import { SvelteMap } from 'svelte/reactivity';
+import { SvelteMap, SvelteSet } from 'svelte/reactivity';
 
 const TICK_INTERVAL_MS = 100;
 
@@ -51,7 +51,7 @@ export class LiveDeviceConnection {
    * Call from $effect or event handler.
    */
   registerHubShockers(shockers: { id: string; isPaused: boolean }[]): void {
-    const ids = new Set(shockers.map((s) => s.id));
+    const ids = new SvelteSet(shockers.map((s) => s.id));
     for (const s of shockers) {
       let state = this.shockers.get(s.id);
       if (!state) {

From a1692e949cff0390b54c971ab6b23caa47b1082c Mon Sep 17 00:00:00 2001
From: HeavenVR <contact@heavenvr.tech>
Date: Tue, 19 May 2026 20:05:22 +0200
Subject: [PATCH 6/9] Update +layout.svelte

---
 src/routes/+layout.svelte | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 931ce819..896071e4 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -4,7 +4,7 @@
   import { BasicTags, OpenGraphTags, TwitterSummaryTags } from '$lib/components/metadata';
   import { SidebarProvider } from '$lib/components/ui/sidebar';
   import { Toaster } from '$lib/components/ui/sonner';
-  import * as Tooltip from '$lib/components/ui/tooltip';
+  import { TooltipProvider } from '$lib/components/ui/tooltip';
   import { buildMetaData } from '$lib/metadata';
   import { type Snippet } from 'svelte';
   import Footer from './Footer.svelte';
@@ -37,7 +37,7 @@
 
 <DialogManager />
 
-<Tooltip.Provider delayDuration={250}>
+<TooltipProvider delayDuration={250}>
   <SidebarProvider open={isOpen} onOpenChange={(v) => (sidebarOpen.value = v)}>
     <Sidebar />
     <div class="flex h-screen w-screen flex-1 flex-col overflow-hidden">
@@ -56,4 +56,4 @@
       <Footer />
     </div>
   </SidebarProvider>
-</Tooltip.Provider>
+</TooltipProvider>

From 0ae40cb5fce682c0ac8f9cd49b5f1884d6b0ea19 Mon Sep 17 00:00:00 2001
From: HeavenVR <contact@heavenvr.tech>
Date: Tue, 19 May 2026 20:22:32 +0200
Subject: [PATCH 7/9] derive hubIsLive from all hub shockers for ctrl+click
 toggle

---
 src/lib/components/ControlModules/LiveButton.svelte | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/ControlModules/LiveButton.svelte b/src/lib/components/ControlModules/LiveButton.svelte
index 2f133e4e..98a9c942 100644
--- a/src/lib/components/ControlModules/LiveButton.svelte
+++ b/src/lib/components/ControlModules/LiveButton.svelte
@@ -21,13 +21,16 @@
 
   let isLive = $derived(liveState?.isLive ?? false);
   let isPaused = $derived(liveState?.isPaused ?? false);
+  let hubIsLive = $derived(
+    connection ? [...connection.shockers.values()].some((s) => s.isLive) : false
+  );
   let isActive = $derived(isLive && connection?.state === LiveConnectionState.Connected);
   let isConnecting = $derived(isLive && connection?.state === LiveConnectionState.Connecting);
   let isDisabled = $derived(isPaused && !isLive);
 
   function onClick(event: MouseEvent) {
     if (event.ctrlKey || event.metaKey) {
-      setHubLiveControl(hubId, !isLive);
+      setHubLiveControl(hubId, !hubIsLive);
     } else {
       toggleShockerLiveControl(hubId, shockerId);
     }
@@ -63,7 +66,7 @@
           {/if}
         </span>
         <span class="text-muted-foreground">
-          Ctrl+click to {isLive ? 'stop' : 'start'} the whole hub
+          Ctrl+click to {hubIsLive ? 'stop' : 'start'} the whole hub
         </span>
       </div>
     </Tooltip.Content>

From 71cc1ae0fd55b8c1a01d9796f8920a0258cafe3b Mon Sep 17 00:00:00 2001
From: HeavenVR <contact@heavenvr.tech>
Date: Tue, 19 May 2026 20:23:12 +0200
Subject: [PATCH 8/9] cache strokeColor on mount instead of reading per frame

---
 src/lib/components/ControlModules/impl/LiveSlider.svelte | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/lib/components/ControlModules/impl/LiveSlider.svelte b/src/lib/components/ControlModules/impl/LiveSlider.svelte
index 1ee4f21b..017691b4 100644
--- a/src/lib/components/ControlModules/impl/LiveSlider.svelte
+++ b/src/lib/components/ControlModules/impl/LiveSlider.svelte
@@ -61,8 +61,6 @@
     ctx.clearRect(0, 0, w, h);
     if (samples.length < 2) return;
 
-    strokeColor = getComputedStyle(canvas).color || strokeColor;
-
     const toX = (t: number) => w - ((now - t) / WINDOW_MS) * w;
     const toY = (v: number) => h - (Math.min(v, maxIntensity) / maxIntensity) * h;
 

From 7c145b84a673a9fd444b549706f60aa1e6bd8046 Mon Sep 17 00:00:00 2001
From: HeavenVR <contact@heavenvr.tech>
Date: Tue, 19 May 2026 20:23:36 +0200
Subject: [PATCH 9/9] remove redundant TooltipProvider from layout

---
 src/routes/+layout.svelte | 39 ++++++++++++++++++---------------------
 1 file changed, 18 insertions(+), 21 deletions(-)

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 896071e4..1780ec24 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -4,7 +4,6 @@
   import { BasicTags, OpenGraphTags, TwitterSummaryTags } from '$lib/components/metadata';
   import { SidebarProvider } from '$lib/components/ui/sidebar';
   import { Toaster } from '$lib/components/ui/sonner';
-  import { TooltipProvider } from '$lib/components/ui/tooltip';
   import { buildMetaData } from '$lib/metadata';
   import { type Snippet } from 'svelte';
   import Footer from './Footer.svelte';
@@ -37,23 +36,21 @@
 
 <DialogManager />
 
-<TooltipProvider delayDuration={250}>
-  <SidebarProvider open={isOpen} onOpenChange={(v) => (sidebarOpen.value = v)}>
-    <Sidebar />
-    <div class="flex h-screen w-screen flex-1 flex-col overflow-hidden">
-      {#if PUBLIC_DEVELOPMENT_BANNER === 'true'}
-        <div class="top-0 left-0 z-1 flex-none bg-[orangered] text-center text-white">
-          <p>
-            This is the OpenShock <b>DEVELOPMENT</b> environment. <u>No data is saved</u>, and
-            regularly overwritten by production data
-          </p>
-        </div>
-      {/if}
-      <Header />
-      <main class="min-h-0 flex-1 overflow-x-hidden">
-        {@render children?.()}
-      </main>
-      <Footer />
-    </div>
-  </SidebarProvider>
-</TooltipProvider>
+<SidebarProvider open={isOpen} onOpenChange={(v) => (sidebarOpen.value = v)}>
+  <Sidebar />
+  <div class="flex h-screen w-screen flex-1 flex-col overflow-hidden">
+    {#if PUBLIC_DEVELOPMENT_BANNER === 'true'}
+      <div class="top-0 left-0 z-1 flex-none bg-[orangered] text-center text-white">
+        <p>
+          This is the OpenShock <b>DEVELOPMENT</b> environment. <u>No data is saved</u>, and
+          regularly overwritten by production data
+        </p>
+      </div>
+    {/if}
+    <Header />
+    <main class="min-h-0 flex-1 overflow-x-hidden">
+      {@render children?.()}
+    </main>
+    <Footer />
+  </div>
+</SidebarProvider>