sub-bridge 1.0.0 → 1.0.3

package/index.html

@@ -67,68 +67,68 @@
       <div class="flex flex-col gap-3">
 
         <!-- Claude Row -->
-        <div class="flex items-center gap-3">
-          <!-- Button -->
-          <template x-if="!claude.showInput">
-            <a
-              @click.prevent="claude.showInput = true; window.open('/auth/claude', '_blank')"
-              href="/auth/claude"
-              class="group inline-flex items-center justify-center gap-2 rounded-lg bg-[#d97757] px-3 py-2 text-sm font-semibold text-white shadow-sm transition hover:bg-[#c4674b] cursor-pointer"
-            >
-              <svg class="h-4 w-4 text-white" viewBox="0 0 24 24" aria-hidden="true"><use href="#logo-claude"></use></svg>
-              <span>Login with Claude</span>
-            </a>
-          </template>
-          <template x-if="claude.showInput">
-            <button
-              @click="submitClaudeCode()"
-              :disabled="claude.loading || !claude.code.includes('#')"
-              class="group inline-flex items-center justify-center gap-2 rounded-lg bg-[#d97757] px-3 py-2 text-sm font-semibold text-white shadow-sm transition hover:bg-[#c4674b] disabled:opacity-50 shrink-0"
-            >
-              <svg class="h-4 w-4 text-white" viewBox="0 0 24 24" aria-hidden="true"><use href="#logo-claude"></use></svg>
-              <span x-text="claude.loading ? 'Connecting...' : 'Paste Code'"></span>
-            </button>
-          </template>
-          <!-- Input (shown after first click) -->
-          <template x-if="claude.showInput">
-            <input
-              type="text"
-              x-model="claude.code"
-              @input="claudeCodeInput()"
-              placeholder="CODE#STATE"
-              class="flex-1 rounded-lg border border-neutral-800 bg-neutral-950 px-3 py-2 text-sm text-neutral-100 placeholder:text-neutral-500 focus:border-neutral-600 focus:outline-none font-mono"
-              :disabled="claude.loading"
-              x-init="$nextTick(() => $el.focus())"
-            >
-          </template>
-          <!-- Spacer -->
-          <div class="flex-1" x-show="!claude.showInput"></div>
-          <!-- Status Indicator -->
-          <div class="flex items-center gap-2 shrink-0">
-            <span class="h-2 w-2 rounded-full" :class="claude.connected ? 'bg-emerald-400' : 'bg-neutral-600'"></span>
-            <span class="text-xs" :class="claude.connected ? 'text-emerald-400' : 'text-neutral-500'" x-text="claude.connected ? 'Connected' : 'Not connected'"></span>
-            <!-- Account Switcher (show when multiple accounts) -->
-            <template x-if="Object.keys(claude.accounts).length > 1">
-              <select
-                x-model="claude.activeAccount"
-                @change="localStorage.setItem('claude_active_account', claude.activeAccount)"
-                class="ml-2 rounded border border-neutral-700 bg-neutral-900 px-2 py-1 text-xs text-neutral-200 focus:border-neutral-600 focus:outline-none"
+        <div class="flex flex-col gap-1">
+          <div class="flex items-center gap-3 flex-wrap">
+            <!-- Button -->
+            <template x-if="!claude.showInput">
+              <a
+                @click.prevent="claude.showInput = true; window.open('/auth/claude', '_blank')"
+                href="/auth/claude"
+                class="group inline-flex items-center justify-center gap-2 rounded-lg bg-[#d97757] px-3 py-2 text-sm font-semibold text-white shadow-sm transition hover:bg-[#c4674b] cursor-pointer"
               >
-                <template x-for="email in Object.keys(claude.accounts)" :key="email">
-                  <option :value="email" x-text="claude.accounts[email].displayName || email"></option>
-                </template>
-              </select>
+                <svg class="h-4 w-4 text-white" viewBox="0 0 24 24" aria-hidden="true"><use href="#logo-claude"></use></svg>
+                <span>Login with Claude</span>
+              </a>
             </template>
-            <template x-if="claude.connected">
+            <template x-if="claude.showInput">
               <button
-                @click="disconnectClaude()"
-                class="ml-1 text-xs text-neutral-400 hover:text-red-400 transition"
-                title="Disconnect and clear token"
+                disabled
+                class="group inline-flex items-center justify-center gap-2 rounded-lg bg-[#d97757] px-3 py-2 text-sm font-semibold text-white shadow-sm transition disabled:opacity-50 shrink-0"
               >
-                <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
+                <svg class="h-4 w-4 text-white" viewBox="0 0 24 24" aria-hidden="true"><use href="#logo-claude"></use></svg>
+                <span>Login with Claude</span>
               </button>
             </template>
