update

backend/app/tenant_routes.py

@@ -104,3 +104,65 @@ def create_invitation(body: InviteBody, tc: TenantContext = Depends(require_tena
         "expires_at": exp.isoformat() + "Z",
         "email": email_n,
     }
+
+
+@router.get("/members")
+def list_tenant_members(tc: TenantContext = Depends(require_tenant_admin)):
+    """List users in the current workspace (admin only)."""
+    db = tc.db
+    rows = (
+        db.query(TenantMembership, User)
+        .join(User, User.id == TenantMembership.user_id)
+        .filter(TenantMembership.tenant_id == tc.tenant_id)
+        .order_by(User.email)
+        .all()
+    )
+    members = []
+    for m, u in rows:
+        members.append(
+            {
+                "user_id": u.id,
+                "email": u.email or "",
+                "name": u.name or "",
+                "role": m.role,
+            }
+        )
+    return {"members": members}
+
+
+@router.delete("/members/{member_user_id}")
+def remove_tenant_member(
+    member_user_id: int,
+    tc: TenantContext = Depends(require_tenant_admin),
+):
+    """Remove a user from the workspace. Cannot remove yourself or the last admin."""
+    if member_user_id == tc.user_id:
+        raise HTTPException(status_code=400, detail="Cannot remove yourself from the workspace")
+
+    db = tc.db
+    target = (
+        db.query(TenantMembership)
+        .filter(
+            TenantMembership.tenant_id == tc.tenant_id,
+            TenantMembership.user_id == member_user_id,
+        )
+        .first()
+    )
+    if not target:
+        raise HTTPException(status_code=404, detail="Member not found in this workspace")
+
+    if target.role == "admin":
+        admin_count = (
+            db.query(func.count(TenantMembership.id))
+            .filter(
+                TenantMembership.tenant_id == tc.tenant_id,
+                TenantMembership.role == "admin",
+            )
+            .scalar()
+        )
+        if admin_count is not None and int(admin_count) <= 1:
+            raise HTTPException(status_code=400, detail="Cannot remove the last admin")
+
+    db.delete(target)
+    db.commit()
+    return {"ok": True}

frontend/src/App.jsx

@@ -4,6 +4,7 @@ import EmailSequenceGenerator from "./pages/EmailSequenceGenerator";
 import Contacts from "./pages/Contacts";
 import Leads from "./pages/Leads";
 import Deals from "./pages/Deals";
+import Settings from "./pages/Settings";
 import "./index.css";
 
 export default function App() {
@@ -14,6 +15,7 @@ export default function App() {
         <Route path="/contacts" element={<Contacts />} />
         <Route path="/leads" element={<Leads />} />
         <Route path="/deals" element={<Deals />} />
+        <Route path="/settings" element={<Settings />} />
         <Route path="/history" element={<Navigate to="/leads" replace />} />
       </Routes>
     </BrowserRouter>

frontend/src/components/layout/AppShell.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { Link, useLocation } from 'react-router-dom';
 import {
     Zap,
@@ -8,12 +8,14 @@ import {
     Handshake,
     ChevronLeft,
     ChevronRight,
+    Settings,
 } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { cn } from '@/lib/utils';
+import { apiFetch } from '@/lib/api';
 import GoogleAuthBar from '@/components/layout/GoogleAuthBar';
 
-const NAV_ITEMS = [
+const BASE_NAV_ITEMS = [
     { label: 'Generator', href: '/', icon: LayoutDashboard },
     { label: 'Contacts', href: '/contacts', icon: Users },
     { label: 'Leads', href: '/leads', icon: Inbox },
@@ -29,6 +31,31 @@ function pathMatches(locationPath, href) {
 
 export default function AppShell({ title, subtitle, rightContent, children }) {
     const location = useLocation();
+    const [showSettingsNav, setShowSettingsNav] = useState(false);
+
+    useEffect(() => {
+        const syncAdminNav = () => {
+            apiFetch('/api/auth/me')
+                .then((r) => (r.ok ? r.json() : null))
+                .then((u) => setShowSettingsNav(u?.current_role === 'admin'))
+                .catch(() => setShowSettingsNav(false));
+        };
+        syncAdminNav();
+        window.addEventListener('emailout-auth-changed', syncAdminNav);
+        return () => window.removeEventListener('emailout-auth-changed', syncAdminNav);
+    }, []);
+
+    const navItems = useMemo(
+        () =>
+            showSettingsNav
+                ? [
+                      ...BASE_NAV_ITEMS,
+                      { label: 'Settings', href: '/settings', icon: Settings },
+                  ]
+                : BASE_NAV_ITEMS,
+        [showSettingsNav]
+    );
+
     const [sidebarCollapsed, setSidebarCollapsed] = useState(() => {
         try {
             return typeof window !== 'undefined' && localStorage.getItem(SIDEBAR_COLLAPSED_KEY) === '1';
@@ -88,8 +115,8 @@ export default function AppShell({ title, subtitle, rightContent, children }) {
                         </div>
                     </div>
                 </div>
-                <nav className="flex items-center gap-2 border-t border-slate-100 bg-white/90 px-4 py-2 md:hidden">
-                    {NAV_ITEMS.map((item) => {
+                <nav className="flex items-center gap-2 border-t border-slate-100 bg-white/90 px-4 py-2 md:hidden flex-wrap">
+                    {navItems.map((item) => {
                         const active = pathMatches(location.pathname, item.href);
                         return (
                             <Button
@@ -119,7 +146,7 @@ export default function AppShell({ title, subtitle, rightContent, children }) {
                             sidebarCollapsed && 'items-center'
                         )}
                     >
-                        {NAV_ITEMS.map((item) => {
+                        {navItems.map((item) => {
                             const Icon = item.icon;
                             const active = pathMatches(location.pathname, item.href);
                             return (

frontend/src/components/layout/GoogleAuthBar.jsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { useSearchParams } from 'react-router-dom';
-import { LogOut, Building2, UserPlus } from 'lucide-react';
+import { LogOut, Building2 } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import {
     Select,
@@ -9,23 +9,17 @@ import {
     SelectTrigger,
     SelectValue,
 } from '@/components/ui/select';
-import { Input } from '@/components/ui/input';
 import { cn } from '@/lib/utils';
 import { apiFetch } from '@/lib/api';
 
 /**
- * Sign-in (Google), workspace switcher, admin invitations; session cookie from OAuth callback.
+ * Sign-in (Google), workspace switcher; invitations live on Settings (admins). Session from OAuth callback.
  */
 export default function GoogleAuthBar() {
     const [searchParams, setSearchParams] = useSearchParams();
     const [phase, setPhase] = useState('loading');
     const [googleOn, setGoogleOn] = useState(false);
     const [user, setUser] = useState(null);
-    const [inviteOpen, setInviteOpen] = useState(false);
-    const [inviteEmail, setInviteEmail] = useState('');
-    const [inviteBusy, setInviteBusy] = useState(false);
-    const [inviteResult, setInviteResult] = useState(null);
-
     const refresh = useCallback(async () => {
         try {
             const [st, me] = await Promise.all([
@@ -35,6 +29,9 @@ export default function GoogleAuthBar() {
             setGoogleOn(!!st.googleConfigured);
             setUser(me);
             setPhase('ready');
+            if (typeof window !== 'undefined') {
+                window.dispatchEvent(new CustomEvent('emailout-auth-changed'));
+            }
         } catch {
             setPhase('error');
         }
@@ -65,6 +62,9 @@ export default function GoogleAuthBar() {
         try {
             await apiFetch('/api/auth/logout', { method: 'POST' });
             setUser(null);
+            if (typeof window !== 'undefined') {
+                window.dispatchEvent(new CustomEvent('emailout-auth-changed'));
+            }
         } catch (e) {
             console.error(e);
         }
@@ -86,33 +86,6 @@ export default function GoogleAuthBar() {
         }
     };
 
-    const sendInvite = async () => {
-        const email = inviteEmail.trim().toLowerCase();
-        if (!email || !email.includes('@')) return;
-        setInviteBusy(true);
-        setInviteResult(null);
-        try {
-            const res = await apiFetch('/api/tenants/invite', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ email, role: 'member' }),
-            });
-            const data = await res.json().catch(() => ({}));
-            if (!res.ok) {
-                setInviteResult({
-                    error: typeof data.detail === 'string' ? data.detail : 'Invite failed',
-                });
-                return;
-            }
-            setInviteResult({ url: data.invite_url });
-            setInviteEmail('');
-        } catch (e) {
-            setInviteResult({ error: String(e) });
-        } finally {
-            setInviteBusy(false);
-        }
-    };
-
     const inviteParam = searchParams.get('invite');
     const googleHref = inviteParam
         ? `/api/auth/google?invite=${encodeURIComponent(inviteParam)}`
@@ -135,7 +108,6 @@ export default function GoogleAuthBar() {
     }
 
     if (user) {
-        const isAdmin = user.current_role === 'admin';
         const tenants = user.tenants || [];
 
         return (
@@ -161,58 +133,6 @@ export default function GoogleAuthBar() {
                         </Select>
                     </div>
                 ) : null}
-                {isAdmin ? (
-                    <>
-                        <Button
-                            type="button"
-                            variant="outline"
-                            size="sm"
-                            className="h-9 gap-1 shrink-0"
-                            onClick={() => {
-                                setInviteOpen((o) => !o);
-                                setInviteResult(null);
-                            }}
-                        >
-                            <UserPlus className="h-3.5 w-3.5" />
-                            <span className="hidden sm:inline">Invite</span>
-                        </Button>
-                        {inviteOpen ? (
-                            <div className="absolute right-4 top-full z-50 mt-1 w-[min(100vw-2rem,22rem)] rounded-lg border border-slate-200 bg-white p-3 shadow-lg">
-                                <p className="text-xs text-slate-600 mb-2">
-                                    Invite a Google user by email. They must sign in with that Google
-                                    account.
-                                </p>
-                                <div className="flex gap-2">
-                                    <Input
-                                        type="email"
-                                        placeholder="colleague@company.com"
-                                        value={inviteEmail}
-                                        onChange={(e) => setInviteEmail(e.target.value)}
-                                        className="h-9 text-sm"
-                                    />
-                                    <Button
-                                        type="button"
-                                        size="sm"
-                                        className="shrink-0"
-                                        disabled={inviteBusy}
-                                        onClick={sendInvite}
-                                    >
-                                        {inviteBusy ? '…' : 'Send'}
-                                    </Button>
-                                </div>
-                                {inviteResult?.error ? (
-                                    <p className="text-xs text-red-600 mt-2">{inviteResult.error}</p>
-                                ) : null}
-                                {inviteResult?.url ? (
-                                    <div className="mt-2 space-y-1">
-                                        <p className="text-xs text-slate-600">Invite link (7 days):</p>
-                                        <Input readOnly value={inviteResult.url} className="text-xs h-8" />
-                                    </div>
-                                ) : null}
-                            </div>
-                        ) : null}
-                    </>
-                ) : null}
                 {user.picture ? (
                     <img
                         src={user.picture}

frontend/src/pages/Leads.jsx

@@ -11,7 +11,6 @@ import {
     Trash2,
     Handshake,
     Pencil,
-    ClipboardCopy,
 } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Select, SelectTrigger, SelectContent, SelectItem } from '@/components/ui/select';
@@ -73,26 +72,6 @@ export default function Leads() {
     const [rowSelection, setRowSelection] = useState({});
     const [bulkBusy, setBulkBusy] = useState(null);
     const [tableEditRowId, setTableEditRowId] = useState(null);
-    /** undefined = loading /auth/me; null = signed out or no tenant; number = workspace id for webhook */
-    const [webhookTenantId, setWebhookTenantId] = useState(undefined);
-
-    useEffect(() => {
-        let cancelled = false;
-        apiFetch('/api/auth/me').then(async (r) => {
-            if (cancelled) return;
-            if (!r.ok) {
-                setWebhookTenantId(null);
-                return;
-            }
-            const u = await r.json().catch(() => null);
-            if (cancelled) return;
-            const tid = u?.current_tenant_id;
-            setWebhookTenantId(tid != null ? Number(tid) : null);
-        });
-        return () => {
-            cancelled = true;
-        };
-    }, []);
 
     const selectedIds = useMemo(
         () => Object.keys(rowSelection).filter((id) => rowSelection[id]).map(Number),
@@ -101,15 +80,6 @@ export default function Leads() {
 
     const allPageSelected = leads.length > 0 && leads.every((l) => rowSelection[l.id]);
 
-    const webhookUrl = useMemo(() => {
-        if (typeof window === 'undefined') return '';
-        const base = `${window.location.origin}/api/webhooks/smartlead`;
-        if (typeof webhookTenantId === 'number' && !Number.isNaN(webhookTenantId)) {
-            return `${base}?tenant_id=${webhookTenantId}`;
-        }
-        return base;
-    }, [webhookTenantId]);
-
     const fetchLeads = useCallback(async () => {
         setLoading(true);
         try {
@@ -403,33 +373,7 @@ export default function Leads() {
     return (
         <AppShell
             title="Leads"
-            subtitle={
-                <>
-                    Replies from Smartlead campaigns appear here. Webhook URL (this workspace):{' '}
-                    {webhookTenantId === undefined ? (
-                        <Loader2 className="inline h-3.5 w-3.5 animate-spin align-middle text-slate-400" />
-                    ) : (
-                        <span className="inline-flex max-w-full flex-wrap items-center gap-1 align-middle">
-                            <code className="text-xs bg-slate-100 px-1.5 py-0.5 rounded break-all">
-                                {webhookUrl}
-                            </code>
-                            <Button
-                                type="button"
-                                variant="outline"
-                                size="sm"
-                                className="h-7 shrink-0 gap-1 px-2 text-xs"
-                                title="Copy webhook URL"
-                                onClick={() => {
-                                    if (webhookUrl) navigator.clipboard.writeText(webhookUrl);
-                                }}
-                            >
-                                <ClipboardCopy className="h-3.5 w-3.5" />
-                                Copy
-                            </Button>
-                        </span>
-                    )}
-                </>
-            }
+            subtitle="Replies from Smartlead campaigns appear here. Configure the webhook URL under Settings (admins)."
         >
             <MainTableWorkspace
                 primaryAction={{ label: 'New lead', to: '/' }}
@@ -474,8 +418,8 @@ export default function Leads() {
                     ) : leads.length === 0 ? (
                         <div className="text-center py-16 text-slate-500 space-y-3">
                             <p>
-                                No leads yet. When a prospect replies in Smartlead, they will show up here via
-                                webhook.
+                                No leads yet. When a prospect replies in Smartlead, they will show up here once the
+                                webhook URL from Settings is configured in Smartlead.
                             </p>
                             <Button size="sm" variant="secondary" onClick={() => seedDemoLeads()} disabled={seedBusy}>
                                 Load demo rows (preview UI)

frontend/src/pages/Settings.jsx

@@ -0,0 +1,353 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { Link } from 'react-router-dom';
+import {
+    ClipboardCopy,
+    Loader2,
+    ShieldAlert,
+    UserPlus,
+    Users,
+    Building2,
+    Trash2,
+} from 'lucide-react';
+import AppShell from '@/components/layout/AppShell';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { apiFetch } from '@/lib/api';
+import { cn } from '@/lib/utils';
+
+export default function Settings() {
+    const [me, setMe] = useState(null);
+    const [meLoading, setMeLoading] = useState(true);
+    const [members, setMembers] = useState([]);
+    const [membersLoading, setMembersLoading] = useState(true);
+    const [membersError, setMembersError] = useState('');
+
+    const [inviteEmail, setInviteEmail] = useState('');
+    const [inviteBusy, setInviteBusy] = useState(false);
+    const [inviteResult, setInviteResult] = useState(null);
+
+    const [removeBusyId, setRemoveBusyId] = useState(null);
+
+    const loadMe = useCallback(async () => {
+        setMeLoading(true);
+        try {
+            const r = await apiFetch('/api/auth/me');
+            setMe(r.ok ? await r.json() : null);
+        } catch {
+            setMe(null);
+        } finally {
+            setMeLoading(false);
+        }
+    }, []);
+
+    const loadMembers = useCallback(async () => {
+        setMembersLoading(true);
+        setMembersError('');
+        try {
+            const r = await apiFetch('/api/tenants/members');
+            if (!r.ok) {
+                const data = await r.json().catch(() => ({}));
+                setMembersError(
+                    typeof data.detail === 'string' ? data.detail : 'Could not load members'
+                );
+                setMembers([]);
+                return;
+            }
+            const data = await r.json();
+            setMembers(data.members || []);
+        } catch (e) {
+            setMembersError(String(e));
+            setMembers([]);
+        } finally {
+            setMembersLoading(false);
+        }
+    }, []);
+
+    useEffect(() => {
+        loadMe();
+    }, [loadMe]);
+
+    const isAdmin = me?.current_role === 'admin';
+
+    useEffect(() => {
+        if (!meLoading && isAdmin) {
+            loadMembers();
+        }
+    }, [meLoading, isAdmin, loadMembers]);
+
+    const currentTenant = useMemo(() => {
+        const tid = me?.current_tenant_id;
+        if (tid == null || !me?.tenants) return null;
+        return me.tenants.find((t) => Number(t.id) === Number(tid)) || null;
+    }, [me]);
+
+    const webhookUrl = useMemo(() => {
+        if (typeof window === 'undefined') return '';
+        const base = `${window.location.origin}/api/webhooks/smartlead`;
+        const tid = me?.current_tenant_id;
+        if (tid != null && !Number.isNaN(Number(tid))) {
+            return `${base}?tenant_id=${tid}`;
+        }
+        return base;
+    }, [me]);
+
+    const sendInvite = async () => {
+        const email = inviteEmail.trim().toLowerCase();
+        if (!email || !email.includes('@')) return;
+        setInviteBusy(true);
+        setInviteResult(null);
+        try {
+            const res = await apiFetch('/api/tenants/invite', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ email, role: 'member' }),
+            });
+            const data = await res.json().catch(() => ({}));
+            if (!res.ok) {
+                setInviteResult({
+                    error: typeof data.detail === 'string' ? data.detail : 'Invite failed',
+                });
+                return;
+            }
+            setInviteResult({ url: data.invite_url });
+            setInviteEmail('');
+        } catch (e) {
+            setInviteResult({ error: String(e) });
+        } finally {
+            setInviteBusy(false);
+        }
+    };
+
+    const removeMember = async (userId) => {
+        if (!window.confirm('Remove this user from the workspace?')) return;
+        setRemoveBusyId(userId);
+        try {
+            const res = await apiFetch(`/api/tenants/members/${userId}`, { method: 'DELETE' });
+            const data = await res.json().catch(() => ({}));
+            if (!res.ok) {
+                alert(typeof data.detail === 'string' ? data.detail : 'Could not remove member');
+                return;
+            }
+            await loadMembers();
+        } catch (e) {
+            alert(e.message || 'Could not remove member');
+        } finally {
+            setRemoveBusyId(null);
+        }
+    };
+
+    if (meLoading) {
+        return (
+            <AppShell title="Settings">
+                <div className="flex justify-center py-24 text-slate-500">
+                    <Loader2 className="h-10 w-10 animate-spin" />
+                </div>
+            </AppShell>
+        );
+    }
+
+    if (!me) {
+        return (
+            <AppShell title="Settings">
+                <div className="rounded-2xl border border-slate-200 bg-white p-8 text-center shadow-sm">
+                    <p className="text-slate-600 mb-4">Sign in to manage workspace settings.</p>
+                    <Button asChild variant="default">
+                        <a href="/api/auth/google">Sign in with Google</a>
+                    </Button>
+                </div>
+            </AppShell>
+        );
+    }
+
+    if (!isAdmin) {
+        return (
+            <AppShell title="Settings">
+                <div className="rounded-2xl border border-amber-200 bg-amber-50 p-6 flex gap-4 items-start">
+                    <ShieldAlert className="h-8 w-8 shrink-0 text-amber-700" />
+                    <div>
+                        <h3 className="font-semibold text-amber-950">Admin access required</h3>
+                        <p className="text-sm text-amber-900/90 mt-1">
+                            Invitations, member management, and workspace integration URLs are only
+                            available to workspace admins. Ask an admin to grant you the admin role or
+                            use another workspace where you are an admin.
+                        </p>
+                        <Button asChild variant="outline" className="mt-4">
+                            <Link to="/">Back to Generator</Link>
+                        </Button>
+                    </div>
+                </div>
+            </AppShell>
+        );
+    }
+
+    return (
+        <AppShell
+            title="Settings"
+            subtitle="Workspace details, Smartlead webhook, invitations, and members (admins only)."
+        >
+            <div className="space-y-8 max-w-3xl">
+                <section className="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm">
+                    <div className="flex items-center gap-2 text-slate-800 font-semibold mb-4">
+                        <Building2 className="h-5 w-5 text-violet-600" />
+                        Workspace details
+                    </div>
+                    <dl className="grid gap-3 text-sm sm:grid-cols-[8rem_1fr] sm:gap-x-4">
+                        <dt className="text-slate-500">Name</dt>
+                        <dd className="text-slate-900 font-medium">
+                            {currentTenant?.name ?? '—'}
+                        </dd>
+                        <dt className="text-slate-500">Workspace ID</dt>
+                        <dd className="font-mono text-slate-900">{me.current_tenant_id ?? '—'}</dd>
+                        <dt className="text-slate-500">Your role</dt>
+                        <dd className="capitalize text-slate-900">{me.current_role}</dd>
+                    </dl>
+                    <div className="mt-6 pt-6 border-t border-slate-100">
+                        <p className="text-xs font-medium text-slate-600 mb-2">
+                            Smartlead webhook URL
+                        </p>
+                        <p className="text-xs text-slate-500 mb-2">
+                            Paste this URL in Smartlead so reply events are stored for this workspace.
+                        </p>
+                        <div className="flex flex-wrap items-center gap-2">
+                            <code className="text-xs bg-slate-100 px-2 py-1.5 rounded break-all flex-1 min-w-[12rem]">
+                                {webhookUrl}
+                            </code>
+                            <Button
+                                type="button"
+                                variant="outline"
+                                size="sm"
+                                className="shrink-0 gap-1"
+                                onClick={() => webhookUrl && navigator.clipboard.writeText(webhookUrl)}
+                            >
+                                <ClipboardCopy className="h-3.5 w-3.5" />
+                                Copy
+                            </Button>
+                        </div>
+                    </div>
+                </section>
+
+                <section className="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm">
+                    <div className="flex items-center gap-2 text-slate-800 font-semibold mb-2">
+                        <UserPlus className="h-5 w-5 text-violet-600" />
+                        Invite people
+                    </div>
+                    <p className="text-sm text-slate-600 mb-4">
+                        Invite a Google user by email. They must sign in with that Google account.
+                    </p>
+                    <div className="flex flex-col sm:flex-row gap-2 max-w-xl">
+                        <Input
+                            type="email"
+                            placeholder="colleague@company.com"
+                            value={inviteEmail}
+                            onChange={(e) => setInviteEmail(e.target.value)}
+                            className="h-10"
+                        />
+                        <Button
+                            type="button"
+                            disabled={inviteBusy}
+                            onClick={sendInvite}
+                            className="shrink-0"
+                        >
+                            {inviteBusy ? (
+                                <Loader2 className="h-4 w-4 animate-spin" />
+                            ) : (
+                                'Create invite'
+                            )}
+                        </Button>
+                    </div>
+                    {inviteResult?.error ? (
+                        <p className="text-sm text-red-600 mt-3">{inviteResult.error}</p>
+                    ) : null}
+                    {inviteResult?.url ? (
+                        <div className="mt-4 space-y-2">
+                            <p className="text-xs text-slate-600">Invite link (7 days):</p>
+                            <Input readOnly value={inviteResult.url} className="text-xs h-9 font-mono" />
+                        </div>
+                    ) : null}
+                </section>
+
+                <section className="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm">
+                    <div className="flex items-center gap-2 text-slate-800 font-semibold mb-4">
+                        <Users className="h-5 w-5 text-violet-600" />
+                        Members
+                    </div>
+                    {membersLoading ? (
+                        <div className="flex justify-center py-12 text-slate-400">
+                            <Loader2 className="h-8 w-8 animate-spin" />
+                        </div>
+                    ) : membersError ? (
+                        <p className="text-sm text-red-600">{membersError}</p>
+                    ) : members.length === 0 ? (
+                        <p className="text-sm text-slate-500">No members found.</p>
+                    ) : (
+                        <div className="overflow-x-auto rounded-xl border border-slate-100">
+                            <table className="w-full text-sm text-left">
+                                <thead>
+                                    <tr className="border-b border-slate-100 bg-slate-50/80">
+                                        <th className="px-4 py-3 font-medium text-slate-600">Email</th>
+                                        <th className="px-4 py-3 font-medium text-slate-600">Name</th>
+                                        <th className="px-4 py-3 font-medium text-slate-600">Role</th>
+                                        <th className="px-4 py-3 font-medium text-slate-600 w-24" />
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    {members.map((m) => {
+                                        const isSelf = m.user_id === me.user_id;
+                                        return (
+                                            <tr
+                                                key={m.user_id}
+                                                className="border-b border-slate-50 last:border-0"
+                                            >
+                                                <td className="px-4 py-3 text-slate-900">
+                                                    {m.email || '—'}
+                                                </td>
+                                                <td className="px-4 py-3 text-slate-700">
+                                                    {m.name || '—'}
+                                                </td>
+                                                <td className="px-4 py-3">
+                                                    <span
+                                                        className={cn(
+                                                            'inline-flex rounded-full px-2 py-0.5 text-xs font-medium',
+                                                            m.role === 'admin'
+                                                                ? 'bg-violet-100 text-violet-800'
+                                                                : 'bg-slate-100 text-slate-700'
+                                                        )}
+                                                    >
+                                                        {m.role}
+                                                    </span>
+                                                </td>
+                                                <td className="px-4 py-3 text-right">
+                                                    {isSelf ? (
+                                                        <span className="text-xs text-slate-400">
+                                                            You
+                                                        </span>
+                                                    ) : (
+                                                        <Button
+                                                            type="button"
+                                                            variant="ghost"
+                                                            size="sm"
+                                                            className="h-8 text-red-600 hover:text-red-700 hover:bg-red-50"
+                                                            disabled={removeBusyId === m.user_id}
+                                                            onClick={() => removeMember(m.user_id)}
+                                                            title="Remove from workspace"
+                                                        >
+                                                            {removeBusyId === m.user_id ? (
+                                                                <Loader2 className="h-4 w-4 animate-spin" />
+                                                            ) : (
+                                                                <Trash2 className="h-4 w-4" />
+                                                            )}
+                                                        </Button>
+                                                    )}
+                                                </td>
+                                            </tr>
+                                        );
+                                    })}
+                                </tbody>
+                            </table>
+                        </div>
+                    )}
+                </section>
+            </div>
+        </AppShell>
+    );
+}