portal: copy-URL button + step-by-step connector setup

src/intervalsicu_mcp_ui/templates/account.html

@@ -29,12 +29,43 @@
   </form>
 
   <h2>Connect Claude</h2>
-  <p>Add a custom connector in Claude pointing at:</p>
-  <p><code>{{ mcp_url }}</code></p>
+  <p>Add a custom connector in Claude pointing at this URL:</p>
+  <p>
+    <code id="mcp-url">{{ mcp_url }}</code>
+    <button type="button" class="secondary" style="margin-top:0;padding:.2rem .6rem;font-size:.85rem"
+            onclick="copyMcpUrl(this)">Copy</button>
+  </p>
+
   <p class="banner warn">
     <strong>Name the connector without a dot.</strong> Use something like
     <code>intervals</code> &mdash; <em>not</em> <code>intervals.icu</code>.
     Claude Desktop and mobile currently don&rsquo;t support a <code>.</code> in the
     connector name, and it will stop the tools from loading.
   </p>
+
+  <p>Step by step:</p>
+  <ol>
+    <li>In Claude, open <strong>Settings &rarr; Connectors</strong>
+        (on claude.ai this may be <strong>Customize &rarr; Connectors</strong>).</li>
+    <li>Click <strong>Add custom connector</strong>.</li>
+    <li><strong>Name</strong> it <code>intervals</code> &mdash; letters only, <strong>no dot</strong>.</li>
+    <li><strong>URL</strong>: paste the address above (use <strong>Copy</strong>).</li>
+    <li>Click <strong>Add</strong>, then sign in with Google when prompted.</li>
+  </ol>
+
+  <script>
+    function copyMcpUrl(btn) {
+      const url = document.getElementById("mcp-url").textContent.trim();
+      const done = () => {
+        const orig = btn.textContent;
+        btn.textContent = "Copied ✓";
+        setTimeout(() => { btn.textContent = orig; }, 1500);
+      };
+      if (navigator.clipboard && navigator.clipboard.writeText) {
+        navigator.clipboard.writeText(url).then(done).catch(() => prompt("Copy this URL:", url));
+      } else {
+        prompt("Copy this URL:", url);
+      }
+    }
+  </script>
 {% endblock %}