@dungle-scrubs/admin-ui-soft 0.0.0-stage → 0.1.0

package/dist/components/assistant-ui/elements/streaming-text.d.ts

@@ -0,0 +1,15 @@
+import { ComponentProps } from "react";
+declare namespace streaming_text_d_exports {
+  export { Segment, StreamingText };
+}
+export interface Segment {
+  text: string;
+  mono?: boolean;
+}
+export declare function StreamingText({ segments, count, streaming, className, ...props }: Omit<ComponentProps<"p">, "children" | "segments" | "count" | "streaming"> & {
+  segments: Segment[];
+  count: number;
+  streaming: boolean;
+}): import("react").JSX.Element;
+//#endregion
+export { streaming_text_d_exports };

package/dist/components/assistant-ui/elements/streaming-text.js

@@ -0,0 +1,45 @@
+"use client";
+import { __exportAll } from "../../../_virtual/_rolldown/runtime.js";
+import { cn } from "../../../lib/utils.js";
+import { take } from "../utils/range.js";
+import { useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/assistant-ui/elements/streaming-text.tsx
+var streaming_text_exports = /* @__PURE__ */ __exportAll({ StreamingText: () => StreamingText });
+function StreamingText({ segments, count, streaming, className, ...props }) {
+	const words = useMemo(() => segments.flatMap((segment) => segment.text.split(" ").map((word) => ({
+		word,
+		mono: segment.mono ?? false
+	}))), [segments]);
+	const shown = take(words, count);
+	return /* @__PURE__ */ jsxs("p", {
+		"data-slot": "streaming-text",
+		className: cn("min-h-[8.5rem] max-w-sm text-sm leading-relaxed text-pretty", className),
+		...props,
+		children: [
+			shown.map(({ word, mono: isMono }, i) => /* @__PURE__ */ jsxs("span", {
+				className: "fade-in animate-in fill-mode-both duration-500 motion-reduce:animate-none",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: cn(isMono && "bg-foreground/[0.06] rounded-md px-1.5 py-0.5 font-mono text-[0.85em]"),
+					children: word
+				}), " "]
+			}, i)),
+			streaming && shown.length === 0 && /* @__PURE__ */ jsxs("span", {
+				role: "status",
+				"aria-label": "Waiting for the reply",
+				className: "inline-flex items-center gap-1 py-2 align-middle",
+				children: [
+					/* @__PURE__ */ jsx("span", { className: "size-1.5 animate-pulse rounded-full bg-muted-foreground motion-reduce:animate-none" }),
+					/* @__PURE__ */ jsx("span", { className: "size-1.5 animate-pulse rounded-full bg-muted-foreground [animation-delay:-0.7s] motion-reduce:animate-none" }),
+					/* @__PURE__ */ jsx("span", { className: "size-1.5 animate-pulse rounded-full bg-muted-foreground [animation-delay:-1.4s] motion-reduce:animate-none" })
+				]
+			}),
+			streaming && shown.length > 0 && /* @__PURE__ */ jsx("span", {
+				"aria-hidden": true,
+				className: "-mb-0.5 ml-0.5 inline-block h-4 w-0.5 animate-pulse rounded-full bg-foreground motion-reduce:animate-none"
+			})
+		]
+	});
+}
+//#endregion
+export { StreamingText, streaming_text_exports };

package/dist/components/assistant-ui/elements/subagent-list.d.ts

@@ -0,0 +1,17 @@
+import { ComponentProps } from "react";
+declare namespace subagent_list_d_exports {
+  export { SubagentItem, SubagentList };
+}
+export interface SubagentItem {
+  name: string;
+  model: string;
+}
+export declare function SubagentList({ agents, completedCount, progress, showSummary, summaryAgent, className, ...props }: Omit<ComponentProps<"div">, "children" | "agents" | "completedCount" | "progress" | "showSummary" | "summaryAgent"> & {
+  agents: readonly SubagentItem[];
+  completedCount: number;
+  progress: readonly number[];
+  showSummary: boolean;
+  summaryAgent: SubagentItem;
+}): import("react").JSX.Element;
+//#endregion
+export { subagent_list_d_exports };

