fluxy-bot 0.5.61 → 0.5.63

package/README.md

@@ -9,10 +9,12 @@ A self-hosted AI agent that runs on the user's machine with a full-stack workspa
 Fluxy is three separate codebases working together:
 
 1. **Fluxy Bot** (this repo) -- runs on the user's machine. Supervisor process, worker API, workspace app, chat UI.
-2. **Fluxy Relay** (separate server at `api.fluxy.bot`) -- cloud service that maps `username.fluxy.bot` to the user's Cloudflare tunnel. Routes HTTP and WebSocket traffic.
-3. **Cloudflare Quick Tunnel** -- ephemeral tunnel created by `cloudflared` binary, exposes `localhost:3000` to the internet via a random `*.trycloudflare.com` URL.
+2. **Fluxy Relay** (separate server at `api.fluxy.bot`) -- optional cloud service that maps `username.fluxy.bot` to the user's Cloudflare tunnel. Routes HTTP and WebSocket traffic. Only used with Quick Tunnels.
+3. **Cloudflare Tunnel** -- exposes `localhost:3000` to the internet. Two modes:
+   - **Quick Tunnel** -- zero-config, no account needed, random `*.trycloudflare.com` URL that changes on restart. Optionally paired with the relay for a permanent domain.
+   - **Named Tunnel** -- persistent URL with the user's own domain. Requires a Cloudflare account and DNS setup. No relay needed.
 
-The relay gives users a permanent domain. The tunnel gives the relay a target. The supervisor ties everything together locally.
+The user chooses their tunnel mode during `fluxy init` via an interactive selector.
 
 ---
 
@@ -30,7 +32,7 @@ Supervisor (supervisor/index.ts)        port 3000    HTTP server + WebSocket + r
   +-- Worker (worker/index.ts)          port 3001    Express API, SQLite, auth, conversations
   +-- Vite Dev Server                   port 3002    Serves workspace/client with HMR
   +-- Backend (workspace/backend/)      port 3004    User's custom Express server
-  +-- cloudflared (tunnel)              --           Exposes port 3000 to the internet
+  +-- cloudflared (tunnel)              --           Exposes port 3000 to the internet (quick or named)
   +-- Scheduler (supervisor/scheduler)  --           PULSE + CRON job runner (in-process)
 ```
 
@@ -58,8 +60,8 @@ WebSocket upgrades:
 - Everything else -- proxied to Vite dev server for HMR.
 
 The supervisor also:
-- Manages the Cloudflare tunnel lifecycle (start, stop, health watchdog every 30s)
-- Registers with the relay and maintains heartbeats
+- Manages the Cloudflare tunnel lifecycle (start, stop, health watchdog every 30s) for both quick and named tunnels
+- Registers with the relay and maintains heartbeats (quick tunnel mode only)
 - Runs the Claude Agent SDK when users send chat messages
 - Restarts the backend process when Claude edits workspace files
 - Broadcasts `app:hmr-update` to all connected dashboard clients after file changes
@@ -299,35 +301,68 @@ For non-Anthropic providers (OpenAI, Ollama), the supervisor falls back to `ai.c
 
 The user's machine is behind NAT. We need a public URL so they can access their bot from their phone.
 
-### Solution: Three Tiers
+### Tunnel Modes
+
+The user selects a tunnel mode during `fluxy init`. The mode is stored in `~/.fluxy/config.json` as `tunnel.mode`.
+
+#### Quick Tunnel (default)
+
+Zero configuration. No Cloudflare account needed.
 
 ```
 Phone browser
   |
-  | https://bruno.fluxy.bot
+  | https://bruno.fluxy.bot          (via relay, optional)
   v
-Fluxy Relay (api.fluxy.bot)        Cloud server, maps username -> tunnel URL
+Fluxy Relay (api.fluxy.bot)          Cloud server, maps username -> tunnel URL
   |
   | https://random-abc.trycloudflare.com
   v
-Cloudflare Quick Tunnel            Ephemeral tunnel, changes on restart
+Cloudflare Quick Tunnel              Ephemeral tunnel, changes on restart
   |
   | http://localhost:3000
   v
-Supervisor                         User's machine
+Supervisor                           User's machine
 ```
 
-### Cloudflare Tunnel (supervisor/tunnel.ts)
-
-- Auto-downloads `cloudflared` binary to `~/.fluxy/bin/` on first run (validates minimum 10MB file size)
 - Spawns: `cloudflared tunnel --url http://localhost:3000 --no-autoupdate`
 - Extracts tunnel URL from stdout (regex match for `*.trycloudflare.com`)
+- URL changes on every restart -- the relay provides the stable domain layer on top
+- Optionally register with Fluxy Relay for a permanent `my.fluxy.bot/username` or `fluxy.bot/username` URL
+
+#### Named Tunnel
+
+Persistent URL with the user's own domain. Requires a Cloudflare account + domain.
+
+```
+Phone browser
+  |
+  | https://bot.mydomain.com
+  v
+Cloudflare Named Tunnel              Persistent tunnel, URL never changes
+  |
+  | http://localhost:3000
+  v
+Supervisor                           User's machine
+```
+
+- Setup via `fluxy tunnel setup` (interactive: login, create tunnel, generate config, print CNAME instructions)
+- Spawns: `cloudflared tunnel --config <configPath> run <name>`
+- URL is the user's domain (from config), no stdout parsing needed
+- No relay needed -- the user's domain is already permanent
+- Requires a DNS CNAME record pointing to `<uuid>.cfargotunnel.com`
+
+### Cloudflare Tunnel Binary (supervisor/tunnel.ts)
+
+- Auto-downloads `cloudflared` binary to `~/.fluxy/bin/` on first run (validates minimum 10MB file size)
 - Health check: HEAD request to tunnel URL with 5s timeout
 - Watchdog runs every 30s, detects sleep/wake gaps (>60s between ticks), auto-restarts dead tunnels
