Say lost edits in the status area, offer Reconnect in phone Chat, and restart backoff on request

The notice for edits a rebuild dropped now sits with the document status
in the header, where it covers no decision card. Chat offers Reconnect
when the header is out of view. Asking to reconnect starts the backoff
over, so a few failed asks never leave the next automatic attempt waiting
out the cap. The no-Planner mention test finds the sent message by its
raw text, since the transcript drops the leading mention.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Author: MaggieAppleton

apps/web/src/chat/chat.tsx

@@ -990,6 +990,16 @@ export function Chat(
 												</span>
 											)}
 										</span>
+										{/* Where the document header is out of view; see composer.css. */}
+										{connectionNotice === "offline" && wire && (
+											<button
+												className="composer-reconnect btn btn-sm btn-ghost"
+												onClick={() => wire.reconnect()}
+												type="button"
+											>
+												Reconnect
+											</button>
+										)}
 										<span className="composer-run-control">
 											{agent && (busy || counts.active > 0) && (
 												<button

apps/web/src/chat/composer.css

@@ -278,3 +278,10 @@
 		animation: composer-connection-enter var(--duration-fast) var(--ease-out);
 	}
 }
+/*
+ * Side by side with the document, its header already offers Reconnect, and
+ * one state gets one action. Without it in view, as on a phone, Chat does.
+ */
+[data-workspace-mode="split"] .chat-composer .composer-reconnect {
+	display: none;
+}

apps/web/src/room-workspace.tsx

@@ -248,6 +248,9 @@ export function Header(
 	);
 }
 
+const LOST_EDITS =
+	"Your last edits couldn't be saved because the document changed while you were offline.";
+
 /** Reconnect attempts a person can make in one outage before Reload is offered. */
 const RECONNECTS_BEFORE_RELOAD = 3;
 
@@ -310,6 +313,8 @@ export function RoomWorkspace(
 	// Reconnecting in place keeps unsent work, so it is offered first. A reload
 	// is the fallback once it has failed this often in one outage.
 	let [reconnects, setReconnects] = useState(0);
+	// The last loss of unsent edits this person has dismissed.
+	let [lostSeen, setLostSeen] = useState(0);
 	if (status === "connected" && reconnects) setReconnects(0);
 	let [members, setMembers] = useState<Session.Member[]>([]);
 	let [effectiveCanEdit, setEffectiveCanEdit] = useState(canEdit && !archivedAt);
@@ -917,17 +922,43 @@ export function RoomWorkspace(
 					/>
 				}
 				status={
-					<PlanStatus
-						connection={status === "deleted" ? "closed" : treatAsConnected ? undefined : status}
-						failed={planState.failed}
-						onReconnect={wire && reconnects < RECONNECTS_BEFORE_RELOAD
-							? () => {
-								setReconnects(count => count + 1);
-								wire.reconnect();
-							}
-							: undefined}
-						synced={planState.synced}
-					/>
+					<>
+						{!!planState.lost && planState.lost !== lostSeen && (
+							<div className="plan-status" data-level="alert" role="alert">
+								<span className="plan-status-text">
+									<span
+										aria-hidden="true"
+										className="plan-status-label"
+										data-tooltip={LOST_EDITS}
+										data-tooltip-verbatim=""
+									>
+										Edits not saved
+									</span>
+									<span aria-hidden="true" className="plan-status-detail">{LOST_EDITS}</span>
+									<span className="sr-only">{LOST_EDITS}</span>
+								</span>
+								<button
+									className="btn btn-sm btn-ghost"
+									onClick={() =>
+										setLostSeen(planState.lost ?? 0)}
+									type="button"
+								>
+									Dismiss
+								</button>
+							</div>
+						)}
+						<PlanStatus
+							connection={status === "deleted" ? "closed" : treatAsConnected ? undefined : status}
+							failed={planState.failed}
+							onReconnect={wire && reconnects < RECONNECTS_BEFORE_RELOAD
+								? () => {
+									setReconnects(count => count + 1);
+									wire.reconnect();
+								}
+								: undefined}
+							synced={planState.synced}
+						/>
+					</>
 				}
 				ids={workspaceIds}
 				identity={room}

apps/web/src/wire.test.ts

@@ -317,6 +317,36 @@ describe("status", () => {
 		}
 	}, 10_000);
 
