block · teamadams · Jul 28, 2026
@@ -0,0 +1,52 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+
+import { connectedRelayAgents } from "./connectedRelayAgents.ts";
+
+function relayAgent(name, pubkey) {
+  return {
+    pubkey,
+    name,
+    agentType: "external",
+    channels: [],
+    channelIds: [],
+    capabilities: [],
+    status: "online",
+    respondTo: null,
+    respondToAllowlist: [],
+  };
+}
+
+describe("connectedRelayAgents", () => {
+  it("excludes locally managed identities case-insensitively", () => {
+    const managedPubkey = "A".repeat(64);
+    const result = connectedRelayAgents(
+      [
+        relayAgent("Starter", managedPubkey),
+        relayAgent("Alpha", "b".repeat(64)),
+      ],
+      new Set([managedPubkey.toLowerCase()]),
+    );
+
+    assert.deepEqual(
+      result.map((agent) => agent.name),
+      ["Alpha"],
+    );
+  });
+
+  it("sorts connected agents by name without mutating the relay result", () => {
+    const relayAgents = [
+      relayAgent("Delta", "c".repeat(64)),
+      relayAgent("Bravo", "d".repeat(64)),
+    ];
+
+    assert.deepEqual(
+      connectedRelayAgents(relayAgents, new Set()).map((agent) => agent.name),
+      ["Bravo", "Delta"],
+    );
+    assert.deepEqual(
+      relayAgents.map((agent) => agent.name),
+      ["Delta", "Bravo"],
+    );
+  });
+});
@@ -0,0 +1,11 @@
+import type { RelayAgent } from "@/shared/api/types";
+import { normalizePubkey } from "@/shared/lib/pubkey";
+
+export function connectedRelayAgents(
+  relayAgents: readonly RelayAgent[],
+  managedPubkeys: ReadonlySet<string>,
+): RelayAgent[] {
+  return [...relayAgents]
+    .filter((agent) => !managedPubkeys.has(normalizePubkey(agent.pubkey)))
+    .sort((left, right) => left.name.localeCompare(right.name));
+}
@@ -20,6 +20,7 @@ import { SecretRevealDialog } from "./SecretRevealDialog";
 import { TeamDeleteDialog } from "./TeamDeleteDialog";
 import { TeamDialog } from "./TeamDialog";
 import { TeamsSection } from "./TeamsSection";
+import { ConnectedRelayAgentsSection } from "./ConnectedRelayAgentsSection";
 import { UnifiedAgentsSection } from "./UnifiedAgentsSection";
 import { useManagedAgentActions } from "./useManagedAgentActions";
 import { usePersonaActions } from "./usePersonaActions";
@@ -32,6 +33,12 @@ import { Button } from "@/shared/ui/button";
 import { PageHeader } from "@/shared/ui/PageHeader";
 import { getInheritedAgentDefaults } from "./bakedEnvHelpers";
 
