diff --git a/apps/web/src/features/applications/components/add-application-dialog.tsx b/apps/web/src/features/applications/components/add-application-dialog.tsx
new file mode 100644
index 000000000..800162195
--- /dev/null
+++ b/apps/web/src/features/applications/components/add-application-dialog.tsx
@@ -0,0 +1,298 @@
+import type { RouterOutput } from "@/libs/orpc/client";
+import { t } from "@lingui/core/macro";
+import { Plural, Trans } from "@lingui/react/macro";
+import { useMutation } from "@tanstack/react-query";
+import { useEffect, useId, useState } from "react";
+import { Button } from "@reactive-resume/ui/components/button";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+} from "@reactive-resume/ui/components/dialog";
+import { Icon } from "@reactive-resume/ui/components/icon";
+import { Input } from "@reactive-resume/ui/components/input";
+import { Label } from "@reactive-resume/ui/components/label";
+import { SegmentedControl, SegmentedControlItem } from "@reactive-resume/ui/components/segmented-control";
+import { Textarea } from "@reactive-resume/ui/components/textarea";
+import { toast } from "@reactive-resume/ui/components/toast";
+import { cn } from "@reactive-resume/utils/style";
+import { useDialogStore } from "@/dialogs/store";
+import { useHasUsableAiProvider } from "@/features/settings/integrations/hooks/use-has-usable-ai-provider";
+import { getOrpcErrorMessage } from "@/libs/error-message";
+import { orpc } from "@/libs/orpc/client";
+import { getStageLabel } from "../stages";
+import { useInvalidateApplications } from "../use-application-actions";
+
+type Parsed = RouterOutput["applications"]["ai"]["parsePosting"];
+type Stage = "saved" | "applied" | "interview";
+
+const STAGES: readonly Stage[] = ["saved", "applied", "interview"];
+const MAX_POSTING_CHARS = 20_000;
+// Reading waits for a pause in typing, so it starts once the paste has landed.
+const READ_DELAY_MS = 600;
+
+const isLink = (value: string) => /^https?:\/\/\S+$/i.test(value.trim());
+
+type AddApplicationDialogProps = {
+	open: boolean;
+	onOpenChange: (open: boolean) => void;
+	onAdded: (id: string) => void;
+};
+
+/**
+ * Add an application from a pasted link or posting. The posting is read (the page's own job data, or the AI
+ * provider when one is set up) into role and company, which stay editable; the posting itself is saved with the
+ * application for Check, the assistant and letters. Add, or Add and tailor a resume.
+ */
+export function AddApplicationDialog({ open, onOpenChange, onAdded }: AddApplicationDialogProps) {
+	// A fresh form for every open, kept in place while the dialog animates closed.
+	const [instance, setInstance] = useState(0);
+	const [wasOpen, setWasOpen] = useState(open);
+	if (open !== wasOpen) {
+		setWasOpen(open);
+		if (open) setInstance((count) => count + 1);
+	}
+
+	return (
+		<Dialog open={open} onOpenChange={onOpenChange}>
+			<DialogContent className="sm:max-w-[560px]">
+				<AddApplicationForm key={instance} onClose={() => onOpenChange(false)} onAdded={onAdded} />
+			</DialogContent>
+		</Dialog>
+	);
+}
+
+function AddApplicationForm({ onClose, onAdded }: { onClose: () => void; onAdded: (id: string) => void }) {
+	const id = useId();
+	const [input, setInput] = useState("");
+	const [role, setRole] = useState("");
+	const [company, setCompany] = useState("");
+	const [stage, setStage] = useState<Stage>("applied");
+	const [parsed, setParsed] = useState<Parsed | null>(null);
+	const { hasUsableProvider } = useHasUsableAiProvider();
+	const invalidate = useInvalidateApplications();
+	const openDialog = useDialogStore((state) => state.openDialog);
+
+	const read = useMutation(orpc.applications.ai.parsePosting.mutationOptions());
+	const { mutate: readPosting, reset: resetRead } = read;
+	const create = useMutation(orpc.applications.create.mutationOptions());
+
+	const text = input.trim();
+	const link = isLink(text);
+	// A link can always be read (for the page's own job data); pasted text needs the AI provider.
+	const readable = text.length > 8 && (link || hasUsableProvider);
+
+	useEffect(() => {
+		setParsed(null);
+		resetRead();
+		if (!readable) return;
+
+		const timeout = window.setTimeout(() => {
+			readPosting(
+				{ input: text },
+				{
+					onSuccess: (result) => {
+						setParsed(result);
+						setRole((current) => current || result.role);
+						setCompany((current) => current || result.company);
+					},
+				},
+			);
+		}, READ_DELAY_MS);
+		return () => window.clearTimeout(timeout);
+	}, [text, readable, readPosting, resetRead]);
+
+	const ready = role.trim().length > 0 && company.trim().length > 0 && !read.isPending && !create.isPending;
+
+	const add = async (tailor: boolean) => {
+		if (!ready) return;
+		try {
+			const applicationId = await create.mutateAsync({
+				company: company.trim(),
+				role: role.trim(),
+				status: stage,
+				...(parsed?.location ? { location: parsed.location } : {}),
+				...(parsed?.salary ? { salary: parsed.salary } : {}),
+				...(parsed?.requirements.length ? { requirements: parsed.requirements } : {}),
+				...(link ? { sourceUrl: text } : {}),
+				// The posting's text: read from the page for a link, or what was pasted.
+				...(parsed?.jobDescription
+					? { jobDescription: parsed.jobDescription }
+					: !link && text
+						? { jobDescription: text.slice(0, MAX_POSTING_CHARS) }
+						: {}),
+			});
+			invalidate();
+			toast.add({ description: t`Added ${role.trim()} at ${company.trim()}` });
+			onClose();
+			onAdded(applicationId);
+			if (tailor) openDialog("document.new", { step: "copy", applicationId });
+		} catch (error) {
+			toast.add({
+				type: "error",
+				description: getOrpcErrorMessage(error, { fallback: t`Couldn't add the application.` }),
+			});
+		}
+	};
+
+	return (
+		<form
+			className="grid gap-4"
+			onSubmit={(event) => {
+				event.preventDefault();
+				void add(true);
+			}}
+		>
+			<DialogHeader>
+				<DialogTitle>
+					<Trans>Add an application</Trans>
+				</DialogTitle>
+				<DialogDescription className="sr-only">
+					<Trans>Paste a job link or posting, then check the role and company.</Trans>
+				</DialogDescription>
+			</DialogHeader>
+
+			<div className="grid gap-1.5">
+				<Label htmlFor={`${id}-posting`}>
+					<Trans>Job link or posting text</Trans>
+				</Label>
+				<Textarea
+					id={`${id}-posting`}
+					rows={4}
+					value={input}
+					maxLength={MAX_POSTING_CHARS}
+					placeholder="https://…"
+					onChange={(event) => setInput(event.target.value)}
+					autoFocus
+				/>
+				<ReadStatus
+					text={text}
+					link={link}
+					readable={readable}
+					pending={read.isPending}
+					error={read.error}
+					parsed={parsed}
+					ai={hasUsableProvider}
+				/>
+			</div>
+
+			<div className="grid grid-cols-2 gap-3 max-sm:grid-cols-1">
+				<div className="grid gap-1.5">
+					<Label htmlFor={`${id}-role`}>
+						<Trans>Role</Trans>
+					</Label>
+					<Input id={`${id}-role`} value={role} onChange={(event) => setRole(event.target.value)} />
+				</div>
+				<div className="grid gap-1.5">
+					<Label htmlFor={`${id}-company`}>
+						<Trans>Company</Trans>
+					</Label>
+					<Input id={`${id}-company`} value={company} onChange={(event) => setCompany(event.target.value)} />
+				</div>
+			</div>
+
+			<div className="grid gap-1.5">
+				<span id={`${id}-stage`} className="font-medium text-sm">
+					<Trans>Stage</Trans>
+				</span>
+				<SegmentedControl
+					aria-labelledby={`${id}-stage`}
+					value={stage}
+					onValueChange={(value) => setStage(value as Stage)}
+					className="w-fit"
+				>
+					{STAGES.map((value) => (
+						<SegmentedControlItem key={value} value={value}>
+							{getStageLabel(value)}
+						</SegmentedControlItem>
+					))}
+				</SegmentedControl>
+			</div>
+
+			<DialogFooter>
+				<Button type="button" variant="secondary" disabled={!ready} onClick={() => void add(false)}>
+					<Trans>Add</Trans>
+				</Button>
+				<Button type="submit" disabled={!ready}>
+					<Trans>Add and tailor a resume</Trans>
+				</Button>
+			</DialogFooter>
+		</form>
+	);
+}
+
+type ReadStatusProps = {
+	text: string;
+	link: boolean;
+	readable: boolean;
+	pending: boolean;
+	error: unknown;
+	parsed: Parsed | null;
+	ai: boolean;
+};
+
+/** What reading the posting found, or why the fields need filling in by hand. */
+function ReadStatus({ text, link, readable, pending, error, parsed, ai }: ReadStatusProps) {
+	const base = "flex items-start gap-1.5 text-xs leading-[17px]";
+
+	if (!text) {
+		return (
+			<p className={cn(base, "text-ink-3")}>
+				<Trans>We read the page and save the posting for Check, the assistant and your letter.</Trans>
+			</p>
+		);
+	}
+	if (pending) {
+		return (
+			<p className={cn(base, "text-ink-2")} role="status">
+				{link ? <Trans>Reading the link…</Trans> : <Trans>Reading the posting…</Trans>}
+			</p>
+		);
+	}
+	if (error) {
+		return (
+			<p className={cn(base, "text-warn-text")} role="alert">
+				<Icon name="error" size={16} className="shrink-0" />
+				{getOrpcErrorMessage(error, {
+					byCode: { POSTING_UNREADABLE: t`That link couldn't be read. Paste the posting text instead.` },
+					fallback: t`The posting couldn't be read. Fill in the role and company.`,
+				})}
+			</p>
+		);
+	}
+	if (parsed?.filledBy === "ai") {
+		return (
+			<p className={cn(base, "text-accent-text")} role="status">
+				<Icon name="check_circle" size={16} className="shrink-0" />
+				<Plural
+					value={parsed.requirements.length}
+					one="Found role, company, location and # requirement. Saved with the application."
+					other="Found role, company, location and # requirements. Saved with the application."
+				/>
+			</p>
+		);
+	}
+	if (parsed?.filledBy === "page") {
+		return (
+			<p className={cn(base, "text-accent-text")} role="status">
+				<Icon name="check_circle" size={16} className="shrink-0" />
+				<Trans>Found the role and company on the page. The posting is saved with the application.</Trans>
+			</p>
+		);
+	}
+
+	return (
+		<p className={cn(base, "text-ink-3")}>
+			{link && readable ? (
+				<Trans>The page had no job details to read. Fill in the role and company.</Trans>
+			) : ai ? (
+				<Trans>Fill in the role and company. The posting is saved with the application.</Trans>
+			) : (
+				<Trans>Fill in the role and company. Connect an AI provider in settings to read them from the posting.</Trans>
+			)}
+		</p>
+	);
+}
diff --git a/apps/web/src/features/applications/components/application-actions-menu.tsx b/apps/web/src/features/applications/components/application-actions-menu.tsx
index f577a69c3..1077421b4 100644
--- a/apps/web/src/features/applications/components/application-actions-menu.tsx
+++ b/apps/web/src/features/applications/components/application-actions-menu.tsx
@@ -1,16 +1,6 @@
 import type { Application } from "../types";
 import { t } from "@lingui/core/macro";
 import { Trans } from "@lingui/react/macro";
