claude-mpm 4.1.10__py3-none-any.whl → 4.1.12__py3-none-any.whl

claude_mpm/dashboard/static/dist/socket-client.js

@@ -1,2 +1,2 @@
-const t=window.io;class e{constructor(){this.socket=null,this.port=null,this.connectionCallbacks={connect:[],disconnect:[],error:[],event:[]},this.eventSchema={required:["source","type","subtype","timestamp","data"],optional:["event","session_id"]},this.isConnected=!1,this.isConnecting=!1,this.lastConnectTime=null,this.disconnectTime=null,this.events=[],this.sessions=new Map,this.currentSessionId=null,this.eventQueue=[],this.maxQueueSize=100,this.retryAttempts=0,this.maxRetryAttempts=5,this.retryDelays=[1e3,2e3,3e3,4e3,5e3],this.pendingEmissions=new Map,this.lastPingTime=null,this.lastPongTime=null,this.pingTimeout=9e4,this.healthCheckInterval=null,this.startStatusCheckFallback(),this.startHealthMonitoring()}connect(t="8765"){this.port=t;const e=`http://localhost:${t}`;if(this.socket&&(this.socket.connected||this.socket.connecting))return console.log("Already connected or connecting, disconnecting first..."),this.socket.disconnect(),void setTimeout(()=>this.doConnect(e),100);this.doConnect(e)}doConnect(e){if(console.log(`Connecting to Socket.IO server at ${e}`),void 0===t)return console.error("Socket.IO library not loaded! Make sure socket.io.min.js is loaded before this script."),void this.notifyConnectionStatus("Socket.IO library not loaded","error");this.isConnecting=!0,this.notifyConnectionStatus("Connecting...","connecting"),this.socket=t(e,{autoConnect:!0,reconnection:!0,reconnectionDelay:1e3,reconnectionDelayMax:5e3,reconnectionAttempts:5,timeout:2e4,forceNew:!0,transports:["websocket","polling"],pingInterval:45e3,pingTimeout:2e4}),this.setupSocketHandlers()}setupSocketHandlers(){this.socket.on("connect",()=>{console.log("Connected to Socket.IO server");const t=this.isConnected;if(this.isConnected=!0,this.isConnecting=!1,this.lastConnectTime=Date.now(),this.retryAttempts=0,this.disconnectTime&&!1===t){const t=(Date.now()-this.disconnectTime)/1e3;console.log(`Reconnected after ${t.toFixed(1)}s downtime`),this.flushEventQueue()}this.notifyConnectionStatus("Connected","connected"),window.socket=this.socket,console.log("SocketClient: Exposed socket globally as window.socket"),this.connectionCallbacks.connect.forEach(t=>t(this.socket.id)),this.requestStatus()}),this.socket.on("disconnect",t=>{const e={reason:t,timestamp:(new Date).toISOString(),wasConnected:this.isConnected,uptimeSeconds:this.lastConnectTime?((Date.now()-this.lastConnectTime)/1e3).toFixed(1):0,lastPing:this.lastPingTime?((Date.now()-this.lastPingTime)/1e3).toFixed(1)+"s ago":"never",lastPong:this.lastPongTime?((Date.now()-this.lastPongTime)/1e3).toFixed(1)+"s ago":"never"};console.log("Disconnected from server:",e),this.isConnected=!1,this.isConnecting=!1,this.disconnectTime=Date.now(),this.notifyConnectionStatus(`Disconnected: ${t}`,"disconnected"),this.connectionCallbacks.disconnect.forEach(e=>e(t));["transport close","ping timeout","transport error","io server disconnect"].includes(t)?(console.log(`Auto-reconnect triggered for reason: ${t}`),this.scheduleReconnect()):"io client disconnect"===t?console.log("Client-initiated disconnect, not auto-reconnecting"):(console.log(`Unknown disconnect reason: ${t}, attempting reconnect anyway`),this.scheduleReconnect())}),this.socket.on("connect_error",t=>{console.error("Connection error:",t),this.isConnecting=!1;const e=t.message||t.description||"Unknown error";this.notifyConnectionStatus(`Connection Error: ${e}`,"disconnected"),this.addEvent({type:"connection.error",timestamp:(new Date).toISOString(),data:{error:e,url:this.socket.io.uri,retry_attempt:this.retryAttempts}}),this.connectionCallbacks.error.forEach(t=>t(e)),this.scheduleReconnect()}),this.socket.on("claude_event",t=>{console.log("Received claude_event:",t);const e=this.validateEventSchema(t);if(!e)return void console.warn("Invalid event schema received:",t);if(e.type&&e.type.startsWith("code:"))return void console.log("Code analysis event received via claude_event, not adding to events list:",e.type);const n=this.transformEvent(e);console.log("Transformed event:",n),this.addEvent(n)}),this.socket.on("ping",t=>{this.lastPingTime=Date.now(),this.socket.emit("pong",{timestamp:t.timestamp,client_time:Date.now()})}),this.socket.on("pong",t=>{this.lastPongTime=Date.now()}),this.socket.on("session.started",t=>{this.addEvent({type:"session",subtype:"started",timestamp:(new Date).toISOString(),data:t})}),this.socket.on("session.ended",t=>{this.addEvent({type:"session",subtype:"ended",timestamp:(new Date).toISOString(),data:t})}),this.socket.on("claude.request",t=>{this.addEvent({type:"claude",subtype:"request",timestamp:(new Date).toISOString(),data:t})}),this.socket.on("claude.response",t=>{this.addEvent({type:"claude",subtype:"response",timestamp:(new Date).toISOString(),data:t})}),this.socket.on("agent.loaded",t=>{this.addEvent({type:"agent",subtype:"loaded",timestamp:(new Date).toISOString(),data:t})}),this.socket.on("agent.executed",t=>{this.addEvent({type:"agent",subtype:"executed",timestamp:(new Date).toISOString(),data:t})}),this.socket.on("hook.pre",t=>{this.addEvent({type:"hook",subtype:"pre",timestamp:(new Date).toISOString(),data:t})}),this.socket.on("hook.post",t=>{this.addEvent({type:"hook",subtype:"post",timestamp:(new Date).toISOString(),data:t})}),this.socket.on("todo.updated",t=>{this.addEvent({type:"todo",subtype:"updated",timestamp:(new Date).toISOString(),data:t})}),this.socket.on("memory.operation",t=>{this.addEvent({type:"memory",subtype:"operation",timestamp:(new Date).toISOString(),data:t})}),this.socket.on("log.entry",t=>{this.addEvent({type:"log",subtype:"entry",timestamp:(new Date).toISOString(),data:t})}),this.socket.on("code:analysis:queued",t=>{console.log("Code analysis queued event received, not adding to events list")}),this.socket.on("code:analysis:accepted",t=>{console.log("Code analysis accepted event received, not adding to events list")}),this.socket.on("code:analysis:start",t=>{console.log("Code analysis start event received, not adding to events list")}),this.socket.on("code:analysis:complete",t=>{console.log("Code analysis complete event received, not adding to events list")}),this.socket.on("code:analysis:error",t=>{console.log("Code analysis error event received, not adding to events list")}),this.socket.on("code:file:start",t=>{console.log("Code file start event received, not adding to events list")}),this.socket.on("code:node:found",t=>{console.log("Code node found event received, not adding to events list")}),this.socket.on("code:analysis:progress",t=>{console.log("Code analysis progress event received, not adding to events list")}),this.socket.on("history",t=>{console.log("Received event history:",t),t&&Array.isArray(t.events)?(console.log(`Processing ${t.events.length} historical events (${t.count} sent, ${t.total_available} total available)`),t.events.forEach(t=>{const e=this.transformEvent(t);this.addEvent(e,!1)}),this.notifyEventUpdate(),console.log(`Event history loaded: ${t.events.length} events added to dashboard`)):Array.isArray(t)&&(console.log("Received legacy event history format:",t.length,"events"),t.forEach(t=>{const e=this.transformEvent(t);this.addEvent(e,!1)}),this.notifyEventUpdate())}),this.socket.on("system.status",t=>{console.log("Received system status:",t),t.sessions&&this.updateSessions(t.sessions),t.current_session&&(this.currentSessionId=t.current_session)})}disconnect(){this.socket&&(this.socket.disconnect(),this.socket=null),this.port=null,this.isConnected=!1,this.isConnecting=!1}emitWithRetry(t,e=null,n={}){const{maxRetries:s=3,retryDelays:o=[1e3,2e3,4e3],onSuccess:i=null,onFailure:c=null}=n,a=`${t}_${Date.now()}_${Math.random()}`,l=(n=0)=>{if(this.socket&&this.socket.connected)try{this.socket.emit(t,e),console.log(`Emitted ${t} successfully`),this.pendingEmissions.delete(a),i&&i()}catch(r){if(console.error(`Failed to emit ${t} (attempt ${n+1}):`,r),n<s-1){const s=o[n]||o[o.length-1];console.log(`Retrying ${t} in ${s}ms...`),this.pendingEmissions.set(a,{event:t,data:e,attemptNum:n+1,scheduledTime:Date.now()+s}),setTimeout(()=>l(n+1),s)}else console.error(`Failed to emit ${t} after ${s} attempts`),this.pendingEmissions.delete(a),c&&c("max_retries_exceeded")}else 0===n&&(this.queueEvent(t,e),console.log(`Queued ${t} for later emission (disconnected)`),c&&c("disconnected"))};l()}queueEvent(t,e){if(this.eventQueue.length>=this.maxQueueSize){const t=this.eventQueue.shift();console.warn(`Event queue full, dropped oldest event: ${t.event}`)}this.eventQueue.push({event:t,data:e,timestamp:Date.now()})}flushEventQueue(){if(0===this.eventQueue.length)return;console.log(`Flushing ${this.eventQueue.length} queued events...`);const t=[...this.eventQueue];this.eventQueue=[],t.forEach((t,e)=>{setTimeout(()=>{this.socket&&this.socket.connected&&(this.socket.emit(t.event,t.data),console.log(`Flushed queued event: ${t.event}`))},100*e)})}scheduleReconnect(){if(this.retryAttempts>=this.maxRetryAttempts)return console.log("Max reconnection attempts reached, stopping auto-reconnect"),void this.notifyConnectionStatus("Reconnection failed","disconnected");const t=this.retryDelays[this.retryAttempts]||this.retryDelays[this.retryDelays.length-1];this.retryAttempts++,console.log(`Scheduling reconnect attempt ${this.retryAttempts}/${this.maxRetryAttempts} in ${t}ms...`),this.notifyConnectionStatus(`Reconnecting in ${t/1e3}s...`,"connecting"),setTimeout(()=>{!this.isConnected&&this.port&&(console.log(`Attempting reconnection ${this.retryAttempts}/${this.maxRetryAttempts}...`),this.connect(this.port))},t)}requestStatus(){this.socket&&this.socket.connected&&(console.log("Requesting server status..."),this.emitWithRetry("request.status",null,{maxRetries:2,retryDelays:[500,1e3]}))}requestHistory(t={}){if(this.socket&&this.socket.connected){const e={limit:t.limit||50,event_types:t.event_types||[]};console.log("Requesting event history...",e),this.emitWithRetry("get_history",e,{maxRetries:3,retryDelays:[1e3,2e3,3e3],onFailure:t=>{console.error(`Failed to request history: ${t}`)}})}else console.warn("Cannot request history: not connected to server")}addEvent(t,e=!0){if(t.timestamp||(t.timestamp=(new Date).toISOString()),t.id||(t.id=Date.now()+Math.random()),this.events.push(t),t.data&&t.data.session_id){const e=t.data.session_id;this.sessions.has(e)||this.sessions.set(e,{id:e,startTime:t.timestamp,lastActivity:t.timestamp,eventCount:0,working_directory:null,git_branch:null});const n=this.sessions.get(e);n.lastActivity=t.timestamp,n.eventCount++;const s=[t.data.cwd,t.data.working_directory,t.data.working_dir,t.data.workingDirectory,t.data.instance_info?.working_dir,t.data.instance_info?.working_directory,t.data.instance_info?.cwd,t.cwd,t.working_directory,t.working_dir];for(const t of s)if(t&&"string"==typeof t&&t.trim()){n.working_directory=t,console.log(`[SOCKET-CLIENT] Found working directory for session ${e}:`,t);break}t.data.git_branch?n.git_branch=t.data.git_branch:t.data.instance_info&&t.data.instance_info.git_branch&&(n.git_branch=t.data.instance_info.git_branch)}e&&this.notifyEventUpdate()}updateSessions(t){Array.isArray(t)&&t.forEach(t=>{this.sessions.set(t.id,t)})}clearEvents(){this.events=[],this.sessions.clear(),this.notifyEventUpdate()}refreshHistory(t={}){this.clearEvents(),this.requestHistory(t)}getEventsBySession(t=null){return t?this.events.filter(e=>e.data&&e.data.session_id===t):this.events}onConnection(t,e){this.connectionCallbacks[t]&&this.connectionCallbacks[t].push(e)}onEventUpdate(t){this.connectionCallbacks.event.push(t)}on(t,e){if(this.socket)return this.socket.on(t,e);console.warn(`Cannot subscribe to '${t}': socket not initialized`)}off(t,e){if(this.socket)return this.socket.off(t,e);console.warn(`Cannot unsubscribe from '${t}': socket not initialized`)}notifyConnectionStatus(t,e){console.log(`SocketClient: Connection status changed to '${t}' (${e})`),this.updateConnectionStatusDOM(t,e),document.dispatchEvent(new CustomEvent("socketConnectionStatus",{detail:{status:t,type:e}}))}updateConnectionStatusDOM(t,e){const n=document.getElementById("connection-status");n?(n.innerHTML=`<span>●</span> ${t}`,n.className=`status-badge status-${e}`,console.log(`SocketClient: Direct DOM update - status: '${t}' (${e})`)):console.warn("SocketClient: Could not find connection-status element in DOM")}notifyEventUpdate(){this.connectionCallbacks.event.forEach(t=>t(this.events,this.sessions)),document.dispatchEvent(new CustomEvent("socketEventUpdate",{detail:{events:this.events,sessions:this.sessions}}))}getConnectionState(){return{isConnected:this.isConnected,isConnecting:this.isConnecting,socketId:this.socket?this.socket.id:null}}validateEventSchema(t){if(!t||"object"!=typeof t)return console.warn("Event data is not an object:",t),null;const e={...t};return e.source||(e.source="system"),e.type||(e.event?e.type=e.event:e.type="unknown"),e.subtype||(e.subtype="generic"),e.timestamp||(e.timestamp=(new Date).toISOString()),e.data||(e.data={}),e.data&&"object"!=typeof e.data&&(e.data={value:e.data}),console.log("Validated event:",e),e}transformEvent(t){if(!t)return t;let e={...t};if(!t.type&&t.event){const n=t.event;"TestStart"===n||"TestEnd"===n?(e.type="test",e.subtype=n.toLowerCase().replace("test","")):"SubagentStart"===n||"SubagentStop"===n?(e.type="subagent",e.subtype=n.toLowerCase().replace("subagent","")):"ToolCall"===n?(e.type="tool",e.subtype="call"):"UserPrompt"===n?(e.type="hook",e.subtype="user_prompt"):(e.type="unknown",e.subtype=n.toLowerCase(),e.type===e.subtype&&(e.subtype="event")),delete e.event}else if(t.type){const n=t.type;if(n.startsWith("hook.")){const t=n.substring(5);e.type="hook",e.subtype=t}else if(n.startsWith("code:"))e.type="code",e.subtype=n.substring(5);else if(n.includes(".")){const[t,...s]=n.split(".");e.type=t,e.subtype=s.join(".")}}else e.type="unknown",e.subtype="";if(!t.type&&t.event?e.originalEventName=t.event:t.type&&(e.originalEventName=t.type),t.data&&"object"==typeof t.data){const n=["type","subtype","timestamp","id","event","event_type","originalEventName"];Object.keys(t.data).forEach(s=>{n.includes(s)?console.warn(`Protected field '${s}' in data object was not copied to top level to preserve event structure`):"tool_parameters"===s&&"object"==typeof t.data[s]?e[s]=JSON.parse(JSON.stringify(t.data[s])):e[s]=t.data[s]}),e.data=t.data}if("hook"===e.type?"pre_tool"===e.subtype?e.hook_event_name="PreToolUse":"post_tool"===e.subtype?e.hook_event_name="PostToolUse":"subagent_start"===e.subtype?e.hook_event_name="SubagentStart":"subagent_stop"===e.subtype?e.hook_event_name="SubagentStop":"todo_write"===e.subtype?e.hook_event_name="TodoWrite":"start"===e.subtype?e.hook_event_name="Start":"stop"===e.subtype&&(e.hook_event_name="Stop"):"subagent"===e.type?"start"===e.subtype?e.hook_event_name="SubagentStart":"stop"===e.subtype&&(e.hook_event_name="SubagentStop"):"todo"===e.type&&"updated"===e.subtype&&(e.hook_event_name="TodoWrite"),"hook"===e.type&&("pre_tool"===e.subtype||"post_tool"===e.subtype)){console.log("Transformed tool event:",{type:e.type,subtype:e.subtype,hook_event_name:e.hook_event_name,tool_name:e.tool_name,has_tool_parameters:!!e.tool_parameters,tool_parameters:e.tool_parameters,has_data:!!e.data,keys:Object.keys(e).filter(t=>"data"!==t)});["Read","Write","Edit","MultiEdit","NotebookEdit"].includes(e.tool_name)&&console.log("File tool event details:",{tool_name:e.tool_name,file_path:e.tool_parameters?.file_path,path:e.tool_parameters?.path,notebook_path:e.tool_parameters?.notebook_path,full_parameters:e.tool_parameters})}return e}getState(){return{events:this.events,sessions:this.sessions,currentSessionId:this.currentSessionId}}startHealthMonitoring(){this.healthCheckInterval=setInterval(()=>{if(this.isConnected&&this.lastPingTime){const t=Date.now()-this.lastPingTime;t>this.pingTimeout&&(console.warn(`No ping from server for ${t/1e3}s, connection may be stale`),this.socket&&(console.log("Forcing reconnection due to stale connection..."),this.socket.disconnect(),setTimeout(()=>{this.port&&this.connect(this.port)},1e3)))}},1e4)}stopHealthMonitoring(){this.healthCheckInterval&&(clearInterval(this.healthCheckInterval),this.healthCheckInterval=null)}startStatusCheckFallback(){setInterval(()=>{this.checkAndUpdateStatus()},2e3),"loading"===document.readyState?document.addEventListener("DOMContentLoaded",()=>{setTimeout(()=>this.checkAndUpdateStatus(),100)}):setTimeout(()=>this.checkAndUpdateStatus(),100)}checkAndUpdateStatus(){let t="Disconnected",e="disconnected";this.socket&&(this.socket.connected?(t="Connected",e="connected",this.isConnected=!0,this.isConnecting=!1):this.socket.connecting||this.isConnecting?(t="Connecting...",e="connecting",this.isConnected=!1):(t="Disconnected",e="disconnected",this.isConnected=!1,this.isConnecting=!1));const n=document.getElementById("connection-status");if(n){const s=n.textContent.replace("●","").trim(),o=n.className,i=`status-badge status-${e}`;s===t&&o===i||(console.log(`SocketClient: Fallback update - was '${s}' (${o}), now '${t}' (${i})`),this.updateConnectionStatusDOM(t,e))}}destroy(){this.stopHealthMonitoring(),this.socket&&(this.socket.disconnect(),this.socket=null),this.eventQueue=[],this.pendingEmissions.clear()}getConnectionMetrics(){return{isConnected:this.isConnected,uptime:this.lastConnectTime?(Date.now()-this.lastConnectTime)/1e3:0,lastPing:this.lastPingTime?(Date.now()-this.lastPingTime)/1e3:null,queuedEvents:this.eventQueue.length,pendingEmissions:this.pendingEmissions.size,retryAttempts:this.retryAttempts}}}window.SocketClient=e;class n{constructor(){this.socketClient=null,this.connectionCallbacks=new Set,this.eventUpdateCallbacks=new Set,this.socketClient=new e,window.socketClient=this.socketClient,this.setupSocketEventHandlers(),setTimeout(()=>{this.updateInitialConnectionStatus()},100),console.log("Socket manager initialized")}setupSocketEventHandlers(){document.addEventListener("socketConnectionStatus",t=>{console.log(`SocketManager: Processing connection status update: ${t.detail.status} (${t.detail.type})`),this.handleConnectionStatusChange(t.detail.status,t.detail.type),this.connectionCallbacks.forEach(e=>{try{e(t.detail.status,t.detail.type)}catch(n){console.error("Error in connection callback:",n)}})}),this.socketClient&&this.socketClient.onEventUpdate(t=>{this.eventUpdateCallbacks.forEach(e=>{try{e(t)}catch(n){console.error("Error in event update callback:",n)}})})}handleConnectionStatusChange(t,e){this.updateConnectionStatus(t,e),"connected"===e&&this.socketClient&&this.socketClient.socket&&(window.socket=this.socketClient.socket,console.log("SocketManager: Exposed socket globally as window.socket"),this.setupGitBranchListener())}updateInitialConnectionStatus(){console.log("SocketManager: Updating initial connection status"),this.socketClient&&"function"==typeof this.socketClient.checkAndUpdateStatus?(console.log("SocketManager: Using socket client checkAndUpdateStatus method"),this.socketClient.checkAndUpdateStatus()):this.socketClient&&this.socketClient.socket?(console.log("SocketManager: Checking socket state directly",{connected:this.socketClient.socket.connected,connecting:this.socketClient.socket.connecting,isConnecting:this.socketClient.isConnecting,isConnected:this.socketClient.isConnected}),this.socketClient.socket.connected?(console.log("SocketManager: Socket is already connected, updating status"),window.socket=this.socketClient.socket,console.log("SocketManager: Exposed socket globally as window.socket"),this.updateConnectionStatus("Connected","connected")):this.socketClient.isConnecting||this.socketClient.socket.connecting?(console.log("SocketManager: Socket is connecting, updating status"),this.updateConnectionStatus("Connecting...","connecting")):(console.log("SocketManager: Socket is disconnected, updating status"),this.updateConnectionStatus("Disconnected","disconnected"))):(console.log("SocketManager: No socket client or socket found, setting disconnected status"),this.updateConnectionStatus("Disconnected","disconnected")),setTimeout(()=>{console.log("SocketManager: Secondary status check after 1 second"),this.socketClient&&this.socketClient.socket&&this.socketClient.socket.connected&&(console.log("SocketManager: Socket connected in secondary check, updating status"),window.socket||(window.socket=this.socketClient.socket,console.log("SocketManager: Exposed socket globally as window.socket (secondary check)")),this.updateConnectionStatus("Connected","connected"))},1e3)}setupGitBranchListener(){this.socketClient.socket.off("git_branch_response"),this.socketClient.socket.on("git_branch_response",t=>{if(t.success){const e=document.getElementById("footer-git-branch");e&&(e.textContent=t.branch||"unknown"),e&&(e.style.display="inline")}else console.error("Git branch request failed:",t.error)})}updateConnectionStatus(t,e){const n=document.getElementById("connection-status");if(n){if(n.querySelector("span")){const e="●";n.innerHTML=`<span>${e}</span> ${t}`}else n.textContent=t;n.className=`status-badge status-${e}`,console.log(`SocketManager: UI updated - status: '${t}' (${e})`)}else console.error("SocketManager: Could not find connection-status element in DOM")}connect(t){this.socketClient&&this.socketClient.connect(t)}disconnect(){this.socketClient&&this.socketClient.disconnect()}isConnected(){return this.socketClient&&this.socketClient.isConnected}isConnecting(){return this.socketClient&&this.socketClient.isConnecting}getSocketClient(){return this.socketClient}getSocket(){return this.socketClient?this.socketClient.socket:null}onConnectionStatusChange(t){this.connectionCallbacks.add(t)}offConnectionStatusChange(t){this.connectionCallbacks.delete(t)}onEventUpdate(t){this.eventUpdateCallbacks.add(t)}offEventUpdate(t){this.eventUpdateCallbacks.delete(t)}toggleConnectionControls(){const t=document.getElementById("connection-controls-row"),e=document.getElementById("connection-toggle-btn");if(t&&e){t.classList.contains("show")?(t.classList.remove("show"),t.style.display="none",e.textContent="Connection Settings"):(t.classList.add("show"),t.style.display="block",e.textContent="Hide Settings")}}setupConnectionControls(){const t=document.getElementById("connect-btn"),e=document.getElementById("disconnect-btn"),n=document.getElementById("connection-toggle-btn");t&&t.addEventListener("click",()=>{const t=document.getElementById("port-input").value||8765;this.connect(t)}),e&&e.addEventListener("click",()=>{this.disconnect()}),n&&n.addEventListener("click",()=>{this.toggleConnectionControls()})}initializeFromURL(t){const e=t.get("port"),n=document.getElementById("port-input");let s=e;s||"http:"!==window.location.protocol||(s=window.location.port||"8765"),s||(s=n?.value||"8765"),n&&(n.value=s);!("false"!==t.get("connect"))||this.isConnected()||this.isConnecting()||(console.log(`SocketManager: Auto-connecting to port ${s}`),this.connect(s))}}class s{constructor(){this.currentTab="events",this.autoScroll=!0,this.selectedCard={tab:null,index:null,type:null,data:null},this.tabNavigation={events:{selectedIndex:-1,items:[]},agents:{selectedIndex:-1,items:[]},tools:{selectedIndex:-1,items:[]},files:{selectedIndex:-1,items:[]}},this.setupEventHandlers(),console.log("UI state manager initialized")}setupEventHandlers(){this.setupTabNavigation(),this.setupUnifiedKeyboardNavigation()}setupTabNavigation(){document.querySelectorAll(".tab-button").forEach(t=>{t.addEventListener("click",()=>{const e=this.getTabNameFromButton(t);this.switchTab(e)})})}setupUnifiedKeyboardNavigation(){document.addEventListener("keydown",t=>{document.activeElement&&["INPUT","TEXTAREA","SELECT"].includes(document.activeElement.tagName)||("ArrowUp"===t.key||"ArrowDown"===t.key?(t.preventDefault(),this.handleUnifiedArrowNavigation("ArrowDown"===t.key?1:-1)):"Enter"===t.key?(t.preventDefault(),this.handleUnifiedEnterKey()):"Escape"===t.key&&this.clearUnifiedSelection())})}getTabNameFromButton(t){const e=t.textContent.toLowerCase();return e.includes("events")?"events":e.includes("activity")?"activity":e.includes("agents")?"agents":e.includes("tools")?"tools":e.includes("files")?"files":e.includes("code")?"code":e.includes("sessions")?"sessions":e.includes("system")?"system":"events"}switchTab(t){console.log(`[DEBUG] switchTab called with tabName: ${t}`);const e=this.currentTab;this.currentTab=t,document.querySelectorAll(".tab-button").forEach(e=>{e.classList.remove("active"),this.getTabNameFromButton(e)===t&&e.classList.add("active")}),document.querySelectorAll(".tab-content").forEach(t=>{t.classList.remove("active")});const n=document.getElementById(`${t}-tab`);n&&n.classList.add("active"),this.clearUnifiedSelection(),document.dispatchEvent(new CustomEvent("tabChanged",{detail:{newTab:t,previousTab:e}})),setTimeout(()=>{this.autoScroll&&this.scrollCurrentTabToBottom()},100)}handleUnifiedArrowNavigation(t){const e=this.tabNavigation[this.currentTab];if(!e)return;let n=e.selectedIndex+t;0!==e.items.length&&(n<0?n=e.items.length-1:n>=e.items.length&&(n=0),this.selectCardByIndex(this.currentTab,n))}handleUnifiedEnterKey(){const t=this.tabNavigation[this.currentTab];if(!t||-1===t.selectedIndex)return;const e=t.items[t.selectedIndex];e&&e.onclick&&e.onclick()}clearUnifiedSelection(){Object.keys(this.tabNavigation).forEach(t=>{this.tabNavigation[t].selectedIndex=-1}),this.clearCardSelection()}updateTabNavigationItems(){const t=this.tabNavigation[this.currentTab];if(!t)return;let e;switch(this.currentTab){case"events":e="#events-list .event-item";break;case"agents":e="#agents-list .event-item";break;case"tools":e="#tools-list .event-item";break;case"files":e="#files-list .event-item"}e&&(t.items=Array.from(document.querySelectorAll(e)))}selectCardByIndex(t,e){const n=this.tabNavigation[t];if(!n||e<0||e>=n.items.length)return;n.selectedIndex=e,this.updateUnifiedSelectionUI();n.items[e]&&this.selectCard(t,e,this.getCardType(t),e),this.showCardDetails(t,e)}updateUnifiedSelectionUI(){document.querySelectorAll(".event-item.keyboard-selected").forEach(t=>{t.classList.remove("keyboard-selected")});const t=this.tabNavigation[this.currentTab];t&&-1!==t.selectedIndex&&t.items[t.selectedIndex]&&t.items[t.selectedIndex].classList.add("keyboard-selected")}showCardDetails(t,e){document.dispatchEvent(new CustomEvent("showCardDetails",{detail:{tabName:t,index:e}}))}selectCard(t,e,n,s){this.clearCardSelection(),this.selectedCard={tab:t,index:e,type:n,data:s},this.updateCardSelectionUI(),console.log("Card selected:",this.selectedCard)}clearCardSelection(){document.querySelectorAll(".event-item.selected, .file-item.selected").forEach(t=>{t.classList.remove("selected")}),this.selectedCard={tab:null,index:null,type:null,data:null}}updateCardSelectionUI(){if(!this.selectedCard.tab||null===this.selectedCard.index)return;let t;switch(this.selectedCard.tab){case"events":t=document.getElementById("events-list");break;case"agents":t=document.getElementById("agents-list");break;case"tools":t=document.getElementById("tools-list");break;case"files":t=document.getElementById("files-list")}if(t){const e=t.querySelectorAll(".event-item, .file-item");e[this.selectedCard.index]&&e[this.selectedCard.index].classList.add("selected")}}getCardType(t){switch(t){case"events":return"event";case"agents":return"agent";case"tools":return"tool";case"files":return"file";default:return"unknown"}}scrollCurrentTabToBottom(){const t=`${this.currentTab}-list`,e=document.getElementById(t);e&&this.autoScroll&&(e.scrollTop=e.scrollHeight)}clearSelection(){this.clearCardSelection(),this.clearUnifiedSelection()}getCurrentTab(){return this.currentTab}getSelectedCard(){return{...this.selectedCard}}getTabNavigation(){return{...this.tabNavigation}}setAutoScroll(t){this.autoScroll=t}getAutoScroll(){return this.autoScroll}}export{n as S,s as U};
+const t=window.io;class e{constructor(){this.socket=null,this.port=null,this.connectionCallbacks={connect:[],disconnect:[],error:[],event:[]},this.eventSchema={required:["source","type","subtype","timestamp","data"],optional:["event","session_id"]},this.isConnected=!1,this.isConnecting=!1,this.lastConnectTime=null,this.disconnectTime=null,this.events=[],this.sessions=new Map,this.currentSessionId=null,this.eventQueue=[],this.maxQueueSize=100,this.retryAttempts=0,this.maxRetryAttempts=5,this.retryDelays=[1e3,2e3,3e3,4e3,5e3],this.pendingEmissions=new Map,this.lastPingTime=null,this.lastPongTime=null,this.pingTimeout=9e4,this.healthCheckInterval=null,this.startStatusCheckFallback(),this.startHealthMonitoring()}connect(t="8765"){this.port=t;const e=`http://localhost:${t}`;if(this.socket&&(this.socket.connected||this.socket.connecting))return console.log("Already connected or connecting, disconnecting first..."),this.socket.disconnect(),void setTimeout(()=>this.doConnect(e),100);this.doConnect(e)}doConnect(e){if(console.log(`Connecting to Socket.IO server at ${e}`),void 0===t)return console.error("Socket.IO library not loaded! Make sure socket.io.min.js is loaded before this script."),void this.notifyConnectionStatus("Socket.IO library not loaded","error");this.isConnecting=!0,this.notifyConnectionStatus("Connecting...","connecting"),this.socket=t(e,{autoConnect:!0,reconnection:!0,reconnectionDelay:1e3,reconnectionDelayMax:5e3,reconnectionAttempts:5,timeout:2e4,forceNew:!0,transports:["websocket","polling"],pingInterval:45e3,pingTimeout:2e4}),this.setupSocketHandlers()}setupSocketHandlers(){this.socket.on("connect",()=>{console.log("Connected to Socket.IO server");const t=this.isConnected;if(this.isConnected=!0,this.isConnecting=!1,this.lastConnectTime=Date.now(),this.retryAttempts=0,this.disconnectTime&&!1===t){const t=(Date.now()-this.disconnectTime)/1e3;console.log(`Reconnected after ${t.toFixed(1)}s downtime`),this.flushEventQueue()}this.notifyConnectionStatus("Connected","connected"),window.socket=this.socket,console.log("SocketClient: Exposed socket globally as window.socket"),this.connectionCallbacks.connect.forEach(t=>t(this.socket.id)),this.requestStatus()}),this.socket.on("disconnect",t=>{const e={reason:t,timestamp:(new Date).toISOString(),wasConnected:this.isConnected,uptimeSeconds:this.lastConnectTime?((Date.now()-this.lastConnectTime)/1e3).toFixed(1):0,lastPing:this.lastPingTime?((Date.now()-this.lastPingTime)/1e3).toFixed(1)+"s ago":"never",lastPong:this.lastPongTime?((Date.now()-this.lastPongTime)/1e3).toFixed(1)+"s ago":"never"};console.log("Disconnected from server:",e),this.isConnected=!1,this.isConnecting=!1,this.disconnectTime=Date.now(),this.notifyConnectionStatus(`Disconnected: ${t}`,"disconnected"),this.connectionCallbacks.disconnect.forEach(e=>e(t));["transport close","ping timeout","transport error","io server disconnect"].includes(t)?(console.log(`Auto-reconnect triggered for reason: ${t}`),this.scheduleReconnect()):"io client disconnect"===t?console.log("Client-initiated disconnect, not auto-reconnecting"):(console.log(`Unknown disconnect reason: ${t}, attempting reconnect anyway`),this.scheduleReconnect())}),this.socket.on("connect_error",t=>{console.error("Connection error:",t),this.isConnecting=!1;const e=t.message||t.description||"Unknown error";this.notifyConnectionStatus(`Connection Error: ${e}`,"disconnected"),this.addEvent({type:"connection.error",timestamp:(new Date).toISOString(),data:{error:e,url:this.socket.io.uri,retry_attempt:this.retryAttempts}}),this.connectionCallbacks.error.forEach(t=>t(e)),this.scheduleReconnect()}),this.socket.on("claude_event",t=>{console.log("Received claude_event:",t);const e=this.validateEventSchema(t);if(!e)return void console.warn("Invalid event schema received:",t);e.type&&e.type.startsWith("code:")&&console.log("Code analysis event received via claude_event, adding to events list for troubleshooting:",e.type);const n=this.transformEvent(e);console.log("Transformed event:",n),this.addEvent(n)}),this.socket.on("ping",t=>{this.lastPingTime=Date.now(),this.socket.emit("pong",{timestamp:t.timestamp,client_time:Date.now()})}),this.socket.on("pong",t=>{this.lastPongTime=Date.now()}),this.socket.on("session.started",t=>{this.addEvent({type:"session",subtype:"started",timestamp:(new Date).toISOString(),data:t})}),this.socket.on("session.ended",t=>{this.addEvent({type:"session",subtype:"ended",timestamp:(new Date).toISOString(),data:t})}),this.socket.on("claude.request",t=>{this.addEvent({type:"claude",subtype:"request",timestamp:(new Date).toISOString(),data:t})}),this.socket.on("claude.response",t=>{this.addEvent({type:"claude",subtype:"response",timestamp:(new Date).toISOString(),data:t})}),this.socket.on("agent.loaded",t=>{this.addEvent({type:"agent",subtype:"loaded",timestamp:(new Date).toISOString(),data:t})}),this.socket.on("agent.executed",t=>{this.addEvent({type:"agent",subtype:"executed",timestamp:(new Date).toISOString(),data:t})}),this.socket.on("hook.pre",t=>{this.addEvent({type:"hook",subtype:"pre",timestamp:(new Date).toISOString(),data:t})}),this.socket.on("hook.post",t=>{this.addEvent({type:"hook",subtype:"post",timestamp:(new Date).toISOString(),data:t})}),this.socket.on("todo.updated",t=>{this.addEvent({type:"todo",subtype:"updated",timestamp:(new Date).toISOString(),data:t})}),this.socket.on("memory.operation",t=>{this.addEvent({type:"memory",subtype:"operation",timestamp:(new Date).toISOString(),data:t})}),this.socket.on("log.entry",t=>{this.addEvent({type:"log",subtype:"entry",timestamp:(new Date).toISOString(),data:t})}),this.socket.on("code:analysis:queued",t=>{console.log("Code analysis queued event received, adding to events list for troubleshooting"),this.addEvent({type:"code",subtype:"analysis:queued",timestamp:(new Date).toISOString(),data:t})}),this.socket.on("code:analysis:accepted",t=>{console.log("Code analysis accepted event received, adding to events list for troubleshooting"),this.addEvent({type:"code",subtype:"analysis:accepted",timestamp:(new Date).toISOString(),data:t})}),this.socket.on("code:analysis:start",t=>{console.log("Code analysis start event received, adding to events list for troubleshooting"),this.addEvent({type:"code",subtype:"analysis:start",timestamp:(new Date).toISOString(),data:t})}),this.socket.on("code:analysis:complete",t=>{console.log("Code analysis complete event received, adding to events list for troubleshooting"),this.addEvent({type:"code",subtype:"analysis:complete",timestamp:(new Date).toISOString(),data:t})}),this.socket.on("code:analysis:error",t=>{console.log("Code analysis error event received, adding to events list for troubleshooting"),this.addEvent({type:"code",subtype:"analysis:error",timestamp:(new Date).toISOString(),data:t})}),this.socket.on("code:file:start",t=>{console.log("Code file start event received, adding to events list for troubleshooting"),this.addEvent({type:"code",subtype:"file:start",timestamp:(new Date).toISOString(),data:t})}),this.socket.on("code:node:found",t=>{console.log("Code node found event received, adding to events list for troubleshooting"),this.addEvent({type:"code",subtype:"node:found",timestamp:(new Date).toISOString(),data:t})}),this.socket.on("code:analysis:progress",t=>{console.log("Code analysis progress event received, adding to events list for troubleshooting"),this.addEvent({type:"code",subtype:"analysis:progress",timestamp:(new Date).toISOString(),data:t})}),this.socket.on("history",t=>{console.log("Received event history:",t),t&&Array.isArray(t.events)?(console.log(`Processing ${t.events.length} historical events (${t.count} sent, ${t.total_available} total available)`),t.events.forEach(t=>{const e=this.transformEvent(t);this.addEvent(e,!1)}),this.notifyEventUpdate(),console.log(`Event history loaded: ${t.events.length} events added to dashboard`)):Array.isArray(t)&&(console.log("Received legacy event history format:",t.length,"events"),t.forEach(t=>{const e=this.transformEvent(t);this.addEvent(e,!1)}),this.notifyEventUpdate())}),this.socket.on("system.status",t=>{console.log("Received system status:",t),t.sessions&&this.updateSessions(t.sessions),t.current_session&&(this.currentSessionId=t.current_session)})}disconnect(){this.socket&&(this.socket.disconnect(),this.socket=null),this.port=null,this.isConnected=!1,this.isConnecting=!1}emitWithRetry(t,e=null,n={}){const{maxRetries:s=3,retryDelays:o=[1e3,2e3,4e3],onSuccess:i=null,onFailure:a=null}=n,c=`${t}_${Date.now()}_${Math.random()}`,l=(n=0)=>{if(this.socket&&this.socket.connected)try{this.socket.emit(t,e),console.log(`Emitted ${t} successfully`),this.pendingEmissions.delete(c),i&&i()}catch(r){if(console.error(`Failed to emit ${t} (attempt ${n+1}):`,r),n<s-1){const s=o[n]||o[o.length-1];console.log(`Retrying ${t} in ${s}ms...`),this.pendingEmissions.set(c,{event:t,data:e,attemptNum:n+1,scheduledTime:Date.now()+s}),setTimeout(()=>l(n+1),s)}else console.error(`Failed to emit ${t} after ${s} attempts`),this.pendingEmissions.delete(c),a&&a("max_retries_exceeded")}else 0===n&&(this.queueEvent(t,e),console.log(`Queued ${t} for later emission (disconnected)`),a&&a("disconnected"))};l()}queueEvent(t,e){if(this.eventQueue.length>=this.maxQueueSize){const t=this.eventQueue.shift();console.warn(`Event queue full, dropped oldest event: ${t.event}`)}this.eventQueue.push({event:t,data:e,timestamp:Date.now()})}flushEventQueue(){if(0===this.eventQueue.length)return;console.log(`Flushing ${this.eventQueue.length} queued events...`);const t=[...this.eventQueue];this.eventQueue=[],t.forEach((t,e)=>{setTimeout(()=>{this.socket&&this.socket.connected&&(this.socket.emit(t.event,t.data),console.log(`Flushed queued event: ${t.event}`))},100*e)})}scheduleReconnect(){if(this.retryAttempts>=this.maxRetryAttempts)return console.log("Max reconnection attempts reached, stopping auto-reconnect"),void this.notifyConnectionStatus("Reconnection failed","disconnected");const t=this.retryDelays[this.retryAttempts]||this.retryDelays[this.retryDelays.length-1];this.retryAttempts++,console.log(`Scheduling reconnect attempt ${this.retryAttempts}/${this.maxRetryAttempts} in ${t}ms...`),this.notifyConnectionStatus(`Reconnecting in ${t/1e3}s...`,"connecting"),setTimeout(()=>{!this.isConnected&&this.port&&(console.log(`Attempting reconnection ${this.retryAttempts}/${this.maxRetryAttempts}...`),this.connect(this.port))},t)}requestStatus(){this.socket&&this.socket.connected&&(console.log("Requesting server status..."),this.emitWithRetry("request.status",null,{maxRetries:2,retryDelays:[500,1e3]}))}requestHistory(t={}){if(this.socket&&this.socket.connected){const e={limit:t.limit||50,event_types:t.event_types||[]};console.log("Requesting event history...",e),this.emitWithRetry("get_history",e,{maxRetries:3,retryDelays:[1e3,2e3,3e3],onFailure:t=>{console.error(`Failed to request history: ${t}`)}})}else console.warn("Cannot request history: not connected to server")}addEvent(t,e=!0){if(t.timestamp||(t.timestamp=(new Date).toISOString()),t.id||(t.id=Date.now()+Math.random()),this.events.push(t),t.data&&t.data.session_id){const e=t.data.session_id;this.sessions.has(e)||this.sessions.set(e,{id:e,startTime:t.timestamp,lastActivity:t.timestamp,eventCount:0,working_directory:null,git_branch:null});const n=this.sessions.get(e);n.lastActivity=t.timestamp,n.eventCount++;const s=[t.data.cwd,t.data.working_directory,t.data.working_dir,t.data.workingDirectory,t.data.instance_info?.working_dir,t.data.instance_info?.working_directory,t.data.instance_info?.cwd,t.cwd,t.working_directory,t.working_dir];for(const t of s)if(t&&"string"==typeof t&&t.trim()){n.working_directory=t,console.log(`[SOCKET-CLIENT] Found working directory for session ${e}:`,t);break}t.data.git_branch?n.git_branch=t.data.git_branch:t.data.instance_info&&t.data.instance_info.git_branch&&(n.git_branch=t.data.instance_info.git_branch)}e&&this.notifyEventUpdate()}updateSessions(t){Array.isArray(t)&&t.forEach(t=>{this.sessions.set(t.id,t)})}clearEvents(){this.events=[],this.sessions.clear(),this.notifyEventUpdate()}refreshHistory(t={}){this.clearEvents(),this.requestHistory(t)}getEventsBySession(t=null){return t?this.events.filter(e=>e.data&&e.data.session_id===t):this.events}onConnection(t,e){this.connectionCallbacks[t]&&this.connectionCallbacks[t].push(e)}onEventUpdate(t){this.connectionCallbacks.event.push(t)}on(t,e){if(this.socket)return this.socket.on(t,e);console.warn(`Cannot subscribe to '${t}': socket not initialized`)}off(t,e){if(this.socket)return this.socket.off(t,e);console.warn(`Cannot unsubscribe from '${t}': socket not initialized`)}notifyConnectionStatus(t,e){console.log(`SocketClient: Connection status changed to '${t}' (${e})`),this.updateConnectionStatusDOM(t,e),document.dispatchEvent(new CustomEvent("socketConnectionStatus",{detail:{status:t,type:e}}))}updateConnectionStatusDOM(t,e){const n=document.getElementById("connection-status");n?(n.innerHTML=`<span>●</span> ${t}`,n.className=`status-badge status-${e}`,console.log(`SocketClient: Direct DOM update - status: '${t}' (${e})`)):console.warn("SocketClient: Could not find connection-status element in DOM")}notifyEventUpdate(){this.connectionCallbacks.event.forEach(t=>t(this.events,this.sessions)),document.dispatchEvent(new CustomEvent("socketEventUpdate",{detail:{events:this.events,sessions:this.sessions}}))}getConnectionState(){return{isConnected:this.isConnected,isConnecting:this.isConnecting,socketId:this.socket?this.socket.id:null}}validateEventSchema(t){if(!t||"object"!=typeof t)return console.warn("Event data is not an object:",t),null;const e={...t};return e.source||(e.source="system"),e.type||(e.event?e.type=e.event:e.type="unknown"),e.subtype||(e.subtype="generic"),e.timestamp||(e.timestamp=(new Date).toISOString()),e.data||(e.data={}),e.data&&"object"!=typeof e.data&&(e.data={value:e.data}),console.log("Validated event:",e),e}transformEvent(t){if(!t)return t;let e={...t};if(t.type&&t.subtype&&!t.type.includes(".")&&!t.type.includes(":"))e.originalEventName||("generic"===t.subtype||t.type===t.subtype?e.originalEventName=t.type:e.originalEventName=`${t.type}.${t.subtype}`);else if(!t.type&&t.event){const n=t.event;"TestStart"===n||"TestEnd"===n?(e.type="test",e.subtype=n.toLowerCase().replace("test","")):"SubagentStart"===n||"SubagentStop"===n?(e.type="subagent",e.subtype=n.toLowerCase().replace("subagent","")):"ToolCall"===n?(e.type="tool",e.subtype="call"):"UserPrompt"===n?(e.type="hook",e.subtype="user_prompt"):(e.type="unknown",e.subtype=n.toLowerCase(),e.type===e.subtype&&(e.subtype="event")),delete e.event,e.originalEventName=n}else if(t.type){const n=t.type;if(n.startsWith("hook.")){const t=n.substring(5);e.type="hook",e.subtype=t,e.originalEventName=n}else if(n.startsWith("code:")){e.type="code";const t=n.substring(5);e.subtype=t.replace(/:/g,"_"),e.originalEventName=n}else if(n.includes(".")){const[t,...s]=n.split(".");e.type=t,e.subtype=s.join("."),e.originalEventName=n}else if(n.includes(":")){const t=n.split(":",2);e.type=t[0],e.subtype=t.length>1?t[1].replace(/:/g,"_"):"generic",e.originalEventName=n}else t.subtype||(e.subtype="generic",e.originalEventName=n)}else e.type="unknown",e.subtype="",e.originalEventName="unknown";if(t.data&&"object"==typeof t.data){const n=["type","subtype","timestamp","id","event","event_type","originalEventName"];Object.keys(t.data).forEach(s=>{n.includes(s)?console.warn(`Protected field '${s}' in data object was not copied to top level to preserve event structure`):"tool_parameters"===s&&"object"==typeof t.data[s]?e[s]=JSON.parse(JSON.stringify(t.data[s])):e[s]=t.data[s]}),e.data=t.data}if("hook"===e.type?"pre_tool"===e.subtype?e.hook_event_name="PreToolUse":"post_tool"===e.subtype?e.hook_event_name="PostToolUse":"subagent_start"===e.subtype?e.hook_event_name="SubagentStart":"subagent_stop"===e.subtype?e.hook_event_name="SubagentStop":"todo_write"===e.subtype?e.hook_event_name="TodoWrite":"start"===e.subtype?e.hook_event_name="Start":"stop"===e.subtype&&(e.hook_event_name="Stop"):"subagent"===e.type?"start"===e.subtype?e.hook_event_name="SubagentStart":"stop"===e.subtype&&(e.hook_event_name="SubagentStop"):"todo"===e.type&&"updated"===e.subtype&&(e.hook_event_name="TodoWrite"),"hook"===e.type&&("pre_tool"===e.subtype||"post_tool"===e.subtype)){console.log("Transformed tool event:",{type:e.type,subtype:e.subtype,hook_event_name:e.hook_event_name,tool_name:e.tool_name,has_tool_parameters:!!e.tool_parameters,tool_parameters:e.tool_parameters,has_data:!!e.data,keys:Object.keys(e).filter(t=>"data"!==t)});["Read","Write","Edit","MultiEdit","NotebookEdit"].includes(e.tool_name)&&console.log("File tool event details:",{tool_name:e.tool_name,file_path:e.tool_parameters?.file_path,path:e.tool_parameters?.path,notebook_path:e.tool_parameters?.notebook_path,full_parameters:e.tool_parameters})}return e}getState(){return{events:this.events,sessions:this.sessions,currentSessionId:this.currentSessionId}}startHealthMonitoring(){this.healthCheckInterval=setInterval(()=>{if(this.isConnected&&this.lastPingTime){const t=Date.now()-this.lastPingTime;t>this.pingTimeout&&(console.warn(`No ping from server for ${t/1e3}s, connection may be stale`),this.socket&&(console.log("Forcing reconnection due to stale connection..."),this.socket.disconnect(),setTimeout(()=>{this.port&&this.connect(this.port)},1e3)))}},1e4)}stopHealthMonitoring(){this.healthCheckInterval&&(clearInterval(this.healthCheckInterval),this.healthCheckInterval=null)}startStatusCheckFallback(){setInterval(()=>{this.checkAndUpdateStatus()},2e3),"loading"===document.readyState?document.addEventListener("DOMContentLoaded",()=>{setTimeout(()=>this.checkAndUpdateStatus(),100)}):setTimeout(()=>this.checkAndUpdateStatus(),100)}checkAndUpdateStatus(){let t="Disconnected",e="disconnected";this.socket&&(this.socket.connected?(t="Connected",e="connected",this.isConnected=!0,this.isConnecting=!1):this.socket.connecting||this.isConnecting?(t="Connecting...",e="connecting",this.isConnected=!1):(t="Disconnected",e="disconnected",this.isConnected=!1,this.isConnecting=!1));const n=document.getElementById("connection-status");if(n){const s=n.textContent.replace("●","").trim(),o=n.className,i=`status-badge status-${e}`;s===t&&o===i||(console.log(`SocketClient: Fallback update - was '${s}' (${o}), now '${t}' (${i})`),this.updateConnectionStatusDOM(t,e))}}destroy(){this.stopHealthMonitoring(),this.socket&&(this.socket.disconnect(),this.socket=null),this.eventQueue=[],this.pendingEmissions.clear()}getConnectionMetrics(){return{isConnected:this.isConnected,uptime:this.lastConnectTime?(Date.now()-this.lastConnectTime)/1e3:0,lastPing:this.lastPingTime?(Date.now()-this.lastPingTime)/1e3:null,queuedEvents:this.eventQueue.length,pendingEmissions:this.pendingEmissions.size,retryAttempts:this.retryAttempts}}}window.SocketClient=e;class n{constructor(){this.socketClient=null,this.connectionCallbacks=new Set,this.eventUpdateCallbacks=new Set,this.socketClient=new e,window.socketClient=this.socketClient,this.setupSocketEventHandlers(),setTimeout(()=>{this.updateInitialConnectionStatus()},100),console.log("Socket manager initialized")}setupSocketEventHandlers(){document.addEventListener("socketConnectionStatus",t=>{console.log(`SocketManager: Processing connection status update: ${t.detail.status} (${t.detail.type})`),this.handleConnectionStatusChange(t.detail.status,t.detail.type),this.connectionCallbacks.forEach(e=>{try{e(t.detail.status,t.detail.type)}catch(n){console.error("Error in connection callback:",n)}})}),this.socketClient&&this.socketClient.onEventUpdate(t=>{this.eventUpdateCallbacks.forEach(e=>{try{e(t)}catch(n){console.error("Error in event update callback:",n)}})})}handleConnectionStatusChange(t,e){this.updateConnectionStatus(t,e),"connected"===e&&this.socketClient&&this.socketClient.socket&&(window.socket=this.socketClient.socket,console.log("SocketManager: Exposed socket globally as window.socket"),this.setupGitBranchListener())}updateInitialConnectionStatus(){console.log("SocketManager: Updating initial connection status"),this.socketClient&&"function"==typeof this.socketClient.checkAndUpdateStatus?(console.log("SocketManager: Using socket client checkAndUpdateStatus method"),this.socketClient.checkAndUpdateStatus()):this.socketClient&&this.socketClient.socket?(console.log("SocketManager: Checking socket state directly",{connected:this.socketClient.socket.connected,connecting:this.socketClient.socket.connecting,isConnecting:this.socketClient.isConnecting,isConnected:this.socketClient.isConnected}),this.socketClient.socket.connected?(console.log("SocketManager: Socket is already connected, updating status"),window.socket=this.socketClient.socket,console.log("SocketManager: Exposed socket globally as window.socket"),this.updateConnectionStatus("Connected","connected")):this.socketClient.isConnecting||this.socketClient.socket.connecting?(console.log("SocketManager: Socket is connecting, updating status"),this.updateConnectionStatus("Connecting...","connecting")):(console.log("SocketManager: Socket is disconnected, updating status"),this.updateConnectionStatus("Disconnected","disconnected"))):(console.log("SocketManager: No socket client or socket found, setting disconnected status"),this.updateConnectionStatus("Disconnected","disconnected")),setTimeout(()=>{console.log("SocketManager: Secondary status check after 1 second"),this.socketClient&&this.socketClient.socket&&this.socketClient.socket.connected&&(console.log("SocketManager: Socket connected in secondary check, updating status"),window.socket||(window.socket=this.socketClient.socket,console.log("SocketManager: Exposed socket globally as window.socket (secondary check)")),this.updateConnectionStatus("Connected","connected"))},1e3)}setupGitBranchListener(){this.socketClient.socket.off("git_branch_response"),this.socketClient.socket.on("git_branch_response",t=>{if(t.success){const e=document.getElementById("footer-git-branch");e&&(e.textContent=t.branch||"unknown"),e&&(e.style.display="inline")}else console.error("Git branch request failed:",t.error)})}updateConnectionStatus(t,e){const n=document.getElementById("connection-status");if(n){if(n.querySelector("span")){const e="●";n.innerHTML=`<span>${e}</span> ${t}`}else n.textContent=t;n.className=`status-badge status-${e}`,console.log(`SocketManager: UI updated - status: '${t}' (${e})`)}else console.error("SocketManager: Could not find connection-status element in DOM")}connect(t){this.socketClient&&this.socketClient.connect(t)}disconnect(){this.socketClient&&this.socketClient.disconnect()}isConnected(){return this.socketClient&&this.socketClient.isConnected}isConnecting(){return this.socketClient&&this.socketClient.isConnecting}getSocketClient(){return this.socketClient}getSocket(){return this.socketClient?this.socketClient.socket:null}onConnectionStatusChange(t){this.connectionCallbacks.add(t)}offConnectionStatusChange(t){this.connectionCallbacks.delete(t)}onEventUpdate(t){this.eventUpdateCallbacks.add(t)}offEventUpdate(t){this.eventUpdateCallbacks.delete(t)}toggleConnectionControls(){const t=document.getElementById("connection-controls-row"),e=document.getElementById("connection-toggle-btn");if(t&&e){t.classList.contains("show")?(t.classList.remove("show"),t.style.display="none",e.textContent="Connection Settings"):(t.classList.add("show"),t.style.display="block",e.textContent="Hide Settings")}}setupConnectionControls(){const t=document.getElementById("connect-btn"),e=document.getElementById("disconnect-btn"),n=document.getElementById("connection-toggle-btn");t&&t.addEventListener("click",()=>{const t=document.getElementById("port-input").value||8765;this.connect(t)}),e&&e.addEventListener("click",()=>{this.disconnect()}),n&&n.addEventListener("click",()=>{this.toggleConnectionControls()})}initializeFromURL(t){const e=t.get("port"),n=document.getElementById("port-input");let s=e;s||"http:"!==window.location.protocol||(s=window.location.port||"8765"),s||(s=n?.value||"8765"),n&&(n.value=s);!("false"!==t.get("connect"))||this.isConnected()||this.isConnecting()||(console.log(`SocketManager: Auto-connecting to port ${s}`),this.connect(s))}}class s{constructor(){this.currentTab="events",this.autoScroll=!0,this.selectedCard={tab:null,index:null,type:null,data:null},this.tabNavigation={events:{selectedIndex:-1,items:[]},agents:{selectedIndex:-1,items:[]},tools:{selectedIndex:-1,items:[]},files:{selectedIndex:-1,items:[]}},this.setupEventHandlers(),console.log("UI state manager initialized")}setupEventHandlers(){this.setupTabNavigation(),this.setupUnifiedKeyboardNavigation()}setupTabNavigation(){document.querySelectorAll(".tab-button").forEach(t=>{t.addEventListener("click",()=>{const e=this.getTabNameFromButton(t);this.switchTab(e)})})}setupUnifiedKeyboardNavigation(){document.addEventListener("keydown",t=>{document.activeElement&&["INPUT","TEXTAREA","SELECT"].includes(document.activeElement.tagName)||("ArrowUp"===t.key||"ArrowDown"===t.key?(t.preventDefault(),this.handleUnifiedArrowNavigation("ArrowDown"===t.key?1:-1)):"Enter"===t.key?(t.preventDefault(),this.handleUnifiedEnterKey()):"Escape"===t.key&&this.clearUnifiedSelection())})}getTabNameFromButton(t){const e=t.textContent.toLowerCase();return e.includes("events")?"events":e.includes("activity")?"activity":e.includes("agents")?"agents":e.includes("tools")?"tools":e.includes("files")?"files":e.includes("code")?"code":e.includes("sessions")?"sessions":e.includes("system")?"system":"events"}switchTab(t){console.log(`[DEBUG] switchTab called with tabName: ${t}`);const e=this.currentTab;this.currentTab=t,document.querySelectorAll(".tab-button").forEach(e=>{e.classList.remove("active"),this.getTabNameFromButton(e)===t&&e.classList.add("active")}),document.querySelectorAll(".tab-content").forEach(t=>{t.classList.remove("active")});const n=document.getElementById(`${t}-tab`);n&&n.classList.add("active"),this.clearUnifiedSelection(),document.dispatchEvent(new CustomEvent("tabChanged",{detail:{newTab:t,previousTab:e}})),setTimeout(()=>{this.autoScroll&&this.scrollCurrentTabToBottom()},100)}handleUnifiedArrowNavigation(t){const e=this.tabNavigation[this.currentTab];if(!e)return;let n=e.selectedIndex+t;0!==e.items.length&&(n<0?n=e.items.length-1:n>=e.items.length&&(n=0),this.selectCardByIndex(this.currentTab,n))}handleUnifiedEnterKey(){const t=this.tabNavigation[this.currentTab];if(!t||-1===t.selectedIndex)return;const e=t.items[t.selectedIndex];e&&e.onclick&&e.onclick()}clearUnifiedSelection(){Object.keys(this.tabNavigation).forEach(t=>{this.tabNavigation[t].selectedIndex=-1}),this.clearCardSelection()}updateTabNavigationItems(){const t=this.tabNavigation[this.currentTab];if(!t)return;let e;switch(this.currentTab){case"events":e="#events-list .event-item";break;case"agents":e="#agents-list .event-item";break;case"tools":e="#tools-list .event-item";break;case"files":e="#files-list .event-item"}e&&(t.items=Array.from(document.querySelectorAll(e)))}selectCardByIndex(t,e){const n=this.tabNavigation[t];if(!n||e<0||e>=n.items.length)return;n.selectedIndex=e,this.updateUnifiedSelectionUI();n.items[e]&&this.selectCard(t,e,this.getCardType(t),e),this.showCardDetails(t,e)}updateUnifiedSelectionUI(){document.querySelectorAll(".event-item.keyboard-selected").forEach(t=>{t.classList.remove("keyboard-selected")});const t=this.tabNavigation[this.currentTab];t&&-1!==t.selectedIndex&&t.items[t.selectedIndex]&&t.items[t.selectedIndex].classList.add("keyboard-selected")}showCardDetails(t,e){document.dispatchEvent(new CustomEvent("showCardDetails",{detail:{tabName:t,index:e}}))}selectCard(t,e,n,s){this.clearCardSelection(),this.selectedCard={tab:t,index:e,type:n,data:s},this.updateCardSelectionUI(),console.log("Card selected:",this.selectedCard)}clearCardSelection(){document.querySelectorAll(".event-item.selected, .file-item.selected").forEach(t=>{t.classList.remove("selected")}),this.selectedCard={tab:null,index:null,type:null,data:null}}updateCardSelectionUI(){if(!this.selectedCard.tab||null===this.selectedCard.index)return;let t;switch(this.selectedCard.tab){case"events":t=document.getElementById("events-list");break;case"agents":t=document.getElementById("agents-list");break;case"tools":t=document.getElementById("tools-list");break;case"files":t=document.getElementById("files-list")}if(t){const e=t.querySelectorAll(".event-item, .file-item");e[this.selectedCard.index]&&e[this.selectedCard.index].classList.add("selected")}}getCardType(t){switch(t){case"events":return"event";case"agents":return"agent";case"tools":return"tool";case"files":return"file";default:return"unknown"}}scrollCurrentTabToBottom(){const t=`${this.currentTab}-list`,e=document.getElementById(t);e&&this.autoScroll&&(e.scrollTop=e.scrollHeight)}clearSelection(){this.clearCardSelection(),this.clearUnifiedSelection()}getCurrentTab(){return this.currentTab}getSelectedCard(){return{...this.selectedCard}}getTabNavigation(){return{...this.tabNavigation}}setAutoScroll(t){this.autoScroll=t}getAutoScroll(){return this.autoScroll}}export{n as S,s as U};
 //# sourceMappingURL=socket-client.js.map

