51: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/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 52: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/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 53:T1c7a,"use client"; import { Card } from "@/components/ui/card"; import { Badge } from "@/components/ui/badge"; import { Button } from "@/components/ui/button"; import * as React from "react"; /** * One agent handing work to another. * * Every multi-agent demo shows the arrow. The arrow is not the problem. * * **The failure mode of multi-agent systems is context loss**, and it is * silent. The receiving agent gets a task description and none of the six * things the first agent learned on the way to writing it, then confidently * redoes work, or answers a question that was already settled, or asks the * user something it was told two turns ago. Nothing errors. The output is * merely worse than it should be, in a way that is almost impossible to * attribute afterwards. * * So this component's argument is that **what was NOT carried across is the * part worth rendering.** `carried` is reassuring and mostly ignorable; * `withheld` is where the next bug comes from, and putting it on screen is * how a reader catches it while the run is still cheap to fix. * * **A handoff is a return trip.** Rendering it as a one-way arrow loses the * question of what came back and whether the caller is still waiting. Hence * `returned`, with the result, rather than two unrelated cards. * * A handoff is also a good place to be honest about cost: it is one of the * few architectural decisions that silently multiplies token spend, since the * receiving agent re-reads whatever context it was given. */ export type HandoffState = "handing-off" | "accepted" | "returned" | "failed"; export type AgentHandoffProps = { from: string; to: string; /** Why this agent and not the one already running. One line. */ reason?: string; /** The task as the receiving agent will see it. */ task: string; /** Context carried across. */ carried?: string[]; /** * Context deliberately or accidentally left behind. The interesting half: * this is where the next silent failure comes from. */ withheld?: string[]; state?: HandoffState; /** What came back, once it did. */ result?: string; className?: string; }; /* ------------------------------------------------------------------ */ /* Icons */ /* ------------------------------------------------------------------ */ function ArrowIcon(props: React.SVGProps) { return ( ); } function ReturnIcon(props: React.SVGProps) { return ( ); } const STATE_LABEL: Record = { "handing-off": "handing off", accepted: "working", returned: "returned", failed: "failed", }; /* ------------------------------------------------------------------ */ /* AgentHandoff */ /* ------------------------------------------------------------------ */ export function AgentHandoff({ from, to, reason, task, carried = [], withheld = [], state = "accepted", result, className = "", }: AgentHandoffProps) { const [openWithheld, setOpenWithheld] = React.useState(false); return (

{from} {state === "returned" ? : } {to} {state === "accepted" && } {STATE_LABEL[state]}

{reason && (

{reason}

)}

{task}

{carried.length > 0 && (

Carried across

{item}

)} {withheld.length > 0 && (

{openWithheld && (

{item}

)}

)} {result && (

Returned to {from}

{result}

)}

); } 50:["$","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":[null,["$","$L51",null,{"namespace":"@scrimui","registryDependencies":["badge","button","card"]}]]}],null]}],["$","$L52",null,{"files":[{"path":"src/showcase/agent-handoff/agent-handoff.tsx","content":"$53","type":"registry:ui","target":"components/ui/agent-handoff.tsx"}],"className":"h-[70svh] min-h-80"}]]}]