@mcp-b/react-components 0.14.2 → 0.16.0

package/dist/components/ResizableSidePanel.js

@@ -0,0 +1,151 @@
+import { t as cx } from "../class-names-9UtZwb0J.js";
+import { Separator } from "./Separator.js";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/ResizableSidePanel.tsx
+const ResizableSidePanelContext = React.createContext(null);
+function clampSize(size, minSize, maxSize) {
+	return Math.min(maxSize, Math.max(minSize, size));
+}
+function panelSizeDelta(physicalDelta, side, direction) {
+	const sideDirection = side === "start" ? 1 : -1;
+	const writingDirection = direction === "ltr" ? 1 : -1;
+	return physicalDelta * sideDirection * writingDirection;
+}
+/**
+* Shared sizing seam for a logical start- or end-side panel. Consumers retain
+* ownership of panel placement, visibility, compact behavior, and top bars.
+*/
+function ResizableSidePanelRoot({ children, className, defaultSize, keyboardStep = 24, label, maxSize, minSize, onSizeChange, ref, side = "start", style, ...props }) {
+	const [size, setInnerSize] = React.useState(() => clampSize(defaultSize, minSize, maxSize));
+	const cleanupResizeRef = React.useRef(null);
+	const setSize = React.useCallback((nextSize) => {
+		const clampedSize = clampSize(nextSize, minSize, maxSize);
+		setInnerSize(clampedSize);
+		onSizeChange?.(clampedSize);
+	}, [
+		maxSize,
+		minSize,
+		onSizeChange
+	]);
+	const stopResize = React.useCallback(() => {
+		cleanupResizeRef.current?.();
+		cleanupResizeRef.current = null;
+	}, []);
+	React.useEffect(() => stopResize, [stopResize]);
+	const beginResize = React.useCallback((event) => {
+		if (event.button !== 0) return;
+		event.preventDefault();
+		stopResize();
+		const startX = event.clientX;
+		const startSize = size;
+		const pointerId = event.pointerId;
+		const direction = getComputedStyle(event.currentTarget).direction === "rtl" ? "rtl" : "ltr";
+		const onMove = (move) => {
+			if (move.pointerId !== pointerId) return;
+			setSize(startSize + panelSizeDelta(move.clientX - startX, side, direction));
+		};
+		const onEnd = (end) => {
+			if (end.pointerId === pointerId) stopResize();
+		};
+		const cleanup = () => {
+			window.removeEventListener("pointermove", onMove);
+			window.removeEventListener("pointerup", onEnd);
+			window.removeEventListener("pointercancel", onEnd);
+			document.body.classList.remove("is-resizing-side-panel");
+		};
+		cleanupResizeRef.current = cleanup;
+		document.body.classList.add("is-resizing-side-panel");
+		window.addEventListener("pointermove", onMove);
+		window.addEventListener("pointerup", onEnd);
+		window.addEventListener("pointercancel", onEnd);
+	}, [
+		setSize,
+		side,
+		size,
+		stopResize
+	]);
+	const context = React.useMemo(() => ({
+		beginResize,
+		keyboardStep,
+		label,
+		maxSize,
+		minSize,
+		setSize,
+		side,
+		size
+	}), [
+		beginResize,
+		keyboardStep,
+		label,
+		maxSize,
+		minSize,
+		setSize,
+		side,
+		size
+	]);
+	const rootStyle = {
+		...style,
+		"--resizable-side-panel-size": `${size}px`
+	};
+	return /* @__PURE__ */ jsx(ResizableSidePanelContext.Provider, {
+		value: context,
+		children: /* @__PURE__ */ jsx("div", {
+			ref,
+			"data-slot": "resizable-side-panel",
+			"data-panel-side": side,
+			className: cx("resizable-side-panel", className),
+			style: rootStyle,
+			...props,
+			children
+		})
+	});
+}
+function ResizableSidePanelHandle({ className, onKeyDown, onPointerDown, ref, ...props }) {
+	const context = React.useContext(ResizableSidePanelContext);
+	if (!context) throw new Error("ResizableSidePanel.Handle must be rendered inside ResizableSidePanel.Root.");
+	const { beginResize, keyboardStep, label, maxSize, minSize, setSize, side, size } = context;
+	const resizeBy = (physicalDelta, direction) => {
+		setSize(size + panelSizeDelta(physicalDelta, side, direction));
+	};
+	return /* @__PURE__ */ jsx(Separator, {
+		...props,
+		ref,
+		decorative: false,
+		orientation: "vertical",
+		tabIndex: 0,
+		"aria-label": `Resize ${label} panel`,
+		"aria-valuemin": minSize,
+		"aria-valuemax": maxSize,
+		"aria-valuenow": size,
+		className: cx("resizable-side-panel__handle", className),
+		onPointerDown: (event) => {
+			onPointerDown?.(event);
+			if (!event.defaultPrevented) beginResize(event);
+		},
+		onKeyDown: (event) => {
+			onKeyDown?.(event);
+			if (event.defaultPrevented) return;
+			const direction = getComputedStyle(event.currentTarget).direction === "rtl" ? "rtl" : "ltr";
+			if (event.key === "ArrowLeft") {
+				event.preventDefault();
+				resizeBy(-keyboardStep, direction);
+			} else if (event.key === "ArrowRight") {
+				event.preventDefault();
+				resizeBy(keyboardStep, direction);
+			} else if (event.key === "Home") {
+				event.preventDefault();
+				setSize(minSize);
+			} else if (event.key === "End") {
+				event.preventDefault();
+				setSize(maxSize);
+			}
+		}
+	});
+}
+const ResizableSidePanel = {
+	Root: ResizableSidePanelRoot,
+	Handle: ResizableSidePanelHandle
+};
+//#endregion
+export { ResizableSidePanel };

