Add collapsed-project status badge to the sidebar (#2340)

* Add collapsed-project status badge to the sidebar

Collapsed project rows now surface the most urgent hidden workspace's
status as a corner badge on the project icon, instead of giving no
signal at all: a loader for running, an alert for needs_input, a dot
for attention/failed, nothing for done. Priority order (needs_input >
failed > running > attention > done) means a working project keeps
its loader even if another workspace is also awaiting review.

Every surfaced status shares one badge shell (size, ring, offset) so
the loader, alert, and dot never draw a differently-sized circle -
previously the loader/alert used a 12pt ring while the dot used a
7-9pt one with a different corner offset. The running loader is also
nudged half a point left so its visual center lands on the circle's
center rather than reading as shifted right.

Adds an e2e capture spec (run on demand, not part of CI) that seeds
every state and edge case through the mock provider and dumps DOM
geometry, for re-verifying the badge shell stays uniform.

* Add PR review gallery images for the status badge PR

Temporary evidence assets for pull request review, embedded via blob
URLs in the PR description. Safe to delete after merge.

* Swap misleading before/after PR images for clean per-state stills

This feature never shipped on main, so there is no real "before" to
compare against for a reviewer — the earlier before/after images were
an artifact of local dev iteration, not a regression fix. Replaced
with one clean still per status.

* Fatten needs-input alert and dot to fill the shared badge shell

Lucide's circle-alert only paints ~83% of its nominal size, so the
prior 10pt glyph read as smaller than the loader inside the same
14pt shell. Sized both up so all three glyphs draw the same visual
footprint against the shared ring.

* Address review: extract pure badge-content selection, drop JSDOM tests

Greptile flagged getStatusDotColorStyle's needs_input/running cases as
dead (unreachable — shouldRenderSyncedStatusLoader and an explicit
check already intercept those buckets earlier). Extracting the
selection logic into a plain-TS descriptor function
(getProjectStatusBadgeContent) makes that structural: the "dot"
variant is typed to failed|attention only, so there's no switch left
with unreachable branches.

That extraction also resolves the JSDOM component test Greptile
flagged (project-leading-visual.test.tsx used vi.hoisted/vi.mock/
createRoot mounting, all banned by docs/testing.md's two test
categories) — the pure selector is now tested directly with a plain
vitest file, no mounting needed. Dropped that test file and
use-sidebar-project-status-bucket.test.tsx (same banned pattern); the
real coverage was already redundant with sidebar-workspaces-view-model
.test.ts's existing priority-order assertions and the e2e capture
spec's real-app gating checks.

Also split a conditional branch in the e2e capture spec's assertion
loop into two deterministic loops (badge-expected vs no-badge cases)
per Greptile's third note.

* Size status-badge glyphs even so they center in the shell

The badge shell's interior is 12pt (14pt minus the 1pt ring on each
side). A centered glyph of size N sits at a (12 - N) / 2 offset, which
is fractional for odd N and gets snapped to a device-pixel boundary,
rendering visibly off-center (~1.5 device px at 3x). Drop the dot to 8pt
and the alert to 10pt so both divide the interior into whole pixels and
land dead center; Lucide's circle-alert paints ~83% of nominal, so 10pt
draws a ~8.3pt disc that matches the 8pt dot.

Also extends the on-demand capture spec to cover the failed bucket, the
priority aggregation cases, dark mode, hover, a compact viewport, and a
recorded running-to-expand transition, dumping DOM geometry that proves
every shell shares one size/offset and every even glyph centers at 0px.

* Refresh status-badge PR assets for the even-glyph sizing

Recaptures every state at the approved 8pt-dot / 10pt-alert sizing,
adds the failed bucket to the per-status set, a crosshair sizing/
centering proof, dark-mode and compact-form-factor shots, and replaces
the soft upscaled spinner GIF with a crisp one assembled from native
3x-scale frames. Drops the stale pre-sizing images.

* Add capture spec proving workspace statuses roll up to the project badge

Seeds three collapsed projects, each with several same-directory
workspaces in different buckets, so each resolves to a different
highest-priority winner (needs_input / failed / running). Films the
collapse and expand so the aggregation is provable as motion, not a
single frame.

* Add propagation recording showing statuses resolving to the project badge

