@ai-matrx/chat 0.7.27 → 0.7.29

package/dist/messenger/agents/AgentsMessenger.js

@@ -0,0 +1,612 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Bot, Link2, Pencil, Pin, Plus, RefreshCw, Settings2 } from "lucide-react";
+import { TextInputDialog } from "@ai-matrx/design-system";
+import { useAppDispatch, useAppSelector } from "../../store/hooks.js";
+import { useMandateSet } from "../../mandates/useMandateSet.js";
+import { fetchConversationHistory } from "../../agents/redux/conversation-history/thunks.js";
+import { renameConversation } from "../../agents/redux/conversation-list/conversation-row-actions.thunks.js";
+import { ChatRoomClient } from "../../agents/components/chat/ChatRoomClient.js";
+import { ChatRoomSkeleton } from "../../agents/components/chat/ChatRoomSkeleton.js";
+import { useRouter } from "../../host/navigation.js";
+import { toast } from "../../host/notify.js";
+import { selectAuthReady, selectUserId } from "../../host/identity.js";
+import { supabase } from "../../host/db.js";
+import { MessengerShell } from "../MessengerShell.js";
+import {
+  EMPTY_PERSON_STATE,
+  MESSENGER_STARTER_MANDATE_KEYS,
+  agentRowId,
+  mergeRoster,
+  orderRows,
+  parseRowId,
+  relativeDate,
+  threadRowId,
+  threadTitle
+} from "./roster.js";
+import { readMessengerPersonState, writeAgentSeat, writeThreadPin } from "./roster-store.js";
+import { buildAgentRowMenu, buildThreadMenu, buildTitleMenu } from "./menus.js";
+import { AgentDetailsPanel } from "./AgentDetailsPanel.js";
+import { MessengerManageAgents } from "./MessengerManageAgents.js";
+const PAGE_SIZE = 20;
+const scopeIdOf = (agentId) => `messenger-agent:${agentId}`;
+const SPACE_ALL = "all";
+const SPACE_PINNED = "pinned";
+const SPACE_MANAGE = "manage";
+const STARTER_LABEL = "Starter";
+const DEFAULT_HREFS = {
+  agent: (id) => `/agents/${id}`,
+  editAgent: (id) => `/agents/${id}/build`,
+  conversation: (id) => `/chat/${id}`
+};
+function defaultLinkTo(location) {
+  const here = globalThis.location;
+  const base = here ? `${here.origin}${here.pathname}` : "";
+  const params = new URLSearchParams();
+  if (location.agentId) params.set("agent", location.agentId);
+  if (location.conversationId) params.set("thread", location.conversationId);
+  const query = params.toString();
+  return query ? `${base}?${query}` : base;
+}
+function copyText(text, what) {
+  const clipboard = globalThis.navigator?.clipboard;
+  if (!clipboard) {
+    toast.error(`Could not copy the ${what}`);
+    return;
+  }
+  clipboard.writeText(text).then(
+    () => toast.success(`Copied the ${what}`),
+    () => toast.error(`Could not copy the ${what}`)
+  );
+}
+function useAgentInfo(agentIds) {
+  const [info, setInfo] = useState(/* @__PURE__ */ new Map());
+  const key = [...agentIds].sort().join(",");
+  useEffect(() => {
+    if (key === "") return void 0;
+    let cancelled = false;
+    void (async () => {
+      const { data, error } = await supabase.schema("agent").from("definition").select("id, name, description, model_id").in("id", key.split(","));
+      if (cancelled) return;
+      if (error) {
+        console.error("[messenger/agents] agent names could not be read:", error.message);
+        return;
+      }
+      const next = /* @__PURE__ */ new Map();
+      for (const row of data ?? []) {
+        next.set(row.id, { name: row.name ?? "Agent", description: row.description ?? null, modelId: row.model_id ?? null });
+      }
+      setInfo(next);
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [key]);
+  return info;
+}
+function useAgentsMessengerSource(options = {}) {
+  const {
+    title = "Agents",
+    profile,
+    initialLocation,
+    onLocationChange,
+    linkTo = defaultLinkTo,
+    renderSeatRoom
+  } = options;
+  const hrefs = { ...DEFAULT_HREFS, ...options.hrefs };
+  const dispatch = useAppDispatch();
+  const router = useRouter();
+  const authReady = useAppSelector(selectAuthReady);
+  const userId = useAppSelector(selectUserId);
+  const seatStates = useMandateSet(MESSENGER_STARTER_MANDATE_KEYS, { optionalKeys: MESSENGER_STARTER_MANDATE_KEYS });
+  const seats = useMemo(
+    () => MESSENGER_STARTER_MANDATE_KEYS.map((mandateKey) => ({ mandateKey, agentId: seatStates[mandateKey]?.mandate?.agentId ?? null })),
+    [seatStates]
+  );
+  const seatsLoading = MESSENGER_STARTER_MANDATE_KEYS.some((key) => seatStates[key]?.loading !== false);
+  const [person, setPerson] = useState(EMPTY_PERSON_STATE);
+  const [personStatus, setPersonStatus] = useState("loading");
+  const [personError, setPersonError] = useState(null);
+  const [pending, setPending] = useState(/* @__PURE__ */ new Set());
+  const reload = useCallback(async () => {
+    try {
+      setPerson(await readMessengerPersonState());
+      setPersonStatus("ready");
+      setPersonError(null);
+    } catch (error) {
+      setPersonStatus("failed");
+      setPersonError(error instanceof Error ? error.message : String(error));
+    }
+  }, []);
+  useEffect(() => {
+    if (!authReady || !userId) return;
+    void reload();
+  }, [authReady, userId, reload]);
+  const mutate = useCallback(
+    async (key, write, failure) => {
+      setPending((prev) => new Set(prev).add(key));
+      try {
+        await write();
+        await reload();
+      } catch (error) {
+        toast.error(`${failure}: ${error instanceof Error ? error.message : String(error)}`);
+      } finally {
+        setPending((prev) => {
+          const next = new Set(prev);
+          next.delete(key);
+          return next;
+        });
+      }
+    },
+    [reload]
+  );
+  const roster = useMemo(() => mergeRoster(seats, person), [seats, person]);
+  const rosterById = useMemo(() => new Map(roster.agents.map((a) => [a.agentId, a])), [roster.agents]);
+  const knownIds = useMemo(() => {
+    const ids = new Set(roster.agents.map((a) => a.agentId));
+    for (const seat of roster.removedStarters) if (seat.agentId) ids.add(seat.agentId);
+    for (const pin of person.threads.values()) ids.add(pin.agentId);
+    return [...ids];
+  }, [roster, person.threads]);
+  const info = useAgentInfo(knownIds);
+  const nameOf = useCallback((agentId) => info.get(agentId)?.name ?? "Agent", [info]);
+  const threadAgentIds = useMemo(() => {
+    const ids = new Set(roster.agents.map((a) => a.agentId));
+    for (const pin of person.threads.values()) ids.add(pin.agentId);
+    return [...ids];
+  }, [roster.agents, person.threads]);
+  const loadThreads = useCallback(
+    (agentId, replace = true) => dispatch(fetchConversationHistory({ scopeId: scopeIdOf(agentId), agentIds: [agentId], pageSize: PAGE_SIZE, replace })),
+    [dispatch]
+  );
+  const threadKey = threadAgentIds.join(",");
+  useEffect(() => {
+    if (!authReady || !userId || threadKey === "") return;
+    for (const agentId of threadKey.split(",")) void loadThreads(agentId);
+  }, [authReady, userId, threadKey, loadThreads]);
+  const scopes = useAppSelector((state) => state.conversationHistory.scopes);
+  const threadsByAgent = useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const agentId of threadAgentIds) {
+      const items = scopes[scopeIdOf(agentId)]?.items ?? [];
+      map.set(
+        agentId,
+        items.map((item) => ({ conversationId: item.conversationId, title: item.title, updatedAt: item.updatedAt }))
+      );
+    }
+    return map;
+  }, [scopes, threadAgentIds]);
+  const scopeOf = (agentId) => scopes[scopeIdOf(agentId)];
+  const [activeRow, setActiveRow] = useState(
+    () => initialLocation?.agentId ? agentRowId(initialLocation.agentId) : null
+  );
+  const [choices, setChoices] = useState(
+    () => initialLocation?.agentId && initialLocation.conversationId ? { [initialLocation.agentId]: { conversationId: initialLocation.conversationId, nonce: 0 } } : {}
+  );
+  const [space, setSpace] = useState(SPACE_ALL);
+  const [manageOpen, setManageOpen] = useState(false);
+  const [renaming, setRenaming] = useState(null);
+  const currentThreadOf = useCallback(
+    (agentId) => {
+      const choice = choices[agentId];
+      if (choice) return choice.conversationId;
+      const scope = scopes[scopeIdOf(agentId)];
+      if (!scope || scope.status === "idle" || scope.status === "loading" && scope.items.length === 0) return void 0;
+      return scope.items[0]?.conversationId ?? null;
+    },
+    [choices, scopes]
+  );
+  const pinnedThreadIds = useMemo(() => new Set(person.threads.keys()), [person.threads]);
+  const openAgentThread = useCallback(
+    (agentId, conversationId) => {
+      setManageOpen(false);
+      if (conversationId && pinnedThreadIds.has(conversationId)) {
+        setActiveRow(threadRowId(conversationId));
+        return;
+      }
+      setChoices((prev) => ({ ...prev, [agentId]: { conversationId, nonce: prev[agentId]?.nonce ?? 0 } }));
+      setActiveRow(agentRowId(agentId));
+    },
+    [pinnedThreadIds]
+  );
+  const newChat = useCallback((agentId) => {
+    setManageOpen(false);
+    setChoices((prev) => ({ ...prev, [agentId]: { conversationId: null, nonce: (prev[agentId]?.nonce ?? 0) + 1 } }));
+    setActiveRow(agentRowId(agentId));
+  }, []);
+  const location = useMemo(() => {
+    const ref = activeRow ? parseRowId(activeRow) : null;
+    if (!ref) return { agentId: null, conversationId: null };
+    if (ref.kind === "thread") {
+      return { agentId: person.threads.get(ref.conversationId)?.agentId ?? null, conversationId: ref.conversationId };
+    }
+    return { agentId: ref.agentId, conversationId: currentThreadOf(ref.agentId) ?? null };
+  }, [activeRow, person.threads, currentThreadOf]);
+  const locationChange = useRef(onLocationChange);
+  useEffect(() => {
+    locationChange.current = onLocationChange;
+  }, [onLocationChange]);
+  useEffect(() => {
+    locationChange.current?.(location);
+  }, [location]);
+  useEffect(() => {
+    const id = initialLocation?.conversationId;
+    if (id && personStatus === "ready" && person.threads.has(id)) setActiveRow(threadRowId(id));
+  }, [personStatus]);
+  const togglePinThread = useCallback(
+    (conversationId, agentId) => {
+      const pinned = person.threads.has(conversationId);
+      const live = threadsByAgent.get(agentId)?.find((t) => t.conversationId === conversationId);
+      void mutate(
+        conversationId,
+        () => writeThreadPin(conversationId, pinned ? null : { agentId, title: live?.title ?? null }),
+        pinned ? "Could not unpin this chat" : "Could not pin this chat"
+      );
+      if (pinned && activeRow === threadRowId(conversationId)) {
+        setChoices((prev) => ({ ...prev, [agentId]: { conversationId, nonce: prev[agentId]?.nonce ?? 0 } }));
+        setActiveRow(agentRowId(agentId));
+      }
+    },
+    [person.threads, threadsByAgent, mutate, activeRow]
+  );
+  const togglePinAgent = useCallback(
+    (agent) => {
+      const added = agent.mandateKey === null;
+      const next = agent.pinned ? added ? { in: true } : null : added ? { in: true, pinned: true } : { pinned: true };
+      void mutate(agent.agentId, () => writeAgentSeat(agent.agentId, next), "Could not change the pin");
+    },
+    [mutate]
+  );
+  const removeAgent = useCallback(
+    (agentId) => {
+      const agent = rosterById.get(agentId);
+      const starter = agent?.mandateKey != null;
+      void mutate(agentId, () => writeAgentSeat(agentId, starter ? { in: false } : null), "Could not remove the agent");
+      if (activeRow === agentRowId(agentId)) setActiveRow(null);
+    },
+    [rosterById, mutate, activeRow]
+  );
+  const restoreStarter = useCallback(
+    (agentId) => void mutate(agentId, () => writeAgentSeat(agentId, null), "Could not restore the agent"),
+    [mutate]
+  );
+  const addAgent = useCallback(
+    (agentId) => {
+      const removedStarter = roster.removedStarters.some((s) => s.agentId === agentId);
+      void mutate(agentId, () => writeAgentSeat(agentId, removedStarter ? null : { in: true }), "Could not add the agent");
+    },
+    [roster.removedStarters, mutate]
+  );
+  const seatOf = useCallback(
+    (agentId) => rosterById.get(agentId)?.mandateKey ?? null,
+    [rosterById]
+  );
+  const seatRoomFor = useCallback(
+    (agentId) => {
+      const mandateKey = seatOf(agentId);
+      return mandateKey && renderSeatRoom ? renderSeatRoom({ mandateKey, agentId }) : null;
+    },
+    [seatOf, renderSeatRoom]
+  );
+  const source = useMemo(() => {
+    const rows = orderRows({ roster: roster.agents, threadsByAgent, pinnedThreads: person.threads });
+    const contacts = rows.map((row) => {
+      if (row.kind === "thread") {
+        return {
+          id: threadRowId(row.conversationId),
+          name: row.title,
+          avatar: { kind: "monogram", text: void 0 },
+          preview: nameOf(row.agentId),
+          time: relativeDate(row.updatedAt),
+          pinned: true,
+          searchText: nameOf(row.agentId)
+        };
+      }
+      return {
+        id: agentRowId(row.agentId),
+        name: nameOf(row.agentId),
+        avatar: { kind: "monogram" },
+        preview: row.latest ? threadTitle(row.latest) : seatOf(row.agentId) ? STARTER_LABEL : void 0,
+        time: relativeDate(row.latest?.updatedAt),
+        pinned: row.pinned,
+        searchText: info.get(row.agentId)?.description ?? void 0
+      };
+    });
+    const visible = space === SPACE_PINNED ? contacts.filter((c) => c.pinned) : contacts;
+    const agentOfRow = (contact) => {
+      const ref = parseRowId(contact.id);
+      if (!ref) return null;
+      return ref.kind === "agent" ? ref.agentId : person.threads.get(ref.conversationId)?.agentId ?? null;
+    };
+    const threadOfRow = (contact) => {
+      const ref = parseRowId(contact.id);
+      if (!ref) return null;
+      return ref.kind === "thread" ? ref.conversationId : currentThreadOf(ref.agentId);
+    };
+    const agentDoors = (agentId) => ({
+      openAgent: () => router.push(hrefs.agent(agentId)),
+      editAgent: () => router.push(hrefs.editAgent(agentId))
+    });
+    const threadDoors = (agentId, conversationId) => ({
+      togglePin: () => togglePinThread(conversationId, agentId),
+      rename: () => {
+        const live = threadsByAgent.get(agentId)?.find((t) => t.conversationId === conversationId);
+        setRenaming({ conversationId, title: live?.title ?? person.threads.get(conversationId)?.title ?? "" });
+      },
+      openInChat: () => router.push(hrefs.conversation(conversationId)),
+      copyLink: () => copyText(linkTo({ agentId, conversationId }), "link")
+    });
+    const agentRowMenu = (agentId) => {
+      const agent = rosterById.get(agentId);
+      if (!agent) return [];
+      return buildAgentRowMenu(
+        { pinned: agent.pinned, canNewChat: seatRoomFor(agentId) === null },
+        {
+          newChat: () => newChat(agentId),
+          togglePin: () => togglePinAgent(agent),
+          ...agentDoors(agentId),
+          remove: () => removeAgent(agentId),
+          copyLink: () => copyText(linkTo({ agentId, conversationId: null }), "link")
+        }
+      );
+    };
+    const selectSpace = (id) => {
+      if (id === SPACE_MANAGE) {
+        setManageOpen(true);
+        return;
+      }
+      setManageOpen(false);
+      setSpace(id);
+    };
+    const pinnedCount = contacts.filter((c) => c.pinned).length;
+    return {
+      title,
+      rail: [
+        { id: SPACE_ALL, label: "All agents", icon: Bot },
+        { id: SPACE_PINNED, label: "Pinned", icon: Pin, count: pinnedCount || void 0 },
+        { id: "more", label: "More", spaces: [{ id: SPACE_MANAGE, label: "Manage agents", icon: Settings2 }] }
+      ],
+      activeSpaceId: manageOpen ? SPACE_MANAGE : space,
+      onSelectSpace: selectSpace,
+      spaceMenu: (s) => s.id === SPACE_MANAGE ? [{ id: "open", label: "Manage agents", icon: Settings2, onSelect: () => selectSpace(SPACE_MANAGE) }] : [
+        { id: "open", label: `Show ${s.label}`, icon: s.icon, onSelect: () => selectSpace(s.id) },
+        { id: "refresh", label: "Refresh", icon: RefreshCw, onSelect: () => void reload() }
+      ],
+      profile,
+      contacts: visible,
+      listState: {
+        loading: personStatus === "loading" || seatsLoading && roster.agents.length === 0,
+        error: personStatus === "failed" ? personError : null,
+        retry: () => void reload(),
+        emptyLabel: space === SPACE_PINNED ? "Nothing pinned" : "No agents yet"
+      },
+      activeContactId: activeRow,
+      onSelectContact: (id) => {
+        setManageOpen(false);
+        setActiveRow(id);
+        const ref = parseRowId(id);
+        const agentId = ref?.kind === "agent" ? ref.agentId : ref ? person.threads.get(ref.conversationId)?.agentId : null;
+        if (agentId) void loadThreads(agentId);
+      },
+      contactMenu: (contact) => {
+        const ref = parseRowId(contact.id);
+        if (!ref) return [];
+        if (ref.kind === "agent") return agentRowMenu(ref.agentId);
+        const agentId = person.threads.get(ref.conversationId)?.agentId;
+        if (!agentId) return [];
+        return buildThreadMenu(true, {
+          open: () => {
+            setManageOpen(false);
+            setActiveRow(contact.id);
+          },
+          ...threadDoors(agentId, ref.conversationId)
+        });
+      },
+      listMenu: () => [
+        { id: "manage", label: "Manage agents", icon: Settings2, onSelect: () => selectSpace(SPACE_MANAGE) },
+        { id: "refresh", label: "Refresh", icon: RefreshCw, onSelect: () => void reload() }
+      ],
+      onNew: () => selectSpace(SPACE_MANAGE),
+      newLabel: "Add agent",
+      header: (contact) => {
+        const agentId = agentOfRow(contact);
+        const ref = parseRowId(contact.id);
+        if (ref?.kind === "thread") return { title: contact.name, subtitle: agentId ? nameOf(agentId) : void 0, avatar: contact.avatar };
+        const current = threadOfRow(contact);
+        const thread = current ? threadsByAgent.get(agentId ?? "")?.find((t) => t.conversationId === current) : null;
+        const subtitle = agentId && seatRoomFor(agentId) !== null ? void 0 : current === null ? "New chat" : thread ? threadTitle(thread) : void 0;
+        return { title: contact.name, subtitle, avatar: contact.avatar };
+      },
+      headerMenu: (contact) => {
+        const agentId = agentOfRow(contact);
+        if (!agentId) return [];
+        const doors = agentDoors(agentId);
+        const agentPart = [
+          { id: "open-agent", label: "Open agent", icon: Bot, onSelect: doors.openAgent },
+          { id: "edit-agent", label: "Edit agent", icon: Pencil, onSelect: doors.editAgent }
+        ];
+        if (seatRoomFor(agentId) !== null) {
+          return [
+            ...agentPart,
+            { id: "copy-link", label: "Copy link", icon: Link2, onSelect: () => copyText(linkTo({ agentId, conversationId: null }), "link") }
+          ];
+        }
+        const current = threadOfRow(contact);
+        const head = [{ id: "new-chat", label: "New chat", icon: Plus, onSelect: () => newChat(agentId) }];
+        if (!current) return [...head, { id: "agent-sep", separator: true }, ...agentPart];
+        return [
+          ...head,
+          ...buildThreadMenu(pinnedThreadIds.has(current), threadDoors(agentId, current)),
+          { id: "agent-sep", separator: true },
+          ...agentPart
+        ];
+      },
+      titleMenu: (contact) => {
+        const agentId = agentOfRow(contact);
+        if (!agentId || seatRoomFor(agentId) !== null) return [];
+        const scope = scopeOf(agentId);
+        const current = threadOfRow(contact);
+        return buildTitleMenu(
+          {
+            threads: threadsByAgent.get(agentId) ?? [],
+            currentConversationId: current ?? null,
+            hasMore: scope?.hasMore ?? false,
+            loadingMore: scope?.status === "loading-more",
+            pinnedIds: pinnedThreadIds
+          },
+          {
+            openThread: (id) => openAgentThread(agentId, id),
+            newChat: () => newChat(agentId),
+            loadMore: () => void loadThreads(agentId, false),
+            togglePin: (id) => togglePinThread(id, agentId)
+          }
+        );
+      },
+      renderThread: (contact) => {
+        const agentId = agentOfRow(contact);
+        if (!agentId) return null;
+        const seatRoom = parseRowId(contact.id)?.kind === "agent" ? seatRoomFor(agentId) : null;
+        if (seatRoom !== null) return /* @__PURE__ */ jsx("div", { className: "flex min-h-0 flex-1 flex-col", children: seatRoom });
+        const current = threadOfRow(contact);
+        if (current === void 0) {
+          return /* @__PURE__ */ jsx("div", { className: "flex min-h-0 flex-1 flex-col overflow-hidden bg-textured", children: /* @__PURE__ */ jsx(ChatRoomSkeleton, {}) });
+        }
+        const nonce = choices[agentId]?.nonce ?? 0;
+        return /* @__PURE__ */ jsx("div", { className: "flex min-h-0 flex-1 flex-col", children: /* @__PURE__ */ jsx(
+          ChatRoomClient,
+          {
+            agentId,
+            conversationId: current ?? void 0,
+            mandateKey: seatOf(agentId) ?? void 0,
+            sourceFeature: "chat",
+            surfaceBasePath: "/messenger",
+            onOpenConversation: (conversationId) => {
+              if (parseRowId(contact.id)?.kind === "agent") {
+                setChoices((prev) => ({ ...prev, [agentId]: { conversationId, nonce: prev[agentId]?.nonce ?? nonce } }));
+              } else {
+                openAgentThread(agentId, conversationId);
+              }
+              void loadThreads(agentId);
+            }
+          },
+          `${agentId}:${nonce}`
+        ) });
+      },
+      renderDetails: (contact) => {
+        const agentId = agentOfRow(contact);
+        if (!agentId) return null;
+        const scope = scopeOf(agentId);
+        const agentInfo = info.get(agentId);
+        return /* @__PURE__ */ jsx(
+          AgentDetailsPanel,
+          {
+            agentId,
+            name: nameOf(agentId),
+            description: agentInfo?.description ?? null,
+            modelId: agentInfo?.modelId ?? null,
+            avatar: { kind: "monogram" },
+            seatLabel: seatOf(agentId) ? STARTER_LABEL : null,
+            threads: threadsByAgent.get(agentId) ?? [],
+            currentConversationId: threadOfRow(contact) ?? null,
+            pinnedIds: pinnedThreadIds,
+            hasMore: scope?.hasMore ?? false,
+            onLoadMore: () => void loadThreads(agentId, false),
+            onOpenThread: (id) => openAgentThread(agentId, id),
+            onOpenAgent: agentDoors(agentId).openAgent,
+            onEditAgent: agentDoors(agentId).editAgent
+          }
+        );
+      },
+      renderMain: () => {
+        if (!manageOpen) return null;
+        const manageRow = (agentId, starter) => ({
+          agentId,
+          name: nameOf(agentId),
+          description: info.get(agentId)?.description ?? null,
+          avatar: { kind: "monogram" },
+          seatLabel: starter ? STARTER_LABEL : null
+        });
+        return /* @__PURE__ */ jsx(
+          MessengerManageAgents,
+          {
+            rows: roster.agents.map((a) => manageRow(a.agentId, a.mandateKey !== null)),
+            removedStarters: roster.removedStarters.flatMap((s) => s.agentId ? [manageRow(s.agentId, true)] : []),
+            pending,
+            error: personStatus === "failed" ? personError : null,
+            onRemove: removeAgent,
+            onRestore: restoreStarter,
+            onAdd: addAgent,
+            onClose: () => setManageOpen(false)
+          }
+        );
+      }
+    };
+  }, [
+    roster,
+    rosterById,
+    threadsByAgent,
+    person.threads,
+    pinnedThreadIds,
+    info,
+    nameOf,
+    space,
+    manageOpen,
+    activeRow,
+    choices,
+    scopes,
+    currentThreadOf,
+    personStatus,
+    personError,
+    seatsLoading,
+    pending,
+    profile,
+    title,
+    router,
+    linkTo,
+    reload,
+    loadThreads,
+    newChat,
+    openAgentThread,
+    togglePinThread,
+    togglePinAgent,
+    removeAgent,
+    restoreStarter,
+    addAgent,
+    seatOf,
+    seatRoomFor
+  ]);
+  const overlays = /* @__PURE__ */ jsx(
+    TextInputDialog,
+    {
+      open: renaming !== null,
+      onOpenChange: (open) => {
+        if (!open) setRenaming(null);
+      },
+      title: "Rename chat",
+      defaultValue: renaming?.title ?? "",
+      confirmLabel: "Rename",
+      onConfirm: async (value) => {
+        if (!renaming) return;
+        const result = await dispatch(renameConversation({ conversationId: renaming.conversationId, title: value }));
+        if (renameConversation.rejected.match(result)) {
+          toast.error("Could not rename this chat");
+          return;
+        }
+        setRenaming(null);
+      }
+    }
+  );
+  return { source, overlays };
+}
+function AgentsMessenger({ className, ...options }) {
+  const { source, overlays } = useAgentsMessengerSource(options);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(MessengerShell, { source, className }),
+    overlays
+  ] });
+}
+export {
+  AgentsMessenger,
+  useAgentsMessengerSource
+};

package/dist/messenger/agents/MessengerManageAgents.d.ts

@@ -0,0 +1,21 @@
+import type { MessengerAvatar as AvatarSpec } from "../contract.js";
+export interface ManageRow {
+    readonly agentId: string;
+    readonly name: string;
+    readonly description: string | null;
+    readonly avatar?: AvatarSpec;
+    /** "Starter" for a starter seat; null for an agent the person added. */
+    readonly seatLabel: string | null;
+}
+export interface MessengerManageAgentsProps {
+    readonly rows: readonly ManageRow[];
+    readonly removedStarters: readonly ManageRow[];
+    /** Agent ids with a write in flight. */
+    readonly pending: ReadonlySet<string>;
+    readonly error: string | null;
+    readonly onRemove: (agentId: string) => void;
+    readonly onRestore: (agentId: string) => void;
+    readonly onAdd: (agentId: string) => void;
+    readonly onClose: () => void;
+}
+export declare function MessengerManageAgents(props: MessengerManageAgentsProps): import("react").JSX.Element;