package/dist/components/assistant-ui/elements/subagent-list.js

@@ -0,0 +1,74 @@
+"use client";
+import { __exportAll } from "../../../_virtual/_rolldown/runtime.js";
+import { cn } from "../../../lib/utils.js";
+import { mono, paper } from "./surfaces.js";
+import { pct } from "../utils/range.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CheckIcon, Loader2Icon } from "lucide-react";
+//#region src/components/assistant-ui/elements/subagent-list.tsx
+var subagent_list_exports = /* @__PURE__ */ __exportAll({ SubagentList: () => SubagentList });
+function SubagentList({ agents, completedCount, progress, showSummary, summaryAgent, className, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "subagent-list",
+		className: cn("flex min-h-[14.5rem] w-full max-w-xs flex-col gap-2", className),
+		...props,
+		children: [agents.map((agent, index) => {
+			const done = index < completedCount;
+			const width = progress[index] ?? 0;
+			const percentage = pct(width, 100);
+			return /* @__PURE__ */ jsxs("div", {
+				className: cn(paper, "flex flex-col gap-2 rounded-2xl px-3.5 py-2.5"),
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-2",
+					children: [
+						done ? /* @__PURE__ */ jsx(CheckIcon, { className: "fade-in zoom-in-90 animate-in size-3.5 shrink-0 text-success duration-200" }) : /* @__PURE__ */ jsx(Loader2Icon, { className: "text-muted-foreground size-3.5 shrink-0 animate-spin motion-reduce:animate-none" }),
+						/* @__PURE__ */ jsx("span", {
+							className: "flex-1 truncate text-[13.5px]",
+							children: agent.name
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: cn(mono, "text-muted-foreground"),
+							children: agent.model
+						})
+					]
+				}), /* @__PURE__ */ jsx("span", {
+					role: "progressbar",
+					"aria-label": `${agent.name} progress`,
+					"aria-valuemin": 0,
+					"aria-valuemax": 100,
+					"aria-valuenow": percentage,
+					className: "bg-foreground/[0.06] h-[3px] w-full overflow-hidden rounded-full",
+					children: /* @__PURE__ */ jsx("span", {
+						className: cn("block h-full rounded-full transition-[width] duration-700", done ? "bg-success/70" : "bg-foreground/60"),
+						style: { width: `${percentage}%` }
+					})
+				})]
+			}, agent.name);
+		}), showSummary && /* @__PURE__ */ jsxs("div", {
+			className: cn("bg-card border border-border shadow-sm", "fade-in slide-in-from-bottom-2 animate-in flex flex-col gap-2 rounded-2xl px-3.5 py-2.5 duration-300"),
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2",
+				children: [
+					/* @__PURE__ */ jsx(Loader2Icon, { className: "text-muted-foreground size-3.5 shrink-0 animate-spin motion-reduce:animate-none" }),
+					/* @__PURE__ */ jsx("span", {
+						className: "flex-1 truncate text-[13.5px]",
+						children: summaryAgent.name
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: cn("font-mono text-[11px] tracking-tight", "text-muted-foreground"),
+						children: summaryAgent.model
+					})
+				]
+			}), /* @__PURE__ */ jsx("span", {
+				role: "progressbar",
+				"aria-label": `${summaryAgent.name} progress`,
+				"aria-valuemin": 0,
+				"aria-valuemax": 100,
+				className: "bg-foreground/[0.06] h-[3px] w-full overflow-hidden rounded-full",
+				children: /* @__PURE__ */ jsx("span", { className: "shimmer shimmer-bg block h-full w-full rounded-full motion-reduce:animate-none" })
+			})]
+		})]
+	});
+}
+//#endregion
+export { SubagentList, subagent_list_exports };

package/dist/components/assistant-ui/elements/suggestions.d.ts

