@testrelic/maestro-analytics 1.3.1 → 1.4.0-next.121

package/dist/cli.cjs

@@ -778,6 +778,9 @@ var import_node_fs18 = require("fs");
 var import_node_path16 = require("path");
 var import_node_crypto4 = require("crypto");
 
+// src/schema.ts
+var SCHEMA_VERSION = "1.1.0";
+
 // src/parsers/junit-parser.ts
 var import_fast_xml_parser = require("fast-xml-parser");
 var import_node_fs5 = require("fs");
@@ -1877,6 +1880,30 @@ function collectArtifacts(testOutputDir, debugOutputDir) {
 }
 
 // src/timeline-builder.ts
+function mapStepKind(category) {
+  switch (category) {
+    case "interaction":
+      return "interaction";
+    case "assertion":
+      return "assertion";
+    case "ai":
+      return "ai";
+    case "navigation":
+      return "navigation";
+    case "device":
+      return "device";
+    case "media":
+      return "media";
+    case "script":
+      return "script";
+    case "flow_control":
+      return "flow_control";
+    case "recording":
+      return "media";
+    default:
+      return "other";
+  }
+}
 function mapCommandCategory(category) {
   switch (category) {
     case "interaction":
@@ -1965,6 +1992,8 @@ function commandToAction(cmd, flowStartedMs) {
   return {
     title: buildStepTitle(cmd),
     category: mapCommandCategory(cmd.category),
+    kind: mapStepKind(cmd.category),
+    selector: cmd.selector ?? null,
     status: cmd.status === "failed" ? "failed" : "passed",
     duration: cmd.duration,
     timestamp: cmd.timestamp,
@@ -1979,6 +2008,40 @@ function sortActions(a, b) {
   if (Number.isFinite(ta) && Number.isFinite(tb) && ta !== tb) return ta - tb;
   return 0;
 }
+function flowDevice(flow) {
+  return {
+    platform: flow.platform,
+    // Maestro never reports an OS version or a UDID distinct from the device
+    // id; saying so with null beats inventing a value.
+    platformVersion: null,
+    deviceName: flow.deviceId ?? null,
+    automationName: "maestro",
+    appId: flow.appId,
+    appTestMode: flow.platform === "web" ? "mobile-web" : "native",
+    udid: flow.deviceId ?? null
+  };
+}
+function flowLogs(flow) {
+  return flow.logEntries.map((e) => ({
+    level: e.level === "ERROR" ? "error" : e.level === "WARN" ? "warn" : e.level === "DEBUG" ? "debug" : "info",
+    text: e.message,
+    timestamp: e.timestamp,
+    location: null,
+    source: "driver",
+    tag: e.source ?? null,
+    pid: null,
+    stackTrace: null
+  }));
+}
+function flowDefects(flow) {
+  return flow.aiDefects.map((d) => ({
+    type: d.type,
+    severity: d.severity,
+    description: d.description,
+    location: d.location,
+    screenshot: d.screenshot
+  }));
+}
 function buildTestResult(flow, apiCalls) {
   const flowStartedMs = Date.parse(flow.startedAt);
   const orderedCommands = [...flow.commands].sort((a, b) => {
@@ -2004,12 +2067,12 @@ function buildTestResult(flow, apiCalls) {
   actions.sort(sortActions);
   const artifacts = flow.screenshotPaths.length > 0 || flow.videoPath ? {
     screenshot: flow.screenshotPaths[0] ?? void 0,
+    // The flow's whole strip, not just its first frame. The Screenshots
+    // tab used to ignore the flow entirely and render the run's shots.
+    ...flow.screenshotPaths.length > 0 ? { screenshots: [...flow.screenshotPaths] } : {},
     video: flow.videoPath ?? void 0
   } : null;
   const tags = [...flow.tags];
-  if (flow.platform !== "unknown" && !tags.includes(flow.platform)) {
-    tags.push(flow.platform);
-  }
   return {
     title: flow.flowName,
     status: flow.status,
@@ -2032,7 +2095,11 @@ function buildTestResult(flow, apiCalls) {
     apiCalls: apiCalls.length > 0 ? [...apiCalls] : null,
     apiAssertions: null,
     actions: actions.length > 0 ? actions : null,
-    consoleLogs: null
+    // The driver log reached the cloud payload and nothing else; the local
+    // report showed no log lines at all.
+    consoleLogs: flow.logEntries.length > 0 ? flowLogs(flow) : null,
+    device: flowDevice(flow),
+    aiDefects: flow.aiDefects.length > 0 ? flowDefects(flow) : null
   };
 }
 function buildTimelineEntry(flow, apiCallsByFlow) {
@@ -2598,13 +2665,11 @@ var currentFilter='all';
 var searchQuery='';
 var openFlowIdx=-1;
 
+/* The platform is a device fact now, not a tag the builder appended. */
 function detectPlatform(){
   for(var i=0;i<flows.length;i++){
-    var tags=flows[i].test.tags||[];
-    for(var j=0;j<tags.length;j++){
-      var t=tags[j].toLowerCase();
-      if(t==='android'||t==='ios'||t==='web')return t;
-    }
+    var d=flows[i].test.device;
+    if(d&&d.platform&&d.platform!=='unknown')return d.platform;
   }
   return '';
 }
@@ -2880,18 +2945,28 @@ function closeDrawer(){
 }
 
 function renderDrawerContent(flow){
-  var tabs=['Overview','Steps','Assertions','Screenshots','AI Defects'];
+  var t=flow.test;
+  /* Every tab is now about THIS flow. Screenshots and AI Defects used to take
+     no flow argument at all and showed the whole run on every flow. */
+  var tabs=[
+    {name:'Overview',html:function(){return renderOverviewTab(flow);}},
+    {name:'Steps',html:function(){return renderStepsTab(flow);}},
+    {name:'Replay',html:function(){return renderReplay(t);}},
+    {name:'Assertions',html:function(){return renderAssertionsTab(flow);}},
+    {name:'Driver log',n:(t.consoleLogs||[]).length,html:function(){return renderDriverLogTab(t);}},
+    {name:'Screenshots',n:testScreenshots(t).length,html:function(){return renderShotStrip(t);}},
+    {name:'AI Defects',n:(t.aiDefects||[]).length,html:function(){return renderFlowAiDefects(t);}}
+  ];
+
   var h='<div class="seg-ctrl">';
-  tabs.forEach(function(name,i){
-    h+='<button class="seg-btn'+(i===0?' active':'')+'" data-seg="tab'+i+'">'+name+'</button>';
+  tabs.forEach(function(tab,i){
+    var label=tab.name+(tab.n?' ('+tab.n+')':'');
+    h+='<button class="seg-btn'+(i===0?' active':'')+'" data-seg="tab'+i+'">'+label+'</button>';
   });
   h+='</div>';
-
-  h+='<div class="seg-pane active" data-seg-pane="tab0">'+renderOverviewTab(flow)+'</div>';
-  h+='<div class="seg-pane" data-seg-pane="tab1">'+renderStepsTab(flow)+'</div>';
-  h+='<div class="seg-pane" data-seg-pane="tab2">'+renderAssertionsTab(flow)+'</div>';
-  h+='<div class="seg-pane" data-seg-pane="tab3">'+renderScreenshotsTab()+'</div>';
-  h+='<div class="seg-pane" data-seg-pane="tab4">'+renderAiDefectsTab()+'</div>';
+  tabs.forEach(function(tab,i){
+    h+='<div class="seg-pane'+(i===0?' active':'')+'" data-seg-pane="tab'+i+'">'+tab.html()+'</div>';
+  });
 
   $('drawer-body').innerHTML=h;
 }
@@ -3044,7 +3119,7 @@ function renderStepsTab(flow){
     var dotCls='cmd-dot '+(isFailed?'cmd-dot-fail':'cmd-dot-pass');
     h+='<div class="'+rowCls+'">';
     h+='<div class="'+dotCls+'"></div>';
-    h+=getCmdBadge(a.category);
+    h+=a.kind?'<span class="cmd-kind k-'+esc(a.kind)+'">'+esc(a.kind)+'</span>':getCmdBadge(a.category);
     h+='<div class="cmd-title" title="'+esc(a.title)+'">'+esc(a.title)+'</div>';
     if(isSlow||isFailed&&a.duration>2000)h+='<span class="cmd-badge cmd-badge-slow">SLOW</span>';
     h+='<div class="cmd-dur">'+fmtDur(a.duration)+'</div>';
@@ -3212,7 +3287,10 @@ function renderScreenshotsTab(){
     var name=p.split(/[\\/\\\\]/).pop()||'screenshot';
     var isFail=name.toLowerCase().indexOf('fail')>=0||name.toLowerCase().indexOf('error')>=0;
     h+='<div class="screenshot-card'+(isFail?' failure-shot':'')+'" data-lb-idx="'+i+'">'
-      +'<img src="'+esc(p)+'" alt="'+esc(name)+'" loading="lazy" onerror="this.parentElement.style.display=\\'none\\'"/>'
+      /* No lazy loading: this grid lives in a seg-pane that starts hidden, and
+         Chrome never fetches a lazy image inside display:none \u2014 the cards came
+         up blank until something else forced a reflow. */
+      +'<img src="'+esc(p)+'" alt="'+esc(name)+'" onerror="this.parentElement.style.display=\\'none\\'"/>'
       +'<div class="screenshot-card-label">'+(isFail?'Failure Screenshot':esc(name))+'</div></div>';
   });
   h+='</div>';
@@ -3359,6 +3437,578 @@ document.addEventListener('keydown',function(e){
 });
 `;
 
+// src/html-js-mobile.ts
+var JS_MOBILE = `
+  function vNum(v){return typeof v==='number'?v:0;}
+
+  /* Every flow's TestResult, in the order the list shows them. */
+  function flowTests(){
+    var out=[];
+    for(var i=0;i<flows.length;i++)out.push(flows[i].test);
+    return out;
+  }
+
+  /* \u2500\u2500 Device identity \u2500\u2500 */
+
+  var DEVICE_GLYPH={
+    android:'<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><rect x="5" y="2" width="14" height="20" rx="2.5"/><path d="M10 18.5h4"/></svg>',
+    ios:'<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><rect x="6" y="2" width="12" height="20" rx="3"/><path d="M10 19h4"/></svg>',
+    web:'<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a15 15 0 010 18a15 15 0 010-18"/></svg>'
+  };
+
+  function deviceGlyph(p){
+    return DEVICE_GLYPH[p]||'<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><rect x="5" y="2" width="14" height="20" rx="2.5"/></svg>';
+  }
+
+  function deviceHeadline(d){
+    if(!d)return '';
+    var os=d.platform==='ios'?'iOS':d.platform==='android'?'Android':d.platform==='web'?'Web':'Device';
+    return d.platformVersion?os+' '+d.platformVersion:os;
+  }
+
+  function shortAppId(v){
+    var s=String(v);
+    if(s.indexOf('/')<0&&s.indexOf('\\\\')<0)return s;
+    var parts=s.split(/[\\/\\\\]/);
+    return parts[parts.length-1]||s;
+  }
+
+  function renderDeviceStrip(){
+    var el=$('device-strip');
+    if(!el)return;
+    var ts=flowTests(),d=null,seen={},count=0;
+    for(var i=0;i<ts.length;i++){
+      var dv=ts[i].device;
+      if(!dv||dv.platform==='unknown')continue;
+      if(!d)d=dv;
+      var key=(dv.platform||'')+'|'+(dv.deviceName||'');
+      if(!seen[key]){seen[key]=1;count++;}
+    }
+    if(!d){el.innerHTML='';return;}
+
+    var h='<div class="devstrip"><div class="dev-id">';
+    h+='<span class="dev-icon dev-icon-'+esc(d.platform||'unknown')+'">'+deviceGlyph(d.platform)+'</span>';
+    h+='<span><span class="dev-name">'+esc(deviceHeadline(d))+'</span><br>';
+    h+='<span class="dev-sub">'+esc(d.deviceName||'device not named')+'</span></span>';
+    h+='</div><span class="dev-rule"></span><div class="dev-facts">';
+    var facts=[{k:'Driver',v:d.automationName},{k:'App',v:d.appId},{k:'Mode',v:d.appTestMode}];
+    for(var f=0;f<facts.length;f++){
+      if(!facts[f].v)continue;
+      h+='<span class="dev-fact"><span class="dev-fact-k">'+esc(facts[f].k)+'</span>';
+      h+='<span class="dev-fact-v">'+esc(shortAppId(facts[f].v))+'</span></span>';
+    }
+    h+='</div>';
+    if(count>1)h+='<span class="dev-more">'+count+' devices in this run</span>';
+    el.innerHTML=h+'</div>';
+  }
+
+  function deviceBadge(d){
+    if(!d||!d.platform||d.platform==='unknown')return '';
+    var cls=d.platform==='ios'?'trb trb-device-ios':d.platform==='web'?'trb trb-device-web':'trb trb-device';
+    var label=deviceHeadline(d);
+    if(d.deviceName)label+=' \\u00b7 '+d.deviceName;
+    return '<span class="'+cls+'" title="'+esc(label)+'">'+esc(label)+'</span>';
+  }
+
+  /* \u2500\u2500 Mobile cards \u2500\u2500 */
+
+  var KIND_ORDER=['interaction','assertion','gesture','lifecycle','device','keyboard','navigation','find','alert','context','screenshot','media','script','flow_control','ai','other'];
+  var KIND_COLOR={interaction:'#60a5fa',assertion:'#34d399',gesture:'#e879f9',lifecycle:'#fbbf24',device:'#fb923c',keyboard:'#f59e0b',navigation:'#a78bfa',find:'#8b949e',alert:'#ef4444',context:'#484f58',screenshot:'#60a5fa',media:'#60a5fa',script:'#484f58',flow_control:'#484f58',ai:'#2dd4a8',other:'#484f58'};
+
+  function countKinds(steps,into){
+    for(var i=0;i<steps.length;i++){
+      var k=steps[i].kind||'other';
+      into[k]=(into[k]||0)+1;
+      if(steps[i].children&&steps[i].children.length)countKinds(steps[i].children,into);
+    }
+  }
+
+  function renderStepKindCard(){
+    var ts=flowTests(),counts={},total=0,k;
+    for(var i=0;i<ts.length;i++)countKinds(ts[i].actions||[],counts);
+    for(k in counts){if(counts.hasOwnProperty(k))total+=counts[k];}
+    if(total===0)return '';
+    var present=[];
+    for(var o=0;o<KIND_ORDER.length;o++){
+      if(counts[KIND_ORDER[o]])present.push({k:KIND_ORDER[o],n:counts[KIND_ORDER[o]]});
+    }
+    present.sort(function(a,b){return b.n-a.n;});
+    var max=present[0].n||1;
+    var h='<div class="tcard"><div class="tcard-h">By step category<span class="tcard-sub">'+total+' steps</span></div>';
+    for(var p=0;p<Math.min(present.length,7);p++){
+      var c=KIND_COLOR[present[p].k]||'#8b949e';
+      var pct=Math.max(2,Math.round((present[p].n/max)*100));
+      h+='<div class="krow"><span class="krow-k" style="color:'+c+'">'+esc(present[p].k)+'</span>';
+      h+='<span class="krow-track"><span class="krow-fill" style="width:'+pct+'%;background:'+c+'"></span></span>';
+      h+='<span class="krow-n">'+present[p].n+'</span></div>';
+    }
+    return h+'</div>';
+  }
+
+  function renderDriverLogCard(){
+    var ts=flowTests(),total=0,errors=0,warns=0,sample=null;
+    for(var i=0;i<ts.length;i++){
+      var logs=ts[i].consoleLogs||[];
+      total+=logs.length;
+      for(var j=0;j<logs.length;j++){
+        if(logs[j].level==='error'){errors++;if(!sample)sample=logs[j];}
+        else if(logs[j].level==='warn')warns++;
+      }
+    }
+    if(total===0)return '';
+    var other=Math.max(0,total-errors-warns);
+    var h='<div class="tcard"><div class="tcard-h">Driver log<span class="tcard-sub">'+total+' lines</span></div>';
+    h+='<div class="verdict-bar">';
+    if(errors)h+='<span style="flex:'+errors+';background:#ef4444;border-radius:999px"></span>';
+    if(warns)h+='<span style="flex:'+warns+';background:#f59e0b;border-radius:999px"></span>';
+    if(other)h+='<span style="flex:'+other+';background:rgba(255,255,255,.08);border-radius:999px"></span>';
+    h+='</div><div class="lgrid">';
+    h+='<div class="lrow"><span class="lrow-src" style="background:rgba(239,68,68,.12);color:#ef4444">error</span><span class="lrow-l">lines</span><span class="lrow-n" style="color:#ef4444">'+errors+'</span></div>';
+    h+='<div class="lrow"><span class="lrow-src" style="background:rgba(245,158,11,.12);color:#f59e0b">warn</span><span class="lrow-l">lines</span><span class="lrow-n" style="color:#f59e0b">'+warns+'</span></div>';
+    h+='</div>';
+    if(sample)h+='<div class="lsample">'+esc(String(sample.text||''))+'</div>';
+    return h+'</div>';
+  }
+
+  function renderAiDefectCard(){
+    var ts=flowTests(),bySev={critical:0,warning:0,info:0},total=0;
+    for(var i=0;i<ts.length;i++){
+      var ds=ts[i].aiDefects||[];
+      for(var j=0;j<ds.length;j++){total++;bySev[ds[j].severity]=(bySev[ds[j].severity]||0)+1;}
+    }
+    if(total===0)return '';
+    var h='<div class="tcard"><div class="tcard-h">AI defects</div>';
+    h+='<div class="tbig"><span class="tbig-n">'+total+'</span><span class="tbig-l">found</span></div><div class="lgrid">';
+    var rows=[{k:'critical',c:'#ef4444'},{k:'warning',c:'#f59e0b'},{k:'info',c:'#60a5fa'}];
+    for(var r=0;r<rows.length;r++){
+      h+='<div class="lrow"><span class="vc-dot" style="background:'+rows[r].c+'"></span>';
+      h+='<span class="lrow-l">'+rows[r].k+'</span><span class="lrow-n">'+(bySev[rows[r].k]||0)+'</span></div>';
+    }
+    return h+'</div></div>';
+  }
+
+  function renderTypeBand(){
+    var el=$('type-band');
+    if(!el)return;
+    var cards=[];
+    var a=renderStepKindCard();if(a)cards.push(a);
+    var b=renderDriverLogCard();if(b)cards.push(b);
+    var c=renderAiDefectCard();if(c)cards.push(c);
+    el.innerHTML=cards.length?'<div class="tband">'+cards.join('')+'</div>':'';
+  }
+
+  /* \u2500\u2500 Needs attention \u2500\u2500 */
+
+  function failingStep(t){
+    var acts=t.actions||[];
+    for(var i=0;i<acts.length;i++)if(acts[i].status==='failed')return acts[i];
+    return null;
+  }
+
+  function correlatedLog(t,atMs){
+    var logs=t.consoleLogs||[],best=null,bestGap=Infinity;
+    for(var i=0;i<logs.length;i++){
+      var e=logs[i];
+      if(e.level!=='error')continue;
+      var ms=Date.parse(e.timestamp);
+      if(!isFinite(ms))continue;
+      var gap=Math.abs(ms-atMs);
+      if(gap<bestGap&&gap<=5000){best=e;bestGap=gap;}
+    }
+    return best;
+  }
+
+  function mobileEvidenceChips(t){
+    var h='',acts=t.actions||[],gestures=0,failedSteps=0,i;
+    for(i=0;i<acts.length;i++){
+      if(acts[i].kind==='gesture')gestures++;
+      if(acts[i].status==='failed')failedSteps++;
+    }
+    if(acts.length>0)h+='<span class="nchip'+(failedSteps>0?' nchip-bad':'')+'">'+acts.length+' step'+(acts.length===1?'':'s')+(failedSteps>0?' \\u00b7 '+failedSteps+' failed':'')+'</span>';
+    if(gestures>0)h+='<span class="nchip nchip-gesture">'+gestures+' gesture'+(gestures===1?'':'s')+'</span>';
+    var errs=0,logs=t.consoleLogs||[];
+    for(i=0;i<logs.length;i++)if(logs[i].level==='error')errs++;
+    if(errs>0)h+='<span class="nchip nchip-bad">'+errs+' log error'+(errs===1?'':'s')+'</span>';
+    var shots=testScreenshots(t).length;
+    if(shots>0)h+='<span class="nchip">'+shots+' screenshot'+(shots===1?'':'s')+'</span>';
+    if(t.artifacts&&t.artifacts.video)h+='<span class="nchip">recording</span>';
+    var defects=(t.aiDefects||[]).length;
+    if(defects>0)h+='<span class="nchip nchip-bad">'+defects+' AI defect'+(defects===1?'':'s')+'</span>';
+    return h;
+  }
+
+  function renderNeedsAttention(){
+    var el=$('needs-attention');
+    if(!el)return;
+    var bad=[],i;
+    for(i=0;i<flows.length;i++){
+      var st=flows[i].test.status;
+      if(st==='failed'||st==='timedout'||st==='flaky')bad.push(flows[i]);
+    }
+    if(bad.length===0){el.innerHTML='';return;}
+
+    var h='<div class="needs"><div class="needs-head"><span class="needs-title">Needs attention</span>';
+    h+='<span class="needs-count">'+bad.length+'</span></div><div class="needs-list">';
+    for(var j=0;j<Math.min(bad.length,8);j++){
+      var t=bad[j].test;
+      h+='<div class="needs-card" data-flow-idx="'+bad[j].idx+'">';
+      h+='<div class="needs-body"><div class="needs-row1"><span class="needs-name">'+esc(t.title)+'</span>';
+      h+='<span class="trb trb-type">mobile</span>'+deviceBadge(t.device);
+      h+='<span class="needs-file">'+esc(t.filePath)+'</span></div>';
+
+      var step=failingStep(t);
+      if(step){
+        h+='<div class="needs-evidence"><div class="needs-step">';
+        h+='<span class="cmd-kind k-'+esc(step.kind||'other')+'">'+esc(step.kind||'step')+'</span>';
+        h+='<span class="needs-step-t">'+esc(step.title||'')+'</span>';
+        h+='<span class="needs-step-d">'+fmtDur(step.duration||0)+'</span></div>';
+        if(step.error)h+='<div class="needs-cause">'+esc(String(step.error))+'</div>';
+        var log=correlatedLog(t,Date.parse(step.timestamp));
+        if(log){
+          var ts='';
+          try{ts=new Date(log.timestamp).toISOString().substr(11,12);}catch(e){ts='';}
+          h+='<div class="needs-log"><span class="needs-log-t">driver log \\u00b7 '+esc(ts)+'</span>&nbsp;&nbsp;'+esc(String(log.text||''))+'</div>';
+        }
+        h+='</div>';
+      }else if(t.failure&&t.failure.message){
+        h+='<div class="needs-cause">'+esc(String(t.failure.message).split('\\n')[0])+'</div>';
+      }
+
+      h+='<div class="needs-chips">'+mobileEvidenceChips(t)+'</div></div>';
+      h+='<div class="needs-right"><div class="needs-dur">'+fmtDur(t.duration)+'</div>';
+      h+='<div class="needs-open">Open<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><path d="M9 18l6-6-6-6"/></svg></div></div></div>';
+    }
+    el.innerHTML=h+'</div></div>';
+  }
+
+  /* \u2500\u2500 Per-flow evidence \u2500\u2500 */
+
+  /* Screenshots belong to the flow that produced them. The Screenshots tab
+     took no flow argument and showed the whole run's shots on every flow. */
+  function testScreenshots(t){
+    var a=t.artifacts;
+    if(a&&a.screenshots&&a.screenshots.length)return a.screenshots;
+    if(a&&a.screenshot)return [a.screenshot];
+    return [];
+  }
+
+  function renderShotStrip(t){
+    var shots=testScreenshots(t);
+    if(shots.length===0)return '<div class="artifact-empty">No screenshots for this flow</div>';
+    var h='<div class="shot-strip">';
+    for(var i=0;i<shots.length;i++){
+      var src=String(shots[i]);
+      var name=src.split(/[\\/\\\\]/).pop()||('shot '+(i+1));
+      var isFail=/fail|error/i.test(name);
+      h+='<div class="shot'+(isFail?' is-failure':'')+'" data-lightbox="'+esc(src)+'">';
+      h+='<img src="'+esc(src)+'" alt="'+esc(name)+'">';
+      h+='<div class="shot-cap" title="'+esc(name)+'">'+esc(name)+'</div></div>';
+    }
+    return h+'</div>';
+  }
+
+  /* Steps against the recording, using the videoOffset the timeline builder
+     has always computed and the local report never read. */
+  function renderReplay(t){
+    var video=t.artifacts&&t.artifacts.video;
+    var acts=t.actions||[];
+    if(!video&&acts.length===0)return '<div class="artifact-empty">No recording for this flow</div>';
+
+    var withOffsets=[],i,maxOff=0;
+    for(i=0;i<acts.length;i++){
+      if(typeof acts[i].videoOffset==='number'){
+        withOffsets.push(acts[i]);
+        if(acts[i].videoOffset>maxOff)maxOff=acts[i].videoOffset;
+      }
+    }
+    var span=maxOff>0?maxOff:(t.duration||0)/1000;
+    if(span<=0)span=1;
+
+    var h='<div class="replay">';
+    if(video)h+='<div class="replay-video"><video id="replay-video" src="'+esc(video)+'" controls preload="metadata"></video></div>';
+    h+='<div class="replay-side">';
+    if(withOffsets.length>0){
+      h+='<div class="scrub">';
+      for(i=0;i<withOffsets.length;i++){
+        var w=withOffsets[i],pct=Math.min(99,Math.max(0,(w.videoOffset/span)*100));
+        var failed=w.status==='failed';
+        var col=failed?'#ef4444':(KIND_COLOR[w.kind||'other']||'#8b949e');
+        h+='<span class="scrub-mark'+(failed?' is-failed':'')+'" style="left:'+pct.toFixed(2)+'%;background:'+col+'" data-seek="'+w.videoOffset.toFixed(2)+'" title="'+esc(w.title||'')+'"></span>';
+      }
+      h+='</div><div class="scrub-legend"><span>0.0s</span><span>'+span.toFixed(1)+'s</span></div>';
+    }
+    h+='<div class="replay-steps">';
+    for(i=0;i<acts.length;i++){
+      var a=acts[i],failed2=a.status==='failed';
+      h+='<div class="rstep'+(failed2?' is-failed':'')+'"'+(typeof a.videoOffset==='number'?' data-seek="'+a.videoOffset.toFixed(2)+'"':'')+'>';
+      h+='<span class="rstep-n">'+(i+1<10?'0':'')+(i+1)+'</span>';
+      h+='<span class="cmd-kind k-'+esc(a.kind||'other')+'">'+esc(a.kind||'step')+'</span>';
+      h+='<span class="rstep-t" title="'+esc(a.title||'')+'">'+esc(a.title||'')+'</span>';
+      if(typeof a.videoOffset==='number')h+='<span class="rstep-off">'+a.videoOffset.toFixed(1)+'s</span>';
+      h+='<span class="rstep-d">'+fmtDur(a.duration||0)+'</span></div>';
+    }
+    return h+'</div></div></div>';
+  }
+
+  /* The driver log, per flow. Maestro's report had no log surface at all. */
+  function renderDriverLogTab(t){
+    var logs=t.consoleLogs||[];
+    if(logs.length===0)return '<div class="artifact-empty">No driver log lines for this flow</div>';
+    var errs=0,warns=0,i;
+    for(i=0;i<logs.length;i++){
+      if(logs[i].level==='error')errs++;else if(logs[i].level==='warn')warns++;
+    }
+    var h='<div class="console-panel"><div class="console-header">';
+    h+='<span class="console-title">Driver log ('+logs.length+')</span>';
+    if(errs>0)h+='<span class="apisec-badge ab-bad" style="background:rgba(239,68,68,.12);color:#ef4444;font-size:10px;font-weight:700;padding:1px 7px;border-radius:4px">'+errs+' errors</span>';
+    if(warns>0)h+='<span style="background:rgba(245,158,11,.12);color:#f59e0b;font-size:10px;font-weight:700;padding:1px 7px;border-radius:4px">'+warns+' warnings</span>';
+    h+='</div><div class="console-list">';
+    var SHOW=200;
+    for(i=0;i<Math.min(logs.length,SHOW);i++)h+=renderLogRow(logs[i]);
+    h+='</div>';
+    if(logs.length>SHOW)h+='<div class="console-more">'+(logs.length-SHOW)+' more lines not shown</div>';
+    return h+'</div>';
+  }
+
+  function renderLogRow(e){
+    var lv=(e.level||'info').toLowerCase();
+    var color=lv==='error'?'#f87171':lv==='warn'?'#fbbf24':lv==='debug'?'#a78bfa':'#60a5fa';
+    var badge=lv==='error'?'E':lv==='warn'?'W':lv==='debug'?'D':'I';
+    var h='<div class="console-entry console-level-'+esc(lv)+'" data-console-level="'+esc(lv)+'">';
+    h+='<span class="console-level-badge" style="color:'+color+'">'+badge+'</span>';
+    var ts='';
+    try{ts=new Date(e.timestamp).toISOString().substr(11,12);}catch(err){ts=String(e.timestamp||'');}
+    h+='<span class="console-time">'+esc(ts)+'</span>';
+    if(e.tag)h+='<span class="console-tag" title="'+esc(String(e.tag))+'">'+esc(String(e.tag))+'</span>';
+    h+='<span class="console-text">'+esc(String(e.text||''))+'</span></div>';
+    return h;
+  }
+
+  function renderFlowAiDefects(t){
+    var defects=t.aiDefects||[];
+    if(defects.length===0)return '<div class="artifact-empty">No AI defects for this flow</div>';
+    var h='';
+    for(var i=0;i<defects.length;i++){
+      var d=defects[i];
+      h+='<div class="aidef aidef-'+esc(d.severity||'info')+'">';
+      if(d.screenshot)h+='<div class="aidef-shot"><img src="'+esc(d.screenshot)+'" alt=""></div>';
+      h+='<div class="aidef-body"><div class="aidef-pills">';
+      h+='<span class="aidef-sev aidef-sev-'+esc(d.severity||'info')+'">'+esc(d.severity||'info')+'</span>';
+      h+='<span class="aidef-type">'+esc(d.type||'ui')+'</span></div>';
+      h+='<div class="aidef-desc">'+esc(d.description||'')+'</div>';
+      if(d.location)h+='<div class="aidef-loc">'+esc(d.location)+'</div>';
+      h+='</div></div>';
+    }
+    return h;
+  }
+
+  /* Clicking a step or a scrub mark seeks the recording. */
+  document.addEventListener('click',function(e){
+    var el=e.target.closest?e.target.closest('[data-seek]'):null;
+    if(el){
+      var v=document.getElementById('replay-video');
+      if(v){
+        var at=parseFloat(el.getAttribute('data-seek'));
+        if(isFinite(at)){try{v.currentTime=at;}catch(err){}}
+      }
+      return;
+    }
+    var card=e.target.closest?e.target.closest('.needs-card'):null;
+    if(card){
+      var idx=parseInt(card.getAttribute('data-flow-idx'),10);
+      if(!isNaN(idx)&&typeof openDrawer==='function')openDrawer(idx);
+    }
+  });
+`;
+
+// src/html-css-mobile.ts
+var CSS_MOBILE = `
+/* \u2500\u2500 Device strip \u2500\u2500 */
+.devstrip{background:var(--bg-1);border:1px solid var(--bd);border-radius:12px;padding:14px 20px;display:flex;align-items:center;gap:26px;flex-wrap:wrap;margin-bottom:20px}
+.dev-id{display:flex;align-items:center;gap:11px}
+.dev-icon{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
+.dev-icon-android{background:rgba(52,211,153,.1);border:1px solid rgba(52,211,153,.22);color:#34d399}
+.dev-icon-ios{background:rgba(96,165,250,.1);border:1px solid rgba(96,165,250,.22);color:#60a5fa}
+.dev-icon-web{background:rgba(167,139,250,.1);border:1px solid rgba(167,139,250,.22);color:#a78bfa}
+.dev-icon-unknown{background:rgba(255,255,255,.04);border:1px solid var(--bd);color:var(--fg-1)}
+.dev-name{font-size:14px;font-weight:700;line-height:1.25}
+.dev-sub{font-size:10.5px;color:var(--fg-1)}
+.dev-rule{width:1px;height:30px;background:var(--bd)}
+.dev-facts{display:flex;gap:28px;flex-wrap:wrap}
+.dev-fact{display:flex;flex-direction:column;gap:2px}
+.dev-fact-k{font-size:9.5px;color:var(--fg-2);letter-spacing:.06em;text-transform:uppercase}
+.dev-fact-v{font-size:11.5px;color:var(--fg);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
+.dev-more{margin-left:auto;font-size:11px;color:var(--fg-1);border:1px solid var(--bd);border-radius:8px;padding:5px 11px;display:flex;align-items:center;gap:7px}
+
+/* Row + drawer device badge */
+.trb-device{background:rgba(52,211,153,.1);color:#34d399}
+.trb-device-ios{background:rgba(96,165,250,.1);color:#60a5fa}
+.trb-device-web{background:rgba(167,139,250,.1);color:#a78bfa}
+
+/* \u2500\u2500 Verdict band \u2500\u2500 */
+.verdict{display:flex;gap:16px;align-items:stretch;margin-bottom:20px;flex-wrap:wrap}
+.verdict-main{flex:1 1 480px;background:var(--bg-1);border:1px solid var(--bd);border-radius:12px;padding:18px 22px;display:flex;flex-direction:column;gap:14px;min-width:0}
+.verdict-main.v-failed{border-color:rgba(239,68,68,.22)}
+.verdict-main.v-passed{border-color:rgba(34,197,94,.18)}
+.verdict-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
+.verdict-title{font-size:21px;font-weight:700;letter-spacing:-.01em}
+.verdict-where{font-size:12px;color:var(--fg-1)}
+.verdict-where code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--fg)}
+.verdict-dur{margin-left:auto;display:flex;align-items:center;gap:6px;font-size:12px;color:var(--fg-1)}
+.verdict-bar{display:flex;height:8px;gap:2px}
+.verdict-bar>span{border-radius:999px}
+.verdict-bar-empty{flex:1;background:rgba(255,255,255,.06)}
+.vb-passed{background:#22c55e}.vb-failed{background:#ef4444}.vb-flaky{background:#f59e0b}
+.vb-timedout{background:#f97316}.vb-skipped{background:#6b7280}
+.verdict-counts{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
+.vc{display:flex;align-items:center;gap:7px}
+.vc-dot{width:9px;height:9px;border-radius:50%}
+.vc-n{font-size:14px;font-weight:700}
+.vc-l{font-size:12px;color:var(--fg-1)}
+.verdict-zeros{margin-left:auto;font-size:11px;color:var(--fg-2)}
+.verdict-side{width:300px;flex:0 0 auto;background:var(--bg-1);border:1px solid var(--bd);border-radius:12px;padding:18px 20px;display:flex;flex-direction:column;gap:12px}
+.verdict-side-label{font-size:10px;font-weight:600;color:var(--fg-2);letter-spacing:.06em;text-transform:uppercase}
+.verdict-side-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 10px}
+.vs-n{font-size:17px;font-weight:700}
+.vs-n small{font-size:11px;font-weight:500;color:var(--fg-1)}
+.vs-l{font-size:10px;color:var(--fg-1)}
+.vs-bad{color:#ef4444}
+
+/* \u2500\u2500 Type band cards \u2500\u2500 */
+.tband{display:grid;gap:16px;margin-bottom:20px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
+.tcard{background:var(--bg-1);border:1px solid var(--bd);border-radius:12px;padding:16px 20px;display:flex;flex-direction:column;gap:12px;min-width:0}
+.tcard-h{font-size:10px;font-weight:600;color:var(--fg-2);letter-spacing:.06em;text-transform:uppercase;display:flex;align-items:center;gap:8px}
+.tcard-sub{margin-left:auto;font-weight:500;letter-spacing:0;text-transform:none;font-size:10px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
+.krow{display:flex;align-items:center;gap:10px}
+.krow-k{width:78px;font-size:11px;font-weight:700}
+.krow-track{display:block;flex:1;height:6px;border-radius:999px;background:rgba(255,255,255,.06);overflow:hidden}
+.krow-fill{display:block;height:100%;border-radius:999px;min-width:3px}
+.krow-n{font-size:11px;color:var(--fg-1);width:34px;text-align:right}
+.lgrid{display:flex;flex-direction:column;gap:7px}
+.lrow{display:flex;align-items:center;gap:9px}
+.lrow-src{font-size:9px;font-weight:700;padding:1px 6px;border-radius:4px}
+.lrow-l{font-size:11px;color:var(--fg-1);flex:1}
+.lrow-n{font-size:12px;font-weight:700}
+.lsample{font-size:10px;color:var(--fg-2);border-top:1px solid var(--bd);padding-top:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
+.tbig{display:flex;align-items:baseline;gap:8px}
+.tbig-n{font-size:28px;font-weight:800;line-height:1}
+.tbig-l{font-size:11px;color:var(--fg-1)}
+
+/* \u2500\u2500 Needs attention \u2500\u2500 */
+.needs{margin-bottom:20px}
+.needs-head{display:flex;align-items:center;gap:8px;padding:0 2px 10px}
+.needs-title{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
+.needs-count{font-size:10px;font-weight:700;color:#ef4444;background:rgba(239,68,68,.12);padding:1px 7px;border-radius:4px}
+.needs-list{display:flex;flex-direction:column;gap:10px}
+.needs-card{background:var(--bg-1);border:1px solid rgba(239,68,68,.2);border-left:3px solid #ef4444;border-radius:10px;padding:14px 18px;display:flex;gap:20px;align-items:flex-start;cursor:pointer}
+.needs-card:hover{border-color:rgba(239,68,68,.4)}
+.needs-card.nc-flaky{border-color:rgba(245,158,11,.2);border-left-color:#f59e0b}
+.needs-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:9px}
+.needs-row1{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
+.needs-name{font-size:14px;font-weight:600}
+.needs-file{font-size:11px;color:var(--fg-2);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
+.needs-cause{font-size:12.5px;color:var(--fg-err)}
+.needs-cause em{font-style:normal}
+.needs-evidence{background:var(--bg-code);border:1px solid var(--bd);border-radius:8px;padding:10px 13px;display:flex;flex-direction:column;gap:7px}
+.needs-step{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
+.needs-step-t{font-size:11px;color:#d4d4d4;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
+.needs-step-d{margin-left:auto;font-size:10px;color:var(--fg-2)}
+.needs-log{font-size:10.5px;color:#fb923c;border-top:1px solid var(--bd);padding-top:7px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
+.needs-log-t{color:var(--fg-2)}
+.needs-chips{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
+.nchip{display:flex;align-items:center;gap:5px;font-size:10px;color:var(--fg-1);background:var(--bg-2);border:1px solid var(--bd);padding:2px 8px;border-radius:999px}
+.nchip-bad{color:#ef4444;background:rgba(239,68,68,.1);border-color:rgba(239,68,68,.22)}
+.nchip-gesture{color:#e879f9;background:rgba(232,121,249,.1);border-color:rgba(232,121,249,.22)}
+.needs-right{display:flex;flex-direction:column;align-items:flex-end;gap:8px;flex-shrink:0}
+.needs-dur{font-size:13px;font-weight:700;color:var(--fg-1)}
+.needs-open{display:flex;align-items:center;gap:4px;font-size:11px;font-weight:600;color:#2dd4a8}
+
+/* \u2500\u2500 Step kind badges \u2500\u2500 */
+.cmd-kind{font-size:9px;font-weight:700;padding:1px 6px;border-radius:999px;letter-spacing:.04em;text-transform:uppercase;flex-shrink:0;min-width:60px;text-align:center}
+.k-gesture{background:rgba(232,121,249,.12);color:#e879f9}
+.k-interaction{background:rgba(96,165,250,.12);color:#60a5fa}
+.k-assertion{background:rgba(52,211,153,.12);color:#34d399}
+.k-lifecycle{background:rgba(251,191,36,.12);color:#fbbf24}
+.k-device{background:rgba(251,146,60,.12);color:#fb923c}
+.k-keyboard{background:rgba(245,158,11,.12);color:#f59e0b}
+.k-navigation{background:rgba(167,139,250,.12);color:#a78bfa}
+.k-find{background:rgba(255,255,255,.05);color:var(--fg-1)}
+.k-alert{background:rgba(239,68,68,.12);color:#ef4444}
+.k-screenshot,.k-media{background:rgba(96,165,250,.1);color:#60a5fa}
+.k-context,.k-script,.k-flow_control,.k-other{background:rgba(255,255,255,.04);color:var(--fg-2)}
+.k-ai{background:rgba(3,183,156,.14);color:#2dd4a8}
+.cmd-selector{font-size:10px;color:var(--fg-2);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:220px}
+
+/* \u2500\u2500 Device log panel \u2500\u2500
+   Maestro had no log surface at all, so it has none of these base classes;
+   the new Driver log tab rendered as unstyled text without them. */
+.console-panel{border:1px solid var(--bd);border-radius:8px;overflow:hidden;background:var(--bg-1)}
+.console-header{font-size:11px;font-weight:700;color:var(--fg-1);text-transform:uppercase;letter-spacing:.06em;display:flex;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid var(--bd);background:var(--bg-2)}
+.console-title{font-size:11px;font-weight:700}
+.console-list{max-height:400px;overflow-y:auto;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11px;background:var(--bg)}
+.console-entry{display:flex;align-items:baseline;gap:8px;padding:3px 10px;border-bottom:1px solid rgba(255,255,255,.03);line-height:20px}
+.console-entry:hover{background:rgba(255,255,255,.03)}
+.console-level-badge{font-weight:700;font-size:9px;min-width:14px;text-align:center;flex-shrink:0}
+.console-time{color:var(--fg-2);font-size:10px;white-space:nowrap;min-width:76px;flex-shrink:0}
+.console-text{flex:1;min-width:0;word-break:break-word;white-space:pre-wrap;color:var(--fg)}
+.console-loc{color:var(--fg-2);font-size:10px;white-space:nowrap;margin-left:auto;max-width:180px;overflow:hidden;text-overflow:ellipsis}
+.console-more{font-size:10.5px;color:var(--fg-2);padding:8px 12px;border-top:1px solid var(--bd)}
+
+/* \u2500\u2500 Device log provenance \u2500\u2500 */
+.console-source{font-size:9px;font-weight:700;padding:1px 6px;border-radius:4px;background:rgba(255,255,255,.04);color:var(--fg-1);flex-shrink:0}
+.console-source-crashlog{background:rgba(239,68,68,.12);color:#ef4444}
+.console-tag{font-size:10px;color:#fb923c;flex-shrink:0;width:104px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
+.console-pid{font-size:10px;color:var(--fg-2);flex-shrink:0;width:52px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
+.console-stack{grid-column:1/-1;font-size:10px;color:var(--fg-2);white-space:pre-wrap;padding:4px 0 6px 24px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
+
+/* \u2500\u2500 Replay: steps against the recording \u2500\u2500 */
+.replay{display:flex;gap:22px;flex-wrap:wrap}
+.replay-video{width:232px;flex-shrink:0}
+.replay-video video{width:100%;border-radius:12px;border:1px solid var(--bd);background:#000;display:block}
+.replay-side{flex:1;min-width:280px;display:flex;flex-direction:column;gap:12px}
+.scrub{position:relative;height:10px;border-radius:999px;background:rgba(255,255,255,.06)}
+.scrub-mark{position:absolute;top:-3px;width:3px;height:16px;border-radius:2px;cursor:pointer}
+.scrub-mark.is-failed{top:-5px;width:4px;height:20px;background:#ef4444}
+.scrub-legend{display:flex;justify-content:space-between;font-size:10px;color:var(--fg-2);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
+.replay-steps{display:flex;flex-direction:column;gap:4px;max-height:320px;overflow-y:auto}
+.rstep{display:flex;align-items:center;gap:10px;padding:6px 10px;border-radius:7px;cursor:pointer}
+.rstep:hover{background:var(--bg-2)}
+.rstep.is-failed{background:rgba(239,68,68,.07);border:1px solid rgba(239,68,68,.18)}
+.rstep-n{font-size:10px;color:var(--fg-2);width:22px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
+.rstep-t{font-size:11.5px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
+.rstep-off{font-size:10px;color:var(--fg-2);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
+.rstep-d{font-size:11px;color:var(--fg-1);width:52px;text-align:right}
+.rstep.is-failed .rstep-d{color:#ef4444;font-weight:700}
+
+/* \u2500\u2500 Screenshot strip: every shot, not only the first \u2500\u2500 */
+.shot-strip{display:flex;gap:10px;flex-wrap:wrap}
+.shot{width:118px;border-radius:8px;border:1px solid var(--bd);overflow:hidden;background:var(--bg-2);cursor:pointer}
+.shot img{width:100%;display:block}
+.shot-cap{font-size:9.5px;color:var(--fg-2);padding:4px 6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.shot.is-failure{border-color:rgba(239,68,68,.4)}
+
+/* \u2500\u2500 AI defects \u2500\u2500 */
+.aidef{border-left:3px solid #6b7280;background:var(--bg-1);border:1px solid var(--bd);border-radius:10px;padding:14px 18px;display:flex;gap:16px;align-items:flex-start;margin-bottom:10px}
+.aidef-critical{border-left-color:#ef4444}
+.aidef-warning{border-left-color:#f59e0b}
+.aidef-info{border-left-color:#60a5fa}
+.aidef-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:9px}
+.aidef-pills{display:flex;align-items:center;gap:8px}
+.aidef-sev{font-size:9px;font-weight:700;padding:1px 7px;border-radius:999px;letter-spacing:.04em;text-transform:uppercase}
+.aidef-sev-critical{background:rgba(239,68,68,.14);color:#ef4444}
+.aidef-sev-warning{background:rgba(245,158,11,.14);color:#f59e0b}
+.aidef-sev-info{background:rgba(96,165,250,.14);color:#60a5fa}
+.aidef-type{font-size:9px;font-weight:700;padding:1px 7px;border-radius:999px;background:rgba(255,255,255,.04);color:var(--fg-1);letter-spacing:.04em;text-transform:uppercase}
+.aidef-desc{font-size:13.5px;line-height:1.55}
+.aidef-loc{font-size:10.5px;color:var(--fg-2);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
+.aidef-shot{width:92px;flex-shrink:0;border-radius:8px;border:1px solid var(--bd);overflow:hidden}
+.aidef-shot img{width:100%;display:block}
+
+@media (max-width:900px){
+  .verdict-side{width:100%}
+}
+`;
+
 // src/html-template.ts
 var JS = `
 (function(){
@@ -3373,10 +4023,14 @@ var JS = `
   ${JS_ASSERTIONS}
   ${JS_AI_DEFECTS}
   ${JS_INTERACTIONS}
+  ${JS_MOBILE}
 
   applyTheme();
   renderRunMeta();
+  renderDeviceStrip();
   renderHeroStrip();
+  renderTypeBand();
+  renderNeedsAttention();
   renderWaterfall();
   renderFilterBar();
   renderFlowList();
@@ -3391,10 +4045,10 @@ function renderHtmlDocument(reportJson) {
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width,initial-scale=1">
-<meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src 'unsafe-inline'; script-src 'unsafe-inline'; img-src data: blob: file: 'self'; media-src blob: 'self'; connect-src 'self';">
+<meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src 'unsafe-inline'; script-src 'unsafe-inline'; img-src data: blob: file: 'self'; media-src blob: data: file: 'self'; connect-src 'self';">
 <title>TestRelic Maestro Test Report</title>
 <link rel="icon" type="image/svg+xml" href="data:image/svg+xml;base64,${Buffer.from(LOGO_SVG_RAW).toString("base64")}">
-<style>${CSS}</style>
+<style>${CSS}${CSS_MOBILE}</style>
 <script>(function(){var p=localStorage.getItem('tr-theme')||'system';var t=p==='system'?(window.matchMedia('(prefers-color-scheme:light)').matches?'light':'dark'):p;document.documentElement.setAttribute('data-theme',t);})()</script>
 </head>
 <body>
@@ -3418,7 +4072,10 @@ function renderHtmlDocument(reportJson) {
     </div>
   </div>
 
+  <div id="device-strip"></div>
   <div id="hero-strip" class="hero-strip"></div>
+  <div id="type-band"></div>
+  <div id="needs-attention"></div>
   <div id="waterfall" class="waterfall-card"></div>
   <div id="filter-bar" class="filter-bar"></div>
   <div id="flow-list"></div>
@@ -4893,7 +5550,7 @@ async function orchestrateReport(input) {
   const completedAt = (/* @__PURE__ */ new Date()).toISOString();
   const totalDuration = Date.now() - new Date(startedAt).getTime();
   const report = {
-    schemaVersion: "1.0.0",
+    schemaVersion: SCHEMA_VERSION,
     testRunId,
     startedAt,
     completedAt,