nitrostack 1.0.71 → 1.0.72

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

@@ -4,7 +4,7 @@ import { useEffect, useState } from 'react';
 import { useStudioStore } from '@/lib/store';
 import { api } from '@/lib/api';
 import type { Prompt } from '@/lib/types';
-import { FileText, RefreshCw, X, Play, AlertCircle } from 'lucide-react';
+import { DocumentTextIcon, ArrowPathIcon, XMarkIcon, PlayIcon, ExclamationCircleIcon } from '@heroicons/react/24/outline';
 
 export default function PromptsPage() {
   const { prompts, setPrompts, loading, setLoading } = useStudioStore();
@@ -54,23 +54,16 @@ export default function PromptsPage() {
 
   return (
     <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>
-        </div>
+      {/* Minimal Professional Header */}
+      <div className="sticky top-0 z-10 border-b border-border/50 px-6 py-4 flex items-center justify-between bg-card/50 backdrop-blur-sm">
+        <h1 className="text-lg font-semibold text-foreground">Prompts</h1>
         <button onClick={loadPrompts} className="btn btn-primary text-sm px-4 py-2 gap-2">
-          <RefreshCw className="w-4 h-4" />
+          <ArrowPathIcon className="h-4 w-4" />
           Refresh
         </button>
       </div>
 
-      {/* Content - ONLY this scrolls */}
+      {/* Content */}
       <div className="flex-1 overflow-y-auto overflow-x-hidden">
         <div className="max-w-7xl mx-auto px-6 py-6">
           <input
@@ -90,7 +83,7 @@ export default function PromptsPage() {
             </div>
           ) : filteredPrompts.length === 0 ? (
             <div className="empty-state">
-              <AlertCircle className="empty-state-icon" />
+              <ExclamationCircleIcon className="empty-state-icon" />
               <p className="empty-state-title">
                 {searchQuery ? 'No prompts found' : 'No prompts available'}
               </p>
@@ -99,35 +92,42 @@ export default function PromptsPage() {
               </p>
             </div>
           ) : (
-            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
               {filteredPrompts.map((prompt) => (
                 <div
                   key={prompt.name}
-                  className="card card-hover p-6 cursor-pointer animate-fade-in"
+                  className="group relative bg-card/50 border border-border/50 rounded-xl p-5 cursor-pointer transition-all duration-200 hover:bg-card hover:border-border hover:shadow-lg 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" />
+                  {/* Gradient hover effect */}
+                  <div className="absolute inset-0 rounded-xl bg-gradient-to-br from-primary/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity" />
+
+                  <div className="relative">
+                    <div className="flex items-center gap-3 mb-3">
+                      <div className="w-8 h-8 rounded-lg bg-primary/10 flex items-center justify-center group-hover:bg-primary/20 transition-colors">
+                        <DocumentTextIcon className="w-4 h-4 text-primary" />
+                      </div>
+                      <h3 className="text-sm font-medium text-foreground group-hover:text-primary transition-colors truncate">
+                        {prompt.name}
+                      </h3>
                     </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'}
-                  </p>
+                    <p className="text-xs text-muted-foreground/80 line-clamp-2 mb-3 leading-relaxed">
+                      {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>
-                  )}
+                    {prompt.arguments && prompt.arguments.length > 0 && (
+                      <div className="flex items-center gap-1.5">
+                        <span className="text-[10px] font-medium px-2 py-0.5 rounded-full bg-muted/50 text-muted-foreground">
+                          {prompt.arguments.length} arg{prompt.arguments.length !== 1 ? 's' : ''}
+                        </span>
+                      </div>
+                    )}
+                  </div>
                 </div>
               ))}
             </div>
@@ -135,93 +135,111 @@ export default function PromptsPage() {
         </div>
       </div>
 
-      {/* Prompt Executor Modal */}
+      {/* Prompt Executor Side Drawer */}
       {selectedPrompt && (
         <div
-          className="fixed inset-0 z-50 flex items-center justify-center animate-fade-in"
-          style={{ backgroundColor: 'rgba(0, 0, 0, 0.85)' }}
+          className="fixed inset-0 z-50 flex justify-end bg-background/80 backdrop-blur-sm animate-fade-in"
           onClick={() => setSelectedPrompt(null)}
         >
           <div
-            className="bg-card rounded-2xl p-6 w-[600px] max-h-[80vh] overflow-auto border border-border shadow-2xl animate-scale-in"
+            className="relative w-full max-w-2xl h-full bg-card border-l border-border shadow-2xl overflow-hidden animate-slide-in-right flex flex-col"
             onClick={(e) => e.stopPropagation()}
           >
-            <div className="flex items-center justify-between mb-4">
+            {/* Header */}
+            <div className="flex items-center justify-between px-6 py-4 border-b border-border bg-card">
               <div className="flex items-center gap-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" />
+                  <DocumentTextIcon className="w-5 h-5 text-blue-500" />
+                </div>
+                <div>
+                  <h2 className="text-lg font-bold text-foreground">{selectedPrompt.name}</h2>
+                  <p className="text-xs text-muted-foreground">Prompt Executor</p>
                 </div>
-                <h2 className="text-xl font-bold text-foreground">{selectedPrompt.name}</h2>
               </div>
               <button
                 onClick={() => setSelectedPrompt(null)}
-                className="btn btn-ghost w-10 h-10 p-0"
+                className="btn btn-ghost w-8 h-8 p-0 flex items-center justify-center rounded-full hover:bg-muted"
+                aria-label="Close"
               >
-                <X className="w-5 h-5" />
+                <XMarkIcon className="w-5 h-5" />
               </button>
             </div>
 
-            <p className="text-sm text-muted-foreground mb-6">
-              {selectedPrompt.description || 'No description'}
-            </p>
-
-            <form onSubmit={handleExecutePrompt}>
-              {selectedPrompt.arguments && selectedPrompt.arguments.length > 0 ? (
-                selectedPrompt.arguments.map((arg) => (
-                  <div key={arg.name} className="mb-4">
-                    <label className="block text-sm font-medium text-foreground mb-2">
-                      {arg.name}
-                      {arg.required && <span className="text-destructive ml-1">*</span>}
-                    </label>
-                    <input
-                      type="text"
-                      className="input"
-                      value={promptArgs[arg.name] || ''}
-                      onChange={(e) =>
-                        setPromptArgs({ ...promptArgs, [arg.name]: e.target.value })
-                      }
-                      required={arg.required}
-                      placeholder={arg.description || `Enter ${arg.name}`}
-                    />
-                    {arg.description && (
-                      <p className="text-xs text-muted-foreground mt-1">{arg.description}</p>
-                    )}
-                  </div>
-                ))
-              ) : (
-                <div className="bg-muted/30 rounded-lg p-4 mb-4">
-                  <p className="text-sm text-muted-foreground">No arguments required</p>
+            {/* Scrollable Content */}
+            <div className="flex-1 overflow-y-auto bg-muted/5 p-6">
+
+              <div className="bg-card p-4 rounded-xl border border-border mb-6">
+                <p className="text-sm text-foreground leading-relaxed">
+                  {selectedPrompt.description || 'No description available'}
+                </p>
+              </div>
+
+              <form onSubmit={handleExecutePrompt} className="space-y-6">
+                <div className="space-y-4">
+                  {selectedPrompt.arguments && selectedPrompt.arguments.length > 0 ? (
+                    selectedPrompt.arguments.map((arg) => (
+                      <div key={arg.name}>
+                        <label className="block text-sm font-medium text-foreground mb-2">
+                          {arg.name}
+                          {arg.required && <span className="text-destructive ml-1">*</span>}
+                        </label>
+                        <input
+                          type="text"
+                          className="input w-full"
+                          value={promptArgs[arg.name] || ''}
+                          onChange={(e) =>
+                            setPromptArgs({ ...promptArgs, [arg.name]: e.target.value })
+                          }
+                          required={arg.required}
+                          placeholder={arg.description || `Enter ${arg.name}`}
+                        />
+                        {arg.description && (
+                          <p className="text-xs text-muted-foreground mt-1">{arg.description}</p>
+                        )}
+                      </div>
+                    ))
+                  ) : (
+                    <div className="p-4 bg-muted/30 rounded-lg border border-border border-dashed text-center">
+                      <p className="text-sm text-muted-foreground">No arguments required</p>
+                    </div>
+                  )}
                 </div>
-              )}
 
-              <button type="submit" className="btn btn-primary w-full gap-2" disabled={executing}>
-                <Play className="w-4 h-4" />
-                {executing ? 'Executing...' : 'Execute Prompt'}
-              </button>
-            </form>
-
-            {promptResult && (
-              <div className="mt-6">
-                <h3 className="font-semibold text-foreground mb-3">Messages:</h3>
-                <div className="space-y-3">
-                  {promptResult.messages?.map((msg: any, idx: number) => {
-                    // Extract text from content (can be string or object with type/text)
-                    const contentText = typeof msg.content === 'string' 
-                      ? msg.content 
-                      : msg.content?.text || JSON.stringify(msg.content);
-                    
-                    return (
-                      <div key={idx} className="bg-muted/30 border border-border p-4 rounded-lg">
-                        <div className="text-xs text-muted-foreground mb-2 uppercase font-semibold">
-                          {msg.role}
+                <div className="sticky bottom-0 -mx-6 -mb-6 p-6 bg-card border-t border-border mt-auto">
+                  <button type="submit" className="btn btn-primary w-full gap-2 py-3" disabled={executing}>
+                    <PlayIcon className="w-4 h-4" />
+                    {executing ? 'Executing...' : 'Execute Prompt'}
+                  </button>
+                </div>
+              </form>
+
+              {/* Result */}
+              {promptResult && (
+                <div className="mt-8 pt-8 border-t border-border animate-fade-in">
+                  <div className="flex items-center justify-between mb-3">
+                    <h3 className="font-semibold text-foreground">Messages</h3>
+                    <div className="badge badge-success text-xs">Generated</div>
+                  </div>
+                  <div className="space-y-3">
+                    {promptResult.messages?.map((msg: any, idx: number) => {
+                      // Extract text from content (can be string or object with type/text)
+                      const contentText = typeof msg.content === 'string'
+                        ? msg.content
+                        : msg.content?.text || JSON.stringify(msg.content);
+
+                      return (
+                        <div key={idx} className="bg-card border border-border p-4 rounded-xl shadow-sm">
+                          <div className="text-xs text-muted-foreground mb-2 uppercase font-bold tracking-wider opacity-70">
+                            {msg.role}
+                          </div>
+                          <div className="text-sm whitespace-pre-wrap text-foreground font-mono leading-relaxed">{contentText}</div>
                         </div>
-                        <div className="text-sm whitespace-pre-wrap text-foreground">{contentText}</div>
-                      </div>
-                    );
-                  })}
+                      );
+                    })}
+                  </div>
                 </div>
-              </div>
-            )}
+              )}
+            </div>
           </div>
         </div>
       )}

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

@@ -5,7 +5,7 @@ import { useStudioStore } from '@/lib/store';
 import { api } from '@/lib/api';
 import { WidgetRenderer } from '@/components/WidgetRenderer';
 import type { Resource } from '@/lib/types';
-import { Package, RefreshCw, Palette, Maximize2, Sparkles, AlertCircle } from 'lucide-react';
+import { CubeIcon, ArrowPathIcon, PaintBrushIcon, ArrowsPointingOutIcon, SparklesIcon, ExclamationCircleIcon } from '@heroicons/react/24/outline';
 
 interface WidgetExample {
   name: string;
@@ -52,13 +52,13 @@ export default function ResourcesPage() {
       const data = await api.getWidgetExamples();
       console.log('📦 Widget examples response:', data);
       console.log('📦 Number of widgets loaded:', data.widgets?.length || 0);
-      
+
       if (data.widgets && data.widgets.length > 0) {
         console.log('📦 First widget:', data.widgets[0]);
       } else {
         console.warn('⚠️ No widgets returned from API. Check MCP server logs.');
       }
-      
+
       setWidgets(data.widgets || []);
     } catch (error) {
       console.error('❌ Failed to load widget examples:', error);
@@ -68,9 +68,9 @@ export default function ResourcesPage() {
   };
 
   const isUIWidget = (resource: Resource) => {
-    return resource.mimeType === 'text/html' || 
-           resource.uri.startsWith('widget://') ||
-           resource._meta?.['ui/widget'] === true;
+    return resource.mimeType === 'text/html' ||
+      resource.uri.startsWith('widget://') ||
+      resource._meta?.['ui/widget'] === true;
   };
 
   const filteredResources = resources.filter(
@@ -97,9 +97,9 @@ export default function ResourcesPage() {
   const handleWidgetEnlarge = useCallback((e: React.MouseEvent, widget: WidgetMetadata) => {
     e.preventDefault();
     e.stopPropagation();
-    
+
     const exampleIndex = getSelectedExample(widget.uri);
-    
+
     setTimeout(() => {
       openEnlargeModal('resource', {
         uri: widget.uri,
@@ -112,18 +112,11 @@ export default function ResourcesPage() {
 
   return (
     <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-purple-500 to-pink-500 flex items-center justify-center shadow-md">
-            <Package className="w-5 h-5 text-white" strokeWidth={2.5} />
-          </div>
-          <div>
-            <h1 className="text-lg font-bold text-foreground">Resources</h1>
-          </div>
-        </div>
+      {/* Minimal Professional Header */}
+      <div className="sticky top-0 z-10 border-b border-border/50 px-6 py-4 flex items-center justify-between bg-card/50 backdrop-blur-sm">
+        <h1 className="text-lg font-semibold text-foreground">Resources</h1>
         <button onClick={loadResources} className="btn btn-primary text-sm px-4 py-2 gap-2">
-          <RefreshCw className="w-4 h-4" />
+          <ArrowPathIcon className="h-4 w-4" />
           Refresh
         </button>
       </div>
@@ -142,114 +135,115 @@ export default function ResourcesPage() {
           {/* UI Widgets Section */}
           {(loadingWidgets || widgets.length > 0) && (
             <div className="mb-12">
-          <h2 className="text-2xl font-bold text-foreground mb-6 flex items-center gap-2">
-            <Palette className="w-6 h-6 text-primary" />
-            UI Widgets {widgets.length > 0 && `(${filteredWidgets.length})`}
-          </h2>
-          
-          {loadingWidgets ? (
-            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-              {[1, 2].map((i) => (
-                <div key={i} className="card skeleton h-96"></div>
-              ))}
-            </div>
-          ) : filteredWidgets.length === 0 ? (
-            <div className="card p-8 text-center">
-              <AlertCircle className="w-12 h-12 text-muted-foreground mx-auto mb-3" />
-              <p className="text-muted-foreground">
-                {searchQuery ? 'No widgets match your search' : 'No UI widgets configured'}
-              </p>
-            </div>
-          ) : (
-            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-              {filteredWidgets.map((widget) => (
-                <div key={widget.uri} className="card card-hover p-6 animate-fade-in">
-                  <div className="flex items-center gap-3 mb-4">
-                    <div className="w-10 h-10 rounded-lg bg-purple-500/10 flex items-center justify-center">
-                      <Palette className="w-5 h-5 text-purple-500" />
-                    </div>
-                    <div className="flex-1">
-                      <h3 className="font-semibold text-foreground">{widget.name}</h3>
-                      <span className="badge badge-success text-xs mt-1">
-                        {widget.examples.length} example{widget.examples.length !== 1 ? 's' : ''}
-                      </span>
-                    </div>
-                  </div>
+              <h2 className="text-2xl font-bold text-foreground mb-6 flex items-center gap-2">
+                <PaintBrushIcon className="w-6 h-6 text-primary" />
+                UI Widgets {widgets.length > 0 && `(${filteredWidgets.length})`}
+              </h2>
 
-                  <p className="text-sm text-muted-foreground mb-3 line-clamp-2">
-                    {widget.description}
+              {loadingWidgets ? (
+                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                  {[1, 2].map((i) => (
+                    <div key={i} className="card skeleton h-96"></div>
+                  ))}
+                </div>
+              ) : filteredWidgets.length === 0 ? (
+                <div className="card p-8 text-center">
+                  <ExclamationCircleIcon className="w-12 h-12 text-muted-foreground mx-auto mb-3" />
+                  <p className="text-muted-foreground">
+                    {searchQuery ? 'No widgets match your search' : 'No UI widgets configured'}
                   </p>
+                </div>
+              ) : (
+                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                  {filteredWidgets.map((widget) => (
+                    <div key={widget.uri} className="card card-hover p-6 animate-fade-in">
+                      {/* Clean Header */}
+                      <div className="flex items-center gap-3 mb-3">
+                        <PaintBrushIcon className="h-5 w-5 text-secondary flex-shrink-0" />
+                        <div className="flex-1 min-w-0">
+                          <h3 className="font-medium text-[15px] text-foreground leading-tight truncate">{widget.name}</h3>
+                          <div className="flex items-center gap-1.5 text-xs text-muted-foreground leading-none mt-1">
+                            <span>Widget</span>
+                            <span className="text-muted-foreground/40">•</span>
+                            <span>{widget.examples.length} example{widget.examples.length !== 1 ? 's' : ''}</span>
+                          </div>
+                        </div>
+                      </div>
 
-                  <p className="text-xs text-muted-foreground mb-4 font-mono truncate bg-muted/30 px-2 py-1 rounded">
-                    {widget.uri}
-                  </p>
+                      <p className="text-sm text-muted-foreground mb-3 line-clamp-2">
+                        {widget.description}
+                      </p>
 
-                  {widget.tags && widget.tags.length > 0 && (
-                    <div className="flex flex-wrap gap-2 mb-4">
-                      {widget.tags.map((tag) => (
-                        <span key={tag} className="badge badge-secondary text-xs">
-                          #{tag}
-                        </span>
-                      ))}
-                    </div>
-                  )}
-
-                  {/* Widget Preview with selected example */}
-                  {widget.examples.length > 0 && (() => {
-                    const selectedIdx = getSelectedExample(widget.uri);
-                    const selectedExample = widget.examples[selectedIdx];
-                    return (
-                      <div className="relative mb-4 rounded-lg overflow-hidden border border-border bg-muted/20">
-                        <div className="absolute top-2 left-2 z-10 flex items-center gap-1 bg-primary/90 backdrop-blur-sm text-black px-2 py-1 rounded-md text-xs font-semibold shadow-lg">
-                          <Sparkles className="w-3 h-3" />
-                          {selectedExample.name}
-                        </div>
-                        <div className="h-64">
-                          <WidgetRenderer
-                            uri={widget.uri}
-                            data={selectedExample.data}
-                          />
+                      <p className="text-xs text-muted-foreground mb-4 font-mono truncate bg-muted/30 px-2 py-1 rounded">
+                        {widget.uri}
+                      </p>
+
+                      {widget.tags && widget.tags.length > 0 && (
+                        <div className="flex flex-wrap gap-2 mb-4">
+                          {widget.tags.map((tag) => (
+                            <span key={tag} className="badge badge-secondary text-xs">
+                              #{tag}
+                            </span>
+                          ))}
                         </div>
-                      </div>
-                    );
-                  })()}
-
-                  {/* Example Selector (if more than 1) */}
-                  {widget.examples.length > 1 && (
-                    <select
-                      className="input text-sm mb-4"
-                      value={getSelectedExample(widget.uri)}
-                      onChange={(e) => handleExampleChange(widget.uri, parseInt(e.target.value))}
-                    >
-                      {widget.examples.map((example, idx) => (
-                        <option key={idx} value={idx}>
-                          {example.name}
-                        </option>
-                      ))}
-                    </select>
-                  )}
-
-                  <button
-                    onClick={(e) => handleWidgetEnlarge(e, widget)}
-                    className="btn btn-secondary w-full gap-2"
-                  >
-                    <Maximize2 className="w-4 h-4" />
-                    Enlarge
-                  </button>
+                      )}
+
+                      {/* Widget Preview with selected example */}
+                      {widget.examples.length > 0 && (() => {
+                        const selectedIdx = getSelectedExample(widget.uri);
+                        const selectedExample = widget.examples[selectedIdx];
+                        return (
+                          <div className="relative mb-4 rounded-lg overflow-hidden border border-border bg-muted/20">
+                            <div className="absolute top-2 left-2 z-10 flex items-center gap-1 bg-primary/90 backdrop-blur-sm text-black px-2 py-1 rounded-md text-xs font-semibold shadow-lg">
+                              <SparklesIcon className="w-3 h-3" />
+                              {selectedExample.name}
+                            </div>
+                            <div className="h-64">
+                              <WidgetRenderer
+                                uri={widget.uri}
+                                data={selectedExample.data}
+                              />
+                            </div>
+                          </div>
+                        );
+                      })()}
+
+                      {/* Example Selector (if more than 1) */}
+                      {widget.examples.length > 1 && (
+                        <select
+                          className="input text-sm mb-4"
+                          value={getSelectedExample(widget.uri)}
+                          onChange={(e) => handleExampleChange(widget.uri, parseInt(e.target.value))}
+                        >
+                          {widget.examples.map((example, idx) => (
+                            <option key={idx} value={idx}>
+                              {example.name}
+                            </option>
+                          ))}
+                        </select>
+                      )}
+
+                      <button
+                        onClick={(e) => handleWidgetEnlarge(e, widget)}
+                        className="btn btn-secondary w-full gap-2"
+                      >
+                        <ArrowsPointingOutIcon className="w-4 h-4" />
+                        Enlarge
+                      </button>
+                    </div>
+                  ))}
                 </div>
-              ))}
-            </div>
-          )}
+              )}
             </div>
           )}
 
           {/* MCP Resources Section */}
           <div>
             <h2 className="text-2xl font-bold text-foreground mb-6 flex items-center gap-2">
-              <Package className="w-6 h-6 text-primary" />
+              <CubeIcon className="w-6 h-6 text-primary" />
               MCP Resources {resources.length > 0 && `(${filteredResources.length})`}
             </h2>
-            
+
             {/* Resources Grid */}
             {loading.resources ? (
               <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
@@ -259,7 +253,7 @@ export default function ResourcesPage() {
               </div>
             ) : filteredResources.length === 0 ? (
               <div className="empty-state">
-                <Package className="empty-state-icon" />
+                <CubeIcon className="empty-state-icon" />
                 <p className="empty-state-title">
                   {searchQuery ? 'No resources found' : 'No resources available'}
                 </p>
@@ -271,16 +265,13 @@ export default function ResourcesPage() {
               <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                 {filteredResources.map((resource) => (
                   <div key={resource.uri} 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-10 h-10 rounded-lg bg-blue-500/10 flex items-center justify-center">
-                          <Package className="w-5 h-5 text-blue-500" />
-                        </div>
-                        <div>
-                          <h3 className="font-semibold text-foreground">{resource.name}</h3>
-                          <span className="badge badge-primary text-xs mt-1">
-                            Resource
-                          </span>
+                    {/* Clean Header */}
+                    <div className="flex items-center gap-3 mb-3">
+                      <CubeIcon className="h-5 w-5 text-primary flex-shrink-0" />
+                      <div className="flex-1 min-w-0">
+                        <h3 className="font-medium text-[15px] text-foreground leading-tight truncate">{resource.name}</h3>
+                        <div className="flex items-center gap-1.5 text-xs text-muted-foreground leading-none mt-1">
+                          <span>Resource</span>
                         </div>
                       </div>
                     </div>