claude_mpm/dashboard/static/js/components/activity-tree.js

@@ -51,6 +51,12 @@ class ActivityTree {
             }
         }
         
+        // Clear any existing text content that might be in the container
+        if (this.container.textContent && this.container.textContent.trim()) {
+            console.log('Clearing existing text content from container:', this.container.textContent);
+            this.container.textContent = '';
+        }
+        
         console.log('Activity tree container found:', this.container);
         
         // Check if the container is visible before initializing
@@ -63,6 +69,10 @@ class ActivityTree {
         // Initialize even if tab is not active, but don't render until visible
         if (!tabPanel.classList.contains('active')) {
             console.log('Activity tab not active, initializing but deferring render');
+            // Clear any text content that might be showing
+            if (this.container.textContent && this.container.textContent.trim()) {
+                this.container.textContent = '';
+            }
             // Set up basic structure but defer visualization
             this.setupControls();
             this.initializeTreeData();
@@ -71,28 +81,97 @@ class ActivityTree {
             return;
         }
 
+        // Clear container before creating visualization
+        if (this.container.textContent && this.container.textContent.trim()) {
+            console.log('Clearing container text before creating visualization');
+            this.container.textContent = '';
+        }
+        
         this.setupControls();
         this.createVisualization();
         
         if (!this.svg || !this.treeGroup) {
             console.error('Failed to create D3 visualization elements');
+            // Show error message in container
+            if (this.container) {
+                this.container.innerHTML = '<div style="padding: 20px; text-align: center; color: #e53e3e;">⚠️ Failed to create visualization. Please refresh the page.</div>';
+            }
             return;
         }
         
         this.initializeTreeData();
-        this.update(this.root);
+        
+        // Only update if we have a valid root
+        if (this.root) {
+            this.update(this.root);
+        } else {
+            console.warn('Root not created, skipping initial update');
+        }
+        
         this.subscribeToEvents();
         
         this.initialized = true;
         console.log('Activity tree initialization complete');
     }
 
+    /**
+     * Force show the tree visualization
+     */
+    forceShow() {
+        console.log('ActivityTree.forceShow() called');
+        
+        // Ensure container is available
+        if (!this.container) {
+            this.container = document.getElementById('activity-tree-container') || document.getElementById('activity-tree');
+            if (!this.container) {
+                console.error('Cannot find activity tree container');
+                return;
+            }
+        }
+        
+        // Clear any text content
+        if (this.container.textContent && this.container.textContent.trim()) {
+            console.log('Clearing text from container:', this.container.textContent);
+            this.container.innerHTML = '';
+        }
+        
+        // Create visualization if needed
+        if (!this.svg) {
+            this.createVisualization();
+        }
+        
+        // Initialize tree data if needed
+        if (!this.root) {
+            this.initializeTreeData();
+        }
+        
+        // Update the tree
+        if (this.root && this.svg && this.treeGroup) {
+            this.update(this.root);
+        }
+        
+        // Ensure the SVG is visible
+        if (this.svg) {
+            const svgNode = this.svg.node();
+            if (svgNode) {
+                svgNode.style.display = 'block';
+                svgNode.style.visibility = 'visible';
+            }
+        }
+    }
+    
     /**
      * Render the visualization when tab becomes visible (called when switching to Activity tab)
      */
     renderWhenVisible() {
         console.log('ActivityTree.renderWhenVisible() called');
         
+        // Ensure the container is clean
+        if (this.container && this.container.textContent && this.container.textContent.trim() && !this.svg) {
+            console.log('Clearing text content before rendering:', this.container.textContent);
+            this.container.textContent = '';
+        }
+        
         if (!this.initialized) {
             console.log('Not initialized yet, calling initialize...');
             this.initialize();
@@ -103,8 +182,14 @@ class ActivityTree {
         if (!this.svg) {
             console.log('Creating deferred visualization...');
             this.createVisualization();
-            if (this.svg && this.treeGroup) {
+            if (this.svg && this.treeGroup && this.root) {
                 this.update(this.root);
+            } else if (!this.root) {
+                console.warn('No root node available, initializing tree data...');
+                this.initializeTreeData();
+                if (this.root && this.svg && this.treeGroup) {
+                    this.update(this.root);
+                }
             }
         }
         
@@ -112,6 +197,12 @@ class ActivityTree {
         if (this.root && this.svg) {
             console.log('Updating tree with current data...');
             this.update(this.root);
+        } else {
+            console.warn('Cannot update tree - missing components:', {
+                hasRoot: !!this.root,
+                hasSvg: !!this.svg,
+                hasTreeGroup: !!this.treeGroup
+            });
         }
     }
 
@@ -163,6 +254,10 @@ class ActivityTree {
         // Check if D3 is available
         if (typeof d3 === 'undefined') {
             console.error('D3.js is not loaded! Cannot create activity tree visualization.');
+            // Try to display an error message in the container
+            if (this.container) {
+                this.container.innerHTML = '<div style="padding: 20px; text-align: center; color: #e53e3e;">⚠️ D3.js is not loaded. Cannot create visualization.</div>';
+            }
             return;
         }
 
@@ -173,8 +268,8 @@ class ActivityTree {
 
         console.log('Creating D3 visualization with dimensions:', { width: this.width, height: this.height });
 
-        // Clear any existing SVG
-        d3.select(this.container).select('svg').remove();
+        // Clear any existing content (including text)
+        d3.select(this.container).selectAll('*').remove();
 
         // Create SVG
         this.svg = d3.select(this.container)
@@ -230,6 +325,10 @@ class ActivityTree {
         // Check if D3 is available
         if (typeof d3 === 'undefined') {
             console.error('ActivityTree: D3 is not available - cannot create hierarchy!');
+            // Try to display an error message
+            if (this.container) {
+                this.container.innerHTML = '<div style="padding: 20px; text-align: center; color: #e53e3e;">⚠️ Waiting for D3.js to load...</div>';
+            }
             return;
         }
 
@@ -238,6 +337,9 @@ class ActivityTree {
         this.root.y0 = 0;
         
         console.log('ActivityTree: Root node created:', this.root);
+        
+        // Update stats immediately after creating root
+        this.updateStats();
     }
 
     /**
@@ -665,23 +767,74 @@ class ActivityTree {
     update(source) {
         console.log('ActivityTree: update() called with source:', source);
         
+        // Check if D3 is available
+        if (typeof d3 === 'undefined') {
+            console.error('ActivityTree: Cannot update - D3.js not loaded');
+            return;
+        }
+        
         // Check if visualization is ready
         if (!this.svg || !this.treeGroup) {
             console.warn('ActivityTree: Cannot update - SVG not initialized');
-            return;
+            // Try to create visualization if container exists
+            if (this.container) {
+                console.log('Attempting to create visualization from update()');
+                this.createVisualization();
+                // Check again after creation attempt
+                if (!this.svg || !this.treeGroup) {
+                    console.error('Failed to create visualization in update()');
+                    return;
+                }
+            } else {
+                return;
+            }
         }
         
         if (!this.treeLayout) {
             console.warn('ActivityTree: Cannot update - tree layout not initialized');
+            // Try to create tree layout
+            if (typeof d3 !== 'undefined') {
+                this.treeLayout = d3.tree().size([this.height, this.width]);
+                console.log('Created tree layout in update()');
+            } else {
+                return;
+            }
+        }
+        
+        // Ensure source has valid data
+        if (!source || !source.data) {
+            console.error('ActivityTree: Invalid source in update()', source);
+            return;
+        }
+        
+        // Ensure we have a valid root
+        if (!this.root) {
+            console.error('ActivityTree: No root node available for update');
             return;
         }
         
         // Compute the new tree layout
-        const treeData = this.treeLayout(this.root);
+        let treeData;
+        try {
+            treeData = this.treeLayout(this.root);
+        } catch (error) {
+            console.error('ActivityTree: Error computing tree layout:', error);
+            return;
+        }
+        
         const nodes = treeData.descendants();
         const links = treeData.links();
         
         console.log(`ActivityTree: Updating tree with ${nodes.length} nodes`);
+        
+        // Check if we actually have the tree container
+        if (nodes.length === 1 && this.container) {
+            // Only root node exists, ensure container shows the tree
+            const svgElement = this.container.querySelector('svg');
+            if (!svgElement) {
+                console.warn('SVG element not found in container after update');
+            }
+        }
 
         // Normalize for fixed-depth
         nodes.forEach((d) => {
@@ -969,13 +1122,33 @@ class ActivityTree {
      * Update statistics
      */
     updateStats() {
+        // Check if we have a valid root node
+        if (!this.root || !this.root.data) {
+            console.warn('ActivityTree: Cannot update stats - root not initialized');
+            // Set default values
+            const nodeCountEl = document.getElementById('node-count');
+            const activeCountEl = document.getElementById('active-count');
+            const depthEl = document.getElementById('tree-depth');
+            
+            if (nodeCountEl) nodeCountEl.textContent = '1';
+            if (activeCountEl) activeCountEl.textContent = '0';
+            if (depthEl) depthEl.textContent = '0';
+            return;
+        }
+        
         const nodeCount = this.countNodes(this.root);
         const activeCount = this.countActiveNodes(this.root.data);
         const depth = this.getTreeDepth(this.root);
 
-        document.getElementById('node-count').textContent = nodeCount;
-        document.getElementById('active-count').textContent = activeCount;
-        document.getElementById('tree-depth').textContent = depth;
+        const nodeCountEl = document.getElementById('node-count');
+        const activeCountEl = document.getElementById('active-count');
+        const depthEl = document.getElementById('tree-depth');
+        
+        if (nodeCountEl) nodeCountEl.textContent = nodeCount;
+        if (activeCountEl) activeCountEl.textContent = activeCount;
+        if (depthEl) depthEl.textContent = depth;
+        
+        console.log(`ActivityTree: Stats updated - Nodes: ${nodeCount}, Active: ${activeCount}, Depth: ${depth}`);
     }
 
     /**
@@ -1081,6 +1254,14 @@ const setupActivityTreeListeners = () => {
             // Store instance globally for dashboard access
             window.activityTreeInstance = activityTree;
         }
+        
+        // Ensure the container is ready and clear any text
+        const container = document.getElementById('activity-tree-container') || document.getElementById('activity-tree');
+        if (container && container.textContent && container.textContent.trim()) {
+            console.log('Clearing text from activity tree container before init:', container.textContent);
+            container.textContent = '';
+        }
+        
         // Always try to initialize when tab becomes active, even if instance exists
         // Small delay to ensure DOM is ready and tab is visible
         setTimeout(() => {
@@ -1097,9 +1278,13 @@ const setupActivityTreeListeners = () => {
             if (tabName === 'activity') {
                 console.log('Activity tab button clicked, initializing tree...');
                 initializeActivityTree();
-                // Also call renderWhenVisible to ensure proper rendering
+                // Also call renderWhenVisible and forceShow to ensure proper rendering
                 if (activityTree) {
-                    setTimeout(() => activityTree.renderWhenVisible(), 150);
+                    setTimeout(() => {
+                        activityTree.renderWhenVisible();
+                        // Force show to ensure SVG is visible
+                        activityTree.forceShow();
+                    }, 150);
                 }
             }
         });
@@ -1110,9 +1295,13 @@ const setupActivityTreeListeners = () => {
         if (e.detail && e.detail.newTab === 'activity') {
             console.log('Tab changed to activity, initializing tree...');
             initializeActivityTree();
-            // Also call renderWhenVisible to ensure proper rendering
+            // Also call renderWhenVisible and forceShow to ensure proper rendering
             if (activityTree) {
-                setTimeout(() => activityTree.renderWhenVisible(), 150);
+                setTimeout(() => {
+                    activityTree.renderWhenVisible();
+                    // Force show to ensure SVG is visible
+                    activityTree.forceShow();
+                }, 150);
             }
         }
     });
@@ -1120,8 +1309,18 @@ const setupActivityTreeListeners = () => {
     // Check if activity tab is already active on load
     const activeTab = document.querySelector('.tab-button.active');
     if (activeTab && activeTab.getAttribute('data-tab') === 'activity') {
+        console.log('Activity tab is active on load, initializing tree...');
         initializeActivityTree();
     }
+    
+    // Also check the tab panel directly
+    const activityPanel = document.getElementById('activity-tab');
+    if (activityPanel && activityPanel.classList.contains('active')) {
+        console.log('Activity panel is active on load, initializing tree...');
+        if (!activityTree) {
+            initializeActivityTree();
+        }
+    }
 
     // Export for debugging
     window.activityTree = () => activityTree;  // Expose instance getter for debugging

claude_mpm/dashboard/static/js/components/build-tracker.js

@@ -36,8 +36,6 @@ export class BuildTracker {
      * Initialize the build tracker component
      */
     async init() {
-        console.log('Initializing BuildTracker component');
-        
         // Try to load version.json for dashboard version
         await this.loadDashboardVersion();
         
@@ -67,11 +65,10 @@ export class BuildTracker {
                     full_version: versionData.full_version || "v1.0.0-0001"
                 };
                 
-                console.log('Loaded dashboard version:', this.buildInfo.monitor);
+                // Dashboard version loaded successfully
             }
         } catch (error) {
             // Silently fall back to defaults if version.json not available
-            console.debug('Dashboard version.json not available, using defaults');
         }
     }
     
@@ -162,8 +159,6 @@ export class BuildTracker {
      * @param {Object} buildInfo - Build information from server
      */
     updateBuildInfo(buildInfo) {
-        console.log('Updating build info:', buildInfo);
-        
         // Store the build info
         this.buildInfo = buildInfo;
         
@@ -252,8 +247,7 @@ export class BuildTracker {
             }
         }
         
-        // Show in console and alert
-        console.log('Version Information:\n' + info.join('\n'));
+        // Version information compiled
         
         // Create a simple modal-like display
         const modal = document.createElement('div');
@@ -285,12 +279,20 @@ export class BuildTracker {
             ? document.querySelector(parent) 
             : parent;
         
-        if (parentElement && this.element) {
-            parentElement.appendChild(this.element);
-            console.log('BuildTracker mounted to', parent);
-        } else {
-            console.error('Failed to mount BuildTracker: parent element not found');
+        if (!this.element) {
+            return;
+        }
+        
+        if (!parentElement) {
+            return;
         }
+        
+        // Check if already mounted to prevent duplicates
+        if (this.element.parentNode === parentElement) {
+            return;
+        }
+        
+        parentElement.appendChild(this.element);
     }
     
     /**