-import {
-	ArchiveIcon,
-	ArrowRightIcon,
-	DotsThreeVerticalIcon,
-	PencilSimpleIcon,
-	TrashIcon,
-	TrayArrowUpIcon,
-} from "@phosphor-icons/react";
-import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { STAGES } from "@reactive-resume/schema/applications/data";
 import { Button } from "@reactive-resume/ui/components/button";
 import {
 	DropdownMenu,
@@ -22,56 +12,26 @@ import {
 	DropdownMenuSubTrigger,
 	DropdownMenuTrigger,
 } from "@reactive-resume/ui/components/dropdown-menu";
-import { toast } from "@reactive-resume/ui/components/toast";
+import { Icon } from "@reactive-resume/ui/components/icon";
 import { cn } from "@reactive-resume/utils/style";
 import { useConfirm } from "@/hooks/use-confirm";
-import { orpc } from "@/libs/orpc/client";
-import { applicationsListQueryKey } from "../queries";
+import { CLOSED_REASONS, getClosedReasonLabel, getStageColor, getStageLabel, PIPELINE } from "../stages";
+import { useApplicationActions } from "../use-application-actions";
 
-type Props = {
-	application: Application;
-	onEdit: (application: Application) => void;
-	// Whether the trigger should only appear on hover of the parent (cards). Rows keep it visible.
-	showOnHover?: boolean;
-	className?: string;
-};
-
-// Stop pointer/click from reaching the card (which would start a drag or open the detail panel).
-// React portals bubble synthetic events through the React tree, so a menu-item click would
-// otherwise reach the card's onClick even though the menu is portaled in the DOM.
+// Keep pointer and clicks from reaching the card, which would start a drag or open the detail sheet. React portals
+// bubble synthetic events through the React tree, so a menu item's click would otherwise reach the card.
 const stop = (event: React.SyntheticEvent) => event.stopPropagation();
 
-// Shared kebab menu for board cards and table rows: edit, move stage, archive, delete.
-export function ApplicationActionsMenu({ application, onEdit, showOnHover, className }: Props) {
-	const queryClient = useQueryClient();
+type ApplicationActionsMenuProps = { application: Application; className?: string };
+
+/** A card's ⋯ menu, the keyboard alternative to dragging: Move to…, Close…, and Delete after asking. */
+export function ApplicationActionsMenu({ application, className }: ApplicationActionsMenuProps) {
+	const { moveTo, close, remove } = useApplicationActions();
 	const confirm = useConfirm();
 
-	const invalidate = () => {
-		void queryClient.invalidateQueries({ queryKey: applicationsListQueryKey() });
-		void queryClient.invalidateQueries({ queryKey: orpc.applications.stats.queryKey() });
-		void queryClient.invalidateQueries({ queryKey: orpc.applications.tags.queryKey() });
-	};
-
-	const update = useMutation(
-		orpc.applications.update.mutationOptions({
-			onSuccess: invalidate,
-			onError: () => toast.add({ type: "error", description: t`Something went wrong. Please try again.` }),
-		}),
-	);
-
-	const remove = useMutation(
-		orpc.applications.delete.mutationOptions({
-			onSuccess: () => {
-				invalidate();
-				toast.add({ type: "success", description: t`Application deleted.` });
-			},
-			onError: () => toast.add({ type: "error", description: t`Couldn't delete the application.` }),
-		}),
-	);
-
 	const onDelete = async () => {
 		const confirmed = await confirm(t`Delete this application?`, {
-			description: t`"${application.role} · ${application.company}" and its full timeline will be permanently deleted. This can't be undone.`,
+			description: t`“${application.role} · ${application.company}” and its timeline are deleted permanently. This can't be undone.`,
 			confirmText: t`Delete`,
 		});
 		if (confirmed) remove.mutate({ id: application.id });
@@ -83,56 +43,60 @@ export function ApplicationActionsMenu({ application, onEdit, showOnHover, class
 				<DropdownMenuTrigger
 					render={
 						<Button
-							size="icon-sm"
+							size="icon-xs"
 							variant="ghost"
-							aria-label={t`Application actions`}
+							aria-label={t`Options for ${application.role} at ${application.company}`}
 							onClick={stop}
 							onPointerDown={stop}
-							className={cn(
-								"size-6 text-muted-foreground",
-								showOnHover &&
-									"opacity-0 transition-opacity focus-visible:opacity-100 group-hover:opacity-100 data-[popup-open]:opacity-100",
-							)}
-						>
-							<DotsThreeVerticalIcon />
-						</Button>
+							className="text-ink-3"
+						/>
 					}
-				/>
-				<DropdownMenuContent align="end" className="w-44" onClick={stop}>
-					<DropdownMenuItem onClick={() => onEdit(application)}>
-						<PencilSimpleIcon />
-						<Trans>Edit</Trans>
-					</DropdownMenuItem>
-
+				>
+					<Icon name="more_horiz" size={18} />
+				</DropdownMenuTrigger>
+				<DropdownMenuContent align="end" className="w-48" onClick={stop}>
 					<DropdownMenuSub>
 						<DropdownMenuSubTrigger>
-							<ArrowRightIcon />
-							<Trans>Move to</Trans>
+							<Icon name="arrow_forward" size={18} />
+							<Trans>Move to…</Trans>
 						</DropdownMenuSubTrigger>
 						<DropdownMenuSubContent>
-							{STAGES.map((stage) => (
+							{PIPELINE.map((status) => (
 								<DropdownMenuItem
-									key={stage.value}
-									disabled={stage.value === application.status}
-									onClick={() => update.mutate({ id: application.id, status: stage.value })}
+									key={status}
+									disabled={status === application.status}
+									onClick={() => moveTo(application, status)}
 								>
-									<span className="size-2 rounded-sm" style={{ background: stage.color }} />
-									{stage.label}
+									<span
+										aria-hidden="true"
+										className="size-2 rounded-full"
+										style={{ background: getStageColor(status) }}
+									/>
+									{getStageLabel(status)}
 								</DropdownMenuItem>
 							))}
 						</DropdownMenuSubContent>
 					</DropdownMenuSub>
 
-					<DropdownMenuItem onClick={() => update.mutate({ id: application.id, archived: !application.archived })}>
-						{application.archived ? <TrayArrowUpIcon /> : <ArchiveIcon />}
-						{application.archived ? <Trans>Unarchive</Trans> : <Trans>Archive</Trans>}
-					</DropdownMenuItem>
+					<DropdownMenuSub>
+						<DropdownMenuSubTrigger>
+							<Icon name="check" size={18} />
+							<Trans>Close…</Trans>
+						</DropdownMenuSubTrigger>
+						<DropdownMenuSubContent>
+							{CLOSED_REASONS.map((reason) => (
+								<DropdownMenuItem key={reason} onClick={() => close(application, reason)}>
+									{getClosedReasonLabel(reason)}
+								</DropdownMenuItem>
+							))}
+						</DropdownMenuSubContent>
+					</DropdownMenuSub>
 
 					<DropdownMenuSeparator />
 
 					<DropdownMenuItem variant="destructive" onClick={onDelete}>
-						<TrashIcon />
-						<Trans>Delete</Trans>
+						<Icon name="delete" size={18} />
+						<Trans>Delete…</Trans>
 					</DropdownMenuItem>
 				</DropdownMenuContent>
 			</DropdownMenu>
diff --git a/apps/web/src/features/applications/components/application-ai-copilot.test.tsx b/apps/web/src/features/applications/components/application-ai-copilot.test.tsx
index 46c77e1eb..509225496 100644
--- a/apps/web/src/features/applications/components/application-ai-copilot.test.tsx
+++ b/apps/web/src/features/applications/components/application-ai-copilot.test.tsx
@@ -35,6 +35,11 @@ const application: Application = {
 	salary: null,
 	status: "saved",
 	archived: false,
+	closedReason: null,
+	coverLetterId: null,
+	sentResumeVersionId: null,
+	sentCheckScore: null,
+	requirements: [],
 	resumeId: null,
 	source: null,
 	sourceUrl: null,
diff --git a/apps/web/src/features/applications/components/application-card.tsx b/apps/web/src/features/applications/components/application-card.tsx
index 1ff57d43f..faf23b958 100644
--- a/apps/web/src/features/applications/components/application-card.tsx
+++ b/apps/web/src/features/applications/components/application-card.tsx
@@ -1,95 +1,56 @@
 import type { Application } from "../types";
-import { Trans } from "@lingui/react/macro";
-import { FileTextIcon, MapPinIcon } from "@phosphor-icons/react";
-import { getInitials } from "@reactive-resume/utils/string";
+import { useLingui } from "@lingui/react";
+import { Icon } from "@reactive-resume/ui/components/icon";
 import { cn } from "@reactive-resume/utils/style";
+import { describeNextStep, getNextStep } from "../next-step";
 import { ApplicationActionsMenu } from "./application-actions-menu";
 
-type Props = {
+type ApplicationCardProps = {
 	application: Application;
 	onClick?: () => void;
-	onEdit?: (application: Application) => void;
-	className?: string;
+	/** The ⋯ menu (Move to…, Close…, Delete); cards dragged in the overlay go without. */
+	withMenu?: boolean;
 	dragging?: boolean;
 };
 
-export function ApplicationCard({ application, onClick, onEdit, className, dragging }: Props) {
-	const followUp = application.followUpAt && !application.archived;
+/** A board card: the company's initial, role and company, and the next step (warn when it's overdue). */
+export function ApplicationCard({ application, onClick, withMenu = false, dragging = false }: ApplicationCardProps) {
+	const { i18n } = useLingui();
+	const next = describeNextStep(getNextStep(application), application, i18n.locale);
 
 	return (
-		// biome-ignore lint/a11y/useSemanticElements: the card nests an actions-menu <button>, so it can't itself be a <button>; it stays keyboard-operable via role + tabIndex + onKeyDown.
 		<div
-			role="button"
-			tabIndex={0}
-			onClick={onClick}
-			onKeyDown={(event) => {
-				if (event.key === "Enter" || event.key === " ") {
-					event.preventDefault();
-					onClick?.();
-				}
-			}}
 			className={cn(
-				"group relative w-full cursor-pointer rounded-xl border border-border bg-card p-3 text-left shadow-sm outline-none transition-colors hover:border-foreground/25 focus-visible:ring-2 focus-visible:ring-ring",
-				dragging && "scale-[1.02] shadow-lg",
-				className,
+				"group relative grid gap-2 rounded-[10px] border border-line bg-surface p-3 shadow-e1 transition-colors duration-quick hover:border-line-2",
+				dragging && "rotate-1 shadow-e3",
 			)}
 		>
-			{onEdit && (
-				<ApplicationActionsMenu
-					application={application}
-					onEdit={onEdit}
-					showOnHover
-					className="absolute end-1.5 top-1.5"
-				/>
-			)}
 			<div className="flex items-start gap-2.5">
-				<div
-					className={cn(
-						"flex size-7 shrink-0 items-center justify-center rounded-[7px] bg-sunken font-semibold text-ink-2 text-xs",
-					)}
+				<span
+					aria-hidden="true"
+					className="grid size-7 shrink-0 place-items-center rounded-[7px] bg-sunken font-semibold text-ink-2 text-xs"
 				>
-					{getInitials(application.company)}
-				</div>
-				<div className="min-w-0 flex-1">
-					<div className="truncate font-semibold text-sm tracking-tight">{application.role}</div>
-					<div className="truncate text-muted-foreground text-xs">{application.company}</div>
-				</div>
-				{followUp && (
-					<span
-						title="Needs follow-up"
-						className={cn("mt-1 size-2 shrink-0 rounded-full bg-warn ring-2 ring-warn/25", onEdit && "me-6")}
-					/>
-				)}
+					{application.company.slice(0, 1).toUpperCase()}
+				</span>
+				<button
+					type="button"
+					onClick={onClick}
+					className="grid min-w-0 flex-1 text-start after:absolute after:inset-0 after:rounded-[10px]"
+				>
+					<span className="truncate font-semibold text-sm">{application.role}</span>
+					<span className="truncate text-ink-3 text-xs">{application.company}</span>
+				</button>
+				{withMenu && <ApplicationActionsMenu application={application} className="relative z-10 -me-1.5 -mt-1.5" />}
 			</div>
-
-			{(application.location || application.salary) && (
-				<div className="mt-2.5 flex items-center gap-2 text-muted-foreground text-xs">
-					{application.location && (
-						<span className="flex min-w-0 items-center gap-1">
-							<MapPinIcon className="size-3 shrink-0" />
-							<span className="truncate">{application.location}</span>
-						</span>
-					)}
-					{application.location && application.salary && <span className="opacity-40">·</span>}
-					{application.salary && <span className="font-medium text-foreground">{application.salary}</span>}
-				</div>
-			)}
-
-			{(application.resumeId || application.source) && (
-				<div className="mt-2.5 flex flex-wrap gap-1.5">
-					{application.resumeId && (
-						<span className="inline-flex items-center gap-1 rounded-md border border-border bg-muted/50 px-2 py-0.5 font-medium text-[11px] text-muted-foreground">
-							<FileTextIcon className="size-3" />
-							<Trans>Resume linked</Trans>
-						</span>
-					)}
-					{application.source && (
-						<span className="inline-flex items-center rounded-md border border-border px-2 py-0.5 font-medium text-[11px] text-muted-foreground">
-							{application.source}
-						</span>
-					)}
-				</div>
-			)}
+			<span
+				className={cn(
+					"flex items-center gap-1.5 text-xs",
+					next.tone === "warn" ? "text-warn-text" : next.tone === "muted" ? "text-ink-3" : "text-ink-2",
+				)}
+			>
+				<Icon name={next.icon} size={15} className="shrink-0" />
+				<span className="truncate">{next.title}</span>
+			</span>
 		</div>
 	);
 }
diff --git a/apps/web/src/features/applications/components/application-detail-sheet.tsx b/apps/web/src/features/applications/components/application-detail-sheet.tsx
index d6435cf57..edc48d42e 100644
--- a/apps/web/src/features/applications/components/application-detail-sheet.tsx
+++ b/apps/web/src/features/applications/components/application-detail-sheet.tsx
@@ -1,830 +1,510 @@
-import type {
-	ApplicationStatus,
-	ApplicationTimelineEntry,
-	Contact,
-	InterviewTimelineEntry,
-} from "@reactive-resume/schema/applications/data";
+import type { InterviewTimelineEntry } from "@reactive-resume/schema/applications/data";
 import type { Application } from "../types";
 import { t } from "@lingui/core/macro";
-import { Trans } from "@lingui/react/macro";
-import {
-	ArrowRightIcon,
-	ArrowSquareOutIcon,
-	CalendarPlusIcon,
-	MapPinIcon,
-	PencilSimpleIcon,
-	PlusIcon,
-	TrashIcon,
-	XCircleIcon,
-	XIcon,
-} from "@phosphor-icons/react";
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import { Link } from "@tanstack/react-router";
-import { useState } from "react";
-import { contactSchema, STAGES } from "@reactive-resume/schema/applications/data";
+import { useLingui } from "@lingui/react";
+import { Plural, Trans } from "@lingui/react/macro";
+import { useMutation, useQuery } from "@tanstack/react-query";
+import { useEffect, useId, useRef, useState } from "react";
 import { Button } from "@reactive-resume/ui/components/button";
 import {
 	Dialog,
 	DialogContent,
 	DialogDescription,
-	DialogFooter,
 	DialogHeader,
 	DialogTitle,
 } from "@reactive-resume/ui/components/dialog";
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuSeparator,
+	DropdownMenuTrigger,
+} from "@reactive-resume/ui/components/dropdown-menu";
+import { Icon } from "@reactive-resume/ui/components/icon";
 import { Input } from "@reactive-resume/ui/components/input";
-import { Sheet, SheetContent, SheetHeader, SheetTitle } from "@reactive-resume/ui/components/sheet";
+import { Sheet, SheetContent, SheetDescription, SheetTitle } from "@reactive-resume/ui/components/sheet";
 import { Textarea } from "@reactive-resume/ui/components/textarea";
 import { toast } from "@reactive-resume/ui/components/toast";
+import { useBreakpoint } from "@reactive-resume/ui/hooks/use-breakpoint";
 import { cn } from "@reactive-resume/utils/style";
 import { useConfirm } from "@/hooks/use-confirm";
 import { orpc } from "@/libs/orpc/client";
-import { formatDuration, interviewKindOf, isInterview } from "../interviews";
-import { applicationsListQueryKey } from "../queries";
+import { stageSince } from "../next-step";
+import { getClosedReasonLabel, getNextStage, getStageColor, getStageLabel, PIPELINE } from "../stages";
+import { useApplicationActions, useInvalidateApplications } from "../use-application-actions";
 import { ApplicationAiCopilot } from "./application-ai-copilot";
-import { FileAttachmentField } from "./file-attachment-field";
+import { Activity } from "./detail/activity";
+import { CloseDialog } from "./detail/close-dialog";
+import { Contacts } from "./detail/contacts";
+import { NextStepCard } from "./detail/next-step-card";
+import { SentDocuments } from "./detail/sent-documents";
 import { InterviewDialog } from "./interview-dialog";
 
-const stageIndex = (status: ApplicationStatus) => STAGES.findIndex((s) => s.value === status);
-const stageOf = (status: ApplicationStatus) => STAGES.find((s) => s.value === status);
-
-const dateInputValue = (value: Date | string) => {
-	const date = new Date(value);
-	return Number.isNaN(date.getTime()) ? "" : date.toISOString().slice(0, 10);
-};
-
-// Day-granular stage/note entries render in UTC; pass `local` for interviews, which carry a real time of day.
-const formatDate = (value: Date | string, local = false) =>
-	new Date(value).toLocaleDateString(undefined, {
-		month: "short",
-		day: "numeric",
-		year: "numeric",
-		...(local ? {} : { timeZone: "UTC" }),
-	});
-
-// Interviews carry a real time of day, so show them in the viewer's timezone (stage/note
-// entries are day-granular and rendered in UTC above).
-const formatDateTime = (value: Date | string) =>
-	new Date(value).toLocaleString(undefined, {
-		weekday: "short",
-		month: "short",
-		day: "numeric",
-		hour: "numeric",
-		minute: "2-digit",
-	});
-
-const byNewest = (a: ApplicationTimelineEntry, b: ApplicationTimelineEntry) =>
-	new Date(b.at).getTime() - new Date(a.at).getTime();
-
-const currentStageAnchorId = (activity: ApplicationTimelineEntry[], status: ApplicationStatus) =>
-	[...activity].sort(byNewest).find((entry) => entry.type === "stage" && entry.stage === status)?.id;
-
-const latestStageDate = (activity: ApplicationTimelineEntry[], status: ApplicationStatus) =>
-	[...activity].sort(byNewest).find((entry) => entry.type === "stage" && entry.stage === status)?.at;
-
-const INITIAL_CONTACT_DRAFT = { name: "", role: "", type: "", email: "", phone: "" };
-
-type Props = {
+type DetailSheetProps = {
 	application: Application | null;
 	onOpenChange: (open: boolean) => void;
-	onEdit: (application: Application) => void;
+	onEditDetails: (application: Application) => void;
 };
 
-export function ApplicationDetailSheet({ application, onOpenChange, onEdit }: Props) {
-	const queryClient = useQueryClient();
-	const confirm = useConfirm();
-	const id = application?.id;
-
+/**
+ * One application, 480px from the right (full screen on phones): the stage stepper with Move to next, the next
+ * step, what was sent, the key facts, notes and activity. Close application… takes a reason; Delete is in ⋯.
+ */
+export function ApplicationDetailSheet({ application, onOpenChange, onEditDetails }: DetailSheetProps) {
+	const phone = useBreakpoint() === "mobile";
 	const { data } = useQuery({
-		...orpc.applications.getById.queryOptions({ input: { id: id ?? "" } }),
-		enabled: !!id,
-		...(application ? { initialData: application } : {}),
+		...orpc.applications.getById.queryOptions({ input: { id: application?.id ?? "" } }),
+		enabled: Boolean(application),
+		...(application ? { placeholderData: application } : {}),
 	});
-
 	const current = data ?? application;
-	const [interviewDialog, setInterviewDialog] = useState<{ open: boolean; interview: InterviewTimelineEntry | null }>({
-		open: false,
-		interview: null,
-	});
-	const openInterview = (interview: InterviewTimelineEntry | null) => setInterviewDialog({ open: true, interview });
-
-	const invalidate = () => {
-		void queryClient.invalidateQueries({ queryKey: applicationsListQueryKey() });
-		void queryClient.invalidateQueries({ queryKey: orpc.applications.stats.queryKey() });
-		if (id) void queryClient.invalidateQueries({ queryKey: orpc.applications.getById.queryKey({ input: { id } }) });
-	};
-
-	const update = useMutation(
-		orpc.applications.update.mutationOptions({
-			onSuccess: invalidate,
-			onError: () => toast.add({ type: "error", description: t`Something went wrong. Please try again.` }),
-		}),
-	);
-
-	const addNote = useMutation(
-		orpc.applications.addNote.mutationOptions({
-			onSuccess: invalidate,
-			onError: () => toast.add({ type: "error", description: t`Couldn't save the note.` }),
-		}),
-	);
-
-	const updateTimelineEntry = useMutation(
-		orpc.applications.updateTimelineEntry.mutationOptions({
-			onSuccess: invalidate,
-			onError: () => toast.add({ type: "error", description: t`Couldn't update the timeline entry.` }),
-		}),
-	);
-
-	const deleteTimelineEntry = useMutation(
-		orpc.applications.deleteTimelineEntry.mutationOptions({
-			onSuccess: invalidate,
-			onError: () => toast.add({ type: "error", description: t`Couldn't delete the timeline entry.` }),
-		}),
-	);
-
-	const remove = useMutation(
-		orpc.applications.delete.mutationOptions({
-			onSuccess: () => {
-				invalidate();
-				toast.add({ type: "success", description: t`Application deleted.` });
-				onOpenChange(false);
-			},
-			onError: () => toast.add({ type: "error", description: t`Couldn't delete the application.` }),
-		}),
-	);
-
-	if (!current) return null;
-
-	const idx = stageIndex(current.status);
-	const nextStage = idx >= 0 && idx < STAGES.length - 2 ? STAGES[idx + 1] : null;
 
 	return (
-		<Sheet open={!!application} onOpenChange={onOpenChange}>
-			<SheetContent side="right" className="w-full gap-0 data-[side=right]:sm:max-w-lg">
-				<SheetHeader className="gap-3">
-					<div className="flex items-start justify-between gap-2 pe-8">
-						<div className="min-w-0">
-							<SheetTitle className="truncate">{current.role}</SheetTitle>
-							<div className="truncate text-muted-foreground text-sm">
-								{current.company}
-								{current.location ? ` · ${current.location}` : ""}
-							</div>
-						</div>
-						<Button size="sm" variant="secondary" className="shrink-0" onClick={() => onEdit(current)}>
-							<PencilSimpleIcon />
-							<Trans>Edit</Trans>
-						</Button>
-					</div>
-
-					{/* stage stepper */}
-					<div className="flex gap-1.5">
-						{STAGES.map((stage, i) => (
-							<span
-								key={stage.value}
-								title={stage.label}
-								className={cn("h-1.5 flex-1 rounded-full", i <= idx ? "" : "bg-muted")}
-								style={i <= idx ? { background: stage.color } : undefined}
-							/>
-						))}
-					</div>
-					<div className="flex items-center justify-between">
-						<span className="font-medium text-sm">{STAGES[idx]?.label ?? current.status}</span>
-						{nextStage && (
-							<Button
-								size="sm"
-								variant="secondary"
-								disabled={update.isPending}
-								onClick={() => update.mutate({ id: current.id, status: nextStage.value })}
-							>
-								<Trans>Move to</Trans> {nextStage.label}
-								<ArrowRightIcon />
-							</Button>
-						)}
-					</div>
-				</SheetHeader>
-
-				<div className="flex min-h-0 flex-1 flex-col gap-5 overflow-y-auto px-4 py-4 [&>*]:shrink-0">
-					{/* key facts */}
-					<dl className="grid grid-cols-2 gap-x-4 gap-y-3 text-sm">
-						<Fact label={t`Salary`} value={current.salary} />
-						<Fact label={t`Source`} value={current.source} />
-						<Fact
-							label={t`Applied on`}
-							value={formatDate(latestStageDate(current.activity, "applied") ?? current.appliedAt)}
-						/>
-					</dl>
-
-					{current.sourceUrl && (
-						<a
-							href={current.sourceUrl}
-							target="_blank"
-							rel="noreferrer"
-							className="inline-flex items-center gap-1.5 text-primary text-sm hover:underline"
-						>
-							<ArrowSquareOutIcon />
-							<Trans>Job posting</Trans>
-						</a>
-					)}
-
-					{current.notes?.trim() && (
-						<Section title={t`Notes`}>
-							<p className="wrap-break-word whitespace-pre-wrap text-sm">{current.notes}</p>
-						</Section>
-					)}
-
-					{/* documents: linked resume + cover letter */}
-					<Section title={t`Documents sent`}>
-						{current.resumeId ? (
-							<Link
-								to="/builder/$resumeId"
-								params={{ resumeId: current.resumeId }}
-								className="flex items-center gap-3 rounded-lg border border-border p-2.5 hover:bg-muted/50"
-							>
-								<span className="flex size-8 items-center justify-center rounded-md bg-primary/10 font-bold text-[10px] text-primary">
-									RXR
-								</span>
-								<span className="min-w-0 flex-1 truncate text-sm">
-									<Trans>Linked Reactive Resume</Trans>
-								</span>
-								<ArrowSquareOutIcon className="text-muted-foreground" />
-							</Link>
-						) : (
-							<p className="text-muted-foreground text-sm">
-								<Trans>No resume linked.</Trans>
-							</p>
-						)}
-
-						<FileAttachmentField
-							value={
-								current.resumeFileUrl
-									? { url: current.resumeFileUrl, name: current.resumeFileName || t`Resume file` }
-									: null
-							}
-							attachLabel={t`Attach a resume file (PDF)`}
-							disabled={update.isPending}
-							onChange={(value) =>
-								update.mutate({
-									id: current.id,
-									resumeFileUrl: value?.url ?? null,
-									resumeFileName: value?.name ?? null,
-								})
-							}
-						/>
-
-						<FileAttachmentField
-							value={
-								current.coverLetterUrl
-									? { url: current.coverLetterUrl, name: current.coverLetterName || t`Cover letter` }
-									: null
-							}
-							attachLabel={t`Attach a cover letter (PDF)`}
-							disabled={update.isPending}
-							onChange={(value) =>
-								update.mutate({
-									id: current.id,
-									coverLetterUrl: value?.url ?? null,
-									coverLetterName: value?.name ?? null,
-								})
-							}
-						/>
-					</Section>
-
-					{/* AI copilot — placed high so it's discoverable without scrolling past the timeline */}
-					<ApplicationAiCopilot application={current} />
-
-					<Section title={t`Interviews`}>
-						<InterviewList activity={current.activity} onOpen={openInterview} />
-						<Button size="sm" variant="secondary" className="self-start" onClick={() => openInterview(null)}>
-							<CalendarPlusIcon />
-							<Trans>Schedule interview</Trans>
-						</Button>
-					</Section>
-
-					{/* contacts */}
-					<Section title={t`Contacts`}>
-						<ContactsEditor
-							key={current.id}
-							contacts={current.contacts}
-							pending={update.isPending}
-							onChange={(contacts) => update.mutate({ id: current.id, contacts })}
-						/>
-					</Section>
-
-					{/* follow-up */}
-					{current.followUpAt && (
-						<Section title={t`Follow-up`}>
-							<div className="rounded-lg border border-warn/40 bg-warn-soft p-2.5 text-sm">
-								<span className="font-medium">{new Date(current.followUpAt).toLocaleDateString()}</span>
-								{current.followUpNote ? ` — ${current.followUpNote}` : ""}
-							</div>
-						</Section>
-					)}
-
-					<ApplicationTimeline
+		<Sheet open={Boolean(application)} onOpenChange={onOpenChange}>
+			<SheetContent
+				side={phone ? "bottom" : "right"}
+				closeLabel={t`Close`}
+				className={cn("gap-0 overflow-y-auto", phone ? "h-svh" : "data-[side=right]:sm:max-w-[480px]")}
+			>
+				{current && (
+					<Detail
 						key={current.id}
 						application={current}
-						pending={addNote.isPending || updateTimelineEntry.isPending || deleteTimelineEntry.isPending}
-						onAddNote={(text) => addNote.mutateAsync({ id: current.id, text })}
-						onOpenInterview={openInterview}
-						onUpdateEntry={(entryId, input) => updateTimelineEntry.mutateAsync({ id: current.id, entryId, ...input })}
-						onDeleteEntry={(entryId) => {
-							void confirm(t`Delete this timeline entry?`, {
-								description: t`This entry will be permanently deleted. This can't be undone.`,
-								confirmText: t`Delete`,
-							}).then((confirmed) => {
-								if (confirmed) deleteTimelineEntry.mutate({ id: current.id, entryId });
-							});
-						}}
+						onEditDetails={onEditDetails}
+						onDeleted={() => onOpenChange(false)}
 					/>
-				</div>
-
-				<InterviewDialog
-					application={current}
-					interview={interviewDialog.interview}
-					open={interviewDialog.open}
-					onOpenChange={(open) => setInterviewDialog((prev) => ({ ...prev, open }))}
-				/>
-
-				<div className="flex items-center gap-1 border-border border-t p-4">
-					{current.status !== "rejected" && (
-						<Button
-							size="sm"
-							variant="ghost"
-							disabled={update.isPending}
-							onClick={() => update.mutate({ id: current.id, status: "rejected" })}
-						>
-							<XCircleIcon />
-							<Trans>Mark rejected</Trans>
-						</Button>
-					)}
-					<Button
-						size="sm"
-						variant="ghost"
-						onClick={() => update.mutate({ id: current.id, archived: !current.archived })}
-					>
-						{current.archived ? <Trans>Unarchive</Trans> : <Trans>Archive</Trans>}
-					</Button>
-					<Button
-						size="sm"
-						variant="ghost"
-						className="ms-auto text-destructive"
-						disabled={remove.isPending}
-						onClick={async () => {
-							const confirmed = await confirm(t`Delete this application?`, {
-								description: t`"${current.role} · ${current.company}" and its full timeline will be permanently deleted. This can't be undone.`,
-								confirmText: t`Delete`,
-							});
-							if (confirmed) remove.mutate({ id: current.id });
-						}}
-					>
-						<TrashIcon />
-						<Trans>Delete</Trans>
-					</Button>
-				</div>
+				)}
 			</SheetContent>
 		</Sheet>
 	);
 }
 
-type ApplicationTimelineProps = {
+type DetailProps = {
 	application: Application;
-	pending: boolean;
-	onAddNote: (text: string) => Promise<unknown>;
-	onOpenInterview: (interview: InterviewTimelineEntry) => void;
-	onUpdateEntry: (entryId: string, input: { date?: string; text?: string }) => Promise<unknown>;
-	onDeleteEntry: (entryId: string) => void;
+	onEditDetails: (application: Application) => void;
+	onDeleted: () => void;
 };
 
-function ApplicationTimeline({
-	application,
-	pending,
-	onAddNote,
-	onOpenInterview,
-	onUpdateEntry,
-	onDeleteEntry,
-}: ApplicationTimelineProps) {
-	const [note, setNote] = useState("");
-	const [editingDate, setEditingDate] = useState<ApplicationTimelineEntry | null>(null);
-	const [editingNote, setEditingNote] = useState<(ApplicationTimelineEntry & { type: "note" }) | null>(null);
-	const [dateDraft, setDateDraft] = useState("");
-	const [noteDraft, setNoteDraft] = useState("");
-	const anchorId = currentStageAnchorId(application.activity, application.status);
-	const sorted = [...application.activity].sort(byNewest);
+function Detail({ application, onEditDetails, onDeleted }: DetailProps) {
+	const { i18n } = useLingui();
+	const confirm = useConfirm();
+	const { moveTo, close, remove } = useApplicationActions();
+	const [interview, setInterview] = useState<{ open: boolean; entry: InterviewTimelineEntry | null }>({
+		open: false,
+		entry: null,
+	});
+	const [closing, setClosing] = useState(false);
+	const [postingOpen, setPostingOpen] = useState(false);
 
-	const openDate = (entry: ApplicationTimelineEntry) => {
-		setEditingDate(entry);
-		setDateDraft(dateInputValue(entry.at));
-	};
+	const next = getNextStage(application.status);
+	const reached = PIPELINE.indexOf(application.status);
+	const since = Math.max(0, Math.floor((Date.now() - stageSince(application).getTime()) / 86_400_000));
+	const closed = application.status === "closed";
 
-	const openNote = (entry: ApplicationTimelineEntry & { type: "note" }) => {
-		setEditingNote(entry);
-		setNoteDraft(entry.text);
-	};
-
-	const add = () => {
-		if (pending) return;
-		const text = note.trim();
-		if (!text) return;
-		void onAddNote(text)
-			.then(() => setNote(""))
-			.catch(() => false);
+	const onDelete = async () => {
+		const confirmed = await confirm(t`Delete this application?`, {
+			description: t`“${application.role} · ${application.company}” and its timeline are deleted permanently. This can't be undone.`,
+			confirmText: t`Delete`,
+		});
+		if (!confirmed) return;
+		remove.mutate({ id: application.id }, { onSuccess: onDeleted });
 	};
 
 	return (
-		<Section title={t`Timeline`}>
-			<div className="flex flex-col gap-3">
-				<div className="flex gap-2">
+		<>
+			<header className="grid gap-4 border-line border-b px-5 pt-5 pb-4">
+				<div className="flex items-start gap-3 pe-8">
+					<span
+						aria-hidden="true"
+						className="grid size-10 shrink-0 place-items-center rounded-[9px] bg-sunken font-semibold text-ink-2"
+					>
+						{application.company.slice(0, 1).toUpperCase()}
+					</span>
+					<div className="grid min-w-0 flex-1 gap-0.5">
+						<SheetTitle className="font-display font-medium text-[22px] leading-7">{application.role}</SheetTitle>
+						<SheetDescription className="flex flex-wrap items-center gap-x-1.5 text-ink-2 text-sm">
+							<span>{[application.company, application.location].filter(Boolean).join(" · ")}</span>
+							{(application.sourceUrl || application.jobDescription) && (
+								<>
+									<span aria-hidden="true">·</span>
+									{application.sourceUrl && !application.jobDescription ? (
+										<a
+											href={application.sourceUrl}
+											target="_blank"
+											rel="noreferrer"
+											className="font-medium text-accent-text hover:underline"
+										>
+											<Trans>View posting</Trans>
+										</a>
+									) : (
+										<button
+											type="button"
+											onClick={() => setPostingOpen(true)}
+											className="font-medium text-accent-text hover:underline"
+										>
+											<Trans>View posting</Trans>
+										</button>
+									)}
+								</>
+							)}
+						</SheetDescription>
+					</div>
+					<DropdownMenu>
+						<DropdownMenuTrigger
+							render={
+								<Button size="icon-sm" variant="ghost" aria-label={t`Application options`} className="text-ink-3" />
+							}
+						>
+							<Icon name="more_horiz" />
+						</DropdownMenuTrigger>
+						<DropdownMenuContent align="end">
+							<DropdownMenuItem onClick={() => onEditDetails(application)}>
+								<Icon name="edit" size={18} />
+								<Trans>Edit details…</Trans>
+							</DropdownMenuItem>
+							<DropdownMenuSeparator />
+							<DropdownMenuItem variant="destructive" onClick={onDelete}>
+								<Icon name="delete" size={18} />
+								<Trans>Delete…</Trans>
+							</DropdownMenuItem>
+						</DropdownMenuContent>
+					</DropdownMenu>
+				</div>
+
+				<div className="grid gap-2.5">
+					<ol aria-label={t`Stages`} className="grid grid-cols-5 gap-1.5">
+						{PIPELINE.map((stage, index) => (
+							<li key={stage}>
+								<button
+									type="button"
+									aria-current={stage === application.status ? "step" : undefined}
+									onClick={() => stage !== application.status && moveTo(application, stage)}
+									className="grid w-full gap-1.5 text-start"
+								>
+									<span
+										className="h-1.5 rounded-full transition-colors duration-standard"
+										style={{
+											background: !closed && index <= reached ? getStageColor(stage) : "var(--line)",
+										}}
+									/>
+									<span
+										className={cn(
+											"truncate text-[11px]",
+											stage === application.status ? "font-semibold text-ink" : "text-ink-3",
+										)}
+									>
+										{getStageLabel(stage)}
+									</span>
+								</button>
+							</li>
+						))}
+					</ol>
+					<div className="flex flex-wrap items-center justify-between gap-2">
+						<span className="flex items-center gap-1.5 text-sm">
+							<span
+								aria-hidden="true"
+								className="size-2 rounded-full"
+								style={{ background: getStageColor(application.status) }}
+							/>
+							<strong className="font-semibold">{getStageLabel(application.status)}</strong>
+							<span className="text-ink-3">
+								{closed && application.closedReason ? (
+									<>· {getClosedReasonLabel(application.closedReason)}</>
+								) : (
+									<>
+										· <Plural value={since} _0="since today" one="for # day" other="for # days" />
+									</>
+								)}
+							</span>
+						</span>
+						{next && !closed && (
+							<Button size="sm" variant="secondary" onClick={() => moveTo(application, next)}>
+								<Trans>Move to {getStageLabel(next)}</Trans>
+								<Icon name="arrow_forward" size={16} />
+							</Button>
+						)}
+					</div>
+				</div>
+			</header>
+
+			<div className="grid gap-6 px-5 py-5">
+				<NextStepCard application={application} onScheduleInterview={(entry) => setInterview({ open: true, entry })} />
+				<SentDocuments application={application} disabled={remove.isPending} />
+				<Facts application={application} locale={i18n.locale} />
+				<Tags application={application} />
+				<Notes application={application} />
+				<Activity application={application} onOpenInterview={(entry) => setInterview({ open: true, entry })} />
+				<ApplicationAiCopilot application={application} />
+			</div>
+
+			<footer className="sticky bottom-0 flex flex-wrap items-center gap-2 border-line border-t bg-surface px-5 py-3">
+				{!closed ? (
+					<Button variant="secondary" onClick={() => setClosing(true)}>
+						<Trans>Close application…</Trans>
+					</Button>
+				) : (
+					<Button variant="secondary" onClick={() => moveTo(application, "applied")}>
+						<Trans>Reopen</Trans>
+					</Button>
+				)}
+			</footer>
+
+			<CloseDialog open={closing} onOpenChange={setClosing} onClose={(reason) => close(application, reason)} />
+			<InterviewDialog
+				application={application}
+				interview={interview.entry}
+				open={interview.open}
+				onOpenChange={(open) => setInterview((currentValue) => ({ ...currentValue, open }))}
+			/>
+			<PostingDialog application={application} open={postingOpen} onOpenChange={setPostingOpen} />
+		</>
+	);
+}
+
+/** Salary, Source, Applied and Contact. Salary and source edit in place. */
+function Facts({ application, locale }: { application: Application; locale: string }) {
+	const invalidate = useInvalidateApplications();
+	const update = useMutation({
+		...orpc.applications.update.mutationOptions(),
+		onSuccess: () => invalidate(application.id),
+		onError: () => toast.add({ type: "error", description: t`Couldn't save.` }),
+	});
+	const applied = new Date(application.appliedAt).toLocaleDateString(locale, {
+		month: "short",
+		day: "numeric",
+		year: "numeric",
+	});
+
+	return (
+		<dl className="grid grid-cols-2 gap-x-4 gap-y-3">
+			<InlineFact
+				label={t`Salary`}
+				value={application.salary}
+				onSave={(salary) => update.mutate({ id: application.id, salary })}
+			/>
+			<InlineFact
+				label={t`Source`}
+				value={application.source}
+				onSave={(source) => update.mutate({ id: application.id, source })}
+			/>
+			<div className="grid gap-0.5">
+				<dt className="font-semibold text-ink-3 text-xs uppercase">
+					<Trans>Applied</Trans>
+				</dt>
+				<dd className="font-medium text-sm">{application.status === "saved" ? "—" : applied}</dd>
+			</div>
+			<div className="grid gap-0.5">
+				<dt className="font-semibold text-ink-3 text-xs uppercase">
+					<Trans>Contact</Trans>
+				</dt>
+				<dd className="min-w-0">
+					<Contacts
+						contacts={application.contacts}
+						disabled={update.isPending}
+						onChange={(contacts) => update.mutate({ id: application.id, contacts })}
+					/>
+				</dd>
+			</div>
+		</dl>
+	);
+}
+
+type InlineFactProps = { label: string; value: string | null; onSave: (value: string | null) => void };
+
+/** A fact that edits in place: click to type, Enter or leaving saves, Esc cancels. */
+function InlineFact({ label, value, onSave }: InlineFactProps) {
+	const id = useId();
+	const [draft, setDraft] = useState<string | null>(null);
+
+	const commit = () => {
+		if (draft === null) return;
+		const next = draft.trim() || null;
+		if (next !== (value ?? null)) onSave(next);
+		setDraft(null);
+	};
+
+	return (
+		<div className="grid gap-0.5">
+			<dt className="font-semibold text-ink-3 text-xs uppercase">
+				<label htmlFor={id}>{label}</label>
+			</dt>
+			<dd>
+				{draft === null ? (
+					<button
+						id={id}
+						type="button"
+						onClick={() => setDraft(value ?? "")}
+						className="w-full truncate rounded-md text-start font-medium text-sm hover:bg-hover"
+					>
+						{value || "—"}
+					</button>
+				) : (
 					<Input
-						data-timeline-note-input
-						value={note}
-						disabled={pending}
-						placeholder={t`Add a note…`}
-						onChange={(event) => setNote(event.target.value)}
+						id={id}
+						autoFocus
+						value={draft}
+						className="h-8"
+						onChange={(event) => setDraft(event.target.value)}
+						onBlur={commit}
 						onKeyDown={(event) => {
-							if (event.key === "Enter" && !event.shiftKey) {
-								event.preventDefault();
-								add();
+							if (event.key === "Enter") commit();
+							if (event.key === "Escape") {
+								event.stopPropagation();
+								setDraft(null);
 							}
 						}}
 					/>
-					<Button type="button" variant="secondary" disabled={!note.trim() || pending} onClick={add}>
-						<Trans>Add</Trans>
-					</Button>
-				</div>
-
-				<div className="relative flex flex-col gap-2 ps-4 before:absolute before:inset-y-2 before:start-1 before:w-px before:bg-border">
-					{sorted.map((entry) => {
-						const stage = entry.type === "stage" ? stageOf(entry.stage) : null;
-						const kind = entry.type === "interview" ? interviewKindOf(entry.kind) : null;
-						const isAnchor = entry.id === anchorId;
-						return (
-							<div
-								key={entry.id}
-								data-timeline-entry={entry.type}
-								data-stage={entry.type === "stage" ? entry.stage : undefined}
-								className="group relative rounded-lg border border-border bg-card p-3 text-sm"
-							>
-								<span
-									className={cn(
-										"absolute start-[-17px] top-4 size-2.5 rounded-full border-2 border-card",
-										entry.type === "note" && "bg-primary/70",
-									)}
-									style={stage || kind ? { background: (stage ?? kind)?.color } : undefined}
-								/>
-								<div className="flex items-start justify-between gap-2">
-									<div className="min-w-0 flex-1">
-										{entry.type === "stage" ? (
-											<div className="font-medium">
-												<Trans>Moved to</Trans> {stage?.label ?? entry.stage}
-											</div>
-										) : entry.type === "interview" ? (
-											<button
-												type="button"
-												className="block w-full rounded-sm text-left hover:text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-												onClick={() => onOpenInterview(entry)}
-											>
-												<span className="block font-medium">
-													{kind?.label ?? entry.kind} <Trans>interview</Trans>
-												</span>
-												<span className="block text-muted-foreground text-xs">
-													{formatDateTime(entry.at)}
-													{entry.location ? ` · ${entry.location}` : ""}
-												</span>
-											</button>
-										) : (
-											<button
-												type="button"
-												className="block w-full rounded-sm text-left hover:text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-												onClick={() => openNote(entry)}
-											>
-												{entry.text}
-											</button>
-										)}
-										{isAnchor && (
-											<div className="mt-1 text-muted-foreground text-xs">
-												<Trans>Current stage</Trans>
-											</div>
-										)}
-									</div>
-									<div className="flex shrink-0 items-center gap-1">
-										<button
-											type="button"
-											className="rounded-md border border-border px-2 py-1 text-muted-foreground text-xs hover:bg-muted hover:text-foreground"
-											onClick={() => (entry.type === "interview" ? onOpenInterview(entry) : openDate(entry))}
-										>
-											{formatDate(entry.at, entry.type === "interview")}
-										</button>
-										{!isAnchor && (
-											<button
-												type="button"
-												title={t`Delete timeline entry`}
-												disabled={pending}
-												className="rounded-md p-1 text-muted-foreground opacity-0 transition-opacity hover:bg-destructive/10 hover:text-destructive focus-visible:opacity-100 disabled:opacity-40 group-hover:opacity-100"
-												onClick={() => onDeleteEntry(entry.id)}
-											>
-												<TrashIcon className="size-4" />
-											</button>
-										)}
-									</div>
-								</div>
-							</div>
-						);
-					})}
-				</div>
-			</div>
-
-			<Dialog open={!!editingDate} onOpenChange={(open) => !open && setEditingDate(null)}>
-				<DialogContent className="sm:max-w-sm">
-					<DialogHeader>
-						<DialogTitle>
-							<Trans>Edit date</Trans>
-						</DialogTitle>
-						<DialogDescription>
-							<Trans>Update the calendar date for this timeline entry.</Trans>
-						</DialogDescription>
-					</DialogHeader>
-					<Input
-						type="date"
-						value={dateDraft}
-						onInput={(event) => setDateDraft(event.currentTarget.value)}
-						onChange={(event) => setDateDraft(event.target.value)}
-					/>
-					<DialogFooter>
-						<Button type="button" variant="secondary" onClick={() => setEditingDate(null)}>
-							<Trans>Cancel</Trans>
-						</Button>
-						<Button
-							type="button"
-							disabled={!dateDraft || pending}
-							onClick={() => {
-								if (!editingDate) return;
-								void onUpdateEntry(editingDate.id, { date: dateDraft })
-									.then(() => setEditingDate(null))
-									.catch(() => false);
-							}}
-						>
-							<Trans>Save</Trans>
-						</Button>
-					</DialogFooter>
-				</DialogContent>
-			</Dialog>
-
-			<Dialog open={!!editingNote} onOpenChange={(open) => !open && setEditingNote(null)}>
-				<DialogContent className="sm:max-w-md">
-					<DialogHeader>
-						<DialogTitle>
-							<Trans>Edit note</Trans>
-						</DialogTitle>
-						<DialogDescription>
-							<Trans>Update this timeline note.</Trans>
-						</DialogDescription>
-					</DialogHeader>
-					<Textarea value={noteDraft} rows={4} onChange={(event) => setNoteDraft(event.target.value)} />
-					<DialogFooter>
-						<Button type="button" variant="secondary" onClick={() => setEditingNote(null)}>
-							<Trans>Cancel</Trans>
-						</Button>
-						<Button
-							type="button"
-							disabled={!noteDraft.trim() || pending}
-							onClick={() => {
-								if (!editingNote) return;
-								void onUpdateEntry(editingNote.id, { text: noteDraft.trim() })
-									.then(() => setEditingNote(null))
-									.catch(() => false);
-							}}
-						>
-							<Trans>Save</Trans>
-						</Button>
-					</DialogFooter>
-				</DialogContent>
-			</Dialog>
-		</Section>
-	);
-}
-
-type InterviewListProps = {
-	activity: ApplicationTimelineEntry[];
-	onOpen: (interview: InterviewTimelineEntry) => void;
-};
-
-// Upcoming interviews first (soonest on top), then past ones (most recent on top).
-function InterviewList({ activity, onOpen }: InterviewListProps) {
-	const now = Date.now();
-	const interviews = activity.filter(isInterview);
-	const upcoming = interviews
-		.filter((entry) => new Date(entry.at).getTime() + entry.durationMinutes * 60_000 >= now)
-		.sort((a, b) => new Date(a.at).getTime() - new Date(b.at).getTime());
-	const past = interviews.filter((entry) => !upcoming.includes(entry)).sort(byNewest);
-
-	if (interviews.length === 0) {
-		return (
-			<p className="text-muted-foreground text-sm">
-				<Trans>No interviews scheduled.</Trans>
-			</p>
-		);
-	}
-
-	return (
-		<div className="flex flex-col gap-1.5">
-			{[...upcoming, ...past].map((entry) => {
-				const kind = interviewKindOf(entry.kind);
-				const isPast = !upcoming.includes(entry);
-				return (
-					<button
-						key={entry.id}
-						type="button"
-						data-interview={entry.id}
-						className={cn(
-							"flex items-center gap-3 rounded-lg border border-border p-2.5 text-start text-sm hover:bg-muted/50",
-							isPast && "opacity-60",
-						)}
-						onClick={() => onOpen(entry)}
-					>
-						<span className="h-8 w-1 shrink-0 rounded-full" style={{ background: kind?.color }} />
-						<span className="min-w-0 flex-1">
-							<span className="block font-medium">{kind?.label ?? entry.kind}</span>
-							<span className="block text-muted-foreground text-xs">
-								{formatDateTime(entry.at)} · {formatDuration(entry.durationMinutes)}
-							</span>
-						</span>
-						{entry.location && (
-							<span className="flex max-w-[40%] items-center gap-1 truncate text-muted-foreground text-xs">
-								<MapPinIcon className="shrink-0" />
-								<span className="truncate">{entry.location}</span>
-							</span>
-						)}
-					</button>
-				);
-			})}
+				)}
+			</dd>
 		</div>
 	);
 }
 
-function Fact({ label, value }: { label: string; value: string | null | undefined }) {
-	return (
-		<div>
-			<dt className="text-muted-foreground text-xs">{label}</dt>
-			<dd className="mt-0.5 font-medium">{value || "—"}</dd>
-		</div>
-	);
-}
-
-type ContactsEditorProps = {
-	contacts: Contact[];
-	pending: boolean;
-	onChange: (contacts: Contact[]) => void;
-};
-
-function ContactsEditor({ contacts, pending, onChange }: ContactsEditorProps) {
-	const [adding, setAdding] = useState(false);
-	const [draft, setDraft] = useState(INITIAL_CONTACT_DRAFT);
-	const [error, setError] = useState("");
-
-	const reset = () => {
-		setDraft(INITIAL_CONTACT_DRAFT);
-		setError("");
-		setAdding(false);
-	};
-
-	// The inputs aren't in a <form>, so `type="email"` never runs native constraint validation.
-	// Parse with the schema the API enforces, otherwise a typo'd email is rejected server-side
-	// after reset() has already thrown the draft away, leaving only a generic error toast.
-	const add = () => {
-		if (pending || !draft.name.trim()) return;
-		const parsed = contactSchema.safeParse(draft);
-		if (!parsed.success) {
-			setError(t`Enter a valid email address.`);
-			return;
-		}
-		onChange([...contacts, parsed.data]);
-		reset();
-	};
-
-	const removeAt = (index: number) => onChange(contacts.filter((_, i) => i !== index));
-
-	const submitOnEnter = (event: React.KeyboardEvent<HTMLInputElement>) => {
-		if (event.key === "Enter") add();
-	};
+function Tags({ application }: { application: Application }) {
+	const invalidate = useInvalidateApplications();
+	const [tag, setTag] = useState("");
+	const update = useMutation({
+		...orpc.applications.update.mutationOptions(),
+		onSuccess: () => invalidate(application.id),
+		onError: () => toast.add({ type: "error", description: t`Couldn't save the tags.` }),
+	});
+	const save = (tags: string[]) => update.mutate({ id: application.id, tags });
 
 	return (
-		<div className="flex flex-col gap-2">
-			{contacts.map((contact, i) => (
-				<div key={`${contact.name}-${i}`} className="group flex items-center gap-3 text-sm">
-					<span className="flex size-8 items-center justify-center rounded-full bg-muted font-medium text-xs">
-						{contact.name.slice(0, 2).toUpperCase()}
+		<section aria-labelledby="application-tags" className="grid gap-2">
+			<h3 id="application-tags" className="font-semibold text-ink-3 text-xs uppercase">
+				<Trans>Tags</Trans>
+			</h3>
+			<div className="flex flex-wrap items-center gap-1.5">
+				{application.tags.map((value) => (
+					<span key={value} className="flex h-7 items-center gap-1 rounded-md bg-sunken ps-2 text-xs">
+						{value}
+						<button
+							type="button"
+							aria-label={t`Remove ${value}`}
+							onClick={() => save(application.tags.filter((item) => item !== value))}
+							className="grid size-6 place-items-center rounded text-ink-3 hover:text-ink"
+						>
+							<Icon name="close" size={14} />
+						</button>
 					</span>
-					<div className="min-w-0 flex-1">
-						<div className="truncate font-medium">{contact.name}</div>
-						{contact.role && <div className="truncate text-muted-foreground text-xs">{contact.role}</div>}
-						{contact.email && (
-							<a
-								href={`mailto:${encodeURIComponent(contact.email)}`}
-								className="block truncate text-primary text-xs hover:underline"
-							>
-								{contact.email}
-							</a>
-						)}
-						{contact.phone && (
-							<a
-								href={`tel:${encodeURIComponent(contact.phone)}`}
-								className="block truncate text-primary text-xs hover:underline"
-							>
-								{contact.phone}
-							</a>
-						)}
-					</div>
-					{contact.type && (
-						<span className="rounded-full bg-muted px-2 py-0.5 text-[11px] text-muted-foreground">{contact.type}</span>
-					)}
-					<button
-						type="button"
-						title={t`Remove contact`}
-						disabled={pending}
-						className="text-muted-foreground opacity-0 transition-opacity hover:text-destructive disabled:opacity-40 group-hover:opacity-100"
-						onClick={() => removeAt(i)}
-					>
-						<XIcon />
-					</button>
-				</div>
-			))}
-
-			{adding ? (
-				<div className="flex flex-col gap-2 rounded-lg border border-border p-2.5">
-					<Input
-						value={draft.name}
-						placeholder={t`Name`}
-						autoFocus
-						onChange={(event) => setDraft((d) => ({ ...d, name: event.target.value }))}
-						onKeyDown={submitOnEnter}
-					/>
-					<div className="grid grid-cols-2 gap-2">
-						<Input
-							value={draft.role}
-							placeholder={t`Role (optional)`}
-							onChange={(event) => setDraft((d) => ({ ...d, role: event.target.value }))}
-							onKeyDown={submitOnEnter}
-						/>
-						<Input
-							value={draft.type}
-							list="contact-types"
-							placeholder={t`Label`}
-							onChange={(event) => setDraft((d) => ({ ...d, type: event.target.value }))}
-							onKeyDown={submitOnEnter}
-						/>
-					</div>
-					<div className="grid grid-cols-2 gap-2">
-						<Input
-							type="email"
-							value={draft.email}
-							placeholder={t`Email (optional)`}
-							onChange={(event) => {
-								setError("");
-								setDraft((d) => ({ ...d, email: event.target.value }));
-							}}
-							onKeyDown={submitOnEnter}
-						/>
-						<Input
-							type="tel"
-							value={draft.phone}
-							placeholder={t`Phone (optional)`}
-							onChange={(event) => setDraft((d) => ({ ...d, phone: event.target.value }))}
-							onKeyDown={submitOnEnter}
-						/>
-					</div>
-					<datalist id="contact-types">
-						<option value="Recruiter" />
-						<option value="Hiring Manager" />
-						<option value="Referral" />
-						<option value="Interviewer" />
-					</datalist>
-					{error && <p className="text-destructive text-xs">{error}</p>}
-					<div className="flex justify-end gap-2">
-						<Button type="button" size="sm" variant="ghost" onClick={reset}>
-							<Trans>Cancel</Trans>
-						</Button>
-						<Button type="button" size="sm" disabled={!draft.name.trim() || pending} onClick={add}>
-							<Trans>Add</Trans>
-						</Button>
-					</div>
-				</div>
-			) : (
-				<button
-					type="button"
-					onClick={() => setAdding(true)}
-					className="flex items-center gap-1.5 self-start text-muted-foreground text-xs hover:text-foreground"
+				))}
+				<form
+					onSubmit={(event) => {
+						event.preventDefault();
+						const value = tag.trim();
+						if (!value || application.tags.includes(value)) return setTag("");
+						save([...application.tags, value]);
+						setTag("");
+					}}
 				>
-					<PlusIcon /> <Trans>Add contact</Trans>
-				</button>
-			)}
-		</div>
-	);
-}
-
-function Section({ title, children }: { title: string; children: React.ReactNode }) {
-	return (
-		<section className="flex flex-col gap-2">
-			<h3 className="font-semibold text-muted-foreground text-xs uppercase tracking-wide">{title}</h3>
-			{children}
+					<Input
+						aria-label={t`Add a tag`}
+						placeholder={t`Add a tag`}
+						value={tag}
+						className="h-7 w-28 text-xs"
+						onChange={(event) => setTag(event.target.value)}
+					/>
+				</form>
+			</div>
 		</section>
 	);
 }
+
+// Notes save a moment after typing stops.
+const NOTES_SAVE_DELAY_MS = 800;
+
+function Notes({ application }: { application: Application }) {
+	const id = useId();
+	const invalidate = useInvalidateApplications();
+	const [notes, setNotes] = useState(application.notes ?? "");
+	const saved = useRef(application.notes ?? "");
+	const { mutate } = useMutation({
+		...orpc.applications.update.mutationOptions(),
+		onSuccess: () => invalidate(application.id),
+		onError: () => toast.add({ type: "error", description: t`Couldn't save the notes.` }),
+	});
+
+	useEffect(() => {
+		if (notes === saved.current) return;
+		const timeout = window.setTimeout(() => {
+			saved.current = notes;
+			mutate({ id: application.id, notes: notes.trim() ? notes : null });
+		}, NOTES_SAVE_DELAY_MS);
+		return () => window.clearTimeout(timeout);
+	}, [notes, application.id, mutate]);
+
+	// Closing the sheet mid-sentence still saves what was typed.
+	const latest = useRef(notes);
+	latest.current = notes;
+	useEffect(
+		() => () => {
+			if (latest.current !== saved.current)
+				mutate({ id: application.id, notes: latest.current.trim() ? latest.current : null });
+		},
+		[application.id, mutate],
+	);
+
+	return (
+		<section className="grid gap-2">
+			<label htmlFor={id} className="font-semibold text-ink-3 text-xs uppercase">
+				<Trans>Notes</Trans>
+			</label>
+			<Textarea
+				id={id}
+				rows={3}
+				value={notes}
+				placeholder={t`Anything to remember about this job`}
+				onChange={(event) => setNotes(event.target.value)}
+			/>
+		</section>
+	);
+}
+
+type PostingDialogProps = { application: Application; open: boolean; onOpenChange: (open: boolean) => void };
+
+/** The saved posting: its link, what it asks for, and its text. */
+function PostingDialog({ application, open, onOpenChange }: PostingDialogProps) {
+	return (
+		<Dialog open={open} onOpenChange={onOpenChange}>
+			<DialogContent className="max-h-[85svh] overflow-y-auto sm:max-w-xl">
+				<DialogHeader>
+					<DialogTitle>
+						{application.role} · {application.company}
+					</DialogTitle>
+					<DialogDescription>
+						{application.sourceUrl ? (
+							<a
+								href={application.sourceUrl}
+								target="_blank"
+								rel="noreferrer"
+								className="text-accent-text hover:underline"
+							>
+								{application.sourceUrl}
+							</a>
+						) : (
+							<Trans>The posting saved with this application.</Trans>
+						)}
+					</DialogDescription>
+				</DialogHeader>
+				{application.requirements.length > 0 && (
+					<section aria-labelledby="posting-requirements" className="grid gap-2">
+						<h3 id="posting-requirements" className="font-semibold text-ink-3 text-xs uppercase">
+							<Trans>What it asks for</Trans>
+						</h3>
+						<ul className="flex flex-wrap gap-1.5">
+							{application.requirements.map((requirement) => (
+								<li key={requirement} className="rounded-md bg-sunken px-2 py-1 text-xs">
+									{requirement}
+								</li>
+							))}
+						</ul>
+					</section>
+				)}
+				{application.jobDescription && (
+					<p className="whitespace-pre-wrap text-ink-2 text-sm leading-6">{application.jobDescription}</p>
+				)}
+			</DialogContent>
+		</Dialog>
+	);
+}
diff --git a/apps/web/src/features/applications/components/board.tsx b/apps/web/src/features/applications/components/board.tsx
index 5eb93f9fa..3fe72cc6f 100644
--- a/apps/web/src/features/applications/components/board.tsx
+++ b/apps/web/src/features/applications/components/board.tsx
@@ -12,156 +12,114 @@ import {
 	useSensors,
 } from "@dnd-kit/core";
 import { t } from "@lingui/core/macro";
-import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { useMemo, useState } from "react";
-import { STAGES } from "@reactive-resume/schema/applications/data";
-import { toast } from "@reactive-resume/ui/components/toast";
+import { useState } from "react";
 import { cn } from "@reactive-resume/utils/style";
-import { orpc } from "@/libs/orpc/client";
-import { applicationsListQueryKey } from "../queries";
+import { getStageColor, getStageLabel, PIPELINE } from "../stages";
+import { useApplicationActions } from "../use-application-actions";
 import { ApplicationCard } from "./application-card";
 
-type Props = {
+type BoardProps = {
 	applications: Application[];
+	showClosed: boolean;
 	onOpen: (application: Application) => void;
-	onEdit: (application: Application) => void;
 };
 
-export function ApplicationBoard({ applications, onOpen, onEdit }: Props) {
-	const queryClient = useQueryClient();
+/**
+ * A column per stage (Closed only when shown). Dropping a card on a column moves it, with the same toast as the
+ * other ways to change stage; each card's menu has Move to… for the keyboard. Desktop and tablet only.
+ */
+export function ApplicationBoard({ applications, showClosed, onOpen }: BoardProps) {
+	const { moveTo } = useApplicationActions();
 	const [activeId, setActiveId] = useState<string | null>(null);
 
-	// A small activation distance so a click still opens the detail panel instead of starting a drag.
+	// A small activation distance so a click still opens the detail sheet instead of starting a drag.
 	const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 5 } }));
+	const stages: ApplicationStatus[] = showClosed ? [...PIPELINE, "closed"] : [...PIPELINE];
 
-	const listKey = applicationsListQueryKey();
+	const byStage = new Map<ApplicationStatus, Application[]>(stages.map((stage) => [stage, []]));
+	for (const application of applications) byStage.get(application.status)?.push(application);
 
-	const move = useMutation(
-		orpc.applications.update.mutationOptions({
-			onMutate: async ({ id, status }) => {
-				await queryClient.cancelQueries({ queryKey: listKey });
-				const previous = queryClient.getQueryData<Application[]>(listKey);
-				queryClient.setQueryData<Application[]>(listKey, (rows) =>
-					(rows ?? []).map((row) => (row.id === id && status ? { ...row, status } : row)),
-				);
-				return { previous };
-			},
-			onError: (_error, _vars, context) => {
-				if (context?.previous) queryClient.setQueryData(listKey, context.previous);
-				toast.add({ type: "error", description: t`Couldn't move the application. Please try again.` });
-			},
-			onSettled: () => void queryClient.invalidateQueries({ queryKey: listKey }),
-		}),
-	);
-
-	const byStage = useMemo(() => {
-		const map = new Map<ApplicationStatus, Application[]>(STAGES.map((s) => [s.value, []]));
-		for (const app of applications) map.get(app.status)?.push(app);
-		return map;
-	}, [applications]);
-
-	const activeApp = activeId ? applications.find((a) => a.id === activeId) : null;
+	const active = activeId ? applications.find((application) => application.id === activeId) : null;
 
 	const onDragStart = (event: DragStartEvent) => setActiveId(String(event.active.id));
 
 	const onDragEnd = (event: DragEndEvent) => {
 		setActiveId(null);
-		const { active, over } = event;
-		if (!over) return;
-		const target = over.id as ApplicationStatus;
-		const app = applications.find((a) => a.id === active.id);
-		if (!app || app.status === target) return;
-		move.mutate({ id: app.id, status: target });
+		const target = event.over?.id as ApplicationStatus | undefined;
+		const application = applications.find((item) => item.id === event.active.id);
+		if (!target || !application || application.status === target) return;
+		moveTo(application, target);
 	};
 
 	return (
 		<DndContext sensors={sensors} collisionDetection={pointerWithin} onDragStart={onDragStart} onDragEnd={onDragEnd}>
-			<div className="flex h-full min-h-0 gap-4 overflow-x-auto pb-4">
-				{STAGES.map((stage) => (
-					<Column
-						key={stage.value}
-						stage={stage}
-						applications={byStage.get(stage.value) ?? []}
-						onOpen={onOpen}
-						onEdit={onEdit}
-					/>
+			<div className="flex h-full min-h-0 gap-3 overflow-x-auto pb-4">
+				{stages.map((stage) => (
+					<Column key={stage} stage={stage} applications={byStage.get(stage) ?? []} onOpen={onOpen} />
 				))}
 			</div>
 
 			{/* No drop animation: the optimistic move lands after an await, so the default would fly the card back. */}
 			<DragOverlay dropAnimation={null}>
-				{activeApp ? <ApplicationCard application={activeApp} dragging /> : null}
+				{active ? <ApplicationCard application={active} dragging /> : null}
 			</DragOverlay>
 		</DndContext>
 	);
 }
 
-type ColumnProps = {
-	stage: (typeof STAGES)[number];
-	applications: Application[];
-	onOpen: (application: Application) => void;
-	onEdit: (application: Application) => void;
-};
-
-// Cap the cards rendered per column so a stage with hundreds of applications doesn't mount
-// hundreds of draggable nodes at once. Users reveal the rest in batches. Server-side paging
-// isn't needed here — the list payload is small; the cost is DOM/drag nodes.
+// Cap the cards rendered per column so a stage with hundreds of applications doesn't mount hundreds of draggable
+// nodes at once; the rest show in batches.
 const COLUMN_PAGE_SIZE = 50;
 
-function Column({ stage, applications, onOpen, onEdit }: ColumnProps) {
-	const { setNodeRef, isOver } = useDroppable({ id: stage.value });
-	const [visible, setVisible] = useState(COLUMN_PAGE_SIZE);
+type ColumnProps = {
+	stage: ApplicationStatus;
+	applications: Application[];
+	onOpen: (application: Application) => void;
+};
 
+function Column({ stage, applications, onOpen }: ColumnProps) {
+	const { setNodeRef, isOver } = useDroppable({ id: stage });
+	const [visible, setVisible] = useState(COLUMN_PAGE_SIZE);
 	const shown = applications.slice(0, visible);
 	const remaining = applications.length - shown.length;
 
 	return (
-		<div className="flex w-72 shrink-0 flex-col rounded-2xl border border-border bg-muted/30">
-			<div className="flex items-center gap-2 px-3.5 py-3">
-				<span className="size-2.5 rounded-sm" style={{ background: stage.color }} />
-				<span className="font-semibold text-sm tracking-tight">{stage.label}</span>
-				<span className="rounded-full bg-muted px-2 py-0.5 font-semibold text-muted-foreground text-xs">
-					{applications.length}
-				</span>
-			</div>
-			<div
-				ref={setNodeRef}
-				className={cn(
-					"flex min-h-24 flex-1 flex-col gap-2.5 overflow-y-auto px-2.5 pb-3 transition-colors",
-					isOver && "bg-muted/60",
-				)}
-			>
-				{shown.map((app) => (
-					<DraggableCard key={app.id} application={app} onOpen={() => onOpen(app)} onEdit={onEdit} />
+		<section
+			aria-label={getStageLabel(stage)}
+			className={cn(
+				"flex w-[272px] shrink-0 flex-col rounded-xl border bg-sunken transition-colors duration-quick",
+				isOver ? "border-accent bg-accent-soft" : "border-transparent",
+			)}
+		>
+			<h3 className="flex items-center gap-2 px-3 py-2.5 font-semibold text-sm">
+				<span aria-hidden="true" className="size-2 rounded-full" style={{ background: getStageColor(stage) }} />
+				{getStageLabel(stage)}
+				<span className="font-mono font-normal text-ink-3 text-xs">{applications.length}</span>
+			</h3>
+			<div ref={setNodeRef} className="flex min-h-24 flex-1 flex-col gap-2 overflow-y-auto px-2 pb-2">
+				{shown.map((application) => (
+					<DraggableCard key={application.id} application={application} onOpen={() => onOpen(application)} />
 				))}
 				{remaining > 0 && (
 					<button
 						type="button"
-						onClick={() => setVisible((v) => v + COLUMN_PAGE_SIZE)}
-						className="rounded-lg border border-border border-dashed py-2 text-muted-foreground text-xs hover:bg-muted/60"
+						onClick={() => setVisible((count) => count + COLUMN_PAGE_SIZE)}
+						className="rounded-lg border border-line border-dashed py-2 text-ink-3 text-xs hover:bg-hover"
 					>
 						{t`Show ${Math.min(remaining, COLUMN_PAGE_SIZE)} more`}
 					</button>
 				)}
 			</div>
-		</div>
+		</section>
 	);
 }
 
-function DraggableCard({
-	application,
-	onOpen,
-	onEdit,
-}: {
-	application: Application;
-	onOpen: () => void;
-	onEdit: (application: Application) => void;
-}) {
+function DraggableCard({ application, onOpen }: { application: Application; onOpen: () => void }) {
 	const { setNodeRef, attributes, listeners, isDragging } = useDraggable({ id: application.id });
 
 	return (
-		<div ref={setNodeRef} {...attributes} {...listeners} className={cn(isDragging && "opacity-30")}>
-			<ApplicationCard application={application} onClick={onOpen} onEdit={onEdit} />
+		<div ref={setNodeRef} {...attributes} {...listeners} className={cn(isDragging && "opacity-40")}>
+			<ApplicationCard application={application} onClick={onOpen} withMenu />
 		</div>
 	);
 }
diff --git a/apps/web/src/features/applications/components/detail/activity.tsx b/apps/web/src/features/applications/components/detail/activity.tsx
new file mode 100644
index 000000000..b04c9a556
--- /dev/null
+++ b/apps/web/src/features/applications/components/detail/activity.tsx
@@ -0,0 +1,249 @@
+import type { ApplicationTimelineEntry, InterviewTimelineEntry } from "@reactive-resume/schema/applications/data";
+import type { Application } from "../../types";
+import { t } from "@lingui/core/macro";
+import { useLingui } from "@lingui/react";
+import { Trans } from "@lingui/react/macro";
+import { useMutation } from "@tanstack/react-query";
+import { useState } from "react";
+import { Button } from "@reactive-resume/ui/components/button";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+} from "@reactive-resume/ui/components/dialog";
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuTrigger,
+} from "@reactive-resume/ui/components/dropdown-menu";
+import { Icon } from "@reactive-resume/ui/components/icon";
+import { Input } from "@reactive-resume/ui/components/input";
+import { Textarea } from "@reactive-resume/ui/components/textarea";
+import { toast } from "@reactive-resume/ui/components/toast";
+import { useConfirm } from "@/hooks/use-confirm";
+import { orpc } from "@/libs/orpc/client";
+import { interviewKindOf } from "../../interviews";
+import { getStageColor, getStageLabel } from "../../stages";
+import { useInvalidateApplications } from "../../use-application-actions";
+
+const byNewest = (a: ApplicationTimelineEntry, b: ApplicationTimelineEntry) =>
+	new Date(b.at).getTime() - new Date(a.at).getTime();
+
+const dateInputValue = (value: Date | string) => {
+	const date = new Date(value);
+	return Number.isNaN(date.getTime()) ? "" : date.toISOString().slice(0, 10);
+};
+
+type ActivityProps = {
+	application: Application;
+	onOpenInterview: (interview: InterviewTimelineEntry) => void;
+};
+
+/**
+ * The timeline: stage changes, notes and interviews, newest first, with a note field on top. Each row's ⋯ edits its
+ * date (and a note's text) or deletes it; the entry that anchors the current stage can't be deleted.
+ */
+export function Activity({ application, onOpenInterview }: ActivityProps) {
+	const { i18n } = useLingui();
+	const invalidate = useInvalidateApplications();
+	const confirm = useConfirm();
+	const [note, setNote] = useState("");
+	const [editing, setEditing] = useState<{ entry: ApplicationTimelineEntry; date: string; text: string } | null>(null);
+
+	const onError = () => toast.add({ type: "error", description: t`Couldn't update the timeline. Try again.` });
+	const addNote = useMutation({
+		...orpc.applications.addNote.mutationOptions(),
+		onSuccess: () => invalidate(application.id),
+		onError,
+	});
+	const updateEntry = useMutation({
+		...orpc.applications.updateTimelineEntry.mutationOptions(),
+		onSuccess: () => {
+			invalidate(application.id);
+			setEditing(null);
+		},
+		onError,
+	});
+	const deleteEntry = useMutation({
+		...orpc.applications.deleteTimelineEntry.mutationOptions(),
+		onSuccess: () => invalidate(application.id),
+		onError,
+	});
+
+	const sorted = [...application.activity].sort(byNewest);
+	const anchorId = sorted.find((entry) => entry.type === "stage" && entry.stage === application.status)?.id;
+	const formatDate = (value: Date | string, withTime: boolean) =>
+		new Date(value).toLocaleDateString(i18n.locale, {
+			month: "short",
+			day: "numeric",
+			// Stage and note entries are whole days, stored at noon UTC.
+			...(withTime ? { hour: "2-digit", minute: "2-digit" } : { timeZone: "UTC" }),
+		});
+
+	const describe = (entry: ApplicationTimelineEntry) => {
+		if (entry.type === "stage")
+			return { dot: getStageColor(entry.stage), text: t`Moved to ${getStageLabel(entry.stage)}` };
+		if (entry.type === "note") return { dot: "var(--ink-3)", text: entry.text };
+		const kind = interviewKindOf(entry.kind);
+		return { dot: kind?.color ?? "var(--ink-3)", text: t`${kind?.label ?? entry.kind} interview` };
+	};
+
+	const submit = () => {
+		const text = note.trim();
+		if (!text || addNote.isPending) return;
+		addNote.mutate({ id: application.id, text }, { onSuccess: () => setNote("") });
+	};
+
+	return (
+		<section aria-labelledby="application-activity" className="grid gap-2">
+			<h3 id="application-activity" className="font-semibold text-ink-3 text-xs uppercase">
+				<Trans>Activity</Trans>
+			</h3>
+			<form
+				className="flex gap-1.5"
+				onSubmit={(event) => {
+					event.preventDefault();
+					submit();
+				}}
+			>
+				<Input
+					aria-label={t`Add a note`}
+					placeholder={t`Add a note…`}
+					value={note}
+					disabled={addNote.isPending}
+					onChange={(event) => setNote(event.target.value)}
+				/>
+				<Button type="submit" variant="secondary" disabled={!note.trim() || addNote.isPending}>
+					<Trans>Add</Trans>
+				</Button>
+			</form>
+
+			<ol className="grid">
+				{sorted.map((entry) => {
+					const { dot, text } = describe(entry);
+					return (
+						<li key={entry.id} className="group flex items-start gap-2.5 py-1.5 text-sm">
+							<span aria-hidden="true" className="mt-1.5 size-2 shrink-0 rounded-full" style={{ background: dot }} />
+							{entry.type === "interview" ? (
+								<button
+									type="button"
+									onClick={() => onOpenInterview(entry)}
+									className="min-w-0 flex-1 text-start hover:underline"
+								>
+									{text}
+									{entry.location ? <span className="text-ink-3"> · {entry.location}</span> : null}
+								</button>
+							) : (
+								<span className="min-w-0 flex-1 whitespace-pre-wrap break-words">{text}</span>
+							)}
+							<span className="shrink-0 text-ink-3 text-xs leading-5">
+								{formatDate(entry.at, entry.type === "interview")}
+							</span>
+							<DropdownMenu>
+								<DropdownMenuTrigger
+									render={
+										<Button
+											size="icon-xs"
+											variant="ghost"
+											aria-label={t`Options for this entry`}
+											className="-my-1 text-ink-3 opacity-0 focus-visible:opacity-100 group-hover:opacity-100 data-[popup-open]:opacity-100"
+										/>
+									}
+								>
+									<Icon name="more_horiz" size={16} />
+								</DropdownMenuTrigger>
+								<DropdownMenuContent align="end">
+									{entry.type === "interview" ? (
+										<DropdownMenuItem onClick={() => onOpenInterview(entry)}>
+											<Trans>Edit interview…</Trans>
+										</DropdownMenuItem>
+									) : (
+										<DropdownMenuItem
+											onClick={() =>
+												setEditing({
+													entry,
+													date: dateInputValue(entry.at),
+													text: entry.type === "note" ? entry.text : "",
+												})
+											}
+										>
+											<Trans>Edit…</Trans>
+										</DropdownMenuItem>
+									)}
+									<DropdownMenuItem
+										variant="destructive"
+										disabled={entry.id === anchorId}
+										onClick={async () => {
+											const confirmed = await confirm(t`Delete this entry?`, {
+												description: t`It's removed from the timeline for good.`,
+												confirmText: t`Delete`,
+											});
+											if (confirmed) deleteEntry.mutate({ id: application.id, entryId: entry.id });
+										}}
+									>
+										<Trans>Delete…</Trans>
+									</DropdownMenuItem>
+								</DropdownMenuContent>
+							</DropdownMenu>
+						</li>
+					);
+				})}
+			</ol>
+
+			<Dialog open={editing !== null} onOpenChange={(open) => !open && setEditing(null)}>
+				<DialogContent className="sm:max-w-sm">
+					<DialogHeader>
+						<DialogTitle>
+							{editing?.entry.type === "note" ? <Trans>Edit note</Trans> : <Trans>Edit date</Trans>}
+						</DialogTitle>
+						<DialogDescription className="sr-only">
+							<Trans>Change this timeline entry.</Trans>
+						</DialogDescription>
+					</DialogHeader>
+					{editing && (
+						<form
+							id="timeline-entry-form"
+							className="grid gap-3"
+							onSubmit={(event) => {
+								event.preventDefault();
+								updateEntry.mutate({
+									id: application.id,
+									entryId: editing.entry.id,
+									date: editing.date,
+									...(editing.entry.type === "note" && editing.text.trim() ? { text: editing.text.trim() } : {}),
+								});
+							}}
+						>
+							{editing.entry.type === "note" && (
+								<Textarea
+									aria-label={t`Note`}
+									rows={3}
+									value={editing.text}
+									onChange={(event) => setEditing({ ...editing, text: event.target.value })}
+								/>
+							)}
+							<Input
+								type="date"
+								aria-label={t`Date`}
+								value={editing.date}
+								onChange={(event) => setEditing({ ...editing, date: event.target.value })}
+							/>
+						</form>
+					)}
+					<DialogFooter>
+						<Button variant="secondary" onClick={() => setEditing(null)}>
+							<Trans>Cancel</Trans>
+						</Button>
+						<Button type="submit" form="timeline-entry-form" disabled={!editing?.date || updateEntry.isPending}>
+							<Trans>Save</Trans>
+						</Button>
+					</DialogFooter>
+				</DialogContent>
+			</Dialog>
+		</section>
+	);
+}
diff --git a/apps/web/src/features/applications/components/detail/close-dialog.tsx b/apps/web/src/features/applications/components/detail/close-dialog.tsx
new file mode 100644
index 000000000..9b9029636
--- /dev/null
+++ b/apps/web/src/features/applications/components/detail/close-dialog.tsx
@@ -0,0 +1,70 @@
+import type { ApplicationClosedReason } from "@reactive-resume/schema/applications/data";
+import { t } from "@lingui/core/macro";
+import { Trans } from "@lingui/react/macro";
+import { useId, useState } from "react";
+import { Button } from "@reactive-resume/ui/components/button";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+} from "@reactive-resume/ui/components/dialog";
+import { RadioGroup, RadioGroupItem } from "@reactive-resume/ui/components/radio-group";
+import { CLOSED_REASONS, getClosedReasonLabel } from "../../stages";
+
+type CloseDialogProps = {
+	open: boolean;
+	onOpenChange: (open: boolean) => void;
+	onClose: (reason: ApplicationClosedReason) => void;
+};
+
+/** "Close this application": one reason, kept for Insights. It replaces Reject, Archive and Delete buttons. */
+export function CloseDialog({ open, onOpenChange, onClose }: CloseDialogProps) {
+	const id = useId();
+	const [reason, setReason] = useState<ApplicationClosedReason>("not-selected");
+
+	return (
+		<Dialog open={open} onOpenChange={onOpenChange}>
+			<DialogContent className="sm:max-w-sm">
+				<DialogHeader>
+					<DialogTitle>
+						<Trans>Close this application</Trans>
+					</DialogTitle>
+					<DialogDescription>
+						<Trans>The reason is kept for Insights. Linked documents aren't touched.</Trans>
+					</DialogDescription>
+				</DialogHeader>
+				<RadioGroup
+					aria-label={t`Reason`}
+					value={reason}
+					onValueChange={(value) => setReason(value as ApplicationClosedReason)}
+					className="grid gap-1"
+				>
+					{CLOSED_REASONS.map((value) => (
+						<div key={value} className="flex h-10 items-center gap-2.5 rounded-lg px-2 hover:bg-hover">
+							<RadioGroupItem id={`${id}-${value}`} value={value} />
+							<label htmlFor={`${id}-${value}`} className="flex-1 cursor-pointer text-sm">
+								{getClosedReasonLabel(value)}
+							</label>
+						</div>
+					))}
+				</RadioGroup>
+				<DialogFooter>
+					<Button variant="secondary" onClick={() => onOpenChange(false)}>
+						<Trans>Cancel</Trans>
+					</Button>
+					<Button
+						onClick={() => {
+							onClose(reason);
+							onOpenChange(false);
+						}}
+					>
+						<Trans>Close application</Trans>
+					</Button>
+				</DialogFooter>
+			</DialogContent>
+		</Dialog>
+	);
+}
diff --git a/apps/web/src/features/applications/components/detail/contacts.tsx b/apps/web/src/features/applications/components/detail/contacts.tsx
new file mode 100644
index 000000000..384217615
--- /dev/null
+++ b/apps/web/src/features/applications/components/detail/contacts.tsx
@@ -0,0 +1,150 @@
+import type { Contact } from "@reactive-resume/schema/applications/data";
+import { t } from "@lingui/core/macro";
+import { Trans } from "@lingui/react/macro";
+import { useId, useState } from "react";
+import { contactSchema } from "@reactive-resume/schema/applications/data";
+import { Button } from "@reactive-resume/ui/components/button";
+import { Icon } from "@reactive-resume/ui/components/icon";
+import { Input } from "@reactive-resume/ui/components/input";
+import { Popover, PopoverContent, PopoverTrigger } from "@reactive-resume/ui/components/popover";
+
+const EMPTY_CONTACT = { name: "", role: "", type: "", email: "", phone: "" };
+
+type ContactsProps = { contacts: Contact[]; disabled: boolean; onChange: (contacts: Contact[]) => void };
+
+/** The Contact cell: the primary contact (the first), and the full list, with add and remove, in a popover. */
+export function Contacts({ contacts, disabled, onChange }: ContactsProps) {
+	const [primary, ...others] = contacts;
+
+	return (
+		<Popover>
+			<PopoverTrigger className="grid min-w-0 rounded-md text-start hover:underline">
+				<span className="truncate font-medium text-sm">{primary ? primary.name : "—"}</span>
+				{others.length > 0 && <span className="text-ink-3 text-xs">{t`and ${others.length} more`}</span>}
+			</PopoverTrigger>
+			<PopoverContent align="start" className="grid w-80 gap-3 p-3">
+				<h3 className="font-semibold text-sm">
+					<Trans>Contacts</Trans>
+				</h3>
+				<ContactList contacts={contacts} disabled={disabled} onChange={onChange} />
+			</PopoverContent>
+		</Popover>
+	);
+}
+
+function ContactList({ contacts, disabled, onChange }: ContactsProps) {
+	const id = useId();
+	const [adding, setAdding] = useState(false);
+	const [draft, setDraft] = useState(EMPTY_CONTACT);
+	const [error, setError] = useState("");
+
+	const add = () => {
+		if (!draft.name.trim()) return;
+		// Checked with the API's schema here, so a mistyped email is caught before the draft is thrown away.
+		const parsed = contactSchema.safeParse(draft);
+		if (!parsed.success) return setError(t`Enter a valid email address.`);
+		onChange([...contacts, parsed.data]);
+		setDraft(EMPTY_CONTACT);
+		setError("");
+		setAdding(false);
+	};
+
+	const field = (key: keyof typeof EMPTY_CONTACT, label: string, type = "text") => (
+		<Input
+			aria-label={label}
+			placeholder={label}
+			type={type}
+			value={draft[key]}
+			onChange={(event) => {
+				setError("");
+				setDraft((current) => ({ ...current, [key]: event.target.value }));
+			}}
+		/>
+	);
+
+	return (
+		<div className="grid gap-2">
+			{contacts.length === 0 && !adding && (
+				<p className="text-ink-3 text-sm">
+					<Trans>No contacts yet.</Trans>
+				</p>
+			)}
+			{contacts.map((contact, index) => (
+				<div key={`${contact.name}-${index}`} className="flex items-start gap-2.5 text-sm">
+					<div className="grid min-w-0 flex-1">
+						<span className="truncate font-medium">
+							{contact.name}
+							{contact.type && <span className="font-normal text-ink-3"> · {contact.type}</span>}
+						</span>
+						{contact.role && <span className="truncate text-ink-3 text-xs">{contact.role}</span>}
+						{contact.email && (
+							<a href={`mailto:${contact.email}`} className="truncate text-accent-text text-xs hover:underline">
+								{contact.email}
+							</a>
+						)}
+						{contact.phone && (
+							<a href={`tel:${contact.phone}`} className="truncate text-accent-text text-xs hover:underline">
+								{contact.phone}
+							</a>
+						)}
+					</div>
+					<Button
+						size="icon-xs"
+						variant="ghost"
+						disabled={disabled}
+						aria-label={t`Remove ${contact.name}`}
+						onClick={() => onChange(contacts.filter((_, i) => i !== index))}
+					>
+						<Icon name="close" size={16} />
+					</Button>
+				</div>
+			))}
+
+			{adding ? (
+				<form
+					className="grid gap-2 rounded-lg border border-line p-2.5"
+					onSubmit={(event) => {
+						event.preventDefault();
+						add();
+					}}
+				>
+					{field("name", t`Name`)}
+					<div className="grid grid-cols-2 gap-2">
+						{field("role", t`Role (optional)`)}
+						<Input
+							aria-label={t`Label`}
+							placeholder={t`Label, e.g. Recruiter`}
+							list={`${id}-types`}
+							value={draft.type}
+							onChange={(event) => setDraft((current) => ({ ...current, type: event.target.value }))}
+						/>
+					</div>
+					<div className="grid grid-cols-2 gap-2">
+						{field("email", t`Email (optional)`, "email")}
+						{field("phone", t`Phone (optional)`, "tel")}
+					</div>
+					<datalist id={`${id}-types`}>
+						<option value={t`Recruiter`} />
+						<option value={t`Hiring manager`} />
+						<option value={t`Referral`} />
+						<option value={t`Interviewer`} />
+					</datalist>
+					{error && <p className="text-danger-text text-xs">{error}</p>}
+					<div className="flex justify-end gap-1.5">
+						<Button type="button" size="sm" variant="ghost" onClick={() => setAdding(false)}>
+							<Trans>Cancel</Trans>
+						</Button>
+						<Button type="submit" size="sm" disabled={!draft.name.trim() || disabled}>
+							<Trans>Add</Trans>
+						</Button>
+					</div>
+				</form>
+			) : (
+				<Button size="sm" variant="ghost" className="w-fit" disabled={disabled} onClick={() => setAdding(true)}>
+					<Icon name="add" size={16} />
+					<Trans>Add contact</Trans>
+				</Button>
+			)}
+		</div>
+	);
+}
diff --git a/apps/web/src/features/applications/components/detail/next-step-card.tsx b/apps/web/src/features/applications/components/detail/next-step-card.tsx
new file mode 100644
index 000000000..4c83153de
--- /dev/null
+++ b/apps/web/src/features/applications/components/detail/next-step-card.tsx
@@ -0,0 +1,202 @@
+import type { InterviewTimelineEntry } from "@reactive-resume/schema/applications/data";
+import type { Application } from "../../types";
+import { t } from "@lingui/core/macro";
+import { useLingui } from "@lingui/react";
+import { Trans } from "@lingui/react/macro";
+import { useMutation } from "@tanstack/react-query";
+import { useId, useState } from "react";
+import { Button } from "@reactive-resume/ui/components/button";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+} from "@reactive-resume/ui/components/dialog";
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuTrigger,
+} from "@reactive-resume/ui/components/dropdown-menu";
+import { Icon } from "@reactive-resume/ui/components/icon";
+import { Input } from "@reactive-resume/ui/components/input";
+import { Label } from "@reactive-resume/ui/components/label";
+import { toast } from "@reactive-resume/ui/components/toast";
+import { downloadWithAnchor } from "@reactive-resume/utils/file";
+import { cn } from "@reactive-resume/utils/style";
+import { orpc } from "@/libs/orpc/client";
+import { buildIcs } from "../../ics";
+import { dayKey } from "../../interviews";
+import { describeNextStep, getNextStep } from "../../next-step";
+import { useInvalidateApplications } from "../../use-application-actions";
+
+type NextStepCardProps = {
+	application: Application;
+	onScheduleInterview: (interview: InterviewTimelineEntry | null) => void;
+};
+
+/**
+ * NEXT STEP: what the application needs, with Edit (schedule an interview or set the follow-up). Dated steps can go
+ * to a calendar as an .ics file. Overdue steps are in warn.
+ */
+export function NextStepCard({ application, onScheduleInterview }: NextStepCardProps) {
+	const { i18n } = useLingui();
+	const [followUpOpen, setFollowUpOpen] = useState(false);
+	const step = getNextStep(application);
+	const text = describeNextStep(step, application, i18n.locale);
+
+	const addToCalendar = () => {
+		if (step.kind !== "interview" && step.kind !== "follow-up") return;
+		const start = step.at;
+		const minutes = step.kind === "interview" ? step.interview.durationMinutes : 30;
+		const ics = buildIcs({
+			uid: step.kind === "interview" ? step.interview.id : `follow-up-${application.id}`,
+			title: `${text.title} · ${application.role}, ${application.company}`,
+			start,
+			end: new Date(start.getTime() + minutes * 60_000),
+			...(step.kind === "interview" && step.interview.location ? { location: step.interview.location } : {}),
+			...(step.kind === "interview" && step.interview.notes ? { description: step.interview.notes } : {}),
+		});
+		const blob = new Blob([ics], { type: "text/calendar" });
+		downloadWithAnchor(blob, `${application.company}-${dayKey(start)}.ics`.replace(/[^\w.-]+/g, "-"));
+	};
+
+	return (
+		<section aria-labelledby="application-next-step" className="grid gap-2">
+			<h3 id="application-next-step" className="font-semibold text-ink-3 text-xs uppercase">
+				<Trans>Next step</Trans>
+			</h3>
+			<div
+				className={cn(
+					"grid gap-2 rounded-xl border p-3",
+					text.tone === "warn" ? "border-warn bg-warn-soft" : "border-line",
+				)}
+			>
+				<div className="flex items-start gap-2.5">
+					<Icon
+						name={text.icon}
+						className={cn("mt-0.5 shrink-0", text.tone === "warn" ? "text-warn-text" : "text-ink-2")}
+					/>
+					<div className="grid min-w-0 flex-1">
+						<strong className="font-semibold text-sm">{text.title}</strong>
+						{text.sub && <span className="text-ink-2 text-xs leading-[17px]">{text.sub}</span>}
+					</div>
+					{step.kind !== "closed" && (
+						<DropdownMenu>
+							<DropdownMenuTrigger render={<Button size="sm" variant="secondary" />}>
+								<Trans>Edit</Trans>
+							</DropdownMenuTrigger>
+							<DropdownMenuContent align="end">
+								{step.kind === "interview" && (
+									<DropdownMenuItem onClick={() => onScheduleInterview(step.interview)}>
+										<Trans>Edit this interview…</Trans>
+									</DropdownMenuItem>
+								)}
+								<DropdownMenuItem onClick={() => onScheduleInterview(null)}>
+									<Trans>Schedule an interview…</Trans>
+								</DropdownMenuItem>
+								<DropdownMenuItem onClick={() => setFollowUpOpen(true)}>
+									{application.followUpAt ? <Trans>Change the follow-up…</Trans> : <Trans>Set a follow-up…</Trans>}
+								</DropdownMenuItem>
+							</DropdownMenuContent>
+						</DropdownMenu>
+					)}
+				</div>
+				{(step.kind === "interview" || step.kind === "follow-up") && (
+					<Button size="sm" variant="ghost" className="ms-7 w-fit" onClick={addToCalendar}>
+						<Icon name="calendar_month" size={16} />
+						<Trans>Add to calendar</Trans>
+					</Button>
+				)}
+			</div>
+
+			<FollowUpDialog application={application} open={followUpOpen} onOpenChange={setFollowUpOpen} />
+		</section>
+	);
+}
+
+type FollowUpDialogProps = { application: Application; open: boolean; onOpenChange: (open: boolean) => void };
+
+/** The follow-up: a date and a note, or cleared. */
+function FollowUpDialog({ application, open, onOpenChange }: FollowUpDialogProps) {
+	const id = useId();
+	const invalidate = useInvalidateApplications();
+	const [date, setDate] = useState("");
+	const [note, setNote] = useState("");
+	const update = useMutation({
+		...orpc.applications.update.mutationOptions(),
+		onSuccess: () => {
+			invalidate(application.id);
+			onOpenChange(false);
+		},
+		onError: () => toast.add({ type: "error", description: t`Couldn't save the follow-up.` }),
+	});
+
+	return (
+		<Dialog
+			open={open}
+			onOpenChange={(next) => {
+				if (next) {
+					setDate(application.followUpAt ? dayKey(new Date(application.followUpAt)) : "");
+					setNote(application.followUpNote ?? "");
+				}
+				onOpenChange(next);
+			}}
+		>
+			<DialogContent className="sm:max-w-sm">
+				<DialogHeader>
+					<DialogTitle>
+						<Trans>Follow-up</Trans>
+					</DialogTitle>
+					<DialogDescription>
+						<Trans>A reminder to check in, shown as the next step until you do.</Trans>
+					</DialogDescription>
+				</DialogHeader>
+				<form
+					id={`${id}-form`}
+					className="grid gap-3"
+					onSubmit={(event) => {
+						event.preventDefault();
+						// A date at 9:00 local time, so it reads as that day everywhere.
+						const at = date ? new Date(`${date}T09:00`) : null;
+						update.mutate({ id: application.id, followUpAt: at, followUpNote: note.trim() || null });
+					}}
+				>
+					<div className="grid gap-1.5">
+						<Label htmlFor={`${id}-date`}>
+							<Trans>Date</Trans>
+						</Label>
+						<Input id={`${id}-date`} type="date" value={date} onChange={(event) => setDate(event.target.value)} />
+					</div>
+					<div className="grid gap-1.5">
+						<Label htmlFor={`${id}-note`}>
+							<Trans>What to do</Trans>
+						</Label>
+						<Input
+							id={`${id}-note`}
+							value={note}
+							placeholder={t`Email the recruiter`}
+							onChange={(event) => setNote(event.target.value)}
+						/>
+					</div>
+				</form>
+				<DialogFooter>
+					{application.followUpAt && (
+						<Button
+							variant="ghost"
+							className="me-auto"
+							onClick={() => update.mutate({ id: application.id, followUpAt: null, followUpNote: null })}
+						>
+							<Trans>Clear</Trans>
+						</Button>
+					)}
+					<Button type="submit" form={`${id}-form`} disabled={!date || update.isPending}>
+						<Trans>Save</Trans>
+					</Button>
+				</DialogFooter>
+			</DialogContent>
+		</Dialog>
+	);
+}
diff --git a/apps/web/src/features/applications/components/detail/sent-documents.tsx b/apps/web/src/features/applications/components/detail/sent-documents.tsx
new file mode 100644
index 000000000..5a710f72d
--- /dev/null
+++ b/apps/web/src/features/applications/components/detail/sent-documents.tsx
@@ -0,0 +1,201 @@
+import type { Application } from "../../types";
+import { t } from "@lingui/core/macro";
+import { useLingui } from "@lingui/react";
+import { Trans } from "@lingui/react/macro";
+import { useMutation, useQuery } from "@tanstack/react-query";
+import { Link, useNavigate } from "@tanstack/react-router";
+import { useState } from "react";
+import { Button, buttonVariants } from "@reactive-resume/ui/components/button";
+import { Icon } from "@reactive-resume/ui/components/icon";
+import { toast } from "@reactive-resume/ui/components/toast";
+import { useDialogStore } from "@/dialogs/store";
+import { getOrpcErrorMessage } from "@/libs/error-message";
+import { orpc } from "@/libs/orpc/client";
+import { PIPELINE } from "../../stages";
+import { useInvalidateApplications } from "../../use-application-actions";
+import { FileAttachmentField } from "../file-attachment-field";
+
+const escapeHtml = (text: string) => text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+
+/** When the application was sent: its first stage at Applied or beyond. */
+function sentOn(application: Application) {
+	const applied = PIPELINE.indexOf("applied");
+	const entry = [...application.activity]
+		.sort((a, b) => new Date(a.at).getTime() - new Date(b.at).getTime())
+		.find((item) => item.type === "stage" && PIPELINE.indexOf(item.stage) >= applied);
+	return new Date(entry?.at ?? application.appliedAt);
+}
+
+type SentDocumentsProps = { application: Application; disabled: boolean };
+
+/**
+ * WHAT YOU SENT: the linked resume (opening the version that was sent, read-only, with a way back to the latest) and
+ * the linked letter. Without them: Tailor a resume and Write a letter. Uploaded PDFs stay under "Attach a file".
+ */
+export function SentDocuments({ application, disabled }: SentDocumentsProps) {
+	const { i18n } = useLingui();
+	const navigate = useNavigate();
+	const invalidate = useInvalidateApplications();
+	const openDialog = useDialogStore((state) => state.openDialog);
+	const { data: documents } = useQuery(orpc.documents.list.queryOptions({ input: { trashed: false } }));
+	const [attaching, setAttaching] = useState(Boolean(application.resumeFileUrl || application.coverLetterUrl));
+
+	const update = useMutation({
+		...orpc.applications.update.mutationOptions(),
+		onSuccess: () => invalidate(application.id),
+		onError: (error) =>
+			toast.add({ type: "error", description: getOrpcErrorMessage(error, { fallback: t`Couldn't save.` }) }),
+	});
+	const createLetter = useMutation(orpc.coverLetters.create.mutationOptions());
+
+	const resume = documents?.find((document) => document.type === "resume" && document.id === application.resumeId);
+	const letter = documents?.find((document) => document.type === "letter" && document.id === application.coverLetterId);
+	const date = sentOn(application).toLocaleDateString(i18n.locale, { month: "short", day: "numeric" });
+
+	const writeLetter = async () => {
+		try {
+			const created = await createLetter.mutateAsync({
+				name: t`Cover letter — ${application.company}`.slice(0, 100),
+				recipient: `<p>${escapeHtml(t`Hiring team, ${application.company}`)}</p>`,
+				applicationId: application.id,
+				...(application.resumeId ? { resumeId: application.resumeId } : {}),
+			});
+			await update.mutateAsync({ id: application.id, coverLetterId: created.id });
+			toast.add({ description: t`Letter created with the recipient filled in` });
+			void navigate({ to: "/dashboard", search: { letter: created.id } });
+		} catch (error) {
+			toast.add({
+				type: "error",
+				description: getOrpcErrorMessage(error, { fallback: t`Couldn't create the letter.` }),
+			});
+		}
+	};
+
+	return (
+		<section aria-labelledby="application-sent" className="grid gap-2">
+			<h3 id="application-sent" className="font-semibold text-ink-3 text-xs uppercase">
+				<Trans>What you sent</Trans>
+			</h3>
+
+			{application.resumeId && (
+				<div className="flex items-center gap-2.5 rounded-xl border border-line p-3">
+					<Icon name="description" className="shrink-0 text-ink-2" />
+					<div className="grid min-w-0 flex-1">
+						<span className="truncate font-medium text-sm">{resume?.name ?? t`Linked resume`}</span>
+						<span className="text-ink-3 text-xs">
+							{application.sentResumeVersionId ? (
+								application.sentCheckScore !== null ? (
+									<Trans>
+										Version sent {date} · Check {application.sentCheckScore}
+									</Trans>
+								) : (
+									<Trans>Version sent {date}</Trans>
+								)
+							) : (
+								<Trans>Linked · not sent yet</Trans>
+							)}
+						</span>
+					</div>
+					<Link
+						to="/builder/$resumeId"
+						params={{ resumeId: application.resumeId }}
+						search={application.sentResumeVersionId ? { version: application.sentResumeVersionId } : {}}
+						className={buttonVariants({ size: "sm", variant: "secondary" })}
+					>
+						<Trans>Open</Trans>
+					</Link>
+				</div>
+			)}
+
+			{application.coverLetterId && (
+				<div className="flex items-center gap-2.5 rounded-xl border border-line p-3">
+					<Icon name="mail" className="shrink-0 text-ink-2" />
+					<div className="grid min-w-0 flex-1">
+						<span className="truncate font-medium text-sm">{letter?.name ?? t`Cover letter`}</span>
+						<span className="text-ink-3 text-xs">
+							<Trans>Cover letter</Trans>
+						</span>
+					</div>
+					<Link
+						to="/dashboard"
+						search={{ letter: application.coverLetterId }}
+						className={buttonVariants({ size: "sm", variant: "secondary" })}
+					>
+						<Trans>Open</Trans>
+					</Link>
+				</div>
+			)}
+
+			{(!application.resumeId || !application.coverLetterId) && (
+				<div className="flex flex-wrap gap-1.5">
+					{!application.resumeId && (
+						<Button
+							size="sm"
+							disabled={disabled}
+							onClick={() => openDialog("document.new", { step: "copy", applicationId: application.id })}
+						>
+							<Icon name="content_copy" size={16} />
+							<Trans>Tailor a resume</Trans>
+						</Button>
+					)}
+					{!application.coverLetterId && (
+						<Button
+							size="sm"
+							variant="secondary"
+							disabled={disabled || createLetter.isPending}
+							onClick={() => void writeLetter()}
+						>
+							<Icon name="mail" size={16} />
+							<Trans>Write a letter</Trans>
+						</Button>
+					)}
+				</div>
+			)}
+
+			{attaching ? (
+				<div className="grid gap-1.5">
+					<FileAttachmentField
+						value={
+							application.resumeFileUrl
+								? { url: application.resumeFileUrl, name: application.resumeFileName || t`Resume file` }
+								: null
+						}
+						attachLabel={t`Attach a resume file (PDF)`}
+						disabled={disabled || update.isPending}
+						onChange={(value) =>
+							update.mutate({
+								id: application.id,
+								resumeFileUrl: value?.url ?? null,
+								resumeFileName: value?.name ?? null,
+							})
+						}
+					/>
+					<FileAttachmentField
+						value={
+							application.coverLetterUrl
+								? { url: application.coverLetterUrl, name: application.coverLetterName || t`Cover letter file` }
+								: null
+						}
+						attachLabel={t`Attach a cover letter file (PDF)`}
+						disabled={disabled || update.isPending}
+						onChange={(value) =>
+							update.mutate({
+								id: application.id,
+								coverLetterUrl: value?.url ?? null,
+								coverLetterName: value?.name ?? null,
+							})
+						}
+					/>
+				</div>
+			) : (
+				<button
+					type="button"
+					onClick={() => setAttaching(true)}
+					className="w-fit text-ink-3 text-xs underline underline-offset-2 hover:text-ink-2"
+				>
+					<Trans>Attach a file instead</Trans>
+				</button>
+			)}
+		</section>
+	);
+}
diff --git a/apps/web/src/features/applications/components/export-applications-sheet.tsx b/apps/web/src/features/applications/components/export-applications-sheet.tsx
index a1c2e0708..da2334e68 100644
--- a/apps/web/src/features/applications/components/export-applications-sheet.tsx
+++ b/apps/web/src/features/applications/components/export-applications-sheet.tsx
@@ -66,7 +66,7 @@ export function ExportApplicationsSheet({ open, onOpenChange, applications, filt
 								onValueChange={(value) => value && setScope(value)}
 								options={[
 									{ value: "filtered", label: t`Current filters` },
-									{ value: "all", label: t`All applications (including archived)` },
+									{ value: "all", label: t`All applications (including closed)` },
 								]}
 							/>
 						</div>
diff --git a/apps/web/src/features/applications/components/import-applications-sheet.tsx b/apps/web/src/features/applications/components/import-applications-sheet.tsx
index 63387478f..744c6d21a 100644
--- a/apps/web/src/features/applications/components/import-applications-sheet.tsx
+++ b/apps/web/src/features/applications/components/import-applications-sheet.tsx
@@ -1,11 +1,12 @@
+import type { CsvField } from "../csv";
 import { t } from "@lingui/core/macro";
-import { Trans } from "@lingui/react/macro";
-import { CheckCircleIcon, UploadSimpleIcon } from "@phosphor-icons/react";
-import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { Plural, Trans } from "@lingui/react/macro";
+import { useMutation } from "@tanstack/react-query";
 import { useMemo, useRef, useState } from "react";
-import { Badge } from "@reactive-resume/ui/components/badge";
 import { Button } from "@reactive-resume/ui/components/button";
+import { Icon } from "@reactive-resume/ui/components/icon";
 import { Label } from "@reactive-resume/ui/components/label";
+import { NativeSelect } from "@reactive-resume/ui/components/native-select";
 import {
 	Sheet,
 	SheetContent,
@@ -16,53 +17,87 @@ import {
 } from "@reactive-resume/ui/components/sheet";
 import { Textarea } from "@reactive-resume/ui/components/textarea";
 import { toast } from "@reactive-resume/ui/components/toast";
+import { downloadWithAnchor } from "@reactive-resume/utils/file";
 import { orpc } from "@/libs/orpc/client";
-import { mapCsvToApplications, parseCsv } from "../csv";
-import { applicationsListQueryKey } from "../queries";
+import { autoMapHeaders, CSV_FIELDS, mapCsvToApplications, parseCsv, rowsToCsv } from "../csv";
+import { useInvalidateApplications } from "../use-application-actions";
 
 const MAX_IMPORT = 500;
 const SAMPLE =
 	"Company,Role,Stage,Stage Date,Location,Salary,Source,Tags,Contact Name,Contact Email,Contact Phone\nStripe,Frontend Engineer,applied,2026-07-01,Remote,$180k,LinkedIn,remote;react,Jane Doe,jane@example.com,+1 555 0100";
 
-type Props = {
-	open: boolean;
-	onOpenChange: (open: boolean) => void;
-};
+const fieldLabel = (field: CsvField) =>
+	({
+		company: t`Company`,
+		role: t`Role`,
+		status: t`Stage`,
+		stageEnteredAt: t`Stage date`,
+		location: t`Location`,
+		salary: t`Salary`,
+		source: t`Source`,
+		sourceUrl: t`Link`,
+		notes: t`Notes`,
+		tags: t`Tags`,
+		contactName: t`Contact name`,
+		contactRole: t`Contact role`,
+		contactType: t`Contact label`,
+		contactEmail: t`Contact email`,
+		contactPhone: t`Contact phone`,
+		archived: t`Archived (closes it)`,
+		contacts: t`Contacts`,
+	})[field];
 
-export function ImportApplicationsSheet({ open, onOpenChange }: Props) {
-	const queryClient = useQueryClient();
+type ImportSheetProps = { open: boolean; onOpenChange: (open: boolean) => void };
+
+/**
+ * Import from CSV: paste or upload, confirm how the columns were matched (they're matched automatically), then
+ * import. Rows with no company or role are skipped and can be downloaded to fix.
+ */
+export function ImportApplicationsSheet({ open, onOpenChange }: ImportSheetProps) {
+	const invalidate = useInvalidateApplications();
 	const [text, setText] = useState("");
+	const [overrides, setOverrides] = useState<Record<number, CsvField | null>>({});
 	const fileRef = useRef<HTMLInputElement>(null);
 
-	const parsed = useMemo(() => (text.trim() ? mapCsvToApplications(parseCsv(text)) : null), [text]);
+	const table = useMemo(() => (text.trim() ? parseCsv(text) : null), [text]);
+	const headers = table?.[0] ?? [];
+	const mapping = useMemo(
+		() => autoMapHeaders(headers).map((field, index) => (index in overrides ? (overrides[index] ?? null) : field)),
+		[headers, overrides],
+	);
+	const result = useMemo(() => (table ? mapCsvToApplications(table, mapping) : null), [table, mapping]);
 
-	// The import endpoint caps a batch at 500; slice client-side and surface the overflow so the
-	// user knows to split rather than getting a generic server rejection.
-	const importable = parsed ? parsed.rows.slice(0, MAX_IMPORT) : [];
-	const overflow = (parsed?.rows.length ?? 0) - importable.length;
+	// The import endpoint takes 500 at a time; the rest is reported rather than refused.
+	const importable = result ? result.rows.slice(0, MAX_IMPORT) : [];
+	const overflow = (result?.rows.length ?? 0) - importable.length;
 
-	const resetFile = () => {
+	const reset = () => {
+		setText("");
+		setOverrides({});
 		if (fileRef.current) fileRef.current.value = "";
 	};
 
-	const importMutation = useMutation(
-		orpc.applications.import.mutationOptions({
-			onSuccess: (result) => {
-				void queryClient.invalidateQueries({ queryKey: applicationsListQueryKey() });
-				void queryClient.invalidateQueries({ queryKey: orpc.applications.stats.queryKey() });
-				void queryClient.invalidateQueries({ queryKey: orpc.applications.tags.queryKey() });
-				toast.add({ type: "success", description: t`Imported ${result.imported} application(s).` });
-				setText("");
-				resetFile();
-				onOpenChange(false);
-			},
-			onError: () => toast.add({ type: "error", description: t`Import failed. Check the CSV and try again.` }),
-		}),
-	);
+	const importMutation = useMutation({
+		...orpc.applications.import.mutationOptions(),
+		onSuccess: (response) => {
+			invalidate();
+			const skipped = result?.skipped ?? 0;
+			toast.add({
+				description:
+					skipped > 0
+						? t`Imported ${response.imported} applications. ${skipped} rows had no company or role and were skipped.`
+						: t`Imported ${response.imported} applications.`,
+			});
+			reset();
+			onOpenChange(false);
+		},
+		onError: () => toast.add({ type: "error", description: t`Import failed. Check the CSV and try again.` }),
+	});
 
-	const onFile = (file: File | undefined) => {
-		if (!file) return;
-		file.text().then(setText);
+	const downloadSkipped = () => {
+		if (!result || result.skippedRows.length === 0) return;
+		const blob = new Blob([rowsToCsv(headers, result.skippedRows)], { type: "text/csv" });
+		downloadWithAnchor(blob, "skipped-applications.csv");
 	};
 
 	return (
@@ -74,16 +109,16 @@ export function ImportApplicationsSheet({ open, onOpenChange }: Props) {
 					</SheetTitle>
 					<SheetDescription>
 						<Trans>
-							Paste rows or upload a .csv. We map columns like Company, Role, Stage, Stage Date, Salary, Source, Tags,
-							Contact Name, Contact Email and Contact Phone.
+							Paste rows or upload a .csv. Columns are matched automatically, and you check the match before anything is
+							saved.
 						</Trans>
 					</SheetDescription>
 				</SheetHeader>
 
-				<div className="flex flex-1 flex-col gap-3 overflow-y-auto px-4 pb-4">
+				<div className="flex flex-1 flex-col gap-4 overflow-y-auto px-4 pb-4">
 					<div className="flex items-center gap-2">
 						<Button size="sm" variant="secondary" onClick={() => fileRef.current?.click()}>
-							<UploadSimpleIcon />
+							<Icon name="upload_file" size={16} />
 							<Trans>Upload .csv</Trans>
 						</Button>
 						<Button size="sm" variant="ghost" onClick={() => setText(SAMPLE)}>
@@ -94,70 +129,110 @@ export function ImportApplicationsSheet({ open, onOpenChange }: Props) {
 							type="file"
 							accept=".csv,text/csv"
 							className="hidden"
-							onChange={(event) => onFile(event.target.files?.[0])}
+							onChange={(event) =>
+								void event.target.files?.[0]?.text().then((value) => {
+									setOverrides({});
+									setText(value);
+								})
+							}
 						/>
 					</div>
 
 					<div className="grid gap-1.5">
-						<Label className="text-muted-foreground text-xs">
+						<Label htmlFor="import-csv-text">
 							<Trans>CSV data</Trans>
 						</Label>
 						<Textarea
+							id="import-csv-text"
 							value={text}
-							rows={8}
+							rows={6}
 							placeholder="Company,Role,Stage,…"
 							className="font-mono text-xs"
-							onChange={(event) => setText(event.target.value)}
+							onChange={(event) => {
+								setOverrides({});
+								setText(event.target.value);
+							}}
 						/>
 					</div>
 
-					{parsed && (
-						<div className="rounded-lg border border-border p-3 text-sm">
-							<div className="flex items-center gap-2 font-medium">
-								<CheckCircleIcon className="text-accent-text" />
-								<Trans>{importable.length} ready to import</Trans>
-								{parsed.skipped > 0 && (
-									<span className="text-muted-foreground text-xs">
-										· <Trans>{parsed.skipped} skipped (invalid or missing data)</Trans>
-									</span>
+					{result && headers.length > 0 && (
+						<section aria-labelledby="import-columns" className="grid gap-2">
+							<h3 id="import-columns" className="font-semibold text-sm">
+								<Trans>Columns</Trans>
+							</h3>
+							<ul className="grid gap-1.5">
+								{headers.map((header, index) => (
+									<li
+										key={`${header}-${index}`}
+										className="grid grid-cols-[minmax(0,1fr)_16px_minmax(0,1fr)] items-center gap-2 text-sm"
+									>
+										<span className="truncate font-mono text-xs">{header || t`(no header)`}</span>
+										<Icon name="arrow_forward" size={16} className="text-ink-3" />
+										<NativeSelect
+											aria-label={t`Column ${header} goes to`}
+											value={mapping[index] ?? ""}
+											onChange={(event) =>
+												setOverrides((current) => ({
+													...current,
+													[index]: (event.target.value || null) as CsvField | null,
+												}))
+											}
+										>
+											<option value="">{t`Leave out`}</option>
+											{CSV_FIELDS.map((field) => (
+												<option key={field} value={field}>
+													{fieldLabel(field)}
+												</option>
+											))}
+										</NativeSelect>
+									</li>
+								))}
+							</ul>
+
+							<div className="grid gap-1 rounded-lg border border-line p-3 text-sm">
+								<p className="flex items-center gap-1.5 font-medium">
+									<Icon name="check_circle" size={18} className="text-accent-text" />
+									<Plural
+										value={importable.length}
+										one="# application ready to import"
+										other="# applications ready to import"
+									/>
+								</p>
+								{result.skipped > 0 && (
+									<p className="text-ink-2 text-xs">
+										<Plural
+											value={result.skipped}
+											one="# row has no company or role and will be skipped."
+											other="# rows have no company or role and will be skipped."
+										/>{" "}
+										<button
+											type="button"
+											className="font-medium underline underline-offset-2"
+											onClick={downloadSkipped}
+										>
+											<Trans>Download them</Trans>
+										</button>
+									</p>
+								)}
+								{result.contactsSkipped > 0 && (
+									<p className="text-ink-3 text-xs">
+										<Plural
+											value={result.contactsSkipped}
+											one="# contact has an invalid email or no name; its application still imports."
+											other="# contacts have an invalid email or no name; their applications still import."
+										/>
+									</p>
+								)}
+								{overflow > 0 && (
+									<p className="text-warn-text text-xs">
+										<Trans>
+											Only the first {MAX_IMPORT} rows import at once, leaving out {overflow}. Split the file to import
+											the rest.
+										</Trans>
+									</p>
 								)}
 							</div>
-							{parsed.contactsSkipped > 0 && (
-								<p className="mt-1.5 text-muted-foreground text-xs">
-									<Trans>
-										{parsed.contactsSkipped} contact(s) skipped (invalid email or missing Contact Name). Those
-										applications still import.
-									</Trans>
-								</p>
-							)}
-							{overflow > 0 && (
-								<p className="mt-1.5 text-warn-text text-xs">
-									<Trans>
-										Only the first {MAX_IMPORT} rows import at once, leaving out {overflow}. Split the file to import
-										the rest.
-									</Trans>
-								</p>
-							)}
-							{parsed.recognized.length > 0 && (
-								<div className="mt-2 flex flex-wrap gap-1">
-									{parsed.recognized.map((field) => (
-										<Badge key={field} variant="neutral" className="text-[10px]">
-											{field}
-										</Badge>
-									))}
-								</div>
-							)}
-							{parsed.rows.length > 0 && (
-								<ul className="mt-2 space-y-0.5 text-muted-foreground text-xs">
-									{parsed.rows.slice(0, 4).map((row, i) => (
-										<li key={`${row.company}-${i}`} className="truncate">
-											{row.role} · {row.company}
-										</li>
-									))}
-									{parsed.rows.length > 4 && <li>+{parsed.rows.length - 4} more…</li>}
-								</ul>
-							)}
-						</div>
+						</section>
 					)}
 				</div>
 
@@ -167,9 +242,9 @@ export function ImportApplicationsSheet({ open, onOpenChange }: Props) {
 					</Button>
 					<Button
 						disabled={importable.length === 0 || importMutation.isPending}
-						onClick={() => importable.length > 0 && importMutation.mutate({ items: importable })}
+						onClick={() => importMutation.mutate({ items: importable })}
 					>
-						<Trans>Import {importable.length}</Trans>
+						<Plural value={importable.length} one="Import # application" other="Import # applications" />
 					</Button>
 				</SheetFooter>
 			</SheetContent>
diff --git a/apps/web/src/features/applications/components/insights-view.tsx b/apps/web/src/features/applications/components/insights-view.tsx
index 575878657..3fd42c003 100644
--- a/apps/web/src/features/applications/components/insights-view.tsx
+++ b/apps/web/src/features/applications/components/insights-view.tsx
@@ -1,14 +1,15 @@
 import type { ApplicationTimelineEntry } from "@reactive-resume/schema/applications/data";
 import type { Application } from "../types";
 import { t } from "@lingui/core/macro";
-import { Trans } from "@lingui/react/macro";
+import { Plural, Trans } from "@lingui/react/macro";
 import { DownloadSimpleIcon } from "@phosphor-icons/react";
 import { useQuery } from "@tanstack/react-query";
 import { useMemo, useRef } from "react";
 import { Button } from "@reactive-resume/ui/components/button";
 import { toast } from "@reactive-resume/ui/components/toast";
 import { orpc } from "@/libs/orpc/client";
-import { computeInsights, computeTimeline } from "../insights";
+import { computeInsights, computeOutcomes, computeTimeline } from "../insights";
+import { getStageColor, getStageLabel } from "../stages";
 
 const byNewest = (a: ApplicationTimelineEntry, b: ApplicationTimelineEntry) =>
 	new Date(b.at).getTime() - new Date(a.at).getTime();
@@ -19,98 +20,167 @@ const appliedDate = (app: Application) =>
 
 export function ApplicationInsights({ applications }: { applications: Application[] }) {
 	const { data } = useQuery(orpc.applications.stats.queryOptions({}));
+	const { data: documents } = useQuery(orpc.documents.list.queryOptions({ input: { trashed: false } }));
 
-	// Weekly application velocity — derived from the already-loaded list, matching the stats
-	// population (archived excluded), so no extra endpoint is needed.
+	// A resume is tailored for an application when it was made for it (Copy for a job).
+	const madeFor = useMemo(
+		() =>
+			new Map(
+				(documents ?? []).flatMap((document) => (document.application ? [[document.id, document.application.id]] : [])),
+			),
+		[documents],
+	);
+	const outcomes = useMemo(
+		() =>
+			computeOutcomes(applications, (application) =>
+				Boolean(application.resumeId && madeFor.get(application.resumeId) === (application as Application).id),
+			),
+		[applications, madeFor],
+	);
+
+	// Weekly application velocity — derived from the already-loaded list, closed ones excluded.
 	const timeline = useMemo(
-		() => computeTimeline(applications.filter((app) => !app.archived).map((app) => new Date(appliedDate(app)))),
+		() =>
+			computeTimeline(applications.filter((app) => app.status !== "closed").map((app) => new Date(appliedDate(app)))),
 		[applications],
 	);
 	const maxWeek = Math.max(1, ...timeline.map((bucket) => bucket.count));
 
-	if (!data) return <div className="h-40 animate-pulse rounded-xl bg-muted/40" />;
+	if (!data) return <div className="h-40 animate-pulse rounded-xl bg-sunken" />;
 
 	const insights = computeInsights(data.byStage);
 	const maxSource = Math.max(1, ...data.bySource.map((s) => s.count));
+	const widest = Math.max(1, ...outcomes.funnel.map((row) => row.reached));
 
-	if (insights.total === 0) {
+	if (outcomes.sent === 0) {
 		return (
-			<p className="py-16 text-center text-muted-foreground text-sm">
-				<Trans>No applications yet. Add a few to see your funnel and reply rates.</Trans>
+			<p className="py-16 text-center text-ink-2 text-sm">
+				<Trans>Once you've sent a few applications, this shows how far they get and how quickly people reply.</Trans>
 			</p>
 		);
 	}
 
 	return (
 		<div className="flex max-w-4xl flex-col gap-4 overflow-y-auto pb-6">
-			<p className="text-muted-foreground text-xs">
-				<Trans>Pipeline health across all applications</Trans>
-			</p>
+			<section aria-labelledby="insights-funnel" className="grid gap-3 rounded-xl border border-line p-5">
+				<h2 id="insights-funnel" className="font-semibold text-sm">
+					<Trans>How far applications get</Trans>
+				</h2>
+				<ol className="grid gap-2">
+					{outcomes.funnel.map((row) => (
+						<li key={row.status} className="grid grid-cols-[92px_minmax(0,1fr)_32px] items-center gap-3 text-sm">
+							<span className="flex items-center gap-1.5 text-ink-2">
+								<span
+									aria-hidden="true"
+									className="size-2 rounded-full"
+									style={{ background: getStageColor(row.status) }}
+								/>
+								{getStageLabel(row.status)}
+							</span>
+							<span className="h-5 overflow-hidden rounded bg-sunken">
+								<span
+									className="block h-full rounded"
+									style={{ width: `${(row.reached / widest) * 100}%`, background: getStageColor(row.status) }}
+								/>
+							</span>
+							<span className="text-end font-display text-base tabular-nums">{row.reached}</span>
+						</li>
+					))}
+				</ol>
+				<p className="text-ink-3 text-xs">
+					<Trans>Counts every application that reached each stage, including ones now closed.</Trans>
+				</p>
+			</section>
 
-			{/* stat tiles */}
-			<div className="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-5">
-				{insights.tiles.map((tile) => (
-					<div key={tile.label} className="rounded-xl border border-border p-4">
-						<div className="text-muted-foreground text-xs">{tile.label}</div>
-						<div className="mt-2 font-bold text-2xl tracking-tight">{tile.value}</div>
-						<div className="mt-1 text-muted-foreground text-xs">{tile.sub}</div>
+			<div className="grid gap-4 sm:grid-cols-2">
+				<div className="rounded-xl border border-line p-5">
+					<div className="font-display font-medium text-[34px] leading-10">
+						{Math.round((outcomes.heardBack / outcomes.sent) * 100)}%
 					</div>
-				))}
+					<div className="text-ink-2 text-sm">
+						<Trans>heard back</Trans>
+					</div>
+				</div>
+				<div className="rounded-xl border border-line p-5">
+					<div className="font-display font-medium text-[34px] leading-10">
+						{outcomes.medianDaysToReply === null ? (
+							"—"
+						) : (
+							<Plural value={outcomes.medianDaysToReply} one="# day" other="# days" />
+						)}
+					</div>
+					<div className="text-ink-2 text-sm">
+						<Trans>median to first reply</Trans>
+					</div>
+				</div>
 			</div>
 
+			{outcomes.tailored.sent + outcomes.base.sent > 0 && (
+				<section aria-labelledby="insights-tailored" className="grid gap-1 rounded-xl border border-line p-5">
+					<h2 id="insights-tailored" className="font-semibold text-sm">
+						<Trans>Tailored vs. base resume</Trans>
+					</h2>
+					<p className="text-ink-2 text-sm leading-6">
+						<Trans>
+							{outcomes.tailored.replied} of {outcomes.tailored.sent} tailored applications got a reply;{" "}
+							{outcomes.base.replied} of {outcomes.base.sent} sent with another resume.
+						</Trans>{" "}
+						{outcomes.tailored.sent + outcomes.base.sent < 10 && <Trans>Small numbers, but worth noticing.</Trans>}
+					</p>
+				</section>
+			)}
+
 			<PipelineFlow insights={insights} />
 
 			<div className="grid gap-4 lg:grid-cols-2">
 				{/* application velocity over time */}
-				<div className="rounded-xl border border-border p-5">
+				<div className="rounded-xl border border-line p-5">
 					<h3 className="font-semibold text-sm">
 						<Trans>Applications over time</Trans>
 					</h3>
-					<p className="mt-0.5 text-muted-foreground text-xs">
+					<p className="mt-0.5 text-ink-3 text-xs">
 						<Trans>Applications sent per week (last 8 weeks)</Trans>
 					</p>
 					<div className="mt-4 flex items-end gap-2">
 						{timeline.map((bucket) => (
 							<div key={bucket.label} className="flex flex-1 flex-col items-center gap-1">
 								<div className="flex h-28 w-full flex-col justify-end">
-									<span className="mb-1 text-center text-[10px] text-muted-foreground tabular-nums">
-										{bucket.count || ""}
-									</span>
+									<span className="mb-1 text-center text-[10px] text-ink-3 tabular-nums">{bucket.count || ""}</span>
 									<div
-										className="w-full rounded-t bg-primary/60"
+										className="w-full rounded-t bg-accent"
 										style={{ height: `${bucket.count ? Math.max((bucket.count / maxWeek) * 100, 8) : 0}%` }}
 									/>
 								</div>
-								<span className="text-[10px] text-muted-foreground tabular-nums">{bucket.label}</span>
+								<span className="text-[10px] text-ink-3 tabular-nums">{bucket.label}</span>
 							</div>
 						))}
 					</div>
 				</div>
 
 				{/* sources */}
-				<div className="rounded-xl border border-border p-5">
+				<div className="rounded-xl border border-line p-5">
 					<h3 className="font-semibold text-sm">
 						<Trans>Where applications come from</Trans>
 					</h3>
-					<p className="mt-0.5 text-muted-foreground text-xs">
+					<p className="mt-0.5 text-ink-3 text-xs">
 						<Trans>Count by source</Trans>
 					</p>
 					<div className="mt-4 flex flex-col gap-3">
 						{data.bySource.length === 0 ? (
-							<p className="text-muted-foreground text-sm">
+							<p className="text-ink-3 text-sm">
 								<Trans>No source data yet.</Trans>
 							</p>
 						) : (
 							data.bySource.map((row) => (
 								<div key={row.source} className="flex items-center gap-3 text-xs">
 									<span className="w-28 shrink-0 truncate font-medium">{row.source}</span>
-									<div className="h-2.5 flex-1 overflow-hidden rounded-full bg-muted">
+									<div className="h-2.5 flex-1 overflow-hidden rounded-full bg-sunken">
 										<div
-											className="h-full rounded-full bg-foreground/70"
+											className="h-full rounded-full bg-ink-2"
 											style={{ width: `${Math.max((row.count / maxSource) * 100, 3)}%` }}
 										/>
 									</div>
-									<span className="w-6 text-right text-muted-foreground">{row.count}</span>
+									<span className="w-6 text-right text-ink-3">{row.count}</span>
 								</div>
 							))
 						)}
@@ -229,7 +299,7 @@ function PipelineFlow({ insights }: { insights: ReturnType<typeof computeInsight
 	};
 
 	return (
-		<div className="rounded-xl border border-border p-5">
+		<div className="rounded-xl border border-line p-5">
 			<div className="flex items-start justify-between gap-4">
 				<h3 className="font-semibold text-sm">
 					<Trans>Where your applications went</Trans>
@@ -269,11 +339,11 @@ function PipelineFlow({ insights }: { insights: ReturnType<typeof computeInsight
 				<text x={padX} y={60} fontSize={12} fill="#71717a">
 					{t`${insights.total} applications tracked`}
 				</text>
-				{insights.rejected > 0 && (
+				{insights.closed > 0 && (
 					<g>
 						<circle cx={W - padX - 96} cy={54} r={4} fill={FLOW_REJECTED} />
 						<text x={W - padX - 86} y={58} fontSize={12} fill="#a1a1aa">
-							{t`${insights.rejected} rejected`}
+							{t`${insights.closed} closed`}
 						</text>
 					</g>
 				)}
diff --git a/apps/web/src/features/applications/components/interview-dialog.tsx b/apps/web/src/features/applications/components/interview-dialog.tsx
index 701c9253a..e1ff7044c 100644
--- a/apps/web/src/features/applications/components/interview-dialog.tsx
+++ b/apps/web/src/features/applications/components/interview-dialog.tsx
@@ -152,7 +152,7 @@ export function InterviewDialog({
 		? DURATION_OPTIONS
 		: [...DURATION_OPTIONS, draft.durationMinutes].sort((a, b) => a - b);
 
-	const pickable = applications.filter((item) => !item.archived);
+	const pickable = applications.filter((item) => item.status !== "closed");
 
 	return (
 		<Dialog open={open} onOpenChange={onOpenChange}>
diff --git a/apps/web/src/features/applications/components/list-view.tsx b/apps/web/src/features/applications/components/list-view.tsx
new file mode 100644
index 000000000..9ed39d5f6
--- /dev/null
+++ b/apps/web/src/features/applications/components/list-view.tsx
@@ -0,0 +1,409 @@
+import type { ApplicationStatus } from "@reactive-resume/schema/applications/data";
+import type { Application } from "../types";
+import { t } from "@lingui/core/macro";
+import { useLingui } from "@lingui/react";
+import { Plural, Trans } from "@lingui/react/macro";
+import { useMutation } from "@tanstack/react-query";
+import { useEffect, useMemo, useState } from "react";
+import { Button } from "@reactive-resume/ui/components/button";
+import { Checkbox } from "@reactive-resume/ui/components/checkbox";
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuTrigger,
+} from "@reactive-resume/ui/components/dropdown-menu";
+import { Icon } from "@reactive-resume/ui/components/icon";
+import { Input } from "@reactive-resume/ui/components/input";
+import { Popover, PopoverContent, PopoverTrigger } from "@reactive-resume/ui/components/popover";
+import { toast } from "@reactive-resume/ui/components/toast";
+import { useBreakpoint } from "@reactive-resume/ui/hooks/use-breakpoint";
+import { cn } from "@reactive-resume/utils/style";
+import { useConfirm } from "@/hooks/use-confirm";
+import { formatRelativeTime } from "@/libs/locale";
+import { orpc } from "@/libs/orpc/client";
+import { describeNextStep, getNextStep } from "../next-step";
+import { CLOSED_REASONS, getClosedReasonLabel, getStageColor, getStageLabel, LIST_ORDER, PIPELINE } from "../stages";
+import { useInvalidateApplications } from "../use-application-actions";
+
+type SortKey = "role" | "next" | "updated";
+type Sort = { key: SortKey; direction: "asc" | "desc" };
+
+const nextStepTime = (application: Application) => {
+	const step = getNextStep(application);
+	return step.kind === "interview" || step.kind === "follow-up" ? step.at.getTime() : Number.POSITIVE_INFINITY;
+};
+
+const compare: Record<SortKey, (a: Application, b: Application) => number> = {
+	role: (a, b) => a.role.localeCompare(b.role) || a.company.localeCompare(b.company),
+	next: (a, b) => nextStepTime(a) - nextStepTime(b),
+	updated: (a, b) => new Date(a.updatedAt).getTime() - new Date(b.updatedAt).getTime(),
+};
+
+type ListViewProps = {
+	applications: Application[];
+	showClosed: boolean;
+	selectedId: string | null;
+	onOpen: (application: Application) => void;
+};
+
+/**
+ * The default view: applications grouped by stage in the order that needs you first (Interview, Offer, Screening,
+ * Applied, Saved, then Closed when shown). Groups collapse, headers sort within groups, and row checkboxes select
+ * for bulk moves, tags, closing and deleting. Phones get two-line rows.
+ */
+export function ApplicationList({ applications, showClosed, selectedId, onOpen }: ListViewProps) {
+	const phone = useBreakpoint() === "mobile";
+	const [collapsed, setCollapsed] = useState<ReadonlySet<ApplicationStatus>>(new Set());
+	const [sort, setSort] = useState<Sort>({ key: "updated", direction: "desc" });
+	const [checked, setChecked] = useState<ReadonlySet<string>>(new Set());
+
+	// Selections only cover what's on screen.
+	useEffect(() => {
+		setChecked((current) => {
+			const visible = new Set(applications.map((application) => application.id));
+			const next = new Set([...current].filter((id) => visible.has(id)));
+			return next.size === current.size ? current : next;
+		});
+	}, [applications]);
+
+	const groups = useMemo(() => {
+		const sign = sort.direction === "asc" ? 1 : -1;
+		return LIST_ORDER.filter((status) => status !== "closed" || showClosed)
+			.map((status) => ({
+				status,
+				rows: applications
+					.filter((application) => application.status === status)
+					.sort((a, b) => sign * compare[sort.key](a, b)),
+			}))
+			.filter((group) => group.rows.length > 0);
+	}, [applications, showClosed, sort]);
+
+	const toggleGroup = (status: ApplicationStatus) =>
+		setCollapsed((current) => {
+			const next = new Set(current);
+			if (next.has(status)) next.delete(status);
+			else next.add(status);
+			return next;
+		});
+
+	const toggleRow = (id: string) =>
+		setChecked((current) => {
+			const next = new Set(current);
+			if (next.has(id)) next.delete(id);
+			else next.add(id);
+			return next;
+		});
+
+	const sortBy = (key: SortKey) =>
+		setSort((current) =>
+			current.key === key
+				? { key, direction: current.direction === "asc" ? "desc" : "asc" }
+				: { key, direction: key === "updated" ? "desc" : "asc" },
+		);
+
+	const header = (key: SortKey, label: string, className?: string) => (
+		<th
+			scope="col"
+			aria-sort={sort.key === key ? (sort.direction === "asc" ? "ascending" : "descending") : undefined}
+			className={cn("px-2 text-start font-medium", className)}
+		>
+			<button
+				type="button"
+				onClick={() => sortBy(key)}
+				className="inline-flex h-9 items-center gap-1 rounded-md hover:text-ink"
+			>
+				{label}
+				{sort.key === key && <Icon name={sort.direction === "asc" ? "arrow_upward" : "arrow_downward"} size={14} />}
+			</button>
+		</th>
+	);
+
+	return (
+		<div className="grid min-w-0 content-start gap-3">
+			{checked.size > 0 && <BulkBar ids={[...checked]} onDone={() => setChecked(new Set())} />}
+
+			<table className="w-full border-collapse text-sm">
+				{!phone && (
+					<thead>
+						<tr className="border-line border-b text-ink-3 text-xs">
+							<th scope="col" className="w-10 ps-3">
+								<span className="sr-only">
+									<Trans>Select</Trans>
+								</span>
+							</th>
+							{header("role", t`Role`)}
+							{header("next", t`Next step`)}
+							<th scope="col" className="px-2 text-start font-medium max-lg:hidden">
+								<Trans>Stage</Trans>
+							</th>
+							<th scope="col" className="px-2 text-start font-medium">
+								<Trans>Sent</Trans>
+							</th>
+							{header("updated", t`Updated`, "max-md:hidden")}
+						</tr>
+					</thead>
+				)}
+
+				{groups.map(({ status, rows }) => {
+					const open = !collapsed.has(status);
+					const groupId = `applications-group-${status}`;
+					return (
+						<tbody key={status} aria-labelledby={groupId}>
+							<tr>
+								<th scope="colgroup" colSpan={6} className="pt-3 text-start">
+									<button
+										type="button"
+										id={groupId}
+										aria-expanded={open}
+										onClick={() => toggleGroup(status)}
+										className="flex h-9 items-center gap-2 rounded-md px-1.5 font-semibold text-sm hover:bg-hover"
+									>
+										<Icon
+											name="chevron_right"
+											size={18}
+											className={cn("text-ink-3 transition-transform duration-standard", open && "rotate-90")}
+										/>
+										<span
+											aria-hidden="true"
+											className="size-2 rounded-full"
+											style={{ background: getStageColor(status) }}
+										/>
+										{getStageLabel(status)}
+										<span className="font-mono font-normal text-ink-3 text-xs">{rows.length}</span>
+									</button>
+								</th>
+							</tr>
+							{open &&
+								rows.map((application) => (
+									<ApplicationRow
+										key={application.id}
+										application={application}
+										phone={phone}
+										selected={application.id === selectedId}
+										checked={checked.has(application.id)}
+										onCheck={() => toggleRow(application.id)}
+										onOpen={() => onOpen(application)}
+									/>
+								))}
+						</tbody>
+					);
+				})}
+			</table>
+		</div>
+	);
+}
+
+type ApplicationRowProps = {
+	application: Application;
+	phone: boolean;
+	selected: boolean;
+	checked: boolean;
+	onCheck: () => void;
+	onOpen: () => void;
+};
+
+function ApplicationRow({ application, phone, selected, checked, onCheck, onOpen }: ApplicationRowProps) {
+	const { i18n } = useLingui();
+	const next = describeNextStep(getNextStep(application), application, i18n.locale);
+	const formatter = new Intl.RelativeTimeFormat(i18n.locale, { numeric: "auto" });
+	const sent = application.status !== "saved";
+	const tone = next.tone === "warn" ? "text-warn-text" : next.tone === "muted" ? "text-ink-3" : "text-ink-2";
+
+	const initial = (
+		<span
+			aria-hidden="true"
+			className="grid size-8 shrink-0 place-items-center rounded-[7px] bg-sunken font-semibold text-[13px] text-ink-2"
+		>
+			{application.company.slice(0, 1).toUpperCase()}
+		</span>
+	);
+
+	const openButton = (
+		<button type="button" onClick={onOpen} className="grid min-w-0 text-start after:absolute after:inset-0">
+			<span className="truncate font-medium">{application.role}</span>
+			<span className="truncate text-ink-3 text-xs">
+				{phone
+					? `${application.company} · ${next.title}`
+					: [application.company, application.location].filter(Boolean).join(" · ")}
+			</span>
+		</button>
+	);
+
+	if (phone) {
+		return (
+			<tr className={cn("relative border-line border-b", selected && "bg-accent-soft/50")}>
+				<td className="py-2.5 ps-1">
+					<div className="flex items-center gap-3">
+						{initial}
+						{openButton}
+						<Icon name="chevron_right" size={20} className="ms-auto shrink-0 text-ink-3" />
+					</div>
+				</td>
+			</tr>
+		);
+	}
+
+	return (
+		<tr
+			className={cn(
+				"relative border-line border-b transition-colors duration-quick hover:bg-hover",
+				selected && "bg-accent-soft/50",
+			)}
+		>
+			<td className="relative z-10 w-10 ps-3">
+				<Checkbox
+					checked={checked}
+					onCheckedChange={onCheck}
+					aria-label={t`Select ${application.role} at ${application.company}`}
+				/>
+			</td>
+			<td className="py-2 pe-2">
+				<div className="flex items-center gap-3">
+					{initial}
+					{openButton}
+				</div>
+			</td>
+			<td className="px-2">
+				<span className={cn("flex items-center gap-1.5", tone)}>
+					<Icon name={next.icon} size={16} className="shrink-0" />
+					<span className="truncate">{next.title}</span>
+				</span>
+			</td>
+			<td className="px-2 max-lg:hidden">
+				<span className="flex items-center gap-1.5 text-ink-2">
+					<span
+						aria-hidden="true"
+						className="size-2 rounded-full"
+						style={{ background: getStageColor(application.status) }}
+					/>
+					{getStageLabel(application.status)}
+				</span>
+			</td>
+			<td className="px-2">
+				{application.resumeId || application.coverLetterId ? (
+					<span className="flex items-center gap-1 text-ink-2">
+						{application.resumeId && <Icon name="description" size={18} aria-label={t`Resume`} />}
+						{application.coverLetterId && <Icon name="mail" size={18} aria-label={t`Cover letter`} />}
+					</span>
+				) : (
+					<span className={cn("text-xs", sent ? "text-warn-text" : "text-ink-3")}>
+						<Trans>None</Trans>
+					</span>
+				)}
+			</td>
+			<td className="whitespace-nowrap px-2 text-ink-3 text-xs max-md:hidden">
+				{formatRelativeTime(application.updatedAt, formatter)}
+			</td>
+		</tr>
+	);
+}
+
+type BulkBarProps = { ids: string[]; onDone: () => void };
+
+/** For the checked rows: move them, tag them, close them with a reason, or delete them (after asking). */
+function BulkBar({ ids, onDone }: BulkBarProps) {
+	const invalidate = useInvalidateApplications();
+	const confirm = useConfirm();
+	const [tag, setTag] = useState("");
+
+	const bulkUpdate = useMutation({
+		...orpc.applications.bulkUpdate.mutationOptions(),
+		onSuccess: (result) => {
+			invalidate();
+			onDone();
+			toast.add({ description: t`Updated ${result.updated}` });
+		},
+		onError: () => toast.add({ type: "error", description: t`Couldn't update the applications. Try again.` }),
+	});
+	const bulkDelete = useMutation({
+		...orpc.applications.bulkDelete.mutationOptions(),
+		onSuccess: (result) => {
+			invalidate();
+			onDone();
+			toast.add({ description: t`Deleted ${result.deleted}` });
+		},
+		onError: () => toast.add({ type: "error", description: t`Couldn't delete the applications. Try again.` }),
+	});
+
+	return (
+		<div className="flex flex-wrap items-center gap-1.5 rounded-xl bg-ink px-3 py-2 text-bg">
+			<span className="me-1 font-semibold text-sm">
+				<Plural value={ids.length} one="# selected" other="# selected" />
+			</span>
+
+			<DropdownMenu>
+				<DropdownMenuTrigger render={<Button size="sm" variant="secondary" />}>
+					<Icon name="arrow_forward" size={16} />
+					<Trans>Move to…</Trans>
+				</DropdownMenuTrigger>
+				<DropdownMenuContent align="start">
+					{PIPELINE.map((status) => (
+						<DropdownMenuItem key={status} onClick={() => bulkUpdate.mutate({ ids, status })}>
+							<span aria-hidden="true" className="size-2 rounded-full" style={{ background: getStageColor(status) }} />
+							{getStageLabel(status)}
+						</DropdownMenuItem>
+					))}
+				</DropdownMenuContent>
+			</DropdownMenu>
+
+			<Popover>
+				<PopoverTrigger render={<Button size="sm" variant="secondary" />}>
+					<Icon name="sell" size={16} />
+					<Trans>Add tag</Trans>
+				</PopoverTrigger>
+				<PopoverContent align="start" className="w-60 p-2">
+					<form
+						className="flex gap-1.5"
+						onSubmit={(event) => {
+							event.preventDefault();
+							if (!tag.trim()) return;
+							bulkUpdate.mutate({ ids, addTags: [tag.trim()] });
+							setTag("");
+						}}
+					>
+						<Input aria-label={t`Tag`} value={tag} onChange={(event) => setTag(event.target.value)} autoFocus />
+						<Button size="sm" type="submit" disabled={!tag.trim()}>
+							<Trans>Add</Trans>
+						</Button>
+					</form>
+				</PopoverContent>
+			</Popover>
+
+			<DropdownMenu>
+				<DropdownMenuTrigger render={<Button size="sm" variant="secondary" />}>
+					<Trans>Close…</Trans>
+				</DropdownMenuTrigger>
+				<DropdownMenuContent align="start">
+					{CLOSED_REASONS.map((reason) => (
+						<DropdownMenuItem
+							key={reason}
+							onClick={() => bulkUpdate.mutate({ ids, status: "closed", closedReason: reason })}
+						>
+							{getClosedReasonLabel(reason)}
+						</DropdownMenuItem>
+					))}
+				</DropdownMenuContent>
+			</DropdownMenu>
+
+			<Button
+				size="sm"
+				variant="secondary"
+				className="text-danger-text"
+				onClick={async () => {
+					const confirmed = await confirm(t`Delete ${ids.length} applications?`, {
+						description: t`They and their timelines are deleted permanently. This can't be undone.`,
+						confirmText: t`Delete`,
+					});
+					if (confirmed) bulkDelete.mutate({ ids });
+				}}
+			>
+				<Trans>Delete…</Trans>
+			</Button>
+
+			<Button size="sm" variant="ghost" className="ms-auto text-bg hover:bg-bg/15" onClick={onDone}>
+				<Trans>Clear</Trans>
+			</Button>
+		</div>
+	);
+}
diff --git a/apps/web/src/features/applications/components/table-view.tsx b/apps/web/src/features/applications/components/table-view.tsx
deleted file mode 100644
index b035881bd..000000000
--- a/apps/web/src/features/applications/components/table-view.tsx
+++ /dev/null
@@ -1,397 +0,0 @@
-import type { ApplicationStatus, ApplicationTimelineEntry } from "@reactive-resume/schema/applications/data";
-import type { Application } from "../types";
-import { t } from "@lingui/core/macro";
-import { Trans } from "@lingui/react/macro";
-import { ArchiveIcon, ArrowRightIcon, TagIcon, TrashIcon } from "@phosphor-icons/react";
-import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { useEffect, useMemo, useState } from "react";
-import { STAGES } from "@reactive-resume/schema/applications/data";
-import { Badge } from "@reactive-resume/ui/components/badge";
-import { Button } from "@reactive-resume/ui/components/button";
-import { Checkbox } from "@reactive-resume/ui/components/checkbox";
-import {
-	DropdownMenu,
-	DropdownMenuContent,
-	DropdownMenuItem,
-	DropdownMenuTrigger,
-} from "@reactive-resume/ui/components/dropdown-menu";
-import { Input } from "@reactive-resume/ui/components/input";
-import { Popover, PopoverContent, PopoverTrigger } from "@reactive-resume/ui/components/popover";
-import { toast } from "@reactive-resume/ui/components/toast";
-import { getInitials } from "@reactive-resume/utils/string";
-import { cn } from "@reactive-resume/utils/style";
-import { orpc } from "@/libs/orpc/client";
-import { applicationsListQueryKey } from "../queries";
-import { ApplicationActionsMenu } from "./application-actions-menu";
-
-const PAGE_SIZE = 25;
-const stageOf = (status: string) => STAGES.find((s) => s.value === status);
-const byNewest = (a: ApplicationTimelineEntry, b: ApplicationTimelineEntry) =>
-	new Date(b.at).getTime() - new Date(a.at).getTime();
-const latestStageDate = (activity: ApplicationTimelineEntry[], status: ApplicationStatus) =>
-	[...activity].sort(byNewest).find((entry) => entry.type === "stage" && entry.stage === status)?.at;
-const formatDate = (value: Date | string) =>
-	new Date(value).toLocaleDateString(undefined, { month: "numeric", day: "numeric", timeZone: "UTC", year: "numeric" });
-
-type Props = {
-	applications: Application[];
-	onOpen: (application: Application) => void;
-	onEdit: (application: Application) => void;
-};
-
-export function ApplicationTable({ applications, onOpen, onEdit }: Props) {
-	const queryClient = useQueryClient();
-	const [selected, setSelected] = useState<Set<string>>(new Set());
-	const [page, setPage] = useState(0);
-
-	// Drop selected rows that are no longer in the current (filtered) set, so the bulk-action bar
-	// never reports a count for rows the user can't see.
-	useEffect(() => {
-		setSelected((prev) => {
-			if (prev.size === 0) return prev;
-			const visible = new Set(applications.map((app) => app.id));
-			const next = new Set([...prev].filter((id) => visible.has(id)));
-			return next.size === prev.size ? prev : next;
-		});
-	}, [applications]);
-
-	const invalidate = () => {
-		void queryClient.invalidateQueries({ queryKey: applicationsListQueryKey() });
-		void queryClient.invalidateQueries({ queryKey: orpc.applications.tags.queryKey() });
-		void queryClient.invalidateQueries({ queryKey: orpc.applications.stats.queryKey() });
-	};
-
-	const clearSelection = () => setSelected(new Set());
-
-	const bulkUpdate = useMutation(
-		orpc.applications.bulkUpdate.mutationOptions({
-			onSuccess: () => {
-				invalidate();
-				clearSelection();
-			},
-			onError: () => toast.add({ type: "error", description: t`Bulk update failed. Please try again.` }),
-		}),
-	);
-
-	const bulkDelete = useMutation(
-		orpc.applications.bulkDelete.mutationOptions({
-			onSuccess: (result) => {
-				invalidate();
-				clearSelection();
-				toast.add({ type: "success", description: t`Deleted ${result.deleted} application(s).` });
-			},
-			onError: () => toast.add({ type: "error", description: t`Bulk delete failed. Please try again.` }),
-		}),
-	);
-
-	const pageCount = Math.max(1, Math.ceil(applications.length / PAGE_SIZE));
-	const safePage = Math.min(page, pageCount - 1);
-	const rows = useMemo(
-		() => applications.slice(safePage * PAGE_SIZE, safePage * PAGE_SIZE + PAGE_SIZE),
-		[applications, safePage],
-	);
-
-	const pageIds = rows.map((row) => row.id);
-	const allChecked = pageIds.length > 0 && pageIds.every((id) => selected.has(id));
-	const someChecked = pageIds.some((id) => selected.has(id));
-
-	const toggleAll = () => {
-		setSelected((prev) => {
-			const next = new Set(prev);
-			if (allChecked) for (const id of pageIds) next.delete(id);
-			else for (const id of pageIds) next.add(id);
-			return next;
-		});
-	};
-
-	const toggleOne = (id: string) => {
-		setSelected((prev) => {
-			const next = new Set(prev);
-			next.has(id) ? next.delete(id) : next.add(id);
-			return next;
-		});
-	};
-
-	const ids = [...selected];
-
-	return (
-		<div className="flex min-h-0 flex-1 flex-col gap-3">
-			{selected.size > 0 && (
-				<div className="flex flex-wrap items-center gap-2 rounded-xl bg-foreground px-3 py-2 text-background">
-					<span className="font-semibold text-sm">
-						{selected.size} <Trans>selected</Trans>
-					</span>
-					<span className="mx-1 h-4 w-px bg-background/25" />
-
-					<DropdownMenu>
-						<DropdownMenuTrigger
-							render={
-								<Button size="sm" variant="secondary" className="h-7">
-									<ArrowRightIcon />
-									<Trans>Move stage</Trans>
-								</Button>
-							}
-						/>
-						<DropdownMenuContent align="start">
-							{STAGES.map((stage) => (
-								<DropdownMenuItem key={stage.value} onClick={() => bulkUpdate.mutate({ ids, status: stage.value })}>
-									<span className="size-2 rounded-sm" style={{ background: stage.color }} />
-									{stage.label}
-								</DropdownMenuItem>
-							))}
-						</DropdownMenuContent>
-					</DropdownMenu>
-
-					<AddTagPopover onAdd={(tag) => bulkUpdate.mutate({ ids, addTags: [tag] })} />
-
-					<Button
-						size="sm"
-						variant="secondary"
-						className="h-7"
-						onClick={() => bulkUpdate.mutate({ ids, archived: true })}
-					>
-						<ArchiveIcon />
-						<Trans>Archive</Trans>
-					</Button>
-					<Button
-						size="sm"
-						variant="secondary"
-						className="h-7 text-destructive"
-						onClick={() => bulkDelete.mutate({ ids })}
-					>
-						<TrashIcon />
-						<Trans>Delete</Trans>
-					</Button>
-
-					<Button
-						size="sm"
-						variant="ghost"
-						className="ms-auto h-7 text-background hover:bg-background/15"
-						onClick={clearSelection}
-					>
-						<Trans>Clear</Trans>
-					</Button>
-				</div>
-			)}
-
-			{/* Desktop: full table. Mobile: a stacked card list (below) instead of a 900px h-scroll. */}
-			<div className="min-h-0 flex-1 overflow-auto rounded-xl border border-border max-sm:hidden">
-				<table className="w-full min-w-[900px] border-collapse text-sm">
-					<thead className="sticky top-0 z-10 bg-muted/50 backdrop-blur">
-						<tr className="[&>th]:whitespace-nowrap [&>th]:px-3 [&>th]:py-2.5 [&>th]:text-left [&>th]:font-medium [&>th]:text-muted-foreground [&>th]:text-xs [&>th]:uppercase [&>th]:tracking-wide">
-							<th className="w-10">
-								<Checkbox
-									checked={allChecked}
-									indeterminate={someChecked && !allChecked}
-									onCheckedChange={toggleAll}
-									aria-label={t`Select all`}
-								/>
-							</th>
-							<th>
-								<Trans>Company / Role</Trans>
-							</th>
-							<th>
-								<Trans>Stage</Trans>
-							</th>
-							<th>
-								<Trans>Location</Trans>
-							</th>
-							<th>
-								<Trans>Salary</Trans>
-							</th>
-							<th>
-								<Trans>Tags</Trans>
-							</th>
-							<th>
-								<Trans>Source</Trans>
-							</th>
-							<th>
-								<Trans>Applied</Trans>
-							</th>
-							<th className="w-10">
-								<span className="sr-only">
-									<Trans>Actions</Trans>
-								</span>
-							</th>
-						</tr>
-					</thead>
-					<tbody>
-						{rows.map((app) => {
-							const stage = stageOf(app.status);
-							return (
-								<tr
-									key={app.id}
-									className={cn(
-										"border-border border-t transition-colors hover:bg-muted/40",
-										selected.has(app.id) && "bg-primary/5",
-									)}
-								>
-									<td className="px-3 py-2">
-										<Checkbox
-											checked={selected.has(app.id)}
-											onCheckedChange={() => toggleOne(app.id)}
-											aria-label={t`Select ${app.company}`}
-										/>
-									</td>
-									<td className="px-3 py-2">
-										<button type="button" className="flex items-center gap-2.5 text-left" onClick={() => onOpen(app)}>
-											<span
-												className={cn(
-													"flex size-7 shrink-0 items-center justify-center rounded-md bg-sunken font-semibold text-[11px] text-ink-2",
-												)}
-											>
-												{getInitials(app.company)}
-											</span>
-											<div className="min-w-0">
-												<div className="truncate font-medium hover:underline">{app.role}</div>
-												<div className="truncate text-muted-foreground text-xs">{app.company}</div>
-											</div>
-										</button>
-									</td>
-									<td className="whitespace-nowrap px-3 py-2">
-										<span className="inline-flex items-center gap-1.5">
-											<span className="size-2 rounded-sm" style={{ background: stage?.color }} />
-											{stage?.label ?? app.status}
-										</span>
-									</td>
-									<td className="whitespace-nowrap px-3 py-2 text-muted-foreground">{app.location || "—"}</td>
-									<td className="whitespace-nowrap px-3 py-2 font-medium">{app.salary || "—"}</td>
-									<td className="px-3 py-2">
-										<div className="flex max-w-40 flex-wrap gap-1">
-											{app.tags.slice(0, 2).map((tag) => (
-												<Badge key={tag} variant="neutral" className="text-[10px]">
-													{tag}
-												</Badge>
-											))}
-											{app.tags.length > 2 && (
-												<span className="text-muted-foreground text-xs">+{app.tags.length - 2}</span>
-											)}
-										</div>
-									</td>
-									<td className="whitespace-nowrap px-3 py-2 text-muted-foreground">{app.source || "—"}</td>
-									<td className="whitespace-nowrap px-3 py-2 text-muted-foreground">
-										{formatDate(latestStageDate(app.activity, "applied") ?? app.appliedAt)}
-									</td>
-									<td className="px-1 py-2">
-										<ApplicationActionsMenu application={app} onEdit={onEdit} />
-									</td>
-								</tr>
-							);
-						})}
-					</tbody>
-				</table>
-			</div>
-
-			{/* Mobile: stacked cards (same paginated rows), tap to open. */}
-			<div className="flex min-h-0 flex-1 flex-col gap-2 overflow-auto sm:hidden">
-				{rows.map((app) => {
-					const stage = stageOf(app.status);
-					return (
-						<div
-							key={app.id}
-							className={cn(
-								"flex items-center gap-3 rounded-xl border border-border p-3",
-								selected.has(app.id) && "bg-primary/5",
-							)}
-						>
-							<Checkbox
-								checked={selected.has(app.id)}
-								onCheckedChange={() => toggleOne(app.id)}
-								aria-label={t`Select ${app.company}`}
-							/>
-							<button
-								type="button"
-								className="flex min-w-0 flex-1 items-center gap-2.5 text-left"
-								onClick={() => onOpen(app)}
-							>
-								<span
-									className={cn(
-										"flex size-8 shrink-0 items-center justify-center rounded-md bg-sunken font-semibold text-[11px] text-ink-2",
-									)}
-								>
-									{getInitials(app.company)}
-								</span>
-								<div className="min-w-0 flex-1">
-									<div className="truncate font-medium text-sm">{app.role}</div>
-									<div className="truncate text-muted-foreground text-xs">{app.company}</div>
-									<div className="mt-1 flex items-center gap-1.5 text-xs">
-										<span className="size-2 shrink-0 rounded-sm" style={{ background: stage?.color }} />
-										<span className="text-muted-foreground">{stage?.label ?? app.status}</span>
-										{app.salary && <span className="truncate font-medium">· {app.salary}</span>}
-									</div>
-								</div>
-							</button>
-							<ApplicationActionsMenu application={app} onEdit={onEdit} />
-						</div>
-					);
-				})}
-			</div>
-
-			<div className="flex items-center gap-3 text-muted-foreground text-sm">
-				<span>
-					<Trans>
-						Showing {rows.length} of {applications.length}
-					</Trans>
-				</span>
-				{pageCount > 1 && (
-					<div className="ms-auto flex items-center gap-1.5">
-						<Button size="sm" variant="secondary" disabled={safePage === 0} onClick={() => setPage(safePage - 1)}>
-							‹
-						</Button>
-						<span className="text-xs">
-							{safePage + 1} / {pageCount}
-						</span>
-						<Button
-							size="sm"
-							variant="secondary"
-							disabled={safePage >= pageCount - 1}
-							onClick={() => setPage(safePage + 1)}
-						>
-							›
-						</Button>
-					</div>
-				)}
-			</div>
-		</div>
-	);
-}
-
-function AddTagPopover({ onAdd }: { onAdd: (tag: string) => void }) {
-	const [value, setValue] = useState("");
-	const [open, setOpen] = useState(false);
-
-	const submit = () => {
-		const tag = value.trim();
-		if (!tag) return;
-		onAdd(tag);
-		setValue("");
-		setOpen(false);
-	};
-
-	return (
-		<Popover open={open} onOpenChange={setOpen}>
-			<PopoverTrigger
-				render={
-					<Button size="sm" variant="secondary" className="h-7">
-						<TagIcon />
-						<Trans>Add tag</Trans>
-					</Button>
-				}
-			/>
-			<PopoverContent align="start" className="w-56 p-2">
-				<div className="flex gap-2">
-					<Input
-						autoFocus
-						value={value}
-						placeholder={t`New tag…`}
-						onChange={(event) => setValue(event.target.value)}
-						onKeyDown={(event) => event.key === "Enter" && submit()}
-					/>
-					<Button size="sm" onClick={submit}>
-						<Trans>Add</Trans>
-					</Button>
-				</div>
-			</PopoverContent>
-		</Popover>
-	);
-}
diff --git a/apps/web/src/features/applications/csv-export.test.ts b/apps/web/src/features/applications/csv-export.test.ts
index a0896f9c4..9fa76d69b 100644
--- a/apps/web/src/features/applications/csv-export.test.ts
+++ b/apps/web/src/features/applications/csv-export.test.ts
@@ -8,6 +8,11 @@ const application: Application = {
 	role: "Engineer",
 	status: "interview",
 	archived: false,
+	closedReason: null,
+	coverLetterId: null,
+	sentResumeVersionId: null,
+	sentCheckScore: null,
+	requirements: [],
 	location: "Berlin",
 	salary: "€70,000",
 	source: "Referral",
diff --git a/apps/web/src/features/applications/csv.test.ts b/apps/web/src/features/applications/csv.test.ts
index 21bb21a69..525543a26 100644
--- a/apps/web/src/features/applications/csv.test.ts
+++ b/apps/web/src/features/applications/csv.test.ts
@@ -1,5 +1,5 @@
 import { describe, expect, it } from "vitest";
-import { mapCsvToApplications, parseCsv } from "./csv";
+import { autoMapHeaders, mapCsvToApplications, parseCsv, rowsToCsv } from "./csv";
 
 describe("parseCsv", () => {
 	it("parses quoted fields with commas and newlines", () => {
@@ -77,3 +77,24 @@ describe("mapCsvToApplications", () => {
 		expect(contactsSkipped).toBe(1);
 	});
 });
+
+describe("column matching", () => {
+	const table = parseCsv(
+		"Employer,Job Title,Status,Archived,Mystery\nAcme,Designer,rejected,false,x\nKiln,Engineer,applied,true,y\n,No company,saved,false,z",
+	);
+
+	it("matches known headers automatically and leaves the rest out", () => {
+		expect(autoMapHeaders(table[0] ?? [])).toEqual(["company", "role", "status", "archived", null]);
+	});
+
+	it("uses the confirmed match, reads retired stages as closed, and keeps skipped rows to download", () => {
+		const result = mapCsvToApplications(table, ["company", "role", "status", "archived", "notes"]);
+
+		expect(result.rows.map((row) => [row.company, row.status, row.notes])).toEqual([
+			["Acme", "closed", "x"],
+			["Kiln", "closed", "y"],
+		]);
+		expect(result.skippedRows).toEqual([["", "No company", "saved", "false", "z"]]);
+		expect(rowsToCsv(["Company", "Role"], [["", 'Say "hi"']])).toBe('"Company","Role"\r\n"","Say ""hi"""\r\n');
+	});
+});
diff --git a/apps/web/src/features/applications/csv.ts b/apps/web/src/features/applications/csv.ts
index da4ecad3f..dcd87337a 100644
--- a/apps/web/src/features/applications/csv.ts
+++ b/apps/web/src/features/applications/csv.ts
@@ -1,7 +1,7 @@
 import type { ApplicationStatus, Contact } from "@reactive-resume/schema/applications/data";
 import type { Application } from "./types";
 import {
-	applicationStatusSchema,
+	applicationStatusInputSchema,
 	contactSchema,
 	INTERVIEW_KINDS,
 	STAGES,
@@ -78,8 +78,13 @@ type CsvApplication = ParsedApplication & {
 	contactType?: string;
 	contactEmail?: string;
 	contactPhone?: string;
+	/** Exports from before the closed stage mark archived applications here. */
+	archived?: string;
 };
 
+/** A column's destination, or null to leave the column out. */
+export type CsvField = keyof CsvApplication;
+
 function dateOnly(value: string) {
 	if (!/^\d{4}-\d{2}-\d{2}$/.test(value)) return undefined;
 	const [year, month, day] = value.split("-").map(Number);
@@ -118,8 +123,39 @@ const HEADER_ALIASES: Record<string, keyof CsvApplication> = {
 	"contact type": "contactType",
 	"contact email": "contactEmail",
 	"contact phone": "contactPhone",
+	archived: "archived",
 };
 
+/** The fields a column can be matched to, in the order the match list offers them. */
+export const CSV_FIELDS: readonly CsvField[] = [
+	"company",
+	"role",
+	"status",
+	"stageEnteredAt",
+	"location",
+	"salary",
+	"source",
+	"sourceUrl",
+	"notes",
+	"tags",
+	"contactName",
+	"contactRole",
+	"contactType",
+	"contactEmail",
+	"contactPhone",
+	"archived",
+];
+
+/** Each header's field by name (case and spacing ignored), or null when nothing matches. */
+export const autoMapHeaders = (headers: readonly string[]): (CsvField | null)[] =>
+	headers.map((header) => HEADER_ALIASES[header.trim().toLowerCase()] ?? null);
+
+const csvLine = (cells: readonly string[]) => cells.map((cell) => `"${cell.replaceAll('"', '""')}"`).join(",");
+
+/** Rows back to CSV text (for downloading the rows an import skipped), header first. */
+export const rowsToCsv = (headers: readonly string[], rows: readonly string[][]) =>
+	`${[headers, ...rows].map(csvLine).join("\r\n")}\r\n`;
+
 // Values a spreadsheet would evaluate as a formula: leading =, +, -, @ (and full-width variants),
 // possibly hidden behind whitespace/control characters, or a leading tab/newline.
 function isFormulaLike(value: string) {
@@ -152,6 +188,8 @@ function parseTags(value: string) {
 export type CsvMapResult = {
 	rows: ParsedApplication[];
 	skipped: number;
+	/** The source rows left out (no company or role), to download and fix. */
+	skippedRows: string[][];
 	contactsSkipped: number;
 	headers: string[];
 	recognized: string[];
@@ -161,19 +199,20 @@ export type CsvMapResult = {
 // are skipped (and counted). Status is coerced to a valid stage or dropped. A contact that fails
 // validation (bad email, or contact columns with no name) is dropped on its own — the application
 // still imports, since losing the whole row would silently discard company/role/salary/tags too.
-export function mapCsvToApplications(table: string[][]): CsvMapResult {
+export function mapCsvToApplications(table: string[][], mapping?: readonly (CsvField | null)[]): CsvMapResult {
 	const [headerRow, ...dataRows] = table;
-	if (!headerRow) return { rows: [], skipped: 0, contactsSkipped: 0, headers: [], recognized: [] };
+	if (!headerRow) return { rows: [], skipped: 0, skippedRows: [], contactsSkipped: 0, headers: [], recognized: [] };
 
 	const headers = headerRow.map((h) => h.trim());
-	const fieldFor = headers.map((h) => HEADER_ALIASES[h.toLowerCase()]);
-	const recognized = [...new Set(fieldFor.filter((f): f is keyof CsvApplication => !!f))];
+	// The confirmed match, else the automatic one.
+	const fieldFor = mapping ?? autoMapHeaders(headers);
+	const recognized = [...new Set(fieldFor.filter((f): f is CsvField => !!f))];
 	const isReactiveResumeExport = ["Stage History", "Timeline", "Archived", "Created At", "Updated At"].every((header) =>
 		headers.includes(header),
 	);
 
 	const rows: ParsedApplication[] = [];
-	let skipped = 0;
+	const skippedRows: string[][] = [];
 	let contactsSkipped = 0;
 
 	for (const raw of dataRows) {
@@ -185,7 +224,7 @@ export function mapCsvToApplications(table: string[][]): CsvMapResult {
 			if (!value) return;
 			if (field === "tags") record.tags = parseTags(value);
 			else if (field === "status") {
-				const parsed = applicationStatusSchema.safeParse(value.toLowerCase());
+				const parsed = applicationStatusInputSchema.safeParse(value.toLowerCase());
 				if (parsed.success) record.status = parsed.data;
 			} else if (field === "stageEnteredAt") {
 				record.stageEnteredAt = dateOnly(value);
@@ -193,11 +232,13 @@ export function mapCsvToApplications(table: string[][]): CsvMapResult {
 		});
 
 		if (!record.company || !record.role) {
-			skipped++;
+			skippedRows.push(raw);
 			continue;
 		}
 
-		const { contactName, contactRole, contactType, contactEmail, contactPhone, ...application } = record;
+		const { contactName, contactRole, contactType, contactEmail, contactPhone, archived, ...application } = record;
+		// Archived applications from older exports are closed ones.
+		if (archived?.toLowerCase() === "true") application.status = "closed";
 		if (contactName || contactRole || contactType || contactEmail || contactPhone) {
 			const contact = contactSchema.safeParse({
 				name: contactName,
@@ -212,7 +253,7 @@ export function mapCsvToApplications(table: string[][]): CsvMapResult {
 		rows.push(application as ParsedApplication);
 	}
 
-	return { rows, skipped, contactsSkipped, headers, recognized };
+	return { rows, skipped: skippedRows.length, skippedRows, contactsSkipped, headers, recognized };
 }
 
 export type ApplicationExportOptions = {
@@ -253,6 +294,7 @@ export function exportApplicationsCsv(applications: readonly Application[]): str
 		"Tags",
 		"Contacts",
 		"Notes",
+		"Closed Reason",
 		"Stage History",
 		"Timeline",
 		"Archived",
@@ -289,6 +331,7 @@ export function exportApplicationsCsv(applications: readonly Application[]): str
 				})
 				.join("\n"),
 			application.notes ?? "",
+			application.closedReason ?? "",
 			stages.map((entry) => `${stageLabel(entry.stage)} (${dateOnly(entry.at)})`).join(" → "),
 			timeline.map((entry) => `${dateOnly(entry.at)}: ${timelineText(entry)}`).join("\n"),
 			String(application.archived),
diff --git a/apps/web/src/features/applications/ics.test.ts b/apps/web/src/features/applications/ics.test.ts
new file mode 100644
index 000000000..e0b12622e
--- /dev/null
+++ b/apps/web/src/features/applications/ics.test.ts
@@ -0,0 +1,43 @@
+import { describe, expect, it } from "vitest";
+import { buildIcs } from "./ics";
+
+describe("buildIcs", () => {
+	it("writes one UTC event with escaped text and CRLF lines", () => {
+		const ics = buildIcs(
+			{
+				uid: "i1",
+				title: "Panel interview, Lumen",
+				start: new Date("2026-10-02T12:00:00Z"),
+				end: new Date("2026-10-02T13:00:00Z"),
+				location: "Berlin; Room 4",
+				description: "Bring the portfolio\\nand notes",
+			},
+			new Date("2026-09-28T08:30:00Z"),
+		);
+
+		expect(ics.split("\r\n")).toEqual([
+			"BEGIN:VCALENDAR",
+			"VERSION:2.0",
+			"PRODID:-//Reactive Resume//Applications//EN",
+			"CALSCALE:GREGORIAN",
+			"BEGIN:VEVENT",
+			"UID:i1@reactive-resume",
+			"DTSTAMP:20260928T083000Z",
+			"DTSTART:20261002T120000Z",
+			"DTEND:20261002T130000Z",
+			"SUMMARY:Panel interview\\, Lumen",
+			"LOCATION:Berlin\\; Room 4",
+			"DESCRIPTION:Bring the portfolio\\\\nand notes",
+			"END:VEVENT",
+			"END:VCALENDAR",
+			"",
+		]);
+	});
+
+	it("folds long lines at 75 characters", () => {
+		const ics = buildIcs({ uid: "x", title: "A".repeat(100), start: new Date(0), end: new Date(0) });
+		const summary = ics.split("\r\n").filter((line) => line.startsWith("SUMMARY") || line.startsWith(" "));
+		expect(summary[0]).toHaveLength(75);
+		expect(summary[1]?.startsWith(" ")).toBe(true);
+	});
+});
diff --git a/apps/web/src/features/applications/ics.ts b/apps/web/src/features/applications/ics.ts
new file mode 100644
index 000000000..046373cee
--- /dev/null
+++ b/apps/web/src/features/applications/ics.ts
@@ -0,0 +1,52 @@
+type CalendarEvent = {
+	uid: string;
+	title: string;
+	start: Date;
+	end: Date;
+	location?: string;
+	description?: string;
+};
+
+// RFC 5545: commas, semicolons and backslashes are escaped, line breaks become \n.
+const escapeText = (value: string) =>
+	value.replace(/\\/g, "\\\\").replace(/;/g, "\\;").replace(/,/g, "\\,").replace(/\r?\n/g, "\\n");
+
+const utcStamp = (date: Date) =>
+	date
+		.toISOString()
+		.replace(/[-:]/g, "")
+		.replace(/\.\d{3}/, "");
+
+// Lines longer than 75 octets fold onto continuation lines that start with a space.
+function fold(line: string) {
+	const parts: string[] = [];
+	let rest = line;
+	while (rest.length > 75) {
+		parts.push(rest.slice(0, 75));
+		rest = ` ${rest.slice(75)}`;
+	}
+	parts.push(rest);
+	return parts.join("\r\n");
+}
+
+/** One event as an .ics file's text, in UTC, for "Add to calendar". */
+export function buildIcs(event: CalendarEvent, now = new Date()): string {
+	const lines = [
+		"BEGIN:VCALENDAR",
+		"VERSION:2.0",
+		"PRODID:-//Reactive Resume//Applications//EN",
+		"CALSCALE:GREGORIAN",
+		"BEGIN:VEVENT",
+		`UID:${event.uid}@reactive-resume`,
+		`DTSTAMP:${utcStamp(now)}`,
+		`DTSTART:${utcStamp(event.start)}`,
+		`DTEND:${utcStamp(event.end)}`,
+		`SUMMARY:${escapeText(event.title)}`,
+		...(event.location ? [`LOCATION:${escapeText(event.location)}`] : []),
+		...(event.description ? [`DESCRIPTION:${escapeText(event.description)}`] : []),
+		"END:VEVENT",
+		"END:VCALENDAR",
+	];
+
+	return `${lines.map(fold).join("\r\n")}\r\n`;
+}
diff --git a/apps/web/src/features/applications/insights.test.ts b/apps/web/src/features/applications/insights.test.ts
index 7a682d6d3..67a5e4fc3 100644
--- a/apps/web/src/features/applications/insights.test.ts
+++ b/apps/web/src/features/applications/insights.test.ts
@@ -1,6 +1,6 @@
 import type { StageCount } from "./insights";
 import { describe, expect, it } from "vitest";
-import { computeInsights } from "./insights";
+import { computeInsights, computeOutcomes } from "./insights";
 
 const byStage: StageCount[] = [
 	{ status: "saved", count: 2 },
@@ -8,11 +8,11 @@ const byStage: StageCount[] = [
 	{ status: "screening", count: 2 },
 	{ status: "interview", count: 1 },
 	{ status: "offer", count: 1 },
-	{ status: "rejected", count: 2 },
+	{ status: "closed", count: 2 },
 ];
 
 describe("computeInsights", () => {
-	it("totals every stage including rejected", () => {
+	it("totals every stage including closed", () => {
 		expect(computeInsights(byStage).total).toBe(11);
 	});
 
@@ -37,3 +37,64 @@ describe("computeInsights", () => {
 		expect(empty.funnel[0]?.pct).toBe(0);
 	});
 });
+
+describe("computeOutcomes", () => {
+	const at = (day: number) => new Date(Date.UTC(2026, 8, day, 12));
+	const stage = (stage: StageCount["status"], day: number) => ({
+		id: `${stage}${day}`,
+		type: "stage" as const,
+		stage,
+		at: at(day),
+	});
+
+	const applications = [
+		// Sent on the 1st, heard back (screening) on the 5th, then turned down.
+		{
+			status: "closed" as const,
+			closedReason: "not-selected" as const,
+			resumeId: "tailored",
+			appliedAt: at(1),
+			activity: [stage("applied", 1), stage("screening", 5), stage("closed", 9)],
+		},
+		// Sent on the 2nd, interview on the 12th.
+		{
+			status: "interview" as const,
+			closedReason: null,
+			resumeId: "base",
+			appliedAt: at(2),
+			activity: [stage("saved", 1), stage("applied", 2), stage("interview", 12)],
+		},
+		// Sent, no reply yet.
+		{
+			status: "applied" as const,
+			closedReason: null,
+			resumeId: "base",
+			appliedAt: at(3),
+			activity: [stage("applied", 3)],
+		},
+		// Never sent.
+		{ status: "saved" as const, closedReason: null, resumeId: null, appliedAt: at(4), activity: [stage("saved", 4)] },
+	];
+
+	const outcomes = computeOutcomes(applications, (application) => application.resumeId === "tailored");
+
+	it("counts every application that reached each stage, closed ones included", () => {
+		expect(outcomes.funnel).toEqual([
+			{ status: "applied", reached: 3 },
+			{ status: "screening", reached: 2 },
+			{ status: "interview", reached: 1 },
+			{ status: "offer", reached: 0 },
+		]);
+	});
+
+	it("measures replies and the median days to the first one", () => {
+		expect(outcomes.sent).toBe(3);
+		expect(outcomes.heardBack).toBe(2);
+		expect(outcomes.medianDaysToReply).toBe(7); // 4 and 10 days
+	});
+
+	it("compares resumes made for the job with the base resume", () => {
+		expect(outcomes.tailored).toEqual({ sent: 1, replied: 1 });
+		expect(outcomes.base).toEqual({ sent: 2, replied: 1 });
+	});
+});
diff --git a/apps/web/src/features/applications/insights.ts b/apps/web/src/features/applications/insights.ts
index 4c752bb11..e39c523c4 100644
--- a/apps/web/src/features/applications/insights.ts
+++ b/apps/web/src/features/applications/insights.ts
@@ -1,16 +1,18 @@
 import type { ApplicationStatus } from "@reactive-resume/schema/applications/data";
+import type { Application } from "./types";
 import { STAGES } from "@reactive-resume/schema/applications/data";
+import { PIPELINE } from "./stages";
 
 export type StageCount = { status: ApplicationStatus; count: number };
 
-// The forward pipeline (rejected is a terminal outcome, handled separately).
+// The forward pipeline (closed is a terminal outcome, handled separately).
 const FORWARD: ApplicationStatus[] = ["saved", "applied", "screening", "interview", "offer"];
 
 export type Insights = {
 	total: number;
 	tiles: { label: string; value: string; sub: string }[];
 	funnel: { label: string; color: string; count: number; reached: number; pct: number; conv: string }[];
-	rejected: number;
+	closed: number;
 };
 
 // Pure function of the raw per-stage counts, so it's trivially testable and shared by every
@@ -20,7 +22,7 @@ export function computeInsights(byStage: StageCount[]): Insights {
 	const counts = new Map<ApplicationStatus, number>(byStage.map((row) => [row.status, row.count]));
 	const at = (status: ApplicationStatus) => counts.get(status) ?? 0;
 	const total = byStage.reduce((sum, row) => sum + row.count, 0);
-	const rejected = at("rejected");
+	const closed = at("closed");
 
 	// reached[i] = active apps that got at least as far as FORWARD[i].
 	const reached = FORWARD.map((_, i) => FORWARD.slice(i).reduce((sum, s) => sum + at(s), 0));
@@ -49,10 +51,10 @@ export function computeInsights(byStage: StageCount[]): Insights {
 		{ label: "Applied", value: String(appliedOn), sub: "past saved" },
 		{ label: "Response rate", value: `${responseRate}%`, sub: "reached screening" },
 		{ label: "Interviews", value: String(interviews), sub: "interview or beyond" },
-		{ label: "Offers", value: String(offers), sub: rejected > 0 ? `${rejected} rejected` : "so far" },
+		{ label: "Offers", value: String(offers), sub: closed > 0 ? `${closed} closed` : "so far" },
 	];
 
-	return { total, tiles, funnel, rejected };
+	return { total, tiles, funnel, closed };
 }
 
 export type TimelineBucket = { label: string; count: number };
@@ -81,3 +83,91 @@ export function computeTimeline(dates: Date[], weeks = 8): TimelineBucket[] {
 
 	return buckets.map(({ label, count }) => ({ label, count }));
 }
+
+type OutcomeSource = Pick<Application, "status" | "closedReason" | "activity" | "appliedAt" | "resumeId">;
+
+const DAY_MS = 86_400_000;
+const REPLY_STAGES = new Set<ApplicationStatus>(["screening", "interview", "offer"]);
+
+const stageEntries = (application: OutcomeSource) =>
+	application.activity
+		.flatMap((entry) => (entry.type === "stage" ? [{ stage: entry.stage, at: new Date(entry.at) }] : []))
+		.sort((a, b) => a.at.getTime() - b.at.getTime());
+
+/** How far along the pipeline an application ever got, from its stage history; closed ones keep their furthest stage. */
+function furthestStage(application: OutcomeSource) {
+	const stages = [...stageEntries(application).map((entry) => entry.stage), application.status];
+	return Math.max(...stages.map((stage) => PIPELINE.indexOf(stage)));
+}
+
+/** When the application was sent: its first stage at Applied or beyond, else the applied date on record. */
+function sentAt(application: OutcomeSource) {
+	const applied = PIPELINE.indexOf("applied");
+	return (
+		stageEntries(application).find((entry) => PIPELINE.indexOf(entry.stage) >= applied)?.at ??
+		new Date(application.appliedAt)
+	);
+}
+
+/** The first reply after sending: moving on to screening or beyond, or being turned down. */
+function firstReply(application: OutcomeSource) {
+	const since = sentAt(application).getTime();
+	return stageEntries(application).find(
+		(entry) =>
+			entry.at.getTime() >= since &&
+			(REPLY_STAGES.has(entry.stage) || (entry.stage === "closed" && application.closedReason === "not-selected")),
+	)?.at;
+}
+
+function median(values: number[]) {
+	if (values.length === 0) return null;
+	const sorted = [...values].sort((a, b) => a - b);
+	const middle = Math.floor(sorted.length / 2);
+	return sorted.length % 2 ? (sorted[middle] ?? null) : ((sorted[middle - 1] ?? 0) + (sorted[middle] ?? 0)) / 2;
+}
+
+export type Outcomes = {
+	/** Applications that ever reached each stage from Applied on, closed ones included. */
+	funnel: { status: ApplicationStatus; reached: number }[];
+	sent: number;
+	heardBack: number;
+	medianDaysToReply: number | null;
+	/** Sent applications whose linked resume was made for them, against those sent with another resume. */
+	tailored: { sent: number; replied: number };
+	base: { sent: number; replied: number };
+};
+
+/**
+ * How applications turned out: the funnel of stages reached, how many heard back and how fast, and whether
+ * resumes made for the job got more replies than the base resume. `isTailored` says whether an application's
+ * linked resume was made for it.
+ */
+export function computeOutcomes(
+	applications: readonly OutcomeSource[],
+	isTailored: (application: OutcomeSource) => boolean,
+): Outcomes {
+	const sent = applications.filter((application) => furthestStage(application) >= PIPELINE.indexOf("applied"));
+	const replies = sent.map((application) => ({ application, reply: firstReply(application) }));
+	const withReplies = replies.filter((entry) => entry.reply !== undefined);
+
+	const compare = (tailored: boolean) => {
+		const group = replies.filter(({ application }) => application.resumeId && isTailored(application) === tailored);
+		return { sent: group.length, replied: group.filter((entry) => entry.reply !== undefined).length };
+	};
+
+	return {
+		funnel: (["applied", "screening", "interview", "offer"] as const).map((status) => ({
+			status,
+			reached: sent.filter((application) => furthestStage(application) >= PIPELINE.indexOf(status)).length,
+		})),
+		sent: sent.length,
+		heardBack: withReplies.length,
+		medianDaysToReply: median(
+			withReplies.map(({ application, reply }) =>
+				Math.round(((reply?.getTime() ?? 0) - sentAt(application).getTime()) / DAY_MS),
+			),
+		),
+		tailored: compare(true),
+		base: compare(false),
+	};
+}
diff --git a/apps/web/src/features/applications/next-step.test.ts b/apps/web/src/features/applications/next-step.test.ts
new file mode 100644
index 000000000..a4596676e
--- /dev/null
+++ b/apps/web/src/features/applications/next-step.test.ts
@@ -0,0 +1,63 @@
+import type { Application } from "./types";
+import { describe, expect, it } from "vitest";
+import { getNextStep, isOverdue } from "./next-step";
+
+const NOW = new Date("2026-09-28T12:00:00Z");
+const day = (offset: number) => new Date(NOW.getTime() + offset * 86_400_000);
+
+type Source = Parameters<typeof getNextStep>[0];
+
+const application = (patch: Partial<Source> = {}): Source => ({
+	status: "applied",
+	activity: [{ id: "s1", type: "stage", stage: "applied", at: day(-3) }],
+	followUpAt: null,
+	followUpNote: null,
+	appliedAt: day(-3),
+	...patch,
+});
+
+const interview = (at: Date, id = "i1"): Application["activity"][number] => ({
+	id,
+	type: "interview",
+	at,
+	kind: "onsite",
+	durationMinutes: 60,
+	location: "",
+	notes: "",
+});
+
+describe("getNextStep", () => {
+	it("puts the earliest interview still to come first", () => {
+		const step = getNextStep(
+			application({
+				status: "interview",
+				followUpAt: day(1),
+				activity: [interview(day(-2), "past"), interview(day(5), "later"), interview(day(2), "soon")],
+			}),
+			NOW,
+		);
+		expect(step).toMatchObject({ kind: "interview", interview: { id: "soon" } });
+	});
+
+	it("falls back to the follow-up date, overdue once it has passed", () => {
+		expect(getNextStep(application({ followUpAt: day(2), followUpNote: "Email Maya" }), NOW)).toMatchObject({
+			kind: "follow-up",
+			note: "Email Maya",
+			overdue: false,
+		});
+		const late = getNextStep(application({ followUpAt: day(-1) }), NOW);
+		expect(late).toMatchObject({ kind: "follow-up", overdue: true });
+		expect(isOverdue(late)).toBe(true);
+	});
+
+	it("suggests a follow-up after ten days without a reply, and counts the wait before that", () => {
+		expect(getNextStep(application(), NOW)).toEqual({ kind: "waiting", days: 3 });
+		const quiet = application({ activity: [{ id: "s1", type: "stage", stage: "applied", at: day(-12) }] });
+		expect(getNextStep(quiet, NOW)).toEqual({ kind: "no-reply", days: 12 });
+	});
+
+	it("has nothing next for saved and closed applications beyond their state", () => {
+		expect(getNextStep(application({ status: "saved" }), NOW)).toEqual({ kind: "not-applied" });
+		expect(getNextStep(application({ status: "closed", followUpAt: day(1) }), NOW)).toEqual({ kind: "closed" });
+	});
+});
diff --git a/apps/web/src/features/applications/next-step.ts b/apps/web/src/features/applications/next-step.ts
new file mode 100644
index 000000000..e0830cc0b
--- /dev/null
+++ b/apps/web/src/features/applications/next-step.ts
@@ -0,0 +1,130 @@
+import type { InterviewTimelineEntry } from "@reactive-resume/schema/applications/data";
+import type { IconName } from "@reactive-resume/ui/components/icon";
+import type { Application } from "./types";
+import { plural, t } from "@lingui/core/macro";
+import { interviewKindOf, isInterview } from "./interviews";
+import { getClosedReasonLabel } from "./stages";
+
+const DAY_MS = 86_400_000;
+
+/** Days without a reply after applying before a follow-up is suggested. */
+const FOLLOW_UP_AFTER_DAYS = 10;
+
+type NextStepSource = Pick<Application, "status" | "activity" | "followUpAt" | "followUpNote" | "appliedAt">;
+
+/**
+ * What an application needs next, derived rather than stored: the earliest interview still to come, else the
+ * follow-up date, else how long it has been waiting. Closed applications need nothing.
+ */
+export type NextStep =
+	| { kind: "interview"; interview: InterviewTimelineEntry; at: Date }
+	| { kind: "follow-up"; at: Date; note: string; overdue: boolean }
+	| { kind: "no-reply"; days: number }
+	| { kind: "waiting"; days: number }
+	| { kind: "not-applied" }
+	| { kind: "closed" };
+
+/** When the application entered its current stage (its latest entry for that stage), or when it was added. */
+export function stageSince(application: Pick<Application, "status" | "activity" | "appliedAt">): Date {
+	const entries = application.activity
+		.filter((entry) => entry.type === "stage" && entry.stage === application.status)
+		.map((entry) => new Date(entry.at).getTime());
+	return new Date(entries.length > 0 ? Math.max(...entries) : new Date(application.appliedAt).getTime());
+}
+
+const daysBetween = (from: Date, to: Date) => Math.max(0, Math.floor((to.getTime() - from.getTime()) / DAY_MS));
+
+export function getNextStep(application: NextStepSource, now = new Date()): NextStep {
+	if (application.status === "closed") return { kind: "closed" };
+
+	const upcoming = application.activity
+		.filter(isInterview)
+		.map((interview) => ({ interview, at: new Date(interview.at) }))
+		.filter(({ interview, at }) => at.getTime() + interview.durationMinutes * 60_000 >= now.getTime())
+		.sort((a, b) => a.at.getTime() - b.at.getTime())[0];
+	if (upcoming) return { kind: "interview", ...upcoming };
+
+	if (application.followUpAt) {
+		const at = new Date(application.followUpAt);
+		return { kind: "follow-up", at, note: application.followUpNote ?? "", overdue: at.getTime() < now.getTime() };
+	}
+
+	if (application.status === "saved") return { kind: "not-applied" };
+
+	const days = daysBetween(stageSince(application), now);
+	if (application.status === "applied" && days >= FOLLOW_UP_AFTER_DAYS) return { kind: "no-reply", days };
+	return { kind: "waiting", days };
+}
+
+/** Whether a next step needs attention now: an overdue follow-up, or no reply for too long. */
+export const isOverdue = (step: NextStep) => step.kind === "no-reply" || (step.kind === "follow-up" && step.overdue);
+
+export type NextStepText = { icon: IconName; title: string; sub: string; tone: "normal" | "warn" | "muted" };
+
+const formatWhen = (date: Date, locale: string, withTime: boolean) =>
+	date.toLocaleString(locale, {
+		weekday: "short",
+		day: "numeric",
+		month: "short",
+		...(withTime ? { hour: "2-digit", minute: "2-digit" } : {}),
+	});
+
+/** How a next step reads in the list, on cards and in the detail sheet. */
+export function describeNextStep(
+	step: NextStep,
+	application: Pick<Application, "status" | "closedReason">,
+	locale: string,
+): NextStepText {
+	switch (step.kind) {
+		case "interview": {
+			const kind = interviewKindOf(step.interview.kind)?.label ?? step.interview.kind;
+			const where = step.interview.location ? ` · ${step.interview.location}` : "";
+			return {
+				icon: "event",
+				title: t`${kind} interview`,
+				sub: `${formatWhen(step.at, locale, true)}${where}`,
+				tone: "normal",
+			};
+		}
+		case "follow-up":
+			return {
+				icon: step.overdue ? "schedule" : "event",
+				title: step.note || t`Follow up`,
+				sub: formatWhen(step.at, locale, false),
+				tone: step.overdue ? "warn" : "normal",
+			};
+		case "no-reply":
+			return {
+				icon: "schedule",
+				title: plural(step.days, { one: "No reply in # day", other: "No reply in # days" }),
+				sub: t`A short follow-up is usually fine now`,
+				tone: "warn",
+			};
+		case "waiting":
+			return application.status === "applied"
+				? {
+						icon: "hourglass_empty",
+						title:
+							step.days === 0
+								? t`Applied today`
+								: plural(step.days, { one: "Applied # day ago", other: "Applied # days ago" }),
+						sub: "",
+						tone: "normal",
+					}
+				: {
+						icon: "hourglass_empty",
+						title: t`Waiting to hear back`,
+						sub: plural(step.days, { one: "For # day", other: "For # days" }),
+						tone: "normal",
+					};
+		case "not-applied":
+			return { icon: "bookmark", title: t`Not applied yet`, sub: "", tone: "muted" };
+		case "closed":
+			return {
+				icon: "check",
+				title: application.closedReason ? getClosedReasonLabel(application.closedReason) : t`Closed`,
+				sub: "",
+				tone: "muted",
+			};
+	}
+}
diff --git a/apps/web/src/features/applications/stages.ts b/apps/web/src/features/applications/stages.ts
new file mode 100644
index 000000000..99801eb17
--- /dev/null
+++ b/apps/web/src/features/applications/stages.ts
@@ -0,0 +1,50 @@
+import type { ApplicationClosedReason, ApplicationStatus } from "@reactive-resume/schema/applications/data";
+import { t } from "@lingui/core/macro";
+import { STAGES } from "@reactive-resume/schema/applications/data";
+
+/** The stages an application moves through; closed ends it from any of them. */
+export const PIPELINE: readonly ApplicationStatus[] = ["saved", "applied", "screening", "interview", "offer"];
+
+/** The list's group order: what needs you first, closed last. */
+export const LIST_ORDER: readonly ApplicationStatus[] = [
+	"interview",
+	"offer",
+	"screening",
+	"applied",
+	"saved",
+	"closed",
+];
+
+export const CLOSED_REASONS: readonly ApplicationClosedReason[] = [
+	"not-selected",
+	"withdrew",
+	"accepted-other",
+	"no-response",
+];
+
+export const getStageLabel = (status: ApplicationStatus) =>
+	({
+		saved: t`Saved`,
+		applied: t`Applied`,
+		screening: t`Screening`,
+		interview: t`Interview`,
+		offer: t`Offer`,
+		closed: t`Closed`,
+	})[status];
+
+export const getStageColor = (status: ApplicationStatus) =>
+	STAGES.find((stage) => stage.value === status)?.color ?? "var(--ink-3)";
+
+export const getClosedReasonLabel = (reason: ApplicationClosedReason) =>
+	({
+		"not-selected": t`Not selected`,
+		withdrew: t`I withdrew`,
+		"accepted-other": t`Accepted another offer`,
+		"no-response": t`No response`,
+	})[reason];
+
+/** The stage after this one in the pipeline, or null at Offer and for closed applications. */
+export function getNextStage(status: ApplicationStatus): ApplicationStatus | null {
+	const index = PIPELINE.indexOf(status);
+	return index === -1 ? null : (PIPELINE[index + 1] ?? null);
+}
diff --git a/apps/web/src/features/applications/use-application-actions.ts b/apps/web/src/features/applications/use-application-actions.ts
new file mode 100644
index 000000000..f542b17d0
--- /dev/null
+++ b/apps/web/src/features/applications/use-application-actions.ts
@@ -0,0 +1,89 @@
+import type { ApplicationClosedReason, ApplicationStatus } from "@reactive-resume/schema/applications/data";
+import type { Application } from "./types";
+import { t } from "@lingui/core/macro";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { toast } from "@reactive-resume/ui/components/toast";
+import { getOrpcErrorMessage } from "@/libs/error-message";
+import { orpc } from "@/libs/orpc/client";
+import { applicationsListQueryKey } from "./queries";
+import { getStageLabel } from "./stages";
+
+/** Refreshes everything that shows applications: the list, the open one, stats, tags and documents' job lines. */
+export function useInvalidateApplications() {
+	const queryClient = useQueryClient();
+
+	return (id?: string) => {
+		void queryClient.invalidateQueries({ queryKey: applicationsListQueryKey() });
+		void queryClient.invalidateQueries({ queryKey: orpc.applications.stats.queryKey() });
+		void queryClient.invalidateQueries({ queryKey: orpc.applications.tags.queryKey() });
+		void queryClient.invalidateQueries({ queryKey: orpc.documents.list.key() });
+		if (id) void queryClient.invalidateQueries({ queryKey: orpc.applications.getById.queryKey({ input: { id } }) });
+	};
+}
+
+const failed = (error: unknown) =>
+	toast.add({
+		type: "error",
+		description: getOrpcErrorMessage(error, { fallback: t`Something went wrong. Try again.` }),
+	});
+
+/**
+ * Stage changes, closing and deleting, shared by the list, board and detail sheet. A move shows at once (the list
+ * updates optimistically) and says so in a toast, whichever way it was made.
+ */
+export function useApplicationActions() {
+	const queryClient = useQueryClient();
+	const invalidate = useInvalidateApplications();
+	const listKey = applicationsListQueryKey();
+
+	const update = useMutation({
+		...orpc.applications.update.mutationOptions(),
+		onMutate: async (input) => {
+			await queryClient.cancelQueries({ queryKey: listKey });
+			const previous = queryClient.getQueryData<Application[]>(listKey);
+			const status = input.status as ApplicationStatus | undefined;
+			queryClient.setQueryData<Application[]>(listKey, (rows) =>
+				rows?.map(
+					(row): Application =>
+						row.id === input.id
+							? {
+									...row,
+									...(status ? { status } : {}),
+									...(input.closedReason !== undefined ? { closedReason: input.closedReason } : {}),
+								}
+							: row,
+				),
+			);
+			return { previous };
+		},
+		onError: (error, _input, context) => {
+			if (context?.previous) queryClient.setQueryData(listKey, context.previous);
+			failed(error);
+		},
+		onSettled: (_data, _error, input) => invalidate(input.id),
+	});
+
+	const remove = useMutation({
+		...orpc.applications.delete.mutationOptions(),
+		onSuccess: (_data, input) => {
+			invalidate(input.id);
+			toast.add({ description: t`Application deleted` });
+		},
+		onError: failed,
+	});
+
+	return {
+		update,
+		remove,
+		moveTo: (application: Pick<Application, "id">, status: ApplicationStatus) =>
+			update.mutate(
+				{ id: application.id, status },
+				{ onSuccess: () => toast.add({ description: t`Moved to ${getStageLabel(status)}` }) },
+			),
+		close: (application: Pick<Application, "id">, closedReason: ApplicationClosedReason) =>
+			update.mutate(
+				{ id: application.id, status: "closed", closedReason },
+				{ onSuccess: () => toast.add({ description: t`Application closed` }) },
+			),
+	};
+}
diff --git a/apps/web/src/features/documents/document-actions.tsx b/apps/web/src/features/documents/document-actions.tsx
index cf9e15994..5d862a58e 100644
--- a/apps/web/src/features/documents/document-actions.tsx
+++ b/apps/web/src/features/documents/document-actions.tsx
@@ -270,7 +270,7 @@ export function LinkApplicationDialog({ document, onClose }: LinkApplicationDial
 		}
 	};
 
-	const jobs = (applications ?? []).filter((application) => !application.archived);
+	const jobs = (applications ?? []).filter((application) => application.status !== "closed");
 
 	return (
 		<Dialog open={document !== null} onOpenChange={(open) => !open && onClose()}>
diff --git a/apps/web/src/features/documents/new-document-dialog.tsx b/apps/web/src/features/documents/new-document-dialog.tsx
index 31dcef4ea..f2dfe4574 100644
--- a/apps/web/src/features/documents/new-document-dialog.tsx
+++ b/apps/web/src/features/documents/new-document-dialog.tsx
@@ -27,6 +27,8 @@ export type NewDocumentDialogData = {
 	step?: "copy";
 	/** Copy for a job: the resume to start from. */
 	sourceResumeId?: string;
+	/** Copy for a job: the application it's for. */
+	applicationId?: string;
 	/** A file dropped on the page, imported straight away. */
 	file?: File;
 };
@@ -158,6 +160,7 @@ export function NewDocumentDialog({ data }: { data?: NewDocumentDialogData | und
 			<DialogContent className="sm:max-w-[640px]">
 				<CopyForJob
 					initialSourceId={data?.sourceResumeId}
+					initialJobId={data?.applicationId}
 					onBack={data?.step === "copy" ? undefined : () => setStep({ name: "choose" })}
 					onCreated={(resumeId) => {
 						markNew(resumeId);
@@ -454,20 +457,21 @@ function ImportProgress({ stage, notes }: { stage: number; notes: string[] }) {
 
 type CopyForJobProps = {
 	initialSourceId?: string | undefined;
+	initialJobId?: string | undefined;
 	onBack?: (() => void) | undefined;
 	onCreated: (resumeId: string) => void;
 };
 
 /** Pick a resume and a job; the copy is named from both and linked to the application. */
-function CopyForJob({ initialSourceId, onBack, onCreated }: CopyForJobProps) {
+function CopyForJob({ initialSourceId, initialJobId, onBack, onCreated }: CopyForJobProps) {
 	const { i18n } = useLingui();
 	const nameId = useId();
 	const { data: documents } = useQuery(orpc.documents.list.queryOptions({ input: { trashed: false } }));
 	const { data: applications } = useQuery(applicationsListQueryOptions());
 	const resumes = (documents ?? []).filter((document) => document.type === "resume");
-	const jobs = (applications ?? []).filter((application) => !application.archived);
+	const jobs = (applications ?? []).filter((application) => application.status !== "closed");
 	const [sourceId, setSourceId] = useState(initialSourceId);
-	const [jobId, setJobId] = useState<string | null>(null);
+	const [jobId, setJobId] = useState<string | null>(initialJobId ?? null);
 	const [name, setName] = useState<string | null>(null);
 	const { mutateAsync: copyForJob, isPending } = useMutation(orpc.documents.copyForJob.mutationOptions());
 	const formatter = new Intl.RelativeTimeFormat(i18n.locale, { numeric: "auto" });
diff --git a/apps/web/src/features/resume/editor/check/job-match.tsx b/apps/web/src/features/resume/editor/check/job-match.tsx
index 382210fb7..3ad8b865b 100644
--- a/apps/web/src/features/resume/editor/check/job-match.tsx
+++ b/apps/web/src/features/resume/editor/check/job-match.tsx
@@ -370,7 +370,7 @@ function PostingSource({ application }: { application: JobMatch["application"] }
 
 function ApplicationPicker({ value, onChange }: { value: string | null; onChange: (id: string) => void }) {
 	const { data: applications } = useQuery(applicationsListQueryOptions());
-	const choices = (applications ?? []).filter((application) => !application.archived);
+	const choices = (applications ?? []).filter((application) => application.status !== "closed");
 	// Linking changes the document's details, which a locked document keeps as they are.
 	const locked = useIsResumeLocked();
 
diff --git a/apps/web/src/features/resume/editor/use-editor-mode.test.ts b/apps/web/src/features/resume/editor/use-editor-mode.test.ts
index 2d04c4ddd..11f3defd9 100644
--- a/apps/web/src/features/resume/editor/use-editor-mode.test.ts
+++ b/apps/web/src/features/resume/editor/use-editor-mode.test.ts
@@ -12,9 +12,9 @@ const router = vi.hoisted(() => ({
 vi.mock("@tanstack/react-router", () => ({
 	getRouteApi: () => ({
 		useSearch: () => router.search,
-		useNavigate: () => (options: { search: { mode?: string } }) =>
+		useNavigate: () => (options: { search: (current: typeof router.search) => { mode?: string } }) =>
 			new Promise<void>((resolve) => {
-				router.navigations.push({ mode: options.search.mode, resolve });
+				router.navigations.push({ mode: options.search(router.search).mode, resolve });
 			}),
 	}),
 }));
diff --git a/apps/web/src/features/resume/editor/use-editor-mode.ts b/apps/web/src/features/resume/editor/use-editor-mode.ts
index 94fa88bd6..ee4c175f0 100644
--- a/apps/web/src/features/resume/editor/use-editor-mode.ts
+++ b/apps/web/src/features/resume/editor/use-editor-mode.ts
@@ -17,8 +17,14 @@ export function useEditorMode() {
 	const setMode = useCallback(
 		(next: EditorMode) => {
 			useEditorStore.setState({ pendingMode: next });
-			// The builder has no other search params, so the object form is safe.
-			void navigate({ to: ".", search: { mode: next === "write" ? undefined : next }, replace: true }).finally(() => {
+			void navigate({
+				to: ".",
+				search: (current: ReturnType<typeof routeApi.useSearch>) => ({
+					...current,
+					mode: next === "write" ? undefined : next,
+				}),
+				replace: true,
+			}).finally(() => {
 				// A later pick may still be on its way; only the latest one hands over to the URL.
 				useEditorStore.setState((state) => (state.pendingMode === next ? { pendingMode: null } : state));
 			});
diff --git a/apps/web/src/features/resume/share/format.test.ts b/apps/web/src/features/resume/share/format.test.ts
index 8d9087392..933abb008 100644
--- a/apps/web/src/features/resume/share/format.test.ts
+++ b/apps/web/src/features/resume/share/format.test.ts
@@ -64,5 +64,7 @@ describe("getVersionTitle", () => {
 		expect(getVersionTitle({ kind: "named", name: "Sent to Lumen" })).toBe("Sent to Lumen");
 		expect(getVersionTitle({ kind: "import", name: null })).toBe("Imported");
 		expect(getVersionTitle({ kind: "auto", name: null })).toBe("Editing session");
+		expect(getVersionTitle({ kind: "sent", name: "Lumen Health" })).toBe("Sent to Lumen Health");
+		expect(getVersionTitle({ kind: "sent", name: null })).toBe("Sent");
 	});
 });
diff --git a/apps/web/src/features/resume/share/format.ts b/apps/web/src/features/resume/share/format.ts
index f771cd6ea..24d74d3cf 100644
--- a/apps/web/src/features/resume/share/format.ts
+++ b/apps/web/src/features/resume/share/format.ts
@@ -70,7 +70,8 @@ export function getVersionTitle(version: Pick<VersionSummary, "kind" | "name">)
 		case "ai":
 			return t`AI edit`;
 		case "sent":
-			return t`Sent`;
+			// Sent versions are named after the company they went to.
+			return version.name ? t`Sent to ${version.name}` : t`Sent`;
 	}
 }
 
diff --git a/apps/web/src/routes/builder/$resumeId/-components/editor-shell.tsx b/apps/web/src/routes/builder/$resumeId/-components/editor-shell.tsx
index e926c2db7..892f3524e 100644
--- a/apps/web/src/routes/builder/$resumeId/-components/editor-shell.tsx
+++ b/apps/web/src/routes/builder/$resumeId/-components/editor-shell.tsx
@@ -2,7 +2,7 @@ import type { IconName } from "@reactive-resume/ui/components/icon";
 import type { EditorMode, MobileView } from "@/features/resume/editor/store";
 import { t } from "@lingui/core/macro";
 import { Trans } from "@lingui/react/macro";
-import { Outlet } from "@tanstack/react-router";
+import { getRouteApi, Outlet } from "@tanstack/react-router";
 import { useEffect, useSyncExternalStore } from "react";
 import { Icon } from "@reactive-resume/ui/components/icon";
 import { Tabs, TabsContent } from "@reactive-resume/ui/components/tabs";
@@ -50,6 +50,7 @@ export function EditorShell() {
 
 	// Selection, zoom and open sheets belong to one document.
 	useEffect(() => resetEditor, [resetEditor]);
+	useOpenVersionFromUrl();
 
 	return (
 		<Tabs value={mode} onValueChange={(value) => setMode(value as EditorMode)} className="contents">
@@ -74,6 +75,26 @@ export function EditorShell() {
 	);
 }
 
+const routeApi = getRouteApi("/builder/$resumeId");
+
+/** `?version=` opens History on that version (the page shows it read-only), then leaves the URL. */
+function useOpenVersionFromUrl() {
+	const { version } = routeApi.useSearch();
+	const navigate = routeApi.useNavigate();
+
+	useEffect(() => {
+		if (!version) return;
+		const editor = useEditorStore.getState();
+		editor.setShareTab("history");
+		editor.setHistoryVersion(version);
+		void navigate({
+			to: ".",
+			search: (current: ReturnType<typeof routeApi.useSearch>) => ({ ...current, version: undefined }),
+			replace: true,
+		});
+	}, [version, navigate]);
+}
+
 function EditorHotkeys({ onModeChange }: { onModeChange: (mode: EditorMode) => void }) {
 	useEditorHotkeys(onModeChange);
 	return null;
diff --git a/apps/web/src/routes/builder/$resumeId/route.tsx b/apps/web/src/routes/builder/$resumeId/route.tsx
index caa70a114..463a3c14c 100644
--- a/apps/web/src/routes/builder/$resumeId/route.tsx
+++ b/apps/web/src/routes/builder/$resumeId/route.tsx
@@ -11,6 +11,8 @@ import { EditorShell } from "./-components/editor-shell";
 const searchSchema = z.object({
 	// Write is the default and stays out of the URL.
 	mode: z.enum(EDITOR_MODES).optional().catch(undefined),
+	// Opens History on this version, read-only; Applications' "Open" on what was sent links here.
+	version: z.string().optional().catch(undefined),
 });
 
 export const Route = createFileRoute("/builder/$resumeId")({
diff --git a/apps/web/src/routes/dashboard/-components/app-shell.tsx b/apps/web/src/routes/dashboard/-components/app-shell.tsx
index 26db555e8..9bc608ee4 100644
--- a/apps/web/src/routes/dashboard/-components/app-shell.tsx
+++ b/apps/web/src/routes/dashboard/-components/app-shell.tsx
@@ -42,7 +42,7 @@ function useNavItems() {
 			to: "/dashboard/applications",
 			icon: "work",
 			label: t`Applications`,
-			...(applications ? { count: applications.filter((application) => !application.archived).length } : {}),
+			...(applications ? { count: applications.filter((application) => application.status !== "closed").length } : {}),
 		},
 	];
 	const trash: NavItem | null = counts?.trash
diff --git a/apps/web/src/routes/dashboard/applications/-index.test.tsx b/apps/web/src/routes/dashboard/applications/-index.test.tsx
index bd78a9a6d..c6bc3d967 100644
--- a/apps/web/src/routes/dashboard/applications/-index.test.tsx
+++ b/apps/web/src/routes/dashboard/applications/-index.test.tsx
@@ -1,6 +1,6 @@
 // @vitest-environment happy-dom
 
-import { cleanup, render, screen, waitFor } from "@testing-library/react";
+import { render, screen, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { beforeEach, expect, it, vi } from "vitest";
 import { i18n } from "@lingui/core";
@@ -20,6 +20,7 @@ vi.mock("@/libs/orpc/client", () => ({
 }));
 vi.mock("@/features/applications/components/application-detail-sheet", () => ({ ApplicationDetailSheet: () => null }));
 vi.mock("@/features/applications/components/application-form-sheet", () => ({ ApplicationFormSheet: () => null }));
+vi.mock("@/features/applications/components/add-application-dialog", () => ({ AddApplicationDialog: () => null }));
 vi.mock("@/features/applications/components/export-applications-sheet", () => ({
 	ExportApplicationsSheet: () => null,
 }));
@@ -28,15 +29,17 @@ vi.mock("@/features/applications/components/import-applications-sheet", () => ({
 }));
 vi.mock("@/features/applications/components/board", () => ({ ApplicationBoard: () => null }));
 vi.mock("@/features/applications/components/insights-view", () => ({ ApplicationInsights: () => null }));
-vi.mock("../-components/header", () => ({ DashboardHeader: () => null }));
+vi.mock("@/features/applications/components/calendar-view", () => ({ ApplicationCalendar: () => null }));
 
-type TableProps = { applications: { id: string; company: string }[] };
-vi.mock("@/features/applications/components/table-view", () => ({
-	ApplicationTable: ({ applications }: TableProps) => (
+type ListProps = { applications: { id: string; company: string; status: string }[]; showClosed: boolean };
+vi.mock("@/features/applications/components/list-view", () => ({
+	ApplicationList: ({ applications, showClosed }: ListProps) => (
 		<ul aria-label="Applications">
-			{applications.map((application) => (
-				<li key={application.id}>{application.company}</li>
-			))}
+			{applications
+				.filter((application) => showClosed || application.status !== "closed")
+				.map((application) => (
+					<li key={application.id}>{application.company}</li>
+				))}
 		</ul>
 	),
 }));
@@ -47,10 +50,11 @@ beforeEach(() => {
 	vi.restoreAllMocks();
 	vi.clearAllMocks();
 	i18n.loadAndActivate({ locale: "en-US", messages: {} });
+	const base = { tags: [], contacts: [], activity: [], location: null, followUpAt: null, appliedAt: new Date() };
 	mocks.list.mockResolvedValue([
-		{ id: "one", company: "Acme", role: "Engineer", tags: [], archived: false },
-		{ id: "two", company: "Example", role: "Designer", tags: [], archived: false },
-		{ id: "archived", company: "Archived company", role: "Engineer", tags: [], archived: true },
+		{ ...base, id: "one", company: "Acme", role: "Engineer", status: "applied" },
+		{ ...base, id: "two", company: "Example", role: "Designer", status: "saved" },
+		{ ...base, id: "closed", company: "Closed company", role: "Engineer", status: "closed" },
 	]);
 });
 
@@ -68,37 +72,29 @@ async function renderApplications(url: string) {
 			</I18nProvider>
 		</QueryClientProvider>,
 	);
-	await screen.findByPlaceholderText("Search applications…");
+	await screen.findByPlaceholderText("Search role, company or contact");
 	return router;
 }
 
-it("clears a URL-seeded search without restoring it on reload", async () => {
-	const router = await renderApplications(
-		'/dashboard/applications/?search=no-such-company&tags=["missing"]&archived=true&view=table&sort=company',
-	);
-	expect(screen.getByPlaceholderText("Search applications…")).toHaveValue("no-such-company");
-	await userEvent.click(screen.getByRole("button", { name: "Clear filters" }));
+it("clears a URL-seeded search that matches nothing, keeping the view", async () => {
+	const router = await renderApplications("/dashboard/applications/?q=no-such-company&view=list&closed=true");
+	expect(screen.getByPlaceholderText("Search role, company or contact")).toHaveValue("no-such-company");
+	await userEvent.click(await screen.findByRole("button", { name: "Clear search" }));
 
-	expect(screen.getByPlaceholderText("Search applications…")).toHaveValue("");
+	expect(screen.getByPlaceholderText("Search role, company or contact")).toHaveValue("");
 	expect(await screen.findByText("Acme")).toBeVisible();
-	expect(screen.getByText("Example")).toBeVisible();
-	expect(screen.queryByText("Archived company")).not.toBeInTheDocument();
-	await waitFor(() => expect(router.state.location.search).toEqual({ view: "table", sort: "company" }));
-
-	const reloadUrl = router.history.location.href;
-	cleanup();
-	await renderApplications(reloadUrl);
-	expect(screen.getByPlaceholderText("Search applications…")).toHaveValue("");
-	expect(screen.getByText("Acme")).toBeVisible();
-	expect(screen.getByText("Example")).toBeVisible();
-	expect(screen.queryByRole("button", { name: "Clear filters" })).not.toBeInTheDocument();
+	expect(screen.getByText("Closed company")).toBeVisible();
+	await waitFor(() => expect(router.state.location.search).toMatchObject({ closed: true }));
 });
 
-it("filters typed company and role searches without navigating or refetching", async () => {
-	const router = await renderApplications("/dashboard/applications/?view=table&sort=company");
+it("filters typed searches without navigating or refetching, and hides closed applications by default", async () => {
+	const router = await renderApplications("/dashboard/applications/");
 	const navigate = vi.spyOn(router, "navigate");
 	const url = router.history.location.href;
-	const input = screen.getByPlaceholderText("Search applications…");
+	const input = screen.getByPlaceholderText("Search role, company or contact");
+
+	expect(await screen.findByText("Acme")).toBeVisible();
+	expect(screen.queryByText("Closed company")).not.toBeInTheDocument();
 
 	await userEvent.type(input, "acme");
 	expect(screen.getByText("Acme")).toBeVisible();
diff --git a/apps/web/src/routes/dashboard/applications/index.tsx b/apps/web/src/routes/dashboard/applications/index.tsx
index 64e3f350a..f2f94ad63 100644
--- a/apps/web/src/routes/dashboard/applications/index.tsx
+++ b/apps/web/src/routes/dashboard/applications/index.tsx
@@ -1,30 +1,23 @@
 import type { Application } from "@/features/applications/types";
-import { msg, t } from "@lingui/core/macro";
-import { useLingui } from "@lingui/react";
+import { t } from "@lingui/core/macro";
 import { Trans } from "@lingui/react/macro";
-import {
-	ArchiveIcon,
-	BriefcaseIcon,
-	CalendarDotsIcon,
-	ChartBarIcon,
-	DownloadSimpleIcon,
-	FunnelIcon,
-	KanbanIcon,
-	MagnifyingGlassIcon,
-	PlusIcon,
-	RowsIcon,
-} from "@phosphor-icons/react";
 import { useQuery } from "@tanstack/react-query";
-import { createFileRoute, Link, stripSearchParams, useNavigate } from "@tanstack/react-router";
+import { createFileRoute, stripSearchParams, useNavigate } from "@tanstack/react-router";
 import { useEffect, useMemo, useState } from "react";
 import z from "zod";
 import { Button } from "@reactive-resume/ui/components/button";
-import { InputGroup, InputGroupAddon, InputGroupInput } from "@reactive-resume/ui/components/input-group";
-import { Label } from "@reactive-resume/ui/components/label";
-import { Popover, PopoverContent, PopoverTrigger } from "@reactive-resume/ui/components/popover";
-import { Separator } from "@reactive-resume/ui/components/separator";
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuTrigger,
+} from "@reactive-resume/ui/components/dropdown-menu";
+import { Icon } from "@reactive-resume/ui/components/icon";
+import { Input } from "@reactive-resume/ui/components/input";
 import { Tabs, TabsList, TabsTrigger } from "@reactive-resume/ui/components/tabs";
-import { Combobox } from "@/components/ui/combobox";
+import { useBreakpoint } from "@reactive-resume/ui/hooks/use-breakpoint";
+import { cn } from "@reactive-resume/utils/style";
+import { AddApplicationDialog } from "@/features/applications/components/add-application-dialog";
 import { ApplicationDetailSheet } from "@/features/applications/components/application-detail-sheet";
 import { ApplicationFormSheet } from "@/features/applications/components/application-form-sheet";
 import { ApplicationBoard } from "@/features/applications/components/board";
@@ -32,31 +25,23 @@ import { ApplicationCalendar } from "@/features/applications/components/calendar
 import { ExportApplicationsSheet } from "@/features/applications/components/export-applications-sheet";
 import { ImportApplicationsSheet } from "@/features/applications/components/import-applications-sheet";
 import { ApplicationInsights } from "@/features/applications/components/insights-view";
-import { ApplicationTable } from "@/features/applications/components/table-view";
+import { ApplicationList } from "@/features/applications/components/list-view";
+import { getNextStep } from "@/features/applications/next-step";
 import { applicationsListQueryOptions } from "@/features/applications/queries";
-import { orpc } from "@/libs/orpc/client";
-import { DashboardHeader } from "../-components/header";
 
-const SORT_OPTIONS = [
-	{ value: "updated", label: msg`Last updated` },
-	{ value: "applied", label: msg`Date applied` },
-	{ value: "company", label: msg`Company A–Z` },
-	{ value: "role", label: msg`Role A–Z` },
-] as const;
-
-type SortKey = (typeof SORT_OPTIONS)[number]["value"];
+const VIEWS = ["list", "board", "insights", "calendar"] as const;
+type View = (typeof VIEWS)[number];
 
 const searchSchema = z.object({
-	search: z.string().default(""),
-	view: z.enum(["board", "table", "calendar", "insights"]).default("board"),
-	tags: z.array(z.string()).default([]),
-	sort: z.enum(["updated", "applied", "company", "role"]).default("updated"),
-	archived: z.boolean().default(false),
-	create: z.boolean().default(false),
-	applicationId: z.string().optional(),
+	q: z.string().default("").catch(""),
+	view: z.enum(VIEWS).default("list").catch("list"),
+	closed: z.boolean().default(false).catch(false),
+	// Deep links: open Add, or one application.
+	create: z.boolean().default(false).catch(false),
+	applicationId: z.string().optional().catch(undefined),
 });
 type Search = z.output<typeof searchSchema>;
-const defaultSearch: Search = { search: "", view: "board", tags: [], sort: "updated", archived: false, create: false };
+const defaultSearch: Search = { q: "", view: "list", closed: false, create: false };
 
 export const Route = createFileRoute("/dashboard/applications/")({
 	component: RouteComponent,
@@ -64,321 +49,293 @@ export const Route = createFileRoute("/dashboard/applications/")({
 	search: { middlewares: [stripSearchParams(defaultSearch)] },
 });
 
+/** Search reads role, company, location, contacts and tags. */
+function matches(application: Application, query: string) {
+	if (!query) return true;
+	const haystack = [
+		application.role,
+		application.company,
+		application.location ?? "",
+		...application.contacts.map((contact) => contact.name),
+		...application.tags,
+	]
+		.join(" ")
+		.toLowerCase();
+	return haystack.includes(query);
+}
+
 function RouteComponent() {
-	const { i18n } = useLingui();
-	const { search, view, tags, sort, archived, create, applicationId } = Route.useSearch();
+	const { q, view, closed, create, applicationId } = Route.useSearch();
 	const navigate = useNavigate({ from: Route.fullPath });
-
-	const [textSearch, setTextSearch] = useState(search);
-	const [addOpen, setAddOpen] = useState(false);
-	const [importOpen, setImportOpen] = useState(false);
-	const [exportOpen, setExportOpen] = useState(false);
+	const phone = useBreakpoint() === "mobile";
+	// Typing filters at once; the URL only seeds the search.
+	const [query, setQuery] = useState(q);
+	const [adding, setAdding] = useState(false);
+	const [importing, setImporting] = useState(false);
+	const [exporting, setExporting] = useState(false);
 	const [editing, setEditing] = useState<Application | null>(null);
-	const [selected, setSelected] = useState<Application | null>(null);
+	const [selectedId, setSelectedId] = useState<string | null>(null);
 
-	// Editing from the detail panel: close the panel, open the edit form on the same application.
-	const startEdit = (application: Application) => {
-		setSelected(null);
-		setEditing(application);
-	};
+	const { data: applications, isPending } = useQuery(applicationsListQueryOptions());
+	const setSearch = (patch: Partial<Search>) => void navigate({ search: (prev: Search) => ({ ...prev, ...patch }) });
 
 	useEffect(() => {
 		if (!create) return;
-
-		setAddOpen(true);
+		setAdding(true);
 		void navigate({ replace: true, search: (prev: Search) => ({ ...prev, create: false }) });
 	}, [create, navigate]);
 
-	const { data: applications, isPending } = useQuery(applicationsListQueryOptions());
-	const { data: allTags } = useQuery(orpc.applications.tags.queryOptions());
-
 	useEffect(() => {
 		if (!applicationId || !applications) return;
-
-		setSelected(applications.find((application) => application.id === applicationId) ?? null);
+		setSelectedId(applicationId);
 		void navigate({ replace: true, search: (prev: Search) => ({ ...prev, applicationId: undefined }) });
 	}, [applicationId, applications, navigate]);
 
-	// Board & table hide archived; tag/search filters + sort are applied client-side.
-	const filtered = useMemo(() => {
-		const query = textSearch.trim().toLowerCase();
-		const rows = (applications ?? [])
-			.filter((app) => archived || !app.archived)
-			.filter((app) => tags.length === 0 || tags.every((tag: string) => app.tags.includes(tag)))
-			.filter((app) => !query || app.company.toLowerCase().includes(query) || app.role.toLowerCase().includes(query));
-
-		const compare: Record<SortKey, (a: Application, b: Application) => number> = {
-			updated: (a, b) => new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime(),
-			applied: (a, b) => new Date(b.appliedAt).getTime() - new Date(a.appliedAt).getTime(),
-			company: (a, b) => a.company.localeCompare(b.company),
-			role: (a, b) => a.role.localeCompare(b.role),
-		};
-		return rows.sort(compare[sort as SortKey]);
-	}, [applications, textSearch, tags, sort, archived]);
-
-	const archivedCount = (applications ?? []).filter((app) => app.archived).length;
-
-	// While loading render neither the empty state nor the board; a failed load falls back to the empty state.
-	const isEmpty = !applications?.length;
-
-	const setUrlSearch = (patch: Partial<Search>) => void navigate({ search: (prev: Search) => ({ ...prev, ...patch }) });
+	const text = query.trim().toLowerCase();
+	const filtered = useMemo(
+		() => (applications ?? []).filter((application) => matches(application, text)),
+		[applications, text],
+	);
+	const selected = applications?.find((application) => application.id === selectedId) ?? null;
+	// The board needs room to drag: phones get the list instead.
+	const shown: View = phone && (view === "board" || view === "calendar") ? "list" : view;
+	const empty = !isPending && (applications?.length ?? 0) === 0;
+	const noMatches = !empty && text && filtered.length === 0;
 
 	return (
-		<div className="flex h-dvh flex-col gap-4 p-4 max-sm:h-[calc(100dvh-52px)]">
-			<DashboardHeader
-				className="max-sm:flex-col max-sm:gap-y-3"
-				icon={BriefcaseIcon}
-				title={t`Applications`}
-				actions={
-					!isEmpty ? (
-						<>
-							<Button size="sm" variant="secondary" onClick={() => setExportOpen(true)}>
-								<DownloadSimpleIcon />
-								<Trans>Export CSV</Trans>
-							</Button>
-							<Button size="sm" variant="secondary" onClick={() => setImportOpen(true)}>
-								<DownloadSimpleIcon />
-								<Trans>Import CSV</Trans>
-							</Button>
-							<Button size="sm" onClick={() => setAddOpen(true)}>
-								<PlusIcon />
-								<Trans>Add application</Trans>
-							</Button>
-						</>
-					) : undefined
-				}
-			/>
+		<div className="mx-auto grid w-full max-w-[1180px] content-start gap-5 px-8 py-8 max-sm:px-4 max-sm:py-5">
+			<header className="flex flex-wrap items-center justify-between gap-3">
+				<h1 className="font-display font-medium text-[30px] leading-9">
+					<Trans>Applications</Trans>
+				</h1>
+				<div className="flex items-center gap-2">
+					<DropdownMenu>
+						<DropdownMenuTrigger
+							render={<Button size="icon" variant="secondary" aria-label={t`Import or export CSV`} />}
+						>
+							<Icon name="import_export" />
+						</DropdownMenuTrigger>
+						<DropdownMenuContent align="end">
+							<DropdownMenuItem onClick={() => setImporting(true)}>
+								<Trans>Import from CSV…</Trans>
+							</DropdownMenuItem>
+							<DropdownMenuItem disabled={empty} onClick={() => setExporting(true)}>
+								<Trans>Export to CSV…</Trans>
+							</DropdownMenuItem>
+						</DropdownMenuContent>
+					</DropdownMenu>
+					<Button onClick={() => setAdding(true)}>
+						<Icon name="add" />
+						<Trans>Add application</Trans>
+					</Button>
+				</div>
+			</header>
 
-			<Separator />
+			{applications && <FollowUpNudge applications={applications} onOpen={setSelectedId} />}
 
-			{isPending ? null : isEmpty ? (
-				<EmptyState onAdd={() => setAddOpen(true)} onImport={() => setImportOpen(true)} />
+			{empty ? (
+				<EmptyState onAdd={() => setAdding(true)} onImport={() => setImporting(true)} />
 			) : (
 				<>
-					{/* One row: search grows, filters stay fixed, icon-only view switcher on the right. */}
-					<div className="flex items-center gap-2">
-						<InputGroup className="min-w-24 max-w-72 flex-1">
-							<InputGroupAddon align="inline-start">
-								<MagnifyingGlassIcon />
-							</InputGroupAddon>
-							<InputGroupInput
-								value={textSearch}
-								placeholder={t`Search applications…`}
-								onChange={(event) => setTextSearch(event.target.value)}
-							/>
-						</InputGroup>
-
-						{/* Desktop: filters inline. Mobile: collapsed into the Filters popover below. */}
-						{(allTags?.length ?? 0) > 0 && (
-							<Combobox
-								multiple
-								className="w-40 min-w-0 shrink max-sm:hidden"
-								value={tags}
-								placeholder={t`Filter by tags`}
-								options={(allTags ?? []).map((tag) => ({ value: tag, label: tag }))}
-								onValueChange={(value) => setUrlSearch({ tags: value ?? [] })}
-							/>
-						)}
-
-						{view !== "insights" && view !== "calendar" && (
-							<Combobox
-								className="w-40 min-w-0 shrink max-sm:hidden"
-								value={sort}
-								placeholder={t`Sort by…`}
-								options={SORT_OPTIONS.map((option) => ({ value: option.value, label: i18n.t(option.label) }))}
-								onValueChange={(value) => value && setUrlSearch({ sort: value as SortKey })}
-							/>
-						)}
-
-						{archivedCount > 0 && view !== "insights" && (
-							<Button
-								size="sm"
-								variant={archived ? "primary" : "secondary"}
-								className="shrink-0 max-sm:hidden"
-								onClick={() => setUrlSearch({ archived: !archived })}
-							>
-								<ArchiveIcon />
-								<Trans>Archived</Trans> ({archivedCount})
-							</Button>
-						)}
-
-						{/* Mobile-only: one button holds every filter so the row never overflows on a phone. */}
-						{view !== "insights" && (
-							<Popover>
-								<PopoverTrigger
-									render={
-										<Button size="icon-sm" variant="secondary" className="relative shrink-0 sm:hidden">
-											<FunnelIcon />
-											{(tags.length > 0 || archived) && (
-												<span className="absolute end-1 top-1 size-1.5 rounded-full bg-primary" />
-											)}
-										</Button>
-									}
-								/>
-								<PopoverContent align="end" className="w-64 p-3">
-									{(allTags?.length ?? 0) > 0 && (
-										<div className="space-y-1.5">
-											<Label className="text-muted-foreground text-xs">
-												<Trans>Filter by tags</Trans>
-											</Label>
-											<Combobox
-												multiple
-												className="w-full"
-												value={tags}
-												placeholder={t`Any tag`}
-												options={(allTags ?? []).map((tag) => ({ value: tag, label: tag }))}
-												onValueChange={(value) => setUrlSearch({ tags: value ?? [] })}
-											/>
-										</div>
-									)}
-									<div className="space-y-1.5">
-										<Label className="text-muted-foreground text-xs">
-											<Trans>Sort by</Trans>
-										</Label>
-										<Combobox
-											className="w-full"
-											value={sort}
-											options={SORT_OPTIONS.map((option) => ({ value: option.value, label: i18n.t(option.label) }))}
-											onValueChange={(value) => value && setUrlSearch({ sort: value as SortKey })}
-										/>
-									</div>
-									{archivedCount > 0 && (
-										<Button
-											size="sm"
-											variant={archived ? "primary" : "secondary"}
-											className="w-full"
-											onClick={() => setUrlSearch({ archived: !archived })}
-										>
-											<ArchiveIcon />
-											<Trans>Archived</Trans> ({archivedCount})
-										</Button>
-									)}
-								</PopoverContent>
-							</Popover>
-						)}
-
-						<Tabs className="ms-auto shrink-0" value={view}>
-							<TabsList>
-								<TabsTrigger
-									value="board"
-									title={i18n.t(msg`Board`)}
-									nativeButton={false}
-									render={<Link to="." search={(p: Search) => ({ ...p, view: "board" })} />}
-								>
-									<KanbanIcon />
-									<span className="sr-only">{i18n.t(msg`Board`)}</span>
+					<div className="flex flex-wrap items-center gap-2">
+						<Tabs value={shown} onValueChange={(value) => setSearch({ view: value as View })}>
+							<TabsList aria-label={t`View`}>
+								<TabsTrigger value="list">
+									<Icon name="view_agenda" size={18} />
+									<Trans>List</Trans>
 								</TabsTrigger>
-								<TabsTrigger
-									value="table"
-									title={i18n.t(msg`Table`)}
-									nativeButton={false}
-									render={<Link to="." search={(p: Search) => ({ ...p, view: "table" })} />}
-								>
-									<RowsIcon />
-									<span className="sr-only">{i18n.t(msg`Table`)}</span>
-								</TabsTrigger>
-								<TabsTrigger
-									value="calendar"
-									title={i18n.t(msg`Calendar`)}
-									nativeButton={false}
-									render={<Link to="." search={(p: Search) => ({ ...p, view: "calendar" })} />}
-								>
-									<CalendarDotsIcon />
-									<span className="sr-only">{i18n.t(msg`Calendar`)}</span>
-								</TabsTrigger>
-								<TabsTrigger
-									value="insights"
-									title={i18n.t(msg`Insights`)}
-									nativeButton={false}
-									render={<Link to="." search={(p: Search) => ({ ...p, view: "insights" })} />}
-								>
-									<ChartBarIcon />
-									<span className="sr-only">{i18n.t(msg`Insights`)}</span>
+								{!phone && (
+									<TabsTrigger value="board">
+										<Icon name="view_kanban" size={18} />
+										<Trans>Board</Trans>
+									</TabsTrigger>
+								)}
+								<TabsTrigger value="insights">
+									<Icon name="insights" size={18} />
+									<Trans>Insights</Trans>
 								</TabsTrigger>
+								{!phone && (
+									<TabsTrigger value="calendar">
+										<Icon name="calendar_month" size={18} />
+										<Trans>Calendar</Trans>
+									</TabsTrigger>
+								)}
 							</TabsList>
 						</Tabs>
-					</div>
 
-					<div className="flex min-h-0 flex-1 flex-col">
-						{view !== "insights" && filtered.length === 0 ? (
-							<div className="flex flex-1 flex-col items-center justify-center gap-2 text-center">
-								<p className="font-medium text-sm">
-									<Trans>No applications match your filters.</Trans>
-								</p>
-								<Button
-									size="sm"
-									variant="secondary"
-									onClick={() => {
-										setTextSearch("");
-										setUrlSearch({ search: "", tags: [], archived: false });
-									}}
-								>
-									<Trans>Clear filters</Trans>
-								</Button>
-							</div>
-						) : (
-							<>
-								{view === "board" && (
-									<ApplicationBoard applications={filtered} onOpen={setSelected} onEdit={setEditing} />
-								)}
-								{view === "table" && (
-									<ApplicationTable applications={filtered} onOpen={setSelected} onEdit={setEditing} />
-								)}
-								{view === "calendar" && (
-									<ApplicationCalendar
-										applications={filtered}
-										allApplications={applications ?? []}
-										onOpen={setSelected}
-									/>
-								)}
-								{view === "insights" && <ApplicationInsights applications={applications ?? []} />}
-							</>
+						<div className="relative min-w-40 max-w-72 flex-1">
+							<Icon
+								name="search"
+								size={18}
+								className="pointer-events-none absolute start-2.5 top-1/2 -translate-y-1/2 text-ink-3"
+							/>
+							<Input
+								type="search"
+								aria-label={t`Search applications`}
+								placeholder={t`Search role, company or contact`}
+								value={query}
+								className="ps-8"
+								onChange={(event) => setQuery(event.target.value)}
+							/>
+						</div>
+
+						{shown !== "insights" && (
+							<Button
+								variant="secondary"
+								aria-pressed={closed}
+								onClick={() => setSearch({ closed: !closed })}
+								className={cn(closed && "bg-sunken")}
+							>
+								<Icon name={closed ? "check_box" : "check_box_outline_blank"} size={18} />
+								<Trans>Show closed</Trans>
+							</Button>
 						)}
 					</div>
+
+					{noMatches ? (
+						<div className="grid justify-items-center gap-2 py-16 text-center">
+							<p className="font-medium text-sm">
+								<Trans>No applications match “{query.trim()}”.</Trans>
+							</p>
+							<Button size="sm" variant="secondary" onClick={() => setQuery("")}>
+								<Trans>Clear search</Trans>
+							</Button>
+						</div>
+					) : (
+						<>
+							{shown === "list" && (
+								<ApplicationList
+									applications={filtered}
+									showClosed={closed}
+									selectedId={selectedId}
+									onOpen={(application) => setSelectedId(application.id)}
+								/>
+							)}
+							{shown === "board" && (
+								<div className="h-[calc(100svh-230px)] min-h-96">
+									<ApplicationBoard
+										applications={filtered}
+										showClosed={closed}
+										onOpen={(application) => setSelectedId(application.id)}
+									/>
+								</div>
+							)}
+							{shown === "insights" && <ApplicationInsights applications={applications ?? []} />}
+							{shown === "calendar" && (
+								<ApplicationCalendar
+									applications={filtered.filter((application) => closed || application.status !== "closed")}
+									allApplications={applications ?? []}
+									onOpen={(application) => setSelectedId(application.id)}
+								/>
+							)}
+						</>
+					)}
 				</>
 			)}
 
-			<ApplicationFormSheet open={addOpen} onOpenChange={setAddOpen} />
-			<ApplicationFormSheet open={!!editing} application={editing} onOpenChange={(open) => !open && setEditing(null)} />
-			<ImportApplicationsSheet open={importOpen} onOpenChange={setImportOpen} />
+			<AddApplicationDialog open={adding} onOpenChange={setAdding} onAdded={setSelectedId} />
+			<ApplicationFormSheet
+				open={Boolean(editing)}
+				application={editing}
+				onOpenChange={(open) => !open && setEditing(null)}
+			/>
+			<ImportApplicationsSheet open={importing} onOpenChange={setImporting} />
 			<ExportApplicationsSheet
-				open={exportOpen}
-				onOpenChange={setExportOpen}
+				open={exporting}
+				onOpenChange={setExporting}
 				applications={applications ?? []}
 				filtered={filtered}
 			/>
 			<ApplicationDetailSheet
 				application={selected}
-				onOpenChange={(open) => !open && setSelected(null)}
-				onEdit={startEdit}
+				onOpenChange={(open) => !open && setSelectedId(null)}
+				onEditDetails={(application) => {
+					setSelectedId(null);
+					setEditing(application);
+				}}
 			/>
 		</div>
 	);
 }
 
+const NUDGE_STORAGE_KEY = "applications-follow-up-dismissed";
+
+function readDismissed(): string[] {
+	try {
+		return JSON.parse(window.localStorage.getItem(NUDGE_STORAGE_KEY) ?? "[]") as string[];
+	} catch {
+		return [];
+	}
+}
+
+/**
+ * The follow-up nudge: the application waiting longest without a reply (10+ days since applying). Dismissing it is
+ * remembered on this device; it doesn't come back for that application.
+ */
+function FollowUpNudge({ applications, onOpen }: { applications: Application[]; onOpen: (id: string) => void }) {
+	const [dismissed, setDismissed] = useState(readDismissed);
+
+	const waiting = applications
+		.filter((application) => !dismissed.includes(application.id))
+		.flatMap((application) => {
+			const step = getNextStep(application);
+			return step.kind === "no-reply" ? [{ application, days: step.days }] : [];
+		})
+		.sort((a, b) => b.days - a.days)[0];
+	if (!waiting) return null;
+
+	const dismiss = () => {
+		const next = [...dismissed, waiting.application.id].slice(-200);
+		setDismissed(next);
+		try {
+			window.localStorage.setItem(NUDGE_STORAGE_KEY, JSON.stringify(next));
+		} catch {
+			// Without storage the nudge is dismissed for this visit only.
+		}
+	};
+
+	const { company } = waiting.application;
+	const { days } = waiting;
+
+	return (
+		<div
+			role="status"
+			className="flex flex-wrap items-center gap-2 rounded-xl bg-warn-soft px-3 py-2 text-sm text-warn-text"
+		>
+			<Icon name="schedule" size={20} />
+			<span className="min-w-0 flex-1">
+				<Trans>
+					{company}: no reply for {days} days. A short follow-up is usually fine now.
+				</Trans>
+			</span>
+			<Button size="sm" variant="secondary" onClick={() => onOpen(waiting.application.id)}>
+				<Trans>Open</Trans>
+			</Button>
+			<Button size="icon-sm" variant="ghost" aria-label={t`Dismiss`} onClick={dismiss} className="text-warn-text">
+				<Icon name="close" size={18} />
+			</Button>
+		</div>
+	);
+}
+
 function EmptyState({ onAdd, onImport }: { onAdd: () => void; onImport: () => void }) {
 	return (
-		<div className="flex flex-1 flex-col items-center justify-center gap-4 text-center">
-			<div className="flex size-14 items-center justify-center rounded-2xl bg-muted">
-				<BriefcaseIcon className="size-7 text-muted-foreground" />
-			</div>
-			<div className="max-w-md space-y-1.5">
-				<h2 className="font-semibold text-lg">
-					<Trans>Track your first application</Trans>
-				</h2>
-				<p className="text-muted-foreground text-sm">
-					<Trans>
-						Add a job you're applying to and link the resume you sent. Move it across the board as you hear back.
-					</Trans>
-				</p>
-			</div>
+		<div className="grid justify-items-center gap-3 py-20 text-center">
+			<span className="grid size-12 place-items-center rounded-xl bg-sunken text-ink-2">
+				<Icon name="work" size={26} />
+			</span>
+			<h2 className="font-semibold text-lg">
+				<Trans>Track your first job</Trans>
+			</h2>
+			<p className="max-w-sm text-ink-2 text-sm">
+				<Trans>Paste a job link. We'll save the posting so Check, the assistant and your letter can use it.</Trans>
+			</p>
 			<div className="flex gap-2">
 				<Button onClick={onAdd}>
-					<PlusIcon />
+					<Icon name="add" />
 					<Trans>Add application</Trans>
 				</Button>
 				<Button variant="secondary" onClick={onImport}>
-					<DownloadSimpleIcon />
 					<Trans>Import from CSV</Trans>
 				</Button>
 			</div>
diff --git a/packages/ui/src/icons/material-symbols-rounded.json b/packages/ui/src/icons/material-symbols-rounded.json
index 396993417..f7dcc4557 100644
--- a/packages/ui/src/icons/material-symbols-rounded.json
+++ b/packages/ui/src/icons/material-symbols-rounded.json
@@ -13,6 +13,8 @@
 		"calendar_month",
 		"call",
 		"check",
+		"check_box",
+		"check_box_outline_blank",
 		"check_circle",
 		"chevron_left",
 		"chevron_right",
@@ -46,6 +48,7 @@
 		"format_size",
 		"grid_view",
 		"history",
+		"hourglass_empty",
 		"hub",
 		"import_export",
 		"info",
@@ -100,6 +103,8 @@
 		"upload_file",
 		"vertical_align_center",
 		"vertical_split",
+		"view_agenda",
+		"view_kanban",
 		"view_list",
 		"visibility",
 		"visibility_off",
diff --git a/packages/ui/src/icons/material-symbols-rounded.woff2 b/packages/ui/src/icons/material-symbols-rounded.woff2
index 59b5a3699..69e46ef4c 100644
Binary files a/packages/ui/src/icons/material-symbols-rounded.woff2 and b/packages/ui/src/icons/material-symbols-rounded.woff2 differ
diff --git a/packages/ui/src/icons/names.ts b/packages/ui/src/icons/names.ts
index aa63afff8..73c3d575d 100644
--- a/packages/ui/src/icons/names.ts
+++ b/packages/ui/src/icons/names.ts
@@ -18,6 +18,8 @@ export const iconNames = [
 	"calendar_month",
 	"call",
 	"check",
+	"check_box",
+	"check_box_outline_blank",
 	"check_circle",
 	"chevron_left",
 	"chevron_right",
@@ -51,6 +53,7 @@ export const iconNames = [
 	"format_size",
 	"grid_view",
 	"history",
+	"hourglass_empty",
 	"hub",
 	"import_export",
 	"info",
@@ -105,6 +108,8 @@ export const iconNames = [
 	"upload_file",
 	"vertical_align_center",
 	"vertical_split",
+	"view_agenda",
+	"view_kanban",
 	"view_list",
 	"visibility",
 	"visibility_off",