From c0511f3628b8af068d192497d783bf34227e5f00 Mon Sep 17 00:00:00 2001
From: Ajax Davis <thomasalwyndavis@gmail.com>
Date: Wed, 14 Jan 2026 09:22:37 +1000
Subject: [PATCH] feat: add env vars tab and URL-based tab linking

- Move environment variables to dedicated tab on agent and collection pages
- Add URL query param support for deep linking to tabs (?tab=env-vars)
- Remove env vars from settings tab on both pages
---
 .../src/app/dashboard/agents/[id]/page.tsx    | 1008 ++++++++---------
 .../app/dashboard/collections/[id]/page.tsx   |  626 ++++++----
 2 files changed, 870 insertions(+), 764 deletions(-)

diff --git a/apps/web/src/app/dashboard/agents/[id]/page.tsx b/apps/web/src/app/dashboard/agents/[id]/page.tsx
index cbf8bc2..ce641c8 100644
--- a/apps/web/src/app/dashboard/agents/[id]/page.tsx
+++ b/apps/web/src/app/dashboard/agents/[id]/page.tsx
@@ -3,6 +3,7 @@
 import type { AIProvider } from '@tpmjs/types/agent';
 import { PROVIDER_MODELS, SUPPORTED_PROVIDERS } from '@tpmjs/types/agent';
 import type { ExecutorConfig } from '@tpmjs/types/executor';
+import { Badge } from '@tpmjs/ui/Badge/Badge';
 import { Button } from '@tpmjs/ui/Button/Button';
 import { CodeBlock } from '@tpmjs/ui/CodeBlock/CodeBlock';
 import { Icon } from '@tpmjs/ui/Icon/Icon';
@@ -18,12 +19,16 @@ import {
 } from '@tpmjs/ui/Table/Table';
 import { Tabs } from '@tpmjs/ui/Tabs/Tabs';
 import Link from 'next/link';
-import { useParams, useRouter } from 'next/navigation';
+import { useParams, useRouter, useSearchParams } from 'next/navigation';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { DashboardLayout } from '~/components/dashboard/DashboardLayout';
 import { EnvVarsEditor } from '~/components/EnvVarsEditor';
 import { ExecutorConfigPanel } from '~/components/ExecutorConfigPanel';
 