@@ -0,0 +1,14 @@
+import { ComponentProps } from "react";
+declare namespace suggestions_d_exports {
+  export { Suggestions, SuggestionsProps };
+}
+export interface SuggestionsProps extends Omit<ComponentProps<"div">, "children"> {
+  suggestions: readonly string[];
+  selectedSuggestion: string | null;
+  cycle: number;
+  onSuggestion: (suggestion: string) => void;
+  variant?: "pills" | "list";
+}
+export declare function Suggestions({ suggestions, selectedSuggestion, cycle, onSuggestion, variant, className, ...props }: SuggestionsProps): import("react").JSX.Element;
+//#endregion
+export { suggestions_d_exports };

package/dist/components/assistant-ui/elements/suggestions.js

@@ -0,0 +1,25 @@
+"use client";
+import { __exportAll } from "../../../_virtual/_rolldown/runtime.js";
+import { cn } from "../../../lib/utils.js";
+import { paper } from "./surfaces.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/assistant-ui/elements/suggestions.tsx
+var suggestions_exports = /* @__PURE__ */ __exportAll({ Suggestions: () => Suggestions });
+function Suggestions({ suggestions, selectedSuggestion, cycle, onSuggestion, variant = "pills", className, ...props }) {
+	const list = variant === "list";
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "suggestions",
+		className: cn(list ? "flex w-full max-w-sm flex-col gap-2" : "flex max-w-md flex-wrap justify-center gap-2", className),
+		...props,
+		children: suggestions.map((suggestion, index) => /* @__PURE__ */ jsx("button", {
+			type: "button",
+			"aria-pressed": selectedSuggestion === suggestion,
+			onClick: () => onSuggestion(suggestion),
+			className: cn(paper, "fade-in slide-in-from-bottom-2 animate-in fill-mode-both flex cursor-pointer items-center text-[13px] transition-transform duration-300 hover:-translate-y-px active:scale-[0.96] motion-reduce:animate-none", list ? "w-full rounded-2xl px-4 py-2.5 text-start" : "rounded-full px-4 py-2", selectedSuggestion === suggestion && "bg-foreground text-background dark:bg-foreground"),
+			style: { animationDelay: `${index * 70}ms` },
+			children: suggestion
+		}, suggestion))
+	}, cycle);
+}
+//#endregion
+export { Suggestions, suggestions_exports };

package/dist/components/assistant-ui/elements/surfaces.d.ts

