@mettlecast/domain-cli 0.2.0

package/src/commands/validate.ts

@@ -0,0 +1,208 @@
+import { stat } from 'node:fs/promises';
+import { join } from 'node:path';
+import type { RegistryEntry } from '@mettlecast/domain-cdk-packer';
+import { validRange } from 'semver';
+import type { DomainModuleConfig } from '@mettlecast/domain-runtime/types';
+import { buildRegistry } from '../builder/build-registry.js';
+import { cliLogger } from '../utils/logger.js';
+
+/**
+ * A single validation failure.
+ */
+export interface ValidationError {
+  /** Short error code for CI parsing. */
+  code: string;
+  /** Human-readable message. */
+  message: string;
+}
+
+/**
+ * Result of the validate command.
+ */
+export interface ValidationResult {
+  /** true if all checks passed. */
+  valid: boolean;
+  /** List of validation failures. Empty when valid is true. */
+  errors: ValidationError[];
+  /** Non-fatal warnings from the registry build. */
+  warnings: string[];
+}
+
+/**
+ * Check for duplicate IDs in a list of registry entries.
+ * @param entries - Array of registry entries to check.
+ * @param kind - Kind name for error messages (e.g. 'api', 'webhook').
+ * @returns Array of ValidationError objects for any duplicates found.
+ */
+function checkDuplicateIds(entries: RegistryEntry[], kind: string): ValidationError[] {
+  const seen = new Set<string>();
+  const errors: ValidationError[] = [];
+  for (const e of entries) {
+    if (seen.has(e.id)) {
+      errors.push({ code: 'DUPLICATE_ID', message: `Duplicate ${kind} id: '${e.id}'` });
+    }
+    seen.add(e.id);
+  }
+  return errors;
+}
+
+/**
+ * Check that every subscriber entry has a valid semver range string.
+ * @param entries - Subscriber registry entries to check.
+ * @returns Validation errors for any entry with an unparseable semver range.
+ */
+function checkSubscriberSemverRanges(
+  entries: import('@mettlecast/domain-cdk-packer').SubscriberRegistryEntry[],
+): ValidationError[] {
+  const errors: ValidationError[] = [];
+  for (const entry of entries) {
+    if (entry.semverRange && !validRange(entry.semverRange)) {
+      errors.push({
+        code: 'INVALID_SEMVER_RANGE',
+        message: `Subscriber '${entry.id}' has invalid semver range: '${entry.semverRange}'`,
+      });
+    }
+  }
+  return errors;
+}
+
+/**
+ * Check version lifecycle consistency: sunsetAt must be present and at least
+ * 90 days after deprecatedAt when both are specified.
+ * @param lifecycle - Optional lifecycle metadata from a registry entry.
+ * @param entryLabel - Human-readable label for error messages.
+ * @returns Validation errors for lifecycle inconsistencies.
+ */
+function checkLifecycleConsistency(
+  lifecycle: { deprecatedAt?: string; sunsetAt?: string } | undefined,
+  entryLabel: string,
+): ValidationError[] {
+  if (!lifecycle?.deprecatedAt) return [];
+  const errors: ValidationError[] = [];
+  const deprecated = new Date(lifecycle.deprecatedAt);
+
+  if (!lifecycle.sunsetAt) {
+    errors.push({
+      code: 'MISSING_SUNSET_DATE',
+      message: `${entryLabel}: deprecatedAt is set but sunsetAt is missing (90-day rule requires a sunset date)`,
+    });
+    return errors;
+  }
+
+  const sunset = new Date(lifecycle.sunsetAt);
+  const minSunset = new Date(deprecated.getTime() + 90 * 24 * 60 * 60 * 1000);
+  if (sunset < minSunset) {
+    errors.push({
+      code: 'SUNSET_TOO_SOON',
+      message: `${entryLabel}: sunsetAt must be at least 90 days after deprecatedAt (90-day deprecation rule)`,
+    });
+  }
+
+  return errors;
+}
+
+/**
+ * Stub: check for backend files not under `.mc/domains/` when mode is enforced or strict.
+ * Full file-tree scan is deferred to v1.x — this stub records the intent.
+ * @param _repoRoot - Absolute path to the repository root.
+ * @param config - Enforcement configuration.
+ * @returns Empty array (scan not yet implemented).
+ */
+async function checkRawPathViolations(
+  _repoRoot: string,
+  config: DomainModuleConfig,
+): Promise<ValidationError[]> {
+  if (config.mode === 'optional') return [];
+  return [];
+}
+
+/**
+ * Run the validate command: build the registry and perform structural validation.
+ * Exits the process with code 1 if validation fails (CI gate usage).
+ * @param domainRoot - Absolute or relative path to the domain root directory.
+ * @param exitOnFailure - If true, calls process.exit(1) on failure. Defaults to true.
+ * @param config - Optional domain module configuration. Defaults to { mode: 'optional' }.
+ * @returns ValidationResult for programmatic use (e.g. in tests).
+ */
+export async function runValidate(
+  domainRoot: string,
+  exitOnFailure = true,
+  config: DomainModuleConfig = { mode: 'optional' },
+): Promise<ValidationResult> {
+  const { registry, warnings } = await buildRegistry(domainRoot);
+  const errors: ValidationError[] = [];
+
+  // Log any build warnings (e.g. tsx import failures) immediately.
+  for (const w of warnings) {
+    cliLogger.warn(w);
+  }
+
+  errors.push(
+    ...checkDuplicateIds(registry.apis, 'api'),
+    ...checkDuplicateIds(registry.webhooks, 'webhook'),
+    ...checkDuplicateIds(registry.subscribers, 'subscriber'),
+    ...checkDuplicateIds(registry.schedules, 'schedule'),
+    ...checkDuplicateIds(registry.jobs, 'job'),
+    ...checkDuplicateIds(registry.actions, 'action'),
+    ...checkDuplicateIds(registry.integrations, 'integration'),
+    ...checkDuplicateIds(registry.events, 'event'),
+  );
+
+  const entriesWithFiles = [
+    ...registry.apis,
+    ...registry.webhooks,
+    ...registry.subscribers,
+    ...registry.schedules,
+    ...registry.jobs,
+    ...registry.actions,
+  ];
+  await Promise.all(
+    entriesWithFiles.map(async (entry) => {
+      if (!entry.handlerFile) return;
+      const absPath = join(registry.domainRoot, entry.handlerFile);
+      try {
+        await stat(absPath);
+      } catch {
+        errors.push({
+          code: 'MISSING_HANDLER_FILE',
+          message: `Handler file not found for ${entry.kind} '${entry.id}': ${absPath}`,
+        });
+      }
+    })
+  );
+
+  errors.push(...checkSubscriberSemverRanges(registry.subscribers));
+
+  for (const api of registry.apis) {
+    const entry = api as unknown as { deprecatedAt?: string; sunsetAt?: string };
+    errors.push(...checkLifecycleConsistency(entry, `api '${api.id}'`));
+  }
+
+  const rawPathErrors = await checkRawPathViolations(registry.domainRoot, config);
+  errors.push(...rawPathErrors);
+
+  const totalPrimitives = registry.apis.length + registry.webhooks.length +
+    registry.subscribers.length + registry.schedules.length +
+    registry.jobs.length + registry.actions.length;
+  if (totalPrimitives === 0) {
+    errors.push({ code: 'EMPTY_DOMAIN', message: 'Domain has no primitives defined' });
+  }
+
+  const valid = errors.length === 0;
+
+  if (valid) {
+    cliLogger.info({ domain: registry.domain.id, primitives: totalPrimitives, warnings: warnings.length }, 'Validation passed');
+  } else {
+    for (const e of errors) {
+      cliLogger.error({ code: e.code }, e.message);
+    }
+    if (warnings.length > 0) {
+      cliLogger.warn({ count: warnings.length }, 'Build warnings were encountered (see above)');
+    }
+    if (exitOnFailure) {
+      process.exit(1);
+    }
+  }
+
+  return { valid, errors, warnings };
+}

