Commit ce4712d5b04fb998f79fe132245289191147e5d5 | the-knife

.github/workflows/ci.yml+6-2

 @@ -52,7 +52,9 @@ jobs:
         run: vpr typecheck
       - name: Install browser secret helper build libraries
-        run: sudo apt-get update && sudo apt-get install -y libsecret-1-dev pkg-config
+        run: |
+          sudo sed -i 's|http://|https://|g' /etc/apt/blacksmith-ubuntu-mirrors.txt /etc/apt/sources.list.d/ubuntu.sources
+          sudo apt-get update && sudo apt-get install -y libsecret-1-dev pkg-config
       - name: Build desktop pipeline
         run: vp run build:desktop
 @@ -89,7 +91,9 @@ jobs:
         run: vp run --filter @t3tools/desktop ensure:electron
       - name: Install browser secret helper build libraries
-        run: sudo apt-get update && sudo apt-get install -y libsecret-1-dev pkg-config
+        run: |
+          sudo sed -i 's|http://|https://|g' /etc/apt/blacksmith-ubuntu-mirrors.txt /etc/apt/sources.list.d/ubuntu.sources
+          sudo apt-get update && sudo apt-get install -y libsecret-1-dev pkg-config
       - name: Test
         run: vp run --parallel --concurrency-limit 4 --filter '!t3' --filter '!@t3tools/monorepo' test

apps/marketing/src/lib/homeMotion.test.ts created+226

...	@@ -0,0 +1,226 @@
1	import { afterEach, beforeEach, describe, expect, it, vi } from "vite-plus/test";
2
3	import { startHomeMotion } from "./homeMotion";
4
5	class ElementStub extends EventTarget {
6	properties = new Map<string, string>();
7	style = { setProperty: (name: string, value: string) => this.properties.set(name, value) };
8	children: ElementStub[] = [];
9	scrollLeft = 0;
10	scrollWidth = 1_200;
11	clientWidth = 400;
12	matches = () => false;
13	contains = (target: EventTarget \| null) =>
14	target === this \|\| (target instanceof ElementStub && this.children.includes(target));
15	querySelectorAll = () => this.children;
16	getBoundingClientRect = vi.fn(() => ({ left: 0, top: 0, width: 400, height: 600 }));
17	scrollTo = vi.fn((options: ScrollToOptions) => {
18	this.scrollLeft = options.left ?? this.scrollLeft;
19	});
20	}
21
22	let observers: ObserverStub[] = [];
23	class ObserverStub {
24	constructor(private readonly callback: IntersectionObserverCallback) {
25	observers.push(this);
26	}
27	observe = vi.fn();
28	disconnect = vi.fn();
29	report(target: ElementStub, isIntersecting: boolean) {
30	this.callback(
31	[{ target, isIntersecting } as unknown as IntersectionObserverEntry],
32	this as unknown as IntersectionObserver,
33	);
34	}
35	}
36
37	let page = Object.assign(new EventTarget(), { visibilityState: "visible", activeElement: null });
38	let viewport = new EventTarget();
39	let reduced = Object.assign(new EventTarget(), { matches: false });
40	let fine = Object.assign(new EventTarget(), { matches: true });
41	let frames = new Map<number, FrameRequestCallback>();
42	let dispose: (() => void) \| undefined;
43
44	beforeEach(() => {
45	vi.useFakeTimers({ toFake: ["setTimeout", "clearTimeout"] });
46	observers = [];
47	frames = new Map();
48	page = Object.assign(new EventTarget(), { visibilityState: "visible", activeElement: null });
49	viewport = new EventTarget();
50	reduced = Object.assign(new EventTarget(), { matches: false });
51	fine = Object.assign(new EventTarget(), { matches: true });
52	vi.stubGlobal("document", page);
53	vi.stubGlobal(
54	"window",
55	Object.assign(viewport, {
56	matchMedia: (query: string) => (query.includes("reduced-motion") ? reduced : fine),
57	}),
58	);
59	vi.stubGlobal("Node", ElementStub);
60	vi.stubGlobal("IntersectionObserver", ObserverStub);
61	let frameId = 0;
62	vi.stubGlobal("requestAnimationFrame", (callback: FrameRequestCallback) => {
63	frames.set(++frameId, callback);
64	return frameId;
65	});
66	vi.stubGlobal("cancelAnimationFrame", (id: number) => frames.delete(id));
67	});
68
69	afterEach(() => {
70	dispose?.();
71	dispose = undefined;
72	vi.useRealTimers();
73	vi.unstubAllGlobals();
74	});
75
76	function fixture() {
77	const hero = new ElementStub();
78	const field = new ElementStub();
79	const mark = new ElementStub();
80	const otherMark = new ElementStub();
81	field.children = [mark, otherMark];
82	const endorsements = new ElementStub();
83	const caret = new ElementStub();
84	dispose = startHomeMotion({ hero, field, endorsements, caret } as unknown as Parameters<
85	typeof startHomeMotion
86	>[0]);
87	return { hero, field, mark, otherMark, endorsements, caret, observer: observers[0]! };
88	}
89
90	function movePointer(hero: ElementStub, x = 400, y = 600) {
91	hero.dispatchEvent(Object.assign(new Event("pointermove"), { clientX: x, clientY: y }));
92	}
93
94	describe("homepage motion", () => {
95	it("gates each mark and caret and batches pointer input into one frame", () => {
96	const { hero, field, mark, otherMark, caret, observer } = fixture();
97	expect(mark.properties.get("--home-motion-state")).toBe("paused");
98	observer.report(mark, true);
99	observer.report(caret, true);
100	expect(mark.properties.get("--home-motion-state")).toBe("running");
101	expect(otherMark.properties.get("--home-motion-state")).toBe("paused");
102	expect(caret.properties.get("--home-motion-state")).toBe("running");
103
104	movePointer(hero, 100, 100);
105	movePointer(hero);
106	expect(frames.size).toBe(1);
107	expect(hero.getBoundingClientRect).not.toHaveBeenCalled();
108	const [id, callback] = [...frames][0]!;
109	frames.delete(id);
110	callback(0);
111	expect(field.properties.get("--px")).toBe("18.0px");
112	expect(field.properties.get("--py")).toBe("14.0px");
113
114	movePointer(hero);
115	page.visibilityState = "hidden";
116	page.dispatchEvent(new Event("visibilitychange"));
117	expect(frames.size).toBe(0);
118	expect(field.properties.get("--px")).toBe("0px");
119	expect(mark.properties.get("--home-motion-state")).toBe("paused");
120	expect(caret.properties.get("--home-motion-state")).toBe("paused");
121	page.visibilityState = "visible";
122	page.dispatchEvent(new Event("visibilitychange"));
123	reduced.matches = true;
124	reduced.dispatchEvent(new Event("change"));
125	movePointer(hero);
126	expect(frames.size).toBe(0);
127	expect(mark.properties.get("--home-motion-state")).toBe("paused");
128	reduced.matches = false;
129	fine.matches = false;
130	reduced.dispatchEvent(new Event("change"));
131	movePointer(hero);
132	expect(frames.size).toBe(0);
133	expect(mark.properties.get("--home-motion-state")).toBe("running");
134	});
135
136	it("pages every eight seconds, reverses at the end, and has no timer without overflow", () => {
137	const { endorsements, observer } = fixture();
138	expect(vi.getTimerCount()).toBe(0);
139	observer.report(endorsements, true);
140	vi.advanceTimersByTime(7_999);
141	expect(endorsements.scrollTo).not.toHaveBeenCalled();
142	vi.advanceTimersByTime(16_001);
143	expect(endorsements.scrollTo.mock.calls.map(([options]) => options.left)).toEqual([
144	400, 800, 400,
145	]);
146	expect(
147	endorsements.scrollTo.mock.calls.every(([options]) => options.behavior === "smooth"),
148	).toBe(true);
149
150	endorsements.clientWidth = endorsements.scrollWidth;
151	viewport.dispatchEvent(new Event("resize"));
152	expect(vi.getTimerCount()).toBe(0);
153	expect(endorsements.scrollTo).toHaveBeenLastCalledWith({ left: 400, behavior: "instant" });
154	endorsements.clientWidth = 400;
155	viewport.dispatchEvent(new Event("resize"));
156	expect(vi.getTimerCount()).toBe(1);
157	});
158
159	it("pauses paging for hover, focus, hidden content, and reduced motion", () => {
160	const { endorsements, observer } = fixture();
161	observer.report(endorsements, true);
162	const changeVisibility = (visible: boolean) => {
163	page.visibilityState = visible ? "visible" : "hidden";
164	page.dispatchEvent(new Event("visibilitychange"));
165	};
166	const changeMotion = (matches: boolean) => {
167	reduced.matches = matches;
168	reduced.dispatchEvent(new Event("change"));
169	};
170	const pauses = [
171	[
172	() => endorsements.dispatchEvent(new Event("pointerenter")),
173	() => endorsements.dispatchEvent(new Event("pointerleave")),
174	],
175	[
176	() => endorsements.dispatchEvent(new Event("focusin")),
177	() =>
178	endorsements.dispatchEvent(Object.assign(new Event("focusout"), { relatedTarget: null })),
179	],
180	[() => changeVisibility(false), () => changeVisibility(true)],
181	[() => observer.report(endorsements, false), () => observer.report(endorsements, true)],
182	[() => changeMotion(true), () => changeMotion(false)],
183	] as const;
184	for (const [pause, resume] of pauses) {
185	pause();
186	expect(vi.getTimerCount()).toBe(0);
187	vi.advanceTimersByTime(16_000);
188	resume();
189	expect(vi.getTimerCount()).toBe(1);
190	}
191	expect(endorsements.scrollTo).not.toHaveBeenCalled();
192	vi.advanceTimersByTime(8_000);
193	expect(endorsements.scrollTo).toHaveBeenCalledWith({ left: 400, behavior: "smooth" });
194	endorsements.dispatchEvent(new Event("pointerenter"));
195	expect(endorsements.scrollTo).toHaveBeenLastCalledWith({ left: 400, behavior: "instant" });
196	expect(vi.getTimerCount()).toBe(0);
197	});
198
199	it.each(["wheel", "pointerdown", "keydown"])("hands control to the user after %s", (event) => {
200	const { endorsements, observer } = fixture();
201	observer.report(endorsements, true);
202	endorsements.dispatchEvent(new Event(event));
203	observer.report(endorsements, false);
204	observer.report(endorsements, true);
205	endorsements.dispatchEvent(new Event("pointerleave"));
206	viewport.dispatchEvent(new Event("resize"));
207	vi.advanceTimersByTime(60_000);
208	expect(vi.getTimerCount()).toBe(0);
209	expect(endorsements.scrollTo).not.toHaveBeenCalled();
210	});
211
212	it("cancels pending work and ignores events after cleanup", () => {
213	const { hero, mark, endorsements, observer } = fixture();
214	observer.report(mark, true);
215	observer.report(endorsements, true);
216	movePointer(hero);
217	dispose?.();
218	observer.report(mark, true);
219	movePointer(hero);
220	reduced.dispatchEvent(new Event("change"));
221	expect(observer.disconnect).toHaveBeenCalledTimes(1);
222	expect(frames.size).toBe(0);
223	expect(vi.getTimerCount()).toBe(0);
224	expect(mark.properties.get("--home-motion-state")).toBe("paused");
225	});
226	});

apps/marketing/src/lib/homeMotion.ts created+176

...	@@ -0,0 +1,176 @@
1	/** Runs homepage motion only while its content is visible. Manual scrolling stops paging. */
2	export function startHomeMotion({
3	hero,
4	field,
5	endorsements,
6	caret,
7	}: {
8	hero: HTMLElement;
9	field: HTMLElement;
10	endorsements: HTMLElement;
11	caret: HTMLElement;
12	}) {
13	if (typeof IntersectionObserver === "undefined") return () => {};
14
15	const marks = Array.from(field.querySelectorAll<HTMLElement>(".hero-float-mark"));
16	const visible = new Set<Element>();
17	const reducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)");
18	const finePointer = window.matchMedia("(pointer: fine)");
19	const events = new AbortController();
20	const eventOptions = { signal: events.signal };
21	let disposed = false;
22	let hovered = endorsements.matches(":hover");
23	let focused = endorsements.contains(document.activeElement);
24	let userControlled = false;
25	let direction = 1;
26	let automaticScroll = false;
27	let pageTimer: ReturnType<typeof setTimeout> \| undefined;
28	let pointerFrame: number \| undefined;
29	let pointer: { x: number; y: number } \| null = null;
30
31	const canMove = (element: Element) =>
32	!disposed &&
33	visible.has(element) &&
34	document.visibilityState === "visible" &&
35	!reducedMotion.matches;
36	const canParallax = () => finePointer.matches && marks.some(canMove);
37	const canPage = () =>
38	canMove(endorsements) &&
39	!hovered &&
40	!focused &&
41	!userControlled &&
42	endorsements.scrollWidth > endorsements.clientWidth;
43
44	function resetPointer() {
45	if (pointerFrame !== undefined) cancelAnimationFrame(pointerFrame);
46	pointerFrame = undefined;
47	pointer = null;
48	field.style.setProperty("--px", "0px");
49	field.style.setProperty("--py", "0px");
50	}
51
52	function updatePaging() {
53	if (canPage()) {
54	pageTimer ??= setTimeout(advancePage, 8_000);
55	return;
56	}
57	if (pageTimer !== undefined) clearTimeout(pageTimer);
58	pageTimer = undefined;
59	if (automaticScroll) {
60	automaticScroll = false;
61	endorsements.scrollTo({ left: endorsements.scrollLeft, behavior: "instant" });
62	}
63	}
64
65	function advancePage() {
66	pageTimer = undefined;
67	if (!canPage()) return;
68	const end = endorsements.scrollWidth - endorsements.clientWidth;
69	const current = endorsements.scrollLeft;
70	if (current >= end - 1) direction = -1;
71	else if (current <= 1) direction = 1;
72	automaticScroll = true;
73	endorsements.scrollTo({
74	left: Math.max(0, Math.min(end, current + direction * endorsements.clientWidth)),
75	behavior: "smooth",
76	});
77	updatePaging();
78	}
79
80	function update() {
81	for (const mark of marks) {
82	mark.style.setProperty("--home-motion-state", canMove(mark) ? "running" : "paused");
83	}
84	caret.style.setProperty("--home-motion-state", canMove(caret) ? "running" : "paused");
85	const parallax = canParallax();
86	field.style.setProperty("--parallax-duration", parallax ? "0.7s" : "0s");
87	if (!parallax) resetPointer();
88	updatePaging();
89	}
90
91	const observer = new IntersectionObserver((entries) => {
92	if (disposed) return;
93	for (const entry of entries) {
94	if (entry.isIntersecting) visible.add(entry.target);
95	else visible.delete(entry.target);
96	}
97	update();
98	});
99	for (const element of [...marks, endorsements, caret]) observer.observe(element);
100
101	hero.addEventListener(
102	"pointermove",
103	(event) => {
104	if (!canParallax()) return;
105	pointer = { x: event.clientX, y: event.clientY };
106	pointerFrame ??= requestAnimationFrame(() => {
107	pointerFrame = undefined;
108	if (!pointer \|\| !canParallax()) return;
109	const bounds = hero.getBoundingClientRect();
110	if (bounds.width === 0 \|\| bounds.height === 0) return;
111	field.style.setProperty(
112	"--px",
113	`${(((pointer.x - bounds.left) / bounds.width - 0.5) * 36).toFixed(1)}px`,
114	);
115	field.style.setProperty(
116	"--py",
117	`${(((pointer.y - bounds.top) / bounds.height - 0.5) * 28).toFixed(1)}px`,
118	);
119	});
120	},
121	eventOptions,
122	);
123	hero.addEventListener("pointerleave", resetPointer, eventOptions);
124	endorsements.addEventListener(
125	"pointerenter",
126	() => {
127	hovered = true;
128	updatePaging();
129	},
130	eventOptions,
131	);
132	endorsements.addEventListener(
133	"pointerleave",
134	() => {
135	hovered = false;
136	updatePaging();
137	},
138	eventOptions,
139	);
140	endorsements.addEventListener(
141	"focusin",
142	() => {
143	focused = true;
144	updatePaging();
145	},
146	eventOptions,
147	);
148	endorsements.addEventListener(
149	"focusout",
150	(event) => {
151	focused = event.relatedTarget instanceof Node && endorsements.contains(event.relatedTarget);
152	updatePaging();
153	},
154	eventOptions,
155	);
156	const takeControl = () => {
157	userControlled = true;
158	updatePaging();
159	};
160	endorsements.addEventListener("wheel", takeControl, { ...eventOptions, passive: true });
161	endorsements.addEventListener("pointerdown", takeControl, eventOptions);
162	endorsements.addEventListener("keydown", takeControl, eventOptions);
163	document.addEventListener("visibilitychange", update, eventOptions);
164	window.addEventListener("resize", update, eventOptions);
165	reducedMotion.addEventListener("change", update, eventOptions);
166	finePointer.addEventListener("change", update, eventOptions);
167	update();
168
169	return () => {
170	if (disposed) return;
171	disposed = true;
172	events.abort();
173	observer.disconnect();
174	update();
175	};
176	}

