claude-mpm 3.9.11__py3-none-any.whl → 4.0.3__py3-none-any.whl

claude_mpm/dashboard/static/dist/dashboard.js

@@ -0,0 +1,2 @@
+import{S as e,U as t}from"./socket-client.js";import{E as n,a as i}from"./components/event-viewer.js";import{M as o}from"./components/module-viewer.js";import{S as s}from"./components/session-manager.js";import{A as r}from"./components/agent-inference.js";import{E as a}from"./components/export-manager.js";import{W as l}from"./components/working-directory.js";import{F as c}from"./components/file-tool-tracker.js";class d{constructor(){this.eventViewer=null,this.moduleViewer=null,this.sessionManager=null,this.socketManager=null,this.agentInference=null,this.uiStateManager=null,this.eventProcessor=null,this.exportManager=null,this.workingDirectoryManager=null,this.fileToolTracker=null,this.init()}init(){console.log("Initializing refactored Claude MPM Dashboard..."),this.initializeSocketManager(),this.initializeCoreComponents(),this.initializeAgentInference(),this.initializeUIStateManager(),this.initializeWorkingDirectoryManager(),this.initializeFileToolTracker(),this.initializeEventProcessor(),this.initializeExportManager(),this.setupModuleInteractions(),this.initializeFromURL(),console.log("Claude MPM Dashboard initialized successfully")}initializeSocketManager(){this.socketManager=new e,this.socketManager.setupConnectionControls(),this.socketClient=this.socketManager.getSocketClient(),window.socketClient=this.socketClient}initializeCoreComponents(){this.eventViewer=new n("events-list",this.socketClient),this.moduleViewer=new o,this.sessionManager=new s(this.socketClient),window.eventViewer=this.eventViewer,window.moduleViewer=this.moduleViewer,window.sessionManager=this.sessionManager}initializeAgentInference(){this.agentInference=new r(this.eventViewer),this.agentInference.initialize()}initializeUIStateManager(){this.uiStateManager=new t,this.setupTabFilters()}initializeWorkingDirectoryManager(){this.workingDirectoryManager=new l(this.socketManager)}initializeFileToolTracker(){this.fileToolTracker=new c(this.agentInference,this.workingDirectoryManager)}initializeEventProcessor(){this.eventProcessor=new i(this.eventViewer,this.agentInference)}initializeExportManager(){this.exportManager=new a(this.eventViewer)}setupModuleInteractions(){this.socketManager.onEventUpdate(e=>{this.fileToolTracker.updateFileOperations(e),this.fileToolTracker.updateToolCalls(e),this.agentInference.processAgentInference(),"events"===this.uiStateManager.getCurrentTab()&&this.exportManager.scrollListToBottom("events-list"),this.renderCurrentTab()}),this.socketManager.onConnectionStatusChange((e,t)=>{"connected"===t&&this.workingDirectoryManager.updateGitBranch(this.workingDirectoryManager.getCurrentWorkingDir())}),document.addEventListener("tabChanged",e=>{this.renderCurrentTab(),this.uiStateManager.updateTabNavigationItems()}),document.addEventListener("eventsClearing",()=>{this.fileToolTracker.clear(),this.agentInference.initialize()}),document.addEventListener("showCardDetails",e=>{this.showCardDetails(e.detail.tabName,e.detail.index)}),document.addEventListener("sessionFilterChanged",e=>{console.log("Session filter changed, re-rendering current tab:",this.uiStateManager.getCurrentTab()),this.renderCurrentTab()})}setupTabFilters(){const e=document.getElementById("agents-search-input"),t=document.getElementById("agents-type-filter");e&&e.addEventListener("input",()=>{"agents"===this.uiStateManager.getCurrentTab()&&this.renderCurrentTab()}),t&&t.addEventListener("change",()=>{"agents"===this.uiStateManager.getCurrentTab()&&this.renderCurrentTab()});const n=document.getElementById("tools-search-input"),i=document.getElementById("tools-type-filter");n&&n.addEventListener("input",()=>{"tools"===this.uiStateManager.getCurrentTab()&&this.renderCurrentTab()}),i&&i.addEventListener("change",()=>{"tools"===this.uiStateManager.getCurrentTab()&&this.renderCurrentTab()});const o=document.getElementById("files-search-input"),s=document.getElementById("files-type-filter");o&&o.addEventListener("input",()=>{"files"===this.uiStateManager.getCurrentTab()&&this.renderCurrentTab()}),s&&s.addEventListener("change",()=>{"files"===this.uiStateManager.getCurrentTab()&&this.renderCurrentTab()})}initializeFromURL(){const e=new URLSearchParams(window.location.search);this.socketManager.initializeFromURL(e)}renderCurrentTab(){const e=this.uiStateManager.getCurrentTab();switch(e){case"events":break;case"agents":this.renderAgents();break;case"tools":this.renderTools();break;case"files":this.renderFiles()}this.uiStateManager.getSelectedCard().tab===e&&this.uiStateManager.updateCardSelectionUI(),this.uiStateManager.updateUnifiedSelectionUI()}renderAgents(){const e=document.getElementById("agents-list");if(!e)return;this.agentInference.processAgentInference();const t=this.eventProcessor.getFilteredEventsForTab("agents"),n=this.eventProcessor.generateAgentHTML(t);e.innerHTML=n,this.exportManager.scrollListToBottom("agents-list");const i=this.agentInference.getUniqueAgentInstances();this.updateAgentsFilterDropdowns(i)}renderTools(){const e=document.getElementById("tools-list");if(!e)return;const t=this.fileToolTracker.getToolCalls(),n=Array.from(t.entries()),i=this.eventProcessor.getUniqueToolInstances(n),o=this.eventProcessor.generateToolHTML(i);e.innerHTML=o,this.exportManager.scrollListToBottom("tools-list"),this.updateToolsFilterDropdowns(i)}renderFiles(){const e=document.getElementById("files-list");if(!e)return;const t=this.fileToolTracker.getFileOperations(),n=Array.from(t.entries()),i=this.eventProcessor.getUniqueFileInstances(n),o=this.eventProcessor.generateFileHTML(i);e.innerHTML=o,this.exportManager.scrollListToBottom("files-list"),this.updateFilesFilterDropdowns(n)}updateAgentsFilterDropdowns(e){const t=new Set;e.forEach(e=>{e.agentName&&"Unknown"!==e.agentName&&t.add(e.agentName)});const n=Array.from(t).filter(e=>e&&""!==e.trim());this.populateFilterDropdown("agents-type-filter",n,"All Agent Types"),n.length>0?console.log("Agent types found for filter:",n):console.log("No agent types found for filter. Instances:",e.length)}updateToolsFilterDropdowns(e){const t=[...new Set(e.map(([e,t])=>t.tool_name))].filter(e=>e);this.populateFilterDropdown("tools-type-filter",t,"All Tools")}updateFilesFilterDropdowns(e){const t=[...new Set(e.flatMap(([e,t])=>t.operations.map(e=>e.operation)))].filter(e=>e);this.populateFilterDropdown("files-type-filter",t,"All Operations")}populateFilterDropdown(e,t,n="All"){const i=document.getElementById(e);if(!i)return;const o=i.value,s=t.sort((e,t)=>e.localeCompare(t));i.innerHTML=`<option value="">${n}</option>`,s.forEach(e=>{const t=document.createElement("option");t.value=e,t.textContent=e,i.appendChild(t)}),o&&s.includes(o)&&(i.value=o)}showCardDetails(e,t){switch(e){case"events":this.eventViewer&&this.eventViewer.showEventDetails(t);break;case"agents":this.showAgentDetailsByIndex(t);break;case"tools":this.showToolDetailsByIndex(t);break;case"files":this.showFileDetailsByIndex(t)}}showAgentDetailsByIndex(e){const t=this.eventProcessor.getFilteredEventsForTab("agents");if(!t||!Array.isArray(t)||e<0||e>=t.length)return void console.warn("Dashboard: Invalid agent index or events array");const n=this.eventProcessor.applyAgentsFilters([t[e]]);if(n.length>0&&this.moduleViewer&&"function"==typeof this.moduleViewer.showAgentEvent){const t=n[0];this.moduleViewer.showAgentEvent(t,e)}}showAgentInstanceDetails(e){const t=this.agentInference.getPMDelegations().get(e);if(!t){const t=this.agentInference.getUniqueAgentInstances().find(t=>t.id===e);return t?void this.showImpliedAgentDetails(t):void console.error("Agent instance not found:",e)}this.moduleViewer&&"function"==typeof this.moduleViewer.showAgentInstance?this.moduleViewer.showAgentInstance(t):console.log("Agent Instance Details:",{id:e,agentName:t.agentName,type:"PM Delegation",eventCount:t.agentEvents.length,startTime:t.timestamp,pmCall:t.pmCall})}showImpliedAgentDetails(e){this.moduleViewer&&"function"==typeof this.moduleViewer.showImpliedAgent?this.moduleViewer.showImpliedAgent(e):console.log("Implied Agent Details:",{id:e.id,agentName:e.agentName,type:"Implied PM Delegation",eventCount:e.eventCount,startTime:e.timestamp,note:"No explicit PM call found - inferred from agent activity"})}showToolDetailsByIndex(e){const t=this.fileToolTracker.getToolCalls(),n=Array.from(t.entries()),i=this.eventProcessor.applyToolCallFilters(n);if(e>=0&&e<i.length){const[t]=i[e];this.showToolCallDetails(t)}}showFileDetailsByIndex(e){const t=this.fileToolTracker.getFileOperations();let n=Array.from(t.entries());if(n=this.eventProcessor.applyFilesFilters(n),e>=0&&e<n.length){const[t]=n[e];this.showFileDetails(t)}}showToolCallDetails(e){const t=this.fileToolTracker.getToolCall(e);t&&this.moduleViewer&&this.moduleViewer.showToolCall(t,e)}showFileDetails(e){const t=this.fileToolTracker.getFileOperationsForFile(e);t&&this.moduleViewer&&this.moduleViewer.showFileOperations(t,e)}switchTab(e){this.uiStateManager.switchTab(e)}selectCard(e,t,n,i){this.uiStateManager.selectCard(e,t,n,i)}clearEvents(){this.exportManager.clearEvents()}exportEvents(){this.exportManager.exportEvents()}clearSelection(){this.uiStateManager.clearSelection(),this.eventViewer&&this.eventViewer.clearSelection(),this.moduleViewer&&this.moduleViewer.clear()}get currentWorkingDir(){return this.workingDirectoryManager.getCurrentWorkingDir()}set currentWorkingDir(e){this.workingDirectoryManager.setWorkingDirectory(e)}get currentTab(){return this.uiStateManager.getCurrentTab()}get selectedCard(){return this.uiStateManager.getSelectedCard()}get fileOperations(){return this.fileToolTracker.getFileOperations()}get toolCalls(){return this.fileToolTracker.getToolCalls()}get tabNavigation(){return this.uiStateManager?this.uiStateManager.tabNavigation:null}}function g(){const e=document.createElement("div");return e.id="file-viewer-modal",e.className="modal file-viewer-modal",e.innerHTML='\n        <div class="modal-content file-viewer-content">\n            <div class="file-viewer-header">\n                <h2 class="file-viewer-title">\n                    <span class="file-viewer-icon">📄</span>\n                    <span class="file-viewer-title-text">File Viewer</span>\n                </h2>\n                <div class="file-viewer-meta">\n                    <span class="file-viewer-file-path"></span>\n                    <span class="file-viewer-file-size"></span>\n                </div>\n                <button class="file-viewer-close" onclick="hideFileViewerModal()">\n                    <span>&times;</span>\n                </button>\n            </div>\n            <div class="file-viewer-body">\n                <div class="file-viewer-loading">\n                    <div class="loading-spinner"></div>\n                    <span>Loading file content...</span>\n                </div>\n                <div class="file-viewer-error" style="display: none;">\n                    <div class="error-icon">⚠️</div>\n                    <div class="error-message"></div>\n                    <div class="error-suggestions"></div>\n                </div>\n                <div class="file-viewer-content-area" style="display: none;">\n                    <div class="file-viewer-toolbar">\n                        <div class="file-viewer-info">\n                            <span class="file-extension"></span>\n                            <span class="file-encoding"></span>\n                        </div>\n                        <div class="file-viewer-actions">\n                            <button class="file-content-copy" onclick="copyFileContent()">\n                                📋 Copy\n                            </button>\n                        </div>\n                    </div>\n                    <div class="file-viewer-scroll-wrapper">\n                        <pre class="file-content-display"><code class="file-content-code"></code></pre>\n                    </div>\n                </div>\n            </div>\n        </div>\n    ',e.addEventListener("click",t=>{t.target===e&&hideFileViewerModal()}),document.addEventListener("keydown",t=>{"Escape"===t.key&&"flex"===e.style.display&&hideFileViewerModal()}),e}async function f(e,t,n){const i=e.querySelector(".file-viewer-file-path"),o=e.querySelector(".file-viewer-file-size");i.textContent=t,o.textContent="",e.querySelector(".file-viewer-loading").style.display="flex",e.querySelector(".file-viewer-error").style.display="none",e.querySelector(".file-viewer-content-area").style.display="none";try{const i=window.socket||window.dashboard?.socketClient?.socket;if(!i)throw new Error("No socket connection available");const o=new Promise((e,n)=>{const o=s=>{s.file_path===t&&(i.off("file_content_response",o),s.success?e(s):n(new Error(s.error||"Failed to read file")))};i.on("file_content_response",o),setTimeout(()=>{i.off("file_content_response",o),n(new Error("Request timeout"))},1e4)});i.emit("read_file",{file_path:t,working_dir:n}),console.log("📄 File viewer request sent:",{filePath:t,workingDir:n});const s=await o;console.log("📦 File content received:",s),e.querySelector(".file-viewer-loading").style.display="none",function(e,t){console.log("📝 displayFileContent called with:",t);const n=e.querySelector(".file-viewer-content-area"),i=e.querySelector(".file-extension"),o=e.querySelector(".file-encoding"),s=e.querySelector(".file-viewer-file-size"),r=e.querySelector(".file-content-code");i&&(i.textContent=`Type: ${t.extension||"unknown"}`);o&&(o.textContent=`Encoding: ${t.encoding||"unknown"}`);s&&(s.textContent=`Size: ${function(e){if(!e)return"0 B";const t=1024,n=["B","KB","MB","GB"],i=Math.floor(Math.log(e)/Math.log(t));return parseFloat((e/Math.pow(t,i)).toFixed(2))+" "+n[i]}(t.file_size)}`);if(r&&t.content){console.log("💡 Setting file content, length:",t.content.length),r.innerHTML=function(e,t){const n=e.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;");switch(t){case".js":case".jsx":case".ts":case".tsx":return function(e){return p(e.replace(/\b(function|const|let|var|if|else|for|while|return|import|export|class|extends)\b/g,'<span class="keyword">$1</span>').replace(/(\/\*[\s\S]*?\*\/|\/\/.*)/g,'<span class="comment">$1</span>').replace(/('[^']*'|"[^"]*"|`[^`]*`)/g,'<span class="string">$1</span>').replace(/\b(\d+)\b/g,'<span class="number">$1</span>'))}(n);case".py":return function(e){return p(e.replace(/\b(def|class|if|elif|else|for|while|return|import|from|as|try|except|finally|with)\b/g,'<span class="keyword">$1</span>').replace(/(#.*)/g,'<span class="comment">$1</span>').replace(/('[^']*'|"[^"]*"|"""[\s\S]*?""")/g,'<span class="string">$1</span>').replace(/\b(\d+)\b/g,'<span class="number">$1</span>'))}(n);case".json":return function(e){return p(e.replace(/("[\w\s]*")\s*:/g,'<span class="property">$1</span>:').replace(/:\s*(".*?")/g,': <span class="string">$1</span>').replace(/:\s*(\d+)/g,': <span class="number">$1</span>').replace(/:\s*(true|false|null)/g,': <span class="keyword">$1</span>'))}(n);case".css":return function(e){return p(e.replace(/([.#]?[\w-]+)\s*\{/g,'<span class="selector">$1</span> {').replace(/([\w-]+)\s*:/g,'<span class="property">$1</span>:').replace(/:\s*([^;]+);/g,': <span class="value">$1</span>;').replace(/(\/\*[\s\S]*?\*\/)/g,'<span class="comment">$1</span>'))}(n);case".html":case".htm":return function(e){return p(e.replace(/(&lt;\/?[\w-]+)/g,'<span class="tag">$1</span>').replace(/([\w-]+)=(['"][^'"]*['"])/g,'<span class="attribute">$1</span>=<span class="string">$2</span>').replace(/(&lt;!--[\s\S]*?--&gt;)/g,'<span class="comment">$1</span>'))}(n);case".md":case".markdown":return function(e){return p(e.replace(/^(#{1,6})\s+(.*)$/gm,'<span class="header">$1</span> <span class="header-text">$2</span>').replace(/\*\*(.*?)\*\*/g,'<span class="bold">**$1**</span>').replace(/\*(.*?)\*/g,'<span class="italic">*$1*</span>').replace(/`([^`]+)`/g,'<span class="code">`$1`</span>').replace(/^\s*[-*+]\s+(.*)$/gm,'<span class="list-marker">•</span> $1'))}(n);default:return p(n)}}(t.content,t.extension);const n=e.querySelector(".file-viewer-scroll-wrapper");n&&setTimeout(()=>{const t=e.querySelector(".modal-content"),i=e.querySelector(".file-viewer-header"),o=e.querySelector(".file-viewer-toolbar"),s=t?.offsetHeight||0,r=i?.offsetHeight||0,a=o?.offsetHeight||0,l=s-r-a-40;console.log("🎯 Setting file viewer scroll height:",{modalHeight:s,headerHeight:r,toolbarHeight:a,availableHeight:l}),n.style.maxHeight=`${l}px`,n.style.overflowY="auto"},50)}else console.warn("⚠️ Missing codeElement or file content");n&&(n.style.display="block",console.log("✅ File content area displayed"))}(e,s)}catch(s){console.error("❌ Failed to fetch file content:",s),e.querySelector(".file-viewer-loading").style.display="none";let i=s.message||"Unknown error occurred",o=[];s.message.includes("No socket connection")?(i="Failed to connect to the monitoring server",o=["Check if the monitoring server is running","Verify the socket connection in the dashboard","Try refreshing the page and reconnecting"]):s.message.includes("timeout")?(i="Request timed out",o=["The file may be too large to load quickly","Check your network connection","Try again in a few moments"]):s.message.includes("File does not exist")?(i="File not found",o=["The file may have been moved or deleted","Check the file path spelling","Refresh the file list to see current files"]):s.message.includes("Access denied")&&(i="Access denied",o=["The file is outside the allowed directories","File access is restricted for security reasons"]),function(e,t){const n=e.querySelector(".file-viewer-error"),i=e.querySelector(".error-message"),o=e.querySelector(".error-suggestions");let s=t.error||"Unknown error occurred";i.innerHTML=`\n        <div class="error-main">${s}</div>\n        ${t.file_path?`<div class="error-file">File: ${t.file_path}</div>`:""}\n        ${t.working_dir?`<div class="error-dir">Working directory: ${t.working_dir}</div>`:""}\n    `,t.suggestions&&t.suggestions.length>0?o.innerHTML=`\n            <h4>Suggestions:</h4>\n            <ul>\n                ${t.suggestions.map(e=>`<li>${e}</li>`).join("")}\n            </ul>\n        `:o.innerHTML="";console.log("📋 Displaying file viewer error:",{originalError:t.error,processedMessage:s,suggestions:t.suggestions}),n.style.display="block"}(e,{error:i,file_path:t,working_dir:n,suggestions:o})}}function p(e){return e.split("\n").map((e,t)=>`<span class="line-number">${String(t+1).padStart(3," ")}</span> ${e||" "}`).join("\n")}function h(e,t){const n=e.querySelector(".git-diff-error"),i=e.querySelector(".error-message"),o=e.querySelector(".error-suggestions");let s=t.error||"Unknown error occurred",r=!1;if(s.includes("not tracked by git")?(s="📝 This file is not tracked by git yet",r=!0):s.includes("No git history found")&&(s="📋 No git history available for this file"),i.innerHTML=`\n        <div class="error-main">${s}</div>\n        ${t.file_path?`<div class="error-file">File: ${t.file_path}</div>`:""}\n        ${t.working_dir?`<div class="error-dir">Working directory: ${t.working_dir}</div>`:""}\n    `,t.suggestions&&t.suggestions.length>0){const e=r?"How to track this file:":"Suggestions:";o.innerHTML=`\n            <h4>${e}</h4>\n            <ul>\n                ${t.suggestions.map(e=>`<li>${e}</li>`).join("")}\n            </ul>\n        `}else o.innerHTML="";console.log("📋 Displaying git diff error:",{originalError:t.error,processedMessage:s,isUntracked:r,suggestions:t.suggestions}),n.style.display="block"}window.clearEvents=function(){window.dashboard&&window.dashboard.clearEvents()},window.exportEvents=function(){window.dashboard&&window.dashboard.exportEvents()},window.clearSelection=function(){window.dashboard&&window.dashboard.clearSelection()},window.switchTab=function(e){window.dashboard&&window.dashboard.switchTab(e)},window.showFileViewerModal=function(e,t){!t&&window.dashboard&&window.dashboard.currentWorkingDir&&(t=window.dashboard.currentWorkingDir);let n=document.getElementById("file-viewer-modal");n||(n=g(),document.body.appendChild(n)),f(n,e,t),n.style.display="flex",document.body.style.overflow="hidden"},window.hideFileViewerModal=function(){const e=document.getElementById("file-viewer-modal");e&&(e.style.display="none",document.body.style.overflow="")},window.copyFileContent=function(){const e=document.getElementById("file-viewer-modal");if(!e)return;const t=e.querySelector(".file-content-code");if(!t)return;const n=t.textContent;if(navigator.clipboard&&navigator.clipboard.writeText)navigator.clipboard.writeText(n).then(()=>{const t=e.querySelector(".file-content-copy"),n=t.textContent;t.textContent="✅ Copied!",setTimeout(()=>{t.textContent=n},2e3)}).catch(e=>{console.error("Failed to copy text:",e)});else{const t=document.createElement("textarea");t.value=n,document.body.appendChild(t),t.select(),document.execCommand("copy"),document.body.removeChild(t);const i=e.querySelector(".file-content-copy"),o=i.textContent;i.textContent="✅ Copied!",setTimeout(()=>{i.textContent=o},2e3)}},window.showGitDiffModal=function(e,t,n){!n&&window.dashboard&&window.dashboard.currentWorkingDir&&(n=window.dashboard.currentWorkingDir);let i=document.getElementById("git-diff-modal");i||(i=function(){const e=document.createElement("div");return e.id="git-diff-modal",e.className="modal git-diff-modal",e.innerHTML='\n        <div class="modal-content git-diff-content">\n            <div class="git-diff-header">\n                <h2 class="git-diff-title">\n                    <span class="git-diff-icon">📋</span>\n                    <span class="git-diff-title-text">Git Diff</span>\n                </h2>\n                <div class="git-diff-meta">\n                    <span class="git-diff-file-path"></span>\n                    <span class="git-diff-timestamp"></span>\n                </div>\n                <button class="git-diff-close" onclick="hideGitDiffModal()">\n                    <span>&times;</span>\n                </button>\n            </div>\n            <div class="git-diff-body">\n                <div class="git-diff-loading">\n                    <div class="loading-spinner"></div>\n                    <span>Loading git diff...</span>\n                </div>\n                <div class="git-diff-error" style="display: none;">\n                    <div class="error-icon">⚠️</div>\n                    <div class="error-message"></div>\n                    <div class="error-suggestions"></div>\n                </div>\n                <div class="git-diff-content-area" style="display: none;">\n                    <div class="git-diff-toolbar">\n                        <div class="git-diff-info">\n                            <span class="commit-hash"></span>\n                            <span class="diff-method"></span>\n                        </div>\n                        <div class="git-diff-actions">\n                            <button class="git-diff-copy" onclick="copyGitDiff()">\n                                📋 Copy\n                            </button>\n                        </div>\n                    </div>\n                    <div class="git-diff-scroll-wrapper">\n                        <pre class="git-diff-display"><code class="git-diff-code"></code></pre>\n                    </div>\n                </div>\n            </div>\n        </div>\n    ',e.addEventListener("click",t=>{t.target===e&&hideGitDiffModal()}),document.addEventListener("keydown",t=>{"Escape"===t.key&&"flex"===e.style.display&&hideGitDiffModal()}),e}(),document.body.appendChild(i)),async function(e,t,n,i){const o=e.querySelector(".git-diff-file-path"),s=e.querySelector(".git-diff-timestamp");o.textContent=t,s.textContent=n?new Date(n).toLocaleString():"Latest",e.querySelector(".git-diff-loading").style.display="flex",e.querySelector(".git-diff-error").style.display="none",e.querySelector(".git-diff-content-area").style.display="none";try{let o=8765;if(window.dashboard&&window.dashboard.socketClient&&window.dashboard.socketClient.port)o=window.dashboard.socketClient.port;else{const e=document.getElementById("port-input");e&&e.value&&(o=e.value)}const s=new URLSearchParams({file:t});n&&s.append("timestamp",n),i&&s.append("working_dir",i);const a=`http://localhost:${o}/api/git-diff?${s}`;console.log("🌐 Making git diff request to:",a),console.log("📋 Git diff request parameters:",{filePath:t,timestamp:n,workingDir:i,urlParams:s.toString()});try{const e=await fetch(`http://localhost:${o}/health`,{method:"GET",headers:{Accept:"application/json","Content-Type":"application/json"},mode:"cors"});if(!e.ok)throw new Error(`Server health check failed: ${e.status} ${e.statusText}`);console.log("✅ Server health check passed")}catch(r){throw new Error(`Cannot reach server at localhost:${o}. Health check failed: ${r.message}`)}const l=await fetch(a,{method:"GET",headers:{Accept:"application/json","Content-Type":"application/json"},mode:"cors"});if(!l.ok)throw new Error(`HTTP ${l.status}: ${l.statusText}`);const c=await l.json();console.log("📦 Git diff response:",c),e.querySelector(".git-diff-loading").style.display="none",c.success?(console.log("📊 Displaying successful git diff"),function(e,t){console.log("📝 displayGitDiff called with:",t);const n=e.querySelector(".git-diff-content-area"),i=e.querySelector(".commit-hash"),o=e.querySelector(".diff-method"),s=e.querySelector(".git-diff-code");console.log("🔍 Elements found:",{contentArea:!!n,commitHashElement:!!i,methodElement:!!o,codeElement:!!s}),i&&(i.textContent=`Commit: ${t.commit_hash}`);o&&(o.textContent=`Method: ${t.method}`);if(s&&t.diff){console.log("💡 Setting diff content, length:",t.diff.length),s.innerHTML=t.diff.split("\n").map(e=>{const t=e.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;");return e.startsWith("+++")||e.startsWith("---")?`<span class="diff-header">${t}</span>`:e.startsWith("@@")?`<span class="diff-meta">${t}</span>`:e.startsWith("+")?`<span class="diff-addition">${t}</span>`:e.startsWith("-")?`<span class="diff-deletion">${t}</span>`:e.startsWith("commit ")||e.startsWith("Author:")||e.startsWith("Date:")?`<span class="diff-header">${t}</span>`:`<span class="diff-context">${t}</span>`}).join("\n");const n=e.querySelector(".git-diff-scroll-wrapper");n&&setTimeout(()=>{const t=e.querySelector(".modal-content"),i=e.querySelector(".git-diff-header"),o=e.querySelector(".git-diff-toolbar"),s=t?.offsetHeight||0,r=i?.offsetHeight||0,a=o?.offsetHeight||0,l=s-r-a-40;console.log("🎯 Setting explicit scroll height:",{modalHeight:s,headerHeight:r,toolbarHeight:a,availableHeight:l}),n.style.maxHeight=`${l}px`,n.style.overflowY="auto"},50)}else console.warn("⚠️ Missing codeElement or diff data");n&&(n.style.display="block",console.log("✅ Content area displayed"))}(e,c)):(console.log("⚠️ Displaying git diff error:",c),h(e,c))}catch(a){console.error("❌ Failed to fetch git diff:",a),console.error("Error details:",{name:a.name,message:a.message,stack:a.stack,filePath:t,timestamp:n,workingDir:i}),e.querySelector(".git-diff-loading").style.display="none";let o=`Network error: ${a.message}`,s=[];a.message.includes("Failed to fetch")?(o="Failed to connect to the monitoring server",s=["Check if the monitoring server is running on port 8765","Verify the port configuration in the dashboard","Check browser console for CORS or network errors","Try refreshing the page and reconnecting"]):a.message.includes("health check failed")?(o=a.message,s=["The server may be starting up - try again in a few seconds","Check if another process is using port 8765","Restart the claude-mpm monitoring server"]):a.message.includes("HTTP")&&(o=`Server error: ${a.message}`,s=["The server encountered an internal error","Check the server logs for more details","Try with a different file or working directory"]),h(e,{error:o,file_path:t,working_dir:i,suggestions:s,debug_info:{error_type:a.name,original_message:a.message,port:window.dashboard?.socketClient?.port||document.getElementById("port-input")?.value||"8765",timestamp:(new Date).toISOString()}})}}(i,e,t,n),i.style.display="flex",document.body.style.overflow="hidden"},window.hideGitDiffModal=function(){const e=document.getElementById("git-diff-modal");e&&(e.style.display="none",document.body.style.overflow="")},window.copyGitDiff=function(){const e=document.getElementById("git-diff-modal");if(!e)return;const t=e.querySelector(".git-diff-code");if(!t)return;const n=t.textContent;if(navigator.clipboard&&navigator.clipboard.writeText)navigator.clipboard.writeText(n).then(()=>{const t=e.querySelector(".git-diff-copy"),n=t.textContent;t.textContent="✅ Copied!",setTimeout(()=>{t.textContent=n},2e3)}).catch(e=>{console.error("Failed to copy text:",e)});else{const t=document.createElement("textarea");t.value=n,document.body.appendChild(t),t.select(),document.execCommand("copy"),document.body.removeChild(t);const i=e.querySelector(".git-diff-copy"),o=i.textContent;i.textContent="✅ Copied!",setTimeout(()=>{i.textContent=o},2e3)}},window.showFileViewerModal=function(e){let t="";window.dashboard&&window.dashboard.currentWorkingDir&&(t=window.dashboard.currentWorkingDir);let n=document.getElementById("file-viewer-modal");n||(n=g(),document.body.appendChild(n)),f(n,e,t),n.style.display="flex",document.body.style.overflow="hidden"},window.hideFileViewerModal=function(){const e=document.getElementById("file-viewer-modal");e&&(e.style.display="none",document.body.style.overflow="")},window.copyFileContent=function(){const e=document.getElementById("file-viewer-modal");if(!e)return;const t=e.querySelector(".file-content-code");if(!t)return;const n=t.textContent;if(navigator.clipboard&&navigator.clipboard.writeText)navigator.clipboard.writeText(n).then(()=>{const t=e.querySelector(".file-content-copy"),n=t.textContent;t.textContent="✅ Copied!",setTimeout(()=>{t.textContent=n},2e3)}).catch(e=>{console.error("Failed to copy text:",e)});else{const t=document.createElement("textarea");t.value=n,document.body.appendChild(t),t.select(),document.execCommand("copy"),document.body.removeChild(t);const i=e.querySelector(".file-content-copy"),o=i.textContent;i.textContent="✅ Copied!",setTimeout(()=>{i.textContent=o},2e3)}},window.showAgentInstanceDetails=function(e){window.dashboard&&"function"==typeof window.dashboard.showAgentInstanceDetails?window.dashboard.showAgentInstanceDetails(e):console.error("Dashboard not available or method not found")},document.addEventListener("DOMContentLoaded",function(){window.dashboard=new d,console.log("Dashboard loaded and initialized")});
+//# sourceMappingURL=dashboard.js.map

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

@@ -0,0 +1,2 @@
+const t=window.io;class e{constructor(){this.socket=null,this.port=null,this.connectionCallbacks={connect:[],disconnect:[],error:[],event:[]},this.isConnected=!1,this.isConnecting=!1,this.events=[],this.sessions=new Map,this.currentSessionId=null,this.startStatusCheckFallback()}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:1e4,maxReconnectionAttempts:10,timeout:1e4,forceNew:!0,transports:["websocket","polling"]}),this.setupSocketHandlers()}setupSocketHandlers(){this.socket.on("connect",()=>{console.log("Connected to Socket.IO server"),this.isConnected=!0,this.isConnecting=!1,this.notifyConnectionStatus("Connected","connected"),this.connectionCallbacks.connect.forEach(t=>t(this.socket.id)),this.requestStatus()}),this.socket.on("disconnect",t=>{console.log("Disconnected from server:",t),this.isConnected=!1,this.isConnecting=!1,this.notifyConnectionStatus(`Disconnected: ${t}`,"disconnected"),this.connectionCallbacks.disconnect.forEach(e=>e(t))}),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}}),this.connectionCallbacks.error.forEach(t=>t(e))}),this.socket.on("claude_event",t=>{const e=this.transformEvent(t);this.addEvent(e)}),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("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}requestStatus(){this.socket&&this.socket.connected&&(console.log("Requesting server status..."),this.socket.emit("request.status"))}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.socket.emit("get_history",e)}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});const n=this.sessions.get(e);n.lastActivity=t.timestamp,n.eventCount++}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)}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}}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="system",e.subtype=n.toLowerCase()),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.includes(".")){const[t,...s]=n.split(".");e.type=t,e.subtype=s.join(".")}}else e.type="unknown",e.subtype="";return t.data&&"object"==typeof t.data&&(Object.keys(t.data).forEach(n=>{e[n]=t.data[n]}),e.data=t.data),"hook"!==e.type||"pre_tool"!==e.subtype&&"post_tool"!==e.subtype||console.log("Transformed tool event:",{type:e.type,subtype:e.subtype,tool_name:e.tool_name,has_data:!!e.data,keys:Object.keys(e).filter(t=>"data"!==t)}),e}getState(){return{events:this.events,sessions:this.sessions,currentSessionId:this.currentSessionId}}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))}}}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&&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"),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"),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()||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("agents")?"agents":e.includes("tools")?"tools":e.includes("files")?"files":"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/agent-inference.js

@@ -1,13 +1,13 @@
 /**
  * Agent Inference Module
- * 
+ *
  * Handles agent inference and processing logic for determining whether events
  * originate from the main agent or subagents based on event patterns and context.
- * 
+ *
  * WHY: Separated from main dashboard to isolate complex agent inference logic
  * that analyzes event patterns to determine agent context. This provides better
  * maintainability and testability for a critical feature.
- * 
+ *
  * DESIGN DECISION: This module maintains its own state for inference tracking
  * but relies on the event viewer for source data, keeping clear separation of
  * concerns while enabling delegation context tracking across events.
@@ -15,7 +15,7 @@
 class AgentInference {
     constructor(eventViewer) {
         this.eventViewer = eventViewer;
-        
+
         // Agent inference state tracking
         this.state = {
             // Track current subagent delegation context
@@ -29,7 +29,7 @@ class AgentInference {
             // Map of agent events to their PM delegation
             agentToDelegation: new Map() // agent_name -> delegation_id
         };
-        
+
         console.log('Agent inference system initialized');
     }
 
@@ -60,12 +60,12 @@ class AgentInference {
         const eventType = event.hook_event_name || data.hook_event_name || event.type || '';
         const subtype = event.subtype || data.subtype || '';
         const toolName = event.tool_name || data.tool_name || '';
-        
+
         // Debug logging for first few events to understand structure
         if (Math.random() < 0.1) {
             console.log('Agent inference debug:', {
-                eventType, 
-                toolName, 
+                eventType,
+                toolName,
                 hasData: !!event.data,
                 dataKeys: Object.keys(data),
                 eventKeys: Object.keys(event),
@@ -73,7 +73,7 @@ class AgentInference {
                 subagentType: event.subagent_type || data.subagent_type
             });
         }
-        
+
         // Direct event detection (highest confidence) - from design doc
         if (eventType === 'SubagentStop' || subtype === 'subagent_stop') {
             const agentName = this.extractAgentNameFromEvent(event);
@@ -92,7 +92,7 @@ class AgentInference {
                 reason: 'SubagentStop event'
             };
         }
-        
+
         if (eventType === 'Stop' || subtype === 'stop') {
             return {
                 type: 'main_agent',
@@ -101,7 +101,7 @@ class AgentInference {
                 reason: 'Stop event'
             };
         }
-        
+
         // Tool-based detection (high confidence) - from design doc
         if (toolName === 'Task') {
             const agentName = this.extractSubagentTypeFromTask(event);
@@ -120,7 +120,7 @@ class AgentInference {
                 };
             }
         }
-        
+
         // Hook event pattern analysis (high confidence)
         if (eventType === 'PreToolUse' && toolName === 'Task') {
             const agentName = this.extractSubagentTypeFromTask(event);
@@ -133,7 +133,7 @@ class AgentInference {
                 };
             }
         }
-        
+
         // Session pattern analysis (medium confidence) - from design doc
         if (sessionId) {
             const sessionLower = sessionId.toLowerCase();
@@ -146,11 +146,11 @@ class AgentInference {
                 };
             }
         }
-        
+
         // Agent type field analysis - check multiple possible locations
         const agentType = event.agent_type || data.agent_type || event.agent_id || data.agent_id;
         const subagentType = event.subagent_type || data.subagent_type;
-        
+
         if (subagentType && subagentType !== 'unknown') {
             return {
                 type: 'subagent',
@@ -159,7 +159,7 @@ class AgentInference {
                 reason: 'subagent_type field'
             };
         }
-        
+
         if (agentType && agentType !== 'unknown' && agentType !== 'main') {
             return {
                 type: 'subagent',
@@ -168,7 +168,7 @@ class AgentInference {
                 reason: 'agent_type field'
             };
         }
-        
+
         // Check for delegation_details from hook handler
         if (data.delegation_details?.agent_type) {
             return {
@@ -178,12 +178,12 @@ class AgentInference {
                 reason: 'delegation_details'
             };
         }
-        
+
         // Check if this looks like a Hook event from Socket.IO
         if (event.type && event.type.startsWith('hook.')) {
             // Extract the hook type
             const hookType = event.type.replace('hook.', '');
-            
+
             // Handle SubagentStart events
             if (hookType === 'subagent_start' || (data.hook_event_name === 'SubagentStart')) {
                 const rawAgentName = data.agent_type || data.agent_id || 'Subagent';
@@ -199,7 +199,7 @@ class AgentInference {
                     reason: 'Socket.IO hook SubagentStart'
                 };
             }
-            
+
             // Handle SubagentStop events
             if (hookType === 'subagent_stop' || (data.hook_event_name === 'SubagentStop')) {
                 const rawAgentName = data.agent_type || data.agent_id || 'Subagent';
@@ -211,7 +211,7 @@ class AgentInference {
                 };
             }
         }
-        
+
         // Default to main agent (from design doc)
         return {
             type: 'main_agent',
@@ -228,7 +228,7 @@ class AgentInference {
      */
     normalizeAgentName(agentName) {
         if (!agentName) return 'Unknown';
-        
+
         // Agent name mapping from raw format to display format
         const agentNameMap = {
             'engineer': 'Engineer Agent',
@@ -242,13 +242,13 @@ class AgentInference {
             'test_integration': 'Test Integration Agent',
             'pm': 'PM Agent'
         };
-        
+
         // Check if we have a direct mapping
         const normalized = agentNameMap[agentName.toLowerCase()];
         if (normalized) {
             return normalized;
         }
-        
+
         // If no direct mapping, apply basic formatting:
         // Convert underscore to space, capitalize words, and add "Agent" if not present
         let formatted = agentName
@@ -256,12 +256,12 @@ class AgentInference {
             .split(' ')
             .map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
             .join(' ');
-        
+
         // Add "Agent" suffix if not already present
         if (!formatted.toLowerCase().includes('agent')) {
             formatted += ' Agent';
         }
-        
+
         return formatted;
     }
 
@@ -272,7 +272,7 @@ class AgentInference {
      */
     extractSubagentTypeFromTask(event) {
         let rawAgentName = null;
-        
+
         // Check tool_parameters directly
         if (event.tool_parameters?.subagent_type) {
             rawAgentName = event.tool_parameters.subagent_type;
@@ -289,7 +289,7 @@ class AgentInference {
         else if (event.tool_input?.subagent_type) {
             rawAgentName = event.tool_input.subagent_type;
         }
-        
+
         // Normalize the agent name before returning
         return rawAgentName ? this.normalizeAgentName(rawAgentName) : null;
     }
@@ -302,13 +302,13 @@ class AgentInference {
     extractAgentNameFromEvent(event) {
         // Priority order based on reliability from design doc
         const data = event.data || {};
-        
+
         // 1. Task tool subagent_type (highest priority)
         if (event.tool_name === 'Task' || data.tool_name === 'Task') {
             const taskAgent = this.extractSubagentTypeFromTask(event);
             if (taskAgent) return taskAgent;
         }
-        
+
         // 2. Direct subagent_type field
         if (event.subagent_type && event.subagent_type !== 'unknown') {
             return this.normalizeAgentName(event.subagent_type);
@@ -316,12 +316,12 @@ class AgentInference {
         if (data.subagent_type && data.subagent_type !== 'unknown') {
             return this.normalizeAgentName(data.subagent_type);
         }
-        
+
         // 2.5. Check delegation_details
         if (data.delegation_details?.agent_type && data.delegation_details.agent_type !== 'unknown') {
             return this.normalizeAgentName(data.delegation_details.agent_type);
         }
-        
+
         // 3. Agent type fields (but not 'main' or 'unknown')
         if (event.agent_type && !['main', 'unknown'].includes(event.agent_type)) {
             return this.normalizeAgentName(event.agent_type);
@@ -329,7 +329,7 @@ class AgentInference {
         if (data.agent_type && !['main', 'unknown'].includes(data.agent_type)) {
             return this.normalizeAgentName(data.agent_type);
         }
-        
+
         // 4. Agent ID field as fallback
         if (event.agent_id && !['main', 'unknown'].includes(event.agent_id)) {
             return this.normalizeAgentName(event.agent_id);
@@ -337,16 +337,16 @@ class AgentInference {
         if (data.agent_id && !['main', 'unknown'].includes(data.agent_id)) {
             return this.normalizeAgentName(data.agent_id);
         }
-        
+
         // 5. Other fallbacks
         if (event.agent && event.agent !== 'unknown') {
             return this.normalizeAgentName(event.agent);
         }
-        
+
         if (event.name && event.name !== 'unknown') {
             return this.normalizeAgentName(event.name);
         }
-        
+
         // Default fallback
         return 'Unknown';
     }
@@ -357,37 +357,37 @@ class AgentInference {
      */
     processAgentInference() {
         const events = this.eventViewer.events;
-        
+
         // Reset inference state
         this.state.currentDelegation = null;
         this.state.sessionAgents.clear();
         this.state.eventAgentMap.clear();
         this.state.pmDelegations.clear();
         this.state.agentToDelegation.clear();
-        
+
         console.log('Processing agent inference for', events.length, 'events');
-        
+
         // Early return if no events
         if (!events || events.length === 0) {
             console.log('No events to process for agent inference');
             return;
         }
-        
+
         // Process events chronologically to track delegation context
         events.forEach((event, index) => {
             let finalAgent; // Declare outside try-catch to ensure scope availability
-            
+
             try {
                 const inference = this.inferAgentFromEvent(event);
                 const sessionId = event.session_id || event.data?.session_id || 'default';
-                
+
                 // Determine agent for this event based on context
                 finalAgent = inference;
-                
+
                 // If we're in a delegation context and this event doesn't have high confidence agent info,
                 // inherit from delegation context
-                if (this.state.currentDelegation && 
-                    inference.confidence === 'default' && 
+                if (this.state.currentDelegation &&
+                    inference.confidence === 'default' &&
                     sessionId === this.state.currentDelegation.sessionId) {
                     finalAgent = {
                         type: 'subagent',
@@ -396,7 +396,7 @@ class AgentInference {
                         reason: 'inherited from delegation context'
                     };
                 }
-                
+
                 // Track delegation boundaries and PM delegations
                 if (event.tool_name === 'Task' && inference.type === 'subagent') {
                     // Start of subagent delegation - create PM delegation entry
@@ -411,10 +411,10 @@ class AgentInference {
                         timestamp: event.timestamp,
                         agentEvents: [] // Collect all events from this agent
                     };
-                    
+
                     this.state.pmDelegations.set(delegationId, pmDelegation);
                     this.state.agentToDelegation.set(inference.agentName, delegationId);
-                    
+
                     this.state.currentDelegation = {
                         agentName: inference.agentName,
                         sessionId: sessionId,
@@ -427,18 +427,18 @@ class AgentInference {
                     // End of subagent delegation
                     if (this.state.currentDelegation) {
                         this.state.currentDelegation.endIndex = index;
-                        
+
                         // Update PM delegation end point
                         const pmDelegation = this.state.pmDelegations.get(this.state.currentDelegation.delegationId);
                         if (pmDelegation) {
                             pmDelegation.endIndex = index;
                         }
-                        
+
                         console.log('Delegation ended:', this.state.currentDelegation);
                         this.state.currentDelegation = null;
                     }
                 }
-                
+
                 // Track events within PM delegation context
                 if (this.state.currentDelegation && finalAgent.type === 'subagent') {
                     const pmDelegation = this.state.pmDelegations.get(this.state.currentDelegation.delegationId);
@@ -450,13 +450,13 @@ class AgentInference {
                         });
                     }
                 }
-                
+
                 // Store the inference result
                 this.state.eventAgentMap.set(index, finalAgent);
-                
+
                 // Update session agent tracking
                 this.state.sessionAgents.set(sessionId, finalAgent);
-                
+
                 // Debug first few inferences
                 if (index < 5) {
                     console.log(`Event ${index} agent inference:`, {
@@ -470,7 +470,7 @@ class AgentInference {
                 }
             } catch (error) {
                 console.error(`Error processing event ${index} for agent inference:`, error);
-                
+
                 // Set a default finalAgent if not already set due to error
                 if (!finalAgent) {
                     finalAgent = {
@@ -480,12 +480,12 @@ class AgentInference {
                         reason: 'error during processing'
                     };
                 }
-                
+
                 // Store the default inference for this event
                 this.state.eventAgentMap.set(index, finalAgent);
             }
         });
-        
+
         console.log('Agent inference processing complete. Results:', {
             total_events: events.length,
             inferred_agents: this.state.eventAgentMap.size,
@@ -511,24 +511,24 @@ class AgentInference {
      */
     getInferredAgentForEvent(event) {
         const events = this.eventViewer.events;
-        
+
         // Try to find by exact reference first
         let eventIndex = events.indexOf(event);
-        
+
         // If exact match fails, try to find by timestamp or session_id + timestamp
         if (eventIndex === -1 && event.timestamp) {
-            eventIndex = events.findIndex(e => 
-                e.timestamp === event.timestamp && 
+            eventIndex = events.findIndex(e =>
+                e.timestamp === event.timestamp &&
                 e.session_id === event.session_id
             );
         }
-        
+
         // If we still can't find it, perform inline inference
         if (eventIndex === -1) {
             console.log('Agent inference: Could not find event in events array, performing inline inference');
             return this.inferAgentFromEvent(event);
         }
-        
+
         // Get cached inference or perform new inference
         let inference = this.getInferredAgent(eventIndex);
         if (!inference) {
@@ -536,7 +536,7 @@ class AgentInference {
             // Cache the result
             this.state.eventAgentMap.set(eventIndex, inference);
         }
-        
+
         return inference;
     }
 
@@ -587,11 +587,11 @@ class AgentInference {
      */
     getUniqueAgentInstances() {
         const agentMap = new Map(); // agentName -> consolidated data
-        
+
         // Consolidate all PM delegations by agent name
         for (const [delegationId, delegation] of this.state.pmDelegations) {
             const agentName = delegation.agentName;
-            
+
             if (!agentMap.has(agentName)) {
                 // First delegation for this agent type
                 agentMap.set(agentName, {
@@ -607,7 +607,7 @@ class AgentInference {
                     delegationCount: 1
                 });
             }
-            
+
             // Add this delegation to the consolidated agent
             const agent = agentMap.get(agentName);
             agent.delegations.push({
@@ -619,14 +619,14 @@ class AgentInference {
                 endIndex: delegation.endIndex,
                 events: delegation.agentEvents
             });
-            
+
             if (delegation.pmCall) {
                 agent.pmCalls.push(delegation.pmCall);
             }
-            
+
             // Merge events from all delegations
             agent.allEvents = agent.allEvents.concat(delegation.agentEvents);
-            
+
             // Update consolidated metadata
             if (new Date(delegation.timestamp) < new Date(agent.firstTimestamp)) {
                 agent.firstTimestamp = delegation.timestamp;
@@ -634,11 +634,11 @@ class AgentInference {
             if (new Date(delegation.timestamp) > new Date(agent.lastTimestamp)) {
                 agent.lastTimestamp = delegation.timestamp;
             }
-            
+
             agent.totalEventCount += delegation.agentEvents.length;
             agent.delegationCount++;
         }
-        
+
         // Handle agents that appear without explicit PM delegation (implied PM)
         const events = this.eventViewer.events;
         for (let index = 0; index < events.length; index++) {
@@ -676,11 +676,11 @@ class AgentInference {
                 });
             }
         }
-        
+
         // Convert map to array and sort by first appearance (timestamp)
         const uniqueInstances = Array.from(agentMap.values())
             .sort((a, b) => new Date(a.firstTimestamp) - new Date(b.firstTimestamp));
-        
+
         console.log('Consolidated unique agents:', {
             total_unique_agents: uniqueInstances.length,
             agents: uniqueInstances.map(agent => ({
@@ -689,7 +689,11 @@ class AgentInference {
                 totalEvents: agent.totalEventCount
             }))
         });
-        
+
         return uniqueInstances;
     }
-}
+}
+
+// ES6 Module export
+export { AgentInference };
+export default AgentInference;