feat(external-gateway): add gateway client domain and DNS record support for dcrouter integration

ts_web/00_commitinfo_data.ts

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

ts_web/appstate.ts

@@ -36,6 +36,8 @@ export interface INetworkState {
   trafficStats: interfaces.data.ITrafficStats | null;
   dnsRecords: interfaces.data.IDnsRecord[];
   domains: interfaces.data.IDomainDetail[];
+  gatewayDomains: interfaces.data.IGatewayDomain[];
+  gatewayDnsRecords: interfaces.data.IGatewayDnsRecord[];
   certificates: interfaces.data.ICertificate[];
 }
 
@@ -110,6 +112,8 @@ export const networkStatePart = await appState.getStatePart<INetworkState>(
     trafficStats: null,
     dnsRecords: [],
     domains: [],
+    gatewayDomains: [],
+    gatewayDnsRecords: [],
     certificates: [],
   },
   'soft',
@@ -628,6 +632,34 @@ export const fetchDomainsAction = networkStatePart.createAction(async (statePart
   }
 });
 
+export const fetchGatewayDomainsAction = networkStatePart.createAction(async (statePartArg) => {
+  const context = getActionContext();
+  try {
+    const typedRequest = new plugins.domtools.plugins.typedrequest.TypedRequest<
+      interfaces.requests.IReq_GetGatewayDomains
+    >('/typedrequest', 'getGatewayDomains');
+    const response = await typedRequest.fire({ identity: context.identity! });
+    return { ...statePartArg.getState(), gatewayDomains: response.domains };
+  } catch (err) {
+    console.error('Failed to fetch gateway domains:', err);
+    return statePartArg.getState();
+  }
+});
+
+export const fetchGatewayDnsRecordsAction = networkStatePart.createAction(async (statePartArg) => {
+  const context = getActionContext();
+  try {
+    const typedRequest = new plugins.domtools.plugins.typedrequest.TypedRequest<
+      interfaces.requests.IReq_GetGatewayDnsRecords
+    >('/typedrequest', 'getGatewayDnsRecords');
+    const response = await typedRequest.fire({ identity: context.identity! });
+    return { ...statePartArg.getState(), gatewayDnsRecords: response.records };
+  } catch (err) {
+    console.error('Failed to fetch gateway DNS records:', err);
+    return statePartArg.getState();
+  }
+});
+
 export const fetchCertificatesAction = networkStatePart.createAction(async (statePartArg) => {
   const context = getActionContext();
   try {

ts_web/elements/ob-app-shell.ts

@@ -14,6 +14,8 @@ import {
 
 import type { ObViewDashboard } from './ob-view-dashboard.js';
 import type { ObViewServices } from './ob-view-services.js';
+import type { ObViewDomains } from './ob-view-domains.js';
+import type { ObViewDnsRecords } from './ob-view-dns-records.js';
 import type { ObViewNetwork } from './ob-view-network.js';
 import type { ObViewRegistries } from './ob-view-registries.js';
 import type { ObViewTokens } from './ob-view-tokens.js';
@@ -41,6 +43,8 @@ export class ObAppShell extends DeesElement {
     { name: 'Dashboard', iconName: 'lucide:layoutDashboard', element: (async () => (await import('./ob-view-dashboard.js')).ObViewDashboard)() },
     { name: 'App Store', iconName: 'lucide:store', element: (async () => (await import('./ob-view-appstore.js')).ObViewAppStore)() },
     { name: 'Services', iconName: 'lucide:boxes', element: (async () => (await import('./ob-view-services.js')).ObViewServices)() },
+    { name: 'Domains', iconName: 'lucide:globe', element: (async () => (await import('./ob-view-domains.js')).ObViewDomains)() },
+    { name: 'DNS Records', iconName: 'lucide:listTree', element: (async () => (await import('./ob-view-dns-records.js')).ObViewDnsRecords)() },
     { name: 'Network', iconName: 'lucide:network', element: (async () => (await import('./ob-view-network.js')).ObViewNetwork)() },
     { name: 'Registries', iconName: 'lucide:package', element: (async () => (await import('./ob-view-registries.js')).ObViewRegistries)() },
     { name: 'Tokens', iconName: 'lucide:key', element: (async () => (await import('./ob-view-tokens.js')).ObViewTokens)() },

ts_web/elements/ob-view-dashboard.ts

@@ -36,6 +36,8 @@ export class ObViewDashboard extends DeesElement {
     trafficStats: null,
     dnsRecords: [],
     domains: [],
+    gatewayDomains: [],
+    gatewayDnsRecords: [],
     certificates: [],
   };
 

ts_web/elements/ob-view-dns-records.ts

@@ -0,0 +1,88 @@
+import * as shared from './shared/index.js';
+import * as appstate from '../appstate.js';
+import { appRouter } from '../router.js';
+import {
+  DeesElement,
+  customElement,
+  html,
+  state,
+  css,
+  cssManager,
+  type TemplateResult,
+} from '@design.estate/dees-element';
+
+@customElement('ob-view-dns-records')
+export class ObViewDnsRecords extends DeesElement {
+  @state()
+  accessor networkState: appstate.INetworkState = {
+    targets: [],
+    stats: null,
+    trafficStats: null,
+    dnsRecords: [],
+    domains: [],
+    gatewayDomains: [],
+    gatewayDnsRecords: [],
+    certificates: [],
+  };
+
+  constructor() {
+    super();
+    const networkSub = appstate.networkStatePart.select((s) => s).subscribe((newState) => {
+      this.networkState = newState;
+    });
+    this.rxSubscriptions.push(networkSub);
+  }
+
+  public static styles = [
+    cssManager.defaultStyles,
+    shared.viewHostCss,
+    css`
+      .table { border: 1px solid var(--ci-shade-2, #e4e4e7); border-radius: 10px; overflow: hidden; }
+      .row { display: grid; grid-template-columns: 2fr 90px 2fr 90px 140px 220px; gap: 16px; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--ci-shade-2, #e4e4e7); }
+      .row:last-child { border-bottom: none; }
+      .header { font-size: 12px; font-weight: 700; text-transform: uppercase; color: var(--ci-shade-5, #71717a); background: var(--ci-shade-1, #f4f4f5); }
+      .name { font-weight: 600; }
+      .value { font-family: monospace; color: var(--ci-shade-5, #71717a); overflow-wrap: anywhere; }
+      .badge { border-radius: 999px; padding: 3px 8px; background: var(--ci-shade-1, #f4f4f5); font-size: 12px; }
+      .missing { color: #dc2626; }
+      a, button.link { color: var(--ci-primary, #2563eb); background: none; border: none; padding: 0; cursor: pointer; font: inherit; text-decoration: none; }
+      .actions { display: flex; gap: 12px; }
+      .empty { padding: 32px; text-align: center; color: var(--ci-shade-5, #71717a); }
+    `,
+  ];
+
+  async connectedCallback() {
+    super.connectedCallback();
+    await appstate.networkStatePart.dispatchAction(appstate.fetchGatewayDnsRecordsAction, null);
+  }
+
+  public render(): TemplateResult {
+    const records = this.networkState.gatewayDnsRecords;
+    return html`
+      <ob-sectionheading>DNS Records</ob-sectionheading>
+      <div class="table">
+        <div class="row header">
+          <span>Name</span>
+          <span>Type</span>
+          <span>Value</span>
+          <span>Status</span>
+          <span>Service</span>
+          <span>Actions</span>
+        </div>
+        ${records.length ? records.map((record) => html`
+          <div class="row ${record.status === 'missing' ? 'missing' : ''}">
+            <span class="name">${record.name}</span>
+            <span><span class="badge">${record.type}</span></span>
+            <span class="value">${record.value || '-'}</span>
+            <span>${record.status}</span>
+            <span>${record.serviceName || record.appId}</span>
+            <span class="actions">
+              <button class="link" @click=${() => appRouter.navigateToView('services')}>View service</button>
+              ${record.manageUrl ? html`<a href=${record.manageUrl} target="_blank" rel="noopener">Manage in dcrouter</a>` : ''}
+            </span>
+          </div>
+        `) : html`<div class="empty">No gateway DNS records found. Configure a dcrouter gateway in Settings.</div>`}
+      </div>
+    `;
+  }
+}

ts_web/elements/ob-view-domains.ts

@@ -0,0 +1,97 @@
+import * as shared from './shared/index.js';
+import * as appstate from '../appstate.js';
+import {
+  DeesElement,
+  customElement,
+  html,
+  state,
+  css,
+  cssManager,
+  type TemplateResult,
+} from '@design.estate/dees-element';
+
+@customElement('ob-view-domains')
+export class ObViewDomains extends DeesElement {
+  @state()
+  accessor networkState: appstate.INetworkState = {
+    targets: [],
+    stats: null,
+    trafficStats: null,
+    dnsRecords: [],
+    domains: [],
+    gatewayDomains: [],
+    gatewayDnsRecords: [],
+    certificates: [],
+  };
+
+  constructor() {
+    super();
+    const networkSub = appstate.networkStatePart.select((s) => s).subscribe((newState) => {
+      this.networkState = newState;
+    });
+    this.rxSubscriptions.push(networkSub);
+  }
+
+  public static styles = [
+    cssManager.defaultStyles,
+    shared.viewHostCss,
+    css`
+      .table {
+        border: 1px solid var(--ci-shade-2, #e4e4e7);
+        border-radius: 10px;
+        overflow: hidden;
+      }
+      .row {
+        display: grid;
+        grid-template-columns: 2fr 1fr 120px 120px 140px;
+        gap: 16px;
+        align-items: center;
+        padding: 14px 16px;
+        border-bottom: 1px solid var(--ci-shade-2, #e4e4e7);
+      }
+      .row:last-child { border-bottom: none; }
+      .header { font-size: 12px; font-weight: 700; text-transform: uppercase; color: var(--ci-shade-5, #71717a); background: var(--ci-shade-1, #f4f4f5); }
+      .domain { font-weight: 600; }
+      .muted { color: var(--ci-shade-5, #71717a); font-size: 13px; }
+      .badge { border-radius: 999px; padding: 3px 8px; background: var(--ci-shade-1, #f4f4f5); font-size: 12px; }
+      a { color: var(--ci-primary, #2563eb); text-decoration: none; }
+      .empty { padding: 32px; text-align: center; color: var(--ci-shade-5, #71717a); }
+    `,
+  ];
+
+  async connectedCallback() {
+    super.connectedCallback();
+    await appstate.networkStatePart.dispatchAction(appstate.fetchGatewayDomainsAction, null);
+  }
+
+  public render(): TemplateResult {
+    const domains = this.networkState.gatewayDomains;
+    return html`
+      <ob-sectionheading>Domains</ob-sectionheading>
+      <div class="muted" style="margin-bottom: 16px;">
+        Domains are managed in dcrouter. Onebox shows gateway visibility for deployed services.
+      </div>
+      <div class="table">
+        <div class="row header">
+          <span>Domain</span>
+          <span>Source</span>
+          <span>Authoritative</span>
+          <span>Services</span>
+          <span>Actions</span>
+        </div>
+        ${domains.length ? domains.map((domain) => html`
+          <div class="row">
+            <span>
+              <span class="domain">${domain.name}</span>
+              ${domain.providerId ? html`<div class="muted">Provider: ${domain.providerId}</div>` : ''}
+            </span>
+            <span><span class="badge">${domain.source || 'dcrouter'}</span></span>
+            <span>${domain.authoritative ? 'Yes' : 'No'}</span>
+            <span>${domain.serviceCount || 0}</span>
+            <span>${domain.manageUrl ? html`<a href=${domain.manageUrl} target="_blank" rel="noopener">Manage in dcrouter</a>` : '-'}</span>
+          </div>
+        `) : html`<div class="empty">No gateway domains found. Configure a dcrouter gateway in Settings.</div>`}
+      </div>
+    `;
+  }
+}

ts_web/elements/ob-view-network.ts

@@ -20,6 +20,8 @@ export class ObViewNetwork extends DeesElement {
     trafficStats: null,
     dnsRecords: [],
     domains: [],
+    gatewayDomains: [],
+    gatewayDnsRecords: [],
     certificates: [],
   };
 

ts_web/elements/ob-view-settings.ts

@@ -117,6 +117,8 @@ export class ObViewSettings extends DeesElement {
           darkMode: true,
           cloudflareToken: '',
           cloudflareZoneId: '',
+          dcrouterGatewayClientId: '',
+          dcrouterWorkHosterId: '',
           autoRenewCerts: false,
           renewalThreshold: 30,
           acmeEmail: '',
@@ -152,12 +154,12 @@ export class ObViewSettings extends DeesElement {
       <section class="gateway-card">
         <div class="gateway-header">
           <div class="gateway-title">Delegate Routing</div>
-          <div class="gateway-subtitle">Delegate public WorkApp routing, DNS, and certificates to a dcrouter edge authority.</div>
+          <div class="gateway-subtitle">Delegate public app routing, DNS, and certificates to a dcrouter edge authority.</div>
         </div>
         <div class="gateway-content">
           ${this.renderGatewayInput('dcrouterGatewayUrl', 'Gateway URL', settings?.dcrouterGatewayUrl || '', 'Base URL of the dcrouter OpsServer.')}
-          ${this.renderGatewayInput('dcrouterGatewayApiToken', 'API Token', settings?.dcrouterGatewayApiToken || '', 'Requires workhosters and certificates scopes.', true)}
-          ${this.renderGatewayInput('dcrouterWorkHosterId', 'WorkHoster ID', settings?.dcrouterWorkHosterId || '', 'Leave empty to let Onebox create a stable ID.')}
+          ${this.renderGatewayInput('dcrouterGatewayApiToken', 'API Token', settings?.dcrouterGatewayApiToken || '', 'Requires gateway-client access in dcrouter.', true)}
+          ${this.renderGatewayInput('dcrouterGatewayClientId', 'Gateway Client ID', settings?.dcrouterGatewayClientId || settings?.dcrouterWorkHosterId || '', 'Leave empty to let Onebox create a stable ID.')}
           ${this.renderGatewayInput('dcrouterTargetHost', 'Target Host', settings?.dcrouterTargetHost || '', 'Defaults to the configured server IP when empty.')}
           ${this.renderGatewayInput('dcrouterTargetPort', 'Target Port', String(settings?.dcrouterTargetPort || 80), 'Internal HTTP port dcrouter forwards to.')}
         </div>
@@ -217,7 +219,7 @@ export class ObViewSettings extends DeesElement {
       settings: {
         dcrouterGatewayUrl: settings.dcrouterGatewayUrl || '',
         dcrouterGatewayApiToken: settings.dcrouterGatewayApiToken || '',
-        dcrouterWorkHosterId: settings.dcrouterWorkHosterId || '',
+        dcrouterGatewayClientId: settings.dcrouterGatewayClientId || settings.dcrouterWorkHosterId || '',
         dcrouterTargetHost: settings.dcrouterTargetHost || '',
         dcrouterTargetPort: Number(settings.dcrouterTargetPort) || 80,
       },

ts_web/router.ts

@@ -4,7 +4,7 @@ import * as appstate from './appstate.js';
 const SmartRouter = plugins.domtools.plugins.smartrouter.SmartRouter;
 
 export const validViews = [
-  'dashboard', 'app-store', 'services', 'network',
+  'dashboard', 'app-store', 'services', 'domains', 'dns-records', 'network',
   'registries', 'tokens', 'settings',
 ] as const;