+- Quick tunnel restart: re-extracts new URL from stdout, updates relay if configured
+- Named tunnel restart: restarts the process, URL doesn't change
 
-### Relay Server (separate codebase)
+### Relay Server (separate codebase, Quick Tunnel only)
 
-Node.js/Express + http-proxy + MongoDB. Hosted on Railway.
+Node.js/Express + http-proxy + MongoDB. Hosted on Railway. Only used when the user opts into Quick Tunnel mode and registers a handle.
 
 **Registration flow:**
 1. User picks a username during onboarding
@@ -392,13 +427,30 @@ The CLI is the user-facing entry point. Commands:
 
 | Command | Description |
 |---|---|
-| `fluxy init` | First-time setup: creates config, installs cloudflared, boots server, optionally installs systemd daemon |
+| `fluxy init` | First-time setup: interactive tunnel mode chooser (Quick or Named), creates config, installs cloudflared, boots server, optionally installs systemd daemon |
 | `fluxy start` | Boot the supervisor (or detect existing daemon and show status) |
-| `fluxy status` | Health check via `/api/health`, shows uptime and relay URL |
+| `fluxy status` | Health check via `/api/health`, shows uptime, tunnel URL, and relay URL |
 | `fluxy update` | Downloads latest from npm registry, updates code directories, rebuilds UI, restarts daemon |
+| `fluxy tunnel` | Named tunnel management (subcommands below) |
 | `fluxy daemon` | Linux systemd management: install, start, stop, restart, status, logs, uninstall |
 
-The CLI spawns the supervisor via `node --import tsx/esm supervisor/index.ts` and waits for readiness markers on stdout (`__TUNNEL_URL__`, `__RELAY_URL__`, `__VITE_WARM__`, `__READY__`) with a 45-second timeout.
+**`fluxy tunnel` subcommands:**
+| Subcommand | Description |
+|---|---|
+| `fluxy tunnel setup` | Interactive named tunnel setup: login to Cloudflare, create tunnel, enter domain, generate config YAML, print CNAME instructions |
+| `fluxy tunnel status` | Show current tunnel mode and configuration |
+| `fluxy tunnel reset` | Switch back to quick tunnel mode |
+
+**`fluxy init` tunnel chooser:**
+
+During init, the user is presented with an interactive arrow-key menu to choose their tunnel mode:
+
+- **Quick Tunnel** (Easy and Fast) -- Random CloudFlare tunnel URL on every start/update. Optionally use Fluxy Relay for a permanent `my.fluxy.bot/username` handle (free) or a premium `fluxy.bot/username` handle ($5 one-time).
+- **Named Tunnel** (Advanced) -- Persistent URL with your own domain. Requires a Cloudflare account + domain. Use a subdomain like `bot.yourdomain.com` or the root domain.
+
+If Named Tunnel is selected, `fluxy init` immediately runs the named tunnel setup flow inline (same as `fluxy tunnel setup`).
+
+The CLI spawns the supervisor via `node --import tsx/esm supervisor/index.ts` and waits for readiness markers on stdout (`__TUNNEL_URL__`, `__RELAY_URL__`, `__VITE_WARM__`, `__READY__`, `__TUNNEL_FAILED__`) with a 45-second timeout.
 
 On Linux, `fluxy daemon` generates a systemd unit file that runs the supervisor as a service with auto-restart on failure.
 
@@ -428,7 +480,8 @@ Windows: `scripts/install.ps1` (PowerShell equivalent).
 
 | Path | Contents |
 |---|---|
-| `~/.fluxy/config.json` | Port, username, AI provider, relay token, tunnel URL |
+| `~/.fluxy/config.json` | Port, username, AI provider, tunnel mode/config, relay token, tunnel URL |
+| `~/.fluxy/cloudflared-config.yml` | Named tunnel config (generated by `fluxy tunnel setup`) |
 | `~/.fluxy/memory.db` | SQLite -- conversations, messages, settings, sessions, push subscriptions |
 | `~/.fluxy/bin/cloudflared` | Cloudflare tunnel binary |
 | `~/.fluxy/workspace/` | User's workspace copy (client, backend, memory files, skills, config) |
@@ -448,7 +501,7 @@ supervisor/
   index.ts                          HTTP server, request routing, WebSocket handler, process orchestration
   worker.ts                         Worker process spawn/stop/restart
   backend.ts                        Backend process spawn/stop/restart
-  tunnel.ts                         Cloudflare tunnel lifecycle, health watchdog
+  tunnel.ts                         Cloudflare tunnel lifecycle (quick + named), health watchdog
   vite-dev.ts                       Vite dev server startup for dashboard HMR
   fluxy-agent.ts                    Claude Agent SDK wrapper, session management, memory injection
   scheduler.ts                      PULSE + CRON scheduler, 60s tick, push notification dispatch
@@ -531,8 +584,8 @@ The relay couldn't reliably forward POST bodies (now fixed). WebSocket was the w
 **Why bypassPermissions on the agent?**
 The whole point is that the user talks to Claude from their phone and Claude does whatever's needed. Confirmation prompts would require a terminal session that doesn't exist. The workspace directory boundary + the system prompt are the safety rails.
 
-**Why Cloudflare Quick Tunnel instead of a persistent tunnel?**
-Zero configuration. No Cloudflare account needed. The tradeoff is the URL changes on restart, which is why the relay exists -- it provides the stable domain layer on top.
+**Why two tunnel modes?**
+Quick Tunnel is the default for simplicity -- zero configuration, no Cloudflare account needed. The tradeoff is the URL changes on restart, which is why the relay exists as an optional stable domain layer. Named Tunnel is for advanced users who want full control -- their own domain, no dependency on the relay, permanent URLs. Both modes are offered during `fluxy init`.
 
 **Why two Vite configs?**
 `vite.config.ts` builds the workspace dashboard (user-facing app). `vite.fluxy.config.ts` builds the Fluxy chat SPA. They're separate apps with separate entry points, bundled independently. The chat is pre-built at publish time; the dashboard runs as a dev server with HMR.

