feat(stats): group dashboard tasks under root tasks with expandable subtasks

The Tasks list paged every History task, so subtasks appeared as
sibling rows even though each parent row already aggregates its whole
subtree (double-counted visually, detached from the summary cards).

- Catalog pages root tasks only; bounded-range membership is
  subtree-based (a root is listed when the root or any descendant was
  created in range), orphans promote to roots.
- DashboardTaskSummary gains childTaskIds; DashboardTaskPage gains
  childTasks carrying direct children of the page's roots.
- Reducer keeps childTasks/subtask upserts out of the visible root
  order while storing them in the normalized map.
- TaskList renders roots; expanding a root with subtasks shows an
  indented subtask list, and each subtask toggles its own API-call
  detail. Childless roots expand directly into their detail.
- Adds Playwright CT coverage for the expand interaction (jsdom mocks
  react-virtuoso and cannot exercise it).

Author: Zoo (VP)

packages/types/src/__tests__/dashboard-stats-stream.spec.ts

@@ -76,6 +76,7 @@ const validTaskSummary: DashboardTaskSummary = {
 	model: "claude-sonnet-4-20250514",
 	provider: "anthropic",
 	eventCount: 5,
+	childTaskIds: [],
 }
 
 // ── DashboardSessionPageRequest ─────────────────────────────────────────────
