@ocai/app-sdk-ui 0.2.0 → 0.4.0

package/dist/chat/activity-labels.d.ts

@@ -4,10 +4,17 @@ export interface AiActivity {
     elapsedSeconds: number;
     nowMs: number;
 }
-export declare function getAiActivityLabel({ kind, active, seed, elapsedSeconds, }: Pick<AiActivity, "seed" | "elapsedSeconds"> & {
+export interface ActivityLabelParts {
+    verb: string;
+    elapsedSeconds: number;
+}
+export interface GetAiActivityLabelArgs extends Pick<AiActivity, "seed" | "elapsedSeconds"> {
     kind: AiActivityKind;
     active: boolean;
-}): string;
+    verb?: string;
+}
+export declare function getAiActivityLabelParts({ kind, active, seed, elapsedSeconds, verb, }: GetAiActivityLabelArgs): ActivityLabelParts;
+export declare function getAiActivityLabel(args: GetAiActivityLabelArgs): string;
 export declare function traceElapsedSeconds(parts: ReadonlyArray<{
     startedAtMs?: number;
     completedAtMs?: number;

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;
@@ -10,7 +10,9 @@ export type MessageTraceProps = {
     activity?: AiActivity;
     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: ({ parts, isLoading, messageId, activity, getToolLabel, getToolIcon, 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/response.d.ts

@@ -1,5 +1,4 @@
 import { ComponentProps } from 'react';
 import { Streamdown } from 'streamdown';
-type ResponseProps = ComponentProps<typeof Streamdown>;
+export type ResponseProps = ComponentProps<typeof Streamdown>;
 export declare function Response({ className, ...props }: ResponseProps): import("react").JSX.Element;
-export {};

package/dist/chat/sources.d.ts

@@ -4,10 +4,16 @@ 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[];
-    label?: (count: number) => string;
+    getLabel?: (count: number) => string;
     getFaviconUrl?: (url: string) => string | null;
 };
-export declare const Sources: ({ sources, label, getFaviconUrl, className, ...props }: SourcesProps) => ReactElement | null;
+export declare const Sources: ({ sources, getLabel, getFaviconUrl, className, ...props }: SourcesProps) => ReactElement | null;
 export declare const citationClassName = "ocui-cite";

package/dist/chat/tool-value.d.ts

@@ -1,5 +1,6 @@
 import { ReactElement } from 'react';
 export declare const hasRenderableValue: (v: unknown) => boolean;
+export declare const capText: (value: string, max?: number) => string;
 export declare const ToolValue: ({ value }: {
     value: unknown;
 }) => ReactElement | null;

package/dist/chat/turn-view.d.ts

@@ -0,0 +1,21 @@
+import { MessageSegment, TracePart } from './segments';
+import { SourceItem } from './sources';
+import { AiActivityKind } from './activity-labels';
+export type TurnPhase = "waiting" | "reasoning" | "searching" | "tooling" | "answering" | "settled";
+export interface TurnView {
+    phase: TurnPhase;
+    segments: MessageSegment[];
+    trace: {
+        parts: TracePart[];
+        isLoading: boolean;
+    } | null;
+    sources: SourceItem[];
+    activityKind: AiActivityKind;
+    hasFinalAnswer: boolean;
+}
+export interface DeriveTurnViewOptions {
+    isPresentationalTool?: (type: string) => boolean;
+    isSearchTool?: (type: string) => boolean;
+    messageLoading?: boolean;
+}
+export declare function deriveTurnView(parts: readonly TracePart[], options?: DeriveTurnViewOptions): TurnView;

package/dist/chat/web-search.d.ts

@@ -25,6 +25,7 @@ export type WebSearchUIPart = ToolUIPart<{
     webSearch: WebSearchUITool;
 }>;
 export declare function isWebSearchError(output: unknown): output is WebSearchErrorOutput;
+export declare function stripCitationParens(text: string): string;
 export declare function extractWebSearchSources(parts: ReadonlyArray<{
     type?: string;
     state?: string;

package/dist/chat.css

@@ -115,15 +115,9 @@
   .ocui-md.ocui-cite [data-streamdown="link"] {
     @apply inline cursor-pointer rounded-sm bg-muted px-1.5 py-0.5 align-baseline text-xs font-normal text-muted-foreground no-underline transition-colors hover:bg-accent hover:text-accent-foreground;
   }
-  /* External-link hint: a small superscript arrow, added via content so it
-     never disturbs inline flow the way an <svg> child would. */
-  .ocui-md.ocui-cite [data-streamdown="link"]::after {
-    content: "↗";
-    @apply ml-0.5 align-super text-[0.65em] text-muted-foreground/70;
-  }
 
   /* Activity-label shimmer: while the model streams, the trigger label
-     ("Thinking…", "Shaping for 4 seconds") sweeps a full-contrast highlight
+     ("Thinking…", "Shaping for 4s") sweeps a full-contrast highlight
      left→right across the muted label text, instead of pulsing the whole word.
      Codex-style (a moving highlight band clipped to the glyphs). Base is the
      muted label color; the highlight is the foreground seed. Applied by

package/dist/index.d.ts

@@ -1,12 +1,13 @@
-export { Response } from './chat/response';
+export { Response, type ResponseProps } from './chat/response';
 export { MessageContent, type MessageContentProps, type MessageContentVariant, } from './chat/message';
 export { Reasoning, ReasoningContent, ReasoningTrigger, reasoningTextClassName, type ReasoningProps, type ReasoningTriggerProps, } from './chat/reasoning';
 export { Tool, ToolContent, ToolHeader, ToolInput, ToolOutput, type ToolContentProps, type ToolHeaderProps, type ToolInputProps, type ToolOutputProps, type ToolProps, } from './chat/tool';
 export { Action, Actions, type ActionProps, type ActionsProps, } from './chat/actions';
+export { deriveTurnView, type TurnView, type TurnPhase, type DeriveTurnViewOptions, } from './chat/turn-view';
 export { MessageTrace, humanizeToolName, type MessageTraceProps, } from './chat/message-trace';
 export { buildSegments, traceIsLoading, type BuildSegmentsOptions, type MessageSegment, type TracePart, } from './chat/segments';
-export { getAiActivityLabel, labelSeedFromString, traceElapsedSeconds, type AiActivity, type AiActivityKind, } from './chat/activity-labels';
+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 { extractWebSearchSources, isWebSearchError, type WebSearchErrorOutput, type WebSearchInput, type WebSearchOutput, type WebSearchResult, type WebSearchSuccessOutput, type WebSearchUIPart, type WebSearchUITool, } from './chat/web-search';
+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

@@ -5,20 +5,20 @@ import { clsx as n } from "clsx";
 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, useRef as ee, useState as b } from "react";
-import { Collapsible as x, Slot as te, Tooltip as S } from "radix-ui";
-import { cva as ne } from "class-variance-authority";
+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 C, Tooltip as w } from "radix-ui";
+import { cva as T } from "class-variance-authority";
 //#region src/lib/cn.ts
-function C(...e) {
+function E(...e) {
 	return r(n(e));
 }
 //#endregion
 //#region src/chat/response.tsx
-var re = e({ singleDollarTextMath: !0 });
-function ie({ className: e, ...n }) {
+var te = e({ singleDollarTextMath: !0 });
+function ne({ className: e, ...n }) {
 	return /* @__PURE__ */ a(t, {
-		className: C("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: re },
+		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 }
@@ -28,74 +28,73 @@ function ie({ className: e, ...n }) {
 }
 //#endregion
 //#region src/chat/message.tsx
-var ae = {
+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"
-}, oe = ({ children: e, className: t, variant: n = "user", ...r }) => /* @__PURE__ */ a("div", {
-	className: C("flex flex-col gap-2 overflow-hidden text-base font-normal leading-6", ae[n], t),
+}, O = ({ children: e, className: t, variant: n = "user", ...r }) => /* @__PURE__ */ a("div", {
+	className: E("flex flex-col gap-2 overflow-hidden text-base font-normal leading-6", D[n], t),
 	...r,
 	children: e
 });
 //#endregion
 //#region src/internal/collapsible.tsx
-function w({ ...e }) {
-	return /* @__PURE__ */ a(x.Root, {
+function k({ ...e }) {
+	return /* @__PURE__ */ a(S.Root, {
 		"data-slot": "collapsible",
 		...e
 	});
 }
-function T({ ...e }) {
-	return /* @__PURE__ */ a(x.CollapsibleTrigger, {
+function A({ ...e }) {
+	return /* @__PURE__ */ a(S.CollapsibleTrigger, {
 		"data-slot": "collapsible-trigger",
 		...e
 	});
 }
-function E({ ...e }) {
-	return /* @__PURE__ */ a(x.CollapsibleContent, {
+function j({ ...e }) {
+	return /* @__PURE__ */ a(S.CollapsibleContent, {
 		"data-slot": "collapsible-content",
 		...e
 	});
 }
 //#endregion
 //#region src/chat/reasoning.tsx
-function se({ prop: e, defaultProp: t, onChange: n }) {
-	let [r, i] = b(t), a = e !== void 0;
+function re({ prop: e, defaultProp: t, onChange: n }) {
+	let [r, i] = x(t), a = e !== void 0;
 	return [a ? e : r, (e) => {
 		a || i(e), n?.(e);
 	}];
 }
-var D = h(null), ce = () => {
-	let e = v(D);
+var M = h(null), ie = () => {
+	let e = v(M);
 	if (!e) throw Error("Reasoning components must be used within Reasoning");
 	return e;
-}, le = 500, O = _(({ className: e, isStreaming: t = !1, duration: n = 0, open: r, defaultOpen: i = !0, onOpenChange: o, children: s, ...c }) => {
-	let [l, u] = se({
+}, ae = 500, N = _(({ className: e, isStreaming: t = !1, duration: n = 0, open: r, defaultOpen: i = !0, onOpenChange: o, children: s, ...c }) => {
+	let [l, u] = re({
 		prop: r,
 		defaultProp: i,
 		onChange: o
-	}), [d, f] = b(!1);
-	return y(() => {
+	}), [d, f] = x(!1), p = b(u);
+	return p.current = u, y(() => {
 		if (i && !t && l && !d) {
 			let e = setTimeout(() => {
-				u(!1), f(!0);
-			}, le);
+				p.current(!1), f(!0);
+			}, ae);
 			return () => clearTimeout(e);
 		}
 	}, [
 		t,
 		l,
 		i,
-		u,
 		d
-	]), /* @__PURE__ */ a(D.Provider, {
+	]), /* @__PURE__ */ a(M.Provider, {
 		value: {
 			isStreaming: t,
 			isOpen: l,
 			setIsOpen: u,
 			duration: n
 		},
-		children: /* @__PURE__ */ a(w, {
-			className: C("not-prose", e),
+		children: /* @__PURE__ */ a(k, {
+			className: E("not-prose", e),
 			onOpenChange: u,
 			open: l,
 			...c,
@@ -103,51 +102,51 @@ var D = h(null), ce = () => {
 		})
 	});
 });
-function ue({ variant: e, isStreaming: t, duration: n }) {
+function oe({ variant: e, isStreaming: t, duration: n }) {
 	let r = e === "tools";
 	return t ? r ? "Working…" : "Thinking…" : n > 0 ? r ? `Worked for ${n}s` : `Thought for ${n}s` : r ? "Worked" : "Thought";
 }
-var k = _(({ className: e, children: t, variant: n = "reasoning", label: r, ...s }) => {
-	let { isStreaming: l, isOpen: u, duration: d } = ce(), f = r ?? ue({
+var P = _(({ className: e, children: t, variant: n = "reasoning", label: r, ...s }) => {
+	let { isStreaming: l, isOpen: u, duration: d } = ie(), f = r ?? oe({
 		variant: n,
 		isStreaming: l,
 		duration: d
 	});
-	return /* @__PURE__ */ a(T, {
-		className: C("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),
+	return /* @__PURE__ */ a(A, {
+		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: C(l && "ocui-shimmer"),
+				className: E(l && "ocui-shimmer"),
 				children: f
 			}),
-			/* @__PURE__ */ a(c, { className: C("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") })
 		] })
 	});
-}), A = "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", j = _(({ className: e, ...t }) => /* @__PURE__ */ a(E, {
-	className: C(A, "mt-1.5", e),
+}), 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: E(F, "mt-1.5", e),
 	...t
 }));
-O.displayName = "Reasoning", k.displayName = "ReasoningTrigger", j.displayName = "ReasoningContent";
+N.displayName = "Reasoning", P.displayName = "ReasoningTrigger", I.displayName = "ReasoningContent";
 //#endregion
 //#region src/chat/tool-value.tsx
-var de = 8, M = 240, N = 2e4, P = (e) => e === null || typeof e != "object" && typeof e != "function", F = (e) => {
+var se = 8, L = 240, ce = 2e4, R = (e) => e === null || typeof e != "object" && typeof e != "function", z = (e) => {
 	if (typeof e != "object" || !e) return !1;
 	let t = Object.getPrototypeOf(e);
 	return t === Object.prototype || t === null;
-}, I = (e) => Array.isArray(e) && e.every(P), fe = (e) => {
-	if (!F(e)) return !1;
+}, B = (e) => Array.isArray(e) && e.every(R), le = (e) => {
+	if (!z(e)) return !1;
 	let t = Object.keys(e);
-	return t.length === 0 || t.length > de ? !1 : t.every((t) => P(e[t]) || I(e[t]));
-}, L = (e) => g(e) ? !0 : e == null ? !1 : typeof e == "string" ? e.trim().length > 0 : P(e) ? !0 : Array.isArray(e) ? e.length > 0 : F(e) ? Object.keys(e).length > 0 : !0, pe = (e) => {
+	return t.length === 0 || t.length > se ? !1 : t.every((t) => R(e[t]) || B(e[t]));
+}, V = (e) => g(e) ? !0 : e == null ? !1 : typeof e == "string" ? e.trim().length > 0 : R(e) ? !0 : Array.isArray(e) ? e.length > 0 : z(e) ? Object.keys(e).length > 0 : !0, H = (e, t = ce) => e.length > t ? `${e.slice(0, t)}\n… (truncated)` : e, ue = (e) => {
 	try {
 		let t = JSON.stringify(e, null, 2);
-		return t === void 0 ? String(e) : t.length > N ? `${t.slice(0, N)}\n… (truncated)` : t;
+		return t === void 0 ? String(e) : H(t);
 	} catch {
 		return String(e);
 	}
-}, R = ({ value: e }) => {
+}, U = ({ value: e }) => {
 	if (e == null) return /* @__PURE__ */ a("span", {
 		className: "font-mono text-muted-foreground",
 		children: "null"
@@ -160,13 +159,13 @@ var de = 8, M = 240, N = 2e4, P = (e) => e === null || typeof e != "object" && t
 		className: "text-muted-foreground italic",
 		children: "empty"
 	});
-	let t = e.length > M;
+	let t = e.length > L;
 	return /* @__PURE__ */ a("span", {
 		className: "text-foreground",
 		title: t ? e : void 0,
-		children: t ? `${e.slice(0, M)}…` : e
+		children: t ? `${e.slice(0, L)}…` : e
 	});
-}, z = ({ value: e }) => e.length === 0 ? /* @__PURE__ */ a("span", {
+}, W = ({ value: e }) => e.length === 0 ? /* @__PURE__ */ a("span", {
 	className: "text-muted-foreground italic",
 	children: "none"
 }) : /* @__PURE__ */ a("span", {
@@ -174,8 +173,8 @@ var de = 8, M = 240, N = 2e4, P = (e) => e === null || typeof e != "object" && t
 	children: e.map((e, t) => /* @__PURE__ */ o("span", { children: [t > 0 && /* @__PURE__ */ a("span", {
 		className: "px-1 text-muted-foreground/70",
 		children: "·"
-	}), /* @__PURE__ */ a(R, { value: e })] }, t))
-}), me = ({ data: e }) => /* @__PURE__ */ a("ul", {
+	}), /* @__PURE__ */ a(U, { value: e })] }, t))
+}), de = ({ data: e }) => /* @__PURE__ */ a("ul", {
 	className: "ocui-tool-kv grid min-w-0 grid-cols-[auto_minmax(0,1fr)] gap-x-3 gap-y-1 text-xs",
 	children: Object.entries(e).map(([e, t]) => /* @__PURE__ */ o("li", {
 		className: "contents",
@@ -184,25 +183,25 @@ var de = 8, M = 240, N = 2e4, P = (e) => e === null || typeof e != "object" && t
 			children: e
 		}), /* @__PURE__ */ a("span", {
 			className: "min-w-0 break-words whitespace-pre-wrap",
-			children: I(t) ? /* @__PURE__ */ a(z, { value: t }) : /* @__PURE__ */ a(R, { value: t })
+			children: B(t) ? /* @__PURE__ */ a(W, { value: t }) : /* @__PURE__ */ a(U, { value: t })
 		})]
 	}, e))
-}), he = ({ value: e }) => /* @__PURE__ */ a("pre", {
+}), fe = ({ value: e }) => /* @__PURE__ */ a("pre", {
 	className: "ocui-tool-json overflow-x-auto rounded-md bg-muted/40 px-2.5 py-2 font-mono text-xs text-muted-foreground",
-	children: pe(e)
-}), B = ({ value: e }) => g(e) ? /* @__PURE__ */ a(i, { children: e }) : e == null ? null : typeof e == "string" ? e.trim() === "" ? null : /* @__PURE__ */ a("div", {
+	children: ue(e)
+}), G = ({ value: e }) => g(e) ? /* @__PURE__ */ a(i, { children: e }) : e == null ? null : typeof e == "string" ? e.trim() === "" ? null : /* @__PURE__ */ a("div", {
 	className: "whitespace-pre-wrap break-words font-mono text-xs leading-relaxed text-muted-foreground",
-	children: e
-}) : P(e) ? /* @__PURE__ */ a("div", {
+	children: H(e)
+}) : R(e) ? /* @__PURE__ */ a("div", {
 	className: "font-mono text-xs text-foreground",
 	children: String(e)
-}) : fe(e) ? /* @__PURE__ */ a(me, { data: e }) : I(e) ? /* @__PURE__ */ a("div", {
+}) : le(e) ? /* @__PURE__ */ a(de, { data: e }) : B(e) ? /* @__PURE__ */ a("div", {
 	className: "text-xs",
-	children: /* @__PURE__ */ a(z, { value: e })
-}) : /* @__PURE__ */ a(he, { value: e }), ge = ({ className: e, ...t }) => /* @__PURE__ */ a(w, {
-	className: C("not-prose w-full rounded-md border border-border", e),
+	children: /* @__PURE__ */ a(W, { value: e })
+}) : /* @__PURE__ */ a(fe, { value: e }), pe = ({ className: e, ...t }) => /* @__PURE__ */ a(k, {
+	className: E("not-prose w-full rounded-md border border-border", e),
 	...t
-}), _e = {
+}), me = {
 	"input-streaming": "Pending",
 	"input-available": "Running",
 	"approval-requested": "Pending",
@@ -210,19 +209,19 @@ var de = 8, M = 240, N = 2e4, P = (e) => e === null || typeof e != "object" && t
 	"output-available": "Completed",
 	"output-error": "Error",
 	"output-denied": "Denied"
-}, ve = {
-	"input-streaming": /* @__PURE__ */ a(f, { className: "size-3.5 animate-spin" }),
-	"input-available": /* @__PURE__ */ a(f, { className: "size-3.5 animate-spin" }),
+}, he = {
+	"input-streaming": /* @__PURE__ */ a(f, { className: "size-3.5 animate-spin motion-reduce:animate-none" }),
+	"input-available": /* @__PURE__ */ a(f, { className: "size-3.5 animate-spin motion-reduce:animate-none" }),
 	"approval-requested": /* @__PURE__ */ a(u, { className: "size-3.5" }),
 	"approval-responded": /* @__PURE__ */ a(s, { className: "size-3.5" }),
 	"output-available": /* @__PURE__ */ a(s, { className: "size-3.5" }),
 	"output-error": /* @__PURE__ */ a(m, { className: "size-3.5 text-destructive" }),
 	"output-denied": /* @__PURE__ */ a(m, { className: "size-3.5 text-destructive" })
-}, ye = ({ state: e }) => /* @__PURE__ */ o("span", {
+}, ge = ({ state: e }) => /* @__PURE__ */ o("span", {
 	className: "flex shrink-0 items-center gap-1 text-xs text-muted-foreground",
-	children: [ve[e], _e[e]]
-}), be = ({ className: e, type: t, state: n, title: r, ...i }) => /* @__PURE__ */ o(T, {
-	className: C("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),
+	children: [he[e], me[e]]
+}), _e = ({ className: e, type: t, state: n, title: r, ...i }) => /* @__PURE__ */ o(A, {
+	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",
@@ -232,20 +231,20 @@ var de = 8, M = 240, N = 2e4, P = (e) => e === null || typeof e != "object" && t
 		})]
 	}), /* @__PURE__ */ o("div", {
 		className: "flex shrink-0 items-center gap-2",
-		children: [/* @__PURE__ */ a(ye, { state: n }), /* @__PURE__ */ a(c, { className: "size-3.5 text-muted-foreground transition-transform group-data-[state=open]:rotate-180" })]
+		children: [/* @__PURE__ */ a(ge, { state: n }), /* @__PURE__ */ a(c, { className: "size-3.5 text-muted-foreground transition-transform group-data-[state=open]:rotate-180" })]
 	})]
-}), xe = ({ className: e, ...t }) => /* @__PURE__ */ a(E, {
-	className: C("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),
+}), ve = ({ className: e, ...t }) => /* @__PURE__ */ a(j, {
+	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
-}), Se = ({ className: e, input: t, ...n }) => L(t) ? /* @__PURE__ */ o("div", {
-	className: C("space-y-1.5 overflow-hidden px-2.5 pb-2.5", e),
+}), ye = ({ className: e, input: t, ...n }) => V(t) ? /* @__PURE__ */ o("div", {
+	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(B, { value: t })]
-}) : null, Ce = ({ className: e, output: t, errorText: n, ...r }) => L(t) || n ? /* @__PURE__ */ o("div", {
-	className: C("space-y-1.5 px-2.5 pb-2.5", e),
+	}), /* @__PURE__ */ a(G, { value: t })]
+}) : null, be = ({ className: e, output: t, errorText: n, ...r }) => V(t) || n ? /* @__PURE__ */ o("div", {
+	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",
@@ -255,9 +254,9 @@ var de = 8, M = 240, N = 2e4, P = (e) => e === null || typeof e != "object" && t
 		children: n
 	}) : /* @__PURE__ */ a("div", {
 		className: "text-xs [&_table]:w-full",
-		children: /* @__PURE__ */ a(B, { value: t })
+		children: /* @__PURE__ */ a(G, { value: t })
 	})]
-}) : null, we = ne("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,12 +282,12 @@ var de = 8, M = 240, N = 2e4, P = (e) => e === null || typeof e != "object" && t
 		size: "default"
 	}
 });
-function V({ className: e, variant: t = "default", size: n = "default", asChild: r = !1, ...i }) {
-	return /* @__PURE__ */ a(r ? te.Root : "button", {
+function K({ className: e, variant: t = "default", size: n = "default", asChild: r = !1, ...i }) {
+	return /* @__PURE__ */ a(r ? C.Root : "button", {
 		"data-slot": "button",
 		"data-variant": t,
 		"data-size": n,
-		className: C(we({
+		className: E(xe({
 			variant: t,
 			size: n,
 			className: e
@@ -298,43 +297,43 @@ function V({ className: e, variant: t = "default", size: n = "default", asChild:
 }
 //#endregion
 //#region src/internal/tooltip.tsx
-function H({ delayDuration: e = 0, ...t }) {
-	return /* @__PURE__ */ a(S.Provider, {
+function q({ delayDuration: e = 0, ...t }) {
+	return /* @__PURE__ */ a(w.Provider, {
 		"data-slot": "tooltip-provider",
 		delayDuration: e,
 		...t
 	});
 }
-function U({ ...e }) {
-	return /* @__PURE__ */ a(S.Root, {
+function J({ ...e }) {
+	return /* @__PURE__ */ a(w.Root, {
 		"data-slot": "tooltip",
 		...e
 	});
 }
-function W({ ...e }) {
-	return /* @__PURE__ */ a(S.Trigger, {
+function Y({ ...e }) {
+	return /* @__PURE__ */ a(w.Trigger, {
 		"data-slot": "tooltip-trigger",
 		...e
 	});
 }
-function G({ className: e, sideOffset: t = 0, children: n, ...r }) {
-	return /* @__PURE__ */ a(S.Portal, { children: /* @__PURE__ */ o(S.Content, {
+function X({ className: e, sideOffset: t = 0, children: n, ...r }) {
+	return /* @__PURE__ */ a(w.Portal, { children: /* @__PURE__ */ o(w.Content, {
 		"data-slot": "tooltip-content",
 		sideOffset: t,
-		className: C("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(S.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 Te = ({ className: e, children: t, ...n }) => /* @__PURE__ */ a("div", {
-	className: C("flex items-center", e),
+var Se = ({ className: e, children: t, ...n }) => /* @__PURE__ */ a("div", {
+	className: E("-ml-1.5 flex items-center", e),
 	...n,
 	children: t
-}), Ee = ({ tooltip: e, children: t, label: n, className: r, variant: i = "ghost", size: s = "icon", ...c }) => {
-	let l = /* @__PURE__ */ o(V, {
-		className: C("relative", r),
+}), Ce = ({ tooltip: e, children: t, label: n, className: r, variant: i = "ghost", size: s = "icon", ...c }) => {
+	let l = /* @__PURE__ */ o(K, {
+		className: E("relative", r),
 		size: s,
 		type: "button",
 		variant: i,
@@ -344,14 +343,113 @@ var Te = ({ className: e, children: t, ...n }) => /* @__PURE__ */ a("div", {
 			children: n || e
 		})]
 	});
-	return e ? /* @__PURE__ */ a(H, {
+	return e ? /* @__PURE__ */ a(q, {
 		delayDuration: 500,
-		children: /* @__PURE__ */ o(U, { children: [/* @__PURE__ */ a(W, {
+		children: /* @__PURE__ */ o(J, { children: [/* @__PURE__ */ a(Y, {
 			asChild: !0,
 			children: l
-		}), /* @__PURE__ */ a(G, { children: /* @__PURE__ */ a("p", { children: e }) })] })
+		}), /* @__PURE__ */ a(X, { children: /* @__PURE__ */ a("p", { children: e }) })] })
 	}) : l;
-}, K = [
+};
+//#endregion
+//#region src/chat/segments.ts
+function we(e, t) {
+	return e.startsWith("tool-") && !t(e);
+}
+function Te(e, t) {
+	let n = t?.isPresentationalTool ?? (() => !1), r = -1;
+	e.forEach((e, t) => {
+		(e.type === "reasoning" || we(e.type, n)) && (r = t);
+	});
+	let i = [], a = null, o = null, s = (e) => {
+		o = null, a || (a = {
+			kind: "trace",
+			parts: []
+		}, i.push(a)), a.parts.push(e);
+	};
+	return e.forEach((e, t) => {
+		if (!(e.type === "step-start" || e.type === "step-finish")) if (e.type === "reasoning") {
+			let t = String(e.text ?? ""), n = e.state === "streaming";
+			if (!(t.trim() || n)) return;
+			s(e);
+		} else we(e.type, n) ? s(e) : e.type === "text" && t <= r ? String(e.text ?? "").trim() && s(e) : e.type === "file" ? (a = null, o || (o = {
+			kind: "images",
+			parts: [],
+			index: t
+		}, i.push(o)), o.parts.push(e)) : (a = null, o = null, i.push({
+			kind: "part",
+			part: e,
+			index: t
+		}));
+	}), i;
+}
+function Ee(e, t) {
+	return e.some((e) => {
+		let n = e.state;
+		return typeof n == "string" ? e.type === "reasoning" || e.type === "text" ? n === "streaming" : n === "input-streaming" || n === "input-available" : t;
+	});
+}
+//#endregion
+//#region src/chat/web-search.ts
+function De(e) {
+	return typeof e == "object" && !!e && "error" in e && typeof e.error == "string";
+}
+var Oe = /\(\s*(\[[^\]\n]*\]\((?:[^()\n]|\([^()\n]*\))*\))\s*\)/g;
+function ke(e) {
+	return e.replace(Oe, "$1");
+}
+var Ae = "tool-webSearch";
+function je(e) {
+	try {
+		let t = new URL(e);
+		return `${t.hostname.toLowerCase()}${t.pathname.replace(/\/$/, "")}${t.search}`;
+	} catch {
+		return e.replace(/#.*$/, "").replace(/\/$/, "");
+	}
+}
+function Me(e, t) {
+	let n = t?.toolType ?? Ae, r = /* @__PURE__ */ new Set(), i = [];
+	for (let t of e) {
+		if (t.type !== n || t.state !== "output-available" || De(t.output)) continue;
+		let e = t.output?.results;
+		if (Array.isArray(e)) for (let t of e) {
+			if (typeof t?.url != "string") continue;
+			let e = je(t.url);
+			r.has(e) || (r.add(e), i.push({
+				url: t.url,
+				title: typeof t.title == "string" ? t.title : void 0
+			}));
+		}
+	}
+	return i;
+}
+//#endregion
+//#region src/chat/turn-view.ts
+function Ne(e, t) {
+	let n = t?.isSearchTool ?? (() => !1), r = t?.messageLoading, i = Te(e, { isPresentationalTool: t?.isPresentationalTool }), a = i.flatMap((e) => e.kind === "trace" ? e.parts : []), o = i.filter((e) => e.kind === "part" && e.part.type === "text"), s = o.some((e) => String(e.part.text ?? "").trim() !== ""), c = s && o.some((e) => e.part.state === "streaming"), l = a.some((e) => e.type === "reasoning" && String(e.text ?? "").trim() !== ""), u = a.some((e) => e.type.startsWith("tool-")), d = i.length > 0, f = a.some((e) => e.type === "reasoning" && e.state === "streaming"), p;
+	for (let e of a) {
+		if (!e.type.startsWith("tool-")) continue;
+		let t = String(e.state ?? "");
+		t === "output-available" || t === "output-error" || t === "output-denied" || (p = e.type);
+	}
+	let m = a.length > 0 && Ee(a, r ?? !1), h = (r ?? !0) && !s, g = a.length > 0 ? {
+		parts: a,
+		isLoading: h
+	} : null, _;
+	_ = d ? h ? m && f ? "reasoning" : m && p && n(p) ? "searching" : m && p ? "tooling" : l ? "reasoning" : u ? "tooling" : "reasoning" : c ? "answering" : "settled" : h ? "waiting" : "settled";
+	let v = d ? l ? "reasoning" : "tools" : "waiting";
+	return {
+		phase: _,
+		segments: i,
+		trace: g,
+		sources: Me(e),
+		activityKind: v,
+		hasFinalAnswer: s
+	};
+}
+//#endregion
+//#region src/chat/activity-labels.ts
+var Pe = [
 	{
 		active: "Thinking",
 		done: "Thought"
@@ -389,114 +487,166 @@ var Te = ({ className: e, children: t, ...n }) => /* @__PURE__ */ a("div", {
 		done: "Refined"
 	},
 	{
-		active: "Working",
-		done: "Done"
+		active: "Musing",
+		done: "Mused"
+	},
+	{
+		active: "Scurrying",
+		done: "Scurried"
+	},
+	{
+		active: "Crunching",
+		done: "Crunched"
 	}
-], De = {
-	waiting: K,
-	reasoning: K,
+], Fe = {
+	waiting: Pe,
+	reasoning: Pe,
 	tools: [{
 		active: "Working",
 		done: "Worked"
 	}]
-}, Oe = 5;
-function q({ kind: e, active: t, seed: n, elapsedSeconds: r }) {
-	let i = De[e], a = Math.floor(Math.max(0, r) / Oe), o = i[Math.abs(n + a) % i.length], s = t ? o.active : o.done;
-	return r <= 0 ? s : `${s} for ${r}s`;
+};
+function Z({ kind: e, active: t, seed: n, elapsedSeconds: r, verb: i }) {
+	let a;
+	if (i !== void 0) a = i;
+	else {
+		let r = Fe[e], i = r[Math.abs(n) % r.length];
+		a = t ? i.active : i.done;
+	}
+	return {
+		verb: a,
+		elapsedSeconds: r > 0 ? r : 0
+	};
+}
+function Ie(e) {
+	let { verb: t, elapsedSeconds: n } = Z(e);
+	return n <= 0 ? t : `${t} for ${n}s`;
 }
-function J(e, t) {
+function Le(e, t) {
 	let n = Infinity, r = -Infinity, i = !1;
-	for (let t of e) typeof t.startedAtMs == "number" && (n = Math.min(n, t.startedAtMs), typeof t.completedAtMs == "number" ? r = Math.max(r, t.completedAtMs) : i = !0);
+	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 ? t ?? r : r;
+	let a = i && Number.isFinite(t) ? t : r;
 	return a === -Infinity ? 0 : Math.max(0, Math.floor((a - n) / 1e3));
 }
-function Y(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 X(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 ke = ({ parts: e, isLoading: t, messageId: n, activity: r, getToolLabel: i, getToolIcon: s, defaultOpen: c = !1, className: l }) => {
-	let u = e.filter((e) => e.type === "reasoning").map((e) => String(e.text ?? "")).filter((e) => e.trim()).join("\n\n"), d = u.trim().length > 0, f = [], p = !1;
-	for (let t of e) t.type.startsWith("tool-") ? (p = !0, f.push({
-		kind: "tool",
-		label: i?.(t.type) ?? X(t.type),
-		state: String(t.state ?? ""),
-		toolType: t.type
-	})) : t.type === "text" && String(t.text ?? "").trim() && f.push({
+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-")) {
+		h = !0;
+		let e = String(t.state ?? "");
+		e === "output-available" || e === "output-error" || e === "output-denied" || (g = t.type), m.push({
+			kind: "tool",
+			label: i?.(t.type) ?? Q(t.type),
+			state: e,
+			toolType: t.type,
+			part: t
+		});
+	} else t.type === "text" && String(t.text ?? "").trim() && m.push({
 		kind: "note",
 		text: String(t.text)
 	});
-	p && !t && f.push({ kind: "done" });
-	let m = e.some((e) => typeof e.startedAtMs == "number") ? J(e, r?.nowMs) : r?.elapsedSeconds ?? 0, h = r?.seed ?? Y(n), g = q({
-		kind: d ? "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: h,
-		elapsedSeconds: t ? m : 0
-	}), _ = d || f.length > 0, [v, y] = b(c);
+		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: C("not-prose flex flex-col", l),
+		className: E("not-prose flex flex-col", d),
 		children: [/* @__PURE__ */ a("button", {
 			type: "button",
 			"data-testid": "message-reasoning",
-			onClick: () => y((e) => !e),
-			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: C(t && "ocui-shimmer"),
-				children: [g, _ ? "..." : ""]
+				className: E(t && "ocui-shimmer"),
+				children: [C, te ? "..." : ""]
 			})
-		}), v && _ && /* @__PURE__ */ o("div", {
+		}), D && T && /* @__PURE__ */ o("div", {
+			id: k,
 			className: "mt-2 flex flex-col gap-2",
-			children: [d && /* @__PURE__ */ a(ie, {
+			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: u
-			}), f.length > 0 && /* @__PURE__ */ a("div", {
+				children: f
+			}), m.length > 0 && /* @__PURE__ */ a("div", {
 				className: "flex flex-col",
-				children: f.map((e, t) => /* @__PURE__ */ a(Ae, {
+				children: m.map((e, t) => /* @__PURE__ */ a(Be, {
 					node: e,
 					isFirst: t === 0,
-					isLast: t === f.length - 1,
-					getToolIcon: s
+					isLast: t === m.length - 1,
+					getToolIcon: s,
+					renderStepDetail: l
 				}, `step-${t}`))
 			})]
 		})]
 	});
-};
-function Ae({ node: e, isFirst: t, isLast: n, getToolIcon: r }) {
+});
+ze.displayName = "MessageTrace";
+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: C("w-px flex-1", t ? "bg-transparent" : "bg-border") }),
-				/* @__PURE__ */ a(je, {
-					node: e,
-					getToolIcon: r
-				}),
-				/* @__PURE__ */ a("div", { className: C("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
+			})]
 		})]
 	});
 }
-function je({ node: e, getToolIcon: t }) {
+function Ve({ node: e, getToolIcon: t }) {
 	let n = "flex items-center justify-center bg-background py-0.5";
 	return e.kind === "note" ? /* @__PURE__ */ a("div", {
 		className: n,
@@ -509,54 +659,16 @@ function je({ node: e, getToolIcon: t }) {
 		children: /* @__PURE__ */ a(t?.(e.toolType) ?? s, { className: "size-3.5 text-muted-foreground" })
 	}) : /* @__PURE__ */ a("div", {
 		className: n,
-		children: /* @__PURE__ */ a(f, { className: "size-3.5 animate-spin text-muted-foreground" })
+		children: /* @__PURE__ */ a(f, { className: "size-3.5 animate-spin text-muted-foreground motion-reduce:animate-none" })
 	}) : /* @__PURE__ */ a("div", {
 		className: n,
 		children: /* @__PURE__ */ a(l, { className: "size-4 text-muted-foreground" })
 	});
 }
 //#endregion
-//#region src/chat/segments.ts
-function Z(e, t) {
-	return e.startsWith("tool-") && !t(e);
-}
-function Me(e, t) {
-	let n = t?.isPresentationalTool ?? (() => !1), r = -1;
-	e.forEach((e, t) => {
-		(e.type === "reasoning" || Z(e.type, n)) && (r = t);
-	});
-	let i = [], a = null, o = null, s = (e) => {
-		o = null, a || (a = {
-			kind: "trace",
-			parts: []
-		}, i.push(a)), a.parts.push(e);
-	};
-	return e.forEach((e, t) => {
-		if (!(e.type === "step-start" || e.type === "step-finish")) if (e.type === "reasoning") {
-			let t = String(e.text ?? ""), n = e.state === "streaming";
-			if (!(t.trim() || n)) return;
-			s(e);
-		} else Z(e.type, n) ? s(e) : e.type === "text" && t <= r ? String(e.text ?? "").trim() && s(e) : e.type === "file" ? (a = null, o || (o = {
-			kind: "images",
-			parts: [],
-			index: t
-		}, i.push(o)), o.parts.push(e)) : (a = null, o = null, i.push({
-			kind: "part",
-			part: e,
-			index: t
-		}));
-	}), i;
-}
-function Ne(e, t) {
-	return e.some((e) => {
-		let n = e.state;
-		return typeof n == "string" ? e.type === "reasoning" || e.type === "text" ? n === "streaming" : n === "input-streaming" || n === "input-available" : t;
-	});
-}
-//#endregion
 //#region src/chat/use-activity-clock.ts
-function Pe(e, t) {
-	let n = ee(null), [r, i] = b(() => ({
+function He(e, t) {
+	let n = b(null), [r, i] = x(() => ({
 		seed: t,
 		elapsedSeconds: 0,
 		nowMs: Date.now()
@@ -597,21 +709,21 @@ function Pe(e, t) {
 }
 //#endregion
 //#region src/chat/sources.tsx
-function Fe(e) {
-	return `Used ${e} source${e === 1 ? "" : "s"}`;
+function Ue(e) {
+	return `Searched ${e} source${e === 1 ? "" : "s"}`;
 }
-function Q(e) {
+function We(e) {
 	try {
 		return new URL(e).hostname;
 	} catch {
 		return e;
 	}
 }
-function Ie(e) {
-	return `https://www.google.com/s2/favicons?domain=${Q(e)}&sz=32`;
+function Ge(e) {
+	return `https://www.google.com/s2/favicons?domain=${We(e)}&sz=32`;
 }
-function Le({ url: e, getFaviconUrl: t }) {
-	let n = t(e), [r, i] = b(!1);
+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,
 		alt: "",
@@ -619,92 +731,65 @@ function Le({ url: e, getFaviconUrl: t }) {
 		onError: () => i(!0)
 	});
 }
-var Re = ({ sources: e, label: t = Fe, getFaviconUrl: n = Ie, className: r, ...i }) => e.length === 0 ? null : /* @__PURE__ */ o(w, {
-	className: C("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(T, {
-		className: "group 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",
+	children: [/* @__PURE__ */ o(A, {
+		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(E, {
-		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 = Q(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(Le, {
-						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}`);
+	}), /* @__PURE__ */ a(j, {
+		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
 		})
 	})]
-}), ze = "ocui-cite";
-//#endregion
-//#region src/chat/web-search.ts
-function $(e) {
-	return typeof e == "object" && !!e && "error" in e && typeof e.error == "string";
-}
-var Be = "tool-webSearch";
-function Ve(e) {
-	try {
-		let t = new URL(e);
-		return `${t.hostname.toLowerCase()}${t.pathname.replace(/\/$/, "")}${t.search}`;
-	} catch {
-		return e.replace(/#.*$/, "").replace(/\/$/, "");
-	}
-}
-function He(e, t) {
-	let n = t?.toolType ?? Be, r = /* @__PURE__ */ new Set(), i = [];
-	for (let t of e) {
-		if (t.type !== n || t.state !== "output-available" || $(t.output)) continue;
-		let e = t.output?.results;
-		if (Array.isArray(e)) for (let t of e) {
-			if (typeof t?.url != "string") continue;
-			let e = Ve(t.url);
-			r.has(e) || (r.add(e), i.push({
-				url: t.url,
-				title: t.title
-			}));
-		}
-	}
-	return i;
-}
-//#endregion
-//#region src/chat/web-search-toggle.tsx
-var Ue = ({ 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(V, {
+}), 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: C(i),
-		onClick: (n) => {
-			l?.(n), t(!e);
-		},
+		className: E(i),
 		size: c,
 		type: "button",
 		variant: f,
-		...u,
+		onClick: (n) => {
+			l?.(n), t(!e);
+		},
 		children: /* @__PURE__ */ a(d, {})
 	});
-	return r ? /* @__PURE__ */ a(H, {
+	return r ? /* @__PURE__ */ a(q, {
 		delayDuration: 300,
-		children: /* @__PURE__ */ o(U, { children: [/* @__PURE__ */ a(W, {
+		children: /* @__PURE__ */ o(J, { children: [/* @__PURE__ */ a(Y, {
 			asChild: !0,
 			children: p
-		}), /* @__PURE__ */ a(G, { children: /* @__PURE__ */ a("p", { children: r }) })] })
+		}), /* @__PURE__ */ a(X, { children: /* @__PURE__ */ a("p", { children: r }) })] })
 	}) : p;
 };
 //#endregion
-export { Ee as Action, Te as Actions, oe as MessageContent, ke as MessageTrace, O as Reasoning, j as ReasoningContent, k as ReasoningTrigger, ie as Response, Re as Sources, ge as Tool, xe as ToolContent, be as ToolHeader, Se as ToolInput, Ce as ToolOutput, Ue as WebSearchToggle, Me as buildSegments, ze as citationClassName, He as extractWebSearchSources, q as getAiActivityLabel, X as humanizeToolName, $ as isWebSearchError, Y as labelSeedFromString, A as reasoningTextClassName, J as traceElapsedSeconds, Ne as traceIsLoading, Pe 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.2.0",
+  "version": "0.4.0",
   "description": "Shared design tokens and AI-app UI primitives for OceanAI products.",
   "license": "MIT",
   "type": "module",
@@ -47,21 +47,26 @@
   },
   "devDependencies": {
     "@streamdown/math": "^1.0.2",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/react": "^16.3.2",
     "@types/node": "^22.0.0",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
     "@vitejs/plugin-react": "^6.0.1",
     "ai": "^6.0.0",
+    "jsdom": "^26.1.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "streamdown": "^2.5.0",
     "typescript": "~5.6.0",
     "vite": "^8.0.16",
-    "vite-plugin-dts": "^4.5.4"
+    "vite-plugin-dts": "^4.5.4",
+    "vitest": "^4.1.10"
   },
   "scripts": {
     "build": "vite build && cp src/tokens.css src/chat/chat.css dist/",
     "dev": "vite build --watch",
-    "typecheck": "tsc --noEmit"
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run"
   }
 }