@serve.zone/dcrouter 8.0.0 → 9.1.0

package/ts_web/appstate.ts

@@ -21,7 +21,7 @@ export interface IStatsState {
 }
 
 export interface IConfigState {
-  config: any | null;
+  config: interfaces.requests.IConfigData | null;
   isLoading: boolean;
   error: string | null;
 }
@@ -109,7 +109,7 @@ export const configStatePart = await appState.getStatePart<IConfigState>(
 // Determine initial view from URL path
 const getInitialView = (): string => {
   const path = typeof window !== 'undefined' ? window.location.pathname : '/';
-  const validViews = ['overview', 'network', 'emails', 'logs', 'configuration', 'security', 'certificates', 'remoteingress'];
+  const validViews = ['overview', 'network', 'emails', 'logs', 'routes', 'apitokens', 'configuration', 'security', 'certificates', 'remoteingress'];
   const segments = path.split('/').filter(Boolean);
   const view = segments[0];
   return validViews.includes(view) ? view : 'overview';
@@ -206,6 +206,32 @@ export const remoteIngressStatePart = await appState.getStatePart<IRemoteIngress
   'soft'
 );
 
+// ============================================================================
+// Route Management State
+// ============================================================================
+
+export interface IRouteManagementState {
+  mergedRoutes: interfaces.data.IMergedRoute[];
+  warnings: interfaces.data.IRouteWarning[];
+  apiTokens: interfaces.data.IApiTokenInfo[];
+  isLoading: boolean;
+  error: string | null;
+  lastUpdated: number;
+}
+
+export const routeManagementStatePart = await appState.getStatePart<IRouteManagementState>(
+  'routeManagement',
+  {
+    mergedRoutes: [],
+    warnings: [],
+    apiTokens: [],
+    isLoading: false,
+    error: null,
+    lastUpdated: 0,
+  },
+  'soft'
+);
+
 // Actions for state management
 interface IActionContext {
   identity: interfaces.data.IIdentity | null;
@@ -392,6 +418,20 @@ export const setActiveViewAction = uiStatePart.createAction<string>(async (state
     }, 100);
   }
 
+  // If switching to routes view, ensure we fetch route data
+  if (viewName === 'routes' && currentState.activeView !== 'routes') {
+    setTimeout(() => {
+      routeManagementStatePart.dispatchAction(fetchMergedRoutesAction, null);
+    }, 100);
+  }
+
+  // If switching to apitokens view, ensure we fetch token data
+  if (viewName === 'apitokens' && currentState.activeView !== 'apitokens') {
+    setTimeout(() => {
+      routeManagementStatePart.dispatchAction(fetchApiTokensAction, null);
+    }, 100);
+  }
+
   // If switching to remoteingress view, ensure we fetch edge data
   if (viewName === 'remoteingress' && currentState.activeView !== 'remoteingress') {
     setTimeout(() => {
@@ -862,6 +902,273 @@ export const toggleRemoteIngressAction = remoteIngressStatePart.createAction<{
   }
 });
 
+// ============================================================================
+// Route Management Actions
+// ============================================================================
+
+export const fetchMergedRoutesAction = routeManagementStatePart.createAction(async (statePartArg) => {
+  const context = getActionContext();
+  const currentState = statePartArg.getState();
+
+  try {
+    const request = new plugins.domtools.plugins.typedrequest.TypedRequest<
+      interfaces.requests.IReq_GetMergedRoutes
+    >('/typedrequest', 'getMergedRoutes');
+
+    const response = await request.fire({
+      identity: context.identity,
+    });
+
+    return {
+      ...currentState,
+      mergedRoutes: response.routes,
+      warnings: response.warnings,
+      isLoading: false,
+      error: null,
+      lastUpdated: Date.now(),
+    };
+  } catch (error) {
+    return {
+      ...currentState,
+      isLoading: false,
+      error: error instanceof Error ? error.message : 'Failed to fetch routes',
+    };
+  }
+});
+
+export const createRouteAction = routeManagementStatePart.createAction<{
+  route: any;
+  enabled?: boolean;
+}>(async (statePartArg, dataArg) => {
+  const context = getActionContext();
+  const currentState = statePartArg.getState();
+
+  try {
+    const request = new plugins.domtools.plugins.typedrequest.TypedRequest<
+      interfaces.requests.IReq_CreateRoute
+    >('/typedrequest', 'createRoute');
+
+    await request.fire({
+      identity: context.identity,
+      route: dataArg.route,
+      enabled: dataArg.enabled,
+    });
+
+    await routeManagementStatePart.dispatchAction(fetchMergedRoutesAction, null);
+    return statePartArg.getState();
+  } catch (error) {
+    return {
+      ...currentState,
+      error: error instanceof Error ? error.message : 'Failed to create route',
+    };
+  }
+});
+
+export const deleteRouteAction = routeManagementStatePart.createAction<string>(
+  async (statePartArg, routeId) => {
+    const context = getActionContext();
+    const currentState = statePartArg.getState();
+
+    try {
+      const request = new plugins.domtools.plugins.typedrequest.TypedRequest<
+        interfaces.requests.IReq_DeleteRoute
+      >('/typedrequest', 'deleteRoute');
+
+      await request.fire({
+        identity: context.identity,
+        id: routeId,
+      });
+
+      await routeManagementStatePart.dispatchAction(fetchMergedRoutesAction, null);
+      return statePartArg.getState();
+    } catch (error) {
+      return {
+        ...currentState,
+        error: error instanceof Error ? error.message : 'Failed to delete route',
+      };
+    }
+  }
+);
+
+export const toggleRouteAction = routeManagementStatePart.createAction<{
+  id: string;
+  enabled: boolean;
+}>(async (statePartArg, dataArg) => {
+  const context = getActionContext();
+  const currentState = statePartArg.getState();
+
+  try {
+    const request = new plugins.domtools.plugins.typedrequest.TypedRequest<
+      interfaces.requests.IReq_ToggleRoute
+    >('/typedrequest', 'toggleRoute');
+
+    await request.fire({
+      identity: context.identity,
+      id: dataArg.id,
+      enabled: dataArg.enabled,
+    });
+
+    await routeManagementStatePart.dispatchAction(fetchMergedRoutesAction, null);
+    return statePartArg.getState();
+  } catch (error) {
+    return {
+      ...currentState,
+      error: error instanceof Error ? error.message : 'Failed to toggle route',
+    };
+  }
+});
+
+export const setRouteOverrideAction = routeManagementStatePart.createAction<{
+  routeName: string;
+  enabled: boolean;
+}>(async (statePartArg, dataArg) => {
+  const context = getActionContext();
+  const currentState = statePartArg.getState();
+
+  try {
+    const request = new plugins.domtools.plugins.typedrequest.TypedRequest<
+      interfaces.requests.IReq_SetRouteOverride
+    >('/typedrequest', 'setRouteOverride');
+
+    await request.fire({
+      identity: context.identity,
+      routeName: dataArg.routeName,
+      enabled: dataArg.enabled,
+    });
+
+    await routeManagementStatePart.dispatchAction(fetchMergedRoutesAction, null);
+    return statePartArg.getState();
+  } catch (error) {
+    return {
+      ...currentState,
+      error: error instanceof Error ? error.message : 'Failed to set override',
+    };
+  }
+});
+
+export const removeRouteOverrideAction = routeManagementStatePart.createAction<string>(
+  async (statePartArg, routeName) => {
+    const context = getActionContext();
+    const currentState = statePartArg.getState();
+
+    try {
+      const request = new plugins.domtools.plugins.typedrequest.TypedRequest<
+        interfaces.requests.IReq_RemoveRouteOverride
+      >('/typedrequest', 'removeRouteOverride');
+
+      await request.fire({
+        identity: context.identity,
+        routeName,
+      });
+
+      await routeManagementStatePart.dispatchAction(fetchMergedRoutesAction, null);
+      return statePartArg.getState();
+    } catch (error) {
+      return {
+        ...currentState,
+        error: error instanceof Error ? error.message : 'Failed to remove override',
+      };
+    }
+  }
+);
+
+// ============================================================================
+// API Token Actions
+// ============================================================================
+
+export const fetchApiTokensAction = routeManagementStatePart.createAction(async (statePartArg) => {
+  const context = getActionContext();
+  const currentState = statePartArg.getState();
+
+  try {
+    const request = new plugins.domtools.plugins.typedrequest.TypedRequest<
+      interfaces.requests.IReq_ListApiTokens
+    >('/typedrequest', 'listApiTokens');
+
+    const response = await request.fire({
+      identity: context.identity,
+    });
+
+    return {
+      ...currentState,
+      apiTokens: response.tokens,
+    };
+  } catch (error) {
+    return {
+      ...currentState,
+      error: error instanceof Error ? error.message : 'Failed to fetch tokens',
+    };
+  }
+});
+
+export async function createApiToken(name: string, scopes: interfaces.data.TApiTokenScope[], expiresInDays?: number | null) {
+  const context = getActionContext();
+  const request = new plugins.domtools.plugins.typedrequest.TypedRequest<
+    interfaces.requests.IReq_CreateApiToken
+  >('/typedrequest', 'createApiToken');
+
+  return request.fire({
+    identity: context.identity,
+    name,
+    scopes,
+    expiresInDays,
+  });
+}
+
+export const revokeApiTokenAction = routeManagementStatePart.createAction<string>(
+  async (statePartArg, tokenId) => {
+    const context = getActionContext();
+    const currentState = statePartArg.getState();
+
+    try {
+      const request = new plugins.domtools.plugins.typedrequest.TypedRequest<
+        interfaces.requests.IReq_RevokeApiToken
+      >('/typedrequest', 'revokeApiToken');
+
+      await request.fire({
+        identity: context.identity,
+        id: tokenId,
+      });
+
+      await routeManagementStatePart.dispatchAction(fetchApiTokensAction, null);
+      return statePartArg.getState();
+    } catch (error) {
+      return {
+        ...currentState,
+        error: error instanceof Error ? error.message : 'Failed to revoke token',
+      };
+    }
+  }
+);
+
+export const toggleApiTokenAction = routeManagementStatePart.createAction<{
+  id: string;
+  enabled: boolean;
+}>(async (statePartArg, dataArg) => {
+  const context = getActionContext();
+  const currentState = statePartArg.getState();
+
+  try {
+    const request = new plugins.domtools.plugins.typedrequest.TypedRequest<
+      interfaces.requests.IReq_ToggleApiToken
+    >('/typedrequest', 'toggleApiToken');
+
+    await request.fire({
+      identity: context.identity,
+      id: dataArg.id,
+      enabled: dataArg.enabled,
+    });
+
+    await routeManagementStatePart.dispatchAction(fetchApiTokensAction, null);
+    return statePartArg.getState();
+  } catch (error) {
+    return {
+      ...currentState,
+      error: error instanceof Error ? error.message : 'Failed to toggle token',
+    };
+  }
+});
+
 // ============================================================================
 // TypedSocket Client for Real-time Log Streaming
 // ============================================================================

package/ts_web/elements/index.ts

@@ -4,6 +4,8 @@ export * from './ops-view-network.js';
 export * from './ops-view-emails.js';
 export * from './ops-view-logs.js';
 export * from './ops-view-config.js';
+export * from './ops-view-routes.js';
+export * from './ops-view-apitokens.js';
 export * from './ops-view-security.js';
 export * from './ops-view-certificates.js';
 export * from './ops-view-remoteingress.js';

package/ts_web/elements/ops-dashboard.ts

@@ -18,6 +18,8 @@ import { OpsViewNetwork } from './ops-view-network.js';
 import { OpsViewEmails } from './ops-view-emails.js';
 import { OpsViewLogs } from './ops-view-logs.js';
 import { OpsViewConfig } from './ops-view-config.js';
+import { OpsViewRoutes } from './ops-view-routes.js';
+import { OpsViewApiTokens } from './ops-view-apitokens.js';
 import { OpsViewSecurity } from './ops-view-security.js';
 import { OpsViewCertificates } from './ops-view-certificates.js';
 import { OpsViewRemoteIngress } from './ops-view-remoteingress.js';
@@ -41,34 +43,52 @@ export class OpsDashboard extends DeesElement {
   private viewTabs = [
     {
       name: 'Overview',
+      iconName: 'lucide:layoutDashboard',
       element: OpsViewOverview,
     },
+    {
+      name: 'Configuration',
+      iconName: 'lucide:settings',
+      element: OpsViewConfig,
+    },
     {
       name: 'Network',
+      iconName: 'lucide:network',
       element: OpsViewNetwork,
     },
     {
       name: 'Emails',
+      iconName: 'lucide:mail',
       element: OpsViewEmails,
     },
     {
       name: 'Logs',
+      iconName: 'lucide:scrollText',
       element: OpsViewLogs,
     },
     {
-      name: 'Configuration',
-      element: OpsViewConfig,
+      name: 'Routes',
+      iconName: 'lucide:route',
+      element: OpsViewRoutes,
+    },
+    {
+      name: 'ApiTokens',
+      iconName: 'lucide:key',
+      element: OpsViewApiTokens,
     },
     {
       name: 'Security',
+      iconName: 'lucide:shield',
       element: OpsViewSecurity,
     },
     {
       name: 'Certificates',
+      iconName: 'lucide:badgeCheck',
       element: OpsViewCertificates,
     },
     {
       name: 'RemoteIngress',
+      iconName: 'lucide:globe',
       element: OpsViewRemoteIngress,
     },
   ];

package/ts_web/elements/ops-view-apitokens.ts

@@ -0,0 +1,285 @@
+import * as appstate from '../appstate.js';
+import * as interfaces from '../../dist_ts_interfaces/index.js';
+import { viewHostCss } from './shared/css.js';
+
+import {
+  DeesElement,
+  css,
+  cssManager,
+  customElement,
+  html,
+  state,
+  type TemplateResult,
+} from '@design.estate/dees-element';
+
+type TApiTokenScope = interfaces.data.TApiTokenScope;
+
+@customElement('ops-view-apitokens')
+export class OpsViewApiTokens extends DeesElement {
+  @state() accessor routeState: appstate.IRouteManagementState = {
+    mergedRoutes: [],
+    warnings: [],
+    apiTokens: [],
+    isLoading: false,
+    error: null,
+    lastUpdated: 0,
+  };
+
+  constructor() {
+    super();
+    const sub = appstate.routeManagementStatePart
+      .select((s) => s)
+      .subscribe((routeState) => {
+        this.routeState = routeState;
+      });
+    this.rxSubscriptions.push(sub);
+
+    // Re-fetch tokens when user logs in (fixes race condition where
+    // the view is created before authentication completes)
+    const loginSub = appstate.loginStatePart
+      .select((s) => s.isLoggedIn)
+      .subscribe((isLoggedIn) => {
+        if (isLoggedIn) {
+          appstate.routeManagementStatePart.dispatchAction(appstate.fetchApiTokensAction, null);
+        }
+      });
+    this.rxSubscriptions.push(loginSub);
+  }
+
+  public static styles = [
+    cssManager.defaultStyles,
+    viewHostCss,
+    css`
+      .apiTokensContainer {
+        display: flex;
+        flex-direction: column;
+        gap: 24px;
+      }
+
+      .scopePill {
+        display: inline-flex;
+        align-items: center;
+        padding: 2px 6px;
+        border-radius: 3px;
+        font-size: 11px;
+        background: ${cssManager.bdTheme('rgba(0, 130, 200, 0.1)', 'rgba(0, 170, 255, 0.1)')};
+        color: ${cssManager.bdTheme('#0369a1', '#0af')};
+        margin-right: 4px;
+        margin-bottom: 2px;
+      }
+
+      .statusBadge {
+        display: inline-flex;
+        align-items: center;
+        padding: 3px 10px;
+        border-radius: 12px;
+        font-size: 12px;
+        font-weight: 600;
+        letter-spacing: 0.02em;
+        text-transform: uppercase;
+      }
+
+      .statusBadge.active {
+        background: ${cssManager.bdTheme('#dcfce7', '#14532d')};
+        color: ${cssManager.bdTheme('#166534', '#4ade80')};
+      }
+
+      .statusBadge.disabled {
+        background: ${cssManager.bdTheme('#fef2f2', '#450a0a')};
+        color: ${cssManager.bdTheme('#991b1b', '#f87171')};
+      }
+
+      .statusBadge.expired {
+        background: ${cssManager.bdTheme('#f3f4f6', '#374151')};
+        color: ${cssManager.bdTheme('#6b7280', '#9ca3af')};
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    const { apiTokens } = this.routeState;
+
+    return html`
+      <ops-sectionheading>API Tokens</ops-sectionheading>
+
+      <div class="apiTokensContainer">
+        <dees-table
+          .heading1=${'API Tokens'}
+          .heading2=${'Manage programmatic access tokens'}
+          .data=${apiTokens}
+          .dataName=${'token'}
+          .searchable=${true}
+          .displayFunction=${(token: interfaces.data.IApiTokenInfo) => ({
+            name: token.name,
+            scopes: this.renderScopePills(token.scopes),
+            status: this.renderStatusBadge(token),
+            created: new Date(token.createdAt).toLocaleDateString(),
+            expires: token.expiresAt ? new Date(token.expiresAt).toLocaleDateString() : 'Never',
+            lastUsed: token.lastUsedAt ? new Date(token.lastUsedAt).toLocaleDateString() : 'Never',
+          })}
+          .dataActions=${[
+            {
+              name: 'Create Token',
+              iconName: 'lucide:plus',
+              type: ['header'],
+              actionFunc: async () => {
+                await this.showCreateTokenDialog();
+              },
+            },
+            {
+              name: 'Enable',
+              iconName: 'lucide:play',
+              type: ['inRow', 'contextmenu'] as any,
+              actionRelevancyCheckFunc: (actionData: any) => !actionData.item.enabled,
+              actionFunc: async (actionData: any) => {
+                const token = actionData.item as interfaces.data.IApiTokenInfo;
+                await appstate.routeManagementStatePart.dispatchAction(
+                  appstate.toggleApiTokenAction,
+                  { id: token.id, enabled: true },
+                );
+              },
+            },
+            {
+              name: 'Disable',
+              iconName: 'lucide:pause',
+              type: ['inRow', 'contextmenu'] as any,
+              actionRelevancyCheckFunc: (actionData: any) => actionData.item.enabled,
+              actionFunc: async (actionData: any) => {
+                const token = actionData.item as interfaces.data.IApiTokenInfo;
+                await appstate.routeManagementStatePart.dispatchAction(
+                  appstate.toggleApiTokenAction,
+                  { id: token.id, enabled: false },
+                );
+              },
+            },
+            {
+              name: 'Revoke',
+              iconName: 'lucide:trash2',
+              type: ['inRow', 'contextmenu'] as any,
+              actionFunc: async (actionData: any) => {
+                const token = actionData.item as interfaces.data.IApiTokenInfo;
+                await appstate.routeManagementStatePart.dispatchAction(
+                  appstate.revokeApiTokenAction,
+                  token.id,
+                );
+              },
+            },
+          ]}
+        ></dees-table>
+      </div>
+    `;
+  }
+
+  private renderScopePills(scopes: TApiTokenScope[]): TemplateResult {
+    return html`<div style="display: flex; flex-wrap: wrap; gap: 2px;">${scopes.map(
+      (s) => html`<span class="scopePill">${s}</span>`,
+    )}</div>`;
+  }
+
+  private renderStatusBadge(token: interfaces.data.IApiTokenInfo): TemplateResult {
+    if (!token.enabled) {
+      return html`<span class="statusBadge disabled">Disabled</span>`;
+    }
+    if (token.expiresAt && token.expiresAt < Date.now()) {
+      return html`<span class="statusBadge expired">Expired</span>`;
+    }
+    return html`<span class="statusBadge active">Active</span>`;
+  }
+
+  private async showCreateTokenDialog() {
+    const { DeesModal } = await import('@design.estate/dees-catalog');
+
+    const allScopes: TApiTokenScope[] = [
+      'routes:read',
+      'routes:write',
+      'config:read',
+      'tokens:read',
+      'tokens:manage',
+    ];
+
+    await DeesModal.createAndShow({
+      heading: 'Create API Token',
+      content: html`
+        <div style="color: #888; margin-bottom: 12px; font-size: 13px;">
+          The token value will be shown once after creation. Copy it immediately.
+        </div>
+        <dees-form>
+          <dees-input-text .key=${'name'} .label=${'Token Name'} .required=${true}></dees-input-text>
+          <dees-input-tags
+            .key=${'scopes'}
+            .label=${'Token Scopes'}
+            .value=${['routes:read', 'routes:write']}
+            .suggestions=${allScopes}
+            .required=${true}
+          ></dees-input-tags>
+          <dees-input-text .key=${'expiresInDays'} .label=${'Expires in (days, blank = never)'}></dees-input-text>
+        </dees-form>
+      `,
+      menuOptions: [
+        {
+          name: 'Cancel',
+          iconName: 'lucide:x',
+          action: async (modalArg: any) => await modalArg.destroy(),
+        },
+        {
+          name: 'Create',
+          iconName: 'lucide:key',
+          action: async (modalArg: any) => {
+            const contentEl = modalArg.shadowRoot?.querySelector('.content');
+            const form = contentEl?.querySelector('dees-form');
+            if (!form) return;
+            const formData = await form.collectFormData();
+            if (!formData.name) return;
+
+            // dees-input-tags is not in dees-form's FORM_INPUT_TYPES, so collectFormData() won't
+            // include it. Query the tags input directly and call getValue().
+            const tagsInput = form.querySelector('dees-input-tags') as any;
+            const rawScopes: string[] = tagsInput?.getValue?.() || tagsInput?.value || formData.scopes || [];
+            const scopes = rawScopes
+              .filter((s: string) => allScopes.includes(s as any)) as TApiTokenScope[];
+
+            const expiresInDays = formData.expiresInDays
+              ? parseInt(formData.expiresInDays, 10)
+              : null;
+
+            await modalArg.destroy();
+
+            try {
+              const response = await appstate.createApiToken(formData.name, scopes, expiresInDays);
+              if (response.success && response.tokenValue) {
+                // Refresh the list first so it's ready when user dismisses the modal
+                await appstate.routeManagementStatePart.dispatchAction(appstate.fetchApiTokensAction, null);
+
+                // Show the token value in a new modal
+                await DeesModal.createAndShow({
+                  heading: 'Token Created',
+                  content: html`
+                    <div style="color: #ccc; padding: 8px 0;">
+                      <p>Copy this token now. It will not be shown again.</p>
+                      <div style="background: #111; padding: 12px; border-radius: 6px; margin-top: 8px;">
+                        <code style="color: #0f8; word-break: break-all; font-size: 13px;">${response.tokenValue}</code>
+                      </div>
+                    </div>
+                  `,
+                  menuOptions: [
+                    {
+                      name: 'Done',
+                      iconName: 'lucide:check',
+                      action: async (m: any) => await m.destroy(),
+                    },
+                  ],
+                });
+              }
+            } catch (error) {
+              console.error('Failed to create token:', error);
+            }
+          },
+        },
+      ],
+    });
+  }
+
+  async firstUpdated() {
+    await appstate.routeManagementStatePart.dispatchAction(appstate.fetchApiTokensAction, null);
+  }
+}