@taskforcehq/taskforce 0.3.305 → 0.3.307

package/dist/components/features/AgentsModule.js

@@ -1,25 +1,92 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useState } from 'react';
-import { AlertTriangle, Bot, Check, Clock3, Loader2, Orbit, Sparkles } from 'lucide-react';
+import { AlertTriangle, Bot, Check, ChevronLeft, Cloud, LaptopMinimal, Loader2, Plug } from 'lucide-react';
 import styles from '../../Taskforce.module.css';
-import { AI_PROFILE_SURFACE_TYPE_SECTION_ORDER, formatAiProfileSurfaceTypeLabel, formatAiProfileSurfaceTypeSectionLabel, getAiProfileSurfaceTypeSection, parseAiProfileSurfaceType } from '../../shared/aiProfileSurfaceType.js';
-export function AgentsModule({ workspaceId }) {
+import { EditableAvatarButton } from '../ui/EditableAvatarButton';
+import { AvatarImageManagerModal } from '../views/standalone/modals/AvatarImageManagerModal';
+import { prepareAvatarUploadFile } from '../../utils/avatarUpload';
+import { buildVersionedAvatarUrl } from '../../utils/avatarDisplay';
+import { dispatchTaskforceAiProfilesMutated } from '../../utils/aiProfileEvents';
+import { AI_PROFILE_SURFACE_TYPE_SECTION_ORDER, AI_PROFILE_SURFACE_TYPES, formatAiProfileSurfaceTypeLabel, formatAiProfileSurfaceTypeSectionLabel, getAiProfileSurfaceTypeSection, parseAiProfileSurfaceType } from '../../shared/aiProfileSurfaceType.js';
+import { formatAiProfileSeatScopeLabel, parseAiProfileSeatScope } from '../../shared/aiProfileSeatScope.js';
+function hasAiProfileAvatar(profile) {
+    return typeof profile.avatarUrl === 'string' && profile.avatarUrl.trim().length > 0;
+}
+function getAiProfileAvatarDisplayUrl(profile) {
+    if (!profile)
+        return '';
+    return buildVersionedAvatarUrl(profile.avatarUrl, profile.avatarRevision, profile.avatarUpdatedAt);
+}
+function getAiProfileAvatarSourceUrl(profile) {
+    if (!profile)
+        return '';
+    return buildVersionedAvatarUrl(profile.avatarSourceUrl, profile.avatarRevision, profile.avatarUpdatedAt);
+}
+function selectAiProfileGroupPrimary(profiles) {
+    return profiles.find(hasAiProfileAvatar) || profiles[0];
+}
+function buildAiProfileGroupKey(profile) {
+    return `${profile.seatScope || 'unknown'}:${profile.name.trim().toLowerCase()}`;
+}
+function formatDuplicateCount(count) {
+    const duplicates = Math.max(0, count - 1);
+    return `${duplicates} duplicate${duplicates === 1 ? '' : 's'}`;
+}
+function parseAiProfileSeatUsage(value) {
+    if (!value || typeof value !== 'object')
+        return null;
+    return {
+        used: Math.max(0, Number(value.used || 0)),
+        limit: value.limit === null || value.limit === undefined
+            ? null
+            : Math.max(0, Number(value.limit || 0)),
+        remaining: value.remaining === null || value.remaining === undefined
+            ? null
+            : Math.max(0, Number(value.remaining || 0)),
+    };
+}
+function renderAiProfileSeatScopeIcon(seatScope, options) {
+    const className = options?.variant === 'inline'
+        ? `${styles.aiProfileSeatScopeIcon} ${styles.aiProfileSeatScopeIconInline}`
+        : options?.variant === 'detail'
+            ? `${styles.aiProfileSeatScopeIcon} ${styles.aiProfileSeatScopeIconDetail}`
+            : styles.aiProfileSeatScopeIcon;
+    if (seatScope === 'cloud_metered') {
+        return (_jsx("span", { className: `${className} ${styles.aiProfileSeatScopeIconCloud}`, title: "Cloud MCP", "aria-label": "Cloud MCP", children: _jsx(Cloud, { size: 20 }) }));
+    }
+    if (seatScope === 'local_unmetered') {
+        return (_jsx("span", { className: `${className} ${styles.aiProfileSeatScopeIconLocal}`, title: "Local MCP", "aria-label": "Local MCP", children: _jsx(LaptopMinimal, { size: 20 }) }));
+    }
+    return null;
+}
+export function AgentsModule({ workspaceId, cloudAuthConfigured = false, authSessionResolved = false, isAuthenticated = false, cloudAiProfileSeatUsage = null, agentTrayOpen = false, onCloseAgentTray, mcpSettingsNode = null, }) {
     const [aiProfiles, setAiProfiles] = useState([]);
+    const [localAiProfileSeatUsage, setLocalAiProfileSeatUsage] = useState(null);
     const [aiProfilesLoading, setAiProfilesLoading] = useState(false);
     const [aiProfileMergeState, setAiProfileMergeState] = useState(null);
     const [aiProfileMergeStatus, setAiProfileMergeStatus] = useState(null);
+    const [aiProfileArchiveError, setAiProfileArchiveError] = useState(null);
+    const [aiProfileCategoryError, setAiProfileCategoryError] = useState(null);
+    const [aiProfileCategoryBusy, setAiProfileCategoryBusy] = useState(false);
     const [selectedGroupId, setSelectedGroupId] = useState(null);
+    const [avatarEditorProfileId, setAvatarEditorProfileId] = useState(null);
+    const [aiAvatarBusy, setAiAvatarBusy] = useState(false);
+    const [aiAvatarError, setAiAvatarError] = useState(null);
     const loadAiProfiles = useCallback(async () => {
         if (!workspaceId)
             return;
         setAiProfilesLoading(true);
         try {
-            const res = await fetch(`/api/taskforce/workspace/assignee-options?workspaceId=${encodeURIComponent(workspaceId)}`, {
+            const rosterUrl = `/api/taskforce/workspace/assignee-options?workspaceId=${encodeURIComponent(workspaceId)}&kind=agent`;
+            const rosterResponse = await fetch(rosterUrl, {
                 credentials: 'include',
             });
-            const data = await res.json().catch(() => ({}));
-            const agents = Array.isArray(data?.assignees)
-                ? data.assignees
+            const rosterData = rosterResponse.ok
+                ? await rosterResponse.json().catch(() => ({}))
+                : {};
+            const fallbackSeatUsage = parseAiProfileSeatUsage(rosterData?.aiProfileSeatUsage);
+            const agents = Array.isArray(rosterData?.assignees)
+                ? rosterData.assignees
                     .filter((assignee) => assignee.kind === 'agent')
                     .map((assignee) => ({
                     id: String(assignee.value || ''),
@@ -27,18 +94,31 @@ export function AgentsModule({ workspaceId }) {
                     username: String(assignee.username || assignee.value || ''),
                     icon: String(assignee.icon || 'Bot'),
                     color: String(assignee.color || '#6B7280'),
+                    avatarUrl: typeof assignee.avatarUrl === 'string' ? assignee.avatarUrl : null,
+                    avatarSourceUrl: typeof assignee.avatarSourceUrl === 'string' ? assignee.avatarSourceUrl : null,
+                    avatarRevision: Number.isFinite(Number(assignee.avatarRevision)) ? Math.max(0, Math.floor(Number(assignee.avatarRevision))) : 0,
+                    avatarUpdatedAt: typeof assignee.avatarUpdatedAt === 'string' ? assignee.avatarUpdatedAt : null,
                     kind: String(assignee.kind || 'agent'),
                     description: typeof assignee.description === 'string' ? assignee.description : null,
                     role: typeof assignee.role === 'string' ? assignee.role : null,
                     provider: typeof assignee.provider === 'string' ? assignee.provider : null,
                     model: typeof assignee.model === 'string' ? assignee.model : null,
                     surfaceType: parseAiProfileSurfaceType(assignee.surfaceType),
+                    seatScope: parseAiProfileSeatScope(assignee.seatScope),
+                    archivedAt: typeof assignee.archivedAt === 'string' ? assignee.archivedAt : null,
                     createdAt: String(assignee.createdAt || ''),
                     updatedAt: String(assignee.updatedAt || assignee.createdAt || ''),
                     lastActiveAt: typeof assignee.lastActiveAt === 'string' ? assignee.lastActiveAt : null,
                 }))
                 : [];
             setAiProfiles(agents);
+            setLocalAiProfileSeatUsage(fallbackSeatUsage);
+            setAiProfileArchiveError((current) => (current && !agents.some((agent) => agent.id === current.profileId)
+                ? null
+                : current));
+            setAiProfileCategoryError((current) => (current && !agents.some((agent) => agent.id === current.profileId)
+                ? null
+                : current));
         }
         finally {
             setAiProfilesLoading(false);
@@ -54,7 +134,7 @@ export function AgentsModule({ workspaceId }) {
             if (!bySection.has(section))
                 bySection.set(section, new Map());
             const sectionEntries = bySection.get(section);
-            const key = profile.name.toLowerCase();
+            const key = buildAiProfileGroupKey(profile);
             if (!sectionEntries.has(key))
                 sectionEntries.set(key, []);
             sectionEntries.get(key).push(profile);
@@ -68,13 +148,14 @@ export function AgentsModule({ workspaceId }) {
                 section,
                 sectionLabel: formatAiProfileSurfaceTypeSectionLabel(section),
                 profiles,
-                primaryProfile: profiles[0]
+                primaryProfile: selectAiProfileGroupPrimary(profiles)
             }))
         }))
             .filter((entry) => entry.groups.length > 0);
     }, [aiProfiles]);
     const allGroups = useMemo(() => groupedProfilesBySurfaceType.flatMap((section) => section.groups), [groupedProfilesBySurfaceType]);
     const selectedGroup = useMemo(() => allGroups.find((group) => group.groupId === selectedGroupId) || allGroups[0] || null, [allGroups, selectedGroupId]);
+    const avatarEditorProfile = useMemo(() => aiProfiles.find((profile) => profile.id === avatarEditorProfileId) || null, [aiProfiles, avatarEditorProfileId]);
     useEffect(() => {
         if (!allGroups.length) {
             if (selectedGroupId !== null)
@@ -87,6 +168,7 @@ export function AgentsModule({ workspaceId }) {
     }, [allGroups, selectedGroupId]);
     const handleMerge = async (keepId, mergeId) => {
         setAiProfileMergeStatus(null);
+        setAiProfileArchiveError(null);
         try {
             const res = await fetch('/api/taskforce/workspace/ai-profiles/merge', {
                 method: 'POST',
@@ -102,11 +184,225 @@ export function AgentsModule({ workspaceId }) {
             setAiProfileMergeState(null);
             setAiProfileMergeStatus({ type: 'success', message: 'AI profiles merged.' });
             await loadAiProfiles();
+            dispatchTaskforceAiProfilesMutated({ workspaceId, profileId: keepId, reason: 'merge' });
         }
         catch {
             setAiProfileMergeStatus({ type: 'error', message: 'Failed to merge AI profiles.' });
         }
     };
+    const handleArchive = async (profile) => {
+        const confirmed = window.confirm(`Remove ${profile.name} from the active roster? This frees an AI profile seat and preserves task and comment history.`);
+        if (!confirmed)
+            return;
+        setAiProfileArchiveError(null);
+        setAiProfileMergeStatus(null);
+        try {
+            const res = await fetch('/api/taskforce/workspace/ai-profiles/archive', {
+                method: 'POST',
+                credentials: 'include',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ profileId: profile.id, reason: 'manual_archive' }),
+            });
+            const data = await res.json().catch(() => ({}));
+            if (!res.ok) {
+                setAiProfileArchiveError({
+                    profileId: profile.id,
+                    message: String(data?.error || 'Failed to remove AI profile from roster.')
+                });
+                return;
+            }
+            if (aiProfileMergeState?.keepId === profile.id || aiProfileMergeState?.mergeId === profile.id) {
+                setAiProfileMergeState(null);
+            }
+            setAiProfileMergeStatus({ type: 'success', message: 'AI profile removed from active roster.' });
+            await loadAiProfiles();
+            dispatchTaskforceAiProfilesMutated({ workspaceId, profileId: profile.id, reason: 'archive' });
+        }
+        catch {
+            setAiProfileArchiveError({
+                profileId: profile.id,
+                message: 'Failed to remove AI profile from roster.'
+            });
+        }
+    };
+    const handleCategoryChange = async (group, value) => {
+        const nextSurfaceType = parseAiProfileSurfaceType(value);
+        const currentSurfaceTypes = new Set(group.profiles.map((profile) => profile.surfaceType ?? ''));
+        const nextSurfaceTypeKey = nextSurfaceType ?? '';
+        if (currentSurfaceTypes.size === 1 && currentSurfaceTypes.has(nextSurfaceTypeKey))
+            return;
+        setAiProfileCategoryBusy(true);
+        setAiProfileCategoryError(null);
+        setAiProfileMergeStatus(null);
+        const updatedProfiles = [];
+        try {
+            for (const profile of group.profiles) {
+                const res = await fetch('/api/taskforce/workspace/ai-profiles/surface-type', {
+                    method: 'POST',
+                    credentials: 'include',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({
+                        profileId: profile.id,
+                        surfaceType: nextSurfaceType
+                    }),
+                });
+                const data = await res.json().catch(() => ({}));
+                if (!res.ok || !data?.profile) {
+                    throw new Error(String(data?.error || 'Failed to update AI profile category.'));
+                }
+                const updated = data.profile;
+                updatedProfiles.push({
+                    ...profile,
+                    surfaceType: parseAiProfileSurfaceType(updated.surfaceType),
+                    updatedAt: typeof updated.updatedAt === 'string' ? updated.updatedAt : profile.updatedAt
+                });
+            }
+            const updatedById = new Map(updatedProfiles.map((profile) => [profile.id, profile]));
+            setAiProfiles((current) => current.map((profile) => updatedById.get(profile.id) || profile));
+            const nextPrimary = updatedById.get(group.primaryProfile.id) || {
+                ...group.primaryProfile,
+                surfaceType: nextSurfaceType
+            };
+            const nextSection = getAiProfileSurfaceTypeSection(nextPrimary.surfaceType);
+            setSelectedGroupId(`${nextSection}:${buildAiProfileGroupKey(nextPrimary)}`);
+            setAiProfileMergeStatus({ type: 'success', message: 'AI profile category updated.' });
+            for (const profile of updatedProfiles) {
+                dispatchTaskforceAiProfilesMutated({ workspaceId, profileId: profile.id, reason: 'update' });
+            }
+        }
+        catch (error) {
+            setAiProfileCategoryError({
+                profileId: group.primaryProfile.id,
+                message: String(error?.message || 'Failed to update AI profile category.')
+            });
+        }
+        finally {
+            setAiProfileCategoryBusy(false);
+        }
+    };
+    const fileToDataUrl = (file) => new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.onload = () => resolve(String(reader.result || ''));
+        reader.onerror = () => reject(new Error('Failed to read image file.'));
+        reader.readAsDataURL(file);
+    });
+    const applyAiProfileAvatarUpdate = (updatedProfile) => {
+        const updatedId = String(updatedProfile?.id || '').trim();
+        if (!updatedId)
+            return;
+        setAiProfiles((current) => current.map((profile) => (profile.id === updatedId
+            ? {
+                ...profile,
+                avatarUrl: typeof updatedProfile.avatarUrl === 'string' ? updatedProfile.avatarUrl : null,
+                avatarSourceUrl: typeof updatedProfile.avatarSourceUrl === 'string' ? updatedProfile.avatarSourceUrl : null,
+                avatarRevision: Number.isFinite(Number(updatedProfile.avatarRevision)) ? Math.max(0, Math.floor(Number(updatedProfile.avatarRevision))) : profile.avatarRevision,
+                avatarUpdatedAt: typeof updatedProfile.avatarUpdatedAt === 'string' ? updatedProfile.avatarUpdatedAt : profile.avatarUpdatedAt,
+                updatedAt: typeof updatedProfile.updatedAt === 'string' ? updatedProfile.updatedAt : profile.updatedAt
+            }
+            : profile)));
+    };
+    const uploadAiProfileAvatar = async (profileId, displayFile, sourceFile) => {
+        const displayDataUrl = await fileToDataUrl(displayFile);
+        const sourceDataUrl = sourceFile ? await fileToDataUrl(sourceFile) : null;
+        const payload = {
+            profileId,
+            displayImage: {
+                dataUrl: displayDataUrl,
+                mimeType: displayFile.type || 'application/octet-stream',
+                originalName: displayFile.name || 'display-avatar'
+            }
+        };
+        if (sourceFile && sourceDataUrl) {
+            payload.sourceImage = {
+                dataUrl: sourceDataUrl,
+                mimeType: sourceFile.type || 'application/octet-stream',
+                originalName: sourceFile.name || 'source-avatar'
+            };
+        }
+        const res = await fetch('/api/taskforce/workspace/ai-profiles/avatar/upload', {
+            method: 'POST',
+            credentials: 'include',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(payload),
+        });
+        const data = await res.json().catch(() => ({}));
+        if (!res.ok || !data?.profile) {
+            throw new Error(String(data?.error || 'Failed to update AI profile avatar.'));
+        }
+        applyAiProfileAvatarUpdate(data.profile);
+        dispatchTaskforceAiProfilesMutated({ workspaceId, profileId, reason: 'avatar' });
+    };
+    const clearAiProfileAvatar = async (profileId) => {
+        const res = await fetch('/api/taskforce/workspace/ai-profiles/avatar', {
+            method: 'POST',
+            credentials: 'include',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+                profileId,
+                avatarUrl: null,
+                avatarSourceUrl: null
+            })
+        });
+        const data = await res.json().catch(() => ({}));
+        if (!res.ok || !data?.profile) {
+            throw new Error(String(data?.error || 'Failed to update AI profile avatar.'));
+        }
+        applyAiProfileAvatarUpdate(data.profile);
+        dispatchTaskforceAiProfilesMutated({ workspaceId, profileId, reason: 'avatar' });
+    };
+    const handleAiProfileAvatarSelected = async (file, sourceFile) => {
+        if (!avatarEditorProfile)
+            return false;
+        if (!file.type.startsWith('image/')) {
+            setAiAvatarError('AI profile photo must be an image file.');
+            return false;
+        }
+        setAiAvatarBusy(true);
+        setAiAvatarError(null);
+        try {
+            const preparedAvatar = await prepareAvatarUploadFile(file, { maxBytes: 5 * 1024 * 1024 });
+            if (preparedAvatar.exceededLimit) {
+                throw new Error(file.type === 'image/gif'
+                    ? 'Animated GIF AI profile photos must be 5 MB or smaller.'
+                    : 'AI profile photo must be 5 MB or smaller.');
+            }
+            const uploadFile = preparedAvatar.file;
+            let preparedSourceFile = null;
+            if (sourceFile) {
+                const preparedSource = await prepareAvatarUploadFile(sourceFile, { maxBytes: 5 * 1024 * 1024 });
+                if (preparedSource.exceededLimit) {
+                    throw new Error(sourceFile.type === 'image/gif'
+                        ? 'Animated GIF AI profile photos must be 5 MB or smaller.'
+                        : 'AI profile source photo must be 5 MB or smaller.');
+                }
+                preparedSourceFile = preparedSource.file;
+            }
+            await uploadAiProfileAvatar(avatarEditorProfile.id, uploadFile, preparedSourceFile);
+            return true;
+        }
+        catch (error) {
+            setAiAvatarError(String(error?.message || 'Failed to update AI profile photo.'));
+            return false;
+        }
+        finally {
+            setAiAvatarBusy(false);
+        }
+    };
+    const handleAiProfileAvatarRemove = async () => {
+        if (!avatarEditorProfile)
+            return;
+        setAiAvatarBusy(true);
+        setAiAvatarError(null);
+        try {
+            await clearAiProfileAvatar(avatarEditorProfile.id);
+        }
+        catch (error) {
+            setAiAvatarError(String(error?.message || 'Failed to remove AI profile photo.'));
+        }
+        finally {
+            setAiAvatarBusy(false);
+        }
+    };
     const formatTimestamp = (value) => {
         const normalized = String(value || '').trim();
         if (!normalized)
@@ -119,13 +415,65 @@ export function AgentsModule({ workspaceId }) {
             timeStyle: 'short'
         });
     };
