feat: Add API keys section to admin dashboard

- Display all API keys with rate limit progress bars
- Show key scope (user-scoped vs service-level)
- Show active/revoked status and last used timestamp
- Query API keys in dashboard route

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Author: StuMason

src/polar_flow_server/admin/routes.py

@@ -28,6 +28,7 @@
 from polar_flow_server.core.security import token_encryption
 from polar_flow_server.models.activity import Activity
 from polar_flow_server.models.activity_samples import ActivitySamples
+from polar_flow_server.models.api_key import APIKey
 from polar_flow_server.models.cardio_load import CardioLoad
 from polar_flow_server.models.continuous_hr import ContinuousHeartRate
 from polar_flow_server.models.exercise import Exercise
@@ -513,6 +514,11 @@ async def admin_dashboard(
         cardio=latest_cardio,
     )
 
+    # Get API keys data
+    api_keys_stmt = select(APIKey).order_by(APIKey.created_at.desc())
+    api_keys_result = await session.execute(api_keys_stmt)
+    api_keys = api_keys_result.scalars().all()
+
     return Template(
         template_name="admin/dashboard.html",
         context={
@@ -533,6 +539,7 @@ async def admin_dashboard(
             "latest_alertness": latest_alertness,
             "sync_interval_hours": settings.sync_interval_hours,
             "recovery_status": recovery_status,
+            "api_keys": api_keys,
             "csrf_token": _get_csrf_token(request),
         },
     )

src/polar_flow_server/templates/admin/dashboard.html

@@ -177,6 +177,91 @@ <h2 class="text-lg font-semibold text-gray-900">Today's Readiness</h2>
     </div>
 </div>
 
+<!-- API Keys Management -->
+<div class="bg-white shadow rounded-lg p-6 mb-6">
+    <div class="flex items-center justify-between mb-4">
+        <div>
+            <h2 class="text-lg font-semibold text-gray-900">API Keys</h2>
+            <p class="text-sm text-gray-600">Manage API keys for service-to-service authentication</p>
+        </div>
+        <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-blue-100 text-blue-800">
+            {{ api_keys|length }} key{% if api_keys|length != 1 %}s{% endif %}
+        </span>
+    </div>
+
+    {% if api_keys %}
+    <div class="overflow-x-auto">
+        <table class="min-w-full divide-y divide-gray-200">
+            <thead class="bg-gray-50">
+                <tr>
+                    <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Key</th>
+                    <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Name</th>
+                    <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Scope</th>
+                    <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Rate Limit</th>
+                    <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
+                    <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Last Used</th>
+                </tr>
+            </thead>
+            <tbody class="bg-white divide-y divide-gray-200">
+                {% for key in api_keys %}
+                <tr class="{% if not key.is_active %}bg-gray-50 opacity-60{% endif %}">
+                    <td class="px-4 py-3 whitespace-nowrap">
+                        <code class="text-sm font-mono bg-gray-100 px-2 py-1 rounded">{{ key.key_prefix }}...</code>
+                    </td>
+                    <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900">{{ key.name }}</td>
+                    <td class="px-4 py-3 whitespace-nowrap">
+                        {% if key.user_id %}
+                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-800">
+                            User: {{ key.user_id[:12] }}{% if key.user_id|length > 12 %}...{% endif %}
+                        </span>
+                        {% else %}
+                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
+                            Service-level
+                        </span>
+                        {% endif %}
+                    </td>
+                    <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
+                        <div class="flex items-center">
+                            <div class="w-16 bg-gray-200 rounded-full h-2 mr-2">
+                                <div class="bg-blue-600 h-2 rounded-full" style="width: {{ (key.rate_limit_remaining / key.rate_limit_requests * 100)|round }}%"></div>
+                            </div>
+                            <span>{{ key.rate_limit_remaining }}/{{ key.rate_limit_requests }}</span>
+                        </div>
+                    </td>
+                    <td class="px-4 py-3 whitespace-nowrap">
+                        {% if key.is_active %}
+                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
+                            Active
+                        </span>
+                        {% else %}
+                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">
+                            Revoked
+                        </span>
+                        {% endif %}
+                    </td>
+                    <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
+                        {% if key.last_used_at %}
+                        {{ key.last_used_at.strftime('%Y-%m-%d %H:%M') }}
+                        {% else %}
+                        <span class="text-gray-400">Never</span>
+                        {% endif %}
+                    </td>
+                </tr>
+                {% endfor %}
+            </tbody>
+        </table>
+    </div>
+    {% else %}
+    <div class="text-center py-8">
+        <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z"></path>
+        </svg>
+        <h3 class="mt-2 text-sm font-medium text-gray-900">No API keys</h3>
+        <p class="mt-1 text-sm text-gray-500">API keys are created when users connect via OAuth.</p>
+    </div>
+    {% endif %}
+</div>
+
 <!-- Sync Control -->
 <div class="bg-white shadow rounded-lg p-6 mb-6">
     <div class="flex items-center justify-between mb-4">