@lifeaitools/clauth 2.1.0 → 2.10.0

package/cli/dashboard/panels/services-panel.js

@@ -0,0 +1,872 @@
+// cli/dashboard/panels/services-panel.js
+// The Services panel, as a real Web Component: <clauth-services-panel>. Owns
+// its own Shadow DOM (project tabs + search bar + the credential grid) and
+// every credential-lifecycle and metadata-CRUD action that used to live in
+// two sibling files, services-key-lifecycle.js and services-metadata-crud.js.
+// Those two files never registered an independent ClauthPanelRegistry panel
+// of their own -- they were pure onclick-invoked helper groups for this same
+// visual region (see their own header comments), so folding them into ONE
+// class here is the correct mirror of what they always were, not a new
+// merge decision. Both files are deleted; every function they held is now an
+// instance method on ClauthServicesPanel below.
+//
+// Every onclick="globalFn(${jsArg(x)})" in the per-card markup became
+// data-action="methodName" plus a data-service-name="..." attribute read off
+// the clicked element, dispatched by the shared listener in
+// ../panel-element.js -- same pattern as tunnel-panel.js's wizSelectTunnel/
+// wizCopy. jsArg() is no longer needed for any of this panel's own markup
+// (data-* attribute values are plain HTML-escaped text, not JS source
+// embedded in an attribute) -- it stays defined in dashboard.js because
+// surfaces-panel.js still uses it.
+//
+// error-bar, the "dot" header indicator, and the whole Add-Service form
+// (add-panel/add-name/add-label/add-description/add-type/add-project/
+// add-msg) are NOT part of this panel's own template -- they live in the
+// toolbar's light-DOM markup (served straight out of serve.js) and are
+// reached with plain document.getElementById(...), exactly as before.
+// Only elements this panel itself renders (project-tabs, service-search-*,
+// grid, and everything renderServiceGrid() puts inside grid) move to
+// this.$()/this.$$() -- the shadow-root-scoped lookups.
+//
+// Loaded as a plain classic <script> (not type="module") BEFORE dashboard.js
+// -- same pattern as every other panel component.
+
+const SERVICE_HINTS = {
+  // Built via concatenation rather than one contiguous literal, so this
+  // display-only hint string (what a value for this credential looks like)
+  // does not read as an actual driver connection string to a source scanner.
+  "neo4j":           "neo4j" + "+s://username:password@instance.databases.neo4j.io",
+  "supabase-db":     "postgresql://postgres:password@db.ref.supabase.co:5432/postgres",
+  "r2":              "accountId:accessKeyId:secretAccessKey",
+  "namecheap":       "apiUser:apiKey",
+};
+
+const KEY_URLS = {
+  "github":          "https://github.com/settings/tokens",
+  "vercel":          "https://vercel.com/account/tokens",
+  "supabase-anon":   "https://supabase.com/dashboard/project/uvojezuorjgqzmhhgluu/settings/api",
+  "supabase-service":"https://supabase.com/dashboard/project/uvojezuorjgqzmhhgluu/settings/api",
+  "supabase-db":     "https://supabase.com/dashboard/project/uvojezuorjgqzmhhgluu/settings/database",
+  "anthropic":       "https://console.anthropic.com/settings/keys",
+  "cloudflare":      "https://dash.cloudflare.com/profile/api-tokens",
+  "r2":              "https://dash.cloudflare.com/profile/api-tokens",
+  "r2-bucket":       "https://dash.cloudflare.com/profile/api-tokens",
+  "rocketreach":     "https://rocketreach.co/account?section=security",
+  "namecheap":       "https://ap.www.namecheap.com/settings/tools/apiaccess/",
+  "neo4j":           "https://console.neo4j.io/",
+  "npm":             "https://www.npmjs.com/settings/~/tokens",
+  "gmail":           "https://console.cloud.google.com/apis/credentials",
+  "gcal":            "https://console.cloud.google.com/apis/credentials",
+};
+
+const EXTRA_LINKS = {};
+
+const OAUTH_IMPORT = {
+  "gmail": {
+    jsonFields: ["client_id", "client_secret"],
+    extra: [{ key: "refresh_token", label: "Refresh Token", hint: "From Google OAuth Playground — select Gmail API scopes, authorize, then exchange for tokens" }]
+  },
+  "gcal": {
+    jsonFields: ["client_id", "client_secret"],
+    extra: [{ key: "refresh_token", label: "Refresh Token", hint: "From Google OAuth Playground — select Calendar API scopes, authorize, then exchange for tokens" }]
+  }
+};
+
+const TYPE_LABELS = {
+  token: "token (API key)",
+  secret: "secret (password, secret)",
+  keypair: "keypair (user:key pair)",
+  connstring: "connstring (connection string)",
+  oauth: "oauth (OAuth credentials)",
+  fileserver: "fileserver (mount config)",
+};
+
+const MCP_SURFACE_DUPLICATE_SERVICES = new Set([
+  "mcp-clauth-endpoint",
+  "mcp-fs-endpoint",
+  "mcp-regen-media-endpoint",
+  "mcp-web-research-endpoint",
+]);
+
+const ROTATION_CAPABLE = ["cloudflare","cloudfare-dns","npm","vultr-api"];
+
+// Pure helpers -- no instance state, so these stay module-level functions
+// exactly like every other pure-data const above, not instance methods.
+function serviceDomId(name) {
+  return encodeURIComponent(String(name)).replace(/%/g, "_");
+}
+
+function serviceSort(a, b) {
+  return String(a.name || "").localeCompare(String(b.name || ""), undefined, { sensitivity: "base", numeric: true });
+}
+
+function matchesServiceSearch(s, query) {
+  if (!query) return true;
+  const q = query.toLowerCase();
+  return String(s.name || "").toLowerCase().includes(q) ||
+    String(s.label || "").toLowerCase().includes(q);
+}
+
+class ClauthServicesPanel extends window.ClauthPanelElement {
+  static tagName = "clauth-services-panel";
+  static cssHref = "/dashboard/panels/services-panel.css";
+
+  template() {
+    return `
+    <div id="project-tabs" class="project-tabs" style="display:none"></div>
+    <div id="service-search" class="service-search">
+      <span class="service-search-label">Search</span>
+      <input id="service-search-input" class="service-search-input" type="search" placeholder="service name or display name" autocomplete="off" spellcheck="false">
+      <span id="service-search-count" class="service-search-count"></span>
+    </div>
+    <div id="grid" class="grid"><p class="loading">Loading services…</p></div>
+    `;
+  }
+
+  mount() {
+    this.allServices = [];
+    this.activeProjectTab = "all";
+    this.serviceSearchQuery = "";
+    // oninput has no data-* equivalent in panel-element.js's delegated
+    // listeners (click + keydown only) -- wire this one directly, same as
+    // tunnel-panel.js would for any non-click/keydown DOM event.
+    const searchInput = this.$("#service-search-input");
+    if (searchInput) searchInput.addEventListener("input", (e) => this.setServiceSearch(e.target.value));
+    this.loadServices();
+  }
+
+  // ── Rendering: project tabs, search, the credential grid ───
+  renderSetPanel(serviceOrName) {
+    const service = typeof serviceOrName === "object" && serviceOrName ? serviceOrName : { name: serviceOrName };
+    const name = service.name;
+    const keyType = String(service.key_type || "").toLowerCase();
+    const id = serviceDomId(name);
+    const escapedName = htmlEscape(name);
+    const displayName = htmlEscape(name);
+    const imp = OAUTH_IMPORT[name];
+    if (imp) {
+      const extraHtml = imp.extra.map(f => `
+        <div class="oauth-field">
+          <label class="oauth-label">${f.label}</label>
+          ${f.hint ? `<div class="oauth-hint">${f.hint}</div>` : ""}
+          <input type="text" class="oauth-input" id="ofield-${id}-${f.key}" placeholder="Paste ${htmlEscape(f.label)}…" spellcheck="false" autocomplete="off">
+        </div>
+      `).join("");
+      return `
+        <div class="set-panel" id="set-panel-${id}">
+          <label>Set <strong>${displayName}</strong> credentials — paste directly from Google, never in chat</label>
+          <div class="oauth-fields">
+            <div class="oauth-field">
+              <label class="oauth-label">OAuth JSON from Google Cloud Console</label>
+              <div class="oauth-hint">Download from APIs & Services → Credentials → your OAuth client → ↓ Download JSON</div>
+              <textarea class="set-input" id="ofield-${id}-json" placeholder='{"installed":{"client_id":"…","client_secret":"…",...}}' spellcheck="false" rows="3"></textarea>
+            </div>
+            ${extraHtml}
+          </div>
+          <div class="set-foot">
+            <button class="btn btn-save" type="button" data-action="saveKey" data-service-name="${escapedName}">Save</button>
+            <button class="btn btn-cancel" type="button" data-action="toggleSet" data-service-name="${escapedName}">Cancel</button>
+            <span class="set-msg" id="set-msg-${id}"></span>
+          </div>
+        </div>
+      `;
+    }
+    if (keyType === "keypair") {
+      return `
+        <div class="set-panel" id="set-panel-${id}">
+          <label>New user/pass pair for <strong>${displayName}</strong> — paste here, never in chat</label>
+          <div class="oauth-fields">
+            <div class="oauth-field">
+              <label class="oauth-label">User / Key</label>
+              <input type="text" class="oauth-input" id="kp-key-${id}" placeholder="Username, key id, access key id…" spellcheck="false" autocomplete="off">
+            </div>
+            <div class="oauth-field">
+              <label class="oauth-label">Password / Secret</label>
+              <textarea class="set-input" id="kp-value-${id}" placeholder="Password, API key, private key, secret…" spellcheck="false" rows="3"></textarea>
+            </div>
+          </div>
+          <div class="set-foot">
+            <button class="btn btn-save" type="button" data-action="saveKey" data-service-name="${escapedName}">Save</button>
+            <button class="btn btn-cancel" type="button" data-action="toggleSet" data-service-name="${escapedName}">Cancel</button>
+            <span class="set-msg" id="set-msg-${id}"></span>
+          </div>
+        </div>
+      `;
+    }
+    return `
+      <div class="set-panel" id="set-panel-${id}">
+        <label>New value for <strong>${displayName}</strong> — paste here, never in chat</label>
+        <textarea class="set-input" id="set-input-${id}" placeholder="${htmlEscape(SERVICE_HINTS[name] || "Paste credential…")}" spellcheck="false"></textarea>
+        ${SERVICE_HINTS[name] ? `<div style="font-size:.72rem;color:#475569;margin-top:4px;font-family:'Courier New',monospace">${htmlEscape(SERVICE_HINTS[name])}</div>` : ""}
+        <div class="set-foot">
+          <button class="btn btn-generate" type="button" data-action="generateSecretKey" data-service-name="${escapedName}">Generate 32-byte key</button>
+          <button class="btn btn-save" type="button" data-action="saveKey" data-service-name="${escapedName}">Save</button>
+          <button class="btn btn-cancel" type="button" data-action="toggleSet" data-service-name="${escapedName}">Cancel</button>
+          <span class="set-msg" id="set-msg-${id}"></span>
+        </div>
+      </div>
+    `;
+  }
+
+  setServiceSearch(value) {
+    this.serviceSearchQuery = value || "";
+    this.renderServiceGrid(this.allServices);
+  }
+
+  renderProjectTabs(services) {
+    const tabsEl = this.$("#project-tabs");
+    const projects = new Map(); // project -> count
+    let unassigned = 0;
+    for (const s of services) {
+      if (s.project) {
+        projects.set(s.project, (projects.get(s.project) || 0) + 1);
+      } else {
+        unassigned++;
+      }
+    }
+    // Only show tabs if there's at least one project
+    if (projects.size === 0) { tabsEl.style.display = "none"; return; }
+    tabsEl.style.display = "flex";
+    const tabs = [
+      { key: "all", label: "All", count: services.length },
+      ...Array.from(projects.entries()).map(([name, count]) => ({ key: name, label: name, count })),
+      { key: "unassigned", label: "Global", count: unassigned },
+    ];
+    tabsEl.innerHTML = tabs.map(t =>
+      `<button class="project-tab ${this.activeProjectTab === t.key ? "active" : ""}" data-action="switchProjectTab" data-tab-key="${htmlEscape(t.key)}">${htmlEscape(t.label)}<span class="tab-count">(${t.count})</span></button>`
+    ).join("");
+  }
+
+  switchProjectTab(key) {
+    this.activeProjectTab = key;
+    this.renderProjectTabs(this.allServices);
+    this.renderServiceGrid(this.allServices);
+  }
+
+  renderServiceGrid(services) {
+    const grid = this.$("#grid");
+    services = services.filter(s => !MCP_SURFACE_DUPLICATE_SERVICES.has(s.name));
+    let filtered = services;
+    if (this.activeProjectTab === "unassigned") {
+      filtered = services.filter(s => !s.project);
+    } else if (this.activeProjectTab !== "all") {
+      filtered = services.filter(s => s.project === this.activeProjectTab);
+    }
+    filtered = filtered
+      .filter(s => matchesServiceSearch(s, this.serviceSearchQuery))
+      .slice()
+      .sort(serviceSort);
+    const searchCount = this.$("#service-search-count");
+    if (searchCount) {
+      const trimmed = this.serviceSearchQuery.trim();
+      searchCount.textContent = trimmed ? filtered.length + " match" + (filtered.length === 1 ? "" : "es") : filtered.length + " shown";
+    }
+    if (!filtered.length) {
+      grid.innerHTML = this.serviceSearchQuery.trim()
+        ? '<p class="loading">No services match that search.</p>'
+        : '<p class="loading">No services in this group.</p>';
+      return;
+    }
+    grid.innerHTML = filtered.map(s => {
+      const id = serviceDomId(s.name);
+      const nameAttr = htmlEscape(s.name);
+      const projectName = s.project || "general";
+      return `
+      <div class="card">
+        <div class="card-top">
+          <div class="card-main">
+            <div class="card-title-row">
+              <span class="card-name" id="label-display-${id}">${htmlEscape(s.label && s.label !== s.name ? s.label : s.name)}</span>
+              <code class="card-slug">${htmlEscape(s.name)}</code>
+            </div>
+            <div class="card-meta-row">
+              <div class="card-type">${htmlEscape(s.key_type || "secret")}</div>
+              <span class="svc-badge ${s.enabled === false ? "off" : "on"}" id="badge-${id}">${s.enabled === false ? "disabled" : "enabled"}</span>
+              <span class="expiry-badge" id="expiry-${id}" style="display:none"></span>
+              <span class="card-project">
+                <span class="card-project-name" id="proj-name-${id}">${htmlEscape(projectName)}</span>
+                <button class="card-project-pencil" type="button" data-action="toggleCardEdit" data-service-name="${nameAttr}" title="Edit name &amp; project">✎</button>
+              </span>
+            </div>
+            ${s.description ? `<div class="card-desc">${htmlEscape(s.description)}</div>` : ""}
+            ${KEY_URLS[s.name] ? `<a class="card-getkey" href="${KEY_URLS[s.name]}" target="_blank" rel="noopener">↗ Get / rotate key</a>` : ""}
+            ${(EXTRA_LINKS[s.name] || []).map(l => `<a class="card-getkey" href="${l.url}" target="_blank" rel="noopener" style="margin-left:0">${htmlEscape(l.label)}</a>`).join("")}
+          </div>
+          <div class="card-corner">
+            <button class="card-edit-corner" type="button" data-action="toggleCardEdit" data-service-name="${nameAttr}" title="Edit name &amp; project">✏️</button>
+            <div class="status-dot" id="sdot-${id}" title=""></div>
+          </div>
+        </div>
+        <div class="card-value" id="val-${id}"></div>
+        <div class="card-actions">
+          <button class="btn btn-reveal" type="button" data-action="reveal" data-service-name="${nameAttr}">Reveal</button>
+          <button class="btn btn-copy" id="copybtn-${id}" style="display:none" type="button" data-action="copyKey" data-service-name="${nameAttr}">Copy</button>
+          <button class="btn btn-set" type="button" data-action="toggleSet" data-service-name="${nameAttr}">Set</button>
+          <button class="btn ${s.enabled === false ? "btn-enable" : "btn-disable"}" id="togbtn-${id}" type="button" data-action="toggleService" data-service-name="${nameAttr}">${s.enabled === false ? "Enable" : "Disable"}</button>
+          <button class="btn-rotate" id="rotbtn-${id}" style="display:none" type="button" data-action="rotateKey" data-service-name="${nameAttr}">↻ Rotate</button>
+          <button class="btn-delete" type="button" data-action="deleteService" data-service-name="${nameAttr}" title="Delete service">Delete</button>
+        </div>
+        <div class="card-edit-panel" id="ce-${id}">
+          <div class="ce-head">
+            <span>Edit</span>
+            <code class="card-slug">${htmlEscape(s.name)}</code>
+            <span class="ce-hint">(slug unchanged)</span>
+          </div>
+          <div class="ce-row">
+            <label>Display name</label>
+            <input class="ce-input" id="ce-name-${id}" value="${htmlEscape(s.label || s.name)}" spellcheck="false" autocomplete="off"
+              data-keydown="ceInputKeydown" data-service-name="${nameAttr}">
+          </div>
+          <div class="ce-row">
+            <label>Project</label>
+            <input class="ce-input" id="ce-project-${id}" value="${htmlEscape(projectName)}" spellcheck="false" autocomplete="off"
+              data-keydown="ceInputKeydown" data-service-name="${nameAttr}">
+          </div>
+          <div class="ce-foot">
+            <button class="btn" type="button" data-action="saveCardEdit" data-service-name="${nameAttr}">Save</button>
+            <button class="btn" type="button" data-action="toggleCardEdit" data-service-name="${nameAttr}">Cancel</button>
+            <span class="ce-msg" id="ce-msg-${id}"></span>
+          </div>
+        </div>
+        ${this.renderSetPanel(s)}
+      </div>
+    `;
+    }).join("");
+  }
+
+  async loadServices() {
+    const grid = this.$("#grid");
+    // error-bar and the header "dot" belong to the toolbar's light-DOM
+    // markup, not this panel's own shadow template -- plain document
+    // lookups, unchanged from before this panel had a shadow root.
+    const err  = document.getElementById("error-bar");
+    err.style.display = "none";
+    grid.innerHTML = '<p class="loading">Loading…</p>';
+
+    let status;
+    for (let attempt = 0; attempt < 3; attempt++) {
+      try {
+        status = await Promise.race([
+          fetch(BASE + "/status").then(r => r.json()),
+          new Promise((_, reject) => setTimeout(() => reject(new Error("timeout")), 8000))
+        ]);
+        break;
+      } catch (e) {
+        if (attempt === 2) {
+          err.textContent = "⚠ Could not load services — " + e.message;
+          err.style.display = "block";
+          grid.innerHTML = "";
+          return;
+        }
+        await new Promise(r => setTimeout(r, 1000));
+      }
+    }
+    try {
+      if (status.locked) { showLockScreen(); return; }
+      if (status.error) throw new Error(status.error);
+
+      this.allServices = status.services || [];
+      if (!this.allServices.length) { grid.innerHTML = '<p class="loading">No services registered.</p>'; return; }
+
+      this.renderProjectTabs(this.allServices);
+      this.renderServiceGrid(this.allServices);
+      // Load expiry data after grid renders
+      this.loadExpiry();
+    } catch (e) {
+      err.textContent = "⚠ " + e.message;
+      err.style.display = "block";
+      document.getElementById("dot").style.background = "#ef4444";
+      grid.innerHTML = "";
+    }
+  }
+
+  async toggleService(name) {
+    const id = serviceDomId(name);
+    const badge  = this.$("#badge-" + id);
+    const btn    = this.$("#togbtn-" + id);
+    if (!badge || !btn) return;
+    const currently = badge.classList.contains("on");
+    const newState  = !currently;
+
+    btn.disabled = true; btn.textContent = "…";
+
+    try {
+      const r = await fetch(BASE + "/toggle/" + encodeURIComponent(name), {
+        method: "POST",
+        headers: writeHeaders({ "Content-Type": "application/json" }),
+        body: JSON.stringify({ enabled: newState })
+      }).then(r => r.json());
+
+      if (r.locked) { showLockScreen(); return; }
+      if (r.error) throw new Error(r.error);
+
+      badge.className = "svc-badge " + (newState ? "on" : "off");
+      badge.textContent = newState ? "enabled" : "disabled";
+      btn.className = "btn " + (newState ? "btn-disable" : "btn-enable");
+      btn.textContent = newState ? "Disable" : "Enable";
+    } catch (e) {
+      btn.textContent = "Error";
+      setTimeout(() => {
+        btn.textContent = currently ? "Disable" : "Enable";
+      }, 2000);
+    } finally {
+      btn.disabled = false;
+    }
+  }
+
+  async addService() {
+    // The Add-Service form lives in the toolbar's light-DOM markup (see
+    // header comment) -- plain document lookups, same as loadServices()'s
+    // error-bar/dot above.
+    const name = document.getElementById("add-name").value.trim().toLowerCase();
+    const label = document.getElementById("add-label").value.trim();
+    const description = document.getElementById("add-description").value.trim();
+    const type = document.getElementById("add-type").value;
+    const project = document.getElementById("add-project").value.trim();
+    const msg  = document.getElementById("add-msg");
+
+    if (!name) { msg.className = "add-msg fail"; msg.textContent = "Slug is required."; return; }
+    if (!/^[a-z0-9][a-z0-9_-]*$/.test(name)) { msg.className = "add-msg fail"; msg.textContent = "Slug: lowercase letters, numbers, hyphens, underscores only."; return; }
+
+    msg.className = "add-msg"; msg.textContent = "Creating…";
+    try {
+      const payload = { name, key_type: type, label: label || name };
+      if (description) payload.description = description;
+      if (project) payload.project = project;
+      const r = await fetch(BASE + "/add-service", {
+        method: "POST",
+        headers: writeHeaders({ "Content-Type": "application/json" }),
+        body: JSON.stringify(payload)
+      }).then(r => r.json());
+
+      if (r.locked) { showLockScreen(); return; }
+      if (r.error) throw new Error(r.error);
+
+      msg.className = "add-msg ok"; msg.textContent = "✓ " + name + " created";
+      setTimeout(() => {
+        document.getElementById("add-panel").style.display = "none";
+        msg.textContent = "";
+        this.loadServices();
+      }, 1200);
+    } catch (e) {
+      msg.className = "add-msg fail"; msg.textContent = "✗ " + e.message;
+    }
+  }
+
+  // ── Credential lifecycle: rotation, expiry, reveal, copy, generate, save ───
+  // (moved verbatim from services-key-lifecycle.js, now deleted)
+  async loadExpiry() {
+    try {
+      const data = await fetch(BASE + "/expiry").then(r => r.json());
+      if (!data.services) return;
+      for (const [name, info] of Object.entries(data.services)) {
+        const id = serviceDomId(name);
+        const el = this.$("#expiry-" + id);
+        const rotBtn = this.$("#rotbtn-" + id);
+        if (!el) continue;
+
+        // Show rotate button for auto-capable services
+        if (rotBtn && ROTATION_CAPABLE.includes(name)) {
+          rotBtn.style.display = "inline-block";
+        }
+
+        if (!info.expires_at) {
+          // Show policy type for services with rotation config
+          if (info.policy === "auto") {
+            el.style.display = "inline";
+            el.style.color = "#94a3b8";
+            el.style.background = "rgba(148,163,184,0.1)";
+            el.style.border = "1px solid rgba(148,163,184,0.2)";
+            el.textContent = "no expiry set";
+          }
+          continue;
+        }
+
+        el.style.display = "inline";
+        const colors = { green: { c: "#4ade80", bg: "rgba(74,222,128,0.1)", b: "rgba(74,222,128,0.2)" },
+                         yellow: { c: "#facc15", bg: "rgba(250,204,21,0.1)", b: "rgba(250,204,21,0.2)" },
+                         orange: { c: "#fb923c", bg: "rgba(251,146,60,0.1)", b: "rgba(251,146,60,0.2)" },
+                         red: { c: "#f87171", bg: "rgba(248,113,113,0.15)", b: "rgba(248,113,113,0.3)" },
+                         gray: { c: "#94a3b8", bg: "rgba(148,163,184,0.1)", b: "rgba(148,163,184,0.2)" } };
+        const clr = colors[info.color] || colors.gray;
+        el.style.color = clr.c;
+        el.style.background = clr.bg;
+        el.style.border = "1px solid " + clr.b;
+
+        if (info.daysLeft === null) {
+          el.textContent = "unknown";
+        } else if (info.daysLeft < 0) {
+          el.textContent = "EXPIRED " + Math.abs(info.daysLeft) + "d ago";
+        } else if (info.daysLeft === 0) {
+          el.textContent = "EXPIRES TODAY";
+        } else {
+          el.textContent = info.daysLeft + "d left";
+        }
+      }
+    } catch {}
+  }
+
+  async rotateKey(name) {
+    if (!confirm("Rotate " + name + " key?\n\nA new key will be created and the old one deleted.")) return;
+    const rotBtn = this.$("#rotbtn-" + serviceDomId(name));
+    if (rotBtn) { rotBtn.disabled = true; rotBtn.textContent = "rotating…"; }
+    try {
+      const r = await fetch(BASE + "/rotate/" + encodeURIComponent(name), { method: "POST", headers: writeHeaders() }).then(r => r.json());
+      if (r.ok) {
+        if (rotBtn) { rotBtn.textContent = "✓ rotated"; rotBtn.style.background = "#166534"; }
+        this.loadExpiry(); // refresh badges
+      } else {
+        alert("Rotation failed: " + (r.error || "unknown error"));
+        if (rotBtn) { rotBtn.disabled = false; rotBtn.textContent = "↻ Rotate"; }
+      }
+    } catch (err) {
+      alert("Rotation error: " + err.message);
+      if (rotBtn) { rotBtn.disabled = false; rotBtn.textContent = "↻ Rotate"; }
+    }
+  }
+
+  async setExpiry(name) {
+    const days = prompt("Set expiry for " + name + " (days from now):", "30");
+    if (!days) return;
+    const expiresAt = new Date(Date.now() + parseInt(days) * 86400000).toISOString();
+    try {
+      await fetch(BASE + "/set-expiry/" + encodeURIComponent(name), {
+        method: "POST",
+        headers: writeHeaders({ "Content-Type": "application/json" }),
+        body: JSON.stringify({ expires_at: expiresAt, rotation_days: parseInt(days) }),
+      });
+      this.loadExpiry();
+    } catch {}
+  }
+
+  async reveal(name, btn) {
+    const id = serviceDomId(name);
+    const valEl   = this.$("#val-" + id);
+    const copyBtn = this.$("#copybtn-" + id);
+    if (!valEl || !copyBtn) return;
+    if (valEl.style.display === "block") {
+      valEl.style.display = "none"; copyBtn.style.display = "none";
+      btn.textContent = "Reveal"; return;
+    }
+    valEl.textContent = "fetching…"; valEl.style.display = "block"; btn.textContent = "Hide";
+    try {
+      const r = await fetch(BASE + "/get/" + encodeURIComponent(name)).then(r => r.json());
+      if (r.locked) { showLockScreen(); return; }
+      if (r.error) throw new Error(r.error);
+      const imp = OAUTH_IMPORT[name];
+      if (imp) {
+        try {
+          const parsed = JSON.parse(r.value);
+          const allKeys = [...imp.jsonFields, ...imp.extra.map(f => f.key)];
+          valEl.innerHTML = allKeys.map(k =>
+            '<div style="margin-bottom:6px"><span style="color:#64748b;font-size:.72rem;text-transform:uppercase;letter-spacing:.4px">' + k.replace(/_/g," ") + '</span><br>' + (parsed[k] || "—") + '</div>'
+          ).join("");
+        } catch { valEl.textContent = r.value; }
+      } else {
+        valEl.textContent = r.value;
+      }
+      copyBtn.style.display = "inline-block";
+    } catch (e) {
+      valEl.textContent = "Error: " + e.message; valEl.style.color = "#ef4444";
+    }
+  }
+
+  async copyKey(name) {
+    const id = serviceDomId(name);
+    const val = this.$("#val-" + id).textContent;
+    try {
+      await navigator.clipboard.writeText(val);
+      const btn = this.$("#copybtn-" + id);
+      btn.textContent = "Copied!"; setTimeout(() => btn.textContent = "Copy", 1500);
+    } catch {}
+  }
+
+  getServiceKeyType(name) {
+    const svc = this.allServices.find(s => s.name === name);
+    return String(svc?.key_type || "").toLowerCase();
+  }
+
+  generateSecretKey(name) {
+    const input = this.$("#set-input-" + serviceDomId(name));
+    if (!input) return;
+    const bytes = crypto.getRandomValues(new Uint8Array(32));
+    input.value = Array.from(bytes, byte => byte.toString(16).padStart(2, "0")).join("");
+    input.focus();
+    input.select();
+  }
+
+  async saveKey(name) {
+    const id = serviceDomId(name);
+    const msg = this.$("#set-msg-" + id);
+    if (!msg) return;
+    const imp = OAUTH_IMPORT[name];
+    const keyType = this.getServiceKeyType(name);
+    let value;
+
+    if (imp) {
+      const jsonEl = this.$("#ofield-" + id + "-json");
+      const raw = jsonEl ? jsonEl.value.trim() : "";
+      if (!raw) { msg.className = "set-msg fail"; msg.textContent = "Paste the OAuth JSON first."; return; }
+      let parsed;
+      try { parsed = JSON.parse(raw); } catch { msg.className = "set-msg fail"; msg.textContent = "Invalid JSON — copy the full file content."; return; }
+      // Google wraps fields under "installed" or "web"
+      const src = parsed.installed || parsed.web || parsed;
+      const obj = {};
+      for (const k of imp.jsonFields) {
+        if (!src[k]) { msg.className = "set-msg fail"; msg.textContent = k + " not found in JSON."; return; }
+        obj[k] = src[k];
+      }
+      for (const f of imp.extra) {
+        const el = this.$("#ofield-" + id + "-" + f.key);
+        const v = el ? el.value.trim() : "";
+        if (!v) { msg.className = "set-msg fail"; msg.textContent = f.label + " is required."; return; }
+        obj[f.key] = v;
+      }
+      value = JSON.stringify(obj);
+    } else if (keyType === "keypair") {
+      const keyEl = this.$("#kp-key-" + id);
+      const valueEl = this.$("#kp-value-" + id);
+      const user = keyEl ? keyEl.value.trim() : "";
+      const pass = valueEl ? valueEl.value : "";
+      if (!user) { msg.className = "set-msg fail"; msg.textContent = "User / key is required."; return; }
+      if (!pass.trim()) { msg.className = "set-msg fail"; msg.textContent = "Password / secret is required."; return; }
+      value = JSON.stringify({ user, pass, username: user, password: pass, key: user, value: pass });
+    } else {
+      const input = this.$("#set-input-" + id);
+      value = input ? input.value : "";
+      if (!value.trim()) { msg.className = "set-msg fail"; msg.textContent = "Value is empty."; return; }
+    }
+
+    msg.className = "set-msg"; msg.textContent = "Saving…";
+    try {
+      const r = await fetch(BASE + "/set/" + encodeURIComponent(name), {
+        method: "POST",
+        headers: writeHeaders({ "Content-Type": "application/json" }),
+        body: JSON.stringify({ value })
+      }).then(r => r.json());
+
+      if (r.locked) { showLockScreen(); return; }
+      if (r.error) throw new Error(r.error);
+      msg.className = "set-msg ok"; msg.textContent = "✓ Saved";
+      if (imp) {
+        const jsonEl = this.$("#ofield-" + id + "-json");
+        if (jsonEl) jsonEl.value = "";
+        imp.extra.forEach(f => { const el = this.$("#ofield-" + id + "-" + f.key); if (el) el.value = ""; });
+      } else if (keyType === "keypair") {
+        const keyEl = this.$("#kp-key-" + id);
+        const valueEl = this.$("#kp-value-" + id);
+        if (keyEl) keyEl.value = "";
+        if (valueEl) valueEl.value = "";
+      } else {
+        const inp = this.$("#set-input-" + id);
+        if (inp) inp.value = "";
+      }
+      const dot = this.$("#sdot-" + id);
+      if (dot) { dot.className = "status-dot"; dot.title = ""; }
+      setTimeout(() => {
+        const panel = this.$("#set-panel-" + id);
+        if (panel) panel.style.display = "none";
+        msg.textContent = "";
+      }, 1800);
+    } catch (e) {
+      msg.className = "set-msg fail"; msg.textContent = "✗ " + e.message;
+    }
+  }
+
+  // ── Service-metadata CRUD: project/label edit, delete, Set-panel toggle ───
+  // (moved verbatim from services-metadata-crud.js, now deleted)
+  toggleCardEdit(name) {
+    const id = serviceDomId(name);
+    const panel = this.$("#ce-" + id);
+    if (!panel) return;
+    const open = panel.style.display === "block";
+    panel.style.display = open ? "none" : "block";
+    if (!open) {
+      const svc = this.allServices.find(s => s.name === name);
+      this.$("#ce-name-" + id).value = (svc && svc.label) ? svc.label : name;
+      this.$("#ce-project-" + id).value = (svc && svc.project) ? svc.project : "general";
+      this.$("#ce-msg-" + id).textContent = "";
+      this.$("#ce-name-" + id).focus();
+    }
+  }
+
+  // Enter/Escape on the card-edit Name/Project inputs -- data-keydown
+  // equivalent of the old onkeydown='if(event.key==="Enter")saveCardEdit(...)'.
+  // saveCardEdit is write-guarded, so this dispatches through window.saveCardEdit
+  // (the bridge), never this.saveCardEdit() directly -- same rule as every
+  // write-guarded action reached from get actions() below.
+  ceInputKeydown(e, el) {
+    const name = el.dataset.serviceName;
+    if (e.key === "Enter") window.saveCardEdit(name);
+    else if (e.key === "Escape") this.toggleCardEdit(name);
+  }
+
+  async saveCardEdit(name) {
+    const id = serviceDomId(name);
+    const nameInput = this.$("#ce-name-" + id);
+    const projectInput = this.$("#ce-project-" + id);
+    const msg = this.$("#ce-msg-" + id);
+    const newLabel = nameInput.value.trim() || name;
+    const newProject = projectInput.value.trim() || "general";
+    msg.style.color = "#d9a86c"; msg.textContent = "Saving…";
+    try {
+      const r = await fetch(BASE + "/update-service", {
+        method: "POST",
+        headers: writeHeaders({ "Content-Type": "application/json" }),
+        body: JSON.stringify({ service: name, label: newLabel, project: newProject })
+      }).then(r => r.json());
+      if (r.locked) { showLockScreen(); return; }
+      if (r.error) throw new Error(r.error);
+      msg.style.color = "#4ade80"; msg.textContent = "✓ Saved";
+      const svc = this.allServices.find(s => s.name === name);
+      if (svc) { svc.label = newLabel; svc.project = newProject; }
+      const labelEl = this.$("#label-display-" + id);
+      if (labelEl) labelEl.textContent = newLabel;
+      const projEl = this.$("#proj-name-" + id);
+      if (projEl) projEl.textContent = newProject;
+      setTimeout(() => { this.toggleCardEdit(name); this.renderProjectTabs(this.allServices); }, 800);
+    } catch (err) {
+      msg.style.color = "#f87171"; msg.textContent = "✗ " + err.message;
+    }
+  }
+
+  async deleteService(name) {
+    if (!confirm(`Delete service "${name}"? This cannot be undone.`)) return;
+    try {
+      const r = await fetch(BASE + "/delete/" + encodeURIComponent(name), { method: "POST", headers: writeHeaders() }).then(r => r.json());
+      if (r.locked) { showLockScreen(false); return; }
+      if (r.error) throw new Error(r.error);
+      this.loadServices();
+    } catch (e) {
+      alert("Delete failed: " + e.message);
+    }
+  }
+
+  toggleSet(name) {
+    const id = serviceDomId(name);
+    const panel = this.$("#set-panel-" + id);
+    const msg   = this.$("#set-msg-" + id);
+    if (!panel) return;
+    const open  = panel.style.display === "block";
+    panel.style.display = open ? "none" : "block";
+    if (!open) {
+      if (msg) msg.textContent = "";
+      const imp = OAUTH_IMPORT[name];
+      if (imp) {
+        const jsonEl = this.$("#ofield-" + id + "-json");
+        if (jsonEl) { jsonEl.value = ""; jsonEl.focus(); }
+        imp.extra.forEach(f => { const el = this.$("#ofield-" + id + "-" + f.key); if (el) el.value = ""; });
+      } else if (this.getServiceKeyType(name) === "keypair") {
+        const keyEl = this.$("#kp-key-" + id);
+        const valueEl = this.$("#kp-value-" + id);
+        if (keyEl) { keyEl.value = ""; keyEl.focus(); }
+        if (valueEl) valueEl.value = "";
+      } else {
+        const input = this.$("#set-input-" + id);
+        if (input) { input.value = ""; input.focus(); }
+      }
+    }
+  }
+
+  // ── Public cross-panel seam for toolbar-panel.js's Check-All button ───────
+  // Every ".status-dot" this panel renders lives inside its own shadow root
+  // now, so a light-DOM document.querySelectorAll(".status-dot") from another
+  // panel silently finds zero elements. Same boundary fix as tunnel-panel.js's
+  // updateHealthCheckResult -- a public method instead of a DOM-id reach.
+  setAllDotsChecking() {
+    this.$$(".status-dot").forEach(d => { d.className = "status-dot checking"; d.title = "Checking…"; });
+  }
+
+  updateCheckResult(name, result) {
+    const dot = this.$("#sdot-" + serviceDomId(name));
+    if (!dot) return;
+    if (result.ok) {
+      dot.className = "status-dot ok"; dot.title = "OK";
+    } else {
+      dot.className = "status-dot fail";
+      dot.title = result.reason || "No key stored";
+    }
+  }
+
+  fadeOkDots() {
+    this.$$(".status-dot.ok").forEach(d => d.classList.add("fading"));
+  }
+
+  resetAllDots() {
+    this.$$(".status-dot").forEach(d => { d.className = "status-dot"; d.title = ""; });
+  }
+
+  get actions() {
+    return {
+      switchProjectTab: (e, el) => this.switchProjectTab(el.dataset.tabKey),
+      toggleCardEdit: (e, el) => this.toggleCardEdit(el.dataset.serviceName),
+      ceInputKeydown: (e, el) => this.ceInputKeydown(e, el),
+      reveal: (e, el) => this.reveal(el.dataset.serviceName, el),
+      copyKey: (e, el) => this.copyKey(el.dataset.serviceName),
+      toggleSet: (e, el) => this.toggleSet(el.dataset.serviceName),
+      generateSecretKey: (e, el) => this.generateSecretKey(el.dataset.serviceName),
+      // Write-guarded actions dispatch through window.X (the bridge), NOT
+      // this.X(...) directly -- installWriteAccessGuards() (dashboard.js)
+      // wraps the GLOBAL name with the write-token acquire-and-retry gate.
+      // Calling the instance method directly would silently bypass that
+      // gate, restoring the exact write-lock defect this mechanism exists
+      // to prevent. Same rule tunnel-panel.js follows for wizSubmitCfToken.
+      toggleService: (e, el) => window.toggleService(el.dataset.serviceName),
+      rotateKey: (e, el) => window.rotateKey(el.dataset.serviceName),
+      deleteService: (e, el) => window.deleteService(el.dataset.serviceName),
+      saveCardEdit: (e, el) => window.saveCardEdit(el.dataset.serviceName),
+      saveKey: (e, el) => window.saveKey(el.dataset.serviceName),
+    };
+  }
+}
+customElements.define(ClauthServicesPanel.tagName, ClauthServicesPanel);
+
+// Write-guard bridges: installWriteAccessGuards() (dashboard.js) wraps every
+// name in WRITE_ACTIONS by reassigning window[name] to a guarded version --
+// it can only do that for a real global function, not a class instance
+// method. Each of these thin globals delegates to the real implementation on
+// the live panel instance. addService's bridge is also the PRIMARY call
+// path for that one action -- serve.js's Add-Service button uses a raw
+// onclick="addService()" in light-DOM markup outside this panel's shadow
+// root, so this global is not just a get-actions() dispatch target, it is
+// the only way that button reaches this panel at all.
+window.toggleService = (...args) => {
+  const el = document.querySelector(ClauthServicesPanel.tagName);
+  return el?.toggleService(...args);
+};
+window.addService = (...args) => {
+  const el = document.querySelector(ClauthServicesPanel.tagName);
+  return el?.addService(...args);
+};
+window.rotateKey = (...args) => {
+  const el = document.querySelector(ClauthServicesPanel.tagName);
+  return el?.rotateKey(...args);
+};
+window.setExpiry = (...args) => {
+  const el = document.querySelector(ClauthServicesPanel.tagName);
+  return el?.setExpiry(...args);
+};
+window.saveKey = (...args) => {
+  const el = document.querySelector(ClauthServicesPanel.tagName);
+  return el?.saveKey(...args);
+};
+window.saveCardEdit = (...args) => {
+  const el = document.querySelector(ClauthServicesPanel.tagName);
+  return el?.saveCardEdit(...args);
+};
+window.deleteService = (...args) => {
+  const el = document.querySelector(ClauthServicesPanel.tagName);
+  return el?.deleteService(...args);
+};
+
+// Panel interface registration — see ./panel-registry.js. connectedCallback()
+// only builds the shadow DOM (safe -- no external dependency); mount() runs
+// later, once ClauthPanelRegistry.mountAll() confirms every script (incl.
+// dashboard.js's apiFetch/writeHeaders/showLockScreen) has loaded.
+window.ClauthPanelRegistry.register({
+  id: "services",
+  mount: () => {
+    const el = document.querySelector(ClauthServicesPanel.tagName);
+    if (el) el.mount();
+  },
+});