Phase 8: Enterprise Multi-Tenancy (Teams, Audit Logs, Team-Aware Projects)

frontend/src/App.tsx

@@ -11,7 +11,9 @@ import {
   ShoppingBag,
   Volume2,
   Box,
-  Activity
+  Activity,
+  Users,
+  ShieldCheck
 } from 'lucide-react';
 import { motion, AnimatePresence } from 'framer-motion';
 import { useAuth } from './context/useAuth';
@@ -28,12 +30,14 @@ import ProjectDetail from './components/ProjectDetail';
 import AgentsView from './components/AgentsView';
 import AgentConsole from './components/AgentConsole';
 import SplashScreen from './components/SplashScreen';
+import TeamsView from './components/TeamsView';
+import AuditView from './components/AuditView';
 import { useEffect } from 'react';
 import { getUiMode, saveUiMode } from './services/uiMode';
 import type { UiMode } from './services/uiMode';
 import { getAppVersion } from './services/runtimeConfig';
 
-type AppTab = 'dashboard' | 'project-detail' | 'agents' | 'marketplace' | 'debate' | 'voice' | 'spatial' | 'monitoring' | 'new-project' | 'settings';
+type AppTab = 'dashboard' | 'project-detail' | 'agents' | 'marketplace' | 'debate' | 'voice' | 'spatial' | 'monitoring' | 'teams' | 'audit' | 'new-project' | 'settings';
 
 const App: React.FC = () => {
   const { session, loading, signOut, profile, user } = useAuth();
@@ -92,16 +96,22 @@ const App: React.FC = () => {
             exit={{ x: -280 }}
             className="glass-panel app-sidebar"
             style={{ 
-              width: '280px', 
-              margin: 'var(--space-md)', 
               display: 'flex', 
-              flexDirection: 'column',
-              zIndex: 100
+              flexDirection: 'column'
             }}
           >
             <div className="sidebar-brand">
-              <Bot size={32} color="var(--accent)" />
-              <h1 style={{ fontSize: '1.5rem', margin: 0 }}>Aubm</h1>
+              <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-sm)' }}>
+                <Bot size={32} color="var(--accent)" />
+                <h1 style={{ fontSize: '1.5rem', margin: 0 }}>Aubm</h1>
+              </div>
+              <button 
+                className="mobile-only sidebar-close" 
+                onClick={() => setIsSidebarOpen(false)}
+                style={{ color: 'var(--text-dim)', padding: '4px' }}
+              >
+                <X size={24} />
+              </button>
             </div>
 
             <nav className="sidebar-nav">
@@ -155,6 +165,18 @@ const App: React.FC = () => {
                     active={activeTab === 'monitoring'}
                     onClick={() => navigateTo('monitoring')}
                   />
+                  <SidebarItem
+                    icon={<Users size={20} />}
+                    label="Teams"
+                    active={activeTab === 'teams'}
+                    onClick={() => navigateTo('teams')}
+                  />
+                  <SidebarItem
+                    icon={<ShieldCheck size={20} />}
+                    label="Audit Logs"
+                    active={activeTab === 'audit'}
+                    onClick={() => navigateTo('audit')}
+                  />
                 </>
               )}
               <SidebarItem 
@@ -237,6 +259,8 @@ const App: React.FC = () => {
             />
           )}
           {activeTab === 'monitoring' && uiMode === 'expert' && <MonitoringView />}
+          {activeTab === 'teams' && uiMode === 'expert' && <TeamsView />}
+          {activeTab === 'audit' && uiMode === 'expert' && <AuditView />}
           {activeTab === 'new-project' && <NewProject uiMode={uiMode} onCreated={() => navigateTo('dashboard')} />}
           {activeTab === 'settings' && <SettingsView uiMode={uiMode} onUiModeChange={updateUiMode} />}
         </section>

frontend/src/components/AuditView.tsx

