@ocai/app-sdk-ui 0.1.0 → 0.3.0

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

@@ -0,0 +1,22 @@
+export type AiActivityKind = "waiting" | "reasoning" | "tools";
+export interface AiActivity {
+    seed: number;
+    elapsedSeconds: number;
+    nowMs: number;
+}
+export interface ActivityLabelParts {
+    verb: string;
+    elapsedSeconds: number;
+}
+export interface GetAiActivityLabelArgs extends Pick<AiActivity, "seed" | "elapsedSeconds"> {
+    kind: AiActivityKind;
+    active: boolean;
+    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;
+}>, nowMs?: number): number;
+export declare function labelSeedFromString(value: string): number;

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

@@ -0,0 +1,17 @@
+import { LucideIcon } from 'lucide-react';
+import { ReactElement } from 'react';
+import { AiActivity } from './activity-labels';
+import { TracePart } from './segments';
+export declare function humanizeToolName(type: string): string;
+export type MessageTraceProps = {
+    parts: readonly TracePart[];
+    isLoading: boolean;
+    messageId: string;
+    activity?: AiActivity;
+    getToolLabel?: (type: string) => string | undefined;
+    getToolIcon?: (type: string) => LucideIcon | undefined;
+    getActivityOverride?: (runningToolType: string | undefined) => string | undefined;
+    defaultOpen?: boolean;
+    className?: string;
+};
+export declare const MessageTrace: import('react').MemoExoticComponent<({ parts, isLoading, messageId, activity, getToolLabel, getToolIcon, getActivityOverride, 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/segments.d.ts

@@ -0,0 +1,23 @@
+export type TracePart = {
+    type: string;
+    startedAtMs?: number;
+    completedAtMs?: number;
+    [key: string]: unknown;
+};
+export type MessageSegment = {
+    kind: "trace";
+    parts: TracePart[];
+} | {
+    kind: "images";
+    parts: TracePart[];
+    index: number;
+} | {
+    kind: "part";
+    part: TracePart;
+    index: number;
+};
+export type BuildSegmentsOptions = {
+    isPresentationalTool?: (type: string) => boolean;
+};
+export declare function buildSegments(parts: readonly TracePart[], options?: BuildSegmentsOptions): MessageSegment[];
+export declare function traceIsLoading(parts: readonly TracePart[], messageLoading: boolean): boolean;

package/dist/chat/sources.d.ts

@@ -0,0 +1,13 @@
+import { ComponentProps, ReactElement } from 'react';
+import { Collapsible } from '../internal/collapsible';
+export type SourceItem = {
+    url: string;
+    title?: string;
+};
+export type SourcesProps = Omit<ComponentProps<typeof Collapsible>, "children"> & {
+    sources: readonly SourceItem[];
+    getLabel?: (count: number) => string;
+    getFaviconUrl?: (url: string) => string | 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

@@ -0,0 +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/tool.d.ts

@@ -1,5 +1,5 @@
 import { ToolUIPart } from 'ai';
-import { ComponentProps, ReactNode } from 'react';
+import { ComponentProps } from 'react';
 import { Collapsible, CollapsibleContent } from '../internal/collapsible';
 export type ToolProps = ComponentProps<typeof Collapsible>;
 export declare const Tool: ({ className, ...props }: ToolProps) => import("react").JSX.Element;
@@ -15,9 +15,9 @@ export declare const ToolContent: ({ className, ...props }: ToolContentProps) =>
 export type ToolInputProps = ComponentProps<"div"> & {
     input: ToolUIPart["input"];
 };
-export declare const ToolInput: ({ className, input, ...props }: ToolInputProps) => import("react").JSX.Element;
+export declare const ToolInput: ({ className, input, ...props }: ToolInputProps) => import("react").JSX.Element | null;
 export type ToolOutputProps = ComponentProps<"div"> & {
-    output: ReactNode;
+    output: unknown;
     errorText: ToolUIPart["errorText"];
 };
 export declare const ToolOutput: ({ className, output, errorText, ...props }: ToolOutputProps) => import("react").JSX.Element | 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/use-activity-clock.d.ts

@@ -0,0 +1,2 @@
+import { AiActivity } from './activity-labels';
+export declare function useActivityClock(isActive: boolean, seedBasis: number): AiActivity;

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

@@ -0,0 +1,9 @@
+import { ComponentProps } from 'react';
+import { Button } from '../internal/button';
+export type WebSearchToggleProps = Omit<ComponentProps<typeof Button>, "children"> & {
+    pressed: boolean;
+    onPressedChange: (pressed: boolean) => void;
+    label?: string;
+    tooltip?: string;
+};
+export declare const WebSearchToggle: ({ pressed, onPressedChange, label, tooltip, className, variant, size, onClick, ...props }: WebSearchToggleProps) => import("react").JSX.Element;

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

@@ -0,0 +1,35 @@
+import { ToolUIPart } from 'ai';
+import { SourceItem } from './sources';
+export interface WebSearchInput {
+    query: string;
+}
+export interface WebSearchResult {
+    title: string;
+    url: string;
+    content: string;
+    score: number;
+}
+export interface WebSearchSuccessOutput {
+    query: string;
+    results: WebSearchResult[];
+}
+export interface WebSearchErrorOutput {
+    error: string;
+}
+export type WebSearchOutput = WebSearchSuccessOutput | WebSearchErrorOutput;
+export type WebSearchUITool = {
+    input: WebSearchInput;
+    output: WebSearchOutput;
+};
+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;
+    output?: unknown;
+}>, options?: {
+    toolType?: string;
+}): SourceItem[];

package/dist/chat.css

@@ -60,16 +60,119 @@
     @apply font-medium text-foreground;
   }
 
