@planningcenter/topbar 12.3.0-qa-947.0 → 12.3.0-qa-937.3

package/dist/topbar.js

@@ -3266,45 +3266,6 @@ function saveLastProduct(slug) {
   }
 }
 
-// Products open modals from many libraries, not all of which mark themselves
-// with roles, so a modal is recognized by what it does: cover the page.
-function isModalOpen() {
-  const {
-    clientHeight,
-    clientWidth
-  } = document.documentElement;
-  const element = document.elementFromPoint(clientWidth / 2, clientHeight / 2);
-  return element !== null && (isInNativeDialog(element) || hasBackdrop(element, clientWidth, clientHeight));
-}
-// A native modal's backdrop is drawn by the browser rather than being an
-// element; hit-testing it lands on the dialog itself.
-function isInNativeDialog(element) {
-  return element.closest("dialog[open]") !== null;
-}
-function hasBackdrop(element, width, height) {
-  let current = element;
-  while (current && !isBackdrop(current, width, height)) {
-    current = current.parentElement;
-  }
-  return current !== null;
-}
-// Some backdrops start below the topbar rather than at the top of the screen,
-// so the layer only has to span the width and reach from the center to the
-// bottom. Its own box has to reach the center: a bar along the bottom can
-// hold a panel that pops up over the center, like Services' media player.
-// react-aria leaves a closed modal's backdrop up while it fades out, search's
-// own included, so one that's on its way out doesn't count.
-function isBackdrop(element, width, height) {
-  const rect = element.getBoundingClientRect();
-  return !element.matches("[data-exiting]") && getComputedStyle(element).position === "fixed" && rect.width >= width - SCROLLBAR_SLACK && rect.top <= height / 2 && rect.bottom >= height - ROUNDING_SLACK;
-}
-// react-aria keeps a classic scrollbar's gutter reserved while its modals lock
-// scrolling, so their backdrops stop short of the right edge by its width.
-const SCROLLBAR_SLACK = 24;
-// Rects are fractional at non-100% zoom, but clientWidth and clientHeight are
-// rounded to whole pixels.
-const ROUNDING_SLACK = 1;
-
 var styles$c = {"visuallyHidden":"visuallyHidden-C28ju"};
 
 var styles$b = {"tab":"tab-lQLDx"};
@@ -3436,11 +3397,10 @@ function useRecentlyVisitableMetadata() {
   return shim.useSyncExternalStore(recentlyVisitableMetadataStore.subscribe, () => recentlyVisitableMetadataStore.getState().metadata);
 }
 
-const MAX_ENTRIES$1 = 50;
+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"];
-// Login has no pages worth returning to.
-const APPS = PRODUCTS.filter(product => product !== "login");
 function isId(value) {
   return value !== "" && Array.from(value).every(character => character >= "0" && character <= "9");
 }
@@ -3449,47 +3409,26 @@ function isPcrl(value) {
   const segments = value.split("/");
   return segments.length === 4 && PRODUCTS.some(product => product === segments[0]) && isId(segments[3]);
 }
-function isApp(value) {
-  return APPS.some(app => app === value);
-}
-// Links are built by resolving the path against its app's origin, so a stored
-// path must not be able to resolve anywhere else (`//evil.com`, `/\evil.com`).
-function isPath(value) {
-  const origin = "https://app.invalid";
-  try {
-    return typeof value === "string" && value.startsWith("/") && new URL(value, origin).origin === origin;
-  } catch {
-    return false;
-  }
-}
 function isNonBlankString(value) {
   return typeof value === "string" && value.trim() !== "";
 }
-function isOptionalString(value) {
-  return value === undefined || typeof value === "string";
-}
 function isRecord(value) {
   return typeof value === "object" && value !== null && !Array.isArray(value);
 }
