harebear-ui 0.2.3 → 0.3.0

package/dist/components/ai/tool-steps.d.ts

@@ -0,0 +1,41 @@
+import * as React from "react";
+/** Lifecycle of an agent tool call. "waiting" means waiting for the user (an approval). */
+export type ToolStatus = "queued" | "waiting" | "running" | "done" | "error" | "stopped";
+/** Spinner while running, otherwise a status dot in the matching tone. */
+declare function ToolStatusIcon({ status, className }: {
+  status: ToolStatus;
+  className?: string;
+}): React.JSX.Element;
+export interface ToolGroupProps extends Omit<React.ComponentProps<"div">, "title"> {
+  /** Summary, e.g. "Ran 3 commands on services". */
+  title: React.ReactNode;
+  /** Overall status of the steps inside. */
+  status: ToolStatus;
+  /** Small trailing text, e.g. the start time. */
+  meta?: React.ReactNode;
+  /** Open while true, until the user toggles it. Default: open while the group is queued, running or waiting. */
+  autoOpen?: boolean;
+  /** Controlled open state. */
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+}
+/** Bordered, collapsible card that groups an agent's consecutive tool calls. Put ToolStep children inside. */
+declare function ToolGroup({ title, status, meta, autoOpen, open: openProp, onOpenChange, className, children, ...props }: ToolGroupProps): React.JSX.Element;
+export interface ToolStepProps extends Omit<React.ComponentProps<"div">, "title"> {
+  /** Tool icon, e.g. <TerminalIcon />. */
+  icon?: React.ReactNode;
+  /** Short verb column, e.g. "Run", "Read", "Edit". */
+  kind: React.ReactNode;
+  /** What it acted on, shown monospace: the command or path. */
+  detail: string;
+  status: ToolStatus;
+  /** Trailing text. Default derived from status ("running", "failed"…). */
+  meta?: React.ReactNode;
+  /** Shown when expanded, monospace: usually the command followed by its output. Omit for a row that cannot expand. */
+  output?: React.ReactNode;
+  /** Open while true, until the user toggles it. Default: open while running. */
+  autoOpen?: boolean;
+}
+/** One tool call inside a ToolGroup: icon, verb, monospace detail, status text, expandable output. */
+declare function ToolStep({ icon, kind, detail, status, meta, output, autoOpen, className, ...props }: ToolStepProps): React.JSX.Element;
+export { ToolGroup, ToolStatusIcon, ToolStep };

package/dist/components/ai/tool-steps.js

