From 67c2b15aa2d47f91621b37491594b377f4328a9b Mon Sep 17 00:00:00 2001
From: Maggie Appleton <5599295+MaggieAppleton@users.noreply.github.com>
Date: Mon, 12 Oct 2026 13:49:10 +0100
Subject: [PATCH 1/3] Badge Chat and Document activity with one still petrol
 dot, and even out the title bar

With the document expanded, the title bar's toggle shows the Chat glyph
instead of inward arrows, and unread activity is a badge on that glyph's
corner, knocked out of the bar with a ring that follows the ghost fill.
The Document view's new-changes mark is the same solid dot, inline after
the label and no longer pulsing. The phone's tab marks share the
treatment.

The title bar's project, title and Zoom crumb now read at the views' text
size, the repository icon returns before the project, and the project
sits as far from the toggle's rule as the toggle's glyph sits from the
edge.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 apps/web/src/decision-view-control.tsx |  4 +-
 apps/web/src/document-activity.test.ts |  9 +----
 apps/web/src/document-activity.tsx     | 10 ++---
 apps/web/src/icon-assets.test.ts       |  2 +-
 apps/web/src/phone-workspace.css       |  8 +++-
 apps/web/src/room-workspace.tsx        |  1 +
 apps/web/src/theme.css                 | 54 +++++++++++++++++++++++---
 apps/web/src/workspace.tsx             | 22 +++++------
 e2e/document-activity.e2e.ts           |  9 +++++
 e2e/responsive-activity.e2e.ts         |  4 ++
 10 files changed, 89 insertions(+), 34 deletions(-)