apps/marketing/src/pages/index.astro+39-8

 @@ -355,6 +355,7 @@ const screenshot = await getImage({
 <script>
   import { fetchLatestRelease, RELEASES_URL, type ReleaseAsset } from "../lib/releases";
+  import { startHomeMotion } from "../lib/homeMotion";
   type Platform = { os: "mac" | "win" | "linux"; label: string };
 @@ -419,6 +420,14 @@ const screenshot = await getImage({
   }
   init();
+  const hero = document.querySelector<HTMLElement>(".hero");
+  const field = document.querySelector<HTMLElement>(".hero-float");
+  const endorsements = document.querySelector<HTMLElement>(".endorsement-carousel");
+  const caret = document.querySelector<HTMLElement>(".caret");
+  if (hero && field && endorsements && caret) {
+    startHomeMotion({ hero, field, endorsements, caret });
+  }
 </script>
 <style>
 @@ -590,12 +599,14 @@ const screenshot = await getImage({
   :global([data-platform="linux"]) .dl-icon--linux { display: block; }
   :global(html:not([data-platform])) .dl-icon--apple { display: block; }
-  /* Harness marks stay in their final positions after the entry animation. */
+  /* Marks enter once, then drift while visible and lean toward the pointer. */
   .hero-float {
     position: absolute;
     inset: 0;
     pointer-events: none;
     z-index: 1;
+    --px: 0px;
+    --py: 0px;
   }
   .hero-float-mark {
 @@ -605,6 +616,8 @@ const screenshot = await getImage({
     width: var(--s);
     height: var(--s);
     margin-left: calc(var(--s) / -2);
+    translate: calc(var(--px) * var(--depth)) calc(var(--py) * var(--depth));
+    transition: translate var(--parallax-duration, 0s) cubic-bezier(0.2, 0.7, 0.2, 1);
   }
   .hero-float-card {
 @@ -618,7 +631,10 @@ const screenshot = await getImage({
     box-shadow:
       0 20px 48px -16px rgba(0, 0, 0, 0.65),
       0 2px 0 0 rgba(255, 255, 255, 0.04) inset;
-    animation: mark-in 1s cubic-bezier(0.2, 0.7, 0.2, 1) var(--d) both;
+    animation:
+      mark-in 1s cubic-bezier(0.2, 0.7, 0.2, 1) var(--d) both,
+      mark-drift var(--dur) ease-in-out calc(var(--d) + 1s) infinite;
+    animation-play-state: running, var(--home-motion-state, paused);
   }
   .hero-float-card img {
 @@ -637,16 +653,21 @@ const screenshot = await getImage({
     from { opacity: 0; transform: translate(var(--fx), var(--fy)) rotate(calc(var(--rot) + 24deg)) scale(0.6); }
     to { opacity: 1; transform: translate(0, 0) rotate(var(--rot)) scale(1); }
   }
+  @keyframes mark-drift {
+    0%, 100% { transform: translate(0, 0) rotate(var(--rot)); }
+    50% { transform: translate(var(--dx), var(--dy)) rotate(calc(var(--rot) + var(--wob))); }
+  }
-  .hf-opencode    { --x: max(-300px, -19vw); --y: 20px; --s: 64px; --rot: 6deg; --d: 620ms; --fx: -40px; --fy: -80px; }
+  .hf-opencode    { --x: max(-300px, -19vw); --y: 20px; --s: 64px; --rot: 6deg; --depth: 0.6; --d: 620ms; --dur: 8.5s; --dx: 2px; --dy: -8px; --wob: 3deg; --fx: -40px; --fy: -80px; }
-  .hf-antigravity { --x: min(300px, 19vw); --y: 20px; --s: 64px; --rot: -5deg; --d: 580ms; --fx: 40px; --fy: -80px; }
+  .hf-antigravity { --x: min(300px, 19vw); --y: 20px; --s: 64px; --rot: -5deg; --depth: 0.6; --d: 580ms; --dur: 9.8s; --dx: -2px; --dy: -9px; --wob: -3deg; --fx: 40px; --fy: -80px; }
-  .hf-claude   { --x: max(-560px, -38vw); --y: 128px; --s: 96px; --rot: -8deg; --d: 380ms; --fx: -160px; --fy: -40px; --tint: rgba(217, 119, 87, 0.22); }
+  .hf-claude   { --x: max(-560px, -38vw); --y: 128px; --s: 96px; --rot: -8deg; --depth: 1.2; --d: 380ms; --dur: 10.5s; --dx: 4px; --dy: -12px; --wob: -2deg; --fx: -160px; --fy: -40px; --tint: rgba(217, 119, 87, 0.22); }
-  .hf-codex    { --x: min(560px, 38vw); --y: 128px; --s: 96px; --rot: 7deg; --d: 460ms; --fx: 160px; --fy: -40px; }
+  .hf-codex    { --x: min(560px, 38vw); --y: 128px; --s: 96px; --rot: 7deg; --depth: 1.2; --d: 460ms; --dur: 9.2s; --dx: -4px; --dy: -10px; --wob: 2deg; --fx: 160px; --fy: -40px; }
-  .hf-grok     { --x: max(-440px, -30vw); --y: 440px; --s: 80px; --rot: 4deg; --d: 540ms; --fx: -120px; --fy: 80px; }
+  .hf-grok     { --x: max(-440px, -30vw); --y: 440px; --s: 80px; --rot: 4deg; --depth: 0.9; --d: 540ms; --dur: 11.5s; --dx: 3px; --dy: -9px; --wob: -3deg; --fx: -120px; --fy: 80px; }
-  .hf-cursor   { --x: min(440px, 30vw); --y: 440px; --s: 80px; --rot: -5deg; --d: 700ms; --fx: 120px; --fy: 80px; }
+  .hf-cursor   { --x: min(440px, 30vw); --y: 440px; --s: 80px; --rot: -5deg; --depth: 0.9; --d: 700ms; --dur: 7.8s; --dx: -3px; --dy: -11px; --wob: 3deg; --fx: 120px; --fy: 80px; }
   @media (prefers-reduced-motion: reduce) {
     .hero-float-card { animation: none; transform: rotate(var(--rot)); }
+    .hero-float-mark { translate: none; transition: none; }
   }
   @media (max-width: 1180px) {
 @@ -988,6 +1009,16 @@ const screenshot = await getImage({
     width: 7px; height: 14px;
     background: var(--fg);
     margin-left: 4px;
+    animation: blink 1s steps(2) infinite;
+    animation-play-state: var(--home-motion-state, paused);
+  }
+  @keyframes blink {
+    50% { opacity: 0; }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .caret { animation: none; }
   }
   .open-pitch {

apps/mobile/src/features/threads/use-project-actions.ts+1-6

 @@ -156,13 +156,8 @@ export function useCreateProjectThread() {
         );
         return AsyncResult.failure(result.cause);
       }
-      // The started turn holds its own copy of the bytes; a failed delete is
-      // surfaced without failing the started task.
-      await prepared.releaseUploads().catch((error) => {
-        console.warn("[project-thread] could not delete consumed pending uploads", error);
-      });
       setPendingConnectionError(null);
-      scheduleUnusedComposerAttachmentCleanup(input.initialAttachments);
+      scheduleUnusedComposerAttachmentCleanup(prepared.draftAttachments);
       return mapAtomCommandResult(result, () =>
         scopeThreadRef(input.project.environmentId, threadId),

apps/mobile/src/lib/attachmentUpload.ts+2-5

apps/mobile/src/state/pending-task-editor-writes.test.ts+1-1

...	@@ -19,7 +19,7 @@ vi.mock("./thread-outbox", async () => {	...	@@ -19,7 +19,7 @@ vi.mock("./thread-outbox", async () => {
19	harness.manager = createThreadOutboxManager({	19	harness.manager = createThreadOutboxManager({
20	registry: appAtomRegistry,	20	registry: appAtomRegistry,
21	storage: {	21	storage: {
22	load: async () => [],	22	load: async () => ({ messages: [], errors: [] }),
23	write: async (message) => {	23	write: async (message) => {
24	const pending = harness.writeGates.shift();	24	const pending = harness.writeGates.shift();
25	if (pending) {	25	if (pending) {

apps/mobile/src/state/thread-outbox-manager.ts+31-13

 @@ -72,16 +72,26 @@ export function createThreadOutboxManager(options: ThreadOutboxManagerOptions) {
     options.registry.set(queuedMessagesByThreadKeyAtom, groupQueuedThreadMessages(messages));
   };
-  // Resolves true when hydration completed; false when the read failed (the
+  // Readable messages can be used after a partial load. Only a complete load
-  // next call retries). Destructive callers (the attachment sweep) must not
+  // returns true, so cleanup cannot delete files owned by unreadable records.
-  // treat a failed hydration as an empty queue.
+  // A later call retries failed reads without replacing live message objects.
   const load = (): Promise<boolean> => {
     if (loadPromise !== null) {
       return loadPromise;
     }
     loadPromise = serialize(async () => {
-      const persistedMessages = await options.storage.load();
+      const result = await options.storage.load();
-      setMessages([...persistedMessages, ...currentMessages()]);
+      const current = currentMessages();
+      const currentIds = new Set(current.map((message) => message.messageId));
+      const recovered = result.messages.filter(
+        (message) => !currentIds.has(message.messageId) && !revisions.has(message.messageId),
+      );
+      // Accepted edits and removals win over a later disk read. Retaining
+      // current objects also keeps retries from restarting the drain.
+      if (recovered.length > 0) setMessages([...recovered, ...current]);
+      if (result.errors.length > 0) {
+        throw new AggregateError(result.errors, "Some queued messages could not be read.");
+      }
       return true;
     }).catch((cause) => {
       loadPromise = null;
 @@ -275,15 +285,23 @@ export function createThreadOutboxManager(options: ThreadOutboxManagerOptions) {
     // changes after this request must not enter the clear set.
     const revisionsAtRequest = new Map(revisions);
     return serialize(async () => {
-      const persisted = await options.storage.load().catch((cause) => {
+      const persisted = await options.storage
-        throw new ThreadOutboxManagerError({
+        .load()
-          operation: "clear-environment-load",
+        .then((result) => {
-          environmentId,
+          if (result.errors.length > 0) {
-          threadId: null,
+            throw new AggregateError(result.errors, "Some queued messages could not be read.");
-          messageId: null,
+          }
-          cause,
+          return result.messages;
+        })
+        .catch((cause) => {
+          throw new ThreadOutboxManagerError({
+            operation: "clear-environment-load",
+            environmentId,
+            threadId: null,
+            messageId: null,
+            cause,
+          });
         });
-      });
       const allMessages = flattenQueuedThreadMessages(
         groupQueuedThreadMessages([...persisted, ...currentMessages()]),
       );

apps/mobile/src/state/thread-outbox-removal.test.ts+1-1

...	@@ -19,7 +19,7 @@ vi.mock("./thread-outbox", async () => {	...	@@ -19,7 +19,7 @@ vi.mock("./thread-outbox", async () => {
19	harness.manager = createThreadOutboxManager({	19	harness.manager = createThreadOutboxManager({
20	registry: appAtomRegistry,	20	registry: appAtomRegistry,
21	storage: {	21	storage: {
22	load: async () => [],	22	load: async () => ({ messages: [], errors: [] }),
23	write: async () => undefined,	23	write: async () => undefined,
24	remove: async () => undefined,	24	remove: async () => undefined,
25	},	25	},

apps/mobile/src/state/thread-outbox-storage.ts+20-13

 @@ -44,8 +44,13 @@ export class ThreadOutboxStorageError extends Schema.TaggedErrorClass<ThreadOutb
   }
 }
+export interface ThreadOutboxLoadResult {
+  readonly messages: ReadonlyArray<QueuedThreadMessage>;
+  readonly errors: ReadonlyArray<ThreadOutboxStorageError>;
+}
 export interface ThreadOutboxStorage {
-  readonly load: () => Promise<ReadonlyArray<QueuedThreadMessage>>;
+  readonly load: () => Promise<ThreadOutboxLoadResult>;
   readonly write: (message: QueuedThreadMessage) => Promise<void>;
   readonly remove: (message: QueuedThreadMessage) => Promise<void>;
 }
 @@ -69,6 +74,7 @@ async function getMessageFile(messageId: MessageId) {
 export const expoThreadOutboxStorage: ThreadOutboxStorage = {
   load: async () => {
     const messages: QueuedThreadMessage[] = [];
+    const errors: ThreadOutboxStorageError[] = [];
     try {
       const { File } = await import("expo-file-system");
       const directory = await getOutboxDirectory();
 @@ -80,20 +86,21 @@ export const expoThreadOutboxStorage: ThreadOutboxStorage = {
         try {
           messages.push(decodeQueuedThreadMessage(JSON.parse(await entry.text()) as unknown));
         } catch (cause) {
-          // A partial queue hides attachment owners from cleanup. Keep all
+          // Recover readable messages without treating their attachment
-          // records untouched until every persisted message can be read.
+          // owners as the complete inventory needed for cleanup.
-          throw new ThreadOutboxStorageError({
+          errors.push(
-            operation: "read-message",
+            new ThreadOutboxStorageError({
-            environmentId: null,
+              operation: "read-message",
-            threadId: null,
+              environmentId: null,
-            messageId: null,
+              threadId: null,
-            fileName: entry.name,
+              messageId: null,
-            cause,
+              fileName: entry.name,
-          });
+              cause,
+            }),
+          );
         }
       }
     } catch (cause) {
-      if (cause instanceof ThreadOutboxStorageError) throw cause;
       throw new ThreadOutboxStorageError({
         operation: "load",
         environmentId: null,
 @@ -103,7 +110,7 @@ export const expoThreadOutboxStorage: ThreadOutboxStorage = {
         cause,
       });
     }
-    return messages;
+    return { messages, errors };
   },
   write: async (message) => {
     const fileName = messageFileName(message.messageId);

apps/mobile/src/state/thread-outbox.test.ts+160-33

 @@ -13,8 +13,44 @@ import { onTestFinished, vi } from "vite-plus/test";
 const outboxFiles = vi.hoisted(() => new Map<string, string | Error>());
 vi.mock("expo-file-system", () => {
+  class Directory {
+    create() {}
+    list() {
+      return Array.from(outboxFiles.keys(), (name) => new File(name));
+    }
+  }
   class File {
-    constructor(readonly name: string) {}
+    readonly name: string;
+    readonly parentDirectory = new Directory();
+    constructor(...parts: [string] | [Directory, string]) {
+      this.name = parts.length === 1 ? parts[0] : parts[1];
+    }
+    get exists() {
+      return outboxFiles.has(this.name);
+    }
+    create() {
+      outboxFiles.set(this.name, "");
+    }
+    write(contents: string) {
+      outboxFiles.set(this.name, contents);
+    }
+    moveSync(file: File) {
+      const contents = outboxFiles.get(this.name);
+      if (contents === undefined) throw new Error("Missing file");
+      outboxFiles.set(file.name, contents);
+      outboxFiles.delete(this.name);
+    }
+    delete() {
+      outboxFiles.delete(this.name);
+    }
     async text(): Promise<string> {
       const contents = outboxFiles.get(this.name);
 @@ -26,13 +62,7 @@ vi.mock("expo-file-system", () => {
   return {
     File,
-    Directory: class {
+    Directory,
-      create() {}
-      list() {
-        return Array.from(outboxFiles.keys(), (name) => new File(name));
-      }
-    },
     Paths: { document: "/documents" },
   };
 });
 @@ -52,7 +82,12 @@ import {
   type QueuedThreadMessage,
 } from "./thread-outbox-model";
 import { createThreadOutboxManager, ThreadOutboxManagerError } from "./thread-outbox-manager";
-import { expoThreadOutboxStorage, type ThreadOutboxStorage } from "./thread-outbox-storage";
+import {
+  expoThreadOutboxStorage,
+  ThreadOutboxStorageError,
+  type ThreadOutboxLoadResult,
+  type ThreadOutboxStorage,
+} from "./thread-outbox-storage";
 function queuedMessage(input: {
   readonly environmentId?: string;
 @@ -73,7 +108,7 @@ function queuedMessage(input: {
 describe("thread outbox", () => {
   it.each(["read", "json", "schema"] as const)(
-    "does not load a partial outbox after a record %s failure",
+    "recovers usable messages without permitting cleanup after a record %s failure",
     async (failure) => {
       onTestFinished(() => outboxFiles.clear());
       const first = queuedMessage({
 @@ -81,10 +116,11 @@ describe("thread outbox", () => {
         createdAt: "2026-06-08T10:00:01.000Z",
       });
       const second = queuedMessage({
+        environmentId: "environment-2",
         messageId: "message-2",
         createdAt: "2026-06-08T10:00:02.000Z",
       });
-      outboxFiles.set("message-1.json", JSON.stringify(encodeQueuedThreadMessage(first)));
+      // Put the unreadable record first to check that later records still load.
       outboxFiles.set(
         "message-2.json",
         failure === "read"
 @@ -93,14 +129,52 @@ describe("thread outbox", () => {
             ? "{"
             : JSON.stringify({ ...second, schemaVersion: 999 }),
       );
+      outboxFiles.set("message-1.json", JSON.stringify(encodeQueuedThreadMessage(first)));
+      const unreadable = outboxFiles.get("message-2.json");
+      await expect(expoThreadOutboxStorage.load()).resolves.toMatchObject({
+        messages: [first],
+        errors: [{ operation: "read-message", fileName: "message-2.json" }],
+      });
-      await expect(expoThreadOutboxStorage.load()).rejects.toMatchObject({
+      const registry = AtomRegistry.make();
-        operation: "read-message",
+      onTestFinished(() => registry.dispose());
-        fileName: "message-2.json",
+      const manager = createThreadOutboxManager({
+        registry,
+        storage: expoThreadOutboxStorage,
+        warn: () => {},
+      });
+      await expect(manager.load()).resolves.toBe(false);
+      const recovered = registry.get(manager.queuedMessagesByThreadKeyAtom)[
+        "environment-1:thread-1"
+      ]![0]!;
+      expect(recovered).toEqual(first);
+      await expect(manager.confirmQueued(recovered)).resolves.toBe(true);
+      const edited = { ...recovered, text: "Edited after recovery" };
+      await expect(manager.update(edited)).resolves.toBe(true);
+      const beforeRetry = registry.get(manager.queuedMessagesByThreadKeyAtom);
+      await expect(manager.load()).resolves.toBe(false);
+      expect(registry.get(manager.queuedMessagesByThreadKeyAtom)).toBe(beforeRetry);
+      await expect(manager.clearEnvironment(first.environmentId)).rejects.toMatchObject({
+        operation: "clear-environment-load",
       });
+      expect(outboxFiles.get("message-2.json")).toBe(unreadable);
+      expect(outboxFiles.has("message-1.json")).toBe(true);
+      // A delivered readable message can leave the queue while the failed
+      // record stays intact. Its attachment cleanup has a separate guard.
+      await expect(manager.remove(edited)).resolves.toBe(edited);
+      expect(outboxFiles.has("message-1.json")).toBe(false);
       outboxFiles.set("message-2.json", JSON.stringify(encodeQueuedThreadMessage(second)));
-      await expect(expoThreadOutboxStorage.load()).resolves.toEqual([first, second]);
+      await expect(manager.load()).resolves.toBe(true);
+      expect(registry.get(manager.queuedMessagesByThreadKeyAtom)).toEqual({
+        "environment-2:thread-1": [second],
+      });
+      await expect(expoThreadOutboxStorage.load()).resolves.toEqual({
+        messages: [second],
+        errors: [],
+      });
     },
   );
 @@ -138,6 +212,59 @@ describe("thread outbox", () => {
     });
   });
+  it("keeps in-session edits and removals when an incomplete load is retried", async () => {
+    const registry = AtomRegistry.make();
+    onTestFinished(() => registry.dispose());
+    const message = queuedMessage({
+      messageId: "message-retried",
+      createdAt: "2026-06-08T10:00:01.000Z",
+    });
+    const started = Promise.withResolvers<void>();
+    const response = Promise.withResolvers<ThreadOutboxLoadResult>();
+    const load = vi.fn<ThreadOutboxStorage["load"]>(async () => ({
+      messages: [message],
+      errors: [],
+    }));
+    load.mockImplementationOnce(() => {
+      started.resolve();
+      return response.promise;
+    });
+    const manager = createThreadOutboxManager({
+      registry,
+      storage: { load, write: async () => {}, remove: async () => {} },
+      warn: () => {},
+    });
+    const loading = manager.load();
+    await started.promise;
+    const edited = { ...message, text: "Accepted while storage was being read" };
+    const writing = manager.enqueue(edited);
+    response.resolve({
+      messages: [message],
+      errors: [
+        new ThreadOutboxStorageError({
+          operation: "read-message",
+          environmentId: null,
+          threadId: null,
+          messageId: null,
+          fileName: "unreadable.json",
+          cause: new Error("unreadable record"),
+        }),
+      ],
+    });
+    await expect(loading).resolves.toBe(false);
+    await writing;
+    expect(registry.get(manager.queuedMessagesByThreadKeyAtom)).toEqual({
+      "environment-1:thread-1": [edited],
+    });
+    await expect(manager.confirmQueued(edited)).resolves.toBe(true);
+    await manager.remove(edited);
+    // A later repaired record can contain a stale copy of a removed message.
+    await expect(manager.load()).resolves.toBe(true);
+    expect(registry.get(manager.queuedMessagesByThreadKeyAtom)).toEqual({});
+    expect(load).toHaveBeenCalledTimes(2);
+  });
   it("groups messages by scoped thread and preserves creation order", () => {
     const later = queuedMessage({
       messageId: "message-2",
 @@ -335,7 +462,7 @@ describe("thread outbox", () => {
     const manager = createThreadOutboxManager({
       registry,
       storage: {
-        load: async () => [],
+        load: async () => ({ messages: [], errors: [] }),
         write: async () => undefined,
         remove: async () => undefined,
       },
 @@ -382,7 +509,7 @@ describe("thread outbox", () => {
         if (loadCalls === 1) {
           await initialLoadBlocked;
         }
-        return [...stored.values()];
+        return { messages: [...stored.values()], errors: [] };
       },
       write: async () => undefined,
       remove: async (candidate) => {
 @@ -418,7 +545,7 @@ describe("thread outbox", () => {
         load: async () => {
           loadCalls += 1;
           if (loadCalls === 1) throw loadCause;
-          return [];
+          return { messages: [], errors: [] };
         },
         write: async () => undefined,
         remove: async () => undefined,
 @@ -451,7 +578,7 @@ describe("thread outbox", () => {
     const removalCause = new Error("remove failed");
     let failRemoval = true;
     const storage: ThreadOutboxStorage = {
-      load: async () => [...stored.values()],
+      load: async () => ({ messages: [...stored.values()], errors: [] }),
       write: async (message) => {
         stored.set(message.messageId, message);
       },
 @@ -501,7 +628,7 @@ describe("thread outbox", () => {
     const manager = createThreadOutboxManager({
       registry,
       storage: {
-        load: async () => [],
+        load: async () => ({ messages: [], errors: [] }),
         write: async () => writeBlocked,
         remove: async () => undefined,
       },
 @@ -530,7 +657,7 @@ describe("thread outbox", () => {
     const manager = createThreadOutboxManager({
       registry,
       storage: {
-        load: async () => [],
+        load: async () => ({ messages: [], errors: [] }),
         write: async () => {
           throw writeCause;
         },
 @@ -561,7 +688,7 @@ describe("thread outbox", () => {
     const manager = createThreadOutboxManager({
       registry,
       storage: {
-        load: async () => [],
+        load: async () => ({ messages: [], errors: [] }),
         write: async () => {
           throw new Error("disk full");
         },
 @@ -593,7 +720,7 @@ describe("thread outbox", () => {
     const manager = createThreadOutboxManager({
       registry,
       storage: {
-        load: async () => [],
+        load: async () => ({ messages: [], errors: [] }),
         write: async () => {
           if (failNextWrite) {
             failNextWrite = false;
 @@ -630,7 +757,7 @@ describe("thread outbox", () => {
     const manager = createThreadOutboxManager({
       registry,
       storage: {
-        load: async () => [],
+        load: async () => ({ messages: [], errors: [] }),
         write: async () => undefined,
         remove: async () => undefined,
       },
 @@ -654,7 +781,7 @@ describe("thread outbox", () => {
     const registry = AtomRegistry.make();
     const stored = new Map<MessageId, QueuedThreadMessage>();
     const storage: ThreadOutboxStorage = {
-      load: async () => [...stored.values()],
+      load: async () => ({ messages: [...stored.values()], errors: [] }),
       write: async (message) => {
         stored.set(message.messageId, message);
       },
 @@ -689,7 +816,7 @@ describe("thread outbox", () => {
     const manager = createThreadOutboxManager({
       registry,
       storage: {
-        load: async () => [],
+        load: async () => ({ messages: [], errors: [] }),
         write: async (message) => {
           writes.push(message.text);
         },
 @@ -733,7 +860,7 @@ describe("thread outbox", () => {
     const manager = createThreadOutboxManager({
       registry,
       storage: {
-        load: async () => [],
+        load: async () => ({ messages: [], errors: [] }),
         write: async (message) => {
           writes.push(message.text);
           if (message.text === "stale upload") {
 @@ -777,7 +904,7 @@ describe("thread outbox", () => {
     const manager = createThreadOutboxManager({
       registry,
       storage: {
-        load: async () => [...stored.values()],
+        load: async () => ({ messages: [...stored.values()], errors: [] }),
         write: async (message) => {
           stored.set(message.messageId, message);
         },
 @@ -826,7 +953,7 @@ describe("thread outbox", () => {
     const manager = createThreadOutboxManager({
       registry,
       storage: {
-        load: async () => [...stored.values()],
+        load: async () => ({ messages: [...stored.values()], errors: [] }),
         write: async (message) => {
           if (message === retried) {
             replacementWriteStarted.resolve();
 @@ -876,7 +1003,7 @@ describe("thread outbox", () => {
     const manager = createThreadOutboxManager({
       registry,
       storage: {
-        load: async () => [...stored.values()],
+        load: async () => ({ messages: [...stored.values()], errors: [] }),
         write: async (message) => {
           stored.set(message.messageId, message);
         },
 @@ -915,7 +1042,7 @@ describe("thread outbox", () => {
     const manager = createThreadOutboxManager({
       registry,
       storage: {
-        load: async () => [...stored.values()],
+        load: async () => ({ messages: [...stored.values()], errors: [] }),
         write: async (message) => {
           stored.set(message.messageId, message);
         },
 @@ -979,7 +1106,7 @@ describe("thread outbox", () => {
     const manager = createThreadOutboxManager({
       registry,
       storage: {
-        load: async () => [...stored.values()],
+        load: async () => ({ messages: [...stored.values()], errors: [] }),
         write: async (message) => {
           stored.set(message.messageId, message);
         },
 @@ -1022,7 +1149,7 @@ describe("thread outbox", () => {
     const manager = createThreadOutboxManager({
       registry,
       storage: {
-        load: async () => [...stored.values()],
+        load: async () => ({ messages: [...stored.values()], errors: [] }),
         write: async (message) => {
           stored.set(message.messageId, message);
         },

apps/mobile/src/state/thread-outbox.ts-4

 @@ -21,10 +21,6 @@ export async function flushThreadOutbox(): Promise<void> {
   await flushThreadOutboxWrites();
 }
-export function ensureThreadOutboxLoaded(): void {
-  void threadOutboxManager.load();
-}
 export function enqueueThreadOutboxMessage(message: QueuedThreadMessage): Promise<void> {
   return threadOutboxManager.enqueue(message);
 }

apps/mobile/src/state/use-composer-drafts.test.ts+86-1

...	@@ -1748,7 +1748,92 @@ describe("mobile composer drafts", () => {	...	@@ -1748,7 +1748,92 @@ describe("mobile composer drafts", () => {
1748	expect(composerAttachmentCleanupMocks.remove.mock.calls).toEqual([[first.fileUri]]);	1748	expect(composerAttachmentCleanupMocks.remove.mock.calls).toEqual([[first.fileUri]]);
1749	});	1749	});
1750		1750
1751	// Uses a fresh module instance (hydration is one-shot), so it stays last.	1751	// These final tests use fresh module instances for independent hydration.
		1752	it("keeps attachment files and uploads after a recovered message leaves an incomplete outbox", async () => {
		1753	vi.resetModules();
		1754	const drafts = await import("./use-composer-drafts");
		1755	const { threadOutboxManager: manager } = await import("./thread-outbox");
		1756	const { expoThreadOutboxStorage: storage, ThreadOutboxStorageError } =
		1757	await import("./thread-outbox-storage");
		1758	const { removeThreadOutboxMessage } = await import("./thread-outbox-removal");
		1759	const { appAtomRegistry: registry } = await import("./atom-registry");
		1760	onTestFinished(() => registry.dispose());
		1761	const warning = vi.spyOn(console, "warn").mockImplementation(() => {});
		1762	onTestFinished(() => warning.mockRestore());
		1763	const file = {
		1764	id: "file-partial-outbox",
		1765	type: "file" as const,
		1766	name: "shared.pdf",
		1767	mimeType: "application/pdf",
		1768	sizeBytes: 42,
		1769	fileUri: "file:///documents/t3-composer-attachments/shared.pdf",
		1770	uploadEnvironmentId: EnvironmentId.make("environment-1"),
		1771	uploadedAttachmentId: "pending-partial-outbox",
		1772	};
		1773	const readable = {
		1774	environmentId: EnvironmentId.make("environment-1"),
		1775	threadId: ThreadId.make("thread-1"),
		1776	messageId: MessageId.make("message-readable"),
		1777	commandId: CommandId.make("command-readable"),
		1778	text: "Send the readable message",
		1779	attachments: [file],
		1780	createdAt: "2026-09-04T00:00:00.000Z",
		1781	};
		1782	const saved = new Map([[readable.messageId, readable]]);
		1783	let unreadable = true;
		1784	const load = vi.spyOn(storage, "load").mockImplementation(async () => ({
		1785	messages: [...saved.values()],
		1786	errors: unreadable
		1787	? [
		1788	new ThreadOutboxStorageError({
		1789	operation: "read-message",
		1790	environmentId: null,
		1791	threadId: null,
		1792	messageId: null,
		1793	fileName: "unreadable.json",
		1794	cause: new Error("unreadable record"),
		1795	}),
		1796	]
		1797	: [],
		1798	}));
		1799	const remove = vi.spyOn(storage, "remove").mockImplementation(async (message) => {
		1800	saved.delete(message.messageId);
		1801	});
		1802	onTestFinished(() => {
		1803	load.mockRestore();
		1804	remove.mockRestore();
		1805	});
		1806
		1807	await expect(manager.load()).resolves.toBe(false);
		1808	await expect(manager.confirmQueued(readable)).resolves.toBe(true);
		1809	await expect(removeThreadOutboxMessage(readable)).resolves.toBe(true);
		1810	await drafts.releaseUnusedComposerAttachmentFiles([file]);
		1811	expect(registry.get(manager.queuedMessagesByThreadKeyAtom)).toEqual({});
		1812	expect(composerAttachmentCleanupMocks.remove).not.toHaveBeenCalled();
		1813	expect(composerAttachmentCleanupMocks.releaseUploads).not.toHaveBeenCalled();
		1814
		1815	const recovered = {
		1816	...readable,
		1817	environmentId: EnvironmentId.make("environment-2"),
		1818	messageId: MessageId.make("message-recovered"),
		1819	commandId: CommandId.make("command-recovered"),
		1820	};
		1821	saved.set(recovered.messageId, recovered);
		1822	unreadable = false;
		1823	await expect(manager.load()).resolves.toBe(true);
		1824	await drafts.releaseUnusedComposerAttachmentFiles([file]);
		1825	expect(composerAttachmentCleanupMocks.remove).not.toHaveBeenCalled();
		1826	expect(composerAttachmentCleanupMocks.releaseUploads).not.toHaveBeenCalled();
		1827
		1828	await removeThreadOutboxMessage(recovered);
		1829	await drafts.releaseUnusedComposerAttachmentFiles([file]);
		1830	expect(composerAttachmentCleanupMocks.remove).toHaveBeenCalledWith(file.fileUri);
		1831	expect(composerAttachmentCleanupMocks.releaseUploads).toHaveBeenCalledWith(
		1832	file.uploadEnvironmentId,
		1833	[file.uploadedAttachmentId],
		1834	);
		1835	});
		1836
1752	it("hydrates persisted drafts before a cold-start sweep deletes their files", async () => {	1837	it("hydrates persisted drafts before a cold-start sweep deletes their files", async () => {
1753	const file = {	1838	const file = {
1754	id: "file-cold-start",	1839	id: "file-cold-start",

apps/mobile/src/state/use-thread-outbox-drain.test.ts+3-9

...	@@ -54,6 +54,8 @@ const harness = vi.hoisted(() => ({	...	@@ -54,6 +54,8 @@ const harness = vi.hoisted(() => ({
54	})(),	54	})(),
55	}));	55	}));
56		56
		57	vi.mock("react-native", () => ({ Alert: { alert: vi.fn() } }));
		58
57	vi.mock("expo-file-system", () => ({	59	vi.mock("expo-file-system", () => ({
58	Directory: harness.draftFile.Directory,	60	Directory: harness.draftFile.Directory,
59	File: harness.draftFile.File,	61	File: harness.draftFile.File,
...	@@ -113,7 +115,7 @@ vi.mock("./thread-outbox", async () => {	...	@@ -113,7 +115,7 @@ vi.mock("./thread-outbox", async () => {
113	harness.manager = createThreadOutboxManager({	115	harness.manager = createThreadOutboxManager({
114	registry: appAtomRegistry,	116	registry: appAtomRegistry,
115	storage: {	117	storage: {
116	load: async () => [],	118	load: async () => ({ messages: [], errors: [] }),
117	write: async () => undefined,	119	write: async () => undefined,
118	remove: (message) => harness.removeOutboxMessage(message),	120	remove: (message) => harness.removeOutboxMessage(message),
119	},	121	},
...	@@ -122,7 +124,6 @@ vi.mock("./thread-outbox", async () => {	...	@@ -122,7 +124,6 @@ vi.mock("./thread-outbox", async () => {
122	return {	124	return {
123	threadOutboxManager: manager,	125	threadOutboxManager: manager,
124	flushThreadOutbox: async () => undefined,	126	flushThreadOutbox: async () => undefined,
125	ensureThreadOutboxLoaded: () => undefined,
126	confirmThreadOutboxMessageQueued: (message: never) => manager.confirmQueued(message),	127	confirmThreadOutboxMessageQueued: (message: never) => manager.confirmQueued(message),
127	updateThreadOutboxMessage: (message: never, expectedRevision?: number) =>	128	updateThreadOutboxMessage: (message: never, expectedRevision?: number) =>
128	manager.update(message, expectedRevision),	129	manager.update(message, expectedRevision),
...	@@ -219,7 +220,6 @@ describe("thread outbox attachment preparation", () => {	...	@@ -219,7 +220,6 @@ describe("thread outbox attachment preparation", () => {
219	);	220	);
220	const preparationStarted = Promise.withResolvers<void>();	221	const preparationStarted = Promise.withResolvers<void>();
221	const preparationBarrier = Promise.withResolvers<PreparedTurnAttachments>();	222	const preparationBarrier = Promise.withResolvers<PreparedTurnAttachments>();
222	const releaseUploads = vi.fn(async () => undefined);
223	harness.prepareTurnAttachments.mockImplementationOnce(async () => {	223	harness.prepareTurnAttachments.mockImplementationOnce(async () => {
224	preparationStarted.resolve();	224	preparationStarted.resolve();
225	return preparationBarrier.promise;	225	return preparationBarrier.promise;
...	@@ -237,12 +237,10 @@ describe("thread outbox attachment preparation", () => {	...	@@ -237,12 +237,10 @@ describe("thread outbox attachment preparation", () => {
237	attachments: [],	237	attachments: [],
238	draftAttachments: message.attachments,	238	draftAttachments: message.attachments,
239	pendingAttachmentIds: ["pending-reused-upload"],	239	pendingAttachmentIds: ["pending-reused-upload"],
240	releaseUploads,
241	});	240	});
242		241
243	await expect(preparation).resolves.toEqual({ status: "abandoned" });	242	await expect(preparation).resolves.toEqual({ status: "abandoned" });
244	expect(remainingMessages()).toEqual([edited]);	243	expect(remainingMessages()).toEqual([edited]);
245	expect(releaseUploads).not.toHaveBeenCalled();
246	});	244	});
247		245
248	it("keeps an unchanged queued payload ready after attachment reuse", async () => {	246	it("keeps an unchanged queued payload ready after attachment reuse", async () => {
...	@@ -254,13 +252,11 @@ describe("thread outbox attachment preparation", () => {	...	@@ -254,13 +252,11 @@ describe("thread outbox attachment preparation", () => {
254	}),	252	}),
255	"pending-reused-upload",	253	"pending-reused-upload",
256	);	254	);
257	const releaseUploads = vi.fn(async () => undefined);
258	harness.prepareTurnAttachments.mockResolvedValueOnce({	255	harness.prepareTurnAttachments.mockResolvedValueOnce({
259	status: "ready",	256	status: "ready",
260	attachments: [],	257	attachments: [],
261	draftAttachments: message.attachments,	258	draftAttachments: message.attachments,
262	pendingAttachmentIds: ["pending-reused-upload"],	259	pendingAttachmentIds: ["pending-reused-upload"],
263	releaseUploads,
264	});	260	});
265	await harness.manager.enqueue(message);	261	await harness.manager.enqueue(message);
266	const revision = harness.manager.revisionOf(message.messageId);	262	const revision = harness.manager.revisionOf(message.messageId);
...	@@ -271,7 +267,6 @@ describe("thread outbox attachment preparation", () => {	...	@@ -271,7 +267,6 @@ describe("thread outbox attachment preparation", () => {
271	persistedMessage: message,	267	persistedMessage: message,
272	deliveryRevision: revision,	268	deliveryRevision: revision,
273	});	269	});
274	expect(releaseUploads).not.toHaveBeenCalled();
275	});	270	});
276		271
277	it("uses the known next revision after persisting uploaded references", async () => {	272	it("uses the known next revision after persisting uploaded references", async () => {
...	@@ -296,7 +291,6 @@ describe("thread outbox attachment preparation", () => {	...	@@ -296,7 +291,6 @@ describe("thread outbox attachment preparation", () => {
296	attachments: [],	291	attachments: [],
297	draftAttachments: uploadedAttachments,	292	draftAttachments: uploadedAttachments,
298	pendingAttachmentIds: ["pending-new-upload"],	293	pendingAttachmentIds: ["pending-new-upload"],
299	releaseUploads: async () => undefined,
300	};	294	};
301	});	295	});
302	await harness.manager.enqueue(message);	296	await harness.manager.enqueue(message);

apps/mobile/src/state/use-thread-outbox-drain.ts+16-15

 @@ -15,6 +15,7 @@ import { buildTemporaryWorktreeBranchName } from "@t3tools/shared/git";
 import * as Cause from "effect/Cause";
 import { AsyncResult } from "effect/unstable/reactivity";
 import { useCallback, useEffect, useRef, useState } from "react";
+import { Alert } from "react-native";
 import { scopedProjectKey, scopedThreadKey } from "../lib/scopedEntities";
 import { buildProjectThreadStartTurnInput } from "../lib/projectThreadStartTurn";
 @@ -26,7 +27,6 @@ import { useProjects, useServerConfigs, useThreadShells } from "./entities";
 import { serverEnvironment } from "./server";
 import {
   confirmThreadOutboxMessageQueued,
-  ensureThreadOutboxLoaded,
   threadOutboxManager,
   threadOutboxRevision,
   updateThreadOutboxMessage,
 @@ -583,8 +583,21 @@ export function useThreadOutboxDrain(): void {
   );
   useEffect(() => {
-    ensureThreadOutboxLoaded();
+    let mounted = true;
+    const load = async () => {
+      if ((await threadOutboxManager.load()) || !mounted) return;
+      Alert.alert(
+        "Some queued messages could not be loaded",
+        "Unreadable records and attachment files are still saved. Other messages can still be sent.",
+        [
+          { text: "Dismiss", style: "cancel" },
+          { text: "Retry", onPress: () => void load() },
+        ],
+      );
+    };
+    void load();
     return () => {
+      mounted = false;
       for (const timer of retryTimersRef.current.values()) {
         clearTimeout(timer);
       }
 @@ -766,12 +779,6 @@ export function useThreadOutboxDrain(): void {
         (await completeQueuedMessageDelivery(persistedMessage, deliveryRevision)) === "removed";
       if (delivered) {
         acknowledgedExistingThreadMessageIdsRef.current.delete(persistedMessage.messageId);
-        // The delivered turn holds its own copy of the bytes. A failed delete
-        // is surfaced (never fails the delivered turn); the server also
-        // expires leaked pending uploads.
-        await prepared.releaseUploads().catch((error) => {
-          console.warn("[thread-outbox] could not delete consumed pending uploads", error);
-        });
       }
       return delivered;
     },
 @@ -904,13 +911,7 @@ export function useThreadOutboxDrain(): void {
         // payload as a duplicate creation. Hand it to the thread's composer.
         return recoverEditedCreationAfterDelivery(persistedMessage);
       }
-      if (outcome === "removed") {
+      return outcome === "removed";
-        await prepared.releaseUploads().catch((error) => {
-          console.warn("[thread-outbox] could not delete consumed pending uploads", error);
-        });
-        return true;
-      }
-      return false;
     },
     [makeDeliveryHelpers, restoreQueuedMessage, startTurn],
   );

apps/server/src/http.ts+9-7

 @@ -566,15 +566,20 @@ const handleStaticAndDevRequest = Effect.fn("handleStaticAndDevRequest")(
       }
     }
     const fileInfo = opened.info;
+    const mimeType = Mime.getType(filePath) ?? "application/octet-stream";
+    const isHtml = mimeType === "text/html";
     // A hash-like name is not enough: custom static files can use the same naming pattern.
     const relativePath = path.relative(staticRoot, filePath).replaceAll("\\", "/");
     const immutable =
-      /^assets\/.+-[\w-]{8}\.[^/]+$/.test(relativePath) && immutableBuildAssets.has(relativePath);
+      !isHtml &&
+      /^assets\/.+-[\w-]{8}\.[^/]+$/.test(relativePath) &&
+      immutableBuildAssets.has(relativePath);
     const headers: Record<string, string> = {
       "Cache-Control": immutable ? "public, max-age=31536000, immutable" : "no-cache",
     };
-    const modifiedAt = Option.getOrUndefined(fileInfo.mtime);
+    // Deployments can preserve HTML size and mtime while changing its bundle URLs.
+    const modifiedAt = isHtml ? undefined : Option.getOrUndefined(fileInfo.mtime);
     const etag = modifiedAt
       ? `W/"${fileInfo.size.toString(16)}-${modifiedAt.getTime().toString(16)}"`
       : undefined;
 @@ -599,17 +604,14 @@ const handleStaticAndDevRequest = Effect.fn("handleStaticAndDevRequest")(
         : ifModifiedSince !== undefined &&
           modifiedAt !== undefined &&
           Date.parse(modifiedAt.toUTCString()) <= Date.parse(ifModifiedSince);
-    if (unchanged) {
+    if (!isHtml && unchanged) {
       return HttpServerResponse.empty({
         status: 304,
         headers: { ...headers, Vary: "Accept-Encoding" },
       });
     }
-    const contentType =
+    const contentType = isHtml ? "text/html; charset=utf-8" : mimeType;
-      path.extname(filePath) === ".html"
-        ? "text/html; charset=utf-8"
-        : (Mime.getType(filePath) ?? "application/octet-stream");
     // The request scope closes the handle for GET, HEAD, 304, errors, and cancellation.
     // HEAD still passes through compression, which selects headers without reading the stream.
     return HttpServerResponse.stream(streamStaticFile(opened.file, fileInfo.size), {

apps/server/src/orchestration/LiveStreamBudget.ts+1-1

...	@@ -93,7 +93,7 @@ export const makeLiveStreamBudget = Effect.fn("makeLiveStreamBudget")(function*	...	@@ -93,7 +93,7 @@ export const makeLiveStreamBudget = Effect.fn("makeLiveStreamBudget")(function*
93	return Effect.succeed(item);	93	return Effect.succeed(item);
94	});	94	});
95		95
96	// Replace one coalescing batch atomically. Both raw and projected payloads	96	// Replace one coalescing batch atomically. Queued and coalesced payloads
97	// count against the same budget, and discarded updates release their charge.	97	// count against the same budget, and discarded updates release their charge.
98	const replace = <A extends object>(	98	const replace = <A extends object>(
99	previous: ReadonlyArray<RetainedLiveItem<unknown>>,	99	previous: ReadonlyArray<RetainedLiveItem<unknown>>,

apps/server/src/orchestration/ThreadLiveEventCoalescer.ts+3-2

...	@@ -130,7 +130,7 @@ export const makeThreadLiveEventCoalescer = Effect.fn("makeThreadLiveEventCoales	...	@@ -130,7 +130,7 @@ export const makeThreadLiveEventCoalescer = Effect.fn("makeThreadLiveEventCoales
130	pendingUpdates,	130	pendingUpdates,
131	coalesceLiveToolUpdatedEvents(pendingUpdates.map((item) => item.value)).map((event) => ({	131	coalesceLiveToolUpdatedEvents(pendingUpdates.map((item) => item.value)).map((event) => ({
132	kind: "event" as const,	132	kind: "event" as const,
133	event: projectActivityEvent(event),	133	event,
134	})),	134	})),
135	(item) => item.event,	135	(item) => item.event,
136	);	136	);
...	@@ -167,7 +167,8 @@ export const makeThreadLiveEventCoalescer = Effect.fn("makeThreadLiveEventCoales	...	@@ -167,7 +167,8 @@ export const makeThreadLiveEventCoalescer = Effect.fn("makeThreadLiveEventCoales
167	Effect.gen(function* () {	167	Effect.gen(function* () {
168	yield* budget.check;	168	yield* budget.check;
169	if (input.kind === "event") {	169	if (input.kind === "event") {
170	yield* budget.retain(input.event).pipe(	170	// Retain only the client payload, not full persisted tool output.
		171	yield* budget.retain(projectActivityEvent(input.event)).pipe(
171	Effect.tap((item) => Effect.sync(() => pendingUpdates.push(item))),	172	Effect.tap((item) => Effect.sync(() => pendingUpdates.push(item))),
172	Effect.uninterruptible,	173	Effect.uninterruptible,
173	);	174	);

apps/server/src/server.test.ts+153-15

...	@@ -1688,14 +1688,14 @@ it.layer(NodeServices.layer)("server router seam", (it) => {	...	@@ -1688,14 +1688,14 @@ it.layer(NodeServices.layer)("server router seam", (it) => {
1688	const fileSystem = yield* FileSystem.FileSystem;	1688	const fileSystem = yield* FileSystem.FileSystem;
1689	const path = yield* Path.Path;	1689	const path = yield* Path.Path;
1690	const staticDir = yield* fileSystem.makeTempDirectoryScoped({ prefix: "t3-static-cache-" });	1690	const staticDir = yield* fileSystem.makeTempDirectoryScoped({ prefix: "t3-static-cache-" });
1691	const indexPath = path.join(staticDir, "index.html");	1691	const assetPath = path.join(staticDir, "app.js");
1692	yield* fileSystem.writeFileString(indexPath, "<html>first build</html>");	1692	yield* fileSystem.writeFileString(assetPath, 'export const build = "first";');
1693	yield* buildAppUnderTest({ config: { staticDir } });	1693	yield* buildAppUnderTest({ config: { staticDir } });
1694		1694
1695	const initial = yield* HttpClient.get("/");	1695	const initial = yield* HttpClient.get("/app.js");
1696	assert.equal(initial.status, 200);	1696	assert.equal(initial.status, 200);
1697	assert.equal(initial.headers["cache-control"], "no-cache");	1697	assert.equal(initial.headers["cache-control"], "no-cache");
1698	assert.include(yield* initial.text, "first build");	1698	assert.include(yield* initial.text, "first");
1699	const etag = initial.headers.etag;	1699	const etag = initial.headers.etag;
1700	assert.isDefined(etag);	1700	assert.isDefined(etag);
1701	assert.isDefined(initial.headers["last-modified"]);	1701	assert.isDefined(initial.headers["last-modified"]);
...	@@ -1706,30 +1706,70 @@ it.layer(NodeServices.layer)("server router seam", (it) => {	...	@@ -1706,30 +1706,70 @@ it.layer(NodeServices.layer)("server router seam", (it) => {
1706	{ "if-none-match": "*" },	1706	{ "if-none-match": "*" },
1707	{ "if-modified-since": initial.headers["last-modified"]! },	1707	{ "if-modified-since": initial.headers["last-modified"]! },
1708	]) {	1708	]) {
1709	const response = yield* HttpClient.get("/", { headers });	1709	const response = yield* HttpClient.get("/app.js", { headers });
1710	assert.equal(response.status, 304);	1710	assert.equal(response.status, 304);
1711	assert.equal(response.headers.etag, etag);	1711	assert.equal(response.headers.etag, etag);
1712	assert.equal(response.headers["cache-control"], "no-cache");	1712	assert.equal(response.headers["cache-control"], "no-cache");
1713	assert.equal(yield* response.text, "");	1713	assert.equal(yield* response.text, "");
1714	}	1714	}
1715		1715
1716	const mismatched = yield* HttpClient.get("/", {	1716	const mismatched = yield* HttpClient.get("/app.js", {
1717	headers: {	1717	headers: {
1718	"if-none-match": '"another-build"',	1718	"if-none-match": '"another-build"',
1719	"if-modified-since": initial.headers["last-modified"]!,	1719	"if-modified-since": initial.headers["last-modified"]!,
1720	},	1720	},
1721	});	1721	});
1722	assert.equal(mismatched.status, 200);	1722	assert.equal(mismatched.status, 200);
1723	assert.include(yield* mismatched.text, "first build");	1723	assert.include(yield* mismatched.text, "first");
1724		1724
1725	yield* fileSystem.writeFileString(indexPath, "<html>the next build is available</html>");	1725	yield* fileSystem.writeFileString(assetPath, 'export const build = "the next build";');
1726	const changed = yield* HttpClient.get("/", { headers: { "if-none-match": etag! } });	1726	const changed = yield* HttpClient.get("/app.js", { headers: { "if-none-match": etag! } });
1727	assert.equal(changed.status, 200);	1727	assert.equal(changed.status, 200);
1728	assert.notEqual(changed.headers.etag, etag);	1728	assert.notEqual(changed.headers.etag, etag);
1729	assert.include(yield* changed.text, "next build");	1729	assert.include(yield* changed.text, "next build");
1730	}).pipe(Effect.provide(NodeHttpServer.layerTest)),	1730	}).pipe(Effect.provide(NodeHttpServer.layerTest)),
1731	);	1731	);
1732		1732
		1733	it.effect("serves changed HTML with the same size and timestamp", () =>
		1734	Effect.gen(function* () {
		1735	const fileSystem = yield* FileSystem.FileSystem;
		1736	const path = yield* Path.Path;
		1737	const staticDir = yield* fileSystem.makeTempDirectoryScoped({ prefix: "t3-static-html-" });
		1738	const indexPath = path.join(staticDir, "index.html");
		1739	const modifiedAt = DateTime.toDateUtc(DateTime.makeUnsafe("1985-10-26T08:15:00.000Z"));
		1740	yield* fileSystem.writeFileString(indexPath, "<html>old build</html>");
		1741	yield* fileSystem.utimes(indexPath, modifiedAt, modifiedAt);
		1742	yield* buildAppUnderTest({ config: { staticDir } });
		1743
		1744	const initial = yield* HttpClient.get("/");
		1745	assert.equal(yield* initial.text, "<html>old build</html>");
		1746	const previousEtag = initial.headers.etag ?? '"previous-html"';
		1747	const nextHtml = "<html>new build</html>";
		1748	yield* fileSystem.writeFileString(indexPath, nextHtml);
		1749	yield* fileSystem.utimes(indexPath, modifiedAt, modifiedAt);
		1750
		1751	for (const [resource, headers] of [
		1752	["/", { "if-none-match": previousEtag }],
		1753	["/threads/example", { "if-modified-since": modifiedAt.toUTCString() }],
		1754	["/", { "if-none-match": "*" }],
		1755	] as const) {
		1756	const response = yield* HttpClient.get(resource, { headers });
		1757	assert.equal(response.status, 200);
		1758	assert.equal(yield* response.text, nextHtml);
		1759	assert.equal(response.headers["cache-control"], "no-cache");
		1760	assert.isUndefined(response.headers.etag);
		1761	assert.isUndefined(response.headers["last-modified"]);
		1762	}
		1763
		1764	const head = yield* HttpClient.head("/", {
		1765	headers: { "if-none-match": previousEtag, "accept-encoding": "identity" },
		1766	});
		1767	assert.equal(head.status, 200);
		1768	assert.equal(head.headers["content-length"], String(Buffer.byteLength(nextHtml)));
		1769	assert.equal(yield* head.text, "");
		1770	}).pipe(Effect.provide(NodeHttpServer.layerTest)),
		1771	);
		1772
1733	it.effect("caches hashed static assets without freezing mutable files or SPA fallbacks", () =>	1773	it.effect("caches hashed static assets without freezing mutable files or SPA fallbacks", () =>
1734	Effect.gen(function* () {	1774	Effect.gen(function* () {
1735	const fileSystem = yield* FileSystem.FileSystem;	1775	const fileSystem = yield* FileSystem.FileSystem;
...	@@ -1917,8 +1957,8 @@ it.layer(NodeServices.layer)("server router seam", (it) => {	...	@@ -1917,8 +1957,8 @@ it.layer(NodeServices.layer)("server router seam", (it) => {
1917	const fileSystem = yield* FileSystem.FileSystem;	1957	const fileSystem = yield* FileSystem.FileSystem;
1918	const path = yield* Path.Path;	1958	const path = yield* Path.Path;
1919	const staticDir = yield* fileSystem.makeTempDirectoryScoped({ prefix: "t3-static-close-" });	1959	const staticDir = yield* fileSystem.makeTempDirectoryScoped({ prefix: "t3-static-close-" });
1920	const filePath = path.join(staticDir, "index.html");	1960	const filePath = path.join(staticDir, "app.txt");
1921	const body = "<p>file content</p>".repeat(1024);	1961	const body = "file content\n".repeat(1024);
1922	yield* fileSystem.writeFileString(filePath, body);	1962	yield* fileSystem.writeFileString(filePath, body);
1923	const closed = yield* Queue.unbounded<FileSystem.File>();	1963	const closed = yield* Queue.unbounded<FileSystem.File>();
1924	const blocked = yield* Deferred.make<void>();	1964	const blocked = yield* Deferred.make<void>();
...	@@ -1963,14 +2003,14 @@ it.layer(NodeServices.layer)("server router seam", (it) => {	...	@@ -1963,14 +2003,14 @@ it.layer(NodeServices.layer)("server router seam", (it) => {
1963	Effect.provideService(FileSystem.FileSystem, trackedFileSystem),	2003	Effect.provideService(FileSystem.FileSystem, trackedFileSystem),
1964	);	2004	);
1965		2005
1966	const get = yield* HttpClient.get("/");	2006	const get = yield* HttpClient.get("/app.txt");
1967	assert.equal(yield* get.text, body);	2007	assert.equal(yield* get.text, body);
1968	yield* Queue.take(closed);	2008	yield* Queue.take(closed);
1969	assert.equal(active.size, 0);	2009	assert.equal(active.size, 0);
1970	assert.isAbove(bodyReads, 0);	2010	assert.isAbove(bodyReads, 0);
1971	const readsAfterGet = bodyReads;	2011	const readsAfterGet = bodyReads;
1972		2012
1973	const head = yield* HttpClient.head("/", { headers: { "accept-encoding": "gzip" } });	2013	const head = yield* HttpClient.head("/app.txt", { headers: { "accept-encoding": "gzip" } });
1974	assert.equal(head.status, 200);	2014	assert.equal(head.status, 200);
1975	assert.equal(head.headers["content-encoding"], "gzip");	2015	assert.equal(head.headers["content-encoding"], "gzip");
1976	assert.equal(yield* head.text, "");	2016	assert.equal(yield* head.text, "");
...	@@ -1978,7 +2018,7 @@ it.layer(NodeServices.layer)("server router seam", (it) => {	...	@@ -1978,7 +2018,7 @@ it.layer(NodeServices.layer)("server router seam", (it) => {
1978	assert.equal(active.size, 0);	2018	assert.equal(active.size, 0);
1979	assert.equal(bodyReads, readsAfterGet);	2019	assert.equal(bodyReads, readsAfterGet);
1980		2020
1981	const unchanged = yield* HttpClient.get("/", {	2021	const unchanged = yield* HttpClient.get("/app.txt", {
1982	headers: { "if-none-match": get.headers.etag! },	2022	headers: { "if-none-match": get.headers.etag! },
1983	});	2023	});
1984	assert.equal(unchanged.status, 304);	2024	assert.equal(unchanged.status, 304);
...	@@ -1987,7 +2027,7 @@ it.layer(NodeServices.layer)("server router seam", (it) => {	...	@@ -1987,7 +2027,7 @@ it.layer(NodeServices.layer)("server router seam", (it) => {
1987	assert.equal(bodyReads, readsAfterGet);	2027	assert.equal(bodyReads, readsAfterGet);
1988		2028
1989	blockAfterOpen = true;	2029	blockAfterOpen = true;
1990	const cancelled = yield* HttpClient.get("/").pipe(Effect.forkChild);	2030	const cancelled = yield* HttpClient.get("/app.txt").pipe(Effect.forkChild);
1991	yield* Deferred.await(blocked);	2031	yield* Deferred.await(blocked);
1992	assert.equal(active.size, 1);	2032	assert.equal(active.size, 1);
1993	yield* Fiber.interrupt(cancelled);	2033	yield* Fiber.interrupt(cancelled);
...	@@ -7866,6 +7906,104 @@ it.layer(NodeServices.layer)("server router seam", (it) => {	...	@@ -7866,6 +7906,104 @@ it.layer(NodeServices.layer)("server router seam", (it) => {
7866	}).pipe(Effect.provide(NodeHttpServer.layerTest)),	7906	}).pipe(Effect.provide(NodeHttpServer.layerTest)),
7867	);	7907	);
7868		7908
		7909	for (const subscription of ["thread", "shell"] as const) {
		7910	it.effect("delivers large raw tool results through the " + subscription + " stream", () =>
		7911	Effect.gen(function* () {
		7912	const eventThreadId =
		7913	subscription === "thread" ? defaultThreadId : ThreadId.make("other-live-thread");
		7914	const thread = makeDefaultOrchestrationReadModel().threads[0]!;
		7915	const baseEvent = makeLiveToolActivityEvent(2, "tool.completed");
		7916	const event: OrchestrationEvent = {
		7917	...baseEvent,
		7918	aggregateId: eventThreadId,
		7919	payload: {
		7920	threadId: eventThreadId,
		7921	activity: {
		7922	...baseEvent.payload.activity,
		7923	summary: "Build complete",
		7924	payload: {
		7925	itemType: "command_execution",
		7926	toolCallId: "call-build",
		7927	status: "completed",
		7928	title: "Build complete",
		7929	data: {
		7930	item: {
		7931	command: "build",
		7932	aggregatedOutput: "Build complete\n" + "x".repeat(9 * 1024 * 1024),
		7933	},
		7934	},
		7935	},
		7936	},
		7937	},
		7938	};
		7939	yield* buildAppUnderTest({
		7940	layers: {
		7941	orchestrationEngine: {
		7942	streamDomainEvents: Stream.concat(Stream.make(event), Stream.never),
		7943	},
		7944	projectionSnapshotQuery: {
		7945	getThreadDetailSnapshot: () =>
		7946	Effect.succeed(Option.some({ snapshotSequence: 1, thread })),
		7947	getThreadShellById: (threadId) =>
		7948	Effect.succeed(
		7949	Option.some({
		7950	...makeDefaultOrchestrationThreadShell(),
		7951	id: threadId,
		7952	title: "Build complete",
		7953	}),
		7954	),
		7955	},
		7956	},
		7957	});
		7958
		7959	const wsUrl = yield* getWsServerUrl("/ws");
		7960	const items =
		7961	subscription === "thread"
		7962	? yield* Effect.scoped(
		7963	withWsRpcClient(wsUrl, (client) =>
		7964	client[ORCHESTRATION_WS_METHODS.subscribeThread]({
		7965	threadId: defaultThreadId,
		7966	requestCompletionMarker: true,
		7967	}).pipe(
		7968	Stream.takeUntil((item) => item.kind === "synchronized"),
		7969	Stream.runCollect,
		7970	),
		7971	),
		7972	)
		7973	: yield* Effect.scoped(
		7974	withWsRpcClient(wsUrl, (client) =>
		7975	client[ORCHESTRATION_WS_METHODS.subscribeShell]({
		7976	requestCompletionMarker: true,
		7977	}).pipe(
		7978	Stream.takeUntil((item) => item.kind === "synchronized"),
		7979	Stream.runCollect,
		7980	),
		7981	),
		7982	);
		7983
		7984	assert.equal(items[0]?.kind, "snapshot");
		7985	const update = items[1];
		7986	if (subscription === "thread") {
		7987	assertTrue(update?.kind === "event" && update.event.type === "thread.activity-appended");
		7988	assert.equal(update.event.sequence, 2);
		7989	assert.deepEqual(update.event.payload.activity.payload, {
		7990	itemType: "command_execution",
		7991	toolCallId: "call-build",
		7992	status: "completed",
		7993	title: "Build complete",
		7994	data: { item: { command: "build", aggregatedOutput: "Build complete" } },
		7995	});
		7996	} else {
		7997	assertTrue(update?.kind === "thread-upserted");
		7998	assert.equal(update.sequence, 2);
		7999	assert.equal(update.thread.id, eventThreadId);
		8000	assert.equal(update.thread.title, "Build complete");
		8001	}
		8002	assert.deepEqual(items[2], { kind: "synchronized" });
		8003	}).pipe(Effect.provide(NodeHttpServer.layerTest)),
		8004	);
		8005	}
		8006
7869	it.effect("coalesces buffered live tool updates to the latest state", () =>	8007	it.effect("coalesces buffered live tool updates to the latest state", () =>
7870	Effect.gen(function* () {	8008	Effect.gen(function* () {
7871	const thread = makeDefaultOrchestrationReadModel().threads[0]!;	8009	const thread = makeDefaultOrchestrationReadModel().threads[0]!;

apps/server/src/ws.ts+27-11

 @@ -38,7 +38,7 @@ import {
   OrchestrationSearchThreadsError,
   OrchestrationGetTurnDiffError,
   ORCHESTRATION_WS_METHODS,
-  type ProjectId,
+  ProjectId,
   type ProjectEntriesFailure,
   type ProjectFileFailure,
   type ProjectFileOperation,
 @@ -723,19 +723,33 @@ const makeWsRpcLayer = (
             });
       };
+      // Shell updates refetch the aggregate. Message and tool bodies are not needed.
+      const toShellEvent = ({
+        type,
+        aggregateKind,
+        aggregateId,
+        sequence,
+      }: OrchestrationEvent) => ({
+        type,
+        aggregateKind,
+        aggregateId,
+        sequence,
+      });
+      type ShellEvent = ReturnType<typeof toShellEvent>;
       const toShellStreamEvent = (
-        event: OrchestrationEvent,
+        event: ShellEvent,
       ): Effect.Effect<Option.Option<OrchestrationShellStreamEvent>, never, never> => {
         switch (event.type) {
           case "project.created":
           case "project.meta-updated":
-            return projectUpsertOrRemove(event.payload.projectId, event.sequence);
+            return projectUpsertOrRemove(ProjectId.make(event.aggregateId), event.sequence);
           case "project.deleted":
             return Effect.succeed(
               Option.some({
                 kind: "project-removed" as const,
                 sequence: event.sequence,
-                projectId: event.payload.projectId,
+                projectId: ProjectId.make(event.aggregateId),
               }),
             );
           case "thread.deleted":
 @@ -744,11 +758,11 @@ const makeWsRpcLayer = (
               Option.some({
                 kind: "thread-removed" as const,
                 sequence: event.sequence,
-                threadId: event.payload.threadId,
+                threadId: ThreadId.make(event.aggregateId),
               }),
             );
           case "thread.unarchived":
-            return threadUpsertOrRemove(event.payload.threadId, event.sequence);
+            return threadUpsertOrRemove(ThreadId.make(event.aggregateId), event.sequence);
           default:
             if (event.aggregateKind !== "thread") {
               return Effect.succeed(Option.none());
 @@ -862,13 +876,13 @@ const makeWsRpcLayer = (
       // item. The refetch runs with bounded concurrency (order-preserving).
       const SHELL_REFETCH_CONCURRENCY = 8;
       const coalesceShellEvents = (
-        events: ReadonlyArray<OrchestrationEvent>,
+        events: ReadonlyArray<ShellEvent>,
       ): Effect.Effect<ReadonlyArray<OrchestrationShellStreamEvent>, never, never> =>
         Effect.gen(function* () {
           if (events.length === 0) {
             return [];
           }
-          const latestByAggregate = new Map<string, OrchestrationEvent>();
+          const latestByAggregate = new Map<string, ShellEvent>();
           for (const event of events) {
             latestByAggregate.set(`${event.aggregateKind}:${event.aggregateId}`, event);
           }
 @@ -891,16 +905,17 @@ const makeWsRpcLayer = (
         stream: Stream.Stream<OrchestrationEvent, E, R>,
       ): Stream.Stream<OrchestrationShellStreamEvent, E, R> =>
         stream.pipe(
+          Stream.map(toShellEvent),
           Stream.groupedWithin(SHELL_COALESCE_MAX_CHUNK, SHELL_COALESCE_WINDOW),
           Stream.mapEffect(coalesceShellEvents),
           Stream.flatMap((items) => Stream.fromIterable(items)),
         );
       type ShellLiveInput =
-        | { readonly kind: "event"; readonly event: OrchestrationEvent }
+        | { readonly kind: "event"; readonly event: ShellEvent }
         | { readonly kind: "synchronized" };
-      // A completion marker is queued alongside raw live events so it cannot
+      // A completion marker is queued alongside live event metadata so it cannot
       // overtake an event still waiting in the coalescing window. Split each
       // batch at markers and coalesce only the event segments on either side.
       const coalesceShellLiveInputs = (
 @@ -908,7 +923,7 @@ const makeWsRpcLayer = (
       ): Effect.Effect<ReadonlyArray<OrchestrationShellStreamItem>, never, never> =>
         Effect.gen(function* () {
           const output: Array<OrchestrationShellStreamItem> = [];
-          let pendingEvents: Array<OrchestrationEvent> = [];
+          let pendingEvents: Array<ShellEvent> = [];
           for (const input of inputs) {
             if (input.kind === "event") {
 @@ -1430,6 +1445,7 @@ const makeWsRpcLayer = (
               );
               yield* Effect.forkScoped(
                 orchestrationEngine.streamDomainEvents.pipe(
+                  Stream.map(toShellEvent),
                   Stream.runForEach((event) =>
                     liveBudget.retain({ kind: "event" as const, event }, event).pipe(
                       Effect.flatMap((item) => Queue.offer(liveBuffer, item)),

apps/web/src/components/ChatMarkdown.test.tsx+44

...	@@ -104,6 +104,50 @@ describe("ChatMarkdown favicon privacy", () => {	...	@@ -104,6 +104,50 @@ describe("ChatMarkdown favicon privacy", () => {
104	});	104	});
105		105
106	describe("ChatMarkdown streaming", () => {	106	describe("ChatMarkdown streaming", () => {
		107	it("recovers highlighting after a failed fence changes without resetting its controls", async () => {
		108	const highlighter = await getSyntaxHighlighterPromise("text");
		109	const codeToHtml = highlighter.codeToHtml.bind(highlighter);
		110	let fail = true;
		111	vi.spyOn(highlighter, "codeToHtml").mockImplementation((...args) => {
		112	if (fail) throw new Error("Temporary highlighter failure");
		113	return codeToHtml(...args);
		114	});
		115	vi.spyOn(console, "error").mockImplementation(() => {});
		116	vi.spyOn(console, "warn").mockImplementation(() => {});
		117	vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
		118	let renderer: ReactTestRenderer \| undefined;
		119
		120	try {
		121	await act(async () => {
		122	renderer = create(
		123	<ChatMarkdown cwd="/tmp/project" text={"```text\ninitial\n```"} isStreaming />,
		124	);
		125	});
		126	const mounted = renderer!;
		127	const codeBlock = mounted.root.findByProps({ "data-language": "text" });
		128	const initialWrap = codeBlock.props["data-wrap"] === "true";
		129	const wrap = codeButton(mounted, initialWrap ? "Disable line wrap" : "Wrap lines");
		130	await act(async () => {
		131	wrap.onClick?.({} as Parameters<NonNullable<typeof wrap.onClick>>[0]);
		132	});
		133	expect(mounted.root.findAllByProps({ className: "chat-markdown-shiki" })).toHaveLength(0);
		134
		135	fail = false;
		136	await act(async () => {
		137	mounted.update(
		138	<ChatMarkdown cwd="/tmp/project" text={"```text\nrecovered\n```"} isStreaming />,
		139	);
		140	});
		141	expect(mounted.root.findAllByProps({ className: "chat-markdown-shiki" })).toHaveLength(1);
		142	expect(mounted.root.findByProps({ "data-language": "text" })).toBe(codeBlock);
		143	expect(codeBlock.props["data-wrap"]).toBe(String(!initialWrap));
		144	} finally {
		145	await act(async () => renderer?.unmount());
		146	vi.unstubAllGlobals();
		147	vi.restoreAllMocks();
		148	}
		149	});
		150
107	it("preserves code controls and details without highlighting an unchanged fence again", async () => {	151	it("preserves code controls and details without highlighting an unchanged fence again", async () => {
108	const highlighter = await getSyntaxHighlighterPromise("text");	152	const highlighter = await getSyntaxHighlighterPromise("text");
109	const highlight = vi.spyOn(highlighter, "codeToHtml");	153	const highlight = vi.spyOn(highlighter, "codeToHtml");

apps/web/src/components/ChatMarkdown.tsx+4-1

 @@ -2873,7 +2873,10 @@ const CHAT_MARKDOWN_COMPONENTS = {
         fenceTitle={fenceTitle}
         theme={resolvedTheme}
       >
-        <RenderErrorBoundary fallback={<pre {...props}>{children}</pre>}>
+        <RenderErrorBoundary
+          resetKeys={[codeBlock.code, language, diffThemeName, isStreaming]}
+          fallback={<pre {...props}>{children}</pre>}
+        >
           <Suspense fallback={<pre {...props}>{children}</pre>}>
             <SuspenseShikiCodeBlock
               className={codeBlock.className}

apps/web/src/components/DiffWorkerPoolProvider.tsx+78-30

...	@@ -1,7 +1,15 @@	...	@@ -1,7 +1,15 @@
1	import { WorkerPoolContextProvider, useWorkerPool } from "@pierre/diffs/react";	1	import { WorkerPoolContext, useWorkerPool } from "@pierre/diffs/react";
		2	import { WorkerPoolManager } from "@pierre/diffs/worker";
2	import DiffsWorker from "@pierre/diffs/worker/worker.js?worker";	3	import DiffsWorker from "@pierre/diffs/worker/worker.js?worker";
3	import * as Schema from "effect/Schema";	4	import * as Schema from "effect/Schema";
4	import { useEffect, useMemo, useState, type ReactNode } from "react";	5	import {
		6	useCallback,
		7	useEffect,
		8	useMemo,
		9	useState,
		10	useSyncExternalStore,
		11	type ReactNode,
		12	} from "react";
5	import { useTheme } from "../hooks/useTheme";	13	import { useTheme } from "../hooks/useTheme";
6	import { resolveDiffThemeName, type DiffThemeName } from "../lib/diffRendering";	14	import { resolveDiffThemeName, type DiffThemeName } from "../lib/diffRendering";
7	import { PREFERRED_HIGHLIGHTER } from "../lib/syntaxHighlighting";	15	import { PREFERRED_HIGHLIGHTER } from "../lib/syntaxHighlighting";
...	@@ -16,6 +24,46 @@ export class DiffWorkerError extends Schema.TaggedErrorClass<DiffWorkerError>()(	...	@@ -16,6 +24,46 @@ export class DiffWorkerError extends Schema.TaggedErrorClass<DiffWorkerError>()(
16	}	24	}
17	}	25	}
18		26
		27	const DIFF_WORKER_IDLE_TTL_MS = 30_000;
		28	let sharedWorkerPool:
		29	\| {
		30	readonly pool: WorkerPoolManager;
		31	consumers: number;
		32	idleTimer: ReturnType<typeof setTimeout> \| undefined;
		33	}
		34	\| undefined;
		35
		36	/** Create workers after a viewer commits, then reuse them across short panel closures. */
		37	function acquireDiffWorkerPool(themeName: DiffThemeName, poolSize: number) {
		38	const entry = (sharedWorkerPool ??= {
		39	pool: new WorkerPoolManager(
		40	{
		41	workerFactory: () => {
		42	try {
		43	return new DiffsWorker();
		44	} catch (cause) {
		45	throw new DiffWorkerError({ operation: "create-worker", themeName, cause });
		46	}
		47	},
		48	poolSize,
		49	totalASTLRUCacheSize: 240,
		50	},
		51	{
		52	theme: themeName,
		53	preferredHighlighter: PREFERRED_HIGHLIGHTER,
		54	tokenizeMaxLineLength: 1_000,
		55	useTokenTransformer: true,
		56	},
		57	),
		58	consumers: 0,
		59	idleTimer: undefined,
		60	});
		61	clearTimeout(entry.idleTimer);
		62	entry.idleTimer = undefined;
		63	entry.consumers += 1;
		64	return entry;
		65	}
		66
19	function DiffWorkerThemeSync({ themeName }: { themeName: DiffThemeName }) {	67	function DiffWorkerThemeSync({ themeName }: { themeName: DiffThemeName }) {
20	const workerPool = useWorkerPool();	68	const workerPool = useWorkerPool();
21		69
...	@@ -49,16 +97,17 @@ function DiffWorkerThemeSync({ themeName }: { themeName: DiffThemeName }) {	...	@@ -49,16 +97,17 @@ function DiffWorkerThemeSync({ themeName }: { themeName: DiffThemeName }) {
49	// Plain-text views do not queue a highlight task that could retry a blank first render.	97	// Plain-text views do not queue a highlight task that could retry a blank first render.
50	function DiffWorkerReady({ children }: { children?: ReactNode }) {	98	function DiffWorkerReady({ children }: { children?: ReactNode }) {
51	const workerPool = useWorkerPool();	99	const workerPool = useWorkerPool();
52	const [ready, setReady] = useState(	100	const [readyPool, setReadyPool] = useState<WorkerPoolManager>();
53	() => !workerPool \|\| workerPool.isInitialized() \|\| !workerPool.isWorkingPool(),	101	const ready = workerPool
54	);	102	? readyPool === workerPool \|\| workerPool.isInitialized() \|\| !workerPool.isWorkingPool()
		103	: typeof window === "undefined";
55		104
56	useEffect(() => {	105	useEffect(() => {
57	if (ready \|\| !workerPool) return;	106	if (ready \|\| !workerPool) return;
58		107
59	let mounted = true;	108	let mounted = true;
60	const finish = () => {	109	const finish = () => {
61	if (mounted) setReady(true);	110	if (mounted) setReadyPool(workerPool);
62	};	111	};
63	// Failed pools use Pierre's existing main-thread highlighter.	112	// Failed pools use Pierre's existing main-thread highlighter.
64	void workerPool.initialize().then(finish, finish);	113	void workerPool.initialize().then(finish, finish);
...	@@ -87,33 +136,32 @@ export function DiffWorkerPoolProvider({ children }: { children?: ReactNode }) {	...	@@ -87,33 +136,32 @@ export function DiffWorkerPoolProvider({ children }: { children?: ReactNode }) {
87	typeof navigator === "undefined" ? 4 : Math.max(1, navigator.hardwareConcurrency \|\| 4);	136	typeof navigator === "undefined" ? 4 : Math.max(1, navigator.hardwareConcurrency \|\| 4);
88	return Math.max(2, Math.min(6, Math.floor(cores / 2)));	137	return Math.max(2, Math.min(6, Math.floor(cores / 2)));
89	}, []);	138	}, []);
		139	const workerPool = useSyncExternalStore(
		140	useCallback(
		141	(onStoreChange) => {
		142	if (typeof window === "undefined") return () => {};
		143	const entry = acquireDiffWorkerPool(diffThemeName, workerPoolSize);
		144	onStoreChange();
		145	return () => {
		146	entry.consumers -= 1;
		147	if (entry.consumers !== 0) return;
		148	entry.idleTimer = setTimeout(() => {
		149	entry.idleTimer = undefined;
		150	entry.pool.terminate();
		151	if (sharedWorkerPool === entry) sharedWorkerPool = undefined;
		152	}, DIFF_WORKER_IDLE_TTL_MS);
		153	};
		154	},
		155	[diffThemeName, workerPoolSize],
		156	),
		157	() => sharedWorkerPool?.pool,
		158	() => undefined,
		159	);
90		160
91	return (	161	return (
92	<WorkerPoolContextProvider	162	<WorkerPoolContext value={workerPool}>
93	poolOptions={{
94	workerFactory: () => {
95	try {
96	return new DiffsWorker();
97	} catch (cause) {
98	throw new DiffWorkerError({
99	operation: "create-worker",
100	themeName: diffThemeName,
101	cause,
102	});
103	}
104	},
105	poolSize: workerPoolSize,
106	totalASTLRUCacheSize: 240,
107	}}
108	highlighterOptions={{
109	theme: diffThemeName,
110	preferredHighlighter: PREFERRED_HIGHLIGHTER,
111	tokenizeMaxLineLength: 1_000,
112	useTokenTransformer: true,
113	}}
114	>
115	<DiffWorkerThemeSync themeName={diffThemeName} />	163	<DiffWorkerThemeSync themeName={diffThemeName} />
116	<DiffWorkerReady>{children}</DiffWorkerReady>	164	<DiffWorkerReady>{children}</DiffWorkerReady>
117	</WorkerPoolContextProvider>	165	</WorkerPoolContext>
118	);	166	);
119	}	167	}

apps/web/src/components/RenderErrorBoundary.tsx+28-3

...	@@ -1,10 +1,35 @@	...	@@ -1,10 +1,35 @@
1	import { Component, type ReactNode } from "react";	1	import { Component, type ReactNode } from "react";
2		2
		3	interface RenderErrorBoundaryProps {
		4	readonly children: ReactNode;
		5	readonly fallback: ReactNode;
		6	readonly resetKeys?: ReadonlyArray<unknown>;
		7	}
		8
		9	interface RenderErrorBoundaryState {
		10	readonly failed: boolean;
		11	readonly resetKeys?: ReadonlyArray<unknown> \| undefined;
		12	}
		13
3	export class RenderErrorBoundary extends Component<	14	export class RenderErrorBoundary extends Component<
4	{ readonly children: ReactNode; readonly fallback: ReactNode },	15	RenderErrorBoundaryProps,
5	{ readonly failed: boolean }	16	RenderErrorBoundaryState
6	> {	17	> {
7	override state = { failed: false };	18	override state = { failed: false, resetKeys: this.props.resetKeys };
		19
		20	// Retry changed inputs without remounting healthy children or their controls.
		21	static getDerivedStateFromProps(
		22	{ resetKeys }: RenderErrorBoundaryProps,
		23	state: RenderErrorBoundaryState,
		24	) {
		25	if (
		26	resetKeys?.length !== state.resetKeys?.length \|\|
		27	resetKeys?.some((key, index) => !Object.is(key, state.resetKeys?.[index]))
		28	) {
		29	return { failed: false, resetKeys };
		30	}
		31	return null;
		32	}
8		33
9	static getDerivedStateFromError() {	34	static getDerivedStateFromError() {
10	return { failed: true };	35	return { failed: true };

apps/web/src/components/chat/ComposerActivityStatus.tsx+3-2

 @@ -1,12 +1,13 @@
 import { LoaderCircleIcon } from "lucide-react";
+import { observeVisibleAnimation } from "../../lib/visibleAnimation";
 import { threadSyncLabel, type ThreadSyncPhase } from "../../threadSync";
 import { ComposerBanner } from "./ComposerBanner";
 export function ComposerActivityRow({ phase }: { readonly phase: ThreadSyncPhase }) {
   return (
     <ComposerBanner.Row>
-      <ComposerBanner.Icon>
+      <ComposerBanner.Icon ref={observeVisibleAnimation}>
-        <LoaderCircleIcon />
+        <LoaderCircleIcon className="motion-safe:visible-animate-spin" />
       </ComposerBanner.Icon>
       <ComposerBanner.Content>
         <span

apps/web/src/components/chat/ComposerServerUpdateStatus.tsx+8-1

 @@ -2,6 +2,7 @@ import type { ServerUpdateState } from "@t3tools/client-runtime/state/server";
 import { CircleAlertIcon, DownloadIcon, LoaderCircleIcon } from "lucide-react";
 import { useId, useState } from "react";
+import { observeVisibleAnimation } from "../../lib/visibleAnimation";
 import { serverUpdateStageLabel } from "../ServerUpdateAction";
 import { Tooltip, TooltipPopup, TooltipTrigger } from "../ui/tooltip";
 import { ComposerBanner } from "./ComposerBanner";
 @@ -12,7 +13,13 @@ export function ComposerServerUpdateIcon({
   readonly status: ServerUpdateState["status"];
 }) {
   if (status === "running") {
-    return <LoaderCircleIcon aria-hidden />;
+    return (
+      <LoaderCircleIcon
+        aria-hidden
+        ref={observeVisibleAnimation}
+        className="motion-safe:visible-animate-spin"
+      />
+    );
   }
   if (status === "failed") {
     return <CircleAlertIcon aria-hidden className="text-error" />;

apps/web/src/components/chat/MessagesTimeline.tsx+45-8

 @@ -28,6 +28,7 @@ const NOOP_OPEN_ATTACHMENT = (_attachment: ChatFileAttachment) => {};
 import { resolveChatListAnchoredEndSpace } from "@t3tools/shared/chatList";
 import { toolActivityFaviconUrl } from "@t3tools/shared/favicon";
 import { getProjectFaviconCacheKey } from "@t3tools/shared/projectFavicon";
+import { observeVisibleAnimation } from "../../lib/visibleAnimation";
 import {
   createContext,
   Fragment,
 @@ -1652,12 +1653,21 @@ function WorkingTimelineRow({ row }: { row: Extract<TimelineRow, { kind: "workin
       <div className="flex h-6 min-w-0 items-baseline px-1 text-sm leading-relaxed text-muted-foreground tabular-nums">
         <span
           key={isPreparingWorktree ? "setup" : isCompacting ? "compacting" : "working"}
+          ref={isPreparingWorktree || isCompacting ? observeVisibleAnimation : undefined}
           className="relative shrink-0 overflow-hidden whitespace-nowrap transition-opacity duration-150 starting:opacity-0 motion-reduce:transition-none"
         >
           {isPreparingWorktree ? (
-            "Setting up worktree…"
+            <>
+              Setting up worktree…
+              <ActivityShimmerOverlay>Setting up worktree…</ActivityShimmerOverlay>
+            </>
           ) : isCompacting ? (
-            <CompactingLabel />
+            <>
+              <CompactingLabel />
+              <ActivityShimmerOverlay>
+                <CompactingLabel />
+              </ActivityShimmerOverlay>
+            </>
           ) : row.createdAt ? (
             <>
               Working for <WorkingTimer createdAt={row.createdAt} />
 @@ -1677,7 +1687,7 @@ function ThinkingTimelineRow() {
   return (
     <div className="min-h-7">
       {isPreparingWorktree || isCompacting ? null : (
-        <LiveActivityRow label="Thinking" iconName="brain" />
+        <LiveActivityRow label="Thinking" iconName="brain" active shimmer />
       )}
     </div>
   );
 @@ -1919,6 +1929,19 @@ function ExpandedWorkGroupEntries({
 const workEntryKey = (entry: TimelineWorkEntry) => entry.id;
+function ActivityShimmerOverlay({ children }: { children: ReactNode }) {
+  return (
+    <span
+      aria-hidden
+      className="live-activity-focus pointer-events-none absolute inset-y-0 select-none"
+    >
+      <span className="live-activity-focus-counter block">
+        <span className="live-activity-focus-aligned block text-foreground">{children}</span>
+      </span>
+    </span>
+  );
+}
 const failedToolIconClassName = "text-tool-error-icon/40";
 /** Image icons and the gradient computer-use mark cannot take a currentColor
 @@ -1936,23 +1959,35 @@ function LiveActivityRow({
   toolIcon,
   failed = false,
   active = false,
+  shimmer = false,
 }: {
   label: string;
   iconName?: WorkEntryIconName;
   toolIcon?: ToolActivityIcon | undefined;
   failed?: boolean;
   active?: boolean;
+  shimmer?: boolean;
 }) {
+  const animated = active && !failed;
+  const showShimmer = animated && shimmer;
   return (
-    <div className="min-h-6 w-fit max-w-full min-w-0 overflow-hidden rounded-md text-sm leading-relaxed">
+    <div
+      ref={animated ? observeVisibleAnimation : undefined}
+      className="relative min-h-6 w-fit max-w-full min-w-0 overflow-hidden rounded-md text-sm leading-relaxed"
+    >
       <LiveActivityContent
         label={label}
         iconName={iconName}
         toolIcon={toolIcon}
         failed={failed}
         announceFailure={failed}
-        active={active}
+        active={animated && !shimmer}
       />
+      {showShimmer ? (
+        <ActivityShimmerOverlay>
+          <LiveActivityContent label={label} iconName={iconName} toolIcon={toolIcon} highlighted />
+        </ActivityShimmerOverlay>
+      ) : null}
     </div>
   );
 }
 @@ -1964,6 +1999,7 @@ function LiveActivityContent({
   failed = false,
   announceFailure = false,
   active = false,
+  highlighted = false,
 }: {
   label: string;
   iconName: WorkEntryIconName | undefined;
 @@ -1971,6 +2007,7 @@ function LiveActivityContent({
   failed?: boolean;
   announceFailure?: boolean;
   active?: boolean;
+  highlighted?: boolean;
 }) {
   const showTrailingFailureMark =
     failed && iconName !== undefined && !toolIconAcceptsTint(iconName, toolIcon);
 @@ -1980,14 +2017,14 @@ function LiveActivityContent({
       className={cn(
         "flex min-h-6 min-w-0 items-center gap-1.5 py-0.5",
         iconName ? "px-0.5" : "px-1",
-        "text-secondary-label",
+        highlighted ? "text-foreground" : "text-secondary-label",
       )}
     >
       {iconName ? (
         <span
           className={cn(
             "flex size-6 shrink-0 items-center justify-center",
-            failed ? failedToolIconClassName : "text-icon-muted",
+            failed ? failedToolIconClassName : highlighted ? "text-foreground" : "text-icon-muted",
           )}
           role={announceFailure ? "img" : undefined}
           aria-label={announceFailure ? "Tool call failed" : undefined}
 @@ -1996,7 +2033,7 @@ function LiveActivityContent({
             icon={toolIcon}
             fallbackName={iconName}
             className="block size-4 shrink-0 stroke-[1.8]"
-            muted
+            muted={!highlighted}
           />
         </span>
       ) : null}

apps/web/src/components/diffs/StyledDiffCodeView.test.tsx+39-12

...	@@ -9,6 +9,7 @@ import { useWorkerPool, type CodeViewProps } from "@pierre/diffs/react";	...	@@ -9,6 +9,7 @@ import { useWorkerPool, type CodeViewProps } from "@pierre/diffs/react";
9	import { WorkerPoolManager, type WorkerRequest, type WorkerResponse } from "@pierre/diffs/worker";	9	import { WorkerPoolManager, type WorkerRequest, type WorkerResponse } from "@pierre/diffs/worker";
10	import {	10	import {
11	act,	11	act,
		12	StrictMode,
12	useEffect,	13	useEffect,
13	useImperativeHandle,	14	useImperativeHandle,
14	useLayoutEffect,	15	useLayoutEffect,
...	@@ -149,6 +150,14 @@ function Views({ count }: { count: number }) {	...	@@ -149,6 +150,14 @@ function Views({ count }: { count: number }) {
149	);	150	);
150	}	151	}
151		152
		153	function renderViews(count: number) {
		154	return (
		155	<StrictMode>
		156	<Views count={count} />
		157	</StrictMode>
		158	);
		159	}
		160
152	describe("StyledDiffCodeView", () => {	161	describe("StyledDiffCodeView", () => {
153	beforeEach(() => {	162	beforeEach(() => {
154	testState.codeViewClassName = null;	163	testState.codeViewClassName = null;
...	@@ -208,6 +217,7 @@ describe("code-view worker lifecycle", () => {	...	@@ -208,6 +217,7 @@ describe("code-view worker lifecycle", () => {
208	vi.stubGlobal("window", {});	217	vi.stubGlobal("window", {});
209	vi.stubGlobal("navigator", { hardwareConcurrency: 2 });	218	vi.stubGlobal("navigator", { hardwareConcurrency: 2 });
210	vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);	219	vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
		220	vi.useFakeTimers({ toFake: ["setTimeout", "clearTimeout"] });
211	vi.stubGlobal("requestAnimationFrame", (callback: FrameRequestCallback) =>	221	vi.stubGlobal("requestAnimationFrame", (callback: FrameRequestCallback) =>
212	setImmediate(() => callback(0)),	222	setImmediate(() => callback(0)),
213	);	223	);
...	@@ -226,14 +236,16 @@ describe("code-view worker lifecycle", () => {	...	@@ -226,14 +236,16 @@ describe("code-view worker lifecycle", () => {
226	afterEach(async () => {	236	afterEach(async () => {
227	await act(async () => renderer?.unmount());	237	await act(async () => renderer?.unmount());
228	renderer = undefined;	238	renderer = undefined;
		239	await vi.runOnlyPendingTimersAsync();
229	await Promise.all(testState.terminations);	240	await Promise.all(testState.terminations);
		241	vi.useRealTimers();
230	vi.restoreAllMocks();	242	vi.restoreAllMocks();
231	vi.unstubAllGlobals();	243	vi.unstubAllGlobals();
232	});	244	});
233		245
234	it("starts on demand, shares one pool, disposes the last view, and reopens without resetting siblings", async () => {	246	it("starts on demand, keeps quick reopens warm, and expires the last closed pool", async () => {
235	await act(async () => {	247	await act(async () => {
236	renderer = create(<Views count={0} />);	248	renderer = create(renderViews(0));
237	});	249	});
238	const mounted = renderer!;	250	const mounted = renderer!;
239	const button = mounted.root.findByType("button");	251	const button = mounted.root.findByType("button");
...	@@ -241,7 +253,7 @@ describe("code-view worker lifecycle", () => {	...	@@ -241,7 +253,7 @@ describe("code-view worker lifecycle", () => {
241	expect(testState.pools.size).toBe(0);	253	expect(testState.pools.size).toBe(0);
242	await act(async () => {	254	await act(async () => {
243	(button.props as { onClick(): void }).onClick();	255	(button.props as { onClick(): void }).onClick();
244	mounted.update(<Views count={1} />);	256	mounted.update(renderViews(1));
245	});	257	});
246	const pool = [...testState.pools.keys()][0]!;	258	const pool = [...testState.pools.keys()][0]!;
247	await act(async () => testState.pools.get(pool));	259	await act(async () => testState.pools.get(pool));
...	@@ -252,25 +264,39 @@ describe("code-view worker lifecycle", () => {	...	@@ -252,25 +264,39 @@ describe("code-view worker lifecycle", () => {
252	);	264	);
253	expect(testState.requests.filter((request) => request.type === "file")).toHaveLength(0);	265	expect(testState.requests.filter((request) => request.type === "file")).toHaveLength(0);
254		266
255	await act(async () => mounted.update(<Views count={2} />));	267	await act(async () => mounted.update(renderViews(2)));
256	await act(async () => pool.primeFileHighlightCache(files[1]!));	268	await act(async () => pool.primeFileHighlightCache(files[1]!));
257	expect(testState.pools.size).toBe(1);	269	expect(testState.pools.size).toBe(1);
258	expect(testState.workers).toHaveLength(2);	270	expect(testState.workers).toHaveLength(2);
259	expect(testState.renderPools).toEqual([pool, pool]);	271	expect(new Set(testState.renderPools)).toEqual(new Set([pool]));
260	expect(pool.getFileResultCache(files[1]!)).toBeDefined();	272	expect(pool.getFileResultCache(files[1]!)).toBeDefined();
261	expect(mounted.root.findByProps({ "data-code-file": "answer.ts" }).children.join("")).toContain(	273	expect(mounted.root.findByProps({ "data-code-file": "answer.ts" }).children.join("")).toContain(
262	"answer",	274	"answer",
263	);	275	);
264		276
265	await act(async () => mounted.update(<Views count={1} />));	277	await act(async () => mounted.update(renderViews(1)));
		278	expect(pool.getStats().totalWorkers).toBe(2);
		279	expect(testState.terminations).toHaveLength(0);
		280	await act(async () => mounted.update(renderViews(0)));
		281	await vi.advanceTimersByTimeAsync(29_999);
266	expect(pool.getStats().totalWorkers).toBe(2);	282	expect(pool.getStats().totalWorkers).toBe(2);
267	expect(testState.terminations).toHaveLength(0);	283	expect(testState.terminations).toHaveLength(0);
268	await act(async () => mounted.update(<Views count={0} />));	284
		285	await act(async () => mounted.update(renderViews(1)));
		286	expect(testState.pools.size).toBe(1);
		287	expect(testState.workers).toHaveLength(2);
		288	expect(mounted.root.findAllByProps({ role: "status" })).toHaveLength(0);
		289	expect(pool.getFileResultCache(files[1]!)).toBeDefined();
		290	await vi.advanceTimersByTimeAsync(30_000);
		291	expect(pool.getStats().totalWorkers).toBe(2);
		292
		293	await act(async () => mounted.update(renderViews(0)));
		294	await vi.advanceTimersByTimeAsync(30_000);
269	await Promise.all(testState.terminations);	295	await Promise.all(testState.terminations);
270	expect(pool.getStats().totalWorkers).toBe(0);	296	expect(pool.getStats().totalWorkers).toBe(0);
271	expect(testState.terminations).toHaveLength(2);	297	expect(testState.terminations).toHaveLength(2);
272		298
273	await act(async () => mounted.update(<Views count={1} />));	299	await act(async () => mounted.update(renderViews(1)));
274	const reopenedPool = [...testState.pools.keys()][1]!;	300	const reopenedPool = [...testState.pools.keys()][1]!;
275	await act(async () => testState.pools.get(reopenedPool));	301	await act(async () => testState.pools.get(reopenedPool));
276	expect(reopenedPool.isInitialized()).toBe(true);	302	expect(reopenedPool.isInitialized()).toBe(true);
...	@@ -285,7 +311,7 @@ describe("code-view worker lifecycle", () => {	...	@@ -285,7 +311,7 @@ describe("code-view worker lifecycle", () => {
285	it("renders through Pierre's main-thread fallback when worker creation fails", async () => {	311	it("renders through Pierre's main-thread fallback when worker creation fails", async () => {
286	testState.failWorkers = true;	312	testState.failWorkers = true;
287	await act(async () => {	313	await act(async () => {
288	renderer = create(<Views count={1} />);	314	renderer = create(renderViews(1));
289	});	315	});
290	const pool = [...testState.pools.keys()][0]!;	316	const pool = [...testState.pools.keys()][0]!;
291	await act(async () => {	317	await act(async () => {
...	@@ -309,7 +335,7 @@ describe("code-view worker lifecycle", () => {	...	@@ -309,7 +335,7 @@ describe("code-view worker lifecycle", () => {
309	testState.onInitializationHeld = resolve;	335	testState.onInitializationHeld = resolve;
310	});	336	});
311	await act(async () => {	337	await act(async () => {
312	renderer = create(<Views count={2} />);	338	renderer = create(renderViews(2));
313	});	339	});
314	const pool = [...testState.pools.keys()][0]!;	340	const pool = [...testState.pools.keys()][0]!;
315	const pending = testState.pools.get(pool)!;	341	const pending = testState.pools.get(pool)!;
...	@@ -319,10 +345,11 @@ describe("code-view worker lifecycle", () => {	...	@@ -319,10 +345,11 @@ describe("code-view worker lifecycle", () => {
319	expect(renderer!.root.findAllByProps({ role: "status" })).toHaveLength(2);	345	expect(renderer!.root.findAllByProps({ role: "status" })).toHaveLength(2);
320	expect(testState.renderPools).toHaveLength(0);	346	expect(testState.renderPools).toHaveLength(0);
321		347
322	await act(async () => renderer!.update(<Views count={1} />));	348	await act(async () => renderer!.update(renderViews(1)));
323	expect(pool.getStats().totalWorkers).toBe(2);	349	expect(pool.getStats().totalWorkers).toBe(2);
324	expect(testState.terminations).toHaveLength(0);	350	expect(testState.terminations).toHaveLength(0);
325	await act(async () => renderer!.update(<Views count={0} />));	351	await act(async () => renderer!.update(renderViews(0)));
		352	await vi.advanceTimersByTimeAsync(30_000);
326	await pending;	353	await pending;
327	await Promise.all(testState.terminations);	354	await Promise.all(testState.terminations);
328	await act(async () => {	355	await act(async () => {

apps/web/src/index.css+83

...	@@ -450,9 +450,92 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil	...	@@ -450,9 +450,92 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil
450	background-repeat: no-repeat;	450	background-repeat: no-repeat;
451	background-clip: text;	451	background-clip: text;
452	animation: live-tool-shine 2.2s steps(30) infinite;	452	animation: live-tool-shine 2.2s steps(30) infinite;
		453	animation-play-state: var(--visible-animation-state, paused);
453	}	454	}
454	}	455	}
455		456
		457	@utility visible-animate-spin {
		458	animation: var(--animate-spin);
		459	animation-play-state: var(--visible-animation-state, paused);
		460	will-change: var(--visible-animation-will-change, auto);
		461	}
		462
		463	@keyframes live-activity-focus {
		464	from {
		465	transform: translateX(0);
		466	}
		467	to {
		468	transform: translateX(100%);
		469	}
		470	}
		471
		472	@keyframes live-activity-focus-counter {
		473	from {
		474	transform: translateX(0);
		475	}
		476	to {
		477	transform: translateX(-100%);
		478	}
		479	}
		480
		481	@utility live-activity-focus {
		482	--live-activity-focus-width: 4.5rem;
		483
		484	right: auto;
		485	left: calc(-1 * var(--live-activity-focus-width));
		486	width: calc(100% + var(--live-activity-focus-width) + var(--live-activity-focus-width));
		487	-webkit-mask-image: linear-gradient(
		488	to right,
		489	transparent 0,
		490	rgb(0 0 0 / 12%) 0.675rem,
		491	rgb(0 0 0 / 55%) 1.575rem,
		492	black 2.25rem,
		493	rgb(0 0 0 / 55%) 2.925rem,
		494	rgb(0 0 0 / 12%) 3.825rem,
		495	transparent var(--live-activity-focus-width),
		496	transparent 100%
		497	);
		498	-webkit-mask-repeat: no-repeat;
		499	mask-image: linear-gradient(
		500	to right,
		501	transparent 0,
		502	rgb(0 0 0 / 12%) 0.675rem,
		503	rgb(0 0 0 / 55%) 1.575rem,
		504	black 2.25rem,
		505	rgb(0 0 0 / 55%) 2.925rem,
		506	rgb(0 0 0 / 12%) 3.825rem,
		507	transparent var(--live-activity-focus-width),
		508	transparent 100%
		509	);
		510	mask-repeat: no-repeat;
		511	animation: live-activity-focus 2.2s linear infinite;
		512	animation-play-state: var(--visible-animation-state, paused);
		513	will-change: var(--visible-animation-will-change, auto);
		514
		515	@media (prefers-reduced-motion: reduce), (forced-colors: active) {
		516	animation: none;
		517	opacity: 0;
		518	will-change: auto;
		519	}
		520	}
		521
		522	@utility live-activity-focus-counter {
		523	width: 100%;
		524	animation: live-activity-focus-counter 2.2s linear infinite;
		525	animation-play-state: var(--visible-animation-state, paused);
		526	will-change: var(--visible-animation-will-change, auto);
		527
		528	@media (prefers-reduced-motion: reduce), (forced-colors: active) {
		529	animation: none;
		530	will-change: auto;
		531	}
		532	}
		533
		534	@utility live-activity-focus-aligned {
		535	width: calc(100% - var(--live-activity-focus-width) - var(--live-activity-focus-width));
		536	margin-left: var(--live-activity-focus-width);
		537	}
		538
456	@property --assistant-citation-highlight-opacity {	539	@property --assistant-citation-highlight-opacity {
457	syntax: "<number>";	540	syntax: "<number>";
458	inherits: true;	541	inherits: true;

apps/web/src/lib/visibleAnimation.test.ts created+154

...	@@ -0,0 +1,154 @@
1	import { afterEach, beforeEach, describe, expect, it, vi } from "vite-plus/test";
2
3	import { observeVisibleAnimation } from "./visibleAnimation";
4
5	let page = Object.assign(new EventTarget(), { visibilityState: "visible" });
6	let motion = Object.assign(new EventTarget(), { matches: false });
7	let observers: TestIntersectionObserver[] = [];
8	let cleanups: Array<() => void> = [];
9
10	class TestIntersectionObserver {
11	constructor(private readonly callback: IntersectionObserverCallback) {
12	observers.push(this);
13	}
14
15	observe = vi.fn();
16	unobserve = vi.fn();
17	disconnect = vi.fn();
18
19	report(target: Element, isIntersecting: boolean) {
20	this.callback(
21	[{ target, isIntersecting } as IntersectionObserverEntry],
22	this as unknown as IntersectionObserver,
23	);
24	}
25	}
26
27	function animationElement() {
28	const properties = new Map<string, string>();
29	const element = {
30	style: { setProperty: (name: string, value: string) => properties.set(name, value) },
31	} as unknown as HTMLElement;
32	return {
33	element,
34	state: () => properties.get("--visible-animation-state"),
35	willChange: () => properties.get("--visible-animation-will-change"),
36	};
37	}
38
39	function attach(element: HTMLElement) {
40	const cleanup = observeVisibleAnimation(element);
41	if (cleanup) cleanups.push(cleanup);
42	return cleanup;
43	}
44
45	beforeEach(() => {
46	page = Object.assign(new EventTarget(), { visibilityState: "visible" });
47	motion = Object.assign(new EventTarget(), { matches: false });
48	observers = [];
49	cleanups = [];
50	vi.stubGlobal("document", page);
51	vi.stubGlobal("window", { matchMedia: () => motion });
52	vi.stubGlobal("IntersectionObserver", TestIntersectionObserver);
53	});
54
55	afterEach(() => {
56	for (const cleanup of cleanups) cleanup();
57	vi.unstubAllGlobals();
58	vi.restoreAllMocks();
59	});
60
61	describe("observeVisibleAnimation", () => {
62	it("runs only intersecting animations in a visible document with motion enabled", () => {
63	const first = animationElement();
64	const second = animationElement();
65	attach(first.element);
66	attach(second.element);
67	expect(first.state()).toBe("paused");
68
69	const observer = observers[0]!;
70	observer.report(first.element, true);
71	expect(first.state()).toBe("running");
72	expect(second.state()).toBe("paused");
73
74	page.visibilityState = "hidden";
75	page.dispatchEvent(new Event("visibilitychange"));
76	observer.report(second.element, true);
77	expect(first.state()).toBe("paused");
78	expect(first.willChange()).toBe("auto");
79	expect(second.state()).toBe("paused");
80
81	page.visibilityState = "visible";
82	page.dispatchEvent(new Event("visibilitychange"));
83	expect(first.state()).toBe("running");
84	expect(second.state()).toBe("running");
85
86	observer.report(first.element, false);
87	motion.matches = true;
88	motion.dispatchEvent(new Event("change"));
89	expect(first.state()).toBe("paused");
90	expect(second.state()).toBe("paused");
91
92	motion.matches = false;
93	motion.dispatchEvent(new Event("change"));
94	expect(first.state()).toBe("paused");
95	expect(second.state()).toBe("running");
96	});
97
98	it.each(["hidden", "reduced motion"])("starts paused with %s already active", (condition) => {
99	page.visibilityState = condition === "hidden" ? "hidden" : "visible";
100	motion.matches = condition === "reduced motion";
101	const animation = animationElement();
102	attach(animation.element);
103	observers[0]!.report(animation.element, true);
104	expect(animation.state()).toBe("paused");
105
106	page.visibilityState = "visible";
107	motion.matches = false;
108	page.dispatchEvent(new Event("visibilitychange"));
109	expect(animation.state()).toBe("running");
110	});
111
112	it("shares observers, releases the final ref, and ignores late callbacks after remount", () => {
113	const addVisibility = vi.spyOn(page, "addEventListener");
114	const removeVisibility = vi.spyOn(page, "removeEventListener");
115	const addMotion = vi.spyOn(motion, "addEventListener");
116	const removeMotion = vi.spyOn(motion, "removeEventListener");
117	const first = animationElement();
118	const second = animationElement();
119	const detachFirst = attach(first.element);
120	const detachSecond = attach(second.element);
121	expect(observers).toHaveLength(1);
122	expect(addVisibility).toHaveBeenCalledTimes(1);
123	expect(addMotion).toHaveBeenCalledTimes(1);
124
125	const previousObserver = observers[0]!;
126	detachFirst?.();
127	previousObserver.report(first.element, true);
128	expect(first.state()).toBe("paused");
129	expect(previousObserver.unobserve).toHaveBeenCalledWith(first.element);
130	expect(previousObserver.disconnect).not.toHaveBeenCalled();
131
132	detachSecond?.();
133	expect(previousObserver.disconnect).toHaveBeenCalledTimes(1);
134	expect(removeVisibility).toHaveBeenCalledTimes(1);
135	expect(removeMotion).toHaveBeenCalledTimes(1);
136
137	attach(second.element);
138	expect(observers).toHaveLength(2);
139	detachSecond?.();
140	previousObserver.report(second.element, true);
141	expect(second.state()).toBe("paused");
142	observers[1]!.report(second.element, true);
143	expect(second.state()).toBe("running");
144	});
145
146	it("keeps unknown visibility static when IntersectionObserver is unavailable", () => {
147	vi.stubGlobal("IntersectionObserver", undefined);
148	const animation = animationElement();
149	attach(animation.element);
150	expect(animation.state()).toBe("paused");
151	expect(animation.willChange()).toBe("auto");
152	expect(observers).toHaveLength(0);
153	});
154	});

apps/web/src/lib/visibleAnimation.ts created+64

...	@@ -0,0 +1,64 @@
1	interface ObservedAnimation {
2	element: HTMLElement \| SVGElement;
3	intersecting: boolean;
4	}
5
6	const animations = new Map<Element, ObservedAnimation>();
7	let observer: IntersectionObserver \| null = null;
8	let reducedMotion: MediaQueryList \| null = null;
9
10	function updateAnimation(animation: ObservedAnimation) {
11	const running =
12	animation.intersecting && document.visibilityState === "visible" && !reducedMotion?.matches;
13	animation.element.style.setProperty("--visible-animation-state", running ? "running" : "paused");
14	animation.element.style.setProperty(
15	"--visible-animation-will-change",
16	running ? "transform" : "auto",
17	);
18	}
19
20	function updateAnimations() {
21	for (const animation of animations.values()) updateAnimation(animation);
22	}
23
24	/** Attach to a stable animation container. All refs share visibility and motion listeners. */
25	export function observeVisibleAnimation(element: HTMLElement \| SVGElement \| null) {
26	if (element === null) return;
27	element.style.setProperty("--visible-animation-state", "paused");
28	element.style.setProperty("--visible-animation-will-change", "auto");
29	if (typeof IntersectionObserver === "undefined") return;
30
31	if (observer === null) {
32	reducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)");
33	reducedMotion.addEventListener("change", updateAnimations);
34	document.addEventListener("visibilitychange", updateAnimations);
35	observer = new IntersectionObserver((entries, source) => {
36	if (source !== observer) return;
37	for (const entry of entries) {
38	const animation = animations.get(entry.target);
39	if (!animation) continue;
40	animation.intersecting = entry.isIntersecting;
41	updateAnimation(animation);
42	}
43	});
44	}
45
46	const animation = { element, intersecting: false };
47	animations.set(element, animation);
48	observer.observe(element);
49
50	return () => {
51	if (animations.get(element) !== animation) return;
52	animations.delete(element);
53	observer?.unobserve(element);
54	element.style.setProperty("--visible-animation-state", "paused");
55	element.style.setProperty("--visible-animation-will-change", "auto");
56	if (animations.size === 0) {
57	observer?.disconnect();
58	observer = null;
59	reducedMotion?.removeEventListener("change", updateAnimations);
60	reducedMotion = null;
61	document.removeEventListener("visibilitychange", updateAnimations);
62	}
63	};
64	}

author	Theo Browne <me@t3.gg> 2026-09-04 19:06:21-07:00
committer	GitHub <noreply@github.com> 2026-09-04 19:06:21-07:00
log	ce4712d5b04fb998f79fe132245289191147e5d5
tree	188e6ccfd1fe9239a056400778cd098416820d20
parent	940e8233c227a186044078e99e45e1933eb525e4
signature	Signed by PGP key B5690EEEBB952194

...	@@ -33,8 +33,8 @@ import { uuidv4 } from "./uuid";	...	@@ -33,8 +33,8 @@ import { uuidv4 } from "./uuid";
33	* This module owns the server side of a composer attachment's lifecycle.	33	* This module owns the server side of a composer attachment's lifecycle.
34	* `prepareTurnAttachments` acquires pending uploads (verifying and reusing	34	* `prepareTurnAttachments` acquires pending uploads (verifying and reusing
35	* persisted ones), hands the uploaded ids back to the attachment's durable	35	* persisted ones), hands the uploaded ids back to the attachment's durable
36	* owner (queued outbox message or composer draft), and returns a release	36	* owner (queued outbox message or composer draft), and leaves their cleanup
37	* handle for after the turn consumed the bytes. Nothing outside this module	37	* to that owner after it checks shared references. Nothing outside this module
38	* mints or deletes pending uploads. The local-file side of the lifecycle is	38	* mints or deletes pending uploads. The local-file side of the lifecycle is
39	* owned by `removeThreadOutboxMessage` / the composer draft mutators, which	39	* owned by `removeThreadOutboxMessage` / the composer draft mutators, which
40	* release files through `releaseUnusedComposerAttachmentFiles`.	40	* release files through `releaseUnusedComposerAttachmentFiles`.
...	@@ -149,8 +149,6 @@ export interface PreparedTurnAttachments {	...	@@ -149,8 +149,6 @@ export interface PreparedTurnAttachments {
149	readonly draftAttachments: ReadonlyArray<DraftComposerAttachment>;	149	readonly draftAttachments: ReadonlyArray<DraftComposerAttachment>;
150	/** Every pending upload backing this turn (reused and newly minted). */	150	/** Every pending upload backing this turn (reused and newly minted). */
151	readonly pendingAttachmentIds: ReadonlyArray<string>;	151	readonly pendingAttachmentIds: ReadonlyArray<string>;
152	/** Deletes all pending uploads once the delivered turn holds the bytes. */
153	readonly releaseUploads: () => Promise<void>;
154	}	152	}
155		153
156	export type PrepareTurnAttachmentsResult =	154	export type PrepareTurnAttachmentsResult =
...	@@ -306,7 +304,6 @@ export async function prepareTurnAttachments(input: {	...	@@ -306,7 +304,6 @@ export async function prepareTurnAttachments(input: {
306	attachments,	304	attachments,
307	draftAttachments,	305	draftAttachments,
308	pendingAttachmentIds,	306	pendingAttachmentIds,
309	releaseUploads: () => releasePendingAttachmentUploads(environmentId, pendingAttachmentIds),
310	});	307	});
311		308
312	if (input.attachments.length === 0 \|\| (files.length === 0 && !input.supportsImageUploads)) {	309	if (input.attachments.length === 0 \|\| (files.length === 0 && !input.supportsImageUploads)) {

fix: restore UX after performance improvements (#9799)