4b: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"] 4c: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"] 4d:T22de,"use client"; // www.agentui.pro/components/agents/agent-activity import { ChevronDown } from "lucide-react"; import { AnimatePresence, motion, useReducedMotion } from "motion/react"; import { type ReactNode, useCallback, useEffect, useId, useLayoutEffect, useRef, useState, } from "react"; import { ThinkingShimmer } from "@/components/agents/loading-states/thinking-shimmer"; import { AgentDisclosure } from "@/components/agents/agent-disclosure"; import { EASE_OUT, SPRING_LAYOUT, SPRING_SWAP, } from "@/lib/ease"; import { cn } from "@/lib/utils"; import { ActivityRow } from "./activity-row"; import type { AgentActivityContentType, AgentActivityItem, AgentActivityProps, } from "./types"; export type { AgentActivityContentType, AgentActivityItem, AgentActivityProps, AgentActivitySearch, AgentActivityStatus, AgentActivityStep, AgentActivityText, AgentActivityTool, AgentActivityTrace, AgentSearchResult, AgentStepStatus, AgentTraceKind, } from "./types"; function formatDuration(duration: number) { const seconds = Math.max(0, Math.round(duration)); if (seconds < 60) return `${seconds}s`; const minutes = Math.floor(seconds / 60); const remainder = seconds % 60; return remainder === 0 ? `${minutes}m` : `${minutes}m ${remainder}s`; } function useControllableOpen({ open, defaultOpen, onOpenChange, }: { open?: boolean; defaultOpen: boolean; onOpenChange?: (open: boolean) => void; }) { const [internalOpen, setInternalOpen] = useState(defaultOpen); const controlled = open !== undefined; const currentOpen = open ?? internalOpen; const setOpen = useCallback( (next: boolean) => { if (!controlled) setInternalOpen(next); onOpenChange?.(next); }, [controlled, onOpenChange], ); return [currentOpen, setOpen] as const; } function getContentType(items: AgentActivityItem[]): AgentActivityContentType { const first = items[0]?.type; return first && items.every((item) => item.type === first) ? first : "mixed"; } function getActiveLabel(type: AgentActivityContentType) { if (type === "search") return "Searching the web…"; if (type === "tool") return "Running tools…"; if (type === "trace") return "Working through the run…"; if (type === "mixed") return "Working through it…"; return "Thinking…"; } function getSummary( type: AgentActivityContentType, items: AgentActivityItem[], duration: number, ): ReactNode { if (type === "step" || type === "text") { return ( <> Thought for {formatDuration(duration)} ); } if (type === "search") return "Searched the web"; if (type === "tool") { return `Ran ${items.length} ${items.length === 1 ? "tool" : "tools"}`; } if (type === "trace") { const messages = items.filter( (item) => item.type === "trace" && (item.kind === "thinking" || item.kind === "message"), ).length; const tools = items.length - messages; return `${tools} ${tools === 1 ? "tool call" : "tool calls"}, ${messages} ${messages === 1 ? "message" : "messages"}`; } return `Completed ${items.length} ${items.length === 1 ? "step" : "steps"}`; } export function AgentActivity({ items, contentType: initialContentType, status = "working", duration = 0, open, defaultOpen = false, onOpenChange, collapseOnComplete = true, activeLabel, summary, renderWorkingStatus, renderCompletedStatus, maxHeight = 208, className, contentClassName, }: AgentActivityProps) { const reduce = useReducedMotion() ?? false; const baseId = useId(); const triggerId = `${baseId}-trigger`; const contentId = `${baseId}-content`; const contentRef = useRef(null); const viewportRef = useRef(null); const previousStatus = useRef(status); const [contentHeight, setContentHeight] = useState(0); const [currentOpen, setOpen] = useControllableOpen({ open, defaultOpen, onOpenChange, }); const working = status === "working"; const expanded = working || currentOpen; const contentType = items.length ? getContentType(items) : (initialContentType ?? "mixed"); const cappedHeight = Math.min(contentHeight, Math.max(0, maxHeight)); const viewportHeight = working ? Math.max(0, maxHeight) : cappedHeight; const capped = contentHeight > maxHeight; const streamOffset = working ? Math.min(0, viewportHeight - contentHeight) : 0; useLayoutEffect(() => { const node = contentRef.current; if (!node) return; const measure = () => setContentHeight(node.offsetHeight); measure(); if (typeof ResizeObserver === "undefined") return; const observer = new ResizeObserver(measure); observer.observe(node); return () => observer.disconnect(); }, []); useEffect(() => { if (previousStatus.current === "working" && status === "complete") { setOpen(!collapseOnComplete); } previousStatus.current = status; }, [collapseOnComplete, setOpen, status]); const toggle = () => { const next = !currentOpen; setOpen(next); if (next) requestAnimationFrame(() => viewportRef.current?.scrollTo({ top: 0 })); }; const liveLabel = activeLabel ?? getActiveLabel(contentType); const completedSummary = summary ?? getSummary(contentType, items, duration); const maskImage = capped ? working ? "linear-gradient(to bottom, transparent, black 12px)" : "linear-gradient(to bottom, transparent, black 12px, black calc(100% - 12px), transparent)" : undefined; return (

