@burdenoff/microfe-devportal 2026.625.9 → 2026.626.1

package/dist/devportal/pages/ApiKeysPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"ApiKeysPage.js","names":[],"sources":["../../../src/devportal/pages/ApiKeysPage.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport { useMemo, useState } from \"react\";\nimport { useI18n } from \"@burdenoff/fe-libs/shared/providers/shell/I18nProvider\";\nimport {\n  Plus,\n  Search,\n  Key,\n  Shield,\n  Clock,\n  AlertTriangle,\n  Loader2,\n  AlertCircle,\n  RotateCw,\n  Ban,\n} from \"lucide-react\";\nimport { PageLayout } from \"../components/PageLayout\";\nimport { DataTable } from \"../components/DataTable\";\nimport { ActiveIndicator } from \"../components/StatusBadge\";\nimport { EmptyState } from \"../components/EmptyState\";\nimport { ConfirmDialog } from \"../components/ConfirmDialog\";\nimport { NewSecretAlert } from \"../components/SecretDisplay\";\nimport { SelectionCheckbox } from \"../components/SelectionCheckbox\";\nimport { useDevportal } from \"../providers/DevportalProvider\";\nimport { PermissionGuard } from \"../components\";\nimport { DEVPORTAL_PERMISSIONS } from \"../constants/permissions\";\nimport type { AuthApiKey } from \"../types\";\nimport { cn } from \"../utils/cn\";\nimport {\n  useMyApiKeysQuery,\n  useCurrentUserAppsQuery,\n  useRevokeApiKeyAuthMutation,\n  useRotateApiKeyAuthMutation,\n  getErrorMessage,\n} from \"../hooks\";\n\n/**\n * Map GraphQL APIKey to local AuthApiKey type\n */\nfunction mapApiKey(key: {\n  id: string;\n  name: string;\n  prefix: string;\n  scopes: string[];\n  appId: string;\n  appName?: string | null;\n  createdAt: string;\n  expiresAt?: string | null;\n  lastUsedAt?: string | null;\n}): AuthApiKey {\n  return {\n    id: key.id,\n    name: key.name,\n    prefix: key.prefix,\n    scopes: key.scopes,\n    appId: key.appId,\n    appName: key.appName ?? undefined,\n    createdAt: key.createdAt,\n    expiresAt: key.expiresAt ?? undefined,\n    lastUsedAt: key.lastUsedAt ?? undefined,\n  };\n}\n\nconst isExpiringSoon = (expiresAt?: string): boolean => {\n  if (!expiresAt) return false;\n  const daysUntilExpiry = Math.ceil(\n    (new Date(expiresAt).getTime() - Date.now()) / (1000 * 60 * 60 * 24),\n  );\n  return daysUntilExpiry <= 30 && daysUntilExpiry > 0;\n};\n\nconst isExpired = (expiresAt?: string): boolean => {\n  if (!expiresAt) return false;\n  return new Date(expiresAt).getTime() < Date.now();\n};\n\n/**\n * API Keys listing page\n *\n * Displays all API keys for the current user from auth-svc.\n * Previously showed devportal-svc ApiKeys per application;\n * now shows all user-owned API keys centrally.\n * Supports revoking and rotating API keys.\n */\nexport const ApiKeysPage: FC = () => {\n  const { navigate, basePath, activeOrgId } = useDevportal();\n  const { t } = useI18n();\n  const tr = (key: string, fallback: string): string => {\n    const value = t(key);\n    return value === key ? fallback : value;\n  };\n  const [searchQuery, setSearchQuery] = useState(\"\");\n  const [statusFilter, setStatusFilter] = useState<\n    \"all\" | \"active\" | \"expired\"\n  >(\"all\");\n\n  // Revoke / Rotate state\n  const [revokeTarget, setRevokeTarget] = useState<AuthApiKey | null>(null);\n  const [rotateTarget, setRotateTarget] = useState<AuthApiKey | null>(null);\n  const [newSecret, setNewSecret] = useState<string | null>(null);\n  const [selectedKeyIds, setSelectedKeyIds] = useState<Set<string>>(new Set());\n  const [bulkFeedback, setBulkFeedback] = useState<{\n    type: \"success\" | \"error\";\n    message: string;\n  } | null>(null);\n  const [showBulkRevokeDialog, setShowBulkRevokeDialog] = useState(false);\n\n  // Fetch API keys from auth-svc (user-scoped, no applicationId needed)\n  const { data, loading, error, refetch } = useMyApiKeysQuery({\n    fetchPolicy: \"cache-and-network\",\n  });\n\n  // Fetch OAuth apps to map appId → filter; key.appId is an OAuth client UUID\n  const { data: oauthAppsData } = useCurrentUserAppsQuery({\n    fetchPolicy: \"cache-first\",\n  });\n  const orgAppIds = useMemo(() => {\n    const apps = oauthAppsData?.currentUserApps?.apps;\n    if (!apps?.length) return null;\n    return new Set(apps.map((a: { id: string }) => a.id));\n  }, [oauthAppsData?.currentUserApps?.apps]);\n\n  // Mutations\n  const [revokeApiKey, { loading: revokeLoading }] =\n    useRevokeApiKeyAuthMutation();\n  const [rotateApiKey, { loading: rotateLoading }] =\n    useRotateApiKeyAuthMutation();\n\n  const apiKeys: AuthApiKey[] = useMemo(\n    () => data?.myApiKeys?.apiKeys.map(mapApiKey) ?? [],\n    [data?.myApiKeys?.apiKeys],\n  );\n\n  const handleNavigate = (path: string) => {\n    navigate?.(`${basePath}${path}`);\n  };\n\n  // Revoke handler\n  const handleRevoke = async () => {\n    if (!revokeTarget) return;\n    try {\n      await revokeApiKey({\n        variables: { keyId: revokeTarget.id },\n      });\n      setRevokeTarget(null);\n      await refetch();\n    } catch {\n      // Error is surfaced by Apollo's error state on the mutation;\n      // the ConfirmDialog stays open so the user can retry or cancel.\n    }\n  };\n\n  // Rotate handler\n  const handleRotate = async () => {\n    if (!rotateTarget) return;\n    try {\n      const result = await rotateApiKey({\n        variables: { keyId: rotateTarget.id },\n      });\n      const secret = result.data?.rotateAPIKey.apiSecret;\n      if (secret) {\n        setNewSecret(secret);\n      }\n      setRotateTarget(null);\n      await refetch();\n    } catch {\n      // Error is surfaced by Apollo's error state on the mutation;\n      // the ConfirmDialog stays open so the user can retry or cancel.\n    }\n  };\n\n  // Filter keys: org scope + search + status\n  const filteredKeys = apiKeys.filter((key: AuthApiKey) => {\n    const matchesOrg = !orgAppIds || orgAppIds.has(key.appId);\n    const matchesSearch =\n      !searchQuery ||\n      key.name.toLowerCase().includes(searchQuery.toLowerCase()) ||\n      key.prefix.toLowerCase().includes(searchQuery.toLowerCase()) ||\n      (key.appName?.toLowerCase().includes(searchQuery.toLowerCase()) ?? false);\n    const matchesStatus =\n      statusFilter === \"all\" ||\n      (statusFilter === \"active\" && !isExpired(key.expiresAt)) ||\n      (statusFilter === \"expired\" && isExpired(key.expiresAt));\n    return matchesOrg && matchesSearch && matchesStatus;\n  });\n\n  const selectedKeys = useMemo(\n    () => apiKeys.filter((key) => selectedKeyIds.has(key.id)),\n    [apiKeys, selectedKeyIds],\n  );\n\n  const selectedActiveKeys = useMemo(\n    () => selectedKeys.filter((key) => !isExpired(key.expiresAt)),\n    [selectedKeys],\n  );\n\n  const allVisibleSelectableKeys = filteredKeys.filter(\n    (key) => !isExpired(key.expiresAt),\n  );\n  const allVisibleSelected =\n    allVisibleSelectableKeys.length > 0 &&\n    allVisibleSelectableKeys.every((key) => selectedKeyIds.has(key.id));\n  const partiallySelected =\n    allVisibleSelectableKeys.some((key) => selectedKeyIds.has(key.id)) &&\n    !allVisibleSelected;\n\n  const toggleKeySelection = (keyId: string, checked: boolean) => {\n    setSelectedKeyIds((prev) => {\n      const next = new Set(prev);\n      if (checked) {\n        next.add(keyId);\n      } else {\n        next.delete(keyId);\n      }\n      return next;\n    });\n  };\n\n  const toggleAllVisibleKeys = (checked: boolean) => {\n    setSelectedKeyIds((prev) => {\n      const next = new Set(prev);\n      allVisibleSelectableKeys.forEach((key) => {\n        if (checked) {\n          next.add(key.id);\n        } else {\n          next.delete(key.id);\n        }\n      });\n      return next;\n    });\n  };\n\n  const clearSelection = () => setSelectedKeyIds(new Set());\n\n  // Loading state\n  if (loading && !data) {\n    return (\n      <PageLayout\n        title={tr(\"devportal.apiKeys\", \"API Keys\")}\n        description={tr(\n          \"devportal.manageApiKeys\",\n          \"Manage your API keys for programmatic access\",\n        )}\n      >\n        <div className=\"flex items-center justify-center py-12\">\n          <Loader2 className=\"h-8 w-8 animate-spin text-muted-foreground\" />\n          <span className=\"ml-2 text-muted-foreground\">\n            {tr(\"devportal.loadingApiKeys\", \"Loading API keys...\")}\n          </span>\n        </div>\n      </PageLayout>\n    );\n  }\n\n  // Error state\n  if (error) {\n    return (\n      <PageLayout\n        title={tr(\"devportal.apiKeys\", \"API Keys\")}\n        description={tr(\n          \"devportal.manageApiKeys\",\n          \"Manage your API keys for programmatic access\",\n        )}\n      >\n        <div className=\"rounded-lg border border-destructive/50 bg-destructive/10 p-6 text-center\">\n          <AlertCircle className=\"mx-auto h-8 w-8 text-destructive\" />\n          <h3 className=\"mt-2 font-medium text-destructive\">\n            {tr(\"devportal.failedToLoadApiKeys\", \"Failed to load API keys\")}\n          </h3>\n          <p className=\"mt-1 text-sm text-muted-foreground\">\n            {getErrorMessage(error)}\n          </p>\n          <button\n            onClick={() => refetch()}\n            className=\"mt-4 rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90\"\n          >\n            {tr(\"devportal.tryAgain\", \"Try Again\")}\n          </button>\n        </div>\n      </PageLayout>\n    );\n  }\n\n  const columns = [\n    {\n      key: \"select\",\n      header: (\n        <SelectionCheckbox\n          checked={allVisibleSelected}\n          indeterminate={partiallySelected}\n          onChange={toggleAllVisibleKeys}\n          ariaLabel=\"Select all visible API keys\"\n        />\n      ),\n      className: \"w-12\",\n      render: (key: AuthApiKey) => (\n        <div onClick={(event) => event.stopPropagation()}>\n          <SelectionCheckbox\n            checked={selectedKeyIds.has(key.id)}\n            disabled={isExpired(key.expiresAt)}\n            onChange={(checked) => toggleKeySelection(key.id, checked)}\n            ariaLabel={`Select API key ${key.name}`}\n          />\n        </div>\n      ),\n    },\n    {\n      key: \"name\",\n      header: \"API Key\",\n      render: (key: AuthApiKey) => (\n        <div className=\"flex items-center gap-3\">\n          <div\n            className={cn(\n              \"flex h-10 w-10 items-center justify-center rounded-lg\",\n              isExpired(key.expiresAt)\n                ? \"bg-status-error-bg-subtle text-status-error-text\"\n                : \"bg-primary/10 text-primary\",\n            )}\n          >\n            <Key size={20} />\n          </div>\n          <div>\n            <div className=\"flex items-center gap-2\">\n              <p className=\"font-medium\">{key.name}</p>\n              {isExpired(key.expiresAt) && (\n                <span className=\"rounded bg-status-error-bg-subtle px-1.5 py-0.5 text-xs text-status-error-text\">\n                  Expired\n                </span>\n              )}\n              {isExpiringSoon(key.expiresAt) && !isExpired(key.expiresAt) && (\n                <span className=\"rounded bg-status-warning-bg-subtle px-1.5 py-0.5 text-xs text-status-warning-text\">\n                  Expiring Soon\n                </span>\n              )}\n            </div>\n            {key.appName && (\n              <p className=\"text-xs text-muted-foreground\">\n                App: {key.appName}\n              </p>\n            )}\n          </div>\n        </div>\n      ),\n    },\n    {\n      key: \"prefix\",\n      header: \"Key Prefix\",\n      render: (key: AuthApiKey) => (\n        <code className=\"text-sm text-muted-foreground\">{key.prefix}...</code>\n      ),\n    },\n    {\n      key: \"scopes\",\n      header: \"Scopes\",\n      render: (key: AuthApiKey) => (\n        <div className=\"flex flex-wrap gap-1\">\n          {key.scopes.slice(0, 3).map((scope) => (\n            <span\n              key={scope}\n              className=\"inline-flex rounded bg-muted px-1.5 py-0.5 text-xs\"\n            >\n              {scope}\n            </span>\n          ))}\n          {key.scopes.length > 3 && (\n            <span className=\"text-xs text-muted-foreground\">\n              +{key.scopes.length - 3}\n            </span>\n          )}\n        </div>\n      ),\n    },\n    {\n      key: \"lastUsed\",\n      header: \"Last Used\",\n      render: (key: AuthApiKey) => (\n        <span className=\"text-sm text-muted-foreground\">\n          {key.lastUsedAt\n            ? new Date(key.lastUsedAt).toLocaleDateString()\n            : \"Never\"}\n        </span>\n      ),\n    },\n    {\n      key: \"expires\",\n      header: \"Expires\",\n      render: (key: AuthApiKey) => (\n        <span\n          className={cn(\n            \"text-sm\",\n            isExpired(key.expiresAt)\n              ? \"text-status-error-text\"\n              : isExpiringSoon(key.expiresAt)\n                ? \"text-status-warning-text\"\n                : \"text-muted-foreground\",\n          )}\n        >\n          {key.expiresAt\n            ? new Date(key.expiresAt).toLocaleDateString()\n            : \"Never\"}\n        </span>\n      ),\n    },\n    {\n      key: \"status\",\n      header: \"Status\",\n      render: (key: AuthApiKey) => (\n        <div className=\"flex items-center gap-2\">\n          <ActiveIndicator active={!isExpired(key.expiresAt)} />\n          <span className=\"text-sm\">\n            {isExpired(key.expiresAt) ? \"Expired\" : \"Active\"}\n          </span>\n        </div>\n      ),\n    },\n    {\n      key: \"actions\",\n      header: \"Actions\",\n      className: \"w-28\",\n      render: (key: AuthApiKey) => {\n        if (isExpired(key.expiresAt)) {\n          return (\n            <span className=\"text-xs text-muted-foreground\">No actions</span>\n          );\n        }\n\n        return (\n          <div className=\"flex items-center gap-1\">\n            <button\n              type=\"button\"\n              title=\"Rotate secret\"\n              disabled={rotateLoading}\n              onClick={(e) => {\n                e.stopPropagation();\n                setRotateTarget(key);\n              }}\n              className={cn(\n                \"inline-flex items-center gap-1 rounded-md px-2 py-1 text-xs font-medium transition-colors\",\n                \"text-status-info-text hover:bg-status-info-bg-subtle\",\n                \"disabled:opacity-50 disabled:cursor-not-allowed\",\n              )}\n            >\n              <RotateCw size={14} />\n              <span className=\"sr-only sm:not-sr-only\">Rotate</span>\n            </button>\n            <button\n              type=\"button\"\n              title=\"Revoke key\"\n              disabled={revokeLoading}\n              onClick={(e) => {\n                e.stopPropagation();\n                setRevokeTarget(key);\n              }}\n              className={cn(\n                \"inline-flex items-center gap-1 rounded-md px-2 py-1 text-xs font-medium transition-colors\",\n                \"text-status-error-text hover:bg-status-error-bg-subtle\",\n                \"disabled:opacity-50 disabled:cursor-not-allowed\",\n              )}\n            >\n              <Ban size={14} />\n              <span className=\"sr-only sm:not-sr-only\">Revoke</span>\n            </button>\n          </div>\n        );\n      },\n    },\n  ];\n\n  // Stats scoped to the filtered set (org context)\n  const stats = {\n    total: filteredKeys.length,\n    active: filteredKeys.filter((k) => !isExpired(k.expiresAt)).length,\n    expiringSoon: filteredKeys.filter((k) => isExpiringSoon(k.expiresAt))\n      .length,\n    expired: filteredKeys.filter((k) => isExpired(k.expiresAt)).length,\n  };\n\n  const handleBulkRevoke = async () => {\n    if (selectedActiveKeys.length === 0) return;\n\n    const results = await Promise.allSettled(\n      selectedActiveKeys.map((key) =>\n        revokeApiKey({ variables: { keyId: key.id } }),\n      ),\n    );\n\n    const succeeded = results.filter(\n      (result) => result.status === \"fulfilled\",\n    ).length;\n    const failed = results.length - succeeded;\n\n    setBulkFeedback({\n      type: failed === 0 ? \"success\" : \"error\",\n      message: `Revoked ${succeeded} API key${succeeded === 1 ? \"\" : \"s\"}${\n        failed > 0 ? ` • ${failed} failed` : \"\"\n      }`,\n    });\n    setShowBulkRevokeDialog(false);\n    clearSelection();\n    await refetch();\n  };\n\n  return (\n    <PermissionGuard permission={DEVPORTAL_PERMISSIONS.APP_READ}>\n      <PageLayout\n        title={tr(\"devportal.apiKeys\", \"API Keys\")}\n        description={tr(\n          \"devportal.manageApiKeys\",\n          \"Manage your API keys for programmatic access\",\n        )}\n        actions={\n          <button\n            onClick={() => handleNavigate(\"/api-keys/new\")}\n            className=\"inline-flex items-center gap-2 rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 transition-colors\"\n          >\n            <Plus size={16} />\n            {tr(\"devportal.generateApiKey\", \"Generate API Key\")}\n          </button>\n        }\n      >\n        {/* New secret alert — shown after a successful rotation */}\n        {newSecret && (\n          <NewSecretAlert\n            title=\"API Key Rotated\"\n            secret={newSecret}\n            description=\"The previous secret has been invalidated. Copy the new secret below — it will not be shown again.\"\n            onDismiss={() => setNewSecret(null)}\n          />\n        )}\n\n        {bulkFeedback && (\n          <div\n            className={cn(\n              \"rounded-lg border px-4 py-3 text-sm\",\n              bulkFeedback.type === \"success\"\n                ? \"border-border-subtle bg-status-success-bg-subtle text-status-success-text\"\n                : \"border-destructive/40 bg-destructive/10 text-destructive\",\n            )}\n          >\n            <div className=\"flex items-center justify-between gap-3\">\n              <span>{bulkFeedback.message}</span>\n              <button\n                onClick={() => setBulkFeedback(null)}\n                className=\"text-xs font-medium underline underline-offset-2\"\n              >\n                Dismiss\n              </button>\n            </div>\n          </div>\n        )}\n\n        {/* Filters */}\n        <div className=\"flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between\">\n          <div className=\"flex flex-1 items-center gap-4\">\n            {/* Search */}\n            <div className=\"relative flex-1 max-w-md\">\n              <Search\n                size={16}\n                className=\"absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground\"\n              />\n              <input\n                type=\"text\"\n                placeholder=\"Search by name, prefix, or app...\"\n                value={searchQuery}\n                onChange={(e) => setSearchQuery(e.target.value)}\n                className=\"w-full rounded-md border bg-background pl-9 pr-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary\"\n              />\n            </div>\n\n            {/* Status Filter */}\n            <select\n              value={statusFilter}\n              onChange={(e) =>\n                setStatusFilter(e.target.value as \"all\" | \"active\" | \"expired\")\n              }\n              className=\"rounded-md border bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary\"\n            >\n              <option value=\"all\">All Status</option>\n              <option value=\"active\">Active</option>\n              <option value=\"expired\">Expired</option>\n            </select>\n          </div>\n        </div>\n\n        {/* Summary Stats */}\n        <div className=\"grid grid-cols-2 gap-4 sm:grid-cols-4\">\n          <div className=\"rounded-lg border bg-card p-4\">\n            <div className=\"flex items-center gap-2 text-muted-foreground\">\n              <Key size={16} />\n              <span className=\"text-sm\">Total Keys</span>\n            </div>\n            <p className=\"mt-1 text-2xl font-semibold\">{stats.total}</p>\n          </div>\n          <div className=\"rounded-lg border bg-card p-4\">\n            <div className=\"flex items-center gap-2 text-status-success-text\">\n              <Shield size={16} />\n              <span className=\"text-sm\">Active</span>\n            </div>\n            <p className=\"mt-1 text-2xl font-semibold\">{stats.active}</p>\n          </div>\n          <div className=\"rounded-lg border bg-card p-4\">\n            <div className=\"flex items-center gap-2 text-status-warning-text\">\n              <Clock size={16} />\n              <span className=\"text-sm\">Expiring Soon</span>\n            </div>\n            <p className=\"mt-1 text-2xl font-semibold\">{stats.expiringSoon}</p>\n          </div>\n          <div className=\"rounded-lg border bg-card p-4\">\n            <div className=\"flex items-center gap-2 text-status-error-text\">\n              <AlertTriangle size={16} />\n              <span className=\"text-sm\">Expired</span>\n            </div>\n            <p className=\"mt-1 text-2xl font-semibold\">{stats.expired}</p>\n          </div>\n        </div>\n\n        {/* Results count */}\n        <p className=\"text-sm text-muted-foreground\">\n          {filteredKeys.length} API key{filteredKeys.length !== 1 ? \"s\" : \"\"}{\" \"}\n          found\n        </p>\n\n        {filteredKeys.length > 0 && (\n          <div className=\"rounded-lg border bg-card p-4\">\n            <div className=\"flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between\">\n              <div className=\"flex flex-wrap items-center gap-3\">\n                <div className=\"flex items-center gap-2\">\n                  <SelectionCheckbox\n                    checked={allVisibleSelected}\n                    indeterminate={partiallySelected}\n                    onChange={toggleAllVisibleKeys}\n                    ariaLabel=\"Select all visible API keys\"\n                  />\n                  <span className=\"text-sm font-medium\">\n                    Select all active keys\n                  </span>\n                </div>\n                {selectedKeyIds.size > 0 && (\n                  <button\n                    onClick={clearSelection}\n                    className=\"text-sm text-muted-foreground hover:text-foreground\"\n                  >\n                    Clear selection\n                  </button>\n                )}\n              </div>\n\n              <div className=\"flex flex-wrap items-center gap-2\">\n                <span className=\"rounded-full bg-muted px-3 py-1 text-sm font-medium text-muted-foreground\">\n                  {selectedKeyIds.size} selected\n                </span>\n                <button\n                  onClick={() => setShowBulkRevokeDialog(true)}\n                  disabled={selectedActiveKeys.length === 0}\n                  className=\"inline-flex items-center gap-2 rounded-md border border-status-error-bg px-3 py-2 text-sm font-medium text-status-error-text transition-colors hover:bg-status-error-bg-subtle disabled:cursor-not-allowed disabled:opacity-50\"\n                >\n                  <Ban size={16} />\n                  Revoke Selected\n                  {selectedActiveKeys.length > 0\n                    ? ` (${selectedActiveKeys.length})`\n                    : \"\"}\n                </button>\n              </div>\n            </div>\n          </div>\n        )}\n\n        {/* Keys Table */}\n        {filteredKeys.length > 0 ? (\n          <DataTable data={filteredKeys} columns={columns} keyField=\"id\" />\n        ) : (\n          <EmptyState\n            icon={<Key size={32} />}\n            title={tr(\"devportal.noApiKeysFound\", \"No API keys found\")}\n            description={\n              searchQuery || statusFilter !== \"all\"\n                ? tr(\n                    \"devportal.tryAdjustingFilters\",\n                    \"Try adjusting your filters\",\n                  )\n                : tr(\n                    \"devportal.generateFirstApiKey\",\n                    \"Generate your first API key to start making API calls\",\n                  )\n            }\n            action={\n              !searchQuery && statusFilter === \"all\" ? (\n                <button\n                  onClick={() => handleNavigate(\"/api-keys/new\")}\n                  className=\"inline-flex items-center gap-2 rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90\"\n                >\n                  <Plus size={16} />\n                  {tr(\"devportal.generateApiKey\", \"Generate API Key\")}\n                </button>\n              ) : undefined\n            }\n          />\n        )}\n\n        {/* Revoke confirmation dialog */}\n        <ConfirmDialog\n          open={revokeTarget !== null}\n          onOpenChange={(open) => {\n            if (!open) setRevokeTarget(null);\n          }}\n          onConfirm={handleRevoke}\n          title=\"Revoke API Key\"\n          description={`Are you sure you want to revoke \"${revokeTarget?.name ?? \"\"}\"? This action cannot be undone. Any application or service using this key will immediately lose access.`}\n          confirmLabel=\"Revoke Key\"\n          cancelLabel=\"Cancel\"\n          variant=\"danger\"\n          loading={revokeLoading}\n        />\n\n        {/* Rotate confirmation dialog */}\n        <ConfirmDialog\n          open={rotateTarget !== null}\n          onOpenChange={(open) => {\n            if (!open) setRotateTarget(null);\n          }}\n          onConfirm={handleRotate}\n          title=\"Rotate API Key Secret\"\n          description={`This will generate a new secret for \"${rotateTarget?.name ?? \"\"}\" and immediately invalidate the current one. Make sure to update all services using this key before the old secret stops working.`}\n          confirmLabel=\"Rotate Secret\"\n          cancelLabel=\"Cancel\"\n          variant=\"warning\"\n          loading={rotateLoading}\n        />\n\n        <ConfirmDialog\n          open={showBulkRevokeDialog}\n          onOpenChange={setShowBulkRevokeDialog}\n          onConfirm={handleBulkRevoke}\n          title=\"Revoke selected API keys\"\n          description={`Revoke ${selectedActiveKeys.length} selected API key${selectedActiveKeys.length === 1 ? \"\" : \"s\"}? Any service using these keys will immediately lose access.`}\n          confirmLabel=\"Revoke Keys\"\n          cancelLabel=\"Cancel\"\n          variant=\"danger\"\n          loading={revokeLoading}\n        />\n      </PageLayout>\n    </PermissionGuard>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"ApiKeysPage.js","names":[],"sources":["../../../src/devportal/pages/ApiKeysPage.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport { useMemo, useState } from \"react\";\nimport { useI18n } from \"@burdenoff/fe-libs/shared/providers/shell/I18nProvider\";\nimport {\n  Plus,\n  Search,\n  Key,\n  Shield,\n  Clock,\n  AlertTriangle,\n  Loader2,\n  AlertCircle,\n  RotateCw,\n  Ban,\n} from \"lucide-react\";\nimport { EmphasisPanel, GlassCard } from \"@burdenoff/fe-libs/ui\";\nimport { PageLayout } from \"../components/PageLayout\";\nimport { DataTable } from \"../components/DataTable\";\nimport { ActiveIndicator } from \"../components/StatusBadge\";\nimport { EmptyState } from \"../components/EmptyState\";\nimport { ConfirmDialog } from \"../components/ConfirmDialog\";\nimport { NewSecretAlert } from \"../components/SecretDisplay\";\nimport { SelectionCheckbox } from \"../components/SelectionCheckbox\";\nimport { useDevportal } from \"../providers/DevportalProvider\";\nimport { PermissionGuard } from \"../components\";\nimport { DEVPORTAL_PERMISSIONS } from \"../constants/permissions\";\nimport type { AuthApiKey } from \"../types\";\nimport { cn } from \"../utils/cn\";\nimport {\n  useMyApiKeysQuery,\n  useCurrentUserAppsQuery,\n  useRevokeApiKeyAuthMutation,\n  useRotateApiKeyAuthMutation,\n  getErrorMessage,\n} from \"../hooks\";\n\n/**\n * Map GraphQL APIKey to local AuthApiKey type\n */\nfunction mapApiKey(key: {\n  id: string;\n  name: string;\n  prefix: string;\n  scopes: string[];\n  appId: string;\n  appName?: string | null;\n  createdAt: string;\n  expiresAt?: string | null;\n  lastUsedAt?: string | null;\n}): AuthApiKey {\n  return {\n    id: key.id,\n    name: key.name,\n    prefix: key.prefix,\n    scopes: key.scopes,\n    appId: key.appId,\n    appName: key.appName ?? undefined,\n    createdAt: key.createdAt,\n    expiresAt: key.expiresAt ?? undefined,\n    lastUsedAt: key.lastUsedAt ?? undefined,\n  };\n}\n\nconst isExpiringSoon = (expiresAt?: string): boolean => {\n  if (!expiresAt) return false;\n  const daysUntilExpiry = Math.ceil(\n    (new Date(expiresAt).getTime() - Date.now()) / (1000 * 60 * 60 * 24),\n  );\n  return daysUntilExpiry <= 30 && daysUntilExpiry > 0;\n};\n\nconst isExpired = (expiresAt?: string): boolean => {\n  if (!expiresAt) return false;\n  return new Date(expiresAt).getTime() < Date.now();\n};\n\n/**\n * API Keys listing page\n *\n * Displays all API keys for the current user from auth-svc.\n * Previously showed devportal-svc ApiKeys per application;\n * now shows all user-owned API keys centrally.\n * Supports revoking and rotating API keys.\n */\nexport const ApiKeysPage: FC = () => {\n  const { navigate, basePath, activeOrgId } = useDevportal();\n  const { t } = useI18n();\n  const tr = (key: string, fallback: string): string => {\n    const value = t(key);\n    return value === key ? fallback : value;\n  };\n  const [searchQuery, setSearchQuery] = useState(\"\");\n  const [statusFilter, setStatusFilter] = useState<\n    \"all\" | \"active\" | \"expired\"\n  >(\"all\");\n\n  // Revoke / Rotate state\n  const [revokeTarget, setRevokeTarget] = useState<AuthApiKey | null>(null);\n  const [rotateTarget, setRotateTarget] = useState<AuthApiKey | null>(null);\n  const [newSecret, setNewSecret] = useState<string | null>(null);\n  const [selectedKeyIds, setSelectedKeyIds] = useState<Set<string>>(new Set());\n  const [bulkFeedback, setBulkFeedback] = useState<{\n    type: \"success\" | \"error\";\n    message: string;\n  } | null>(null);\n  const [showBulkRevokeDialog, setShowBulkRevokeDialog] = useState(false);\n\n  // Fetch API keys from auth-svc (user-scoped, no applicationId needed)\n  const { data, loading, error, refetch } = useMyApiKeysQuery({\n    fetchPolicy: \"cache-and-network\",\n  });\n\n  // Fetch OAuth apps to map appId → filter; key.appId is an OAuth client UUID\n  const { data: oauthAppsData } = useCurrentUserAppsQuery({\n    fetchPolicy: \"cache-first\",\n  });\n  const orgAppIds = useMemo(() => {\n    const apps = oauthAppsData?.currentUserApps?.apps;\n    if (!apps?.length) return null;\n    return new Set(apps.map((a: { id: string }) => a.id));\n  }, [oauthAppsData?.currentUserApps?.apps]);\n\n  // Mutations\n  const [revokeApiKey, { loading: revokeLoading }] =\n    useRevokeApiKeyAuthMutation();\n  const [rotateApiKey, { loading: rotateLoading }] =\n    useRotateApiKeyAuthMutation();\n\n  const apiKeys: AuthApiKey[] = useMemo(\n    () => data?.myApiKeys?.apiKeys.map(mapApiKey) ?? [],\n    [data?.myApiKeys?.apiKeys],\n  );\n\n  const handleNavigate = (path: string) => {\n    navigate?.(`${basePath}${path}`);\n  };\n\n  // Revoke handler\n  const handleRevoke = async () => {\n    if (!revokeTarget) return;\n    try {\n      await revokeApiKey({\n        variables: { keyId: revokeTarget.id },\n      });\n      setRevokeTarget(null);\n      await refetch();\n    } catch {\n      // Error is surfaced by Apollo's error state on the mutation;\n      // the ConfirmDialog stays open so the user can retry or cancel.\n    }\n  };\n\n  // Rotate handler\n  const handleRotate = async () => {\n    if (!rotateTarget) return;\n    try {\n      const result = await rotateApiKey({\n        variables: { keyId: rotateTarget.id },\n      });\n      const secret = result.data?.rotateAPIKey.apiSecret;\n      if (secret) {\n        setNewSecret(secret);\n      }\n      setRotateTarget(null);\n      await refetch();\n    } catch {\n      // Error is surfaced by Apollo's error state on the mutation;\n      // the ConfirmDialog stays open so the user can retry or cancel.\n    }\n  };\n\n  // Filter keys: org scope + search + status\n  const filteredKeys = apiKeys.filter((key: AuthApiKey) => {\n    const matchesOrg = !orgAppIds || orgAppIds.has(key.appId);\n    const matchesSearch =\n      !searchQuery ||\n      key.name.toLowerCase().includes(searchQuery.toLowerCase()) ||\n      key.prefix.toLowerCase().includes(searchQuery.toLowerCase()) ||\n      (key.appName?.toLowerCase().includes(searchQuery.toLowerCase()) ?? false);\n    const matchesStatus =\n      statusFilter === \"all\" ||\n      (statusFilter === \"active\" && !isExpired(key.expiresAt)) ||\n      (statusFilter === \"expired\" && isExpired(key.expiresAt));\n    return matchesOrg && matchesSearch && matchesStatus;\n  });\n\n  const selectedKeys = useMemo(\n    () => apiKeys.filter((key) => selectedKeyIds.has(key.id)),\n    [apiKeys, selectedKeyIds],\n  );\n\n  const selectedActiveKeys = useMemo(\n    () => selectedKeys.filter((key) => !isExpired(key.expiresAt)),\n    [selectedKeys],\n  );\n\n  const allVisibleSelectableKeys = filteredKeys.filter(\n    (key) => !isExpired(key.expiresAt),\n  );\n  const allVisibleSelected =\n    allVisibleSelectableKeys.length > 0 &&\n    allVisibleSelectableKeys.every((key) => selectedKeyIds.has(key.id));\n  const partiallySelected =\n    allVisibleSelectableKeys.some((key) => selectedKeyIds.has(key.id)) &&\n    !allVisibleSelected;\n\n  const toggleKeySelection = (keyId: string, checked: boolean) => {\n    setSelectedKeyIds((prev) => {\n      const next = new Set(prev);\n      if (checked) {\n        next.add(keyId);\n      } else {\n        next.delete(keyId);\n      }\n      return next;\n    });\n  };\n\n  const toggleAllVisibleKeys = (checked: boolean) => {\n    setSelectedKeyIds((prev) => {\n      const next = new Set(prev);\n      allVisibleSelectableKeys.forEach((key) => {\n        if (checked) {\n          next.add(key.id);\n        } else {\n          next.delete(key.id);\n        }\n      });\n      return next;\n    });\n  };\n\n  const clearSelection = () => setSelectedKeyIds(new Set());\n\n  // Loading state\n  if (loading && !data) {\n    return (\n      <PageLayout\n        title={tr(\"devportal.apiKeys\", \"API Keys\")}\n        description={tr(\n          \"devportal.manageApiKeys\",\n          \"Manage your API keys for programmatic access\",\n        )}\n      >\n        <div className=\"flex items-center justify-center py-12\">\n          <Loader2 className=\"h-8 w-8 animate-spin text-text-secondary\" />\n          <span className=\"ml-2 text-text-secondary\">\n            {tr(\"devportal.loadingApiKeys\", \"Loading API keys...\")}\n          </span>\n        </div>\n      </PageLayout>\n    );\n  }\n\n  // Error state\n  if (error) {\n    return (\n      <PageLayout\n        title={tr(\"devportal.apiKeys\", \"API Keys\")}\n        description={tr(\n          \"devportal.manageApiKeys\",\n          \"Manage your API keys for programmatic access\",\n        )}\n      >\n        <div className=\"rounded-lg border border-status-error-border/50 bg-status-error-bg/10 p-6 text-center\">\n          <AlertCircle className=\"mx-auto h-8 w-8 text-status-error-text\" />\n          <h3 className=\"mt-2 font-medium text-status-error-text\">\n            {tr(\"devportal.failedToLoadApiKeys\", \"Failed to load API keys\")}\n          </h3>\n          <p className=\"mt-1 text-sm text-text-secondary\">\n            {getErrorMessage(error)}\n          </p>\n          <button\n            onClick={() => refetch()}\n            className=\"mt-4 rounded-md bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text hover:bg-action-primary-bg/90\"\n          >\n            {tr(\"devportal.tryAgain\", \"Try Again\")}\n          </button>\n        </div>\n      </PageLayout>\n    );\n  }\n\n  const columns = [\n    {\n      key: \"select\",\n      header: (\n        <SelectionCheckbox\n          checked={allVisibleSelected}\n          indeterminate={partiallySelected}\n          onChange={toggleAllVisibleKeys}\n          ariaLabel=\"Select all visible API keys\"\n        />\n      ),\n      className: \"w-12\",\n      render: (key: AuthApiKey) => (\n        <div onClick={(event) => event.stopPropagation()}>\n          <SelectionCheckbox\n            checked={selectedKeyIds.has(key.id)}\n            disabled={isExpired(key.expiresAt)}\n            onChange={(checked) => toggleKeySelection(key.id, checked)}\n            ariaLabel={`Select API key ${key.name}`}\n          />\n        </div>\n      ),\n    },\n    {\n      key: \"name\",\n      header: \"API Key\",\n      render: (key: AuthApiKey) => (\n        <div className=\"flex items-center gap-3\">\n          <div\n            className={cn(\n              \"flex h-10 w-10 items-center justify-center rounded-lg\",\n              isExpired(key.expiresAt)\n                ? \"bg-status-error-bg-subtle text-status-error-text\"\n                : \"bg-action-primary-bg/10 text-primary\",\n            )}\n          >\n            <Key size={20} />\n          </div>\n          <div>\n            <div className=\"flex items-center gap-2\">\n              <p className=\"font-medium\">{key.name}</p>\n              {isExpired(key.expiresAt) && (\n                <span className=\"rounded bg-status-error-bg-subtle px-1.5 py-0.5 text-xs text-status-error-text\">\n                  Expired\n                </span>\n              )}\n              {isExpiringSoon(key.expiresAt) && !isExpired(key.expiresAt) && (\n                <span className=\"rounded bg-status-warning-bg-subtle px-1.5 py-0.5 text-xs text-status-warning-text\">\n                  Expiring Soon\n                </span>\n              )}\n            </div>\n            {key.appName && (\n              <p className=\"text-xs text-text-secondary\">\n                App: {key.appName}\n              </p>\n            )}\n          </div>\n        </div>\n      ),\n    },\n    {\n      key: \"prefix\",\n      header: \"Key Prefix\",\n      render: (key: AuthApiKey) => (\n        <code className=\"text-sm text-text-secondary\">{key.prefix}...</code>\n      ),\n    },\n    {\n      key: \"scopes\",\n      header: \"Scopes\",\n      render: (key: AuthApiKey) => (\n        <div className=\"flex flex-wrap gap-1\">\n          {key.scopes.slice(0, 3).map((scope) => (\n            <span\n              key={scope}\n              className=\"inline-flex rounded bg-bg-sunken px-1.5 py-0.5 text-xs\"\n            >\n              {scope}\n            </span>\n          ))}\n          {key.scopes.length > 3 && (\n            <span className=\"text-xs text-text-secondary\">\n              +{key.scopes.length - 3}\n            </span>\n          )}\n        </div>\n      ),\n    },\n    {\n      key: \"lastUsed\",\n      header: \"Last Used\",\n      render: (key: AuthApiKey) => (\n        <span className=\"text-sm text-text-secondary\">\n          {key.lastUsedAt\n            ? new Date(key.lastUsedAt).toLocaleDateString()\n            : \"Never\"}\n        </span>\n      ),\n    },\n    {\n      key: \"expires\",\n      header: \"Expires\",\n      render: (key: AuthApiKey) => (\n        <span\n          className={cn(\n            \"text-sm\",\n            isExpired(key.expiresAt)\n              ? \"text-status-error-text\"\n              : isExpiringSoon(key.expiresAt)\n                ? \"text-status-warning-text\"\n                : \"text-text-secondary\",\n          )}\n        >\n          {key.expiresAt\n            ? new Date(key.expiresAt).toLocaleDateString()\n            : \"Never\"}\n        </span>\n      ),\n    },\n    {\n      key: \"status\",\n      header: \"Status\",\n      render: (key: AuthApiKey) => (\n        <div className=\"flex items-center gap-2\">\n          <ActiveIndicator active={!isExpired(key.expiresAt)} />\n          <span className=\"text-sm\">\n            {isExpired(key.expiresAt) ? \"Expired\" : \"Active\"}\n          </span>\n        </div>\n      ),\n    },\n    {\n      key: \"actions\",\n      header: \"Actions\",\n      className: \"w-28\",\n      render: (key: AuthApiKey) => {\n        if (isExpired(key.expiresAt)) {\n          return (\n            <span className=\"text-xs text-text-secondary\">No actions</span>\n          );\n        }\n\n        return (\n          <div className=\"flex items-center gap-1\">\n            <button\n              type=\"button\"\n              title=\"Rotate secret\"\n              disabled={rotateLoading}\n              onClick={(e) => {\n                e.stopPropagation();\n                setRotateTarget(key);\n              }}\n              className={cn(\n                \"inline-flex items-center gap-1 rounded-md px-2 py-1 text-xs font-medium transition-colors\",\n                \"text-status-info-text hover:bg-status-info-bg-subtle\",\n                \"disabled:opacity-50 disabled:cursor-not-allowed\",\n              )}\n            >\n              <RotateCw size={14} />\n              <span className=\"sr-only sm:not-sr-only\">Rotate</span>\n            </button>\n            <button\n              type=\"button\"\n              title=\"Revoke key\"\n              disabled={revokeLoading}\n              onClick={(e) => {\n                e.stopPropagation();\n                setRevokeTarget(key);\n              }}\n              className={cn(\n                \"inline-flex items-center gap-1 rounded-md px-2 py-1 text-xs font-medium transition-colors\",\n                \"text-status-error-text hover:bg-status-error-bg-subtle\",\n                \"disabled:opacity-50 disabled:cursor-not-allowed\",\n              )}\n            >\n              <Ban size={14} />\n              <span className=\"sr-only sm:not-sr-only\">Revoke</span>\n            </button>\n          </div>\n        );\n      },\n    },\n  ];\n\n  // Stats scoped to the filtered set (org context)\n  const stats = {\n    total: filteredKeys.length,\n    active: filteredKeys.filter((k) => !isExpired(k.expiresAt)).length,\n    expiringSoon: filteredKeys.filter((k) => isExpiringSoon(k.expiresAt))\n      .length,\n    expired: filteredKeys.filter((k) => isExpired(k.expiresAt)).length,\n  };\n\n  const handleBulkRevoke = async () => {\n    if (selectedActiveKeys.length === 0) return;\n\n    const results = await Promise.allSettled(\n      selectedActiveKeys.map((key) =>\n        revokeApiKey({ variables: { keyId: key.id } }),\n      ),\n    );\n\n    const succeeded = results.filter(\n      (result) => result.status === \"fulfilled\",\n    ).length;\n    const failed = results.length - succeeded;\n\n    setBulkFeedback({\n      type: failed === 0 ? \"success\" : \"error\",\n      message: `Revoked ${succeeded} API key${succeeded === 1 ? \"\" : \"s\"}${\n        failed > 0 ? ` • ${failed} failed` : \"\"\n      }`,\n    });\n    setShowBulkRevokeDialog(false);\n    clearSelection();\n    await refetch();\n  };\n\n  return (\n    <PermissionGuard permission={DEVPORTAL_PERMISSIONS.APP_READ}>\n      <PageLayout\n        title={tr(\"devportal.apiKeys\", \"API Keys\")}\n        description={tr(\n          \"devportal.manageApiKeys\",\n          \"Manage your API keys for programmatic access\",\n        )}\n        purpose={tr(\n          \"devportal.apiKeysPurpose\",\n          \"API keys authenticate server-to-server calls — use them in scripts, CI jobs, or backend services that talk to the platform without a logged-in user. Generate a key here, scope it to an app, and rotate it if it is ever exposed.\",\n        )}\n        actions={\n          <button\n            onClick={() => handleNavigate(\"/api-keys/new\")}\n            className=\"inline-flex items-center gap-2 rounded-md bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text hover:bg-action-primary-bg/90 transition-colors\"\n          >\n            <Plus size={16} />\n            {tr(\"devportal.generateApiKey\", \"Generate API Key\")}\n          </button>\n        }\n      >\n        {/* New secret alert — shown after a successful rotation */}\n        {newSecret && (\n          <NewSecretAlert\n            title=\"API Key Rotated\"\n            secret={newSecret}\n            description=\"The previous secret has been invalidated. Copy the new secret below — it will not be shown again.\"\n            onDismiss={() => setNewSecret(null)}\n          />\n        )}\n\n        {bulkFeedback && (\n          <div\n            className={cn(\n              \"rounded-lg border px-4 py-3 text-sm\",\n              bulkFeedback.type === \"success\"\n                ? \"border-border-subtle bg-status-success-bg-subtle text-status-success-text\"\n                : \"border-status-error-border/40 bg-status-error-bg/10 text-status-error-text\",\n            )}\n          >\n            <div className=\"flex items-center justify-between gap-3\">\n              <span>{bulkFeedback.message}</span>\n              <button\n                onClick={() => setBulkFeedback(null)}\n                className=\"text-xs font-medium underline underline-offset-2\"\n              >\n                Dismiss\n              </button>\n            </div>\n          </div>\n        )}\n\n        {/* Filters */}\n        <div className=\"flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between\">\n          <div className=\"flex flex-1 items-center gap-4\">\n            {/* Search */}\n            <div className=\"relative flex-1 max-w-md\">\n              <Search\n                size={16}\n                className=\"absolute left-3 top-1/2 -translate-y-1/2 text-text-secondary\"\n              />\n              <input\n                type=\"text\"\n                placeholder=\"Search by name, prefix, or app...\"\n                value={searchQuery}\n                onChange={(e) => setSearchQuery(e.target.value)}\n                className=\"w-full rounded-md border bg-bg-surface pl-9 pr-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary\"\n              />\n            </div>\n\n            {/* Status Filter */}\n            <select\n              value={statusFilter}\n              onChange={(e) =>\n                setStatusFilter(e.target.value as \"all\" | \"active\" | \"expired\")\n              }\n              className=\"rounded-md border bg-bg-surface px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary\"\n            >\n              <option value=\"all\">All Status</option>\n              <option value=\"active\">Active</option>\n              <option value=\"expired\">Expired</option>\n            </select>\n          </div>\n        </div>\n\n        {/* Summary Stats — primary emphasis zone */}\n        <EmphasisPanel>\n          <div className=\"grid grid-cols-2 gap-4 sm:grid-cols-4\">\n            <GlassCard treatment=\"metric\" className=\"p-4\">\n              <div className=\"flex items-center gap-2 text-text-secondary\">\n                <Key size={16} />\n                <span className=\"text-sm\">Total Keys</span>\n              </div>\n              <p className=\"mt-1 text-2xl font-semibold tabular-nums\">\n                {stats.total}\n              </p>\n            </GlassCard>\n            <GlassCard treatment=\"metric\" className=\"p-4\">\n              <div className=\"flex items-center gap-2 text-status-success-text\">\n                <Shield size={16} />\n                <span className=\"text-sm\">Active</span>\n              </div>\n              <p className=\"mt-1 text-2xl font-semibold tabular-nums\">\n                {stats.active}\n              </p>\n            </GlassCard>\n            <GlassCard treatment=\"metric\" className=\"p-4\">\n              <div className=\"flex items-center gap-2 text-status-warning-text\">\n                <Clock size={16} />\n                <span className=\"text-sm\">Expiring Soon</span>\n              </div>\n              <p className=\"mt-1 text-2xl font-semibold tabular-nums\">\n                {stats.expiringSoon}\n              </p>\n            </GlassCard>\n            <GlassCard treatment=\"metric\" className=\"p-4\">\n              <div className=\"flex items-center gap-2 text-status-error-text\">\n                <AlertTriangle size={16} />\n                <span className=\"text-sm\">Expired</span>\n              </div>\n              <p className=\"mt-1 text-2xl font-semibold tabular-nums\">\n                {stats.expired}\n              </p>\n            </GlassCard>\n          </div>\n        </EmphasisPanel>\n\n        {/* Results count */}\n        <p className=\"text-sm text-text-secondary\">\n          {filteredKeys.length} API key{filteredKeys.length !== 1 ? \"s\" : \"\"}{\" \"}\n          found\n        </p>\n\n        {filteredKeys.length > 0 && (\n          <div className=\"rounded-card border border-border-seam bg-bg-surface p-4\">\n            <div className=\"flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between\">\n              <div className=\"flex flex-wrap items-center gap-3\">\n                <div className=\"flex items-center gap-2\">\n                  <SelectionCheckbox\n                    checked={allVisibleSelected}\n                    indeterminate={partiallySelected}\n                    onChange={toggleAllVisibleKeys}\n                    ariaLabel=\"Select all visible API keys\"\n                  />\n                  <span className=\"text-sm font-medium\">\n                    Select all active keys\n                  </span>\n                </div>\n                {selectedKeyIds.size > 0 && (\n                  <button\n                    onClick={clearSelection}\n                    className=\"text-sm text-text-secondary hover:text-text-primary\"\n                  >\n                    Clear selection\n                  </button>\n                )}\n              </div>\n\n              <div className=\"flex flex-wrap items-center gap-2\">\n                <span className=\"rounded-full bg-bg-sunken px-3 py-1 text-sm font-medium text-text-secondary\">\n                  {selectedKeyIds.size} selected\n                </span>\n                <button\n                  onClick={() => setShowBulkRevokeDialog(true)}\n                  disabled={selectedActiveKeys.length === 0}\n                  className=\"inline-flex items-center gap-2 rounded-md border border-status-error-bg px-3 py-2 text-sm font-medium text-status-error-text transition-colors hover:bg-status-error-bg-subtle disabled:cursor-not-allowed disabled:opacity-50\"\n                >\n                  <Ban size={16} />\n                  Revoke Selected\n                  {selectedActiveKeys.length > 0\n                    ? ` (${selectedActiveKeys.length})`\n                    : \"\"}\n                </button>\n              </div>\n            </div>\n          </div>\n        )}\n\n        {/* Keys Table */}\n        {filteredKeys.length > 0 ? (\n          <DataTable data={filteredKeys} columns={columns} keyField=\"id\" />\n        ) : (\n          <EmptyState\n            illustration=\"empty-data\"\n            title={tr(\"devportal.noApiKeysFound\", \"No API keys found\")}\n            description={\n              searchQuery || statusFilter !== \"all\"\n                ? tr(\n                    \"devportal.tryAdjustingFilters\",\n                    \"Try adjusting your filters\",\n                  )\n                : tr(\n                    \"devportal.generateFirstApiKey\",\n                    \"Generate your first API key to start making API calls\",\n                  )\n            }\n            action={\n              !searchQuery && statusFilter === \"all\" ? (\n                <button\n                  onClick={() => handleNavigate(\"/api-keys/new\")}\n                  className=\"inline-flex items-center gap-2 rounded-md bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text hover:bg-action-primary-bg/90\"\n                >\n                  <Plus size={16} />\n                  {tr(\"devportal.generateApiKey\", \"Generate API Key\")}\n                </button>\n              ) : undefined\n            }\n          />\n        )}\n\n        {/* Revoke confirmation dialog */}\n        <ConfirmDialog\n          open={revokeTarget !== null}\n          onOpenChange={(open) => {\n            if (!open) setRevokeTarget(null);\n          }}\n          onConfirm={handleRevoke}\n          title=\"Revoke API Key\"\n          description={`Are you sure you want to revoke \"${revokeTarget?.name ?? \"\"}\"? This action cannot be undone. Any application or service using this key will immediately lose access.`}\n          confirmLabel=\"Revoke Key\"\n          cancelLabel=\"Cancel\"\n          variant=\"danger\"\n          loading={revokeLoading}\n        />\n\n        {/* Rotate confirmation dialog */}\n        <ConfirmDialog\n          open={rotateTarget !== null}\n          onOpenChange={(open) => {\n            if (!open) setRotateTarget(null);\n          }}\n          onConfirm={handleRotate}\n          title=\"Rotate API Key Secret\"\n          description={`This will generate a new secret for \"${rotateTarget?.name ?? \"\"}\" and immediately invalidate the current one. Make sure to update all services using this key before the old secret stops working.`}\n          confirmLabel=\"Rotate Secret\"\n          cancelLabel=\"Cancel\"\n          variant=\"warning\"\n          loading={rotateLoading}\n        />\n\n        <ConfirmDialog\n          open={showBulkRevokeDialog}\n          onOpenChange={setShowBulkRevokeDialog}\n          onConfirm={handleBulkRevoke}\n          title=\"Revoke selected API keys\"\n          description={`Revoke ${selectedActiveKeys.length} selected API key${selectedActiveKeys.length === 1 ? \"\" : \"s\"}? Any service using these keys will immediately lose access.`}\n          confirmLabel=\"Revoke Keys\"\n          cancelLabel=\"Cancel\"\n          variant=\"danger\"\n          loading={revokeLoading}\n        />\n      </PageLayout>\n    </PermissionGuard>\n  );\n};\n"],"mappings":"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"}