@@ -0,0 +1,42 @@
+import { ComponentProps } from "react";
+declare namespace surfaces_d_exports {
+  export { ShimmerLabel, SwapLabel, codeScroll, codeSurface, collapsePanel, field, fieldInteractive, floating, ghostButton, iconSwap, iconSwapIn, iconSwapOut, inkButton, labelSwap, labelSwapIn, labelSwapOut, live, mono, paper, pressable };
+}
+export declare const paper = "bg-card border border-border shadow-sm";
+export declare const floating = "bg-popover border border-border shadow-lg";
+export declare const field = "bg-muted";
+export declare const fieldInteractive = "bg-muted transition-colors hover:bg-accent";
+export declare const pressable = "transition-transform duration-150 ease-[cubic-bezier(0.23,1,0.32,1)] active:scale-[0.96] motion-reduce:transition-none";
+export declare const ghostButton = "flex items-center justify-center rounded-full text-muted-foreground outline-none transition-[background-color,color,scale] duration-150 hover:bg-foreground/[0.06] hover:text-foreground/90 active:scale-[0.96] focus-visible:ring-1 focus-visible:ring-foreground/20 motion-reduce:transition-none dark:hover:bg-foreground/[0.09]";
+export declare const inkButton = "bg-foreground text-background transition-[opacity,scale] duration-150 ease-[cubic-bezier(0.23,1,0.32,1)] hover:opacity-90 active:scale-[0.96] motion-reduce:transition-none";
+export declare const iconSwap = "[grid-area:1/1] transition-[opacity,scale,filter] duration-200 ease-[cubic-bezier(0.2,0,0,1)] motion-reduce:transition-none";
+export declare const iconSwapIn = "scale-100 opacity-100 blur-none";
+export declare const iconSwapOut = "scale-[0.25] opacity-0 blur-[4px]";
+export declare const labelSwap = "col-start-1 row-start-1 flex w-max items-center gap-1.5 leading-none transition-[opacity,filter] duration-300 ease-[cubic-bezier(0.23,1,0.32,1)] motion-reduce:transition-none";
+export declare const labelSwapIn = "opacity-100 blur-none";
+export declare const labelSwapOut = "pointer-events-none select-none opacity-0 blur-[2px]";
+export declare const collapsePanel = "h-(--collapsible-panel-height) overflow-hidden transition-[height] duration-200 ease-[cubic-bezier(0.32,0.72,0,1)] data-[ending-style]:h-0 data-[starting-style]:h-0 motion-reduce:transition-none";
+export declare const live = "text-info";
+export declare const mono = "font-mono text-[11px] tracking-tight";
+export declare function ShimmerLabel({ active, className, ...props }: ComponentProps<"span"> & {
+  active?: boolean;
+}): import("react").JSX.Element;
+/**
+ * Scroll region for content that keeps its own whitespace. `whitespace-pre` in
+ * a bounded box clips a long line with no way to reach it, so the rows scroll
+ * instead.
+ *
+ * `codeSurface` wraps all the rows as one block, and the rows are its children.
+ * It cannot go on each row: `min-width: 100%` resolves against the scroll
+ * container's visible width rather than its scroll width, so a per-row width
+ * leaves every row except the longest ending its background at the fold.
+ */
+export declare const codeScroll = "overflow-x-auto";
+export declare const codeSurface = "w-max min-w-full";
+export declare function SwapLabel({ active, children, className }: {
+  active: 0 | 1;
+  children: [React.ReactNode, React.ReactNode];
+  className?: string;
+}): import("react").JSX.Element;
+//#endregion
+export { surfaces_d_exports };

package/dist/components/assistant-ui/elements/surfaces.js

