@pulse-js/tools 0.2.0 → 0.3.0

package/dist/index.js

@@ -1,5 +1,145 @@
-// src/pulse-inspector.ts
+// src/agent.ts
 import { PulseRegistry } from "@pulse-js/core";
+var PulseAgent = class _PulseAgent {
+  static instance;
+  listeners = /* @__PURE__ */ new Set();
+  registryUnsubscribe = null;
+  unsubs = /* @__PURE__ */ new Map();
+  broadcastTimer = null;
+  constructor() {
+    this.setupRegistryObserver();
+  }
+  static getInstance() {
+    if (!this.instance) {
+      this.instance = new _PulseAgent();
+    }
+    return this.instance;
+  }
+  setupRegistryObserver() {
+    this.syncSubscriptions();
+    this.registryUnsubscribe = PulseRegistry.onRegister(() => {
+      this.syncSubscriptions();
+      this.broadcastStateDebounced();
+    });
+  }
+  /**
+   * Synchronizes subscriptions with the registry.
+   */
+  syncSubscriptions() {
+    const units = PulseRegistry.getAllWithMeta();
+    units.forEach(({ unit, uid }) => {
+      if (!this.unsubs.has(uid)) {
+        const subscribeFn = unit.subscribe || unit.$subscribe;
+        if (typeof subscribeFn === "function") {
+          const unsub = subscribeFn.call(unit, () => {
+            this.broadcastStateDebounced();
+          });
+          this.unsubs.set(uid, unsub);
+        }
+      }
+    });
+  }
+  /**
+   * Debounced broadcast to avoid rapid-fire messages.
+   */
+  broadcastStateDebounced() {
+    if (this.broadcastTimer) clearTimeout(this.broadcastTimer);
+    this.broadcastTimer = setTimeout(() => {
+      this.broadcastState();
+      this.broadcastTimer = null;
+    }, 50);
+  }
+  /**
+   * Broadcasts the current state of all registered units.
+   */
+  broadcastState() {
+    const units = PulseRegistry.getAllWithMeta();
+    const payload = units.map(({ unit, uid }) => {
+      const isGuard = unit.state;
+      const state = isGuard ? unit.explain() : { value: unit() };
+      return this.serialize({
+        uid,
+        name: unit._name || unit.name || "unnamed",
+        type: isGuard ? "guard" : "source",
+        ...state
+      });
+    });
+    this.emit({
+      type: "STATE_UPDATE",
+      payload
+    });
+  }
+  /**
+   * Recursively strips non-cloneable values (functions) from an object.
+   */
+  serialize(obj) {
+    if (obj === null || typeof obj !== "object") {
+      return typeof obj === "function" ? void 0 : obj;
+    }
+    if (Array.isArray(obj)) {
+      return obj.map((item) => this.serialize(item));
+    }
+    const cleaned = {};
+    for (const key in obj) {
+      const val = this.serialize(obj[key]);
+      if (val !== void 0) {
+        cleaned[key] = val;
+      }
+    }
+    return cleaned;
+  }
+  /**
+   * Emits an event to any connected clients.
+   */
+  emit(event) {
+    if (typeof window !== "undefined") {
+      try {
+        window.postMessage({ source: "pulse-agent", ...event }, "*");
+      } catch (e) {
+        console.error("[Pulse Agent] Failed to emit state update:", e);
+      }
+    }
+    this.listeners.forEach((l) => l(event));
+  }
+  /**
+   * Connect a local listener (useful for the same-page UI).
+   */
+  onEvent(listener) {
+    this.listeners.add(listener);
+    return () => this.listeners.delete(listener);
+  }
+  /**
+   * Handles an action from the DevTools UI.
+   */
+  handleAction(action) {
+    const unit = action.uid ? PulseRegistry.get(action.uid) : null;
+    if (!unit) return;
+    switch (action.type) {
+      case "RESET_GUARD":
+        if (unit._evaluate) unit._evaluate();
+        break;
+      case "SET_SOURCE_VALUE":
+        if (unit.set) unit.set(action.payload);
+        break;
+    }
+  }
+  dispose() {
+    if (this.registryUnsubscribe) this.registryUnsubscribe();
+    this.unsubs.forEach((unsub) => unsub());
+    this.unsubs.clear();
+    this.listeners.clear();
+  }
+};
+if (typeof window !== "undefined" && window.process?.env?.NODE_ENV !== "production") {
+  PulseAgent.getInstance();
+  window.addEventListener("message", (event) => {
+    if (event.data?.source === "pulse-ui") {
+      PulseAgent.getInstance().handleAction(event.data.action);
+    }
+  });
+}
+
+// src/inspector.ts
 var COLORS = {
   bg: "rgba(13, 13, 18, 0.96)",
   border: "rgba(255, 255, 255, 0.1)",
@@ -14,14 +154,6 @@ var COLORS = {
   cardHover: "rgba(255, 255, 255, 0.08)",
   inputBg: "rgba(0,0,0,0.3)"
 };
-var ICONS = {
-  tree: `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12h-4l-3 8-4-16-3 8H2"/></svg>`,
-  list: `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/></svg>`,
-  chevronRight: `<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>`,
-  chevronDown: `<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 9l6 6 6-6"/></svg>`,
-  edit: `<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>`,
-  refresh: `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21.5 2v6h-6M2.5 22v-6h6M2 11.5a10 10 0 0 1 18.8-4.3M22 12.5a10 10 0 0 1-18.8 4.2"/></svg>`
-};
 var STORAGE_KEY = "pulse-devtools-state";
 var PulseInspector = class extends HTMLElement {
   shadow;
@@ -29,49 +161,29 @@ var PulseInspector = class extends HTMLElement {
   // State
   state = {
     pos: { x: window.innerWidth - 360, y: 20 },
-    isOpen: true,
-    activeTab: "inspector",
-    expandedNodes: []
+    isOpen: true
   };
   isDragging = false;
   offset = { x: 0, y: 0 };
-  editingUnit = null;
-  editValue = "";
-  unsubscribeRegistry;
-  unitSubscriptions = /* @__PURE__ */ new Map();
-  shortcut = "Ctrl+M";
-  // Default shortcut
+  totalDragDistance = 0;
   constructor() {
     super();
     this.shadow = this.attachShadow({ mode: "open" });
     this.loadState();
-    const shortcutAttr = this.getAttribute("shortcut");
-    if (shortcutAttr) {
-      this.shortcut = shortcutAttr;
-    }
   }
   connectedCallback() {
+    this.setupAgentConnection();
+    this.setupGlobalListeners();
     this.render();
-    this.setupListeners();
-    this.refreshUnits();
-    this.unsubscribeRegistry = PulseRegistry.onRegister(() => {
-      this.refreshUnits();
-    });
-    window.addEventListener("keydown", this.handleKeyDown);
-    window.addEventListener("resize", this.handleResize);
   }
   disconnectedCallback() {
-    if (this.unsubscribeRegistry) this.unsubscribeRegistry();
-    this.unitSubscriptions.forEach((unsub) => unsub());
-    window.removeEventListener("keydown", this.handleKeyDown);
     window.removeEventListener("resize", this.handleResize);
   }
   loadState() {
     try {
       const saved = localStorage.getItem(STORAGE_KEY);
       if (saved) {
-        const parsed = JSON.parse(saved);
-        this.state = { ...this.state, ...parsed };
+        this.state = { ...this.state, ...JSON.parse(saved) };
       }
     } catch (e) {
     }
@@ -82,72 +194,47 @@ var PulseInspector = class extends HTMLElement {
     } catch (e) {
     }
   }
-  refreshUnits() {
-    this.units = PulseRegistry.getAll();
-    this.updateUnitSubscriptions();
-    this.render();
-  }
-  updateUnitSubscriptions() {
-    this.unitSubscriptions.forEach((unsub) => unsub());
-    this.unitSubscriptions.clear();
-    this.units.forEach((unit) => {
-      const unsub = unit.subscribe(() => {
+  setupAgentConnection() {
+    const agent = PulseAgent.getInstance();
+    agent.onEvent((event) => {
+      if (event.type === "STATE_UPDATE") {
+        this.units = event.payload;
         this.render();
-      });
-      this.unitSubscriptions.set(unit, unsub);
+      }
     });
+    agent.broadcastState();
   }
-  setupListeners() {
+  setupGlobalListeners() {
     this.shadow.addEventListener("mousedown", this.handleMouseDown);
     this.shadow.addEventListener("click", this.handleClick);
-    this.shadow.addEventListener("submit", this.handleEditSubmit);
-    this.shadow.addEventListener("keydown", this.handleEditKeydown);
+    window.addEventListener("resize", this.handleResize);
   }
-  handleKeyDown = (e) => {
-    const parts = this.shortcut.split("+").map((p) => p.trim().toLowerCase());
-    const needsCtrl = parts.includes("ctrl");
-    const needsShift = parts.includes("shift");
-    const needsAlt = parts.includes("alt");
-    const key = parts.find((p) => !["ctrl", "shift", "alt"].includes(p));
-    if (!key) return;
-    const matches = e.ctrlKey === needsCtrl && e.shiftKey === needsShift && e.altKey === needsAlt && e.key.toLowerCase() === key;
-    if (matches) {
-      e.preventDefault();
-      this.toggle();
-    }
-  };
   handleResize = () => {
-    const maxW = window.innerWidth - (this.state.isOpen ? 400 : 120);
-    const maxH = window.innerHeight - (this.state.isOpen ? 500 : 45);
-    this.state.pos.x = Math.max(0, Math.min(maxW, this.state.pos.x));
-    this.state.pos.y = Math.max(0, Math.min(maxH, this.state.pos.y));
+    const width = this.state.isOpen ? 400 : 140;
+    const height = this.state.isOpen ? 600 : 48;
+    this.state.pos.x = Math.max(0, Math.min(window.innerWidth - width, this.state.pos.x));
+    this.state.pos.y = Math.max(0, Math.min(window.innerHeight - height, this.state.pos.y));
     this.render();
   };
-  toggle() {
-    this.state.isOpen = !this.state.isOpen;
-    this.saveState();
-    this.render();
-  }
-  // --- DRAG LOGIC ---
-  totalDragDistance = 0;
   handleMouseDown = (e) => {
-    const me = e;
-    const target = me.target;
-    const isHeader = target.closest(".header") || target.classList.contains("toggle-btn");
-    const isClose = target.closest("#close");
-    if (!isHeader || isClose) return;
-    this.isDragging = true;
     this.totalDragDistance = 0;
+    const target = e.target;
+    const isHeader = target.closest(".header") || target.closest(".toggle-btn");
+    const isAction = target.closest("#close") || target.closest("[data-action]");
+    if (!isHeader || isAction) return;
+    this.isDragging = true;
     this.offset = {
-      x: me.clientX - this.state.pos.x,
-      y: me.clientY - this.state.pos.y
+      x: e.clientX - this.state.pos.x,
+      y: e.clientY - this.state.pos.y
     };
     const move = (ev) => {
       if (!this.isDragging) return;
       ev.preventDefault();
-      this.totalDragDistance += Math.abs(ev.movementX) + Math.abs(ev.movementY);
-      const width = this.state.isOpen ? 400 : 140;
-      const height = this.state.isOpen ? 600 : 48;
+      const dx = ev.clientX - (this.state.pos.x + this.offset.x);
+      const dy = ev.clientY - (this.state.pos.y + this.offset.y);
+      this.totalDragDistance += Math.abs(dx) + Math.abs(dy);
+      const width = this.state.isOpen ? 380 : 140;
+      const height = this.state.isOpen ? 400 : 48;
       this.state.pos = {
         x: Math.max(0, Math.min(window.innerWidth - width, ev.clientX - this.offset.x)),
         y: Math.max(0, Math.min(window.innerHeight - height, ev.clientY - this.offset.y))
@@ -167,108 +254,35 @@ var PulseInspector = class extends HTMLElement {
     document.addEventListener("mousemove", move);
     document.addEventListener("mouseup", up);
   };
-  // --- INTERACTION LOGIC ---
   handleClick = (e) => {
-    if (this.totalDragDistance > 5) {
-      this.totalDragDistance = 0;
-      return;
-    }
+    if (this.totalDragDistance > 10) return;
     const target = e.target;
-    if (target.id === "toggle" || target.closest("#close")) {
-      this.toggle();
-      return;
-    }
-    if (target.id === "refresh" || target.closest("#refresh")) {
-      this.refreshUnits();
-      return;
-    }
-    const tabEl = target.closest(".tab-btn");
-    if (tabEl) {
-      const tab = tabEl.getAttribute("data-tab");
-      if (tab) {
-        this.state.activeTab = tab;
-        this.saveState();
-        this.render();
-      }
-      return;
-    }
-    const valueEl = target.closest(".editable-value");
-    if (valueEl) {
-      const id = valueEl.getAttribute("data-id");
-      const name = valueEl.getAttribute("data-name");
-      const unit = this.units.find((u) => u._id === id || u._name === name);
-      if (unit && !("state" in unit)) {
-        this.editingUnit = unit;
-        this.editValue = JSON.stringify(unit());
-        this.render();
-        requestAnimationFrame(() => {
-          const input = this.shadow.querySelector(".edit-input");
-          if (input) {
-            input.focus();
-            input.select();
-          }
-        });
-      }
-      return;
-    }
-    if (this.editingUnit && !target.closest(".edit-form")) {
-      this.editingUnit = null;
-      this.render();
-    }
-    const treeNode = target.closest(".tree-toggle");
-    if (treeNode) {
-      e.stopPropagation();
-      const id = treeNode.getAttribute("data-id");
-      if (id) {
-        if (this.state.expandedNodes.includes(id)) {
-          this.state.expandedNodes = this.state.expandedNodes.filter((n) => n !== id);
-        } else {
-          this.state.expandedNodes.push(id);
-        }
-        this.saveState();
-        this.render();
-      }
-    }
-  };
-  handleEditSubmit = (e) => {
-    e.preventDefault();
-    if (!this.editingUnit) return;
-    try {
-      const form = e.target;
-      const input = form.querySelector("input");
-      let val = input.value;
-      try {
-        if (val === "true") val = true;
-        else if (val === "false") val = false;
-        else if (val === "null") val = null;
-        else if (val === "undefined") val = void 0;
-        else if (!isNaN(Number(val)) && val.trim() !== "") val = Number(val);
-        else if (val.startsWith("{") || val.startsWith("[")) val = JSON.parse(val);
-      } catch (err) {
-      }
-      this.editingUnit.set(val);
-      this.editingUnit = null;
+    if (target.closest("#toggle") || target.closest("#close")) {
+      this.state.isOpen = !this.state.isOpen;
+      this.saveState();
       this.render();
-    } catch (err) {
-      console.error("Pulse DevTools: Failed to update value", err);
+      return;
     }
-  };
-  handleEditKeydown = (e) => {
-    if (this.editingUnit && e.key === "Escape") {
-      this.editingUnit = null;
-      this.render();
+    const actionBtn = target.closest("[data-action]");
+    if (actionBtn) {
+      const type = actionBtn.getAttribute("data-action");
+      const uid = actionBtn.getAttribute("data-uid");
+      this.sendAction(type, uid);
     }
   };
-  // --- RENDERERS ---
+  sendAction(type, uid, payload) {
+    window.postMessage({
+      source: "pulse-ui",
+      action: { type, uid, payload }
+    }, "*");
+  }
   render() {
     if (!this.state.isOpen) {
       this.shadow.innerHTML = this.getStyles() + `
         <div class="container" style="left: ${this.state.pos.x}px; top: ${this.state.pos.y}px">
-          <div class="glass" style="border-radius:30px; width:auto;">
-            <div class="toggle-btn" id="toggle">
-              <div class="dot"></div>
-              Pulse (${this.units.length})
-            </div>
+          <div class="glass toggle-btn" id="toggle">
+            <div class="dot"></div>
+            Pulse (${this.units.length})
           </div>
         </div>
       `;
@@ -276,177 +290,76 @@ var PulseInspector = class extends HTMLElement {
     }
     this.shadow.innerHTML = this.getStyles() + `
       <div class="container" style="left: ${this.state.pos.x}px; top: ${this.state.pos.y}px">
-        <div class="glass">
+        <div class="glass window">
           
           <div class="header">
             <div style="display:flex;align-items:center;gap:10px">
               <div class="dot" style="width:10px;height:10px"></div>
               <strong style="font-size:14px;letter-spacing:0.5px">PULSE</strong>
-              <span style="font-size:10px;opacity:0.5;margin-top:2px">v0.2.0</span>
+              <span style="font-size:10px;opacity:0.5;margin-top:2px">v2.0</span>
             </div>
             <div style="display:flex;gap:8px;align-items:center">
-              <div id="refresh" class="icon-btn" title="Refresh" style="font-size:16px">${ICONS.refresh}</div>
-              <div id="close" class="icon-btn" title="Close (${this.shortcut})">\xD7</div>
-            </div>
-          </div>
-
-          <div class="tabs">
-            <div class="tab-btn ${this.state.activeTab === "inspector" ? "active" : ""}" data-tab="inspector">
-              ${ICONS.list} Inspector
-            </div>
-            <div class="tab-btn ${this.state.activeTab === "tree" ? "active" : ""}" data-tab="tree">
-              ${ICONS.tree} Pulse Tree
+              <div id="close" class="icon-btn" title="Minimize">\xD7</div>
             </div>
           </div>
 
           <div class="content">
-            ${this.state.activeTab === "inspector" ? this.renderInspector() : this.renderTree()}
+            ${this.units.length === 0 ? `<div class="empty-state">No reactive units detected.</div>` : `<div class="list">${this.units.map((u) => this.renderUnitCard(u)).join("")}</div>`}
           </div>
 
         </div>
       </div>
     `;
   }
-  renderInspector() {
-    if (this.units.length === 0) {
-      return `<div class="empty-state">No Pulse units detected.</div>`;
-    }
+  renderUnitCard(u) {
+    const status = u.status || "ok";
+    const hasDeps = u.dependencies && u.dependencies.length > 0;
     return `
-      <div class="list">
-        ${this.units.map((u) => this.renderUnitCard(u)).join("")}
-      </div>
-    `;
-  }
-  renderUnitCard(unit) {
-    const isGuard = "state" in unit;
-    const name = unit._name || "unnamed";
-    const id = unit._id;
-    const explanation = isGuard ? unit.explain() : null;
-    const value = isGuard ? explanation.value : unit();
-    let status = "ok";
-    if (isGuard) status = explanation.status;
-    const isEditing = this.editingUnit === unit;
-    return `
-      <div class="unit-card ${isGuard ? "" : "source-card"}" style="border-left-color: ${this.getStatusColor(status)}">
+      <div class="unit-card ${u.type}-card" style="border-left-color: ${this.getStatusColor(status)}">
         <div class="unit-header">
-          <div style="display:flex;align-items:center;gap:6px">
-            <div class="status-dot status-${status}"></div>
-            <strong title="${name}">${name}</strong>
-          </div>
-          <span class="badg type-${isGuard ? "guard" : "source"}">${isGuard ? "GUARD" : "SOURCE"}</span>
+           <div style="display:flex;align-items:center;gap:6px">
+             <div class="status-dot status-${status}"></div>
+             <strong title="${u.name}">${u.name}</strong>
+           </div>
+           <span class="badg type-${u.type}">${u.type.toUpperCase()}</span>
         </div>
-
-        <div class="unit-body">
-          ${isEditing ? `
-            <form class="edit-form">
-              <input class="edit-input" value='${this.safeStringify(value)}' />
-            </form>
-          ` : `
-            <div class="value-row ${!isGuard ? "editable-value" : ""}" 
-                 data-id="${id}" 
-                 data-name="${name}" 
-                 title="${!isGuard ? "Click to edit" : ""}">
-              <span style="opacity:0.5;margin-right:6px">Value:</span> 
-              <span class="value-text">${this.formatValue(value)}</span>
-              ${!isGuard ? `<span class="edit-icon">${ICONS.edit}</span>` : ""}
-            </div>
-          `}
-
-          ${isGuard && explanation.status === "fail" ? this.renderReason(explanation.reason) : ""}
-          ${isGuard && explanation.status === "pending" ? `
-             <div class="reason pending-reason">
-                \u23F3 Evaluating... ${explanation.lastReason ? `<br/><span style="opacity:0.7;font-size:9px">Last error: ${this.formatReasonText(explanation.lastReason)}</span>` : ""}
-             </div>
-          ` : ""}
+        <div class="value-row">
+          <span style="opacity:0.5;margin-right:6px">Value:</span> 
+          <span class="value-text">${this.formatValue(u.value)}</span>
         </div>
+        
+        ${u.reason ? `
+          <div class="reason-box">
+            <strong>${u.reason.code || "FAILURE"}</strong>
+            <div>${u.reason.message}</div>
+          </div>
+        ` : ""}
+
+        ${hasDeps ? `
+          <div class="deps-list">
+            <div class="deps-label">Dependencies:</div>
+            ${u.dependencies.map((d) => `
+              <div class="dep-item">
+                <span class="dep-dot"></span>
+                ${d.name}
+              </div>
+            `).join("")}
+          </div>
+        ` : ""}
       </div>
     `;
   }
-  renderTree() {
-    const guards = this.units.filter((u) => "state" in u);
-    if (guards.length === 0) return `<div class="empty-state">No Guards to visualize.</div>`;
-    return `
-      <div class="tree-view">
-        ${guards.map((g) => this.renderTreeNode(g, 0, g._name)).join("")}
-      </div>
-    `;
-  }
-  renderTreeNode(guard, depth, key) {
-    const isExpanded = this.state.expandedNodes.includes(key);
-    const explanation = guard.explain();
-    const deps = explanation.dependencies || [];
-    const hasDeps = deps.length > 0;
-    const statusColor = this.getStatusColor(explanation.status);
-    return `
-      <div class="tree-node" style="padding-left:${depth * 12}px">
-        <div class="tree-row tree-toggle" data-id="${key}">
-          <span class="tree-icon" style="visibility:${hasDeps ? "visible" : "hidden"}">
-            ${isExpanded ? ICONS.chevronDown : ICONS.chevronRight}
-          </span>
-          <span class="status-dot status-${explanation.status}" style="width:6px;height:6px;margin:0 6px"></span>
-          <span class="tree-name" style="color:${explanation.status === "fail" ? COLORS.error : "inherit"}">
-            ${explanation.name}
-          </span>
-           ${explanation.status === "fail" ? `
-            <span class="mini-badge fail">!</span>
-           ` : ""}
-        </div>
-      </div>
-      ${isExpanded && hasDeps ? `
-        <div class="tree-children">
-           ${deps.map((dep) => {
-      const unit = this.units.find((u) => u._name === dep.name);
-      const childKey = key + "-" + dep.name;
-      if (unit && "state" in unit) {
-        return this.renderTreeNode(unit, depth + 1, childKey);
-      } else {
-        return `
-                   <div class="tree-node" style="padding-left:${(depth + 1) * 12}px">
-                      <div class="tree-row">
-                        <span class="tree-icon" style="visibility:hidden"></span>
-                        <span class="status-dot status-ok" style="background:${COLORS.secondaryText}"></span>
-                        <span class="tree-name" style="opacity:0.7">${dep.name}</span>
-                        <span class="mini-badge source">S</span>
-                      </div>
-                   </div>
-                 `;
-      }
-    }).join("")}
-        </div>
-      ` : ""}
-    `;
-  }
-  // --- HELPERS ---
-  renderReason(reason) {
-    if (!reason) return "";
-    const text = this.formatReasonText(reason);
-    const meta = typeof reason === "object" && reason.meta ? reason.meta : null;
-    return `
-      <div class="reason">
-        <strong>${typeof reason === "object" ? reason.code || "ERROR" : "FAIL"}</strong>
-        <div>${text}</div>
-        ${meta ? `<pre class="meta-block">${JSON.stringify(meta, null, 2)}</pre>` : ""}
-      </div>
-    `;
-  }
-  formatReasonText(reason) {
-    if (typeof reason === "string") return reason;
-    return reason.message || JSON.stringify(reason);
-  }
   formatValue(val) {
     if (val === void 0) return "undefined";
     if (val === null) return "null";
-    if (typeof val === "function") return "\u0192()";
-    if (typeof val === "object") return "{...}";
-    return String(val);
-  }
-  safeStringify(val) {
-    try {
-      if (val === void 0) return "undefined";
-      return JSON.stringify(val);
-    } catch {
-      return String(val);
+    if (typeof val === "object") {
+      try {
+        return JSON.stringify(val);
+      } catch (e) {
+        return "{...}";
+      }
     }
+    return String(val);
   }
   getStatusColor(status) {
     switch (status) {
@@ -463,163 +376,31 @@ var PulseInspector = class extends HTMLElement {
   getStyles() {
     return `
       <style>
-        :host { all: initial; font-family: 'Inter', -apple-system, sans-serif; }
-        * { box-sizing: border-box; }
-        
-        .container {
-          position: fixed;
-          height: auto;
-          z-index: 999999;
-          filter: drop-shadow(0 8px 32px rgba(0,0,0,0.5));
-          color: ${COLORS.text};
-        }
-
-        .glass {
-          background: ${COLORS.bg};
-          backdrop-filter: blur(12px);
-          border: 1px solid ${COLORS.border};
-          border-radius: 12px;
-          overflow: hidden;
-          display: flex;
-          flex-direction: column;
-          width: 400px;
-          max-height: 80vh;
-          transition: width 0.2s, height 0.2s;
-        }
-
-        /* TOGGLE BUTTON MODE */
-        .toggle-btn {
-          width: 140px;
-          height: 48px;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          gap: 10px;
-          cursor: pointer;
-          font-weight: 600;
-          font-size: 13px;
-          background: rgba(255,255,255,0.03);
-        }
-        .toggle-btn:hover { background: rgba(255,255,255,0.08); }
-
-        /* HEADER */
-        .header {
-          padding: 12px 16px;
-          background: rgba(0,0,0,0.2);
-          border-bottom: 1px solid ${COLORS.border};
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-          cursor: move;
-          flex-shrink: 0;
-        }
-        .dot {
-          width: 8px;
-          height: 8px;
-          border-radius: 50%;
-          background: ${COLORS.accent};
-          box-shadow: 0 0 12px ${COLORS.accentColor};
-        }
-        .icon-btn { cursor: pointer; opacity: 0.6; padding: 4px; font-size: 18px; line-height: 1; }
-        .icon-btn:hover { opacity: 1; color: white; }
-
-        /* TABS */
-        .tabs {
-          display: flex;
-          background: rgba(0,0,0,0.2);
-          border-bottom: 1px solid ${COLORS.border};
-          font-size: 11px;
-          font-weight: 600;
-        }
-        .tab-btn {
-          flex: 1;
-          padding: 10px;
-          text-align: center;
-          cursor: pointer;
-          opacity: 0.6;
-          border-bottom: 2px solid transparent;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          gap: 6px;
-        }
-        .tab-btn:hover { opacity: 0.9; background: rgba(255,255,255,0.02); }
-        .tab-btn.active { opacity: 1; border-bottom-color: ${COLORS.accentColor}; color: ${COLORS.accentColor}; background: rgba(0,210,255,0.05); }
-
-        /* CONTENT */
-        .content {
-          flex: 1;
-          overflow-y: auto;
-          overflow-x: hidden;
-          min-height: 300px;
-        }
+        :host { all: initial; font-family: 'Inter', system-ui, sans-serif; }
+        .container { position: fixed; z-index: 1000000; filter: drop-shadow(0 8px 32px rgba(0,0,0,0.5)); color: white; }
+        .glass { background: ${COLORS.bg}; backdrop-filter: blur(12px); border: 1px solid ${COLORS.border}; border-radius: 12px; overflow: hidden; }
+        .window { width: 380px; max-height: 80vh; display: flex; flex-direction: column; }
+        .toggle-btn { width: 140px; height: 48px; display: flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer; font-weight: 600; font-size: 13px; }
+        .header { padding: 12px 16px; background: rgba(0,0,0,0.2); border-bottom: 1px solid ${COLORS.border}; display: flex; justify-content: space-between; align-items: center; cursor: move; }
+        .dot { width: 8px; height: 8px; border-radius: 50%; background: ${COLORS.accent}; box-shadow: 0 0 12px ${COLORS.accentColor}; }
+        .icon-btn { cursor: pointer; opacity: 0.6; padding: 4px; font-size: 18px; line-height: 1; display: flex; align-items: center; }
+        .icon-btn:hover { opacity: 1; }
+        .content { flex: 1; overflow-y: auto; padding: 12px; min-height: 200px; }
         .content::-webkit-scrollbar { width: 6px; }
         .content::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 3px; }
-
-        /* INSPECTOR LIST */
-        .list { padding: 12px; display: flex; flex-direction: column; gap: 8px; }
-        .empty-state { padding: 40px; text-align: center; opacity: 0.4; font-size: 12px; }
-
-        .unit-card {
-          background: ${COLORS.cardBg};
-          border: 1px solid ${COLORS.border};
-          border-left: 3px solid transparent;
-          border-radius: 6px;
-          padding: 10px;
-          transition: background 0.1s;
-        }
-        .unit-card:hover { background: ${COLORS.cardHover}; }
-        .source-card { border-left-color: ${COLORS.secondaryText} !important; }
-
-        .unit-header {
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-          margin-bottom: 8px;
-        }
-        .status-dot {
-          width: 6px;
-          height: 6px;
-          border-radius: 50%;
-        }
+        .list { display: flex; flex-direction: column; gap: 8px; }
+        .unit-card { background: ${COLORS.cardBg}; border: 1px solid ${COLORS.border}; border-left: 3px solid transparent; border-radius: 6px; padding: 10px; }
+        .unit-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
+        .status-dot { width: 6px; height: 6px; border-radius: 50%; }
         .status-ok { background: ${COLORS.success}; box-shadow: 0 0 6px ${COLORS.success}; }
         .status-fail { background: ${COLORS.error}; box-shadow: 0 0 6px ${COLORS.error}; }
         .status-pending { background: ${COLORS.pending}; box-shadow: 0 0 6px ${COLORS.pending}; }
-
-        .badg { font-size: 8px; font-weight: 700; padding: 2px 4px; border-radius: 3px; background: rgba(255,255,255,0.1); }
+        .badg { font-size: 8px; font-weight: 700; padding: 2px 4px; border-radius: 3px; }
         .type-guard { color: ${COLORS.accentColor}; background: rgba(0,210,255,0.1); }
-        .type-source { color: ${COLORS.secondaryText}; }
-
-        .value-row {
-          font-size: 11px;
-          font-family: monospace;
-          background: rgba(0,0,0,0.2);
-          padding: 6px 8px;
-          border-radius: 4px;
-          display: flex;
-          align-items: center;
-          justify-content: space-between;
-        }
+        .type-source { color: ${COLORS.secondaryText}; background: rgba(255,255,255,0.05); }
+        .value-row { font-size: 11px; font-family: monospace; background: rgba(0,0,0,0.2); padding: 6px 8px; border-radius: 4px; display: flex; align-items: center; justify-content: space-between; }
         .value-text { color: ${COLORS.accentColor}; }
-        .editable-value { cursor: pointer; border: 1px dashed transparent; }
-        .editable-value:hover { border-color: rgba(255,255,255,0.2); background: rgba(255,255,255,0.05); }
-        .edit-icon { opacity: 0; transition: opacity 0.2s; }
-        .editable-value:hover .edit-icon { opacity: 0.7; }
-
-        .edit-form { margin: 0; padding: 0; width: 100%; }
-        .edit-input {
-          width: 100%;
-          background: ${COLORS.inputBg};
-          border: 1px solid ${COLORS.accentColor};
-          color: white;
-          font-family: monospace;
-          font-size: 11px;
-          padding: 6px;
-          border-radius: 4px;
-          outline: none;
-        }
-
-        .reason {
+        .reason-box {
           margin-top: 8px;
           padding: 8px;
           background: rgba(255, 75, 43, 0.1);
@@ -628,30 +409,14 @@ var PulseInspector = class extends HTMLElement {
           color: ${COLORS.error};
           font-size: 11px;
         }
-        .pending-reason { color: ${COLORS.pending} !important; background: rgba(253, 187, 45, 0.1); border-color: rgba(253, 187, 45, 0.2); }
-        .meta-block { margin: 4px 0 0 0; opacity: 0.7; font-size: 10px; }
-
-        /* TREE VIEW */
-        .tree-view { padding: 12px; font-size: 12px; }
-        .tree-node { margin-bottom: 2px; }
-        .tree-row {
-          display: flex;
-          align-items: center;
-          padding: 4px 6px;
-          border-radius: 4px;
-          cursor: pointer;
-          user-select: none;
-        }
-        .tree-row:hover { background: rgba(255,255,255,0.05); }
-        .tree-icon { margin-right: 4px; opacity: 0.5; width: 14px; height: 14px; display: flex; align-items: center; justify-content: center; }
-        .tree-name { opacity: 0.9; }
-        .mini-badge { 
-          font-size: 9px; margin-left: auto; padding: 1px 4px; border-radius: 3px; 
-          font-weight: bold; opacity: 0.6;
-        }
-        .mini-badge.fail { background: ${COLORS.error}; color: white; opacity: 1; }
-        .mini-badge.source { background: rgba(255,255,255,0.1); }
-
+        .reason-box strong { font-size: 10px; display: block; opacity: 0.8; margin-bottom: 2px; }
+        .deps-list { margin-top: 10px; border-top: 1px solid ${COLORS.border}; padding-top: 8px; }
+        .deps-label { font-size: 9px; opacity: 0.5; font-weight: bold; margin-bottom: 4px; text-transform: uppercase; }
+        .dep-item { font-size: 10px; opacity: 0.8; display: flex; align-items: center; gap: 6px; padding: 2px 0; }
+        .dep-dot { width: 4px; height: 4px; background: ${COLORS.accentColor}; border-radius: 50%; opacity: 0.5; }
+        .error-text { color: ${COLORS.error}; font-size: 10px; margin-top: 6px; }
+        .empty-state { padding: 40px; text-align: center; opacity: 0.4; font-size: 12px; }
+        .mini-btn { background: ${COLORS.accent}; border: none; color: white; border-radius: 3px; font-size: 9px; padding: 2px 6px; cursor: pointer; }
       </style>
     `;
   }
@@ -659,6 +424,53 @@ var PulseInspector = class extends HTMLElement {
 if (!customElements.get("pulse-inspector")) {
   customElements.define("pulse-inspector", PulseInspector);
 }
+
+// src/timetravel.ts
+import { PulseRegistry as PulseRegistry2 } from "@pulse-js/core";
+var TimeTravel = class {
+  snapshots = [];
+  maxSnapshots = 100;
+  /**
+   * Captures a point-in-time snapshot of all registered sources.
+   */
+  capture() {
+    const data = {};
+    const units = PulseRegistry2.getAllWithMeta();
+    units.forEach(({ unit, uid }) => {
+      if (!unit.state) {
+        data[uid] = unit();
+      }
+    });
+    this.snapshots.push({
+      timestamp: Date.now(),
+      data
+    });
+    if (this.snapshots.length > this.maxSnapshots) {
+      this.snapshots.shift();
+    }
+  }
+  /**
+   * Reverts the registry state to a specific snapshot index.
+   */
+  travel(index) {
+    const snapshot = this.snapshots[index];
+    if (!snapshot) return;
+    PulseRegistry2.getAllWithMeta().forEach(({ unit, uid }) => {
+      const value = snapshot.data[uid];
+      if (value !== void 0 && unit.set) {
+        unit.set(value);
+      }
+    });
+  }
+  getHistory() {
+    return this.snapshots;
+  }
+  clear() {
+    this.snapshots = [];
+  }
+};
 export {
-  PulseInspector
+  PulseAgent,
+  PulseInspector,
+  TimeTravel
 };