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

package/dist/ai/compositions/conversation-browser/conversation-browser.d.ts

@@ -0,0 +1,126 @@
+import { Run, RunStatus, TranscriptMessage, Usage } from "../../types.js";
+import { DataTableState } from "../../../compositions/data-table/data-table-state.js";
+import "../../../compositions/data-table/data-table.js";
+import { RunInspectorProps } from "../run-inspector/run-inspector.js";
+import { TranscriptViewerProps } from "../transcript-viewer/transcript-viewer.js";
+import * as React from "react";
+//#region src/ai/compositions/conversation-browser/conversation-browser.d.ts
+type ConversationRowBase = {
+  /** Stable id: the session id for a thread, the task id for a run. */
+  readonly id: string;
+  /** The thread's title, or the run's objective. */
+  readonly title: string;
+  /** The agent, as a display name, such as "Email agent". */
+  readonly agent: string;
+  /** When the thread or run started (ISO 8601). */
+  readonly startedAt: string;
+  /** Where it stands. A thread takes the status of its latest run. */
+  readonly status: RunStatus;
+  /** How many messages it holds, when known. */
+  readonly messageCount?: number;
+  /** Model usage for the whole thread or run, when recorded. */
+  readonly usage?: Usage;
+};
+/** A conversation thread. It opens in a TranscriptViewer. */
+export type ConversationThreadRow = ConversationRowBase & {
+  readonly kind: "thread";
+  /** The conversation, once loaded. Until then the sheet shows a placeholder. */
+  readonly messages?: readonly TranscriptMessage[];
+};
+/** An agent run. It opens in a RunInspector. */
+export type ConversationRunRow = ConversationRowBase & {
+  readonly kind: "run";
+  /** The run, once loaded. Until then the sheet shows a placeholder. */
+  readonly run?: Run;
+};
+/** One row of the browser: a thread or a run. */
+export type ConversationRow = ConversationThreadRow | ConversationRunRow;
+type ConversationBrowserBaseProps = {
+  /** The rows: every row in client mode, the current page in server mode. */
+  rows: readonly ConversationRow[];
+  /** Accessible name of the table, also used for its search field. Defaults to "Conversations". */
+  label?: string;
+  /**
+   * The row open in the sheet, by id (controlled). When it names a row not
+   * in `rows` (for example after a server-mode page change), the sheet stays
+   * closed and `onOpenChange` fires with `null` so the app's state converges.
+   */
+  openId?: string | null;
+  /** The row open on mount (uncontrolled). */
+  defaultOpenId?: string | null;
+  /**
+   * The owner opened a row (its id) or closed the sheet (`null`). Load the
+   * row's `messages` or `run` here if the rows do not carry them yet.
+   */
+  onOpenChange?: (id: string | null) => void;
+  /** Plain-text error loading the open row's transcript or run, shown in the sheet. */
+  detailError?: string | null;
+  /** Offer a retry next to `detailError`. */
+  onDetailRetry?: () => void;
+  /** The agent filter's choices. Defaults to the agents in `rows`; pass them in server mode. */
+  agents?: readonly string[];
+  /**
+   * Shows a BranchMenu beside the table: one section per agent, holding its
+   * threads and runs. In server mode these are the agents and threads on
+   * the current page (the `rows` passed in), not the whole result set.
+   */
+  sideNav?: boolean;
+  /** Formats an ISO time for the Started column and the sheet. Defaults to the local date and time. */
+  formatTime?: (iso: string) => string;
+  /** The rows are loading (see DataTable). */
+  isLoading?: boolean;
+  /** A load error for the rows (see DataTable). */
+  error?: string | null;
+  /** Shows a retry with `error`. */
+  onRetry?: () => void;
+  /** The empty state's title when there are no rows. */
+  emptyLabel?: string;
+  /**
+   * The table's scroll area's maximum height (any CSS length); rows virtualize
+   * inside it. Under 40rem wide the browser drops it and the page scrolls
+   * instead: a nested scroll box on a phone cuts rows in half.
+   */
+  maxHeight?: string;
+  /** Props passed to the RunInspector a run row opens in. */
+  runInspectorProps?: Partial<Omit<RunInspectorProps, "run" | "title" | "isLoading" | "error">>;
+  /** Props passed to the TranscriptViewer a thread row opens in. */
+  transcriptProps?: Partial<Omit<TranscriptViewerProps, "messages" | "isLoading" | "error">>;
+  className?: string;
+};
+/** Client mode: the table searches, filters, sorts and pages `rows` itself. */
+export type ConversationBrowserClientProps = ConversationBrowserBaseProps & {
+  mode?: "client";
+  /** Table state (controlled). */
+  state?: DataTableState;
+  /** The starting table state. */
+  defaultState?: Partial<DataTableState>;
+  onStateChange?: (state: DataTableState) => void;
+  total?: never;
+};
+/**
+ * Server mode: the app owns the query. Every search, filter, sort and page
+ * change goes to `onStateChange`; `rows` is the current page and `total` the
+ * number of matches.
+ */
+export type ConversationBrowserServerProps = ConversationBrowserBaseProps & {
+  mode: "server";
+  state: DataTableState;
+  onStateChange: (state: DataTableState) => void;
+  total: number;
+  defaultState?: never;
+};
+export type ConversationBrowserProps = ConversationBrowserClientProps | ConversationBrowserServerProps;
+/**
+ * A DataTable of an agent's threads and runs: the conversation, agent,
+ * start time, status (StatusGlyph), message count and usage, with search
+ * and filters by agent and status. Opening a row (a click anywhere on it, or
+ * Enter on its title) shows a Sheet with a TranscriptViewer for a thread or a
+ * RunInspector for a run. With `sideNav`, a BranchMenu lists the agents and,
+ * under each, its threads and runs.
+ *
+ * Dumb: rows come from props, and a row's transcript or run arrives on the
+ * row once the app loads it (`onOpenChange` says which). Server mode hands
+ * every query change to `onStateChange`, as DataTable does.
+ */
+export declare function ConversationBrowser(props: ConversationBrowserProps): React.JSX.Element;
+//#endregion