-  /* --- Code block: Rune-style shell only. Container gets the rounded border;
-     the header strip (language label + copy/download) gets a tinted bar; the
-     `code-block-body` (shiki) keeps its own background + token colors. --- */
+  /* --- Code block: Claude.ai-style shell. ONE subtle card; the language is a
+     plain muted label (no header bar, no divider); and a single copy button
+     fades in on hover at the top-right (download is turned off via the
+     `controls` prop in chat/response.tsx). Streamdown frames the block with its
+     own utility classes as a padded `bg-sidebar` card wrapping a SECOND bordered
+     `bg-background` card, plus an always-visible copy/download pill floated up
+     by -mt-10 — we flatten both cards into one and re-home the copy overlay. */
   .ocui-md [data-streamdown="code-block"] {
-    @apply my-4 overflow-hidden rounded-lg border border-border;
+    @apply relative my-4 gap-0 overflow-hidden rounded-lg border border-border bg-muted/40 p-0;
   }
+  /* Language label: not a bar — small muted text with padding, no divider. The
+     inner <span> is Streamdown's `font-mono lowercase ml-1`; drop the mono and
+     the indent so the label lines up with the code's left edge. */
   .ocui-md [data-streamdown="code-block-header"] {
-    @apply border-b border-border bg-muted/50 px-3 py-1 text-xs text-muted-foreground;
+    @apply h-auto px-4 pt-3 pb-0 text-xs font-normal text-muted-foreground;
   }