@@ -0,0 +1,87 @@
+"use client";
+import { __exportAll } from "../../../_virtual/_rolldown/runtime.js";
+import { cn } from "../../../lib/utils.js";
+import { useLayoutEffect, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/assistant-ui/elements/surfaces.tsx
+var surfaces_exports = /* @__PURE__ */ __exportAll({
+	ShimmerLabel: () => ShimmerLabel,
+	SwapLabel: () => SwapLabel,
+	codeScroll: () => codeScroll,
+	codeSurface: () => codeSurface,
+	collapsePanel: () => collapsePanel,
+	field: () => field,
+	fieldInteractive: () => fieldInteractive,
+	floating: () => floating,
+	ghostButton: () => ghostButton,
+	iconSwap: () => iconSwap,
+	iconSwapIn: () => iconSwapIn,
+	iconSwapOut: () => iconSwapOut,
+	inkButton: () => inkButton,
+	labelSwap: () => labelSwap,
+	labelSwapIn: () => labelSwapIn,
+	labelSwapOut: () => labelSwapOut,
+	live: () => live,
+	mono: () => mono,
+	paper: () => paper,
+	pressable: () => pressable
+});
+const paper = "bg-card border border-border shadow-sm";
+const floating = "bg-popover border border-border shadow-lg";
+const field = "bg-muted";
+const fieldInteractive = "bg-muted transition-colors hover:bg-accent";
+const pressable = "transition-transform duration-150 ease-[cubic-bezier(0.23,1,0.32,1)] active:scale-[0.96] motion-reduce:transition-none";
+const ghostButton = "flex items-center justify-center rounded-full text-muted-foreground outline-none transition-[background-color,color,scale] duration-150 hover:bg-foreground/[0.06] hover:text-foreground/90 active:scale-[0.96] focus-visible:ring-1 focus-visible:ring-foreground/20 motion-reduce:transition-none dark:hover:bg-foreground/[0.09]";
+const inkButton = "bg-foreground text-background transition-[opacity,scale] duration-150 ease-[cubic-bezier(0.23,1,0.32,1)] hover:opacity-90 active:scale-[0.96] motion-reduce:transition-none";
+const iconSwap = "[grid-area:1/1] transition-[opacity,scale,filter] duration-200 ease-[cubic-bezier(0.2,0,0,1)] motion-reduce:transition-none";
+const iconSwapIn = "scale-100 opacity-100 blur-none";
+const iconSwapOut = "scale-[0.25] opacity-0 blur-[4px]";
+const labelSwap = "col-start-1 row-start-1 flex w-max items-center gap-1.5 leading-none transition-[opacity,filter] duration-300 ease-[cubic-bezier(0.23,1,0.32,1)] motion-reduce:transition-none";
+const labelSwapIn = "opacity-100 blur-none";
+const labelSwapOut = "pointer-events-none select-none opacity-0 blur-[2px]";
+const collapsePanel = "h-(--collapsible-panel-height) overflow-hidden transition-[height] duration-200 ease-[cubic-bezier(0.32,0.72,0,1)] data-[ending-style]:h-0 data-[starting-style]:h-0 motion-reduce:transition-none";
+const live = "text-info";
+const mono = "font-mono text-[11px] tracking-tight";
+function ShimmerLabel({ active = true, className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		className: cn(active && "shimmer [--shimmer-color:var(--color-foreground)] dark:[--shimmer-color:initial] motion-reduce:animate-none", className),
+		...props
+	});
+}
+/**
+* Scroll region for content that keeps its own whitespace. `whitespace-pre` in
+* a bounded box clips a long line with no way to reach it, so the rows scroll
+* instead.
+*
+* `codeSurface` wraps all the rows as one block, and the rows are its children.
+* It cannot go on each row: `min-width: 100%` resolves against the scroll
+* container's visible width rather than its scroll width, so a per-row width
+* leaves every row except the longest ending its background at the fold.
+*/
+const codeScroll = "overflow-x-auto";
+const codeSurface = "w-max min-w-full";
+function SwapLabel({ active, children, className }) {
+	const layers = [useRef(null), useRef(null)];
+	const [width, setWidth] = useState(null);
+	useLayoutEffect(() => {
+		const target = layers[active]?.current;
+		if (!target) return void 0;
+		const measure = () => setWidth(Math.ceil(target.getBoundingClientRect().width));
+		measure();
+		const observer = new ResizeObserver(measure);
+		observer.observe(target);
+		return () => observer.disconnect();
+	}, [active]);
+	return /* @__PURE__ */ jsx("span", {
+		style: width === null ? void 0 : { width },
+		className: cn("grid overflow-x-clip transition-[width] duration-300 ease-[cubic-bezier(0.23,1,0.32,1)] motion-reduce:transition-none", className),
+		children: children.map((layer, index) => /* @__PURE__ */ jsx("span", {
+			ref: layers[index],
+			"aria-hidden": active !== index,
+			className: cn(labelSwap, active === index ? labelSwapIn : labelSwapOut),
+			children: layer
+		}, index))
+	});
+}
+//#endregion
+export { ShimmerLabel, SwapLabel, codeScroll, codeSurface, collapsePanel, field, fieldInteractive, floating, ghostButton, iconSwap, iconSwapIn, iconSwapOut, inkButton, labelSwap, labelSwapIn, labelSwapOut, live, mono, paper, pressable, surfaces_exports };

package/dist/components/assistant-ui/elements/syntax-highlighter.d.ts

@@ -0,0 +1,7 @@
+import { SyntaxHighlighterProps } from "@assistant-ui/react-markdown";
+declare namespace syntax_highlighter_d_exports {
+  export { SyntaxHighlighter };
+}
+export declare const SyntaxHighlighter: (props: SyntaxHighlighterProps) => import("react").JSX.Element;
+//#endregion
+export { syntax_highlighter_d_exports };

package/dist/components/assistant-ui/elements/syntax-highlighter.js