package/dist/components/ResponsiveSidebarShell.d.ts

@@ -0,0 +1,2 @@
+import { i as ResponsiveSidebarShellTopBarControls, n as ResponsiveSidebarShellControls, r as ResponsiveSidebarShellProps, t as ResponsiveSidebarShell } from "../ResponsiveSidebarShell-Dd9DCcBT.js";
+export { ResponsiveSidebarShell, ResponsiveSidebarShellControls, ResponsiveSidebarShellProps, ResponsiveSidebarShellTopBarControls };

package/dist/components/ResponsiveSidebarShell.js

@@ -0,0 +1,129 @@
+import { t as cx } from "../class-names-9UtZwb0J.js";
+import { z as SidebarIcon } from "../icons-CpfUer49.js";
+import { Button } from "./Button.js";
+import { n as mergeRefs } from "../merge-refs-DF_7w2x_.js";
+import { AppTopBar } from "./AppTopBar.js";
+import { ResizableSidePanel } from "./ResizableSidePanel.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/ResponsiveSidebarShell.tsx
+const sidebarDefaultWidth = 256;
+const sidebarMinWidth = 224;
+const sidebarMaxWidth = 384;
+const sidebarKeyboardStep = 24;
+const compactSidebarWidthRem = 56;
+function useControllableSidebar({ sidebarOpen, defaultSidebarOpen, onSidebarOpenChange }) {
+	const [innerOpen, setInnerOpen] = React.useState(defaultSidebarOpen ?? true);
+	return [sidebarOpen ?? innerOpen, React.useCallback((next) => {
+		if (sidebarOpen === void 0) setInnerOpen(next);
+		onSidebarOpenChange?.(next);
+	}, [sidebarOpen, onSidebarOpenChange])];
+}
+function isCompactSidebar(root) {
+	const rootFontSize = Number.parseFloat(getComputedStyle(document.documentElement).fontSize) || 16;
+	return root.getBoundingClientRect().width <= compactSidebarWidthRem * rootFontSize;
+}
+/**
+* Responsive master-detail shell with a resizable desktop sidebar and a compact
+* floating sidebar that leaves the main content in place as a dismiss target.
+*/
+function ResponsiveSidebarShell({ sidebar, topBar, sidebarLabel, sidebarOpen, defaultSidebarOpen, defaultSidebarWidth = sidebarDefaultWidth, onSidebarOpenChange, toolbarLabel = "Sidebar controls", showMainLabel = "Show main content", className, children, ref, style, ...props }) {
+	const sidebarId = React.useId();
+	const rootRef = React.useRef(null);
+	const mainRef = React.useRef(null);
+	const openerRef = React.useRef(null);
+	const [isSidebarOpen, setSidebarOpen] = useControllableSidebar({
+		sidebarOpen,
+		defaultSidebarOpen,
+		onSidebarOpenChange
+	});
+	const toggleLabel = `${sidebarLabel.charAt(0).toUpperCase()}${sidebarLabel.slice(1)}`;
+	const toggleTooltip = `${isSidebarOpen ? "Hide" : "Show"} ${sidebarLabel}`;
+	const closeSidebar = React.useCallback(() => {
+		setSidebarOpen(false);
+		queueMicrotask(() => mainRef.current?.focus({ preventScroll: true }));
+	}, [setSidebarOpen]);
+	const closeSidebarOnCompact = React.useCallback(() => {
+		if (rootRef.current && isCompactSidebar(rootRef.current)) closeSidebar();
+	}, [closeSidebar]);
+	const toggleSidebar = React.useCallback((trigger) => {
+		if (trigger) openerRef.current = trigger;
+		setSidebarOpen(!isSidebarOpen);
+	}, [isSidebarOpen, setSidebarOpen]);
+	const dismissSidebar = React.useCallback(() => {
+		setSidebarOpen(false);
+		queueMicrotask(() => openerRef.current?.focus({ preventScroll: true }));
+	}, [setSidebarOpen]);
+	const sidebarContent = typeof sidebar === "function" ? sidebar({
+		closeSidebar,
+		closeSidebarOnCompact
+	}) : sidebar;
+	const sidebarToggle = /* @__PURE__ */ jsx(AppTopBar.Button, {
+		className: "responsive-sidebar-shell__toggle",
+		label: toggleLabel,
+		tooltip: toggleTooltip,
+		type: "button",
+		"aria-controls": sidebarId,
+		"aria-expanded": isSidebarOpen,
+		onClick: (event) => toggleSidebar(event.currentTarget),
+		children: /* @__PURE__ */ jsx(SidebarIcon, {})
+	});
+	const topBarContent = typeof topBar === "function" ? topBar({
+		sidebarId,
+		sidebarOpen: isSidebarOpen,
+		sidebarToggle,
+		toggleSidebar
+	}) : topBar;
+	return /* @__PURE__ */ jsxs("div", {
+		ref: mergeRefs(rootRef, ref),
+		className: cx("responsive-sidebar-shell", className),
+		style,
+		...props,
+		onKeyDown: (event) => {
+			props.onKeyDown?.(event);
+			if (!event.defaultPrevented && event.key === "Escape" && isSidebarOpen && rootRef.current && isCompactSidebar(rootRef.current)) {
+				event.preventDefault();
+				dismissSidebar();
+			}
+		},
+		children: [topBarContent ?? /* @__PURE__ */ jsx(AppTopBar.Root, {
+			"aria-label": toolbarLabel,
+			children: /* @__PURE__ */ jsx(AppTopBar.Leading, { children: sidebarToggle })
+		}), /* @__PURE__ */ jsxs(ResizableSidePanel.Root, {
+			className: "responsive-sidebar-shell__frame",
+			label: sidebarLabel,
+			side: "start",
+			defaultSize: defaultSidebarWidth,
+			minSize: sidebarMinWidth,
+			maxSize: sidebarMaxWidth,
+			keyboardStep: sidebarKeyboardStep,
+			"data-sidebar-open": isSidebarOpen ? "true" : "false",
+			children: [
+				isSidebarOpen ? /* @__PURE__ */ jsx(ResizableSidePanel.Handle, { className: "responsive-sidebar-shell__resizer" }) : null,
+				/* @__PURE__ */ jsx("div", {
+					id: sidebarId,
+					className: "responsive-sidebar-shell__sidebar",
+					"aria-hidden": isSidebarOpen ? void 0 : true,
+					inert: isSidebarOpen ? void 0 : true,
+					children: sidebarContent
+				}),
+				/* @__PURE__ */ jsx("div", {
+					ref: mainRef,
+					className: "responsive-sidebar-shell__main",
+					tabIndex: -1,
+					children
+				}),
+				isSidebarOpen ? /* @__PURE__ */ jsx(Button, {
+					type: "button",
+					variant: "ghost",
+					color: "neutral",
+					className: "responsive-sidebar-shell__peek",
+					"aria-label": showMainLabel,
+					onClick: closeSidebar
+				}) : null
+			]
+		})]
+	});
+}
+//#endregion
+export { ResponsiveSidebarShell };