* Add higher-quality mp4 of the status propagation recording

* Refactor project status badge coverage

---------

Co-authored-by: paseo-bot[bot] <266920839+paseo-bot[bot]@users.noreply.github.com>

packages/app/src/hooks/sidebar-workspaces-view-model.test.ts

@@ -1,6 +1,7 @@
 import { describe, expect, it } from "vitest";
-import type { WorkspaceDescriptor } from "@/stores/session-store";
+import type { Agent, WorkspaceDescriptor } from "@/stores/session-store";
 import type { WorkspaceStructureProject } from "@/projects/workspace-structure";
+import { buildWorkspaceAgentActivityIndex } from "@/utils/workspace-agent-activity";
 import {
   appendMissingOrderKeys,
   applyStoredOrdering,
@@ -9,9 +10,12 @@ import {
   buildSidebarProjectsFromStructure,
   computeSidebarOrderUpdates,
   createSidebarWorkspaceEntry,
+  deriveProjectStatusBucket,
   deriveSidebarLoadingState,
   shouldShowSidebarHostLabels,
+  type ProjectStatusSession,
   type SidebarProjectEntry,
+  type SidebarWorkspacePlacement,
 } from "./sidebar-workspaces-view-model";
 
 function workspaceWithForge(forge: string | undefined, prUrl: string): WorkspaceDescriptor {
@@ -664,3 +668,274 @@ describe("deriveSidebarLoadingState", () => {
     ).toEqual({ isLoading: false, isInitialLoad: false, isRevalidating: false });
   });
 });
