From d22d0e6f59b258db47462d511978d4cf06117d3d Mon Sep 17 00:00:00 2001
From: Ajax Davis <thomasalwyndavis@gmail.com>
Date: Wed, 14 Jan 2026 09:54:50 +1000
Subject: [PATCH] style: format agent page and api keys page

---
 .../src/app/dashboard/agents/[id]/page.tsx    | 26 ++++++++++++-------
 .../settings/tpmjs-api-keys/page.tsx          |  5 ++--
 2 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/apps/web/src/app/dashboard/agents/[id]/page.tsx b/apps/web/src/app/dashboard/agents/[id]/page.tsx
index ce641c8..d4f50af 100644
--- a/apps/web/src/app/dashboard/agents/[id]/page.tsx
+++ b/apps/web/src/app/dashboard/agents/[id]/page.tsx
@@ -759,7 +759,11 @@ export default function AgentDetailPage(): React.ReactElement {
     { id: 'tools' as const, label: 'Tools', count: agentTools.length },
     { id: 'collections' as const, label: 'Collections', count: agentCollections.length },
     { id: 'api' as const, label: 'API' },
-    { id: 'env-vars' as const, label: 'Env Vars', count: envVarsCount > 0 ? envVarsCount : undefined },
+    {
+      id: 'env-vars' as const,
+      label: 'Env Vars',
+      count: envVarsCount > 0 ? envVarsCount : undefined,
+    },
     { id: 'settings' as const, label: 'Settings' },
   ];
 
@@ -783,16 +787,13 @@ export default function AgentDetailPage(): React.ReactElement {
         <Badge variant={agent.isPublic ? 'success' : 'secondary'}>
           {agent.isPublic ? 'Public' : 'Private'}
         </Badge>
-        {executorConfig?.type === 'custom_url' && <Badge variant="secondary">Custom Executor</Badge>}
+        {executorConfig?.type === 'custom_url' && (
+          <Badge variant="secondary">Custom Executor</Badge>
+        )}
       </div>
 
       {/* Tabs */}
-      <Tabs
-        tabs={pageTabs}
-        activeTab={activeTab}
-        onTabChange={handleTabChange}
-        className="mb-6"
-      />
+      <Tabs tabs={pageTabs} activeTab={activeTab} onTabChange={handleTabChange} className="mb-6" />
 
       {/* Tools Tab */}
       {activeTab === 'tools' && (
@@ -948,7 +949,9 @@ export default function AgentDetailPage(): React.ReactElement {
                       className="w-full px-3 py-2 text-left hover:bg-surface-secondary transition-colors first:rounded-t-lg last:rounded-b-lg"
                     >
                       <p className="text-sm font-medium text-foreground">{collection.name}</p>
-                      <p className="text-xs text-foreground-tertiary">{collection.toolCount} tools</p>
+                      <p className="text-xs text-foreground-tertiary">
+                        {collection.toolCount} tools
+                      </p>
                     </button>
                   ))
                 ) : !isSearchingCollections ? (
@@ -1110,7 +1113,10 @@ export default function AgentDetailPage(): React.ReactElement {
                   </select>
                 </div>
                 <div>
-                  <label htmlFor="modelId" className="block text-sm font-medium text-foreground mb-1">
+                  <label
+                    htmlFor="modelId"
+                    className="block text-sm font-medium text-foreground mb-1"
+                  >
                     Model
                   </label>
                   <select
diff --git a/apps/web/src/app/dashboard/settings/tpmjs-api-keys/page.tsx b/apps/web/src/app/dashboard/settings/tpmjs-api-keys/page.tsx
index 25cef8f..a111e88 100644
--- a/apps/web/src/app/dashboard/settings/tpmjs-api-keys/page.tsx
+++ b/apps/web/src/app/dashboard/settings/tpmjs-api-keys/page.tsx
@@ -233,8 +233,9 @@ export default function TpmjsApiKeysPage(): React.ReactElement {
               These keys authenticate you to the TPMJS platform
             </p>
             <p className="text-foreground-secondary">
-              Use platform API keys (tpmjs_sk_...) to access MCP servers, chat with agents from scripts,
-              or connect via the bridge. These are different from AI provider keys which power the AI calls themselves.
+              Use platform API keys (tpmjs_sk_...) to access MCP servers, chat with agents from
+              scripts, or connect via the bridge. These are different from AI provider keys which
+              power the AI calls themselves.
             </p>
           </div>
         </div>