+            <!-- Input (shown after first click) -->
+            <template x-if="claude.showInput">
+              <div class="flex items-center gap-2 flex-1">
+                <span class="text-xs text-neutral-400 shrink-0">Enter code</span>
+                <input
+                  type="text"
+                  x-model="claude.code"
+                  @input="claudeCodeInput()"
+                  placeholder="CODE#STATE"
+                  class="flex-1 rounded-lg border border-neutral-800 bg-neutral-950 px-3 py-2 text-sm text-neutral-100 placeholder:text-neutral-500 focus:border-neutral-600 focus:outline-none font-mono"
+                  :disabled="claude.loading"
+                  x-init="$nextTick(() => $el.focus())"
+                >
+                <template x-if="claude.loading">
+                  <span class="text-xs text-neutral-400 shrink-0">Checking...</span>
+                </template>
+              </div>
+            </template>
+          </div>
+          <!-- Status Indicator -->
+          <div class="flex items-center gap-2 text-xs">
+            <span class="h-2 w-2 rounded-full" :class="claude.connected ? 'bg-emerald-400' : 'bg-neutral-600'"></span>
+            <span class="text-xs" :class="claude.connected ? 'text-emerald-400' : 'text-neutral-500'" x-text="claude.connected ? 'Connected' : 'Not connected'"></span>
           </div>
+          <template x-if="Object.keys(claude.accounts).length">
+            <div class="mt-1 flex flex-col gap-1">
+              <template x-for="email in Object.keys(claude.accounts)" :key="'claude-account-' + email">
+                <div class="flex items-center gap-2 text-xs">
+                  <span class="text-neutral-300 font-mono" x-text="claude.accounts[email].displayName || email"></span>
+                  <button
+                    @click="disconnectClaude(email)"
+                    class="text-xs text-neutral-400 hover:text-red-400 transition"
+                    title="Disconnect account"
+                  >
+                    <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
+                  </button>
+                </div>
+              </template>
+            </div>
+          </template>
         </div>
         <!-- Claude Error -->
         <template x-if="claude.error">
@@ -136,56 +136,58 @@
         </template>
 
         <!-- ChatGPT Row -->
-        <div class="flex items-center gap-3">
-          <!-- Button -->
-          <button
-            @click="if(!chatgpt.showInput) { startChatGPT(); window.open('https://auth.openai.com/codex/device', '_blank'); } chatgpt.showInput = true"
-            :disabled="chatgpt.polling"
+        <div class="flex flex-col gap-1">
+          <div class="flex items-center gap-3 flex-wrap">
+            <!-- Button -->
+            <button
+              @click="if(!chatgpt.showInput) { startChatGPT(); window.open('https://auth.openai.com/codex/device', '_blank'); } chatgpt.showInput = true"
+            :disabled="chatgpt.polling || chatgpt.showInput"
             class="group inline-flex items-center justify-center gap-2 rounded-lg bg-[#10a37f] px-3 py-2 text-sm font-semibold text-white shadow-sm transition hover:bg-[#0d8a6a] disabled:opacity-50 shrink-0"
           >
             <svg class="h-4 w-4 text-white" viewBox="0 0 24 24" aria-hidden="true"><use href="#logo-openai"></use></svg>
-            <span x-text="chatgpt.polling ? 'Checking...' : (chatgpt.showInput ? 'Enter Device ID' : 'Login with ChatGPT')"></span>
+            <span>Login with ChatGPT</span>
           </button>
           <!-- Login link + Input (shown after first click) -->
           <template x-if="chatgpt.showInput">
             <div class="flex items-center gap-2">
+              <span class="text-xs text-neutral-400 shrink-0">Enter device id</span>
               <input
                 type="text"
                 :value="chatgpt.deviceId"
-                readonly
-                @focus="$el.select()"
-                class="w-32 rounded-lg border border-neutral-800 bg-neutral-950 px-3 py-2 text-sm text-neutral-100 font-mono text-center"
-              >
-            </div>
-          </template>
-          <!-- Spacer (always present to push status to right) -->
-          <div class="flex-1"></div>
+                  readonly
+                  @focus="$el.select()"
+                  class="w-32 rounded-lg border border-neutral-800 bg-neutral-950 px-3 py-2 text-sm text-neutral-100 font-mono text-center"
+                >
+              <template x-if="chatgpt.polling">
+                <span class="text-xs text-neutral-400 shrink-0">Checking...</span>
+              </template>
+              </div>
+            </template>
+          </div>
           <!-- Status Indicator -->
-          <div class="flex items-center gap-2 shrink-0">
+          <div class="flex items-center gap-2 text-xs">
             <span class="h-2 w-2 rounded-full" :class="chatgpt.connected ? 'bg-emerald-400' : 'bg-neutral-600'"></span>
             <span class="text-xs" :class="chatgpt.connected ? 'text-emerald-400' : 'text-neutral-500'" x-text="chatgpt.connected ? 'Connected' : 'Not connected'"></span>
