fix(ui): gateway URL confirmation modal (based on #2880) (#3578)

* fix: adding confirmation modal to confirm gateway url change

* refactor: added modal instead of confirm prompt

* fix(ui): reconnect after confirming gateway url (#2880) (thanks @0xacb)

---------

Co-authored-by: 0xacb <amccbaptista@gmail.com>

ui/src/ui/app-render.ts

@@ -42,6 +42,7 @@ import { renderNodes } from "./views/nodes";
 import { renderOverview } from "./views/overview";
 import { renderSessions } from "./views/sessions";
 import { renderExecApprovalPrompt } from "./views/exec-approval";
+import { renderGatewayUrlConfirmation } from "./views/gateway-url-confirmation";
 import {
   approveDevicePairing,
   loadDevices,
@@ -578,6 +579,7 @@ export function renderApp(state: AppViewState) {
           : nothing}
       </main>
       ${renderExecApprovalPrompt(state)}
+      ${renderGatewayUrlConfirmation(state)}
     </div>
   `;
 }

ui/src/ui/app-settings.ts

@@ -33,6 +33,7 @@ type SettingsHost = {
   basePath: string;
   themeMedia: MediaQueryList | null;
   themeMediaHandler: ((event: MediaQueryListEvent) => void) | null;
+  pendingGatewayUrl?: string | null;
 };
 
 export function applySettings(host: SettingsHost, next: UiSettings) {
@@ -98,7 +99,7 @@ export function applySettingsFromUrl(host: SettingsHost) {
   if (gatewayUrlRaw != null) {
     const gatewayUrl = gatewayUrlRaw.trim();
     if (gatewayUrl && gatewayUrl !== host.settings.gatewayUrl) {
-      applySettings(host, { ...host.settings, gatewayUrl });
+      host.pendingGatewayUrl = gatewayUrl;
     }
     params.delete("gatewayUrl");
     shouldCleanUrl = true;

ui/src/ui/app-view-state.ts

@@ -73,6 +73,7 @@ export type AppViewState = {
   execApprovalQueue: ExecApprovalRequest[];
   execApprovalBusy: boolean;
   execApprovalError: string | null;
+  pendingGatewayUrl: string | null;
   configLoading: boolean;
   configRaw: string;
   configRawOriginal: string;
@@ -165,6 +166,8 @@ export type AppViewState = {
   handleNostrProfileImport: () => Promise<void>;
   handleNostrProfileToggleAdvanced: () => void;
   handleExecApprovalDecision: (decision: "allow-once" | "allow-always" | "deny") => Promise<void>;
+  handleGatewayUrlConfirm: () => void;
+  handleGatewayUrlCancel: () => void;
   handleConfigLoad: () => Promise<void>;
   handleConfigSave: () => Promise<void>;
   handleConfigApply: () => Promise<void>;

ui/src/ui/app.ts

@@ -152,6 +152,7 @@ export class MoltbotApp extends LitElement {
   @state() execApprovalQueue: ExecApprovalRequest[] = [];
   @state() execApprovalBusy = false;
   @state() execApprovalError: string | null = null;
+  @state() pendingGatewayUrl: string | null = null;
 
   @state() configLoading = false;
   @state() configRaw = "{\n}\n";
@@ -448,6 +449,21 @@ export class MoltbotApp extends LitElement {
     }
   }
 
+  handleGatewayUrlConfirm() {
+    const nextGatewayUrl = this.pendingGatewayUrl;
+    if (!nextGatewayUrl) return;
+    this.pendingGatewayUrl = null;
+    applySettingsInternal(
+      this as unknown as Parameters<typeof applySettingsInternal>[0],
+      { ...this.settings, gatewayUrl: nextGatewayUrl },
+    );
+    this.connect();
+  }
+
+  handleGatewayUrlCancel() {
+    this.pendingGatewayUrl = null;
+  }
+
   // Sidebar handlers for tool output viewing
   handleOpenSidebar(content: string) {
     if (this.sidebarCloseTimer != null) {

ui/src/ui/views/gateway-url-confirmation.ts

@@ -0,0 +1,39 @@
+import { html, nothing } from "lit";
+
+import type { AppViewState } from "../app-view-state";
+
+export function renderGatewayUrlConfirmation(state: AppViewState) {
+  const { pendingGatewayUrl } = state;
+  if (!pendingGatewayUrl) return nothing;
+
+  return html`
+    <div class="exec-approval-overlay" role="dialog" aria-modal="true" aria-live="polite">
+      <div class="exec-approval-card">
+        <div class="exec-approval-header">
+          <div>
+            <div class="exec-approval-title">Change Gateway URL</div>
+            <div class="exec-approval-sub">This will reconnect to a different gateway server</div>
+          </div>
+        </div>
+        <div class="exec-approval-command mono">${pendingGatewayUrl}</div>
+        <div class="callout danger" style="margin-top: 12px;">
+          Only confirm if you trust this URL. Malicious URLs can compromise your system.
+        </div>
+        <div class="exec-approval-actions">
+          <button
+            class="btn primary"
+            @click=${() => state.handleGatewayUrlConfirm()}
+          >
+            Confirm
+          </button>
+          <button
+            class="btn"
+            @click=${() => state.handleGatewayUrlCancel()}
+          >
+            Cancel
+          </button>
+        </div>
+      </div>
+    </div>
+  `;
+}