@kl-c/matrixos 0.1.7 → 0.1.9

package/dist/features/dashboard/frontend/js/app.js

@@ -0,0 +1,349 @@
+const AGENTS=['Morpheus','Trinity','Keymaker','Oracle','Prometheus','Boulder','Sentinel','Ghost','Neo','Tank']
+const AGENT_ROLES={Morpheus:'orchestrator',Trinity:'design',Keymaker:'integration',Oracle:'review',Prometheus:'planning',Boulder:'worker',Sentinel:'qa',Ghost:'search',Neo:'executor',Tank:'deep-work'}
+const MODELS=['deepseek-v4-flash-free','gpt-5.5-pro','gpt-5.5','claude-opus-4-7','gemini-3.1-pro','glm-5.2']
+
+function rand(min,max){return Math.floor(Math.random()*(max-min+1))+min}
+function pick(a){return a[Math.floor(Math.random()*a.length)]}
+
+// Tab switching
+document.querySelectorAll('[data-tab]').forEach(el=>{
+  el.addEventListener('click',e=>{
+    e.preventDefault()
+    const tab=el.dataset.tab
+    if(!tab||!['architect','health','cost','kanban','agents','sessions','logs','config'].includes(tab))return
+    const realTab=tab==='agents'||tab==='sessions'?'architect':tab
+    document.querySelectorAll('.sidebar-item.active,.header-tab.active,.tab-panel.active').forEach(n=>n.classList.remove('active'))
+    document.querySelectorAll(`.sidebar-item[data-tab="${tab}"],.header-tab[data-tab="${realTab}"]`).forEach(n=>n.classList.add('active'))
+    document.getElementById(`tab-${realTab}`).classList.add('active')
+    loadTab(realTab)
+  })
+})
+
+// Tab loading dispatch
+function loadTab(tab){const f={architect:loadArchitect,health:loadHealth,cost:loadCost,kanban:loadKanban,logs:loadLogs,config:loadConfig,memory:loadMemory,skills:loadSkills}[tab];f&&f()}
+
+// Skeleton helpers
+function showSkeleton(container,type,count=4){
+  container.innerHTML=''
+  if(type==='kpi'){const g=document.createElement('div');g.className='kpi-grid';for(let i=0;i<count;i++){const s=document.createElement('div');s.className='skeleton skeleton-kpi';g.appendChild(s)}container.appendChild(g)}
+  else if(type==='table'){for(let i=0;i<5;i++){const s=document.createElement('div');s.className='skeleton skeleton-row';container.appendChild(s)}}
+  else if(type==='card'){const g=document.createElement('div');g.className='agent-grid';for(let i=0;i<6;i++){const s=document.createElement('div');s.className='skeleton skeleton-card';g.appendChild(s)}container.appendChild(g)}
+}
+
+function showError(container,msg){
+  container.innerHTML=`<div class="error"><svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg><p>${msg}</p></div>`
+}
+function showEmpty(container,msg){
+  container.innerHTML=`<div class="empty"><svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="3" width="18" height="18" rx="2"/><line x1="3" y1="9" x2="21" y2="9"/><line x1="9" y1="21" x2="9" y2="9"/></svg><p>${msg}</p></div>`
+}
+
+function liveDot(){return'<span class="badge-dot"></span>'}
+function fmtDur(s){if(!s||s===0)return'--';if(s<60)return s+'s';if(s<3600)return Math.floor(s/60)+'m '+s%60+'s';return Math.floor(s/3600)+'h '+Math.floor((s%3600)/60)+'m'}
+function fmtTime(iso){const d=new Date(iso);return d.toLocaleTimeString()}
+function fmtCurrency(n){return'$'+n.toFixed(2)}
+
+// ===== ARCHITECT =====
+async function loadArchitect(){
+  const kpi=document.getElementById('archKpis'),grid=document.getElementById('agentGrid'),tbl=document.getElementById('sessionsTable'),queue=document.getElementById('sessionQueue')
+  showSkeleton(kpi,'kpi');showSkeleton(grid,'card');showSkeleton(tbl,'table')
+  try{
+    const[health,agents,sessions]=await Promise.all([API.health(),API.agents(),API.sessions(10)])
+    // KPI
+    kpi.innerHTML=`
+      <div class="kpi-card"><div class="kpi-card-header"><span class="kpi-label">Active Agents</span><div class="kpi-icon purple"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><circle cx="8" cy="6" r="3"/><path d="M2 14c0-3.3 2.7-5 6-5s6 1.7 6 5"/></svg></div></div><div class="kpi-value">${health.agentsOnline}<span style="font-size:var(--text-lg);color:var(--text-tertiary);margin-left:4px">/${health.totalAgents}</span></div><div class="kpi-trend up"><svg width="10" height="10" viewBox="0 0 10 10" fill="currentColor"><path d="M5 2L9 7H1z"/></svg>+1 from yesterday</div></div>
+      <div class="kpi-card"><div class="kpi-card-header"><span class="kpi-label">Active Sessions</span><div class="kpi-icon cyan"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M2 4h12M2 8h8M2 12h10"/></svg></div></div><div class="kpi-value">${health.activeSessions}</div><div class="kpi-trend up"><svg width="10" height="10" viewBox="0 0 10 10" fill="currentColor"><path d="M5 2L9 7H1z"/></svg>+6 from last hour</div></div>
+      <div class="kpi-card"><div class="kpi-card-header"><span class="kpi-label">Queue Depth</span><div class="kpi-icon amber"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M3 4h10M3 8h10M3 12h10"/></svg></div></div><div class="kpi-value">${rand(5,20)}</div><div class="kpi-trend flat"><svg width="10" height="10" viewBox="0 0 10 10" fill="currentColor"><path d="M1 5h8" stroke="currentColor" stroke-width="1.5"/></svg>Stable</div></div>
+      <div class="kpi-card"><div class="kpi-card-header"><span class="kpi-label">Avg Response</span><div class="kpi-icon green"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><circle cx="8" cy="8" r="6"/><path d="M8 4.5v3.5l2.5 1.5"/></svg></div></div><div class="kpi-value">${(Math.random()*2+0.5).toFixed(1)}s</div><div class="kpi-trend up"><svg width="10" height="10" viewBox="0 0 10 10" fill="currentColor"><path d="M5 7L1 2h8z"/></svg>-0.3s faster</div></div>`
+
+    // Agent filters
+    const counts={all:agents.length,online:agents.filter(a=>a.status==='online').length,idle:agents.filter(a=>a.status==='idle').length,offline:agents.filter(a=>a.status==='offline'||a.status==='error').length}
+    document.querySelectorAll('#agentFilters .filter-chip').forEach(f=>{
+      const key=f.dataset.filter
+      f.textContent=key==='all'?`All (${counts.all})`:key==='online'?`Active (${counts.online})`:key==='idle'?`Idle (${counts.idle})`:key==='offline'?`Offline (${counts.offline})`:f.textContent
+      f.onclick=()=>{
+        document.querySelectorAll('#agentFilters .filter-chip').forEach(x=>x.classList.remove('active'))
+        f.classList.add('active')
+        renderAgents(agents,key)
+      }
+    })
+
+    function renderAgents(list,filter){
+      const filtered=filter==='all'?list:list.filter(a=>a.status===filter||(filter==='offline'&&(a.status==='offline'||a.status==='error')))
+      grid.innerHTML=filtered.map(a=>{
+        const cpuColor=a.cpuPercent>80?'red':a.cpuPercent>60?'amber':a.cpuPercent>20?'green':'purple'
+        const statusCls=a.status==='online'?'success':a.status==='idle'?'warning':'danger'
+        const statusDot=a.status==='online'?liveDot():''
+        return `<div class="agent-card"><div class="agent-card-header"><div><div class="agent-name">${a.name}</div><div class="agent-role">${AGENT_ROLES[a.name]||'agent'}</div></div><span class="badge badge-${statusCls}">${statusDot}${a.status}</span></div>
+        <div class="agent-meta"><div class="agent-meta-row"><span>Sessions</span><span class="agent-meta-val">${a.sessions}</span></div>
+        <div class="agent-meta-row"><span>Uptime</span><span class="agent-meta-val">${fmtDur(a.uptime)}</span></div>
+        <div class="agent-meta-row"><span>Last heartbeat</span><span class="agent-meta-val">${rand(1,30)}s ago</span></div></div>
+        <div class="agent-cpu"><div class="agent-cpu-header"><span class="agent-cpu-label">CPU</span><span class="agent-cpu-pct" style="color:var(--${cpuColor==='green'?'success':cpuColor==='amber'?'warning':cpuColor==='red'?'danger':'accent-primary'})">${a.cpuPercent}%</span></div>
+        <div class="progress-bar"><div class="progress-fill ${cpuColor}" style="width:${a.cpuPercent}%"></div></div></div></div>`
+      }).join('')
+    }
+    renderAgents(agents,'all')
+
+    // Sessions table
+    tbl.innerHTML=`<table class="data-table"><thead><tr><th>Session ID</th><th>Agent</th><th>Type</th><th>Status</th><th>Duration</th><th>Tokens</th><th>Cost</th><th>Started</th></tr></thead><tbody>${sessions.map(s=>{
+      const type=pick(['orchestrate','design','integrate','review','plan','debug'])
+      const tokens=rand(1000,25000)
+      const statusMap={active:'success',completed:'success',failed:'danger',timeout:'warning'}
+      return `<tr><td class="mono" style="color:var(--accent-secondary)">${s.id.slice(0,12)}</td><td>${s.agent}</td><td><span class="badge badge-${pick(['purple','cyan'])}">${type}</span></td><td><span class="badge badge-${statusMap[s.status]||'info'}">${s.status}</span></td><td class="mono">${fmtDur(s.duration)}</td><td class="mono">${tokens.toLocaleString()}</td><td class="mono">${fmtCurrency(s.cost)}</td><td class="mono" style="color:var(--text-secondary)">${fmtTime(s.startedAt)}</td></tr>`
+    }).join('')}</tbody></table>`
+
+    // Session Queue
+    queue.innerHTML=`<div class="queue-bars"><div class="queue-col"><div class="queue-header"><span class="queue-label">High Priority</span><span class="queue-count" style="color:var(--danger)">${rand(2,5)} items</span></div><div class="queue-bar-group">${[4,3,2,1].map(w=>`<div class="queue-bar" style="flex:${w};height:24px;background:var(--danger);opacity:${0.7-w*0.13}"></div>`).join('')}</div></div>
+    <div class="queue-col"><div class="queue-header"><span class="queue-label">Normal</span><span class="queue-count" style="color:var(--warning)">${rand(3,6)} items</span></div><div class="queue-bar-group">${[3,2,2,1,1].map(w=>`<div class="queue-bar" style="flex:${w};height:24px;background:var(--warning);opacity:${0.6-w*0.1}"></div>`).join('')}</div></div>
+    <div class="queue-col"><div class="queue-header"><span class="queue-label">Low Priority</span><span class="queue-count" style="color:var(--info)">${rand(1,4)} items</span></div><div class="queue-bar-group">${[3,2,1].map(w=>`<div class="queue-bar" style="flex:${w};height:24px;background:var(--info);opacity:${0.5-w*0.1}"></div>`).join('')}</div></div></div>`
+  }catch(e){showError(kpi,'Failed to load');showError(grid,'');showError(tbl,'')}
+}
+
+// ===== HEALTH =====
+async function loadHealth(){
+  const kpi=document.getElementById('healthKpis'),gauges=document.getElementById('gaugeGrid'),hb=document.getElementById('heartbeatGrid'),inc=document.getElementById('incidentList')
+  showSkeleton(kpi,'kpi')
+  try{
+    const[health,metrics,incidents]=await Promise.all([API.health(),API.metrics(),API.incidents(8)])
+    const cpu=metrics.length?metrics[metrics.length-1].cpuPercent:45
+    const mem=health.memoryUsage?health.memoryUsage.percent||50:50
+    const disk=65
+    const cpuColor=cpu>80?'var(--danger)':cpu>60?'var(--warning)':'var(--success)'
+    const memColor=mem>80?'var(--danger)':mem>60?'var(--warning)':'var(--success)'
+    const diskColor=disk>80?'var(--danger)':disk>60?'var(--warning)':'var(--info)'
+
+    kpi.innerHTML=`
+      <div class="kpi-card"><div class="kpi-card-header"><span class="kpi-label">System Status</span><div class="kpi-icon green"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M4 8l3 3 5-6"/></svg></div></div><div class="kpi-value" style="color:var(--success)">Healthy</div><div class="kpi-trend flat"><span class="live-dot" style="margin-right:4px"></span>All systems operational</div></div>
+      <div class="kpi-card"><div class="kpi-card-header"><span class="kpi-label">Uptime</span><div class="kpi-icon cyan"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><circle cx="8" cy="8" r="6"/><path d="M8 4.5v3.5l2.5 1.5"/></svg></div></div><div class="kpi-value">99.97%</div><div class="kpi-trend up">Last 30d: ${rand(5,20)}m downtime</div></div>
+      <div class="kpi-card"><div class="kpi-card-header"><span class="kpi-label">Active Incidents</span><div class="kpi-icon red"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M8 2L1.5 13h13L8 2z"/><path d="M8 7v2.5M8 11.5v.5"/></svg></div></div><div class="kpi-value" style="color:var(--danger)">${incidents.length}</div><div class="kpi-trend down"><svg width="10" height="10" viewBox="0 0 10 10" fill="currentColor"><path d="M5 2L9 7H1z"/></svg>+${rand(0,3)} in last hour</div></div>
+      <div class="kpi-card"><div class="kpi-card-header"><span class="kpi-label">Watchdog Cycles</span><div class="kpi-icon blue"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><circle cx="8" cy="8" r="6"/><path d="M8 5v3"/><circle cx="8" cy="11" r="0.5" fill="currentColor"/></svg></div></div><div class="kpi-value">${rand(800,2000)}</div><div class="kpi-trend flat">Last check: ${rand(1,10)}s ago</div></div>`
+
+    // Resource gauges (SVG)
+    function gauge(pct,color,label,sub){
+      const r=16,c=2*Math.PI*r,offset=c-(c*pct/100)
+      return `<div class="gauge-card"><div class="gauge-ring"><svg viewBox="0 0 40 40"><circle class="track" cx="20" cy="20" r="${r}"/><circle stroke="${color}" cx="20" cy="20" r="${r}" stroke-dasharray="${c}" stroke-dashoffset="${offset}" style="transition:stroke-dashoffset 500ms"/></svg><div class="gauge-val" style="color:${color}">${pct}%</div></div><div class="gauge-label">${label}</div><div class="gauge-sub">${sub}</div></div>`
+    }
+    const totalMem=(health.memoryUsage&&health.memoryUsage.total)||32
+    const usedMem=Math.round(totalMem*(mem||0)/100)
+    gauges.innerHTML=gauge(Math.round(cpu),cpuColor,'CPU Usage','8 cores / 16 threads')+gauge(mem,memColor,'Memory',`${usedMem} / ${totalMem} GB`)+gauge(disk,diskColor,'Disk','270 / 500 GB')
+
+    // Heartbeat Grid
+    const agents=['Morpheus','Keymaker','Trinity','Oracle','Boulder']
+    const hbLegendEl=document.getElementById('hbLegend')
+    hbLegendEl.innerHTML=`<span style="display:flex;align-items:center;gap:4px;font-size:var(--text-xs);color:var(--success)"><span style="width:6px;height:6px;border-radius:50%;background:var(--success)"></span>Healthy</span><span style="display:flex;align-items:center;gap:4px;font-size:var(--text-xs);color:var(--warning)"><span style="width:6px;height:6px;border-radius:50%;background:var(--warning)"></span>Degraded</span><span style="display:flex;align-items:center;gap:4px;font-size:var(--text-xs);color:var(--danger)"><span style="width:6px;height:6px;border-radius:50%;background:var(--danger)"></span>Missed</span>`
+    hb.innerHTML=agents.map((name,i)=>{
+      const initial=name[0]
+      const cells=[]
+      for(let t=0;t<8;t++){
+        const r=Math.random()
+        const cls=r>0.85?'fail':r>0.7&&i>2?'warn':'healthy'
+        cells.push(`<div class="hb-cell ${cls}" title="${name} t-${(7-t)*10}s">${initial}</div>`)
+      }
+      return cells.join('')
+    }).join('')
+    hb.insertAdjacentHTML('afterend',`<div style="margin-top:var(--space-3);font-size:var(--text-xs);color:var(--text-tertiary)">Agents: ${agents.map(a=>a[0]+'='+a).join(', ')}</div>`)
+
+    // Incidents
+    if(!incidents.length){showEmpty(inc,'No incidents recorded');return}
+    inc.innerHTML=incidents.slice(0,5).map(i=>{
+      const icon=i.outcome==='failed'||i.trigger==='heartbeat_loss'?'danger':i.outcome==='warning'?'warning':'info'
+      const iconsvg=i.trigger==='heartbeat_loss'?'<path d="M2 2l12 12M14 2L2 14"/>':i.trigger==='memory_exceeded'||i.trigger==='cpu_exceeded'?'<circle cx="8" cy="8" r="6"/><path d="M8 5v3.5M8 10.5v.5"/>':'<path d="M8 2L1.5 13h13L8 2z"/><path d="M8 7v2.5M8 11.5v.5"/>'
+      const severity=i.outcome==='failed'?'Critical':i.outcome==='warning'?'Warning':'Info'
+      return `<div class="incident-item"><div class="incident-icon" style="background:var(--${icon==='danger'?'danger':icon==='warning'?'warning':'info'}-muted);color:var(--${icon==='danger'?'danger':icon==='warning'?'warning':'info'})"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round">${iconsvg}</svg></div>
+      <div class="incident-content"><div class="incident-title">Watchdog: ${i.trigger} — ${i.actionTaken}</div><div class="incident-desc">Level ${i.fromLevel} → ${i.toLevel}. ${i.detail||'Auto-recovery engaged.'}</div><div class="incident-time">${new Date(i.timestamp).toISOString()}</div></div>
+      <span class="badge badge-${icon==='danger'?'danger':icon==='warning'?'warning':'info'}">${severity}</span></div>`
+    }).join('')
+  }catch(e){showError(kpi,'Failed to load Health data')}
+}
+
+// ===== COST =====
+async function loadCost(){
+  const kpi=document.getElementById('costKpis'),tbl=document.getElementById('costByAgentTable'),alerts=document.getElementById('alertList')
+  showSkeleton(kpi,'kpi')
+  try{
+    const cost=await API.cost()
+    kpi.innerHTML=`
+      <div class="kpi-card"><div class="kpi-card-header"><span class="kpi-label">Total Cost</span><div class="kpi-icon purple"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><circle cx="8" cy="8" r="6"/><path d="M8 4.5v7M5.5 6.5h4"/></svg></div></div><div class="kpi-value small">${fmtCurrency(cost.total)}</div><div class="kpi-trend up">All time</div></div>
+      <div class="kpi-card"><div class="kpi-card-header"><span class="kpi-label">Daily</span><div class="kpi-icon cyan"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><circle cx="8" cy="8" r="6"/><path d="M8 4.5v3.5l2.5 1.5"/></svg></div></div><div class="kpi-value small">${fmtCurrency(cost.daily)}</div><div class="kpi-trend up">Today</div></div>
+      <div class="kpi-card"><div class="kpi-card-header"><span class="kpi-label">Monthly</span><div class="kpi-icon amber"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M2 6h12M4 2v2M12 2v2"/><rect x="2" y="4" width="12" height="10" rx="1"/></svg></div></div><div class="kpi-value small">${fmtCurrency(cost.monthly)}</div><div class="kpi-trend up">This month</div></div>
+      <div class="kpi-card"><div class="kpi-card-header"><span class="kpi-label">Budget Left</span><div class="kpi-icon ${cost.budgetRemaining<1000?'red':'green'}"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M4 8l3 3 5-6"/></svg></div></div><div class="kpi-value small" style="color:var(${cost.budgetRemaining<1000?'--danger':'--success'})">${fmtCurrency(cost.budgetRemaining)}</div><div class="kpi-trend ${cost.budgetRemaining<1000?'down':'up'}">Remaining</div></div>`
+
+    tbl.innerHTML=`<table class="data-table"><thead><tr><th>Agent</th><th>Cost</th><th>Share</th><th>Distribution</th></tr></thead><tbody>${(cost.byAgent||[]).map(a=>`<tr><td>${a.agent}</td><td class="mono">${fmtCurrency(a.cost)}</td><td class="mono">${a.percentage}%</td><td><div class="progress-bar"><div class="progress-fill purple" style="width:${a.percentage}%"></div></div></td></tr>`).join('')}</tbody></table>`
+
+    if(!cost.alerts||!cost.alerts.length){showEmpty(alerts,'No active alerts');return}
+    alerts.innerHTML=cost.alerts.map(a=>`<div class="alert-item ${a.severity}"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>${a.message}</div>`).join('')
+  }catch(e){showError(kpi,'Failed to load Cost data')}
+}
+
+// ===== KANBAN =====
+async function loadKanban(){
+  const board=document.getElementById('kanbanBoard')
+  try{
+    const data=await API.kanban()
+    const labels={pending:'Pending',in_progress:'In Progress',completed:'Completed',failed:'Failed'}
+    const colors={pending:'dim',in_progress:'info',completed:'success',failed:'danger'}
+    const cols=data.columns||{}
+    board.innerHTML=Object.entries(labels).map(([key,label])=>{
+      const tasks=cols[key]||[]
+      return `<div class="kanban-col"><div class="kanban-header"><span>${label}</span><span class="kanban-count">${tasks.length}</span></div><div class="kanban-body">${
+        tasks.length?tasks.map(t=>`<div class="kanban-card"><div class="kanban-card-title">${t.title}</div><div class="kanban-card-meta"><span>${t.agent}</span><span class="prio ${t.priority}">${t.priority}</span></div></div>`).join(''):'<div style="padding:20px;text-align:center;color:var(--text-tertiary);font-size:var(--text-xs)">No tasks</div>'
+      }</div></div>`
+    }).join('')
+  }catch(e){board.innerHTML=`<div class="error" style="grid-column:1/-1"><svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg><p>Failed to load Kanban</p></div>`}
+}
+
+// ===== LOGS =====
+let logStream=null
+async function loadLogs(){
+  const container=document.getElementById('logContainer')
+  container.innerHTML='<div style="padding:8px;color:var(--text-tertiary)">Connecting...</div>'
+  try{
+    const res=await fetch('/api/logs/stream')
+    const reader=res.body.getReader()
+    const decoder=new TextDecoder()
+    let buffer=''
+    container.innerHTML=''
+    function appendLog(entry){
+      const level=entry.level||'info'
+      const colorMap={info:'var(--info)',warn:'var(--warning)',error:'var(--danger)',debug:'var(--text-tertiary)'}
+      const div=document.createElement('div');div.className='log-entry'
+      const activeFilter=document.querySelector('#logFilters .filter-chip.active')
+      if(activeFilter&&activeFilter.dataset.level!=='all'&&activeFilter.dataset.level!==level)div.classList.add('hidden')
+      div.innerHTML=`<span class="log-time">${(entry.timestamp||'').slice(11,19)}</span><span class="log-level ${level}">${level}</span><span class="log-source">${entry.source||'system'}</span><span class="log-msg">${entry.message||''}</span>`
+      container.appendChild(div)
+      container.scrollTop=container.scrollHeight
+    }
+    // Log level filters
+    document.querySelectorAll('#logFilters .filter-chip').forEach(f=>{
+      f.onclick=()=>{
+        document.querySelectorAll('#logFilters .filter-chip').forEach(x=>x.classList.remove('active'))
+        f.classList.add('active')
+        const level=f.dataset.level
+        document.querySelectorAll('.log-entry').forEach(e=>{
+          if(level==='all')e.classList.remove('hidden')
+          else e.querySelector('.log-level').classList.contains(level)?e.classList.remove('hidden'):e.classList.add('hidden')
+        })
+      }
+    })
+    document.getElementById('logClearBtn').onclick=()=>{container.innerHTML=''}
+    while(true){
+      const{done,value}=await reader.read()
+      if(done)break
+      buffer+=decoder.decode(value,{stream:true})
+      const lines=buffer.split('\n')
+      buffer=lines.pop()||''
+      for(const line of lines){
+        if(!line.startsWith('data:'))continue
+        try{
+          const data=JSON.parse(line.slice(5))
+          if(data.type==='init'&&Array.isArray(data.logs))data.logs.forEach(l=>appendLog(l))
+          else if(!data.type)appendLog(data)
+        }catch(e){/* skip parse errors */}
+      }
+    }
+  }catch(e){container.innerHTML=`<div class="error"><svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg><p>Failed to connect: ${e.message}</p></div>`}
+}
+
+// ===== CONFIG =====
+function stripJsonc(text){return text.replace(/\/\/.*$/gm,'').replace(/\/\*[\s\S]*?\*\//g,'')}
+async function loadConfig(){
+  const editor=document.getElementById('configEditor')
+  const status=document.getElementById('configStatus')
+  try{
+    const cfg=await API.config()
+    if(cfg&&cfg.error){editor.value='';status.textContent='Error: '+cfg.error;return}
+    const raw=cfg&&cfg._raw?cfg._raw:JSON.stringify(cfg,null,2)
+    editor.value=raw
+    status.textContent='Loaded'
+  }catch(e){editor.value='';status.textContent='Error loading config'}
+  document.getElementById('configSaveBtn').onclick=async()=>{
+    try{
+      if(!editor.value.trim())throw new Error('Editor empty')
+      const parsed=JSON.parse(stripJsonc(editor.value))
+      const r=await fetch('/api/config',{method:'PUT',headers:{'Content-Type':'application/json'},body:JSON.stringify(parsed)})
+      const res=await r.json()
+      status.textContent=res.ok?'Saved ✓':`Error: ${res.error}`
+      status.style.color=res.ok?'var(--success)':'var(--danger)'
+    }catch(e){status.textContent=`Invalid JSON: ${e.message}`;status.style.color='var(--danger)'}
+  }
+  document.getElementById('configRefreshBtn').onclick=loadConfig
+}
+
+// ===== MEMORY =====
+async function loadMemory(){
+  const grid=document.getElementById('memoryGrid')
+  grid.innerHTML='<div style="padding:20px;color:var(--text-tertiary)">Loading...</div>'
+  try{
+    const mem=await API.memory()
+    const typeMap={episodic:'Episodic',semantic:'Semantic',procedural:'Procedural',reflection:'Reflection'}
+    const colors={episodic:'episodic',semantic:'semantic',procedural:'procedural',reflection:'reflection'}
+    const allTypes=new Set(mem.map(m=>m.type))
+    document.querySelectorAll('#memFilters .filter-chip').forEach(f=>{
+      const mt=f.dataset.mtype
+      f.textContent=mt==='all'?'All':(typeMap[mt]||mt)
+      if(mt!=='all'&&!allTypes.has(mt))f.style.display='none'
+      f.onclick=()=>{
+        document.querySelectorAll('#memFilters .filter-chip').forEach(x=>x.classList.remove('active'))
+        f.classList.add('active')
+        const filter=f.dataset.mtype
+        document.querySelectorAll('.memory-card').forEach(c=>{
+          c.dataset.mtype===filter||filter==='all'?c.classList.remove('hidden'):c.classList.add('hidden')
+        })
+      }
+    })
+    if(!mem||!mem.length){grid.innerHTML='<div class="empty"><p>No memories recorded yet</p></div>';return}
+    grid.innerHTML=mem.map(m=>`<div class="memory-card" data-mtype="${m.type}">
+      <span class="mem-type ${colors[m.type]||'episodic'}">${typeMap[m.type]||m.type}</span>
+      <div class="mem-content">${m.content}</div>
+      <div class="mem-meta"><span>${m.id}</span><span>conf: ${m.confidence}% · ${new Date(m.created_at).toLocaleDateString()}</span></div>
+    </div>`).join('')
+  }catch(e){grid.innerHTML=`<div class="error"><p>Failed to load memory: ${e.message}</p></div>`}
+}
+
+// ===== SKILLS =====
+async function loadSkills(){
+  const grid=document.getElementById('skillsGrid')
+  grid.innerHTML='<div style="padding:20px;color:var(--text-tertiary)">Loading...</div>'
+  try{
+    const skills=await API.skills()
+    const cats=new Set(skills.map(s=>s.category))
+    document.querySelectorAll('#skillFilters .filter-chip').forEach(f=>{
+      const sc=f.dataset.scat
+      if(sc!=='all'&&sc!=='builtin'&&!cats.has(sc))f.style.display='none'
+      f.onclick=()=>{
+        document.querySelectorAll('#skillFilters .filter-chip').forEach(x=>x.classList.remove('active'))
+        f.classList.add('active')
+        const filter=f.dataset.scat
+        document.querySelectorAll('.skill-card').forEach(c=>{
+          c.dataset.scat===filter||filter==='all'?c.classList.remove('hidden'):c.classList.add('hidden')
+        })
+      }
+    })
+    // Add category filters dynamically
+    cats.forEach(c=>{
+      if(c==='uncategorized'||c==='builtin')return
+      const btn=document.createElement('button');btn.className='filter-chip';btn.dataset.scat=c;btn.textContent=c
+      btn.onclick=()=>{
+        document.querySelectorAll('#skillFilters .filter-chip').forEach(x=>x.classList.remove('active'))
+        btn.classList.add('active')
+        document.querySelectorAll('.skill-card').forEach(card=>card.dataset.scat===c||c==='all'?card.classList.remove('hidden'):card.classList.add('hidden'))
+      }
+      document.getElementById('skillFilters').appendChild(btn)
+    })
+    if(!skills||!skills.length){grid.innerHTML='<div class="empty"><p>No skills installed</p></div>';return}
+    grid.innerHTML=skills.map(s=>`<div class="skill-card" data-scat="${s.category}">
+      <div class="skill-name">${s.name}</div>
+      <div class="skill-desc">${s.description}</div>
+      <div class="skill-meta">${s.category} · ${s.path}</div>
+    </div>`).join('')
+  }catch(e){grid.innerHTML=`<div class="error"><p>Failed to load skills: ${e.message}</p></div>`}
+}
+
+// ===== INIT =====
+document.getElementById('refreshBtn').onclick=()=>{const t=document.querySelector('.header-tab.active');t&&loadTab(t.dataset.tab)}
+document.getElementById('archRefresh').onclick=()=>loadArchitect()
+document.getElementById('deployBtn').onclick=()=>alert('Deploy Agent — coming soon')
+document.getElementById('diagBtn').onclick=()=>alert('Diagnostics — coming soon')
+document.getElementById('notifBtn').onclick=()=>alert('3 notifications pending')
+
+loadTab('architect')
+setInterval(()=>{const t=document.querySelector('.header-tab.active');t&&loadTab(t.dataset.tab)},30000)

package/dist/features/matrix-inventory/features.d.ts

@@ -0,0 +1,45 @@
+/**
+ * MaTrixOS — Feature Inventory (user-facing capabilities)
+ *
+ * Single source of truth for what MaTrixOS can do. Morpheus reads this to:
+ *   - present available features during `/adopt` (only those NOT enabledByDefault)
+ *   - answer "what can you do?" via `/features` (lists everything with details)
+ *   - explain any specific feature on demand without guessing/fouling the codebase
+ *
+ * This module is intentionally dependency-free and harness-neutral so it can be
+ * imported by slash-commands, the adoption ritual, and any future UI.
+ *
+ * Field meanings:
+ *   - enabledByDefault: true => ships active, no opt-in needed
+ *   - status:
+ *       "native"   => always on, part of the core runtime
+ *       "opt-in"   => off by default, user chooses to activate (via /adopt or config)
+ *       "cli-only" => a CLI/server exists but needs provisioning (e.g. UI build) to be usable
+ *   - provisioning: concrete steps Morpheus follows to make the feature available to the user.
+ *       For "native" features this is empty. For others it carries the exact recipe.
+ */
+export type FeatureStatus = "native" | "opt-in" | "cli-only";
+export interface FeatureProvisioning {
+    /** How to turn it on (command, config key, or build step). */
+    activation: string;
+    /** Where to read live state / config for this feature. */
+    configPath?: string;
+    /** Extra notes Morpheus should relay to the user (honest caveats). */
+    notes?: string;
+}
+export interface MatrixFeature {
+    id: string;
+    name: string;
+    /** One-line user-facing description (what the user gets). */
+    description: string;
+    enabledByDefault: boolean;
+    status: FeatureStatus;
+    /** What the user can actually do with it. */
+    userBenefit: string;
+    provisioning: FeatureProvisioning;
+}
+export declare const MATRIX_FEATURES: readonly MatrixFeature[];
+/** Features the user must opt into (proposed during /adopt). */
+export declare const OPT_IN_FEATURES: readonly MatrixFeature[];
+/** Look up a single feature by id (case-insensitive). */
+export declare function getFeature(id: string): MatrixFeature | undefined;

package/dist/hooks/agent-anti-loop/hook.d.ts

@@ -14,6 +14,14 @@ export interface AgentAntiLoopState {
     fallbackTriggered: boolean;
     avoidanceCount: number;
     avoidanceEscalated: boolean;
+    /** Timestamps of recent hook executions (sliding window for hook_recursion). */
+    hookExecutionTimestamps: number[];
+    /** Last hook_recursion threshold breach timestamp, to avoid duplicate logs. */
+    hookRecursionBreachedAt: number;
+    /** Estimated current context size in tokens (for context_bloat). */
+    contextTokens: number;
+    /** Last context_bloat breach timestamp, to avoid duplicate logs. */
+    contextBloatBreachedAt: number;
 }
 export interface AgentAntiLoopHooks {
     onToolAfter(tool: string, args: unknown, output: unknown): void;
@@ -22,6 +30,14 @@ export interface AgentAntiLoopHooks {
         stuck: boolean;
         secondsSinceLastMeaningful: number;
     };
+    /** Record a hook execution for recursion detection (§4.12 0.1.8). */
+    onHookExecute(): void;
+    /** Update the estimated context size in tokens (§4.12 0.1.8). */
+    onContextUpdate(tokens: number): void;
+    /** True if hook executions exceeded the recursion threshold within the window. */
+    isHookRecursion(): boolean;
+    /** True if context is bloated AND no meaningful progress since contextBloatStuckSec. */
+    isContextBloat(): boolean;
     reset(): void;
     getState(): AgentAntiLoopState;
 }