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

package/dist/ai/compositions/redaction-marker/redaction-marker.js

@@ -0,0 +1,202 @@
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../../../components/ui/collapsible.js";
+import { collapsePanel, mono, paper } from "../../../components/assistant-ui/elements/surfaces.js";
+import { GuardrailNotice } from "../../../components/assistant-ui/elements/guardrail-notice.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "cn";
+import { ChevronDownIcon, CloudIcon } from "lucide-react";
+//#region src/ai/compositions/redaction-marker/redaction-marker.tsx
+const plural = (count, one, many) => `${count.toLocaleString("en-US")} ${count === 1 ? one : many}`;
+/** A category id as a label: `relationship_trouble` reads "relationship trouble". */
+const categoryLabel = (category) => category.replace(/[_-]+/g, " ").trim();
+/**
+* Facts with a React key each. Facts carry no id and the gate may pass the
+* same fact twice, so the key is the fact's content plus which repeat of that
+* content it is: unique, and stable while the list keeps its order.
+*/
+function keyFacts(facts) {
+	const seen = /* @__PURE__ */ new Map();
+	return facts.map((fact) => {
+		const content = JSON.stringify([fact.category, fact.statement]);
+		const repeat = seen.get(content) ?? 0;
+		seen.set(content, repeat + 1);
+		return {
+			fact,
+			key: `${content}#${repeat}`
+		};
+	});
+}
+/**
+* The withheld groups as shown: a category listed twice is one category, and
+* a name listed twice (two values under one field) is one withheld field.
+*/
+function mergeGroups(withheld) {
+	const byCategory = /* @__PURE__ */ new Map();
+	for (const group of withheld) {
+		const fields = byCategory.get(group.category) ?? /* @__PURE__ */ new Set();
+		for (const field of group.fields) fields.add(field);
+		byCategory.set(group.category, fields);
+	}
+	return [...byCategory].map(([category, fields]) => ({
+		category,
+		fields: [...fields]
+	})).filter((group) => group.fields.length > 0);
+}
+const timeFormat = new Intl.DateTimeFormat("en-US", {
+	dateStyle: "medium",
+	timeStyle: "short"
+});
+function formatProducedAt(iso) {
+	const time = Date.parse(iso);
+	return Number.isNaN(time) ? void 0 : timeFormat.format(time);
+}
+/**
+* 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.
+*/
+function RedactionMarker({ redaction, recipient = "the hosted agent", open, defaultOpen = false, onOpenChange, className }) {
+	const { summary, facts = [], gate, producedAt } = redaction;
+	const groups = mergeGroups(redaction.withheld);
+	const withheldCount = groups.reduce((sum, group) => sum + group.fields.length, 0);
+	const producedLabel = producedAt ? formatProducedAt(producedAt) : void 0;
+	return /* @__PURE__ */ jsx("section", {
+		"aria-label": "Gated summary",
+		"data-slot": "redaction-marker",
+		className: cn("@container/redaction-marker w-full", className),
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "grid grid-cols-1 items-start gap-3 @2xl/redaction-marker:grid-cols-[minmax(0,1fr)_22rem] @2xl/redaction-marker:items-stretch",
+			children: [/* @__PURE__ */ jsxs("article", {
+				"data-slot": "redaction-marker-summary",
+				className: cn(paper, "@container/redaction-summary flex min-w-0 flex-col gap-3 rounded-[20px] p-4"),
+				children: [
+					/* @__PURE__ */ jsxs("div", {
+						className: "grid grid-cols-[auto_minmax(0,1fr)] items-center gap-x-2.5 @sm/redaction-summary:grid-cols-[auto_minmax(0,1fr)_auto]",
+						children: [
+							/* @__PURE__ */ jsx("span", {
+								className: "flex size-7 shrink-0 items-center justify-center rounded-lg bg-info/12 text-info dark:text-info",
+								children: /* @__PURE__ */ jsx(CloudIcon, {
+									"aria-hidden": "true",
+									className: "size-3.5"
+								})
+							}),
+							/* @__PURE__ */ jsxs("div", {
+								className: "flex min-w-0 flex-col",
+								children: [/* @__PURE__ */ jsx("span", {
+									className: "text-[13.5px] font-medium",
+									children: "Gated summary"
+								}), /* @__PURE__ */ jsxs("span", {
+									className: "text-muted-foreground text-xs",
+									children: [
+										"What ",
+										recipient,
+										" received"
+									]
+								})]
+							}),
+							producedAt && producedLabel ? /* @__PURE__ */ jsx("time", {
+								dateTime: producedAt,
+								className: cn(mono, "text-muted-foreground col-start-2 mt-0.5 tabular-nums @sm/redaction-summary:col-start-3 @sm/redaction-summary:mt-0 @sm/redaction-summary:self-start"),
+								children: producedLabel
+							}) : null
+						]
+					}),
+					/* @__PURE__ */ jsx("p", {
+						"data-slot": "redaction-marker-summary-text",
+						className: "text-[13.5px] leading-relaxed break-words whitespace-pre-wrap",
+						children: summary
+					}),
+					facts.length > 0 ? /* @__PURE__ */ jsxs("div", {
+						className: "flex flex-col gap-1.5",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: cn(mono, "text-muted-foreground"),
+							children: "facts passed"
+						}), /* @__PURE__ */ jsx("ul", {
+							"aria-label": "Facts passed",
+							className: "grid grid-cols-[auto_minmax(0,1fr)] gap-x-3 gap-y-1.5",
+							children: keyFacts(facts).map(({ fact, key }) => /* @__PURE__ */ jsxs("li", {
+								className: "col-span-2 grid grid-cols-subgrid items-baseline text-[13px]",
+								children: [/* @__PURE__ */ jsx("span", {
+									className: cn(mono, "text-muted-foreground"),
+									children: categoryLabel(fact.category)
+								}), /* @__PURE__ */ jsx("span", {
+									className: "text-foreground/80 break-words",
+									children: fact.statement
+								})]
+							}, key))
+						})]
+					}) : null
+				]
+			}), /* @__PURE__ */ jsx(GuardrailNotice, {
+				className: "max-w-none",
+				title: withheldCount > 0 ? `${plural(withheldCount, "field", "fields")} withheld` : "Nothing withheld",
+				policy: gate ?? "privacy gate",
+				explanation: withheldCount > 0 ? `Kept on this machine: ${recipient} received the summary, not these values.` : "The gate passed the whole payload through.",
+				alternatives: [],
+				children: withheldCount > 0 ? /* @__PURE__ */ jsxs(Collapsible, {
+					...open === void 0 ? { defaultOpen } : { open },
+					onOpenChange: (next) => onOpenChange?.(next),
+					children: [/* @__PURE__ */ jsxs(CollapsibleTrigger, {
+						className: "group/withheld text-foreground/80 hover:text-foreground focus-visible:text-foreground focus-visible:ring-ring/30 -mx-1.5 flex w-[calc(100%+0.75rem)] items-center gap-1.5 rounded-md px-1.5 py-1 text-start text-[13px] outline-none transition-colors focus-visible:ring-2",
+						children: [/* @__PURE__ */ jsxs("span", {
+							className: "flex-1",
+							children: ["Field names", /* @__PURE__ */ jsxs("span", {
+								className: "text-muted-foreground",
+								children: [
+									" ",
+									"· ",
+									plural(groups.length, "category", "categories")
+								]
+							})]
+						}), /* @__PURE__ */ jsx(ChevronDownIcon, {
+							"aria-hidden": "true",
+							className: "text-muted-foreground size-3.5 transition-transform duration-200 group-data-[panel-open]/withheld:rotate-180 motion-reduce:transition-none"
+						})]
+					}), /* @__PURE__ */ jsx(CollapsibleContent, {
+						className: collapsePanel,
+						children: /* @__PURE__ */ jsx("ul", {
+							"aria-label": "Withheld fields",
+							className: "flex flex-col gap-3 pt-2",
+							children: groups.map((group) => /* @__PURE__ */ jsx(WithheldCategory, {
+								category: group.category,
+								fields: group.fields
+							}, group.category))
+						})
+					})]
+				}) : null
+			})]
+		})
+	});
+}
+function WithheldCategory({ category, fields }) {
+	const label = categoryLabel(category);
+	return /* @__PURE__ */ jsxs("li", {
+		"data-slot": "redaction-marker-category",
+		className: "flex flex-col gap-1.5",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex min-w-0 items-baseline gap-2",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "min-w-0 flex-1 truncate text-[13px] font-medium first-letter:uppercase",
+				children: label
+			}), /* @__PURE__ */ jsx("span", {
+				className: cn(mono, "text-muted-foreground shrink-0 tabular-nums"),
+				children: plural(fields.length, "field", "fields")
+			})]
+		}), /* @__PURE__ */ jsx("ul", {
+			"aria-label": `${label} fields`,
+			className: "flex flex-wrap gap-1",
+			children: fields.map((field) => /* @__PURE__ */ jsx("li", {
+				className: "min-w-0",
+				children: /* @__PURE__ */ jsx("code", {
+					title: field,
+					className: cn(mono, "text-foreground/80 bg-foreground/[0.05] block max-w-full truncate rounded-md px-1.5 py-0.5"),
+					children: field
+				})
+			}, field))
+		})]
+	});
+}
+//#endregion
+export { RedactionMarker };

