@lifeaitools/clauth 2.1.1 → 2.10.0

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

@@ -0,0 +1,374 @@
+// cli/dashboard/panels/toolbar-panel.js
+// The main toolbar (menu bar), as a real Web Component: <clauth-toolbar-panel>.
+// Owns its own Shadow DOM: the menu bar itself, plus the two modals that are
+// genuinely this toolbar's own concern -- Change Password (chpw-*) and the
+// Enroll Machine panel/result box. Both used to be separate top-level
+// overlays in the served HTML; they now live in this panel's own shadow
+// tree, same move tunnel-panel.js made for its setup wizard.
+//
+// #add-panel (the "Add Service" form) is explicitly OUT of scope for this
+// conversion pass even though its trigger button lives in this toolbar --
+// toggleAddService() stays here as the button's owner (its data-action lives
+// in this template), but the body still reaches into the plain light-DOM
+// #add-panel via document.getElementById, unchanged, because that panel's
+// markup belongs to a different (not yet componentized) surface.
+//
+// Every onclick="globalFn()" became data-action="methodName", dispatched by
+// the shared listener in ../panel-element.js. The one <form> (Change
+// Password) needs a "submit" handler the shared listener doesn't cover
+// (click/keydown only), so mount() wires that one manually. Per-item
+// dynamic args (Windows vs Linux enrollment script) move from inline call
+// arguments to a data-target attribute read off the clicked element --
+// see wizSelectTunnel/wizCopy in tunnel-panel.js for the same pattern.
+//
+// Three of these methods -- restartDaemon, changePassword, enrollMachine --
+// are WRITE_ACTIONS (dashboard.js's installWriteAccessGuards() wraps the
+// GLOBAL name with the write-token acquire-and-retry gate; it can only do
+// that for a real global function, not a class instance method). Each keeps
+// a thin window.<name> bridge below, and the actions map dispatches to
+// window.<name>() for exactly those three, never this.<name>() directly --
+// same reasoning as tunnel-panel.js's wizSubmitCfToken bridge.
+class ClauthToolbarPanel extends window.ClauthPanelElement {
+  static tagName = "clauth-toolbar-panel";
+  static cssHref = "/dashboard/panels/toolbar-panel.css";
+
+  template() {
+    return `
+    <section class="toolbar">
+      <button class="btn-refresh" data-action="loadServices">↻ Refresh</button>
+      <button class="btn-add" data-action="toggleAddService">+ Add Service</button>
+      <button class="btn-check" id="check-btn" data-action="checkAll">⬤ Check All</button>
+      <button class="btn-lock" id="unlock-writes-btn" data-action="unlockWrites" title="Enter password to enable saving changes this browser session (needed after a daemon restart when auto-unlocked via --pw)">🔓 Unlock Writes</button>
+      <button class="btn-lock" data-action="lockVault">🔒 Lock</button>
+      <button class="btn-stop restart" data-action="restartDaemon" title="Restart daemon — keeps vault unlocked">↺ Restart</button>
+      <button class="btn-stop stop" data-action="stopDaemon" title="Stop daemon — password required on next start">⏹ Stop</button>
+      <button class="btn-cancel" style="margin-left:auto" data-action="toggleChangePw">Change Password</button>
+      <button class="btn-add" data-action="toggleEnrollPanel">+ Enroll Machine</button>
+    </section>
+
+    <div class="add-panel" id="enroll-panel" style="display:none">
+      <h3>Enroll New Machine</h3>
+      <p style="color:#94a3b8;font-size:.82rem;margin:0 0 12px">Generate a one-time script to install clauth on another computer.</p>
+      <div class="add-row">
+        <div class="add-field">
+          <label>Machine label <span style="color:#475569;font-weight:400">(e.g. laptop, server2)</span></label>
+          <input class="add-input" id="enroll-label" type="text" placeholder="new-computer" autocomplete="off" spellcheck="false">
+        </div>
+        <div class="add-field">
+          <label>Expires in (hours)</label>
+          <input class="add-input" id="enroll-ttl" type="number" min="1" max="168" value="1" style="width:80px">
+        </div>
+      </div>
+      <div style="display:flex;gap:8px;margin-top:8px">
+        <button class="btn-chpw-save" data-action="enrollMachine" data-target="windows">Windows Script</button>
+        <button class="btn-chpw-save" data-action="enrollMachine" data-target="linux">Linux Script</button>
+        <button class="btn-cancel" data-action="toggleEnrollPanel">Cancel</button>
+      </div>
+      <div id="enroll-msg" class="add-msg"></div>
+      <pre id="enroll-result" style="display:none;background:#0a0f1a;border:1px solid #1e3a5f;border-radius:6px;padding:12px;font-size:.78rem;color:#86efac;margin-top:8px;white-space:pre-wrap;word-break:break-all"></pre>
+    </div>
+
+    <div class="chpw-panel" id="chpw-panel">
+      <h3>Change Master Password</h3>
+      <form id="chpw-form" autocomplete="on">
+        <input type="text" name="username" value="clauth" autocomplete="username" style="display:none">
+        <div class="chpw-row">
+          <div class="chpw-field">
+            <label>New password</label>
+            <input class="chpw-input" id="chpw-new" type="password" placeholder="min 8 chars" autocomplete="new-password">
+          </div>
+          <div class="chpw-field">
+            <label>Confirm</label>
+            <input class="chpw-input" id="chpw-confirm" type="password" placeholder="repeat" autocomplete="new-password">
+          </div>
+        </div>
+        <div class="chpw-foot">
+          <button class="btn-chpw-save" type="submit">Update Password</button>
+          <button class="btn-cancel" type="button" data-action="toggleChangePw">Cancel</button>
+          <span class="chpw-msg" id="chpw-msg"></span>
+        </div>
+      </form>
+    </div>
+    `;
+  }
+
+  mount() {
+    // The shared delegated listener in ../panel-element.js only covers
+    // click/keydown -- a <form> submit needs its own listener. Dispatches
+    // through window.changePassword() (the write-guard bridge below), not
+    // this.changePassword() directly, for the same reason the actions map
+    // does the same for the button-driven write actions.
+    this.$("#chpw-form")?.addEventListener("submit", (e) => {
+      e.preventDefault();
+      window.changePassword();
+    });
+  }
+
+  // ── Vault lock / unlock ─────────────────────
+  async lockVault() {
+    const r = await fetch(BASE + "/lock", { method: "POST" }).then(r => r.json()).catch(() => ({}));
+    writeToken = null;
+    showLockScreen(r.hard_locked || false);
+  }
+
+  unlockWrites() {
+    // Manual unlock from the toolbar — nothing is parked, so make sure a stale
+    // park from an earlier dismissed attempt cannot ride along on this unlock.
+    clearPendingWriteAction();
+    openWriteUnlockModal();
+  }
+
+  // ── Daemon lifecycle ────────────────────────
+  async restartDaemon() {
+    if (!confirm("Restart the daemon?\n\nThe vault will stay unlocked (boot.key kept).")) return;
+    const pull = confirm("Pull latest from git and reinstall dependencies first?\n\nOK = git pull + npm install, then restart\nCancel = just restart with the code already on disk");
+    const btn = this.$('[data-action="restartDaemon"]');
+    if (btn) { btn.disabled = true; btn.textContent = pull ? "↺ Pulling latest…" : "↺ Restarting…"; }
+    try {
+      const r = await fetch(BASE + "/restart", {
+        method: "POST",
+        headers: writeHeaders({ "Content-Type": "application/json" }),
+        body: JSON.stringify({ pull })
+      });
+      if (!r.ok) {
+        const body = await r.json().catch(() => ({}));
+        alert("Restart aborted — " + (body.error || "pull/install failed") + (body.detail ? "\n\n" + body.detail : ""));
+        if (btn) { btn.disabled = false; btn.textContent = "↺ Restart"; }
+        return;
+      }
+    } catch {}
+    document.getElementById("main-view").innerHTML = '<div style="text-align:center;padding:80px 20px"><div style="font-size:3rem;margin-bottom:16px">↺</div><div style="font-size:1.1rem;color:#86efac">' + (pull ? "Pulled latest — restarting…" : "Restarting…") + '</div><div style="font-size:.85rem;color:#64748b;margin-top:8px">Page will reload automatically.</div></div>';
+  }
+
+  async stopDaemon() {
+    if (!confirm("Stop the daemon?\n\nCredentials will need to be re-entered on next start.")) return;
+    try {
+      await fetch(BASE + "/shutdown-ui", { method: "POST" });
+    } catch {}
+    document.getElementById("main-view").innerHTML = '<div style="text-align:center;padding:80px 20px"><div style="font-size:3rem;margin-bottom:16px">⏹</div><div style="font-size:1.1rem;color:#94a3b8">Daemon stopped</div><div style="font-size:.85rem;color:#64748b;margin-top:8px">Restart with: clauth serve start</div></div>';
+  }
+
+  // ── Health check-all ────────────────────────
+  async checkAll() {
+    const btn = this.$("#check-btn");
+    btn.disabled = true; btn.textContent = "Checking…";
+
+    // Cross-panel calls through the services panel's own public methods --
+    // not a DOM-id/class reach into its internals. clauth-services-panel now
+    // owns every credential dot inside its own shadow root, same boundary
+    // fix as the tunnel-panel delegation right below.
+    const servicesPanel = document.querySelector("clauth-services-panel");
+    servicesPanel?.setAllDotsChecking();
+
+    try {
+      const r = await fetch(BASE + "/check-all").then(r => r.json());
+      if (r.locked) { showLockScreen(); return; }
+      if (r.error) throw new Error(r.error);
+
+      const results = r.results || {};
+      for (const [name, result] of Object.entries(results)) {
+        if (name === "__tunnel__") {
+          // Cross-panel call through the tunnel panel's own public method --
+          // not a DOM-id reach into its internals (it's a real component
+          // with its own shadow root; this file can't see inside it any
+          // other way, which is the point).
+          const tunnelPanel = document.querySelector("clauth-tunnel-panel");
+          if (tunnelPanel?.updateHealthCheckResult) tunnelPanel.updateHealthCheckResult(result);
+          continue;
+        }
+        servicesPanel?.updateCheckResult(name, result);
+      }
+
+      // Fade green dots after 3 s — red dots stay until next check
+      setTimeout(() => servicesPanel?.fadeOkDots(), 3000);
+
+    } catch (e) {
+      servicesPanel?.resetAllDots();
+      const errBar = document.getElementById("error-bar");
+      errBar.textContent = "⚠ Check failed: " + e.message;
+      errBar.style.display = "block";
+    } finally {
+      btn.disabled = false; btn.textContent = "⬤ Check All";
+    }
+  }
+
+  // ── Change Password ─────────────────────────
+  toggleChangePw() {
+    const panel = this.$("#chpw-panel");
+    const open  = panel.style.display === "block";
+    panel.style.display = open ? "none" : "block";
+    if (!open) {
+      this.$("#chpw-new").value = "";
+      this.$("#chpw-confirm").value = "";
+      this.$("#chpw-msg").textContent = "";
+      this.$("#chpw-new").focus();
+    }
+  }
+
+  async changePassword() {
+    const newPw  = this.$("#chpw-new").value;
+    const confPw = this.$("#chpw-confirm").value;
+    const msg    = this.$("#chpw-msg");
+
+    if (!newPw) { msg.className = "chpw-msg fail"; msg.textContent = "Enter a new password."; return; }
+    if (newPw.length < 8) { msg.className = "chpw-msg fail"; msg.textContent = "Minimum 8 characters."; return; }
+    if (newPw !== confPw) { msg.className = "chpw-msg fail"; msg.textContent = "Passwords don't match."; return; }
+
+    msg.className = "chpw-msg"; msg.textContent = "Updating…";
+    try {
+      const r = await fetch(BASE + "/change-pw", {
+        method: "POST",
+        headers: writeHeaders({ "Content-Type": "application/json" }),
+        body: JSON.stringify({ newPassword: newPw })
+      }).then(r => r.json());
+
+      if (r.locked) { showLockScreen(); return; }
+      if (r.error) throw new Error(r.error);
+      writeToken = r.write_token || null;
+
+      msg.className = "chpw-msg ok"; msg.textContent = "✓ Password updated";
+      this.$("#chpw-new").value = "";
+      this.$("#chpw-confirm").value = "";
+      setTimeout(() => {
+        this.$("#chpw-panel").style.display = "none";
+        msg.textContent = "";
+      }, 2000);
+    } catch (e) {
+      msg.className = "chpw-msg fail"; msg.textContent = "✗ " + e.message;
+    }
+  }
+
+  // ── Add Service trigger (panel owned elsewhere) ─────
+  // #add-panel is NOT part of this component's shadow DOM -- it is a
+  // separate, still-light-DOM concern (out of scope for this conversion
+  // pass, per the integration brief). This method reaches into it via plain
+  // document.getElementById, exactly as it did before conversion.
+  async toggleAddService() {
+    const panel = document.getElementById("add-panel");
+    const open  = panel.style.display === "block";
+    panel.style.display = open ? "none" : "block";
+    if (!open) {
+      document.getElementById("add-name").value = "";
+      document.getElementById("add-label").value = "";
+      document.getElementById("add-description").value = "";
+      document.getElementById("add-project").value = "";
+      document.getElementById("add-msg").textContent = "";
+      // Fetch available key types from server
+      const sel = document.getElementById("add-type");
+      sel.innerHTML = '<option value="">Loading…</option>';
+      try {
+        const r = await fetch(BASE + "/meta").then(r => r.json());
+        const types = r.key_types || ["token", "secret", "keypair", "connstring", "oauth", "fileserver"];
+        sel.innerHTML = types.map(t =>
+          `<option value="${t}">${TYPE_LABELS[t] || t}</option>`
+        ).join("");
+      } catch {
+        sel.innerHTML = ["token","secret","keypair","connstring","oauth","fileserver"].map(t =>
+          `<option value="${t}">${TYPE_LABELS[t] || t}</option>`
+        ).join("");
+      }
+      document.getElementById("add-name").focus();
+    }
+  }
+
+  // ── Enroll Machine ───────────────────────────
+  toggleEnrollPanel() {
+    const panel = this.$("#enroll-panel");
+    panel.style.display = panel.style.display === "none" ? "block" : "none";
+    this.$("#enroll-msg").textContent = "";
+    this.$("#enroll-result").style.display = "none";
+  }
+
+  async enrollMachine(target) {
+    const label = this.$("#enroll-label").value.trim() || "new-computer";
+    const ttl = (Number(this.$("#enroll-ttl").value) || 1) * 60;
+    const msg = this.$("#enroll-msg");
+    const result = this.$("#enroll-result");
+    msg.className = "add-msg"; msg.textContent = "Generating enrollment code…";
+    result.style.display = "none";
+    try {
+      const r = await fetch(BASE + "/enroll-machine", {
+        method: "POST",
+        headers: writeHeaders({ "Content-Type": "application/json" }),
+        body: JSON.stringify({ label, ttl_minutes: Number(ttl), target })
+      }).then(r => r.json());
+      if (r.locked) { showLockScreen(); return; }
+      if (r.error) throw new Error(r.error);
+      msg.className = "add-msg ok";
+      msg.textContent = "✓ Enrollment code generated — script saved to:";
+      result.style.display = "block";
+      result.textContent = r.script_path + "\n\nRun this script on the new machine.\nIt installs clauth, enrolls with the one-time code, sets up auto-start, then deletes itself.\n\nExpires: " + (r.expires_at || ttl + " minutes");
+    } catch (e) {
+      msg.className = "add-msg fail";
+      msg.textContent = "✗ " + e.message;
+    }
+  }
+
+  // Public method for dashboard.js's refreshWriteLockUi() -- #unlock-writes-btn
+  // now lives inside this panel's own shadow root, so raw
+  // document.getElementById("unlock-writes-btn") from dashboard.js can no
+  // longer see it (getElementById never crosses a shadow boundary). Same fix
+  // as tunnel-panel.js's updateHealthCheckResult(): a public method the other
+  // file calls through document.querySelector("clauth-toolbar-panel"),
+  // instead of a raw DOM-id reach into this panel's internals.
+  refreshWriteLockButton(hasToken) {
+    const b = this.$("#unlock-writes-btn");
+    if (!b) return;
+    if (hasToken) { b.textContent = "🔓 Writes On"; b.style.opacity = "0.6"; b.style.borderColor = ""; }
+    else { b.textContent = "🔓 Unlock Writes"; b.style.opacity = "1"; b.style.borderColor = "#f59e0b"; }
+  }
+
+  get actions() {
+    return {
+      loadServices: () => window.loadServices(),
+      toggleAddService: () => this.toggleAddService(),
+      checkAll: () => this.checkAll(),
+      unlockWrites: () => this.unlockWrites(),
+      lockVault: () => this.lockVault(),
+      // Write-guarded -- dispatch through the window bridge, not the
+      // instance method directly, so installWriteAccessGuards()'s wrap is
+      // never bypassed. See the bridges below and tunnel-panel.js's
+      // wizSubmitCfToken for the same reasoning.
+      restartDaemon: () => window.restartDaemon(),
+      stopDaemon: () => this.stopDaemon(),
+      toggleChangePw: () => this.toggleChangePw(),
+      toggleEnrollPanel: () => this.toggleEnrollPanel(),
+      enrollMachine: (e, el) => window.enrollMachine(el.dataset.target),
+    };
+  }
+}
+customElements.define(ClauthToolbarPanel.tagName, ClauthToolbarPanel);
+
+// Write-guard bridges: installWriteAccessGuards() (dashboard.js) wraps each of
+// these names by reassigning window[name] to a guarded version -- it can only
+// do that for a real global function, not a class instance method. These thin
+// globals delegate to the real implementation on the live panel instance; the
+// actions getter above (and the manual #chpw-form submit listener in
+// mount()) call window.<name>(), never this.<name>() directly, so the guard
+// is never bypassed. Same pattern as tunnel-panel.js's wizSubmitCfToken bridge.
+window.restartDaemon = () => {
+  const el = document.querySelector(ClauthToolbarPanel.tagName);
+  return el?.restartDaemon();
+};
+window.changePassword = () => {
+  const el = document.querySelector(ClauthToolbarPanel.tagName);
+  return el?.changePassword();
+};
+window.enrollMachine = (target) => {
+  const el = document.querySelector(ClauthToolbarPanel.tagName);
+  return el?.enrollMachine(target);
+};
+
+// Panel interface registration — see ./panel-registry.js. 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 its globals) has loaded. The registry's
+// mountAll() runs after every script has loaded, so THIS is the first safe
+// point to call the real mount().
+window.ClauthPanelRegistry.register({
+  id: "toolbar",
+  mount: () => {
+    const el = document.querySelector(ClauthToolbarPanel.tagName);
+    if (el) el.mount();
+  },
+});

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

