nitrostack 1.0.65 → 1.0.66

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

@@ -0,0 +1,230 @@
+'use client';
+
+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';
+
+export default function PromptsPage() {
+  const { prompts, setPrompts, loading, setLoading } = useStudioStore();
+  const [searchQuery, setSearchQuery] = useState('');
+  const [selectedPrompt, setSelectedPrompt] = useState<Prompt | null>(null);
+  const [promptArgs, setPromptArgs] = useState<Record<string, string>>({});
+  const [promptResult, setPromptResult] = useState<any>(null);
+  const [executing, setExecuting] = useState(false);
+
+  useEffect(() => {
+    loadPrompts();
+  }, []);
+
+  const loadPrompts = async () => {
+    setLoading('prompts', true);
+    try {
+      const data = await api.getPrompts();
+      setPrompts(data.prompts || []);
+    } catch (error) {
+      console.error('Failed to load prompts:', error);
+    } finally {
+      setLoading('prompts', false);
+    }
+  };
+
+  const handleExecutePrompt = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!selectedPrompt) return;
+
+    setExecuting(true);
+    setPromptResult(null);
+
+    try {
+      const result = await api.executePrompt(selectedPrompt.name, promptArgs);
+      setPromptResult(result);
+    } catch (error) {
+      console.error('Prompt execution failed:', error);
+      setPromptResult({ error: 'Execution failed' });
+    } finally {
+      setExecuting(false);
+    }
+  };
+
+  const filteredPrompts = prompts.filter((prompt) =>
+    prompt.name.toLowerCase().includes(searchQuery.toLowerCase())
+  );
+
+  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>
+        <button onClick={loadPrompts} className="btn btn-primary text-sm px-4 py-2 gap-2">
+          <RefreshCw className="w-4 h-4" />
+          Refresh
+        </button>
+      </div>
+
+      {/* 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>
+
+                  <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 && (
+        <div
+          className="fixed inset-0 z-50 flex items-center justify-center animate-fade-in"
+          style={{ backgroundColor: 'rgba(0, 0, 0, 0.85)' }}
+          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"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <div className="flex items-center 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">
+                  <FileText className="w-5 h-5 text-blue-500" />
+                </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"
+              >
+                <X 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>
+                </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>
+                        <div className="text-sm whitespace-pre-wrap text-foreground">{contentText}</div>
+                      </div>
+                    );
+                  })}
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,315 @@
+'use client';
+
+import { useEffect, useState, useCallback } from 'react';
+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';
+
+interface WidgetExample {
+  name: string;
+  description: string;
+  data: Record<string, any>;
+}
+
+interface WidgetMetadata {
+  uri: string;
+  name: string;
+  description: string;
+  examples: WidgetExample[];
+  tags?: string[];
+}
+
+export default function ResourcesPage() {
+  const { resources, setResources, loading, setLoading, openEnlargeModal } = useStudioStore();
+  const [searchQuery, setSearchQuery] = useState('');
+  const [widgets, setWidgets] = useState<WidgetMetadata[]>([]);
+  const [loadingWidgets, setLoadingWidgets] = useState(false);
+  const [selectedExamples, setSelectedExamples] = useState<Record<string, number>>({});
+
+  useEffect(() => {
+    loadResources();
+    loadWidgets();
+  }, []);
+
+  const loadResources = async () => {
+    setLoading('resources', true);
+    try {
+      const data = await api.getResources();
+      setResources(data.resources || []);
+    } catch (error) {
+      console.error('Failed to load resources:', error);
+    } finally {
+      setLoading('resources', false);
+    }
+  };
+
+  const loadWidgets = async () => {
+    setLoadingWidgets(true);
+    try {
+      console.log('📦 Loading widget examples from API...');
+      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);
+    } finally {
+      setLoadingWidgets(false);
+    }
+  };
+
+  const isUIWidget = (resource: Resource) => {
+    return resource.mimeType === 'text/html' || 
+           resource.uri.startsWith('widget://') ||
+           resource._meta?.['ui/widget'] === true;
+  };
+
+  const filteredResources = resources.filter(
+    (resource) =>
+      !isUIWidget(resource) &&
+      (resource.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        resource.uri.toLowerCase().includes(searchQuery.toLowerCase()))
+  );
+
+  const filteredWidgets = widgets.filter((widget) =>
+    widget.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+    widget.uri.toLowerCase().includes(searchQuery.toLowerCase()) ||
+    widget.description.toLowerCase().includes(searchQuery.toLowerCase())
+  );
+
+  const handleExampleChange = useCallback((widgetUri: string, exampleIndex: number) => {
+    setSelectedExamples(prev => ({ ...prev, [widgetUri]: exampleIndex }));
+  }, []);
+
+  const getSelectedExample = useCallback((widgetUri: string) => {
+    return selectedExamples[widgetUri] || 0;
+  }, [selectedExamples]);
+
+  const handleWidgetEnlarge = useCallback((e: React.MouseEvent, widget: WidgetMetadata) => {
+    e.preventDefault();
+    e.stopPropagation();
+    
+    const exampleIndex = getSelectedExample(widget.uri);
+    
+    setTimeout(() => {
+      openEnlargeModal('resource', {
+        uri: widget.uri,
+        name: widget.name,
+        description: widget.description,
+        responseData: widget.examples[exampleIndex]?.data
+      });
+    }, 0);
+  }, [selectedExamples, openEnlargeModal, getSelectedExample]);
+
+  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>
+        <button onClick={loadResources} className="btn btn-primary text-sm px-4 py-2 gap-2">
+          <RefreshCw className="w-4 h-4" />
+          Refresh
+        </button>
+      </div>
+
+      {/* 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 resources..."
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            className="input mb-6"
+          />
+
+          {/* 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>
+
+                  <p className="text-sm text-muted-foreground mb-3 line-clamp-2">
+                    {widget.description}
+                  </p>
+
+                  <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>
+                  )}
+
+                  {/* 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}
+                          />
+                        </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>
+                </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" />
+              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">
+                {[1, 2, 3].map((i) => (
+                  <div key={i} className="card skeleton h-64"></div>
+                ))}
+              </div>
+            ) : filteredResources.length === 0 ? (
+              <div className="empty-state">
+                <Package className="empty-state-icon" />
+                <p className="empty-state-title">
+                  {searchQuery ? 'No resources found' : 'No resources available'}
+                </p>
+                <p className="empty-state-description">
+                  {searchQuery ? 'Try a different search term' : 'No MCP resources have been registered'}
+                </p>
+              </div>
+            ) : (
+              <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>
+                        </div>
+                      </div>
+                    </div>
+
+                    <p className="text-sm text-muted-foreground mb-4 line-clamp-2">
+                      {resource.description || 'No description'}
+                    </p>
+
+                    <div className="bg-muted/30 rounded-lg p-3 border border-border">
+                      <p className="text-xs text-muted-foreground mb-1 font-semibold uppercase tracking-wide">URI</p>
+                      <p className="text-xs text-foreground font-mono truncate">
+                        {resource.uri}
+                      </p>
+                    </div>
+
+                    {resource.mimeType && (
+                      <div className="mt-3">
+                        <span className="badge badge-secondary text-xs">
+                          {resource.mimeType}
+                        </span>
+                      </div>
+                    )}
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}