@ciridae/ui-agent 0.3.0

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

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { BrainIcon, ChevronDownIcon, DotIcon } from "lucide-react";
+import { createContext, memo, useCallback, useContext, useMemo, useState } from "react";
+import { Badge } from "@ciridae/ui/badge";
+import { cn } from "@ciridae/ui/utils";
+const RunTraceContext = createContext(null);
+const stepStatusClasses = {
+    active: "text-foreground",
+    complete: "text-muted-foreground",
+    pending: "text-muted-foreground/50",
+};
+function useRunTrace() {
+    const context = useContext(RunTraceContext);
+    if (!context)
+        throw new Error("RunTrace components must be used within RunTrace");
+    return context;
+}
+const RunTrace = memo(function RunTrace({ children, className, defaultOpen = false, onOpenChange, open, ...props }) {
+    const [internalOpen, setInternalOpen] = useState(defaultOpen);
+    const isControlled = open !== undefined;
+    const isOpen = open ?? internalOpen;
+    const setIsOpen = useCallback((nextOpen) => {
+        if (!isControlled)
+            setInternalOpen(nextOpen);
+        onOpenChange?.(nextOpen);
+    }, [isControlled, onOpenChange]);
+    const contextValue = useMemo(() => ({ isOpen, setIsOpen }), [isOpen, setIsOpen]);
+    return (_jsx(RunTraceContext.Provider, { value: contextValue, children: _jsx("div", { "data-slot": "run-trace", className: cn("grid w-full gap-3", className), ...props, children: children }) }));
+});
+const RunTraceHeader = memo(function RunTraceHeader({ children, className, onClick, type = "button", ...props }) {
+    const { isOpen, setIsOpen } = useRunTrace();
+    return (_jsxs("button", { "data-slot": "run-trace-header", "aria-expanded": isOpen, className: cn("flex w-full items-center gap-2 rounded-md text-left text-sm text-muted-foreground transition-colors hover:text-foreground focus-visible:ring-[var(--focus-ring-width)] focus-visible:ring-ring focus-visible:outline-none", className), ...props, onClick: (event) => {
+            onClick?.(event);
+            if (!event.defaultPrevented)
+                setIsOpen(!isOpen);
+        }, type: type, children: [_jsx(BrainIcon, { "aria-hidden": "true", className: "size-4 shrink-0" }), _jsx("span", { className: "min-w-0 flex-1 truncate", children: children ?? "Run trace" }), _jsx(ChevronDownIcon, { "aria-hidden": "true", className: cn("size-4 shrink-0 transition-transform", isOpen ? "rotate-180" : undefined) })] }));
+});
+const RunTraceContent = memo(function RunTraceContent({ children, className, ...props }) {
+    const { isOpen } = useRunTrace();
+    if (!isOpen)
+        return null;
+    return (_jsx("div", { "data-slot": "run-trace-content", className: cn("grid gap-3", className), ...props, children: children }));
+});
+const RunTraceStep = memo(function RunTraceStep({ children, className, description, icon: Icon = DotIcon, label, status = "complete", ...props }) {
+    return (_jsxs("div", { "data-slot": "run-trace-step", className: cn("flex gap-2 text-sm", stepStatusClasses[status], className), ...props, children: [_jsxs("div", { className: "relative mt-0.5", children: [_jsx(Icon, { "aria-hidden": "true", className: "size-4" }), _jsx("div", { className: "absolute top-7 bottom-0 left-1/2 -mx-px w-px bg-border" })] }), _jsxs("div", { className: "min-w-0 flex-1 space-y-2", children: [_jsx("div", { children: label }), description ? _jsx("div", { className: "text-xs text-muted-foreground", children: description }) : null, children] })] }));
+});
+function RunTraceSearchResults({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "run-trace-search-results", className: cn("flex flex-wrap items-center gap-2", className), ...props }));
+}
+function RunTraceSearchResult({ className, variant = "secondary", ...props }) {
+    return (_jsx(Badge, { "data-slot": "run-trace-search-result", className: cn("font-normal", className), variant: variant, ...props }));
+}
+function RunTraceImage({ caption, children, className, ...props }) {
+    return (_jsxs("div", { "data-slot": "run-trace-image", className: cn("grid gap-2", className), ...props, children: [_jsx("div", { className: "flex max-h-80 items-center justify-center overflow-hidden rounded-lg border bg-muted/40 p-3", children: children }), caption ? _jsx("p", { className: "text-xs text-muted-foreground", children: caption }) : null] }));
+}
+export { RunTrace, RunTraceContent, RunTraceHeader, RunTraceImage, RunTraceSearchResult, RunTraceSearchResults, RunTraceStep, };

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

