@wenathlan/extension 1.1.33 → 1.1.35

package/extension/dist/sidepanel.js

@@ -7,6 +7,15 @@ var planroot = document.querySelector("#plan");
 var auditroot = document.querySelector("#audit");
 var diagnosticroot = document.querySelector("#diagnostics");
 var maproot = document.querySelector("#map");
+var a11yroot = document.querySelector("#a11y");
+var readerroot = document.querySelector("#reader");
+var detectionsroot = document.querySelector("#detections");
+var streamroot = document.querySelector("#stream");
+var diffsroot = document.querySelector("#diffs");
+var bannersroot = document.querySelector("#banners");
+var selectorsroot = document.querySelector("#selectors");
+var trailroot = document.querySelector("#trail");
+var navigationroot = document.querySelector("#navigation");
 var statusnode = document.querySelector("#status");
 var progressnode = document.querySelector("#planprogress");
 var capabilitiestext = document.querySelector("#capabilitiestext");
@@ -39,7 +48,7 @@ function button(label, action, disabled = false) {
   element.addEventListener("click", () => action().catch((error) => status(error instanceof Error ? error.message : String(error), true)));
   return element;
 }
-var previewkinds = ["focus", "inspect", "click", "type", "scroll", "select", "hover", "clickdeep", "rightclick", "doubleclick", "drag", "drop", "upload", "clear", "check", "uncheck", "toggle", "submit", "readattribute", "readstyle", "readgeometry", "readvalue", "readtext", "readhtml", "countelements", "readtable", "highlight", "setattribute", "removeattribute", "waitfor", "shiftclick", "typetime", "appendtext", "setvalue", "typeedit", "submitsearch", "selectmulti", "chooseradio", "setslider", "setdate", "setcolor", "expanddetails", "verifyvisible", "verifyenabled", "pierceshadow", "clickpoint", "clicktext", "clickaria", "clickname", "resolvexpath"];
+var previewkinds = ["focus", "inspect", "click", "type", "scroll", "select", "hover", "clickdeep", "rightclick", "doubleclick", "drag", "drop", "upload", "clear", "check", "uncheck", "toggle", "submit", "readattribute", "readstyle", "readgeometry", "readvalue", "readtext", "readhtml", "countelements", "readtable", "highlight", "setattribute", "removeattribute", "waitfor", "shiftclick", "typetime", "appendtext", "setvalue", "typeedit", "submitsearch", "selectmulti", "chooseradio", "setslider", "setdate", "setcolor", "expanddetails", "verifyvisible", "verifyenabled", "pierceshadow", "clickpoint", "clicktext", "clickaria", "clickname", "resolvexpath", "deriveselector", "fingerprintsection"];
 var topictags = [
   { topic: "pointer", kinds: ["movepointer", "clickpoint", "shiftclick", "clicktext", "clickaria", "clickname", "pierceshadow"] },
   { topic: "typing", kinds: ["typetime", "appendtext", "setvalue", "typeedit", "submitsearch"] },
@@ -48,7 +57,11 @@ var topictags = [
   { topic: "dialogs", kinds: ["dismissdialog"] },
   { topic: "frames", kinds: ["enterframe"] },
   { topic: "retry", kinds: ["retryaction"] },
-  { topic: "reads", kinds: ["mapclicks", "verifyvisible", "verifyenabled", "resolvexpath"] }
+  { topic: "reads", kinds: ["mapclicks", "verifyvisible", "verifyenabled", "resolvexpath"] },
+  { topic: "observation", kinds: ["a11ytree", "readvisible", "readertree", "readoutline", "readselection", "readopengraph", "readlang", "detectlanguage", "listshadow", "listframes", "readscrollpos"] },
+  { topic: "detection", kinds: ["detectlists", "detecttables", "detectinfinitescroll", "detectvirtual", "detectlazy", "detectsticky", "detectscrolllock", "countpages", "classifypage", "fingerprintsection"] },
+  { topic: "watch", kinds: ["watchmutate", "watchbanner", "watchfocus", "waitquiet", "readjson", "diffsnapshots", "deriveselector"] },
+  { topic: "navigation", kinds: ["openlink", "openprivate", "reloadcache", "stopnav", "waitload", "waiturl", "followlink", "spanav", "spawait", "rewritequery", "setfragment", "navlist", "navprofile", "detecthttp", "readredirects", "readfinalurl", "handleauth", "printpdf", "prefetch", "preconnect", "deeplink", "reopentab", "trailaudit", "pausenav", "navintent", "navrate", "openclipboard", "checksafe", "batchopen"] }
 ];
 function steptopic(kind) {
   return topictags.find((tag) => tag.kinds.includes(kind))?.topic;
@@ -91,6 +104,41 @@ function retrydetail(step, retries) {
   node.textContent = `retry timeline: ${latest.attempts} attempt${latest.attempts === 1 ? "" : "s"} \xB7 ${latest.movement.toFixed(1)} px movement \xB7 ${latest.ok ? "succeeded" : "failed"}`;
   return node;
 }
+function quietdetail(step, outcomes) {
+  if (step.kind !== "waitquiet") return null;
+  const latest = [...outcomes].reverse().find((outcome) => outcome.stepid === step.id);
+  if (!latest) return null;
+  const samples = Array.isArray(latest.details?.samples) ? latest.details?.samples : [];
+  const idle = typeof latest.details?.idle === "number" ? latest.details?.idle : 0;
+  const last = samples[samples.length - 1];
+  const node = document.createElement("p");
+  node.className = "timeline";
+  node.textContent = `network quiet: ${samples.length} sample${samples.length === 1 ? "" : "s"} \xB7 quiet for ${Math.round(last?.quietfor ?? 0)} ms \xB7 idle threshold ${idle} ms \xB7 ${latest.ok ? "quiet reached" : "still busy"}`;
+  return node;
+}
+function navlistdetail(step, progress, outcomes) {
+  if (step.kind !== "navlist") return null;
+  const entries = (progress?.outcomes ?? []).filter((outcome) => outcome.stepid === step.id && outcome.details?.naventry !== void 0).map((outcome) => outcome.details?.naventry);
+  const total = entries.length > 0 ? Math.max(...entries.map((entry) => entry.index)) + 1 : 0;
+  const latestoutcome = [...outcomes].reverse().find((outcome) => outcome.stepid === step.id);
+  const remaining = typeof latestoutcome?.details?.remaining === "number" ? latestoutcome.details?.remaining : 0;
+  const current = entries[entries.length - 1];
+  const node = document.createElement("p");
+  node.className = "timeline";
+  node.textContent = entries.length === 0 ? "navigation list: no entry completed yet" : `navigation list: ${entries.filter((entry) => entry.ok).length} of ${total} entries completed \xB7 current url ${current?.url ?? ""} \xB7 ${remaining} remaining`;
+  return node;
+}
+function redirectdetail(step, outcomes) {
+  if (!["navigate", "followlink", "spanav", "navlist", "openlink", "reloadcache"].includes(step.kind)) return null;
+  const latest = [...outcomes].reverse().find((outcome) => outcome.stepid === step.id && outcome.details?.hops !== void 0);
+  if (!latest) return null;
+  const hops = typeof latest.details?.hops === "number" ? latest.details?.hops : 0;
+  const final = typeof latest.details?.finalurl === "string" ? latest.details?.finalurl : "";
+  const node = document.createElement("p");
+  node.className = "timeline";
+  node.textContent = `redirects: ${Math.max(0, hops - 1)} hop${hops - 1 === 1 ? "" : "s"} \xB7 final url ${final || "unknown"}`;
+  return node;
+}
 function renderpreview(step) {
   const preview = previews.get(step.id);
   if (!preview) return null;
@@ -116,14 +164,18 @@ function renderpreview(step) {
   }
   return node;
 }
-function stepitem(plan, step, completed, outcomes, retries) {
+function stepitem(plan, step, completed, outcomes, retries, progress) {
   const item = document.createElement("li");
   const done = completed.includes(step.id);
   item.textContent = `${done ? "\u2713" : ""} ${step.summary}${holddetail(step)}`;
   const outcome = renderoutcome(step, outcomes);
   if (outcome) item.append(outcome);
-  const timeline = step.kind === "retryaction" ? retrydetail(step, retries) : null;
+  const timeline = step.kind === "retryaction" ? retrydetail(step, retries) : quietdetail(step, outcomes);
   if (timeline) item.append(timeline);
+  const navlist = navlistdetail(step, progress, outcomes);
+  if (navlist) item.append(navlist);
+  const redirects = redirectdetail(step, outcomes);
+  if (redirects) item.append(redirects);
   const preview = renderpreview(step);
   if (preview) item.append(preview);
   const hastarget = Boolean(step.target) || options(step).targetref !== void 0;
@@ -140,7 +192,7 @@ function stepitem(plan, step, completed, outcomes, retries) {
   }));
   return item;
 }
-function steplist(plan, steps, completed, outcomes, retries, risk) {
+function steplist(plan, steps, completed, outcomes, retries, risk, progress) {
   const group = steps.filter((step) => step.risk === risk);
   if (group.length === 0) return null;
   const section = document.createElement("section");
@@ -150,7 +202,7 @@ function steplist(plan, steps, completed, outcomes, retries, risk) {
   const general = group.filter((step) => steptopic(step.kind) === void 0);
   if (general.length > 0) {
     const list = document.createElement("ol");
-    for (const step of general) list.append(stepitem(plan, step, completed, outcomes, retries));
+    for (const step of general) list.append(stepitem(plan, step, completed, outcomes, retries, progress));
     section.append(list);
   }
   for (const tag of topictags) {
@@ -160,7 +212,7 @@ function steplist(plan, steps, completed, outcomes, retries, risk) {
     row.textContent = `${tag.topic} steps`;
     section.append(row);
     const list = document.createElement("ol");
-    for (const step of tagged) list.append(stepitem(plan, step, completed, outcomes, retries));
+    for (const step of tagged) list.append(stepitem(plan, step, completed, outcomes, retries, progress));
     section.append(list);
   }
   return section;
@@ -178,9 +230,9 @@ function renderplan(plan, progress, outcomes = [], retries = []) {
   planroot.append(title);
   const completed = progress?.planid === plan.id ? progress.completedsteps : [];
   renderprogress(plan, completed);
-  const sensitive = steplist(plan, plan.steps, completed, outcomes, retries, "sensitive");
-  const interaction = steplist(plan, plan.steps, completed, outcomes, retries, "interaction");
-  const read = steplist(plan, plan.steps, completed, outcomes, retries, "read");
+  const sensitive = steplist(plan, plan.steps, completed, outcomes, retries, "sensitive", progress);
+  const interaction = steplist(plan, plan.steps, completed, outcomes, retries, "interaction", progress);
+  const read = steplist(plan, plan.steps, completed, outcomes, retries, "read", progress);
   for (const group of [sensitive, interaction, read]) if (group) planroot.append(group);
   if (plan.state === "pending") {
     planroot.append(button("Approve reviewed plan", async () => {
@@ -219,6 +271,314 @@ function rendermap(map) {
     maproot.append(item);
   }
 }
+function rendera11y(capture) {
+  if (!a11yroot) return;
+  a11yroot.replaceChildren();
+  if (!capture) {
+    a11yroot.textContent = "Run an a11ytree step to capture the accessibility tree beside the dom snapshot.";
+    return;
+  }
+  const lines = [];
+  const walk = (node, depth) => {
+    if (lines.length >= 80) return;
+    const states = node.states.length > 0 ? ` [${node.states.join(", ")}]` : "";
+    const value = node.value !== void 0 ? ` = ${node.value}` : "";
+    lines.push(`${"\xB7 ".repeat(depth)}${node.role}: ${node.name || "(unnamed)"}${states}${value}`);
+    for (const child of node.children) walk(child, depth + 1);
+  };
+  walk(capture.tree, 0);
+  const payload = document.createElement("pre");
+  payload.textContent = lines.join("\n");
+  a11yroot.append(payload);
+}
+function renderreader(capture) {
+  if (!readerroot) return;
+  readerroot.replaceChildren();
+  if (!capture) {
+    readerroot.textContent = "Run a readertree step to extract the reader view.";
+    return;
+  }
+  const title = document.createElement("p");
+  title.textContent = `${capture.article.title || "Untitled"}${capture.article.byline ? ` \xB7 ${capture.article.byline}` : ""} \xB7 ${capture.article.words} words \xB7 ${capture.article.blocks.length} blocks`;
+  readerroot.append(title);
+  for (const block of capture.article.blocks.slice(0, 40)) {
+    const line = document.createElement("p");
+    line.className = /^h\d$/.test(block.kind) ? "readerblock heading" : "readerblock";
+    line.textContent = `${block.kind}: ${block.text.slice(0, 200)}`;
+    readerroot.append(line);
+  }
+}
+function renderdetections(plan, outcomes) {
+  if (!detectionsroot) return;
+  detectionsroot.replaceChildren();
+  if (!plan) {
+    detectionsroot.textContent = "Detection steps list their detected lists, tables and pagination shapes here as suggestions.";
+    return;
+  }
+  const kindof = (stepid) => plan.steps.find((step) => step.id === stepid)?.kind;
+  const latest = (kind) => [...outcomes].reverse().find((outcome) => outcome.ok && kindof(outcome.stepid) === kind);
+  let shown = 0;
+  const listoutcome = latest("detectlists");
+  const lists = Array.isArray(listoutcome?.details?.lists) ? listoutcome?.details?.lists : [];
+  for (const pattern of lists.slice(0, 6)) {
+    const item = document.createElement("li");
+    const pick = document.createElement("button");
+    pick.type = "button";
+    pick.textContent = `list of ${pattern.repeat} items \xB7 ${pattern.itemselector}`;
+    pick.addEventListener("click", () => pickhint(`target hint: ${pattern.itemselector} (repeated list item of ${pattern.container})`));
+    item.append(pick);
+    detectionsroot.append(item);
+    shown += 1;
+  }
+  const tableoutcome = latest("detecttables");
+  const tables = Array.isArray(tableoutcome?.details?.tables) ? tableoutcome?.details?.tables : [];
+  for (const table of tables.slice(0, 6)) {
+    const item = document.createElement("li");
+    const pick = document.createElement("button");
+    pick.type = "button";
+    pick.textContent = `table of ${table.rows} rows \xB7 ${table.columns.length} columns \xB7 ${table.selector}`;
+    pick.addEventListener("click", () => pickhint(`target hint: ${table.selector} (detected data table)`));
+    item.append(pick);
+    detectionsroot.append(item);
+    shown += 1;
+  }
+  const paginationoutcome = latest("countpages");
+  if (paginationoutcome) {
+    const item = document.createElement("li");
+    const current = typeof paginationoutcome.details?.current === "number" ? paginationoutcome.details?.current : 0;
+    const total = typeof paginationoutcome.details?.total === "number" ? paginationoutcome.details?.total : 0;
+    const text = document.createElement("span");
+    text.textContent = `pagination: current page ${current} \xB7 estimated total ${total}`;
+    item.append(text);
+    detectionsroot.append(item);
+    shown += 1;
+  }
+  if (shown === 0) detectionsroot.textContent = "Detected lists, tables and pagination shapes appear here as plan suggestions.";
+}
+function renderstream(mutationevents, focusevents) {
+  if (!streamroot) return;
+  streamroot.replaceChildren();
+  if (mutationevents.length === 0 && focusevents.length === 0) {
+    streamroot.textContent = "Watched steps stream their mutation and focus events here.";
+    return;
+  }
+  for (const event of mutationevents.slice(0, 6)) {
+    const item = document.createElement("li");
+    item.textContent = `${new Date(event.at).toLocaleTimeString()} \xB7 mutation ${event.event} \xB7 ${event.targetpath}`;
+    streamroot.append(item);
+  }
+  for (const event of focusevents.slice(0, 6)) {
+    const item = document.createElement("li");
+    item.textContent = `${new Date(event.at).toLocaleTimeString()} \xB7 focus ${event.kind} \xB7 ${event.targetpath}`;
+    streamroot.append(item);
+  }
+}
+function renderdiffs(diffs) {
+  if (!diffsroot) return;
+  diffsroot.replaceChildren();
+  const latest = diffs[0];
+  if (!latest) {
+    diffsroot.textContent = "Diff two captured observation versions with a diffsnapshots step.";
+    return;
+  }
+  const heading = document.createElement("p");
+  heading.textContent = `version ${latest.baseversion} \u2192 ${latest.targetversion}: ${latest.added.length} added \xB7 ${latest.removed.length} removed \xB7 ${latest.changed.length} changed`;
+  diffsroot.append(heading);
+  const list = document.createElement("ul");
+  for (const entry of [...latest.added, ...latest.removed, ...latest.changed].slice(0, 12)) {
+    const item = document.createElement("li");
+    item.className = `diffrow ${entry.kind}`;
+    item.textContent = `${entry.kind} \xB7 ${entry.selector} \xB7 ${entry.summary}`;
+    list.append(item);
+  }
+  diffsroot.append(list);
+}
+function renderbanners(banners) {
+  if (!bannersroot) return;
+  bannersroot.replaceChildren();
+  if (banners.length === 0) {
+    bannersroot.textContent = "No consent banner has been observed yet.";
+    return;
+  }
+  for (const banner of banners.slice(0, 3)) {
+    const card = document.createElement("div");
+    card.className = "bannercard";
+    const title = document.createElement("p");
+    title.textContent = `${banner.kind} banner detected \u2014 review it before any interaction.`;
+    const text = document.createElement("p");
+    text.textContent = banner.text.slice(0, 160) || "(no banner text)";
+    const controls = document.createElement("p");
+    controls.textContent = `controls: ${banner.controls.length > 0 ? banner.controls.join(", ") : "none"}`;
+    card.append(title, text, controls);
+    bannersroot.append(card);
+  }
+}
+function renderselectors(selectors) {
+  if (!selectorsroot) return;
+  selectorsroot.replaceChildren();
+  if (selectors.length === 0) {
+    selectorsroot.textContent = "Run a deriveselector step to rank stable selectors.";
+    return;
+  }
+  for (const record of selectors.slice(0, 8)) {
+    const item = document.createElement("li");
+    const pick = document.createElement("button");
+    pick.type = "button";
+    pick.textContent = `${record.selector} (${record.strategy} \xB7 stability ${record.score})`;
+    pick.addEventListener("click", () => pickhint(`target hint: ${record.selector} (derived ${record.strategy} selector)`));
+    item.append(pick);
+    selectorsroot.append(item);
+  }
+}
+function rendertrail(trail) {
+  if (!trailroot) return;
+  trailroot.replaceChildren();
+  if (trail.length === 0) {
+    trailroot.textContent = "No page has been visited inside a reviewed navigation step yet.";
+    return;
+  }
+  for (const entry of [...trail].reverse().slice(0, 12)) {
+    const item = document.createElement("li");
+    item.textContent = `${new Date(entry.at).toLocaleTimeString()} \xB7 ${entry.url}${entry.title ? ` \xB7 ${entry.title}` : ""}${entry.stepid ? ` \xB7 step ${entry.stepid}` : ""}`;
+    trailroot.append(item);
+  }
+}
+function rendernavigation(context) {
+  if (!navigationroot) return;
+  navigationroot.replaceChildren();
+  const paused = document.createElement("p");
+  if (context.navcontrol?.pausedat) {
+    paused.className = "bannercard";
+    paused.textContent = `Navigation is paused while ${context.navcontrol.reason ?? "a consent prompt is open"}; reviewed navigation steps are blocked until it resumes.`;
+  } else {
+    paused.textContent = "Navigation is live; no consent prompt holds it.";
+  }
+  navigationroot.append(paused);
+  const rates = context.ratestates ?? [];
+  if (rates.length > 0) {
+    const heading = document.createElement("p");
+    heading.textContent = "rate limit windows per domain:";
+    navigationroot.append(heading);
+    const list = document.createElement("ul");
+    for (const state of rates.slice(0, 6)) {
+      const item = document.createElement("li");
+      item.textContent = `${state.domain}: ${state.count} of ${state.limit.ceiling} navigations inside the reviewed window of ${state.limit.window} ms`;
+      list.append(item);
+    }
+    navigationroot.append(list);
+  }
+  const records = context.navrecords ?? [];
+  const record = records[0];
+  if (record) {
+    const chain = document.createElement("p");
+    chain.textContent = `latest navigation: ${Math.max(0, record.chain.hops.length - 1)} redirect${record.chain.hops.length - 1 === 1 ? "" : "s"} \xB7 final url ${record.finalurl}`;
+    navigationroot.append(chain);
+    const hops = document.createElement("ul");
+    for (const hop of record.chain.hops.slice(0, 6)) {
+      const item = document.createElement("li");
+      let path = hop.url;
+      try {
+        path = new URL(hop.url).pathname;
+      } catch {
+        path = hop.url;
+      }
+      item.textContent = `hop ${path} \xB7 status ${hop.status} \xB7 ${new Date(hop.at).toLocaleTimeString()}`;
+      hops.append(item);
+    }
+    navigationroot.append(hops);
+  }
+  const curatedlists = context.curated ?? [];
+  if (curatedlists.length > 0) {
+    const heading = document.createElement("p");
+    heading.textContent = "curated link lists with per url safety states:";
+    navigationroot.append(heading);
+    for (const list of curatedlists.slice(0, 3)) {
+      const card = document.createElement("div");
+      card.className = "bannercard";
+      const title = document.createElement("p");
+      title.textContent = `${list.links.length} curated url${list.links.length === 1 ? "" : "s"}${list.reviewedat ? " \xB7 opened after review" : " \xB7 waiting for review"}`;
+      card.append(title);
+      for (const link of list.links.slice(0, 8)) {
+        const line = document.createElement("p");
+        line.textContent = `${link.verdict === "safe" ? "\u2713" : "\u2717"} ${link.url}${link.reasons.length > 0 ? ` \xB7 ${link.reasons.join("; ")}` : ""}`;
+        card.append(line);
+      }
+      navigationroot.append(card);
+    }
+  }
+  const safeties = context.safeties ?? [];
+  const runner = document.createElement("p");
+  const checkinput = document.createElement("input");
+  checkinput.type = "url";
+  checkinput.placeholder = "https://external.example/link";
+  checkinput.setAttribute("aria-label", "url to verify with checksafe");
+  const checkbutton = button("Run checksafe", async () => {
+    const verdict = await request({ kind: "checksafe", url: checkinput.value });
+    status(verdict.safe ? `${verdict.url} passed every safety check.` : `${verdict.url} is unsafe: ${verdict.reasons.join("; ")}.`);
+    await refresh();
+  });
+  runner.append(checkinput, " ", checkbutton);
+  navigationroot.append(runner);
+  if (safeties.length > 0) {
+    const list = document.createElement("ul");
+    for (const verdict of safeties.slice(0, 6)) {
+      const item = document.createElement("li");
+      item.textContent = `${verdict.safe ? "safe" : "unsafe"} \xB7 ${verdict.url}${verdict.reasons.length > 0 ? ` \xB7 ${verdict.reasons.join("; ")}` : ""}`;
+      list.append(item);
+    }
+    navigationroot.append(list);
+  }
+  const active = context.session && !context.session.stoppedat && context.session.expiresat > Date.now();
+  const authcard = document.createElement("div");
+  authcard.className = "bannercard";
+  const authtitle = document.createElement("p");
+  authtitle.textContent = active ? "basic auth credentials (stored only after your explicit review):" : "basic auth credentials need an active session before they can be reviewed.";
+  authcard.append(authtitle);
+  if (active) {
+    const origininput = document.createElement("input");
+    origininput.type = "url";
+    origininput.placeholder = context.session?.origin ?? "https://example.com";
+    origininput.setAttribute("aria-label", "auth origin");
+    const userinput = document.createElement("input");
+    userinput.type = "text";
+    userinput.placeholder = "username";
+    userinput.setAttribute("aria-label", "auth username");
+    const passinput = document.createElement("input");
+    passinput.type = "password";
+    passinput.placeholder = "password";
+    passinput.setAttribute("aria-label", "auth password");
+    const storebutton = button("Store reviewed credentials", async () => {
+      const stored = await request({ kind: "storeauth", origin: origininput.value, username: userinput.value, password: passinput.value });
+      status(`Reviewed basic auth credentials stored for ${stored.origin}.`);
+      await refresh();
+    });
+    authcard.append(origininput, " ", userinput, " ", passinput, " ", storebutton);
+  }
+  navigationroot.append(authcard);
+  const auths = context.auths ?? [];
+  if (auths.length > 0) {
+    const list = document.createElement("ul");
+    for (const record2 of auths.slice(0, 4)) {
+      const item = document.createElement("li");
+      item.textContent = `basic auth for ${record2.origin} as ${record2.username}, reviewed ${new Date(record2.reviewedat).toLocaleString()}`;
+      list.append(item);
+    }
+    navigationroot.append(list);
+  }
+  const artifacts = context.artifacts ?? [];
+  if (artifacts.length > 0) {
+    const heading = document.createElement("p");
+    heading.textContent = "task artifacts:";
+    navigationroot.append(heading);
+    const list = document.createElement("ul");
+    for (const artifact of artifacts.slice(0, 6)) {
+      const item = document.createElement("li");
+      item.textContent = `${artifact.kind}: ${artifact.name} \xB7 step ${artifact.stepid}`;
+      list.append(item);
+    }
+    navigationroot.append(list);
+  }
+}
 function rendercapabilities(report) {
   if (!capabilitiestext) return;
   if (!report) {
@@ -255,6 +615,15 @@ async function refresh() {
   renderplan(context.plan, context.progress, context.outcomes ?? [], context.retries ?? []);
   renderdiagnostic(context.diagnostic);
   rendermap(context.map);
+  rendera11y(context.a11y);
+  renderreader(context.reader);
+  renderdetections(context.plan, context.outcomes ?? []);
+  renderstream(context.mutationevents ?? [], context.focusevents ?? []);
+  renderdiffs(context.diffs ?? []);
+  renderbanners(context.banners ?? []);
+  renderselectors(context.selectors ?? []);
+  rendertrail(context.trail?.trail ?? []);
+  rendernavigation(context);
   renderaudit(context.audit);
   rendercapabilities(context.capabilities);
   if (context.session?.pausedat) status("Session paused. Reviewed actions are blocked until resume.");