@burdenoff/microfe-devportal 2026.625.8 → 2026.625.10

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

@@ -1 +1 @@
-{"version":3,"file":"ApplicationsPage.js","names":[],"sources":["../../../src/devportal/pages/ApplicationsPage.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  Grid,\n  List,\n  AppWindow,\n  Loader2,\n  AlertCircle,\n  Archive,\n  Trash2,\n} from \"lucide-react\";\nimport { PageLayout } from \"../components/PageLayout\";\nimport { AppCard, AppListItem } from \"../components/AppCard\";\nimport { EmptyState } from \"../components/EmptyState\";\nimport { ConfirmDialog } from \"../components/ConfirmDialog\";\nimport { SelectionCheckbox } from \"../components/SelectionCheckbox\";\nimport { useDevportal } from \"../providers/DevportalProvider\";\nimport { PermissionGuard } from \"../components\";\nimport { DEVPORTAL_PERMISSIONS } from \"../constants/permissions\";\nimport type { Application, AppStatus, AppType } from \"../types\";\nimport { APP_TYPE_LABELS, APP_STATUS_COLORS } from \"../utils/constants\";\nimport {\n  useGetApplicationsQuery,\n  useDeleteApplicationMutation,\n  useDeactivateAppMutation,\n  getErrorMessage,\n  useDevportalPermission,\n  type ApplicationFieldsFragment,\n} from \"../hooks\";\n\ntype BulkAction = \"delete\" | \"deactivate\" | null;\n\nfunction formatBulkResult(\n  action: \"Deleted\" | \"Deactivated\",\n  succeeded: number,\n  failed: number,\n): string {\n  return `${action} ${succeeded} application${succeeded === 1 ? \"\" : \"s\"}${\n    failed > 0 ? ` • ${failed} failed` : \"\"\n  }`;\n}\n\n/**\n * Map GraphQL application to local Application type\n */\nfunction mapApplication(app: ApplicationFieldsFragment): Application {\n  // Convert screenshots array to Record if needed\n  const screenshots = Array.isArray(app.screenshots)\n    ? app.screenshots.length > 0\n      ? (app.screenshots as unknown as Record<string, unknown>)\n      : undefined\n    : (app.screenshots as Record<string, unknown> | undefined);\n\n  // Convert pricingDetails\n  const pricingDetails =\n    app.pricingDetails && typeof app.pricingDetails === \"object\"\n      ? (app.pricingDetails as Record<string, unknown>)\n      : undefined;\n\n  return {\n    id: app.id,\n    name: app.name,\n    slug: app.slug,\n    description: app.description ?? undefined,\n    shortDescription: app.shortDescription ?? undefined,\n    appType: app.appType as AppType,\n    status: app.status as AppStatus,\n    visibility: app.visibility as \"PUBLIC\" | \"PRIVATE\" | \"UNLISTED\",\n    category: app.category ?? undefined,\n    tags: app.tags ?? [],\n    keywords: app.keywords ?? [],\n    iconUrl: app.iconUrl ?? undefined,\n    bannerUrl: app.bannerUrl ?? undefined,\n    screenshots,\n    videoUrl: app.videoUrl ?? undefined,\n    websiteUrl: app.websiteUrl ?? undefined,\n    documentationUrl: app.documentationUrl ?? undefined,\n    supportUrl: app.supportUrl ?? undefined,\n    privacyPolicyUrl: app.privacyPolicyUrl ?? undefined,\n    termsOfServiceUrl: app.termsOfServiceUrl ?? undefined,\n    githubUrl: app.githubUrl ?? undefined,\n    pricingType: app.pricingType ?? undefined,\n    pricingDetails,\n    isVerified: app.isVerified,\n    isFeatured: app.isFeatured,\n    averageRating: app.averageRating ?? undefined,\n    reviewCount: app.reviewCount ?? 0,\n    installCount: app.installCount ?? 0,\n    activeInstallCount: app.activeInstallCount ?? 0,\n    requiresApproval: app.requiresApproval,\n    reviewStatus: app.reviewStatus ?? undefined,\n    reviewNotes: app.reviewNotes ?? undefined,\n    reviewedBy: app.reviewedBy ?? undefined,\n    lastReviewedAt: app.lastReviewedAt ?? undefined,\n    submittedAt: app.submittedAt ?? undefined,\n    publishedAt: app.publishedAt ?? undefined,\n    developerId: app.developerId,\n    developerOrganizationId: app.developerOrganizationId ?? undefined,\n    tenantId: app.tenantId,\n    createdAt: app.createdAt,\n    updatedAt: app.updatedAt,\n  };\n}\n\n/**\n * Applications listing page\n *\n * Displays all applications for the current developer.\n * Uses GraphQL to fetch real data from the DevPortal backend.\n */\nexport const ApplicationsPage: 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 createPerm = useDevportalPermission(DEVPORTAL_PERMISSIONS.APP_CREATE);\n  const deletePerm = useDevportalPermission(DEVPORTAL_PERMISSIONS.APP_DELETE);\n  const updatePerm = useDevportalPermission(DEVPORTAL_PERMISSIONS.APP_UPDATE);\n  const [viewMode, setViewMode] = useState<\"grid\" | \"list\">(\"grid\");\n  const [searchQuery, setSearchQuery] = useState(\"\");\n  const [statusFilter, setStatusFilter] = useState<AppStatus | \"\">(\"\");\n  const [typeFilter, setTypeFilter] = useState<AppType | \"\">(\"\");\n  const [selectedAppIds, setSelectedAppIds] = useState<Set<string>>(new Set());\n  const [bulkAction, setBulkAction] = useState<BulkAction>(null);\n  const [feedback, setFeedback] = useState<{\n    type: \"success\" | \"error\";\n    message: string;\n  } | null>(null);\n\n  // Fetch applications from GraphQL API\n  const { data, loading, error, refetch } = useGetApplicationsQuery({\n    variables: {\n      limit: 50,\n      offset: 0,\n      status: statusFilter || undefined,\n    },\n    fetchPolicy: \"cache-and-network\",\n  });\n\n  const applications: Application[] = useMemo(\n    () =>\n      data?.applications?.edges?.map(\n        (edge: { node: ApplicationFieldsFragment }) =>\n          mapApplication(edge.node),\n      ) ?? [],\n    [data?.applications?.edges],\n  );\n\n  const [deleteApplication] = useDeleteApplicationMutation();\n  const [deactivateApp] = useDeactivateAppMutation();\n\n  const handleNavigate = (path: string) => {\n    navigate?.(`${basePath}${path}`);\n  };\n\n  // Client-side filtering: org scope + search + type (status filtered server-side)\n  const filteredApps = applications.filter((app: Application) => {\n    const matchesOrg =\n      !activeOrgId || app.developerOrganizationId === activeOrgId;\n    const matchesSearch =\n      !searchQuery ||\n      app.name.toLowerCase().includes(searchQuery.toLowerCase()) ||\n      app.shortDescription?.toLowerCase().includes(searchQuery.toLowerCase());\n    const matchesType = !typeFilter || app.appType === typeFilter;\n    return matchesOrg && matchesSearch && matchesType;\n  });\n\n  const selectedApps = useMemo(\n    () => applications.filter((app: Application) => selectedAppIds.has(app.id)),\n    [applications, selectedAppIds],\n  );\n\n  const deactivatableApps = useMemo(\n    () =>\n      selectedApps.filter(\n        (app: Application) =>\n          app.status !== \"INACTIVE\" && app.status !== \"REVOKED\",\n      ),\n    [selectedApps],\n  );\n\n  const allVisibleSelected =\n    filteredApps.length > 0 &&\n    filteredApps.every((app: Application) => selectedAppIds.has(app.id));\n  const partiallySelected =\n    filteredApps.some((app: Application) => selectedAppIds.has(app.id)) &&\n    !allVisibleSelected;\n\n  const toggleAppSelection = (appId: string, checked: boolean) => {\n    setSelectedAppIds((prev) => {\n      const next = new Set(prev);\n      if (checked) {\n        next.add(appId);\n      } else {\n        next.delete(appId);\n      }\n      return next;\n    });\n  };\n\n  const toggleAllVisible = (checked: boolean) => {\n    setSelectedAppIds((prev) => {\n      const next = new Set(prev);\n      filteredApps.forEach((app: Application) => {\n        if (checked) {\n          next.add(app.id);\n        } else {\n          next.delete(app.id);\n        }\n      });\n      return next;\n    });\n  };\n\n  const clearSelection = () => setSelectedAppIds(new Set());\n\n  const runBulkDeactivate = async () => {\n    if (deactivatableApps.length === 0) return;\n\n    const results = await Promise.allSettled(\n      deactivatableApps.map((app: Application) =>\n        deactivateApp({ variables: { id: app.id } }),\n      ),\n    );\n\n    const succeeded = results.filter(\n      (result: PromiseSettledResult<unknown>) => result.status === \"fulfilled\",\n    ).length;\n    const failed = results.length - succeeded;\n\n    setFeedback({\n      type: failed === 0 ? \"success\" : \"error\",\n      message: formatBulkResult(\"Deactivated\", succeeded, failed),\n    });\n    clearSelection();\n    setBulkAction(null);\n    await refetch();\n  };\n\n  const runBulkDelete = async () => {\n    if (selectedApps.length === 0) return;\n\n    const results = await Promise.allSettled(\n      selectedApps.map((app: Application) =>\n        deleteApplication({ variables: { id: app.id } }),\n      ),\n    );\n\n    const succeeded = results.filter(\n      (result: PromiseSettledResult<unknown>) => result.status === \"fulfilled\",\n    ).length;\n    const failed = results.length - succeeded;\n\n    setFeedback({\n      type: failed === 0 ? \"success\" : \"error\",\n      message: formatBulkResult(\"Deleted\", succeeded, failed),\n    });\n    clearSelection();\n    setBulkAction(null);\n    await refetch();\n  };\n\n  // Loading state\n  if (loading && !data) {\n    return (\n      <PageLayout\n        title={tr(\"devportal.myApplications\", \"My Applications\")}\n        description={tr(\n          \"devportal.manageYourApps\",\n          \"Manage your developer applications\",\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.loadingApplications\", \"Loading applications...\")}\n          </span>\n        </div>\n      </PageLayout>\n    );\n  }\n\n  // Error state\n  if (error) {\n    return (\n      <PageLayout\n        title={tr(\"devportal.myApplications\", \"My Applications\")}\n        description={tr(\n          \"devportal.manageYourApps\",\n          \"Manage your developer applications\",\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(\n              \"devportal.failedToLoadApplications\",\n              \"Failed to load applications\",\n            )}\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  return (\n    <PermissionGuard permission={DEVPORTAL_PERMISSIONS.APP_READ}>\n      <PageLayout\n        title={tr(\"devportal.myApplications\", \"My Applications\")}\n        description={tr(\n          \"devportal.manageYourApps\",\n          \"Manage your developer applications\",\n        )}\n        actions={\n          <button\n            onClick={() => handleNavigate(\"/apps/new\")}\n            disabled={!createPerm.allowed}\n            aria-disabled={!createPerm.allowed}\n            title={\n              !createPerm.allowed\n                ? tr(\n                    \"devportal.common.noPermission\",\n                    \"You do not have permission to perform this action\",\n                  )\n                : undefined\n            }\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 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary\"\n          >\n            <Plus size={16} aria-hidden=\"true\" />\n            {tr(\"devportal.createApp\", \"Create App\")}\n          </button>\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={tr(\n                  \"devportal.searchApplications\",\n                  \"Search applications...\",\n                )}\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 AppStatus | \"\")\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=\"\">\n                {tr(\"devportal.allStatus\", \"All Status\")}\n              </option>\n              {Object.keys(APP_STATUS_COLORS).map((status) => (\n                <option key={status} value={status}>\n                  {status.replace(/_/g, \" \")}\n                </option>\n              ))}\n            </select>\n\n            {/* Type Filter */}\n            <select\n              value={typeFilter}\n              onChange={(e) => setTypeFilter(e.target.value as AppType | \"\")}\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=\"\">{tr(\"devportal.allTypes\", \"All Types\")}</option>\n              {Object.entries(APP_TYPE_LABELS).map(([value, label]) => (\n                <option key={value} value={value}>\n                  {label}\n                </option>\n              ))}\n            </select>\n          </div>\n\n          {/* View Toggle */}\n          <div className=\"flex items-center gap-1 rounded-md border p-1\">\n            <button\n              onClick={() => setViewMode(\"grid\")}\n              className={`rounded p-1.5 ${viewMode === \"grid\" ? \"bg-muted\" : \"hover:bg-muted/50\"}`}\n              title=\"Grid view\"\n            >\n              <Grid size={16} />\n            </button>\n            <button\n              onClick={() => setViewMode(\"list\")}\n              className={`rounded p-1.5 ${viewMode === \"list\" ? \"bg-muted\" : \"hover:bg-muted/50\"}`}\n              title=\"List view\"\n            >\n              <List size={16} />\n            </button>\n          </div>\n        </div>\n\n        {feedback && (\n          <div\n            className={`rounded-lg border px-4 py-3 text-sm ${\n              feedback.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>{feedback.message}</span>\n              <button\n                onClick={() => setFeedback(null)}\n                className=\"text-xs font-medium underline underline-offset-2\"\n              >\n                Dismiss\n              </button>\n            </div>\n          </div>\n        )}\n\n        {filteredApps.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={toggleAllVisible}\n                    ariaLabel=\"Select all visible applications\"\n                  />\n                  <span className=\"text-sm font-medium\">\n                    Select all visible\n                  </span>\n                </div>\n                {selectedAppIds.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                  {selectedAppIds.size} selected\n                </span>\n                <button\n                  onClick={() => setBulkAction(\"deactivate\")}\n                  disabled={\n                    deactivatableApps.length === 0 || !updatePerm.allowed\n                  }\n                  aria-disabled={\n                    deactivatableApps.length === 0 || !updatePerm.allowed\n                  }\n                  title={\n                    !updatePerm.allowed\n                      ? tr(\n                          \"devportal.common.noPermission\",\n                          \"You do not have permission to perform this action\",\n                        )\n                      : undefined\n                  }\n                  className=\"inline-flex items-center gap-2 rounded-md border border-status-warning-bg px-3 py-2 text-sm font-medium text-status-warning-text transition-colors hover:bg-status-warning-bg-subtle disabled:cursor-not-allowed disabled:opacity-50 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary\"\n                >\n                  <Archive size={16} aria-hidden=\"true\" />\n                  {tr(\"devportal.deactivateSelected\", \"Deactivate Selected\")}\n                  {deactivatableApps.length > 0\n                    ? ` (${deactivatableApps.length})`\n                    : \"\"}\n                </button>\n                <button\n                  onClick={() => setBulkAction(\"delete\")}\n                  disabled={selectedApps.length === 0 || !deletePerm.allowed}\n                  aria-disabled={\n                    selectedApps.length === 0 || !deletePerm.allowed\n                  }\n                  title={\n                    !deletePerm.allowed\n                      ? tr(\n                          \"devportal.common.noPermission\",\n                          \"You do not have permission to perform this action\",\n                        )\n                      : undefined\n                  }\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 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary\"\n                >\n                  <Trash2 size={16} aria-hidden=\"true\" />\n                  {tr(\"devportal.deleteSelected\", \"Delete Selected\")}\n                  {selectedApps.length > 0 ? ` (${selectedApps.length})` : \"\"}\n                </button>\n              </div>\n            </div>\n          </div>\n        )}\n\n        {/* Results count */}\n        <p className=\"text-sm text-muted-foreground\">\n          {filteredApps.length} application\n          {filteredApps.length !== 1 ? \"s\" : \"\"} found\n        </p>\n\n        {/* Applications */}\n        {filteredApps.length > 0 ? (\n          viewMode === \"grid\" ? (\n            <div className=\"grid gap-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3\">\n              {filteredApps.map((app: Application) => (\n                <AppCard\n                  key={app.id}\n                  app={app}\n                  selected={selectedAppIds.has(app.id)}\n                  onToggleSelect={(checked) =>\n                    toggleAppSelection(app.id, checked)\n                  }\n                />\n              ))}\n            </div>\n          ) : (\n            <div className=\"space-y-2\">\n              {filteredApps.map((app: Application) => (\n                <AppListItem\n                  key={app.id}\n                  app={app}\n                  selected={selectedAppIds.has(app.id)}\n                  onToggleSelect={(checked) =>\n                    toggleAppSelection(app.id, checked)\n                  }\n                />\n              ))}\n            </div>\n          )\n        ) : (\n          <EmptyState\n            icon={<AppWindow size={32} />}\n            title={tr(\"devportal.noApplicationsFound\", \"No applications found\")}\n            description={\n              searchQuery || statusFilter || typeFilter\n                ? tr(\n                    \"devportal.tryAdjustingFilters\",\n                    \"Try adjusting your filters\",\n                  )\n                : tr(\n                    \"devportal.createFirstApp\",\n                    \"Create your first application to get started\",\n                  )\n            }\n            action={\n              !searchQuery && !statusFilter && !typeFilter ? (\n                <button\n                  onClick={() => handleNavigate(\"/apps/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.createApp\", \"Create App\")}\n                </button>\n              ) : undefined\n            }\n          />\n        )}\n\n        <ConfirmDialog\n          open={bulkAction === \"deactivate\"}\n          onOpenChange={(open) => {\n            if (!open) setBulkAction(null);\n          }}\n          onConfirm={runBulkDeactivate}\n          title=\"Deactivate selected applications\"\n          description={`Deactivate ${deactivatableApps.length} selected application${deactivatableApps.length === 1 ? \"\" : \"s\"}? Users and integrations may lose access until these apps are re-enabled.`}\n          confirmLabel=\"Deactivate\"\n          cancelLabel=\"Cancel\"\n          variant=\"warning\"\n        />\n\n        <ConfirmDialog\n          open={bulkAction === \"delete\"}\n          onOpenChange={(open) => {\n            if (!open) setBulkAction(null);\n          }}\n          onConfirm={runBulkDelete}\n          title=\"Delete selected applications\"\n          description={`Delete ${selectedApps.length} selected application${selectedApps.length === 1 ? \"\" : \"s\"}? This cannot be undone.`}\n          confirmLabel=\"Delete\"\n          cancelLabel=\"Cancel\"\n          variant=\"danger\"\n        />\n      </PageLayout>\n    </PermissionGuard>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"ApplicationsPage.js","names":[],"sources":["../../../src/devportal/pages/ApplicationsPage.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  Grid,\n  List,\n  AppWindow,\n  Loader2,\n  AlertCircle,\n  Archive,\n  Trash2,\n} from \"lucide-react\";\nimport { EmphasisPanel, GlassCard } from \"@burdenoff/fe-libs/ui\";\nimport { PageLayout } from \"../components/PageLayout\";\nimport { AppCard, AppListItem } from \"../components/AppCard\";\nimport { EmptyState } from \"../components/EmptyState\";\nimport { ConfirmDialog } from \"../components/ConfirmDialog\";\nimport { SelectionCheckbox } from \"../components/SelectionCheckbox\";\nimport { useDevportal } from \"../providers/DevportalProvider\";\nimport { PermissionGuard } from \"../components\";\nimport { DEVPORTAL_PERMISSIONS } from \"../constants/permissions\";\nimport type { Application, AppStatus, AppType } from \"../types\";\nimport { APP_TYPE_LABELS, APP_STATUS_COLORS } from \"../utils/constants\";\nimport {\n  useGetApplicationsQuery,\n  useDeleteApplicationMutation,\n  useDeactivateAppMutation,\n  getErrorMessage,\n  useDevportalPermission,\n  type ApplicationFieldsFragment,\n} from \"../hooks\";\n\ntype BulkAction = \"delete\" | \"deactivate\" | null;\n\nfunction formatBulkResult(\n  action: \"Deleted\" | \"Deactivated\",\n  succeeded: number,\n  failed: number,\n): string {\n  return `${action} ${succeeded} application${succeeded === 1 ? \"\" : \"s\"}${\n    failed > 0 ? ` • ${failed} failed` : \"\"\n  }`;\n}\n\n/**\n * Map GraphQL application to local Application type\n */\nfunction mapApplication(app: ApplicationFieldsFragment): Application {\n  // Convert screenshots array to Record if needed\n  const screenshots = Array.isArray(app.screenshots)\n    ? app.screenshots.length > 0\n      ? (app.screenshots as unknown as Record<string, unknown>)\n      : undefined\n    : (app.screenshots as Record<string, unknown> | undefined);\n\n  // Convert pricingDetails\n  const pricingDetails =\n    app.pricingDetails && typeof app.pricingDetails === \"object\"\n      ? (app.pricingDetails as Record<string, unknown>)\n      : undefined;\n\n  return {\n    id: app.id,\n    name: app.name,\n    slug: app.slug,\n    description: app.description ?? undefined,\n    shortDescription: app.shortDescription ?? undefined,\n    appType: app.appType as AppType,\n    status: app.status as AppStatus,\n    visibility: app.visibility as \"PUBLIC\" | \"PRIVATE\" | \"UNLISTED\",\n    category: app.category ?? undefined,\n    tags: app.tags ?? [],\n    keywords: app.keywords ?? [],\n    iconUrl: app.iconUrl ?? undefined,\n    bannerUrl: app.bannerUrl ?? undefined,\n    screenshots,\n    videoUrl: app.videoUrl ?? undefined,\n    websiteUrl: app.websiteUrl ?? undefined,\n    documentationUrl: app.documentationUrl ?? undefined,\n    supportUrl: app.supportUrl ?? undefined,\n    privacyPolicyUrl: app.privacyPolicyUrl ?? undefined,\n    termsOfServiceUrl: app.termsOfServiceUrl ?? undefined,\n    githubUrl: app.githubUrl ?? undefined,\n    pricingType: app.pricingType ?? undefined,\n    pricingDetails,\n    isVerified: app.isVerified,\n    isFeatured: app.isFeatured,\n    averageRating: app.averageRating ?? undefined,\n    reviewCount: app.reviewCount ?? 0,\n    installCount: app.installCount ?? 0,\n    activeInstallCount: app.activeInstallCount ?? 0,\n    requiresApproval: app.requiresApproval,\n    reviewStatus: app.reviewStatus ?? undefined,\n    reviewNotes: app.reviewNotes ?? undefined,\n    reviewedBy: app.reviewedBy ?? undefined,\n    lastReviewedAt: app.lastReviewedAt ?? undefined,\n    submittedAt: app.submittedAt ?? undefined,\n    publishedAt: app.publishedAt ?? undefined,\n    developerId: app.developerId,\n    developerOrganizationId: app.developerOrganizationId ?? undefined,\n    tenantId: app.tenantId,\n    createdAt: app.createdAt,\n    updatedAt: app.updatedAt,\n  };\n}\n\n/**\n * Applications listing page\n *\n * Displays all applications for the current developer.\n * Uses GraphQL to fetch real data from the DevPortal backend.\n */\nexport const ApplicationsPage: 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 createPerm = useDevportalPermission(DEVPORTAL_PERMISSIONS.APP_CREATE);\n  const deletePerm = useDevportalPermission(DEVPORTAL_PERMISSIONS.APP_DELETE);\n  const updatePerm = useDevportalPermission(DEVPORTAL_PERMISSIONS.APP_UPDATE);\n  const [viewMode, setViewMode] = useState<\"grid\" | \"list\">(\"grid\");\n  const [searchQuery, setSearchQuery] = useState(\"\");\n  const [statusFilter, setStatusFilter] = useState<AppStatus | \"\">(\"\");\n  const [typeFilter, setTypeFilter] = useState<AppType | \"\">(\"\");\n  const [selectedAppIds, setSelectedAppIds] = useState<Set<string>>(new Set());\n  const [bulkAction, setBulkAction] = useState<BulkAction>(null);\n  const [feedback, setFeedback] = useState<{\n    type: \"success\" | \"error\";\n    message: string;\n  } | null>(null);\n\n  // Fetch applications from GraphQL API\n  const { data, loading, error, refetch } = useGetApplicationsQuery({\n    variables: {\n      limit: 50,\n      offset: 0,\n      status: statusFilter || undefined,\n    },\n    fetchPolicy: \"cache-and-network\",\n  });\n\n  const applications: Application[] = useMemo(\n    () =>\n      data?.applications?.edges?.map(\n        (edge: { node: ApplicationFieldsFragment }) =>\n          mapApplication(edge.node),\n      ) ?? [],\n    [data?.applications?.edges],\n  );\n\n  const [deleteApplication] = useDeleteApplicationMutation();\n  const [deactivateApp] = useDeactivateAppMutation();\n\n  const handleNavigate = (path: string) => {\n    navigate?.(`${basePath}${path}`);\n  };\n\n  // Client-side filtering: org scope + search + type (status filtered server-side)\n  const filteredApps = applications.filter((app: Application) => {\n    const matchesOrg =\n      !activeOrgId || app.developerOrganizationId === activeOrgId;\n    const matchesSearch =\n      !searchQuery ||\n      app.name.toLowerCase().includes(searchQuery.toLowerCase()) ||\n      app.shortDescription?.toLowerCase().includes(searchQuery.toLowerCase());\n    const matchesType = !typeFilter || app.appType === typeFilter;\n    return matchesOrg && matchesSearch && matchesType;\n  });\n\n  const appStats = useMemo(() => {\n    const total = data?.applications?.totalCount ?? applications.length;\n    const active = applications.filter(\n      (app: Application) => app.status === \"ACTIVE\",\n    ).length;\n    const draft = applications.filter(\n      (app: Application) => app.status === \"DRAFT\",\n    ).length;\n    const published = applications.filter(\n      (app: Application) => app.status === \"PUBLISHED\",\n    ).length;\n    return { total, active, draft, published };\n  }, [applications, data?.applications?.totalCount]);\n\n  const selectedApps = useMemo(\n    () => applications.filter((app: Application) => selectedAppIds.has(app.id)),\n    [applications, selectedAppIds],\n  );\n\n  const deactivatableApps = useMemo(\n    () =>\n      selectedApps.filter(\n        (app: Application) =>\n          app.status !== \"INACTIVE\" && app.status !== \"REVOKED\",\n      ),\n    [selectedApps],\n  );\n\n  const allVisibleSelected =\n    filteredApps.length > 0 &&\n    filteredApps.every((app: Application) => selectedAppIds.has(app.id));\n  const partiallySelected =\n    filteredApps.some((app: Application) => selectedAppIds.has(app.id)) &&\n    !allVisibleSelected;\n\n  const toggleAppSelection = (appId: string, checked: boolean) => {\n    setSelectedAppIds((prev) => {\n      const next = new Set(prev);\n      if (checked) {\n        next.add(appId);\n      } else {\n        next.delete(appId);\n      }\n      return next;\n    });\n  };\n\n  const toggleAllVisible = (checked: boolean) => {\n    setSelectedAppIds((prev) => {\n      const next = new Set(prev);\n      filteredApps.forEach((app: Application) => {\n        if (checked) {\n          next.add(app.id);\n        } else {\n          next.delete(app.id);\n        }\n      });\n      return next;\n    });\n  };\n\n  const clearSelection = () => setSelectedAppIds(new Set());\n\n  const runBulkDeactivate = async () => {\n    if (deactivatableApps.length === 0) return;\n\n    const results = await Promise.allSettled(\n      deactivatableApps.map((app: Application) =>\n        deactivateApp({ variables: { id: app.id } }),\n      ),\n    );\n\n    const succeeded = results.filter(\n      (result: PromiseSettledResult<unknown>) => result.status === \"fulfilled\",\n    ).length;\n    const failed = results.length - succeeded;\n\n    setFeedback({\n      type: failed === 0 ? \"success\" : \"error\",\n      message: formatBulkResult(\"Deactivated\", succeeded, failed),\n    });\n    clearSelection();\n    setBulkAction(null);\n    await refetch();\n  };\n\n  const runBulkDelete = async () => {\n    if (selectedApps.length === 0) return;\n\n    const results = await Promise.allSettled(\n      selectedApps.map((app: Application) =>\n        deleteApplication({ variables: { id: app.id } }),\n      ),\n    );\n\n    const succeeded = results.filter(\n      (result: PromiseSettledResult<unknown>) => result.status === \"fulfilled\",\n    ).length;\n    const failed = results.length - succeeded;\n\n    setFeedback({\n      type: failed === 0 ? \"success\" : \"error\",\n      message: formatBulkResult(\"Deleted\", succeeded, failed),\n    });\n    clearSelection();\n    setBulkAction(null);\n    await refetch();\n  };\n\n  // Loading state\n  if (loading && !data) {\n    return (\n      <PageLayout\n        title={tr(\"devportal.myApplications\", \"My Applications\")}\n        description={tr(\n          \"devportal.manageYourApps\",\n          \"Manage your developer applications\",\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.loadingApplications\", \"Loading applications...\")}\n          </span>\n        </div>\n      </PageLayout>\n    );\n  }\n\n  // Error state\n  if (error) {\n    return (\n      <PageLayout\n        title={tr(\"devportal.myApplications\", \"My Applications\")}\n        description={tr(\n          \"devportal.manageYourApps\",\n          \"Manage your developer applications\",\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(\n              \"devportal.failedToLoadApplications\",\n              \"Failed to load applications\",\n            )}\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  return (\n    <PermissionGuard permission={DEVPORTAL_PERMISSIONS.APP_READ}>\n      <PageLayout\n        title={tr(\"devportal.myApplications\", \"My Applications\")}\n        description={tr(\n          \"devportal.manageYourApps\",\n          \"Manage your developer applications\",\n        )}\n        purpose={tr(\n          \"devportal.applicationsPurpose\",\n          \"Applications are the integrations you build on the platform — OAuth apps, store listings, and API consumers. Create one here to get client credentials, request scopes, and ship to the marketplace.\",\n        )}\n        actions={\n          <button\n            onClick={() => handleNavigate(\"/apps/new\")}\n            disabled={!createPerm.allowed}\n            aria-disabled={!createPerm.allowed}\n            title={\n              !createPerm.allowed\n                ? tr(\n                    \"devportal.common.noPermission\",\n                    \"You do not have permission to perform this action\",\n                  )\n                : undefined\n            }\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 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary\"\n          >\n            <Plus size={16} aria-hidden=\"true\" />\n            {tr(\"devportal.createApp\", \"Create App\")}\n          </button>\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={tr(\n                  \"devportal.searchApplications\",\n                  \"Search applications...\",\n                )}\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 AppStatus | \"\")\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=\"\">\n                {tr(\"devportal.allStatus\", \"All Status\")}\n              </option>\n              {Object.keys(APP_STATUS_COLORS).map((status) => (\n                <option key={status} value={status}>\n                  {status.replace(/_/g, \" \")}\n                </option>\n              ))}\n            </select>\n\n            {/* Type Filter */}\n            <select\n              value={typeFilter}\n              onChange={(e) => setTypeFilter(e.target.value as AppType | \"\")}\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=\"\">{tr(\"devportal.allTypes\", \"All Types\")}</option>\n              {Object.entries(APP_TYPE_LABELS).map(([value, label]) => (\n                <option key={value} value={value}>\n                  {label}\n                </option>\n              ))}\n            </select>\n          </div>\n\n          {/* View Toggle */}\n          <div className=\"flex items-center gap-1 rounded-md border p-1\">\n            <button\n              onClick={() => setViewMode(\"grid\")}\n              className={`rounded p-1.5 ${viewMode === \"grid\" ? \"bg-bg-sunken\" : \"hover:bg-bg-sunken/50\"}`}\n              title=\"Grid view\"\n            >\n              <Grid size={16} />\n            </button>\n            <button\n              onClick={() => setViewMode(\"list\")}\n              className={`rounded p-1.5 ${viewMode === \"list\" ? \"bg-bg-sunken\" : \"hover:bg-bg-sunken/50\"}`}\n              title=\"List view\"\n            >\n              <List size={16} />\n            </button>\n          </div>\n        </div>\n\n        {/* Summary Stats — primary emphasis zone */}\n        <EmphasisPanel className=\"mt-4\">\n          <div className=\"grid grid-cols-2 gap-4 sm:grid-cols-4\">\n            <GlassCard treatment=\"metric\" className=\"p-4\">\n              <p className=\"text-sm text-text-secondary\">\n                {tr(\"devportal.totalApps\", \"Total Apps\")}\n              </p>\n              <p className=\"mt-1 text-2xl font-semibold tabular-nums\">\n                {appStats.total}\n              </p>\n            </GlassCard>\n            <GlassCard treatment=\"metric\" className=\"p-4\">\n              <p className=\"text-sm text-status-success-text\">\n                {tr(\"devportal.active\", \"Active\")}\n              </p>\n              <p className=\"mt-1 text-2xl font-semibold tabular-nums\">\n                {appStats.active}\n              </p>\n            </GlassCard>\n            <GlassCard treatment=\"metric\" className=\"p-4\">\n              <p className=\"text-sm text-text-secondary\">\n                {tr(\"devportal.published\", \"Published\")}\n              </p>\n              <p className=\"mt-1 text-2xl font-semibold tabular-nums\">\n                {appStats.published}\n              </p>\n            </GlassCard>\n            <GlassCard treatment=\"metric\" className=\"p-4\">\n              <p className=\"text-sm text-text-secondary\">\n                {tr(\"devportal.draft\", \"Draft\")}\n              </p>\n              <p className=\"mt-1 text-2xl font-semibold tabular-nums\">\n                {appStats.draft}\n              </p>\n            </GlassCard>\n          </div>\n        </EmphasisPanel>\n\n        {feedback && (\n          <div\n            className={`rounded-lg border px-4 py-3 text-sm ${\n              feedback.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>{feedback.message}</span>\n              <button\n                onClick={() => setFeedback(null)}\n                className=\"text-xs font-medium underline underline-offset-2\"\n              >\n                Dismiss\n              </button>\n            </div>\n          </div>\n        )}\n\n        {filteredApps.length > 0 && (\n          <div className=\"rounded-card border border-border-seam bg-bg-surface p-4 shadow-[var(--shadow-pop)]\">\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={toggleAllVisible}\n                    ariaLabel=\"Select all visible applications\"\n                  />\n                  <span className=\"text-sm font-medium\">\n                    Select all visible\n                  </span>\n                </div>\n                {selectedAppIds.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                  {selectedAppIds.size} selected\n                </span>\n                <button\n                  onClick={() => setBulkAction(\"deactivate\")}\n                  disabled={\n                    deactivatableApps.length === 0 || !updatePerm.allowed\n                  }\n                  aria-disabled={\n                    deactivatableApps.length === 0 || !updatePerm.allowed\n                  }\n                  title={\n                    !updatePerm.allowed\n                      ? tr(\n                          \"devportal.common.noPermission\",\n                          \"You do not have permission to perform this action\",\n                        )\n                      : undefined\n                  }\n                  className=\"inline-flex items-center gap-2 rounded-md border border-status-warning-bg px-3 py-2 text-sm font-medium text-status-warning-text transition-colors hover:bg-status-warning-bg-subtle disabled:cursor-not-allowed disabled:opacity-50 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary\"\n                >\n                  <Archive size={16} aria-hidden=\"true\" />\n                  {tr(\"devportal.deactivateSelected\", \"Deactivate Selected\")}\n                  {deactivatableApps.length > 0\n                    ? ` (${deactivatableApps.length})`\n                    : \"\"}\n                </button>\n                <button\n                  onClick={() => setBulkAction(\"delete\")}\n                  disabled={selectedApps.length === 0 || !deletePerm.allowed}\n                  aria-disabled={\n                    selectedApps.length === 0 || !deletePerm.allowed\n                  }\n                  title={\n                    !deletePerm.allowed\n                      ? tr(\n                          \"devportal.common.noPermission\",\n                          \"You do not have permission to perform this action\",\n                        )\n                      : undefined\n                  }\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 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary\"\n                >\n                  <Trash2 size={16} aria-hidden=\"true\" />\n                  {tr(\"devportal.deleteSelected\", \"Delete Selected\")}\n                  {selectedApps.length > 0 ? ` (${selectedApps.length})` : \"\"}\n                </button>\n              </div>\n            </div>\n          </div>\n        )}\n\n        {/* Results count */}\n        <p className=\"text-sm text-text-secondary\">\n          {filteredApps.length} application\n          {filteredApps.length !== 1 ? \"s\" : \"\"} found\n        </p>\n\n        {/* Applications */}\n        {filteredApps.length > 0 ? (\n          viewMode === \"grid\" ? (\n            <div className=\"grid gap-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3\">\n              {filteredApps.map((app: Application) => (\n                <AppCard\n                  key={app.id}\n                  app={app}\n                  selected={selectedAppIds.has(app.id)}\n                  onToggleSelect={(checked) =>\n                    toggleAppSelection(app.id, checked)\n                  }\n                />\n              ))}\n            </div>\n          ) : (\n            <div className=\"space-y-2\">\n              {filteredApps.map((app: Application) => (\n                <AppListItem\n                  key={app.id}\n                  app={app}\n                  selected={selectedAppIds.has(app.id)}\n                  onToggleSelect={(checked) =>\n                    toggleAppSelection(app.id, checked)\n                  }\n                />\n              ))}\n            </div>\n          )\n        ) : (\n          <EmptyState\n            illustration={\n              searchQuery || statusFilter || typeFilter\n                ? \"empty-search\"\n                : \"empty-data\"\n            }\n            icon={<AppWindow size={32} />}\n            title={tr(\"devportal.noApplicationsFound\", \"No applications found\")}\n            description={\n              searchQuery || statusFilter || typeFilter\n                ? tr(\n                    \"devportal.tryAdjustingFilters\",\n                    \"Try adjusting your filters\",\n                  )\n                : tr(\n                    \"devportal.createFirstApp\",\n                    \"Create your first application to get started\",\n                  )\n            }\n            action={\n              !searchQuery && !statusFilter && !typeFilter ? (\n                <button\n                  onClick={() => handleNavigate(\"/apps/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.createApp\", \"Create App\")}\n                </button>\n              ) : undefined\n            }\n          />\n        )}\n\n        <ConfirmDialog\n          open={bulkAction === \"deactivate\"}\n          onOpenChange={(open) => {\n            if (!open) setBulkAction(null);\n          }}\n          onConfirm={runBulkDeactivate}\n          title=\"Deactivate selected applications\"\n          description={`Deactivate ${deactivatableApps.length} selected application${deactivatableApps.length === 1 ? \"\" : \"s\"}? Users and integrations may lose access until these apps are re-enabled.`}\n          confirmLabel=\"Deactivate\"\n          cancelLabel=\"Cancel\"\n          variant=\"warning\"\n        />\n\n        <ConfirmDialog\n          open={bulkAction === \"delete\"}\n          onOpenChange={(open) => {\n            if (!open) setBulkAction(null);\n          }}\n          onConfirm={runBulkDelete}\n          title=\"Delete selected applications\"\n          description={`Delete ${selectedApps.length} selected application${selectedApps.length === 1 ? \"\" : \"s\"}? This cannot be undone.`}\n          confirmLabel=\"Delete\"\n          cancelLabel=\"Cancel\"\n          variant=\"danger\"\n        />\n      </PageLayout>\n    </PermissionGuard>\n  );\n};\n"],"mappings":"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"}

