mimetic-cli 0.1.3 → 0.1.5

package/dist/observer-assets.js

@@ -416,6 +416,10 @@ a { color: inherit; text-decoration: none; }
 
 /* ============================================================ STREAM SURFACES */
 .surface-fill { position: absolute; inset: 0; width: 100%; height: 100%; }
+.live-stream-mount { position: absolute; inset: 0; overflow: hidden; background: #000; }
+.live-stream-overlay { position: absolute; overflow: hidden; pointer-events: none; z-index: 2; }
+.live-stream-overlay[data-focus="true"] .bw-lab-dock { max-height: 86px; }
+.live-stream-overlay[data-focus="true"] .bw-chip-v { max-width: min(420px, 38vw); }
 
 /* browser/ui mock */
 .bw { position: absolute; inset: 0; display: flex; flex-direction: column; background: #0b0d10; }
@@ -435,6 +439,35 @@ a { color: inherit; text-decoration: none; }
 .bw-viewport { flex: 1; position: relative; overflow: hidden; background: #fbfcfd; }
 .bw-app-wait { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 8px; background: #fbfcfd; color: #5a626c; text-align: center; padding: 16px; }
 .bw-app-wait .wait-spinner { border-color: rgba(20,28,40,.12); border-top-color: var(--accent); }
+.bw-lab-dock {
+  position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 8;
+  display: flex; align-items: flex-end; gap: 5px; flex-wrap: wrap;
+  max-height: 54px; overflow: hidden; pointer-events: none;
+}
+.bw-lab-chip {
+  min-width: 0; max-width: 100%; pointer-events: auto;
+  display: inline-flex; align-items: center; gap: 5px;
+  padding: 3px 7px; border-radius: 6px;
+  background: rgba(8,10,13,.78); backdrop-filter: blur(8px);
+  border: 1px solid rgba(255,255,255,.12);
+  color: var(--text-2); box-shadow: var(--shadow-1);
+}
+a.bw-lab-chip:hover { border-color: rgba(255,255,255,.22); color: var(--text-1); }
+.bw-lab-chip[data-tone="live"] { color: var(--accent-2); border-color: color-mix(in oklab, var(--accent) 35%, transparent); }
+.bw-lab-chip[data-tone="ok"] { color: var(--green); border-color: color-mix(in oklab, var(--green) 34%, transparent); }
+.bw-lab-chip[data-tone="warn"] { color: var(--amber); border-color: color-mix(in oklab, var(--amber) 34%, transparent); }
+.bw-lab-chip[data-tone="err"] { color: var(--red); border-color: color-mix(in oklab, var(--red) 34%, transparent); }
+.bw-chip-k {
+  flex: none; font-family: var(--mono); font-size: 8.5px; letter-spacing: .08em;
+  text-transform: uppercase; color: currentColor;
+}
+.bw-chip-v {
+  min-width: 0; max-width: min(240px, 42vw);
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+  font-family: var(--mono); font-size: 9px; color: var(--text-2);
+}
+.focus-stage-area .bw-lab-dock { max-height: 86px; }
+.focus-stage-area .bw-chip-v { max-width: min(420px, 38vw); }
 .bw-cursor {
   position: absolute; width: 16px; height: 16px; z-index: 5; pointer-events: none;
   transition: left 1.1s var(--ease), top 1.1s var(--ease);
@@ -611,12 +644,47 @@ a { color: inherit; text-decoration: none; }
 
 .file-row { display: flex; align-items: center; gap: 11px; padding: 11px 16px; border-bottom: 1px solid var(--line); transition: background .14s; }
 .file-row:hover { background: var(--surface-1); }
+.file-row[data-selected="true"] { background: var(--surface-2); box-shadow: inset 2px 0 0 var(--accent); }
+.file-row > button, .file-row > a:not(.file-open) { display: flex; align-items: center; gap: 11px; min-width: 0; flex: 1; text-align: left; }
 .file-ic { width: 28px; height: 28px; border-radius: 7px; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--line); color: var(--text-2); flex: none; }
 .file-ic svg { width: 14px; height: 14px; }
 .file-meta { min-width: 0; flex: 1; }
 .file-name { font-size: 12.5px; color: var(--text-1); }
 .file-path { font-family: var(--mono); font-size: 9.5px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .file-kind { font-family: var(--mono); font-size: 9px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); padding: 2px 7px; border-radius: 5px; background: var(--surface-2); flex: none; }
+.file-open { font-family: var(--mono); font-size: 9px; color: var(--accent-2); padding: 3px 6px; border-radius: 5px; border: 1px solid var(--line); flex: none; }
+.file-open:hover { background: var(--surface-3); }
+.file-inspector { border-bottom: 1px solid var(--line); background: var(--surface-1); }
+.fi-head { padding: 14px 16px 12px; border-bottom: 1px solid var(--line); }
+.fi-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
+.fi-title h3 { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: -0.01em; }
+.fi-status { font-family: var(--mono); font-size: 9px; text-transform: uppercase; letter-spacing: .08em; padding: 2px 7px; border-radius: 999px; background: var(--surface-3); color: var(--text-2); }
+.fi-status[data-status="passed"] { background: var(--green-soft); color: var(--green); }
+.fi-status[data-status="needs_review"], .fi-status[data-status="blocked"] { background: var(--amber-soft); color: var(--amber); }
+.fi-summary { margin-top: 7px; color: var(--text-2); font-size: 11.5px; line-height: 1.45; }
+.fi-section { padding: 12px 16px; border-bottom: 1px solid var(--line); }
+.fi-section:last-child { border-bottom: 0; }
+.fi-section-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
+.fi-section-title span:first-child { font-family: var(--mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
+.fi-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
+.fi-stat { padding: 8px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface-0); min-width: 0; }
+.fi-stat-k { font-family: var(--mono); font-size: 8.5px; color: var(--text-3); text-transform: uppercase; letter-spacing: .08em; }
+.fi-stat-v { margin-top: 2px; font-size: 13px; font-weight: 600; color: var(--text-1); overflow-wrap: anywhere; }
+.fi-check { display: grid; grid-template-columns: auto 1fr; gap: 8px; padding: 8px 0; border-top: 1px solid var(--line); }
+.fi-check:first-child { border-top: 0; padding-top: 0; }
+.fi-dot { width: 18px; height: 18px; border-radius: 6px; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--line); color: var(--text-3); }
+.fi-check[data-ok="true"] .fi-dot { color: var(--green); border-color: color-mix(in oklab, var(--green) 30%, transparent); background: var(--green-soft); }
+.fi-check[data-ok="false"] .fi-dot { color: var(--amber); border-color: color-mix(in oklab, var(--amber) 30%, transparent); background: var(--amber-soft); }
+.fi-check-name { font-size: 12px; color: var(--text-1); }
+.fi-check-detail { margin-top: 2px; font-size: 11px; color: var(--text-3); line-height: 1.4; }
+.fi-tree { max-height: 260px; overflow: auto; border: 1px solid var(--line); border-radius: 7px; background: var(--surface-0); padding: 7px 0; }
+.fi-tree-row { display: grid; grid-template-columns: auto 1fr auto; gap: 7px; padding: 3px 9px; font-family: var(--mono); font-size: 9.5px; color: var(--text-2); }
+.fi-tree-row[data-type="directory"] { color: var(--accent-2); }
+.fi-tree-size { color: var(--text-4); }
+.fi-pre { margin: 0; max-height: 320px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--mono); font-size: 10px; line-height: 1.45; background: var(--surface-0); border: 1px solid var(--line); border-radius: 7px; padding: 10px; color: var(--text-2); }
+.fi-preview + .fi-preview { margin-top: 10px; }
+.fi-preview-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 5px; font-family: var(--mono); font-size: 9.5px; color: var(--text-3); }
+.fi-load { padding: 24px 16px; color: var(--text-3); text-align: center; }
 
 .tab-empty { padding: 36px 24px; text-align: center; color: var(--text-3); font-size: 12px; }
 
@@ -679,16 +747,25 @@ html[data-theme="light"] .scrim { background: rgba(20,28,40,.32); }
   .lane-count .lc-label { display: none; }
 }
 @media (max-width: 860px) {
-  .focus { grid-template-columns: 1fr; grid-template-rows: 1fr; }
+  .focus { display: block; height: 100%; min-height: 0; overflow-y: auto; }
   .focus-rail { display: none; }
+  .focus-stage { min-height: auto; }
+  .focus-bar { position: sticky; top: 0; z-index: 25; }
+  .focus-stage-area {
+    display: block; min-height: min(60vh, 560px); height: auto;
+    padding: 14px; overflow: visible;
+  }
+  .focus-frame {
+    width: 100%; height: auto; max-height: none;
+    min-height: 280px;
+  }
   .focus-side {
-    position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 72;
-    max-height: 62vh; border-left: none; border-top: 1px solid var(--line-2);
-    border-radius: var(--radius-lg) var(--radius-lg) 0 0; box-shadow: var(--shadow-pop);
-    transform: translateY(calc(100% - 52px)); transition: transform .3s var(--ease);
+    position: relative; left: auto; right: auto; bottom: auto; top: auto; z-index: auto;
+    min-height: 360px; max-height: none; border-left: none; border-top: 1px solid var(--line-2);
+    border-radius: 0; box-shadow: none; transform: none;
   }
-  .focus-side[data-sheet="open"] { transform: translateY(0); }
-  .sheet-grip { display: flex; }
+  .focus-side[data-sheet="open"], .focus-side[data-sheet="closed"] { transform: none; }
+  .sheet-grip { display: none; }
 }
 .sheet-grip { display: none; align-items: center; justify-content: center; gap: 8px; height: 40px; flex: none; border-bottom: 1px solid var(--line); cursor: grab; }
 .sheet-grip::before { content: ""; width: 36px; height: 4px; border-radius: 2px; background: var(--line-3); }
@@ -892,6 +969,7 @@ export function observerClientJs() {
 
   // ---------------------------------------------------------------- hydrate
   var DATA_FILE = "observer-data.json";
+  var REFRESH_MS = 5000;
   var dataEl = document.getElementById("observer-data");
   var currentData = null;
   try { currentData = JSON.parse((dataEl && dataEl.textContent) || "null"); } catch (e) { currentData = null; }
@@ -924,9 +1002,10 @@ export function observerClientJs() {
   }
 
   // ---------------------------------------------------------------- state
+  var initialFocusId = focusFromHash();
   var S = {
-    view: "grid",
-    focusedId: focusFromHash(),
+    view: initialFocusId ? "focus" : "grid",
+    focusedId: initialFocusId,
     statusSel: [],
     kindSel: [],
     query: "",
@@ -935,6 +1014,7 @@ export function observerClientJs() {
     detailsOpen: false,
     tweaksOpen: false,
     consoleOpen: false,
+    filePath: null,
     railCollapsed: !!readPref("railCollapsed", false),
     sideCollapsed: !!readPref("sideCollapsed", false),
     sheetOpen: false,
@@ -945,6 +1025,10 @@ export function observerClientJs() {
     statusViz: readPref("statusViz", "badges"),
     motion: readPref("motion", "full")
   };
+  var artifactCache = {};
+  var liveStreamFrames = {};
+  var liveStreamHost = null;
+  var liveStreamLayoutRaf = null;
 
   // ---------------------------------------------------------------- tone / labels
   var TONE = {
@@ -1009,7 +1093,7 @@ export function observerClientJs() {
 
   // ---------------------------------------------------------------- derive (observer-data.v1 -> display)
   function laneName(s) { return s.label || (s.sim && s.sim.summary) || s.id || "lane"; }
-  function laneRoute(s) { return (s.ui && s.ui.route) || s.url || (s.terminal && s.terminal.title) || ""; }
+  function laneRoute(s) { return (s.ui && (s.ui.route || s.ui.appUrl || s.ui.nestedObserverUrl)) || s.url || (s.terminal && s.terminal.title) || ""; }
   function laneProgress(s) {
     if (s.sim && typeof s.sim.progress === "number") return Math.max(0, Math.min(100, Math.round(s.sim.progress)));
     var t = tone(s.status);
@@ -1086,6 +1170,107 @@ export function observerClientJs() {
     while (arr.length && arr[arr.length - 1].trim() === "") arr.pop();
     return arr.map(function (line) { return { text: line, cls: classify(line) }; });
   }
+  function clip(v, n) {
+    var s = String(v == null ? "" : v).trim();
+    if (!s) return "";
+    return s.length > n ? (s.slice(0, Math.max(0, n - 1)) + "…") : s;
+  }
+  function shortSurfaceValue(v) {
+    var s = String(v == null ? "" : v).trim();
+    if (!s) return "";
+    var cut = s.split("?")[0].split("#")[0];
+    var parts = cut.split("/");
+    var tail = parts.filter(function (p) { return !!p; }).slice(-2).join("/");
+    return clip(tail || cut || s, 48);
+  }
+  function linkHref(v, artifactPath) {
+    var raw = String(v == null ? "" : v).trim();
+    var low = raw.toLowerCase();
+    if (!raw) return "";
+    if (low.indexOf("http://") === 0 || low.indexOf("https://") === 0 || low.indexOf("file:") === 0) return raw;
+    if (raw.indexOf("://") >= 0) return "";
+    if (raw.charAt(0) === "/" || raw.indexOf("..") >= 0) return "";
+    return artifactPath ? ("../" + raw) : raw;
+  }
+  function firstArtifactKind(s, kind) {
+    var arts = laneArtifacts(s);
+    for (var i = 0; i < arts.length; i += 1) {
+      if (arts[i] && arts[i].kind === kind) return arts[i];
+    }
+    return null;
+  }
+  function artifactKinds(arts) {
+    var seen = {}, out = [];
+    arts.forEach(function (a) {
+      var k = (a && a.kind) || "file";
+      if (!seen[k]) { seen[k] = true; out.push(k); }
+    });
+    var shown = out.slice(0, 3).join("+");
+    return shown + (out.length > 3 ? "+" : "");
+  }
+  function terminalExcerpt(s) {
+    var lines = termLines(s).filter(function (ln) { return !!String(ln.text || "").trim(); });
+    if (!lines.length) return "";
+    return clip(lines[lines.length - 1].text, 88);
+  }
+  function completionTone(c) {
+    var t = tone(c && c.status);
+    return t === "running" ? "live" : t === "complete" ? "ok" : t === "blocked" ? "warn" : c && c.status === "failed" ? "err" : "info";
+  }
+  function completionText(c) {
+    if (!c) return "";
+    var bits = [statusLabel(c.status)];
+    if (typeof c.exitCode === "number") bits.push("exit " + c.exitCode);
+    if (typeof c.nestedObserverPresent === "boolean") bits.push("observer " + (c.nestedObserverPresent ? "present" : "missing"));
+    if (typeof c.nestedVerifyPassed === "boolean") bits.push("verify " + (c.nestedVerifyPassed ? "passed" : "failed"));
+    if (c.reason) bits.push(c.reason);
+    return clip(bits.join(" · "), 110);
+  }
+  function labChip(kind, label, detail, href, toneName) {
+    var title = label + (detail ? ": " + detail : "");
+    var inner = '<span class="bw-chip-k">' + esc(label) + '</span>' + (detail ? '<span class="bw-chip-v">' + esc(detail) + '</span>' : "");
+    var attrs = ' class="bw-lab-chip" data-kind="' + esc(kind) + '" data-tone="' + esc(toneName || "info") + '" title="' + esc(title) + '"';
+    if (href) return '<a' + attrs + ' href="' + esc(href) + '" target="_blank" rel="noopener noreferrer" data-action="external">' + inner + '</a>';
+    return '<span' + attrs + '>' + inner + '</span>';
+  }
+  function browserLiveUrl(s) {
+    return (s.embed && s.embed.kind === "iframe" && s.embed.url) || s.url || "";
+  }
+  function liveStreamMount(s, liveUrl) {
+    return '<div class="live-stream-mount surface-fill" data-live-stream-id="' + esc(s.id) + '" data-live-stream-url="' + esc(liveUrl) + '" data-live-stream-title="' + esc(laneName(s) || "live stream") + '">'
+      + '<div class="bw-app-wait"><div class="wait-spinner" style="width:24px;height:24px"></div>'
+      + '<div class="mono" style="font-size:9px">connecting live stream</div></div></div>';
+  }
+  function browserShot(s) {
+    var art = firstArtifactKind(s, "screenshot");
+    return (s.ui && s.ui.screenshotUrl) || (s.embed && s.embed.kind === "screenshot" && s.embed.url) || (art && linkHref(art.path, true)) || "";
+  }
+  function browserHasLabSignals(s) {
+    var ui = s.ui || {};
+    return !!(browserLiveUrl(s) || browserShot(s) || ui.appUrl || ui.nestedObserverUrl || ui.nestedObserverPath || ui.state || s.completion || terminalExcerpt(s) || laneArtifacts(s).length);
+  }
+  function browserLabDock(s, shot) {
+    var ui = s.ui || {};
+    var chips = [];
+    var appUrl = ui.appUrl || "";
+    var nestedArt = firstArtifactKind(s, "observer");
+    var nested = ui.nestedObserverUrl || ui.nestedObserverPath || (nestedArt && nestedArt.path) || "";
+    var completion = s.completion || null;
+    var shotArt = firstArtifactKind(s, "screenshot");
+    var arts = laneArtifacts(s);
+    var tail = terminalExcerpt(s);
+
+    if (appUrl) chips.push(labChip("app", "app", shortSurfaceValue(appUrl), linkHref(appUrl, false), "live"));
+    if (nested) chips.push(labChip("observer", "observer", shortSurfaceValue(nested), linkHref(nested, !!(nestedArt && nested === nestedArt.path)), "info"));
+    else if (completion && typeof completion.nestedObserverPresent === "boolean") chips.push(labChip("observer", "observer", completion.nestedObserverPresent ? "present" : "missing", "", completion.nestedObserverPresent ? "ok" : "warn"));
+    if (completion) chips.push(labChip("completion", "status", completionText(completion), "", completionTone(completion)));
+    if (tail) chips.push(labChip("terminal", "terminal", tail, "", "info"));
+    if (shot || shotArt) chips.push(labChip("screenshot", "shot", shot ? (S.media === "screenshot" ? "viewing fallback" : "fallback ready") : "artifact", shot ? linkHref(shot, false) : linkHref(shotArt.path, true), "info"));
+    if (arts.length) chips.push(labChip("artifact", "files", arts.length + " " + artifactKinds(arts), "", "info"));
+    if (ui.state && !completion) chips.push(labChip("state", "state", clip(ui.state, 72), "", "info"));
+    if (!chips.length) return "";
+    return '<div class="bw-lab-dock" aria-label="Browser lane lab surfaces">' + chips.slice(0, 6).join("") + '</div>';
+  }
 
   function consoleLines() {
     var rows = [];
@@ -1159,16 +1344,19 @@ export function observerClientJs() {
   function browserSurface(s) {
     var live = tone(s.status) === "running";
     var route = laneRoute(s) || "(local)";
-    var shot = (s.ui && s.ui.screenshotUrl) || (s.embed && s.embed.kind === "screenshot" && s.embed.url);
+    var liveUrl = browserLiveUrl(s);
+    var shot = browserShot(s);
+    var dock = browserLabDock(s, shot);
     var body;
-    if (shot) body = '<img class="surface-fill" style="object-fit:cover;object-position:top" src="' + esc(shot) + '" alt="viewport screenshot"/>';
+    if (liveUrl && S.media === "live") body = liveStreamMount(s, liveUrl);
+    else if (shot) body = '<img class="surface-fill" style="object-fit:cover;object-position:top" src="' + esc(shot) + '" alt="viewport screenshot"/>';
     else body = '<div class="bw-app-wait"><div class="wait-spinner" style="width:24px;height:24px"></div>'
       + '<div class="mono" style="font-size:9px">' + esc(route) + '</div>'
       + '<div style="font-size:10px">' + esc(laneStep(s)) + '</div></div>';
     return '<div class="bw">'
       + '<div class="bw-chrome"><div class="bw-dots"><i></i><i></i><i></i></div>'
       + '<div class="bw-url">' + icon("lock", 8) + '<span>' + esc(route) + '</span></div></div>'
-      + '<div class="bw-viewport">' + body + '</div>'
+      + '<div class="bw-viewport">' + body + (liveUrl && S.media === "live" ? "" : dock) + '</div>'
       + (live ? liveTag() : "")
       + '</div>';
   }
@@ -1210,9 +1398,9 @@ export function observerClientJs() {
   function streamSurface(s, focus) {
     var k = s.kind, st = s.status;
     var hasTail = !!(s.terminal && s.terminal.tail && String(s.terminal.tail).trim());
-    if ((st === "blocked" || st === "timed_out") && !hasTail) return waitSurface(s);
+    if ((st === "blocked" || st === "timed_out") && !hasTail && !((k === "ui" || k === "browser") && browserHasLabSignals(s))) return waitSurface(s);
     if (k === "ui" || k === "browser") {
-      if (st === "blocked" || st === "timed_out" || st === "failed" || st === "contract_proof_only") return waitSurface(s);
+      if ((st === "blocked" || st === "timed_out" || st === "failed" || st === "contract_proof_only") && !browserHasLabSignals(s)) return waitSurface(s);
       return browserSurface(s);
     }
     if (k === "terminal" || k === "tui") return hasTail ? terminalSurface(s, focus) : waitSurface(s);
@@ -1393,6 +1581,113 @@ export function observerClientJs() {
     if (kind === "codex-ui") return "spark";
     return "globe";
   }
+  function artifactHref(a) {
+    return a && a.path ? linkHref(a.path, true) : "";
+  }
+  function ensureArtifactLoaded(a) {
+    if (!a || !a.path || a.kind !== "filesystem") return;
+    var key = a.path;
+    if (artifactCache[key]) return;
+    if (location.protocol === "file:") {
+      artifactCache[key] = { status: "offline", text: "", json: null };
+      return;
+    }
+    var href = artifactHref(a);
+    if (!href) {
+      artifactCache[key] = { status: "error", text: "", json: null, error: "Artifact path is not fetchable." };
+      return;
+    }
+    artifactCache[key] = { status: "loading", text: "", json: null };
+    fetch(href, { cache: "no-store" }).then(function (r) {
+      if (!r.ok) throw new Error("HTTP " + r.status);
+      return r.text();
+    }).then(function (text) {
+      var json = null;
+      try { json = JSON.parse(text); } catch (e) {}
+      artifactCache[key] = { status: "loaded", text: text, json: json };
+      render();
+    }).catch(function (e) {
+      artifactCache[key] = { status: "error", text: "", json: null, error: e && e.message ? e.message : "Fetch failed." };
+      render();
+    });
+  }
+  function formatBytes(n) {
+    if (typeof n !== "number" || !isFinite(n)) return "";
+    if (n < 1024) return n + "b";
+    if (n < 1024 * 1024) return Math.round(n / 102.4) / 10 + "kb";
+    return Math.round(n / 1024 / 102.4) / 10 + "mb";
+  }
+  function renderGenericArtifact(a, state) {
+    if (!state || state.status === "loading") return '<div class="fi-load"><span class="wait-spinner" style="width:18px;height:18px;display:inline-block;vertical-align:middle;margin-right:8px"></span>Loading artifact…</div>';
+    if (state.status === "offline") return '<div class="fi-load">Static file view cannot hydrate artifacts inline. Open the artifact link directly.</div>';
+    if (state.status === "error") return '<div class="fi-load">Could not load artifact: ' + esc(state.error || "unknown error") + '</div>';
+    return '<div class="file-inspector"><div class="fi-head"><div class="fi-title"><h3>' + esc(a.label || a.path) + '</h3><span class="fi-status">artifact</span></div>'
+      + '<div class="fi-summary mono">' + esc(a.path) + '</div></div>'
+      + '<div class="fi-section"><pre class="fi-pre">' + esc(state.text || "") + '</pre></div></div>';
+  }
+  function renderSetupQualityArtifact(a, state) {
+    if (!state || state.status !== "loaded" || !state.json || state.json.schema !== "mimetic.setup-quality.v1") {
+      return renderGenericArtifact(a, state);
+    }
+    var q = state.json;
+    var checks = q.checks || [];
+    var mim = q.mimetic || {};
+    var scripts = q.packageScripts || {};
+    var tree = q.tree || [];
+    var previews = q.previews || [];
+    var scriptRows = Object.keys(scripts).sort().slice(0, 18).map(function (key) {
+      return '<div class="fi-tree-row"><span>$</span><span>' + esc(key) + '</span><span class="fi-tree-size">' + esc(scripts[key]) + '</span></div>';
+    }).join("");
+    var treeRows = tree.slice(0, 160).map(function (entry) {
+      return '<div class="fi-tree-row" data-type="' + esc(entry.type || "file") + '"><span>' + (entry.type === "directory" ? "dir" : "file") + '</span><span>' + esc(entry.path) + '</span><span class="fi-tree-size">' + esc(formatBytes(entry.sizeBytes)) + '</span></div>';
+    }).join("");
+    var previewRows = previews.length ? previews.map(function (preview) {
+      return '<div class="fi-preview"><div class="fi-preview-head"><span>' + esc(preview.path) + '</span><span>' + esc(preview.language || "text") + (preview.truncated ? " · truncated" : "") + '</span></div><pre class="fi-pre">' + esc(preview.text || "") + '</pre></div>';
+    }).join("") : '<div class="tab-empty">No raw file previews persisted for this run.</div>';
+    return '<div class="file-inspector"><div class="fi-head"><div class="fi-title"><h3>Setup quality</h3><span class="fi-status" data-status="' + esc(q.status || "unknown") + '">' + esc(q.status || "unknown") + '</span></div>'
+      + '<div class="fi-summary">' + esc(q.summary || "") + '</div><div class="fi-summary mono">' + esc(a.path) + '</div></div>'
+      + '<div class="fi-section"><div class="fi-grid">'
+      + '<div class="fi-stat"><div class="fi-stat-k">personas</div><div class="fi-stat-v">' + esc(mim.personaCount || 0) + '</div></div>'
+      + '<div class="fi-stat"><div class="fi-stat-k">scenarios</div><div class="fi-stat-v">' + esc(mim.scenarioCount || 0) + '</div></div>'
+      + '<div class="fi-stat"><div class="fi-stat-k">config</div><div class="fi-stat-v">' + (mim.configPresent ? "present" : "missing") + '</div></div>'
+      + '<div class="fi-stat"><div class="fi-stat-k">runtime ignore</div><div class="fi-stat-v">' + (mim.gitignoreContainsRuntimeIgnore ? "present" : "missing") + '</div></div>'
+      + '</div></div>'
+      + '<div class="fi-section"><div class="fi-section-title"><span>Checks</span><span class="mono">' + checks.filter(function (c) { return c.ok; }).length + ' / ' + checks.length + '</span></div>'
+      + checks.map(function (check) { return '<div class="fi-check" data-ok="' + (check.ok ? "true" : "false") + '"><span class="fi-dot">' + icon(check.ok ? "check" : "alert", 11) + '</span><div><div class="fi-check-name">' + esc(check.label) + '</div><div class="fi-check-detail">' + esc(check.detail) + '</div></div></div>'; }).join("") + '</div>'
+      + '<div class="fi-section"><div class="fi-section-title"><span>Package scripts</span><span class="mono">' + Object.keys(scripts).length + '</span></div><div class="fi-tree">' + (scriptRows || '<div class="tab-empty">No package scripts captured.</div>') + '</div></div>'
+      + '<div class="fi-section"><div class="fi-section-title"><span>Tree</span><span class="mono">' + tree.length + '</span></div><div class="fi-tree">' + (treeRows || '<div class="tab-empty">No tree entries captured.</div>') + '</div></div>'
+      + '<div class="fi-section"><div class="fi-section-title"><span>Previews</span><span class="mono">' + previews.length + '</span></div>' + previewRows + '</div></div>';
+  }
+  function buildFilesTab(s) {
+    var arts = laneArtifacts(s);
+    if (!arts.length) return '<div class="tab-empty">No evidence artifacts linked.</div>';
+    var selected = null;
+    for (var i = 0; i < arts.length; i += 1) {
+      if (arts[i].path === S.filePath) { selected = arts[i]; break; }
+    }
+    if (!selected) {
+      for (var j = 0; j < arts.length; j += 1) {
+        if (arts[j].kind === "filesystem") { selected = arts[j]; break; }
+      }
+    }
+    var inspector = "";
+    if (selected && selected.kind === "filesystem") {
+      ensureArtifactLoaded(selected);
+      inspector = renderSetupQualityArtifact(selected, artifactCache[selected.path]);
+    }
+    var rows = arts.map(function (a) {
+      var href = artifactHref(a);
+      var isSelected = selected && selected.path === a.path;
+      var inspectable = a.kind === "filesystem";
+      var main = inspectable
+        ? '<button data-action="inspect-file:' + esc(a.path) + '"><span class="file-ic">' + icon("file", 14) + '</span><span class="file-meta"><div class="file-name">' + esc(a.label) + '</div><div class="file-path mono">' + esc(a.path) + '</div></span><span class="file-kind">' + esc(a.kind) + '</span></button>'
+        : '<a href="' + esc(href) + '" target="_blank" rel="noopener noreferrer" data-action="external"><span class="file-ic">' + icon("file", 14) + '</span><span class="file-meta"><div class="file-name">' + esc(a.label) + '</div><div class="file-path mono">' + esc(a.path) + '</div></span><span class="file-kind">' + esc(a.kind) + '</span></a>';
+      return '<div class="file-row" data-selected="' + (isSelected ? "true" : "false") + '">' + main
+        + (href ? '<a class="file-open" href="' + esc(href) + '" target="_blank" rel="noopener noreferrer" data-action="external">open</a>' : "")
+        + '</div>';
+    }).join("");
+    return inspector + rows;
+  }
   function buildSideBody(s) {
     if (S.tab === "events") {
       var evs = laneEvents(s);
@@ -1404,13 +1699,7 @@ export function observerClientJs() {
       }).join("");
     }
     if (S.tab === "files") {
-      var arts = laneArtifacts(s);
-      if (!arts.length) return '<div class="tab-empty">No evidence artifacts linked.</div>';
-      return arts.map(function (a) {
-        return '<a class="file-row" href="../' + esc(a.path) + '"><span class="file-ic">' + icon("file", 14) + '</span>'
-          + '<span class="file-meta"><div class="file-name">' + esc(a.label) + '</div><div class="file-path mono">' + esc(a.path) + '</div></span>'
-          + '<span class="file-kind">' + esc(a.kind) + '</span></a>';
-      }).join("");
+      return buildFilesTab(s);
     }
     var lines = termLines(s);
     if (!lines.length) lines = [{ text: "No log text recorded for this lane.", cls: "dim" }];
@@ -1596,6 +1885,141 @@ export function observerClientJs() {
     menu.style.left = left + "px";
     menu.style.visibility = "visible";
   }
+  function ensureLiveStreamHost() {
+    if (liveStreamHost) return liveStreamHost;
+    if (!document.createElement) return null;
+    var host = document.body || document.documentElement;
+    if (!host || !host.appendChild) return null;
+    liveStreamHost = document.createElement("div");
+    liveStreamHost.setAttribute("data-live-stream-host", "true");
+    liveStreamHost.style.position = "fixed";
+    liveStreamHost.style.inset = "0";
+    liveStreamHost.style.overflow = "visible";
+    liveStreamHost.style.pointerEvents = "none";
+    liveStreamHost.style.zIndex = "20";
+    host.appendChild(liveStreamHost);
+    return liveStreamHost;
+  }
+  function createLiveStreamRecord(id, url, title) {
+    var host = ensureLiveStreamHost();
+    if (!host) return null;
+    var wrapper = document.createElement("div");
+    wrapper.setAttribute("data-live-stream-wrapper", id);
+    wrapper.style.position = "fixed";
+    wrapper.style.overflow = "hidden";
+    wrapper.style.background = "#000";
+    wrapper.style.pointerEvents = "none";
+    wrapper.style.display = "none";
+    var frame = document.createElement("iframe");
+    frame.style.position = "absolute";
+    frame.style.border = "0";
+    frame.style.margin = "0";
+    frame.style.display = "block";
+    frame.setAttribute("allow", "clipboard-read; clipboard-write; fullscreen");
+    frame.setAttribute("referrerpolicy", "no-referrer");
+    frame.setAttribute("title", title || "live stream");
+    frame.setAttribute("data-live-stream-frame", id);
+    frame.src = url;
+    var overlay = document.createElement("div");
+    overlay.className = "live-stream-overlay";
+    overlay.style.position = "absolute";
+    overlay.style.overflow = "hidden";
+    overlay.style.pointerEvents = "none";
+    overlay.style.zIndex = "2";
+    wrapper.appendChild(frame);
+    wrapper.appendChild(overlay);
+    host.appendChild(wrapper);
+    return { url: url, wrapper: wrapper, frame: frame, overlay: overlay, overlayHtml: "" };
+  }
+  function removeLiveStreamRecord(id) {
+    var rec = liveStreamFrames[id];
+    if (rec && rec.wrapper && rec.wrapper.parentNode) rec.wrapper.parentNode.removeChild(rec.wrapper);
+    delete liveStreamFrames[id];
+  }
+  function hideLiveStreamRecord(rec) {
+    if (!rec || !rec.wrapper) return;
+    rec.wrapper.style.display = "none";
+    rec.wrapper.style.pointerEvents = "none";
+  }
+  function clipRect(rect) {
+    var stage = app.querySelector && app.querySelector(".stage");
+    var s = stage && stage.getBoundingClientRect ? stage.getBoundingClientRect() : null;
+    var left = Math.max(rect.left, 0, s ? s.left : 0);
+    var top = Math.max(rect.top, 0, s ? s.top : 0);
+    var right = Math.min(rect.right, window.innerWidth || rect.right, s ? s.right : rect.right);
+    var bottom = Math.min(rect.bottom, window.innerHeight || rect.bottom, s ? s.bottom : rect.bottom);
+    return { left: left, top: top, right: right, bottom: bottom, width: Math.max(0, right - left), height: Math.max(0, bottom - top) };
+  }
+  function layoutLiveStreamRecord(rec, mount, overlayHtml) {
+    if (!rec || !mount || !mount.getBoundingClientRect) return hideLiveStreamRecord(rec);
+    var rect = mount.getBoundingClientRect();
+    var clipped = clipRect(rect);
+    if (rect.width < 2 || rect.height < 2 || clipped.width < 2 || clipped.height < 2) return hideLiveStreamRecord(rec);
+    rec.wrapper.style.display = "block";
+    rec.wrapper.style.left = clipped.left + "px";
+    rec.wrapper.style.top = clipped.top + "px";
+    rec.wrapper.style.width = clipped.width + "px";
+    rec.wrapper.style.height = clipped.height + "px";
+    rec.wrapper.style.pointerEvents = S.view === "focus" ? "auto" : "none";
+    rec.frame.style.left = (rect.left - clipped.left) + "px";
+    rec.frame.style.top = (rect.top - clipped.top) + "px";
+    rec.frame.style.width = rect.width + "px";
+    rec.frame.style.height = rect.height + "px";
+    rec.frame.style.pointerEvents = S.view === "focus" ? "auto" : "none";
+    if (rec.overlay) {
+      rec.overlay.style.left = rec.frame.style.left;
+      rec.overlay.style.top = rec.frame.style.top;
+      rec.overlay.style.width = rec.frame.style.width;
+      rec.overlay.style.height = rec.frame.style.height;
+      rec.overlay.setAttribute("data-focus", S.view === "focus" ? "true" : "false");
+      if (rec.overlayHtml !== overlayHtml) {
+        rec.overlay.innerHTML = overlayHtml || "";
+        rec.overlayHtml = overlayHtml || "";
+      }
+    }
+  }
+  function reconcileLiveStreams() {
+    if (!app.querySelectorAll || !document.createElement) return;
+    var known = {};
+    currentData.streams.forEach(function (s) {
+      var url = browserLiveUrl(s);
+      if (url) known[s.id] = { url: url, stream: s };
+    });
+    var mounts = app.querySelectorAll("[data-live-stream-id]");
+    var visible = {};
+    Array.prototype.forEach.call(mounts, function (mount) {
+      var id = mount.getAttribute("data-live-stream-id");
+      var url = mount.getAttribute("data-live-stream-url") || "";
+      var title = mount.getAttribute("data-live-stream-title") || "live stream";
+      if (!id || !url) return;
+      var knownStream = known[id] && known[id].stream;
+      var overlayHtml = knownStream ? browserLabDock(knownStream, browserShot(knownStream)) : "";
+      var rec = liveStreamFrames[id];
+      if (!rec || rec.url !== url) {
+        removeLiveStreamRecord(id);
+        rec = createLiveStreamRecord(id, url, title);
+        if (!rec) return;
+        liveStreamFrames[id] = rec;
+      } else {
+        rec.frame.setAttribute("title", title);
+      }
+      visible[id] = true;
+      layoutLiveStreamRecord(rec, mount, overlayHtml);
+    });
+    Object.keys(liveStreamFrames).forEach(function (id) {
+      var rec = liveStreamFrames[id];
+      if (!known[id] || (rec && rec.url !== known[id].url)) removeLiveStreamRecord(id);
+      else if (!visible[id]) hideLiveStreamRecord(rec);
+    });
+  }
+  function scheduleLiveStreamLayout() {
+    if (liveStreamLayoutRaf != null) return;
+    var raf = window.requestAnimationFrame || function (fn) { return window.setTimeout(fn, 16); };
+    liveStreamLayoutRaf = raf(function () {
+      liveStreamLayoutRaf = null;
+      reconcileLiveStreams();
+    });
+  }
 
   function render() {
     var docEl = document.documentElement;
@@ -1631,6 +2055,7 @@ export function observerClientJs() {
       if (inp) { inp.focus(); try { inp.setSelectionRange(caret, caret); } catch (e) {} }
     }
     placeMenus();
+    reconcileLiveStreams();
     var cb = document.getElementById("console-body");
     if (cb && scrolls[".console-body"] == null) cb.scrollTop = cb.scrollHeight;
   }
@@ -1689,6 +2114,7 @@ export function observerClientJs() {
         if (arg === "status") toggleArr(S.statusSel, arg2); else toggleArr(S.kindSel, arg2);
         render(); break;
       case "toggle-console": S.consoleOpen = !S.consoleOpen; render(); break;
+      case "inspect-file": S.filePath = action.slice("inspect-file:".length); S.tab = "files"; render(); break;
       case "toggle-details": S.detailsOpen = !S.detailsOpen; S.tweaksOpen = false; render(); break;
       case "toggle-tweaks": S.tweaksOpen = !S.tweaksOpen; S.detailsOpen = false; render(); break;
       case "toggle-theme": S.theme = (S.theme === "light" ? "dark" : "light"); writePref("theme", S.theme); render(); break;
@@ -1758,11 +2184,33 @@ export function observerClientJs() {
       S.focusedId = next; if (S.view !== "focus") S.view = "focus"; render();
     }
   });
-  window.addEventListener("resize", function () { if (openDd) placeMenus(); });
+  window.addEventListener("resize", function () { if (openDd) placeMenus(); scheduleLiveStreamLayout(); });
+  app.addEventListener("scroll", scheduleLiveStreamLayout, true);
 
   // ================================================================ POLLING
   function dataKey(d) {
-    return (d.generatedAt || "") + "|" + (d.streams || []).map(function (s) { return s.id + s.status + laneProgress(s); }).join(",");
+    var streams = (d.streams || []).map(function (s) {
+      return {
+        id: s.id,
+        status: s.status,
+        progress: laneProgress(s),
+        step: laneStep(s),
+        updatedAt: s.updatedAt,
+        url: browserLiveUrl(s),
+        route: laneRoute(s),
+        tail: (s.terminalPlain || (s.terminal && s.terminal.tail) || "").slice(-1200),
+        artifacts: (s.artifacts || []).map(function (a) { return [a.kind, a.path, a.label]; }),
+        completion: s.completion || null
+      };
+    });
+    var events = (d.events || []).slice(-200).map(function (e) { return [e.at, e.level, e.type, e.simId, e.streamId, e.message]; });
+    var run = d.run || {};
+    return JSON.stringify({
+      run: [run.runId, run.status, (run.lifecycle || []).length, (run.knownGaps || []).length],
+      summary: d.summary || {},
+      streams: streams,
+      events: events
+    });
   }
   function refresh() {
     if (location.protocol === "file:") return Promise.resolve();
@@ -1794,7 +2242,7 @@ export function observerClientJs() {
   render();
   refresh().then(function () {
     if (location.protocol !== "file:") {
-      refreshTimer = setInterval(refresh, 2500);
+      refreshTimer = setInterval(refresh, REFRESH_MS);
       refreshHistoryIndex();
       historyTimer = setInterval(refreshHistoryIndex, 30000);
     }