@@ -0,0 +1,24 @@
+import type * as React from "react";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@ciridae/ui/collapsible";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@ciridae/ui/tabs";
+type SandboxProps = React.ComponentProps<typeof Collapsible>;
+type SandboxHeaderProps = React.ComponentProps<typeof CollapsibleTrigger> & {
+    description?: React.ReactNode;
+    title?: React.ReactNode;
+};
+type SandboxContentProps = React.ComponentProps<typeof CollapsibleContent>;
+type SandboxTabsProps = React.ComponentProps<typeof Tabs>;
+type SandboxTabsBarProps = React.ComponentProps<"div">;
+type SandboxTabsListProps = React.ComponentProps<typeof TabsList>;
+type SandboxTabsTriggerProps = React.ComponentProps<typeof TabsTrigger>;
+type SandboxTabContentProps = React.ComponentProps<typeof TabsContent>;
+declare function Sandbox({ className, defaultOpen, ...props }: SandboxProps): React.JSX.Element;
+declare function SandboxHeader({ children, className, description, title, ...props }: SandboxHeaderProps): React.JSX.Element;
+declare function SandboxContent({ className, ...props }: SandboxContentProps): React.JSX.Element;
+declare function SandboxTabs({ className, ...props }: SandboxTabsProps): React.JSX.Element;
+declare function SandboxTabsBar({ className, ...props }: SandboxTabsBarProps): React.JSX.Element;
+declare function SandboxTabsList(props: SandboxTabsListProps): React.JSX.Element;
+declare function SandboxTabsTrigger(props: SandboxTabsTriggerProps): React.JSX.Element;
+declare function SandboxTabContent({ className, ...props }: SandboxTabContentProps): React.JSX.Element;
+export { Sandbox, SandboxContent, SandboxHeader, SandboxTabContent, SandboxTabs, SandboxTabsBar, SandboxTabsList, SandboxTabsTrigger, };
+export type { SandboxContentProps, SandboxHeaderProps, SandboxProps, SandboxTabContentProps, SandboxTabsBarProps, SandboxTabsListProps, SandboxTabsProps, SandboxTabsTriggerProps, };

package/dist/components/agentic/sandbox.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronDownIcon } from "lucide-react";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@ciridae/ui/collapsible";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@ciridae/ui/tabs";
+import { cn } from "@ciridae/ui/utils";
+function Sandbox({ className, defaultOpen = true, ...props }) {
+    return (_jsx(Collapsible, { "data-slot": "sandbox", className: cn("w-full overflow-hidden rounded-lg border bg-card", className), defaultOpen: defaultOpen, ...props }));
+}
+function SandboxHeader({ children, className, description, title = "Sandbox", ...props }) {
+    return (_jsxs(CollapsibleTrigger, { "data-slot": "sandbox-header", className: cn("group flex w-full items-start justify-between gap-3 border-b px-4 py-3 text-left", className), ...props, children: [children ?? _jsx(SandboxHeaderText, { description: description, title: title }), _jsx(ChevronDownIcon, { "aria-hidden": "true", className: "size-4 shrink-0 transition-transform group-data-[state=open]:rotate-180" })] }));
+}
+function SandboxHeaderText({ description, title, }) {
+    return (_jsxs("div", { className: "min-w-0 space-y-1", children: [_jsx("div", { className: "truncate text-sm font-medium", children: title }), description ? _jsx("div", { className: "text-sm text-muted-foreground", children: description }) : null] }));
+}
+function SandboxContent({ className, ...props }) {
+    return (_jsx(CollapsibleContent, { "data-slot": "sandbox-content", className: cn("min-h-0", className), ...props }));
+}
+function SandboxTabs({ className, ...props }) {
+    return (_jsx(Tabs, { "data-slot": "sandbox-tabs", className: cn("flex min-h-0 flex-col", className), ...props }));
+}
+function SandboxTabsBar({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "sandbox-tabs-bar", className: cn("flex items-center justify-between gap-3 border-b p-2", className), ...props }));
+}
+function SandboxTabsList(props) {
+    return _jsx(TabsList, { "data-slot": "sandbox-tabs-list", ...props });
+}
+function SandboxTabsTrigger(props) {
+    return _jsx(TabsTrigger, { "data-slot": "sandbox-tabs-trigger", ...props });
+}
+function SandboxTabContent({ className, ...props }) {
+    return (_jsx(TabsContent, { "data-slot": "sandbox-tab-content", className: cn("m-0 min-h-0 p-4", className), ...props }));
+}
+export { Sandbox, SandboxContent, SandboxHeader, SandboxTabContent, SandboxTabs, SandboxTabsBar, SandboxTabsList, SandboxTabsTrigger, };

package/dist/components/agentic/schema-display.d.ts

