@zackbart/connecta 0.8.0 → 0.9.0

package/src/operator-ui/browser.ts

@@ -185,7 +185,6 @@ function clearIdentityState(): void {
   clearActivityState();
   $("list").innerHTML = "";
   setOauthNotice("");
-  $("toolkitList").innerHTML = "";
   $("filter").value = "";
   $("credentialList").innerHTML = "";
   $("credentialList").setAttribute("aria-busy", "false");
@@ -490,73 +489,6 @@ async function loadActivity(reset: boolean): Promise<void> {
   }
 }
 
-function toolkitMcpUrl(name: string): string {
-  const url = new URL(MCP_URL, window.location.href);
-  url.searchParams.set("toolkit", name);
-  return url.toString();
-}
-
-function renderToolkits(): void {
-  const data = DATA;
-  if (!data) return;
-  const list = $("toolkitList");
-  const toolkits = data.toolkits || [];
-  list.innerHTML = "";
-  if (!toolkits.length) {
-    list.innerHTML =
-      '<p class="empty">No toolkits are configured. Unscoped clients see the full connector registry.</p>';
-    return;
-  }
-  const connectors = new Map(
-    data.connectors.map((connector) => [connector.id, connector]),
-  );
-  for (const toolkit of toolkits) {
-    const el = document.createElement("article");
-    el.className = "toolkit-card";
-    const connectorCount = toolkit.connectors.length;
-    const toolCount = toolkit.toolCount || 0;
-    let body =
-      '<div class="toolkit-head"><div><div class="toolkit-name">' +
-      '<h3 class="mono">' + esc(toolkit.name) + "</h3>" +
-      '<span class="cap">configured view</span></div>';
-    body += '</div><div class="toolkit-state cap">' +
-      connectorCount + (connectorCount === 1 ? " connector" : " connectors") +
-      " · " + toolCount + (toolCount === 1 ? " loaded tool" : " loaded tools") +
-      "</div></div>";
-    body += '<ul class="toolkit-connectors" aria-label="Included connectors">';
-    for (const id of toolkit.connectors) {
-      const connector = connectors.get(id);
-      body += '<li class="toolkit-connector"><span>' +
-        esc(connector?.title || id) + '</span><code class="mono">' +
-        esc(id) + "</code></li>";
-    }
-    body += "</ul>";
-    body += '<div class="toolkit-rules meta">';
-    if (toolkit.includeTools.length) {
-      body += '<p>Per-connector allowlist: <span class="mono">' +
-        toolkit.includeTools.map(esc).join('</span>, <span class="mono">') +
-        "</span>. Connectors without an allowlist keep all tools.</p>";
-    }
-    if (toolkit.excludeTools.length) {
-      body += '<p>Hidden: <span class="mono">' +
-        toolkit.excludeTools.map(esc).join('</span>, <span class="mono">') +
-        "</span></p>";
-    }
-    if (!toolkit.includeTools.length && !toolkit.excludeTools.length) {
-      body += "<p>All tools on the included connectors are visible.</p>";
-    }
-    body += "</div>";
-    const endpoint = toolkitMcpUrl(toolkit.name);
-    body += '<div class="endpoint toolkit-endpoint"><div class="endpoint-row">' +
-      '<code class="mono">' + esc(endpoint) + "</code>" +
-      '<button class="linklike" type="button" data-toolkit-copy="' +
-      esc(toolkit.name) + '" aria-label="Copy endpoint for ' +
-      esc(toolkit.name) + '">Copy URL</button></div></div>';
-    el.innerHTML = body;
-    list.appendChild(el);
-  }
-}
-
 function renderConnections(): void {
   const data = DATA;
   if (!data) return;
@@ -579,34 +511,12 @@ function renderConnections(): void {
     if (c.description) {
       head += '<p class="connector-description meta">' + esc(c.description) + "</p>";
     }
-    const memberships = (data.toolkits || [])
-      .filter((toolkit) => toolkit.connectors.includes(c.id))
-      .map((toolkit) => toolkit.name);
-    if (memberships.length) {
-      head += '<div class="connector-toolkits meta"><span>Toolkits</span>' +
-        memberships.map((name) =>
-          '<span class="scope-label">' + esc(name) + "</span>"
-        ).join("") + "</div>";
-    }
     head += '</div><div class="connector-state cap">' + esc(status) + " · " +
       c.toolCount + (c.toolCount === 1 ? " tool" : " tools") +
       '<br><span class="mono">' + esc(c.id) + "</span></div></div>";
     if (c.message) {
       head += '<p class="connector-message msg">' + esc(c.message) + "</p>";
     }
-    if (c.credentialCheck) {
-      const check = c.credentialCheck;
-      const verdict = check.state === "ok"
-        ? "credential verified"
-        : check.state === "auth_required"
-          ? "credential needs authorization"
-          : "credential check failed";
-      head += '<p class="connector-check meta">Credential check: ' +
-        esc(verdict) + " · " + esc(formatDate(check.checkedAt)) +
-        (check.message && check.message !== c.message
-          ? " — " + esc(check.message)
-          : "") + "</p>";
-    }
     if (c.authorizationUrl) {
       const safe = safeHttp(c.authorizationUrl);
       head += safe
@@ -655,22 +565,26 @@ function renderConnections(): void {
         : "No connectors are declared in this deployment.") +
       "</p>";
   }
-  renderToolkits();
 }
 
-async function oauthRequest(
-  connector: string,
-  method: "DELETE" | "POST",
+async function operatorRequest(
+  path: string,
+  method: "DELETE" | "POST" | "PUT",
   generation: number,
+  body?: object,
 ): Promise<UiActionResponse | null> {
   const token = await sessionToken();
   if (generation !== SESSION_GENERATION) {
     throw new Error("The operator session changed.");
   }
   if (!token) throw new Error("Your Clerk session has expired.");
-  const res = await fetch("/ui/oauth/" + encodeURIComponent(connector), {
+  const res = await fetch(path, {
     method,
-    headers: { Authorization: "Bearer " + token },
+    headers: {
+      Authorization: "Bearer " + token,
+      ...(body ? { "Content-Type": "application/json" } : {}),
+    },
+    ...(body ? { body: JSON.stringify(body) } : {}),
   });
   if (res.status === 204) return null;
   let payload: UiActionResponse = {};
@@ -706,8 +620,8 @@ $("list").onclick = async (event) => {
   )];
   buttons.forEach((item) => { item.disabled = true; });
   try {
-    const result = await oauthRequest(
-      connector,
+    const result = await operatorRequest(
+      "/ui/oauth/" + encodeURIComponent(connector),
       action === "disconnect" ? "DELETE" : "POST",
       generation,
     );
@@ -785,17 +699,6 @@ function renderCredentials(): void {
       }
       body += "</div>";
     }
-    if (c.credentialCheck) {
-      const check = c.credentialCheck;
-      const verdict = check.state === "ok"
-        ? "healthy"
-        : check.state === "auth_required"
-          ? "needs authorization"
-          : "check failed";
-      body += '<p class="connector-check meta">Liveness: ' + esc(verdict) +
-        " · " + esc(formatDate(check.checkedAt)) +
-        (check.message ? " — " + esc(check.message) : "") + "</p>";
-    }
     if (cred.error) body += '<div class="msg">' + esc(cred.error) + "</div>";
     // Leftover stored fields are not an error — the credential still works, so
     // this stays muted copy rather than the msg block an actual failure earns.
@@ -853,32 +756,13 @@ async function credentialRequest(
   body: { value: string } | { values: Record<string, string> } | null,
   generation: number,
 ): Promise<UiActionResponse | null> {
-  const token = await sessionToken();
-  if (generation !== SESSION_GENERATION) {
-    throw new Error("The operator session changed.");
-  }
-  if (!token) throw new Error("Your Clerk session has expired.");
   const suffix = action ? "/" + action : "";
-  const res = await fetch(
+  return operatorRequest(
     "/ui/credentials/" + encodeURIComponent(connector) + suffix,
-    {
-      method,
-      headers: {
-        Authorization: "Bearer " + token,
-        ...(body ? { "Content-Type": "application/json" } : {}),
-      },
-      ...(body ? { body: JSON.stringify(body) } : {}),
-    },
+    method,
+    generation,
+    body ?? undefined,
   );
-  if (res.status === 204) return null;
-  let payload: UiActionResponse = {};
-  try {
-    payload = await res.json() as UiActionResponse;
-  } catch {
-    // The status code below still owns the operator-facing error.
-  }
-  if (!res.ok) throw new Error(payload.error || "Request failed (" + res.status + ").");
-  return payload;
 }
 
 function credentialForm(connector: string): HTMLElement {
@@ -1013,24 +897,6 @@ $("copyMcpUrl").onclick = async () => {
   }
   window.setTimeout(() => { button.textContent = "Copy URL"; }, 1600);
 };
-$("toolkitList").onclick = async (event) => {
-  const button = closestElement<HTMLButtonElement>(
-    event.target,
-    "[data-toolkit-copy]",
-  );
-  if (!button) return;
-  const toolkit = button.dataset.toolkitCopy;
-  if (!toolkit) return;
-  try {
-    await navigator.clipboard.writeText(
-      toolkitMcpUrl(toolkit),
-    );
-    button.textContent = "Copied";
-  } catch {
-    button.textContent = "Copy failed";
-  }
-  window.setTimeout(() => { button.textContent = "Copy URL"; }, 1600);
-};
 $("signin").onclick = () => Clerk.redirectToSignIn({
   signInFallbackRedirectUrl: window.location.href,
   signUpFallbackRedirectUrl: window.location.href,

package/src/operator-ui/generated.ts

@@ -1,4 +1,4 @@
 // Generated by scripts/build-operator-ui.mjs. Do not edit.
 // Source: src/operator-ui/browser.ts and src/operator-ui/browser.css.
-export const OPERATOR_UI_CSS = "/* src/operator-ui/browser.css */\n:root {\n  color-scheme: light;\n  --ink: #000;\n  --paper: #fff;\n  --rule: #ccc;\n  --muted: #666;\n  --trace: #f5f5f5;\n  --shell: 70rem;\n  --pad: 1rem;\n  --gap: 1.5rem;\n  --sans:\n    \"Helvetica Neue\",\n    Helvetica,\n    Arial,\n    sans-serif;\n  --mono:\n    ui-monospace,\n    \"SF Mono\",\n    Menlo,\n    Monaco,\n    \"Cascadia Code\",\n    Consolas,\n    monospace;\n}\n* {\n  border-radius: 0;\n  box-sizing: border-box;\n}\nhtml {\n  background: var(--paper);\n  color: var(--ink);\n  font-family: var(--sans);\n  font-size: 16px;\n  line-height: 1.5;\n  -webkit-font-smoothing: antialiased;\n  text-rendering: optimizeLegibility;\n}\nbody {\n  margin: 0;\n  min-height: 100vh;\n}\n::selection {\n  background: var(--ink);\n  color: var(--paper);\n}\n:is(h1, h2, h3, p, ul, ol) {\n  margin: 0;\n  padding: 0;\n}\n:is(h1, h2, h3) {\n  font-size: inherit;\n  font-weight: 400;\n}\n:is(ul, ol) {\n  list-style: none;\n}\na {\n  color: inherit;\n}\nbutton,\ninput {\n  font: inherit;\n}\nbutton {\n  background: none;\n  border: 0;\n  color: inherit;\n  cursor: pointer;\n  margin: 0;\n  padding: 0;\n  text-align: left;\n}\nbutton:disabled {\n  cursor: wait;\n  opacity: .5;\n}\ninput {\n  background: var(--paper);\n  border: 1px solid var(--rule);\n  color: var(--ink);\n  min-height: 2rem;\n  padding: .2rem .5rem;\n}\ninput:focus-visible {\n  outline-offset: -1px;\n}\n:is(a, button, input, summary):focus-visible {\n  outline: 1px solid var(--ink);\n}\n:is(a, button, summary):focus-visible {\n  outline-offset: 2px;\n}\n.skip-link {\n  background: var(--paper);\n  left: var(--pad);\n  padding: .5rem;\n  position: fixed;\n  top: -4rem;\n  z-index: 10;\n}\n.skip-link:focus {\n  top: var(--pad);\n}\n.shell {\n  margin: 0 auto;\n  max-width: var(--shell);\n  padding-left: var(--pad);\n  padding-right: var(--pad);\n}\n.pgrid {\n  column-gap: var(--gap);\n  display: grid;\n  grid-template-columns: repeat(3, minmax(0, 1fr));\n  row-gap: 1rem;\n}\n.pcap {\n  grid-column: 1;\n}\n.pbody {\n  grid-column: 2 / -1;\n  min-width: 0;\n}\n.cap,\n.meta {\n  color: var(--muted);\n  font-size: .9em;\n}\n.mono {\n  font-family: var(--mono);\n  font-size: .78rem;\n}\n.hidden {\n  display: none !important;\n}\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n.masthead {\n  align-items: start;\n  padding-bottom: var(--pad);\n  padding-top: var(--pad);\n}\n.brand {\n  font-weight: 500;\n  grid-column: 1;\n  text-decoration: none;\n}\n.mast-nav {\n  display: flex;\n  gap: var(--gap);\n  grid-column: 2 / -1;\n  justify-content: space-between;\n  min-width: 0;\n}\n.mast-actions {\n  display: flex;\n  gap: var(--gap);\n  justify-content: flex-end;\n  min-width: 0;\n}\n.page-nav,\n.session-actions {\n  display: flex;\n  flex-wrap: wrap;\n  gap: .5rem var(--gap);\n}\n.mast-actions :is(a, button) {\n  align-items: center;\n  display: inline-flex;\n  min-height: 2rem;\n}\n.navlink,\n.linklike {\n  text-decoration: underline;\n  text-decoration-thickness: 1.5px;\n  text-underline-offset: .22em;\n}\n.navlink {\n  text-decoration-color: transparent;\n}\n.navlink:hover,\n.navlink:focus-visible,\n.navlink[aria-current=page] {\n  text-decoration-color: currentColor;\n}\n.linklike {\n  text-decoration-color: currentColor;\n}\n.linklike:hover,\n.linklike:focus-visible {\n  text-decoration-color: transparent;\n}\n.page {\n  padding-bottom: 5rem;\n}\n.lead {\n  margin-top: 6rem;\n}\n.section,\n.section + .section {\n  margin-top: 3rem;\n}\n.lead-copy,\n.body-copy {\n  max-width: 34em;\n}\n.lead-copy > * + *,\n.body-copy > * + * {\n  margin-top: 1.5rem;\n}\n.row,\n.actions {\n  align-items: center;\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--gap);\n}\n.row input {\n  flex: 1;\n  min-width: 12rem;\n}\n.gate-actions {\n  margin-top: 1.5rem;\n}\n#err {\n  margin-top: 1.5rem;\n  text-decoration: underline;\n}\n.endpoint {\n  border-bottom: 1px solid var(--rule);\n  border-top: 1px solid var(--rule);\n}\n.endpoint-row {\n  align-items: baseline;\n  display: flex;\n  gap: var(--gap);\n  min-width: 0;\n  padding: .75rem 0;\n}\n.endpoint-row code {\n  flex: 1;\n  min-width: 0;\n  overflow-x: auto;\n  white-space: nowrap;\n}\n.endpoint-row button {\n  flex: none;\n}\n.connector-tools {\n  border-bottom: 1px solid var(--rule);\n}\n.toolbar {\n  margin-bottom: 1.5rem;\n}\n.toolbar input {\n  flex-basis: 18rem;\n}\n#notice {\n  margin-bottom: .75rem;\n}\n#notice:empty {\n  display: none;\n}\n#notice:not(:empty) {\n  text-decoration: underline;\n}\n#oauthNotice {\n  margin-bottom: .75rem;\n}\n#oauthNotice:empty {\n  display: none;\n}\n.error-notice,\n.msg {\n  text-decoration: underline;\n}\n.card,\n.credential-card,\n.activity-item {\n  padding-left: 1.25rem;\n  position: relative;\n}\n.card::before,\n.credential-card::before,\n.activity-item::before {\n  background: var(--rule);\n  bottom: 0;\n  content: \"\";\n  left: .25rem;\n  position: absolute;\n  top: 0;\n  width: 1px;\n}\n.card {\n  border-top: 1px solid var(--rule);\n  padding-bottom: .75rem;\n  padding-top: .75rem;\n}\n.connector-head {\n  display: grid;\n  gap: var(--gap);\n  grid-template-columns: minmax(0, 2fr) minmax(10rem, 1fr);\n}\n.connector-title {\n  align-items: baseline;\n  display: flex;\n  gap: .5rem;\n}\n.connector-title .dot,\n.activity-stamp .dot {\n  margin-left: -1.25rem;\n}\n.activity-stamp {\n  align-items: baseline;\n  display: flex;\n  gap: .75rem;\n}\n.card h2 {\n  overflow-wrap: anywhere;\n}\n.connector-state {\n  text-align: right;\n}\n.dot {\n  background: var(--paper);\n  border: 1px solid var(--ink);\n  display: inline-block;\n  flex: none;\n  height: .5rem;\n  width: .5rem;\n  z-index: 1;\n}\n.dot.ok {\n  background: var(--ink);\n}\n.dot.auth_required {\n  background:\n    linear-gradient(\n      90deg,\n      var(--ink) 50%,\n      var(--paper) 50%);\n}\n.connector-description {\n  margin-top: .25rem;\n  max-width: 40rem;\n}\n.connector-message,\n.connector-auth {\n  margin-top: .75rem;\n}\n.connector-toolkits {\n  align-items: baseline;\n  display: flex;\n  flex-wrap: wrap;\n  gap: .25rem .5rem;\n  margin-top: .5rem;\n}\n.scope-label {\n  border: 1px solid var(--rule);\n  display: inline-block;\n  font-family: var(--mono);\n  font-size: .72rem;\n  padding: .05rem .35rem;\n}\n.toolkit-copy {\n  margin-bottom: 1rem;\n  max-width: 42rem;\n}\n.toolkit-ledger {\n  border-bottom: 1px solid var(--rule);\n}\n.toolkit-card {\n  border-top: 1px solid var(--rule);\n  padding: .9rem 0 1rem;\n}\n.toolkit-head {\n  display: grid;\n  gap: var(--gap);\n  grid-template-columns: minmax(0, 2fr) minmax(10rem, 1fr);\n}\n.toolkit-name {\n  align-items: baseline;\n  display: flex;\n  flex-wrap: wrap;\n  gap: .5rem;\n}\n.toolkit-name h3 {\n  overflow-wrap: anywhere;\n}\n.toolkit-state {\n  text-align: right;\n}\n.toolkit-connectors {\n  display: flex;\n  flex-wrap: wrap;\n  gap: .5rem;\n  margin-top: .75rem;\n}\n.toolkit-connector {\n  border-left: 1px solid var(--ink);\n  display: inline-flex;\n  flex-wrap: wrap;\n  gap: .4rem;\n  padding-left: .5rem;\n}\n.toolkit-rules {\n  margin-top: .75rem;\n}\n.toolkit-rules > * + * {\n  margin-top: .25rem;\n}\n.toolkit-endpoint {\n  margin-top: .75rem;\n}\n.credential-ledger {\n  border-bottom: 1px solid var(--rule);\n}\n.credential-card {\n  border-top: 1px solid var(--rule);\n  padding-bottom: .75rem;\n  padding-top: .75rem;\n}\n.credential-head {\n  align-items: baseline;\n  display: flex;\n  flex-wrap: wrap;\n  gap: .25rem var(--gap);\n  justify-content: space-between;\n}\n.credential-copy {\n  margin-top: .25rem;\n  max-width: 40rem;\n}\n.credential-field-summary {\n  border-top: 1px solid var(--rule);\n  margin-top: .75rem;\n}\n.credential-field-summary > div {\n  border-bottom: 1px solid var(--rule);\n  display: flex;\n  flex-wrap: wrap;\n  gap: .25rem var(--gap);\n  justify-content: space-between;\n  padding: .5rem 0;\n}\n.credential-actions {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--gap);\n  margin-top: .75rem;\n}\n.credential-actions button,\n.credential-form button,\n.activity-controls button,\n.activity-more {\n  align-items: center;\n  display: inline-flex;\n  min-height: 2.75rem;\n}\n.credential-form {\n  align-items: center;\n  display: flex;\n  flex-wrap: wrap;\n  gap: .75rem var(--gap);\n  margin-top: .75rem;\n}\n.credential-form > input {\n  flex: 1 1 18rem;\n}\n.credential-fields {\n  display: grid;\n  flex: 1 1 100%;\n  gap: .75rem;\n}\n.credential-field {\n  align-items: center;\n  display: grid;\n  gap: var(--gap);\n  grid-template-columns: minmax(9rem, 12rem) 1fr;\n}\n.credential-field input {\n  min-width: 0;\n  width: 100%;\n}\n.danger {\n  text-decoration-style: double;\n}\ndetails {\n  margin-top: .75rem;\n}\nsummary {\n  cursor: pointer;\n  list-style: none;\n  width: max-content;\n}\nsummary::-webkit-details-marker {\n  display: none;\n}\n.tool-list {\n  border-bottom: 1px solid var(--rule);\n  margin-top: .5rem;\n}\n.tool {\n  border-top: 1px solid var(--rule);\n  display: grid;\n  gap: .25rem var(--gap);\n  grid-template-columns: minmax(12rem, 1fr) minmax(0, 2fr);\n  padding: .5rem 0;\n}\n.tool code {\n  font-family: var(--mono);\n  font-size: .78rem;\n  overflow-wrap: anywhere;\n}\n.tool .td {\n  color: var(--muted);\n  font-size: .9em;\n}\n.empty {\n  border-top: 1px solid var(--rule);\n  padding: .75rem 0;\n}\n.activity-copy {\n  margin-bottom: 1.5rem;\n}\n.activity-controls {\n  margin-bottom: 1.5rem;\n}\n.activity-controls input {\n  flex: 1 1 18rem;\n}\n#activityNotice {\n  margin-bottom: .75rem;\n}\n.activity-ledger {\n  border-bottom: 1px solid var(--rule);\n}\n.activity-item {\n  border-top: 1px solid var(--rule);\n  display: grid;\n  gap: .25rem var(--gap);\n  grid-template-columns: minmax(9rem, .85fr) minmax(12rem, 1.4fr) minmax(8rem, .9fr);\n  padding-bottom: .75rem;\n  padding-top: .75rem;\n}\n.activity-time,\n.activity-actor,\n.activity-detail {\n  color: var(--muted);\n  font-size: .82rem;\n}\n.activity-actor-id {\n  color: var(--muted);\n  margin-top: .1rem;\n}\n.activity-address {\n  font-family: var(--mono);\n  font-size: .78rem;\n  overflow-wrap: anywhere;\n}\n.activity-outcome {\n  font-size: .9em;\n}\n.activity-item.error .activity-outcome,\n.activity-item.timeout .activity-outcome,\n.activity-item.cancelled .activity-outcome {\n  text-decoration: underline;\n}\n.activity-empty {\n  border-top: 1px solid var(--rule);\n  padding: .75rem 0;\n}\n.activity-more {\n  margin-top: .75rem;\n}\n.unavailable {\n  background: var(--trace);\n  border-bottom: 1px solid var(--rule);\n  border-top: 1px solid var(--rule);\n  padding: .75rem;\n}\n@media (prefers-reduced-motion: reduce) {\n  html:focus-within {\n    scroll-behavior: auto;\n  }\n}\n@media (max-width: 36.99rem) {\n  .pgrid {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n  .pcap,\n  .pbody {\n    grid-column: 1 / -1;\n  }\n  .masthead .brand {\n    grid-column: 1;\n  }\n  .mast-nav {\n    grid-column: 1 / -1;\n    grid-row: 2;\n    justify-content: flex-start;\n  }\n  .product {\n    display: none;\n  }\n  .mast-actions {\n    align-items: flex-start;\n    flex-direction: column;\n    font-size: .875rem;\n    gap: .25rem;\n  }\n  .lead {\n    margin-top: 4rem;\n  }\n  .section,\n  .section + .section {\n    margin-top: 2.5rem;\n  }\n  .connector-head,\n  .toolkit-head,\n  .tool,\n  .activity-item {\n    grid-template-columns: 1fr;\n  }\n  .connector-state,\n  .toolkit-state {\n    text-align: left;\n  }\n  .credential-field {\n    align-items: start;\n    grid-template-columns: 1fr;\n    gap: .25rem;\n  }\n  input {\n    min-height: 2.75rem;\n  }\n}\n";
-export const OPERATOR_UI_SCRIPT = "\"use strict\";\n(() => {\n  // src/operator-ui/model.ts\n  function filterUiConnectors(connectors, query) {\n    const q = query.trim().toLowerCase();\n    const filtered = [];\n    for (const connector of connectors) {\n      const connectorText = [\n        connector.id,\n        connector.title,\n        connector.description,\n        connector.status\n      ].join(\" \").toLowerCase();\n      const connectorMatches = Boolean(q && connectorText.includes(q));\n      const tools = connector.tools.filter(\n        (tool) => !q || connectorMatches || `${tool.name} ${tool.description ?? \"\"}`.toLowerCase().includes(q)\n      );\n      if (q && tools.length === 0 && !connectorMatches) continue;\n      filtered.push({ connector, tools });\n    }\n    return filtered;\n  }\n\n  // src/operator-ui/browser.ts\n  var KEY = \"connecta:token\";\n  var $ = (id) => {\n    const element = document.getElementById(id);\n    if (!element) throw new Error(`Missing operator UI element #${id}`);\n    return element;\n  };\n  var PAGE_META = {\n    connections: { path: \"/\", label: \"Connections\" },\n    credentials: { path: \"/credentials\", label: \"Credentials\" },\n    activity: { path: \"/activity\", label: \"Activity\" }\n  };\n  var DATA = null;\n  var ACTIVITY = [];\n  var ACTIVITY_CURSOR = null;\n  var ACTIVITY_LOADED = false;\n  var CURRENT_PAGE = INITIAL_PAGE;\n  var SESSION_GENERATION = 0;\n  var ACTIVITY_GENERATION = 0;\n  var CLERK_SESSION_ID = null;\n  $(\"mcpUrl\").textContent = MCP_URL;\n  function errorMessage(error, fallback) {\n    return error instanceof Error && error.message ? error.message : fallback;\n  }\n  function closestElement(target, selector) {\n    const candidate = target;\n    return typeof candidate?.closest === \"function\" ? candidate.closest(selector) : null;\n  }\n  function esc(s) {\n    return String(s == null ? \"\" : s).replace(/[&<>\"]/g, (c) => ({ \"&\": \"&amp;\", \"<\": \"&lt;\", \">\": \"&gt;\", '\"': \"&quot;\" })[c] ?? c);\n  }\n  function safeHttp(u) {\n    try {\n      const p = new URL(u).protocol;\n      return p === \"http:\" || p === \"https:\" ? u : null;\n    } catch {\n      return null;\n    }\n  }\n  function formatDate(value) {\n    if (!value) return \"\";\n    const date = new Date(value);\n    return Number.isNaN(date.valueOf()) ? \"\" : date.toLocaleString();\n  }\n  function setNotice(message, isError = false) {\n    $(\"credentialNotice\").textContent = message || \"\";\n    $(\"credentialNotice\").classList.toggle(\"error-notice\", Boolean(isError));\n    $(\"credentialNotice\").setAttribute(\"role\", isError ? \"alert\" : \"status\");\n  }\n  function setOauthNotice(message, isError = false) {\n    $(\"oauthNotice\").textContent = message || \"\";\n    $(\"oauthNotice\").classList.toggle(\"error-notice\", Boolean(isError));\n    $(\"oauthNotice\").setAttribute(\"role\", isError ? \"alert\" : \"status\");\n  }\n  async function sessionToken() {\n    return AUTH.kind === \"clerk\" ? await Clerk.session?.getToken() : localStorage.getItem(KEY);\n  }\n  function clearActivityState() {\n    ACTIVITY_GENERATION += 1;\n    ACTIVITY = [];\n    ACTIVITY_CURSOR = null;\n    ACTIVITY_LOADED = false;\n    $(\"activityList\").innerHTML = \"\";\n    $(\"activityList\").setAttribute(\"aria-busy\", \"false\");\n    $(\"activityNotice\").textContent = \"\";\n    $(\"activityNotice\").setAttribute(\"role\", \"status\");\n    $(\"activitySummary\").textContent = \"Arguments and results are never stored.\";\n    $(\"activitySearch\").value = \"\";\n    $(\"refreshActivity\").disabled = false;\n    $(\"moreActivity\").disabled = false;\n    $(\"moreActivity\").classList.add(\"hidden\");\n  }\n  function clearIdentityState() {\n    SESSION_GENERATION += 1;\n    DATA = null;\n    clearActivityState();\n    $(\"list\").innerHTML = \"\";\n    setOauthNotice(\"\");\n    $(\"toolkitList\").innerHTML = \"\";\n    $(\"filter\").value = \"\";\n    $(\"credentialList\").innerHTML = \"\";\n    $(\"credentialList\").setAttribute(\"aria-busy\", \"false\");\n    $(\"credentialNotice\").textContent = \"\";\n    $(\"credentialNotice\").setAttribute(\"role\", \"status\");\n    $(\"credentialNotice\").classList.remove(\"error-notice\");\n    $(\"credentialUnavailable\").textContent = \"\";\n    $(\"credentialUnavailable\").classList.add(\"hidden\");\n    $(\"credentialList\").classList.add(\"hidden\");\n    $(\"activityUnavailable\").classList.add(\"hidden\");\n    $(\"activityAvailable\").classList.add(\"hidden\");\n    $(\"credentialsNav\").classList.add(\"hidden\");\n    $(\"activityNav\").classList.add(\"hidden\");\n    $(\"serverInfo\").textContent = PRODUCT_OPERATOR_LABEL;\n  }\n  function showGate(msg) {\n    clearIdentityState();\n    $(\"app\").classList.add(\"hidden\");\n    $(\"appNav\").classList.add(\"hidden\");\n    $(\"gate\").classList.remove(\"hidden\");\n    $(\"err\").textContent = msg || \"\";\n    if (AUTH.kind === \"clerk\") {\n      const signedIn = Boolean(window.Clerk && Clerk.user);\n      $(\"gateCopy\").textContent = signedIn ? \"Signed in with Clerk, but this account cannot open deployment-wide operator pages.\" : \"Sign in with Clerk to open this operator page.\";\n      $(\"signin\").classList.toggle(\"hidden\", signedIn);\n      $(\"gateSignout\").classList.toggle(\"hidden\", !signedIn);\n    } else {\n      $(\"gateCopy\").textContent = \"\";\n    }\n  }\n  function pageForPath(path) {\n    if (path === \"/credentials\") return \"credentials\";\n    if (path === \"/activity\") return \"activity\";\n    return \"connections\";\n  }\n  function credentialUnavailableCopy(capability) {\n    if (capability === \"no_slots\") {\n      return \"No connectors declare operator-managed credential slots. Connector credentials remain configuration-as-code until a slot is declared.\";\n    }\n    if (capability === \"vault_not_configured\") {\n      return \"Credential storage is not configured. Set credentials.encryptionKey before managing connector credentials here.\";\n    }\n    return \"Credential management requires an eligible Clerk operator. Bearer-authenticated sessions can inspect connections but cannot manage stored credentials.\";\n  }\n  function updateCapabilities() {\n    const credentialsAvailable = DATA?.credentialManagement === \"available\";\n    $(\"credentialsNav\").classList.toggle(\"hidden\", !credentialsAvailable);\n    $(\"activityNav\").classList.toggle(\"hidden\", !DATA?.activityEnabled);\n    $(\"credentialUnavailable\").classList.toggle(\"hidden\", credentialsAvailable);\n    $(\"credentialList\").classList.toggle(\"hidden\", !credentialsAvailable);\n    $(\"credentialUnavailable\").textContent = credentialsAvailable ? \"\" : credentialUnavailableCopy(DATA?.credentialManagement);\n    $(\"activityUnavailable\").classList.toggle(\"hidden\", Boolean(DATA?.activityEnabled));\n    $(\"activityAvailable\").classList.toggle(\"hidden\", !DATA?.activityEnabled);\n  }\n  function activatePage(page, options) {\n    const next = PAGE_META[page] ? page : \"connections\";\n    CURRENT_PAGE = next;\n    for (const name of Object.keys(PAGE_META)) {\n      $(name + \"View\").classList.toggle(\"hidden\", name !== next);\n      const link = $(name + \"Nav\");\n      if (name === next) link.setAttribute(\"aria-current\", \"page\");\n      else link.removeAttribute(\"aria-current\");\n    }\n    $(\"gateHeading\").textContent = PAGE_META[next].label;\n    document.title = PAGE_META[next].label + \" — \" + TITLE_SUFFIX;\n    if (DATA) {\n      updateCapabilities();\n      if (next === \"connections\") renderConnections();\n      if (next === \"credentials\") renderCredentials();\n      if (next === \"activity\" && DATA.activityEnabled && !ACTIVITY_LOADED) {\n        loadActivity(true);\n      }\n    }\n    if (next !== \"credentials\") {\n      $(\"credentialList\").innerHTML = \"\";\n      setNotice(\"\");\n    }\n    if (options?.focus) $(DATA ? next + \"Heading\" : \"gateHeading\").focus();\n  }\n  function navigateTo(page, href) {\n    history.pushState({ operatorPage: page }, \"\", href);\n    activatePage(page, { focus: true });\n  }\n  async function load() {\n    const generation = SESSION_GENERATION;\n    let token;\n    try {\n      token = await sessionToken();\n    } catch (error) {\n      if (generation !== SESSION_GENERATION) return;\n      return showGate(\n        \"Could not read the Clerk session: \" + errorMessage(error, \"unknown error\")\n      );\n    }\n    if (generation !== SESSION_GENERATION) return;\n    if (!token) return showGate(\"\");\n    let res;\n    try {\n      res = await fetch(\"/ui/data\", { headers: { Authorization: \"Bearer \" + token } });\n    } catch (error) {\n      if (generation !== SESSION_GENERATION) return;\n      return showGate(\"Network error: \" + errorMessage(error, \"unknown error\"));\n    }\n    if (generation !== SESSION_GENERATION) return;\n    if (res.status === 401 || res.status === 403) {\n      if (AUTH.kind === \"clerk\") {\n        return showGate(\n          res.status === 403 ? \"This Clerk account is not allowed to access connecta.\" : \"Your Clerk session was not accepted. Sign out and try again.\"\n        );\n      }\n      localStorage.removeItem(KEY);\n      return showGate(\"Token rejected — enter a valid bearer token.\");\n    }\n    if (!res.ok) return showGate(\"Error \" + res.status);\n    let data;\n    try {\n      data = await res.json();\n    } catch {\n      if (generation !== SESSION_GENERATION) return;\n      return showGate(\"Operator data could not be read.\");\n    }\n    if (generation !== SESSION_GENERATION) return;\n    DATA = data;\n    $(\"gate\").classList.add(\"hidden\");\n    $(\"app\").classList.remove(\"hidden\");\n    $(\"appNav\").classList.remove(\"hidden\");\n    const si = data.serverInfo || {};\n    $(\"serverInfo\").textContent = (si.name || PRODUCT_NAME) + \" v\" + (data.connectaVersion || \"?\");\n    updateCapabilities();\n    activatePage(CURRENT_PAGE);\n  }\n  function actorLabel(actor) {\n    if (!actor || !actor.kind) return \"unknown\";\n    return actor.label ? actor.kind + \" · \" + actor.label : actor.id ? actor.kind + \" · \" + actor.id : actor.kind;\n  }\n  function renderActivity() {\n    const list = $(\"activityList\");\n    list.innerHTML = \"\";\n    const query = $(\"activitySearch\").value.trim().toLowerCase();\n    const visible = ACTIVITY.filter((event) => {\n      if (!query) return true;\n      const actor = event.actor || {};\n      return [\n        event.address,\n        event.connectorId,\n        event.toolName,\n        event.source,\n        event.outcome,\n        event.errorCode,\n        actor.kind,\n        actor.id,\n        actor.namespace,\n        actor.label\n      ].some((value) => String(value || \"\").toLowerCase().includes(query));\n    });\n    const uniqueTools = new Set(ACTIVITY.map((event) => event.address)).size;\n    $(\"activitySummary\").textContent = ACTIVITY.length ? ACTIVITY.length + \" loaded call\" + (ACTIVITY.length === 1 ? \"\" : \"s\") + \" · \" + uniqueTools + \" tool\" + (uniqueTools === 1 ? \"\" : \"s\") + \" · no arguments or results stored\" : \"Arguments and results are never stored.\";\n    if (visible.length === 0) {\n      list.innerHTML = '<div class=\"activity-empty\">' + (query ? \"No loaded activity matches this search.\" : \"No connector tool calls recorded yet.\") + \"</div>\";\n    }\n    for (const event of visible) {\n      const item = document.createElement(\"article\");\n      const outcomeClass = [\n        \"success\",\n        \"error\",\n        \"timeout\",\n        \"cancelled\"\n      ].includes(event.outcome) ? event.outcome : \"error\";\n      item.className = \"activity-item \" + outcomeClass;\n      const retryCopy = event.attempts > 1 ? \" · \" + esc(event.attempts) + \" attempts\" : \"\";\n      const errorCopy = event.errorCode ? \" · \" + esc(event.errorCode) : \"\";\n      const actorId = event.actor?.id ? event.actor.namespace ? event.actor.namespace + \" · \" + event.actor.id : event.actor.id : \"\";\n      const stableActorId = actorId && (event.actor?.label || event.actor?.namespace) ? '<div class=\"activity-actor-id mono\">' + esc(actorId) + \"</div>\" : \"\";\n      item.innerHTML = '<div class=\"activity-stamp\"><span class=\"dot ' + (outcomeClass === \"success\" ? \"ok\" : \"\") + '\" aria-hidden=\"true\"></span><div><time class=\"activity-time\" datetime=\"' + esc(event.occurredAt) + '\">' + esc(formatDate(event.occurredAt)) + '</time><div class=\"activity-actor\">' + esc(actorLabel(event.actor)) + \"</div>\" + stableActorId + '</div></div><div><div class=\"activity-address\">' + esc(event.address) + '</div><div class=\"activity-detail\">' + esc(event.source) + retryCopy + errorCopy + '</div></div><div><div class=\"activity-outcome\">' + esc(event.outcome) + '</div><div class=\"activity-detail\">' + esc(event.durationMs) + \" ms</div></div>\";\n      list.appendChild(item);\n    }\n    $(\"moreActivity\").classList.toggle(\"hidden\", !ACTIVITY_CURSOR);\n  }\n  async function loadActivity(reset) {\n    if (!DATA?.activityEnabled) return;\n    const sessionGeneration = SESSION_GENERATION;\n    if (reset) ACTIVITY_GENERATION += 1;\n    const activityGeneration = ACTIVITY_GENERATION;\n    const isCurrent = () => sessionGeneration === SESSION_GENERATION && activityGeneration === ACTIVITY_GENERATION;\n    $(\"activityNotice\").textContent = \"Loading activity…\";\n    $(\"activityNotice\").setAttribute(\"role\", \"status\");\n    $(\"activityList\").setAttribute(\"aria-busy\", \"true\");\n    $(\"refreshActivity\").disabled = true;\n    $(\"moreActivity\").disabled = true;\n    try {\n      const token = await sessionToken();\n      if (!isCurrent()) return;\n      if (!token) return showGate(\"Your session has expired.\");\n      const cursor = reset ? null : ACTIVITY_CURSOR;\n      const params = new URLSearchParams({ limit: \"50\" });\n      if (cursor) params.set(\"cursor\", cursor);\n      const res = await fetch(\"/ui/activity?\" + params, {\n        headers: { Authorization: \"Bearer \" + token }\n      });\n      if (!isCurrent()) return;\n      let payload = {};\n      try {\n        payload = await res.json();\n      } catch {\n      }\n      if (!isCurrent()) return;\n      if (res.status === 401) {\n        return showGate(\"Your session was not accepted. Sign in again.\");\n      }\n      if (res.status === 403) {\n        clearActivityState();\n        $(\"activityNotice\").setAttribute(\"role\", \"alert\");\n        $(\"activityNotice\").textContent = \"This identity may not read activity history.\";\n        return;\n      }\n      if (!res.ok) {\n        throw new Error(\n          payload.error || \"Activity could not be loaded (\" + res.status + \").\"\n        );\n      }\n      ACTIVITY = reset ? payload.events || [] : ACTIVITY.concat(payload.events || []);\n      ACTIVITY_CURSOR = payload.nextCursor || null;\n      ACTIVITY_LOADED = true;\n      $(\"activityNotice\").textContent = \"\";\n      renderActivity();\n    } catch (error) {\n      if (!isCurrent()) return;\n      $(\"activityNotice\").setAttribute(\"role\", \"alert\");\n      $(\"activityNotice\").textContent = errorMessage(\n        error,\n        \"Activity could not be loaded.\"\n      );\n    } finally {\n      if (isCurrent()) {\n        $(\"activityList\").setAttribute(\"aria-busy\", \"false\");\n        $(\"refreshActivity\").disabled = false;\n        $(\"moreActivity\").disabled = false;\n      }\n    }\n  }\n  function toolkitMcpUrl(name) {\n    const url = new URL(MCP_URL, window.location.href);\n    url.searchParams.set(\"toolkit\", name);\n    return url.toString();\n  }\n  function renderToolkits() {\n    const data = DATA;\n    if (!data) return;\n    const list = $(\"toolkitList\");\n    const toolkits = data.toolkits || [];\n    list.innerHTML = \"\";\n    if (!toolkits.length) {\n      list.innerHTML = '<p class=\"empty\">No toolkits are configured. Unscoped clients see the full connector registry.</p>';\n      return;\n    }\n    const connectors = new Map(\n      data.connectors.map((connector) => [connector.id, connector])\n    );\n    for (const toolkit of toolkits) {\n      const el = document.createElement(\"article\");\n      el.className = \"toolkit-card\";\n      const connectorCount = toolkit.connectors.length;\n      const toolCount = toolkit.toolCount || 0;\n      let body = '<div class=\"toolkit-head\"><div><div class=\"toolkit-name\"><h3 class=\"mono\">' + esc(toolkit.name) + '</h3><span class=\"cap\">configured view</span></div>';\n      body += '</div><div class=\"toolkit-state cap\">' + connectorCount + (connectorCount === 1 ? \" connector\" : \" connectors\") + \" · \" + toolCount + (toolCount === 1 ? \" loaded tool\" : \" loaded tools\") + \"</div></div>\";\n      body += '<ul class=\"toolkit-connectors\" aria-label=\"Included connectors\">';\n      for (const id of toolkit.connectors) {\n        const connector = connectors.get(id);\n        body += '<li class=\"toolkit-connector\"><span>' + esc(connector?.title || id) + '</span><code class=\"mono\">' + esc(id) + \"</code></li>\";\n      }\n      body += \"</ul>\";\n      body += '<div class=\"toolkit-rules meta\">';\n      if (toolkit.includeTools.length) {\n        body += '<p>Per-connector allowlist: <span class=\"mono\">' + toolkit.includeTools.map(esc).join('</span>, <span class=\"mono\">') + \"</span>. Connectors without an allowlist keep all tools.</p>\";\n      }\n      if (toolkit.excludeTools.length) {\n        body += '<p>Hidden: <span class=\"mono\">' + toolkit.excludeTools.map(esc).join('</span>, <span class=\"mono\">') + \"</span></p>\";\n      }\n      if (!toolkit.includeTools.length && !toolkit.excludeTools.length) {\n        body += \"<p>All tools on the included connectors are visible.</p>\";\n      }\n      body += \"</div>\";\n      const endpoint = toolkitMcpUrl(toolkit.name);\n      body += '<div class=\"endpoint toolkit-endpoint\"><div class=\"endpoint-row\"><code class=\"mono\">' + esc(endpoint) + '</code><button class=\"linklike\" type=\"button\" data-toolkit-copy=\"' + esc(toolkit.name) + '\" aria-label=\"Copy endpoint for ' + esc(toolkit.name) + '\">Copy URL</button></div></div>';\n      el.innerHTML = body;\n      list.appendChild(el);\n    }\n  }\n  function renderConnections() {\n    const data = DATA;\n    if (!data) return;\n    const q = $(\"filter\").value.trim().toLowerCase();\n    const list = $(\"list\");\n    list.innerHTML = \"\";\n    for (const filtered of filterUiConnectors(data.connectors, q)) {\n      const c = filtered.connector;\n      const tools = filtered.tools;\n      const el = document.createElement(\"div\");\n      el.className = \"card\";\n      const status = c.status === \"ok\" ? \"Connected\" : c.status === \"auth_required\" ? \"Authorization needed\" : \"Unavailable\";\n      let head = '<div class=\"connector-head\"><div><div class=\"connector-title\"><span class=\"dot ' + esc(c.status) + '\" aria-hidden=\"true\"></span><h2>' + esc(c.title || c.id) + \"</h2></div>\";\n      if (c.description) {\n        head += '<p class=\"connector-description meta\">' + esc(c.description) + \"</p>\";\n      }\n      const memberships = (data.toolkits || []).filter((toolkit) => toolkit.connectors.includes(c.id)).map((toolkit) => toolkit.name);\n      if (memberships.length) {\n        head += '<div class=\"connector-toolkits meta\"><span>Toolkits</span>' + memberships.map(\n          (name) => '<span class=\"scope-label\">' + esc(name) + \"</span>\"\n        ).join(\"\") + \"</div>\";\n      }\n      head += '</div><div class=\"connector-state cap\">' + esc(status) + \" · \" + c.toolCount + (c.toolCount === 1 ? \" tool\" : \" tools\") + '<br><span class=\"mono\">' + esc(c.id) + \"</span></div></div>\";\n      if (c.message) {\n        head += '<p class=\"connector-message msg\">' + esc(c.message) + \"</p>\";\n      }\n      if (c.credentialCheck) {\n        const check = c.credentialCheck;\n        const verdict = check.state === \"ok\" ? \"credential verified\" : check.state === \"auth_required\" ? \"credential needs authorization\" : \"credential check failed\";\n        head += '<p class=\"connector-check meta\">Credential check: ' + esc(verdict) + \" · \" + esc(formatDate(check.checkedAt)) + (check.message && check.message !== c.message ? \" — \" + esc(check.message) : \"\") + \"</p>\";\n      }\n      if (c.authorizationUrl) {\n        const safe = safeHttp(c.authorizationUrl);\n        head += safe ? '<p class=\"connector-auth\"><a class=\"linklike\" href=\"' + esc(safe) + '\" target=\"_blank\" rel=\"noopener\">Authorize connector →</a></p>' : '<p class=\"connector-auth meta\">Authorization URL: ' + esc(c.authorizationUrl) + \"</p>\";\n      }\n      if (c.oauth && data.oauthManagement) {\n        const oauthName = c.title || c.id;\n        head += '<div class=\"credential-actions\">';\n        head += '<button type=\"button\" class=\"linklike danger\" aria-label=\"Disconnect OAuth for ' + esc(oauthName) + '\" data-oauth-action=\"disconnect\" data-connector=\"' + esc(c.id) + '\">Disconnect OAuth</button>';\n        head += '<button type=\"button\" class=\"linklike\" aria-label=\"' + (c.status === \"ok\" ? \"Reconnect OAuth for \" : \"Restart authorization for \") + esc(oauthName) + '\" data-oauth-action=\"reconnect\" data-connector=\"' + esc(c.id) + '\">' + (c.status === \"ok\" ? \"Reconnect OAuth\" : \"Restart authorization\") + \"</button></div>\";\n      }\n      if (c.credential) {\n        head += '<p class=\"connector-auth\"><a class=\"linklike\" href=\"/credentials\" data-operator-page=\"credentials\">Manage credential →</a></p>';\n      }\n      let body = \"\";\n      if (tools.length) {\n        body = \"<details\" + (q ? \" open\" : \"\") + '><summary class=\"linklike\">Show tools (' + tools.length + ')</summary><div class=\"tool-list\">';\n        for (const t of tools) {\n          body += '<div class=\"tool\"><code>' + esc(t.address) + \"</code>\";\n          if (t.description) body += '<span class=\"td\">' + esc(t.description) + \"</span>\";\n          body += \"</div>\";\n        }\n        body += \"</div></details>\";\n      }\n      el.innerHTML = head + body;\n      list.appendChild(el);\n    }\n    if (!list.children.length) {\n      list.innerHTML = '<p class=\"empty\">' + (q ? \"No connectors or tools match this filter.\" : \"No connectors are declared in this deployment.\") + \"</p>\";\n    }\n    renderToolkits();\n  }\n  async function oauthRequest(connector, method, generation) {\n    const token = await sessionToken();\n    if (generation !== SESSION_GENERATION) {\n      throw new Error(\"The operator session changed.\");\n    }\n    if (!token) throw new Error(\"Your Clerk session has expired.\");\n    const res = await fetch(\"/ui/oauth/\" + encodeURIComponent(connector), {\n      method,\n      headers: { Authorization: \"Bearer \" + token }\n    });\n    if (res.status === 204) return null;\n    let payload = {};\n    try {\n      payload = await res.json();\n    } catch {\n    }\n    if (!res.ok) throw new Error(payload.error || \"Request failed (\" + res.status + \").\");\n    return payload;\n  }\n  $(\"list\").onclick = async (event) => {\n    const button = closestElement(\n      event.target,\n      \"[data-oauth-action]\"\n    );\n    if (!button) return;\n    const connector = button.dataset.connector;\n    const action = button.dataset.oauthAction;\n    if (!connector || action !== \"disconnect\" && action !== \"reconnect\") return;\n    const generation = SESSION_GENERATION;\n    const question = action === \"disconnect\" ? \"Disconnect OAuth for \" + connector + \"? Stored credentials and any pending authorization will be removed.\" : \"Restart OAuth for \" + connector + \"? Stored credentials and any pending authorization will be replaced.\";\n    if (!window.confirm(question)) return;\n    setOauthNotice(\"\");\n    const buttons = [...document.querySelectorAll(\n      '[data-connector=\"' + CSS.escape(connector) + '\"]'\n    )];\n    buttons.forEach((item) => {\n      item.disabled = true;\n    });\n    try {\n      const result = await oauthRequest(\n        connector,\n        action === \"disconnect\" ? \"DELETE\" : \"POST\",\n        generation\n      );\n      if (generation !== SESSION_GENERATION) return;\n      await load();\n      if (generation !== SESSION_GENERATION) return;\n      setOauthNotice(\n        action === \"disconnect\" ? \"OAuth disconnected. Restart authorization when you are ready to reconnect.\" : result?.message || \"Authorization restarted. Open the authorization link to reconnect.\"\n      );\n      $(\"oauthNotice\").focus();\n    } catch (error) {\n      if (generation !== SESSION_GENERATION) return;\n      try {\n        await load();\n      } catch {\n      }\n      if (generation !== SESSION_GENERATION) return;\n      setOauthNotice(errorMessage(error, \"OAuth action failed.\"), true);\n      $(\"oauthNotice\").focus();\n    } finally {\n      if (generation === SESSION_GENERATION) {\n        buttons.forEach((item) => {\n          item.disabled = false;\n        });\n      }\n    }\n  };\n  function renderCredentials() {\n    const data = DATA;\n    if (!data) return;\n    const list = $(\"credentialList\");\n    list.innerHTML = \"\";\n    if (data.credentialManagement !== \"available\") return;\n    for (const c of data.connectors) {\n      const cred = c.credential;\n      if (!cred) continue;\n      const configured = Boolean(cred.configured);\n      const removable = configured || Boolean(cred.removable);\n      const state = configured ? cred.fields?.length ? \"configured\" : \"configured · ••••\" + esc(cred.lastFour || \"\") : \"not configured\";\n      const updated = configured && cred.updatedAt ? \" · updated \" + esc(formatDate(cred.updatedAt)) : \"\";\n      const el = document.createElement(\"section\");\n      el.className = \"credential-card\";\n      el.id = \"credential-\" + c.id;\n      el.setAttribute(\"aria-labelledby\", \"credential-title-\" + c.id);\n      let body = '<div class=\"credential-head\"><div class=\"connector-title\"><span class=\"dot ' + (configured ? \"ok\" : \"auth_required\") + '\" aria-hidden=\"true\"></span><h2 id=\"credential-title-' + esc(c.id) + '\">' + esc(c.title || c.id) + '</h2></div><span class=\"credential-state\">' + state + updated + \"</span></div>\";\n      body += '<p class=\"mono\">' + esc(c.id) + \" · \" + esc(cred.label) + \"</p>\";\n      if (cred.description) {\n        body += '<p class=\"credential-copy meta\">' + esc(cred.description) + \"</p>\";\n      }\n      if (cred.fields?.length) {\n        body += '<div class=\"credential-field-summary\">';\n        for (const field of cred.fields) {\n          const fieldState = field.configured ? \"configured · ••••\" + esc(field.lastFour || \"\") + (field.updatedAt ? \" · updated \" + esc(formatDate(field.updatedAt)) : \"\") : \"not configured\";\n          body += \"<div><span>\" + esc(field.label) + '</span><span class=\"meta\">' + fieldState + \"</span></div>\";\n        }\n        body += \"</div>\";\n      }\n      if (c.credentialCheck) {\n        const check = c.credentialCheck;\n        const verdict = check.state === \"ok\" ? \"healthy\" : check.state === \"auth_required\" ? \"needs authorization\" : \"check failed\";\n        body += '<p class=\"connector-check meta\">Liveness: ' + esc(verdict) + \" · \" + esc(formatDate(check.checkedAt)) + (check.message ? \" — \" + esc(check.message) : \"\") + \"</p>\";\n      }\n      if (cred.error) body += '<div class=\"msg\">' + esc(cred.error) + \"</div>\";\n      if (cred.notice) {\n        body += '<p class=\"credential-copy meta\">' + esc(cred.notice) + \"</p>\";\n      }\n      body += '<div class=\"credential-actions\">';\n      body += '<button class=\"linklike\" type=\"button\" data-credential-action=\"edit\" data-connector=\"' + esc(c.id) + '\">' + (removable ? \"Replace\" : \"Add credential\") + \"</button>\";\n      if (configured && cred.testable) {\n        body += '<button class=\"linklike\" type=\"button\" data-credential-action=\"test\" data-connector=\"' + esc(c.id) + '\">Test</button>';\n      }\n      if (removable) {\n        body += '<button type=\"button\" class=\"linklike danger\" data-credential-action=\"remove\" data-connector=\"' + esc(c.id) + '\">Remove</button>';\n      }\n      body += \"</div>\";\n      body += '<div class=\"credential-form hidden\" data-credential-form=\"' + esc(c.id) + '\">';\n      if (cred.fields && cred.fields.length) {\n        body += '<div class=\"credential-fields\">';\n        for (const [index, field] of cred.fields.entries()) {\n          const inputId = \"credential-input-\" + c.id + \"-\" + index;\n          body += '<div class=\"credential-field\"><label for=\"' + esc(inputId) + '\">' + esc(field.label) + '</label><input id=\"' + esc(inputId) + '\" type=\"' + esc(field.inputType || \"password\") + '\" data-credential-field=\"' + esc(field.name) + '\" placeholder=\"' + esc(field.placeholder || field.label) + '\" autocomplete=\"' + (field.inputType === \"password\" ? \"new-password\" : \"off\") + '\" autocapitalize=\"none\" spellcheck=\"false\"></div>';\n        }\n        body += \"</div>\";\n      } else {\n        const inputId = \"credential-input-\" + c.id;\n        body += '<label class=\"visually-hidden\" for=\"' + esc(inputId) + '\">' + esc(cred.label) + '</label><input id=\"' + esc(inputId) + '\" type=\"password\" data-credential-input=\"' + esc(c.id) + '\" aria-label=\"' + esc(cred.label) + '\" placeholder=\"' + esc(cred.placeholder || \"Paste credential\") + '\" autocomplete=\"new-password\" autocapitalize=\"none\" spellcheck=\"false\">';\n      }\n      body += '<button class=\"linklike\" type=\"button\" data-credential-action=\"save\" data-connector=\"' + esc(c.id) + '\">Save</button><button class=\"linklike\" type=\"button\" data-credential-action=\"cancel\" data-connector=\"' + esc(c.id) + '\">Cancel</button></div>';\n      el.innerHTML = body;\n      list.appendChild(el);\n    }\n  }\n  async function credentialRequest(connector, method, action, body, generation) {\n    const token = await sessionToken();\n    if (generation !== SESSION_GENERATION) {\n      throw new Error(\"The operator session changed.\");\n    }\n    if (!token) throw new Error(\"Your Clerk session has expired.\");\n    const suffix = action ? \"/\" + action : \"\";\n    const res = await fetch(\n      \"/ui/credentials/\" + encodeURIComponent(connector) + suffix,\n      {\n        method,\n        headers: {\n          Authorization: \"Bearer \" + token,\n          ...body ? { \"Content-Type\": \"application/json\" } : {}\n        },\n        ...body ? { body: JSON.stringify(body) } : {}\n      }\n    );\n    if (res.status === 204) return null;\n    let payload = {};\n    try {\n      payload = await res.json();\n    } catch {\n    }\n    if (!res.ok) throw new Error(payload.error || \"Request failed (\" + res.status + \").\");\n    return payload;\n  }\n  function credentialForm(connector) {\n    const form = document.querySelector(\n      '[data-credential-form=\"' + CSS.escape(connector) + '\"]'\n    );\n    if (!form) throw new Error(\"Credential form is unavailable.\");\n    return form;\n  }\n  $(\"credentialList\").onclick = async (event) => {\n    const button = closestElement(\n      event.target,\n      \"[data-credential-action]\"\n    );\n    if (!button) return;\n    const connector = button.dataset.connector;\n    const action = button.dataset.credentialAction;\n    if (!connector || !action) return;\n    const form = credentialForm(connector);\n    const generation = SESSION_GENERATION;\n    if (action === \"edit\") {\n      form.classList.remove(\"hidden\");\n      form.querySelector(\"input\")?.focus();\n      return;\n    }\n    if (action === \"cancel\") {\n      form.querySelectorAll(\"input\").forEach((input) => {\n        input.value = \"\";\n      });\n      form.classList.add(\"hidden\");\n      document.querySelector(\n        '[data-credential-action=\"edit\"][data-connector=\"' + CSS.escape(connector) + '\"]'\n      )?.focus();\n      return;\n    }\n    if (action === \"remove\" && !window.confirm(\n      \"Remove this credential? The connector will stop authenticating until a replacement is added.\"\n    )) return;\n    setNotice(\"\");\n    $(\"credentialList\").setAttribute(\"aria-busy\", \"true\");\n    const buttons = [...document.querySelectorAll(\n      '[data-connector=\"' + CSS.escape(connector) + '\"]'\n    )];\n    buttons.forEach((item) => {\n      item.disabled = true;\n    });\n    try {\n      if (action === \"save\") {\n        const fieldInputs = [\n          ...form.querySelectorAll(\"[data-credential-field]\")\n        ];\n        if (fieldInputs.length) {\n          const values = {};\n          for (const input of fieldInputs) {\n            const value = input.value.trim();\n            if (!value) throw new Error(\"Complete every credential field before saving.\");\n            const field = input.dataset.credentialField;\n            if (!field) throw new Error(\"Credential field is unnamed.\");\n            values[field] = value;\n          }\n          await credentialRequest(connector, \"PUT\", \"\", { values }, generation);\n        } else {\n          const input = form.querySelector(\n            \"[data-credential-input]\"\n          );\n          if (!input) throw new Error(\"Credential input is unavailable.\");\n          const value = input.value.trim();\n          if (!value) throw new Error(\"Paste a credential before saving.\");\n          await credentialRequest(connector, \"PUT\", \"\", { value }, generation);\n        }\n        if (generation !== SESSION_GENERATION) return;\n        form.querySelectorAll(\"input\").forEach((input) => {\n          input.value = \"\";\n        });\n        setNotice(\"Credential saved.\");\n        await load();\n        if (generation !== SESSION_GENERATION) return;\n        $(\"credentialNotice\").focus();\n      } else if (action === \"remove\") {\n        await credentialRequest(connector, \"DELETE\", \"\", null, generation);\n        if (generation !== SESSION_GENERATION) return;\n        setNotice(\"Credential removed.\");\n        await load();\n        if (generation !== SESSION_GENERATION) return;\n        $(\"credentialNotice\").focus();\n      } else if (action === \"test\") {\n        const result = await credentialRequest(\n          connector,\n          \"POST\",\n          \"test\",\n          null,\n          generation\n        );\n        if (generation !== SESSION_GENERATION) return;\n        setNotice(\n          result?.message || (result?.ok ? \"Credential is valid.\" : \"Credential test failed.\"),\n          !result?.ok\n        );\n      }\n    } catch (error) {\n      if (generation !== SESSION_GENERATION) return;\n      setNotice(errorMessage(error, \"Credential action failed.\"), true);\n    } finally {\n      if (generation === SESSION_GENERATION) {\n        $(\"credentialList\").setAttribute(\"aria-busy\", \"false\");\n        buttons.forEach((item) => {\n          item.disabled = false;\n        });\n      }\n    }\n  };\n  $(\"save\").onclick = async () => {\n    const v = $(\"token\").value.trim();\n    if (!v) return;\n    clearIdentityState();\n    localStorage.setItem(KEY, v);\n    $(\"token\").value = \"\";\n    await load();\n    if (DATA) $(CURRENT_PAGE + \"Heading\").focus();\n  };\n  $(\"change\").onclick = () => {\n    localStorage.removeItem(KEY);\n    showGate(\"\");\n    $(\"token\").focus();\n  };\n  $(\"copyMcpUrl\").onclick = async () => {\n    const button = $(\"copyMcpUrl\");\n    try {\n      await navigator.clipboard.writeText(MCP_URL);\n      button.textContent = \"Copied\";\n    } catch {\n      button.textContent = \"Copy failed\";\n    }\n    window.setTimeout(() => {\n      button.textContent = \"Copy URL\";\n    }, 1600);\n  };\n  $(\"toolkitList\").onclick = async (event) => {\n    const button = closestElement(\n      event.target,\n      \"[data-toolkit-copy]\"\n    );\n    if (!button) return;\n    const toolkit = button.dataset.toolkitCopy;\n    if (!toolkit) return;\n    try {\n      await navigator.clipboard.writeText(\n        toolkitMcpUrl(toolkit)\n      );\n      button.textContent = \"Copied\";\n    } catch {\n      button.textContent = \"Copy failed\";\n    }\n    window.setTimeout(() => {\n      button.textContent = \"Copy URL\";\n    }, 1600);\n  };\n  $(\"signin\").onclick = () => Clerk.redirectToSignIn({\n    signInFallbackRedirectUrl: window.location.href,\n    signUpFallbackRedirectUrl: window.location.href\n  });\n  function signOut() {\n    clearIdentityState();\n    return Clerk.signOut({ redirectUrl: window.location.href });\n  }\n  $(\"gateSignout\").onclick = signOut;\n  $(\"signout\").onclick = signOut;\n  $(\"filter\").oninput = () => {\n    if (DATA) renderConnections();\n  };\n  $(\"refreshActivity\").onclick = () => loadActivity(true);\n  $(\"moreActivity\").onclick = () => loadActivity(false);\n  $(\"activitySearch\").oninput = () => renderActivity();\n  document.addEventListener(\"click\", (event) => {\n    const link = closestElement(\n      event.target,\n      \"a[data-operator-page]\"\n    );\n    if (!link || event.defaultPrevented || event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;\n    const target = new URL(link.href, window.location.href);\n    if (target.origin !== window.location.origin) return;\n    const page = link.dataset.operatorPage;\n    if (page !== \"connections\" && page !== \"credentials\" && page !== \"activity\") return;\n    event.preventDefault();\n    navigateTo(page, target.pathname + target.search + target.hash);\n  });\n  window.addEventListener(\"popstate\", () => {\n    activatePage(pageForPath(window.location.pathname), { focus: true });\n  });\n  async function init() {\n    if (AUTH.kind === \"clerk\") {\n      $(\"clerkGate\").classList.remove(\"hidden\");\n      $(\"signout\").classList.remove(\"hidden\");\n      try {\n        if (!window.Clerk) {\n          return showGate(\"Clerk could not load. Check your network and try again.\");\n        }\n        await Clerk.load({\n          ...AUTH.signInUrl ? { signInUrl: AUTH.signInUrl } : {},\n          ...AUTH.signUpUrl ? { signUpUrl: AUTH.signUpUrl } : {},\n          signInFallbackRedirectUrl: window.location.href,\n          signUpFallbackRedirectUrl: window.location.href,\n          afterSignOutUrl: window.location.href\n        });\n        CLERK_SESSION_ID = Clerk.session?.id ?? null;\n        Clerk.addListener((resources) => {\n          const nextSessionId = resources.session?.id ?? null;\n          if (nextSessionId === CLERK_SESSION_ID) return;\n          CLERK_SESSION_ID = nextSessionId;\n          showGate(\"\");\n          void load();\n        });\n      } catch (error) {\n        return showGate(\n          \"Clerk could not initialize: \" + errorMessage(error, \"unknown error\")\n        );\n      }\n    } else {\n      $(\"tokenGate\").classList.remove(\"hidden\");\n      $(\"change\").classList.remove(\"hidden\");\n    }\n    activatePage(pageForPath(window.location.pathname));\n    await load();\n  }\n  if (AUTH.kind === \"clerk\") {\n    window.addEventListener(\"load\", init);\n  } else {\n    init();\n  }\n})();\n";
+export const OPERATOR_UI_CSS = "/* src/operator-ui/browser.css */\n:root {\n  color-scheme: light;\n  --ink: #000;\n  --paper: #fff;\n  --rule: #ccc;\n  --muted: #666;\n  --trace: #f5f5f5;\n  --shell: 70rem;\n  --pad: 1rem;\n  --gap: 1.5rem;\n  --sans:\n    \"Helvetica Neue\",\n    Helvetica,\n    Arial,\n    sans-serif;\n  --mono:\n    ui-monospace,\n    \"SF Mono\",\n    Menlo,\n    Monaco,\n    \"Cascadia Code\",\n    Consolas,\n    monospace;\n}\n* {\n  border-radius: 0;\n  box-sizing: border-box;\n}\nhtml {\n  background: var(--paper);\n  color: var(--ink);\n  font-family: var(--sans);\n  font-size: 16px;\n  line-height: 1.5;\n  -webkit-font-smoothing: antialiased;\n  text-rendering: optimizeLegibility;\n}\nbody {\n  margin: 0;\n  min-height: 100vh;\n}\n::selection {\n  background: var(--ink);\n  color: var(--paper);\n}\n:is(h1, h2, h3, p, ul, ol) {\n  margin: 0;\n  padding: 0;\n}\n:is(h1, h2, h3) {\n  font-size: inherit;\n  font-weight: 400;\n}\n:is(ul, ol) {\n  list-style: none;\n}\na {\n  color: inherit;\n}\nbutton,\ninput {\n  font: inherit;\n}\nbutton {\n  background: none;\n  border: 0;\n  color: inherit;\n  cursor: pointer;\n  margin: 0;\n  padding: 0;\n  text-align: left;\n}\nbutton:disabled {\n  cursor: wait;\n  opacity: .5;\n}\ninput {\n  background: var(--paper);\n  border: 1px solid var(--rule);\n  color: var(--ink);\n  min-height: 2rem;\n  padding: .2rem .5rem;\n}\ninput:focus-visible {\n  outline-offset: -1px;\n}\n:is(a, button, input, summary):focus-visible {\n  outline: 1px solid var(--ink);\n}\n:is(a, button, summary):focus-visible {\n  outline-offset: 2px;\n}\n.skip-link {\n  background: var(--paper);\n  left: var(--pad);\n  padding: .5rem;\n  position: fixed;\n  top: -4rem;\n  z-index: 10;\n}\n.skip-link:focus {\n  top: var(--pad);\n}\n.shell {\n  margin: 0 auto;\n  max-width: var(--shell);\n  padding-left: var(--pad);\n  padding-right: var(--pad);\n}\n.pgrid {\n  column-gap: var(--gap);\n  display: grid;\n  grid-template-columns: repeat(3, minmax(0, 1fr));\n  row-gap: 1rem;\n}\n.pcap {\n  grid-column: 1;\n}\n.pbody {\n  grid-column: 2 / -1;\n  min-width: 0;\n}\n.cap,\n.meta {\n  color: var(--muted);\n  font-size: .9em;\n}\n.mono {\n  font-family: var(--mono);\n  font-size: .78rem;\n}\n.hidden {\n  display: none !important;\n}\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n.masthead {\n  align-items: start;\n  padding-bottom: var(--pad);\n  padding-top: var(--pad);\n}\n.brand {\n  font-weight: 500;\n  grid-column: 1;\n  text-decoration: none;\n}\n.mast-nav {\n  display: flex;\n  gap: var(--gap);\n  grid-column: 2 / -1;\n  justify-content: space-between;\n  min-width: 0;\n}\n.mast-actions {\n  display: flex;\n  gap: var(--gap);\n  justify-content: flex-end;\n  min-width: 0;\n}\n.page-nav,\n.session-actions {\n  display: flex;\n  flex-wrap: wrap;\n  gap: .5rem var(--gap);\n}\n.mast-actions :is(a, button) {\n  align-items: center;\n  display: inline-flex;\n  min-height: 2rem;\n}\n.navlink,\n.linklike {\n  text-decoration: underline;\n  text-decoration-thickness: 1.5px;\n  text-underline-offset: .22em;\n}\n.navlink {\n  text-decoration-color: transparent;\n}\n.navlink:hover,\n.navlink:focus-visible,\n.navlink[aria-current=page] {\n  text-decoration-color: currentColor;\n}\n.linklike {\n  text-decoration-color: currentColor;\n}\n.linklike:hover,\n.linklike:focus-visible {\n  text-decoration-color: transparent;\n}\n.page {\n  padding-bottom: 5rem;\n}\n.lead {\n  margin-top: 6rem;\n}\n.section,\n.section + .section {\n  margin-top: 3rem;\n}\n.lead-copy,\n.body-copy {\n  max-width: 34em;\n}\n.lead-copy > * + *,\n.body-copy > * + * {\n  margin-top: 1.5rem;\n}\n.row,\n.actions {\n  align-items: center;\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--gap);\n}\n.row input {\n  flex: 1;\n  min-width: 12rem;\n}\n.gate-actions {\n  margin-top: 1.5rem;\n}\n#err {\n  margin-top: 1.5rem;\n  text-decoration: underline;\n}\n.endpoint {\n  border-bottom: 1px solid var(--rule);\n  border-top: 1px solid var(--rule);\n}\n.endpoint-row {\n  align-items: baseline;\n  display: flex;\n  gap: var(--gap);\n  min-width: 0;\n  padding: .75rem 0;\n}\n.endpoint-row code {\n  flex: 1;\n  min-width: 0;\n  overflow-x: auto;\n  white-space: nowrap;\n}\n.endpoint-row button {\n  flex: none;\n}\n.connector-tools {\n  border-bottom: 1px solid var(--rule);\n}\n.toolbar {\n  margin-bottom: 1.5rem;\n}\n.toolbar input {\n  flex-basis: 18rem;\n}\n#notice {\n  margin-bottom: .75rem;\n}\n#notice:empty {\n  display: none;\n}\n#notice:not(:empty) {\n  text-decoration: underline;\n}\n#oauthNotice {\n  margin-bottom: .75rem;\n}\n#oauthNotice:empty {\n  display: none;\n}\n.error-notice,\n.msg {\n  text-decoration: underline;\n}\n.card,\n.credential-card,\n.activity-item {\n  padding-left: 1.25rem;\n  position: relative;\n}\n.card::before,\n.credential-card::before,\n.activity-item::before {\n  background: var(--rule);\n  bottom: 0;\n  content: \"\";\n  left: .25rem;\n  position: absolute;\n  top: 0;\n  width: 1px;\n}\n.card {\n  border-top: 1px solid var(--rule);\n  padding-bottom: .75rem;\n  padding-top: .75rem;\n}\n.connector-head {\n  display: grid;\n  gap: var(--gap);\n  grid-template-columns: minmax(0, 2fr) minmax(10rem, 1fr);\n}\n.connector-title {\n  align-items: baseline;\n  display: flex;\n  gap: .5rem;\n}\n.connector-title .dot,\n.activity-stamp .dot {\n  margin-left: -1.25rem;\n}\n.activity-stamp {\n  align-items: baseline;\n  display: flex;\n  gap: .75rem;\n}\n.card h2 {\n  overflow-wrap: anywhere;\n}\n.connector-state {\n  text-align: right;\n}\n.dot {\n  background: var(--paper);\n  border: 1px solid var(--ink);\n  display: inline-block;\n  flex: none;\n  height: .5rem;\n  width: .5rem;\n  z-index: 1;\n}\n.dot.ok {\n  background: var(--ink);\n}\n.dot.auth_required {\n  background:\n    linear-gradient(\n      90deg,\n      var(--ink) 50%,\n      var(--paper) 50%);\n}\n.connector-description {\n  margin-top: .25rem;\n  max-width: 40rem;\n}\n.connector-message,\n.connector-auth {\n  margin-top: .75rem;\n}\n.credential-ledger {\n  border-bottom: 1px solid var(--rule);\n}\n.credential-card {\n  border-top: 1px solid var(--rule);\n  padding-bottom: .75rem;\n  padding-top: .75rem;\n}\n.credential-head {\n  align-items: baseline;\n  display: flex;\n  flex-wrap: wrap;\n  gap: .25rem var(--gap);\n  justify-content: space-between;\n}\n.credential-copy {\n  margin-top: .25rem;\n  max-width: 40rem;\n}\n.credential-field-summary {\n  border-top: 1px solid var(--rule);\n  margin-top: .75rem;\n}\n.credential-field-summary > div {\n  border-bottom: 1px solid var(--rule);\n  display: flex;\n  flex-wrap: wrap;\n  gap: .25rem var(--gap);\n  justify-content: space-between;\n  padding: .5rem 0;\n}\n.credential-actions {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--gap);\n  margin-top: .75rem;\n}\n.credential-actions button,\n.credential-form button,\n.activity-controls button,\n.activity-more {\n  align-items: center;\n  display: inline-flex;\n  min-height: 2.75rem;\n}\n.credential-form {\n  align-items: center;\n  display: flex;\n  flex-wrap: wrap;\n  gap: .75rem var(--gap);\n  margin-top: .75rem;\n}\n.credential-form > input {\n  flex: 1 1 18rem;\n}\n.credential-fields {\n  display: grid;\n  flex: 1 1 100%;\n  gap: .75rem;\n}\n.credential-field {\n  align-items: center;\n  display: grid;\n  gap: var(--gap);\n  grid-template-columns: minmax(9rem, 12rem) 1fr;\n}\n.credential-field input {\n  min-width: 0;\n  width: 100%;\n}\n.danger {\n  text-decoration-style: double;\n}\ndetails {\n  margin-top: .75rem;\n}\nsummary {\n  cursor: pointer;\n  list-style: none;\n  width: max-content;\n}\nsummary::-webkit-details-marker {\n  display: none;\n}\n.tool-list {\n  border-bottom: 1px solid var(--rule);\n  margin-top: .5rem;\n}\n.tool {\n  border-top: 1px solid var(--rule);\n  display: grid;\n  gap: .25rem var(--gap);\n  grid-template-columns: minmax(12rem, 1fr) minmax(0, 2fr);\n  padding: .5rem 0;\n}\n.tool code {\n  font-family: var(--mono);\n  font-size: .78rem;\n  overflow-wrap: anywhere;\n}\n.tool .td {\n  color: var(--muted);\n  font-size: .9em;\n}\n.empty {\n  border-top: 1px solid var(--rule);\n  padding: .75rem 0;\n}\n.activity-copy {\n  margin-bottom: 1.5rem;\n}\n.activity-controls {\n  margin-bottom: 1.5rem;\n}\n.activity-controls input {\n  flex: 1 1 18rem;\n}\n#activityNotice {\n  margin-bottom: .75rem;\n}\n.activity-ledger {\n  border-bottom: 1px solid var(--rule);\n}\n.activity-item {\n  border-top: 1px solid var(--rule);\n  display: grid;\n  gap: .25rem var(--gap);\n  grid-template-columns: minmax(9rem, .85fr) minmax(12rem, 1.4fr) minmax(8rem, .9fr);\n  padding-bottom: .75rem;\n  padding-top: .75rem;\n}\n.activity-time,\n.activity-actor,\n.activity-detail {\n  color: var(--muted);\n  font-size: .82rem;\n}\n.activity-actor-id {\n  color: var(--muted);\n  margin-top: .1rem;\n}\n.activity-address {\n  font-family: var(--mono);\n  font-size: .78rem;\n  overflow-wrap: anywhere;\n}\n.activity-outcome {\n  font-size: .9em;\n}\n.activity-item.error .activity-outcome,\n.activity-item.timeout .activity-outcome,\n.activity-item.cancelled .activity-outcome {\n  text-decoration: underline;\n}\n.activity-empty {\n  border-top: 1px solid var(--rule);\n  padding: .75rem 0;\n}\n.activity-more {\n  margin-top: .75rem;\n}\n.unavailable {\n  background: var(--trace);\n  border-bottom: 1px solid var(--rule);\n  border-top: 1px solid var(--rule);\n  padding: .75rem;\n}\n@media (prefers-reduced-motion: reduce) {\n  html:focus-within {\n    scroll-behavior: auto;\n  }\n}\n@media (max-width: 36.99rem) {\n  .pgrid {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n  .pcap,\n  .pbody {\n    grid-column: 1 / -1;\n  }\n  .masthead .brand {\n    grid-column: 1;\n  }\n  .mast-nav {\n    grid-column: 1 / -1;\n    grid-row: 2;\n    justify-content: flex-start;\n  }\n  .product {\n    display: none;\n  }\n  .mast-actions {\n    align-items: flex-start;\n    flex-direction: column;\n    font-size: .875rem;\n    gap: .25rem;\n  }\n  .lead {\n    margin-top: 4rem;\n  }\n  .section,\n  .section + .section {\n    margin-top: 2.5rem;\n  }\n  .connector-head,\n  .tool,\n  .activity-item {\n    grid-template-columns: 1fr;\n  }\n  .connector-state {\n    text-align: left;\n  }\n  .credential-field {\n    align-items: start;\n    grid-template-columns: 1fr;\n    gap: .25rem;\n  }\n  input {\n    min-height: 2.75rem;\n  }\n}\n";
+export const OPERATOR_UI_SCRIPT = "\"use strict\";\n(() => {\n  // src/operator-ui/model.ts\n  function filterUiConnectors(connectors, query) {\n    const q = query.trim().toLowerCase();\n    const filtered = [];\n    for (const connector of connectors) {\n      const connectorText = [\n        connector.id,\n        connector.title,\n        connector.description,\n        connector.status\n      ].join(\" \").toLowerCase();\n      const connectorMatches = Boolean(q && connectorText.includes(q));\n      const tools = connector.tools.filter(\n        (tool) => !q || connectorMatches || `${tool.name} ${tool.description ?? \"\"}`.toLowerCase().includes(q)\n      );\n      if (q && tools.length === 0 && !connectorMatches) continue;\n      filtered.push({ connector, tools });\n    }\n    return filtered;\n  }\n\n  // src/operator-ui/browser.ts\n  var KEY = \"connecta:token\";\n  var $ = (id) => {\n    const element = document.getElementById(id);\n    if (!element) throw new Error(`Missing operator UI element #${id}`);\n    return element;\n  };\n  var PAGE_META = {\n    connections: { path: \"/\", label: \"Connections\" },\n    credentials: { path: \"/credentials\", label: \"Credentials\" },\n    activity: { path: \"/activity\", label: \"Activity\" }\n  };\n  var DATA = null;\n  var ACTIVITY = [];\n  var ACTIVITY_CURSOR = null;\n  var ACTIVITY_LOADED = false;\n  var CURRENT_PAGE = INITIAL_PAGE;\n  var SESSION_GENERATION = 0;\n  var ACTIVITY_GENERATION = 0;\n  var CLERK_SESSION_ID = null;\n  $(\"mcpUrl\").textContent = MCP_URL;\n  function errorMessage(error, fallback) {\n    return error instanceof Error && error.message ? error.message : fallback;\n  }\n  function closestElement(target, selector) {\n    const candidate = target;\n    return typeof candidate?.closest === \"function\" ? candidate.closest(selector) : null;\n  }\n  function esc(s) {\n    return String(s == null ? \"\" : s).replace(/[&<>\"]/g, (c) => ({ \"&\": \"&amp;\", \"<\": \"&lt;\", \">\": \"&gt;\", '\"': \"&quot;\" })[c] ?? c);\n  }\n  function safeHttp(u) {\n    try {\n      const p = new URL(u).protocol;\n      return p === \"http:\" || p === \"https:\" ? u : null;\n    } catch {\n      return null;\n    }\n  }\n  function formatDate(value) {\n    if (!value) return \"\";\n    const date = new Date(value);\n    return Number.isNaN(date.valueOf()) ? \"\" : date.toLocaleString();\n  }\n  function setNotice(message, isError = false) {\n    $(\"credentialNotice\").textContent = message || \"\";\n    $(\"credentialNotice\").classList.toggle(\"error-notice\", Boolean(isError));\n    $(\"credentialNotice\").setAttribute(\"role\", isError ? \"alert\" : \"status\");\n  }\n  function setOauthNotice(message, isError = false) {\n    $(\"oauthNotice\").textContent = message || \"\";\n    $(\"oauthNotice\").classList.toggle(\"error-notice\", Boolean(isError));\n    $(\"oauthNotice\").setAttribute(\"role\", isError ? \"alert\" : \"status\");\n  }\n  async function sessionToken() {\n    return AUTH.kind === \"clerk\" ? await Clerk.session?.getToken() : localStorage.getItem(KEY);\n  }\n  function clearActivityState() {\n    ACTIVITY_GENERATION += 1;\n    ACTIVITY = [];\n    ACTIVITY_CURSOR = null;\n    ACTIVITY_LOADED = false;\n    $(\"activityList\").innerHTML = \"\";\n    $(\"activityList\").setAttribute(\"aria-busy\", \"false\");\n    $(\"activityNotice\").textContent = \"\";\n    $(\"activityNotice\").setAttribute(\"role\", \"status\");\n    $(\"activitySummary\").textContent = \"Arguments and results are never stored.\";\n    $(\"activitySearch\").value = \"\";\n    $(\"refreshActivity\").disabled = false;\n    $(\"moreActivity\").disabled = false;\n    $(\"moreActivity\").classList.add(\"hidden\");\n  }\n  function clearIdentityState() {\n    SESSION_GENERATION += 1;\n    DATA = null;\n    clearActivityState();\n    $(\"list\").innerHTML = \"\";\n    setOauthNotice(\"\");\n    $(\"filter\").value = \"\";\n    $(\"credentialList\").innerHTML = \"\";\n    $(\"credentialList\").setAttribute(\"aria-busy\", \"false\");\n    $(\"credentialNotice\").textContent = \"\";\n    $(\"credentialNotice\").setAttribute(\"role\", \"status\");\n    $(\"credentialNotice\").classList.remove(\"error-notice\");\n    $(\"credentialUnavailable\").textContent = \"\";\n    $(\"credentialUnavailable\").classList.add(\"hidden\");\n    $(\"credentialList\").classList.add(\"hidden\");\n    $(\"activityUnavailable\").classList.add(\"hidden\");\n    $(\"activityAvailable\").classList.add(\"hidden\");\n    $(\"credentialsNav\").classList.add(\"hidden\");\n    $(\"activityNav\").classList.add(\"hidden\");\n    $(\"serverInfo\").textContent = PRODUCT_OPERATOR_LABEL;\n  }\n  function showGate(msg) {\n    clearIdentityState();\n    $(\"app\").classList.add(\"hidden\");\n    $(\"appNav\").classList.add(\"hidden\");\n    $(\"gate\").classList.remove(\"hidden\");\n    $(\"err\").textContent = msg || \"\";\n    if (AUTH.kind === \"clerk\") {\n      const signedIn = Boolean(window.Clerk && Clerk.user);\n      $(\"gateCopy\").textContent = signedIn ? \"Signed in with Clerk, but this account cannot open deployment-wide operator pages.\" : \"Sign in with Clerk to open this operator page.\";\n      $(\"signin\").classList.toggle(\"hidden\", signedIn);\n      $(\"gateSignout\").classList.toggle(\"hidden\", !signedIn);\n    } else {\n      $(\"gateCopy\").textContent = \"\";\n    }\n  }\n  function pageForPath(path) {\n    if (path === \"/credentials\") return \"credentials\";\n    if (path === \"/activity\") return \"activity\";\n    return \"connections\";\n  }\n  function credentialUnavailableCopy(capability) {\n    if (capability === \"no_slots\") {\n      return \"No connectors declare operator-managed credential slots. Connector credentials remain configuration-as-code until a slot is declared.\";\n    }\n    if (capability === \"vault_not_configured\") {\n      return \"Credential storage is not configured. Set credentials.encryptionKey before managing connector credentials here.\";\n    }\n    return \"Credential management requires an eligible Clerk operator. Bearer-authenticated sessions can inspect connections but cannot manage stored credentials.\";\n  }\n  function updateCapabilities() {\n    const credentialsAvailable = DATA?.credentialManagement === \"available\";\n    $(\"credentialsNav\").classList.toggle(\"hidden\", !credentialsAvailable);\n    $(\"activityNav\").classList.toggle(\"hidden\", !DATA?.activityEnabled);\n    $(\"credentialUnavailable\").classList.toggle(\"hidden\", credentialsAvailable);\n    $(\"credentialList\").classList.toggle(\"hidden\", !credentialsAvailable);\n    $(\"credentialUnavailable\").textContent = credentialsAvailable ? \"\" : credentialUnavailableCopy(DATA?.credentialManagement);\n    $(\"activityUnavailable\").classList.toggle(\"hidden\", Boolean(DATA?.activityEnabled));\n    $(\"activityAvailable\").classList.toggle(\"hidden\", !DATA?.activityEnabled);\n  }\n  function activatePage(page, options) {\n    const next = PAGE_META[page] ? page : \"connections\";\n    CURRENT_PAGE = next;\n    for (const name of Object.keys(PAGE_META)) {\n      $(name + \"View\").classList.toggle(\"hidden\", name !== next);\n      const link = $(name + \"Nav\");\n      if (name === next) link.setAttribute(\"aria-current\", \"page\");\n      else link.removeAttribute(\"aria-current\");\n    }\n    $(\"gateHeading\").textContent = PAGE_META[next].label;\n    document.title = PAGE_META[next].label + \" — \" + TITLE_SUFFIX;\n    if (DATA) {\n      updateCapabilities();\n      if (next === \"connections\") renderConnections();\n      if (next === \"credentials\") renderCredentials();\n      if (next === \"activity\" && DATA.activityEnabled && !ACTIVITY_LOADED) {\n        loadActivity(true);\n      }\n    }\n    if (next !== \"credentials\") {\n      $(\"credentialList\").innerHTML = \"\";\n      setNotice(\"\");\n    }\n    if (options?.focus) $(DATA ? next + \"Heading\" : \"gateHeading\").focus();\n  }\n  function navigateTo(page, href) {\n    history.pushState({ operatorPage: page }, \"\", href);\n    activatePage(page, { focus: true });\n  }\n  async function load() {\n    const generation = SESSION_GENERATION;\n    let token;\n    try {\n      token = await sessionToken();\n    } catch (error) {\n      if (generation !== SESSION_GENERATION) return;\n      return showGate(\n        \"Could not read the Clerk session: \" + errorMessage(error, \"unknown error\")\n      );\n    }\n    if (generation !== SESSION_GENERATION) return;\n    if (!token) return showGate(\"\");\n    let res;\n    try {\n      res = await fetch(\"/ui/data\", { headers: { Authorization: \"Bearer \" + token } });\n    } catch (error) {\n      if (generation !== SESSION_GENERATION) return;\n      return showGate(\"Network error: \" + errorMessage(error, \"unknown error\"));\n    }\n    if (generation !== SESSION_GENERATION) return;\n    if (res.status === 401 || res.status === 403) {\n      if (AUTH.kind === \"clerk\") {\n        return showGate(\n          res.status === 403 ? \"This Clerk account is not allowed to access connecta.\" : \"Your Clerk session was not accepted. Sign out and try again.\"\n        );\n      }\n      localStorage.removeItem(KEY);\n      return showGate(\"Token rejected — enter a valid bearer token.\");\n    }\n    if (!res.ok) return showGate(\"Error \" + res.status);\n    let data;\n    try {\n      data = await res.json();\n    } catch {\n      if (generation !== SESSION_GENERATION) return;\n      return showGate(\"Operator data could not be read.\");\n    }\n    if (generation !== SESSION_GENERATION) return;\n    DATA = data;\n    $(\"gate\").classList.add(\"hidden\");\n    $(\"app\").classList.remove(\"hidden\");\n    $(\"appNav\").classList.remove(\"hidden\");\n    const si = data.serverInfo || {};\n    $(\"serverInfo\").textContent = (si.name || PRODUCT_NAME) + \" v\" + (data.connectaVersion || \"?\");\n    updateCapabilities();\n    activatePage(CURRENT_PAGE);\n  }\n  function actorLabel(actor) {\n    if (!actor || !actor.kind) return \"unknown\";\n    return actor.label ? actor.kind + \" · \" + actor.label : actor.id ? actor.kind + \" · \" + actor.id : actor.kind;\n  }\n  function renderActivity() {\n    const list = $(\"activityList\");\n    list.innerHTML = \"\";\n    const query = $(\"activitySearch\").value.trim().toLowerCase();\n    const visible = ACTIVITY.filter((event) => {\n      if (!query) return true;\n      const actor = event.actor || {};\n      return [\n        event.address,\n        event.connectorId,\n        event.toolName,\n        event.source,\n        event.outcome,\n        event.errorCode,\n        actor.kind,\n        actor.id,\n        actor.namespace,\n        actor.label\n      ].some((value) => String(value || \"\").toLowerCase().includes(query));\n    });\n    const uniqueTools = new Set(ACTIVITY.map((event) => event.address)).size;\n    $(\"activitySummary\").textContent = ACTIVITY.length ? ACTIVITY.length + \" loaded call\" + (ACTIVITY.length === 1 ? \"\" : \"s\") + \" · \" + uniqueTools + \" tool\" + (uniqueTools === 1 ? \"\" : \"s\") + \" · no arguments or results stored\" : \"Arguments and results are never stored.\";\n    if (visible.length === 0) {\n      list.innerHTML = '<div class=\"activity-empty\">' + (query ? \"No loaded activity matches this search.\" : \"No connector tool calls recorded yet.\") + \"</div>\";\n    }\n    for (const event of visible) {\n      const item = document.createElement(\"article\");\n      const outcomeClass = [\n        \"success\",\n        \"error\",\n        \"timeout\",\n        \"cancelled\"\n      ].includes(event.outcome) ? event.outcome : \"error\";\n      item.className = \"activity-item \" + outcomeClass;\n      const retryCopy = event.attempts > 1 ? \" · \" + esc(event.attempts) + \" attempts\" : \"\";\n      const errorCopy = event.errorCode ? \" · \" + esc(event.errorCode) : \"\";\n      const actorId = event.actor?.id ? event.actor.namespace ? event.actor.namespace + \" · \" + event.actor.id : event.actor.id : \"\";\n      const stableActorId = actorId && (event.actor?.label || event.actor?.namespace) ? '<div class=\"activity-actor-id mono\">' + esc(actorId) + \"</div>\" : \"\";\n      item.innerHTML = '<div class=\"activity-stamp\"><span class=\"dot ' + (outcomeClass === \"success\" ? \"ok\" : \"\") + '\" aria-hidden=\"true\"></span><div><time class=\"activity-time\" datetime=\"' + esc(event.occurredAt) + '\">' + esc(formatDate(event.occurredAt)) + '</time><div class=\"activity-actor\">' + esc(actorLabel(event.actor)) + \"</div>\" + stableActorId + '</div></div><div><div class=\"activity-address\">' + esc(event.address) + '</div><div class=\"activity-detail\">' + esc(event.source) + retryCopy + errorCopy + '</div></div><div><div class=\"activity-outcome\">' + esc(event.outcome) + '</div><div class=\"activity-detail\">' + esc(event.durationMs) + \" ms</div></div>\";\n      list.appendChild(item);\n    }\n    $(\"moreActivity\").classList.toggle(\"hidden\", !ACTIVITY_CURSOR);\n  }\n  async function loadActivity(reset) {\n    if (!DATA?.activityEnabled) return;\n    const sessionGeneration = SESSION_GENERATION;\n    if (reset) ACTIVITY_GENERATION += 1;\n    const activityGeneration = ACTIVITY_GENERATION;\n    const isCurrent = () => sessionGeneration === SESSION_GENERATION && activityGeneration === ACTIVITY_GENERATION;\n    $(\"activityNotice\").textContent = \"Loading activity…\";\n    $(\"activityNotice\").setAttribute(\"role\", \"status\");\n    $(\"activityList\").setAttribute(\"aria-busy\", \"true\");\n    $(\"refreshActivity\").disabled = true;\n    $(\"moreActivity\").disabled = true;\n    try {\n      const token = await sessionToken();\n      if (!isCurrent()) return;\n      if (!token) return showGate(\"Your session has expired.\");\n      const cursor = reset ? null : ACTIVITY_CURSOR;\n      const params = new URLSearchParams({ limit: \"50\" });\n      if (cursor) params.set(\"cursor\", cursor);\n      const res = await fetch(\"/ui/activity?\" + params, {\n        headers: { Authorization: \"Bearer \" + token }\n      });\n      if (!isCurrent()) return;\n      let payload = {};\n      try {\n        payload = await res.json();\n      } catch {\n      }\n      if (!isCurrent()) return;\n      if (res.status === 401) {\n        return showGate(\"Your session was not accepted. Sign in again.\");\n      }\n      if (res.status === 403) {\n        clearActivityState();\n        $(\"activityNotice\").setAttribute(\"role\", \"alert\");\n        $(\"activityNotice\").textContent = \"This identity may not read activity history.\";\n        return;\n      }\n      if (!res.ok) {\n        throw new Error(\n          payload.error || \"Activity could not be loaded (\" + res.status + \").\"\n        );\n      }\n      ACTIVITY = reset ? payload.events || [] : ACTIVITY.concat(payload.events || []);\n      ACTIVITY_CURSOR = payload.nextCursor || null;\n      ACTIVITY_LOADED = true;\n      $(\"activityNotice\").textContent = \"\";\n      renderActivity();\n    } catch (error) {\n      if (!isCurrent()) return;\n      $(\"activityNotice\").setAttribute(\"role\", \"alert\");\n      $(\"activityNotice\").textContent = errorMessage(\n        error,\n        \"Activity could not be loaded.\"\n      );\n    } finally {\n      if (isCurrent()) {\n        $(\"activityList\").setAttribute(\"aria-busy\", \"false\");\n        $(\"refreshActivity\").disabled = false;\n        $(\"moreActivity\").disabled = false;\n      }\n    }\n  }\n  function renderConnections() {\n    const data = DATA;\n    if (!data) return;\n    const q = $(\"filter\").value.trim().toLowerCase();\n    const list = $(\"list\");\n    list.innerHTML = \"\";\n    for (const filtered of filterUiConnectors(data.connectors, q)) {\n      const c = filtered.connector;\n      const tools = filtered.tools;\n      const el = document.createElement(\"div\");\n      el.className = \"card\";\n      const status = c.status === \"ok\" ? \"Connected\" : c.status === \"auth_required\" ? \"Authorization needed\" : \"Unavailable\";\n      let head = '<div class=\"connector-head\"><div><div class=\"connector-title\"><span class=\"dot ' + esc(c.status) + '\" aria-hidden=\"true\"></span><h2>' + esc(c.title || c.id) + \"</h2></div>\";\n      if (c.description) {\n        head += '<p class=\"connector-description meta\">' + esc(c.description) + \"</p>\";\n      }\n      head += '</div><div class=\"connector-state cap\">' + esc(status) + \" · \" + c.toolCount + (c.toolCount === 1 ? \" tool\" : \" tools\") + '<br><span class=\"mono\">' + esc(c.id) + \"</span></div></div>\";\n      if (c.message) {\n        head += '<p class=\"connector-message msg\">' + esc(c.message) + \"</p>\";\n      }\n      if (c.authorizationUrl) {\n        const safe = safeHttp(c.authorizationUrl);\n        head += safe ? '<p class=\"connector-auth\"><a class=\"linklike\" href=\"' + esc(safe) + '\" target=\"_blank\" rel=\"noopener\">Authorize connector →</a></p>' : '<p class=\"connector-auth meta\">Authorization URL: ' + esc(c.authorizationUrl) + \"</p>\";\n      }\n      if (c.oauth && data.oauthManagement) {\n        const oauthName = c.title || c.id;\n        head += '<div class=\"credential-actions\">';\n        head += '<button type=\"button\" class=\"linklike danger\" aria-label=\"Disconnect OAuth for ' + esc(oauthName) + '\" data-oauth-action=\"disconnect\" data-connector=\"' + esc(c.id) + '\">Disconnect OAuth</button>';\n        head += '<button type=\"button\" class=\"linklike\" aria-label=\"' + (c.status === \"ok\" ? \"Reconnect OAuth for \" : \"Restart authorization for \") + esc(oauthName) + '\" data-oauth-action=\"reconnect\" data-connector=\"' + esc(c.id) + '\">' + (c.status === \"ok\" ? \"Reconnect OAuth\" : \"Restart authorization\") + \"</button></div>\";\n      }\n      if (c.credential) {\n        head += '<p class=\"connector-auth\"><a class=\"linklike\" href=\"/credentials\" data-operator-page=\"credentials\">Manage credential →</a></p>';\n      }\n      let body = \"\";\n      if (tools.length) {\n        body = \"<details\" + (q ? \" open\" : \"\") + '><summary class=\"linklike\">Show tools (' + tools.length + ')</summary><div class=\"tool-list\">';\n        for (const t of tools) {\n          body += '<div class=\"tool\"><code>' + esc(t.address) + \"</code>\";\n          if (t.description) body += '<span class=\"td\">' + esc(t.description) + \"</span>\";\n          body += \"</div>\";\n        }\n        body += \"</div></details>\";\n      }\n      el.innerHTML = head + body;\n      list.appendChild(el);\n    }\n    if (!list.children.length) {\n      list.innerHTML = '<p class=\"empty\">' + (q ? \"No connectors or tools match this filter.\" : \"No connectors are declared in this deployment.\") + \"</p>\";\n    }\n  }\n  async function operatorRequest(path, method, generation, body) {\n    const token = await sessionToken();\n    if (generation !== SESSION_GENERATION) {\n      throw new Error(\"The operator session changed.\");\n    }\n    if (!token) throw new Error(\"Your Clerk session has expired.\");\n    const res = await fetch(path, {\n      method,\n      headers: {\n        Authorization: \"Bearer \" + token,\n        ...body ? { \"Content-Type\": \"application/json\" } : {}\n      },\n      ...body ? { body: JSON.stringify(body) } : {}\n    });\n    if (res.status === 204) return null;\n    let payload = {};\n    try {\n      payload = await res.json();\n    } catch {\n    }\n    if (!res.ok) throw new Error(payload.error || \"Request failed (\" + res.status + \").\");\n    return payload;\n  }\n  $(\"list\").onclick = async (event) => {\n    const button = closestElement(\n      event.target,\n      \"[data-oauth-action]\"\n    );\n    if (!button) return;\n    const connector = button.dataset.connector;\n    const action = button.dataset.oauthAction;\n    if (!connector || action !== \"disconnect\" && action !== \"reconnect\") return;\n    const generation = SESSION_GENERATION;\n    const question = action === \"disconnect\" ? \"Disconnect OAuth for \" + connector + \"? Stored credentials and any pending authorization will be removed.\" : \"Restart OAuth for \" + connector + \"? Stored credentials and any pending authorization will be replaced.\";\n    if (!window.confirm(question)) return;\n    setOauthNotice(\"\");\n    const buttons = [...document.querySelectorAll(\n      '[data-connector=\"' + CSS.escape(connector) + '\"]'\n    )];\n    buttons.forEach((item) => {\n      item.disabled = true;\n    });\n    try {\n      const result = await operatorRequest(\n        \"/ui/oauth/\" + encodeURIComponent(connector),\n        action === \"disconnect\" ? \"DELETE\" : \"POST\",\n        generation\n      );\n      if (generation !== SESSION_GENERATION) return;\n      await load();\n      if (generation !== SESSION_GENERATION) return;\n      setOauthNotice(\n        action === \"disconnect\" ? \"OAuth disconnected. Restart authorization when you are ready to reconnect.\" : result?.message || \"Authorization restarted. Open the authorization link to reconnect.\"\n      );\n      $(\"oauthNotice\").focus();\n    } catch (error) {\n      if (generation !== SESSION_GENERATION) return;\n      try {\n        await load();\n      } catch {\n      }\n      if (generation !== SESSION_GENERATION) return;\n      setOauthNotice(errorMessage(error, \"OAuth action failed.\"), true);\n      $(\"oauthNotice\").focus();\n    } finally {\n      if (generation === SESSION_GENERATION) {\n        buttons.forEach((item) => {\n          item.disabled = false;\n        });\n      }\n    }\n  };\n  function renderCredentials() {\n    const data = DATA;\n    if (!data) return;\n    const list = $(\"credentialList\");\n    list.innerHTML = \"\";\n    if (data.credentialManagement !== \"available\") return;\n    for (const c of data.connectors) {\n      const cred = c.credential;\n      if (!cred) continue;\n      const configured = Boolean(cred.configured);\n      const removable = configured || Boolean(cred.removable);\n      const state = configured ? cred.fields?.length ? \"configured\" : \"configured · ••••\" + esc(cred.lastFour || \"\") : \"not configured\";\n      const updated = configured && cred.updatedAt ? \" · updated \" + esc(formatDate(cred.updatedAt)) : \"\";\n      const el = document.createElement(\"section\");\n      el.className = \"credential-card\";\n      el.id = \"credential-\" + c.id;\n      el.setAttribute(\"aria-labelledby\", \"credential-title-\" + c.id);\n      let body = '<div class=\"credential-head\"><div class=\"connector-title\"><span class=\"dot ' + (configured ? \"ok\" : \"auth_required\") + '\" aria-hidden=\"true\"></span><h2 id=\"credential-title-' + esc(c.id) + '\">' + esc(c.title || c.id) + '</h2></div><span class=\"credential-state\">' + state + updated + \"</span></div>\";\n      body += '<p class=\"mono\">' + esc(c.id) + \" · \" + esc(cred.label) + \"</p>\";\n      if (cred.description) {\n        body += '<p class=\"credential-copy meta\">' + esc(cred.description) + \"</p>\";\n      }\n      if (cred.fields?.length) {\n        body += '<div class=\"credential-field-summary\">';\n        for (const field of cred.fields) {\n          const fieldState = field.configured ? \"configured · ••••\" + esc(field.lastFour || \"\") + (field.updatedAt ? \" · updated \" + esc(formatDate(field.updatedAt)) : \"\") : \"not configured\";\n          body += \"<div><span>\" + esc(field.label) + '</span><span class=\"meta\">' + fieldState + \"</span></div>\";\n        }\n        body += \"</div>\";\n      }\n      if (cred.error) body += '<div class=\"msg\">' + esc(cred.error) + \"</div>\";\n      if (cred.notice) {\n        body += '<p class=\"credential-copy meta\">' + esc(cred.notice) + \"</p>\";\n      }\n      body += '<div class=\"credential-actions\">';\n      body += '<button class=\"linklike\" type=\"button\" data-credential-action=\"edit\" data-connector=\"' + esc(c.id) + '\">' + (removable ? \"Replace\" : \"Add credential\") + \"</button>\";\n      if (configured && cred.testable) {\n        body += '<button class=\"linklike\" type=\"button\" data-credential-action=\"test\" data-connector=\"' + esc(c.id) + '\">Test</button>';\n      }\n      if (removable) {\n        body += '<button type=\"button\" class=\"linklike danger\" data-credential-action=\"remove\" data-connector=\"' + esc(c.id) + '\">Remove</button>';\n      }\n      body += \"</div>\";\n      body += '<div class=\"credential-form hidden\" data-credential-form=\"' + esc(c.id) + '\">';\n      if (cred.fields && cred.fields.length) {\n        body += '<div class=\"credential-fields\">';\n        for (const [index, field] of cred.fields.entries()) {\n          const inputId = \"credential-input-\" + c.id + \"-\" + index;\n          body += '<div class=\"credential-field\"><label for=\"' + esc(inputId) + '\">' + esc(field.label) + '</label><input id=\"' + esc(inputId) + '\" type=\"' + esc(field.inputType || \"password\") + '\" data-credential-field=\"' + esc(field.name) + '\" placeholder=\"' + esc(field.placeholder || field.label) + '\" autocomplete=\"' + (field.inputType === \"password\" ? \"new-password\" : \"off\") + '\" autocapitalize=\"none\" spellcheck=\"false\"></div>';\n        }\n        body += \"</div>\";\n      } else {\n        const inputId = \"credential-input-\" + c.id;\n        body += '<label class=\"visually-hidden\" for=\"' + esc(inputId) + '\">' + esc(cred.label) + '</label><input id=\"' + esc(inputId) + '\" type=\"password\" data-credential-input=\"' + esc(c.id) + '\" aria-label=\"' + esc(cred.label) + '\" placeholder=\"' + esc(cred.placeholder || \"Paste credential\") + '\" autocomplete=\"new-password\" autocapitalize=\"none\" spellcheck=\"false\">';\n      }\n      body += '<button class=\"linklike\" type=\"button\" data-credential-action=\"save\" data-connector=\"' + esc(c.id) + '\">Save</button><button class=\"linklike\" type=\"button\" data-credential-action=\"cancel\" data-connector=\"' + esc(c.id) + '\">Cancel</button></div>';\n      el.innerHTML = body;\n      list.appendChild(el);\n    }\n  }\n  async function credentialRequest(connector, method, action, body, generation) {\n    const suffix = action ? \"/\" + action : \"\";\n    return operatorRequest(\n      \"/ui/credentials/\" + encodeURIComponent(connector) + suffix,\n      method,\n      generation,\n      body ?? void 0\n    );\n  }\n  function credentialForm(connector) {\n    const form = document.querySelector(\n      '[data-credential-form=\"' + CSS.escape(connector) + '\"]'\n    );\n    if (!form) throw new Error(\"Credential form is unavailable.\");\n    return form;\n  }\n  $(\"credentialList\").onclick = async (event) => {\n    const button = closestElement(\n      event.target,\n      \"[data-credential-action]\"\n    );\n    if (!button) return;\n    const connector = button.dataset.connector;\n    const action = button.dataset.credentialAction;\n    if (!connector || !action) return;\n    const form = credentialForm(connector);\n    const generation = SESSION_GENERATION;\n    if (action === \"edit\") {\n      form.classList.remove(\"hidden\");\n      form.querySelector(\"input\")?.focus();\n      return;\n    }\n    if (action === \"cancel\") {\n      form.querySelectorAll(\"input\").forEach((input) => {\n        input.value = \"\";\n      });\n      form.classList.add(\"hidden\");\n      document.querySelector(\n        '[data-credential-action=\"edit\"][data-connector=\"' + CSS.escape(connector) + '\"]'\n      )?.focus();\n      return;\n    }\n    if (action === \"remove\" && !window.confirm(\n      \"Remove this credential? The connector will stop authenticating until a replacement is added.\"\n    )) return;\n    setNotice(\"\");\n    $(\"credentialList\").setAttribute(\"aria-busy\", \"true\");\n    const buttons = [...document.querySelectorAll(\n      '[data-connector=\"' + CSS.escape(connector) + '\"]'\n    )];\n    buttons.forEach((item) => {\n      item.disabled = true;\n    });\n    try {\n      if (action === \"save\") {\n        const fieldInputs = [\n          ...form.querySelectorAll(\"[data-credential-field]\")\n        ];\n        if (fieldInputs.length) {\n          const values = {};\n          for (const input of fieldInputs) {\n            const value = input.value.trim();\n            if (!value) throw new Error(\"Complete every credential field before saving.\");\n            const field = input.dataset.credentialField;\n            if (!field) throw new Error(\"Credential field is unnamed.\");\n            values[field] = value;\n          }\n          await credentialRequest(connector, \"PUT\", \"\", { values }, generation);\n        } else {\n          const input = form.querySelector(\n            \"[data-credential-input]\"\n          );\n          if (!input) throw new Error(\"Credential input is unavailable.\");\n          const value = input.value.trim();\n          if (!value) throw new Error(\"Paste a credential before saving.\");\n          await credentialRequest(connector, \"PUT\", \"\", { value }, generation);\n        }\n        if (generation !== SESSION_GENERATION) return;\n        form.querySelectorAll(\"input\").forEach((input) => {\n          input.value = \"\";\n        });\n        setNotice(\"Credential saved.\");\n        await load();\n        if (generation !== SESSION_GENERATION) return;\n        $(\"credentialNotice\").focus();\n      } else if (action === \"remove\") {\n        await credentialRequest(connector, \"DELETE\", \"\", null, generation);\n        if (generation !== SESSION_GENERATION) return;\n        setNotice(\"Credential removed.\");\n        await load();\n        if (generation !== SESSION_GENERATION) return;\n        $(\"credentialNotice\").focus();\n      } else if (action === \"test\") {\n        const result = await credentialRequest(\n          connector,\n          \"POST\",\n          \"test\",\n          null,\n          generation\n        );\n        if (generation !== SESSION_GENERATION) return;\n        setNotice(\n          result?.message || (result?.ok ? \"Credential is valid.\" : \"Credential test failed.\"),\n          !result?.ok\n        );\n      }\n    } catch (error) {\n      if (generation !== SESSION_GENERATION) return;\n      setNotice(errorMessage(error, \"Credential action failed.\"), true);\n    } finally {\n      if (generation === SESSION_GENERATION) {\n        $(\"credentialList\").setAttribute(\"aria-busy\", \"false\");\n        buttons.forEach((item) => {\n          item.disabled = false;\n        });\n      }\n    }\n  };\n  $(\"save\").onclick = async () => {\n    const v = $(\"token\").value.trim();\n    if (!v) return;\n    clearIdentityState();\n    localStorage.setItem(KEY, v);\n    $(\"token\").value = \"\";\n    await load();\n    if (DATA) $(CURRENT_PAGE + \"Heading\").focus();\n  };\n  $(\"change\").onclick = () => {\n    localStorage.removeItem(KEY);\n    showGate(\"\");\n    $(\"token\").focus();\n  };\n  $(\"copyMcpUrl\").onclick = async () => {\n    const button = $(\"copyMcpUrl\");\n    try {\n      await navigator.clipboard.writeText(MCP_URL);\n      button.textContent = \"Copied\";\n    } catch {\n      button.textContent = \"Copy failed\";\n    }\n    window.setTimeout(() => {\n      button.textContent = \"Copy URL\";\n    }, 1600);\n  };\n  $(\"signin\").onclick = () => Clerk.redirectToSignIn({\n    signInFallbackRedirectUrl: window.location.href,\n    signUpFallbackRedirectUrl: window.location.href\n  });\n  function signOut() {\n    clearIdentityState();\n    return Clerk.signOut({ redirectUrl: window.location.href });\n  }\n  $(\"gateSignout\").onclick = signOut;\n  $(\"signout\").onclick = signOut;\n  $(\"filter\").oninput = () => {\n    if (DATA) renderConnections();\n  };\n  $(\"refreshActivity\").onclick = () => loadActivity(true);\n  $(\"moreActivity\").onclick = () => loadActivity(false);\n  $(\"activitySearch\").oninput = () => renderActivity();\n  document.addEventListener(\"click\", (event) => {\n    const link = closestElement(\n      event.target,\n      \"a[data-operator-page]\"\n    );\n    if (!link || event.defaultPrevented || event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;\n    const target = new URL(link.href, window.location.href);\n    if (target.origin !== window.location.origin) return;\n    const page = link.dataset.operatorPage;\n    if (page !== \"connections\" && page !== \"credentials\" && page !== \"activity\") return;\n    event.preventDefault();\n    navigateTo(page, target.pathname + target.search + target.hash);\n  });\n  window.addEventListener(\"popstate\", () => {\n    activatePage(pageForPath(window.location.pathname), { focus: true });\n  });\n  async function init() {\n    if (AUTH.kind === \"clerk\") {\n      $(\"clerkGate\").classList.remove(\"hidden\");\n      $(\"signout\").classList.remove(\"hidden\");\n      try {\n        if (!window.Clerk) {\n          return showGate(\"Clerk could not load. Check your network and try again.\");\n        }\n        await Clerk.load({\n          ...AUTH.signInUrl ? { signInUrl: AUTH.signInUrl } : {},\n          ...AUTH.signUpUrl ? { signUpUrl: AUTH.signUpUrl } : {},\n          signInFallbackRedirectUrl: window.location.href,\n          signUpFallbackRedirectUrl: window.location.href,\n          afterSignOutUrl: window.location.href\n        });\n        CLERK_SESSION_ID = Clerk.session?.id ?? null;\n        Clerk.addListener((resources) => {\n          const nextSessionId = resources.session?.id ?? null;\n          if (nextSessionId === CLERK_SESSION_ID) return;\n          CLERK_SESSION_ID = nextSessionId;\n          showGate(\"\");\n          void load();\n        });\n      } catch (error) {\n        return showGate(\n          \"Clerk could not initialize: \" + errorMessage(error, \"unknown error\")\n        );\n      }\n    } else {\n      $(\"tokenGate\").classList.remove(\"hidden\");\n      $(\"change\").classList.remove(\"hidden\");\n    }\n    activatePage(pageForPath(window.location.pathname));\n    await load();\n  }\n  if (AUTH.kind === \"clerk\") {\n    window.addEventListener(\"load\", init);\n  } else {\n    init();\n  }\n})();\n";

package/src/operator-ui/model.ts

@@ -46,29 +46,9 @@ export interface UiConnector {
   tools: UiTool[];
   /** This connector exposes operator-managed downstream OAuth lifecycle hooks. */
   oauth?: boolean;
-  /**
-   * Verdict of the last proactive credential liveness check (issue #24), for the
-   * connectors that hold a credential connecta stores. Shown beside the live
-   * status so an operator can tell "checked just now" from "last verified an
-   * hour ago", and see a dead credential the page's own probe may not reach.
-   */
-  credentialCheck?: {
-    state: "ok" | "auth_required" | "error";
-    checkedAt: string;
-    message?: string;
-  };
   credential?: UiCredential;
 }
 
-export interface UiToolkit {
-  name: string;
-  connectors: string[];
-  includeTools: string[];
-  excludeTools: string[];
-  /** Tools currently loaded through healthy connectors and visible in this view. */
-  toolCount: number;
-}
-
 export type CredentialManagementCapability =
   | "available"
   | "requires_clerk"
@@ -80,11 +60,9 @@ export interface UiData {
   /** Version of the installed @zackbart/connecta package. */
   connectaVersion: string;
   connectors: UiConnector[];
-  /** Read-only projection of the validated deployment config. */
-  toolkits: UiToolkit[];
   activityEnabled: boolean;
   credentialManagement: CredentialManagementCapability;
-  /** True only for an eligible, unrestricted Clerk operator. */
+  /** True only for an eligible Clerk operator. */
   oauthManagement: boolean;
 }