@sableui/react 0.16.0 → 0.18.0

package/dist/lib/chart/heat.js

@@ -0,0 +1,55 @@
+// src/lib/chart/heat.ts
+function quantile(sorted, p) {
+  if (!sorted.length) return 0;
+  const i = (sorted.length - 1) * p;
+  const lo = Math.floor(i);
+  const hi = Math.ceil(i);
+  return sorted[lo] + (sorted[hi] - sorted[lo]) * (i - lo);
+}
+function activityLevels(values, { levels = 5, scale = "quantile" } = {}) {
+  const steps = Math.max(2, Math.round(levels));
+  const top = steps - 1;
+  const positive = values.filter((v) => v > 0).sort((a, b) => a - b);
+  const stats = { min: positive[0] ?? 0, max: positive.at(-1) ?? 0, levels: steps };
+  const clamp = (l) => Math.min(top, Math.max(0, Math.round(l)));
+  if (typeof scale === "function") {
+    return { thresholds: [], level: (v) => v > 0 ? Math.max(1, clamp(scale(v, stats))) : 0 };
+  }
+  let thresholds;
+  if (Array.isArray(scale)) {
+    thresholds = scale.slice(0, top);
+  } else if (scale === "linear") {
+    thresholds = Array.from({ length: top }, (_, k) => k === 0 ? Number.MIN_VALUE : stats.max * k / top);
+  } else {
+    thresholds = Array.from({ length: top }, (_, k) => quantile(positive, k / top));
+  }
+  return {
+    thresholds,
+    level: (v) => {
+      if (!(v > 0)) return 0;
+      let l = 1;
+      for (let k = 1; k < thresholds.length; k++) if (v >= thresholds[k]) l = k + 1;
+      return l;
+    }
+  };
+}
+var HEAT_EMPTY = "color-mix(in oklch, var(--foreground) 8%, transparent)";
+function heatColor(base, level, levels) {
+  if (level <= 0) return HEAT_EMPTY;
+  const top = Math.max(1, levels - 1);
+  if (level >= top) return base;
+  const share = Math.round(35 + 65 * (level - 1) / (top - 1));
+  return `color-mix(in oklch, ${base} ${share}%, ${HEAT_EMPTY})`;
+}
+function levelNames(levels) {
+  if (levels === 5) return ["None", "Low", "Medium-low", "Medium-high", "High"];
+  if (levels === 2) return ["None", "Some"];
+  if (levels === 3) return ["None", "Low", "High"];
+  return Array.from({ length: levels }, (_, k) => k === 0 ? "None" : `Level ${k} of ${levels - 1}`);
+}
+export {
+  HEAT_EMPTY,
+  activityLevels,
+  heatColor,
+  levelNames
+};

package/dist/lib/focus-return.js

@@ -0,0 +1,53 @@
+// src/lib/focus-return.tsx
+import { createContext, useCallback, useContext, useMemo, useRef, useState } from "react";
+var FocusReturnContext = createContext(null);
+function focusedElement() {
+  if (typeof document === "undefined") return null;
+  let element = document.activeElement;
+  while (element?.shadowRoot?.activeElement) element = element.shadowRoot.activeElement;
+  return element instanceof HTMLElement && element !== document.body ? element : null;
+}
+function useFocusReturn(open, onOpenChange) {
+  const [opener, setOpener] = useState(null);
+  const popupRef = useRef(null);
+  const [wasOpen, setWasOpen] = useState(false);
+  if (open !== void 0 && open !== wasOpen) {
+    setWasOpen(open);
+    if (open) setOpener(focusedElement());
+  }
+  const handleOpenChange = useCallback(
+    (next, ...rest) => {
+      if (next && open === void 0) setOpener(focusedElement());
+      onOpenChange?.(next, ...rest);
+    },
+    [open, onOpenChange]
+  );
+  const value = useMemo(
+    () => ({
+      popupRef(node) {
+        popupRef.current = node;
+      },
+      // Base UI reads finalFocus when the popup closes, from the latest props,
+      // so a new function per opener is picked up.
+      finalFocus() {
+        const target = opener;
+        if (!target?.isConnected) return true;
+        const active = focusedElement();
+        const popup = popupRef.current;
+        if (active && active !== target && popup && !popup.contains(active)) return false;
+        return target;
+      }
+    }),
+    [opener]
+  );
+  return { onOpenChange: handleOpenChange, focusReturn: value };
+}
+var FocusReturnProvider = FocusReturnContext.Provider;
+function useFocusReturnDefault() {
+  return useContext(FocusReturnContext);
+}
+export {
+  FocusReturnProvider,
+  useFocusReturn,
+  useFocusReturnDefault
+};

