@dungle-scrubs/admin-ui-soft 0.0.0-stage → 0.1.0

package/dist/components/assistant-ui/elements/context-breakdown.d.ts

@@ -0,0 +1,15 @@
+import { ComponentProps } from "react";
+declare namespace context_breakdown_d_exports {
+  export { ContextBreakdown, ContextSegment };
+}
+export interface ContextSegment {
+  label: string;
+  tokens: number;
+  tint: string;
+}
+export declare function ContextBreakdown({ segments, limit, className, ...props }: Omit<ComponentProps<"div">, "children" | "segments" | "limit"> & {
+  segments: readonly ContextSegment[];
+  limit: number;
+}): import("react").JSX.Element;
+//#endregion
+export { context_breakdown_d_exports };

package/dist/components/assistant-ui/elements/context-breakdown.js

@@ -0,0 +1,91 @@
+"use client";
+import { __exportAll } from "../../../_virtual/_rolldown/runtime.js";
+import { cn } from "../../../lib/utils.js";
+import { mono, paper } from "./surfaces.js";
+import { contextLevel } from "../../../lib/context-level.js";
+import { announced, pct } from "../utils/range.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/assistant-ui/elements/context-breakdown.tsx
+var context_breakdown_exports = /* @__PURE__ */ __exportAll({ ContextBreakdown: () => ContextBreakdown });
+const fmt = (n) => n.toLocaleString("en-US");
+function ContextBreakdown({ segments, limit, className, ...props }) {
+	const used = segments.reduce((sum, segment) => sum + segment.tokens, 0);
+	const level = contextLevel(limit === 0 ? 0 : used / limit * 100);
+	const share = (tokens) => pct(tokens, limit);
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "context-breakdown",
+		className: cn(paper, "flex w-full max-w-sm flex-col gap-3 rounded-2xl p-4", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-baseline justify-between",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "text-[13.5px] font-medium",
+					children: "Context"
+				}), /* @__PURE__ */ jsxs("span", {
+					className: cn(mono, "tabular-nums", level === "critical" ? "text-destructive dark:text-destructive" : level === "warning" ? "text-warning dark:text-warning" : "text-muted-foreground"),
+					children: [
+						fmt(used),
+						" / ",
+						fmt(limit)
+					]
+				})]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "bg-foreground/[0.06] flex h-2 w-full overflow-hidden rounded-full",
+				children: segments.map((segment) => {
+					const width = share(segment.tokens);
+					if (announced(width) === 0) return null;
+					return /* @__PURE__ */ jsx("span", {
+						role: "meter",
+						"aria-label": `${segment.label} context usage`,
+						"aria-valuemin": 0,
+						"aria-valuemax": 100,
+						"aria-valuenow": announced(width),
+						"aria-valuetext": `${fmt(segment.tokens)} of ${fmt(limit)}`,
+						className: cn("h-full transition-[width] duration-500 ease-out motion-reduce:transition-none", segment.tint),
+						style: { width: `${width}%` }
+					}, segment.label);
+				})
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col gap-1.5",
+				children: [segments.map((segment) => /* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-2",
+					children: [
+						/* @__PURE__ */ jsx("span", {
+							"aria-hidden": true,
+							className: cn("size-2 shrink-0 rounded-full", segment.tint)
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: "text-muted-foreground min-w-0 flex-1 truncate text-[13px]",
+							children: segment.label
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: cn(mono, "text-muted-foreground shrink-0 tabular-nums"),
+							children: fmt(segment.tokens)
+						})
+					]
+				}, segment.label)), /* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-2",
+					children: [
+						/* @__PURE__ */ jsx("span", {
+							"aria-hidden": true,
+							className: "border-muted-foreground/50 size-2 shrink-0 rounded-full border bg-transparent"
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: "text-muted-foreground min-w-0 flex-1 truncate text-[13px]",
+							children: "Headroom"
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: cn(mono, "text-muted-foreground shrink-0 tabular-nums"),
+							children: fmt(Math.max(0, limit - used))
+						})
+					]
+				})]
+			})
+		]
+	});
+}
+//#endregion
+export { ContextBreakdown, context_breakdown_exports };

