feat(desktop): move agent management into profile sidebar (#1274)

Signed-off-by: Taylor Ho <taylorkmho@gmail.com>
Co-authored-by: klopez4212 <klopez4212@gmail.com>
Co-authored-by: npub14vtk7pvazqrq9639qu7e560wnqtl0d53ca4gjuvq6jzf3k2el23qqlwa7f <ab176f059d100602ea25073d9a69ee9817f7b691c76a897180d48498d959faa2@sprout-oss.stage.blox.sqprod.co>
Co-authored-by: Marge <marge@users.noreply.github.com>
Co-authored-by: npub1223z34hd7vtwc6qj4s7flsxkj644nlre2nthu7lrrmkumhu3xddsrx9r6w <52a228d6edf316ec6812ac3c9fc0d696ab59fc7954d77e7be31eedcddf91335b@sprout-oss.stage.blox.sqprod.co>

Author: 5 people

desktop/src/app/routes/agents.tsx

@@ -1,14 +1,43 @@
 import * as React from "react";
 import { createFileRoute } from "@tanstack/react-router";
 
+import {
+  parseProfilePanelTab,
+  parseProfilePanelView,
+  type ProfilePanelTab,
+  type ProfilePanelView,
+} from "@/features/profile/ui/UserProfilePanelUtils";
 import { ViewLoadingFallback } from "@/shared/ui/ViewLoadingFallback";
 
+type AgentsRouteSearch = {
+  profile?: string;
+  profilePersona?: string;
+  profileTab?: ProfilePanelTab;
+  profileView?: ProfilePanelView;
+};
+
+function nonEmptyString(value: unknown): string | undefined {
+  return typeof value === "string" && value.length > 0 ? value : undefined;
+}
+
+function validateAgentsSearch(
+  search: Record<string, unknown>,
+): AgentsRouteSearch {
+  return {
+    profile: nonEmptyString(search.profile),
+    profilePersona: nonEmptyString(search.profilePersona),
+    profileTab: parseProfilePanelTab(search.profileTab) ?? undefined,
+    profileView: parseProfilePanelView(search.profileView) ?? undefined,
+  };
+}
+
 const AgentsScreen = React.lazy(async () => {
   const module = await import("@/features/agents/ui/AgentsScreen");
   return { default: module.AgentsScreen };
 });
 
 export const Route = createFileRoute("/agents")({
+  validateSearch: validateAgentsSearch,
   component: AgentsRouteComponent,
 });
 

desktop/src/app/routes/channels.$channelId.tsx

@@ -1,13 +1,20 @@
 import * as React from "react";
 import { createFileRoute } from "@tanstack/react-router";
 
+import {
+  parseProfilePanelTab,
+  parseProfilePanelView,
+  type ProfilePanelTab,
+  type ProfilePanelView,
+} from "@/features/profile/ui/UserProfilePanelUtils";
 import { ViewLoadingFallback } from "@/shared/ui/ViewLoadingFallback";
 
 type ChannelRouteSearch = {
   agentSession?: string;
   messageId?: string;
   profile?: string;
-  profileView?: "memories" | "channels";
+  profileTab?: ProfilePanelTab;
+  profileView?: ProfilePanelView;
   thread?: string;
   threadRootId?: string;
 };
@@ -16,18 +23,15 @@ function nonEmptyString(value: unknown): string | undefined {
   return typeof value === "string" && value.length > 0 ? value : undefined;
 }
 
-function profileViewValue(value: unknown): "memories" | "channels" | undefined {
-  return value === "memories" || value === "channels" ? value : undefined;
-}
-
 function validateChannelSearch(
   search: Record<string, unknown>,
 ): ChannelRouteSearch {
   return {
     agentSession: nonEmptyString(search.agentSession),
     messageId: nonEmptyString(search.messageId),
     profile: nonEmptyString(search.profile),
-    profileView: profileViewValue(search.profileView),
+    profileTab: parseProfilePanelTab(search.profileTab) ?? undefined,
+    profileView: parseProfilePanelView(search.profileView) ?? undefined,
     thread: nonEmptyString(search.thread),
     threadRootId: nonEmptyString(search.threadRootId),
   };

desktop/src/app/routes/pulse.tsx

@@ -1,6 +1,12 @@
 import * as React from "react";
 import { createFileRoute } from "@tanstack/react-router";
 
+import {
+  parseProfilePanelTab,
+  parseProfilePanelView,
+  type ProfilePanelTab,
+  type ProfilePanelView,
+} from "@/features/profile/ui/UserProfilePanelUtils";
 import { usePreviewFeatureWarning } from "@/shared/features";
 import { ViewLoadingFallback } from "@/shared/ui/ViewLoadingFallback";
 
@@ -11,7 +17,8 @@ const PulseScreen = React.lazy(async () => {
 
 type PulseRouteSearch = {
   profile?: string;
-  profileView?: "memories" | "channels";
+  profileTab?: ProfilePanelTab;
+  profileView?: ProfilePanelView;
 };
 
 function validatePulseSearch(
@@ -22,10 +29,8 @@ function validatePulseSearch(
       typeof search.profile === "string" && search.profile.length > 0
         ? search.profile
         : undefined,
-    profileView:
-      search.profileView === "memories" || search.profileView === "channels"
-        ? search.profileView
-        : undefined,
+    profileTab: parseProfilePanelTab(search.profileTab) ?? undefined,
+    profileView: parseProfilePanelView(search.profileView) ?? undefined,
   };
 }
 

desktop/src/features/agent-memory/ui/MemorySection.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { AlertTriangle, ChevronDown, RefreshCw } from "lucide-react";
+import { AlertTriangle, Brain, ChevronDown, RefreshCw } from "lucide-react";
 
 import { useAgentMemoryGraph } from "@/features/agent-memory/hooks";
 import type { MemoryTreeNode } from "@/features/agent-memory/lib/buildMemoryGraph";
@@ -225,12 +225,16 @@ function MemoryGraphView({
   const isEmpty = !rootedTree && orphans.length === 0;
   if (isEmpty) {
     return (
-      <p
-        className="text-sm italic text-muted-foreground"
+      <div
+        className="flex min-h-56 flex-col items-center justify-center px-6 py-10 text-center"
         data-testid="agent-memory-empty"
       >
-        This agent has no memories yet.
-      </p>
+        <Brain className="mx-auto h-4 w-4 text-muted-foreground" />
+        <p className="mt-3 text-sm font-medium">Build this agent's memory</p>
+        <p className="mt-1 text-sm text-muted-foreground">
+          Try telling this agent to remember something for next time.
+        </p>
+      </div>
     );
   }
 

desktop/src/features/agents/activeAgentTurnsStore.test.mjs

@@ -4,13 +4,16 @@ import { describe, it, beforeEach, afterEach, mock } from "node:test";
 import {
   syncAgentTurnsFromEvents,
   getActiveTurnsForAgent,
+  getActiveTurnsByChannel,
   resetActiveAgentTurnsStore,
   subscribeActiveAgentTurns,
 } from "./activeAgentTurnsStore.ts";
 import { formatElapsed } from "./ui/agentSessionUtils.ts";
 
 const AGENT =
   "abcd1234abcd1234abcd1234abcd1234abcd1234abcd1234abcd1234abcd1234";
+const AGENT_2 =
+  "dcba4321dcba4321dcba4321dcba4321dcba4321dcba4321dcba4321dcba4321";
 
 /** Channel-id Set view of the summary array — keeps legacy assertions terse. */
 function channelIdsOf(turns) {
@@ -163,6 +166,60 @@ describe("activeAgentTurnsStore", () => {
     });
   });
 
+  describe("channel aggregation", () => {
+    it("collapses active turns by channel across agents", () => {
+      syncAgentTurnsFromEvents(AGENT, [
+        makeEvent({
+          seq: 1,
+          turnId: "agent-1-early",
+          channelId: "shared",
+          timestamp: "2024-01-01T00:00:00Z",
+        }),
+        makeEvent({
+          seq: 2,
+          turnId: "agent-1-late",
+          channelId: "shared",
+          timestamp: "2024-01-01T00:01:00Z",
+        }),
+      ]);
+      syncAgentTurnsFromEvents(AGENT_2, [
+        makeEvent({
+          seq: 1,
+          turnId: "agent-2",
+          channelId: "shared",
+          timestamp: "2024-01-01T00:02:00Z",
+        }),
+      ]);
+
+      const summaries = getActiveTurnsByChannel();
+      assert.deepEqual(
+        summaries.map(({ channelId, agentCount }) => ({
+          channelId,
+          agentCount,
+        })),
+        [{ channelId: "shared", agentCount: 2 }],
+      );
+      assert.equal(
+        summaries[0].anchorAt,
+        getActiveTurnsForAgent(AGENT)[0].anchorAt,
+      );
+    });
+
+    it("removes a channel summary when the last active turn ends", () => {
+      syncAgentTurnsFromEvents(AGENT, [
+        makeEvent({ seq: 1, turnId: "t1", channelId: "c1" }),
+        makeEvent({
+          seq: 2,
+          kind: "turn_completed",
+          turnId: "t1",
+          channelId: "c1",
+        }),
+      ]);
+
+      assert.deepEqual(getActiveTurnsByChannel(), []);
+    });
+  });
+
   describe("endTurn turnId-vs-channelId fallback", () => {
     it("ends turn by turnId when provided", () => {
       syncAgentTurnsFromEvents(AGENT, [

desktop/src/features/agents/activeAgentTurnsStore.ts

@@ -44,6 +44,13 @@ export type ActiveTurnSummary = {
   anchorAt: number;
 };
 
+/** One channel with active agent work, aggregated across agents. */
+export type ActiveChannelTurnSummary = {
+  channelId: string;
+  anchorAt: number;
+  agentCount: number;
+};
+
 // Module-level state: agentPubkey → turnId → ActiveTurn
 const activeTurnsByAgent = new Map<string, Map<string, ActiveTurn>>();
 const listeners = new Set<() => void>();
@@ -68,6 +75,7 @@ const clockOffsetByAgent = new Map<string, number>();
 // Cached snapshots for useSyncExternalStore reference stability.
 // Only regenerated when the underlying turn map for an agent actually changes.
 const cachedTurnSummaries = new Map<string, ActiveTurnSummary[]>();
+let cachedChannelTurnSummaries: ActiveChannelTurnSummary[] | null = null;
 
 // Composite watermark per agent: the newest observer event processed, by
 // (timestamp, seq) ordering. An event is processed only if it is strictly
@@ -87,6 +95,7 @@ let pruneInterval: ReturnType<typeof setInterval> | null = null;
 
 function invalidateCache(agentKey: string) {
   cachedTurnSummaries.delete(agentKey);
+  cachedChannelTurnSummaries = null;
 }
 
 function notifyListeners() {
@@ -427,6 +436,53 @@ export function getActiveTurnsForAgent(
 }
 
 const EMPTY_TURNS: ActiveTurnSummary[] = [];
+const EMPTY_CHANNEL_TURNS: ActiveChannelTurnSummary[] = [];
+
+/**
+ * Returns active working channels across all tracked agents, sorted by
+ * channelId and anchored to the earliest live turn in each channel.
+ */
+export function getActiveTurnsByChannel(): ActiveChannelTurnSummary[] {
+  if (cachedChannelTurnSummaries) return cachedChannelTurnSummaries;
+  if (activeTurnsByAgent.size === 0) return EMPTY_CHANNEL_TURNS;
+
+  const summaries = new Map<
+    string,
+    { anchorAt: number; agentPubkeys: Set<string> }
+  >();
+
+  for (const [agentKey, agentTurns] of activeTurnsByAgent) {
+    if (agentTurns.size === 0) continue;
+    const offset = clockOffsetByAgent.get(agentKey) ?? 0;
+
+    for (const turn of agentTurns.values()) {
+      const anchorAt = turn.startedAt + offset;
+      const summary = summaries.get(turn.channelId);
+      if (!summary) {
+        summaries.set(turn.channelId, {
+          anchorAt,
+          agentPubkeys: new Set([agentKey]),
+        });
+        continue;
+      }
+
+      summary.agentPubkeys.add(agentKey);
+      if (anchorAt < summary.anchorAt) {
+        summary.anchorAt = anchorAt;
+      }
+    }
+  }
+
+  const result = [...summaries.entries()]
+    .map(([channelId, summary]) => ({
+      channelId,
+      anchorAt: summary.anchorAt,
+      agentCount: summary.agentPubkeys.size,
+    }))
+    .sort((a, b) => a.channelId.localeCompare(b.channelId));
+  cachedChannelTurnSummaries = result;
+  return result;
+}
 
 /**
  * Synchronize the active-turns store with the latest observer events for a
@@ -457,6 +513,17 @@ export function useActiveAgentTurns(
   return React.useSyncExternalStore(subscribeActiveAgentTurns, getSnapshot);
 }
 
+/**
+ * Hook: returns channels with active agent work across all tracked agents.
+ * Re-renders when the channel set changes — not when the clock ticks.
+ */
+export function useActiveAgentTurnsByChannel(): ActiveChannelTurnSummary[] {
+  return React.useSyncExternalStore(
+    subscribeActiveAgentTurns,
+    getActiveTurnsByChannel,
+  );
+}
+
 /**
  * Bridge hook: processes observer events into the active-turns store.
  * Should be called by a parent component that has access to the observer events.
@@ -483,6 +550,7 @@ export function resetActiveAgentTurnsStore() {
   lastProcessed.clear();
   clockOffsetByAgent.clear();
   cachedTurnSummaries.clear();
+  cachedChannelTurnSummaries = null;
   terminalAtByAgent.clear();
   notifyListeners();
 }