@heyramzi/ui 2.22.1 → 2.23.0

package/src/editor/serializer.test.ts

@@ -87,6 +87,64 @@ describe("renderTiptapContent", () => {
   });
 });
 
+function linkDoc(href: string) {
+  return {
+    type: "doc",
+    content: [
+      {
+        type: "paragraph",
+        content: [{ type: "text", text: "click", marks: [{ type: "link", attrs: { href } }] }],
+      },
+    ],
+  };
+}
+
+function imageDoc(src: string) {
+  return { type: "doc", content: [{ type: "image", attrs: { src } }] };
+}
+
+describe("unsafe URLs", () => {
+  it("keeps the text and drops a javascript: href", () => {
+    const html = renderTiptapContent(linkDoc("javascript:alert(1)"));
+    expect(html).toContain("click");
+    expect(html).not.toContain("javascript:");
+    expect(html).not.toContain("href=");
+  });
+
+  it("drops a javascript: href hidden by a tab inside the scheme", () => {
+    const html = renderTiptapContent(linkDoc("java\tscript:alert(1)"));
+    expect(html).toContain("click");
+    expect(html).not.toContain("javascript:");
+    expect(html).not.toContain("href=");
+  });
+
+  it.each(["data:text/html,x", "vbscript:x"])("drops the %s href", (href) => {
+    expect(renderTiptapContent(linkDoc(href))).not.toContain("href=");
+  });
+
+  it.each(["https://example.com/a?b=1", "/docs", "#top", "mailto:a@example.com"])(
+    "keeps the %s href",
+    (href) => {
+      expect(renderTiptapContent(linkDoc(href))).toContain(`href="${href}"`);
+    },
+  );
+
+  it("drops an image with a javascript: src", () => {
+    expect(renderTiptapContent(imageDoc("javascript:alert(1)"))).not.toContain("<img");
+  });
+
+  it.each(["https://example.com/a.png", "data:image/png;base64,AAAA"])(
+    "keeps an image with the %s src",
+    (src) => {
+      expect(renderTiptapContent(imageDoc(src))).toContain("<img");
+    },
+  );
+
+  it("drops an image with an SVG data: src", () => {
+    expect(renderTiptapContent(imageDoc("data:image/svg+xml;base64,AAAA"))).not.toContain("<img");
+  });
+});
+
 describe("youtube node", () => {
   function youtubeDoc(attrs: Record<string, unknown>) {
     return { type: "doc", content: [{ type: "youtube", attrs }] };

package/src/editor/serializer.ts

@@ -1,3 +1,5 @@
+import { safeImageUrl, safeUrl } from "./safe-url.js";
+
 // WHY our own slugify: the website's uses NFKD, which strips accents from French
 // headings. The vibe-kit utils one doesn't, so accented anchors would differ.
 function slugify(input: string, maxLength = 60): string {
@@ -158,7 +160,7 @@ function numString(attrs: Record<string, unknown> | undefined, key: string): str
 }
 
 function renderImage(node: Node): string {
-  const src = strAttr(node.attrs, "src");
+  const src = safeImageUrl(strAttr(node.attrs, "src"));
   if (!src) return "";
   const attrs = renderAttributes({
     alt: strAttr(node.attrs, "alt") ?? "",
@@ -321,11 +323,12 @@ const MARK_TAGS: Record<string, string> = {
 
 function wrapMark(content: string, mark: Mark): string {
   if (mark.type === "link") {
-    const attrs = renderAttributes({
-      href: strAttr(mark.attrs, "href") ?? "",
-      target: strAttr(mark.attrs, "target"),
-      rel: strAttr(mark.attrs, "rel"),
-    });
+    // WHY: stored docs come from teammates, clients and CLIs that skip the editor's link filter.
+    const href = safeUrl(strAttr(mark.attrs, "href"));
+    if (!href) return content;
+    const target = strAttr(mark.attrs, "target");
+    const rel = strAttr(mark.attrs, "rel") || (target ? "noopener noreferrer" : undefined);
+    const attrs = renderAttributes({ href, target, rel });
     return `<a${attrs}>${content}</a>`;
   }
   const tag = pick(MARK_TAGS, mark.type);

package/src/editor/slash-query.test.ts

@@ -0,0 +1,19 @@
+import { describe, expect, it } from "vite-plus/test";
+import { slashQueryAt } from "./slash-query.js";
+
+describe("slashQueryAt", () => {
+  it.each([
+    ["/", ""],
+    ["/head", "head"],
+    ["hello /bul", "bul"],
+    ["line one\n/", ""],
+    ["TCP/IP", null],
+    ["and/or", null],
+    ["src/lib", null],
+    ["https://example", null],
+    [`x/${"a".repeat(20)}`, null],
+    ["no slash here", null],
+  ])("reads %j as %j", (textBefore, expected) => {
+    expect(slashQueryAt(textBefore)).toBe(expected);
+  });
+});

package/src/editor/slash-query.ts

@@ -0,0 +1,11 @@
+// One character of context, the slash, and a query of up to 20.
+export const SLASH_WINDOW = 22;
+
+/**
+ * The slash command typed just before the caret, or null when there isn't one. The slash has to
+ * start the text or follow whitespace, so `TCP/IP` and `and/or` stay plain text.
+ */
+export function slashQueryAt(textBefore: string): string | null {
+  const match = textBefore.match(/(?:^|\s)\/([a-zA-Z0-9 ]{0,20})$/);
+  return match ? match[1] : null;
+}

package/src/modules.test.ts

@@ -5,6 +5,7 @@ import { describe, expect, it } from "vite-plus/test";
 import * as record from "./record/index.js";
 import * as inbox from "./inbox/index.js";
 import * as thread from "./thread/index.js";
+import * as triage from "./triage/index.js";
 
 const pkg = JSON.parse(
   readFileSync(join(dirname(fileURLToPath(import.meta.url)), "..", "package.json"), "utf8"),
@@ -23,6 +24,9 @@ describe("module split", () => {
     expect(inbox.ThreadInbox).toBeDefined();
     expect(inbox.InboxCard).toBeDefined();
     expect(inbox.threadsOf).toBeTypeOf("function");
+    expect(triage.TriagePlan).toBeDefined();
+    expect(triage.TriageTask).toBeDefined();
+    expect(triage.TriageQueue).toBeDefined();
   });
 
   it("resolves every export path to a file", () => {
@@ -37,7 +41,15 @@ describe("module split", () => {
   });
 
   it("exports each module once, under its own name", () => {
-    for (const name of ["./work", "./status", "./panel", "./record", "./thread", "./inbox"]) {
+    for (const name of [
+      "./work",
+      "./status",
+      "./panel",
+      "./record",
+      "./thread",
+      "./inbox",
+      "./triage",
+    ]) {
       expect(pkg.exports[name], name).toBeDefined();
     }
     expect(Object.keys(pkg.exports).filter((name) => name.startsWith("./tasks"))).toEqual([]);

package/src/shadcn/alert-dialog/alert-dialog-overlay.svelte

@@ -12,6 +12,6 @@
 <AlertDialogPrimitive.Overlay
 	bind:ref
 	data-slot="alert-dialog-overlay"
-	class={cn("t-modal-backdrop fixed inset-0 z-50 bg-black/50", className)}
+	class={cn("t-modal-backdrop fixed inset-0 z-50", className)}
 	{...restProps}
 />

package/src/shadcn/button/button.svelte

@@ -47,7 +47,7 @@
 			size: {
 				sm: "relative after:absolute after:top-1/2 after:left-1/2 after:h-[max(100%,2rem)] after:w-[max(100%,2rem)] after:-translate-x-1/2 after:-translate-y-1/2 any-pointer-coarse:after:h-[max(100%,2.75rem)] any-pointer-coarse:after:w-[max(100%,2.75rem)] h-7 gap-1 px-2.5 text-[0.8rem] has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5 any-pointer-coarse:h-10 any-pointer-coarse:px-3",
 				default:
-					"h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 any-pointer-coarse:h-11 any-pointer-coarse:px-3.5",
+					"h-(--control-height) gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 any-pointer-coarse:px-3.5",
 				lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3 any-pointer-coarse:h-11 any-pointer-coarse:px-3.5",
 			},
 			/** A glyph with no label: square at the height its size already sets. */

package/src/shadcn/button/button.test.ts

@@ -10,10 +10,10 @@ describe("buttonVariants text", () => {
       expect(classes).toContain("any-pointer-coarse:min-h-11");
       expect(classes).not.toContain("whitespace-nowrap");
       expect(classes).not.toContain("h-7");
-      expect(classes).not.toContain("h-8");
+      expect(classes).not.toContain("h-(--control-height)");
     });
   }
   it("leaves the other variants fixed-height", () => {
-    expect(buttonVariants({ variant: "ghost" }).split(" ")).toContain("h-8");
+    expect(buttonVariants({ variant: "ghost" }).split(" ")).toContain("h-(--control-height)");
   });
 });

package/src/shadcn/command/command-dialog.svelte

@@ -40,9 +40,7 @@
 			"rounded-2xl! top-[max(0.5rem,env(safe-area-inset-top))] right-2 bottom-auto left-2 w-auto max-h-[70svh] translate-y-0 gap-0 overflow-hidden p-0 sm:p-0",
 			// WHY no border and no card background here: the palette is a floating
 
-			// object, so its edge is a lit rim and a cast shadow rather than a drawn line, and the surface itself belongs to the Command root beneath so its translucency
-
-			// can read the dimmed page through it.
+			// object, so its edge is a lit rim and a cast shadow rather than a drawn line, and the surface belongs to the Command root beneath.
 			"border-0 bg-transparent shadow-edge-overlay",
 			// WHY a third of the way down rather than centred: the eye is already at
 
@@ -55,12 +53,9 @@
 		{showCloseButton}
 		{portalProps}
 	>
-		<Command
-			{...restProps}
-			bind:value
-			bind:ref
-			class="bg-popover supports-backdrop-filter:bg-popover/94 supports-backdrop-filter:backdrop-blur-2xl"
-			{children}
-		/>
+		<!-- WHY the root's opaque `bg-popover`, no glass: `.t-modal` on the content sets `will-change:
+		     opacity`, which makes the content the backdrop root, so a blur here read only the empty content
+		     box, never the page. Its 94% surface let page text show through the rows (light, 390px). -->
+		<Command {...restProps} bind:value bind:ref {children} />
 	</Dialog.Content>
 </Dialog.Root>

package/src/shadcn/dialog/dialog-overlay.svelte

@@ -13,7 +13,7 @@
 	bind:ref
 	data-slot="dialog-overlay"
 	class={cn(
-		"t-modal-backdrop supports-backdrop-filter:backdrop-blur-xs fixed inset-0 isolate z-50",
+		"t-modal-backdrop fixed inset-0 isolate z-50",
 		className,
 	)}
 	{...restProps}

package/src/shadcn/input/input.svelte

@@ -25,7 +25,7 @@
 		bind:this={ref}
 		data-slot={dataSlot}
 		class={cn(
-			"dark:bg-input/30 border-input enabled:hover:border-foreground/20 focus-visible:border-ring focus-visible:shadow-(--ring-focus) aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-8 any-pointer-coarse:h-11 rounded-lg border bg-transparent px-2.5 py-1 text-base shadow-field transition-[color,background-color,border-color,box-shadow] duration-[var(--duration-quick)] ease-[var(--ease-smooth-out)] file:h-6 file:text-sm file:font-medium aria-invalid:ring-3 md:text-sm file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
+			"dark:bg-input/30 border-input enabled:hover:border-foreground/20 focus-visible:border-ring focus-visible:shadow-(--ring-focus) aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-(--control-height) rounded-lg border bg-transparent px-2.5 py-1 text-base shadow-field transition-[color,background-color,border-color,box-shadow] duration-[var(--duration-quick)] ease-[var(--ease-smooth-out)] file:h-6 file:text-sm file:font-medium aria-invalid:ring-3 md:text-sm file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
 			className,
 		)}
 		type="file"
@@ -38,7 +38,7 @@
 		bind:this={ref}
 		data-slot={dataSlot}
 		class={cn(
-			"dark:bg-input/30 border-input enabled:hover:border-foreground/20 focus-visible:border-ring focus-visible:shadow-(--ring-focus) aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-8 any-pointer-coarse:h-11 rounded-lg border bg-transparent px-2.5 py-1 text-base shadow-field transition-[color,background-color,border-color,box-shadow] duration-[var(--duration-quick)] ease-[var(--ease-smooth-out)] file:h-6 file:text-sm file:font-medium aria-invalid:ring-3 md:text-sm file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
+			"dark:bg-input/30 border-input enabled:hover:border-foreground/20 focus-visible:border-ring focus-visible:shadow-(--ring-focus) aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-(--control-height) rounded-lg border bg-transparent px-2.5 py-1 text-base shadow-field transition-[color,background-color,border-color,box-shadow] duration-[var(--duration-quick)] ease-[var(--ease-smooth-out)] file:h-6 file:text-sm file:font-medium aria-invalid:ring-3 md:text-sm file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
 			className,
 		)}
 		{type}

package/src/shadcn/sheet/sheet-overlay.svelte

@@ -13,7 +13,7 @@
 	bind:ref
 	data-slot="sheet-overlay"
 	class={cn(
-		"t-modal-backdrop bg-black/10 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 z-50",
+		"t-modal-backdrop fixed inset-0 z-50",
 		className,
 	)}
 	{...restProps}

package/src/tokens/craft.css

@@ -23,6 +23,21 @@
   --text-2xs: 0.6875rem; /* a count, a kbd hint, a meta line under a tile; the floor */
 }
 
+/* ── Control height ──────────────────────────────────────────
+   One height for every control that sits in a row together: an input, a
+   default button, a select trigger. 32px on a desktop row, 44px under a finger
+   (DESIGN.md rule 12), so a search field and its button always line up. Write
+   it `h-(--control-height)`. */
+:root {
+  --control-height: 2rem;
+}
+
+@media (any-pointer: coarse) {
+  :root {
+    --control-height: 2.75rem;
+  }
+}
+
 /* ── Elevation ───────────────────────────────────────────────
    `--elev-card` and its hover carry their own hairline, so a box that also
    draws `border` gets a 2px edge. The other steps carry none. */
@@ -88,6 +103,21 @@
   --elev-field: inset 0 1px 2px color-mix(in oklab, black 40%, transparent);
 }
 
+/* ── Scrim ───────────────────────────────────────────────────
+   The dim behind a dialog, an alert dialog and a sheet. A dim with a 2px blur:
+   the page behind stays legible as the page you came from, so the overlay reads
+   as on top of it, not instead of it. Dark needs a deeper dim, since 32% black
+   on an already dark page barely moves it. */
+:root {
+  --scrim: color-mix(in oklab, var(--elev-tint) 32%, transparent);
+  --scrim-blur: var(--blur-small);
+}
+
+/* After `:root`, since `.dark` sits on the same element at the same specificity. */
+.dark {
+  --scrim: color-mix(in oklab, black 55%, transparent);
+}
+
 /* ── Focus ───────────────────────────────────────────────────
    One variable, so every control focuses the same way: a solid accent edge,
    then a soft halo. */

package/src/triage/README.md

@@ -0,0 +1,28 @@
+# @heyramzi/ui/triage
+
+The three pieces of an email triage screen. They never fetch: you pass the words and callbacks, and they hand back what the person did.
+
+- `TriagePlan` is one email with the plan the model proposes ("Create a task in Clients") and three ways out: approve, type another task, dismiss.
+- `TriageTask` is one settled email: what happened, the task it became, when, and Undo when the host passes `onUndo`.
+- `TriageQueue` is the list around them, with the empty state. `kind="plans"` stacks cards, `kind="tasks"` draws one divided list.
+
+```svelte
+<script lang="ts">
+  import { TriageQueue, TriagePlan } from "@heyramzi/ui/triage";
+</script>
+
+<TriageQueue items={emails} key={(e) => e.id} empty="Nothing to review.">
+  {#snippet row(e)}
+    <TriagePlan
+      sender={e.from}
+      subject={e.subject}
+      plan={e.plan}
+      onApprove={() => approve(e.id)}
+      onPick={(task) => approve(e.id, task)}
+      onDismiss={() => dismiss(e.id)}
+    />
+  {/snippet}
+</TriageQueue>
+```
+
+`labels` on each piece is a partial, so a host translates it. A callback may return a promise: the buttons stay disabled until it settles.

package/src/triage/index.ts

@@ -0,0 +1,10 @@
+export { default as TriagePlan } from "./triage-plan.svelte";
+export { default as TriageTask } from "./triage-task.svelte";
+export { default as TriageQueue } from "./triage-queue.svelte";
+export { DEFAULT_TRIAGE_PLAN_LABELS, DEFAULT_TRIAGE_TASK_LABELS } from "./types.js";
+export type {
+  TriageOutcome,
+  TriagePlanLabels,
+  TriageTaskLabels,
+  TriageTaskLink,
+} from "./types.js";

package/src/triage/triage-plan.svelte

@@ -0,0 +1,132 @@
+<script lang="ts">
+	import { Button } from "../shadcn/button/index.js";
+	import { Input } from "../shadcn/input/index.js";
+	import { cn } from "../lib/utils.js";
+	import { DEFAULT_TRIAGE_PLAN_LABELS, type TriagePlanLabels } from "./types.js";
+
+	interface Props {
+		/** Who sent the email. */
+		sender: string;
+		subject: string;
+		/** The first lines of the body. */
+		snippet?: string;
+		/** When it arrived, as text the host already formatted. */
+		received?: string | null;
+		/** The ISO time behind `received`, for the `time` element. */
+		receivedAt?: string | null;
+		/** What the plan will do, as one sentence. Without it the card only offers to dismiss. */
+		plan?: string | null;
+		/** Why the model wasn't sure. */
+		reason?: string | null;
+		/** A failed attempt, shown on the card. */
+		error?: string | null;
+		labels?: Partial<TriagePlanLabels>;
+		/** Run the plan. The buttons stay disabled until it settles. */
+		onApprove: () => void | Promise<void>;
+		/** Run a task the person typed instead of the plan. */
+		onPick: (task: string) => void | Promise<void>;
+		onDismiss: () => void | Promise<void>;
+		class?: string;
+	}
+
+	let {
+		sender,
+		subject,
+		snippet,
+		received,
+		receivedAt,
+		plan = null,
+		reason,
+		error,
+		labels,
+		onApprove,
+		onPick,
+		onDismiss,
+		class: className,
+	}: Props = $props();
+
+	const id = $props.id();
+	let words = $derived({ ...DEFAULT_TRIAGE_PLAN_LABELS, ...labels });
+	let picking = $state(false);
+	let busy = $state(false);
+	let task = $state("");
+
+	async function run(job: () => void | Promise<void>) {
+		busy = true;
+		try {
+			await job();
+		} finally {
+			busy = false;
+		}
+	}
+</script>
+
+<article class={cn("bg-card border-border rounded-xl border p-5", className)}>
+	<div class="flex items-start justify-between gap-3">
+		<h2 class="text-foreground min-w-0 text-sm font-semibold [overflow-wrap:anywhere]">
+			{sender}: “{subject}”
+		</h2>
+		{#if received}
+			<time class="text-muted-foreground shrink-0 text-xs" datetime={receivedAt ?? undefined}>
+				{received}
+			</time>
+		{/if}
+	</div>
+
+	{#if snippet}
+		<p class="text-muted-foreground mt-2 line-clamp-2 text-sm [overflow-wrap:anywhere]">
+			{snippet}
+		</p>
+	{/if}
+
+	{#if plan}
+		<p
+			class="bg-primary/10 text-primary mt-4 inline-block max-w-full rounded-md px-2.5 py-1 text-xs font-medium [overflow-wrap:anywhere]"
+		>
+			{plan}
+		</p>
+	{/if}
+	{#if reason}
+		<p class="text-muted-foreground mt-2 text-xs [overflow-wrap:anywhere]">{reason}</p>
+	{/if}
+
+	{#if error}
+		<p
+			class="bg-destructive/10 text-destructive mt-3 rounded-lg px-3 py-2 text-sm [overflow-wrap:anywhere]"
+			role="alert"
+		>
+			{error}
+		</p>
+	{/if}
+
+	{#if picking}
+		<form
+			class="mt-4 space-y-2"
+			onsubmit={(event) => {
+				event.preventDefault();
+				run(() => onPick(task.trim()));
+			}}
+		>
+			<label for="{id}-task" class="text-foreground block text-sm font-medium">
+				{words.taskLabel}
+			</label>
+			<Input id="{id}-task" bind:value={task} required autocomplete="off" />
+			<div class="flex flex-wrap gap-2">
+				<Button type="submit" disabled={busy}>{words.useTask}</Button>
+				<Button type="button" variant="outline" onclick={() => (picking = false)}>
+					{words.cancel}
+				</Button>
+			</div>
+		</form>
+	{:else}
+		<div class="mt-4 flex flex-wrap gap-2">
+			{#if plan}
+				<Button disabled={busy} onclick={() => run(onApprove)}>{words.approve}</Button>
+				<Button variant="outline" onclick={() => (picking = true)}>{words.pick}</Button>
+			{/if}
+			<Button variant="ghost" disabled={busy} onclick={() => run(onDismiss)}>
+				{words.dismiss}
+			</Button>
+		</div>
+	{/if}
+</article>

package/src/triage/triage-queue.svelte

@@ -0,0 +1,48 @@
+<script lang="ts" generics="T">
+	import type { Snippet } from "svelte";
+	import { cn } from "../lib/utils.js";
+
+	interface Props {
+		items: readonly T[];
+		/** The key a row is tracked by. */
+		key: (item: T) => string;
+		/**
+		 * `plans` stacks cards that need a decision. `tasks` is one divided list of what was
+		 * decided.
+		 */
+		kind?: "plans" | "tasks";
+		/** One row: a `TriagePlan` for `plans`, a `TriageTask` for `tasks`. */
+		row: Snippet<[T]>;
+		/** What the person reads when nothing is waiting. */
+		empty: string;
+		/** The glyph above the empty text. */
+		icon?: Snippet;
+		class?: string;
+	}
+
+	let { items, key, kind = "plans", row, empty, icon, class: className }: Props = $props();
+</script>
+
+{#if items.length === 0}
+	<div
+		class={cn(
+			"border-border flex flex-col items-center gap-3 rounded-xl border border-dashed px-6 py-14 text-center",
+			className,
+		)}
+	>
+		<span class="text-muted-foreground" aria-hidden="true">{@render icon?.()}</span>
+		<p class="text-muted-foreground text-sm">{empty}</p>
+	</div>
+{:else if kind === "plans"}
+	<div class={cn("space-y-4", className)}>
+		{#each items as item (key(item))}
+			{@render row(item)}
+		{/each}
+	</div>
+{:else}
+	<ul class={cn("bg-card border-border divide-border divide-y rounded-xl border", className)}>
+		{#each items as item (key(item))}
+			{@render row(item)}
+		{/each}
+	</ul>
+{/if}

package/src/triage/triage-task.svelte

@@ -0,0 +1,95 @@
+<script lang="ts">
+	import { Button } from "../shadcn/button/index.js";
+	import StatusBadge from "../status/status-badge.svelte";
+	import { cn } from "../lib/utils.js";
+	import {
+		DEFAULT_TRIAGE_TASK_LABELS,
+		type TriageOutcome,
+		type TriageTaskLabels,
+		type TriageTaskLink,
+	} from "./types.js";
+
+	interface Props {
+		sender: string;
+		subject: string;
+		/** What happened to the email. */
+		outcome: TriageOutcome;
+		/** The task it became. */
+		task?: TriageTaskLink | null;
+		/** When it settled, as text the host already formatted. */
+		when: string;
+		whenAt?: string | null;
+		/** Why it failed. */
+		detail?: string | null;
+		error?: string | null;
+		labels?: Partial<TriageTaskLabels>;
+		/** Takes the change back. The button shows only when this is passed. */
+		onUndo?: () => void | Promise<void>;
+		class?: string;
+	}
+
+	let {
+		sender,
+		subject,
+		outcome,
+		task,
+		when,
+		whenAt,
+		detail,
+		error,
+		labels,
+		onUndo,
+		class: className,
+	}: Props = $props();
+
+	let words = $derived({ ...DEFAULT_TRIAGE_TASK_LABELS, ...labels });
+	let busy = $state(false);
+
+	async function undo() {
+		busy = true;
+		try {
+			await onUndo?.();
+		} finally {
+			busy = false;
+		}
+	}
+</script>
+
+<li
+	class={cn(
+		"flex flex-col gap-3 px-5 py-4 sm:flex-row sm:items-center sm:justify-between",
+		className,
+	)}
+>
+	<div class="min-w-0 space-y-1">
+		<p class="text-foreground text-sm font-medium [overflow-wrap:anywhere]">
+			{sender}: {subject}
+		</p>
+		<div class="flex flex-wrap items-center gap-x-3 gap-y-1">
+			<StatusBadge tone={outcome.tone} capitalize={false}>{outcome.label}</StatusBadge>
+			{#if task}
+				<a
+					href={task.url}
+					target="_blank"
+					rel="noreferrer"
+					class="text-primary min-w-0 text-xs [overflow-wrap:anywhere] hover:underline"
+				>
+					{task.name ?? words.openTask}
+				</a>
+			{/if}
+			<time class="text-muted-foreground text-xs" datetime={whenAt ?? undefined}>{when}</time>
+		</div>
+		{#if detail}
+			<p class="text-muted-foreground text-xs [overflow-wrap:anywhere]">{detail}</p>
+		{/if}
+		{#if error}
+			<p class="text-destructive text-xs [overflow-wrap:anywhere]" role="alert">{error}</p>
+		{/if}
+	</div>
+
+	{#if onUndo}
+		<Button variant="outline" class="shrink-0" disabled={busy} onclick={undo}>
+			{words.undo}
+		</Button>
+	{/if}
+</li>

package/src/triage/types.ts

@@ -0,0 +1,35 @@
+import type { Tone } from "../lib/tone.js";
+
+/** The words a plan card shows. Pass a partial to translate or reword. */
+export type TriagePlanLabels = {
+  approve: string;
+  pick: string;
+  dismiss: string;
+  /** The label over the field where the person types the task to use instead. */
+  taskLabel: string;
+  useTask: string;
+  cancel: string;
+};
+
+export const DEFAULT_TRIAGE_PLAN_LABELS: TriagePlanLabels = {
+  approve: "Approve",
+  pick: "Pick another task",
+  dismiss: "Dismiss",
+  taskLabel: "Task",
+  useTask: "Use this task",
+  cancel: "Cancel",
+};
+
+/** The words a task row shows. */
+export type TriageTaskLabels = { undo: string; openTask: string };
+
+export const DEFAULT_TRIAGE_TASK_LABELS: TriageTaskLabels = {
+  undo: "Undo",
+  openTask: "Open task",
+};
+
+/** What happened to a settled email: the chip's words and its tone. */
+export type TriageOutcome = { label: string; tone: Tone };
+
+/** The task the email ended up as, when there is one. */
+export type TriageTaskLink = { name?: string | null; url: string };