@@ -0,0 +1,124 @@
+"use client";
+import { StatusDot } from "../admin/status.js";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../ui/collapsible.js";
+import { Spinner } from "../ui/spinner.js";
+import { cn } from "../../lib/utils.js";
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { ChevronRightIcon } from "lucide-react";
+// src/components/ai/tool-steps.tsx
+const toolTone = {
+	queued: "neutral",
+	waiting: "warning",
+	running: "info",
+	done: "success",
+	error: "danger",
+	stopped: "neutral"
+};
+/** Spinner while running, otherwise a status dot in the matching tone. */
+function ToolStatusIcon({ status, className }) {
+	return status === "running" ? /* @__PURE__ */ jsx(Spinner, {
+		"data-slot": "tool-status-icon",
+		className: cn("size-3.5 text-primary", className)
+	}) : /* @__PURE__ */ jsx(StatusDot, {
+		"data-slot": "tool-status-icon",
+		tone: toolTone[status],
+		className
+	});
+}
+/** Open state that follows `auto` until the user toggles it, then sticks with the user's choice. */
+function useAutoOpen(auto, open, onOpenChange) {
+	const [chosen, setChosen] = React.useState(null);
+	const value = open ?? chosen ?? auto;
+	const set = (next) => {
+		setChosen(next);
+		onOpenChange?.(next);
+	};
+	return [value, set];
+}
+const isActive = (s) => s === "running" || s === "waiting" || s === "queued";
+/** Bordered, collapsible card that groups an agent's consecutive tool calls. Put ToolStep children inside. */
+function ToolGroup({ title, status, meta, autoOpen, open: openProp, onOpenChange, className, children, ...props }) {
+	const [open, setOpen] = useAutoOpen(autoOpen ?? isActive(status), openProp, onOpenChange);
+	return /* @__PURE__ */ jsxs(Collapsible, {
+		"data-slot": "tool-group",
+		"data-status": status,
+		open,
+		onOpenChange: setOpen,
+		className: cn("min-w-0 rounded-lg border border-border bg-card", className),
+		...props,
+		children: [/* @__PURE__ */ jsxs(CollapsibleTrigger, {
+			className: "flex w-full min-w-0 items-center gap-2.5 rounded-lg px-4 py-2.75 text-left outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring/40",
+			children: [
+				/* @__PURE__ */ jsx(ChevronRightIcon, { className: cn("size-4 shrink-0 text-muted-foreground transition-transform", open && "rotate-90") }),
+				/* @__PURE__ */ jsx("span", {
+					className: "min-w-0 flex-1 truncate font-medium",
+					children: title
+				}),
+				meta !== void 0 && /* @__PURE__ */ jsx("span", {
+					className: "shrink-0 text-xs text-muted-foreground tabular-nums",
+					children: meta
+				}),
+				/* @__PURE__ */ jsx(ToolStatusIcon, { status })
+			]
+		}), /* @__PURE__ */ jsx(CollapsibleContent, {
+			className: "flex flex-col gap-0.5 px-2 pb-2",
+			children
+		})]
+	});
+}
+const statusText = {
+	queued: "queued",
+	waiting: "waiting for you",
+	running: "running",
+	done: "done",
+	error: "failed",
+	stopped: "stopped"
+};
+/** One tool call inside a ToolGroup: icon, verb, monospace detail, status text, expandable output. */
+function ToolStep({ icon, kind, detail, status, meta, output, autoOpen, className, ...props }) {
+	const [open, setOpen] = useAutoOpen(autoOpen ?? status === "running");
+	const expandable = output !== void 0 && output !== null && output !== "";
+	const row = /* @__PURE__ */ jsxs(Fragment, { children: [
+		icon && /* @__PURE__ */ jsx("span", {
+			className: "grid size-6.5 shrink-0 place-items-center rounded-lg bg-muted text-muted-foreground [&_svg]:size-3.5",
+			children: icon
+		}),
+		/* @__PURE__ */ jsx("span", {
+			className: "w-18 shrink-0 truncate text-[13px] text-muted-foreground",
+			children: kind
+		}),
+		/* @__PURE__ */ jsx("span", {
+			className: "min-w-0 flex-1 truncate font-mono text-[12.5px]",
+			children: detail
+		}),
+		/* @__PURE__ */ jsx("span", {
+			className: cn("shrink-0 text-xs whitespace-nowrap text-muted-foreground tabular-nums", status === "error" && "text-destructive", status === "waiting" && "text-warning"),
+			children: meta ?? statusText[status]
+		})
+	] });
+	const rowClass = "flex w-full min-w-0 items-center gap-2.5 rounded-md px-2.5 py-1.75 text-left";
+	if (!expandable) return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "tool-step",
+		"data-status": status,
+		className: cn(rowClass, className),
+		...props,
+		children: [row, /* @__PURE__ */ jsx("span", { className: "size-4 shrink-0" })]
+	});
+	return /* @__PURE__ */ jsxs(Collapsible, {
+		"data-slot": "tool-step",
+		"data-status": status,
+		open,
+		onOpenChange: setOpen,
+		className,
+		...props,
+		children: [/* @__PURE__ */ jsxs(CollapsibleTrigger, {
+			className: cn(rowClass, "outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring/40"),
+			children: [row, /* @__PURE__ */ jsx(ChevronRightIcon, { className: cn("size-4 shrink-0 text-muted-foreground transition-transform", open && "rotate-90") })]
+		}), /* @__PURE__ */ jsx(CollapsibleContent, { children: /* @__PURE__ */ jsx("pre", {
+			className: cn("mt-0.5 mr-2.5 mb-2 max-h-80 overflow-auto rounded-md bg-muted px-3.5 py-3 font-mono text-[12.5px] leading-[1.7] whitespace-pre-wrap break-all", icon ? "ml-11.5" : "ml-2.5"),
+			children: output
+		}) })]
+	});
+}
+export { ToolGroup, ToolStatusIcon, ToolStep };

