@zackbart/connecta 0.15.1 → 0.16.1

package/src/operator-ui/generated.ts

@@ -1,4 +0,0 @@
-// 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";

package/src/operator-ui/model.ts

@@ -1,111 +0,0 @@
-export interface UiTool {
-  name: string;
-  address: string;
-  description?: string;
-}
-
-interface UiCredentialField {
-  name: string;
-  label: string;
-  description?: string;
-  placeholder?: string;
-  inputType: "email" | "password" | "text";
-  configured: boolean;
-  lastFour?: string;
-  updatedAt?: string;
-}
-
-interface UiCredential {
-  label: string;
-  description?: string;
-  placeholder?: string;
-  fields?: UiCredentialField[];
-  configured: boolean;
-  /** A stored value exists and may be deleted even if it cannot be decrypted. */
-  removable?: boolean;
-  lastFour?: string;
-  updatedAt?: string;
-  testable: boolean;
-  error?: string;
-  /**
-   * Something true and non-blocking about a working credential — today, that
-   * the vault still holds fields the connector has stopped declaring.
-   * Distinct from `error`, which means the credential cannot be used.
-   */
-  notice?: string;
-}
-
-export interface UiConnector {
-  id: string;
-  title?: string;
-  description?: string;
-  status: "ok" | "auth_required" | "error";
-  message?: string;
-  authorizationUrl?: string;
-  toolCount: number;
-  tools: UiTool[];
-  /** This connector exposes operator-managed downstream OAuth lifecycle hooks. */
-  oauth?: boolean;
-  credential?: UiCredential;
-}
-
-export type CredentialManagementCapability =
-  | "available"
-  | "requires_clerk"
-  | "vault_not_configured"
-  | "no_slots";
-
-export type AccessTokenManagementCapability =
-  | "available"
-  | "requires_clerk"
-  | "not_configured";
-
-export interface UiData {
-  serverInfo: { name: string; version: string };
-  /** Version of the installed @zackbart/connecta package. */
-  connectaVersion: string;
-  connectors: UiConnector[];
-  activityEnabled: boolean;
-  credentialManagement: CredentialManagementCapability;
-  accessTokenManagement: AccessTokenManagementCapability;
-  /** True only for an eligible Clerk operator. */
-  oauthManagement: boolean;
-}
-
-export interface FilteredUiConnector {
-  connector: UiConnector;
-  tools: UiTool[];
-}
-
-/**
- * Filter by connector identity/description or tool name/description. A
- * connector-level match stays visible even when it currently exposes no tools
- * (for example while authorization is required).
- */
-export function filterUiConnectors(
-  connectors: UiConnector[],
-  query: string,
-): FilteredUiConnector[] {
-  const q = query.trim().toLowerCase();
-  const filtered: FilteredUiConnector[] = [];
-  for (const connector of connectors) {
-    const connectorText = [
-      connector.id,
-      connector.title,
-      connector.description,
-      connector.status,
-    ]
-      .join(" ")
-      .toLowerCase();
-    const connectorMatches = Boolean(q && connectorText.includes(q));
-    const tools = connector.tools.filter(
-      (tool) =>
-        !q ||
-        connectorMatches ||
-        `${tool.name} ${tool.description ?? ""}`.toLowerCase().includes(q),
-    );
-    if (q && tools.length === 0 && !connectorMatches) continue;
-    filtered.push({ connector, tools });
-  }
-  return filtered;
-}