Add agent catalog modal

Author: klopez4212

desktop/src-tauri/src/managed_agents/personas.rs

@@ -33,12 +33,20 @@ fn merge_personas_adds_missing_built_ins() {
     assert!(changed);
     assert_eq!(records.len(), BUILT_IN_PERSONAS.len());
     assert!(records.iter().all(|record| record.is_builtin));
-    assert!(records.iter().all(|record| record.is_active));
     let display_names: Vec<&str> = records
         .iter()
         .map(|record| record.display_name.as_str())
         .collect();
-    assert_eq!(display_names, vec!["Fizz"]);
+    assert_eq!(
+        display_names,
+        vec!["Fizz", "Angelica", "Bart", "Chucky", "Marge", "Ned", "Tommy"]
+    );
+    let active_ids: Vec<&str> = records
+        .iter()
+        .filter(|record| record.is_active)
+        .map(|record| record.id.as_str())
+        .collect();
+    assert_eq!(active_ids, vec!["builtin:fizz"]);
 }
 
 #[test]
@@ -201,7 +209,7 @@ fn ensure_persona_is_active_rejects_inactive_personas() {
 
     assert_eq!(
         err,
-        "Fizz is not in My Agents. Choose it from Persona Catalog first."
+        "Fizz is not in My Agents. Choose it from Agent Catalog first."
     );
 }
 

desktop/src-tauri/src/managed_agents/personas/tests.rs

@@ -4,6 +4,7 @@ import test from "node:test";
 import {
   getCatalogPersonas,
   getCatalogSelectionState,
+  getLibraryPersonas,
   getPersonaLabelsById,
   getPersonaLibraryState,
   isCatalogPersonaSelected,
@@ -80,7 +81,7 @@ test("getCatalogPersonas keeps chooser order stable when selection changes", ()
   );
 });
 
