@burdenoff/microfe-devportal 2026.624.13 → 2026.624.15

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

@@ -1 +1 @@
-{"version":3,"file":"AnalyticsDashboardPage.js","names":[],"sources":["../../../src/devportal/pages/AnalyticsDashboardPage.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport { useEffect, useMemo, useState } from \"react\";\nimport { useParams } from \"react-router-dom\";\nimport {\n  Activity,\n  AlertCircle,\n  AlertTriangle,\n  BarChart3,\n  Clock,\n  Loader2,\n  Users,\n} from \"lucide-react\";\nimport {\n  Bar,\n  BarChart,\n  CartesianGrid,\n  Line,\n  LineChart,\n  ResponsiveContainer,\n  Tooltip,\n  XAxis,\n  YAxis,\n} from \"recharts\";\nimport { PageLayout, PageSection } from \"../components/PageLayout\";\nimport { DataTable } from \"../components/DataTable\";\nimport { EmptyState } from \"../components/EmptyState\";\nimport { StatCard, StatCardGrid } from \"../components/StatCard\";\nimport { AppListItem } from \"../components/AppCard\";\nimport type { Application } from \"../types\";\nimport { useDevportal } from \"../providers/DevportalProvider\";\nimport {\n  type GetAnalyticsDashboardOptionsQuery,\n  getErrorMessage,\n  useGetAnalyticsDashboardOptionsQuery,\n  useGetApplicationAnalyticsDashboardQuery,\n} from \"../hooks\";\nimport { useTr } from \"../utils/i18n\";\n\ntype TimeRange = \"7d\" | \"30d\" | \"90d\";\n\nconst daysByRange: Record<TimeRange, number> = {\n  \"7d\": 7,\n  \"30d\": 30,\n  \"90d\": 90,\n};\n\nconst chartColors = {\n  primary: \"var(--color-chart-1)\",\n  secondary: \"var(--color-chart-2)\",\n  tertiary: \"var(--color-chart-4)\",\n  negative: \"var(--color-chart-negative)\",\n};\n\nexport const AnalyticsDashboardPage: FC = () => {\n  const { appId } = useParams<{ appId: string }>();\n  const { navigate, basePath, activeOrgId } = useDevportal();\n  const tr = useTr();\n  const [timeRange, setTimeRange] = useState<TimeRange>(\"30d\");\n  const [selectedApplicationId, setSelectedApplicationId] = useState(\n    appId || \"\",\n  );\n\n  const now = useMemo(() => new Date(), []);\n  const startDate = useMemo(() => {\n    const nextDate = new Date(now);\n    nextDate.setDate(nextDate.getDate() - daysByRange[timeRange]);\n    return nextDate.toISOString();\n  }, [now, timeRange]);\n\n  const {\n    data: optionsData,\n    loading: optionsLoading,\n    error: optionsError,\n  } = useGetAnalyticsDashboardOptionsQuery({\n    skip: !!appId,\n    fetchPolicy: \"cache-and-network\",\n  });\n\n  const { data, loading, error } = useGetApplicationAnalyticsDashboardQuery({\n    variables: {\n      applicationId: selectedApplicationId || appId || \"\",\n      period: \"daily\",\n      startDate,\n      endDate: now.toISOString(),\n    },\n    skip: !(selectedApplicationId || appId),\n    fetchPolicy: \"cache-and-network\",\n  });\n\n  const allApplications: Application[] =\n    optionsData?.applications?.edges?.map(\n      (\n        edge: GetAnalyticsDashboardOptionsQuery[\"applications\"][\"edges\"][number],\n      ) => edge.node as Application,\n    ) ?? [];\n  // Scope the app picker to the active org when one is selected\n  const applications = activeOrgId\n    ? allApplications.filter((a) => a.developerOrganizationId === activeOrgId)\n    : allApplications;\n  const selectedApplication = data?.application;\n\n  useEffect(() => {\n    const name = selectedApplication?.name;\n    const id = appId || selectedApplicationId;\n    if (!id || !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(id, name);\n    return () => reg?.unregister(id);\n  }, [appId, selectedApplicationId, selectedApplication?.name]);\n\n  const analytics = [...(data?.applicationAnalytics ?? [])].sort(\n    (left, right) =>\n      new Date(left.date).getTime() - new Date(right.date).getTime(),\n  );\n\n  const latest = analytics[analytics.length - 1];\n  const previous = analytics[analytics.length - 2];\n  const chartData = analytics.map((entry) => ({\n    date: new Date(entry.date).toLocaleDateString(undefined, {\n      month: \"short\",\n      day: \"numeric\",\n    }),\n    apiCalls: entry.apiCalls,\n    errors: entry.errors,\n    activeUsers: entry.activeUsers,\n    newUsers: entry.newUsers,\n    sessions: entry.sessions,\n    avgResponseTime: entry.avgResponseTime ?? 0,\n  }));\n\n  const errorRate =\n    latest && latest.apiCalls > 0 ? (latest.errors / latest.apiCalls) * 100 : 0;\n  const previousErrorRate =\n    previous && previous.apiCalls > 0\n      ? (previous.errors / previous.apiCalls) * 100\n      : 0;\n  const responseTrend =\n    latest?.avgResponseTime && previous?.avgResponseTime\n      ? previous.avgResponseTime - latest.avgResponseTime\n      : undefined;\n\n  const handleNavigate = (path: string) => {\n    navigate?.(`${basePath}${path}`);\n  };\n\n  if (!appId && optionsLoading && !optionsData) {\n    return (\n      <PageLayout\n        title={tr(\"devportal.analytics.title\", \"Analytics\")}\n        description={tr(\n          \"devportal.analytics.description\",\n          \"Explore live application usage and performance metrics\",\n        )}\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 (!appId && optionsError) {\n    return (\n      <PageLayout\n        title={tr(\"devportal.analytics.title\", \"Analytics\")}\n        description={tr(\n          \"devportal.analytics.description\",\n          \"Explore live application usage and performance metrics\",\n        )}\n      >\n        <EmptyState\n          icon={<AlertCircle size={32} className=\"text-status-error-text\" />}\n          title={tr(\n            \"devportal.analytics.errorLoadApps\",\n            \"Unable to load applications\",\n          )}\n          description={getErrorMessage(optionsError)}\n        />\n      </PageLayout>\n    );\n  }\n\n  if (!appId && !selectedApplicationId) {\n    return (\n      <PageLayout\n        title={tr(\"devportal.analytics.title\", \"Analytics\")}\n        description={tr(\n          \"devportal.analytics.selectAppDescription\",\n          \"Select an application to review live usage metrics from the public gateway\",\n        )}\n      >\n        {applications.length > 0 ? (\n          <div className=\"space-y-2\">\n            {applications.map((application) => (\n              <AppListItem\n                key={application.id}\n                app={application}\n                onClick={() => setSelectedApplicationId(application.id)}\n              />\n            ))}\n          </div>\n        ) : (\n          <EmptyState\n            icon={<BarChart3 size={32} />}\n            title={tr(\n              \"devportal.analytics.noAppsTitle\",\n              \"No applications available\",\n            )}\n            description={tr(\n              \"devportal.analytics.noAppsDescription\",\n              \"Create an application before viewing analytics.\",\n            )}\n          />\n        )}\n      </PageLayout>\n    );\n  }\n\n  if (error) {\n    return (\n      <PageLayout\n        title={tr(\"devportal.analytics.title\", \"Analytics\")}\n        description={tr(\n          \"devportal.analytics.description\",\n          \"Explore live application usage and performance metrics\",\n        )}\n        backLink={\n          selectedApplicationId ? `/apps/${selectedApplicationId}` : undefined\n        }\n        backLabel={tr(\n          \"devportal.analytics.backToApplication\",\n          \"Back to Application\",\n        )}\n      >\n        <EmptyState\n          icon={<AlertCircle size={32} className=\"text-status-error-text\" />}\n          title={tr(\n            \"devportal.analytics.errorLoadAnalytics\",\n            \"Unable to load analytics\",\n          )}\n          description={getErrorMessage(error)}\n        />\n      </PageLayout>\n    );\n  }\n\n  return (\n    <PageLayout\n      title={\n        appId\n          ? tr(\"devportal.analytics.appTitle\", \"Application Analytics\")\n          : tr(\"devportal.analytics.title\", \"Analytics\")\n      }\n      description={\n        selectedApplication\n          ? `${tr(\"devportal.analytics.liveUsageFor\", \"Live usage and performance for\")} ${selectedApplication.name}`\n          : tr(\n              \"devportal.analytics.description\",\n              \"Explore live application usage and performance metrics\",\n            )\n      }\n      backLink={\n        appId && selectedApplication\n          ? `/apps/${selectedApplication.id}`\n          : undefined\n      }\n      backLabel={tr(\n        \"devportal.analytics.backToApplication\",\n        \"Back to Application\",\n      )}\n      actions={\n        <div className=\"flex flex-wrap gap-2\">\n          {!appId && applications.length > 0 && (\n            <select\n              value={selectedApplicationId}\n              onChange={(event) => setSelectedApplicationId(event.target.value)}\n              aria-label={tr(\n                \"devportal.analytics.selectAppAria\",\n                \"Select application\",\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              {applications.map((application) => (\n                <option key={application.id} value={application.id}>\n                  {application.name}\n                </option>\n              ))}\n            </select>\n          )}\n          <select\n            value={timeRange}\n            onChange={(event) => setTimeRange(event.target.value as TimeRange)}\n            aria-label={tr(\n              \"devportal.analytics.selectRangeAria\",\n              \"Select time range\",\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=\"7d\">\n              {tr(\"devportal.analytics.range.7d\", \"Last 7 days\")}\n            </option>\n            <option value=\"30d\">\n              {tr(\"devportal.analytics.range.30d\", \"Last 30 days\")}\n            </option>\n            <option value=\"90d\">\n              {tr(\"devportal.analytics.range.90d\", \"Last 90 days\")}\n            </option>\n          </select>\n        </div>\n      }\n    >\n      {loading && !analytics.length ? (\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      ) : analytics.length > 0 ? (\n        <>\n          <StatCardGrid columns={4}>\n            <StatCard\n              title={tr(\"devportal.analytics.apiCalls\", \"API Calls\")}\n              value={(latest?.apiCalls ?? 0).toLocaleString()}\n              icon={<Activity size={20} />}\n            />\n            <StatCard\n              title={tr(\"devportal.analytics.activeUsers\", \"Active Users\")}\n              value={(latest?.activeUsers ?? 0).toLocaleString()}\n              icon={<Users size={20} />}\n            />\n            <StatCard\n              title={tr(\"devportal.analytics.errorRate\", \"Error Rate\")}\n              value={`${errorRate.toFixed(2)}%`}\n              icon={<AlertTriangle size={20} />}\n              trend={\n                previous\n                  ? {\n                      value: previousErrorRate - errorRate,\n                      label: tr(\n                        \"devportal.analytics.vsPrevious\",\n                        \"vs previous period\",\n                      ),\n                    }\n                  : undefined\n              }\n            />\n            <StatCard\n              title={tr(\n                \"devportal.analytics.avgResponseTime\",\n                \"Avg Response Time\",\n              )}\n              value={\n                latest?.avgResponseTime\n                  ? `${latest.avgResponseTime}ms`\n                  : tr(\"devportal.common.na\", \"N/A\")\n              }\n              icon={<Clock size={20} />}\n              trend={\n                typeof responseTrend === \"number\"\n                  ? {\n                      value: responseTrend,\n                      label: tr(\n                        \"devportal.analytics.fasterThanPrevious\",\n                        \"faster than previous\",\n                      ),\n                    }\n                  : undefined\n              }\n            />\n          </StatCardGrid>\n\n          <div className=\"grid gap-6 xl:grid-cols-2\">\n            <PageSection\n              title={tr(\"devportal.analytics.trafficTrend\", \"Traffic trend\")}\n            >\n              <div className=\"rounded-lg border bg-bg-surface p-4\">\n                <ResponsiveContainer width=\"100%\" height={300}>\n                  <LineChart data={chartData}>\n                    <CartesianGrid\n                      strokeDasharray=\"3 3\"\n                      stroke=\"var(--color-chart-grid)\"\n                    />\n                    <XAxis\n                      dataKey=\"date\"\n                      stroke=\"var(--color-chart-axis)\"\n                      fontSize={12}\n                    />\n                    <YAxis stroke=\"var(--color-chart-axis)\" fontSize={12} />\n                    <Tooltip\n                      contentStyle={{\n                        backgroundColor: \"var(--color-card)\",\n                        border: \"1px solid var(--color-border-default)\",\n                        borderRadius: 12,\n                      }}\n                    />\n                    <Line\n                      type=\"monotone\"\n                      dataKey=\"apiCalls\"\n                      stroke={chartColors.primary}\n                      strokeWidth={2}\n                      dot={false}\n                    />\n                    <Line\n                      type=\"monotone\"\n                      dataKey=\"errors\"\n                      stroke={chartColors.negative}\n                      strokeWidth={2}\n                      dot={false}\n                    />\n                  </LineChart>\n                </ResponsiveContainer>\n              </div>\n            </PageSection>\n\n            <PageSection\n              title={tr(\"devportal.analytics.userActivity\", \"User activity\")}\n            >\n              <div className=\"rounded-lg border bg-bg-surface p-4\">\n                <ResponsiveContainer width=\"100%\" height={300}>\n                  <BarChart data={chartData}>\n                    <CartesianGrid\n                      strokeDasharray=\"3 3\"\n                      stroke=\"var(--color-chart-grid)\"\n                    />\n                    <XAxis\n                      dataKey=\"date\"\n                      stroke=\"var(--color-chart-axis)\"\n                      fontSize={12}\n                    />\n                    <YAxis stroke=\"var(--color-chart-axis)\" fontSize={12} />\n                    <Tooltip\n                      contentStyle={{\n                        backgroundColor: \"var(--color-card)\",\n                        border: \"1px solid var(--color-border-default)\",\n                        borderRadius: 12,\n                      }}\n                    />\n                    <Bar\n                      dataKey=\"activeUsers\"\n                      fill={chartColors.primary}\n                      radius={[6, 6, 0, 0]}\n                    />\n                    <Bar\n                      dataKey=\"newUsers\"\n                      fill={chartColors.secondary}\n                      radius={[6, 6, 0, 0]}\n                    />\n                  </BarChart>\n                </ResponsiveContainer>\n              </div>\n            </PageSection>\n          </div>\n\n          <PageSection\n            title={tr(\"devportal.analytics.dailyBreakdown\", \"Daily breakdown\")}\n          >\n            <DataTable\n              data={analytics}\n              keyField=\"id\"\n              columns={[\n                {\n                  key: \"date\",\n                  header: tr(\"devportal.analytics.date\", \"Date\"),\n                  render: (entry) =>\n                    new Date(entry.date).toLocaleDateString(undefined, {\n                      month: \"short\",\n                      day: \"numeric\",\n                      year: \"numeric\",\n                    }),\n                },\n                {\n                  key: \"apiCalls\",\n                  header: tr(\"devportal.analytics.apiCalls\", \"API Calls\"),\n                  render: (entry) => entry.apiCalls.toLocaleString(),\n                },\n                {\n                  key: \"errors\",\n                  header: tr(\"devportal.analytics.errors\", \"Errors\"),\n                  render: (entry) => entry.errors.toLocaleString(),\n                },\n                {\n                  key: \"activeUsers\",\n                  header: tr(\"devportal.analytics.activeUsers\", \"Active Users\"),\n                  render: (entry) => entry.activeUsers.toLocaleString(),\n                },\n                {\n                  key: \"newUsers\",\n                  header: tr(\"devportal.analytics.newUsers\", \"New Users\"),\n                  render: (entry) => entry.newUsers.toLocaleString(),\n                },\n                {\n                  key: \"avgResponseTime\",\n                  header: tr(\"devportal.analytics.avgResponse\", \"Avg Response\"),\n                  render: (entry) =>\n                    entry.avgResponseTime\n                      ? `${entry.avgResponseTime}ms`\n                      : tr(\"devportal.common.na\", \"N/A\"),\n                },\n                {\n                  key: \"sessions\",\n                  header: tr(\"devportal.analytics.sessions\", \"Sessions\"),\n                  render: (entry) => entry.sessions.toLocaleString(),\n                },\n              ]}\n            />\n          </PageSection>\n        </>\n      ) : (\n        <EmptyState\n          icon={<BarChart3 size={32} />}\n          title={tr(\n            \"devportal.analytics.noAnalyticsTitle\",\n            \"No analytics available yet\",\n          )}\n          description={tr(\n            \"devportal.analytics.noAnalyticsDescription\",\n            \"Analytics will appear after this application starts receiving traffic through the public gateway.\",\n          )}\n          action={\n            !appId ? (\n              <button\n                type=\"button\"\n                onClick={() => handleNavigate(\"/apps\")}\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 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary\"\n              >\n                {tr(\n                  \"devportal.analytics.viewApplications\",\n                  \"View applications\",\n                )}\n              </button>\n            ) : undefined\n          }\n        />\n      )}\n    </PageLayout>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"AnalyticsDashboardPage.js","names":[],"sources":["../../../src/devportal/pages/AnalyticsDashboardPage.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport { useEffect, useMemo, useState } from \"react\";\nimport { useParams } from \"react-router-dom\";\nimport {\n  Activity,\n  AlertCircle,\n  AlertTriangle,\n  BarChart3,\n  Clock,\n  Download,\n  Loader2,\n  Star,\n  Users,\n  Zap,\n} from \"lucide-react\";\nimport {\n  Bar,\n  BarChart,\n  CartesianGrid,\n  Line,\n  LineChart,\n  ResponsiveContainer,\n  Tooltip,\n  XAxis,\n  YAxis,\n} from \"recharts\";\nimport { PageLayout, PageSection } from \"../components/PageLayout\";\nimport { DataTable } from \"../components/DataTable\";\nimport { EmptyState } from \"../components/EmptyState\";\nimport { StatCard, StatCardGrid } from \"../components/StatCard\";\nimport { AppListItem } from \"../components/AppCard\";\nimport type { Application } from \"../types\";\nimport { useDevportal } from \"../providers/DevportalProvider\";\nimport {\n  type GetAnalyticsDashboardOptionsQuery,\n  getErrorMessage,\n  useGetAnalyticsDashboardOptionsQuery,\n  useGetApplicationAnalyticsDashboardQuery,\n} from \"../hooks\";\nimport { useTr } from \"../utils/i18n\";\n\ntype TimeRange = \"7d\" | \"30d\" | \"90d\";\n\nconst daysByRange: Record<TimeRange, number> = {\n  \"7d\": 7,\n  \"30d\": 30,\n  \"90d\": 90,\n};\n\nconst chartColors = {\n  primary: \"var(--color-chart-1)\",\n  secondary: \"var(--color-chart-2)\",\n  tertiary: \"var(--color-chart-4)\",\n  negative: \"var(--color-chart-negative)\",\n};\n\nexport const AnalyticsDashboardPage: FC = () => {\n  const { appId } = useParams<{ appId: string }>();\n  const { navigate, basePath, activeOrgId } = useDevportal();\n  const tr = useTr();\n  const [timeRange, setTimeRange] = useState<TimeRange>(\"30d\");\n  const [selectedApplicationId, setSelectedApplicationId] = useState(\n    appId || \"\",\n  );\n\n  const now = useMemo(() => new Date(), []);\n  const startDate = useMemo(() => {\n    const nextDate = new Date(now);\n    nextDate.setDate(nextDate.getDate() - daysByRange[timeRange]);\n    return nextDate.toISOString();\n  }, [now, timeRange]);\n\n  const {\n    data: optionsData,\n    loading: optionsLoading,\n    error: optionsError,\n  } = useGetAnalyticsDashboardOptionsQuery({\n    skip: !!appId,\n    fetchPolicy: \"cache-and-network\",\n  });\n\n  const { data, loading, error } = useGetApplicationAnalyticsDashboardQuery({\n    variables: {\n      applicationId: selectedApplicationId || appId || \"\",\n      period: \"daily\",\n      startDate,\n      endDate: now.toISOString(),\n    },\n    skip: !(selectedApplicationId || appId),\n    fetchPolicy: \"cache-and-network\",\n  });\n\n  const allApplications: Application[] =\n    optionsData?.applications?.edges?.map(\n      (\n        edge: GetAnalyticsDashboardOptionsQuery[\"applications\"][\"edges\"][number],\n      ) => edge.node as Application,\n    ) ?? [];\n  // Scope the app picker to the active org when one is selected\n  const applications = activeOrgId\n    ? allApplications.filter((a) => a.developerOrganizationId === activeOrgId)\n    : allApplications;\n  const selectedApplication = data?.application;\n\n  useEffect(() => {\n    const name = selectedApplication?.name;\n    const id = appId || selectedApplicationId;\n    if (!id || !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(id, name);\n    return () => reg?.unregister(id);\n  }, [appId, selectedApplicationId, selectedApplication?.name]);\n\n  const analytics = [...(data?.applicationAnalytics ?? [])].sort(\n    (left, right) =>\n      new Date(left.date).getTime() - new Date(right.date).getTime(),\n  );\n\n  const latest = analytics[analytics.length - 1];\n  const previous = analytics[analytics.length - 2];\n  const chartData = analytics.map((entry) => ({\n    date: new Date(entry.date).toLocaleDateString(undefined, {\n      month: \"short\",\n      day: \"numeric\",\n    }),\n    apiCalls: entry.apiCalls,\n    errors: entry.errors,\n    activeUsers: entry.activeUsers,\n    newUsers: entry.newUsers,\n    sessions: entry.sessions,\n    avgResponseTime: entry.avgResponseTime ?? 0,\n  }));\n\n  const appType = selectedApplication?.appType;\n  const isPackageType = appType === \"NODE\" || appType === \"WORKFLOW\";\n\n  const errorRate =\n    latest && latest.apiCalls > 0 ? (latest.errors / latest.apiCalls) * 100 : 0;\n  const previousErrorRate =\n    previous && previous.apiCalls > 0\n      ? (previous.errors / previous.apiCalls) * 100\n      : 0;\n  const responseTrend =\n    latest?.avgResponseTime && previous?.avgResponseTime\n      ? previous.avgResponseTime - latest.avgResponseTime\n      : undefined;\n\n  const handleNavigate = (path: string) => {\n    navigate?.(`${basePath}${path}`);\n  };\n\n  if (!appId && optionsLoading && !optionsData) {\n    return (\n      <PageLayout\n        title={tr(\"devportal.analytics.title\", \"Analytics\")}\n        description={tr(\n          \"devportal.analytics.description\",\n          \"Explore live application usage and performance metrics\",\n        )}\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 (!appId && optionsError) {\n    return (\n      <PageLayout\n        title={tr(\"devportal.analytics.title\", \"Analytics\")}\n        description={tr(\n          \"devportal.analytics.description\",\n          \"Explore live application usage and performance metrics\",\n        )}\n      >\n        <EmptyState\n          icon={<AlertCircle size={32} className=\"text-status-error-text\" />}\n          title={tr(\n            \"devportal.analytics.errorLoadApps\",\n            \"Unable to load applications\",\n          )}\n          description={getErrorMessage(optionsError)}\n        />\n      </PageLayout>\n    );\n  }\n\n  if (!appId && !selectedApplicationId) {\n    return (\n      <PageLayout\n        title={tr(\"devportal.analytics.title\", \"Analytics\")}\n        description={tr(\n          \"devportal.analytics.selectAppDescription\",\n          \"Select an application to review live usage metrics from the public gateway\",\n        )}\n      >\n        {applications.length > 0 ? (\n          <div className=\"space-y-2\">\n            {applications.map((application) => (\n              <AppListItem\n                key={application.id}\n                app={application}\n                onClick={() => setSelectedApplicationId(application.id)}\n              />\n            ))}\n          </div>\n        ) : (\n          <EmptyState\n            icon={<BarChart3 size={32} />}\n            title={tr(\n              \"devportal.analytics.noAppsTitle\",\n              \"No applications available\",\n            )}\n            description={tr(\n              \"devportal.analytics.noAppsDescription\",\n              \"Create an application before viewing analytics.\",\n            )}\n          />\n        )}\n      </PageLayout>\n    );\n  }\n\n  if (error) {\n    return (\n      <PageLayout\n        title={tr(\"devportal.analytics.title\", \"Analytics\")}\n        description={tr(\n          \"devportal.analytics.description\",\n          \"Explore live application usage and performance metrics\",\n        )}\n        backLink={\n          selectedApplicationId ? `/apps/${selectedApplicationId}` : undefined\n        }\n        backLabel={tr(\n          \"devportal.analytics.backToApplication\",\n          \"Back to Application\",\n        )}\n      >\n        <EmptyState\n          icon={<AlertCircle size={32} className=\"text-status-error-text\" />}\n          title={tr(\n            \"devportal.analytics.errorLoadAnalytics\",\n            \"Unable to load analytics\",\n          )}\n          description={getErrorMessage(error)}\n        />\n      </PageLayout>\n    );\n  }\n\n  return (\n    <PageLayout\n      title={\n        appId\n          ? tr(\"devportal.analytics.appTitle\", \"Application Analytics\")\n          : tr(\"devportal.analytics.title\", \"Analytics\")\n      }\n      description={\n        selectedApplication\n          ? `${tr(\"devportal.analytics.liveUsageFor\", \"Live usage and performance for\")} ${selectedApplication.name}`\n          : tr(\n              \"devportal.analytics.description\",\n              \"Explore live application usage and performance metrics\",\n            )\n      }\n      backLink={\n        appId && selectedApplication\n          ? `/apps/${selectedApplication.id}`\n          : undefined\n      }\n      backLabel={tr(\n        \"devportal.analytics.backToApplication\",\n        \"Back to Application\",\n      )}\n      actions={\n        <div className=\"flex flex-wrap gap-2\">\n          {!appId && applications.length > 0 && (\n            <select\n              value={selectedApplicationId}\n              onChange={(event) => setSelectedApplicationId(event.target.value)}\n              aria-label={tr(\n                \"devportal.analytics.selectAppAria\",\n                \"Select application\",\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              {applications.map((application) => (\n                <option key={application.id} value={application.id}>\n                  {application.name}\n                </option>\n              ))}\n            </select>\n          )}\n          <select\n            value={timeRange}\n            onChange={(event) => setTimeRange(event.target.value as TimeRange)}\n            aria-label={tr(\n              \"devportal.analytics.selectRangeAria\",\n              \"Select time range\",\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=\"7d\">\n              {tr(\"devportal.analytics.range.7d\", \"Last 7 days\")}\n            </option>\n            <option value=\"30d\">\n              {tr(\"devportal.analytics.range.30d\", \"Last 30 days\")}\n            </option>\n            <option value=\"90d\">\n              {tr(\"devportal.analytics.range.90d\", \"Last 90 days\")}\n            </option>\n          </select>\n        </div>\n      }\n    >\n      {loading && !analytics.length ? (\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      ) : analytics.length > 0 || isPackageType ? (\n        <>\n          {isPackageType ? (\n            /* NODE / WORKFLOW: show install + rating stats */\n            <StatCardGrid columns={4}>\n              <StatCard\n                title={tr(\"devportal.analytics.totalInstalls\", \"Total Installs\")}\n                value={(selectedApplication?.installCount ?? 0).toLocaleString()}\n                icon={<Download size={20} />}\n              />\n              <StatCard\n                title={tr(\"devportal.analytics.activeInstalls\", \"Active Installs\")}\n                value={(selectedApplication?.activeInstallCount ?? 0).toLocaleString()}\n                icon={<Zap size={20} />}\n              />\n              <StatCard\n                title={tr(\"devportal.analytics.averageRating\", \"Average Rating\")}\n                value={\n                  selectedApplication?.averageRating\n                    ? `${selectedApplication.averageRating.toFixed(1)} ★`\n                    : tr(\"devportal.common.na\", \"N/A\")\n                }\n                icon={<Star size={20} />}\n              />\n              <StatCard\n                title={tr(\"devportal.analytics.totalReviews\", \"Total Reviews\")}\n                value={(selectedApplication?.reviewCount ?? 0).toLocaleString()}\n                icon={<Users size={20} />}\n              />\n            </StatCardGrid>\n          ) : (\n            /* APP: API performance stats + charts */\n            <>\n              <StatCardGrid columns={4}>\n                <StatCard\n                  title={tr(\"devportal.analytics.apiCalls\", \"API Calls\")}\n                  value={(latest?.apiCalls ?? 0).toLocaleString()}\n                  icon={<Activity size={20} />}\n                />\n                <StatCard\n                  title={tr(\"devportal.analytics.activeUsers\", \"Active Users\")}\n                  value={(latest?.activeUsers ?? 0).toLocaleString()}\n                  icon={<Users size={20} />}\n                />\n                <StatCard\n                  title={tr(\"devportal.analytics.errorRate\", \"Error Rate\")}\n                  value={`${errorRate.toFixed(2)}%`}\n                  icon={<AlertTriangle size={20} />}\n                  trend={\n                    previous\n                      ? {\n                          value: previousErrorRate - errorRate,\n                          label: tr(\n                            \"devportal.analytics.vsPrevious\",\n                            \"vs previous period\",\n                          ),\n                        }\n                      : undefined\n                  }\n                />\n                <StatCard\n                  title={tr(\n                    \"devportal.analytics.avgResponseTime\",\n                    \"Avg Response Time\",\n                  )}\n                  value={\n                    latest?.avgResponseTime\n                      ? `${latest.avgResponseTime}ms`\n                      : tr(\"devportal.common.na\", \"N/A\")\n                  }\n                  icon={<Clock size={20} />}\n                  trend={\n                    typeof responseTrend === \"number\"\n                      ? {\n                          value: responseTrend,\n                          label: tr(\n                            \"devportal.analytics.fasterThanPrevious\",\n                            \"faster than previous\",\n                          ),\n                        }\n                      : undefined\n                  }\n                />\n              </StatCardGrid>\n\n              <div className=\"grid gap-6 xl:grid-cols-2\">\n                <PageSection\n                  title={tr(\"devportal.analytics.trafficTrend\", \"Traffic trend\")}\n                >\n                  <div className=\"rounded-lg border bg-card p-4\">\n                    <ResponsiveContainer width=\"100%\" height={300}>\n                      <LineChart data={chartData}>\n                        <CartesianGrid\n                          strokeDasharray=\"3 3\"\n                          stroke=\"var(--color-chart-grid)\"\n                        />\n                        <XAxis\n                          dataKey=\"date\"\n                          stroke=\"var(--color-chart-axis)\"\n                          fontSize={12}\n                        />\n                        <YAxis stroke=\"var(--color-chart-axis)\" fontSize={12} />\n                        <Tooltip\n                          contentStyle={{\n                            backgroundColor: \"var(--color-card)\",\n                            border: \"1px solid var(--color-border-default)\",\n                            borderRadius: 12,\n                          }}\n                        />\n                        <Line\n                          type=\"monotone\"\n                          dataKey=\"apiCalls\"\n                          stroke={chartColors.primary}\n                          strokeWidth={2}\n                          dot={false}\n                        />\n                        <Line\n                          type=\"monotone\"\n                          dataKey=\"errors\"\n                          stroke={chartColors.negative}\n                          strokeWidth={2}\n                          dot={false}\n                        />\n                      </LineChart>\n                    </ResponsiveContainer>\n                  </div>\n                </PageSection>\n\n                <PageSection\n                  title={tr(\"devportal.analytics.userActivity\", \"User activity\")}\n                >\n                  <div className=\"rounded-lg border bg-card p-4\">\n                    <ResponsiveContainer width=\"100%\" height={300}>\n                      <BarChart data={chartData}>\n                        <CartesianGrid\n                          strokeDasharray=\"3 3\"\n                          stroke=\"var(--color-chart-grid)\"\n                        />\n                        <XAxis\n                          dataKey=\"date\"\n                          stroke=\"var(--color-chart-axis)\"\n                          fontSize={12}\n                        />\n                        <YAxis stroke=\"var(--color-chart-axis)\" fontSize={12} />\n                        <Tooltip\n                          contentStyle={{\n                            backgroundColor: \"var(--color-card)\",\n                            border: \"1px solid var(--color-border-default)\",\n                            borderRadius: 12,\n                          }}\n                        />\n                        <Bar\n                          dataKey=\"activeUsers\"\n                          fill={chartColors.primary}\n                          radius={[6, 6, 0, 0]}\n                        />\n                        <Bar\n                          dataKey=\"newUsers\"\n                          fill={chartColors.secondary}\n                          radius={[6, 6, 0, 0]}\n                        />\n                      </BarChart>\n                    </ResponsiveContainer>\n                  </div>\n                </PageSection>\n              </div>\n\n              <PageSection\n                title={tr(\"devportal.analytics.dailyBreakdown\", \"Daily breakdown\")}\n              >\n                <DataTable\n                  data={analytics}\n                  keyField=\"id\"\n                  columns={[\n                    {\n                      key: \"date\",\n                      header: tr(\"devportal.analytics.date\", \"Date\"),\n                      render: (entry) =>\n                        new Date(entry.date).toLocaleDateString(undefined, {\n                          month: \"short\",\n                          day: \"numeric\",\n                          year: \"numeric\",\n                        }),\n                    },\n                    {\n                      key: \"apiCalls\",\n                      header: tr(\"devportal.analytics.apiCalls\", \"API Calls\"),\n                      render: (entry) => entry.apiCalls.toLocaleString(),\n                    },\n                    {\n                      key: \"errors\",\n                      header: tr(\"devportal.analytics.errors\", \"Errors\"),\n                      render: (entry) => entry.errors.toLocaleString(),\n                    },\n                    {\n                      key: \"activeUsers\",\n                      header: tr(\"devportal.analytics.activeUsers\", \"Active Users\"),\n                      render: (entry) => entry.activeUsers.toLocaleString(),\n                    },\n                    {\n                      key: \"newUsers\",\n                      header: tr(\"devportal.analytics.newUsers\", \"New Users\"),\n                      render: (entry) => entry.newUsers.toLocaleString(),\n                    },\n                    {\n                      key: \"avgResponseTime\",\n                      header: tr(\"devportal.analytics.avgResponse\", \"Avg Response\"),\n                      render: (entry) =>\n                        entry.avgResponseTime\n                          ? `${entry.avgResponseTime}ms`\n                          : tr(\"devportal.common.na\", \"N/A\"),\n                    },\n                    {\n                      key: \"sessions\",\n                      header: tr(\"devportal.analytics.sessions\", \"Sessions\"),\n                      render: (entry) => entry.sessions.toLocaleString(),\n                    },\n                  ]}\n                />\n              </PageSection>\n            </>\n          )}\n        </>\n      ) : (\n        <EmptyState\n          icon={<BarChart3 size={32} />}\n          title={tr(\n            \"devportal.analytics.noAnalyticsTitle\",\n            \"No analytics available yet\",\n          )}\n          description={tr(\n            \"devportal.analytics.noAnalyticsDescription\",\n            \"Analytics will appear after this application starts receiving traffic through the public gateway.\",\n          )}\n          action={\n            !appId ? (\n              <button\n                type=\"button\"\n                onClick={() => handleNavigate(\"/apps\")}\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 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary\"\n              >\n                {tr(\n                  \"devportal.analytics.viewApplications\",\n                  \"View applications\",\n                )}\n              </button>\n            ) : undefined\n          }\n        />\n      )}\n    </PageLayout>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AA2CA,IAAM,KAAyC;CAC7C,MAAM;CACN,OAAO;CACP,OAAO;CACR,EAEK,IAAc;CAClB,SAAS;CACT,WAAW;CACX,UAAU;CACV,UAAU;CACX,EAEY,UAAmC;CAC9C,IAAM,EAAE,aAAU,GAA8B,EAC1C,EAAE,cAAU,cAAU,mBAAgB,GAAc,EACpD,IAAK,IAAO,EACZ,CAAC,GAAW,MAAgB,EAAoB,MAAM,EACtD,CAAC,GAAuB,KAA4B,EACxD,KAAS,GACV,EAEK,IAAM,wBAAc,IAAI,MAAM,EAAE,EAAE,CAAC,EACnC,IAAY,QAAc;EAC9B,IAAM,IAAW,IAAI,KAAK,EAAI;AAE9B,SADA,EAAS,QAAQ,EAAS,SAAS,GAAG,GAAY,GAAW,EACtD,EAAS,aAAa;IAC5B,CAAC,GAAK,EAAU,CAAC,EAEd,EACJ,MAAM,GACN,SAAS,GACT,OAAO,MACL,EAAqC;EACvC,MAAM,CAAC,CAAC;EACR,aAAa;EACd,CAAC,EAEI,EAAE,SAAM,aAAS,aAAU,GAAyC;EACxE,WAAW;GACT,eAAe,KAAyB,KAAS;GACjD,QAAQ;GACR;GACA,SAAS,EAAI,aAAa;GAC3B;EACD,MAAM,EAAE,KAAyB;EACjC,aAAa;EACd,CAAC,EAEI,IACJ,GAAa,cAAc,OAAO,KAE9B,MACG,EAAK,KACX,IAAI,EAAE,EAEH,IAAe,IACjB,EAAgB,QAAQ,MAAM,EAAE,4BAA4B,EAAY,GACxE,GACE,IAAsB,GAAM;AAElC,SAAgB;EACd,IAAM,IAAO,GAAqB,MAC5B,IAAK,KAAS;AACpB,MAAI,CAAC,KAAM,CAAC,EAAM;EAClB,IAAM,IACJ,OAMA;AAEF,SADA,GAAK,SAAS,GAAI,EAAK,QACV,GAAK,WAAW,EAAG;IAC/B;EAAC;EAAO;EAAuB,GAAqB;EAAK,CAAC;CAE7D,IAAM,IAAY,CAAC,GAAI,GAAM,wBAAwB,EAAE,CAAE,CAAC,MACvD,GAAM,MACL,IAAI,KAAK,EAAK,KAAK,CAAC,SAAS,GAAG,IAAI,KAAK,EAAM,KAAK,CAAC,SAAS,CACjE,EAEK,IAAS,EAAU,EAAU,SAAS,IACtC,IAAW,EAAU,EAAU,SAAS,IACxC,IAAY,EAAU,KAAK,OAAW;EAC1C,MAAM,IAAI,KAAK,EAAM,KAAK,CAAC,mBAAmB,KAAA,GAAW;GACvD,OAAO;GACP,KAAK;GACN,CAAC;EACF,UAAU,EAAM;EAChB,QAAQ,EAAM;EACd,aAAa,EAAM;EACnB,UAAU,EAAM;EAChB,UAAU,EAAM;EAChB,iBAAiB,EAAM,mBAAmB;EAC3C,EAAE,EAEG,IAAU,GAAqB,SAC/B,IAAgB,MAAY,UAAU,MAAY,YAElD,IACJ,KAAU,EAAO,WAAW,IAAK,EAAO,SAAS,EAAO,WAAY,MAAM,GACtE,KACJ,KAAY,EAAS,WAAW,IAC3B,EAAS,SAAS,EAAS,WAAY,MACxC,GACA,IACJ,GAAQ,mBAAmB,GAAU,kBACjC,EAAS,kBAAkB,EAAO,kBAClC,KAAA,GAEA,MAAkB,MAAiB;AACvC,OAAW,GAAG,KAAW,IAAO;;AAwGlC,QArGI,CAAC,KAAS,KAAkB,CAAC,IAE7B,kBAAC,GAAD;EACE,OAAO,EAAG,6BAA6B,YAAY;EACnD,aAAa,EACX,mCACA,yDACD;YAED,kBAAC,OAAD;GAAK,WAAU;aACb,kBAAC,GAAD,EAAS,WAAU,wBAAyB,CAAA;GACxC,CAAA;EACK,CAAA,GAIb,CAAC,KAAS,IAEV,kBAAC,GAAD;EACE,OAAO,EAAG,6BAA6B,YAAY;EACnD,aAAa,EACX,mCACA,yDACD;YAED,kBAAC,GAAD;GACE,MAAM,kBAAC,GAAD;IAAa,MAAM;IAAI,WAAU;IAA2B,CAAA;GAClE,OAAO,EACL,qCACA,8BACD;GACD,aAAa,EAAgB,EAAa;GAC1C,CAAA;EACS,CAAA,GAIb,CAAC,KAAS,CAAC,IAEX,kBAAC,GAAD;EACE,OAAO,EAAG,6BAA6B,YAAY;EACnD,aAAa,EACX,4CACA,6EACD;YAEA,EAAa,SAAS,IACrB,kBAAC,OAAD;GAAK,WAAU;aACZ,EAAa,KAAK,MACjB,kBAAC,IAAD;IAEE,KAAK;IACL,eAAe,EAAyB,EAAY,GAAG;IACvD,EAHK,EAAY,GAGjB,CACF;GACE,CAAA,GAEN,kBAAC,GAAD;GACE,MAAM,kBAAC,GAAD,EAAW,MAAM,IAAM,CAAA;GAC7B,OAAO,EACL,mCACA,4BACD;GACD,aAAa,EACX,yCACA,kDACD;GACD,CAAA;EAEO,CAAA,GAIb,IAEA,kBAAC,GAAD;EACE,OAAO,EAAG,6BAA6B,YAAY;EACnD,aAAa,EACX,mCACA,yDACD;EACD,UACE,IAAwB,SAAS,MAA0B,KAAA;EAE7D,WAAW,EACT,yCACA,sBACD;YAED,kBAAC,GAAD;GACE,MAAM,kBAAC,GAAD;IAAa,MAAM;IAAI,WAAU;IAA2B,CAAA;GAClE,OAAO,EACL,0CACA,2BACD;GACD,aAAa,EAAgB,EAAM;GACnC,CAAA;EACS,CAAA,GAKf,kBAAC,GAAD;EACE,OACE,IACI,EAAG,gCAAgC,wBAAwB,GAC3D,EAAG,6BAA6B,YAAY;EAElD,aACE,IACI,GAAG,EAAG,oCAAoC,iCAAiC,CAAC,GAAG,EAAoB,SACnG,EACE,mCACA,yDACD;EAEP,UACE,KAAS,IACL,SAAS,EAAoB,OAC7B,KAAA;EAEN,WAAW,EACT,yCACA,sBACD;EACD,SACE,kBAAC,OAAD;GAAK,WAAU;aAAf,CACG,CAAC,KAAS,EAAa,SAAS,KAC/B,kBAAC,UAAD;IACE,OAAO;IACP,WAAW,MAAU,EAAyB,EAAM,OAAO,MAAM;IACjE,cAAY,EACV,qCACA,qBACD;IACD,WAAU;cAET,EAAa,KAAK,MACjB,kBAAC,UAAD;KAA6B,OAAO,EAAY;eAC7C,EAAY;KACN,EAFI,EAAY,GAEhB,CACT;IACK,CAAA,EAEX,kBAAC,UAAD;IACE,OAAO;IACP,WAAW,MAAU,GAAa,EAAM,OAAO,MAAmB;IAClE,cAAY,EACV,uCACA,oBACD;IACD,WAAU;cAPZ;KASE,kBAAC,UAAD;MAAQ,OAAM;gBACX,EAAG,gCAAgC,cAAc;MAC3C,CAAA;KACT,kBAAC,UAAD;MAAQ,OAAM;gBACX,EAAG,iCAAiC,eAAe;MAC7C,CAAA;KACT,kBAAC,UAAD;MAAQ,OAAM;gBACX,EAAG,iCAAiC,eAAe;MAC7C,CAAA;KACF;MACL;;YAGP,MAAW,CAAC,EAAU,SACrB,kBAAC,OAAD;GAAK,WAAU;aACb,kBAAC,GAAD,EAAS,WAAU,wBAAyB,CAAA;GACxC,CAAA,GACJ,EAAU,SAAS,KAAK,IAC1B,kBAAA,GAAA,EAAA,UACG,IAEC,kBAAC,GAAD;GAAc,SAAS;aAAvB;IACE,kBAAC,GAAD;KACE,OAAO,EAAG,qCAAqC,iBAAiB;KAChE,QAAQ,GAAqB,gBAAgB,GAAG,gBAAgB;KAChE,MAAM,kBAAC,GAAD,EAAU,MAAM,IAAM,CAAA;KAC5B,CAAA;IACF,kBAAC,GAAD;KACE,OAAO,EAAG,sCAAsC,kBAAkB;KAClE,QAAQ,GAAqB,sBAAsB,GAAG,gBAAgB;KACtE,MAAM,kBAAC,IAAD,EAAK,MAAM,IAAM,CAAA;KACvB,CAAA;IACF,kBAAC,GAAD;KACE,OAAO,EAAG,qCAAqC,iBAAiB;KAChE,OACE,GAAqB,gBACjB,GAAG,EAAoB,cAAc,QAAQ,EAAE,CAAC,MAChD,EAAG,uBAAuB,MAAM;KAEtC,MAAM,kBAAC,IAAD,EAAM,MAAM,IAAM,CAAA;KACxB,CAAA;IACF,kBAAC,GAAD;KACE,OAAO,EAAG,oCAAoC,gBAAgB;KAC9D,QAAQ,GAAqB,eAAe,GAAG,gBAAgB;KAC/D,MAAM,kBAAC,GAAD,EAAO,MAAM,IAAM,CAAA;KACzB,CAAA;IACW;OAGf,kBAAA,GAAA,EAAA,UAAA;GACE,kBAAC,GAAD;IAAc,SAAS;cAAvB;KACE,kBAAC,GAAD;MACE,OAAO,EAAG,gCAAgC,YAAY;MACtD,QAAQ,GAAQ,YAAY,GAAG,gBAAgB;MAC/C,MAAM,kBAAC,IAAD,EAAU,MAAM,IAAM,CAAA;MAC5B,CAAA;KACF,kBAAC,GAAD;MACE,OAAO,EAAG,mCAAmC,eAAe;MAC5D,QAAQ,GAAQ,eAAe,GAAG,gBAAgB;MAClD,MAAM,kBAAC,GAAD,EAAO,MAAM,IAAM,CAAA;MACzB,CAAA;KACF,kBAAC,GAAD;MACE,OAAO,EAAG,iCAAiC,aAAa;MACxD,OAAO,GAAG,EAAU,QAAQ,EAAE,CAAC;MAC/B,MAAM,kBAAC,IAAD,EAAe,MAAM,IAAM,CAAA;MACjC,OACE,IACI;OACE,OAAO,KAAoB;OAC3B,OAAO,EACL,kCACA,qBACD;OACF,GACD,KAAA;MAEN,CAAA;KACF,kBAAC,GAAD;MACE,OAAO,EACL,uCACA,oBACD;MACD,OACE,GAAQ,kBACJ,GAAG,EAAO,gBAAgB,MAC1B,EAAG,uBAAuB,MAAM;MAEtC,MAAM,kBAAC,GAAD,EAAO,MAAM,IAAM,CAAA;MACzB,OACE,OAAO,KAAkB,WACrB;OACE,OAAO;OACP,OAAO,EACL,0CACA,uBACD;OACF,GACD,KAAA;MAEN,CAAA;KACW;;GAEf,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,GAAD;KACE,OAAO,EAAG,oCAAoC,gBAAgB;eAE9D,kBAAC,OAAD;MAAK,WAAU;gBACb,kBAAC,GAAD;OAAqB,OAAM;OAAO,QAAQ;iBACxC,kBAAC,IAAD;QAAW,MAAM;kBAAjB;SACE,kBAAC,GAAD;UACE,iBAAgB;UAChB,QAAO;UACP,CAAA;SACF,kBAAC,GAAD;UACE,SAAQ;UACR,QAAO;UACP,UAAU;UACV,CAAA;SACF,kBAAC,GAAD;UAAO,QAAO;UAA0B,UAAU;UAAM,CAAA;SACxD,kBAAC,GAAD,EACE,cAAc;UACZ,iBAAiB;UACjB,QAAQ;UACR,cAAc;UACf,EACD,CAAA;SACF,kBAAC,GAAD;UACE,MAAK;UACL,SAAQ;UACR,QAAQ,EAAY;UACpB,aAAa;UACb,KAAK;UACL,CAAA;SACF,kBAAC,GAAD;UACE,MAAK;UACL,SAAQ;UACR,QAAQ,EAAY;UACpB,aAAa;UACb,KAAK;UACL,CAAA;SACQ;;OACQ,CAAA;MAClB,CAAA;KACM,CAAA,EAEd,kBAAC,GAAD;KACE,OAAO,EAAG,oCAAoC,gBAAgB;eAE9D,kBAAC,OAAD;MAAK,WAAU;gBACb,kBAAC,GAAD;OAAqB,OAAM;OAAO,QAAQ;iBACxC,kBAAC,GAAD;QAAU,MAAM;kBAAhB;SACE,kBAAC,GAAD;UACE,iBAAgB;UAChB,QAAO;UACP,CAAA;SACF,kBAAC,GAAD;UACE,SAAQ;UACR,QAAO;UACP,UAAU;UACV,CAAA;SACF,kBAAC,GAAD;UAAO,QAAO;UAA0B,UAAU;UAAM,CAAA;SACxD,kBAAC,GAAD,EACE,cAAc;UACZ,iBAAiB;UACjB,QAAQ;UACR,cAAc;UACf,EACD,CAAA;SACF,kBAAC,GAAD;UACE,SAAQ;UACR,MAAM,EAAY;UAClB,QAAQ;WAAC;WAAG;WAAG;WAAG;WAAE;UACpB,CAAA;SACF,kBAAC,GAAD;UACE,SAAQ;UACR,MAAM,EAAY;UAClB,QAAQ;WAAC;WAAG;WAAG;WAAG;WAAE;UACpB,CAAA;SACO;;OACS,CAAA;MAClB,CAAA;KACM,CAAA,CACV;;GAEN,kBAAC,GAAD;IACE,OAAO,EAAG,sCAAsC,kBAAkB;cAElE,kBAAC,IAAD;KACE,MAAM;KACN,UAAS;KACT,SAAS;MACP;OACE,KAAK;OACL,QAAQ,EAAG,4BAA4B,OAAO;OAC9C,SAAS,MACP,IAAI,KAAK,EAAM,KAAK,CAAC,mBAAmB,KAAA,GAAW;QACjD,OAAO;QACP,KAAK;QACL,MAAM;QACP,CAAC;OACL;MACD;OACE,KAAK;OACL,QAAQ,EAAG,gCAAgC,YAAY;OACvD,SAAS,MAAU,EAAM,SAAS,gBAAgB;OACnD;MACD;OACE,KAAK;OACL,QAAQ,EAAG,8BAA8B,SAAS;OAClD,SAAS,MAAU,EAAM,OAAO,gBAAgB;OACjD;MACD;OACE,KAAK;OACL,QAAQ,EAAG,mCAAmC,eAAe;OAC7D,SAAS,MAAU,EAAM,YAAY,gBAAgB;OACtD;MACD;OACE,KAAK;OACL,QAAQ,EAAG,gCAAgC,YAAY;OACvD,SAAS,MAAU,EAAM,SAAS,gBAAgB;OACnD;MACD;OACE,KAAK;OACL,QAAQ,EAAG,mCAAmC,eAAe;OAC7D,SAAS,MACP,EAAM,kBACF,GAAG,EAAM,gBAAgB,MACzB,EAAG,uBAAuB,MAAM;OACvC;MACD;OACE,KAAK;OACL,QAAQ,EAAG,gCAAgC,WAAW;OACtD,SAAS,MAAU,EAAM,SAAS,gBAAgB;OACnD;MACF;KACD,CAAA;IACU,CAAA;GACb,EAAA,CAAA,EAEJ,CAAA,GAEH,kBAAC,GAAD;GACE,MAAM,kBAAC,GAAD,EAAW,MAAM,IAAM,CAAA;GAC7B,OAAO,EACL,wCACA,6BACD;GACD,aAAa,EACX,8CACA,oGACD;GACD,QACG,IAWG,KAAA,IAVF,kBAAC,UAAD;IACE,MAAK;IACL,eAAe,GAAe,QAAQ;IACtC,WAAU;cAET,EACC,wCACA,oBACD;IACM,CAAA;GAGb,CAAA;EAEO,CAAA"}

package/dist/devportal/pages/ApiKeysPage.js

@@ -74,8 +74,8 @@ var g = (e) => {
 		description: y("devportal.manageApiKeys", "Manage your API keys for programmatic access"),
 		children: /* @__PURE__ */ h("div", {
 			className: "flex items-center justify-center py-12",
-			children: [/* @__PURE__ */ m(fe, { className: "h-8 w-8 animate-spin text-text-secondary" }), /* @__PURE__ */ m("span", {
-				className: "ml-2 text-text-secondary",
+			children: [/* @__PURE__ */ m(fe, { className: "h-8 w-8 animate-spin text-muted-foreground" }), /* @__PURE__ */ m("span", {
+				className: "ml-2 text-muted-foreground",
 				children: y("devportal.loadingApiKeys", "Loading API keys...")
 			})]
 		})
@@ -84,20 +84,20 @@ var g = (e) => {
 		title: y("devportal.apiKeys", "API Keys"),
 		description: y("devportal.manageApiKeys", "Manage your API keys for programmatic access"),
 		children: /* @__PURE__ */ h("div", {
-			className: "rounded-lg border border-status-error-border/50 bg-status-error-bg/10 p-6 text-center",
+			className: "rounded-lg border border-destructive/50 bg-destructive/10 p-6 text-center",
 			children: [
-				/* @__PURE__ */ m(le, { className: "mx-auto h-8 w-8 text-status-error-text" }),
+				/* @__PURE__ */ m(le, { className: "mx-auto h-8 w-8 text-destructive" }),
 				/* @__PURE__ */ m("h3", {
-					className: "mt-2 font-medium text-status-error-text",
+					className: "mt-2 font-medium text-destructive",
 					children: y("devportal.failedToLoadApiKeys", "Failed to load API keys")
 				}),
 				/* @__PURE__ */ m("p", {
-					className: "mt-1 text-sm text-text-secondary",
+					className: "mt-1 text-sm text-muted-foreground",
 					children: re(I)
 				}),
 				/* @__PURE__ */ m("button", {
 					onClick: () => L(),
-					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",
+					className: "mt-4 rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90",
 					children: y("devportal.tryAgain", "Try Again")
 				})
 			]
@@ -129,7 +129,7 @@ var g = (e) => {
 			render: (e) => /* @__PURE__ */ h("div", {
 				className: "flex items-center gap-3",
 				children: [/* @__PURE__ */ m("div", {
-					className: t("flex h-10 w-10 items-center justify-center rounded-lg", _(e.expiresAt) ? "bg-status-error-bg-subtle text-status-error-text" : "bg-action-primary-bg/10 text-primary"),
+					className: t("flex h-10 w-10 items-center justify-center rounded-lg", _(e.expiresAt) ? "bg-status-error-bg-subtle text-status-error-text" : "bg-primary/10 text-primary"),
 					children: /* @__PURE__ */ m(d, { size: 20 })
 				}), /* @__PURE__ */ h("div", { children: [/* @__PURE__ */ h("div", {
 					className: "flex items-center gap-2",
@@ -148,7 +148,7 @@ var g = (e) => {
 						})
 					]
 				}), e.appName && /* @__PURE__ */ h("p", {
-					className: "text-xs text-text-secondary",
+					className: "text-xs text-muted-foreground",
 					children: ["App: ", e.appName]
 				})] })]
 			})
@@ -157,7 +157,7 @@ var g = (e) => {
 			key: "prefix",
 			header: "Key Prefix",
 			render: (e) => /* @__PURE__ */ h("code", {
-				className: "text-sm text-text-secondary",
+				className: "text-sm text-muted-foreground",
 				children: [e.prefix, "..."]
 			})
 		},
@@ -167,10 +167,10 @@ var g = (e) => {
 			render: (e) => /* @__PURE__ */ h("div", {
 				className: "flex flex-wrap gap-1",
 				children: [e.scopes.slice(0, 3).map((e) => /* @__PURE__ */ m("span", {
-					className: "inline-flex rounded bg-bg-sunken px-1.5 py-0.5 text-xs",
+					className: "inline-flex rounded bg-muted px-1.5 py-0.5 text-xs",
 					children: e
 				}, e)), e.scopes.length > 3 && /* @__PURE__ */ h("span", {
-					className: "text-xs text-text-secondary",
+					className: "text-xs text-muted-foreground",
 					children: ["+", e.scopes.length - 3]
 				})]
 			})
@@ -179,7 +179,7 @@ var g = (e) => {
 			key: "lastUsed",
 			header: "Last Used",
 			render: (e) => /* @__PURE__ */ m("span", {
-				className: "text-sm text-text-secondary",
+				className: "text-sm text-muted-foreground",
 				children: e.lastUsedAt ? new Date(e.lastUsedAt).toLocaleDateString() : "Never"
 			})
 		},
@@ -187,7 +187,7 @@ var g = (e) => {
 			key: "expires",
 			header: "Expires",
 			render: (e) => /* @__PURE__ */ m("span", {
-				className: t("text-sm", _(e.expiresAt) ? "text-status-error-text" : g(e.expiresAt) ? "text-status-warning-text" : "text-text-secondary"),
+				className: t("text-sm", _(e.expiresAt) ? "text-status-error-text" : g(e.expiresAt) ? "text-status-warning-text" : "text-muted-foreground"),
 				children: e.expiresAt ? new Date(e.expiresAt).toLocaleDateString() : "Never"
 			})
 		},
@@ -207,7 +207,7 @@ var g = (e) => {
 			header: "Actions",
 			className: "w-28",
 			render: (e) => _(e.expiresAt) ? /* @__PURE__ */ m("span", {
-				className: "text-xs text-text-secondary",
+				className: "text-xs text-muted-foreground",
 				children: "No actions"
 			}) : /* @__PURE__ */ h("div", {
 				className: "flex items-center gap-1",
@@ -251,7 +251,7 @@ var g = (e) => {
 			description: y("devportal.manageApiKeys", "Manage your API keys for programmatic access"),
 			actions: /* @__PURE__ */ h("button", {
 				onClick: () => W("/api-keys/new"),
-				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",
+				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",
 				children: [/* @__PURE__ */ m(f, { size: 16 }), y("devportal.generateApiKey", "Generate API Key")]
 			}),
 			children: [
@@ -262,7 +262,7 @@ var g = (e) => {
 					onDismiss: () => O(null)
 				}),
 				j && /* @__PURE__ */ m("div", {
-					className: t("rounded-lg border px-4 py-3 text-sm", j.type === "success" ? "border-border-subtle bg-status-success-bg-subtle text-status-success-text" : "border-status-error-border/40 bg-status-error-bg/10 text-status-error-text"),
+					className: t("rounded-lg border px-4 py-3 text-sm", j.type === "success" ? "border-border-subtle bg-status-success-bg-subtle text-status-success-text" : "border-destructive/40 bg-destructive/10 text-destructive"),
 					children: /* @__PURE__ */ h("div", {
 						className: "flex items-center justify-between gap-3",
 						children: [/* @__PURE__ */ m("span", { children: j.message }), /* @__PURE__ */ m("button", {
@@ -280,18 +280,18 @@ var g = (e) => {
 							className: "relative flex-1 max-w-md",
 							children: [/* @__PURE__ */ m(pe, {
 								size: 16,
-								className: "absolute left-3 top-1/2 -translate-y-1/2 text-text-secondary"
+								className: "absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground"
 							}), /* @__PURE__ */ m("input", {
 								type: "text",
 								placeholder: "Search by name, prefix, or app...",
 								value: b,
 								onChange: (e) => x(e.target.value),
-								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"
+								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"
 							})]
 						}), /* @__PURE__ */ h("select", {
 							value: S,
 							onChange: (e) => ye(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",
+							className: "rounded-md border bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary",
 							children: [
 								/* @__PURE__ */ m("option", {
 									value: "all",
@@ -313,9 +313,9 @@ var g = (e) => {
 					className: "grid grid-cols-2 gap-4 sm:grid-cols-4",
 					children: [
 						/* @__PURE__ */ h("div", {
-							className: "rounded-lg border bg-bg-surface p-4",
+							className: "rounded-lg border bg-card p-4",
 							children: [/* @__PURE__ */ h("div", {
-								className: "flex items-center gap-2 text-text-secondary",
+								className: "flex items-center gap-2 text-muted-foreground",
 								children: [/* @__PURE__ */ m(d, { size: 16 }), /* @__PURE__ */ m("span", {
 									className: "text-sm",
 									children: "Total Keys"
@@ -326,7 +326,7 @@ var g = (e) => {
 							})]
 						}),
 						/* @__PURE__ */ h("div", {
-							className: "rounded-lg border bg-bg-surface p-4",
+							className: "rounded-lg border bg-card p-4",
 							children: [/* @__PURE__ */ h("div", {
 								className: "flex items-center gap-2 text-status-success-text",
 								children: [/* @__PURE__ */ m(me, { size: 16 }), /* @__PURE__ */ m("span", {
@@ -339,7 +339,7 @@ var g = (e) => {
 							})]
 						}),
 						/* @__PURE__ */ h("div", {
-							className: "rounded-lg border bg-bg-surface p-4",
+							className: "rounded-lg border bg-card p-4",
 							children: [/* @__PURE__ */ h("div", {
 								className: "flex items-center gap-2 text-status-warning-text",
 								children: [/* @__PURE__ */ m(de, { size: 16 }), /* @__PURE__ */ m("span", {
@@ -352,7 +352,7 @@ var g = (e) => {
 							})]
 						}),
 						/* @__PURE__ */ h("div", {
-							className: "rounded-lg border bg-bg-surface p-4",
+							className: "rounded-lg border bg-card p-4",
 							children: [/* @__PURE__ */ h("div", {
 								className: "flex items-center gap-2 text-status-error-text",
 								children: [/* @__PURE__ */ m(ue, { size: 16 }), /* @__PURE__ */ m("span", {
@@ -367,7 +367,7 @@ var g = (e) => {
 					]
 				}),
 				/* @__PURE__ */ h("p", {
-					className: "text-sm text-text-secondary",
+					className: "text-sm text-muted-foreground",
 					children: [
 						G.length,
 						" API key",
@@ -377,7 +377,7 @@ var g = (e) => {
 					]
 				}),
 				G.length > 0 && /* @__PURE__ */ m("div", {
-					className: "rounded-lg border bg-bg-surface p-4",
+					className: "rounded-lg border bg-card p-4",
 					children: /* @__PURE__ */ h("div", {
 						className: "flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between",
 						children: [/* @__PURE__ */ h("div", {
@@ -395,13 +395,13 @@ var g = (e) => {
 								})]
 							}), k.size > 0 && /* @__PURE__ */ m("button", {
 								onClick: Q,
-								className: "text-sm text-text-secondary hover:text-text-primary",
+								className: "text-sm text-muted-foreground hover:text-foreground",
 								children: "Clear selection"
 							})]
 						}), /* @__PURE__ */ h("div", {
 							className: "flex flex-wrap items-center gap-2",
 							children: [/* @__PURE__ */ h("span", {
-								className: "rounded-full bg-bg-sunken px-3 py-1 text-sm font-medium text-text-secondary",
+								className: "rounded-full bg-muted px-3 py-1 text-sm font-medium text-muted-foreground",
 								children: [k.size, " selected"]
 							}), /* @__PURE__ */ h("button", {
 								onClick: () => P(!0),
@@ -426,7 +426,7 @@ var g = (e) => {
 					description: b || S !== "all" ? y("devportal.tryAdjustingFilters", "Try adjusting your filters") : y("devportal.generateFirstApiKey", "Generate your first API key to start making API calls"),
 					action: !b && S === "all" ? /* @__PURE__ */ h("button", {
 						onClick: () => W("/api-keys/new"),
-						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",
+						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",
 						children: [/* @__PURE__ */ m(f, { size: 16 }), y("devportal.generateApiKey", "Generate API Key")]
 					}) : void 0
 				}),

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-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        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 */}\n        <div className=\"grid grid-cols-2 gap-4 sm:grid-cols-4\">\n          <div className=\"rounded-lg border bg-bg-surface 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\">{stats.total}</p>\n          </div>\n          <div className=\"rounded-lg border bg-bg-surface 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-bg-surface 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-bg-surface 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-text-secondary\">\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-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            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-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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"}
+{"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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"}