feat: add AI agent workspace (#3062)

* chore(ai): remove local AI store now that providers live server-side

The Zustand-based useAIStore has been replaced by the server-side
aiProviders oRPC router (encrypted credentials persisted in DB).
Delete the dead store + tests, drop the ./store export, and remove
zustand/immer deps which are no longer referenced anywhere in
packages/ai/src/.

* feat(agent): archive/delete actions and read-only state for agent threads

- Backend: mark archived threads as read-only in threads.get and reject
  messages.send with CONFLICT when the thread is archived.
- Frontend: render archived threads in the sidebar with muted styling and
  an Archived badge; add a per-thread dropdown menu in the chat header
  with Archive (non-destructive) and Delete (with confirmation); show a
  read-only banner above the message list that disambiguates archived
  vs. missing-resource causes; suppress the Retry and Stop buttons in
  read-only mode.
- Tests: new packages/api/src/services/agent.test.ts covering the
  archived-thread isReadOnly flag and the archived-thread send refusal.

* fix(agent): abort run on archive and verify ownership before deleting thread

- threads.archive: before flipping status, abort any in-flight run controller
  and clear the active-run state on the thread; cleanup failures are logged
  but do not block the status update.
- threads.delete: assert thread ownership via getThread before destructive
  work so an authenticated user cannot wipe another user's attachment rows
  by passing a foreign threadId.

Adds focused tests for both behaviors.

* feat(agent): display patch diffs and surface revert conflicts

Render apply_resume_patch tool messages with a status-aware card (applied/
reverted/conflicted), expandable operation list, and a Revert button that
correctly handles RESUME_VERSION_CONFLICT responses. Adds unit tests for
the inverse-patch builder and the agentService.actions.revert flow.

* chore(agent): remove out-of-scope attachment tests accidentally added in Task 6

The Task 6 commit (73ef1acca) accidentally re-introduced three attachment-
related tests that belong to a separate task:

- `buildAttachmentModelParts > converts text, image, supported binary, and
  unsupported attachments into model parts`
- `agentService.messages.send > persists the user message with file UI parts
  and links selected attachments to it` (was failing — the `ToolLoopAgent`
  mock is not callable as a constructor)
- `agentService.messages.send > rejects attachments that are missing, foreign,
  or already linked before persisting a message`

These were likely re-added during a stash recovery and were not requested
for Task 6, whose scope was limited to the `agentService.actions.revert`
flow. Remove them along with the helpers/fixtures (`buildAttachment`,
`buildActiveThread`, `selectWhereResult`, `selectOrderByResult`) that they
were the only consumers of. `selectLimitResult` is preserved because it is
used by the revert tests.

* chore(agent): configure runtime dependencies

* feat(db): add agent workspace schema

* feat(api): add agent backend services

* feat(web): add agent workspace UI

* chore(agent): remove legacy builder assistant

* test(agent): make agent stream mocks constructible

* chore(web): remove unused resume replacement hook

* feat(api): add unsafe AI base URL flag

* chore(dev): expose local services in compose

* fix(web): normalize resume preview gaps

* feat(api): improve agent tool handling

* feat(web): polish agent workspace UI

* chore: update dependencies

* fix(api,web): address PR review feedback for agent workspace

Security/correctness:
- Restrict AI provider URLs to http/https even in unsafe mode
- Stop exposing Redis on host network by default
- Make .env.local optional and drop app profile in compose.dev.yml
- Store agent attachments with private ACL on S3
- Reset provider test status when provider/model/baseURL changes
- Decouple non-agent AI endpoints from REDIS_URL requirement
- Fix JSON Patch add inverse for existing object members
- Wrap resume patch + agent action insert in db transaction
- Validate partialMessage at runtime and rate-limit attachment uploads
- Add unique index on agent_messages (thread_id, sequence)

UX/bugs:
- Mark agent thread route as ssr: false and guard SSE chunk parsing
- Show config-specific banner only on known configuration error
- Gate AI provider checks behind loading state in resume import
- Fix relative-time formatter blank gap between 45-59 seconds
- Clarify thread delete confirmation message

Polish:
- Raise ENCRYPTION_SECRET minimum to 32 characters
- Bucket AI rate limits by resumeId/threadId/messageId
- Trim form values before submitting AI provider config
- Use single key identifier and nullish-coalesce baseURL display

* fix: address ai agent review feedback

* fix: preserve mobile agent chat state

* docs: add ai agent workspace guides

* feat: introduce design system for Reactive Resume

apps/web/src/routes/agent/-$threadId.test.ts

@@ -0,0 +1,69 @@
+import { describe, expect, it } from "vitest";
+import {
+	attachmentIdsFromTransportBody,
+	attachmentToFilePart,
+	buildAgentChatSubmission,
+} from "./-helpers/chat-attachments";
+
+describe("agent chat attachment helpers", () => {
+	it("builds safe UI file parts without embedding file bytes", () => {
+		expect(attachmentToFilePart({ id: "attachment-1", filename: "resume.pdf", mediaType: "application/pdf" })).toEqual({
+			type: "file",
+			url: "agent-attachment:attachment-1",
+			mediaType: "application/pdf",
+			filename: "resume.pdf",
+		});
+	});
+
+	it("extracts only string attachment IDs from transport body metadata", () => {
+		expect(attachmentIdsFromTransportBody({ attachmentIds: ["a", 1, "b", null] })).toEqual(["a", "b"]);
+		expect(attachmentIdsFromTransportBody({ attachmentIds: "a" })).toBeUndefined();
+		expect(attachmentIdsFromTransportBody(undefined)).toBeUndefined();
+	});
+
+	it("keeps attachment IDs in transport metadata while sending file parts in the UI message", () => {
+		const submission = buildAgentChatSubmission("  Tailor this  ", [
+			{ id: "attachment-1", filename: "job.txt", mediaType: "text/plain" },
+			{ id: "attachment-2", filename: "portfolio.png", mediaType: "image/png" },
+		]);
+
+		expect(submission).toEqual({
+			message: {
+				text: "Tailor this",
+				files: [
+					{
+						type: "file",
+						url: "agent-attachment:attachment-1",
+						mediaType: "text/plain",
+						filename: "job.txt",
+					},
+					{
+						type: "file",
+						url: "agent-attachment:attachment-2",
+						mediaType: "image/png",
+						filename: "portfolio.png",
+					},
+				],
+			},
+			options: { body: { attachmentIds: ["attachment-1", "attachment-2"] } },
+		});
+	});
+
+	it("supports attachment-only submissions", () => {
+		const submission = buildAgentChatSubmission("   ", [
+			{ id: "attachment-1", filename: "job.txt", mediaType: "text/plain" },
+		]);
+
+		expect(submission.message).toEqual({
+			files: [
+				{
+					type: "file",
+					url: "agent-attachment:attachment-1",
+					mediaType: "text/plain",
+					filename: "job.txt",
+				},
+			],
+		});
+		expect(submission.options).toEqual({ body: { attachmentIds: ["attachment-1"] } });
+	});
+});

apps/web/src/routes/agent/-components/new-thread-setup.tsx

@@ -0,0 +1,209 @@
+import type { AIProvider } from "@reactive-resume/ai/types";
+import { t } from "@lingui/core/macro";
+import { Trans } from "@lingui/react/macro";
+import { ArrowRightIcon, ChatCircleDotsIcon, FilePlusIcon, GearSixIcon } from "@phosphor-icons/react";
+import { useMutation, useQuery } from "@tanstack/react-query";
+import { Link, useNavigate } from "@tanstack/react-router";
+import { useEffect, useMemo, useState } from "react";
+import { toast } from "sonner";
+import { useIsClient } from "usehooks-ts";
+import { Badge } from "@reactive-resume/ui/components/badge";
+import { Button } from "@reactive-resume/ui/components/button";
+import { Label } from "@reactive-resume/ui/components/label";
+import { Spinner } from "@reactive-resume/ui/components/spinner";
+import { Combobox } from "@/components/ui/combobox";
+import { getOrpcErrorMessage } from "@/libs/error-message";
+import { orpc } from "@/libs/orpc/client";
+
+function providerLabel(provider: { label: string; provider: AIProvider; model: string }) {
+	return `${provider.label} · ${provider.provider} · ${provider.model}`;
+}
+
+function isAgentConfigError(error: unknown) {
+	if (!error || typeof error !== "object") return false;
+	const message = (error as { message?: unknown }).message;
+	const status = (error as { status?: unknown; code?: unknown }).status ?? (error as { code?: unknown }).code;
+	if (status === "PRECONDITION_FAILED" || status === 412) return true;
+	return typeof message === "string" && /REDIS_URL|ENCRYPTION_SECRET/.test(message);
+}
+
+export function NewThreadSetup({ resumeId }: { resumeId?: string }) {
+	const isClient = useIsClient();
+	const navigate = useNavigate();
+	const {
+		data: providers,
+		isLoading: isLoadingProviders,
+		error: providersError,
+	} = useQuery(orpc.aiProviders.list.queryOptions());
+	const { data: resumes, isLoading: isLoadingResumes } = useQuery(
+		orpc.resume.list.queryOptions({ input: { sort: "lastUpdatedAt", tags: [] } }),
+	);
+	const { mutate: createThread, isPending } = useMutation(orpc.agent.threads.create.mutationOptions());
+
+	const usableProviders = useMemo(
+		() => providers?.filter((provider) => provider.enabled && provider.testStatus === "success") ?? [],
+		[providers],
+	);
+	const [aiProviderId, setAiProviderId] = useState<string | null>(null);
+	const [sourceResumeId, setSourceResumeId] = useState<string | null>(resumeId ?? null);
+
+	useEffect(() => {
+		if (aiProviderId || usableProviders.length === 0) return;
+		setAiProviderId(usableProviders[0]?.id ?? null);
+	}, [aiProviderId, usableProviders]);
+
+	useEffect(() => {
+		setSourceResumeId(resumeId ?? null);
+	}, [resumeId]);
+
+	const providerOptions = usableProviders.map((provider) => ({
+		value: provider.id,
+		label: providerLabel(provider),
+		keywords: [provider.label, provider.provider, provider.model],
+	}));
+
+	const resumeOptions = [
+		{ value: "__scratch__", label: t`Create from scratch` },
+		...(resumes?.map((resume) => ({
+			value: resume.id,
+			label: resume.name,
+			keywords: [resume.name, resume.slug, ...resume.tags],
+		})) ?? []),
+	];
+
+	const selectedResumeValue = sourceResumeId ?? "__scratch__";
+	const canCreate = !!aiProviderId && usableProviders.length > 0;
+
+	if (!isClient) return null;
+
+	return (
+		<div className="mx-auto grid w-full max-w-4xl gap-6 self-center p-4 lg:p-6">
+			<div className="flex items-start gap-4">
+				<div className="grid size-12 shrink-0 place-items-center rounded-md border bg-card shadow-sm lg:size-14">
+					<ChatCircleDotsIcon className="size-6 text-foreground" weight="fill" />
+				</div>
+				<div className="min-w-0">
+					<h1 className="font-semibold text-3xl tracking-tight lg:text-4xl">
+						<Trans>Start a thread</Trans>
+					</h1>
+					<p className="mt-1 text-muted-foreground">
+						<Trans>Choose a model and resume draft.</Trans>
+					</p>
+				</div>
+			</div>
+
+			{providersError ? (
+				<div className="rounded-md border border-amber-300 bg-amber-50 p-4 text-amber-950 text-sm dark:bg-amber-950/20 dark:text-amber-200">
+					{isAgentConfigError(providersError) ? (
+						<Trans>AI agent setup is unavailable until REDIS_URL and ENCRYPTION_SECRET are configured.</Trans>
+					) : (
+						<Trans>AI agent setup is unavailable right now. Please try again in a moment.</Trans>
+					)}
+				</div>
+			) : null}
+
+			<div className="rounded-md border bg-card p-4 shadow-sm lg:p-6">
+				<div className="grid gap-x-5 lg:grid-cols-[minmax(0,1fr)_minmax(0,1fr)]">
+					<div className="relative isolate min-h-32 overflow-hidden rounded-md p-1 lg:p-2">
+						<span
+							aria-hidden="true"
+							className="pointer-events-none absolute -top-7 right-1 -z-10 select-none font-black text-8xl text-foreground/[0.045] leading-none lg:-top-10 lg:right-3 lg:text-[8rem]"
+						>
+							1
+						</span>
+						<div className="space-y-3">
+							<Label>
+								<Trans>Select an agent model</Trans>
+							</Label>
+							<Combobox
+								value={aiProviderId}
+								options={providerOptions}
+								disabled={isLoadingProviders || providerOptions.length === 0}
+								placeholder={isLoadingProviders ? t`Loading providers...` : t`Select a tested provider`}
+								onValueChange={setAiProviderId}
+							/>
+							{providerOptions.length === 0 && !isLoadingProviders ? (
+								<div className="flex flex-col gap-3 rounded-md border border-dashed p-3 text-sm lg:flex-row lg:items-center lg:justify-between">
+									<span className="text-muted-foreground">
+										<Trans>Add and test a provider before starting a thread.</Trans>
+									</span>
+									<Button
+										size="sm"
+										variant="outline"
+										nativeButton={false}
+										render={<Link to="/dashboard/settings/integrations" />}
+									>
+										<GearSixIcon />
+										<Trans>Settings</Trans>
+									</Button>
+								</div>
+							) : null}
+						</div>
+					</div>
+
+					<div className="relative isolate min-h-32 overflow-hidden rounded-md p-1 lg:p-2">
+						<span
+							aria-hidden="true"
+							className="pointer-events-none absolute -top-7 right-1 -z-10 select-none font-black text-8xl text-foreground/[0.045] leading-none lg:-top-10 lg:right-3 lg:text-[8rem]"
+						>
+							2
+						</span>
+						<div className="space-y-3">
+							<Label>
+								<Trans>Select a resume</Trans>
+							</Label>
+							<Combobox
+								value={selectedResumeValue}
+								showClear={false}
+								options={resumeOptions}
+								disabled={isLoadingResumes}
+								placeholder={isLoadingResumes ? t`Loading resumes...` : t`Choose a resume`}
+								onValueChange={(value) => setSourceResumeId(value && value !== "__scratch__" ? value : null)}
+							/>
+							<div className="flex flex-wrap items-center gap-2 text-muted-foreground text-sm">
+								<Badge variant="secondary" className="h-7 gap-1.5 rounded-md px-2">
+									<FilePlusIcon />
+									{sourceResumeId ? <Trans>Duplicate as AI Draft</Trans> : <Trans>Blank draft</Trans>}
+								</Badge>
+							</div>
+						</div>
+					</div>
+				</div>
+
+				<div className="mt-2 flex border-t pt-5 lg:justify-end">
+					<Button
+						size="lg"
+						className="h-11 w-full gap-2 px-5 lg:w-auto"
+						disabled={!canCreate || isPending}
+						onClick={() =>
+							createThread(
+								{
+									...(aiProviderId ? { aiProviderId } : {}),
+									...(sourceResumeId ? { sourceResumeId } : {}),
+								},
+								{
+									onSuccess: (thread) => {
+										void navigate({ to: "/agent/$threadId", params: { threadId: thread.id } });
+									},
+									onError: (error) =>
+										toast.error(
+											getOrpcErrorMessage(error, {
+												byCode: {
+													PRECONDITION_FAILED: t`AI agent setup is unavailable until REDIS_URL and ENCRYPTION_SECRET are configured.`,
+													BAD_REQUEST: t`Select a tested provider before starting a thread.`,
+												},
+												fallback: t`Failed to start agent thread.`,
+											}),
+										),
+								},
+							)
+						}
+					>
+						<Trans>Start Thread</Trans>
+						{isPending ? <Spinner /> : <ArrowRightIcon />}
+					</Button>
+				</div>
+			</div>
+		</div>
+	);
+}

apps/web/src/routes/agent/-components/thread-sidebar.tsx

@@ -0,0 +1,217 @@
+import type { RouterOutput } from "@/libs/orpc/client";
+import { t } from "@lingui/core/macro";
+import { useLingui } from "@lingui/react";
+import { Trans } from "@lingui/react/macro";
+import {
+	ArchiveIcon,
+	ArrowLeftIcon,
+	ChatCircleDotsIcon,
+	DotsThreeVerticalIcon,
+	PlusIcon,
+	TrashIcon,
+} from "@phosphor-icons/react";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { Link, useNavigate } from "@tanstack/react-router";
+import { toast } from "sonner";
+import { Button } from "@reactive-resume/ui/components/button";
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuTrigger,
+} from "@reactive-resume/ui/components/dropdown-menu";
+import { ScrollArea } from "@reactive-resume/ui/components/scroll-area";
+import { cn } from "@reactive-resume/utils/style";
+import { useConfirm } from "@/hooks/use-confirm";
+import { getOrpcErrorMessage } from "@/libs/error-message";
+import { orpc } from "@/libs/orpc/client";
+
+type AgentThreadSummary = RouterOutput["agent"]["threads"]["list"][number];
+
+function formatRelativeTime(value: Date | string, locale: string) {
+	const date = value instanceof Date ? value : new Date(value);
+	const diffMs = date.getTime() - Date.now();
+	const absMs = Math.abs(diffMs);
+	const divisions: Array<{ amount: number; unit: Intl.RelativeTimeFormatUnit }> = [
+		{ amount: 31_536_000_000, unit: "year" },
+		{ amount: 2_592_000_000, unit: "month" },
+		{ amount: 604_800_000, unit: "week" },
+		{ amount: 86_400_000, unit: "day" },
+		{ amount: 3_600_000, unit: "hour" },
+		{ amount: 60_000, unit: "minute" },
+	];
+
+	if (absMs < 60_000) return new Intl.RelativeTimeFormat(locale, { numeric: "auto" }).format(0, "second");
+
+	const division = divisions.find((candidate) => absMs >= candidate.amount);
+	if (!division) return "";
+
+	return new Intl.RelativeTimeFormat(locale, { numeric: "auto" }).format(
+		Math.round(diffMs / division.amount),
+		division.unit,
+	);
+}
+
+function ThreadActions({ thread, activeThreadId }: { thread: AgentThreadSummary; activeThreadId: string | null }) {
+	const navigate = useNavigate();
+	const confirm = useConfirm();
+	const queryClient = useQueryClient();
+	const archiveMutation = useMutation(orpc.agent.threads.archive.mutationOptions());
+	const deleteMutation = useMutation(orpc.agent.threads.delete.mutationOptions());
+	const isArchived = thread.status === "archived";
+
+	const handleArchive = () => {
+		archiveMutation.mutate(
+			{ id: thread.id },
+			{
+				onSuccess: async () => {
+					await queryClient.invalidateQueries({ queryKey: orpc.agent.threads.list.queryKey() });
+					if (activeThreadId === thread.id) {
+						await queryClient.invalidateQueries({
+							queryKey: orpc.agent.threads.get.queryKey({ input: { id: thread.id } }),
+						});
+					}
+				},
+				onError: (error) => toast.error(getOrpcErrorMessage(error, { fallback: t`Failed to archive thread.` })),
+			},
+		);
+	};
+
+	const handleDelete = async () => {
+		const confirmed = await confirm(t`Delete this agent thread?`, {
+			description: t`This action cannot be undone. Messages and thread attachments will be removed.`,
+		});
+
+		if (!confirmed) return;
+
+		deleteMutation.mutate(
+			{ id: thread.id },
+			{
+				onSuccess: async () => {
+					await queryClient.invalidateQueries({ queryKey: orpc.agent.threads.list.queryKey() });
+					if (activeThreadId === thread.id) void navigate({ to: "/agent" });
+				},
+				onError: (error) => toast.error(getOrpcErrorMessage(error, { fallback: t`Failed to delete thread.` })),
+			},
+		);
+	};
+
+	return (
+		<DropdownMenu>
+			<DropdownMenuTrigger
+				render={
+					<Button
+						size="icon-sm"
+						variant="ghost"
+						className="absolute end-1.5 top-2 opacity-60 transition-opacity hover:opacity-100 focus-visible:opacity-100 group-hover/thread:opacity-100 aria-expanded:opacity-100"
+					>
+						<DotsThreeVerticalIcon />
+						<span className="sr-only">
+							<Trans>Thread actions</Trans>
+						</span>
+					</Button>
+				}
+			/>
+			<DropdownMenuContent align="end">
+				{!isArchived ? (
+					<DropdownMenuItem disabled={archiveMutation.isPending} onClick={handleArchive}>
+						<ArchiveIcon />
+						<Trans>Archive</Trans>
+					</DropdownMenuItem>
+				) : null}
+				<DropdownMenuItem variant="destructive" disabled={deleteMutation.isPending} onClick={() => void handleDelete()}>
+					<TrashIcon />
+					<Trans>Delete</Trans>
+				</DropdownMenuItem>
+			</DropdownMenuContent>
+		</DropdownMenu>
+	);
+}
+
+function ThreadRow({ thread, activeThreadId }: { thread: AgentThreadSummary; activeThreadId: string | null }) {
+	const { i18n } = useLingui();
+	const isActive = thread.id === activeThreadId;
+	const isArchived = thread.status === "archived";
+	const title = thread.title === thread.resumeName ? t`New thread` : thread.title;
+
+	return (
+		<div
+			className={cn(
+				"group/thread relative rounded-md transition-colors hover:bg-accent",
+				isActive && "bg-accent",
+				isArchived && "opacity-60",
+			)}
+		>
+			<Link
+				to="/agent/$threadId"
+				params={{ threadId: thread.id }}
+				className="block min-w-0 rounded-md px-3 py-2 pe-10 text-sm outline-hidden ring-ring focus-visible:ring-2"
+			>
+				<div className="truncate font-medium">{title}</div>
+				<div className="truncate text-muted-foreground text-xs">
+					{formatRelativeTime(thread.lastMessageAt, i18n.locale)}
+				</div>
+			</Link>
+			<ThreadActions thread={thread} activeThreadId={activeThreadId} />
+		</div>
+	);
+}
+
+export function AgentThreadSidebar({
+	activeThreadId = null,
+	className,
+}: {
+	activeThreadId?: string | null;
+	className?: string;
+}) {
+	const { data: threads, isLoading } = useQuery(orpc.agent.threads.list.queryOptions());
+
+	return (
+		<aside className={cn("flex h-full min-h-0 flex-col border-e bg-muted/30", className)}>
+			<div className="flex h-14 shrink-0 items-center justify-between gap-3 border-b px-3">
+				<div className="flex min-w-0 items-center gap-2">
+					<ChatCircleDotsIcon className="shrink-0" />
+					<div className="min-w-0 truncate font-semibold">
+						<Trans>Threads</Trans>
+					</div>
+				</div>
+				<Button size="icon-sm" variant="ghost" nativeButton={false} render={<Link to="/dashboard/resumes" />}>
+					<ArrowLeftIcon />
+					<span className="sr-only">
+						<Trans>Back to resumes</Trans>
+					</span>
+				</Button>
+			</div>
+
+			<ScrollArea className="min-h-0 flex-1">
+				<div className="space-y-1 p-2">
+					<Button
+						variant="ghost"
+						className="mb-2 w-full justify-start border border-dashed bg-background/40 text-muted-foreground hover:text-foreground"
+						nativeButton={false}
+						render={<Link to="/agent/new" />}
+					>
+						<PlusIcon />
+						<Trans>New thread</Trans>
+					</Button>
+
+					{isLoading ? (
+						<div className="px-3 py-2 text-muted-foreground text-sm">
+							<Trans>Loading threads...</Trans>
+						</div>
+					) : null}
+
+					{threads?.length === 0 ? (
+						<div className="rounded-md border border-dashed p-3 text-muted-foreground text-sm">
+							<Trans>No threads yet.</Trans>
+						</div>
+					) : null}
+
+					{threads?.map((thread) => (
+						<ThreadRow key={thread.id} thread={thread} activeThreadId={activeThreadId} />
+					))}
+				</div>
+			</ScrollArea>
+		</aside>
+	);
+}

