@heyramzi/ui 2.0.0 → 2.1.0

package/src/inbox/logic.ts

@@ -0,0 +1,166 @@
+import { isOpen, isTyping } from "../tasks/inbox/inbox-logic.js";
+import {
+	ALL,
+	DEFAULT_INBOX_LABELS,
+	type InboxEntry,
+	type InboxFilter,
+	type InboxKey,
+	type InboxLabels,
+	type InboxSubject,
+	type InboxThread,
+} from "./types.js";
+
+/** A timestamp as a number, with NaN for one that doesn't parse. */
+function ms(at: string): number {
+	return Date.parse(at);
+}
+
+function latestOf(thread: InboxThread): number {
+	const time = ms(thread.latestAt);
+	return Number.isNaN(time) ? Number.NEGATIVE_INFINITY : time;
+}
+
+export type ThreadsOptions = {
+	/** Threads with unread entries come before read ones. */
+	unreadFirst?: boolean;
+};
+
+/** True while a proposal entry still waits for a verdict. */
+export function isPending(entry: InboxEntry): boolean {
+	return entry.kind === "proposal" && !!entry.proposal && isOpen(entry.proposal);
+}
+
+/**
+ * Group entries into one thread per subject and sort by the newest entry. An entry with no subject id
+ * is dropped. A malformed timestamp sorts last, among threads and inside one.
+ */
+export function threadsOf(entries: InboxEntry[], options: ThreadsOptions = {}): InboxThread[] {
+	type Row = { entry: InboxEntry; subject: InboxSubject; index: number; time: number };
+	const groups = new Map<string, Row[]>();
+	entries.forEach((entry, index) => {
+		const subject = entry.subject;
+		if (!subject?.id) return;
+		const key = `${subject.type}:${subject.id}`;
+		groups.set(key, [...(groups.get(key) ?? []), { entry, subject, index, time: ms(entry.at) }]);
+	});
+
+	const threads: InboxThread[] = [];
+	for (const [key, rows] of groups) {
+		const ordered = rows.toSorted((a, b) => {
+			const aBad = Number.isNaN(a.time);
+			const bBad = Number.isNaN(b.time);
+			if (aBad !== bBad) return aBad ? 1 : -1;
+			return (aBad ? 0 : a.time - b.time) || a.index - b.index;
+		});
+		const newest = ordered.findLast((row) => !Number.isNaN(row.time)) ?? ordered[0];
+		const list = ordered.map((row) => row.entry);
+		threads.push({
+			key,
+			// The newest entry carries the freshest title and status.
+			subject: newest.subject,
+			entries: list,
+			unread: list.filter((entry) => !entry.read).length,
+			latestAt: newest.entry.at,
+			pending: list.filter(isPending).toReversed(),
+		});
+	}
+
+	return threads
+		.map((thread, index) => ({ thread, index }))
+		.toSorted((a, b) => {
+			if (options.unreadFirst) {
+				const unread = Number(b.thread.unread > 0) - Number(a.thread.unread > 0);
+				if (unread) return unread;
+			}
+			const aTime = latestOf(a.thread);
+			const bTime = latestOf(b.thread);
+			if (aTime === bTime) return a.index - b.index;
+			return bTime - aTime;
+		})
+		.map((row) => row.thread);
+}
+
+export const NO_FILTER: InboxFilter = { type: ALL, who: ALL, needsYou: false };
+
+/** Keep a thread when it matches the type, holds an entry from the person or agent, and has a pending proposal if asked. */
+export function filterThreads(threads: InboxThread[], filter: InboxFilter): InboxThread[] {
+	return threads.filter(
+		(thread) =>
+			(filter.type === ALL || thread.subject.type === filter.type) &&
+			(filter.who === ALL || thread.entries.some((entry) => entry.actor.name === filter.who)) &&
+			(!filter.needsYou || thread.pending.length > 0),
+	);
+}
+
+export function subjectTypes(threads: InboxThread[]): string[] {
+	return [...new Set(threads.map((thread) => thread.subject.type))];
+}
+
+export function actorNames(threads: InboxThread[]): string[] {
+	return [...new Set(threads.flatMap((thread) => thread.entries.map((entry) => entry.actor.name)))];
+}
+
+type KeyEventLike = Pick<KeyboardEvent, "key" | "metaKey" | "ctrlKey" | "altKey" | "defaultPrevented" | "target">;
+
+const KEYS: Record<string, InboxKey> = {
+	j: "next",
+	k: "previous",
+	u: "toggleRead",
+	h: "snooze",
+	a: "approve",
+	d: "decline",
+	s: "steer",
+	e: "edit",
+};
+
+/** What a key press asks for, or null when it isn't ours: a modifier is held, or focus is in a text field. */
+export function inboxKeyOf(event: KeyEventLike): InboxKey | null {
+	if (event.defaultPrevented || event.metaKey || event.ctrlKey || event.altKey) return null;
+	if (isTyping(event.target)) return null;
+	return KEYS[event.key] ?? null;
+}
+
+export type SnoozeChoice = { id: "later" | "tomorrow" | "nextWeek"; until: Date };
+
+/** The three times a snooze offers: 3 hours on, tomorrow at 9, next Monday at 9. */
+export function snoozeChoices(now: Date): SnoozeChoice[] {
+	const later = new Date(now.getTime() + 3 * 60 * 60 * 1000);
+	const tomorrow = new Date(now);
+	tomorrow.setDate(tomorrow.getDate() + 1);
+	tomorrow.setHours(9, 0, 0, 0);
+	const nextWeek = new Date(now);
+	nextWeek.setDate(nextWeek.getDate() + (((8 - nextWeek.getDay()) % 7) || 7));
+	nextWeek.setHours(9, 0, 0, 0);
+	return [
+		{ id: "later", until: later },
+		{ id: "tomorrow", until: tomorrow },
+		{ id: "nextWeek", until: nextWeek },
+	];
+}
+
+export function resolveInboxLabels(overrides?: Partial<InboxLabels>): InboxLabels {
+	return { ...DEFAULT_INBOX_LABELS, ...overrides };
+}
+
+/** One line for an entry, in the host's words. `{from}`, `{to}` and `{assignee}` are filled. */
+export function entryLine(entry: InboxEntry, labels: InboxLabels): string {
+	const fill = (text: string) =>
+		text
+			.replaceAll("{from}", entry.status?.from ?? "")
+			.replaceAll("{to}", entry.status?.to ?? "")
+			.replaceAll("{assignee}", entry.assignee ?? "");
+	switch (entry.kind) {
+		case "status":
+			return fill(entry.status?.from ? labels.statusMoved : labels.statusSet);
+		case "assigned":
+			return fill(labels.assigned);
+		case "mention":
+			return labels.mentioned;
+		case "agent_response":
+			return labels.responded;
+		case "proposal":
+			return labels.proposed;
+		default:
+			return labels.commented;
+	}
+}