@@ -0,0 +1,41 @@
+import { __exportAll } from "../../../_virtual/_rolldown/runtime.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { PrismLight } from "react-syntax-highlighter";
+import json from "react-syntax-highlighter/dist/esm/languages/prism/json";
+import python from "react-syntax-highlighter/dist/esm/languages/prism/python";
+import tsx from "react-syntax-highlighter/dist/esm/languages/prism/tsx";
+import { makePrismLightSyntaxHighlighter } from "@assistant-ui/react-syntax-highlighter";
+import { coldarkCold, coldarkDark } from "react-syntax-highlighter/dist/cjs/styles/prism";
+//#region src/components/assistant-ui/elements/syntax-highlighter.tsx
+var syntax_highlighter_exports = /* @__PURE__ */ __exportAll({ SyntaxHighlighter: () => SyntaxHighlighter });
+PrismLight.registerLanguage("js", tsx);
+PrismLight.registerLanguage("jsx", tsx);
+PrismLight.registerLanguage("ts", tsx);
+PrismLight.registerLanguage("tsx", tsx);
+PrismLight.registerLanguage("python", python);
+PrismLight.registerLanguage("json", json);
+const withoutPreBackground = (theme) => {
+	const { background: _background, ...pre } = theme["pre[class*=\"language-\"]"] ?? {};
+	return {
+		...theme,
+		"pre[class*=\"language-\"]": pre
+	};
+};
+const syntaxHighlighterCustomStyle = {
+	margin: 0,
+	width: "100%",
+	padding: "1.5rem 1rem"
+};
+const LightSyntaxHighlighter = makePrismLightSyntaxHighlighter({
+	style: withoutPreBackground(coldarkCold),
+	customStyle: syntaxHighlighterCustomStyle,
+	className: "dark:hidden"
+});
+const DarkSyntaxHighlighter = makePrismLightSyntaxHighlighter({
+	style: withoutPreBackground(coldarkDark),
+	customStyle: syntaxHighlighterCustomStyle,
+	className: "hidden dark:block"
+});
+const SyntaxHighlighter = (props) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(LightSyntaxHighlighter, { ...props }), /* @__PURE__ */ jsx(DarkSyntaxHighlighter, { ...props })] });
+//#endregion
+export { SyntaxHighlighter, syntax_highlighter_exports };

package/dist/components/assistant-ui/elements/task-card.aui.d.ts

@@ -0,0 +1,24 @@
+import { TaskCardState } from "./task-card.js";
+import { TASK_PAGE_SIZE } from "../utils/task.js";
+import { FC } from "react";
+import { MessagePrimitive, ToolCallMessagePart, ToolCallMessagePartProps, ToolCallMessagePartStatus } from "@assistant-ui/react";
+declare namespace task_card_aui_d_exports {
+  export { TASK_PAGE_SIZE, TaskCard, TaskCardState, TaskGroup, TaskPart, isTaskPart };
+}
+export type TaskPart = ToolCallMessagePart & {
+  readonly status: ToolCallMessagePartStatus;
+} & Partial<Pick<ToolCallMessagePartProps, "addResult" | "resume" | "respondToApproval">>;
+export declare const isTaskPart: (part: {
+  readonly type: string;
+  readonly messages?: unknown;
+}) => boolean;
+export declare const TaskCard: FC<{
+  part: TaskPart;
+  className?: string;
+}>;
+export declare const TaskGroup: FC<{
+  group: MessagePrimitive.GroupedParts.GroupPart;
+  className?: string;
+}>;
+//#endregion
+export { TASK_PAGE_SIZE, type TaskCardState, task_card_aui_d_exports };

package/dist/components/assistant-ui/elements/task-card.aui.js

