diff --git a/apps/api/src/main/kotlin/com/plot/api/routine/AgentRunQueryPersistence.kt b/apps/api/src/main/kotlin/com/plot/api/routine/AgentRunQueryPersistence.kt
index 9b7d82b..41f6066 100644
--- a/apps/api/src/main/kotlin/com/plot/api/routine/AgentRunQueryPersistence.kt
+++ b/apps/api/src/main/kotlin/com/plot/api/routine/AgentRunQueryPersistence.kt
@@ -15,17 +15,17 @@ class AgentRunQueryPersistence(
 		workspaceId,
 		id,
 	).firstOrNull()
-	fun chatExists(workspaceId: UUID, chatId: UUID): Boolean = sqlExecutor.queryForObject(
+	fun sessionExists(workspaceId: UUID, sessionId: UUID): Boolean = sqlExecutor.queryForObject(
 		"select exists(select 1 from work_sessions where workspace_id = ? and id = ?)",
 		Boolean::class.java,
 		workspaceId,
-		chatId,
+		sessionId,
 	) ?: false
-	fun listChatAgentRuns(workspaceId: UUID, chatId: UUID): List<AgentRunRecord> = sqlExecutor.query(
-		selectAgentRunSql + " where a.workspace_id = ? and a.work_session_id = ? and a.origin = 'CHAT' order by a.created_at, a.id",
+	fun listSessionAgentRuns(workspaceId: UUID, sessionId: UUID): List<AgentRunRecord> = sqlExecutor.query(
+		selectAgentRunSql + " where a.workspace_id = ? and a.work_session_id = ? order by a.created_at, a.id",
 		agentRunMapper,
 		workspaceId,
-		chatId,
+		sessionId,
 	)
 	fun findChatAgentRunByIdempotencyKey(
 		workspaceId: UUID,
diff --git a/apps/api/src/main/kotlin/com/plot/api/routine/ChatAgentAdmissionService.kt b/apps/api/src/main/kotlin/com/plot/api/routine/ChatAgentAdmissionService.kt
index a054082..63abead 100644
--- a/apps/api/src/main/kotlin/com/plot/api/routine/ChatAgentAdmissionService.kt
+++ b/apps/api/src/main/kotlin/com/plot/api/routine/ChatAgentAdmissionService.kt
@@ -185,11 +185,11 @@ class ChatAgentAdmissionService(
 		return run.toChatResponseFor(agentRunQueryPersistence)
 	}
 
-	fun listForChat(chatId: UUID): List<ChatAgentRunResponse> {
-		if (!agentRunQueryPersistence.chatExists(devContext.devWorkspaceId, chatId)) {
+	fun listForSession(sessionId: UUID): List<ChatAgentRunResponse> {
+		if (!agentRunQueryPersistence.sessionExists(devContext.devWorkspaceId, sessionId)) {
 			throw ApiException(HttpStatus.NOT_FOUND, "NOT_FOUND", "Chat not found")
 		}
-		return agentRunQueryPersistence.listChatAgentRuns(devContext.devWorkspaceId, chatId)
+		return agentRunQueryPersistence.listSessionAgentRuns(devContext.devWorkspaceId, sessionId)
 			.map { it.toChatResponseFor(agentRunQueryPersistence) }
 	}
 
diff --git a/apps/api/src/main/kotlin/com/plot/api/worksession/WorkSessionController.kt b/apps/api/src/main/kotlin/com/plot/api/worksession/WorkSessionController.kt
index d995f3f..4d64cde 100644
--- a/apps/api/src/main/kotlin/com/plot/api/worksession/WorkSessionController.kt
+++ b/apps/api/src/main/kotlin/com/plot/api/worksession/WorkSessionController.kt
@@ -27,7 +27,7 @@ class WorkSessionController(
 	}
 
 	@GetMapping("/{id}/agent-runs")
-	fun listAgentRuns(@PathVariable id: UUID): List<ChatAgentRunResponse> = chatAgentAdmissionService.listForChat(id)
+	fun listAgentRuns(@PathVariable id: UUID): List<ChatAgentRunResponse> = chatAgentAdmissionService.listForSession(id)
 
 	@PostMapping
 	fun create(@RequestBody request: CreateWorkSessionRequest): WorkSessionResponse {
diff --git a/apps/api/src/test/kotlin/com/plot/api/routine/AgentRunWorkerIntegrationTest.kt b/apps/api/src/test/kotlin/com/plot/api/routine/AgentRunWorkerIntegrationTest.kt
index 9549760..f3bf408 100644
--- a/apps/api/src/test/kotlin/com/plot/api/routine/AgentRunWorkerIntegrationTest.kt
+++ b/apps/api/src/test/kotlin/com/plot/api/routine/AgentRunWorkerIntegrationTest.kt
@@ -223,6 +223,14 @@ class AgentRunWorkerIntegrationTest {
 			routinePersistence.find(routine.workspaceId, routine.id)?.activityCursorSequence,
 		)
 		assertEquals(1, count("select count(*) from content_packs where generation_run_id = ?", artifactWorkflowRunId))
+		val routineChatId = jdbcTemplate.queryForObject(
+			"select work_session_id from agent_runs where id = ?",
+			UUID::class.java,
+			agentRunId,
+		)!!
+		val historyRuns = chatAdmission.listForSession(routineChatId)
+		assertEquals(listOf(agentRunId), historyRuns.map { it.id })
+		assertNotNull(historyRuns.single().artifactId)
 		assertEquals(3, agentModel.requests.size)
 		assertTrue(agentModel.requests.none { request ->
 			request.toString().contains("MUTATED SECRET") || request.toString().contains("Authorization")
diff --git a/apps/web/src/app/(app)/layout.tsx b/apps/web/src/app/(app)/layout.tsx
index 5153fe8..8283a5b 100644
--- a/apps/web/src/app/(app)/layout.tsx
+++ b/apps/web/src/app/(app)/layout.tsx
@@ -1,3 +1,5 @@
+import "@astryxdesign/core/astryx.css";
+
 import type { ReactNode } from "react";
 
 import { ProductShell } from "@/components/layout/product-shell";
diff --git a/apps/web/src/app/globals.css b/apps/web/src/app/globals.css
index a92c29b..05b0b0a 100644
--- a/apps/web/src/app/globals.css
+++ b/apps/web/src/app/globals.css
@@ -1,4 +1,10 @@
-@import 'tailwindcss';
+@layer reset, theme, base, astryx-base, astryx-theme, components, utilities;
+
+@import 'tailwindcss/theme.css' layer(theme);
+@import 'tailwindcss/preflight.css' layer(base);
+@import '@astryxdesign/core/reset.css';
+@import '@astryxdesign/core/tailwind-theme.css';
+@import 'tailwindcss/utilities.css' layer(utilities);
 
 @custom-variant dark (&:is(.dark *));
 
diff --git a/apps/web/src/app/layout.tsx b/apps/web/src/app/layout.tsx
index 1869213..57304f4 100644
--- a/apps/web/src/app/layout.tsx
+++ b/apps/web/src/app/layout.tsx
@@ -60,6 +60,7 @@ export default function RootLayout({
   return (
     <html
       lang="en"
+      data-theme="light"
       className={`${instrumentSans.variable} ${instrumentSerif.variable} ${jetbrainsMono.variable} h-full antialiased`}
     >
       <body className="min-h-full">{children}</body>
diff --git a/apps/web/src/components/layout/product-shell.test.tsx b/apps/web/src/components/layout/product-shell.test.tsx
index ba460d9..a03978c 100644
--- a/apps/web/src/components/layout/product-shell.test.tsx
+++ b/apps/web/src/components/layout/product-shell.test.tsx
@@ -1,6 +1,6 @@
 // @vitest-environment jsdom
 
-import { render, screen } from "@testing-library/react";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 
 const navigation = vi.hoisted(() => ({ pathname: "/artifacts" }));
@@ -10,19 +10,20 @@ vi.mock("next/navigation", () => ({
 }));
 
 vi.mock("@/components/layout/product-sidebar", () => ({
-  ProductSidebar: () => null,
+  ProductSidebar: ({ onThemeChange }: { onThemeChange: (theme: "system" | "light" | "dark") => void }) => (
+    <div>
+      <button type="button" onClick={() => onThemeChange("light")}>Use light theme</button>
+      <button type="button" onClick={() => onThemeChange("dark")}>Use dark theme</button>
+    </div>
+  ),
 }));
 
 import { ProductShell } from "./product-shell";
 
-describe("ProductShell mobile navigation", () => {
+describe("ProductShell", () => {
   beforeEach(() => {
     navigation.pathname = "/artifacts";
-    vi.stubGlobal("matchMedia", () => ({
-      matches: false,
-      addEventListener: vi.fn(),
-      removeEventListener: vi.fn(),
-    }));
+    document.documentElement.dataset.theme = "light";
   });
 
   it("links directly to workspace Settings and marks Artifacts as current", () => {
@@ -53,4 +54,23 @@ describe("ProductShell mobile navigation", () => {
     expect(screen.getByRole("link", { name: "Chat" })).not.toHaveAttribute("aria-current");
     expect(screen.getByRole("link", { name: "Artifacts" })).not.toHaveAttribute("aria-current");
   });
+
+  it("keeps the document theme in sync with the product theme", async () => {
+    const { unmount } = render(
+      <ProductShell>
+        <div>Content</div>
+      </ProductShell>,
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: "Use dark theme" }));
+    await waitFor(() => expect(document.documentElement.dataset.theme).toBe("dark"));
+
+    fireEvent.click(screen.getByRole("button", { name: "Use light theme" }));
+    await waitFor(() => expect(document.documentElement.dataset.theme).toBe("light"));
+
+    fireEvent.click(screen.getByRole("button", { name: "Use dark theme" }));
+    await waitFor(() => expect(document.documentElement.dataset.theme).toBe("dark"));
+    unmount();
+    expect(document.documentElement.dataset.theme).toBe("light");
+  });
 });
diff --git a/apps/web/src/components/layout/product-shell.tsx b/apps/web/src/components/layout/product-shell.tsx
index 7bca425..6854477 100644
--- a/apps/web/src/components/layout/product-shell.tsx
+++ b/apps/web/src/components/layout/product-shell.tsx
@@ -38,6 +38,16 @@ export function ProductShell({ children }: { children: ReactNode }) {
 
   const darkMode = theme === "dark" || (theme === "system" && systemDark);
 
+  useEffect(() => {
+    document.documentElement.dataset.theme = darkMode ? "dark" : "light";
+  }, [darkMode]);
+
+  useEffect(() => {
+    return () => {
+      document.documentElement.dataset.theme = "light";
+    };
+  }, []);
+
   return (
     <div className={darkMode ? "dark" : undefined}>
       <div className="flex min-h-dvh bg-[#eef0f3] text-[#18181b] dark:bg-[#202126] dark:text-[#f4f4f5] lg:h-dvh lg:overflow-hidden">
diff --git a/apps/web/src/features/artifacts/artifact-document-surface.tsx b/apps/web/src/features/artifacts/artifact-document-surface.tsx
index 17f8263..56137b8 100644
--- a/apps/web/src/features/artifacts/artifact-document-surface.tsx
+++ b/apps/web/src/features/artifacts/artifact-document-surface.tsx
@@ -15,7 +15,7 @@ type ArtifactDocumentSurfaceProps = {
   onDraftChange?: (draft: Omit<SaveArtifactInput, "expectedRevisionNumber">) => void;
   onSaveArtifact: (input: SaveArtifactInput) => Promise<Artifact>;
   onPackChange: (pack: Artifact) => void;
-  presentation?: "panel" | "canvas";
+  presentation?: "panel" | "canvas" | "workspace";
   saveRequestToken?: number;
 };
 
@@ -35,10 +35,18 @@ export function ArtifactDocumentSurface({
   const readOnly = Boolean(historical);
   const shownPack = historical?.artifact ?? pack;
 
-  if (presentation === "canvas") {
+  if (presentation === "canvas" || presentation === "workspace") {
+    const workspacePresentation = presentation === "workspace";
     return (
-      <article aria-label="Artifact document surface" className="min-h-[min(956px,calc(100dvh-128px))] w-full max-w-[980px] overflow-hidden rounded-[8px] border border-black/10 bg-white px-[clamp(28px,7.35vw,72px)] pb-[52px] pt-16 shadow-[0_8px_20px_rgba(0,0,0,0.08)] dark:border-white/10 dark:bg-[#202024]">
-        <h1 className="font-display text-[30px] leading-[38px] text-black/88 dark:text-white/90">{shownPack.title || "Generated artifact"}</h1>
+      <article
+        aria-label="Artifact document surface"
+        className={workspacePresentation
+          ? "min-h-full w-full max-w-[980px] px-6 pb-16 text-black/88 dark:text-white/90"
+          : "min-h-[min(956px,calc(100dvh-128px))] w-full max-w-[980px] overflow-hidden rounded-[8px] border border-black/10 bg-white px-[clamp(28px,7.35vw,72px)] pb-[52px] pt-16 shadow-[0_8px_20px_rgba(0,0,0,0.08)] dark:border-white/10 dark:bg-[#202024]"}
+      >
+        {!workspacePresentation ? (
+          <h1 className="font-display text-[30px] leading-[38px] text-black/88 dark:text-white/90">{shownPack.title || "Generated artifact"}</h1>
+        ) : null}
         <CitedDraftEditor
           pack={shownPack}
           embedded
diff --git a/apps/web/src/features/chat/chat-active-workspace.tsx b/apps/web/src/features/chat/chat-active-workspace.tsx
index 55881e3..d6376b6 100644
--- a/apps/web/src/features/chat/chat-active-workspace.tsx
+++ b/apps/web/src/features/chat/chat-active-workspace.tsx
@@ -1,12 +1,19 @@
 "use client";
 
-import { FileText, MoreHorizontal } from "lucide-react";
+import { Eye, History, MoreHorizontal, Save, X } from "lucide-react";
 import { useRouter } from "next/navigation";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { type CSSProperties, useCallback, useEffect, useMemo, useRef, useState } from "react";
 
+import {
+  ChatMessage,
+  ChatMessageBubble,
+  ChatMessageList,
+} from "@astryxdesign/core/Chat";
+import { ResizeHandle, useResizable } from "@astryxdesign/core/Resizable";
 import type { ChatAgentRun, SourceReference, WorkSessionSummary as ChatSummary } from "@plot/api-client";
 import { ArtifactDocumentSurface } from "@/features/artifacts/artifact-document-surface";
 import { ArtifactHistoryPanel } from "@/features/citations/artifact-history-panel";
+import { ExportDialog } from "@/features/citations/export-dialog";
 import { ChatComposer } from "@/features/chat/chat-composer";
 import { AgentActivityDetail, ChatActivityPanel, EmptyArtifactState, ErrorNotice } from "@/features/chat/chat-activity";
 import { chatHref, toComposerReferences } from "@/features/chat/chat-workspace-utils";
@@ -22,11 +29,30 @@ type ChatActiveWorkspaceProps = {
   requestedArtifactId: string | null;
 };
 
+const chatBottomFade: CSSProperties = {
+  maskImage: "linear-gradient(black calc(100% - 16px), transparent 100%)",
+  WebkitMaskImage: "linear-gradient(black calc(100% - 16px), transparent 100%)",
+};
+
+const toolbarBottomFade: CSSProperties = {
+  maskImage: "linear-gradient(black calc(100% - 12px), transparent 100%)",
+  WebkitMaskImage: "linear-gradient(black calc(100% - 12px), transparent 100%)",
+};
+
 export function ChatActiveWorkspace({ activeChat, references, sourceError, requestedAgentId, requestedArtifactId }: ChatActiveWorkspaceProps) {
   const router = useRouter();
-  const [mobilePanel, setMobilePanel] = useState<"assistant" | "history" | null>("assistant");
+  const [mobilePanel, setMobilePanel] = useState<"assistant" | "history" | null>(null);
+  const [artifactPanelOpen, setArtifactPanelOpen] = useState(false);
+  const [artifactHistoryOpen, setArtifactHistoryOpen] = useState(false);
+  const [artifactSaveRequestToken, setArtifactSaveRequestToken] = useState(0);
+  const artifactPanel = useResizable({ defaultSize: 720, minSizePx: 420, maxSizePx: 1200 });
+  const resizeArtifactPanel = artifactPanel.resize;
   const mobileAssistantTriggerRef = useRef<HTMLButtonElement>(null);
   const mobileHistoryTriggerRef = useRef<HTMLButtonElement>(null);
+  const artifactTriggerRef = useRef<HTMLButtonElement>(null);
+  const artifactHistoryTriggerRef = useRef<HTMLButtonElement>(null);
+  const workspaceRef = useRef<HTMLDivElement>(null);
+  const artifactPanelInitializedRef = useRef(false);
   const previousMobilePanelRef = useRef<"assistant" | "history" | null>(null);
 
   const onAgentArtifact = useCallback((run: ChatAgentRun) => {
@@ -48,6 +74,17 @@ export function ChatActiveWorkspace({ activeChat, references, sourceError, reque
     requestedArtifactId,
     selectedActivityArtifactId: agent.selectedActivity?.artifactId ?? null,
   });
+  const shownArtifact = document.historicalArtifact?.artifact ?? document.currentArtifact;
+  const artifactMetrics = useMemo(() => {
+    if (!shownArtifact) return null;
+    const draft = document.historicalArtifact ? undefined : document.drafts[shownArtifact.id];
+    const statements = draft?.statements ?? shownArtifact.variant.sentences;
+    const text = statements.map((statement) => statement.body).join("\n");
+    return {
+      characters: text.length.toLocaleString("en-US"),
+      words: (text.trim() ? text.trim().split(/\s+/u).length : 0).toLocaleString("en-US"),
+    };
+  }, [document.drafts, document.historicalArtifact, shownArtifact]);
 
   useEffect(() => {
     const previous = previousMobilePanelRef.current;
@@ -57,6 +94,15 @@ export function ChatActiveWorkspace({ activeChat, references, sourceError, reque
     previousMobilePanelRef.current = mobilePanel;
   }, [mobilePanel]);
 
+  useEffect(() => {
+    if (!artifactPanelOpen || artifactPanelInitializedRef.current) return;
+    if (!window.matchMedia("(min-width: 1024px)").matches) return;
+    const workspaceWidth = workspaceRef.current?.getBoundingClientRect().width;
+    if (!workspaceWidth) return;
+    resizeArtifactPanel(Math.round(workspaceWidth / 2));
+    artifactPanelInitializedRef.current = true;
+  }, [artifactPanelOpen, resizeArtifactPanel]);
+
   const selectActivity = useCallback((activity: ChatAgentRun) => {
     document.resetHistory();
     if (!activity.artifactId) setMobilePanel("assistant");
@@ -69,60 +115,70 @@ export function ChatActiveWorkspace({ activeChat, references, sourceError, reque
       .map((activity) => ({
         id: activity.id,
         role: "user" as const,
-        timestamp: formatActivity(activity.createdAt),
-        createdAt: activity.createdAt,
         content: activity.instruction!,
       }));
     return current.length
       ? current
-      : [{ id: activeChat.id, role: "user" as const, timestamp: "Request", createdAt: null, content: activeChat.title || "Untitled request" }];
+      : [{ id: activeChat.id, role: "user" as const, content: activeChat.title || "Untitled request" }];
   }, [activeChat.id, activeChat.title, agent.activities]);
 
   return (
-    <div className="flex h-screen min-h-0 bg-white dark:bg-[#111113]">
+    <div ref={workspaceRef} className="relative flex h-[calc(100dvh-49px)] min-h-0 bg-[#fbfbf8] dark:bg-[#111113] lg:h-full">
       <div className="flex min-w-0 flex-1 flex-col">
-        <header className="flex min-h-14 shrink-0 items-center gap-4 bg-white px-4 py-3 dark:bg-[#111113] sm:px-6 lg:px-8">
-          <div className="flex min-w-0 items-center gap-2 text-sm font-semibold text-black/78 dark:text-white/82">
-            <FileText aria-hidden="true" className="size-4 shrink-0 text-black/50 dark:text-white/50" />
-            <h1 className="truncate">{activeChat.title || "Untitled chat"}</h1>
+        <header className="flex min-h-14 shrink-0 items-center bg-[#fbfbf8]/90 px-4 py-3 backdrop-blur-xl dark:bg-[#111113]/90" style={toolbarBottomFade}>
+          <div className="flex w-full min-w-0 items-center justify-start gap-2 text-sm font-semibold text-black/78 dark:text-white/82">
+            <h1 className="truncate text-left">{activeChat.title || "Untitled chat"}</h1>
             <MoreHorizontal aria-hidden="true" className="size-4 shrink-0 text-black/45 dark:text-white/45" />
           </div>
         </header>
 
-        <div className="min-h-0 flex-1 overflow-y-auto px-4 pb-8 pt-4 sm:px-6 lg:px-8 lg:pt-6">
-          <div className="mx-auto max-w-7xl space-y-5">
-            <div className="min-w-0">
-              <section aria-label="Chat conversation" className="mb-5 space-y-3">
-                {messages.map((message) => (
-                  <article key={message.id} className="flex justify-end">
-                    <div className="max-w-[min(720px,92%)] rounded-[20px] bg-black/[0.055] px-4 py-3 text-sm leading-6 text-black/80 dark:bg-white/10 dark:text-white/82">
-                      <p>{message.content}</p>
-                      <time dateTime={message.createdAt ?? undefined} className="mt-1 block text-right text-xs text-black/40 dark:text-white/42">{message.timestamp}</time>
-                    </div>
-                  </article>
-                ))}
-              </section>
-              <AgentActivityDetail run={agent.agentRun} busy={agent.agentBusy} error={agent.agentError} instruction={agent.agentInstruction} />
-              {document.artifactError ? <ErrorNotice message={document.artifactError} /> : null}
-              {document.currentArtifact ? (
-                <ArtifactDocumentSurface
-                  pack={document.currentArtifact}
-                  historical={document.historicalArtifact}
-                  client={plotApiClient}
-                  initialDraft={document.historicalArtifact ? undefined : document.drafts[document.currentArtifact.id]}
-                  saveState={document.saveState}
-                  onSaveStateChange={document.onSaveStateChange}
-                  onDraftChange={document.onDraftChange}
-                  onSaveArtifact={document.onSaveArtifact}
-                  onPackChange={document.onPackChange}
-                />
-              ) : !agent.activitiesLoading && !agent.agentBusy && !agent.agentRun ? (
+        <div className="min-h-0 flex-1 overflow-y-auto bg-[#fbfbf8] dark:bg-[#16171a]" style={chatBottomFade}>
+          <div className="mx-auto w-full max-w-[760px] px-4 pb-12 pt-8 sm:px-6">
+            <ChatMessageList density="compact" gap={4} style={{ flex: "none" }}>
+              {messages.map((message) => (
+                <ChatMessage key={message.id} sender="user">
+                  <ChatMessageBubble className="max-w-[min(680px,92%)]">
+                    <p>{message.content}</p>
+                  </ChatMessageBubble>
+                </ChatMessage>
+              ))}
+              <AgentActivityDetail
+                run={agent.agentRun ?? agent.selectedActivity}
+                busy={agent.agentBusy}
+                error={agent.agentError}
+                instruction={agent.agentInstruction}
+                references={references}
+                artifactAction={document.currentArtifact ? (
+                  <button
+                    ref={artifactTriggerRef}
+                    id="artifact-preview"
+                    type="button"
+                    aria-controls="artifact-editor-panel"
+                    aria-expanded={artifactPanelOpen}
+                    onClick={() => setArtifactPanelOpen(true)}
+                    className="flex w-full items-center justify-between gap-4 rounded-xl border border-black/[0.08] bg-white/70 px-4 py-3 text-left transition hover:bg-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-black/20 dark:border-white/10 dark:bg-white/[0.04] dark:hover:bg-white/[0.07] dark:focus-visible:ring-white/25"
+                  >
+                    <span className="min-w-0 truncate text-sm font-medium text-black/82 dark:text-white/85">
+                      {document.currentArtifact.title || "Generated artifact"}
+                    </span>
+                    <span className="inline-flex shrink-0 items-center gap-1.5 rounded-full bg-black/[0.035] px-3 py-1.5 text-xs font-medium text-black/50 dark:bg-white/[0.06] dark:text-white/55">
+                      <Eye aria-hidden="true" className="size-3.5" />
+                      Open artifact
+                    </span>
+                  </button>
+                ) : undefined}
+              />
+            </ChatMessageList>
+
+            {document.artifactError ? <ErrorNotice message={document.artifactError} /> : null}
+            {!document.currentArtifact && !agent.activitiesLoading && !agent.agentBusy && !agent.agentRun ? (
+              <div className="mt-5">
                 <EmptyArtifactState hasSelection={Boolean(agent.selectedActivity)} />
-              ) : null}
-            </div>
+              </div>
+            ) : null}
 
-            <div className="lg:hidden">
-              <div role="tablist" aria-label="Chat workspace panels" className="flex gap-2 rounded-xl border border-black/10 bg-white p-2 dark:border-white/10 dark:bg-white/[0.04]">
+            <div className="mt-5 lg:hidden">
+              <div role="tablist" aria-label="Chat workspace panels" className="flex gap-2">
                 <button
                   ref={mobileAssistantTriggerRef}
                   type="button"
@@ -131,7 +187,7 @@ export function ChatActiveWorkspace({ activeChat, references, sourceError, reque
                   aria-expanded={mobilePanel === "assistant"}
                   aria-controls="mobile-chat-assistant-panel"
                   onClick={() => setMobilePanel((current) => current === "assistant" ? null : "assistant")}
-                  className={`min-h-10 flex-1 rounded-lg px-3 text-sm font-semibold transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-amber-400 ${mobilePanel === "assistant" ? "bg-black text-white dark:bg-white dark:text-black" : "text-black/60 hover:bg-black/[0.04] dark:text-white/62 dark:hover:bg-white/[0.06]"}`}
+                  className={`min-h-8 rounded-full border px-3 text-xs font-medium transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-black/20 dark:focus-visible:ring-white/25 ${mobilePanel === "assistant" ? "border-black bg-black text-white dark:border-white dark:bg-white dark:text-black" : "border-black/10 bg-white text-black/55 hover:bg-black/[0.03] dark:border-white/10 dark:bg-white/[0.04] dark:text-white/58 dark:hover:bg-white/[0.07]"}`}
                 >
                   Assistant
                 </button>
@@ -144,7 +200,7 @@ export function ChatActiveWorkspace({ activeChat, references, sourceError, reque
                   aria-expanded={mobilePanel === "history"}
                   aria-controls="mobile-chat-history-panel"
                   onClick={() => setMobilePanel((current) => current === "history" ? null : "history")}
-                  className={`min-h-10 flex-1 rounded-lg px-3 text-sm font-semibold transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-amber-400 disabled:cursor-not-allowed disabled:opacity-40 ${mobilePanel === "history" ? "bg-black text-white dark:bg-white dark:text-black" : "text-black/60 hover:bg-black/[0.04] dark:text-white/62 dark:hover:bg-white/[0.06]"}`}
+                  className={`min-h-8 rounded-full border px-3 text-xs font-medium transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-black/20 disabled:cursor-not-allowed disabled:opacity-40 dark:focus-visible:ring-white/25 ${mobilePanel === "history" ? "border-black bg-black text-white dark:border-white dark:bg-white dark:text-black" : "border-black/10 bg-white text-black/55 hover:bg-black/[0.03] dark:border-white/10 dark:bg-white/[0.04] dark:text-white/58 dark:hover:bg-white/[0.07]"}`}
                 >
                   History
                 </button>
@@ -174,21 +230,152 @@ export function ChatActiveWorkspace({ activeChat, references, sourceError, reque
             </div>
           </div>
         </div>
+
         <ChatComposer
           id="chat-composer"
           key={references.map((reference) => reference.id).join(":") || "no-references"}
+          variant="dock"
           placeholder="Ask Plot to create another source-backed artifact..."
-          onSubmit={(message, ids) => void agent.submitMessage(message, ids, document.clearArtifactSelection)}
+          onSubmit={(message, ids) => {
+            setArtifactPanelOpen(false);
+            void agent.submitMessage(message, ids, document.clearArtifactSelection);
+          }}
           references={toComposerReferences(references)}
           busy={document.artifactLoading || agent.agentBusy || agent.activitiesLoading}
         />
       </div>
+      {artifactPanelOpen && document.currentArtifact ? (
+        <ResizeHandle
+          direction="horizontal"
+          isReversed
+          hasDivider
+          isAlwaysVisible={false}
+          label="Resize artifact document"
+          resizable={artifactPanel.props}
+          className="hidden lg:block"
+        />
+      ) : null}
+      {artifactPanelOpen && document.currentArtifact ? (
+        <aside
+          id="artifact-editor-panel"
+          aria-label="Artifact document panel"
+          className="absolute inset-0 z-30 flex min-w-0 flex-col border-l border-black/[0.08] bg-[#fbfbf8] dark:border-white/10 dark:bg-[#16171a] lg:relative lg:w-[var(--artifact-panel-width)] lg:max-w-[calc(100%-420px)] lg:shrink-0"
+          style={{ "--artifact-panel-width": `${artifactPanel.size}px` } as CSSProperties}
+        >
+          <header className="relative z-20 flex min-h-16 shrink-0 items-center justify-between gap-3 bg-[#fbfbf8]/85 px-4 backdrop-blur-xl dark:bg-[#16171a]/85">
+            <div className="flex items-center gap-1">
+              {!document.historicalArtifact && shownArtifact ? (
+                <ExportDialog pack={shownArtifact} client={plotApiClient} presentation="copy" />
+              ) : null}
+              <button
+                ref={artifactHistoryTriggerRef}
+                type="button"
+                aria-label="Artifact history"
+                aria-controls="artifact-history-drawer"
+                aria-expanded={artifactHistoryOpen}
+                onClick={() => setArtifactHistoryOpen((open) => !open)}
+                className="inline-flex min-h-8 items-center gap-1.5 rounded-lg px-2.5 text-xs font-medium text-black/55 transition hover:bg-black/[0.04] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-black/20 dark:text-white/58 dark:hover:bg-white/[0.08] dark:focus-visible:ring-white/25"
+              >
+                <History aria-hidden="true" className="size-3.5" />
+                History
+              </button>
+            </div>
+            <div className="flex items-center gap-2">
+              <span role="status" aria-live="polite" className="hidden text-xs text-black/42 dark:text-white/45 sm:inline">
+                {document.saveState === "saving" ? "Saving…" : document.saveState === "dirty" ? "Unsaved changes" : document.saveState === "error" ? "Save needs attention" : "Saved"}
+              </span>
+              {!document.historicalArtifact ? (
+                <button
+                  type="button"
+                  disabled={document.saveState === "saving"}
+                  onClick={() => setArtifactSaveRequestToken((value) => value + 1)}
+                  className="inline-flex min-h-8 items-center gap-1.5 rounded-lg bg-black px-3 text-xs font-medium text-white transition hover:bg-black/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-black/20 disabled:pointer-events-none disabled:opacity-40 dark:bg-white dark:text-black dark:hover:bg-white/85 dark:focus-visible:ring-white/25"
+                >
+                  <Save aria-hidden="true" className="size-3.5" />
+                  Save draft
+                </button>
+              ) : null}
+              <button
+                type="button"
+                aria-label="Close artifact"
+                onClick={() => {
+                  setArtifactHistoryOpen(false);
+                  setArtifactPanelOpen(false);
+                  artifactTriggerRef.current?.focus();
+                }}
+                className="inline-flex size-8 shrink-0 items-center justify-center rounded-full text-black/45 transition hover:bg-black/[0.04] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-black/20 dark:text-white/50 dark:hover:bg-white/[0.08] dark:focus-visible:ring-white/25"
+              >
+                <X aria-hidden="true" className="size-4" />
+              </button>
+            </div>
+          </header>
+          {shownArtifact ? (
+            <div className="relative z-[9] shrink-0 bg-[#fbfbf8] px-6 pb-3 pt-1 dark:bg-[#18181b]">
+              <div className="truncate text-[16px] font-medium leading-[22px] text-black/72 dark:text-white/76">{shownArtifact.title || "Generated artifact"}</div>
+              {artifactMetrics ? (
+                <div className="mt-1 text-[12px] leading-4 text-black/38 dark:text-white/42">{artifactMetrics.characters} characters · {artifactMetrics.words} words</div>
+              ) : null}
+            </div>
+          ) : null}
+          <div role="region" aria-label="Artifact document body" className="relative min-h-0 flex-1 overflow-y-auto bg-[#fbfbf8] dark:bg-[#18181b]">
+            <div aria-hidden="true" className="pointer-events-none sticky top-0 z-10 -mb-1.5 h-1.5 w-full bg-gradient-to-b from-[#fbfbf8] to-transparent dark:from-[#18181b]" />
+            <div className="flex items-start justify-center">
+              <ArtifactDocumentSurface
+                presentation="workspace"
+                pack={document.currentArtifact}
+                historical={document.historicalArtifact}
+                client={plotApiClient}
+                initialDraft={document.historicalArtifact ? undefined : document.drafts[document.currentArtifact.id]}
+                saveState={document.saveState}
+                saveRequestToken={artifactSaveRequestToken}
+                onSaveStateChange={document.onSaveStateChange}
+                onDraftChange={document.onDraftChange}
+                onSaveArtifact={document.onSaveArtifact}
+                onPackChange={document.onPackChange}
+              />
+            </div>
+          </div>
+          {artifactHistoryOpen ? (
+            <aside
+              id="artifact-history-drawer"
+              aria-label="Artifact history drawer"
+              className="absolute inset-y-0 right-0 z-30 flex w-[min(360px,100%)] flex-col border-l border-black/[0.08] bg-[#fbfbf8] shadow-[-12px_0_28px_rgba(0,0,0,0.08)] dark:border-white/10 dark:bg-[#1b1c20]"
+            >
+              <header className="flex min-h-16 shrink-0 items-center justify-between px-4">
+                <div>
+                  <div className="text-sm font-medium text-black/72 dark:text-white/76">History</div>
+                  <div className="mt-0.5 text-xs text-black/38 dark:text-white/42">Content snapshots</div>
+                </div>
+                <button
+                  type="button"
+                  aria-label="Close artifact history"
+                  onClick={() => {
+                    setArtifactHistoryOpen(false);
+                    artifactHistoryTriggerRef.current?.focus();
+                  }}
+                  className="inline-flex size-8 items-center justify-center rounded-full text-black/45 transition hover:bg-black/[0.04] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-black/20 dark:text-white/50 dark:hover:bg-white/[0.08] dark:focus-visible:ring-white/25"
+                >
+                  <X aria-hidden="true" className="size-4" />
+                </button>
+              </header>
+              <div className="min-h-0 flex-1 overflow-y-auto px-4 pb-4">
+                <ArtifactHistoryPanel
+                  variantId={document.currentArtifact.variant.id}
+                  client={plotApiClient}
+                  refreshKey={document.currentArtifact.variant.revisionId}
+                  selectedPosition={document.historicalPosition}
+                  presentation="drawer"
+                  onSelect={(detail, position) => {
+                    document.selectHistoricalArtifact(detail, position);
+                    setArtifactHistoryOpen(false);
+                  }}
+                />
+              </div>
+            </aside>
+          ) : null}
+        </aside>
+      ) : null}
     </div>
   );
 }
 
-function formatActivity(value: string | null) {
-  if (!value) return "";
-  const date = new Date(value);
-  return Number.isNaN(date.getTime()) ? "" : date.toLocaleDateString(undefined, { month: "short", day: "numeric" });
-}
diff --git a/apps/web/src/features/chat/chat-activity.tsx b/apps/web/src/features/chat/chat-activity.tsx
index 00d086d..bcb8358 100644
--- a/apps/web/src/features/chat/chat-activity.tsx
+++ b/apps/web/src/features/chat/chat-activity.tsx
@@ -1,10 +1,21 @@
 "use client";
 
+import {
+  ChatMessage,
+  ChatMessageBubble,
+  ChatMessageMetadata,
+  ChatSystemMessage,
+  ChatToolCalls,
+} from "@astryxdesign/core/Chat";
+import { Timestamp } from "@astryxdesign/core/Timestamp";
+import { Text } from "@astryxdesign/core/Text";
 import { LoaderCircle } from "lucide-react";
+import type { ReactNode } from "react";
 
-import type { ChatAgentRun } from "@plot/api-client";
+import type { ChatAgentRun, SourceReference } from "@plot/api-client";
 import { isTerminalChatAgentStatus } from "@/lib/chat-agent-polling";
 import { agentProgressLabel, agentStatusLabel, formatActivity } from "@/features/chat/chat-workspace-utils";
+import { ChatSourceCitations } from "@/features/chat/chat-source-citations";
 
 export function ChatActivityPanel({
   activities,
@@ -80,21 +91,49 @@ export function ChatActivityPanel({
   );
 }
 
-export function AgentActivityDetail({ run, busy, error, instruction }: { run: ChatAgentRun | null; busy: boolean; error: string; instruction: string }) {
+export function AgentActivityDetail({ run, busy, error, instruction, references, artifactAction }: { run: ChatAgentRun | null; busy: boolean; error: string; instruction: string; references: SourceReference[]; artifactAction?: ReactNode }) {
   if (!run && !busy && !error) return null;
   const status = run?.status ?? "QUEUED";
   const linkedArtifact = Boolean(run?.artifactId);
+  const toolStatus = error || run?.status === "FAILED"
+    ? "error"
+    : linkedArtifact || run?.status === "SUCCEEDED"
+      ? "complete"
+      : "running";
+
   return (
-    <section aria-label="Agent request details" className="mb-5 space-y-3">
-      <div className="rounded-xl border border-black/10 bg-black/[0.025] px-4 py-3 text-sm text-black/62 dark:border-white/10 dark:bg-white/[0.04] dark:text-white/62">
-        <div className="flex items-center gap-2 font-medium text-black/75 dark:text-white/78">
-          {!isTerminalChatAgentStatus(status) && !linkedArtifact ? <LoaderCircle aria-hidden="true" className="size-3.5 animate-spin" /> : null}
-          <span>Agent · {agentStatusLabel(status)}</span>
-        </div>
-        <p className="mt-1 text-xs leading-5 text-black/48 dark:text-white/50">
-          {linkedArtifact ? "Sources are collected. Plot is preparing the grounded artifact…" : instruction ? agentProgressLabel(status) : "Plot is preparing the request…"}
-        </p>
-      </div>
+    <section aria-label="Agent request details">
+      <ChatMessage sender="assistant">
+        <ChatMessageBubble
+          variant="ghost"
+          className="w-full min-w-0 max-w-full"
+          metadata={
+            <ChatMessageMetadata
+              className="mt-4"
+              timestamp={run ? <Timestamp value={run.createdAt} format="time" /> : undefined}
+              footer={
+                <Text type="supporting" color="secondary">
+                  Source agent
+                </Text>
+              }
+            />
+          }
+        >
+          <p className="text-sm leading-6 text-black/65 dark:text-white/68">
+            {linkedArtifact ? "The source review is complete. The artifact is ready below." : instruction ? agentProgressLabel(status) : "Plot is preparing the request…"}
+          </p>
+          <ChatToolCalls
+            calls={[{
+              name: "Read connected sources",
+              status: toolStatus,
+              errorMessage: error || (run?.status === "FAILED" ? "Agent stopped before an artifact was produced." : undefined),
+            }]}
+            defaultIsExpanded={false}
+          />
+          <ChatSourceCitations references={references} />
+          {artifactAction ? <div className="mt-4">{artifactAction}</div> : null}
+        </ChatMessageBubble>
+      </ChatMessage>
       {error ? <ErrorNotice message={error} /> : null}
       {run?.status === "FAILED" && !error ? <ErrorNotice message={`Agent stopped before an artifact was produced${run.failureCode ? ` (${run.failureCode})` : ""}. It remains available as chat activity.`} /> : null}
     </section>
@@ -102,7 +141,11 @@ export function AgentActivityDetail({ run, busy, error, instruction }: { run: Ch
 }
 
 export function EmptyArtifactState({ hasSelection }: { hasSelection: boolean }) {
-  return <div className="rounded-xl border border-dashed border-black/10 bg-black/[0.02] px-4 py-6 text-sm leading-6 text-black/48 dark:border-white/10 dark:bg-white/[0.03] dark:text-white/52">{hasSelection ? "This Agent request is still working or did not produce an artifact. Review its activity above." : "Select an Agent request to inspect its artifact."}</div>;
+  return (
+    <ChatSystemMessage>
+      {hasSelection ? "This Agent request is still working or did not produce an artifact. Review its activity above." : "Select an Agent request to inspect its artifact."}
+    </ChatSystemMessage>
+  );
 }
 
 export function ErrorNotice({ message }: { message: string }) {
diff --git a/apps/web/src/features/chat/chat-composer.test.tsx b/apps/web/src/features/chat/chat-composer.test.tsx
index ae19a5a..b886342 100644
--- a/apps/web/src/features/chat/chat-composer.test.tsx
+++ b/apps/web/src/features/chat/chat-composer.test.tsx
@@ -7,6 +7,11 @@ import { ChatComposer } from "./chat-composer";
 
 const references = [{ id: "source-1", label: "PR #1", available: true }];
 
+function inputText(element: HTMLElement, value: string) {
+  element.textContent = value;
+  fireEvent.input(element);
+}
+
 describe("ChatComposer", () => {
   it("enables send only for a trimmed prompt with a connected source", () => {
     const onSubmit = vi.fn();
@@ -14,10 +19,13 @@ describe("ChatComposer", () => {
     const prompt = screen.getByRole("textbox", { name: "Chat message" });
     const send = screen.getByRole("button", { name: "Send message" });
 
+    expect(send).toHaveClass("bg-primary", "text-primary-foreground", "dark:bg-[#f4f4f5]");
     expect(send).toBeDisabled();
-    fireEvent.change(prompt, { target: { value: "   " } });
+    inputText(prompt, "   ");
     expect(send).toBeDisabled();
-    fireEvent.change(prompt, { target: { value: " Write release notes " } });
+    fireEvent.keyDown(prompt, { key: "Enter" });
+    expect(onSubmit).not.toHaveBeenCalled();
+    inputText(prompt, " Write release notes ");
     expect(send).toBeEnabled();
 
     fireEvent.click(send);
@@ -30,12 +38,12 @@ describe("ChatComposer", () => {
 
   it("stays disabled without a selected source or while busy", () => {
     const { unmount } = render(<ChatComposer references={[]} onSubmit={vi.fn()} />);
-    fireEvent.change(screen.getByRole("textbox"), { target: { value: "Write release notes" } });
+    inputText(screen.getByRole("textbox"), "Write release notes");
     expect(screen.getByRole("button", { name: "Send message" })).toBeDisabled();
 
     unmount();
     render(<ChatComposer references={references} onSubmit={vi.fn()} busy />);
-    fireEvent.change(screen.getByRole("textbox"), { target: { value: "Write release notes" } });
+    inputText(screen.getByRole("textbox"), "Write release notes");
     expect(screen.getByRole("button", { name: "Send message" })).toBeDisabled();
   });
 });
diff --git a/apps/web/src/features/chat/chat-composer.tsx b/apps/web/src/features/chat/chat-composer.tsx
index 73bbf11..f4002a6 100644
--- a/apps/web/src/features/chat/chat-composer.tsx
+++ b/apps/web/src/features/chat/chat-composer.tsx
@@ -1,16 +1,22 @@
 "use client";
 
-import { ArrowUp } from "lucide-react";
-import { useRef, useState } from "react";
-
-import { cn } from "@/lib/utils";
+import {
+  ChatComposer as AstryxChatComposer,
+  ChatComposerDrawer,
+  ChatComposerInput,
+  ChatSendButton,
+} from "@astryxdesign/core/Chat";
+import { Citation } from "@astryxdesign/core/Citation";
+import { ArrowUp, Folder, Mic, Plus } from "lucide-react";
+import type { CSSProperties, KeyboardEvent } from "react";
+import { useId, useRef, useState } from "react";
 
 type ChatComposerProps = {
   onSubmit: (message: string, referenceIds: string[]) => void;
   variant?: "center" | "dock";
   id?: string;
   placeholder?: string;
-  references?: { id: string; label: string; available: boolean; groupId?: string }[];
+  references?: { id: string; label: string; available: boolean; groupId?: string; url?: string }[];
   busy?: boolean;
 };
 
@@ -22,55 +28,158 @@ export function ChatComposer({
   references = [],
   busy = false,
 }: ChatComposerProps) {
-  const [message, setMessage] = useState("");
   const submittingRef = useRef(false);
-  const [selectedReferenceIds] = useState<string[]>([]);
-  const canSubmit = !busy && Boolean(message.trim()) && references.some((reference) => reference.available);
+  const [centerPrompt, setCenterPrompt] = useState("");
+  const hasConnectedSource = references.some((reference) => reference.available);
 
-  return (
-    <form
-      id={id}
-      className={cn(
-        variant === "dock"
-          ? "bg-white/95 px-4 py-4 dark:bg-[#111113]/95 sm:px-8"
-          : "w-full",
-      )}
-      onSubmit={(event) => {
+  function submit(value: string) {
+    if (submittingRef.current) return;
+    const trimmed = value.trim();
+    if (!trimmed) return;
+
+    submittingRef.current = true;
+    onSubmit(trimmed, []);
+    queueMicrotask(() => {
+      submittingRef.current = false;
+    });
+  }
+
+  if (variant === "center") {
+    const isSendDisabled = busy || !hasConnectedSource || !centerPrompt.trim();
+
+    function handleKeyDown(event: KeyboardEvent<HTMLTextAreaElement>) {
+      if (event.key === "Enter" && !event.shiftKey) {
         event.preventDefault();
-        if (!canSubmit || submittingRef.current) return;
+        if (!isSendDisabled) {
+          submit(centerPrompt);
+        }
+      }
+    }
 
-        submittingRef.current = true;
-        onSubmit(message.trim(), selectedReferenceIds);
-        setMessage("");
-        queueMicrotask(() => { submittingRef.current = false; });
-      }}
-    >
-      <div
-        className={cn(
-          "mx-auto w-full max-w-[760px] overflow-hidden rounded-[18px] border border-black/[0.09] bg-white shadow-[0_16px_50px_rgb(0_0_0_/_0.08)] dark:border-white/10 dark:bg-[#232326] dark:shadow-black/30",
-          variant === "dock" && "max-w-3xl shadow-[0_10px_28px_rgb(0_0_0_/_0.07)]",
-        )}
-      >
-        <textarea
-          value={message}
-          onChange={(event) => setMessage(event.target.value)}
-          className="min-h-20 w-full resize-none bg-transparent px-4 py-3 text-sm leading-6 outline-none placeholder:text-black/30 dark:placeholder:text-white/35"
-          placeholder={placeholder}
-          aria-label="Chat message"
-        />
-        <div className="flex items-center justify-end px-3 pb-3 text-xs text-black/45 dark:text-white/45">
-          <div className="flex items-center gap-1.5">
-            <button
-              type="submit"
-              disabled={!canSubmit}
-              className="inline-flex size-9 items-center justify-center rounded-full bg-black/35 text-white transition hover:bg-black/55 disabled:cursor-not-allowed disabled:opacity-40 dark:bg-white/35 dark:hover:bg-white/55"
-              aria-label="Send message"
-            >
-              <ArrowUp className="size-4" />
-            </button>
+    return (
+      <div id={id} className="w-full">
+        <div className="w-full rounded-[22px] border border-black/[0.08] bg-white shadow-[0_4px_24px_rgba(0,0,0,0.05)] transition focus-within:border-black/20 focus-within:shadow-[0_8px_32px_rgba(0,0,0,0.08)] dark:border-white/10 dark:bg-[#1e1f23] dark:shadow-[0_4px_24px_rgba(0,0,0,0.2)]">
+          {/* Top section: input and actions */}
+          <div className="p-4 pb-2.5 sm:px-5 sm:pt-4.5">
+            <textarea
+              role="textbox"
+              aria-label="Chat message"
+              rows={2}
+              value={centerPrompt}
+              onChange={(e) => setCenterPrompt(e.target.value)}
+              onKeyDown={handleKeyDown}
+              placeholder={placeholder || "Describe the update you need..."}
+              className="w-full resize-none border-none bg-transparent text-[15px] leading-6 text-black/88 outline-none placeholder:text-black/35 focus:ring-0 dark:text-white/90 dark:placeholder:text-white/35"
+            />
+            <div className="flex items-center justify-between pt-3 pb-1">
+              <div className="flex items-center gap-1.5">
+                <button
+                  type="button"
+                  aria-label="Add attachment"
+                  className="inline-flex size-7.5 items-center justify-center rounded-full text-black/50 transition hover:bg-black/5 hover:text-black/80 dark:text-white/50 dark:hover:bg-white/10 dark:hover:text-white"
+                >
+                  <Plus className="size-4" />
+                </button>
+              </div>
+              <div className="flex items-center gap-1">
+                <button
+                  type="button"
+                  aria-label="Voice input"
+                  className="inline-flex size-7.5 items-center justify-center rounded-full text-black/50 transition hover:bg-black/5 hover:text-black/80 dark:text-white/50 dark:hover:bg-white/10 dark:hover:text-white"
+                >
+                  <Mic className="size-4" />
+                </button>
+                <button
+                  type="button"
+                  aria-label="Send message"
+                  disabled={isSendDisabled}
+                  onClick={() => submit(centerPrompt)}
+                  className="inline-flex size-8 items-center justify-center rounded-full bg-primary text-primary-foreground transition hover:bg-[#303036] active:bg-black disabled:pointer-events-none disabled:opacity-30 dark:bg-[#f4f4f5] dark:text-[#18181b] dark:hover:bg-white dark:active:bg-white dark:disabled:opacity-20"
+                >
+                  <ArrowUp className="size-4" />
+                </button>
+              </div>
+            </div>
+          </div>
+
+          {/* Bottom attached tray */}
+          <div className="flex items-center justify-between border-t border-black/[0.05] bg-[#f8f9fa] px-4 py-2.5 text-xs text-black/60 dark:border-white/[0.06] dark:bg-[#16171a] dark:text-white/60 rounded-b-[22px]">
+            <div className="flex items-center gap-2">
+              <button
+                type="button"
+                className="inline-flex items-center gap-1.5 font-medium text-black/70 transition hover:text-black/90 dark:text-white/70 dark:hover:text-white"
+              >
+                <Folder className="size-3.5 text-black/50 dark:text-white/50" />
+                <span>{references.length ? `${references.length} Connected Sources` : "Connect sources"}</span>
+              </button>
+            </div>
           </div>
         </div>
       </div>
-    </form>
+    );
+  }
+
+  return (
+    <div
+      id={id}
+      className="w-full bg-[#fbfbf8]/95 px-4 pb-4 pt-3 backdrop-blur-xl dark:bg-[#111113]/95 sm:px-6"
+    >
+      <AstryxChatComposer
+        onSubmit={submit}
+        placeholder={placeholder}
+        isDisabled={busy || !hasConnectedSource}
+        density="balanced"
+        elevation="none"
+        drawer={references.length ? <ComposerSources references={references} /> : undefined}
+        input={<ChatComposerInput label="Chat message" maxRows={7} />}
+        footerActions={<span className="text-xs text-black/42 dark:text-white/45">Enter to send</span>}
+        sendButton={<ComposerSendButton />}
+        className="mx-auto max-w-[720px]"
+        style={{
+          "--_chat-composer-radius": "12px",
+          "--_chat-composer-padding": "10px",
+        } as CSSProperties}
+      />
+    </div>
+  );
+}
+
+function ComposerSources({
+  references,
+}: {
+  references: NonNullable<ChatComposerProps["references"]>;
+}) {
+  const visibleReferences = references.slice(0, 3);
+  const remainingCount = references.length - visibleReferences.length;
+
+  return (
+    <ChatComposerDrawer count={references.length} label="Sources" defaultIsCollapsed>
+      <div className="flex min-w-0 flex-wrap items-center gap-2" aria-label="Connected sources">
+        {visibleReferences.map((reference, index) => (
+          <Citation
+            key={reference.id}
+            source={{ title: reference.label, url: reference.url }}
+            number={index + 1}
+            variant="label"
+          />
+        ))}
+        {remainingCount > 0 ? <span className="text-xs text-black/42 dark:text-white/45">{remainingCount} more</span> : null}
+      </div>
+    </ChatComposerDrawer>
+  );
+}
+
+function ComposerSendButton() {
+  const labelId = useId();
+
+  return (
+    <>
+      <span id={labelId} className="sr-only">Send message</span>
+      <ChatSendButton
+        aria-labelledby={labelId}
+        size="sm"
+        className="!rounded-full rounded-full bg-primary text-primary-foreground hover:bg-[#303036] active:bg-black disabled:bg-black/25 dark:bg-[#f4f4f5] dark:text-[#18181b] dark:hover:bg-white dark:active:bg-white dark:disabled:bg-white/20"
+      />
+    </>
   );
 }
diff --git a/apps/web/src/features/chat/chat-home.tsx b/apps/web/src/features/chat/chat-home.tsx
index cdaf495..56b28a1 100644
--- a/apps/web/src/features/chat/chat-home.tsx
+++ b/apps/web/src/features/chat/chat-home.tsx
@@ -53,34 +53,32 @@ export function ChatHome({ references, referencesLoading, referencesError }: Cha
   }
 
   return (
-    <div className="flex h-screen min-h-0 flex-col bg-white dark:bg-[#111113]">
-      <div className="flex min-h-0 flex-1 items-center justify-center px-6 pb-24 pt-16">
-        <div className="w-full max-w-[760px]">
-          <h1 className="text-center text-[28px] font-medium tracking-normal text-black/82 dark:text-white/88">What should Plot create?</h1>
-          <div className="mt-9">
-            <ChatComposer
-              key={references.map((reference) => reference.id).join(":") || "no-references"}
-              variant="center"
-              placeholder="Ask for a changelog, customer update, or source-backed draft..."
-              onSubmit={(message, ids) => void submitHomeRequest(message, ids)}
-              references={toComposerReferences(references)}
-              busy={starting || referencesLoading}
-            />
-          </div>
-          {referencesLoading ? <p className="mt-3 text-center text-sm text-black/45 dark:text-white/45">Loading sources…</p> : null}
-          {!referencesLoading && !referencesError && references.length === 0 ? <SourceEmptyState /> : null}
-          {referencesError ? <ErrorNotice message={referencesError} /> : null}
-          {startError ? <ErrorNotice message={startError} /> : null}
-        </div>
+    <div className="flex min-h-dvh flex-col items-center justify-center bg-white px-4 pb-20 pt-8 dark:bg-[#111113]">
+      <div className="w-full max-w-[660px]">
+        <h1 className="mb-7 text-center text-[26px] font-semibold tracking-tight text-black/90 dark:text-white/92 sm:text-[28px]">
+          What should Plot create?
+        </h1>
+        <ChatComposer
+          key={references.map((reference) => reference.id).join(":") || "no-references"}
+          variant="center"
+          placeholder="Describe the update you need..."
+          onSubmit={(message, ids) => void submitHomeRequest(message, ids)}
+          references={toComposerReferences(references)}
+          busy={starting || referencesLoading}
+        />
+        {referencesLoading ? <p className="mt-3 text-center text-xs text-black/45 dark:text-white/45">Loading sources…</p> : null}
+        {!referencesLoading && !referencesError && references.length === 0 ? <SourceEmptyState /> : null}
+        {referencesError ? <ErrorNotice message={referencesError} /> : null}
+        {startError ? <ErrorNotice message={startError} /> : null}
       </div>
     </div>
   );
 }
 
 function SourceEmptyState() {
-  return <p className="mt-3 text-center text-sm text-black/50 dark:text-white/50">Connect and import a source in <Link href="/settings/integrations" className="text-[#2563eb] hover:underline dark:text-[#93c5fd]">Integrations</Link> or <Link href="/sources" className="text-[#2563eb] hover:underline dark:text-[#93c5fd]">Sources</Link> before starting a chat.</p>;
+  return <p className="mt-4 text-center text-xs text-black/50 dark:text-white/50">Connect and import a source in <Link href="/settings/integrations" className="text-[#2563eb] hover:underline dark:text-[#93c5fd]">Integrations</Link> or <Link href="/sources" className="text-[#2563eb] hover:underline dark:text-[#93c5fd]">Sources</Link> before starting a chat.</p>;
 }
 
 function ErrorNotice({ message }: { message: string }) {
-  return <div role="alert" className="mt-3 rounded-xl border border-rose-300/60 bg-rose-50 px-4 py-3 text-sm text-rose-900 dark:border-rose-400/25 dark:bg-rose-400/[0.08] dark:text-rose-200">{message}</div>;
+  return <div role="alert" className="mt-4 rounded-xl border border-rose-300/60 bg-rose-50 px-4 py-3 text-sm text-rose-900 dark:border-rose-400/25 dark:bg-rose-400/[0.08] dark:text-rose-200">{message}</div>;
 }
diff --git a/apps/web/src/features/chat/chat-source-citations.tsx b/apps/web/src/features/chat/chat-source-citations.tsx
new file mode 100644
index 0000000..f485045
--- /dev/null
+++ b/apps/web/src/features/chat/chat-source-citations.tsx
@@ -0,0 +1,36 @@
+"use client";
+
+import { Citation } from "@astryxdesign/core/Citation";
+
+import type { SourceReference } from "@plot/api-client";
+
+export function ChatSourceCitations({ references }: { references: SourceReference[] }) {
+  if (!references.length) return null;
+
+  const visibleReferences = references.slice(0, 2);
+  const remainingCount = references.length - visibleReferences.length;
+
+  return (
+    <div className="mt-4 flex flex-wrap items-center gap-x-2 gap-y-2 border-t border-black/[0.07] pt-3 dark:border-white/[0.08]" aria-label="Connected sources">
+      <span className="mr-1 text-xs font-medium text-black/55 dark:text-white/58">
+        Sources <span className="font-normal text-black/35 dark:text-white/38">{references.length}</span>
+      </span>
+      <div className="flex min-w-0 flex-wrap items-center gap-2">
+        {visibleReferences.map((reference, index) => (
+          <Citation
+            key={reference.id}
+            source={{
+              title: `${reference.repositoryLabel} / ${reference.sourceLabel}`,
+              url: reference.originalUrl ?? undefined,
+            }}
+            number={index + 1}
+            variant="label"
+          />
+        ))}
+        {remainingCount > 0 ? (
+          <span className="text-xs text-black/42 dark:text-white/45">{remainingCount} more</span>
+        ) : null}
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/src/features/chat/chat-workspace-utils.ts b/apps/web/src/features/chat/chat-workspace-utils.ts
index 5fbf1da..8b6559a 100644
--- a/apps/web/src/features/chat/chat-workspace-utils.ts
+++ b/apps/web/src/features/chat/chat-workspace-utils.ts
@@ -12,7 +12,13 @@ export function chatHref(chatId: string, agentRunId: string | null = null, artif
 }
 
 export function toComposerReferences(references: SourceReference[]) {
-  return references.map((reference) => ({ id: reference.id, label: `${reference.repositoryLabel} · ${reference.sourceLabel}`, available: true, groupId: reference.sourceScopeId }));
+  return references.map((reference) => ({
+    id: reference.id,
+    label: `${reference.repositoryLabel} / ${reference.sourceLabel}`,
+    available: true,
+    groupId: reference.sourceScopeId,
+    url: reference.originalUrl ?? undefined,
+  }));
 }
 
 export function selectReferences(references: SourceReference[], ids: string[]) {
diff --git a/apps/web/src/features/chat/chat-workspace.test.tsx b/apps/web/src/features/chat/chat-workspace.test.tsx
index 2dd7c71..0675a21 100644
--- a/apps/web/src/features/chat/chat-workspace.test.tsx
+++ b/apps/web/src/features/chat/chat-workspace.test.tsx
@@ -1,6 +1,6 @@
 // @vitest-environment jsdom
 
-import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { fireEvent, render, screen, waitFor, within } from "@testing-library/react";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 
 const mocks = vi.hoisted(() => ({
@@ -44,7 +44,7 @@ vi.mock("@/features/chat/chat-composer", () => ({
   ),
 }));
 vi.mock("@/features/citations/cited-draft-editor", () => ({ CitedDraftEditor: () => <div>Reviewed artifact</div> }));
-vi.mock("@/features/citations/export-dialog", () => ({ ExportDialog: () => null }));
+vi.mock("@/features/citations/export-dialog", () => ({ ExportDialog: ({ presentation }: { presentation?: string }) => presentation === "copy" ? <button type="button" aria-label="Copy artifact">Copy</button> : null }));
 vi.mock("@/features/citations/artifact-history-panel", () => ({ ArtifactHistoryPanel: () => <div>History</div> }));
 
 import { ChatWorkspace } from "./chat-workspace";
@@ -123,8 +123,43 @@ describe("ChatWorkspace", () => {
     mocks.getChatAgentRun.mockResolvedValue(succeeded);
 
     render(<ChatWorkspace />);
-    expect(await screen.findByText("Reviewed artifact")).toBeVisible();
-    expect(screen.getByRole("button", { name: /ReleaseArtifact available/ })).toBeVisible();
+    const openArtifact = await screen.findByText("Open artifact");
+    const agentResponse = screen.getByRole("region", { name: "Agent request details" });
+    expect(agentResponse).toContainElement(openArtifact);
+    const responseTime = agentResponse.querySelector("time");
+    expect(responseTime).not.toBeNull();
+    expect(openArtifact.compareDocumentPosition(responseTime!) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
+    expect(screen.queryByText("Reviewed artifact")).not.toBeInTheDocument();
+    fireEvent.click(openArtifact);
+    const artifactPanel = screen.getByRole("complementary", { name: "Artifact document panel" });
+    const artifactBody = within(artifactPanel).getByRole("region", { name: "Artifact document body" });
+    const artifactTitle = within(artifactPanel).getByText("Release", { exact: true });
+    expect(artifactPanel).toBeVisible();
+    expect(artifactBody).not.toContainElement(artifactTitle);
+    expect(screen.getByRole("separator", { name: "Resize artifact document" })).toBeInTheDocument();
+    expect(screen.getByText("Reviewed artifact")).toBeVisible();
+    expect(artifactBody).toContainElement(screen.getByText("Reviewed artifact"));
+    expect(within(artifactPanel).getByRole("button", { name: "Copy artifact" })).toBeVisible();
+    fireEvent.click(within(artifactPanel).getByRole("button", { name: "Artifact history" }));
+    expect(screen.getByRole("complementary", { name: "Artifact history drawer" })).toBeVisible();
+    fireEvent.click(screen.getByRole("button", { name: "Close artifact history" }));
+    expect(screen.queryByRole("complementary", { name: "Artifact history drawer" })).not.toBeInTheDocument();
+    expect(screen.queryByRole("tabpanel", { name: "Assistant panel" })).not.toBeInTheDocument();
+    await waitFor(() => expect(document.querySelectorAll("time")).toHaveLength(1));
+    expect(screen.getByText("Source agent")).toBeVisible();
+  });
+
+  it("restores generated activity when History opens a session without an Agent query", async () => {
+    mocks.search = "chat=chat-1";
+    mocks.listSessions.mockResolvedValue([chat]);
+    const succeeded = agentRun({ status: "SUCCEEDED", artifactId: "artifact-1", artifact: artifactSummary });
+    mocks.listSessionAgentRuns.mockResolvedValue([succeeded]);
+
+    render(<ChatWorkspace />);
+    expect(await screen.findByText("Open artifact")).toBeVisible();
+    expect(screen.queryByText("Reviewed artifact")).not.toBeInTheDocument();
+    expect(screen.getByText("Source agent")).toBeVisible();
+    expect(mocks.getChatAgentRun).not.toHaveBeenCalled();
   });
 
   it("starts a follow-up Agent request with the active Chat linkage", async () => {
@@ -136,7 +171,7 @@ describe("ChatWorkspace", () => {
     mocks.createChatAgentRun.mockResolvedValue(agentRun({ id: "agent-2", status: "QUEUED", artifactId: null, artifact: null }));
 
     render(<ChatWorkspace />);
-    await screen.findByText("Reviewed artifact");
+    await screen.findByText("Open artifact");
     await waitFor(() => expect(screen.queryByText("Loading sources…")).not.toBeInTheDocument());
     fireEvent.click(screen.getByRole("button", { name: "Generate again" }));
 
@@ -152,7 +187,7 @@ describe("ChatWorkspace", () => {
     mocks.listSessionAgentRuns.mockResolvedValue([succeeded]);
     mocks.getChatAgentRun.mockResolvedValue(succeeded);
     render(<ChatWorkspace />);
-    await screen.findByText("Reviewed artifact");
+    await screen.findByText("Open artifact");
 
     window.dispatchEvent(new CustomEvent("plot:workspace-changed", { detail: { id: "workspace-2" } }));
     await waitFor(() => expect(mocks.replace).toHaveBeenCalledWith("/chat", { scroll: false }));
@@ -165,7 +200,7 @@ describe("ChatWorkspace", () => {
     mocks.listSessionAgentRuns.mockResolvedValue([succeeded]);
     mocks.getChatAgentRun.mockResolvedValue(succeeded);
     render(<ChatWorkspace />);
-    await screen.findByText("Reviewed artifact");
+    await screen.findByText("Open artifact");
 
     const historyTrigger = screen.getAllByRole("tab", { name: "History" }).find((element) => element.getAttribute("aria-controls") === "mobile-chat-history-panel");
     expect(historyTrigger).toBeDefined();
diff --git a/apps/web/src/features/citations/export-dialog.test.tsx b/apps/web/src/features/citations/export-dialog.test.tsx
index f325e9b..36e78d8 100644
--- a/apps/web/src/features/citations/export-dialog.test.tsx
+++ b/apps/web/src/features/citations/export-dialog.test.tsx
@@ -65,6 +65,46 @@ describe("ExportDialog", () => {
     click.mockRestore();
   });
 
+  it("offers a direct toolbar copy action", async () => {
+    const exportArtifactVariant = vi.fn().mockResolvedValue({ exportId: "export-copy", disposition: "COPY", filename: "changelog.md", mediaType: "text/markdown", text: "Ready.", unresolvedCount: 0, warningAcknowledged: false, includeSources: false });
+    const writeText = vi.fn().mockResolvedValue(undefined);
+    Object.defineProperty(navigator, "clipboard", { configurable: true, value: { writeText } });
+
+    render(<ExportDialog pack={pack} client={{ exportArtifactVariant } as unknown as PlotApiClient} presentation="copy" />);
+    fireEvent.click(screen.getByRole("button", { name: "Copy artifact" }));
+
+    await waitFor(() => expect(writeText).toHaveBeenCalledWith("Ready."));
+    expect(exportArtifactVariant).toHaveBeenCalledWith("variant-1", expect.objectContaining({ disposition: "COPY" }));
+  });
+
+  it("offers a dropdown menu with Download .md option in copy presentation mode", async () => {
+    const exportArtifactVariant = vi.fn().mockResolvedValue({ exportId: "export-download", disposition: "DOWNLOAD", filename: "changelog.md", mediaType: "text/markdown", text: "Markdown content", unresolvedCount: 0, warningAcknowledged: false, includeSources: false });
+    const createObjectURL = vi.fn().mockReturnValue("blob:export-md");
+    const revokeObjectURL = vi.fn();
+    Object.defineProperties(URL, { createObjectURL: { configurable: true, value: createObjectURL }, revokeObjectURL: { configurable: true, value: revokeObjectURL } });
+    const click = vi.spyOn(HTMLAnchorElement.prototype, "click").mockImplementation(() => undefined);
+
+    render(<ExportDialog pack={pack} client={{ exportArtifactVariant } as unknown as PlotApiClient} presentation="copy" />);
+    
+    // Open dropdown
+    fireEvent.click(screen.getByRole("button", { name: "Export options" }));
+    const downloadItem = screen.getByRole("menuitem", { name: /download \.md/i });
+    expect(downloadItem).toBeInTheDocument();
+
+    // Click Download .md
+    fireEvent.click(downloadItem);
+    await waitFor(() => expect(click).toHaveBeenCalled());
+    expect(exportArtifactVariant).toHaveBeenCalledWith("variant-1", {
+      expectedRevisionNumber: 3,
+      includeSources: false,
+      acknowledgeUnresolved: false,
+      acknowledgedWarningKeys: [],
+      disposition: "DOWNLOAD",
+    });
+    expect(screen.queryByRole("menuitem", { name: /download \.md/i })).not.toBeInTheDocument();
+    click.mockRestore();
+  });
+
   it("renders human-readable warnings without UUIDs and acknowledges the exact warning keys", async () => {
     const exportArtifactVariant = vi
       .fn()
diff --git a/apps/web/src/features/citations/export-dialog.tsx b/apps/web/src/features/citations/export-dialog.tsx
index d28dd33..eef6fb1 100644
--- a/apps/web/src/features/citations/export-dialog.tsx
+++ b/apps/web/src/features/citations/export-dialog.tsx
@@ -1,18 +1,48 @@
 "use client";
 
-import { Check, Copy, Download, ShieldAlert, X } from "lucide-react";
-import { useState } from "react";
+import { Check, ChevronDown, Copy, Download, ShieldAlert, X } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
 
 import { PlotApiError, type Artifact, type PlotApiClient } from "@plot/api-client";
 
 type Disposition = "COPY" | "DOWNLOAD";
 type ExportWarning = { key: string; sentenceNumber: number; excerpt: string };
 
-export function ExportDialog({ pack, client, presentation = "buttons" }: { pack: Artifact; client: PlotApiClient; presentation?: "buttons" | "menu" }) {
+export function ExportDialog({ pack, client, presentation = "buttons" }: { pack: Artifact; client: PlotApiClient; presentation?: "buttons" | "menu" | "copy" }) {
   const [pending, setPending] = useState<Disposition | null>(null);
   const [includeSources, setIncludeSources] = useState(false);
   const [confirmation, setConfirmation] = useState<{ disposition: Disposition; warnings: ExportWarning[] } | null>(null);
   const [message, setMessage] = useState("");
+  const [dropdownOpen, setDropdownOpen] = useState(false);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+  const dropdownTriggerRef = useRef<HTMLButtonElement>(null);
+
+  useEffect(() => {
+    if (!dropdownOpen) return;
+
+    function handleDismiss(event: Event) {
+      if (event.target instanceof Node && !dropdownRef.current?.contains(event.target)) {
+        setDropdownOpen(false);
+      }
+    }
+
+    function handleKeyDown(event: KeyboardEvent) {
+      if (event.key === "Escape") {
+        event.preventDefault();
+        setDropdownOpen(false);
+        dropdownTriggerRef.current?.focus();
+      }
+    }
+
+    document.addEventListener("pointerdown", handleDismiss, true);
+    document.addEventListener("click", handleDismiss, true);
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("pointerdown", handleDismiss, true);
+      document.removeEventListener("click", handleDismiss, true);
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [dropdownOpen]);
 
   async function requestExport(disposition: Disposition, acknowledgeUnresolved: boolean, acknowledgedWarningKeys: string[] = []) {
     if (pending) return;
@@ -48,6 +78,74 @@ export function ExportDialog({ pack, client, presentation = "buttons" }: { pack:
     }
   }
 
+  if (presentation === "copy") {
+    return (
+      <div ref={dropdownRef} className="relative inline-flex items-center">
+        <div className="inline-flex h-8 items-stretch rounded-[8px] border border-black/15 bg-white/70 shadow-[0_1px_2px_rgba(0,0,0,0.03)] transition dark:border-white/15 dark:bg-white/[0.04]">
+          <button
+            type="button"
+            disabled={Boolean(pending)}
+            onClick={() => void requestExport("COPY", false)}
+            title="Copy artifact"
+            aria-label="Copy artifact"
+            className="inline-flex h-full items-center gap-1.5 rounded-l-[7px] pl-2.5 pr-2 text-xs font-medium text-black/70 transition hover:bg-black/[0.04] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-black/20 disabled:pointer-events-none disabled:opacity-40 dark:text-white/70 dark:hover:bg-white/[0.08] dark:focus-visible:ring-white/25"
+          >
+            <Copy aria-hidden="true" className="size-3.5 text-black/60 dark:text-white/60" />
+            <span>Copy</span>
+          </button>
+          <div className="w-px self-stretch bg-black/15 dark:bg-white/15" aria-hidden="true" />
+          <div className="relative inline-flex h-full">
+            <button
+              ref={dropdownTriggerRef}
+              type="button"
+              disabled={Boolean(pending)}
+              aria-label="Export options"
+              aria-haspopup="menu"
+              aria-expanded={dropdownOpen}
+              onClick={() => setDropdownOpen((open) => !open)}
+              className="inline-flex h-full items-center justify-center rounded-r-[7px] px-1.5 text-black/60 transition hover:bg-black/[0.04] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-black/20 disabled:pointer-events-none disabled:opacity-40 dark:text-white/60 dark:hover:bg-white/[0.08] dark:focus-visible:ring-white/25"
+            >
+              <ChevronDown aria-hidden="true" className="size-3 text-black/60 dark:text-white/60" />
+            </button>
+
+            {dropdownOpen ? (
+              <div
+                role="menu"
+                aria-label="Export options"
+                className="absolute left-0 top-[calc(100%+4px)] z-50 min-w-[136px] rounded-[8px] border border-black/10 bg-white p-1 shadow-[0_4px_16px_rgba(0,0,0,0.08)] dark:border-white/10 dark:bg-[#202024]"
+              >
+                <button
+                  type="button"
+                  role="menuitem"
+                  disabled={Boolean(pending)}
+                  onClick={() => {
+                    setDropdownOpen(false);
+                    void requestExport("DOWNLOAD", false);
+                  }}
+                  className="flex h-7.5 w-full items-center gap-2 rounded-[6px] px-2 text-left text-xs font-medium text-black/70 transition hover:bg-black/[0.04] focus-visible:bg-black/[0.04] focus-visible:outline-none disabled:opacity-40 dark:text-white/70 dark:hover:bg-white/[0.08]"
+                >
+                  <Download aria-hidden="true" className="size-3.5 shrink-0 text-black/60 dark:text-white/60" />
+                  <span>Download .md</span>
+                </button>
+              </div>
+            ) : null}
+          </div>
+        </div>
+
+        {confirmation ? (
+          <ExportConfirmation
+            confirmation={confirmation}
+            pending={pending}
+            pack={pack}
+            onCancel={() => setConfirmation(null)}
+            onConfirm={() => void requestExport(confirmation.disposition, true, confirmation.warnings.map((warning) => warning.key))}
+          />
+        ) : null}
+        {message ? <span role="status" aria-live="polite" className="sr-only">{message}</span> : null}
+      </div>
+    );
+  }
+
   if (presentation === "menu") {
     return (
       <div role="none" className="relative border-t border-black/[0.06] pt-1 dark:border-white/10">
diff --git a/apps/web/src/test/setup.ts b/apps/web/src/test/setup.ts
index 0ecbed3..02e0e64 100644
--- a/apps/web/src/test/setup.ts
+++ b/apps/web/src/test/setup.ts
@@ -2,4 +2,33 @@ import "@testing-library/jest-dom/vitest";
 import { cleanup } from "@testing-library/react";
 import { afterEach } from "vitest";
 
+if (typeof window !== "undefined" && !window.matchMedia) {
+  Object.defineProperty(window, "matchMedia", {
+    configurable: true,
+    value: (query: string) => ({
+      matches: false,
+      media: query,
+      onchange: null,
+      addListener: () => undefined,
+      removeListener: () => undefined,
+      addEventListener: () => undefined,
+      removeEventListener: () => undefined,
+      dispatchEvent: () => false,
+    }),
+  });
+}
+
+if (typeof globalThis.ResizeObserver === "undefined") {
+  class ResizeObserverMock {
+    observe() {}
+    unobserve() {}
+    disconnect() {}
+  }
+
+  Object.defineProperty(globalThis, "ResizeObserver", {
+    configurable: true,
+    value: ResizeObserverMock,
+  });
+}
+
 afterEach(() => cleanup());