nitrostack 1.0.15 → 1.0.17

package/src/studio/app/health/page.tsx

@@ -59,119 +59,121 @@ export default function HealthPage() {
   };
 
   return (
-    <div className="min-h-screen bg-background p-8">
-      {/* Header */}
-      <div className="mb-8">
-        <div className="flex items-center justify-between mb-6">
-          <div className="flex items-center gap-3">
-            <div className="w-12 h-12 rounded-lg bg-gradient-to-br from-emerald-500 to-teal-500 flex items-center justify-center">
-              <Activity className="w-6 h-6 text-white" />
-            </div>
-            <div>
-              <h1 className="text-3xl font-bold text-foreground">Health Checks</h1>
-              <p className="text-muted-foreground mt-1">System health monitoring</p>
-            </div>
+    <div className="fixed inset-0 flex flex-col bg-background" style={{ left: 'var(--sidebar-width, 15rem)' }}>
+      {/* Sticky Header */}
+      <div className="sticky top-0 z-10 border-b border-border/50 px-6 py-3 flex items-center justify-between bg-card/80 backdrop-blur-md shadow-sm">
+        <div className="flex items-center gap-3">
+          <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-emerald-500 to-teal-500 flex items-center justify-center shadow-md">
+            <Activity className="w-5 h-5 text-white" strokeWidth={2.5} />
+          </div>
+          <div>
+            <h1 className="text-lg font-bold text-foreground">Health</h1>
           </div>
-          <button onClick={loadHealth} className="btn btn-primary gap-2" disabled={loading}>
-            <RefreshCw className={`w-4 h-4 ${loading ? 'animate-spin' : ''}`} />
-            {loading ? 'Checking...' : 'Refresh'}
-          </button>
         </div>
+        <button onClick={loadHealth} className="btn btn-primary text-sm px-4 py-2 gap-2" disabled={loading}>
+          <RefreshCw className={`w-4 h-4 ${loading ? 'animate-spin' : ''}`} />
+          {loading ? 'Checking...' : 'Refresh'}
+        </button>
+      </div>
 
-        {/* Overall Status */}
-        <div className="card p-8 bg-gradient-to-br from-card to-muted/20">
-          <div className="flex items-center gap-6">
-            {getStatusIcon(overallStatus)}
-            <div>
-              <h2 className="text-3xl font-bold capitalize text-foreground">{overallStatus}</h2>
-              <p className="text-muted-foreground mt-1">
-                {healthChecks.length} health check{healthChecks.length !== 1 ? 's' : ''} configured
-              </p>
+      {/* Content - ONLY this scrolls */}
+      <div className="flex-1 overflow-y-auto overflow-x-hidden">
+        <div className="max-w-4xl mx-auto px-6 py-6">
+          {/* Overall Status */}
+          <div className="card p-8 bg-gradient-to-br from-card to-muted/20 mb-6">
+            <div className="flex items-center gap-6">
+              {getStatusIcon(overallStatus)}
+              <div>
+                <h2 className="text-3xl font-bold capitalize text-foreground">{overallStatus}</h2>
+                <p className="text-muted-foreground mt-1">
+                  {healthChecks.length} health check{healthChecks.length !== 1 ? 's' : ''} configured
+                </p>
+              </div>
             </div>
           </div>
-        </div>
-      </div>
 
-      {/* Health Checks Grid */}
-      {loading && healthChecks.length === 0 ? (
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-          {[1, 2].map((i) => (
-            <div key={i} className="card skeleton h-48"></div>
-          ))}
-        </div>
-      ) : healthChecks.length === 0 ? (
-        <div className="empty-state">
-          <Activity className="empty-state-icon" />
-          <p className="empty-state-title">No health checks configured</p>
-          <p className="empty-state-description">
-            Add health checks using the @HealthCheck decorator
-          </p>
-        </div>
-      ) : (
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-          {healthChecks.map((check) => (
-            <div key={check.name} className="card card-hover p-6 animate-fade-in">
-              <div className="flex items-start justify-between mb-4">
-                <div className="flex items-center gap-3">
-                  <div className={`w-12 h-12 rounded-lg flex items-center justify-center ${
-                    check.status === 'up'
-                      ? 'bg-emerald-500/10'
-                      : check.status === 'degraded'
-                      ? 'bg-amber-500/10'
-                      : 'bg-rose-500/10'
-                  }`}>
-                    {check.status === 'up' ? (
-                      <CheckCircle2 className="w-6 h-6 text-emerald-500" />
-                    ) : check.status === 'degraded' ? (
-                      <AlertTriangle className="w-6 h-6 text-amber-500" />
-                    ) : (
-                      <XCircle className="w-6 h-6 text-rose-500" />
-                    )}
-                  </div>
-                  <div>
-                    <h3 className="font-semibold capitalize text-foreground">{check.name}</h3>
-                    <span
-                      className={`badge text-xs mt-1 ${
+          {/* Health Checks Grid */}
+          {loading && healthChecks.length === 0 ? (
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+              {[1, 2].map((i) => (
+                <div key={i} className="card skeleton h-48"></div>
+              ))}
+            </div>
+          ) : healthChecks.length === 0 ? (
+            <div className="empty-state">
+              <Activity className="empty-state-icon" />
+              <p className="empty-state-title">No health checks configured</p>
+              <p className="empty-state-description">
+                Add health checks using the @HealthCheck decorator
+              </p>
+            </div>
+          ) : (
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+              {healthChecks.map((check) => (
+                <div key={check.name} className="card card-hover p-6 animate-fade-in">
+                  <div className="flex items-start justify-between mb-4">
+                    <div className="flex items-center gap-3">
+                      <div className={`w-12 h-12 rounded-lg flex items-center justify-center ${
                         check.status === 'up'
-                          ? 'badge-success'
+                          ? 'bg-emerald-500/10'
                           : check.status === 'degraded'
-                          ? 'badge-warning'
-                          : 'badge-error'
-                      }`}
-                    >
-                      {check.status}
-                    </span>
+                          ? 'bg-amber-500/10'
+                          : 'bg-rose-500/10'
+                      }`}>
+                        {check.status === 'up' ? (
+                          <CheckCircle2 className="w-6 h-6 text-emerald-500" />
+                        ) : check.status === 'degraded' ? (
+                          <AlertTriangle className="w-6 h-6 text-amber-500" />
+                        ) : (
+                          <XCircle className="w-6 h-6 text-rose-500" />
+                        )}
+                      </div>
+                      <div>
+                        <h3 className="font-semibold capitalize text-foreground">{check.name}</h3>
+                        <span
+                          className={`badge text-xs mt-1 ${
+                            check.status === 'up'
+                              ? 'badge-success'
+                              : check.status === 'degraded'
+                              ? 'badge-warning'
+                              : 'badge-error'
+                          }`}
+                        >
+                          {check.status}
+                        </span>
+                      </div>
+                    </div>
                   </div>
-                </div>
-              </div>
 
-              {check.message && (
-                <p className="text-sm text-muted-foreground mb-3">{check.message}</p>
-              )}
+                  {check.message && (
+                    <p className="text-sm text-muted-foreground mb-3">{check.message}</p>
+                  )}
 
-              {check.details && (
-                <div className="mt-3 p-4 bg-muted/30 rounded-lg border border-border">
-                  <p className="text-xs font-semibold text-muted-foreground mb-3 uppercase tracking-wide">Details</p>
-                  <div className="space-y-2">
-                    {Object.entries(check.details).map(([key, value]) => (
-                      <div key={key} className="flex justify-between text-sm">
-                        <span className="text-muted-foreground capitalize">{key}:</span>
-                        <span className="text-foreground font-mono font-medium">{String(value)}</span>
+                  {check.details && (
+                    <div className="mt-3 p-4 bg-muted/30 rounded-lg border border-border">
+                      <p className="text-xs font-semibold text-muted-foreground mb-3 uppercase tracking-wide">Details</p>
+                      <div className="space-y-2">
+                        {Object.entries(check.details).map(([key, value]) => (
+                          <div key={key} className="flex justify-between text-sm">
+                            <span className="text-muted-foreground capitalize">{key}:</span>
+                            <span className="text-foreground font-mono font-medium">{String(value)}</span>
+                          </div>
+                        ))}
                       </div>
-                    ))}
-                  </div>
-                </div>
-              )}
+                    </div>
+                  )}
 
-              {check.timestamp && (
-                <p className="text-xs text-muted-foreground mt-3">
-                  Last check: {new Date(check.timestamp).toLocaleString()}
-                </p>
-              )}
+                  {check.timestamp && (
+                    <p className="text-xs text-muted-foreground mt-3">
+                      Last check: {new Date(check.timestamp).toLocaleString()}
+                    </p>
+                  )}
+                </div>
+              ))}
             </div>
-          ))}
+          )}
         </div>
