@zackbart/connecta 0.7.6 → 0.7.7

package/src/ui.ts

@@ -11,6 +11,7 @@ import {
 import type { Registry } from "./registry.js";
 import type { Toolkit } from "./toolkits.js";
 import type { ConnectaBranding, UiAuthConfig } from "./types.js";
+import { CONNECTA_VERSION } from "./version.js";
 
 /** Connecta's default monochrome "C" mark. */
 export const CONNECTA_FAVICON_SVG = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
@@ -256,6 +257,8 @@ export interface UiConnector {
   authorizationUrl?: string;
   toolCount: number;
   tools: UiTool[];
+  /** This connector exposes operator-managed downstream OAuth lifecycle hooks. */
+  oauth?: boolean;
   /**
    * Verdict of the last proactive credential liveness check (issue #24), for the
    * connectors that hold a credential connecta stores. Shown beside the live
@@ -299,11 +302,15 @@ export interface UiConnector {
 
 export interface UiData {
   serverInfo: { name: string; version: string };
+  /** Version of the installed @zackbart/connecta package. */
+  connectaVersion: string;
   connectors: UiConnector[];
   /** Read-only projection of the validated deployment config. */
   toolkits: UiToolkit[];
   activityEnabled: boolean;
   credentialManagement: CredentialManagementCapability;
+  /** True only for an eligible, unrestricted Clerk operator. */
+  oauthManagement: boolean;
 }
 
 export interface UiToolkit {
@@ -408,6 +415,7 @@ export async function buildUiData(
     : "requires_clerk",
   toolkits?: ReadonlyMap<string, Toolkit>,
   defer?: DeferredWork,
+  oauthManagement = false,
 ): Promise<UiData> {
   const requestScope = {};
   const connectorSet = registry.listConnectors();
@@ -533,6 +541,7 @@ export async function buildUiData(
           : {}),
         toolCount: tools.length,
         tools,
+        ...(c.disconnectAuth && c.startAuth ? { oauth: true } : {}),
         ...(credentialCheck
           ? {
               credentialCheck: {
@@ -581,10 +590,12 @@ export async function buildUiData(
   );
   return {
     serverInfo,
+    connectaVersion: CONNECTA_VERSION,
     connectors,
     toolkits: toolkitData,
     activityEnabled,
     credentialManagement,
+    oauthManagement,
   };
 }
 
@@ -860,6 +871,8 @@ ${clerkScript}
   #notice { margin-bottom: .75rem; }
   #notice:empty { display: none; }
   #notice:not(:empty) { text-decoration: underline; }
+  #oauthNotice { margin-bottom: .75rem; }
+  #oauthNotice:empty { display: none; }
   .error-notice, .msg { text-decoration: underline; }
   .card,
   .credential-card,
@@ -1047,6 +1060,7 @@ ${clerkScript}
   .activity-time,
   .activity-actor,
   .activity-detail { color: var(--muted); font-size: .82rem; }
+  .activity-actor-id { color: var(--muted); margin-top: .1rem; }
   .activity-address { font-family: var(--mono); font-size: .78rem; overflow-wrap: anywhere; }
   .activity-outcome { font-size: .9em; }
   .activity-item.error .activity-outcome,
@@ -1148,6 +1162,7 @@ ${clerkScript}
           </div>
         </div>
         <p class="cap" id="serverInfo">${escapeHtmlAttr(brand.productName)} operator</p>
+        <p id="oauthNotice" class="meta" role="status" aria-live="polite" tabindex="-1"></p>
       </div>
     </div>
     <section class="section pgrid" aria-labelledby="connectorLedgerHeading">
@@ -1260,6 +1275,12 @@ function setNotice(message, isError) {
   $("credentialNotice").setAttribute("role", isError ? "alert" : "status");
 }
 
+function setOauthNotice(message, isError) {
+  $("oauthNotice").textContent = message || "";
+  $("oauthNotice").classList.toggle("error-notice", Boolean(isError));
+  $("oauthNotice").setAttribute("role", isError ? "alert" : "status");
+}
+
 async function sessionToken() {
   return AUTH.kind === "clerk"
     ? await Clerk.session?.getToken()
@@ -1287,6 +1308,7 @@ function clearIdentityState() {
   DATA = null;
   clearActivityState();
   $("list").innerHTML = "";
+  setOauthNotice("");
   $("toolkitList").innerHTML = "";
   $("filter").value = "";
   $("credentialList").innerHTML = "";
@@ -1431,14 +1453,16 @@ async function load() {
   $("app").classList.remove("hidden");
   $("appNav").classList.remove("hidden");
   const si = DATA.serverInfo || {};
-  $("serverInfo").textContent = (si.name || ${escapeScriptString(brand.productName)}) + " v" + (si.version || "?");
+  $("serverInfo").textContent = (si.name || ${escapeScriptString(brand.productName)}) + " v" + (DATA.connectaVersion || "?");
   updateCapabilities();
   activatePage(CURRENT_PAGE);
 }
 
 function actorLabel(actor) {
   if (!actor || !actor.kind) return "unknown";
-  return actor.id ? actor.kind + " · " + actor.id : actor.kind;
+  return actor.label
+    ? actor.kind + " · " + actor.label
+    : actor.id ? actor.kind + " · " + actor.id : actor.kind;
 }
 
 function renderActivity() {
@@ -1457,6 +1481,8 @@ function renderActivity() {
       event.errorCode,
       actor.kind,
       actor.id,
+      actor.namespace,
+      actor.label,
     ].some((value) => String(value || "").toLowerCase().includes(query));
   });
   const uniqueTools = new Set(ACTIVITY.map((event) => event.address)).size;
@@ -1480,13 +1506,23 @@ function renderActivity() {
       ? " · " + esc(event.attempts) + " attempts"
       : "";
     const errorCopy = event.errorCode ? " · " + esc(event.errorCode) : "";
+    const actorId = event.actor?.id
+      ? (event.actor.namespace
+        ? event.actor.namespace + " · " + event.actor.id
+        : event.actor.id)
+      : "";
+    const stableActorId = actorId &&
+      (event.actor?.label || event.actor?.namespace)
+      ? '<div class="activity-actor-id mono">' + esc(actorId) + "</div>"
+      : "";
     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></div></div>' +
+      '</time><div class="activity-actor">' + esc(actorLabel(event.actor)) +
+      "</div>" + stableActorId + "</div></div>" +
       '<div><div class="activity-address">' + esc(event.address) +
       '</div><div class="activity-detail">' + esc(event.source) + retryCopy +
       errorCopy + '</div></div>' +
@@ -1680,6 +1716,20 @@ function renderConnections() {
         : '<p class="connector-auth meta">Authorization URL: ' +
           esc(c.authorizationUrl) + "</p>";
     }
+    if (c.oauth && DATA.oauthManagement) {
+      const oauthName = c.title || c.id;
+      head += '<div class="credential-actions">';
+      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>';
+      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>";
+    }
     if (c.credential) {
       head += '<p class="connector-auth"><a class="linklike" href="/credentials" ' +
         'data-operator-page="credentials">Manage credential →</a></p>';
@@ -1709,6 +1759,77 @@ function renderConnections() {
   renderToolkits();
 }
 
+async function oauthRequest(connector, method, generation) {
+  const token = await sessionToken();
+  if (generation !== SESSION_GENERATION) {
+    throw new Error("The operator session changed.");
+  }
+  if (!token) throw new Error("Your Clerk session has expired.");
+  const res = await fetch("/ui/oauth/" + encodeURIComponent(connector), {
+    method,
+    headers: { Authorization: "Bearer " + token },
+  });
+  if (res.status === 204) return null;
+  let payload = {};
+  try { payload = await res.json(); } catch (e) {}
+  if (!res.ok) throw new Error(payload.error || "Request failed (" + res.status + ").");
+  return payload;
+}
+
+$("list").onclick = async (event) => {
+  const button = event.target.closest("[data-oauth-action]");
+  if (!button) return;
+  const connector = button.dataset.connector;
+  const action = button.dataset.oauthAction;
+  const generation = SESSION_GENERATION;
+  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.";
+  if (!window.confirm(question)) return;
+
+  setOauthNotice("");
+  const buttons = [...document.querySelectorAll(
+    '[data-connector="' + CSS.escape(connector) + '"]'
+  )];
+  buttons.forEach((item) => { item.disabled = true; });
+  try {
+    const result = await oauthRequest(
+      connector,
+      action === "disconnect" ? "DELETE" : "POST",
+      generation,
+    );
+    if (generation !== SESSION_GENERATION) return;
+    await load();
+    if (generation !== SESSION_GENERATION) return;
+    setOauthNotice(
+      action === "disconnect"
+        ? "OAuth disconnected. Restart authorization when you are ready to reconnect."
+        : result?.message ||
+          "Authorization restarted. Open the authorization link to reconnect.",
+    );
+    $("oauthNotice").focus();
+  } catch (e) {
+    if (generation !== SESSION_GENERATION) return;
+    // A reset can publish its durable epoch before best-effort physical cleanup
+    // reports failure. Refresh so stale tools/health/actions never survive that
+    // partial success, while preserving the original error for the operator.
+    try {
+      await load();
+    } catch (refreshError) {
+      // The mutation error is the actionable one; load() already owns its gate.
+    }
+    if (generation !== SESSION_GENERATION) return;
+    setOauthNotice(e.message || "OAuth action failed.", true);
+    $("oauthNotice").focus();
+  } finally {
+    if (generation === SESSION_GENERATION) {
+      buttons.forEach((item) => { item.disabled = false; });
+    }
+  }
+};
+
 function renderCredentials() {
   const list = $("credentialList");
   list.innerHTML = "";

package/src/version.ts

@@ -4,4 +4,4 @@
  * a bump that forgets this file fails the build rather than shipping a stale
  * version to `/health` and to downstream MCP handshakes.
  */
-export const CONNECTA_VERSION = "0.7.6";
+export const CONNECTA_VERSION = "0.7.7";