apps/web/src/routes/agent/-helpers/chat-attachments.ts

@@ -0,0 +1,38 @@
+import type { FileUIPart } from "ai";
+
+export type ChatAttachment = {
+	id: string;
+	filename: string;
+	mediaType: string;
+};
+
+export function attachmentToFilePart(attachment: ChatAttachment): FileUIPart {
+	return {
+		type: "file",
+		url: `agent-attachment:${attachment.id}`,
+		mediaType: attachment.mediaType,
+		filename: attachment.filename,
+	};
+}
+
+export function attachmentIdsFromTransportBody(body: object | undefined) {
+	return body && "attachmentIds" in body && Array.isArray(body.attachmentIds)
+		? body.attachmentIds.filter((id): id is string => typeof id === "string")
+		: undefined;
+}
+
+export function buildAgentChatSubmission(text: string, pendingAttachments: ChatAttachment[]) {
+	const trimmedText = text.trim();
+	const files = pendingAttachments.map(attachmentToFilePart);
+	const attachmentIds = pendingAttachments.map((attachment) => attachment.id);
+	const options = { body: { attachmentIds } };
+
+	if (trimmedText) {
+		return {
+			message: files.length > 0 ? { text: trimmedText, files } : { text: trimmedText },
+			options,
+		};
+	}
+
+	return { message: { files }, options };
+}