@@ -0,0 +1,39 @@
+import type * as React from "react";
+import { Badge } from "@ciridae/ui/badge";
+import { Collapsible } from "@ciridae/ui/collapsible";
+type HttpMethod = "DELETE" | "GET" | "PATCH" | "POST" | "PUT";
+type SchemaDisplayProps = React.ComponentProps<"div"> & {
+    method?: HttpMethod;
+    path?: string;
+};
+type SchemaDisplayHeaderProps = React.ComponentProps<"div">;
+type SchemaDisplayMethodProps = React.ComponentProps<typeof Badge>;
+type SchemaDisplayPathProps = React.ComponentProps<"span">;
+type SchemaDisplayDescriptionProps = React.ComponentProps<"p">;
+type SchemaDisplayContentProps = React.ComponentProps<"div">;
+type SchemaDisplayBodyProps = React.ComponentProps<"div">;
+type SchemaDisplayParameterProps = React.ComponentProps<"div"> & {
+    name: string;
+    required?: boolean;
+    type?: string;
+};
+type SchemaDisplayParametersProps = React.ComponentProps<typeof Collapsible>;
+type SchemaDisplayPropertyProps = SchemaDisplayParameterProps;
+type SchemaDisplayRequestProps = React.ComponentProps<typeof Collapsible>;
+type SchemaDisplayResponseProps = React.ComponentProps<typeof Collapsible>;
+type SchemaDisplayExampleProps = React.ComponentProps<"pre">;
+declare function SchemaDisplay({ children, className, method, path, ...props }: SchemaDisplayProps): React.JSX.Element;
+declare function SchemaDisplayHeader({ className, ...props }: SchemaDisplayHeaderProps): React.JSX.Element;
+declare function SchemaDisplayMethod({ children, variant, ...props }: SchemaDisplayMethodProps): React.JSX.Element;
+declare function SchemaDisplayPath({ className, ...props }: SchemaDisplayPathProps): React.JSX.Element;
+declare function SchemaDisplayDescription({ className, ...props }: SchemaDisplayDescriptionProps): React.JSX.Element;
+declare function SchemaDisplayContent({ className, ...props }: SchemaDisplayContentProps): React.JSX.Element;
+declare function SchemaDisplayBody({ className, ...props }: SchemaDisplayBodyProps): React.JSX.Element;
+declare function SchemaDisplayParameter({ className, name, required, type, ...props }: SchemaDisplayParameterProps): React.JSX.Element;
+declare function SchemaDisplayParameters(props: SchemaDisplayParametersProps): React.JSX.Element;
+declare function SchemaDisplayProperty(props: SchemaDisplayPropertyProps): React.JSX.Element;
+declare function SchemaDisplayRequest(props: SchemaDisplayRequestProps): React.JSX.Element;
+declare function SchemaDisplayResponse(props: SchemaDisplayResponseProps): React.JSX.Element;
+declare function SchemaDisplayExample({ className, ...props }: SchemaDisplayExampleProps): React.JSX.Element;
+export { SchemaDisplay, SchemaDisplayBody, SchemaDisplayContent, SchemaDisplayDescription, SchemaDisplayExample, SchemaDisplayHeader, SchemaDisplayMethod, SchemaDisplayParameter, SchemaDisplayParameters, SchemaDisplayPath, SchemaDisplayProperty, SchemaDisplayRequest, SchemaDisplayResponse, };
+export type { HttpMethod, SchemaDisplayBodyProps, SchemaDisplayContentProps, SchemaDisplayDescriptionProps, SchemaDisplayExampleProps, SchemaDisplayHeaderProps, SchemaDisplayMethodProps, SchemaDisplayParameterProps, SchemaDisplayParametersProps, SchemaDisplayPathProps, SchemaDisplayPropertyProps, SchemaDisplayProps, SchemaDisplayRequestProps, SchemaDisplayResponseProps, };