+  .ocui-md [data-streamdown="code-block-header"] span {
+    @apply ml-0 font-sans;
+  }
+  /* Copy overlay: Streamdown wraps the buttons in an un-hooked div (no
+     data-streamdown), floated by `-mt-10` and always visible. Target it as the
+     div directly wrapping `code-block-actions` (mirrors the table's :has hook),
+     pin it top-right, and fade it in only on hover / keyboard focus. */
+  .ocui-md [data-streamdown="code-block"] > div:has(> [data-streamdown="code-block-actions"]) {
+    @apply absolute right-2 top-2 z-10 mt-0 h-auto opacity-0 transition-opacity;
+  }
+  .ocui-md [data-streamdown="code-block"]:hover > div:has(> [data-streamdown="code-block-actions"]),
+  .ocui-md [data-streamdown="code-block"]:focus-within > div:has(> [data-streamdown="code-block-actions"]) {
+    @apply opacity-100;
+  }
+  /* Drop the pill chrome (border + tinted bg) around the button. */
+  .ocui-md [data-streamdown="code-block-actions"] {
+    @apply gap-1 rounded-md border-0 bg-transparent p-0;
+  }
+  /* Copy button: 32px square, subtle hover fill, blur so it reads over code. */
+  .ocui-md [data-streamdown="code-block-copy-button"] {
+    @apply inline-flex h-8 w-8 items-center justify-center rounded-md p-0 backdrop-blur-md hover:bg-muted;
+  }
+  /* Body: strip Streamdown's inner card (border + rounding + bg) so the code
+     sits flush in the single shell; keep horizontal scroll + a code padding. */
   .ocui-md [data-streamdown="code-block-body"] {
-    @apply text-sm;
+    @apply rounded-none border-0 bg-transparent px-4 pb-4 pt-2 text-sm;
+  }
+
+  /* Opt-in inline-citation chips: <Response className={citationClassName}>
+     renders model-emitted "[title](url)" citations as compact pills. Opt-in so
+     ordinary markdown links elsewhere keep their default look. Streamdown 2.x
+     renders markdown links as <button data-streamdown="link"> (click-to-
+     confirm hardening), NOT <a href> — so target its data hook like every
+     other rule in this file; an href-based selector matches nothing. Stays
+     `inline` (never inline-flex) so the pill breaks with the surrounding text
+     like any other word instead of forcing a rigid box. */
+  .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;
+  }
+
+  /* Activity-label shimmer: while the model streams, the trigger label
+     ("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
+     Reasoning/MessageTrace's trigger only while streaming; reduced-motion
+     falls back to solid muted text. */
+  .ocui-shimmer {
+    /* Two glyph-clipped layers. LAYER 1 (background-color) is a SOLID base that
+       always fills every glyph, so text is never transparent. LAYER 2 (gradient,
+       painted on top) is transparent at both ends with an opaque --foreground band
+       in the middle — only that band tints the glyphs; elsewhere the base shows. */
+    background-color: var(--muted-foreground);
+    background-image: linear-gradient(
+      to right,
+      transparent 0%,
+      var(--foreground) 40%,
+      var(--foreground) 60%,
+      transparent 100%
+    );
+    background-size: 50% 100%;
+    background-repeat: no-repeat;
+    background-position: -100% 0;
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+    color: transparent;
+    display: inline-block;
+    animation: ocui-shimmer-sweep 1.6s linear infinite;
+  }
+
+  /* --- Tool call params/results (chat/tool-value.tsx). Structured shallow
+     objects render as aligned key–value rows; deep/large values fall back to
+     this single muted mono block — a refined replacement for the old heavy
+     bg-muted/50 JSON.stringify dump. --- */
+  .ocui-tool-json {
+    tab-size: 2;
+    line-height: 1.5;
+    max-height: 22rem;
+    overflow: auto;
+  }
+  /* Key column top-aligns with the first line of a wrapping value. */
+  .ocui-tool-kv > li > span:first-child {
+    align-self: start;
+  }
+}
+
+@keyframes ocui-shimmer-sweep {
+  from { background-position: -100% 0; }
+  to   { background-position: 250% 0; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ocui-shimmer {
+    animation: none;
+    background-image: none;
+    -webkit-text-fill-color: var(--muted-foreground);
+    color: var(--muted-foreground);
   }
 }

package/dist/index.d.ts

@@ -1,5 +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, 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, 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

@@ -4,95 +4,97 @@ import { Streamdown as t } from "streamdown";
 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, ClockIcon as l, Loader2Icon as u, WrenchIcon as d, XIcon as f } from "lucide-react";
-import { createContext as p, memo as m, useContext as h, useEffect as g, useState as _ } from "react";
-import { Collapsible as v, Slot as y, Tooltip as b } from "radix-ui";
-import { cva as x } from "class-variance-authority";
+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";
 //#region src/lib/cn.ts