package/dist/ai/compositions/conversation-browser/conversation-browser.js

@@ -0,0 +1,364 @@
+import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from "../../../components/ui/sheet.js";
+import { DataTable, createDataTableColumnHelper } from "../../../compositions/data-table/data-table.js";
+import { ErrorState, Loading } from "../../../compositions/state-blocks/state-blocks.js";
+import { BranchMenu } from "../../../motion/branch-menu/branch-menu.js";
+import { StatusGlyph } from "../../../motion/status-glyph/status-glyph.js";
+import { formatCost, formatTokens } from "../usage-meter/usage-format.js";
+import { RunInspector } from "../run-inspector/run-inspector.js";
+import { TranscriptViewer } from "../transcript-viewer/transcript-viewer.js";
+import * as React from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "cn";
+import { BotIcon, MessagesSquareIcon, WorkflowIcon } from "lucide-react";
+import { useControllableValue } from "ahooks";
+//#region src/ai/compositions/conversation-browser/conversation-browser.tsx
+const dateTimeFormat = new Intl.DateTimeFormat("en-GB", {
+	day: "numeric",
+	month: "short",
+	hour: "2-digit",
+	minute: "2-digit"
+});
+function defaultFormatTime(iso) {
+	const ms = Date.parse(iso);
+	return Number.isNaN(ms) ? iso : dateTimeFormat.format(ms);
+}
+const STATUS_GLYPH = {
+	pending: "pending",
+	running: "running",
+	waiting: "pending",
+	succeeded: "done",
+	failed: "failed",
+	cancelled: "cancelled"
+};
+/** Status words for a thread or run in the table and its filter. */
+const CONVERSATION_STATUS_LABEL = {
+	pending: "Queued",
+	running: "Running",
+	waiting: "Waiting",
+	succeeded: "Done",
+	failed: "Failed",
+	cancelled: "Cancelled"
+};
+const STATUS_ORDER = [
+	"running",
+	"waiting",
+	"pending",
+	"succeeded",
+	"failed",
+	"cancelled"
+];
+const KIND_LABEL = {
+	thread: "Thread",
+	run: "Run"
+};
+function totalTokens(usage) {
+	if (!usage || usage.inputTokens === void 0 && usage.outputTokens === void 0) return null;
+	return (usage.inputTokens ?? 0) + (usage.outputTokens ?? 0);
+}
+const helper = createDataTableColumnHelper();
+function buildColumns({ agents, formatTime, open, sideNav }) {
+	return helper.columns([
+		helper.accessor("title", {
+			header: "Conversation",
+			cell: ({ row }) => {
+				const item = row.original;
+				const Icon = item.kind === "run" ? WorkflowIcon : MessagesSquareIcon;
+				return /* @__PURE__ */ jsxs("div", {
+					className: "flex min-w-0 flex-col gap-0.5",
+					children: [/* @__PURE__ */ jsxs("button", {
+						type: "button",
+						"data-slot": "conversation-browser-open",
+						onClick: () => open(item.id),
+						className: "flex min-w-0 items-center gap-2 text-start font-medium text-foreground outline-none after:absolute after:inset-0 after:rounded-[inherit] focus-visible:after:ring-1 focus-visible:after:ring-ring/40 focus-visible:after:ring-inset",
+						children: [
+							/* @__PURE__ */ jsx(Icon, {
+								"aria-hidden": "true",
+								className: "size-3.5 shrink-0 text-muted-foreground"
+							}),
+							/* @__PURE__ */ jsx("span", {
+								className: "truncate",
+								children: item.title
+							}),
+							/* @__PURE__ */ jsxs("span", {
+								className: "sr-only",
+								children: [", ", KIND_LABEL[item.kind].toLowerCase()]
+							})
+						]
+					}), /* @__PURE__ */ jsxs("span", {
+						className: "truncate ps-5.5 text-muted-foreground @min-[640px]/data-table-scroll:hidden",
+						children: [
+							item.agent,
+							" · ",
+							formatTime(item.startedAt)
+						]
+					})]
+				});
+			}
+		}),
+		helper.accessor("agent", {
+			header: "Agent",
+			meta: {
+				width: "8rem",
+				hideBelow: "sm",
+				...agents.length > 0 ? { filter: { options: agents.map((agent) => ({
+					label: agent,
+					value: agent
+				})) } } : {}
+			}
+		}),
+		helper.accessor("startedAt", {
+			header: "Started",
+			sortFn: "text",
+			cell: ({ getValue }) => /* @__PURE__ */ jsx("time", {
+				dateTime: getValue(),
+				className: "tabular-nums",
+				children: formatTime(getValue())
+			}),
+			meta: {
+				width: "6.75rem",
+				hideBelow: "sm"
+			}
+		}),
+		helper.accessor("status", {
+			header: "Status",
+			cell: ({ row }) => /* @__PURE__ */ jsxs("span", {
+				className: "flex items-center gap-1.5",
+				children: [/* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					className: "flex shrink-0",
+					children: /* @__PURE__ */ jsx(StatusGlyph, {
+						status: STATUS_GLYPH[row.original.status],
+						size: 14
+					})
+				}), CONVERSATION_STATUS_LABEL[row.original.status]]
+			}),
+			meta: {
+				width: "7rem",
+				filter: { options: STATUS_ORDER.map((status) => ({
+					label: CONVERSATION_STATUS_LABEL[status],
+					value: status
+				})) }
+			}
+		}),
+		helper.accessor((row) => row.messageCount ?? null, {
+			id: "messages",
+			header: "Messages",
+			cell: ({ getValue }) => {
+				const count = getValue();
+				return count === null ? /* @__PURE__ */ jsx("span", {
+					className: "text-muted-foreground",
+					children: "-"
+				}) : count;
+			},
+			meta: {
+				label: "Messages",
+				width: "7rem",
+				align: "end",
+				hideBelow: sideNav ? "lg" : "md"
+			}
+		}),
+		helper.accessor((row) => totalTokens(row.usage), {
+			id: "usage",
+			header: "Usage",
+			cell: ({ row }) => {
+				const tokens = totalTokens(row.original.usage);
+				const cost = row.original.usage?.costUsd;
+				if (tokens === null && cost === void 0) return /* @__PURE__ */ jsx("span", {
+					className: "text-muted-foreground",
+					children: "-"
+				});
+				return /* @__PURE__ */ jsxs("span", {
+					className: "whitespace-nowrap",
+					children: [
+						tokens === null ? null : `${formatTokens(tokens)} tokens`,
+						tokens !== null && cost !== void 0 ? /* @__PURE__ */ jsx("span", {
+							"aria-hidden": "true",
+							className: "text-muted-foreground",
+							children: " · "
+						}) : null,
+						cost === void 0 ? null : /* @__PURE__ */ jsx("span", {
+							className: "text-muted-foreground",
+							children: formatCost(cost)
+						})
+					]
+				});
+			},
+			meta: {
+				label: "Usage",
+				width: "9.5rem",
+				align: "end",
+				hideBelow: "md"
+			}
+		})
+	]);
+}
+/**
+* The facts under the sheet's title. A run's status is left to the
+* RunInspector's header just below, which words it in full with its glyph.
+*/
+function rowFacts(row, formatTime) {
+	return [
+		KIND_LABEL[row.kind],
+		row.agent,
+		`Started ${formatTime(row.startedAt)}`,
+		row.kind === "run" ? null : CONVERSATION_STATUS_LABEL[row.status],
+		row.messageCount === void 0 ? null : `${row.messageCount} ${row.messageCount === 1 ? "message" : "messages"}`
+	].filter((fact) => fact !== null).join(" · ");
+}
+function SheetBody({ row, detailError, onDetailRetry, runInspectorProps, transcriptProps }) {
+	if (row.kind === "thread") {
+		if (detailError && !row.messages) return /* @__PURE__ */ jsx("div", {
+			className: "p-4",
+			children: /* @__PURE__ */ jsx(ErrorState, {
+				title: detailError,
+				onRetry: onDetailRetry
+			})
+		});
+		return /* @__PURE__ */ jsx(TranscriptViewer, {
+			...transcriptProps,
+			messages: row.messages ?? [],
+			isLoading: row.messages === void 0,
+			error: row.messages ? detailError ?? null : null,
+			onRetry: onDetailRetry,
+			label: transcriptProps?.label ?? `Transcript: ${row.title}`,
+			className: cn("min-h-0 flex-1 p-4", transcriptProps?.className)
+		});
+	}
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "conversation-browser-run",
+		className: "min-h-0 flex-1 overflow-y-auto p-4",
+		children: row.run ? /* @__PURE__ */ jsx(RunInspector, {
+			...runInspectorProps,
+			run: row.run,
+			title: null,
+			error: detailError ?? null
+		}) : detailError ? /* @__PURE__ */ jsx(ErrorState, {
+			title: detailError,
+			onRetry: onDetailRetry
+		}) : /* @__PURE__ */ jsx(Loading, {
+			label: "Loading run",
+			variant: "text",
+			rows: 6
+		})
+	});
+}
+/**
+* A DataTable of an agent's threads and runs: the conversation, agent,
+* start time, status (StatusGlyph), message count and usage, with search
+* and filters by agent and status. Opening a row (a click anywhere on it, or
+* Enter on its title) shows a Sheet with a TranscriptViewer for a thread or a
+* RunInspector for a run. With `sideNav`, a BranchMenu lists the agents and,
+* under each, its threads and runs.
+*
+* Dumb: rows come from props, and a row's transcript or run arrives on the
+* row once the app loads it (`onOpenChange` says which). Server mode hands
+* every query change to `onStateChange`, as DataTable does.
+*/
+function ConversationBrowser(props) {
+	const { rows, label = "Conversations", openId: _openId, defaultOpenId: _defaultOpenId, onOpenChange: _onOpenChange, detailError, onDetailRetry, agents: _agents, sideNav = false, formatTime = defaultFormatTime, isLoading, error, onRetry, emptyLabel = "No conversations yet", maxHeight, runInspectorProps, transcriptProps, className } = props;
+	const controllable = {};
+	if (_openId !== void 0) controllable.openId = _openId;
+	if (_defaultOpenId !== void 0) controllable.defaultOpenId = _defaultOpenId;
+	if (_onOpenChange) controllable.onOpenChange = _onOpenChange;
+	const [openId, setOpenId] = useControllableValue(controllable, {
+		valuePropName: "openId",
+		defaultValuePropName: "defaultOpenId",
+		trigger: "onOpenChange",
+		defaultValue: null
+	});
+	const openRow = openId ? rows.find((row) => row.id === openId) : void 0;
+	React.useEffect(() => {
+		if (openId && !openRow) setOpenId(null);
+	}, [
+		openId,
+		openRow,
+		setOpenId
+	]);
+	const [shownRow, setShownRow] = React.useState(openRow);
+	if (openRow && openRow !== shownRow) setShownRow(openRow);
+	const agents = React.useMemo(() => _agents ?? [...new Set(rows.map((row) => row.agent))].sort(), [_agents, rows]);
+	const openRef = React.useRef(setOpenId);
+	openRef.current = setOpenId;
+	const formatRef = React.useRef(formatTime);
+	formatRef.current = formatTime;
+	const columns = React.useMemo(() => buildColumns({
+		agents,
+		formatTime: (iso) => formatRef.current(iso),
+		open: (id) => openRef.current(id),
+		sideNav
+	}), [agents, sideNav]);
+	const navItems = React.useMemo(() => agents.map((agent) => ({
+		id: `agent:${agent}`,
+		label: agent,
+		icon: /* @__PURE__ */ jsx(BotIcon, {}),
+		children: rows.filter((row) => row.agent === agent).map((row) => ({
+			id: row.id,
+			label: row.title,
+			icon: row.kind === "run" ? /* @__PURE__ */ jsx(WorkflowIcon, {}) : /* @__PURE__ */ jsx(MessagesSquareIcon, {})
+		}))
+	})), [agents, rows]);
+	const tableModeProps = props.mode === "server" ? {
+		mode: "server",
+		state: props.state,
+		onStateChange: props.onStateChange,
+		total: props.total
+	} : {
+		...props.state ? { state: props.state } : {},
+		...props.defaultState ? { defaultState: props.defaultState } : {},
+		...props.onStateChange ? { onStateChange: props.onStateChange } : {}
+	};
+	const sheetRef = React.useRef(null);
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "conversation-browser",
+		className: cn("@container/browser min-w-0", className),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: cn("grid min-w-0 gap-4", sideNav && "@3xl/browser:grid-cols-[13rem_minmax(0,1fr)] @3xl/browser:items-start"),
+			children: [sideNav ? /* @__PURE__ */ jsx(BranchMenu, {
+				label: `${label} by agent`,
+				items: navItems,
+				active: openId ?? null,
+				onActiveChange: (id) => setOpenId(id),
+				className: "min-w-0 @max-3xl/browser:-ms-3"
+			}) : null, /* @__PURE__ */ jsx(DataTable, {
+				label,
+				columns,
+				rows,
+				getRowId: (row) => row.id,
+				getRowLabel: (row) => row.title,
+				isLoading,
+				error,
+				onRetry,
+				emptyLabel,
+				emptyDescription: "Threads and runs show here once an agent records any.",
+				searchPlaceholder: "Search conversations...",
+				...maxHeight ? { maxHeight } : {},
+				className: "min-w-0 [&_tbody_tr]:relative [&_tbody_tr:has([data-slot=conversation-browser-open]:focus-visible)]:bg-muted/50 @max-[40rem]/browser:**:data-[slot=data-table-scroll]:max-h-none",
+				...tableModeProps
+			})]
+		}), /* @__PURE__ */ jsx(Sheet, {
+			open: openRow !== void 0,
+			onOpenChange: (open) => {
+				if (!open) setOpenId(null);
+			},
+			children: /* @__PURE__ */ jsx(SheetContent, {
+				side: "right",
+				"data-slot": "conversation-browser-sheet",
+				ref: sheetRef,
+				initialFocus: sheetRef,
+				className: "gap-0 outline-none data-[side=right]:w-full data-[side=right]:sm:max-w-4xl",
+				children: shownRow ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(SheetHeader, {
+					className: "border-b p-4 pr-12",
+					children: [/* @__PURE__ */ jsx(SheetTitle, { children: shownRow.title }), /* @__PURE__ */ jsx(SheetDescription, { children: rowFacts(shownRow, formatTime) })]
+				}), /* @__PURE__ */ jsx(SheetBody, {
+					row: shownRow,
+					detailError,
+					onDetailRetry,
+					runInspectorProps,
+					transcriptProps
+				})] }) : null
+			})
+		})]
+	});
+}
+//#endregion
+export { ConversationBrowser };