package/dist/components/assistant-ui/elements/context-display.aui.d.ts

@@ -0,0 +1,25 @@
+import { ContextDisplayContent, ContextDisplayRootProps as ContextDisplayRootProps$1, ContextDisplayTrigger, PresetProps, TokenUsage } from "./context-display.js";
+import { FC } from "react";
+declare namespace context_display_aui_d_exports {
+  export { ContextDisplay, ContextDisplayBar, ContextDisplayContent, ContextDisplayRing, ContextDisplayRoot, ContextDisplayText, ContextDisplayTrigger, TokenUsage };
+}
+type ContextDisplayRootProps = Omit<ContextDisplayRootProps$1, "usage"> & {
+  usage: TokenUsage;
+};
+declare const ContextDisplayRoot: FC<ContextDisplayRootProps>;
+type WiredPresetProps = Omit<PresetProps, "usage"> & {
+  usage: TokenUsage;
+};
+declare const ContextDisplayRing: FC<WiredPresetProps>;
+declare const ContextDisplayBar: FC<WiredPresetProps>;
+declare const ContextDisplayText: FC<WiredPresetProps>;
+declare const ContextDisplay: {
+  Root: typeof ContextDisplayRoot;
+  Trigger: typeof ContextDisplayTrigger;
+  Content: typeof ContextDisplayContent;
+  Ring: typeof ContextDisplayRing;
+  Bar: typeof ContextDisplayBar;
+  Text: typeof ContextDisplayText;
+};
+//#endregion
+export { ContextDisplay, ContextDisplayBar, ContextDisplayContent, ContextDisplayRing, ContextDisplayRoot, ContextDisplayText, ContextDisplayTrigger, type TokenUsage, context_display_aui_d_exports };

package/dist/components/assistant-ui/elements/context-display.aui.js

@@ -0,0 +1,26 @@
+"use client";
+import { __exportAll } from "../../../_virtual/_rolldown/runtime.js";
+import { ContextDisplayBar as ContextDisplayBar$1, ContextDisplayContent, ContextDisplayRing as ContextDisplayRing$1, ContextDisplayRoot as ContextDisplayRoot$1, ContextDisplayText as ContextDisplayText$1, ContextDisplayTrigger } from "./context-display.js";
+//#region src/components/assistant-ui/elements/context-display.aui.tsx
+var context_display_aui_exports = /* @__PURE__ */ __exportAll({
+	ContextDisplay: () => ContextDisplay,
+	ContextDisplayBar: () => ContextDisplayBar,
+	ContextDisplayContent: () => ContextDisplayContent,
+	ContextDisplayRing: () => ContextDisplayRing,
+	ContextDisplayRoot: () => ContextDisplayRoot,
+	ContextDisplayText: () => ContextDisplayText,
+	ContextDisplayTrigger: () => ContextDisplayTrigger
+});
+const ContextDisplayRoot = ContextDisplayRoot$1;
+const ContextDisplayRing = ContextDisplayRing$1;
+const ContextDisplayBar = ContextDisplayBar$1;
+const ContextDisplayText = ContextDisplayText$1;
+const ContextDisplay = {};
+ContextDisplay.Root = ContextDisplayRoot;
+ContextDisplay.Trigger = ContextDisplayTrigger;
+ContextDisplay.Content = ContextDisplayContent;
+ContextDisplay.Ring = ContextDisplayRing;
+ContextDisplay.Bar = ContextDisplayBar;
+ContextDisplay.Text = ContextDisplayText;
+//#endregion
+export { ContextDisplay, ContextDisplayBar, ContextDisplayContent, ContextDisplayRing, ContextDisplayRoot, ContextDisplayText, ContextDisplayTrigger, context_display_aui_exports };