+type PageTabId = 'tools' | 'collections' | 'api' | 'env-vars' | 'settings';
+
+const VALID_TABS: PageTabId[] = ['tools', 'collections', 'api', 'env-vars', 'settings'];
+
 interface Agent {
   id: string;
   uid: string;
@@ -285,14 +290,35 @@ conv = resp.json()  # conv['data']['messages']`,
 export default function AgentDetailPage(): React.ReactElement {
   const params = useParams();
   const router = useRouter();
+  const searchParams = useSearchParams();
   const agentId = params.id as string;
 
+  // Get initial tab from URL or default to 'tools'
+  const tabFromUrl = searchParams.get('tab') as PageTabId | null;
+  const initialTab = tabFromUrl && VALID_TABS.includes(tabFromUrl) ? tabFromUrl : 'tools';
+
   const [agent, setAgent] = useState<Agent | null>(null);
   const [isLoading, setIsLoading] = useState(true);
-  const [isEditing, setIsEditing] = useState(false);
   const [isSaving, setIsSaving] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [executorConfig, setExecutorConfig] = useState<ExecutorConfig | null>(null);
+  const [activeTab, setActiveTab] = useState<PageTabId>(initialTab);
+
+  // Update URL when tab changes
+  const handleTabChange = (tabId: string) => {
+    const newTab = tabId as PageTabId;
+    setActiveTab(newTab);
+    const newParams = new URLSearchParams(searchParams.toString());
+    if (newTab === 'tools') {
+      newParams.delete('tab');
+    } else {
+      newParams.set('tab', newTab);
+    }
+    const queryString = newParams.toString();
+    router.replace(`/dashboard/agents/${agentId}${queryString ? `?${queryString}` : ''}`, {
+      scroll: false,
+    });
+  };
 
   // Tools state
   const [agentTools, setAgentTools] = useState<AgentTool[]>([]);
@@ -665,7 +691,6 @@ export default function AgentDetailPage(): React.ReactElement {
 
       if (result.success) {
         setAgent(result.data);
-        setIsEditing(false);
       } else {
         throw new Error(result.error || 'Failed to update agent');
       }
@@ -728,6 +753,16 @@ export default function AgentDetailPage(): React.ReactElement {
     );
   }
 
+  const envVarsCount = envVars ? Object.keys(envVars).length : 0;
+
+  const pageTabs = [
+    { 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: 'settings' as const, label: 'Settings' },
+  ];
+
   return (
     <DashboardLayout
       title={agent.name}
@@ -743,540 +778,479 @@ export default function AgentDetailPage(): React.ReactElement {
         </Link>
       }
     >
-      {/* Configuration */}
-      <div className="bg-surface border border-border rounded-lg p-6 mb-8">
-        <div className="flex items-center justify-between mb-4">
-          <h2 className="text-lg font-medium text-foreground">Configuration</h2>
-          {!isEditing && (
-            <Button size="sm" variant="secondary" onClick={() => setIsEditing(true)}>
-              <Icon icon="edit" size="xs" className="mr-1" />
-              Edit
-            </Button>
-          )}
-        </div>
+      {/* Status badges */}
+      <div className="flex items-center gap-2 mb-6">
+        <Badge variant={agent.isPublic ? 'success' : 'secondary'}>
+          {agent.isPublic ? 'Public' : 'Private'}
+        </Badge>
+        {executorConfig?.type === 'custom_url' && <Badge variant="secondary">Custom Executor</Badge>}
+      </div>
 
-        {isEditing ? (
-          <div className="space-y-4">
-            <div className="grid gap-4 sm:grid-cols-2">
-              <div>
-                <label htmlFor="name" className="block text-sm font-medium text-foreground mb-1">
-                  Name
-                </label>
-                <input
-                  type="text"
-                  id="name"
-                  name="name"
-                  value={formData.name}
-                  onChange={handleChange}
-                  className="w-full px-3 py-2 bg-surface border border-border rounded-lg text-foreground focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary"
-                />
-              </div>
-              <div>
-                <label htmlFor="uid" className="block text-sm font-medium text-foreground mb-1">
-                  UID
-                </label>
-                <input
-                  type="text"
-                  id="uid"
-                  name="uid"
-                  value={formData.uid}
-                  onChange={handleChange}
-                  className="w-full px-3 py-2 bg-surface border border-border rounded-lg text-foreground font-mono text-sm focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary"
-                />
-              </div>
-            </div>
+      {/* Tabs */}
+      <Tabs
+        tabs={pageTabs}
+        activeTab={activeTab}
+        onTabChange={handleTabChange}
+        className="mb-6"
+      />
 
-            <div>
-              <label
-                htmlFor="description"
-                className="block text-sm font-medium text-foreground mb-1"
-              >
-                Description
-              </label>
-              <textarea
-                id="description"
-                name="description"
-                value={formData.description}
-                onChange={handleChange}
-                rows={2}
-                className="w-full px-3 py-2 bg-surface border border-border rounded-lg text-foreground focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary resize-none"
+      {/* Tools Tab */}
+      {activeTab === 'tools' && (
+        <div className="bg-surface border border-border rounded-lg overflow-hidden">
+          {/* Add Tool Search */}
+          <div ref={toolSearchRef} className="relative p-4 border-b border-border">
+            <div className="relative">
+              <Icon
+                icon="search"
+                size="xs"
+                className="absolute left-3 top-1/2 -translate-y-1/2 text-foreground-tertiary"
               />
-            </div>
-
-            <div className="grid gap-4 sm:grid-cols-2">
-              <div>
-                <label
-                  htmlFor="provider"
-                  className="block text-sm font-medium text-foreground mb-1"
-                >
-                  Provider
-                </label>
-                <select
-                  id="provider"
-                  name="provider"
-                  value={formData.provider}
-                  onChange={handleChange}
-                  className="w-full px-3 py-2 bg-surface border border-border rounded-lg text-foreground focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary"
-                >
-                  {SUPPORTED_PROVIDERS.map((p) => (
-                    <option key={p} value={p}>
-                      {PROVIDER_DISPLAY_NAMES[p]}
-                    </option>
-                  ))}
-                </select>
-              </div>
-              <div>
-                <label htmlFor="modelId" className="block text-sm font-medium text-foreground mb-1">
-                  Model
-                </label>
-                <select
-                  id="modelId"
-                  name="modelId"
-                  value={formData.modelId}
-                  onChange={handleChange}
-                  className="w-full px-3 py-2 bg-surface border border-border rounded-lg text-foreground focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary"
-                >
-                  {models.map((m) => (
-                    <option key={m.id} value={m.id}>
-                      {m.name}
-                    </option>
-                  ))}
-                </select>
-              </div>
-            </div>
-
-            <div>
-              <label
-                htmlFor="systemPrompt"
-                className="block text-sm font-medium text-foreground mb-1"
-              >
-                System Prompt
-              </label>
-              <textarea
-                id="systemPrompt"
-                name="systemPrompt"
-                value={formData.systemPrompt}
-                onChange={handleChange}
-                rows={6}
-                className="w-full px-3 py-2 bg-surface border border-border rounded-lg text-foreground font-mono text-sm focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary resize-none"
-              />
-            </div>
-
-            <div className="grid gap-4 sm:grid-cols-3">
-              <div>
-                <label
-                  htmlFor="temperature"
-                  className="block text-sm font-medium text-foreground mb-1"
-                >
-                  Temperature
-                </label>
-                <input
-                  type="number"
-                  id="temperature"
-                  name="temperature"
-                  value={formData.temperature}
-                  onChange={handleChange}
-                  min={0}
-                  max={2}
-                  step={0.1}
-                  className="w-full px-3 py-2 bg-surface border border-border rounded-lg text-foreground focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary"
-                />
-              </div>
-              <div>
-                <label
-                  htmlFor="maxToolCallsPerTurn"
-                  className="block text-sm font-medium text-foreground mb-1"
-                >
-                  Max Tool Calls
-                </label>
-                <input
-                  type="number"
-                  id="maxToolCallsPerTurn"
-                  name="maxToolCallsPerTurn"
-                  value={formData.maxToolCallsPerTurn}
-                  onChange={handleChange}
-                  min={1}
-                  max={100}
-                  className="w-full px-3 py-2 bg-surface border border-border rounded-lg text-foreground focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary"
-                />
-              </div>
-              <div>
-                <label
-                  htmlFor="maxMessagesInContext"
-                  className="block text-sm font-medium text-foreground mb-1"
-                >
-                  Context Messages
-                </label>
-                <input
-                  type="number"
-                  id="maxMessagesInContext"
-                  name="maxMessagesInContext"
-                  value={formData.maxMessagesInContext}
-                  onChange={handleChange}
-                  min={1}
-                  max={100}
-                  className="w-full px-3 py-2 bg-surface border border-border rounded-lg text-foreground focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary"
-                />
-              </div>
-            </div>
-
-            <div className="flex items-center justify-between p-4 bg-surface rounded-lg border border-border">
-              <div>
-                <p className="text-sm font-medium text-foreground">Public Visibility</p>
-                <p className="text-xs text-foreground-secondary">
-                  Make this agent visible on the public agents page
-                </p>
-              </div>
-              <Switch
-                checked={formData.isPublic}
-                onChange={(checked) => setFormData((prev) => ({ ...prev, isPublic: checked }))}
-              />
-            </div>
-
-            {/* Executor Configuration */}
-            <div className="pt-4 border-t border-border">
-              <ExecutorConfigPanel
-                value={executorConfig}
-                onChange={setExecutorConfig}
-                disabled={isSaving}
-              />
-            </div>
-
-            {/* Environment Variables */}
-            <EnvVarsEditor
-              value={envVars}
-              onChange={setEnvVars}
-              title="Environment Variables"
-              description="Passed to tools at runtime. Agent vars override collection vars."
-              disabled={isSaving}
-              className="pt-4 border-t border-border"
-            />
-
-            <div className="flex items-center justify-end gap-2 pt-4">
-              <Button
-                variant="outline"
-                onClick={() => {
-                  setIsEditing(false);
-                  setFormData({
-                    name: agent.name,
-                    uid: agent.uid,
-                    description: agent.description || '',
-                    provider: agent.provider,
-                    modelId: agent.modelId,
-                    systemPrompt: agent.systemPrompt || '',
-                    temperature: agent.temperature,
-                    maxToolCallsPerTurn: agent.maxToolCallsPerTurn,
-                    maxMessagesInContext: agent.maxMessagesInContext,
-                    isPublic: agent.isPublic,
-                  });
-                  // Reset executor config to agent's current value
-                  if (agent.executorType === 'custom_url' && agent.executorConfig) {
-                    setExecutorConfig({
-                      type: 'custom_url',
-                      url: agent.executorConfig.url,
-                      apiKey: agent.executorConfig.apiKey,
-                    });
-                  } else {
-                    setExecutorConfig(agent.executorType ? { type: 'default' } : null);
-                  }
-                  // Reset env vars to agent's current value
-                  if (agent.envVars && typeof agent.envVars === 'object') {
-                    setEnvVars(agent.envVars as Record<string, string>);
-                  } else {
-                    setEnvVars(null);
-                  }
+              <input
+                type="text"
+                value={toolSearch}
+                onChange={(e) => {
+                  setToolSearch(e.target.value);
+                  setShowToolSearch(true);
                 }}
-              >
-                Cancel
-              </Button>
-              <Button onClick={handleSave} disabled={isSaving}>
-                {isSaving ? 'Saving...' : 'Save Changes'}
-              </Button>
+                onFocus={() => setShowToolSearch(true)}
+                placeholder="Search tools to add..."
+                className="w-full pl-9 pr-3 py-2 bg-surface border border-border rounded-lg text-foreground text-sm placeholder:text-foreground-tertiary focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary"
+              />
+              {isSearchingTools && (
+                <div className="absolute right-3 top-1/2 -translate-y-1/2">
+                  <div className="w-4 h-4 border-2 border-primary border-t-transparent rounded-full animate-spin" />
+                </div>
+              )}
             </div>
+
+            {/* Search Results Dropdown */}
+            {showToolSearch && toolSearch && (
+              <div className="absolute z-10 left-4 right-4 mt-1 bg-surface border border-border rounded-lg shadow-lg max-h-64 overflow-y-auto">
+                {toolSearchResults.length > 0 ? (
+                  toolSearchResults.map((tool) => (
+                    <button
+                      type="button"
+                      key={tool.id}
+                      onClick={() => addTool(tool.id)}
+                      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">{tool.name}</p>
+                      <p className="text-xs text-foreground-tertiary font-mono">
+                        {tool.npmPackageName}
+                      </p>
+                    </button>
+                  ))
+                ) : !isSearchingTools ? (
+                  <div className="px-3 py-4 text-center text-sm text-foreground-tertiary">
+                    No tools found
+                  </div>
+                ) : null}
+              </div>
+            )}
           </div>
-        ) : (
-          <dl className="grid gap-4 sm:grid-cols-2">
-            <div>
-              <dt className="text-sm text-foreground-secondary">Description</dt>
-              <dd className="text-foreground">{agent.description || '-'}</dd>
-            </div>
-            <div>
-              <dt className="text-sm text-foreground-secondary">UID</dt>
-              <dd className="text-foreground font-mono text-sm">{agent.uid}</dd>
-            </div>
-            <div>
-              <dt className="text-sm text-foreground-secondary">Temperature</dt>
-              <dd className="text-foreground">{agent.temperature}</dd>
-            </div>
-            <div>
-              <dt className="text-sm text-foreground-secondary">Context Messages</dt>
-              <dd className="text-foreground">{agent.maxMessagesInContext}</dd>
-            </div>
-            <div>
-              <dt className="text-sm text-foreground-secondary">Visibility</dt>
-              <dd className="text-foreground flex items-center gap-2">
-                <Icon
-                  icon={agent.isPublic ? 'globe' : 'key'}
-                  size="xs"
-                  className={agent.isPublic ? 'text-green-500' : 'text-foreground-tertiary'}
+
+          {/* Tools Table */}
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>Tool</TableHead>
+                <TableHead>Package</TableHead>
+                <TableHead className="w-[80px] text-right">Actions</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {agentTools.length === 0 ? (
+                <TableEmpty
+                  colSpan={3}
+                  icon={
+                    <div className="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center">
+                      <Icon icon="puzzle" size="md" className="text-primary" />
+                    </div>
+                  }
+                  title="No tools attached"
+                  description="Search above to add tools to this agent"
                 />
-                {agent.isPublic ? 'Public' : 'Private'}
-              </dd>
-            </div>
-            <div className="sm:col-span-2">
-              <dt className="text-sm text-foreground-secondary">System Prompt</dt>
-              <dd className="text-foreground font-mono text-sm whitespace-pre-wrap bg-surface-secondary rounded-lg p-3 mt-1">
-                {agent.systemPrompt || '(No system prompt)'}
-              </dd>
-            </div>
-          </dl>
-        )}
-      </div>
-
-      {/* API Reference */}
-      <ApiDocsSection agent={agent} agentTools={agentTools} />
-
-      {/* Tools Section */}
-      <div className="bg-surface border border-border rounded-lg overflow-hidden mb-8">
-        <div className="flex items-center justify-between p-4 border-b border-border">
-          <h2 className="text-lg font-medium text-foreground">Tools</h2>
-          <span className="text-sm text-foreground-tertiary">{agentTools.length} attached</span>
+              ) : (
+                agentTools.map((at) => (
+                  <TableRow key={at.id}>
+                    <TableCell>
+                      <div className="flex items-center gap-3">
+                        <div className="w-8 h-8 rounded-lg bg-primary/10 flex items-center justify-center flex-shrink-0">
+                          <Icon icon="puzzle" size="sm" className="text-primary" />
+                        </div>
+                        <span className="font-medium text-foreground">{at.tool.name}</span>
+                      </div>
+                    </TableCell>
+                    <TableCell>
+                      <span className="text-foreground-secondary font-mono text-sm">
+                        {at.tool.npmPackageName}
+                      </span>
+                    </TableCell>
+                    <TableCell>
+                      <div className="flex items-center justify-end">
+                        <Button
+                          size="sm"
+                          variant="ghost"
+                          onClick={() => removeTool(at.toolId)}
+                          title="Remove tool"
+                          className="text-error hover:text-error hover:bg-error/10"
+                        >
+                          <Icon icon="trash" size="xs" />
+                        </Button>
+                      </div>
+                    </TableCell>
+                  </TableRow>
+                ))
+              )}
+            </TableBody>
+          </Table>
         </div>
+      )}
 
-        {/* Add Tool Search */}
-        <div ref={toolSearchRef} className="relative p-4 border-b border-border">
-          <div className="relative">
-            <Icon
-              icon="search"
-              size="xs"
-              className="absolute left-3 top-1/2 -translate-y-1/2 text-foreground-tertiary"
-            />
-            <input
-              type="text"
-              value={toolSearch}
-              onChange={(e) => {
-                setToolSearch(e.target.value);
-                setShowToolSearch(true);
-              }}
-              onFocus={() => setShowToolSearch(true)}
-              placeholder="Search tools to add..."
-              className="w-full pl-9 pr-3 py-2 bg-surface border border-border rounded-lg text-foreground text-sm placeholder:text-foreground-tertiary focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary"
-            />
-            {isSearchingTools && (
-              <div className="absolute right-3 top-1/2 -translate-y-1/2">
-                <div className="w-4 h-4 border-2 border-primary border-t-transparent rounded-full animate-spin" />
+      {/* Collections Tab */}
+      {activeTab === 'collections' && (
+        <div className="bg-surface border border-border rounded-lg overflow-hidden">
+          {/* Add Collection Search */}
+          <div ref={collectionSearchRef} className="relative p-4 border-b border-border">
+            <div className="relative">
+              <Icon
+                icon="search"
+                size="xs"
+                className="absolute left-3 top-1/2 -translate-y-1/2 text-foreground-tertiary"
+              />
+              <input
+                type="text"
+                value={collectionSearch}
+                onChange={(e) => {
+                  setCollectionSearch(e.target.value);
+                  setShowCollectionSearch(true);
+                }}
+                onFocus={() => setShowCollectionSearch(true)}
+                placeholder="Search collections to add..."
+                className="w-full pl-9 pr-3 py-2 bg-surface border border-border rounded-lg text-foreground text-sm placeholder:text-foreground-tertiary focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary"
+              />
+              {isSearchingCollections && (
+                <div className="absolute right-3 top-1/2 -translate-y-1/2">
+                  <div className="w-4 h-4 border-2 border-primary border-t-transparent rounded-full animate-spin" />
+                </div>
+              )}
+            </div>
+
+            {/* Search Results Dropdown */}
+            {showCollectionSearch && collectionSearch && (
+              <div className="absolute z-10 left-4 right-4 mt-1 bg-surface border border-border rounded-lg shadow-lg max-h-64 overflow-y-auto">
+                {collectionSearchResults.length > 0 ? (
+                  collectionSearchResults.map((collection) => (
+                    <button
+                      type="button"
+                      key={collection.id}
+                      onClick={() => addCollection(collection.id)}
+                      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>
+                    </button>
+                  ))
+                ) : !isSearchingCollections ? (
+                  <div className="px-3 py-4 text-center text-sm text-foreground-tertiary">
+                    No collections found
+                  </div>
+                ) : null}
               </div>
             )}
           </div>
 
-          {/* Search Results Dropdown */}
-          {showToolSearch && toolSearch && (
-            <div className="absolute z-10 left-4 right-4 mt-1 bg-surface border border-border rounded-lg shadow-lg max-h-64 overflow-y-auto">
-              {toolSearchResults.length > 0 ? (
-                toolSearchResults.map((tool) => (
-                  <button
-                    type="button"
-                    key={tool.id}
-                    onClick={() => addTool(tool.id)}
-                    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">{tool.name}</p>
-                    <p className="text-xs text-foreground-tertiary font-mono">
-                      {tool.npmPackageName}
-                    </p>
-                  </button>
-                ))
-              ) : !isSearchingTools ? (
-                <div className="px-3 py-4 text-center text-sm text-foreground-tertiary">
-                  No tools found
-                </div>
-              ) : null}
-            </div>
-          )}
-        </div>
-
-        {/* Tools Table */}
-        <Table>
-          <TableHeader>
-            <TableRow>
-              <TableHead>Tool</TableHead>
-              <TableHead>Package</TableHead>
-              <TableHead className="w-[80px] text-right">Actions</TableHead>
-            </TableRow>
-          </TableHeader>
-          <TableBody>
-            {agentTools.length === 0 ? (
-              <TableEmpty
-                colSpan={3}
-                icon={
-                  <div className="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center">
-                    <Icon icon="puzzle" size="md" className="text-primary" />
-                  </div>
-                }
-                title="No tools attached"
-                description="Search above to add tools to this agent"
-              />
-            ) : (
-              agentTools.map((at) => (
-                <TableRow key={at.id}>
-                  <TableCell>
-                    <div className="flex items-center gap-3">
-                      <div className="w-8 h-8 rounded-lg bg-primary/10 flex items-center justify-center flex-shrink-0">
-                        <Icon icon="puzzle" size="sm" className="text-primary" />
+          {/* Collections Table */}
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>Collection</TableHead>
+                <TableHead>Tools</TableHead>
+                <TableHead className="w-[80px] text-right">Actions</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {agentCollections.length === 0 ? (
+                <TableEmpty
+                  colSpan={3}
+                  icon={
+                    <div className="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center">
+                      <Icon icon="folder" size="md" className="text-primary" />
+                    </div>
+                  }
+                  title="No collections attached"
+                  description="Search above to add collections to this agent"
+                />
+              ) : (
+                agentCollections.map((ac) => (
+                  <TableRow key={ac.id}>
+                    <TableCell>
+                      <div className="flex items-center gap-3">
+                        <div className="w-8 h-8 rounded-lg bg-primary/10 flex items-center justify-center flex-shrink-0">
+                          <Icon icon="folder" size="sm" className="text-primary" />
+                        </div>
+                        <span className="font-medium text-foreground">{ac.collection.name}</span>
                       </div>
-                      <span className="font-medium text-foreground">{at.tool.name}</span>
-                    </div>
-                  </TableCell>
-                  <TableCell>
-                    <span className="text-foreground-secondary font-mono text-sm">
-                      {at.tool.npmPackageName}
-                    </span>
-                  </TableCell>
-                  <TableCell>
-                    <div className="flex items-center justify-end">
-                      <Button
-                        size="sm"
-                        variant="ghost"
-                        onClick={() => removeTool(at.toolId)}
-                        title="Remove tool"
-                      >
-                        <Icon icon="trash" size="xs" />
-                      </Button>
-                    </div>
-                  </TableCell>
-                </TableRow>
-              ))
-            )}
-          </TableBody>
-        </Table>
-      </div>
-
-      {/* Collections Section */}
-      <div className="bg-surface border border-border rounded-lg overflow-hidden mb-8">
-        <div className="flex items-center justify-between p-4 border-b border-border">
-          <h2 className="text-lg font-medium text-foreground">Collections</h2>
-          <span className="text-sm text-foreground-tertiary">
-            {agentCollections.length} attached
-          </span>
+                    </TableCell>
+                    <TableCell>
+                      <span className="text-foreground-secondary text-sm">
+                        {ac.collection.toolCount} tools
+                      </span>
+                    </TableCell>
+                    <TableCell>
+                      <div className="flex items-center justify-end">
+                        <Button
+                          size="sm"
+                          variant="ghost"
+                          onClick={() => removeCollection(ac.collectionId)}
+                          title="Remove collection"
+                          className="text-error hover:text-error hover:bg-error/10"
+                        >
+                          <Icon icon="trash" size="xs" />
+                        </Button>
+                      </div>
+                    </TableCell>
+                  </TableRow>
+                ))
+              )}
+            </TableBody>
+          </Table>
         </div>
+      )}
 
-        {/* Add Collection Search */}
-        <div ref={collectionSearchRef} className="relative p-4 border-b border-border">
-          <div className="relative">
-            <Icon
-              icon="search"
-              size="xs"
-              className="absolute left-3 top-1/2 -translate-y-1/2 text-foreground-tertiary"
-            />
-            <input
-              type="text"
-              value={collectionSearch}
-              onChange={(e) => {
-                setCollectionSearch(e.target.value);
-                setShowCollectionSearch(true);
-              }}
-              onFocus={() => setShowCollectionSearch(true)}
-              placeholder="Search collections to add..."
-              className="w-full pl-9 pr-3 py-2 bg-surface border border-border rounded-lg text-foreground text-sm placeholder:text-foreground-tertiary focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary"
-            />
-            {isSearchingCollections && (
-              <div className="absolute right-3 top-1/2 -translate-y-1/2">
-                <div className="w-4 h-4 border-2 border-primary border-t-transparent rounded-full animate-spin" />
+      {/* API Tab */}
+      {activeTab === 'api' && <ApiDocsSection agent={agent} agentTools={agentTools} />}
+
+      {/* Env Vars Tab */}
+      {activeTab === 'env-vars' && (
+        <div className="bg-surface border border-border rounded-lg p-6">
+          <EnvVarsEditor
+            value={envVars}
+            onChange={setEnvVars}
+            title="Environment Variables"
+            description="Passed to tools at runtime. Agent vars override collection vars."
+            disabled={isSaving}
+          />
+        </div>
+      )}
+
+      {/* Settings Tab */}
+      {activeTab === 'settings' && (
+        <div className="space-y-6">
+          {/* Agent Details */}
+          <div className="bg-surface border border-border rounded-lg p-6">
+            <h3 className="text-lg font-medium text-foreground mb-4">Agent Details</h3>
+            <div className="space-y-4">
+              <div className="grid gap-4 sm:grid-cols-2">
+                <div>
+                  <label htmlFor="name" className="block text-sm font-medium text-foreground mb-1">
+                    Name
+                  </label>
+                  <input
+                    type="text"
+                    id="name"
+                    name="name"
+                    value={formData.name}
+                    onChange={handleChange}
+                    className="w-full px-3 py-2 bg-surface border border-border rounded-lg text-foreground focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary"
+                  />
+                </div>
+                <div>
+                  <label htmlFor="uid" className="block text-sm font-medium text-foreground mb-1">
+                    UID
+                  </label>
+                  <input
+                    type="text"
+                    id="uid"
+                    name="uid"
+                    value={formData.uid}
+                    onChange={handleChange}
+                    className="w-full px-3 py-2 bg-surface border border-border rounded-lg text-foreground font-mono text-sm focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary"
+                  />
+                </div>
               </div>
-            )}
+
+              <div>
+                <label
+                  htmlFor="description"
+                  className="block text-sm font-medium text-foreground mb-1"
+                >
+                  Description
+                </label>
+                <textarea
+                  id="description"
+                  name="description"
+                  value={formData.description}
+                  onChange={handleChange}
+                  rows={2}
+                  className="w-full px-3 py-2 bg-surface border border-border rounded-lg text-foreground focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary resize-none"
+                />
+              </div>
+
+              <div className="grid gap-4 sm:grid-cols-2">
+                <div>
+                  <label
+                    htmlFor="provider"
+                    className="block text-sm font-medium text-foreground mb-1"
+                  >
+                    Provider
+                  </label>
+                  <select
+                    id="provider"
+                    name="provider"
+                    value={formData.provider}
+                    onChange={handleChange}
+                    className="w-full px-3 py-2 bg-surface border border-border rounded-lg text-foreground focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary"
+                  >
+                    {SUPPORTED_PROVIDERS.map((p) => (
+                      <option key={p} value={p}>
+                        {PROVIDER_DISPLAY_NAMES[p]}
+                      </option>
+                    ))}
+                  </select>
+                </div>
+                <div>
+                  <label htmlFor="modelId" className="block text-sm font-medium text-foreground mb-1">
+                    Model
+                  </label>
+                  <select
+                    id="modelId"
+                    name="modelId"
+                    value={formData.modelId}
+                    onChange={handleChange}
+                    className="w-full px-3 py-2 bg-surface border border-border rounded-lg text-foreground focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary"
+                  >
+                    {models.map((m) => (
+                      <option key={m.id} value={m.id}>
+                        {m.name}
+                      </option>
+                    ))}
+                  </select>
+                </div>
+              </div>
+
+              <div>
+                <label
+                  htmlFor="systemPrompt"
+                  className="block text-sm font-medium text-foreground mb-1"
+                >
+                  System Prompt
+                </label>
+                <textarea
+                  id="systemPrompt"
+                  name="systemPrompt"
+                  value={formData.systemPrompt}
+                  onChange={handleChange}
+                  rows={6}
+                  className="w-full px-3 py-2 bg-surface border border-border rounded-lg text-foreground font-mono text-sm focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary resize-none"
+                />
+              </div>
+
+              <div className="grid gap-4 sm:grid-cols-3">
+                <div>
+                  <label
+                    htmlFor="temperature"
+                    className="block text-sm font-medium text-foreground mb-1"
+                  >
+                    Temperature
+                  </label>
+                  <input
+                    type="number"
+                    id="temperature"
+                    name="temperature"
+                    value={formData.temperature}
+                    onChange={handleChange}
+                    min={0}
+                    max={2}
+                    step={0.1}
+                    className="w-full px-3 py-2 bg-surface border border-border rounded-lg text-foreground focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary"
+                  />
+                </div>
+                <div>
+                  <label
+                    htmlFor="maxToolCallsPerTurn"
+                    className="block text-sm font-medium text-foreground mb-1"
+                  >
+                    Max Tool Calls
+                  </label>
+                  <input
+                    type="number"
+                    id="maxToolCallsPerTurn"
+                    name="maxToolCallsPerTurn"
+                    value={formData.maxToolCallsPerTurn}
+                    onChange={handleChange}
+                    min={1}
+                    max={100}
+                    className="w-full px-3 py-2 bg-surface border border-border rounded-lg text-foreground focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary"
+                  />
+                </div>
+                <div>
+                  <label
+                    htmlFor="maxMessagesInContext"
+                    className="block text-sm font-medium text-foreground mb-1"
+                  >
+                    Context Messages
+                  </label>
+                  <input
+                    type="number"
+                    id="maxMessagesInContext"
+                    name="maxMessagesInContext"
+                    value={formData.maxMessagesInContext}
+                    onChange={handleChange}
+                    min={1}
+                    max={100}
+                    className="w-full px-3 py-2 bg-surface border border-border rounded-lg text-foreground focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary"
+                  />
+                </div>
+              </div>
+
+              <div className="flex items-center justify-between p-4 bg-surface-secondary rounded-lg border border-border">
+                <div>
+                  <p className="text-sm font-medium text-foreground">Public Visibility</p>
+                  <p className="text-xs text-foreground-secondary">
+                    Make this agent visible on the public agents page
+                  </p>
+                </div>
+                <Switch
+                  checked={formData.isPublic}
+                  onChange={(checked) => setFormData((prev) => ({ ...prev, isPublic: checked }))}
+                />
+              </div>
+
+              <div className="flex justify-end pt-2">
+                <Button onClick={handleSave} disabled={isSaving}>
+                  {isSaving ? 'Saving...' : 'Save Changes'}
+                </Button>
+              </div>
+            </div>
           </div>
 
-          {/* Search Results Dropdown */}
-          {showCollectionSearch && collectionSearch && (
-            <div className="absolute z-10 left-4 right-4 mt-1 bg-surface border border-border rounded-lg shadow-lg max-h-64 overflow-y-auto">
-              {collectionSearchResults.length > 0 ? (
-                collectionSearchResults.map((collection) => (
-                  <button
-                    type="button"
-                    key={collection.id}
-                    onClick={() => addCollection(collection.id)}
-                    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>
-                  </button>
-                ))
-              ) : !isSearchingCollections ? (
-                <div className="px-3 py-4 text-center text-sm text-foreground-tertiary">
-                  No collections found
-                </div>
-              ) : null}
-            </div>
-          )}
+          {/* Executor Configuration */}
+          <div className="bg-surface border border-border rounded-lg p-6">
+            <ExecutorConfigPanel
+              value={executorConfig}
+              onChange={setExecutorConfig}
+              disabled={isSaving}
+            />
+          </div>
+
+          {/* Danger Zone */}
+          <div className="bg-surface border border-error/30 rounded-lg p-6">
+            <h3 className="text-lg font-medium text-error mb-2">Danger Zone</h3>
+            <p className="text-sm text-foreground-secondary mb-4">
+              Once you delete an agent, there is no going back. Please be certain.
+            </p>
+            <Button
+              variant="outline"
+              onClick={handleDelete}
+              className="text-error border-error/50 hover:bg-error/10"
+            >
+              <Icon icon="trash" size="xs" className="mr-1" />
+              Delete Agent
+            </Button>
+          </div>
         </div>
-
-        {/* Collections Table */}
-        <Table>
-          <TableHeader>
-            <TableRow>
-              <TableHead>Collection</TableHead>
-              <TableHead>Tools</TableHead>
-              <TableHead className="w-[80px] text-right">Actions</TableHead>
-            </TableRow>
-          </TableHeader>
-          <TableBody>
-            {agentCollections.length === 0 ? (
-              <TableEmpty
-                colSpan={3}
-                icon={
-                  <div className="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center">
-                    <Icon icon="folder" size="md" className="text-primary" />
-                  </div>
-                }
-                title="No collections attached"
-                description="Search above to add collections to this agent"
-              />
-            ) : (
-              agentCollections.map((ac) => (
-                <TableRow key={ac.id}>
-                  <TableCell>
-                    <div className="flex items-center gap-3">
-                      <div className="w-8 h-8 rounded-lg bg-primary/10 flex items-center justify-center flex-shrink-0">
-                        <Icon icon="folder" size="sm" className="text-primary" />
-                      </div>
-                      <span className="font-medium text-foreground">{ac.collection.name}</span>
-                    </div>
-                  </TableCell>
-                  <TableCell>
-                    <span className="text-foreground-secondary text-sm">
-                      {ac.collection.toolCount} tools
-                    </span>
-                  </TableCell>
-                  <TableCell>
-                    <div className="flex items-center justify-end">
-                      <Button
-                        size="sm"
-                        variant="ghost"
-                        onClick={() => removeCollection(ac.collectionId)}
-                        title="Remove collection"
-                      >
-                        <Icon icon="trash" size="xs" />
-                      </Button>
-                    </div>
-                  </TableCell>
-                </TableRow>
-              ))
-            )}
-          </TableBody>
-        </Table>
-      </div>
-
-      {/* Danger Zone */}
-      <div className="bg-surface border border-red-200 dark:border-red-800 rounded-lg p-6">
-        <h2 className="text-lg font-medium text-red-600 dark:text-red-400 mb-4">Danger Zone</h2>
-        <p className="text-sm text-foreground-secondary mb-4">
-          Once you delete an agent, there is no going back. Please be certain.
-        </p>
-        <Button variant="outline" onClick={handleDelete}>
-          <Icon icon="trash" size="xs" className="mr-1" />
-          Delete Agent
-        </Button>
-      </div>
+      )}
     </DashboardLayout>
   );
 }
diff --git a/apps/web/src/app/dashboard/collections/[id]/page.tsx b/apps/web/src/app/dashboard/collections/[id]/page.tsx
index 91c4219..fa9737f 100644
--- a/apps/web/src/app/dashboard/collections/[id]/page.tsx
+++ b/apps/web/src/app/dashboard/collections/[id]/page.tsx
@@ -4,149 +4,52 @@ import type { ExecutorConfig } from '@tpmjs/types/executor';
 import { Badge } from '@tpmjs/ui/Badge/Badge';
 import { Button } from '@tpmjs/ui/Button/Button';
 import { Icon } from '@tpmjs/ui/Icon/Icon';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableEmpty,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@tpmjs/ui/Table/Table';
+import { Tabs } from '@tpmjs/ui/Tabs/Tabs';
 import Link from 'next/link';
-import { useParams, useRouter } from 'next/navigation';
+import { useParams, useRouter, useSearchParams } from 'next/navigation';
 import { useCallback, useEffect, useState } from 'react';
 import { AddToolSearch } from '~/components/collections/AddToolSearch';
 import { CollectionForm } from '~/components/collections/CollectionForm';
-import { CollectionToolList } from '~/components/collections/CollectionToolList';
 import { DashboardLayout } from '~/components/dashboard/DashboardLayout';
 import { EnvVarsEditor } from '~/components/EnvVarsEditor';
 import { ExecutorConfigPanel } from '~/components/ExecutorConfigPanel';
 
-function McpUrlSection({ username, slug }: { username: string; slug: string }) {
-  const [copiedUrl, setCopiedUrl] = useState<'http' | 'sse' | null>(null);
-  const [showConfig, setShowConfig] = useState(false);
+// MCP URL display component
+function McpUrlDisplay({ url, label, sublabel }: { url: string; label: string; sublabel: string }) {
+  const [copied, setCopied] = useState(false);
 
-  const baseUrl = typeof window !== 'undefined' ? window.location.origin : 'https://tpmjs.com';
-  const httpUrl = `${baseUrl}/api/mcp/${username}/${slug}/http`;
-  const sseUrl = `${baseUrl}/api/mcp/${username}/${slug}/sse`;
-
-  const copyToClipboard = async (url: string, type: 'http' | 'sse') => {
+  const copyToClipboard = async () => {
     await navigator.clipboard.writeText(url);
-    setCopiedUrl(type);
-    setTimeout(() => setCopiedUrl(null), 2000);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
   };
 
-  const configSnippet = `{
-  "mcpServers": {
-    "tpmjs-collection": {
-      "command": "npx",
-      "args": [
-        "mcp-remote",
-        "${httpUrl}",
-        "--header",
-        "Authorization: Bearer YOUR_TPMJS_API_KEY"
-      ]
-    }
-  }
-}`;
-
   return (
-    <div className="mb-8 p-4 bg-gradient-to-br from-primary/5 via-transparent to-primary/5 border border-primary/20 rounded-xl">
-      <div className="flex items-center gap-2 mb-4">
-        <div className="p-1.5 bg-primary/10 rounded-lg">
-          <Icon icon="link" size="sm" className="text-primary" />
-        </div>
-        <h3 className="font-semibold text-foreground">MCP Server URLs</h3>
-        <Badge variant="secondary" size="sm">
-          Public
-        </Badge>
+    <div>
+      <div className="flex items-center gap-2 mb-1.5">
+        <span className="text-xs font-medium text-foreground-secondary uppercase tracking-wide">
+          {label}
+        </span>
+        <span className="text-xs text-foreground-tertiary">({sublabel})</span>
       </div>
-
-      <div className="space-y-3">
-        {/* HTTP Transport */}
-        <div className="group">
-          <div className="flex items-center gap-2 mb-1.5">
-            <span className="text-xs font-medium text-foreground-secondary uppercase tracking-wide">
-              HTTP Transport
-            </span>
-            <span className="text-xs text-foreground-tertiary">(recommended)</span>
-          </div>
-          <div className="flex items-center gap-2">
-            <div className="flex-1 px-3 py-2 bg-surface border border-border rounded-lg font-mono text-sm text-foreground-secondary overflow-x-auto">
-              {httpUrl}
-            </div>
-            <Button
-              variant="secondary"
-              size="sm"
-              onClick={() => copyToClipboard(httpUrl, 'http')}
-              className="shrink-0"
-            >
-              <Icon icon={copiedUrl === 'http' ? 'check' : 'copy'} size="xs" className="mr-1" />
-              {copiedUrl === 'http' ? 'Copied!' : 'Copy'}
-            </Button>
-          </div>
-        </div>
-
-        {/* SSE Transport */}
-        <div className="group">
-          <div className="flex items-center gap-2 mb-1.5">
-            <span className="text-xs font-medium text-foreground-secondary uppercase tracking-wide">
-              SSE Transport
-            </span>
-            <span className="text-xs text-foreground-tertiary">(streaming)</span>
-          </div>
-          <div className="flex items-center gap-2">
-            <div className="flex-1 px-3 py-2 bg-surface border border-border rounded-lg font-mono text-sm text-foreground-secondary overflow-x-auto">
-              {sseUrl}
-            </div>
-            <Button
-              variant="secondary"
-              size="sm"
-              onClick={() => copyToClipboard(sseUrl, 'sse')}
-              className="shrink-0"
-            >
-              <Icon icon={copiedUrl === 'sse' ? 'check' : 'copy'} size="xs" className="mr-1" />
-              {copiedUrl === 'sse' ? 'Copied!' : 'Copy'}
-            </Button>
-          </div>
+      <div className="flex items-center gap-2">
+        <div className="flex-1 px-3 py-2 bg-surface border border-border rounded-lg font-mono text-sm text-foreground-secondary overflow-x-auto">
+          {url}
         </div>
+        <Button variant="secondary" size="sm" onClick={copyToClipboard} className="shrink-0">
+          <Icon icon={copied ? 'check' : 'copy'} size="xs" className="mr-1" />
+          {copied ? 'Copied!' : 'Copy'}
+        </Button>
       </div>
-
-      {/* Config snippet toggle */}
-      <div className="mt-4 pt-4 border-t border-border/50">
-        <button
-          type="button"
-          onClick={() => setShowConfig(!showConfig)}
-          className="flex items-center gap-2 text-sm text-primary hover:text-primary/80 transition-colors"
-        >
-          <Icon icon={showConfig ? 'chevronDown' : 'chevronRight'} size="xs" />
-          <span>Show Claude Desktop config</span>
-        </button>
-
-        {showConfig && (
-          <div className="mt-3 relative">
-            <pre className="p-4 bg-surface border border-border rounded-lg text-xs font-mono text-foreground-secondary overflow-x-auto">
-              {configSnippet}
-            </pre>
-            <Button
-              variant="ghost"
-              size="sm"
-              onClick={() => {
-                navigator.clipboard.writeText(configSnippet);
-                setCopiedUrl('http');
-                setTimeout(() => setCopiedUrl(null), 2000);
-              }}
-              className="absolute top-2 right-2"
-            >
-              <Icon icon="copy" size="xs" />
-            </Button>
-          </div>
-        )}
-      </div>
-
-      <p className="mt-3 text-xs text-foreground-tertiary">
-        Use these URLs with{' '}
-        <Link href="/docs/tutorials/mcp" className="text-primary hover:underline">
-          Claude Desktop, Cursor, or any MCP client
-        </Link>
-        . Requires your{' '}
-        <Link href="/dashboard/settings" className="text-primary hover:underline">
-          TPMJS API key
-        </Link>{' '}
-        for authentication.
-      </p>
     </div>
   );
 }
@@ -188,25 +91,47 @@ interface Collection {
   tools: CollectionTool[];
 }
 
-// biome-ignore lint/complexity/noExcessiveCognitiveComplexity: Page component with multiple handlers
+type TabId = 'tools' | 'connect' | 'env-vars' | 'settings';
+
+const VALID_TABS: TabId[] = ['tools', 'connect', 'env-vars', 'settings'];
+
 export default function CollectionDetailPage(): React.ReactElement {
   const params = useParams();
   const router = useRouter();
+  const searchParams = useSearchParams();
   const collectionId = params.id as string;
 
+  // Get initial tab from URL or default to 'tools'
+  const tabFromUrl = searchParams.get('tab') as TabId | null;
+  const initialTab = tabFromUrl && VALID_TABS.includes(tabFromUrl) ? tabFromUrl : 'tools';
+
   const [collection, setCollection] = useState<Collection | null>(null);
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
-  const [isEditing, setIsEditing] = useState(false);
+  const [activeTab, setActiveTab] = useState<TabId>(initialTab);
   const [isUpdating, setIsUpdating] = useState(false);
   const [removingToolId, setRemovingToolId] = useState<string | null>(null);
   const [isDeleting, setIsDeleting] = useState(false);
   const [executorConfig, setExecutorConfig] = useState<ExecutorConfig | null>(null);
-
-  // Environment variables state (stored as object for the EnvVarsEditor component)
   const [envVars, setEnvVars] = useState<Record<string, string> | null>(null);
+  const [showClaudeConfig, setShowClaudeConfig] = useState(false);
+
+  // Update URL when tab changes
+  const handleTabChange = (tabId: string) => {
+    const newTab = tabId as TabId;
+    setActiveTab(newTab);
+    const newParams = new URLSearchParams(searchParams.toString());
+    if (newTab === 'tools') {
+      newParams.delete('tab');
+    } else {
+      newParams.set('tab', newTab);
+    }
+    const queryString = newParams.toString();
+    router.replace(`/dashboard/collections/${collectionId}${queryString ? `?${queryString}` : ''}`, {
+      scroll: false,
+    });
+  };
 
-  // biome-ignore lint/complexity/noExcessiveCognitiveComplexity: Fetch callback with error handling
   const fetchCollection = useCallback(async () => {
     try {
       const response = await fetch(`/api/collections/${collectionId}`);
@@ -214,7 +139,6 @@ export default function CollectionDetailPage(): React.ReactElement {
 
       if (data.success) {
         setCollection(data.data);
-        // Initialize executor config state from collection data
         if (data.data.executorType === 'custom_url' && data.data.executorConfig) {
           setExecutorConfig({
             type: 'custom_url',
@@ -224,7 +148,6 @@ export default function CollectionDetailPage(): React.ReactElement {
         } else {
           setExecutorConfig(data.data.executorType ? { type: 'default' } : null);
         }
-        // Initialize env vars from collection data
         if (data.data.envVars && typeof data.data.envVars === 'object') {
           setEnvVars(data.data.envVars as Record<string, string>);
         } else {
@@ -253,12 +176,10 @@ export default function CollectionDetailPage(): React.ReactElement {
     fetchCollection();
   }, [fetchCollection]);
 
-  // biome-ignore lint/complexity/noExcessiveCognitiveComplexity: Multiple conditional fields in update payload
   const handleUpdate = async (data: { name: string; description?: string; isPublic: boolean }) => {
     if (!collection) return;
     setIsUpdating(true);
 
-    // Build update payload including executor config
     const updatePayload: Record<string, unknown> = { ...data };
     if (executorConfig) {
       updatePayload.executorType = executorConfig.type;
@@ -274,8 +195,6 @@ export default function CollectionDetailPage(): React.ReactElement {
       updatePayload.executorType = null;
       updatePayload.executorConfig = null;
     }
-
-    // Add env vars
     updatePayload.envVars = envVars;
 
     try {
@@ -301,7 +220,6 @@ export default function CollectionDetailPage(): React.ReactElement {
               }
             : null
         );
-        setIsEditing(false);
       } else {
         throw new Error(result.error?.message || 'Failed to update collection');
       }
@@ -444,133 +362,347 @@ export default function CollectionDetailPage(): React.ReactElement {
   }
 
   const existingToolIds = collection.tools.map((t) => t.toolId);
+  const baseUrl = typeof window !== 'undefined' ? window.location.origin : 'https://tpmjs.com';
+  const httpUrl = `${baseUrl}/api/mcp/${collection.user.username}/${collection.slug}/http`;
+  const sseUrl = `${baseUrl}/api/mcp/${collection.user.username}/${collection.slug}/sse`;
+
+  const configSnippet = `{
+  "mcpServers": {
+    "${collection.slug}": {
+      "command": "npx",
+      "args": [
+        "mcp-remote",
+        "${httpUrl}",
+        "--header",
+        "Authorization: Bearer YOUR_TPMJS_API_KEY"
+      ]
+    }
+  }
+}`;
+
+  const envVarsCount = envVars ? Object.keys(envVars).length : 0;
+
+  const tabs = [
+    { id: 'tools' as const, label: 'Tools', count: collection.toolCount },
+    { id: 'connect' as const, label: 'Connect' },
+    { id: 'env-vars' as const, label: 'Env Vars', count: envVarsCount > 0 ? envVarsCount : undefined },
+    { id: 'settings' as const, label: 'Settings' },
+  ];
 
   return (
     <DashboardLayout
-      title={isEditing ? 'Edit Collection' : collection.name}
-      subtitle={
-        !isEditing
-          ? `${collection.toolCount} ${collection.toolCount === 1 ? 'tool' : 'tools'}${collection.isPublic ? ' • Public' : ''}`
-          : undefined
-      }
+      title={collection.name}
+      subtitle={collection.description || undefined}
       showBackButton
       backUrl="/dashboard/collections"
       actions={
-        collection.isOwner &&
-        !isEditing && (
-          <div className="flex gap-2">
-            <Button variant="ghost" size="sm" onClick={() => setIsEditing(true)}>
-              <Icon icon="edit" size="sm" className="mr-1" />
-              Edit
-            </Button>
-            <Button
-              variant="ghost"
-              size="sm"
-              onClick={handleDelete}
-              loading={isDeleting}
-              disabled={isDeleting}
-              className="text-error hover:text-error hover:bg-error/10"
-            >
-              <Icon icon="trash" size="sm" className="mr-1" />
-              Delete
-            </Button>
-          </div>
+        collection.isOwner && (
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={handleDelete}
+            loading={isDeleting}
+            disabled={isDeleting}
+            className="text-error hover:text-error hover:bg-error/10"
+          >
+            <Icon icon="trash" size="sm" className="mr-1" />
+            Delete
+          </Button>
         )
       }
     >
-      {/* Edit Form */}
-      {isEditing && (
-        <div className="bg-surface border border-border rounded-lg p-6 mb-8">
-          <CollectionForm
-            initialData={{
-              name: collection.name,
-              description: collection.description,
-              isPublic: collection.isPublic,
-            }}
-            onSubmit={handleUpdate}
-            onCancel={() => setIsEditing(false)}
-            isSubmitting={isUpdating}
-            submitLabel="Save Changes"
-          />
+      {/* Status badges */}
+      <div className="flex items-center gap-2 mb-6">
+        <Badge variant={collection.isPublic ? 'success' : 'secondary'}>
+          {collection.isPublic ? 'Public' : 'Private'}
+        </Badge>
+        {executorConfig?.type === 'custom_url' && <Badge variant="secondary">Custom Executor</Badge>}
+      </div>
 
-          {/* Executor Configuration */}
-          <div className="mt-6 pt-6 border-t border-border">
-            <ExecutorConfigPanel
-              value={executorConfig}
-              onChange={setExecutorConfig}
-              disabled={isUpdating}
+      {/* Tabs */}
+      <Tabs
+        tabs={tabs}
+        activeTab={activeTab}
+        onTabChange={handleTabChange}
+        className="mb-6"
+      />
+
+      {/* Tools Tab */}
+      {activeTab === 'tools' && (
+        <div>
+          {/* Add Tools Search */}
+          {collection.isOwner && (
+            <div className="mb-6">
+              <AddToolSearch
+                collectionId={collection.id}
+                existingToolIds={existingToolIds}
+                onToolAdded={handleToolAdded}
+              />
+            </div>
+          )}
+
+          {/* Tools Table */}
+          <div className="bg-surface border border-border rounded-lg overflow-hidden">
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead className="w-[250px]">Tool</TableHead>
+                  <TableHead>Description</TableHead>
+                  <TableHead className="w-[120px]">Category</TableHead>
+                  {collection.isOwner && <TableHead className="w-[80px] text-right">Actions</TableHead>}
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {collection.tools.length === 0 ? (
+                  <TableEmpty
+                    colSpan={collection.isOwner ? 4 : 3}
+                    icon={
+                      <div className="w-16 h-16 rounded-full bg-primary/10 flex items-center justify-center">
+                        <Icon icon="puzzle" size="lg" className="text-primary" />
+                      </div>
+                    }
+                    title="No tools yet"
+                    description="Search and add tools to this collection to get started."
+                  />
+                ) : (
+                  collection.tools.map((ct) => (
+                    <TableRow key={ct.id}>
+                      <TableCell>
+                        <Link
+                          href={`/tool/${ct.tool.package.npmPackageName}/${ct.tool.name}`}
+                          className="font-medium text-foreground hover:text-primary transition-colors"
+                        >
+                          {ct.tool.name}
+                        </Link>
+                        <div className="text-xs text-foreground-tertiary mt-0.5">
+                          {ct.tool.package.npmPackageName}
+                        </div>
+                      </TableCell>
+                      <TableCell>
+                        <span className="text-sm text-foreground-secondary line-clamp-2">
+                          {ct.tool.description}
+                        </span>
+                      </TableCell>
+                      <TableCell>
+                        <Badge variant="secondary" size="sm">
+                          {ct.tool.package.category}
+                        </Badge>
+                      </TableCell>
+                      {collection.isOwner && (
+                        <TableCell>
+                          <div className="flex justify-end">
+                            <Button
+                              variant="ghost"
+                              size="sm"
+                              onClick={() => handleRemoveTool(ct.toolId)}
+                              disabled={removingToolId === ct.toolId}
+                              className="text-error hover:text-error hover:bg-error/10"
+                            >
+                              <Icon icon="trash" size="xs" />
+                            </Button>
+                          </div>
+                        </TableCell>
+                      )}
+                    </TableRow>
+                  ))
+                )}
+              </TableBody>
+            </Table>
+          </div>
+        </div>
+      )}
+
+      {/* Connect Tab */}
+      {activeTab === 'connect' && (
+        <div className="space-y-6">
+          {/* Username warning */}
+          {collection.isPublic && !collection.user.username && (
+            <div className="p-4 bg-warning/10 border border-warning/30 rounded-lg">
+              <div className="flex items-start gap-3">
+                <Icon icon="alertCircle" size="sm" className="text-warning mt-0.5" />
+                <div>
+                  <h3 className="font-medium text-foreground">Set your username to enable MCP</h3>
+                  <p className="text-sm text-foreground-secondary mt-1">
+                    You need to set a username before you can share this collection as an MCP server.
+                  </p>
+                  <Link href="/dashboard/settings/profile" className="inline-block mt-3">
+                    <Button size="sm" variant="secondary">
+                      <Icon icon="user" size="xs" className="mr-1" />
+                      Set Username
+                    </Button>
+                  </Link>
+                </div>
+              </div>
+            </div>
+          )}
+
+          {/* Private collection notice */}
+          {!collection.isPublic && (
+            <div className="p-4 bg-primary/5 border border-primary/20 rounded-lg">
+              <div className="flex items-start gap-3">
+                <Icon icon="info" size="sm" className="text-primary mt-0.5" />
+                <div>
+                  <h3 className="font-medium text-foreground">Private Collection</h3>
+                  <p className="text-sm text-foreground-secondary mt-1">
+                    Make this collection public in Settings to get shareable MCP server URLs.
+                  </p>
+                </div>
+              </div>
+            </div>
+          )}
+
+          {/* MCP URLs */}
+          {collection.isPublic && collection.user.username && (
+            <div className="bg-surface border border-border rounded-lg p-6">
+              <div className="flex items-center gap-2 mb-4">
+                <div className="p-1.5 bg-primary/10 rounded-lg">
+                  <Icon icon="link" size="sm" className="text-primary" />
+                </div>
+                <h3 className="font-semibold text-foreground">MCP Server URLs</h3>
+              </div>
+
+              <div className="space-y-4">
+                <McpUrlDisplay url={httpUrl} label="HTTP Transport" sublabel="recommended" />
+                <McpUrlDisplay url={sseUrl} label="SSE Transport" sublabel="streaming" />
+              </div>
+
+              <div className="mt-6 pt-4 border-t border-border">
+                <button
+                  type="button"
+                  onClick={() => setShowClaudeConfig(!showClaudeConfig)}
+                  className="flex items-center gap-2 text-sm text-primary hover:text-primary/80 transition-colors"
+                >
+                  <Icon icon={showClaudeConfig ? 'chevronDown' : 'chevronRight'} size="xs" />
+                  <span>Show Claude Desktop config</span>
+                </button>
+
+                {showClaudeConfig && (
+                  <div className="mt-3 relative">
+                    <pre className="p-4 bg-surface-secondary border border-border rounded-lg text-xs font-mono text-foreground-secondary overflow-x-auto">
+                      {configSnippet}
+                    </pre>
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => navigator.clipboard.writeText(configSnippet)}
+                      className="absolute top-2 right-2"
+                    >
+                      <Icon icon="copy" size="xs" />
+                    </Button>
+                  </div>
+                )}
+              </div>
+
+              <p className="mt-4 text-xs text-foreground-tertiary">
+                Use these URLs with{' '}
+                <Link href="/docs/tutorials/mcp" className="text-primary hover:underline">
+                  Claude Desktop, Cursor, or any MCP client
+                </Link>
+                . Requires your{' '}
+                <Link href="/dashboard/settings/tpmjs-api-keys" className="text-primary hover:underline">
+                  TPMJS API key
+                </Link>{' '}
+                for authentication.
+              </p>
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Env Vars Tab */}
+      {activeTab === 'env-vars' && collection.isOwner && (
+        <div className="bg-surface border border-border rounded-lg p-6">
+          <EnvVarsEditor
+            value={envVars}
+            onChange={(newEnvVars) => {
+              setEnvVars(newEnvVars);
+              // Auto-save env vars
+              fetch(`/api/collections/${collectionId}`, {
+                method: 'PATCH',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ envVars: newEnvVars }),
+              });
+            }}
+            title="Environment Variables"
+            description="These variables are passed to tools at runtime. Use them to store API keys and configuration."
+            disabled={isUpdating}
+          />
+        </div>
+      )}
+
+      {/* Env Vars Tab - Not Owner */}
+      {activeTab === 'env-vars' && !collection.isOwner && (
+        <div className="text-center py-16">
+          <Icon icon="lock" size="lg" className="mx-auto text-foreground-tertiary mb-4" />
+          <h2 className="text-lg font-medium text-foreground mb-2">Environment Variables Unavailable</h2>
+          <p className="text-foreground-secondary">
+            You can only view environment variables for collections you own.
+          </p>
+        </div>
+      )}
+
+      {/* Settings Tab */}
+      {activeTab === 'settings' && collection.isOwner && (
+        <div className="space-y-6">
+          {/* Collection Info */}
+          <div className="bg-surface border border-border rounded-lg p-6">
+            <h3 className="text-lg font-medium text-foreground mb-4">Collection Details</h3>
+            <CollectionForm
+              initialData={{
+                name: collection.name,
+                description: collection.description,
+                isPublic: collection.isPublic,
+              }}
+              onSubmit={handleUpdate}
+              isSubmitting={isUpdating}
+              submitLabel="Save Changes"
             />
           </div>
 
-          {/* Environment Variables */}
-          <EnvVarsEditor
-            value={envVars}
-            onChange={setEnvVars}
-            title="Environment Variables"
-            description="Passed to tools at runtime. Agent vars override collection vars."
-            disabled={isUpdating}
-            className="mt-6 pt-6 border-t border-border"
-          />
-        </div>
-      )}
-
-      {/* Description */}
-      {!isEditing && collection.description && (
-        <p className="text-foreground-secondary mb-8">{collection.description}</p>
-      )}
-
-      {/* MCP URLs - only for public collections */}
-      {collection.isPublic && collection.user.username && (
-        <McpUrlSection username={collection.user.username} slug={collection.slug} />
-      )}
-
-      {/* Prompt to set username if not set */}
-      {collection.isPublic && !collection.user.username && (
-        <div className="mb-8 p-4 bg-amber-50 border border-amber-200 rounded-xl">
-          <div className="flex items-start gap-3">
-            <Icon icon="alertCircle" size="sm" className="text-amber-600 mt-0.5" />
-            <div>
-              <h3 className="font-semibold text-amber-900">Set your username to enable MCP</h3>
-              <p className="text-sm text-amber-700 mt-1">
-                You need to set a username before you can share this collection as an MCP server.
-                Your MCP endpoint URL will be:{' '}
-                <code className="bg-amber-100 px-1 rounded">
-                  tpmjs.com/api/mcp/your-username/{collection.slug}/http
-                </code>
-              </p>
-              <Link href="/dashboard/settings/profile" className="inline-block mt-3">
-                <Button size="sm" variant="secondary">
-                  <Icon icon="user" size="xs" className="mr-1" />
-                  Set Username
-                </Button>
-              </Link>
-            </div>
+          {/* Executor Configuration */}
+          <div className="bg-surface border border-border rounded-lg p-6">
+            <ExecutorConfigPanel
+              value={executorConfig}
+              onChange={(newConfig) => {
+                setExecutorConfig(newConfig);
+                // Auto-save executor config
+                const updatePayload: Record<string, unknown> = {};
+                if (newConfig) {
+                  updatePayload.executorType = newConfig.type;
+                  if (newConfig.type === 'custom_url') {
+                    updatePayload.executorConfig = {
+                      url: newConfig.url,
+                      apiKey: newConfig.apiKey,
+                    };
+                  } else {
+                    updatePayload.executorConfig = null;
+                  }
+                } else {
+                  updatePayload.executorType = null;
+                  updatePayload.executorConfig = null;
+                }
+                fetch(`/api/collections/${collectionId}`, {
+                  method: 'PATCH',
+                  headers: { 'Content-Type': 'application/json' },
+                  body: JSON.stringify(updatePayload),
+                });
+              }}
+              disabled={isUpdating}
+            />
           </div>
         </div>
       )}
 
-      {/* Add Tool Search */}
-      {collection.isOwner && (
-        <div className="mb-6">
-          <h2 className="text-sm font-medium text-foreground mb-2">Add Tools</h2>
-          <AddToolSearch
-            collectionId={collection.id}
-            existingToolIds={existingToolIds}
-            onToolAdded={handleToolAdded}
-          />
+      {/* Settings Tab - Not Owner */}
+      {activeTab === 'settings' && !collection.isOwner && (
+        <div className="text-center py-16">
+          <Icon icon="lock" size="lg" className="mx-auto text-foreground-tertiary mb-4" />
+          <h2 className="text-lg font-medium text-foreground mb-2">Settings Unavailable</h2>
+          <p className="text-foreground-secondary">
+            You can only view settings for collections you own.
+          </p>
         </div>
       )}
-
-      {/* Tools List */}
-      <div>
-        <h2 className="text-sm font-medium text-foreground mb-3">Tools in this Collection</h2>
-        <CollectionToolList
-          tools={collection.tools}
-          onRemove={collection.isOwner ? handleRemoveTool : undefined}
-          removingId={removingToolId}
-          isOwner={collection.isOwner}
-        />
-      </div>
     </DashboardLayout>
   );
 }