package/dist/components/Select.d.ts

@@ -1,2 +1,2 @@
-import { _ as SelectTriggerProps, a as SelectIconProps, c as SelectItemTextProps, d as SelectPortalProps, f as SelectPositionerProps, g as SelectSeparatorProps, h as SelectScrollUpArrowProps, i as SelectGroupProps, l as SelectListProps, m as SelectScrollDownArrowProps, n as SelectBackdropProps, o as SelectItemIndicatorProps, p as SelectProps, r as SelectGroupLabelProps, s as SelectItemProps, t as Select, u as SelectPopupProps, v as SelectValueProps } from "../Select-Dl_vF_Bt.js";
-export { Select, SelectBackdropProps, SelectGroupLabelProps, SelectGroupProps, SelectIconProps, SelectItemIndicatorProps, SelectItemProps, SelectItemTextProps, SelectListProps, SelectPopupProps, SelectPortalProps, SelectPositionerProps, SelectProps, SelectScrollDownArrowProps, SelectScrollUpArrowProps, SelectSeparatorProps, SelectTriggerProps, SelectValueProps };
+import { _ as SelectSeparatorProps, a as SelectIconProps, c as SelectItemTextProps, d as SelectPopupProps, f as SelectPortalProps, g as SelectScrollUpArrowProps, h as SelectScrollDownArrowProps, i as SelectGroupProps, l as SelectLabelProps, m as SelectProps, n as SelectBackdropProps, o as SelectItemIndicatorProps, p as SelectPositionerProps, r as SelectGroupLabelProps, s as SelectItemProps, t as Select, u as SelectListProps, v as SelectTriggerProps, y as SelectValueProps } from "../Select-BeEsefzh.js";
+export { Select, SelectBackdropProps, SelectGroupLabelProps, SelectGroupProps, SelectIconProps, SelectItemIndicatorProps, SelectItemProps, SelectItemTextProps, SelectLabelProps, SelectListProps, SelectPopupProps, SelectPortalProps, SelectPositionerProps, SelectProps, SelectScrollDownArrowProps, SelectScrollUpArrowProps, SelectSeparatorProps, SelectTriggerProps, SelectValueProps };

