@taskforcehq/taskforce 0.3.306 → 0.3.308

package/dist/components/features/AgentsModule.js

@@ -1,12 +1,37 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useState } from 'react';
-import { AlertTriangle, Bot, Check, Cloud, LaptopMinimal, Loader2 } from 'lucide-react';
+import { AlertTriangle, Bot, Check, ChevronLeft, Cloud, LaptopMinimal, Loader2, Plug } from 'lucide-react';
 import styles from '../../Taskforce.module.css';
 import { EditableAvatarButton } from '../ui/EditableAvatarButton';
 import { AvatarImageManagerModal } from '../views/standalone/modals/AvatarImageManagerModal';
 import { prepareAvatarUploadFile } from '../../utils/avatarUpload';
-import { AI_PROFILE_SURFACE_TYPE_SECTION_ORDER, formatAiProfileSurfaceTypeLabel, formatAiProfileSurfaceTypeSectionLabel, getAiProfileSurfaceTypeSection, parseAiProfileSurfaceType } from '../../shared/aiProfileSurfaceType.js';
+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;
@@ -34,13 +59,15 @@ function renderAiProfileSeatScopeIcon(seatScope, options) {
     }
     return null;
 }
-export function AgentsModule({ workspaceId, cloudAuthConfigured = false, authSessionResolved = false, isAuthenticated = false, cloudAiProfileSeatUsage = 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);
@@ -50,7 +77,7 @@ export function AgentsModule({ workspaceId, cloudAuthConfigured = false, authSes
             return;
         setAiProfilesLoading(true);
         try {
-            const rosterUrl = `/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',
             });
@@ -69,6 +96,8 @@ export function AgentsModule({ workspaceId, cloudAuthConfigured = false, authSes
                     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,
@@ -87,6 +116,9 @@ export function AgentsModule({ workspaceId, cloudAuthConfigured = false, authSes
             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);
@@ -102,7 +134,7 @@ export function AgentsModule({ workspaceId, cloudAuthConfigured = false, authSes
             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);
@@ -116,7 +148,7 @@ export function AgentsModule({ workspaceId, cloudAuthConfigured = false, authSes
                 section,
                 sectionLabel: formatAiProfileSurfaceTypeSectionLabel(section),
                 profiles,
-                primaryProfile: profiles[0]
+                primaryProfile: selectAiProfileGroupPrimary(profiles)
             }))
         }))
             .filter((entry) => entry.groups.length > 0);
@@ -152,6 +184,7 @@ export function AgentsModule({ workspaceId, cloudAuthConfigured = false, authSes
             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.' });
@@ -183,6 +216,7 @@ export function AgentsModule({ workspaceId, cloudAuthConfigured = false, authSes
             }
             setAiProfileMergeStatus({ type: 'success', message: 'AI profile removed from active roster.' });
             await loadAiProfiles();
+            dispatchTaskforceAiProfilesMutated({ workspaceId, profileId: profile.id, reason: 'archive' });
         }
         catch {
             setAiProfileArchiveError({
@@ -191,6 +225,61 @@ export function AgentsModule({ workspaceId, cloudAuthConfigured = false, authSes
             });
         }
     };
+    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 || ''));
@@ -206,46 +295,60 @@ export function AgentsModule({ workspaceId, cloudAuthConfigured = false, authSes
                 ...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 updateAiProfileAvatar = async (profileId, avatarUrl, avatarSourceUrl) => {
-        const res = await fetch('/api/taskforce/workspace/ai-profiles/avatar', {
+    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({
-                profileId,
-                avatarUrl,
-                ...(avatarSourceUrl !== undefined ? { avatarSourceUrl } : {})
-            }),
+            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 uploadAiProfileAvatarFile = async (file, profile, kind) => {
-        const dataUrl = await fileToDataUrl(file);
-        const uploadRes = await fetch('/api/taskforce/context-upload', {
+    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({
-                workspaceId,
-                file: dataUrl,
-                originalName: `${kind}-${file.name}`,
-                folderPath: `ai-profiles/${profile.id}/avatar`
+                profileId,
+                avatarUrl: null,
+                avatarSourceUrl: null
             })
         });
-        const uploadData = await uploadRes.json().catch(() => ({}));
-        const avatarUrl = typeof uploadData?.path === 'string' ? uploadData.path : '';
-        if (!uploadRes.ok || !avatarUrl) {
-            throw new Error(String(uploadData?.error || 'Failed to upload AI profile photo.'));
+        const data = await res.json().catch(() => ({}));
+        if (!res.ok || !data?.profile) {
+            throw new Error(String(data?.error || 'Failed to update AI profile avatar.'));
         }
-        return avatarUrl;
+        applyAiProfileAvatarUpdate(data.profile);
+        dispatchTaskforceAiProfilesMutated({ workspaceId, profileId, reason: 'avatar' });
     };
     const handleAiProfileAvatarSelected = async (file, sourceFile) => {
         if (!avatarEditorProfile)
@@ -264,8 +367,7 @@ export function AgentsModule({ workspaceId, cloudAuthConfigured = false, authSes
                     : 'AI profile photo must be 5 MB or smaller.');
             }
             const uploadFile = preparedAvatar.file;
-            const avatarUrl = await uploadAiProfileAvatarFile(uploadFile, avatarEditorProfile, 'cropped');
-            let avatarSourceUrl;
+            let preparedSourceFile = null;
             if (sourceFile) {
                 const preparedSource = await prepareAvatarUploadFile(sourceFile, { maxBytes: 5 * 1024 * 1024 });
                 if (preparedSource.exceededLimit) {
@@ -273,11 +375,9 @@ export function AgentsModule({ workspaceId, cloudAuthConfigured = false, authSes
                         ? 'Animated GIF AI profile photos must be 5 MB or smaller.'
                         : 'AI profile source photo must be 5 MB or smaller.');
                 }
-                avatarSourceUrl = sourceFile.type === 'image/gif'
-                    ? avatarUrl
-                    : await uploadAiProfileAvatarFile(preparedSource.file, avatarEditorProfile, 'source');
+                preparedSourceFile = preparedSource.file;
             }
-            await updateAiProfileAvatar(avatarEditorProfile.id, avatarUrl, avatarSourceUrl);
+            await uploadAiProfileAvatar(avatarEditorProfile.id, uploadFile, preparedSourceFile);
             return true;
         }
         catch (error) {
@@ -294,7 +394,7 @@ export function AgentsModule({ workspaceId, cloudAuthConfigured = false, authSes
         setAiAvatarBusy(true);
         setAiAvatarError(null);
         try {
-            await updateAiProfileAvatar(avatarEditorProfile.id, null, null);
+            await clearAiProfileAvatar(avatarEditorProfile.id);
         }
         catch (error) {
             setAiAvatarError(String(error?.message || 'Failed to remove AI profile photo.'));
@@ -328,10 +428,10 @@ export function AgentsModule({ workspaceId, cloudAuthConfigured = false, authSes
                 { 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) },
-                { label: 'Status', value: profile.archivedAt ? 'Retired' : 'Active' },
             ].map((row) => ({ ...row, value: formatRowValue(row.value) })),
         };
     }, [selectedGroup]);
@@ -345,7 +445,8 @@ export function AgentsModule({ workspaceId, cloudAuthConfigured = false, authSes
         : displayedSeatUsage
             ? `${displayedSeatUsage.used}/${displayedSeatUsage.limit === null ? 'Unlimited' : displayedSeatUsage.limit}`
             : null;
-    return (_jsxs("section", { className: styles.agentsModuleRoot, children: [_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
+    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;
@@ -355,19 +456,21 @@ export function AgentsModule({ workspaceId, cloudAuthConfigured = false, authSes
                                                                     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: primary.avatarUrl, 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 }), " ", group.profiles.length, " duplicates"] }))] })] })] }, 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: selectedGroup.primaryProfile.avatarUrl, 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: () => {
+                                                            }, "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.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 }), _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) => {
+                                                            } }), _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))) })] }), 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: () => {
+                                                                            }, 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: avatarEditorProfile?.avatarUrl || '', editorImageUrl: avatarEditorProfile?.avatarSourceUrl || '', 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: () => {
+                                                                        }, 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);