apps/web/src/routes/agent/index.tsx

@@ -0,0 +1,44 @@
+import { Trans } from "@lingui/react/macro";
+import { ArrowRightIcon, ChatCircleDotsIcon } from "@phosphor-icons/react";
+import { createFileRoute, Link } from "@tanstack/react-router";
+import { Button } from "@reactive-resume/ui/components/button";
+import { AgentThreadSidebar } from "./-components/thread-sidebar";
+
+export const Route = createFileRoute("/agent/")({
+	component: RouteComponent,
+});
+
+function RouteComponent() {
+	return (
+		<div className="flex h-svh bg-background">
+			<div className="w-72 shrink-0">
+				<AgentThreadSidebar />
+			</div>
+
+			<main className="grid min-w-0 flex-1 place-items-center p-6">
+				<div className="w-full max-w-xl rounded-md border bg-card p-6 shadow-sm">
+					<div className="flex items-start gap-4">
+						<div className="grid size-11 shrink-0 place-items-center rounded-md border bg-background">
+							<ChatCircleDotsIcon className="size-5" weight="fill" />
+						</div>
+						<div className="min-w-0 space-y-2">
+							<h1 className="font-semibold text-2xl tracking-tight">
+								<Trans>Select a thread</Trans>
+							</h1>
+							<p className="text-muted-foreground text-sm">
+								<Trans>Choose an existing conversation from the sidebar, or start a new draft-focused thread.</Trans>
+							</p>
+						</div>
+					</div>
+
+					<div className="mt-6 flex justify-end border-t pt-4">
+						<Button nativeButton={false} render={<Link to="/agent/new" />}>
+							<ArrowRightIcon />
+							<Trans>Start new thread</Trans>
+						</Button>
+					</div>
+				</div>
+			</main>
+		</div>
+	);
+}

