@agentforge-ai/cli 0.4.3 → 0.5.1

package/templates/default/dashboard/app/routes/skills.tsx

@@ -1,252 +1,365 @@
 import { createFileRoute } from '@tanstack/react-router';
 import { DashboardLayout } from '../components/DashboardLayout';
 import { useState, useMemo } from 'react';
-// import { useQuery, useMutation } from 'convex/react';
-// import { api } from '../../convex/_generated/api';
-import { Sparkles, Download, Trash2, Plus, Search, Filter, X } from 'lucide-react';
-
-// --- Mock Data and Types ---
-type SkillCategory = 'Tools' | 'Knowledge' | 'Workflows' | 'Integrations';
-
-interface Skill {
-  id: string;
-  name: string;
-  description: string;
-  category: SkillCategory;
-  version: string;
-  isInstalled: boolean;
-}
+import { useQuery, useMutation } from 'convex/react';
+import { api } from '@convex/_generated/api';
+import { Sparkles, Download, Trash2, Plus, Search, X, Check, Code, Globe, Calculator, FileText, Database, Mail, Wrench } from 'lucide-react';
 
-const mockSkills: Skill[] = [
-  { id: '1', name: 'Web Scraper', description: 'Extracts data from websites using CSS selectors.', category: 'Tools', version: '1.2.0', isInstalled: true },
-  { id: '2', name: 'Sentiment Analysis', description: 'Analyzes text to determine emotional tone.', category: 'Knowledge', version: '2.0.1', isInstalled: false },
-  { id: '3', name: 'Daily Report', description: 'Generates a daily summary of activities.', category: 'Workflows', version: '1.0.0', isInstalled: true },
-  { id: '4', name: 'GitHub Integration', description: 'Connects to GitHub to manage repositories.', category: 'Integrations', version: '1.5.3', isInstalled: false },
-  { id: '5', name: 'Image Resizer', description: 'Resizes images to specified dimensions.', category: 'Tools', version: '1.1.0', isInstalled: false },
-  { id: '6', name: 'Company Financials', description: 'Provides financial data for public companies.', category: 'Knowledge', version: '3.1.0', isInstalled: true },
-];
+export const Route = createFileRoute('/skills')({ component: SkillsPage });
 