package/bin/cli.js

@@ -140,11 +140,12 @@ function chooseTunnelMode() {
       {
         label: 'Quick Tunnel',
         mode: 'quick',
-        tag: 'FREE',
+        tag: 'Easy and Fast',
         tagColor: c.green,
         desc: [
-          'Random CloudFlare tunnel URL on every start',
-          `Optional: ${c.reset}${c.pink}fluxy.bot/YOURBOT${c.reset}${c.dim} custom handle via Fluxy relay`,
+          'Random CloudFlare tunnel URL on every start/update',
+          `Optional: Use Fluxy Relay Server and access your bot at ${c.reset}${c.pink}my.fluxy.bot/YOURBOT${c.reset}${c.dim} (Free)`,
+          `Or use a premium handle like ${c.reset}${c.pink}fluxy.bot/YOURBOT${c.reset}${c.dim} ($5 one-time fee)`,
         ],
       },
       {
@@ -155,6 +156,7 @@ function chooseTunnelMode() {
         desc: [
           'Persistent URL with your own domain',
           'Requires a CloudFlare account + domain',
+          `Use a subdomain like ${c.reset}${c.white}bot.YOURDOMAIN.COM${c.reset}${c.dim} or the root domain`,
         ],
       },
     ];
@@ -403,6 +405,28 @@ function banner() {
   ${c.dim}v${pkg.version} · Self-hosted AI agent${c.reset}`);
 }
 
+function tunnelFailedMessage(localUrl) {
+  console.log(`
+  ${c.dim}─────────────────────────────────${c.reset}
+
+  ${c.yellow}⚠${c.reset}  ${c.bold}${c.white}Tunnel failed to connect${c.reset}
+
+  ${c.dim}CloudFlare quick tunnels are rate-limited.${c.reset}
+  ${c.dim}This usually resolves itself after a few minutes.${c.reset}
+
+  ${c.bold}${c.white}Your dashboard is available locally:${c.reset}
+
+  ${c.blue}${c.bold}${link(localUrl)}${c.reset}
+  ${c.dim}(cmd+click or ctrl+click to open)${c.reset}
+
+  ${c.bold}${c.white}To retry the tunnel:${c.reset}
+  ${c.pink}fluxy start${c.reset}
+
+  ${c.bold}${c.white}For a persistent tunnel, use a named tunnel:${c.reset}
+  ${c.pink}fluxy tunnel setup${c.reset}
+`);
+}
+
 function finalMessage(tunnelUrl, relayUrl) {
   console.log(`
   ${c.dim}─────────────────────────────────${c.reset}
@@ -539,6 +563,7 @@ function bootServer({ onTunnelUp, onReady } = {}) {
     let resolved = false;
     let stderrBuf = '';
     let tunnelFired = false;
+    let tunnelFailed = false;
 
     // Vite warmup tracking
     let viteWarmResolve;
@@ -554,6 +579,7 @@ function bootServer({ onTunnelUp, onReady } = {}) {
         child,
         tunnelUrl: tunnelUrl || `http://localhost:${config.port}`,
         relayUrl: relayUrl || config.relay?.url || null,
+        tunnelFailed,
         viteWarm,
       });
     };
@@ -580,6 +606,7 @@ function bootServer({ onTunnelUp, onReady } = {}) {
       }
 
       if (text.includes('__TUNNEL_FAILED__')) {
+        tunnelFailed = true;
         doResolve();
       }
     };
@@ -687,7 +714,7 @@ async function init() {
     console.error(`  ${c.dim}${err.message}${c.reset}\n`);
     process.exit(1);
   }
-  const { child, tunnelUrl, relayUrl, viteWarm } = result;
+  const { child, tunnelUrl, relayUrl, tunnelFailed, viteWarm } = result;
 
   // Wait for Vite to finish pre-transforming all modules (with timeout)
   await Promise.race([viteWarm, new Promise(r => setTimeout(r, 30_000))]);
@@ -704,7 +731,11 @@ async function init() {
     });
     stepper.advance();
     stepper.finish();