-test("isCatalogPersonaSelected only treats active built-ins as selected", () => {
+test("isCatalogPersonaSelected treats active catalog personas as selected", () => {
   assert.equal(
     isCatalogPersonaSelected(
       createPersona("builtin:fizz", "Fizz", {
@@ -101,7 +102,7 @@ test("isCatalogPersonaSelected only treats active built-ins as selected", () =>
   );
   assert.equal(
     isCatalogPersonaSelected(createPersona("custom:builder", "Builder")),
-    false,
+    true,
   );
 });
 
@@ -135,3 +136,21 @@ test("getPersonaLibraryState keeps the working library and full catalog in one p
   );
   assert.equal(state.personaLabelsById["builtin:fizz"], "Fizz");
 });
+
+test("getLibraryPersonas keeps active custom personas even when catalog entries are similar", () => {
+  const avatarUrl = "https://example.test/marge.png";
+  const personas = [
+    createPersona("builtin:marge", "Marge", {
+      avatarUrl,
+      isBuiltIn: true,
+      isActive: false,
+    }),
+    createPersona("custom:marge", "Marge", { avatarUrl, isActive: true }),
+    createPersona("custom:builder", "Builder", { isActive: true }),
+  ];
+
+  assert.deepEqual(
+    getLibraryPersonas(personas).map((persona) => persona.id),
+    ["custom:marge", "custom:builder"],
+  );
+});

desktop/src/features/agents/lib/catalog.test.mjs

@@ -20,20 +20,37 @@ export function getActivePersonas(personas: readonly AgentPersona[]) {
   return personas.filter(isPersonaActive);
 }
 
-export function getCatalogPersonas(personas: readonly AgentPersona[]) {
+export function getLibraryPersonas(personas: readonly AgentPersona[]) {
+  return getActivePersonas(personas);
+}
+
+export function isPersonaVisibleInCatalog(
+  persona: AgentPersona,
+  sharedCatalogPersonaIds: ReadonlySet<string> = new Set(),
+) {
+  return persona.isBuiltIn || sharedCatalogPersonaIds.has(persona.id);
+}
+
+export function getCatalogPersonas(
+  personas: readonly AgentPersona[],
+  sharedCatalogPersonaIds: ReadonlySet<string> = new Set(),
+) {
   return personas
-    .filter((persona) => persona.isBuiltIn)
+    .filter((persona) =>
+      isPersonaVisibleInCatalog(persona, sharedCatalogPersonaIds),
+    )
     .sort((left, right) => left.displayName.localeCompare(right.displayName));
 }
 
 export function isCatalogPersonaSelected(persona: AgentPersona) {
-  return persona.isBuiltIn && persona.isActive;
+  return persona.isActive;
 }
 
 export function getCatalogSelectionState(
   personas: readonly AgentPersona[],
+  sharedCatalogPersonaIds: ReadonlySet<string> = new Set(),
 ): CatalogSelectionState {
-  const catalogPersonas = getCatalogPersonas(personas);
+  const catalogPersonas = getCatalogPersonas(personas, sharedCatalogPersonaIds);
 
   return {
     catalogPersonas,
@@ -52,9 +69,13 @@ export function getPersonaLabelsById(personas: readonly AgentPersona[]) {
 
 export function getPersonaLibraryState(
   personas: readonly AgentPersona[],
+  sharedCatalogPersonaIds: ReadonlySet<string> = new Set(),
 ): PersonaLibraryState {
-  const libraryPersonas = getActivePersonas(personas);
-  const { catalogPersonas } = getCatalogSelectionState(personas);
+  const libraryPersonas = getLibraryPersonas(personas);
+  const { catalogPersonas } = getCatalogSelectionState(
+    personas,
+    sharedCatalogPersonaIds,
+  );
 
   return {
     catalogPersonas,

desktop/src/features/agents/lib/catalog.ts

@@ -11,6 +11,7 @@ import { PersonaCatalogDialog } from "./PersonaCatalogDialog";
 import { PersonaDialog } from "./PersonaDialog";
 import { PersonaDeleteDialog } from "./PersonaDeleteDialog";
 import { PersonaImportUpdateDialog } from "./PersonaImportUpdateDialog";
+import { PersonaShareDialog } from "./PersonaShareDialog";
 import { RelayDirectorySection } from "./RelayDirectorySection";
 import { SecretRevealDialog } from "./SecretRevealDialog";
 import { TeamDeleteDialog } from "./TeamDeleteDialog";
@@ -137,8 +138,7 @@ export function AgentsView() {
               onCreatePersona={personas.openCreate}
               onChooseCatalog={personas.openCatalog}
               onDuplicatePersona={personas.openDuplicate}
-              onEditPersona={personas.openEdit}
-              onExportPersona={personas.handleExport}
+              onSharePersona={personas.openShare}
               onDeactivatePersona={(persona) => {
                 void personas.handleSetActive(persona, false, "library");
               }}
@@ -275,6 +275,35 @@ export function AgentsView() {
           persona={personas.personaToDelete}
         />
       ) : null}
+      {personas.personaToShare ? (
+        <PersonaShareDialog
+          isCatalogVisible={
+            personas.personaToShare.isBuiltIn ||
+            personas.sharedCatalogPersonaIdSet.has(personas.personaToShare.id)
+          }
+          isPending={personas.isPending}
+          onCatalogVisibilityChange={(visible) => {
+            if (personas.personaToShare) {
+              personas.setPersonaCatalogVisibility(
+                personas.personaToShare,
+                visible,
+              );
+            }
+          }}
+          onExport={() => {
+            if (personas.personaToShare) {
+              personas.handleExport(personas.personaToShare);
+            }
+          }}
+          onOpenChange={(open) => {
+            if (!open) {
+              personas.setPersonaToShare(null);
+            }
+          }}
+          open={personas.personaToShare !== null}
+          persona={personas.personaToShare}
+        />
+      ) : null}
       {personas.isCatalogDialogOpen ? (
         <PersonaCatalogDialog
           error={

desktop/src/features/agents/ui/AgentsView.tsx

@@ -1,4 +1,4 @@
-import { CopyPlus, Download, Ellipsis, Pencil, Trash2 } from "lucide-react";
+import { CopyPlus, Ellipsis, Share2, Trash2 } from "lucide-react";
 
 import type { AgentPersona } from "@/shared/api/types";
 import {
@@ -14,17 +14,15 @@ export function PersonaActionsMenu({
   isPending,
   persona,
   onDuplicate,
-  onEdit,
-  onExport,
+  onShare,
   onDeactivate,
   onDelete,
 }: {
   isActionPending: boolean;
   isPending: boolean;
   persona: AgentPersona;
   onDuplicate: (persona: AgentPersona) => void;
-  onEdit: (persona: AgentPersona) => void;
-  onExport: (persona: AgentPersona) => void;
+  onShare: (persona: AgentPersona) => void;
   onDeactivate: (persona: AgentPersona) => void;
   onDelete: (persona: AgentPersona) => void;
 }) {
@@ -45,34 +43,19 @@ export function PersonaActionsMenu({
         align="end"
         onCloseAutoFocus={(event) => event.preventDefault()}
       >
-        {!persona.isBuiltIn ? (
-          <DropdownMenuItem disabled={disabled} onClick={() => onEdit(persona)}>
-            <Pencil className="h-4 w-4" />
-            Edit
-          </DropdownMenuItem>
-        ) : null}
+        <DropdownMenuItem disabled={disabled} onClick={() => onShare(persona)}>
+          <Share2 className="h-4 w-4" />
+          Share
+        </DropdownMenuItem>
         <DropdownMenuItem
           disabled={disabled}
           onClick={() => onDuplicate(persona)}
         >
           <CopyPlus className="h-4 w-4" />
           Duplicate
         </DropdownMenuItem>
-        <DropdownMenuItem disabled={disabled} onClick={() => onExport(persona)}>
-          <Download className="h-4 w-4" />
-          Export
-        </DropdownMenuItem>
         <DropdownMenuSeparator />
-        {persona.isBuiltIn ? (
-          <DropdownMenuItem
-            className="text-destructive focus:text-destructive"
-            disabled={disabled}
-            onClick={() => onDeactivate(persona)}
-          >
-            <Trash2 className="h-4 w-4" />
-            Remove from My Agents
-          </DropdownMenuItem>
-        ) : persona.sourceTeam ? (
+        {persona.sourceTeam ? (
           <DropdownMenuItem disabled>
             <Trash2 className="h-4 w-4" />
             Managed by team
@@ -81,10 +64,17 @@ export function PersonaActionsMenu({
           <DropdownMenuItem
             className="text-destructive focus:text-destructive"
             disabled={disabled}
-            onClick={() => onDelete(persona)}
+            onClick={() => {
+              if (persona.isBuiltIn) {
+                onDeactivate(persona);
+                return;
+              }
+
+              onDelete(persona);
+            }}
           >
             <Trash2 className="h-4 w-4" />
-            Delete
+            Remove from My Agents
           </DropdownMenuItem>
         )}
       </DropdownMenuContent>

desktop/src/features/agents/ui/PersonaActionsMenu.tsx

@@ -0,0 +1,15 @@
+import { cn } from "@/shared/lib/cn";
+
+type PersonaAddedByProps = {
+  className?: string;
+};
+
+export function PersonaAddedBy({ className }: PersonaAddedByProps) {
+  return (
+    <p className={cn("truncate text-xs leading-tight", className)}>
+      <span className="text-muted-foreground/55">Added by</span>
+      {" "}
+      <span className="text-muted-foreground">You</span>
+    </p>
+  );
+}