agent-approvals 0.7.0

package/dist/index.js

@@ -0,0 +1,245 @@
+import { t as e } from "./ApprovalGate-CRRh36j-.js";
+import { Fragment as t, jsx as n, jsxs as r } from "react/jsx-runtime";
+import { useState as i } from "react";
+//#region src/components/StatusIndicator/StatusIndicator.tsx
+var a = {
+	idle: "Idle",
+	working: "Writing",
+	running: "Running a command",
+	needsYou: "Waiting for you",
+	error: "Error",
+	done: "Done"
+};
+function o({ state: e, label: t, showLabel: i = !1, size: o = "md", className: s }) {
+	let c = t ?? a[e];
+	return /* @__PURE__ */ r("span", {
+		"data-state": e,
+		className: [
+			"agent-status",
+			`agent-status--${o}`,
+			s
+		].filter(Boolean).join(" "),
+		children: [/* @__PURE__ */ n("span", {
+			className: "agent-status__dot",
+			"aria-hidden": "true"
+		}), /* @__PURE__ */ n("span", {
+			className: i ? "agent-status__label" : "agent-status__label agent-sr-only",
+			children: c
+		})]
+	});
+}
+//#endregion
+//#region src/components/SessionStrip/SessionStrip.tsx
+function s(e) {
+	return e.state === "needsYou" || e.state === "error";
+}
+function c(e) {
+	let t = (t) => e.filter((e) => t.includes(e.state)).length, n = [], r = t(["working", "running"]), i = t(["done"]), a = t(["idle"]);
+	return r > 0 && n.push(`${r} running`), i > 0 && n.push(`${i} done`), a > 0 && n.push(`${a} idle`), n.join(", ");
+}
+function l(e) {
+	let t = e.filter(s);
+	if (t.length === 0) return "";
+	let n = t.map((e) => e.name).join(", "), r = t.length === 1 ? "session needs" : "sessions need";
+	return `${t.length} ${r} you: ${n}.`;
+}
+function u({ sessions: e, maxQuiet: i = 4, onSelect: a, label: u = "Sessions", className: d }) {
+	if (e.length === 0) return /* @__PURE__ */ n("p", {
+		className: "agent-strip__announce agent-sr-only",
+		role: "status"
+	});
+	let f = e.filter(s), p = e.filter((e) => !s(e)), m = p.slice(0, Math.max(0, i)), h = p.slice(m.length), g = [...f, ...m], _ = c(h);
+	return /* @__PURE__ */ r("section", {
+		"aria-label": u,
+		className: ["agent-strip", d].filter(Boolean).join(" "),
+		children: [
+			/* @__PURE__ */ n("ul", {
+				className: "agent-strip__list",
+				children: g.map((e) => {
+					let i = /* @__PURE__ */ r(t, { children: [
+						/* @__PURE__ */ n(o, {
+							state: e.state,
+							showLabel: s(e),
+							className: "agent-strip__status"
+						}),
+						/* @__PURE__ */ n("span", {
+							className: "agent-strip__name",
+							children: e.name
+						}),
+						e.elapsed ? /* @__PURE__ */ n("span", {
+							className: "agent-strip__elapsed",
+							children: e.elapsed
+						}) : null
+					] });
+					return /* @__PURE__ */ n("li", {
+						className: "agent-strip__item",
+						"data-state": e.state,
+						"data-actionable": s(e) ? "true" : void 0,
+						children: a ? /* @__PURE__ */ n("button", {
+							type: "button",
+							className: "agent-strip__row agent-strip__row--button",
+							onClick: () => a(e.id),
+							children: i
+						}) : /* @__PURE__ */ n("span", {
+							className: "agent-strip__row",
+							children: i
+						})
+					}, e.id);
+				})
+			}),
+			_ ? /* @__PURE__ */ r("p", {
+				className: "agent-strip__summary",
+				children: [/* @__PURE__ */ n("span", {
+					className: "agent-sr-only",
+					children: "Not listed: "
+				}), _]
+			}) : null,
+			/* @__PURE__ */ n("p", {
+				className: "agent-strip__announce agent-sr-only",
+				role: "status",
+				children: l(e)
+			})
+		]
+	});
+}
+//#endregion
+//#region src/components/ActivityTrail/ActivityTrail.tsx
+function d(e) {
+	return e === "ask" || e === "error";
+}
+var f = {
+	read: ["file", "files"],
+	edit: ["file", "files"],
+	run: ["command", "commands"],
+	ask: ["question", "questions"],
+	error: ["failure", "failures"],
+	note: ["note", "notes"]
+}, p = {
+	read: "Read",
+	edit: "Edited",
+	run: "Ran",
+	ask: "Asked",
+	error: "Failed",
+	note: "Noted"
+};
+function m(e, t) {
+	let [n, r] = f[e];
+	return `${p[e]} ${t} ${t === 1 ? n : r}`;
+}
+function h(e) {
+	let t = [];
+	for (let n of e) {
+		let e = t[t.length - 1];
+		if (d(n.kind)) {
+			t.push({
+				type: "single",
+				key: n.id,
+				activity: n
+			});
+			continue;
+		}
+		if (e?.type === "group" && e.kind === n.kind) {
+			e.activities.push(n);
+			continue;
+		}
+		if (e?.type === "single" && e.activity.kind === n.kind) {
+			t[t.length - 1] = {
+				type: "group",
+				key: e.activity.id,
+				kind: n.kind,
+				activities: [e.activity, n]
+			};
+			continue;
+		}
+		t.push({
+			type: "single",
+			key: n.id,
+			activity: n
+		});
+	}
+	return t;
+}
+function g({ activities: e, maxVisible: t = 8, summarise: a = m, label: o = "Activity", className: s }) {
+	let [c, l] = i([]);
+	if (e.length === 0) return null;
+	let u = h(e), d = Math.max(0, t), f = Math.max(0, u.length - d), p = f > 0 ? u.slice(f) : u, g = u.slice(0, f).reduce((e, t) => e + (t.type === "group" ? t.activities.length : 1), 0), _ = (e) => l((t) => t.includes(e) ? t.filter((t) => t !== e) : [...t, e]);
+	return /* @__PURE__ */ r("section", {
+		"aria-label": o,
+		className: ["agent-trail", s].filter(Boolean).join(" "),
+		children: [g > 0 ? /* @__PURE__ */ r("p", {
+			className: "agent-trail__earlier",
+			children: [g, " earlier steps"]
+		}) : null, /* @__PURE__ */ n("ol", {
+			className: "agent-trail__list",
+			children: p.map((e) => {
+				if (e.type === "single") {
+					let { activity: t } = e;
+					return /* @__PURE__ */ r("li", {
+						className: "agent-trail__item",
+						"data-kind": t.kind,
+						children: [
+							/* @__PURE__ */ n("span", {
+								className: "agent-trail__node",
+								"aria-hidden": "true"
+							}),
+							/* @__PURE__ */ r("span", {
+								className: "agent-trail__body",
+								children: [/* @__PURE__ */ n("span", {
+									className: "agent-trail__summary",
+									children: t.summary
+								}), t.detail ? /* @__PURE__ */ n("code", {
+									className: "agent-trail__detail",
+									children: t.detail
+								}) : null]
+							}),
+							t.at ? /* @__PURE__ */ n("span", {
+								className: "agent-trail__at",
+								children: t.at
+							}) : null
+						]
+					}, e.key);
+				}
+				let t = c.includes(e.key);
+				return /* @__PURE__ */ r("li", {
+					className: "agent-trail__item",
+					"data-kind": e.kind,
+					children: [/* @__PURE__ */ n("span", {
+						className: "agent-trail__node",
+						"aria-hidden": "true"
+					}), /* @__PURE__ */ r("span", {
+						className: "agent-trail__body",
+						children: [/* @__PURE__ */ r("button", {
+							type: "button",
+							className: "agent-trail__group",
+							"aria-expanded": t,
+							onClick: () => _(e.key),
+							children: [/* @__PURE__ */ n("span", {
+								className: "agent-trail__summary",
+								children: a(e.kind, e.activities.length)
+							}), /* @__PURE__ */ n("span", {
+								className: "agent-trail__group-hint",
+								children: t ? "Hide" : "Show"
+							})]
+						}), t ? /* @__PURE__ */ n("ol", {
+							className: "agent-trail__sublist",
+							children: e.activities.map((e) => /* @__PURE__ */ r("li", {
+								className: "agent-trail__subitem",
+								children: [/* @__PURE__ */ n("span", {
+									className: "agent-trail__summary",
+									children: e.summary
+								}), e.detail ? /* @__PURE__ */ n("code", {
+									className: "agent-trail__detail",
+									children: e.detail
+								}) : null]
+							}, e.id))
+						}) : null]
+					})]
+				}, e.key);
+			})
+		})]
+	});
+}
+//#endregion
+export { g as ActivityTrail, e as ApprovalGate, u as SessionStrip, o as StatusIndicator };
+
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../src/components/StatusIndicator/StatusIndicator.tsx","../src/components/SessionStrip/SessionStrip.tsx","../src/components/ActivityTrail/ActivityTrail.tsx"],"sourcesContent":["import type { SessionState, StatusIndicatorProps } from './types'\nimport '../sr-only.css'\nimport './StatusIndicator.css'\n\n/**\n * The wording each state shows by default. Pass `label` to replace it.\n *\n * \"Writing\" and \"Running a command\" say who is doing the work. The earlier\n * pair, \"Active\" and \"Running\", were synonyms in English and nobody could hold\n * them apart, including the person who designed them.\n */\nconst DEFAULT_LABEL: Record<SessionState, string> = {\n  idle: 'Idle',\n  working: 'Writing',\n  running: 'Running a command',\n  needsYou: 'Waiting for you',\n  error: 'Error',\n  done: 'Done',\n}\n\n/**\n * One session's state, as a dot with an optional label.\n *\n * Motion means state, colour means exception. Only `running` moves, because\n * only `running` is the case of being alive without progressing, and a breath\n * is what that looks like. `error` is told apart by shape rather than hue, so\n * it still reads for anyone who cannot separate red from amber.\n *\n * This component reports. It is never a control. It has no click handler and\n * takes no children on purpose: the moment a status can be clicked it has\n * become an approval, and approvals are ApprovalGate's job.\n */\nexport function StatusIndicator({\n  state,\n  label,\n  showLabel = false,\n  size = 'md',\n  className,\n}: StatusIndicatorProps) {\n  const text = label ?? DEFAULT_LABEL[state]\n\n  return (\n    <span\n      // data-state is here so you can style any state from your own CSS\n      // without this component needing to expose a prop for every colour.\n      data-state={state}\n      className={['agent-status', `agent-status--${size}`, className]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      <span className=\"agent-status__dot\" aria-hidden=\"true\" />\n      <span className={showLabel ? 'agent-status__label' : 'agent-status__label agent-sr-only'}>\n        {text}\n      </span>\n    </span>\n  )\n}\n","import { StatusIndicator } from '../StatusIndicator/StatusIndicator'\nimport type { SessionState } from '../StatusIndicator/types'\nimport type { Session, SessionStripProps } from './types'\nimport '../sr-only.css'\nimport './SessionStrip.css'\n\n/** A session the person can actually do something about right now. */\nfunction isActionable(session: Session) {\n  return session.state === 'needsYou' || session.state === 'error'\n}\n\n/**\n * \"3 running, 1 done, 2 idle\". Weather, not telemetry.\n *\n * Writing and Running a command are counted together here on purpose. At a\n * glance the useful fact is how many are busy. Which kind of busy matters when\n * you look at a single session, not when you are counting them.\n */\nfunction summarise(sessions: Session[]) {\n  const count = (states: SessionState[]) =>\n    sessions.filter((session) => states.includes(session.state)).length\n\n  const parts: string[] = []\n  const running = count(['working', 'running'])\n  const done = count(['done'])\n  const idle = count(['idle'])\n\n  if (running > 0) parts.push(`${running} running`)\n  if (done > 0) parts.push(`${done} done`)\n  if (idle > 0) parts.push(`${idle} idle`)\n  return parts.join(', ')\n}\n\n/**\n * The one sentence this component says out loud.\n *\n * Compress the ordinary, never compress the exception, applied to sound. A\n * session that starts writing is ordinary and says nothing, because a screen\n * reader narrating twelve rows changing state is the telemetry this component\n * exists to avoid. A session that stops dead waiting for an answer is the\n * exception, and it is named.\n *\n * Derived from what is true now rather than from a transition, so there is no\n * timer, no stored history, and nothing to leak. A polite region is not read on\n * arrival, only when it changes, which is exactly the difference between the\n * state and an event.\n */\nfunction speak(sessions: Session[]) {\n  const waiting = sessions.filter(isActionable)\n  if (waiting.length === 0) return ''\n\n  const names = waiting.map((session) => session.name).join(', ')\n  const verb = waiting.length === 1 ? 'session needs' : 'sessions need'\n  return `${waiting.length} ${verb} you: ${names}.`\n}\n\n/**\n * Many parallel sessions, read at a glance.\n *\n * Two rules hold this together. Sessions that need a person come first and are\n * never folded away, however many there are. Everything else is allowed to\n * collapse into a single line of counts, because a list of twelve calm rows is\n * telemetry, and nobody reads telemetry.\n *\n * Rows do not animate when they reorder. A session that starts needing you\n * jumps to the top immediately, with no transition, matching the menu bar.\n * Motion belongs to a single dot describing itself, not to a list rearranging\n * under someone's eyes.\n */\nexport function SessionStrip({\n  sessions,\n  maxQuiet = 4,\n  onSelect,\n  label = 'Sessions',\n  className,\n}: SessionStripProps) {\n  /* Empty, but not absent.\n   *\n   * Returning null took the live region out of the page with it, and a region\n   * that arrives already carrying its sentence is not announced. So a dashboard\n   * that renders this with nothing running, then has one session stop dead\n   * waiting for an answer, said nothing at all to anyone listening. The shell\n   * draws nothing and takes no space; it only keeps the announcer where it has\n   * to be to work. */\n  if (sessions.length === 0) {\n    return <p className=\"agent-strip__announce agent-sr-only\" role=\"status\" />\n  }\n\n  const actionable = sessions.filter(isActionable)\n  const quiet = sessions.filter((session) => !isActionable(session))\n\n  const shownQuiet = quiet.slice(0, Math.max(0, maxQuiet))\n  const foldedQuiet = quiet.slice(shownQuiet.length)\n\n  const rows = [...actionable, ...shownQuiet]\n  const summary = summarise(foldedQuiet)\n\n  return (\n    <section\n      aria-label={label}\n      className={['agent-strip', className].filter(Boolean).join(' ')}\n    >\n      <ul className=\"agent-strip__list\">\n        {rows.map((session) => {\n          // One StatusIndicator per row, never two. A second one would read the\n          // state out twice to a screen reader.\n          //\n          // The word is shown only on rows that need a person. On a calm row the\n          // dot is enough, and twelve rows each spelling out \"Idle\" is the\n          // telemetry this component exists to avoid.\n          const content = (\n            <>\n              <StatusIndicator\n                state={session.state}\n                showLabel={isActionable(session)}\n                className=\"agent-strip__status\"\n              />\n              <span className=\"agent-strip__name\">{session.name}</span>\n              {session.elapsed ? (\n                <span className=\"agent-strip__elapsed\">{session.elapsed}</span>\n              ) : null}\n            </>\n          )\n\n          return (\n            <li\n              key={session.id}\n              className=\"agent-strip__item\"\n              data-state={session.state}\n              data-actionable={isActionable(session) ? 'true' : undefined}\n            >\n              {onSelect ? (\n                <button\n                  type=\"button\"\n                  className=\"agent-strip__row agent-strip__row--button\"\n                  onClick={() => onSelect(session.id)}\n                >\n                  {content}\n                </button>\n              ) : (\n                <span className=\"agent-strip__row\">{content}</span>\n              )}\n            </li>\n          )\n        })}\n      </ul>\n\n      {summary ? (\n        <p className=\"agent-strip__summary\">\n          {/* Read on its own this line is five numbers with no subject. The\n              prefix says whose counts these are, and only to a screen reader,\n              because on screen the rule above the line already says it. */}\n          <span className=\"agent-sr-only\">Not listed: </span>\n          {summary}\n        </p>\n      ) : null}\n\n      {/* Named, not counted. See speak() above. */}\n      <p className=\"agent-strip__announce agent-sr-only\" role=\"status\">\n        {speak(sessions)}\n      </p>\n    </section>\n  )\n}\n","import { useState } from 'react'\nimport type { Activity, ActivityKind, ActivityTrailProps } from './types'\nimport './ActivityTrail.css'\n\n/**\n * Exceptions never fold. A question the agent asked and a thing that failed are\n * the two events a person came here to find, so they always stand on their own,\n * however many of them there are.\n */\nfunction isException(kind: ActivityKind) {\n  return kind === 'ask' || kind === 'error'\n}\n\nconst PLURAL: Record<ActivityKind, [one: string, many: string]> = {\n  read: ['file', 'files'],\n  edit: ['file', 'files'],\n  run: ['command', 'commands'],\n  ask: ['question', 'questions'],\n  error: ['failure', 'failures'],\n  note: ['note', 'notes'],\n}\n\nconst VERB: Record<ActivityKind, string> = {\n  read: 'Read',\n  edit: 'Edited',\n  run: 'Ran',\n  ask: 'Asked',\n  error: 'Failed',\n  note: 'Noted',\n}\n\nfunction defaultSummarise(kind: ActivityKind, count: number) {\n  const [one, many] = PLURAL[kind]\n  return `${VERB[kind]} ${count} ${count === 1 ? one : many}`\n}\n\ntype Row =\n  | { type: 'single'; key: string; activity: Activity }\n  | { type: 'group'; key: string; kind: ActivityKind; activities: Activity[] }\n\n/**\n * Runs of the same ordinary thing become one row. Runs are consecutive only,\n * because the order is the story: five reads, then a command, then five more\n * reads is three rows, not two.\n */\nfunction toRows(activities: Activity[]): Row[] {\n  const rows: Row[] = []\n\n  for (const activity of activities) {\n    const previous = rows[rows.length - 1]\n\n    if (isException(activity.kind)) {\n      rows.push({ type: 'single', key: activity.id, activity })\n      continue\n    }\n\n    if (previous?.type === 'group' && previous.kind === activity.kind) {\n      previous.activities.push(activity)\n      continue\n    }\n\n    if (previous?.type === 'single' && previous.activity.kind === activity.kind) {\n      rows[rows.length - 1] = {\n        type: 'group',\n        key: previous.activity.id,\n        kind: activity.kind,\n        activities: [previous.activity, activity],\n      }\n      continue\n    }\n\n    rows.push({ type: 'single', key: activity.id, activity })\n  }\n\n  return rows\n}\n\n/**\n * What the agent did, compressed and scannable.\n *\n * A log dump is a list of everything that happened, in the order it happened,\n * at the same volume. Nobody reads one. This is the same information with the\n * repetition folded up and the two things worth finding, the questions and the\n * failures, left standing at full size.\n *\n * It is a record. There is nothing to click except opening a folded group.\n */\nexport function ActivityTrail({\n  activities,\n  maxVisible = 8,\n  summarise = defaultSummarise,\n  label = 'Activity',\n  className,\n}: ActivityTrailProps) {\n  const [openKeys, setOpenKeys] = useState<string[]>([])\n\n  if (activities.length === 0) return null\n\n  const rows = toRows(activities)\n  const limit = Math.max(0, maxVisible)\n  const hidden = Math.max(0, rows.length - limit)\n  const shown = hidden > 0 ? rows.slice(hidden) : rows\n\n  const earlier = rows\n    .slice(0, hidden)\n    .reduce((total, row) => total + (row.type === 'group' ? row.activities.length : 1), 0)\n\n  const toggle = (key: string) =>\n    setOpenKeys((open) =>\n      open.includes(key) ? open.filter((each) => each !== key) : [...open, key],\n    )\n\n  return (\n    <section\n      aria-label={label}\n      className={['agent-trail', className].filter(Boolean).join(' ')}\n    >\n      {earlier > 0 ? (\n        <p className=\"agent-trail__earlier\">{earlier} earlier steps</p>\n      ) : null}\n\n      <ol className=\"agent-trail__list\">\n        {shown.map((row) => {\n          if (row.type === 'single') {\n            const { activity } = row\n            return (\n              <li\n                key={row.key}\n                className=\"agent-trail__item\"\n                data-kind={activity.kind}\n              >\n                <span className=\"agent-trail__node\" aria-hidden=\"true\" />\n                <span className=\"agent-trail__body\">\n                  <span className=\"agent-trail__summary\">{activity.summary}</span>\n                  {activity.detail ? (\n                    <code className=\"agent-trail__detail\">{activity.detail}</code>\n                  ) : null}\n                </span>\n                {activity.at ? <span className=\"agent-trail__at\">{activity.at}</span> : null}\n              </li>\n            )\n          }\n\n          const isOpen = openKeys.includes(row.key)\n          return (\n            <li key={row.key} className=\"agent-trail__item\" data-kind={row.kind}>\n              <span className=\"agent-trail__node\" aria-hidden=\"true\" />\n              <span className=\"agent-trail__body\">\n                <button\n                  type=\"button\"\n                  className=\"agent-trail__group\"\n                  aria-expanded={isOpen}\n                  onClick={() => toggle(row.key)}\n                >\n                  <span className=\"agent-trail__summary\">\n                    {summarise(row.kind, row.activities.length)}\n                  </span>\n                  <span className=\"agent-trail__group-hint\">{isOpen ? 'Hide' : 'Show'}</span>\n                </button>\n\n                {isOpen ? (\n                  <ol className=\"agent-trail__sublist\">\n                    {row.activities.map((activity) => (\n                      <li key={activity.id} className=\"agent-trail__subitem\">\n                        <span className=\"agent-trail__summary\">{activity.summary}</span>\n                        {activity.detail ? (\n                          <code className=\"agent-trail__detail\">{activity.detail}</code>\n                        ) : null}\n                      </li>\n                    ))}\n                  </ol>\n                ) : null}\n              </span>\n            </li>\n          )\n        })}\n      </ol>\n    </section>\n  )\n}\n"],"mappings":"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"}

package/dist/theme-macos.css

@@ -0,0 +1,209 @@
+/* agent-approvals/theme-macos.css
+ *
+ * Optional. The package ships neutral on purpose: it inherits your font and
+ * mixes its neutrals from your text colour, so it is correct dropped into any
+ * app without being configured. That is the right default, because a dark
+ * vibrancy panel landing in a light dashboard is not a good default, it is a
+ * bug.
+ *
+ * This is the look from the documentation site, offered rather than imposed.
+ * One import and the components become macOS surfaces: system font, vibrancy
+ * material, exact capsules, concentric radii, and one accent colour used for
+ * one job.
+ *
+ *   import 'agent-approvals/styles.css'
+ *   import 'agent-approvals/theme-macos.css'
+ *
+ * Load it after the base stylesheet. Every value below is a custom property on
+ * the component itself rather than on :root, so nothing leaks into the rest of
+ * your app and you can still override any single value afterwards.
+ */
+
+.agent-gate,
+.agent-strip,
+.agent-trail {
+  --am-bg: rgba(38, 38, 44, 0.82);
+  --am-rule: rgba(255, 255, 255, 0.14);
+  --am-ink: #f2f2f7;
+  --am-detail: #98989f;
+  --am-inset: rgba(255, 255, 255, 0.06);
+  --am-fill: rgba(255, 255, 255, 0.16);
+  --am-fill-quiet: rgba(255, 255, 255, 0.12);
+  --am-fill-hover: rgba(255, 255, 255, 0.22);
+  --am-shadow: 0 24px 48px rgba(0, 0, 0, 0.55), inset 0 0.5px 0 rgba(255, 255, 255, 0.18);
+  --am-caution: rgba(235, 235, 245, 0.45);
+  --am-danger: #ff453a;
+  --am-blue: #0a84ff;
+  --am-system: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', system-ui, sans-serif;
+  --am-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Monaco, monospace;
+}
+
+@media (prefers-color-scheme: light) {
+  .agent-gate,
+  .agent-strip,
+  .agent-trail {
+    --am-bg: rgba(252, 252, 253, 0.86);
+    --am-rule: rgba(0, 0, 0, 0.12);
+    --am-ink: #1c1c1e;
+    --am-detail: #6c6c72;
+    --am-inset: rgba(0, 0, 0, 0.045);
+    --am-fill: rgba(0, 0, 0, 0.09);
+    --am-fill-quiet: rgba(0, 0, 0, 0.06);
+    --am-fill-hover: rgba(0, 0, 0, 0.14);
+    --am-shadow: 0 18px 40px rgba(0, 0, 0, 0.14), inset 0 0.5px 0 rgba(255, 255, 255, 0.9);
+    --am-caution: rgba(60, 60, 67, 0.5);
+    --am-danger: #d70015;
+    --am-blue: #0066cc;
+  }
+}
+
+/* ---------- the gate ---------- */
+
+.agent-gate {
+  font-family: var(--am-system);
+  font-size: 13px;
+  line-height: 1.38;
+  letter-spacing: -0.005em;
+  max-width: 420px;
+  padding: 16px;
+  border-radius: 16px;
+  border: 0.5px solid var(--am-rule);
+  background: var(--am-bg);
+  backdrop-filter: blur(30px) saturate(180%);
+  -webkit-backdrop-filter: blur(30px) saturate(180%);
+  box-shadow: var(--am-shadow);
+  color: var(--am-ink);
+}
+
+.agent-gate__title {
+  font-size: 13px;
+  font-weight: 600;
+}
+
+/* Blue is for the one navigational control and nothing else. */
+.agent-gate__reveal-hint {
+  color: var(--am-blue);
+  text-decoration: none;
+}
+
+.agent-gate__disclose {
+  color: var(--am-detail);
+}
+
+.agent-gate__disclose:hover {
+  background: var(--am-fill-quiet);
+  color: var(--am-ink);
+}
+
+.agent-gate__waiting {
+  font-size: 13px;
+  color: var(--am-ink);
+}
+
+.agent-gate__waiting-held {
+  color: var(--am-danger);
+}
+
+.agent-gate__note[data-tone='alarm'] {
+  color: var(--am-danger);
+  font-size: 11px;
+  font-weight: 500;
+}
+
+.agent-gate__note[data-tone='caution'] {
+  color: var(--am-caution);
+  font-size: 11px;
+  font-weight: 500;
+}
+
+/* Quiet while nothing is open. The colour belongs next to the control that
+   takes the risk, not to a card sitting at rest. */
+.agent-gate__note[data-resting] {
+  color: var(--am-detail);
+  font-weight: 500;
+}
+
+/* Bold and left aligned at the moment of the decision. */
+.agent-gate__consequence {
+  font-size: 13px;
+  font-weight: 600;
+}
+
+/* Concentric: the card is 16, this sits 8 in, so it is 8. */
+.agent-gate__revealed {
+  margin-top: 10px;
+  padding: 10px 12px;
+  border-left: 0;
+  border-radius: 8px;
+  background: var(--am-inset);
+}
+
+.agent-gate__detail {
+  font-family: var(--am-mono);
+  color: var(--am-detail);
+  font-size: 11.5px;
+}
+
+/* Exact capsules: 28px tall, 14px radius. */
+.agent-gate__approve,
+.agent-gate__approve-one,
+.agent-gate__deny,
+.agent-gate__hold {
+  height: 28px;
+  padding: 0 14px;
+  border-radius: 14px;
+  font-size: 13px;
+  font-weight: 500;
+  display: inline-flex;
+  align-items: center;
+}
+
+.agent-gate__approve {
+  background: var(--am-fill);
+  border: 0;
+  color: var(--am-ink);
+  font-weight: 600;
+}
+
+.agent-gate__deny {
+  background: var(--am-fill-quiet);
+  border: 0;
+  color: var(--am-ink);
+}
+
+.agent-gate__approve:hover,
+.agent-gate__deny:hover {
+  background: var(--am-fill-hover);
+}
+
+.agent-gate__hold,
+.agent-gate__approve-one {
+  background: transparent;
+  border: 1px solid color-mix(in srgb, var(--am-danger) 60%, transparent);
+  color: var(--am-danger);
+}
+
+.agent-gate__hold-fill {
+  background: color-mix(in srgb, var(--am-danger) 28%, transparent);
+}
+
+/* ---------- the strip and the trail ---------- */
+
+.agent-strip,
+.agent-trail {
+  font-family: var(--am-system);
+  font-size: 13px;
+  color: var(--am-ink);
+}
+
+.agent-strip__name {
+  font-family: var(--am-mono);
+  font-size: 12px;
+}
+
+.agent-trail__detail,
+.agent-strip__elapsed,
+.agent-trail__at {
+  font-family: var(--am-mono);
+  color: var(--am-detail);
+}

package/package.json

@@ -0,0 +1,97 @@
+{
+  "name": "agent-approvals",
+  "version": "0.7.0",
+  "description": "When an agent needs a person, this is the interface. React approval UI for when an agent spends money, sends messages or reaches private data. Works with Vercel's AI SDK out of the box.",
+  "keywords": [
+    "ai-sdk",
+    "vercel-ai-sdk",
+    "approval",
+    "human-in-the-loop",
+    "hitl",
+    "tool-approval",
+    "agent-ui",
+    "agentic",
+    "agent",
+    "agent-state",
+    "ai",
+    "llm",
+    "react",
+    "react-components",
+    "components",
+    "status-indicator",
+    "ui",
+    "typescript"
+  ],
+  "license": "MIT",
+  "author": "Ladan Johari",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ladanjohari/agent-approvals.git"
+  },
+  "bugs": {
+    "url": "https://github.com/ladanjohari/agent-approvals/issues"
+  },
+  "homepage": "https://ladanjohari.com/agent-approvals/",
+  "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./ai-sdk": {
+      "types": "./dist/ai-sdk/index.d.ts",
+      "import": "./dist/ai-sdk.js"
+    },
+    "./styles.css": "./dist/agent-approvals.css",
+    "./theme-macos.css": "./dist/theme-macos.css",
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "dev": "vite",
+    "dev:docs": "vite --config vite.docs.config.ts",
+    "build": "vite build && tsc -p tsconfig.build.json && cp src/theme-macos.css dist/theme-macos.css",
+    "build:docs": "vite build --config vite.docs.config.ts",
+    "typecheck": "tsc -b",
+    "lint": "oxlint",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "preview": "vite preview",
+    "prepublishOnly": "npm run build",
+    "rebuild": "node rebuild/next.mjs"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^7.0.0",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.3",
+    "@types/node": "^24.13.3",
+    "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.4",
+    "@vitejs/plugin-react": "^6.0.5",
+    "jsdom": "^30.0.1",
+    "oxlint": "^1.77.0",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
+    "typescript": "~6.0.3",
+    "vite": "^8.2.1",
+    "vitest": "^4.1.10"
+  },
+  "engines": {
+    "node": ">=20"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}