@ocai/app-sdk-ui 0.3.0 → 0.4.0

package/dist/chat/message-trace.d.ts

@@ -1,5 +1,5 @@
 import { LucideIcon } from 'lucide-react';
-import { ReactElement } from 'react';
+import { ReactElement, ReactNode } from 'react';
 import { AiActivity } from './activity-labels';
 import { TracePart } from './segments';
 export declare function humanizeToolName(type: string): string;
@@ -11,7 +11,8 @@ export type MessageTraceProps = {
     getToolLabel?: (type: string) => string | undefined;
     getToolIcon?: (type: string) => LucideIcon | undefined;
     getActivityOverride?: (runningToolType: string | undefined) => string | undefined;
+    renderStepDetail?: (part: TracePart) => ReactNode;
     defaultOpen?: boolean;
     className?: string;
 };
-export declare const MessageTrace: import('react').MemoExoticComponent<({ parts, isLoading, messageId, activity, getToolLabel, getToolIcon, getActivityOverride, defaultOpen, className, }: MessageTraceProps) => ReactElement>;
+export declare const MessageTrace: import('react').MemoExoticComponent<({ parts, isLoading, messageId, activity, getToolLabel, getToolIcon, getActivityOverride, renderStepDetail, defaultOpen, className, }: MessageTraceProps) => ReactElement>;

package/dist/chat/sources.d.ts

@@ -4,6 +4,12 @@ export type SourceItem = {
     url: string;
     title?: string;
 };
