@ciridae/ui-agent 0.3.0 → 0.3.5

package/dist/components/agentic/persona.js

@@ -0,0 +1,116 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRive, useStateMachineInput, useViewModel, useViewModelInstance, useViewModelInstanceColor, } from "@rive-app/react-webgl2";
+import { memo, useEffect, useMemo, useRef, useState } from "react";
+import { useAgenticTheme } from "@ciridae/ui-agent/theme";
+import { cn } from "@ciridae/ui/utils";
+const HALO_SOURCE = "/assets/persona/halo-2.0.riv";
+const STATE_MACHINE = "default";
+const Persona = memo(function Persona({ className, onLoad, onLoadError, onPause, onPlay, onReady, onStop, state = "idle", ...props }) {
+    const ready = useStrictModeSafeInit();
+    const callbacks = useStableRiveCallbacks({
+        onLoad,
+        onLoadError,
+        onPause,
+        onPlay,
+        onReady,
+        onStop,
+    });
+    const [loadFailed, setLoadFailed] = useState(false);
+    const riveParams = useMemo(() => ready
+        ? {
+            autoplay: true,
+            onLoad: callbacks.onLoad,
+            onLoadError: (error) => {
+                setLoadFailed(true);
+                callbacks.onLoadError?.(error);
+            },
+            onPause: callbacks.onPause,
+            onPlay: callbacks.onPlay,
+            onRiveReady: callbacks.onReady,
+            onStop: callbacks.onStop,
+            src: HALO_SOURCE,
+            stateMachines: STATE_MACHINE,
+        }
+        : null, [callbacks, ready]);
+    const { rive, RiveComponent } = useRive(riveParams);
+    usePersonaThemeColor(rive);
+    usePersonaStateMachine(rive, state);
+    return (_jsx("div", { "data-slot": "persona", "data-state": state, className: cn("relative flex aspect-square size-48 items-center justify-center overflow-hidden rounded-full", "bg-background text-foreground", className), ...props, children: loadFailed ? _jsx(PersonaFallback, { state: state }) : _jsx(RiveComponent, { className: "size-full" }) }));
+});
+function useStrictModeSafeInit() {
+    const [ready, setReady] = useState(false);
+    useEffect(() => {
+        const id = requestAnimationFrame(() => setReady(true));
+        return () => {
+            cancelAnimationFrame(id);
+            setReady(false);
+        };
+    }, []);
+    return ready;
+}
+function useStableRiveCallbacks({ onLoad, onLoadError, onPause, onPlay, onReady, onStop, }) {
+    const callbacksRef = useRef({
+        onLoad,
+        onLoadError,
+        onPause,
+        onPlay,
+        onReady,
+        onStop,
+    });
+    useEffect(() => {
+        callbacksRef.current = {
+            onLoad,
+            onLoadError,
+            onPause,
+            onPlay,
+            onReady,
+            onStop,
+        };
+    }, [onLoad, onLoadError, onPause, onPlay, onReady, onStop]);
+    return useMemo(() => ({
+        onLoad: (loadedRive) => callbacksRef.current.onLoad?.(loadedRive),
+        onLoadError: (error) => callbacksRef.current.onLoadError?.(error),
+        onPause: (event) => callbacksRef.current.onPause?.(event),
+        onPlay: (event) => callbacksRef.current.onPlay?.(event),
+        onReady: () => callbacksRef.current.onReady?.(),
+        onStop: (event) => callbacksRef.current.onStop?.(event),
+    }), []);
+}
+function usePersonaThemeColor(rive) {
+    const theme = useAgenticTheme();
+    const viewModel = useViewModel(rive, { useDefault: true });
+    const viewModelInstance = useViewModelInstance(viewModel, {
+        rive,
+        useDefault: true,
+    });
+    const color = useViewModelInstanceColor("color", viewModelInstance);
+    useEffect(() => {
+        if (!color)
+            return;
+        if (theme === "light")
+            color.setRgb(24, 24, 27);
+        else
+            color.setRgb(255, 255, 255);
+    }, [color, theme]);
+}
+function usePersonaStateMachine(rive, state) {
+    const listeningInput = useStateMachineInput(rive, STATE_MACHINE, "listening");
+    const thinkingInput = useStateMachineInput(rive, STATE_MACHINE, "thinking");
+    const speakingInput = useStateMachineInput(rive, STATE_MACHINE, "speaking");
+    const asleepInput = useStateMachineInput(rive, STATE_MACHINE, "asleep");
+    useEffect(() => {
+        setInputValue(listeningInput, state === "listening");
+        setInputValue(thinkingInput, state === "thinking");
+        setInputValue(speakingInput, state === "speaking");
+        setInputValue(asleepInput, state === "asleep");
+    }, [asleepInput, listeningInput, speakingInput, state, thinkingInput]);
+}
+function setInputValue(input, value) {
+    if (!input)
+        return;
+    input.value = value;
+}
+function PersonaFallback({ state }) {
+    return (_jsx("div", { "data-slot": "persona-fallback", "data-state": state, className: cn("size-24 rounded-full border border-foreground bg-background", state !== "asleep" && "ring-1 ring-foreground/20") }));
+}
+export { Persona };