package/dist/components/assistant-ui/elements/context-display.d.ts

@@ -0,0 +1,43 @@
+import { FC, ReactNode } from "react";
+declare namespace context_display_d_exports {
+  export { ContextDisplay, ContextDisplayBar, ContextDisplayContent, ContextDisplayRing, ContextDisplayRoot, ContextDisplayRootProps, ContextDisplayText, ContextDisplayTrigger, PresetProps, TokenUsage };
+}
+export type TokenUsage = {
+  totalTokens?: number | undefined;
+  inputTokens?: number | undefined;
+  cachedInputTokens?: number | undefined;
+  outputTokens?: number | undefined;
+  reasoningTokens?: number | undefined;
+};
+export type PresetProps = {
+  modelContextWindow: number;
+  className?: string;
+  side?: "top" | "bottom" | "left" | "right";
+  usage?: TokenUsage | undefined;
+  resetKey?: string | undefined;
+};
+export type ContextDisplayRootProps = {
+  modelContextWindow: number;
+  children: ReactNode;
+  usage?: TokenUsage | undefined;
+  resetKey?: string | undefined;
+};
+declare function ContextDisplayRoot({ modelContextWindow, children, usage, resetKey }: ContextDisplayRootProps): import("react").JSX.Element | null;
+declare function ContextDisplayTrigger({ className, children, onClick, ...props }: React.ComponentProps<"button">): import("react").JSX.Element;
+declare function ContextDisplayContent({ side, className }: {
+  side?: "top" | "bottom" | "left" | "right" | undefined;
+  className?: string;
+}): import("react").JSX.Element;
+declare const ContextDisplayRing: FC<PresetProps>;
+declare const ContextDisplayBar: FC<PresetProps>;
+declare const ContextDisplayText: FC<PresetProps>;
+declare const ContextDisplay: {
+  Root: typeof ContextDisplayRoot;
+  Trigger: typeof ContextDisplayTrigger;
+  Content: typeof ContextDisplayContent;
+  Ring: typeof ContextDisplayRing;
+  Bar: typeof ContextDisplayBar;
+  Text: typeof ContextDisplayText;
+};
+//#endregion
+export { ContextDisplay, ContextDisplayBar, ContextDisplayContent, ContextDisplayRing, ContextDisplayRoot, ContextDisplayText, ContextDisplayTrigger, context_display_d_exports };

package/dist/components/assistant-ui/elements/context-display.js