-    finalMessage(tunnelUrl, relayUrl);
+    if (tunnelFailed) {
+      tunnelFailedMessage(tunnelUrl);
+    } else {
+      finalMessage(tunnelUrl, relayUrl);
+    }
     if (res.status === 0) {
       console.log(`  ${c.blue}✔${c.reset}  Daemon installed — Fluxy will auto-start on boot.`);
     } else {
@@ -715,7 +746,11 @@ async function init() {
   }
 
   stepper.finish();
-  finalMessage(tunnelUrl, relayUrl);
+  if (tunnelFailed) {
+    tunnelFailedMessage(tunnelUrl);
+  } else {
+    finalMessage(tunnelUrl, relayUrl);
+  }
 
   child.stdout.on('data', (d) => {
     process.stdout.write(`  ${c.dim}${d.toString().trim()}${c.reset}\n`);
@@ -795,7 +830,7 @@ async function start() {
     console.error(`  ${c.dim}${err.message}${c.reset}\n`);
     process.exit(1);
   }
-  const { child, tunnelUrl, relayUrl, viteWarm } = result;
+  const { child, tunnelUrl, relayUrl, tunnelFailed, viteWarm } = result;
 
   // Wait for Vite to finish pre-transforming all modules (with timeout)
   await Promise.race([viteWarm, new Promise(r => setTimeout(r, 30_000))]);
@@ -812,7 +847,11 @@ async function start() {
     });
     stepper.advance();
     stepper.finish();
-    finalMessage(tunnelUrl, relayUrl);
+    if (tunnelFailed) {
+      tunnelFailedMessage(tunnelUrl);
+    } else {
+      finalMessage(tunnelUrl, relayUrl);
+    }
     if (res.status === 0) {
       console.log(`  ${c.blue}✔${c.reset}  Daemon installed — Fluxy will auto-start on boot.`);
     } else {
@@ -823,7 +862,11 @@ async function start() {
   }
 
   stepper.finish();
-  finalMessage(tunnelUrl, relayUrl);
+  if (tunnelFailed) {
+    tunnelFailedMessage(tunnelUrl);
+  } else {
+    finalMessage(tunnelUrl, relayUrl);
+  }
 
   child.stdout.on('data', (d) => {
     process.stdout.write(`  ${c.dim}${d.toString().trim()}${c.reset}\n`);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fluxy-bot",
-  "version": "0.5.61",
+  "version": "0.5.63",
   "releaseNotes": [
     "Fixed some bugs to iOs ",
     "2. ",

package/supervisor/chat/OnboardWizard.tsx

@@ -127,6 +127,12 @@ export default function OnboardWizard({ onComplete, isInitialSetup = false, onSa
   const [registeredUrl, setRegisteredUrl] = useState('');
   const handleDebounce = useRef<ReturnType<typeof setTimeout> | null>(null);
 
+  // Tunnel mode (step 2 branching)
+  const [tunnelMode, setTunnelMode] = useState<'quick' | 'named'>('quick');
+  const [tunnelDomain, setTunnelDomain] = useState('');
+  const [tunnelUrl, setTunnelUrl] = useState('');
+  const [handleChoice, setHandleChoice] = useState<'tunnel' | 'relay'>('relay');
+
   // Existing handle (for re-run / change flow)
   const [existingHandle, setExistingHandle] = useState<{ username: string; tier: string; url: string } | null>(null);
   const [showChangeConfirm, setShowChangeConfirm] = useState(false);
@@ -173,6 +179,11 @@ export default function OnboardWizard({ onComplete, isInitialSetup = false, onSa
         if (data.provider) setProvider(data.provider);
         if (data.model) setModel(data.model);
         if (data.whisperEnabled) { setWhisperEnabled(true); setWhisperKey(data.whisperKey || ''); }
+        if (data.tunnelMode) setTunnelMode(data.tunnelMode);
+        if (data.tunnelDomain) setTunnelDomain(data.tunnelDomain);
+        if (data.tunnelUrl) setTunnelUrl(data.tunnelUrl);
+        // If user has existing handle, default to 'relay'; otherwise default to 'tunnel'
+        if (!data.handle) setHandleChoice('tunnel');
         prefillDone.current = true;
       })
       .catch(() => { prefillDone.current = true; });
@@ -462,7 +473,11 @@ export default function OnboardWizard({ onComplete, isInitialSetup = false, onSa
     switch (step) {
       case 0: return true;
       case 1: return userName.trim().length > 0;
-      case 2: return registered;
+      case 2: {
+        if (tunnelMode === 'named') return true;
+        if (handleChoice === 'tunnel') return true;
+        return registered;
+      }
       case 3: return portalCanContinue;
       case 4: return !!(provider && model && isConnected);
       case 5: return true;
@@ -608,190 +623,306 @@ export default function OnboardWizard({ onComplete, isInitialSetup = false, onSa
             )}
 
             {/* ── Step 2: Name your bot + Claim handle ── */}
-            {step === 2 && (
+            {step === 2 && tunnelMode === 'named' && (
+              <div>
+                <h1 className="text-xl font-bold text-white tracking-tight">
+                  Your Bot's Domain
+                </h1>
+                <p className="text-white/40 text-[13px] mt-1.5 leading-relaxed">
+                  Your named tunnel is configured with a custom domain.
+                </p>
+
+                <div className="mt-5 flex items-center gap-2 bg-white/[0.03] border border-white/[0.06] rounded-xl px-4 py-3">
+                  <span className="font-mono text-[13px] text-white/70 truncate flex-1 text-left">https://{tunnelDomain}</span>
+                  <button
+                    onClick={() => {
+                      navigator.clipboard.writeText(`https://${tunnelDomain}`);
+                      setPortalCopied(true);
+                      setTimeout(() => setPortalCopied(false), 2000);
+                    }}
+                    className="shrink-0 text-white/30 hover:text-white/60 transition-colors"
+                  >
+                    {portalCopied ? (
+                      <Check className="h-4 w-4 text-emerald-400" />
+                    ) : (
+                      <ClipboardPaste className="h-4 w-4" />
+                    )}
+                  </button>
+                </div>
+
+                <button
+                  onClick={next}
+                  className="w-full mt-5 py-3 bg-gradient-brand hover:opacity-90 text-white text-[14px] font-semibold rounded-full transition-colors flex items-center justify-center gap-2"
+                >
+                  Continue
+                  <ArrowRight className="h-4 w-4" />
+                </button>
+              </div>
+            )}
+
+            {step === 2 && tunnelMode === 'quick' && (
               <div>
                 <h1 className="text-xl font-bold text-white tracking-tight">
                   Name your bot
                 </h1>
                 <p className="text-white/40 text-[13px] mt-1.5 leading-relaxed">
-                  This is your bot's name and permanent handle — access it from anywhere.
+                  Choose how you'll access your bot from anywhere.
                 </p>
 
-                {/* Existing handle banner */}
-                {existingHandle && registered && !showChangeConfirm && (
-                  <>
-                    <div className="mt-4 bg-emerald-500/8 border border-emerald-500/15 rounded-xl px-4 py-3">
-                      <div className="flex items-center gap-2">
-                        <Check className="h-4 w-4 text-emerald-400" />
-                        <p className="text-emerald-400/90 text-[13px] font-medium">Current handle</p>
-                      </div>
-                      <p className="text-emerald-400/60 text-[12px] mt-1 font-mono">{registeredUrl}</p>
-                    </div>
-                    <div className="flex gap-2 mt-4">
-                      <button
-                        onClick={next}
-                        className="flex-1 py-3 bg-gradient-brand hover:opacity-90 text-white text-[14px] font-semibold rounded-full transition-colors flex items-center justify-center gap-2"
-                      >
-                        Continue
-                        <ArrowRight className="h-4 w-4" />
-                      </button>
-                      <button
-                        onClick={() => {
-                          setShowChangeConfirm(true);
-                          setRegistered(false);
-                          setBotName('');
-                          setHandleStatus(null);
-                          setTierAvailability({});
-                        }}
-                        className="px-5 py-3 bg-white/[0.04] hover:bg-white/[0.08] border border-white/[0.08] text-white/60 text-[13px] font-medium rounded-full transition-colors"
-                      >
-                        Change
-                      </button>
+                {/* Option cards */}
+                <div className="space-y-2 mt-5">
+                  <button
+                    onClick={() => setHandleChoice('tunnel')}
+                    className={`w-full text-left px-4 py-3 rounded-xl border transition-all duration-200 ${
+                      handleChoice === 'tunnel'
+                        ? 'border-[#04D1FE]/40 bg-[#04D1FE]/[0.06]'
+                        : 'border-white/[0.06] bg-transparent hover:border-white/10 hover:bg-white/[0.02]'
+                    }`}
+                  >
+                    <div className="flex items-center justify-between">
+                      <span className="text-[13px] font-medium text-white/80">Random Tunnel URL</span>
+                      <span className="text-[11px] font-medium px-2.5 py-0.5 rounded-full border bg-emerald-500/10 text-emerald-400 border-emerald-500/20">Free</span>
                     </div>
-                  </>
-                )}
+                    <p className="text-white/35 text-[11px] mt-1 leading-relaxed">
+                      Every start, restart, or update will generate a new random URL like <span className="font-mono">abc-xyz.trycloudflare.com</span>. You can bookmark it or use your tunnel URL directly.
+                    </p>
+                  </button>
 
-                {/* Change confirmation alert */}
-                {showChangeConfirm && !registered && (
-                  <div className="mt-4 bg-amber-500/8 border border-amber-500/20 rounded-xl px-4 py-3">
-                    <p className="text-amber-400/90 text-[13px] font-medium">Changing your handle</p>
-                    <p className="text-amber-400/60 text-[12px] mt-1">
-                      Your current handle <span className="font-mono">{existingHandle?.url}</span> will be released and become available for others.
+                  <button
+                    onClick={() => setHandleChoice('relay')}
+                    className={`w-full text-left px-4 py-3 rounded-xl border transition-all duration-200 ${
+                      handleChoice === 'relay'
+                        ? 'border-[#AF27E3]/40 bg-[#AF27E3]/[0.06]'
+                        : 'border-white/[0.06] bg-transparent hover:border-white/10 hover:bg-white/[0.02]'
+                    }`}
+                  >
+                    <div className="flex items-center justify-between">
+                      <span className="text-[13px] font-medium text-white/80">Custom Domain via Fluxy Relay</span>
+                      <span className="text-[11px] font-medium px-2.5 py-0.5 rounded-full border bg-[#AF27E3]/15 text-[#AF27E3] border-[#AF27E3]/20">Permanent</span>
+                    </div>
+                    <p className="text-white/35 text-[11px] mt-1 leading-relaxed">
+                      Get a permanent domain that never changes. Choose a free <span className="font-mono">my.fluxy.bot/name</span> or premium <span className="font-mono">fluxy.bot/name</span> handle.
                     </p>
+                  </button>
+                </div>
+
+                {/* Random Tunnel URL — show current URL when selected */}
+                {handleChoice === 'tunnel' && (
+                  <div className="mt-4">
+                    {tunnelUrl ? (
+                      <div className="flex items-center gap-2 bg-white/[0.03] border border-white/[0.06] rounded-xl px-4 py-3">
+                        <span className="font-mono text-[13px] text-white/70 truncate flex-1 text-left">{tunnelUrl}</span>
+                        <button
+                          onClick={() => {
+                            const url = tunnelUrl.startsWith('http') ? tunnelUrl : `https://${tunnelUrl}`;
+                            navigator.clipboard.writeText(url);
+                            setPortalCopied(true);
+                            setTimeout(() => setPortalCopied(false), 2000);
+                          }}
+                          className="shrink-0 text-white/30 hover:text-white/60 transition-colors"
+                        >
+                          {portalCopied ? (
+                            <Check className="h-4 w-4 text-emerald-400" />
+                          ) : (
+                            <ClipboardPaste className="h-4 w-4" />
+                          )}
+                        </button>
+                      </div>
+                    ) : (
+                      <div className="bg-white/[0.02] border border-white/[0.06] rounded-xl px-4 py-3">
+                        <p className="text-white/35 text-[12px]">Tunnel URL will appear once the tunnel starts.</p>
+                      </div>
+                    )}
+                    <button
+                      onClick={next}
+                      className="w-full mt-4 py-3 bg-gradient-brand hover:opacity-90 text-white text-[14px] font-semibold rounded-full transition-colors flex items-center justify-center gap-2"
+                    >
+                      Continue
+                      <ArrowRight className="h-4 w-4" />
+                    </button>
                   </div>
                 )}
 
-                {/* Input — shown for new claim or change flow */}
-                {(!existingHandle || showChangeConfirm || !registered) && !(existingHandle && registered && !showChangeConfirm) && (
-                  <>
-                    <div className="relative mt-5">
-                      <input
-                        type="text"
-                        value={botName}
-                        onChange={(e) => onBotNameInput(e.target.value)}
-                        maxLength={30}
-                        placeholder="your-bot-name"
-                        spellCheck={false}
-                        autoCapitalize="none"
-                        autoCorrect="off"
-                        autoFocus
-                        disabled={registered}
-                        className={inputCls + ' pr-10 font-mono' + (registered ? ' opacity-50' : '')}
-                      />
-                      {handleStatus && botName.length > 0 && !registered && (
-                        <div className="absolute right-4 top-1/2 -translate-y-1/2">
-                          {handleStatus === 'checking' && (
-                            <div className="w-5 h-5 border-2 border-white/10 border-t-[#04D1FE] rounded-full animate-spin" />
-                          )}
-                          {handleStatus === 'invalid' && (
-                            <div className="w-6 h-6 rounded-full bg-amber-500/15 flex items-center justify-center">
-                              <svg className="w-3.5 h-3.5 text-amber-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={3}>
-                                <path strokeLinecap="round" strokeLinejoin="round" d="M12 9v3m0 4h.01" />
-                              </svg>
-                            </div>
-                          )}
+                {/* Relay registration — existing UI */}
+                {handleChoice === 'relay' && (
+                  <div className="mt-4">
+                    {/* Existing handle banner */}
+                    {existingHandle && registered && !showChangeConfirm && (
+                      <>
+                        <div className="bg-emerald-500/8 border border-emerald-500/15 rounded-xl px-4 py-3">
+                          <div className="flex items-center gap-2">
+                            <Check className="h-4 w-4 text-emerald-400" />
+                            <p className="text-emerald-400/90 text-[13px] font-medium">Current handle</p>
+                          </div>
+                          <p className="text-emerald-400/60 text-[12px] mt-1 font-mono">{registeredUrl}</p>
                         </div>
-                      )}
-                    </div>
-
-                    {/* Status messages */}
-                    {handleStatus === 'invalid' && handleError && (
-                      <p className="text-amber-400 text-[12px] mt-2">{handleError}</p>
+                        <div className="flex gap-2 mt-4">
+                          <button
+                            onClick={next}
+                            className="flex-1 py-3 bg-gradient-brand hover:opacity-90 text-white text-[14px] font-semibold rounded-full transition-colors flex items-center justify-center gap-2"
+                          >
+                            Continue
+                            <ArrowRight className="h-4 w-4" />
+                          </button>
+                          <button
+                            onClick={() => {
+                              setShowChangeConfirm(true);
+                              setRegistered(false);
+                              setBotName('');
+                              setHandleStatus(null);
+                              setTierAvailability({});
+                            }}
+                            className="px-5 py-3 bg-white/[0.04] hover:bg-white/[0.08] border border-white/[0.08] text-white/60 text-[13px] font-medium rounded-full transition-colors"
+                          >
+                            Change
+                          </button>
+                        </div>
+                      </>
                     )}
 
-                    {/* Handle tier options — per-tier availability */}
-                    {handleStatus === 'ready' && botName.length > 0 && !registered && (
-                      <div className="space-y-2 mt-4">
-                        {HANDLES.map((h) => {
-                          const available = tierAvailability[h.tier];
-                          const taken = available === false;
-                          return (
-                            <button
-                              key={h.tier}
-                              onClick={() => !taken && setSelectedTier(h.tier)}
-                              disabled={taken}
-                              className={`w-full flex items-center justify-between px-4 py-3 rounded-xl border transition-all duration-200 text-left ${
-                                taken
-                                  ? 'border-white/[0.04] bg-transparent opacity-50 cursor-not-allowed'
-                                  : selectedTier === h.tier
-                                    ? h.highlight
-                                      ? 'border-[#AF27E3]/40 bg-[#AF27E3]/[0.06]'
-                                      : 'border-[#AF27E3]/30 bg-white/[0.04]'
-                                    : 'border-white/[0.06] bg-transparent hover:border-white/10 hover:bg-white/[0.02]'
-                              }`}
-                            >
-                              <span className="font-mono text-[13px] text-white/70">
-                                {h.label(botName)}
-                              </span>
-                              {taken ? (
-                                <span className="text-[11px] font-medium px-2.5 py-0.5 rounded-full border bg-red-500/10 text-red-400 border-red-500/20">
-                                  Taken
-                                </span>
-                              ) : (
-                                <span className={`text-[11px] font-medium px-2.5 py-0.5 rounded-full border ${h.badgeCls}`}>
-                                  {h.badge}
-                                </span>
-                              )}
-                            </button>
-                          );
-                        })}
+                    {/* Change confirmation alert */}
+                    {showChangeConfirm && !registered && (
+                      <div className="bg-amber-500/8 border border-amber-500/20 rounded-xl px-4 py-3">
+                        <p className="text-amber-400/90 text-[13px] font-medium">Changing your handle</p>
+                        <p className="text-amber-400/60 text-[12px] mt-1">
+                          Your current handle <span className="font-mono">{existingHandle?.url}</span> will be released and become available for others.
+                        </p>
                       </div>
                     )}
 
-                    {/* Registered success (after claiming) */}
-                    {registered && (
-                      <div className="mt-4 bg-emerald-500/8 border border-emerald-500/15 rounded-xl px-4 py-3">
-                        <div className="flex items-center gap-2">
-                          <Check className="h-4 w-4 text-emerald-400" />
-                          <p className="text-emerald-400/90 text-[13px] font-medium">Handle claimed!</p>
+                    {/* Input — shown for new claim or change flow */}
+                    {(!existingHandle || showChangeConfirm || !registered) && !(existingHandle && registered && !showChangeConfirm) && (
+                      <>
+                        <div className="relative mt-3">
+                          <input
+                            type="text"
+                            value={botName}
+                            onChange={(e) => onBotNameInput(e.target.value)}
+                            maxLength={30}
+                            placeholder="your-bot-name"
+                            spellCheck={false}
+                            autoCapitalize="none"
+                            autoCorrect="off"
+                            autoFocus
+                            disabled={registered}
+                            className={inputCls + ' pr-10 font-mono' + (registered ? ' opacity-50' : '')}
+                          />
+                          {handleStatus && botName.length > 0 && !registered && (
+                            <div className="absolute right-4 top-1/2 -translate-y-1/2">
+                              {handleStatus === 'checking' && (
+                                <div className="w-5 h-5 border-2 border-white/10 border-t-[#04D1FE] rounded-full animate-spin" />
+                              )}
+                              {handleStatus === 'invalid' && (
+                                <div className="w-6 h-6 rounded-full bg-amber-500/15 flex items-center justify-center">
+                                  <svg className="w-3.5 h-3.5 text-amber-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={3}>
+                                    <path strokeLinecap="round" strokeLinejoin="round" d="M12 9v3m0 4h.01" />
+                                  </svg>
+                                </div>
+                              )}
+                            </div>
+                          )}
                         </div>
-                        <p className="text-emerald-400/60 text-[12px] mt-1 font-mono">{registeredUrl}</p>
-                      </div>
-                    )}
 
-                    {/* Claim / Change button */}
-                    {handleStatus === 'ready' && tierAvailability[selectedTier] && botName.length > 0 && !registered && (
-                      <button
-                        onClick={showChangeConfirm ? onChangeHandle : onClaimHandle}
-                        disabled={registering || changingHandle}
-                        className="w-full mt-4 py-3 bg-gradient-brand hover:opacity-90 text-white text-[14px] font-semibold rounded-full transition-colors flex items-center justify-center gap-2 disabled:opacity-40"
-                      >
-                        {(registering || changingHandle) ? (
-                          <><LoaderCircle className="h-4 w-4 animate-spin" />{showChangeConfirm ? 'Changing...' : 'Claiming...'}</>
-                        ) : (
-                          <>{showChangeConfirm ? 'Change Handle' : 'Claim & Continue'}<ArrowRight className="h-4 w-4" /></>
+                        {/* Status messages */}
+                        {handleStatus === 'invalid' && handleError && (
+                          <p className="text-amber-400 text-[12px] mt-2">{handleError}</p>
                         )}
-                      </button>
-                    )}
 
-                    {/* Continue after claim */}
-                    {registered && (
-                      <button
-                        onClick={next}
-                        className="w-full mt-4 py-3 bg-gradient-brand hover:opacity-90 text-white text-[14px] font-semibold rounded-full transition-colors flex items-center justify-center gap-2"
-                      >
-                        Continue
-                        <ArrowRight className="h-4 w-4" />
-                      </button>
-                    )}
+                        {/* Handle tier options — per-tier availability */}
+                        {handleStatus === 'ready' && botName.length > 0 && !registered && (
+                          <div className="space-y-2 mt-4">
+                            {HANDLES.map((h) => {
+                              const available = tierAvailability[h.tier];
+                              const taken = available === false;
+                              return (
+                                <button
+                                  key={h.tier}
+                                  onClick={() => !taken && setSelectedTier(h.tier)}
+                                  disabled={taken}
+                                  className={`w-full flex items-center justify-between px-4 py-3 rounded-xl border transition-all duration-200 text-left ${
+                                    taken
+                                      ? 'border-white/[0.04] bg-transparent opacity-50 cursor-not-allowed'
+                                      : selectedTier === h.tier
+                                        ? h.highlight
+                                          ? 'border-[#AF27E3]/40 bg-[#AF27E3]/[0.06]'
+                                          : 'border-[#AF27E3]/30 bg-white/[0.04]'
+                                        : 'border-white/[0.06] bg-transparent hover:border-white/10 hover:bg-white/[0.02]'
+                                  }`}
+                                >
+                                  <span className="font-mono text-[13px] text-white/70">
+                                    {h.label(botName)}
+                                  </span>
+                                  {taken ? (
+                                    <span className="text-[11px] font-medium px-2.5 py-0.5 rounded-full border bg-red-500/10 text-red-400 border-red-500/20">
+                                      Taken
+                                    </span>
+                                  ) : (
+                                    <span className={`text-[11px] font-medium px-2.5 py-0.5 rounded-full border ${h.badgeCls}`}>
+                                      {h.badge}
+                                    </span>
+                                  )}
+                                </button>
+                              );
+                            })}
+                          </div>
+                        )}
 
-                    {/* Cancel change */}
-                    {showChangeConfirm && !registered && (
-                      <button
-                        onClick={() => {
-                          setShowChangeConfirm(false);
-                          setBotName(existingHandle!.username);
-                          setRegistered(true);
-                          setRegisteredUrl(existingHandle!.url);
-                          setSelectedTier(existingHandle!.tier);
-                          setHandleStatus(null);
-                        }}
-                        className="w-full mt-2 py-2 text-white/25 hover:text-white/40 text-[12px] transition-colors"
-                      >
-                        Cancel — keep current handle
-                      </button>
+                        {/* Registered success (after claiming) */}
+                        {registered && (
+                          <div className="mt-4 bg-emerald-500/8 border border-emerald-500/15 rounded-xl px-4 py-3">
+                            <div className="flex items-center gap-2">
+                              <Check className="h-4 w-4 text-emerald-400" />
+                              <p className="text-emerald-400/90 text-[13px] font-medium">Handle claimed!</p>
+                            </div>
+                            <p className="text-emerald-400/60 text-[12px] mt-1 font-mono">{registeredUrl}</p>
+                          </div>
+                        )}
+
+                        {/* Claim / Change button */}
+                        {handleStatus === 'ready' && tierAvailability[selectedTier] && botName.length > 0 && !registered && (
+                          <button
+                            onClick={showChangeConfirm ? onChangeHandle : onClaimHandle}
+                            disabled={registering || changingHandle}
+                            className="w-full mt-4 py-3 bg-gradient-brand hover:opacity-90 text-white text-[14px] font-semibold rounded-full transition-colors flex items-center justify-center gap-2 disabled:opacity-40"
+                          >
+                            {(registering || changingHandle) ? (
+                              <><LoaderCircle className="h-4 w-4 animate-spin" />{showChangeConfirm ? 'Changing...' : 'Claiming...'}</>
+                            ) : (
+                              <>{showChangeConfirm ? 'Change Handle' : 'Claim & Continue'}<ArrowRight className="h-4 w-4" /></>
+                            )}
+                          </button>
+                        )}
+
+                        {/* Continue after claim */}
+                        {registered && (
+                          <button
+                            onClick={next}
+                            className="w-full mt-4 py-3 bg-gradient-brand hover:opacity-90 text-white text-[14px] font-semibold rounded-full transition-colors flex items-center justify-center gap-2"
+                          >
+                            Continue
+                            <ArrowRight className="h-4 w-4" />
+                          </button>
+                        )}
+
+                        {/* Cancel change */}
+                        {showChangeConfirm && !registered && (
+                          <button
+                            onClick={() => {
+                              setShowChangeConfirm(false);
+                              setBotName(existingHandle!.username);
+                              setRegistered(true);
+                              setRegisteredUrl(existingHandle!.url);
+                              setSelectedTier(existingHandle!.tier);
+                              setHandleStatus(null);
+                            }}
+                            className="w-full mt-2 py-2 text-white/25 hover:text-white/40 text-[12px] transition-colors"
+                          >
+                            Cancel — keep current handle
+                          </button>
+                        )}
+                      </>
                     )}
-                  </>
+                  </div>
                 )}
               </div>
             )}
@@ -1241,7 +1372,19 @@ export default function OnboardWizard({ onComplete, isInitialSetup = false, onSa
             )}
 
             {/* ── Step 6: All Set (initial onboard only) ── */}
-            {step === 6 && isInitialSetup && (
+            {step === 6 && isInitialSetup && (() => {
+              const finalUrl = (() => {
+                if (tunnelMode === 'named') return `https://${tunnelDomain}`;
+                if (handleChoice === 'relay' && registeredUrl) return registeredUrl;
+                return tunnelUrl || `http://localhost:${3000}`;
+              })();
+              const finalUrlFull = finalUrl.startsWith('http') ? finalUrl : `https://${finalUrl}`;
+              const descriptionText = tunnelMode === 'named'
+                ? 'Access your agent at your custom domain.'
+                : handleChoice === 'relay' && registeredUrl
+                  ? 'Your agent is live and ready. From now on, access it using your custom URL below.'
+                  : 'Your agent is live and ready. Your tunnel URL is shown below. Note: this URL changes on restart.';
+              return (
               <div className="flex flex-col items-center text-center">
                 <div className="w-16 h-16 rounded-full bg-emerald-500/10 border border-emerald-500/20 flex items-center justify-center mb-5">
                   <Check className="h-8 w-8 text-emerald-400" />
@@ -1250,16 +1393,15 @@ export default function OnboardWizard({ onComplete, isInitialSetup = false, onSa
                   All Set!
                 </h1>
                 <p className="text-white/40 text-[13px] mt-2 leading-relaxed max-w-[340px]">
-                  Your agent is live and ready. From now on, access it using your custom URL below.
+                  {descriptionText}
                 </p>
 
-                {/* Custom URL */}
+                {/* URL */}
                 <div className="w-full mt-6 flex items-center gap-2 bg-white/[0.03] border border-white/[0.06] rounded-xl px-4 py-3">
-                  <span className="font-mono text-[13px] text-white/70 truncate flex-1 text-left">{registeredUrl}</span>
+                  <span className="font-mono text-[13px] text-white/70 truncate flex-1 text-left">{finalUrl}</span>
                   <button
                     onClick={() => {
-                      const url = registeredUrl.startsWith('http') ? registeredUrl : `https://${registeredUrl}`;
-                      navigator.clipboard.writeText(url);
+                      navigator.clipboard.writeText(finalUrlFull);
                       setPortalCopied(true);
                       setTimeout(() => setPortalCopied(false), 2000);
                     }}
@@ -1295,9 +1437,7 @@ export default function OnboardWizard({ onComplete, isInitialSetup = false, onSa
                 {/* Redirect button */}
                 <button
                   onClick={() => {
-                    const url = registeredUrl.startsWith('http') ? registeredUrl : `https://${registeredUrl}`;
-                    // Navigate the top-level window (escapes iframe if embedded)
-                    (window.top || window).location.href = url;
+                    (window.top || window).location.href = finalUrlFull;
                   }}
                   className="w-full mt-6 py-3 bg-gradient-brand hover:opacity-90 text-white text-[14px] font-semibold rounded-full transition-colors flex items-center justify-center gap-2"
                 >
@@ -1306,10 +1446,11 @@ export default function OnboardWizard({ onComplete, isInitialSetup = false, onSa
                 </button>
 
                 <p className="text-white/20 text-[11px] mt-3 leading-relaxed">
-                  You'll be redirected to your custom URL.
+                  You'll be redirected to your {tunnelMode === 'named' ? 'custom domain' : handleChoice === 'relay' ? 'custom URL' : 'tunnel URL'}.
                 </p>
               </div>
-            )}
+              );
+            })()}
           </motion.div>
         </AnimatePresence>
 

package/worker/index.ts

@@ -291,6 +291,9 @@ app.get('/api/onboard/status', (_, res) => {
       tier: cfg.relay.tier,
       url: cfg.relay.url,
     } : null,
+    tunnelMode: cfg.tunnel?.mode || 'quick',
+    tunnelDomain: cfg.tunnel?.domain || '',
+    tunnelUrl: cfg.tunnelUrl || '',
   });
 });
 

package/workspace/.backend.log

@@ -0,0 +1 @@
+[backend] Listening on port 3004