devlog-ui 0.1.0

package/dist/index.cjs

@@ -0,0 +1,1721 @@
+"use strict";var Oe=Object.defineProperty;var Fe=(t,e,n)=>e in t?Oe(t,e,{enumerable:!0,configurable:!0,writable:!0,value:n}):t[e]=n;var p=(t,e,n)=>Fe(t,typeof e!="symbol"?e+"":e,n);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});var Q=typeof document<"u"?document.currentScript:null;const de={debug:0,info:1,warn:2,error:3};function w(t){return t!==null&&typeof t=="object"&&!Array.isArray(t)}function O(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)=>O(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=>O(t[r],e[r]))}return!1}function ee(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(ee).join(", ")}]`:`[${t.length} items]`;if(w(t)){const e=Object.keys(t);return e.length===0?"{}":e.length<=2?`{${e.map(n=>`${n}: ${ee(t[n])}`).join(", ")}}`:`{${e.length} keys}`}return String(t)}function oe(t,e,n="",o=!1){const r=[];if(!w(t)&&!w(e))return O(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=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],u=c in t,h=c in e;!u&&h?r.push({path:l,type:"added",newValue:d}):u&&!h?r.push({path:l,type:"removed",oldValue:a}):w(a)&&w(d)?r.push(...oe(a,d,l,o)):Array.isArray(a)&&Array.isArray(d)?O(a,d)?o&&r.push({path:l,type:"unchanged",oldValue:a,newValue:d}):r.push({path:l,type:"changed",oldValue:a,newValue:d}):O(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 te(t,e){const n=oe(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 Ae(t){return t.summary.added>0||t.summary.removed>0||t.summary.changed>0}const He={BASE_URL:"/",DEV:!1,MODE:"production",PROD:!0,SSR:!1};function Ne(){try{if(typeof{url:typeof document>"u"?require("url").pathToFileURL(__filename).href:Q&&Q.tagName.toUpperCase()==="SCRIPT"&&Q.src||new URL("index.cjs",document.baseURI).href}<"u"&&He)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 ze={maxLogs:1e3,persist:!1,minLevel:"debug",enabled:Ne()};function Pe(){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 qe(){return`log_${Date.now()}_${Math.random().toString(36).slice(2,9)}`}function ye(){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:ge(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:ge(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 ge(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 Ue(){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:Ue(),name:n,startTime:Date.now(),status:"running",parentId:r,context:o,source:ye(),sessionId:e.getSessionId()},e.notifySpan(this._event)}get id(){return this._event.id}get event(){return this._event}get ended(){return this._ended}debug(e,...n){this._ended||this.logger.logWithSpan("debug",e,n,this._event.id,this._event.context)}info(e,...n){this._ended||this.logger.logWithSpan("info",e,n,this._event.id,this._event.context)}warn(e,...n){this._ended||this.logger.logWithSpan("warn",e,n,this._event.id,this._event.context)}error(e,...n){this._ended||this.logger.logWithSpan("error",e,n,this._event.id,this._event.context)}span(e,n){const o={...this._event.context,...n};return new G(this.logger,e,o,this._event.id)}end(){this.finish("success")}fail(e){e&&this.error(typeof e=="string"?e:e.message,e),this.finish("error")}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 re{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)}span(e,n){return this.logger.span(e,{...this.context,...n})}withContext(e){return new re(this.logger,{...this.context,...e})}}class Ve{constructor(){p(this,"logs",[]);p(this,"spans",new Map);p(this,"subscribers",new Set);p(this,"spanSubscribers",new Set);p(this,"config",{...ze});p(this,"sessionId");p(this,"globalContext",{});this.sessionId=Pe()}log(e,n,o,r,s){try{if(!this.config.enabled||de[e]<de[this.config.minLevel])return;const c=Object.keys(this.globalContext).length>0||r?{...this.globalContext,...r}:void 0,l={id:qe(),timestamp:Date.now(),level:e,message:String(n),data:this.safeCloneData(o),source:ye(),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)}}logWithContext(e,n,o,r){this.log(e,n,o,r)}logWithSpan(e,n,o,r,s){this.log(e,n,o,s,r)}notifySpan(e){this.spans.set(e.id,e);for(const n of this.spanSubscribers)try{n(e)}catch{}}safeCloneData(e){return e.map(n=>this.safeClone(n))}safeClone(e,n=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(e){for(this.logs.push(e);this.logs.length>this.config.maxLogs;)this.logs.shift()}notify(e){for(const n of this.subscribers)try{n(e)}catch{}}info(e,...n){this.log("info",e,n)}warn(e,...n){this.log("warn",e,n)}error(e,...n){this.log("error",e,n)}debug(e,...n){this.log("debug",e,n)}configure(e){try{this.config={...this.config,...e}}catch{}}clear(){try{this.logs=[],this.spans.clear()}catch{}}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{}}getLogs(){return this.logs}subscribe(e){try{return this.subscribers.add(e),()=>{this.subscribers.delete(e)}}catch{return()=>{}}}getSessionId(){return this.sessionId}getConfig(){return{...this.config}}isEnabled(){return this.config.enabled}span(e,n){try{return new G(this,e,n)}catch{return new G(this,e,n)}}getSpans(){return Array.from(this.spans.values())}getSpan(e){return this.spans.get(e)}getSpanLogs(e){return this.logs.filter(n=>n.spanId===e)}subscribeSpans(e){try{return this.spanSubscribers.add(e),()=>{this.spanSubscribers.delete(e)}}catch{return()=>{}}}setGlobalContext(e){try{this.globalContext={...e}}catch{}}updateGlobalContext(e){try{this.globalContext={...this.globalContext,...e}}catch{}}getGlobalContext(){return{...this.globalContext}}clearGlobalContext(){this.globalContext={}}withContext(e){return new re(this,e)}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"[]"}}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,u])=>`${d}=${u}`).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(`
+
+`)}async copyLogs(e={}){try{const n=this.exportLogs(e);return await navigator.clipboard.writeText(n),!0}catch{return!1}}diff(e,n,o,r="info"){try{const s=te(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}}}}computeDiff(e,n){try{return te(e,n)}catch{return{changes:[],summary:{added:0,removed:0,changed:0,unchanged:0}}}}}const f=new Ve,g={bgPrimary:"#1e1e1e",bgSecondary:"#252526",bgHover:"#2a2a2a",bgHeader:"#333333",textPrimary:"#cccccc",textSecondary:"#858585",textMuted:"#6e6e6e",levelDebug:"#6e6e6e",levelInfo:"#3794ff",levelWarn:"#cca700",levelError:"#f14c4c",border:"#3c3c3c",scrollbar:"#4a4a4a",scrollbarHover:"#5a5a5a",buttonBg:"#0e639c",buttonHover:"#1177bb"},je=`
+  :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 We(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 ue(t){return t.file==="unknown"?"unknown":`${t.file}:${t.line}`}function xe(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 Ge(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+=Ge(s);r+="</div>"}return r+="</div>",r}function Xe(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 Ye(t){return t.some(xe)}function M(t){const e=document.createElement("div");return e.textContent=t,e.innerHTML}function Ke(t){return!t||Object.keys(t).length===0?"":Object.entries(t).map(([e,n])=>`${e}=${n}`).join(" · ")}function we(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=Ye(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(xe);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(Xe(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">${We(t.timestamp)}</span>
+      ${r?`<span class="log-context" title="Context">${M(Ke(t.context))}</span>`:""}
+      <span class="log-source" title="${M(ue(t.source))}">${M(ue(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 Qe(){const t=document.createElement("div");return t.className="devlogger-empty",t.textContent="No logs yet...",t}const Ze="devlogger-sync";function et(){return`sender_${Date.now()}_${Math.random().toString(36).slice(2,9)}`}class tt{constructor(){p(this,"channel",null);p(this,"handlers",new Set);p(this,"senderId");p(this,"isConnected",!1);this.senderId=et(),this.connect()}connect(){try{if(typeof BroadcastChannel>"u"){console.warn("[DevLogger] BroadcastChannel not supported");return}this.channel=new BroadcastChannel(Ze),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}}handleMessage(e){if(e.senderId!==this.senderId)for(const n of this.handlers)try{n(e)}catch{}}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{}}sendLog(e){this.send("NEW_LOG",e)}requestSync(){this.send("SYNC_REQUEST")}sendSyncResponse(e){this.send("SYNC_RESPONSE",e)}sendClear(){this.send("CLEAR_LOGS")}subscribe(e){return this.handlers.add(e),()=>{this.handlers.delete(e)}}isActive(){return this.isConnected}getSenderId(){return this.senderId}close(){try{this.channel&&(this.channel.close(),this.channel=null),this.handlers.clear(),this.isConnected=!1}catch{}}}const N=new tt,fe=500,pe=700;let b=null;function nt(){try{if(b&&!b.closed)return b.focus(),b;const t=Math.max(0,(screen.width-fe)/2),e=Math.max(0,(screen.height-pe)/2),n=rt();return b=window.open("","devlogger-popout",`width=${fe},height=${pe},left=${t},top=${e},resizable=yes,scrollbars=yes`),b?(b.document.open(),b.document.write(n),b.document.close(),b.addEventListener("load",()=>{setTimeout(()=>{N.sendSyncResponse(f.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 he(){try{b&&!b.closed&&b.close(),b=null}catch{}}function ot(){return b!==null&&!b.closed}function rt(){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:new Set(["debug","info","warn","error"]),search:"",file:""}}function it(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 V(t,e){return t.filter(n=>it(n,e))}function ie(t){return!(t.levels.size===4)||t.search!==""||t.file!==""}function st(t,e,n){const o=ie(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="${be(t.search)}" data-filter="search">
+        </div>
+        <div class="filter-file">
+          <input type="text" class="filter-input filter-file-input" placeholder="Filter by file..." value="${be(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 be(t){return t.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#039;")}const Z={key:"l",ctrlKey:!0,shiftKey:!0};function ve(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 at(t){const e=document.createElement("style");e.textContent=je,t.appendChild(e);const n=document.createElement("button");n.className="devlogger-toggle",n.innerHTML="📋",n.title="Toggle DevLogger (Ctrl+Shift+L)",n.addEventListener("click",()=>F.toggle()),t.appendChild(n),i.toggleBtn=n;const o=document.createElement("div");o.className="devlogger-container hidden";const r=f.getLogs(),s=V(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":f.clear(),N.sendClear(),y();break;case"popout":F.popout();break;case"close":F.close();break;case"copy-json":f.copyLogs({format:"json"}).then(u=>{ve(d,u)});break;case"copy-text":f.copyLogs({format:"text"}).then(u=>{ve(d,u)});break}})}),t.appendChild(o),i.container=o,I(),y()}function I(){if(!i.filterBar)return;const t=f.getLogs(),e=V(t,i.filter);i.filterBar.innerHTML=st(i.filter,t.length,e.length),lt()}function lt(){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,ne(),y()});const e=i.filterBar.querySelector('[data-filter="file"]');e&&e.addEventListener("input",o=>{i.filter.file=o.target.value,ne(),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=f.getLogs(),e=V(t,i.filter);if(i.logsList.innerHTML="",t.length===0)i.logsList.appendChild(Qe());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(we(o));i.logsList.appendChild(n)}Le(e.length,t.length),se()}function ct(t){if(!i.logsList)return;const e=f.getLogs(),n=V(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(we(t))}Le(n.length,e.length),ne(),se()}function Le(t,e){i.badge&&(i.badge.textContent=String(t));const n=i.container?.querySelector(".devlogger-log-count");n&&(ie(i.filter)?n.textContent=`${t} of ${e} logs`:n.textContent=`${e} logs`)}function ne(){if(!i.filterBar)return;const t=f.getLogs(),e=V(t,i.filter),n=ie(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 se(){i.logsList&&i.visible&&(i.logsList.scrollTop=i.logsList.scrollHeight)}function me(t){t.key.toLowerCase()===Z.key&&t.ctrlKey===Z.ctrlKey&&t.shiftKey===Z.shiftKey&&(t.preventDefault(),F.toggle())}function dt(t){switch(t.type){case"CLEAR_LOGS":f.clear(),y();break;case"SYNC_REQUEST":N.sendSyncResponse(f.getLogs());break}}const F={init(){try{if(i.initialized||!f.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,at(e),i.unsubscribe=f.subscribe(n=>{ct(n),N.sendLog(n)}),i.channelUnsubscribe=N.subscribe(dt),document.addEventListener("keydown",me),i.initialized=!0}catch(t){console.warn("[DevLogger UI] Init error:",t)}},open(){try{i.initialized||this.init(),i.container&&(i.container.classList.remove("hidden"),i.visible=!0,se())}catch{}},close(){try{i.container&&(i.container.classList.add("hidden"),i.visible=!1)}catch{}},toggle(){i.visible?this.close():this.open()},popout(){try{i.initialized||this.init(),nt()}catch(t){console.warn("[DevLogger] Failed to open pop-out:",t)}},closePopout(){he()},isPopoutOpen(){return ot()},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{}},getFilter(){return{...i.filter,levels:new Set(i.filter.levels)}},clearFilter(){try{i.filter=z(),I(),y()}catch{}},destroy(){try{he(),i.unsubscribe&&(i.unsubscribe(),i.unsubscribe=null),i.channelUnsubscribe&&(i.channelUnsubscribe(),i.channelUnsubscribe=null),document.removeEventListener("keydown",me),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{}},isVisible(){return i.visible},isInitialized(){return i.initialized}},Se={captureErrors:!0,captureRejections:!0,errorPrefix:"[Uncaught Error]",rejectionPrefix:"[Unhandled Rejection]"};let P=!1,L={...Se},q=null,A=null;function gt(t,e,n,o,r){try{const s=r||(t instanceof ErrorEvent?t.error:null),c=s?.message||String(t),l=s?.stack;f.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(q)try{return q(t,e,n,o,r)??!1}catch{}return!1}function ut(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}),f.error(`${L.rejectionPrefix} ${n}`,o)}catch{}}function ft(t={}){if(P){L={...L,...t};return}try{if(typeof window>"u")return;L={...Se,...t},q=window.onerror,L.captureErrors&&(window.onerror=gt),L.captureRejections&&(A=ut,window.addEventListener("unhandledrejection",A)),P=!0}catch{}}function pt(){if(P)try{if(typeof window>"u")return;window.onerror=q,A&&window.removeEventListener("unhandledrejection",A),q=null,A=null,P=!1}catch{}}function ht(){return P}function bt(){return{...L}}const vt={install:ft,uninstall:pt,isActive:ht,getConfig:bt},J="devlogger_persisted_logs",ae="devlogger_session_active",Ce={storage:"session",maxPersisted:500,debounceMs:100};let R=!1,S={...Ce},U=[],x=null,le=!1,W=null;function k(){try{return typeof window>"u"?null:S.storage==="local"?localStorage:sessionStorage}catch{return null}}function mt(){try{const t=k();return t?t.getItem(ae)==="active":!1}catch{return!1}}function yt(){try{const t=k();if(!t)return;t.setItem(ae,"active")}catch{}}function ke(){try{const t=k();if(!t)return;t.removeItem(ae)}catch{}}function $e(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 Ee(){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 xt(){try{const t=k();if(!t)return;t.removeItem(J)}catch{}}function wt(t){U=t,x&&clearTimeout(x),x=setTimeout(()=>{$e(U),x=null},S.debounceMs)}function X(){try{x&&(clearTimeout(x),x=null),U.length>0&&$e(U),ke()}catch{}}function Lt(){if(!R)return;const t=f.getLogs();wt([...t])}function St(t={}){if(R){S={...S,...t};return}try{if(typeof window>"u")return;S={...Ce,...t},le=mt(),yt(),W=f.subscribe(Lt),window.addEventListener("beforeunload",X),window.addEventListener("pagehide",X),R=!0}catch{}}function Ct(){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),ke(),R=!1}catch{}}function kt(){return le}function $t(){return Ee()}function Et(){try{const t=Ee();return t.length===0?0:(f.importLogs(t),t.length)}catch{return 0}}function Tt(){xt(),U=[],le=!1}function It(){return R}function Rt(){return{...S}}const _t={enable:St,disable:Ct,isActive:It,hadCrash:kt,getPersistedLogs:$t,rehydrate:Et,clear:Tt,getConfig:Rt},Te={captureFetch:!0,captureXHR:!0,includeHeaders:!1,includeBody:!1,includeResponse:!1,maxResponseLength:1e3,ignorePatterns:[],context:{}};let E=null,H=null,T=null,B=!1,v={...Te};function Ie(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 Re(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 _e(t,e){return t.length<=e?t:t.slice(0,e)+"... (truncated)"}function Y(t){try{return JSON.parse(t)}catch{return t}}function Dt(){return async function(e,n){const o=typeof e=="string"?e:e instanceof URL?e.href:e.url;if(Ie(o))return E(e,n);const{host:r,path:s}=Re(o),c=n?.method||"GET",l=`${c} ${s}`,a=f.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 u=typeof n.body=="string"?Y(n.body):n.body;a.debug("Request body",u)}catch{a.debug("Request body","[Unable to parse]")}const d=performance.now();try{const u=await E(e,n),h=Math.round(performance.now()-d);if(u.ok){if(a.info(`Response: ${u.status} ${u.statusText} (${h}ms)`),v.includeResponse)try{const K=await u.clone().text(),m=Y(_e(K,v.maxResponseLength));a.debug("Response body",m)}catch{a.debug("Response body","[Unable to read]")}a.end()}else a.warn(`Response: ${u.status} ${u.statusText} (${h}ms)`),a.fail();return u}catch(u){const h=Math.round(performance.now()-d);throw a.error(`Request failed after ${h}ms`,u),a.fail(),u}}}function Mt(){H=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:Ie(s)},H.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}=Re(o),c=`${n} ${s}`,l=f.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 u=Y(_e(this.responseText,v.maxResponseLength));l.debug("Response body",u)}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 Bt(){H&&(XMLHttpRequest.prototype.open=H,H=null),T&&(XMLHttpRequest.prototype.send=T,T=null)}const Ot={install(t={}){try{if(B)return;v={...Te,...t},v.captureFetch&&typeof globalThis.fetch=="function"&&(E=globalThis.fetch,globalThis.fetch=Dt()),v.captureXHR&&typeof XMLHttpRequest<"u"&&Mt(),B=!0,f.debug("[NetworkCapture] Installed",{fetch:v.captureFetch,xhr:v.captureXHR})}catch(e){console.warn("[NetworkCapture] Install error:",e)}},uninstall(){try{if(!B)return;E&&(globalThis.fetch=E,E=null),Bt(),B=!1,f.debug("[NetworkCapture] Uninstalled")}catch(t){console.warn("[NetworkCapture] Uninstall error:",t)}},isActive(){return B},getConfig(){return{...v}},addIgnorePattern(t){v.ignorePatterns.push(t)}},Ft={debug:"#6e6e6e",info:"#3794ff",warn:"#cca700",error:"#f14c4c"},At={running:"#3794ff",success:"#4caf50",error:"#f14c4c"};class De{constructor(e){p(this,"container");p(this,"config");p(this,"canvas",null);p(this,"ctx",null);p(this,"intervalId",null);p(this,"tooltip",null);p(this,"spanBounds",new Map);p(this,"logBounds",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=f.getLogs().filter(a=>a.timestamp>=s),l=f.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,u=r+c*a/l;e.beginPath(),e.moveTo(d,0),e.lineTo(d,o),e.stroke();const h=new Date(u),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,u=20,h=n.filter(m=>!m.parentId);let C=u;const K=(m,_,zt=0)=>{const D=(m.startTime-s)/l*o,Me=((m.endTime||c)-s)/l*o,j=Math.max(Me-D,2),ce=At[m.status];e.fillStyle=ce+"40",e.fillRect(D,_,j,a),e.strokeStyle=ce,e.lineWidth=1,e.strokeRect(D,_,j,a),e.fillStyle="#ccc",e.font="10px SF Mono, monospace";const Be=m.duration?`${m.name} (${m.duration}ms)`:m.name;return e.fillText(Be,D+4,_+14,j-8),this.spanBounds.set(m.id,{x:D,y:_,w:j,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 u of n){const h=(u.timestamp-s)/l*o,C=Ft[u.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(u.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 f.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 f.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(){this.stopRefresh(),this.container.innerHTML=""}}function Ht(t){return new De(t)}const Nt="0.1.0";exports.DevLoggerUI=F;exports.ErrorCapture=vt;exports.LogPersistence=_t;exports.NetworkCapture=Ot;exports.Timeline=De;exports.VERSION=Nt;exports.computeDiff=oe;exports.createDiffResult=te;exports.createTimeline=Ht;exports.formatValue=ee;exports.hasChanges=Ae;exports.logger=f;
+//# sourceMappingURL=index.cjs.map