package/dist/devportal/pages/CreateApiKeyPage.js

@@ -106,25 +106,25 @@ var w = () => {
 								children: [/* @__PURE__ */ b("div", {
 									className: "flex items-center gap-2",
 									children: [/* @__PURE__ */ y("span", {
-										className: "text-xs font-medium text-muted-foreground",
+										className: "text-xs font-medium text-text-secondary",
 										children: "Key ID:"
 									}), /* @__PURE__ */ y("code", {
-										className: "rounded bg-muted px-2 py-0.5 text-sm",
+										className: "rounded bg-bg-sunken px-2 py-0.5 text-sm",
 										children: D.keyId
 									})]
 								}), /* @__PURE__ */ b("div", {
 									className: "flex items-center gap-2",
 									children: [/* @__PURE__ */ y("span", {
-										className: "text-xs font-medium text-muted-foreground",
+										className: "text-xs font-medium text-text-secondary",
 										children: "API Key:"
 									}), /* @__PURE__ */ y("code", {
-										className: "rounded bg-muted px-2 py-0.5 text-sm",
+										className: "rounded bg-bg-sunken px-2 py-0.5 text-sm",
 										children: D.apiKey
 									})]
 								})]
 							}),
 							/* @__PURE__ */ y("p", {
-								className: "text-xs text-muted-foreground mt-2",
+								className: "text-xs text-text-secondary mt-2",
 								children: "Use the API key and secret to authenticate your requests."
 							})
 						]