package/dist/devportal/pages/AppLogsPage.js

@@ -4,200 +4,201 @@ import { useGetApplicationAuditLogsQuery as n } from "../../generated/global-ope
 import { getErrorMessage as r } from "../hooks/useGraphQL.js";
 import { PageLayout as i, PageSection as a } from "../components/PageLayout.js";
 import "../hooks/index.js";
-import o from "../../node_modules/.bun/date-fns@3.6.0/node_modules/date-fns/format.js";
+import o from "../../node_modules/date-fns/format.js";
 import { useEffect as s, useMemo as c, useState as l } from "react";
 import { useI18n as u } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
-import { AlertCircle as d, Download as f, FileClock as p, Filter as m, Loader2 as h, RefreshCw as g } from "lucide-react";
-import { useParams as _ } from "react-router-dom";
-import { jsx as v, jsxs as y } from "react/jsx-runtime";
+import { AlertCircle as d, Download as f, Filter as p, Loader2 as m, RefreshCw as h } from "lucide-react";
+import { useParams as g } from "react-router-dom";
+import { jsx as _, jsxs as v } from "react/jsx-runtime";
 //#region src/devportal/pages/AppLogsPage.tsx
-var b = 25, x = (e) => o(new Date(e), "MMM d, yyyy HH:mm:ss"), S = (e) => e.replace(/_/g, " ").toLowerCase().replace(/\b\w/g, (e) => e.toUpperCase()), C = (e) => {
+var y = 25, b = (e) => o(new Date(e), "MMM d, yyyy HH:mm:ss"), x = (e) => e.replace(/_/g, " ").toLowerCase().replace(/\b\w/g, (e) => e.toUpperCase()), S = (e) => {
 	if (!e) return "";
 	try {
 		return JSON.stringify(e, null, 2);
 	} catch {
 		return "";
 	}
-}, w = () => {
-	let { t: o } = u(), { appId: w } = _(), { navigate: T, basePath: E, currentUser: D } = e(), O = (e) => D?.id === e && D.email ? D.email : e, [k, A] = l("all"), [j, M] = l(""), [N, P] = l(1), { data: F, loading: I, error: L, refetch: R } = n({
+}, C = () => {
+	let { t: o } = u(), { appId: C } = g(), { navigate: w, basePath: T, currentUser: E } = e(), D = (e) => E?.id === e && E.email ? E.email : e, [O, k] = l("all"), [A, j] = l(""), [M, N] = l(1), { data: P, loading: F, error: I, refetch: L } = n({
 		variables: {
-			applicationId: w || "",
-			limit: b,
-			offset: (N - 1) * b
+			applicationId: C || "",
+			limit: y,
+			offset: (M - 1) * y
 		},
-		skip: !w,
+		skip: !C,
 		fetchPolicy: "cache-and-network"
-	}), z = F?.application;
+	}), R = P?.application;
 	s(() => {
-		let e = z?.name;
-		if (!w || !e) return;
+		let e = R?.name;
+		if (!C || !e) return;
 		let t = window.__breadcrumbRegistry;
-		return t?.register(w, e), () => t?.unregister(w);
-	}, [w, z?.name]);
-	let B = F?.auditLogs?.totalCount ?? 0, V = F?.auditLogs?.edges?.map((e) => e.node) ?? [], H = c(() => Array.from(new Set(V.map((e) => e.action))).sort((e, t) => e.localeCompare(t)), [V]), U = c(() => {
-		let e = j.trim().toLowerCase();
-		return V.filter((t) => k === "all" || t.action === k ? e ? [
+		return t?.register(C, e), () => t?.unregister(C);
+	}, [C, R?.name]);
+	let z = P?.auditLogs?.totalCount ?? 0, B = P?.auditLogs?.edges?.map((e) => e.node) ?? [], V = c(() => Array.from(new Set(B.map((e) => e.action))).sort((e, t) => e.localeCompare(t)), [B]), H = c(() => {
+		let e = A.trim().toLowerCase();
+		return B.filter((t) => O === "all" || t.action === O ? e ? [
 			t.action,
 			t.actorId,
-			O(t.actorId),
+			D(t.actorId),
 			t.resource,
-			C(t.metadata)
+			S(t.metadata)
 		].join(" ").toLowerCase().includes(e) : !0 : !1);
 	}, [
-		k,
-		V,
-		j
+		O,
+		B,
+		A
 	]);
-	return I && !F ? /* @__PURE__ */ v(i, {
+	return F && !P ? /* @__PURE__ */ _(i, {
 		title: "Application Activity",
 		description: "Loading application audit history",
-		backLink: w ? `/apps/${w}` : "/apps",
+		backLink: C ? `/apps/${C}` : "/apps",
 		backLabel: "Back to Application",
-		children: /* @__PURE__ */ v("div", {
-			className: "flex items-center justify-center py-16 text-muted-foreground",
-			children: /* @__PURE__ */ v(h, { className: "h-8 w-8 animate-spin" })
+		children: /* @__PURE__ */ _("div", {
+			className: "flex items-center justify-center py-16 text-text-secondary",
+			children: /* @__PURE__ */ _(m, { className: "h-8 w-8 animate-spin" })
 		})
-	}) : L || !z ? /* @__PURE__ */ v(i, {
+	}) : I || !R ? /* @__PURE__ */ _(i, {
 		title: "Application Activity",
 		description: "Review audit events for this application",
-		backLink: w ? `/apps/${w}` : "/apps",
+		backLink: C ? `/apps/${C}` : "/apps",
 		backLabel: "Back to Application",
-		children: /* @__PURE__ */ v(t, {
-			icon: /* @__PURE__ */ v(d, {
+		children: /* @__PURE__ */ _(t, {
+			icon: /* @__PURE__ */ _(d, {
 				size: 32,
 				className: "text-status-error-text"
 			}),
 			title: "Unable to load activity",
-			description: L ? r(L) : "Application not found"
+			description: I ? r(I) : "Application not found"
 		})
-	}) : /* @__PURE__ */ y(i, {
+	}) : /* @__PURE__ */ v(i, {
 		title: "Application Activity",
-		description: `Audit events for ${z.name}`,
-		backLink: `/apps/${z.id}`,
+		description: `Audit events for ${R.name}`,
+		purpose: "A chronological audit trail of everything that happened to this app — config changes, secret rotations, webhook deliveries, and access events. Use it to debug integrations and to answer 'who changed what, and when?'",
+		backLink: `/apps/${R.id}`,
 		backLabel: "Back to Application",
-		actions: /* @__PURE__ */ y("div", {
+		actions: /* @__PURE__ */ v("div", {
 			className: "flex flex-wrap gap-2",
-			children: [/* @__PURE__ */ y("button", {
+			children: [/* @__PURE__ */ v("button", {
 				type: "button",
-				onClick: () => void R(),
+				onClick: () => void L(),
 				className: "inline-flex items-center gap-2 rounded-md border px-3 py-2 text-sm font-medium hover:bg-accent",
-				children: [/* @__PURE__ */ v(g, { size: 16 }), "Refresh"]
-			}), /* @__PURE__ */ y("button", {
+				children: [/* @__PURE__ */ _(h, { size: 16 }), "Refresh"]
+			}), /* @__PURE__ */ v("button", {
 				type: "button",
 				onClick: () => {
-					let e = new Blob([JSON.stringify(U, null, 2)], { type: "application/json" }), t = URL.createObjectURL(e), n = document.createElement("a");
-					n.href = t, n.download = `${z?.slug || w || "application"}-audit-log.json`, n.click(), URL.revokeObjectURL(t);
+					let e = new Blob([JSON.stringify(H, null, 2)], { type: "application/json" }), t = URL.createObjectURL(e), n = document.createElement("a");
+					n.href = t, n.download = `${R?.slug || C || "application"}-audit-log.json`, n.click(), URL.revokeObjectURL(t);
 				},
 				className: "inline-flex items-center gap-2 rounded-md border px-3 py-2 text-sm font-medium hover:bg-accent",
-				children: [/* @__PURE__ */ v(f, { size: 16 }), "Export JSON"]
+				children: [/* @__PURE__ */ _(f, { size: 16 }), "Export JSON"]
 			})]
 		}),
 		children: [
-			/* @__PURE__ */ y("div", {
-				className: "grid gap-4 rounded-lg border bg-card p-4 lg:grid-cols-[220px_minmax(0,1fr)_auto] lg:items-center",
+			/* @__PURE__ */ v("div", {
+				className: "grid gap-4 rounded-card border border-border-seam bg-bg-surface p-4 lg:grid-cols-[220px_minmax(0,1fr)_auto] lg:items-center",
 				children: [
-					/* @__PURE__ */ y("label", {
+					/* @__PURE__ */ v("label", {
 						className: "grid gap-2 text-sm font-medium",
-						children: [/* @__PURE__ */ y("span", {
-							className: "flex items-center gap-2 text-muted-foreground",
-							children: [/* @__PURE__ */ v(m, { size: 16 }), "Filter by action"]
-						}), /* @__PURE__ */ y("select", {
-							value: k,
-							onChange: (e) => A(e.target.value),
-							className: "rounded-md border bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary",
-							children: [/* @__PURE__ */ v("option", {
+						children: [/* @__PURE__ */ v("span", {
+							className: "flex items-center gap-2 text-text-secondary",
+							children: [/* @__PURE__ */ _(p, { size: 16 }), "Filter by action"]
+						}), /* @__PURE__ */ v("select", {
+							value: O,
+							onChange: (e) => k(e.target.value),
+							className: "rounded-md border bg-bg-surface px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary",
+							children: [/* @__PURE__ */ _("option", {
 								value: "all",
 								children: "All actions"
-							}), H.map((e) => /* @__PURE__ */ v("option", {
+							}), V.map((e) => /* @__PURE__ */ _("option", {
 								value: e,
-								children: S(e)
+								children: x(e)
 							}, e))]
 						})]
 					}),
-					/* @__PURE__ */ y("label", {
+					/* @__PURE__ */ v("label", {
 						className: "grid gap-2 text-sm font-medium",
-						children: [/* @__PURE__ */ v("span", {
-							className: "text-muted-foreground",
+						children: [/* @__PURE__ */ _("span", {
+							className: "text-text-secondary",
 							children: "Search metadata"
-						}), /* @__PURE__ */ v("input", {
+						}), /* @__PURE__ */ _("input", {
 							type: "text",
-							value: j,
-							onChange: (e) => M(e.target.value),
+							value: A,
+							onChange: (e) => j(e.target.value),
 							placeholder: "Search actor, action, or metadata",
-							className: "rounded-md border bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary"
+							className: "rounded-md border bg-bg-surface px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary"
 						})]
 					}),
-					/* @__PURE__ */ y("div", {
-						className: "rounded-full bg-muted px-3 py-2 text-sm text-muted-foreground",
-						children: [B, " total events"]
+					/* @__PURE__ */ v("div", {
+						className: "rounded-full bg-bg-sunken px-3 py-2 text-sm text-text-secondary",
+						children: [z, " total events"]
 					})
 				]
 			}),
-			/* @__PURE__ */ v(a, { children: U.length > 0 ? /* @__PURE__ */ v("div", {
-				className: "space-y-3 rounded-lg border bg-card p-4",
-				children: U.map((e) => /* @__PURE__ */ y("article", {
-					className: "rounded-lg border bg-background p-4",
+			/* @__PURE__ */ _(a, { children: H.length > 0 ? /* @__PURE__ */ _("div", {
+				className: "space-y-3 rounded-card border border-border-seam bg-bg-surface p-4",
+				children: H.map((e) => /* @__PURE__ */ v("article", {
+					className: "rounded-card border border-border-seam bg-bg-surface p-4",
 					children: [
-						/* @__PURE__ */ y("div", {
+						/* @__PURE__ */ v("div", {
 							className: "flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between",
-							children: [/* @__PURE__ */ y("div", {
+							children: [/* @__PURE__ */ v("div", {
 								className: "space-y-2",
-								children: [/* @__PURE__ */ y("div", {
+								children: [/* @__PURE__ */ v("div", {
 									className: "flex flex-wrap items-center gap-2",
-									children: [/* @__PURE__ */ v("span", {
-										className: "rounded-full bg-primary/10 px-2.5 py-1 text-xs font-medium text-primary",
-										children: S(e.action)
-									}), /* @__PURE__ */ y("span", {
-										className: "text-xs text-muted-foreground",
-										children: ["Actor ", O(e.actorId)]
+									children: [/* @__PURE__ */ _("span", {
+										className: "rounded-full bg-action-primary-bg/10 px-2.5 py-1 text-xs font-medium text-primary",
+										children: x(e.action)
+									}), /* @__PURE__ */ v("span", {
+										className: "text-xs text-text-secondary",
+										children: ["Actor ", D(e.actorId)]
 									})]
-								}), /* @__PURE__ */ y("p", {
-									className: "text-sm text-muted-foreground",
+								}), /* @__PURE__ */ v("p", {
+									className: "text-sm text-text-secondary",
 									children: [
 										"Resource: ",
 										e.resource,
 										e.resourceId ? ` · ${e.resourceId}` : ""
 									]
 								})]
-							}), /* @__PURE__ */ v("time", {
-								className: "text-xs text-muted-foreground",
-								children: x(e.createdAt)
+							}), /* @__PURE__ */ _("time", {
+								className: "text-xs text-text-secondary",
+								children: b(e.createdAt)
 							})]
 						}),
-						e.metadata && /* @__PURE__ */ v("pre", {
-							className: "mt-3 overflow-x-auto rounded-md bg-muted p-3 text-xs text-foreground",
-							children: C(e.metadata)
+						e.metadata && /* @__PURE__ */ _("pre", {
+							className: "mt-3 overflow-x-auto rounded-md bg-bg-sunken p-3 text-xs text-text-primary",
+							children: S(e.metadata)
 						}),
-						e.changes && /* @__PURE__ */ y("details", {
-							className: "mt-3 rounded-md border bg-card p-3",
-							children: [/* @__PURE__ */ v("summary", {
-								className: "cursor-pointer text-sm font-medium text-foreground",
+						e.changes && /* @__PURE__ */ v("details", {
+							className: "mt-3 rounded-md border bg-bg-surface p-3",
+							children: [/* @__PURE__ */ _("summary", {
+								className: "cursor-pointer text-sm font-medium text-text-primary",
 								children: "View captured changes"
-							}), /* @__PURE__ */ v("pre", {
-								className: "mt-3 overflow-x-auto text-xs text-muted-foreground",
-								children: C(e.changes)
+							}), /* @__PURE__ */ _("pre", {
+								className: "mt-3 overflow-x-auto text-xs text-text-secondary",
+								children: S(e.changes)
 							})]
 						})
 					]
 				}, e.id))
-			}) : /* @__PURE__ */ v(t, {
-				icon: /* @__PURE__ */ v(p, { size: 24 }),
+			}) : /* @__PURE__ */ _(t, {
+				illustration: "empty-data",
 				title: "No audit events found",
 				description: "Events will appear here after application or webhook actions are performed through the public gateway."
 			}) }),
-			F.auditLogs?.pageInfo?.hasNextPage && /* @__PURE__ */ v("div", {
+			P.auditLogs?.pageInfo?.hasNextPage && /* @__PURE__ */ _("div", {
 				className: "flex justify-center",
-				children: /* @__PURE__ */ y("button", {
+				children: /* @__PURE__ */ v("button", {
 					type: "button",
-					onClick: () => P((e) => e + 1),
+					onClick: () => N((e) => e + 1),
 					className: "inline-flex items-center gap-2 rounded-md border px-4 py-2 text-sm font-medium hover:bg-accent",
-					children: [/* @__PURE__ */ v(g, { size: 16 }), "Next page"]
+					children: [/* @__PURE__ */ _(h, { size: 16 }), "Next page"]
 				})
 			})
 		]
 	});
 };
 //#endregion
-export { w as AppLogsPage };
+export { C as AppLogsPage };
 
 //# sourceMappingURL=AppLogsPage.js.map

package/dist/devportal/pages/AppLogsPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppLogsPage.js","names":[],"sources":["../../../src/devportal/pages/AppLogsPage.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport { useEffect, useMemo, useState } from \"react\";\nimport { useParams } from \"react-router-dom\";\nimport { useI18n } from \"@burdenoff/fe-libs/shared/providers/shell/I18nProvider\";\nimport {\n  Download,\n  Filter,\n  Loader2,\n  RefreshCw,\n  AlertCircle,\n  FileClock,\n} from \"lucide-react\";\nimport { format } from \"date-fns\";\nimport { PageLayout, PageSection } from \"../components/PageLayout\";\nimport { EmptyState } from \"../components/EmptyState\";\nimport { useDevportal } from \"../providers/DevportalProvider\";\nimport {\n  type GetApplicationAuditLogsQuery,\n  getErrorMessage,\n  useGetApplicationAuditLogsQuery,\n} from \"../hooks\";\n\nconst PAGE_SIZE = 25;\ntype AuditLogEntry =\n  GetApplicationAuditLogsQuery[\"auditLogs\"][\"edges\"][number][\"node\"];\n\nconst formatTimestamp = (value: string) =>\n  format(new Date(value), \"MMM d, yyyy HH:mm:ss\");\n\nconst formatAction = (value: string) =>\n  value\n    .replace(/_/g, \" \")\n    .toLowerCase()\n    .replace(/\\b\\w/g, (character) => character.toUpperCase());\n\nconst metadataPreview = (metadata: unknown): string => {\n  if (!metadata) return \"\";\n\n  try {\n    return JSON.stringify(metadata, null, 2);\n  } catch {\n    return \"\";\n  }\n};\n\nexport const AppLogsPage: FC = () => {\n  const { t } = useI18n();\n  const tr = (key: string, fallback: string): string => {\n    const value = t(key);\n    return value === key ? fallback : value;\n  };\n  const { appId } = useParams<{ appId: string }>();\n  const { navigate, basePath, currentUser } = useDevportal();\n  const resolveActorLabel = (actorId: string): string => {\n    if (currentUser?.id === actorId && currentUser.email)\n      return currentUser.email;\n    return actorId;\n  };\n  const [actionFilter, setActionFilter] = useState(\"all\");\n  const [searchQuery, setSearchQuery] = useState(\"\");\n  const [page, setPage] = useState(1);\n\n  const { data, loading, error, refetch } = useGetApplicationAuditLogsQuery({\n    variables: {\n      applicationId: appId || \"\",\n      limit: PAGE_SIZE,\n      offset: (page - 1) * PAGE_SIZE,\n    },\n    skip: !appId,\n    fetchPolicy: \"cache-and-network\",\n  });\n\n  const application = data?.application;\n\n  useEffect(() => {\n    const name = application?.name;\n    if (!appId || !name) return;\n    const reg = (\n      window as unknown as {\n        __breadcrumbRegistry?: {\n          register: (id: string, name: string) => void;\n          unregister: (id: string) => void;\n        };\n      }\n    ).__breadcrumbRegistry;\n    reg?.register(appId, name);\n    return () => reg?.unregister(appId);\n  }, [appId, application?.name]);\n\n  const totalCount = data?.auditLogs?.totalCount ?? 0;\n  const auditLogs: AuditLogEntry[] =\n    data?.auditLogs?.edges?.map(\n      (edge: GetApplicationAuditLogsQuery[\"auditLogs\"][\"edges\"][number]) =>\n        edge.node,\n    ) ?? [];\n\n  const availableActions = useMemo(\n    () =>\n      Array.from(\n        new Set(auditLogs.map((entry: AuditLogEntry) => entry.action)),\n      ).sort((left, right) => left.localeCompare(right)),\n    [auditLogs],\n  );\n\n  const filteredLogs = useMemo(() => {\n    const normalizedQuery = searchQuery.trim().toLowerCase();\n\n    return auditLogs.filter((entry: AuditLogEntry) => {\n      const matchesAction =\n        actionFilter === \"all\" || entry.action === actionFilter;\n      if (!matchesAction) return false;\n\n      if (!normalizedQuery) return true;\n\n      const haystack = [\n        entry.action,\n        entry.actorId,\n        resolveActorLabel(entry.actorId),\n        entry.resource,\n        metadataPreview(entry.metadata),\n      ]\n        .join(\" \")\n        .toLowerCase();\n\n      return haystack.includes(normalizedQuery);\n    });\n  }, [actionFilter, auditLogs, searchQuery]);\n\n  const exportPayload = () => {\n    const blob = new Blob([JSON.stringify(filteredLogs, null, 2)], {\n      type: \"application/json\",\n    });\n    const url = URL.createObjectURL(blob);\n    const anchor = document.createElement(\"a\");\n    anchor.href = url;\n    anchor.download = `${application?.slug || appId || \"application\"}-audit-log.json`;\n    anchor.click();\n    URL.revokeObjectURL(url);\n  };\n\n  if (loading && !data) {\n    return (\n      <PageLayout\n        title=\"Application Activity\"\n        description=\"Loading application audit history\"\n        backLink={appId ? `/apps/${appId}` : \"/apps\"}\n        backLabel=\"Back to Application\"\n      >\n        <div className=\"flex items-center justify-center py-16 text-muted-foreground\">\n          <Loader2 className=\"h-8 w-8 animate-spin\" />\n        </div>\n      </PageLayout>\n    );\n  }\n\n  if (error || !application) {\n    return (\n      <PageLayout\n        title=\"Application Activity\"\n        description=\"Review audit events for this application\"\n        backLink={appId ? `/apps/${appId}` : \"/apps\"}\n        backLabel=\"Back to Application\"\n      >\n        <EmptyState\n          icon={<AlertCircle size={32} className=\"text-status-error-text\" />}\n          title=\"Unable to load activity\"\n          description={error ? getErrorMessage(error) : \"Application not found\"}\n        />\n      </PageLayout>\n    );\n  }\n\n  return (\n    <PageLayout\n      title=\"Application Activity\"\n      description={`Audit events for ${application.name}`}\n      backLink={`/apps/${application.id}`}\n      backLabel=\"Back to Application\"\n      actions={\n        <div className=\"flex flex-wrap gap-2\">\n          <button\n            type=\"button\"\n            onClick={() => void refetch()}\n            className=\"inline-flex items-center gap-2 rounded-md border px-3 py-2 text-sm font-medium hover:bg-accent\"\n          >\n            <RefreshCw size={16} />\n            Refresh\n          </button>\n          <button\n            type=\"button\"\n            onClick={exportPayload}\n            className=\"inline-flex items-center gap-2 rounded-md border px-3 py-2 text-sm font-medium hover:bg-accent\"\n          >\n            <Download size={16} />\n            Export JSON\n          </button>\n        </div>\n      }\n    >\n      <div className=\"grid gap-4 rounded-lg border bg-card p-4 lg:grid-cols-[220px_minmax(0,1fr)_auto] lg:items-center\">\n        <label className=\"grid gap-2 text-sm font-medium\">\n          <span className=\"flex items-center gap-2 text-muted-foreground\">\n            <Filter size={16} />\n            Filter by action\n          </span>\n          <select\n            value={actionFilter}\n            onChange={(event) => setActionFilter(event.target.value)}\n            className=\"rounded-md border bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary\"\n          >\n            <option value=\"all\">All actions</option>\n            {availableActions.map((action) => (\n              <option key={action} value={action}>\n                {formatAction(action)}\n              </option>\n            ))}\n          </select>\n        </label>\n\n        <label className=\"grid gap-2 text-sm font-medium\">\n          <span className=\"text-muted-foreground\">Search metadata</span>\n          <input\n            type=\"text\"\n            value={searchQuery}\n            onChange={(event) => setSearchQuery(event.target.value)}\n            placeholder=\"Search actor, action, or metadata\"\n            className=\"rounded-md border bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary\"\n          />\n        </label>\n\n        <div className=\"rounded-full bg-muted px-3 py-2 text-sm text-muted-foreground\">\n          {totalCount} total events\n        </div>\n      </div>\n\n      <PageSection>\n        {filteredLogs.length > 0 ? (\n          <div className=\"space-y-3 rounded-lg border bg-card p-4\">\n            {filteredLogs.map((entry: AuditLogEntry) => (\n              <article\n                key={entry.id}\n                className=\"rounded-lg border bg-background p-4\"\n              >\n                <div className=\"flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between\">\n                  <div className=\"space-y-2\">\n                    <div className=\"flex flex-wrap items-center gap-2\">\n                      <span className=\"rounded-full bg-primary/10 px-2.5 py-1 text-xs font-medium text-primary\">\n                        {formatAction(entry.action)}\n                      </span>\n                      <span className=\"text-xs text-muted-foreground\">\n                        Actor {resolveActorLabel(entry.actorId)}\n                      </span>\n                    </div>\n                    <p className=\"text-sm text-muted-foreground\">\n                      Resource: {entry.resource}\n                      {entry.resourceId ? ` · ${entry.resourceId}` : \"\"}\n                    </p>\n                  </div>\n\n                  <time className=\"text-xs text-muted-foreground\">\n                    {formatTimestamp(entry.createdAt)}\n                  </time>\n                </div>\n\n                {entry.metadata && (\n                  <pre className=\"mt-3 overflow-x-auto rounded-md bg-muted p-3 text-xs text-foreground\">\n                    {metadataPreview(entry.metadata)}\n                  </pre>\n                )}\n\n                {entry.changes && (\n                  <details className=\"mt-3 rounded-md border bg-card p-3\">\n                    <summary className=\"cursor-pointer text-sm font-medium text-foreground\">\n                      View captured changes\n                    </summary>\n                    <pre className=\"mt-3 overflow-x-auto text-xs text-muted-foreground\">\n                      {metadataPreview(entry.changes)}\n                    </pre>\n                  </details>\n                )}\n              </article>\n            ))}\n          </div>\n        ) : (\n          <EmptyState\n            icon={<FileClock size={24} />}\n            title=\"No audit events found\"\n            description=\"Events will appear here after application or webhook actions are performed through the public gateway.\"\n          />\n        )}\n      </PageSection>\n\n      {data.auditLogs?.pageInfo?.hasNextPage && (\n        <div className=\"flex justify-center\">\n          <button\n            type=\"button\"\n            onClick={() => setPage((previous) => previous + 1)}\n            className=\"inline-flex items-center gap-2 rounded-md border px-4 py-2 text-sm font-medium hover:bg-accent\"\n          >\n            <RefreshCw size={16} />\n            Next page\n          </button>\n        </div>\n      )}\n    </PageLayout>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"AppLogsPage.js","names":[],"sources":["../../../src/devportal/pages/AppLogsPage.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport { useEffect, useMemo, useState } from \"react\";\nimport { useParams } from \"react-router-dom\";\nimport { useI18n } from \"@burdenoff/fe-libs/shared/providers/shell/I18nProvider\";\nimport {\n  Download,\n  Filter,\n  Loader2,\n  RefreshCw,\n  AlertCircle,\n  FileClock,\n} from \"lucide-react\";\nimport { format } from \"date-fns\";\nimport { PageLayout, PageSection } from \"../components/PageLayout\";\nimport { EmptyState } from \"../components/EmptyState\";\nimport { useDevportal } from \"../providers/DevportalProvider\";\nimport {\n  type GetApplicationAuditLogsQuery,\n  getErrorMessage,\n  useGetApplicationAuditLogsQuery,\n} from \"../hooks\";\n\nconst PAGE_SIZE = 25;\ntype AuditLogEntry =\n  GetApplicationAuditLogsQuery[\"auditLogs\"][\"edges\"][number][\"node\"];\n\nconst formatTimestamp = (value: string) =>\n  format(new Date(value), \"MMM d, yyyy HH:mm:ss\");\n\nconst formatAction = (value: string) =>\n  value\n    .replace(/_/g, \" \")\n    .toLowerCase()\n    .replace(/\\b\\w/g, (character) => character.toUpperCase());\n\nconst metadataPreview = (metadata: unknown): string => {\n  if (!metadata) return \"\";\n\n  try {\n    return JSON.stringify(metadata, null, 2);\n  } catch {\n    return \"\";\n  }\n};\n\nexport const AppLogsPage: FC = () => {\n  const { t } = useI18n();\n  const tr = (key: string, fallback: string): string => {\n    const value = t(key);\n    return value === key ? fallback : value;\n  };\n  const { appId } = useParams<{ appId: string }>();\n  const { navigate, basePath, currentUser } = useDevportal();\n  const resolveActorLabel = (actorId: string): string => {\n    if (currentUser?.id === actorId && currentUser.email)\n      return currentUser.email;\n    return actorId;\n  };\n  const [actionFilter, setActionFilter] = useState(\"all\");\n  const [searchQuery, setSearchQuery] = useState(\"\");\n  const [page, setPage] = useState(1);\n\n  const { data, loading, error, refetch } = useGetApplicationAuditLogsQuery({\n    variables: {\n      applicationId: appId || \"\",\n      limit: PAGE_SIZE,\n      offset: (page - 1) * PAGE_SIZE,\n    },\n    skip: !appId,\n    fetchPolicy: \"cache-and-network\",\n  });\n\n  const application = data?.application;\n\n  useEffect(() => {\n    const name = application?.name;\n    if (!appId || !name) return;\n    const reg = (\n      window as unknown as {\n        __breadcrumbRegistry?: {\n          register: (id: string, name: string) => void;\n          unregister: (id: string) => void;\n        };\n      }\n    ).__breadcrumbRegistry;\n    reg?.register(appId, name);\n    return () => reg?.unregister(appId);\n  }, [appId, application?.name]);\n\n  const totalCount = data?.auditLogs?.totalCount ?? 0;\n  const auditLogs: AuditLogEntry[] =\n    data?.auditLogs?.edges?.map(\n      (edge: GetApplicationAuditLogsQuery[\"auditLogs\"][\"edges\"][number]) =>\n        edge.node,\n    ) ?? [];\n\n  const availableActions = useMemo(\n    () =>\n      Array.from(\n        new Set(auditLogs.map((entry: AuditLogEntry) => entry.action)),\n      ).sort((left, right) => left.localeCompare(right)),\n    [auditLogs],\n  );\n\n  const filteredLogs = useMemo(() => {\n    const normalizedQuery = searchQuery.trim().toLowerCase();\n\n    return auditLogs.filter((entry: AuditLogEntry) => {\n      const matchesAction =\n        actionFilter === \"all\" || entry.action === actionFilter;\n      if (!matchesAction) return false;\n\n      if (!normalizedQuery) return true;\n\n      const haystack = [\n        entry.action,\n        entry.actorId,\n        resolveActorLabel(entry.actorId),\n        entry.resource,\n        metadataPreview(entry.metadata),\n      ]\n        .join(\" \")\n        .toLowerCase();\n\n      return haystack.includes(normalizedQuery);\n    });\n  }, [actionFilter, auditLogs, searchQuery]);\n\n  const exportPayload = () => {\n    const blob = new Blob([JSON.stringify(filteredLogs, null, 2)], {\n      type: \"application/json\",\n    });\n    const url = URL.createObjectURL(blob);\n    const anchor = document.createElement(\"a\");\n    anchor.href = url;\n    anchor.download = `${application?.slug || appId || \"application\"}-audit-log.json`;\n    anchor.click();\n    URL.revokeObjectURL(url);\n  };\n\n  if (loading && !data) {\n    return (\n      <PageLayout\n        title=\"Application Activity\"\n        description=\"Loading application audit history\"\n        backLink={appId ? `/apps/${appId}` : \"/apps\"}\n        backLabel=\"Back to Application\"\n      >\n        <div className=\"flex items-center justify-center py-16 text-text-secondary\">\n          <Loader2 className=\"h-8 w-8 animate-spin\" />\n        </div>\n      </PageLayout>\n    );\n  }\n\n  if (error || !application) {\n    return (\n      <PageLayout\n        title=\"Application Activity\"\n        description=\"Review audit events for this application\"\n        backLink={appId ? `/apps/${appId}` : \"/apps\"}\n        backLabel=\"Back to Application\"\n      >\n        <EmptyState\n          icon={<AlertCircle size={32} className=\"text-status-error-text\" />}\n          title=\"Unable to load activity\"\n          description={error ? getErrorMessage(error) : \"Application not found\"}\n        />\n      </PageLayout>\n    );\n  }\n\n  return (\n    <PageLayout\n      title=\"Application Activity\"\n      description={`Audit events for ${application.name}`}\n      purpose=\"A chronological audit trail of everything that happened to this app — config changes, secret rotations, webhook deliveries, and access events. Use it to debug integrations and to answer 'who changed what, and when?'\"\n      backLink={`/apps/${application.id}`}\n      backLabel=\"Back to Application\"\n      actions={\n        <div className=\"flex flex-wrap gap-2\">\n          <button\n            type=\"button\"\n            onClick={() => void refetch()}\n            className=\"inline-flex items-center gap-2 rounded-md border px-3 py-2 text-sm font-medium hover:bg-accent\"\n          >\n            <RefreshCw size={16} />\n            Refresh\n          </button>\n          <button\n            type=\"button\"\n            onClick={exportPayload}\n            className=\"inline-flex items-center gap-2 rounded-md border px-3 py-2 text-sm font-medium hover:bg-accent\"\n          >\n            <Download size={16} />\n            Export JSON\n          </button>\n        </div>\n      }\n    >\n      <div className=\"grid gap-4 rounded-card border border-border-seam bg-bg-surface p-4 lg:grid-cols-[220px_minmax(0,1fr)_auto] lg:items-center\">\n        <label className=\"grid gap-2 text-sm font-medium\">\n          <span className=\"flex items-center gap-2 text-text-secondary\">\n            <Filter size={16} />\n            Filter by action\n          </span>\n          <select\n            value={actionFilter}\n            onChange={(event) => setActionFilter(event.target.value)}\n            className=\"rounded-md border bg-bg-surface px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary\"\n          >\n            <option value=\"all\">All actions</option>\n            {availableActions.map((action) => (\n              <option key={action} value={action}>\n                {formatAction(action)}\n              </option>\n            ))}\n          </select>\n        </label>\n\n        <label className=\"grid gap-2 text-sm font-medium\">\n          <span className=\"text-text-secondary\">Search metadata</span>\n          <input\n            type=\"text\"\n            value={searchQuery}\n            onChange={(event) => setSearchQuery(event.target.value)}\n            placeholder=\"Search actor, action, or metadata\"\n            className=\"rounded-md border bg-bg-surface px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary\"\n          />\n        </label>\n\n        <div className=\"rounded-full bg-bg-sunken px-3 py-2 text-sm text-text-secondary\">\n          {totalCount} total events\n        </div>\n      </div>\n\n      <PageSection>\n        {filteredLogs.length > 0 ? (\n          <div className=\"space-y-3 rounded-card border border-border-seam bg-bg-surface p-4\">\n            {filteredLogs.map((entry: AuditLogEntry) => (\n              <article\n                key={entry.id}\n                className=\"rounded-card border border-border-seam bg-bg-surface p-4\"\n              >\n                <div className=\"flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between\">\n                  <div className=\"space-y-2\">\n                    <div className=\"flex flex-wrap items-center gap-2\">\n                      <span className=\"rounded-full bg-action-primary-bg/10 px-2.5 py-1 text-xs font-medium text-primary\">\n                        {formatAction(entry.action)}\n                      </span>\n                      <span className=\"text-xs text-text-secondary\">\n                        Actor {resolveActorLabel(entry.actorId)}\n                      </span>\n                    </div>\n                    <p className=\"text-sm text-text-secondary\">\n                      Resource: {entry.resource}\n                      {entry.resourceId ? ` · ${entry.resourceId}` : \"\"}\n                    </p>\n                  </div>\n\n                  <time className=\"text-xs text-text-secondary\">\n                    {formatTimestamp(entry.createdAt)}\n                  </time>\n                </div>\n\n                {entry.metadata && (\n                  <pre className=\"mt-3 overflow-x-auto rounded-md bg-bg-sunken p-3 text-xs text-text-primary\">\n                    {metadataPreview(entry.metadata)}\n                  </pre>\n                )}\n\n                {entry.changes && (\n                  <details className=\"mt-3 rounded-md border bg-bg-surface p-3\">\n                    <summary className=\"cursor-pointer text-sm font-medium text-text-primary\">\n                      View captured changes\n                    </summary>\n                    <pre className=\"mt-3 overflow-x-auto text-xs text-text-secondary\">\n                      {metadataPreview(entry.changes)}\n                    </pre>\n                  </details>\n                )}\n              </article>\n            ))}\n          </div>\n        ) : (\n          <EmptyState\n            illustration=\"empty-data\"\n            title=\"No audit events found\"\n            description=\"Events will appear here after application or webhook actions are performed through the public gateway.\"\n          />\n        )}\n      </PageSection>\n\n      {data.auditLogs?.pageInfo?.hasNextPage && (\n        <div className=\"flex justify-center\">\n          <button\n            type=\"button\"\n            onClick={() => setPage((previous) => previous + 1)}\n            className=\"inline-flex items-center gap-2 rounded-md border px-4 py-2 text-sm font-medium hover:bg-accent\"\n          >\n            <RefreshCw size={16} />\n            Next page\n          </button>\n        </div>\n      )}\n    </PageLayout>\n  );\n};\n"],"mappings":"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"}