igniter 0.5.1 → 0.5.2

data/packages/igniter-frontend/lib/igniter/frontend/tailwind/realtime/adapters.rb

@@ -1,226 +0,0 @@
-# frozen_string_literal: true
-
-require "json"
-
-module Igniter
-  module Frontend
-    module Tailwind
-      module Realtime
-        module Adapters
-          module_function
-
-          def compose_hook(name:, adapters:)
-            <<~JAVASCRIPT
-              (() => {
-                const bootstrapHandlers = [];
-                const overviewHandlers = [];
-                const activityHandlers = [];
-
-                #{adapters.compact.join("\n\n")}
-
-                window[#{JSON.generate(name)}] = (helpers, event) => {
-                  const phase = event?.phase;
-                  const payload = event?.payload || {};
-                  const handlers = phase === "bootstrap" ? bootstrapHandlers : phase === "overview" ? overviewHandlers : phase === "activity" ? activityHandlers : [];
-                  handlers.forEach((handler) => handler(helpers, payload, event));
-                };
-              })();
-            JAVASCRIPT
-          end
-
-          def prompt_buttons(textarea_id:, selector: "[data-chat-prompt]")
-            <<~JAVASCRIPT
-              bootstrapHandlers.push((_helpers, _payload, _event) => {
-                const textarea = document.getElementById(#{JSON.generate(textarea_id)});
-                if (!textarea) return;
-                document.querySelectorAll(#{JSON.generate(selector)}).forEach((button) => {
-                  button.addEventListener("click", () => {
-                    textarea.value = button.dataset.chatPrompt || "";
-                    textarea.focus();
-                  });
-                });
-              });
-            JAVASCRIPT
-          end
-
-          def device_presence(device_selector:, bootstrap_selector:, status_badge_selector_template:, last_seen_selector_template:,
-                              telemetry_selector_template:, topology_status_selector:, topology_counts_selector:,
-                              chart_id:, online_metric_id:, status_badge_base_class:)
-            <<~JAVASCRIPT
-              const devicePresenceState = {};
-
-              const refreshDevicePresenceTopologyHealth = (helpers) => {
-                const counts = {
-                  online: document.querySelector(`[data-chart-id="#{chart_id}"] [data-chart-value="online"]`)?.textContent || "0",
-                  stale: document.querySelector(`[data-chart-id="#{chart_id}"] [data-chart-value="stale"]`)?.textContent || "0",
-                  offline: document.querySelector(`[data-chart-id="#{chart_id}"] [data-chart-value="offline"]`)?.textContent || "0"
-                };
-
-                document.querySelectorAll(#{JSON.generate(topology_counts_selector)}).forEach((node) => {
-                  const status = node.dataset.topologyDeviceCount;
-                  node.textContent = `${status}=${counts[status] || 0}`;
-                });
-
-                const overall = Number(counts.offline) > 0 ? "degraded" : Number(counts.stale) > 0 ? "warning" : "healthy";
-                helpers.applyStatusBadge(document.querySelector(#{JSON.generate(topology_status_selector)}), overall, #{JSON.generate(status_badge_base_class)});
-              };
-
-              const updateDevicePresenceCard = (helpers, payload) => {
-                const deviceId = payload.device_id;
-                if (!deviceId) return;
-                const node = document.querySelector(#{JSON.generate(device_selector)}.replace("__ID__", deviceId));
-                if (!node) return;
-                const previous = devicePresenceState[deviceId] || node.dataset.deviceStatus || "offline";
-                if (previous !== "online") {
-                  if (previous === "offline") helpers.changeChart(#{JSON.generate(chart_id)}, "offline", -1);
-                  if (previous === "stale") helpers.changeChart(#{JSON.generate(chart_id)}, "stale", -1);
-                  helpers.changeChart(#{JSON.generate(chart_id)}, "online", 1);
-                  helpers.changeMetric(#{JSON.generate(online_metric_id)}, 1);
-                }
-                devicePresenceState[deviceId] = "online";
-                node.dataset.deviceStatus = "online";
-                helpers.applyStatusBadge(document.querySelector(#{JSON.generate(status_badge_selector_template)}.replace("__ID__", deviceId)), "online", #{JSON.generate(status_badge_base_class)});
-                const lastSeenNode = document.querySelector(#{JSON.generate(last_seen_selector_template)}.replace("__ID__", deviceId));
-                if (lastSeenNode) lastSeenNode.textContent = `last_seen=${helpers.humanAge(payload.occurred_at)}`;
-                const telemetryNode = document.querySelector(#{JSON.generate(telemetry_selector_template)}.replace("__ID__", deviceId));
-                if (telemetryNode) telemetryNode.textContent = `battery=${payload.battery ?? "-"} signal=${payload.signal ?? "-"} ip=${payload.ip || "-"}`;
-                refreshDevicePresenceTopologyHealth(helpers);
-              };
-
-              bootstrapHandlers.push((helpers, _payload, _event) => {
-                document.querySelectorAll(#{JSON.generate(bootstrap_selector)}).forEach((node) => {
-                  devicePresenceState[node.dataset.deviceId] = node.dataset.deviceStatus || "offline";
-                });
-                refreshDevicePresenceTopologyHealth(helpers);
-              });
-
-              overviewHandlers.push((helpers, _payload, _event) => {
-                refreshDevicePresenceTopologyHealth(helpers);
-              });
-
-              activityHandlers.push((helpers, payload, _event) => {
-                if (payload.type !== "device_heartbeat") return;
-                updateDevicePresenceCard(helpers, {
-                  device_id: payload.payload?.device_id || payload.title,
-                  battery: payload.payload?.battery,
-                  signal: payload.payload?.signal,
-                  ip: payload.payload?.ip,
-                  occurred_at: payload.occurred_at
-                });
-              });
-            JAVASCRIPT
-          end
-
-          def notes_list(selector:, item_class:, title_class:, muted_class:, limit:)
-            <<~JAVASCRIPT
-              const prependRealtimeNote = (helpers, payload) => {
-                const list = helpers.removeEmptyState(#{JSON.generate(selector)});
-                if (!list) return;
-                const item = document.createElement("li");
-                item.className = #{JSON.generate(item_class)};
-                item.innerHTML = `<strong class="#{escape_js(title_class)}">${payload.text || "Note added"}</strong><div class="#{escape_js(muted_class)} mt-2">source=${payload.source || "operator"} · created=${helpers.humanAge(payload.occurred_at)}</div>`;
-                list.prepend(item);
-                while (list.children.length > #{limit}) list.removeChild(list.lastChild);
-              };
-
-              activityHandlers.push((helpers, payload, _event) => {
-                if (payload.type !== "note") return;
-                prependRealtimeNote(helpers, { text: payload.detail, source: payload.source, occurred_at: payload.occurred_at });
-              });
-            JAVASCRIPT
-          end
-
-          def chat_transcript(selector:, item_class:, muted_class:, body_class:, status_badge_base_class:, limit:)
-            <<~JAVASCRIPT
-              const prependRealtimeChatTurn = (helpers, payload) => {
-                const list = helpers.removeEmptyState(#{JSON.generate(selector)});
-                if (!list) return;
-                const item = document.createElement("li");
-                item.className = #{JSON.generate(item_class)};
-                const badge = `<span class="#{escape_js(status_badge_base_class)} ${'${helpers.statusToneClass(payload.role || "assistant")}' }">${'${payload.role || "assistant"}'}</span>`;
-                item.innerHTML = `<div class="flex flex-wrap items-center gap-2">${'${badge}'}<span class="#{escape_js(muted_class)}">${'${payload.source || "dashboard"}'} · ${'${helpers.humanAge(payload.occurred_at)}'}</span></div><div class="#{escape_js(body_class)}">${'${payload.content || ""}'}</div>`;
-                list.prepend(item);
-                while (list.children.length > #{limit}) list.removeChild(list.lastChild);
-              };
-
-              activityHandlers.push((helpers, payload, _event) => {
-                if (payload.type !== "chat_turn") return;
-                prependRealtimeChatTurn(helpers, {
-                  role: payload.payload?.role || "assistant",
-                  source: payload.source,
-                  content: payload.payload?.content || payload.detail,
-                  occurred_at: payload.occurred_at
-                });
-              });
-            JAVASCRIPT
-          end
-
-          def camera_events_list(selector:, item_class:, title_class:, muted_class:, body_class:, limit:, motion_metric_id: nil)
-            motion_metric_js = if motion_metric_id
-                                 %(if (payload.payload?.motion === true) helpers.changeMetric(#{JSON.generate(motion_metric_id)}, 1);)
-                               else
-                                 ""
-                               end
-
-            <<~JAVASCRIPT
-              const prependRealtimeCameraEvent = (helpers, payload) => {
-                const list = helpers.removeEmptyState(#{JSON.generate(selector)});
-                if (!list) return;
-                const item = document.createElement("li");
-                item.className = #{JSON.generate(item_class)};
-                item.innerHTML = `<strong class="#{escape_js(title_class)}">${'${payload.device_id || "camera"}'}</strong><div class="#{escape_js(muted_class)} mt-2">motion=${'${payload.motion === true}'} · source=${'${payload.source || "esp32-cam"}'} · created=${'${helpers.humanAge(payload.occurred_at)}'}</div><div class="#{escape_js(body_class)}">${'${payload.summary || "(no summary yet)"}'}</div>`;
-                list.prepend(item);
-                while (list.children.length > #{limit}) list.removeChild(list.lastChild);
-              };
-
-              activityHandlers.push((helpers, payload, _event) => {
-                if (payload.type !== "camera_event") return;
-                #{motion_metric_js}
-                prependRealtimeCameraEvent(helpers, {
-                  device_id: payload.payload?.device_id || payload.title,
-                  motion: payload.payload?.motion === true,
-                  summary: payload.payload?.summary || payload.detail,
-                  source: payload.source,
-                  occurred_at: payload.occurred_at
-                });
-              });
-            JAVASCRIPT
-          end
-
-          def activity_timeline(selector:, item_class:, title_class:, muted_class:, link_class:, action_class:, limit:, source_urls:)
-            <<~JAVASCRIPT
-              const prependRealtimeTimelineEntry = (helpers, type, title, detail, occurredAt, sourceUrl, id) => {
-                const list = helpers.removeEmptyState(#{JSON.generate(selector)});
-                if (!list) return;
-                const href = id ? `/?timeline=${type}&focus=${id}` : "/";
-                const item = document.createElement("li");
-                item.className = #{JSON.generate(item_class)};
-                item.innerHTML = `<strong class="#{escape_js(title_class)}"><a href="${'${href}'}" class="#{escape_js(link_class)}">${'${type}'} · ${'${title}'}</a></strong><div class="#{escape_js(muted_class)} mt-2">${'${detail}'}</div><div class="#{escape_js(muted_class)} mt-2">${'${helpers.humanAge(occurredAt)}'}</div>${'${sourceUrl ? `<a href="${sourceUrl}" class="#{escape_js(action_class)}">open source</a>` : ""}'}`;
-                list.prepend(item);
-                while (list.children.length > #{limit}) list.removeChild(list.lastChild);
-              };
-
-              activityHandlers.push((helpers, payload, _event) => {
-                if (!["note", "camera_event", "device_heartbeat"].includes(payload.type)) return;
-                const sourceMap = #{JSON.generate(source_urls)};
-                prependRealtimeTimelineEntry(
-                  helpers,
-                  payload.type,
-                  payload.title,
-                  payload.detail,
-                  payload.occurred_at,
-                  sourceMap[payload.type] || null,
-                  payload.id
-                );
-              });
-            JAVASCRIPT
-          end
-
-          private_class_method def escape_js(value)
-            value.to_s.gsub("\\", "\\\\").gsub("\"", "\\\"")
-          end
-        end
-      end
-    end
-  end
-end

data/packages/igniter-frontend/lib/igniter/frontend/tailwind/realtime/presets.rb

@@ -1,147 +0,0 @@
-# frozen_string_literal: true
-
-module Igniter
-  module Frontend
-    module Tailwind
-      module Realtime
-        module Presets
-          class Preset
-            attr_reader :hook_name
-            attr_reader :projections
-            attr_reader :include_mermaid
-            attr_reader :extra_script
-
-            def initialize(hook_name:, projections:, include_mermaid:, extra_script:)
-              @hook_name = hook_name
-              @projections = projections
-              @include_mermaid = include_mermaid
-              @extra_script = extra_script
-            end
-
-            def render_head(head, config:)
-              Tailwind::Realtime.render_head(
-                head,
-                config: config,
-                projections: projections,
-                hook_name: hook_name,
-                include_mermaid: include_mermaid,
-                extra_script: extra_script
-              )
-            end
-          end
-
-          module_function
-
-          def operator_surface(hook_name:, projections:, adapters:, include_mermaid: false)
-            Preset.new(
-              hook_name: hook_name,
-              projections: projections,
-              include_mermaid: include_mermaid,
-              extra_script: Tailwind::Realtime::Adapters.compose_hook(name: hook_name, adapters: adapters)
-            )
-          end
-
-          def home_ops(theme:)
-            operator_surface(
-              hook_name: "homeLabRealtimeProjector",
-              include_mermaid: true,
-              projections: {
-                feed_limit: 6,
-                overview: {
-                  metrics: {
-                    "devices-online" => "counts.devices_online",
-                    "heartbeats" => "counts.device_heartbeats",
-                    "notes" => "counts.notes",
-                    "chat-turns" => "counts.chat_messages",
-                    "camera-events" => "counts.camera_events",
-                    "motion-events" => "counts.motion_events"
-                  },
-                  charts: {
-                    "device-status" => "charts.device_status",
-                    "activity-mix" => "charts.activity_mix",
-                    "app-roles" => "charts.app_roles"
-                  }
-                },
-                activity: {
-                  cases: {
-                    "note" => {
-                      metric_deltas: { "notes" => 1 },
-                      chart_deltas: { "activity-mix.notes" => 1 }
-                    },
-                    "camera_event" => {
-                      metric_deltas: { "camera-events" => 1 },
-                      chart_deltas: { "activity-mix.camera_events" => 1 }
-                    },
-                    "device_heartbeat" => {
-                      metric_deltas: { "heartbeats" => 1 },
-                      chart_deltas: { "activity-mix.heartbeats" => 1 }
-                    },
-                    "chat_turn" => {
-                      metric_deltas: { "chat-turns" => 1 },
-                      feed: false
-                    }
-                  }
-                }
-              },
-              adapters: [
-                Tailwind::Realtime::Adapters.prompt_buttons(
-                  textarea_id: "chat-message"
-                ),
-                Tailwind::Realtime::Adapters.device_presence(
-                  device_selector: "[data-device-id=\"__ID__\"]",
-                  bootstrap_selector: "[data-device-id]",
-                  status_badge_selector_template: "[data-device-status-badge=\"__ID__\"]",
-                  last_seen_selector_template: "[data-device-last-seen=\"__ID__\"]",
-                  telemetry_selector_template: "[data-device-telemetry=\"__ID__\"]",
-                  topology_status_selector: "[data-topology-overall-status='true']",
-                  topology_counts_selector: "[data-topology-device-count]",
-                  chart_id: "device-status",
-                  online_metric_id: "devices-online",
-                  status_badge_base_class: Tailwind::UI::StatusBadge::DEFAULT_BASE_CLASS
-                ),
-                Tailwind::Realtime::Adapters.notes_list(
-                  selector: "[data-notes-list='true']",
-                  item_class: theme.list_item_class,
-                  title_class: theme.item_title_class,
-                  muted_class: theme.muted_text_class(extra: "muted"),
-                  limit: 8
-                ),
-                Tailwind::Realtime::Adapters.chat_transcript(
-                  selector: "[data-chat-list='true']",
-                  item_class: theme.list_item_class,
-                  muted_class: theme.muted_text_class(extra: "muted"),
-                  body_class: theme.body_text_class(extra: "mt-3 whitespace-pre-wrap"),
-                  status_badge_base_class: Tailwind::UI::StatusBadge::DEFAULT_BASE_CLASS,
-                  limit: 10
-                ),
-                Tailwind::Realtime::Adapters.camera_events_list(
-                  selector: "[data-camera-events-list='true']",
-                  item_class: theme.list_item_class,
-                  title_class: theme.item_title_class,
-                  muted_class: theme.muted_text_class(extra: "muted"),
-                  body_class: theme.body_text_class(extra: "mt-2 text-stone-200"),
-                  motion_metric_id: "motion-events",
-                  limit: 8
-                ),
-                Tailwind::Realtime::Adapters.activity_timeline(
-                  selector: "[data-activity-timeline='true']",
-                  item_class: theme.list_item_class,
-                  title_class: theme.item_title_class,
-                  muted_class: theme.muted_text_class(extra: "muted"),
-                  link_class: "transition hover:text-amber-200",
-                  action_class: Tailwind::UI::Tokens.underline_link(theme: :amber, extra: "mt-3 inline-flex text-sm"),
-                  limit: 8,
-                  source_urls: {
-                    "note" => "http://127.0.0.1:4567/v1/notes",
-                    "camera_event" => "http://127.0.0.1:4570/v1/camera_events",
-                    "device_heartbeat" => "http://127.0.0.1:4570/v1/devices"
-                  }
-                )
-              ]
-            )
-          end
-        end
-      end
-    end
-  end
-end

data/packages/igniter-frontend/lib/igniter/frontend/tailwind/realtime.rb

@@ -1,259 +0,0 @@
-# frozen_string_literal: true
-
-require "json"
-
-require_relative "realtime/adapters"
-require_relative "realtime/presets"
-
-module Igniter
-  module Frontend
-    module Tailwind
-      module Realtime
-        module_function
-
-        def render_head(head, config:, projections:, hook_name: nil, include_mermaid: false, extra_script: nil)
-          head.tag(:script, src: Tailwind::MERMAID_CDN_URL) if include_mermaid
-          head.tag(:script, type: "text/javascript") do |script|
-            script.raw(client_script(config: config, projections: projections, hook_name: hook_name, include_mermaid: include_mermaid))
-          end
-          return unless extra_script
-
-          head.tag(:script, type: "text/javascript") do |script|
-            script.raw(extra_script)
-          end
-        end
-
-        def client_script(config:, projections:, hook_name: nil, include_mermaid: false)
-          <<~JAVASCRIPT
-            (() => {
-              const config = #{JSON.generate(config)};
-              const projections = #{JSON.generate(projections)};
-              const hookName = #{JSON.generate(hook_name)};
-              const includeMermaid = #{include_mermaid ? "true" : "false"};
-
-              const resolvePath = (payload, path) => {
-                if (!path) return undefined;
-                return String(path).split(".").reduce((memo, key) => memo == null ? undefined : memo[key], payload);
-              };
-
-              const chartValue = (chartId, key) => {
-                const node = document.querySelector(`[data-chart-id="${chartId}"] [data-chart-value="${key}"]`);
-                return Number(node?.textContent || 0);
-              };
-
-              const helpers = {
-                updateGeneratedAt(value) {
-                  document.querySelectorAll("[data-live-generated-at]").forEach((node) => {
-                    node.textContent = value;
-                  });
-                },
-
-                setMetric(metricId, value) {
-                  const node = document.querySelector(`[data-metric-value="${metricId}"]`);
-                  if (node) node.textContent = String(value);
-                },
-
-                metricValue(metricId) {
-                  const node = document.querySelector(`[data-metric-value="${metricId}"]`);
-                  return Number(node?.textContent || 0);
-                },
-
-                changeMetric(metricId, delta) {
-                  helpers.setMetric(metricId, Math.max(0, helpers.metricValue(metricId) + Number(delta || 0)));
-                },
-
-                updateChart(chartId, items) {
-                  const safeItems = Array.isArray(items) ? items : [];
-                  const max = safeItems.reduce((memo, item) => Math.max(memo, Number(item?.value || 0)), 0);
-                  safeItems.forEach((item) => {
-                    const key = String(item?.key || item?.label || "").toLowerCase().replace(/[^a-z0-9]+/g, "_");
-                    const valueNode = document.querySelector(`[data-chart-id="${chartId}"] [data-chart-value="${key}"]`);
-                    const fillNode = document.querySelector(`[data-chart-id="${chartId}"] [data-chart-fill="${key}"]`);
-                    if (valueNode) valueNode.textContent = String(item?.value || 0);
-                    if (fillNode) {
-                      const percent = max <= 0 ? 0 : (Number(item?.value || 0) / max) * 100;
-                      fillNode.style.width = `${percent}%`;
-                    }
-                  });
-                },
-
-                changeChart(chartId, key, delta) {
-                  const normalizedKey = String(key || "").toLowerCase().replace(/[^a-z0-9]+/g, "_");
-                  const nodes = document.querySelectorAll(`[data-chart-id="${chartId}"] [data-chart-value]`);
-                  const items = Array.from(nodes).map((node) => {
-                    const itemKey = node.dataset.chartValue;
-                    return {
-                      key: itemKey,
-                      value: itemKey === normalizedKey ? Math.max(0, chartValue(chartId, itemKey) + Number(delta || 0)) : chartValue(chartId, itemKey)
-                    };
-                  });
-                  helpers.updateChart(chartId, items);
-                },
-
-                appendFeed(label, detail, limit = 6, itemClass = null) {
-                  const feed = document.querySelector("[data-realtime-feed='true']");
-                  if (!feed) return;
-                  const placeholder = feed.querySelector("[data-empty-state='true']");
-                  if (placeholder) feed.removeChild(placeholder);
-                  const item = document.createElement("li");
-                  item.className = itemClass || feed.dataset.itemClass || "";
-                  item.textContent = `${label} · ${detail}`;
-                  feed.prepend(item);
-                  while (feed.children.length > limit) {
-                    feed.removeChild(feed.lastChild);
-                  }
-                },
-
-                removeEmptyState(selector) {
-                  const list = document.querySelector(selector);
-                  if (!list) return null;
-                  const placeholder = list.querySelector("[data-empty-state='true']");
-                  if (placeholder) list.removeChild(placeholder);
-                  return list;
-                },
-
-                humanAge(value) {
-                  if (!value) return "-";
-                  const seconds = Math.max(0, Math.floor((Date.now() - Date.parse(value)) / 1000));
-                  if (seconds < 10) return "just now";
-                  if (seconds < 60) return `${seconds}s ago`;
-                  const minutes = Math.floor(seconds / 60);
-                  if (minutes < 60) return `${minutes}m ago`;
-                  const hours = Math.floor(minutes / 60);
-                  if (hours < 24) return `${hours}h ago`;
-                  return `${Math.floor(hours / 24)}d ago`;
-                },
-
-                statusToneClass(label) {
-                  switch (String(label || "").toLowerCase()) {
-                    case "ready":
-                    case "configured":
-                    case "online":
-                    case "healthy":
-                      return "border-emerald-400/30 bg-emerald-400/10 text-emerald-200";
-                    case "warning":
-                    case "stale":
-                      return "border-amber-300/30 bg-amber-300/10 text-amber-100";
-                    case "degraded":
-                    case "offline":
-                      return "border-rose-300/30 bg-rose-300/10 text-rose-100";
-                    default:
-                      return "border-cyan-300/30 bg-cyan-300/10 text-cyan-100";
-                  }
-                },
-
-                applyStatusBadge(node, label, baseClass = "status-badge inline-flex items-center rounded-full border px-2.5 py-1 text-[11px] font-semibold uppercase tracking-[0.18em]") {
-                  if (!node) return;
-                  node.className = `${baseClass} ${helpers.statusToneClass(label)}`;
-                  node.textContent = String(label);
-                }
-              };
-
-              const callHook = (phase, payload) => {
-                if (!hookName) return;
-                const hook = window[hookName];
-                if (typeof hook === "function") hook(helpers, { phase, payload, projections, config });
-              };
-
-              const applyOverviewPayload = (payload) => {
-                helpers.updateGeneratedAt(payload.generated_at);
-                Object.entries(projections?.overview?.metrics || {}).forEach(([metricId, path]) => {
-                  const value = resolvePath(payload, path);
-                  if (value !== undefined) helpers.setMetric(metricId, value);
-                });
-                Object.entries(projections?.overview?.charts || {}).forEach(([chartId, path]) => {
-                  const value = resolvePath(payload, path);
-                  if (value !== undefined) helpers.updateChart(chartId, value);
-                });
-                if (projections?.overview?.feed !== false) {
-                  helpers.appendFeed("overview", `counts updated at ${payload.generated_at}`, projections?.feed_limit || 6);
-                }
-                callHook("overview", payload);
-              };
-
-              const applyActivityPayload = (payload) => {
-                const activityProjection = projections?.activity?.cases?.[payload.type] || {};
-                if (activityProjection.feed !== false) {
-                  helpers.appendFeed(payload.title || payload.type || "activity", payload.detail || payload.source || "updated", projections?.feed_limit || 6);
-                }
-                Object.entries(activityProjection.metric_deltas || {}).forEach(([metricId, delta]) => {
-                  helpers.changeMetric(metricId, delta);
-                });
-                Object.entries(activityProjection.chart_deltas || {}).forEach(([key, delta]) => {
-                  const [chartId, chartKey] = String(key).split(".", 2);
-                  helpers.changeChart(chartId, chartKey, delta);
-                });
-                callHook("activity", payload);
-              };
-
-              const refreshOverview = async () => {
-                try {
-                  const response = await fetch(config.overview_path, { headers: { "Accept": "application/json" } });
-                  if (!response.ok) return;
-                  applyOverviewPayload(await response.json());
-                } catch (error) {
-                  console.warn("igniter realtime refresh failed", error);
-                }
-              };
-
-              const connectStream = () => {
-                if (!window.EventSource) return false;
-                const stream = new window.EventSource(config.stream_path);
-                stream.addEventListener("overview", (event) => {
-                  try {
-                    applyOverviewPayload(JSON.parse(event.data));
-                  } catch (error) {
-                    console.warn("igniter realtime overview parse failed", error);
-                  }
-                });
-                stream.addEventListener("activity", (event) => {
-                  try {
-                    applyActivityPayload(JSON.parse(event.data));
-                  } catch (error) {
-                    console.warn("igniter realtime activity parse failed", error);
-                  }
-                });
-                stream.addEventListener("ping", (event) => {
-                  try {
-                    const payload = JSON.parse(event.data);
-                    helpers.updateGeneratedAt(payload.generated_at);
-                    helpers.appendFeed("ping", `heartbeat ${payload.generated_at}`, projections?.feed_limit || 6);
-                    callHook("ping", payload);
-                  } catch (error) {
-                    console.warn("igniter realtime ping parse failed", error);
-                  }
-                });
-                stream.addEventListener("error", () => {
-                  helpers.appendFeed("stream", "disconnected, polling fallback active", projections?.feed_limit || 6);
-                });
-                helpers.appendFeed("stream", `connected to ${config.stream_path}`, projections?.feed_limit || 6);
-                return true;
-              };
-
-              const setupMermaid = () => {
-                if (!includeMermaid) return;
-                const run = () => {
-                  if (window.mermaid && !window.__igniterMermaidReady) {
-                    window.__igniterMermaidReady = true;
-                    window.mermaid.initialize({ startOnLoad: true, theme: "dark", securityLevel: "loose" });
-                  }
-                };
-                if (window.mermaid) run();
-                window.addEventListener("load", run);
-              };
-
-              document.addEventListener("DOMContentLoaded", () => {
-                callHook("bootstrap", null);
-                setupMermaid();
-                const connected = connectStream();
-                if (!connected) {
-                  window.setInterval(refreshOverview, Number(config.poll_interval_seconds || 5) * 1000);
-                }
-              });
-            })();
-          JAVASCRIPT
-        end
-      end
-    end
-  end
-end