package/dist/lib/taxonomy.js

@@ -90,6 +90,7 @@ var COMPONENT_TAXONOMY = {
   BottomNav: ["Navigation", "page"],
   NavigationMenu: ["Navigation", "page"],
   Pagination: ["Navigation", "either"],
+  SectionRail: ["Navigation", "page"],
   ShowMore: ["Navigation", "page"],
   SideNav: ["Navigation", "page"],
   Sidebar: ["Navigation", "page"],
@@ -130,6 +131,7 @@ var COMPONENT_TAXONOMY = {
   RadarChart: ["Charts", "page"],
   RadialChart: ["Charts", "page"],
   Sparkline: ["Charts", "either"],
+  ActivityHeatmap: ["Charts", "either"],
   /* ── Data display ─────────────────────────────────────────────────────────
      Showing records and readings. `Meter` (bar or ring) is here: it shows a
      value within a known range (a reading), which is not loading or progress. */

package/dist/lib/use-active-section.js

@@ -0,0 +1,59 @@
+"use client";
+
+// src/lib/use-active-section.ts
+import { useEffect, useState } from "react";
+var END_SLACK = 2;
+function useActiveSection(ids, { offset = 0.35, root } = {}) {
+  const [active, setActive] = useState(ids[0] ?? null);
+  const key = ids.join("\n");
+  useEffect(() => {
+    const list = key ? key.split("\n") : [];
+    if (list.length === 0) {
+      setActive(null);
+      return;
+    }
+    const scroller = root?.current ?? null;
+    let frame = 0;
+    const measure = () => {
+      frame = 0;
+      const top = scroller ? scroller.getBoundingClientRect().top : 0;
+      const height = scroller ? scroller.clientHeight : window.innerHeight;
+      const line = top + height * offset;
+      const bottom = top + height;
+      const scrolled = scroller ? scroller.scrollTop : window.scrollY;
+      const range = scroller ? scroller.scrollHeight - scroller.clientHeight : document.documentElement.scrollHeight - window.innerHeight;
+      const atEnd = range > END_SLACK && scrolled >= range - END_SLACK;
+      let current = list[0];
+      for (const id of list) {
+        const section = document.getElementById(id);
+        if (!section) continue;
+        const sectionTop = section.getBoundingClientRect().top;
+        if (sectionTop <= line || atEnd && sectionTop < bottom) current = id;
+      }
+      setActive(current);
+    };
+    const schedule = () => {
+      if (!frame) frame = requestAnimationFrame(measure);
+    };
+    measure();
+    const target = scroller ?? window;
+    target.addEventListener("scroll", schedule, { passive: true });
+    window.addEventListener("resize", schedule);
+    const resize = new ResizeObserver(schedule);
+    resize.observe(scroller ?? document.documentElement);
+    for (const id of list) {
+      const section = document.getElementById(id);
+      if (section) resize.observe(section);
+    }
+    return () => {
+      cancelAnimationFrame(frame);
+      target.removeEventListener("scroll", schedule);
+      window.removeEventListener("resize", schedule);
+      resize.disconnect();
+    };
+  }, [key, offset, root]);
+  return active;
+}
+export {
+  useActiveSection
+};

package/dist/styles.css

@@ -1665,13 +1665,19 @@
 /* ==========================================================================
    Layout — responsive grid spans + split panes.
 
-   The fluid layout primitives (Region, Grid, Stack…) compute their styles inline
-   so any dynamic value works without Tailwind scanning a class. Breakpoint-aware
-   layout can't be inline (a style attribute has no media queries), so `Col` and
-   `SplitPane` set per-breakpoint CSS custom properties inline and these rules
-   resolve them mobile-first. Breakpoints match Tailwind's defaults
-   (sm 40 / md 48 / lg 64 / xl 80 / 2xl 96 rem) so they line up with the `lg:*`
-   visibility utilities the app-shell components already use.
+   The fluid layout primitives (Region, Grid, Stack…) put their layout in
+   classes (`flex`, `grid`, `items-*`, `px-(--page-inset)`) and pass dynamic
+   values as inline CSS custom properties that those classes read, so any value
+   works without Tailwind scanning a class. Never an inline `display`, `gap` or
+   padding: inline style beats every utility, and `<Row className="hidden
+   md:flex">` silently did nothing. Breakpoint-aware layout can't be inline (a
+   style attribute has no media queries), so `Col` and `SplitPane` set
+   per-breakpoint CSS custom properties inline and these rules resolve them
+   mobile-first. The rules sit in `@layer components` so a utility in the
+   caller's `className` (`hidden`, `lg:grid-cols-3`, `gap-8`) still wins.
+   Breakpoints match Tailwind's defaults (sm 40 / md 48 / lg 64 / xl 80 /
+   2xl 96 rem) so they line up with the `lg:*` visibility utilities the
+   app-shell components already use.
    ========================================================================== */
 
 /* Each element owns its breakpoint values. Custom properties inherit, so a
@@ -1679,18 +1685,20 @@
    Grid inside `Columns count={{ lg: 12 }}` drew 12 tracks at lg. Resetting
    them here makes an unset one invalid, so the fallback chain below runs on the
    element itself; the values it was given are inline and win over this. */
-[data-sable-col] {
-	--col-span-base: initial; --col-span-sm: initial; --col-span-md: initial;
-	--col-span-lg: initial; --col-span-xl: initial; --col-span-2xl: initial;
-	--col-start-base: initial; --col-start-sm: initial; --col-start-md: initial;
-	--col-start-lg: initial; --col-start-xl: initial; --col-start-2xl: initial;
-}
-[data-sable-grid-cols] {
-	--cols-base: initial; --cols-sm: initial; --cols-md: initial;
-	--cols-lg: initial; --cols-xl: initial; --cols-2xl: initial;
-}
-[data-sable-split] {
-	--split-gap: initial;
+@layer components {
+	[data-sable-col] {
+		--col-span-base: initial; --col-span-sm: initial; --col-span-md: initial;
+		--col-span-lg: initial; --col-span-xl: initial; --col-span-2xl: initial;
+		--col-start-base: initial; --col-start-sm: initial; --col-start-md: initial;
+		--col-start-lg: initial; --col-start-xl: initial; --col-start-2xl: initial;
+	}
+	[data-sable-grid-cols] {
+		--cols-base: initial; --cols-sm: initial; --cols-md: initial;
+		--cols-lg: initial; --cols-xl: initial; --cols-2xl: initial;
+	}
+	[data-sable-split] {
+		--split-gap: initial;
+	}
 }
 
 /* Toasts keep clear of an open Sheet's actions. A right sheet's pinned footer
@@ -1761,126 +1769,126 @@
 	}
 }
 
-/* `Col span={{ base, md, lg }}` / `start={…}` — each breakpoint resolves to the
-   most specific value defined at or below it (mobile-first cascade). */
-[data-sable-col] {
-	grid-column: var(--col-start, auto) / span var(--col-span, 1);
-	--col-span: var(--col-span-base, 1);
-	--col-start: var(--col-start-base, auto);
-}
-@media (width >= 40rem) {
+@layer components {
+	/* `Col span={{ base, md, lg }}` / `start={…}` — each breakpoint resolves to the
+	   most specific value defined at or below it (mobile-first cascade). */
 	[data-sable-col] {
-		--col-span: var(--col-span-sm, var(--col-span-base, 1));
-		--col-start: var(--col-start-sm, var(--col-start-base, auto));
+		grid-column: var(--col-start, auto) / span var(--col-span, 1);
+		--col-span: var(--col-span-base, 1);
+		--col-start: var(--col-start-base, auto);
+	}
+	@media (width >= 40rem) {
+		[data-sable-col] {
+			--col-span: var(--col-span-sm, var(--col-span-base, 1));
+			--col-start: var(--col-start-sm, var(--col-start-base, auto));
+		}
 	}
-}
-@media (width >= 48rem) {
-	[data-sable-col] {
-		--col-span: var(--col-span-md, var(--col-span-sm, var(--col-span-base, 1)));
-		--col-start: var(--col-start-md, var(--col-start-sm, var(--col-start-base, auto)));
+	@media (width >= 48rem) {
+		[data-sable-col] {
+			--col-span: var(--col-span-md, var(--col-span-sm, var(--col-span-base, 1)));
+			--col-start: var(--col-start-md, var(--col-start-sm, var(--col-start-base, auto)));
+		}
 	}
-}
-@media (width >= 64rem) {
-	[data-sable-col] {
-		--col-span: var(--col-span-lg, var(--col-span-md, var(--col-span-sm, var(--col-span-base, 1))));
-		--col-start: var(--col-start-lg, var(--col-start-md, var(--col-start-sm, var(--col-start-base, auto))));
+	@media (width >= 64rem) {
+		[data-sable-col] {
+			--col-span: var(--col-span-lg, var(--col-span-md, var(--col-span-sm, var(--col-span-base, 1))));
+			--col-start: var(--col-start-lg, var(--col-start-md, var(--col-start-sm, var(--col-start-base, auto))));
+		}
 	}
-}
-@media (width >= 80rem) {
-	[data-sable-col] {
-		--col-span: var(--col-span-xl, var(--col-span-lg, var(--col-span-md, var(--col-span-sm, var(--col-span-base, 1)))));
-		--col-start: var(--col-start-xl, var(--col-start-lg, var(--col-start-md, var(--col-start-sm, var(--col-start-base, auto)))));
+	@media (width >= 80rem) {
+		[data-sable-col] {
+			--col-span: var(--col-span-xl, var(--col-span-lg, var(--col-span-md, var(--col-span-sm, var(--col-span-base, 1)))));
+			--col-start: var(--col-start-xl, var(--col-start-lg, var(--col-start-md, var(--col-start-sm, var(--col-start-base, auto)))));
+		}
 	}
-}
-@media (width >= 96rem) {
-	[data-sable-col] {
-		--col-span: var(--col-span-2xl, var(--col-span-xl, var(--col-span-lg, var(--col-span-md, var(--col-span-sm, var(--col-span-base, 1))))));
-		--col-start: var(--col-start-2xl, var(--col-start-xl, var(--col-start-lg, var(--col-start-md, var(--col-start-sm, var(--col-start-base, auto))))));
+	@media (width >= 96rem) {
+		[data-sable-col] {
+			--col-span: var(--col-span-2xl, var(--col-span-xl, var(--col-span-lg, var(--col-span-md, var(--col-span-sm, var(--col-span-base, 1))))));
+			--col-start: var(--col-start-2xl, var(--col-start-xl, var(--col-start-lg, var(--col-start-md, var(--col-start-sm, var(--col-start-base, auto))))));
+		}
 	}
-}
 
-/* `Columns count` / `Grid cols` as a breakpoint map — set per-breakpoint --cols-*
-   props inline; resolved mobile-first into the track's column count, so a grid
-   thins to fewer columns on small screens (e.g. 2 → 6 → 12). */
-[data-sable-grid-cols] {
-	display: grid;
-	grid-template-columns: repeat(var(--cols, var(--grid-columns)), minmax(0, 1fr));
-	--cols: var(--cols-base, var(--grid-columns));
-}
-@media (width >= 40rem) {
+	/* `Columns count` / `Grid cols` as a breakpoint map — set per-breakpoint --cols-*
+	   props inline; resolved mobile-first into the track's column count, so a grid
+	   thins to fewer columns on small screens (e.g. 2 → 6 → 12). */
 	[data-sable-grid-cols] {
-		--cols: var(--cols-sm, var(--cols-base, var(--grid-columns)));
+		grid-template-columns: repeat(var(--cols, var(--grid-columns)), minmax(0, 1fr));
+		--cols: var(--cols-base, var(--grid-columns));
 	}
-}
-@media (width >= 48rem) {
-	[data-sable-grid-cols] {
-		--cols: var(--cols-md, var(--cols-sm, var(--cols-base, var(--grid-columns))));
+	@media (width >= 40rem) {
+		[data-sable-grid-cols] {
+			--cols: var(--cols-sm, var(--cols-base, var(--grid-columns)));
+		}
 	}
-}
-@media (width >= 64rem) {
-	[data-sable-grid-cols] {
-		--cols: var(
-			--cols-lg,
-			var(--cols-md, var(--cols-sm, var(--cols-base, var(--grid-columns))))
-		);
+	@media (width >= 48rem) {
+		[data-sable-grid-cols] {
+			--cols: var(--cols-md, var(--cols-sm, var(--cols-base, var(--grid-columns))));
+		}
 	}
-}
-@media (width >= 80rem) {
-	[data-sable-grid-cols] {
-		--cols: var(
-			--cols-xl,
-			var(
+	@media (width >= 64rem) {
+		[data-sable-grid-cols] {
+			--cols: var(
 				--cols-lg,
 				var(--cols-md, var(--cols-sm, var(--cols-base, var(--grid-columns))))
-			)
-		);
+			);
+		}
 	}
-}
-@media (width >= 96rem) {
-	[data-sable-grid-cols] {
-		--cols: var(
-			--cols-2xl,
-			var(
+	@media (width >= 80rem) {
+		[data-sable-grid-cols] {
+			--cols: var(
 				--cols-xl,
 				var(
 					--cols-lg,
 					var(--cols-md, var(--cols-sm, var(--cols-base, var(--grid-columns))))
 				)
-			)
-		);
+			);
+		}
+	}
+	@media (width >= 96rem) {
+		[data-sable-grid-cols] {
+			--cols: var(
+				--cols-2xl,
+				var(
+					--cols-xl,
+					var(
+						--cols-lg,
+						var(--cols-md, var(--cols-sm, var(--cols-base, var(--grid-columns))))
+					)
+				)
+			);
+		}
 	}
-}
 
-/* `SplitPane collapseBelow="lg"` — a single stacked column below the breakpoint;
-   a two-column track (primary:secondary fr ratio) at or above it. */
-[data-sable-split] {
-	display: grid;
-	gap: var(--split-gap, var(--grid-gutter));
-	grid-template-columns: 1fr;
-}
-@media (width >= 40rem) {
-	[data-sable-split][data-collapse="sm"] {
-		grid-template-columns: var(--split-primary, 1fr) var(--split-secondary, 1fr);
+	/* `SplitPane collapseBelow="lg"` — a single stacked column below the breakpoint;
+	   a two-column track (primary:secondary fr ratio) at or above it. */
+	[data-sable-split] {
+		gap: var(--split-gap, var(--grid-gutter));
+		grid-template-columns: 1fr;
 	}
-}
-@media (width >= 48rem) {
-	[data-sable-split][data-collapse="md"] {
-		grid-template-columns: var(--split-primary, 1fr) var(--split-secondary, 1fr);
+	@media (width >= 40rem) {
+		[data-sable-split][data-collapse="sm"] {
+			grid-template-columns: var(--split-primary, 1fr) var(--split-secondary, 1fr);
+		}
 	}
-}
-@media (width >= 64rem) {
-	[data-sable-split][data-collapse="lg"] {
-		grid-template-columns: var(--split-primary, 1fr) var(--split-secondary, 1fr);
+	@media (width >= 48rem) {
+		[data-sable-split][data-collapse="md"] {
+			grid-template-columns: var(--split-primary, 1fr) var(--split-secondary, 1fr);
+		}
 	}
-}
-@media (width >= 80rem) {
-	[data-sable-split][data-collapse="xl"] {
-		grid-template-columns: var(--split-primary, 1fr) var(--split-secondary, 1fr);
+	@media (width >= 64rem) {
+		[data-sable-split][data-collapse="lg"] {
+			grid-template-columns: var(--split-primary, 1fr) var(--split-secondary, 1fr);
+		}
 	}
-}
-@media (width >= 96rem) {
-	[data-sable-split][data-collapse="2xl"] {
-		grid-template-columns: var(--split-primary, 1fr) var(--split-secondary, 1fr);
+	@media (width >= 80rem) {
+		[data-sable-split][data-collapse="xl"] {
+			grid-template-columns: var(--split-primary, 1fr) var(--split-secondary, 1fr);
+		}
+	}
+	@media (width >= 96rem) {
+		[data-sable-split][data-collapse="2xl"] {
+			grid-template-columns: var(--split-primary, 1fr) var(--split-secondary, 1fr);
+		}
 	}
 }
 

package/llms/blocks/approval-block.md

@@ -1,48 +1,45 @@
 # ApprovalBlock
 
-An agent asking permission for one tool call: the question, what will happen and what can't be undone, the call's details, an "allow for the rest of this chat" Checkbox, and Deny / Allow.
+An agent asking permission for one tool call: the question, what is at stake, the call itself as a ToolCall with its exact input, and Deny / Always allow / Allow once.
 
-**Intent:** Reach for this in a chat or agent run when a tool call waits on the person — sending, paying, deleting, publishing. The call itself, before and after the decision, is a ToolCall with status="awaiting", then "complete" or "denied". A destructive action outside an agent is DestructiveActionModal.
+**Intent:** Reach for this in a chat or agent run when a tool call waits on the person — running a command, sending, paying, deleting, publishing. It wraps the call's own ToolCall, which shows status="awaiting" until the person answers and then "complete" or "denied". A destructive action outside an agent is DestructiveActionModal.
 
 **Block:** AI & agents · card · designed for 18rem–28rem wide (fills its container up to the max)
 
 ## Notes
 
-- The title is the question in plain words ("Send the invoice to Ada?"), not the tool's name; the tool's name is one row of the details, for the person who wants to know exactly what runs.
-- The description says what can't be undone. That sentence is what the person is deciding on.
-- Deny comes first and Allow is the primary on the end, the same order as every Sable confirmation. Neither is focused on arrival: an approval that a stray Enter can grant is not an approval.
-- After a decision the buttons give way to one InlineStatus line saying what happened, so the thread keeps a record of the answer.
+- The title is the question in plain words ("Run this command?"); the description says what is at stake. That sentence is what the person is deciding on.
+- The call is shown as the agent made it — tool name and raw input, open on arrival — because the exact arguments are what a careful person checks. Do not paraphrase them into a form.
+- Three answers, as agent products settle on: Deny on the start edge, then Always allow and Allow once, the primary on the end. Neither is focused on arrival: an approval that a stray Enter can grant is not an approval.
+- After a decision the buttons give way to one InlineStatus line saying what happened, and the ToolCall shows the outcome, so the thread keeps a record of the answer.
 
 ## Accessibility
 
 - Focus moves to the outcome line when the buttons leave, instead of dropping to the page; the line is a role=status region, so the decision is announced.
-- The details are a dl, so each value is read with its label.
-- The remember Checkbox has its own Label, so the tool name inside it is part of its accessible name.
+- The ToolCall announces its own status change, and its input is a labelled code view.
 
 ## Source
 
 ```tsx
-import { useState, useEffect, useRef, useId } from "react"
-import { Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, cn, Code, InlineStatus, Label } from "@sableui/react"
+import { useState, useEffect, useRef } from "react"
+import { Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, cn, InlineStatus, ToolCall } from "@sableui/react"
 
 const request = {
-	tool: "send_email",
-	title: "Send the invoice to Ada?",
-	description: "The agent wants to email invoice INV-1042. An email can't be unsent.",
-	details: [
-		{ label: "To", value: "ada@example.com" },
-		{ label: "Subject", value: "INV-1042 for October" },
-		{ label: "Attached", value: "INV-1042.pdf" },
-	],
-	allowed: "Allowed. Sending the email.",
-	denied: "Denied. The agent won't send it.",
+	title: "Run this command?",
+	description: "The agent wants to migrate the production database in acme/api. It changes live data.",
+	tool: "run_command",
+	action: "Run a command",
+	// A command reads as the command; a structured call would pass its arguments object.
+	input: "pnpm db:migrate --env production",
+	allowed: "Allowed. Running the migration.",
+	denied: "Denied. The agent won't run it.",
 }
 
 export interface ApprovalBlockProps {
 	className?: string
 	/** false drops the card's surface and border — for a chat column that already frames it. */
 	framed?: boolean
-	/** The person allowed the call. `remember` is the "for the rest of this chat" choice. */
+	/** The person allowed the call. `remember` is true for "Always allow". */
 	onApprove?: (options: { remember: boolean }) => void
 	/** The person declined the call. */
 	onDeny?: () => void
@@ -50,8 +47,6 @@ export interface ApprovalBlockProps {
 
 export function ApprovalBlock({ className, framed = true, onApprove, onDeny }: ApprovalBlockProps) {
 	const [decision, setDecision] = useState<"allowed" | "denied" | null>(null)
-	const [remember, setRemember] = useState(false)
-	const id = useId()
 	const outcome = useRef<HTMLDivElement>(null)
 	// The buttons leave with the decision, so focus moves to the line that
 	// replaces them instead of falling back to the top of the page.
@@ -59,37 +54,30 @@ export function ApprovalBlock({ className, framed = true, onApprove, onDeny }: A
 		if (decision) outcome.current?.focus()
 	}, [decision])
 
+	const approve = (remember: boolean) => {
+		setDecision("allowed")
+		onApprove?.({ remember })
+	}
+
 	return (
 		<Card variant={framed ? "default" : "flat"} className={cn("w-full max-w-md", className)}>
 			<CardHeader>
 				<CardTitle>{request.title}</CardTitle>
 				<CardDescription>{request.description}</CardDescription>
 			</CardHeader>
-			<CardContent className="flex flex-col gap-4">
-				<dl className="grid grid-cols-[auto_minmax(0,1fr)] gap-x-4 gap-y-1.5 text-body-sm">
-					{request.details.map((d) => (
-						<div key={d.label} className="contents">
-							<dt className="text-muted-foreground">{d.label}</dt>
-							<dd className="truncate text-foreground">{d.value}</dd>
-						</div>
-					))}
-					<div className="contents">
-						<dt className="text-muted-foreground">Tool</dt>
-						<dd className="min-w-0">
-							<Code>{request.tool}</Code>
-						</dd>
-					</div>
-				</dl>
-				{decision ? null : (
-					<div className="flex items-center gap-2">
-						<Checkbox id={`${id}-remember`} checked={remember} onCheckedChange={(v: boolean) => setRemember(v)} />
-						<Label htmlFor={`${id}-remember`} className="text-body-sm">
-							Allow <Code>{request.tool}</Code> for the rest of this chat
-						</Label>
-					</div>
-				)}
+			<CardContent>
+				{/* The call itself, exactly as the agent made it. It answers with the
+				    person: held, then done or denied. */}
+				<ToolCall
+					name={request.tool}
+					title={request.action}
+					status={decision === "allowed" ? "complete" : decision === "denied" ? "denied" : "awaiting"}
+					statusLabel={decision === "allowed" ? "Allowed" : undefined}
+					input={request.input}
+					defaultOpen
+				/>
 			</CardContent>
-			<CardFooter actions className="justify-end">
+			<CardFooter actions>
 				{decision ? (
 					<InlineStatus
 						ref={outcome}
@@ -103,7 +91,8 @@ export function ApprovalBlock({ className, framed = true, onApprove, onDeny }: A
 				) : (
 					<>
 						<Button
-							variant="outline"
+							variant="ghost"
+							className="me-auto"
 							onClick={() => {
 								setDecision("denied")
 								onDeny?.()
@@ -111,14 +100,10 @@ export function ApprovalBlock({ className, framed = true, onApprove, onDeny }: A
 						>
 							Deny
 						</Button>
-						<Button
-							onClick={() => {
-								setDecision("allowed")
-								onApprove?.({ remember })
-							}}
-						>
-							Allow
+						<Button variant="outline" onClick={() => approve(true)}>
+							Always allow
 						</Button>
+						<Button onClick={() => approve(false)}>Allow once</Button>
 					</>
 				)}
 			</CardFooter>