feat(dashboard): "Connect Claude Code to cix" onboarding card on home

server/dashboard/src/lib/cixServer.ts

@@ -0,0 +1,31 @@
+// Derive a cix CLI server alias from the browser host. The CLI stores each
+// server as one entry under `server.<alias>` and parses that config key by
+// splitting on dots, so the alias must be dot-free (and whitespace-free, and
+// non-empty) — see validateServerName / parseServerKey in the CLI. We fold the
+// host (including any non-default port, so distinct ports get distinct aliases)
+// to [a-z0-9-]:  "cix.example.com" -> "cix-example-com",
+// "localhost:21847" -> "localhost-21847".
+//
+// Shared by the API-key "Connect the cix CLI" popup and the home-page
+// onboarding card so the two never drift.
+export function cixServerAlias(host: string): string {
+  const alias = host
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, '-')
+    .replace(/^-+|-+$/g, '');
+  return alias || 'default';
+}
+
+// Build the one-paste command that registers a server (URL + key as a single
+// `server.<alias>` entry) in the cix CLI config and makes it the default.
+// Values are shell-safe (a URL, a `cix_<hex>` key, an [a-z0-9-] alias), so no
+// quoting is needed — matching the CLI README's unquoted examples. `key`
+// defaults to a `<key>` placeholder for previews where no secret is revealed.
+export function cixConnectCommand(origin: string, host: string, key = '<key>'): string {
+  const alias = cixServerAlias(host);
+  return (
+    `cix config set server.${alias}.url ${origin} && ` +
+    `cix config set server.${alias}.key ${key} && ` +
+    `cix config set default_server ${alias}`
+  );
+}

server/dashboard/src/lib/useCopy.ts

@@ -0,0 +1,67 @@
+import { useCallback, useRef, useState } from 'react';
+import { toast } from 'sonner';
+
+// Last-resort copy when the async Clipboard API isn't available — happens on
+// plain HTTP deploys (non-localhost) and inside some embedded webviews.
+// document.execCommand('copy') is deprecated but universally implemented as of
+// 2026; keeping it as a fallback turns "no way to copy" into "always works".
+function legacyCopy(text: string): boolean {
+  if (typeof document === 'undefined') return false;
+  const ta = document.createElement('textarea');
+  ta.value = text;
+  ta.setAttribute('readonly', '');
+  ta.style.position = 'fixed';
+  ta.style.opacity = '0';
+  document.body.appendChild(ta);
+  ta.focus();
+  ta.select();
+  let ok = false;
+  try {
+    ok = document.execCommand('copy');
+  } catch {
+    ok = false;
+  }
+  document.body.removeChild(ta);
+  return ok;
+}
+
+// useCopy — one-click clipboard with a transient "copied" flag and graceful
+// fallback. navigator.clipboard requires a secure context (HTTPS or localhost);
+// on bare-IP / HTTP deploys it throws, so we fall back to document.execCommand
+// through a transient textarea. On total failure we surface a toast telling the
+// user to copy manually. `copied` flips true for `resetMs` after a success so
+// callers can show a checkmark without re-implementing the timer.
+export function useCopy(resetMs = 2000): {
+  copied: boolean;
+  copy: (text: string) => Promise<boolean>;
+} {
+  const [copied, setCopied] = useState(false);
+  const timer = useRef<number | null>(null);
+
+  const copy = useCallback(
+    async (text: string): Promise<boolean> => {
+      let ok = false;
+      try {
+        if (window.isSecureContext && navigator.clipboard?.writeText) {
+          await navigator.clipboard.writeText(text);
+          ok = true;
+        } else {
+          ok = legacyCopy(text);
+          if (!ok) throw new Error('legacy copy failed');
+        }
+      } catch {
+        toast.error('Could not copy automatically.', {
+          description: 'Select the text, ⌘A / Ctrl-A, then copy.',
+        });
+        return false;
+      }
+      setCopied(true);
+      if (timer.current) window.clearTimeout(timer.current);
+      timer.current = window.setTimeout(() => setCopied(false), resetMs);
+      return ok;
+    },
+    [resetMs]
+  );
+
+  return { copied, copy };
+}