package/dist/ai/compositions/redaction-marker/redaction-marker.d.ts

@@ -0,0 +1,42 @@
+import { Redaction, WithheldGroup } from "../../types.js";
+//#region src/ai/compositions/redaction-marker/redaction-marker.d.ts
+/**
+ * `T` with every key `Shape` does not name typed `never`: an object that
+ * carries any key beyond the contract fails to type-check, even when it is
+ * passed through a variable (where TypeScript skips its excess-property check).
+ */
+type Only<T, Shape> = T & { readonly [Key in Exclude<keyof T, keyof Shape>]: never; };
+/**
+ * A Redaction with nothing beyond its contract, down to each withheld group:
+ * field names and categories only. A withheld value has no key to ride in, so
+ * the props cannot carry one (RFC-02 Design 4, Security Considerations).
+ */
+export type GatedRedaction<R extends Redaction> = Only<R, Redaction> & {
+  readonly withheld: readonly Only<R["withheld"][number], WithheldGroup>[];
+};
+export interface RedactionMarkerProps<R extends Redaction = Redaction> {
+  /**
+   * The gated summary and what the gate withheld, as names grouped by
+   * category. The type admits names and counts only, never withheld values.
+   */
+  redaction: GatedRedaction<R>;
+  /** Who received the summary, in running text. Defaults to "the hosted agent". */
+  recipient?: string;
+  /** Whether the withheld field list is expanded (controlled). */
+  open?: boolean;
+  /** Whether the withheld field list starts expanded (uncontrolled). */
+  defaultOpen?: boolean;
+  /** Called when the owner expands or collapses the withheld field list. */
+  onOpenChange?: (open: boolean) => void;
+  className?: string;
+}
+/**
+ * What a privacy gate let a hosted agent see: the gated summary (and the
+ * facts it itemized), next to a "N fields withheld" marker. The marker
+ * expands to the withheld field names grouped by category, with counts. The
+ * props carry names only; a withheld value cannot be passed in.
+ *
+ * Built on the registry's GuardrailNotice.
+ */
+export declare function RedactionMarker<const R extends Redaction>({ redaction, recipient, open, defaultOpen, onOpenChange, className }: RedactionMarkerProps<R>): import("react").JSX.Element;
+//#endregion