@@ -0,0 +1,300 @@
+"use client";
+import { __exportAll } from "../../../_virtual/_rolldown/runtime.js";
+import { cn } from "../../../lib/utils.js";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../../ui/tooltip.js";
+import { contextLevel } from "../../../lib/context-level.js";
+import { createContext, useContext, useMemo, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/assistant-ui/elements/context-display.tsx
+var context_display_exports = /* @__PURE__ */ __exportAll({
+	ContextDisplay: () => ContextDisplay,
+	ContextDisplayBar: () => ContextDisplayBar,
+	ContextDisplayContent: () => ContextDisplayContent,
+	ContextDisplayRing: () => ContextDisplayRing,
+	ContextDisplayRoot: () => ContextDisplayRoot,
+	ContextDisplayText: () => ContextDisplayText,
+	ContextDisplayTrigger: () => ContextDisplayTrigger
+});
+const formatTokenCount = (tokens) => {
+	if (tokens >= 1e6) return `${(tokens / 1e6).toFixed(1).replace(/\.0$/, "")}M`;
+	if (tokens >= 1e3) return `${(tokens / 1e3).toFixed(1).replace(/\.0$/, "")}k`;
+	return `${tokens}`;
+};
+const getUsagePercent = (totalTokens, modelContextWindow) => {
+	if (!totalTokens) return 0;
+	return Math.min(totalTokens / modelContextWindow * 100, 100);
+};
+const getUsageSeverity = contextLevel;
+const getStrokeColor = (percent) => {
+	const severity = getUsageSeverity(percent);
+	if (severity === "critical") return "stroke-destructive";
+	if (severity === "warning") return "stroke-warning";
+	return "stroke-foreground";
+};
+const getBarColor = (percent) => {
+	const severity = getUsageSeverity(percent);
+	if (severity === "critical") return "bg-destructive";
+	if (severity === "warning") return "bg-warning";
+	return "bg-foreground";
+};
+const getPercentColor = (percent) => {
+	const severity = getUsageSeverity(percent);
+	if (severity === "critical") return "text-destructive";
+	if (severity === "warning") return "text-warning";
+	return "text-muted-foreground";
+};
+const ContextDisplayContext = createContext(null);
+function useContextDisplay() {
+	const ctx = useContext(ContextDisplayContext);
+	if (!ctx) throw new Error("ContextDisplay.* must be used within ContextDisplay.Root");
+	return ctx;
+}
+function ContextDisplayRoot({ modelContextWindow, children, usage, resetKey }) {
+	const rawTokens = usage?.totalTokens ?? 0;
+	const [tokenState, setTokenState] = useState({
+		resetKey,
+		totalTokens: rawTokens > 0 ? rawTokens : 0,
+		usage
+	});
+	if (tokenState.resetKey !== resetKey || rawTokens > 0 && rawTokens !== tokenState.totalTokens || usage !== tokenState.usage) setTokenState((prev) => {
+		if (prev.resetKey !== resetKey) return {
+			resetKey,
+			totalTokens: rawTokens > 0 ? rawTokens : 0,
+			usage
+		};
+		if (rawTokens > 0 && rawTokens !== prev.totalTokens) return {
+			...prev,
+			totalTokens: rawTokens,
+			usage
+		};
+		if (usage !== prev.usage) return {
+			...prev,
+			usage
+		};
+		return prev;
+	});
+	const current = tokenState.resetKey === resetKey ? tokenState : {
+		totalTokens: rawTokens > 0 ? rawTokens : 0,
+		usage
+	};
+	const totalTokens = current.totalTokens;
+	const percent = getUsagePercent(totalTokens, modelContextWindow);
+	const hasUsage = current.usage !== void 0 || totalTokens > 0;
+	const [open, setOpen] = useState(false);
+	const contextValue = useMemo(() => ({
+		usage: current.usage,
+		totalTokens,
+		percent,
+		modelContextWindow,
+		openBreakdown: () => setOpen(true)
+	}), [
+		current.usage,
+		totalTokens,
+		percent,
+		modelContextWindow
+	]);
+	if (!hasUsage) return null;
+	return /* @__PURE__ */ jsx(ContextDisplayContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsx(Tooltip, {
+			open,
+			onOpenChange: setOpen,
+			children
+		}) })
+	});
+}
+function ContextDisplayTrigger({ className, children, onClick, ...props }) {
+	const { openBreakdown } = useContextDisplay();
+	return /* @__PURE__ */ jsx(TooltipTrigger, {
+		closeOnClick: false,
+		render: /* @__PURE__ */ jsx("button", {
+			type: "button",
+			"data-slot": "context-display-trigger",
+			className: cn("inline-flex items-center rounded-md transition-colors", className),
+			onClick: (event) => {
+				onClick?.(event);
+				openBreakdown();
+			},
+			...props
+		}),
+		children
+	});
+}
+const getContextSegments = (usage) => {
+	if (!usage) return [];
+	return [
+		{
+			label: "Input",
+			tokens: usage.inputTokens ?? 0
+		},
+		{
+			label: "Cached input",
+			tokens: usage.cachedInputTokens ?? 0
+		},
+		{
+			label: "Output",
+			tokens: usage.outputTokens ?? 0
+		},
+		{
+			label: "Reasoning",
+			tokens: usage.reasoningTokens ?? 0
+		}
+	].filter((segment) => segment.tokens > 0);
+};
+function ContextDisplayContent({ side = "top", className }) {
+	const { usage, totalTokens, percent, modelContextWindow } = useContextDisplay();
+	const segments = getContextSegments(usage);
+	return /* @__PURE__ */ jsx(TooltipContent, {
+		side,
+		sideOffset: 8,
+		"data-slot": "context-display-popover",
+		className: cn("bg-popover text-popover-foreground block w-56 border p-3 text-left [&_[data-slot=tooltip-arrow]]:hidden", className),
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "text-xs",
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex items-baseline justify-between gap-6 whitespace-nowrap",
+					children: [/* @__PURE__ */ jsxs("span", {
+						className: getPercentColor(percent),
+						children: [Math.round(percent), "% full"]
+					}), /* @__PURE__ */ jsxs("span", {
+						className: "font-mono tabular-nums",
+						children: [
+							formatTokenCount(Math.min(totalTokens, modelContextWindow)),
+							" /",
+							" ",
+							formatTokenCount(modelContextWindow)
+						]
+					})]
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "bg-muted mt-2.5 h-1 overflow-hidden rounded-full",
+					children: /* @__PURE__ */ jsx("div", {
+						className: cn("h-full w-(--usage-width) rounded-full transition-[width] duration-300", totalTokens > 0 && "min-w-1", getBarColor(percent)),
+						style: { "--usage-width": `${percent}%` }
+					})
+				}),
+				segments.length > 0 && /* @__PURE__ */ jsx("div", {
+					className: "mt-3 grid gap-1.5",
+					children: segments.map((segment) => /* @__PURE__ */ jsxs("div", {
+						className: "flex items-baseline justify-between gap-6",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "text-muted-foreground",
+							children: segment.label
+						}), /* @__PURE__ */ jsx("span", {
+							className: "font-mono tabular-nums",
+							children: formatTokenCount(segment.tokens)
+						})]
+					}, segment.label))
+				})
+			]
+		})
+	});
+}
+const RING_SIZE = 18;
+const RING_STROKE = 2.5;
+const RING_RADIUS = 15.5 / 2;
+const RING_CIRCUMFERENCE = 2 * Math.PI * RING_RADIUS;
+function RingVisual() {
+	const { percent } = useContextDisplay();
+	return /* @__PURE__ */ jsxs("svg", {
+		"aria-hidden": "true",
+		width: RING_SIZE,
+		height: RING_SIZE,
+		viewBox: `0 0 ${RING_SIZE} ${RING_SIZE}`,
+		className: "-rotate-90",
+		children: [/* @__PURE__ */ jsx("circle", {
+			cx: RING_SIZE / 2,
+			cy: RING_SIZE / 2,
+			r: RING_RADIUS,
+			fill: "none",
+			strokeWidth: RING_STROKE,
+			className: "stroke-muted-foreground/30"
+		}), /* @__PURE__ */ jsx("circle", {
+			cx: RING_SIZE / 2,
+			cy: RING_SIZE / 2,
+			r: RING_RADIUS,
+			fill: "none",
+			strokeWidth: RING_STROKE,
+			strokeLinecap: "round",
+			strokeDasharray: RING_CIRCUMFERENCE,
+			strokeDashoffset: RING_CIRCUMFERENCE - percent / 100 * RING_CIRCUMFERENCE,
+			className: cn("transition-[stroke-dashoffset,stroke] duration-300", getStrokeColor(percent))
+		})]
+	});
+}
+function RingPercentLabel() {
+	const { percent } = useContextDisplay();
+	return /* @__PURE__ */ jsxs("span", {
+		className: "font-mono tabular-nums",
+		children: [Math.round(percent), "%"]
+	});
+}
+const ContextDisplayRing = ({ modelContextWindow, className, side, usage, resetKey }) => /* @__PURE__ */ jsxs(ContextDisplayRoot, {
+	modelContextWindow,
+	usage,
+	resetKey,
+	children: [/* @__PURE__ */ jsxs(ContextDisplayTrigger, {
+		className: cn("text-muted-foreground hover:text-foreground gap-1.5 px-1.5 py-1 text-xs", className),
+		"aria-label": "Context usage",
+		children: [/* @__PURE__ */ jsx(RingVisual, {}), /* @__PURE__ */ jsx(RingPercentLabel, {})]
+	}), /* @__PURE__ */ jsx(ContextDisplayContent, { side })]
+});
+function BarVisual() {
+	const { percent, totalTokens } = useContextDisplay();
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center gap-2",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "bg-muted-foreground/20 h-1.5 w-16 overflow-hidden rounded-full",
+			children: /* @__PURE__ */ jsx("div", {
+				className: cn("h-full rounded-full transition-all duration-300", getBarColor(percent)),
+				style: { width: `${percent}%` }
+			})
+		}), /* @__PURE__ */ jsxs("span", {
+			className: "text-muted-foreground text-xs tabular-nums",
+			children: [
+				formatTokenCount(totalTokens),
+				" (",
+				Math.round(percent),
+				"%)"
+			]
+		})]
+	});
+}
+const ContextDisplayBar = ({ modelContextWindow, className, side, usage, resetKey }) => /* @__PURE__ */ jsxs(ContextDisplayRoot, {
+	modelContextWindow,
+	usage,
+	resetKey,
+	children: [/* @__PURE__ */ jsx(ContextDisplayTrigger, {
+		className: cn("px-2 py-1", className),
+		"aria-label": "Context usage",
+		children: /* @__PURE__ */ jsx(BarVisual, {})
+	}), /* @__PURE__ */ jsx(ContextDisplayContent, { side })]
+});
+function TextVisual() {
+	const { totalTokens, modelContextWindow } = useContextDisplay();
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		formatTokenCount(totalTokens),
+		" / ",
+		formatTokenCount(modelContextWindow)
+	] });
+}
+const ContextDisplayText = ({ modelContextWindow, className, side, usage, resetKey }) => /* @__PURE__ */ jsxs(ContextDisplayRoot, {
+	modelContextWindow,
+	usage,
+	resetKey,
+	children: [/* @__PURE__ */ jsx(ContextDisplayTrigger, {
+		"aria-label": "Context usage",
+		className: cn("text-muted-foreground hover:bg-accent hover:text-accent-foreground px-2 py-1 font-mono text-xs tabular-nums", className),
+		children: /* @__PURE__ */ jsx(TextVisual, {})
+	}), /* @__PURE__ */ jsx(ContextDisplayContent, { side })]
+});
+const ContextDisplay = {};
+ContextDisplay.Root = ContextDisplayRoot;
+ContextDisplay.Trigger = ContextDisplayTrigger;
+ContextDisplay.Content = ContextDisplayContent;
+ContextDisplay.Ring = ContextDisplayRing;
+ContextDisplay.Bar = ContextDisplayBar;
+ContextDisplay.Text = ContextDisplayText;
+//#endregion
+export { ContextDisplay, ContextDisplayBar, ContextDisplayContent, ContextDisplayRing, ContextDisplayRoot, ContextDisplayText, ContextDisplayTrigger, context_display_exports };

package/dist/components/assistant-ui/elements/conversation-map.aui.d.ts

@@ -0,0 +1,9 @@
+declare namespace conversation_map_aui_d_exports {
+  export { ConversationMapAui };
+}
+export declare function ConversationMapAui({ side, className }: {
+  side?: "left" | "right";
+  className?: string;
+}): import("react").JSX.Element;
+//#endregion
+export { conversation_map_aui_d_exports };