igniter 0.4.5 → 0.5.1

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

@@ -0,0 +1,226 @@
+# 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

@@ -0,0 +1,147 @@
+# 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

@@ -0,0 +1,259 @@
+# 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