-            <!-- Account Switcher (show when multiple accounts) -->
-            <template x-if="Object.keys(chatgpt.accounts).length > 1">
-              <select
-                x-model="chatgpt.activeAccount"
-                @change="localStorage.setItem('chatgpt_active_account', chatgpt.activeAccount)"
-                class="ml-2 rounded border border-neutral-700 bg-neutral-900 px-2 py-1 text-xs text-neutral-200 focus:border-neutral-600 focus:outline-none"
-              >
-                <template x-for="accountId in Object.keys(chatgpt.accounts)" :key="accountId">
-                  <option :value="accountId" x-text="chatgpt.accounts[accountId].displayName || accountId"></option>
-                </template>
-              </select>
-            </template>
-            <template x-if="chatgpt.connected">
-              <button
-                @click="disconnectChatGPT()"
-                class="ml-1 text-xs text-neutral-400 hover:text-red-400 transition"
-                title="Disconnect and clear token"
-              >
-                <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
-              </button>
-            </template>
           </div>
+          <template x-if="Object.keys(chatgpt.accounts).length">
+            <div class="mt-1 flex flex-col gap-1">
+              <template x-for="accountId in Object.keys(chatgpt.accounts)" :key="'chatgpt-account-' + accountId">
+                <div class="flex items-center gap-2 text-xs">
+                  <span
+                    class="text-neutral-300 font-mono"
+                    x-text="chatgpt.accounts[accountId].displayName && chatgpt.accounts[accountId].displayName !== accountId ? chatgpt.accounts[accountId].displayName + ' (' + accountId + ')' : accountId"
+                  ></span>
+                  <button
+                    @click="disconnectChatGPT(accountId)"
+                    class="text-xs text-neutral-400 hover:text-red-400 transition"
+                    title="Disconnect account"
+                  >
+                    <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
+                  </button>
+                </div>
+              </template>
+            </div>
+          </template>
         </div>
         <!-- ChatGPT Error -->
         <template x-if="chatgpt.error">
@@ -216,30 +218,95 @@
       <div class="space-y-4" x-init="fetchTunnelProviders()">
         <section class="space-y-2">
           <h2 class="text-xs font-semibold uppercase tracking-wider text-neutral-400">OpenAI API Gateway</h2>
-          <div class="rounded-xl border border-neutral-800 bg-neutral-900/70 shadow-sm flex flex-col gap-3">
-            <div class="flex items-center gap-3 p-4 pb-0">
+          <div class="rounded-xl border border-neutral-800 bg-neutral-900/70 shadow-sm">
+            <div class="flex flex-col gap-4 p-4">
+              <div class="flex items-center justify-between">
+                <div class="flex items-center gap-2">
+                  <span
+                    class="h-2 w-2 rounded-full"
+                    :class="tunnel.loading ? 'bg-neutral-500 animate-pulse' : (tunnel.status.active || hasExternalUrl ? 'bg-emerald-400' : 'bg-neutral-600')"
+                  ></span>
+                  <span
+                    class="text-xs"
+                    :class="tunnel.loading ? 'text-neutral-400' : (tunnel.status.active || hasExternalUrl ? 'text-emerald-400' : 'text-neutral-500')"
+                    x-text="tunnel.loading ? 'Loading' : (tunnel.status.active ? 'Connected' : (hasExternalUrl ? 'External URL' : 'Inactive'))"
+                  ></span>
+                </div>
+                <template x-if="tunnel.status.active">
+                  <button
+                    @click="stopTunnel()"
+                    class="rounded-lg border border-red-500/60 px-3 py-1.5 text-xs font-semibold text-red-200 hover:bg-red-500/20"
+                  >Stop Tunnel</button>
+                </template>
+              </div>
+
+              <div class="space-y-1">
+                <label
+                  class="text-[10px] font-semibold uppercase tracking-wider text-neutral-500"
+                  x-text="tunnelLabel"
+                ></label>
+                <input
+                  type="text"
+                  :value="hasTunnel ? effectivePublicUrl + '/v1' : tunnel.customDomain"
+                  :readonly="hasTunnel"
+                  @input="if (!hasTunnel) tunnel.customDomain = $event.target.value"
+                  @focus="$el.select()"
+                  :placeholder="hasTunnel ? '' : (tunnel.loading ? 'Loading providers...' : 'e.g. yourname.example.com')"
+                  class="w-full rounded-lg border border-neutral-800 bg-neutral-950 px-3 py-2 text-sm text-neutral-100 placeholder:text-neutral-600 focus:border-neutral-600 focus:outline-none font-mono"
+                >
+              </div>
+
+              <template x-if="!hasTunnel">
+                <div class="space-y-3">
+                  <div class="flex flex-wrap items-center justify-between gap-3">
+                    <div class="flex flex-wrap gap-2" x-show="!tunnel.loading && tunnel.providers.some(p => p.available)">
+                      <template x-for="p in tunnel.providers.filter(p => p.available)" :key="p.id">
+                        <button
+                          @click="tunnel.selectedProvider = p.id"
+                          :class="tunnel.selectedProvider === p.id ? 'bg-neutral-700 text-white border-neutral-600' : 'bg-neutral-950 text-neutral-400 border-neutral-800'"
+                          class="inline-flex items-center justify-center rounded-lg border px-3 py-1.5 text-xs font-semibold uppercase tracking-wide transition"
+                          x-text="p.name"
+                        ></button>
+                      </template>
+                    </div>
+                    <div class="flex flex-wrap gap-2" x-show="tunnel.loading">
+                      <span class="h-7 w-20 rounded-lg border border-neutral-800 bg-neutral-900/60 animate-pulse"></span>
+                      <span class="h-7 w-16 rounded-lg border border-neutral-800 bg-neutral-900/60 animate-pulse"></span>
+                      <span class="h-7 w-12 rounded-lg border border-neutral-800 bg-neutral-900/60 animate-pulse"></span>
+                    </div>
+                    <template x-if="!tunnel.status.active && !hasExternalUrl">
+                      <button
+                        @click="startTunnel()"
+                        :disabled="tunnel.starting || !tunnel.selectedProvider || !tunnel.providers.some(p => p.available)"
+                        class="rounded-lg bg-neutral-100 px-3 py-2 text-xs font-semibold text-neutral-950 hover:bg-white disabled:opacity-50"
+                        x-text="tunnel.starting ? 'Creating...' : 'Create Tunnel'"
+                        x-show="!tunnel.loading"
+                      ></button>
+                    </template>
+                  </div>
+                  <p x-show="!tunnel.providers.some(p => p.available) && !tunnel.loading" class="text-xs text-neutral-400">
+                    No tunnel providers found (install cloudflared, ngrok, or tailscale).
+                  </p>
+                </div>
+              </template>
+
+              <p x-show="tunnel.error" class="text-xs text-red-400" x-text="tunnel.error"></p>
+            </div>
+
+            <div class="space-y-1 px-4 pb-4">
+              <label class="text-[10px] font-semibold uppercase tracking-wider text-neutral-500">Generated API Key</label>
               <input
                 type="text"
