@dowel-ui/react 0.5.0 → 0.8.0

package/dist/components/ai-agent-plan/ai-agent-plan.js

@@ -23,12 +23,17 @@ function describeRevision(added, removed) {
 	return parts.join(", ");
 }
 const PlanContext = createContext(null);
+/** Display options, separate from PlanContext so a lone AgentPlanStep still works. */
+const PlanOptionsContext = createContext({
+	quietCompleted: false,
+	runningIndicator: "pulse"
+});
 function usePlanContext(component) {
 	const context = useContext(PlanContext);
 	if (!context) throw new Error(`${component} must be rendered inside <AgentPlan>.`);
 	return context;
 }
-function AgentPlan({ className, steps, label, children, ...props }) {
+function AgentPlan({ className, steps, label, children, quietCompleted = false, runningIndicator = "pulse", ...props }) {
 	const flat = useMemo(() => flatten(steps), [steps]);
 	const ids = flat.map((step) => step.id);
 	const [seen, setSeen] = useState(ids);
@@ -49,20 +54,27 @@ function AgentPlan({ className, steps, label, children, ...props }) {
 		flat,
 		currentIndex
 	]);
+	const options = useMemo(() => ({
+		quietCompleted,
+		runningIndicator
+	}), [quietCompleted, runningIndicator]);
 	return /* @__PURE__ */ jsx(PlanContext.Provider, {
 		value: context,
-		children: /* @__PURE__ */ jsxs("div", {
-			"data-slot": "agent-plan",
-			"aria-label": label,
-			role: "group",
-			className: cn("flex flex-col gap-2", className),
-			...props,
-			children: [children ?? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(AgentPlanSummary, {}), /* @__PURE__ */ jsx(AgentPlanSteps, {})] }), /* @__PURE__ */ jsx("span", {
-				"aria-live": "polite",
-				"data-slot": "agent-plan-revision",
-				className: "sr-only",
-				children: revision
-			})]
+		children: /* @__PURE__ */ jsx(PlanOptionsContext.Provider, {
+			value: options,
+			children: /* @__PURE__ */ jsxs("div", {
+				"data-slot": "agent-plan",
+				"aria-label": label,
+				role: "group",
+				className: cn("flex flex-col gap-2", className),
+				...props,
+				children: [children ?? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(AgentPlanSummary, {}), /* @__PURE__ */ jsx(AgentPlanSteps, {})] }), /* @__PURE__ */ jsx("span", {
+					"aria-live": "polite",
+					"data-slot": "agent-plan-revision",
+					className: "sr-only",
+					children: revision
+				})]
+			})
 		})
 	});
 }
