@wenathlan/extension 1.1.34 → 1.1.36

package/extension/dist/sidepanel.js

@@ -1,3 +1,22 @@
+// policy.ts
+var sensitiveactions = /* @__PURE__ */ new Set(["click", "type", "navigate", "select", "presskey", "drag", "drop", "upload", "clear", "check", "uncheck", "toggle", "submit", "reload", "back", "forward", "writestorage", "setattribute", "removeattribute", "evaluate", "tabcreate", "tabactivate", "tabclose", "tabreload", "windowcreate", "windowclose", "windowresize", "downloadfile", "clickpoint", "shiftclick", "dismissdialog", "enterframe", "typetime", "appendtext", "setvalue", "typeedit", "keyhold", "keyrelease", "submitsearch", "selectmulti", "chooseradio", "setslider", "setdate", "setcolor", "openlink", "openprivate", "reloadcache", "stopnav", "followlink", "spanav", "rewritequery", "setfragment", "navlist", "navprofile", "handleauth", "printpdf", "prefetch", "preconnect", "deeplink", "reopentab", "pausenav", "navrate", "openclipboard", "batchopen", "duplicatetab", "closepattern", "pintab", "mutetab", "movetab", "movetabwindow", "grouptabs", "colorgroup", "collapsegroup", "discardtab", "reloadtabs", "zoomin", "zoomout", "switchtab", "maximizewindow", "minimizewindow", "restorewindow", "focuswindow", "scratchwindow", "incognitowindow", "restoretab", "restorelayout", "reopenrun", "badgetab"]);
+var interactionactions = /* @__PURE__ */ new Set(["focus", "scroll", "hover", "clickdeep", "rightclick", "doubleclick", "scrollpage", "scrollby", "scrollend", "scrolltop", "fullscreen", "zoomset", "movepointer", "clicktext", "clickaria", "clickname", "expanddetails", "pierceshadow", "retryaction"]);
+var readactions = /* @__PURE__ */ new Set(["observe", "inspect", "extract", "wait", "waitfor", "waittext", "readattribute", "readstyle", "readgeometry", "readvalue", "readtext", "readhtml", "countelements", "readtable", "readlinks", "readimages", "readmeta", "readforms", "readstorage", "highlight", "tablist", "windowlist", "tabsnapshot", "mapclicks", "verifyvisible", "verifyenabled", "resolvexpath", "a11ytree", "readvisible", "readertree", "detectlists", "detecttables", "readjson", "watchmutate", "waitquiet", "watchbanner", "detectinfinitescroll", "detectvirtual", "detectlazy", "readscrollpos", "readlang", "readoutline", "countpages", "listshadow", "listframes", "classifypage", "fingerprintsection", "diffsnapshots", "readselection", "watchfocus", "detectsticky", "detectscrolllock", "readopengraph", "detectlanguage", "deriveselector", "waitload", "waiturl", "spawait", "detecthttp", "readredirects", "readfinalurl", "trailaudit", "navintent", "checksafe", "querytabs", "watchtab", "findclones", "searchtabs", "listaudio", "snapshotsession", "savelayout", "attachmeta"]);
+var allowedactions = /* @__PURE__ */ new Set([...sensitiveactions, ...interactionactions, ...readactions]);
+
+// extension/tabscommand.ts
+function switcherlist(tabs, recency, filter) {
+  const needle = filter.trim().toLowerCase();
+  const matches = needle ? tabs.filter((tab) => tab.title.toLowerCase().includes(needle) || tab.url.toLowerCase().includes(needle)) : [...tabs];
+  const lastrun = new Map(recency.map((entry) => [entry.tabid, entry.at]));
+  return [...matches].sort((left, right) => {
+    const leftat = lastrun.get(left.tabid) ?? -1;
+    const rightat = lastrun.get(right.tabid) ?? -1;
+    if (leftat !== rightat) return rightat - leftat;
+    return left.index - right.index;
+  });
+}
+
 // extension/sidepanel.ts
 var objective = document.querySelector("#objective");
 var localbutton = document.querySelector("#localplan");
@@ -14,6 +33,9 @@ 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 tabswindowsroot = document.querySelector("#tabswindows");
 var statusnode = document.querySelector("#status");
 var progressnode = document.querySelector("#planprogress");
 var capabilitiestext = document.querySelector("#capabilitiestext");