{working ? (

{renderWorkingStatus ? renderWorkingStatus({ label: liveLabel, duration }) : {liveLabel}}

) : ( )}

{items.map((item) => ( ))}

); } 4e:T1e47,import { Check, Circle, FileText, Globe2, ImageIcon, MessageSquare, PencilLine, Search, Sparkles, SquareTerminal, Wrench, } from "lucide-react"; import { AnimatePresence, motion, useReducedMotion } from "motion/react"; import { EASE_OUT, SPRING_LAYOUT } from "@/lib/ease"; import { cn } from "@/lib/utils"; import type { AgentActivityItem, AgentActivitySearch, AgentActivityStep, AgentActivityText, AgentActivityTool, AgentActivityTrace, AgentSearchResult, } from "./types"; function StepRow({ item }: { item: AgentActivityStep }) { const state = item.status ?? "complete"; return (

); } function TextRow({ item }: { item: AgentActivityText }) { return (

{item.content}

); } function SearchResultRow({ result, }: { result: AgentSearchResult; }) { const content = ( <> {result.title} {result.domain ? ( {result.domain} ) : null} ); const className = cn( "flex min-h-7 items-center gap-2 rounded-md px-1.5 py-1 text-left outline-none transition-colors", result.url && "focus-visible:ring-2 focus-visible:ring-ring", ); return result.url ? ( {content} ) : (

{content}

); } function SearchRow({ item }: { item: AgentActivitySearch }) { const reduce = useReducedMotion() ?? false; const enter = reduce ? { opacity: 1 } : { opacity: 0, y: 6 }; const visible = { opacity: 1, y: 0 }; const exit = reduce ? { opacity: 0 } : { opacity: 0, y: -3 }; const transition = reduce ? { duration: 0 } : { opacity: { duration: 0.18, ease: EASE_OUT }, y: SPRING_LAYOUT, layout: SPRING_LAYOUT, }; return (

{item.results?.length ? (

{item.results.map((result) => ( ))}

) : null} {item.moreCount ? ( +{item.moreCount} more ) : null}

); } function ActionIcon({ action }: { action: string }) { if (action === "read") return ; if (action === "edit" || action === "write") { return ; } if (action === "run") return ; return ; } function ToolRow({ item }: { item: AgentActivityTool }) { const action = item.action.charAt(0).toUpperCase() + item.action.slice(1); return (

{action} {item.target} {typeof item.additions === "number" || typeof item.deletions === "number" ? ( {typeof item.additions === "number" ? ( +{item.additions} ) : null} {typeof item.deletions === "number" ? ( −{item.deletions} ) : null} ) : null}

); } function TraceIcon({ kind }: { kind: AgentActivityTrace["kind"] }) { if (kind === "thinking") return ; if (kind === "message") return ; if (kind === "write") return ; if (kind === "run") return ; if (kind === "read") return ; return ; } function TraceRow({ item }: { item: AgentActivityTrace }) { return (

{item.label} {item.detail ? ( {item.detail} ) : ( )}

); } export function ActivityRow({ item }: { item: AgentActivityItem }) { if (item.type === "text") return ; if (item.type === "search") return ; if (item.type === "tool") return ; if (item.type === "trace") return ; return ; } 4f:Tb45,import type { ReactNode } from "react"; export type AgentActivityStatus = "working" | "complete"; export type AgentStepStatus = "pending" | "active" | "complete"; export interface AgentActivityStep { id: string; type: "step"; label: ReactNode; status?: AgentStepStatus; meta?: ReactNode; } export interface AgentActivityText { id: string; type: "text"; content: ReactNode; } export interface AgentSearchResult { id: string; title: ReactNode; domain?: ReactNode; url?: string; icon?: ReactNode; } export interface AgentActivitySearch { id: string; type: "search"; query: ReactNode; results?: AgentSearchResult[]; moreCount?: number; } export interface AgentActivityTool { id: string; type: "tool"; action: "read" | "edit" | "run" | (string & {}); target: ReactNode; additions?: number; deletions?: number; } export type AgentTraceKind = | "thinking" | "message" | "write" | "run" | "read" | (string & {}); export interface AgentActivityTrace { id: string; type: "trace"; kind: AgentTraceKind; label: ReactNode; detail?: ReactNode; icon?: ReactNode; } export type AgentActivityItem = | AgentActivityStep | AgentActivityText | AgentActivitySearch | AgentActivityTool | AgentActivityTrace; export type AgentActivityContentType = AgentActivityItem["type"] | "mixed"; export interface AgentActivityProps { /** Chronological activity entries. Append or update items as events stream. */ items: AgentActivityItem[]; /** Expected activity kind before the first streamed item arrives. */ contentType?: AgentActivityContentType; /** Current run phase. Active runs always stay expanded. */ status?: AgentActivityStatus; /** Elapsed run time, in seconds. Used by the step-only summary. */ duration?: number; /** Controlled expanded state used after the run completes. */ open?: boolean; /** Initial expanded state used after the run completes. */ defaultOpen?: boolean; /** Called when the completed activity disclosure changes state. */ onOpenChange?: (open: boolean) => void; /** Collapse the disclosure when status changes from working to complete. */ collapseOnComplete?: boolean; /** Optional label shown while the run is active. */ activeLabel?: ReactNode; /** Optional completed summary. Derived from the item types by default. */ summary?: ReactNode; /** Optional renderer for the contents of the active status row. */ renderWorkingStatus?: (context: { label: ReactNode; duration: number; }) => ReactNode; /** Optional renderer for the contents before the built-in disclosure chevron. */ renderCompletedStatus?: (context: { summary: ReactNode; duration: number; }) => ReactNode; /** Maximum visible activity height before the stream begins gliding. */ maxHeight?: number; className?: string; contentClassName?: string; } 50:T549,"use client"; import { motion, type HTMLMotionProps, useReducedMotion } from "motion/react"; import type { CSSProperties } from "react"; import { EASE_OUT } from "@/lib/ease"; import { cn } from "@/lib/utils"; export interface AgentDisclosureProps extends Omit, "animate" | "initial"> { open: boolean; openHeight?: CSSProperties["height"]; } /** Shared transform-only reveal for collapsible agent content. */ export function AgentDisclosure({ open, openHeight = "auto", className, style, transition, ...props }: AgentDisclosureProps) { const reduce = useReducedMotion() ?? false; return ( ); } 51:T686,// Shared motion tokens. Easing curves mirror the CSS custom properties in // globals.css; springs are the canonical physics used across components. // Strong custom variants — defaults like `ease-in`/`ease-out` feel weak. export const EASE_OUT = [0.16, 1, 0.3, 1] as const; export const EASE_IN_OUT = [0.77, 0, 0.175, 1] as const; export const EASE_DRAWER = [0.32, 0.72, 0, 1] as const; /** CSS string form of EASE_OUT for inline style transitions. */ export const EASE_OUT_CSS = "cubic-bezier(0.16, 1, 0.3, 1)"; /** Press feedback on buttons and other tappable surfaces. */ export const SPRING_PRESS = { type: "spring", stiffness: 500, damping: 30, mass: 0.6, } as const; /** Content swaps — label/icon slots trading places inside a control. */ export const SPRING_SWAP = { type: "spring", stiffness: 460, damping: 30, mass: 0.55, } as const; /** Overlay panel entrances — modals and sheets summoned by pointer. */ export const SPRING_PANEL = { type: "spring", stiffness: 420, damping: 40, mass: 0.5, } as const; /** Shared-layout glides — pills, indicators and panels morphing between positions. */ export const SPRING_LAYOUT = { type: "spring", stiffness: 360, damping: 32, mass: 0.6, } as const; /** Cursor-follow physics for decorative mouse tracking (magnetic, tilt, dock). */ export const SPRING_MOUSE = { stiffness: 200, damping: 15, mass: 0.3, } as const; /** Dragged handles and fills (sliders) — critically damped `useSpring` config, * so the value follows the pointer butterily and never rebounds off an end. */ export const SPRING_GLIDE = { stiffness: 700, damping: 50, mass: 0.5, } as const; 52:T44e,import type { CSSProperties } from "react"; // The reduced-motion rule travels with the component. app/globals.css calms CSS // animation globally, but the registry bundles imports only, so an installed // copy never receives that reset. // // `!important` because the sweep is an inline style, which outranks a plain rule // in a media query. It selects a marker class carried by TEXT_SHIMMER_CLASS_NAME // so it also reaches consumers that build their own span out of these exports. export const TEXT_SHIMMER_KEYFRAMES = "@keyframes agentui-text-shimmer{from{background-position:200% 0}to{background-position:-200% 0}}" + "@media (prefers-reduced-motion: reduce){.agentui-text-shimmer{animation:none !important}}"; export const TEXT_SHIMMER_CLASS_NAME = "agentui-text-shimmer bg-[length:200%_100%] bg-clip-text text-transparent bg-[linear-gradient(110deg,var(--muted-foreground)_30%,var(--foreground)_50%,var(--muted-foreground)_70%)]"; export function textShimmerStyle(duration: number): CSSProperties { return { animation: `agentui-text-shimmer ${duration}s linear infinite`, }; } 4a:["$","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","clsx",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/clsx","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":"clsx"}]]}]}],["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","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":"lucide-react"}]]}]}],["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","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":"motion"}]]}]}],["$","li","tailwind-merge",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/tailwind-merge","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":"tailwind-merge"}]]}]}]]}],["$","$L4b",null,{"namespace":"@agentui","registryDependencies":[]}]]}],null]}],["$","$L4c",null,{"files":[{"path":"components/agents/agent-activity/index.tsx","content":"$4d","type":"registry:component","target":"@components/agents/agent-activity/index.tsx"},{"path":"components/agents/agent-activity/activity-row.tsx","content":"$4e","type":"registry:component","target":"@components/agents/agent-activity/activity-row.tsx"},{"path":"components/agents/agent-activity/types.ts","content":"$4f","type":"registry:component","target":"@components/agents/agent-activity/types.ts"},{"path":"components/agents/agent-disclosure.tsx","content":"$50","type":"registry:component","target":"@components/agents/agent-disclosure.tsx"},{"path":"components/agents/loading-states/thinking-shimmer.tsx","content":"import type { ReactNode } from \"react\";\nimport { TextShimmer } from \"@/components/motion/text-shimmer\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface ThinkingShimmerProps {\n /** Loading message shown to the user. */\n children?: ReactNode;\n /** Seconds taken for one shimmer pass. */\n duration?: number;\n className?: string;\n}\n\nexport function ThinkingShimmer({\n children = \"Thinking…\",\n duration = 1.8,\n className,\n}: ThinkingShimmerProps) {\n return (\n \n {children}\n \n );\n}\n","type":"registry:component","target":"@components/agents/loading-states/thinking-shimmer.tsx"},{"path":"lib/ease.ts","content":"$51","type":"registry:lib","target":"@lib/ease.ts"},{"path":"lib/utils.ts","content":"import { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs))\n}\n","type":"registry:lib","target":"@lib/utils.ts"},{"path":"components/motion/text-shimmer.tsx","content":"import { cn } from \"@/lib/utils\";\nimport type { ElementType, ReactNode } from \"react\";\nimport {\n TEXT_SHIMMER_CLASS_NAME,\n TEXT_SHIMMER_KEYFRAMES,\n textShimmerStyle,\n} from \"@/lib/text-shimmer\";\n\nexport interface TextShimmerProps {\n children: ReactNode;\n as?: ElementType;\n duration?: number;\n className?: string;\n}\n\nexport function TextShimmer({ children, as: Comp = \"span\", duration = 2.5, className }: TextShimmerProps) {\n return (\n <>\n \n \n {children}\n \n \n );\n}\n","type":"registry:component","target":"@components/motion/text-shimmer.tsx"},{"path":"lib/text-shimmer.ts","content":"$52","type":"registry:lib","target":"@lib/text-shimmer.ts"}],"className":"h-[70svh] min-h-80"}]]}]