Move agent management into profile sidebar

Author: klopez4212

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

@@ -1,18 +1,76 @@
 import * as React from "react";
 
+import { useAppNavigation } from "@/app/navigation/useAppNavigation";
+import { useOpenDmMutation } from "@/features/channels/hooks";
+import { UserProfilePanel } from "@/features/profile/ui/UserProfilePanel";
+import { useIdentityQuery } from "@/shared/api/hooks";
+import type { AgentPersona } from "@/shared/api/types";
+import { ProfilePanelProvider } from "@/shared/context/ProfilePanelContext";
+import { useThreadPanelWidth } from "@/shared/hooks/useThreadPanelWidth";
 import { ViewLoadingFallback } from "@/shared/ui/ViewLoadingFallback";
 
 const AgentsView = React.lazy(async () => {
   const module = await import("@/features/agents/ui/AgentsView");
   return { default: module.AgentsView };
 });
 
+type ProfilePanelTarget =
+  | { kind: "pubkey"; pubkey: string }
+  | { kind: "persona"; persona: AgentPersona };
+
 export function AgentsScreen() {
+  const identityQuery = useIdentityQuery();
+  const [profilePanelTarget, setProfilePanelTarget] =
+    React.useState<ProfilePanelTarget | null>(null);
+  const threadPanelWidth = useThreadPanelWidth();
+  const openDmMutation = useOpenDmMutation();
+  const { goChannel } = useAppNavigation();
+
+  const handleOpenDm = React.useCallback(
+    async (pubkeys: string[]) => {
+      const dm = await openDmMutation.mutateAsync({ pubkeys });
+      await goChannel(dm.id);
+    },
+    [goChannel, openDmMutation],
+  );
+
   return (
-    <div className="relative flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden">
-      <React.Suspense fallback={<ViewLoadingFallback kind="agents" />}>
-        <AgentsView />
-      </React.Suspense>
-    </div>
+    <ProfilePanelProvider
+      onOpenPersonaProfilePanel={(persona) =>
+        setProfilePanelTarget({ kind: "persona", persona })
+      }
+      onOpenProfilePanel={(pubkey) =>
+        setProfilePanelTarget({ kind: "pubkey", pubkey })
+      }
+    >
+      <div className="relative flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden">
+        <div className="flex min-h-0 min-w-0 flex-1 flex-row overflow-hidden">
+          <React.Suspense fallback={<ViewLoadingFallback kind="agents" />}>
+            <AgentsView />
+          </React.Suspense>
+          {profilePanelTarget ? (
+            <UserProfilePanel
+              canResetWidth={threadPanelWidth.canReset}
+              currentPubkey={identityQuery.data?.pubkey}
+              onClose={() => setProfilePanelTarget(null)}
+              onOpenDm={handleOpenDm}
+              onResetWidth={threadPanelWidth.onResetWidth}
+              onResizeStart={threadPanelWidth.onResizeStart}
+              persona={
+                profilePanelTarget.kind === "persona"
+                  ? profilePanelTarget.persona
+                  : undefined
+              }
+              pubkey={
+                profilePanelTarget.kind === "pubkey"
+                  ? profilePanelTarget.pubkey
+                  : undefined
+              }
+              widthPx={threadPanelWidth.widthPx}
+            />
+          ) : null}
+        </div>
+      </div>
+    </ProfilePanelProvider>
   );
 }

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

@@ -19,8 +19,10 @@ import { UnifiedAgentsSection } from "./UnifiedAgentsSection";
 import { useManagedAgentActions } from "./useManagedAgentActions";
 import { usePersonaActions } from "./usePersonaActions";
 import { useTeamActions } from "./useTeamActions";
