@zackbart/connecta 0.15.1 → 0.16.1

package/dist/operator-ui/generated.js

@@ -1,5 +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.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}\n.token-create {\n  border-bottom: 1px solid var(--rule);\n  border-top: 1px solid var(--rule);\n  padding: .75rem 0;\n}\n.token-create > label {\n  display: block;\n  margin-bottom: .5rem;\n}\n.token-create input {\n  flex: 1 1 18rem;\n}\n.token-create button,\n.token-card button,\n.token-reveal button {\n  align-items: center;\n  display: inline-flex;\n  min-height: 2.75rem;\n}\n.token-reveal {\n  background: var(--ink);\n  color: var(--paper);\n  margin-top: 1.5rem;\n  padding: 1rem 1.25rem;\n}\n.token-reveal .meta,\n.token-reveal .cap {\n  color: #bbb;\n}\n.token-reveal-head,\n.token-card-head {\n  align-items: baseline;\n  display: flex;\n  flex-wrap: wrap;\n  gap: .25rem var(--gap);\n  justify-content: space-between;\n}\n.token-secret {\n  border-bottom: 1px solid #555;\n  border-top: 1px solid #555;\n  margin-top: .75rem;\n}\n.token-secret code {\n  color: var(--paper);\n  user-select: all;\n}\n.token-ledger {\n  border-bottom: 1px solid var(--rule);\n  margin-top: 1.5rem;\n}\n.token-card {\n  border-top: 1px solid var(--rule);\n  padding: .75rem 0 .75rem 1.25rem;\n  position: relative;\n}\n.token-card::before {\n  background: var(--ink);\n  bottom: 0;\n  content: \"\";\n  left: .25rem;\n  position: absolute;\n  top: 0;\n  width: 1px;\n}\n.token-card.revoked {\n  color: var(--muted);\n}\n.token-card.revoked::before {\n  background: var(--rule);\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    tokens: { path: \"/tokens\", label: \"Access tokens\" },\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 ACCESS_TOKENS = [];\n  var ACCESS_TOKENS_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    ACCESS_TOKENS = [];\n    ACCESS_TOKENS_LOADED = false;\n    $(\"tokenList\").innerHTML = \"\";\n    $(\"tokenList\").setAttribute(\"aria-busy\", \"false\");\n    $(\"tokenNotice\").textContent = \"\";\n    clearCreatedAccessToken();\n    $(\"tokenName\").value = \"\";\n    $(\"tokenUnavailable\").textContent = \"\";\n    $(\"tokenUnavailable\").classList.add(\"hidden\");\n    $(\"tokenAvailable\").classList.add(\"hidden\");\n    $(\"activityUnavailable\").classList.add(\"hidden\");\n    $(\"activityAvailable\").classList.add(\"hidden\");\n    $(\"credentialsNav\").classList.add(\"hidden\");\n    $(\"tokensNav\").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 === \"/tokens\") return \"tokens\";\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 accessTokenUnavailableCopy(capability) {\n    if (capability === \"not_configured\") {\n      return \"Access tokens are not configured for this deployment. Add accessTokens to the deployment configuration to enable them.\";\n    }\n    return \"Access token management requires an eligible Clerk operator. A Bearer token can connect to MCP, but it cannot create or revoke other tokens.\";\n  }\n  function setTokenNotice(message, error = false) {\n    $(\"tokenNotice\").textContent = message;\n    $(\"tokenNotice\").setAttribute(\"role\", error ? \"alert\" : \"status\");\n  }\n  function clearCreatedAccessToken() {\n    $(\"createdToken\").textContent = \"\";\n    $(\"tokenReveal\").classList.add(\"hidden\");\n    $(\"tokenCreateForm\").classList.remove(\"hidden\");\n  }\n  function updateCapabilities() {\n    const credentialsAvailable = DATA?.credentialManagement === \"available\";\n    $(\"credentialsNav\").classList.toggle(\"hidden\", !credentialsAvailable);\n    const tokensAvailable = DATA?.accessTokenManagement === \"available\";\n    $(\"tokensNav\").classList.toggle(\"hidden\", !tokensAvailable);\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    $(\"tokenUnavailable\").classList.toggle(\"hidden\", Boolean(tokensAvailable));\n    $(\"tokenAvailable\").classList.toggle(\"hidden\", !tokensAvailable);\n    $(\"tokenUnavailable\").textContent = tokensAvailable ? \"\" : accessTokenUnavailableCopy(DATA?.accessTokenManagement);\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 === \"tokens\" && DATA.accessTokenManagement === \"available\" && !ACCESS_TOKENS_LOADED) {\n        void loadAccessTokens();\n      }\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 (next !== \"tokens\") clearCreatedAccessToken();\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        event.friction,\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 frictionCopy = event.friction ? \" · \" + esc(event.friction) : \"\";\n      const errorCopy = event.errorCode && event.errorCode !== event.friction ? \" · \" + 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 + frictionCopy + 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  function renderAccessTokens() {\n    const list = $(\"tokenList\");\n    list.innerHTML = \"\";\n    if (!ACCESS_TOKENS.length) {\n      list.innerHTML = '<p class=\"empty\">No access tokens yet. Name the first MCP client above.</p>';\n      return;\n    }\n    for (const token of ACCESS_TOKENS) {\n      const revoked = Boolean(token.revokedAt);\n      const item = document.createElement(\"section\");\n      item.className = \"token-card\" + (revoked ? \" revoked\" : \"\");\n      item.setAttribute(\"aria-labelledby\", \"access-token-\" + token.id);\n      item.innerHTML = '<div class=\"token-card-head\"><div><h2 id=\"access-token-' + esc(token.id) + '\">' + esc(token.name) + '</h2><p class=\"mono\">' + esc(token.tokenPrefix) + '…</p></div><div class=\"cap\">' + (revoked ? \"Revoked \" + esc(formatDate(token.revokedAt)) : \"Created \" + esc(formatDate(token.createdAt))) + '</div></div><div class=\"credential-actions\"><button class=\"linklike\" type=\"button\" data-token-action=\"rename\" data-token-id=\"' + esc(token.id) + '\">Rename</button>' + (revoked ? \"\" : '<button class=\"linklike danger\" type=\"button\" data-token-action=\"revoke\" data-token-id=\"' + esc(token.id) + '\">Revoke</button>') + '</div><form class=\"credential-form hidden\" data-token-form=\"' + esc(token.id) + '\"><label class=\"visually-hidden\" for=\"token-name-' + esc(token.id) + '\">Token name</label><input id=\"token-name-' + esc(token.id) + '\" type=\"text\" maxlength=\"80\" value=\"' + esc(token.name) + '\" autocomplete=\"off\"><button class=\"linklike\" type=\"submit\" data-token-action=\"save-name\" data-token-id=\"' + esc(token.id) + '\">Save name</button><button class=\"linklike\" type=\"button\" data-token-action=\"cancel-name\" data-token-id=\"' + esc(token.id) + '\">Cancel</button></form>';\n      list.appendChild(item);\n    }\n  }\n  async function loadAccessTokens() {\n    const generation = SESSION_GENERATION;\n    $(\"tokenList\").setAttribute(\"aria-busy\", \"true\");\n    setTokenNotice(\"Loading access tokens…\");\n    try {\n      const payload = await operatorRequest(\n        \"/ui/access-tokens\",\n        \"GET\",\n        generation\n      );\n      if (generation !== SESSION_GENERATION) return;\n      ACCESS_TOKENS = payload?.accessTokens || [];\n      ACCESS_TOKENS_LOADED = true;\n      setTokenNotice(\"\");\n      renderAccessTokens();\n    } catch (error) {\n      if (generation !== SESSION_GENERATION) return;\n      setTokenNotice(errorMessage(\n        error,\n        \"Access tokens could not be loaded.\"\n      ), true);\n    } finally {\n      if (generation === SESSION_GENERATION) {\n        $(\"tokenList\").setAttribute(\"aria-busy\", \"false\");\n      }\n    }\n  }\n  $(\"tokenCreateForm\").onsubmit = async (event) => {\n    event.preventDefault();\n    const name = $(\"tokenName\").value.trim();\n    if (!name) {\n      setTokenNotice(\"Name the MCP client before creating a token.\", true);\n      return;\n    }\n    const generation = SESSION_GENERATION;\n    $(\"createToken\").disabled = true;\n    setTokenNotice(\"\");\n    try {\n      const payload = await operatorRequest(\n        \"/ui/access-tokens\",\n        \"POST\",\n        generation,\n        { name }\n      );\n      if (generation !== SESSION_GENERATION) return;\n      if (!payload?.token || !payload.accessToken) {\n        throw new Error(\"The created token was not returned.\");\n      }\n      ACCESS_TOKENS = [\n        payload.accessToken,\n        ...ACCESS_TOKENS.filter((token) => token.id !== payload.accessToken.id)\n      ];\n      ACCESS_TOKENS_LOADED = true;\n      $(\"tokenName\").value = \"\";\n      $(\"createdToken\").textContent = payload.token;\n      $(\"tokenCreateForm\").classList.add(\"hidden\");\n      $(\"tokenReveal\").classList.remove(\"hidden\");\n      setTokenNotice(\"Access token created.\");\n      renderAccessTokens();\n      $(\"tokenRevealHeading\").focus();\n    } catch (error) {\n      if (generation !== SESSION_GENERATION) return;\n      setTokenNotice(errorMessage(\n        error,\n        \"Access token could not be created.\"\n      ), true);\n      $(\"tokenNotice\").focus();\n    } finally {\n      if (generation === SESSION_GENERATION) $(\"createToken\").disabled = false;\n    }\n  };\n  $(\"copyCreatedToken\").onclick = async () => {\n    const button = $(\"copyCreatedToken\");\n    const token = $(\"createdToken\").textContent || \"\";\n    try {\n      await navigator.clipboard.writeText(token);\n      button.textContent = \"Copied\";\n    } catch {\n      button.textContent = \"Copy failed\";\n    }\n    window.setTimeout(() => {\n      button.textContent = \"Copy token\";\n    }, 1600);\n  };\n  $(\"dismissCreatedToken\").onclick = () => {\n    clearCreatedAccessToken();\n    $(\"tokenName\").focus();\n  };\n  $(\"tokenList\").onclick = async (event) => {\n    const button = closestElement(\n      event.target,\n      \"[data-token-action]\"\n    );\n    if (!button) return;\n    const id = button.dataset.tokenId;\n    const action = button.dataset.tokenAction;\n    if (!id || !action) return;\n    const form = document.querySelector(\n      '[data-token-form=\"' + CSS.escape(id) + '\"]'\n    );\n    if (!form) return;\n    if (action === \"rename\") {\n      form.classList.remove(\"hidden\");\n      form.querySelector(\"input\")?.focus();\n      return;\n    }\n    if (action === \"cancel-name\") {\n      const current = ACCESS_TOKENS.find((token) => token.id === id);\n      const input = form.querySelector(\"input\");\n      if (input && current) input.value = current.name;\n      form.classList.add(\"hidden\");\n      return;\n    }\n    if (action !== \"revoke\") return;\n    const named = ACCESS_TOKENS.find((token) => token.id === id);\n    if (!window.confirm(\n      \"Revoke \" + (named?.name || \"this access token\") + \"? Its MCP client will immediately lose access.\"\n    )) return;\n    const generation = SESSION_GENERATION;\n    try {\n      const payload = await operatorRequest(\n        \"/ui/access-tokens/\" + encodeURIComponent(id),\n        \"DELETE\",\n        generation\n      );\n      if (generation !== SESSION_GENERATION) return;\n      if (payload?.accessToken) {\n        ACCESS_TOKENS = ACCESS_TOKENS.map((token) => token.id === id ? payload.accessToken : token);\n      }\n      setTokenNotice(\"Access token revoked.\");\n      renderAccessTokens();\n      $(\"tokenNotice\").focus();\n    } catch (error) {\n      if (generation !== SESSION_GENERATION) return;\n      setTokenNotice(errorMessage(\n        error,\n        \"Access token could not be revoked.\"\n      ), true);\n    }\n  };\n  $(\"tokenList\").onsubmit = async (event) => {\n    event.preventDefault();\n    const form = closestElement(event.target, \"[data-token-form]\");\n    if (!form) return;\n    const id = form.dataset.tokenForm;\n    const name = form.querySelector(\"input\")?.value.trim();\n    if (!id || !name) return;\n    const generation = SESSION_GENERATION;\n    try {\n      const payload = await operatorRequest(\n        \"/ui/access-tokens/\" + encodeURIComponent(id),\n        \"PUT\",\n        generation,\n        { name }\n      );\n      if (generation !== SESSION_GENERATION) return;\n      if (payload?.accessToken) {\n        ACCESS_TOKENS = ACCESS_TOKENS.map((token) => token.id === id ? payload.accessToken : token);\n      }\n      setTokenNotice(\"Access token renamed.\");\n      renderAccessTokens();\n      $(\"tokenNotice\").focus();\n    } catch (error) {\n      if (generation !== SESSION_GENERATION) return;\n      setTokenNotice(errorMessage(\n        error,\n        \"Access token could not be renamed.\"\n      ), true);\n    }\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 !== \"tokens\" && 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  window.addEventListener(\"pagehide\", clearCreatedAccessToken);\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";
-//# sourceMappingURL=generated.js.map
+// Source: src/operator-ui/app/main.tsx 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.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#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-drift {\n  border-top: 1px solid var(--rule);\n  margin-top: .75rem;\n  padding-top: .75rem;\n}\n.drift-summary {\n  margin-top: .25rem;\n}\n.drift-counts {\n  display: flex;\n  flex-wrap: wrap;\n  gap: .25rem var(--gap);\n  margin-top: .5rem;\n}\n.drift-count {\n  color: var(--muted);\n  font-size: .9em;\n}\n.drift-count.flagged {\n  color: var(--ink);\n}\n.drift-count-value {\n  font-family: var(--mono);\n  margin-right: .35rem;\n}\n.drift-count.flagged .drift-count-value {\n  text-decoration: underline;\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}\n.token-create {\n  border-bottom: 1px solid var(--rule);\n  border-top: 1px solid var(--rule);\n  padding: .75rem 0;\n}\n.token-create > label {\n  display: block;\n  margin-bottom: .5rem;\n}\n.token-create input {\n  flex: 1 1 18rem;\n}\n.token-create button,\n.token-card button,\n.token-reveal button {\n  align-items: center;\n  display: inline-flex;\n  min-height: 2.75rem;\n}\n.token-reveal {\n  background: var(--ink);\n  color: var(--paper);\n  margin-top: 1.5rem;\n  padding: 1rem 1.25rem;\n}\n.token-reveal .meta,\n.token-reveal .cap {\n  color: #bbb;\n}\n.token-reveal-head,\n.token-card-head {\n  align-items: baseline;\n  display: flex;\n  flex-wrap: wrap;\n  gap: .25rem var(--gap);\n  justify-content: space-between;\n}\n.token-secret {\n  border-bottom: 1px solid #555;\n  border-top: 1px solid #555;\n  margin-top: .75rem;\n}\n.token-secret code {\n  color: var(--paper);\n  user-select: all;\n}\n.token-ledger {\n  border-bottom: 1px solid var(--rule);\n  margin-top: 1.5rem;\n}\n.token-card {\n  border-top: 1px solid var(--rule);\n  padding: .75rem 0 .75rem 1.25rem;\n  position: relative;\n}\n.token-card::before {\n  background: var(--ink);\n  bottom: 0;\n  content: \"\";\n  left: .25rem;\n  position: absolute;\n  top: 0;\n  width: 1px;\n}\n.token-card.revoked {\n  color: var(--muted);\n}\n.token-card.revoked::before {\n  background: var(--rule);\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  // node_modules/preact/dist/preact.module.js\n  var n;\n  var l;\n  var u;\n  var t;\n  var i;\n  var r;\n  var o;\n  var e;\n  var f;\n  var c;\n  var a;\n  var s;\n  var h;\n  var p;\n  var v;\n  var y;\n  var d = {};\n  var w = [];\n  var _ = /acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|itera/i;\n  var g = Array.isArray;\n  function m(n2, l3) {\n    for (var u4 in l3) n2[u4] = l3[u4];\n    return n2;\n  }\n  function b(n2) {\n    n2 && n2.parentNode && n2.parentNode.removeChild(n2);\n  }\n  function k(l3, u4, t3) {\n    var i3, r3, o3, e3 = {};\n    for (o3 in u4) \"key\" == o3 ? i3 = u4[o3] : \"ref\" == o3 ? r3 = u4[o3] : e3[o3] = u4[o3];\n    if (arguments.length > 2 && (e3.children = arguments.length > 3 ? n.call(arguments, 2) : t3), \"function\" == typeof l3 && null != l3.defaultProps) for (o3 in l3.defaultProps) void 0 === e3[o3] && (e3[o3] = l3.defaultProps[o3]);\n    return x(l3, e3, i3, r3, null);\n  }\n  function x(n2, t3, i3, r3, o3) {\n    var e3 = { type: n2, props: t3, key: i3, ref: r3, __k: null, __: null, __b: 0, __e: null, __c: null, constructor: void 0, __v: null == o3 ? ++u : o3, __i: -1, __u: 0 };\n    return null == o3 && null != l.vnode && l.vnode(e3), e3;\n  }\n  function S(n2) {\n    return n2.children;\n  }\n  function C(n2, l3) {\n    this.props = n2, this.context = l3;\n  }\n  function $(n2, l3) {\n    if (null == l3) return n2.__ ? $(n2.__, n2.__i + 1) : null;\n    for (var u4; l3 < n2.__k.length; l3++) if (null != (u4 = n2.__k[l3]) && null != u4.__e) return u4.__e;\n    return \"function\" == typeof n2.type ? $(n2) : null;\n  }\n  function I(n2) {\n    if (n2.__P && n2.__d) {\n      var u4 = n2.__v, t3 = u4.__e, i3 = [], r3 = [], o3 = m({}, u4);\n      o3.__v = u4.__v + 1, l.vnode && l.vnode(o3), q(n2.__P, o3, u4, n2.__n, n2.__P.namespaceURI, 32 & u4.__u ? [t3] : null, i3, null == t3 ? $(u4) : t3, !!(32 & u4.__u), r3), o3.__v = u4.__v, o3.__.__k[o3.__i] = o3, D(i3, o3, r3), u4.__e = u4.__ = null, o3.__e != t3 && P(o3);\n    }\n  }\n  function P(n2) {\n    if (null != (n2 = n2.__) && null != n2.__c) return n2.__e = n2.__c.base = null, n2.__k.some(function(l3) {\n      if (null != l3 && null != l3.__e) return n2.__e = n2.__c.base = l3.__e;\n    }), P(n2);\n  }\n  function A(n2) {\n    (!n2.__d && (n2.__d = true) && i.push(n2) && !H.__r++ || r != l.debounceRendering) && ((r = l.debounceRendering) || o)(H);\n  }\n  function H() {\n    try {\n      for (var n2, l3 = 1; i.length; ) i.length > l3 && i.sort(e), n2 = i.shift(), l3 = i.length, I(n2);\n    } finally {\n      i.length = H.__r = 0;\n    }\n  }\n  function L(n2, l3, u4, t3, i3, r3, o3, e3, f4, c3, a3) {\n    var s3, h3, p3, v3, y3, _3, g2 = t3 && t3.__k || w, m3 = l3.length;\n    for (f4 = T(u4, l3, g2, f4, m3), s3 = 0; s3 < m3; s3++) null != (p3 = u4.__k[s3]) && (h3 = -1 != p3.__i && g2[p3.__i] || d, p3.__i = s3, _3 = q(n2, p3, h3, i3, r3, o3, e3, f4, c3, a3), v3 = p3.__e, p3.ref && h3.ref != p3.ref && (h3.ref && J(h3.ref, null, p3), a3.push(p3.ref, p3.__c || v3, p3)), null == y3 && null != v3 && (y3 = v3), 4 & p3.__u ? (f4 = j(p3, f4, n2), h3.__e && (h3.__e = null)) : \"function\" == typeof p3.type && void 0 !== _3 ? f4 = _3 : v3 && (f4 = v3.nextSibling), p3.__u &= -7);\n    return u4.__e = y3, f4;\n  }\n  function T(n2, l3, u4, t3, i3) {\n    var r3, o3, e3, f4, c3, a3 = u4.length, s3 = a3, h3 = 0;\n    for (n2.__k = new Array(i3), r3 = 0; r3 < i3; r3++) null != (o3 = l3[r3]) && \"boolean\" != typeof o3 && \"function\" != typeof o3 ? (\"string\" == typeof o3 || \"number\" == typeof o3 || \"bigint\" == typeof o3 || o3.constructor == String ? o3 = n2.__k[r3] = x(null, o3, null, null, null) : g(o3) ? o3 = n2.__k[r3] = x(S, { children: o3 }, null, null, null) : void 0 === o3.constructor && o3.__b > 0 ? o3 = n2.__k[r3] = x(o3.type, o3.props, o3.key, o3.ref ? o3.ref : null, o3.__v) : n2.__k[r3] = o3, f4 = r3 + h3, o3.__ = n2, o3.__b = n2.__b + 1, e3 = null, -1 != (c3 = o3.__i = O(o3, u4, f4, s3)) && (s3--, (e3 = u4[c3]) && (e3.__u |= 2)), null == e3 || null == e3.__v ? (-1 == c3 && (i3 > a3 ? h3-- : i3 < a3 && h3++), \"function\" != typeof o3.type && (o3.__u |= 4)) : c3 != f4 && (c3 == f4 - 1 ? h3-- : c3 == f4 + 1 ? h3++ : (c3 > f4 ? h3-- : h3++, o3.__u |= 4))) : n2.__k[r3] = null;\n    if (s3) for (r3 = 0; r3 < a3; r3++) null != (e3 = u4[r3]) && 0 == (2 & e3.__u) && (e3.__e == t3 && (t3 = $(e3)), K(e3, e3));\n    return t3;\n  }\n  function j(n2, l3, u4) {\n    var t3, i3;\n    if (\"function\" == typeof n2.type) {\n      for (t3 = n2.__k, i3 = 0; t3 && i3 < t3.length; i3++) t3[i3] && (t3[i3].__ = n2, l3 = j(t3[i3], l3, u4));\n      return l3;\n    }\n    n2.__e != l3 && (l3 && n2.type && !l3.parentNode && (l3 = $(n2)), l3 = u4.insertBefore(n2.__e, l3 || null));\n    do {\n      l3 = l3 && l3.nextSibling;\n    } while (null != l3 && 8 == l3.nodeType);\n    return l3;\n  }\n  function O(n2, l3, u4, t3) {\n    var i3, r3, o3, e3 = n2.key, f4 = n2.type, c3 = l3[u4], a3 = null != c3 && 0 == (2 & c3.__u);\n    if (null === c3 && null == e3 || a3 && e3 == c3.key && f4 == c3.type) return u4;\n    if (t3 > (a3 ? 1 : 0)) {\n      for (i3 = u4 - 1, r3 = u4 + 1; i3 >= 0 || r3 < l3.length; ) if (null != (c3 = l3[o3 = i3 >= 0 ? i3-- : r3++]) && 0 == (2 & c3.__u) && e3 == c3.key && f4 == c3.type) return o3;\n    }\n    return -1;\n  }\n  function z(n2, l3, u4) {\n    \"-\" == l3[0] ? n2.setProperty(l3, null == u4 ? \"\" : u4) : n2[l3] = null == u4 ? \"\" : \"number\" != typeof u4 || _.test(l3) ? u4 : u4 + \"px\";\n  }\n  function N(n2, l3, u4, t3, i3) {\n    var r3, o3;\n    n: if (\"style\" == l3) if (\"string\" == typeof u4) n2.style.cssText = u4;\n    else {\n      if (\"string\" == typeof t3 && (n2.style.cssText = t3 = \"\"), t3) for (l3 in t3) u4 && l3 in u4 || z(n2.style, l3, \"\");\n      if (u4) for (l3 in u4) t3 && u4[l3] == t3[l3] || z(n2.style, l3, u4[l3]);\n    }\n    else if (\"o\" == l3[0] && \"n\" == l3[1]) r3 = l3 != (l3 = l3.replace(s, \"$1\")), o3 = l3.toLowerCase(), l3 = o3 in n2 || \"onFocusOut\" == l3 || \"onFocusIn\" == l3 ? o3.slice(2) : l3.slice(2), n2.l || (n2.l = {}), n2.l[l3 + r3] = u4, u4 ? t3 ? u4[a] = t3[a] : (u4[a] = h, n2.addEventListener(l3, r3 ? v : p, r3)) : n2.removeEventListener(l3, r3 ? v : p, r3);\n    else {\n      if (\"http://www.w3.org/2000/svg\" == i3) l3 = l3.replace(/xlink(H|:h)/, \"h\").replace(/sName$/, \"s\");\n      else if (\"width\" != l3 && \"height\" != l3 && \"href\" != l3 && \"list\" != l3 && \"form\" != l3 && \"tabIndex\" != l3 && \"download\" != l3 && \"rowSpan\" != l3 && \"colSpan\" != l3 && \"role\" != l3 && \"popover\" != l3 && l3 in n2) try {\n        n2[l3] = null == u4 ? \"\" : u4;\n        break n;\n      } catch (n3) {\n      }\n      \"function\" == typeof u4 || (null == u4 || false === u4 && \"-\" != l3[4] ? n2.removeAttribute(l3) : n2.setAttribute(l3, \"popover\" == l3 && 1 == u4 ? \"\" : u4));\n    }\n  }\n  function V(n2) {\n    return function(u4) {\n      if (this.l) {\n        var t3 = this.l[u4.type + n2];\n        if (null == u4[c]) u4[c] = h++;\n        else if (u4[c] < t3[a]) return;\n        return t3(l.event ? l.event(u4) : u4);\n      }\n    };\n  }\n  function q(n2, u4, t3, i3, r3, o3, e3, f4, c3, a3) {\n    var s3, h3, p3, v3, y3, d3, _3, k3, x2, M, I2, P2, A2, H2, T2, j3, F = u4.type;\n    if (void 0 !== u4.constructor) return null;\n    128 & t3.__u && (c3 = !!(32 & t3.__u), o3 = [f4 = u4.__e = t3.__e]), (s3 = l.__b) && s3(u4);\n    n: if (\"function\" == typeof F) {\n      h3 = e3.length;\n      try {\n        if (x2 = u4.props, M = F.prototype && F.prototype.render, I2 = (s3 = F.contextType) && i3[s3.__c], P2 = s3 ? I2 ? I2.props.value : s3.__ : i3, t3.__c ? k3 = (p3 = u4.__c = t3.__c).__ = p3.__E : (M ? u4.__c = p3 = new F(x2, P2) : (u4.__c = p3 = new C(x2, P2), p3.constructor = F, p3.render = Q), I2 && I2.sub(p3), p3.state || (p3.state = {}), p3.__n = i3, v3 = p3.__d = true, p3.__h = [], p3._sb = []), M && null == p3.__s && (p3.__s = p3.state), M && null != F.getDerivedStateFromProps && (p3.__s == p3.state && (p3.__s = m({}, p3.__s)), m(p3.__s, F.getDerivedStateFromProps(x2, p3.__s))), y3 = p3.props, d3 = p3.state, p3.__v = u4, v3) M && null == F.getDerivedStateFromProps && null != p3.componentWillMount && p3.componentWillMount(), M && null != p3.componentDidMount && p3.__h.push(p3.componentDidMount);\n        else {\n          if (M && null == F.getDerivedStateFromProps && x2 !== y3 && null != p3.componentWillReceiveProps && p3.componentWillReceiveProps(x2, P2), u4.__v == t3.__v || !p3.__e && null != p3.shouldComponentUpdate && false === p3.shouldComponentUpdate(x2, p3.__s, P2)) {\n            u4.__v != t3.__v && (p3.props = x2, p3.state = p3.__s, p3.__d = false), u4.__e = t3.__e, u4.__k = t3.__k, u4.__k.some(function(n3) {\n              n3 && (n3.__ = u4);\n            }), w.push.apply(p3.__h, p3._sb), p3._sb = [], p3.__h.length && e3.push(p3), f4 = $(t3);\n            break n;\n          }\n          null != p3.componentWillUpdate && p3.componentWillUpdate(x2, p3.__s, P2), M && null != p3.componentDidUpdate && p3.__h.push(function() {\n            p3.componentDidUpdate(y3, d3, _3);\n          });\n        }\n        if (p3.context = P2, p3.props = x2, p3.__P = n2, p3.__e = false, A2 = l.__r, H2 = 0, M) p3.state = p3.__s, p3.__d = false, A2 && A2(u4), s3 = p3.render(p3.props, p3.state, p3.context), w.push.apply(p3.__h, p3._sb), p3._sb = [];\n        else do {\n          p3.__d = false, A2 && A2(u4), s3 = p3.render(p3.props, p3.state, p3.context), p3.state = p3.__s;\n        } while (p3.__d && ++H2 < 25);\n        p3.state = p3.__s, null != p3.getChildContext && (i3 = m(m({}, i3), p3.getChildContext())), M && !v3 && null != p3.getSnapshotBeforeUpdate && (_3 = p3.getSnapshotBeforeUpdate(y3, d3)), T2 = null != s3 && s3.type === S && null == s3.key ? E(s3.props.children) : s3, f4 = L(n2, g(T2) ? T2 : [T2], u4, t3, i3, r3, o3, e3, f4, c3, a3), p3.base = u4.__e, u4.__u &= -161, p3.__h.length && e3.push(p3), k3 && (p3.__E = p3.__ = null);\n      } catch (n3) {\n        if (e3.length = h3, u4.__v = null, c3 || null != o3) {\n          if (n3.then) {\n            for (u4.__u |= c3 ? 160 : 128; f4 && 8 == f4.nodeType && f4.nextSibling; ) f4 = f4.nextSibling;\n            null != o3 && (o3[o3.indexOf(f4)] = null), u4.__e = f4;\n          } else if (null != o3) for (j3 = o3.length; j3--; ) b(o3[j3]);\n        } else u4.__e = t3.__e;\n        null == u4.__k && (u4.__k = t3.__k || []), n3.then || B(u4), l.__e(n3, u4, t3);\n      }\n    } else null == o3 && u4.__v == t3.__v ? (u4.__k = t3.__k, u4.__e = t3.__e) : f4 = u4.__e = G(t3.__e, u4, t3, i3, r3, o3, e3, c3, a3);\n    return (s3 = l.diffed) && s3(u4), 128 & u4.__u ? void 0 : f4;\n  }\n  function B(n2) {\n    n2 && (n2.__c && (n2.__c.__e = true), n2.__k && n2.__k.some(B));\n  }\n  function D(n2, u4, t3) {\n    for (var i3 = 0; i3 < t3.length; i3++) J(t3[i3], t3[++i3], t3[++i3]);\n    l.__c && l.__c(u4, n2), n2.some(function(u5) {\n      try {\n        n2 = u5.__h, u5.__h = [], n2.some(function(n3) {\n          n3.call(u5);\n        });\n      } catch (n3) {\n        l.__e(n3, u5.__v);\n      }\n    });\n  }\n  function E(n2) {\n    return \"object\" != typeof n2 || null == n2 || n2.__b > 0 ? n2 : g(n2) ? n2.map(E) : void 0 !== n2.constructor ? null : m({}, n2);\n  }\n  function G(u4, t3, i3, r3, o3, e3, f4, c3, a3) {\n    var s3, h3, p3, v3, y3, w3, _3, m3 = i3.props || d, k3 = t3.props, x2 = t3.type;\n    if (\"svg\" == x2 ? o3 = \"http://www.w3.org/2000/svg\" : \"math\" == x2 ? o3 = \"http://www.w3.org/1998/Math/MathML\" : o3 || (o3 = \"http://www.w3.org/1999/xhtml\"), null != e3) {\n      for (s3 = 0; s3 < e3.length; s3++) if ((y3 = e3[s3]) && \"setAttribute\" in y3 == !!x2 && (x2 ? y3.localName == x2 : 3 == y3.nodeType)) {\n        u4 = y3, e3[s3] = null;\n        break;\n      }\n    }\n    if (null == u4) {\n      if (null == x2) return document.createTextNode(k3);\n      u4 = document.createElementNS(o3, x2, k3.is && k3), c3 && (l.__m && l.__m(t3, e3), c3 = false), e3 = null;\n    }\n    if (null == x2) m3 === k3 || c3 && u4.data == k3 || (u4.data = k3);\n    else {\n      if (e3 = \"textarea\" == x2 && null != k3.defaultValue ? null : e3 && n.call(u4.childNodes), !c3 && null != e3) for (m3 = {}, s3 = 0; s3 < u4.attributes.length; s3++) m3[(y3 = u4.attributes[s3]).name] = y3.value;\n      for (s3 in m3) y3 = m3[s3], \"dangerouslySetInnerHTML\" == s3 ? p3 = y3 : \"children\" == s3 || s3 in k3 || \"value\" == s3 && \"defaultValue\" in k3 || \"checked\" == s3 && \"defaultChecked\" in k3 || N(u4, s3, null, y3, o3);\n      for (s3 in k3) y3 = k3[s3], \"children\" == s3 ? v3 = y3 : \"dangerouslySetInnerHTML\" == s3 ? h3 = y3 : \"value\" == s3 ? w3 = y3 : \"checked\" == s3 ? _3 = y3 : c3 && \"function\" != typeof y3 || m3[s3] === y3 || N(u4, s3, y3, m3[s3], o3);\n      if (h3) c3 || p3 && (h3.__html == p3.__html || h3.__html == u4.innerHTML) || (u4.innerHTML = h3.__html), t3.__k = [];\n      else if (p3 && (u4.innerHTML = \"\"), L(\"template\" == t3.type ? u4.content : u4, g(v3) ? v3 : [v3], t3, i3, r3, \"foreignObject\" == x2 ? \"http://www.w3.org/1999/xhtml\" : o3, e3, f4, e3 ? e3[0] : i3.__k && $(i3, 0), c3, a3), null != e3) for (s3 = e3.length; s3--; ) b(e3[s3]);\n      c3 && \"textarea\" != x2 || (s3 = \"value\", \"progress\" == x2 && null == w3 ? u4.removeAttribute(\"value\") : null != w3 && (w3 !== u4[s3] || \"progress\" == x2 && !w3 || \"option\" == x2 && w3 != m3[s3]) && N(u4, s3, w3, m3[s3], o3), s3 = \"checked\", null != _3 && _3 != u4[s3] && N(u4, s3, _3, m3[s3], o3));\n    }\n    return u4;\n  }\n  function J(n2, u4, t3) {\n    try {\n      if (\"function\" == typeof n2) {\n        var i3 = \"function\" == typeof n2.__u;\n        i3 && n2.__u(), i3 && null == u4 || (n2.__u = n2(u4));\n      } else n2.current = u4;\n    } catch (n3) {\n      l.__e(n3, t3);\n    }\n  }\n  function K(n2, u4, t3) {\n    var i3, r3;\n    if (l.unmount && l.unmount(n2), (i3 = n2.ref) && (i3.current && i3.current != n2.__e || J(i3, null, u4)), null != (i3 = n2.__c)) {\n      if (i3.componentWillUnmount) try {\n        i3.componentWillUnmount();\n      } catch (n3) {\n        l.__e(n3, u4);\n      }\n      i3.base = i3.__P = i3.__n = null;\n    }\n    if (i3 = n2.__k) for (r3 = 0; r3 < i3.length; r3++) i3[r3] && K(i3[r3], u4, t3 || \"function\" != typeof n2.type);\n    t3 || b(n2.__e), n2.__c = n2.__ = n2.__e = void 0;\n  }\n  function Q(n2, l3, u4) {\n    return this.constructor(n2, u4);\n  }\n  function R(u4, t3, i3) {\n    var r3, o3, e3, f4;\n    t3 == document && (t3 = document.documentElement), l.__ && l.__(u4, t3), o3 = (r3 = \"function\" == typeof i3) ? null : i3 && i3.__k || t3.__k, e3 = [], f4 = [], q(t3, u4 = (!r3 && i3 || t3).__k = k(S, null, [u4]), o3 || d, d, t3.namespaceURI, !r3 && i3 ? [i3] : o3 ? null : t3.firstChild ? n.call(t3.childNodes) : null, e3, !r3 && i3 ? i3 : o3 ? o3.__e : t3.firstChild, r3, f4), D(e3, u4, f4), u4.props.children = null;\n  }\n  n = w.slice, l = { __e: function(n2, l3, u4, t3) {\n    for (var i3, r3, o3; l3 = l3.__; ) if ((i3 = l3.__c) && !i3.__) try {\n      if ((r3 = i3.constructor) && null != r3.getDerivedStateFromError && (i3.setState(r3.getDerivedStateFromError(n2)), o3 = i3.__d), null != i3.componentDidCatch && (i3.componentDidCatch(n2, t3 || {}), o3 = i3.__d), o3) return i3.__E = i3;\n    } catch (l4) {\n      n2 = l4;\n    }\n    throw n2;\n  } }, u = 0, t = function(n2) {\n    return null != n2 && void 0 === n2.constructor;\n  }, C.prototype.setState = function(n2, l3) {\n    var u4;\n    u4 = null != this.__s && this.__s != this.state ? this.__s : this.__s = m({}, this.state), \"function\" == typeof n2 && (n2 = n2(m({}, u4), this.props)), n2 && m(u4, n2), null != n2 && this.__v && (l3 && this._sb.push(l3), A(this));\n  }, C.prototype.forceUpdate = function(n2) {\n    this.__v && (this.__e = true, n2 && this.__h.push(n2), A(this));\n  }, C.prototype.render = S, i = [], o = \"function\" == typeof Promise ? Promise.prototype.then.bind(Promise.resolve()) : setTimeout, e = function(n2, l3) {\n    return n2.__v.__b - l3.__v.__b;\n  }, H.__r = 0, f = Math.random().toString(8), c = \"__d\" + f, a = \"__a\" + f, s = /(PointerCapture)$|Capture$/i, h = 0, p = V(false), v = V(true), y = 0;\n\n  // node_modules/preact/hooks/dist/hooks.module.js\n  var t2;\n  var r2;\n  var u2;\n  var i2;\n  var o2 = 0;\n  var f2 = [];\n  var c2 = l;\n  var e2 = c2.__b;\n  var a2 = c2.__r;\n  var v2 = c2.diffed;\n  var l2 = c2.__c;\n  var m2 = c2.unmount;\n  var p2 = c2.__;\n  function s2(n2, t3) {\n    c2.__h && c2.__h(r2, n2, o2 || t3), o2 = 0;\n    var u4 = r2.__H || (r2.__H = { __: [], __h: [] });\n    return n2 >= u4.__.length && u4.__.push({}), u4.__[n2];\n  }\n  function d2(n2) {\n    return o2 = 1, y2(D2, n2);\n  }\n  function y2(n2, u4, i3) {\n    var o3 = s2(t2++, 2);\n    if (o3.t = n2, !o3.__c && (o3.__ = [i3 ? i3(u4) : D2(void 0, u4), function(n3) {\n      var t3 = o3.__N ? o3.__N[0] : o3.__[0], r3 = o3.t(t3, n3);\n      t3 !== r3 && (o3.__N = [r3, o3.__[1]], o3.__c.setState({}));\n    }], o3.__c = r2, !r2.__f)) {\n      var f4 = function(n3, t3, r3) {\n        if (!o3.__c.__H) return true;\n        var u5 = false, i4 = o3.__c.props !== n3;\n        if (o3.__c.__H.__.some(function(n4) {\n          if (n4.__N) {\n            u5 = true;\n            var t4 = n4.__[0];\n            n4.__ = n4.__N, n4.__N = void 0, t4 !== n4.__[0] && (i4 = true);\n          }\n        }), c3) {\n          var f5 = c3.call(this, n3, t3, r3);\n          return u5 ? f5 || i4 : f5;\n        }\n        return !u5 || i4;\n      };\n      r2.__f = true;\n      var c3 = r2.shouldComponentUpdate, e3 = r2.componentWillUpdate;\n      r2.componentWillUpdate = function(n3, t3, r3) {\n        if (this.__e) {\n          var u5 = c3;\n          c3 = void 0, f4(n3, t3, r3), c3 = u5;\n        }\n        e3 && e3.call(this, n3, t3, r3);\n      }, r2.shouldComponentUpdate = f4;\n    }\n    return o3.__N || o3.__;\n  }\n  function h2(n2, u4) {\n    var i3 = s2(t2++, 3);\n    !c2.__s && C2(i3.__H, u4) && (i3.__ = n2, i3.u = u4, r2.__H.__h.push(i3));\n  }\n  function _2(n2, u4) {\n    var i3 = s2(t2++, 4);\n    !c2.__s && C2(i3.__H, u4) && (i3.__ = n2, i3.u = u4, r2.__h.push(i3));\n  }\n  function j2() {\n    for (var n2; n2 = f2.shift(); ) {\n      var t3 = n2.__H;\n      if (n2.__P && t3) try {\n        t3.__h.some(z2), t3.__h.some(B2), t3.__h = [];\n      } catch (r3) {\n        t3.__h = [], c2.__e(r3, n2.__v);\n      }\n    }\n  }\n  c2.__b = function(n2) {\n    r2 = null, e2 && e2(n2);\n  }, c2.__ = function(n2, t3) {\n    n2 && t3.__k && t3.__k.__m && (n2.__m = t3.__k.__m), p2 && p2(n2, t3);\n  }, c2.__r = function(n2) {\n    a2 && a2(n2), t2 = 0;\n    var i3 = (r2 = n2.__c).__H;\n    i3 && (u2 === r2 ? (i3.__h = [], r2.__h = [], i3.__.some(function(n3) {\n      n3.__N && (n3.__ = n3.__N), n3.u = n3.__N = void 0;\n    })) : (i3.__h.some(z2), i3.__h.some(B2), i3.__h = [], t2 = 0)), u2 = r2;\n  }, c2.diffed = function(n2) {\n    v2 && v2(n2);\n    var t3 = n2.__c;\n    t3 && t3.__H && (t3.__H.__h.length && (1 !== f2.push(t3) && i2 === c2.requestAnimationFrame || ((i2 = c2.requestAnimationFrame) || w2)(j2)), t3.__H.__.some(function(n3) {\n      n3.u && (n3.__H = n3.u, n3.u = void 0);\n    })), u2 = r2 = null;\n  }, c2.__c = function(n2, t3) {\n    t3.some(function(n3) {\n      try {\n        n3.__h.some(z2), n3.__h = n3.__h.filter(function(n4) {\n          return !n4.__ || B2(n4);\n        });\n      } catch (r3) {\n        t3.some(function(n4) {\n          n4.__h && (n4.__h = []);\n        }), t3 = [], c2.__e(r3, n3.__v);\n      }\n    }), l2 && l2(n2, t3);\n  }, c2.unmount = function(n2) {\n    m2 && m2(n2);\n    var t3, r3 = n2.__c;\n    r3 && r3.__H && (r3.__H.__.some(function(n3) {\n      try {\n        z2(n3);\n      } catch (n4) {\n        t3 = n4;\n      }\n    }), r3.__H = void 0, t3 && c2.__e(t3, r3.__v));\n  };\n  var k2 = \"function\" == typeof requestAnimationFrame;\n  function w2(n2) {\n    var t3, r3 = function() {\n      clearTimeout(u4), k2 && cancelAnimationFrame(t3), setTimeout(n2);\n    }, u4 = setTimeout(r3, 35);\n    k2 && (t3 = requestAnimationFrame(r3));\n  }\n  function z2(n2) {\n    var t3 = r2, u4 = n2.__c;\n    \"function\" == typeof u4 && (n2.__c = void 0, u4()), r2 = t3;\n  }\n  function B2(n2) {\n    var t3 = r2;\n    n2.__c = n2.__(), r2 = t3;\n  }\n  function C2(n2, t3) {\n    return !n2 || n2.length !== t3.length || t3.some(function(t4, r3) {\n      return t4 !== n2[r3];\n    });\n  }\n  function D2(n2, t3) {\n    return \"function\" == typeof t3 ? t3(n2) : t3;\n  }\n\n  // src/operator-ui/view.ts\n  var OPERATOR_PAGES = [\n    \"connections\",\n    \"credentials\",\n    \"tokens\",\n    \"activity\"\n  ];\n  var PAGE_META = {\n    connections: { path: \"/\", label: \"Connections\" },\n    credentials: { path: \"/credentials\", label: \"Credentials\" },\n    tokens: { path: \"/tokens\", label: \"Access tokens\" },\n    activity: { path: \"/activity\", label: \"Activity\" }\n  };\n  function pageForPath(path) {\n    const match = OPERATOR_PAGES.find((page) => PAGE_META[page].path === path);\n    return match ?? \"connections\";\n  }\n  function info(message2) {\n    return { message: message2, tone: \"info\" };\n  }\n  function failure(message2) {\n    return { message: message2, tone: \"error\" };\n  }\n  function initialState(page) {\n    return {\n      page,\n      generation: 0,\n      session: \"loading\",\n      gate: null,\n      refreshing: false,\n      pendingFocus: null,\n      ...identityScopedState()\n    };\n  }\n  function identityScopedState() {\n    return {\n      data: null,\n      connectorFilter: \"\",\n      oauthNotice: null,\n      oauthBusy: null,\n      credentialNotice: null,\n      credentialEditing: null,\n      credentialBusy: null,\n      tokenPhase: \"idle\",\n      tokenNotice: null,\n      tokens: [],\n      createdToken: null,\n      tokenRenaming: null,\n      tokenBusy: false,\n      activityPhase: \"idle\",\n      activityNotice: null,\n      activityEvents: [],\n      activityCursor: null,\n      activitySearch: \"\"\n    };\n  }\n  function resetIdentity(state2, gate2 = null) {\n    return {\n      ...state2,\n      generation: state2.generation + 1,\n      session: \"gated\",\n      gate: gate2,\n      refreshing: false,\n      pendingFocus: null,\n      ...identityScopedState()\n    };\n  }\n  function withPage(state2, page) {\n    return {\n      ...state2,\n      page,\n      createdToken: null,\n      tokenRenaming: null,\n      tokenNotice: null,\n      credentialEditing: null,\n      credentialNotice: null\n    };\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 accessTokenUnavailableCopy(capability) {\n    if (capability === \"not_configured\") {\n      return \"Access tokens are not configured for this deployment. Add accessTokens to the deployment configuration to enable them.\";\n    }\n    return \"Access token management requires an eligible Clerk operator. A Bearer token can connect to MCP, but it cannot create or revoke other tokens.\";\n  }\n  function connectorStatusLabel(status) {\n    if (status === \"ok\") return \"Connected\";\n    if (status === \"auth_required\") return \"Authorization needed\";\n    return \"Unavailable\";\n  }\n  function toolCountLabel(count) {\n    return `${count} ${count === 1 ? \"tool\" : \"tools\"}`;\n  }\n  var DRIFT_CATEGORIES = [\n    { key: \"unclassifiedTools\", label: \"Unclassified\" },\n    { key: \"unservedTools\", label: \"Unserved\" },\n    { key: \"annotationConflicts\", label: \"Annotation conflicts\" },\n    { key: \"schemaChanges\", label: \"Schema changes\" }\n  ];\n  function driftTotal(drift) {\n    if (!drift) return 0;\n    return DRIFT_CATEGORIES.reduce((sum, { key }) => sum + (drift[key] || 0), 0);\n  }\n  function driftState(drift) {\n    if (!drift) return \"unavailable\";\n    return driftTotal(drift) > 0 ? \"warning\" : \"clean\";\n  }\n  function driftCounts(drift) {\n    if (!drift) return [];\n    return DRIFT_CATEGORIES.map(({ key, label }) => ({\n      key,\n      label,\n      count: drift[key] || 0\n    }));\n  }\n  function driftSummary(drift) {\n    const state2 = driftState(drift);\n    if (state2 === \"unavailable\") {\n      return \"No catalog refresh observed yet in this runtime.\";\n    }\n    const observed = formatDate(drift?.observedAt);\n    const when = observed ? ` · observed ${observed}` : \"\";\n    if (state2 === \"clean\") return `Matches the reviewed manifest${when}`;\n    const total = driftTotal(drift);\n    return `${total} difference${total === 1 ? \"\" : \"s\"} from the reviewed manifest${when}`;\n  }\n  function safeHttpHref(url) {\n    if (!url) return null;\n    try {\n      const protocol = new URL(url).protocol;\n      return protocol === \"http:\" || protocol === \"https:\" ? url : 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 actorLabel(actor) {\n    if (!actor?.kind) return \"unknown\";\n    if (actor.label) return `${actor.kind} · ${actor.label}`;\n    return actor.id ? `${actor.kind} · ${actor.id}` : actor.kind;\n  }\n  function actorStableId(actor) {\n    if (!actor?.id) return null;\n    if (!actor.label && !actor.namespace) return null;\n    return actor.namespace ? `${actor.namespace} · ${actor.id}` : actor.id;\n  }\n  function activityMatches(event, query) {\n    const q2 = query.trim().toLowerCase();\n    if (!q2) return true;\n    return [\n      event.address,\n      event.connectorId,\n      event.toolName,\n      event.source,\n      event.outcome,\n      event.errorCode,\n      event.friction,\n      event.actor?.kind,\n      event.actor?.id,\n      event.actor?.namespace,\n      event.actor?.label\n    ].some((value) => String(value ?? \"\").toLowerCase().includes(q2));\n  }\n  function filterActivity(events, query) {\n    return events.filter((event) => activityMatches(event, query));\n  }\n  function activitySummary(events) {\n    if (events.length === 0) return \"Arguments and results are never stored.\";\n    const tools = new Set(events.map((event) => event.address)).size;\n    return `${events.length} loaded call${events.length === 1 ? \"\" : \"s\"} · ${tools} tool${tools === 1 ? \"\" : \"s\"} · no arguments or results stored`;\n  }\n  var ACTIVITY_OUTCOMES = [\"success\", \"error\", \"timeout\", \"cancelled\"];\n  function activityOutcomeClass(outcome) {\n    return ACTIVITY_OUTCOMES.includes(outcome) ? outcome : \"error\";\n  }\n  function activityDetail(event) {\n    const parts = [event.source];\n    if (event.attempts > 1) parts.push(`${event.attempts} attempts`);\n    if (event.friction) parts.push(event.friction);\n    if (event.errorCode && event.errorCode !== event.friction) {\n      parts.push(event.errorCode);\n    }\n    return parts.join(\" · \");\n  }\n  function credentialStateLabel(credential) {\n    if (!credential.configured) return \"not configured\";\n    const masked = credential.fields?.length ? \"configured\" : `configured · ••••${credential.lastFour ?? \"\"}`;\n    return credential.updatedAt ? `${masked} · updated ${formatDate(credential.updatedAt)}` : masked;\n  }\n  function gateCopy(kind, signedIn) {\n    if (kind !== \"clerk\") {\n      return \"Paste an operator bearer token to open this page. Nothing is requested until you do.\";\n    }\n    return signedIn ? \"Signed in with Clerk, but this account cannot open deployment-wide operator pages.\" : \"Sign in with Clerk to open this operator page.\";\n  }\n\n  // src/operator-ui/app/config.ts\n  var auth = AUTH;\n  var mcpUrl = MCP_URL;\n  var initialPage = INITIAL_PAGE;\n  var titleSuffix = TITLE_SUFFIX;\n  var productName = PRODUCT_NAME;\n  var productDescription = PRODUCT_DESCRIPTION;\n  var productOperatorLabel = PRODUCT_OPERATOR_LABEL;\n  var TOKEN_KEY = \"connecta:token\";\n\n  // src/operator-ui/app/store.ts\n  var state = initialState(initialPage);\n  var listeners = /* @__PURE__ */ new Set();\n  function getState() {\n    return state;\n  }\n  function subscribe(listener) {\n    listeners.add(listener);\n    return () => listeners.delete(listener);\n  }\n  function set(patch) {\n    state = { ...state, ...patch };\n    for (const listener of listeners) listener();\n  }\n  function fence() {\n    const generation = state.generation;\n    return () => generation === state.generation;\n  }\n  function message(error, fallback) {\n    return error instanceof Error && error.message ? error.message : fallback;\n  }\n  function sessionToken() {\n    return auth.kind === \"clerk\" ? Promise.resolve(window.Clerk?.session?.getToken() ?? null) : Promise.resolve(localStorage.getItem(TOKEN_KEY));\n  }\n  function gate(notice = null) {\n    state = resetIdentity(state, notice);\n    for (const listener of listeners) listener();\n  }\n  async function operatorRequest(path, method, current, body) {\n    const token = await sessionToken();\n    if (!current()) throw new Error(\"The operator session changed.\");\n    if (!token) throw new Error(\"Your operator 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.status === 401) {\n      throw new Error(\"Your operator session was not accepted. Sign in again.\");\n    }\n    if (res.status === 403) {\n      throw new Error(\"This identity may not perform that action.\");\n    }\n    if (!res.ok) {\n      throw new Error(payload.error || `Request failed (${res.status}).`);\n    }\n    return payload;\n  }\n  async function loadData() {\n    const current = fence();\n    if (state.session === \"ready\") set({ refreshing: true });\n    let token;\n    try {\n      token = await sessionToken();\n    } catch (error) {\n      if (!current()) return;\n      const why = message(error, \"unknown error\");\n      return gate(failure(`Could not read the Clerk session: ${why}`));\n    }\n    if (!current()) return;\n    if (!token) return gate(null);\n    let res;\n    try {\n      res = await fetch(\"/ui/data\", {\n        headers: { Authorization: `Bearer ${token}` }\n      });\n    } catch (error) {\n      if (!current()) return;\n      return gate(failure(`Network error: ${message(error, \"unknown error\")}`));\n    }\n    if (!current()) return;\n    if (res.status === 401 || res.status === 403) {\n      if (auth.kind === \"clerk\") {\n        return gate(\n          failure(\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      }\n      localStorage.removeItem(TOKEN_KEY);\n      return gate(failure(\"Token rejected — enter a valid bearer token.\"));\n    }\n    if (!res.ok) return gate(failure(`Error ${res.status}`));\n    let data;\n    try {\n      data = await res.json();\n    } catch {\n      if (!current()) return;\n      return gate(failure(\"Operator data could not be read.\"));\n    }\n    if (!current()) return;\n    set({ data, session: \"ready\", gate: null, refreshing: false });\n  }\n  async function mutate(options) {\n    const current = fence();\n    set(options.busy);\n    try {\n      const payload = await options.request(current);\n      if (!current()) return;\n      if (options.reload) await loadData();\n      if (!current()) return;\n      set(options.done(payload));\n    } catch (error) {\n      if (!current()) return;\n      if (options.reload) {\n        try {\n          await loadData();\n        } catch {\n        }\n        if (!current()) return;\n      }\n      set(options.failed(failure(message(error, options.fallback))));\n    }\n  }\n  function focusHandled() {\n    if (state.pendingFocus !== null) set({ pendingFocus: null });\n  }\n  function setPage(page, focus = false) {\n    state = withPage(state, page);\n    if (focus) {\n      state = {\n        ...state,\n        pendingFocus: state.session === \"ready\" ? `${page}Heading` : \"gateHeading\"\n      };\n    }\n    for (const listener of listeners) listener();\n  }\n  function navigate(page, href) {\n    history.pushState({ operatorPage: page }, \"\", href);\n    setPage(page, true);\n  }\n  function setConnectorFilter(connectorFilter) {\n    set({ connectorFilter });\n  }\n  function setActivitySearch(activitySearch) {\n    set({ activitySearch });\n  }\n  function signInWithBearer(value) {\n    gate(null);\n    localStorage.setItem(TOKEN_KEY, value);\n    void loadData().then(() => {\n      if (state.session === \"ready\") set({ pendingFocus: `${state.page}Heading` });\n    });\n  }\n  function forgetBearer() {\n    localStorage.removeItem(TOKEN_KEY);\n    gate(null);\n    set({ pendingFocus: \"token\" });\n  }\n  function oauthAction(connector, action) {\n    const disconnecting = action === \"disconnect\";\n    const confirmed = window.confirm(\n      disconnecting ? `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    );\n    if (!confirmed) return Promise.resolve();\n    return mutate({\n      request: (current) => operatorRequest(\n        `/ui/oauth/${encodeURIComponent(connector)}`,\n        disconnecting ? \"DELETE\" : \"POST\",\n        current\n      ),\n      busy: { oauthNotice: null, oauthBusy: connector },\n      done: (payload) => ({\n        oauthBusy: null,\n        pendingFocus: \"oauthNotice\",\n        oauthNotice: info(\n          disconnecting ? \"OAuth disconnected. Restart authorization when you are ready to reconnect.\" : payload?.message || \"Authorization restarted. Open the authorization link to reconnect.\"\n        )\n      }),\n      failed: (notice) => ({\n        oauthBusy: null,\n        oauthNotice: notice,\n        pendingFocus: \"oauthNotice\"\n      }),\n      fallback: \"OAuth action failed.\",\n      reload: true\n    });\n  }\n  function editCredential(connector) {\n    set({ credentialEditing: connector, credentialNotice: null });\n  }\n  function refuseCredential(copy) {\n    set({ credentialNotice: failure(copy), pendingFocus: \"credentialNotice\" });\n  }\n  function credentialMutation(connector, request, done, reload = true) {\n    const land = (credentialNotice) => ({\n      credentialBusy: null,\n      credentialNotice,\n      pendingFocus: \"credentialNotice\"\n    });\n    return mutate({\n      request,\n      busy: { credentialBusy: connector, credentialNotice: null },\n      done: (payload) => land(done(payload)),\n      failed: land,\n      fallback: \"Credential action failed.\",\n      reload\n    });\n  }\n  function saveCredential(connector, body) {\n    return credentialMutation(\n      connector,\n      (current) => operatorRequest(\n        `/ui/credentials/${encodeURIComponent(connector)}`,\n        \"PUT\",\n        current,\n        body\n      ),\n      () => {\n        set({ credentialEditing: null });\n        return info(\"Credential saved.\");\n      }\n    );\n  }\n  function removeCredential(connector) {\n    const confirmed = window.confirm(\n      \"Remove this credential? The connector will stop authenticating until a replacement is added.\"\n    );\n    if (!confirmed) return Promise.resolve();\n    return credentialMutation(\n      connector,\n      (current) => operatorRequest(\n        `/ui/credentials/${encodeURIComponent(connector)}`,\n        \"DELETE\",\n        current\n      ),\n      () => info(\"Credential removed.\")\n    );\n  }\n  function testCredential(connector) {\n    return credentialMutation(\n      connector,\n      (current) => operatorRequest(\n        `/ui/credentials/${encodeURIComponent(connector)}/test`,\n        \"POST\",\n        current\n      ),\n      (payload) => {\n        const copy = payload?.message || (payload?.ok ? \"Credential is valid.\" : \"Credential test failed.\");\n        return payload?.ok ? info(copy) : failure(copy);\n      },\n      false\n    );\n  }\n  async function loadAccessTokens() {\n    const current = fence();\n    set({ tokenPhase: \"loading\", tokenNotice: null });\n    try {\n      const payload = await operatorRequest(\"/ui/access-tokens\", \"GET\", current);\n      if (!current()) return;\n      set({ tokenPhase: \"ready\", tokens: payload?.accessTokens ?? [] });\n    } catch (error) {\n      if (!current()) return;\n      set({\n        tokenPhase: \"error\",\n        tokenNotice: failure(\n          message(error, \"Access tokens could not be loaded.\")\n        )\n      });\n    }\n  }\n  function tokenFailure(tokenNotice) {\n    return { tokenBusy: false, tokenNotice, pendingFocus: \"tokenNotice\" };\n  }\n  function createAccessToken(name) {\n    if (!name) {\n      set(tokenFailure(failure(\"Name the MCP client before creating a token.\")));\n      return Promise.resolve(false);\n    }\n    let created = false;\n    return mutate({\n      request: (current) => operatorRequest(\"/ui/access-tokens\", \"POST\", current, { name }),\n      busy: { tokenBusy: true, tokenNotice: null },\n      done: (payload) => {\n        const issued = payload?.accessToken;\n        if (!payload?.token || !issued) {\n          throw new Error(\"The created token was not returned.\");\n        }\n        created = true;\n        return {\n          tokenBusy: false,\n          tokenPhase: \"ready\",\n          tokens: [\n            issued,\n            ...state.tokens.filter((token) => token.id !== issued.id)\n          ],\n          createdToken: payload.token,\n          tokenNotice: info(\"Access token created.\"),\n          pendingFocus: \"tokenRevealHeading\"\n        };\n      },\n      failed: tokenFailure,\n      fallback: \"Access token could not be created.\"\n    }).then(() => created);\n  }\n  function dismissCreatedToken() {\n    set({ createdToken: null });\n  }\n  function renameAccessToken(id) {\n    set({ tokenRenaming: id });\n  }\n  function accessTokenMutation(id, method, body, success, fallback) {\n    return mutate({\n      request: (current) => operatorRequest(\n        `/ui/access-tokens/${encodeURIComponent(id)}`,\n        method,\n        current,\n        body\n      ),\n      busy: { tokenBusy: true, tokenNotice: null },\n      done: (payload) => ({\n        tokenBusy: false,\n        tokenRenaming: null,\n        tokenNotice: info(success),\n        pendingFocus: \"tokenNotice\",\n        ...payload?.accessToken ? {\n          tokens: state.tokens.map(\n            (token) => token.id === id ? payload.accessToken : token\n          )\n        } : {}\n      }),\n      failed: tokenFailure,\n      fallback\n    });\n  }\n  function saveAccessTokenName(id, name) {\n    return accessTokenMutation(\n      id,\n      \"PUT\",\n      { name },\n      \"Access token renamed.\",\n      \"Access token could not be renamed.\"\n    );\n  }\n  function revokeAccessToken(id) {\n    const named = state.tokens.find((token) => token.id === id);\n    const confirmed = window.confirm(\n      `Revoke ${named?.name || \"this access token\"}? Its MCP client will immediately lose access.`\n    );\n    if (!confirmed) return Promise.resolve();\n    return accessTokenMutation(\n      id,\n      \"DELETE\",\n      void 0,\n      \"Access token revoked.\",\n      \"Access token could not be revoked.\"\n    );\n  }\n  async function loadActivity(reset) {\n    if (!state.data?.activityEnabled) return;\n    const current = fence();\n    set({\n      activityPhase: \"loading\",\n      activityNotice: null,\n      ...reset ? { activityEvents: [], activityCursor: null } : {}\n    });\n    const params = new URLSearchParams({ limit: \"50\" });\n    if (!reset && state.activityCursor) {\n      params.set(\"cursor\", state.activityCursor);\n    }\n    try {\n      const payload = await operatorRequest(\n        `/ui/activity?${params}`,\n        \"GET\",\n        current\n      );\n      if (!current()) return;\n      set({\n        activityPhase: \"ready\",\n        activityEvents: [\n          ...reset ? [] : state.activityEvents,\n          ...payload?.events ?? []\n        ],\n        activityCursor: payload?.nextCursor ?? null\n      });\n    } catch (error) {\n      if (!current()) return;\n      set({\n        activityPhase: \"error\",\n        activityNotice: failure(message(error, \"Activity could not be loaded.\"))\n      });\n    }\n  }\n  function signIn() {\n    window.Clerk?.redirectToSignIn({\n      signInFallbackRedirectUrl: window.location.href,\n      signUpFallbackRedirectUrl: window.location.href\n    });\n  }\n  function signOut() {\n    const clerk = window.Clerk;\n    gate(null);\n    void clerk?.signOut({ redirectUrl: window.location.href });\n  }\n  async function boot() {\n    const onPop = () => setPage(pageForPath(window.location.pathname), true);\n    window.addEventListener(\"popstate\", onPop);\n    window.addEventListener(\"pagehide\", dismissCreatedToken);\n    if (auth.kind === \"clerk\") {\n      const clerk = window.Clerk;\n      if (!clerk) {\n        const why = \"Clerk could not load. Check your network and try again.\";\n        return gate(failure(why));\n      }\n      try {\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        let sessionId = clerk.session?.id ?? null;\n        clerk.addListener((resources) => {\n          const next = resources.session?.id ?? null;\n          if (next === sessionId) return;\n          sessionId = next;\n          gate(null);\n          void loadData();\n        });\n      } catch (error) {\n        const why = message(error, \"unknown error\");\n        return gate(failure(`Clerk could not initialize: ${why}`));\n      }\n    }\n    await loadData();\n  }\n\n  // node_modules/preact/jsx-runtime/dist/jsxRuntime.module.js\n  var f3 = 0;\n  function u3(e3, t3, n2, o3, i3, u4) {\n    t3 || (t3 = {});\n    var a3, c3, p3 = t3;\n    if (\"ref\" in p3) for (c3 in p3 = {}, t3) \"ref\" == c3 ? a3 = t3[c3] : p3[c3] = t3[c3];\n    var l3 = { type: e3, props: p3, key: n2, ref: a3, __k: null, __: null, __b: 0, __e: null, __c: null, constructor: void 0, __v: --f3, __i: -1, __u: 0, __source: i3, __self: u4 };\n    if (\"function\" == typeof e3 && (a3 = e3.defaultProps)) for (c3 in a3) void 0 === p3[c3] && (p3[c3] = a3[c3]);\n    return l.vnode && l.vnode(l3), l3;\n  }\n\n  // src/operator-ui/app/parts.tsx\n  function NoticeLine({\n    id,\n    notice,\n    className = \"meta\"\n  }) {\n    return /* @__PURE__ */ u3(\n      \"p\",\n      {\n        id,\n        class: notice?.tone === \"error\" ? `${className} error-notice` : className,\n        role: notice?.tone === \"error\" ? \"alert\" : \"status\",\n        \"aria-live\": \"polite\",\n        tabIndex: -1,\n        children: notice ? notice.message : null\n      }\n    );\n  }\n  function Empty({ children }) {\n    return /* @__PURE__ */ u3(\"p\", { class: \"empty\", children });\n  }\n  function Unavailable({ children }) {\n    return /* @__PURE__ */ u3(\"div\", { class: \"unavailable\", children });\n  }\n  function PageLink({\n    page,\n    class: className,\n    current,\n    children\n  }) {\n    const href = PAGE_META[page].path;\n    return /* @__PURE__ */ u3(\n      \"a\",\n      {\n        class: className,\n        href,\n        ...current ? { \"aria-current\": \"page\" } : {},\n        onClick: (event) => {\n          if (event.defaultPrevented || event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) {\n            return;\n          }\n          event.preventDefault();\n          navigate(page, href);\n        },\n        children\n      }\n    );\n  }\n  function CopyButton({\n    value,\n    label,\n    class: className = \"linklike\"\n  }) {\n    const [status, setStatus] = d2(\"idle\");\n    h2(() => {\n      if (status === \"idle\") return;\n      const timer = window.setTimeout(() => setStatus(\"idle\"), 1600);\n      return () => window.clearTimeout(timer);\n    }, [status]);\n    return /* @__PURE__ */ u3(\n      \"button\",\n      {\n        class: className,\n        type: \"button\",\n        onClick: () => {\n          navigator.clipboard.writeText(value).then(\n            () => setStatus(\"copied\"),\n            () => setStatus(\"failed\")\n          );\n        },\n        children: status === \"copied\" ? \"Copied\" : status === \"failed\" ? \"Copy failed\" : label\n      }\n    );\n  }\n\n  // src/operator-ui/app/activity.tsx\n  function ActivityRow({ event }) {\n    const outcome = activityOutcomeClass(event.outcome);\n    const stableId = actorStableId(event.actor);\n    return /* @__PURE__ */ u3(\"article\", { class: `activity-item ${outcome}`, children: [\n      /* @__PURE__ */ u3(\"div\", { class: \"activity-stamp\", children: [\n        /* @__PURE__ */ u3(\n          \"span\",\n          {\n            class: outcome === \"success\" ? \"dot ok\" : \"dot\",\n            \"aria-hidden\": \"true\"\n          }\n        ),\n        /* @__PURE__ */ u3(\"div\", { children: [\n          /* @__PURE__ */ u3(\"time\", { class: \"activity-time\", dateTime: event.occurredAt, children: formatDate(event.occurredAt) }),\n          /* @__PURE__ */ u3(\"div\", { class: \"activity-actor\", children: actorLabel(event.actor) }),\n          stableId ? /* @__PURE__ */ u3(\"div\", { class: \"activity-actor-id mono\", children: stableId }) : null\n        ] })\n      ] }),\n      /* @__PURE__ */ u3(\"div\", { children: [\n        /* @__PURE__ */ u3(\"div\", { class: \"activity-address\", children: event.address }),\n        /* @__PURE__ */ u3(\"div\", { class: \"activity-detail\", children: activityDetail(event) })\n      ] }),\n      /* @__PURE__ */ u3(\"div\", { children: [\n        /* @__PURE__ */ u3(\"div\", { class: \"activity-outcome\", children: event.outcome }),\n        /* @__PURE__ */ u3(\"div\", { class: \"activity-detail\", children: [\n          event.durationMs,\n          \" ms\"\n        ] })\n      ] })\n    ] });\n  }\n  function ActivityPage({ state: state2 }) {\n    const enabled = Boolean(state2.data?.activityEnabled);\n    const loading = state2.activityPhase === \"loading\";\n    const visible = filterActivity(state2.activityEvents, state2.activitySearch);\n    return /* @__PURE__ */ u3(\"section\", { id: \"activityView\", children: /* @__PURE__ */ u3(\"div\", { class: \"lead pgrid\", children: [\n      /* @__PURE__ */ u3(\"h1\", { id: \"activityHeading\", class: \"pcap\", tabIndex: -1, children: \"Activity\" }),\n      /* @__PURE__ */ u3(\"div\", { class: \"pbody\", children: [\n        /* @__PURE__ */ u3(\"p\", { class: \"activity-copy\", id: \"activitySummary\", children: activitySummary(state2.activityEvents) }),\n        !enabled ? /* @__PURE__ */ u3(Unavailable, { children: [\n          \"Activity history is not configured. Add an\",\n          \" \",\n          /* @__PURE__ */ u3(\"span\", { class: \"mono\", children: \"activity.store\" }),\n          \" with a list reader to enable this page.\"\n        ] }) : /* @__PURE__ */ u3(\"div\", { id: \"activityAvailable\", children: [\n          /* @__PURE__ */ u3(\"div\", { class: \"row activity-controls\", children: [\n            /* @__PURE__ */ u3(\n              \"input\",\n              {\n                id: \"activitySearch\",\n                type: \"search\",\n                placeholder: \"Search user, tool, or outcome…\",\n                \"aria-label\": \"Search loaded activity\",\n                value: state2.activitySearch,\n                onInput: (event) => setActivitySearch(event.currentTarget.value)\n              }\n            ),\n            /* @__PURE__ */ u3(\n              \"button\",\n              {\n                id: \"refreshActivity\",\n                class: \"linklike\",\n                type: \"button\",\n                disabled: loading,\n                onClick: () => void loadActivity(true),\n                children: loading ? \"Loading…\" : \"Refresh\"\n              }\n            )\n          ] }),\n          /* @__PURE__ */ u3(NoticeLine, { id: \"activityNotice\", notice: state2.activityNotice }),\n          /* @__PURE__ */ u3(\n            \"div\",\n            {\n              id: \"activityList\",\n              class: \"activity-ledger\",\n              \"aria-busy\": loading ? \"true\" : \"false\",\n              children: loading && state2.activityEvents.length === 0 ? /* @__PURE__ */ u3(\"div\", { class: \"activity-empty\", children: \"Loading activity…\" }) : state2.activityPhase === \"error\" && state2.activityEvents.length === 0 ? /* @__PURE__ */ u3(\"p\", { class: \"activity-empty\", children: /* @__PURE__ */ u3(\n                \"button\",\n                {\n                  class: \"linklike\",\n                  type: \"button\",\n                  onClick: () => void loadActivity(true),\n                  children: \"Try loading activity again\"\n                }\n              ) }) : visible.length === 0 ? /* @__PURE__ */ u3(\"div\", { class: \"activity-empty\", children: state2.activitySearch.trim() ? \"No loaded activity matches this search.\" : \"No connector tool calls recorded yet.\" }) : visible.map((event, index) => /* @__PURE__ */ u3(\n                ActivityRow,\n                {\n                  event\n                },\n                `${event.occurredAt}-${event.address}-${index}`\n              ))\n            }\n          ),\n          state2.activityCursor ? /* @__PURE__ */ u3(\n            \"button\",\n            {\n              id: \"moreActivity\",\n              class: \"linklike activity-more\",\n              type: \"button\",\n              disabled: loading,\n              onClick: () => void loadActivity(false),\n              children: loading ? \"Loading…\" : \"Load older\"\n            }\n          ) : null\n        ] })\n      ] })\n    ] }) });\n  }\n\n  // src/operator-ui/model.ts\n  function filterUiConnectors(connectors, query) {\n    const q2 = 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(q2 && connectorText.includes(q2));\n      const tools = connector.tools.filter(\n        (tool) => !q2 || connectorMatches || `${tool.name} ${tool.description ?? \"\"}`.toLowerCase().includes(q2)\n      );\n      if (q2 && tools.length === 0 && !connectorMatches) continue;\n      filtered.push({ connector, tools });\n    }\n    return filtered;\n  }\n\n  // src/operator-ui/app/connections.tsx\n  var DRIFT_HEADING = {\n    clean: \"Catalog drift · none\",\n    warning: \"Catalog drift · review\",\n    unavailable: \"Catalog drift · not observed\"\n  };\n  function DriftPanel({ connector }) {\n    const drift = connector.catalogDrift;\n    const state2 = driftState(drift);\n    return /* @__PURE__ */ u3(\n      \"div\",\n      {\n        id: `drift-${connector.id}`,\n        class: `connector-drift ${state2}`,\n        \"data-drift\": state2,\n        children: [\n          /* @__PURE__ */ u3(\"p\", { class: \"cap\", children: DRIFT_HEADING[state2] }),\n          /* @__PURE__ */ u3(\"p\", { class: \"meta drift-summary\", children: driftSummary(drift) }),\n          state2 === \"unavailable\" ? null : /* @__PURE__ */ u3(\"ul\", { class: \"drift-counts\", children: driftCounts(drift).map(({ key, label, count }) => /* @__PURE__ */ u3(\"li\", { class: count > 0 ? \"drift-count flagged\" : \"drift-count\", children: [\n            /* @__PURE__ */ u3(\"span\", { class: \"drift-count-value\", children: count }),\n            /* @__PURE__ */ u3(\"span\", { class: \"drift-count-label\", children: label })\n          ] }, key)) })\n        ]\n      }\n    );\n  }\n  function ConnectorCard({\n    connector,\n    tools,\n    expanded,\n    oauthManagement,\n    busy\n  }) {\n    const name = connector.title || connector.id;\n    const authorization = safeHttpHref(connector.authorizationUrl);\n    return /* @__PURE__ */ u3(\"div\", { class: \"card\", children: [\n      /* @__PURE__ */ u3(\"div\", { class: \"connector-head\", children: [\n        /* @__PURE__ */ u3(\"div\", { children: [\n          /* @__PURE__ */ u3(\"div\", { class: \"connector-title\", children: [\n            /* @__PURE__ */ u3(\"span\", { class: `dot ${connector.status}`, \"aria-hidden\": \"true\" }),\n            /* @__PURE__ */ u3(\"h2\", { children: name })\n          ] }),\n          connector.description ? /* @__PURE__ */ u3(\"p\", { class: \"connector-description meta\", children: connector.description }) : null\n        ] }),\n        /* @__PURE__ */ u3(\"div\", { class: \"connector-state cap\", children: [\n          connectorStatusLabel(connector.status),\n          \" ·\",\n          \" \",\n          toolCountLabel(connector.toolCount),\n          /* @__PURE__ */ u3(\"br\", {}),\n          /* @__PURE__ */ u3(\"span\", { class: \"mono\", children: connector.id })\n        ] })\n      ] }),\n      connector.message ? /* @__PURE__ */ u3(\"p\", { class: \"connector-message msg\", children: connector.message }) : null,\n      connector.authorizationUrl ? /* @__PURE__ */ u3(\"p\", { class: authorization ? \"connector-auth\" : \"connector-auth meta\", children: authorization ? /* @__PURE__ */ u3(\n        \"a\",\n        {\n          class: \"linklike\",\n          href: authorization,\n          target: \"_blank\",\n          rel: \"noopener\",\n          children: \"Authorize connector →\"\n        }\n      ) : `Authorization URL: ${connector.authorizationUrl}` }) : null,\n      /* @__PURE__ */ u3(DriftPanel, { connector }),\n      connector.oauth && oauthManagement ? /* @__PURE__ */ u3(\"div\", { class: \"credential-actions\", children: [\n        /* @__PURE__ */ u3(\n          \"button\",\n          {\n            type: \"button\",\n            class: \"linklike danger\",\n            \"aria-label\": `Disconnect OAuth for ${name}`,\n            disabled: busy,\n            onClick: () => void oauthAction(connector.id, \"disconnect\"),\n            children: \"Disconnect OAuth\"\n          }\n        ),\n        /* @__PURE__ */ u3(\n          \"button\",\n          {\n            type: \"button\",\n            class: \"linklike\",\n            \"aria-label\": `${connector.status === \"ok\" ? \"Reconnect OAuth for\" : \"Restart authorization for\"} ${name}`,\n            disabled: busy,\n            onClick: () => void oauthAction(connector.id, \"reconnect\"),\n            children: connector.status === \"ok\" ? \"Reconnect OAuth\" : \"Restart authorization\"\n          }\n        )\n      ] }) : null,\n      connector.credential ? /* @__PURE__ */ u3(\"p\", { class: \"connector-auth\", children: /* @__PURE__ */ u3(PageLink, { page: \"credentials\", class: \"linklike\", children: \"Manage credential →\" }) }) : null,\n      tools.length ? /* @__PURE__ */ u3(\"details\", { open: expanded, children: [\n        /* @__PURE__ */ u3(\"summary\", { class: \"linklike\", children: [\n          \"Show tools (\",\n          tools.length,\n          \")\"\n        ] }),\n        /* @__PURE__ */ u3(\"div\", { class: \"tool-list\", children: tools.map((tool) => /* @__PURE__ */ u3(\"div\", { class: \"tool\", children: [\n          /* @__PURE__ */ u3(\"code\", { children: tool.address }),\n          tool.description ? /* @__PURE__ */ u3(\"span\", { class: \"td\", children: tool.description }) : null\n        ] }, tool.address)) })\n      ] }) : null\n    ] });\n  }\n  function ConnectionsPage({ state: state2 }) {\n    const data = state2.data;\n    const query = state2.connectorFilter.trim();\n    const filtered = data ? filterUiConnectors(data.connectors, query) : [];\n    return /* @__PURE__ */ u3(\"section\", { id: \"connectionsView\", children: [\n      /* @__PURE__ */ u3(\"div\", { class: \"lead pgrid\", children: [\n        /* @__PURE__ */ u3(\"h1\", { id: \"connectionsHeading\", class: \"pcap\", tabIndex: -1, children: \"Connections\" }),\n        /* @__PURE__ */ u3(\"div\", { class: \"pbody lead-copy\", children: [\n          /* @__PURE__ */ u3(\"p\", { children: \"Use this endpoint to give an MCP client access to the tools below.\" }),\n          /* @__PURE__ */ u3(\"div\", { class: \"endpoint\", children: /* @__PURE__ */ u3(\"div\", { class: \"endpoint-row\", children: [\n            /* @__PURE__ */ u3(\"code\", { id: \"mcpUrl\", class: \"mono\", children: mcpUrl }),\n            /* @__PURE__ */ u3(CopyButton, { value: mcpUrl, label: \"Copy URL\" })\n          ] }) }),\n          /* @__PURE__ */ u3(\"p\", { class: \"cap\", id: \"serverInfo\", children: data ? `${data.serverInfo?.name || productName} v${data.connectaVersion || \"?\"}` : productOperatorLabel }),\n          /* @__PURE__ */ u3(NoticeLine, { id: \"oauthNotice\", notice: state2.oauthNotice })\n        ] })\n      ] }),\n      /* @__PURE__ */ u3(\"section\", { class: \"section pgrid\", \"aria-labelledby\": \"connectorLedgerHeading\", children: [\n        /* @__PURE__ */ u3(\"h2\", { class: \"pcap\", id: \"connectorLedgerHeading\", children: \"Connectors\" }),\n        /* @__PURE__ */ u3(\"div\", { class: \"pbody\", children: [\n          /* @__PURE__ */ u3(\"div\", { class: \"row toolbar\", children: /* @__PURE__ */ u3(\n            \"input\",\n            {\n              id: \"filter\",\n              type: \"search\",\n              placeholder: \"Filter connectors or tools…\",\n              \"aria-label\": \"Filter connectors or tools\",\n              value: state2.connectorFilter,\n              onInput: (event) => setConnectorFilter(event.currentTarget.value)\n            }\n          ) }),\n          /* @__PURE__ */ u3(\n            \"div\",\n            {\n              id: \"list\",\n              class: \"connector-tools\",\n              \"aria-busy\": state2.refreshing || !data ? \"true\" : \"false\",\n              children: !data ? /* @__PURE__ */ u3(Empty, { children: \"Loading connectors…\" }) : filtered.length === 0 ? /* @__PURE__ */ u3(Empty, { children: query ? \"No connectors or tools match this filter.\" : \"No connectors are declared in this deployment.\" }) : filtered.map(({ connector, tools }) => /* @__PURE__ */ u3(\n                ConnectorCard,\n                {\n                  connector,\n                  tools,\n                  expanded: Boolean(query),\n                  oauthManagement: data.oauthManagement,\n                  busy: state2.oauthBusy === connector.id\n                },\n                connector.id\n              ))\n            }\n          )\n        ] })\n      ] })\n    ] });\n  }\n\n  // src/operator-ui/app/credentials.tsx\n  function CredentialForm({\n    connector,\n    credential,\n    busy\n  }) {\n    const fields = credential.fields ?? [];\n    const [values, setValues] = d2({});\n    const single = fields.length === 0;\n    const inputId = `credential-input-${connector}`;\n    const submit = () => {\n      if (single) {\n        const value = (values.value ?? \"\").trim();\n        if (!value) return refuseCredential(\"Paste a credential before saving.\");\n        return void saveCredential(connector, { value });\n      }\n      const entries = {};\n      for (const field of fields) {\n        const value = (values[field.name] ?? \"\").trim();\n        if (!value) {\n          return refuseCredential(\n            \"Complete every credential field before saving.\"\n          );\n        }\n        entries[field.name] = value;\n      }\n      void saveCredential(connector, { values: entries });\n    };\n    return /* @__PURE__ */ u3(\"div\", { class: \"credential-form\", \"data-credential-form\": connector, children: [\n      single ? /* @__PURE__ */ u3(S, { children: [\n        /* @__PURE__ */ u3(\"label\", { class: \"visually-hidden\", for: inputId, children: credential.label }),\n        /* @__PURE__ */ u3(\n          \"input\",\n          {\n            id: inputId,\n            type: \"password\",\n            \"aria-label\": credential.label,\n            placeholder: credential.placeholder || \"Paste credential\",\n            autocomplete: \"new-password\",\n            autocapitalize: \"none\",\n            spellcheck: false,\n            value: values.value ?? \"\",\n            onInput: (event) => setValues({ value: event.currentTarget.value })\n          }\n        )\n      ] }) : /* @__PURE__ */ u3(\"div\", { class: \"credential-fields\", children: fields.map((field, index) => {\n        const id = `credential-input-${connector}-${index}`;\n        return /* @__PURE__ */ u3(\"div\", { class: \"credential-field\", children: [\n          /* @__PURE__ */ u3(\"label\", { for: id, children: field.label }),\n          /* @__PURE__ */ u3(\n            \"input\",\n            {\n              id,\n              type: field.inputType || \"password\",\n              placeholder: field.placeholder || field.label,\n              autocomplete: (field.inputType ?? \"password\") === \"password\" ? \"new-password\" : \"off\",\n              autocapitalize: \"none\",\n              spellcheck: false,\n              value: values[field.name] ?? \"\",\n              onInput: (event) => setValues({\n                ...values,\n                [field.name]: event.currentTarget.value\n              })\n            }\n          )\n        ] }, field.name);\n      }) }),\n      /* @__PURE__ */ u3(\"button\", { class: \"linklike\", type: \"button\", disabled: busy, onClick: submit, children: busy ? \"Saving…\" : \"Save\" }),\n      /* @__PURE__ */ u3(\n        \"button\",\n        {\n          class: \"linklike\",\n          type: \"button\",\n          disabled: busy,\n          onClick: () => editCredential(null),\n          children: \"Cancel\"\n        }\n      )\n    ] });\n  }\n  function CredentialCard({\n    connector,\n    credential,\n    editing,\n    busy\n  }) {\n    const configured = Boolean(credential.configured);\n    const removable = configured || Boolean(credential.removable);\n    return /* @__PURE__ */ u3(\n      \"section\",\n      {\n        class: \"credential-card\",\n        id: `credential-${connector.id}`,\n        \"aria-labelledby\": `credential-title-${connector.id}`,\n        children: [\n          /* @__PURE__ */ u3(\"div\", { class: \"credential-head\", children: [\n            /* @__PURE__ */ u3(\"div\", { class: \"connector-title\", children: [\n              /* @__PURE__ */ u3(\n                \"span\",\n                {\n                  class: `dot ${configured ? \"ok\" : \"auth_required\"}`,\n                  \"aria-hidden\": \"true\"\n                }\n              ),\n              /* @__PURE__ */ u3(\"h2\", { id: `credential-title-${connector.id}`, children: connector.title || connector.id })\n            ] }),\n            /* @__PURE__ */ u3(\"span\", { class: \"credential-state\", children: credentialStateLabel(credential) })\n          ] }),\n          /* @__PURE__ */ u3(\"p\", { class: \"mono\", children: [\n            connector.id,\n            \" · \",\n            credential.label\n          ] }),\n          credential.description ? /* @__PURE__ */ u3(\"p\", { class: \"credential-copy meta\", children: credential.description }) : null,\n          credential.fields?.length ? /* @__PURE__ */ u3(\"div\", { class: \"credential-field-summary\", children: credential.fields.map((field) => /* @__PURE__ */ u3(\"div\", { children: [\n            /* @__PURE__ */ u3(\"span\", { children: field.label }),\n            /* @__PURE__ */ u3(\"span\", { class: \"meta\", children: field.configured ? `configured · ••••${field.lastFour ?? \"\"}${field.updatedAt ? ` · updated ${formatDate(field.updatedAt)}` : \"\"}` : \"not configured\" })\n          ] }, field.name)) }) : null,\n          credential.error ? /* @__PURE__ */ u3(\"div\", { class: \"msg\", children: credential.error }) : null,\n          credential.notice ? /* @__PURE__ */ u3(\"p\", { class: \"credential-copy meta\", children: credential.notice }) : null,\n          /* @__PURE__ */ u3(\"div\", { class: \"credential-actions\", children: [\n            /* @__PURE__ */ u3(\n              \"button\",\n              {\n                class: \"linklike\",\n                type: \"button\",\n                disabled: busy,\n                onClick: () => editCredential(editing ? null : connector.id),\n                children: removable ? \"Replace\" : \"Add credential\"\n              }\n            ),\n            configured && credential.testable ? /* @__PURE__ */ u3(\n              \"button\",\n              {\n                class: \"linklike\",\n                type: \"button\",\n                disabled: busy,\n                onClick: () => void testCredential(connector.id),\n                children: busy ? \"Working…\" : \"Test\"\n              }\n            ) : null,\n            removable ? /* @__PURE__ */ u3(\n              \"button\",\n              {\n                class: \"linklike danger\",\n                type: \"button\",\n                disabled: busy,\n                onClick: () => void removeCredential(connector.id),\n                children: \"Remove\"\n              }\n            ) : null\n          ] }),\n          editing ? /* @__PURE__ */ u3(\n            CredentialForm,\n            {\n              connector: connector.id,\n              credential,\n              busy\n            }\n          ) : null\n        ]\n      }\n    );\n  }\n  function CredentialsPage({ state: state2 }) {\n    const data = state2.data;\n    const available = data?.credentialManagement === \"available\";\n    const slots = (data?.connectors ?? []).filter(\n      (connector) => Boolean(connector.credential)\n    );\n    return /* @__PURE__ */ u3(\"section\", { id: \"credentialsView\", children: /* @__PURE__ */ u3(\"div\", { class: \"lead pgrid\", children: [\n      /* @__PURE__ */ u3(\"h1\", { id: \"credentialsHeading\", class: \"pcap\", tabIndex: -1, children: \"Credentials\" }),\n      /* @__PURE__ */ u3(\"div\", { class: \"pbody\", children: [\n        /* @__PURE__ */ u3(\"p\", { class: \"activity-copy\", children: \"Rotate operator-managed connector credentials. Stored values are never returned or displayed.\" }),\n        /* @__PURE__ */ u3(NoticeLine, { id: \"credentialNotice\", notice: state2.credentialNotice }),\n        !available ? /* @__PURE__ */ u3(Unavailable, { children: credentialUnavailableCopy(data?.credentialManagement) }) : /* @__PURE__ */ u3(\n          \"div\",\n          {\n            id: \"credentialList\",\n            class: \"credential-ledger\",\n            \"aria-busy\": state2.credentialBusy ? \"true\" : \"false\",\n            children: slots.length === 0 ? /* @__PURE__ */ u3(Empty, { children: \"No connector in this deployment declares a credential slot yet.\" }) : slots.map((connector) => /* @__PURE__ */ u3(\n              CredentialCard,\n              {\n                connector,\n                credential: connector.credential,\n                editing: state2.credentialEditing === connector.id,\n                busy: state2.credentialBusy === connector.id\n              },\n              connector.id\n            ))\n          }\n        )\n      ] })\n    ] }) });\n  }\n\n  // src/operator-ui/app/tokens.tsx\n  function CreateForm({ busy }) {\n    const [name, setName] = d2(\"\");\n    return /* @__PURE__ */ u3(\n      \"form\",\n      {\n        id: \"tokenCreateForm\",\n        class: \"token-create\",\n        onSubmit: (event) => {\n          event.preventDefault();\n          void createAccessToken(name.trim()).then((created) => {\n            if (created) setName(\"\");\n          });\n        },\n        children: [\n          /* @__PURE__ */ u3(\"label\", { for: \"tokenName\", children: \"Client name\" }),\n          /* @__PURE__ */ u3(\"div\", { class: \"row\", children: [\n            /* @__PURE__ */ u3(\n              \"input\",\n              {\n                id: \"tokenName\",\n                type: \"text\",\n                maxLength: 80,\n                placeholder: \"Claude desktop, ChatGPT production…\",\n                autocomplete: \"off\",\n                value: name,\n                onInput: (event) => setName(event.currentTarget.value)\n              }\n            ),\n            /* @__PURE__ */ u3(\"button\", { id: \"createToken\", class: \"linklike\", type: \"submit\", disabled: busy, children: busy ? \"Creating…\" : \"Create token\" })\n          ] })\n        ]\n      }\n    );\n  }\n  function Reveal({ token }) {\n    return /* @__PURE__ */ u3(\n      \"section\",\n      {\n        id: \"tokenReveal\",\n        class: \"token-reveal\",\n        \"aria-labelledby\": \"tokenRevealHeading\",\n        children: [\n          /* @__PURE__ */ u3(\"div\", { class: \"token-reveal-head\", children: [\n            /* @__PURE__ */ u3(\"h2\", { id: \"tokenRevealHeading\", tabIndex: -1, children: \"Copy this token now\" }),\n            /* @__PURE__ */ u3(\"span\", { class: \"cap\", children: \"Shown once\" })\n          ] }),\n          /* @__PURE__ */ u3(\"p\", { class: \"meta\", children: \"Store it in the MCP client before leaving this page. It cannot be displayed again.\" }),\n          /* @__PURE__ */ u3(\"div\", { class: \"endpoint-row token-secret\", children: [\n            /* @__PURE__ */ u3(\"code\", { id: \"createdToken\", class: \"mono\", children: token }),\n            /* @__PURE__ */ u3(CopyButton, { value: token, label: \"Copy token\" })\n          ] }),\n          /* @__PURE__ */ u3(\"button\", { class: \"linklike\", type: \"button\", onClick: dismissCreatedToken, children: \"I stored it\" })\n        ]\n      }\n    );\n  }\n  function TokenCard({\n    token,\n    renaming,\n    busy\n  }) {\n    const [name, setName] = d2(token.name);\n    const revoked = Boolean(token.revokedAt);\n    return /* @__PURE__ */ u3(\n      \"section\",\n      {\n        class: revoked ? \"token-card revoked\" : \"token-card\",\n        \"aria-labelledby\": `access-token-${token.id}`,\n        children: [\n          /* @__PURE__ */ u3(\"div\", { class: \"token-card-head\", children: [\n            /* @__PURE__ */ u3(\"div\", { children: [\n              /* @__PURE__ */ u3(\"h2\", { id: `access-token-${token.id}`, children: token.name }),\n              /* @__PURE__ */ u3(\"p\", { class: \"mono\", children: [\n                token.tokenPrefix,\n                \"…\"\n              ] })\n            ] }),\n            /* @__PURE__ */ u3(\"div\", { class: \"cap\", children: revoked ? `Revoked ${formatDate(token.revokedAt)}` : `Created ${formatDate(token.createdAt)}` })\n          ] }),\n          /* @__PURE__ */ u3(\"div\", { class: \"credential-actions\", children: [\n            /* @__PURE__ */ u3(\n              \"button\",\n              {\n                class: \"linklike\",\n                type: \"button\",\n                disabled: busy,\n                onClick: () => {\n                  setName(token.name);\n                  renameAccessToken(renaming ? null : token.id);\n                },\n                children: \"Rename\"\n              }\n            ),\n            revoked ? null : /* @__PURE__ */ u3(\n              \"button\",\n              {\n                class: \"linklike danger\",\n                type: \"button\",\n                disabled: busy,\n                onClick: () => void revokeAccessToken(token.id),\n                children: \"Revoke\"\n              }\n            )\n          ] }),\n          renaming ? /* @__PURE__ */ u3(\n            \"form\",\n            {\n              class: \"credential-form\",\n              onSubmit: (event) => {\n                event.preventDefault();\n                const next = name.trim();\n                if (next) void saveAccessTokenName(token.id, next);\n              },\n              children: [\n                /* @__PURE__ */ u3(\"label\", { class: \"visually-hidden\", for: `token-name-${token.id}`, children: \"Token name\" }),\n                /* @__PURE__ */ u3(\n                  \"input\",\n                  {\n                    id: `token-name-${token.id}`,\n                    type: \"text\",\n                    maxLength: 80,\n                    autocomplete: \"off\",\n                    value: name,\n                    onInput: (event) => setName(event.currentTarget.value)\n                  }\n                ),\n                /* @__PURE__ */ u3(\"button\", { class: \"linklike\", type: \"submit\", disabled: busy, children: \"Save name\" }),\n                /* @__PURE__ */ u3(\n                  \"button\",\n                  {\n                    class: \"linklike\",\n                    type: \"button\",\n                    disabled: busy,\n                    onClick: () => renameAccessToken(null),\n                    children: \"Cancel\"\n                  }\n                )\n              ]\n            }\n          ) : null\n        ]\n      }\n    );\n  }\n  function TokensPage({ state: state2 }) {\n    const available = state2.data?.accessTokenManagement === \"available\";\n    return /* @__PURE__ */ u3(\"section\", { id: \"tokensView\", children: /* @__PURE__ */ u3(\"div\", { class: \"lead pgrid\", children: [\n      /* @__PURE__ */ u3(\"h1\", { id: \"tokensHeading\", class: \"pcap\", tabIndex: -1, children: \"Access tokens\" }),\n      /* @__PURE__ */ u3(\"div\", { class: \"pbody\", children: [\n        /* @__PURE__ */ u3(\"p\", { class: \"activity-copy\", children: \"Create named Bearer tokens for MCP clients. Each secret is shown once; revoke it when that client should lose access.\" }),\n        /* @__PURE__ */ u3(NoticeLine, { id: \"tokenNotice\", notice: state2.tokenNotice }),\n        !available ? /* @__PURE__ */ u3(Unavailable, { children: accessTokenUnavailableCopy(state2.data?.accessTokenManagement) }) : /* @__PURE__ */ u3(\"div\", { id: \"tokenAvailable\", children: [\n          state2.createdToken ? /* @__PURE__ */ u3(Reveal, { token: state2.createdToken }) : /* @__PURE__ */ u3(CreateForm, { busy: state2.tokenBusy }),\n          /* @__PURE__ */ u3(\n            \"div\",\n            {\n              id: \"tokenList\",\n              class: \"token-ledger\",\n              \"aria-busy\": state2.tokenPhase === \"loading\" ? \"true\" : \"false\",\n              children: state2.tokenPhase === \"loading\" ? /* @__PURE__ */ u3(Empty, { children: \"Loading access tokens…\" }) : state2.tokenPhase === \"error\" ? /* @__PURE__ */ u3(\"p\", { class: \"empty\", children: /* @__PURE__ */ u3(\n                \"button\",\n                {\n                  class: \"linklike\",\n                  type: \"button\",\n                  onClick: () => void loadAccessTokens(),\n                  children: \"Try loading access tokens again\"\n                }\n              ) }) : state2.tokens.length === 0 ? /* @__PURE__ */ u3(Empty, { children: \"No access tokens yet. Name the first MCP client above.\" }) : state2.tokens.map((token) => /* @__PURE__ */ u3(\n                TokenCard,\n                {\n                  token,\n                  renaming: state2.tokenRenaming === token.id,\n                  busy: state2.tokenBusy\n                },\n                token.id\n              ))\n            }\n          )\n        ] })\n      ] })\n    ] }) });\n  }\n\n  // src/operator-ui/app/main.tsx\n  function useOperatorState() {\n    const [, bump] = y2((count) => count + 1, 0);\n    const snapshot = getState();\n    _2(() => {\n      const unsubscribe = subscribe(() => bump(void 0));\n      if (getState() !== snapshot) bump(void 0);\n      return unsubscribe;\n    }, []);\n    return snapshot;\n  }\n  function visiblePages(state2) {\n    return OPERATOR_PAGES.filter((page) => {\n      if (page === \"credentials\") {\n        return state2.data?.credentialManagement === \"available\";\n      }\n      if (page === \"tokens\") {\n        return state2.data?.accessTokenManagement === \"available\";\n      }\n      if (page === \"activity\") return Boolean(state2.data?.activityEnabled);\n      return true;\n    });\n  }\n  function OperatorNav() {\n    const state2 = useOperatorState();\n    if (state2.session !== \"ready\") return null;\n    return /* @__PURE__ */ u3(\"div\", { class: \"mast-actions\", children: [\n      /* @__PURE__ */ u3(\"nav\", { class: \"page-nav\", \"aria-label\": \"Operator pages\", children: visiblePages(state2).map((page) => /* @__PURE__ */ u3(\n        PageLink,\n        {\n          page,\n          class: \"navlink\",\n          current: state2.page === page,\n          children: PAGE_META[page].label\n        },\n        page\n      )) }),\n      /* @__PURE__ */ u3(\"div\", { class: \"session-actions\", \"aria-label\": \"Session actions\", children: auth.kind === \"clerk\" ? /* @__PURE__ */ u3(\"button\", { class: \"navlink\", type: \"button\", onClick: signOut, children: \"Sign out\" }) : /* @__PURE__ */ u3(\"button\", { class: \"navlink\", type: \"button\", onClick: forgetBearer, children: \"Change token\" }) })\n    ] });\n  }\n  function Gate({ state: state2 }) {\n    const [token, setToken] = d2(\"\");\n    const signedIn = auth.kind === \"clerk\" && Boolean(window.Clerk?.user);\n    const loading = state2.session === \"loading\";\n    return /* @__PURE__ */ u3(\"section\", { id: \"gate\", children: /* @__PURE__ */ u3(\"div\", { class: \"lead pgrid\", children: [\n      /* @__PURE__ */ u3(\"h1\", { id: \"gateHeading\", class: \"pcap\", tabIndex: -1, children: PAGE_META[state2.page].label }),\n      /* @__PURE__ */ u3(\"div\", { class: \"pbody lead-copy\", children: [\n        /* @__PURE__ */ u3(\"p\", { children: productDescription }),\n        /* @__PURE__ */ u3(\"p\", { id: \"gateCopy\", class: \"meta\", children: loading ? \"Checking your session…\" : gateCopy(auth.kind, signedIn) }),\n        loading ? null : auth.kind === \"clerk\" ? /* @__PURE__ */ u3(\"div\", { id: \"clerkGate\", class: \"actions gate-actions\", children: signedIn ? /* @__PURE__ */ u3(\"button\", { class: \"linklike\", type: \"button\", onClick: signOut, children: \"Sign out\" }) : /* @__PURE__ */ u3(\"button\", { id: \"signin\", class: \"linklike\", type: \"button\", onClick: signIn, children: \"Team sign in\" }) }) : /* @__PURE__ */ u3(\n          \"form\",\n          {\n            id: \"tokenGate\",\n            class: \"row gate-actions\",\n            onSubmit: (event) => {\n              event.preventDefault();\n              const value = token.trim();\n              if (!value) return;\n              setToken(\"\");\n              signInWithBearer(value);\n            },\n            children: [\n              /* @__PURE__ */ u3(\n                \"input\",\n                {\n                  id: \"token\",\n                  type: \"password\",\n                  placeholder: \"Bearer token\",\n                  autocomplete: \"off\",\n                  \"aria-label\": \"Bearer token\",\n                  value: token,\n                  onInput: (event) => setToken(event.currentTarget.value)\n                }\n              ),\n              /* @__PURE__ */ u3(\"button\", { id: \"save\", class: \"linklike\", type: \"submit\", children: \"Open operator pages\" })\n            ]\n          }\n        ),\n        /* @__PURE__ */ u3(NoticeLine, { id: \"err\", notice: state2.gate, className: \"\" })\n      ] })\n    ] }) });\n  }\n  function CurrentPage({ state: state2 }) {\n    if (state2.page === \"credentials\") return /* @__PURE__ */ u3(CredentialsPage, { state: state2 });\n    if (state2.page === \"tokens\") return /* @__PURE__ */ u3(TokensPage, { state: state2 });\n    if (state2.page === \"activity\") return /* @__PURE__ */ u3(ActivityPage, { state: state2 });\n    return /* @__PURE__ */ u3(ConnectionsPage, { state: state2 });\n  }\n  function OperatorApp() {\n    const state2 = useOperatorState();\n    const ready = state2.session === \"ready\";\n    h2(() => {\n      document.title = `${PAGE_META[state2.page].label} — ${titleSuffix}`;\n    }, [state2.page]);\n    h2(() => {\n      if (!ready) return;\n      if (state2.page === \"tokens\" && state2.data?.accessTokenManagement === \"available\" && state2.tokenPhase === \"idle\") {\n        void loadAccessTokens();\n      }\n      if (state2.page === \"activity\" && state2.data?.activityEnabled && state2.activityPhase === \"idle\") {\n        void loadActivity(true);\n      }\n    });\n    h2(() => {\n      if (!state2.pendingFocus) return;\n      document.getElementById(state2.pendingFocus)?.focus();\n      focusHandled();\n    }, [state2.pendingFocus]);\n    return ready ? /* @__PURE__ */ u3(\"div\", { id: \"app\", children: /* @__PURE__ */ u3(CurrentPage, { state: state2 }) }) : /* @__PURE__ */ u3(Gate, { state: state2 });\n  }\n  function mount(id, view) {\n    const host = document.getElementById(id);\n    if (!host) return;\n    host.textContent = \"\";\n    R(view, host);\n  }\n  mount(\"operatorNav\", /* @__PURE__ */ u3(OperatorNav, {}));\n  mount(\"operatorContent\", /* @__PURE__ */ u3(OperatorApp, {}));\n  void boot();\n})();\n";

package/dist/operator-ui/model.d.ts

@@ -1,3 +1,4 @@
+import type { CatalogDriftReport } from "../types.js";
 export interface UiTool {
     name: string;
     address: string;
@@ -44,6 +45,15 @@ export interface UiConnector {
     /** This connector exposes operator-managed downstream OAuth lifecycle hooks. */
     oauth?: boolean;
     credential?: UiCredential;
+    /**
+     * Drift the last catalog refresh saw *in this runtime*
+     * ([#343](https://github.com/zackbart/connecta/issues/343)). Four counts and
+     * a timestamp: no tool name, no schema, no payload ever rides this field.
+     * Absent means this process has observed no refresh — not that nothing
+     * drifted — which is why the UI renders that as its own state rather than as
+     * a clean one.
+     */
+    catalogDrift?: CatalogDriftReport;
 }
 export type CredentialManagementCapability = "available" | "requires_clerk" | "vault_not_configured" | "no_slots";
 export type AccessTokenManagementCapability = "available" | "requires_clerk" | "not_configured";
@@ -72,4 +82,3 @@ export interface FilteredUiConnector {
  */
 export declare function filterUiConnectors(connectors: UiConnector[], query: string): FilteredUiConnector[];
 export {};
-//# sourceMappingURL=model.d.ts.map

package/dist/operator-ui/model.js

@@ -25,4 +25,3 @@ export function filterUiConnectors(connectors, query) {
     }
     return filtered;
 }
-//# sourceMappingURL=model.js.map

package/dist/operator-ui/view.d.ts

@@ -0,0 +1,167 @@
+import type { CatalogDriftReport } from "../types.js";
+import type { AccessTokenManagementCapability, CredentialManagementCapability, UiData } from "./model.js";
+/**
+ * Everything the operator app knows, and every rule for changing it, with no
+ * DOM in sight. The components render this and nothing else, so the questions
+ * that matter — what a page shows while it loads, what an identity change
+ * erases, whether a value may become an href — are answered by functions a test
+ * can call directly rather than by reading rendered markup back out of a
+ * browser.
+ */
+export type OperatorPage = "connections" | "credentials" | "tokens" | "activity";
+export declare const OPERATOR_PAGES: readonly OperatorPage[];
+export declare const PAGE_META: Readonly<Record<OperatorPage, {
+    path: string;
+    label: string;
+}>>;
+export declare function pageForPath(path: string): OperatorPage;
+export interface UiActivityActor {
+    kind?: string;
+    id?: string;
+    namespace?: string;
+    label?: string;
+}
+export interface UiActivityEvent {
+    occurredAt: string;
+    actor?: UiActivityActor;
+    connectorId: string;
+    toolName: string;
+    address: string;
+    source: string;
+    outcome: string;
+    durationMs: number;
+    attempts: number;
+    errorCode?: string;
+    friction?: string;
+}
+export interface UiAccessToken {
+    id: string;
+    name: string;
+    tokenPrefix: string;
+    createdAt: string;
+    revokedAt?: string;
+}
+/** A message with the tone that decides its live region: status or alert. */
+export interface Notice {
+    message: string;
+    tone: "info" | "error";
+}
+export declare function info(message: string): Notice;
+export declare function failure(message: string): Notice;
+/**
+ * A remote collection's four states, named once so every page spells them the
+ * same way. `idle` is "nobody has asked yet" and is what makes a re-entered
+ * page fetch again after an identity change.
+ */
+type LoadPhase = "idle" | "loading" | "ready" | "error";
+export interface OperatorState {
+    page: OperatorPage;
+    /**
+     * Bumped by every identity change. Async work captures it before awaiting and
+     * throws its result away if the operator is no longer the one who asked —
+     * the fence that keeps one identity's data off another identity's screen.
+     */
+    generation: number;
+    /** `loading` until the first /ui/data answer decides gated or ready. */
+    session: "loading" | "gated" | "ready";
+    gate: Notice | null;
+    /** True while a signed-in operator's /ui/data is in flight. */
+    refreshing: boolean;
+    /**
+     * Element id the next render should focus. A rebuilt page has no stable node
+     * to hand focus to from an event handler, so the request travels through
+     * state and the shell spends it once the new markup exists.
+     */
+    pendingFocus: string | null;
+    data: UiData | null;
+    connectorFilter: string;
+    oauthNotice: Notice | null;
+    /** Connector id whose OAuth mutation is in flight. */
+    oauthBusy: string | null;
+    credentialNotice: Notice | null;
+    /** Connector id whose credential form is open. */
+    credentialEditing: string | null;
+    /** Connector id whose credential mutation is in flight. */
+    credentialBusy: string | null;
+    tokenPhase: LoadPhase;
+    tokenNotice: Notice | null;
+    tokens: UiAccessToken[];
+    /** Shown once, never re-fetchable, and cleared by anything that navigates. */
+    createdToken: string | null;
+    /** Access-token id whose rename form is open. */
+    tokenRenaming: string | null;
+    tokenBusy: boolean;
+    activityPhase: LoadPhase;
+    activityNotice: Notice | null;
+    activityEvents: UiActivityEvent[];
+    activityCursor: string | null;
+    activitySearch: string;
+}
+export declare function initialState(page: OperatorPage): OperatorState;
+/**
+ * Drop to the gate and forget the previous operator. Bumping the generation is
+ * what makes the drop stick: work already in flight for the old identity
+ * resolves into a state that no longer accepts it.
+ */
+export declare function resetIdentity(state: OperatorState, gate?: Notice | null): OperatorState;
+/**
+ * Leaving a page closes what should not survive it: a one-time secret, a half
+ * typed credential, and the notices that answered the page just left.
+ */
+export declare function withPage(state: OperatorState, page: OperatorPage): OperatorState;
+export declare function credentialUnavailableCopy(capability?: CredentialManagementCapability): string;
+export declare function accessTokenUnavailableCopy(capability?: AccessTokenManagementCapability): string;
+export declare function connectorStatusLabel(status: string): string;
+export declare function toolCountLabel(count: number): string;
+/**
+ * Hosted-provider catalog drift, as an operator reads it
+ * ([#343](https://github.com/zackbart/connecta/issues/343)).
+ *
+ * - `unavailable` — no refresh has been observed in this runtime, so there is
+ *   nothing to report. Deliberately not `clean`: "we have not looked" and "we
+ *   looked and it matches" are different answers, and only one of them is a
+ *   reason to stop worrying.
+ * - `clean` — a refresh happened and every category counted zero.
+ * - `warning` — a refresh happened and at least one category did not.
+ */
+export type DriftState = "clean" | "warning" | "unavailable";
+export declare function driftTotal(drift?: CatalogDriftReport): number;
+export declare function driftState(drift?: CatalogDriftReport): DriftState;
+/** Every category with its count, so a clean report still shows its zeros. */
+export declare function driftCounts(drift?: CatalogDriftReport): Array<{
+    key: string;
+    label: string;
+    count: number;
+}>;
+/** One line naming the state and when it was observed. Never what drifted. */
+export declare function driftSummary(drift?: CatalogDriftReport): string;
+/**
+ * Only http/https may become a clickable href — the browser half of the gate
+ * `src/ui.ts` applies before an authorizationUrl is ever serialized. A hostile
+ * downstream that gets a `javascript:` URL past one of them still meets the
+ * other, and the caller renders inert text instead of a link.
+ */
+export declare function safeHttpHref(url: string | undefined): string | null;
+/** Locale timestamp, or "" for anything that is not a readable date. */
+export declare function formatDate(value?: string): string;
+export declare function actorLabel(actor?: UiActivityActor): string;
+/**
+ * The stable id behind a friendly label, shown only when a label or namespace
+ * could otherwise make two different people look like one.
+ */
+export declare function actorStableId(actor?: UiActivityActor): string | null;
+export declare function filterActivity(events: UiActivityEvent[], query: string): UiActivityEvent[];
+/** Counts only. What the deployment ran, never what it sent or received. */
+export declare function activitySummary(events: UiActivityEvent[]): string;
+export declare function activityOutcomeClass(outcome: string): string;
+/** The one-line detail under an address: source, retries, and friction. */
+export declare function activityDetail(event: UiActivityEvent): string;
+export declare function credentialStateLabel(credential: {
+    configured: boolean;
+    fields?: unknown[];
+    lastFour?: string;
+    updatedAt?: string;
+}): string;
+/** Gate copy for the two inbound-auth shapes, so the sign-in state is never a blank page. */
+export declare function gateCopy(kind: string, signedIn: boolean): string;
+export {};