-function isPageMetadata(value) {
-  return value === undefined || isRecord(value) && isOptionalString(value.details) && isOptionalString(value.type);
-}
-// The query string is part of the link but not of the page's identity, so
-// revisiting with other filters moves the existing entry instead of adding one.
 function entryKey(entry) {
   if (entry.type === "resource") {
     return `resource:${entry.pcrl}`;
   } else {
-    return `page:${entry.app}:${entry.path.split("?")[0]}`;
+    return `page:${entry.product}:${entry.path}`;
   }
 }
 function isEntry(value) {
-  if (!isRecord(value) || typeof value.visitedAt !== "string") {
+  if (!isRecord(value)) {
     return false;
   } else if (value.type === "resource") {
     return typeof value.pcrl === "string" && isPcrl(value.pcrl);
   } else if (value.type === "page") {
-    return isApp(value.app) && isPath(value.path) && isNonBlankString(value.title) && isPageMetadata(value.metadata);
+    return isNonBlankString(value.product) && isNonBlankString(value.title) && isNonBlankString(value.path) && typeof value.details === "string";
   } else {
     return false;
   }
@@ -3498,175 +3437,58 @@ function isEntry(value) {
 function clampText(value) {
   return Array.from(value).slice(0, MAX_TEXT_LENGTH).join("");
 }
-function clampMetadata({
-  details,
-  type
-}) {
-  return {
-    ...(details && {
-      details: clampText(details)
-    }),
-    ...(type && {
-      type: clampText(type)
-    })
-  };
-}
-function clampVisit(visit) {
-  if (visit.type === "resource") {
-    return visit;
-  } else {
-    return {
-      ...visit,
-      ...(visit.metadata && {
-        metadata: clampMetadata(visit.metadata)
-      }),
-      title: clampText(visit.title.trim())
-    };
-  }
-}
-function toEntry(visit, visitedAt) {
-  return {
-    ...clampVisit(visit),
-    visitedAt: visitedAt.toISOString()
-  };
-}
-function knownMetadata({
-  details,
-  type
-}) {
-  if (details === undefined && type === undefined) {
-    return undefined;
-  } else {
-    return {
-      ...(details !== undefined && {
-        details
-      }),
-      ...(type !== undefined && {
-        type
-      })
-    };
-  }
-}
-// user-store-sync rejects a whole write over one field it doesn't know, so
-// anything else an entry carries (like the version older entries stored) is
-// dropped on the way in.
-function withKnownFields(entry) {
+function clampEntry(entry) {
   if (entry.type === "resource") {
-    return {
-      pcrl: entry.pcrl,
-      type: entry.type,
-      visitedAt: entry.visitedAt
-    };
+    return entry;
   } else {
-    const metadata = entry.metadata && knownMetadata(entry.metadata);
     return {
-      app: entry.app,
-      ...(metadata && {
-        metadata
-      }),
-      path: entry.path,
-      title: entry.title,
-      type: entry.type,
-      visitedAt: entry.visitedAt
+      ...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 entriesFrom(value) {
-  if (Array.isArray(value)) {
-    return value.filter(isEntry).map(withKnownFields);
-  } else {
-    return [];
-  }
-}
-function parseRecentlyVisited(value) {
+function parseRecentlyVisited(value, personId) {
+  let parsed = null;
   try {
-    return entriesFrom(JSON.parse(value !== null && value !== void 0 ? value : "null"));
+    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, entry) {
-  const key = entryKey(entry);
-  return [entry, ...entries.filter(existing => entryKey(existing) !== key)].slice(0, MAX_ENTRIES$1);
-}
-// The service may write timestamps with fewer fractional digits than
-// toISOString, so they're compared as times rather than strings.
-function visitTime({
-  visitedAt
-}) {
-  return Date.parse(visitedAt) || 0;
-}
-// One list from several, newest visit first wherever it was recorded.
-function mergeEntries(...lists) {
-  const seen = new Set();
-  return lists.flat().sort((a, b) => visitTime(b) - visitTime(a)).filter(entry => {
-    const key = entryKey(entry);
-    const isFirst = !seen.has(key);
-    seen.add(key);
-    return isFirst;
-  }).slice(0, MAX_ENTRIES$1);
+function addVisit(entries, visit) {
+  const key = entryKey(visit);
+  return [clampEntry(visit), ...entries.filter(entry => entryKey(entry) !== key)].slice(0, MAX_ENTRIES$1);
 }
-function isSameList(a, b) {
-  return a.length === b.length && a.every((entry, index) => entryKey(entry) === entryKey(b[index]) && visitTime(entry) === visitTime(b[index]));
+function serializeRecentlyVisited(entries, personId) {
+  return JSON.stringify({
+    entries,
+    person: personId,
+    v: FORMAT_VERSION
+  });
 }
 
-// The app whose URL, in this environment, has the current page's host.
+// 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 app rebuilds a working link.
-function currentApp() {
+// and guarantees the stored product rebuilds a working link.
+function currentProduct() {
   var _a;
-  return (_a = APPS.find(app => new URL(pcoUrl$1.pcoUrl(app)).hostname === window.location.hostname)) !== null && _a !== void 0 ? _a : null;
+  return (_a = PRODUCTS.find(product => new URL(pcoUrl$1.pcoUrl(product)).hostname === window.location.hostname)) !== null && _a !== void 0 ? _a : null;
 }
-function isFilled(value) {
-  return typeof value === "string" && value !== "";
-}
-// The tag's metadata is product-supplied JSON; only its string `type` and
-// `details` carry over, and an entry without either has no metadata at all.
-function metadataFromPage(metadata) {
+function detailsFromMetadata(metadata) {
   var _a;
   try {
-    const {
-      details,
-      type
-    } = (_a = JSON.parse(metadata !== null && metadata !== void 0 ? metadata : "{}")) !== null && _a !== void 0 ? _a : {};
-    if (isFilled(details) || isFilled(type)) {
-      return {
-        ...(isFilled(details) && {
-          details
-        }),
-        ...(isFilled(type) && {
-          type
-        })
-      };
-    } else {
-      return undefined;
-    }
+    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 undefined;
-  }
-}
-// Staff impersonating someone browse under `/O<org id>/P<person id>/…`.
-function withoutImpersonation(segments) {
-  const [org = "", person = ""] = segments;
-  if (org.startsWith("O") && isId(org.slice(1)) && person.startsWith("P") && isId(person.slice(1))) {
-    return segments.slice(2);
-  } else {
-    return segments;
-  }
-}
-// Normalized the way home-mobile does it, so a page visited on web and on
-// mobile is one entry once the list syncs.
-function pathFromLocation({
-  pathname,
-  search
-}) {
-  const segments = withoutImpersonation(pathname.split("/").filter(Boolean));
-  if (segments.length === 0) {
-    return "/";
-  } else {
-    return `/${segments.join("/")}${search.length > 1 ? search : ""}`;
+    return "";
   }
 }
 // pco:resource is the more specific signal, so it wins when both tags are
@@ -3676,20 +3498,17 @@ function visitFromPage({
   resource,
   title
 }) {
-  const app = currentApp();
+  const product = currentProduct();
   if (resource && isPcrl(resource)) {
     return {
       pcrl: resource,
       type: "resource"
     };
-  } else if (title && title.trim() !== "" && app) {
-    const pageMetadata = metadataFromPage(metadata);
+  } else if (title && title.trim() !== "" && product) {
     return {
-      app,
-      ...(pageMetadata && {
-        metadata: pageMetadata
-      }),
-      path: pathFromLocation(window.location),
+      details: detailsFromMetadata(metadata),
+      path: window.location.pathname,
+      product,
       title,
       type: "page"
     };
@@ -3721,136 +3540,9 @@ function useCurrentPersonId() {
   return userId == null ? undefined : String(userId);
 }
 
-// Tokens last 15 minutes. Refreshing a minute early keeps one from expiring
-// between reading a token and the service checking it.
-const REFRESH_MARGIN_MS = 60000;
-const MAX_ATTEMPTS = 3;
-// A product without the endpoint answers 404 for the rest of the session, so
-// it's asked once per tab rather than on every page.
-const UNAVAILABLE_KEY = "topbar.user_store_sync.unavailable";
-// Per person, so switching connected people never writes one person's visits
-// with another's token.
-function tokenKey(personId) {
-  return `topbar.user_store_sync.token.${personId}`;
-}
-function readSession(key) {
-  try {
-    return sessionStorage.getItem(key);
-  } catch {
-    return null;
-  }
-}
-function writeSession(key, value) {
-  try {
-    sessionStorage.setItem(key, value);
-  } catch {
-    // Without sessionStorage the next request just mints again.
-  }
-}
-function isUserStoreSyncUnavailable() {
-  return readSession(UNAVAILABLE_KEY) === "true";
-}
-function isToken(value) {
-  return typeof value === "object" && value !== null && typeof value.token === "string" && typeof value.url === "string" && typeof value.expiresAt === "number";
-}
-function cachedToken(personId) {
-  var _a;
-  try {
-    const token = JSON.parse((_a = readSession(tokenKey(personId))) !== null && _a !== void 0 ? _a : "null");
-    if (isToken(token) && token.expiresAt - REFRESH_MARGIN_MS > Date.now()) {
-      return token;
-    } else {
-      return null;
-    }
-  } catch {
-    return null;
-  }
-}
-async function mintToken(personId) {
-  const {
-    json,
-    ok,
-    response
-  } = await apiRequest(railsCsrfFetch, `${window.location.origin}/user_store_sync/token`, {
-    method: "POST"
-  });
-  if (ok && typeof (json === null || json === void 0 ? void 0 : json.token) === "string" && typeof (json === null || json === void 0 ? void 0 : json.url) === "string") {
-    const token = {
-      expiresAt: Date.parse(json.expires_at),
-      token: json.token,
-      url: json.url
-    };
-    writeSession(tokenKey(personId), JSON.stringify(token));
-    return token;
-  } else {
-    if ((response === null || response === void 0 ? void 0 : response.status) === 404) {
-      writeSession(UNAVAILABLE_KEY, "true");
-    }
-    return null;
-  }
-}
-async function request(personId, key, init = {}, isRetry = false) {
-  var _a;
-  const token = isRetry ? await mintToken(personId) : (_a = cachedToken(personId)) !== null && _a !== void 0 ? _a : await mintToken(personId);
-  if (token) {
-    const response = await fetch(`${token.url}/v1/data/${key}`, {
-      ...init,
-      headers: {
-        ...init.headers,
-        Authorization: `Bearer ${token.token}`
-      }
-    });
-    if (response.status === 401 && !isRetry) {
-      return request(personId, key, init, true);
-    } else {
-      return response;
-    }
-  } else {
-    return null;
-  }
-}
-// Applies `change` to the stored value and writes the result, rereading and
-// retrying when another tab or device wrote in between. `change` returns null
-// when there's nothing to write. Resolves to the value now stored, or null
-// when the service couldn't be reached.
-async function updateStoredValue(personId, key, change, attemptsLeft = MAX_ATTEMPTS) {
-  const read = await request(personId, key);
-  if (read === null || read === void 0 ? void 0 : read.ok) {
-    const {
-      value,
-      version
-    } = await read.json();
-    const next = change(value);
-    if (next === null) {
-      return Array.isArray(value) ? value : [];
-    } else {
-      const write = await request(personId, key, {
-        body: JSON.stringify({
-          value: next
-        }),
-        headers: {
-          "Content-Type": "application/json",
-          "If-Match": `"${version}"`
-        },
-        method: "PUT"
-      });
-      if (write === null || write === void 0 ? void 0 : write.ok) {
-        return next;
-      } else if ((write === null || write === void 0 ? void 0 : write.status) === 409 && attemptsLeft > 1) {
-        return updateStoredValue(personId, key, change, attemptsLeft - 1);
-      } else {
-        return null;
-      }
-    }
-  } else {
-    return null;
-  }
-}
-
-// Each product keeps its own copy in localStorage, and user-store-sync joins
-// the copies up across products and devices wherever the product can mint a
-// token for it.
-const SYNC_KEY = "recently_viewed";
+// 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
@@ -3864,62 +3556,21 @@ const changes = createStore({
 });
 function readRecentlyVisited(scope) {
   try {
-    return parseRecentlyVisited(localStorage.getItem(storageKey(scope)));
+    return parseRecentlyVisited(localStorage.getItem(storageKey(scope)), scope.personId);
   } catch {
     return [];
   }
 }
-function writeRecentlyVisited(scope, entries) {
-  try {
-    localStorage.setItem(storageKey(scope), JSON.stringify(entries));
-    changes.setState({
-      version: changes.getState().version + 1
-    });
-  } catch {
-    // Storage can be full or blocked; recents are disposable.
-  }
-}
-async function syncOnce(scope) {
-  try {
-    const synced = await updateStoredValue(scope.personId, SYNC_KEY, stored => {
-      const shared = entriesFrom(stored);
-      const merged = mergeEntries(shared, readRecentlyVisited(scope));
-      const isUnchanged = Array.isArray(stored) && stored.length === shared.length && isSameList(merged, shared);
-      return isUnchanged ? null : merged;
-    });
-    if (synced) {
-      writeRecentlyVisited(scope, mergeEntries(entriesFrom(synced), readRecentlyVisited(scope)));
-    }
-  } catch {
-    // The service is best-effort; the local copy stands on its own.
-  }
-}
-const syncing = new Map();
-const syncAgain = new Set();
-// One sync per list at a time. Asking while one runs schedules a single
-// follow-up, so a visit recorded mid-sync still reaches the service.
-function syncRecentlyVisited(scope) {
-  const key = storageKey(scope);
-  const running = syncing.get(key);
-  if (isUserStoreSyncUnavailable()) {
-    return Promise.resolve();
-  } else if (running) {
-    syncAgain.add(key);
-    return running;
-  } else {
-    const run = syncOnce(scope).then(() => {
-      syncing.delete(key);
-      return syncAgain.delete(key) ? syncRecentlyVisited(scope) : undefined;
-    });
-    syncing.set(key, run);
-    return run;
-  }
-}
 function recordVisit(visit, scope) {
-  const entry = toEntry(visit, new Date());
-  if (isEntry(entry)) {
-    writeRecentlyVisited(scope, addVisit(readRecentlyVisited(scope), entry));
-    syncRecentlyVisited(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({
@@ -3927,14 +3578,6 @@ function useRecentlyVisited({
   personId
 }) {
   const version = shim.useSyncExternalStore(changes.subscribe, () => changes.getState().version);
-  React.useEffect(() => {
-    if (personId) {
-      syncRecentlyVisited({
-        env,
-        personId
-      });
-    }
-  }, [env, personId]);
   // `version` isn't read, but listing it re-reads storage after each visit.
   return React.useMemo(() => personId ? readRecentlyVisited({
     env,
@@ -4179,10 +3822,10 @@ function pcrlLookupsUrl(product, pcrls) {
   });
   return `${window.location.origin}/~api/${product}/v2/pcrl_lookups?${params}`;
 }
-// Built from the app rather than the current origin, so it stays right once
-// PCA-409 shares one list across product subdomains.
+// 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 new URL(entry.path, pcoUrl(env)(entry.app)).href;
+  return `${pcoUrl(env)(entry.product)}${entry.path}`;
 }
 
 var styles$a = {"result":"result-WCnxr"};
@@ -4375,16 +4018,15 @@ function ShowMoreWhenVisible({
 // Unlike search results, recents come from every product, so each one names
 // its product and type.
 function describeVisit(visit) {
-  var _a, _b;
   const subtitle = (...parts) => parts.filter(Boolean).join(" · ");
   if (visit.status === "page") {
     const {
-      app,
-      metadata,
+      details,
+      product,
       title
     } = visit.entry;
     return {
-      subtitle: subtitle(productName(app), (_a = metadata === null || metadata === void 0 ? void 0 : metadata.type) !== null && _a !== void 0 ? _a : "", (_b = metadata === null || metadata === void 0 ? void 0 : metadata.details) !== null && _b !== void 0 ? _b : ""),
+      subtitle: subtitle(productName(product), details),
       title,
       url: visit.url
     };
@@ -4719,15 +4361,13 @@ function SearchButtonAndDialog({
   const [open, setOpen] = React.useState(false);
   React.useEffect(() => {
     // Rich text editors like Trix bind ⌘K to "insert link"; capturing at the
-    // window and stopping propagation keeps them from ever seeing it. Under a
-    // product's modal, search stays shut rather than stacking a second modal,
-    // and the keystroke goes on to the product.
+    // window and stopping propagation keeps them from ever seeing it.
     const handleKeyDown = event => {
-      if (open && isSearchShortcut(event)) {
+      if (isSearchShortcut(event)) {
         event.preventDefault();
         event.stopPropagation();
-        setOpen(false);
-      } else if (!open && (isSearchShortcut(event) || isLegacySearchShortcut(event)) && !isModalOpen()) {
+        setOpen(wasOpen => !wasOpen);
+      } else if (isLegacySearchShortcut(event)) {
         event.preventDefault();
         event.stopPropagation();
         setOpen(true);
@@ -4739,7 +4379,7 @@ function SearchButtonAndDialog({
     return () => window.removeEventListener("keydown", handleKeyDown, {
       capture: true
     });
-  }, [open]);
+  }, []);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("button", {
     "aria-keyshortcuts": `${isMac() ? "Meta+K" : "Control+K"} /`,
     "aria-label": "Search",
@@ -34054,26 +33694,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 {
@@ -34094,9 +33750,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"};
 
+// 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)",
@@ -34145,7 +33971,7 @@ function SparkleIcon({
       stopColor: color
     }
   })))))), /*#__PURE__*/React.createElement("path", {
-    d: SPARKLE_PATH,
+    d: SPARKLE_PATH$1,
     fill: isGradient ? `url(#${gradientId})` : "currentColor"
   }));
 }
@@ -34553,16 +34379,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,
@@ -34618,7 +34452,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,
@@ -34657,22 +34493,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,
@@ -34770,7 +34612,11 @@ function HelpdeskComponent({
       currentPageParams: location.search,
       currentPath,
       helpdeskConfig,
-      onChangePath
+      onChangePath,
+      // Its presence tells helpdesk that Picobot has its own panel.
+      ...(openPicobot && {
+        openPicobot
+      })
     }
   });
 }
@@ -35317,6 +35163,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
@@ -35712,6 +35694,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: {
@@ -35722,10 +35739,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;
@@ -35738,6 +35761,7 @@ const TOOLS_MAP = {
   Chat,
   Helpdesk,
   Notifications,
+  Picobot,
   Profile,
   Tasks
 };
@@ -35765,7 +35789,8 @@ function Toolbar({
   });
   const {
     currentContent,
-    open
+    open,
+    pending
   } = state;
   const mounted = !!currentContent;
   const storeData = useStore();
@@ -35778,6 +35803,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";
@@ -35865,7 +35899,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 = {
@@ -35875,12 +35911,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);
@@ -35897,12 +35953,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,
@@ -35925,6 +36021,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,
@@ -35933,6 +36030,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] : {})
   };
@@ -35960,21 +36059,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, {
@@ -35998,6 +36096,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