cortena-ui 1.13.0 → 1.14.0

package/CHANGELOG.md

@@ -3,6 +3,42 @@
 Notable changes per release. Versions before 1.6.0 are recorded in the git log
 and in `../../CONSUMING.md`; this file starts where the changelog does.
 
+## 1.14.0
+
+### Added
+
+- **`Actor` — one component for "who did this"** (DESIGN-120). The protocol
+  records the acting user and `via` on every write (§20, audit rule P-26) and
+  expects a trail to read "Name (Agent)". Seven extensions were each about to
+  format that themselves: Tasks prints the stored string raw as
+  `Amit (claude-code)`, Assure keeps a rich JSON actor and shows none of it.
+  `Actor` takes the resolved actor — `{ userId, displayName, via, avatarUrl,
+  at, surface }` — and **has no string input**: there is no `label`, `text` or
+  `children` prop, because a consumer that can pass a preformatted label is
+  how the inconsistency arrived. The rules it encodes: a direct action is the
+  name alone; an agent action is the name and a fixed ` (Agent)` in the
+  caption/muted style, never the agent's technical id or session; `system` is
+  `System`; a user with no stored display name is `Someone`, never a raw id.
+  Three sizes — `inline` for a sentence, `cell` for a list, `head` for a feed
+  row or comment with avatar and time — and a hover showing surface and time
+  wherever either is given. Times are `en-GB` by default and hand-written, the
+  same way `DateField` formats dates, so a trail does not read differently on
+  every machine; `locale` overrides it. `title` and `dangerouslySetInnerHTML`
+  are omitted from the props alongside `children`. The hover is not the only
+  way to reach what it says: the same text is in the DOM visually hidden, in
+  document order after the name, so a screen reader reads it and a `gridcell`
+  or link around the actor takes it into its own name. The avatar's initials
+  and the visible timestamp are `aria-hidden`, so neither is announced twice.
+- **`actorColumn()`** in `cortena-ui/data-table`, so a list needs no custom
+  cell. It is an accessor column over the label rather than a display column,
+  so the value the table sorts, filters, searches and exports is the string
+  the cell paints. The header defaults to `By`.
+- **`actorLabel`, `actorName`, `actorTime`** and the three wordings
+  (`ACTOR_AGENT_SUFFIX`, `ACTOR_SYSTEM_NAME`, `ACTOR_UNKNOWN_NAME`) are
+  exported for the places a React node cannot go — an `aria-label`, a CSV
+  cell, a `title`. `Actor` and its types come from `cortena-ui/core` and the
+  root barrel; `actorColumn` from `cortena-ui/data-table`.
+
 ## 1.13.0
 
 ### Added

package/README.md

@@ -251,6 +251,94 @@ move the theme/help cluster **and** whatever `agentSlot` renders, which is what
 the old per-extension `className="bottom-22 lg:bottom-6"` workaround could not
 do.
 
+## Attribution: who did this
+
+`Actor` is the only thing in the fleet that turns a recorded actor into words
+(DESIGN-120, protocol §20 / audit rule P-26). Every extension stores the same
+two columns on every write — the acting user and `via` — and every screen that
+shows a trail has to answer the same question: did a person do this, or did
+their agent? Seven extensions answering it themselves is seven answers, and
+the one that prints the stored string raw shows `Amit (claude-code)`, which
+names a CLI and says nothing about whether a human was in the loop.
+
+```tsx
+<p>
+  <Actor userId={row.actorUserId} displayName={row.actorName} via={row.actorVia} /> changed the status
+</p>
+```
+
+**The input is the actor, never a label.** There is no `label`, `text` or
+`children` prop and there will not be one: a consumer that can pass a
+preformatted string eventually passes a differently formatted one, which is
+exactly how the inconsistency arrived. The rules live in the component:
+
+| `via` | `displayName` | reads as |
+| --- | --- | --- |
+| `user` | "Amit Sharma" | Amit Sharma |
+| `user` | missing or blank | Someone |
+| `agent` | "Amit Sharma" | Amit Sharma **(Agent)** |
+| `agent` | missing or blank | Someone **(Agent)** |
+| `system` | anything | System |
+
+The suffix is fixed and caption-sized in `--ds-muted-foreground`. It is never
+the agent's technical id or session — which agent ran is an audit question and
+`actorAgentId` answers it; on screen the only thing that changes the reader's
+next action is *that* an agent acted. An unknown or deleted user is `Someone`
+and never the id: the server-side `actorLabel` in `packages/shared` falls back
+to the id because a log line has no other anchor, and a screen does.
+
+Three sizes. `inline` is a run of text in a sentence. `cell` is avatar-less
+and one line, and truncates on its own inline-block box, inside the `td` that
+truncates around it. `head` is avatar, name and time, for a feed row or a
+comment header — `avatar={false}` keeps the stacked shape without the picture,
+for a comment thread that has already shown it once. `at` and `surface` show on
+hover at every size.
+
+Times format as `14 Sep 2026, 19:32`: `en-GB` by default and hand-written, the
+same way `DateField` does it, so one date is not spelled two ways on two
+screens and a trail does not read differently on every machine. The zone stays
+local, and `locale` overrides the format.
+
+`title` and `dangerouslySetInnerHTML` are omitted from the props alongside
+`children`, for the same reason: every route by which a caller could put its
+own words on screen is closed.
+
+The hover is not the only way to reach what it says. The same text is also in
+the DOM, visually hidden (`sr-only`), in document order right after the name,
+so a screen reader reads it where it is relevant and any ancestor whose role
+takes its name from its contents — the `gridcell` a DataTable cell sits in, a
+link, a button — includes it in that name. The trigger stays a plain `span`:
+no tab stop, because making every actor in a 200-row grid focusable would
+wreck keyboard navigation of it, and no `aria-label`, because a `role=generic`
+element's label is dropped rather than announced. The avatar's initials and
+`head`'s visible timestamp are `aria-hidden`, so neither is read twice.
+
+A list uses the column helper rather than a custom cell:
+
+```tsx
+const helper = createColumnHelper<AuditRow>();
+const columns = helper.columns([
+  helper.accessor("action", { header: "Action", meta: { fill: true } }),
+  actorColumn(helper, {
+    actor: (row) => ({
+      userId: row.actorUserId,
+      displayName: row.actorName,
+      via: row.actorVia,
+      at: row.at,
+      surface: row.surface,
+    }),
+  }),
+]);
+```
+
+It is an accessor column over `actorLabel`, not a display column, so the value
+the table sorts, filters, searches and exports is the same string the cell
+paints — a table sorted by **By** lands where the reader expects, and a CSV of
+it reads like the screen. The header defaults to `By`.
+
+`actorLabel`, `actorName` and `actorTime` are exported for the places a React
+node cannot go: an `aria-label`, a CSV cell, a `title`.
+
 ## The agent pop-up
 
 `AgentChatPopup` is the extension's own Cortena Agent, in the corner of every