diff --git a/apps/web/src/decision-view-control.tsx b/apps/web/src/decision-view-control.tsx
index ae1260a50..2ddad7c7c 100644
--- a/apps/web/src/decision-view-control.tsx
+++ b/apps/web/src/decision-view-control.tsx
@@ -70,7 +70,7 @@ export function DecisionViewControl(
 				aria-current={view === "plan" ? "page" : undefined}
 				aria-label={view === "plan" ? undefined : documentActivityLabel(documentActivity)}
 				aria-pressed={view === "plan"}
-				className={`btn btn-sm relative transition-[background-color,box-shadow,color] ${
+				className={`btn btn-sm gap-1.5 transition-[background-color,box-shadow,color] ${
 					view === "plan"
 						? "bg-ground font-medium text-gray-800"
 						: "text-text-tertiary hover:bg-hover"
@@ -79,7 +79,7 @@ export function DecisionViewControl(
 				type="button"
 			>
 				Document
-				{view !== "plan" && <DocumentActivityDot activity={documentActivity} placement="corner" />}
+				{view !== "plan" && <DocumentActivityDot activity={documentActivity} />}
 			</button>
 			<button
 				aria-current={view === "decisions" ? "page" : undefined}
diff --git a/apps/web/src/document-activity.test.ts b/apps/web/src/document-activity.test.ts
index 037040fa7..63ade6e98 100644
--- a/apps/web/src/document-activity.test.ts
+++ b/apps/web/src/document-activity.test.ts
@@ -64,12 +64,7 @@ test("labels name the activity for assistive technology", () => {
 	expect(documentActivityLabel(undefined)).toBe("Document");
 });
 
-test("the writing pulse only runs when motion is allowed", () => {
+test("the document mark stays still while the Planner writes", () => {
 	let css = readFileSync(join(import.meta.dir, "theme.css"), "utf8");
-	let rule = /\.document-activity-dot\[data-document-activity="writing"\]\s*\{[^}]*animation:/;
-	let allowed = css.match(
-		/@media \(prefers-reduced-motion: no-preference\) \{\s*\.document-activity-dot[^]*?\n\}/,
-	);
-	expect(allowed?.[0]).toMatch(rule);
-	expect(css.replace(allowed![0], "")).not.toMatch(rule);
+	expect(css).not.toMatch(/\.document-activity-dot[^{]*\{[^}]*animation:/);
 });
diff --git a/apps/web/src/document-activity.tsx b/apps/web/src/document-activity.tsx
index bc3979596..b71cc95bc 100644
--- a/apps/web/src/document-activity.tsx
+++ b/apps/web/src/document-activity.tsx
@@ -71,8 +71,8 @@ export function documentActivityLabel(activity: DocumentActivity): string {
 }
 
 /**
- * A quiet petrol mark: a breathing ring while the Planner writes, a filled dot
- * once changes wait. `corner` sits in the button's padding so nothing shifts.
+ * A solid petrol dot, the same mark as Chat's unread badge, while the Planner writes or once
+ * changes wait. `inline` follows a label; `corner` sits on an icon, knocked out of its surface.
  */
 export function DocumentActivityDot(
 	{ activity, placement = "inline" }: {
@@ -84,9 +84,9 @@ export function DocumentActivityDot(
 	return (
 		<span
 			aria-hidden="true"
-			className={`document-activity-dot shrink-0 rounded-full ${
-				activity === "writing" ? "size-2 border-2 border-brand" : "size-1.5 bg-brand"
-			} ${placement === "corner" ? "absolute right-0 top-1" : "ml-1"}`}
+			className={`document-activity-dot activity-dot ${
+				placement === "corner" ? "activity-badge" : ""
+			}`}
 			data-document-activity={activity}
 		/>
 	);
diff --git a/apps/web/src/icon-assets.test.ts b/apps/web/src/icon-assets.test.ts
index 050c5125f..1afc56a64 100644
--- a/apps/web/src/icon-assets.test.ts
+++ b/apps/web/src/icon-assets.test.ts
@@ -25,7 +25,7 @@ test("the sidebar owns the panel-close asset and the workspace uses line icons",
 	expect(sidebar).toContain("assets/icons/panel-close.svg");
 	expect(workspace).not.toContain("assets/icons/panel-close.svg");
 	expect(workspace).toContain("ExpandIcon");
-	expect(workspace).toContain("CollapseIcon");
+	expect(workspace).toContain("MessageIcon");
 	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/phone-workspace.css b/apps/web/src/phone-workspace.css
index 6c3586d83..eb015504b 100644
--- a/apps/web/src/phone-workspace.css
+++ b/apps/web/src/phone-workspace.css
@@ -504,15 +504,19 @@
 	left: calc(100% - var(--spacing) * 2);
 }
 
-.phone-tab-dot {
+/* The phone's Chat and Document marks: the shared activity badge, placed for a 24px glyph. */
+.phone-tab-dot,
+.phone-tab-icon > .activity-badge {
 	position: absolute;
 	top: 0;
 	right: calc(var(--spacing) * -0.5);
 	width: calc(var(--spacing) * 2);
 	height: calc(var(--spacing) * 2);
-	border: 2px solid var(--color-page);
 	border-radius: var(--radius-full);
 	background: var(--color-brand);
+	outline-style: solid;
+	outline-width: calc(var(--edge-width) * 2);
+	outline-color: var(--color-page);
 }
 
 /* A single circular control at the end of the bar (`phoneAction`); slices add its contents. */
diff --git a/apps/web/src/room-workspace.tsx b/apps/web/src/room-workspace.tsx
index 8f2a71ab9..796d62b9a 100644
--- a/apps/web/src/room-workspace.tsx
+++ b/apps/web/src/room-workspace.tsx
@@ -1613,6 +1613,7 @@ export function RoomWorkspace(
 					title={
 						<DocumentTitle
 							{...titleProps}
+							icon
 							path={zoomChild}
 						/>
 					}
diff --git a/apps/web/src/theme.css b/apps/web/src/theme.css
index cb6835bf9..cc88ad1b0 100644
--- a/apps/web/src/theme.css
+++ b/apps/web/src/theme.css
@@ -763,6 +763,24 @@ body {
 	align-items: center;
 }
 
+/* After the Chat toggle's rule, the project sits as far in as the toggle's glyph sits from the edge. */
+.workspace-surface-toggle-slot + .document-title-slot {
+	padding-inline-start: var(--control-padding-inline);
+}
+
+/* Both bars read at one size: the views' control text. */
+.document-title-bar
+	:is(.document-project-prefix, .document-project-separator, .document-title-crumb, .title-control) {
+	font-size: var(--text-sm);
+	line-height: var(--text-sm--line-height);
+}
+
+/* The repository glyph sits as far from the project as the Chat toggle's glyph from its label. */
+.document-title-bar .document-title > [data-nucleo-icon] {
+	margin-inline-end: calc(var(--spacing) / 2);
+	color: var(--color-text-tertiary);
+}
+
 .document-title-trailing {
 	display: flex;
 	align-self: stretch;
@@ -996,6 +1014,37 @@ body {
 	}
 }
 
+/* Unread and new-change marks: one solid petrol dot, still so it never competes with reading. */
+.activity-dot {
+	display: block;
+	flex: none;
+	width: calc(var(--spacing) * 2);
+	height: calc(var(--spacing) * 2);
+	border-radius: var(--radius-full);
+	background: var(--color-brand);
+}
+
+/* On an icon's corner, a ring in the surface colour cuts the dot out of the glyph beneath. */
+.activity-badge {
+	position: absolute;
+	top: calc(var(--spacing) * -0.75);
+	right: calc(var(--spacing) * -0.75);
+	outline-style: solid;
+	outline-width: calc(var(--edge-width) * 2);
+	outline-color: var(--activity-badge-ring, var(--color-page));
+}
+
+/* The ring follows the ghost button's own fill so the knockout never shows as a halo. */
+@media (hover: hover) {
+	.btn-ghost:hover:not(:disabled) {
+		--activity-badge-ring: var(--color-gray-200);
+	}
+}
+
+.btn-ghost:active:not(:disabled) {
+	--activity-badge-ring: var(--color-gray-300);
+}
+
 /* On the ground a white composer is the brightest thing in the column. */
 .workspace-root .chat-composer .field {
 	background: var(--color-inset);
@@ -2057,11 +2106,6 @@ button.question-add:disabled {
 	border-radius: var(--radius-full);
 }
 
-@media (prefers-reduced-motion: no-preference) {
-	.document-activity-dot[data-document-activity="writing"] {
-		animation: chat-work-dot calc(var(--duration-base) * 8) var(--motion-move) infinite;
-	}
-}
 @media (prefers-reduced-motion: reduce) {
 	.chat-work-lattice > span,
 	.chat-work-headline-motion,
diff --git a/apps/web/src/workspace.tsx b/apps/web/src/workspace.tsx
index 8c8db5b9e..716ded4c1 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 { ArrowLeftIcon, ChevronIcon, CollapseIcon, ExpandIcon } from "@chopin/icons";
+import { ArrowLeftIcon, ChevronIcon, ExpandIcon, MessageIcon } from "@chopin/icons";
 import { usePhone } from "@chopin/editor/pointer";
 
 import {
@@ -204,22 +204,20 @@ export function SurfaceToggle(
 			type="button"
 		>
 			<span
-				className={`${feedback} grid size-(--icon-size-default)`}
+				className={`${feedback} relative grid size-(--icon-size-default)`}
 				data-motion-feedback="icon"
 				key={expanded ? "restore" : "expand"}
 			>
-				{expanded ? <CollapseIcon size={14} /> : <ExpandIcon size={14} />}
+				{expanded ? <MessageIcon size={14} /> : <ExpandIcon size={14} />}
+				{expanded && status && (
+					<span
+						aria-hidden="true"
+						className={`activity-dot activity-badge ${unread ? feedback : ""}`}
+						data-motion-feedback={unread ? "count" : undefined}
+					/>
+				)}
 			</span>
 			{expanded && <span>Chat</span>}
-			{expanded && status && (
-				<span
-					aria-hidden="true"
-					className={`absolute right-1 top-1 size-1.5 rounded-full bg-brand ${
-						unread ? feedback : ""
-					}`}
-					data-motion-feedback={unread ? "count" : undefined}
-				/>
-			)}
 		</button>
 	);
 }
diff --git a/e2e/document-activity.e2e.ts b/e2e/document-activity.e2e.ts
index c5ed8ed4b..a5c736c5f 100644
--- a/e2e/document-activity.e2e.ts
+++ b/e2e/document-activity.e2e.ts
@@ -54,6 +54,15 @@ for (
 
 		await expect(documentTab).toHaveAccessibleName("Document, new changes");
 		await expect(documentTab.locator("[data-document-activity='unseen']")).toBeVisible();
+		if (name === "desktop") {
+			// A still dot after the label, inside the tab and centred on its text.
+			let dot = documentTab.locator("[data-document-activity='unseen']");
+			await expect(dot).toHaveCSS("animation-name", "none");
+			let mark = (await dot.boundingBox())!;
+			let tab = (await documentTab.boundingBox())!;
+			expect(mark.x + mark.width).toBeLessThanOrEqual(tab.x + tab.width);
+			expect(Math.abs(mark.y + mark.height / 2 - (tab.y + tab.height / 2))).toBeLessThanOrEqual(1);
+		}
 
 		await documentTab.click();
 		await expect(content(page)).toContainText("Revised paragraph.");
diff --git a/e2e/responsive-activity.e2e.ts b/e2e/responsive-activity.e2e.ts
index 406d04851..90aad2973 100644
--- a/e2e/responsive-activity.e2e.ts
+++ b/e2e/responsive-activity.e2e.ts
@@ -133,6 +133,10 @@ test("a closed desktop Chat tab keeps unread activity visible", async ({ join, p
 	let toggle = page.getByRole("button", { name: "Show chat, 1 unread" });
 	await expect(toggle).toBeVisible();
 	await expect(toggle.locator('span[aria-hidden="true"]')).toHaveCount(1);
+	// The badge sits on the Chat glyph's corner, clear of the label.
+	let badge = (await toggle.locator('span[aria-hidden="true"]').boundingBox())!;
+	let label = (await toggle.getByText("Chat", { exact: true }).boundingBox())!;
+	expect(badge.x + badge.width).toBeLessThanOrEqual(label.x);
 	let count = toggle.locator('[data-motion-feedback="count"]');
 	expect(
 		await count.evaluate(element =>

From 61f27408c75260f77efc1ec55c5121f11065bb46 Mon Sep 17 00:00:00 2001
From: Maggie Appleton <5599295+MaggieAppleton@users.noreply.github.com>
Date: Mon, 12 Oct 2026 13:49:10 +0100
Subject: [PATCH 2/3] Renew design-contract review for the Chat toggle badge

The reviewed dynamic owners in workspace.tsx keep the same data flow:
SurfaceToggle still composes motionContract("feedback") into its icon
span and, while unread, into the badge span (now nested in the icon);
the Chat pane presence class is unchanged.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 scripts/design-contract/exceptions/dynamic-web.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/scripts/design-contract/exceptions/dynamic-web.json b/scripts/design-contract/exceptions/dynamic-web.json
index f8c552d4a..1c07e47ba 100644
--- a/scripts/design-contract/exceptions/dynamic-web.json
+++ b/scripts/design-contract/exceptions/dynamic-web.json
@@ -276,7 +276,7 @@
 				1
 			]
 		],
-		"sourceHash": "f6dc937a28e2d6641497848821c5fae44a597375191207598dfba0fa58fea5ee"
+		"sourceHash": "6dcdd2c5d6243bdc297c311742fc47e8e5da433d201b6e1b728c42c714d9a9c4"
 	},
 	{
 		"file": "apps/web/src/navigation-dialog.tsx",

From f24e23322d7be8d046ae8d5adab78f34ef3bf9e1 Mon Sep 17 00:00:00 2001
From: Maggie Appleton <5599295+MaggieAppleton@users.noreply.github.com>
Date: Mon, 12 Oct 2026 14:09:11 +0100
Subject: [PATCH 3/3] Hold the activity ring at 2px on every display and drop
 the unstyled dot class

The knockout ring used the edge width, which is a hairline on Retina, so
it now uses half a spacing step. The document mark's test checks for
animation on its data attribute and the shared dot class instead of a
class nothing styled.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 apps/web/src/document-activity.test.ts | 3 ++-
 apps/web/src/document-activity.tsx     | 4 +---
 apps/web/src/phone-workspace.css       | 2 +-
 apps/web/src/theme.css                 | 2 +-
 4 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/apps/web/src/document-activity.test.ts b/apps/web/src/document-activity.test.ts
index 63ade6e98..032171163 100644
--- a/apps/web/src/document-activity.test.ts
+++ b/apps/web/src/document-activity.test.ts
@@ -66,5 +66,6 @@ test("labels name the activity for assistive technology", () => {
 
 test("the document mark stays still while the Planner writes", () => {
 	let css = readFileSync(join(import.meta.dir, "theme.css"), "utf8");
-	expect(css).not.toMatch(/\.document-activity-dot[^{]*\{[^}]*animation:/);
+	expect(css).not.toMatch(/\[data-document-activity[^{]*\{[^}]*animation:/);
+	expect(css).not.toMatch(/\.activity-dot[^{]*\{[^}]*animation:/);
 });
diff --git a/apps/web/src/document-activity.tsx b/apps/web/src/document-activity.tsx
index b71cc95bc..d9798133a 100644
--- a/apps/web/src/document-activity.tsx
+++ b/apps/web/src/document-activity.tsx
@@ -84,9 +84,7 @@ export function DocumentActivityDot(
 	return (
 		<span
 			aria-hidden="true"
-			className={`document-activity-dot activity-dot ${
-				placement === "corner" ? "activity-badge" : ""
-			}`}
+			className={`activity-dot ${placement === "corner" ? "activity-badge" : ""}`}
 			data-document-activity={activity}
 		/>
 	);
diff --git a/apps/web/src/phone-workspace.css b/apps/web/src/phone-workspace.css
index eb015504b..dd37122b3 100644
--- a/apps/web/src/phone-workspace.css
+++ b/apps/web/src/phone-workspace.css
@@ -515,7 +515,7 @@
 	border-radius: var(--radius-full);
 	background: var(--color-brand);
 	outline-style: solid;
-	outline-width: calc(var(--edge-width) * 2);
+	outline-width: calc(var(--spacing) / 2);
 	outline-color: var(--color-page);
 }
 
diff --git a/apps/web/src/theme.css b/apps/web/src/theme.css
index cc88ad1b0..754dbc082 100644
--- a/apps/web/src/theme.css
+++ b/apps/web/src/theme.css
@@ -1030,7 +1030,7 @@ body {
 	top: calc(var(--spacing) * -0.75);
 	right: calc(var(--spacing) * -0.75);
 	outline-style: solid;
-	outline-width: calc(var(--edge-width) * 2);
+	outline-width: calc(var(--spacing) / 2);
 	outline-color: var(--activity-badge-ring, var(--color-page));
 }