Phase 8: Role-Based Marketplace (Internal sharing, team assets filtering)

frontend/src/components/AgentsView.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useMemo, useState } from 'react';
-import { Bot, CheckCircle2, PlusCircle, RefreshCw, X } from 'lucide-react';
+import { Bot, CheckCircle2, PlusCircle, RefreshCw, X, ShoppingBag, Users, Globe } from 'lucide-react';
 import { motion } from 'framer-motion';
 import { supabase } from '../services/supabase';
 import { useAuth } from '../context/useAuth';
@@ -30,6 +30,13 @@ const AgentsView: React.FC = () => {
   const [saving, setSaving] = useState(false);
   const [message, setMessage] = useState<string | null>(null);
   const [error, setError] = useState<string | null>(null);
+  const [showShareModal, setShowShareModal] = useState(false);
+  const [sharingAgent, setSharingAgent] = useState<Agent | null>(null);
+  const [shareToTeam, setShareToTeam] = useState<string | null>(null);
+  const [shareDescription, setShareDescription] = useState('');
+  const [shareCategory, setShareCategory] = useState('General');
+  const [isPublicTemplate, setIsPublicTemplate] = useState(false);
+  const [teams, setTeams] = useState<{ id: string; name: string }[]>([]);
 
   const providerModels = providerOptions.find((option) => option.id === provider)?.models ?? [];
   const isEditing = selectedAgentId !== null;
@@ -50,8 +57,18 @@ const AgentsView: React.FC = () => {
 
   useEffect(() => {
     loadAgents();
+    fetchTeams();
   }, []);
 
+  const fetchTeams = async () => {
+    try {
+      const { data } = await supabase.from('teams').select('id, name');
+      setTeams(data || []);
+    } catch (err) {
+      console.error('Failed to fetch teams');
+    }
+  };
+
   const handleProviderChange = (value: SupportedProvider) => {
     setProvider(value);
     setModel(getDefaultModel(value));
@@ -112,6 +129,33 @@ const AgentsView: React.FC = () => {
     setSaving(false);
   };
 
+  const handleShareTemplate = async () => {
+    if (!sharingAgent || !user) return;
+    setSaving(true);
+    try {
+      const { error } = await supabase.from('agent_templates').insert({
+        name: sharingAgent.name,
+        role: sharingAgent.role,
+        description: shareDescription || `Custom agent: ${sharingAgent.name}`,
+        model: sharingAgent.model,
+        api_provider: sharingAgent.api_provider,
+        system_prompt: sharingAgent.system_prompt,
+        category: shareCategory,
+        author_id: user.id,
+        team_id: isPublicTemplate ? null : shareToTeam,
+        is_public: isPublicTemplate
+      });
+
+      if (error) throw error;
+      setMessage('Agent shared to marketplace!');
+      setShowShareModal(false);
+    } catch (err: any) {
+      setError(err.message);
+    } finally {
+      setSaving(false);
+    }
+  };
+
   return (
     <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} className="agents-page animate-fade-in">
       <div className="dashboard-heading page-heading">
@@ -207,12 +251,104 @@ const AgentsView: React.FC = () => {
                   <strong>{agent.name}</strong>
                   <p>{agent.role || 'No role provided.'}</p>
                 </div>
-                <span>{agent.api_provider} / {agent.model}</span>
+                <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-md)' }}>
+                  <span>{agent.api_provider} / {agent.model}</span>
+                  <button 
+                    className="btn btn-glass btn-sm"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      setSharingAgent(agent);
+                      setShowShareModal(true);
+                    }}
+                    title="Share to Marketplace"
+                  >
+                    <ShoppingBag size={14} />
+                  </button>
+                </div>
               </button>
             ))}
           </div>
         </section>
       </div>