-                :value="effectivePublicUrl + '/v1'"
+                :value="apiKey"
                 readonly
                 @focus="$el.select()"
+                placeholder="Connect to a provider first..."
                 class="w-full rounded-lg border border-neutral-800 bg-neutral-950 px-3 py-2 text-sm text-neutral-100 focus:border-neutral-600 focus:outline-none font-mono"
               >
-              <label class="text-xs text-neutral-500 shrink-0 w-28 text-right">OpenAI Base URL</label>
             </div>
-            <div class="flex items-center gap-3 px-4 pb-0">
-            <input
-            type="text"
-            :value="apiKey"
-            readonly
-            @focus="$el.select()"
-            placeholder="Connect to a provider first..."
-            class="w-full rounded-lg border border-neutral-800 bg-neutral-950 px-3 py-2 text-sm text-neutral-100 focus:border-neutral-600 focus:outline-none font-mono"
-          >              <label class="text-xs text-neutral-500 shrink-0 w-28 text-right">Generated API Key</label>
-        </div>
               
-            <div class="flex items-center gap-3 p-4 border-t border-neutral-800">
-              <template x-if="claude.connected || chatgpt.connected">
+            <template x-if="claude.connected || chatgpt.connected">
+              <div class="flex items-center gap-3 p-4 border-t border-neutral-800">
               <div class="flex items-start gap-3">
                 <div class="flex flex-col gap-2 w-full">
                   <template x-for="(route, i) in routes" :key="i">
@@ -258,7 +325,7 @@
                       <template x-if="Object.keys(claude.accounts).length > 1">
                         <select
                           x-model="route.account"
-                          x-init="route.account = route.account || claude.activeAccount"
+                          x-init="route.account = route.account || firstClaudeAccountId"
                           class="rounded-lg border border-neutral-800 bg-neutral-950 px-2 py-2 text-sm text-neutral-100 focus:border-neutral-600 focus:outline-none"
                         >
                           <template x-for="email in Object.keys(claude.accounts)" :key="'route-account-' + email">
@@ -283,7 +350,7 @@
                     </div>
                   </template>
                   <button
-                    @click="routes.push({ cursor: '', claude: '', account: claude.activeAccount || '' })"
+                    @click="routes.push({ cursor: '', claude: '', account: firstClaudeAccountId || '' })"
                     class="inline-flex items-center gap-1 text-sm text-neutral-400 hover:text-neutral-200 transition mt-1"
                   >
                     <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
