feat(admin-ui): add configurable Admin UI domain routing

ts_web/elements/ob-view-settings.ts

@@ -201,12 +201,14 @@ export class ObViewSettings extends DeesElement {
   public render(): TemplateResult {
     return html`
       <ob-sectionheading>Settings</ob-sectionheading>
+      ${this.renderAdminUiSettings()}
       ${this.renderExternalGatewaySettings()}
       <sz-settings-view
         .settings=${this.settingsState.settings || {
           darkMode: true,
           cloudflareToken: '',
           cloudflareZoneId: '',
+          adminUiDomain: '',
           dcrouterMode: 'managed',
           dcrouterManagedImage: 'code.foss.global/serve.zone/dcrouter:latest',
           dcrouterManagedOpsPort: 3300,
@@ -244,6 +246,30 @@ export class ObViewSettings extends DeesElement {
     `;
   }
 
+  private renderAdminUiSettings(): TemplateResult {
+    const settings = this.settingsState.settings;
+    return html`
+      <section class="gateway-card">
+        <div class="gateway-header">
+          <div class="gateway-title">Onebox Admin UI</div>
+          <div class="gateway-subtitle">Configure the public hostname for this Onebox dashboard. Onebox keeps this route separate from app service domains.</div>
+        </div>
+        <div class="gateway-content">
+          ${this.renderGatewayInput('adminUiDomain', 'Admin UI Domain', settings?.adminUiDomain || '', 'Example: onebox.example.com. Leave empty to disable the public Admin UI route.')}
+          ${this.renderGatewayReadonly('Local Target', 'Onebox OpsServer on port 3000', 'The external gateway forwards to SmartProxy, which forwards this hostname to the Onebox Admin UI.')}
+        </div>
+        <div class="gateway-footer">
+          <dees-button
+            .text=${'Save Admin UI Domain'}
+            .type=${'default'}
+            .icon=${'lucide:Save'}
+            @click=${() => this.saveAdminUiSettings()}
+          ></dees-button>
+        </div>
+      </section>
+    `;
+  }
+
   private renderExternalGatewaySettings(): TemplateResult {
     const settings = this.settingsState.settings;
     const mode = settings?.dcrouterMode || 'managed';
@@ -329,7 +355,7 @@ export class ObViewSettings extends DeesElement {
     isPassword = false,
   ): TemplateResult {
     return html`
-      <div class="gateway-field ${key === 'dcrouterGatewayUrl' ? 'full' : ''}">
+      <div class="gateway-field ${key === 'dcrouterGatewayUrl' || key === 'adminUiDomain' ? 'full' : ''}">
         <dees-input-text
           .key=${key}
           .label=${label}
@@ -393,4 +419,15 @@ export class ObViewSettings extends DeesElement {
     });
     await appstate.settingsStatePart.dispatchAction(appstate.fetchManagedDcRouterStatusAction, null);
   }
+
+  private async saveAdminUiSettings(): Promise<void> {
+    const settings = this.settingsState.settings;
+    if (!settings) return;
+
+    await appstate.settingsStatePart.dispatchAction(appstate.updateSettingsAction, {
+      settings: {
+        adminUiDomain: settings.adminUiDomain || '',
+      },
+    });
+  }
 }