@@ -283,6 +284,16 @@ describe("DashboardTaskSummary", () => {
 	it("should reject a negative event count", () => {
 		expect(() => DashboardTaskSummary.parse({ ...validTaskSummary, eventCount: -1 })).toThrow()
 	})
+
+	it("should carry direct child task ids", () => {
+		const result = DashboardTaskSummary.parse({ ...validTaskSummary, childTaskIds: ["child-1", "child-2"] })
+		expect(result.childTaskIds).toEqual(["child-1", "child-2"])
+	})
+
+	it("should reject a summary missing childTaskIds", () => {
+		const { childTaskIds: _childTaskIds, ...withoutChildTaskIds } = validTaskSummary
+		expect(() => DashboardTaskSummary.parse(withoutChildTaskIds)).toThrow()
+	})
 })
 
 describe("DashboardTaskPage", () => {
@@ -300,6 +311,13 @@ describe("DashboardTaskPage", () => {
 		expect(result.tasks).toHaveLength(1)
 	})
 
+	it("should accept direct children of the page's root tasks", () => {
+		const child = { ...validTaskSummary, taskId: "child-1", childTaskIds: [] }
+		const result = DashboardTaskPage.parse({ ...validPage, childTasks: [child] })
+		expect(result.childTasks).toHaveLength(1)
+		expect(result.childTasks?.[0]?.taskId).toBe("child-1")
+	})
+
 	it("should reject a negative catalog revision", () => {
 		expect(() => DashboardTaskPage.parse({ ...validPage, catalogRevision: -1 })).toThrow()
 	})

packages/types/src/usage-stats.ts

@@ -294,6 +294,8 @@ export const DashboardTaskSummary = z.object({
 	model: z.string(),
 	provider: z.string(),
 	eventCount: z.number().int().nonnegative(),
+	/** Direct children in catalog order; empty for childless tasks. */
+	childTaskIds: z.array(z.string()),
 })
 export type DashboardTaskSummary = z.infer<typeof DashboardTaskSummary>
 
@@ -303,7 +305,10 @@ export const DashboardTaskPage = z.object({
 	requestId: z.string(),
 	/** Immutable History catalog revision used to produce this page. */
 	catalogRevision: z.number().int().nonnegative(),
+	/** Root tasks only, in catalog order. Subtasks appear in `childTasks`. */
 	tasks: z.array(DashboardTaskSummary),
+	/** Direct children of this page's root tasks, keyed via their `parentTaskId`. */
+	childTasks: z.array(DashboardTaskSummary).optional(),
 	/** Opaque host-issued cursor for the next page. */
 	cursor: z.string().optional(),
 	/** Exact catalog size for the current revision. */

src/services/stats/DashboardTaskCatalog.ts

@@ -18,6 +18,8 @@ export interface DashboardTaskCatalogSnapshot {
 	childrenByParentId: ReadonlyMap<string, readonly string[]>
 	ancestorsByTaskId: ReadonlyMap<string, readonly string[]>
 	orderedTaskIds: readonly string[]
+	/** Subset of `orderedTaskIds` holding only root tasks (no parent in the catalog). */
+	orderedRootTaskIds: readonly string[]
 }
 
 /** A deterministic page of task IDs from one catalog revision. */
@@ -112,6 +114,10 @@ export class DashboardTaskCatalog implements vscode.Disposable {
 		return this.snapshot.orderedTaskIds
 	}
 
+	get orderedRootTaskIds(): readonly string[] {
+		return this.snapshot.orderedRootTaskIds
+	}
+
 	/**
 	 * Contains descendant calculations already requested for this revision. Use
 	 * getDescendantTaskIds() to populate this lazy index.
@@ -162,14 +168,17 @@ export class DashboardTaskCatalog implements vscode.Disposable {
 	}
 
 	/**
+	 * Pages root tasks only (tasks whose parent is absent from the catalog);
+	 * subtasks reach the client through their root's `childTaskIds` instead.
+	 *
 	 * Uses a compound `(ts DESC, id DESC)` cursor. Cursors from older snapshots
 	 * are rejected so pages never combine task catalog revisions.
 	 *
-	 * When `rangeMs` is bounded, membership is filtered on the task's creation
-	 * timestamp (`HistoryItem.ts`) within the half-open `[fromMs, toMs)` range;
-	 * ordering, cursor semantics, and `totalEstimate` (now the filtered count)
-	 * are otherwise unchanged. An absent or unbounded range keeps the legacy
-	 * unfiltered behavior.
+	 * When `rangeMs` is bounded, membership is subtree-based: a root is included
+	 * when the root itself OR any of its descendants was created (HistoryItem.ts)
+	 * within the half-open `[fromMs, toMs)` range. Ordering, cursor semantics,
+	 * and `totalEstimate` (the filtered root count) are otherwise unchanged. An
+	 * absent or unbounded range keeps the legacy unfiltered behavior.
 	 */
 	getPage(
 		cursor?: string,
@@ -178,30 +187,29 @@ export class DashboardTaskCatalog implements vscode.Disposable {
 	): DashboardTaskCatalogPage {
 		const pageLimit = normalizePageLimit(limit)
 		const startIndex = cursor ? this.findPageStartIndex(this.decodeCursor(cursor)) : 0
+		const orderedRootTaskIds = this.snapshot.orderedRootTaskIds
 
 		if (!isStatsQueryRangeBounded(rangeMs)) {
-			const tasks = this.snapshot.orderedTaskIds.slice(startIndex, startIndex + pageLimit)
+			const tasks = orderedRootTaskIds.slice(startIndex, startIndex + pageLimit)
 			const lastTaskId = tasks.at(-1)
 
 			return {
 				tasks: [...tasks],
 				cursor:
-					lastTaskId && startIndex + tasks.length < this.snapshot.orderedTaskIds.length
+					lastTaskId && startIndex + tasks.length < orderedRootTaskIds.length
 						? this.encodeCursor(lastTaskId)
 						: undefined,
-				totalEstimate: this.snapshot.orderedTaskIds.length,
+				totalEstimate: orderedRootTaskIds.length,
 			}
 		}
 
-		const orderedTaskIds = this.snapshot.orderedTaskIds
 		const tasks: string[] = []
 		let totalEstimate = 0
 		let hasMore = false
 
-		for (let index = 0; index < orderedTaskIds.length; index++) {
-			const taskId = orderedTaskIds[index]
-			const item = this.snapshot.byId.get(taskId)!
-			if (!isWithinStatsQueryRange(rangeMs, item.ts)) {
+		for (let index = 0; index < orderedRootTaskIds.length; index++) {
+			const taskId = orderedRootTaskIds[index]
+			if (!this.isSubtreeWithinRange(rangeMs, taskId)) {
 				continue
 			}
 			totalEstimate += 1
@@ -250,6 +258,25 @@ export class DashboardTaskCatalog implements vscode.Disposable {
 		}, CATALOG_REBUILD_DEBOUNCE_MS)
 	}
 
+	/**
+	 * Subtree-based range membership for one catalog task: true when the task
+	 * itself or any of its descendants was created within the (bounded) range.
+	 * Used by both paging and summary upserts so membership rules never diverge.
+	 */
+	isSubtreeWithinRange(rangeMs: StatsQueryRangeMs | undefined, taskId: string): boolean {
+		const item = this.snapshot.byId.get(taskId)
+		if (item && isWithinStatsQueryRange(rangeMs, item.ts)) {
+			return true
+		}
+		for (const descendantId of this.getDescendantTaskIds(taskId)) {
+			const descendant = this.snapshot.byId.get(descendantId)
+			if (descendant && isWithinStatsQueryRange(rangeMs, descendant.ts)) {
+				return true
+			}
+		}
+		return false
+	}
+
 	private createSnapshot(revision: number): DashboardTaskCatalogSnapshot {
 		const latestItemsById = new Map<string, HistoryItem>()
 		for (const item of this.source.getAll()) {
@@ -266,6 +293,13 @@ export class DashboardTaskCatalog implements vscode.Disposable {
 		}
 
 		const orderedTaskIds = [...byId.keys()].sort((leftId, rightId) => compareTaskIds(leftId, rightId, byId))
+		// Root = no parent task, or its parent is absent from the catalog (orphan).
+		// This mirrors the childrenByParentId link condition below so every
+		// non-root task is reachable from exactly one root's subtree.
+		const orderedRootTaskIds = orderedTaskIds.filter((taskId) => {
+			const item = byId.get(taskId)!
+			return !item.parentTaskId || !byId.has(item.parentTaskId)
+		})
 		const mutableChildrenByParentId = new Map<string, string[]>()
 		for (const [taskId, item] of byId) {
 			if (!item.parentTaskId || !byId.has(item.parentTaskId)) {
@@ -297,6 +331,7 @@ export class DashboardTaskCatalog implements vscode.Disposable {
 			childrenByParentId: new ImmutableMap(childrenByParentId),
 			ancestorsByTaskId: new ImmutableMap(ancestorsByTaskId),
 			orderedTaskIds: Object.freeze(orderedTaskIds),
+			orderedRootTaskIds: Object.freeze(orderedRootTaskIds),
 		}
 		return Object.freeze(snapshot)
 	}
@@ -338,11 +373,12 @@ export class DashboardTaskCatalog implements vscode.Disposable {
 				`Cursor revision ${cursor.r} does not match catalog revision ${this.snapshot.revision}`,
 			)
 		}
-		const index = this.snapshot.orderedTaskIds.findIndex((taskId) => {
+		const orderedRootTaskIds = this.snapshot.orderedRootTaskIds
+		const index = orderedRootTaskIds.findIndex((taskId) => {
 			const item = this.snapshot.byId.get(taskId)!
 			return item.ts < cursor.ts || (item.ts === cursor.ts && taskId < cursor.id)
 		})
-		return index === -1 ? this.snapshot.orderedTaskIds.length : index
+		return index === -1 ? orderedRootTaskIds.length : index
 	}
 
 	private encodeCursor(taskId: string): string {

src/services/stats/DashboardTaskProjection.ts

@@ -9,7 +9,7 @@ import type {
 import { DashboardTaskCatalog } from "./DashboardTaskCatalog"
 import type { TaskUsageRow } from "./UsageStatsDatabase"
 import { getEffectiveCost } from "./costRecalculation"
-import { isWithinStatsQueryRange, type StatsQueryRangeMs } from "./statsQueryRange"
+import { type StatsQueryRangeMs } from "./statsQueryRange"
 
 /** Error codes emitted by the History-first Dashboard task projection. */
 export type DashboardTaskProjectionErrorCode = "DASHBOARD_TASK_PROJECTION/computeTaskDetail/001"
@@ -41,12 +41,13 @@ export interface DashboardTaskUsageReader {
 }
 
 /**
- * Pages the immutable History task catalog, batch-loads direct task usage for
- * every required subtree, then composes one summary per catalog row.
+ * Pages the immutable History task catalog (root tasks only), batch-loads
+ * direct task usage for every required subtree, then composes one summary per
+ * catalog row plus one per direct child (`childTasks`).
  *
- * When `rangeMs` is bounded, the catalog pages only tasks whose creation
- * timestamp falls inside the range and per-task figures aggregate only
- * in-range usage events. An absent or unbounded range keeps all-time behavior.
+ * When `rangeMs` is bounded, the catalog pages only roots whose subtree has a
+ * task created inside the range, and per-task figures aggregate only in-range
+ * usage events. An absent or unbounded range keeps all-time behavior.
  */
 export function computeTaskPage(
 	catalog: DashboardTaskCatalog,
@@ -59,10 +60,16 @@ export function computeTaskPage(
 	const catalogPage = catalog.getPage(cursor, limit, rangeMs)
 	const usageByTaskId = db.queryTaskUsageByTaskIds(collectPageSubtreeTaskIds(catalog, catalogPage.tasks), rangeMs)
 
+	// Direct children of this page's roots ride along so the client can render
+	// an expanded root without an extra round-trip. Their usage rows are
+	// already loaded (children are part of their root's subtree).
+	const childTaskIds = catalogPage.tasks.flatMap((taskId) => catalog.childrenByParentId.get(taskId) ?? [])
+
 	return {
 		requestId,
 		catalogRevision: catalog.catalogRevision,
 		tasks: catalogPage.tasks.map((taskId) => computeTaskSummary(catalog, taskId, usageByTaskId)),
+		childTasks: childTaskIds.map((taskId) => computeTaskSummary(catalog, taskId, usageByTaskId)),
 		cursor: catalogPage.cursor,
 		totalEstimate: catalogPage.totalEstimate,
 	}
@@ -73,8 +80,8 @@ export function computeTaskPage(
  * Callers use this for stream upserts after usage mutations without changing
  * catalog membership or pagination order.
  *
- * When `rangeMs` is bounded, tasks whose creation timestamp falls outside the
- * range are dropped (matching page membership) and figures aggregate only
+ * When `rangeMs` is bounded, tasks whose subtree has no task created inside
+ * the range are dropped (matching page membership) and figures aggregate only
  * in-range usage events.
  */
 export function computeTaskSummaries(
@@ -83,10 +90,9 @@ export function computeTaskSummaries(
 	taskIds: readonly string[],
 	rangeMs?: StatsQueryRangeMs,
 ): DashboardTaskSummary[] {
-	const knownTaskIds = [...new Set(taskIds)].filter((taskId) => {
-		const item = catalog.byId.get(taskId)
-		return item !== undefined && isWithinStatsQueryRange(rangeMs, item.ts)
-	})
+	const knownTaskIds = [...new Set(taskIds)].filter(
+		(taskId) => catalog.byId.has(taskId) && catalog.isSubtreeWithinRange(rangeMs, taskId),
+	)
 	const usageByTaskId = db.queryTaskUsageByTaskIds(collectPageSubtreeTaskIds(catalog, knownTaskIds), rangeMs)
 	return knownTaskIds.map((taskId) => computeTaskSummary(catalog, taskId, usageByTaskId))
 }
@@ -158,6 +164,7 @@ function computeTaskSummary(
 		model: subtreeUsage.model,
 		provider: subtreeUsage.provider,
 		eventCount: subtreeUsage.eventCount,
+		childTaskIds: [...(catalog.childrenByParentId.get(taskId) ?? [])],
 	}
 }
 

src/services/stats/UsageStatsStreamCoordinator.ts

@@ -559,7 +559,9 @@ export class UsageStatsStreamCoordinator {
 							state.subscription.sessionPageSize,
 							resolveStatsQueryRangeMs(state.subscription.range),
 						)
-						state.visibleTaskIds = new Set(tasks.tasks.map((task) => task.taskId))
+						state.visibleTaskIds = new Set(
+							[...tasks.tasks, ...(tasks.childTasks ?? [])].map((task) => task.taskId),
+						)
 						return {
 							requestId: state.subscription.requestId,
 							generation,
@@ -678,7 +680,9 @@ export class UsageStatsStreamCoordinator {
 										state.subscription.sessionPageSize,
 										resolveStatsQueryRangeMs(state.subscription.range),
 									)
-									state.visibleTaskIds = new Set(tasks.tasks.map((task) => task.taskId))
+									state.visibleTaskIds = new Set(
+										[...tasks.tasks, ...(tasks.childTasks ?? [])].map((task) => task.taskId),
+									)
 									return {
 										requestId: state.subscription.requestId,
 										generation,

src/services/stats/__tests__/DashboardTaskCatalog.spec.ts

@@ -225,4 +225,70 @@ describe("DashboardTaskCatalog", () => {
 
 		catalog.dispose()
 	})
+
+	it("pages root tasks only, promoting orphans whose parent is absent", () => {
+		const source = createCatalogSource([
+			makeHistoryItem({ id: "root-b", ts: 500 }),
+			makeHistoryItem({ id: "child-of-b", ts: 450, parentTaskId: "root-b" }),
+			makeHistoryItem({ id: "root-a", ts: 400 }),
+			makeHistoryItem({ id: "grandchild-of-b", ts: 350, parentTaskId: "child-of-b" }),
+			makeHistoryItem({ id: "orphan", ts: 300, parentTaskId: "missing-parent" }),
+		])
+		const catalog = new DashboardTaskCatalog(source.source)
+
+		expect(catalog.orderedRootTaskIds).toEqual(["root-b", "root-a", "orphan"])
+
+		const page = catalog.getPage()
+		expect(page.tasks).toEqual(["root-b", "root-a", "orphan"])
+		expect(page.totalEstimate).toBe(3)
+
+		catalog.dispose()
+	})
+
+	it("pages roots with cursor continuity when subtasks share the root ordering", () => {
+		const source = createCatalogSource([
+			makeHistoryItem({ id: "root-c", ts: 300 }),
+			makeHistoryItem({ id: "child-c", ts: 250, parentTaskId: "root-c" }),
+			makeHistoryItem({ id: "root-b", ts: 200 }),
+			makeHistoryItem({ id: "child-b", ts: 150, parentTaskId: "root-b" }),
+			makeHistoryItem({ id: "root-a", ts: 100 }),
+		])
+		const catalog = new DashboardTaskCatalog(source.source)
+		const traversed: string[] = []
+		let cursor: string | undefined
+
+		do {
+			const page = catalog.getPage(cursor, 2)
+			traversed.push(...page.tasks)
+			cursor = page.cursor
+		} while (cursor)
+
+		expect(traversed).toEqual(["root-c", "root-b", "root-a"])
+
+		catalog.dispose()
+	})
+
+	it("includes a root in a bounded range when any descendant was created inside it", () => {
+		const source = createCatalogSource([
+			makeHistoryItem({ id: "old-root", ts: 100 }),
+			makeHistoryItem({ id: "new-child", ts: 500, parentTaskId: "old-root" }),
+			makeHistoryItem({ id: "new-grandchild", ts: 600, parentTaskId: "new-child" }),
+			makeHistoryItem({ id: "out-root", ts: 50 }),
+			makeHistoryItem({ id: "out-child", ts: 60, parentTaskId: "out-root" }),
+			makeHistoryItem({ id: "in-root", ts: 400 }),
+			makeHistoryItem({ id: "out-child-of-in-root", ts: 700, parentTaskId: "in-root" }),
+		])
+		const catalog = new DashboardTaskCatalog(source.source)
+		const rangeMs = { fromMs: 300, toMs: 550 }
+
+		const page = catalog.getPage(undefined, 50, rangeMs)
+		// old-root: descendant new-child (500) in range -> included.
+		// out-root: root (50) and child (60) both out of range -> excluded.
+		// in-root: root (400) in range -> included even though its child is not.
+		// new-grandchild (600) is out of range but is not a root anyway.
+		expect(page.tasks).toEqual(["in-root", "old-root"])
+		expect(page.totalEstimate).toBe(2)
+
+		catalog.dispose()
+	})
 })