Smooth account run chip motion

apps/decodex-app/Sources/DecodexApp/AccountPanelView.swift

@@ -497,6 +497,7 @@ struct AccountPanelView: View {
 				accountRows
 			}
 		}
+		.animation(PanelMotion.state, value: accountRunLayoutKey)
 	}
 
 	private var accountRows: some View {
@@ -594,6 +595,14 @@ struct AccountPanelView: View {
 		accountListContentHeight > accountListAvailableHeight + 1
 	}
 
+	private var accountRunLayoutKey: String {
+		store.accounts.map { account in
+			let runIDs = operatorRuns(for: account).map(\.id).joined(separator: ",")
+			return "\(account.id):\(runIDs)"
+		}
+		.joined(separator: "|")
+	}
+
 	private var accountListAvailableHeight: CGFloat {
 		let visibleHeight = AccountPanelLayout.activeScreenVisibleHeight()
 		let availableHeight = visibleHeight - accountPanelChromeHeight
@@ -836,6 +845,7 @@ struct AccountRowView: View {
 
 			if runs.isEmpty == false {
 				AccountRunSummaryView(runs: runs)
+					.transition(runSummaryTransition)
 			}
 
 			if account.hasUsageSummary {
@@ -858,6 +868,28 @@ struct AccountRowView: View {
 		.animation(PanelMotion.state, value: account.selected)
 		.animation(PanelMotion.state, value: account.codexActive)
 		.animation(PanelMotion.state, value: isLogoutArmed)
+		.animation(reduceMotion ? .easeOut(duration: 0.12) : PanelMotion.state, value: runIdentityKey)
+	}
+
+	@Environment(\.accessibilityReduceMotion) private var reduceMotion
+
+	private var runIdentityKey: String {
+		runs.map(\.id).joined(separator: "|")
+	}
+
+	private var runSummaryTransition: AnyTransition {
+		if reduceMotion {
+			return .opacity
+		}
+
+		return .asymmetric(
+			insertion: .opacity
+				.combined(with: .move(edge: .top))
+				.combined(with: .scale(scale: 0.98, anchor: .topLeading)),
+			removal: .opacity
+				.combined(with: .move(edge: .top))
+				.combined(with: .scale(scale: 0.98, anchor: .topLeading))
+		)
 	}
 
 	private var routeHelp: String {
@@ -885,12 +917,14 @@ struct AccountRowView: View {
 
 struct AccountRunSummaryView: View {
 	let runs: [OperatorRunStatus]
+	@Environment(\.accessibilityReduceMotion) private var reduceMotion
 
 	var body: some View {
 		ScrollView(.horizontal, showsIndicators: false) {
 			HStack(spacing: 5) {
 				ForEach(runs) { run in
 					AccountRunChipView(run: run)
+						.transition(runChipTransition)
 				}
 			}
 			.padding(.trailing, 1)
@@ -899,6 +933,25 @@ struct AccountRunSummaryView: View {
 		.frame(height: AccountRunChipLayout.height)
 		.frame(maxWidth: .infinity, alignment: .leading)
 		.accessibilityLabel("\(runs.count) running lane\(runs.count == 1 ? "" : "s")")
+		.animation(reduceMotion ? .easeOut(duration: 0.12) : PanelMotion.state, value: runIdentityKey)
+	}
+
+	private var runIdentityKey: String {
+		runs.map(\.id).joined(separator: "|")
+	}
+
+	private var runChipTransition: AnyTransition {
+		if reduceMotion {
+			return .opacity
+		}
+
+		return .asymmetric(
+			insertion: .opacity
+				.combined(with: .scale(scale: 0.88, anchor: .leading))
+				.combined(with: .move(edge: .leading)),
+			removal: .opacity
+				.combined(with: .scale(scale: 0.94, anchor: .leading))
+		)
 	}
 }
 

apps/decodex/src/orchestrator/operator_dashboard.html

@@ -3519,6 +3519,26 @@
 				}
 			}
 
+			@keyframes stable-list-item-enter {
+				from {
+					opacity: 0;
+					transform: translateY(-5px) scale(0.985);
+				}
+				to {
+					opacity: 1;
+					transform: translateY(0) scale(1);
+				}
+			}
+
+			.is-list-entering {
+				animation: stable-list-item-enter var(--medium) var(--ease) both;
+				transform-origin: top left;
+			}
+
+			.is-size-animating {
+				overflow: hidden;
+			}
+
 			@media (prefers-reduced-motion: reduce) {
 				*,
 				*::before,
@@ -5423,6 +5443,7 @@ <h2 id="recent-title">Run History</h2>
 					} else {
 						const clone = nextChild.cloneNode(true);
 						current.insertBefore(clone, cursor);
+						markStableListEnter(clone);
 						used.add(clone);
 					}
 				}
@@ -5434,11 +5455,72 @@ <h2 id="recent-title">Run History</h2>
 				}
 			}
 
+			function markStableListEnter(node) {
+				if (reducedMotionQuery.matches || !(node instanceof HTMLElement)) {
+					return;
+				}
+
+				node.classList.add("is-list-entering");
+				const clear = () => {
+					node.classList.remove("is-list-entering");
+				};
+				node.addEventListener("animationend", clear, { once: true });
+				window.setTimeout(clear, 360);
+			}
+
+			function animateStableListSize(container, startHeight) {
+				if (reducedMotionQuery.matches) {
+					return;
+				}
+
+				const endHeight = container.getBoundingClientRect().height;
+				if (Math.abs(endHeight - startHeight) < 1) {
+					return;
+				}
+
+				const previousHeight = container.style.height;
+				const previousOverflow = container.style.overflow;
+				const previousTransition = container.style.transition;
+				let cleaned = false;
+
+				const cleanup = (event) => {
+					if (event && event.propertyName !== "height") {
+						return;
+					}
+					if (cleaned) {
+						return;
+					}
+					cleaned = true;
+					container.classList.remove("is-size-animating");
+					container.style.height = previousHeight;
+					container.style.overflow = previousOverflow;
+					container.style.transition = previousTransition;
+				};
+
+				container.classList.add("is-size-animating");
+				container.style.height = `${startHeight}px`;
+				container.style.overflow = "hidden";
+				void container.offsetHeight;
+
+				window.requestAnimationFrame(() => {
+					container.style.transition = [previousTransition, "height var(--medium) var(--ease)"]
+						.filter(Boolean)
+						.join(", ");
+					container.style.height = `${endHeight}px`;
+					container.addEventListener("transitionend", cleanup, { once: true });
+					window.setTimeout(cleanup, 360);
+				});
+			}
+
 			function renderStableList(container, html) {
 				const template = document.createElement("template");
 				template.innerHTML = html.trim();
+				const startHeight = reducedMotionQuery.matches
+					? 0
+					: container.getBoundingClientRect().height;
 
 				patchChildNodes(container, template.content);
+				animateStableListSize(container, startHeight);
 			}
 
 			function pluralLabel(count, singular, plural = `${singular}s`) {

apps/decodex/src/orchestrator/tests/operator/status/dashboard.rs

@@ -256,10 +256,16 @@ fn operator_dashboard_patches_active_run_cards_without_replacing_the_list() {
 	let response = dashboard_response();
 
 	assert!(response.contains("function renderStableList(container, html)"));
+	assert!(response.contains("function animateStableListSize(container, startHeight)"));
+	assert!(response.contains("function markStableListEnter(node)"));
 	assert!(response.contains("function patchChildNodes(current, next)"));
 	assert!(response.contains("function activeRunRenderKey(run)"));
 	assert!(response.contains("data-render-key=\"${escapeHtml(renderKey)}\""));
 	assert!(response.contains("renderStableList(\n\t\t\t\t\tnodes.activeRuns,"));
+	assert!(response.contains("markStableListEnter(clone);"));
+	assert!(response.contains("container.style.height = `${startHeight}px`;"));
+	assert!(response.contains(".is-list-entering"));
+	assert!(response.contains("@keyframes stable-list-item-enter"));
 	assert!(!response.contains("nodes.activeRuns.innerHTML = runs"));
 	assert!(response.contains("return node.dataset.renderKey || node.dataset.detailKey || \"\";"));
 	assert!(response.contains("current.closest(\"details.is-animating\")"));