package/src/runtime-stubs/hydrate-local-ctx.ts

@@ -0,0 +1,102 @@
+import {
+  hydrateCtx,
+  noopTracer,
+  createCapturingPublisher,
+  createCapturingJobsProxy,
+  createCapturingFlowsProxy,
+  createNoopIdempotency,
+  createCache,
+  createFetch,
+  createMockDb,
+  createEmptyActionsProxy,
+  createEmptyIntegrationsProxy,
+  createEmptySecrets,
+} from '@mettlecast/domain-runtime';
+import type { DomainContext } from '@mettlecast/domain-runtime';
+import { createCliLogger } from '../utils/logger.js';
+import { loadLocalSecrets } from './load-secrets.js';
+
+/**
+ * Captured side-effects from a local-dev ctx for test inspection.
+ */
+export interface LocalCtxCaptures {
+  /** Events published via ctx.publish during this invocation. */
+  events: Array<{ eventType: string; data: unknown }>;
+  /** Jobs enqueued via ctx.jobs.enqueue during this invocation. */
+  jobs: Array<{ jobName: string; input: unknown }>;
+  /** Flows started via ctx.flows.start during this invocation. */
+  executions: Array<{ flowName: string; input: unknown }>;
+}
+
+/**
+ * Options for creating a local dev DomainContext.
+ */
+export interface LocalCtxOptions {
+  /** Absolute path to the domain root (used to read .env.local). */
+  domainRoot: string;
+  /** Override tenant id. Defaults to a placeholder UUID. */
+  tenantId?: string;
+  /** Override actor sub. Defaults to 'local-dev'. */
+  actorSub?: string;
+}
+
+/**
+ * Result of hydrateLocalCtx — the context plus capture handles.
+ */
+export interface LocalCtxResult {
+  /** The fully hydrated DomainContext with all stubs. */
+  ctx: DomainContext;
+  /** Captures for inspecting published events, enqueued jobs, started flows. */
+  captures: LocalCtxCaptures;
+}
+
+/**
+ * Hydrates a DomainContext with local-dev stubs — no AWS calls.
+ * Reads .env.local from domainRoot for the secrets stub.
+ * Uses capturing publishers/proxies so test output can inspect side effects.
+ * @param options - LocalCtxOptions controlling domain root and optional overrides.
+ * @returns LocalCtxResult with the hydrated ctx and capture handles.
+ */
+export async function hydrateLocalCtx(options: LocalCtxOptions): Promise<LocalCtxResult> {
+  const {
+    domainRoot,
+    tenantId = '00000000-0000-7000-8000-000000000000',
+    actorSub = 'local-dev',
+  } = options;
+
+  const fileSecrets = await loadLocalSecrets(domainRoot);
+  // Use loaded secrets; fall back to empty secrets if none found
+  const secrets = fileSecrets && Object.keys(fileSecrets).length > 0
+    ? fileSecrets
+    : createEmptySecrets();
+
+  const publisherCapture = createCapturingPublisher();
+  const jobsCapture = createCapturingJobsProxy();
+  const flowsCapture = createCapturingFlowsProxy();
+
+  const ctx = await hydrateCtx({}, {
+    actor: { type: 'user', sub: actorSub, email: 'dev@local' },
+    tenant: { id: tenantId, workspaceId: tenantId },
+    logger: createCliLogger('domain-dev'),
+    tracer: noopTracer,
+    fetch: createFetch(),
+    cache: createCache(),
+    idempotency: createNoopIdempotency(actorSub),
+    secrets,
+    db: createMockDb(),
+    publish: publisherCapture.publish,
+    actions: createEmptyActionsProxy(),
+    jobs: jobsCapture.proxy,
+    flows: flowsCapture.proxy,
+    integrations: createEmptyIntegrationsProxy(),
+  });
+
+  return {
+    ctx,
+    captures: {
+      events: publisherCapture.events,
+      jobs: jobsCapture.jobs,
+      executions: flowsCapture.executions,
+    },
+  };
+}