@@ -292,8 +359,8 @@
                 </div>
                 <label class="text-xs text-neutral-500 shrink-0 w-28 text-right self-start">Routes</label>
               </div>
+              </div>
             </template>
-            </div>
           </div>
         </section>   
             <!-- Integrate Section -->
@@ -341,102 +408,18 @@
                     <li class="flex flex-col gap-1">
                       <div class="flex items-start gap-2">
                         <span class="mt-0.5 flex h-5 w-5 items-center justify-center rounded-full bg-neutral-800 text-[11px] shrink-0">5</span>
-                        <div class="flex-1 space-y-2">
-                          <!-- Show URL when tunnel is active (dynamic or pre-configured) -->
-                          <template x-if="hasTunnel">
-                              <div class="relative w-full" style="margin-top: 0px !important;">
-                                <span class="absolute left-3 top-1/2 -translate-y-1/2 text-neutral-500 text-xs pr-1">Set Base URL:</span>
-                                <input
-                                  type="text"
-                                  :value="effectivePublicUrl + '/v1'"
-                                  readonly
-                                  @focus="$el.select()"
-                                  class="rounded-lg border border-neutral-800 bg-neutral-950 px-3 py-2 text-xs text-neutral-100 focus:border-neutral-600 focus:outline-none font-mono pl-[100px] w-full"
-                                >
-                            </div>
-                          </template>
-                          <!-- Show instructions when no tunnel -->
-                          <template x-if="!hasTunnel">
-                            <div>
-                              <span>Set Base URL: Expose port <code class="rounded bg-neutral-800/80 px-1.5 py-0.5 text-xs" x-text="port"></code> publicly or</span>
-                              <button
-                                type="button"
-                                @click="tunnel.showPanel = !tunnel.showPanel; if(tunnel.showPanel && !tunnel.providers.length) fetchTunnelProviders()"
-                                class="text-sky-400 hover:text-sky-300 hover:underline"
-                              >create a tunnel</button>
-                            </div>
-                          </template>
-                          <!-- Manage tunnel link when dynamic tunnel is active (not for pre-configured) -->
-                          <template x-if="tunnel.status.active">
-                            <button
-                              type="button"
-                              @click="tunnel.showPanel = !tunnel.showPanel"
-                              class="text-sky-400 hover:text-sky-300 hover:underline text-sm"
-                              x-text="tunnel.showPanel ? 'hide tunnel options' : 'manage tunnel'"
-                            ></button>
-                          </template>
-                          <!-- Tunnel Panel (collapsible in cursor view) -->
-                          <template x-if="tunnel.showPanel">
-                            <div class="rounded-lg border border-neutral-800 bg-neutral-900/50 p-2 space-y-3">
-                              <!-- Provider Tabs -->
-                              <div class="flex flex-wrap gap-2" x-show="tunnel.providers.length > 0">
-                                <template x-for="p in tunnel.providers.filter(p => p.available)" :key="p.id">
-                                  <button
-                                    @click="tunnel.selectedProvider = p.id"
-                                    :class="tunnel.selectedProvider === p.id ? 'bg-neutral-700 text-white border-neutral-600' : 'bg-neutral-950 text-neutral-400 border-neutral-800'"
-                                    class="inline-flex items-center justify-center rounded-lg border px-3 py-1.5 text-xs font-semibold uppercase tracking-wide transition"
-                                    x-text="p.name"
-                                  ></button>
-                                </template>
-                              </div>
-                              <!-- No providers -->
-                              <p x-show="tunnel.providers.length === 0 && !tunnel.loading" class="text-sm text-neutral-400">
-                                No tunnel providers found (install cloudflared, ngrok, or tailscale).
-                              </p>
-                              <!-- Loading -->
-                              <p x-show="tunnel.loading" class="text-sm text-neutral-400">Loading providers...</p>
-                              <!-- Active Dynamic Tunnel (with stop button) -->
-                              <template x-if="tunnel.status.active">
-                                <div class="space-y-2">
-                                  <div class="flex items-center gap-2 text-sm">
-                                    <span class="inline-flex h-2 w-2 rounded-full bg-emerald-400"></span>
-                                    <span class="font-semibold text-emerald-400">Active</span>
-                                  </div>
-                                  <input
-                                    type="text"
-                                    :value="tunnel.status.publicUrl + '/v1'"
-                                    readonly
-                                    @focus="$el.select()"
-                                    class="w-full rounded-lg border border-emerald-500/30 bg-neutral-950 px-3 py-2 text-xs text-neutral-100 font-mono"
-                                  >
-                                  <button
-                                    @click="stopTunnel()"
-                                    class="w-full rounded-lg bg-red-500/90 px-3 py-2 text-sm font-semibold text-white hover:bg-red-600"
-                                  >Stop Tunnel</button>
-                                </div>
-                              </template>
-                              <!-- Start Form (when no dynamic tunnel and not pre-configured) -->
-                              <template x-if="!tunnel.status.active && !hasExternalUrl && tunnel.providers.some(p => p.available)">
-                                <div class="space-y-2">
-                                  <input
-                                    x-show="tunnel.providers.find(p => p.id === tunnel.selectedProvider)?.supportsNamedTunnels"
-                                    type="text"
-                                    x-model="tunnel.customDomain"
-                                    placeholder="Custom domain (optional)"
-                                    class="w-full rounded-lg border border-neutral-800 bg-neutral-950 px-3 py-2 text-sm text-neutral-100 placeholder:text-neutral-500 focus:border-neutral-600 focus:outline-none"
-                                  >
-                                  <button
-                                    @click="startTunnel()"
-                                    :disabled="tunnel.starting"
-                                    class="w-full rounded-lg bg-neutral-100 px-3 py-2 text-sm font-semibold text-neutral-950 hover:bg-white disabled:opacity-50"
-                                    x-text="tunnel.starting ? 'Starting...' : 'Start Tunnel'"
-                                  ></button>
-                                </div>
-                              </template>
-                              <!-- Error -->
-                              <p x-show="tunnel.error" class="text-sm text-red-400" x-text="tunnel.error"></p>
-                            </div>
-                          </template>
+                        <div class="flex-1 space-y-1">
+                          <div class="relative w-full">
+                            <span class="absolute left-3 top-1/2 -translate-y-1/2 text-neutral-500 text-xs pr-1">Set Base URL:</span>
+                            <input
+                              type="text"
+                              :value="hasTunnel ? effectivePublicUrl + '/v1' : ''"
+                              readonly
+                              @focus="$el.select()"
+                              :placeholder="hasTunnel ? '' : 'Create a tunnel first...'"
+                              class="rounded-lg border border-neutral-800 bg-neutral-950 px-3 py-2 text-xs text-neutral-100 focus:border-neutral-600 focus:outline-none font-mono pl-[100px] w-full"
+                            >
+                          </div>
                         </div>
                       </div>
                     </li>