+export type SourceListProps = {
+    sources: readonly SourceItem[];
+    getFaviconUrl?: (url: string) => string | null;
+    className?: string;
+};
+export declare const SourceList: ({ sources, getFaviconUrl, className, }: SourceListProps) => ReactElement | null;
 export type SourcesProps = Omit<ComponentProps<typeof Collapsible>, "children"> & {
     sources: readonly SourceItem[];
     getLabel?: (count: number) => string;

package/dist/index.d.ts

@@ -8,6 +8,6 @@ export { MessageTrace, humanizeToolName, type MessageTraceProps, } from './chat/
 export { buildSegments, traceIsLoading, type BuildSegmentsOptions, type MessageSegment, type TracePart, } from './chat/segments';
 export { getAiActivityLabel, getAiActivityLabelParts, labelSeedFromString, traceElapsedSeconds, type AiActivity, type AiActivityKind, type ActivityLabelParts, type GetAiActivityLabelArgs, } from './chat/activity-labels';
 export { useActivityClock } from './chat/use-activity-clock';
-export { Sources, citationClassName, type SourceItem, type SourcesProps, } from './chat/sources';
+export { Sources, SourceList, citationClassName, type SourceItem, type SourcesProps, type SourceListProps, } from './chat/sources';
 export { extractWebSearchSources, isWebSearchError, stripCitationParens, type WebSearchErrorOutput, type WebSearchInput, type WebSearchOutput, type WebSearchResult, type WebSearchSuccessOutput, type WebSearchUIPart, type WebSearchUITool, } from './chat/web-search';
 export { WebSearchToggle, type WebSearchToggleProps, } from './chat/web-search-toggle';

package/dist/index.js

@@ -6,19 +6,19 @@ import { twMerge as r } from "tailwind-merge";
 import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
 import { CheckIcon as s, ChevronDownIcon as c, CircleCheckIcon as l, ClockIcon as u, GlobeIcon as d, Loader2Icon as f, WrenchIcon as p, XIcon as m } from "lucide-react";
 import { createContext as h, isValidElement as g, memo as _, useContext as v, useEffect as y, useId as ee, useRef as b, useState as x } from "react";
-import { Collapsible as S, Slot as te, Tooltip as C } from "radix-ui";
-import { cva as w } from "class-variance-authority";
+import { Collapsible as S, Slot as C, Tooltip as w } from "radix-ui";
+import { cva as T } from "class-variance-authority";
 //#region src/lib/cn.ts
-function T(...e) {
+function E(...e) {
 	return r(n(e));
 }
 //#endregion
 //#region src/chat/response.tsx
-var E = e({ singleDollarTextMath: !0 });
+var te = e({ singleDollarTextMath: !0 });
 function ne({ className: e, ...n }) {
 	return /* @__PURE__ */ a(t, {
-		className: T("ocui-md size-full text-base font-normal leading-6 [&>*:first-child]:mt-0 [&>*:last-child]:mb-0 [&_code]:whitespace-pre-wrap [&_code]:wrap-break-word [&_pre]:max-w-full [&_pre]:overflow-x-auto", e),
-		plugins: { math: E },
+		className: E("ocui-md size-full text-base font-normal leading-6 [&>*:first-child]:mt-0 [&>*:last-child]:mb-0 [&_code]:whitespace-pre-wrap [&_code]:wrap-break-word [&_pre]:max-w-full [&_pre]:overflow-x-auto", e),
+		plugins: { math: te },
 		controls: {
 			table: !1,
 			code: { download: !1 }
@@ -32,7 +32,7 @@ var D = {
 	user: "w-fit wrap-break-word rounded-md bg-card px-3 py-1.5 text-primary",
 	assistant: "bg-transparent px-0 py-0 text-left text-foreground"
 }, O = ({ children: e, className: t, variant: n = "user", ...r }) => /* @__PURE__ */ a("div", {
-	className: T("flex flex-col gap-2 overflow-hidden text-base font-normal leading-6", D[n], t),
+	className: E("flex flex-col gap-2 overflow-hidden text-base font-normal leading-6", D[n], t),
 	...r,
 	children: e
 });
@@ -94,7 +94,7 @@ var M = h(null), ie = () => {
 			duration: n
 		},
 		children: /* @__PURE__ */ a(k, {
-			className: T("not-prose", e),
+			className: E("not-prose", e),
 			onOpenChange: u,
 			open: l,
 			...c,
@@ -113,19 +113,19 @@ var P = _(({ className: e, children: t, variant: n = "reasoning", label: r, ...s
 		duration: d
 	});
 	return /* @__PURE__ */ a(A, {
-		className: T("flex items-center gap-1 rounded-md px-1.5 py-0.5 text-sm text-muted-foreground transition-colors hover:bg-muted hover:text-foreground", e),
+		className: E("flex items-center gap-1 rounded-md px-1.5 py-0.5 text-sm text-muted-foreground transition-colors hover:bg-muted hover:text-foreground", e),
 		...s,
 		children: t ?? /* @__PURE__ */ o(i, { children: [
 			n === "tools" && /* @__PURE__ */ a(p, { className: "size-3" }),
 			/* @__PURE__ */ a("span", {
-				className: T(l && "ocui-shimmer"),
+				className: E(l && "ocui-shimmer"),
 				children: f
 			}),
-			/* @__PURE__ */ a(c, { className: T("size-2.5 transition-transform", u ? "rotate-180" : "rotate-0") })
+			/* @__PURE__ */ a(c, { className: E("size-2.5 transition-transform", u ? "rotate-180" : "rotate-0") })
 		] })
 	});
 }), F = "grid gap-1 text-sm text-muted-foreground/80 **:text-sm [&_code]:bg-transparent [&_code]:p-0 [&_code]:font-semibold [&_code]:text-foreground [&_li]:my-0 [&_ol]:my-1 [&_p]:my-0 [&_ul]:my-1", I = _(({ className: e, ...t }) => /* @__PURE__ */ a(j, {
-	className: T(F, "mt-1.5", e),
+	className: E(F, "mt-1.5", e),
 	...t
 }));
 N.displayName = "Reasoning", P.displayName = "ReasoningTrigger", I.displayName = "ReasoningContent";
@@ -199,7 +199,7 @@ var se = 8, L = 240, ce = 2e4, R = (e) => e === null || typeof e != "object" &&
 	className: "text-xs",
 	children: /* @__PURE__ */ a(W, { value: e })
 }) : /* @__PURE__ */ a(fe, { value: e }), pe = ({ className: e, ...t }) => /* @__PURE__ */ a(k, {
-	className: T("not-prose w-full rounded-md border border-border", e),
+	className: E("not-prose w-full rounded-md border border-border", e),
 	...t
 }), me = {
 	"input-streaming": "Pending",
@@ -221,7 +221,7 @@ var se = 8, L = 240, ce = 2e4, R = (e) => e === null || typeof e != "object" &&
 	className: "flex shrink-0 items-center gap-1 text-xs text-muted-foreground",
 	children: [he[e], me[e]]
 }), _e = ({ className: e, type: t, state: n, title: r, ...i }) => /* @__PURE__ */ o(A, {
-	className: T("group flex w-full min-w-0 items-center justify-between gap-2 rounded-md p-2.5 transition-colors hover:bg-muted/50", e),
+	className: E("group flex w-full min-w-0 items-center justify-between gap-2 rounded-md p-2.5 transition-colors hover:bg-muted/50", e),
 	...i,
 	children: [/* @__PURE__ */ o("div", {
 		className: "flex min-w-0 flex-1 items-center gap-2",
@@ -234,17 +234,17 @@ var se = 8, L = 240, ce = 2e4, R = (e) => e === null || typeof e != "object" &&
 		children: [/* @__PURE__ */ a(ge, { state: n }), /* @__PURE__ */ a(c, { className: "size-3.5 text-muted-foreground transition-transform group-data-[state=open]:rotate-180" })]
 	})]
 }), ve = ({ className: e, ...t }) => /* @__PURE__ */ a(j, {
-	className: T("data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 text-popover-foreground outline-hidden data-[state=closed]:animate-out data-[state=open]:animate-in", e),
+	className: E("data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 text-popover-foreground outline-hidden data-[state=closed]:animate-out data-[state=open]:animate-in", e),
 	...t
 }), ye = ({ className: e, input: t, ...n }) => V(t) ? /* @__PURE__ */ o("div", {
-	className: T("space-y-1.5 overflow-hidden px-2.5 pb-2.5", e),
+	className: E("space-y-1.5 overflow-hidden px-2.5 pb-2.5", e),
 	...n,
 	children: [/* @__PURE__ */ a("h4", {
 		className: "text-xs font-medium tracking-wide text-muted-foreground uppercase",
 		children: "Parameters"
 	}), /* @__PURE__ */ a(G, { value: t })]
 }) : null, be = ({ className: e, output: t, errorText: n, ...r }) => V(t) || n ? /* @__PURE__ */ o("div", {
-	className: T("space-y-1.5 px-2.5 pb-2.5", e),
+	className: E("space-y-1.5 px-2.5 pb-2.5", e),
 	...r,
 	children: [/* @__PURE__ */ a("h4", {
 		className: "text-xs font-medium tracking-wide text-muted-foreground uppercase",
@@ -256,7 +256,7 @@ var se = 8, L = 240, ce = 2e4, R = (e) => e === null || typeof e != "object" &&
 		className: "text-xs [&_table]:w-full",
 		children: /* @__PURE__ */ a(G, { value: t })
 	})]
-}) : null, xe = w("group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-colors outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
+}) : null, xe = T("group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-colors outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
 	variants: {
 		variant: {
 			default: "bg-primary text-primary-foreground hover:bg-primary/90",
@@ -283,11 +283,11 @@ var se = 8, L = 240, ce = 2e4, R = (e) => e === null || typeof e != "object" &&
 	}
 });
 function K({ className: e, variant: t = "default", size: n = "default", asChild: r = !1, ...i }) {
-	return /* @__PURE__ */ a(r ? te.Root : "button", {
+	return /* @__PURE__ */ a(r ? C.Root : "button", {
 		"data-slot": "button",
 		"data-variant": t,
 		"data-size": n,
-		className: T(xe({
+		className: E(xe({
 			variant: t,
 			size: n,
 			className: e
@@ -298,42 +298,42 @@ function K({ className: e, variant: t = "default", size: n = "default", asChild:
 //#endregion
 //#region src/internal/tooltip.tsx
 function q({ delayDuration: e = 0, ...t }) {
-	return /* @__PURE__ */ a(C.Provider, {
+	return /* @__PURE__ */ a(w.Provider, {
 		"data-slot": "tooltip-provider",
 		delayDuration: e,
 		...t
 	});
 }
 function J({ ...e }) {
-	return /* @__PURE__ */ a(C.Root, {
+	return /* @__PURE__ */ a(w.Root, {
 		"data-slot": "tooltip",
 		...e
 	});
 }
 function Y({ ...e }) {
-	return /* @__PURE__ */ a(C.Trigger, {
+	return /* @__PURE__ */ a(w.Trigger, {
 		"data-slot": "tooltip-trigger",
 		...e
 	});
 }
 function X({ className: e, sideOffset: t = 0, children: n, ...r }) {
-	return /* @__PURE__ */ a(C.Portal, { children: /* @__PURE__ */ o(C.Content, {
+	return /* @__PURE__ */ a(w.Portal, { children: /* @__PURE__ */ o(w.Content, {
 		"data-slot": "tooltip-content",
 		sideOffset: t,
-		className: T("z-50 inline-flex w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin) items-center gap-1.5 rounded-md border border-border bg-popover px-3 py-1.5 text-xs text-popover-foreground shadow-md data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-[state=instant-open]:animate-in data-[state=instant-open]:fade-in-0 data-[state=instant-open]:zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95", e),
+		className: E("z-50 inline-flex w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin) items-center gap-1.5 rounded-md border border-border bg-popover px-3 py-1.5 text-xs text-popover-foreground shadow-md data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-[state=instant-open]:animate-in data-[state=instant-open]:fade-in-0 data-[state=instant-open]:zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95", e),
 		...r,
-		children: [n, /* @__PURE__ */ a(C.Arrow, { className: "z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] border-r border-b border-border bg-popover fill-popover" })]
+		children: [n, /* @__PURE__ */ a(w.Arrow, { className: "z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] border-r border-b border-border bg-popover fill-popover" })]
 	}) });
 }
 //#endregion
 //#region src/chat/actions.tsx
 var Se = ({ className: e, children: t, ...n }) => /* @__PURE__ */ a("div", {
-	className: T("-ml-1.5 flex items-center", e),
+	className: E("-ml-1.5 flex items-center", e),
 	...n,
 	children: t
 }), Ce = ({ tooltip: e, children: t, label: n, className: r, variant: i = "ghost", size: s = "icon", ...c }) => {
 	let l = /* @__PURE__ */ o(K, {
-		className: T("relative", r),
+		className: E("relative", r),
 		size: s,
 		type: "button",
 		variant: i,
@@ -487,8 +487,16 @@ var Pe = [
 		done: "Refined"
 	},
 	{
-		active: "Working",
-		done: "Done"
+		active: "Musing",
+		done: "Mused"
+	},
+	{
+		active: "Scurrying",
+		done: "Scurried"
+	},
+	{
+		active: "Crunching",
+		done: "Crunched"
 	}
 ], Fe = {
 	waiting: Pe,
@@ -510,108 +518,131 @@ function Z({ kind: e, active: t, seed: n, elapsedSeconds: r, verb: i }) {
 		elapsedSeconds: r > 0 ? r : 0
 	};
 }
-function Q(e) {
+function Ie(e) {
 	let { verb: t, elapsedSeconds: n } = Z(e);
 	return n <= 0 ? t : `${t} for ${n}s`;
 }
-function Ie(e, t) {
+function Le(e, t) {
 	let n = Infinity, r = -Infinity, i = !1;
 	for (let t of e) Number.isFinite(t.startedAtMs) && (n = Math.min(n, t.startedAtMs), Number.isFinite(t.completedAtMs) ? r = Math.max(r, t.completedAtMs) : i = !0);
 	if (n === Infinity) return 0;
 	let a = i && Number.isFinite(t) ? t : r;
 	return a === -Infinity ? 0 : Math.max(0, Math.floor((a - n) / 1e3));
 }
-function Le(e) {
+function Re(e) {
 	let t = 0;
 	for (let n = 0; n < e.length; n += 1) t = t * 31 + e.charCodeAt(n) | 0;
 	return t;
 }
 //#endregion
 //#region src/chat/message-trace.tsx
-function Re(e) {
+function Q(e) {
 	let t = e.replace(/^tool-/, "").replace(/[_-]+/g, " ").replace(/([a-z0-9])([A-Z])/g, "$1 $2").trim();
 	return t.charAt(0).toUpperCase() + t.slice(1);
 }
-var ze = _(({ parts: e, isLoading: t, messageId: n, activity: r, getToolLabel: i, getToolIcon: s, getActivityOverride: c, defaultOpen: l = !1, className: u }) => {
-	let d = e.filter((e) => e.type === "reasoning").map((e) => String(e.text ?? "")).filter((e) => e.trim()).join("\n\n"), f = d.trim().length > 0, p = [], m = !1, h;
+var ze = _(({ parts: e, isLoading: t, messageId: n, activity: r, getToolLabel: i, getToolIcon: s, getActivityOverride: c, renderStepDetail: l, defaultOpen: u = !1, className: d }) => {
+	let f = e.filter((e) => e.type === "reasoning").map((e) => String(e.text ?? "")).filter((e) => e.trim()).join("\n\n"), p = f.trim().length > 0, m = [], h = !1, g;
 	for (let t of e) if (t.type.startsWith("tool-")) {
-		m = !0;
+		h = !0;
 		let e = String(t.state ?? "");
-		e === "output-available" || e === "output-error" || e === "output-denied" || (h = t.type), p.push({
+		e === "output-available" || e === "output-error" || e === "output-denied" || (g = t.type), m.push({
 			kind: "tool",
-			label: i?.(t.type) ?? Re(t.type),
+			label: i?.(t.type) ?? Q(t.type),
 			state: e,
-			toolType: t.type
+			toolType: t.type,
+			part: t
 		});
-	} else t.type === "text" && String(t.text ?? "").trim() && p.push({
+	} else t.type === "text" && String(t.text ?? "").trim() && m.push({
 		kind: "note",
 		text: String(t.text)
 	});
-	m && !t && p.push({ kind: "done" });
-	let g = e.some((e) => Number.isFinite(e.startedAtMs)) ? Ie(e, r?.nowMs) : r?.elapsedSeconds ?? 0, _ = r?.seed ?? Le(n), v = t ? g : 0, y = t ? c?.(h) : void 0, b = {
-		kind: f ? "reasoning" : "tools",
+	h && !t && m.push({ kind: "done" });
+	let _ = e.some((e) => Number.isFinite(e.startedAtMs)) ? Le(e, r?.nowMs) : r?.elapsedSeconds ?? 0, v = r?.seed ?? Re(n), y = t ? _ : 0, b = t ? c?.(g) : void 0, S = {
+		kind: p ? "reasoning" : "tools",
 		active: t,
-		seed: _,
-		elapsedSeconds: v,
-		verb: y
-	}, S = Q(b), { elapsedSeconds: te } = Z(b), C = f || p.length > 0, w = C && t && te === 0, [E, D] = x(l), O = ee();
+		seed: v,
+		elapsedSeconds: y,
+		verb: b
+	}, C = Ie(S), { elapsedSeconds: w } = Z(S), T = p || m.length > 0, te = T && t && w === 0, [D, O] = x(u), k = ee();
 	return /* @__PURE__ */ o("div", {
-		className: T("not-prose flex flex-col", u),
+		className: E("not-prose flex flex-col", d),
 		children: [/* @__PURE__ */ a("button", {
 			type: "button",
 			"data-testid": "message-reasoning",
-			onClick: () => D((e) => !e),
-			"aria-expanded": E,
-			"aria-controls": C ? O : void 0,
-			className: "flex items-center gap-1 self-start text-sm text-muted-foreground transition-colors hover:text-foreground",
+			onClick: () => O((e) => !e),
+			"aria-expanded": D,
+			"aria-controls": T ? k : void 0,
+			className: "flex items-center gap-1 self-start text-[13px] leading-5 text-muted-foreground transition-colors hover:text-foreground",
 			children: /* @__PURE__ */ o("span", {
-				className: T(t && "ocui-shimmer"),
-				children: [S, w ? "..." : ""]
+				className: E(t && "ocui-shimmer"),
+				children: [C, te ? "..." : ""]
 			})
-		}), E && C && /* @__PURE__ */ o("div", {
-			id: O,
+		}), D && T && /* @__PURE__ */ o("div", {
+			id: k,
 			className: "mt-2 flex flex-col gap-2",
-			children: [f && /* @__PURE__ */ a(ne, {
+			children: [p && /* @__PURE__ */ a(ne, {
 				className: "grid gap-1 text-sm text-muted-foreground/80 **:text-sm [&_code]:bg-transparent [&_code]:p-0 [&_code]:font-semibold [&_code]:text-foreground [&_li]:my-0 [&_ol]:my-1 [&_p]:my-0 [&_ul]:my-1",
-				children: d
-			}), p.length > 0 && /* @__PURE__ */ a("div", {
+				children: f
+			}), m.length > 0 && /* @__PURE__ */ a("div", {
 				className: "flex flex-col",
-				children: p.map((e, t) => /* @__PURE__ */ a(Be, {
+				children: m.map((e, t) => /* @__PURE__ */ a(Be, {
 					node: e,
 					isFirst: t === 0,
-					isLast: t === p.length - 1,
-					getToolIcon: s
+					isLast: t === m.length - 1,
+					getToolIcon: s,
+					renderStepDetail: l
 				}, `step-${t}`))
 			})]
 		})]
 	});
 });
 ze.displayName = "MessageTrace";
-function Be({ node: e, isFirst: t, isLast: n, getToolIcon: r }) {
+function Be({ node: e, isFirst: t, isLast: n, getToolIcon: r, renderStepDetail: i }) {
+	let s = e.kind === "tool" && i ? i(e.part) : null, l = s != null, [u, d] = x(!1), f = ee();
 	return /* @__PURE__ */ o("div", {
-		className: "flex items-stretch gap-2.5",
+		className: "flex flex-col",
 		children: [/* @__PURE__ */ o("div", {
-			className: "flex w-4 flex-col items-center",
-			children: [
-				/* @__PURE__ */ a("div", { className: T("w-px flex-1", t ? "bg-transparent" : "bg-border") }),
-				/* @__PURE__ */ a(Ve, {
-					node: e,
-					getToolIcon: r
-				}),
-				/* @__PURE__ */ a("div", { className: T("w-px flex-1", n ? "bg-transparent" : "bg-border") })
-			]
-		}), /* @__PURE__ */ a("div", {
-			className: "min-w-0 py-1 text-sm leading-5",
-			children: e.kind === "tool" ? /* @__PURE__ */ a("span", {
-				className: "text-muted-foreground",
-				children: e.label
-			}) : e.kind === "note" ? /* @__PURE__ */ a("span", {
-				className: "text-muted-foreground/80",
-				children: e.text
-			}) : /* @__PURE__ */ a("span", {
-				className: "text-muted-foreground",
-				children: "Done"
-			})
+			className: "flex items-stretch gap-2.5",
+			children: [/* @__PURE__ */ o("div", {
+				className: "flex w-4 flex-col items-center",
+				children: [
+					/* @__PURE__ */ a("div", { className: E("w-px flex-1", t ? "bg-transparent" : "bg-border") }),
+					/* @__PURE__ */ a(Ve, {
+						node: e,
+						getToolIcon: r
+					}),
+					/* @__PURE__ */ a("div", { className: E("w-px flex-1", n ? "bg-transparent" : "bg-border") })
+				]
+			}), /* @__PURE__ */ a("div", {
+				className: "min-w-0 py-1 text-sm leading-5",
+				children: e.kind === "tool" ? l ? /* @__PURE__ */ o("button", {
+					type: "button",
+					onClick: () => d((e) => !e),
+					"aria-expanded": u,
+					"aria-controls": f,
+					className: "group inline-flex items-center gap-1 text-sm text-muted-foreground transition-colors hover:text-foreground",
+					children: [/* @__PURE__ */ a("span", { children: e.label }), /* @__PURE__ */ a(c, { className: E("size-2.5 transition-[transform,opacity]", u ? "rotate-180 opacity-100" : "opacity-0 group-hover:opacity-100 group-focus-visible:opacity-100") })]
+				}) : /* @__PURE__ */ a("span", {
+					className: "text-muted-foreground",
+					children: e.label
+				}) : e.kind === "note" ? /* @__PURE__ */ a("span", {
+					className: "text-muted-foreground/80",
+					children: e.text
+				}) : /* @__PURE__ */ a("span", {
+					className: "text-muted-foreground",
+					children: "Done"
+				})
+			})]
+		}), l && u && /* @__PURE__ */ o("div", {
+			className: "flex items-stretch gap-2.5",
+			children: [/* @__PURE__ */ a("div", {
+				className: "flex w-4 flex-col items-center",
+				children: /* @__PURE__ */ a("div", { className: E("w-px flex-1", n ? "bg-transparent" : "bg-border") })
+			}), /* @__PURE__ */ a("div", {
+				id: f,
+				className: "min-w-0 flex-1 pb-1",
+				children: s
+			})]
 		})]
 	});
 }
@@ -681,17 +712,17 @@ function He(e, t) {
 function Ue(e) {
 	return `Searched ${e} source${e === 1 ? "" : "s"}`;
 }
-function $(e) {
+function We(e) {
 	try {
 		return new URL(e).hostname;
 	} catch {
 		return e;
 	}
 }
-function We(e) {
-	return `https://www.google.com/s2/favicons?domain=${$(e)}&sz=32`;
+function Ge(e) {
+	return `https://www.google.com/s2/favicons?domain=${We(e)}&sz=32`;
 }
-function Ge({ url: e, getFaviconUrl: t }) {
+function Ke({ url: e, getFaviconUrl: t }) {
 	let n = t(e), [r, i] = x(!1);
 	return !n || r ? /* @__PURE__ */ a(d, { className: "size-3.5 shrink-0 text-muted-foreground" }) : /* @__PURE__ */ a("img", {
 		src: n,
@@ -700,44 +731,50 @@ function Ge({ url: e, getFaviconUrl: t }) {
 		onError: () => i(!0)
 	});
 }
-var Ke = ({ sources: e, getLabel: t = Ue, getFaviconUrl: n = We, className: r, ...i }) => e.length === 0 ? null : /* @__PURE__ */ o(k, {
-	className: T("not-prose", r),
+var $ = ({ sources: e, getFaviconUrl: t = Ge, className: n }) => e.length === 0 ? null : /* @__PURE__ */ a("div", {
+	className: E("flex flex-col gap-0.5", n),
+	children: e.map((e, n) => {
+		let r = We(e.url), i = e.title || r;
+		return /* @__PURE__ */ o("a", {
+			href: e.url,
+			target: "_blank",
+			rel: "noreferrer",
+			className: "flex min-w-0 items-center gap-1.5 rounded-md px-1.5 py-1 text-sm text-muted-foreground transition-colors hover:bg-muted hover:text-foreground",
+			children: [
+				/* @__PURE__ */ a(Ke, {
+					getFaviconUrl: t,
+					url: e.url
+				}),
+				/* @__PURE__ */ a("span", {
+					className: "truncate",
+					children: i
+				}),
+				i !== r && /* @__PURE__ */ a("span", {
+					className: "shrink-0 truncate text-xs text-muted-foreground/70",
+					children: r
+				})
+			]
+		}, `${e.url}-${n}`);
+	})
+}), qe = ({ sources: e, getLabel: t = Ue, getFaviconUrl: n = Ge, className: r, ...i }) => e.length === 0 ? null : /* @__PURE__ */ o(k, {
+	className: E("not-prose", r),
 	...i,
 	children: [/* @__PURE__ */ o(A, {
-		className: "group flex items-center gap-1 self-start text-sm text-muted-foreground transition-colors hover:text-foreground",
+		className: "group flex items-center gap-1 self-start text-[13px] leading-5 text-muted-foreground transition-colors hover:text-foreground",
 		children: [/* @__PURE__ */ a("span", { children: t(e.length) }), /* @__PURE__ */ a(c, { className: "size-2.5 transition-transform group-data-[state=open]:rotate-180" })]
 	}), /* @__PURE__ */ a(j, {
-		className: "mt-1 flex flex-col gap-0.5 data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 data-[state=closed]:animate-out data-[state=open]:animate-in",
-		children: e.map((e, t) => {
-			let r = $(e.url), i = e.title || r;
-			return /* @__PURE__ */ o("a", {
-				href: e.url,
-				target: "_blank",
-				rel: "noreferrer",
-				className: "flex min-w-0 items-center gap-1.5 rounded-md px-1.5 py-1 text-sm text-muted-foreground transition-colors hover:bg-muted hover:text-foreground",
-				children: [
-					/* @__PURE__ */ a(Ge, {
-						getFaviconUrl: n,
-						url: e.url
-					}),
-					/* @__PURE__ */ a("span", {
-						className: "truncate",
-						children: i
-					}),
-					i !== r && /* @__PURE__ */ a("span", {
-						className: "shrink-0 truncate text-xs text-muted-foreground/70",
-						children: r
-					})
-				]
-			}, `${e.url}-${t}`);
+		className: "mt-1 data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 data-[state=closed]:animate-out data-[state=open]:animate-in",
+		children: /* @__PURE__ */ a($, {
+			sources: e,
+			getFaviconUrl: n
 		})
 	})]
-}), qe = "ocui-cite", Je = ({ pressed: e, onPressedChange: t, label: n = "Search the web", tooltip: r, className: i, variant: s, size: c = "icon", onClick: l, ...u }) => {
+}), Je = "ocui-cite", Ye = ({ pressed: e, onPressedChange: t, label: n = "Search the web", tooltip: r, className: i, variant: s, size: c = "icon", onClick: l, ...u }) => {
 	let f = s ?? (e ? "default" : "ghost"), p = /* @__PURE__ */ a(K, {
 		...u,
 		"aria-label": n,
 		"aria-pressed": e,
-		className: T(i),
+		className: E(i),
 		size: c,
 		type: "button",
 		variant: f,
@@ -755,4 +792,4 @@ var Ke = ({ sources: e, getLabel: t = Ue, getFaviconUrl: n = We, className: r, .
 	}) : p;
 };
 //#endregion
-export { Ce as Action, Se as Actions, O as MessageContent, ze as MessageTrace, N as Reasoning, I as ReasoningContent, P as ReasoningTrigger, ne as Response, Ke as Sources, pe as Tool, ve as ToolContent, _e as ToolHeader, ye as ToolInput, be as ToolOutput, Je as WebSearchToggle, Te as buildSegments, qe as citationClassName, Ne as deriveTurnView, Me as extractWebSearchSources, Q as getAiActivityLabel, Z as getAiActivityLabelParts, Re as humanizeToolName, De as isWebSearchError, Le as labelSeedFromString, F as reasoningTextClassName, ke as stripCitationParens, Ie as traceElapsedSeconds, Ee as traceIsLoading, He as useActivityClock };
+export { Ce as Action, Se as Actions, O as MessageContent, ze as MessageTrace, N as Reasoning, I as ReasoningContent, P as ReasoningTrigger, ne as Response, $ as SourceList, qe as Sources, pe as Tool, ve as ToolContent, _e as ToolHeader, ye as ToolInput, be as ToolOutput, Ye as WebSearchToggle, Te as buildSegments, Je as citationClassName, Ne as deriveTurnView, Me as extractWebSearchSources, Ie as getAiActivityLabel, Z as getAiActivityLabelParts, Q as humanizeToolName, De as isWebSearchError, Re as labelSeedFromString, F as reasoningTextClassName, ke as stripCitationParens, Le as traceElapsedSeconds, Ee as traceIsLoading, He as useActivityClock };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ocai/app-sdk-ui",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Shared design tokens and AI-app UI primitives for OceanAI products.",
   "license": "MIT",
   "type": "module",