apps/web/src/routes/agent/new.tsx

@@ -0,0 +1,27 @@
+import { createFileRoute } from "@tanstack/react-router";
+import z from "zod";
+import { NewThreadSetup } from "./-components/new-thread-setup";
+import { AgentThreadSidebar } from "./-components/thread-sidebar";
+
+const searchSchema = z.object({ resumeId: z.string().optional() });
+
+export const Route = createFileRoute("/agent/new")({
+	component: RouteComponent,
+	validateSearch: searchSchema,
+});
+
+function RouteComponent() {
+	const { resumeId } = Route.useSearch();
+
+	return (
+		<div className="flex h-svh bg-background">
+			<div className="w-72 shrink-0">
+				<AgentThreadSidebar />
+			</div>
+
+			<main className="grid min-w-0 flex-1 overflow-auto">
+				<NewThreadSetup resumeId={resumeId} />
+			</main>
+		</div>
+	);
+}

apps/web/src/routes/agent/route.tsx

@@ -0,0 +1,13 @@
+import { createFileRoute, Outlet, redirect } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/agent")({
+	component: RouteComponent,
+	beforeLoad: async ({ context }) => {
+		if (!context.session) throw redirect({ to: "/auth/login", replace: true });
+		return { session: context.session };
+	},
+});
+
+function RouteComponent() {
+	return <Outlet />;
+}