-      )}
-    </div>
+      </div>
+      </div>
   );
 }

package/src/studio/app/layout.tsx

@@ -10,8 +10,13 @@ import { Sidebar } from '@/components/Sidebar';
 import { EnlargeModal } from '@/components/EnlargeModal';
 
 export const metadata: Metadata = {
-  title: 'NitroStack Studio',
-  description: 'Professional development environment for NitroStack servers',
+  title: 'NitroStudio - MCP Development Suite',
+  description: 'Professional AI-powered development environment for Model Context Protocol (MCP) servers. Built with NitroStack.',
+  keywords: ['MCP', 'Model Context Protocol', 'AI Development', 'NitroStack', 'NitroStudio'],
+  authors: [{ name: 'NitroStack Team' }],
+  icons: {
+    icon: '/favicon.ico',
+  },
 };
 
 export default function RootLayout({
@@ -34,14 +39,29 @@ export default function RootLayout({
       <body className="min-h-screen font-sans">
         <div className="flex min-h-screen bg-gradient-to-br from-background via-background to-muted/20">
           <Sidebar />
-          <main className="flex-1 ml-64">
-            <div className="min-h-screen p-8">
+          <main className="flex-1 transition-all duration-300 ease-in-out" style={{ marginLeft: 'var(--sidebar-width, 15rem)' }}>
+            <div className="min-h-screen p-3 sm:p-6 md:p-8">
               {children}
             </div>
           </main>
         </div>
         {/* Global Modal - Available on all pages */}
         <EnlargeModal />
+        {/* CSS Variable for sidebar width */}
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `
+              function updateSidebarWidth() {
+                const isCollapsed = localStorage.getItem('sidebar_collapsed') === 'true';
+                document.documentElement.style.setProperty('--sidebar-width', isCollapsed ? '4rem' : '15rem');
+              }
+              updateSidebarWidth();
+              window.addEventListener('storage', updateSidebarWidth);
+              // Update on custom event
+              window.addEventListener('sidebar-toggle', updateSidebarWidth);
+            `,
+          }}
+        />
       </body>
     </html>
   );

package/src/studio/app/page.tsx

@@ -9,12 +9,15 @@ import type { Tool } from '@/lib/types';
 import { Wrench, RefreshCw, X, Play, AlertCircle } from 'lucide-react';
 
 export default function ToolsPage() {
-  const { tools, setTools, loading, setLoading, connection, setConnection, jwtToken, apiKey } = useStudioStore();
+  const { tools, setTools, loading, setLoading, connection, setConnection, jwtToken, apiKey, oauthState } = useStudioStore();
   const [searchQuery, setSearchQuery] = useState('');
   const [selectedTool, setSelectedTool] = useState<Tool | null>(null);
   const [toolArgs, setToolArgs] = useState<Record<string, any>>({});
   const [toolResult, setToolResult] = useState<any>(null);
   const [executingTool, setExecutingTool] = useState(false);
+  
+  // Get effective token - check both jwtToken and OAuth token
+  const effectiveToken = jwtToken || oauthState?.currentToken;
 
   // Initialize MCP, load tools and check connection on mount
   useEffect(() => {
@@ -64,8 +67,8 @@ export default function ToolsPage() {
     setToolResult(null);
 
     try {
-      // Pass JWT token and API key if available
-      const result = await api.callTool(selectedTool.name, toolArgs, jwtToken || undefined, apiKey || undefined);
+      // Pass JWT token and API key if available (check both jwtToken and OAuth token)
+      const result = await api.callTool(selectedTool.name, toolArgs, effectiveToken || undefined, apiKey || undefined);
       setToolResult(result);
 
       // Extract JWT token from ANY tool response (not just 'login')
@@ -100,64 +103,67 @@ export default function ToolsPage() {
 
   return (
     <>
-      <div className="min-h-screen bg-background p-8">
-        {/* Header */}
-        <div className="mb-8">
-          <div className="flex items-center justify-between mb-6">
-            <div className="flex items-center gap-3">
-              <div className="w-12 h-12 rounded-lg bg-gradient-to-br from-primary to-amber-500 flex items-center justify-center">
-                <Wrench className="w-6 h-6 text-black" />
-              </div>
-              <div>
-                <h1 className="text-3xl font-bold text-foreground">Tools</h1>
-                <p className="text-muted-foreground mt-1">
-                  Browse and execute MCP tools
-                </p>
-              </div>
+      <div className="fixed inset-0 flex flex-col bg-background" style={{ left: 'var(--sidebar-width, 15rem)' }}>
+        {/* Sticky Header */}
+        <div className="sticky top-0 z-10 border-b border-border/50 px-6 py-3 flex items-center justify-between bg-card/80 backdrop-blur-md shadow-sm">
+          <div className="flex items-center gap-3">
+            <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-primary to-amber-500 flex items-center justify-center shadow-md">
+              <Wrench className="w-5 h-5 text-white" strokeWidth={2.5} />
+            </div>
+            <div>
+              <h1 className="text-lg font-bold text-foreground">Tools</h1>
             </div>
-            <button onClick={loadTools} className="btn btn-primary gap-2">
-              <RefreshCw className="w-4 h-4" />
-              Refresh
-            </button>
           </div>
-
-          {/* Search */}
-          <input
-            type="text"
-            placeholder="Search tools..."
-            value={searchQuery}
-            onChange={(e) => setSearchQuery(e.target.value)}
-            className="input"
-          />
+          <button onClick={loadTools} className="btn btn-primary text-sm px-4 py-2 gap-2">
+            <RefreshCw className="w-4 h-4" />
+            Refresh
+          </button>
         </div>
 
-        {/* Tools Grid */}
-        {loading.tools ? (
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-            {[1, 2, 3].map((i) => (
-              <div key={i} className="card skeleton h-64"></div>
-            ))}
-          </div>
-        ) : filteredTools.length === 0 ? (
-          <div className="empty-state">
-            <AlertCircle className="empty-state-icon" />
-            <p className="empty-state-title">
-              {searchQuery ? 'No tools found matching your search' : 'No tools available'}
-            </p>
-            <p className="empty-state-description">
-              {searchQuery ? 'Try a different search term' : 'No MCP tools have been registered'}
-            </p>
-          </div>
-        ) : (
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-            {filteredTools.map((tool) => (
-              <ToolCard key={tool.name} tool={tool} onExecute={handleExecuteTool} />
-            ))}
+        {/* Content - ONLY this scrolls */}
+        <div className="flex-1 overflow-y-auto overflow-x-hidden">
+          <div className="max-w-7xl mx-auto px-6 py-6">
+            {/* Search */}
+            <div className="mb-6">
+              <input
+                type="text"
+                placeholder="Search tools..."
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                className="input w-full"
+              />
+            </div>
+
+            {/* Tools Grid */}
+            {loading.tools ? (
+              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                {[1, 2, 3].map((i) => (
+                  <div key={i} className="card skeleton h-64"></div>
+                ))}
+              </div>
+            ) : filteredTools.length === 0 ? (
+              <div className="empty-state">
+                <AlertCircle className="empty-state-icon" />
+                <p className="empty-state-title">
+                  {searchQuery ? 'No tools found matching your search' : 'No tools available'}
+                </p>
+                <p className="empty-state-description">
+                  {searchQuery ? 'Try a different search term' : 'No MCP tools have been registered'}
+                </p>
+              </div>
+            ) : (
+              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                {filteredTools.map((tool) => (
+                  <ToolCard key={tool.name} tool={tool} onExecute={handleExecuteTool} />
+                ))}
+              </div>
+            )}
           </div>
-        )}
+        </div>
+      </div>
 
-        {/* Tool Executor Modal */}
-        {selectedTool && (
+      {/* Tool Executor Modal */}
+      {selectedTool && (
           <div
             className="fixed inset-0 z-50 flex items-center justify-center animate-fade-in"
             style={{ backgroundColor: 'rgba(0, 0, 0, 0.85)' }}
@@ -331,7 +337,6 @@ export default function ToolsPage() {
             </div>
           </div>
         )}
-      </div>
     </>
   );
 }

package/src/studio/app/ping/page.tsx

@@ -60,20 +60,23 @@ export default function PingPage() {
   };
 
   return (
-    <div className="min-h-screen bg-background p-8">
-      {/* Header */}
-      <div className="mb-8">
-        <div className="flex items-center gap-3 mb-4">
-          <div className="w-12 h-12 rounded-lg bg-gradient-to-br from-cyan-500 to-blue-500 flex items-center justify-center">
-            <Wifi className="w-6 h-6 text-white" />
+    <div className="fixed inset-0 flex flex-col bg-background" style={{ left: 'var(--sidebar-width, 15rem)' }}>
+      {/* Sticky Header */}
+      <div className="sticky top-0 z-10 border-b border-border/50 px-6 py-3 flex items-center justify-between bg-card/80 backdrop-blur-md shadow-sm">
+        <div className="flex items-center gap-3">
+          <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-cyan-500 to-blue-500 flex items-center justify-center shadow-md">
+            <Wifi className="w-5 h-5 text-white" strokeWidth={2.5} />
           </div>
           <div>
-            <h1 className="text-3xl font-bold text-foreground">Ping</h1>
-            <p className="text-muted-foreground mt-1">Test server connectivity and latency</p>
+            <h1 className="text-lg font-bold text-foreground">Ping</h1>
           </div>
         </div>
       </div>
 
+      {/* Content - ONLY this scrolls */}
+      <div className="flex-1 overflow-y-auto overflow-x-hidden">
+        <div className="max-w-4xl mx-auto px-6 py-6">
+
       {/* Main Ping Card */}
       <div className="card card-hover p-8 mb-8 text-center bg-gradient-to-br from-card via-card to-muted/20">
         <button
@@ -199,6 +202,8 @@ export default function PingPage() {
           </p>
         </div>
       )}
+        </div>
+      </div>
     </div>
   );
 }

package/src/studio/app/prompts/page.tsx

@@ -53,85 +53,87 @@ export default function PromptsPage() {
   );
 
   return (
-    <div className="min-h-screen bg-background p-8">
-      {/* Header */}
-      <div className="mb-8">
-        <div className="flex items-center justify-between mb-6">
-          <div className="flex items-center gap-3">
-            <div className="w-12 h-12 rounded-lg bg-gradient-to-br from-blue-500 to-cyan-500 flex items-center justify-center">
-              <FileText className="w-6 h-6 text-white" />
-            </div>
-            <div>
-              <h1 className="text-3xl font-bold text-foreground">Prompts</h1>
-              <p className="text-muted-foreground mt-1">Browse and execute MCP prompts</p>
-            </div>
+    <div className="fixed inset-0 flex flex-col bg-background" style={{ left: 'var(--sidebar-width, 15rem)' }}>
+      {/* Sticky Header */}
+      <div className="sticky top-0 z-10 border-b border-border/50 px-6 py-3 flex items-center justify-between bg-card/80 backdrop-blur-md shadow-sm">
+        <div className="flex items-center gap-3">
+          <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-blue-500 to-cyan-500 flex items-center justify-center shadow-md">
+            <FileText className="w-5 h-5 text-white" strokeWidth={2.5} />
+          </div>
+          <div>
+            <h1 className="text-lg font-bold text-foreground">Prompts</h1>
           </div>
-          <button onClick={loadPrompts} className="btn btn-primary gap-2">
-            <RefreshCw className="w-4 h-4" />
-            Refresh
-          </button>
         </div>
-
-        <input
-          type="text"
-          placeholder="Search prompts..."
-          value={searchQuery}
-          onChange={(e) => setSearchQuery(e.target.value)}
-          className="input"
-        />
+        <button onClick={loadPrompts} className="btn btn-primary text-sm px-4 py-2 gap-2">
+          <RefreshCw className="w-4 h-4" />
+          Refresh
+        </button>
       </div>
 
-      {/* Prompts Grid */}
-      {loading.prompts ? (
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-          {[1, 2, 3].map((i) => (
-            <div key={i} className="card skeleton h-40"></div>
-          ))}
-        </div>
-      ) : filteredPrompts.length === 0 ? (
-        <div className="empty-state">
-          <AlertCircle className="empty-state-icon" />
-          <p className="empty-state-title">
-            {searchQuery ? 'No prompts found' : 'No prompts available'}
-          </p>
-          <p className="empty-state-description">
-            {searchQuery ? 'Try a different search term' : 'No prompts have been registered'}
-          </p>
-        </div>
-      ) : (
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-          {filteredPrompts.map((prompt) => (
-            <div
-              key={prompt.name}
-              className="card card-hover p-6 cursor-pointer animate-fade-in"
-              onClick={() => {
-                setSelectedPrompt(prompt);
-                setPromptArgs({});
-                setPromptResult(null);
-              }}
-            >
-              <div className="flex items-center gap-3 mb-3">
-                <div className="w-10 h-10 rounded-lg bg-blue-500/10 flex items-center justify-center">
-                  <FileText className="w-5 h-5 text-blue-500" />
-                </div>
-                <h3 className="font-semibold text-foreground">{prompt.name}</h3>
-              </div>
-
-              <p className="text-sm text-muted-foreground line-clamp-2 mb-3">
-                {prompt.description || 'No description'}
+      {/* Content - ONLY this scrolls */}
+      <div className="flex-1 overflow-y-auto overflow-x-hidden">
+        <div className="max-w-7xl mx-auto px-6 py-6">
+          <input
+            type="text"
+            placeholder="Search prompts..."
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            className="input mb-6"
+          />
+
+          {/* Prompts Grid */}
+          {loading.prompts ? (
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+              {[1, 2, 3].map((i) => (
+                <div key={i} className="card skeleton h-40"></div>
+              ))}
+            </div>
+          ) : filteredPrompts.length === 0 ? (
+            <div className="empty-state">
+              <AlertCircle className="empty-state-icon" />
+              <p className="empty-state-title">
+                {searchQuery ? 'No prompts found' : 'No prompts available'}
               </p>
+              <p className="empty-state-description">
+                {searchQuery ? 'Try a different search term' : 'No prompts have been registered'}
+              </p>
+            </div>
+          ) : (
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+              {filteredPrompts.map((prompt) => (
+                <div
+                  key={prompt.name}
+                  className="card card-hover p-6 cursor-pointer animate-fade-in"
+                  onClick={() => {
+                    setSelectedPrompt(prompt);
+                    setPromptArgs({});
+                    setPromptResult(null);
+                  }}
+                >
+                  <div className="flex items-center gap-3 mb-3">
+                    <div className="w-10 h-10 rounded-lg bg-blue-500/10 flex items-center justify-center">
+                      <FileText className="w-5 h-5 text-blue-500" />
+                    </div>
+                    <h3 className="font-semibold text-foreground">{prompt.name}</h3>
+                  </div>
 
-              {prompt.arguments && prompt.arguments.length > 0 && (
-                <div className="flex items-center gap-1 text-xs text-muted-foreground">
-                  <span className="badge badge-secondary">
-                    {prompt.arguments.length} argument{prompt.arguments.length !== 1 ? 's' : ''}
-                  </span>
+                  <p className="text-sm text-muted-foreground line-clamp-2 mb-3">
+                    {prompt.description || 'No description'}
+                  </p>
+
+                  {prompt.arguments && prompt.arguments.length > 0 && (
+                    <div className="flex items-center gap-1 text-xs text-muted-foreground">
+                      <span className="badge badge-secondary">
+                        {prompt.arguments.length} argument{prompt.arguments.length !== 1 ? 's' : ''}
+                      </span>
+                    </div>
+                  )}
                 </div>
-              )}
+              ))}
             </div>
-          ))}
+          )}
         </div>
-      )}
+      </div>
 
       {/* Prompt Executor Modal */}
       {selectedPrompt && (