+const WELCOME_TEAM_PERSONA_IDS = new Set([
+  "builtin:fizz",
+  "builtin:honey",
+  "builtin:bumble",
+]);
+
 export function AgentsView() {
   const { openPersonaProfilePanel, openProfilePanel } = useProfilePanel();
   const { globalConfig } = useGlobalAgentConfig();
@@ -74,6 +81,18 @@ export function AgentsView() {
   // most providers persist the model as a provider env var (e.g. DATABRICKS_MODEL)
   // or inherit a baked build default, leaving `globalConfig.model` null.
   const configuredGlobalModel = inheritedDefaults.model.value;
+  const hasConnectedRelayAgents = agents.connectedRelayAgents.length > 0;
+  const visibleManagedAgents = hasConnectedRelayAgents
+    ? agents.managedAgents.filter(
+        (agent) =>
+          !agent.personaId || !WELCOME_TEAM_PERSONA_IDS.has(agent.personaId),
+      )
+    : agents.managedAgents;
+  const visiblePersonas = hasConnectedRelayAgents
+    ? personas.libraryPersonas.filter(
+        (persona) => !WELCOME_TEAM_PERSONA_IDS.has(persona.id),
+      )
+    : personas.libraryPersonas;
 
   // biome-ignore lint/correctness/useExhaustiveDependencies: mount-only; personas.handleImportSnapshotFile and teamActions.handleImportTeamSnapshotFile are stable
   React.useEffect(() => {
@@ -140,11 +159,23 @@ export function AgentsView() {
             title="Agents"
           />
           <div className="flex flex-col gap-8">
+            <ConnectedRelayAgentsSection
+              agents={agents.connectedRelayAgents}
+              error={
+                agents.relayAgentsQuery.error instanceof Error
+                  ? agents.relayAgentsQuery.error
+                  : null
+              }
+              isLoading={agents.relayAgentsQuery.isLoading}
+              onOpenAgentProfile={(pubkey) => {
+                openProfilePanel?.(pubkey);
+              }}
+            />
             <UnifiedAgentsSection
               defaultModel={inheritedDefaults.model.value}
               actionErrorMessage={agents.actionErrorMessage}
               actionNoticeMessage={agents.actionNoticeMessage}
-              agents={agents.managedAgents}
+              agents={visibleManagedAgents}
               agentsError={
                 agents.managedAgentsQuery.error instanceof Error
                   ? agents.managedAgentsQuery.error
@@ -168,7 +199,7 @@ export function AgentsView() {
               }}
               // Persona props
               canChooseCatalog={personas.catalogPersonas.length > 0}
-              personas={personas.libraryPersonas}
+              personas={visiblePersonas}
               personasError={
                 personas.personasQuery.error instanceof Error
                   ? personas.personasQuery.error

@@ -0,0 +1,86 @@
+import { useUserProfileQuery } from "@/features/profile/hooks";
+import type { RelayAgent } from "@/shared/api/types";
+import { Badge } from "@/shared/ui/badge";
+import { IdentityCardSkeleton } from "@/shared/ui/identity-card-skeleton";
+import { AgentIdentityCard } from "./AgentIdentityCard";
+
+type ConnectedRelayAgentsSectionProps = {
+  agents: RelayAgent[];
+  error: Error | null;
+  isLoading: boolean;
+  onOpenAgentProfile: (pubkey: string) => void;
+};
+
+const CARD_GRID_CLASS =
+  "mx-auto grid w-full max-w-[996px] grid-cols-[repeat(auto-fill,minmax(220px,240px))] justify-center gap-3";
+
+export function ConnectedRelayAgentsSection({
+  agents,
+  error,
+  isLoading,
+  onOpenAgentProfile,
+}: ConnectedRelayAgentsSectionProps) {
+  if (!isLoading && agents.length === 0 && !error) return null;
+
+  return (
+    <section className="space-y-4" data-testid="connected-relay-agents">
+      <div className="mx-auto w-full max-w-[996px]">
+        <h2 className="text-base font-semibold">Connected agents</h2>
+        <p className="text-sm text-muted-foreground">
+          Agents connected through this community relay.
+        </p>
+      </div>
+
+      {isLoading ? (
+        <div className={CARD_GRID_CLASS}>
+          {["first", "second", "third", "fourth"].map((key) => (
+            <IdentityCardSkeleton key={key} />
+          ))}
+        </div>
+      ) : (
+        <div className={CARD_GRID_CLASS}>
+          {agents.map((agent) => (
+            <ConnectedRelayAgentCard
+              agent={agent}
+              key={agent.pubkey}
+              onOpenAgentProfile={onOpenAgentProfile}
+            />
+          ))}
+        </div>
+      )}
+
+      {error ? (
+        <p className="mx-auto w-full max-w-[996px] rounded-2xl border border-destructive/30 bg-destructive/10 px-4 py-3 text-sm text-destructive">
+          {error.message}
+        </p>
+      ) : null}
+    </section>
+  );
+}
+
+function ConnectedRelayAgentCard({
+  agent,
+  onOpenAgentProfile,
+}: {
+  agent: RelayAgent;
+  onOpenAgentProfile: (pubkey: string) => void;
+}) {
+  const profileQuery = useUserProfileQuery(agent.pubkey);
+  const title = profileQuery.data?.displayName?.trim() || agent.name;
+
+  return (
+    <AgentIdentityCard
+      ariaLabel={`${title} agent profile`}
+      avatarUrl={profileQuery.data?.avatarUrl}
+      dataTestId={`relay-agent-${agent.pubkey}`}
+      label={title}
+      modelLabel="Relay agent"
+      onClick={() => onOpenAgentProfile(agent.pubkey)}
+      statusBadge={
+        <Badge variant={agent.status === "online" ? "success" : "secondary"}>
+          {agent.status === "online" ? "Connected" : agent.status}
+        </Badge>
+      }
+    />
+  );
+}
@@ -13,6 +13,7 @@ import {
   useDeleteManagedAgentMutation,
 } from "@/features/agents/hooks";
 import { useGlobalAgentConfig } from "@/features/agents/useGlobalAgentConfig";
+import { connectedRelayAgents } from "@/features/agents/lib/connectedRelayAgents";
 import { useChannelsQuery } from "@/features/channels/hooks";
 import { usePresenceQuery } from "@/features/presence/hooks";
 import type {
@@ -91,10 +92,15 @@ export function useManagedAgentActions() {
   // AppShell); this hook only reads derived state.
 
   const managedPubkeys = React.useMemo(
-    () => new Set(managedAgents.map((agent) => agent.pubkey)),
+    () => new Set(managedAgents.map((agent) => normalizePubkey(agent.pubkey))),
     [managedAgents],
   );
 
+  const connectedAgents = React.useMemo(
+    () => connectedRelayAgents(relayAgentsQuery.data ?? [], managedPubkeys),
+    [managedPubkeys, relayAgentsQuery.data],
+  );
+
   const managedPubkeyList = React.useMemo(
     () => managedAgents.map((agent) => agent.pubkey),
     [managedAgents],
@@ -403,6 +409,7 @@ export function useManagedAgentActions() {
     managedAgentLogQuery,
     managedPresenceQuery,
     managedAgents,
+    connectedRelayAgents: connectedAgents,
     managedPubkeys,
     channelIdToName,
     channelsByPubkey,