package/src/runtime-stubs/load-secrets.ts

@@ -0,0 +1,40 @@
+import { readFile } from 'node:fs/promises';
+import { join } from 'node:path';
+import type { SecretsProxy } from '@mettlecast/domain-runtime';
+
+/**
+ * Read a `.env.local` file from the given domain root directory and return
+ * its entries as a SecretsProxy (Record<string, string>).
+ * Lines starting with `#` are treated as comments and skipped.
+ * Lines without `=` are skipped. Values may be quoted with single or double quotes.
+ * Returns an empty frozen object if the file does not exist.
+ * @param domainRoot - Absolute path to the domain directory.
+ * @returns A frozen SecretsProxy mapping env var names to string values.
+ */
+export async function loadLocalSecrets(domainRoot: string): Promise<SecretsProxy> {
+  const filePath = join(domainRoot, '.env.local');
+  let raw: string;
+  try {
+    raw = await readFile(filePath, 'utf8');
+  } catch {
+    return Object.freeze({}) as SecretsProxy;
+  }
+
+  const entries: [string, string][] = raw
+    .split('\n')
+    .map(line => line.trim())
+    .filter(line => line.length > 0 && !line.startsWith('#') && line.includes('='))
+    .map(line => {
+      const idx = line.indexOf('=');
+      const key = line.slice(0, idx).trim();
+      let value = line.slice(idx + 1).trim();
+      if ((value.startsWith('"') && value.endsWith('"')) ||
+          (value.startsWith("'") && value.endsWith("'"))) {
+        value = value.slice(1, -1);
+      }
+      return [key, value] as [string, string];
+    })
+    .filter(([key]) => key.length > 0);
+
+  return Object.freeze(Object.fromEntries(entries)) as SecretsProxy;
+}