+
+function workspacePlacement(input: {
+  serverId?: string;
+  workspaceId: string;
+  projectViewKey?: string;
+}): SidebarWorkspacePlacement {
+  const serverId = input.serverId ?? "srv";
+  const projectViewKey = input.projectViewKey ?? "project-a";
+  return {
+    workspaceKey: `${serverId}:${input.workspaceId}`,
+    serverId,
+    workspaceId: input.workspaceId,
+    projectViewKey,
+    projectName: projectViewKey,
+    projectKind: "git",
+    workspaceKind: "worktree",
+    name: input.workspaceId,
+  };
+}
+
+function agent(input: {
+  id: string;
+  workspaceId: string;
+  status: Agent["status"];
+  updatedAt?: Date;
+  parentAgentId?: string | null;
+  archivedAt?: Date | null;
+}): Agent {
+  return {
+    serverId: "srv",
+    id: input.id,
+    provider: "claude" as Agent["provider"],
+    status: input.status,
+    activeTurn: null,
+    createdAt: new Date(0),
+    updatedAt: input.updatedAt ?? new Date(1_000),
+    lastUserMessageAt: null,
+    lastActivityAt: new Date(1_000),
+    capabilities: {} as Agent["capabilities"],
+    currentModeId: null,
+    availableModes: [],
+    pendingPermissions: [],
+    persistence: null,
+    title: null,
+    cwd: "/repo",
+    workspaceId: input.workspaceId,
+    model: null,
+    parentAgentId: input.parentAgentId ?? null,
+    archivedAt: input.archivedAt ?? null,
+    labels: {},
+  };
+}
+
+function sessionWith(input: {
+  workspaces: WorkspaceDescriptor[];
+  agents?: Agent[];
+}): ProjectStatusSession {
+  return {
+    workspaces: new Map(input.workspaces.map((entry) => [entry.id, entry])),
+    workspaceAgentActivity: buildWorkspaceAgentActivityIndex(
+      new Map((input.agents ?? []).map((entry) => [entry.id, entry])),
+    ),
+  };
+}
+
+function projectWorkspace(id: string, status: WorkspaceDescriptor["status"]): WorkspaceDescriptor {
+  return workspace({
+    id,
+    name: id,
+    projectId: "project-a",
+    projectDisplayName: "project-a",
+    status,
+  });
+}
+
+describe("deriveProjectStatusBucket", () => {
+  it("is done when the project has no workspaces", () => {
+    expect(deriveProjectStatusBucket({ workspaces: [], sessions: {} })).toBe("done");
+  });
+
+  it("is done when every workspace is done", () => {
+    expect(
+      deriveProjectStatusBucket({
+        workspaces: [
+          workspacePlacement({ workspaceId: "ws-1" }),
+          workspacePlacement({ workspaceId: "ws-2" }),
+        ],
+        sessions: {
+          srv: sessionWith({
+            workspaces: [projectWorkspace("ws-1", "done"), projectWorkspace("ws-2", "done")],
+          }),
+        },
+      }),
+    ).toBe("done");
+  });
+
+  it("surfaces the most urgent workspace status in the project", () => {
+    expect(
+      deriveProjectStatusBucket({
+        workspaces: [
+          workspacePlacement({ workspaceId: "ws-1" }),
+          workspacePlacement({ workspaceId: "ws-2" }),
+          workspacePlacement({ workspaceId: "ws-3" }),
+        ],
+        sessions: {
+          srv: sessionWith({
+            workspaces: [
+              projectWorkspace("ws-1", "done"),
+              projectWorkspace("ws-2", "running"),
+              projectWorkspace("ws-3", "needs_input"),
+            ],
+          }),
+        },
+      }),
+    ).toBe("needs_input");
+  });
+
+  it("keeps a working project on running when a finished workspace also awaits review", () => {
+    expect(
+      deriveProjectStatusBucket({
+        workspaces: [
+          workspacePlacement({ workspaceId: "ws-1" }),
+          workspacePlacement({ workspaceId: "ws-2" }),
+        ],
+        sessions: {
+          srv: sessionWith({
+            workspaces: [
+              projectWorkspace("ws-1", "running"),
+              projectWorkspace("ws-2", "attention"),
+            ],
+          }),
+        },
+      }),
+    ).toBe("running");
+  });
+
+  it("surfaces needs_input over a concurrently running workspace", () => {
+    expect(
+      deriveProjectStatusBucket({
+        workspaces: [
+          workspacePlacement({ workspaceId: "ws-1" }),
+          workspacePlacement({ workspaceId: "ws-2" }),
+        ],
+        sessions: {
+          srv: sessionWith({
+            workspaces: [
+              projectWorkspace("ws-1", "needs_input"),
+              projectWorkspace("ws-2", "running"),
+            ],
+          }),
+        },
+      }),
+    ).toBe("needs_input");
+  });
+
+  it("surfaces failed over a concurrently running workspace", () => {
+    expect(
+      deriveProjectStatusBucket({
+        workspaces: [
+          workspacePlacement({ workspaceId: "ws-1" }),
+          workspacePlacement({ workspaceId: "ws-2" }),
+        ],
+        sessions: {
+          srv: sessionWith({
+            workspaces: [projectWorkspace("ws-1", "failed"), projectWorkspace("ws-2", "running")],
+          }),
+        },
+      }),
+    ).toBe("failed");
+  });
+
+  it("keeps a project on attention when only one workspace awaits review", () => {
+    expect(
+      deriveProjectStatusBucket({
+        workspaces: [
+          workspacePlacement({ workspaceId: "ws-1" }),
+          workspacePlacement({ workspaceId: "ws-2" }),
+        ],
+        sessions: {
+          srv: sessionWith({
+            workspaces: [projectWorkspace("ws-1", "attention"), projectWorkspace("ws-2", "done")],
+          }),
+        },
+      }),
+    ).toBe("attention");
+  });
+
+  it("aggregates across the hosts a project spans", () => {
+    expect(
+      deriveProjectStatusBucket({
+        workspaces: [
+          workspacePlacement({ serverId: "srv", workspaceId: "ws-1" }),
+          workspacePlacement({ serverId: "other", workspaceId: "ws-9" }),
+        ],
+        sessions: {
+          srv: sessionWith({ workspaces: [projectWorkspace("ws-1", "done")] }),
+          other: sessionWith({ workspaces: [projectWorkspace("ws-9", "running")] }),
+        },
+      }),
+    ).toBe("running");
+  });
+
+  it("skips workspaces whose session has not hydrated yet", () => {
+    expect(
+      deriveProjectStatusBucket({
+        workspaces: [
+          workspacePlacement({ workspaceId: "ws-1" }),
+          workspacePlacement({ serverId: "offline", workspaceId: "ws-2" }),
+        ],
+        sessions: {
+          srv: sessionWith({ workspaces: [projectWorkspace("ws-1", "running")] }),
+        },
+      }),
+    ).toBe("running");
+  });
+
+  it("lifts a done workspace when one of its root agents is still working", () => {
+    expect(
+      deriveProjectStatusBucket({
+        workspaces: [workspacePlacement({ workspaceId: "ws-1" })],
+        sessions: {
+          srv: sessionWith({
+            workspaces: [projectWorkspace("ws-1", "done")],
+            agents: [agent({ id: "a1", workspaceId: "ws-1", status: "running" })],
+          }),
+        },
+      }),
+    ).toBe("running");
+  });
+
+  it("ignores archived agents and subagents", () => {
+    expect(
+      deriveProjectStatusBucket({
+        workspaces: [workspacePlacement({ workspaceId: "ws-1" })],
+        sessions: {
+          srv: sessionWith({
+            workspaces: [projectWorkspace("ws-1", "done")],
+            agents: [
+              agent({
+                id: "archived",
+                workspaceId: "ws-1",
+                status: "running",
+                archivedAt: new Date(2_000),
+              }),
+              agent({
+                id: "subagent",
+                workspaceId: "ws-1",
+                status: "running",
+                parentAgentId: "a1",
+              }),
+            ],
+          }),
+        },
+      }),
+    ).toBe("done");
+  });
+
+  it("ignores agents belonging to workspaces outside the project", () => {
+    expect(
+      deriveProjectStatusBucket({
+        workspaces: [workspacePlacement({ workspaceId: "ws-1" })],
+        sessions: {
+          srv: sessionWith({
+            workspaces: [projectWorkspace("ws-1", "done"), projectWorkspace("ws-other", "done")],
+            agents: [agent({ id: "a1", workspaceId: "ws-other", status: "running" })],
+          }),
+        },
+      }),
+    ).toBe("done");
+  });
+});

