@planningcenter/topbar 12.3.0 → 12.4.0-rc.0

package/dist/topbar.js

@@ -180,12 +180,14 @@ function inferRailsCsrfToken() {
 }
 function apiRequest(fetch, url, {
   method = "GET",
-  data = null
+  data = null,
+  headers = {}
 } = {}) {
   const options = {
     headers: {
       Accept: "application/json",
-      "Content-Type": "application/json"
+      "Content-Type": "application/json",
+      ...headers
     },
     method,
     redirect: "follow"
@@ -805,7 +807,7 @@ function useMediaQuery(query) {
   return matches;
 }
 
-const capitalize = s => s.charAt(0).toUpperCase() + s.slice(1);
+const capitalize$1 = s => s.charAt(0).toUpperCase() + s.slice(1);
 const RESOLVED_COLOR_MODE_ATTRIBUTE = "data-resolved-color-mode";
 function resolveColorMode(colorMode) {
   if (colorMode === "system") {
@@ -3329,19 +3331,513 @@ function ProductTabs({
   }, children));
 }
 
+function parseValue(element) {
+  const datatype = element.getAttribute("datatype");
+  switch (datatype) {
+    case "boolean":
+      return element.content === "true" || element.content === "1";
+    default:
+      return element.content;
+  }
+}
+function getAllPcoMeta() {
+  const elements = document.head.querySelectorAll(`meta[property^="pco:"]`);
+  const meta = {};
+  elements.forEach(e => {
+    const property = e.getAttribute("property");
+    meta[property.substring("pco:".length)] = parseValue(e);
+  });
+  return meta;
+}
+// usePcoMeta only reads each tag's content. Recently Visited also needs the
+// pco:recently_visitable tag's `metadata` attribute, which can change while
+// the content stays the same, so it is tracked in its own store.
+function getRecentlyVisitableMetadata() {
+  var _a, _b;
+  return (_b = (_a = document.head.querySelector(`meta[property="pco:recently_visitable"]`)) === null || _a === void 0 ? void 0 : _a.getAttribute("metadata")) !== null && _b !== void 0 ? _b : null;
+}
+const store = createStore(getAllPcoMeta());
+const recentlyVisitableMetadataStore = createStore({
+  metadata: getRecentlyVisitableMetadata()
+});
+function sync() {
+  const nextState = getAllPcoMeta();
+  if (!shallowCompare(store.getState(), nextState)) store.setState(nextState);
+  const metadata = getRecentlyVisitableMetadata();
+  if (recentlyVisitableMetadataStore.getState().metadata !== metadata) {
+    recentlyVisitableMetadataStore.setState({
+      metadata
+    });
+  }
+}
+const observer = new MutationObserver(sync);
+let hasTriggeredObserve = false;
+function observe() {
+  if (hasTriggeredObserve) return;
+  hasTriggeredObserve = true;
+  // The module-load snapshot above can predate meta tags that appear later
+  // in <head> (e.g. pco:resource, yielded right before </head>) if this
+  // module's own script tag isn't deferred and runs mid-parse. Those tags
+  // never mutate afterward, so the observer alone would never catch them.
+  // Re-read once now, since observe() is only called once a consumer is
+  // actually mounting, which is always after the document has fully parsed.
+  sync();
+  observer.observe(document.head, {
+    attributes: true,
+    childList: true,
+    subtree: true
+  });
+}
+function usePcoMeta() {
+  observe();
+  return shim.useSyncExternalStore(store.subscribe, () => store.getState());
+}
+function useRecentlyVisitableMetadata() {
+  observe();
+  return shim.useSyncExternalStore(recentlyVisitableMetadataStore.subscribe, () => recentlyVisitableMetadataStore.getState().metadata);
+}
+
+const MAX_ENTRIES$1 = 20;
+const FORMAT_VERSION = 1;
+const MAX_TEXT_LENGTH = 200;
+const PRODUCTS = ["accounts", "calendar", "check-ins", "giving", "groups", "home", "login", "people", "publishing", "registrations", "services"];
+function isId(value) {
+  return value !== "" && Array.from(value).every(character => character >= "0" && character <= "9");
+}
+// A PCRL looks like `<product>/v2/<resource_type>/<id>`.
+function isPcrl(value) {
+  const segments = value.split("/");
+  return segments.length === 4 && PRODUCTS.some(product => product === segments[0]) && isId(segments[3]);
+}
+function isNonBlankString(value) {
+  return typeof value === "string" && value.trim() !== "";
+}
+function isRecord(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function entryKey(entry) {
+  if (entry.type === "resource") {
+    return `resource:${entry.pcrl}`;
+  } else {
+    return `page:${entry.product}:${entry.path}`;
+  }
+}
+function isEntry(value) {
+  if (!isRecord(value)) {
+    return false;
+  } else if (value.type === "resource") {
+    return typeof value.pcrl === "string" && isPcrl(value.pcrl);
+  } else if (value.type === "page") {
+    return isNonBlankString(value.product) && isNonBlankString(value.title) && isNonBlankString(value.path) && typeof value.details === "string";
+  } else {
+    return false;
+  }
+}
+// Cuts on code points so a surrogate pair is never split.
+function clampText(value) {
+  return Array.from(value).slice(0, MAX_TEXT_LENGTH).join("");
+}
+function clampEntry(entry) {
+  if (entry.type === "resource") {
+    return entry;
+  } else {
+    return {
+      ...entry,
+      details: clampText(entry.details),
+      title: clampText(entry.title)
+    };
+  }
+}
+// Recents are disposable: anything unexpected reads as an empty list (or, for
+// a single bad entry, a list without it) rather than throwing.
+function parseRecentlyVisited(value, personId) {
+  let parsed = null;
+  try {
+    parsed = JSON.parse(value !== null && value !== void 0 ? value : "null");
+  } catch {
+    parsed = null;
+  }
+  if (isRecord(parsed) && parsed.v === FORMAT_VERSION && parsed.person === personId && Array.isArray(parsed.entries)) {
+    return parsed.entries.filter(isEntry);
+  } else {
+    return [];
+  }
+}
+function addVisit(entries, visit) {
+  const key = entryKey(visit);
+  return [clampEntry(visit), ...entries.filter(entry => entryKey(entry) !== key)].slice(0, MAX_ENTRIES$1);
+}
+function serializeRecentlyVisited(entries, personId) {
+  return JSON.stringify({
+    entries,
+    person: personId,
+    v: FORMAT_VERSION
+  });
+}
+
+// The product whose URL, in this environment, has the current page's host.
+// Reversing pcoUrl handles every environment @planningcenter/url knows about,
+// and guarantees the stored product rebuilds a working link.
+function currentProduct() {
+  var _a;
+  return (_a = PRODUCTS.find(product => new URL(pcoUrl$1.pcoUrl(product)).hostname === window.location.hostname)) !== null && _a !== void 0 ? _a : null;
+}
+function detailsFromMetadata(metadata) {
+  var _a;
+  try {
+    const details = (_a = JSON.parse(metadata !== null && metadata !== void 0 ? metadata : "{}")) === null || _a === void 0 ? void 0 : _a.details;
+    return typeof details === "string" ? details : "";
+  } catch {
+    return "";
+  }
+}
+// pco:resource is the more specific signal, so it wins when both tags are
+// present. A resource that isn't a PCRL is ignored rather than recorded.
+function visitFromPage({
+  metadata,
+  resource,
+  title
+}) {
+  const product = currentProduct();
+  if (resource && isPcrl(resource)) {
+    return {
+      pcrl: resource,
+      type: "resource"
+    };
+  } else if (title && title.trim() !== "" && product) {
+    return {
+      details: detailsFromMetadata(metadata),
+      path: window.location.pathname,
+      product,
+      title,
+      type: "page"
+    };
+  } else {
+    return null;
+  }
+}
+// The entry Recently Visited would record for the current page, or null when
+// the page isn't eligible. Shared by the recorder and the debug panel so the
+// panel always shows what actually gets stored.
+function useCurrentVisit() {
+  const {
+    recently_visitable: title,
+    resource
+  } = usePcoMeta();
+  const metadata = useRecentlyVisitableMetadata();
+  return React.useMemo(() => visitFromPage({
+    metadata,
+    resource,
+    title
+  }), [metadata, resource, title]);
+}
+// Products hand the person's ID to AppsProvider, not to the topbar itself,
+// and several pass it as a number.
+function useCurrentPersonId() {
+  const {
+    userId
+  } = useStore();
+  return userId == null ? undefined : String(userId);
+}
+
+// Per-origin localStorage is a stopgap: each product keeps its own list until
+// PCA-409 moves this to storage shared across product subdomains. Only this
+// file should need to change when it does.
+function storageKey({
+  env,
+  personId
+}) {
+  return `topbar.recently_visited.${env}.${personId}`;
+}
+// localStorage doesn't notify the tab that wrote it, so readers in this tab
+// learn about new visits from this counter instead.
+const changes = createStore({
+  version: 0
+});
+function readRecentlyVisited(scope) {
+  try {
+    return parseRecentlyVisited(localStorage.getItem(storageKey(scope)), scope.personId);
+  } catch {
+    return [];
+  }
+}
+function recordVisit(visit, scope) {
+  if (isEntry(visit)) {
+    try {
+      localStorage.setItem(storageKey(scope), serializeRecentlyVisited(addVisit(readRecentlyVisited(scope), visit), scope.personId));
+      changes.setState({
+        version: changes.getState().version + 1
+      });
+    } catch {
+      // Storage can be full or blocked; recents are disposable.
+    }
+  }
+}
+function useRecentlyVisited({
+  env,
+  personId
+}) {
+  const version = shim.useSyncExternalStore(changes.subscribe, () => changes.getState().version);
+  // `version` isn't read, but listing it re-reads storage after each visit.
+  return React.useMemo(() => personId ? readRecentlyVisited({
+    env,
+    personId
+  }) : [], [env, personId, version]);
+}
+
+// The versions home-mobile pins, so web and mobile read the same response
+// shapes. Some endpoints only exist from a version on: Registrations' me,
+// product_search_results, and pcrl_lookups need 2025-05-01.
+const API_VERSIONS = {
+  calendar: "2022-07-07",
+  "check-ins": "2025-05-28",
+  giving: "2019-10-18",
+  groups: "2023-07-10",
+  home: "2018-08-01",
+  people: "2023-03-21",
+  publishing: "2024-03-25",
+  registrations: "2025-05-01",
+  services: "2018-11-01"
+};
+// For a `/~api/{product}/v2/...` URL, the header that pins its product's
+// version.
+function apiVersionHeaders(url) {
+  const [,, product] = new URL(url).pathname.split("/");
+  const version = API_VERSIONS[product];
+  if (version) {
+    return {
+      "X-PCO-API-Version": version
+    };
+  } else {
+    return {};
+  }
+}
+
+const CACHE_TTL_MS = 60000;
+const MAX_ENTRIES = 50;
+const cache = new Map();
+function cachedRequest(url) {
+  const cached = cache.get(url);
+  if (cached && cached.expiresAt > Date.now()) {
+    // Re-inserting keeps the Map in recently-used order for eviction.
+    cache.delete(url);
+    cache.set(url, cached);
+    return cached.promise;
+  } else {
+    return fetchIntoCache(url);
+  }
+}
+function fetchIntoCache(url) {
+  const promise = apiRequest(defaultFetch, url, {
+    headers: apiVersionHeaders(url)
+  }).then(({
+    json,
+    ok
+  }) => {
+    if (!ok || json === null) throw new Error(`Request failed: ${url}`);
+    return json;
+  });
+  // In-flight entries never expire, so every caller shares the one fetch.
+  const entry = {
+    expiresAt: Infinity,
+    promise
+  };
+  cache.set(url, entry);
+  promise.then(() => entry.expiresAt = Date.now() + CACHE_TTL_MS, () => cache.get(url) === entry && cache.delete(url));
+  if (cache.size > MAX_ENTRIES) cache.delete(cache.keys().next().value);
+  return promise;
+}
+function useCachedRequest(url) {
+  const [settled, setSettled] = React.useState();
+  React.useEffect(() => {
+    if (url) {
+      let current = true;
+      cachedRequest(url).then(data => current && setSettled({
+        data,
+        url
+      }), () => current && setSettled({
+        failed: true,
+        url
+      }));
+      return () => {
+        current = false;
+      };
+    } else {
+      return undefined;
+    }
+  }, [url]);
+  if (!url) {
+    return {
+      status: "idle"
+    };
+  } else if ((settled === null || settled === void 0 ? void 0 : settled.url) !== url) {
+    return {
+      data: settled && "data" in settled ? settled.data : undefined,
+      status: "loading"
+    };
+  } else if ("data" in settled) {
+    return {
+      data: settled.data,
+      status: "done"
+    };
+  } else {
+    return {
+      status: "error"
+    };
+  }
+}
+// One request per URL, for callers that fan out to a varying number of
+// endpoints. Unlike `useCachedRequest`, a URL that hasn't settled yet has no
+// earlier data to fall back on.
+function useCachedRequests(urls) {
+  const [settled, setSettled] = React.useState({});
+  // Keyed by value because each settle re-renders the caller, and a caller
+  // that builds a fresh `urls` array on render would otherwise loop forever.
+  const key = urls.join("\n");
+  React.useEffect(() => {
+    let current = true;
+    const settle = result => current && setSettled(prev => ({
+      ...prev,
+      [result.url]: result
+    }));
+    for (const url of key.split("\n").filter(Boolean)) {
+      cachedRequest(url).then(data => settle({
+        data,
+        url
+      }), () => settle({
+        failed: true,
+        url
+      }));
+    }
+    return () => {
+      current = false;
+    };
+  }, [key]);
+  return urls.map(url => {
+    const result = settled[url];
+    if (!result) {
+      return {
+        status: "loading"
+      };
+    } else if ("data" in result) {
+      return {
+        data: result.data,
+        status: "done"
+      };
+    } else {
+      return {
+        status: "error"
+      };
+    }
+  });
+}
+
+const pcoUrl = pcoUrl$1;
+
+// Resolves resource entries with one pcrl_lookups request per product.
+// pcrl_lookups reports forbidden and deleted resources the same way, so both
+// become `unresolved`, as does every entry in a batch whose request failed.
+function useHydratedRecentlyVisited(entries, env) {
+  const batches = React.useMemo(() => batchByProduct(entries), [entries]);
+  const urls = React.useMemo(() => batches.map(([product, pcrls]) => pcrlLookupsUrl(product, pcrls)), [batches]);
+  const requests = useCachedRequests(urls);
+  const lookups = new Map();
+  batches.forEach(([, pcrls], index) => {
+    const request = requests[index];
+    for (const pcrl of pcrls) lookups.set(pcrl, lookupFor(pcrl, request));
+  });
+  return entries.map(entry => {
+    var _a;
+    if (entry.type === "page") {
+      return {
+        entry,
+        status: "page",
+        url: pageUrl(entry, env)
+      };
+    } else {
+      const lookup = (_a = lookups.get(entry.pcrl)) !== null && _a !== void 0 ? _a : {
+        status: "unresolved"
+      };
+      if (lookup.status === "resolved") {
+        return {
+          ...lookup,
+          entry,
+          url: lookup.result.attributes.url
+        };
+      } else {
+        return {
+          entry,
+          status: lookup.status
+        };
+      }
+    }
+  });
+}
+function lookupFor(pcrl, request) {
+  if (request.status === "done") {
+    const result = request.data.data.find(({
+      attributes
+    }) => attributes.pcrl === pcrl);
+    return result ? {
+      result,
+      status: "resolved"
+    } : {
+      status: "unresolved"
+    };
+  } else if (request.status === "error") {
+    return {
+      status: "unresolved"
+    };
+  } else {
+    return {
+      status: "loading"
+    };
+  }
+}
+const RECENTLY_VISITED_PAGE_SIZE = 10;
+// A PCRL can only be looked up through its own product's API, which may not be
+// the product it was visited in. Each page of entries is batched on its own,
+// so loading the next page leaves earlier pages' URLs, and so their cache
+// keys, alone. Sorting keeps them stable as a page reorders.
+function batchByProduct(entries) {
+  var _a;
+  const batches = [];
+  for (let start = 0; start < entries.length; start += RECENTLY_VISITED_PAGE_SIZE) {
+    const page = new Map();
+    for (const entry of entries.slice(start, start + RECENTLY_VISITED_PAGE_SIZE)) {
+      if (entry.type === "resource") {
+        const [product] = entry.pcrl.split("/");
+        page.set(product, [...((_a = page.get(product)) !== null && _a !== void 0 ? _a : []), entry.pcrl]);
+      }
+    }
+    for (const [product, pcrls] of page) {
+      batches.push([product, [...pcrls].sort()]);
+    }
+  }
+  return batches;
+}
+function pcrlLookupsUrl(product, pcrls) {
+  const params = new URLSearchParams({
+    "where[pcrl]": pcrls.join(",")
+  });
+  return `${window.location.origin}/~api/${product}/v2/pcrl_lookups?${params}`;
+}
+// Built from the product rather than the current origin, so it stays right
+// once PCA-409 shares one list across product subdomains.
+function pageUrl(entry, env) {
+  return `${pcoUrl(env)(entry.product)}${entry.path}`;
+}
+
 var styles$a = {"result":"result-WCnxr"};
 
 function SearchResult({
   highlighted,
   id,
   onHighlight,
-  result
+  subtitle,
+  title,
+  url
 }) {
-  const {
-    metadata,
-    title,
-    url
-  } = result.attributes;
   const ref = React.useRef(null);
   React.useEffect(() => {
     var _a;
@@ -3362,10 +3858,7 @@ function SearchResult({
     ref: ref,
     role: "option",
     tabIndex: -1
-  }, /*#__PURE__*/React.createElement("div", null, title), /*#__PURE__*/React.createElement("div", null, summarize(metadata)));
-}
-function summarize(metadata) {
-  return Object.values(metadata !== null && metadata !== void 0 ? metadata : {}).filter(value => typeof value === "string" && value !== "").join(" · ");
+  }, /*#__PURE__*/React.createElement("div", null, title), /*#__PURE__*/React.createElement("div", null, subtitle));
 }
 
 const resultId = (listboxId, index) => `${listboxId}-result-${index}`;
@@ -3437,83 +3930,127 @@ function ResultGroups({
         id: resultId(id, resultIndex),
         key: result.id,
         onHighlight: () => onHighlight(resultIndex),
-        result: result
+        subtitle: summarize(result.attributes.metadata),
+        title: result.attributes.title,
+        url: result.attributes.url
       });
     }));
   }));
 }