server/dashboard/src/modules/api-keys/components/CreateApiKeyDialog.tsx

@@ -15,6 +15,7 @@ import {
 } from '@/ui/dialog';
 import { Input } from '@/ui/input';
 import { Label } from '@/ui/label';
+import { cixConnectCommand } from '@/lib/cixServer';
 import { useCreateApiKey } from '../hooks';
 
 // Last-resort copy when the async Clipboard API isn't available — happens
@@ -41,21 +42,6 @@ function legacyCopy(text: string): boolean {
   return ok;
 }
 
-// Derive a cix CLI server alias from the browser host. The CLI stores each
-// server as one entry under `server.<alias>` and parses that config key by
-// splitting on dots, so the alias must be dot-free (and whitespace-free, and
-// non-empty) — see validateServerName / parseServerKey in the CLI. We fold the
-// host (including any non-default port, so distinct ports get distinct aliases)
-// to [a-z0-9-]:  "cix.example.com" -> "cix-example-com",
-// "localhost:21847" -> "localhost-21847".
-function cixServerAlias(host: string): string {
-  const alias = host
-    .toLowerCase()
-    .replace(/[^a-z0-9]+/g, '-')
-    .replace(/^-+|-+$/g, '');
-  return alias || 'default';
-}
-
 // Two-stage dialog: collect a name, then reveal the freshly minted key once.
 // Once revealed, the dialog refuses outside-click and Escape — accidental
 // dismissal would lose the unrecoverable secret. Only the explicit "I've
@@ -121,14 +107,13 @@ export function CreateApiKeyDialog() {
   // One-paste command that registers THIS server (URL + the freshly minted key,
   // as a single `server.<alias>` entry) in the cix CLI config and makes it the
   // default. The dashboard is served same-origin from cix-server, so
-  // window.location.origin is exactly the base URL the CLI must talk to. Values
-  // are shell-safe (a URL, a `cix_<hex>` key, an [a-z0-9-] alias), so no quoting
-  // is needed — matching the CLI README's unquoted examples.
-  const alias = cixServerAlias(window.location.host);
-  const connectCmd =
-    `cix config set server.${alias}.url ${window.location.origin} && ` +
-    `cix config set server.${alias}.key ${revealed ?? '<key>'} && ` +
-    `cix config set default_server ${alias}`;
+  // window.location.origin is exactly the base URL the CLI must talk to. Shared
+  // with the home-page onboarding card via cixConnectCommand so they never drift.
+  const connectCmd = cixConnectCommand(
+    window.location.origin,
+    window.location.host,
+    revealed ?? '<key>'
+  );
 
   async function copyKey() {
     if (!revealed) return;

server/dashboard/src/modules/home/CommandBlock.tsx

@@ -0,0 +1,38 @@
+import { Check, Copy } from 'lucide-react';
+import { Button } from '@/ui/button';
+import { useCopy } from '@/lib/useCopy';
+
+// A read-only, wrapping mono command box with a one-click Copy button — same
+// look as the API-key popup's connect-command block. `command` is the literal
+// text copied to the clipboard; render it verbatim so what the user sees is
+// exactly what they paste.
+export function CommandBlock({ command }: { command: string }) {
+  const { copied, copy } = useCopy();
+  return (
+    <div className="flex items-stretch gap-2">
+      <pre className="flex-1 overflow-auto rounded-md border bg-muted p-2 font-mono text-xs whitespace-pre-wrap break-all max-h-40">
+        {command}
+      </pre>
+      <Button
+        type="button"
+        variant="secondary"
+        size="sm"
+        className="self-start"
+        onClick={() => void copy(command)}
+        aria-label="Copy command"
+      >
+        {copied ? (
+          <>
+            <Check className="mr-1 h-4 w-4" />
+            Copied
+          </>
+        ) : (
+          <>
+            <Copy className="mr-1 h-4 w-4" />
+            Copy
+          </>
+        )}
+      </Button>
+    </div>
+  );
+}