@@ -58,7 +80,9 @@ var topictags = [
   { 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: "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"] },
+  { topic: "tabs", kinds: ["querytabs", "duplicatetab", "closepattern", "pintab", "mutetab", "movetab", "movetabwindow", "grouptabs", "colorgroup", "collapsegroup", "discardtab", "reloadtabs", "zoomin", "zoomout", "watchtab", "switchtab", "maximizewindow", "minimizewindow", "restorewindow", "focuswindow", "scratchwindow", "incognitowindow", "restoretab", "savelayout", "restorelayout", "findclones", "searchtabs", "badgetab", "attachmeta", "listaudio", "reopenrun", "snapshotsession"] }
 ];
 function steptopic(kind) {
   return topictags.find((tag) => tag.kinds.includes(kind))?.topic;
@@ -113,6 +137,29 @@ function quietdetail(step, outcomes) {
   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;
@@ -138,7 +185,7 @@ 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)}`;
@@ -146,6 +193,10 @@ function stepitem(plan, step, completed, outcomes, retries) {
   if (outcome) item.append(outcome);
   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;
@@ -162,7 +213,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");
@@ -172,7 +223,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) {
@@ -182,7 +233,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;
@@ -200,9 +251,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 () => {
@@ -400,6 +451,340 @@ function renderselectors(selectors) {
     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 rendertabswindows(context) {
+  if (!tabswindowsroot) return;
+  tabswindowsroot.replaceChildren();
+  const tabs = context.tabs ?? [];
+  const badges = context.badges ?? [];
+  const metas = context.tabmetas ?? [];
+  const active = context.session && !context.session.stoppedat && context.session.expiresat > Date.now();
+  const gauge = context.tasktabgauge ?? { used: 0, ceiling: void 0, over: false };
+  const budget = document.createElement("p");
+  budget.className = gauge.over ? "bannercard" : "";
+  budget.textContent = `task tab budget: ${gauge.used} tab${gauge.used === 1 ? "" : "s"} with active tasks${gauge.ceiling !== void 0 ? ` of the user configured ceiling ${gauge.ceiling}` : " with no user ceiling configured"}${gauge.over ? " \u2014 over the reviewed budget" : ""}`;
+  tabswindowsroot.append(budget);
+  const ceilinginput = document.createElement("input");
+  ceilinginput.type = "number";
+  ceilinginput.min = "0";
+  ceilinginput.placeholder = gauge.ceiling !== void 0 ? String(gauge.ceiling) : "no ceiling";
+  ceilinginput.setAttribute("aria-label", "concurrent task tab ceiling");
+  const ceilingbutton = button("Save task tab ceiling", async () => {
+    await request({ kind: "settasktabceiling", ceiling: ceilinginput.value === "" ? void 0 : Number(ceilinginput.value) });
+    status(`Task tab ceiling saved as ${ceilinginput.value === "" ? "no ceiling" : ceilinginput.value}; the value stays a user choice.`);
+    await refresh();
+  });
+  tabswindowsroot.append(ceilinginput, " ", ceilingbutton);
+  const switcherheading = document.createElement("p");
+  switcherheading.textContent = "quick switcher (ordered by recency, filter by title or url):";
+  tabswindowsroot.append(switcherheading);
+  const filterinput = document.createElement("input");
+  filterinput.type = "search";
+  filterinput.placeholder = "filter open tabs";
+  filterinput.setAttribute("aria-label", "quick switcher filter");
+  const switchlist = document.createElement("ul");
+  const renderswitchlist = () => {
+    switchlist.replaceChildren();
+    const ordered = switcherlist(tabs, [], filterinput.value).slice(0, 10);
+    for (const tab of ordered) {
+      const item = document.createElement("li");
+      const jump = document.createElement("button");
+      jump.type = "button";
+      const badge = badges.find((entry) => entry.tabid === tab.tabid);
+      const meta = metas.find((entry) => entry.tabid === tab.tabid);
+      jump.textContent = `${tab.title || tab.url}${tab.pinned ? " \u{1F4CC}" : ""}${tab.audible || tab.muted ? ` ${tab.muted ? "\u{1F507}" : "\u{1F50A}"}` : ""}${badge ? ` [${badge.label}]` : ""}${meta && meta.labels.length > 0 ? ` (${meta.labels.join(", ")})` : ""}`;
+      jump.addEventListener("click", () => request({ kind: "jumptotab", tabid: tab.tabid }).then(() => status(`Jumped to tab ${tab.tabid}.`)).catch((error) => status(error instanceof Error ? error.message : String(error), true)));
+      item.append(jump);
+      switchlist.append(item);
+    }
+    if (ordered.length === 0) {
+      const empty = document.createElement("li");
+      empty.textContent = "no open tab matches the filter";
+      switchlist.append(empty);
+    }
+  };
+  filterinput.addEventListener("input", renderswitchlist);
+  tabswindowsroot.append(filterinput, switchlist);
+  renderswitchlist();
+  const searchinput = document.createElement("input");
+  searchinput.type = "search";
+  searchinput.placeholder = "search across open tabs by title and url";
+  searchinput.setAttribute("aria-label", "searchtabs text");
+  const searchresults = document.createElement("ul");
+  const searchbutton = button("Run searchtabs", async () => {
+    const result = await request({ kind: "tabsearch", text: searchinput.value });
+    searchresults.replaceChildren();
+    for (const tab of result.matches.slice(0, 10)) {
+      const item = document.createElement("li");
+      const jump = document.createElement("button");
+      jump.type = "button";
+      jump.textContent = `${tab.title || tab.url} \xB7 ${tab.url}`;
+      jump.addEventListener("click", () => request({ kind: "jumptotab", tabid: tab.tabid }).then(() => status(`Jumped to tab ${tab.tabid}.`)).catch((error) => status(error instanceof Error ? error.message : String(error), true)));
+      item.append(jump);
+      searchresults.append(item);
+    }
+    status(`searchtabs matched ${result.matches.length} open tab${result.matches.length === 1 ? "" : "s"}.`);
+  });
+  tabswindowsroot.append(searchinput, " ", searchbutton, searchresults);
+  const clones = context.clones ?? [];
+  for (const clone of clones.slice(0, 3)) {
+    const warning = document.createElement("p");
+    warning.className = "bannercard";
+    warning.textContent = `duplicate tab warning: ${clone.tabids.length} open tabs share the url ${clone.url} (tabs ${clone.tabids.join(", ")})`;
+    tabswindowsroot.append(warning);
+  }
+  const groups = context.tabgroups ?? [];
+  if (groups.length > 0) {
+    const groupsheading = document.createElement("p");
+    groupsheading.textContent = "tab groups with colors and collapse states:";
+    tabswindowsroot.append(groupsheading);
+    const grouplist = document.createElement("ul");
+    for (const group of groups.slice(0, 6)) {
+      const item = document.createElement("li");
+      item.textContent = `${group.name} \xB7 ${group.color} \xB7 ${group.collapsed ? "collapsed" : "expanded"} \xB7 ${group.tabids.length} member tab${group.tabids.length === 1 ? "" : "s"}`;
+      grouplist.append(item);
+    }
+    tabswindowsroot.append(grouplist);
+  }
+  const windows = context.windows ?? [];
+  if (windows.length > 0) {
+    const windowsheading = document.createElement("p");
+    windowsheading.textContent = "windows with layouts and bounds:";
+    tabswindowsroot.append(windowsheading);
+    const windowlist = document.createElement("ul");
+    for (const item of windows.slice(0, 6)) {
+      const entry = document.createElement("li");
+      entry.textContent = `window ${item.windowid} \xB7 ${item.state} \xB7 bounds ${item.left}\xD7${item.top} ${item.width}\xD7${item.height}${item.incognito ? " \xB7 incognito, grants not inherited" : ""}${item.focused ? " \xB7 focused" : ""}`;
+      const closebutton = button("Close window", async () => {
+        const tasktabids = context.progress?.tasktabs ?? [];
+        const tabsoftask = (context.tabs ?? []).filter((tab) => tab.windowid === item.windowid && tasktabids.includes(tab.tabid));
+        const reviewed = tabsoftask.length > 1 ? window.confirm(`This window holds ${tabsoftask.length} task tabs. Close it anyway under explicit review?`) : true;
+        await request({ kind: "closewindow", windowid: item.windowid, reviewed });
+        status(`Closed window ${item.windowid}.`);
+        await refresh();
+      });
+      entry.append(" ", closebutton);
+      windowlist.append(entry);
+    }
+    tabswindowsroot.append(windowlist);
+  }
+  const layoutcontrols = document.createElement("p");
+  const layoutname = document.createElement("input");
+  layoutname.type = "text";
+  layoutname.placeholder = "layout name";
+  layoutname.setAttribute("aria-label", "layout name");
+  const savebutton = button("Save layout", async () => {
+    if (!active) {
+      status("Layout save stays inside an active session.", true);
+      return;
+    }
+    await request({ kind: "savelayout", name: layoutname.value });
+    status(`Saved the tab layout ${layoutname.value}.`);
+    await refresh();
+  });
+  const restorebutton = button("Restore layout", async () => {
+    if (!active) {
+      status("Layout restore stays inside an active session.", true);
+      return;
+    }
+    const result = await request({ kind: "restorelayout", name: layoutname.value });
+    status(`Restored the tab layout ${layoutname.value}: ${result.reopened} tab${result.reopened === 1 ? "" : "s"} reopened.`);
+    await refresh();
+  });
+  layoutcontrols.append(layoutname, " ", savebutton, " ", restorebutton);
+  tabswindowsroot.append(layoutcontrols);
+  const layouts = context.layouts ?? [];
+  if (layouts.length > 0) {
+    const layoutlist = document.createElement("ul");
+    for (const layout of layouts.slice(0, 4)) {
+      const item = document.createElement("li");
+      item.textContent = `${layout.name} \xB7 ${layout.tabs.length} tab${layout.tabs.length === 1 ? "" : "s"} \xB7 ${layout.groups.length} group${layout.groups.length === 1 ? "" : "s"} \xB7 ${layout.windows.length} window bound${layout.windows.length === 1 ? "" : "s"} \xB7 saved ${new Date(layout.savedat).toLocaleString()}`;
+      layoutlist.append(item);
+    }
+    tabswindowsroot.append(layoutlist);
+  }
+  const snapshots = context.snapshots ?? [];
+  if (snapshots.length > 0) {
+    const snapcard = document.createElement("div");
+    snapcard.className = "bannercard";
+    const snaptitle = document.createElement("p");
+    snaptitle.textContent = `session snapshot card: ${snapshots.length} snapshot${snapshots.length === 1 ? "" : "s"} stored`;
+    snapcard.append(snaptitle);
+    for (const snapshot of snapshots.slice(0, 3)) {
+      const row = document.createElement("p");
+      row.textContent = `${snapshot.layout.tabs.length} tabs \xB7 captured ${new Date(snapshot.capturedat).toLocaleString()}`;
+      const restore = button("Restore snapshot", async () => {
+        const result = await request({ kind: "restoresnapshot", id: snapshot.id });
+        status(`Restored the session snapshot: ${result.reopened} tab${result.reopened === 1 ? "" : "s"} reopened.`);
+        await refresh();
+      });
+      row.append(" ", restore);
+      snapcard.append(row);
+    }
+    tabswindowsroot.append(snapcard);
+  }
+  const controlcard = document.createElement("div");
+  controlcard.className = "bannercard";
+  const controlstate = context.controltab;
+  const completed = context.progress?.completedsteps.length ?? 0;
+  const total = context.plan?.steps.length ?? 0;
+  controlcard.textContent = `pinned control tab feed: ${controlstate?.enabled ? `open as tab ${controlstate.tabid} with the live task status ${completed} of ${total} reviewed steps executed` : "disabled"}${context.plan ? ` \xB7 ${context.plan.state}` : " \xB7 no plan"}`;
+  const controlbutton = button(controlstate?.enabled ? "Close pinned control tab" : "Open pinned control tab", async () => {
+    await request({ kind: "controltab", enabled: !controlstate?.enabled });
+    status(controlstate?.enabled ? "The pinned control tab was closed." : "The pinned control tab was opened with the live task feed.");
+    await refresh();
+  });
+  controlcard.append(" ", controlbutton);
+  tabswindowsroot.append(controlcard);
+}
 function rendercapabilities(report) {
   if (!capabilitiestext) return;
   if (!report) {
@@ -443,6 +828,9 @@ async function refresh() {
   renderdiffs(context.diffs ?? []);
   renderbanners(context.banners ?? []);
   renderselectors(context.selectors ?? []);
+  rendertrail(context.trail?.trail ?? []);
+  rendernavigation(context);
+  rendertabswindows(context);
   renderaudit(context.audit);
   rendercapabilities(context.capabilities);
   if (context.session?.pausedat) status("Session paused. Reviewed actions are blocked until resume.");