Adds compose/review working animation

 - Adds a reduced-motion-aware categorizing animation behind AI loading states and surfaces review finding counts

Improves the "back/foward" button/bar in compose/review
 - Replaces small resume chips with clearer full-width resume bars that preview saved compose/review results
 - Tracks and clears resume metadata with the saved workflow state so stale counts don't linger

Author: eamodio

src/webviews/apps/plus/graph/components/detailsActions.ts

@@ -1899,6 +1899,7 @@ export class DetailsActions {
 				this.state.activeModeContext.set(null);
 				this.resources.compose.reset();
 				this.state.composeForwardAvailable.set(false);
+				this.state.composeBackPreview.set(undefined);
 				this.refreshWip();
 				void this.fetchDetails(sha, repoPath, graphReachability);
 			}
@@ -1933,6 +1934,7 @@ export class DetailsActions {
 				this.state.activeModeContext.set(null);
 				this.resources.compose.reset();
 				this.state.composeForwardAvailable.set(false);
+				this.state.composeBackPreview.set(undefined);
 				this.refreshWip();
 				void this.fetchDetails(sha, repoPath, graphReachability);
 			}

src/webviews/apps/plus/graph/components/detailsState.ts

@@ -258,6 +258,13 @@ function createTransientState() {
 	const reviewForwardAvailable = signal(false);
 	const composeForwardAvailable = signal(false);
 
+	// Preview metadata for the resume bar shown above the idle panel — derived from the
+	// orchestrator's back-snapshot so the bar can show counts (commits/files, focus areas)
+	// without re-deriving them from data the panel doesn't own. Cleared in lockstep with
+	// the *ForwardAvailable signals above.
+	const composeBackPreview = signal<{ commitCount: number; fileCount: number } | undefined>(undefined);
+	const reviewBackPreview = signal<{ findingCount: number; fileCount: number } | undefined>(undefined);
+
 	// Compose progress + apply state. `composeProgressMessage` mirrors the latest phase label
 	// streamed by the library while compose is running (cleared to undefined when the run ends).
 	// `composeApplying` is true between an apply-plan click and the IPC's resolution — drives
@@ -315,6 +322,8 @@ function createTransientState() {
 		wipStale: wipStale,
 		reviewForwardAvailable: reviewForwardAvailable,
 		composeForwardAvailable: composeForwardAvailable,
+		composeBackPreview: composeBackPreview,
+		reviewBackPreview: reviewBackPreview,
 		composeProgressMessage: composeProgressMessage,
 		composeApplying: composeApplying,
 

src/webviews/apps/plus/graph/components/detailsWorkflowController.ts

@@ -419,6 +419,22 @@ export class DetailsWorkflowController implements ReactiveController {
 				if (value != null) {
 					this._reviewBackSnapshot = value;
 					this.actions.state.reviewForwardAvailable.set(true);
+					if ('result' in value) {
+						const filesSet = new Set<string>();
+						let findingCount = 0;
+						for (const area of value.result.focusAreas) {
+							findingCount += area.findings?.length ?? 0;
+							for (const f of area.files) {
+								filesSet.add(f);
+							}
+						}
+						this.actions.state.reviewBackPreview.set({
+							findingCount: findingCount,
+							fileCount: filesSet.size,
+						});
+					} else {
+						this.actions.state.reviewBackPreview.set(undefined);
+					}
 				}
 			}
 			this.actions.resources.review.reset();
@@ -434,6 +450,7 @@ export class DetailsWorkflowController implements ReactiveController {
 		invalidateSnapshot: (): void => {
 			this._reviewBackSnapshot = undefined;
 			this.actions.state.reviewForwardAvailable.set(false);
+			this.actions.state.reviewBackPreview.set(undefined);
 		},
 	};
 
@@ -466,6 +483,11 @@ export class DetailsWorkflowController implements ReactiveController {
 				if (value != null && 'result' in value) {
 					this._composeBackSnapshot = value;
 					this.actions.state.composeForwardAvailable.set(true);
+					const totalFiles = value.result.commits.reduce((sum, c) => sum + c.files.length, 0);
+					this.actions.state.composeBackPreview.set({
+						commitCount: value.result.commits.length,
+						fileCount: totalFiles,
+					});
 				}
 			}
 			this.actions.resources.compose.reset();
@@ -479,6 +501,7 @@ export class DetailsWorkflowController implements ReactiveController {
 		invalidateSnapshot: (): void => {
 			this._composeBackSnapshot = undefined;
 			this.actions.state.composeForwardAvailable.set(false);
+			this.actions.state.composeBackPreview.set(undefined);
 		},
 	};
 

src/webviews/apps/plus/graph/components/gl-categorizing-loading-animation.css.ts

@@ -0,0 +1,103 @@
+import { css } from 'lit';
+
+export const categorizingLoadingAnimationStyles = css`
+	:host {
+		display: block;
+		position: relative;
+		width: 100%;
+		height: 100%;
+		overflow: hidden;
+		opacity: 0;
+		transition: opacity 0.6s ease-in;
+		--gl-loading-accent: var(--vscode-charts-purple, #c084fc);
+	}
+
+	:host([variant='review']) {
+		--gl-loading-accent: var(--vscode-charts-yellow, #facc15);
+	}
+
+	:host([data-ready]) {
+		opacity: 1;
+	}
+
+	.stage {
+		position: absolute;
+		inset: 0;
+	}
+
+	.bucket {
+		position: absolute;
+		border-bottom: 0.2rem solid currentColor;
+		border-radius: 0.6rem;
+		opacity: 0.55;
+		background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, currentColor 12%, transparent) 100%);
+	}
+
+	.lens {
+		position: absolute;
+		border-top: 1px solid color-mix(in srgb, var(--vscode-foreground) 12%, transparent);
+		border-bottom: 1px solid color-mix(in srgb, var(--vscode-foreground) 12%, transparent);
+		background: linear-gradient(
+			90deg,
+			transparent 0%,
+			color-mix(in srgb, var(--vscode-foreground) 4%, transparent) 50%,
+			transparent 100%
+		);
+		overflow: hidden;
+	}
+
+	.lens__scanline {
+		position: absolute;
+		left: 0;
+		right: 0;
+		top: 0;
+		height: 1px;
+		background: linear-gradient(
+			90deg,
+			transparent 0%,
+			color-mix(in srgb, var(--gl-loading-accent) 70%, transparent) 50%,
+			transparent 100%
+		);
+		animation: gl-categorizing-scanline 1.4s ease-in-out infinite alternate;
+		will-change: top, opacity;
+	}
+
+	.particle {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 0.8rem;
+		height: 0.8rem;
+		border-radius: 50%;
+		background: color-mix(in srgb, var(--vscode-foreground) 35%, transparent);
+		filter: blur(1px);
+		opacity: 0;
+		will-change: transform, opacity;
+	}
+
+	.particle--categorized {
+		filter: none;
+		width: 0.6rem;
+		height: 0.6rem;
+	}
+
+	@keyframes gl-categorizing-scanline {
+		0% {
+			top: 0;
+			opacity: 0.35;
+		}
+		50% {
+			opacity: 1;
+		}
+		100% {
+			top: calc(100% - 1px);
+			opacity: 0.35;
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		:host {
+			display: none;
+		}
+	}
+`;