package/dist/components/agentic/schema-display.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronDownIcon } from "lucide-react";
+import { createContext, useContext, useMemo } from "react";
+import { Badge } from "@ciridae/ui/badge";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@ciridae/ui/collapsible";
+import { cn } from "@ciridae/ui/utils";
+const SchemaDisplayContext = createContext({});
+function useSchemaDisplay() {
+    return useContext(SchemaDisplayContext);
+}
+function SchemaDisplay({ children, className, method, path, ...props }) {
+    const contextValue = useMemo(() => ({ method, path }), [method, path]);
+    return (_jsx(SchemaDisplayContext.Provider, { value: contextValue, children: _jsx("div", { "data-slot": "schema-display", className: cn("grid gap-3 rounded-lg border bg-card p-4", className), ...props, children: children }) }));
+}
+function SchemaDisplayHeader({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "schema-display-header", className: cn("flex min-w-0 flex-wrap items-center gap-2", className), ...props }));
+}
+function SchemaDisplayMethod({ children, variant = "outline", ...props }) {
+    const { method } = useSchemaDisplay();
+    return (_jsx(Badge, { "data-slot": "schema-display-method", variant: variant, ...props, children: children ?? method }));
+}
+function SchemaDisplayPath({ className, ...props }) {
+    const { path } = useSchemaDisplay();
+    return (_jsx("span", { "data-slot": "schema-display-path", className: cn("min-w-0 truncate font-mono text-sm", className), ...props, children: props.children ?? path }));
+}
+function SchemaDisplayDescription({ className, ...props }) {
+    return (_jsx("p", { "data-slot": "schema-display-description", className: cn("text-sm text-muted-foreground", className), ...props }));
+}
+function SchemaDisplayContent({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "schema-display-content", className: cn("grid gap-3", className), ...props }));
+}
+function SchemaDisplayBody({ className, ...props }) {
+    return _jsx("div", { "data-slot": "schema-display-body", className: cn("grid gap-2", className), ...props });
+}
+function SchemaDisplayParameter({ className, name, required, type = "string", ...props }) {
+    return (_jsxs("div", { "data-slot": "schema-display-parameter", className: cn("grid gap-1 rounded-md border bg-muted/30 p-2", className), ...props, children: [_jsxs("div", { className: "flex min-w-0 items-center justify-between gap-3", children: [_jsx("span", { className: "truncate font-mono text-xs", children: name }), _jsx("span", { className: "shrink-0 font-mono text-xs text-muted-foreground", children: type })] }), required ? _jsx("div", { className: "text-meta text-muted-foreground", children: "required" }) : null] }));
+}
+function SchemaDisplayParameters(props) {
+    return _jsx(SchemaSection, { dataSlot: "schema-display-parameters", label: "Parameters", ...props });
+}
+function SchemaDisplayProperty(props) {
+    return _jsx(SchemaDisplayParameter, { "data-slot": "schema-display-property", ...props });
+}
+function SchemaDisplayRequest(props) {
+    return _jsx(SchemaSection, { dataSlot: "schema-display-request", label: "Request", ...props });
+}
+function SchemaDisplayResponse(props) {
+    return _jsx(SchemaSection, { dataSlot: "schema-display-response", label: "Response", ...props });
+}
+function SchemaDisplayExample({ className, ...props }) {
+    return (_jsx("pre", { "data-slot": "schema-display-example", className: cn("overflow-auto rounded-md bg-muted/50 p-3 font-mono text-xs", className), ...props }));
+}
+function SchemaSection({ children, className, dataSlot, defaultOpen = true, label, ...props }) {
+    return (_jsxs(Collapsible, { "data-slot": dataSlot, className: cn("rounded-md border", className), defaultOpen: defaultOpen, ...props, children: [_jsxs(CollapsibleTrigger, { className: "group flex w-full items-center justify-between px-3 py-2 text-sm font-medium", children: [_jsx("span", { children: label }), _jsx(ChevronDownIcon, { "aria-hidden": "true", className: "size-4 transition-transform group-data-[state=open]:rotate-180" })] }), _jsx(CollapsibleContent, { className: "grid gap-2 border-t p-3", children: children })] }));
+}
+export { SchemaDisplay, SchemaDisplayBody, SchemaDisplayContent, SchemaDisplayDescription, SchemaDisplayExample, SchemaDisplayHeader, SchemaDisplayMethod, SchemaDisplayParameter, SchemaDisplayParameters, SchemaDisplayPath, SchemaDisplayProperty, SchemaDisplayRequest, SchemaDisplayResponse, };

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

@@ -0,0 +1,11 @@
+import type { ElementType, HTMLAttributes } from "react";
+type ShimmerProps = HTMLAttributes<HTMLElement> & {
+    as?: ElementType;
+    children: string;
+    duration?: number;
+    spread?: number;
+};
+declare function ShimmerComponent({ as: Component, children, className, duration, spread, style, ...props }: ShimmerProps): import("react").JSX.Element;
+declare const Shimmer: import("react").MemoExoticComponent<typeof ShimmerComponent>;
+export { Shimmer };
+export type { ShimmerProps };

package/dist/components/agentic/shimmer.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo, useMemo } from "react";
+import { cn } from "@ciridae/ui/utils";
+function ShimmerComponent({ as: Component = "p", children, className, duration = 2, spread = 2, style, ...props }) {
+    const dynamicSpread = useMemo(() => (children?.length ?? 0) * spread, [children, spread]);
+    const trackWidth = useMemo(() => Math.max((children?.length ?? 0) * 0.62, 12), [children]);
+    const shimmerStyle = {
+        "--agentic-shimmer-duration": `${duration}s`,
+        "--agentic-shimmer-spread": `${Math.max(dynamicSpread, 80)}px`,
+        "--agentic-shimmer-track-width": `${trackWidth}ch`,
+        ...style,
+    };
+    return (_jsx(Component, { "data-slot": "shimmer", className: cn("agentic-shimmer relative inline-block text-muted-foreground", className), style: shimmerStyle, ...props, children: children }));
+}
+const Shimmer = memo(ShimmerComponent);
+export { Shimmer };

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