+	it("starts the backoff over when asked to reconnect", async () => {
+		let attempts = 0;
+		let server = Bun.serve({
+			port: 0,
+			hostname: "127.0.0.1",
+			fetch(request) {
+				if (request.headers.get("x-chopin-socket-probe") !== "1") attempts++;
+				return new Response("try again", { status: 503 });
+			},
+		});
+		servers.push(server);
+		let random = Math.random;
+		Math.random = () => 0.999;
+		try {
+			let wire = connect(server.port!, []);
+			await until(() => wire.status === "reconnecting", "backoff");
+			// Each failed ask would otherwise double the wait after it.
+			for (let i = 0; i < 5; i++) {
+				let before = attempts;
+				wire.reconnect();
+				await until(() => attempts > before, "asked attempt");
+				await Bun.sleep(50);
+			}
+			let before = attempts;
+			await until(() => attempts > before, "automatic attempt soon after");
+		} finally {
+			Math.random = random;
+		}
+	});
+
 	it("ignores a superseded refusal probe after manual reconnection", async () => {
 		let probe = Promise.withResolvers<void>();
 		let release = Promise.withResolvers<void>();

apps/web/src/wire.ts

@@ -142,10 +142,18 @@ export class Wire {
 		return this.#socket?.readyState === WebSocket.OPEN;
 	}
 
+	/**
+	 * Try again now, at a person's request.
+	 *
+	 * The backoff starts over: someone who asks to reconnect is saying the
+	 * network may be back, and after a few failed asks the next automatic
+	 * attempt must not still be waiting out the cap.
+	 */
 	reconnect(): void {
 		if (this.#disposed || this.#terminal) return;
 		clearTimeout(this.#timer);
 		this.#timer = undefined;
+		this.#attempts = 0;
 		let previous = this.#socket;
 		this.#socket = undefined;
 		this.#abandon("connection restarted");

e2e/chat-mentions.e2e.ts

@@ -217,7 +217,10 @@ test("without a Planner a manually addressed message gets a local notice", async
 	await expect(chat.getByRole("listbox", { name: "Mentions" })).toHaveCount(0);
 	await input.fill("@chopin are you there?");
 	await chat.getByRole("button", { name: "Send message" }).click();
-	await expect(chat.getByText("@chopin are you there?", { exact: true })).toBeVisible();
+	// The transcript drops the leading mention from what it shows, so find the
+	// sent message by what was sent rather than by the draft still on screen.
+	await expectChatValue(input, "");
+	await expect(chat.locator('[data-chat-raw="@chopin are you there?"]')).toBeVisible();
 	let notice = chat.getByText("Chopin is off on this server. Your message went to the room only.", {
 		exact: true,
 	});

e2e/connection.e2e.ts

@@ -214,3 +214,23 @@ test("a reload keeps an unsent Chat message", async ({ join, page }) => {
 	await ready(page);
 	await expectChatValue(chatInput(chatPane(page)), "Not sent before the reload");
 });
+
+test("on a phone, Chat offers Reconnect when offline", async ({ join, page }) => {
+	await page.setViewportSize({ width: 390, height: 844 });
+	let wire = route(page);
+	await wire.ready;
+	await join("ana");
+	await page.getByRole("navigation", { name: "Workspace view" })
+		.getByRole("button", { name: /^Chat/ }).click();
+	let chat = chatPane(page);
+
+	wire.state.offline = true;
+	await wire.sockets.at(-1)!.close();
+	await expect(chat.locator(".composer-connection")).toHaveText("Offline", { timeout: 10_000 });
+	let reconnect = chat.getByRole("button", { name: "Reconnect", exact: true });
+	await expect(reconnect).toBeVisible();
+
+	wire.state.offline = false;
+	await reconnect.click();
+	await expect(chat.locator(".composer-connection")).toBeEmpty();
+});

e2e/editing.e2e.ts

@@ -263,6 +263,8 @@ test("a lost connection is said in the document header and the composer", async
 	await expect(status.getByRole("button", { name: "Reload" })).toBeVisible();
 	await expect(status.getByRole("button", { name: "Reconnect", exact: true })).toHaveCount(0);
 
+	// No online event here: the wire's own retry has to bring it back, and
+	// asking to reconnect restarted the backoff rather than adding to it.
 	offline = false;
 	await ready(page);
 	await expect(status).toHaveAttribute("data-level", "hidden");

packages/editor/src/plan-editor.tsx

@@ -105,6 +105,11 @@ export type PlanState = {
 	synced: boolean;
 	/** Why the document was last replaced, if it was. */
 	reset?: Plan.Reset["reason"];
+	/**
+	 * Counts replacements that dropped edits the server never acknowledged,
+	 * so the host can say so once for each, until it is dismissed.
+	 */
+	lost?: number;
 	/** Why it could not be opened at all, if it could not. */
 	failed?: string;
 };
@@ -136,8 +141,6 @@ export function PlanEditor(
 	let ref = useRef<MDXEditorMethods>(null);
 	let scroller = useRef<HTMLDivElement>(null);
 	let [state, setState] = useState<PlanState>({ synced: false });
-	// Unsent edits a rebuilt document could not keep, said until dismissed.
-	let [lost, setLost] = useState(false);
 	let [generation, setGeneration] = useState(0);
 	let provider = useRef<PlanProvider>(undefined);
 	// Presence renders, so it needs the provider as state; edits need it
@@ -155,10 +158,15 @@ export function PlanEditor(
 	// rebuilt rather than reconciled — that is what "reset" means. The marks
 	// describe a history that no longer exists, so they go with it.
 	let onReset = useCallback((reason: Plan.Reset["reason"], lost: boolean) => {
-		if (lost) setLost(true);
 		changes.clear();
 		questions?.resetDocument();
-		setState(prev => ({ ...prev, synced: false, reset: reason, failed: undefined }));
+		setState(prev => ({
+			...prev,
+			synced: false,
+			reset: reason,
+			failed: undefined,
+			lost: lost ? (prev.lost ?? 0) + 1 : prev.lost,
+		}));
 		setGeneration(value => value + 1);
 	}, [changes, questions]);
 
@@ -419,17 +427,6 @@ export function PlanEditor(
 					</div>
 					{/* In the document column, so they track the prose, not the pane. */}
 					<PlanChanges motionImmediately={motionImmediately} store={changes} />
-					{lost && (
-						<div className="plan-lost" role="alert">
-							<span>
-								Your last edits couldn't be saved because the document changed while you were
-								offline.
-							</span>
-							<button className="btn btn-sm btn-ghost" onClick={() => setLost(false)} type="button">
-								Dismiss
-							</button>
-						</div>
-					)}
 				</div>
 			</div>
 		</div>

packages/editor/src/styles.css

@@ -2304,33 +2304,6 @@
 	background: var(--color-brand-wash);
 }
 
-/*
- * Over the prose, like the change chips, so saying it moves nothing. It stays
- * until dismissed: the edits are gone, and a note that fades on its own could
- * go unread.
- */
-.plan-lost {
-	position: absolute;
-	z-index: 4;
-	inset-block-end: 0.75rem;
-	inset-inline-start: 50%;
-	translate: -50% 0;
-	display: flex;
-	align-items: center;
-	gap: 0.5rem;
-	width: max-content;
-	max-width: min(28rem, calc(100% - 1.5rem));
-	padding: 0.375rem 0.375rem 0.375rem 0.75rem;
-	border-radius: var(--radius-lg);
-	background: var(--color-page);
-	outline: var(--edge-width) solid var(--color-edge);
-	outline-offset: calc(-1 * var(--edge-width));
-	box-shadow: var(--shadow-resting);
-	color: var(--color-destructive-ink);
-	font-size: var(--text-sm);
-	line-height: var(--text-sm--line-height);
-}
-
 /* Reaching the ones off screen ------------------------------------------- */
 
 /*