@@ -464,7 +447,6 @@
         // Auth state
         claude: {
           accounts: {},         // Map of email -> account data
-          activeAccount: null,  // Currently active email
           connected: false,
           code: '',
           loading: false,
@@ -473,7 +455,6 @@
         },
         chatgpt: {
           accounts: {},         // Map of accountId -> account data
-          activeAccount: null,  // Currently active accountId
           connected: false,
           deviceId: '',
           sessionId: null,
@@ -497,7 +478,8 @@
           loading: false,
           starting: false,
           error: null,
-          customDomain: ''
+          customDomain: '',
+          detectedDomains: []
         },
 
         // Server config
@@ -532,6 +514,32 @@
           return this.tunnel.status.active || this.hasExternalUrl;
         },
 
+        // Selected tunnel provider name (falls back to generic label)
+        get selectedTunnelName() {
+          const selected = this.tunnel.providers.find(p => p.id === this.tunnel.selectedProvider);
+          return selected ? selected.name : 'Tunnel';
+        },
+
+        get firstClaudeAccountId() {
+          return Object.keys(this.claude.accounts)[0] || '';
+        },
+
+        get firstChatGptAccountId() {
+          return Object.keys(this.chatgpt.accounts)[0] || '';
+        },
+
+        // Label text for the tunnel/domain input
+        get tunnelLabel() {
+          if (this.hasTunnel) {
+            return 'OpenAI Base URL';
+          }
+          if (!this.tunnel.selectedProvider) {
+            return 'Select a tunnel provider';
+          }
+          const port = this.port || 'PORT';
+          return `Your ${this.selectedTunnelName} tunnel listens on localhost:${port}`;
+        },
+
         // Debounce timer
         _debounce: null,
 