@@ -0,0 +1,18 @@
+import type * as React from "react";
+import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText } from "@ciridae/ui/input-group";
+type SnippetProps = React.ComponentProps<typeof InputGroup> & {
+    value: string;
+};
+type SnippetAddonProps = React.ComponentProps<typeof InputGroupAddon>;
+type SnippetTextProps = React.ComponentProps<typeof InputGroupText>;
+type SnippetInputProps = Omit<React.ComponentProps<typeof InputGroupInput>, "value"> & {
+    value?: string;
+};
+type SnippetCopyButtonProps = React.ComponentProps<typeof InputGroupButton>;
+declare function Snippet({ children, className, value, ...props }: SnippetProps): React.JSX.Element;
+declare function SnippetAddon(props: SnippetAddonProps): React.JSX.Element;
+declare function SnippetText({ className, ...props }: SnippetTextProps): React.JSX.Element;
+declare function SnippetInput({ className, value, ...props }: SnippetInputProps): React.JSX.Element;
+declare function SnippetCopyButton({ children, ...props }: SnippetCopyButtonProps): React.JSX.Element;
+export { Snippet, SnippetAddon, SnippetCopyButton, SnippetInput, SnippetText };
+export type { SnippetAddonProps, SnippetCopyButtonProps, SnippetInputProps, SnippetProps, SnippetTextProps, };

package/dist/components/agentic/snippet.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { CheckIcon, CopyIcon } from "lucide-react";
+import { createContext, useContext, useMemo, useState } from "react";
+import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, } from "@ciridae/ui/input-group";
+import { cn } from "@ciridae/ui/utils";
+import { copyToClipboard } from "./clipboard";
+const SnippetContext = createContext({ value: "" });
+function useSnippet() {
+    return useContext(SnippetContext);
+}
+function Snippet({ children, className, value, ...props }) {
+    const contextValue = useMemo(() => ({ value }), [value]);
+    return (_jsx(SnippetContext.Provider, { value: contextValue, children: _jsx(InputGroup, { "data-slot": "snippet", className: cn("font-mono", className), ...props, children: children ?? (_jsxs(_Fragment, { children: [_jsx(SnippetInput, { readOnly: true }), _jsx(SnippetCopyButton, {})] })) }) }));
+}
+function SnippetAddon(props) {
+    return _jsx(InputGroupAddon, { "data-slot": "snippet-addon", ...props });
+}
+function SnippetText({ className, ...props }) {
+    return (_jsx(InputGroupText, { "data-slot": "snippet-text", className: cn("font-mono", className), ...props }));
+}
+function SnippetInput({ className, value, ...props }) {
+    const context = useSnippet();
+    return (_jsx(InputGroupInput, { "data-slot": "snippet-input", className: cn("font-mono", className), value: value ?? context.value, ...props }));
+}
+function SnippetCopyButton({ children, ...props }) {
+    const { value } = useSnippet();
+    const [copied, setCopied] = useState(false);
+    const Icon = copied ? CheckIcon : CopyIcon;
+    return (_jsx(InputGroupButton, { "aria-label": copied ? "Copied" : "Copy snippet", type: "button", ...props, onClick: (event) => {
+            props.onClick?.(event);
+            if (!event.defaultPrevented)
+                void copyToClipboard(value, setCopied);
+        }, children: children ?? _jsx(Icon, { "aria-hidden": "true", className: "size-4" }) }));
+}
+export { Snippet, SnippetAddon, SnippetCopyButton, SnippetInput, SnippetText };

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

@@ -0,0 +1,16 @@
+import type * as React from "react";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@ciridae/ui/collapsible";
+type SourcesProps = React.ComponentProps<typeof Collapsible>;
+type SourcesTriggerProps = React.ComponentProps<typeof CollapsibleTrigger> & {
+    count: number;
+};
+type SourcesContentProps = React.ComponentProps<typeof CollapsibleContent>;
+type SourceProps = React.ComponentProps<"a"> & {
+    title?: string;
+};
+declare function Sources({ ...props }: SourcesProps): React.JSX.Element;
+declare function SourcesTrigger({ children, className, count, ...props }: SourcesTriggerProps): React.JSX.Element;
+declare function SourcesContent({ className, ...props }: SourcesContentProps): React.JSX.Element;
+declare function Source({ children, className, href, title, ...props }: SourceProps): React.JSX.Element;
+export { Source, Sources, SourcesContent, SourcesTrigger };
+export type { SourceProps, SourcesContentProps, SourcesProps, SourcesTriggerProps };

package/dist/components/agentic/sources.js

