@guidelytech/guide-runtime 0.5.0 → 0.6.2

package/dist/messenger.js

@@ -1,7 +1,104 @@
 import {
   createHelpView,
-  el
-} from "./chunk-SGFC66YD.js";
+  el,
+  listItem
+} from "./chunk-4FKYF6OB.js";
+import "./chunk-7DOGZKWD.js";
+
+// src/messenger.ts
+import { foldPathIds, pageLabel } from "@guidelytech/shared/runtime";
+
+// src/howto-view.ts
+var pct = (v) => `${(v * 100).toFixed(3)}%`;
+var place = (node, r) => Object.assign(node.style, {
+  left: pct(r.x),
+  top: pct(r.y),
+  width: pct(r.width),
+  height: pct(r.height)
+});
+function paragraphs(doc, text, cls) {
+  const parts = text.split(/\n{2,}/).map((p) => p.trim()).filter(Boolean);
+  if (!parts.length) return null;
+  const wrap = el(doc, "div", cls);
+  for (const p of parts) wrap.appendChild(el(doc, "p", "", p));
+  return wrap;
+}
+function screenshot(doc, image, alt) {
+  if (!/^https?:\/\//i.test(image.url)) return null;
+  const frame = el(doc, "div", "g-howto-shot");
+  const img = (cls) => {
+    const i = el(doc, "img", cls);
+    i.src = image.url;
+    i.alt = alt;
+    i.loading = "lazy";
+    i.decoding = "async";
+    return i;
+  };
+  const crop = image.crop;
+  if (crop && crop.width > 0 && crop.height > 0) {
+    const ghost = img("g-howto-ghost");
+    ghost.alt = "";
+    ghost.setAttribute("aria-hidden", "true");
+    const zoomed = img("g-howto-zoomed");
+    Object.assign(zoomed.style, {
+      width: pct(1 / crop.width),
+      left: pct(-crop.x / crop.width),
+      top: pct(-crop.y / crop.height)
+    });
+    frame.append(ghost, zoomed);
+  } else frame.appendChild(img(""));
+  if (image.highlight) {
+    const mark = el(doc, "div", "g-howto-mark");
+    mark.setAttribute("aria-hidden", "true");
+    place(mark, image.highlight);
+    frame.appendChild(mark);
+  }
+  return frame;
+}
+function renderHowTo(doc, howTo, onShowMe) {
+  const wrap = el(doc, "div", "g-howto");
+  wrap.appendChild(el(doc, "h3", "g-title", howTo.title));
+  const description = paragraphs(doc, howTo.description, "g-howto-desc");
+  if (description) wrap.appendChild(description);
+  const guideKey = howTo.guideKey;
+  if (guideKey && onShowMe) {
+    const show = el(doc, "button", "g-btn g-btn-primary g-howto-show", "\u25B6 Show me in the app");
+    show.type = "button";
+    show.addEventListener("click", () => onShowMe(guideKey));
+    wrap.appendChild(show);
+  }
+  const list = el(doc, "ol", "g-howto-steps");
+  let n = 0;
+  for (const s of howTo.steps) {
+    const li = el(doc, "li", `g-howto-step g-howto-${s.kind}`);
+    if (s.kind === "heading") li.appendChild(el(doc, "h4", "", s.title));
+    else if (s.kind === "tip" || s.kind === "alert") {
+      li.appendChild(el(doc, "strong", "", s.title || (s.kind === "tip" ? "Tip" : "Important")));
+      const body = paragraphs(doc, s.body, "");
+      if (body) li.appendChild(body);
+    } else if (s.kind === "text") {
+      if (s.title) li.appendChild(el(doc, "strong", "", s.title));
+      const body = paragraphs(doc, s.body, "g-howto-note");
+      if (body) li.appendChild(body);
+    } else {
+      const row = el(doc, "div", "g-howto-row");
+      const num = el(doc, "span", "g-howto-num", String(++n));
+      const text = el(doc, "div", "g-howto-text");
+      text.appendChild(el(doc, "p", "g-howto-title", s.title));
+      const body = paragraphs(doc, s.body, "g-howto-note");
+      if (body) text.appendChild(body);
+      row.append(num, text);
+      li.appendChild(row);
+      const shot = s.image ? screenshot(doc, s.image, s.title) : null;
+      if (shot) li.appendChild(shot);
+    }
+    list.appendChild(li);
+  }
+  if (!list.childNodes.length)
+    wrap.appendChild(el(doc, "div", "g-rc-empty", "This how-to has no steps yet."));
+  else wrap.appendChild(list);
+  return wrap;
+}
 
 // src/messenger-styles.ts
 var MESSENGER_STYLES = `
@@ -17,17 +114,16 @@ var MESSENGER_STYLES = `
 .g-m-head .g-close{color:inherit;top:50%;transform:translateY(-50%)}
 .g-m-head .g-close:hover,.g-m-head .g-close:focus-visible{background:rgba(255,255,255,.18);color:inherit}
 .g-m-head h2{margin:0;font-size:16px;font-weight:600;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
-.g-m-back{border:0;background:transparent;color:inherit;font:inherit;font-size:18px;cursor:pointer;width:32px;height:32px;border-radius:999px;margin-left:-8px}
+.g-m-back{border:0;background:transparent;color:inherit;font:inherit;cursor:pointer;width:32px;height:32px;border-radius:999px;margin-left:-8px;display:inline-flex;align-items:center;justify-content:center;padding:0}
 .g-m-back:hover,.g-m-back:focus-visible{background:rgba(255,255,255,.18);outline:none}
 .g-m-main{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden}
 .g-m-scroll{flex:1;overflow:auto;padding:16px}
-.g-m-hero{font-size:22px;font-weight:700;margin:4px 0 4px}
-.g-m-greet{color:var(--g-muted);margin:0 0 16px}
 .g-m-card{display:block;width:100%;text-align:left;border:1px solid var(--g-border);background:var(--g-bg);color:var(--g-text);border-radius:calc(var(--g-radius) * .8);padding:14px 16px;margin:0 0 12px;font:inherit;cursor:pointer;box-shadow:0 1px 2px rgba(0,0,0,.04)}
 .g-m-card:hover{background:var(--g-subtle)}
 .g-m-card:focus-visible{outline:2px solid var(--g-primary);outline-offset:2px}
-.g-m-card-title{font-weight:600}
-.g-m-card-sub{color:var(--g-muted);font-size:13px;margin-top:2px}
+.g-m-card-title{display:block;font-weight:600}
+.g-m-card-sub{display:block;color:var(--g-muted);font-size:13px;margin-top:2px}
+.g-m-card-label{display:block;font-size:12px;color:var(--g-muted);font-weight:500}
 .g-m-row{display:flex;align-items:flex-start;gap:10px}
 .g-m-row .g-m-grow{flex:1;min-width:0}
 .g-m-ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@@ -37,7 +133,9 @@ var MESSENGER_STYLES = `
 .g-m-tab{flex:1;border:0;background:transparent;color:var(--g-muted);font:inherit;font-size:12px;font-weight:600;padding:10px 4px 12px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px}
 .g-m-tab[aria-selected="true"]{color:var(--g-primary)}
 .g-m-tab:focus-visible{outline:2px solid var(--g-primary);outline-offset:-2px}
-.g-m-tab-icon{font-size:18px;line-height:1}
+.g-m-tab-icon{position:relative;display:inline-flex;line-height:1}
+.g-m-tab-icon .g-m-ico{width:22px;height:22px}
+.g-m-tab-dot{position:absolute;top:-2px;right:-4px;width:8px;height:8px;border-radius:999px;background:#e11d48;border:2px solid var(--g-bg);box-sizing:content-box}
 .g-m-log{flex:1;overflow:auto;padding:16px;display:flex;flex-direction:column;gap:10px}
 .g-m-msg{max-width:85%;display:flex;flex-direction:column;gap:4px}
 .g-m-msg.g-from-user{align-self:flex-end;align-items:flex-end}
@@ -66,7 +164,8 @@ var MESSENGER_STYLES = `
 .g-m-compose{display:flex;align-items:flex-end;gap:8px}
 .g-m-compose textarea{flex:1;resize:none;min-height:40px;max-height:120px;border:1px solid var(--g-border);border-radius:10px;padding:9px 10px;font:inherit;font-size:14px;color:var(--g-text);background:var(--g-bg)}
 .g-m-compose textarea:focus-visible{outline:2px solid var(--g-primary);outline-offset:1px}
-.g-m-send{width:40px;height:40px;border-radius:999px;border:0;background:var(--g-primary);color:var(--g-primary-text);cursor:pointer;font-size:18px;flex:none}
+.g-m-send{width:40px;height:40px;border-radius:999px;border:0;background:var(--g-primary);color:var(--g-primary-text);cursor:pointer;flex:none;display:inline-flex;align-items:center;justify-content:center;padding:0}
+.g-m-send .g-m-ico{width:18px;height:18px}
 .g-m-send:disabled{opacity:.45;cursor:not-allowed}
 .g-m-send:focus-visible{outline:2px solid var(--g-primary);outline-offset:2px}
 .g-m-human{border:0;background:transparent;color:var(--g-muted);font:inherit;font-size:12px;cursor:pointer;padding:6px 2px 0;text-decoration:underline}
@@ -76,6 +175,79 @@ var MESSENGER_STYLES = `
 .g-m-rate button:hover,.g-m-rate button:focus-visible{background:var(--g-subtle);outline:none}
 .g-m-note{color:var(--g-muted);font-size:12px;margin-top:6px}
 .g-m-empty{color:var(--g-muted);text-align:center;padding:24px 8px}
+.g-howto .g-title{margin:0 0 6px}
+.g-howto-desc,.g-howto-note{color:var(--g-muted);font-size:13px}
+.g-howto p{margin:0 0 6px;white-space:pre-line}
+.g-howto-show{width:100%;margin:6px 0 4px}
+.g-howto-steps{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:16px}
+.g-howto-step h4{margin:4px 0 0;font-size:15px}
+.g-howto-tip,.g-howto-alert{border-left:3px solid var(--g-primary);background:var(--g-subtle);border-radius:6px;padding:8px 10px;font-size:13px}
+.g-howto-alert{border-left-color:#d97706}
+.g-howto-row{display:flex;gap:10px;align-items:flex-start}
+.g-howto-num{flex:none;width:24px;height:24px;border-radius:999px;background:var(--g-primary);color:var(--g-primary-text);font-size:12px;font-weight:700;display:inline-flex;align-items:center;justify-content:center}
+.g-howto-text{flex:1;min-width:0;padding-top:2px}
+.g-howto-title{font-weight:600}
+.g-howto-shot{position:relative;overflow:hidden;margin-top:8px;border:1px solid var(--g-border);border-radius:8px;background:var(--g-subtle)}
+.g-howto-shot img{display:block;width:100%;height:auto}
+.g-howto-shot .g-howto-ghost{visibility:hidden}
+.g-howto-shot .g-howto-zoomed{position:absolute;max-width:none}
+.g-howto-mark{position:absolute;pointer-events:none;border:3px solid var(--g-primary);border-radius:6px;box-shadow:0 0 0 3px color-mix(in srgb,var(--g-primary) 25%,transparent)}
+.g-m-ico{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
+.g-close .g-m-ico,.g-m-back .g-m-ico{width:18px;height:18px}
+.g-m-row.g-m-center{align-items:center}
+.g-m-row.g-m-baseline{align-items:baseline}
+.g-m-static{cursor:default}
+.g-m-static:hover{background:var(--g-bg)}
+.g-m-wide{width:100%}
+.g-m-home{position:relative;padding:0}
+.g-m-hero-bg{position:absolute;top:0;left:0;right:0;height:300px;pointer-events:none;background:linear-gradient(180deg,var(--g-primary) 0%,var(--g-primary) 52%,color-mix(in srgb,var(--g-primary) 30%,var(--g-bg)) 84%,var(--g-bg) 100%)}
+.g-m-home-inner{position:relative;padding:16px;display:flex;flex-direction:column;gap:12px}
+.g-m-home .g-m-card{margin:0;box-shadow:0 1px 2px rgba(0,0,0,.04),0 4px 14px rgba(17,24,39,.06)}
+.g-m-hero-top{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:40px;padding:2px 4px 0}
+.g-m-logo{width:36px;height:36px;border-radius:9px;background:var(--g-bg);color:var(--g-primary);display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:17px;overflow:hidden;flex:none}
+.g-m-logo img{width:100%;height:100%;object-fit:contain}
+.g-m-team{display:flex}
+.g-m-avatar{width:32px;height:32px;border-radius:999px;border:2px solid var(--g-primary);display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;overflow:hidden;margin-left:-8px;background:#fde7c7;color:#7a4a0a}
+.g-m-avatar:first-child{margin-left:0}
+.g-m-avatar-1{background:#d9f0e3;color:#1f5e3b}
+.g-m-avatar-2{background:#e3e1fa;color:#3b3486}
+.g-m-avatar img{width:100%;height:100%;object-fit:cover}
+.g-m-hero-close{width:36px;height:36px;border:0;border-radius:999px;background:rgba(255,255,255,.16);color:var(--g-primary-text);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0;margin-left:10px}
+.g-m-hero-close .g-m-ico{width:18px;height:18px}
+.g-m-hero-close:hover{background:rgba(255,255,255,.28)}
+.g-m-hero-close:focus-visible{outline:2px solid var(--g-primary-text);outline-offset:2px}
+.g-m-hello{margin:36px 4px 6px;color:var(--g-primary-text);font-size:26px;font-weight:700;line-height:1.2;letter-spacing:-.01em;display:flex;flex-direction:column}
+.g-m-hello-1{opacity:.8}
+.g-m-trail{color:var(--g-primary)}
+.g-m-lead{color:var(--g-muted)}
+.g-m-status-ico{width:26px;height:26px}
+.g-m-status-operational .g-m-status-ico{color:#15803d}
+.g-m-status-degraded .g-m-status-ico{color:#b45309}
+.g-m-status-outage .g-m-status-ico{color:#b91c1c}
+.g-m-status-maintenance .g-m-status-ico{color:#1d4ed8}
+.g-m-bar{display:block;height:6px;border-radius:999px;background:var(--g-border);margin-top:10px;overflow:hidden}
+.g-m-bar-fill{display:block;height:100%;background:var(--g-primary);border-radius:999px}
+.g-m-link{color:var(--g-primary);font-weight:600;font-size:13px;flex:none}
+.g-m-badge-ico{width:32px;height:32px;border-radius:8px;background:var(--g-subtle);color:color-mix(in srgb,var(--g-text) 78%,transparent);display:inline-flex;align-items:center;justify-content:center;flex:none}
+.g-m-badge-ico .g-m-ico{width:16px;height:16px}
+.g-m-badge-ico.g-m-accent{background:color-mix(in srgb,var(--g-primary) 12%,var(--g-bg));color:var(--g-primary)}
+.g-m-suggest{padding-bottom:4px}
+.g-m-items{display:flex;flex-direction:column;margin-top:8px}
+.g-m-item{display:flex;align-items:center;gap:12px;width:100%;text-align:left;border:0;border-top:1px solid var(--g-border);background:transparent;color:var(--g-text);padding:10px 0;font:inherit;cursor:pointer;min-height:44px}
+.g-m-item:hover .g-m-item-title{color:var(--g-primary)}
+.g-m-item:focus-visible{outline:2px solid var(--g-primary);outline-offset:2px;border-radius:4px}
+.g-m-item .g-m-grow{flex:1;min-width:0}
+.g-m-item-title{display:block;font-weight:600;overflow-wrap:anywhere}
+.g-m-news{padding:0;overflow:hidden}
+.g-m-news-img{display:block;width:100%;height:150px;object-fit:cover;background:var(--g-subtle)}
+.g-m-news-body{display:block;padding:14px 16px}
+.g-m-news-meta{gap:8px;margin-bottom:4px}
+.g-m-tag{font-size:11px;font-weight:700;color:var(--g-primary-text);background:var(--g-primary);border-radius:4px;padding:1px 6px;text-transform:uppercase;letter-spacing:.03em}
+.g-m-clamp{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
+.g-m-context{align-self:center;font-size:12px;color:var(--g-muted);background:var(--g-subtle);border-radius:999px;padding:3px 10px}
+.g-m-asks{align-items:flex-start}
+.g-m-chip.g-m-ask{border-color:var(--g-primary);color:var(--g-primary);font-weight:600;border-radius:999px;padding:8px 14px;min-height:36px}
+.g-m-chip.g-m-ask:disabled{opacity:.5;cursor:not-allowed}
 `;
 
 // src/render-safe.ts
@@ -164,6 +336,73 @@ function chatIcon(doc) {
   svg.appendChild(path);
   return svg;
 }
+var ICONS = {
+  home: ["M3 10.5 12 3l9 7.5V20a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z"],
+  messages: ["M4 5h16v11H8l-4 4z"],
+  help: ["M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18z", "M9.5 9.5a2.5 2.5 0 1 1 3.5 2.3c-.6.3-1 .8-1 1.5V14", "M12 17h.01"],
+  news: ["M3 11v2a1 1 0 0 0 1 1h2l5 4V6L6 10H4a1 1 0 0 0-1 1z", "M15 9a4 4 0 0 1 0 6", "M18 6a8 8 0 0 1 0 12"],
+  arrow: ["M5 12h14", "M13 6l6 6-6 6"],
+  close: ["M6 6l12 12", "M18 6 6 18"],
+  back: ["M15 6l-6 6 6 6"],
+  chevron: ["m9 6 6 6-6 6"],
+  check: ["M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18z", "m8 12 3 3 5-6"],
+  alert: ["M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18z", "M12 8v4", "M12 16h.01"],
+  wrench: ["M14.7 6.3a4 4 0 0 0-5.4 5.4L4 17l3 3 5.3-5.3a4 4 0 0 0 5.4-5.4l-2.5 2.5-2.4-.6-.6-2.4z"],
+  play: ["M8 5v14l11-7z"],
+  steps: ["M9 6h11", "M9 12h11", "M9 18h11", "M4 6h.01", "M4 12h.01", "M4 18h.01"],
+  article: ["M6 3h9l4 4v14H6z", "M9 12h6", "M9 16h6"],
+  ask: ["M4 5h16v11H8l-4 4z", "M9 9.5h6", "M9 12.5h4"],
+  search: ["M11 4a7 7 0 1 0 0 14 7 7 0 0 0 0-14z", "m20 20-3.5-3.5"],
+  circle: ["M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18z"]
+};
+function icon(doc, name, cls = "g-m-ico") {
+  const svg = doc.createElementNS(SVG_NS, "svg");
+  svg.setAttribute("viewBox", "0 0 24 24");
+  svg.setAttribute("aria-hidden", "true");
+  svg.setAttribute("class", cls);
+  for (const d of ICONS[name] ?? []) {
+    const path = doc.createElementNS(SVG_NS, "path");
+    path.setAttribute("d", d);
+    svg.appendChild(path);
+  }
+  return svg;
+}
+var REPLY_TIME_TEXT = {
+  minutes: "typically replies in a few minutes",
+  hour: "typically replies within an hour",
+  hours: "typically replies in a few hours",
+  day: "typically replies within a day"
+};
+var STATUS_TEXT = {
+  operational: { title: "All systems operational", icon: "check" },
+  degraded: { title: "Degraded performance", icon: "alert" },
+  outage: { title: "Service outage", icon: "alert" },
+  maintenance: { title: "Scheduled maintenance", icon: "wrench" }
+};
+function shortDateTime(iso) {
+  const d = new Date(iso);
+  if (Number.isNaN(d.getTime())) return "";
+  try {
+    return d.toLocaleString(void 0, { month: "short", day: "numeric", hour: "2-digit", minute: "2-digit" });
+  } catch {
+    return d.toISOString().slice(0, 16).replace("T", " ");
+  }
+}
+function shortDate(iso) {
+  const d = new Date(iso);
+  if (Number.isNaN(d.getTime())) return "";
+  try {
+    return d.toLocaleDateString(void 0, { month: "short", day: "numeric" });
+  } catch {
+    return d.toISOString().slice(0, 10);
+  }
+}
+var initialOf = (name) => (name.trim().match(/\p{L}/u)?.[0] ?? "?").toUpperCase();
+function personalGreeting(greeting, firstName) {
+  if (!firstName) return greeting;
+  const rest = greeting.replace(/^\s*(hi|hello|hey)( there)?\s*[!,.]?\s*/i, "");
+  return rest ? `Hi ${firstName}! ${rest}` : `Hi ${firstName}!`;
+}
 function relativeTime(iso, now = Date.now()) {
   const s = Math.max(0, Math.round((now - Date.parse(iso)) / 1e3));
   if (!Number.isFinite(s) || s < 60) return "now";
@@ -199,6 +438,25 @@ function renderMessenger(options) {
   let threadTimer = null;
   let backgroundTimer = null;
   let threadSeq = 0;
+  let howTos = null;
+  let howTosSeq = 0;
+  const howToCache = /* @__PURE__ */ new Map();
+  let page = null;
+  let pageKey = null;
+  let pageAt = 0;
+  let pageSeq = 0;
+  let pageLoading = false;
+  const PAGE_TTL_MS = 12e4;
+  const cards = { suggestions: config.home?.suggestions !== false, progress: config.home?.progress !== false, news: config.home?.news !== false };
+  const visitor = () => {
+    try {
+      const v = options.visitor?.();
+      if (v) return v;
+    } catch {
+    }
+    return { firstName: null, path: null, pageGuides: [], resumeGuide: null, checklist: null, news: [] };
+  };
+  const news = () => cards.news ? visitor().news : [];
   const pos = `g-pos-${config.launcher.position}`;
   const rootNode = scope.getRootNode();
   const shadowHost = "host" in rootNode ? rootNode.host : null;
@@ -230,6 +488,7 @@ function renderMessenger(options) {
     data: () => ({
       collections: articles?.collections ?? options.resourceCenter?.collections ?? [],
       articles: articles?.articles ?? options.resourceCenter?.articles ?? [],
+      suggested: helpSuggestions(),
       recommended: rcExtras(options.resourceCenter?.recommendedGuideIds),
       checklists: rcExtras(options.resourceCenter?.checklistGuideIds),
       faqs: options.resourceCenter?.faqs,
@@ -246,7 +505,8 @@ function renderMessenger(options) {
       setOpen(false);
       options.onOpenChecklist?.(id);
     },
-    onArticleView: options.onArticleView
+    onArticleView: options.onArticleView,
+    extra: (q) => howToItems(q)
   });
   const unreadTotal = () => conversations.reduce((n, c) => n + (c.unread > 0 ? 1 : 0), 0);
   const updateBadge = () => {
@@ -276,6 +536,32 @@ function renderMessenger(options) {
     }).catch(() => {
     }).finally(() => articlesLoading = false);
   };
+  const loadHowTos = () => {
+    if (!api.listHowTos) return;
+    const seq = ++howTosSeq;
+    api.listHowTos().then((res) => {
+      if (seq !== howTosSeq || destroyed) return;
+      howTos = res;
+      if (open && view.kind === "tab" && view.tab === "home") render();
+      else if (open && view.kind === "tab" && view.tab === "help") help.render();
+    }).catch(() => {
+    });
+  };
+  const pageHowTos = () => (howTos?.forPage ?? []).map((id) => howTos?.howTos.find((h) => h.id === id)).filter((h) => !!h);
+  const stepsLabel = (h) => `${h.stepCount} ${h.stepCount === 1 ? "step" : "steps"}`;
+  const openHowTo = (id) => go({ kind: "howto", id, from: view });
+  function howToItems(q) {
+    const list = q ? (howTos?.howTos ?? []).filter((h) => h.title.toLowerCase().includes(q) || h.description.toLowerCase().includes(q)).slice(0, 10) : [];
+    if (!list.length) return [];
+    return [
+      el(doc, "div", "g-rc-section", `How-tos (${list.length})`),
+      ...list.map((h) => {
+        const b = listItem(doc, "\u{1F4CB}", h.title, h.description || stepsLabel(h));
+        b.addEventListener("click", () => openHowTo(h.id));
+        return b;
+      })
+    ];
+  }
   const refreshConversations = () => api.listConversations().then((list) => {
     conversations = [...list].sort((a, b) => b.lastMessageAt.localeCompare(a.lastMessageAt));
     updateBadge();
@@ -284,92 +570,379 @@ function renderMessenger(options) {
   });
   function renderHead(title, back) {
     head.textContent = "";
+    head.hidden = false;
     if (back) {
-      const b = el(doc, "button", "g-m-back", "\u2190");
+      const b = el(doc, "button", "g-m-back");
       b.type = "button";
       b.setAttribute("aria-label", "Back");
+      b.appendChild(icon(doc, "back"));
       b.addEventListener("click", back);
       head.appendChild(b);
     }
     head.appendChild(el(doc, "h2", "", title));
-    const close = el(doc, "button", "g-close", "\xD7");
+    head.appendChild(closeButton("g-close"));
+  }
+  function closeButton(cls) {
+    const close = el(doc, "button", cls);
     close.type = "button";
     close.setAttribute("aria-label", "Close");
+    close.appendChild(icon(doc, "close"));
     close.addEventListener("click", () => setOpen(false));
-    head.appendChild(close);
+    return close;
   }
   function renderTabs() {
     tabs.textContent = "";
-    tabs.hidden = view.kind === "thread";
+    tabs.hidden = view.kind !== "tab";
     const items = [
-      ["home", "\u2302", "Home"],
-      ["messages", "\u{1F4AC}", "Messages"],
-      ["help", "?", "Help"]
+      ["home", "home", "Home"],
+      ["messages", "messages", "Messages"],
+      ["help", "help", "Help"]
     ];
-    for (const [tab, icon, label] of items) {
+    const latest = news();
+    if (latest.length) items.push(["news", "news", "News"]);
+    for (const [tab, ico, label] of items) {
       const b = el(doc, "button", "g-m-tab");
       b.type = "button";
       b.setAttribute("role", "tab");
       b.setAttribute("aria-selected", String(view.kind === "tab" && view.tab === tab));
-      const i = el(doc, "span", "g-m-tab-icon", icon);
-      i.setAttribute("aria-hidden", "true");
+      const i = el(doc, "span", "g-m-tab-icon");
+      i.appendChild(icon(doc, ico));
       b.append(i, el(doc, "span", "", label));
+      if (tab === "news" && latest.some((n) => n.unread)) {
+        const dot = el(doc, "span", "g-m-tab-dot");
+        dot.setAttribute("aria-label", "New");
+        i.appendChild(dot);
+      }
       b.addEventListener("click", () => go({ kind: "tab", tab }));
       tabs.appendChild(b);
     }
   }
-  function conversationCard(c) {
+  function conversationCard(c, label) {
     const card = el(doc, "button", "g-m-card");
     card.type = "button";
     const row = el(doc, "div", "g-m-row");
     if (c.unread > 0) row.appendChild(el(doc, "span", "g-m-dot"));
     const text = el(doc, "div", "g-m-grow");
+    if (label) text.appendChild(el(doc, "div", "g-m-card-label", label));
     text.append(el(doc, "div", "g-m-card-title g-m-ellipsis", c.subject || "Conversation"), el(doc, "div", "g-m-card-sub g-m-ellipsis", c.lastMessagePreview));
     row.append(text, el(doc, "span", "g-m-time", relativeTime(c.lastMessageAt)));
     card.appendChild(row);
-    card.setAttribute("aria-label", `${c.subject || "Conversation"}${c.unread ? ", unread" : ""}`);
+    card.setAttribute("aria-label", `${label ? `${label}: ` : ""}${c.subject || "Conversation"}${c.unread ? ", unread" : ""}`);
     card.addEventListener("click", () => go({ kind: "thread", conversationId: c.id }));
     return card;
   }
+  function actionCard(opts) {
+    const card = el(doc, "button", `g-m-card g-m-row g-m-center${opts.cls ? ` ${opts.cls}` : ""}`);
+    card.type = "button";
+    if (opts.lead) card.appendChild(opts.lead);
+    const text = el(doc, "span", "g-m-grow");
+    text.appendChild(el(doc, "span", "g-m-card-title", opts.title));
+    if (opts.sub) text.appendChild(el(doc, "span", "g-m-card-sub", opts.sub));
+    card.appendChild(text);
+    if (opts.trail) card.appendChild(icon(doc, "arrow", "g-m-ico g-m-trail"));
+    card.addEventListener("click", opts.onClick);
+    return card;
+  }
+  function progressBar(done, total) {
+    const bar = el(doc, "span", "g-m-bar");
+    bar.setAttribute("role", "progressbar");
+    bar.setAttribute("aria-valuemin", "0");
+    bar.setAttribute("aria-valuemax", String(total));
+    bar.setAttribute("aria-valuenow", String(done));
+    const fill = el(doc, "span", "g-m-bar-fill");
+    fill.style.width = `${total ? Math.round(Math.min(done, total) / total * 100) : 0}%`;
+    bar.appendChild(fill);
+    return bar;
+  }
+  function teamAvatars() {
+    const team = (config.team ?? []).slice(0, 3);
+    if (!team.length) return null;
+    const wrap = el(doc, "div", "g-m-team");
+    wrap.setAttribute("role", "img");
+    wrap.setAttribute("aria-label", `The team: ${team.map((t) => t.name).join(", ")}`);
+    team.forEach((t, i) => {
+      const a = el(doc, "span", `g-m-avatar g-m-avatar-${i % 3}`);
+      if (t.avatarUrl) {
+        const img = el(doc, "img");
+        img.src = t.avatarUrl;
+        img.alt = "";
+        img.referrerPolicy = "no-referrer";
+        img.addEventListener("error", () => {
+          img.remove();
+          a.textContent = initialOf(t.name);
+        });
+        a.appendChild(img);
+      } else a.textContent = initialOf(t.name);
+      wrap.appendChild(a);
+    });
+    return wrap;
+  }
+  function brandMark() {
+    const name = options.brand?.name || config.name;
+    const mark = el(doc, "span", "g-m-logo");
+    const url = options.brand?.logoUrl;
+    if (url && /^(https?:)?\/\//.test(url)) {
+      const img = el(doc, "img");
+      img.src = url;
+      img.alt = name;
+      img.addEventListener("error", () => {
+        img.remove();
+        mark.textContent = initialOf(name);
+      });
+      mark.appendChild(img);
+    } else {
+      mark.textContent = initialOf(name);
+      mark.setAttribute("aria-label", name);
+      mark.setAttribute("role", "img");
+    }
+    return mark;
+  }
+  function messageSub() {
+    const reply = config.replyTime ? REPLY_TIME_TEXT[config.replyTime] : null;
+    if (config.aiAvailable) return reply ? `${config.name} answers right away. The team ${reply}.` : `${config.name} answers right away, and the team can help too.`;
+    return reply ? `The team ${reply}.` : "The team will reply here.";
+  }
+  function statusCard(status) {
+    const meta = STATUS_TEXT[status.level] ?? STATUS_TEXT.operational;
+    const card = el(doc, "div", `g-m-card g-m-static g-m-row g-m-center g-m-status g-m-status-${status.level}`);
+    card.setAttribute("role", "status");
+    card.appendChild(icon(doc, meta.icon, "g-m-ico g-m-status-ico"));
+    const text = el(doc, "span", "g-m-grow");
+    text.appendChild(el(doc, "span", "g-m-card-title", status.message || meta.title));
+    const when = shortDateTime(status.updatedAt);
+    if (when) text.appendChild(el(doc, "span", "g-m-card-sub", `Updated ${when}`));
+    card.appendChild(text);
+    return card;
+  }
+  function progressCards(v) {
+    const out = [];
+    if (v.resumeGuide) {
+      const g = v.resumeGuide;
+      const card = el(doc, "button", "g-m-card");
+      card.type = "button";
+      const row = el(doc, "span", "g-m-row g-m-center");
+      row.appendChild(iconTile("play", true));
+      const text = el(doc, "span", "g-m-grow");
+      text.append(el(doc, "span", "g-m-card-label", "Pick up where you left off"), el(doc, "span", "g-m-card-title g-m-ellipsis", g.name), el(doc, "span", "g-m-card-sub", `Step ${g.stepIndex + 1} of ${g.stepCount}`));
+      row.append(text, el(doc, "span", "g-m-link", "Resume"));
+      card.append(row, progressBar(g.stepIndex, g.stepCount));
+      card.addEventListener("click", () => {
+        setOpen(false);
+        options.onResumeGuide?.(g.id, g.stepId);
+      });
+      out.push(card);
+    }
+    if (v.checklist && v.checklist.total > 0) {
+      const c = v.checklist;
+      const card = el(doc, "button", "g-m-card");
+      card.type = "button";
+      const top = el(doc, "span", "g-m-row g-m-baseline");
+      top.append(el(doc, "span", "g-m-card-title g-m-grow g-m-ellipsis", c.name), el(doc, "span", "g-m-time", `${c.done} of ${c.total} done`));
+      card.append(top, progressBar(c.done, c.total));
+      if (c.nextTask) card.appendChild(el(doc, "span", "g-m-card-sub", `Next: ${c.nextTask}`));
+      card.addEventListener("click", () => {
+        setOpen(false);
+        options.onOpenChecklist?.(c.id);
+      });
+      out.push(card);
+    }
+    return out;
+  }
+  function iconTile(name, accent = false) {
+    const b = el(doc, "span", `g-m-badge-ico${accent ? " g-m-accent" : ""}`);
+    b.appendChild(icon(doc, name));
+    return b;
+  }
+  function pageSuggestions(v, max = 4) {
+    if (!cards.suggestions) return [];
+    const out = [];
+    for (const g of v.pageGuides.slice(0, 2)) {
+      out.push({ icon: "play", title: g.name, sub: g.kind === "checklist" ? "Checklist" : "Interactive guide", accent: true, run: () => g.kind === "checklist" ? openChecklist(g.id) : startGuide(g.key || g.id) });
+    }
+    const inApp = /* @__PURE__ */ new Set();
+    for (const h of pageHowTos()) {
+      if (out.length >= max) break;
+      inApp.add(h.title.toLowerCase());
+      out.push({ icon: "steps", title: h.title, sub: `How-to \xB7 ${stepsLabel(h)}`, run: () => openHowTo(h.id) });
+    }
+    for (const s of page?.suggestions ?? []) {
+      if (out.length >= max) break;
+      if (s.type === "howto" && inApp.has(s.title.toLowerCase())) continue;
+      if (s.type === "howto") out.push({ icon: "steps", title: s.title, sub: `How-to \xB7 ${s.steps} ${s.steps === 1 ? "step" : "steps"}`, run: () => openArticle(s.articleId) });
+      else out.push({ icon: "article", title: s.title, sub: s.summary || "Article", run: () => openArticle(s.articleId) });
+    }
+    return out.slice(0, max);
+  }
+  function startGuide(keyOrId) {
+    setOpen(false);
+    options.onStartGuide?.(keyOrId);
+  }
+  function openChecklist(id) {
+    setOpen(false);
+    options.onOpenChecklist?.(id);
+  }
+  function ask(question) {
+    go({ kind: "thread", conversationId: null });
+    if (!textarea) return;
+    textarea.value = question;
+    submit();
+  }
+  function suggestionButton(s) {
+    const b = el(doc, "button", "g-m-item");
+    b.type = "button";
+    b.appendChild(iconTile(s.icon, s.accent));
+    const text = el(doc, "span", "g-m-grow");
+    text.append(el(doc, "span", "g-m-item-title", s.title), el(doc, "span", "g-m-card-sub g-m-ellipsis", s.sub));
+    b.appendChild(text);
+    b.addEventListener("click", s.run);
+    return b;
+  }
+  function newsCard(n) {
+    const card = el(doc, "button", "g-m-card g-m-news");
+    card.type = "button";
+    if (n.imageUrl && /^https?:\/\//.test(n.imageUrl)) {
+      const img = el(doc, "img", "g-m-news-img");
+      img.src = n.imageUrl;
+      img.alt = "";
+      img.loading = "lazy";
+      img.addEventListener("error", () => img.remove());
+      card.appendChild(img);
+    }
+    const body = el(doc, "span", "g-m-news-body");
+    const meta = el(doc, "span", "g-m-row g-m-center g-m-news-meta");
+    if (n.unread) meta.appendChild(el(doc, "span", "g-m-tag", "New"));
+    meta.appendChild(el(doc, "span", "g-m-time", shortDate(n.publishedAt)));
+    body.append(meta, el(doc, "span", "g-m-card-title", n.title));
+    if (n.body) body.appendChild(el(doc, "span", "g-m-card-sub g-m-clamp", n.body));
+    card.appendChild(body);
+    card.addEventListener("click", () => startGuide(n.key || n.id));
+    return card;
+  }
   function renderHome() {
-    renderHead(config.name);
-    const scroll = el(doc, "div", "g-m-scroll");
-    scroll.append(el(doc, "div", "g-m-hero", "Hi there \u{1F44B}"), el(doc, "p", "g-m-greet", config.greeting));
-    const ask = el(doc, "button", "g-m-card");
-    ask.type = "button";
-    ask.append(el(doc, "div", "g-m-card-title", "Ask a question"), el(doc, "div", "g-m-card-sub", config.aiAvailable ? `${config.name} answers right away, and the team can help too` : "The team will reply here"));
-    ask.addEventListener("click", () => go({ kind: "thread", conversationId: null }));
-    scroll.appendChild(ask);
+    head.hidden = true;
+    const v = visitor();
+    loadPage();
+    const scroll = el(doc, "div", "g-m-scroll g-m-home");
+    const hero = el(doc, "div", "g-m-hero-bg");
+    hero.setAttribute("aria-hidden", "true");
+    const inner = el(doc, "div", "g-m-home-inner");
+    const top = el(doc, "div", "g-m-hero-top");
+    const right = el(doc, "div", "g-m-row g-m-center");
+    const team = teamAvatars();
+    if (team) right.appendChild(team);
+    right.appendChild(closeButton("g-m-hero-close"));
+    top.append(brandMark(), right);
+    const hello = el(doc, "h2", "g-m-hello");
+    hello.append(el(doc, "span", "g-m-hello-1", v.firstName ? `Hi ${v.firstName}.` : "Hi there."), el(doc, "span", "g-m-hello-2", "How can we help?"));
+    inner.append(top, hello);
+    inner.appendChild(actionCard({ title: "Send us a message", sub: messageSub(), trail: true, onClick: () => go({ kind: "thread", conversationId: null }) }));
     const recent = conversations[0];
-    if (recent) {
-      scroll.appendChild(el(doc, "div", "g-rc-section", "Recent conversation"));
-      scroll.appendChild(conversationCard(recent));
+    if (recent) inner.appendChild(conversationCard(recent, recent.status === "closed" && !recent.unread ? "Recent conversation" : "Continue the conversation"));
+    if (config.status) inner.appendChild(statusCard(config.status));
+    if (cards.progress) progressCards(v).forEach((c) => inner.appendChild(c));
+    const suggestions = pageSuggestions(v);
+    const questions = cards.suggestions ? (page?.questions ?? []).slice(0, 2) : [];
+    const label = v.path ? pageLabel(v.path) : null;
+    const fallback = !suggestions.length && !questions.length ? rcExtras(options.resourceCenter?.recommendedGuideIds).slice(0, 3) : [];
+    if (suggestions.length || questions.length || fallback.length) {
+      const box = el(doc, "div", "g-m-card g-m-static g-m-suggest");
+      box.appendChild(el(doc, "div", "g-m-card-title", fallback.length ? "Recommended" : "Suggested for you"));
+      if (!fallback.length && label) box.appendChild(el(doc, "div", "g-m-card-sub", `For the ${label} page`));
+      const list = el(doc, "div", "g-m-items");
+      suggestions.forEach((s) => list.appendChild(suggestionButton(s)));
+      questions.forEach((q) => list.appendChild(suggestionButton({ icon: "ask", title: q, sub: config.aiAvailable ? `Ask ${config.name}` : "Ask the team", run: () => ask(q) })));
+      fallback.forEach((g) => list.appendChild(suggestionButton({ icon: "play", title: g.name, sub: "Interactive guide", accent: true, run: () => startGuide(g.key || g.id) })));
+      box.appendChild(list);
+      inner.appendChild(box);
     }
-    const search = el(doc, "button", "g-m-card");
-    search.type = "button";
-    search.append(el(doc, "div", "g-m-card-title", "Search for help"), el(doc, "div", "g-m-card-sub", "Browse articles and guides"));
-    search.addEventListener("click", () => go({ kind: "tab", tab: "help" }));
-    scroll.appendChild(search);
+    const latest = news()[0];
+    if (latest) inner.appendChild(newsCard(latest));
+    inner.appendChild(actionCard({ title: "Search for help", sub: "Articles, guides and how-tos", lead: icon(doc, "search", "g-m-ico g-m-lead"), onClick: () => go({ kind: "tab", tab: "help" }) }));
+    scroll.append(hero, inner);
+    main.appendChild(scroll);
+  }
+  function renderHowToView(id, from) {
+    const cached = howToCache.get(id);
+    renderHead(cached?.title ?? "How-to", () => go(from));
+    const scroll = el(doc, "div", "g-m-scroll");
+    if (cached) {
+      scroll.appendChild(
+        renderHowTo(doc, cached, (key) => {
+          setOpen(false);
+          options.onStartGuide?.(key);
+        })
+      );
+    } else scroll.appendChild(el(doc, "div", "g-m-empty", cached === null ? "This how-to isn't available any more." : "Loading\u2026"));
     main.appendChild(scroll);
+    if (cached !== void 0 || !api.getHowTo) return;
+    const seq = threadSeq;
+    api.getHowTo(id).catch(() => null).then((h) => {
+      howToCache.set(id, h);
+      if (seq === threadSeq && view.kind === "howto" && view.id === id) render();
+    });
   }
   function renderMessagesTab() {
     renderHead("Messages");
     const scroll = el(doc, "div", "g-m-scroll");
     if (!conversations.length) scroll.appendChild(el(doc, "div", "g-m-empty", "No conversations yet."));
     conversations.forEach((c) => scroll.appendChild(conversationCard(c)));
-    const start = el(doc, "button", "g-btn g-btn-primary", "Send us a message");
+    const start = el(doc, "button", "g-btn g-btn-primary g-m-wide", "Send us a message");
     start.type = "button";
-    start.style.width = "100%";
     start.addEventListener("click", () => go({ kind: "thread", conversationId: null }));
     scroll.appendChild(start);
     main.appendChild(scroll);
   }
+  function helpSuggestions() {
+    const v = visitor();
+    const items = pageSuggestions(v, 5).map((s) => ({ kind: s.icon === "play" ? "guide" : s.icon === "steps" ? "howto" : "article", title: s.title, summary: s.sub, run: s.run }));
+    if (!items.length) return void 0;
+    const label = v.path ? pageLabel(v.path) : null;
+    return { title: label ? `For the ${label} page` : "Suggested for you", items };
+  }
   function renderHelpTab() {
     renderHead("Help");
     loadArticles();
+    loadPage();
     help.render();
     main.appendChild(help.el);
   }
+  function renderNewsTab() {
+    renderHead("News");
+    const scroll = el(doc, "div", "g-m-scroll");
+    const items = news();
+    if (!items.length) scroll.appendChild(el(doc, "div", "g-m-empty", "No news yet."));
+    items.forEach((n) => scroll.appendChild(newsCard(n)));
+    main.appendChild(scroll);
+    const unread = items.filter((n) => n.unread).map((n) => n.id);
+    if (unread.length) options.onNewsSeen?.(unread);
+  }
+  function loadPage(force = false) {
+    const path = visitor().path;
+    if (!path || !api.pageContent || !cards.suggestions) {
+      page = null;
+      pageKey = null;
+      return;
+    }
+    const key = foldPathIds(path).toLowerCase();
+    if (!force && key === pageKey && (pageLoading || Date.now() - pageAt < PAGE_TTL_MS)) return;
+    if (key !== pageKey) page = null;
+    pageKey = key;
+    pageLoading = true;
+    const seq = ++pageSeq;
+    api.pageContent(path).then((res) => {
+      if (seq !== pageSeq) return;
+      page = res;
+      pageAt = Date.now();
+      if (!open) return;
+      if (view.kind === "tab" && view.tab === "home") render();
+      else if (view.kind === "tab" && view.tab === "help") help.render();
+      else if (view.kind === "thread" && !messages.length) renderLog();
+    }).catch(() => {
+      if (seq === pageSeq) pageAt = Date.now();
+    }).finally(() => {
+      if (seq === pageSeq) pageLoading = false;
+    });
+  }
   let log = null;
   let foot = null;
   let textarea = null;
@@ -400,7 +973,7 @@ function renderMessenger(options) {
     if (m.status === "pending") bubble.setAttribute("aria-busy", "true");
     bubble.dataset.messageId = m.id;
     wrap.appendChild(bubble);
-    if (m.citations.length || m.suggestedGuides.length) {
+    if (m.citations.length || m.suggestedGuides.length || m.howTos?.length) {
       const chips = el(doc, "div", "g-m-chips");
       for (const g of m.suggestedGuides) {
         const b = el(doc, "button", "g-m-chip g-m-guide", `\u25B6 Show me: ${g.name}`);
@@ -417,6 +990,12 @@ function renderMessenger(options) {
         b.addEventListener("click", () => openArticle(c.articleId));
         chips.appendChild(b);
       }
+      for (const h of m.howTos ?? []) {
+        const b = el(doc, "button", "g-m-chip", `\u{1F4CB} ${h.title}`);
+        b.type = "button";
+        b.addEventListener("click", () => openHowTo(h.howToId));
+        chips.appendChild(b);
+      }
       wrap.appendChild(chips);
     }
     return wrap;
@@ -426,8 +1005,27 @@ function renderMessenger(options) {
     const atBottom = log.scrollHeight - log.scrollTop - log.clientHeight < 40;
     log.textContent = "";
     if (!messages.length) {
-      const intro = { id: "intro", author: config.aiAvailable ? "scout" : "agent", authorName: "Support team", body: config.greeting, citations: [], suggestedGuides: [], status: "complete", createdAt: (/* @__PURE__ */ new Date()).toISOString() };
+      const v = visitor();
+      const label = v.path ? pageLabel(v.path) : null;
+      if (label && config.aiAvailable && !current) log.appendChild(el(doc, "div", "g-m-context", `Asking from the ${label} page`));
+      const intro = { id: "intro", author: config.aiAvailable ? "scout" : "agent", authorName: "Support team", body: personalGreeting(config.greeting, v.firstName), citations: [], suggestedGuides: [], status: "complete", createdAt: (/* @__PURE__ */ new Date()).toISOString() };
       log.appendChild(messageNode(intro));
+      const questions = !current && cards.suggestions ? page?.questions ?? [] : [];
+      if (questions.length && !sending) {
+        const chips = el(doc, "div", "g-m-chips g-m-asks");
+        chips.setAttribute("aria-label", "Common questions on this page");
+        for (const q of questions) {
+          const b = el(doc, "button", "g-m-chip g-m-ask", q);
+          b.type = "button";
+          b.addEventListener("click", () => {
+            if (!textarea || sending) return;
+            textarea.value = q;
+            submit();
+          });
+          chips.appendChild(b);
+        }
+        log.appendChild(chips);
+      }
     }
     messages.forEach((m) => log.appendChild(messageNode(m)));
     if (atBottom || sending) log.scrollTop = log.scrollHeight;
@@ -493,7 +1091,8 @@ function renderMessenger(options) {
     textarea.placeholder = current?.status === "open" ? "Reply to the team\u2026" : "Ask a question\u2026";
     textarea.setAttribute("aria-label", "Message");
     textarea.value = draft;
-    sendButton = el(doc, "button", "g-m-send", "\u2191");
+    sendButton = el(doc, "button", "g-m-send");
+    sendButton.appendChild(icon(doc, "arrow"));
     sendButton.type = "submit";
     sendButton.setAttribute("aria-label", "Send");
     compose.append(textarea, sendButton);
@@ -523,9 +1122,14 @@ function renderMessenger(options) {
     textarea = null;
     sendButton = null;
     if (view.kind === "thread") renderThread(view.conversationId);
+    else if (view.kind === "howto") renderHowToView(view.id, view.from);
     else if (view.tab === "home") renderHome();
     else if (view.tab === "messages") renderMessagesTab();
-    else renderHelpTab();
+    else if (view.tab === "news" && news().length) renderNewsTab();
+    else if (view.tab === "news") {
+      view = { kind: "tab", tab: "home" };
+      renderHome();
+    } else renderHelpTab();
     renderTabs();
   }
   const handlers = (seq) => ({
@@ -622,13 +1226,14 @@ function renderMessenger(options) {
     threadSeq++;
     if (threadTimer) clearTimeout(threadTimer);
     threadTimer = null;
-    if (view.kind === "tab" && view.tab === "help" && !(next.kind === "tab" && next.tab === "help")) help.reset();
+    if (view.kind === "tab" && view.tab === "help" && !(next.kind === "tab" && next.tab === "help") && next.kind !== "howto") help.reset();
     view = next;
     if (next.kind === "thread") {
       messages = [];
       streaming.clear();
       sending = false;
       current = next.conversationId ? conversations.find((c) => c.id === next.conversationId) ?? null : null;
+      if (!next.conversationId) loadPage();
       render();
       if (next.conversationId) {
         const seq = threadSeq;
@@ -667,6 +1272,7 @@ function renderMessenger(options) {
     if (v) {
       render();
       void refreshConversations();
+      loadHowTos();
       if (view.kind === "thread") scheduleThreadPoll();
       options.onOpen?.();
     } else {
@@ -709,6 +1315,16 @@ function renderMessenger(options) {
       setOpen(true);
       openArticle(id);
     },
+    refresh() {
+      if (destroyed) return;
+      if (!open) {
+        pageKey = null;
+        return;
+      }
+      loadPage();
+      if (view.kind === "tab") render();
+      else if (!messages.length) renderLog();
+    },
     destroy() {
       destroyed = true;
       if (threadTimer) clearTimeout(threadTimer);
@@ -721,6 +1337,7 @@ function renderMessenger(options) {
   };
 }
 export {
+  personalGreeting,
   relativeTime,
   renderMessenger
 };