package/dist/components/ui/alert.d.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { VariantProps } from "class-variance-authority";
 declare const alertVariants: (props?: ({
-  variant?: "default" | "destructive" | null | undefined;
+  variant?: "default" | "destructive" | "info" | "success" | "warning" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function Alert({ className, variant, ...props }: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>): React.JSX.Element;
 declare function AlertTitle({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;

package/dist/components/ui/alert.js

@@ -6,7 +6,10 @@ import { cva } from "class-variance-authority";
 const alertVariants = cva("group/alert relative grid w-full gap-0.5 rounded-lg border px-2.5 py-2 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4", {
 	variants: { variant: {
 		default: "bg-card text-card-foreground",
-		destructive: "bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current"
+		destructive: "bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current",
+		warning: "border-transparent bg-warning/12 *:data-[slot=alert-description]:text-foreground *:[svg]:text-warning",
+		success: "border-transparent bg-success/12 *:data-[slot=alert-description]:text-foreground *:[svg]:text-success",
+		info: "border-transparent bg-primary-soft *:data-[slot=alert-description]:text-foreground *:[svg]:text-primary"
 	} },
 	defaultVariants: { variant: "default" }
 });
@@ -28,7 +31,7 @@ function AlertTitle({ className, ...props }) {
 function AlertDescription({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "alert-description",
-		className: cn("text-sm text-balance text-muted-foreground md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4", className),
+		className: cn("min-w-0 text-sm text-balance wrap-anywhere text-muted-foreground md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4", className),
 		...props
 	});
 }

package/dist/components/ui/badge.d.ts

@@ -2,8 +2,9 @@ import * as React from "react";
 import { VariantProps } from "class-variance-authority";
 declare const badgeVariants: (props?: ({
   variant?: "default" | "destructive" | "ghost" | "link" | "outline" | "secondary" | "soft" | "success" | "warning" | null | undefined;
+  size?: "default" | "lg" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
-declare function Badge({ className, variant, asChild, ...props }: React.ComponentProps<"span"> & VariantProps<typeof badgeVariants> & {
+declare function Badge({ className, variant, size, asChild, ...props }: React.ComponentProps<"span"> & VariantProps<typeof badgeVariants> & {
   asChild?: boolean;
 }): React.JSX.Element;
 export { Badge, badgeVariants };

package/dist/components/ui/badge.js

@@ -5,25 +5,38 @@ import { cva } from "class-variance-authority";
 import { Slot } from "radix-ui";
 // src/components/ui/badge.tsx
 const badgeVariants = cva("group/badge inline-flex h-6 w-fit shrink-0 items-center justify-center gap-1.5 overflow-hidden rounded-full border border-transparent px-2.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3.5!", {
-	variants: { variant: {
-		default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
-		secondary: "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
-		soft: "bg-primary-soft text-primary",
-		success: "bg-success/12 text-success",
-		warning: "bg-warning/12 text-warning",
-		destructive: "bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20",
-		outline: "border-border bg-card text-foreground [a]:hover:bg-muted",
-		ghost: "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
-		link: "text-primary underline-offset-4 hover:underline"
-	} },
-	defaultVariants: { variant: "default" }
+	variants: {
+		variant: {
+			default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+			secondary: "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
+			soft: "bg-primary-soft text-primary",
+			success: "bg-success/12 text-success",
+			warning: "bg-warning/12 text-warning",
+			destructive: "bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20",
+			outline: "border-border bg-card text-foreground [a]:hover:bg-muted",
+			ghost: "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
+			link: "text-primary underline-offset-4 hover:underline"
+		},
+		size: {
+			default: "",
+			/** Matches the height of sm buttons and pills (32px), for headers and toolbars. */
+			lg: "h-8 px-3"
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "default"
+	}
 });
-function Badge({ className, variant = "default", asChild = false, ...props }) {
+function Badge({ className, variant = "default", size = "default", asChild = false, ...props }) {
 	const Comp = asChild ? Slot.Root : "span";
 	return /* @__PURE__ */ jsx(Comp, {
 		"data-slot": "badge",
 		"data-variant": variant,
-		className: cn(badgeVariants({ variant }), className),
+		className: cn(badgeVariants({
+			variant,
+			size
+		}), className),
 		...props
 	});
 }

package/dist/components/ui/item.js

@@ -75,14 +75,14 @@ function ItemMedia({ className, variant = "default", ...props }) {
 function ItemContent({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "item-content",
-		className: cn("flex flex-1 flex-col gap-1 group-data-[size=xs]/item:gap-0 [&+[data-slot=item-content]]:flex-none", className),
+		className: cn("flex min-w-0 flex-1 flex-col gap-1 group-data-[size=xs]/item:gap-0 [&+[data-slot=item-content]]:flex-none", className),
 		...props
 	});
 }
 function ItemTitle({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "item-title",
-		className: cn("line-clamp-1 flex w-fit items-center gap-2 text-sm leading-snug font-medium underline-offset-4", className),
+		className: cn("line-clamp-1 w-fit max-w-full text-sm leading-snug font-medium wrap-anywhere underline-offset-4", className),
 		...props
 	});
 }

package/dist/components/ui/sidebar.d.ts

@@ -14,6 +14,8 @@ type SidebarContextProps = {
   toggleSidebar: () => void;
 };
 declare function useSidebar(): SidebarContextProps;
+/** Like useSidebar, but returns null outside a SidebarProvider. For components that also work without a sidebar. */
+declare function useSidebarOptional(): SidebarContextProps | null;
 declare function SidebarProvider({ defaultOpen, open: openProp, onOpenChange: setOpenProp, className, style, children, ...props }: React.ComponentProps<"div"> & {
   defaultOpen?: boolean;
   open?: boolean;
@@ -66,4 +68,4 @@ declare function SidebarMenuSubButton({ asChild, size, isActive, className, ...p
   size?: "sm" | "md";
   isActive?: boolean;
 }): React.JSX.Element;
-export { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, useSidebar };
+export { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, useSidebar, useSidebarOptional };

package/dist/components/ui/sidebar.js

@@ -25,6 +25,10 @@ function useSidebar() {
 	if (!context) throw new Error("useSidebar must be used within a SidebarProvider.");
 	return context;
 }
+/** Like useSidebar, but returns null outside a SidebarProvider. For components that also work without a sidebar. */
+function useSidebarOptional() {
+	return React.useContext(SidebarContext);
+}
 function SidebarProvider({ defaultOpen = true, open: openProp, onOpenChange: setOpenProp, className, style, children, ...props }) {
 	const isMobile = useIsMobile();
 	const [openMobile, setOpenMobile] = React.useState(false);
@@ -128,12 +132,12 @@ function Sidebar({ side = "left", variant = "sidebar", collapsible = "offcanvas"
 		}), /* @__PURE__ */ jsx("div", {
 			"data-slot": "sidebar-container",
 			"data-side": side,
-			className: cn("fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex", variant === "floating" || variant === "inset" ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l", className),
+			className: cn("fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex", variant === "floating" || variant === "inset" ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)", className),
 			...props,
 			children: /* @__PURE__ */ jsx("div", {
 				"data-sidebar": "sidebar",
 				"data-slot": "sidebar-inner",
-				className: "flex size-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 group-data-[variant=floating]:ring-sidebar-border",
+				className: cn("flex size-full flex-col overflow-hidden bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 group-data-[variant=floating]:ring-sidebar-border", variant === "floating" || variant === "inset" ? "group-data-[state=expanded]:*:min-w-[calc(var(--sidebar-width)-(--spacing(4)))]" : "group-data-[state=expanded]:*:min-w-(--sidebar-width)"),
 				children
 			})
 		})]
@@ -374,4 +378,4 @@ function SidebarMenuSubButton({ asChild = false, size = "md", isActive = false,
 		...props
 	});
 }
-export { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, useSidebar };
+export { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, useSidebar, useSidebarOptional };

package/dist/hooks/use-media-query.d.ts

@@ -0,0 +1,2 @@
+/** True while the media query matches, e.g. useMediaQuery("(min-width: 1280px)"). False during SSR. */
+export declare function useMediaQuery(query: string): boolean;

package/dist/hooks/use-media-query.js

@@ -0,0 +1,12 @@
+import * as React from "react";
+// src/hooks/use-media-query.ts
+/** True while the media query matches, e.g. useMediaQuery("(min-width: 1280px)"). False during SSR. */
+function useMediaQuery(query) {
+	const subscribe = React.useCallback((onChange) => {
+		const mql = window.matchMedia(query);
+		mql.addEventListener("change", onChange);
+		return () => mql.removeEventListener("change", onChange);
+	}, [query]);
+	return React.useSyncExternalStore(subscribe, () => window.matchMedia(query).matches, () => false);
+}
+export { useMediaQuery };

package/dist/index.d.ts

@@ -50,7 +50,7 @@ import { ScrollArea, ScrollBar } from "./components/ui/scroll-area.js";
 import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue } from "./components/ui/select.js";
 import { Separator } from "./components/ui/separator.js";
 import { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger } from "./components/ui/sheet.js";
-import { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, useSidebar } from "./components/ui/sidebar.js";
+import { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, useSidebar, useSidebarOptional } from "./components/ui/sidebar.js";
 import { Skeleton } from "./components/ui/skeleton.js";
 import { Slider } from "./components/ui/slider.js";
 import { Toaster } from "./components/ui/sonner.js";
@@ -66,12 +66,14 @@ import { Trace, TraceCollapsible, TraceCollapsibleContent, TraceCollapsibleTrigg
 import { ActivityFeed, ActivityItem } from "./components/admin/activity-feed.js";
 import { AppBrand, AppBrandProps, AppNavItem, AppNavSection, AppShell, AppShellProps } from "./components/admin/app-shell.js";
 import { Callout } from "./components/admin/callout.js";
+import { ConfirmDialog, ConfirmDialogProps } from "./components/admin/confirm-dialog.js";
+import { CopyField, CopyFieldProps } from "./components/admin/copy-field.js";
 import { KeyValueGrid, KeyValueItem } from "./components/admin/key-value-grid.js";
 import { LinkTile, LinkTileProps } from "./components/admin/link-tile.js";
 import { PageHeader, PageHeaderProps } from "./components/admin/page-header.js";
 import { SearchInput, SearchInputProps } from "./components/admin/search-input.js";
 import { StatCard, StatCardProps } from "./components/admin/stat-card.js";
-import { StatusBadge, StatusDot, StatusTone } from "./components/admin/status.js";
+import { StatusBadge, StatusBadgeProps, StatusDot, StatusDotProps, StatusTone } from "./components/admin/status.js";
 import { Timeline, TimelineItem } from "./components/admin/timeline.js";
 import { UsageMeter, UsageMeterProps } from "./components/admin/usage-meter.js";
 import { UserChip, UserChipProps, initials } from "./components/admin/user-chip.js";
@@ -80,15 +82,19 @@ import { DataTable, DataTableColumnDef, DataTableFeatures, DataTableProps, creat
 import { Sparkline, SparklineProps, smoothPath } from "./components/data/sparkline.js";
 import { StatusBarDatum, StatusBars, StatusBarsProps } from "./components/data/status-bars.js";
 import { TrendChart, TrendChartProps, TrendLegend, TrendSeries } from "./components/data/trend-chart.js";
-import { AssistantAvatar, ChatMessage, ChatMessageProps, ChatThread, ChatThreadProps, MessageActions, MessageActionsProps, ToolCall, ToolCallProps, TypingIndicator } from "./components/ai/chat.js";
+import { ApprovalCard, ApprovalCardProps, ApprovalResult, ApprovalResultProps } from "./components/ai/approval.js";
+import { ChatPanel, ChatPanelProps, ChatShell, ChatShellProps } from "./components/ai/chat-shell.js";
+import { AssistantAvatar, ChatMessage, ChatMessageProps, ChatThread, ChatThreadProps, MessageActions, MessageActionsProps, ToolCall, ToolCallProps, TypingIndicator, TypingIndicatorProps } from "./components/ai/chat.js";
 import { CodeSnippet, CodeSnippetProps, InlineCode, Prose } from "./components/ai/code-block.js";
-import { Conversation, ConversationGroup, ConversationList, ConversationListProps } from "./components/ai/conversation-list.js";
+import { Conversation, ConversationGroup, ConversationList, ConversationListProps, NewConversationButton, NewConversationButtonProps, groupByDate } from "./components/ai/conversation-list.js";
 import { ModelOption, ModelPicker, ModelPickerProps } from "./components/ai/model-picker.js";
-import { PromptInput, PromptInputChip, PromptInputProps } from "./components/ai/prompt-input.js";
+import { PromptInput, PromptInputChip, PromptInputChipProps, PromptInputProps, PromptInputSelect, PromptInputSelectOption, PromptInputSelectProps } from "./components/ai/prompt-input.js";
+import { ToolGroup, ToolGroupProps, ToolStatus, ToolStatusIcon, ToolStep, ToolStepProps } from "./components/ai/tool-steps.js";
 import { AppleIcon, AuthLayout, AuthLayoutProps, AuthProvider, GitHubIcon, GoogleIcon, LoginForm, LoginFormProps, LoginValues, SignupForm, SignupFormProps, SignupValues } from "./components/auth/auth.js";
 import { useCopyToClipboard } from "./hooks/use-copy-to-clipboard.js";
 import { useHighlightedCode } from "./hooks/use-highlighted-code.js";
+import { useMediaQuery } from "./hooks/use-media-query.js";
 import { useIsMobile } from "./hooks/use-mobile.js";
 import { highlightCode, loadHighlighter } from "./lib/highlighter.js";
 import { cn } from "./lib/utils.js";
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, ActivityFeed, type ActivityItem, Alert, AlertAction, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AppBrand, type AppBrandProps, type AppNavItem, type AppNavSection, AppShell, type AppShellProps, AppleIcon, AspectRatio, AssistantAvatar, Attachment, AttachmentAction, AttachmentActions, AttachmentContent, AttachmentDescription, AttachmentGroup, AttachmentMedia, AttachmentTitle, AttachmentTrigger, AuthLayout, type AuthLayoutProps, type AuthProvider, Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, Badge, BarList, type BarListItem, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Bubble, BubbleContent, BubbleGroup, BubbleReactions, Button, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, Calendar, CalendarDayButton, Callout, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, type CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, type ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, ChatMessage, type ChatMessageProps, ChatThread, type ChatThreadProps, Checkbox, CodeBlock, CodeBlockActions, CodeBlockContent, CodeBlockCopyButton, CodeBlockFooter, CodeBlockHeader, CodeBlockLine, CodeBlockTitle, CodeSnippet, type CodeSnippetProps, Collapsible, CollapsibleContent, CollapsibleTrigger, Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxSeparator, ComboboxTrigger, ComboboxValue, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, type Conversation, type ConversationGroup, ConversationList, type ConversationListProps, DataTable, type DataTableColumnDef, type DataTableFeatures, type DataTableProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DirectionProvider, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, GitHubIcon, GoogleIcon, HoverCard, HoverCardContent, HoverCardTrigger, InlineCode, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle, Kbd, KbdGroup, KeyValueGrid, type KeyValueItem, Label, LinkTile, type LinkTileProps, LoginForm, type LoginFormProps, type LoginValues, Marker, MarkerContent, MarkerIcon, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, Message, MessageActions, type MessageActionsProps, MessageAvatar, MessageContent, MessageFooter, MessageGroup, MessageHeader, MessageScroller, MessageScrollerButton, MessageScrollerContent, MessageScrollerItem, MessageScrollerProvider, MessageScrollerViewport, type ModelOption, ModelPicker, type ModelPickerProps, NativeSelect, NativeSelectOptGroup, NativeSelectOption, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, PageHeader, type PageHeaderProps, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverAnchor, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, Progress, PromptInput, PromptInputChip, type PromptInputProps, Prose, Questionnaire, QuestionnaireActions, QuestionnaireChoice, QuestionnaireChoiceDescription, QuestionnaireChoices, QuestionnaireDescription, QuestionnaireError, QuestionnaireInput, QuestionnaireItem, QuestionnaireNext, QuestionnairePrevious, QuestionnaireProgress, QuestionnaireSkip, QuestionnaireSubmit, QuestionnaireTitle, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, type ResolvedThemeMode, ScrollArea, ScrollBar, SearchInput, type SearchInputProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, SignupForm, type SignupFormProps, type SignupValues, Skeleton, Slider, Sparkline, type SparklineProps, Spinner, StatCard, type StatCardProps, StatusBadge, type StatusBarDatum, StatusBars, type StatusBarsProps, StatusDot, type StatusTone, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, type ThemeContextValue, type ThemeMode, ThemeProvider, type ThemeProviderProps, ThemeScript, ThemeToggle, Timeline, type TimelineItem, Toaster, Toggle, ToggleGroup, ToggleGroupItem, ToolCall, type ToolCallProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Trace, TraceCollapsible, TraceCollapsibleContent, TraceCollapsibleTrigger, TraceDescription, TraceIcon, TraceLine, TraceTitle, TrendChart, type TrendChartProps, TrendLegend, type TrendSeries, TypingIndicator, UsageMeter, type UsageMeterProps, UserChip, type UserChipProps, badgeVariants, buttonGroupVariants, buttonVariants, cn, createDataTableColumnHelper, dataTableFeatures, highlightCode, initials, loadHighlighter, markerVariants, navigationMenuTriggerStyle, smoothPath, tabsListVariants, toggleVariants, useCarousel, useComboboxAnchor, useCopyToClipboard, useDirection, useHighlightedCode, useIsMobile, useMessageScroller, useMessageScrollerScrollable, useMessageScrollerVisibility, useSidebar, useTheme };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, ActivityFeed, type ActivityItem, Alert, AlertAction, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AppBrand, type AppBrandProps, type AppNavItem, type AppNavSection, AppShell, type AppShellProps, AppleIcon, ApprovalCard, type ApprovalCardProps, ApprovalResult, type ApprovalResultProps, AspectRatio, AssistantAvatar, Attachment, AttachmentAction, AttachmentActions, AttachmentContent, AttachmentDescription, AttachmentGroup, AttachmentMedia, AttachmentTitle, AttachmentTrigger, AuthLayout, type AuthLayoutProps, type AuthProvider, Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, Badge, BarList, type BarListItem, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Bubble, BubbleContent, BubbleGroup, BubbleReactions, Button, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, Calendar, CalendarDayButton, Callout, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, type CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, type ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, ChatMessage, type ChatMessageProps, ChatPanel, type ChatPanelProps, ChatShell, type ChatShellProps, ChatThread, type ChatThreadProps, Checkbox, CodeBlock, CodeBlockActions, CodeBlockContent, CodeBlockCopyButton, CodeBlockFooter, CodeBlockHeader, CodeBlockLine, CodeBlockTitle, CodeSnippet, type CodeSnippetProps, Collapsible, CollapsibleContent, CollapsibleTrigger, Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxSeparator, ComboboxTrigger, ComboboxValue, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ConfirmDialog, type ConfirmDialogProps, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, type Conversation, type ConversationGroup, ConversationList, type ConversationListProps, CopyField, type CopyFieldProps, DataTable, type DataTableColumnDef, type DataTableFeatures, type DataTableProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DirectionProvider, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, GitHubIcon, GoogleIcon, HoverCard, HoverCardContent, HoverCardTrigger, InlineCode, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle, Kbd, KbdGroup, KeyValueGrid, type KeyValueItem, Label, LinkTile, type LinkTileProps, LoginForm, type LoginFormProps, type LoginValues, Marker, MarkerContent, MarkerIcon, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, Message, MessageActions, type MessageActionsProps, MessageAvatar, MessageContent, MessageFooter, MessageGroup, MessageHeader, MessageScroller, MessageScrollerButton, MessageScrollerContent, MessageScrollerItem, MessageScrollerProvider, MessageScrollerViewport, type ModelOption, ModelPicker, type ModelPickerProps, NativeSelect, NativeSelectOptGroup, NativeSelectOption, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, NewConversationButton, type NewConversationButtonProps, PageHeader, type PageHeaderProps, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverAnchor, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, Progress, PromptInput, PromptInputChip, type PromptInputChipProps, type PromptInputProps, PromptInputSelect, type PromptInputSelectOption, type PromptInputSelectProps, Prose, Questionnaire, QuestionnaireActions, QuestionnaireChoice, QuestionnaireChoiceDescription, QuestionnaireChoices, QuestionnaireDescription, QuestionnaireError, QuestionnaireInput, QuestionnaireItem, QuestionnaireNext, QuestionnairePrevious, QuestionnaireProgress, QuestionnaireSkip, QuestionnaireSubmit, QuestionnaireTitle, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, type ResolvedThemeMode, ScrollArea, ScrollBar, SearchInput, type SearchInputProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, SignupForm, type SignupFormProps, type SignupValues, Skeleton, Slider, Sparkline, type SparklineProps, Spinner, StatCard, type StatCardProps, StatusBadge, type StatusBadgeProps, type StatusBarDatum, StatusBars, type StatusBarsProps, StatusDot, type StatusDotProps, type StatusTone, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, type ThemeContextValue, type ThemeMode, ThemeProvider, type ThemeProviderProps, ThemeScript, ThemeToggle, Timeline, type TimelineItem, Toaster, Toggle, ToggleGroup, ToggleGroupItem, ToolCall, type ToolCallProps, ToolGroup, type ToolGroupProps, type ToolStatus, ToolStatusIcon, ToolStep, type ToolStepProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Trace, TraceCollapsible, TraceCollapsibleContent, TraceCollapsibleTrigger, TraceDescription, TraceIcon, TraceLine, TraceTitle, TrendChart, type TrendChartProps, TrendLegend, type TrendSeries, TypingIndicator, type TypingIndicatorProps, UsageMeter, type UsageMeterProps, UserChip, type UserChipProps, badgeVariants, buttonGroupVariants, buttonVariants, cn, createDataTableColumnHelper, dataTableFeatures, groupByDate, highlightCode, initials, loadHighlighter, markerVariants, navigationMenuTriggerStyle, smoothPath, tabsListVariants, toggleVariants, useCarousel, useComboboxAnchor, useCopyToClipboard, useDirection, useHighlightedCode, useIsMobile, useMediaQuery, useMessageScroller, useMessageScrollerScrollable, useMessageScrollerVisibility, useSidebar, useSidebarOptional, useTheme };

package/dist/index.js

@@ -50,7 +50,7 @@ import { ScrollArea, ScrollBar } from "./components/ui/scroll-area.js";
 import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue } from "./components/ui/select.js";
 import { Separator } from "./components/ui/separator.js";
 import { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger } from "./components/ui/sheet.js";
-import { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, useSidebar } from "./components/ui/sidebar.js";
+import { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, useSidebar, useSidebarOptional } from "./components/ui/sidebar.js";
 import { Skeleton } from "./components/ui/skeleton.js";
 import { Slider } from "./components/ui/slider.js";
 import { Toaster } from "./components/ui/sonner.js";
@@ -66,6 +66,8 @@ import { Trace, TraceCollapsible, TraceCollapsibleContent, TraceCollapsibleTrigg
 import { ActivityFeed } from "./components/admin/activity-feed.js";
 import { AppBrand, AppShell } from "./components/admin/app-shell.js";
 import { Callout } from "./components/admin/callout.js";
+import { ConfirmDialog } from "./components/admin/confirm-dialog.js";
+import { CopyField } from "./components/admin/copy-field.js";
 import { KeyValueGrid } from "./components/admin/key-value-grid.js";
 import { LinkTile } from "./components/admin/link-tile.js";
 import { PageHeader } from "./components/admin/page-header.js";
@@ -80,15 +82,19 @@ import { DataTable, createDataTableColumnHelper, dataTableFeatures } from "./com
 import { Sparkline, smoothPath } from "./components/data/sparkline.js";
 import { StatusBars } from "./components/data/status-bars.js";
 import { TrendChart, TrendLegend } from "./components/data/trend-chart.js";
+import { ApprovalCard, ApprovalResult } from "./components/ai/approval.js";
+import { ChatPanel, ChatShell } from "./components/ai/chat-shell.js";
 import { AssistantAvatar, ChatMessage, ChatThread, MessageActions, ToolCall, TypingIndicator } from "./components/ai/chat.js";
 import { CodeSnippet, InlineCode, Prose } from "./components/ai/code-block.js";
-import { ConversationList } from "./components/ai/conversation-list.js";
+import { ConversationList, NewConversationButton, groupByDate } from "./components/ai/conversation-list.js";
 import { ModelPicker } from "./components/ai/model-picker.js";
-import { PromptInput, PromptInputChip } from "./components/ai/prompt-input.js";
+import { PromptInput, PromptInputChip, PromptInputSelect } from "./components/ai/prompt-input.js";
+import { ToolGroup, ToolStatusIcon, ToolStep } from "./components/ai/tool-steps.js";
 import { AppleIcon, AuthLayout, GitHubIcon, GoogleIcon, LoginForm, SignupForm } from "./components/auth/auth.js";
 import { useCopyToClipboard } from "./hooks/use-copy-to-clipboard.js";
 import { useHighlightedCode } from "./hooks/use-highlighted-code.js";
+import { useMediaQuery } from "./hooks/use-media-query.js";
 import { useIsMobile } from "./hooks/use-mobile.js";
 import { highlightCode, loadHighlighter } from "./lib/highlighter.js";
 import { cn } from "./lib/utils.js";
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, ActivityFeed, Alert, AlertAction, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AppBrand, AppShell, AppleIcon, AspectRatio, AssistantAvatar, Attachment, AttachmentAction, AttachmentActions, AttachmentContent, AttachmentDescription, AttachmentGroup, AttachmentMedia, AttachmentTitle, AttachmentTrigger, AuthLayout, Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, Badge, BarList, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Bubble, BubbleContent, BubbleGroup, BubbleReactions, Button, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, Calendar, CalendarDayButton, Callout, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, ChatMessage, ChatThread, Checkbox, CodeBlock, CodeBlockActions, CodeBlockContent, CodeBlockCopyButton, CodeBlockFooter, CodeBlockHeader, CodeBlockLine, CodeBlockTitle, CodeSnippet, Collapsible, CollapsibleContent, CollapsibleTrigger, Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxSeparator, ComboboxTrigger, ComboboxValue, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, ConversationList, DataTable, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DirectionProvider, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, GitHubIcon, GoogleIcon, HoverCard, HoverCardContent, HoverCardTrigger, InlineCode, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle, Kbd, KbdGroup, KeyValueGrid, Label, LinkTile, LoginForm, Marker, MarkerContent, MarkerIcon, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, Message, MessageActions, MessageAvatar, MessageContent, MessageFooter, MessageGroup, MessageHeader, MessageScroller, MessageScrollerButton, MessageScrollerContent, MessageScrollerItem, MessageScrollerProvider, MessageScrollerViewport, ModelPicker, NativeSelect, NativeSelectOptGroup, NativeSelectOption, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, PageHeader, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverAnchor, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, Progress, PromptInput, PromptInputChip, Prose, Questionnaire, QuestionnaireActions, QuestionnaireChoice, QuestionnaireChoiceDescription, QuestionnaireChoices, QuestionnaireDescription, QuestionnaireError, QuestionnaireInput, QuestionnaireItem, QuestionnaireNext, QuestionnairePrevious, QuestionnaireProgress, QuestionnaireSkip, QuestionnaireSubmit, QuestionnaireTitle, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, SearchInput, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, SignupForm, Skeleton, Slider, Sparkline, Spinner, StatCard, StatusBadge, StatusBars, StatusDot, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, ThemeProvider, ThemeScript, ThemeToggle, Timeline, Toaster, Toggle, ToggleGroup, ToggleGroupItem, ToolCall, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Trace, TraceCollapsible, TraceCollapsibleContent, TraceCollapsibleTrigger, TraceDescription, TraceIcon, TraceLine, TraceTitle, TrendChart, TrendLegend, TypingIndicator, UsageMeter, UserChip, badgeVariants, buttonGroupVariants, buttonVariants, cn, createDataTableColumnHelper, dataTableFeatures, highlightCode, initials, loadHighlighter, markerVariants, navigationMenuTriggerStyle, smoothPath, tabsListVariants, toggleVariants, useCarousel, useComboboxAnchor, useCopyToClipboard, useDirection, useHighlightedCode, useIsMobile, useMessageScroller, useMessageScrollerScrollable, useMessageScrollerVisibility, useSidebar, useTheme };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, ActivityFeed, Alert, AlertAction, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AppBrand, AppShell, AppleIcon, ApprovalCard, ApprovalResult, AspectRatio, AssistantAvatar, Attachment, AttachmentAction, AttachmentActions, AttachmentContent, AttachmentDescription, AttachmentGroup, AttachmentMedia, AttachmentTitle, AttachmentTrigger, AuthLayout, Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, Badge, BarList, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Bubble, BubbleContent, BubbleGroup, BubbleReactions, Button, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, Calendar, CalendarDayButton, Callout, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, ChatMessage, ChatPanel, ChatShell, ChatThread, Checkbox, CodeBlock, CodeBlockActions, CodeBlockContent, CodeBlockCopyButton, CodeBlockFooter, CodeBlockHeader, CodeBlockLine, CodeBlockTitle, CodeSnippet, Collapsible, CollapsibleContent, CollapsibleTrigger, Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxSeparator, ComboboxTrigger, ComboboxValue, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ConfirmDialog, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, ConversationList, CopyField, DataTable, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DirectionProvider, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, GitHubIcon, GoogleIcon, HoverCard, HoverCardContent, HoverCardTrigger, InlineCode, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle, Kbd, KbdGroup, KeyValueGrid, Label, LinkTile, LoginForm, Marker, MarkerContent, MarkerIcon, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, Message, MessageActions, MessageAvatar, MessageContent, MessageFooter, MessageGroup, MessageHeader, MessageScroller, MessageScrollerButton, MessageScrollerContent, MessageScrollerItem, MessageScrollerProvider, MessageScrollerViewport, ModelPicker, NativeSelect, NativeSelectOptGroup, NativeSelectOption, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, NewConversationButton, PageHeader, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverAnchor, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, Progress, PromptInput, PromptInputChip, PromptInputSelect, Prose, Questionnaire, QuestionnaireActions, QuestionnaireChoice, QuestionnaireChoiceDescription, QuestionnaireChoices, QuestionnaireDescription, QuestionnaireError, QuestionnaireInput, QuestionnaireItem, QuestionnaireNext, QuestionnairePrevious, QuestionnaireProgress, QuestionnaireSkip, QuestionnaireSubmit, QuestionnaireTitle, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, SearchInput, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, SignupForm, Skeleton, Slider, Sparkline, Spinner, StatCard, StatusBadge, StatusBars, StatusDot, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, ThemeProvider, ThemeScript, ThemeToggle, Timeline, Toaster, Toggle, ToggleGroup, ToggleGroupItem, ToolCall, ToolGroup, ToolStatusIcon, ToolStep, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Trace, TraceCollapsible, TraceCollapsibleContent, TraceCollapsibleTrigger, TraceDescription, TraceIcon, TraceLine, TraceTitle, TrendChart, TrendLegend, TypingIndicator, UsageMeter, UserChip, badgeVariants, buttonGroupVariants, buttonVariants, cn, createDataTableColumnHelper, dataTableFeatures, groupByDate, highlightCode, initials, loadHighlighter, markerVariants, navigationMenuTriggerStyle, smoothPath, tabsListVariants, toggleVariants, useCarousel, useComboboxAnchor, useCopyToClipboard, useDirection, useHighlightedCode, useIsMobile, useMediaQuery, useMessageScroller, useMessageScrollerScrollable, useMessageScrollerVisibility, useSidebar, useSidebarOptional, useTheme };

package/dist/styles.css

@@ -186,3 +186,27 @@
 @utility animate-typing {
   animation: hb-typing 1.2s infinite ease-in-out;
 }
+
+/* Thin, quiet scrollbars in the theme's colors. Firefox and Chromium use the standard properties; Safari the ::-webkit rules. */
+@layer base {
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: color-mix(in oklab, var(--muted-foreground) 35%, transparent) transparent;
+  }
+  ::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+  }
+  ::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  ::-webkit-scrollbar-thumb {
+    border: 3px solid transparent;
+    border-radius: 999px;
+    background-color: color-mix(in oklab, var(--muted-foreground) 35%, transparent);
+    background-clip: content-box;
+  }
+  ::-webkit-scrollbar-thumb:hover {
+    background-color: color-mix(in oklab, var(--muted-foreground) 60%, transparent);
+  }
+}