@@ -0,0 +1,130 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { BookOpenIcon, ChevronDownIcon, ExternalLinkIcon } from "lucide-react";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@ciridae/ui/collapsible";
+import { cn } from "@ciridae/ui/utils";
+import { css } from "@ciridae/ui/styled-system/css";
+const sourcesTriggerClassName = css({
+    alignItems: "center",
+    backgroundColor: "card",
+    borderColor: "border",
+    borderRadius: "md",
+    borderStyle: "solid",
+    borderWidth: "default",
+    color: "card.foreground",
+    display: "flex",
+    fontSize: "sm",
+    gap: "gap.3",
+    justifyContent: "space-between",
+    paddingBlock: "spacing.2",
+    paddingInline: "spacing.3",
+    transitionProperty: "color, background-color",
+    width: "full",
+    "&:hover": {
+        backgroundColor: "accent",
+        color: "accent.foreground",
+    },
+    "&:focus-visible": {
+        boxShadow: "focus",
+        outline: "none",
+    },
+});
+const sourcesTriggerLabelClassName = css({
+    alignItems: "center",
+    display: "flex",
+    gap: "gap.2",
+    minWidth: 0,
+});
+const sourcesIconClassName = css({
+    color: "muted.foreground",
+    flexShrink: 0,
+    height: "icon.sm",
+    width: "icon.sm",
+});
+const sourcesTriggerTextClassName = css({
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+});
+const sourcesChevronClassName = css({
+    color: "muted.foreground",
+    flexShrink: 0,
+    height: "icon.sm",
+    transitionProperty: "transform",
+    width: "icon.sm",
+    ".group[data-state='open'] &": {
+        transform: "rotate(180deg)",
+    },
+});
+const sourcesContentClassName = css({
+    display: "grid",
+    gap: "gap.2",
+    marginTop: "spacing.2",
+    overflow: "hidden",
+    "&[data-state='closed']": {
+        animationName: "fade-out",
+    },
+});
+const sourceClassName = css({
+    alignItems: "center",
+    backgroundColor: "background",
+    borderColor: "border",
+    borderRadius: "md",
+    borderStyle: "solid",
+    borderWidth: "default",
+    color: "foreground",
+    display: "flex",
+    fontSize: "sm",
+    gap: "gap.2",
+    minWidth: 0,
+    paddingBlock: "spacing.2",
+    paddingInline: "spacing.3",
+    transitionProperty: "color, background-color",
+    "&:hover": {
+        backgroundColor: "accent",
+        color: "accent.foreground",
+    },
+    "&:focus-visible": {
+        boxShadow: "focus",
+        outline: "none",
+    },
+});
+const sourceTextClassName = css({
+    flex: 1,
+    minWidth: 0,
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+});
+const sourceExternalIconClassName = css({
+    color: "muted.foreground",
+    flexShrink: 0,
+    height: "0.875rem",
+    width: "0.875rem",
+});
+function Sources({ ...props }) {
+    return _jsx(Collapsible, { "data-slot": "sources", ...props });
+}
+function SourcesTrigger({ children, className, count, ...props }) {
+    return (_jsxs(CollapsibleTrigger, { "data-slot": "sources-trigger", className: cn("group", sourcesTriggerClassName, className), ...props, children: [_jsxs("span", { className: sourcesTriggerLabelClassName, children: [_jsx(BookOpenIcon, { "aria-hidden": "true", className: sourcesIconClassName }), _jsx("span", { className: sourcesTriggerTextClassName, children: children ?? `${count} sources` })] }), _jsx(ChevronDownIcon, { "aria-hidden": "true", className: sourcesChevronClassName })] }));
+}
+function SourcesContent({ className, ...props }) {
+    return (_jsx(CollapsibleContent, { "data-slot": "sources-content", className: cn(sourcesContentClassName, className), ...props }));
+}
+function Source({ children, className, href, title, ...props }) {
+    const safeHref = getSafeExternalHref(href);
+    return (_jsxs("a", { "data-slot": "source", href: safeHref, target: safeHref ? "_blank" : undefined, rel: safeHref ? "noopener noreferrer" : undefined, className: cn(sourceClassName, className), ...props, children: [_jsx("span", { className: sourceTextClassName, children: children ?? title ?? safeHref ?? href }), safeHref ? (_jsx(ExternalLinkIcon, { "aria-hidden": "true", className: sourceExternalIconClassName })) : null] }));
+}
+function getSafeExternalHref(href) {
+    if (!href)
+        return undefined;
+    try {
+        const url = new URL(href, window.location.origin);
+        if (url.protocol !== "http:" && url.protocol !== "https:")
+            return undefined;
+        return url.toString();
+    }
+    catch {
+        return undefined;
+    }
+}
+export { Source, Sources, SourcesContent, SourcesTrigger };

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

@@ -0,0 +1,24 @@
+import type * as React from "react";
+import { Button } from "@ciridae/ui/button";
+type TerminalProps = React.ComponentProps<"div"> & {
+    output?: string;
+};
+type TerminalHeaderProps = React.ComponentProps<"div">;
+type TerminalTitleProps = React.ComponentProps<"div">;
+type TerminalStatusProps = React.ComponentProps<"div"> & {
+    status?: "idle" | "running" | "success" | "error";
+};
+type TerminalActionsProps = React.ComponentProps<"div">;
+type TerminalCopyButtonProps = React.ComponentProps<typeof Button>;
+type TerminalClearButtonProps = React.ComponentProps<typeof Button>;
+type TerminalContentProps = React.ComponentProps<"pre">;
+declare function Terminal({ children, className, output, ...props }: TerminalProps): React.JSX.Element;
+declare function TerminalHeader({ className, ...props }: TerminalHeaderProps): React.JSX.Element;
+declare function TerminalTitle({ className, ...props }: TerminalTitleProps): React.JSX.Element;
+declare function TerminalStatus({ className, status, ...props }: TerminalStatusProps): React.JSX.Element;
+declare function TerminalActions({ className, ...props }: TerminalActionsProps): React.JSX.Element;
+declare function TerminalCopyButton({ children, ...props }: TerminalCopyButtonProps): React.JSX.Element;
+declare function TerminalClearButton({ children, ...props }: TerminalClearButtonProps): React.JSX.Element;
+declare function TerminalContent({ children, className, ...props }: TerminalContentProps): React.JSX.Element;
+export { Terminal, TerminalActions, TerminalClearButton, TerminalContent, TerminalCopyButton, TerminalHeader, TerminalStatus, TerminalTitle, };
+export type { TerminalActionsProps, TerminalClearButtonProps, TerminalContentProps, TerminalCopyButtonProps, TerminalHeaderProps, TerminalProps, TerminalStatusProps, TerminalTitleProps, };