package/src/server/api-server.ts

@@ -0,0 +1,34 @@
+import Fastify, { type FastifyInstance } from 'fastify';
+import type { DomainRegistry } from '@mettlecast/domain-cdk-packer';
+import { mountRoutes } from './mount-routes.js';
+
+/**
+ * Options for creating the local API server.
+ */
+export interface ApiServerOptions {
+  /** Port to listen on. Defaults to 3000. */
+  port?: number;
+  /** Host to bind to. Defaults to '0.0.0.0'. */
+  host?: string;
+  /** The built DomainRegistry. */
+  registry: DomainRegistry;
+  /** Absolute path to the domain root. */
+  domainRoot: string;
+}
+
+/**
+ * Create and start the local Fastify API server, mounting all routes from the registry.
+ * @param options - ApiServerOptions.
+ * @returns The running FastifyInstance (caller can call server.close() to stop).
+ */
+export async function createApiServer(options: ApiServerOptions): Promise<FastifyInstance> {
+  const { port = 3000, host = '0.0.0.0', registry, domainRoot } = options;
+
+  const server = Fastify({ logger: true });
+
+  await mountRoutes({ server, registry, domainRoot });
+
+  await server.listen({ port, host });
+
+  return server;
+}

package/src/server/mount-routes.ts

@@ -0,0 +1,68 @@
+import { join } from 'node:path';
+import type { FastifyInstance } from 'fastify';
+import type { DomainRegistry } from '@mettlecast/domain-cdk-packer';
+import { hydrateLocalCtx } from '../runtime-stubs/hydrate-local-ctx.js';
+
+/**
+ * Options for mountRoutes.
+ */
+export interface MountRoutesOptions {
+  /** The Fastify server instance. */
+  server: FastifyInstance;
+  /** The built DomainRegistry. */
+  registry: DomainRegistry;
+  /** Absolute path to the domain root (needed for ctx hydration). */
+  domainRoot: string;
+}
+
+function toFastifyPath(path: string): string {
+  return path.replace(/\{(\w+)\}/g, ':$1');
+}
+
+/**
+ * Mount all API routes from the DomainRegistry onto the Fastify server.
+ * Each route dynamically imports its handler file and hydrates a local dev ctx per request.
+ * @param options - MountRoutesOptions.
+ */
+export async function mountRoutes(options: MountRoutesOptions): Promise<void> {
+  const { server, registry, domainRoot } = options;
+
+  for (const api of registry.apis) {
+    const handlerAbsPath = join(domainRoot, api.handlerFile);
+    const fastifyPath = toFastifyPath(api.path);
+
+    const mod = await import(handlerAbsPath) as Record<string, unknown>;
+    const def = Object.values(mod).find(
+      v => v && typeof v === 'object' && (v as Record<string, unknown>)['id'] === api.id
+    ) as Record<string, unknown> | undefined;
+
+    if (!def || typeof def['handler'] !== 'function') {
+      server.log.warn({ apiId: api.id, handlerAbsPath }, 'No handler function found, skipping route');
+      continue;
+    }
+
+    const handler = def['handler'] as (event: unknown, ctx: unknown) => Promise<unknown>;
+
+    server.route({
+      method: api.method === 'ANY' ? ['GET', 'POST', 'PUT', 'PATCH', 'DELETE'] : [api.method as never],
+      url: fastifyPath,
+      handler: async (request, reply) => {
+        const { ctx } = await hydrateLocalCtx({ domainRoot });
+
+        const event = {
+          method: request.method,
+          path: request.url,
+          params: request.params,
+          query: request.query,
+          body: request.body,
+          headers: request.headers,
+        };
+
+        const result = await handler(event, ctx);
+        await reply.send(result);
+      },
+    });
+
+    server.log.info({ method: api.method, path: fastifyPath, apiId: api.id }, 'Route mounted');
+  }
+}