package/dist/a2ui/views.js

@@ -23,8 +23,8 @@ import { DateField, formatDateISO, parseDateISO } from "../components/date-field
 import { DataTable } from "../components/data-table/data-table.js";
 import { Chart } from "../components/chart/chart.js";
 import { Markdown } from "../components/markdown.js";
-import { AlertTriangle, CheckCircle2, Info, OctagonAlert, Terminal } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { AlertTriangle, CheckCircle2, Info, OctagonAlert, Terminal } from "lucide-react";
 import * as React from "react";
 //#region src/a2ui/views.tsx
 /**

package/dist/components/accordion.js

@@ -1,9 +1,9 @@
 "use client";
 "use client";
 import { cn } from "../lib/cn.js";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Accordion } from "@base-ui/react/accordion";
 import { ChevronDown } from "lucide-react";
-import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/accordion.tsx
 /**
 * Accordion.

package/dist/components/actor.d.ts

@@ -0,0 +1,103 @@
+"use client";
+import * as React from "react";
+//#region src/components/actor.d.ts
+/**
+ * Who acted, on one screen, in one component (DESIGN-120, protocol §20 /
+ * audit rule P-26).
+ *
+ * Every extension records the same two things on every write — the acting
+ * user and `via` — and every screen that shows a trail has to answer the same
+ * question: did a person do this, or did their agent? Seven extensions
+ * formatting that themselves is seven answers, and the one that prints the
+ * stored string raw shows `Amit (claude-code)`, which tells an operator the
+ * name of a CLI and not whether a human was in the loop.
+ *
+ * So the input is the resolved actor, never a label. There is deliberately no
+ * `label`, `text` or `children` prop: a consumer that could pass a string
+ * would eventually pass a differently formatted one, which is exactly how the
+ * inconsistency arrived. The rules below live here and nowhere else.
+ */
+/**
+ * How the principal acted. `user` and `agent` are the protocol's two values
+ * (packages/shared `ActorVia`); `system` is the display-only third for a write
+ * the platform made on nobody's behalf — a retention sweep, a migration.
+ */
+export type ActorVia = "user" | "agent" | "system";
+/**
+ * inline — text only, sits inside a sentence: "Amit (Agent) changed the status".
+ * cell   — a DataTable cell: avatar-less, one line, truncates.
+ * head   — avatar, name and time, for a feed row or a comment header.
+ */
+export type ActorSize = "inline" | "cell" | "head";
+/**
+ * The suffix, fixed, in one place, so no screen can invent its own. It is
+ * never the agent's technical id or session: which agent ran is an audit
+ * question, and the audit table has `actorAgentId` for it. On screen the only
+ * thing that changes the reader's next action is *that* an agent acted.
+ */
+export declare const ACTOR_AGENT_SUFFIX = "(Agent)";
+/** What `via: "system"` reads as, whatever name came with the row. */
+export declare const ACTOR_SYSTEM_NAME = "System";
+/**
+ * An unknown or deleted user. Never the id: `usr_9f2c…` in a feed reads as
+ * noise to everyone who is not debugging, and the ids are in the audit table
+ * for the one person who is. The server-side `actorLabel` falls back to the
+ * id because a log line has no other anchor; a screen does.
+ */
+export declare const ACTOR_UNKNOWN_NAME = "Someone";
+/** What the shared actor resolver produces and what the list APIs return. */
+export interface ActorValue {
+  /** The acting principal. Null for a system write, or a row that lost its user. */
+  userId: string | null;
+  /** The stored display name. Absent or empty means unknown or deleted. */
+  displayName?: string | null;
+  via: ActorVia;
+  avatarUrl?: string;
+  /** When it happened. Shown in `head` and in the hover for every size. */
+  at?: string | Date;
+  /** Where it happened — "Web", "MCP", "Tasks › Sprint 4". Hover only. */
+  surface?: string;
+}
+/** The name alone, before the suffix. */
+export declare function actorName(actor: Pick<ActorValue, "displayName" | "via">): string;
+/**
+ * The full label as a string: `"Amit"`, `"Amit (Agent)"`, `"System"`,
+ * `"Someone (Agent)"`.
+ *
+ * Exported for the places a React node cannot go — an `aria-label`, a CSV
+ * export, a `title` — and used by `actorColumn` as the column's sort and
+ * filter value, so a table sorts by what the reader sees.
+ */
+export declare function actorLabel(actor: Pick<ActorValue, "displayName" | "via">): string;
+/**
+ * `5 Jan 2026, 14:32` for en-GB; other locales via `Intl.DateTimeFormat`.
+ *
+ * `en-GB` by default and hand-written, exactly as `date-field.tsx` does it,
+ * for the same two reasons. The machine's own locale would render the same
+ * trail differently on every machine — the drift this component exists to
+ * remove — and `Intl`'s `dateStyle: "medium"` says "14 Sept 2026" where
+ * `DateField` says "14 Sep 2026", so two screens in one product would spell
+ * one date two ways. The zone stays local: what time it was *for the reader*
+ * is the question a feed answers.
+ */
+export declare function actorTime(at: string | Date, locale?: string): string | undefined;
+export interface ActorProps extends ActorValue, Omit<React.ComponentProps<"span">, "children" | "color" | "title" | "dangerouslySetInnerHTML"> {
+  /** @default "inline" */
+  size?: ActorSize;
+  /** Override the per-size default: off for `inline` and `cell`, on for `head`. */
+  avatar?: boolean;
+  /** Formatting locale for `at`. @default "en-GB" */
+  locale?: string;
+}
+/**
+ * Actor — "Amit", "Amit (Agent)", "System", "Someone".
+ *
+ * @example
+ * <p>
+ *   <Actor userId={r.actorUserId} displayName={r.actorName} via={r.actorVia} /> changed the status
+ * </p>
+ */
+declare function Actor({ userId, displayName, via, avatarUrl, at, surface, size, avatar, locale, className, ...props }: ActorProps): React.JSX.Element;
+//#endregion
+export { Actor };
+//# sourceMappingURL=actor.d.ts.map

