devlog-ui 0.1.0

package/dist/index.js

@@ -0,0 +1,3529 @@
+var Me = Object.defineProperty;
+var Be = (t, e, n) => e in t ? Me(t, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : t[e] = n;
+var p = (t, e, n) => Be(t, typeof e != "symbol" ? e + "" : e, n);
+const se = {
+  debug: 0,
+  info: 1,
+  warn: 2,
+  error: 3
+};
+function w(t) {
+  return t !== null && typeof t == "object" && !Array.isArray(t);
+}
+function F(t, e) {
+  if (t === e) return !0;
+  if (typeof t != typeof e) return !1;
+  if (t === null || e === null) return t === e;
+  if (Array.isArray(t) && Array.isArray(e))
+    return t.length !== e.length ? !1 : t.every((n, o) => F(n, e[o]));
+  if (w(t) && w(e)) {
+    const n = Object.keys(t), o = Object.keys(e);
+    return n.length !== o.length ? !1 : n.every((r) => F(t[r], e[r]));
+  }
+  return !1;
+}
+function ae(t) {
+  if (t === void 0) return "undefined";
+  if (t === null) return "null";
+  if (typeof t == "string") return `"${t}"`;
+  if (typeof t == "number" || typeof t == "boolean") return String(t);
+  if (Array.isArray(t))
+    return t.length === 0 ? "[]" : t.length <= 3 ? `[${t.map(ae).join(", ")}]` : `[${t.length} items]`;
+  if (w(t)) {
+    const e = Object.keys(t);
+    return e.length === 0 ? "{}" : e.length <= 2 ? `{${e.map((n) => `${n}: ${ae(t[n])}`).join(", ")}}` : `{${e.length} keys}`;
+  }
+  return String(t);
+}
+function ve(t, e, n = "", o = !1) {
+  const r = [];
+  if (!w(t) && !w(e))
+    return F(t, e) ? o && r.push({
+      path: n || "(root)",
+      type: "unchanged",
+      oldValue: t,
+      newValue: e
+    }) : r.push({
+      path: n || "(root)",
+      type: "changed",
+      oldValue: t,
+      newValue: e
+    }), r;
+  if (!w(t))
+    return r.push({
+      path: n || "(root)",
+      type: "changed",
+      oldValue: t,
+      newValue: e
+    }), r;
+  if (!w(e))
+    return r.push({
+      path: n || "(root)",
+      type: "changed",
+      oldValue: t,
+      newValue: e
+    }), r;
+  const s = /* @__PURE__ */ new Set([...Object.keys(t), ...Object.keys(e)]);
+  for (const c of s) {
+    const l = n ? `${n}.${c}` : c, a = t[c], d = e[c], f = c in t, h = c in e;
+    !f && h ? r.push({
+      path: l,
+      type: "added",
+      newValue: d
+    }) : f && !h ? r.push({
+      path: l,
+      type: "removed",
+      oldValue: a
+    }) : w(a) && w(d) ? r.push(...ve(a, d, l, o)) : Array.isArray(a) && Array.isArray(d) ? F(a, d) ? o && r.push({
+      path: l,
+      type: "unchanged",
+      oldValue: a,
+      newValue: d
+    }) : r.push({
+      path: l,
+      type: "changed",
+      oldValue: a,
+      newValue: d
+    }) : F(a, d) ? o && r.push({
+      path: l,
+      type: "unchanged",
+      oldValue: a,
+      newValue: d
+    }) : r.push({
+      path: l,
+      type: "changed",
+      oldValue: a,
+      newValue: d
+    });
+  }
+  return r;
+}
+function le(t, e) {
+  const n = ve(t, e, "", !1), o = {
+    added: 0,
+    removed: 0,
+    changed: 0,
+    unchanged: 0
+  };
+  for (const r of n)
+    o[r.type]++;
+  return { changes: n, summary: o };
+}
+function Ft(t) {
+  return t.summary.added > 0 || t.summary.removed > 0 || t.summary.changed > 0;
+}
+const Fe = { BASE_URL: "/", DEV: !1, MODE: "production", PROD: !0, SSR: !1 };
+function Oe() {
+  try {
+    if (typeof import.meta < "u" && Fe)
+      return !1;
+    const t = globalThis.process;
+    if (t?.env) {
+      const e = t.env.DEVLOGGER_ENABLED || t.env.REACT_APP_DEVLOGGER_ENABLED;
+      if (e === "false" || e === "0") return !1;
+      if (e === "true" || e === "1") return !0;
+      if (t.env.NODE_ENV === "production") return !1;
+    }
+    return !0;
+  } catch {
+    return !0;
+  }
+}
+const Ae = {
+  maxLogs: 1e3,
+  persist: !1,
+  minLevel: "debug",
+  enabled: Oe()
+};
+function He() {
+  const t = "devlogger_session_id";
+  try {
+    const e = sessionStorage.getItem(t);
+    if (e)
+      return e;
+    const n = `session_${Date.now()}_${Math.random().toString(36).slice(2, 9)}`;
+    return sessionStorage.setItem(t, n), n;
+  } catch {
+    return `session_${Date.now()}_${Math.random().toString(36).slice(2, 9)}`;
+  }
+}
+function ze() {
+  return `log_${Date.now()}_${Math.random().toString(36).slice(2, 9)}`;
+}
+function me() {
+  try {
+    const t = new Error().stack;
+    if (!t)
+      return { file: "unknown", line: 0 };
+    const e = t.split(`
+`);
+    for (let n = 4; n < e.length; n++) {
+      const o = e[n];
+      if (!o || o.includes("logger.ts") || o.includes("logger.js"))
+        continue;
+      const r = o.match(/at\s+(?:(.+?)\s+)?\(?(.+?):(\d+):(\d+)\)?/);
+      if (r)
+        return {
+          function: r[1] || void 0,
+          file: ce(r[2] || "unknown"),
+          line: parseInt(r[3] || "0", 10),
+          column: parseInt(r[4] || "0", 10)
+        };
+      const s = o.match(/(.+)?@(.+?):(\d+):(\d+)/);
+      if (s)
+        return {
+          function: s[1] || void 0,
+          file: ce(s[2] || "unknown"),
+          line: parseInt(s[3] || "0", 10),
+          column: parseInt(s[4] || "0", 10)
+        };
+    }
+    return { file: "unknown", line: 0 };
+  } catch {
+    return { file: "unknown", line: 0 };
+  }
+}
+function ce(t) {
+  let e = t.replace(/^webpack:\/\/[^/]*\//, "").replace(/^\/@fs/, "").replace(/^file:\/\//, "").replace(/\?.*$/, "");
+  const n = e.split("/");
+  return n.length > 2 && (e = n.slice(-2).join("/")), e;
+}
+function Ne() {
+  return `span_${Date.now()}_${Math.random().toString(36).slice(2, 9)}`;
+}
+class G {
+  constructor(e, n, o, r) {
+    p(this, "logger");
+    p(this, "_event");
+    p(this, "_ended", !1);
+    this.logger = e, this._event = {
+      id: Ne(),
+      name: n,
+      startTime: Date.now(),
+      status: "running",
+      parentId: r,
+      context: o,
+      source: me(),
+      sessionId: e.getSessionId()
+    }, e.notifySpan(this._event);
+  }
+  /** Get span ID */
+  get id() {
+    return this._event.id;
+  }
+  /** Get span event data */
+  get event() {
+    return this._event;
+  }
+  /** Check if span has ended */
+  get ended() {
+    return this._ended;
+  }
+  /** Log debug within this span */
+  debug(e, ...n) {
+    this._ended || this.logger.logWithSpan("debug", e, n, this._event.id, this._event.context);
+  }
+  /** Log info within this span */
+  info(e, ...n) {
+    this._ended || this.logger.logWithSpan("info", e, n, this._event.id, this._event.context);
+  }
+  /** Log warn within this span */
+  warn(e, ...n) {
+    this._ended || this.logger.logWithSpan("warn", e, n, this._event.id, this._event.context);
+  }
+  /** Log error within this span */
+  error(e, ...n) {
+    this._ended || this.logger.logWithSpan("error", e, n, this._event.id, this._event.context);
+  }
+  /** Create a child span */
+  span(e, n) {
+    const o = { ...this._event.context, ...n };
+    return new G(this.logger, e, o, this._event.id);
+  }
+  /** End the span successfully */
+  end() {
+    this.finish("success");
+  }
+  /** End the span with error status */
+  fail(e) {
+    e && this.error(typeof e == "string" ? e : e.message, e), this.finish("error");
+  }
+  /** Internal finish method */
+  finish(e) {
+    this._ended || (this._ended = !0, this._event.endTime = Date.now(), this._event.duration = this._event.endTime - this._event.startTime, this._event.status = e, this.logger.notifySpan(this._event));
+  }
+}
+class ee {
+  constructor(e, n) {
+    p(this, "logger");
+    p(this, "context");
+    this.logger = e, this.context = n;
+  }
+  debug(e, ...n) {
+    this.logger.logWithContext("debug", e, n, this.context);
+  }
+  info(e, ...n) {
+    this.logger.logWithContext("info", e, n, this.context);
+  }
+  warn(e, ...n) {
+    this.logger.logWithContext("warn", e, n, this.context);
+  }
+  error(e, ...n) {
+    this.logger.logWithContext("error", e, n, this.context);
+  }
+  /** Create a span with this context */
+  span(e, n) {
+    return this.logger.span(e, { ...this.context, ...n });
+  }
+  /** Create a new context logger with merged context */
+  withContext(e) {
+    return new ee(this.logger, { ...this.context, ...e });
+  }
+}
+class Pe {
+  constructor() {
+    p(this, "logs", []);
+    p(this, "spans", /* @__PURE__ */ new Map());
+    p(this, "subscribers", /* @__PURE__ */ new Set());
+    p(this, "spanSubscribers", /* @__PURE__ */ new Set());
+    p(this, "config", { ...Ae });
+    p(this, "sessionId");
+    p(this, "globalContext", {});
+    this.sessionId = He();
+  }
+  /**
+   * Core logging method - all public methods delegate to this
+   */
+  log(e, n, o, r, s) {
+    try {
+      if (!this.config.enabled || se[e] < se[this.config.minLevel])
+        return;
+      const c = Object.keys(this.globalContext).length > 0 || r ? { ...this.globalContext, ...r } : void 0, l = {
+        id: ze(),
+        timestamp: Date.now(),
+        level: e,
+        message: String(n),
+        data: this.safeCloneData(o),
+        source: me(),
+        sessionId: this.sessionId,
+        context: c,
+        spanId: s
+      };
+      this.store(l), this.notify(l);
+    } catch (c) {
+      typeof console < "u" && console.warn && console.warn("[DevLogger] Internal error:", c);
+    }
+  }
+  /**
+   * Log with context (used by ContextLogger)
+   */
+  logWithContext(e, n, o, r) {
+    this.log(e, n, o, r);
+  }
+  /**
+   * Log with span (used by LogSpan)
+   */
+  logWithSpan(e, n, o, r, s) {
+    this.log(e, n, o, s, r);
+  }
+  /**
+   * Notify span subscribers
+   */
+  notifySpan(e) {
+    this.spans.set(e.id, e);
+    for (const n of this.spanSubscribers)
+      try {
+        n(e);
+      } catch {
+      }
+  }
+  /**
+   * Safely clone data to prevent mutations and handle special cases
+   */
+  safeCloneData(e) {
+    return e.map((n) => this.safeClone(n));
+  }
+  /**
+   * Deep clone with circular reference handling
+   */
+  safeClone(e, n = /* @__PURE__ */ new WeakSet()) {
+    if (e == null || typeof e != "object")
+      return e;
+    if (e instanceof Error)
+      return {
+        __type: "Error",
+        name: e.name,
+        message: e.message,
+        stack: e.stack
+      };
+    if (e instanceof Date)
+      return { __type: "Date", value: e.toISOString() };
+    if (e instanceof RegExp)
+      return { __type: "RegExp", value: e.toString() };
+    if (n.has(e))
+      return "[Circular Reference]";
+    if (n.add(e), Array.isArray(e))
+      return e.map((o) => this.safeClone(o, n));
+    try {
+      const o = {};
+      for (const r of Object.keys(e))
+        o[r] = this.safeClone(e[r], n);
+      return o;
+    } catch {
+      return "[Uncloneable Object]";
+    }
+  }
+  /**
+   * Store log with FIFO rotation
+   */
+  store(e) {
+    for (this.logs.push(e); this.logs.length > this.config.maxLogs; )
+      this.logs.shift();
+  }
+  /**
+   * Notify all subscribers of new log
+   */
+  notify(e) {
+    for (const n of this.subscribers)
+      try {
+        n(e);
+      } catch {
+      }
+  }
+  // ========== Public API ==========
+  /**
+   * Log an info message
+   */
+  info(e, ...n) {
+    this.log("info", e, n);
+  }
+  /**
+   * Log a warning message
+   */
+  warn(e, ...n) {
+    this.log("warn", e, n);
+  }
+  /**
+   * Log an error message
+   */
+  error(e, ...n) {
+    this.log("error", e, n);
+  }
+  /**
+   * Log a debug message
+   */
+  debug(e, ...n) {
+    this.log("debug", e, n);
+  }
+  /**
+   * Update logger configuration
+   */
+  configure(e) {
+    try {
+      this.config = { ...this.config, ...e };
+    } catch {
+    }
+  }
+  /**
+   * Clear all stored logs and spans
+   */
+  clear() {
+    try {
+      this.logs = [], this.spans.clear();
+    } catch {
+    }
+  }
+  /**
+   * Import logs (used for rehydration from persistence)
+   * Imported logs are added at the beginning, preserving order
+   */
+  importLogs(e) {
+    try {
+      if (!Array.isArray(e) || e.length === 0)
+        return;
+      const n = new Set(this.logs.map((r) => r.id)), o = e.filter((r) => !n.has(r.id));
+      for (this.logs = [...o, ...this.logs]; this.logs.length > this.config.maxLogs; )
+        this.logs.shift();
+    } catch {
+    }
+  }
+  /**
+   * Get all stored logs (readonly)
+   */
+  getLogs() {
+    return this.logs;
+  }
+  /**
+   * Subscribe to new log events
+   */
+  subscribe(e) {
+    try {
+      return this.subscribers.add(e), () => {
+        this.subscribers.delete(e);
+      };
+    } catch {
+      return () => {
+      };
+    }
+  }
+  /**
+   * Get current session ID
+   */
+  getSessionId() {
+    return this.sessionId;
+  }
+  /**
+   * Get current configuration
+   */
+  getConfig() {
+    return { ...this.config };
+  }
+  /**
+   * Check if logging is currently enabled
+   */
+  isEnabled() {
+    return this.config.enabled;
+  }
+  // ========== Span API ==========
+  /**
+   * Create a new span for grouping related logs
+   */
+  span(e, n) {
+    try {
+      return new G(this, e, n);
+    } catch {
+      return new G(this, e, n);
+    }
+  }
+  /**
+   * Get all spans
+   */
+  getSpans() {
+    return Array.from(this.spans.values());
+  }
+  /**
+   * Get a specific span by ID
+   */
+  getSpan(e) {
+    return this.spans.get(e);
+  }
+  /**
+   * Get logs belonging to a specific span
+   */
+  getSpanLogs(e) {
+    return this.logs.filter((n) => n.spanId === e);
+  }
+  /**
+   * Subscribe to span events
+   */
+  subscribeSpans(e) {
+    try {
+      return this.spanSubscribers.add(e), () => {
+        this.spanSubscribers.delete(e);
+      };
+    } catch {
+      return () => {
+      };
+    }
+  }
+  // ========== Context API ==========
+  /**
+   * Set global context that will be attached to all logs
+   */
+  setGlobalContext(e) {
+    try {
+      this.globalContext = { ...e };
+    } catch {
+    }
+  }
+  /**
+   * Update global context (merge with existing)
+   */
+  updateGlobalContext(e) {
+    try {
+      this.globalContext = { ...this.globalContext, ...e };
+    } catch {
+    }
+  }
+  /**
+   * Get current global context
+   */
+  getGlobalContext() {
+    return { ...this.globalContext };
+  }
+  /**
+   * Clear global context
+   */
+  clearGlobalContext() {
+    this.globalContext = {};
+  }
+  /**
+   * Create a context-bound logger
+   */
+  withContext(e) {
+    return new ee(this, e);
+  }
+  // ========== Export API ==========
+  /**
+   * Export logs in specified format
+   */
+  exportLogs(e = {}) {
+    try {
+      const {
+        format: n = "json",
+        lastMs: o,
+        levels: r,
+        search: s,
+        pretty: c = !0
+      } = e;
+      let l = [...this.logs];
+      if (o !== void 0 && o > 0) {
+        const a = Date.now() - o;
+        l = l.filter((d) => d.timestamp >= a);
+      }
+      if (r && r.length > 0) {
+        const a = new Set(r);
+        l = l.filter((d) => a.has(d.level));
+      }
+      if (s) {
+        const a = s.toLowerCase();
+        l = l.filter(
+          (d) => d.message.toLowerCase().includes(a) || JSON.stringify(d.data).toLowerCase().includes(a)
+        );
+      }
+      return n === "text" ? this.formatLogsAsText(l) : c ? JSON.stringify(l, null, 2) : JSON.stringify(l);
+    } catch {
+      return "[]";
+    }
+  }
+  /**
+   * Format logs as human-readable text
+   */
+  formatLogsAsText(e) {
+    return e.map((n) => {
+      const o = new Date(n.timestamp).toISOString(), r = n.level.toUpperCase().padEnd(5), s = `${n.source.file}:${n.source.line}`, c = n.context ? ` [${Object.entries(n.context).map(([d, f]) => `${d}=${f}`).join(", ")}]` : "", l = n.spanId ? ` (span: ${n.spanId})` : "", a = n.data.length > 0 ? `
+  Data: ${JSON.stringify(n.data)}` : "";
+      return `[${o}] ${r} ${n.message}${c}${l}
+  Source: ${s}${a}`;
+    }).join(`
+
+`);
+  }
+  /**
+   * Copy logs to clipboard
+   */
+  async copyLogs(e = {}) {
+    try {
+      const n = this.exportLogs(e);
+      return await navigator.clipboard.writeText(n), !0;
+    } catch {
+      return !1;
+    }
+  }
+  // ========== Diff API ==========
+  /**
+   * Log a visual diff between two objects
+   */
+  diff(e, n, o, r = "info") {
+    try {
+      const s = le(n, o);
+      return this.log(r, e, [
+        {
+          __type: "Diff",
+          diff: s,
+          oldObj: this.safeClone(n),
+          newObj: this.safeClone(o)
+        }
+      ]), s;
+    } catch {
+      return {
+        changes: [],
+        summary: { added: 0, removed: 0, changed: 0, unchanged: 0 }
+      };
+    }
+  }
+  /**
+   * Compute diff without logging (utility method)
+   */
+  computeDiff(e, n) {
+    try {
+      return le(e, n);
+    } catch {
+      return {
+        changes: [],
+        summary: { added: 0, removed: 0, changed: 0, unchanged: 0 }
+      };
+    }
+  }
+}
+const u = new Pe(), g = {
+  // Background
+  bgPrimary: "#1e1e1e",
+  bgSecondary: "#252526",
+  bgHover: "#2a2a2a",
+  bgHeader: "#333333",
+  // Text
+  textPrimary: "#cccccc",
+  textSecondary: "#858585",
+  textMuted: "#6e6e6e",
+  // Log Levels
+  levelDebug: "#6e6e6e",
+  levelInfo: "#3794ff",
+  levelWarn: "#cca700",
+  levelError: "#f14c4c",
+  // Accents
+  border: "#3c3c3c",
+  scrollbar: "#4a4a4a",
+  scrollbarHover: "#5a5a5a",
+  // Interactive
+  buttonBg: "#0e639c",
+  buttonHover: "#1177bb"
+}, qe = `
+  :host {
+    --bg-primary: ${g.bgPrimary};
+    --bg-secondary: ${g.bgSecondary};
+    --bg-hover: ${g.bgHover};
+    --bg-header: ${g.bgHeader};
+    --text-primary: ${g.textPrimary};
+    --text-secondary: ${g.textSecondary};
+    --text-muted: ${g.textMuted};
+    --border: ${g.border};
+
+    all: initial;
+    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
+    font-size: 12px;
+    line-height: 1.4;
+    color: var(--text-primary);
+  }
+
+  * {
+    box-sizing: border-box;
+  }
+
+  /* Container */
+  .devlogger-container {
+    position: fixed;
+    top: 0;
+    right: 0;
+    width: 420px;
+    height: 100vh;
+    background: var(--bg-primary);
+    border-left: 1px solid var(--border);
+    display: flex;
+    flex-direction: column;
+    z-index: 99999;
+    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.3);
+  }
+
+  .devlogger-container.hidden {
+    display: none;
+  }
+
+  /* Header */
+  .devlogger-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 8px 12px;
+    background: var(--bg-header);
+    border-bottom: 1px solid var(--border);
+    flex-shrink: 0;
+  }
+
+  .devlogger-title {
+    font-weight: 600;
+    font-size: 13px;
+    color: var(--text-primary);
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .devlogger-badge {
+    background: ${g.levelInfo};
+    color: white;
+    padding: 2px 6px;
+    border-radius: 10px;
+    font-size: 10px;
+    font-weight: 500;
+  }
+
+  .devlogger-actions {
+    display: flex;
+    gap: 4px;
+  }
+
+  .devlogger-btn {
+    background: transparent;
+    border: none;
+    color: var(--text-secondary);
+    cursor: pointer;
+    padding: 4px 8px;
+    border-radius: 4px;
+    font-size: 12px;
+    transition: all 0.15s ease;
+  }
+
+  .devlogger-btn:hover {
+    background: var(--bg-hover);
+    color: var(--text-primary);
+  }
+
+  .devlogger-btn-primary {
+    background: ${g.buttonBg};
+    color: white;
+  }
+
+  .devlogger-btn-primary:hover {
+    background: ${g.buttonHover};
+    color: white;
+  }
+
+  /* Log List */
+  .devlogger-logs {
+    flex: 1;
+    overflow-y: auto;
+    overflow-x: hidden;
+  }
+
+  .devlogger-logs::-webkit-scrollbar {
+    width: 8px;
+  }
+
+  .devlogger-logs::-webkit-scrollbar-track {
+    background: var(--bg-primary);
+  }
+
+  .devlogger-logs::-webkit-scrollbar-thumb {
+    background: ${g.scrollbar};
+    border-radius: 4px;
+  }
+
+  .devlogger-logs::-webkit-scrollbar-thumb:hover {
+    background: ${g.scrollbarHover};
+  }
+
+  .devlogger-empty {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    color: var(--text-muted);
+    font-style: italic;
+  }
+
+  /* Log Entry */
+  .log-entry {
+    border-bottom: 1px solid var(--border);
+    padding: 8px 12px;
+    transition: background 0.1s ease;
+  }
+
+  .log-entry:hover {
+    background: var(--bg-hover);
+  }
+
+  .log-entry-header {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 4px;
+  }
+
+  .log-level {
+    font-weight: 600;
+    font-size: 10px;
+    text-transform: uppercase;
+    padding: 2px 6px;
+    border-radius: 3px;
+    min-width: 45px;
+    text-align: center;
+  }
+
+  .log-level-debug {
+    background: rgba(110, 110, 110, 0.2);
+    color: ${g.levelDebug};
+  }
+
+  .log-level-info {
+    background: rgba(55, 148, 255, 0.15);
+    color: ${g.levelInfo};
+  }
+
+  .log-level-warn {
+    background: rgba(204, 167, 0, 0.15);
+    color: ${g.levelWarn};
+  }
+
+  .log-level-error {
+    background: rgba(241, 76, 76, 0.15);
+    color: ${g.levelError};
+  }
+
+  .log-time {
+    color: var(--text-muted);
+    font-size: 11px;
+  }
+
+  .log-source {
+    color: var(--text-secondary);
+    font-size: 11px;
+    margin-left: auto;
+    max-width: 150px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .log-source:hover {
+    color: ${g.levelInfo};
+  }
+
+  .log-context {
+    font-size: 10px;
+    color: ${g.levelInfo};
+    background: rgba(55, 148, 255, 0.1);
+    padding: 2px 6px;
+    border-radius: 3px;
+    max-width: 150px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .log-entry-in-span {
+    border-left: 2px solid ${g.levelInfo};
+    padding-left: 10px;
+  }
+
+  .log-message {
+    color: var(--text-primary);
+    word-break: break-word;
+    margin-bottom: 4px;
+  }
+
+  /* Data Display */
+  .log-data {
+    margin-top: 6px;
+  }
+
+  .log-data-toggle {
+    background: transparent;
+    border: none;
+    color: var(--text-secondary);
+    cursor: pointer;
+    padding: 2px 0;
+    font-size: 11px;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+  }
+
+  .log-data-toggle:hover {
+    color: var(--text-primary);
+  }
+
+  .log-data-toggle::before {
+    content: '▶';
+    font-size: 8px;
+    transition: transform 0.15s ease;
+  }
+
+  .log-data-toggle.expanded::before {
+    transform: rotate(90deg);
+  }
+
+  .log-data-content {
+    display: none;
+    margin-top: 6px;
+    padding: 8px;
+    background: var(--bg-secondary);
+    border-radius: 4px;
+    font-size: 11px;
+    overflow-x: auto;
+    white-space: pre-wrap;
+    word-break: break-all;
+  }
+
+  .log-data-content.visible {
+    display: block;
+  }
+
+  /* Toggle Button (floating) */
+  .devlogger-toggle {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    width: 48px;
+    height: 48px;
+    border-radius: 50%;
+    background: ${g.buttonBg};
+    color: white;
+    border: none;
+    cursor: pointer;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+    font-size: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.2s ease;
+    z-index: 99998;
+  }
+
+  .devlogger-toggle:hover {
+    background: ${g.buttonHover};
+    transform: scale(1.05);
+  }
+
+  .devlogger-toggle.hidden {
+    display: none;
+  }
+
+  /* Footer / Status */
+  .devlogger-footer {
+    padding: 6px 12px;
+    background: var(--bg-header);
+    border-top: 1px solid var(--border);
+    font-size: 11px;
+    color: var(--text-muted);
+    display: flex;
+    justify-content: space-between;
+    flex-shrink: 0;
+  }
+
+  .devlogger-shortcut {
+    opacity: 0.7;
+  }
+
+  /* Filter Bar */
+  .filter-bar {
+    padding: 8px 12px;
+    background: var(--bg-secondary);
+    border-bottom: 1px solid var(--border);
+    flex-shrink: 0;
+  }
+
+  .filter-bar.filter-active {
+    background: rgba(55, 148, 255, 0.08);
+    border-bottom-color: ${g.levelInfo};
+  }
+
+  .filter-row {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .filter-levels {
+    display: flex;
+    gap: 2px;
+  }
+
+  .filter-level-btn {
+    width: 24px;
+    height: 24px;
+    border: 1px solid var(--border);
+    border-radius: 4px;
+    background: transparent;
+    color: var(--text-muted);
+    cursor: pointer;
+    font-size: 10px;
+    font-weight: 600;
+    transition: all 0.15s ease;
+  }
+
+  .filter-level-btn:hover {
+    background: var(--bg-hover);
+    color: var(--text-primary);
+  }
+
+  .filter-level-btn.active {
+    color: white;
+  }
+
+  .filter-level-btn.active[data-level="debug"] {
+    background: ${g.levelDebug};
+    border-color: ${g.levelDebug};
+  }
+
+  .filter-level-btn.active[data-level="info"] {
+    background: ${g.levelInfo};
+    border-color: ${g.levelInfo};
+  }
+
+  .filter-level-btn.active[data-level="warn"] {
+    background: ${g.levelWarn};
+    border-color: ${g.levelWarn};
+  }
+
+  .filter-level-btn.active[data-level="error"] {
+    background: ${g.levelError};
+    border-color: ${g.levelError};
+  }
+
+  .filter-search {
+    flex: 1;
+  }
+
+  .filter-file {
+    width: 120px;
+  }
+
+  .filter-input {
+    width: 100%;
+    padding: 4px 8px;
+    border: 1px solid var(--border);
+    border-radius: 4px;
+    background: var(--bg-primary);
+    color: var(--text-primary);
+    font-size: 11px;
+    font-family: inherit;
+    outline: none;
+    transition: border-color 0.15s ease;
+  }
+
+  .filter-input::placeholder {
+    color: var(--text-muted);
+  }
+
+  .filter-input:focus {
+    border-color: ${g.levelInfo};
+  }
+
+  .filter-clear-btn {
+    width: 24px;
+    height: 24px;
+    border: none;
+    border-radius: 4px;
+    background: rgba(241, 76, 76, 0.2);
+    color: ${g.levelError};
+    cursor: pointer;
+    font-size: 12px;
+    transition: all 0.15s ease;
+  }
+
+  .filter-clear-btn:hover {
+    background: ${g.levelError};
+    color: white;
+  }
+
+  .filter-status {
+    margin-top: 6px;
+    font-size: 10px;
+    color: ${g.levelInfo};
+  }
+
+  /* No results state */
+  .devlogger-no-results {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    color: var(--text-muted);
+    gap: 8px;
+  }
+
+  .devlogger-no-results-icon {
+    font-size: 24px;
+    opacity: 0.5;
+  }
+
+  .devlogger-no-results-text {
+    font-style: italic;
+  }
+
+  /* Diff Display */
+  .diff-container {
+    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+    font-size: 11px;
+  }
+
+  .diff-summary {
+    display: flex;
+    gap: 8px;
+    margin-bottom: 8px;
+    padding-bottom: 8px;
+    border-bottom: 1px solid var(--border);
+  }
+
+  .diff-count {
+    padding: 2px 6px;
+    border-radius: 3px;
+    font-weight: 600;
+  }
+
+  .diff-count.diff-added {
+    background: rgba(80, 200, 120, 0.2);
+    color: #50c878;
+  }
+
+  .diff-count.diff-removed {
+    background: rgba(241, 76, 76, 0.2);
+    color: ${g.levelError};
+  }
+
+  .diff-count.diff-changed {
+    background: rgba(204, 167, 0, 0.2);
+    color: ${g.levelWarn};
+  }
+
+  .diff-count.diff-unchanged {
+    background: var(--bg-hover);
+    color: var(--text-muted);
+  }
+
+  .diff-changes {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+  }
+
+  .diff-entry {
+    padding: 2px 6px;
+    border-radius: 3px;
+    display: flex;
+    gap: 6px;
+  }
+
+  .diff-entry.diff-added {
+    background: rgba(80, 200, 120, 0.1);
+    color: #50c878;
+  }
+
+  .diff-entry.diff-removed {
+    background: rgba(241, 76, 76, 0.1);
+    color: ${g.levelError};
+  }
+
+  .diff-entry.diff-changed {
+    background: rgba(204, 167, 0, 0.1);
+    color: ${g.levelWarn};
+  }
+
+  .diff-icon {
+    font-weight: bold;
+    width: 12px;
+    flex-shrink: 0;
+  }
+
+  .diff-path {
+    color: var(--text-secondary);
+    flex-shrink: 0;
+  }
+
+  .diff-value {
+    word-break: break-all;
+  }
+
+  .log-data-diff .log-data-toggle {
+    color: ${g.levelInfo};
+  }
+`;
+function Ue(t) {
+  const e = new Date(t), n = e.getHours().toString().padStart(2, "0"), o = e.getMinutes().toString().padStart(2, "0"), r = e.getSeconds().toString().padStart(2, "0"), s = e.getMilliseconds().toString().padStart(3, "0");
+  return `${n}:${o}:${r}.${s}`;
+}
+function de(t) {
+  return t.file === "unknown" ? "unknown" : `${t.file}:${t.line}`;
+}
+function ye(t) {
+  return t !== null && typeof t == "object" && t.__type === "Diff" && t.diff !== void 0;
+}
+function $(t) {
+  if (t === void 0) return "undefined";
+  if (t === null) return "null";
+  if (typeof t == "string") return `"${t}"`;
+  if (typeof t == "number" || typeof t == "boolean") return String(t);
+  if (Array.isArray(t))
+    return t.length === 0 ? "[]" : t.length <= 3 ? `[${t.map($).join(", ")}]` : `[${t.length} items]`;
+  if (typeof t == "object") {
+    const e = Object.keys(t);
+    return e.length === 0 ? "{}" : e.length <= 2 ? `{${e.map((n) => `${n}: ${$(t[n])}`).join(", ")}}` : `{${e.length} keys}`;
+  }
+  return String(t);
+}
+function Ve(t) {
+  const e = `diff-${t.type}`, n = t.type === "added" ? "+" : t.type === "removed" ? "-" : t.type === "changed" ? "~" : " ";
+  let o = "";
+  return t.type === "added" ? o = $(t.newValue) : t.type === "removed" ? o = $(t.oldValue) : t.type === "changed" && (o = `${$(t.oldValue)} → ${$(t.newValue)}`), `<div class="diff-entry ${e}"><span class="diff-icon">${n}</span> <span class="diff-path">${t.path}</span>: <span class="diff-value">${o}</span></div>`;
+}
+function je(t) {
+  const { diff: e } = t, { summary: n, changes: o } = e;
+  let r = '<div class="diff-container">';
+  if (r += '<div class="diff-summary">', n.added > 0 && (r += `<span class="diff-count diff-added">+${n.added}</span>`), n.removed > 0 && (r += `<span class="diff-count diff-removed">-${n.removed}</span>`), n.changed > 0 && (r += `<span class="diff-count diff-changed">~${n.changed}</span>`), n.added === 0 && n.removed === 0 && n.changed === 0 && (r += '<span class="diff-count diff-unchanged">No changes</span>'), r += "</div>", o.length > 0) {
+    r += '<div class="diff-changes">';
+    for (const s of o)
+      r += Ve(s);
+    r += "</div>";
+  }
+  return r += "</div>", r;
+}
+function We(t) {
+  if (t.length === 0)
+    return "";
+  try {
+    return t.map((e) => typeof e == "string" ? e : JSON.stringify(e, null, 2)).join(`
+`);
+  } catch {
+    return "[Unable to display data]";
+  }
+}
+function Ge(t) {
+  return t.some(ye);
+}
+function M(t) {
+  const e = document.createElement("div");
+  return e.textContent = t, e.innerHTML;
+}
+function Je(t) {
+  return !t || Object.keys(t).length === 0 ? "" : Object.entries(t).map(([e, n]) => `${e}=${n}`).join(" · ");
+}
+function xe(t) {
+  const e = document.createElement("div");
+  e.className = `log-entry${t.spanId ? " log-entry-in-span" : ""}`, e.dataset.id = t.id, t.spanId && (e.dataset.spanId = t.spanId);
+  const n = t.data.length > 0, o = Ge(t.data), r = t.context && Object.keys(t.context).length > 0, s = `data-${t.id}`, c = () => {
+    if (!n) return "";
+    if (o) {
+      const l = t.data.find(ye);
+      if (l)
+        return `
+          <div class="log-data log-data-diff">
+            <button class="log-data-toggle" data-target="${s}">
+              diff
+            </button>
+            <div class="log-data-content" id="${s}">${je(l)}</div>
+          </div>
+        `;
+    }
+    return `
+      <div class="log-data">
+        <button class="log-data-toggle" data-target="${s}">
+          ${t.data.length} item${t.data.length > 1 ? "s" : ""}
+        </button>
+        <pre class="log-data-content" id="${s}">${M(We(t.data))}</pre>
+      </div>
+    `;
+  };
+  if (e.innerHTML = `
+    <div class="log-entry-header">
+      <span class="log-level log-level-${t.level}">${t.level}</span>
+      <span class="log-time">${Ue(t.timestamp)}</span>
+      ${r ? `<span class="log-context" title="Context">${M(Je(t.context))}</span>` : ""}
+      <span class="log-source" title="${M(de(t.source))}">${M(de(t.source))}</span>
+    </div>
+    <div class="log-message">${M(t.message)}</div>
+    ${c()}
+  `, n) {
+    const l = e.querySelector(".log-data-toggle"), a = e.querySelector(`#${s}`);
+    l && a && l.addEventListener("click", () => {
+      l.classList.toggle("expanded"), a.classList.toggle("visible");
+    });
+  }
+  return e;
+}
+function Xe() {
+  const t = document.createElement("div");
+  return t.className = "devlogger-empty", t.textContent = "No logs yet...", t;
+}
+const Ye = "devlogger-sync";
+function Ke() {
+  return `sender_${Date.now()}_${Math.random().toString(36).slice(2, 9)}`;
+}
+class Qe {
+  constructor() {
+    p(this, "channel", null);
+    p(this, "handlers", /* @__PURE__ */ new Set());
+    p(this, "senderId");
+    p(this, "isConnected", !1);
+    this.senderId = Ke(), this.connect();
+  }
+  /**
+   * Connect to the broadcast channel
+   */
+  connect() {
+    try {
+      if (typeof BroadcastChannel > "u") {
+        console.warn("[DevLogger] BroadcastChannel not supported");
+        return;
+      }
+      this.channel = new BroadcastChannel(Ye), this.channel.onmessage = (e) => {
+        this.handleMessage(e.data);
+      }, this.channel.onmessageerror = () => {
+        console.warn("[DevLogger] Channel message error");
+      }, this.isConnected = !0;
+    } catch (e) {
+      console.warn("[DevLogger] Failed to connect to channel:", e), this.isConnected = !1;
+    }
+  }
+  /**
+   * Handle incoming messages
+   */
+  handleMessage(e) {
+    if (e.senderId !== this.senderId)
+      for (const n of this.handlers)
+        try {
+          n(e);
+        } catch {
+        }
+  }
+  /**
+   * Send a message to all connected windows/tabs
+   */
+  send(e, n) {
+    try {
+      if (!this.channel || !this.isConnected)
+        return;
+      const o = {
+        type: e,
+        payload: n,
+        senderId: this.senderId,
+        timestamp: Date.now()
+      };
+      this.channel.postMessage(o);
+    } catch {
+    }
+  }
+  /**
+   * Send a new log to all connected windows
+   */
+  sendLog(e) {
+    this.send("NEW_LOG", e);
+  }
+  /**
+   * Request all logs from main window
+   */
+  requestSync() {
+    this.send("SYNC_REQUEST");
+  }
+  /**
+   * Send all logs as sync response
+   */
+  sendSyncResponse(e) {
+    this.send("SYNC_RESPONSE", e);
+  }
+  /**
+   * Notify all windows to clear logs
+   */
+  sendClear() {
+    this.send("CLEAR_LOGS");
+  }
+  /**
+   * Subscribe to channel messages
+   */
+  subscribe(e) {
+    return this.handlers.add(e), () => {
+      this.handlers.delete(e);
+    };
+  }
+  /**
+   * Check if channel is connected
+   */
+  isActive() {
+    return this.isConnected;
+  }
+  /**
+   * Get this window's sender ID
+   */
+  getSenderId() {
+    return this.senderId;
+  }
+  /**
+   * Close the channel
+   */
+  close() {
+    try {
+      this.channel && (this.channel.close(), this.channel = null), this.handlers.clear(), this.isConnected = !1;
+    } catch {
+    }
+  }
+}
+const H = new Qe(), ge = 500, fe = 700;
+let b = null;
+function Ze() {
+  try {
+    if (b && !b.closed)
+      return b.focus(), b;
+    const t = Math.max(0, (screen.width - ge) / 2), e = Math.max(0, (screen.height - fe) / 2), n = tt();
+    return b = window.open(
+      "",
+      "devlogger-popout",
+      `width=${ge},height=${fe},left=${t},top=${e},resizable=yes,scrollbars=yes`
+    ), b ? (b.document.open(), b.document.write(n), b.document.close(), b.addEventListener("load", () => {
+      setTimeout(() => {
+        H.sendSyncResponse(u.getLogs());
+      }, 100);
+    }), b) : (console.warn("[DevLogger] Pop-out blocked by browser"), null);
+  } catch (t) {
+    return console.warn("[DevLogger] Failed to open pop-out:", t), null;
+  }
+}
+function ue() {
+  try {
+    b && !b.closed && b.close(), b = null;
+  } catch {
+  }
+}
+function et() {
+  return b !== null && !b.closed;
+}
+function tt() {
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>DevLogger - Pop-out</title>
+  <style>
+    :root {
+      --bg-primary: #1e1e1e;
+      --bg-secondary: #252526;
+      --bg-hover: #2a2a2a;
+      --bg-header: #333333;
+      --text-primary: #cccccc;
+      --text-secondary: #858585;
+      --text-muted: #6e6e6e;
+      --border: #3c3c3c;
+      --level-debug: #6e6e6e;
+      --level-info: #3794ff;
+      --level-warn: #cca700;
+      --level-error: #f14c4c;
+      --button-bg: #0e639c;
+      --button-hover: #1177bb;
+    }
+
+    * {
+      box-sizing: border-box;
+      margin: 0;
+      padding: 0;
+    }
+
+    body {
+      font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
+      font-size: 12px;
+      line-height: 1.4;
+      background: var(--bg-primary);
+      color: var(--text-primary);
+      height: 100vh;
+      display: flex;
+      flex-direction: column;
+    }
+
+    .header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 12px 16px;
+      background: var(--bg-header);
+      border-bottom: 1px solid var(--border);
+    }
+
+    .title {
+      font-weight: 600;
+      font-size: 14px;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .badge {
+      background: var(--level-info);
+      color: white;
+      padding: 2px 8px;
+      border-radius: 10px;
+      font-size: 11px;
+    }
+
+    .status {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      font-size: 11px;
+      color: var(--text-muted);
+    }
+
+    .status-dot {
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      background: #4caf50;
+    }
+
+    .status-dot.disconnected {
+      background: var(--level-error);
+    }
+
+    .actions {
+      display: flex;
+      gap: 8px;
+    }
+
+    .btn {
+      background: transparent;
+      border: 1px solid var(--border);
+      color: var(--text-secondary);
+      padding: 6px 12px;
+      border-radius: 4px;
+      cursor: pointer;
+      font-size: 12px;
+      transition: all 0.15s ease;
+    }
+
+    .btn:hover {
+      background: var(--bg-hover);
+      color: var(--text-primary);
+    }
+
+    .btn-copy {
+      font-size: 10px;
+      padding: 4px 8px;
+    }
+
+    .btn-copy.success {
+      background: #4caf50;
+      border-color: #4caf50;
+      color: white;
+    }
+
+    .btn-copy.error {
+      background: var(--level-error);
+      border-color: var(--level-error);
+      color: white;
+    }
+
+    .btn-timeline {
+      font-size: 10px;
+      padding: 4px 8px;
+    }
+
+    .btn-timeline.active {
+      background: var(--level-info);
+      border-color: var(--level-info);
+      color: white;
+    }
+
+    /* Timeline Container */
+    .timeline-container {
+      position: relative;
+      background: var(--bg-secondary);
+      border-bottom: 1px solid var(--border);
+      padding: 8px;
+    }
+
+    #timeline-canvas {
+      width: 100%;
+      height: 120px;
+      background: var(--bg-primary);
+      border-radius: 4px;
+    }
+
+    .timeline-tooltip {
+      position: absolute;
+      background: var(--bg-header);
+      border: 1px solid var(--border);
+      border-radius: 4px;
+      padding: 6px 10px;
+      font-size: 11px;
+      pointer-events: none;
+      display: none;
+      z-index: 100;
+      max-width: 250px;
+    }
+
+    .timeline-controls {
+      display: flex;
+      justify-content: center;
+      gap: 4px;
+      margin-top: 6px;
+    }
+
+    .timeline-btn {
+      background: transparent;
+      border: 1px solid var(--border);
+      color: var(--text-muted);
+      padding: 2px 8px;
+      border-radius: 3px;
+      cursor: pointer;
+      font-size: 10px;
+    }
+
+    .timeline-btn:hover {
+      background: var(--bg-hover);
+      color: var(--text-primary);
+    }
+
+    .timeline-btn.active {
+      background: var(--button-bg);
+      border-color: var(--button-bg);
+      color: white;
+    }
+
+    /* Filter Bar Styles */
+    .filter-bar {
+      padding: 8px 16px;
+      background: var(--bg-secondary);
+      border-bottom: 1px solid var(--border);
+    }
+
+    .filter-bar.filter-active {
+      border-bottom-color: var(--level-info);
+    }
+
+    .filter-row {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .filter-levels {
+      display: flex;
+      gap: 4px;
+    }
+
+    .filter-level-btn {
+      width: 24px;
+      height: 24px;
+      border: 1px solid var(--border);
+      border-radius: 4px;
+      background: transparent;
+      color: var(--text-muted);
+      cursor: pointer;
+      font-size: 11px;
+      font-weight: 600;
+      transition: all 0.15s ease;
+    }
+
+    .filter-level-btn:hover {
+      background: var(--bg-hover);
+      color: var(--text-primary);
+    }
+
+    .filter-level-btn.active {
+      background: var(--bg-hover);
+      color: var(--text-primary);
+      border-color: var(--text-secondary);
+    }
+
+    .filter-level-btn[data-level="debug"].active { border-color: var(--level-debug); color: var(--level-debug); }
+    .filter-level-btn[data-level="info"].active { border-color: var(--level-info); color: var(--level-info); }
+    .filter-level-btn[data-level="warn"].active { border-color: var(--level-warn); color: var(--level-warn); }
+    .filter-level-btn[data-level="error"].active { border-color: var(--level-error); color: var(--level-error); }
+
+    .filter-input {
+      flex: 1;
+      min-width: 80px;
+      padding: 4px 8px;
+      border: 1px solid var(--border);
+      border-radius: 4px;
+      background: var(--bg-primary);
+      color: var(--text-primary);
+      font-size: 12px;
+      font-family: inherit;
+    }
+
+    .filter-input:focus {
+      outline: none;
+      border-color: var(--level-info);
+    }
+
+    .filter-input::placeholder {
+      color: var(--text-muted);
+    }
+
+    .filter-clear-btn {
+      width: 24px;
+      height: 24px;
+      border: 1px solid var(--border);
+      border-radius: 4px;
+      background: transparent;
+      color: var(--text-muted);
+      cursor: pointer;
+      font-size: 14px;
+      line-height: 1;
+      transition: all 0.15s ease;
+    }
+
+    .filter-clear-btn:hover {
+      background: var(--level-error);
+      border-color: var(--level-error);
+      color: white;
+    }
+
+    .filter-status {
+      font-size: 11px;
+      color: var(--text-muted);
+      margin-top: 6px;
+    }
+
+    .logs {
+      flex: 1;
+      overflow-y: auto;
+      overflow-x: hidden;
+    }
+
+    .logs::-webkit-scrollbar {
+      width: 8px;
+    }
+
+    .logs::-webkit-scrollbar-track {
+      background: var(--bg-primary);
+    }
+
+    .logs::-webkit-scrollbar-thumb {
+      background: #4a4a4a;
+      border-radius: 4px;
+    }
+
+    .empty {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 100%;
+      color: var(--text-muted);
+      font-style: italic;
+    }
+
+    .log-entry {
+      border-bottom: 1px solid var(--border);
+      padding: 10px 16px;
+    }
+
+    .log-entry:hover {
+      background: var(--bg-hover);
+    }
+
+    .log-header {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      margin-bottom: 4px;
+    }
+
+    .log-level {
+      font-weight: 600;
+      font-size: 10px;
+      text-transform: uppercase;
+      padding: 2px 6px;
+      border-radius: 3px;
+      min-width: 45px;
+      text-align: center;
+    }
+
+    .log-level-debug { background: rgba(110, 110, 110, 0.2); color: var(--level-debug); }
+    .log-level-info { background: rgba(55, 148, 255, 0.15); color: var(--level-info); }
+    .log-level-warn { background: rgba(204, 167, 0, 0.15); color: var(--level-warn); }
+    .log-level-error { background: rgba(241, 76, 76, 0.15); color: var(--level-error); }
+
+    .log-time {
+      color: var(--text-muted);
+      font-size: 11px;
+    }
+
+    .log-source {
+      color: var(--text-secondary);
+      font-size: 11px;
+      margin-left: auto;
+    }
+
+    .log-message {
+      color: var(--text-primary);
+      word-break: break-word;
+    }
+
+    .log-data {
+      margin-top: 6px;
+    }
+
+    .log-data-toggle {
+      background: transparent;
+      border: none;
+      color: var(--text-secondary);
+      cursor: pointer;
+      padding: 2px 0;
+      font-size: 11px;
+      display: flex;
+      align-items: center;
+      gap: 4px;
+    }
+
+    .log-data-toggle:hover {
+      color: var(--text-primary);
+    }
+
+    .log-data-toggle::before {
+      content: '▶';
+      font-size: 8px;
+      transition: transform 0.15s ease;
+    }
+
+    .log-data-toggle.expanded::before {
+      transform: rotate(90deg);
+    }
+
+    .log-data-content {
+      display: none;
+      margin-top: 6px;
+      padding: 8px;
+      background: var(--bg-secondary);
+      border-radius: 4px;
+      font-size: 11px;
+      overflow-x: auto;
+      white-space: pre-wrap;
+      word-break: break-all;
+    }
+
+    .log-data-content.visible {
+      display: block;
+    }
+
+    .footer {
+      padding: 8px 16px;
+      background: var(--bg-header);
+      border-top: 1px solid var(--border);
+      font-size: 11px;
+      color: var(--text-muted);
+      display: flex;
+      justify-content: space-between;
+    }
+  </style>
+</head>
+<body>
+  <div class="header">
+    <div class="title">
+      DevLogger
+      <span class="badge" id="log-count">0</span>
+    </div>
+    <div class="status">
+      <span class="status-dot" id="status-dot"></span>
+      <span id="status-text">Connected</span>
+    </div>
+    <div class="actions">
+      <button class="btn btn-copy" id="btn-copy-json" title="Copy as JSON">JSON</button>
+      <button class="btn btn-copy" id="btn-copy-text" title="Copy as Text">TXT</button>
+      <button class="btn btn-timeline" id="btn-timeline" title="Toggle Timeline">Timeline</button>
+      <button class="btn" id="btn-clear">Clear</button>
+    </div>
+  </div>
+
+  <div class="timeline-container" id="timeline-container" style="display: none;">
+    <canvas id="timeline-canvas"></canvas>
+    <div class="timeline-tooltip" id="timeline-tooltip"></div>
+    <div class="timeline-controls">
+      <button class="timeline-btn" data-window="10000">10s</button>
+      <button class="timeline-btn active" data-window="30000">30s</button>
+      <button class="timeline-btn" data-window="60000">60s</button>
+    </div>
+  </div>
+
+  <div class="filter-bar" id="filter-bar">
+    <div class="filter-row">
+      <div class="filter-levels">
+        <button class="filter-level-btn active" data-level="debug" title="Debug">D</button>
+        <button class="filter-level-btn active" data-level="info" title="Info">I</button>
+        <button class="filter-level-btn active" data-level="warn" title="Warning">W</button>
+        <button class="filter-level-btn active" data-level="error" title="Error">E</button>
+      </div>
+      <input type="text" class="filter-input" id="filter-search" placeholder="Search logs..." data-filter="search">
+      <input type="text" class="filter-input" id="filter-file" placeholder="Filter by file..." data-filter="file" style="max-width: 120px;">
+    </div>
+    <div class="filter-status" id="filter-status" style="display: none;"></div>
+  </div>
+
+  <div class="logs" id="logs">
+    <div class="empty">Waiting for logs...</div>
+  </div>
+
+  <div class="footer">
+    <span id="footer-count">0 logs</span>
+    <span>Pop-out Window</span>
+  </div>
+
+  <script>
+    // Pop-out window script
+    const CHANNEL_NAME = 'devlogger-sync';
+    let logs = [];
+    let channel = null;
+    let isConnected = false;
+
+    // Filter state
+    const filter = {
+      levels: new Set(['debug', 'info', 'warn', 'error']),
+      search: '',
+      file: ''
+    };
+
+    // DOM elements
+    const logsContainer = document.getElementById('logs');
+    const logCountBadge = document.getElementById('log-count');
+    const footerCount = document.getElementById('footer-count');
+    const statusDot = document.getElementById('status-dot');
+    const statusText = document.getElementById('status-text');
+    const btnClear = document.getElementById('btn-clear');
+    const btnCopyJson = document.getElementById('btn-copy-json');
+    const btnCopyText = document.getElementById('btn-copy-text');
+    const btnTimeline = document.getElementById('btn-timeline');
+    const timelineContainer = document.getElementById('timeline-container');
+    const timelineCanvas = document.getElementById('timeline-canvas');
+    const timelineTooltip = document.getElementById('timeline-tooltip');
+    const filterBar = document.getElementById('filter-bar');
+
+    // Timeline state
+    let timelineVisible = false;
+    let timelineWindow = 30000; // 30 seconds default
+    let timelineInterval = null;
+    const LEVEL_COLORS = {
+      debug: '#6e6e6e',
+      info: '#3794ff',
+      warn: '#cca700',
+      error: '#f14c4c'
+    };
+    const filterSearch = document.getElementById('filter-search');
+    const filterFile = document.getElementById('filter-file');
+    const filterStatus = document.getElementById('filter-status');
+
+    // Connect to broadcast channel
+    function connect() {
+      try {
+        channel = new BroadcastChannel(CHANNEL_NAME);
+        channel.onmessage = handleMessage;
+        isConnected = true;
+        updateStatus(true);
+
+        // Request sync from main window
+        channel.postMessage({
+          type: 'SYNC_REQUEST',
+          senderId: 'popout',
+          timestamp: Date.now()
+        });
+      } catch (e) {
+        console.error('Failed to connect:', e);
+        updateStatus(false);
+      }
+    }
+
+    // Handle incoming messages
+    function handleMessage(event) {
+      const message = event.data;
+
+      switch (message.type) {
+        case 'NEW_LOG':
+          addLog(message.payload);
+          break;
+        case 'SYNC_RESPONSE':
+          syncLogs(message.payload);
+          break;
+        case 'CLEAR_LOGS':
+          clearLogs();
+          break;
+      }
+    }
+
+    // Add a single log
+    function addLog(log) {
+      logs.push(log);
+      // Only render if log matches current filter
+      if (matchesFilter(log)) {
+        // Remove empty state if present
+        const empty = logsContainer.querySelector('.empty');
+        if (empty) empty.remove();
+        renderLog(log);
+        scrollToBottom();
+      }
+      updateCounts();
+      updateFilterUI();
+    }
+
+    // Sync all logs
+    function syncLogs(newLogs) {
+      logs = newLogs || [];
+      renderAllLogs();
+      updateCounts();
+    }
+
+    // Clear all logs
+    function clearLogs() {
+      logs = [];
+      renderAllLogs();
+      updateCounts();
+    }
+
+    // Check if a log matches the current filter
+    function matchesFilter(log) {
+      // Level filter
+      if (filter.levels.size > 0 && !filter.levels.has(log.level)) {
+        return false;
+      }
+
+      // File filter
+      if (filter.file && !log.source.file.toLowerCase().includes(filter.file.toLowerCase())) {
+        return false;
+      }
+
+      // Text search
+      if (filter.search) {
+        const searchLower = filter.search.toLowerCase();
+        const messageMatch = log.message.toLowerCase().includes(searchLower);
+        const dataMatch = JSON.stringify(log.data).toLowerCase().includes(searchLower);
+        if (!messageMatch && !dataMatch) {
+          return false;
+        }
+      }
+
+      return true;
+    }
+
+    // Get filtered logs
+    function getFilteredLogs() {
+      return logs.filter(log => matchesFilter(log));
+    }
+
+    // Check if any filter is active
+    function isFilterActive() {
+      return filter.levels.size !== 4 || filter.search !== '' || filter.file !== '';
+    }
+
+    // Update filter UI
+    function updateFilterUI() {
+      const active = isFilterActive();
+      const filteredLogs = getFilteredLogs();
+
+      filterBar.classList.toggle('filter-active', active);
+
+      if (active) {
+        filterStatus.style.display = 'block';
+        filterStatus.textContent = 'Showing ' + filteredLogs.length + ' of ' + logs.length + ' logs';
+      } else {
+        filterStatus.style.display = 'none';
+      }
+
+      // Update counts
+      logCountBadge.textContent = filteredLogs.length;
+      if (active) {
+        footerCount.textContent = filteredLogs.length + ' of ' + logs.length + ' logs';
+      } else {
+        footerCount.textContent = logs.length + ' logs';
+      }
+    }
+
+    // Render all logs
+    function renderAllLogs() {
+      const filteredLogs = getFilteredLogs();
+
+      if (logs.length === 0) {
+        logsContainer.innerHTML = '<div class="empty">No logs yet...</div>';
+        updateFilterUI();
+        return;
+      }
+
+      if (filteredLogs.length === 0) {
+        logsContainer.innerHTML = '<div class="empty">No logs match your filter</div>';
+        updateFilterUI();
+        return;
+      }
+
+      logsContainer.innerHTML = '';
+      filteredLogs.forEach(log => renderLog(log));
+      scrollToBottom();
+      updateFilterUI();
+    }
+
+    // Render a single log entry
+    function renderLog(log) {
+      // Remove empty state if present
+      const empty = logsContainer.querySelector('.empty');
+      if (empty) empty.remove();
+
+      const entry = document.createElement('div');
+      entry.className = 'log-entry';
+
+      const time = formatTime(log.timestamp);
+      const source = formatSource(log.source);
+      const hasData = log.data && log.data.length > 0;
+      const dataId = 'data-' + log.id;
+
+      entry.innerHTML = \`
+        <div class="log-header">
+          <span class="log-level log-level-\${log.level}">\${log.level}</span>
+          <span class="log-time">\${time}</span>
+          <span class="log-source">\${escapeHtml(source)}</span>
+        </div>
+        <div class="log-message">\${escapeHtml(log.message)}</div>
+        \${hasData ? \`
+          <div class="log-data">
+            <button class="log-data-toggle" data-target="\${dataId}">
+              \${log.data.length} item\${log.data.length > 1 ? 's' : ''}
+            </button>
+            <pre class="log-data-content" id="\${dataId}">\${escapeHtml(formatData(log.data))}</pre>
+          </div>
+        \` : ''}
+      \`;
+
+      // Add toggle handler
+      if (hasData) {
+        const toggle = entry.querySelector('.log-data-toggle');
+        const content = entry.querySelector('#' + dataId);
+        toggle.addEventListener('click', () => {
+          toggle.classList.toggle('expanded');
+          content.classList.toggle('visible');
+        });
+      }
+
+      logsContainer.appendChild(entry);
+    }
+
+    // Format timestamp
+    function formatTime(timestamp) {
+      const date = new Date(timestamp);
+      return date.toTimeString().split(' ')[0] + '.' +
+             date.getMilliseconds().toString().padStart(3, '0');
+    }
+
+    // Format source
+    function formatSource(source) {
+      if (!source || source.file === 'unknown') return 'unknown';
+      return source.file + ':' + source.line;
+    }
+
+    // Format data
+    function formatData(data) {
+      try {
+        return data.map(item =>
+          typeof item === 'string' ? item : JSON.stringify(item, null, 2)
+        ).join('\\n');
+      } catch {
+        return '[Unable to display]';
+      }
+    }
+
+    // Escape HTML
+    function escapeHtml(str) {
+      const div = document.createElement('div');
+      div.textContent = str;
+      return div.innerHTML;
+    }
+
+    // Update counts
+    function updateCounts() {
+      const count = logs.length;
+      logCountBadge.textContent = count;
+      footerCount.textContent = count + ' logs';
+    }
+
+    // Update connection status
+    function updateStatus(connected) {
+      isConnected = connected;
+      statusDot.className = 'status-dot' + (connected ? '' : ' disconnected');
+      statusText.textContent = connected ? 'Connected' : 'Disconnected';
+    }
+
+    // Scroll to bottom
+    function scrollToBottom() {
+      logsContainer.scrollTop = logsContainer.scrollHeight;
+    }
+
+    // Clear button handler
+    btnClear.addEventListener('click', () => {
+      if (channel) {
+        channel.postMessage({
+          type: 'CLEAR_LOGS',
+          senderId: 'popout',
+          timestamp: Date.now()
+        });
+      }
+      clearLogs();
+    });
+
+    // Export logs as JSON
+    function exportLogsJson() {
+      return JSON.stringify(logs, null, 2);
+    }
+
+    // Export logs as text
+    function exportLogsText() {
+      return logs.map(log => {
+        const time = new Date(log.timestamp).toISOString();
+        const level = log.level.toUpperCase().padEnd(5);
+        const source = log.source.file + ':' + log.source.line;
+        const context = log.context ? ' [' + Object.entries(log.context).map(([k, v]) => k + '=' + v).join(', ') + ']' : '';
+        const span = log.spanId ? ' (span: ' + log.spanId + ')' : '';
+        const data = log.data.length > 0 ? '\\n  Data: ' + JSON.stringify(log.data) : '';
+        return '[' + time + '] ' + level + ' ' + log.message + context + span + '\\n  Source: ' + source + data;
+      }).join('\\n\\n');
+    }
+
+    // Show copy feedback
+    function showCopyFeedback(button, success) {
+      const originalText = button.textContent;
+      button.textContent = success ? '✓' : '✗';
+      button.classList.add(success ? 'success' : 'error');
+      setTimeout(() => {
+        button.textContent = originalText;
+        button.classList.remove('success', 'error');
+      }, 1500);
+    }
+
+    // Copy JSON handler
+    btnCopyJson.addEventListener('click', () => {
+      navigator.clipboard.writeText(exportLogsJson()).then(() => {
+        showCopyFeedback(btnCopyJson, true);
+      }).catch(() => {
+        showCopyFeedback(btnCopyJson, false);
+      });
+    });
+
+    // Copy Text handler
+    btnCopyText.addEventListener('click', () => {
+      navigator.clipboard.writeText(exportLogsText()).then(() => {
+        showCopyFeedback(btnCopyText, true);
+      }).catch(() => {
+        showCopyFeedback(btnCopyText, false);
+      });
+    });
+
+    // Check connection periodically
+    setInterval(() => {
+      if (channel) {
+        try {
+          channel.postMessage({
+            type: 'PING',
+            senderId: 'popout',
+            timestamp: Date.now()
+          });
+        } catch {
+          updateStatus(false);
+        }
+      }
+    }, 5000);
+
+    // Filter: Level buttons
+    document.querySelectorAll('.filter-level-btn').forEach(btn => {
+      btn.addEventListener('click', (e) => {
+        const level = e.currentTarget.dataset.level;
+        if (filter.levels.has(level)) {
+          filter.levels.delete(level);
+          e.currentTarget.classList.remove('active');
+        } else {
+          filter.levels.add(level);
+          e.currentTarget.classList.add('active');
+        }
+        renderAllLogs();
+      });
+    });
+
+    // Filter: Search input
+    filterSearch.addEventListener('input', (e) => {
+      filter.search = e.target.value;
+      renderAllLogs();
+    });
+
+    // Filter: File input
+    filterFile.addEventListener('input', (e) => {
+      filter.file = e.target.value;
+      renderAllLogs();
+    });
+
+    // Timeline: Toggle button
+    btnTimeline.addEventListener('click', () => {
+      timelineVisible = !timelineVisible;
+      timelineContainer.style.display = timelineVisible ? 'block' : 'none';
+      btnTimeline.classList.toggle('active', timelineVisible);
+      if (timelineVisible) {
+        resizeCanvas();
+        drawTimeline();
+        startTimelineRefresh();
+      } else {
+        stopTimelineRefresh();
+      }
+    });
+
+    // Timeline: Time window buttons
+    document.querySelectorAll('.timeline-btn[data-window]').forEach(btn => {
+      btn.addEventListener('click', (e) => {
+        timelineWindow = parseInt(e.currentTarget.dataset.window);
+        document.querySelectorAll('.timeline-btn[data-window]').forEach(b => b.classList.remove('active'));
+        e.currentTarget.classList.add('active');
+        drawTimeline();
+      });
+    });
+
+    // Timeline: Resize canvas for proper DPI
+    function resizeCanvas() {
+      const rect = timelineCanvas.getBoundingClientRect();
+      const dpr = window.devicePixelRatio || 1;
+      timelineCanvas.width = rect.width * dpr;
+      timelineCanvas.height = rect.height * dpr;
+      const ctx = timelineCanvas.getContext('2d');
+      ctx.scale(dpr, dpr);
+    }
+
+    // Timeline: Draw the timeline visualization
+    function drawTimeline() {
+      const ctx = timelineCanvas.getContext('2d');
+      const rect = timelineCanvas.getBoundingClientRect();
+      const width = rect.width;
+      const height = rect.height;
+
+      // Clear canvas
+      ctx.fillStyle = '#1e1e1e';
+      ctx.fillRect(0, 0, width, height);
+
+      // Calculate time bounds
+      const now = Date.now();
+      const startTime = now - timelineWindow;
+
+      // Filter logs within time window
+      const visibleLogs = logs.filter(log => log.timestamp >= startTime && log.timestamp <= now);
+
+      // Draw time grid
+      ctx.strokeStyle = '#333';
+      ctx.lineWidth = 1;
+      const gridLines = 5;
+      for (let i = 0; i <= gridLines; i++) {
+        const x = (i / gridLines) * width;
+        ctx.beginPath();
+        ctx.moveTo(x, 0);
+        ctx.lineTo(x, height);
+        ctx.stroke();
+
+        // Draw time labels
+        const time = new Date(startTime + (i / gridLines) * timelineWindow);
+        ctx.fillStyle = '#666';
+        ctx.font = '10px monospace';
+        ctx.fillText(time.toTimeString().split(' ')[0], x + 3, height - 5);
+      }
+
+      // Draw log markers
+      const markerHeight = 16;
+      const bottomOffset = 20;
+
+      visibleLogs.forEach(log => {
+        const x = ((log.timestamp - startTime) / timelineWindow) * width;
+        const y = height - bottomOffset - markerHeight / 2;
+        const color = LEVEL_COLORS[log.level] || LEVEL_COLORS.debug;
+
+        // Draw marker
+        ctx.beginPath();
+        ctx.arc(x, y, 4, 0, Math.PI * 2);
+        ctx.fillStyle = color;
+        ctx.fill();
+
+        // Store bounds for hover
+        log._timelineBounds = { x, y, r: 8 };
+      });
+
+      // Draw level legend
+      ctx.font = '10px monospace';
+      let legendX = 10;
+      Object.entries(LEVEL_COLORS).forEach(([level, color]) => {
+        ctx.fillStyle = color;
+        ctx.beginPath();
+        ctx.arc(legendX, 12, 4, 0, Math.PI * 2);
+        ctx.fill();
+        ctx.fillStyle = '#888';
+        ctx.fillText(level, legendX + 8, 15);
+        legendX += ctx.measureText(level).width + 20;
+      });
+    }
+
+    // Timeline: Mouse move for tooltips
+    timelineCanvas.addEventListener('mousemove', (e) => {
+      const rect = timelineCanvas.getBoundingClientRect();
+      const x = e.clientX - rect.left;
+      const y = e.clientY - rect.top;
+
+      const hoveredLog = logs.find(log => {
+        if (!log._timelineBounds) return false;
+        const b = log._timelineBounds;
+        const dx = x - b.x;
+        const dy = y - b.y;
+        return Math.sqrt(dx * dx + dy * dy) <= b.r;
+      });
+
+      if (hoveredLog) {
+        const time = new Date(hoveredLog.timestamp).toTimeString().split(' ')[0];
+        timelineTooltip.innerHTML =
+          '<strong>[' + hoveredLog.level.toUpperCase() + ']</strong> ' +
+          escapeHtml(hoveredLog.message.substring(0, 100)) +
+          (hoveredLog.message.length > 100 ? '...' : '') +
+          '<br><small>' + time + '</small>';
+        timelineTooltip.style.display = 'block';
+        timelineTooltip.style.left = Math.min(e.clientX - rect.left + 10, rect.width - 260) + 'px';
+        timelineTooltip.style.top = (e.clientY - rect.top - 50) + 'px';
+      } else {
+        timelineTooltip.style.display = 'none';
+      }
+    });
+
+    // Timeline: Hide tooltip on mouse leave
+    timelineCanvas.addEventListener('mouseleave', () => {
+      timelineTooltip.style.display = 'none';
+    });
+
+    // Timeline: Start auto-refresh
+    function startTimelineRefresh() {
+      if (timelineInterval) return;
+      timelineInterval = setInterval(() => {
+        if (timelineVisible) drawTimeline();
+      }, 500);
+    }
+
+    // Timeline: Stop auto-refresh
+    function stopTimelineRefresh() {
+      if (timelineInterval) {
+        clearInterval(timelineInterval);
+        timelineInterval = null;
+      }
+    }
+
+    // Handle window resize for timeline
+    window.addEventListener('resize', () => {
+      if (timelineVisible) {
+        resizeCanvas();
+        drawTimeline();
+      }
+    });
+
+    // Initialize
+    connect();
+  <\/script>
+</body>
+</html>`;
+}
+function z() {
+  return {
+    levels: /* @__PURE__ */ new Set(["debug", "info", "warn", "error"]),
+    search: "",
+    file: ""
+  };
+}
+function nt(t, e) {
+  if (e.levels.size > 0 && !e.levels.has(t.level) || e.file && !t.source.file.toLowerCase().includes(e.file.toLowerCase()))
+    return !1;
+  if (e.search) {
+    const n = e.search.toLowerCase(), o = t.message.toLowerCase().includes(n), r = JSON.stringify(t.data).toLowerCase().includes(n);
+    if (!o && !r)
+      return !1;
+  }
+  return !0;
+}
+function U(t, e) {
+  return t.filter((n) => nt(n, e));
+}
+function te(t) {
+  return !(t.levels.size === 4) || t.search !== "" || t.file !== "";
+}
+function ot(t, e, n) {
+  const o = te(t);
+  return `
+    <div class="filter-bar ${o ? "filter-active" : ""}">
+      <div class="filter-row">
+        <div class="filter-levels">
+          <button class="filter-level-btn ${t.levels.has("debug") ? "active" : ""}" data-level="debug" title="Debug">D</button>
+          <button class="filter-level-btn ${t.levels.has("info") ? "active" : ""}" data-level="info" title="Info">I</button>
+          <button class="filter-level-btn ${t.levels.has("warn") ? "active" : ""}" data-level="warn" title="Warning">W</button>
+          <button class="filter-level-btn ${t.levels.has("error") ? "active" : ""}" data-level="error" title="Error">E</button>
+        </div>
+        <div class="filter-search">
+          <input type="text" class="filter-input" placeholder="Search logs..." value="${pe(t.search)}" data-filter="search">
+        </div>
+        <div class="filter-file">
+          <input type="text" class="filter-input filter-file-input" placeholder="Filter by file..." value="${pe(t.file)}" data-filter="file">
+        </div>
+        ${o ? '<button class="filter-clear-btn" title="Clear filters">✕</button>' : ""}
+      </div>
+      ${o ? `<div class="filter-status">Showing ${n} of ${e} logs</div>` : ""}
+    </div>
+  `;
+}
+function pe(t) {
+  return t.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");
+}
+const Q = { key: "l", ctrlKey: !0, shiftKey: !0 };
+function he(t, e) {
+  const n = t.textContent;
+  t.textContent = e ? "✓" : "✗", t.disabled = !0, setTimeout(() => {
+    t.textContent = n, t.disabled = !1;
+  }, 1e3);
+}
+const i = {
+  initialized: !1,
+  visible: !1,
+  host: null,
+  shadow: null,
+  container: null,
+  logsList: null,
+  filterBar: null,
+  toggleBtn: null,
+  badge: null,
+  unsubscribe: null,
+  channelUnsubscribe: null,
+  filter: z()
+};
+function rt(t) {
+  const e = document.createElement("style");
+  e.textContent = qe, t.appendChild(e);
+  const n = document.createElement("button");
+  n.className = "devlogger-toggle", n.innerHTML = "📋", n.title = "Toggle DevLogger (Ctrl+Shift+L)", n.addEventListener("click", () => j.toggle()), t.appendChild(n), i.toggleBtn = n;
+  const o = document.createElement("div");
+  o.className = "devlogger-container hidden";
+  const r = u.getLogs(), s = U(r, i.filter);
+  o.innerHTML = `
+    <div class="devlogger-header">
+      <div class="devlogger-title">
+        DevLogger
+        <span class="devlogger-badge">${s.length}</span>
+      </div>
+      <div class="devlogger-actions">
+        <button class="devlogger-btn" data-action="copy-json" title="Copy as JSON">JSON</button>
+        <button class="devlogger-btn" data-action="copy-text" title="Copy as Text">TXT</button>
+        <button class="devlogger-btn" data-action="clear" title="Clear logs">Clear</button>
+        <button class="devlogger-btn devlogger-btn-primary" data-action="popout" title="Open in new window">Pop-out</button>
+        <button class="devlogger-btn" data-action="close" title="Close (Ctrl+Shift+L)">✕</button>
+      </div>
+    </div>
+    <div class="filter-bar-container"></div>
+    <div class="devlogger-logs"></div>
+    <div class="devlogger-footer">
+      <span class="devlogger-log-count">${r.length} logs</span>
+      <span class="devlogger-shortcut">Ctrl+Shift+L to toggle</span>
+    </div>
+  `, i.badge = o.querySelector(".devlogger-badge"), i.logsList = o.querySelector(".devlogger-logs"), i.filterBar = o.querySelector(".filter-bar-container"), o.querySelectorAll("[data-action]").forEach((c) => {
+    c.addEventListener("click", (l) => {
+      const a = l.currentTarget.dataset.action, d = l.currentTarget;
+      switch (a) {
+        case "clear":
+          u.clear(), H.sendClear(), y();
+          break;
+        case "popout":
+          j.popout();
+          break;
+        case "close":
+          j.close();
+          break;
+        case "copy-json":
+          u.copyLogs({ format: "json" }).then((f) => {
+            he(d, f);
+          });
+          break;
+        case "copy-text":
+          u.copyLogs({ format: "text" }).then((f) => {
+            he(d, f);
+          });
+          break;
+      }
+    });
+  }), t.appendChild(o), i.container = o, I(), y();
+}
+function I() {
+  if (!i.filterBar) return;
+  const t = u.getLogs(), e = U(t, i.filter);
+  i.filterBar.innerHTML = ot(i.filter, t.length, e.length), it();
+}
+function it() {
+  if (!i.filterBar) return;
+  i.filterBar.querySelectorAll(".filter-level-btn").forEach((o) => {
+    o.addEventListener("click", (r) => {
+      const s = r.currentTarget.dataset.level;
+      i.filter.levels.has(s) ? i.filter.levels.delete(s) : i.filter.levels.add(s), I(), y();
+    });
+  });
+  const t = i.filterBar.querySelector('[data-filter="search"]');
+  t && t.addEventListener("input", (o) => {
+    i.filter.search = o.target.value, Z(), y();
+  });
+  const e = i.filterBar.querySelector('[data-filter="file"]');
+  e && e.addEventListener("input", (o) => {
+    i.filter.file = o.target.value, Z(), y();
+  });
+  const n = i.filterBar.querySelector(".filter-clear-btn");
+  n && n.addEventListener("click", () => {
+    i.filter = z(), I(), y();
+  });
+}
+function y() {
+  if (!i.logsList) return;
+  const t = u.getLogs(), e = U(t, i.filter);
+  if (i.logsList.innerHTML = "", t.length === 0)
+    i.logsList.appendChild(Xe());
+  else if (e.length === 0) {
+    const n = document.createElement("div");
+    n.className = "devlogger-no-results", n.innerHTML = `
+      <span class="devlogger-no-results-icon">🔍</span>
+      <span class="devlogger-no-results-text">No logs match your filter</span>
+    `, i.logsList.appendChild(n);
+  } else {
+    const n = document.createDocumentFragment();
+    for (const o of e)
+      n.appendChild(xe(o));
+    i.logsList.appendChild(n);
+  }
+  we(e.length, t.length), ne();
+}
+function st(t) {
+  if (!i.logsList) return;
+  const e = u.getLogs(), n = U(e, i.filter);
+  if (n.some((r) => r.id === t.id)) {
+    const r = i.logsList.querySelector(".devlogger-empty, .devlogger-no-results");
+    r && r.remove(), i.logsList.appendChild(xe(t));
+  }
+  we(n.length, e.length), Z(), ne();
+}
+function we(t, e) {
+  i.badge && (i.badge.textContent = String(t));
+  const n = i.container?.querySelector(".devlogger-log-count");
+  n && (te(i.filter) ? n.textContent = `${t} of ${e} logs` : n.textContent = `${e} logs`);
+}
+function Z() {
+  if (!i.filterBar) return;
+  const t = u.getLogs(), e = U(t, i.filter), n = te(i.filter), o = i.filterBar.querySelector(".filter-bar");
+  o && o.classList.toggle("filter-active", n);
+  let r = i.filterBar.querySelector(".filter-status");
+  if (n) {
+    r || (r = document.createElement("div"), r.className = "filter-status", o?.appendChild(r)), r.textContent = `Showing ${e.length} of ${t.length} logs`;
+    let s = i.filterBar.querySelector(".filter-clear-btn");
+    s || (s = document.createElement("button"), s.className = "filter-clear-btn", s.setAttribute("title", "Clear filters"), s.textContent = "✕", s.addEventListener("click", () => {
+      i.filter = z(), I(), y();
+    }), i.filterBar.querySelector(".filter-row")?.appendChild(s));
+  } else
+    r?.remove(), i.filterBar.querySelector(".filter-clear-btn")?.remove();
+}
+function ne() {
+  i.logsList && i.visible && (i.logsList.scrollTop = i.logsList.scrollHeight);
+}
+function be(t) {
+  t.key.toLowerCase() === Q.key && t.ctrlKey === Q.ctrlKey && t.shiftKey === Q.shiftKey && (t.preventDefault(), j.toggle());
+}
+function at(t) {
+  switch (t.type) {
+    case "CLEAR_LOGS":
+      u.clear(), y();
+      break;
+    case "SYNC_REQUEST":
+      H.sendSyncResponse(u.getLogs());
+      break;
+  }
+}
+const j = {
+  /**
+   * Initialize the overlay UI
+   */
+  init() {
+    try {
+      if (i.initialized || !u.isEnabled() || typeof document > "u")
+        return;
+      const t = document.createElement("div");
+      t.id = "devlogger-host", document.body.appendChild(t), i.host = t;
+      const e = t.attachShadow({ mode: "open" });
+      i.shadow = e, rt(e), i.unsubscribe = u.subscribe((n) => {
+        st(n), H.sendLog(n);
+      }), i.channelUnsubscribe = H.subscribe(at), document.addEventListener("keydown", be), i.initialized = !0;
+    } catch (t) {
+      console.warn("[DevLogger UI] Init error:", t);
+    }
+  },
+  /**
+   * Open the overlay panel
+   */
+  open() {
+    try {
+      i.initialized || this.init(), i.container && (i.container.classList.remove("hidden"), i.visible = !0, ne());
+    } catch {
+    }
+  },
+  /**
+   * Close the overlay panel
+   */
+  close() {
+    try {
+      i.container && (i.container.classList.add("hidden"), i.visible = !1);
+    } catch {
+    }
+  },
+  /**
+   * Toggle the overlay panel
+   */
+  toggle() {
+    i.visible ? this.close() : this.open();
+  },
+  /**
+   * Open logs in a separate window
+   */
+  popout() {
+    try {
+      i.initialized || this.init(), Ze();
+    } catch (t) {
+      console.warn("[DevLogger] Failed to open pop-out:", t);
+    }
+  },
+  /**
+   * Close the pop-out window
+   */
+  closePopout() {
+    ue();
+  },
+  /**
+   * Check if pop-out window is open
+   */
+  isPopoutOpen() {
+    return et();
+  },
+  /**
+   * Set filter state
+   */
+  setFilter(t) {
+    try {
+      t.levels !== void 0 && (i.filter.levels = t.levels), t.search !== void 0 && (i.filter.search = t.search), t.file !== void 0 && (i.filter.file = t.file), I(), y();
+    } catch {
+    }
+  },
+  /**
+   * Get current filter state
+   */
+  getFilter() {
+    return { ...i.filter, levels: new Set(i.filter.levels) };
+  },
+  /**
+   * Clear all filters
+   */
+  clearFilter() {
+    try {
+      i.filter = z(), I(), y();
+    } catch {
+    }
+  },
+  /**
+   * Destroy the UI and clean up
+   */
+  destroy() {
+    try {
+      ue(), i.unsubscribe && (i.unsubscribe(), i.unsubscribe = null), i.channelUnsubscribe && (i.channelUnsubscribe(), i.channelUnsubscribe = null), document.removeEventListener("keydown", be), i.host && (i.host.remove(), i.host = null), i.initialized = !1, i.visible = !1, i.shadow = null, i.container = null, i.logsList = null, i.filterBar = null, i.toggleBtn = null, i.badge = null, i.filter = z();
+    } catch {
+    }
+  },
+  /**
+   * Check if the UI is currently visible
+   */
+  isVisible() {
+    return i.visible;
+  },
+  /**
+   * Check if the UI has been initialized
+   */
+  isInitialized() {
+    return i.initialized;
+  }
+}, Le = {
+  captureErrors: !0,
+  captureRejections: !0,
+  errorPrefix: "[Uncaught Error]",
+  rejectionPrefix: "[Unhandled Rejection]"
+};
+let N = !1, L = { ...Le }, P = null, O = null;
+function lt(t, e, n, o, r) {
+  try {
+    const s = r || (t instanceof ErrorEvent ? t.error : null), c = s?.message || String(t), l = s?.stack;
+    u.error(`${L.errorPrefix} ${c}`, {
+      source: e || "unknown",
+      line: n || 0,
+      column: o || 0,
+      stack: l,
+      originalError: s ? {
+        name: s.name,
+        message: s.message,
+        stack: s.stack
+      } : void 0
+    });
+  } catch {
+  }
+  if (P)
+    try {
+      return P(t, e, n, o, r) ?? !1;
+    } catch {
+    }
+  return !1;
+}
+function ct(t) {
+  try {
+    const e = t.reason;
+    let n, o = {};
+    e instanceof Error ? (n = e.message, o = {
+      name: e.name,
+      message: e.message,
+      stack: e.stack
+    }) : typeof e == "string" ? n = e : (n = "Unknown rejection reason", o = { reason: e }), u.error(`${L.rejectionPrefix} ${n}`, o);
+  } catch {
+  }
+}
+function dt(t = {}) {
+  if (N) {
+    L = { ...L, ...t };
+    return;
+  }
+  try {
+    if (typeof window > "u")
+      return;
+    L = { ...Le, ...t }, P = window.onerror, L.captureErrors && (window.onerror = lt), L.captureRejections && (O = ct, window.addEventListener("unhandledrejection", O)), N = !0;
+  } catch {
+  }
+}
+function gt() {
+  if (N)
+    try {
+      if (typeof window > "u")
+        return;
+      window.onerror = P, O && window.removeEventListener("unhandledrejection", O), P = null, O = null, N = !1;
+    } catch {
+    }
+}
+function ft() {
+  return N;
+}
+function ut() {
+  return { ...L };
+}
+const Ot = {
+  /**
+   * Install global error handlers
+   *
+   * @example
+   * ```typescript
+   * // Install with defaults
+   * ErrorCapture.install();
+   *
+   * // Install with custom config
+   * ErrorCapture.install({
+   *   captureErrors: true,
+   *   captureRejections: true,
+   *   errorPrefix: '[ERROR]',
+   * });
+   * ```
+   */
+  install: dt,
+  /**
+   * Uninstall global error handlers and restore originals
+   */
+  uninstall: gt,
+  /**
+   * Check if error capture is currently active
+   */
+  isActive: ft,
+  /**
+   * Get current configuration
+   */
+  getConfig: ut
+}, J = "devlogger_persisted_logs", oe = "devlogger_session_active", Se = {
+  storage: "session",
+  maxPersisted: 500,
+  debounceMs: 100
+};
+let R = !1, S = { ...Se }, q = [], x = null, re = !1, W = null;
+function k() {
+  try {
+    return typeof window > "u" ? null : S.storage === "local" ? localStorage : sessionStorage;
+  } catch {
+    return null;
+  }
+}
+function pt() {
+  try {
+    const t = k();
+    return t ? t.getItem(oe) === "active" : !1;
+  } catch {
+    return !1;
+  }
+}
+function ht() {
+  try {
+    const t = k();
+    if (!t) return;
+    t.setItem(oe, "active");
+  } catch {
+  }
+}
+function Ce() {
+  try {
+    const t = k();
+    if (!t) return;
+    t.removeItem(oe);
+  } catch {
+  }
+}
+function ke(t) {
+  try {
+    const e = k();
+    if (!e) return;
+    const n = t.slice(-S.maxPersisted), o = JSON.stringify(n);
+    e.setItem(J, o);
+  } catch (e) {
+    if (e instanceof DOMException && e.name === "QuotaExceededError")
+      try {
+        const n = k();
+        if (!n) return;
+        const o = t.slice(-Math.floor(S.maxPersisted / 2));
+        n.setItem(J, JSON.stringify(o));
+      } catch {
+      }
+  }
+}
+function $e() {
+  try {
+    const t = k();
+    if (!t) return [];
+    const e = t.getItem(J);
+    if (!e) return [];
+    const n = JSON.parse(e);
+    return Array.isArray(n) ? n.filter(
+      (o) => o && typeof o.id == "string" && typeof o.timestamp == "number" && typeof o.level == "string" && typeof o.message == "string"
+    ) : [];
+  } catch {
+    return [];
+  }
+}
+function bt() {
+  try {
+    const t = k();
+    if (!t) return;
+    t.removeItem(J);
+  } catch {
+  }
+}
+function vt(t) {
+  q = t, x && clearTimeout(x), x = setTimeout(() => {
+    ke(q), x = null;
+  }, S.debounceMs);
+}
+function X() {
+  try {
+    x && (clearTimeout(x), x = null), q.length > 0 && ke(q), Ce();
+  } catch {
+  }
+}
+function mt() {
+  if (!R) return;
+  const t = u.getLogs();
+  vt([...t]);
+}
+function yt(t = {}) {
+  if (R) {
+    S = { ...S, ...t };
+    return;
+  }
+  try {
+    if (typeof window > "u")
+      return;
+    S = { ...Se, ...t }, re = pt(), ht(), W = u.subscribe(mt), window.addEventListener("beforeunload", X), window.addEventListener("pagehide", X), R = !0;
+  } catch {
+  }
+}
+function xt() {
+  if (R)
+    try {
+      if (typeof window > "u")
+        return;
+      x && (clearTimeout(x), x = null), W && (W(), W = null), window.removeEventListener("beforeunload", X), window.removeEventListener("pagehide", X), Ce(), R = !1;
+    } catch {
+    }
+}
+function wt() {
+  return re;
+}
+function Lt() {
+  return $e();
+}
+function St() {
+  try {
+    const t = $e();
+    return t.length === 0 ? 0 : (u.importLogs(t), t.length);
+  } catch {
+    return 0;
+  }
+}
+function Ct() {
+  bt(), q = [], re = !1;
+}
+function kt() {
+  return R;
+}
+function $t() {
+  return { ...S };
+}
+const At = {
+  /**
+   * Enable log persistence
+   *
+   * @example
+   * ```typescript
+   * LogPersistence.enable();
+   *
+   * // With options
+   * LogPersistence.enable({
+   *   storage: 'session',
+   *   maxPersisted: 500,
+   *   debounceMs: 100
+   * });
+   * ```
+   */
+  enable: yt,
+  /**
+   * Disable log persistence
+   */
+  disable: xt,
+  /**
+   * Check if persistence is enabled
+   */
+  isActive: kt,
+  /**
+   * Check if the last session had a crash (unclean shutdown)
+   */
+  hadCrash: wt,
+  /**
+   * Get persisted logs from previous session (without importing)
+   */
+  getPersistedLogs: Lt,
+  /**
+   * Rehydrate logs from storage into the logger
+   * Call this at app startup to restore logs from previous session
+   *
+   * @returns Number of logs rehydrated
+   *
+   * @example
+   * ```typescript
+   * // At app start
+   * LogPersistence.enable();
+   * const count = LogPersistence.rehydrate();
+   * if (LogPersistence.hadCrash()) {
+   *   console.log(`Recovered ${count} logs from crash`);
+   * }
+   * ```
+   */
+  rehydrate: St,
+  /**
+   * Clear all persisted logs
+   */
+  clear: Ct,
+  /**
+   * Get current configuration
+   */
+  getConfig: $t
+}, Ee = {
+  captureFetch: !0,
+  captureXHR: !0,
+  includeHeaders: !1,
+  includeBody: !1,
+  includeResponse: !1,
+  maxResponseLength: 1e3,
+  ignorePatterns: [],
+  context: {}
+};
+let E = null, A = null, T = null, B = !1, v = { ...Ee };
+function Te(t) {
+  for (const e of v.ignorePatterns)
+    if (typeof e == "string") {
+      if (t.includes(e)) return !0;
+    } else if (e.test(t))
+      return !0;
+  return !1;
+}
+function Ie(t) {
+  try {
+    const e = new URL(t, window.location.origin);
+    return {
+      host: e.host,
+      path: e.pathname + e.search,
+      full: e.href
+    };
+  } catch {
+    return { host: "unknown", path: t, full: t };
+  }
+}
+function Re(t, e) {
+  return t.length <= e ? t : t.slice(0, e) + "... (truncated)";
+}
+function Y(t) {
+  try {
+    return JSON.parse(t);
+  } catch {
+    return t;
+  }
+}
+function Et() {
+  return async function(e, n) {
+    const o = typeof e == "string" ? e : e instanceof URL ? e.href : e.url;
+    if (Te(o))
+      return E(e, n);
+    const { host: r, path: s } = Ie(o), c = n?.method || "GET", l = `${c} ${s}`, a = u.span(l, {
+      ...v.context,
+      type: "fetch",
+      method: c,
+      host: r
+    });
+    if (a.info(`Request started: ${o}`), v.includeHeaders && n?.headers && a.debug("Request headers", n.headers), v.includeBody && n?.body)
+      try {
+        const f = typeof n.body == "string" ? Y(n.body) : n.body;
+        a.debug("Request body", f);
+      } catch {
+        a.debug("Request body", "[Unable to parse]");
+      }
+    const d = performance.now();
+    try {
+      const f = await E(e, n), h = Math.round(performance.now() - d);
+      if (f.ok) {
+        if (a.info(`Response: ${f.status} ${f.statusText} (${h}ms)`), v.includeResponse)
+          try {
+            const K = await f.clone().text(), m = Y(Re(K, v.maxResponseLength));
+            a.debug("Response body", m);
+          } catch {
+            a.debug("Response body", "[Unable to read]");
+          }
+        a.end();
+      } else
+        a.warn(`Response: ${f.status} ${f.statusText} (${h}ms)`), a.fail();
+      return f;
+    } catch (f) {
+      const h = Math.round(performance.now() - d);
+      throw a.error(`Request failed after ${h}ms`, f), a.fail(), f;
+    }
+  };
+}
+function Tt() {
+  A = XMLHttpRequest.prototype.open, T = XMLHttpRequest.prototype.send, XMLHttpRequest.prototype.open = function(t, e, n = !0, o, r) {
+    const s = typeof e == "string" ? e : e.href;
+    return this.__networkCapture = {
+      method: t,
+      url: s,
+      ignored: Te(s)
+    }, A.call(this, t, e, n, o, r);
+  }, XMLHttpRequest.prototype.send = function(t) {
+    const e = this.__networkCapture;
+    if (!e || e.ignored)
+      return T.call(this, t);
+    const { method: n, url: o } = e, { host: r, path: s } = Ie(o), c = `${n} ${s}`, l = u.span(c, {
+      ...v.context,
+      type: "xhr",
+      method: n,
+      host: r
+    });
+    if (l.info(`XHR Request started: ${o}`), v.includeBody && t)
+      try {
+        const d = typeof t == "string" ? Y(t) : t;
+        l.debug("Request body", d);
+      } catch {
+        l.debug("Request body", "[Unable to parse]");
+      }
+    const a = performance.now();
+    return this.addEventListener("load", () => {
+      const d = Math.round(performance.now() - a);
+      if (this.status >= 200 && this.status < 400) {
+        if (l.info(`Response: ${this.status} ${this.statusText} (${d}ms)`), v.includeResponse && this.responseText) {
+          const f = Y(Re(this.responseText, v.maxResponseLength));
+          l.debug("Response body", f);
+        }
+        l.end();
+      } else
+        l.warn(`Response: ${this.status} ${this.statusText} (${d}ms)`), l.fail();
+    }), this.addEventListener("error", () => {
+      const d = Math.round(performance.now() - a);
+      l.error(`XHR Request failed after ${d}ms`), l.fail();
+    }), this.addEventListener("abort", () => {
+      const d = Math.round(performance.now() - a);
+      l.warn(`XHR Request aborted after ${d}ms`), l.fail();
+    }), this.addEventListener("timeout", () => {
+      const d = Math.round(performance.now() - a);
+      l.error(`XHR Request timeout after ${d}ms`), l.fail();
+    }), T.call(this, t);
+  };
+}
+function It() {
+  A && (XMLHttpRequest.prototype.open = A, A = null), T && (XMLHttpRequest.prototype.send = T, T = null);
+}
+const Ht = {
+  /**
+   * Install network capture hooks
+   */
+  install(t = {}) {
+    try {
+      if (B)
+        return;
+      v = { ...Ee, ...t }, v.captureFetch && typeof globalThis.fetch == "function" && (E = globalThis.fetch, globalThis.fetch = Et()), v.captureXHR && typeof XMLHttpRequest < "u" && Tt(), B = !0, u.debug("[NetworkCapture] Installed", {
+        fetch: v.captureFetch,
+        xhr: v.captureXHR
+      });
+    } catch (e) {
+      console.warn("[NetworkCapture] Install error:", e);
+    }
+  },
+  /**
+   * Uninstall network capture hooks
+   */
+  uninstall() {
+    try {
+      if (!B)
+        return;
+      E && (globalThis.fetch = E, E = null), It(), B = !1, u.debug("[NetworkCapture] Uninstalled");
+    } catch (t) {
+      console.warn("[NetworkCapture] Uninstall error:", t);
+    }
+  },
+  /**
+   * Check if capture is active
+   */
+  isActive() {
+    return B;
+  },
+  /**
+   * Get current configuration
+   */
+  getConfig() {
+    return { ...v };
+  },
+  /**
+   * Update ignore patterns
+   */
+  addIgnorePattern(t) {
+    v.ignorePatterns.push(t);
+  }
+}, Rt = {
+  debug: "#6e6e6e",
+  info: "#3794ff",
+  warn: "#cca700",
+  error: "#f14c4c"
+}, _t = {
+  running: "#3794ff",
+  success: "#4caf50",
+  error: "#f14c4c"
+};
+class Dt {
+  constructor(e) {
+    p(this, "container");
+    p(this, "config");
+    p(this, "canvas", null);
+    p(this, "ctx", null);
+    p(this, "intervalId", null);
+    p(this, "tooltip", null);
+    // Bounds maps to avoid mutating readonly objects
+    p(this, "spanBounds", /* @__PURE__ */ new Map());
+    p(this, "logBounds", /* @__PURE__ */ new Map());
+    const n = typeof e.container == "string" ? document.querySelector(e.container) : e.container;
+    if (!n)
+      throw new Error("Timeline: Container not found");
+    this.container = n, this.config = {
+      container: n,
+      timeWindow: e.timeWindow ?? 6e4,
+      refreshInterval: e.refreshInterval ?? 1e3,
+      showSpans: e.showSpans ?? !0,
+      showLogs: e.showLogs ?? !0,
+      height: e.height ?? 200
+    }, this.init();
+  }
+  init() {
+    this.container.innerHTML = `
+      <div class="devlogger-timeline" style="
+        position: relative;
+        background: #1e1e1e;
+        border: 1px solid #3c3c3c;
+        border-radius: 4px;
+        overflow: hidden;
+      ">
+        <div class="timeline-header" style="
+          display: flex;
+          justify-content: space-between;
+          padding: 8px 12px;
+          background: #252526;
+          border-bottom: 1px solid #3c3c3c;
+          font-family: 'SF Mono', monospace;
+          font-size: 12px;
+          color: #ccc;
+        ">
+          <span>Timeline</span>
+          <div class="timeline-controls">
+            <button data-window="10000" style="
+              background: transparent;
+              border: 1px solid #3c3c3c;
+              color: #858585;
+              padding: 2px 8px;
+              border-radius: 3px;
+              cursor: pointer;
+              margin-left: 4px;
+              font-size: 11px;
+            ">10s</button>
+            <button data-window="30000" style="
+              background: transparent;
+              border: 1px solid #3c3c3c;
+              color: #858585;
+              padding: 2px 8px;
+              border-radius: 3px;
+              cursor: pointer;
+              margin-left: 4px;
+              font-size: 11px;
+            ">30s</button>
+            <button data-window="60000" style="
+              background: #0e639c;
+              border: 1px solid #0e639c;
+              color: white;
+              padding: 2px 8px;
+              border-radius: 3px;
+              cursor: pointer;
+              margin-left: 4px;
+              font-size: 11px;
+            ">1m</button>
+            <button data-window="300000" style="
+              background: transparent;
+              border: 1px solid #3c3c3c;
+              color: #858585;
+              padding: 2px 8px;
+              border-radius: 3px;
+              cursor: pointer;
+              margin-left: 4px;
+              font-size: 11px;
+            ">5m</button>
+          </div>
+        </div>
+        <div class="timeline-canvas-container" style="position: relative;">
+          <canvas class="timeline-canvas"></canvas>
+        </div>
+        <div class="timeline-tooltip" style="
+          position: absolute;
+          display: none;
+          background: #333;
+          border: 1px solid #555;
+          padding: 8px;
+          border-radius: 4px;
+          font-family: 'SF Mono', monospace;
+          font-size: 11px;
+          color: #ccc;
+          max-width: 300px;
+          z-index: 1000;
+          pointer-events: none;
+        "></div>
+      </div>
+    `, this.canvas = this.container.querySelector(".timeline-canvas"), this.tooltip = this.container.querySelector(".timeline-tooltip"), this.canvas && (this.ctx = this.canvas.getContext("2d"), this.resizeCanvas()), this.container.querySelectorAll("[data-window]").forEach((e) => {
+      e.addEventListener("click", (n) => {
+        const o = n.currentTarget, r = parseInt(o.dataset.window || "60000", 10);
+        this.setTimeWindow(r), this.container.querySelectorAll("[data-window]").forEach((s) => {
+          const c = s;
+          c === o ? (c.style.background = "#0e639c", c.style.borderColor = "#0e639c", c.style.color = "white") : (c.style.background = "transparent", c.style.borderColor = "#3c3c3c", c.style.color = "#858585");
+        });
+      });
+    }), this.canvas && (this.canvas.addEventListener("mousemove", this.handleMouseMove.bind(this)), this.canvas.addEventListener("mouseleave", this.handleMouseLeave.bind(this))), this.startRefresh();
+  }
+  resizeCanvas() {
+    if (!this.canvas) return;
+    const e = this.container.getBoundingClientRect();
+    this.canvas.width = e.width - 2, this.canvas.height = this.config.height, this.render();
+  }
+  startRefresh() {
+    this.intervalId || (this.intervalId = window.setInterval(() => this.render(), this.config.refreshInterval), this.render());
+  }
+  stopRefresh() {
+    this.intervalId && (clearInterval(this.intervalId), this.intervalId = null);
+  }
+  setTimeWindow(e) {
+    this.config.timeWindow = e, this.render();
+  }
+  render() {
+    if (!this.canvas || !this.ctx) return;
+    const e = this.ctx, n = this.canvas.width, o = this.canvas.height, r = Date.now(), s = r - this.config.timeWindow;
+    e.fillStyle = "#1e1e1e", e.fillRect(0, 0, n, o), this.spanBounds.clear(), this.logBounds.clear(), this.drawTimeGrid(e, n, o, s, r);
+    const c = u.getLogs().filter((a) => a.timestamp >= s), l = u.getSpans().filter((a) => a.startTime >= s || a.endTime && a.endTime >= s);
+    this.config.showSpans && this.drawSpans(e, l, n, o, s, r), this.config.showLogs && this.drawLogs(e, c, n, o, s, r);
+  }
+  drawTimeGrid(e, n, o, r, s) {
+    const c = s - r, l = 6;
+    e.strokeStyle = "#333", e.lineWidth = 1, e.font = "10px SF Mono, monospace", e.fillStyle = "#666";
+    for (let a = 0; a <= l; a++) {
+      const d = a / l * n, f = r + c * a / l;
+      e.beginPath(), e.moveTo(d, 0), e.lineTo(d, o), e.stroke();
+      const h = new Date(f), C = `${h.getMinutes().toString().padStart(2, "0")}:${h.getSeconds().toString().padStart(2, "0")}`;
+      e.fillText(C, d + 2, o - 4);
+    }
+  }
+  drawSpans(e, n, o, r, s, c) {
+    const l = c - s, a = 20, d = 4, f = 20, h = n.filter((m) => !m.parentId);
+    let C = f;
+    const K = (m, _, Mt = 0) => {
+      const D = (m.startTime - s) / l * o, _e = ((m.endTime || c) - s) / l * o, V = Math.max(_e - D, 2), ie = _t[m.status];
+      e.fillStyle = ie + "40", e.fillRect(D, _, V, a), e.strokeStyle = ie, e.lineWidth = 1, e.strokeRect(D, _, V, a), e.fillStyle = "#ccc", e.font = "10px SF Mono, monospace";
+      const De = m.duration ? `${m.name} (${m.duration}ms)` : m.name;
+      return e.fillText(De, D + 4, _ + 14, V - 8), this.spanBounds.set(m.id, {
+        x: D,
+        y: _,
+        w: V,
+        h: a
+      }), _ + a + d;
+    };
+    for (const m of h)
+      C = K(m, C);
+  }
+  drawLogs(e, n, o, r, s, c) {
+    const l = c - s, a = 8, d = 30;
+    for (const f of n) {
+      const h = (f.timestamp - s) / l * o, C = Rt[f.level];
+      e.fillStyle = C, e.beginPath(), e.moveTo(h, r - d), e.lineTo(h - a / 2, r - d - a), e.lineTo(h + a / 2, r - d - a), e.closePath(), e.fill(), this.logBounds.set(f.id, {
+        x: h,
+        y: r - d - a / 2,
+        r: a
+      });
+    }
+  }
+  handleMouseMove(e) {
+    if (!this.canvas || !this.tooltip) return;
+    const n = this.canvas.getBoundingClientRect(), o = e.clientX - n.left, r = e.clientY - n.top;
+    for (const s of u.getSpans()) {
+      const c = this.spanBounds.get(s.id);
+      if (c && o >= c.x && o <= c.x + c.w && r >= c.y && r <= c.y + c.h) {
+        this.showTooltip(e, `
+          <strong>${s.name}</strong><br>
+          Status: ${s.status}<br>
+          ${s.duration !== void 0 ? `Duration: ${s.duration}ms` : "Running..."}<br>
+          ${s.context ? `Context: ${JSON.stringify(s.context)}` : ""}
+        `);
+        return;
+      }
+    }
+    for (const s of u.getLogs()) {
+      const c = this.logBounds.get(s.id);
+      if (c && Math.sqrt((o - c.x) ** 2 + (r - c.y) ** 2) <= c.r) {
+        this.showTooltip(e, `
+            <strong>[${s.level.toUpperCase()}]</strong> ${s.message}<br>
+            <small>${new Date(s.timestamp).toISOString()}</small>
+          `);
+        return;
+      }
+    }
+    this.hideTooltip();
+  }
+  handleMouseLeave() {
+    this.hideTooltip();
+  }
+  showTooltip(e, n) {
+    this.tooltip && (this.tooltip.innerHTML = n, this.tooltip.style.display = "block", this.tooltip.style.left = `${e.offsetX + 10}px`, this.tooltip.style.top = `${e.offsetY + 10}px`);
+  }
+  hideTooltip() {
+    this.tooltip && (this.tooltip.style.display = "none");
+  }
+  /**
+   * Destroy the timeline
+   */
+  destroy() {
+    this.stopRefresh(), this.container.innerHTML = "";
+  }
+}
+function zt(t) {
+  return new Dt(t);
+}
+const Nt = "0.1.0";
+export {
+  j as DevLoggerUI,
+  Ot as ErrorCapture,
+  At as LogPersistence,
+  Ht as NetworkCapture,
+  Dt as Timeline,
+  Nt as VERSION,
+  ve as computeDiff,
+  le as createDiffResult,
+  zt as createTimeline,
+  ae as formatValue,
+  Ft as hasChanges,
+  u as logger
+};
+//# sourceMappingURL=index.js.map