package/src/templates/api-skeleton.ts

@@ -0,0 +1,72 @@
+/**
+ * Template for generating API handler skeleton.
+ */
+
+/**
+ * Convert kebab-case to camelCase.
+ * @param s - String in kebab-case.
+ * @returns String in camelCase.
+ */
+function camelCase(s: string): string {
+  return s.replace(/-([a-z])/g, (_, c) => c.toUpperCase());
+}
+
+/**
+ * Generates an API handler skeleton with the given domain, API, and tenancy.
+ * @param domainId - Domain ID in kebab-case.
+ * @param apiId - API ID in kebab-case.
+ * @param tenancy - Tenancy mode: 'required', 'none', or 'system'.
+ * @returns TypeScript source code as a string.
+ */
+export function apiSkeletonTemplate(domainId: string, apiId: string, tenancy: string): string {
+  const tenantPath = tenancy === 'required' ? '/v1/tenants/{tenantId}' : '/v1';
+  return `import { z } from 'zod';
+import { defineApi } from '../../../lib/domain-runtime';
+
+export const ${camelCase(apiId)} = defineApi({
+  id: '${apiId}',
+  path: '${tenantPath}/${domainId}/${apiId}',
+  tenancy: '${tenancy}',
+  versions: {
+    v1: {
+      status: 'stable',
+      input: z.object({}).optional(),
+      output: z.object({ ok: z.boolean() }),
+      handler: async (_input, _ctx) => {
+        return { ok: true };
+      },
+    },
+  },
+});
+`;
+}
+
+/**
+ * Generates a fixture JSON skeleton for API testing.
+ * @param domainId - Domain ID in kebab-case.
+ * @param apiId - API ID in kebab-case.
+ * @returns JSON string with mock event and context for testing.
+ */
+export function apiFixtureSkeleton(domainId: string, apiId: string): string {
+  return JSON.stringify({
+    description: `Fixture for ${domainId}.${apiId}`,
+    event: {
+      version: '2.0',
+      requestContext: {
+        http: { method: 'GET', path: `/v1/${domainId}/${apiId}` },
+        authorizer: {
+          jwt: {
+            claims: {
+              sub: '00000000-0000-0000-0000-000000000000',
+              email: 'test@example.com',
+              'custom:tenantId': '11111111-1111-1111-1111-111111111111',
+            },
+          },
+        },
+      },
+      pathParameters: {},
+      headers: { 'content-type': 'application/json', 'accept-version': '1' },
+      body: null,
+    },
+  }, null, 2) + '\n';
+}

package/src/templates/claude-md.ts

@@ -0,0 +1,7 @@
+/**
+ * Template for generating per-domain CLAUDE.md ownership file.
+ */
+export function claudeMdTemplate(id: string): string {
+  const titleName = id.replace(/-/g, ' ').replace(/\b\w/g, c => c.toUpperCase());
+  return `# ${titleName} Domain — Ownership\n\nYou are the domain owner for \`${id}\`.\n\n## Responsibilities\n\n- All source files under \`domains/${id}/\` are owned by you.\n- API handlers must use \`defineApi\` from \`@mettlecast/domain-runtime\`.\n- Cross-domain calls must use \`ctx.actions.call()\`, never direct imports.\n- AWS SDK must never be imported directly — use \`ctx\` helpers.\n\n## Scaffold Rules\n\nSee the root \`CLAUDE.md\` for full scaffold rules, anti-patterns, and workflow commands.\n\n## Domain Config\n\nSee \`domains/${id}/domain.config.ts\` for the domain definition.\n`;
+}