@@ -539,10 +547,13 @@
         get apiKey() {
           const keys = [];
           const claudeMappings = new Map();
+          const fallbackClaudeAccountId = this.firstClaudeAccountId;
 
           for (const route of this.routes) {
             if (!route.cursor || !route.claude) continue;
-            const accountId = route.account || this.claude.activeAccount;
+            const accountId = route.account && this.claude.accounts[route.account]
+              ? route.account
+              : fallbackClaudeAccountId;
             if (!accountId) continue;
             const claudeAccount = this.claude.accounts[accountId];
             if (!claudeAccount || !claudeAccount.token) continue;
@@ -558,14 +569,16 @@
             keys.push(`${group.mappings.join(',')}:${group.token}`);
           }
 
-          const chatgptAccount = this.chatgpt.activeAccount ? this.chatgpt.accounts[this.chatgpt.activeAccount] : null;
+          const chatgptAccountId = this.firstChatGptAccountId;
+          const chatgptAccount = chatgptAccountId ? this.chatgpt.accounts[chatgptAccountId] : null;
           if (chatgptAccount && chatgptAccount.token) {
             const chatgptKey = chatgptAccount.accountId
               ? `${chatgptAccount.token}#${chatgptAccount.accountId}`
               : chatgptAccount.token;
             keys.push(chatgptKey);
           } else if (!keys.length) {
-            const claudeAccount = this.claude.activeAccount ? this.claude.accounts[this.claude.activeAccount] : null;
+            const claudeAccountId = this.firstClaudeAccountId;
+            const claudeAccount = claudeAccountId ? this.claude.accounts[claudeAccountId] : null;
             if (claudeAccount && claudeAccount.token) {
               keys.push(claudeAccount.token);
             }
@@ -598,6 +611,12 @@
             localStorage.removeItem('chatgpt_account_id');
             console.log('[Migration] Cleared old tokens - please re-login');
           }
+          if (localStorage.getItem('claude_active_account')) {
+            localStorage.removeItem('claude_active_account');
+          }
+          if (localStorage.getItem('chatgpt_active_account')) {
+            localStorage.removeItem('chatgpt_active_account');
+          }
 
           // Load Claude accounts from localStorage
           const savedClaudeAccounts = localStorage.getItem('claude_accounts');
@@ -608,11 +627,7 @@
               console.error('Failed to parse Claude accounts:', e);
             }
           }
-          const savedClaudeActive = localStorage.getItem('claude_active_account');
-          if (savedClaudeActive && this.claude.accounts[savedClaudeActive]) {
-            this.claude.activeAccount = savedClaudeActive;
-            this.claude.connected = true;
-          }
+          this.claude.connected = Object.keys(this.claude.accounts).length > 0;
 
           // Load ChatGPT accounts from localStorage
           const savedChatGPTAccounts = localStorage.getItem('chatgpt_accounts');
@@ -623,17 +638,19 @@
               console.error('Failed to parse ChatGPT accounts:', e);
             }
           }
-          const savedChatGPTActive = localStorage.getItem('chatgpt_active_account');
-          if (savedChatGPTActive && this.chatgpt.accounts[savedChatGPTActive]) {
-            this.chatgpt.activeAccount = savedChatGPTActive;
-            this.chatgpt.connected = true;
-          }
+          this.chatgpt.connected = Object.keys(this.chatgpt.accounts).length > 0;
 
           try {
             const res = await fetch('/api/config');
             const config = await res.json();
             this.publicUrl = config.publicUrl;
             this.port = config.port;
+            if (Array.isArray(config.cloudflaredHostnames)) {
+              this.tunnel.detectedDomains = config.cloudflaredHostnames;
+            }
+            if (!this.hasTunnel && !this.tunnel.customDomain && this.tunnel.detectedDomains.length > 0) {
+              this.tunnel.customDomain = this.tunnel.detectedDomains[0];
+            }
           } catch (e) {
             console.error('Failed to fetch config:', e);
           }
@@ -681,7 +698,6 @@
                 email: email,
                 displayName: email
               };
-              this.claude.activeAccount = email;
               this.claude.connected = true;
               this.claude.code = '';
               this.claude.showInput = false;
@@ -692,7 +708,6 @@
 
               // Save to localStorage
               localStorage.setItem('claude_accounts', JSON.stringify(this.claude.accounts));
-              localStorage.setItem('claude_active_account', email);
 
               // If in OAuth flow, complete it
               if (this.oauth.active) {
@@ -712,35 +727,21 @@
           const hasRoutes = this.routes.some(route => route.cursor && route.claude);
           if (hasRoutes) return;
           this.routes = [
-            { cursor: 'o3', claude: 'opus-4.5', account: this.claude.activeAccount || '' },
-            { cursor: 'o3-mini', claude: 'sonnet-4.5', account: this.claude.activeAccount || '' }
+            { cursor: 'o3', claude: 'opus-4.5', account: this.firstClaudeAccountId || '' },
+            { cursor: 'o3-mini', claude: 'sonnet-4.5', account: this.firstClaudeAccountId || '' }
           ];
         },
 