package/dist/ai/compositions/run-inspector/json-view.js

@@ -0,0 +1,164 @@
+import * as React from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "cn";
+import { ChevronRightIcon } from "lucide-react";
+//#region src/ai/compositions/run-inspector/json-view.tsx
+function isContainer(value) {
+	return typeof value === "object" && value !== null;
+}
+function entriesOf(value) {
+	return Array.isArray(value) ? value.map((item, index) => [String(index), item]) : Object.entries(value);
+}
+function sizeLabel(value) {
+	if (Array.isArray(value)) return `${value.length} ${value.length === 1 ? "item" : "items"}`;
+	const count = Object.keys(value).length;
+	return `${count} ${count === 1 ? "key" : "keys"}`;
+}
+const TOKEN = {
+	key: "text-foreground",
+	string: "text-success dark:text-success",
+	number: "text-info dark:text-info",
+	literal: "text-violet-700 dark:text-violet-300",
+	punctuation: "text-muted-foreground"
+};
+function Primitive({ value }) {
+	if (typeof value === "string") return /* @__PURE__ */ jsx("span", {
+		className: TOKEN.string,
+		children: JSON.stringify(value)
+	});
+	if (typeof value === "number") return /* @__PURE__ */ jsx("span", {
+		className: TOKEN.number,
+		children: String(value)
+	});
+	return /* @__PURE__ */ jsx("span", {
+		className: TOKEN.literal,
+		children: String(value)
+	});
+}
+/** `"name": ` before a value inside an object; nothing inside an array or at the root. */
+function KeyLabel({ name }) {
+	if (name === null) return null;
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+		className: TOKEN.key,
+		children: JSON.stringify(name)
+	}), /* @__PURE__ */ jsx("span", {
+		className: TOKEN.punctuation,
+		children: ": "
+	})] });
+}
+const INDENT_REM = 1;
+function JsonNode({ name, spoken, value, depth, last, collapseDepth }) {
+	const comma = last ? null : /* @__PURE__ */ jsx("span", {
+		className: TOKEN.punctuation,
+		children: ","
+	});
+	const indent = { paddingInlineStart: `${depth * INDENT_REM + INDENT_REM}rem` };
+	if (!isContainer(value)) return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "json-view-row",
+		style: indent,
+		className: "wrap-anywhere",
+		children: [
+			/* @__PURE__ */ jsx(KeyLabel, { name }),
+			/* @__PURE__ */ jsx(Primitive, { value }),
+			comma
+		]
+	});
+	return /* @__PURE__ */ jsx(JsonContainer, {
+		name,
+		spoken,
+		value,
+		depth,
+		comma,
+		collapseDepth
+	});
+}
+function JsonContainer({ name, spoken, value, depth, comma, collapseDepth }) {
+	const entries = entriesOf(value);
+	const [open, setOpen] = React.useState(depth < collapseDepth);
+	const [opening, closing] = Array.isArray(value) ? ["[", "]"] : ["{", "}"];
+	const indent = { paddingInlineStart: `${depth * INDENT_REM + INDENT_REM}rem` };
+	if (entries.length === 0) return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "json-view-row",
+		style: indent,
+		children: [
+			/* @__PURE__ */ jsx(KeyLabel, { name }),
+			/* @__PURE__ */ jsxs("span", {
+				className: TOKEN.punctuation,
+				children: [opening, closing]
+			}),
+			comma
+		]
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "json-view-node",
+		children: [/* @__PURE__ */ jsxs("button", {
+			type: "button",
+			"aria-expanded": open,
+			"aria-label": `${spoken}, ${Array.isArray(value) ? "array" : "object"}, ${sizeLabel(value)}`,
+			onClick: () => setOpen(!open),
+			style: indent,
+			className: "group/json relative block w-full rounded-sm text-start outline-none hover:bg-foreground/[0.04] focus-visible:bg-foreground/[0.04] focus-visible:ring-1 focus-visible:ring-ring/70 focus-visible:ring-inset",
+			children: [
+				/* @__PURE__ */ jsx(ChevronRightIcon, {
+					"aria-hidden": "true",
+					className: cn("absolute top-[0.3125rem] size-3 text-muted-foreground transition-transform duration-150 motion-reduce:transition-none", open && "rotate-90"),
+					style: { insetInlineStart: `${depth * INDENT_REM + .125}rem` }
+				}),
+				/* @__PURE__ */ jsx(KeyLabel, { name }),
+				/* @__PURE__ */ jsx("span", {
+					className: TOKEN.punctuation,
+					children: opening
+				}),
+				open ? null : /* @__PURE__ */ jsxs(Fragment$1, { children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "mx-1 rounded-sm bg-foreground/[0.06] px-1 text-muted-foreground",
+						children: sizeLabel(value)
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: TOKEN.punctuation,
+						children: closing
+					}),
+					comma
+				] })
+			]
+		}), open ? /* @__PURE__ */ jsxs(Fragment$1, { children: [entries.map(([key, item], index) => /* @__PURE__ */ jsx(JsonNode, {
+			name: Array.isArray(value) ? null : key,
+			spoken: Array.isArray(value) ? `item ${index + 1}` : key,
+			value: item,
+			depth: depth + 1,
+			last: index === entries.length - 1,
+			collapseDepth
+		}, key)), /* @__PURE__ */ jsxs("div", {
+			"data-slot": "json-view-row",
+			style: indent,
+			children: [/* @__PURE__ */ jsx("span", {
+				className: TOKEN.punctuation,
+				children: closing
+			}), comma]
+		})] }) : null]
+	});
+}
+/**
+* A JSON value, pretty-printed: indented, with colored tokens, and every
+* object and array collapsible by its own disclosure button (Enter or Space).
+* Objects and arrays nested `collapseDepth` deep or deeper start collapsed,
+* their size shown in place. Long strings wrap; the view scrolls past 20rem.
+*/
+function JsonView({ value, label, collapseDepth = 2, className }) {
+	return /* @__PURE__ */ jsx("div", {
+		role: "group",
+		"aria-label": label,
+		"data-slot": "json-view",
+		className: cn("max-h-80 overflow-auto rounded-lg border border-border/60 bg-muted/40 py-2 ps-1.5 pe-3 font-mono text-[11.5px] leading-5", className),
+		children: /* @__PURE__ */ jsx(JsonNode, {
+			name: null,
+			spoken: label,
+			value,
+			depth: 0,
+			last: true,
+			collapseDepth
+		})
+	});
+}
+//#endregion
+export { JsonView };