-    return (_jsx("div", { className: `${styles.standalonePage} ${styles.standaloneContent}`, style: { overflow: 'auto' }, children: _jsx("div", { className: styles.settingsContent, style: { maxWidth: 1080, margin: '0 auto', width: '100%' }, children: _jsx("div", { className: styles.settingGroup, children: _jsxs("div", { children: [_jsx("h4", { className: styles.settingSubTitle, children: "Registered AI Profiles" }), _jsx("p", { className: `${styles.settingsHint} ${styles.marginBottom12}`, children: "AI agents register profiles when connecting via MCP. Merge duplicates created when a token was lost." }), aiProfilesLoading && (_jsxs("div", { className: styles.settingsHint, children: [_jsx(Loader2, { size: 13, className: styles.spinner }), " Loading profiles\u2026"] })), !aiProfilesLoading && aiProfiles.length === 0 && (_jsx("div", { className: styles.settingsHint, children: "No AI profiles registered yet." })), !aiProfilesLoading && groupedProfilesBySurfaceType.length > 0 && (_jsxs("div", { className: styles.aiProfilesExplorer, children: [_jsx("div", { className: styles.aiProfilesListPane, children: _jsx("div", { className: styles.aiProfilesList, children: groupedProfilesBySurfaceType.map((section) => (_jsxs("div", { className: styles.aiProfilesSection, children: [_jsx("div", { className: styles.aiProfilesSectionHeader, children: section.label }), section.groups.map((group) => {
-                                                    const isSelected = selectedGroup?.groupId === group.groupId;
-                                                    const primary = group.primaryProfile;
-                                                    return (_jsxs("button", { type: "button", className: `${styles.aiProfileGroup} ${group.profiles.length > 1 ? styles.aiProfileGroupDuplicate : ''} ${isSelected ? styles.aiProfileGroupSelected : ''}`, onClick: () => setSelectedGroupId(group.groupId), "aria-pressed": isSelected, children: [_jsxs("div", { className: styles.aiProfileGroupHeader, children: [_jsx(Bot, { size: 13, style: { color: primary.color } }), _jsx("span", { className: styles.aiProfileName, children: primary.name }), group.profiles.length > 1 && (_jsxs("span", { className: styles.aiProfileDuplicateBadge, children: [_jsx(AlertTriangle, { size: 11 }), " ", group.profiles.length, " duplicates"] }))] }), _jsxs("div", { className: styles.settingsHint, style: { marginTop: 6 }, children: ["@", primary.username] }), (primary.surfaceType || primary.role || primary.provider || primary.model) && (_jsxs("div", { className: styles.aiProfileMetaRow, children: [primary.surfaceType && (_jsx("span", { className: styles.aiProfileSurfaceBadge, children: formatAiProfileSurfaceTypeLabel(primary.surfaceType) })), primary.role && _jsx("span", { children: primary.role }), primary.provider && _jsx("span", { children: primary.provider }), primary.model && _jsx("span", { children: primary.model })] })), primary.description && (_jsx("div", { className: styles.settingsHint, style: { marginTop: 4 }, children: primary.description }))] }, group.groupId));
-                                                })] }, section.section))) }) }), selectedGroup && (_jsx("div", { className: styles.aiProfileDetailPane, children: _jsxs("div", { className: styles.aiProfileDetailCard, children: [_jsxs("div", { className: styles.aiProfileDetailHero, children: [_jsx("div", { className: styles.aiProfileDetailIcon, style: { color: selectedGroup.primaryProfile.color }, children: _jsx(Bot, { size: 18 }) }), _jsxs("div", { className: styles.aiProfileDetailHeading, children: [_jsx("div", { className: styles.aiProfileDetailTitleRow, children: _jsx("h5", { className: styles.aiProfileDetailTitle, children: selectedGroup.primaryProfile.name }) }), _jsxs("div", { className: styles.aiProfileDetailMetaRow, children: [_jsxs("span", { className: styles.aiProfileDetailHandle, children: ["@", selectedGroup.primaryProfile.username] }), _jsx("span", { className: styles.aiProfileDetailSectionBadge, children: selectedGroup.sectionLabel }), selectedGroup.profiles.length > 1 && (_jsxs("span", { className: styles.aiProfileDetailLinkedCount, children: [selectedGroup.profiles.length, " linked"] }))] })] })] }), selectedGroup.primaryProfile.description && (_jsx("div", { className: styles.aiProfileDetailDescription, children: selectedGroup.primaryProfile.description })), _jsxs("div", { className: styles.aiProfileDetailGrid, children: [_jsxs("div", { className: styles.aiProfileDetailStat, children: [_jsxs("span", { className: styles.aiProfileDetailStatLabel, children: [_jsx(Sparkles, { size: 12 }), " Role"] }), _jsx("span", { className: styles.aiProfileDetailStatValue, children: selectedGroup.primaryProfile.role || 'Not set' })] }), _jsxs("div", { className: styles.aiProfileDetailStat, children: [_jsxs("span", { className: styles.aiProfileDetailStatLabel, children: [_jsx(Orbit, { size: 12 }), " Provider"] }), _jsx("span", { className: styles.aiProfileDetailStatValue, children: [selectedGroup.primaryProfile.provider, selectedGroup.primaryProfile.model].filter(Boolean).join(' · ') || 'Not set' })] }), _jsxs("div", { className: styles.aiProfileDetailStat, children: [_jsxs("span", { className: styles.aiProfileDetailStatLabel, children: [_jsx(Clock3, { size: 12 }), " Last active"] }), _jsx("span", { className: styles.aiProfileDetailStatValue, children: formatTimestamp(selectedGroup.primaryProfile.lastActiveAt) })] }), _jsxs("div", { className: styles.aiProfileDetailStat, children: [_jsxs("span", { className: styles.aiProfileDetailStatLabel, children: [_jsx(Clock3, { size: 12 }), " Updated"] }), _jsx("span", { className: styles.aiProfileDetailStatValue, children: formatTimestamp(selectedGroup.primaryProfile.updatedAt) })] })] }), _jsxs("div", { className: styles.aiProfileInstanceSection, children: [_jsxs("div", { className: styles.aiProfileInstanceSectionHeader, children: [_jsx("span", { children: "Profile instances" }), _jsx("span", { className: styles.settingsHint, children: "Choose a keeper here if duplicates need to be merged." })] }), _jsx("div", { className: styles.aiProfileInstanceList, children: selectedGroup.profiles.map((profile) => (_jsxs("div", { className: styles.aiProfileInstanceCard, children: [_jsxs("div", { className: styles.aiProfileInstanceTopRow, children: [_jsxs("div", { children: [_jsxs("div", { className: styles.aiProfileInstanceName, children: ["@", profile.username] }), _jsx("div", { className: styles.aiProfileIdChip, children: profile.id })] }), selectedGroup.profiles.length > 1 && aiProfileMergeState?.keepId === profile.id && (_jsx("span", { className: styles.aiProfileKeepBadge, children: "Keeping" }))] }), _jsxs("div", { className: styles.aiProfileInstanceMeta, children: [_jsxs("span", { children: ["Created ", formatTimestamp(profile.createdAt)] }), _jsxs("span", { children: ["Updated ", formatTimestamp(profile.updatedAt)] })] }), selectedGroup.profiles.length > 1 && aiProfileMergeState?.keepId !== profile.id && (_jsx("button", { className: styles.secondaryHeaderBtn, title: "Keep this profile, merge others into it", onClick: () => {
-                                                                        const otherId = selectedGroup.profiles.find((candidate) => candidate.id !== profile.id)?.id;
-                                                                        if (otherId)
-                                                                            setAiProfileMergeState({ keepId: profile.id, mergeId: otherId });
-                                                                    }, children: "Keep this" }))] }, profile.id))) }), aiProfileMergeState && selectedGroup.profiles.some((profile) => profile.id === aiProfileMergeState.keepId) && (_jsxs("div", { className: styles.aiProfileMergeActions, children: [_jsx("button", { className: styles.dangerBtn, onClick: () => { void handleMerge(aiProfileMergeState.keepId, aiProfileMergeState.mergeId); }, children: "Merge duplicates" }), _jsx("button", { className: styles.secondaryHeaderBtn, onClick: () => setAiProfileMergeState(null), children: "Cancel" })] }))] })] }) }))] })), aiProfileMergeStatus && (_jsxs("div", { className: `${aiProfileMergeStatus.type === 'success' ? styles.successMessage : styles.errorMessage} ${styles.marginTop12}`, children: [aiProfileMergeStatus.type === 'success' ? _jsx(Check, { size: 14 }) : _jsx(AlertTriangle, { size: 14 }), aiProfileMergeStatus.message] }))] }) }) }) }));
+    const selectedProfileDataGroups = useMemo(() => {
+        if (!selectedGroup)
+            return { attributes: [], dates: [] };
+        const profile = selectedGroup.primaryProfile;
+        const formatRowValue = (value) => value || 'Not set';
+        return {
+            attributes: [
+                { label: 'Category', value: profile.surfaceType ? formatAiProfileSurfaceTypeLabel(profile.surfaceType) : '' },
+                { label: 'Connection', value: profile.seatScope ? formatAiProfileSeatScopeLabel(profile.seatScope) : '' },
+                { label: 'Provider', value: profile.provider || '' },
+                { label: 'Model', value: profile.model || '' },
+            ].map((row) => ({ ...row, value: formatRowValue(row.value) })),
+            dates: [
+                { label: 'Status', value: profile.archivedAt ? 'Retired' : 'Active' },
+                { label: 'Recruited', value: formatTimestamp(profile.createdAt) },
+                { label: 'Last updated', value: formatTimestamp(profile.updatedAt) },
+                { label: 'Last active', value: formatTimestamp(profile.lastActiveAt) },
+            ].map((row) => ({ ...row, value: formatRowValue(row.value) })),
+        };
+    }, [selectedGroup]);
+    const selectedGroupHasDuplicates = !!selectedGroup && selectedGroup.profiles.length > 1;
+    const shouldPromptForCloudLogin = cloudAuthConfigured && authSessionResolved && !isAuthenticated;
+    const displayedSeatUsage = cloudAuthConfigured
+        ? parseAiProfileSeatUsage(cloudAiProfileSeatUsage)
+        : localAiProfileSeatUsage;
+    const cloudAgentSeatLabel = shouldPromptForCloudLogin
+        ? 'Log into account for Cloud agents'
+        : displayedSeatUsage
+            ? `${displayedSeatUsage.used}/${displayedSeatUsage.limit === null ? 'Unlimited' : displayedSeatUsage.limit}`
+            : null;
+    const showAgentTray = !!mcpSettingsNode;
+    return (_jsxs("section", { className: `${styles.agentsModuleRoot} ${showAgentTray ? styles.agentsModuleWithTray : ''} ${showAgentTray && agentTrayOpen ? styles.agentsModuleTrayOpen : ''}`.trim(), children: [showAgentTray && (_jsxs("aside", { className: `${styles.agentTrayPanel} ${agentTrayOpen ? styles.agentTrayPanelOpen : ''}`.trim(), "aria-label": "Agent MCP settings tray", "aria-hidden": !agentTrayOpen, children: [_jsxs("div", { className: styles.agentTrayHeader, children: [_jsxs("span", { className: styles.agentTrayTitle, children: [_jsx(Plug, { size: 14 }), "MCP Settings"] }), _jsx("button", { type: "button", className: "tf-control-icon", onClick: onCloseAgentTray, title: "Collapse agent tray", "aria-label": "Collapse agent tray", children: _jsx(ChevronLeft, { size: 16 }) })] }), _jsx("div", { className: `${styles.agentTrayContent} tf-scrollbar tf-scrollbar--track-transparent`, children: _jsx("div", { className: styles.agentTrayContentInner, children: mcpSettingsNode }) })] })), _jsx("div", { className: styles.agentsModuleContent, children: _jsx("div", { className: `${styles.settingGroup} ${styles.agentsModuleGroup}`, children: _jsxs("div", { children: [_jsx("h4", { className: styles.settingSubTitle, children: "Registered AI Profiles" }), _jsx("p", { className: `${styles.settingsHint} ${styles.marginBottom12}`, children: "AI agents register profiles when connecting via MCP. Merge duplicates created when a token was lost, or remove inactive profiles from the active roster to free seats while preserving history." }), cloudAgentSeatLabel && (_jsx("div", { className: styles.aiProfileSeatSummary, children: shouldPromptForCloudLogin
+                                    ? cloudAgentSeatLabel
+                                    : `Registered Cloud Agents: ${cloudAgentSeatLabel}` })), aiProfilesLoading && (_jsxs("div", { className: styles.settingsHint, children: [_jsx(Loader2, { size: 13, className: styles.spinner }), " Loading profiles\u2026"] })), !aiProfilesLoading && aiProfiles.length === 0 && (_jsx("div", { className: styles.settingsHint, children: "No AI profiles registered yet." })), !aiProfilesLoading && groupedProfilesBySurfaceType.length > 0 && (_jsxs("div", { className: styles.aiProfilesExplorer, children: [_jsx("div", { className: `${styles.aiProfilesListPane} tf-scrollbar tf-scrollbar--track-transparent`, children: _jsx("div", { className: styles.aiProfilesList, children: groupedProfilesBySurfaceType.map((section) => (_jsxs("div", { className: styles.aiProfilesSection, children: [_jsx("div", { className: styles.aiProfilesSectionHeader, children: section.label }), section.groups.map((group) => {
+                                                        const isSelected = selectedGroup?.groupId === group.groupId;
+                                                        const primary = group.primaryProfile;
+                                                        return (_jsxs("div", { role: "button", tabIndex: 0, className: `${styles.aiProfileGroup} ${group.profiles.length > 1 ? styles.aiProfileGroupDuplicate : ''} ${isSelected ? styles.aiProfileGroupSelected : ''}`, onClick: () => setSelectedGroupId(group.groupId), onKeyDown: (event) => {
+                                                                if (event.key !== 'Enter' && event.key !== ' ')
+                                                                    return;
+                                                                event.preventDefault();
+                                                                setSelectedGroupId(group.groupId);
+                                                            }, "aria-pressed": isSelected, children: [renderAiProfileSeatScopeIcon(primary.seatScope), _jsxs("div", { className: styles.aiProfileGroupHeader, children: [_jsx("span", { className: styles.aiProfileGroupAvatar, style: { color: primary.color }, children: primary.avatarUrl ? (_jsx("img", { src: getAiProfileAvatarDisplayUrl(primary), alt: "" })) : (_jsx(Bot, { size: 22 })) }), _jsxs("span", { className: styles.aiProfileGroupIdentity, children: [_jsx("span", { className: styles.aiProfileName, children: primary.name }), _jsxs("span", { className: styles.aiProfileHandle, children: ["@", primary.username] }), _jsx("span", { className: styles.aiProfileRole, children: primary.role || 'Role not set' }), group.profiles.length > 1 && (_jsxs("span", { className: styles.aiProfileDuplicateBadge, children: [_jsx(AlertTriangle, { size: 11 }), " ", formatDuplicateCount(group.profiles.length)] }))] })] })] }, group.groupId));
+                                                    })] }, section.section))) }) }), selectedGroup && (_jsx("div", { className: styles.aiProfileDetailPane, children: _jsxs("div", { className: styles.aiProfileDetailCard, children: [renderAiProfileSeatScopeIcon(selectedGroup.primaryProfile.seatScope, { variant: 'detail' }), _jsxs("div", { className: styles.aiProfileDetailHero, children: [_jsx(EditableAvatarButton, { label: "Edit AI profile photo", imageUrl: getAiProfileAvatarDisplayUrl(selectedGroup.primaryProfile), fallback: _jsx(Bot, { size: 38 }), accentColor: selectedGroup.primaryProfile.color, size: 176, width: 153, height: 207, radius: 6, editBadgeSize: 28, editIconSize: 14, className: styles.aiProfileDetailAvatar, onClick: () => {
+                                                                setAiAvatarError(null);
+                                                                setAvatarEditorProfileId(selectedGroup.primaryProfile.id);
+                                                            } }), _jsxs("div", { className: styles.aiProfileDetailHeading, children: [_jsx("div", { className: styles.aiProfileDetailTitleRow, children: _jsx("h5", { className: styles.aiProfileDetailTitle, children: selectedGroup.primaryProfile.name }) }), _jsxs("div", { className: styles.aiProfileDetailMetaRow, children: [_jsxs("span", { className: styles.aiProfileDetailHandle, children: ["@", selectedGroup.primaryProfile.username] }), selectedGroup.profiles.length > 1 && (_jsxs("span", { className: styles.aiProfileDetailLinkedCount, children: [selectedGroup.profiles.length, " linked"] }))] }), _jsxs("div", { className: styles.aiProfileDetailRole, children: ["Role: ", selectedGroup.primaryProfile.role || 'Not set'] }), selectedGroup.primaryProfile.description && (_jsx("div", { className: styles.aiProfileDetailDescription, children: selectedGroup.primaryProfile.description })), _jsxs("div", { className: styles.aiProfileSignatureColor, children: [_jsx("span", { children: "Signature color" }), _jsx("span", { className: styles.aiProfileSignatureSwatch, style: { backgroundColor: selectedGroup.primaryProfile.color }, "aria-hidden": "true" }), _jsx("span", { children: selectedGroup.primaryProfile.color })] })] })] }), _jsxs("div", { className: styles.aiProfileDetailDataList, children: [_jsx("div", { className: styles.aiProfileDetailDataGroup, children: selectedProfileDataGroups.attributes.map((row) => (_jsxs("div", { className: styles.aiProfileDetailDataRow, children: [_jsx("span", { className: styles.aiProfileDetailDataLabel, children: row.label }), row.label === 'Category' ? (_jsx("span", { className: styles.aiProfileDetailDataValue, children: _jsxs("select", { className: styles.aiProfileStatusSelect, "aria-label": "Agent category", value: selectedGroup.primaryProfile.surfaceType ?? '', disabled: aiProfileCategoryBusy, onChange: (event) => {
+                                                                                void handleCategoryChange(selectedGroup, event.target.value);
+                                                                            }, children: [_jsx("option", { value: "", children: "Unclassified" }), AI_PROFILE_SURFACE_TYPES.map((surfaceType) => (_jsx("option", { value: surfaceType, children: formatAiProfileSurfaceTypeLabel(surfaceType) }, surfaceType)))] }) })) : (_jsx("span", { className: styles.aiProfileDetailDataValue, children: row.value }))] }, row.label))) }), _jsx("div", { className: `${styles.aiProfileDetailDataGroup} ${styles.aiProfileDetailDateGroup}`, children: selectedProfileDataGroups.dates.map((row) => (_jsxs("div", { className: styles.aiProfileDetailDataRow, children: [_jsx("span", { className: styles.aiProfileDetailDataLabel, children: row.label }), row.label === 'Status' ? (_jsx("span", { className: styles.aiProfileDetailDataValue, children: _jsxs("select", { className: styles.aiProfileStatusSelect, "aria-label": "Agent roster status", value: selectedGroup.primaryProfile.archivedAt ? 'retired' : 'active', onChange: (event) => {
+                                                                                if (event.target.value === 'retire') {
+                                                                                    void handleArchive(selectedGroup.primaryProfile);
+                                                                                }
+                                                                            }, children: [_jsx("option", { value: "active", children: "Active" }), selectedGroup.primaryProfile.archivedAt ? (_jsx("option", { value: "retired", children: "Retired" })) : (_jsx("option", { value: "retire", children: "Retire from roster" }))] }) })) : (_jsx("span", { className: styles.aiProfileDetailDataValue, children: row.value }))] }, row.label))) })] }), aiProfileCategoryError?.profileId === selectedGroup.primaryProfile.id && (_jsxs("div", { className: styles.aiProfileInlineError, role: "alert", children: [_jsx(AlertTriangle, { size: 12 }), _jsx("span", { children: aiProfileCategoryError.message })] })), selectedGroupHasDuplicates ? (_jsxs("div", { className: styles.aiProfileInstanceSection, children: [_jsxs("div", { className: styles.aiProfileInstanceSectionHeader, children: [_jsx("span", { children: "Profile instances" }), _jsx("span", { className: styles.settingsHint, children: "Choose a keeper here if duplicates need to be merged." })] }), _jsx("div", { className: styles.aiProfileInstanceList, children: selectedGroup.profiles.map((profile) => (_jsxs("div", { className: styles.aiProfileInstanceCard, children: [_jsxs("div", { className: styles.aiProfileInstanceTopRow, children: [_jsxs("div", { children: [_jsxs("div", { className: styles.aiProfileInstanceName, children: ["@", profile.username] }), _jsx("div", { className: styles.aiProfileIdChip, children: profile.id })] }), aiProfileMergeState?.keepId === profile.id && (_jsx("span", { className: styles.aiProfileKeepBadge, children: "Keeping" }))] }), _jsxs("div", { className: styles.aiProfileInstanceMeta, children: [_jsxs("span", { children: ["Created ", formatTimestamp(profile.createdAt)] }), _jsxs("span", { children: ["Updated ", formatTimestamp(profile.updatedAt)] })] }), aiProfileMergeState?.keepId !== profile.id && (_jsx("button", { className: styles.secondaryHeaderBtn, title: "Keep this profile, merge others into it", onClick: () => {
+                                                                            const otherId = selectedGroup.profiles.find((candidate) => candidate.id !== profile.id)?.id;
+                                                                            if (otherId)
+                                                                                setAiProfileMergeState({ keepId: profile.id, mergeId: otherId });
+                                                                        }, children: "Keep this" })), aiProfileArchiveError?.profileId === profile.id && (_jsxs("div", { className: styles.aiProfileInlineError, role: "alert", children: [_jsx(AlertTriangle, { size: 12 }), _jsx("span", { children: aiProfileArchiveError.message })] })), _jsx("button", { className: styles.aiProfileDangerTextButton, title: "Remove this profile from the active roster", onClick: () => { void handleArchive(profile); }, children: "Remove from roster" })] }, profile.id))) }), aiProfileMergeState && selectedGroup.profiles.some((profile) => profile.id === aiProfileMergeState.keepId) && (_jsxs("div", { className: styles.aiProfileMergeActions, children: [_jsx("button", { className: styles.dangerBtn, onClick: () => { void handleMerge(aiProfileMergeState.keepId, aiProfileMergeState.mergeId); }, children: "Merge duplicates" }), _jsx("button", { className: styles.secondaryHeaderBtn, onClick: () => setAiProfileMergeState(null), children: "Cancel" })] }))] })) : (_jsxs("div", { className: styles.aiProfileIdFooter, children: [_jsx("div", { className: styles.aiProfileIdFooterValue, children: selectedGroup.primaryProfile.id }), aiProfileArchiveError?.profileId === selectedGroup.primaryProfile.id && (_jsxs("div", { className: styles.aiProfileInlineError, role: "alert", children: [_jsx(AlertTriangle, { size: 12 }), _jsx("span", { children: aiProfileArchiveError.message })] }))] }))] }) }))] })), aiProfileMergeStatus && (_jsxs("div", { className: `${aiProfileMergeStatus.type === 'success' ? styles.successMessage : styles.errorMessage} ${styles.marginTop12}`, children: [aiProfileMergeStatus.type === 'success' ? _jsx(Check, { size: 14 }) : _jsx(AlertTriangle, { size: 14 }), aiProfileMergeStatus.message] }))] }) }) }), _jsx(AvatarImageManagerModal, { isOpen: !!avatarEditorProfile, theme: "dark", title: "Edit AI Profile Photo", currentImageUrl: getAiProfileAvatarDisplayUrl(avatarEditorProfile), editorImageUrl: getAiProfileAvatarSourceUrl(avatarEditorProfile), fallbackInitial: (avatarEditorProfile?.name || 'AI').charAt(0).toUpperCase(), accept: "image/png,image/jpeg,image/webp,image/gif", busy: aiAvatarBusy, hasPendingImage: false, canRemove: !!avatarEditorProfile?.avatarUrl, error: aiAvatarError, notice: null, onClose: () => {
+                    if (aiAvatarBusy)
+                        return;
+                    setAvatarEditorProfileId(null);
+                    setAiAvatarError(null);
+                }, onApplyImage: handleAiProfileAvatarSelected, onRemoveImage: handleAiProfileAvatarRemove })] }));
 }