-function S(...e) {
+function T(...e) {
 	return r(n(e));
 }
 //#endregion
 //#region src/chat/response.tsx
-var C = e({ singleDollarTextMath: !0 });
-function w({ className: e, ...n }) {
+var E = e({ singleDollarTextMath: !0 });
+function ne({ className: e, ...n }) {
 	return /* @__PURE__ */ a(t, {
-		className: S("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: C },
-		controls: { table: !1 },
+		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 },
+		controls: {
+			table: !1,
+			code: { download: !1 }
+		},
 		...n
 	});
 }
 //#endregion
 //#region src/chat/message.tsx
-var T = {
+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"
-}, E = ({ children: e, className: t, variant: n = "user", ...r }) => /* @__PURE__ */ a("div", {
-	className: S("flex flex-col gap-2 overflow-hidden text-base font-normal leading-6", T[n], t),
+}, 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),
 	...r,
 	children: e
 });
 //#endregion
 //#region src/internal/collapsible.tsx
-function D({ ...e }) {
-	return /* @__PURE__ */ a(v.Root, {
+function k({ ...e }) {
+	return /* @__PURE__ */ a(S.Root, {
 		"data-slot": "collapsible",
 		...e
 	});
 }
-function O({ ...e }) {
-	return /* @__PURE__ */ a(v.CollapsibleTrigger, {
+function A({ ...e }) {
+	return /* @__PURE__ */ a(S.CollapsibleTrigger, {
 		"data-slot": "collapsible-trigger",
 		...e
 	});
 }
-function k({ ...e }) {
-	return /* @__PURE__ */ a(v.CollapsibleContent, {
+function j({ ...e }) {
+	return /* @__PURE__ */ a(S.CollapsibleContent, {
 		"data-slot": "collapsible-content",
 		...e
 	});
 }
 //#endregion
 //#region src/chat/reasoning.tsx
-function A({ prop: e, defaultProp: t, onChange: n }) {
-	let [r, i] = _(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 j = p(null), M = () => {
-	let e = h(j);
+var M = h(null), ie = () => {
+	let e = v(M);
 	if (!e) throw Error("Reasoning components must be used within Reasoning");
 	return e;
-}, N = 500, P = m(({ className: e, isStreaming: t = !1, duration: n = 0, open: r, defaultOpen: i = !0, onOpenChange: o, children: s, ...c }) => {
-	let [l, u] = A({
+}, 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] = _(!1);
-	return g(() => {
+	}), [d, f] = x(!1), p = b(u);
+	return p.current = u, y(() => {
 		if (i && !t && l && !d) {
 			let e = setTimeout(() => {
-				u(!1), f(!0);
-			}, N);
+				p.current(!1), f(!0);
+			}, ae);
 			return () => clearTimeout(e);
 		}
 	}, [
 		t,
 		l,
 		i,
-		u,
 		d
-	]), /* @__PURE__ */ a(j.Provider, {
+	]), /* @__PURE__ */ a(M.Provider, {
 		value: {
 			isStreaming: t,
 			isOpen: l,
 			setIsOpen: u,
 			duration: n
 		},
-		children: /* @__PURE__ */ a(D, {
-			className: S("not-prose", e),
+		children: /* @__PURE__ */ a(k, {
+			className: T("not-prose", e),
 			onOpenChange: u,
 			open: l,
 			...c,
@@ -100,39 +102,106 @@ var j = p(null), M = () => {
 		})
 	});
 });
-function F({ 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 I = m(({ className: e, children: t, variant: n = "reasoning", label: r, ...s }) => {
-	let { isStreaming: l, isOpen: u, duration: f } = M(), p = r ?? F({
+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: f
+		duration: d
 	});
-	return /* @__PURE__ */ a(O, {
-		className: S("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: 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),
 		...s,
 		children: t ?? /* @__PURE__ */ o(i, { children: [
-			n === "tools" && /* @__PURE__ */ a(d, { className: "size-3" }),
+			n === "tools" && /* @__PURE__ */ a(p, { className: "size-3" }),
 			/* @__PURE__ */ a("span", {
-				className: S(l && "animate-pulse"),
-				children: p
+				className: T(l && "ocui-shimmer"),
+				children: f
 			}),
-			/* @__PURE__ */ a(c, { className: S("size-2.5 transition-transform", u ? "rotate-180" : "rotate-0") })
+			/* @__PURE__ */ a(c, { className: T("size-2.5 transition-transform", u ? "rotate-180" : "rotate-0") })
 		] })
 	});
-}), L = "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", R = m(({ className: e, ...t }) => /* @__PURE__ */ a(k, {
-	className: S(L, "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: T(F, "mt-1.5", e),
 	...t
 }));
-P.displayName = "Reasoning", I.displayName = "ReasoningTrigger", R.displayName = "ReasoningContent";
+N.displayName = "Reasoning", P.displayName = "ReasoningTrigger", I.displayName = "ReasoningContent";
 //#endregion
-//#region src/chat/tool.tsx
-var z = ({ className: e, ...t }) => /* @__PURE__ */ a(D, {
-	className: S("not-prose w-full rounded-md border border-border", e),
+//#region src/chat/tool-value.tsx
+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;
+}, 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 > 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) : H(t);
+	} catch {
+		return String(e);
+	}
+}, U = ({ value: e }) => {
+	if (e == null) return /* @__PURE__ */ a("span", {
+		className: "font-mono text-muted-foreground",
+		children: "null"
+	});
+	if (typeof e != "string") return /* @__PURE__ */ a("span", {
+		className: "font-mono text-foreground",
+		children: String(e)
+	});
+	if (e === "") return /* @__PURE__ */ a("span", {
+		className: "text-muted-foreground italic",
+		children: "empty"
+	});
+	let t = e.length > L;
+	return /* @__PURE__ */ a("span", {
+		className: "text-foreground",
+		title: t ? e : void 0,
+		children: t ? `${e.slice(0, L)}…` : e
+	});
+}, W = ({ value: e }) => e.length === 0 ? /* @__PURE__ */ a("span", {
+	className: "text-muted-foreground italic",
+	children: "none"
+}) : /* @__PURE__ */ a("span", {
+	className: "text-foreground",
+	children: e.map((e, t) => /* @__PURE__ */ o("span", { children: [t > 0 && /* @__PURE__ */ a("span", {
+		className: "px-1 text-muted-foreground/70",
+		children: "·"
+	}), /* @__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",
+		children: [/* @__PURE__ */ a("span", {
+			className: "break-words text-muted-foreground",
+			children: e
+		}), /* @__PURE__ */ a("span", {
+			className: "min-w-0 break-words whitespace-pre-wrap",
+			children: B(t) ? /* @__PURE__ */ a(W, { value: t }) : /* @__PURE__ */ a(U, { value: t })
+		})]
+	}, e))
+}), 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: 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: H(e)
+}) : R(e) ? /* @__PURE__ */ a("div", {
+	className: "font-mono text-xs text-foreground",
+	children: String(e)
+}) : le(e) ? /* @__PURE__ */ a(de, { data: e }) : B(e) ? /* @__PURE__ */ a("div", {
+	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),
 	...t
-}), B = {
+}), me = {
 	"input-streaming": "Pending",
 	"input-available": "Running",
 	"approval-requested": "Pending",
@@ -140,54 +209,54 @@ var z = ({ className: e, ...t }) => /* @__PURE__ */ a(D, {
 	"output-available": "Completed",
 	"output-error": "Error",
 	"output-denied": "Denied"
-}, V = {
-	"input-streaming": /* @__PURE__ */ a(u, { className: "size-3.5 animate-spin" }),
-	"input-available": /* @__PURE__ */ a(u, { className: "size-3.5 animate-spin" }),
-	"approval-requested": /* @__PURE__ */ a(l, { className: "size-3.5" }),
+}, 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(f, { className: "size-3.5 text-destructive" }),
-	"output-denied": /* @__PURE__ */ a(f, { className: "size-3.5 text-destructive" })
-}, H = ({ state: e }) => /* @__PURE__ */ o("span", {
+	"output-error": /* @__PURE__ */ a(m, { className: "size-3.5 text-destructive" }),
+	"output-denied": /* @__PURE__ */ a(m, { className: "size-3.5 text-destructive" })
+}, ge = ({ state: e }) => /* @__PURE__ */ o("span", {
 	className: "flex shrink-0 items-center gap-1 text-xs text-muted-foreground",
-	children: [V[e], B[e]]
-}), U = ({ className: e, type: t, state: n, title: r, ...i }) => /* @__PURE__ */ o(O, {
-	className: S("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: 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),
 	...i,
 	children: [/* @__PURE__ */ o("div", {
 		className: "flex min-w-0 flex-1 items-center gap-2",
-		children: [/* @__PURE__ */ a(d, { className: "size-3.5 shrink-0 text-muted-foreground" }), /* @__PURE__ */ a("span", {
+		children: [/* @__PURE__ */ a(p, { className: "size-3.5 shrink-0 text-muted-foreground" }), /* @__PURE__ */ a("span", {
 			className: "truncate text-sm font-medium",
 			children: r ?? t
 		})]
 	}), /* @__PURE__ */ o("div", {
 		className: "flex shrink-0 items-center gap-2",
-		children: [/* @__PURE__ */ a(H, { 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" })]
 	})]
-}), W = ({ className: e, ...t }) => /* @__PURE__ */ a(k, {
-	className: S("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: 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),
 	...t
-}), G = ({ className: e, input: t, ...n }) => /* @__PURE__ */ o("div", {
-	className: S("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: T("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("pre", {
-		className: "overflow-x-auto rounded-md bg-muted/50 p-2.5 font-mono text-xs",
-		children: JSON.stringify(t, null, 2)
-	})]
-}), K = ({ className: e, output: t, errorText: n, ...r }) => t || n ? /* @__PURE__ */ o("div", {
-	className: S("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: T("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",
 		children: n ? "Error" : "Result"
-	}), /* @__PURE__ */ o("div", {
-		className: S("overflow-x-auto rounded-md text-xs [&_table]:w-full", n ? "bg-destructive/10 p-2.5 text-destructive" : "bg-muted/50 p-2.5 text-foreground"),
-		children: [n && /* @__PURE__ */ a("div", { children: n }), t && /* @__PURE__ */ a("div", { children: t })]
+	}), n ? /* @__PURE__ */ a("div", {
+		className: "whitespace-pre-wrap break-words rounded-md bg-destructive/10 px-2.5 py-2 text-xs text-destructive",
+		children: n
+	}) : /* @__PURE__ */ a("div", {
+		className: "text-xs [&_table]:w-full",
+		children: /* @__PURE__ */ a(G, { value: t })
 	})]
-}) : null, q = x("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 = 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", {
 	variants: {
 		variant: {
 			default: "bg-primary text-primary-foreground hover:bg-primary/90",
@@ -213,12 +282,12 @@ var z = ({ className: e, ...t }) => /* @__PURE__ */ a(D, {
 		size: "default"
 	}
 });
-function J({ className: e, variant: t = "default", size: n = "default", asChild: r = !1, ...i }) {
-	return /* @__PURE__ */ a(r ? y.Root : "button", {
+function K({ className: e, variant: t = "default", size: n = "default", asChild: r = !1, ...i }) {
+	return /* @__PURE__ */ a(r ? te.Root : "button", {
 		"data-slot": "button",
 		"data-variant": t,
 		"data-size": n,
-		className: S(q({
+		className: T(xe({
 			variant: t,
 			size: n,
 			className: e
@@ -228,43 +297,43 @@ function J({ className: e, variant: t = "default", size: n = "default", asChild:
 }
 //#endregion
 //#region src/internal/tooltip.tsx
-function Y({ delayDuration: e = 0, ...t }) {
-	return /* @__PURE__ */ a(b.Provider, {
+function q({ delayDuration: e = 0, ...t }) {
+	return /* @__PURE__ */ a(C.Provider, {
 		"data-slot": "tooltip-provider",
 		delayDuration: e,
 		...t
 	});
 }
-function X({ ...e }) {
-	return /* @__PURE__ */ a(b.Root, {
+function J({ ...e }) {
+	return /* @__PURE__ */ a(C.Root, {
 		"data-slot": "tooltip",
 		...e
 	});
 }
-function Z({ ...e }) {
-	return /* @__PURE__ */ a(b.Trigger, {
+function Y({ ...e }) {
+	return /* @__PURE__ */ a(C.Trigger, {
 		"data-slot": "tooltip-trigger",
 		...e
 	});
 }
-function Q({ className: e, sideOffset: t = 0, children: n, ...r }) {
-	return /* @__PURE__ */ a(b.Portal, { children: /* @__PURE__ */ o(b.Content, {
+function X({ className: e, sideOffset: t = 0, children: n, ...r }) {
+	return /* @__PURE__ */ a(C.Portal, { children: /* @__PURE__ */ o(C.Content, {
 		"data-slot": "tooltip-content",
 		sideOffset: t,
-		className: S("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: 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),
 		...r,
-		children: [n, /* @__PURE__ */ a(b.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(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" })]
 	}) });
 }
 //#endregion
 //#region src/chat/actions.tsx
-var $ = ({ className: e, children: t, ...n }) => /* @__PURE__ */ a("div", {
-	className: S("flex items-center", e),
+var Se = ({ className: e, children: t, ...n }) => /* @__PURE__ */ a("div", {
+	className: T("-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(J, {
-		className: S("relative", r),
+}), 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),
 		size: s,
 		type: "button",
 		variant: i,
@@ -274,13 +343,416 @@ var $ = ({ className: e, children: t, ...n }) => /* @__PURE__ */ a("div", {
 			children: n || e
 		})]
 	});
-	return e ? /* @__PURE__ */ a(Y, {
-		delayDuration: 300,
-		children: /* @__PURE__ */ o(X, { children: [/* @__PURE__ */ a(Z, {
+	return e ? /* @__PURE__ */ a(q, {
+		delayDuration: 500,
+		children: /* @__PURE__ */ o(J, { children: [/* @__PURE__ */ a(Y, {
 			asChild: !0,
 			children: l
-		}), /* @__PURE__ */ a(Q, { children: /* @__PURE__ */ a("p", { children: e }) })] })
+		}), /* @__PURE__ */ a(X, { children: /* @__PURE__ */ a("p", { children: e }) })] })
 	}) : l;
 };
 //#endregion
-export { ee as Action, $ as Actions, E as MessageContent, P as Reasoning, R as ReasoningContent, I as ReasoningTrigger, w as Response, z as Tool, W as ToolContent, U as ToolHeader, G as ToolInput, K as ToolOutput, L as reasoningTextClassName };
+//#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"
+	},
+	{
+		active: "Reading",
+		done: "Read"
+	},
+	{
+		active: "Drafting",
+		done: "Drafted"
+	},
+	{
+		active: "Shaping",
+		done: "Shaped"
+	},
+	{
+		active: "Composing",
+		done: "Composed"
+	},
+	{
+		active: "Polishing",
+		done: "Polished"
+	},
+	{
+		active: "Mapping",
+		done: "Mapped"
+	},
+	{
+		active: "Sorting",
+		done: "Sorted"
+	},
+	{
+		active: "Refining",
+		done: "Refined"
+	},
+	{
+		active: "Working",
+		done: "Done"
+	}
+], Fe = {
+	waiting: Pe,
+	reasoning: Pe,
+	tools: [{
+		active: "Working",
+		done: "Worked"
+	}]
+};
+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 Q(e) {
+	let { verb: t, elapsedSeconds: n } = Z(e);
+	return n <= 0 ? t : `${t} for ${n}s`;
+}
+function Ie(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) {
+	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) {
+	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;
+	for (let t of e) if (t.type.startsWith("tool-")) {
+		m = !0;
+		let e = String(t.state ?? "");
+		e === "output-available" || e === "output-error" || e === "output-denied" || (h = t.type), p.push({
+			kind: "tool",
+			label: i?.(t.type) ?? Re(t.type),
+			state: e,
+			toolType: t.type
+		});
+	} else t.type === "text" && String(t.text ?? "").trim() && p.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",
+		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();
+	return /* @__PURE__ */ o("div", {
+		className: T("not-prose flex flex-col", u),
+		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",
+			children: /* @__PURE__ */ o("span", {
+				className: T(t && "ocui-shimmer"),
+				children: [S, w ? "..." : ""]
+			})
+		}), E && C && /* @__PURE__ */ o("div", {
+			id: O,
+			className: "mt-2 flex flex-col gap-2",
+			children: [f && /* @__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", {
+				className: "flex flex-col",
+				children: p.map((e, t) => /* @__PURE__ */ a(Be, {
+					node: e,
+					isFirst: t === 0,
+					isLast: t === p.length - 1,
+					getToolIcon: s
+				}, `step-${t}`))
+			})]
+		})]
+	});
+});
+ze.displayName = "MessageTrace";
+function Be({ node: e, isFirst: t, isLast: n, getToolIcon: r }) {
+	return /* @__PURE__ */ o("div", {
+		className: "flex items-stretch gap-2.5",
+		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"
+			})
+		})]
+	});
+}
+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,
+		children: /* @__PURE__ */ a("div", { className: "size-1 rounded-full bg-muted-foreground/60" })
+	}) : e.kind === "tool" ? e.state === "output-error" || e.state === "output-denied" ? /* @__PURE__ */ a("div", {
+		className: n,
+		children: /* @__PURE__ */ a(m, { className: "size-3.5 text-destructive" })
+	}) : e.state === "output-available" ? /* @__PURE__ */ a("div", {
+		className: n,
+		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 motion-reduce:animate-none" })
+	}) : /* @__PURE__ */ a("div", {
+		className: n,
+		children: /* @__PURE__ */ a(l, { className: "size-4 text-muted-foreground" })
+	});
+}
+//#endregion
+//#region src/chat/use-activity-clock.ts
+function He(e, t) {
+	let n = b(null), [r, i] = x(() => ({
+		seed: t,
+		elapsedSeconds: 0,
+		nowMs: Date.now()
+	}));
+	return y(() => {
+		if (!e) {
+			if (n.current === null) return;
+			let e = n.current;
+			n.current = null;
+			let t = setTimeout(() => {
+				i((t) => ({
+					...t,
+					elapsedSeconds: Math.max(1, Math.round((Date.now() - e) / 1e3)),
+					nowMs: Date.now()
+				}));
+			}, 0);
+			return () => clearTimeout(t);
+		}
+		let r;
+		n.current === null && (n.current = Date.now(), r = setTimeout(() => {
+			i({
+				seed: t,
+				elapsedSeconds: 0,
+				nowMs: Date.now()
+			});
+		}, 0));
+		let a = setInterval(() => {
+			n.current !== null && i((e) => ({
+				...e,
+				elapsedSeconds: Math.floor((Date.now() - n.current) / 1e3),
+				nowMs: Date.now()
+			}));
+		}, 1e3);
+		return () => {
+			r && clearTimeout(r), clearInterval(a);
+		};
+	}, [e, t]), r;
+}
+//#endregion
+//#region src/chat/sources.tsx
+function Ue(e) {
+	return `Searched ${e} source${e === 1 ? "" : "s"}`;
+}
+function $(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({ 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: "",
+		className: "size-3.5 shrink-0 rounded-xs",
+		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),
+	...i,
+	children: [/* @__PURE__ */ o(A, {
+		className: "group flex items-center gap-1 self-start text-sm 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}`);
+		})
+	})]
+}), 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 }) => {
+	let f = s ?? (e ? "default" : "ghost"), p = /* @__PURE__ */ a(K, {
+		...u,
+		"aria-label": n,
+		"aria-pressed": e,
+		className: T(i),
+		size: c,
+		type: "button",
+		variant: f,
+		onClick: (n) => {
+			l?.(n), t(!e);
+		},
+		children: /* @__PURE__ */ a(d, {})
+	});
+	return r ? /* @__PURE__ */ a(q, {
+		delayDuration: 300,
+		children: /* @__PURE__ */ o(J, { children: [/* @__PURE__ */ a(Y, {
+			asChild: !0,
+			children: p
+		}), /* @__PURE__ */ a(X, { children: /* @__PURE__ */ a("p", { children: 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 };

package/dist/tokens.css

@@ -73,7 +73,7 @@
 
   --radius: 0.625rem;
 
-  --card: var(--background);
+  --card: color-mix(in oklab, var(--foreground) 4%, var(--background));
   --card-foreground: var(--foreground);
   --popover: var(--background);
   --popover-foreground: var(--foreground);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ocai/app-sdk-ui",
-  "version": "0.1.0",
+  "version": "0.3.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"
   }
 }