@@ -134,7 +134,7 @@ var w = () => {
 					className: "flex gap-3",
 					children: /* @__PURE__ */ y("button", {
 						onClick: K,
-						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",
+						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",
 						children: "Continue to API Keys"
 					})
 				})
@@ -145,6 +145,7 @@ var w = () => {
 		children: /* @__PURE__ */ y(i, {
 			title: "Generate API Key",
 			description: "Generate a new API key for programmatic access",
+			purpose: "Create a key your backend or scripts can use to call the API without a logged-in user. Scope it to one app and the minimum permissions it needs — the secret is shown only once at creation, so copy it somewhere safe.",
 			backLink: "/api-keys",
 			backLabel: "Back to API Keys",
 			children: /* @__PURE__ */ b("form", {
@@ -164,8 +165,8 @@ var w = () => {
 							className: "space-y-4",
 							children: [L ? /* @__PURE__ */ b("div", {
 								className: "flex items-center gap-2 py-2",
-								children: [/* @__PURE__ */ y(g, { className: "h-4 w-4 animate-spin text-muted-foreground" }), /* @__PURE__ */ y("span", {
-									className: "text-sm text-muted-foreground",
+								children: [/* @__PURE__ */ y(g, { className: "h-4 w-4 animate-spin text-text-secondary" }), /* @__PURE__ */ y("span", {
+									className: "text-sm text-text-secondary",
 									children: "Loading apps..."
 								})]
 							}) : R.length === 0 ? /* @__PURE__ */ y(u, {
@@ -268,12 +269,12 @@ var w = () => {
 						children: [/* @__PURE__ */ b("button", {
 							type: "button",
 							onClick: H,
-							className: "inline-flex items-center gap-2 rounded-md border px-4 py-2 text-sm font-medium hover:bg-muted transition-colors",
+							className: "inline-flex items-center gap-2 rounded-md border px-4 py-2 text-sm font-medium hover:bg-bg-sunken transition-colors",
 							children: [/* @__PURE__ */ y(v, { size: 16 }), "Cancel"]
 						}), /* @__PURE__ */ b("button", {
 							type: "submit",
 							disabled: P || R.length === 0,
-							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 disabled:opacity-50",
+							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 disabled:opacity-50",
 							children: [/* @__PURE__ */ y(_, { size: 16 }), P ? "Generating..." : "Generate API Key"]
 						})]
 					})

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

@@ -1 +1 @@
-{"version":3,"file":"CreateApiKeyPage.js","names":[],"sources":["../../../src/devportal/pages/CreateApiKeyPage.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport { useState } from \"react\";\nimport { Save, X, Loader2 } from \"lucide-react\";\nimport { useI18n } from \"@burdenoff/fe-libs/shared/providers/shell/I18nProvider\";\nimport { OptionalFields } from \"@burdenoff/fe-libs/ui\";\nimport { PageLayout, PageSection } from \"../components/PageLayout\";\nimport { InputField, SelectField, TagInput } from \"../components/FormField\";\nimport { NewSecretAlert } from \"../components/SecretDisplay\";\nimport { Alert } from \"../components/ConfirmDialog\";\nimport { useDevportal } from \"../providers/DevportalProvider\";\nimport { PermissionGuard } from \"../components\";\nimport { DEVPORTAL_PERMISSIONS } from \"../constants/permissions\";\nimport { useGenerateApiKeyMutation, useCurrentUserAppsQuery } from \"../hooks\";\nimport { useDevportalEventBus } from \"../events\";\nimport { executeRecaptcha } from \"../utils/recaptcha\";\n\ninterface CreateApiKeyFormData {\n  appId: string;\n  name: string;\n  scopes: string[];\n  expiresIn: string;\n}\n\nconst EXPIRATION_DURATIONS: Record<string, number | null> = {\n  \"30days\": 30 * 24 * 60 * 60 * 1000,\n  \"90days\": 90 * 24 * 60 * 60 * 1000,\n  \"180days\": 180 * 24 * 60 * 60 * 1000,\n  \"1year\": 365 * 24 * 60 * 60 * 1000,\n  \"2years\": 2 * 365 * 24 * 60 * 60 * 1000,\n  never: null,\n};\n\nfunction computeExpiresAt(expiresIn: string): string | undefined {\n  const duration = EXPIRATION_DURATIONS[expiresIn];\n  if (duration == null) return undefined;\n  return new Date(Date.now() + duration).toISOString();\n}\n\n/**\n * Page for generating a new API key via auth-svc.\n *\n * Previously created API keys through devportal-svc per application;\n * now generates keys through auth-svc's generateAPIKey mutation.\n * The user selects which OAuth app to associate the key with.\n */\nexport const CreateApiKeyPage: 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 { navigate, basePath } = useDevportal();\n  const [newApiKey, setNewApiKey] = useState<{\n    apiKey: string;\n    apiSecret: string;\n    keyId: string;\n  } | null>(null);\n  const [errors, setErrors] = useState<Record<string, string>>({});\n  const [mutationError, setMutationError] = useState<string | null>(null);\n\n  const [generateApiKey, { loading: isSubmitting }] =\n    useGenerateApiKeyMutation();\n  const bus = useDevportalEventBus();\n\n  // Fetch user's apps to populate the app selector\n  const { data: appsData, loading: appsLoading } = useCurrentUserAppsQuery({\n    fetchPolicy: \"cache-and-network\",\n  });\n\n  const apps: Array<{ id: string; name: string; clientId: string }> =\n    appsData?.currentUserApps?.apps.map(\n      (app: { id: string; name: string; clientId: string }) => ({\n        id: app.id,\n        name: app.name,\n        clientId: app.clientId,\n      }),\n    ) ?? [];\n\n  const [formData, setFormData] = useState<CreateApiKeyFormData>({\n    appId: \"\",\n    name: \"\",\n    scopes: [],\n    expiresIn: \"1year\",\n  });\n\n  const handleNavigate = (path: string) => {\n    navigate?.(`${basePath}${path}`);\n  };\n\n  const handleCancel = () => {\n    handleNavigate(\"/api-keys\");\n  };\n\n  const updateField = <K extends keyof CreateApiKeyFormData>(\n    field: K,\n    value: CreateApiKeyFormData[K],\n  ) => {\n    setFormData((prev) => ({ ...prev, [field]: value }));\n    if (errors[field]) {\n      setErrors((prev) => ({ ...prev, [field]: \"\" }));\n    }\n    if (mutationError) {\n      setMutationError(null);\n    }\n  };\n\n  const validateForm = (): boolean => {\n    const newErrors: Record<string, string> = {};\n\n    if (!formData.appId) {\n      newErrors.appId = tr(\n        \"devportal.selectAppError\",\n        \"Please select an app to associate this key with\",\n      );\n    }\n\n    if (!formData.name.trim()) {\n      newErrors.name = tr(\n        \"devportal.apiKeyNameRequired\",\n        \"API key name is required\",\n      );\n    }\n\n    if (formData.scopes.length === 0) {\n      newErrors.scopes = tr(\n        \"devportal.atLeastOneScopeRequired\",\n        \"At least one scope is required\",\n      );\n    }\n\n    setErrors(newErrors);\n    return Object.keys(newErrors).length === 0;\n  };\n\n  const handleSubmit = async (e: React.FormEvent) => {\n    e.preventDefault();\n\n    if (!validateForm()) return;\n\n    setMutationError(null);\n\n    try {\n      const expiresAt = computeExpiresAt(formData.expiresIn);\n      const recaptchaToken = await executeRecaptcha(\"api_key_create\");\n      const input = {\n        appId: formData.appId,\n        name: formData.name.trim(),\n        scope: formData.scopes,\n        expiresAt,\n        ...(recaptchaToken ? { recaptchaToken } : {}),\n      };\n\n      const { data } = await generateApiKey({\n        variables: {\n          input,\n        },\n      });\n\n      if (data?.generateAPIKey) {\n        bus.emit(\"devportal.apikey.generated\", {\n          keyId: data.generateAPIKey.keyId,\n          appId: formData.appId,\n        });\n        setNewApiKey({\n          apiKey: data.generateAPIKey.apiKey,\n          apiSecret: data.generateAPIKey.apiSecret,\n          keyId: data.generateAPIKey.keyId,\n        });\n      }\n    } catch (err) {\n      const message =\n        err instanceof Error\n          ? err.message\n          : tr(\n              \"devportal.failedToGenerateApiKey\",\n              \"Failed to generate API key\",\n            );\n      setMutationError(message);\n    }\n  };\n\n  const handleKeyDismiss = () => {\n    handleNavigate(\"/api-keys\");\n  };\n\n  const expirationOptions = [\n    { value: \"30days\", label: \"30 days\" },\n    { value: \"90days\", label: \"90 days\" },\n    { value: \"180days\", label: \"180 days\" },\n    { value: \"1year\", label: \"1 year\" },\n    { value: \"2years\", label: \"2 years\" },\n    { value: \"never\", label: \"Never expires\" },\n  ];\n\n  if (newApiKey) {\n    return (\n      <PageLayout\n        title=\"API Key Generated\"\n        description=\"Your new API key has been generated successfully\"\n      >\n        <div className=\"max-w-2xl space-y-6\">\n          <NewSecretAlert\n            title=\"API Key & Secret\"\n            secret={newApiKey.apiSecret}\n            description=\"Store this secret securely — you won't be able to see it again.\"\n            onDismiss={handleKeyDismiss}\n          />\n\n          <Alert variant=\"info\" title=\"Usage Instructions\">\n            <div className=\"mt-2 space-y-2\">\n              <p>Your API key details:</p>\n              <div className=\"space-y-1\">\n                <div className=\"flex items-center gap-2\">\n                  <span className=\"text-xs font-medium text-muted-foreground\">\n                    Key ID:\n                  </span>\n                  <code className=\"rounded bg-muted px-2 py-0.5 text-sm\">\n                    {newApiKey.keyId}\n                  </code>\n                </div>\n                <div className=\"flex items-center gap-2\">\n                  <span className=\"text-xs font-medium text-muted-foreground\">\n                    API Key:\n                  </span>\n                  <code className=\"rounded bg-muted px-2 py-0.5 text-sm\">\n                    {newApiKey.apiKey}\n                  </code>\n                </div>\n              </div>\n              <p className=\"text-xs text-muted-foreground mt-2\">\n                Use the API key and secret to authenticate your requests.\n              </p>\n            </div>\n          </Alert>\n\n          <div className=\"flex gap-3\">\n            <button\n              onClick={handleKeyDismiss}\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              Continue to API Keys\n            </button>\n          </div>\n        </div>\n      </PageLayout>\n    );\n  }\n\n  return (\n    <PermissionGuard permission={DEVPORTAL_PERMISSIONS.APP_UPDATE}>\n      <PageLayout\n        title=\"Generate API Key\"\n        description=\"Generate a new API key for programmatic access\"\n        backLink=\"/api-keys\"\n        backLabel=\"Back to API Keys\"\n      >\n        <form onSubmit={handleSubmit} className=\"max-w-3xl space-y-8\">\n          {/* Mutation error */}\n          {mutationError && (\n            <Alert\n              variant=\"error\"\n              title=\"Error Generating API Key\"\n              onDismiss={() => setMutationError(null)}\n            >\n              {mutationError}\n            </Alert>\n          )}\n\n          {/* Basic Information */}\n          <PageSection\n            title=\"Basic Information\"\n            description=\"Configure the API key settings\"\n          >\n            <div className=\"space-y-4\">\n              {/* App Selector */}\n              {appsLoading ? (\n                <div className=\"flex items-center gap-2 py-2\">\n                  <Loader2 className=\"h-4 w-4 animate-spin text-muted-foreground\" />\n                  <span className=\"text-sm text-muted-foreground\">\n                    Loading apps...\n                  </span>\n                </div>\n              ) : apps.length === 0 ? (\n                <Alert variant=\"warning\" title=\"No Apps Found\">\n                  <p>\n                    You need to create an OAuth app first before generating API\n                    keys.{\" \"}\n                    <button\n                      type=\"button\"\n                      onClick={() => handleNavigate(\"/oauth/new\")}\n                      className=\"text-primary underline hover:no-underline\"\n                    >\n                      Create an app\n                    </button>\n                  </p>\n                </Alert>\n              ) : (\n                <SelectField\n                  label=\"App\"\n                  value={formData.appId}\n                  onChange={(e) => updateField(\"appId\", e.target.value)}\n                  options={apps.map((app) => ({\n                    value: app.id,\n                    label: `${app.name} (${app.clientId})`,\n                  }))}\n                  placeholder=\"Select an app…\"\n                  error={errors.appId}\n                  required\n                  hint=\"The OAuth app this API key will be associated with\"\n                />\n              )}\n\n              <InputField\n                label=\"Key Name\"\n                placeholder=\"e.g., Production Backend Key\"\n                value={formData.name}\n                onChange={(e) => updateField(\"name\", e.target.value)}\n                error={errors.name}\n                required\n                hint=\"A descriptive name to identify this key\"\n              />\n            </div>\n          </PageSection>\n\n          {/* Scopes */}\n          <PageSection\n            title=\"Scopes\"\n            description=\"Define what this API key can access\"\n          >\n            <div className=\"space-y-4\">\n              <TagInput\n                label=\"Scopes\"\n                value={formData.scopes}\n                onChange={(values) => updateField(\"scopes\", values)}\n                placeholder=\"e.g., workspace:read, vibecontrols:write\"\n                hint=\"Press Enter to add each scope. At least one scope is required.\"\n                error={errors.scopes}\n              />\n            </div>\n          </PageSection>\n\n          {/* Advanced: rate-limit overrides / allowed origins / scope tuning / expiration — collapse the long-tail knobs */}\n          <OptionalFields\n            title=\"Advanced settings\"\n            description=\"Rate-limit overrides, allowed origins, scope tuning, and expiration.\"\n          >\n            <PageSection\n              title=\"Key Expiration\"\n              description=\"Set when this key should expire\"\n            >\n              <SelectField\n                label=\"Expires In\"\n                value={formData.expiresIn}\n                onChange={(e) => updateField(\"expiresIn\", e.target.value)}\n                options={expirationOptions}\n                hint=\"Keys can be revoked at any time regardless of expiration\"\n              />\n\n              {formData.expiresIn === \"never\" && (\n                <Alert variant=\"warning\" className=\"mt-4\">\n                  Non-expiring keys are a security risk. Consider setting an\n                  expiration and rotating keys periodically.\n                </Alert>\n              )}\n            </PageSection>\n          </OptionalFields>\n\n          {/* Actions */}\n          <div className=\"flex items-center justify-end gap-3 border-t pt-6\">\n            <button\n              type=\"button\"\n              onClick={handleCancel}\n              className=\"inline-flex items-center gap-2 rounded-md border px-4 py-2 text-sm font-medium hover:bg-muted transition-colors\"\n            >\n              <X size={16} />\n              Cancel\n            </button>\n            <button\n              type=\"submit\"\n              disabled={isSubmitting || apps.length === 0}\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 disabled:opacity-50\"\n            >\n              <Save size={16} />\n              {isSubmitting ? \"Generating...\" : \"Generate API Key\"}\n            </button>\n          </div>\n        </form>\n      </PageLayout>\n    </PermissionGuard>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"CreateApiKeyPage.js","names":[],"sources":["../../../src/devportal/pages/CreateApiKeyPage.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport { useState } from \"react\";\nimport { Save, X, Loader2 } from \"lucide-react\";\nimport { useI18n } from \"@burdenoff/fe-libs/shared/providers/shell/I18nProvider\";\nimport { OptionalFields } from \"@burdenoff/fe-libs/ui\";\nimport { PageLayout, PageSection } from \"../components/PageLayout\";\nimport { InputField, SelectField, TagInput } from \"../components/FormField\";\nimport { NewSecretAlert } from \"../components/SecretDisplay\";\nimport { Alert } from \"../components/ConfirmDialog\";\nimport { useDevportal } from \"../providers/DevportalProvider\";\nimport { PermissionGuard } from \"../components\";\nimport { DEVPORTAL_PERMISSIONS } from \"../constants/permissions\";\nimport { useGenerateApiKeyMutation, useCurrentUserAppsQuery } from \"../hooks\";\nimport { useDevportalEventBus } from \"../events\";\nimport { executeRecaptcha } from \"../utils/recaptcha\";\n\ninterface CreateApiKeyFormData {\n  appId: string;\n  name: string;\n  scopes: string[];\n  expiresIn: string;\n}\n\nconst EXPIRATION_DURATIONS: Record<string, number | null> = {\n  \"30days\": 30 * 24 * 60 * 60 * 1000,\n  \"90days\": 90 * 24 * 60 * 60 * 1000,\n  \"180days\": 180 * 24 * 60 * 60 * 1000,\n  \"1year\": 365 * 24 * 60 * 60 * 1000,\n  \"2years\": 2 * 365 * 24 * 60 * 60 * 1000,\n  never: null,\n};\n\nfunction computeExpiresAt(expiresIn: string): string | undefined {\n  const duration = EXPIRATION_DURATIONS[expiresIn];\n  if (duration == null) return undefined;\n  return new Date(Date.now() + duration).toISOString();\n}\n\n/**\n * Page for generating a new API key via auth-svc.\n *\n * Previously created API keys through devportal-svc per application;\n * now generates keys through auth-svc's generateAPIKey mutation.\n * The user selects which OAuth app to associate the key with.\n */\nexport const CreateApiKeyPage: 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 { navigate, basePath } = useDevportal();\n  const [newApiKey, setNewApiKey] = useState<{\n    apiKey: string;\n    apiSecret: string;\n    keyId: string;\n  } | null>(null);\n  const [errors, setErrors] = useState<Record<string, string>>({});\n  const [mutationError, setMutationError] = useState<string | null>(null);\n\n  const [generateApiKey, { loading: isSubmitting }] =\n    useGenerateApiKeyMutation();\n  const bus = useDevportalEventBus();\n\n  // Fetch user's apps to populate the app selector\n  const { data: appsData, loading: appsLoading } = useCurrentUserAppsQuery({\n    fetchPolicy: \"cache-and-network\",\n  });\n\n  const apps: Array<{ id: string; name: string; clientId: string }> =\n    appsData?.currentUserApps?.apps.map(\n      (app: { id: string; name: string; clientId: string }) => ({\n        id: app.id,\n        name: app.name,\n        clientId: app.clientId,\n      }),\n    ) ?? [];\n\n  const [formData, setFormData] = useState<CreateApiKeyFormData>({\n    appId: \"\",\n    name: \"\",\n    scopes: [],\n    expiresIn: \"1year\",\n  });\n\n  const handleNavigate = (path: string) => {\n    navigate?.(`${basePath}${path}`);\n  };\n\n  const handleCancel = () => {\n    handleNavigate(\"/api-keys\");\n  };\n\n  const updateField = <K extends keyof CreateApiKeyFormData>(\n    field: K,\n    value: CreateApiKeyFormData[K],\n  ) => {\n    setFormData((prev) => ({ ...prev, [field]: value }));\n    if (errors[field]) {\n      setErrors((prev) => ({ ...prev, [field]: \"\" }));\n    }\n    if (mutationError) {\n      setMutationError(null);\n    }\n  };\n\n  const validateForm = (): boolean => {\n    const newErrors: Record<string, string> = {};\n\n    if (!formData.appId) {\n      newErrors.appId = tr(\n        \"devportal.selectAppError\",\n        \"Please select an app to associate this key with\",\n      );\n    }\n\n    if (!formData.name.trim()) {\n      newErrors.name = tr(\n        \"devportal.apiKeyNameRequired\",\n        \"API key name is required\",\n      );\n    }\n\n    if (formData.scopes.length === 0) {\n      newErrors.scopes = tr(\n        \"devportal.atLeastOneScopeRequired\",\n        \"At least one scope is required\",\n      );\n    }\n\n    setErrors(newErrors);\n    return Object.keys(newErrors).length === 0;\n  };\n\n  const handleSubmit = async (e: React.FormEvent) => {\n    e.preventDefault();\n\n    if (!validateForm()) return;\n\n    setMutationError(null);\n\n    try {\n      const expiresAt = computeExpiresAt(formData.expiresIn);\n      const recaptchaToken = await executeRecaptcha(\"api_key_create\");\n      const input = {\n        appId: formData.appId,\n        name: formData.name.trim(),\n        scope: formData.scopes,\n        expiresAt,\n        ...(recaptchaToken ? { recaptchaToken } : {}),\n      };\n\n      const { data } = await generateApiKey({\n        variables: {\n          input,\n        },\n      });\n\n      if (data?.generateAPIKey) {\n        bus.emit(\"devportal.apikey.generated\", {\n          keyId: data.generateAPIKey.keyId,\n          appId: formData.appId,\n        });\n        setNewApiKey({\n          apiKey: data.generateAPIKey.apiKey,\n          apiSecret: data.generateAPIKey.apiSecret,\n          keyId: data.generateAPIKey.keyId,\n        });\n      }\n    } catch (err) {\n      const message =\n        err instanceof Error\n          ? err.message\n          : tr(\n              \"devportal.failedToGenerateApiKey\",\n              \"Failed to generate API key\",\n            );\n      setMutationError(message);\n    }\n  };\n\n  const handleKeyDismiss = () => {\n    handleNavigate(\"/api-keys\");\n  };\n\n  const expirationOptions = [\n    { value: \"30days\", label: \"30 days\" },\n    { value: \"90days\", label: \"90 days\" },\n    { value: \"180days\", label: \"180 days\" },\n    { value: \"1year\", label: \"1 year\" },\n    { value: \"2years\", label: \"2 years\" },\n    { value: \"never\", label: \"Never expires\" },\n  ];\n\n  if (newApiKey) {\n    return (\n      <PageLayout\n        title=\"API Key Generated\"\n        description=\"Your new API key has been generated successfully\"\n      >\n        <div className=\"max-w-2xl space-y-6\">\n          <NewSecretAlert\n            title=\"API Key & Secret\"\n            secret={newApiKey.apiSecret}\n            description=\"Store this secret securely — you won't be able to see it again.\"\n            onDismiss={handleKeyDismiss}\n          />\n\n          <Alert variant=\"info\" title=\"Usage Instructions\">\n            <div className=\"mt-2 space-y-2\">\n              <p>Your API key details:</p>\n              <div className=\"space-y-1\">\n                <div className=\"flex items-center gap-2\">\n                  <span className=\"text-xs font-medium text-text-secondary\">\n                    Key ID:\n                  </span>\n                  <code className=\"rounded bg-bg-sunken px-2 py-0.5 text-sm\">\n                    {newApiKey.keyId}\n                  </code>\n                </div>\n                <div className=\"flex items-center gap-2\">\n                  <span className=\"text-xs font-medium text-text-secondary\">\n                    API Key:\n                  </span>\n                  <code className=\"rounded bg-bg-sunken px-2 py-0.5 text-sm\">\n                    {newApiKey.apiKey}\n                  </code>\n                </div>\n              </div>\n              <p className=\"text-xs text-text-secondary mt-2\">\n                Use the API key and secret to authenticate your requests.\n              </p>\n            </div>\n          </Alert>\n\n          <div className=\"flex gap-3\">\n            <button\n              onClick={handleKeyDismiss}\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              Continue to API Keys\n            </button>\n          </div>\n        </div>\n      </PageLayout>\n    );\n  }\n\n  return (\n    <PermissionGuard permission={DEVPORTAL_PERMISSIONS.APP_UPDATE}>\n      <PageLayout\n        title=\"Generate API Key\"\n        description=\"Generate a new API key for programmatic access\"\n        purpose=\"Create a key your backend or scripts can use to call the API without a logged-in user. Scope it to one app and the minimum permissions it needs — the secret is shown only once at creation, so copy it somewhere safe.\"\n        backLink=\"/api-keys\"\n        backLabel=\"Back to API Keys\"\n      >\n        <form onSubmit={handleSubmit} className=\"max-w-3xl space-y-8\">\n          {/* Mutation error */}\n          {mutationError && (\n            <Alert\n              variant=\"error\"\n              title=\"Error Generating API Key\"\n              onDismiss={() => setMutationError(null)}\n            >\n              {mutationError}\n            </Alert>\n          )}\n\n          {/* Basic Information */}\n          <PageSection\n            title=\"Basic Information\"\n            description=\"Configure the API key settings\"\n          >\n            <div className=\"space-y-4\">\n              {/* App Selector */}\n              {appsLoading ? (\n                <div className=\"flex items-center gap-2 py-2\">\n                  <Loader2 className=\"h-4 w-4 animate-spin text-text-secondary\" />\n                  <span className=\"text-sm text-text-secondary\">\n                    Loading apps...\n                  </span>\n                </div>\n              ) : apps.length === 0 ? (\n                <Alert variant=\"warning\" title=\"No Apps Found\">\n                  <p>\n                    You need to create an OAuth app first before generating API\n                    keys.{\" \"}\n                    <button\n                      type=\"button\"\n                      onClick={() => handleNavigate(\"/oauth/new\")}\n                      className=\"text-primary underline hover:no-underline\"\n                    >\n                      Create an app\n                    </button>\n                  </p>\n                </Alert>\n              ) : (\n                <SelectField\n                  label=\"App\"\n                  value={formData.appId}\n                  onChange={(e) => updateField(\"appId\", e.target.value)}\n                  options={apps.map((app) => ({\n                    value: app.id,\n                    label: `${app.name} (${app.clientId})`,\n                  }))}\n                  placeholder=\"Select an app…\"\n                  error={errors.appId}\n                  required\n                  hint=\"The OAuth app this API key will be associated with\"\n                />\n              )}\n\n              <InputField\n                label=\"Key Name\"\n                placeholder=\"e.g., Production Backend Key\"\n                value={formData.name}\n                onChange={(e) => updateField(\"name\", e.target.value)}\n                error={errors.name}\n                required\n                hint=\"A descriptive name to identify this key\"\n              />\n            </div>\n          </PageSection>\n\n          {/* Scopes */}\n          <PageSection\n            title=\"Scopes\"\n            description=\"Define what this API key can access\"\n          >\n            <div className=\"space-y-4\">\n              <TagInput\n                label=\"Scopes\"\n                value={formData.scopes}\n                onChange={(values) => updateField(\"scopes\", values)}\n                placeholder=\"e.g., workspace:read, vibecontrols:write\"\n                hint=\"Press Enter to add each scope. At least one scope is required.\"\n                error={errors.scopes}\n              />\n            </div>\n          </PageSection>\n\n          {/* Advanced: rate-limit overrides / allowed origins / scope tuning / expiration — collapse the long-tail knobs */}\n          <OptionalFields\n            title=\"Advanced settings\"\n            description=\"Rate-limit overrides, allowed origins, scope tuning, and expiration.\"\n          >\n            <PageSection\n              title=\"Key Expiration\"\n              description=\"Set when this key should expire\"\n            >\n              <SelectField\n                label=\"Expires In\"\n                value={formData.expiresIn}\n                onChange={(e) => updateField(\"expiresIn\", e.target.value)}\n                options={expirationOptions}\n                hint=\"Keys can be revoked at any time regardless of expiration\"\n              />\n\n              {formData.expiresIn === \"never\" && (\n                <Alert variant=\"warning\" className=\"mt-4\">\n                  Non-expiring keys are a security risk. Consider setting an\n                  expiration and rotating keys periodically.\n                </Alert>\n              )}\n            </PageSection>\n          </OptionalFields>\n\n          {/* Actions */}\n          <div className=\"flex items-center justify-end gap-3 border-t pt-6\">\n            <button\n              type=\"button\"\n              onClick={handleCancel}\n              className=\"inline-flex items-center gap-2 rounded-md border px-4 py-2 text-sm font-medium hover:bg-bg-sunken transition-colors\"\n            >\n              <X size={16} />\n              Cancel\n            </button>\n            <button\n              type=\"submit\"\n              disabled={isSubmitting || apps.length === 0}\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 disabled:opacity-50\"\n            >\n              <Save size={16} />\n              {isSubmitting ? \"Generating...\" : \"Generate API Key\"}\n            </button>\n          </div>\n        </form>\n      </PageLayout>\n    </PermissionGuard>\n  );\n};\n"],"mappings":"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"}

package/dist/devportal/pages/CreateApplicationPage.js

@@ -109,30 +109,30 @@ var k = [
 ], A = ({ icon: e, title: n, description: r, bullets: i, selected: a, onClick: o }) => /* @__PURE__ */ T("button", {
 	type: "button",
 	onClick: o,
-	className: t("relative flex flex-col gap-3 rounded-xl border-2 p-6 text-left transition-all hover:border-primary/50 hover:shadow-sm", a ? "border-primary bg-primary/5 shadow-sm" : "border-border bg-card"),
+	className: t("relative flex flex-col gap-3 rounded-xl border-2 p-6 text-left transition-all hover:border-primary/50 hover:shadow-sm", a ? "border-primary bg-action-primary-bg/5 shadow-sm" : "border-border-subtle bg-bg-surface"),
 	children: [
 		a && /* @__PURE__ */ w("span", {
-			className: "absolute top-4 right-4 flex h-5 w-5 items-center justify-center rounded-full bg-primary text-primary-foreground",
+			className: "absolute top-4 right-4 flex h-5 w-5 items-center justify-center rounded-full bg-action-primary-bg text-action-primary-text",
 			children: /* @__PURE__ */ w(g, { size: 12 })
 		}),
 		/* @__PURE__ */ w("div", {
-			className: "flex h-10 w-10 items-center justify-center rounded-lg bg-muted",
+			className: "flex h-10 w-10 items-center justify-center rounded-lg bg-bg-sunken",
 			children: /* @__PURE__ */ w(e, {
 				size: 22,
-				className: "text-foreground"
+				className: "text-text-primary"
 			})
 		}),
 		/* @__PURE__ */ T("div", { children: [/* @__PURE__ */ w("p", {
-			className: "font-semibold text-foreground",
+			className: "font-semibold text-text-primary",
 			children: n
 		}), /* @__PURE__ */ w("p", {
-			className: "mt-1 text-sm text-muted-foreground",
+			className: "mt-1 text-sm text-text-secondary",
 			children: r
 		})] }),
 		/* @__PURE__ */ w("ul", {
 			className: "mt-1 space-y-1",
 			children: i.map((e) => /* @__PURE__ */ T("li", {
-				className: "flex items-center gap-2 text-xs text-muted-foreground",
+				className: "flex items-center gap-2 text-xs text-text-secondary",
 				children: [/* @__PURE__ */ w(_, {
 					size: 12,
 					className: "flex-shrink-0 text-primary"
@@ -151,29 +151,29 @@ var k = [
 		write: "Read & Write"
 	};
 	return /* @__PURE__ */ w("div", {
-		className: "overflow-x-auto rounded-lg border border-border",
+		className: "overflow-x-auto rounded-lg border border-border-subtle",
 		children: /* @__PURE__ */ T("table", {
 			className: "w-full text-sm",
 			children: [/* @__PURE__ */ w("thead", { children: /* @__PURE__ */ T("tr", {
-				className: "border-b border-border bg-muted/50",
+				className: "border-b border-border-subtle bg-bg-sunken/50",
 				children: [/* @__PURE__ */ w("th", {
-					className: "px-4 py-3 text-left font-medium text-muted-foreground w-1/2",
+					className: "px-4 py-3 text-left font-medium text-text-secondary w-1/2",
 					children: "Resource"
 				}), n.map((e) => /* @__PURE__ */ w("th", {
-					className: "px-4 py-3 text-center font-medium text-muted-foreground",
+					className: "px-4 py-3 text-center font-medium text-text-secondary",
 					children: r[e]
 				}, e))]
 			}) }), /* @__PURE__ */ w("tbody", {
 				className: "divide-y divide-border",
 				children: E.map((r) => /* @__PURE__ */ T("tr", {
-					className: "hover:bg-muted/30 transition-colors",
+					className: "hover:bg-bg-sunken/30 transition-colors",
 					children: [/* @__PURE__ */ T("td", {
 						className: "px-4 py-3",
 						children: [/* @__PURE__ */ w("p", {
-							className: "font-medium text-foreground",
+							className: "font-medium text-text-primary",
 							children: r.label
 						}), /* @__PURE__ */ w("p", {
-							className: "text-xs text-muted-foreground",
+							className: "text-xs text-text-secondary",
 							children: r.description
 						})]
 					}), n.map((n) => /* @__PURE__ */ w("td", {
@@ -275,6 +275,7 @@ var k = [
 		children: /* @__PURE__ */ w(a, {
 			title: "What do you want to build?",
 			description: "Choose a builder type to get started",
+			purpose: "Pick the kind of integration you are creating — a standard app, a Node package, or a workflow. Your choice sets up the right defaults (credentials, permissions, and where it can be installed) so you only fill in what that type actually needs.",
 			backLink: `${g}/apps`,
 			backLabel: "Back to Applications",
 			children: /* @__PURE__ */ T("div", {
@@ -323,7 +324,7 @@ var k = [
 						})
 					]
 				}), /* @__PURE__ */ T("div", {
-					className: "rounded-lg border border-border-subtle bg-muted/30 p-4 flex gap-3 text-sm text-muted-foreground",
+					className: "rounded-lg border border-border-subtle bg-bg-sunken/30 p-4 flex gap-3 text-sm text-text-secondary",
 					children: [/* @__PURE__ */ w(y, {
 						size: 16,
 						className: "flex-shrink-0 mt-0.5"
@@ -338,6 +339,7 @@ var k = [
 		children: /* @__PURE__ */ w(a, {
 			title: `Create ${$}`,
 			description: P === "app" ? "Register a new app integration with OAuth permissions" : P === "node" ? "Register a new FluidGrids node package" : "Register a new reusable automation workflow",
+			purpose: "Give your integration a name, description, and the permissions it will request. Once created you will get credentials and can configure webhooks, then publish it to the marketplace when it is ready for users.",
 			backLink: `${g}/apps`,
 			backLabel: "Back to Applications",
 			children: /* @__PURE__ */ T("form", {
@@ -349,10 +351,10 @@ var k = [
 						children: [/* @__PURE__ */ T("button", {
 							type: "button",
 							onClick: () => F(null),
-							className: "flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground transition-colors",
+							className: "flex items-center gap-1.5 text-sm text-text-secondary hover:text-text-primary transition-colors",
 							children: [/* @__PURE__ */ w(m, { size: 14 }), "Change type"]
 						}), /* @__PURE__ */ T("span", {
-							className: "flex items-center gap-1.5 rounded-full border border-border bg-muted px-3 py-1 text-xs font-medium",
+							className: "flex items-center gap-1.5 rounded-full border border-border-subtle bg-bg-sunken px-3 py-1 text-xs font-medium",
 							children: [ne, $]
 						})]
 					}),
@@ -462,7 +464,7 @@ var k = [
 							permissions: I,
 							onChange: X
 						}), /* @__PURE__ */ T("div", {
-							className: "mt-3 flex gap-2 rounded-lg border border-border-subtle bg-muted/30 p-3 text-xs text-muted-foreground",
+							className: "mt-3 flex gap-2 rounded-lg border border-border-subtle bg-bg-sunken/30 p-3 text-xs text-text-secondary",
 							children: [/* @__PURE__ */ w(y, {
 								size: 14,
 								className: "flex-shrink-0 mt-0.5"
@@ -470,12 +472,12 @@ var k = [
 						})]
 					}),
 					P !== "app" && /* @__PURE__ */ T("div", {
-						className: "rounded-lg border border-border-subtle bg-muted/30 p-4 flex gap-3 text-sm text-muted-foreground",
+						className: "rounded-lg border border-border-subtle bg-bg-sunken/30 p-4 flex gap-3 text-sm text-text-secondary",
 						children: [/* @__PURE__ */ w(y, {
 							size: 16,
 							className: "flex-shrink-0 mt-0.5"
 						}), /* @__PURE__ */ T("div", { children: [/* @__PURE__ */ w("p", {
-							className: "font-medium text-foreground",
+							className: "font-medium text-text-primary",
 							children: "File uploads"
 						}), /* @__PURE__ */ w("p", {
 							className: "mt-1",
@@ -488,12 +490,12 @@ var k = [
 							type: "button",
 							onClick: () => K("/apps"),
 							disabled: U,
-							className: "inline-flex items-center gap-2 rounded-md border px-4 py-2 text-sm font-medium hover:bg-muted transition-colors disabled:opacity-50",
+							className: "inline-flex items-center gap-2 rounded-md border px-4 py-2 text-sm font-medium hover:bg-bg-sunken transition-colors disabled:opacity-50",
 							children: [/* @__PURE__ */ w(S, { size: 16 }), M("devportal.cancel", "Cancel")]
 						}), /* @__PURE__ */ w("button", {
 							type: "submit",
 							disabled: U,
-							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 disabled:opacity-50",
+							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 disabled:opacity-50",
 							children: U ? /* @__PURE__ */ T(C, { children: [/* @__PURE__ */ w(b, {
 								size: 16,
 								className: "animate-spin"