package/src/templates/dashboard-pages/account/api-keys.tsx

@@ -0,0 +1,107 @@
+import { useEffect, useState } from 'react';
+import { useApi } from '@mettlecast/sdk';
+import { useProject } from '@mettlecast/dashboard-shell';
+import { TibFormError, TibSubmitButton } from '@mettlecast/design-system';
+
+interface ApiKey {
+  keyId: string;
+  label: string;
+  prefix: string;
+  createdAt: string;
+}
+
+export function ApiKeysPage() {
+  const tib = useApi();
+  const { workspaceId } = useProject();
+  const [keys, setKeys] = useState<ApiKey[]>([]);
+  const [label, setLabel] = useState('');
+  const [newKey, setNewKey] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [creating, setCreating] = useState(false);
+
+  useEffect(() => {
+    if (!workspaceId) return;
+    tib?.listApiKeys(workspaceId)
+      .then(res => setKeys((res as any)?.items ?? []))
+      .catch(err => setError(err instanceof Error ? err.message : 'Failed to load API keys'))
+      .finally(() => setLoading(false));
+  }, [tib, workspaceId]);
+
+  async function handleCreate(e: React.FormEvent) {
+    e.preventDefault();
+    if (!workspaceId) return;
+    setCreating(true);
+    setError(null);
+    setNewKey(null);
+    try {
+      const res = await tib?.createApiKey(workspaceId, { label }) as any;
+      setNewKey(res?.key ?? null);
+      setLabel('');
+      const refreshed = await tib?.listApiKeys(workspaceId) as any;
+      setKeys(refreshed?.items ?? []);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Create failed');
+    } finally {
+      setCreating(false);
+    }
+  }
+
+  return (
+    <div className="p-6 max-w-2xl space-y-8">
+      <div>
+        <h1 className="text-2xl font-semibold tracking-tight">API keys</h1>
+        <p className="text-sm text-muted-foreground mt-1">Manage programmatic access credentials</p>
+      </div>
+
+      {newKey && (
+        <div className="rounded-md bg-green-50 dark:bg-green-950 border border-green-200 dark:border-green-800 p-4 space-y-1" role="alert">
+          <p className="text-sm font-medium text-green-800 dark:text-green-200">API key created — copy it now, it won't be shown again</p>
+          <code className="block text-xs font-mono bg-white dark:bg-black rounded px-2 py-1 break-all">{newKey}</code>
+        </div>
+      )}
+
+      <form onSubmit={handleCreate} className="flex gap-2 items-end">
+        <div className="flex-1">
+          <label htmlFor="label" className="text-sm font-medium">Label</label>
+          <input id="label" type="text" value={label} onChange={e => setLabel(e.target.value)}
+            className="mt-1 w-full rounded-md border border-input bg-background px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            placeholder="My integration" required />
+        </div>
+        <TibSubmitButton loading={creating}>Create key</TibSubmitButton>
+      </form>
+      <TibFormError error={error} />
+
+      {loading ? <p className="text-sm text-muted-foreground">Loading…</p> : (
+        <table className="w-full text-sm">
+          <thead>
+            <tr className="border-b border-border">
+              <th className="text-left py-2 font-medium text-muted-foreground">Label</th>
+              <th className="text-left py-2 font-medium text-muted-foreground">Key prefix</th>
+              <th className="text-left py-2 font-medium text-muted-foreground">Created</th>
+              <th className="py-2" />
+            </tr>
+          </thead>
+          <tbody>
+            {keys.map(k => (
+              <tr key={k.keyId} className="border-b border-border/50">
+                <td className="py-3 font-medium">{k.label}</td>
+                <td className="py-3 font-mono text-xs">{k.prefix}…</td>
+                <td className="py-3 text-muted-foreground">{new Date(k.createdAt).toLocaleDateString()}</td>
+                <td className="py-3 text-right">
+                  <button type="button"
+                    onClick={() => window.confirm('Revoke this key?') && workspaceId && tib?.revokeApiKey(workspaceId, k.keyId).then(() => setKeys(keys.filter(x => x.keyId !== k.keyId)))}
+                    className="text-xs text-destructive hover:underline underline-offset-4">
+                    Revoke
+                  </button>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      )}
+    </div>
+  );
+}
+
+export default ApiKeysPage;