package/src/inbox/thread-inbox.svelte

@@ -0,0 +1,363 @@
+<script lang="ts">
+	import { tick, type Snippet } from "svelte";
+	import { ArrowLeft, BellSlash, Circle, Envelope, EnvelopeOpen } from "phosphor-svelte";
+	import { AgentAvatar } from "../agents/index.js";
+	import { Badge } from "../shadcn/badge/index.js";
+	import { Button } from "../shadcn/button/index.js";
+	import * as Empty from "../shadcn/empty/index.js";
+	import { Kbd, KbdGroup } from "../shadcn/kbd/index.js";
+	import { ToggleGroup, ToggleGroupItem } from "../shadcn/toggle-group/index.js";
+	import { cn } from "../lib/utils.js";
+	import { TONE_CLASS } from "../lib/tone.js";
+	import InboxCard from "../tasks/inbox/inbox-card.svelte";
+	import type { InboxItem, InboxVerdict } from "../tasks/inbox/inbox-types.js";
+	import {
+		NO_FILTER,
+		actorNames,
+		entryLine,
+		filterThreads,
+		inboxKeyOf,
+		resolveInboxLabels,
+		snoozeChoices,
+		subjectTypes,
+		threadsOf,
+	} from "./logic.js";
+	import {
+		ALL,
+		type InboxActor,
+		type InboxEntry,
+		type InboxFilter,
+		type InboxLabels,
+		type InboxSnooze,
+		type InboxSubject,
+		type InboxThread,
+	} from "./types.js";
+
+	interface Props {
+		entries: InboxEntry[];
+		/** The key of the open thread. Without a match the first thread opens. */
+		selected?: string;
+		/** Threads with unread entries come first. */
+		unreadFirst?: boolean;
+		labels?: Partial<InboxLabels>;
+		/** Display names for subject types, such as `{ task: "Tasks" }`. A missing type shows as written. */
+		typeLabels?: Record<string, string>;
+		/** Replaces the default avatar for a person or an agent, drawn in a 24px slot. */
+		avatar?: Snippet<[InboxActor]>;
+		/** A badge for the subject's status, drawn by the host with its own status map. */
+		status?: Snippet<[InboxSubject]>;
+		/** Replaces a pinned proposal's summary lines. */
+		renderProposal?: Snippet<[InboxItem]>;
+		/** How a timestamp reads. Defaults to a short date and time. */
+		when?: (at: string) => string;
+		onSelect?: (thread: InboxThread) => void;
+		/** `read` is true when the thread had unread entries, so the host marks them all read. */
+		onRead?: (thread: InboxThread, read: boolean) => void;
+		onSnooze?: (request: InboxSnooze) => void;
+		onDecide?: (verdict: InboxVerdict, thread: InboxThread) => void;
+		class?: string;
+	}
+
+	let {
+		entries,
+		selected = $bindable(),
+		unreadFirst = false,
+		labels: labelOverrides,
+		typeLabels = {},
+		avatar,
+		status,
+		renderProposal,
+		when = (at) => {
+			const date = new Date(at);
+			return Number.isNaN(date.getTime())
+				? ""
+				: date.toLocaleString(undefined, { month: "short", day: "numeric", hour: "numeric", minute: "2-digit" });
+		},
+		onSelect,
+		onRead,
+		onSnooze,
+		onDecide,
+		class: className,
+	}: Props = $props();
+
+	let labels = $derived(resolveInboxLabels(labelOverrides));
+	let filter = $state<InboxFilter>({ ...NO_FILTER });
+	let snoozing = $state(false);
+	let detailOpen = $state(false);
+	let cards = $state<Record<string, ReturnType<typeof InboxCard> | null>>({});
+
+	let all = $derived(threadsOf(entries, { unreadFirst }));
+	let visible = $derived(filterThreads(all, filter));
+	let types = $derived(subjectTypes(all));
+	let people = $derived(actorNames(all));
+	let current = $derived(visible.find((thread) => thread.key === selected) ?? visible[0]);
+	let needsYouCount = $derived(all.filter((thread) => thread.pending.length > 0).length);
+	let filtered = $derived(filter.type !== ALL || filter.who !== ALL || filter.needsYou);
+	let pinned = $derived(current?.pending[0]);
+	let timeline = $derived(current?.entries.filter((entry) => !current.pending.includes(entry)) ?? []);
+
+	function open(thread: InboxThread): void {
+		selected = thread.key;
+		snoozing = false;
+		detailOpen = true;
+		onSelect?.(thread);
+	}
+
+	async function move(step: number): Promise<void> {
+		if (!visible.length) return;
+		const from = current ? visible.indexOf(current) : -1;
+		const next = visible[Math.max(0, Math.min(visible.length - 1, from + step))];
+		open(next);
+		detailOpen = false;
+		await tick();
+		document.querySelector<HTMLElement>(`[data-thread-key="${CSS.escape(next.key)}"]`)?.focus();
+	}
+
+	function toggleRead(): void {
+		if (current) onRead?.(current, current.unread > 0);
+	}
+
+	function snooze(until: Date): void {
+		if (current) onSnooze?.({ thread: current, until });
+		snoozing = false;
+	}
+
+	function onkeydown(event: KeyboardEvent): void {
+		if (snoozing && !event.defaultPrevented && !event.metaKey && !event.ctrlKey && !event.altKey) {
+			const choice = snoozeChoices(new Date())[Number(event.key) - 1];
+			if (choice) {
+				event.preventDefault();
+				snooze(choice.until);
+				return;
+			}
+			if (event.key === "Escape") {
+				snoozing = false;
+				return;
+			}
+		}
+		const key = inboxKeyOf(event);
+		if (!key) return;
+		const card = pinned ? cards[pinned.id] : null;
+		const actions = {
+			next: () => move(1),
+			previous: () => move(-1),
+			toggleRead,
+			snooze: () => (snoozing = !snoozing),
+			approve: () => card?.approve(),
+			decline: () => card?.decline(),
+			steer: () => card?.steer(),
+			edit: () => card?.edit(),
+		};
+		event.preventDefault();
+		actions[key]();
+	}
+
+	function setType(next: string | undefined): void {
+		filter = { ...filter, type: next || ALL };
+	}
+
+	function snoozeLabel(id: string): string {
+		return id === "later" ? labels.snoozeLater : id === "tomorrow" ? labels.snoozeTomorrow : labels.snoozeNextWeek;
+	}
+
+	function initial(name: string): string {
+		return name.trim().charAt(0).toLocaleUpperCase() || "?";
+	}
+
+	function lastEntry(thread: InboxThread): InboxEntry {
+		return thread.entries[thread.entries.length - 1];
+	}
+</script>
+
+{#snippet face(actor: InboxActor)}
+	<span class="relative size-6 shrink-0">
+		{#if avatar}
+			{@render avatar(actor)}
+		{:else if actor.kind === "agent"}
+			<AgentAvatar name={actor.name} size={24} paused interactive={false} />
+		{:else if actor.avatar}
+			<img src={actor.avatar} alt="" class="size-6 rounded-full object-cover" />
+		{:else}
+			<span class="grid size-6 place-items-center rounded-full bg-muted text-xs font-medium text-muted-foreground" aria-hidden="true">
+				{initial(actor.name)}
+			</span>
+		{/if}
+	</span>
+{/snippet}
+
+<!-- WHY the key handler sits on the region: the shortcuts work wherever focus is inside the inbox and nowhere else on the page. -->
+<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+<div role="region" aria-label={labels.title} class={cn("flex h-full min-h-0 flex-col gap-3", className)} {onkeydown}>
+	<div class="flex flex-wrap items-center gap-2">
+		<ToggleGroup type="single" variant="outline" size="sm" value={filter.type} onValueChange={setType} aria-label={labels.filterType}>
+			<ToggleGroupItem value={ALL}>{labels.all}</ToggleGroupItem>
+			{#each types as type (type)}
+				<ToggleGroupItem value={type}>{typeLabels[type] ?? type}</ToggleGroupItem>
+			{/each}
+		</ToggleGroup>
+		<select
+			aria-label={labels.filterWho}
+			value={filter.who}
+			onchange={(event) => (filter = { ...filter, who: event.currentTarget.value })}
+			class="h-7 rounded-lg border border-border bg-background px-2 text-[0.8rem] outline-none focus-visible:ring-3 focus-visible:ring-ring/50 any-pointer-coarse:h-10"
+		>
+			<option value={ALL}>{labels.anyone}</option>
+			{#each people as name (name)}
+				<option value={name}>{name}</option>
+			{/each}
+		</select>
+		<Button
+			size="sm"
+			variant={filter.needsYou ? "default" : "outline"}
+			aria-pressed={filter.needsYou}
+			onclick={() => (filter = { ...filter, needsYou: !filter.needsYou })}
+		>
+			{labels.needsYou}
+			<span class="tabular-nums opacity-70">{needsYouCount}</span>
+		</Button>
+	</div>
+
+	<div class="grid min-h-0 flex-1 gap-3 md:grid-cols-[20rem_minmax(0,1fr)]">
+		<ol class={cn("-mx-1 min-h-0 flex-col gap-1 overflow-y-auto px-1 pb-1", detailOpen ? "max-md:hidden md:flex" : "flex")} aria-label={labels.title}>
+			{#each visible as thread (thread.key)}
+				{@const last = lastEntry(thread)}
+				<li>
+					<button
+						type="button"
+						data-thread-key={thread.key}
+						aria-current={current?.key === thread.key}
+						onclick={() => open(thread)}
+						class={cn(
+							"flex w-full flex-col gap-1 rounded-lg border border-transparent p-2.5 text-start outline-none focus-visible:ring-3 focus-visible:ring-ring/50",
+							current?.key === thread.key ? "border-border bg-muted" : "hover:bg-muted/50",
+						)}
+					>
+						<span class="flex items-center gap-2">
+							{#if thread.unread > 0}
+								<Circle weight="fill" class="size-2 shrink-0 text-primary" aria-hidden="true" />
+							{/if}
+							{#if thread.subject.ref}
+								<span class="text-xs text-muted-foreground tabular-nums">{thread.subject.ref}</span>
+							{/if}
+							<span class={cn("truncate text-sm", thread.unread > 0 ? "font-medium" : "")}>{thread.subject.title}</span>
+							<span class="ms-auto shrink-0 text-xs text-muted-foreground tabular-nums">{when(thread.latestAt)}</span>
+						</span>
+						<span class="flex items-center gap-2 ps-4 text-xs text-muted-foreground">
+							<span class="truncate">{last.actor.name} {entryLine(last, labels)}</span>
+							{#if thread.pending.length > 0}
+								<span class={cn("ms-auto inline-flex h-5 shrink-0 items-center rounded-sm border px-1.5 font-medium", TONE_CLASS.warning)}>
+									{labels.needsYou}
+								</span>
+							{:else if thread.unread > 0}
+								<Badge variant="outline" class="ms-auto tabular-nums" aria-label="{thread.unread} {labels.unread}">{thread.unread}</Badge>
+							{/if}
+						</span>
+					</button>
+				</li>
+			{:else}
+				<li class="h-full">
+					<Empty.Root class="h-full">
+						<Empty.Header>
+							<Empty.Title>
+								{filtered ? (filter.needsYou ? labels.emptyNeedsYou : labels.emptyFiltered) : labels.empty}
+							</Empty.Title>
+						</Empty.Header>
+						{#if filtered}
+							<Empty.Content>
+								<Button size="sm" variant="outline" onclick={() => (filter = { ...NO_FILTER })}>{labels.clearFilters}</Button>
+							</Empty.Content>
+						{/if}
+					</Empty.Root>
+				</li>
+			{/each}
+		</ol>
+
+		<section
+			class={cn("min-h-0 flex-col gap-4 overflow-y-auto rounded-xl border border-border p-4", detailOpen ? "flex" : "max-md:hidden md:flex")}
+			aria-label={current?.subject.title ?? labels.selectThread}
+		>
+			{#if current}
+				<header class="flex flex-wrap items-center gap-2">
+					<Button size="sm" variant="ghost" class="md:hidden" onclick={() => (detailOpen = false)} aria-label={labels.title}>
+						<ArrowLeft aria-hidden="true" />
+					</Button>
+					{#if current.subject.ref}
+						<span class="text-xs text-muted-foreground tabular-nums">{current.subject.ref}</span>
+					{/if}
+					<h2 class="min-w-0 truncate text-sm font-medium">
+						{#if current.subject.href}
+							<a href={current.subject.href} class="hover:underline">{current.subject.title}</a>
+						{:else}
+							{current.subject.title}
+						{/if}
+					</h2>
+					{@render status?.(current.subject)}
+					<span class="ms-auto flex items-center gap-1">
+						<Button size="sm" variant="ghost" onclick={toggleRead} aria-keyshortcuts="u">
+							{#if current.unread > 0}
+								<EnvelopeOpen aria-hidden="true" />{labels.markRead}
+							{:else}
+								<Envelope aria-hidden="true" />{labels.markUnread}
+							{/if}
+						</Button>
+						<Button size="sm" variant="ghost" onclick={() => (snoozing = !snoozing)} aria-expanded={snoozing} aria-keyshortcuts="h">
+							<BellSlash aria-hidden="true" />{labels.snooze}
+						</Button>
+					</span>
+				</header>
+
+				{#if snoozing}
+					<div class="flex flex-wrap gap-2" role="group" aria-label={labels.snooze}>
+						{#each snoozeChoices(new Date()) as choice, index (choice.id)}
+							<Button size="sm" variant="outline" onclick={() => snooze(choice.until)}>
+								<Kbd>{index + 1}</Kbd>{snoozeLabel(choice.id)}
+							</Button>
+						{/each}
+					</div>
+				{/if}
+
+				{#each current.pending as entry (entry.id)}
+					<InboxCard
+						bind:this={cards[entry.id]}
+						item={entry.proposal!}
+						selected={entry === pinned}
+						onverdict={(verdict) => onDecide?.(verdict, current)}
+						{renderProposal}
+					/>
+				{/each}
+
+				<ol class="flex flex-col gap-4">
+					{#each timeline as entry (entry.id)}
+						<li class={cn("flex gap-3", !entry.read && "font-medium")}>
+							{@render face(entry.actor)}
+							<div class="min-w-0 flex-1">
+								<div class="flex flex-wrap items-center gap-x-2 text-[13px]">
+									<span class="truncate font-medium">{entry.actor.name}</span>
+									{#if entry.actor.kind === "agent"}
+										<span class={cn("inline-flex h-5 items-center rounded-sm border px-1.5 text-xs font-medium", TONE_CLASS.accent)}>
+											{labels.agent}
+										</span>
+									{/if}
+									<span class="font-normal text-muted-foreground">{entryLine(entry, labels)}</span>
+									<span class="ms-auto text-xs font-normal text-muted-foreground tabular-nums">{when(entry.at)}</span>
+								</div>
+								{#if entry.body}
+									<p class="mt-1 text-sm leading-relaxed font-normal whitespace-pre-wrap text-pretty">{entry.body}</p>
+								{/if}
+							</div>
+						</li>
+					{/each}
+				</ol>
+			{:else}
+				<p class="text-sm text-muted-foreground">{labels.selectThread}</p>
+			{/if}
+		</section>
+	</div>
+
+	<footer class="flex flex-wrap items-center gap-x-4 gap-y-1 text-xs text-muted-foreground max-sm:hidden">
+		<span class="inline-flex items-center gap-1.5"><KbdGroup><Kbd>j</Kbd><Kbd>k</Kbd></KbdGroup> {labels.hintMove}</span>
+		<span class="inline-flex items-center gap-1.5"><Kbd>u</Kbd> {labels.hintRead}</span>
+		<span class="inline-flex items-center gap-1.5"><Kbd>h</Kbd> {labels.hintSnooze}</span>
+		<span class="inline-flex items-center gap-1.5"><KbdGroup><Kbd>a</Kbd><Kbd>d</Kbd><Kbd>s</Kbd><Kbd>e</Kbd></KbdGroup> {labels.hintAct}</span>
+	</footer>
+</div>

package/src/inbox/types.ts

@@ -0,0 +1,139 @@
+import type { InboxItem } from "../tasks/inbox/inbox-types.js";
+
+export type InboxActorKind = "user" | "agent";
+
+export type InboxActor = {
+	kind: InboxActorKind;
+	name: string;
+	/** Image URL for a person. The host's own portrait goes through the `avatar` snippet. */
+	avatar?: string;
+};
+
+export type InboxEntryKind = "comment" | "status" | "assigned" | "mention" | "agent_response" | "proposal";
+
+/** What the thread is about: one task, project or doc. Entries with the same type and id share a thread. */
+export type InboxSubject = {
+	/** "task", "project", "doc" or whatever the host calls it. */
+	type: string;
+	id: string;
+	/** The short reference, such as "TSK-7". */
+	ref?: string;
+	title: string;
+	/** A status id the host draws itself, for a badge in the thread header. */
+	status?: string;
+	href?: string;
+};
+
+export type InboxEntry = {
+	id: string;
+	kind: InboxEntryKind;
+	/** An entry with no subject id belongs to no thread and is dropped. */
+	subject?: InboxSubject;
+	actor: InboxActor;
+	/** ISO timestamp. A malformed one sorts last. */
+	at: string;
+	read?: boolean;
+	/** Text of a comment, a mention or an agent response. */
+	body?: string;
+	/** A `status` entry: where the subject moved. */
+	status?: { from?: string; to: string };
+	/** An `assigned` entry: who got the work. */
+	assignee?: string;
+	/** A `proposal` entry: the agent's ask, drawn as an InboxCard while it waits. */
+	proposal?: InboxItem;
+};
+
+export type InboxThread = {
+	/** `type:id`, unique across subjects. */
+	key: string;
+	subject: InboxSubject;
+	/** Oldest first. */
+	entries: InboxEntry[];
+	unread: number;
+	/** The newest valid timestamp, as written. The raw first one when none parses. */
+	latestAt: string;
+	/** Proposals still waiting for a verdict, newest first. */
+	pending: InboxEntry[];
+};
+
+export type InboxFilter = {
+	/** A subject type, or "all". */
+	type: string;
+	/** An actor name, or "all". */
+	who: string;
+	/** Only threads holding a pending proposal. */
+	needsYou: boolean;
+};
+
+export const ALL = "all";
+
+export type InboxKey = "next" | "previous" | "toggleRead" | "snooze" | "approve" | "decline" | "steer" | "edit";
+
+export type InboxSnooze = { thread: InboxThread; until: Date };
+
+export type InboxLabels = {
+	title: string;
+	all: string;
+	anyone: string;
+	needsYou: string;
+	empty: string;
+	emptyNeedsYou: string;
+	emptyFiltered: string;
+	clearFilters: string;
+	unread: string;
+	markRead: string;
+	markUnread: string;
+	snooze: string;
+	snoozeLater: string;
+	snoozeTomorrow: string;
+	snoozeNextWeek: string;
+	selectThread: string;
+	filterType: string;
+	filterWho: string;
+	agent: string;
+	statusMoved: string;
+	statusSet: string;
+	assigned: string;
+	mentioned: string;
+	commented: string;
+	responded: string;
+	proposed: string;
+	/** Keyboard hint words. */
+	hintMove: string;
+	hintRead: string;
+	hintSnooze: string;
+	hintAct: string;
+};
+
+export const DEFAULT_INBOX_LABELS: InboxLabels = {
+	title: "Inbox",
+	all: "All",
+	anyone: "Anyone",
+	needsYou: "Needs you",
+	empty: "Nothing here",
+	emptyNeedsYou: "Nothing is waiting on you",
+	emptyFiltered: "No thread matches these filters",
+	clearFilters: "Clear filters",
+	unread: "unread",
+	markRead: "Mark read",
+	markUnread: "Mark unread",
+	snooze: "Snooze",
+	snoozeLater: "Later today",
+	snoozeTomorrow: "Tomorrow",
+	snoozeNextWeek: "Next week",
+	selectThread: "Select a thread",
+	filterType: "Filter by type",
+	filterWho: "Filter by person or agent",
+	agent: "AI",
+	statusMoved: "moved this from {from} to {to}",
+	statusSet: "set this to {to}",
+	assigned: "assigned this to {assignee}",
+	mentioned: "mentioned you",
+	commented: "commented",
+	responded: "replied",
+	proposed: "asks for your call",
+	hintMove: "move",
+	hintRead: "read",
+	hintSnooze: "snooze",
+	hintAct: "approve, decline, steer, edit",
+};