package/dist/components/agentic/prompt-input.js

@@ -26,9 +26,9 @@ const promptInputClassName = css({
     borderWidth: "default",
     boxShadow: "xs",
     display: "grid",
-    gap: "gap.2",
+    gap: "2",
     outline: "none",
-    padding: "spacing.2",
+    padding: "2",
     transitionProperty: "color, box-shadow",
     width: "full",
     "&:focus-within": {
@@ -44,6 +44,7 @@ const promptInputBodyClassName = css({
     backgroundColor: "transparent",
     borderWidth: 0,
     boxShadow: "none",
+    flexDirection: "column",
     minHeight: "6rem",
     _dark: {
         backgroundColor: "transparent",
@@ -53,8 +54,8 @@ const promptInputTextareaClassName = css({
     fontSize: "sm",
     lineHeight: "relaxed",
     minHeight: "6rem",
-    paddingBlock: "spacing.2",
-    paddingInline: "spacing.2",
+    paddingBlock: "2",
+    paddingInline: "2",
     "&::placeholder": {
         color: "muted.foreground/70",
     },
@@ -130,7 +131,7 @@ function getPromptInputFormText(form, fallback = "") {
     return typeof message === "string" ? message : fallback;
 }
 function PromptInputBody({ className, ...props }) {
-    return (_jsx(InputGroup, { "data-slot": "prompt-input-body", className: cn(promptInputBodyClassName, className), ...props }));
+    return (_jsx(InputGroup, { "data-slot": "prompt-input-body", className: cn(promptInputBodyClassName, "items-stretch!", className), ...props }));
 }
 function PromptInputTextarea({ className, disabled, onKeyDown, onPaste, onValueChange, value, ...props }) {
     const context = React.useContext(PromptInputContext);
@@ -184,7 +185,7 @@ function PromptInputFooter({ className, ...props }) {
     return (_jsx("div", { "data-slot": "prompt-input-footer", className: cn("flex min-w-0 items-center justify-between gap-2 px-1", className), ...props }));
 }
 function PromptInputTools({ align = "block-end", className, ...props }) {
-    return (_jsx(InputGroupAddon, { align: align, "data-slot": "prompt-input-tools", className: cn("min-w-0 justify-between gap-2 px-0 pb-0", className), ...props }));
+    return (_jsx(InputGroupAddon, { align: align, "data-slot": "prompt-input-tools", className: cn("min-w-0 justify-between! gap-2 px-0 pb-0", className), ...props }));
 }
 function PromptInputButton({ children, className, label, size = "icon-sm", tooltip, variant = "ghost", ...props }) {
     const button = (_jsx(InputGroupButton, { "aria-label": label ?? tooltip, "data-slot": "prompt-input-button", size: size, variant: variant, className: cn("shrink-0 text-muted-foreground", className), ...props, children: children }));

package/dist/components/agentic/sources.js

@@ -13,10 +13,10 @@ const sourcesTriggerClassName = css({
     color: "card.foreground",
     display: "flex",
     fontSize: "sm",
-    gap: "gap.3",
+    gap: "3",
     justifyContent: "space-between",
-    paddingBlock: "spacing.2",
-    paddingInline: "spacing.3",
+    paddingBlock: "2",
+    paddingInline: "3",
     transitionProperty: "color, background-color",
     width: "full",
     "&:hover": {
@@ -31,7 +31,7 @@ const sourcesTriggerClassName = css({
 const sourcesTriggerLabelClassName = css({
     alignItems: "center",
     display: "flex",
-    gap: "gap.2",
+    gap: "2",
     minWidth: 0,
 });
 const sourcesIconClassName = css({
@@ -57,8 +57,8 @@ const sourcesChevronClassName = css({
 });
 const sourcesContentClassName = css({
     display: "grid",
-    gap: "gap.2",
-    marginTop: "spacing.2",
+    gap: "2",
+    marginTop: "2",
     overflow: "hidden",
     "&[data-state='closed']": {
         animationName: "fade-out",
@@ -74,10 +74,10 @@ const sourceClassName = css({
     color: "foreground",
     display: "flex",
     fontSize: "sm",
-    gap: "gap.2",
+    gap: "2",
     minWidth: 0,
-    paddingBlock: "spacing.2",
-    paddingInline: "spacing.3",
+    paddingBlock: "2",
+    paddingInline: "3",
     transitionProperty: "color, background-color",
     "&:hover": {
         backgroundColor: "accent",

package/dist/components/agentic/speech-input.d.ts

@@ -0,0 +1,24 @@
+import type * as React from "react";
+import type { AgenticSpeechStatus } from "@ciridae/ui-agent/types";
+import { Button } from "@ciridae/ui/button";
+type SpeechInputProps = React.ComponentProps<"div"> & {
+    disabled?: boolean;
+    onStart?: () => void;
+    onStop?: () => void;
+    status?: AgenticSpeechStatus;
+};
+type SpeechInputButtonProps = React.ComponentProps<typeof Button> & {
+    status?: AgenticSpeechStatus;
+};
+type SpeechInputStatusProps = React.ComponentProps<"p"> & {
+    status?: AgenticSpeechStatus;
+};
+type SpeechInputWaveformProps = React.ComponentProps<"div"> & {
+    active?: boolean;
+};
+declare function SpeechInput({ children, className, disabled, onStart, onStop, status, ...props }: SpeechInputProps): React.JSX.Element;
+declare function SpeechInputButton({ children, className, status, type, ...props }: SpeechInputButtonProps): React.JSX.Element;
+declare function SpeechInputStatus({ className, status, ...props }: SpeechInputStatusProps): React.JSX.Element;
+declare function SpeechInputWaveform({ active, className, ...props }: SpeechInputWaveformProps): React.JSX.Element;
+export { SpeechInput, SpeechInputButton, SpeechInputStatus, SpeechInputWaveform };
+export type { SpeechInputButtonProps, SpeechInputProps, SpeechInputStatusProps, SpeechInputWaveformProps, };

package/dist/components/agentic/speech-input.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { AudioLinesIcon, MicIcon, SquareIcon } from "lucide-react";
+import { Button } from "@ciridae/ui/button";
+import { cn } from "@ciridae/ui/utils";
+function SpeechInput({ children, className, disabled, onStart, onStop, status = "idle", ...props }) {
+    const active = status === "listening" || status === "processing" || status === "speaking";
+    return (_jsx("div", { "data-slot": "speech-input", "data-status": status, className: cn("flex min-w-0 items-center gap-3 rounded-lg border bg-card p-3", "data-[status=error]:border-destructive/40 data-[status=error]:bg-destructive/5", className), ...props, children: children ?? (_jsxs(_Fragment, { children: [_jsx(SpeechInputButton, { disabled: disabled, onClick: active ? onStop : onStart, status: status }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx(SpeechInputStatus, { status: status }), _jsx(SpeechInputWaveform, { active: active })] })] })) }));
+}
+function SpeechInputButton({ children, className, status = "idle", type = "button", ...props }) {
+    const active = status === "listening" || status === "processing" || status === "speaking";
+    const Icon = active ? SquareIcon : MicIcon;
+    return (_jsx(Button, { "aria-label": active ? "Stop speech input" : "Start speech input", "data-slot": "speech-input-button", size: "icon", type: type, variant: active ? "default" : "outline", className: cn("size-10 shrink-0 rounded-full", className), ...props, children: children ?? _jsx(Icon, { "aria-hidden": "true", className: "size-4" }) }));
+}
+function SpeechInputStatus({ className, status = "idle", ...props }) {
+    return (_jsx("p", { "data-slot": "speech-input-status", className: cn("truncate text-sm font-medium", className), ...props, children: getSpeechInputLabel(status) }));
+}
+function SpeechInputWaveform({ active, className, ...props }) {
+    return (_jsxs("div", { "aria-hidden": "true", "data-active": active ? "true" : undefined, "data-slot": "speech-input-waveform", className: cn("mt-2 flex h-4 items-center gap-1", className), ...props, children: [[0.3, 0.55, 0.85, 0.45, 0.7, 0.4, 0.6].map((scale, index) => (_jsx("span", { className: "h-full w-1 rounded-full bg-muted-foreground/30 data-[active=true]:bg-primary/70", "data-active": active ? "true" : undefined, style: { transform: `scaleY(${active ? scale : 0.28})` } }, index))), _jsx(AudioLinesIcon, { className: "ml-1 size-3.5 text-muted-foreground" })] }));
+}
+function getSpeechInputLabel(status) {
+    const labels = {
+        error: "Voice input needs attention",
+        idle: "Ready for voice input",
+        listening: "Listening",
+        processing: "Processing speech",
+        speaking: "Speaking response",
+    };
+    return labels[status];
+}
+export { SpeechInput, SpeechInputButton, SpeechInputStatus, SpeechInputWaveform };

package/dist/components/agentic/stack-trace.d.ts

@@ -0,0 +1,27 @@
+import type * as React from "react";
+import { Button } from "@ciridae/ui/button";
+import { Collapsible, CollapsibleContent } from "@ciridae/ui/collapsible";
+type StackTraceProps = React.ComponentProps<typeof Collapsible> & {
+    stack: string;
+};
+type StackTraceHeaderProps = React.ComponentProps<"div">;
+type StackTraceErrorProps = React.ComponentProps<"div">;
+type StackTraceErrorTypeProps = React.ComponentProps<"span">;
+type StackTraceErrorMessageProps = React.ComponentProps<"span">;
+type StackTraceActionsProps = React.ComponentProps<"div">;
+type StackTraceCopyButtonProps = React.ComponentProps<typeof Button>;
+type StackTraceExpandButtonProps = React.ComponentProps<typeof Button>;
+type StackTraceContentProps = React.ComponentProps<typeof CollapsibleContent>;
+type StackTraceFramesProps = React.ComponentProps<"div">;
+declare function StackTrace({ children, className, defaultOpen, stack, ...props }: StackTraceProps): React.JSX.Element;
+declare function StackTraceHeader({ children, className, ...props }: StackTraceHeaderProps): React.JSX.Element;
+declare function StackTraceError({ className, ...props }: StackTraceErrorProps): React.JSX.Element;
+declare function StackTraceErrorType({ className, ...props }: StackTraceErrorTypeProps): React.JSX.Element;
+declare function StackTraceErrorMessage({ className, ...props }: StackTraceErrorMessageProps): React.JSX.Element;
+declare function StackTraceActions({ className, ...props }: StackTraceActionsProps): React.JSX.Element;
+declare function StackTraceCopyButton({ children, ...props }: StackTraceCopyButtonProps): React.JSX.Element;
+declare function StackTraceExpandButton({ children, className, ...props }: StackTraceExpandButtonProps): React.JSX.Element;
+declare function StackTraceContent({ className, ...props }: StackTraceContentProps): React.JSX.Element;
+declare function StackTraceFrames({ className, ...props }: StackTraceFramesProps): React.JSX.Element;
+export { StackTrace, StackTraceActions, StackTraceContent, StackTraceCopyButton, StackTraceError, StackTraceErrorMessage, StackTraceErrorType, StackTraceExpandButton, StackTraceFrames, StackTraceHeader, };
+export type { StackTraceActionsProps, StackTraceContentProps, StackTraceCopyButtonProps, StackTraceErrorMessageProps, StackTraceErrorProps, StackTraceErrorTypeProps, StackTraceExpandButtonProps, StackTraceFramesProps, StackTraceHeaderProps, StackTraceProps, };

package/dist/components/agentic/stack-trace.js

@@ -0,0 +1,76 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CheckIcon, ChevronDownIcon, CopyIcon } from "lucide-react";
+import { createContext, useContext, useMemo, useState } from "react";
+import { Button } from "@ciridae/ui/button";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@ciridae/ui/collapsible";
+import { cn } from "@ciridae/ui/utils";
+import { copyToClipboard } from "./clipboard";
+const StackTraceContext = createContext(null);
+function useStackTrace() {
+    const context = useContext(StackTraceContext);
+    if (!context)
+        throw new Error("StackTrace components must be used within StackTrace");
+    return context;
+}
+function StackTrace({ children, className, defaultOpen = true, stack, ...props }) {
+    const frames = useMemo(() => parseStackFrames(stack), [stack]);
+    const contextValue = useMemo(() => ({ frames, stack }), [frames, stack]);
+    return (_jsx(StackTraceContext.Provider, { value: contextValue, children: _jsx(Collapsible, { "data-slot": "stack-trace", className: cn("w-full overflow-hidden rounded-lg border bg-card text-card-foreground", className), defaultOpen: defaultOpen, ...props, children: children }) }));
+}
+function StackTraceHeader({ children, className, ...props }) {
+    return (_jsx("div", { "data-slot": "stack-trace-header", className: cn("flex w-full items-center justify-between gap-3 border-b px-3 py-2 text-left", className), ...props, children: children }));
+}
+function StackTraceError({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "stack-trace-error", className: cn("min-w-0 flex-1 truncate text-sm", className), ...props }));
+}
+function StackTraceErrorType({ className, ...props }) {
+    return (_jsx("span", { "data-slot": "stack-trace-error-type", className: cn("font-medium text-destructive", className), ...props }));
+}
+function StackTraceErrorMessage({ className, ...props }) {
+    return (_jsx("span", { "data-slot": "stack-trace-error-message", className: cn("text-muted-foreground", className), ...props }));
+}
+function StackTraceActions({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "stack-trace-actions", className: cn("flex shrink-0 items-center gap-1", className), ...props }));
+}
+function StackTraceCopyButton({ children, ...props }) {
+    const { stack } = useStackTrace();
+    const [copied, setCopied] = useState(false);
+    const Icon = copied ? CheckIcon : CopyIcon;
+    return (_jsx(Button, { "aria-label": copied ? "Copied" : "Copy stack trace", size: "icon", type: "button", variant: "ghost", ...props, onClick: (event) => {
+            props.onClick?.(event);
+            if (!event.defaultPrevented)
+                void copyToClipboard(stack, setCopied);
+        }, children: children ?? _jsx(Icon, { "aria-hidden": "true", className: "size-4" }) }));
+}
+function StackTraceExpandButton({ children, className, ...props }) {
+    return (_jsx(CollapsibleTrigger, { asChild: true, children: _jsx(Button, { "aria-label": "Toggle stack trace", "data-slot": "stack-trace-expand-button", size: "icon", type: "button", variant: "ghost", ...props, className: cn("group/stack-trace-toggle shrink-0", className), children: children ?? (_jsx(ChevronDownIcon, { "aria-hidden": "true", className: "size-4 transition-transform group-data-[state=open]/stack-trace-toggle:rotate-180" })) }) }));
+}
+function StackTraceContent({ className, ...props }) {
+    return (_jsx(CollapsibleContent, { "data-slot": "stack-trace-content", className: cn("p-3", className), ...props }));
+}
+function StackTraceFrames({ className, ...props }) {
+    const { frames } = useStackTrace();
+    return (_jsx("div", { "data-slot": "stack-trace-frames", className: cn("grid gap-1 font-mono text-xs", className), ...props, children: frames.map((frame) => (_jsx(StackTraceFrame, { frame: frame }, `${frame.file}:${frame.line}:${frame.column}:${frame.method}`))) }));
+}
+function StackTraceFrame({ frame }) {
+    return (_jsxs("div", { className: "grid min-w-0 grid-cols-[1fr_auto] gap-3 rounded-md px-2 py-1 text-muted-foreground hover:bg-muted/50", children: [_jsx("span", { className: "truncate", children: frame.method ?? frame.file }), _jsx("span", { className: "shrink-0 text-foreground", children: formatLocation(frame) })] }));
+}
+function parseStackFrames(stack) {
+    return stack
+        .split("\n")
+        .map(parseStackLine)
+        .filter((frame) => frame !== null);
+}
+function parseStackLine(line) {
+    const trimmed = line.trim().replace(/^at\s+/, "");
+    const match = /^(?:(.+?)\s+\()?(.+):(\d+):(\d+)\)?$/.exec(trimmed);
+    if (!match)
+        return null;
+    return { column: match[4], file: match[2], line: match[3], method: match[1] };
+}
+function formatLocation(frame) {
+    if (!frame.line)
+        return frame.file;
+    return `${frame.file}:${frame.line}${frame.column ? `:${frame.column}` : ""}`;
+}
+export { StackTrace, StackTraceActions, StackTraceContent, StackTraceCopyButton, StackTraceError, StackTraceErrorMessage, StackTraceErrorType, StackTraceExpandButton, StackTraceFrames, StackTraceHeader, };

package/dist/components/agentic/suggestion.d.ts

@@ -0,0 +1,12 @@
+import type * as React from "react";
+import { Button } from "@ciridae/ui/button";
+import { ScrollArea } from "@ciridae/ui/scroll-area";
+type SuggestionsProps = React.ComponentProps<typeof ScrollArea>;
+type SuggestionProps = Omit<React.ComponentProps<typeof Button>, "onClick"> & {
+    onClick?: (suggestion: string) => void;
+    suggestion: string;
+};
+declare function Suggestions({ children, className, ...props }: SuggestionsProps): React.JSX.Element;
+declare function Suggestion({ children, className, onClick, size, suggestion, type, variant, ...props }: SuggestionProps): React.JSX.Element;
+export { Suggestion, Suggestions };
+export type { SuggestionProps, SuggestionsProps };

package/dist/components/agentic/suggestion.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback } from "react";
+import { Button } from "@ciridae/ui/button";
+import { ScrollArea } from "@ciridae/ui/scroll-area";
+import { cn } from "@ciridae/ui/utils";
+function Suggestions({ children, className, ...props }) {
+    return (_jsx(ScrollArea, { "data-slot": "suggestions", scrollbars: "horizontal", className: cn("w-full overflow-hidden whitespace-nowrap", className), ...props, children: _jsx("div", { className: "flex w-max min-w-full flex-nowrap items-center gap-2 px-1 py-1 pb-3", children: children }) }));
+}
+function Suggestion({ children, className, onClick, size = "sm", suggestion, type = "button", variant = "outline", ...props }) {
+    const handleClick = useCallback(() => {
+        onClick?.(suggestion);
+    }, [onClick, suggestion]);
+    return (_jsx(Button, { "data-slot": "suggestion", className: cn("max-w-80 shrink-0 justify-start truncate rounded-full", className), onClick: handleClick, size: size, type: type, variant: variant, ...props, children: _jsx("span", { className: "truncate", children: children ?? suggestion }) }));
+}
+export { Suggestion, Suggestions };

package/dist/components/agentic/test-results.d.ts

@@ -0,0 +1,51 @@
+import type * as React from "react";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@ciridae/ui/collapsible";
+import { Progress } from "@ciridae/ui/progress";
+type TestStatusValue = "failed" | "passed" | "running" | "skipped";
+type TestResultsContextValue = {
+    failed?: number;
+    passed?: number;
+    running?: number;
+    skipped?: number;
+    total?: number;
+};
+type TestResultsProps = React.ComponentProps<"div"> & TestResultsContextValue;
+type TestResultsHeaderProps = React.ComponentProps<"div">;
+type TestResultsDurationProps = React.ComponentProps<"span">;
+type TestResultsSummaryProps = React.ComponentProps<"div">;
+type TestResultsProgressProps = React.ComponentProps<typeof Progress>;
+type TestResultsContentProps = React.ComponentProps<"div">;
+type TestSuiteProps = React.ComponentProps<typeof Collapsible> & {
+    status?: TestStatusValue;
+};
+type TestSuiteNameProps = React.ComponentProps<typeof CollapsibleTrigger>;
+type TestSuiteStatsProps = React.ComponentProps<"div">;
+type TestSuiteContentProps = React.ComponentProps<typeof CollapsibleContent>;
+type TestProps = React.ComponentProps<"div"> & {
+    status?: TestStatusValue;
+};
+type TestNameProps = React.ComponentProps<"span">;
+type TestDurationProps = React.ComponentProps<"span">;
+type TestStatusProps = React.ComponentProps<"span">;
+type TestErrorProps = React.ComponentProps<"div">;
+type TestErrorMessageProps = React.ComponentProps<"p">;
+type TestErrorStackProps = React.ComponentProps<"pre">;
+declare function TestResults({ children, className, failed, passed, running, skipped, total, ...props }: TestResultsProps): React.JSX.Element;
+declare function TestResultsHeader({ className, ...props }: TestResultsHeaderProps): React.JSX.Element;
+declare function TestResultsDuration({ className, ...props }: TestResultsDurationProps): React.JSX.Element;
+declare function TestResultsSummary({ className, ...props }: TestResultsSummaryProps): React.JSX.Element;
+declare function TestResultsProgress(props: TestResultsProgressProps): React.JSX.Element;
+declare function TestResultsContent({ className, ...props }: TestResultsContentProps): React.JSX.Element;
+declare function TestSuite({ children, className, defaultOpen, status, ...props }: TestSuiteProps): React.JSX.Element;
+declare function TestSuiteName({ className, ...props }: TestSuiteNameProps): React.JSX.Element;
+declare function TestSuiteStats({ className, ...props }: TestSuiteStatsProps): React.JSX.Element;
+declare function TestSuiteContent({ className, ...props }: TestSuiteContentProps): React.JSX.Element;
+declare function Test({ children, className, status, ...props }: TestProps): React.JSX.Element;
+declare function TestName({ className, ...props }: TestNameProps): React.JSX.Element;
+declare function TestDuration({ className, ...props }: TestDurationProps): React.JSX.Element;
+declare function TestStatus({ className, ...props }: TestStatusProps): React.JSX.Element;
+declare function TestError({ className, ...props }: TestErrorProps): React.JSX.Element;
+declare function TestErrorMessage({ className, ...props }: TestErrorMessageProps): React.JSX.Element;
+declare function TestErrorStack({ className, ...props }: TestErrorStackProps): React.JSX.Element;
+export { Test, TestDuration, TestError, TestErrorMessage, TestErrorStack, TestName, TestResults, TestResultsContent, TestResultsDuration, TestResultsHeader, TestResultsProgress, TestResultsSummary, TestStatus, TestSuite, TestSuiteContent, TestSuiteName, TestSuiteStats, };
+export type { TestDurationProps, TestErrorMessageProps, TestErrorProps, TestErrorStackProps, TestNameProps, TestProps, TestResultsContentProps, TestResultsDurationProps, TestResultsHeaderProps, TestResultsProgressProps, TestResultsProps, TestResultsSummaryProps, TestStatusProps, TestStatusValue, TestSuiteContentProps, TestSuiteNameProps, TestSuiteProps, TestSuiteStatsProps, };

package/dist/components/agentic/test-results.js

@@ -0,0 +1,83 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CheckCircleIcon, CircleSlashIcon, LoaderCircleIcon, XCircleIcon } from "lucide-react";
+import { createContext, useContext, useMemo } from "react";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@ciridae/ui/collapsible";
+import { Progress } from "@ciridae/ui/progress";
+import { cn } from "@ciridae/ui/utils";
+const TestResultsContext = createContext({});
+const TestSuiteContext = createContext({ status: "passed" });
+const TestContext = createContext({ status: "passed" });
+function TestResults({ children, className, failed, passed, running, skipped, total, ...props }) {
+    const contextValue = useMemo(() => ({ failed, passed, running, skipped, total }), [failed, passed, running, skipped, total]);
+    return (_jsx(TestResultsContext.Provider, { value: contextValue, children: _jsx("div", { "data-slot": "test-results", className: cn("grid gap-3 rounded-lg border bg-card p-4", className), ...props, children: children }) }));
+}
+function TestResultsHeader({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "test-results-header", className: cn("flex items-center justify-between gap-3", className), ...props }));
+}
+function TestResultsDuration({ className, ...props }) {
+    return (_jsx("span", { "data-slot": "test-results-duration", className: cn("font-mono text-xs text-muted-foreground", className), ...props }));
+}
+function TestResultsSummary({ className, ...props }) {
+    const summary = useContext(TestResultsContext);
+    return (_jsx("div", { "data-slot": "test-results-summary", className: cn("text-sm text-muted-foreground", className), ...props, children: props.children ?? formatSummary(summary) }));
+}
+function TestResultsProgress(props) {
+    const { passed = 0, total = 0 } = useContext(TestResultsContext);
+    const value = total > 0 ? Math.round((passed / total) * 100) : 0;
+    return _jsx(Progress, { "data-slot": "test-results-progress", value: value, ...props });
+}
+function TestResultsContent({ className, ...props }) {
+    return _jsx("div", { "data-slot": "test-results-content", className: cn("grid gap-2", className), ...props });
+}
+function TestSuite({ children, className, defaultOpen = true, status = "passed", ...props }) {
+    const contextValue = useMemo(() => ({ status }), [status]);
+    return (_jsx(TestSuiteContext.Provider, { value: contextValue, children: _jsx(Collapsible, { "data-slot": "test-suite", className: cn("rounded-md border", className), defaultOpen: defaultOpen, ...props, children: children }) }));
+}
+function TestSuiteName({ className, ...props }) {
+    const { status } = useContext(TestSuiteContext);
+    return (_jsxs(CollapsibleTrigger, { "data-slot": "test-suite-name", className: cn("flex w-full items-center gap-2 px-3 py-2 text-left text-sm font-medium", className), ...props, children: [_jsx(TestStatusIcon, { status: status }), props.children] }));
+}
+function TestSuiteStats({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "test-suite-stats", className: cn("px-3 pb-2 text-xs text-muted-foreground", className), ...props }));
+}
+function TestSuiteContent({ className, ...props }) {
+    return (_jsx(CollapsibleContent, { "data-slot": "test-suite-content", className: cn("grid gap-1 border-t p-2", className), ...props }));
+}
+function Test({ children, className, status = "passed", ...props }) {
+    const contextValue = useMemo(() => ({ status }), [status]);
+    return (_jsx(TestContext.Provider, { value: contextValue, children: _jsx("div", { "data-slot": "test", className: cn("grid gap-1 rounded-md px-2 py-1 text-sm", className), ...props, children: children }) }));
+}
+function TestName({ className, ...props }) {
+    const { status } = useContext(TestContext);
+    return (_jsxs("span", { "data-slot": "test-name", className: cn("flex items-center gap-2", className), ...props, children: [_jsx(TestStatusIcon, { status: status }), props.children] }));
+}
+function TestDuration({ className, ...props }) {
+    return (_jsx("span", { "data-slot": "test-duration", className: cn("font-mono text-xs text-muted-foreground", className), ...props }));
+}
+function TestStatus({ className, ...props }) {
+    const { status } = useContext(TestContext);
+    return (_jsx("span", { "data-slot": "test-status", className: cn("text-meta text-muted-foreground", className), ...props, children: props.children ?? status }));
+}
+function TestError({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "test-error", className: cn("rounded-md border p-2", className), ...props }));
+}
+function TestErrorMessage({ className, ...props }) {
+    return (_jsx("p", { "data-slot": "test-error-message", className: cn("text-sm text-destructive", className), ...props }));
+}
+function TestErrorStack({ className, ...props }) {
+    return (_jsx("pre", { "data-slot": "test-error-stack", className: cn("overflow-auto font-mono text-xs text-muted-foreground", className), ...props }));
+}
+function TestStatusIcon({ status }) {
+    const Icon = status === "passed"
+        ? CheckCircleIcon
+        : status === "failed"
+            ? XCircleIcon
+            : status === "running"
+                ? LoaderCircleIcon
+                : CircleSlashIcon;
+    return _jsx(Icon, { "aria-hidden": "true", className: "size-4 shrink-0" });
+}
+function formatSummary({ failed = 0, passed = 0, skipped = 0, total = 0, }) {
+    return `${passed}/${total} passed, ${failed} failed, ${skipped} skipped`;
+}
+export { Test, TestDuration, TestError, TestErrorMessage, TestErrorStack, TestName, TestResults, TestResultsContent, TestResultsDuration, TestResultsHeader, TestResultsProgress, TestResultsSummary, TestStatus, TestSuite, TestSuiteContent, TestSuiteName, TestSuiteStats, };

package/dist/components/agentic/theme.d.ts

@@ -0,0 +1,5 @@
+type AgenticTheme = "dark" | "light";
+declare function useAgenticTheme(): AgenticTheme;
+declare function getAgenticTheme(): AgenticTheme;
+export { getAgenticTheme, useAgenticTheme };
+export type { AgenticTheme };

package/dist/components/agentic/theme.js

@@ -0,0 +1,31 @@
+import { useEffect, useState } from "react";
+function useAgenticTheme() {
+    const [theme, setTheme] = useState(getAgenticTheme);
+    useEffect(() => {
+        const updateTheme = () => setTheme(getAgenticTheme());
+        const observer = new MutationObserver(updateTheme);
+        observer.observe(document.documentElement, {
+            attributeFilter: ["class"],
+            attributes: true,
+        });
+        const media = window.matchMedia?.("(prefers-color-scheme: dark)");
+        media?.addEventListener("change", updateTheme);
+        return () => {
+            observer.disconnect();
+            media?.removeEventListener("change", updateTheme);
+        };
+    }, []);
+    return theme;
+}
+function getAgenticTheme() {
+    if (typeof window === "undefined")
+        return "light";
+    if (document.documentElement.classList.contains("light"))
+        return "light";
+    if (document.documentElement.classList.contains("dark"))
+        return "dark";
+    if (window.matchMedia?.("(prefers-color-scheme: dark)").matches)
+        return "dark";
+    return "light";
+}
+export { getAgenticTheme, useAgenticTheme };

package/dist/components/agentic/toolbar.d.ts

@@ -0,0 +1,6 @@
+import type * as React from "react";
+import { NodeToolbar } from "@xyflow/react";
+type ToolbarProps = React.ComponentProps<typeof NodeToolbar>;
+declare function Toolbar({ className, position, ...props }: ToolbarProps): React.JSX.Element;
+export { Toolbar };
+export type { ToolbarProps };

package/dist/components/agentic/toolbar.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { NodeToolbar, Position } from "@xyflow/react";
+import { cn } from "@ciridae/ui/utils";
+function Toolbar({ className, position = Position.Top, ...props }) {
+    return (_jsx(NodeToolbar, { "data-slot": "toolbar", position: position, className: cn("flex items-center gap-1 rounded-md border bg-card p-1 shadow-xs", className), ...props }));
+}
+export { Toolbar };

package/dist/components/agentic/transcription.d.ts

@@ -0,0 +1,20 @@
+import type * as React from "react";
+import type { AgenticTranscriptSegment } from "@ciridae/ui-agent/types";
+type TranscriptionProps = React.ComponentProps<"div"> & {
+    segments?: AgenticTranscriptSegment[];
+};
+type TranscriptionSegmentProps = React.ComponentProps<"div"> & {
+    segment?: AgenticTranscriptSegment;
+};
+type TranscriptionSpeakerProps = React.ComponentProps<"span">;
+type TranscriptionTextProps = React.ComponentProps<"p">;
+type TranscriptionTimestampProps = React.ComponentProps<"span">;
+type TranscriptionEmptyProps = React.ComponentProps<"div">;
+declare function Transcription({ children, className, segments, ...props }: TranscriptionProps): React.JSX.Element;
+declare function TranscriptionSegment({ children, className, segment, ...props }: TranscriptionSegmentProps): React.JSX.Element;
+declare function TranscriptionSpeaker({ className, ...props }: TranscriptionSpeakerProps): React.JSX.Element;
+declare function TranscriptionText({ className, ...props }: TranscriptionTextProps): React.JSX.Element;
+declare function TranscriptionTimestamp({ className, ...props }: TranscriptionTimestampProps): React.JSX.Element;
+declare function TranscriptionEmpty({ className, children, ...props }: TranscriptionEmptyProps): React.JSX.Element;
+export { Transcription, TranscriptionEmpty, TranscriptionSegment, TranscriptionSpeaker, TranscriptionText, TranscriptionTimestamp, };
+export type { TranscriptionEmptyProps, TranscriptionProps, TranscriptionSegmentProps, TranscriptionSpeakerProps, TranscriptionTextProps, TranscriptionTimestampProps, };