@@ -0,0 +1,289 @@
+import React, { useState, useEffect } from 'react';
+import { 
+  ShieldCheck, 
+  Search, 
+  Filter, 
+  Download, 
+  Calendar,
+  User,
+  Bot,
+  FileText,
+  ChevronDown,
+  ChevronUp,
+  RefreshCw,
+  ExternalLink
+} from 'lucide-react';
+import { supabase } from '../services/supabase';
+
+interface AuditLog {
+  id: string;
+  created_at: string;
+  user_id: string | null;
+  action: string;
+  agent_id: string | null;
+  task_id: string | null;
+  metadata: any;
+  profiles?: {
+    full_name: string | null;
+    email: string | null;
+  };
+  agents?: {
+    name: string | null;
+  };
+  tasks?: {
+    title: string | null;
+  };
+}
+
+const AuditView: React.FC = () => {
+  const [logs, setLogs] = useState<AuditLog[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [searchTerm, setSearchTerm] = useState('');
+  const [expandedLog, setExpandedLog] = useState<string | null>(null);
+  const [page, setPage] = useState(0);
+  const pageSize = 50;
+
+  useEffect(() => {
+    fetchLogs();
+  }, [page]);
+
+  const fetchLogs = async () => {
+    setLoading(true);
+    try {
+      const { data, error: fetchError } = await supabase
+        .from('audit_logs')
+        .select(`
+          *,
+          profiles:user_id(full_name, email),
+          agents:agent_id(name),
+          tasks:task_id(title)
+        `)
+        .order('created_at', { ascending: false })
+        .range(page * pageSize, (page + 1) * pageSize - 1);
+
+      if (fetchError) throw fetchError;
+      setLogs(data || []);
+    } catch (err: any) {
+      setError(err.message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const exportCSV = () => {
+    const headers = ['Timestamp', 'Action', 'User', 'Agent', 'Task', 'Metadata'];
+    const rows = logs.map(log => [
+      log.created_at,
+      log.action,
+      log.profiles?.email || 'System',
+      log.agents?.name || 'N/A',
+      log.tasks?.title || 'N/A',
+      JSON.stringify(log.metadata)
+    ]);
+    
+    const csvContent = [headers, ...rows].map(e => e.join(',')).join('\n');
+    const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement('a');
+    link.setAttribute('href', url);
+    link.setAttribute('download', `aubm_audit_logs_${new Date().toISOString()}.csv`);
+    link.click();
+  };
+
+  const filteredLogs = logs.filter(log => 
+    log.action.toLowerCase().includes(searchTerm.toLowerCase()) ||
+    (log.profiles?.email || '').toLowerCase().includes(searchTerm.toLowerCase()) ||
+    (log.agents?.name || '').toLowerCase().includes(searchTerm.toLowerCase())
+  );
+
+  const formatTimestamp = (ts: string) => {
+    return new Date(ts).toLocaleString();
+  };
+
+  const getActionBadgeColor = (action: string) => {
+    if (action.includes('error') || action.includes('failed')) return 'var(--danger)';
+    if (action.includes('created') || action.includes('added')) return 'var(--success)';
+    if (action.includes('approved')) return 'var(--accent)';
+    return 'var(--text-dim)';
+  };
+
+  return (
+    <div className="audit-view">
+      <header className="view-header">
+        <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-md)' }}>
+          <ShieldCheck size={32} color="var(--accent)" />
+          <div>
+            <h2 style={{ margin: 0 }}>Audit Explorer</h2>
+            <p style={{ color: 'var(--text-dim)', margin: 0 }}>Track system actions and governance events</p>
+          </div>
+        </div>
+        <div style={{ display: 'flex', gap: 'var(--space-sm)' }}>
+          <button className="btn btn-glass" onClick={() => fetchLogs()} disabled={loading}>
+            <RefreshCw size={18} className={loading ? 'animate-spin' : ''} />
+            Refresh
+          </button>
+          <button className="btn btn-glass" onClick={exportCSV}>
+            <Download size={18} />
+            Export CSV
+          </button>
+        </div>
+      </header>
+
+      <div className="glass-panel" style={{ marginTop: 'var(--space-lg)', padding: 'var(--space-md)' }}>
+        <div style={{ display: 'flex', gap: 'var(--space-md)', marginBottom: 'var(--space-md)' }}>
+          <div className="search-bar" style={{ flex: 1, position: 'relative' }}>
+            <Search size={18} style={{ position: 'absolute', left: '12px', top: '50%', transform: 'translateY(-50%)', color: 'var(--text-dim)' }} />
+            <input 
+              type="text" 
+              className="glass-input" 
+              placeholder="Search actions, users, or agents..." 
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+              style={{ width: '100%', paddingLeft: '40px' }}
+            />
+          </div>
+          <button className="btn btn-glass">
+            <Filter size={18} />
+            Filters
+          </button>
+        </div>
+
+        <div className="audit-table-container" style={{ overflowX: 'auto' }}>
+          <table className="audit-table" style={{ width: '100%', borderCollapse: 'collapse' }}>
+            <thead>
+              <tr style={{ borderBottom: '1px solid rgba(255,255,255,0.1)', textAlign: 'left' }}>
+                <th style={{ padding: 'var(--space-md)', color: 'var(--text-dim)', fontSize: '0.85rem' }}>Timestamp</th>
+                <th style={{ padding: 'var(--space-md)', color: 'var(--text-dim)', fontSize: '0.85rem' }}>Action</th>
+                <th style={{ padding: 'var(--space-md)', color: 'var(--text-dim)', fontSize: '0.85rem' }}>Actor</th>
+                <th style={{ padding: 'var(--space-md)', color: 'var(--text-dim)', fontSize: '0.85rem' }}>Context</th>
+                <th style={{ padding: 'var(--space-md)', color: 'var(--text-dim)', fontSize: '0.85rem' }}></th>
+              </tr>
+            </thead>
+            <tbody>
+              {filteredLogs.map(log => (
+                <React.Fragment key={log.id}>
+                  <tr 
+                    style={{ 
+                      borderBottom: '1px solid rgba(255,255,255,0.05)',
+                      cursor: 'pointer',
+                      background: expandedLog === log.id ? 'rgba(255,255,255,0.05)' : 'transparent'
+                    }}
+                    onClick={() => setExpandedLog(expandedLog === log.id ? null : log.id)}
+                  >
+                    <td style={{ padding: 'var(--space-md)', whiteSpace: 'nowrap', fontSize: '0.9rem' }}>
+                      <Calendar size={14} style={{ marginRight: '8px', opacity: 0.5 }} />
+                      {formatTimestamp(log.created_at)}
+                    </td>
+                    <td style={{ padding: 'var(--space-md)' }}>
+                      <span style={{ 
+                        padding: '2px 8px', 
+                        borderRadius: '12px', 
+                        fontSize: '0.75rem', 
+                        fontWeight: 600,
+                        background: 'rgba(255,255,255,0.1)',
+                        color: getActionBadgeColor(log.action),
+                        textTransform: 'uppercase'
+                      }}>
+                        {log.action.replace(/_/g, ' ')}
+                      </span>
+                    </td>
+                    <td style={{ padding: 'var(--space-md)', fontSize: '0.9rem' }}>
+                      <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+                        <User size={14} style={{ opacity: 0.5 }} />
+                        {log.profiles?.email || <span style={{ color: 'var(--text-dim)', fontSize: '0.8rem' }}>System</span>}
+                      </div>
+                    </td>
+                    <td style={{ padding: 'var(--space-md)', fontSize: '0.9rem' }}>
+                      <div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
+                        {log.agents && (
+                          <div style={{ display: 'flex', alignItems: 'center', gap: '4px', color: 'var(--accent)', fontSize: '0.8rem' }}>
+                            <Bot size={12} />
+                            {log.agents.name}
+                          </div>
+                        )}
+                        {log.tasks && (
+                          <div style={{ display: 'flex', alignItems: 'center', gap: '4px', color: 'var(--text-dim)', fontSize: '0.8rem' }}>
+                            <FileText size={12} />
+                            {log.tasks.title}
+                          </div>
+                        )}
+                        {!log.agents && !log.tasks && <span style={{ color: 'var(--text-dim)', fontSize: '0.8rem' }}>-</span>}
+                      </div>
+                    </td>
+                    <td style={{ padding: 'var(--space-md)', textAlign: 'right' }}>
+                      {expandedLog === log.id ? <ChevronUp size={16} /> : <ChevronDown size={16} />}
+                    </td>
+                  </tr>
+                  {expandedLog === log.id && (
+                    <tr>
+                      <td colSpan={5} style={{ padding: 'var(--space-md)', background: 'rgba(0,0,0,0.3)' }}>
+                        <div style={{ display: 'flex', gap: 'var(--space-lg)' }}>
+                          <div style={{ flex: 1 }}>
+                            <h5 style={{ margin: '0 0 8px 0', color: 'var(--text-dim)' }}>Metadata</h5>
+                            <pre style={{ 
+                              background: 'rgba(0,0,0,0.2)', 
+                              padding: 'var(--space-md)', 
+                              borderRadius: '8px',
+                              fontSize: '0.8rem',
+                              maxHeight: '200px',
+                              overflowY: 'auto'
+                            }}>
+                              {JSON.stringify(log.metadata, null, 2)}
+                            </pre>
+                          </div>
+                          <div style={{ width: '200px' }}>
+                            <h5 style={{ margin: '0 0 8px 0', color: 'var(--text-dim)' }}>Quick Links</h5>
+                            <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+                              {log.task_id && (
+                                <button className="btn btn-glass btn-sm" style={{ width: '100%', justifyContent: 'flex-start' }}>
+                                  <ExternalLink size={14} />
+                                  View Task
+                                </button>
+                              )}
+                              {log.metadata?.project_id && (
+                                <button className="btn btn-glass btn-sm" style={{ width: '100%', justifyContent: 'flex-start' }}>
+                                  <ExternalLink size={14} />
+                                  View Project
+                                </button>
+                              )}
+                            </div>
+                          </div>
+                        </div>
+                      </td>
+                    </tr>
+                  )}
+                </React.Fragment>
+              ))}
+            </tbody>
+          </table>
+        </div>
+
+        <div className="pagination" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 'var(--space-lg)', padding: '0 var(--space-md)' }}>
+          <div style={{ fontSize: '0.9rem', color: 'var(--text-dim)' }}>
+            Showing {filteredLogs.length} logs on this page
+          </div>
+          <div style={{ display: 'flex', gap: 'var(--space-sm)' }}>
+            <button 
+              className="btn btn-glass btn-sm" 
+              onClick={() => setPage(p => Math.max(0, p - 1))}
+              disabled={page === 0 || loading}
+            >
+              Previous
+            </button>
+            <span style={{ display: 'flex', alignItems: 'center', padding: '0 var(--space-md)', fontWeight: 600 }}>{page + 1}</span>
+            <button 
+              className="btn btn-glass btn-sm" 
+              onClick={() => setPage(p => p + 1)}
+              disabled={logs.length < pageSize || loading}
+            >
+              Next
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default AuditView;

frontend/src/components/NewProject.tsx

@@ -1,5 +1,5 @@
 import React, { useRef, useState } from 'react';
-import { CheckCircle2, FileText, Link2, Paperclip, PlusCircle, StickyNote, Trash2 } from 'lucide-react';
+import { ArrowLeft, ArrowRight, CheckCircle2, FileText, Link2, Paperclip, PlusCircle, StickyNote, Trash2 } from 'lucide-react';
 import { motion } from 'framer-motion';
 import { supabase } from '../services/supabase';
 import { useAuth } from '../context/useAuth';
@@ -80,6 +80,37 @@ const buildContextPayload = (baseContext: string, sources: ProjectSource[]) => {
   return sections.join('\n\n').trim();
 };
 
+const FieldHelp: React.FC<{ title: string; children: React.ReactNode }> = ({ title, children }) => (
+  <aside className="field-help">
+    <strong>{title}</strong>
+    <p>{children}</p>
+  </aside>
+);
+
+const wizardSteps = [
+  {
+    title: 'Basics',
+    description: 'Name the workspace and describe the business outcome. Agents use this to understand what success looks like.'
+  },
+  {
+    title: 'Context',
+    description: 'Add constraints, acceptance criteria, tone, risks, and assumptions. Good context reduces generic task plans.'
+  },
+  {
+    title: 'Sources',
+    description: 'Attach links, notes, or files that should influence planning. This step is optional when the description is enough.'
+  },
+  {
+    title: 'Review',
+    description: 'Check the setup before creating the project. You will generate tasks from the project page after creation.'
+  }
+];
+
+const expertAccessStep = {
+  title: 'Workspace',
+  description: 'Decide whether this project is personal or belongs to a team workspace.'
+};
+
 const NewProject: React.FC<{ uiMode: UiMode; onCreated?: () => void }> = ({ uiMode, onCreated }) => {
   const { user } = useAuth();
   const fileInputRef = useRef<HTMLInputElement | null>(null);
@@ -92,9 +123,37 @@ const NewProject: React.FC<{ uiMode: UiMode; onCreated?: () => void }> = ({ uiMo
   const [noteContent, setNoteContent] = useState('');
   const [sources, setSources] = useState<ProjectSource[]>([]);
   const [isPublic, setIsPublic] = useState(false);
+  const [teams, setTeams] = useState<{ id: string; name: string }[]>([]);
+  const [selectedTeamId, setSelectedTeamId] = useState<string | null>(null);
   const [showAdvancedSources, setShowAdvancedSources] = useState(uiMode === 'expert');
+  const [wizardStep, setWizardStep] = useState(0);
   const [saving, setSaving] = useState(false);
   const [message, setMessage] = useState<string | null>(null);
+  
+  React.useEffect(() => {
+    if (uiMode === 'expert') {
+      fetchTeams();
+    }
+  }, [uiMode]);
+
+  const fetchTeams = async () => {
+    try {
+      const { data, error } = await supabase.from('teams').select('id, name');
+      if (error) throw error;
+      setTeams(data || []);
+    } catch (err) {
+      console.error('Failed to fetch teams:', err);
+    }
+  };
+  const isWizard = true;
+  const projectWizardSteps = uiMode === 'expert'
+    ? [wizardSteps[0], wizardSteps[1], wizardSteps[2], expertAccessStep, wizardSteps[3]]
+    : wizardSteps;
+  const reviewStepIndex = projectWizardSteps.length - 1;
+  const accessStepIndex = uiMode === 'expert' ? 3 : -1;
+  const currentWizardStep = projectWizardSteps[wizardStep] ?? projectWizardSteps[0];
+  const isFirstWizardStep = wizardStep === 0;
+  const isLastWizardStep = wizardStep === reviewStepIndex;
 
   const appendSource = (source: ProjectSource) => {
     setSources((current) => [...current, source]);
@@ -191,6 +250,7 @@ const NewProject: React.FC<{ uiMode: UiMode; onCreated?: () => void }> = ({ uiMo
       description,
       context: contextPayload,
       owner_id: user.id,
+      team_id: selectedTeamId,
       is_public: isPublic,
       status: 'active'
     });
@@ -207,6 +267,7 @@ const NewProject: React.FC<{ uiMode: UiMode; onCreated?: () => void }> = ({ uiMo
       setNoteContent('');
       setSources([]);
       setIsPublic(false);
+      setWizardStep(0);
       setMessage('Project created successfully.');
       window.setTimeout(() => onCreated?.(), 500);
     }
@@ -229,96 +290,137 @@ const NewProject: React.FC<{ uiMode: UiMode; onCreated?: () => void }> = ({ uiMo
       </div>
 
       <form className="glass-panel project-form" onSubmit={handleSubmit}>
-        {uiMode === 'guided' && (
-          <div className="default-agent-panel">
-            <strong>Guided flow</strong>
-            <p style={{ color: 'var(--text-dim)' }}>
-              1. Name the project. 2. Describe the outcome. 3. Add context and sources. 4. Create the workspace and generate the plan from the project page.
-            </p>
+        {isWizard && (
+          <div className="wizard-panel">
+            <div className="wizard-steps" aria-label="Create project steps">
+              {projectWizardSteps.map((step, index) => (
+                <button
+                  key={step.title}
+                  className={`wizard-step ${wizardStep === index ? 'active' : ''} ${wizardStep > index ? 'complete' : ''}`}
+                  type="button"
+                  onClick={() => setWizardStep(index)}
+                >
+                  <span>{index + 1}</span>
+                  {step.title}
+                </button>
+              ))}
+            </div>
+            <div className="wizard-explanation">
+              <strong>{currentWizardStep.title}</strong>
+              <p>{currentWizardStep.description}</p>
+            </div>
           </div>
         )}
 
-        <label>
-          <span>Project Name</span>
-          <input value={name} onChange={(event) => setName(event.target.value)} required placeholder="Customer onboarding automation" />
-        </label>
+        {(!isWizard || wizardStep === 0) && (
+        <>
+        <div className="field-with-help">
+          <label>
+            <span>Project Name</span>
+            <input value={name} onChange={(event) => setName(event.target.value)} required placeholder="Customer onboarding automation" />
+          </label>
+          <FieldHelp title="What this controls">
+            This becomes the workspace title shown on the dashboard, task pages, reports, and spatial view. Use a short outcome-oriented name.
+          </FieldHelp>
+        </div>
 
-        <label>
-          <span>Description</span>
-          <textarea value={description} onChange={(event) => setDescription(event.target.value)} placeholder="What should this project accomplish?" rows={4} />
-        </label>
+        <div className="field-with-help">
+          <label>
+            <span>Description</span>
+            <textarea value={description} onChange={(event) => setDescription(event.target.value)} placeholder="What should this project accomplish?" rows={4} />
+          </label>
+          <FieldHelp title="How agents use it">
+            The planner reads this as the main objective when decomposing work. Include the desired result, audience, and success criteria.
+          </FieldHelp>
+        </div>
+        </>
+        )}
 
-        <label>
-          <span>Context</span>
-          <textarea value={context} onChange={(event) => setContext(event.target.value)} placeholder="Business constraints, preferred tone, source links, acceptance criteria..." rows={6} />
-        </label>
+        {(!isWizard || wizardStep === 1) && (
+        <div className="field-with-help">
+          <label>
+            <span>Context</span>
+            <textarea value={context} onChange={(event) => setContext(event.target.value)} placeholder="Business constraints, preferred tone, source links, acceptance criteria..." rows={6} />
+          </label>
+          <FieldHelp title="When to add context">
+            Add constraints, assumptions, tone, links, examples, acceptance criteria, and known risks. This reduces generic agent output.
+          </FieldHelp>
+        </div>
+        )}
 
-        <div className="default-agent-panel" style={{ gap: 'var(--space-lg)' }}>
+        {(!isWizard || wizardStep === 2) && (
+        <div className="default-agent-panel project-sources-panel" style={{ gap: 'var(--space-lg)' }}>
           <div className="settings-section-title">
             <Paperclip size={20} color="var(--accent)" />
             <h3>Project Sources</h3>
           </div>
+          <div className="field-with-help field-with-help-compact">
+            <div>
+              {uiMode === 'guided' && !showAdvancedSources && (
+                <>
+                  <p style={{ color: 'var(--text-dim)', fontSize: '0.9rem' }}>
+                    Add the links, notes, or files that should shape the plan. Skip this if the description already contains enough context.
+                  </p>
+                  <button className="btn btn-glass" type="button" onClick={() => setShowAdvancedSources(true)}>
+                    <Paperclip size={16} />
+                    Add Sources
+                  </button>
+                </>
+              )}
+
+              {(uiMode === 'expert' || showAdvancedSources) && (
+                <>
+                  <div className="responsive-two-col">
+                    <label>
+                      <span>Link Label</span>
+                      <input value={sourceLabel} onChange={(event) => setSourceLabel(event.target.value)} placeholder="Market report" />
+                    </label>
+                    <label>
+                      <span>Link URL</span>
+                      <input value={sourceUrl} onChange={(event) => setSourceUrl(event.target.value)} placeholder="https://..." />
+                    </label>
+                  </div>
+                  <button className="btn btn-glass" type="button" onClick={handleAddLink}>
+                    <Link2 size={16} />
+                    Add Link
+                  </button>
 
-          {uiMode === 'guided' && !showAdvancedSources && (
-            <>
-              <p style={{ color: 'var(--text-dim)', fontSize: '0.9rem' }}>
-                Add the links, notes, or files that should shape the plan. Skip this if the description already contains enough context.
-              </p>
-              <button className="btn btn-glass" type="button" onClick={() => setShowAdvancedSources(true)}>
-                <Paperclip size={16} />
-                Add Sources
-              </button>
-            </>
-          )}
+                  <label>
+                    <span>Quick Note</span>
+                    <input value={noteLabel} onChange={(event) => setNoteLabel(event.target.value)} placeholder="Stakeholder note" />
+                  </label>
+                  <label>
+                    <span>Note Content</span>
+                    <textarea value={noteContent} onChange={(event) => setNoteContent(event.target.value)} rows={3} placeholder="Paste text, markdown, requirements, or snippets..." />
+                  </label>
+                  <button className="btn btn-glass" type="button" onClick={handleAddNote}>
+                    <StickyNote size={16} />
+                    Add Text
+                  </button>
 
-          {(uiMode === 'expert' || showAdvancedSources) && (
-            <>
-          <div className="responsive-two-col">
-            <label>
-              <span>Link Label</span>
-              <input value={sourceLabel} onChange={(event) => setSourceLabel(event.target.value)} placeholder="Market report" />
-            </label>
-            <label>
-              <span>Link URL</span>
-              <input value={sourceUrl} onChange={(event) => setSourceUrl(event.target.value)} placeholder="https://..." />
-            </label>
-          </div>
-          <button className="btn btn-glass" type="button" onClick={handleAddLink}>
-            <Link2 size={16} />
-            Add Link
-          </button>
+                  <input
+                    ref={fileInputRef}
+                    type="file"
+                    multiple
+                    accept=".pdf,.md,.txt,.doc,.docx,.xls,.xlsx,.csv,.json,.rtf"
+                    onChange={handleFileSelection}
+                    style={{ display: 'none' }}
+                  />
+                  <button className="btn btn-glass" type="button" onClick={() => fileInputRef.current?.click()}>
+                    <Paperclip size={16} />
+                    Add Files
+                  </button>
 
-          <label>
-            <span>Quick Note</span>
-            <input value={noteLabel} onChange={(event) => setNoteLabel(event.target.value)} placeholder="Stakeholder note" />
-          </label>
-          <label>
-            <span>Note Content</span>
-            <textarea value={noteContent} onChange={(event) => setNoteContent(event.target.value)} rows={3} placeholder="Paste text, markdown, requirements, or snippets..." />
-          </label>
-          <button className="btn btn-glass" type="button" onClick={handleAddNote}>
-            <StickyNote size={16} />
-            Add Text
-          </button>
-
-          <input
-            ref={fileInputRef}
-            type="file"
-            multiple
-            accept=".pdf,.md,.txt,.doc,.docx,.xls,.xlsx,.csv,.json,.rtf"
-            onChange={handleFileSelection}
-            style={{ display: 'none' }}
-          />
-          <button className="btn btn-glass" type="button" onClick={() => fileInputRef.current?.click()}>
-            <Paperclip size={16} />
-            Add Files
-          </button>
-
-          <p style={{ color: 'var(--text-dim)', fontSize: '0.85rem', marginTop: '-0.25rem' }}>
-            Text and markdown files are embedded into project context. PDF, Word, and Excel files are stored as named references in the context.
-          </p>
-            </>
-          )}
+                  <p style={{ color: 'var(--text-dim)', fontSize: '0.85rem', marginTop: '-0.25rem' }}>
+                    Text and markdown files are embedded into project context. PDF, Word, and Excel files are stored as named references in the context.
+                  </p>
+                </>
+              )}
+            </div>
+            <FieldHelp title="What sources do">
+              Sources are appended to the project context before agents plan work. Use links for references, notes for stakeholder input, and files for specs or datasets.
+            </FieldHelp>
+          </div>
 
           {sources.length > 0 && (
             <div className="task-list">
@@ -329,7 +431,7 @@ const NewProject: React.FC<{ uiMode: UiMode; onCreated?: () => void }> = ({ uiMo
                     <p>
                       {source.kind === 'link' && source.url}
                       {source.kind === 'note' && source.content}
-                      {source.kind === 'file' && `${source.fileName} · ${formatFileSize(source.size)}${source.extracted ? ' · text imported' : ' · reference only'}`}
+                      {source.kind === 'file' && `${source.fileName} - ${formatFileSize(source.size)}${source.extracted ? ' - text imported' : ' - reference only'}`}
                     </p>
                   </div>
                   <button className="btn btn-glass btn-sm" type="button" onClick={() => removeSource(source.id)}>
@@ -341,12 +443,68 @@ const NewProject: React.FC<{ uiMode: UiMode; onCreated?: () => void }> = ({ uiMo
             </div>
           )}
         </div>
+        )}
 
-        {uiMode === 'expert' && (
-          <label className="toggle-row">
-            <input type="checkbox" checked={isPublic} onChange={(event) => setIsPublic(event.target.checked)} />
-            <span>Make project visible to authenticated users</span>
-          </label>
+        {uiMode === 'expert' && (!isWizard || wizardStep === accessStepIndex) && (
+          <div className="expert-access-fields" style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-lg)' }}>
+            <div className="field-with-help">
+              <label>
+                <span>Team Workspace (Optional)</span>
+                <select 
+                  className="glass-input" 
+                  value={selectedTeamId || ''} 
+                  onChange={(e) => setSelectedTeamId(e.target.value || null)}
+                >
+                  <option value="">Personal Project (No Team)</option>
+                  {teams.map(team => (
+                    <option key={team.id} value={team.id}>{team.name}</option>
+                  ))}
+                </select>
+              </label>
+              <FieldHelp title="Shared Context">
+                Projects assigned to a team are visible to all team members according to their roles (admin, editor, viewer).
+              </FieldHelp>
+            </div>
+
+            <div className="field-with-help">
+              <label className="toggle-row">
+                <input type="checkbox" checked={isPublic} onChange={(event) => setIsPublic(event.target.checked)} />
+                <span>Make project visible to all authenticated users (Public)</span>
+              </label>
+              <FieldHelp title="Global Visibility">
+                Public projects can be read by any authenticated user in the entire platform. Use this for open templates or public datasets.
+              </FieldHelp>
+            </div>
+          </div>
+        )}
+
+        {isWizard && wizardStep === reviewStepIndex && (
+          <div className="wizard-review">
+            <div>
+              <span>Project name</span>
+              <strong>{name.trim() || 'Missing project name'}</strong>
+            </div>
+            <div>
+              <span>Description</span>
+              <p>{description.trim() || 'No description provided.'}</p>
+            </div>
+            <div>
+              <span>Workspace</span>
+              <p>{selectedTeamId ? `Team: ${teams.find(t => t.id === selectedTeamId)?.name}` : 'Personal project'}</p>
+            </div>
+            <div>
+              <span>Visibility</span>
+              <p>{isPublic ? 'Public' : 'Private'}</p>
+            </div>
+            <div>
+              <span>Context</span>
+              <p>{context.trim() || 'No extra context provided.'}</p>
+            </div>
+            <div>
+              <span>Sources</span>
+              <p>{sources.length > 0 ? `${sources.length} source${sources.length === 1 ? '' : 's'} attached.` : 'No sources attached.'}</p>
+            </div>
+          </div>
         )}
 
         {message && (
@@ -356,10 +514,40 @@ const NewProject: React.FC<{ uiMode: UiMode; onCreated?: () => void }> = ({ uiMo
           </div>
         )}
 
-        <button className="btn btn-primary" type="submit" disabled={saving}>
-          <PlusCircle size={18} />
-          {saving ? 'Creating...' : 'Create Project'}
-        </button>
+        <div className="field-with-help field-with-help-action">
+          {isWizard ? (
+            <div className="wizard-actions">
+              <button className="btn btn-glass" type="button" onClick={() => setWizardStep((step) => Math.max(0, step - 1))} disabled={isFirstWizardStep || saving}>
+                <ArrowLeft size={18} />
+                Back
+              </button>
+              {!isLastWizardStep ? (
+                <button
+                  className="btn btn-primary"
+                  type="button"
+                  onClick={() => setWizardStep((step) => Math.min(projectWizardSteps.length - 1, step + 1))}
+                  disabled={wizardStep === 0 && !name.trim()}
+                >
+                  Next
+                  <ArrowRight size={18} />
+                </button>
+              ) : (
+                <button className="btn btn-primary" type="submit" disabled={saving || !name.trim()}>
+                  <PlusCircle size={18} />
+                  {saving ? 'Creating...' : 'Create Project'}
+                </button>
+              )}
+            </div>
+          ) : (
+            <button className="btn btn-primary" type="submit" disabled={saving}>
+              <PlusCircle size={18} />
+              {saving ? 'Creating...' : 'Create Project'}
+            </button>
+          )}
+          <FieldHelp title="Next step">
+            After creation, open the project and run the orchestrator to generate tasks. Review outputs before approving the final report.
+          </FieldHelp>
+        </div>
       </form>
     </motion.div>
   );

frontend/src/components/TeamsView.tsx

@@ -0,0 +1,417 @@
+import React, { useState, useEffect } from 'react';
+import { 
+  Users, 
+  UserPlus, 
+  Settings, 
+  Trash2, 
+  Shield, 
+  Mail, 
+  Plus,
+  ArrowRight,
+  ShieldAlert,
+  Search
+} from 'lucide-react';
+import { supabase } from '../services/supabase';
+import { useAuth } from '../context/useAuth';
+
+interface Team {
+  id: string;
+  name: string;
+  created_at: string;
+  role?: 'admin' | 'editor' | 'viewer';
+}
+
+interface TeamMember {
+  id: string;
+  user_id: string;
+  role: 'admin' | 'editor' | 'viewer';
+  created_at: string;
+  full_name?: string;
+  email?: string;
+}
+
+const TeamsView: React.FC = () => {
+  const { user, profile } = useAuth();
+  const [teams, setTeams] = useState<Team[]>([]);
+  const [selectedTeam, setSelectedTeam] = useState<Team | null>(null);
+  const [members, setMembers] = useState<TeamMember[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [showCreateModal, setShowCreateModal] = useState(false);
+  const [newTeamName, setNewTeamName] = useState('');
+  const [inviteEmail, setInviteEmail] = useState('');
+  const [inviteRole, setInviteRole] = useState<'admin' | 'editor' | 'viewer'>('viewer');
+  const [actionPending, setActionPending] = useState(false);
+
+  useEffect(() => {
+    fetchTeams();
+  }, []);
+
+  useEffect(() => {
+    if (selectedTeam) {
+      fetchMembers(selectedTeam.id);
+    }
+  }, [selectedTeam]);
+
+  const fetchTeams = async () => {
+    setLoading(true);
+    try {
+      // Fetch teams where user is a member
+      const { data, error } = await supabase
+        .from('teams')
+        .select(`
+          *,
+          team_members!inner(role)
+        `);
+
+      if (error) throw error;
+      
+      const formattedTeams = data.map(t => ({
+        ...t,
+        role: t.team_members[0].role
+      }));
+      
+      setTeams(formattedTeams);
+      if (formattedTeams.length > 0 && !selectedTeam) {
+        setSelectedTeam(formattedTeams[0]);
+      }
+    } catch (err: any) {
+      setError(err.message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const fetchMembers = async (teamId: string) => {
+    try {
+      const { data, error } = await supabase
+        .from('team_members')
+        .select(`
+          *,
+          profiles:user_id(full_name, email)
+        `)
+        .eq('team_id', teamId);
+
+      if (error) throw error;
+
+      const formattedMembers = data.map(m => ({
+        ...m,
+        full_name: m.profiles?.full_name,
+        email: m.profiles?.email
+      }));
+
+      setMembers(formattedMembers);
+    } catch (err: any) {
+      setError(err.message);
+    }
+  };
+
+  const createTeam = async () => {
+    if (!newTeamName.trim()) return;
+    setActionPending(true);
+    try {
+      const { data, error } = await supabase
+        .from('teams')
+        .insert([{ name: newTeamName, created_by: user?.id }])
+        .select()
+        .single();
+
+      if (error) throw error;
+
+      setNewTeamName('');
+      setShowCreateModal(false);
+      fetchTeams();
+    } catch (err: any) {
+      setError(err.message);
+    } finally {
+      setActionPending(false);
+    }
+  };
+
+  const inviteMember = async () => {
+    if (!selectedTeam || !inviteEmail.trim()) return;
+    setActionPending(true);
+    try {
+      // In a real app, we'd send an email or look up by email.
+      // For this demo, we'll assume we can look up by email in profiles.
+      const { data: userData, error: userError } = await supabase
+        .from('profiles')
+        .select('id')
+        .eq('email', inviteEmail.trim())
+        .single();
+
+      if (userError || !userData) {
+        throw new Error('User not found. Please ensure the user has signed up.');
+      }
+
+      const { error: inviteError } = await supabase
+        .from('team_members')
+        .insert([{
+          team_id: selectedTeam.id,
+          user_id: userData.id,
+          role: inviteRole
+        }]);
+
+      if (inviteError) throw inviteError;
+
+      setInviteEmail('');
+      fetchMembers(selectedTeam.id);
+    } catch (err: any) {
+      setError(err.message);
+    } finally {
+      setActionPending(false);
+    }
+  };
+
+  const removeMember = async (memberId: string) => {
+    if (!selectedTeam) return;
+    if (!window.confirm('Are you sure you want to remove this member?')) return;
+    
+    try {
+      const { error } = await supabase
+        .from('team_members')
+        .delete()
+        .eq('id', memberId);
+
+      if (error) throw error;
+      fetchMembers(selectedTeam.id);
+    } catch (err: any) {
+      setError(err.message);
+    }
+  };
+
+  const updateMemberRole = async (memberId: string, newRole: string) => {
+    try {
+      const { error } = await supabase
+        .from('team_members')
+        .update({ role: newRole })
+        .eq('id', memberId);
+
+      if (error) throw error;
+      if (selectedTeam) fetchMembers(selectedTeam.id);
+    } catch (err: any) {
+      setError(err.message);
+    }
+  };
+
+  return (
+    <div className="teams-view">
+      <header className="view-header">
+        <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-md)' }}>
+          <Users size={32} color="var(--accent)" />
+          <div>
+            <h2 style={{ margin: 0 }}>Team Management</h2>
+            <p style={{ color: 'var(--text-dim)', margin: 0 }}>Manage shared workspaces and permissions</p>
+          </div>
+        </div>
+        <button className="btn btn-primary" onClick={() => setShowCreateModal(true)}>
+          <Plus size={18} />
+          Create Team
+        </button>
+      </header>
+
+      {error && (
+        <div className="glass-panel alert alert-danger" style={{ marginBottom: 'var(--space-md)' }}>
+          <ShieldAlert size={20} />
+          <span>{error}</span>
+          <button onClick={() => setError(null)} style={{ marginLeft: 'auto', background: 'none', border: 'none', color: 'inherit', cursor: 'pointer' }}>×</button>
+        </div>
+      )}
+
+      <div className="teams-layout" style={{ display: 'grid', gridTemplateColumns: '280px 1fr', gap: 'var(--space-lg)', marginTop: 'var(--space-lg)' }}>
+        {/* Teams List */}
+        <div className="teams-list">
+          <h3 style={{ fontSize: '0.9rem', textTransform: 'uppercase', color: 'var(--text-dim)', marginBottom: 'var(--space-md)' }}>Your Teams</h3>
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-sm)' }}>
+            {teams.length === 0 && !loading && (
+              <div className="glass-panel" style={{ padding: 'var(--space-md)', textAlign: 'center', color: 'var(--text-dim)' }}>
+                No teams yet.
+              </div>
+            )}
+            {teams.map(team => (
+              <button 
+                key={team.id}
+                className={`glass-panel team-item ${selectedTeam?.id === team.id ? 'active' : ''}`}
+                onClick={() => setSelectedTeam(team)}
+                style={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'space-between',
+                  padding: 'var(--space-md)',
+                  width: '100%',
+                  textAlign: 'left',
+                  border: selectedTeam?.id === team.id ? '1px solid var(--accent)' : '1px solid transparent',
+                  background: selectedTeam?.id === team.id ? 'rgba(var(--accent-rgb), 0.1)' : 'var(--glass-bg)'
+                }}
+              >
+                <div>
+                  <div style={{ fontWeight: 600 }}>{team.name}</div>
+                  <div style={{ fontSize: '0.75rem', color: 'var(--text-dim)' }}>Role: {team.role}</div>
+                </div>
+                <ArrowRight size={16} style={{ opacity: selectedTeam?.id === team.id ? 1 : 0 }} />
+              </button>
+            ))}
+          </div>
+        </div>
+
+        {/* Selected Team Details */}
+        <div className="team-details">
+          {selectedTeam ? (
+            <div className="glass-panel" style={{ padding: 'var(--space-lg)', height: '100%' }}>
+              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 'var(--space-xl)' }}>
+                <div>
+                  <h3 style={{ margin: 0, fontSize: '1.5rem' }}>{selectedTeam.name}</h3>
+                  <p style={{ color: 'var(--text-dim)', fontSize: '0.9rem' }}>Team ID: {selectedTeam.id}</p>
+                </div>
+                {selectedTeam.role === 'admin' && (
+                  <button className="btn btn-glass btn-sm" style={{ color: 'var(--danger)' }}>
+                    <Trash2 size={16} />
+                    Delete Team
+                  </button>
+                )}
+              </div>
+
+              <div style={{ display: 'grid', gridTemplateColumns: '1fr 350px', gap: 'var(--space-xl)' }}>
+                {/* Members Section */}
+                <section>
+                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 'var(--space-lg)' }}>
+                    <h4 style={{ margin: 0 }}>Team Members ({members.length})</h4>
+                  </div>
+                  <div className="members-table" style={{ background: 'rgba(0,0,0,0.2)', borderRadius: '12px', overflow: 'hidden' }}>
+                    {members.map(member => (
+                      <div key={member.id} style={{ 
+                        padding: 'var(--space-md)', 
+                        borderBottom: '1px solid rgba(255,255,255,0.05)',
+                        display: 'flex',
+                        alignItems: 'center',
+                        gap: 'var(--space-md)'
+                      }}>
+                        <div style={{ 
+                          width: 40, height: 40, 
+                          borderRadius: '50%', 
+                          background: 'var(--primary)',
+                          display: 'flex', alignItems: 'center', justifyContent: 'center',
+                          fontWeight: 600
+                        }}>
+                          {(member.full_name || member.email || 'U').slice(0, 2).toUpperCase()}
+                        </div>
+                        <div style={{ flex: 1 }}>
+                          <div style={{ fontWeight: 500 }}>{member.full_name || 'Anonymous User'}</div>
+                          <div style={{ fontSize: '0.8rem', color: 'var(--text-dim)' }}>{member.email}</div>
+                        </div>
+                        <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-md)' }}>
+                          <select 
+                            value={member.role}
+                            onChange={(e) => updateMemberRole(member.id, e.target.value)}
+                            disabled={selectedTeam.role !== 'admin' || member.user_id === user?.id}
+                            className="glass-input"
+                            style={{ padding: '4px 8px', fontSize: '0.8rem' }}
+                          >
+                            <option value="admin">Admin</option>
+                            <option value="editor">Editor</option>
+                            <option value="viewer">Viewer</option>
+                          </select>
+                          {selectedTeam.role === 'admin' && member.user_id !== user?.id && (
+                            <button 
+                              onClick={() => removeMember(member.id)}
+                              className="btn btn-glass btn-sm" 
+                              style={{ padding: '6px', color: 'var(--danger)' }}
+                            >
+                              <Trash2 size={16} />
+                            </button>
+                          )}
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                </section>
+
+                {/* Invite Section */}
+                {selectedTeam.role === 'admin' && (
+                  <section className="glass-panel" style={{ padding: 'var(--space-lg)', height: 'fit-content' }}>
+                    <h4 style={{ marginTop: 0 }}>Invite Member</h4>
+                    <p style={{ fontSize: '0.85rem', color: 'var(--text-dim)' }}>Invite someone to collaborate on team projects.</p>
+                    
+                    <div style={{ marginTop: 'var(--space-md)' }}>
+                      <label style={{ display: 'block', fontSize: '0.8rem', marginBottom: '4px' }}>Email Address</label>
+                      <input 
+                        type="email"
+                        className="glass-input"
+                        placeholder="colleague@example.com"
+                        value={inviteEmail}
+                        onChange={(e) => setInviteEmail(e.target.value)}
+                        style={{ width: '100%', marginBottom: 'var(--space-md)' }}
+                      />
+                      
+                      <label style={{ display: 'block', fontSize: '0.8rem', marginBottom: '4px' }}>Role</label>
+                      <select 
+                        className="glass-input"
+                        value={inviteRole}
+                        onChange={(e) => setInviteRole(e.target.value as any)}
+                        style={{ width: '100%', marginBottom: 'var(--space-lg)' }}
+                      >
+                        <option value="admin">Admin (Manage members & projects)</option>
+                        <option value="editor">Editor (Create & edit projects)</option>
+                        <option value="viewer">Viewer (Read only)</option>
+                      </select>
+
+                      <button 
+                        className="btn btn-primary" 
+                        style={{ width: '100%' }}
+                        onClick={inviteMember}
+                        disabled={actionPending || !inviteEmail.trim()}
+                      >
+                        {actionPending ? 'Inviting...' : 'Send Invitation'}
+                      </button>
+                    </div>
+                  </section>
+                )}
+              </div>
+            </div>
+          ) : (
+            <div className="glass-panel" style={{ height: '100%', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', color: 'var(--text-dim)', padding: 'var(--space-xl)' }}>
+              <Users size={64} style={{ marginBottom: 'var(--space-lg)', opacity: 0.2 }} />
+              <h3>Select a team to manage</h3>
+              <p>Choose a team from the sidebar to view members and permissions.</p>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Create Team Modal */}
+      {showCreateModal && (
+        <div className="modal-overlay" onClick={() => setShowCreateModal(false)}>
+          <div className="glass-panel modal-content" onClick={e => e.stopPropagation()} style={{ maxWidth: '400px' }}>
+            <h3>Create New Team</h3>
+            <p style={{ color: 'var(--text-dim)', fontSize: '0.9rem' }}>Teams allow you to share projects and collaborate with other users.</p>
+            
+            <div style={{ marginTop: 'var(--space-lg)' }}>
+              <label style={{ display: 'block', fontSize: '0.85rem', marginBottom: '8px' }}>Team Name</label>
+              <input 
+                autoFocus
+                className="glass-input"
+                placeholder="Marketing Engine"
+                value={newTeamName}
+                onChange={(e) => setNewTeamName(e.target.value)}
+                style={{ width: '100%', marginBottom: 'var(--space-xl)' }}
+              />
+              
+              <div className="button-row">
+                <button className="btn btn-glass" onClick={() => setShowCreateModal(false)}>Cancel</button>
+                <button 
+                  className="btn btn-primary" 
+                  onClick={createTeam}
+                  disabled={actionPending || !newTeamName.trim()}
+                >
+                  {actionPending ? 'Creating...' : 'Create Team'}
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default TeamsView;