+function summarize(metadata) {
+  return Object.values(metadata !== null && metadata !== void 0 ? metadata : {}).filter(value => typeof value === "string" && value !== "").join(" · ");
+}
 
-const CACHE_TTL_MS = 60000;
-const MAX_ENTRIES$1 = 50;
-const cache = new Map();
-function cachedRequest(url) {
-  const cached = cache.get(url);
-  if (cached && cached.expiresAt > Date.now()) {
-    // Re-inserting keeps the Map in recently-used order for eviction.
-    cache.delete(url);
-    cache.set(url, cached);
-    return cached.promise;
+function useRecentVisits(env) {
+  const personId = useCurrentPersonId();
+  const entries = useRecentlyVisited({
+    env,
+    personId
+  });
+  const [count, setCount] = React.useState(RECENTLY_VISITED_PAGE_SIZE);
+  const shown = React.useMemo(() => entries.slice(0, count), [entries, count]);
+  const hydrated = useHydratedRecentlyVisited(shown, env);
+  // Resources show up once they're found. Ones that can't be found anymore,
+  // or that the person can no longer see, are left out.
+  const visits = hydrated.filter(isShown);
+  const loading = hydrated.some(({
+    status
+  }) => status === "loading");
+  const showMore = React.useCallback(() => setCount(current => current + RECENTLY_VISITED_PAGE_SIZE), []);
+  return {
+    count,
+    hasMore: entries.length > count,
+    loading,
+    showMore,
+    visits
+  };
+}
+function isShown(visit) {
+  return visit.status === "page" || visit.status === "resolved";
+}
+function RecentlyVisited({
+  count,
+  hasMore,
+  highlightedIndex,
+  id,
+  loading,
+  onHighlight,
+  showMore,
+  visits
+}) {
+  const headingId = `${id}-heading`;
+  if (visits.length === 0 && !hasMore && !loading) {
+    return /*#__PURE__*/React.createElement("p", null, "Pages you visit will show up here.");
   } else {
-    return fetchIntoCache(url);
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+      id: headingId
+    }, "Recently visited"), /*#__PURE__*/React.createElement("div", {
+      "aria-labelledby": headingId,
+      id: id,
+      role: "listbox"
+    }, visits.map((visit, index) => (/*#__PURE__*/React.createElement(SearchResult, {
+      highlighted: index === highlightedIndex,
+      id: resultId(id, index),
+      key: entryKey(visit.entry),
+      onHighlight: () => onHighlight(index),
+      ...describeVisit(visit)
+    })))), hasMore && /*#__PURE__*/React.createElement(ShowMoreWhenVisible, {
+      key: count,
+      onVisible: showMore
+    }));
   }
 }