package/dist/ai/compositions/run-inspector/run-inspector.d.ts

@@ -0,0 +1,66 @@
+import { Run } from "../../types.js";
+import * as React from "react";
+//#region src/ai/compositions/run-inspector/run-inspector.d.ts
+/** How the steps are drawn: a step list, or bars on the run's time axis. */
+export type RunInspectorView = "timeline" | "waterfall";
+export interface RunInspectorProps extends Omit<React.ComponentProps<"section">, "children" | "title" | "onError"> {
+  /** The run to inspect. */
+  run: Run;
+  /**
+   * The heading. Defaults to the run's objective; pass `null` when the
+   * surrounding surface (a sheet, a page) already names the run.
+   */
+  title?: React.ReactNode | null;
+  /** Accessible name of the inspector. Defaults to "Run" and the objective. */
+  label?: string;
+  /** The selected step's id (controlled). */
+  selectedStepId?: string | null;
+  /**
+   * The step selected on mount (uncontrolled). Defaults to the first failed
+   * step, else the running one, else the first.
+   */
+  defaultSelectedStepId?: string | null;
+  /** The owner selected a step, by click or with the arrow keys. */
+  onSelectedStepChange?: (stepId: string) => void;
+  /** The view (controlled). */
+  view?: RunInspectorView;
+  /** The view on mount (uncontrolled). Defaults to `timeline`. */
+  defaultView?: RunInspectorView;
+  onViewChange?: (view: RunInspectorView) => void;
+  /**
+   * The reference time (ISO 8601) a running run and its open steps are
+   * measured to. The app ticks it for a live run; without it they are
+   * measured to the latest time the record carries. The inspector never
+   * reads a clock.
+   */
+  now?: string;
+  /** Formats an ISO time for display. Defaults to the local time, such as 09:02:13. */
+  formatTime?: (iso: string) => string;
+  /** Show placeholders while the run loads. */
+  isLoading?: boolean;
+  /**
+   * Plain-text load error, such as a failed refresh. It shows in place under
+   * the header, and whatever of the run is loaded stays on screen.
+   */
+  error?: string | null;
+}
+/**
+ * The timeline of one agent run: its steps, reasoning, tool calls with their
+ * input and result, timings, errors and retries, and the run's usage.
+ *
+ * Two views of the steps, switched with a ScrubSelect: a timeline (the
+ * registry's ToolTimeline, one row per step with its StatusGlyph) and a
+ * waterfall (the registry's TraceWaterfall, each step a bar on the run's time
+ * axis). Either way the steps are a listbox: a click or the arrow keys (Home
+ * and End too) select a step, and its detail shows beside the steps on a wide
+ * container and below them on a narrow one. Plan steps show their progress
+ * with a Stepper and their items with CheckItems.
+ *
+ * Dumb: the run is a prop, and selection and view are UI state the app may
+ * control. It never reads a clock: pass `now` to measure a live run.
+ *
+ * Scale limit: both views mount every step - neither the timeline nor the
+ * waterfall virtualizes - so rendering cost grows with the run's step count.
+ */
+export declare function RunInspector(props: RunInspectorProps): React.JSX.Element;
+//#endregion