@@ -90,36 +102,59 @@ function AgentPlanSteps({ className, ...props }) {
 	});
 }
 function AgentPlanStep({ className, step, nested = false, ...props }) {
-	const { status, title, detail, error, steps: children } = step;
+	const { status, title, detail, error, note, steps: children } = step;
+	const { quietCompleted, runningIndicator } = useContext(PlanOptionsContext);
+	const sweeping = runningIndicator === "sweep" && status === "running";
 	return /* @__PURE__ */ jsxs("li", {
 		"data-slot": "agent-plan-step",
 		"data-status": status,
 		"aria-current": status === "running" ? "step" : void 0,
-		className: cn("flex flex-col gap-1", nested && "ml-5", className),
+		className: cn("flex flex-col gap-1", nested && "ms-5", className),
 		...props,
 		children: [/* @__PURE__ */ jsxs("div", {
-			className: "flex items-start gap-2",
-			children: [/* @__PURE__ */ jsx(StepMarker, { status }), /* @__PURE__ */ jsxs("div", {
-				className: "flex min-w-0 flex-1 flex-col",
-				children: [
-					/* @__PURE__ */ jsxs("span", {
-						className: cn("text-sm", status === "pending" && "text-muted-foreground", status === "skipped" && "text-muted-foreground line-through", status === "failed" && "text-destructive", status === "running" && "font-medium"),
-						children: [title, /* @__PURE__ */ jsxs("span", {
-							className: "sr-only",
-							children: [", ", STATUS_LABEL[status]]
-						})]
-					}),
-					detail ? /* @__PURE__ */ jsx("span", {
-						className: "text-xs text-muted-foreground",
-						children: detail
-					}) : null,
-					status === "failed" && error ? /* @__PURE__ */ jsx("span", {
-						"data-slot": "agent-plan-error",
-						className: "text-xs text-destructive",
-						children: error
-					}) : null
-				]
-			})]
+			className: cn("flex items-start gap-2", sweeping && "relative"),
+			children: [
+				/* @__PURE__ */ jsx(StepMarker, {
+					status,
+					pulse: runningIndicator === "pulse"
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex min-w-0 flex-1 flex-col",
+					children: [
+						/* @__PURE__ */ jsxs("span", {
+							className: cn("text-sm", status === "pending" && "text-muted-foreground", status === "skipped" && "text-muted-foreground line-through", status === "failed" && "text-destructive", status === "running" && "font-medium", quietCompleted && "transition-[color,translate] duration-[calc(250ms*var(--motion-scale))] ease-[var(--ease-out-quint)]", quietCompleted && status === "done" && "translate-y-px text-muted-foreground"),
+							children: [title, /* @__PURE__ */ jsxs("span", {
+								className: "sr-only",
+								children: [", ", STATUS_LABEL[status]]
+							})]
+						}),
+						detail ? /* @__PURE__ */ jsx("span", {
+							className: "text-xs text-muted-foreground",
+							children: detail
+						}) : null,
+						status === "failed" && error ? /* @__PURE__ */ jsx("span", {
+							"data-slot": "agent-plan-error",
+							className: "text-xs text-destructive",
+							children: error
+						}) : null
+					]
+				}),
+				note !== void 0 && note !== null ? /* @__PURE__ */ jsx("span", {
+					"data-slot": "agent-plan-note",
+					className: "ms-auto shrink-0 text-xs text-muted-foreground tabular-nums",
+					children: note
+				}) : null,
+				sweeping ? /* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					"data-slot": "agent-plan-sweep",
+					className: "pointer-events-none absolute inset-x-0 bottom-0 h-px opacity-50",
+					style: {
+						backgroundImage: "linear-gradient(90deg, transparent, currentColor 50%, transparent)",
+						backgroundSize: "50% 100%",
+						backgroundRepeat: "no-repeat"
+					}
+				}) : null
+			]
 		}), children && children.length > 0 ? /* @__PURE__ */ jsx("ol", {
 			className: "flex list-none flex-col gap-1",
 			children: children.map((child) => /* @__PURE__ */ jsx(AgentPlanStep, {
@@ -129,25 +164,57 @@ function AgentPlanStep({ className, step, nested = false, ...props }) {
 		}) : null]
 	});
 }
+const PREFIX = "dowel-ai-agent-plan";
+const STYLES = `
+@keyframes ${PREFIX}-draw{from{stroke-dashoffset:1}}
+@keyframes ${PREFIX}-sweep{from{background-position-x:-100%}to{background-position-x:200%}}
+[data-slot=agent-plan-marker] [data-part=glyph]{stroke-dasharray:1 1;animation:${PREFIX}-draw calc(200ms * var(--motion-scale,1)) var(--ease-out-quint) both}
+[data-slot=agent-plan-sweep]{animation:${PREFIX}-sweep calc(1400ms * var(--motion-scale,1)) var(--ease-in-out-quint) infinite}
+[data-slot=agent-plan-sweep]:dir(rtl){animation-direction:reverse}
+`;
+const CHECK_PATH = "M 3.5 7.5 L 6 10 L 10.5 4.5";
+const CROSS_PATH = "M 5 5 L 9 9 M 9 5 L 5 9";
+/** A drawn glyph. Mounts when the status changes, which is what plays the draw. */
+function MarkerGlyph({ d }) {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 14 14",
+		fill: "none",
+		className: "size-3",
+		children: /* @__PURE__ */ jsx("path", {
+			"data-part": "glyph",
+			d,
+			pathLength: 1,
+			stroke: "currentColor",
+			strokeWidth: "1.8",
+			strokeLinecap: "round",
+			strokeLinejoin: "round"
+		})
+	});
+}
 /**
 * The status shape.
 *
 * aria-hidden throughout: every marker repeats what the step already states in
 * text, and announcing both means hearing the status twice per step.
 */
-function StepMarker({ status }) {
+function StepMarker({ status, pulse }) {
 	const base = "mt-0.5 grid size-4 shrink-0 place-items-center rounded-full border text-[9px]";
-	if (status === "running") return /* @__PURE__ */ jsx("span", {
+	const sheet = /* @__PURE__ */ jsx("style", {
+		href: PREFIX,
+		precedence: "dowel",
+		children: STYLES
+	});
+	if (status === "running") return /* @__PURE__ */ jsxs("span", {
 		"aria-hidden": "true",
 		"data-slot": "agent-plan-marker",
-		className: cn(base, "animate-pulse-soft border-primary bg-primary/15 text-primary"),
-		children: /* @__PURE__ */ jsx("span", { className: "size-1.5 rounded-full bg-primary" })
+		className: cn(base, pulse && "animate-pulse-soft", "border-primary bg-primary/15 text-primary"),
+		children: [sheet, /* @__PURE__ */ jsx("span", { className: "size-1.5 rounded-full bg-primary" })]
 	});
-	return /* @__PURE__ */ jsx("span", {
+	return /* @__PURE__ */ jsxs("span", {
 		"aria-hidden": "true",
 		"data-slot": "agent-plan-marker",
 		className: cn(base, status === "done" && "border-success bg-success text-success-foreground", status === "failed" && "border-destructive bg-destructive text-destructive-foreground", status === "skipped" && "border-border-strong text-muted-foreground", status === "pending" && "border-border-strong"),
-		children: status === "done" ? "✓" : status === "failed" ? "✕" : status === "skipped" ? "–" : null
+		children: [sheet, status === "done" ? /* @__PURE__ */ jsx(MarkerGlyph, { d: CHECK_PATH }, "done") : status === "failed" ? /* @__PURE__ */ jsx(MarkerGlyph, { d: CROSS_PATH }, "failed") : status === "skipped" ? "–" : null]
 	});
 }
 //#endregion

package/dist/components/ai-agent-plan/ai-agent-plan.js.map

@@ -1 +1 @@
-{"version":3,"file":"ai-agent-plan.js","names":[],"sources":["../../../src/components/ai-agent-plan/ai-agent-plan.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  createContext,\n  useContext,\n  useMemo,\n  useState,\n  type ComponentPropsWithRef,\n  type ReactNode,\n} from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\n/**\n * What an agent intends to do, and how far through it is.\n *\n * Not a stepper. A wizard's steps are decided up front and never change; an\n * agent's plan is a hypothesis it revises as it learns — it adds a step when a\n * lookup fails, drops one that turned out to be unnecessary, and reorders when\n * a dependency appears. Every stepper treats its step list as fixed, so a plan\n * rendered in one either silently mutates under the reader or re-renders from\n * scratch and loses their place.\n *\n * So revision is the feature here, not an edge case. When the plan changes, the\n * change is announced — \"the model added a step\" is information, and watching a\n * list quietly grow is not the same as being told.\n *\n * Approval is not here. Deciding whether a plan may run is a different\n * component with a different shape; this one displays and reports.\n */\n\nexport type StepStatus = \"pending\" | \"running\" | \"done\" | \"failed\" | \"skipped\";\n\nexport interface PlanStep {\n  id: string;\n  title: string;\n  status: StepStatus;\n  /** What the step will do, or what it found. Shown under the title. */\n  detail?: string;\n  /** Why it failed. Shown only when the status is \"failed\". */\n  error?: string;\n  /** One level of sub-steps. Deeper nesting is a tree, which this is not. */\n  steps?: PlanStep[];\n}\n\nconst STATUS_LABEL: Record<StepStatus, string> = {\n  pending: \"Not started\",\n  running: \"In progress\",\n  done: \"Done\",\n  failed: \"Failed\",\n  skipped: \"Skipped\",\n};\n\n/** Flattens one level, so counting and \"step N of M\" include sub-steps. */\nfunction flatten(steps: PlanStep[]): PlanStep[] {\n  return steps.flatMap((step) => [step, ...(step.steps ?? [])]);\n}\n\nfunction describeRevision(added: PlanStep[], removed: number): string {\n  const parts: string[] = [];\n  if (added.length === 1 && added[0]) parts.push(`Plan updated: added \"${added[0].title}\"`);\n  else if (added.length > 1) parts.push(`Plan updated: ${String(added.length)} steps added`);\n  if (removed === 1) parts.push(\"1 step removed\");\n  else if (removed > 1) parts.push(`${String(removed)} steps removed`);\n  return parts.join(\", \");\n}\n\ninterface PlanContextValue {\n  steps: PlanStep[];\n  flat: PlanStep[];\n  currentIndex: number;\n}\n\nconst PlanContext = createContext<PlanContextValue | null>(null);\n\nfunction usePlanContext(component: string): PlanContextValue {\n  const context = useContext(PlanContext);\n  if (!context) {\n    throw new Error(`${component} must be rendered inside <AgentPlan>.`);\n  }\n  return context;\n}\n\nexport interface AgentPlanProps extends Omit<ComponentPropsWithRef<\"div\">, \"children\"> {\n  steps: PlanStep[];\n  /** Names the plan, so the list is not an unlabelled sequence. */\n  label: string;\n  children?: ReactNode;\n}\n\nexport function AgentPlan({ className, steps, label, children, ...props }: AgentPlanProps) {\n  const flat = useMemo(() => flatten(steps), [steps]);\n  const ids = flat.map((step) => step.id);\n\n  // Revision detection, adjusted during render rather than in an effect: an\n  // effect would announce a frame after the change is already on screen, and a\n  // ref read during render is unsafe under concurrent rendering.\n  const [seen, setSeen] = useState<string[]>(ids);\n  const [revision, setRevision] = useState(\"\");\n\n  if (ids.join(\"\u0000\") !== seen.join(\"\u0000\")) {\n    const added = flat.filter((step) => !seen.includes(step.id));\n    const removed = seen.filter((id) => !ids.includes(id)).length;\n    setSeen(ids);\n    // A plan whose steps only changed status has not been revised. Only\n    // structural change is worth interrupting for.\n    setRevision(added.length > 0 || removed > 0 ? describeRevision(added, removed) : \"\");\n  }\n\n  const currentIndex = flat.findIndex((step) => step.status === \"running\");\n\n  const context = useMemo<PlanContextValue>(\n    () => ({ steps, flat, currentIndex }),\n    [steps, flat, currentIndex],\n  );\n\n  return (\n    <PlanContext.Provider value={context}>\n      <div\n        data-slot=\"agent-plan\"\n        aria-label={label}\n        role=\"group\"\n        className={cn(\"flex flex-col gap-2\", className)}\n        {...props}\n      >\n        {children ?? (\n          <>\n            <AgentPlanSummary />\n            <AgentPlanSteps />\n          </>\n        )}\n\n        {/* Structural changes only. Announcing every status transition would\n            talk over the reader continuously on a plan of any length. */}\n        <span aria-live=\"polite\" data-slot=\"agent-plan-revision\" className=\"sr-only\">\n          {revision}\n        </span>\n      </div>\n    </PlanContext.Provider>\n  );\n}\n\n/** \"Step 3 of 6\" plus the overall state, in words. */\nexport function AgentPlanSummary({ className, ...props }: ComponentPropsWithRef<\"p\">) {\n  const { flat, currentIndex } = usePlanContext(\"AgentPlanSummary\");\n\n  const done = flat.filter((step) => step.status === \"done\").length;\n  const failed = flat.filter((step) => step.status === \"failed\").length;\n  const running = currentIndex >= 0;\n  const started = flat.some((step) => step.status !== \"pending\");\n\n  const message = !started\n    ? `Proposed plan, ${String(flat.length)} steps`\n    : running\n      ? `Step ${String(currentIndex + 1)} of ${String(flat.length)}`\n      : failed > 0\n        ? `${String(done)} of ${String(flat.length)} done, ${String(failed)} failed`\n        : `${String(done)} of ${String(flat.length)} done`;\n\n  return (\n    <p\n      data-slot=\"agent-plan-summary\"\n      className={cn(\"text-xs text-muted-foreground tabular-nums\", className)}\n      {...props}\n    >\n      {message}\n    </p>\n  );\n}\n\nexport function AgentPlanSteps({ className, ...props }: ComponentPropsWithRef<\"ol\">) {\n  const { steps } = usePlanContext(\"AgentPlanSteps\");\n\n  return (\n    // An ordered list: a plan is a sequence, and the order carries meaning that\n    // an unordered list would throw away.\n    <ol\n      data-slot=\"agent-plan-steps\"\n      className={cn(\"flex list-none flex-col gap-1\", className)}\n      {...props}\n    >\n      {steps.map((step) => (\n        <AgentPlanStep key={step.id} step={step} />\n      ))}\n    </ol>\n  );\n}\n\nexport interface AgentPlanStepProps extends Omit<ComponentPropsWithRef<\"li\">, \"children\"> {\n  step: PlanStep;\n  /** Set on sub-steps. Not part of the public API surface. */\n  nested?: boolean;\n}\n\nexport function AgentPlanStep({\n  className,\n  step,\n  nested = false,\n  ...props\n}: AgentPlanStepProps) {\n  const { status, title, detail, error, steps: children } = step;\n\n  return (\n    <li\n      data-slot=\"agent-plan-step\"\n      data-status={status}\n      // Marks where the reader is in the sequence without moving focus, which\n      // would fight anyone reading ahead.\n      aria-current={status === \"running\" ? \"step\" : undefined}\n      className={cn(\"flex flex-col gap-1\", nested && \"ml-5\", className)}\n      {...props}\n    >\n      <div className=\"flex items-start gap-2\">\n        <StepMarker status={status} />\n\n        <div className=\"flex min-w-0 flex-1 flex-col\">\n          <span\n            className={cn(\n              \"text-sm\",\n              status === \"pending\" && \"text-muted-foreground\",\n              status === \"skipped\" && \"text-muted-foreground line-through\",\n              status === \"failed\" && \"text-destructive\",\n              status === \"running\" && \"font-medium\",\n            )}\n          >\n            {title}\n            {/* Status in text, always. The marker is a shape and a colour, and\n                neither is information on its own. */}\n            <span className=\"sr-only\">, {STATUS_LABEL[status]}</span>\n          </span>\n\n          {detail ? <span className=\"text-xs text-muted-foreground\">{detail}</span> : null}\n          {status === \"failed\" && error ? (\n            <span data-slot=\"agent-plan-error\" className=\"text-xs text-destructive\">\n              {error}\n            </span>\n          ) : null}\n        </div>\n      </div>\n\n      {children && children.length > 0 ? (\n        <ol className=\"flex list-none flex-col gap-1\">\n          {children.map((child) => (\n            <AgentPlanStep key={child.id} step={child} nested />\n          ))}\n        </ol>\n      ) : null}\n    </li>\n  );\n}\n\n/**\n * The status shape.\n *\n * aria-hidden throughout: every marker repeats what the step already states in\n * text, and announcing both means hearing the status twice per step.\n */\nfunction StepMarker({ status }: { status: StepStatus }) {\n  const base = \"mt-0.5 grid size-4 shrink-0 place-items-center rounded-full border text-[9px]\";\n\n  if (status === \"running\") {\n    return (\n      // Deliberately not data-motion=\"indicator\". The bar for that exemption is\n      // that stopping the animation would say something false, and it would\n      // not: the step already states \"In progress\" in text and carries\n      // aria-current. This pulse is reinforcement, so under reduced motion it\n      // stops like any other decoration.\n      <span\n        aria-hidden=\"true\"\n        data-slot=\"agent-plan-marker\"\n        className={cn(base, \"animate-pulse-soft border-primary bg-primary/15 text-primary\")}\n      >\n        <span className=\"size-1.5 rounded-full bg-primary\" />\n      </span>\n    );\n  }\n\n  return (\n    <span\n      aria-hidden=\"true\"\n      data-slot=\"agent-plan-marker\"\n      className={cn(\n        base,\n        status === \"done\" && \"border-success bg-success text-success-foreground\",\n        status === \"failed\" && \"border-destructive bg-destructive text-destructive-foreground\",\n        status === \"skipped\" && \"border-border-strong text-muted-foreground\",\n        status === \"pending\" && \"border-border-strong\",\n      )}\n    >\n      {status === \"done\" ? \"✓\" : status === \"failed\" ? \"✕\" : status === \"skipped\" ? \"–\" : null}\n    </span>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"ai-agent-plan.js","names":[],"sources":["../../../src/components/ai-agent-plan/ai-agent-plan.tsx"],"sourcesContent":["\"use client\";\n\n// Motion from SmoothUI AI Task List (MIT, © 2024 Eduardo Calvo). See THIRD_PARTY_NOTICES.md.\nimport {\n  createContext,\n  useContext,\n  useMemo,\n  useState,\n  type ComponentPropsWithRef,\n  type ReactNode,\n} from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\n/**\n * What an agent intends to do, and how far through it is.\n *\n * Not a stepper. A wizard's steps are decided up front and never change; an\n * agent's plan is a hypothesis it revises as it learns — it adds a step when a\n * lookup fails, drops one that turned out to be unnecessary, and reorders when\n * a dependency appears. Every stepper treats its step list as fixed, so a plan\n * rendered in one either silently mutates under the reader or re-renders from\n * scratch and loses their place.\n *\n * So revision is the feature here, not an edge case. When the plan changes, the\n * change is announced — \"the model added a step\" is information, and watching a\n * list quietly grow is not the same as being told.\n *\n * Approval is not here. Deciding whether a plan may run is a different\n * component with a different shape; this one displays and reports.\n */\n\nexport type StepStatus = \"pending\" | \"running\" | \"done\" | \"failed\" | \"skipped\";\n\nexport interface PlanStep {\n  id: string;\n  title: string;\n  status: StepStatus;\n  /** What the step will do, or what it found. Shown under the title. */\n  detail?: string;\n  /** Why it failed. Shown only when the status is \"failed\". */\n  error?: string;\n  /** One level of sub-steps. Deeper nesting is a tree, which this is not. */\n  steps?: PlanStep[];\n  /** A short end-aligned note, e.g. \"12/12\" or \"3 files\". Read after the title. */\n  note?: ReactNode;\n}\n\nconst STATUS_LABEL: Record<StepStatus, string> = {\n  pending: \"Not started\",\n  running: \"In progress\",\n  done: \"Done\",\n  failed: \"Failed\",\n  skipped: \"Skipped\",\n};\n\n/** Flattens one level, so counting and \"step N of M\" include sub-steps. */\nfunction flatten(steps: PlanStep[]): PlanStep[] {\n  return steps.flatMap((step) => [step, ...(step.steps ?? [])]);\n}\n\nfunction describeRevision(added: PlanStep[], removed: number): string {\n  const parts: string[] = [];\n  if (added.length === 1 && added[0]) parts.push(`Plan updated: added \"${added[0].title}\"`);\n  else if (added.length > 1) parts.push(`Plan updated: ${String(added.length)} steps added`);\n  if (removed === 1) parts.push(\"1 step removed\");\n  else if (removed > 1) parts.push(`${String(removed)} steps removed`);\n  return parts.join(\", \");\n}\n\ninterface PlanContextValue {\n  steps: PlanStep[];\n  flat: PlanStep[];\n  currentIndex: number;\n}\n\nconst PlanContext = createContext<PlanContextValue | null>(null);\n\n/** How the running step is marked. */\nexport type PlanRunningIndicator = \"pulse\" | \"sweep\";\n\ninterface PlanOptions {\n  quietCompleted: boolean;\n  runningIndicator: PlanRunningIndicator;\n}\n\n/** Display options, separate from PlanContext so a lone AgentPlanStep still works. */\nconst PlanOptionsContext = createContext<PlanOptions>({\n  quietCompleted: false,\n  runningIndicator: \"pulse\",\n});\n\nfunction usePlanContext(component: string): PlanContextValue {\n  const context = useContext(PlanContext);\n  if (!context) {\n    throw new Error(`${component} must be rendered inside <AgentPlan>.`);\n  }\n  return context;\n}\n\nexport interface AgentPlanProps extends Omit<ComponentPropsWithRef<\"div\">, \"children\"> {\n  steps: PlanStep[];\n  /** Names the plan, so the list is not an unlabelled sequence. */\n  label: string;\n  children?: ReactNode;\n  /** Completed steps recede, so the running one is what stands out. */\n  quietCompleted?: boolean;\n  /**\n   * How the running step is marked: `pulse` pulses its marker; `sweep` runs a\n   * light along the bottom of its row instead — one moving thing at a time.\n   */\n  runningIndicator?: PlanRunningIndicator;\n}\n\nexport function AgentPlan({\n  className,\n  steps,\n  label,\n  children,\n  quietCompleted = false,\n  runningIndicator = \"pulse\",\n  ...props\n}: AgentPlanProps) {\n  const flat = useMemo(() => flatten(steps), [steps]);\n  const ids = flat.map((step) => step.id);\n\n  // Revision detection, adjusted during render rather than in an effect: an\n  // effect would announce a frame after the change is already on screen, and a\n  // ref read during render is unsafe under concurrent rendering.\n  const [seen, setSeen] = useState<string[]>(ids);\n  const [revision, setRevision] = useState(\"\");\n\n  if (ids.join(\"\\u0000\") !== seen.join(\"\\u0000\")) {\n    const added = flat.filter((step) => !seen.includes(step.id));\n    const removed = seen.filter((id) => !ids.includes(id)).length;\n    setSeen(ids);\n    // A plan whose steps only changed status has not been revised. Only\n    // structural change is worth interrupting for.\n    setRevision(added.length > 0 || removed > 0 ? describeRevision(added, removed) : \"\");\n  }\n\n  const currentIndex = flat.findIndex((step) => step.status === \"running\");\n\n  const context = useMemo<PlanContextValue>(\n    () => ({ steps, flat, currentIndex }),\n    [steps, flat, currentIndex],\n  );\n\n  const options = useMemo<PlanOptions>(\n    () => ({ quietCompleted, runningIndicator }),\n    [quietCompleted, runningIndicator],\n  );\n\n  return (\n    <PlanContext.Provider value={context}>\n      <PlanOptionsContext.Provider value={options}>\n        <div\n          data-slot=\"agent-plan\"\n          aria-label={label}\n          role=\"group\"\n          className={cn(\"flex flex-col gap-2\", className)}\n          {...props}\n        >\n          {children ?? (\n            <>\n              <AgentPlanSummary />\n              <AgentPlanSteps />\n            </>\n          )}\n\n          {/* Structural changes only. Announcing every status transition would\n            talk over the reader continuously on a plan of any length. */}\n          <span aria-live=\"polite\" data-slot=\"agent-plan-revision\" className=\"sr-only\">\n            {revision}\n          </span>\n        </div>\n      </PlanOptionsContext.Provider>\n    </PlanContext.Provider>\n  );\n}\n\n/** \"Step 3 of 6\" plus the overall state, in words. */\nexport function AgentPlanSummary({ className, ...props }: ComponentPropsWithRef<\"p\">) {\n  const { flat, currentIndex } = usePlanContext(\"AgentPlanSummary\");\n\n  const done = flat.filter((step) => step.status === \"done\").length;\n  const failed = flat.filter((step) => step.status === \"failed\").length;\n  const running = currentIndex >= 0;\n  const started = flat.some((step) => step.status !== \"pending\");\n\n  const message = !started\n    ? `Proposed plan, ${String(flat.length)} steps`\n    : running\n      ? `Step ${String(currentIndex + 1)} of ${String(flat.length)}`\n      : failed > 0\n        ? `${String(done)} of ${String(flat.length)} done, ${String(failed)} failed`\n        : `${String(done)} of ${String(flat.length)} done`;\n\n  return (\n    <p\n      data-slot=\"agent-plan-summary\"\n      className={cn(\"text-xs text-muted-foreground tabular-nums\", className)}\n      {...props}\n    >\n      {message}\n    </p>\n  );\n}\n\nexport function AgentPlanSteps({ className, ...props }: ComponentPropsWithRef<\"ol\">) {\n  const { steps } = usePlanContext(\"AgentPlanSteps\");\n\n  return (\n    // An ordered list: a plan is a sequence, and the order carries meaning that\n    // an unordered list would throw away.\n    <ol\n      data-slot=\"agent-plan-steps\"\n      className={cn(\"flex list-none flex-col gap-1\", className)}\n      {...props}\n    >\n      {steps.map((step) => (\n        <AgentPlanStep key={step.id} step={step} />\n      ))}\n    </ol>\n  );\n}\n\nexport interface AgentPlanStepProps extends Omit<ComponentPropsWithRef<\"li\">, \"children\"> {\n  step: PlanStep;\n  /** Set on sub-steps. Not part of the public API surface. */\n  nested?: boolean;\n}\n\nexport function AgentPlanStep({\n  className,\n  step,\n  nested = false,\n  ...props\n}: AgentPlanStepProps) {\n  const { status, title, detail, error, note, steps: children } = step;\n  const { quietCompleted, runningIndicator } = useContext(PlanOptionsContext);\n  const sweeping = runningIndicator === \"sweep\" && status === \"running\";\n\n  return (\n    <li\n      data-slot=\"agent-plan-step\"\n      data-status={status}\n      // Marks where the reader is in the sequence without moving focus, which\n      // would fight anyone reading ahead.\n      aria-current={status === \"running\" ? \"step\" : undefined}\n      className={cn(\"flex flex-col gap-1\", nested && \"ms-5\", className)}\n      {...props}\n    >\n      <div className={cn(\"flex items-start gap-2\", sweeping && \"relative\")}>\n        <StepMarker status={status} pulse={runningIndicator === \"pulse\"} />\n\n        <div className=\"flex min-w-0 flex-1 flex-col\">\n          <span\n            className={cn(\n              \"text-sm\",\n              status === \"pending\" && \"text-muted-foreground\",\n              status === \"skipped\" && \"text-muted-foreground line-through\",\n              status === \"failed\" && \"text-destructive\",\n              status === \"running\" && \"font-medium\",\n              // A token rather than opacity, so the contrast audit covers it.\n              quietCompleted &&\n                \"transition-[color,translate] duration-[calc(250ms*var(--motion-scale))] ease-[var(--ease-out-quint)]\",\n              quietCompleted && status === \"done\" && \"translate-y-px text-muted-foreground\",\n            )}\n          >\n            {title}\n            {/* Status in text, always. The marker is a shape and a colour, and\n                neither is information on its own. */}\n            <span className=\"sr-only\">, {STATUS_LABEL[status]}</span>\n          </span>\n\n          {detail ? <span className=\"text-xs text-muted-foreground\">{detail}</span> : null}\n          {status === \"failed\" && error ? (\n            <span data-slot=\"agent-plan-error\" className=\"text-xs text-destructive\">\n              {error}\n            </span>\n          ) : null}\n        </div>\n\n        {note !== undefined && note !== null ? (\n          <span\n            data-slot=\"agent-plan-note\"\n            className=\"ms-auto shrink-0 text-xs text-muted-foreground tabular-nums\"\n          >\n            {note}\n          </span>\n        ) : null}\n\n        {sweeping ? (\n          // Decoration, like the pulse it replaces: the step already says \"In\n          // progress\" and carries aria-current, so this stops under reduced\n          // motion rather than being exempted as an indicator.\n          <span\n            aria-hidden=\"true\"\n            data-slot=\"agent-plan-sweep\"\n            className=\"pointer-events-none absolute inset-x-0 bottom-0 h-px opacity-50\"\n            style={{\n              backgroundImage:\n                \"linear-gradient(90deg, transparent, currentColor 50%, transparent)\",\n              backgroundSize: \"50% 100%\",\n              backgroundRepeat: \"no-repeat\",\n            }}\n          />\n        ) : null}\n      </div>\n\n      {children && children.length > 0 ? (\n        <ol className=\"flex list-none flex-col gap-1\">\n          {children.map((child) => (\n            <AgentPlanStep key={child.id} step={child} nested />\n          ))}\n        </ol>\n      ) : null}\n    </li>\n  );\n}\n\nconst PREFIX = \"dowel-ai-agent-plan\";\n\n/* The check and cross draw in when a step finishes; the sweep travels along\n * the running row, and runs the other way in RTL. */\nconst STYLES = `\n@keyframes ${PREFIX}-draw{from{stroke-dashoffset:1}}\n@keyframes ${PREFIX}-sweep{from{background-position-x:-100%}to{background-position-x:200%}}\n[data-slot=agent-plan-marker] [data-part=glyph]{stroke-dasharray:1 1;animation:${PREFIX}-draw calc(200ms * var(--motion-scale,1)) var(--ease-out-quint) both}\n[data-slot=agent-plan-sweep]{animation:${PREFIX}-sweep calc(1400ms * var(--motion-scale,1)) var(--ease-in-out-quint) infinite}\n[data-slot=agent-plan-sweep]:dir(rtl){animation-direction:reverse}\n`;\n\nconst CHECK_PATH = \"M 3.5 7.5 L 6 10 L 10.5 4.5\";\nconst CROSS_PATH = \"M 5 5 L 9 9 M 9 5 L 5 9\";\n\n/** A drawn glyph. Mounts when the status changes, which is what plays the draw. */\nfunction MarkerGlyph({ d }: { d: string }) {\n  return (\n    <svg viewBox=\"0 0 14 14\" fill=\"none\" className=\"size-3\">\n      <path\n        data-part=\"glyph\"\n        d={d}\n        pathLength={1}\n        stroke=\"currentColor\"\n        strokeWidth=\"1.8\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n    </svg>\n  );\n}\n\n/**\n * The status shape.\n *\n * aria-hidden throughout: every marker repeats what the step already states in\n * text, and announcing both means hearing the status twice per step.\n */\nfunction StepMarker({ status, pulse }: { status: StepStatus; pulse: boolean }) {\n  const base = \"mt-0.5 grid size-4 shrink-0 place-items-center rounded-full border text-[9px]\";\n  const sheet = (\n    <style href={PREFIX} precedence=\"dowel\">\n      {STYLES}\n    </style>\n  );\n\n  if (status === \"running\") {\n    return (\n      // Deliberately not data-motion=\"indicator\". The bar for that exemption is\n      // that stopping the animation would say something false, and it would\n      // not: the step already states \"In progress\" in text and carries\n      // aria-current. This pulse is reinforcement, so under reduced motion it\n      // stops like any other decoration.\n      <span\n        aria-hidden=\"true\"\n        data-slot=\"agent-plan-marker\"\n        className={cn(\n          base,\n          pulse && \"animate-pulse-soft\",\n          \"border-primary bg-primary/15 text-primary\",\n        )}\n      >\n        {sheet}\n        <span className=\"size-1.5 rounded-full bg-primary\" />\n      </span>\n    );\n  }\n\n  return (\n    <span\n      aria-hidden=\"true\"\n      data-slot=\"agent-plan-marker\"\n      className={cn(\n        base,\n        status === \"done\" && \"border-success bg-success text-success-foreground\",\n        status === \"failed\" && \"border-destructive bg-destructive text-destructive-foreground\",\n        status === \"skipped\" && \"border-border-strong text-muted-foreground\",\n        status === \"pending\" && \"border-border-strong\",\n      )}\n    >\n      {sheet}\n      {status === \"done\" ? (\n        <MarkerGlyph key=\"done\" d={CHECK_PATH} />\n      ) : status === \"failed\" ? (\n        <MarkerGlyph key=\"failed\" d={CROSS_PATH} />\n      ) : status === \"skipped\" ? (\n        \"–\"\n      ) : null}\n    </span>\n  );\n}\n"],"mappings":"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"}

package/dist/components/ai-agent-plan/index.d.ts

@@ -1,2 +1,2 @@
-import { AgentPlan, AgentPlanProps, AgentPlanStep, AgentPlanStepProps, AgentPlanSteps, AgentPlanSummary, PlanStep, StepStatus } from "./ai-agent-plan.js";
-export { AgentPlan, type AgentPlanProps, AgentPlanStep, type AgentPlanStepProps, AgentPlanSteps, AgentPlanSummary, type PlanStep, type StepStatus };
+import { AgentPlan, AgentPlanProps, AgentPlanStep, AgentPlanStepProps, AgentPlanSteps, AgentPlanSummary, PlanRunningIndicator, PlanStep, StepStatus } from "./ai-agent-plan.js";
+export { AgentPlan, type AgentPlanProps, AgentPlanStep, type AgentPlanStepProps, AgentPlanSteps, AgentPlanSummary, type PlanRunningIndicator, type PlanStep, type StepStatus };

package/dist/components/ai-agent-plan/meta.js

@@ -9,7 +9,7 @@ const meta = defineMeta({
 	dependencies: [],
 	registryDependencies: [],
 	files: ["ai-agent-plan.tsx"],
-	a11y: "An ordered list, because a plan is a sequence and the order carries meaning an unordered list would discard. The running step carries aria-current=\"step\", which marks the reader's place without moving focus and fighting anyone reading ahead. Every status is stated in text as well as drawn, and the markers are aria-hidden so the status is not heard twice per step. The live region reports structural revisions only — announcing every status transition would talk over the reader continuously on a plan of any length."
+	a11y: "An ordered list, because a plan is a sequence and the order carries meaning an unordered list would discard. The running step carries aria-current=\"step\", which marks the reader's place without moving focus and fighting anyone reading ahead. Every status is stated in text as well as drawn, and the markers are aria-hidden so the status is not heard twice per step. The live region reports structural revisions only — announcing every status transition would talk over the reader continuously on a plan of any length. Drawn checks and crosses live inside the hidden markers; quietCompleted dims finished steps with a contrast-audited token, and the optional sweep is decoration that stops under reduced motion."
 });
 //#endregion
 export { meta };

package/dist/components/ai-agent-plan/meta.js.map

@@ -1 +1 @@
-{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/ai-agent-plan/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"ai-agent-plan\",\n  title: \"AI Agent Plan\",\n  description: \"What an agent intends to do — including when it changes its mind mid-run.\",\n  category: \"ai\",\n  status: \"stable\",\n  dependencies: [],\n  registryDependencies: [],\n  files: [\"ai-agent-plan.tsx\"],\n  a11y:\n    \"An ordered list, because a plan is a sequence and the order carries meaning an unordered \" +\n    'list would discard. The running step carries aria-current=\"step\", which marks the reader\\'s ' +\n    \"place without moving focus and fighting anyone reading ahead. Every status is stated in text \" +\n    \"as well as drawn, and the markers are aria-hidden so the status is not heard twice per step. \" +\n    \"The live region reports structural revisions only — announcing every status transition would \" +\n    \"talk over the reader continuously on a plan of any length.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aAAa;CACb,UAAU;CACV,QAAQ;CACR,cAAc,CAAC;CACf,sBAAsB,CAAC;CACvB,OAAO,CAAC,mBAAmB;CAC3B,MACE;AAMJ,CAAC"}
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/ai-agent-plan/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"ai-agent-plan\",\n  title: \"AI Agent Plan\",\n  description: \"What an agent intends to do — including when it changes its mind mid-run.\",\n  category: \"ai\",\n  status: \"stable\",\n  dependencies: [],\n  registryDependencies: [],\n  files: [\"ai-agent-plan.tsx\"],\n  a11y:\n    \"An ordered list, because a plan is a sequence and the order carries meaning an unordered \" +\n    'list would discard. The running step carries aria-current=\"step\", which marks the reader\\'s ' +\n    \"place without moving focus and fighting anyone reading ahead. Every status is stated in text \" +\n    \"as well as drawn, and the markers are aria-hidden so the status is not heard twice per step. \" +\n    \"The live region reports structural revisions only — announcing every status transition would \" +\n    \"talk over the reader continuously on a plan of any length. Drawn checks and crosses live \" +\n    \"inside the hidden markers; quietCompleted dims finished steps with a contrast-audited token, \" +\n    \"and the optional sweep is decoration that stops under reduced motion.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aAAa;CACb,UAAU;CACV,QAAQ;CACR,cAAc,CAAC;CACf,sBAAsB,CAAC;CACvB,OAAO,CAAC,mBAAmB;CAC3B,MACE;AAQJ,CAAC"}

package/dist/components/ai-agent-status/ai-agent-status.d.ts

@@ -10,7 +10,7 @@ import { ComponentPropsWithRef } from "react";
  */
 type AgentState = "idle" | "thinking" | "working" | "waiting" | "done" | "error";
 declare const agentStatusVariants: (props?: ({
-  state?: "done" | "error" | "idle" | "thinking" | "working" | "waiting" | null | undefined;
+  state?: "done" | "thinking" | "error" | "idle" | "working" | "waiting" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 interface AgentStatusProps extends ComponentPropsWithRef<"span">, VariantProps<typeof agentStatusVariants> {
   state?: AgentState;

package/dist/components/ai-approval-request/ai-approval-request.d.ts

@@ -60,8 +60,15 @@ interface ApprovalRequestProps extends Omit<ComponentPropsWithRef<"section">, "o
   /** Set once decided, to render the outcome instead of the controls. */
   decision?: ApprovalDecision;
   children?: ReactNode;
+  /**
+   * Keep focus in the request as its controls swap: onto the outcome when a
+   * decision lands, into the reason field when Deny… opens, and back to Deny…
+   * from Back. Only acts when focus was already inside the request, so a
+   * decision applied elsewhere (another tab, a replay) never steals focus.
+   */
+  manageFocus?: boolean;
 }
-declare function ApprovalRequest({ className, tool, summary, arguments: proposed, fields, onDecision, streaming, irreversible, decision, children, ...props }: ApprovalRequestProps): import("react").JSX.Element;
+declare function ApprovalRequest({ className, tool, summary, arguments: proposed, fields, onDecision, streaming, irreversible, decision, children, manageFocus, ref, ...props }: ApprovalRequestProps): import("react").JSX.Element;
 //#endregion
 export { ApprovalDecision, ApprovalField, ApprovalRequest, ApprovalRequestProps, ApprovalScope };
 //# sourceMappingURL=ai-approval-request.d.ts.map

package/dist/components/ai-approval-request/ai-approval-request.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ai-approval-request.d.ts","names":[],"sources":["../../../src/components/ai-approval-request/ai-approval-request.tsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;KA2BY;KAEA;EAEN;EACA,OAAO;EACP,WAAW;EACX;;EAEA;EAAiB;;UAEN;EACf;EACA;;EAEA;;EAEA;;UAGe,6BAA6B,KAC5C;;EAIA;;EAEA;;EAEA,WAAW;;EAEX,QAAQ;EACR,aAAa,UAAU;;;;;EAKvB;;;;;EAKA;;EAEA,WAAW;EACX,WAAW;;iBAGG,kBACd,WACA,MACA,SACA,WAAW,UACX,QACA,YACA,WACA,cACA,UACA,aACG,SACF,uCAAoB,IAAA"}
+{"version":3,"file":"ai-approval-request.d.ts","names":[],"sources":["../../../src/components/ai-approval-request/ai-approval-request.tsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;KAoCY;KAEA;EAEN;EACA,OAAO;EACP,WAAW;EACX;;EAEA;EAAiB;;UAEN;EACf;EACA;;EAEA;;EAEA;;UAGe,6BAA6B,KAC5C;;EAIA;;EAEA;;EAEA,WAAW;;EAEX,QAAQ;EACR,aAAa,UAAU;;;;;EAKvB;;;;;EAKA;;EAEA,WAAW;EACX,WAAW;;;;;;;EAOX;;iBAgBc,kBACd,WACA,MACA,SACA,WAAW,UACX,QACA,YACA,WACA,cACA,UACA,UACA,aACA,QACG,SACF,uCAAoB,IAAA"}

package/dist/components/ai-approval-request/ai-approval-request.js

@@ -2,13 +2,50 @@
 import { disabledStyles, focusRing } from "../../lib/styles.js";
 import { cn } from "../../lib/utils.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useId, useMemo, useState } from "react";
+import { useId, useLayoutEffect, useMemo, useRef, useState } from "react";
 //#region src/components/ai-approval-request/ai-approval-request.tsx
-function ApprovalRequest({ className, tool, summary, arguments: proposed, fields, onDecision, streaming = false, irreversible, decision, children, ...props }) {
+const PREFIX = "dowel-ai-approval-request";
+const STYLES = `
+@keyframes ${PREFIX}-resolve{from{opacity:0;scale:.97}}
+@keyframes ${PREFIX}-reveal{from{opacity:0;translate:0 4px}}
+[data-slot=approval-request][data-resolved=live] [data-slot=approval-outcome]{animation:${PREFIX}-resolve calc(250ms * var(--motion-scale,1)) var(--ease-out-quint) both}
+[data-slot=approval-deny]{animation:${PREFIX}-reveal calc(200ms * var(--motion-scale,1)) var(--ease-out-quint) both}
+`;
+function ApprovalRequest({ className, tool, summary, arguments: proposed, fields, onDecision, streaming = false, irreversible, decision, children, manageFocus = true, ref, ...props }) {
 	const headingId = useId();
 	const [edits, setEdits] = useState({});
 	const [denying, setDenying] = useState(false);
 	const [reason, setReason] = useState("");
+	const [initiallyDecided] = useState(decision !== void 0);
+	const sectionRef = useRef(null);
+	const outcomeRef = useRef(null);
+	const reasonRef = useRef(null);
+	const denyRef = useRef(null);
+	const focusTarget = useRef(null);
+	function queueFocus(target) {
+		if (!manageFocus) return;
+		const inside = sectionRef.current?.contains(document.activeElement) ?? false;
+		focusTarget.current = inside ? target : null;
+	}
+	useLayoutEffect(() => {
+		const target = focusTarget.current;
+		if (!target) return;
+		const element = target === "outcome" ? outcomeRef.current : target === "reason" ? reasonRef.current : denyRef.current;
+		if (!element) return;
+		focusTarget.current = null;
+		const active = document.activeElement;
+		if (!active || active === document.body || (sectionRef.current?.contains(active) ?? false)) element.focus();
+	}, [decision !== void 0, denying]);
+	const setSectionRef = (node) => {
+		sectionRef.current = node;
+		if (typeof ref === "function") return ref(node);
+		if (ref) ref.current = node;
+	};
+	const sheet = /* @__PURE__ */ jsx("style", {
+		href: PREFIX,
+		precedence: "dowel",
+		children: STYLES
+	});
 	const values = useMemo(() => ({
 		...proposed,
 		...edits
@@ -17,22 +54,31 @@ function ApprovalRequest({ className, tool, summary, arguments: proposed, fields
 	const missing = fields.filter((field) => proposed[field.name] === void 0);
 	const settled = !streaming && missing.length === 0;
 	if (decision) return /* @__PURE__ */ jsxs("section", {
+		ref: setSectionRef,
 		"data-slot": "approval-request",
 		"data-state": decision.approved ? "approved" : "denied",
+		"data-resolved": initiallyDecided ? void 0 : "live",
 		"aria-labelledby": headingId,
 		className: cn("rounded-lg border p-4 text-sm", decision.approved ? "border-border bg-muted/40" : "border-border bg-muted/40", className),
 		...props,
-		children: [/* @__PURE__ */ jsx("h3", {
-			id: headingId,
-			className: "text-sm font-medium",
-			children: summary
-		}), /* @__PURE__ */ jsx("p", {
-			"data-slot": "approval-outcome",
-			className: "mt-1 text-xs text-muted-foreground",
-			children: decision.approved ? `Approved ${decision.scope === "always" ? "for every call to this tool" : "once"}` + (decision.edited.length > 0 ? `, with ${String(decision.edited.length)} argument${decision.edited.length === 1 ? "" : "s"} corrected` : "") : `Denied${decision.reason ? `: ${decision.reason}` : ""}`
-		})]
+		children: [
+			sheet,
+			/* @__PURE__ */ jsx("h3", {
+				id: headingId,
+				className: "text-sm font-medium",
+				children: summary
+			}),
+			/* @__PURE__ */ jsx("p", {
+				ref: outcomeRef,
+				tabIndex: -1,
+				"data-slot": "approval-outcome",
+				className: "mt-1 text-xs text-muted-foreground outline-none",
+				children: decision.approved ? `Approved ${decision.scope === "always" ? "for every call to this tool" : "once"}` + (decision.edited.length > 0 ? `, with ${String(decision.edited.length)} argument${decision.edited.length === 1 ? "" : "s"} corrected` : "") : `Denied${decision.reason ? `: ${decision.reason}` : ""}`
+			})
+		]
 	});
 	return /* @__PURE__ */ jsxs("section", {
+		ref: setSectionRef,
 		"data-slot": "approval-request",
 		"data-state": settled ? "pending" : "forming",
 		"aria-labelledby": headingId,
@@ -40,6 +86,7 @@ function ApprovalRequest({ className, tool, summary, arguments: proposed, fields
 		className: cn("rounded-lg border border-border bg-card p-4", className),
 		...props,
 		children: [
+			sheet,
 			/* @__PURE__ */ jsxs("div", {
 				className: "flex flex-wrap items-baseline justify-between gap-2",
 				children: [/* @__PURE__ */ jsx("h3", {
@@ -77,6 +124,7 @@ function ApprovalRequest({ className, tool, summary, arguments: proposed, fields
 				children: irreversible
 			}) : null,
 			denying ? /* @__PURE__ */ jsxs("div", {
+				"data-slot": "approval-deny",
 				className: "mt-3 flex flex-col gap-2",
 				children: [
 					/* @__PURE__ */ jsx("label", {
@@ -85,6 +133,7 @@ function ApprovalRequest({ className, tool, summary, arguments: proposed, fields
 						children: "Why not? The model sees this."
 					}),
 					/* @__PURE__ */ jsx("textarea", {
+						ref: reasonRef,
 						id: `${headingId}-reason`,
 						rows: 2,
 						value: reason,
@@ -98,6 +147,7 @@ function ApprovalRequest({ className, tool, summary, arguments: proposed, fields
 						children: [/* @__PURE__ */ jsx(Action, {
 							variant: "destructive",
 							onClick: () => {
+								queueFocus("outcome");
 								onDecision({
 									approved: false,
 									reason: reason.trim() || void 0
@@ -106,6 +156,7 @@ function ApprovalRequest({ className, tool, summary, arguments: proposed, fields
 							children: "Deny"
 						}), /* @__PURE__ */ jsx(Action, {
 							onClick: () => {
+								queueFocus("deny");
 								setDenying(false);
 							},
 							children: "Back"
@@ -119,6 +170,7 @@ function ApprovalRequest({ className, tool, summary, arguments: proposed, fields
 						variant: "primary",
 						disabled: !settled,
 						onClick: () => {
+							queueFocus("outcome");
 							onDecision({
 								approved: true,
 								scope: "once",
@@ -131,6 +183,7 @@ function ApprovalRequest({ className, tool, summary, arguments: proposed, fields
 					/* @__PURE__ */ jsxs(Action, {
 						disabled: !settled,
 						onClick: () => {
+							queueFocus("outcome");
 							onDecision({
 								approved: true,
 								scope: "always",
@@ -141,7 +194,9 @@ function ApprovalRequest({ className, tool, summary, arguments: proposed, fields
 						children: ["Always allow ", tool]
 					}),
 					/* @__PURE__ */ jsx(Action, {
+						ref: denyRef,
 						onClick: () => {
+							queueFocus("reason");
 							setDenying(true);
 						},
 						children: "Deny…"
@@ -208,7 +263,7 @@ function ApprovalArgument({ field, value, arrived, changed, onChange }) {
 function Action({ className, variant = "default", ...props }) {
 	return /* @__PURE__ */ jsx("button", {
 		type: "button",
-		className: cn("rounded-md border px-2.5 py-1 text-xs font-medium transition-colors", variant === "primary" && "border-primary bg-primary text-primary-foreground hover:bg-primary-hover", variant === "destructive" && "border-destructive bg-destructive text-destructive-foreground hover:bg-destructive/90", variant === "default" && "border-input bg-background hover:bg-accent hover:text-accent-foreground", focusRing, disabledStyles, className),
+		className: cn("rounded-md border px-2.5 py-1 text-xs font-medium", "transition-[color,background-color,border-color,scale] duration-[var(--duration-fast)] ease-[var(--ease-out-quint)] active:scale-[0.99]", variant === "primary" && "border-primary bg-primary text-primary-foreground hover:bg-primary-hover", variant === "destructive" && "border-destructive bg-destructive text-destructive-foreground hover:bg-destructive/90", variant === "default" && "border-input bg-background hover:bg-accent hover:text-accent-foreground", focusRing, disabledStyles, className),
 		...props
 	});
 }

package/dist/components/ai-approval-request/ai-approval-request.js.map

@@ -1 +1 @@
-{"version":3,"file":"ai-approval-request.js","names":[],"sources":["../../../src/components/ai-approval-request/ai-approval-request.tsx"],"sourcesContent":["\"use client\";\n\nimport { useId, useMemo, useState, type ComponentPropsWithRef, type ReactNode } from \"react\";\n\nimport { disabledStyles, focusRing } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * The gate between an agent deciding to act and it acting.\n *\n * Two things separate this from the confirmations that already exist.\n *\n * The first is that the proposed arguments are editable. Every implementation\n * surveyed returns a boolean over a read-only payload, which forces a false\n * choice: approve a call whose recipient is wrong, or deny it and make the\n * model try again. \"Approve this, but fix the address first\" is the answer\n * people actually want, and it is only possible if the arguments are fields.\n * Edited values come back in the decision, and are marked as changed so an\n * audit trail can tell the model's proposal from the human's correction.\n *\n * The second is that it renders while the arguments are still arriving. The\n * common implementation returns null until the tool input is complete, which\n * means nothing is on screen at the moment approval becomes relevant and the\n * request appears abruptly, fully formed. Here the request is visible as it\n * forms, with the decision held until there is something whole to decide on.\n */\n\nexport type ApprovalScope = \"once\" | \"always\";\n\nexport type ApprovalDecision =\n  | {\n      approved: true;\n      scope: ApprovalScope;\n      arguments: Record<string, string>;\n      edited: string[];\n    }\n  | { approved: false; reason?: string };\n\nexport interface ApprovalField {\n  name: string;\n  label: string;\n  /** A textarea instead of a single line. For message bodies and prompts. */\n  multiline?: boolean;\n  /** Locked arguments are shown but not editable — an id, a resolved amount. */\n  readOnly?: boolean;\n}\n\nexport interface ApprovalRequestProps extends Omit<\n  ComponentPropsWithRef<\"section\">,\n  \"onSubmit\" | \"children\"\n> {\n  /** The tool the model wants to call, as it named it. */\n  tool: string;\n  /** What the call will do, in the reader's language rather than the API's. */\n  summary: string;\n  /** Proposed arguments. Missing keys are treated as still arriving. */\n  arguments: Record<string, string>;\n  /** Which arguments to show, in order, and which may be changed. */\n  fields: ApprovalField[];\n  onDecision: (decision: ApprovalDecision) => void;\n  /**\n   * True while the model is still producing the arguments. The request renders\n   * anyway; only the decision waits.\n   */\n  streaming?: boolean;\n  /**\n   * Said plainly above the controls when the call cannot be taken back. Not a\n   * severity colour — the sentence is the warning.\n   */\n  irreversible?: string;\n  /** Set once decided, to render the outcome instead of the controls. */\n  decision?: ApprovalDecision;\n  children?: ReactNode;\n}\n\nexport function ApprovalRequest({\n  className,\n  tool,\n  summary,\n  arguments: proposed,\n  fields,\n  onDecision,\n  streaming = false,\n  irreversible,\n  decision,\n  children,\n  ...props\n}: ApprovalRequestProps) {\n  const headingId = useId();\n  const [edits, setEdits] = useState<Record<string, string>>({});\n  const [denying, setDenying] = useState(false);\n  const [reason, setReason] = useState(\"\");\n\n  // The model's proposal with the human's corrections applied on top. Keeping\n  // them apart is what lets the component say which is which.\n  const values = useMemo(() => ({ ...proposed, ...edits }), [proposed, edits]);\n\n  const edited = useMemo(\n    () => Object.keys(edits).filter((name) => edits[name] !== proposed[name]),\n    [edits, proposed],\n  );\n\n  const missing = fields.filter((field) => proposed[field.name] === undefined);\n  const settled = !streaming && missing.length === 0;\n\n  if (decision) {\n    return (\n      <section\n        data-slot=\"approval-request\"\n        data-state={decision.approved ? \"approved\" : \"denied\"}\n        aria-labelledby={headingId}\n        className={cn(\n          \"rounded-lg border p-4 text-sm\",\n          decision.approved ? \"border-border bg-muted/40\" : \"border-border bg-muted/40\",\n          className,\n        )}\n        {...props}\n      >\n        <h3 id={headingId} className=\"text-sm font-medium\">\n          {summary}\n        </h3>\n        <p data-slot=\"approval-outcome\" className=\"mt-1 text-xs text-muted-foreground\">\n          {decision.approved\n            ? `Approved ${decision.scope === \"always\" ? \"for every call to this tool\" : \"once\"}` +\n              (decision.edited.length > 0\n                ? `, with ${String(decision.edited.length)} argument${decision.edited.length === 1 ? \"\" : \"s\"} corrected`\n                : \"\")\n            : `Denied${decision.reason ? `: ${decision.reason}` : \"\"}`}\n        </p>\n      </section>\n    );\n  }\n\n  return (\n    <section\n      data-slot=\"approval-request\"\n      data-state={settled ? \"pending\" : \"forming\"}\n      aria-labelledby={headingId}\n      // Busy while the arguments are still arriving, so a reader is told the\n      // request is not yet whole rather than acting on half of it.\n      aria-busy={!settled}\n      className={cn(\"rounded-lg border border-border bg-card p-4\", className)}\n      {...props}\n    >\n      <div className=\"flex flex-wrap items-baseline justify-between gap-2\">\n        <h3 id={headingId} className=\"text-sm font-medium\">\n          {summary}\n        </h3>\n        <code className=\"rounded bg-muted px-1.5 py-0.5 font-mono text-2xs text-muted-foreground\">\n          {tool}\n        </code>\n      </div>\n\n      <dl className=\"mt-3 flex flex-col gap-2.5\">\n        {fields.map((field) => {\n          const arrived = proposed[field.name] !== undefined;\n          const changed = edited.includes(field.name);\n\n          return (\n            <ApprovalArgument\n              key={field.name}\n              field={field}\n              value={values[field.name] ?? \"\"}\n              arrived={arrived}\n              changed={changed}\n              onChange={(next) => {\n                setEdits((current) => ({ ...current, [field.name]: next }));\n              }}\n            />\n          );\n        })}\n      </dl>\n\n      {children}\n\n      {irreversible ? (\n        <p data-slot=\"approval-warning\" className=\"mt-3 text-xs text-destructive\">\n          {irreversible}\n        </p>\n      ) : null}\n\n      {denying ? (\n        <div className=\"mt-3 flex flex-col gap-2\">\n          <label htmlFor={`${headingId}-reason`} className=\"text-xs text-muted-foreground\">\n            Why not? The model sees this.\n          </label>\n          <textarea\n            id={`${headingId}-reason`}\n            rows={2}\n            value={reason}\n            onChange={(event) => {\n              setReason(event.target.value);\n            }}\n            className={cn(\n              \"w-full resize-none rounded-md border border-input bg-background px-2 py-1.5 text-sm\",\n              focusRing,\n            )}\n          />\n          <div className=\"flex flex-wrap gap-2\">\n            <Action\n              variant=\"destructive\"\n              onClick={() => {\n                onDecision({ approved: false, reason: reason.trim() || undefined });\n              }}\n            >\n              Deny\n            </Action>\n            <Action\n              onClick={() => {\n                setDenying(false);\n              }}\n            >\n              Back\n            </Action>\n          </div>\n        </div>\n      ) : (\n        <div className=\"mt-4 flex flex-wrap items-center gap-2\">\n          <Action\n            variant=\"primary\"\n            disabled={!settled}\n            onClick={() => {\n              onDecision({ approved: true, scope: \"once\", arguments: values, edited });\n            }}\n          >\n            {edited.length > 0 ? \"Approve with changes\" : \"Approve once\"}\n          </Action>\n\n          {/* Scope is a separate decision from approval, and blanket consent\n              should never be the easiest button to reach. */}\n          <Action\n            disabled={!settled}\n            onClick={() => {\n              onDecision({ approved: true, scope: \"always\", arguments: values, edited });\n            }}\n          >\n            Always allow {tool}\n          </Action>\n\n          <Action\n            onClick={() => {\n              setDenying(true);\n            }}\n          >\n            Deny…\n          </Action>\n\n          {!settled ? (\n            <span aria-live=\"polite\" className=\"text-xs text-muted-foreground\">\n              Waiting for the model to finish the request\n            </span>\n          ) : null}\n        </div>\n      )}\n    </section>\n  );\n}\n\nfunction ApprovalArgument({\n  field,\n  value,\n  arrived,\n  changed,\n  onChange,\n}: {\n  field: ApprovalField;\n  value: string;\n  arrived: boolean;\n  changed: boolean;\n  onChange: (value: string) => void;\n}) {\n  const id = useId();\n  const changedId = useId();\n  const editable = !field.readOnly && arrived;\n\n  return (\n    <div\n      data-slot=\"approval-argument\"\n      data-changed={changed || undefined}\n      className=\"flex flex-col gap-1\"\n    >\n      <dt className=\"flex items-baseline gap-1\">\n        <label htmlFor={editable ? id : undefined} className=\"text-xs text-muted-foreground\">\n          {field.label}\n        </label>\n        {/* Outside the label, and attached as a description instead. Inside it,\n            editing a field would rename the field — a screen reader user would\n            hear its accessible name change under them mid-edit. Marked in text\n            rather than by border colour alone, because an audit trail has to\n            tell the model's proposal from the human's correction. */}\n        {changed ? (\n          <span id={changedId} className=\"text-xs text-warning\">\n            · changed from the model&rsquo;s proposal\n          </span>\n        ) : null}\n      </dt>\n      <dd className=\"m-0\">\n        {!arrived ? (\n          <span\n            aria-hidden=\"true\"\n            className=\"block h-8 w-full animate-pulse-soft rounded-md bg-muted\"\n          />\n        ) : editable ? (\n          field.multiline ? (\n            <textarea\n              id={id}\n              aria-describedby={changed ? changedId : undefined}\n              rows={3}\n              value={value}\n              onChange={(event) => {\n                onChange(event.target.value);\n              }}\n              className={cn(\n                \"w-full resize-none rounded-md border border-input bg-background px-2 py-1.5 font-mono text-xs\",\n                changed && \"border-warning\",\n                focusRing,\n              )}\n            />\n          ) : (\n            <input\n              id={id}\n              type=\"text\"\n              aria-describedby={changed ? changedId : undefined}\n              value={value}\n              onChange={(event) => {\n                onChange(event.target.value);\n              }}\n              className={cn(\n                \"w-full rounded-md border border-input bg-background px-2 py-1.5 font-mono text-xs\",\n                changed && \"border-warning\",\n                focusRing,\n              )}\n            />\n          )\n        ) : (\n          <p className=\"rounded-md bg-muted px-2 py-1.5 font-mono text-xs break-words\">\n            {value}\n          </p>\n        )}\n      </dd>\n    </div>\n  );\n}\n\nfunction Action({\n  className,\n  variant = \"default\",\n  ...props\n}: ComponentPropsWithRef<\"button\"> & { variant?: \"default\" | \"primary\" | \"destructive\" }) {\n  return (\n    <button\n      type=\"button\"\n      className={cn(\n        \"rounded-md border px-2.5 py-1 text-xs font-medium transition-colors\",\n        variant === \"primary\" &&\n          \"border-primary bg-primary text-primary-foreground hover:bg-primary-hover\",\n        variant === \"destructive\" &&\n          \"border-destructive bg-destructive text-destructive-foreground hover:bg-destructive/90\",\n        variant === \"default\" &&\n          \"border-input bg-background hover:bg-accent hover:text-accent-foreground\",\n        focusRing,\n        disabledStyles,\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"ai-approval-request.js","names":[],"sources":["../../../src/components/ai-approval-request/ai-approval-request.tsx"],"sourcesContent":["\"use client\";\n\n// Motion from SmoothUI AI Approval (MIT, © 2024 Eduardo Calvo). See THIRD_PARTY_NOTICES.md.\nimport {\n  useId,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n  type ComponentPropsWithRef,\n  type ReactNode,\n} from \"react\";\n\nimport { disabledStyles, focusRing } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * The gate between an agent deciding to act and it acting.\n *\n * Two things separate this from the confirmations that already exist.\n *\n * The first is that the proposed arguments are editable. Every implementation\n * surveyed returns a boolean over a read-only payload, which forces a false\n * choice: approve a call whose recipient is wrong, or deny it and make the\n * model try again. \"Approve this, but fix the address first\" is the answer\n * people actually want, and it is only possible if the arguments are fields.\n * Edited values come back in the decision, and are marked as changed so an\n * audit trail can tell the model's proposal from the human's correction.\n *\n * The second is that it renders while the arguments are still arriving. The\n * common implementation returns null until the tool input is complete, which\n * means nothing is on screen at the moment approval becomes relevant and the\n * request appears abruptly, fully formed. Here the request is visible as it\n * forms, with the decision held until there is something whole to decide on.\n */\n\nexport type ApprovalScope = \"once\" | \"always\";\n\nexport type ApprovalDecision =\n  | {\n      approved: true;\n      scope: ApprovalScope;\n      arguments: Record<string, string>;\n      edited: string[];\n    }\n  | { approved: false; reason?: string };\n\nexport interface ApprovalField {\n  name: string;\n  label: string;\n  /** A textarea instead of a single line. For message bodies and prompts. */\n  multiline?: boolean;\n  /** Locked arguments are shown but not editable — an id, a resolved amount. */\n  readOnly?: boolean;\n}\n\nexport interface ApprovalRequestProps extends Omit<\n  ComponentPropsWithRef<\"section\">,\n  \"onSubmit\" | \"children\"\n> {\n  /** The tool the model wants to call, as it named it. */\n  tool: string;\n  /** What the call will do, in the reader's language rather than the API's. */\n  summary: string;\n  /** Proposed arguments. Missing keys are treated as still arriving. */\n  arguments: Record<string, string>;\n  /** Which arguments to show, in order, and which may be changed. */\n  fields: ApprovalField[];\n  onDecision: (decision: ApprovalDecision) => void;\n  /**\n   * True while the model is still producing the arguments. The request renders\n   * anyway; only the decision waits.\n   */\n  streaming?: boolean;\n  /**\n   * Said plainly above the controls when the call cannot be taken back. Not a\n   * severity colour — the sentence is the warning.\n   */\n  irreversible?: string;\n  /** Set once decided, to render the outcome instead of the controls. */\n  decision?: ApprovalDecision;\n  children?: ReactNode;\n  /**\n   * Keep focus in the request as its controls swap: onto the outcome when a\n   * decision lands, into the reason field when Deny… opens, and back to Deny…\n   * from Back. Only acts when focus was already inside the request, so a\n   * decision applied elsewhere (another tab, a replay) never steals focus.\n   */\n  manageFocus?: boolean;\n}\n\nconst PREFIX = \"dowel-ai-approval-request\";\n\n/* The outcome resolves in when a decision lands live (a replayed one does not\n * animate), and the deny panel rises in. */\nconst STYLES = `\n@keyframes ${PREFIX}-resolve{from{opacity:0;scale:.97}}\n@keyframes ${PREFIX}-reveal{from{opacity:0;translate:0 4px}}\n[data-slot=approval-request][data-resolved=live] [data-slot=approval-outcome]{animation:${PREFIX}-resolve calc(250ms * var(--motion-scale,1)) var(--ease-out-quint) both}\n[data-slot=approval-deny]{animation:${PREFIX}-reveal calc(200ms * var(--motion-scale,1)) var(--ease-out-quint) both}\n`;\n\ntype FocusTarget = \"outcome\" | \"reason\" | \"deny\";\n\nexport function ApprovalRequest({\n  className,\n  tool,\n  summary,\n  arguments: proposed,\n  fields,\n  onDecision,\n  streaming = false,\n  irreversible,\n  decision,\n  children,\n  manageFocus = true,\n  ref,\n  ...props\n}: ApprovalRequestProps) {\n  const headingId = useId();\n  const [edits, setEdits] = useState<Record<string, string>>({});\n  const [denying, setDenying] = useState(false);\n  const [reason, setReason] = useState(\"\");\n\n  // A decision present on first render is a replay: it neither animates nor\n  // takes focus.\n  const [initiallyDecided] = useState(decision !== undefined);\n  const sectionRef = useRef<HTMLElement | null>(null);\n  const outcomeRef = useRef<HTMLParagraphElement | null>(null);\n  const reasonRef = useRef<HTMLTextAreaElement | null>(null);\n  const denyRef = useRef<HTMLButtonElement | null>(null);\n  // Where focus should go after the next swap. Set only by the reader's own\n  // actions, and only while focus is inside the request.\n  const focusTarget = useRef<FocusTarget | null>(null);\n\n  function queueFocus(target: FocusTarget) {\n    if (!manageFocus) return;\n    const inside = sectionRef.current?.contains(document.activeElement) ?? false;\n    focusTarget.current = inside ? target : null;\n  }\n\n  const decided = decision !== undefined;\n  useLayoutEffect(() => {\n    const target = focusTarget.current;\n    if (!target) return;\n    const element =\n      target === \"outcome\"\n        ? outcomeRef.current\n        : target === \"reason\"\n          ? reasonRef.current\n          : denyRef.current;\n    if (!element) return;\n    focusTarget.current = null;\n    // If the reader moved on while an async decision was pending, leave them be.\n    const active = document.activeElement;\n    const stillHere =\n      !active || active === document.body || (sectionRef.current?.contains(active) ?? false);\n    if (stillHere) element.focus();\n  }, [decided, denying]);\n\n  const setSectionRef = (node: HTMLElement | null) => {\n    sectionRef.current = node;\n    if (typeof ref === \"function\") return ref(node);\n    if (ref) ref.current = node;\n  };\n\n  const sheet = (\n    <style href={PREFIX} precedence=\"dowel\">\n      {STYLES}\n    </style>\n  );\n\n  // The model's proposal with the human's corrections applied on top. Keeping\n  // them apart is what lets the component say which is which.\n  const values = useMemo(() => ({ ...proposed, ...edits }), [proposed, edits]);\n\n  const edited = useMemo(\n    () => Object.keys(edits).filter((name) => edits[name] !== proposed[name]),\n    [edits, proposed],\n  );\n\n  const missing = fields.filter((field) => proposed[field.name] === undefined);\n  const settled = !streaming && missing.length === 0;\n\n  if (decision) {\n    return (\n      <section\n        ref={setSectionRef}\n        data-slot=\"approval-request\"\n        data-state={decision.approved ? \"approved\" : \"denied\"}\n        data-resolved={initiallyDecided ? undefined : \"live\"}\n        aria-labelledby={headingId}\n        className={cn(\n          \"rounded-lg border p-4 text-sm\",\n          decision.approved ? \"border-border bg-muted/40\" : \"border-border bg-muted/40\",\n          className,\n        )}\n        {...props}\n      >\n        {sheet}\n        <h3 id={headingId} className=\"text-sm font-medium\">\n          {summary}\n        </h3>\n        {/* tabIndex -1: a focus target for the person who just decided, so\n            they hear the outcome, but never a Tab stop. */}\n        <p\n          ref={outcomeRef}\n          tabIndex={-1}\n          data-slot=\"approval-outcome\"\n          className=\"mt-1 text-xs text-muted-foreground outline-none\"\n        >\n          {decision.approved\n            ? `Approved ${decision.scope === \"always\" ? \"for every call to this tool\" : \"once\"}` +\n              (decision.edited.length > 0\n                ? `, with ${String(decision.edited.length)} argument${decision.edited.length === 1 ? \"\" : \"s\"} corrected`\n                : \"\")\n            : `Denied${decision.reason ? `: ${decision.reason}` : \"\"}`}\n        </p>\n      </section>\n    );\n  }\n\n  return (\n    <section\n      ref={setSectionRef}\n      data-slot=\"approval-request\"\n      data-state={settled ? \"pending\" : \"forming\"}\n      aria-labelledby={headingId}\n      // Busy while the arguments are still arriving, so a reader is told the\n      // request is not yet whole rather than acting on half of it.\n      aria-busy={!settled}\n      className={cn(\"rounded-lg border border-border bg-card p-4\", className)}\n      {...props}\n    >\n      {sheet}\n      <div className=\"flex flex-wrap items-baseline justify-between gap-2\">\n        <h3 id={headingId} className=\"text-sm font-medium\">\n          {summary}\n        </h3>\n        <code className=\"rounded bg-muted px-1.5 py-0.5 font-mono text-2xs text-muted-foreground\">\n          {tool}\n        </code>\n      </div>\n\n      <dl className=\"mt-3 flex flex-col gap-2.5\">\n        {fields.map((field) => {\n          const arrived = proposed[field.name] !== undefined;\n          const changed = edited.includes(field.name);\n\n          return (\n            <ApprovalArgument\n              key={field.name}\n              field={field}\n              value={values[field.name] ?? \"\"}\n              arrived={arrived}\n              changed={changed}\n              onChange={(next) => {\n                setEdits((current) => ({ ...current, [field.name]: next }));\n              }}\n            />\n          );\n        })}\n      </dl>\n\n      {children}\n\n      {irreversible ? (\n        <p data-slot=\"approval-warning\" className=\"mt-3 text-xs text-destructive\">\n          {irreversible}\n        </p>\n      ) : null}\n\n      {denying ? (\n        <div data-slot=\"approval-deny\" className=\"mt-3 flex flex-col gap-2\">\n          <label htmlFor={`${headingId}-reason`} className=\"text-xs text-muted-foreground\">\n            Why not? The model sees this.\n          </label>\n          <textarea\n            ref={reasonRef}\n            id={`${headingId}-reason`}\n            rows={2}\n            value={reason}\n            onChange={(event) => {\n              setReason(event.target.value);\n            }}\n            className={cn(\n              \"w-full resize-none rounded-md border border-input bg-background px-2 py-1.5 text-sm\",\n              focusRing,\n            )}\n          />\n          <div className=\"flex flex-wrap gap-2\">\n            <Action\n              variant=\"destructive\"\n              onClick={() => {\n                queueFocus(\"outcome\");\n                onDecision({ approved: false, reason: reason.trim() || undefined });\n              }}\n            >\n              Deny\n            </Action>\n            <Action\n              onClick={() => {\n                queueFocus(\"deny\");\n                setDenying(false);\n              }}\n            >\n              Back\n            </Action>\n          </div>\n        </div>\n      ) : (\n        <div className=\"mt-4 flex flex-wrap items-center gap-2\">\n          <Action\n            variant=\"primary\"\n            disabled={!settled}\n            onClick={() => {\n              queueFocus(\"outcome\");\n              onDecision({ approved: true, scope: \"once\", arguments: values, edited });\n            }}\n          >\n            {edited.length > 0 ? \"Approve with changes\" : \"Approve once\"}\n          </Action>\n\n          {/* Scope is a separate decision from approval, and blanket consent\n              should never be the easiest button to reach. */}\n          <Action\n            disabled={!settled}\n            onClick={() => {\n              queueFocus(\"outcome\");\n              onDecision({ approved: true, scope: \"always\", arguments: values, edited });\n            }}\n          >\n            Always allow {tool}\n          </Action>\n\n          <Action\n            ref={denyRef}\n            onClick={() => {\n              queueFocus(\"reason\");\n              setDenying(true);\n            }}\n          >\n            Deny…\n          </Action>\n\n          {!settled ? (\n            <span aria-live=\"polite\" className=\"text-xs text-muted-foreground\">\n              Waiting for the model to finish the request\n            </span>\n          ) : null}\n        </div>\n      )}\n    </section>\n  );\n}\n\nfunction ApprovalArgument({\n  field,\n  value,\n  arrived,\n  changed,\n  onChange,\n}: {\n  field: ApprovalField;\n  value: string;\n  arrived: boolean;\n  changed: boolean;\n  onChange: (value: string) => void;\n}) {\n  const id = useId();\n  const changedId = useId();\n  const editable = !field.readOnly && arrived;\n\n  return (\n    <div\n      data-slot=\"approval-argument\"\n      data-changed={changed || undefined}\n      className=\"flex flex-col gap-1\"\n    >\n      <dt className=\"flex items-baseline gap-1\">\n        <label htmlFor={editable ? id : undefined} className=\"text-xs text-muted-foreground\">\n          {field.label}\n        </label>\n        {/* Outside the label, and attached as a description instead. Inside it,\n            editing a field would rename the field — a screen reader user would\n            hear its accessible name change under them mid-edit. Marked in text\n            rather than by border colour alone, because an audit trail has to\n            tell the model's proposal from the human's correction. */}\n        {changed ? (\n          <span id={changedId} className=\"text-xs text-warning\">\n            · changed from the model&rsquo;s proposal\n          </span>\n        ) : null}\n      </dt>\n      <dd className=\"m-0\">\n        {!arrived ? (\n          <span\n            aria-hidden=\"true\"\n            className=\"block h-8 w-full animate-pulse-soft rounded-md bg-muted\"\n          />\n        ) : editable ? (\n          field.multiline ? (\n            <textarea\n              id={id}\n              aria-describedby={changed ? changedId : undefined}\n              rows={3}\n              value={value}\n              onChange={(event) => {\n                onChange(event.target.value);\n              }}\n              className={cn(\n                \"w-full resize-none rounded-md border border-input bg-background px-2 py-1.5 font-mono text-xs\",\n                changed && \"border-warning\",\n                focusRing,\n              )}\n            />\n          ) : (\n            <input\n              id={id}\n              type=\"text\"\n              aria-describedby={changed ? changedId : undefined}\n              value={value}\n              onChange={(event) => {\n                onChange(event.target.value);\n              }}\n              className={cn(\n                \"w-full rounded-md border border-input bg-background px-2 py-1.5 font-mono text-xs\",\n                changed && \"border-warning\",\n                focusRing,\n              )}\n            />\n          )\n        ) : (\n          <p className=\"rounded-md bg-muted px-2 py-1.5 font-mono text-xs break-words\">\n            {value}\n          </p>\n        )}\n      </dd>\n    </div>\n  );\n}\n\nfunction Action({\n  className,\n  variant = \"default\",\n  ...props\n}: ComponentPropsWithRef<\"button\"> & { variant?: \"default\" | \"primary\" | \"destructive\" }) {\n  return (\n    <button\n      type=\"button\"\n      className={cn(\n        \"rounded-md border px-2.5 py-1 text-xs font-medium\",\n        \"transition-[color,background-color,border-color,scale] duration-[var(--duration-fast)] ease-[var(--ease-out-quint)] active:scale-[0.99]\",\n        variant === \"primary\" &&\n          \"border-primary bg-primary text-primary-foreground hover:bg-primary-hover\",\n        variant === \"destructive\" &&\n          \"border-destructive bg-destructive text-destructive-foreground hover:bg-destructive/90\",\n        variant === \"default\" &&\n          \"border-input bg-background hover:bg-accent hover:text-accent-foreground\",\n        focusRing,\n        disabledStyles,\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n"],"mappings":"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"}