-function fetchIntoCache(url) {
-  const promise = apiRequest(defaultFetch, url).then(({
-    json,
-    ok
-  }) => {
-    if (!ok || json === null) throw new Error(`Request failed: ${url}`);
-    return json;
+function ShowMoreWhenVisible({
+  onVisible
+}) {
+  const ref = React.useRef(null);
+  React.useEffect(() => {
+    const observer = new IntersectionObserver(([entry]) => {
+      if (entry.isIntersecting) onVisible();
+    });
+    if (ref.current) observer.observe(ref.current);
+    return () => observer.disconnect();
+  }, [onVisible]);
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref
   });
-  // In-flight entries never expire, so every caller shares the one fetch.
-  const entry = {
-    expiresAt: Infinity,
-    promise
-  };
-  cache.set(url, entry);
-  promise.then(() => entry.expiresAt = Date.now() + CACHE_TTL_MS, () => cache.get(url) === entry && cache.delete(url));
-  if (cache.size > MAX_ENTRIES$1) cache.delete(cache.keys().next().value);
-  return promise;
 }
-function useCachedRequest(url) {
-  const [settled, setSettled] = React.useState();
-  React.useEffect(() => {
-    if (url) {
-      let current = true;
-      cachedRequest(url).then(data => current && setSettled({
-        data,
-        url
-      }), () => current && setSettled({
-        failed: true,
-        url
-      }));
-      return () => {
-        current = false;
-      };
-    } else {
-      return undefined;
-    }
-  }, [url]);
-  if (!url) {
-    return {
-      status: "idle"
-    };
-  } else if ((settled === null || settled === void 0 ? void 0 : settled.url) !== url) {
-    return {
-      data: settled && "data" in settled ? settled.data : undefined,
-      status: "loading"
-    };
-  } else if ("data" in settled) {
+// Unlike search results, recents come from every product, so each one names
+// its product and type.
+function describeVisit(visit) {
+  const subtitle = (...parts) => parts.filter(Boolean).join(" · ");
+  if (visit.status === "page") {
+    const {
+      details,
+      product,
+      title
+    } = visit.entry;
     return {
-      data: settled.data,
-      status: "done"
+      subtitle: subtitle(productName(product), details),
+      title,
+      url: visit.url
     };
   } else {
+    const {
+      metadata,
+      product,
+      title,
+      type
+    } = visit.result.attributes;
     return {
-      status: "error"
+      subtitle: subtitle(productName(product), type, summarize(metadata)),
+      title,
+      url: visit.url
     };
   }
 }
+// check-ins → Check-Ins
+function productName(slug) {
+  return slug.split("-").map(capitalize).join("-");
+}
+function capitalize(word) {
+  return word.charAt(0).toUpperCase() + word.slice(1);
+}
 
 const SEARCH_DEBOUNCE_MS = 300;
 function useProductSearch(product, term) {
@@ -3604,15 +4141,16 @@ const verticalStep = key => ({
   ArrowDown: 1,
   ArrowUp: -1
 })[key];
-function useResultNavigation(results) {
-  // Remembering which results the index belongs to puts the highlight back on
-  // the first result whenever new ones arrive, without an effect to reset it.
+// Remembering which list the index belongs to puts the highlight back on the
+// first option whenever a new list replaces it, without an effect to reset it.
+// A list that grows or fills in under the same `list` keeps its highlight.
+function useResultNavigation(options, list) {
   const [highlight, setHighlight] = React.useState({
     index: 0,
-    results
+    list
   });
-  const highlightedIndex = highlight.results === results ? highlight.index : 0;
-  const highlighted = results[highlightedIndex];
+  const highlightedIndex = highlight.list === list ? highlight.index : 0;
+  const highlighted = options[highlightedIndex];
   const [copiedUrl, setCopiedUrl] = React.useState(null);
   React.useEffect(() => {
     if (copiedUrl) {
@@ -3622,30 +4160,30 @@ function useResultNavigation(results) {
       return undefined;
     }
   }, [copiedUrl]);
-  const highlightIndex = React.useCallback(index => setHighlight(current => current.results === results && current.index === index ? current : {
+  const highlightIndex = React.useCallback(index => setHighlight(current => current.list === list && current.index === index ? current : {
     index,
-    results
-  }), [results]);
+    list
+  }), [list]);
   const handleKeyDown = event => {
     const step = verticalStep(event.key);
-    if (step && results.length > 0) {
+    if (step && options.length > 0) {
       event.preventDefault();
-      highlightIndex((highlightedIndex + step + results.length) % results.length);
+      highlightIndex((highlightedIndex + step + options.length) % options.length);
     } else if (event.key === "Enter" && highlighted && !event.nativeEvent.isComposing) {
       event.preventDefault();
-      open(highlighted.attributes.url, {
+      open(highlighted.url, {
         newTab: hasCommandKey(event)
       });
     } else if (isCopyShortcut(event) && highlighted && !hasSelectedText(event.currentTarget)) {
       event.preventDefault();
       const {
         url
-      } = highlighted.attributes;
+      } = highlighted;
       navigator.clipboard.writeText(url).then(() => setCopiedUrl(url));
     }
   };
   return {
-    copied: copiedUrl !== null && copiedUrl === (highlighted === null || highlighted === void 0 ? void 0 : highlighted.attributes.url),
+    copied: copiedUrl !== null && copiedUrl === (highlighted === null || highlighted === void 0 ? void 0 : highlighted.url),
     handleKeyDown,
     highlightIndex,
     highlighted,
@@ -3670,29 +4208,66 @@ function hasSelectedText(element) {
 }
 
 const SEARCHABLE_PRODUCTS = [{
+  appName: "Calendar",
+  slug: "calendar"
+}, {
+  appName: "Check-Ins",
+  slug: "check-ins"
+}, {
+  appName: "Giving",
+  slug: "giving"
+}, {
   appName: "Groups",
   slug: "groups"
 }, {
   appName: "People",
   slug: "people"
+}, {
+  appName: "Publishing",
+  slug: "publishing"
+}, {
+  appName: "Registrations",
+  slug: "registrations"
 }, {
   appName: "Services",
   slug: "services"
 }];
 const PERMISSION_CHECKS = {
+  "check-ins": () => fetchMe("check-ins", "permission").then(({
+    permission
+  }) => permission !== null),
+  giving: personId => {
+    if (personId === undefined) {
+      return Promise.reject(new Error("No person to check Giving access for"));
+    } else {
+      return fetchAttributes(`giving/v2/person_permissions/${personId}`, {
+        "fields[PersonPermissions]": "can_search"
+      }).then(({
+        can_search
+      }) => can_search);
+    }
+  },
   people: () => fetchMe("people", "people_permissions,site_administrator").then(({
     people_permissions,
     site_administrator
   }) => site_administrator || people_permissions !== null),
+  registrations: () => fetchMe("registrations", "can_search").then(({
+    can_search
+  }) => can_search),
   services: () => fetchMe("services", "can_search").then(({
     can_search
   }) => can_search)
 };
 function fetchMe(product, fields) {
-  const params = new URLSearchParams({
+  return fetchAttributes(`${product}/v2/me`, {
     "fields[Person]": fields
   });
-  return apiRequest(defaultFetch, `${window.location.origin}/~api/${product}/v2/me?${params}`).then(({
+}
+function fetchAttributes(path, params) {
+  const url = `${window.location.origin}/~api/${path}?${new URLSearchParams(params)}`;
+  return apiRequest(defaultFetch, url, {
+    headers: apiVersionHeaders(url)
+  }).then(({
     json,
     ok
   }) => {
@@ -3703,7 +4278,7 @@ function fetchMe(product, fields) {
 // Permissions rarely change mid-session, so a successful check is kept until
 // the page reloads. A failed one is dropped so a remount tries again.
 const permissionCache = new Map();
-function canSearch(slug) {
+function canSearch(slug, personId) {
   const check = PERMISSION_CHECKS[slug];
   const cached = permissionCache.get(slug);
   if (!check) {
@@ -3711,7 +4286,7 @@ function canSearch(slug) {
   } else if (cached) {
     return cached;
   } else {
-    const promise = check().catch(() => {
+    const promise = check(personId).catch(() => {
       permissionCache.delete(slug);
       return false;
     });
@@ -3725,16 +4300,18 @@ function useSearchableProducts(apps) {
   const accessibleKey = inSwitcherOrder(apps).map(({
     slug
   }) => slug).join(",");
+  const personId = useCurrentPersonId();
   const [settled, setSettled] = React.useState();
   React.useEffect(() => {
     let current = true;
     const accessible = accessibleKey.split(",").flatMap(slug => SEARCHABLE_PRODUCTS.filter(product => product.slug === slug));
     Promise.all(accessible.map(({
       slug
-    }) => canSearch(slug))).then(allowed => {
+    }) => canSearch(slug, personId))).then(allowed => {
       if (current) {
         setSettled({
           accessibleKey,
+          personId,
           products: accessible.filter((_, index) => allowed[index])
         });
       }
@@ -3742,8 +4319,8 @@ function useSearchableProducts(apps) {
     return () => {
       current = false;
     };
-  }, [accessibleKey]);
-  if ((settled === null || settled === void 0 ? void 0 : settled.accessibleKey) === accessibleKey) {
+  }, [accessibleKey, personId]);
+  if ((settled === null || settled === void 0 ? void 0 : settled.accessibleKey) === accessibleKey && settled.personId === personId) {
     return {
       products: settled.products,
       status: "done"
@@ -3764,11 +4341,13 @@ const isLegacySearchShortcut = event => event.key === "/" && !event.altKey && !e
 const isTypingKey = event => event.key.length === 1 && event.key !== " " && !event.altKey && !event.ctrlKey && !event.metaKey;
 const isTypingIn = target => target instanceof Element && target.closest('input, select, textarea, [contenteditable]:not([contenteditable="false"])') !== null;
 function ProductSearch({
-  apps
+  apps,
+  env
 }) {
   const searchable = useSearchableProducts(apps);
   if (searchable.status === "done" && searchable.products.length > 0) {
     return /*#__PURE__*/React.createElement(SearchButtonAndDialog, {
+      env: env,
       products: searchable.products
     });
   } else {
@@ -3776,6 +4355,7 @@ function ProductSearch({
   }
 }
 function SearchButtonAndDialog({
+  env,
   products
 }) {
   const [open, setOpen] = React.useState(false);
@@ -3813,10 +4393,15 @@ function SearchButtonAndDialog({
     onClose: () => setOpen(false),
     open: open
   }, /*#__PURE__*/React.createElement(SearchPanel, {
+    env: env,
     products: products
   })));
 }
+// Keys the recents list for navigation, so the highlight stays put as more
+// recents load and as their lookups answer.
+const RECENTS = "recents";
 function SearchPanel({
+  env,
   products
 }) {
   var _a, _b;
@@ -3833,7 +4418,23 @@ function SearchPanel({
     var _a;
     return (_a = groups === null || groups === void 0 ? void 0 : groups.flatMap(group => group.results)) !== null && _a !== void 0 ? _a : [];
   }, [groups]);
-  const navigation = useResultNavigation(results);
+  const recents = useRecentVisits(env);
+  const options = hasTerm ? results.map(({
+    attributes
+  }) => ({
+    label: attributes.title,
+    url: attributes.url
+  })) : recents.visits.map(visit => {
+    const {
+      title,
+      url
+    } = describeVisit(visit);
+    return {
+      label: title,
+      url
+    };
+  });
+  const navigation = useResultNavigation(options, hasTerm ? results : RECENTS);
   const {
     highlightedIndex
   } = navigation;
@@ -3859,8 +4460,8 @@ function SearchPanel({
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("input", {
     "aria-activedescendant": highlightedIndex === null ? undefined : resultId(listboxId, highlightedIndex),
     "aria-autocomplete": "list",
-    "aria-controls": results.length > 0 ? listboxId : undefined,
-    "aria-expanded": results.length > 0,
+    "aria-controls": options.length > 0 ? listboxId : undefined,
+    "aria-expanded": options.length > 0,
     "aria-label": "Search",
     autoFocus: true,
     onChange: event => setTerm(event.target.value),
@@ -3876,17 +4477,22 @@ function SearchPanel({
     onSelect: setSelectedSlug,
     products: products,
     selected: product
-  }, /*#__PURE__*/React.createElement(SearchResults, {
+  }, hasTerm ? (/*#__PURE__*/React.createElement(SearchResults, {
     highlightedIndex: highlightedIndex,
     id: listboxId,
     label: `${product.appName} results`,
     onHighlight: navigation.highlightIndex,
     search: search,
     term: term
-  })), /*#__PURE__*/React.createElement("div", {
+  })) : (/*#__PURE__*/React.createElement(RecentlyVisited, {
+    highlightedIndex: highlightedIndex,
+    id: listboxId,
+    onHighlight: navigation.highlightIndex,
+    ...recents
+  }))), /*#__PURE__*/React.createElement("div", {
     "aria-live": "polite",
     className: styles$c.visuallyHidden
-  }, announceHighlight ? (_b = navigation.highlighted) === null || _b === void 0 ? void 0 : _b.attributes.title : null), /*#__PURE__*/React.createElement(KeyboardHints, {
+  }, announceHighlight ? (_b = navigation.highlighted) === null || _b === void 0 ? void 0 : _b.label : null), /*#__PURE__*/React.createElement(KeyboardHints, {
     copied: navigation.copied
   }));
 }
@@ -3905,249 +4511,6 @@ function initialProduct(products) {
   return (_c = (_b = (_a = bySlug(lastProduct)) !== null && _a !== void 0 ? _a : bySlug("people")) !== null && _b !== void 0 ? _b : bySlug("services")) !== null && _c !== void 0 ? _c : products[0];
 }
 
-function parseValue(element) {
-  const datatype = element.getAttribute("datatype");
-  switch (datatype) {
-    case "boolean":
-      return element.content === "true" || element.content === "1";
-    default:
-      return element.content;
-  }
-}
-function getAllPcoMeta() {
-  const elements = document.head.querySelectorAll(`meta[property^="pco:"]`);
-  const meta = {};
-  elements.forEach(e => {
-    const property = e.getAttribute("property");
-    meta[property.substring("pco:".length)] = parseValue(e);
-  });
-  return meta;
-}
-// usePcoMeta only reads each tag's content. Recently Visited also needs the
-// pco:recently_visitable tag's `metadata` attribute, which can change while
-// the content stays the same, so it is tracked in its own store.
-function getRecentlyVisitableMetadata() {
-  var _a, _b;
-  return (_b = (_a = document.head.querySelector(`meta[property="pco:recently_visitable"]`)) === null || _a === void 0 ? void 0 : _a.getAttribute("metadata")) !== null && _b !== void 0 ? _b : null;
-}
-const store = createStore(getAllPcoMeta());
-const recentlyVisitableMetadataStore = createStore({
-  metadata: getRecentlyVisitableMetadata()
-});
-function sync() {
-  const nextState = getAllPcoMeta();
-  if (!shallowCompare(store.getState(), nextState)) store.setState(nextState);
-  const metadata = getRecentlyVisitableMetadata();
-  if (recentlyVisitableMetadataStore.getState().metadata !== metadata) {
-    recentlyVisitableMetadataStore.setState({
-      metadata
-    });
-  }
-}
-const observer = new MutationObserver(sync);
-let hasTriggeredObserve = false;
-function observe() {
-  if (hasTriggeredObserve) return;
-  hasTriggeredObserve = true;
-  // The module-load snapshot above can predate meta tags that appear later
-  // in <head> (e.g. pco:resource, yielded right before </head>) if this
-  // module's own script tag isn't deferred and runs mid-parse. Those tags
-  // never mutate afterward, so the observer alone would never catch them.
-  // Re-read once now, since observe() is only called once a consumer is
-  // actually mounting, which is always after the document has fully parsed.
-  sync();
-  observer.observe(document.head, {
-    attributes: true,
-    childList: true,
-    subtree: true
-  });
-}
-function usePcoMeta() {
-  observe();
-  return shim.useSyncExternalStore(store.subscribe, () => store.getState());
-}
-function useRecentlyVisitableMetadata() {
-  observe();
-  return shim.useSyncExternalStore(recentlyVisitableMetadataStore.subscribe, () => recentlyVisitableMetadataStore.getState().metadata);
-}
-
-const MAX_ENTRIES = 20;
-const FORMAT_VERSION = 1;
-const MAX_TEXT_LENGTH = 200;
-const PRODUCTS = ["accounts", "calendar", "check-ins", "giving", "groups", "home", "login", "people", "publishing", "registrations", "services"];
-function isId(value) {
-  return value !== "" && Array.from(value).every(character => character >= "0" && character <= "9");
-}
-// A PCRL looks like `<product>/v2/<resource_type>/<id>`.
-function isPcrl(value) {
-  const segments = value.split("/");
-  return segments.length === 4 && PRODUCTS.some(product => product === segments[0]) && isId(segments[3]);
-}
-function isNonBlankString(value) {
-  return typeof value === "string" && value.trim() !== "";
-}
-function isRecord(value) {
-  return typeof value === "object" && value !== null && !Array.isArray(value);
-}
-function entryKey(entry) {
-  if (entry.type === "resource") {
-    return `resource:${entry.pcrl}`;
-  } else {
-    return `page:${entry.product}:${entry.path}`;
-  }
-}
-function isEntry(value) {
-  if (!isRecord(value)) {
-    return false;
-  } else if (value.type === "resource") {
-    return typeof value.pcrl === "string" && isPcrl(value.pcrl);
-  } else if (value.type === "page") {
-    return isNonBlankString(value.product) && isNonBlankString(value.title) && isNonBlankString(value.path) && typeof value.details === "string";
-  } else {
-    return false;
-  }
-}
-// Cuts on code points so a surrogate pair is never split.
-function clampText(value) {
-  return Array.from(value).slice(0, MAX_TEXT_LENGTH).join("");
-}
-function clampEntry(entry) {
-  if (entry.type === "resource") {
-    return entry;
-  } else {
-    return {
-      ...entry,
-      details: clampText(entry.details),
-      title: clampText(entry.title)
-    };
-  }
-}
-// Recents are disposable: anything unexpected reads as an empty list (or, for
-// a single bad entry, a list without it) rather than throwing.
-function parseRecentlyVisited(value, personId) {
-  let parsed = null;
-  try {
-    parsed = JSON.parse(value !== null && value !== void 0 ? value : "null");
-  } catch {
-    parsed = null;
-  }
-  if (isRecord(parsed) && parsed.v === FORMAT_VERSION && parsed.person === personId && Array.isArray(parsed.entries)) {
-    return parsed.entries.filter(isEntry);
-  } else {
-    return [];
-  }
-}
-function addVisit(entries, visit) {
-  const key = entryKey(visit);
-  return [clampEntry(visit), ...entries.filter(entry => entryKey(entry) !== key)].slice(0, MAX_ENTRIES);
-}
-function serializeRecentlyVisited(entries, personId) {
-  return JSON.stringify({
-    entries,
-    person: personId,
-    v: FORMAT_VERSION
-  });
-}
-
-// The product whose URL, in this environment, has the current page's host.
-// Reversing pcoUrl handles every environment @planningcenter/url knows about,
-// and guarantees the stored product rebuilds a working link.
-function currentProduct() {
-  var _a;
-  return (_a = PRODUCTS.find(product => new URL(pcoUrl$1.pcoUrl(product)).hostname === window.location.hostname)) !== null && _a !== void 0 ? _a : null;
-}
-function detailsFromMetadata(metadata) {
-  var _a;
-  try {
-    const details = (_a = JSON.parse(metadata !== null && metadata !== void 0 ? metadata : "{}")) === null || _a === void 0 ? void 0 : _a.details;
-    return typeof details === "string" ? details : "";
-  } catch {
-    return "";
-  }
-}
-// pco:resource is the more specific signal, so it wins when both tags are
-// present. A resource that isn't a PCRL is ignored rather than recorded.
-function visitFromPage({
-  metadata,
-  resource,
-  title
-}) {
-  const product = currentProduct();
-  if (resource && isPcrl(resource)) {
-    return {
-      pcrl: resource,
-      type: "resource"
-    };
-  } else if (title && title.trim() !== "" && product) {
-    return {
-      details: detailsFromMetadata(metadata),
-      path: window.location.pathname,
-      product,
-      title,
-      type: "page"
-    };
-  } else {
-    return null;
-  }
-}
-// The entry Recently Visited would record for the current page, or null when
-// the page isn't eligible. Shared by the recorder and the debug panel so the
-// panel always shows what actually gets stored.
-function useCurrentVisit() {
-  const {
-    recently_visitable: title,
-    resource
-  } = usePcoMeta();
-  const metadata = useRecentlyVisitableMetadata();
-  return React.useMemo(() => visitFromPage({
-    metadata,
-    resource,
-    title
-  }), [metadata, resource, title]);
-}
-// Products hand the person's ID to AppsProvider, not to the topbar itself,
-// and several pass it as a number.
-function useCurrentPersonId() {
-  const {
-    userId
-  } = useStore();
-  return userId == null ? undefined : String(userId);
-}
-
-// Per-origin localStorage is a stopgap: each product keeps its own list until
-// PCA-409 moves this to storage shared across product subdomains. Only this
-// file should need to change when it does.
-function storageKey({
-  env,
-  personId
-}) {
-  return `topbar.recently_visited.${env}.${personId}`;
-}
-// localStorage doesn't notify the tab that wrote it, so readers in this tab
-// learn about new visits from this counter instead.
-const changes = createStore({
-  version: 0
-});
-function readRecentlyVisited(scope) {
-  try {
-    return parseRecentlyVisited(localStorage.getItem(storageKey(scope)), scope.personId);
-  } catch {
-    return [];
-  }
-}
-function recordVisit(visit, scope) {
-  if (isEntry(visit)) {
-    try {
-      localStorage.setItem(storageKey(scope), serializeRecentlyVisited(addVisit(readRecentlyVisited(scope), visit), scope.personId));
-      changes.setState({
-        version: changes.getState().version + 1
-      });
-    } catch {
-      // Storage can be full or blocked; recents are disposable.
-    }
-  }
-}
-
 function useRecordRecentlyVisited({
   enabled,
   env
@@ -4437,7 +4800,8 @@ const NotSmallTopbar = ({
       margin: "auto"
     }
   }), !notificationsEnabled && notifications(), productSearchEnabled ? (/*#__PURE__*/React.createElement(ProductSearch, {
-    apps: props.apps
+    apps: props.apps,
+    env: props.env
   })) : search({
     hideRoutes: () => setRoutesVisible(false),
     showRoutes: () => setRoutesVisible(true)
@@ -32570,7 +32934,7 @@ const SmallTopbar = ({
       setProductSwitcherVisible(false);
       setRoutesMenuVisible(visible => !visible);
     } : null
-  }, /*#__PURE__*/React.createElement(CurrentRouteComponent, null, capitalize(currentRouteText)), props.routes.length > 0 && /*#__PURE__*/React.createElement(DisclosureChevronIcon, null)), /*#__PURE__*/React.createElement("button", {
+  }, /*#__PURE__*/React.createElement(CurrentRouteComponent, null, capitalize$1(currentRouteText)), props.routes.length > 0 && /*#__PURE__*/React.createElement(DisclosureChevronIcon, null)), /*#__PURE__*/React.createElement("button", {
     type: "button",
     className: styles$5["profile-button"],
     onClick: () => {
@@ -32763,8 +33127,24 @@ function Field({
     className: styles$4["debug-pco-resource-field-value"]
   }, value));
 }
+// Only staff ghosting or impersonating a person get pco:staff-access-level,
+// which keeps the panel away from regular users on staging.
 function DebugPcoResource({
   env
+}) {
+  const {
+    "staff-access-level": staffAccessLevel
+  } = usePcoMeta();
+  if (isPresent(staffAccessLevel)) {
+    return /*#__PURE__*/React.createElement(DebugPanel, {
+      env: env
+    });
+  } else {
+    return null;
+  }
+}
+function DebugPanel({
+  env
 }) {
   const {
     recently_visitable: recentlyVisitable,
@@ -32773,12 +33153,17 @@ function DebugPcoResource({
   const [lookup, setLookup] = React.useState({
     status: "idle"
   });
-  const hasResource = isPresent(resource);
+  const visit = useCurrentVisit();
+  const personId = useCurrentPersonId();
+  const recentlyVisited = useRecentlyVisited({
+    env,
+    personId
+  });
+  const pcrl = (visit === null || visit === void 0 ? void 0 : visit.type) === "resource" ? visit.pcrl : null;
   const hasRecentlyVisitable = isPresent(recentlyVisitable);
+  const hasInvalidResource = isPresent(resource) && !isPcrl(resource);
   React.useEffect(() => {
-    // pco:resource is the more specific signal, so it always wins when both
-    // tags are present.
-    const url = hasResource ? pcrlLookupUrl(resource, env) : null;
+    const url = pcrl ? pcrlLookupUrl(pcrl, env) : null;
     if (!url) {
       setLookup({
         status: "idle"
@@ -32810,7 +33195,7 @@ function DebugPcoResource({
     return () => {
       cancelled = true;
     };
-  }, [resource, env, hasResource]);
+  }, [pcrl, env]);
   return /*#__PURE__*/React.createElement("div", {
     className: classnames("staff-only", styles$4["debug-pco-resource"])
   }, /*#__PURE__*/React.createElement("div", {
@@ -32825,19 +33210,27 @@ function DebugPcoResource({
   }), /*#__PURE__*/React.createElement(Field, {
     label: "pco:recently_visitable",
     value: describeTag("recently_visitable", recentlyVisitable)
-  }), !hasResource && !hasRecentlyVisitable && (/*#__PURE__*/React.createElement("p", {
+  }), hasInvalidResource && (/*#__PURE__*/React.createElement("p", {
     className: styles$4["debug-pco-resource-note"]
-  }, "This page is not eligible for Recently Visited")), hasResource && hasRecentlyVisitable && (/*#__PURE__*/React.createElement("p", {
+  }, "pco:resource isn't a PCRL (product/v2/type/id), so Recently Visited ignores it.")), visit === null && (/*#__PURE__*/React.createElement("p", {
     className: styles$4["debug-pco-resource-note"]
-  }, "Both tags are present \u2014 pco:resource takes precedence for the Recently Visited entry.")), hasResource && lookup.status === "loading" && (/*#__PURE__*/React.createElement("p", {
+  }, "This page is not eligible for Recently Visited")), pcrl && hasRecentlyVisitable && (/*#__PURE__*/React.createElement("p", {
     className: styles$4["debug-pco-resource-note"]
-  }, "Looking up resource\u2026")), hasResource && lookup.status === "error" && (/*#__PURE__*/React.createElement("p", {
+  }, "Both tags are present \u2014 pco:resource takes precedence for the Recently Visited entry.")), pcrl && lookup.status === "loading" && (/*#__PURE__*/React.createElement("p", {
+    className: styles$4["debug-pco-resource-note"]
+  }, "Looking up resource\u2026")), pcrl && lookup.status === "error" && (/*#__PURE__*/React.createElement("p", {
+    className: styles$4["debug-pco-resource-note"]
+  }, lookup.message)), pcrl && lookup.status === "loaded" && (/*#__PURE__*/React.createElement("pre", {
+    className: styles$4["debug-pco-resource-json"]
+  }, JSON.stringify(lookup.json, null, 2))), (visit === null || visit === void 0 ? void 0 : visit.type) === "page" && (/*#__PURE__*/React.createElement("p", {
     className: styles$4["debug-pco-resource-note"]
-  }, lookup.message)), hasResource && lookup.status === "loaded" && (/*#__PURE__*/React.createElement("pre", {
+  }, "Recently Visited title: ", visit.title)), /*#__PURE__*/React.createElement("span", {
+    className: styles$4["debug-pco-resource-field-label"]
+  }, "Recently Visited"), personId ? (/*#__PURE__*/React.createElement("pre", {
     className: styles$4["debug-pco-resource-json"]
-  }, JSON.stringify(lookup.json, null, 2))), !hasResource && hasRecentlyVisitable && (/*#__PURE__*/React.createElement("p", {
+  }, JSON.stringify(recentlyVisited, null, 2))) : (/*#__PURE__*/React.createElement("p", {
     className: styles$4["debug-pco-resource-note"]
-  }, "Recently Visited title: ", recentlyVisitable)));
+  }, "No current person, so nothing is recorded.")));
 }
 
 var styles$3 = {"drawer-wrap":"drawer-wrap-J0rSL","is-visible":"is-visible-KTME8","drawer":"drawer-j7f4l"};
@@ -33042,15 +33435,50 @@ const SwitchView = ({
   }));
 };
 
+const collections = {
+  general: general__namespace,
+  toolbar: toolbar__namespace
+};
+const paths = collections;
+function Icon({
+  name,
+  size = 16,
+  style,
+  theme,
+  title,
+  ...props
+}) {
+  const [collection, symbol] = name.split(".");
+  return /*#__PURE__*/React.createElement("svg", {
+    "aria-hidden": title ? undefined : true,
+    fill: "currentColor",
+    height: size,
+    role: title ? "img" : undefined,
+    style: {
+      color: theme && `var(${theme})`,
+      flexShrink: 0,
+      ...style
+    },
+    viewBox: "0 0 16 16",
+    width: size,
+    ...props
+  }, title && /*#__PURE__*/React.createElement("title", null, title), /*#__PURE__*/React.createElement("path", {
+    d: paths[collection][symbol]
+  }));
+}
+
 var styles$2 = {"color-mode-switcher":"color-mode-switcher-JpczO","color-mode-switcher-label":"color-mode-switcher-label-3jPM2","color-mode-switcher-modes":"color-mode-switcher-modes-u-bic"};
 
 const COLOR_MODES = [{
+  icon: "toolbar.sun",
   label: "Light",
   value: "light"
 }, {
+  icon: "toolbar.moon",
   label: "Dark",
   value: "dark"
 }, {
+  icon: "toolbar.display",
   label: "System",
   value: "system"
 }];
@@ -33068,8 +33496,9 @@ function ColorModeSwitcher() {
   }, "Appearance", " "), /*#__PURE__*/React.createElement("div", {
     className: styles$2["color-mode-switcher-modes"]
   }, COLOR_MODES.map(({
-    value,
-    label
+    icon,
+    label,
+    value
   }) => (/*#__PURE__*/React.createElement("label", {
     key: value
   }, /*#__PURE__*/React.createElement("input", {
@@ -33086,8 +33515,9 @@ function ColorModeSwitcher() {
       document.documentElement.setAttribute(RESOLVED_COLOR_MODE_ATTRIBUTE, resolveColorMode(colorMode));
       updateColorMode(colorMode);
     }
-  }), /*#__PURE__*/React.createElement(ColorModeIcon, {
-    mode: value
+  }), /*#__PURE__*/React.createElement(Icon, {
+    name: icon,
+    size: 15
   }), label)))));
 }
 function updateColorMode(mode) {
@@ -33102,28 +33532,6 @@ function updateColorMode(mode) {
     method: "POST"
   });
 }
-const COLOR_MODE_ICON_PATHS = {
-  dark: "M12.66667,9.07579 C11.90047,9.42229 11.04997,9.61514 10.15457,9.61514 C6.78392,9.61514 4.05151,6.88275 4.05151,3.51215 C4.05151,2.61663 4.24438,1.76615 4.59086,1 C2.47336,1.95762 1,4.08858 1,6.56366 C1,9.93423 3.73241,12.66663 7.103,12.66663 C9.57807,12.66663 11.70907,11.19333 12.66667,9.07579 Z",
-  light: "M6.83333,1 L6.83333,2.16667 M6.83333,11.50003 L6.83333,12.66663 M2.16667,6.83334 L1,6.83334 M3.51657,3.51657 L2.69161,2.69161 M10.1501,3.51657 L10.9751,2.69161 M3.51657,10.15253 L2.69161,10.97743 M10.1501,10.15253 L10.9751,10.97743 M12.6667,6.83334 L11.5,6.83334 M9.75,6.83334 C9.75,8.44415 8.44415,9.75 6.83333,9.75 C5.2225,9.75 3.91667,8.44415 3.91667,6.83334 C3.91667,5.22251 5.2225,3.91667 6.83333,3.91667 C8.44415,3.91667 9.75,5.22251 9.75,6.83334 Z",
-  system: "M4.75,12.50003 L9.41667,12.50003 M7.08334,10.16667 L7.08334,12.50003 M4.05,10.16667 L10.11665,10.16667 C11.09675,10.16667 11.58675,10.16667 11.96115,9.97592 C12.29045,9.80815 12.55815,9.54046 12.72595,9.21117 C12.91665,8.83678 12.91665,8.34678 12.91665,7.36667 L12.91665,4.8 C12.91665,3.81991 12.91665,3.32986 12.72595,2.95552 C12.55815,2.62623 12.29045,2.35852 11.96115,2.19074 C11.58675,2 11.09675,2 10.11665,2 L4.05,2 C3.06991,2 2.57986,2 2.20552,2.19074 C1.87623,2.35852 1.60852,2.62623 1.44074,2.95552 C1.25,3.32986 1.25,3.81991 1.25,4.8 L1.25,7.36667 C1.25,8.34678 1.25,8.83678 1.44074,9.21117 C1.60852,9.54046 1.87623,9.80815 2.20552,9.97592 C2.57986,10.16667 3.06991,10.16667 4.05,10.16667 Z"
-};
-function ColorModeIcon({
-  mode
-}) {
-  return /*#__PURE__*/React.createElement("svg", {
-    width: "16",
-    height: "16",
-    viewBox: "0 0 14 14",
-    xmlns: "http://www.w3.org/2000/svg",
-    "aria-hidden": "true"
-  }, /*#__PURE__*/React.createElement("path", {
-    d: COLOR_MODE_ICON_PATHS[mode],
-    strokeWidth: "1.5",
-    fill: "none",
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }));
-}
 
 const requestClearConnectedPeopleCache = () => remove();
 function UserProfile({
@@ -33186,10 +33594,10 @@ function UserProfile({
     alignment: "center",
     spacing: 0.5,
     width: "100%"
-  }, /*#__PURE__*/React.createElement(tapestryReact.Icon, {
+  }, /*#__PURE__*/React.createElement(Icon, {
     name: mfaConfigured ? "general.lock" : "general.unlock",
-    size: "sm",
-    color: mfaConfigured ? "var(--t-icon-color-status-success)" : "var(--t-icon-color-status-error)"
+    size: 12,
+    theme: mfaConfigured ? "--t-icon-color-status-success" : "--t-icon-color-status-error"
   }), /*#__PURE__*/React.createElement(tapestryReact.Text, {
     size: 4,
     weight: 400,
@@ -33237,9 +33645,10 @@ function UserProfile({
   }, /*#__PURE__*/React.createElement(tapestryReact.Text, {
     color: "var(--text-color-default-secondary)",
     size: 3
-  }, "Log out"), /*#__PURE__*/React.createElement(tapestryReact.Icon, {
+  }, "Log out"), /*#__PURE__*/React.createElement(Icon, {
     name: "general.intoBox",
-    fill: "var(--t-icon-color-secondary)"
+    size: 14,
+    theme: "--t-icon-color-secondary"
   })))), env !== "production" && /*#__PURE__*/React.createElement(DebugPcoResource, {
     env: env
   }), hasConnectedPeople && (/*#__PURE__*/React.createElement(tapestryReact.StackView, {
@@ -33301,26 +33710,42 @@ function UserProfile({
 
 var ActionType;
 (function (ActionType) {
+  ActionType["clearPending"] = "clearPending";
   ActionType["close"] = "close";
   ActionType["mount"] = "mount";
   ActionType["open"] = "open";
+  ActionType["setPending"] = "setPending";
   ActionType["unmount"] = "unmount";
 })(ActionType || (ActionType = {}));
 const initialState = {
   currentContent: null,
-  open: false
+  open: false,
+  pending: null
 };
 const reducer = (state, action) => {
+  var _a, _b;
   switch (action.type) {
     case ActionType.mount:
       return {
         ...state,
-        currentContent: action.payload.content
+        currentContent: action.payload.content,
+        pending: ((_a = state.pending) === null || _a === void 0 ? void 0 : _a.tool) === ((_b = action.payload.content) === null || _b === void 0 ? void 0 : _b.name) ? state.pending : null
       };
     case ActionType.unmount:
       return {
         ...state,
-        currentContent: null
+        currentContent: null,
+        pending: null
+      };
+    case ActionType.setPending:
+      return {
+        ...state,
+        pending: action.payload
+      };
+    case ActionType.clearPending:
+      return {
+        ...state,
+        pending: null
       };
     case ActionType.open:
       return {
@@ -33341,11 +33766,179 @@ const useToolbarReducer = overrides => React__namespace.useReducer(reducer, {
 
 var styles$1 = {"toolbar":"toolbar-KHJR5","toolbar-button":"toolbar-button-Ye4h5","is-current":"is-current-DZK47","toolbar-button--avatar":"toolbar-button--avatar-5FUik","toolbar-button--home":"toolbar-button--home-Pthd0"};
 
-const pcoUrl = pcoUrl$1;
+// PCO Box serves TLS by default, and a bare http:// frame inside an https
+// product page is blocked as mixed content, so follow the page's scheme.
+const iframeSrc = () => `${window.location.protocol}//pco.test/iframe`;
+const STAFF_PINK = "var(--t-fill-color-product-staff)";
+// The pco.test domain is only ever served by a local PCO Box, so the tool
+// stays hidden in staging and production — and on Topbar's own dev server,
+// which runs on localhost and has no pco.test to frame.
+function isPcoTestHost() {
+  const {
+    hostname
+  } = window.location;
+  return hostname === "pco.test" || hostname.endsWith(".pco.test");
+}
+// Flattened from the source artwork's two outline paths — its gradients,
+// filters and clip paths carry nothing at icon size. Those paths are authored
+// on a 128px canvas, hence the transform: it fits the pair into the same ~24px
+// optical box the sibling toolbar icons occupy. Filled explicitly rather than
+// with `currentColor` so the mark stays staff pink instead of inheriting the
+// toolbar's text color and its hover/active states.
+const WRENCH = "m22.42 17.2 12.96 12.95-2.5 8.78-8.78 2.5-12.96-12.96-5.86 5.86 14.89 21.46 17.56-3.34 61.63 65.62c9.44 9.51 22.17-4.75 13.34-12.87L46.85 42.92l4.01-17.76-22.14-14.27-6.3 6.31zm81.06 91.97c1.68-1.68 4.4-1.68 6.08 0 1.68 1.68 1.68 4.4 0 6.08-1.68 1.67-4.4 1.67-6.08 0-1.68-1.68-1.68-4.4 0-6.08z";
+const SCREWDRIVER = "m55.8 12 .76.16c8.84-2.94 28.68 8.64 24.26 18.96-1.12 1.62-.93 4.5.42 6.31L56.43 62.25c-1.39-1.39-4.48-1.36-5.9 0L9.5 101.63c-3.74 3.59-.8 6.64.78 8.25l7.36 7.36c1.61 1.6 5.86 3.76 8.88.56l38.72-40.81c1.35-1.42 1.36-4.47 0-5.87 0 0 .01-.02 0-.02l24.91-24.9c2.63 2.37 5.11 2.57 7.47 1.93 4.55-1.25 7.09 3.21 9.81 6.46l-1.23 1.21c-1.82 1.84-1.65 4.94.39 6.98s5.15 2.21 6.97.39l8.14-8.13c1.82-1.84 1.65-4.94-.4-6.97-1.84-1.85-4.51-2.09-6.37-.77-5.58-6.26-2.65-7.2-10.01-15.35L91.13 17.86C81.2 8.12 68.3 8.13 55.8 12z";
+function ToolsIcon() {
+  return /*#__PURE__*/React.createElement("svg", {
+    "aria-hidden": "true",
+    width: "32",
+    height: "32",
+    viewBox: "0 0 32 32",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("g", {
+    fill: STAFF_PINK,
+    transform: "translate(2.92 2.66) scale(.204)"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: WRENCH
+  }), /*#__PURE__*/React.createElement("path", {
+    d: SCREWDRIVER
+  })));
+}
+// A cross-origin frame's own history object is unreachable (touching it throws
+// a SecurityError), but the frame's navigations do land in the top-level joint
+// session history, so the *parent's* back/forward traverse them while leaving
+// the host page in place. Counting frame loads tracks how deep we are, which is
+// what keeps a click on Back from stepping past the frame's first page and
+// navigating the host app instead. Loads we caused are attributed to the
+// traversal that requested them rather than counted as new navigations.
+function useFrameHistory() {
+  const [steps, setSteps] = React.useState({
+    back: 0,
+    forward: 0
+  });
+  // Traversal has to read the current counts outside of render, so the ref is
+  // the source of truth and state exists to paint the buttons.
+  const stepsRef = React.useRef(steps);
+  const pendingTraversal = React.useRef(null);
+  const frameIsLoaded = React.useRef(false);
+  const moveTo = React.useCallback(next => {
+    stepsRef.current = next;
+    setSteps(next);
+  }, []);
+  const onFrameLoad = React.useCallback(() => {
+    if (!frameIsLoaded.current) {
+      // The frame's first page is the floor, not a step.
+      frameIsLoaded.current = true;
+    } else {
+      const traversal = pendingTraversal.current;
+      pendingTraversal.current = null;
+      const {
+        back,
+        forward
+      } = stepsRef.current;
+      if (traversal === "back") {
+        moveTo({
+          back: back - 1,
+          forward: forward + 1
+        });
+      } else if (traversal === "forward") {
+        moveTo({
+          back: back + 1,
+          forward: forward - 1
+        });
+      } else {
+        moveTo({
+          back: back + 1,
+          forward: 0
+        });
+      }
+    }
+  }, [moveTo]);
+  // Guarded here rather than trusting the button's disabled state: traversing
+  // with no frame step left would navigate the host app out from under us.
+  const traverse = React.useCallback(direction => {
+    if (stepsRef.current[direction] > 0) {
+      pendingTraversal.current = direction;
+      window.history[direction]();
+    }
+  }, []);
+  return {
+    onFrameLoad,
+    steps,
+    traverse
+  };
+}
+function NavButton({
+  direction,
+  disabled,
+  onClick
+}) {
+  return /*#__PURE__*/React.createElement(tapestryReact.Button
+  // Tapestry's `disabled` suppresses the click but emits no ARIA state.
+  , {
+    "aria-disabled": disabled,
+    disabled: disabled,
+    hover: {
+      backgroundColor: "var(--t-fill-color-neutral-070)"
+    },
+    icon: {
+      fill: "var(--t-icon-color-dim)",
+      name: direction === "back" ? "general.leftChevron" : "general.rightChevron",
+      size: "md"
+    },
+    onClick: onClick,
+    opacity: disabled ? 0.35 : 1,
+    theme: false,
+    title: direction === "back" ? "Back" : "Forward"
+  });
+}
+function DeveloperToolsComponent({
+  closeDrawer
+}) {
+  const {
+    onFrameLoad,
+    steps,
+    traverse
+  } = useFrameHistory();
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DrawerHeader, {
+    closeDrawer: closeDrawer
+  }, /*#__PURE__*/React.createElement(tapestryReact.StackView, {
+    alignment: "center",
+    axis: "horizontal",
+    spacing: 0.25
+  }, /*#__PURE__*/React.createElement(NavButton, {
+    direction: "back",
+    disabled: steps.back === 0,
+    onClick: () => traverse("back")
+  }), /*#__PURE__*/React.createElement(NavButton, {
+    direction: "forward",
+    disabled: steps.forward === 0,
+    onClick: () => traverse("forward")
+  }), /*#__PURE__*/React.createElement(DrawerHeading, {
+    paddingLeft: 0.5
+  }, "Developer Tools"))), /*#__PURE__*/React.createElement(tapestryReact.Box, {
+    as: "iframe",
+    border: "none",
+    flex: "1",
+    minHeight: 0,
+    onLoad: onFrameLoad,
+    src: iframeSrc(),
+    title: "Developer Tools",
+    width: "100%"
+  }));
+}
+const DeveloperTools = {
+  component: DeveloperToolsComponent,
+  icons: {
+    component: ToolsIcon
+  },
+  label: "Developer Tools",
+  // No space: `name` becomes an element id and a pendo attribute.
+  name: "DeveloperTools"
+};
 
 var styles = {"banner":"banner-YfQ37","stacked":"stacked-EwLRh","content":"content-lNjWf","icon":"icon-abz7q","iconShape":"iconShape-6uyot","iconSparkle":"iconSparkle-t0OzK","text":"text--Vlhl","title":"title-zOEOR","subtitle":"subtitle-ufLnk","chevron":"chevron-oOUA-","inlineContent":"inlineContent-h5sVl","sparkle":"sparkle-uuMBp","inlineTitle":"inlineTitle-ru2Rk","action":"action-fSY3n","actionLabel":"actionLabel-MRBjb","actionChevron":"actionChevron-DghlN"};
 
-const SPARKLE_PATH = "M3.809 10.1332C3.87511 9.95596 4.12579 9.95588 4.19181 10.1332L4.63712 11.3363C4.64169 11.3487 4.65116 11.359 4.66349 11.3637L5.86661 11.809C6.04452 11.8749 6.04455 12.126 5.86661 12.1918L4.66349 12.6371C4.65134 12.6417 4.64173 12.6513 4.63712 12.6635L4.19181 13.8666C4.12597 14.0445 3.87486 14.0445 3.809 13.8666L3.36368 12.6635C3.35905 12.6512 3.3487 12.6417 3.33634 12.6371L2.13321 12.1918C1.95588 12.1258 1.95596 11.8751 2.13321 11.809L3.33634 11.3637C3.34877 11.3591 3.35908 11.3488 3.36368 11.3363L3.809 10.1332ZM8.52091 3.33341C8.68571 2.88899 9.31518 2.88891 9.47989 3.33341L10.5922 6.34122C10.6037 6.37226 10.6285 6.39712 10.6596 6.4086L13.6664 7.52091C14.1113 7.68553 14.1113 8.31528 13.6664 8.47989L10.6596 9.5922C10.6285 9.6037 10.6037 9.6285 10.5922 9.65958L9.47989 12.6664C9.31528 13.1113 8.68553 13.1113 8.52091 12.6664L7.4086 9.65958C7.39712 9.62853 7.37226 9.60371 7.34122 9.5922L4.33341 8.47989C3.88891 8.31518 3.88899 7.68571 4.33341 7.52091L7.34122 6.4086C7.3723 6.3971 7.3971 6.3723 7.4086 6.34122L8.52091 3.33341ZM3.809 2.13321C3.87511 1.95596 4.12579 1.95588 4.19181 2.13321L4.63712 3.33634C4.64169 3.3487 4.65116 3.35905 4.66349 3.36368L5.86661 3.809C6.04452 3.87486 6.04455 4.12597 5.86661 4.19181L4.66349 4.63712C4.65134 4.64173 4.64173 4.65134 4.63712 4.66349L4.19181 5.86661C4.12597 6.04455 3.87486 6.04452 3.809 5.86661L3.36368 4.66349C3.35905 4.65116 3.3487 4.64169 3.33634 4.63712L2.13321 4.19181C1.95588 4.12579 1.95596 3.87511 2.13321 3.809L3.33634 3.36368C3.34877 3.35908 3.35908 3.34877 3.36368 3.33634L3.809 2.13321Z";
+const SPARKLE_PATH$1 = "M3.809 10.1332C3.87511 9.95596 4.12579 9.95588 4.19181 10.1332L4.63712 11.3363C4.64169 11.3487 4.65116 11.359 4.66349 11.3637L5.86661 11.809C6.04452 11.8749 6.04455 12.126 5.86661 12.1918L4.66349 12.6371C4.65134 12.6417 4.64173 12.6513 4.63712 12.6635L4.19181 13.8666C4.12597 14.0445 3.87486 14.0445 3.809 13.8666L3.36368 12.6635C3.35905 12.6512 3.3487 12.6417 3.33634 12.6371L2.13321 12.1918C1.95588 12.1258 1.95596 11.8751 2.13321 11.809L3.33634 11.3637C3.34877 11.3591 3.35908 11.3488 3.36368 11.3363L3.809 10.1332ZM8.52091 3.33341C8.68571 2.88899 9.31518 2.88891 9.47989 3.33341L10.5922 6.34122C10.6037 6.37226 10.6285 6.39712 10.6596 6.4086L13.6664 7.52091C14.1113 7.68553 14.1113 8.31528 13.6664 8.47989L10.6596 9.5922C10.6285 9.6037 10.6037 9.6285 10.5922 9.65958L9.47989 12.6664C9.31528 13.1113 8.68553 13.1113 8.52091 12.6664L7.4086 9.65958C7.39712 9.62853 7.37226 9.60371 7.34122 9.5922L4.33341 8.47989C3.88891 8.31518 3.88899 7.68571 4.33341 7.52091L7.34122 6.4086C7.3723 6.3971 7.3971 6.3723 7.4086 6.34122L8.52091 3.33341ZM3.809 2.13321C3.87511 1.95596 4.12579 1.95588 4.19181 2.13321L4.63712 3.33634C4.64169 3.3487 4.65116 3.35905 4.66349 3.36368L5.86661 3.809C6.04452 3.87486 6.04455 4.12597 5.86661 4.19181L4.66349 4.63712C4.65134 4.64173 4.64173 4.65134 4.63712 4.66349L4.19181 5.86661C4.12597 6.04455 3.87486 6.04452 3.809 5.86661L3.36368 4.66349C3.35905 4.65116 3.3487 4.64169 3.33634 4.63712L2.13321 4.19181C1.95588 4.12579 1.95596 3.87511 2.13321 3.809L3.33634 3.36368C3.34877 3.35908 3.35908 3.34877 3.36368 3.33634L3.809 2.13321Z";
 // Same stops as the AskAIBanner border gradient, so the two stay in sync.
 const GRADIENT_STOPS = [{
   color: "var(--t-fill-color-tag-teal-040)",
@@ -33394,7 +33987,7 @@ function SparkleIcon({
       stopColor: color
     }
   })))))), /*#__PURE__*/React.createElement("path", {
-    d: SPARKLE_PATH,
+    d: SPARKLE_PATH$1,
     fill: isGradient ? `url(#${gradientId})` : "currentColor"
   }));
 }
@@ -33802,16 +34395,24 @@ const DocumentationSearch = ({
 // not the path, so updating it is a same-document navigation that doesn't
 // reload the iframe, but also lets the route survive a forced reload (e.g.
 // Turbo re-parenting the topbar).
-function buildPicobotSrc(origin, path) {
+//
+// `panel` loads picobot as its own toolbar panel rather than inside Helpdesk.
+function buildPicobotSrc(origin, path, {
+  panel = false
+} = {}) {
   const [rawPath, queryPart] = path.replace(/^\/+/, "").split("?", 2);
   const safePath = rawPath.split("/").filter(segment => segment && segment !== "." && segment !== "..").join("/");
   const fragment = queryPart !== undefined ? `${safePath}?${queryPart}` : safePath;
-  const base = new URL("topbar", origin).toString();
+  const url = new URL("topbar", origin);
+  if (panel) url.searchParams.set("panel", "1");
+  const base = url.toString();
   return fragment ? `${base}#${fragment}` : base;
 }
 
 const LOAD_TIMEOUT_MS = 3000;
-function createPicobotIframe(picobotOrigin) {
+function createPicobotIframe(picobotOrigin, {
+  panel = false
+} = {}) {
   return /*#__PURE__*/React.forwardRef(function PicobotIframe({
     currentPath: iframePath,
     onChangePath: onIframeChangePath,
@@ -33867,7 +34468,9 @@ function createPicobotIframe(picobotOrigin) {
         (_b = (_a = iframeRef.current) === null || _a === void 0 ? void 0 : _a.contentWindow) === null || _b === void 0 ? void 0 : _b.postMessage(message, picobotOrigin);
       }
     }), []);
-    const iframeSrc = buildPicobotSrc(picobotOrigin, loadedPath);
+    const iframeSrc = buildPicobotSrc(picobotOrigin, loadedPath, {
+      panel
+    });
     return /*#__PURE__*/React.createElement("iframe", {
       ref: iframeRef,
       src: iframeSrc,
@@ -33906,22 +34509,28 @@ function HelpdeskComponent({
   currentPath,
   env,
   helpdeskConfig,
-  onChangePath
+  isPicobotLoading,
+  onChangePath,
+  openPicobot
 }) {
   const PicobotIframe = React.useMemo(() => createPicobotIframe(pcoUrl(env)("picobot")), [env]);
+  const loadingFallback = /*#__PURE__*/React.createElement(StackView$1, {
+    flex: 1,
+    axis: "vertical"
+  }, /*#__PURE__*/React.createElement(DrawerHeader, {
+    closeDrawer: closeDrawer
+  }, /*#__PURE__*/React.createElement(StackView$1, {
+    axis: "horizontal",
+    spacing: 1
+  }, /*#__PURE__*/React.createElement(DrawerHeading, null, "Help and support"), /*#__PURE__*/React.createElement(LoadingIndicator$1, null))));
+  // The add-on reads its args once, so mounting before the gate answers
+  // would leave out openPicobot for good.
+  if (isPicobotLoading) return loadingFallback;
   return /*#__PURE__*/React.createElement(addOns.UiExtensionFirstPartyComponent, {
     grow: 1,
     display: "flex",
     extensionId: env === "staging" ? "42" : "11",
-    loadingFallback: /*#__PURE__*/React.createElement(StackView$1, {
-      flex: 1,
-      axis: "vertical"
-    }, /*#__PURE__*/React.createElement(DrawerHeader, {
-      closeDrawer: closeDrawer
-    }, /*#__PURE__*/React.createElement(StackView$1, {
-      axis: "horizontal",
-      spacing: 1
-    }, /*#__PURE__*/React.createElement(DrawerHeading, null, "Help and support"), /*#__PURE__*/React.createElement(LoadingIndicator$1, null)))),
+    loadingFallback: loadingFallback,
     additionalComponents: {
       AskAIBanner: {
         component: AskAIBanner,
@@ -34019,7 +34628,11 @@ function HelpdeskComponent({
       currentPageParams: location.search,
       currentPath,
       helpdeskConfig,
-      onChangePath
+      onChangePath,
+      // Its presence tells helpdesk that Picobot has its own panel.
+      ...(openPicobot && {
+        openPicobot
+      })
     }
   });
 }
@@ -34566,6 +35179,142 @@ const Notifications = {
   name: "Notifications"
 };
 
+const SPARKLE_PATH = "M8.7824 18.8791C8.88371 18.5973 9.26996 18.5973 9.37127 18.8791L9.94256 20.465C10.0222 20.6863 10.1914 20.8616 10.4064 20.9435L11.6779 21.4269L11.9484 21.5304L11.9963 21.5539C12.2205 21.6839 12.2047 22.039 11.9484 22.1369L11.6779 22.2394L10.4064 22.7248C10.1915 22.8068 10.0222 22.9812 9.94256 23.2023L9.37127 24.7893L9.34881 24.8381C9.23098 25.054 8.92273 25.0539 8.80486 24.8381L8.7824 24.7893L8.2111 23.2023C8.14141 23.0088 8.0029 22.8513 7.82536 22.76L7.74723 22.7248L6.47573 22.2394L6.20522 22.1369C5.93172 22.0325 5.93164 21.6347 6.20522 21.5304L6.47476 21.4269L7.74723 20.9435C7.96226 20.8616 8.13147 20.6863 8.2111 20.465L8.7824 18.8791ZM17.5706 8.11138C17.8241 7.40747 18.7928 7.40734 19.0462 8.11138L20.472 12.0782C20.6711 12.6318 21.0952 13.0687 21.6331 13.2735L25.4867 14.7413C26.1711 15.002 26.1711 15.9983 25.4867 16.2589L21.6331 17.7267C21.0952 17.9316 20.6711 18.3684 20.472 18.922L19.2649 22.2785L19.0462 22.8889L18.9905 23.0119C18.6956 23.5517 17.9212 23.5515 17.6262 23.0119L17.5706 22.8889L17.3508 22.2795L16.1448 18.922C15.9457 18.3684 15.5206 17.9316 14.9827 17.7267L11.1291 16.2589C10.4449 15.9982 10.4449 15.0021 11.1291 14.7413L14.9827 13.2735C15.4533 13.0943 15.8379 12.7376 16.0598 12.2804L16.1448 12.0782L17.5706 8.11138ZM18.0266 12.755C17.6351 13.8438 16.7916 14.7249 15.6946 15.1427L14.7551 15.5001L15.6946 15.8575C16.7916 16.2753 17.6351 17.1564 18.0266 18.2453L18.3079 19.0275L18.5891 18.2453C18.9806 17.1564 19.8242 16.2753 20.9212 15.8575L21.8597 15.5001L20.9212 15.1427C19.8242 14.7249 18.9806 13.8439 18.5891 12.755L18.3079 11.9718L18.0266 12.755ZM8.7824 6.21097C8.88388 5.9297 9.26982 5.92966 9.37127 6.21097L9.94256 7.7979C10.0222 8.01911 10.1915 8.19346 10.4064 8.27544L11.6779 8.75982L11.8322 9.16607L11.9484 8.86334C12.2218 8.96779 12.2218 9.36542 11.9484 9.46979L11.6779 9.57233L10.4064 10.0567C10.1914 10.1387 10.0222 10.3139 9.94256 10.5352L9.37127 12.1212C9.26996 12.4029 8.88371 12.4029 8.7824 12.1212L8.2111 10.5352C8.14139 10.3415 8.00304 10.1832 7.82536 10.0919L7.74723 10.0567L6.47573 9.57233L6.20522 9.46979C5.9486 9.37195 5.93265 9.01568 6.15737 8.8858L6.20522 8.86334L7.74723 8.27544C7.96214 8.19346 8.13149 8.0191 8.2111 7.7979L8.69451 6.45413L8.7824 6.21097ZM11.9484 8.86334L11.8322 9.16607L11.6779 8.75982L11.9484 8.86334Z";
+// Helpdesk reads this context off the email path to open its email form the
+// same way a handoff inside its own drawer does.
+function emailPathWithContext(context = {}) {
+  const params = new URLSearchParams();
+  for (const key of ["conversationId", "source", "turnIndex"]) {
+    const value = context[key];
+    if (value !== null && value !== undefined) params.set(key, String(value));
+  }
+  return `email?${params}`;
+}
+function PicobotComponent({
+  clearPending,
+  closeDrawer,
+  currentPath,
+  env,
+  onChangePath,
+  openTool,
+  pending
+}) {
+  const PicobotIframe = React.useMemo(() => createPicobotIframe(pcoUrl(env)("picobot"), {
+    panel: true
+  }), [env]);
+  const picobotRef = React.useRef(null);
+  const [isPicobotReady, setIsPicobotReady] = React.useState(false);
+  // Picobot has no listener until it sends READY, so openPicobot's draft or
+  // conversation waits for it.
+  React.useEffect(function handOverPendingOncePicobotIsReady() {
+    var _a, _b;
+    if (!pending || !isPicobotReady) return;
+    const {
+      conversationId,
+      draft,
+      ticketExternalId
+    } = pending;
+    if (conversationId) {
+      (_a = picobotRef.current) === null || _a === void 0 ? void 0 : _a.postMessage({
+        payload: {
+          conversation_id: conversationId,
+          // Picobot asks whether this resolved the ticket, and closes it.
+          ...(ticketExternalId && {
+            external_id: ticketExternalId,
+            source: "ticket_submitted"
+          })
+        },
+        type: "LOAD_CONVERSATION"
+      });
+    } else if (draft) {
+      // Not both: Picobot cancels a conversation load when a prefill
+      // starts a new conversation.
+      (_b = picobotRef.current) === null || _b === void 0 ? void 0 : _b.postMessage({
+        payload: {
+          source: "email_form",
+          text: draft
+        },
+        type: "PREFILL_COMPOSER"
+      });
+    }
+    clearPending();
+  }, [pending, isPicobotReady, clearPending]);
+  const [iframeErrored, setIframeErrored] = React.useState(false);
+  const [mountKey, setMountKey] = React.useState(0);
+  const handleRetry = React.useCallback(() => {
+    setIframeErrored(false);
+    setIsPicobotReady(false);
+    setMountKey(key => key + 1);
+  }, []);
+  const handleMessage = React.useCallback(data => {
+    var _a;
+    const message = data;
+    switch (message === null || message === void 0 ? void 0 : message.type) {
+      case "CLOSE_DRAWER":
+        return closeDrawer();
+      case "READY":
+        return setIsPicobotReady(true);
+      case "PICOBOT_SUPPORT_HANDOFF":
+        return openTool("helpdesk", ((_a = message.payload) === null || _a === void 0 ? void 0 : _a.method) === "zoom" ? "phone" : emailPathWithContext(message.payload));
+      case "IFRAME_LOAD_ERROR":
+        console.warn("topbar: Picobot iframe failed to load");
+        return setIframeErrored(true);
+    }
+  }, [closeDrawer, openTool]);
+  if (iframeErrored) {
+    return /*#__PURE__*/React.createElement(LoadError, {
+      onContactSupport: () => openTool("helpdesk", "email"),
+      onRetry: handleRetry
+    });
+  }
+  return /*#__PURE__*/React.createElement(PicobotIframe, {
+    key: mountKey,
+    ref: picobotRef,
+    currentPath: currentPath,
+    onChangePath: onChangePath,
+    onMessage: handleMessage
+  });
+}
+function LoadError({
+  onContactSupport,
+  onRetry
+}) {
+  return /*#__PURE__*/React.createElement(tapestryReact.StackView, {
+    axis: "vertical",
+    flex: 1,
+    alignment: "center",
+    distribution: "center",
+    padding: 3,
+    spacing: 1
+  }, /*#__PURE__*/React.createElement(tapestryReact.Heading, {
+    level: 2
+  }, "Picobot is temporarily unavailable"), /*#__PURE__*/React.createElement(tapestryReact.Text, {
+    size: 5,
+    color: "var(--t-text-color-secondary)"
+  }, "Try again or contact support."), /*#__PURE__*/React.createElement(tapestryReact.Box, {
+    paddingTop: 2
+  }, /*#__PURE__*/React.createElement(tapestryReact.Button, {
+    onClick: onRetry,
+    iconLeft: "general.refresh",
+    theme: "primary",
+    variant: "fill",
+    title: "Retry"
+  })), /*#__PURE__*/React.createElement(tapestryReact.Button, {
+    onClick: onContactSupport,
+    variant: "naked",
+    theme: "primary",
+    title: "Contact support"
+  }));
+}
+const Picobot = {
+  component: PicobotComponent,
+  icons: {
+    staticDotPath: SPARKLE_PATH,
+    staticPath: SPARKLE_PATH
+  },
+  name: "Picobot"
+};
+
 const {
   LoadingIndicator,
   StackView
@@ -34961,6 +35710,41 @@ const useChatConfig = ({
   };
 };
 
+// Picobot's API rejects requests without a version header, and apiRequest
+// sets its own headers, so the version rides in on the fetch.
+const picobotFetch = (url, opts) => defaultFetch(url, {
+  ...opts,
+  headers: {
+    ...(opts === null || opts === void 0 ? void 0 : opts.headers),
+    "X-PCO-API-Version": "2026-08-11"
+  }
+});
+// Routes wait on the gate, so a slow Picobot can't hold them up for long.
+const GATE_TIMEOUT_MS = 3000;
+const usePicobotConfig = ({
+  isEnabled
+}) => {
+  // Undefined until Picobot answers.
+  const [panelEnabled, setPanelEnabled] = React.useState();
+  React.useEffect(() => {
+    if (!isEnabled) return undefined;
+    // Whatever settles first wins, so a late answer can't reopen the gate.
+    const settle = enabled => setPanelEnabled(current => current !== null && current !== void 0 ? current : enabled);
+    const timeout = setTimeout(() => settle(false), GATE_TIMEOUT_MS);
+    apiRequest(picobotFetch, `${window.location.origin}/~api/picobot/v2/me`).then(({
+      json
+    }) => {
+      var _a, _b;
+      return settle(((_b = (_a = json === null || json === void 0 ? void 0 : json.data) === null || _a === void 0 ? void 0 : _a.attributes) === null || _b === void 0 ? void 0 : _b.picobot_panel_enabled) === true);
+    }).catch(() => settle(false)).finally(() => clearTimeout(timeout));
+    return () => clearTimeout(timeout);
+  }, [isEnabled]);
+  return {
+    displayPicobotIcon: panelEnabled === true,
+    isLoading: isEnabled && panelEnabled === undefined
+  };
+};
+
 const Profile = {
   component: UserProfile,
   icons: {
@@ -34971,10 +35755,16 @@ const Profile = {
 };
 
 const DURATION = 100;
+// Exempt paths match regardless of query, so `email?conversationId=…` is
+// exempt along with `email`.
 function isToolPathExemptFromStorage(toolName, path) {
   var _a, _b;
   const tool = toolsRouteMap[toolName];
-  return (_b = (_a = tool === null || tool === void 0 ? void 0 : tool.storageExemptPaths) === null || _a === void 0 ? void 0 : _a.includes(path)) !== null && _b !== void 0 ? _b : false;
+  const [pathWithoutQuery] = path.split("?");
+  return (_b = (_a = tool === null || tool === void 0 ? void 0 : tool.storageExemptPaths) === null || _a === void 0 ? void 0 : _a.includes(pathWithoutQuery)) !== null && _b !== void 0 ? _b : false;
+}
+function isConversationPath(path) {
+  return Boolean(path === null || path === void 0 ? void 0 : path.startsWith("conversations/"));
 }
 function scrollToolDrawerToTop(toolName) {
   var _a;
@@ -34987,6 +35777,7 @@ const TOOLS_MAP = {
   Chat,
   Helpdesk,
   Notifications,
+  Picobot,
   Profile,
   Tasks
 };
@@ -35014,7 +35805,8 @@ function Toolbar({
   });
   const {
     currentContent,
-    open
+    open,
+    pending
   } = state;
   const mounted = !!currentContent;
   const storeData = useStore();
@@ -35027,6 +35819,15 @@ function Toolbar({
     ...(env === "development" ? _storeDataOverride !== null && _storeDataOverride !== void 0 ? _storeDataOverride : {} : {})
   };
   const updateStore = useUpdateStore();
+  const {
+    displayPicobotIcon,
+    isLoading: isPicobotGateLoading
+  } = usePicobotConfig({
+    isEnabled: Boolean(userId)
+  });
+  // Picobot is a kill-switched tool: until its gate says the panel is
+  // enabled, its routes are held, and if it never does, they're ignored.
+  const routableTool = React.useCallback(name => name === Picobot.name.toLowerCase() && !displayPicobotIcon ? undefined : toolsRouteMap[name], [displayPicobotIcon]);
   React.useEffect(() => {
     if (open) {
       document.body.style.overflow = "hidden";
@@ -35114,7 +35915,9 @@ function Toolbar({
     });
   }, [clearRoute]);
   React.useEffect(() => {
-    if (!toolbarFragmentRoute) return;
+    if (!toolbarFragmentRoute || !routableTool(toolbarFragmentRoute.tool)) {
+      return;
+    }
     const isExempt = isToolPathExemptFromStorage(toolbarFragmentRoute.tool, toolbarFragmentRoute.path);
     if (isExempt) return;
     const nextState = {
@@ -35124,12 +35927,32 @@ function Toolbar({
     if (!shallowCompare(nextState, toolStateCookie)) {
       setToolStateCookie(nextState);
     }
-  }, [toolbarFragmentRoute, toolStateCookie]);
+  }, [toolbarFragmentRoute, toolStateCookie, routableTool]);
   React.useEffect(() => {
-    if ((toolbarFragmentRoute === null || toolbarFragmentRoute === void 0 ? void 0 : toolbarFragmentRoute.tool) && (currentContent !== toolsRouteMap[toolbarFragmentRoute.tool] || !open)) {
-      setToolAndOpenDrawer(toolsRouteMap[toolbarFragmentRoute.tool]);
+    // Helpdesk conversations may belong to Picobot, so they wait for its gate
+    // rather than flashing open in Helpdesk first.
+    const mayRedirectToPicobot = (toolbarFragmentRoute === null || toolbarFragmentRoute === void 0 ? void 0 : toolbarFragmentRoute.tool) === Helpdesk.name.toLowerCase() && isConversationPath(toolbarFragmentRoute.path) && (isPicobotGateLoading || displayPicobotIcon);
+    const tool = (toolbarFragmentRoute === null || toolbarFragmentRoute === void 0 ? void 0 : toolbarFragmentRoute.tool) && !mayRedirectToPicobot && routableTool(toolbarFragmentRoute.tool);
+    if (tool && (currentContent !== tool || !open)) {
+      setToolAndOpenDrawer(tool);
     }
-  }, [setToolAndOpenDrawer, toolbarFragmentRoute === null || toolbarFragmentRoute === void 0 ? void 0 : toolbarFragmentRoute.tool, currentContent, open]);
+  }, [setToolAndOpenDrawer, toolbarFragmentRoute === null || toolbarFragmentRoute === void 0 ? void 0 : toolbarFragmentRoute.tool, toolbarFragmentRoute === null || toolbarFragmentRoute === void 0 ? void 0 : toolbarFragmentRoute.path, currentContent, open, routableTool, isPicobotGateLoading, displayPicobotIcon]);
+  const openTool = React.useCallback((name, path, pendingValue) => {
+    const tool = routableTool(name.toLowerCase());
+    if (!tool) return;
+    dispatch({
+      payload: pendingValue === undefined ? null : {
+        tool: tool.name,
+        value: pendingValue
+      },
+      type: ActionType.setPending
+    });
+    onChangeToolbarFragmentRoute(tool.name.toLowerCase(), path);
+    scrollToolDrawerToTop(tool.name);
+  }, [onChangeToolbarFragmentRoute, routableTool]);
+  const clearPending = React.useCallback(() => dispatch({
+    type: ActionType.clearPending
+  }), []);
   const toggleDrawer = content => {
     if (!open) {
       return openDrawer(content);
@@ -35146,12 +35969,52 @@ function Toolbar({
     joltPromise: storeData === null || storeData === void 0 ? void 0 : storeData.joltPromise,
     userId
   });
-  const TOOLS = [Notifications, Tasks, displayChatIcon && Chat].filter(Boolean);
+  // Picobot conversations moved from Helpdesk to the Picobot panel, so
+  // send old links and saved paths there once the panel is enabled.
+  React.useEffect(() => {
+    if (!displayPicobotIcon) return;
+    if ((toolbarFragmentRoute === null || toolbarFragmentRoute === void 0 ? void 0 : toolbarFragmentRoute.tool) === Helpdesk.name.toLowerCase() && isConversationPath(toolbarFragmentRoute.path)) {
+      onChangeToolbarFragmentRoute(Picobot.name.toLowerCase(), toolbarFragmentRoute.path);
+    }
+  }, [displayPicobotIcon, toolbarFragmentRoute, onChangeToolbarFragmentRoute]);
+  React.useEffect(() => {
+    if (!displayPicobotIcon) return;
+    const {
+      helpdesk,
+      picobot
+    } = toolStateCookie;
+    if (!isConversationPath(helpdesk)) return;
+    setToolStateCookie({
+      ...toolStateCookie,
+      helpdesk: "",
+      picobot: picobot || helpdesk
+    });
+  }, [displayPicobotIcon, toolStateCookie]);
+  const openPicobot = React.useCallback(options => {
+    var _a;
+    // Moving an open Picobot off its path reloads or navigates the iframe,
+    // which would race the options it's being handed.
+    const path = currentContent === Picobot ? (_a = toolbarFragmentRoute === null || toolbarFragmentRoute === void 0 ? void 0 : toolbarFragmentRoute.path) !== null && _a !== void 0 ? _a : "" : "";
+    openTool(Picobot.name, path, options);
+  }, [openTool, currentContent, toolbarFragmentRoute === null || toolbarFragmentRoute === void 0 ? void 0 : toolbarFragmentRoute.path]);
+  React.useEffect(() => {
+    if (!displayPicobotIcon) return undefined;
+    window.topbar = window.topbar || {};
+    window.topbar.openPicobot = openPicobot;
+    return () => {
+      delete window.topbar.openPicobot;
+    };
+  }, [displayPicobotIcon, openPicobot]);
+  const TOOLS = [Notifications, Tasks, displayChatIcon && Chat, displayPicobotIcon && Picobot, isPcoTestHost() && DeveloperTools].filter(Boolean);
   const handleToolOnClick = tool => {
     toggleDrawer(tool);
     scrollToolDrawerToTop(tool.name);
   };
   const toolSpecificProps = {
+    Helpdesk: {
+      isPicobotLoading: isPicobotGateLoading,
+      openPicobot: displayPicobotIcon ? openPicobot : undefined
+    },
     Profile: {
       appName,
       closeDrawer,
@@ -35174,6 +36037,7 @@ function Toolbar({
   const routeIsForCurrentTool = (toolbarFragmentRoute === null || toolbarFragmentRoute === void 0 ? void 0 : toolbarFragmentRoute.tool) && toolsRouteMap[toolbarFragmentRoute.tool] === currentContent;
   const currentToolProps = {
     appName,
+    clearPending,
     closeDrawer,
     currentPath: routeIsForCurrentTool ? toolbarFragmentRoute === null || toolbarFragmentRoute === void 0 ? void 0 : toolbarFragmentRoute.path : null,
     env,
@@ -35182,6 +36046,8 @@ function Toolbar({
     joltPromise,
     onChangePath,
     openDrawer: () => currentContent && openDrawer(currentContent),
+    openTool,
+    pending: (pending === null || pending === void 0 ? void 0 : pending.tool) === (currentContent === null || currentContent === void 0 ? void 0 : currentContent.name) ? pending === null || pending === void 0 ? void 0 : pending.value : undefined,
     userId,
     ...(currentContent ? toolSpecificProps[currentContent.name] : {})
   };
@@ -35209,21 +36075,20 @@ function Toolbar({
     name: "toolbar.planningCenter",
     size: "24px"
   })), [HelpDeskTool, ...TOOLS].map(tool => {
+    var _a;
     const current = open && currentContent === tool;
     const indicator = indicatorState[tool.name];
     return /*#__PURE__*/React.createElement(ToolbarButton, {
       current: current,
       onClick: () => handleToolOnClick(tool),
       id: getDataPendoAttribute(tool.name),
-      "aria-label": `Open ${tool.name} drawer`,
+      "aria-label": `Open ${(_a = tool.label) !== null && _a !== void 0 ? _a : tool.name} drawer`,
       "data-pendo": getDataPendoAttribute(tool.name),
       key: tool.name
-    }, !indicator && (/*#__PURE__*/React.createElement(ToolbarButtonIcon, {
-      path: tool.icons.staticPath
-    })), indicator && (/*#__PURE__*/React.createElement(ToolbarButtonIcon, {
-      path: tool.icons.staticDotPath,
-      dot: true
-    })));
+    }, /*#__PURE__*/React.createElement(ToolbarToolIcon, {
+      icons: tool.icons,
+      dot: !!indicator
+    }));
   })), /*#__PURE__*/React.createElement(DrawerWrap, {
     isVisible: open
   }, mounted && (/*#__PURE__*/React.createElement(Drawer, {
@@ -35247,6 +36112,19 @@ const ToolbarButton = ({
     ...restProps
   }, children);
 };
+function ToolbarToolIcon({
+  dot,
+  icons
+}) {
+  if ("component" in icons) {
+    return /*#__PURE__*/React.createElement(icons.component, null);
+  } else {
+    return /*#__PURE__*/React.createElement(ToolbarButtonIcon, {
+      path: dot ? icons.staticDotPath : icons.staticPath,
+      dot: dot
+    });
+  }
+}
 function ToolbarButtonIcon({
   dot,
   path