package/dist/components/actor.js

@@ -0,0 +1,175 @@
+"use client";
+"use client";
+import { cn } from "../lib/cn.js";
+import { Avatar, AvatarFallback, AvatarImage } from "./avatar.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/actor.tsx
+/**
+* The suffix, fixed, in one place, so no screen can invent its own. It is
+* never the agent's technical id or session: which agent ran is an audit
+* question, and the audit table has `actorAgentId` for it. On screen the only
+* thing that changes the reader's next action is *that* an agent acted.
+*/
+const ACTOR_AGENT_SUFFIX = "(Agent)";
+/** What `via: "system"` reads as, whatever name came with the row. */
+const ACTOR_SYSTEM_NAME = "System";
+/**
+* An unknown or deleted user. Never the id: `usr_9f2c…` in a feed reads as
+* noise to everyone who is not debugging, and the ids are in the audit table
+* for the one person who is. The server-side `actorLabel` falls back to the
+* id because a log line has no other anchor; a screen does.
+*/
+const ACTOR_UNKNOWN_NAME = "Someone";
+/** The name alone, before the suffix. */
+function actorName(actor) {
+	if (actor.via === "system") return ACTOR_SYSTEM_NAME;
+	const name = actor.displayName?.trim();
+	return name ? name : ACTOR_UNKNOWN_NAME;
+}
+/**
+* The full label as a string: `"Amit"`, `"Amit (Agent)"`, `"System"`,
+* `"Someone (Agent)"`.
+*
+* Exported for the places a React node cannot go — an `aria-label`, a CSV
+* export, a `title` — and used by `actorColumn` as the column's sort and
+* filter value, so a table sorts by what the reader sees.
+*/
+function actorLabel(actor) {
+	const name = actorName(actor);
+	return actor.via === "agent" ? `${name} ${ACTOR_AGENT_SUFFIX}` : name;
+}
+/** A `Date` from either accepted form, or null when it does not parse. */
+function toDate(at) {
+	const date = at instanceof Date ? at : new Date(at);
+	return Number.isNaN(date.getTime()) ? null : date;
+}
+const MONTHS_SHORT = [
+	"Jan",
+	"Feb",
+	"Mar",
+	"Apr",
+	"May",
+	"Jun",
+	"Jul",
+	"Aug",
+	"Sep",
+	"Oct",
+	"Nov",
+	"Dec"
+];
+const pad = (n) => String(n).padStart(2, "0");
+const isEn = (locale) => /^en(-GB)?$/i.test(locale);
+/**
+* `5 Jan 2026, 14:32` for en-GB; other locales via `Intl.DateTimeFormat`.
+*
+* `en-GB` by default and hand-written, exactly as `date-field.tsx` does it,
+* for the same two reasons. The machine's own locale would render the same
+* trail differently on every machine — the drift this component exists to
+* remove — and `Intl`'s `dateStyle: "medium"` says "14 Sept 2026" where
+* `DateField` says "14 Sep 2026", so two screens in one product would spell
+* one date two ways. The zone stays local: what time it was *for the reader*
+* is the question a feed answers.
+*/
+function actorTime(at, locale = "en-GB") {
+	const date = toDate(at);
+	if (!date) return void 0;
+	if (isEn(locale)) return `${`${date.getDate()} ${MONTHS_SHORT[date.getMonth()]} ${date.getFullYear()}`}, ${pad(date.getHours())}:${pad(date.getMinutes())}`;
+	return new Intl.DateTimeFormat(locale, {
+		dateStyle: "medium",
+		timeStyle: "short"
+	}).format(date);
+}
+/** One or two letters for the avatar fallback, as the shell's avatar does. */
+function initials(name) {
+	const words = name.trim().split(/\s+/).filter(Boolean);
+	if (words.length === 0) return "?";
+	return ((words[0]?.charAt(0) ?? "") + (words.length > 1 ? words.at(-1)?.charAt(0) ?? "" : "")).toUpperCase();
+}
+/**
+* Actor — "Amit", "Amit (Agent)", "System", "Someone".
+*
+* @example
+* <p>
+*   <Actor userId={r.actorUserId} displayName={r.actorName} via={r.actorVia} /> changed the status
+* </p>
+*/
+function Actor({ userId, displayName, via, avatarUrl, at, surface, size = "inline", avatar, locale, className, ...props }) {
+	const name = actorName({
+		displayName,
+		via
+	});
+	const time = at === void 0 ? void 0 : actorTime(at, locale);
+	const hint = [surface, time].filter(Boolean).join(" · ") || void 0;
+	const showAvatar = avatar ?? size === "head";
+	const stacked = showAvatar || size === "head";
+	/**
+	* The hover, for everyone who never hovers (DESIGN-120 review).
+	*
+	* The tooltip trigger is a plain `span` — no tab stop, because making every
+	* actor in a 200-row grid focusable would wreck keyboard navigation of it,
+	* and no `aria-label`, because a `role=generic` element's label is dropped
+	* by assistive technology rather than announced. So the same text the
+	* tooltip shows is also in the DOM, visually hidden, in document order right
+	* after the name: a screen reader reads it where it is relevant, and any
+	* ancestor whose role takes its name from its contents — the `td` a
+	* DataTable cell sits in, a link, a button — includes it in that name.
+	*/
+	const hintNode = hint ? /* @__PURE__ */ jsx("span", {
+		"data-slot": "actor-hint",
+		className: "sr-only",
+		children: hint
+	}) : null;
+	const label = /* @__PURE__ */ jsxs("span", {
+		"data-slot": "actor-label",
+		className: stacked ? "truncate" : void 0,
+		children: [/* @__PURE__ */ jsx("span", {
+			"data-slot": "actor-name",
+			children: name
+		}), via === "agent" ? /* @__PURE__ */ jsxs(Fragment, { children: [" ", /* @__PURE__ */ jsx("span", {
+			"data-slot": "actor-suffix",
+			className: "text-[length:var(--ds-text-caption)] text-[color:var(--ds-muted-foreground)]",
+			children: ACTOR_AGENT_SUFFIX
+		})] }) : null]
+	});
+	const root = stacked ? /* @__PURE__ */ jsxs("span", {
+		"data-slot": "actor",
+		"data-via": via,
+		"data-size": size,
+		className: cn("inline-flex max-w-full items-center gap-2 align-middle", className),
+		...props,
+		children: [showAvatar ? /* @__PURE__ */ jsxs(Avatar, {
+			"aria-hidden": true,
+			className: size === "head" ? "size-8" : "size-6",
+			children: [avatarUrl ? /* @__PURE__ */ jsx(AvatarImage, {
+				src: avatarUrl,
+				alt: ""
+			}) : null, /* @__PURE__ */ jsx(AvatarFallback, { children: initials(name) })]
+		}) : null, /* @__PURE__ */ jsxs("span", {
+			className: "flex min-w-0 flex-col",
+			children: [
+				label,
+				hintNode,
+				size === "head" && time ? /* @__PURE__ */ jsx("span", {
+					"aria-hidden": true,
+					"data-slot": "actor-time",
+					className: "truncate text-[length:var(--ds-text-caption)] text-[color:var(--ds-muted-foreground)]",
+					children: time
+				}) : null
+			]
+		})]
+	}) : /* @__PURE__ */ jsxs("span", {
+		"data-slot": "actor",
+		"data-via": via,
+		"data-size": size,
+		className: cn(size === "cell" && "inline-block max-w-full truncate align-middle", className),
+		...props,
+		children: [label, hintNode]
+	});
+	if (!hint) return root;
+	return /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: root }), /* @__PURE__ */ jsx(TooltipContent, { children: hint })] });
+}
+//#endregion
+export { ACTOR_AGENT_SUFFIX, ACTOR_SYSTEM_NAME, ACTOR_UNKNOWN_NAME, Actor, actorLabel, actorName, actorTime };
+
+//# sourceMappingURL=actor.js.map