+import { useProfilePanel } from "@/shared/context/ProfilePanelContext";
 
 export function AgentsView() {
+  const { openPersonaProfilePanel, openProfilePanel } = useProfilePanel();
   const agents = useManagedAgentActions();
   const personas = usePersonaActions();
   const teamActions = useTeamActions(
@@ -34,14 +36,6 @@ export function AgentsView() {
     },
   );
 
-  const isActionPending =
-    agents.isPending ||
-    personas.isPending ||
-    teamActions.exportTeamJsonMutation.isPending ||
-    teamActions.createTeamMutation.isPending ||
-    teamActions.updateTeamMutation.isPending ||
-    teamActions.deleteTeamMutation.isPending;
-
   return (
     <>
       <div
@@ -56,56 +50,21 @@ export function AgentsView() {
               actionErrorMessage={agents.actionErrorMessage}
               actionNoticeMessage={agents.actionNoticeMessage}
               agents={agents.managedAgents}
-              channelIdToName={agents.channelIdToName}
-              channelsByPubkey={agents.channelsByPubkey}
               agentsError={
                 agents.managedAgentsQuery.error instanceof Error
                   ? agents.managedAgentsQuery.error
                   : null
               }
-              isActionPending={isActionPending}
               isAgentsLoading={agents.managedAgentsQuery.isLoading}
-              logContent={agents.managedAgentLogQuery.data?.content ?? null}
-              logError={
-                agents.managedAgentLogQuery.error instanceof Error
-                  ? agents.managedAgentLogQuery.error
-                  : null
-              }
-              logLoading={agents.managedAgentLogQuery.isLoading}
-              personaLabelsById={personas.personaLabelsById}
-              presenceLoaded={agents.managedPresenceQuery.isSuccess}
-              presenceLookup={agents.managedPresenceQuery.data ?? {}}
-              onAddToChannel={(agent) => {
-                agents.setActionNoticeMessage(null);
-                agents.setActionErrorMessage(null);
-                agents.setAgentToAddToChannel(agent);
-              }}
-              onBulkRemoveStopped={() => {
-                void agents.handleBulkRemoveStopped();
-              }}
-              onBulkStopRunning={() => {
-                void agents.handleBulkStopRunning();
-              }}
               onCreateAgent={() => {
                 agents.setIsCreateOpen(true);
               }}
-              onDeleteAgent={(pubkey) => {
-                void agents.handleDelete(pubkey);
-              }}
-              onSelectLogAgent={agents.setLogAgentPubkey}
-              onStartAgent={(pubkey) => {
-                void agents.handleStart(pubkey);
-              }}
-              onStopAgent={(pubkey) => {
-                void agents.handleStop(pubkey);
+              onOpenAgentProfile={(pubkey) => {
+                openProfilePanel?.(pubkey);
               }}
-              onToggleStartOnAppLaunch={(pubkey, startOnAppLaunch) => {
-                void agents.handleToggleStartOnAppLaunch(
-                  pubkey,
-                  startOnAppLaunch,
-                );
+              onOpenPersonaProfile={(persona) => {
+                openPersonaProfilePanel?.(persona);
               }}
-              selectedLogAgentPubkey={agents.logAgentPubkey}
               // Persona props
               canChooseCatalog={personas.catalogPersonas.length > 0}
               personas={personas.libraryPersonas}
@@ -128,13 +87,6 @@ export function AgentsView() {
               isPersonasPending={personas.isPending}
               onCreatePersona={personas.openCreate}
               onChooseCatalog={personas.openCatalog}
-              onDuplicatePersona={personas.openDuplicate}
-              onEditPersona={personas.openEdit}
-              onExportPersona={personas.handleExport}
-              onDeactivatePersona={(persona) => {
-                void personas.handleSetActive(persona, false, "library");
-              }}
-              onDeletePersona={personas.openDelete}
               onImportPersonaFile={(fileBytes, fileName) => {
                 void personas.handleImportFile(fileBytes, fileName);
               }}
@@ -157,10 +109,12 @@ export function AgentsView() {
               onDuplicate={teamActions.openDuplicateDialog}
               onEdit={teamActions.openEditDialog}
               onExport={teamActions.handleExportTeam}
-              onImportFile={teamActions.handleImportFile}
-              onInstallFromDirectory={teamActions.handleInstallFromDirectory}
               onSync={teamActions.handleSyncTeam}
               onRevealInFinder={teamActions.handleRevealInFinder}
+              onImportFile={(fileBytes, fileName) => {
+                void teamActions.handleImportFile(fileBytes, fileName);
+              }}
+              onInstallFromDirectory={teamActions.handleInstallFromDirectory}
               onAddToChannel={teamActions.setTeamToAddToChannel}
               personas={personas.libraryPersonas}
               teams={teamActions.teams}
@@ -219,10 +173,7 @@ export function AgentsView() {
         isImportPending={
           personas.personaImportActions.isApplyingPersonaImportUpdate
         }
-        isPending={
-          personas.createPersonaMutation.isPending ||
-          personas.updatePersonaMutation.isPending
-        }
+        isPending={personas.isPending}
         runtimes={personas.acpRuntimesQuery.data ?? []}
         runtimesLoading={personas.acpRuntimesQuery.isLoading}
         onImportUpdateFile={