@beignet/devtools 0.0.2 → 0.0.4

package/src/ui.ts

@@ -2,7 +2,8 @@ import {
   type DevtoolsRouteAccessOptions,
   devtoolsNotFoundResponse,
   isDevtoolsRouteEnabled,
-} from "./access";
+} from "./access.js";
+import { devtoolsPanelModelBrowserSource } from "./ui-model.js";
 
 /**
  * Devtools UI handler
@@ -98,6 +99,22 @@ button.danger:hover{border-color:rgba(225,29,72,.24);background:#fff1f2}
 .detail-title{color:var(--text);font-family:var(--font-sans);font-size:12px;font-weight:650;margin-bottom:6px}
 .correlated{display:flex;flex-direction:column;gap:6px}
 .correlated-row{display:flex;gap:7px;align-items:flex-start;color:var(--text-muted)}
+.request-map{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:12px}
+.request-fact{border:1px solid var(--border);border-radius:7px;background:var(--surface);padding:9px 10px;min-width:0}
+.request-fact-label{font-size:10px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.1em}
+.request-fact-value{font-family:var(--font-mono);font-size:12px;color:var(--text);margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.detail-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:10px}
+.lifecycle{display:flex;flex-direction:column;gap:7px}
+.phase-row{display:grid;grid-template-columns:108px minmax(130px,.8fr) minmax(180px,1.2fr) 92px;gap:8px;align-items:start;border:1px solid var(--border);border-radius:7px;background:var(--bg);padding:8px}
+.phase-name{font-family:var(--font-mono);font-size:11px;color:var(--text)}
+.phase-summary{color:var(--text-muted);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.phase-meta{font-family:var(--font-mono);font-size:10px;color:var(--text-dim)}
+.owner-pill{display:inline-block;border:1px solid var(--border);border-radius:999px;background:var(--surface-2);color:var(--text-muted);font-family:var(--font-mono);font-size:10px;padding:2px 6px;line-height:1.4}
+.owner-framework,.owner-provider,.owner-devtools{color:var(--red);background:#fff1f2;border-color:#ffe4e6}
+.owner-route{color:var(--green);background:#ecfdf5;border-color:#d1fae5}
+.owner-transport,.owner-client{color:var(--blue);background:#eff6ff;border-color:#dbeafe}
+.owner-job,.owner-schedule,.owner-outbox{color:var(--orange);background:#fff7ed;border-color:#fed7aa}
+.redaction-note{border:1px solid var(--border);border-radius:7px;background:var(--surface);padding:8px 10px;color:var(--text-muted);font-size:12px;margin-top:8px}
 .focus-panel{display:flex;flex-direction:column}
 .focus-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:14px;border-bottom:1px solid var(--border);background:var(--bg)}
 .focus-title{font-size:15px;line-height:1.2;font-weight:720;color:var(--text)}
@@ -107,7 +124,7 @@ button.danger:hover{border-color:rgba(225,29,72,.24);background:#fff1f2}
 .focus-metric-label{font-size:10px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.1em}
 .focus-metric-value{font-family:var(--font-mono);font-size:15px;color:var(--text);margin-top:3px}
 .event-table{display:flex;flex-direction:column}
-.table-row{display:grid;grid-template-columns:86px minmax(140px,.9fr) minmax(220px,1.4fr) 96px 112px;gap:10px;align-items:start;padding:11px 14px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .1s}
+.table-row{display:grid;grid-template-columns:86px minmax(140px,.8fr) minmax(210px,1.2fr) minmax(130px,.8fr) 78px 104px;gap:10px;align-items:start;padding:11px 14px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .1s}
 .table-row:last-child{border-bottom:0}
 .table-row:hover{background:var(--surface)}
 .table-row.open{background:#f8fafc}
@@ -115,8 +132,31 @@ button.danger:hover{border-color:rgba(225,29,72,.24);background:#fff1f2}
 .table-cell strong{display:block;color:var(--text);font-size:13px;font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .table-cell code{font-family:var(--font-mono);font-size:11px;color:var(--text-muted);background:var(--surface-2);border:1px solid var(--border);border-radius:4px;padding:1px 4px}
 .table-summary{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.table-correlation{display:flex;flex-wrap:wrap;gap:4px}
+.table-empty{font-family:var(--font-mono);font-size:10px;color:var(--text-dim)}
 .table-detail{display:none;grid-column:1/-1;margin-top:2px;padding-top:10px;border-top:1px solid var(--border);font-family:var(--font-mono);font-size:11px;color:var(--text-muted);line-height:1.7;white-space:pre-wrap;word-break:break-word}
 .table-row.open .table-detail{display:block}
+.table-detail-note{font-family:var(--font-sans);font-size:12px;color:var(--text-muted);margin-bottom:8px;white-space:normal}
+.result-chip{display:inline-block;border:1px solid var(--border);border-radius:5px;background:var(--surface);font-family:var(--font-mono);font-size:10px;color:var(--text-muted);padding:2px 5px}
+.result-failed,.result-blocked,.result-deadLettered{color:var(--red);background:#fff1f2;border-color:#ffe4e6}
+.result-retryScheduled{color:var(--orange);background:#fff7ed;border-color:#fed7aa}
+.result-delivered,.result-completed,.result-allowed,.result-hit,.result-signed_in{color:var(--green);background:#ecfdf5;border-color:#d1fae5}
+.error-board{display:flex;flex-direction:column}
+.error-owner-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding:14px;border-bottom:1px solid var(--border);background:var(--bg)}
+.error-owner-card{border:1px solid var(--border);border-radius:7px;background:var(--surface);padding:9px 10px;min-width:0}
+.error-owner-card strong{display:block;font-family:var(--font-mono);font-size:15px;color:var(--text)}
+.error-owner-card span{display:block;color:var(--text-muted);font-size:10px;text-transform:uppercase;letter-spacing:.1em;margin-top:2px}
+.error-group{border-bottom:1px solid var(--border)}
+.error-group:last-child{border-bottom:0}
+.error-group-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;background:var(--surface)}
+.error-group-title{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:var(--text)}
+.error-group-count{font-family:var(--font-mono);font-size:11px;color:var(--text-muted)}
+.error-row{display:grid;grid-template-columns:86px minmax(170px,1fr) 90px minmax(150px,.9fr) minmax(140px,.8fr);gap:10px;align-items:start;padding:11px 14px;border-top:1px solid var(--border);cursor:pointer;transition:background .1s}
+.error-row:hover{background:var(--surface)}
+.error-row.open{background:#f8fafc}
+.error-message{min-width:0;color:var(--text);font-size:13px;font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.error-context{font-family:var(--font-mono);font-size:11px;color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.error-related{display:flex;flex-direction:column;gap:5px;margin-top:8px}
 .empty{text-align:center;padding:58px 16px;color:var(--text-dim);font-size:13px;background:var(--bg)}
 .badge{display:inline-block;font-size:10px;font-weight:650;padding:2px 6px;border-radius:4px;text-transform:uppercase;letter-spacing:.06em;line-height:1.4;border:1px solid transparent}
 .badge-request{background:#eff6ff;color:var(--blue);border-color:#dbeafe}
@@ -124,6 +164,7 @@ button.danger:hover{border-color:rgba(225,29,72,.24);background:#fff1f2}
 .badge-usecase{background:#f5f3ff;color:var(--purple);border-color:#ede9fe}
 .badge-eventBus{background:#ecfdf5;color:var(--green);border-color:#d1fae5}
 .badge-job{background:#fff7ed;color:var(--orange);border-color:#fed7aa}
+.badge-outbox{background:#fefce8;color:#a16207;border-color:#fef08a}
 .badge-schedule{background:#f0f9ff;color:#0369a1;border-color:#bae6fd}
 .badge-provider{background:#f8fafc;color:var(--gray);border-color:var(--border)}
 .badge-custom{background:#f0fdfa;color:#0f766e;border-color:#ccfbf1}
@@ -135,6 +176,7 @@ button.danger:hover{border-color:rgba(225,29,72,.24);background:#fff1f2}
 .badge-notifications{background:#f5f3ff;color:#6d28d9;border-color:#ddd6fe}
 .badge-rateLimit{background:#fffbeb;color:#b45309;border-color:#fde68a}
 .badge-storage{background:#f0fdf4;color:#15803d;border-color:#bbf7d0}
+.badge-uploads{background:#f0f9ff;color:#0369a1;border-color:#bae6fd}
 .request-id{font-family:var(--font-mono);font-size:10px;color:var(--text-muted);padding:2px 5px;background:var(--surface-2);border:1px solid var(--border);border-radius:4px}
 .trace-id{font-family:var(--font-mono);font-size:10px;color:var(--accent-strong);padding:2px 5px;background:#eef2ff;border:1px solid rgba(79,70,229,.16);border-radius:4px}
 @media(max-width:760px){
@@ -149,9 +191,14 @@ button.danger:hover{border-color:rgba(225,29,72,.24);background:#fff1f2}
   .event-time{min-width:0}
   .event-summary{white-space:normal}
   .request-detail{grid-template-columns:1fr}
+  .request-map{grid-template-columns:repeat(2,minmax(0,1fr))}
+  .detail-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
+  .phase-row{grid-template-columns:1fr;gap:5px}
   .focus-head{flex-direction:column}
   .focus-metrics{grid-template-columns:repeat(2,minmax(0,1fr));min-width:0;width:100%}
   .table-row{grid-template-columns:1fr;gap:6px}
+  .error-owner-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
+  .error-row{grid-template-columns:1fr;gap:6px}
   .table-detail{grid-column:auto}
 }
 </style>
@@ -162,7 +209,7 @@ button.danger:hover{border-color:rgba(225,29,72,.24);background:#fff1f2}
     <div>
       <div class="brand"><span class="mark">B</span><span>Beignet</span></div>
       <h1>Beignet <span>Devtools</span></h1>
-      <div class="subtitle">A local timeline for requests, use cases, errors, jobs, schedules, and provider activity.</div>
+      <div class="subtitle">A local timeline for requests, use cases, errors, jobs, outbox delivery, schedules, and provider activity.</div>
     </div>
     <div class="controls">
       <span class="status"><span class="dot" id="statusDot"></span><span id="statusText">Connecting</span></span>
@@ -217,11 +264,13 @@ button.danger:hover{border-color:rgba(225,29,72,.24);background:#fff1f2}
     {id:"errors",label:"Errors",type:"error",watcher:"errors"},
     {id:"events",label:"Events",type:"eventBus",watcher:"eventBus"},
     {id:"jobs",label:"Jobs",type:"job",watcher:"jobs"},
+    {id:"outbox",label:"Outbox",watcher:"outbox",watcherName:"outbox"},
     {id:"schedules",label:"Schedules",type:"schedule",watcher:"schedules"},
     {id:"providers",label:"Providers",type:"provider",watcher:"providers"},
     {id:"db",label:"Database",type:"custom",watcher:"db",watcherName:"db"},
     {id:"cache",label:"Cache",type:"custom",watcher:"cache",watcherName:"cache"},
     {id:"storage",label:"Storage",type:"custom",watcher:"storage",watcherName:"storage"},
+    {id:"uploads",label:"Uploads",type:"custom",watcher:"uploads",watcherName:"uploads"},
     {id:"mail",label:"Mail",type:"custom",watcher:"mail",watcherName:"mail"},
     {id:"notifications",label:"Notifications",type:"custom",watcher:"notifications",watcherName:"notifications"},
     {id:"auth",label:"Auth",type:"custom",watcher:"auth",watcherName:"auth"},
@@ -229,8 +278,9 @@ button.danger:hover{border-color:rgba(225,29,72,.24);background:#fff1f2}
     {id:"rateLimit",label:"Rate limits",type:"custom",watcher:"rateLimit",watcherName:"rateLimit"},
     {id:"custom",label:"Custom",type:"custom",watcher:"custom"}
   ];
-  const FOCUS_PANEL_TABS={events:true,jobs:true,schedules:true,db:true,cache:true,storage:true,mail:true,notifications:true,auth:true,audit:true,rateLimit:true};
-  const BUILT_IN_WATCHERS={requests:true,errors:true,useCases:true,eventBus:true,jobs:true,schedules:true,providers:true,db:true,cache:true,storage:true,mail:true,notifications:true,auth:true,audit:true,rateLimit:true,custom:true};
+  const FOCUS_PANEL_TABS={events:true,jobs:true,outbox:true,schedules:true,db:true,cache:true,storage:true,uploads:true,mail:true,notifications:true,auth:true,audit:true,rateLimit:true};
+  const BUILT_IN_WATCHERS={requests:true,errors:true,useCases:true,eventBus:true,jobs:true,outbox:true,schedules:true,providers:true,db:true,cache:true,storage:true,uploads:true,mail:true,notifications:true,auth:true,audit:true,rateLimit:true,custom:true};
+  const ERROR_OWNERS=["route","framework","provider","job","schedule","outbox","client","devtools","unknown"];
   let events=[];
   let watchers=[];
   let activeTab=localStorage.getItem("beignet-devtools-tab")||"timeline";
@@ -297,6 +347,7 @@ button.danger:hover{border-color:rgba(225,29,72,.24);background:#fff1f2}
       case "usecase": return e.name+" ("+e.phase+")"+(e.durationMs!==undefined?" "+e.durationMs+"ms":"");
       case "eventBus": return e.eventName||"Domain event";
       case "job": return e.jobName+" -> "+e.status;
+      case "outbox": return e.messageName+" ("+e.messageKind+") -> "+e.status;
       case "schedule": return e.scheduleName+" -> "+e.status;
       case "provider": return e.providerName+" -> "+e.action;
       case "custom": return (e.label||e.name||"Custom event")+(e.summary?" - "+e.summary:"");
@@ -305,6 +356,7 @@ button.danger:hover{border-color:rgba(225,29,72,.24);background:#fff1f2}
   }
 
   function tabMatchesEvent(tab,event){
+    if(tab.id==="errors")return event.type==="error"||failureFor(event);
     if(tab.type&&event.type!==tab.type)return false;
     if(tab.watcherName&&event.watcher!==tab.watcherName)return false;
     return true;
@@ -318,6 +370,7 @@ button.danger:hover{border-color:rgba(225,29,72,.24);background:#fff1f2}
       case "usecase": return "useCases";
       case "eventBus": return "eventBus";
       case "job": return "jobs";
+      case "outbox": return "outbox";
       case "schedule": return "schedules";
       case "provider": return "providers";
       case "custom": return "custom";
@@ -336,6 +389,7 @@ button.danger:hover{border-color:rgba(225,29,72,.24);background:#fff1f2}
         case "notifications": return "notifications";
         case "rateLimit": return "rate limit";
         case "storage": return "storage";
+        case "uploads": return "uploads";
         default: return "custom";
       }
     }
@@ -353,6 +407,7 @@ button.danger:hover{border-color:rgba(225,29,72,.24);background:#fff1f2}
         case "notifications": return "notifications";
         case "rateLimit": return "rateLimit";
         case "storage": return "storage";
+        case "uploads": return "uploads";
         default: return "custom";
       }
     }
@@ -393,6 +448,9 @@ button.danger:hover{border-color:rgba(225,29,72,.24);background:#fff1f2}
       event.summary,
       event.eventName,
       event.jobName,
+      event.messageId,
+      event.messageKind,
+      event.messageName,
       event.providerName,
       event.action,
       jsonSearch(event.details)
@@ -428,6 +486,164 @@ button.danger:hover{border-color:rgba(225,29,72,.24);background:#fff1f2}
     });
   }
 
+  function eventTimeValue(event){
+    const time=Date.parse(event.timestamp||"");
+    return Number.isFinite(time)?time:0;
+  }
+
+  function responseOwnerFor(event){
+    const details=detailsObject(event);
+    const response=details.response&&typeof details.response==="object"?details.response:{};
+    return event.responseOwner||event.owner||response.owner||"unknown";
+  }
+
+  function ownerClass(owner){
+    return "owner-"+String(owner||"unknown").replace(/[^a-zA-Z0-9_-]/g,"");
+  }
+
+  function ownerPill(owner){
+    const value=owner||"unknown";
+    return '<span class="owner-pill '+esc(ownerClass(value))+'">'+esc(value)+'</span>';
+  }
+
+  function categoryFor(event){
+    const watcher=inferredWatcher(event);
+    if(event.type==="request")return"HTTP";
+    if(event.type==="usecase")return"Use case";
+    if(event.type==="error")return"Error";
+    if(event.type==="provider")return"Provider";
+    if(event.type==="eventBus")return"Domain event";
+    if(event.type==="outbox")return"Outbox";
+    if(event.type==="job")return"Job";
+    if(event.type==="schedule")return"Schedule";
+    if(["db","cache","storage","uploads","mail","notifications","auth","audit","rateLimit"].indexOf(watcher)>=0)return"Provider work";
+    return watcher==="custom"?"Custom":"Provider work";
+  }
+
+  function ownerForEvent(event){
+    if(event.owner)return event.owner;
+    const watcher=inferredWatcher(event);
+    if(event.type==="error")return responseOwnerFor(event);
+    if(event.type==="provider")return"provider";
+    if(event.type==="job")return"job";
+    if(event.type==="schedule")return"schedule";
+    if(event.type==="outbox")return"outbox";
+    if(["db","cache","storage","uploads","mail","notifications","auth","audit","rateLimit"].indexOf(watcher)>=0)return"provider";
+    if(event.type==="request")return responseOwnerFor(event);
+    return"route";
+  }
+
+  function relatedEventsFor(event){
+    return events.filter(function(candidate){
+      if(candidate.id===event.id)return false;
+      if(event.traceId&&candidate.traceId===event.traceId)return true;
+      return Boolean(event.requestId)&&candidate.requestId===event.requestId;
+    });
+  }
+
+  function requestForEvent(event){
+    return relatedEventsFor(event).filter(function(candidate){return candidate.type==="request"}).sort(function(a,b){return eventTimeValue(b)-eventTimeValue(a)})[0];
+  }
+
+  function statusForEvent(event){
+    if(event.status!==undefined)return event.status;
+    const request=requestForEvent(event);
+    if(request&&request.status!==undefined)return request.status;
+    const details=detailsObject(event);
+    const response=details.response&&typeof details.response==="object"?details.response:{};
+    return response.status||"";
+  }
+
+  function contractForEvent(event){
+    const request=requestForEvent(event);
+    return event.contractName||event.useCaseName||(request&&request.contractName)||"";
+  }
+
+  function pathForEvent(event){
+    const request=requestForEvent(event);
+    return event.path||(request&&request.path)||"";
+  }
+
+  function correlationFor(event){
+    const rid=event.requestId?'<span class="request-id">'+esc(event.requestId)+'</span>':"";
+    const trace=event.traceId?'<span class="trace-id">trace '+esc(event.traceId.slice(0,8))+'</span>':"";
+    return rid+trace||'<span class="table-empty">n/a</span>';
+  }
+
+  function unsafeMetadataPaths(value,path){
+    if(!value||typeof value!=="object")return[];
+    return Object.entries(value).flatMap(function(entry){
+      const key=entry[0];
+      const nested=entry[1];
+      const next=path.concat(key);
+      const lower=key.toLowerCase();
+      const sensitive=lower==="authorization"||lower==="cookie"||lower==="set-cookie"||lower.indexOf("token")>=0||lower.indexOf("password")>=0||lower.indexOf("secret")>=0||lower.indexOf("credential")>=0;
+      if(sensitive&&nested!=="[redacted]")return[next.join(".")];
+      return unsafeMetadataPaths(nested,next);
+    });
+  }
+
+  function requestFact(label,value){
+    const display=value===undefined||value===null||value===""?"n/a":value;
+    return '<div class="request-fact"><div class="request-fact-label">'+esc(label)+'</div><div class="request-fact-value" title="'+esc(display)+'">'+esc(display)+'</div></div>';
+  }
+
+  function detailGrid(items){
+    return '<div class="detail-grid">'+items.map(function(item){return requestFact(item[0],item[1])}).join("")+'</div>';
+  }
+
+  function requestOverview(request,related){
+    return '<div class="request-map">'+
+      requestFact("Route",request.contractName||"unmatched")+
+      requestFact("Method",request.method||"")+
+      requestFact("Path",request.path||"")+
+      requestFact("Status",request.status||"")+
+      requestFact("Duration",request.durationMs!==undefined?request.durationMs+"ms":"")+
+      requestFact("Owner",responseOwnerFor(request))+
+      requestFact("Trace",request.traceId||"")+
+      requestFact("Related",related.length)+
+    '</div>';
+  }
+
+  function requestLifecycleRows(request,related){
+    const rows=[request].concat(related).sort(function(a,b){return eventTimeValue(a)-eventTimeValue(b)});
+    return rows.map(function(event){
+      const duration=durationFor(event);
+      const durationLabel=duration===undefined?"":duration+"ms";
+      return '<div class="phase-row">'+
+        '<div>'+eventBadge(event)+'</div>'+
+        '<div><strong class="phase-name">'+esc(categoryFor(event))+'</strong><div class="phase-meta">'+esc(durationLabel||inferredWatcher(event))+'</div></div>'+
+        '<div class="phase-summary" title="'+esc(summarize(event))+'">'+esc(summarize(event))+'</div>'+
+        '<div>'+ownerPill(ownerForEvent(event))+'</div>'+
+      '</div>';
+    }).join("");
+  }
+
+  function groupedRelatedRows(related){
+    const groups=["Use case","Provider work","Domain event","Outbox","Job","Schedule","Error","Provider","Custom"];
+    return groups.map(function(group){
+      const groupEvents=related.filter(function(event){return categoryFor(event)===group});
+      if(!groupEvents.length)return"";
+      const rows=groupEvents.slice().sort(function(a,b){return eventTimeValue(a)-eventTimeValue(b)}).map(function(event){
+        return '<div class="correlated-row">'+eventBadge(event)+'<span>'+esc(summarize(event))+'</span>'+ownerPill(ownerForEvent(event))+'</div>';
+      }).join("");
+      return '<section class="detail-section"><div class="detail-title">'+esc(group)+'</div><div class="correlated">'+rows+'</div></section>';
+    }).join("");
+  }
+
+  function redactionNote(request,related){
+    const all=[request].concat(related);
+    const redacted=all.some(function(event){return hasRedactedValue(event)});
+    const unsafe=Array.from(new Set(all.flatMap(function(event){return unsafeMetadataPaths(event,[])}))).slice(0,4);
+    if(unsafe.length){
+      return '<div class="redaction-note">Unsafe-looking metadata keys remain visible: '+esc(unsafe.join(", "))+'</div>';
+    }
+    if(redacted){
+      return '<div class="redaction-note">Sensitive metadata was redacted before storage.</div>';
+    }
+    return '<div class="redaction-note">No redacted fields detected in the stored events for this request.</div>';
+  }
+
   function updateStats(){
     $statTotal.textContent=String(events.length);
     $statRequests.textContent=String(events.filter(function(event){return event.type==="request"}).length);
@@ -500,178 +716,49 @@ button.danger:hover{border-color:rgba(225,29,72,.24);background:#fff1f2}
   function renderRequests(list){
     return list.slice().reverse().map(function(request){
       const related=correlatedEvents(request);
-      const relatedHtml=related.length
-        ? related.slice().reverse().map(function(event){
-            return '<div class="correlated-row">'+eventBadge(event)+'<span>'+esc(summarize(event))+'</span></div>';
-          }).join("")
-        : '<div class="empty">No correlated events for this request.</div>';
       const detail='<div class="request-detail">'+
-        '<section class="detail-section"><div class="detail-title">Request</div><pre>'+json(request)+'</pre></section>'+
-        '<section class="detail-section"><div class="detail-title">Correlated events</div><div class="correlated">'+relatedHtml+'</div></section>'+
+        '<section class="detail-section"><div class="detail-title">Request lifecycle</div>'+requestOverview(request,related)+'<div class="lifecycle">'+requestLifecycleRows(request,related)+'</div>'+redactionNote(request,related)+'</section>'+
+        '<section class="detail-section"><div class="detail-title">Correlated activity</div>'+(related.length?groupedRelatedRows(related):'<div class="empty">No correlated events for this request.</div>')+'<pre>'+json(request)+'</pre></section>'+
       '</div>';
       return eventRow(request,detail);
     }).join("");
   }
 
-  function detailsObject(event){
-    return event.details&&typeof event.details==="object"&&!Array.isArray(event.details)?event.details:{};
-  }
-
-  function detailValue(event,key){
-    return detailsObject(event)[key];
-  }
-
-  function durationFor(event){
-    const detailDuration=detailValue(event,"durationMs");
-    const duration=event.durationMs!==undefined?event.durationMs:detailDuration;
-    return typeof duration==="number"&&Number.isFinite(duration)?duration:undefined;
-  }
-
-  function providerFor(event){
-    const details=detailsObject(event);
-    return details.providerName||details.provider||details.portName||"";
-  }
-
-  function failureFor(event){
-    const details=detailsObject(event);
-    if(event.type==="error")return true;
-    if(typeof event.status==="string")return event.status==="failed";
-    if(typeof event.name==="string"&&event.name.indexOf("failed")>=0)return true;
-    return Boolean(details.error)||details.allowed===false;
-  }
-
-  function averageDuration(list){
-    const durations=list.map(durationFor).filter(function(value){return value!==undefined});
-    if(!durations.length)return "n/a";
-    const total=durations.reduce(function(sum,value){return sum+value},0);
-    return Math.round(total/durations.length)+"ms";
-  }
-
-  function distinctCount(list,selector){
-    const values=new Set();
-    list.forEach(function(event){
-      const value=selector(event);
-      if(value!==undefined&&value!==null&&String(value)!=="")values.add(String(value));
-    });
-    return values.size;
-  }
-
   function metric(label,value){
     return '<div class="focus-metric"><div class="focus-metric-label">'+esc(label)+'</div><div class="focus-metric-value">'+esc(value)+'</div></div>';
   }
 
-  function panelMeta(tab){
-    switch(tab.id){
-      case "events": return {title:"Domain events",subtitle:"Published facts and event bus activity"};
-      case "jobs": return {title:"Jobs",subtitle:"Background job lifecycle"};
-      case "schedules": return {title:"Schedules",subtitle:"Cron and scheduled task runs"};
-      case "db": return {title:"Database",subtitle:"Queries and database provider diagnostics"};
-      case "cache": return {title:"Cache",subtitle:"Reads, writes, deletes, and hit rates"};
-      case "storage": return {title:"Storage",subtitle:"Object storage operations"};
-      case "mail": return {title:"Mail",subtitle:"Delivery attempts and provider results"};
-      case "notifications": return {title:"Notifications",subtitle:"Notification intent and channel delivery"};
-      case "auth": return {title:"Auth",subtitle:"Session and authentication activity"};
-      case "audit": return {title:"Audit",subtitle:"Durable activity records emitted by application code"};
-      case "rateLimit": return {title:"Rate limits",subtitle:"Allowed, blocked, and failed checks"};
-      default: return {title:tab.label,subtitle:"Subsystem activity"};
-    }
-  }
+  ${devtoolsPanelModelBrowserSource()}
 
+  function summarize(e){return summarizeDevtoolsEvent(e);}
+  function inferredWatcher(event){return inferDevtoolsWatcher(event);}
+  function eventBadgeLabel(event){return devtoolsEventBadgeLabel(event);}
+  function eventBadgeClass(event){return devtoolsEventBadgeClass(event);}
+  function durationFor(event){return devtoolsEventDuration(event);}
+  function providerFor(event){return devtoolsEventProvider(event);}
+  function failureFor(event){return devtoolsEventFailure(event);}
+  function hasRedactedValue(value){return hasDevtoolsRedactedValue(value);}
+  function panelMeta(tab){return devtoolsPanelMeta(tab.id,tab.label);}
   function panelMetrics(tab,list){
-    switch(tab.id){
-      case "events":
-        return [
-          metric("Events",list.length),
-          metric("Names",distinctCount(list,function(event){return event.eventName})),
-          metric("Traces",distinctCount(list,function(event){return event.traceId})),
-          metric("Requests",distinctCount(list,function(event){return event.requestId}))
-        ].join("");
-      case "jobs":
-        return [
-          metric("Jobs",list.length),
-          metric("Failed",list.filter(failureFor).length),
-          metric("Names",distinctCount(list,function(event){return event.jobName})),
-          metric("Providers",distinctCount(list,providerFor))
-        ].join("");
-      case "schedules":
-        return [
-          metric("Runs",list.length),
-          metric("Failed",list.filter(failureFor).length),
-          metric("Names",distinctCount(list,function(event){return event.scheduleName})),
-          metric("Cron",distinctCount(list,function(event){return event.cron}))
-        ].join("");
-      case "cache":
-        return [
-          metric("Operations",list.length),
-          metric("Hits",list.filter(function(event){return detailValue(event,"hit")===true}).length),
-          metric("Failures",list.filter(failureFor).length),
-          metric("Avg",averageDuration(list))
-        ].join("");
-      case "auth":
-        return [
-          metric("Events",list.length),
-          metric("Authenticated",list.filter(function(event){return detailValue(event,"authenticated")===true}).length),
-          metric("Failures",list.filter(failureFor).length),
-          metric("Avg",averageDuration(list))
-        ].join("");
-      case "audit":
-        return [
-          metric("Entries",list.length),
-          metric("Failures",list.filter(function(event){return detailValue(event,"outcome")==="failure"}).length),
-          metric("Actors",distinctCount(list,function(event){const actor=detailValue(event,"actor");return actor&&actor.id})),
-          metric("Resources",distinctCount(list,function(event){const resource=detailValue(event,"resource");return resource&&resource.id}))
-        ].join("");
-      case "rateLimit":
-        return [
-          metric("Checks",list.length),
-          metric("Allowed",list.filter(function(event){return detailValue(event,"allowed")===true}).length),
-          metric("Blocked",list.filter(function(event){return detailValue(event,"allowed")===false}).length),
-          metric("Avg",averageDuration(list))
-        ].join("");
-      default:
-        return [
-          metric("Events",list.length),
-          metric("Failures",list.filter(failureFor).length),
-          metric("Providers",distinctCount(list,providerFor)),
-          metric("Avg",averageDuration(list))
-        ].join("");
-    }
+    return devtoolsPanelMetrics(tab.id,list).map(function(item){
+      return metric(item.label,item.value);
+    }).join("");
   }
-
-  function primaryFor(event){
-    switch(event.type){
-      case "eventBus": return event.eventName||"Domain event";
-      case "job": return event.jobName||"Job";
-      case "schedule": return event.scheduleName||"Schedule";
-      case "custom": return event.label||event.name||"Custom event";
-      default: return summarize(event);
-    }
+  function primaryFor(event){return devtoolsPanelPrimary(tabFor(activeTab).id,event);}
+  function secondaryFor(event){return devtoolsPanelSecondary(tabFor(activeTab).id,event);}
+  function resultFor(event){return devtoolsPanelResult(event);}
+  function tableDetailFor(tab,event){
+    const detail=devtoolsPanelDetail(tab.id,event);
+    return detailGrid(detail.fields.map(function(item){return [item.label,item.value]}))+
+      '<div class="table-detail-note">'+esc(detail.note)+'</div><pre>'+json(event)+'</pre>';
   }
 
-  function secondaryFor(event){
-    const details=detailsObject(event);
-    if(details.operation)return details.operation;
-    if(event.type==="job")return event.status;
-    if(event.type==="schedule")return event.status;
-    if(event.type==="eventBus")return event.requestId||event.traceId||"";
-    if(event.name)return event.name;
-    return inferredWatcher(event);
+  function resultChip(value){
+    const normalized=String(value||"").replace(/[^a-zA-Z0-9_-]/g,"_");
+    return '<span class="result-chip result-'+esc(normalized)+'">'+esc(value||"n/a")+'</span>';
   }
 
-  function resultFor(event){
-    const details=detailsObject(event);
-    if(details.allowed===true)return "allowed";
-    if(details.allowed===false)return "blocked";
-    if(details.hit===true)return "hit";
-    if(details.hit===false)return "miss";
-    if(details.authenticated===true)return "signed in";
-    if(details.authenticated===false)return "guest";
-    if(event.status)return event.status;
-    if(details.error)return "failed";
-    return providerFor(event)||inferredWatcher(event);
-  }
-
-  function tableRow(event){
+  function tableRow(tab,event){
     const time=event.timestamp?new Date(event.timestamp).toLocaleTimeString():"";
     const duration=durationFor(event);
     const durationLabel=duration===undefined?"":duration+"ms";
@@ -680,15 +767,16 @@ button.danger:hover{border-color:rgba(225,29,72,.24);background:#fff1f2}
       '<div class="table-cell">'+esc(time)+'</div>'+
       '<div class="table-cell"><strong>'+esc(primaryFor(event))+'</strong><code>'+esc(secondaryFor(event))+'</code></div>'+
       '<div class="table-cell table-summary">'+esc(summarize(event))+'</div>'+
+      '<div class="table-cell table-correlation">'+correlationFor(event)+'</div>'+
       '<div class="table-cell">'+esc(durationLabel)+'</div>'+
-      '<div class="table-cell">'+esc(resultFor(event)||provider)+'</div>'+
-      '<pre class="table-detail">'+json(event)+'</pre>'+
+      '<div class="table-cell">'+resultChip(resultFor(event)||provider)+'</div>'+
+      '<div class="table-detail">'+tableDetailFor(tab,event)+'</div>'+
     '</article>';
   }
 
   function renderFocusPanel(tab,list){
     const meta=panelMeta(tab);
-    const rows=list.slice().reverse().map(tableRow).join("");
+    const rows=list.slice().reverse().map(function(event){return tableRow(tab,event)}).join("");
     return '<section class="focus-panel">'+
       '<div class="focus-head">'+
         '<div><h2 class="focus-title">'+esc(meta.title)+'</h2><div class="focus-subtitle">'+esc(meta.subtitle)+'</div></div>'+
@@ -698,6 +786,65 @@ button.danger:hover{border-color:rgba(225,29,72,.24);background:#fff1f2}
     '</section>';
   }
 
+  function renderErrorOwners(list){
+    const owners=ERROR_OWNERS.map(function(owner){
+      return {owner:owner,count:list.filter(function(event){return ownerForEvent(event)===owner}).length};
+    }).filter(function(item){return item.count>0});
+    const cards=(owners.length?owners:[{owner:"none",count:0}]).map(function(item){
+      return '<div class="error-owner-card"><strong>'+esc(item.count)+'</strong><span>'+esc(item.owner)+'</span></div>';
+    }).join("");
+    return '<div class="error-owner-strip">'+cards+'</div>';
+  }
+
+  function renderErrorRelated(event){
+    const related=relatedEventsFor(event).filter(function(candidate){return candidate.type!=="error"}).slice().sort(function(a,b){return eventTimeValue(a)-eventTimeValue(b)}).slice(0,8);
+    if(!related.length)return '<div class="empty">No related request, provider, or side-effect events.</div>';
+    return '<div class="error-related">'+related.map(function(candidate){
+      return '<div class="correlated-row">'+eventBadge(candidate)+'<span>'+esc(summarize(candidate))+'</span>'+ownerPill(ownerForEvent(candidate))+'</div>';
+    }).join("")+'</div>';
+  }
+
+  function failureMessageFor(event){
+    if(event.message)return event.message;
+    const details=detailsObject(event);
+    const detailError=details.error;
+    if(typeof detailError==="string"&&detailError)return detailError;
+    if(detailError&&typeof detailError==="object"){
+      if(typeof detailError.message==="string")return detailError.message;
+      return jsonSearch(detailError);
+    }
+    return summarize(event)||"Unknown failure";
+  }
+
+  function renderErrorRow(event){
+    const time=event.timestamp?new Date(event.timestamp).toLocaleTimeString():"";
+    const status=statusForEvent(event);
+    const route=[contractForEvent(event),pathForEvent(event)].filter(Boolean).join(" ");
+    const relatedCount=relatedEventsFor(event).length;
+    const message=failureMessageFor(event);
+    return '<article class="error-row" onclick="this.classList.toggle(\\'open\\')">'+
+      '<div class="table-cell">'+esc(time)+'</div>'+
+      '<div><div class="error-message" title="'+esc(message)+'">'+esc(message)+'</div><div class="error-context">'+esc(route||event.useCaseName||primaryFor(event)||"unmatched")+'</div></div>'+
+      '<div>'+ownerPill(ownerForEvent(event))+'</div>'+
+      '<div class="table-cell table-correlation">'+correlationFor(event)+'</div>'+
+      '<div class="table-cell">'+resultChip(status||relatedCount+" related")+'</div>'+
+      '<div class="table-detail">'+renderErrorRelated(event)+'<pre>'+json(event)+'</pre></div>'+
+    '</article>';
+  }
+
+  function renderErrorsPanel(list){
+    const rowsByOwner=ERROR_OWNERS.map(function(owner){
+      const ownerEvents=list.filter(function(event){return ownerForEvent(event)===owner});
+      if(!ownerEvents.length)return"";
+      const rows=ownerEvents.slice().reverse().map(renderErrorRow).join("");
+      return '<section class="error-group">'+
+        '<div class="error-group-head"><div class="error-group-title">'+ownerPill(owner)+'<span>'+esc(owner)+' failures</span></div><div class="error-group-count">'+esc(ownerEvents.length)+' errors</div></div>'+
+        rows+
+      '</section>';
+    }).join("");
+    return '<section class="error-board">'+renderErrorOwners(list)+rowsByOwner+'</section>';
+  }
+
   function render(){
     updateStats();
     renderTabs();
@@ -714,6 +861,10 @@ button.danger:hover{border-color:rgba(225,29,72,.24);background:#fff1f2}
       $content.innerHTML=renderRequests(list);
       return;
     }
+    if(activeTab==="errors"){
+      $content.innerHTML=renderErrorsPanel(list);
+      return;
+    }
     if(FOCUS_PANEL_TABS[tab.id]){
       $content.innerHTML=renderFocusPanel(tab,list);
       return;