package/dist/components/actor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"actor.js","names":[],"sources":["../../src/components/actor.tsx"],"sourcesContent":["\"use client\";\n\nimport type * as React from \"react\";\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/avatar\";\nimport { Tooltip, TooltipContent, TooltipTrigger } from \"@/components/tooltip\";\nimport { cn } from \"@/lib/cn\";\n\n/**\n * Who acted, on one screen, in one component (DESIGN-120, protocol §20 /\n * audit rule P-26).\n *\n * Every extension records the same two things on every write — the acting\n * user and `via` — and every screen that shows a trail has to answer the same\n * question: did a person do this, or did their agent? Seven extensions\n * formatting that themselves is seven answers, and the one that prints the\n * stored string raw shows `Amit (claude-code)`, which tells an operator the\n * name of a CLI and not whether a human was in the loop.\n *\n * So the input is the resolved actor, never a label. There is deliberately no\n * `label`, `text` or `children` prop: a consumer that could pass a string\n * would eventually pass a differently formatted one, which is exactly how the\n * inconsistency arrived. The rules below live here and nowhere else.\n */\n\n/**\n * How the principal acted. `user` and `agent` are the protocol's two values\n * (packages/shared `ActorVia`); `system` is the display-only third for a write\n * the platform made on nobody's behalf — a retention sweep, a migration.\n */\nexport type ActorVia = \"user\" | \"agent\" | \"system\";\n\n/**\n * inline — text only, sits inside a sentence: \"Amit (Agent) changed the status\".\n * cell   — a DataTable cell: avatar-less, one line, truncates.\n * head   — avatar, name and time, for a feed row or a comment header.\n */\nexport type ActorSize = \"inline\" | \"cell\" | \"head\";\n\n/**\n * The suffix, fixed, in one place, so no screen can invent its own. It is\n * never the agent's technical id or session: which agent ran is an audit\n * question, and the audit table has `actorAgentId` for it. On screen the only\n * thing that changes the reader's next action is *that* an agent acted.\n */\nexport const ACTOR_AGENT_SUFFIX = \"(Agent)\";\n\n/** What `via: \"system\"` reads as, whatever name came with the row. */\nexport const ACTOR_SYSTEM_NAME = \"System\";\n\n/**\n * An unknown or deleted user. Never the id: `usr_9f2c…` in a feed reads as\n * noise to everyone who is not debugging, and the ids are in the audit table\n * for the one person who is. The server-side `actorLabel` falls back to the\n * id because a log line has no other anchor; a screen does.\n */\nexport const ACTOR_UNKNOWN_NAME = \"Someone\";\n\n/** What the shared actor resolver produces and what the list APIs return. */\nexport interface ActorValue {\n  /** The acting principal. Null for a system write, or a row that lost its user. */\n  userId: string | null;\n  /** The stored display name. Absent or empty means unknown or deleted. */\n  displayName?: string | null;\n  via: ActorVia;\n  avatarUrl?: string;\n  /** When it happened. Shown in `head` and in the hover for every size. */\n  at?: string | Date;\n  /** Where it happened — \"Web\", \"MCP\", \"Tasks › Sprint 4\". Hover only. */\n  surface?: string;\n}\n\n/** The name alone, before the suffix. */\nexport function actorName(actor: Pick<ActorValue, \"displayName\" | \"via\">): string {\n  if (actor.via === \"system\") return ACTOR_SYSTEM_NAME;\n  const name = actor.displayName?.trim();\n  return name ? name : ACTOR_UNKNOWN_NAME;\n}\n\n/**\n * The full label as a string: `\"Amit\"`, `\"Amit (Agent)\"`, `\"System\"`,\n * `\"Someone (Agent)\"`.\n *\n * Exported for the places a React node cannot go — an `aria-label`, a CSV\n * export, a `title` — and used by `actorColumn` as the column's sort and\n * filter value, so a table sorts by what the reader sees.\n */\nexport function actorLabel(actor: Pick<ActorValue, \"displayName\" | \"via\">): string {\n  const name = actorName(actor);\n  return actor.via === \"agent\" ? `${name} ${ACTOR_AGENT_SUFFIX}` : name;\n}\n\n/** A `Date` from either accepted form, or null when it does not parse. */\nfunction toDate(at: string | Date): Date | null {\n  const date = at instanceof Date ? at : new Date(at);\n  return Number.isNaN(date.getTime()) ? null : date;\n}\n\nconst MONTHS_SHORT = [\n  \"Jan\",\n  \"Feb\",\n  \"Mar\",\n  \"Apr\",\n  \"May\",\n  \"Jun\",\n  \"Jul\",\n  \"Aug\",\n  \"Sep\",\n  \"Oct\",\n  \"Nov\",\n  \"Dec\",\n];\n\nconst pad = (n: number) => String(n).padStart(2, \"0\");\nconst isEn = (locale: string) => /^en(-GB)?$/i.test(locale);\n\n/**\n * `5 Jan 2026, 14:32` for en-GB; other locales via `Intl.DateTimeFormat`.\n *\n * `en-GB` by default and hand-written, exactly as `date-field.tsx` does it,\n * for the same two reasons. The machine's own locale would render the same\n * trail differently on every machine — the drift this component exists to\n * remove — and `Intl`'s `dateStyle: \"medium\"` says \"14 Sept 2026\" where\n * `DateField` says \"14 Sep 2026\", so two screens in one product would spell\n * one date two ways. The zone stays local: what time it was *for the reader*\n * is the question a feed answers.\n */\nexport function actorTime(at: string | Date, locale = \"en-GB\"): string | undefined {\n  const date = toDate(at);\n  if (!date) return undefined;\n  if (isEn(locale)) {\n    const day = `${date.getDate()} ${MONTHS_SHORT[date.getMonth()]} ${date.getFullYear()}`;\n    return `${day}, ${pad(date.getHours())}:${pad(date.getMinutes())}`;\n  }\n  return new Intl.DateTimeFormat(locale, { dateStyle: \"medium\", timeStyle: \"short\" }).format(date);\n}\n\n/** One or two letters for the avatar fallback, as the shell's avatar does. */\nfunction initials(name: string): string {\n  const words = name.trim().split(/\\s+/).filter(Boolean);\n  if (words.length === 0) return \"?\";\n  const first = words[0]?.charAt(0) ?? \"\";\n  const last = words.length > 1 ? (words.at(-1)?.charAt(0) ?? \"\") : \"\";\n  return (first + last).toUpperCase();\n}\n\nexport interface ActorProps\n  extends ActorValue,\n    // Every way a caller could put its own words on screen is closed, not\n    // only `children`: `title` would be a second, unformatted label sitting\n    // in the native hover, and `dangerouslySetInnerHTML` would replace the\n    // label outright. The component's whole value is that there is exactly\n    // one spelling of who acted.\n    Omit<React.ComponentProps<\"span\">, \"children\" | \"color\" | \"title\" | \"dangerouslySetInnerHTML\"> {\n  /** @default \"inline\" */\n  size?: ActorSize;\n  /** Override the per-size default: off for `inline` and `cell`, on for `head`. */\n  avatar?: boolean;\n  /** Formatting locale for `at`. @default \"en-GB\" */\n  locale?: string;\n}\n\n/**\n * Actor — \"Amit\", \"Amit (Agent)\", \"System\", \"Someone\".\n *\n * @example\n * <p>\n *   <Actor userId={r.actorUserId} displayName={r.actorName} via={r.actorVia} /> changed the status\n * </p>\n */\nfunction Actor({\n  userId,\n  displayName,\n  via,\n  avatarUrl,\n  at,\n  surface,\n  size = \"inline\",\n  avatar,\n  locale,\n  className,\n  ...props\n}: ActorProps) {\n  const name = actorName({ displayName, via });\n  const time = at === undefined ? undefined : actorTime(at, locale);\n  const hint = [surface, time].filter(Boolean).join(\" · \") || undefined;\n  const showAvatar = avatar ?? size === \"head\";\n  // Two lines rather than one, and with it where the ellipsis lives. `head`\n  // keeps its stacked shape — name over time — even with `avatar={false}`,\n  // which is a real state: a comment thread that has already shown the avatar\n  // once does not repeat it on every reply. In the stacked shape the label is\n  // a flex item, which is block-level and can clip; in the flat one it is\n  // inline, and an inline box has no overflow to hide, so `truncate` on it\n  // would be a silent no-op and the inline-block root wears it instead.\n  const stacked = showAvatar || size === \"head\";\n\n  /**\n   * The hover, for everyone who never hovers (DESIGN-120 review).\n   *\n   * The tooltip trigger is a plain `span` — no tab stop, because making every\n   * actor in a 200-row grid focusable would wreck keyboard navigation of it,\n   * and no `aria-label`, because a `role=generic` element's label is dropped\n   * by assistive technology rather than announced. So the same text the\n   * tooltip shows is also in the DOM, visually hidden, in document order right\n   * after the name: a screen reader reads it where it is relevant, and any\n   * ancestor whose role takes its name from its contents — the `td` a\n   * DataTable cell sits in, a link, a button — includes it in that name.\n   */\n  const hintNode = hint ? (\n    <span data-slot=\"actor-hint\" className=\"sr-only\">\n      {hint}\n    </span>\n  ) : null;\n\n  // Name and suffix stay in one inline formatting context so the separating\n  // space survives: a lone space text node between two *flex items* is dropped\n  // by the layout, and `Amit(Agent)` is not the label the protocol names.\n  const label = (\n    <span data-slot=\"actor-label\" className={stacked ? \"truncate\" : undefined}>\n      <span data-slot=\"actor-name\">{name}</span>\n      {via === \"agent\" ? (\n        <>\n          {\" \"}\n          <span\n            data-slot=\"actor-suffix\"\n            className=\"text-[length:var(--ds-text-caption)] text-[color:var(--ds-muted-foreground)]\"\n          >\n            {ACTOR_AGENT_SUFFIX}\n          </span>\n        </>\n      ) : null}\n    </span>\n  );\n\n  const root = stacked ? (\n    <span\n      data-slot=\"actor\"\n      data-via={via}\n      data-size={size}\n      className={cn(\"inline-flex max-w-full items-center gap-2 align-middle\", className)}\n      {...props}\n    >\n      {showAvatar ? (\n        // Decorative: the initials in the fallback are the name that is\n        // already written beside them, and an assistive technology reading\n        // \"A S Amit Sharma\" is worse than one reading \"Amit Sharma\".\n        <Avatar aria-hidden className={size === \"head\" ? \"size-8\" : \"size-6\"}>\n          {avatarUrl ? <AvatarImage src={avatarUrl} alt=\"\" /> : null}\n          <AvatarFallback>{initials(name)}</AvatarFallback>\n        </Avatar>\n      ) : null}\n      {/* `min-w-0` is what lets the label's `truncate` bite: without it a flex\n          item's min size is its content and nothing ever overflows. */}\n      <span className=\"flex min-w-0 flex-col\">\n        {label}\n        {hintNode}\n        {size === \"head\" && time ? (\n          // `aria-hidden`, and not because the time does not matter: the\n          // hidden hint above already carries it, together with the surface,\n          // and without this a screen reader reads the timestamp twice.\n          <span\n            aria-hidden\n            data-slot=\"actor-time\"\n            className=\"truncate text-[length:var(--ds-text-caption)] text-[color:var(--ds-muted-foreground)]\"\n          >\n            {time}\n          </span>\n        ) : null}\n      </span>\n    </span>\n  ) : (\n    <span\n      data-slot=\"actor\"\n      data-via={via}\n      data-size={size}\n      // `inline` stays a plain inline box: it is a run of text in a sentence,\n      // and `truncate` on an inline box does nothing at all, so claiming it\n      // would only look like a guarantee. `cell` is inline-block, which is a\n      // box the ellipsis can happen in; the DataTable's own `td` truncates\n      // around it.\n      className={cn(size === \"cell\" && \"inline-block max-w-full truncate align-middle\", className)}\n      {...props}\n    >\n      {label}\n      {hintNode}\n    </span>\n  );\n\n  if (!hint) return root;\n  return (\n    <Tooltip>\n      <TooltipTrigger render={root} />\n      <TooltipContent>{hint}</TooltipContent>\n    </Tooltip>\n  );\n}\n\nexport { Actor };\n"],"mappings":"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"}