@@ -0,0 +1,61 @@
+/* cli/dashboard/panels/tunnel-panel.css
+   The tunnel bar (data-panel="tunnel-bar") plus its Cloudflare tunnel-setup
+   wizard modal -- both owned entirely by tunnel-panel.js. Depends on the
+   tokens in ../global.css, loaded before this file. */
+.tunnel-panel{background:#0f1d2d;border:1px solid var(--border-dark);border-radius:8px;padding:1rem 1.25rem;margin-bottom:1.25rem;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
+.tunnel-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
+.tunnel-dot.off{background:var(--grey-dim)}
+.tunnel-dot.starting{background:var(--orange);animation:pulse 1s infinite}
+.tunnel-dot.on{background:var(--green-bright);animation:pulse 2s infinite}
+.tunnel-dot.err{background:var(--red-bright)}
+.tunnel-label{font-size:.85rem;color:var(--grey);flex:1}
+.tunnel-label strong{color:var(--text-bright)}
+.tunnel-url{font-family:'Courier New',monospace;font-size:.78rem;color:var(--blue-light);word-break:break-all}
+.tunnel-url a{color:var(--blue-light);text-decoration:none}
+.tunnel-url a:hover{text-decoration:underline}
+.btn-claude{background:linear-gradient(135deg,var(--copper),var(--orange));color:var(--bg-darker);padding:8px 18px;font-size:.85rem;border-radius:7px;border:none;cursor:pointer;font-weight:700;letter-spacing:.3px;transition:all .15s;white-space:nowrap}
+.btn-claude:hover{filter:brightness(1.1);transform:translateY(-1px)}
+.btn-claude:disabled{opacity:.4;cursor:not-allowed;transform:none;filter:none}
+.btn-tunnel-stop{background:var(--bg-card);color:var(--red);border:1px solid var(--border);padding:6px 12px;font-size:.8rem;border-radius:6px;cursor:pointer;font-weight:500}
+.btn-tunnel-stop:hover{background:#2d1f1f;border-color:var(--red)}
+.tunnel-err{font-size:.78rem;color:var(--red);width:100%;margin-top:4px}
+.mcp-row{display:flex;align-items:center;gap:8px;margin-bottom:8px}
+.mcp-label{font-size:.72rem;color:var(--grey-dim);min-width:80px;text-transform:uppercase;letter-spacing:.5px;font-weight:600}
+.mcp-val{flex:1;font-family:'Courier New',monospace;font-size:.82rem;color:var(--blue-light);background:var(--bg-darker);border:1px solid var(--border-dark);border-radius:4px;padding:6px 10px;word-break:break-all;user-select:all}
+.mcp-copy{background:none;border:1px solid var(--border);color:var(--grey);border-radius:4px;padding:4px 8px;cursor:pointer;font-size:.75rem;font-family:'Courier New',monospace;transition:all .15s;flex-shrink:0}
+.mcp-copy:hover{border-color:var(--blue-light);color:var(--blue-light)}
+.mcp-copy.ok{border-color:var(--green);color:var(--green)}
+/* Tunnel setup wizard */
+.wizard-panel{background:#0a1628;border:1px solid var(--border-dark);border-radius:10px;padding:1.5rem;margin-bottom:1.25rem;display:none}
+.wizard-panel.open{display:block}
+.wizard-header{display:flex;align-items:center;gap:10px;margin-bottom:1.25rem}
+.wizard-title{font-size:1rem;font-weight:600;color:var(--text-white);flex:1}
+.wizard-steps{display:flex;gap:6px;margin-bottom:1.5rem;flex-wrap:wrap}
+.wstep{padding:4px 10px;border-radius:20px;font-size:.72rem;font-weight:600;border:1px solid var(--border-dark);color:var(--grey-darker);background:var(--bg-dark)}
+.wstep.active{border-color:var(--blue);color:var(--blue-light);background:rgba(59,130,246,.1)}
+.wstep.done{border-color:var(--green-dark);color:var(--green);background:rgba(74,222,128,.08)}
+.wizard-body{min-height:80px}
+.wizard-foot{display:flex;gap:8px;margin-top:1.25rem;align-items:center}
+.btn-wiz-primary{background:var(--blue);color:var(--white);padding:8px 20px;font-size:.875rem;border-radius:7px;border:none;cursor:pointer;font-weight:600}
+.btn-wiz-primary:hover{background:var(--blue-dark)}
+.btn-wiz-primary:disabled{opacity:.4;cursor:not-allowed}
+.btn-wiz-secondary{background:var(--bg-card);color:var(--grey);padding:8px 16px;font-size:.875rem;border-radius:7px;border:1px solid var(--border);cursor:pointer}
+.btn-wiz-secondary:hover{color:var(--text-bright)}
+.wiz-input{width:100%;background:var(--bg-dark);border:1px solid var(--border);border-radius:6px;color:var(--text-bright);font-family:'Courier New',monospace;font-size:.9rem;padding:9px 12px;outline:none;margin-top:8px;transition:border-color .2s}
+.wiz-input:focus{border-color:var(--blue)}
+.wiz-label{font-size:.8rem;color:var(--amber);margin-bottom:4px}
+.wiz-msg{font-size:.82rem;margin-left:auto}
+.wiz-msg.ok{color:var(--green)}.wiz-msg.fail{color:var(--red)}
+.wiz-log{background:#030712;border:1px solid var(--bg-card);border-radius:6px;padding:10px;font-family:'Courier New',monospace;font-size:.75rem;color:#6ee7b7;max-height:160px;overflow-y:auto;margin-top:10px;white-space:pre-wrap}
+.wiz-tunnel-list{display:flex;flex-direction:column;gap:8px;margin-top:10px}
+.wiz-tunnel-item{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--bg-dark);border:1px solid var(--border-dark);border-radius:6px;cursor:pointer;transition:border-color .15s}
+.wiz-tunnel-item:hover,.wiz-tunnel-item.selected{border-color:var(--blue);background:rgba(59,130,246,.08)}
+.wiz-tunnel-name{font-weight:600;color:var(--text-white);font-size:.9rem;flex:1}
+.wiz-tunnel-id{font-family:'Courier New',monospace;font-size:.72rem;color:var(--grey-darker)}
+.wiz-tunnel-status{font-size:.72rem;padding:2px 7px;border-radius:4px;background:rgba(74,222,128,.1);color:var(--green);border:1px solid rgba(74,222,128,.2)}
+.wiz-desc{font-size:.85rem;color:var(--grey);line-height:1.6;margin-bottom:.75rem}
+.wiz-link{color:var(--blue-light);text-decoration:none;font-size:.82rem}
+.wiz-link:hover{text-decoration:underline}
+.wiz-test-result{padding:12px 14px;border-radius:8px;font-size:.85rem;margin-top:10px;display:none}
+.wiz-test-result.ok{background:rgba(74,222,128,.08);border:1px solid rgba(74,222,128,.2);color:var(--green)}
+.wiz-test-result.fail{background:rgba(248,113,113,.08);border:1px solid rgba(248,113,113,.2);color:var(--red)}