+
+      {/* Share Modal */}
+      {showShareModal && sharingAgent && (
+        <div className="modal-overlay" onClick={() => setShowShareModal(false)}>
+          <div className="glass-panel modal-content" onClick={e => e.stopPropagation()} style={{ maxWidth: '500px' }}>
+            <div className="panel-heading">
+              <ShoppingBag size={28} color="var(--accent)" />
+              <div>
+                <h3>Share as Template</h3>
+                <p style={{ fontSize: '0.85rem', color: 'var(--text-dim)' }}>Publish '{sharingAgent.name}' to the Marketplace.</p>
+              </div>
+            </div>
+
+            <div style={{ display: 'grid', gap: 'var(--space-md)', marginTop: 'var(--space-lg)' }}>
+              <label>
+                <span>Description</span>
+                <textarea 
+                  className="glass-input" 
+                  value={shareDescription} 
+                  onChange={e => setShareDescription(e.target.value)}
+                  placeholder="What is this agent expert at?"
+                  rows={3}
+                />
+              </label>
+
+              <div className="responsive-two-col">
+                <label>
+                  <span>Category</span>
+                  <select className="glass-input" value={shareCategory} onChange={e => setShareCategory(e.target.value)}>
+                    <option value="General">General</option>
+                    <option value="Marketing">Marketing</option>
+                    <option value="Development">Development</option>
+                    <option value="Legal">Legal</option>
+                    <option value="Research">Research</option>
+                    <option value="Finance">Finance</option>
+                  </select>
+                </label>
+                <label>
+                  <span>Visibility</span>
+                  <select 
+                    className="glass-input" 
+                    value={isPublicTemplate ? 'public' : 'team'} 
+                    onChange={e => setIsPublicTemplate(e.target.value === 'public')}
+                  >
+                    <option value="team">Share to Team</option>
+                    <option value="public">Make Public (Global)</option>
+                  </select>
+                </label>
+              </div>
+
+              {!isPublicTemplate && (
+                <label>
+                  <span>Target Team</span>
+                  <select 
+                    className="glass-input" 
+                    value={shareToTeam || ''} 
+                    onChange={e => setShareToTeam(e.target.value || null)}
+                  >
+                    <option value="">Select a team...</option>
+                    {teams.map(t => <option key={t.id} value={t.id}>{t.name}</option>)}
+                  </select>
+                </label>
+              )}
+
+              <div className="button-row" style={{ marginTop: 'var(--space-lg)' }}>
+                <button className="btn btn-glass" onClick={() => setShowShareModal(false)}>Cancel</button>
+                <button 
+                  className="btn btn-primary" 
+                  onClick={handleShareTemplate}
+                  disabled={saving || (!isPublicTemplate && !shareToTeam)}
+                >
+                  <ShoppingBag size={18} />
+                  {saving ? 'Sharing...' : 'Publish to Marketplace'}
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
     </motion.div>
   );
 };