package/dist/components/admin-permissions/role-assignment.js

@@ -9,8 +9,8 @@ import { Dialog, DialogBody, DialogContent, DialogDescription, DialogFooter, Dia
 import { ErrorBanner } from "../error-banner.js";
 import { adminErrorMessage, sourceGroupOf } from "./types.js";
 import { useAdminPermissions } from "./context.js";
-import { Users } from "lucide-react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Users } from "lucide-react";
 import * as React from "react";
 //#region src/components/admin-permissions/role-assignment.tsx
 /**

package/dist/components/agent-chat-popup.js

@@ -5,8 +5,8 @@ import { BrandMark } from "./app-shell.js";
 import { Button } from "./button.js";
 import { viewStorageKey, windowSessionStorage } from "../agent-chat/session.js";
 import { AgentChat } from "./agent-chat.js";
-import { Maximize2, Minimize2, X } from "lucide-react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Maximize2, Minimize2, X } from "lucide-react";
 import * as React from "react";
 //#region src/components/agent-chat-popup.tsx
 /**

package/dist/components/agent-chat.js

@@ -15,8 +15,8 @@ import { useAgentChat } from "../agent-chat/store.js";
 import { sessionTitle } from "../agent-chat/types.js";
 import { mcpAppExtensionId } from "../agent-chat/mcp-app/resource.js";
 import "../agent-chat/mcp-app/bridge.js";
-import { Check, ChevronDown, ChevronRight, MessageSquarePlus, Send, ShieldCheck, ShieldX, Sparkles, Square, X } from "lucide-react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Check, ChevronDown, ChevronRight, MessageSquarePlus, Send, ShieldCheck, ShieldX, Sparkles, Square, X } from "lucide-react";
 import * as React from "react";
 //#region src/components/agent-chat.tsx
 /**

package/dist/components/app-shell.js

@@ -4,8 +4,8 @@ import { cn } from "../lib/cn.js";
 import { Avatar, AvatarFallback, AvatarImage } from "./avatar.js";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from "./dropdown-menu.js";
 import { useCortenaTheme } from "../hooks/use-cortena-theme.js";
-import { CircleQuestionMark, LogOut, Menu, Monitor, Moon, Settings, Sun, User, X } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { CircleQuestionMark, LogOut, Menu, Monitor, Moon, Settings, Sun, User, X } from "lucide-react";
 import { getMark } from "cortena-design/marks";
 import * as React from "react";
 //#region src/components/app-shell.tsx

package/dist/components/avatar.js

@@ -1,8 +1,8 @@
 "use client";
 "use client";
 import { cn } from "../lib/cn.js";
-import { jsx } from "react/jsx-runtime";
 import { Avatar } from "@base-ui/react/avatar";
+import { jsx } from "react/jsx-runtime";
 //#region src/components/avatar.tsx
 /**
 * Avatar.

package/dist/components/badge.d.ts

@@ -3,7 +3,7 @@ import { VariantProps } from "class-variance-authority";
 import * as React from "react";
 //#region src/components/badge.d.ts
 declare const badgeVariants: (props?: ({
-  variant?: "default" | "success" | "warn" | "destructive" | "danger" | "info" | "outline" | "warning" | "neutral" | "secondary" | null | undefined;
+  variant?: "default" | "success" | "warn" | "destructive" | "danger" | "info" | "warning" | "neutral" | "secondary" | "outline" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export interface BadgeProps extends React.ComponentProps<"span">, VariantProps<typeof badgeVariants> {}
 declare function Badge({ className, variant, ...props }: BadgeProps): React.JSX.Element;

package/dist/components/breadcrumb.js

@@ -2,8 +2,8 @@
 "use client";
 import { cn } from "../lib/cn.js";
 import { renderWith } from "../lib/render.js";
-import { ChevronRight, MoreHorizontal } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronRight, MoreHorizontal } from "lucide-react";
 //#region src/components/breadcrumb.tsx
 /**
 * Breadcrumb — the trail above a page title.

package/dist/components/button.d.ts

@@ -14,7 +14,7 @@ import { Button } from "@base-ui/react/button";
  * rendered element, which is Base UI's equivalent.
  */
 declare const buttonVariants: (props?: ({
-  variant?: "link" | "destructive" | "outline" | "secondary" | "primary" | "ghost" | "soft" | null | undefined;
+  variant?: "link" | "destructive" | "secondary" | "outline" | "primary" | "ghost" | "soft" | null | undefined;
   size?: "sm" | "md" | "lg" | "icon" | "icon-sm" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export interface ButtonProps extends React.ComponentProps<typeof Button>, VariantProps<typeof buttonVariants> {}

package/dist/components/calendar.js

@@ -2,8 +2,8 @@
 "use client";
 import { cn } from "../lib/cn.js";
 import { Button } from "./button.js";
-import { ChevronDown, ChevronLeft, ChevronRight, ChevronUp } from "lucide-react";
 import { jsx } from "react/jsx-runtime";
+import { ChevronDown, ChevronLeft, ChevronRight, ChevronUp } from "lucide-react";
 import * as React from "react";
 import { DayPicker, getDefaultClassNames } from "react-day-picker";
 //#region src/components/calendar.tsx

package/dist/components/checkbox.js

@@ -1,8 +1,8 @@
 "use client";
 "use client";
 import { cn } from "../lib/cn.js";
-import { Check, Minus } from "lucide-react";
 import { jsx } from "react/jsx-runtime";
+import { Check, Minus } from "lucide-react";
 import { Checkbox } from "@base-ui/react/checkbox";
 //#region src/components/checkbox.tsx
 function Checkbox$1({ className, indeterminate, ...props }) {

package/dist/components/chip.d.ts

@@ -7,7 +7,7 @@ import * as React from "react";
  * sentence case and the body font.
  */
 declare const chipVariants: (props?: ({
-  variant?: "default" | "accent" | "outline" | null | undefined;
+  variant?: "default" | "outline" | "accent" | null | undefined;
   size?: "default" | "sm" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export interface ChipProps extends React.ComponentProps<"span">, VariantProps<typeof chipVariants> {}

package/dist/components/combobox.js

@@ -2,8 +2,8 @@
 "use client";
 import { cn } from "../lib/cn.js";
 import { inputClassName } from "./input.js";
-import { Check, ChevronDown, X } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { Check, ChevronDown, X } from "lucide-react";
 import { createContext, useContext } from "react";
 import { Combobox } from "@base-ui/react/combobox";
 //#region src/components/combobox.tsx

package/dist/components/command.js

@@ -2,8 +2,8 @@
 "use client";
 import { cn } from "../lib/cn.js";
 import { Dialog, DialogContent, DialogDescription, DialogTitle } from "./dialog.js";
-import { Search } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { Search } from "lucide-react";
 import { Command } from "cmdk";
 //#region src/components/command.tsx
 /**

package/dist/components/data-table/data-table.js

@@ -7,8 +7,8 @@ import { ErrorBanner } from "../error-banner.js";
 import { Skeleton } from "../skeleton.js";
 import { DataTableColumnHeader, DataTablePagination, DataTableToolbar } from "./parts.js";
 import { useDataTable } from "./use-data-table.js";
-import { Inbox } from "lucide-react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Inbox } from "lucide-react";
 import * as React from "react";
 import { useVirtualizer } from "@tanstack/react-virtual";
 //#region src/components/data-table/data-table.tsx