@lifeaitools/clauth 2.1.1 → 2.10.0

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

@@ -0,0 +1,688 @@
+// cli/dashboard/panels/tunnel-panel.js
+// The Tunnel panel, as a real Web Component: <clauth-tunnel-panel>. Owns its
+// own Shadow DOM (tunnel bar + the full Cloudflare tunnel-setup wizard, both
+// rendered inside this element -- the wizard used to be a separate top-level
+// overlay in the served HTML; it's genuinely part of this panel's concern,
+// so it now lives in this panel's own shadow tree). No other panel can see
+// or be affected by anything in here, and this panel can't see anything
+// outside itself except through the shared apiFetch/writeHeaders/BASE
+// globals dashboard.js provides (a cross-cutting API client, not panel
+// state -- sharing that is normal for any component library).
+//
+// State that used to be module-level `let` (tunnelPollTimer, wizStep,
+// wizData, window._wizSelectedTunnel) is now instance state on `this` --
+// the correct home for one panel instance's own data.
+//
+// Every onclick="globalFn()" became data-action="methodName" (or
+// data-keydown for Enter-key submits), dispatched by the shared listener in
+// ../panel-element.js. Per-item dynamic args (which tunnel was clicked,
+// which copy target) move from inline call arguments to data-* attributes
+// read off the clicked element -- the standard delegated-event pattern.
+class ClauthTunnelPanel extends window.ClauthPanelElement {
+  static tagName = "clauth-tunnel-panel";
+  static cssHref = "/dashboard/panels/tunnel-panel.css";
+
+  template() {
+    return `
+    <section class="tunnel-panel">
+      <!-- not_configured -->
+      <div class="tunnel-state not-configured" style="display:none;align-items:center;gap:10px;width:100%;flex-wrap:wrap">
+        <div class="tunnel-dot off"></div>
+        <div class="tunnel-label"><strong>claude.ai MCP</strong> — No tunnel configured</div>
+        <button class="btn-tunnel-stop" data-action="runTunnelSetup">Setup Tunnel</button>
+      </div>
+      <!-- missing_cloudflared -->
+      <div class="tunnel-state missing-cloudflared" style="display:none;align-items:center;gap:10px;width:100%;flex-wrap:wrap">
+        <div class="tunnel-dot err"></div>
+        <div class="tunnel-label"><strong>claude.ai MCP</strong> — cloudflared not installed</div>
+        <a href="https://developers.cloudflare.com/cloudflare-one/connections/connect-networks/downloads/" target="_blank" style="color:#60a5fa;font-size:.8rem">Download cloudflared ↗</a>
+        <span class="tunnel-err" style="display:inline;font-size:.78rem;color:#94a3b8">Then run: clauth tunnel setup</span>
+      </div>
+      <!-- starting -->
+      <div class="tunnel-state starting" style="display:none;align-items:center;gap:10px;width:100%;flex-wrap:wrap">
+        <div class="tunnel-dot starting"></div>
+        <div class="tunnel-label"><strong>claude.ai MCP</strong> — Tunnel starting…</div>
+      </div>
+      <!-- live -->
+      <div class="tunnel-state live" style="display:none;align-items:center;gap:10px;width:100%;flex-wrap:wrap">
+        <div class="tunnel-dot on"></div>
+        <div class="tunnel-label"><strong>claude.ai MCP</strong> — <span class="tunnel-url"><a href="" target="_blank" id="tunnel-live-url"></a></span></div>
+        <button class="btn-check" style="padding:6px 12px;font-size:.8rem" data-action="testTunnel">Test</button>
+        <button class="btn-claude" data-action="openClaude">Connect claude.ai</button>
+        <button class="btn-tunnel-stop" data-action="stopTunnel">Stop</button>
+      </div>
+      <!-- error -->
+      <div class="tunnel-state error" style="display:none;align-items:center;gap:10px;width:100%;flex-wrap:wrap">
+        <div class="tunnel-dot err"></div>
+        <div class="tunnel-label"><strong>claude.ai MCP</strong> — Tunnel error — check cloudflared config</div>
+        <button class="btn-tunnel-stop" data-action="startTunnel">Retry</button>
+      </div>
+      <!-- not_started -->
+      <div class="tunnel-state not-started" style="display:flex;align-items:center;gap:10px;width:100%;flex-wrap:wrap">
+        <div class="tunnel-dot off"></div>
+        <div class="tunnel-label"><strong>claude.ai MCP</strong> — checking tunnel…</div>
+        <button class="btn-tunnel-stop" data-action="startTunnel">Start Tunnel</button>
+      </div>
+    </section>
+
+    <div class="wizard-panel" id="wizard-panel">
+      <div class="wizard-header">
+        <div class="tunnel-dot off" id="wiz-dot" style="width:10px;height:10px;border-radius:50%"></div>
+        <div class="wizard-title">claude.ai Tunnel Setup</div>
+        <button class="btn-cancel" data-action="closeSetupWizard">✕ Dismiss</button>
+      </div>
+      <div class="wizard-steps" id="wizard-steps"></div>
+      <div class="wizard-body" id="wizard-body"><p class="loading">Checking setup state…</p></div>
+      <div class="wizard-foot" id="wizard-foot"></div>
+    </div>
+    `;
+  }
+
+  mount() {
+    this.tunnelPollTimer = null;
+    this.wizStep = null;
+    this.wizData = {};
+    this.wizSelectedTunnel = null;
+    this.pollTunnel();
+  }
+
+  // ── Tunnel management ───────────────────────
+  async pollTunnel() {
+    if (this.tunnelPollTimer) clearInterval(this.tunnelPollTimer);
+    const r = await apiFetch("/tunnel");
+    if (r) this.renderTunnelPanel(r.status, r.url, r.error);
+    // Poll every 3s; slow to 10s once live
+    this.tunnelPollTimer = setInterval(async () => {
+      const r2 = await apiFetch("/tunnel");
+      if (!r2) return;
+      this.renderTunnelPanel(r2.status, r2.url, r2.error);
+      if (r2.status === "live") {
+        clearInterval(this.tunnelPollTimer);
+        this.tunnelPollTimer = setInterval(async () => {
+          const r3 = await apiFetch("/tunnel");
+          if (r3) this.renderTunnelPanel(r3.status, r3.url, r3.error);
+        }, 10000);
+      }
+    }, 3000);
+  }
+
+  renderTunnelPanel(status, url, error) {
+    const panel = this.$(".tunnel-panel");
+    if (!panel) return;
+    panel.querySelectorAll(".tunnel-state").forEach(el => el.style.display = "none");
+    const cls = (status || "not-started").replace(/_/g, "-");
+    const active = panel.querySelector(".tunnel-state." + cls);
+    if (active) active.style.display = "flex";
+    if (status === "live" && url) {
+      const sseUrl = url.startsWith("http") ? url + "/sse" : url;
+      const link = panel.querySelector(".tunnel-state.live a");
+      if (link) { link.href = sseUrl; link.textContent = sseUrl; }
+      const liveUrlEl = this.$("#tunnel-live-url");
+      if (liveUrlEl) { liveUrlEl.href = sseUrl; liveUrlEl.textContent = sseUrl; }
+    }
+  }
+
+  async toggleTunnel(action) {
+    try {
+      await fetch(BASE + "/tunnel", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ action })
+      });
+      setTimeout(() => this.pollTunnel(), action === "start" ? 2000 : 500);
+    } catch {}
+  }
+
+  async testTunnel() {
+    const liveState = this.$(".tunnel-panel .tunnel-state.live");
+    const btn = liveState ? liveState.querySelector(".btn-check") : null;
+    const labelEl = liveState ? liveState.querySelector(".tunnel-label") : null;
+    if (btn) { btn.disabled = true; btn.textContent = "Testing…"; }
+
+    try {
+      const r = await fetch(BASE + "/tunnel/test").then(r => r.json());
+      if (labelEl) {
+        if (r.ok) {
+          labelEl.innerHTML = '<strong>claude.ai MCP</strong> — <span style="color:#4ade80">PASS</span> ' +
+            r.latencyMs + 'ms · SSE ' + (r.sseReachable ? 'reachable' : 'unreachable') +
+            ' · <span class="tunnel-url"><a href="' + r.sseUrl + '" target="_blank">' + r.sseUrl + '</a></span>';
+        } else {
+          labelEl.innerHTML = '<strong>claude.ai MCP</strong> — <span style="color:#f87171">FAIL</span> ' + (r.reason || "unknown error");
+        }
+      }
+    } catch (e) {
+      if (labelEl) labelEl.innerHTML = '<strong>claude.ai MCP</strong> — <span style="color:#f87171">FAIL</span> ' + e.message;
+    } finally {
+      if (btn) { btn.disabled = false; btn.textContent = "Test"; }
+    }
+  }
+
+  // Public method other panels call for cross-panel communication -- the
+  // correct boundary now that this panel is a real component: toolbar-
+  // panel.js's checkAll() calls this instead of reaching into DOM by id
+  // (the id it used to reach for, "tunnel-dot"/"tunnel-label", never
+  // existed even before this panel had its own shadow root -- only the
+  // CLASS names tunnel-dot/tunnel-label did, so this call site was already
+  // dead/broken, just never exercised in a way that surfaced the
+  // TypeError). Fixed here as the correct component-boundary call, not a
+  // DOM-id lookup into another panel's internals.
+  updateHealthCheckResult(result) {
+    const liveState = this.$(".tunnel-panel .tunnel-state.live");
+    const tDot = liveState ? liveState.querySelector(".tunnel-dot") : null;
+    const tLabel = liveState ? liveState.querySelector(".tunnel-label") : null;
+    if (!tDot || !tLabel) return;
+    if (result.ok) {
+      tDot.className = "tunnel-dot on";
+      tLabel.innerHTML = '<strong>claude.ai MCP</strong> — tunnel healthy';
+    } else if (result.running) {
+      tDot.className = "tunnel-dot starting";
+      tLabel.innerHTML = '<strong>claude.ai MCP</strong> — ' + (result.reason || "starting…");
+    } else {
+      tDot.className = "tunnel-dot err";
+      tLabel.innerHTML = '<strong>claude.ai MCP</strong> — ' + (result.reason || "not running");
+    }
+  }
+
+  openClaude() {
+    fetch(BASE + "/tunnel").then(r => r.json()).then(t => {
+      const sseUrl = t.sseUrl || (t.url && t.url.startsWith("http") ? t.url + "/sse" : null);
+      if (sseUrl) {
+        navigator.clipboard.writeText(sseUrl).then(() => {
+          const btn = this.$(".tunnel-panel .tunnel-state.live .btn-claude");
+          if (btn) {
+            btn.textContent = "SSE URL copied!";
+            setTimeout(() => { btn.textContent = "Connect claude.ai"; }, 2000);
+          }
+        }).catch(() => {});
+        window.open("https://claude.ai/settings/integrations", "_blank");
+      }
+    });
+  }
+
+  // ── Tunnel Setup Wizard ─────────────────────
+  async openSetupWizard() {
+    const panel = this.$("#wizard-panel");
+    panel.classList.add("open");
+    panel.scrollIntoView({ behavior: "smooth", block: "start" });
+    this.wizStep = "loading";
+    this.renderWizBody('<p class="loading">Checking setup state…</p>', [], []);
+
+    const state = await apiFetch("/tunnel/setup-state");
+    if (!state) {
+      this.renderWizBody('<p class="wiz-desc" style="color:#f87171">Could not reach daemon.</p>', [], []);
+      return;
+    }
+
+    if (state.step === "ready") {
+      await apiFetch("/tunnel/start", { method: "POST" });
+      this.closeSetupWizard();
+      return;
+    }
+
+    this.wizData = state;
+
+    if (state.step === "need_cf_token") this.wizShowCfToken();
+    else if (state.step === "pick_tunnel") this.wizShowPickTunnel(state.tunnels);
+    else if (state.step === "no_tunnels") this.wizShowCreateViaCfApi(state.accountId);
+    else this.wizShowInstallCheck(); // no CF token — needs cloudflared login
+  }
+
+  closeSetupWizard() {
+    this.$("#wizard-panel").classList.remove("open");
+    this.wizStep = null; this.wizData = {};
+  }
+
+  renderWizBody(html, steps, footHtml) {
+    this.$("#wizard-body").innerHTML = html;
+
+    const stepLabels = ["CF Token", "Tunnel", "cloudflared", "MCP Setup", "Test"];
+    const stepsEl = this.$("#wizard-steps");
+    stepsEl.innerHTML = stepLabels.map((label, i) => {
+      const stepKeys = ["need_cf_token", "pick_tunnel", "check_cf", "mcp_setup", "test"];
+      const currentIdx = stepKeys.indexOf(this.wizStep);
+      let cls = "wstep";
+      if (i < currentIdx) cls += " done";
+      else if (i === currentIdx) cls += " active";
+      return `<div class="${cls}">${i < currentIdx ? "✓ " : ""}${label}</div>`;
+    }).join("");
+
+    this.$("#wizard-foot").innerHTML = footHtml.join("");
+  }
+
+  // Step: Enter CF API token
+  wizShowCfToken() {
+    this.wizStep = "need_cf_token";
+    this.renderWizBody(`
+      <div class="wiz-desc">A Cloudflare API token is needed to check for existing tunnels and configure new ones.</div>
+      <div class="wiz-label">Cloudflare API Token</div>
+      <input class="wiz-input" id="wiz-cf-token-input" type="password" placeholder="Paste your CF API token…" autocomplete="off" spellcheck="false" data-keydown="onCfTokenKeydown">
+      <div style="margin-top:8px">
+        <a class="wiz-link" href="https://dash.cloudflare.com/profile/api-tokens" target="_blank">↗ Create token at Cloudflare Dashboard</a>
+        <span style="color:#475569;font-size:.78rem;margin-left:8px">(needs Cloudflare Tunnel: Edit permission)</span>
+      </div>
+      <div class="wiz-msg fail" id="wiz-cf-err" style="display:none;margin-top:8px"></div>
+    `, [], [
+      `<button class="btn-wiz-primary" id="wiz-cf-btn" data-action="wizSubmitCfToken">Verify &amp; Save Token</button>`,
+      `<button class="btn-wiz-secondary" data-action="closeSetupWizard">Postpone</button>`,
+      `<span class="wiz-msg" id="wiz-cf-msg"></span>`
+    ]);
+  }
+
+  onCfTokenKeydown(e) {
+    if (e.key === "Enter") this.wizSubmitCfToken();
+  }
+
+  async wizSubmitCfToken() {
+    const input = this.$("#wiz-cf-token-input");
+    const btn = this.$("#wiz-cf-btn");
+    const errEl = this.$("#wiz-cf-err");
+    const token = input.value.trim();
+    if (!token) return;
+
+    btn.disabled = true; btn.textContent = "Verifying…";
+    if (errEl) errEl.style.display = "none";
+
+    const r = await fetch(BASE + "/tunnel/setup/cf-token", {
+      method: "POST",
+      headers: writeHeaders({ "Content-Type": "application/json" }),
+      body: JSON.stringify({ token }),
+    }).then(r => r.json()).catch(() => null);
+
+    btn.disabled = false; btn.textContent = "Verify & Save Token";
+
+    if (!r || r.error) {
+      if (errEl) { errEl.textContent = r?.error || "Request failed"; errEl.style.display = "block"; }
+      return;
+    }
+
+    this.wizData.accountId = r.accountId;
+    const tunnelState = await apiFetch("/tunnel/setup-state");
+    if (tunnelState?.step === "pick_tunnel") this.wizShowPickTunnel(tunnelState.tunnels);
+    else this.wizShowInstallCheck();
+  }
+
+  // Step: Pick existing tunnel
+  wizShowPickTunnel(tunnels) {
+    this.wizStep = "pick_tunnel";
+
+    const listHtml = tunnels.map(t => `
+      <div class="wiz-tunnel-item" id="wti-${t.id}" data-action="wizSelectTunnel" data-tunnel-id="${t.id}" data-tunnel-name="${t.name}">
+        <div style="flex:1">
+          <div class="wiz-tunnel-name">${t.name}</div>
+          <div class="wiz-tunnel-id">${t.id}</div>
+        </div>
+        <div class="wiz-tunnel-status">${t.status || "active"}</div>
+      </div>
+    `).join("");
+
+    this.renderWizBody(`
+      <div class="wiz-desc">Found ${tunnels.length} existing Cloudflare tunnel${tunnels.length !== 1 ? "s" : ""}. Select one to use, or create a new one.</div>
+      <div class="wiz-tunnel-list">${listHtml}</div>
+      <div style="margin-top:12px">
+        <div class="wiz-label">Public hostname for selected tunnel (e.g. clauth.yourdomain.com)</div>
+        <input class="wiz-input" id="wiz-hostname-input" type="text" placeholder="clauth.yourdomain.com" spellcheck="false" autocomplete="off">
+      </div>
+      <div class="wiz-msg fail" id="wiz-pick-err" style="display:none;margin-top:8px"></div>
+    `, [], [
+      `<button class="btn-wiz-primary" id="wiz-pick-btn" data-action="wizSaveTunnel">Use Selected Tunnel</button>`,
+      `<button class="btn-wiz-secondary" data-action="wizShowInstallCheck">Create New Tunnel Instead</button>`,
+      `<button class="btn-wiz-secondary" data-action="closeSetupWizard">Postpone</button>`
+    ]);
+
+    this.wizSelectedTunnel = null;
+  }
+
+  wizSelectTunnel(e, el) {
+    this.$$(".wiz-tunnel-item").forEach(item => item.classList.remove("selected"));
+    el.classList.add("selected");
+    this.wizSelectedTunnel = { id: el.dataset.tunnelId, name: el.dataset.tunnelName };
+  }
+
+  async wizSaveTunnel() {
+    const sel = this.wizSelectedTunnel;
+    const hostname = this.$("#wiz-hostname-input")?.value.trim();
+    const errEl = this.$("#wiz-pick-err");
+    const btn = this.$("#wiz-pick-btn");
+
+    if (!sel) { if (errEl) { errEl.textContent = "Select a tunnel first"; errEl.style.display = "block"; } return; }
+    if (!hostname) { if (errEl) { errEl.textContent = "Enter a public hostname"; errEl.style.display = "block"; } return; }
+
+    btn.disabled = true; btn.textContent = "Saving…";
+
+    const r = await fetch(BASE + "/tunnel/setup/cf-save", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ tunnelId: sel.id, tunnelName: sel.name, hostname }),
+    }).then(r => r.json()).catch(() => null);
+
+    btn.disabled = false; btn.textContent = "Use Selected Tunnel";
+
+    if (!r?.ok) {
+      if (errEl) { errEl.textContent = r?.error || "Save failed"; errEl.style.display = "block"; }
+      return;
+    }
+
+    await apiFetch("/tunnel/start", { method: "POST" });
+    this.wizShowMcpSetup(hostname);
+  }
+
+  // Step: Create tunnel via CF API (CF token already in vault — no cloudflared login needed)
+  wizShowCreateViaCfApi(accountId) {
+    this.wizStep = "pick_tunnel";
+    this.wizData.accountId = accountId;
+    this.renderWizBody(`
+      <div class="wiz-desc">No existing tunnels found. Create a new one using your Cloudflare API token.</div>
+      <div class="wiz-label">Tunnel name</div>
+      <input class="wiz-input" id="wiz-api-tname" type="text" value="clauth" spellcheck="false">
+      <div class="wiz-label" style="margin-top:10px">Public hostname (e.g. clauth.yourdomain.com)</div>
+      <input class="wiz-input" id="wiz-api-hostname" type="text" placeholder="clauth.yourdomain.com" spellcheck="false">
+      <div class="wiz-msg fail" id="wiz-api-err" style="display:none;margin-top:8px"></div>
+    `, [], [
+      `<button class="btn-wiz-primary" id="wiz-api-btn" data-action="wizRunCreateViaCfApi">Create Tunnel</button>`,
+      `<button class="btn-wiz-secondary" data-action="closeSetupWizard">Postpone</button>`,
+      `<span class="wiz-msg" id="wiz-api-msg"></span>`
+    ]);
+  }
+
+  async wizRunCreateViaCfApi() {
+    const name = this.$("#wiz-api-tname")?.value.trim();
+    const hostname = this.$("#wiz-api-hostname")?.value.trim();
+    const btn = this.$("#wiz-api-btn");
+    const err = this.$("#wiz-api-err");
+    const msg = this.$("#wiz-api-msg");
+    if (!name || !hostname) { if (err) { err.textContent = "Name and hostname required"; err.style.display = "block"; } return; }
+    btn.disabled = true; btn.textContent = "Creating…"; if (err) err.style.display = "none";
+    if (msg) msg.textContent = "Calling Cloudflare API…";
+    const r = await fetch(BASE + "/tunnel/setup/cf-create-api", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ name, hostname, accountId: this.wizData.accountId }),
+    }).then(r => r.json()).catch(() => null);
+    btn.disabled = false; btn.textContent = "Create Tunnel";
+    if (!r?.ok) {
+      if (err) { err.textContent = r?.error || "Creation failed"; err.style.display = "block"; }
+      if (msg) msg.textContent = "";
+      return;
+    }
+    await apiFetch("/tunnel/start", { method: "POST" });
+    this.wizShowMcpSetup(hostname);
+  }
+
+  // Step: cloudflared install check (for new tunnel creation flow)
+  async wizShowInstallCheck() {
+    this.wizStep = "check_cf";
+    this.renderWizBody('<p class="loading">Checking cloudflared…</p>', [], []);
+
+    const r = await apiFetch("/tunnel/setup/check-cloudflared");
+
+    if (r?.installed) {
+      this.wizShowCfLogin();
+    } else {
+      this.renderWizBody(`
+        <div class="wiz-desc">cloudflared is required to create and run Cloudflare tunnels. It is not currently installed.</div>
+        <div style="display:flex;gap:12px;margin-top:12px;flex-wrap:wrap">
+          <a class="btn-wiz-secondary" href="https://developers.cloudflare.com/cloudflare-one/connections/connect-networks/downloads/" target="_blank" style="text-decoration:none">↗ Download cloudflared</a>
+          <span style="color:#475569;font-size:.8rem;align-self:center">or: <code style="color:#60a5fa">winget install Cloudflare.cloudflared</code></span>
+        </div>
+        <div class="wiz-desc" style="margin-top:12px;font-size:.78rem;color:#475569">After installing, click "Check Again".</div>
+      `, [], [
+        `<button class="btn-wiz-primary" data-action="wizShowInstallCheck">Check Again</button>`,
+        `<button class="btn-wiz-secondary" data-action="closeSetupWizard">Postpone</button>`
+      ]);
+    }
+  }
+
+  // Step: cloudflared login (Cloudflare auth via browser)
+  wizShowCfLogin() {
+    this.wizStep = "check_cf";
+    this.renderWizBody(`
+      <div class="wiz-desc">Authenticate cloudflared with your Cloudflare account. This opens a browser window.</div>
+      <div class="wiz-log" id="wiz-login-log" style="display:none"></div>
+    `, [], [
+      `<button class="btn-wiz-primary" id="wiz-login-btn" data-action="wizRunCfLogin">Open Browser to Authenticate</button>`,
+      `<button class="btn-wiz-secondary" data-action="closeSetupWizard">Postpone</button>`
+    ]);
+  }
+
+  async wizRunCfLogin() {
+    const btn = this.$("#wiz-login-btn");
+    const log = this.$("#wiz-login-log");
+    btn.disabled = true; btn.textContent = "Authenticating…";
+    log.style.display = "block";
+
+    try {
+      const resp = await fetch(BASE + "/tunnel/setup/cf-login", { method: "POST" });
+      const reader = resp.body.getReader();
+      const dec = new TextDecoder();
+      let buf = "";
+      while (true) {
+        const { done, value } = await reader.read();
+        if (done) break;
+        buf += dec.decode(value, { stream: true });
+        const lines = buf.split("\n");
+        buf = lines.pop();
+        for (const line of lines) {
+          if (!line.startsWith("data:")) continue;
+          try {
+            const d = JSON.parse(line.slice(5).trim());
+            if (d.line !== undefined) { log.textContent += d.line + "\n"; log.scrollTop = log.scrollHeight; }
+            if (d.done) {
+              if (d.code === 0) this.wizShowCreateTunnel();
+              else { btn.disabled = false; btn.textContent = "Retry"; }
+              return;
+            }
+          } catch {}
+        }
+      }
+    } catch (e) {
+      log.textContent += "Error: " + e.message;
+      btn.disabled = false; btn.textContent = "Retry";
+    }
+  }
+
+  // Step: Create new tunnel
+  wizShowCreateTunnel() {
+    this.wizStep = "check_cf";
+    this.renderWizBody(`
+      <div class="wiz-desc">Create a new named Cloudflare tunnel. Give it a name and a public hostname.</div>
+      <div class="wiz-label">Tunnel name (e.g. clauth)</div>
+      <input class="wiz-input" id="wiz-tname" type="text" value="clauth" spellcheck="false">
+      <div class="wiz-label" style="margin-top:10px">Public hostname (e.g. clauth.yourdomain.com)</div>
+      <input class="wiz-input" id="wiz-thostname" type="text" placeholder="clauth.yourdomain.com" spellcheck="false">
+      <div class="wiz-log" id="wiz-create-log" style="display:none;margin-top:10px"></div>
+      <div class="wiz-msg fail" id="wiz-create-err" style="display:none;margin-top:8px"></div>
+    `, [], [
+      `<button class="btn-wiz-primary" id="wiz-create-btn" data-action="wizRunCreateTunnel">Create Tunnel</button>`,
+      `<button class="btn-wiz-secondary" data-action="closeSetupWizard">Postpone</button>`
+    ]);
+  }
+
+  async wizRunCreateTunnel() {
+    const name = this.$("#wiz-tname")?.value.trim();
+    const hostname = this.$("#wiz-thostname")?.value.trim();
+    const btn = this.$("#wiz-create-btn");
+    const log = this.$("#wiz-create-log");
+    const err = this.$("#wiz-create-err");
+
+    if (!name || !hostname) { if (err) { err.textContent = "Name and hostname required"; err.style.display = "block"; } return; }
+
+    btn.disabled = true; btn.textContent = "Creating…";
+    log.style.display = "block"; err.style.display = "none";
+
+    try {
+      const resp = await fetch(BASE + "/tunnel/setup/cf-create", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ name, hostname }),
+      });
+      const reader = resp.body.getReader();
+      const dec = new TextDecoder();
+      let buf = "";
+      while (true) {
+        const { done, value } = await reader.read();
+        if (done) break;
+        buf += dec.decode(value, { stream: true });
+        const lines = buf.split("\n");
+        buf = lines.pop();
+        for (const line of lines) {
+          if (!line.startsWith("data:")) continue;
+          try {
+            const d = JSON.parse(line.slice(5).trim());
+            if (d.line !== undefined) { log.textContent += d.line + "\n"; log.scrollTop = log.scrollHeight; }
+            if (d.done && d.hostname) {
+              await apiFetch("/tunnel/start", { method: "POST" });
+              this.wizShowMcpSetup(d.hostname);
+              return;
+            }
+            if (d.error) { err.textContent = d.error; err.style.display = "block"; btn.disabled = false; btn.textContent = "Retry"; return; }
+          } catch {}
+        }
+      }
+    } catch (e) {
+      if (err) { err.textContent = e.message; err.style.display = "block"; }
+      btn.disabled = false; btn.textContent = "Retry";
+    }
+  }
+
+  // Step: MCP setup in claude.ai
+  wizShowMcpSetup(hostname) {
+    this.wizStep = "mcp_setup";
+    const base = `https://${hostname}`;
+
+    this.renderWizBody(`
+      <div class="wiz-desc">Tunnel is live. Add connectors in claude.ai → Integrations.</div>
+      <div style="display:flex;flex-direction:column;gap:8px;margin-top:10px">
+        <div class="mcp-row">
+          <span class="mcp-label">Clauth</span>
+          <span class="mcp-val" id="wiz-mcp-url">${base}/clauth</span>
+          <button class="mcp-copy" data-action="wizCopy" data-copy-target="wiz-mcp-url">copy</button>
+        </div>
+        <div class="mcp-row">
+          <span class="mcp-label">GWS</span>
+          <span class="mcp-val" id="wiz-mcp-gws">${base}/gws</span>
+          <button class="mcp-copy" data-action="wizCopy" data-copy-target="wiz-mcp-gws">copy</button>
+        </div>
+        <div class="mcp-row">
+          <span class="mcp-label">FS</span>
+          <span class="mcp-val" id="wiz-mcp-fs">${base}/fs</span>
+          <button class="mcp-copy" data-action="wizCopy" data-copy-target="wiz-mcp-fs">copy</button>
+        </div>
+      </div>
+      <div style="margin-top:10px;font-size:.78rem;color:#64748b">
+        MCP endpoints for direct servers (Regen Media, Web Research) are stored as <code>mcp-*</code> services in the vault.
+      </div>
+    `, [], [
+      `<button class="btn-wiz-primary" data-action="wizOpenClaudeAndTest">I've Added It — Test Now</button>`,
+      `<button class="btn-wiz-secondary" data-action="wizShowTest">Skip Test</button>`,
+      `<button class="btn-wiz-secondary" data-action="closeSetupWizard">Done</button>`
+    ]);
+  }
+
+  wizOpenClaudeAndTest() {
+    window.open("https://claude.ai/settings/integrations", "_blank");
+    this.wizShowTest();
+  }
+
+  async wizRollCreds() {
+    if (!confirm("Invalidate all OAuth tokens? Claude.ai connectors will need to re-authenticate.")) return;
+    try {
+      const resp = await apiFetch("/roll-mcp-creds", { method: "POST" });
+      if (resp?.tokens_invalidated) {
+        alert("All OAuth clients and tokens invalidated. Claude.ai will re-register automatically on next connection.");
+      }
+    } catch (e) { alert("Failed to roll credentials: " + e.message); }
+  }
+
+  wizCopy(e, btn) {
+    const elId = btn.dataset.copyTarget;
+    const val = this.$("#" + elId)?.textContent?.trim();
+    if (!val) return;
+    navigator.clipboard.writeText(val).then(() => {
+      const orig = btn.textContent;
+      btn.textContent = "✓"; btn.classList.add("ok");
+      setTimeout(() => { btn.textContent = orig; btn.classList.remove("ok"); }, 1500);
+    }).catch(() => {});
+  }
+
+  // Step: Test — verify MCP is working
+  wizShowTest() {
+    this.wizStep = "test";
+    this.renderWizBody(`
+      <div class="wiz-desc">In a new claude.ai chat, ask Claude to run this MCP tool call to verify the connection:</div>
+      <div style="background:#030712;border:1px solid #1e293b;border-radius:6px;padding:12px;margin:10px 0;font-family:'Courier New',monospace;font-size:.82rem;color:#6ee7b7;user-select:all">
+        Use the clauth MCP tool: GET /ping — what is the response?
+      </div>
+      <div class="wiz-desc">Claude should report back: <code style="color:#4ade80">{"status":"ok","version":"..."}</code></div>
+      <div class="wiz-test-result" id="wiz-test-result"></div>
+    `, [], [
+      `<button class="btn-wiz-primary" data-action="wizMarkTestDone">✓ It Worked — Done</button>`,
+      `<button class="btn-wiz-secondary" data-action="closeSetupWizard">Close</button>`
+    ]);
+  }
+
+  wizMarkTestDone() {
+    const r = this.$("#wiz-test-result");
+    r.className = "wiz-test-result ok"; r.style.display = "block";
+    r.textContent = "✓ Tunnel and MCP are working. claude.ai can now access your vault.";
+    this.$("#wizard-foot").innerHTML = `<button class="btn-wiz-primary" data-action="closeSetupWizard">Close Setup</button>`;
+  }
+
+  get actions() {
+    return {
+      runTunnelSetup: () => this.openSetupWizard(),
+      startTunnel: () => this.toggleTunnel("start"),
+      stopTunnel: () => this.toggleTunnel("stop"),
+      testTunnel: () => this.testTunnel(),
+      openClaude: () => this.openClaude(),
+      closeSetupWizard: () => this.closeSetupWizard(),
+      onCfTokenKeydown: (e) => this.onCfTokenKeydown(e),
+      // Dispatches through window.wizSubmitCfToken (the bridge below), NOT
+      // this.wizSubmitCfToken() directly -- installWriteAccessGuards()
+      // 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.
+      wizSubmitCfToken: () => window.wizSubmitCfToken(),
+      wizSelectTunnel: (e, el) => this.wizSelectTunnel(e, el),
+      wizSaveTunnel: () => this.wizSaveTunnel(),
+      wizShowInstallCheck: () => this.wizShowInstallCheck(),
+      wizRunCreateViaCfApi: () => this.wizRunCreateViaCfApi(),
+      wizRunCfLogin: () => this.wizRunCfLogin(),
+      wizRunCreateTunnel: () => this.wizRunCreateTunnel(),
+      wizOpenClaudeAndTest: () => this.wizOpenClaudeAndTest(),
+      wizRollCreds: () => this.wizRollCreds(),
+      wizCopy: (e, btn) => this.wizCopy(e, btn),
+      wizShowTest: () => this.wizShowTest(),
+      wizMarkTestDone: () => this.wizMarkTestDone(),
+    };
+  }
+}
+customElements.define(ClauthTunnelPanel.tagName, ClauthTunnelPanel);
+
+// Write-guard bridge: 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. This thin global delegates to the real implementation on the live
+// panel instance; installWriteAccessGuards wraps THIS name, and the
+// component's own action dispatcher calls window.wizSubmitCfToken() (see
+// the `actions` getter above), never this.wizSubmitCfToken() directly, so
+// the guard is never bypassed.
+window.wizSubmitCfToken = () => {
+  const el = document.querySelector(ClauthTunnelPanel.tagName);
+  return el?.wizSubmitCfToken();
+};
+
+// Panel interface registration — see ./panel-registry.js. mount() runs
+// connectedCallback() only builds the shadow DOM (safe -- no external
+// dependency); it deliberately does NOT call mount() itself, since it fires
+// during HTML parsing, before dashboard.js (and apiFetch) has loaded. The
+// registry's mountAll() runs after every script has loaded, so THIS is the
+// first safe point to call the real mount() -- which initializes instance
+// state and starts polling.
+window.ClauthPanelRegistry.register({
+  id: "tunnel",
+  mount: () => {
+    const el = document.querySelector(ClauthTunnelPanel.tagName);
+    if (el) el.mount();
+  },
+});