package/dist/components/agentic/terminal.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CheckIcon, CopyIcon, SquareIcon, XIcon } from "lucide-react";
+import { createContext, useContext, useMemo, useState } from "react";
+import { Button } from "@ciridae/ui/button";
+import { cn } from "@ciridae/ui/utils";
+import { copyToClipboard } from "./clipboard";
+const TerminalContext = createContext({ output: "" });
+const statusLabel = { error: "error", idle: "idle", running: "running", success: "success" };
+const statusClass = {
+    error: "text-destructive",
+    idle: "text-muted-foreground",
+    running: "text-foreground",
+    success: "text-foreground",
+};
+function Terminal({ children, className, output = "", ...props }) {
+    const contextValue = useMemo(() => ({ output }), [output]);
+    return (_jsx(TerminalContext.Provider, { value: contextValue, children: _jsx("div", { "data-slot": "terminal", className: cn("w-full overflow-hidden rounded-lg border bg-card text-card-foreground", className), ...props, children: children ?? _jsx(TerminalContent, { children: output }) }) }));
+}
+function TerminalHeader({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "terminal-header", className: cn("flex min-w-0 items-center justify-between gap-3 border-b px-3 py-2", className), ...props }));
+}
+function TerminalTitle({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "terminal-title", className: cn("truncate text-sm font-medium", className), ...props }));
+}
+function TerminalStatus({ className, status = "idle", ...props }) {
+    return (_jsxs("div", { "data-slot": "terminal-status", className: cn("flex items-center gap-1 text-xs", statusClass[status], className), ...props, children: [_jsx(SquareIcon, { "aria-hidden": "true", className: "size-2 fill-current" }), _jsx("span", { children: statusLabel[status] })] }));
+}
+function TerminalActions({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "terminal-actions", className: cn("flex shrink-0 items-center gap-1", className), ...props }));
+}
+function TerminalCopyButton({ children, ...props }) {
+    const { output } = useContext(TerminalContext);
+    const [copied, setCopied] = useState(false);
+    const Icon = copied ? CheckIcon : CopyIcon;
+    return (_jsx(Button, { "aria-label": copied ? "Copied" : "Copy terminal output", size: "icon", type: "button", variant: "ghost", ...props, onClick: (event) => {
+            props.onClick?.(event);
+            if (!event.defaultPrevented)
+                void copyToClipboard(output, setCopied);
+        }, children: children ?? _jsx(Icon, { "aria-hidden": "true", className: "size-4" }) }));
+}
+function TerminalClearButton({ children, ...props }) {
+    return (_jsx(Button, { "aria-label": "Clear terminal", size: "icon", type: "button", variant: "ghost", ...props, children: children ?? _jsx(XIcon, { "aria-hidden": "true", className: "size-4" }) }));
+}
+function TerminalContent({ children, className, ...props }) {
+    return (_jsx("pre", { "data-slot": "terminal-content", className: cn("max-h-96 overflow-auto bg-muted/30 p-4 font-mono text-sm leading-6", className), ...props, children: children }));
+}
+export { Terminal, TerminalActions, TerminalClearButton, TerminalContent, TerminalCopyButton, TerminalHeader, TerminalStatus, TerminalTitle, };

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

@@ -0,0 +1,25 @@
+import type * as React from "react";
+import type { AgenticToolState } from "@ciridae/ui-agent/types";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@ciridae/ui/collapsible";
+type ToolProps = React.ComponentProps<typeof Collapsible>;
+type ToolHeaderProps = Omit<React.ComponentProps<typeof CollapsibleTrigger>, "type"> & {
+    state: AgenticToolState;
+    title?: string;
+    toolName?: string;
+    type?: string;
+};
+type ToolContentProps = React.ComponentProps<typeof CollapsibleContent>;
+type ToolInputProps = React.ComponentProps<"div"> & {
+    input?: unknown;
+};
+type ToolOutputProps = React.ComponentProps<"div"> & {
+    errorText?: string;
+    output?: React.ReactNode | unknown;
+};
+declare function Tool({ className, ...props }: ToolProps): React.JSX.Element;
+declare function ToolHeader({ className, state, title, toolName, type, ...props }: ToolHeaderProps): React.JSX.Element;
+declare function ToolContent({ className, ...props }: ToolContentProps): React.JSX.Element;
+declare function ToolInput({ className, input, ...props }: ToolInputProps): React.JSX.Element | null;
+declare function ToolOutput({ className, errorText, output, ...props }: ToolOutputProps): React.JSX.Element | null;
+export { Tool, ToolContent, ToolHeader, ToolInput, ToolOutput };
+export type { ToolContentProps, ToolHeaderProps, ToolInputProps, ToolOutputProps, ToolProps };

