From b5f556f3a453f7ae00d2dbd826cb890eedfe098e Mon Sep 17 00:00:00 2001
From: Maggie Appleton <5599295+MaggieAppleton@users.noreply.github.com>
Date: Sat, 10 Oct 2026 18:23:24 +0100
Subject: [PATCH 01/16] Derive the expanded document from the desktop Chat
 choice

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 apps/web/src/workspace-model.test.ts | 13 +++++++++++++
 apps/web/src/workspace-model.ts      |  1 +
 2 files changed, 14 insertions(+)

diff --git a/apps/web/src/workspace-model.test.ts b/apps/web/src/workspace-model.test.ts
index c95c9e080..27f9efa0e 100644
--- a/apps/web/src/workspace-model.test.ts
+++ b/apps/web/src/workspace-model.test.ts
@@ -140,6 +140,19 @@ describe("adaptive workspace", () => {
 			separatorVisible: false,
 		});
 	});
+
+	it("expands the document only when split Chat is hidden", () => {
+		let hidden: WorkspaceState = { chatOpen: false, desktopChatOpen: false };
+		let shown: WorkspaceState = { chatOpen: false, desktopChatOpen: true };
+		let unset: WorkspaceState = { chatOpen: false, desktopChatOpen: undefined };
+
+		expect(presentWorkspace(hidden, "split", "plan").documentExpanded).toBe(true);
+		expect(presentWorkspace(shown, "split", "plan").documentExpanded).toBe(false);
+		expect(presentWorkspace(unset, "split", "plan").documentExpanded).toBe(false);
+		expect(presentWorkspace(hidden, "compact", "plan").documentExpanded).toBe(false);
+		expect(presentWorkspace({ ...hidden, chatOpen: true }, "split", "plan").documentExpanded)
+			.toBe(false);
+	});
 });
 
 it("opens Chat by default and accepts only an explicit saved choice", () => {
diff --git a/apps/web/src/workspace-model.ts b/apps/web/src/workspace-model.ts
index ec7a9a7e7..83e953b7b 100644
--- a/apps/web/src/workspace-model.ts
+++ b/apps/web/src/workspace-model.ts
@@ -107,6 +107,7 @@ export function presentWorkspace(
 	return {
 		documentView,
 		documentVisible,
+		documentExpanded: mode === "split" && !chatVisible,
 		chatVisible,
 		separatorVisible: mode === "split" && chatVisible,
 	};

From 04964a88ea8a1ed2e4e44f8f7bdd0d4127d24ac1 Mon Sep 17 00:00:00 2001
From: Maggie Appleton <5599295+MaggieAppleton@users.noreply.github.com>
Date: Sat, 10 Oct 2026 18:26:57 +0100
Subject: [PATCH 02/16] Replace the Chat header with an expand control on the
 tab row

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 apps/web/src/hosted.test.ts             |  63 ++++++++
 apps/web/src/icon-assets.test.ts        |   6 +-
 apps/web/src/theme.css                  |  41 ------
 apps/web/src/theme.test.ts              |   6 -
 apps/web/src/workspace-feedback.test.ts |  91 ++++--------
 apps/web/src/workspace.tsx              | 185 +++++++++---------------
 packages/icons/src/index.ts             |   2 +
 packages/icons/src/line.tsx             |  24 +++
 8 files changed, 189 insertions(+), 229 deletions(-)

diff --git a/apps/web/src/hosted.test.ts b/apps/web/src/hosted.test.ts
index 1df52f010..8cdbe405c 100644
--- a/apps/web/src/hosted.test.ts
+++ b/apps/web/src/hosted.test.ts
@@ -65,6 +65,12 @@ function detail(
 	};
 }
 
+let toolbarOf = (markup: string) =>
+	markup.slice(
+		markup.indexOf('data-document-toolbar="true"'),
+		markup.indexOf('data-document-view="plan"'),
+	);
+
 describe("hosted routes", () => {
 	it("recognizes canonical document routes and rejects the removed research route", () => {
 		expect(hostedRoute("/")).toEqual({ page: "repositories" });
@@ -348,6 +354,63 @@ describe("anchored child lifecycle", () => {
 		expect(markup.indexOf("<main")).toBeLessThan(markup.indexOf("<aside"));
 	});
 
+	let splitProps = {
+		chat: createElement("div", null, "Chat body"),
+		controls: createElement("div", null, "Document controls"),
+		chatActivity: { busy: true, unread: 0 },
+		decisions: createElement("div", null, "Decisions"),
+		header: createElement("header", null, "Room header"),
+		identity: "room",
+		ids: workspaceIds,
+		mode: "split" as const,
+		onChatOpen() {},
+		onDesktopChatOpen() {},
+		onDestination() {},
+		plan: createElement("div", null, "Paper"),
+		presence: createElement("div", { "aria-label": "People here: ana", role: "group" }),
+		presentation: { type: "document" as const },
+		unanswered: 0,
+		view: "plan" as const,
+	};
+
+	it("orders the tab row expand, tabs, presence, with no Chat header", () => {
+		let markup = renderToStaticMarkup(createElement(Workspace, {
+			...splitProps,
+			state: { chatOpen: false, desktopChatOpen: true },
+		}));
+		let toolbar = toolbarOf(markup);
+
+		expect(markup).not.toContain("data-chat-header");
+		expect(markup).not.toContain("data-chat-identity");
+		expect(markup).not.toContain('aria-label="Hide chat"');
+		expect(markup).toMatch(/<h2 class="sr-only" id="[^"]+" tabindex="-1">Chat<\/h2>/);
+		expect(toolbar).toContain('aria-label="Expand document"');
+		expect(toolbar.indexOf("Expand document")).toBeLessThan(toolbar.indexOf("Document controls"));
+		expect(toolbar.indexOf("Document controls")).toBeLessThan(toolbar.indexOf("People here: ana"));
+		expect(markup).toContain('aria-label="Resize chat"');
+		expect(markup.indexOf("Room header")).toBeLessThan(markup.indexOf("workspace-frame"));
+		expect(markup).not.toContain("data-document-expanded");
+		expect(markup).toMatch(/class="workspace-root[^"]*"[^>]*style="--chat-width:\d+px"/);
+	});
+
+	it("trades Chat and its top bar for a Chat button when expanded", () => {
+		let markup = renderToStaticMarkup(createElement(Workspace, {
+			...splitProps,
+			state: { chatOpen: false, desktopChatOpen: false },
+		}));
+		let toolbar = toolbarOf(markup);
+		let slot = markup.match(/<div[^>]*class="workspace-header-slot[^"]*"[^>]*>/)?.[0];
+
+		expect(markup).toContain('data-document-expanded="true"');
+		expect(slot).toContain('inert=""');
+		expect(slot).toContain('aria-hidden="true"');
+		expect(toolbar).toContain('aria-label="Show chat, Planner working"');
+		expect(toolbar).toContain(">Chat</span>");
+		expect(toolbar).not.toContain("Expand document");
+		expect(toolbar.indexOf("Show chat")).toBeLessThan(toolbar.indexOf("Document controls"));
+		expect(markup).not.toContain('aria-label="Resize chat"');
+	});
+
 	it("gives a compact child all three workspace destinations", () => {
 		let markup = renderToStaticMarkup(createElement(Workspace, {
 			chat: createElement("div", null, "Child chat"),
diff --git a/apps/web/src/icon-assets.test.ts b/apps/web/src/icon-assets.test.ts
index bc779ae91..050c5125f 100644
--- a/apps/web/src/icon-assets.test.ts
+++ b/apps/web/src/icon-assets.test.ts
@@ -18,12 +18,14 @@ function sourceFiles(directory: string, found: string[] = []): string[] {
 	return found;
 }
 
-test("the sidebar and Chat share one panel-close asset", () => {
+test("the sidebar owns the panel-close asset and the workspace uses line icons", () => {
 	let sidebar = readFileSync(join(root, "project-sidebar.tsx"), "utf8");
 	let workspace = readFileSync(join(root, "workspace.tsx"), "utf8");
 
 	expect(sidebar).toContain("assets/icons/panel-close.svg");
-	expect(workspace).toContain("assets/icons/panel-close.svg");
+	expect(workspace).not.toContain("assets/icons/panel-close.svg");
+	expect(workspace).toContain("ExpandIcon");
+	expect(workspace).toContain("CollapseIcon");
 	expect(existsSync(join(root, "assets/figma/navigation/collapse.svg"))).toBe(false);
 	expect(existsSync(join(root, "assets/icons/chat-close.svg"))).toBe(false);
 });
diff --git a/apps/web/src/theme.css b/apps/web/src/theme.css
index af649b754..74a8a285f 100644
--- a/apps/web/src/theme.css
+++ b/apps/web/src/theme.css
@@ -501,10 +501,6 @@ body {
 	}
 }
 
-.chat-toggle-icon-sidebar {
-	opacity: 0;
-}
-
 .panel-header {
 	block-size: var(--panel-header-height);
 }
@@ -513,35 +509,6 @@ body {
 	margin-inline-start: calc(-1 * var(--panel-header-control-offset));
 }
 
-.chat-toggle:is(:hover, :focus-visible) .chat-toggle-icon-default {
-	opacity: 0;
-}
-
-.chat-toggle:is(:hover, :focus-visible) .chat-toggle-icon-sidebar {
-	opacity: 1;
-}
-
-@media (hover: hover) and (pointer: fine) {
-	.chat-header-control {
-		opacity: 0;
-		transition: opacity var(--duration-fast) var(--ease-out);
-	}
-
-	.chat-header:is(:hover, :focus-within) .chat-header-control {
-		opacity: 1;
-	}
-}
-
-@media (any-pointer: coarse) {
-	.chat-header-control {
-		opacity: 1;
-	}
-}
-
-:root[data-motion-input="pointer"] .chat-toggle-icon {
-	transition: opacity var(--duration-fast) var(--ease-out);
-}
-
 :root[data-motion-input="pointer"] .motion-picker-option {
 	transition:
 		background-color var(--duration-fast) var(--ease-out),
@@ -1723,14 +1690,6 @@ button.question-add:disabled {
 		transition: none;
 	}
 
-	.chat-header-control {
-		transition: none;
-	}
-
-	:root[data-motion-input="pointer"] .chat-toggle-icon {
-		transition: none;
-	}
-
 	[data-chat-enter] {
 		transition: none;
 	}
diff --git a/apps/web/src/theme.test.ts b/apps/web/src/theme.test.ts
index ad0807ff0..57319a26a 100644
--- a/apps/web/src/theme.test.ts
+++ b/apps/web/src/theme.test.ts
@@ -341,12 +341,6 @@ describe("feedback motion", () => {
 		expect(THEME).not.toContain("@keyframes feedback-");
 	});
 
-	it("uses the short control transition for Chat hover glyphs", () => {
-		expect(THEME).toMatch(
-			/:root\[data-motion-input="pointer"\] \.chat-toggle-icon\s*{[^}]*opacity var\(--duration-fast\) var\(--ease-out\)/s,
-		);
-	});
-
 	it("leaves feedback opacity to the component", () => {
 		for (let kind of ["icon", "count", "alert"]) {
 			let settled = new RegExp(
diff --git a/apps/web/src/workspace-feedback.test.ts b/apps/web/src/workspace-feedback.test.ts
index 8a080ef0f..986a92815 100644
--- a/apps/web/src/workspace-feedback.test.ts
+++ b/apps/web/src/workspace-feedback.test.ts
@@ -2,67 +2,38 @@ import { expect, test } from "bun:test";
 import { createElement } from "react";
 import { renderToStaticMarkup } from "react-dom/server";
 
-import { ChatToggle } from "./workspace";
-
-test("chat state swaps use purposeful icon feedback", () => {
-	let markup = renderToStaticMarkup(
-		createElement(ChatToggle, {
-			activity: { busy: false, unread: 0 },
-			controls: "chat",
-			onToggle: () => {},
-			open: false,
-		}),
-	);
-
+import { SurfaceToggle } from "./workspace";
+
+let render = (expanded: boolean, activity = { busy: false, unread: 0 }) =>
+	renderToStaticMarkup(createElement(SurfaceToggle, {
+		activity,
+		controls: "chat",
+		expanded,
+		onToggle: () => {},
+	}));
+
+test("the expand control is an icon button that names the document", () => {
+	let markup = render(false);
+
+	expect(markup).toContain('aria-label="Expand document"');
+	expect(markup).toContain('data-tooltip="Expand document"');
+	expect(markup).toContain('aria-controls="chat"');
+	expect(markup).not.toContain("aria-expanded");
+	expect(markup).toContain("btn-icon");
 	expect(markup).toContain('data-motion-feedback="icon"');
-	expect(markup).toContain("motion-feedback");
-});
-
-test("the open chat header swaps its glyph without display changes", () => {
-	let markup = renderToStaticMarkup(
-		createElement(ChatToggle, {
-			activity: { busy: false, unread: 0 },
-			controls: "chat",
-			onToggle: () => {},
-			open: true,
-			swapOnHover: true,
-		}),
-	);
-
-	expect(markup.match(/class="chat-toggle-icon/g)).toHaveLength(2);
-	expect(markup).toContain('aria-label="Hide chat"');
-	expect(markup).toContain("chat-toggle-icon-sidebar");
-	expect(markup).toContain("rotate-180");
-	expect(markup).not.toContain("group-hover:hidden");
-	expect(markup).not.toContain("group-hover:block");
+	expect(markup).not.toContain("panel-close.svg");
+	expect(markup).not.toContain(">Chat<");
 });
 
-test("the open chat control has a distinct close action", () => {
-	let markup = renderToStaticMarkup(
-		createElement(ChatToggle, {
-			activity: { busy: false, unread: 0 },
-			controls: "chat",
-			onToggle: () => {},
-			open: true,
-		}),
-	);
-
-	expect(markup).toContain('aria-label="Hide chat"');
-	expect(markup).toContain('data-tooltip="Hide chat"');
-	expect(markup).toContain('data-tooltip-verbatim=""');
-	expect(markup).toContain("panel-close.svg");
-});
-
-test("live busy feedback stays immediate", () => {
-	let markup = renderToStaticMarkup(
-		createElement(ChatToggle, {
-			activity: { busy: true, unread: 0 },
-			controls: "chat",
-			onToggle: () => {},
-			open: false,
-		}),
-	);
-
-	expect(markup).toContain('aria-label="Show chat, Planner working"');
-	expect(markup).not.toContain('data-motion-feedback="count"');
+test("the restore control shows a Chat label and reports Planner activity", () => {
+	let busy = render(true, { busy: true, unread: 0 });
+	let unread = render(true, { busy: false, unread: 2 });
+
+	expect(busy).toContain('aria-label="Show chat, Planner working"');
+	expect(busy).toContain('aria-expanded="false"');
+	expect(busy).toContain(">Chat</span>");
+	expect(busy).not.toContain('data-motion-feedback="count"');
+	expect(unread).toContain('aria-label="Show chat, 2 unread"');
+	expect(unread).toContain('data-motion-feedback="count"');
+	expect(unread.match(/<span aria-hidden="true"/g)).toHaveLength(1);
 });
diff --git a/apps/web/src/workspace.tsx b/apps/web/src/workspace.tsx
index dd03176b5..62516fb38 100644
--- a/apps/web/src/workspace.tsx
+++ b/apps/web/src/workspace.tsx
@@ -4,7 +4,7 @@ import { useEffect, useId, useLayoutEffect, useReducer, useRef, useState } from
 import { Count } from "@chopin/editor/count";
 import { ContentSwapLayer } from "@chopin/editor/content-swap";
 import { useTransitionPresence } from "@chopin/editor/transition-presence";
-import { CloseIcon } from "@chopin/icons";
+import { CloseIcon, CollapseIcon, ExpandIcon } from "@chopin/icons";
 
 import {
 	CHAT_CHOICE_STORAGE_KEY,
@@ -16,8 +16,6 @@ import {
 	workspaceHeadingId,
 	workspaceProfile,
 } from "./workspace-model";
-import chatCloseIcon from "./assets/icons/panel-close.svg";
-import chatIcon from "./assets/icons/chat.svg";
 import { clampPane, ResizeHandle, usePaneWidth } from "./resizable-pane";
 import { workspaceSizing } from "./workspace-sizing";
 import "./workspace-sizing.css";
@@ -128,6 +126,8 @@ export type WorkspaceProps = {
 	controls: ReactNode;
 	/** Connection and document status, right-aligned in the document header. */
 	status?: ReactNode;
+	/** People present in the room, shown after the status in the document tab row. */
+	presence?: ReactNode;
 	ids: WorkspaceIds;
 	mode: WorkspaceMode;
 	state: WorkspaceState;
@@ -142,23 +142,14 @@ export type WorkspaceProps = {
 	presentation: WorkspacePresentation;
 };
 
-export function ChatToggle(
-	{
-		activity,
-		buttonRef,
-		className,
-		controls,
-		onToggle,
-		open,
-		swapOnHover = false,
-	}: {
+/** One button that trades the Chat column for a full-width document and back. */
+export function SurfaceToggle(
+	{ activity, buttonRef, controls, expanded, onToggle }: {
 		activity: WorkspaceProps["chatActivity"];
 		buttonRef?: RefObject<HTMLButtonElement | null>;
-		className?: string;
 		controls: string;
+		expanded: boolean;
 		onToggle: () => void;
-		open: boolean;
-		swapOnHover?: boolean;
 	},
 ) {
 	let status = activity.busy
@@ -167,55 +158,37 @@ export function ChatToggle(
 		? `${activity.unread} unread`
 		: undefined;
 	let feedback = motionContract("feedback").className;
+	let unread = !activity.busy && activity.unread > 0;
 	return (
 		<button
 			aria-controls={controls}
-			aria-description={open ? status : undefined}
-			aria-expanded={open}
-			aria-label={open ? "Hide chat" : `Show chat${status ? `, ${status}` : ""}`}
-			className={`chat-toggle btn btn-icon btn-ghost relative shrink-0 ${className ?? ""}`}
-			data-tooltip={open ? "Hide chat" : "Show chat"}
+			aria-expanded={expanded ? false : undefined}
+			aria-label={expanded ? `Show chat${status ? `, ${status}` : ""}` : "Expand document"}
+			className={`chat-toggle btn btn-icon btn-ghost relative shrink-0 ${
+				expanded ? "surface-toggle-restore" : ""
+			}`}
+			data-activity={activity.busy ? "busy" : unread ? "unread" : undefined}
+			data-tooltip={expanded ? "Show chat" : "Expand document"}
 			data-tooltip-shortcut={shortcutLabel("toggle-chat", currentShortcutPlatform())}
-			data-tooltip-verbatim={open ? "" : undefined}
-			data-activity={activity.busy ? "busy" : activity.unread > 0 ? "unread" : undefined}
 			onClick={onToggle}
 			ref={buttonRef}
 			type="button"
 		>
-			{swapOnHover
-				? (
-					<span
-						className={`${feedback} grid size-(--icon-size-default)`}
-						data-motion-feedback="icon"
-					>
-						<img
-							alt=""
-							className="chat-toggle-icon chat-toggle-icon-default col-start-1 row-start-1 size-(--icon-size-default)"
-							src={chatIcon}
-						/>
-						<img
-							alt=""
-							className="chat-toggle-icon chat-toggle-icon-sidebar col-start-1 row-start-1 size-(--icon-size-default) rotate-180"
-							src={chatCloseIcon}
-						/>
-					</span>
-				)
-				: (
-					<img
-						alt=""
-						className={`${feedback} size-(--icon-size-default)`}
-						data-motion-feedback="icon"
-						key={open ? "open" : "closed"}
-						src={open ? chatCloseIcon : chatIcon}
-					/>
-				)}
-			{status && !open && (
+			<span
+				className={`${feedback} grid size-(--icon-size-default)`}
+				data-motion-feedback="icon"
+				key={expanded ? "restore" : "expand"}
+			>
+				{expanded ? <CollapseIcon size={14} /> : <ExpandIcon size={14} />}
+			</span>
+			{expanded && <span>Chat</span>}
+			{expanded && status && (
 				<span
 					aria-hidden="true"
 					className={`absolute right-1 top-1 size-1.5 rounded-full bg-brand ${
-						!activity.busy && activity.unread > 0 ? feedback : ""
+						unread ? feedback : ""
 					}`}
-					data-motion-feedback={!activity.busy && activity.unread > 0 ? "count" : undefined}
+					data-motion-feedback={unread ? "count" : undefined}
 				/>
 			)}
 		</button>
@@ -264,6 +237,7 @@ export function Workspace(
 		onDesktopChatOpen,
 		onDestination,
 		plan,
+		presence,
 		presentation: workspacePresentation,
 		state,
 		status,
@@ -393,13 +367,21 @@ export function Workspace(
 	return (
 		<div
 			className="workspace-root flex h-full flex-col overflow-hidden bg-ground"
+			data-document-expanded={presentation.documentExpanded || undefined}
 			data-workspace-mode={mode}
 			data-workspace-room={identity}
 			data-workspace-surface={profile.surface}
 			data-workspace-travel={travel.back ? "back" : undefined}
 			ref={root}
+			style={mode === "split" ? { "--chat-width": `${chatWidth}px` } as CSSProperties : undefined}
 		>
-			{header}
+			<div
+				aria-hidden={presentation.documentExpanded || undefined}
+				className="workspace-header-slot shrink-0"
+				inert={presentation.documentExpanded}
+			>
+				{header}
+			</div>
 
 			{mode !== "split" && (
 				<nav
@@ -472,7 +454,7 @@ export function Workspace(
 				ref={frame}
 				className={`workspace-frame relative flex min-h-0 flex-1 ${
 					mode === "split"
-						? "mx-3 mb-3 overflow-hidden rounded-panel bg-page shadow-raised ring-hairline"
+						? "mx-3 mb-3"
 						: "m-2 overflow-hidden rounded-panel bg-page shadow-resting ring-hairline"
 				}`}
 				data-paper-obscured={paperObscured || undefined}
@@ -480,9 +462,7 @@ export function Workspace(
 			>
 				<main
 					aria-hidden={!presentation.documentVisible || undefined}
-					className={`workspace-document-panel relative min-w-0 w-full flex-1 ${
-						mode === "split" ? "hairline-l hairline-b" : ""
-					}`}
+					className="workspace-document-panel relative min-w-0 w-full flex-1"
 					hidden={documentPresence.phase === "closed"}
 					inert={!presentation.documentVisible}
 				>
@@ -502,20 +482,21 @@ export function Workspace(
 									}
 								}}
 							>
-								{chat && !presentation.chatVisible && (
-									<ChatToggle
-										activity={chatActivity}
-										buttonRef={edgeTab}
-										className="mr-1 shrink-0"
-										controls={ids.pane.chat}
-										onToggle={showDesktopChat}
-										open={false}
-										swapOnHover
-									/>
+								{chat && (
+									<span className="workspace-surface-toggle-slot flex shrink-0 items-center">
+										<SurfaceToggle
+											activity={chatActivity}
+											buttonRef={edgeTab}
+											controls={ids.pane.chat}
+											expanded={presentation.documentExpanded}
+											onToggle={presentation.documentExpanded ? showDesktopChat : dismissChat}
+										/>
+									</span>
 								)}
 								{controls}
 								<div className="ml-auto flex shrink-0 items-center gap-2 pl-2">
 									{status}
+									{presence}
 									{childPresentation && (
 										<div className="flex shrink-0 items-center">
 											<button
@@ -593,8 +574,8 @@ export function Workspace(
 					<aside
 						aria-hidden={chatInactive || undefined}
 						aria-labelledby={ids.heading.chat}
-						className={`workspace-chat-panel motion-panel ${chatPresence.className} relative flex min-w-0 flex-col overflow-hidden bg-chat-pane ${
-							mode === "split" ? "hairline-l hairline-r hairline-b" : ""
+						className={`workspace-chat-panel motion-panel ${chatPresence.className} relative flex min-w-0 flex-col overflow-hidden ${
+							mode === "split" ? "" : "bg-chat-pane"
 						}`}
 						data-pane-moving={chatTrack.moving || undefined}
 						hidden={chatPresence.phase === "closed"}
@@ -608,58 +589,22 @@ export function Workspace(
 							}
 						}}
 						onTransitionEnd={chatTrack.onTransitionEnd}
-						style={mode === "split"
-							? { "--chat-width": `${chatWidth}px` } as CSSProperties
-							: { width: "100%" }}
+						style={mode === "split" ? undefined : { width: "100%" }}
 					>
-						{mode === "split"
-							? (
-								<div
-									className="chat-header panel-header flex shrink-0 items-center gap-2 px-(--panel-header-padding-inline) hairline-b"
-									data-chat-header
-								>
-									{presentation.separatorVisible && (
-										<ResizeHandle
-											label="Resize chat"
-											max={maximum}
-											min={CHAT_PANE.min}
-											onResize={resizeChat}
-											side="right"
-											width={chatWidth}
-										/>
-									)}
-									<span
-										aria-hidden="true"
-										className="relative grid size-(--icon-size-default) shrink-0"
-										data-chat-identity
-									>
-										<img alt="" className="size-(--icon-size-default)" src={chatIcon} />
-										{(chatActivity.busy || chatActivity.unread > 0) && (
-											<span className="absolute -right-0.5 -top-0.5 size-1.5 rounded-full bg-brand" />
-										)}
-									</span>
-									<h2
-										className="text-sm font-medium text-text-tertiary"
-										id={ids.heading.chat}
-										tabIndex={-1}
-									>
-										Chat
-									</h2>
-									<ChatToggle
-										activity={chatActivity}
-										className="chat-header-control -mr-(--panel-header-control-offset) ml-auto"
-										controls={ids.pane.chat}
-										onToggle={dismissChat}
-										open
-									/>
-								</div>
-							)
-							: (
-								<h2 className="sr-only" id={ids.heading.chat} tabIndex={-1}>
-									Chat
-								</h2>
+						<h2 className="sr-only" id={ids.heading.chat} tabIndex={-1}>
+							Chat
+						</h2>
+						<div className="workspace-chat-body relative min-h-0 flex-1">
+							{presentation.separatorVisible && (
+								<ResizeHandle
+									label="Resize chat"
+									max={maximum}
+									min={CHAT_PANE.min}
+									onResize={resizeChat}
+									side="right"
+									width={chatWidth}
+								/>
 							)}
-						<div className="min-h-0 flex-1">
 							{chat}
 						</div>
 					</aside>
diff --git a/packages/icons/src/index.ts b/packages/icons/src/index.ts
index 2c8d53442..3bb579079 100644
--- a/packages/icons/src/index.ts
+++ b/packages/icons/src/index.ts
@@ -24,11 +24,13 @@ export {
 	ClockIcon,
 	CloseIcon,
 	CodeIcon,
+	CollapseIcon,
 	ColumnsIcon,
 	DecisionIcon,
 	DiagramIcon,
 	DiffIcon,
 	EllipsisIcon,
+	ExpandIcon,
 	FitWidthIcon,
 	FormulaIcon,
 	ImageIcon,
diff --git a/packages/icons/src/line.tsx b/packages/icons/src/line.tsx
index 2bc87b125..e56688d12 100644
--- a/packages/icons/src/line.tsx
+++ b/packages/icons/src/line.tsx
@@ -388,3 +388,27 @@ export function PauseIcon(props: IconProps) {
 		</LineIcon>
 	);
 }
+
+/** Diagonal arrows pointing outward: let the document fill the workspace. */
+export function ExpandIcon(props: IconProps) {
+	return (
+		<LineIcon {...props}>
+			<polyline points="11 2.75 15.25 2.75 15.25 7" />
+			<line x1="15.25" x2="10.25" y1="2.75" y2="7.75" />
+			<polyline points="7 15.25 2.75 15.25 2.75 11" />
+			<line x1="2.75" x2="7.75" y1="15.25" y2="10.25" />
+		</LineIcon>
+	);
+}
+
+/** Diagonal arrows pointing inward: give the workspace back to Chat. */
+export function CollapseIcon(props: IconProps) {
+	return (
+		<LineIcon {...props}>
+			<polyline points="10.25 3.5 10.25 7.75 14.5 7.75" />
+			<line x1="10.25" x2="15.25" y1="7.75" y2="2.75" />
+			<polyline points="7.75 14.5 7.75 10.25 3.5 10.25" />
+			<line x1="7.75" x2="2.75" y1="10.25" y2="15.25" />
+		</LineIcon>
+	);
+}

From 1b543d7956e9e2228dc3bb0c950d7e89512ff298 Mon Sep 17 00:00:00 2001
From: Maggie Appleton <5599295+MaggieAppleton@users.noreply.github.com>
Date: Sat, 10 Oct 2026 18:28:41 +0100
Subject: [PATCH 03/16] Show presence at the end of the document tab row in
 split

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 apps/web/src/navigation-chrome.test.ts | 22 ++++++++-
 apps/web/src/room-workspace.tsx        | 63 +++++++++++++++-----------
 2 files changed, 57 insertions(+), 28 deletions(-)

diff --git a/apps/web/src/navigation-chrome.test.ts b/apps/web/src/navigation-chrome.test.ts
index b7dc7e4d0..754b93f3c 100644
--- a/apps/web/src/navigation-chrome.test.ts
+++ b/apps/web/src/navigation-chrome.test.ts
@@ -10,7 +10,7 @@ import {
 	toggleCollapsedProjectIds,
 } from "./project-sidebar";
 import { ProjectSidebarExpandButton } from "./project-sidebar-chrome";
-import { Header } from "./room-workspace";
+import { Header, RoomMembers } from "./room-workspace";
 
 import type { ComponentProps } from "react";
 
@@ -172,6 +172,26 @@ describe("the Figma navigation chrome", () => {
 		expect(markup).not.toContain("No documents yet.");
 	});
 
+	test("leaves presence out of the header when the tab row owns it", () => {
+		let markup = renderToStaticMarkup(createElement(Header, {
+			canManage: true,
+			label: "Hushed mountain",
+			onAction() {},
+			onEditingChange() {},
+			onRenamed() {},
+			presentation: { type: "document" },
+			room: "room-one",
+		}));
+		let members = renderToStaticMarkup(createElement(RoomMembers, {
+			members: [{ handle: "MaggieAppleton", client: "tab-one" }],
+			ring: "page",
+		}));
+
+		expect(markup).not.toContain("People here");
+		expect(members).toContain('aria-label="People here: MaggieAppleton"');
+		expect(members).toContain('role="group"');
+	});
+
 	test("keeps the document header to one project icon and document trigger", () => {
 		let props = {
 			canManage: true,
diff --git a/apps/web/src/room-workspace.tsx b/apps/web/src/room-workspace.tsx
index 04145236d..b82c2d21d 100644
--- a/apps/web/src/room-workspace.tsx
+++ b/apps/web/src/room-workspace.tsx
@@ -101,6 +101,38 @@ const QUESTION_MOTION = {
 	immediately: settleMotionImmediately,
 };
 
+export function RoomMembers(
+	{ members, ring }: { members: Session.Member[]; ring: "ground" | "page" },
+) {
+	let people = peopleHere(members);
+	return (
+		<div
+			aria-label={`People here: ${people.join(", ")}`}
+			className="room-members ml-auto flex shrink-0 items-center"
+			role="group"
+		>
+			{people.map(handle => (
+				<span
+					className="room-member-face -ml-1.5 first:ml-0"
+					data-tooltip={handle}
+					data-tooltip-verbatim=""
+					key={handle.toLowerCase()}
+				>
+					<Face handle={handle} ring={ring} size={24} textSize="2xs" titled={false} />
+				</span>
+			))}
+			{people.length > 3 && (
+				<span
+					aria-hidden="true"
+					className="room-member-overflow ml-1 hidden text-xs text-text-tertiary"
+				>
+					+{people.length - 3}
+				</span>
+			)}
+		</div>
+	);
+}
+
 export function Header(
 	{
 		archivedAt,
@@ -118,7 +150,7 @@ export function Header(
 		archivedAt?: string;
 		canManage: boolean;
 		editing?: TitleEdit;
-		members: Session.Member[];
+		members?: Session.Member[];
 		label: string;
 		onAction: (action: DocumentAction) => void;
 		onEditingChange: (editing?: TitleEdit) => void;
@@ -128,7 +160,6 @@ export function Header(
 		room: string;
 	},
 ) {
-	let people = peopleHere(members);
 	let header = useRef<HTMLElement>(null);
 	let title = useRef<HTMLButtonElement>(null);
 	let previousEdit = useRef(editing);
@@ -254,30 +285,7 @@ export function Header(
 					</span>
 				)}
 			</div>
-			<div
-				aria-label={`People here: ${people.join(", ")}`}
-				className="room-members ml-auto flex shrink-0 items-center"
-				role="group"
-			>
-				{people.map(handle => (
-					<span
-						className="room-member-face -ml-1.5 first:ml-0"
-						data-tooltip={handle}
-						data-tooltip-verbatim=""
-						key={handle.toLowerCase()}
-					>
-						<Face handle={handle} ring="ground" size={24} textSize="2xs" titled={false} />
-					</span>
-				))}
-				{people.length > 3 && (
-					<span
-						aria-hidden="true"
-						className="room-member-overflow ml-1 hidden text-xs text-text-tertiary"
-					>
-						+{people.length - 3}
-					</span>
-				)}
-			</div>
+			{members && <RoomMembers members={members} ring="ground" />}
 		</header>
 	);
 }
@@ -1039,7 +1047,7 @@ export function RoomWorkspace(
 						archivedAt={workspaceArchivedAt}
 						canManage={effectiveCanManage}
 						editing={titleEdit}
-						members={members}
+						members={mode === "split" ? undefined : members}
 						label={metadata.title}
 						onAction={action => onDocumentAction(room, action)}
 						onEditingChange={setTitleEdit}
@@ -1124,6 +1132,7 @@ export function RoomWorkspace(
 				ids={workspaceIds}
 				identity={room}
 				mode={mode}
+				presence={<RoomMembers members={members} ring="page" />}
 				onDesktopChatOpen={setDesktopChatOpen}
 				onChatOpen={open => dispatch({ type: "set-chat", open })}
 				onDestination={selectDestination}

From e0ab4398cf7937f9a37bc488e4e5c88754bb12ab Mon Sep 17 00:00:00 2001
From: Maggie Appleton <5599295+MaggieAppleton@users.noreply.github.com>
Date: Sat, 10 Oct 2026 18:33:08 +0100
Subject: [PATCH 04/16] Lay the document out as a raised sheet beside Chat on
 the ground

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 apps/web/DESIGN.md          |  4 +-
 apps/web/src/navigation.css | 18 ++++++++
 apps/web/src/theme.css      | 88 ++++++++++++++++++++++++++++++++++++-
 3 files changed, 106 insertions(+), 4 deletions(-)

diff --git a/apps/web/DESIGN.md b/apps/web/DESIGN.md
index a20a2d042..58c613dfe 100644
--- a/apps/web/DESIGN.md
+++ b/apps/web/DESIGN.md
@@ -149,13 +149,13 @@ text only when people need it to act or recover.
 
 ## Layout
 
-The workspace places Chat on the left and the document on the right when space permits. Document, Decisions, and Build switch the main pane; Build is available on parent documents. Local investigation proposals, approval controls, and results appear in the document flow. The Projects sidebar slides over the document without resizing it; on narrower screens, panels take their own view. The document uses a maximum prose measure of 40.625rem (650px), with 3.75rem (60px) of top padding and at least 3.5rem (56px) of padding on each side. At browser widths of 600px or less, the horizontal padding becomes 1.5rem (24px). Images and diagrams can extend beyond the prose measure within those gutters; tables can grow toward the trailing gutter and retain their own scroll lane.
+The workspace places Chat on the left and the document on the right when space permits. Chat and its top bar (breadcrumb and document title) sit directly on the ground; the document is a raised sheet that rises to the top margin, and its tab row holds the expand control, the Document/Decisions/Build views and presence. Expanding the document hides Chat and the top bar; a Chat button in the same place restores them. Document, Decisions, and Build switch the main pane; Build is available on parent documents. Local investigation proposals, approval controls, and results appear in the document flow. The Projects sidebar slides over the document without resizing it; on narrower screens, panels take their own view. The document uses a maximum prose measure of 40.625rem (650px), with 3.75rem (60px) of top padding and at least 3.5rem (56px) of padding on each side. At browser widths of 600px or less, the horizontal padding becomes 1.5rem (24px). Images and diagrams can extend beyond the prose measure within those gutters; tables can grow toward the trailing gutter and retain their own scroll lane.
 
 Spacing starts from a 4px unit and uses the measured steps shown in the frontmatter. App chrome is dense; prose has larger margins and trailing space so the caret remains comfortable near the end of a document. Layout responds to both viewport and document container width. Safe-area insets and larger coarse-pointer targets are accounted for in the web styles.
 
 ## Elevation & Depth
 
-The system is mostly flat. Tonal separation and passive edges distinguish adjacent panes; subtle resting, raised, and overlay shadows distinguish surfaces that actually sit above others. In the split workspace, the frame owns elevation and its internal document pane does not add a second shadow.
+The system is mostly flat. Tonal separation and passive edges distinguish adjacent panes; subtle resting, raised, and overlay shadows distinguish surfaces that actually sit above others. In the split workspace the document panel is the only raised sheet; Chat has no surface of its own. The composer on the ground uses the inset surface without a shadow.
 
 ## Shapes
 
diff --git a/apps/web/src/navigation.css b/apps/web/src/navigation.css
index dad19a383..067ed4de7 100644
--- a/apps/web/src/navigation.css
+++ b/apps/web/src/navigation.css
@@ -48,6 +48,13 @@
 	padding-left: 44px;
 }
 
+/* With the top bar hidden, the sheet clears the floating Show sidebar trigger itself. */
+.navigation-content[data-project-sidebar-trigger]
+	.workspace-root[data-document-expanded]
+	> .workspace-frame {
+	margin-left: calc(44px + env(safe-area-inset-left));
+}
+
 .anchored-child-host,
 .anchored-child-parent {
 	position: relative;
@@ -119,6 +126,17 @@
 	box-shadow: none;
 }
 
+/* The child sheet is already paper; its workspace keeps no second sheet or header gap. */
+.anchored-child-surface .workspace-root .workspace-document-panel {
+	margin-top: 0;
+	border-radius: 0;
+	box-shadow: none;
+}
+
+.anchored-child-surface .workspace-root .workspace-chat-panel {
+	padding-top: 0;
+}
+
 @keyframes anchored-child-enter {
 	from {
 		opacity: 0;
diff --git a/apps/web/src/theme.css b/apps/web/src/theme.css
index 74a8a285f..7f346fe7d 100644
--- a/apps/web/src/theme.css
+++ b/apps/web/src/theme.css
@@ -600,7 +600,7 @@ body {
 	box-shadow: var(--shadow-resting);
 }
 
-/* The split workspace is one elevated surface; its panes only own the divider. */
+/* The split frame only places the panes; the document panel below is the raised sheet. */
 .workspace-root[data-workspace-mode="split"] .workspace-frame {
 	margin-left: calc(var(--spacing) * 3 + env(safe-area-inset-left));
 	margin-right: calc(var(--spacing) * 3 + env(safe-area-inset-right));
@@ -618,6 +618,86 @@ body {
 	min-width: 9rem;
 }
 
+/*
+ * Split: Chat and its top bar sit on the ground; the document is the only sheet.
+ * The frame spans both rows so the sheet rises to the top margin beside the bar.
+ */
+.workspace-root[data-workspace-mode="split"] {
+	display: grid;
+	grid-template-columns: minmax(0, 1fr);
+	grid-template-rows: var(--document-shell-header-height) minmax(0, 1fr);
+}
+
+.workspace-root[data-workspace-mode="split"] > .workspace-header-slot {
+	z-index: 1;
+	grid-area: 1 / 1;
+	width: var(--chat-width, 0px);
+	min-width: 0;
+	transition: opacity var(--panel-open-dur) var(--motion-smooth-out);
+}
+
+.workspace-root[data-workspace-mode="split"][data-document-expanded] > .workspace-header-slot {
+	opacity: 0;
+	visibility: hidden;
+	transition:
+		opacity var(--panel-close-dur) var(--motion-smooth-out),
+		visibility 0s linear var(--panel-close-dur);
+}
+
+.workspace-root[data-workspace-mode="split"] > .workspace-frame {
+	grid-area: 1 / 1 / 3 / 2;
+}
+
+.workspace-root[data-workspace-mode="split"] .workspace-chat-panel {
+	padding-top: var(--document-shell-header-height);
+}
+
+.workspace-root[data-workspace-mode="split"] .workspace-chat-body {
+	padding-inline-end: calc(var(--spacing) * 2);
+}
+
+.workspace-root[data-workspace-mode="split"] .workspace-document-panel {
+	margin-top: calc(var(--spacing) * 3);
+	overflow: hidden;
+	border-radius: var(--radius-panel);
+	background: var(--color-page);
+	box-shadow: var(--shadow-raised);
+	outline: var(--edge-width) solid var(--color-edge);
+	outline-offset: calc(-1 * var(--edge-width));
+}
+
+.workspace-surface-toggle-slot {
+	padding-inline-end: var(--spacing);
+	margin-inline-end: var(--spacing);
+	border-inline-end: var(--edge-width) solid var(--color-divider);
+}
+
+/* The restore state carries a label, so it trades the square icon size for padding. */
+.surface-toggle-restore {
+	width: auto;
+	gap: calc(var(--spacing) * 1.5);
+	padding-inline: calc(var(--spacing) * 2) calc(var(--spacing) * 2.5);
+	border: var(--edge-width) solid var(--color-edge);
+	background: var(--color-inset);
+	color: var(--color-text-secondary);
+}
+
+.surface-toggle-restore:hover {
+	background: var(--color-selected);
+	color: var(--color-text-primary);
+}
+
+/* On the ground a white composer is the brightest thing in the column. */
+.workspace-root .chat-composer .field {
+	background: var(--color-inset);
+	box-shadow: none;
+}
+
+.workspace-root[data-workspace-mode="split"] .workspace-chat-panel .chat-composer {
+	padding-inline: var(--spacing);
+	padding-bottom: env(safe-area-inset-bottom);
+}
+
 .motion-panel {
 	opacity: 0;
 	transform: translateX(calc(var(--panel-distance) * var(--panel-direction, 1)));
@@ -649,7 +729,7 @@ body {
 	transform: none;
 }
 
-.workspace-root[data-workspace-mode="split"] .workspace-chat-panel > * {
+.workspace-root[data-workspace-mode="split"] .workspace-chat-panel > .workspace-chat-body {
 	width: var(--chat-width, 0px);
 }
 
@@ -1690,6 +1770,10 @@ button.question-add:disabled {
 		transition: none;
 	}
 
+	.workspace-root[data-workspace-mode="split"] > .workspace-header-slot {
+		transition: none;
+	}
+
 	[data-chat-enter] {
 		transition: none;
 	}

From aa9188323fd6453fad99088561decab0c99355ab Mon Sep 17 00:00:00 2001
From: Maggie Appleton <5599295+MaggieAppleton@users.noreply.github.com>
Date: Sat, 10 Oct 2026 18:36:52 +0100
Subject: [PATCH 05/16] Drop the sheet hairline inside the anchored child
 surface

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 apps/web/src/navigation.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/apps/web/src/navigation.css b/apps/web/src/navigation.css
index 067ed4de7..ad210c15d 100644
--- a/apps/web/src/navigation.css
+++ b/apps/web/src/navigation.css
@@ -131,6 +131,7 @@
 	margin-top: 0;
 	border-radius: 0;
 	box-shadow: none;
+	outline: none;
 }
 
 .anchored-child-surface .workspace-root .workspace-chat-panel {

From f9f29805ea2a19aaf1d43c66fba2d84c2feece89 Mon Sep 17 00:00:00 2001
From: Maggie Appleton <5599295+MaggieAppleton@users.noreply.github.com>
Date: Sat, 10 Oct 2026 18:38:39 +0100
Subject: [PATCH 06/16] Cover the paper layout in the browser

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 e2e/paper-layout.e2e.ts | 188 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 188 insertions(+)
 create mode 100644 e2e/paper-layout.e2e.ts

diff --git a/e2e/paper-layout.e2e.ts b/e2e/paper-layout.e2e.ts
new file mode 100644
index 000000000..2880f10ee
--- /dev/null
+++ b/e2e/paper-layout.e2e.ts
@@ -0,0 +1,188 @@
+/** Browser coverage for the paper layout: Chat on the ground, the document as a sheet. */
+
+import { chatInput, expectChatValue } from "./chat-input";
+import { expect, ready, test } from "./room";
+import { expectNoHorizontalOverflow } from "./responsive";
+
+import type { Locator, Page } from "@playwright/test";
+
+function box(target: Locator) {
+	return target.evaluate(element => element.getBoundingClientRect().toJSON() as DOMRect);
+}
+
+function chatPane(page: Page) {
+	return page.getByRole("complementary", { includeHidden: true, name: "Chat" });
+}
+
+function root(page: Page) {
+	return page.locator('[data-workspace-surface="document"]');
+}
+
+function sheet(page: Page) {
+	return root(page).locator(".workspace-document-panel");
+}
+
+function toolbar(page: Page) {
+	return root(page).locator("[data-document-toolbar]");
+}
+
+function resolved(page: Page, token: string) {
+	return page.evaluate(name => {
+		let probe = document.createElement("div");
+		probe.style.background = `var(${name})`;
+		document.body.append(probe);
+		let value = getComputedStyle(probe).backgroundColor;
+		probe.remove();
+		return value;
+	}, token);
+}
+
+test("split Chat sits on the ground without a header beside a raised sheet", async ({ join, page }) => {
+	await page.setViewportSize({ width: 1440, height: 900 });
+	await join("ana");
+	let pane = chatPane(page);
+	let header = page.getByRole("banner");
+
+	await expect(pane.locator("[data-chat-header]")).toHaveCount(0);
+	await expect(page.getByRole("button", { name: "Hide chat" })).toHaveCount(0);
+	await expect(page.getByRole("heading", { name: "Chat" })).toHaveClass(/sr-only/);
+	await expect(pane).toHaveCSS("background-color", "rgba(0, 0, 0, 0)");
+	let field = pane.locator(".chat-composer .field");
+	await expect(field).toHaveCSS("box-shadow", "none");
+	await expect(field).toHaveCSS("background-color", await resolved(page, "--color-inset"));
+
+	let [rootBox, headerBox, paneBox, sheetBox] = await Promise.all([
+		box(root(page)),
+		box(header),
+		box(pane),
+		box(sheet(page)),
+	]);
+	expect(Math.round(sheetBox.y - rootBox.y)).toBe(12);
+	expect(sheetBox.y).toBeLessThan(headerBox.y + headerBox.height);
+	expect(headerBox.x + headerBox.width).toBeLessThanOrEqual(sheetBox.x + 1);
+	expect(Math.round(paneBox.y)).toBe(Math.round(rootBox.y));
+	expect(Math.round(paneBox.x + paneBox.width)).toBe(Math.round(sheetBox.x));
+	await expect(sheet(page)).not.toHaveCSS("box-shadow", "none");
+});
+
+test("presence sits at the right end of the document tab row", async ({ join, page }) => {
+	await page.setViewportSize({ width: 1440, height: 900 });
+	await join("ana");
+	let people = toolbar(page).getByRole("group", { name: /People here: ana/ });
+
+	await expect(people).toBeVisible();
+	await expect(page.getByRole("banner").getByRole("group", { name: /People here:/ }))
+		.toHaveCount(0);
+	let [peopleBox, barBox, viewsBox] = await Promise.all([
+		box(people),
+		box(toolbar(page)),
+		box(page.getByRole("group", { name: "Document view" })),
+	]);
+	expect(peopleBox.x).toBeGreaterThan(viewsBox.x + viewsBox.width);
+	expect(barBox.x + barBox.width - (peopleBox.x + peopleBox.width)).toBeLessThan(24);
+});
+
+test("the document expands and restores Chat from the keyboard and remembers it", async ({ join, page }) => {
+	await page.setViewportSize({ width: 1440, height: 900 });
+	await join("ana");
+	let pane = chatPane(page);
+	let paneId = await pane.getAttribute("id");
+	let draft = chatInput(pane);
+	let expand = toolbar(page).getByRole("button", { name: "Expand document" });
+	let views = page.getByRole("group", { name: "Document view" });
+	await draft.fill("unfinished thought");
+
+	let [expandBox, viewsBox] = await Promise.all([box(expand), box(views)]);
+	expect(expandBox.x + expandBox.width).toBeLessThanOrEqual(viewsBox.x);
+	await expect(expand).toHaveAttribute("aria-controls", paneId!);
+	await expand.focus();
+	await page.keyboard.press("Enter");
+
+	let restore = toolbar(page).getByRole("button", { name: "Show chat" });
+	await expect(pane).toBeHidden();
+	await expect(restore).toBeFocused();
+	await expect(restore).toHaveText("Chat");
+	expect(await restore.evaluate(element => element.scrollWidth <= element.clientWidth)).toBe(true);
+	await expect(restore).toHaveAttribute("aria-expanded", "false");
+	await expect(page.locator(".room-header")).toBeHidden();
+	let frame = root(page).locator(".workspace-frame");
+	await expect.poll(async () => Math.round((await box(sheet(page))).width))
+		.toBe(Math.round((await box(frame)).width));
+	await page.keyboard.press("Shift+Tab");
+	await expect(page.locator(".room-header :focus")).toHaveCount(0);
+
+	await restore.focus();
+	await page.keyboard.press("Enter");
+	await expect(pane).toBeVisible();
+	await expect(page.getByRole("heading", { name: "Chat" })).toBeFocused();
+	await expect(page.locator(".room-header")).toBeVisible();
+	await expectChatValue(draft, "unfinished thought");
+
+	await toolbar(page).getByRole("button", { name: "Expand document" }).click();
+	await page.reload();
+	await ready(page);
+	await expect(chatPane(page)).toBeHidden();
+	await expect(toolbar(page).getByRole("button", { name: "Show chat" })).toBeVisible();
+});
+
+test("reduced motion swaps Chat and the top bar without transitions", async ({ join, page }) => {
+	await page.emulateMedia({ reducedMotion: "reduce" });
+	await page.setViewportSize({ width: 1440, height: 900 });
+	await join("ana");
+	await toolbar(page).getByRole("button", { name: "Expand document" }).click();
+	await expect(chatPane(page)).toBeHidden();
+	await expect(root(page).locator(".workspace-header-slot")).toHaveCSS("transition-duration", "0s");
+});
+
+test("the expanded sheet clears a collapsed Projects sidebar trigger", async ({ join, page }) => {
+	await page.setViewportSize({ width: 1440, height: 900 });
+	await join("ana");
+	await page.getByRole("button", { name: "Hide sidebar" }).click();
+	await toolbar(page).getByRole("button", { name: "Expand document" }).click();
+	let trigger = page.getByRole("button", { name: "Show sidebar" });
+	let restore = toolbar(page).getByRole("button", { name: "Show chat" });
+
+	await expect.poll(async () => {
+		let [a, b] = await Promise.all([box(trigger), box(restore)]);
+		return a.x + a.width <= b.x || a.y + a.height <= b.y;
+	}).toBe(true);
+	await restore.click();
+	await expect(chatPane(page)).toBeVisible();
+});
+
+test("the resize handle sits on the seam between Chat and the sheet", async ({ join, page }) => {
+	await page.setViewportSize({ width: 1440, height: 900 });
+	await join("ana");
+	let handle = page.getByRole("separator", { name: "Resize chat" });
+	let [handleBox, sheetBox] = await Promise.all([box(handle), box(sheet(page))]);
+
+	expect(Math.abs(handleBox.x + handleBox.width - sheetBox.x)).toBeLessThanOrEqual(4);
+	let before = (await box(chatPane(page))).width;
+	await handle.press("ArrowRight");
+	await expect.poll(async () => (await box(chatPane(page))).width).toBeGreaterThan(before);
+});
+
+test("compact keeps its header presence and navigation, and split keeps expansion", async ({ join, page }) => {
+	await page.setViewportSize({ width: 1440, height: 900 });
+	await join("ana");
+	await toolbar(page).getByRole("button", { name: "Expand document" }).click();
+
+	await page.setViewportSize({ width: 600, height: 844 });
+	let header = page.getByRole("banner");
+	await expect(page.getByRole("navigation", { name: "Workspace view" })).toBeVisible();
+	await expect(page.getByRole("button", { name: "Expand document" })).toHaveCount(0);
+	await expect(page.getByRole("button", { name: "Show chat" })).toHaveCount(0);
+	await expect(header.getByRole("group", { name: /People here: ana/ })).toBeVisible();
+	expect(Math.round((await box(header)).width)).toBe(600);
+	await expectNoHorizontalOverflow(page);
+	await page.getByRole("navigation", { name: "Workspace view" }).getByRole("button", {
+		name: /Chat/,
+	}).first().click();
+	let compactField = chatPane(page).locator(".chat-composer .field");
+	await expect(compactField).toHaveCSS("box-shadow", "none");
+	await expect(compactField).toHaveCSS("background-color", await resolved(page, "--color-inset"));
+
+	await page.setViewportSize({ width: 1440, height: 900 });
+	await expect(toolbar(page).getByRole("button", { name: "Show chat" })).toBeVisible();
+	await expect(chatPane(page)).toBeHidden();
+});

From 7ca017ada6d6ceb2295e1b6dbc6ce7dfb59359db Mon Sep 17 00:00:00 2001
From: Maggie Appleton <5599295+MaggieAppleton@users.noreply.github.com>
Date: Sat, 10 Oct 2026 18:39:51 +0100
Subject: [PATCH 07/16] Update browser suites for the expand control and
 tab-row presence

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
---
 e2e/collab.e2e.ts                   |  6 +--
 e2e/columns.e2e.ts                  |  4 +-
 e2e/conversation-plan-layout.e2e.ts |  2 +-
 e2e/conversation-plan-ui.e2e.ts     |  2 +-
 e2e/decision-marker.e2e.ts          |  2 +-
 e2e/images.e2e.ts                   |  4 +-
 e2e/research-child-recovery.e2e.ts  |  2 +-
 e2e/research-child-surface.e2e.ts   | 20 ++++------
 e2e/responsive-activity.e2e.ts      |  2 +-
 e2e/responsive-workspace.e2e.ts     | 10 ++---
 e2e/shell.e2e.ts                    | 62 ++++++++---------------------
 e2e/sidecar-option-async.e2e.ts     |  2 +-
 e2e/sidecar.e2e.ts                  |  4 +-
 e2e/smoke.e2e.ts                    |  3 +-
 14 files changed, 45 insertions(+), 80 deletions(-)

diff --git a/e2e/collab.e2e.ts b/e2e/collab.e2e.ts
index 6a5d4d8c7..d8c6ae09c 100644
--- a/e2e/collab.e2e.ts
+++ b/e2e/collab.e2e.ts
@@ -48,7 +48,7 @@ test("typing faster than the server takes updates still reaches everyone", async
 test("the header represents everyone here as faces", async ({ join }) => {
 	let ana = await join("ana");
 	let bo = await join("bo");
-	let header = ana.getByRole("banner");
+	let header = ana.getByRole("group", { name: /^People here:/ });
 
 	await expect(header.getByRole("img", { name: "ana" })).toHaveCount(1);
 	await expect(header.getByRole("img", { name: "bo" })).toHaveCount(1);
@@ -71,14 +71,14 @@ test("the header represents one account once across its open tabs", async ({ joi
 	await Promise.all([second.goto(first.url()), third.goto(first.url())]);
 	await Promise.all([ready(second), ready(third)]);
 
-	let people = first.getByRole("banner").getByRole("group", {
+	let people = first.getByRole("group", {
 		exact: true,
 		name: "People here: e2e",
 	});
 	await expect(people.getByRole("img", { name: "e2e" })).toHaveCount(1);
 
 	await first.close();
-	let remaining = third.getByRole("banner").getByRole("group", {
+	let remaining = third.getByRole("group", {
 		exact: true,
 		name: "People here: e2e",
 	});
diff --git a/e2e/columns.e2e.ts b/e2e/columns.e2e.ts
index 2977c7bce..d673fb549 100644
--- a/e2e/columns.e2e.ts
+++ b/e2e/columns.e2e.ts
@@ -68,7 +68,7 @@ The narrative continues after the layout.
 test("columns render side by side, stack in a narrow document, and unwrap in order", async ({ join, room, seed }) => {
 	await seed(SOURCE);
 	let page = await join("ana", { viewport: { width: 1440, height: 900 } });
-	await page.getByRole("button", { name: "Hide chat" }).click();
+	await page.getByRole("button", { name: "Expand document" }).click();
 	await expect.poll(() =>
 		page.locator(".plan-document").evaluate(element => element.getBoundingClientRect().width)
 	).toBeGreaterThan(800);
@@ -224,7 +224,7 @@ test("a two-image gallery keeps its ratio, captions, and responsive reading orde
 		}));
 	await seed(DISPLAY_GALLERY);
 	await join("ana");
-	await page.getByRole("button", { name: "Hide chat" }).click();
+	await page.getByRole("button", { name: "Expand document" }).click();
 	await expect(page.getByRole("button", { name: "Show chat" })).toBeVisible();
 	await expect.poll(() =>
 		page.locator(".workspace-chat-panel").evaluate(element => element.getBoundingClientRect().width)
diff --git a/e2e/conversation-plan-layout.e2e.ts b/e2e/conversation-plan-layout.e2e.ts
index b9b2ae098..4ae949840 100644
--- a/e2e/conversation-plan-layout.e2e.ts
+++ b/e2e/conversation-plan-layout.e2e.ts
@@ -104,7 +104,7 @@ test("the right Chat edge grows right, keeps its left-side reopen control, and r
 	expect(rememberedWidth).toBeLessThanOrEqual(Number(await handle.getAttribute("aria-valuemax")));
 	let frame = await box(page.locator(".workspace-frame"));
 
-	await page.getByRole("button", { name: "Hide chat" }).click();
+	await page.getByRole("button", { name: "Expand document" }).click();
 	await expect(chat).toBeHidden();
 	let opener = page.getByRole("button", { name: "Show chat" });
 	let openerBox = await box(opener);
diff --git a/e2e/conversation-plan-ui.e2e.ts b/e2e/conversation-plan-ui.e2e.ts
index a9afebe38..5fb0c4a1a 100644
--- a/e2e/conversation-plan-ui.e2e.ts
+++ b/e2e/conversation-plan-ui.e2e.ts
@@ -441,7 +441,7 @@ test("failed analysis retries in Chat while editor selection survives hiding Cha
 	await page.keyboard.press("ControlOrMeta+A");
 	let selected = await page.evaluate(() => window.getSelection()?.toString() ?? "");
 	expect(selected).toContain("selected sentence");
-	await page.getByRole("button", { name: /Hide chat/ }).click();
+	await page.getByRole("button", { name: /Expand document/ }).click();
 	await page.getByRole("button", { name: /Show chat/ }).click();
 	await expect(editor).toBeVisible();
 	await expect.poll(() => page.evaluate(() => window.getSelection()?.toString() ?? ""))
diff --git a/e2e/decision-marker.e2e.ts b/e2e/decision-marker.e2e.ts
index 46422ab0e..69ec1aeae 100644
--- a/e2e/decision-marker.e2e.ts
+++ b/e2e/decision-marker.e2e.ts
@@ -125,7 +125,7 @@ function prose(page: Page, text: string) {
 
 async function open(page: Page, answer = "Team by team") {
 	await page.setViewportSize({ width: 1_440, height: 900 });
-	await page.getByRole("button", { name: "Hide chat" }).click();
+	await page.getByRole("button", { name: "Expand document" }).click();
 	await page.getByRole("button", { name: "Hide sidebar" }).click();
 	// The panes animate; a marker under a still-moving pointer would be left behind.
 	let last = "";
diff --git a/e2e/images.e2e.ts b/e2e/images.e2e.ts
index 17cbf92ea..866e50b14 100644
--- a/e2e/images.e2e.ts
+++ b/e2e/images.e2e.ts
@@ -169,7 +169,7 @@ test("linked images can grow within the paragraph and still open a preview", asy
 	await loadImage(page);
 	await seed(`[![An open working document](${IMAGE_URL})](https://example.com/details)\n`);
 	await join("ana");
-	await page.getByRole("button", { name: "Hide chat", exact: true }).click();
+	await page.getByRole("button", { name: "Expand document", exact: true }).click();
 	await expect.poll(() => width(page)).toBe(480);
 	await image(page).hover();
 	let corner = content(page).getByRole("slider", {
@@ -244,7 +244,7 @@ Neighboring notes.
 </Columns>
 `);
 	await join("ana");
-	await page.getByRole("button", { name: "Hide chat", exact: true }).click();
+	await page.getByRole("button", { name: "Expand document", exact: true }).click();
 	await expect.poll(() =>
 		image(page).evaluate(element => {
 			let column = element.closest(".planColumn")!;
diff --git a/e2e/research-child-recovery.e2e.ts b/e2e/research-child-recovery.e2e.ts
index 8d21862d0..fe9c25856 100644
--- a/e2e/research-child-recovery.e2e.ts
+++ b/e2e/research-child-recovery.e2e.ts
@@ -302,7 +302,7 @@ test(
 		let research = await scriptResearch(page, room, port(baseURL!));
 		let opened = await join("ana");
 		await opened.setViewportSize({ width: 1500, height: 895 });
-		let hideChat = opened.getByRole("button", { name: "Hide chat", exact: true });
+		let hideChat = opened.getByRole("button", { name: "Expand document", exact: true });
 		if (await hideChat.isVisible()) await hideChat.click();
 		let editor = content(opened);
 		await expect.poll(async () => (await editor.locator("p").first().boundingBox())!.width)
diff --git a/e2e/research-child-surface.e2e.ts b/e2e/research-child-surface.e2e.ts
index 84a14815f..0825f721e 100644
--- a/e2e/research-child-surface.e2e.ts
+++ b/e2e/research-child-surface.e2e.ts
@@ -135,7 +135,7 @@ test("a parent-owned child keeps the parent chrome and nested geometry", async (
 	await expect(parentHeader.getByRole("button", { name: `Return to Test ${room.slice(0, 8)}` }))
 		.toBeVisible();
 	await expect(parentHeader.getByText(childTitle, { exact: true })).toBeVisible();
-	await expect(parentHeader.getByRole("group", { name: /People here:/ })).toBeVisible();
+	await expect(parent.locator("[data-document-toolbar] .room-members")).toBeVisible();
 	await expect(parentPaper).toHaveAttribute("inert", "");
 	await expect(parentPaper).toHaveAttribute("aria-hidden", "true");
 	await expect(parentPaper).toHaveCSS("filter", "none");
@@ -265,8 +265,8 @@ test("a child isolates chat and decisions across every parent-owned close path",
 	});
 	await expect(parentChat).not.toContainText(childRoomMessage);
 	await expect(parentChat).not.toContainText(childPlannerTranscript);
-	await childChat.getByRole("button", {
-		name: "Hide chat",
+	await surface.locator("[data-document-toolbar]").getByRole("button", {
+		name: "Expand document",
 		exact: true,
 	}).click();
 	await expect(childChat).toBeHidden();
@@ -304,8 +304,8 @@ test("a child isolates chat and decisions across every parent-owned close path",
 	await expect(parentChat).toContainText(parentRoomMessage);
 	await expect(childChat.getByText(childRoomMessage, { exact: true })).toBeVisible();
 	await expect(childChat.getByText(childPlannerTranscript, { exact: true })).toBeVisible();
-	await childChat.getByRole("button", {
-		name: "Hide chat",
+	await surface.locator("[data-document-toolbar]").getByRole("button", {
+		name: "Expand document",
 		exact: true,
 	}).click();
 	await parentHeader.getByRole("button", { name: `Return to Test ${room.slice(0, 8)}` }).click();
@@ -411,8 +411,8 @@ test("an in-app child preserves and restores its mounted parent", async ({ baseU
 	await expect(surface.locator(`[data-workspace-room="${child.id}"]`)).toBeVisible();
 	await expect(surface.locator('[data-document-view="plan"]')).toBeVisible();
 	await expect(surface.locator('[data-document-view="decisions"]')).toBeHidden();
-	await childChat.getByRole("button", {
-		name: "Hide chat",
+	await surface.locator("[data-document-toolbar]").getByRole("button", {
+		name: "Expand document",
 		exact: true,
 	}).click();
 	await expect(childChat).toBeHidden();
@@ -825,13 +825,7 @@ test("a direct compact child fills the canvas and reduces motion to a crossfade"
 	await expect(parentHeader.getByRole("button", { name: `Return to Test ${room.slice(0, 8)}` }))
 		.toBeVisible();
 	let childCrumb = parentHeader.getByText(childTitle, { exact: true });
-	let members = parentHeader.getByRole("group", { name: /People here:/ });
 	await expect(childCrumb).toHaveCSS("text-overflow", "ellipsis");
-	let crumbBox = await childCrumb.boundingBox();
-	let membersBox = await members.boundingBox();
-	expect(crumbBox).not.toBeNull();
-	expect(membersBox).not.toBeNull();
-	expect(crumbBox!.x + crumbBox!.width).toBeLessThanOrEqual(membersBox!.x);
 	let parentPaper = page.locator('[data-workspace-surface="document"] .workspace-frame');
 	await expect(parentPaper).toHaveCSS("transform", "none");
 	expect(
diff --git a/e2e/responsive-activity.e2e.ts b/e2e/responsive-activity.e2e.ts
index d68105b3a..491e8e999 100644
--- a/e2e/responsive-activity.e2e.ts
+++ b/e2e/responsive-activity.e2e.ts
@@ -179,7 +179,7 @@ test("a closed desktop Chat tab keeps unread activity visible", async ({ join, p
 	).toBe(starts);
 	await toggle.click();
 	await expect(page.getByRole("heading", { name: "Chat" })).toBeFocused();
-	await expect(page.getByRole("button", { name: "Hide chat" })).toBeVisible();
+	await expect(page.getByRole("button", { name: "Expand document" })).toBeVisible();
 });
 
 test("completed tool names wrap in compact Chat", async ({ join, seed }) => {
diff --git a/e2e/responsive-workspace.e2e.ts b/e2e/responsive-workspace.e2e.ts
index b6ab96e4a..5847d818b 100644
--- a/e2e/responsive-workspace.e2e.ts
+++ b/e2e/responsive-workspace.e2e.ts
@@ -150,7 +150,7 @@ test(
 				let views = page.getByRole("group", { name: "Document view" });
 				await expect(views).toBeVisible();
 				if (width === 724 && fromCompactChat) {
-					await page.getByRole("button", { name: "Hide chat" }).click();
+					await page.getByRole("button", { name: "Expand document" }).click();
 					await expect(chat).toBeHidden();
 					let showChat = page.getByRole("button", { name: "Show chat" });
 					await expect(showChat).toBeFocused();
@@ -431,7 +431,7 @@ test("landscape split controls respect inline safe areas", async ({ join, page,
 	await expect(page.getByRole("navigation", { name: "Workspace view" })).toHaveCount(0);
 	let header = page.getByRole("banner");
 	let headerControls = header.getByRole("button");
-	let chatToggle = page.getByRole("button", { name: "Hide chat" });
+	let chatToggle = page.getByRole("button", { name: "Expand document" });
 	let viewControls = page.getByRole("group", { name: "Document view" }).getByRole("button");
 	let [headerFirst, headerLast, chatButton, viewFirst, viewLast] = await Promise.all([
 		headerControls.first().boundingBox(),
@@ -488,7 +488,7 @@ test("the Projects drawer below 1198px keeps the split workspace", async ({ join
 	await expect(page.getByRole("dialog", { name: "Chat" })).toHaveCount(0);
 	await expect(content(page)).toBeEditable();
 	await expect(page.getByRole("separator", { name: "Resize chat" })).toBeVisible();
-	await page.getByRole("button", { name: "Hide chat" }).click();
+	await page.getByRole("button", { name: "Expand document" }).click();
 	await expect(chat).toBeHidden();
 	let opener = page.getByRole("button", { name: "Show chat" });
 	await expect(opener).toBeFocused();
@@ -547,7 +547,7 @@ test("a representative desktop retains the split Chat layout", async ({ join, se
 	await expect(chatPane(page)).toBeVisible();
 	await expect(page.getByRole("separator", { name: "Resize chat" })).toBeVisible();
 	await expect(page.getByRole("navigation", { name: "Workspace view" })).toHaveCount(0);
-	await expect(page.getByRole("button", { name: "Hide chat" })).toBeVisible();
+	await expect(page.getByRole("button", { name: "Expand document" })).toBeVisible();
 	await expect(page.getByRole("group", { name: "Document view" })).toBeVisible();
 	await expect(content(page)).toBeEditable();
 });
@@ -671,7 +671,7 @@ test("the obsolete auto-saved Chat key does not hide Chat or persist a new choic
 	await join("ana");
 	await expect(chatPane(page)).toBeVisible();
 	expect(await page.evaluate(() => localStorage.getItem("chopin:pane:chat:choice"))).toBeNull();
-	await page.getByRole("button", { name: "Hide chat" }).click();
+	await page.getByRole("button", { name: "Expand document" }).click();
 	await expect.poll(() => page.evaluate(() => localStorage.getItem("chopin:pane:chat:choice")))
 		.toBe("false");
 });
diff --git a/e2e/shell.e2e.ts b/e2e/shell.e2e.ts
index 2e7a82429..a6fe21554 100644
--- a/e2e/shell.e2e.ts
+++ b/e2e/shell.e2e.ts
@@ -175,62 +175,31 @@ test("split Chat owns its controls and keeps its draft while hidden", async ({ j
 	let paneId = await pane.getAttribute("id");
 	expect(paneId).toBeTruthy();
 	let draft = chatInput(pane);
-	let header = page.getByRole("banner");
 	let heading = page.getByRole("heading", { name: "Chat" });
-	let close = page.getByRole("button", { name: "Hide chat" });
-	let chatHeader = pane.locator("[data-chat-header]");
-	let identity = chatHeader.locator("[data-chat-identity]");
 	let originalDraft = await draft.elementHandle();
 	let editor = page.getByRole("textbox", { name: "editable markdown" });
 	let originalEditor = await editor.elementHandle();
 
 	await draft.fill("unfinished thought");
-	await expect(header.getByRole("button", { name: /chat pane/ })).toHaveCount(0);
-	await expect(heading).toBeVisible();
-	await expect(identity).toBeVisible();
-	let [iconBox, headingBox, closeBox] = await Promise.all([
-		identity.boundingBox(),
-		heading.boundingBox(),
-		close.boundingBox(),
-	]);
-	expect(iconBox!.x + iconBox!.width).toBeLessThan(headingBox!.x);
-	expect(closeBox!.x).toBeGreaterThan(headingBox!.x + headingBox!.width);
-	await page.mouse.move(0, 0);
-	await expect(close).toHaveCSS("opacity", "0");
-	await close.focus();
-	await expect(close).toHaveCSS("opacity", "1");
-	await draft.focus();
-	await expect(close).toHaveCSS("opacity", "0");
-	await heading.hover();
-	await expect(close).toHaveCSS("opacity", "1");
-	await close.hover();
-	await expect(page.locator("[data-icon-tooltip]")).toHaveText("Hide chat");
-	await expect(page.locator("[data-icon-tooltip]")).toBeVisible();
-	await expect(close).toHaveAttribute("aria-controls", paneId!);
-	await expect(close).toHaveAttribute("aria-expanded", "true");
-	await close.click();
+	await expect(pane.locator("[data-chat-header]")).toHaveCount(0);
+	let expand = page.locator("[data-document-toolbar]").getByRole("button", {
+		name: "Expand document",
+	});
+	await expand.hover();
+	await expect(page.locator("[data-icon-tooltip]")).toHaveText("Expand document");
+	await expect(expand).toHaveAttribute("aria-controls", paneId!);
+	await expand.click();
 	let opener = page.getByRole("button", { name: "Show chat" });
-	let toolbar = page.locator("[data-document-toolbar]");
-	let documentTab = toolbar.getByRole("button", { name: "Document", exact: true });
+	let documentTab = page.locator("[data-document-toolbar]").getByRole("button", {
+		name: "Document",
+		exact: true,
+	});
 	await expect(pane).toBeHidden();
 	await expect(opener).toHaveAttribute("aria-controls", paneId!);
 	await expect(opener).toHaveAttribute("aria-expanded", "false");
 	await expect(opener).toBeFocused();
 	let [openerBox, tabBox] = await Promise.all([opener.boundingBox(), documentTab.boundingBox()]);
 	expect(openerBox!.x + openerBox!.width).toBeLessThan(tabBox!.x);
-	await page.mouse.move(0, 0);
-	await opener.evaluate(button => (button as HTMLButtonElement).blur());
-	await expect(opener.getByAltText("", { exact: true }).nth(0)).toHaveCSS("opacity", "1");
-	await expect(opener.getByAltText("", { exact: true }).nth(1)).toHaveCSS("opacity", "0");
-	await opener.hover();
-	await expect(opener.getByAltText("", { exact: true }).nth(0)).toHaveCSS("opacity", "0");
-	await expect(opener.getByAltText("", { exact: true }).nth(1)).toHaveCSS("opacity", "1");
-	await page.mouse.move(0, 0);
-	await opener.press("Shift+Tab");
-	await page.keyboard.press("Tab");
-	await expect(opener).toBeFocused();
-	await expect(opener.getByAltText("", { exact: true }).nth(0)).toHaveCSS("opacity", "0");
-	await expect(opener.getByAltText("", { exact: true }).nth(1)).toHaveCSS("opacity", "1");
 	await opener.click();
 	await expect(heading).toBeFocused();
 	await expectChatValue(draft, "unfinished thought");
@@ -245,9 +214,10 @@ test("split Chat owns its controls and keeps its draft while hidden", async ({ j
 test("split Chat controls remain available to touch", async ({ join }) => {
 	let page = await join("ana", { hasTouch: true, viewport: { width: 1280, height: 800 } });
 	let pane = chatPane(page);
-	let close = pane.getByRole("button", { name: "Hide chat" });
+	let close = page.locator("[data-document-toolbar]").getByRole("button", {
+		name: "Expand document",
+	});
 	expect(await page.evaluate(() => matchMedia("(any-pointer: coarse)").matches)).toBe(true);
-	await expect(close).toHaveCSS("opacity", "1");
 	await close.tap();
 	await expect(pane).toBeHidden();
 	let opener = page.getByRole("button", { name: "Show chat" });
@@ -264,7 +234,7 @@ test("the chat rail remembers its width and visibility", async ({ join, page })
 	let paneId = await pane.getAttribute("id");
 	expect(paneId).toBeTruthy();
 	let rememberedWidth = (await box(pane)).width;
-	let toggle = page.getByRole("button", { name: "Hide chat" });
+	let toggle = page.getByRole("button", { name: "Expand document" });
 	await expect(toggle).toHaveAttribute("aria-controls", paneId!);
 	await toggle.click();
 	await expect(pane).toBeHidden();
diff --git a/e2e/sidecar-option-async.e2e.ts b/e2e/sidecar-option-async.e2e.ts
index ab64a0865..1e864a301 100644
--- a/e2e/sidecar-option-async.e2e.ts
+++ b/e2e/sidecar-option-async.e2e.ts
@@ -110,7 +110,7 @@ test("Escape during a delayed option reply restores focus and respects moving aw
 	await ana.keyboard.press("Escape");
 	await expect(field).toHaveCount(0);
 	await expect(trigger).toBeFocused();
-	await ana.getByRole("button", { name: "Hide chat" }).click();
+	await ana.getByRole("button", { name: "Expand document" }).click();
 	let chatOpener = ana.getByRole("button", { name: "Show chat" });
 	await expect(chatOpener).toHaveAttribute("aria-expanded", "false");
 	await expect(chatOpener).toBeFocused();
diff --git a/e2e/sidecar.e2e.ts b/e2e/sidecar.e2e.ts
index 2cf46f214..c1828df0c 100644
--- a/e2e/sidecar.e2e.ts
+++ b/e2e/sidecar.e2e.ts
@@ -203,7 +203,7 @@ test("a wide desktop comment sits in the gutter beside its passage", async ({ jo
 	await seed(PROSE);
 	let page = await join("ana");
 	await page.setViewportSize({ width: 1_440, height: 900 });
-	await page.getByRole("button", { name: "Hide chat" }).click();
+	await page.getByRole("button", { name: "Expand document" }).click();
 	await page.getByRole("button", { name: "Hide sidebar" }).click();
 	let card = await thread(page);
 	let paragraph = content(page).locator("p").first();
@@ -1251,7 +1251,7 @@ test("clicking a comment button pins its document card and preserves the related
 	await seed(PROSE);
 	let page = await join("ana");
 	await page.setViewportSize({ width: 1_440, height: 900 });
-	await page.getByRole("button", { name: "Hide chat" }).click();
+	await page.getByRole("button", { name: "Expand document" }).click();
 	await page.getByRole("button", { name: "Hide sidebar" }).click();
 	let card = await thread(page);
 	await expect(card).toContainText("@dev");
diff --git a/e2e/smoke.e2e.ts b/e2e/smoke.e2e.ts
index 1c2de092c..2075cc35a 100644
--- a/e2e/smoke.e2e.ts
+++ b/e2e/smoke.e2e.ts
@@ -253,7 +253,8 @@ test("a GitHub session joins its authorized channel", async ({ join, room }) =>
 
 	await expect(page).toHaveURL(roomPath(room));
 	await expect(repository).toHaveAttribute("aria-expanded", "true");
-	await expect(page.getByRole("banner").getByRole("img", { name: "ana" })).toHaveCount(1);
+	await expect(page.getByRole("group", { name: /^People here:/ }).getByRole("img", { name: "ana" }))
+		.toHaveCount(1);
 });
 
 test("an unauthenticated visitor is asked to sign in", async ({ page }) => {

From 9fde55f80343e0ff363cc4a682951c77161f5cc9 Mon Sep 17 00:00:00 2001
From: Maggie Appleton <5599295+MaggieAppleton@users.noreply.github.com>
Date: Sat, 10 Oct 2026 19:42:25 +0100
Subject: [PATCH 08/16] Make reduced motion cover the expanded top bar and
 settle the paper layout spec

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 apps/web/src/theme.css  | 3 ++-
 e2e/paper-layout.e2e.ts | 9 +++++----
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/apps/web/src/theme.css b/apps/web/src/theme.css
index 7f346fe7d..e32f7bb1b 100644
--- a/apps/web/src/theme.css
+++ b/apps/web/src/theme.css
@@ -1770,7 +1770,8 @@ button.question-add:disabled {
 		transition: none;
 	}
 
-	.workspace-root[data-workspace-mode="split"] > .workspace-header-slot {
+	.workspace-root[data-workspace-mode="split"] > .workspace-header-slot,
+	.workspace-root[data-workspace-mode="split"][data-document-expanded] > .workspace-header-slot {
 		transition: none;
 	}
 
diff --git a/e2e/paper-layout.e2e.ts b/e2e/paper-layout.e2e.ts
index 2880f10ee..9591aef5a 100644
--- a/e2e/paper-layout.e2e.ts
+++ b/e2e/paper-layout.e2e.ts
@@ -175,14 +175,15 @@ test("compact keeps its header presence and navigation, and split keeps expansio
 	await expect(header.getByRole("group", { name: /People here: ana/ })).toBeVisible();
 	expect(Math.round((await box(header)).width)).toBe(600);
 	await expectNoHorizontalOverflow(page);
+	await page.setViewportSize({ width: 1440, height: 900 });
+	await expect(toolbar(page).getByRole("button", { name: "Show chat" })).toBeVisible();
+	await expect(chatPane(page)).toBeHidden();
+
+	await page.setViewportSize({ width: 600, height: 844 });
 	await page.getByRole("navigation", { name: "Workspace view" }).getByRole("button", {
 		name: /Chat/,
 	}).first().click();
 	let compactField = chatPane(page).locator(".chat-composer .field");
 	await expect(compactField).toHaveCSS("box-shadow", "none");
 	await expect(compactField).toHaveCSS("background-color", await resolved(page, "--color-inset"));
-
-	await page.setViewportSize({ width: 1440, height: 900 });
-	await expect(toolbar(page).getByRole("button", { name: "Show chat" })).toBeVisible();
-	await expect(chatPane(page)).toBeHidden();
 });

From 856624a10b5d3ae4c197ed05dcb1a2223fce5d7a Mon Sep 17 00:00:00 2001
From: Maggie Appleton <5599295+MaggieAppleton@users.noreply.github.com>
Date: Sat, 10 Oct 2026 19:58:17 +0100
Subject: [PATCH 09/16] Keep the expanded split frame width stable and fix the
 child surface spec

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
---
 apps/web/src/navigation.css       | 3 ++-
 e2e/research-child-surface.e2e.ts | 7 +++++--
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/apps/web/src/navigation.css b/apps/web/src/navigation.css
index ad210c15d..da8615bf8 100644
--- a/apps/web/src/navigation.css
+++ b/apps/web/src/navigation.css
@@ -52,7 +52,8 @@
 .navigation-content[data-project-sidebar-trigger]
 	.workspace-root[data-document-expanded]
 	> .workspace-frame {
-	margin-left: calc(44px + env(safe-area-inset-left));
+	/* Padding, not margin: the frame's width picks split or compact and must not shrink here. */
+	padding-left: calc(44px - var(--spacing) * 3);
 }
 
 .anchored-child-host,
diff --git a/e2e/research-child-surface.e2e.ts b/e2e/research-child-surface.e2e.ts
index 0825f721e..9fefd64f4 100644
--- a/e2e/research-child-surface.e2e.ts
+++ b/e2e/research-child-surface.e2e.ts
@@ -114,8 +114,6 @@ test("a parent-owned child keeps the parent chrome and nested geometry", async (
 		childTitle,
 		CHILD_SOURCE,
 	);
-	// A child inherits the parent's Chat state; closed here so the child toolbar shows its toggle.
-	await page.addInitScript(() => localStorage.setItem("chopin:pane:chat:choice", "false"));
 	await join("ana");
 	await page.setViewportSize({ width: 1920, height: 1080 });
 	let parent = page.locator(`[data-workspace-room="${room}"]`);
@@ -162,6 +160,11 @@ test("a parent-owned child keeps the parent chrome and nested geometry", async (
 	expect(childBox!.y).toBeGreaterThanOrEqual(headerBox!.y + headerBox!.height + 12);
 	expect(await surface.evaluate(element => getComputedStyle(element).boxShadow)).not.toBe("none");
 
+	// Expanding the child hides only its Chat, so the parent top bar stays in view.
+	await surface.locator("[data-document-toolbar]").getByRole("button", {
+		name: "Expand document",
+		exact: true,
+	}).click();
 	let childClose = surface.getByRole("button", { name: `Close ${childTitle}`, exact: true });
 	let childChatToggle = surface.getByRole("button", {
 		name: "Show chat",

From 3a28275fdaf63cdba974a39868e56cd74a70161b Mon Sep 17 00:00:00 2001
From: Maggie Appleton <5599295+MaggieAppleton@users.noreply.github.com>
Date: Sat, 10 Oct 2026 20:02:35 +0100
Subject: [PATCH 10/16] Restore the compact crumb geometry check and tighten
 paper layout locators

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
---
 e2e/paper-layout.e2e.ts           |  5 +++--
 e2e/research-child-surface.e2e.ts | 13 ++++++++++++-
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/e2e/paper-layout.e2e.ts b/e2e/paper-layout.e2e.ts
index 9591aef5a..797a3e26d 100644
--- a/e2e/paper-layout.e2e.ts
+++ b/e2e/paper-layout.e2e.ts
@@ -181,8 +181,9 @@ test("compact keeps its header presence and navigation, and split keeps expansio
 
 	await page.setViewportSize({ width: 600, height: 844 });
 	await page.getByRole("navigation", { name: "Workspace view" }).getByRole("button", {
-		name: /Chat/,
-	}).first().click();
+		exact: true,
+		name: "Chat",
+	}).click();
 	let compactField = chatPane(page).locator(".chat-composer .field");
 	await expect(compactField).toHaveCSS("box-shadow", "none");
 	await expect(compactField).toHaveCSS("background-color", await resolved(page, "--color-inset"));
diff --git a/e2e/research-child-surface.e2e.ts b/e2e/research-child-surface.e2e.ts
index 9fefd64f4..b7075cde5 100644
--- a/e2e/research-child-surface.e2e.ts
+++ b/e2e/research-child-surface.e2e.ts
@@ -133,7 +133,12 @@ test("a parent-owned child keeps the parent chrome and nested geometry", async (
 	await expect(parentHeader.getByRole("button", { name: `Return to Test ${room.slice(0, 8)}` }))
 		.toBeVisible();
 	await expect(parentHeader.getByText(childTitle, { exact: true })).toBeVisible();
-	await expect(parent.locator("[data-document-toolbar] .room-members")).toBeVisible();
+	await expect(
+		parent.locator("[data-document-toolbar]").getByRole("group", {
+			includeHidden: true,
+			name: /People here:/,
+		}),
+	).toBeVisible();
 	await expect(parentPaper).toHaveAttribute("inert", "");
 	await expect(parentPaper).toHaveAttribute("aria-hidden", "true");
 	await expect(parentPaper).toHaveCSS("filter", "none");
@@ -828,7 +833,13 @@ test("a direct compact child fills the canvas and reduces motion to a crossfade"
 	await expect(parentHeader.getByRole("button", { name: `Return to Test ${room.slice(0, 8)}` }))
 		.toBeVisible();
 	let childCrumb = parentHeader.getByText(childTitle, { exact: true });
+	let members = parentHeader.getByRole("group", { name: /People here:/ });
 	await expect(childCrumb).toHaveCSS("text-overflow", "ellipsis");
+	let crumbBox = await childCrumb.boundingBox();
+	let membersBox = await members.boundingBox();
+	expect(crumbBox).not.toBeNull();
+	expect(membersBox).not.toBeNull();
+	expect(crumbBox!.x + crumbBox!.width).toBeLessThanOrEqual(membersBox!.x);
 	let parentPaper = page.locator('[data-workspace-surface="document"] .workspace-frame');
 	await expect(parentPaper).toHaveCSS("transform", "none");
 	expect(

From de59a185bd30790bb42535f73d08ad90d500f470 Mon Sep 17 00:00:00 2001
From: Maggie Appleton <5599295+MaggieAppleton@users.noreply.github.com>
Date: Sat, 10 Oct 2026 20:19:15 +0100
Subject: [PATCH 11/16] Fix browser specs for the Chat-only header and
 header-less Chat

The top bar now spans only the Chat column, so clicking 600px into the
banner landed on the document sheet; click the banner's trailing padding.
Chat no longer has a header, so Tab from the resize handle reaches the
composer (exempt from the focus ring); walk on to the next non-text control.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
---
 e2e/document-navigation.e2e.ts | 13 ++++++++++---
 e2e/focus-ring.e2e.ts          | 13 +++++++++++++
 2 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/e2e/document-navigation.e2e.ts b/e2e/document-navigation.e2e.ts
index 059d368bf..efbeb95be 100644
--- a/e2e/document-navigation.e2e.ts
+++ b/e2e/document-navigation.e2e.ts
@@ -177,6 +177,13 @@ test("header actions menu is start-aligned to its trigger", async ({ join }) =>
 	expect(layout.top).toBeGreaterThanOrEqual(triggerBox!.y + triggerBox!.height);
 });
 
+/** The header sits above Chat only, so click its trailing padding rather than a fixed offset. */
+async function clickBannerPadding(page: import("@playwright/test").Page) {
+	let banner = page.getByRole("banner");
+	let box = (await banner.boundingBox())!;
+	await banner.click({ position: { x: box.width - 4, y: 10 } });
+}
+
 test("account menu closes on Escape and outside click, and returns focus", async ({ join }) => {
 	let page = await join("ana");
 	let account = sidebar(page).locator(".project-sidebar-account");
@@ -194,7 +201,7 @@ test("account menu closes on Escape and outside click, and returns focus", async
 	await expect(account).toBeFocused();
 	await account.click();
 	await expect(menu).toBeVisible();
-	await page.getByRole("banner").click({ position: { x: 600, y: 10 } });
+	await clickBannerPadding(page);
 	await expect(menu).toHaveCount(0);
 	await expect(account).toHaveAttribute("aria-expanded", "false");
 });
@@ -315,7 +322,7 @@ test("the header title renames in place with click, F2, Escape, and blur", async
 	await button.press("F2");
 	await expect(field).toBeFocused();
 	await field.fill(title);
-	await page.getByRole("banner").click({ position: { x: 600, y: 10 } });
+	await clickBannerPadding(page);
 	await expect(field).toHaveCount(0);
 	await expect(headerDocument(page)).toHaveAccessibleName(`Document: ${title}`);
 	await expect(header.getByRole("button", { name: `Rename ${title}`, exact: true })).toBeVisible();
@@ -380,7 +387,7 @@ test("leaving a rejected title reverts it without retrying", async ({ join, room
 		"A document with this title already exists. Try a different title.",
 	);
 
-	await page.getByRole("banner").click({ position: { x: 600, y: 10 } });
+	await clickBannerPadding(page);
 	await expect(field).toHaveCount(0);
 	await expect(headerDocument(page)).toHaveAttribute("aria-label", before!);
 	expect(patches).toBe(1);
diff --git a/e2e/focus-ring.e2e.ts b/e2e/focus-ring.e2e.ts
index bf6cbad1d..8e5e18fcd 100644
--- a/e2e/focus-ring.e2e.ts
+++ b/e2e/focus-ring.e2e.ts
@@ -8,6 +8,12 @@ function outlineStyle(target: Locator) {
 	return target.evaluate(element => getComputedStyle(element).outlineStyle);
 }
 
+function isTextField(target: Locator) {
+	return target.evaluate(element =>
+		element.matches('input, textarea, [contenteditable="true"], [role="combobox"]')
+	);
+}
+
 function modality(page: Page) {
 	return page.evaluate(() => document.documentElement.dataset.focusInput);
 }
@@ -31,6 +37,13 @@ test("Tab shows the focus ring on the next control", async ({ join }) => {
 	expect(await modality(page)).toBe("keyboard");
 	let next = page.locator(":focus");
 	await expect(next).not.toHaveAttribute("aria-label", "Resize chat");
+	// Chat has no header now, so the first stop is the composer, a text field that
+	// is exempt from the ring; walk on to the next non-text control.
+	for (let step = 0; step < 4 && (await isTextField(next)); step += 1) {
+		await page.keyboard.press("Tab");
+		next = page.locator(":focus");
+	}
+	expect(await isTextField(next)).toBe(false);
 	expect(await outlineStyle(next)).toBe("solid");
 });
 

From faba34e7ed1640505a2556e7dc8aa97861072616 Mon Sep 17 00:00:00 2001
From: Maggie Appleton <5599295+MaggieAppleton@users.noreply.github.com>
Date: Sat, 10 Oct 2026 20:27:14 +0100
Subject: [PATCH 12/16] Keep the parent header while a child is open, fix
 shortcut focus, and harden child CSS

The top bar now hides with Chat only when no child covers the document, so a
child keeps its breadcrumb and Return control. The Chat shortcut moves focus to
the toggle when pressed from the top bar. The expanded-frame sidebar gutter
skips the child surface, and child overrides no longer depend on stylesheet order.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
---
 apps/web/src/navigation.css       | 10 ++++++----
 apps/web/src/theme.css            |  4 ++--
 apps/web/src/workspace.tsx        | 13 ++++++++++---
 e2e/paper-layout.e2e.ts           | 10 ++++++++++
 e2e/research-child-surface.e2e.ts |  8 +++-----
 5 files changed, 31 insertions(+), 14 deletions(-)

diff --git a/apps/web/src/navigation.css b/apps/web/src/navigation.css
index da8615bf8..14af83a5b 100644
--- a/apps/web/src/navigation.css
+++ b/apps/web/src/navigation.css
@@ -50,7 +50,7 @@
 
 /* With the top bar hidden, the sheet clears the floating Show sidebar trigger itself. */
 .navigation-content[data-project-sidebar-trigger]
-	.workspace-root[data-document-expanded]
+	.workspace-root[data-document-expanded]:not(.anchored-child-surface .workspace-root)
 	> .workspace-frame {
 	/* Padding, not margin: the frame's width picks split or compact and must not shrink here. */
 	padding-left: calc(44px - var(--spacing) * 3);
@@ -121,21 +121,23 @@
 }
 
 .anchored-child-surface .workspace-root .workspace-frame,
-.anchored-child-surface .workspace-root[data-workspace-mode="split"] .workspace-frame {
+.anchored-child-surface
+	.workspace-root[data-workspace-mode="split"][data-workspace-mode="split"]
+	.workspace-frame {
 	margin: 0;
 	border-radius: 0;
 	box-shadow: none;
 }
 
 /* The child sheet is already paper; its workspace keeps no second sheet or header gap. */
-.anchored-child-surface .workspace-root .workspace-document-panel {
+.anchored-child-surface .workspace-root.workspace-root .workspace-document-panel {
 	margin-top: 0;
 	border-radius: 0;
 	box-shadow: none;
 	outline: none;
 }
 
-.anchored-child-surface .workspace-root .workspace-chat-panel {
+.anchored-child-surface .workspace-root.workspace-root .workspace-chat-panel {
 	padding-top: 0;
 }
 
diff --git a/apps/web/src/theme.css b/apps/web/src/theme.css
index e32f7bb1b..00cc819c0 100644
--- a/apps/web/src/theme.css
+++ b/apps/web/src/theme.css
@@ -636,7 +636,7 @@ body {
 	transition: opacity var(--panel-open-dur) var(--motion-smooth-out);
 }
 
-.workspace-root[data-workspace-mode="split"][data-document-expanded] > .workspace-header-slot {
+.workspace-root[data-workspace-mode="split"][data-header-hidden] > .workspace-header-slot {
 	opacity: 0;
 	visibility: hidden;
 	transition:
@@ -1771,7 +1771,7 @@ button.question-add:disabled {
 	}
 
 	.workspace-root[data-workspace-mode="split"] > .workspace-header-slot,
-	.workspace-root[data-workspace-mode="split"][data-document-expanded] > .workspace-header-slot {
+	.workspace-root[data-workspace-mode="split"][data-header-hidden] > .workspace-header-slot {
 		transition: none;
 	}
 
diff --git a/apps/web/src/workspace.tsx b/apps/web/src/workspace.tsx
index 62516fb38..04997ca68 100644
--- a/apps/web/src/workspace.tsx
+++ b/apps/web/src/workspace.tsx
@@ -262,6 +262,8 @@ export function Workspace(
 		? workspacePresentation
 		: undefined;
 	let paperObscured = workspacePresentation.type === "parent-with-child";
+	// A child's own header is hidden, so the parent's carries its breadcrumb and Return control.
+	let headerHidden = presentation.documentExpanded && !paperObscured;
 	let immediately = motionImmediately();
 	let contentSwapMotion = motionContract("content-swap");
 	let chatPresence = useTransitionPresence(
@@ -355,7 +357,11 @@ export function Workspace(
 		}
 		let pane = root.current?.querySelector(`#${CSS.escape(ids.pane.chat)}`);
 		// Keep focus where it was unless closing the pane would strand it.
-		if (mode !== "split" || pane?.contains(document.activeElement)) dismissChat();
+		let active = document.activeElement;
+		// Hiding Chat also hides the top bar while expanded, so focus there would be stranded too.
+		let stranded = pane?.contains(active)
+			|| root.current?.querySelector(".workspace-header-slot")?.contains(active);
+		if (mode !== "split" || stranded) dismissChat();
 		else onDesktopChatOpen(false);
 	};
 	let chatShortcutEnabled = !!chat && !paperObscured;
@@ -368,6 +374,7 @@ export function Workspace(
 		<div
 			className="workspace-root flex h-full flex-col overflow-hidden bg-ground"
 			data-document-expanded={presentation.documentExpanded || undefined}
+			data-header-hidden={headerHidden || undefined}
 			data-workspace-mode={mode}
 			data-workspace-room={identity}
 			data-workspace-surface={profile.surface}
@@ -376,9 +383,9 @@ export function Workspace(
 			style={mode === "split" ? { "--chat-width": `${chatWidth}px` } as CSSProperties : undefined}
 		>
 			<div
-				aria-hidden={presentation.documentExpanded || undefined}
+				aria-hidden={headerHidden || undefined}
 				className="workspace-header-slot shrink-0"
-				inert={presentation.documentExpanded}
+				inert={headerHidden}
 			>
 				{header}
 			</div>
diff --git a/e2e/paper-layout.e2e.ts b/e2e/paper-layout.e2e.ts
index 797a3e26d..c61c04352 100644
--- a/e2e/paper-layout.e2e.ts
+++ b/e2e/paper-layout.e2e.ts
@@ -125,6 +125,16 @@ test("the document expands and restores Chat from the keyboard and remembers it"
 	await expect(toolbar(page).getByRole("button", { name: "Show chat" })).toBeVisible();
 });
 
+test("the Chat shortcut from the top bar moves focus to the Show chat button", async ({ join, page }) => {
+	await page.setViewportSize({ width: 1440, height: 900 });
+	await join("ana");
+	await page.locator(".room-header").getByRole("button").first().focus();
+	await expect(page.locator(".room-header :focus")).toHaveCount(1);
+	await page.keyboard.press("Meta+.");
+	await expect(chatPane(page)).toBeHidden();
+	await expect(toolbar(page).getByRole("button", { name: "Show chat" })).toBeFocused();
+});
+
 test("reduced motion swaps Chat and the top bar without transitions", async ({ join, page }) => {
 	await page.emulateMedia({ reducedMotion: "reduce" });
 	await page.setViewportSize({ width: 1440, height: 900 });
diff --git a/e2e/research-child-surface.e2e.ts b/e2e/research-child-surface.e2e.ts
index b7075cde5..1d39c7822 100644
--- a/e2e/research-child-surface.e2e.ts
+++ b/e2e/research-child-surface.e2e.ts
@@ -114,6 +114,8 @@ test("a parent-owned child keeps the parent chrome and nested geometry", async (
 		childTitle,
 		CHILD_SOURCE,
 	);
+	// A child inherits the parent's Chat state; closed here so the parent is expanded.
+	await page.addInitScript(() => localStorage.setItem("chopin:pane:chat:choice", "false"));
 	await join("ana");
 	await page.setViewportSize({ width: 1920, height: 1080 });
 	let parent = page.locator(`[data-workspace-room="${room}"]`);
@@ -133,6 +135,7 @@ test("a parent-owned child keeps the parent chrome and nested geometry", async (
 	await expect(parentHeader.getByRole("button", { name: `Return to Test ${room.slice(0, 8)}` }))
 		.toBeVisible();
 	await expect(parentHeader.getByText(childTitle, { exact: true })).toBeVisible();
+	await expect(parentHeader).toBeVisible();
 	await expect(
 		parent.locator("[data-document-toolbar]").getByRole("group", {
 			includeHidden: true,
@@ -165,11 +168,6 @@ test("a parent-owned child keeps the parent chrome and nested geometry", async (
 	expect(childBox!.y).toBeGreaterThanOrEqual(headerBox!.y + headerBox!.height + 12);
 	expect(await surface.evaluate(element => getComputedStyle(element).boxShadow)).not.toBe("none");
 
-	// Expanding the child hides only its Chat, so the parent top bar stays in view.
-	await surface.locator("[data-document-toolbar]").getByRole("button", {
-		name: "Expand document",
-		exact: true,
-	}).click();
 	let childClose = surface.getByRole("button", { name: `Close ${childTitle}`, exact: true });
 	let childChatToggle = surface.getByRole("button", {
 		name: "Show chat",

From 7085a58a4fc26a4a25d84a8dd03a78c4415033e6 Mon Sep 17 00:00:00 2001
From: Maggie Appleton <5599295+MaggieAppleton@users.noreply.github.com>
Date: Sat, 10 Oct 2026 20:27:58 +0100
Subject: [PATCH 13/16] Use ControlOrMeta for the Chat shortcut e2e so it runs
 on Linux CI

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
---
 e2e/paper-layout.e2e.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/e2e/paper-layout.e2e.ts b/e2e/paper-layout.e2e.ts
index c61c04352..7f50af6a0 100644
--- a/e2e/paper-layout.e2e.ts
+++ b/e2e/paper-layout.e2e.ts
@@ -130,7 +130,7 @@ test("the Chat shortcut from the top bar moves focus to the Show chat button", a
 	await join("ana");
 	await page.locator(".room-header").getByRole("button").first().focus();
 	await expect(page.locator(".room-header :focus")).toHaveCount(1);
-	await page.keyboard.press("Meta+.");
+	await page.keyboard.press("ControlOrMeta+.");
 	await expect(chatPane(page)).toBeHidden();
 	await expect(toolbar(page).getByRole("button", { name: "Show chat" })).toBeFocused();
 });

From a276c6a22dd3b96f5abcad33831eea553f82521f Mon Sep 17 00:00:00 2001
From: Maggie Appleton <5599295+MaggieAppleton@users.noreply.github.com>
Date: Sat, 10 Oct 2026 21:27:10 +0100
Subject: [PATCH 14/16] Keep the expanded sheet below the header while a child
 is open

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 apps/web/src/theme.css            | 6 ++++++
 e2e/research-child-surface.e2e.ts | 8 ++++++++
 2 files changed, 14 insertions(+)

diff --git a/apps/web/src/theme.css b/apps/web/src/theme.css
index 00cc819c0..2984a987b 100644
--- a/apps/web/src/theme.css
+++ b/apps/web/src/theme.css
@@ -648,6 +648,12 @@ body {
 	grid-area: 1 / 1 / 3 / 2;
 }
 
+/* A visible header while expanded (a child is open) keeps the sheet below its row. */
+.workspace-root[data-workspace-mode="split"][data-document-expanded]:not([data-header-hidden])
+	> .workspace-frame {
+	grid-area: 2 / 1;
+}
+
 .workspace-root[data-workspace-mode="split"] .workspace-chat-panel {
 	padding-top: var(--document-shell-header-height);
 }
diff --git a/e2e/research-child-surface.e2e.ts b/e2e/research-child-surface.e2e.ts
index 1d39c7822..5e3776e58 100644
--- a/e2e/research-child-surface.e2e.ts
+++ b/e2e/research-child-surface.e2e.ts
@@ -161,6 +161,14 @@ test("a parent-owned child keeps the parent chrome and nested geometry", async (
 	expect(parentBox).not.toBeNull();
 	expect(childBox).not.toBeNull();
 	expect(headerBox).not.toBeNull();
+	// The visible header row sits above the expanded parent sheet's tab row.
+	let parentTab = await parentPaper.getByRole("button", {
+		exact: true,
+		includeHidden: true,
+		name: "Decisions",
+	}).first().boundingBox();
+	expect(parentTab).not.toBeNull();
+	expect(headerBox!.y + headerBox!.height).toBeLessThanOrEqual(parentTab!.y);
 	expect(childBox!.x).toBeGreaterThan(parentBox!.x);
 	expect(childBox!.y).toBeGreaterThan(parentBox!.y);
 	expect(childBox!.x + childBox!.width).toBeLessThan(parentBox!.x + parentBox!.width);

From 89a9dc122e541daaddf49b7ed26673d63d74bae7 Mon Sep 17 00:00:00 2001
From: Maggie Appleton <5599295+MaggieAppleton@users.noreply.github.com>
Date: Sun, 11 Oct 2026 08:48:25 +0100
Subject: [PATCH 15/16] Renew design-contract review for the paper layout

Reviewed data flow:
- workspace.tsx: SurfaceToggle replaces ChatToggle. Its feedback class is the
  same motionContract("feedback").className the reviewed ChatToggle used, now on
  two spans (icon wrapper and unread dot) instead of a span plus img. The
  forwarded className prop was removed, so its exception is dropped.
  chatPresence.className on the Chat aside is unchanged; the --chat-width style
  moved to the root with the same measured pane width.
- line.tsx: ExpandIcon and CollapseIcon forward props to LineIcon like their
  siblings; exact cases added.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../exceptions/dynamic-packages.json          | 16 +++++++++++-
 .../exceptions/dynamic-web.json               | 25 ++-----------------
 2 files changed, 17 insertions(+), 24 deletions(-)

diff --git a/scripts/design-contract/exceptions/dynamic-packages.json b/scripts/design-contract/exceptions/dynamic-packages.json
index e00c1a1d1..2a80d350f 100644
--- a/scripts/design-contract/exceptions/dynamic-packages.json
+++ b/scripts/design-contract/exceptions/dynamic-packages.json
@@ -380,9 +380,23 @@
 				"props",
 				"unresolved JSX props > PauseIcon > <LineIcon>",
 				1
+			],
+			[
+				"dynamic",
+				"*",
+				"props",
+				"unresolved JSX props > ExpandIcon > <LineIcon>",
+				1
+			],
+			[
+				"dynamic",
+				"*",
+				"props",
+				"unresolved JSX props > CollapseIcon > <LineIcon>",
+				1
 			]
 		],
-		"sourceHash": "c269a30d83f2c87b5d42b7284f1c6e7e5cd0b80fbd2c40a11b95c13c3b8e44e0"
+		"sourceHash": "7f9aee6935f77a6940153f60fb9aaa7850a3e33f4dc1864614091c028a850618"
 	},
 	{
 		"file": "packages/icons/src/warning.tsx",
diff --git a/scripts/design-contract/exceptions/dynamic-web.json b/scripts/design-contract/exceptions/dynamic-web.json
index 88ac8dc8e..5c9a32af3 100644
--- a/scripts/design-contract/exceptions/dynamic-web.json
+++ b/scripts/design-contract/exceptions/dynamic-web.json
@@ -257,20 +257,6 @@
 		],
 		"sourceHash": "7a500f7e32a5c4f8db23dfd0a11f66cb164a0ce0676f5ce1b0ff4df2607a410d"
 	},
-	{
-		"file": "apps/web/src/workspace.tsx",
-		"reason": "Component forwards or combines caller class names; static call-site classes are scanned. Runtime/cross-module values require review at this exact component boundary.",
-		"cases": [
-			[
-				"dynamic",
-				"class",
-				"className",
-				"class > ChatToggle > <button>",
-				1
-			]
-		],
-		"sourceHash": "427d8b2f58632c71c1d404580dd3b23589a9dd2cc9793c28c5ecfb764d0521fe"
-	},
 	{
 		"file": "apps/web/src/workspace.tsx",
 		"reason": "Motion/presence contract returns finite semantic state classes; imported function evaluation is outside this static scanner. Review the producer when changing this boundary.",
@@ -279,16 +265,9 @@
 				"dynamic",
 				"class",
 				"feedback",
-				"class > ChatToggle > <span>",
+				"class > SurfaceToggle > <span>",
 				2
 			],
-			[
-				"dynamic",
-				"class",
-				"feedback",
-				"class > ChatToggle > <img>",
-				1
-			],
 			[
 				"dynamic",
 				"class",
@@ -297,7 +276,7 @@
 				1
 			]
 		],
-		"sourceHash": "427d8b2f58632c71c1d404580dd3b23589a9dd2cc9793c28c5ecfb764d0521fe"
+		"sourceHash": "d3cbe78671d49dcc93ea6503f08492036ce88472fc45fd9528e268569e36e37a"
 	},
 	{
 		"file": "apps/web/src/navigation-dialog.tsx",

From 1dba784a3b0ad11cab64f15af54585f534c0b4f5 Mon Sep 17 00:00:00 2001
From: Maggie Appleton <5599295+MaggieAppleton@users.noreply.github.com>
Date: Sun, 11 Oct 2026 09:16:32 +0100
Subject: [PATCH 16/16] Keep the sheet hairline off the child panel without
 suppressing outlines

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 apps/web/src/navigation.css | 1 -
 apps/web/src/theme.css      | 5 +++++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/apps/web/src/navigation.css b/apps/web/src/navigation.css
index 14af83a5b..bceb79cb4 100644
--- a/apps/web/src/navigation.css
+++ b/apps/web/src/navigation.css
@@ -134,7 +134,6 @@
 	margin-top: 0;
 	border-radius: 0;
 	box-shadow: none;
-	outline: none;
 }
 
 .anchored-child-surface .workspace-root.workspace-root .workspace-chat-panel {
diff --git a/apps/web/src/theme.css b/apps/web/src/theme.css
index 2984a987b..9235d71ea 100644
--- a/apps/web/src/theme.css
+++ b/apps/web/src/theme.css
@@ -668,6 +668,11 @@ body {
 	border-radius: var(--radius-panel);
 	background: var(--color-page);
 	box-shadow: var(--shadow-raised);
+}
+
+/* A child surface is already paper, so its panel never takes the sheet hairline. */
+.workspace-root[data-workspace-mode="split"]
+	.workspace-document-panel:not(.anchored-child-surface *) {
 	outline: var(--edge-width) solid var(--color-edge);
 	outline-offset: calc(-1 * var(--edge-width));
 }