@ocai/app-sdk-ui 0.1.0 → 0.2.0

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

@@ -0,0 +1,15 @@
+export type AiActivityKind = "waiting" | "reasoning" | "tools";
+export interface AiActivity {
+    seed: number;
+    elapsedSeconds: number;
+    nowMs: number;
+}
+export declare function getAiActivityLabel({ kind, active, seed, elapsedSeconds, }: Pick<AiActivity, "seed" | "elapsedSeconds"> & {
+    kind: AiActivityKind;
+    active: boolean;
+}): 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,16 @@
+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;
+    defaultOpen?: boolean;
+    className?: string;
+};
+export declare const MessageTrace: ({ parts, isLoading, messageId, activity, getToolLabel, getToolIcon, defaultOpen, className, }: MessageTraceProps) => ReactElement;

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

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

@@ -0,0 +1,5 @@
+import { ReactElement } from 'react';
+export declare const hasRenderableValue: (v: unknown) => boolean;
+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/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,34 @@
+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 extractWebSearchSources(parts: ReadonlyArray<{
+    type?: string;
+    state?: string;
+    output?: unknown;
+}>, options?: {
+    toolType?: string;
+}): SourceItem[];

package/dist/chat.css

@@ -60,16 +60,125 @@
     @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;
+  }
+  /* 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
+     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

@@ -3,3 +3,10 @@ export { MessageContent, type MessageContentProps, type MessageContentVariant, }
 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 { 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 { 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 { WebSearchToggle, type WebSearchToggleProps, } from './chat/web-search-toggle';

package/dist/index.js

@@ -4,78 +4,81 @@ 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, 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";
 //#region src/lib/cn.ts
-function S(...e) {
+function C(...e) {
 	return r(n(e));
 }
 //#endregion
 //#region src/chat/response.tsx
-var C = e({ singleDollarTextMath: !0 });
-function w({ className: e, ...n }) {
+var re = e({ singleDollarTextMath: !0 });
+function ie({ 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: 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 },
+		controls: {
+			table: !1,
+			code: { download: !1 }
+		},
 		...n
 	});
 }
 //#endregion
 //#region src/chat/message.tsx
-var T = {
+var ae = {
 	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),
+}, 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),
 	...r,
 	children: e
 });
 //#endregion
 //#region src/internal/collapsible.tsx
-function D({ ...e }) {
-	return /* @__PURE__ */ a(v.Root, {
+function w({ ...e }) {
+	return /* @__PURE__ */ a(x.Root, {
 		"data-slot": "collapsible",
 		...e
 	});
 }
-function O({ ...e }) {
-	return /* @__PURE__ */ a(v.CollapsibleTrigger, {
+function T({ ...e }) {
+	return /* @__PURE__ */ a(x.CollapsibleTrigger, {
 		"data-slot": "collapsible-trigger",
 		...e
 	});
 }
-function k({ ...e }) {
-	return /* @__PURE__ */ a(v.CollapsibleContent, {
+function E({ ...e }) {
+	return /* @__PURE__ */ a(x.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 se({ prop: e, defaultProp: t, onChange: n }) {
+	let [r, i] = b(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 D = h(null), ce = () => {
+	let e = v(D);
 	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({
+}, 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({
 		prop: r,
 		defaultProp: i,
 		onChange: o
-	}), [d, f] = _(!1);
-	return g(() => {
+	}), [d, f] = b(!1);
+	return y(() => {
 		if (i && !t && l && !d) {
 			let e = setTimeout(() => {
 				u(!1), f(!0);
-			}, N);
+			}, le);
 			return () => clearTimeout(e);
 		}
 	}, [
@@ -84,15 +87,15 @@ var j = p(null), M = () => {
 		i,
 		u,
 		d
-	]), /* @__PURE__ */ a(j.Provider, {
+	]), /* @__PURE__ */ a(D.Provider, {
 		value: {
 			isStreaming: t,
 			isOpen: l,
 			setIsOpen: u,
 			duration: n
 		},
-		children: /* @__PURE__ */ a(D, {
-			className: S("not-prose", e),
+		children: /* @__PURE__ */ a(w, {
+			className: C("not-prose", e),
 			onOpenChange: u,
 			open: l,
 			...c,
@@ -100,39 +103,106 @@ var j = p(null), M = () => {
 		})
 	});
 });
-function F({ variant: e, isStreaming: t, duration: n }) {
+function ue({ 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 k = _(({ className: e, children: t, variant: n = "reasoning", label: r, ...s }) => {
+	let { isStreaming: l, isOpen: u, duration: d } = ce(), f = r ?? ue({
 		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(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),
 		...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: C(l && "ocui-shimmer"),
+				children: f
 			}),
-			/* @__PURE__ */ a(c, { className: S("size-2.5 transition-transform", u ? "rotate-180" : "rotate-0") })
+			/* @__PURE__ */ a(c, { className: C("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),
+}), 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),
 	...t
 }));
-P.displayName = "Reasoning", I.displayName = "ReasoningTrigger", R.displayName = "ReasoningContent";
+O.displayName = "Reasoning", k.displayName = "ReasoningTrigger", j.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 de = 8, M = 240, N = 2e4, P = (e) => e === null || typeof e != "object" && typeof e != "function", F = (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;
+	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) => {
+	try {
+		let t = JSON.stringify(e, null, 2);
+		return t === void 0 ? String(e) : t.length > N ? `${t.slice(0, N)}\n… (truncated)` : t;
+	} catch {
+		return String(e);
+	}
+}, R = ({ 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 > M;
+	return /* @__PURE__ */ a("span", {
+		className: "text-foreground",
+		title: t ? e : void 0,
+		children: t ? `${e.slice(0, M)}…` : e
+	});
+}, z = ({ 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(R, { value: e })] }, t))
+}), me = ({ 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: I(t) ? /* @__PURE__ */ a(z, { value: t }) : /* @__PURE__ */ a(R, { value: t })
+		})]
+	}, e))
+}), he = ({ 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", {
+	className: "whitespace-pre-wrap break-words font-mono text-xs leading-relaxed text-muted-foreground",
+	children: e
+}) : P(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", {
+	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),
 	...t
-}), B = {
+}), _e = {
 	"input-streaming": "Pending",
 	"input-available": "Running",
 	"approval-requested": "Pending",
@@ -140,54 +210,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" }),
+}, ve = {
+	"input-streaming": /* @__PURE__ */ a(f, { className: "size-3.5 animate-spin" }),
+	"input-available": /* @__PURE__ */ a(f, { className: "size-3.5 animate-spin" }),
+	"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" })
+}, ye = ({ 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: [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),
 	...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(ye, { 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),
+}), 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),
 	...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),
+}), 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),
 	...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(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),
 	...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(B, { 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, 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", {
 	variants: {
 		variant: {
 			default: "bg-primary text-primary-foreground hover:bg-primary/90",
@@ -213,12 +283,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 V({ 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: C(we({
 			variant: t,
 			size: n,
 			className: e
@@ -228,43 +298,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 H({ delayDuration: e = 0, ...t }) {
+	return /* @__PURE__ */ a(S.Provider, {
 		"data-slot": "tooltip-provider",
 		delayDuration: e,
 		...t
 	});
 }
-function X({ ...e }) {
-	return /* @__PURE__ */ a(b.Root, {
+function U({ ...e }) {
+	return /* @__PURE__ */ a(S.Root, {
 		"data-slot": "tooltip",
 		...e
 	});
 }
-function Z({ ...e }) {
-	return /* @__PURE__ */ a(b.Trigger, {
+function W({ ...e }) {
+	return /* @__PURE__ */ a(S.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 G({ className: e, sideOffset: t = 0, children: n, ...r }) {
+	return /* @__PURE__ */ a(S.Portal, { children: /* @__PURE__ */ o(S.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: 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),
 		...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(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" })]
 	}) });
 }
 //#endregion
 //#region src/chat/actions.tsx
-var $ = ({ className: e, children: t, ...n }) => /* @__PURE__ */ a("div", {
-	className: S("flex items-center", e),
+var Te = ({ className: e, children: t, ...n }) => /* @__PURE__ */ a("div", {
+	className: C("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),
+}), 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),
 		size: s,
 		type: "button",
 		variant: i,
@@ -274,13 +344,367 @@ 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(H, {
+		delayDuration: 500,
+		children: /* @__PURE__ */ o(U, { children: [/* @__PURE__ */ a(W, {
 			asChild: !0,
 			children: l
-		}), /* @__PURE__ */ a(Q, { children: /* @__PURE__ */ a("p", { children: e }) })] })
+		}), /* @__PURE__ */ a(G, { children: /* @__PURE__ */ a("p", { children: e }) })] })
 	}) : l;
+}, K = [
+	{
+		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"
+	}
+], De = {
+	waiting: K,
+	reasoning: K,
+	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 J(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);
+	if (n === Infinity) return 0;
+	let a = i ? t ?? r : r;
+	return a === -Infinity ? 0 : Math.max(0, Math.floor((a - n) / 1e3));
+}
+function Y(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) {
+	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({
+		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",
+		active: t,
+		seed: h,
+		elapsedSeconds: t ? m : 0
+	}), _ = d || f.length > 0, [v, y] = b(c);
+	return /* @__PURE__ */ o("div", {
+		className: C("not-prose flex flex-col", l),
+		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",
+			children: /* @__PURE__ */ o("span", {
+				className: C(t && "ocui-shimmer"),
+				children: [g, _ ? "..." : ""]
+			})
+		}), v && _ && /* @__PURE__ */ o("div", {
+			className: "mt-2 flex flex-col gap-2",
+			children: [d && /* @__PURE__ */ a(ie, {
+				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", {
+				className: "flex flex-col",
+				children: f.map((e, t) => /* @__PURE__ */ a(Ae, {
+					node: e,
+					isFirst: t === 0,
+					isLast: t === f.length - 1,
+					getToolIcon: s
+				}, `step-${t}`))
+			})]
+		})]
+	});
+};
+function Ae({ 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: 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"
+			})
+		})]
+	});
+}
+function je({ 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" })
+	}) : /* @__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(() => ({
+		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 Fe(e) {
+	return `Used ${e} source${e === 1 ? "" : "s"}`;
+}
+function Q(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 Le({ url: e, getFaviconUrl: t }) {
+	let n = t(e), [r, i] = b(!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 Re = ({ sources: e, label: t = Fe, getFaviconUrl: n = Ie, className: r, ...i }) => e.length === 0 ? null : /* @__PURE__ */ o(w, {
+	className: C("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__ */ 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}`);
+		})
+	})]
+}), 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, {
+		"aria-label": n,
+		"aria-pressed": e,
+		className: C(i),
+		onClick: (n) => {
+			l?.(n), t(!e);
+		},
+		size: c,
+		type: "button",
+		variant: f,
+		...u,
+		children: /* @__PURE__ */ a(d, {})
+	});
+	return r ? /* @__PURE__ */ a(H, {
+		delayDuration: 300,
+		children: /* @__PURE__ */ o(U, { children: [/* @__PURE__ */ a(W, {
+			asChild: !0,
+			children: p
+		}), /* @__PURE__ */ a(G, { children: /* @__PURE__ */ a("p", { children: r }) })] })
+	}) : p;
 };
 //#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 };
+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 };

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.2.0",
   "description": "Shared design tokens and AI-app UI primitives for OceanAI products.",
   "license": "MIT",
   "type": "module",