package/dist/components/agentic/tool.js

@@ -0,0 +1,73 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CheckCircleIcon, ChevronDownIcon, CircleIcon, ClockIcon, WrenchIcon, XCircleIcon, } from "lucide-react";
+import { isValidElement } from "react";
+import { Badge } from "@ciridae/ui/badge";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@ciridae/ui/collapsible";
+import { cn } from "@ciridae/ui/utils";
+const statusLabels = {
+    "approval-requested": "Awaiting approval",
+    "approval-responded": "Responded",
+    "input-available": "Running",
+    "input-streaming": "Pending",
+    "output-available": "Completed",
+    "output-denied": "Denied",
+    "output-error": "Error",
+};
+const statusVariants = {
+    "approval-requested": "warning",
+    "approval-responded": "info",
+    "input-available": "secondary",
+    "input-streaming": "outline",
+    "output-available": "success",
+    "output-denied": "warning",
+    "output-error": "destructive",
+};
+function Tool({ className, ...props }) {
+    return (_jsx(Collapsible, { "data-slot": "tool", className: cn("group rounded-lg border bg-card text-card-foreground", className), ...props }));
+}
+function ToolHeader({ className, state, title, toolName, type, ...props }) {
+    const derivedName = title ?? toolName ?? type?.replace(/^tool-/, "") ?? "Tool call";
+    return (_jsxs(CollapsibleTrigger, { "data-slot": "tool-header", className: cn("flex w-full items-center justify-between gap-3 px-3 py-2 text-sm transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:ring-[var(--focus-ring-width)] focus-visible:ring-ring focus-visible:outline-none", className), ...props, children: [_jsxs("span", { className: "flex min-w-0 items-center gap-2", children: [_jsx(WrenchIcon, { "aria-hidden": "true", className: "size-4 shrink-0 text-muted-foreground" }), _jsx("span", { className: "min-w-0 truncate font-medium", children: derivedName }), _jsx(ToolStatusBadge, { state: state })] }), _jsx(ChevronDownIcon, { "aria-hidden": "true", className: "size-4 shrink-0 text-muted-foreground transition-transform group-data-[state=open]:rotate-180" })] }));
+}
+function ToolStatusBadge({ state }) {
+    return (_jsxs(Badge, { className: "gap-1 rounded-full", variant: statusVariants[state], children: [_jsx(ToolStatusIcon, { state: state }), statusLabels[state]] }));
+}
+function ToolStatusIcon({ state }) {
+    if (state === "output-available" || state === "approval-responded")
+        return _jsx(CheckCircleIcon, {});
+    if (state === "output-denied" || state === "output-error")
+        return _jsx(XCircleIcon, {});
+    if (state === "approval-requested" || state === "input-available")
+        return _jsx(ClockIcon, {});
+    return _jsx(CircleIcon, {});
+}
+function ToolContent({ className, ...props }) {
+    return (_jsx(CollapsibleContent, { "data-slot": "tool-content", className: cn("grid gap-3 border-t px-3 py-3 text-sm", className), ...props }));
+}
+function ToolInput({ className, input, ...props }) {
+    if (input === undefined)
+        return null;
+    return (_jsxs("div", { "data-slot": "tool-input", className: cn("grid gap-2", className), ...props, children: [_jsx("h4", { className: "text-meta text-muted-foreground", children: "Parameters" }), _jsx(ToolCode, { value: input })] }));
+}
+function ToolOutput({ className, errorText, output, ...props }) {
+    if (output === undefined && !errorText)
+        return null;
+    return (_jsxs("div", { "data-slot": "tool-output", className: cn("grid gap-2", className), ...props, children: [_jsx("h4", { className: "text-meta text-muted-foreground", children: errorText ? "Error" : "Result" }), errorText ? (_jsx("div", { className: "rounded-md border border-destructive/25 bg-destructive/10 px-3 py-2 text-sm text-destructive", children: errorText })) : (_jsx(ToolCode, { value: output }))] }));
+}
+function ToolCode({ value }) {
+    if (isValidElement(value))
+        return value;
+    const code = serializeToolValue(value);
+    return (_jsx("pre", { className: "max-h-64 overflow-auto rounded-md border bg-muted/40 p-3 font-mono text-xs text-foreground", children: _jsx("code", { children: code }) }));
+}
+function serializeToolValue(value) {
+    if (typeof value === "string")
+        return value;
+    try {
+        return JSON.stringify(value, null, 2);
+    }
+    catch {
+        return String(value);
+    }
+}
+export { Tool, ToolContent, ToolHeader, ToolInput, ToolOutput };