4c:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4d:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 4e:T1abf,/** * The agents in a run, as a group inside the sidebar an app already has. * * ## Why a blobatar and not an icon * * Agents are spawned, not registered. There is no avatar upload step and no * design pass per agent, and the set changes between one run and the next, so * whatever identifies them has to be derivable from the only thing they have: a * name. Initials collapse ("researcher" and "reviewer" are both R in a 32px * circle) and a shared robot glyph identifies nothing at all. A blobatar is a * different creature per string, and the same creature every time that string * comes back, which is what makes a list of them scannable rather than * decorative. * * ## Why a `SidebarGroup` rather than its own panel * * This used to be a hand-rolled `

`, which was the wrong shape for the * place it goes: an agent runner already has a sidebar, and a second one beside * it is chrome duplicated rather than a feature. As a group it drops into * whatever the app already has, between the project switcher and the recents, * and inherits the things that are properties of the sidebar rather than of * this list: the collapse state, the mobile sheet, the keyboard shortcut, the * active-row styling. Nothing here reimplements any of them. * * The corollary is that it must be rendered inside a `SidebarProvider`. * `SidebarMenuButton` reads the sidebar's state for its collapsed behaviour, so * outside a provider this throws rather than degrading, which is the better of * the two failures: it is a component that only makes sense in a sidebar. * * ## The rows are animated * * Every face is a `PresenceAvatar`, and those are `animate="always"`: an aside * of agents is the one list where "these are running right now" is the whole * message, and faces that breathe carry it before any label does. That makes * each row an inline SVG rather than an image, which is affordable for a fleet * and would not be for a directory. It also needs the library's stylesheet, * imported once, anywhere in your app: `import "blobatar/motion.css"`. */ "use client"; import type { BlobatarOptions } from "blobatar"; import { PresenceAvatar, type PresenceState } from "@/components/ui/presence-avatar"; import { SidebarGroup, SidebarGroupLabel, SidebarMenu, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, } from "@/components/ui/sidebar"; import { cn } from "@/lib/utils"; export type Agent = { /** The seed for the face, and the label, unless `title` says otherwise. */ name: string; /** A friendlier name to show. The face still comes from `name`. */ title?: string; /** Drives the dot, and the thinking indicator. See `PresenceAvatar`. */ state?: PresenceState; /** One line of what it is doing right now. Truncated, never wrapped. */ status?: string; /** * The one number worth seeing without opening the agent: elapsed time, a * queue depth, a token count. Whatever your runner actually has. */ badge?: string | number; }; export type AgentListProps = { agents: Agent[]; /** The group heading. */ label?: string; /** `name` of the selected agent, if the surrounding page tracks one. */ activeName?: string; onSelect?: (agent: Agent) => void; /** * Passed to every face. A house style belongs on the list rather than on each * agent: `{ traits: { shape: [0.11, 0.54, 0.99] } }` narrows the roster to * three silhouettes, and a list drawn from one set of rules is what makes it * read as one fleet. */ blobatar?: BlobatarOptions; className?: string; }; export function AgentList({ agents, label = "Agents", activeName, onSelect, blobatar, className, }: AgentListProps) { /* * A count in the heading, because the useful question about a fleet is "how * many are still going", and that is the one number a list of rows makes you * count by hand. */ const working = agents.filter(agent => agent.state === "thinking").length; return ( {label} {working}/{agents.length} {agents.map(agent => ( {/* `size="lg"`, which is the size shadcn's menu button has for exactly this row: a face beside two lines. The default is `h-8` and would crop both. `tooltip` earns its place rather than repeating the label. It is shown only when the rail is collapsed to icons, which is the one state where the name is not on screen and a face on its own is being asked to carry the whole row. */} onSelect?.(agent)} tooltip={agent.title ?? agent.name} /* Taller than shadcn's `lg`, which is `h-12` and sized for a face that ends where its box does. A thinking agent hangs its indicator below the avatar, so at `h-12` the dots land on the row's own edge and read as belonging to the agent underneath. `h-14` is the smallest that clears them. `pr-8` is room for the badge, which is positioned over the row rather than laid out in it. Only when there is one. */ className={cn("h-14", agent.badge != null && "pr-8")} > {/* `min-w-0` on the text column, and it is load-bearing rather than tidy: a flex child defaults to `min-width: auto`, so a long status line refuses to shrink and pushes the row wider than the sidebar instead of truncating inside it. */}

{agent.title ?? agent.name} {agent.status ? ( {agent.status} ) : null}

{agent.badge != null ? ( {agent.badge} ) : null} ))} ); } 4b:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","blobatar",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/blobatar","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"blobatar"}]]}]}],["$","li","@blobatar/react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40blobatar%2Freact","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@blobatar/react"}]]}]}]]}],["$","$L4c",null,{"namespace":"@blobatar","registryDependencies":["sidebar","https://blobatar.dev/r/presence-avatar.json"]}]]}],null]}],["$","$L4d",null,{"files":[{"path":"registry/agent-list.tsx","content":"$4e","type":"registry:ui","target":"components/ui/agent-list.tsx"}],"className":"h-[70svh] min-h-80"}]]}]