@@ -0,0 +1,136 @@
+"use client";
+import { __exportAll } from "../../../_virtual/_rolldown/runtime.js";
+import { cn } from "../../../lib/utils.js";
+import { MarkdownText } from "./markdown-text.js";
+import { ToolFallback, ToolFallbackApproval, ToolFallbackError, formatUnknownValue, offersInterruptAction } from "./tool-fallback.aui.js";
+import { mono } from "./surfaces.js";
+import { formatElapsed, taskLabel, taskMeta, taskStateOf, useTaskElapsed } from "../utils/task.js";
+import { TaskCard as TaskCard$1 } from "./task-card.js";
+import { useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { MessagePrimitive, ReadonlyThreadProvider, ThreadPrimitive, useAui, useAuiState } from "@assistant-ui/react";
+//#region src/components/assistant-ui/elements/task-card.aui.tsx
+var task_card_aui_exports = /* @__PURE__ */ __exportAll({
+	TASK_PAGE_SIZE: () => 4,
+	TaskCard: () => TaskCard,
+	TaskGroup: () => TaskGroup,
+	isTaskPart: () => isTaskPart
+});
+const isTaskPart = (part) => part.type === "tool-call" && part.messages !== void 0;
+const KEY_SEPARATOR = String.fromCharCode(31);
+const ROLE_LABELS = {
+	user: "instruction",
+	assistant: "agent",
+	system: "system"
+};
+const NestedToolCall = (part) => isTaskPart(part) ? /* @__PURE__ */ jsx(TaskCard, { part }) : /* @__PURE__ */ jsx(ToolFallback, { ...part });
+const NestedMessage = () => {
+	const role = useAuiState((s) => s.message.role);
+	return /* @__PURE__ */ jsxs(MessagePrimitive.Root, {
+		"data-slot": "aui_task-transcript-message",
+		"data-role": role,
+		className: "flex flex-col gap-1 text-xs leading-relaxed",
+		children: [/* @__PURE__ */ jsx("span", {
+			className: cn(mono, "text-muted-foreground"),
+			children: ROLE_LABELS[role]
+		}), /* @__PURE__ */ jsx(MessagePrimitive.Parts, { components: {
+			Text: MarkdownText,
+			tools: { Fallback: NestedToolCall }
+		} })]
+	});
+};
+const TaskTranscript = ({ messages }) => /* @__PURE__ */ jsx(ReadonlyThreadProvider, {
+	messages,
+	children: /* @__PURE__ */ jsx(ThreadPrimitive.Messages, { children: () => /* @__PURE__ */ jsx(NestedMessage, {}) })
+});
+const TaskResult = ({ result }) => typeof result === "string" ? /* @__PURE__ */ jsx("p", {
+	className: "m-0 whitespace-pre-wrap",
+	children: result
+}) : /* @__PURE__ */ jsx("pre", {
+	className: "m-0 overflow-x-auto whitespace-pre-wrap",
+	children: formatUnknownValue(result, 2)
+});
+const TaskCard = ({ part, className }) => {
+	const elapsedMs = useTaskElapsed(part.timing, part.status.type === "running" || part.status.type === "requires-action");
+	const canAnswer = useAuiState((s) => s.thread.capabilities.answerToolCall);
+	const messages = part.messages ?? [];
+	const showError = part.status.type === "incomplete" && part.status.error !== void 0 && part.status.error !== null;
+	const result = showError || part.result !== void 0 ? /* @__PURE__ */ jsxs(Fragment$1, { children: [showError && /* @__PURE__ */ jsx(ToolFallbackError, { status: part.status }), part.result !== void 0 && /* @__PURE__ */ jsx(TaskResult, { result: part.result })] }) : void 0;
+	const approvalPending = part.approval == null || part.approval.approved === void 0 && part.approval.resolution === void 0;
+	const actions = part.status.type === "requires-action" && approvalPending && offersInterruptAction(part.status, part.approval, part.interrupt) && (canAnswer || part.approval?.prompt) ? /* @__PURE__ */ jsx(ToolFallbackApproval, {
+		status: part.status,
+		...part.approval !== void 0 && { approval: part.approval },
+		...part.interrupt !== void 0 && { interrupt: part.interrupt },
+		...part.addResult && { addResult: part.addResult },
+		...part.resume && { resume: part.resume },
+		...part.respondToApproval && { respondToApproval: part.respondToApproval }
+	}) : void 0;
+	return /* @__PURE__ */ jsx(TaskCard$1, {
+		className,
+		label: taskLabel(part.toolName, part.args),
+		meta: taskMeta(part.args),
+		state: taskStateOf(part.status, part.isError),
+		elapsed: elapsedMs === void 0 ? void 0 : formatElapsed(elapsedMs),
+		actions,
+		result,
+		children: messages.length > 0 ? /* @__PURE__ */ jsx(TaskTranscript, { messages }) : void 0
+	});
+};
+const TaskLane = ({ index }) => {
+	const aui = useAui();
+	const part = useAuiState((s) => s.message.parts[index]);
+	if (part?.type !== "tool-call") return null;
+	const client = aui.message.part({ toolCallId: part.toolCallId });
+	return /* @__PURE__ */ jsx(TaskCard, { part: {
+		...part,
+		addResult: client.addToolResult,
+		resume: client.resumeToolCall,
+		respondToApproval: client.respondToToolApproval
+	} });
+};
+const TaskGroup = ({ group, className }) => {
+	const [visible, setVisible] = useState(4);
+	const { indices, counts } = group;
+	const laneKeys = useAuiState((s) => indices.map((index) => {
+		const part = s.message.parts[index];
+		return part?.type === "tool-call" ? part.toolCallId : String(index);
+	}).join(KEY_SEPARATOR)).split(KEY_SEPARATOR);
+	const failed = useAuiState((s) => indices.reduce((count, index) => {
+		const part = s.message.parts[index];
+		return part?.type === "tool-call" && taskStateOf(part.status, part.isError) === "failed" ? count + 1 : count;
+	}, 0));
+	if (indices.length === 1) return /* @__PURE__ */ jsx(TaskLane, { index: indices[0] });
+	const shown = indices.slice(0, visible);
+	const hidden = indices.length - shown.length;
+	const summary = [
+		`${indices.length} tasks`,
+		counts.running > 0 && `${counts.running} running`,
+		counts.requiresAction > 0 && `${counts.requiresAction} waiting`,
+		failed > 0 && `${failed} failed`
+	].filter((entry) => typeof entry === "string");
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "aui_task-group",
+		className: cn("flex w-full max-w-sm flex-col gap-2", className),
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				"data-slot": "aui_task-group-summary",
+				className: "text-muted-foreground px-1 text-xs",
+				children: summary.join(" · ")
+			}),
+			shown.map((index, position) => /* @__PURE__ */ jsx(TaskLane, { index }, laneKeys[position] ?? index)),
+			hidden > 0 && /* @__PURE__ */ jsxs("button", {
+				type: "button",
+				"data-slot": "aui_task-group-more",
+				onClick: () => setVisible((count) => count + 4),
+				className: "text-muted-foreground hover:text-foreground w-fit px-1 text-xs transition-colors",
+				children: [
+					"Show ",
+					Math.min(hidden, 4),
+					" more"
+				]
+			})
+		]
+	});
+};
+//#endregion
+export { TaskCard, TaskGroup, isTaskPart, task_card_aui_exports };

package/dist/components/assistant-ui/elements/task-card.d.ts

@@ -0,0 +1,22 @@
+import { ComponentProps, ReactNode } from "react";
+declare namespace task_card_d_exports {
+  export { TaskCard, TaskCardState, TaskStateIcon };
+}
+export type TaskCardState = "working" | "waiting" | "done" | "failed" | "cancelled";
+export declare function TaskStateIcon({ state, className }: {
+  state: TaskCardState;
+  className?: string;
+}): import("react").JSX.Element;
+export declare function TaskCard({ label, meta, state, elapsed, actions, result, open, onOpenChange, children, className, ...props }: Omit<ComponentProps<"div">, "children" | "label" | "state" | "result" | "open" | "onOpenChange"> & {
+  label: string;
+  meta?: string | undefined;
+  state: TaskCardState;
+  elapsed?: string | undefined;
+  actions?: ReactNode | undefined;
+  result?: ReactNode | undefined;
+  open?: boolean | undefined;
+  onOpenChange?: ((open: boolean) => void) | undefined;
+  children?: ReactNode | undefined;
+}): import("react").JSX.Element;
+//#endregion
+export { task_card_d_exports };