package/dist/components/Select.js

@@ -1,4 +1,4 @@
-import { a as CheckIcon, i as ArrowUpIcon, t as ArrowDownIcon } from "../icons-Ba9THQKz.js";
+import { i as ArrowUpIcon, o as CheckIcon, t as ArrowDownIcon } from "../icons-CpfUer49.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Select as Select$1 } from "@base-ui/react/select";
@@ -34,6 +34,15 @@ function SelectRoot(props) {
 		...props
 	});
 }
+function SelectLabel({ className = "", ref, ...props }) {
+	const classes = ["select__label", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(Select$1.Label, {
+		ref,
+		"data-slot": "select-label",
+		className: classes,
+		...props
+	});
+}
 function SelectTrigger({ size = "default", className = "", ref, ...props }) {
 	const normalizedSize = size === "md" ? "default" : size;
 	const classes = [
@@ -203,7 +212,7 @@ function SelectScrollDownArrow({ className = "", children, ref, ...props }) {
 }
 const Select = {
 	Root: SelectRoot,
-	Label: Select$1.Label,
+	Label: SelectLabel,
 	Trigger: SelectTrigger,
 	Value: SelectValue,
 	Icon: SelectIcon,

package/dist/components/Slider.d.ts

@@ -21,6 +21,9 @@ interface SliderOutputProps extends Omit<React.ComponentPropsWithRef<typeof Slid
   className?: string;
   children?: (value: number, values: readonly number[], formattedValues: readonly string[]) => React.ReactNode;
 }
+interface SliderLabelProps extends Omit<React.ComponentPropsWithRef<typeof Slider$1.Label>, "className"> {
+  className?: string;
+}
 /**
  * A slider component for selecting values from a range.
  *
@@ -111,8 +114,17 @@ declare function SliderOutput({
 }: SliderOutputProps & {
   ref?: React.Ref<HTMLOutputElement>;
 }): React.JSX.Element;
+/** Visible label that participates in Base UI's slider naming relationship. */
+declare function SliderLabel({
+  className,
+  ref,
+  ...props
+}: SliderLabelProps & {
+  ref?: React.Ref<HTMLSpanElement>;
+}): React.JSX.Element;
 declare const Slider: {
   Root: typeof SliderRoot;
+  Label: typeof SliderLabel;
   Value: typeof SliderOutput;
   Control: typeof SliderControl;
   Track: typeof SliderTrack;
@@ -120,4 +132,4 @@ declare const Slider: {
   Thumb: typeof SliderThumb;
 };
 //#endregion
-export { Slider, SliderControlProps, SliderIndicatorProps, SliderOutputProps, SliderProps, SliderThumbProps, SliderTrackProps };
+export { Slider, SliderControlProps, SliderIndicatorProps, SliderLabelProps, SliderOutputProps, SliderProps, SliderThumbProps, SliderTrackProps };

package/dist/components/Slider.js

@@ -104,8 +104,19 @@ function SliderOutput({ className = "", children, ref, ...props }) {
 		children: (formattedValues, values) => typeof children === "function" ? children(values[0] ?? 0, values, formattedValues) : formattedValues.join(" - ")
 	});
 }
+/** Visible label that participates in Base UI's slider naming relationship. */
+function SliderLabel({ className = "", ref, ...props }) {
+	const classes = ["slider__label", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(Slider$1.Label, {
+		ref,
+		"data-slot": "slider-label",
+		className: classes,
+		...props
+	});
+}
 const Slider = {
 	Root: SliderRoot,
+	Label: SliderLabel,
 	Value: SliderOutput,
 	Control: SliderControl,
 	Track: SliderTrack,

package/dist/components/Sources.js

@@ -1,6 +1,6 @@
 import { Collapsible } from "./Collapsible.js";
 import { t as cx } from "../class-names-9UtZwb0J.js";
-import { b as LinkIcon, c as ChevronRightIcon } from "../icons-Ba9THQKz.js";
+import { C as LinkIcon, l as ChevronRightIcon } from "../icons-CpfUer49.js";
 import "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Sources.tsx

package/dist/components/Stepper.d.ts

@@ -119,6 +119,7 @@ declare function StepperTrigger({
   children,
   disabled,
   id,
+  type,
   "aria-controls": ariaControls,
   tabIndex,
   onClick,
@@ -173,10 +174,13 @@ declare function StepperPanel({
 interface StepperContentProps extends React.ComponentPropsWithoutRef<"div"> {
   value: number;
   forceMount?: boolean;
+  /** Optional vertical rhythm for direct content children. */
+  spacing?: "none" | "compact" | "default";
 }
 declare function StepperContent({
   value,
   forceMount,
+  spacing,
   className,
   children,
   id,

package/dist/components/Stepper.js

@@ -1,5 +1,5 @@
 import { t as cx } from "../class-names-9UtZwb0J.js";
-import { N as SpinnerIcon, a as CheckIcon } from "../icons-Ba9THQKz.js";
+import { B as SpinnerIcon, o as CheckIcon } from "../icons-CpfUer49.js";
 import { t as assignRef } from "../merge-refs-DF_7w2x_.js";
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
@@ -153,7 +153,7 @@ function StepperItem({ step, completed = false, disabled = false, loading = fals
 		})
 	});
 }
-function StepperTrigger({ className, children, disabled, id, "aria-controls": ariaControls, tabIndex, onClick, onKeyDown, ref, ...props }) {
+function StepperTrigger({ className, children, disabled, id, type = "button", "aria-controls": ariaControls, tabIndex, onClick, onKeyDown, ref, ...props }) {
 	const { activeStep, focusFirst, focusLast, focusNext, focusPrev, idPrefix, registerTrigger, setActiveStep } = useStepper();
 	const { isDisabled, isLoading, state, step } = useStepItem();
 	const isSelected = activeStep === step;
@@ -213,6 +213,7 @@ function StepperTrigger({ className, children, disabled, id, "aria-controls": ar
 		onClick: handleClick,
 		onKeyDown: handleKeyDown,
 		tabIndex: typeof tabIndex === "number" ? tabIndex : isSelected ? 0 : -1,
+		type,
 		...props,
 		children
 	});
@@ -278,7 +279,7 @@ function StepperPanel({ className, ref, ...props }) {
 		...props
 	});
 }
-function StepperContent({ value, forceMount = false, className, children, id, "aria-labelledby": ariaLabelledBy, ref, ...props }) {
+function StepperContent({ value, forceMount = false, spacing = "none", className, children, id, "aria-labelledby": ariaLabelledBy, ref, ...props }) {
 	const { activeStep, idPrefix } = useStepper();
 	const isActive = activeStep === value;
 	if (!forceMount && !isActive) return null;
@@ -288,6 +289,7 @@ function StepperContent({ value, forceMount = false, className, children, id, "a
 		id: id ?? `${idPrefix}-panel-${value}`,
 		"aria-labelledby": ariaLabelledBy ?? `${idPrefix}-trigger-${value}`,
 		className: cx("stepper__content", !isActive && "stepper__content--hidden", className),
+		"data-spacing": spacing,
 		"data-state": isActive ? "active" : "inactive",
 		hidden: !isActive,
 		tabIndex: 0,

package/dist/components/SubagentRun.d.ts

@@ -1,5 +1,8 @@
 import { Collapsible } from "./Collapsible.js";
 import { BadgeProps } from "./Badge.js";
+import { SubagentRunIndicator, SubagentRunIndicatorProps, getSubagentRunName, getSubagentRunTooltip } from "./SubagentRunIndicator.js";
+import { SubagentRunList, SubagentRunListProps } from "./SubagentRunList.js";
+import { SubagentRunSelector, SubagentRunSelectorProps } from "./SubagentRunSelector.js";
 import { SubagentRunActions, SubagentRunActionsProps, SubagentRunMilestone, SubagentRunMilestoneProps, SubagentRunMilestones, SubagentRunMilestonesProps, SubagentRunProgress, SubagentRunProgressProps } from "./SubagentRunDetails.js";
 import * as React from "react";
 
@@ -7,7 +10,12 @@ import * as React from "react";
 interface SubagentRunProps extends Omit<React.ComponentProps<typeof Collapsible.Root>, "className" | "unstyled"> {
   className?: string;
 }
-/** Transport-neutral disclosure for one delegated agent run. */
+/**
+ * Transport-neutral inline disclosure for one delegated agent run.
+ *
+ * @deprecated Retained subagent transcripts should open in an adjacent
+ * `ThinkFullApp` workbench panel. Use `SubagentRunSelector` in the transcript.
+ */
 declare function SubagentRun({
   className,
   ref,
@@ -16,23 +24,10 @@ declare function SubagentRun({
 interface SubagentRunTriggerProps extends Omit<React.ComponentProps<typeof Collapsible.Trigger>, "className" | "unstyled"> {
   className?: string;
 }
-interface SubagentRunSelectorProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  naniteIndex?: number;
-  selected?: boolean;
-}
-/** Compact selector for a run whose transcript is rendered in a separate detail surface. */
-declare function SubagentRunSelector({
-  className,
-  children,
-  naniteIndex,
-  selected,
-  ref,
-  type,
-  ...props
-}: SubagentRunSelectorProps & {
-  ref?: React.Ref<HTMLButtonElement>;
-}): React.JSX.Element;
-/** Compact run selector. Use the content for a short preview, not a full child transcript. */
+/**
+ * @deprecated Retained subagent transcripts should not expand inline. Use
+ * `SubagentRunSelector` and render the child in a `ThinkFullApp` workbench panel.
+ */
 declare function SubagentRunTrigger({
   className,
   children,
@@ -77,6 +72,10 @@ declare function SubagentRunStatus({
 interface SubagentRunContentProps extends Omit<React.ComponentProps<typeof Collapsible.Panel>, "className" | "unstyled"> {
   className?: string;
 }
+/**
+ * @deprecated Retained subagent transcripts should live in an adjacent
+ * `ThinkFullApp` workbench panel, not below the selector.
+ */
 declare function SubagentRunContent({
   className,
   children,
@@ -84,4 +83,4 @@ declare function SubagentRunContent({
   ...props
 }: SubagentRunContentProps): React.JSX.Element;
 //#endregion
-export { SubagentRun, SubagentRunActions, type SubagentRunActionsProps, SubagentRunContent, SubagentRunContentProps, SubagentRunDescription, SubagentRunDescriptionProps, SubagentRunHeading, SubagentRunHeadingProps, SubagentRunMilestone, type SubagentRunMilestoneProps, SubagentRunMilestones, type SubagentRunMilestonesProps, SubagentRunProgress, type SubagentRunProgressProps, SubagentRunProps, SubagentRunSelector, SubagentRunSelectorProps, SubagentRunStatus, SubagentRunStatusProps, SubagentRunStatusTone, SubagentRunTitle, SubagentRunTitleProps, SubagentRunTrigger, SubagentRunTriggerProps };
+export { SubagentRun, SubagentRunActions, type SubagentRunActionsProps, SubagentRunContent, SubagentRunContentProps, SubagentRunDescription, SubagentRunDescriptionProps, SubagentRunHeading, SubagentRunHeadingProps, SubagentRunIndicator, type SubagentRunIndicatorProps, SubagentRunList, type SubagentRunListProps, SubagentRunMilestone, type SubagentRunMilestoneProps, SubagentRunMilestones, type SubagentRunMilestonesProps, SubagentRunProgress, type SubagentRunProgressProps, SubagentRunProps, SubagentRunSelector, type SubagentRunSelectorProps, SubagentRunStatus, SubagentRunStatusProps, SubagentRunStatusTone, SubagentRunTitle, SubagentRunTitleProps, SubagentRunTrigger, SubagentRunTriggerProps, getSubagentRunName, getSubagentRunTooltip };

package/dist/components/SubagentRun.js

@@ -1,12 +1,21 @@
 import { Collapsible } from "./Collapsible.js";
 import { t as cx } from "../class-names-9UtZwb0J.js";
+import { Button } from "./Button.js";
 import { Badge } from "./Badge.js";
 import { NaniteMark } from "./NaniteScene.js";
+import { SubagentRunIndicator, getSubagentRunName, getSubagentRunTooltip } from "./SubagentRunIndicator.js";
+import { SubagentRunSelector } from "./SubagentRunSelector.js";
+import { SubagentRunList } from "./SubagentRunList.js";
 import { SubagentRunActions, SubagentRunMilestone, SubagentRunMilestones, SubagentRunProgress } from "./SubagentRunDetails.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/SubagentRun.tsx
-/** Transport-neutral disclosure for one delegated agent run. */
+/**
+* Transport-neutral inline disclosure for one delegated agent run.
+*
+* @deprecated Retained subagent transcripts should open in an adjacent
+* `ThinkFullApp` workbench panel. Use `SubagentRunSelector` in the transcript.
+*/
 function SubagentRun({ className, ref, ...props }) {
 	return /* @__PURE__ */ jsx(Collapsible.Root, {
 		ref,
@@ -16,27 +25,21 @@ function SubagentRun({ className, ref, ...props }) {
 		unstyled: true
 	});
 }
-/** Compact selector for a run whose transcript is rendered in a separate detail surface. */
-function SubagentRunSelector({ className, children, naniteIndex = 0, selected = false, ref, type = "button", ...props }) {
-	return /* @__PURE__ */ jsxs("button", {
-		ref,
-		type,
-		"data-slot": "subagent-run-selector",
-		className: cx("subagent-run__trigger", className),
-		"aria-pressed": selected,
-		...props,
-		children: [/* @__PURE__ */ jsx(NaniteMark, { index: naniteIndex }), /* @__PURE__ */ jsx("span", {
-			className: "subagent-run__trigger-content",
-			children
-		})]
-	});
-}
-/** Compact run selector. Use the content for a short preview, not a full child transcript. */
+/**
+* @deprecated Retained subagent transcripts should not expand inline. Use
+* `SubagentRunSelector` and render the child in a `ThinkFullApp` workbench panel.
+*/
 function SubagentRunTrigger({ className, children, ref, ...props }) {
 	return /* @__PURE__ */ jsxs(Collapsible.Trigger, {
 		ref,
 		"data-slot": "subagent-run-trigger",
 		className: cx("subagent-run__trigger", className),
+		render: /* @__PURE__ */ jsx(Button, {
+			type: "button",
+			variant: "outline",
+			color: "neutral",
+			size: "sm"
+		}),
 		...props,
 		unstyled: true,
 		children: [/* @__PURE__ */ jsx(NaniteMark, {}), /* @__PURE__ */ jsx("span", {
@@ -84,6 +87,10 @@ function SubagentRunStatus({ className, tone = "active", size = "sm", ...props }
 		...props
 	});
 }
+/**
+* @deprecated Retained subagent transcripts should live in an adjacent
+* `ThinkFullApp` workbench panel, not below the selector.
+*/
 function SubagentRunContent({ className, children, ref, ...props }) {
 	return /* @__PURE__ */ jsx(Collapsible.Panel, {
 		ref,
@@ -98,4 +105,4 @@ function SubagentRunContent({ className, children, ref, ...props }) {
 	});
 }
 //#endregion
-export { SubagentRun, SubagentRunActions, SubagentRunContent, SubagentRunDescription, SubagentRunHeading, SubagentRunMilestone, SubagentRunMilestones, SubagentRunProgress, SubagentRunSelector, SubagentRunStatus, SubagentRunTitle, SubagentRunTrigger };
+export { SubagentRun, SubagentRunActions, SubagentRunContent, SubagentRunDescription, SubagentRunHeading, SubagentRunIndicator, SubagentRunList, SubagentRunMilestone, SubagentRunMilestones, SubagentRunProgress, SubagentRunSelector, SubagentRunStatus, SubagentRunTitle, SubagentRunTrigger, getSubagentRunName, getSubagentRunTooltip };

package/dist/components/SubagentRunIndicator.d.ts

@@ -0,0 +1,22 @@
+import * as React from "react";
+import { AgentToolRunPart, AgentToolRunState } from "agents/agent-tools";
+
+//#region src/components/SubagentRunIndicator.d.ts
+declare function getSubagentRunName(run: AgentToolRunState): string;
+/** Human-readable detail for a retained run selector's tooltip. */
+declare function getSubagentRunTooltip(run: AgentToolRunState): React.ReactNode;
+interface SubagentRunIndicatorProps<Part extends AgentToolRunPart = AgentToolRunPart> extends Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> {
+  /** Complete retained-run state returned by `useAgentToolEvents()`. */
+  run: AgentToolRunState<Part>;
+}
+/** Decorative status mark derived from a whole upstream retained-run record. */
+declare function SubagentRunIndicator<Part extends AgentToolRunPart = AgentToolRunPart>({
+  className,
+  run,
+  ref,
+  ...props
+}: SubagentRunIndicatorProps<Part> & {
+  ref?: React.Ref<HTMLSpanElement>;
+}): React.JSX.Element;
+//#endregion
+export { SubagentRunIndicator, SubagentRunIndicatorProps, getSubagentRunName, getSubagentRunTooltip };

package/dist/components/SubagentRunIndicator.js

@@ -0,0 +1,33 @@
+import { t as cx } from "../class-names-9UtZwb0J.js";
+import { B as SpinnerIcon, U as StopIcon, o as CheckIcon, q as WarningIcon } from "../icons-CpfUer49.js";
+import "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/SubagentRunIndicator.tsx
+function getSubagentRunName(run) {
+	return run.display?.name ?? run.agentType;
+}
+/** Human-readable detail for a retained run selector's tooltip. */
+function getSubagentRunTooltip(run) {
+	switch (run.status) {
+		case "running": return run.progress?.message ?? run.progress?.phase ?? "Running";
+		case "completed": return run.summary ?? "Completed";
+		case "error": return run.error ?? "Agent run failed";
+		case "aborted": return run.error ?? "Agent run stopped";
+		case "interrupted": return run.error ?? (run.childStillRunning ? "Interrupted · agent may still be running" : "Interrupted");
+	}
+}
+/** Decorative status mark derived from a whole upstream retained-run record. */
+function SubagentRunIndicator({ className, run, ref, ...props }) {
+	const icon = run.status === "running" ? /* @__PURE__ */ jsx(SpinnerIcon, {}) : run.status === "completed" ? /* @__PURE__ */ jsx(CheckIcon, {}) : run.status === "aborted" ? /* @__PURE__ */ jsx(StopIcon, {}) : /* @__PURE__ */ jsx(WarningIcon, {});
+	return /* @__PURE__ */ jsx("span", {
+		ref,
+		"data-slot": "subagent-run-indicator",
+		"data-status": run.status,
+		className: cx("subagent-run__indicator", className),
+		...props,
+		"aria-hidden": "true",
+		children: icon
+	});
+}
+//#endregion
+export { SubagentRunIndicator, getSubagentRunName, getSubagentRunTooltip };