frontend/src/components/Marketplace.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { supabase } from '../services/supabase';
-import { Star, Download, Search } from 'lucide-react';
+import { Star, Download, Search, Users } from 'lucide-react';
 import { motion } from 'framer-motion';
 
 interface AgentTemplate {
@@ -13,29 +13,72 @@ interface AgentTemplate {
   category: string;
   description: string;
   is_featured: boolean;
+  team_id?: string;
+  is_public: boolean;
+  teams?: { name: string };
 }
 
 const Marketplace: React.FC = () => {
   const [templates, setTemplates] = useState<AgentTemplate[]>([]);
   const [search, setSearch] = useState('');
+  const [loading, setLoading] = useState(true);
+  const [deployingId, setDeployingId] = useState<string | null>(null);
+  const [message, setMessage] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [activeFilter, setActiveFilter] = useState<'all' | 'public' | 'team'>('all');
 
   useEffect(() => {
     const fetchTemplates = async () => {
-      const { data } = await supabase.from('agent_templates').select('*');
-      if (data) setTemplates(data);
+      setLoading(true);
+      setError(null);
+      const { data, error: templateError } = await supabase
+        .from('agent_templates')
+        .select(`
+          *,
+          teams:team_id(name)
+        `)
+        .order('category', { ascending: true })
+        .order('name', { ascending: true });
+
+      if (templateError) {
+        setError(templateError.message);
+      } else {
+        setTemplates(data ?? []);
+      }
+      setLoading(false);
     };
     fetchTemplates();
   }, []);
 
   const handleDeploy = async (template: AgentTemplate) => {
+    setMessage(null);
+    setError(null);
+    setDeployingId(template.id);
+
     const { data: userData } = await supabase.auth.getUser();
     if (!userData.user) {
-      alert('Please log in to deploy agents.');
+      setError('Please log in to deploy agents.');
+      setDeployingId(null);
       return;
     }
 
     try {
-      const { error } = await supabase.from('agents').insert({
+      const { data: existingAgent, error: lookupError } = await supabase
+        .from('agents')
+        .select('id')
+        .eq('user_id', userData.user.id)
+        .eq('name', template.name)
+        .eq('role', template.role)
+        .limit(1)
+        .maybeSingle();
+
+      if (lookupError) throw lookupError;
+      if (existingAgent) {
+        setMessage(`${template.name} is already in your agent fleet.`);
+        return;
+      }
+
+      const { error: insertError } = await supabase.from('agents').insert({
         user_id: userData.user.id,
         name: template.name,
         role: template.role,
@@ -44,23 +87,23 @@ const Marketplace: React.FC = () => {
         system_prompt: template.system_prompt
       });
 
-      if (error) throw error;
-      alert(`${template.name} has been added to your agent fleet!`);
-    } catch (e) {
-      const message =
-        e instanceof Error
-          ? e.message
-          : typeof e === 'object' && e !== null && 'message' in e
-            ? String((e as { message?: unknown }).message)
-            : 'Unknown error';
-      alert(`Failed to deploy agent: ${message}`);
+      if (insertError) throw insertError;
+      setMessage(`${template.name} has been added to your agent fleet.`);
+    } catch (e: any) {
+      setError(`Failed to deploy agent: ${e.message || 'Unknown error'}`);
+    } finally {
+      setDeployingId(null);
     }
   };
 
-  const filteredTemplates = templates.filter(t => 
-    t.name.toLowerCase().includes(search.toLowerCase()) || 
-    t.category.toLowerCase().includes(search.toLowerCase())
-  );
+  const filteredTemplates = templates.filter(t => {
+    const matchesSearch = t.name.toLowerCase().includes(search.toLowerCase()) || 
+                         t.category.toLowerCase().includes(search.toLowerCase());
+    
+    if (activeFilter === 'public') return matchesSearch && t.is_public;
+    if (activeFilter === 'team') return matchesSearch && t.team_id !== null;
+    return matchesSearch;
+  });
 
   return (
     <div className="animate-fade-in marketplace-page">
@@ -69,39 +112,84 @@ const Marketplace: React.FC = () => {
           <h2>Agent Marketplace</h2>
           <p style={{ color: 'var(--text-dim)' }}>Deploy pre-configured expert agents to your projects.</p>
         </div>
-        <div className="marketplace-search">
-          <Search size={18} style={{ position: 'absolute', left: '12px', top: '50%', transform: 'translateY(-50%)', color: 'var(--text-muted)' }} />
-          <input 
-            type="text" 
-            placeholder="Search experts..." 
-            value={search}
-            onChange={(e) => setSearch(e.target.value)}
-            style={{ 
-              width: '100%', padding: '0.8rem 1rem 0.8rem 2.5rem', 
-              background: 'rgba(255,255,255,0.05)', border: '1px solid var(--glass-border)', 
-              borderRadius: 'var(--radius-md)', color: 'white', outline: 'none'
-            }}
-          />
+        <div className="marketplace-search-container" style={{ display: 'flex', gap: 'var(--space-md)', flex: 1, justifyContent: 'flex-end' }}>
+          <div className="marketplace-search" style={{ position: 'relative', width: '300px' }}>
+            <Search size={18} style={{ position: 'absolute', left: '12px', top: '50%', transform: 'translateY(-50%)', color: 'var(--text-dim)' }} />
+            <input 
+              type="text" 
+              placeholder="Search experts..." 
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+              style={{ 
+                width: '100%', padding: '0.8rem 1rem 0.8rem 2.5rem', 
+                background: 'rgba(255,255,255,0.05)', border: '1px solid var(--glass-border)', 
+                borderRadius: 'var(--radius-md)', color: 'white', outline: 'none'
+              }}
+            />
+          </div>
         </div>
       </div>
 
+      <div className="filter-tabs" style={{ display: 'flex', gap: 'var(--space-sm)', marginBottom: 'var(--space-lg)' }}>
+        <button 
+          className={`btn ${activeFilter === 'all' ? 'btn-primary' : 'btn-glass'}`}
+          onClick={() => setActiveFilter('all')}
+        >
+          All Assets
+        </button>
+        <button 
+          className={`btn ${activeFilter === 'public' ? 'btn-primary' : 'btn-glass'}`}
+          onClick={() => setActiveFilter('public')}
+        >
+          Public
+        </button>
+        <button 
+          className={`btn ${activeFilter === 'team' ? 'btn-primary' : 'btn-glass'}`}
+          onClick={() => setActiveFilter('team')}
+        >
+          Team Assets
+        </button>
+      </div>
+
+      {error && <div className="inline-status modal-error">{error}</div>}
+      {message && <div className="inline-status"><span>{message}</span></div>}
+      {loading && <div className="inline-status">Loading marketplace templates...</div>}
+      {!loading && filteredTemplates.length === 0 && (
+        <div className="glass-panel empty-state">
+          <h3>No templates found</h3>
+          <p>{search ? 'Try a different search term.' : 'Apply database/marketplace.sql in Supabase to seed marketplace templates.'}</p>
+        </div>
+      )}
+
       <div className="marketplace-grid">
         {filteredTemplates.map((template, i) => (
           <motion.div 
             key={template.id}
             initial={{ opacity: 0, y: 20 }}
             animate={{ opacity: 1, y: 0 }}
-            transition={{ delay: i * 0.1 }}
+            transition={{ delay: i * 0.05 }}
             className="glass-panel hover-lift"
             style={{ padding: 'var(--space-lg)', display: 'flex', flexDirection: 'column' }}
           >
-            <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 'var(--space-md)' }}>
-              <span style={{ 
-                padding: '0.25rem 0.75rem', background: 'rgba(255,255,255,0.1)', 
-                borderRadius: 'var(--radius-full)', fontSize: '0.75rem', fontWeight: 600, color: 'var(--accent)'
-              }}>
-                {template.category}
-              </span>
+            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 'var(--space-md)' }}>
+              <div style={{ display: 'flex', gap: 'var(--space-xs)' }}>
+                <span style={{ 
+                  padding: '0.25rem 0.75rem', background: 'rgba(255,255,255,0.1)', 
+                  borderRadius: 'var(--radius-full)', fontSize: '0.75rem', fontWeight: 600, color: 'var(--accent)'
+                }}>
+                  {template.category}
+                </span>
+                {template.team_id && (
+                  <span style={{ 
+                    padding: '0.25rem 0.75rem', background: 'var(--primary)', 
+                    borderRadius: 'var(--radius-full)', fontSize: '0.75rem', fontWeight: 600, color: 'white',
+                    display: 'flex', alignItems: 'center', gap: '4px'
+                  }}>
+                    <Users size={12} />
+                    {template.teams?.name || 'Team'}
+                  </span>
+                )}
+              </div>
               {template.is_featured && <Star size={16} fill="var(--accent)" color="var(--accent)" />}
             </div>
 
@@ -110,11 +198,16 @@ const Marketplace: React.FC = () => {
               {template.description}
             </p>
 
-            <div className="marketplace-card-footer">
+            <div className="marketplace-card-footer" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 'auto' }}>
               <span style={{ fontSize: '0.8rem', color: 'var(--text-muted)' }}>{template.model}</span>
-              <button className="btn btn-glass" style={{ padding: '0.5rem 1rem' }} onClick={() => handleDeploy(template)}>
+              <button
+                className="btn btn-glass"
+                style={{ padding: '0.5rem 1rem' }}
+                onClick={() => handleDeploy(template)}
+                disabled={deployingId === template.id}
+              >
                 <Download size={16} />
-                Deploy
+                {deployingId === template.id ? 'Deploying...' : 'Deploy'}
               </button>
             </div>
           </motion.div>