v1.30.1

changelog.md

@@ -3,6 +3,32 @@
 ## Pending
 
 
+## 2026-05-24 - 1.30.1
+
+### Fixes
+
+- align Onebox settings gateway cards with the dees-tile footer action pattern
+- align settings gateway cards with dees-tile footer actions (settings-ui)
+  - Replaces custom gateway card wrappers with dees-tile header and footer slots.
+  - Uses tile-styled action buttons for Admin UI and dcrouter settings saves.
+
+## 2026-05-24 - 1.30.0
+
+### Features
+
+- add configurable Onebox Admin UI domain
+  - expose Admin UI domain in settings
+  - sync the Admin UI route as a first-class dcrouter gateway route
+  - keep Admin UI routing separate from app service routes
+- add configurable Admin UI domain routing (admin-ui)
+  - Expose and validate the Admin UI domain in settings
+  - Sync the Admin UI as a dedicated dcrouter gateway route and SmartProxy route
+  - Preserve configured and legacy Admin UI routes during stale-route reconciliation
+
+### Fixes
+
+- preserve Onebox Admin UI routes during external gateway stale-route reconciliation
+
 ## 2026-05-24 - 1.29.0
 
 ### Features

deno.json

@@ -1,6 +1,6 @@
 {
   "name": "@serve.zone/onebox",
-  "version": "1.29.0",
+  "version": "1.30.1",
   "exports": "./mod.ts",
   "tasks": {
     "test": "deno test --allow-all test/",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@serve.zone/onebox",
-  "version": "1.29.0",
+  "version": "1.30.1",
   "description": "Self-hosted container platform with automatic SSL and DNS - a mini Heroku for single servers",
   "main": "mod.ts",
   "type": "module",

test/external_gateway_test.ts

@@ -173,6 +173,47 @@ Deno.test('ExternalGatewayManager syncs service routes to dcrouter gatewayClient
   assertEquals(syncRequest.requestData.enabled, true);
 });
 
+Deno.test('ExternalGatewayManager syncs Admin UI route to dcrouter gatewayClient API', async () => {
+  const oneboxRef = makeOneboxRef();
+  oneboxRef.database.settings.set('adminUiDomain', 'Onebox.Example.com');
+  oneboxRef.database.settings.set('serverIP', '203.0.113.10');
+  oneboxRef.database.settings.set('httpPort', '8080');
+
+  const requests: Array<{ method: string; requestData: Record<string, unknown> }> = [];
+  const manager = new ExternalGatewayManager(oneboxRef as any);
+  (manager as any).fireDcRouterRequest = async (
+    method: string,
+    requestData: Record<string, unknown>,
+  ) => {
+    if (method === 'getGatewayClientContext') {
+      return {
+        context: { role: 'gatewayClient', gatewayClient: { type: 'onebox', id: 'onebox-token' } },
+      };
+    }
+    requests.push({ method, requestData });
+    if (method === 'exportCertificate') {
+      return { success: false };
+    }
+    return { success: true, action: 'created', routeId: 'admin-route' };
+  };
+
+  await manager.syncAdminUiRoute();
+
+  const syncRequest = requests.find((request) => request.method === 'syncGatewayClientRoute')!;
+  const route = syncRequest.requestData.route as any;
+  const ownership = syncRequest.requestData.ownership as any;
+
+  assertEquals(ownership, {
+    gatewayClientType: 'onebox',
+    gatewayClientId: 'onebox-token',
+    appId: 'onebox-admin-ui',
+    hostname: 'onebox.example.com',
+  });
+  assertEquals(route.match, { ports: [443], domains: ['onebox.example.com'] });
+  assertEquals(route.action.targets, [{ host: '203.0.113.10', port: 8080 }]);
+  assertEquals(syncRequest.requestData.enabled, true);
+});
+
 Deno.test('ExternalGatewayManager uses managed dcrouter local target in managed mode', async () => {
   const oneboxRef = makeOneboxRef();
   (oneboxRef as any).managedDcRouter = {
@@ -322,6 +363,206 @@ Deno.test('ExternalGatewayManager removes stale gateway routes during reconcilia
   assertEquals((deletes[0].ownership as any).hostname, 'stale.example.com');
 });
 
+Deno.test('ExternalGatewayManager preserves configured Admin UI route during reconciliation', async () => {
+  const oneboxRef = makeOneboxRef();
+  oneboxRef.database.settings.set('adminUiDomain', 'onebox.example.com');
+  oneboxRef.database.settings.set('serverIP', '203.0.113.10');
+  oneboxRef.database.services.push({
+    id: 1,
+    name: 'active',
+    image: 'nginx:latest',
+    envVars: {},
+    port: 3000,
+    domain: 'active.example.com',
+    status: 'running',
+    createdAt: 1,
+    updatedAt: 1,
+  });
+
+  const deletes: Record<string, unknown>[] = [];
+  const manager = new ExternalGatewayManager(oneboxRef as any);
+  (manager as any).fireDcRouterRequest = async (method: string, requestData: Record<string, unknown>) => {
+    if (method === 'getGatewayClientContext') {
+      return { context: { role: 'gatewayClient', gatewayClient: { type: 'onebox', id: 'onebox-token' } } };
+    }
+    if (method === 'syncGatewayClientRoute') {
+      if (requestData.delete) {
+        deletes.push(requestData);
+        return { success: true, action: 'deleted' };
+      }
+      return { success: true, action: 'updated' };
+    }
+    if (method === 'exportCertificate') {
+      return { success: false };
+    }
+    if (method === 'getGatewayClientDnsRecords') {
+      return {
+        records: [
+          {
+            id: 'admin-record',
+            domainId: 'domain-1',
+            name: 'onebox',
+            type: 'A',
+            value: '203.0.113.10',
+            ttl: 300,
+            source: 'route',
+            status: 'active',
+            gatewayClientType: 'onebox',
+            gatewayClientId: 'onebox-token',
+            appId: 'onebox-admin-ui',
+            hostname: 'onebox.example.com',
+            routeId: 'admin-route',
+          },
+          {
+            id: 'stale-record',
+            domainId: 'domain-1',
+            name: 'stale',
+            type: 'A',
+            value: '203.0.113.10',
+            ttl: 300,
+            source: 'route',
+            status: 'active',
+            gatewayClientType: 'onebox',
+            gatewayClientId: 'onebox-token',
+            appId: 'stale',
+            hostname: 'stale.example.com',
+            routeId: 'stale-route',
+          },
+        ],
+      };
+    }
+    throw new Error(`Unexpected method: ${method}`);
+  };
+
+  await manager.syncServiceRoutes();
+
+  assertEquals(deletes.length, 1);
+  assertEquals((deletes[0].ownership as any).hostname, 'stale.example.com');
+});
+
+Deno.test('ExternalGatewayManager preserves legacy Admin UI route when setting is absent', async () => {
+  const oneboxRef = makeOneboxRef();
+  oneboxRef.database.settings.set('serverIP', '203.0.113.10');
+
+  const deletes: Record<string, unknown>[] = [];
+  const manager = new ExternalGatewayManager(oneboxRef as any);
+  (manager as any).fireDcRouterRequest = async (
+    method: string,
+    requestData: Record<string, unknown>,
+  ) => {
+    if (method === 'getGatewayClientContext') {
+      return {
+        context: { role: 'gatewayClient', gatewayClient: { type: 'onebox', id: 'onebox-token' } },
+      };
+    }
+    if (method === 'syncGatewayClientRoute') {
+      if (requestData.delete) {
+        deletes.push(requestData);
+        return { success: true, action: 'deleted' };
+      }
+      return { success: true, action: 'updated' };
+    }
+    if (method === 'getGatewayClientDnsRecords') {
+      return {
+        records: [
+          {
+            id: 'legacy-admin-record',
+            domainId: 'domain-1',
+            name: 'onebox',
+            type: 'A',
+            value: '203.0.113.10',
+            ttl: 300,
+            source: 'route',
+            status: 'active',
+            gatewayClientType: 'onebox',
+            gatewayClientId: 'onebox-token',
+            appId: 'onebox',
+            hostname: 'onebox.example.com',
+            routeId: 'legacy-admin-route',
+          },
+          {
+            id: 'stale-record',
+            domainId: 'domain-1',
+            name: 'stale',
+            type: 'A',
+            value: '203.0.113.10',
+            ttl: 300,
+            source: 'route',
+            status: 'active',
+            gatewayClientType: 'onebox',
+            gatewayClientId: 'onebox-token',
+            appId: 'stale',
+            hostname: 'stale.example.com',
+            routeId: 'stale-route',
+          },
+        ],
+      };
+    }
+    throw new Error(`Unexpected method: ${method}`);
+  };
+
+  await manager.syncServiceRoutes();
+
+  assertEquals(deletes.length, 1);
+  assertEquals((deletes[0].ownership as any).hostname, 'stale.example.com');
+});
+
+Deno.test('ExternalGatewayManager deletes old Admin UI route after domain change', async () => {
+  const oneboxRef = makeOneboxRef();
+  oneboxRef.database.settings.set('adminUiDomain', 'new.example.com');
+  oneboxRef.database.settings.set('serverIP', '203.0.113.10');
+
+  const deletes: Record<string, unknown>[] = [];
+  const manager = new ExternalGatewayManager(oneboxRef as any);
+  (manager as any).fireDcRouterRequest = async (
+    method: string,
+    requestData: Record<string, unknown>,
+  ) => {
+    if (method === 'getGatewayClientContext') {
+      return {
+        context: { role: 'gatewayClient', gatewayClient: { type: 'onebox', id: 'onebox-token' } },
+      };
+    }
+    if (method === 'syncGatewayClientRoute') {
+      if (requestData.delete) {
+        deletes.push(requestData);
+        return { success: true, action: 'deleted' };
+      }
+      return { success: true, action: 'updated' };
+    }
+    if (method === 'exportCertificate') {
+      return { success: false };
+    }
+    if (method === 'getGatewayClientDnsRecords') {
+      return {
+        records: [
+          {
+            id: 'old-admin-record',
+            domainId: 'domain-1',
+            name: 'onebox',
+            type: 'A',
+            value: '203.0.113.10',
+            ttl: 300,
+            source: 'route',
+            status: 'active',
+            gatewayClientType: 'onebox',
+            gatewayClientId: 'onebox-token',
+            appId: 'onebox-admin-ui',
+            hostname: 'old.example.com',
+            routeId: 'old-admin-route',
+          },
+        ],
+      };
+    }
+    throw new Error(`Unexpected method: ${method}`);
+  };
+
+  await manager.syncServiceRoutes();
+
+  assertEquals(deletes.length, 1);
+  assertEquals((deletes[0].ownership as any).hostname, 'old.example.com');
+});
+
 Deno.test('ExternalGatewayManager imports exported dcrouter certificates into Onebox', async () => {
   const oneboxRef = makeOneboxRef();
   const manager = new ExternalGatewayManager(oneboxRef as any);

test/reverseproxy_test.ts

@@ -0,0 +1,50 @@
+import { assertEquals } from '@std/assert';
+
+import { OneboxReverseProxy } from '../ts/classes/reverseproxy.ts';
+import type { IService } from '../ts/types.ts';
+
+class FakeDatabase {
+  public settings = new Map<string, string>();
+  public services: IService[] = [];
+
+  getSetting(key: string): string | null {
+    return this.settings.get(key) ?? null;
+  }
+
+  getAllServices(): IService[] {
+    return this.services;
+  }
+
+  getServiceByID(id: number): IService | null {
+    return this.services.find((service) => service.id === id) ?? null;
+  }
+
+  getAllSSLCertificates(): [] {
+    return [];
+  }
+}
+
+Deno.test('OneboxReverseProxy loads Admin UI domain as local SmartProxy route', async () => {
+  const database = new FakeDatabase();
+  database.settings.set('adminUiDomain', 'onebox.example.com');
+  database.settings.set('serverIP', '203.0.113.10');
+
+  const reverseProxy = new OneboxReverseProxy({ database } as any);
+  const routes: Array<{ domain: string; upstream: string }> = [];
+  (reverseProxy as any).smartProxy = {
+    clear: () => routes.splice(0, routes.length),
+    addRoute: async (domain: string, upstream: string) => {
+      routes.push({ domain, upstream });
+    },
+    getCertificates: () => [],
+  };
+
+  await reverseProxy.reloadRoutes();
+
+  assertEquals(routes, [
+    {
+      domain: 'onebox.example.com',
+      upstream: '203.0.113.10:3000',
+    },
+  ]);
+});

ts/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@serve.zone/onebox',
-  version: '1.29.0',
+  version: '1.30.1',
   description: 'Self-hosted container platform with automatic SSL and DNS - a mini Heroku for single servers'
 }

ts/classes/external-gateway.ts

@@ -1,11 +1,17 @@
 import * as plugins from '../plugins.ts';
 import { logger } from '../logging.ts';
 import { getErrorMessage } from '../utils/error.ts';
+import { normalizeHostname } from '../utils/domain.ts';
 import { OneboxDatabase } from './database.ts';
 import type { IDomain, IService } from '../types.ts';
 import type { TDcRouterMode } from './managed-dcrouter.ts';
 
+const adminUiRouteName = 'onebox-admin-ui';
+
 type TWorkHosterType = 'onebox';
+type TExternalGatewayRoute = Pick<IService, 'id' | 'name' | 'domain' | 'status'> & {
+  domain: string;
+};
 
 interface IExternalGatewayConfig {
   url: string;
@@ -137,15 +143,34 @@ export class ExternalGatewayManager {
   }
 
   public async syncServiceRoutes(): Promise<void> {
+    const adminUiRoute = this.getAdminUiRoute();
+    const adminUiDomain = adminUiRoute?.domain;
     const services = this.database.getAllServices()
-      .filter((service) => service.domain && service.status === 'running');
+      .filter((service) =>
+        service.domain && service.status === 'running' && service.domain !== adminUiDomain
+      );
     const activeHostnames = new Set(services.map((service) => service.domain!));
 
+    if (adminUiRoute) {
+      activeHostnames.add(adminUiRoute.domain);
+      try {
+        await this.syncGatewayRoute(adminUiRoute);
+      } catch (error) {
+        logger.warn(
+          `Failed to sync external gateway route for ${adminUiRoute.domain}: ${
+            getErrorMessage(error)
+          }`,
+        );
+      }
+    }
+
     for (const service of services) {
       try {
         await this.syncServiceRoute(service);
       } catch (error) {
-        logger.warn(`Failed to sync external gateway route for ${service.domain}: ${getErrorMessage(error)}`);
+        logger.warn(
+          `Failed to sync external gateway route for ${service.domain}: ${getErrorMessage(error)}`,
+        );
       }
     }
 
@@ -158,6 +183,7 @@ export class ExternalGatewayManager {
 
     for (const record of records) {
       if (!record.hostname || activeHostnamesArg.has(record.hostname)) continue;
+      if (this.shouldPreserveUnconfiguredAdminUiRecord(record)) continue;
       if (!record.routeId && !record.appId && !record.serviceName) continue;
       staleRecordsByHostname.set(record.hostname, record);
     }
@@ -169,7 +195,11 @@ export class ExternalGatewayManager {
           domain: record.hostname,
         });
       } catch (error) {
-        logger.warn(`Failed to delete stale external gateway route for ${record.hostname}: ${getErrorMessage(error)}`);
+        logger.warn(
+          `Failed to delete stale external gateway route for ${record.hostname}: ${
+            getErrorMessage(error)
+          }`,
+        );
       }
     }
   }
@@ -289,40 +319,72 @@ export class ExternalGatewayManager {
   public async syncServiceRoute(service: IService): Promise<void> {
     if (!service.domain) return;
 
+    await this.syncGatewayRoute({
+      id: service.id,
+      name: service.name,
+      domain: service.domain,
+      status: service.status,
+    });
+  }
+
+  public async syncAdminUiRoute(): Promise<void> {
+    const route = this.getAdminUiRoute();
+    if (!route) return;
+    await this.syncGatewayRoute(route);
+  }
+
+  public async deleteAdminUiRoute(domain: string): Promise<void> {
+    const normalizedDomain = normalizeHostname(domain);
+    if (!normalizedDomain) return;
+    await this.deleteServiceRoute({
+      name: adminUiRouteName,
+      domain: normalizedDomain,
+    });
+  }
+
+  private async syncGatewayRoute(route: TExternalGatewayRoute): Promise<void> {
+    if (!route.domain) return;
+
     const config = await this.getConfig({ requireTarget: true });
     if (!config) return;
 
     const result = await this.fireDcRouterRequest<IWorkAppRouteSyncResult>(
       'syncGatewayClientRoute',
       {
-        ownership: this.buildGatewayClientOwnership(service, service.domain, config),
+        ownership: this.buildGatewayClientOwnership(route, route.domain, config),
-        route: this.buildRoute(service, config),
+        route: this.buildRoute(route, config),
-        enabled: service.status === 'running',
+        enabled: route.status === 'running',
       },
       config,
     ).catch(async () => {
       return await this.fireDcRouterRequest<IWorkAppRouteSyncResult>(
         'syncWorkAppRoute',
         {
-          ownership: this.buildOwnership(service, service.domain!, config),
+          ownership: this.buildOwnership(route, route.domain, config),
-          route: this.buildRoute(service, config),
+          route: this.buildRoute(route, config),
-          enabled: service.status === 'running',
+          enabled: route.status === 'running',
         },
         config,
       );
     });
 
     if (!result.success) {
-      throw new Error(result.message || `dcrouter route sync failed for ${service.domain}`);
+      throw new Error(result.message || `dcrouter route sync failed for ${route.domain}`);
     }
 
-    logger.success(`External gateway route ${result.action || 'synced'} for ${service.domain}`);
+    logger.success(`External gateway route ${result.action || 'synced'} for ${route.domain}`);
-    await this.importCertificateForDomain(service.domain).catch((error) => {
+    await this.importCertificateForDomain(route.domain).catch((error) => {
-      logger.debug(`External gateway certificate import skipped for ${service.domain}: ${getErrorMessage(error)}`);
+      logger.debug(
+        `External gateway certificate import skipped for ${route.domain}: ${
+          getErrorMessage(error)
+        }`,
+      );
     });
   }
 
-  public async deleteServiceRoute(service: Pick<IService, 'id' | 'name' | 'domain'>): Promise<void> {
+  public async deleteServiceRoute(
+    service: Pick<IService, 'id' | 'name' | 'domain'>,
+  ): Promise<void> {
     if (!service.domain) return;
 
     const config = await this.getConfig({ requireTarget: false });
@@ -536,12 +598,35 @@ export class ExternalGatewayManager {
     return ownership;
   }
 
-  private buildRoute(service: IService, config: IExternalGatewayConfig): IDcRouterRouteConfig {
+  private getAdminUiRoute(): TExternalGatewayRoute | null {
+    const domain = normalizeHostname(this.database.getSetting('adminUiDomain') || '');
+    if (!domain) return null;
     return {
-      name: this.routeName(service.domain!),
+      id: 0,
+      name: adminUiRouteName,
+      domain,
+      status: 'running',
+    };
+  }
+
+  private isAdminUiRecord(record: IGatewayDnsRecord): boolean {
+    const ownerName = record.serviceName || record.appId;
+    return ownerName === adminUiRouteName || ownerName === 'onebox';
+  }
+
+  private shouldPreserveUnconfiguredAdminUiRecord(record: IGatewayDnsRecord): boolean {
+    return this.database.getSetting('adminUiDomain') === null && this.isAdminUiRecord(record);
+  }
+
+  private buildRoute(
+    route: TExternalGatewayRoute,
+    config: IExternalGatewayConfig,
+  ): IDcRouterRouteConfig {
+    return {
+      name: this.routeName(route.domain),
       match: {
         ports: [443],
-        domains: [service.domain!],
+        domains: [route.domain],
       },
       action: {
         type: 'forward',

ts/classes/reverseproxy.ts

@@ -10,15 +10,20 @@
 
 import { logger } from '../logging.ts';
 import { getErrorMessage } from '../utils/error.ts';
+import { normalizeHostname } from '../utils/domain.ts';
 import { OneboxDatabase } from './database.ts';
 import { SmartProxyManager } from './smartproxy.ts';
 
+const adminUiRouteName = 'onebox-admin-ui';
+const adminUiPort = 3000;
+
 interface IProxyRoute {
   domain: string;
   targetHost: string;
   targetPort: number;
-  serviceId: number;
+  serviceId?: number;
   serviceName?: string;
+  routeType: 'service' | 'admin-ui';
 }
 
 export class OneboxReverseProxy {
@@ -112,6 +117,7 @@ export class OneboxReverseProxy {
         targetPort,
         serviceId,
         serviceName,
+        routeType: 'service',
       };
 
       this.routes.set(domain, route);
@@ -127,6 +133,25 @@ export class OneboxReverseProxy {
     }
   }
 
+  async addAdminUiRoute(domain: string): Promise<void> {
+    const normalizedDomain = normalizeHostname(domain);
+    if (!normalizedDomain) return;
+
+    const targetHost = this.getAdminUiTargetHost();
+    const route: IProxyRoute = {
+      domain: normalizedDomain,
+      targetHost,
+      targetPort: adminUiPort,
+      serviceName: adminUiRouteName,
+      routeType: 'admin-ui',
+    };
+
+    this.routes.set(normalizedDomain, route);
+    const upstream = `${targetHost}:${adminUiPort}`;
+    await this.smartProxy.addRoute(normalizedDomain, upstream);
+    logger.success(`Added Admin UI proxy route: ${normalizedDomain} -> ${upstream}`);
+  }
+
   /**
    * Remove a route
    */
@@ -166,6 +191,11 @@ export class OneboxReverseProxy {
         }
       }
 
+      const adminUiDomain = this.getAdminUiDomain();
+      if (adminUiDomain) {
+        await this.addAdminUiRoute(adminUiDomain);
+      }
+
       logger.success(`Loaded ${this.routes.size} proxy routes`);
     } catch (error) {
       logger.error(`Failed to reload routes: ${getErrorMessage(error)}`);
@@ -173,6 +203,18 @@ export class OneboxReverseProxy {
     }
   }
 
+  private getAdminUiDomain(): string {
+    return normalizeHostname(this.database.getSetting('adminUiDomain') || '');
+  }
+
+  private getAdminUiTargetHost(): string {
+    const serverIP = this.database.getSetting('serverIP');
+    if (!serverIP) {
+      logger.warn('serverIP is not configured; Admin UI proxy route will use host.docker.internal');
+    }
+    return serverIP || 'host.docker.internal';
+  }
+
   /**
    * Add TLS certificate for a domain
    * Sends PEM content to SmartProxy via Admin API

ts/opsserver/handlers/settings.handler.ts

@@ -4,6 +4,7 @@ import * as interfaces from '../../../ts_interfaces/index.ts';
 import { requireAdminIdentity } from '../helpers/guards.ts';
 import { logger } from '../../logging.ts';
 import { getErrorMessage } from '../../utils/error.ts';
+import { isValidHostname, normalizeHostname } from '../../utils/domain.ts';
 
 export class SettingsHandler {
   public typedrouter = new plugins.typedrequest.TypedRouter();
@@ -23,6 +24,7 @@ export class SettingsHandler {
     return {
       cloudflareToken: cloudflareToken || '',
       cloudflareZoneId: settingsMap['cloudflareZoneId'] || '',
+      adminUiDomain: settingsMap['adminUiDomain'] || '',
       dcrouterMode: managedDcRouter.getMode(),
       dcrouterManagedImage: managedDcRouter.getImage(),
       dcrouterManagedOpsPort: managedDcRouter.getOpsPort(),
@@ -64,8 +66,10 @@ export class SettingsHandler {
           const db = this.opsServerRef.oneboxRef.database;
           const updates = dataArg.settings;
 
+          const normalizedUpdates = this.normalizeUpdates(updates);
+
           // Store each setting as key-value pair
-          for (const [key, value] of Object.entries(updates)) {
+          for (const [key, value] of Object.entries(normalizedUpdates)) {
             if (value !== undefined) {
               if (db.isSecretSettingKey(key)) {
                 await db.setSecretSetting(key, String(value));
@@ -75,8 +79,8 @@ export class SettingsHandler {
             }
           }
 
-          if (this.hasExternalGatewaySetting(updates)) {
+          if (this.hasRouteSyncSetting(normalizedUpdates)) {
-            this.refreshDcRouterGateway().catch((error) => {
+            this.refreshGatewayRoutes(normalizedUpdates).catch((error) => {
               logger.warn(`dcrouter gateway settings refresh failed: ${getErrorMessage(error)}`);
             });
           }
@@ -110,8 +114,23 @@ export class SettingsHandler {
     );
   }
 
-  private hasExternalGatewaySetting(settings: Partial<interfaces.data.ISettings>): boolean {
+  private normalizeUpdates(
+    settings: Partial<interfaces.data.ISettings>,
+  ): Partial<interfaces.data.ISettings> {
+    const normalizedUpdates = { ...settings };
+    if (Object.prototype.hasOwnProperty.call(normalizedUpdates, 'adminUiDomain')) {
+      const normalizedDomain = normalizeHostname(String(normalizedUpdates.adminUiDomain || ''));
+      if (!isValidHostname(normalizedDomain)) {
+        throw new plugins.typedrequest.TypedResponseError('Invalid Admin UI domain');
+      }
+      normalizedUpdates.adminUiDomain = normalizedDomain;
+    }
+    return normalizedUpdates;
+  }
+
+  private hasRouteSyncSetting(settings: Partial<interfaces.data.ISettings>): boolean {
     return [
+      'adminUiDomain',
       'dcrouterMode',
       'dcrouterManagedImage',
       'dcrouterManagedOpsPort',
@@ -127,23 +146,29 @@ export class SettingsHandler {
     ].some((key) => Object.prototype.hasOwnProperty.call(settings, key));
   }
 
-  private async refreshDcRouterGateway(): Promise<void> {
+  private hasManagedDcRouterRuntimeSetting(settings: Partial<interfaces.data.ISettings>): boolean {
+    return [
+      'dcrouterMode',
+      'dcrouterManagedImage',
+      'dcrouterManagedOpsPort',
+      'dcrouterManagedHttpPort',
+      'dcrouterManagedHttpsPort',
+      'dcrouterManagedDataDir',
+    ].some((key) => Object.prototype.hasOwnProperty.call(settings, key));
+  }
+
+  private async refreshGatewayRoutes(settings: Partial<interfaces.data.ISettings>): Promise<void> {
     const onebox = this.opsServerRef.oneboxRef;
-    if (onebox.managedDcRouter.getMode() === 'managed') {
+    if (this.hasManagedDcRouterRuntimeSetting(settings)) {
-      await onebox.managedDcRouter.restart();
+      if (onebox.managedDcRouter.getMode() === 'managed') {
-    } else {
+        await onebox.managedDcRouter.restart();
-      await onebox.managedDcRouter.stop();
+      } else {
+        await onebox.managedDcRouter.stop();
+      }
     }
 
+    await onebox.reverseProxy.reloadRoutes();
     await onebox.externalGateway.syncDomains();
-
+    await onebox.externalGateway.syncServiceRoutes();
-    const services = onebox.database.getAllServices().filter((service) => service.domain);
-    await Promise.all(services.map(async (service) => {
-      try {
-        await onebox.externalGateway.syncServiceRoute(service);
-      } catch (error) {
-        logger.warn(`Failed to sync external gateway route for ${service.domain}: ${getErrorMessage(error)}`);
-      }
-    }));
   }
 }

ts/types.ts

@@ -280,6 +280,7 @@ export interface ISetting {
 // Application settings
 export interface IAppSettings {
   serverIP?: string;
+  adminUiDomain?: string;
   cloudflareToken?: string;
   cloudflareZoneId?: string;
   dcrouterMode?: 'managed' | 'external' | 'disabled';

ts/utils/domain.ts

@@ -0,0 +1,17 @@
+export function normalizeHostname(valueArg: string): string {
+  const trimmedValue = valueArg.trim().toLowerCase();
+  if (!trimmedValue) return '';
+
+  const withoutProtocol = trimmedValue.replace(/^[a-z][a-z0-9+.-]*:\/\//, '');
+  const withoutPath = withoutProtocol.split('/')[0].split('?')[0].split('#')[0];
+  return withoutPath.replace(/:\d+$/, '').replace(/\.$/, '');
+}
+
+export function isValidHostname(hostnameArg: string): boolean {
+  if (!hostnameArg) return true;
+  if (hostnameArg.length > 253) return false;
+  return hostnameArg.split('.').every((label) => {
+    if (!label || label.length > 63) return false;
+    return /^[a-z0-9](?:[a-z0-9-]*[a-z0-9])?$/.test(label);
+  });
+}

ts_interfaces/data/settings.ts

@@ -21,6 +21,7 @@ export interface IManagedDcRouterStatus {
 export interface ISettings {
   cloudflareToken: string;
   cloudflareZoneId: string;
+  adminUiDomain: string;
   dcrouterMode: TDcRouterMode;
   dcrouterManagedImage: string;
   dcrouterManagedOpsPort: number;

ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@serve.zone/onebox',
-  version: '1.29.0',
+  version: '1.30.1',
   description: 'Self-hosted container platform with automatic SSL and DNS - a mini Heroku for single servers'
 }

ts_web/elements/ob-view-settings.ts

@@ -48,31 +48,45 @@ export class ObViewSettings extends DeesElement {
     cssManager.defaultStyles,
     shared.viewHostCss,
     css`
-      .gateway-card {
+      dees-tile {
+        display: block;
         margin-bottom: 24px;
-        border: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
-        border-radius: 12px;
-        background: ${cssManager.bdTheme('#ffffff', '#09090b')};
-        overflow: hidden;
-        box-shadow: 0 1px 2px ${cssManager.bdTheme('rgba(0,0,0,0.04)', 'rgba(0,0,0,0.2)')};
       }
 
       .gateway-header {
-        padding: 16px 20px;
+        height: 36px;
-        border-bottom: 1px solid ${cssManager.bdTheme('#f4f4f5', '#27272a')};
+        display: flex;
-        background: ${cssManager.bdTheme('#fafafa', '#101013')};
+        align-items: center;
+        padding: 0 16px;
+        width: 100%;
+        box-sizing: border-box;
+      }
+
+      .gateway-heading {
+        flex: 1;
+        display: flex;
+        align-items: baseline;
+        gap: 8px;
+        min-width: 0;
       }
 
       .gateway-title {
-        font-size: 15px;
+        font-size: 13px;
-        font-weight: 600;
+        font-weight: 500;
-        color: ${cssManager.bdTheme('#18181b', '#fafafa')};
+        letter-spacing: -0.01em;
+        color: var(--dees-color-text-secondary);
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
       }
 
       .gateway-subtitle {
-        margin-top: 4px;
+        font-size: 12px;
-        font-size: 13px;
+        color: var(--dees-color-text-muted);
-        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
+        letter-spacing: -0.01em;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
       }
 
       .gateway-content {
@@ -176,8 +190,51 @@ export class ObViewSettings extends DeesElement {
 
       .gateway-footer {
         display: flex;
+        flex-direction: row;
         justify-content: flex-end;
-        padding: 0 20px 20px;
+        align-items: center;
+        gap: 0;
+        height: 36px;
+        width: 100%;
+        box-sizing: border-box;
+      }
+
+      .tile-button {
+        padding: 0 16px;
+        height: 100%;
+        text-align: center;
+        font-size: 12px;
+        font-weight: 500;
+        cursor: pointer;
+        user-select: none;
+        transition: all 0.15s ease;
+        background: transparent;
+        border: none;
+        border-left: 1px solid var(--dees-color-border-subtle);
+        color: var(--dees-color-text-muted);
+        white-space: nowrap;
+        display: flex;
+        align-items: center;
+        gap: 6px;
+      }
+
+      .tile-button:first-child {
+        border-left: none;
+      }
+
+      .tile-button:hover {
+        background: var(--dees-color-hover);
+        color: var(--dees-color-text-primary);
+      }
+
+      .tile-button.primary {
+        color: ${cssManager.bdTheme('hsl(217.2 91.2% 59.8%)', 'hsl(213.1 93.9% 67.8%)')};
+        font-weight: 600;
+      }
+
+      .tile-button.primary:hover {
+        background: ${cssManager.bdTheme('hsl(217.2 91.2% 59.8% / 0.08)', 'hsl(213.1 93.9% 67.8% / 0.08)')};
+        color: ${cssManager.bdTheme('hsl(217.2 91.2% 50%)', 'hsl(213.1 93.9% 75%)')};
       }
 
       @media (max-width: 700px) {
@@ -201,12 +258,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,14 +303,39 @@ export class ObViewSettings extends DeesElement {
     `;
   }
 
+  private renderAdminUiSettings(): TemplateResult {
+    const settings = this.settingsState.settings;
+    return html`
+      <dees-tile>
+        <div slot="header" class="gateway-header">
+          <div class="gateway-heading">
+            <span class="gateway-title">Onebox Admin UI</span>
+            <span class="gateway-subtitle">Configure the public hostname for this Onebox dashboard</span>
+          </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 slot="footer" class="gateway-footer">
+          <button class="tile-button primary" type="button" @click=${() => this.saveAdminUiSettings()}>
+            Save Admin UI Domain
+          </button>
+        </div>
+      </dees-tile>
+    `;
+  }
+
   private renderExternalGatewaySettings(): TemplateResult {
     const settings = this.settingsState.settings;
     const mode = settings?.dcrouterMode || 'managed';
     return html`
-      <section class="gateway-card">
+      <dees-tile>
-        <div class="gateway-header">
+        <div slot="header" class="gateway-header">
-          <div class="gateway-title">dcrouter Gateway</div>
+          <div class="gateway-heading">
-          <div class="gateway-subtitle">Run a local managed dcrouter or delegate routing, DNS, and certificates to an external dcrouter.</div>
+            <span class="gateway-title">dcrouter Gateway</span>
+            <span class="gateway-subtitle">Run a local managed dcrouter or delegate routing to an external dcrouter</span>
+          </div>
         </div>
         <div class="gateway-mode-row">
           ${this.renderModeButton('managed', 'Managed Local', mode)}
@@ -277,15 +361,12 @@ export class ObViewSettings extends DeesElement {
             <div class="gateway-disabled">dcrouter route delegation is disabled. Onebox will keep using its local SmartProxy directly.</div>
           `}
         </div>
-        <div class="gateway-footer">
+        <div slot="footer" class="gateway-footer">
-          <dees-button
+          <button class="tile-button primary" type="button" @click=${() => this.saveExternalGatewaySettings()}>
-            .text=${'Save dcrouter Settings'}
+            Save dcrouter Settings
-            .type=${'default'}
+          </button>
-            .icon=${'lucide:Save'}
-            @click=${() => this.saveExternalGatewaySettings()}
-          ></dees-button>
         </div>
-      </section>
+      </dees-tile>
     `;
   }
 
@@ -329,7 +410,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 +474,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 || '',
+      },
+    });
+  }
 }