Overview

Overview

This plan implements the List View Component project as defined in the Design Document. The project ports grid infrastructure from the extras library to canary, creates two new cell types (memo, color), and validates the result by swapping vendored components in canary-refactor stories.

Reference Documents

• Project Definition
• Analysis of Current Code
• Design Document
• Design Completeness Assessment
• Planning Questions

Phases

The plan follows the General Workflow (steps 1-8) with the Porting Strategy waves (0-3b) nested inside step 4.

Phase	Name	Description	Deliverables	Depends On
0	Setup	Clean slate, clone stories, VRT baseline	Canary-refactor stories, VRT specs, ESLint rules	—
1	Shared Foundation	Port types, utilities, styles (Wave 0)	PaginationData, formatters, ag-theme-arda.css in canary	Phase 0
2	Cell Atoms	Port 5 cell types + create 2 new types (Wave 1)	14 cell components + tests + stories	Phase 1
3	Data Grid Molecule	Port DataGrid, SortMenuHeader, useColumnPersistence (Wave 2)	DataGrid<T> molecule + tests + stories	Phases 1, 2
4	Entity Data Grid	Port factory + hooks (Waves 3a + 3b)	createEntityDataGrid<T>(), createEntityDataGridShim<T>(), useDirtyTracking<T>(), ActionCellRenderer<T>	Phase 3
5	Integration	Swap stories, barrel exports, cleanup, VRT	Updated canary-refactor stories, canary.ts barrel, VRT pass	Phase 4
6	Report & Changelog	Completion report, CHANGELOG update	completion-report.md, CHANGELOG entry	Phase 5

Execution Strategy

Per Planning Question PQ1, the project is assessed for single-agent vs team execution.

Assessment: This project has a linear dependency chain (Phase 0 → 1 → 2 → 3 → 4 → 5). The only parallelism opportunity is within Phase 2 (7 cell types are independent of each other) and within Phase 4 (Waves 3a and 3b are sequential, but ActionCellRenderer can be built in parallel with 3a). The total estimated scope is ~30 new/ported files + ~30 test/story files.

Recommendation: Single agent working sequentially. The linear dependency chain means a team would serialize anyway. Phase 2 could benefit from parallelism (7 independent cell types), but the overhead of worktree setup and coordination exceeds the time saved for components of this size (~50-100 lines each).

Verification Gates

Each phase has entry criteria (checked via artifact inspection, not by re-running builds) and an exit gate (the commands that must succeed). The entry criteria for phase N are derived from the exit gate of phase N-1. Agents should verify entry criteria by inspecting files and checking prior terminal output — never re-run lint, tsc, or test just to confirm a previous phase succeeded.

Phase	Entry Verification (artifact inspection)	Exit Gate (commands to run)
0	Clean branch, node_modules present	npm run lint + npm run build:lib + npm run test. VRT baseline captured.
1	Canary-refactor stories exist, VRT baselines present, ESLint rule confirmed	npx tsc --noEmit + npm run lint. Formatter unit tests pass.
2	pagination.ts, formatters.ts, ag-theme-arda.css exist in canary. Phase 1 lint/tsc success confirmed.	npm run lint + npm run test. All 7 cell type stories render.
3	7 cell type directories present in canary/atoms/grid/. Phase 2 lint/test success confirmed.	npm run lint + npm run test. DataGrid stories render with all cell atoms.
4	DataGrid molecule directory complete (data-grid.tsx, sort-menu-header.tsx, barrel). Phase 3 lint/test success confirmed.	npm run lint + npm run test. Entity data grid stories render.
5	Tier 3a + 3b factories, ActionCellRenderer, canary-refactor stories all present. Phase 4 lint/test success confirmed.	npm run lint + npm run build:lib + npm run test. VRT passes.
6	Phase 5 exit gate passed (lint + build + test + VRT). Barrel exports updated. Placeholders removed.	completion-report.md exists with all 3 sections. CHANGELOG updated.