-const CATEGORIES: SkillCategory[] = ['Tools', 'Knowledge', 'Workflows', 'Integrations'];
-
-// --- Components ---
-
-function CreateSkillDialog({ open, onOpenChange, onCreateSkill }: { open: boolean; onOpenChange: (open: boolean) => void; onCreateSkill: (skill: Omit<Skill, 'id' | 'isInstalled'>) => void; }) {
-  const [name, setName] = useState('');
-  const [description, setDescription] = useState('');
-  const [category, setCategory] = useState<SkillCategory>('Tools');
-  const [version, setVersion] = useState('1.0.0');
-
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-    if (!name || !description || !version) return;
-    onCreateSkill({ name, description, category, version });
-    onOpenChange(false);
-    setName('');
-    setDescription('');
-    setCategory('Tools');
-    setVersion('1.0.0');
-  };
+// ─── Prebuilt Skills Catalog ─────────────────────────────────────
+const PREBUILT_SKILLS = [
+  {
+    name: 'web-search',
+    displayName: 'Web Search',
+    description: 'Search the web using DuckDuckGo and return structured results. Supports query refinement and result filtering.',
+    category: 'Tools',
+    version: '1.0.0',
+    author: 'AgentForge',
+    icon: Globe,
+    code: `import { createTool } from '@mastra/core';
+import { z } from 'zod';
 
-  if (!open) return null;
+export const webSearch = createTool({
+  id: 'web-search',
+  description: 'Search the web and return results',
+  inputSchema: z.object({
+    query: z.string().describe('Search query'),
+    maxResults: z.number().default(5).describe('Maximum results to return'),
+  }),
+  execute: async ({ context }) => {
+    const url = \`https://api.duckduckgo.com/?q=\${encodeURIComponent(context.query)}&format=json&no_redirect=1\`;
+    const res = await fetch(url);
+    const data = await res.json();
+    return { results: data.RelatedTopics?.slice(0, context.maxResults) || [], source: 'duckduckgo' };
+  },
+});`,
+  },
+  {
+    name: 'code-executor',
+    displayName: 'Code Executor',
+    description: 'Safely execute JavaScript/TypeScript code snippets in a sandboxed environment and return the output.',
+    category: 'Tools',
+    version: '1.0.0',
+    author: 'AgentForge',
+    icon: Code,
+    code: `import { createTool } from '@mastra/core';
+import { z } from 'zod';
 
-  return (
-    <div className="fixed inset-0 bg-black/60 z-50 flex items-center justify-center p-4">
-      <div className="bg-card p-6 rounded-lg shadow-xl w-full max-w-md border border-border" onClick={(e) => e.stopPropagation()}>
-        <div className="flex justify-between items-center mb-4">
-          <h2 className="text-xl font-semibold text-foreground">Create Custom Skill</h2>
-          <button onClick={() => onOpenChange(false)} className="text-muted-foreground hover:text-foreground"><X size={20} /></button>
-        </div>
-        <form onSubmit={handleSubmit} className="space-y-4">
-          <div>
-            <label htmlFor="name" className="block text-sm font-medium text-muted-foreground mb-1">Skill Name</label>
-            <input id="name" value={name} onChange={(e) => setName(e.target.value)} required className="w-full bg-background border border-border rounded-md px-3 py-2 text-foreground focus:outline-none focus:ring-2 focus:ring-primary" />
-          </div>
-          <div>
-            <label htmlFor="description" className="block text-sm font-medium text-muted-foreground mb-1">Description</label>
-            <textarea id="description" value={description} onChange={(e) => setDescription(e.target.value)} required rows={3} className="w-full bg-background border border-border rounded-md px-3 py-2 text-foreground focus:outline-none focus:ring-2 focus:ring-primary"></textarea>
-          </div>
-          <div className="grid grid-cols-2 gap-4">
-            <div>
-              <label htmlFor="category" className="block text-sm font-medium text-muted-foreground mb-1">Category</label>
-              <select id="category" value={category} onChange={(e) => setCategory(e.target.value as SkillCategory)} className="w-full bg-background border border-border rounded-md px-3 py-2 text-foreground focus:outline-none focus:ring-2 focus:ring-primary">
-                {CATEGORIES.map(cat => <option key={cat} value={cat}>{cat}</option>)}
-              </select>
-            </div>
-            <div>
-              <label htmlFor="version" className="block text-sm font-medium text-muted-foreground mb-1">Version</label>
-              <input id="version" value={version} onChange={(e) => setVersion(e.target.value)} required className="w-full bg-background border border-border rounded-md px-3 py-2 text-foreground focus:outline-none focus:ring-2 focus:ring-primary" />
-            </div>
-          </div>
-          <div className="flex justify-end gap-2 pt-4">
-            <button type="button" onClick={() => onOpenChange(false)} className="px-4 py-2 rounded-md border border-border text-foreground hover:bg-zinc-800 transition-colors">Cancel</button>
-            <button type="submit" className="px-4 py-2 rounded-md bg-primary text-primary-foreground hover:bg-primary/90 transition-colors">Create Skill</button>
-          </div>
-        </form>
-      </div>
-    </div>
-  );
-}
+export const codeExecutor = createTool({
+  id: 'code-executor',
+  description: 'Execute JavaScript code and return the result',
+  inputSchema: z.object({
+    code: z.string().describe('JavaScript code to execute'),
+  }),
+  execute: async ({ context }) => {
+    try {
+      const fn = new Function('return (async () => {' + context.code + '})()');
+      const result = await fn();
+      return { success: true, output: String(result) };
+    } catch (error: any) {
+      return { success: false, error: error.message };
+    }
+  },
+});`,
+  },
+  {
+    name: 'calculator',
+    displayName: 'Calculator',
+    description: 'Perform mathematical calculations. Supports basic arithmetic, trigonometry, and common math functions.',
+    category: 'Tools',
+    version: '1.0.0',
+    author: 'AgentForge',
+    icon: Calculator,
+    code: `import { createTool } from '@mastra/core';
+import { z } from 'zod';
 
-function SkillCard({ skill, onToggleInstall }: { skill: Skill; onToggleInstall: (id: string) => void; }) {
-  // const uninstallSkill = useMutation(api.skills.uninstall);
-  // const installSkill = useMutation(api.skills.install);
-
-  const handleToggle = () => {
-    onToggleInstall(skill.id);
-    // if (skill.isInstalled) {
-    //   uninstallSkill({ id: skill.id });
-    // } else {
-    //   installSkill({ id: skill.id });
-    // }
-  };
+export const calculator = createTool({
+  id: 'calculator',
+  description: 'Evaluate a mathematical expression',
+  inputSchema: z.object({
+    expression: z.string().describe('Math expression to evaluate, e.g. "2 + 2 * 3"'),
+  }),
+  execute: async ({ context }) => {
+    try {
+      const sanitized = context.expression.replace(/[^0-9+\\-*/().%\\s]/g, '');
+      const result = Function('"use strict"; return (' + sanitized + ')')();
+      return { result: Number(result), expression: context.expression };
+    } catch (error: any) {
+      return { error: 'Invalid expression: ' + error.message };
+    }
+  },
+});`,
+  },
+  {
+    name: 'text-summarizer',
+    displayName: 'Text Summarizer',
+    description: 'Summarize long text into concise bullet points or paragraphs using extractive summarization.',
+    category: 'Knowledge',
+    version: '1.0.0',
+    author: 'AgentForge',
+    icon: FileText,
+    code: `import { createTool } from '@mastra/core';
+import { z } from 'zod';
 
-  return (
-    <div className="bg-card border border-border rounded-lg p-4 flex flex-col h-full transition-shadow hover:shadow-lg hover:shadow-primary/10">
-      <div className="flex-grow">
-        <div className="flex items-start justify-between mb-2">
-          <div className="flex items-center gap-3">
-            <div className="bg-primary/10 p-2 rounded-md">
-              <Sparkles className="text-primary" size={20} />
-            </div>
-            <div>
-              <h3 className="font-semibold text-foreground">{skill.name}</h3>
-              <p className="text-xs text-muted-foreground">v{skill.version}</p>
-            </div>
-          </div>
-          <span className="text-xs bg-zinc-800 border border-zinc-700 text-muted-foreground px-2 py-0.5 rounded-full whitespace-nowrap">{skill.category}</span>
-        </div>
-        <p className="text-sm text-muted-foreground mt-3">
-          {skill.description}
-        </p>
-      </div>
-      <button
-        onClick={handleToggle}
-        className={`mt-4 w-full flex items-center justify-center gap-2 px-4 py-2 rounded-md text-sm font-medium transition-colors ${skill.isInstalled ? 'bg-destructive/10 text-destructive hover:bg-destructive/20' : 'bg-primary/10 text-primary hover:bg-primary/20'}`}>
-        {skill.isInstalled ? <Trash2 size={16} /> : <Download size={16} />}
-        {skill.isInstalled ? 'Uninstall' : 'Install'}
-      </button>
-    </div>
-  );
-}
+export const textSummarizer = createTool({
+  id: 'text-summarizer',
+  description: 'Summarize text into key points',
+  inputSchema: z.object({
+    text: z.string().describe('Text to summarize'),
+    maxSentences: z.number().default(3).describe('Maximum sentences in summary'),
+  }),
+  execute: async ({ context }) => {
+    const sentences = context.text.match(/[^.!?]+[.!?]+/g) || [context.text];
+    const scored = sentences.map((s, i) => ({
+      text: s.trim(),
+      score: s.split(' ').length * (i === 0 ? 1.5 : 1),
+    }));
+    scored.sort((a, b) => b.score - a.score);
+    return { summary: scored.slice(0, context.maxSentences).map(s => s.text).join(' ') };
+  },
+});`,
+  },
+  {
+    name: 'json-transformer',
+    displayName: 'JSON Transformer',
+    description: 'Parse, validate, and transform JSON data. Extract fields, flatten nested objects, and convert formats.',
+    category: 'Tools',
+    version: '1.0.0',
+    author: 'AgentForge',
+    icon: Database,
+    code: `import { createTool } from '@mastra/core';
+import { z } from 'zod';
 
-export const Route = createFileRoute('/skills')({ component: SkillsPage });
+export const jsonTransformer = createTool({
+  id: 'json-transformer',
+  description: 'Parse and transform JSON data',
+  inputSchema: z.object({
+    json: z.string().describe('JSON string to transform'),
+    operation: z.enum(['parse', 'flatten', 'extract']).describe('Operation to perform'),
+    path: z.string().optional().describe('JSON path for extraction (e.g. "data.users")'),
+  }),
+  execute: async ({ context }) => {
+    const data = JSON.parse(context.json);
+    if (context.operation === 'parse') return { result: data };
+    if (context.operation === 'extract' && context.path) {
+      const keys = context.path.split('.');
+      let val = data;
+      for (const k of keys) val = val?.[k];
+      return { result: val };
+    }
+    if (context.operation === 'flatten') {
+      const flat: Record<string, any> = {};
+      const recurse = (obj: any, prefix = '') => {
+        for (const [k, v] of Object.entries(obj)) {
+          const key = prefix ? prefix + '.' + k : k;
+          if (typeof v === 'object' && v !== null && !Array.isArray(v)) recurse(v, key);
+          else flat[key] = v;
+        }
+      };
+      recurse(data);
+      return { result: flat };
+    }
+    return { error: 'Unknown operation' };
+  },
+});`,
+  },
+  {
+    name: 'email-drafter',
+    displayName: 'Email Drafter',
+    description: 'Generate professional email drafts based on context, tone, and recipient information.',
+    category: 'Workflows',
+    version: '1.0.0',
+    author: 'AgentForge',
+    icon: Mail,
+    code: `import { createTool } from '@mastra/core';
+import { z } from 'zod';
+
+export const emailDrafter = createTool({
+  id: 'email-drafter',
+  description: 'Draft a professional email',
+  inputSchema: z.object({
+    to: z.string().describe('Recipient name or role'),
+    subject: z.string().describe('Email subject'),
+    context: z.string().describe('What the email should convey'),
+    tone: z.enum(['formal', 'casual', 'friendly']).default('formal'),
+  }),
+  execute: async ({ context: ctx }) => {
+    const greeting = ctx.tone === 'formal' ? 'Dear' : ctx.tone === 'friendly' ? 'Hi' : 'Hello';
+    const closing = ctx.tone === 'formal' ? 'Best regards' : ctx.tone === 'friendly' ? 'Cheers' : 'Thanks';
+    return {
+      draft: \`Subject: \${ctx.subject}\\n\\n\${greeting} \${ctx.to},\\n\\n\${ctx.context}\\n\\n\${closing}\`,
+      metadata: { tone: ctx.tone, to: ctx.to },
+    };
+  },
+});`,
+  },
+];
+
+const CATEGORIES = ['All', 'Tools', 'Knowledge', 'Workflows'];
 
 function SkillsPage() {
-  const [skills, setSkills] = useState(mockSkills);
+  const installedSkills = useQuery(api.skills.list, {}) ?? [];
+  const installSkill = useMutation(api.skills.create);
+  const removeSkill = useMutation(api.skills.remove);
+  const toggleSkill = useMutation(api.skills.toggleEnabled);
+
   const [searchQuery, setSearchQuery] = useState('');
-  const [selectedCategories, setSelectedCategories] = useState<SkillCategory[]>([]);
-  const [isCreateDialogOpen, setCreateDialogOpen] = useState(false);
-
-  // const allSkillsQuery = useQuery(api.skills.list);
-  // const createSkillMutation = useMutation(api.skills.create);
-  // const isLoading = allSkillsQuery === undefined;
-  // const skillsData = allSkillsQuery || [];
-
-  const handleToggleCategory = (category: SkillCategory) => {
-    setSelectedCategories(prev =>
-      prev.includes(category)
-        ? prev.filter(c => c !== category)
-        : [...prev, category]
-    );
-  };
+  const [categoryFilter, setCategoryFilter] = useState('All');
+  const [tab, setTab] = useState<'installed' | 'marketplace'>('marketplace');
+  const [selectedSkill, setSelectedSkill] = useState<typeof PREBUILT_SKILLS[0] | null>(null);
 
-  const handleCreateSkill = (newSkillData: Omit<Skill, 'id' | 'isInstalled'>) => {
-    const newSkill: Skill = {
-      ...newSkillData,
-      id: `custom-${Date.now()}`,
-      isInstalled: false,
-    };
-    setSkills(prev => [newSkill, ...prev]);
-    // createSkillMutation(newSkillData).catch(console.error);
-  };
+  const installedNames = new Set(installedSkills.map((s: any) => s.name));
 
-  const handleToggleInstall = (id: string) => {
-    setSkills(prev => prev.map(s => s.id === id ? { ...s, isInstalled: !s.isInstalled } : s));
-    // Note: The actual mutation would be called in SkillCard
-  };
+  const filteredMarketplace = useMemo(() => {
+    let result = PREBUILT_SKILLS;
+    if (categoryFilter !== 'All') result = result.filter(s => s.category === categoryFilter);
+    if (searchQuery) {
+      const q = searchQuery.toLowerCase();
+      result = result.filter(s => s.displayName.toLowerCase().includes(q) || s.description.toLowerCase().includes(q));
+    }
+    return result;
+  }, [searchQuery, categoryFilter]);
+
+  const filteredInstalled = useMemo(() => {
+    let result = installedSkills;
+    if (categoryFilter !== 'All') result = result.filter((s: any) => s.category === categoryFilter);
+    if (searchQuery) {
+      const q = searchQuery.toLowerCase();
+      result = result.filter((s: any) => s.displayName.toLowerCase().includes(q) || s.description.toLowerCase().includes(q));
+    }
+    return result;
+  }, [installedSkills, searchQuery, categoryFilter]);
 
-  const filteredSkills = useMemo(() => {
-    // Replace `skills` with `skillsData` when using Convex
-    return skills.filter(skill =>
-      skill.name.toLowerCase().includes(searchQuery.toLowerCase()) &&
-      (selectedCategories.length === 0 || selectedCategories.includes(skill.category))
-    );
-  }, [skills, searchQuery, selectedCategories]); // Replace `skills` with `skillsData`
+  const handleInstall = async (skill: typeof PREBUILT_SKILLS[0]) => {
+    await installSkill({
+      name: skill.name,
+      displayName: skill.displayName,
+      description: skill.description,
+      category: skill.category,
+      version: skill.version,
+      author: skill.author,
+      code: skill.code,
+    });
+  };
 
-  const isLoading = false; // When using Convex, this would be `allSkillsQuery === undefined`
+  const handleUninstall = async (id: any) => {
+    if (confirm('Uninstall this skill?')) {
+      await removeSkill({ id });
+    }
+  };
 
   return (
     <DashboardLayout>
-      <div className="p-4 sm:p-6 lg:p-8 bg-background text-foreground min-h-screen">
-        <header className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 mb-6">
+      <div className="space-y-6">
+        <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
           <div>
-            <h1 className="text-2xl font-bold tracking-tight">Skills Marketplace</h1>
-            <p className="text-muted-foreground">Discover, install, and create new capabilities for your agents.</p>
+            <h1 className="text-3xl font-bold">Skills</h1>
+            <p className="text-muted-foreground">Install prebuilt skills or create your own to extend agent capabilities.</p>
           </div>
-          <button onClick={() => setCreateDialogOpen(true)} className="flex items-center justify-center gap-2 px-4 py-2 rounded-md text-sm font-medium bg-primary text-primary-foreground hover:bg-primary/90 transition-colors">
-            <Plus size={16} /> Create Skill
+        </div>
+
+        {/* Tabs */}
+        <div className="flex gap-1 bg-muted p-1 rounded-lg w-fit">
+          <button onClick={() => setTab('marketplace')} className={`px-4 py-2 rounded-md text-sm font-medium transition-colors ${tab === 'marketplace' ? 'bg-card shadow-sm' : 'text-muted-foreground hover:text-foreground'}`}>
+            <Sparkles className="w-4 h-4 inline mr-2" />Marketplace ({PREBUILT_SKILLS.length})
+          </button>
+          <button onClick={() => setTab('installed')} className={`px-4 py-2 rounded-md text-sm font-medium transition-colors ${tab === 'installed' ? 'bg-card shadow-sm' : 'text-muted-foreground hover:text-foreground'}`}>
+            <Check className="w-4 h-4 inline mr-2" />Installed ({installedSkills.length})
           </button>
-        </header>
-
-        <div className="mb-6 space-y-4">
-          <div className="relative">
-            <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground" size={20} />
-            <input
-              type="text"
-              placeholder="Search skills by name..."
-              value={searchQuery}
-              onChange={(e) => setSearchQuery(e.target.value)}
-              className="w-full bg-card border border-border rounded-md pl-10 pr-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary"
-            />
+        </div>
+
+        {/* Filters */}
+        <div className="flex flex-col sm:flex-row gap-3">
+          <div className="relative flex-1 max-w-sm">
+            <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+            <input type="text" placeholder="Search skills..." value={searchQuery} onChange={(e) => setSearchQuery(e.target.value)} className="pl-9 pr-3 py-2 bg-card border border-border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary w-full" />
           </div>
-          <div className="flex items-center gap-2 flex-wrap">
-            <Filter size={16} className="text-muted-foreground" />
-            <span className="text-sm font-medium text-muted-foreground">Filter by:</span>
-            {CATEGORIES.map(category => (
-              <button
-                key={category}
-                onClick={() => handleToggleCategory(category)}
-                className={`px-3 py-1 text-sm rounded-full border transition-colors ${selectedCategories.includes(category) ? 'bg-primary text-primary-foreground border-primary' : 'bg-card hover:bg-zinc-800 border-border'}`}>
-                {category}
-              </button>
+          <div className="flex gap-2">
+            {CATEGORIES.map(cat => (
+              <button key={cat} onClick={() => setCategoryFilter(cat)} className={`px-3 py-1.5 rounded-lg text-sm ${categoryFilter === cat ? 'bg-primary text-primary-foreground' : 'bg-card border border-border text-muted-foreground hover:text-foreground'}`}>{cat}</button>
             ))}
-            {selectedCategories.length > 0 && (
-              <button onClick={() => setSelectedCategories([])} className="text-sm text-muted-foreground hover:text-foreground underline">Clear</button>
-            )}
           </div>
         </div>
 
-        {isLoading ? (
-          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
-            {[...Array(8)].map((_, i) => (
-              <div key={i} className="bg-card border border-border rounded-lg p-4 animate-pulse">
-                <div className="h-8 bg-zinc-800 rounded w-12 mb-3"></div>
-                <div className="h-5 bg-zinc-800 rounded w-3/4 mb-2"></div>
-                <div className="h-4 bg-zinc-800 rounded w-1/4 mb-4"></div>
-                <div className="h-4 bg-zinc-800 rounded w-full mb-1"></div>
-                <div className="h-4 bg-zinc-800 rounded w-5/6"></div>
-                <div className="h-10 bg-zinc-800 rounded mt-4"></div>
-              </div>
-            ))}
-          </div>
-        ) : filteredSkills.length > 0 ? (
-          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
-            {filteredSkills.map(skill => (
-              <SkillCard key={skill.id} skill={skill} onToggleInstall={handleToggleInstall} />
-            ))}
+        {/* Grid */}
+        {tab === 'marketplace' ? (
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+            {filteredMarketplace.map(skill => {
+              const isInstalled = installedNames.has(skill.name);
+              const Icon = skill.icon;
+              return (
+                <div key={skill.name} className="bg-card border border-border rounded-lg p-5 shadow-sm hover:shadow-md transition-shadow">
+                  <div className="flex items-start justify-between mb-3">
+                    <div className="flex items-center gap-2">
+                      <div className="w-8 h-8 rounded-lg bg-primary/10 flex items-center justify-center"><Icon className="w-4 h-4 text-primary" /></div>
+                      <div>
+                        <h3 className="font-semibold text-foreground">{skill.displayName}</h3>
+                        <p className="text-xs text-muted-foreground">v{skill.version} by {skill.author}</p>
+                      </div>
+                    </div>
+                    <span className="text-xs bg-muted px-2 py-0.5 rounded">{skill.category}</span>
+                  </div>
+                  <p className="text-sm text-muted-foreground mb-4 line-clamp-2">{skill.description}</p>
+                  <div className="flex items-center justify-between pt-3 border-t border-border">
+                    <button onClick={() => setSelectedSkill(skill)} className="text-xs text-primary hover:underline">View Code</button>
+                    {isInstalled ? (
+                      <span className="text-xs text-green-500 flex items-center gap-1"><Check className="w-3.5 h-3.5" /> Installed</span>
+                    ) : (
+                      <button onClick={() => handleInstall(skill)} className="bg-primary text-primary-foreground px-3 py-1.5 rounded-lg text-xs hover:bg-primary/90 flex items-center gap-1">
+                        <Download className="w-3.5 h-3.5" /> Install
+                      </button>
+                    )}
+                  </div>
+                </div>
+              );
+            })}
           </div>
         ) : (
-          <div className="text-center py-16 border-2 border-dashed border-border rounded-lg bg-card">
-            <Sparkles className="mx-auto h-12 w-12 text-muted-foreground" />
-            <h3 className="mt-2 text-lg font-medium text-foreground">No Skills Found</h3>
-            <p className="mt-1 text-sm text-muted-foreground">Your search or filter criteria did not match any skills. Try a different query.</p>
-            <button onClick={() => { setSearchQuery(''); setSelectedCategories([]); }} className="mt-4 px-4 py-2 rounded-md text-sm font-medium bg-primary text-primary-foreground hover:bg-primary/90 transition-colors">
-              Clear Filters
-            </button>
+          filteredInstalled.length === 0 ? (
+            <div className="text-center py-16 bg-card border border-border rounded-lg">
+              <Wrench className="w-16 h-16 text-muted-foreground/30 mx-auto mb-4" />
+              <h3 className="text-lg font-semibold mb-2">No skills installed</h3>
+              <p className="text-muted-foreground">Browse the marketplace to install skills for your agents.</p>
+            </div>
+          ) : (
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+              {filteredInstalled.map((skill: any) => (
+                <div key={skill._id} className="bg-card border border-border rounded-lg p-5 shadow-sm">
+                  <div className="flex items-start justify-between mb-3">
+                    <h3 className="font-semibold text-foreground">{skill.displayName}</h3>
+                    <span className={`text-xs px-2 py-0.5 rounded-full ${skill.isEnabled ? 'bg-green-500/10 text-green-500' : 'bg-muted text-muted-foreground'}`}>{skill.isEnabled ? 'Enabled' : 'Disabled'}</span>
+                  </div>
+                  <p className="text-sm text-muted-foreground mb-4 line-clamp-2">{skill.description}</p>
+                  <div className="flex items-center justify-between pt-3 border-t border-border">
+                    <button onClick={() => toggleSkill({ id: skill._id })} className="text-xs text-muted-foreground hover:text-foreground">{skill.isEnabled ? 'Disable' : 'Enable'}</button>
+                    <button onClick={() => handleUninstall(skill._id)} className="p-1.5 rounded hover:bg-destructive/10"><Trash2 className="w-4 h-4 text-destructive" /></button>
+                  </div>
+                </div>
+              ))}
+            </div>
+          )
+        )}
+
+        {/* Code Preview Modal */}
+        {selectedSkill && (
+          <div className="fixed inset-0 bg-black/60 z-50 flex items-center justify-center p-4">
+            <div className="bg-card border border-border rounded-lg shadow-xl w-full max-w-2xl max-h-[80vh] flex flex-col">
+              <div className="flex justify-between items-center p-4 border-b border-border">
+                <h2 className="text-lg font-bold">{selectedSkill.displayName} — Source Code</h2>
+                <button onClick={() => setSelectedSkill(null)} className="text-muted-foreground hover:text-foreground"><X className="h-5 w-5" /></button>
+              </div>
+              <pre className="flex-1 overflow-auto p-4 text-xs font-mono bg-background text-foreground">{selectedSkill.code}</pre>
+              <div className="p-4 border-t border-border flex justify-end gap-2">
+                <button onClick={() => setSelectedSkill(null)} className="px-4 py-2 rounded-lg bg-muted text-muted-foreground text-sm">Close</button>
+                {!installedNames.has(selectedSkill.name) && (
+                  <button onClick={() => { handleInstall(selectedSkill); setSelectedSkill(null); }} className="px-4 py-2 rounded-lg bg-primary text-primary-foreground text-sm hover:bg-primary/90">Install Skill</button>
+                )}
+              </div>
+            </div>
           </div>
         )}
       </div>
-      <CreateSkillDialog open={isCreateDialogOpen} onOpenChange={setCreateDialogOpen} onCreateSkill={handleCreateSkill} />
     </DashboardLayout>
   );
 }