-        // Disconnect Claude and clear active account
-        disconnectClaude() {
-          if (this.claude.activeAccount) {
-            // Remove active account
-            delete this.claude.accounts[this.claude.activeAccount];
-            this.claude.activeAccount = null;
-
-            // If other accounts exist, switch to first one
-            const remainingAccounts = Object.keys(this.claude.accounts);
-            if (remainingAccounts.length > 0) {
-              this.claude.activeAccount = remainingAccounts[0];
-              this.claude.connected = true;
-            } else {
-              this.claude.connected = false;
-            }
-
-            // Update localStorage
-            localStorage.setItem('claude_accounts', JSON.stringify(this.claude.accounts));
-            if (this.claude.activeAccount) {
-              localStorage.setItem('claude_active_account', this.claude.activeAccount);
-            } else {
-              localStorage.removeItem('claude_active_account');
-            }
+        // Disconnect Claude account
+        disconnectClaude(accountId) {
+          if (!accountId || !this.claude.accounts[accountId]) return;
+          delete this.claude.accounts[accountId];
+          this.claude.connected = Object.keys(this.claude.accounts).length > 0;
+          const fallbackAccountId = this.firstClaudeAccountId;
+          for (const route of this.routes) {
+            if (route.account === accountId) route.account = fallbackAccountId || '';
           }
+          localStorage.setItem('claude_accounts', JSON.stringify(this.claude.accounts));
 
           this.claude.code = '';
           this.claude.showInput = false;
@@ -793,14 +794,12 @@
                 email: email,
                 displayName: displayName
               };
-              this.chatgpt.activeAccount = accountId;
               this.chatgpt.connected = true;
               this.chatgpt.polling = false;
               this.chatgpt.showInput = false;
 
               // Save to localStorage
               localStorage.setItem('chatgpt_accounts', JSON.stringify(this.chatgpt.accounts));
-              localStorage.setItem('chatgpt_active_account', accountId);
 
               // If in OAuth flow, complete it
               if (this.oauth.active) {
@@ -818,30 +817,12 @@
           }
         },
 
-        // Disconnect ChatGPT and clear active account
-        disconnectChatGPT() {
-          if (this.chatgpt.activeAccount) {
-            // Remove active account
-            delete this.chatgpt.accounts[this.chatgpt.activeAccount];
-            this.chatgpt.activeAccount = null;
-
-            // If other accounts exist, switch to first one
-            const remainingAccounts = Object.keys(this.chatgpt.accounts);
-            if (remainingAccounts.length > 0) {
-              this.chatgpt.activeAccount = remainingAccounts[0];
-              this.chatgpt.connected = true;
-            } else {
-              this.chatgpt.connected = false;
-            }
-
-            // Update localStorage
-            localStorage.setItem('chatgpt_accounts', JSON.stringify(this.chatgpt.accounts));
-            if (this.chatgpt.activeAccount) {
-              localStorage.setItem('chatgpt_active_account', this.chatgpt.activeAccount);
-            } else {
-              localStorage.removeItem('chatgpt_active_account');
-            }
-          }
+        // Disconnect ChatGPT account
+        disconnectChatGPT(accountId) {
+          if (!accountId || !this.chatgpt.accounts[accountId]) return;
+          delete this.chatgpt.accounts[accountId];
+          this.chatgpt.connected = Object.keys(this.chatgpt.accounts).length > 0;
+          localStorage.setItem('chatgpt_accounts', JSON.stringify(this.chatgpt.accounts));
 
           this.chatgpt.deviceId = '';
           this.chatgpt.sessionId = null;
@@ -877,11 +858,15 @@
           if (!this.tunnel.selectedProvider) return;
           this.tunnel.starting = true;
           this.tunnel.error = null;
+          const rawDomain = (this.tunnel.customDomain || '').trim();
+          const namedUrl = rawDomain
+            ? rawDomain.replace(/^https?:\/\//, '').split('/')[0]
+            : undefined;
           try {
             const res = await fetch(`/api/tunnels/${this.tunnel.selectedProvider}/start`, {
               method: 'POST',
               headers: { 'Accept': 'application/json', 'Content-Type': 'application/json' },
-              body: JSON.stringify({ namedUrl: this.tunnel.customDomain || undefined })
+              body: JSON.stringify({ namedUrl })
             });
             const data = await res.json();
             if (data.success) {
@@ -924,9 +909,11 @@
           try {
             // Build providers object with current credentials
             const providers = {};
+            const claudeAccountId = this.firstClaudeAccountId;
+            const chatgptAccountId = this.firstChatGptAccountId;
 
-            if (this.claude.connected && this.claude.activeAccount) {
-              const account = this.claude.accounts[this.claude.activeAccount];
+            if (this.claude.connected && claudeAccountId) {
+              const account = this.claude.accounts[claudeAccountId];
               if (account) {
                 providers.claude = {
                   access_token: account.token,
@@ -935,8 +922,8 @@
               }
             }
 
-            if (this.chatgpt.connected && this.chatgpt.activeAccount) {
-              const account = this.chatgpt.accounts[this.chatgpt.activeAccount];
+            if (this.chatgpt.connected && chatgptAccountId) {
+              const account = this.chatgpt.accounts[chatgptAccountId];
               if (account) {
                 providers.chatgpt = {
                   access_token: account.token,
@@ -951,7 +938,7 @@
             }
 
             // Get user ID (email or account ID)
-            const userId = this.claude.activeAccount || this.chatgpt.activeAccount || 'anonymous';
+            const userId = claudeAccountId || chatgptAccountId || 'anonymous';
 
             // Request authorization code
             const res = await fetch('/oauth/code', {