packages/app/src/hooks/sidebar-workspaces-view-model.ts

@@ -8,6 +8,7 @@ import type {
   WorkspaceStructureProject,
 } from "@/projects/workspace-structure";
 import { projectDisplayNameFromProjectId } from "@/utils/project-display-name";
+import { aggregateSidebarStateBuckets } from "@/utils/sidebar-agent-state";
 import { shortenPath } from "@/utils/shorten-path";
 import type { WorkspaceAgentActivity } from "@/utils/workspace-agent-activity";
 import { resolveWorkspaceMapKeyByIdentity } from "@/utils/workspace-identity";
@@ -226,6 +227,60 @@ function getPendingInitialAgentCreateStartedAt(input: {
   return latestStartedAt;
 }
 
+export interface ProjectStatusSession {
+  workspaces: Map<string, WorkspaceDescriptor>;
+  workspaceAgentActivity: Map<string, WorkspaceAgentActivity>;
+}
+
+/**
+ * Most urgent status among a project's workspaces. Backs the status dot on a collapsed
+ * project row, which otherwise hides every workspace-level signal it contains.
+ *
+ * Workspaces the session hasn't hydrated yet are skipped rather than counted as done —
+ * an unknown workspace shouldn't drag the aggregate anywhere. Reuses the same
+ * activity-index + effective-status pipeline as per-workspace rows (one pass over the
+ * session's agents per server, not per workspace) rather than re-deriving it.
+ */
+export function deriveProjectStatusBucket(input: {
+  workspaces: readonly SidebarWorkspacePlacement[];
+  sessions: Record<string, ProjectStatusSession | undefined>;
+  pendingCreateAttempts?: Record<string, PendingCreateAttempt>;
+}): SidebarStateBucket {
+  const workspaceIdsByServer = new Map<string, string[]>();
+  for (const placement of input.workspaces) {
+    const existing = workspaceIdsByServer.get(placement.serverId);
+    if (existing) {
+      existing.push(placement.workspaceId);
+    } else {
+      workspaceIdsByServer.set(placement.serverId, [placement.workspaceId]);
+    }
+  }
+
+  const buckets: SidebarStateBucket[] = [];
+  for (const [serverId, workspaceIds] of workspaceIdsByServer) {
+    const session = input.sessions[serverId];
+    if (!session) continue;
+    for (const workspaceId of workspaceIds) {
+      const workspaceKey = resolveWorkspaceMapKeyByIdentity({
+        workspaces: session.workspaces,
+        workspaceId,
+      });
+      const workspace = workspaceKey ? session.workspaces.get(workspaceKey) : undefined;
+      if (!workspace) continue;
+      buckets.push(
+        deriveEffectiveWorkspaceStatus({
+          serverId,
+          workspace,
+          pendingCreateAttempts: input.pendingCreateAttempts,
+          workspaceAgentActivity: session.workspaceAgentActivity,
+        }).status,
+      );
+    }
+  }
+
+  return aggregateSidebarStateBuckets(buckets);
+}
+
 export function buildSidebarWorkspacePlacementModel(input: {
   projects: readonly HostProjectListItem[];
 }): SidebarWorkspacePlacementModel {

packages/app/src/hooks/use-sidebar-workspaces-list.ts

@@ -1,5 +1,9 @@
 import { useCallback, useEffect, useMemo } from "react";
+import { useStoreWithEqualityFn } from "zustand/traditional";
+import { useCreateFlowStore } from "@/stores/create-flow-store";
+import { useSessionStore } from "@/stores/session-store";
 import { useHydratedWorkspaceServerIds } from "@/stores/session-store-hooks";
+import { workspaceEqualityFns } from "@/stores/session-store-hooks/selectors";
 import { useHostProjects } from "@/projects/host-projects";
 import { getHostRuntimeStore, useHostRegistryLoaded, useHosts } from "@/runtime/host-runtime";
 import { useSidebarOrderStore } from "@/stores/sidebar-order-store";
@@ -7,11 +11,15 @@ import { useSidebarViewStore } from "@/stores/sidebar-view-store";
 import {
   buildSidebarWorkspacePlacementModel,
   computeSidebarOrderUpdates,
+  createSidebarWorkspaceEntry,
+  deriveProjectStatusBucket,
   deriveSidebarLoadingState,
+  type ProjectStatusSession,
   type SidebarProjectEntry,
   type SidebarWorkspaceEntry,
   type SidebarWorkspacePlacement,
 } from "./sidebar-workspaces-view-model";
+import type { SidebarStateBucket } from "@/utils/sidebar-agent-state";
 
 export {
   appendMissingOrderKeys,
@@ -21,6 +29,7 @@ export {
   createSidebarWorkspaceEntry,
   buildSidebarWorkspacePlacementModel,
   computeSidebarOrderUpdates,
+  deriveProjectStatusBucket,
   deriveSidebarLoadingState,
   shouldShowSidebarHostLabels,
   type SidebarLoadingState,
@@ -33,6 +42,43 @@ export {
   type SidebarWorkspaceEntry,
 } from "./sidebar-workspaces-view-model";
 
+/**
+ * Aggregate status for a project's workspaces, for the collapsed project row.
+ *
+ * `SidebarProjectEntry` is structural — it carries workspace identity but no status — and
+ * `ProjectBlock` is memoized on that stable reference, so the row can't learn about a
+ * child's status without its own subscription. Returns a primitive, so status churn in a
+ * project only re-renders the row when the aggregate actually moves.
+ *
+ * Pass `enabled: false` while the project is expanded: the child rows show their own dots
+ * and the selector is pure cost.
+ */
+export function useSidebarProjectStatusBucket(input: {
+  workspaces: readonly SidebarWorkspacePlacement[];
+  enabled: boolean;
+}): SidebarStateBucket | null {
+  const { workspaces, enabled } = input;
+  const pendingCreateAttempts = useStoreWithEqualityFn(
+    useCreateFlowStore,
+    (state) => state.pendingByDraftId,
+    workspaceEqualityFns.deep,
+  );
+
+  const selector = useCallback(
+    (state: { sessions: Record<string, ProjectStatusSession | undefined> }) => {
+      if (!enabled) return null;
+      return deriveProjectStatusBucket({
+        workspaces,
+        sessions: state.sessions,
+        pendingCreateAttempts,
+      });
+    },
+    [enabled, pendingCreateAttempts, workspaces],
+  );
+
+  return useStoreWithEqualityFn(useSessionStore, selector, Object.is);
+}
+
 const EMPTY_ORDER: string[] = [];
 const EMPTY_PROJECTS: SidebarProjectEntry[] = [];
 const EMPTY_WORKSPACES: SidebarWorkspacePlacement[] = [];