# End-to-End Test Plan: Full Tool Chain Validation

> **Status**: Active — Tests 2 and 3 executing, Tests 1/4/5 queued
> **Created**: 2026-04-06
> **Scope**: Validate every connected tool in the CMS-aiChemist orchestration platform

## Purpose

Verify that all tools in the delivery lifecycle work together end-to-end. Each test exercises a specific cross-tool integration path while collectively covering the full pipeline from GitHub Issue intake to deployed CSA artifacts.

## Tool Inventory

| Tool | Role | Location/Access |
|------|------|-----------------|
| **GitHub** | Issue intake, PR delivery, version control | `jgatlit/CMS-aiChemist` (private) |
| **ADW** | Agent dispatch, execution context packaging | `~/apps/agent-issue-hook/` |
| **Google Stitch** | Visual ideation, variant generation | `stitch.withgoogle.com` (browser) |
| **Penpot** | Design source of truth, component authoring | `penpot.chem.dev` (self-hosted) |
| **Token Pipeline** | DTCG JSON to CSS custom properties | `packages/tokens/build.py` |
| **packages/ui** | Shared React components (Button, Card, Tabs) | `packages/ui/src/` |
| **Next.js** | Interactive surface (App Router, SSR/SSG) | `apps/web/` |
| **Astro** | Static surface (islands architecture) | `apps/cms-theme/` |
| **EmDash** | Headless CMS with SQLite adapter | Integrated into `apps/cms-theme/` |
| **CSA Pipeline** | Briefing + input form artifact generation | `~/Documents/CSA/` via `/csa-pipeline` |
| **GitReport** | Operational record of delivered changes | Downstream, reads via SSHFS + gh CLI |
| **NotebookLM** | Strategic brain, decision persistence | `ops/brain/` scripts |

## Full Delivery Lifecycle

```
GitHub Issue → ADW Queue → Research/Planning → Stitch Ideation →
Penpot Normalization → Token Export → Token Pipeline Build →
packages/ui Component → Surface Rendering (Next.js / Astro+EmDash) →
PR + Review → Merge → CSA Artifact → GitReport
```

---

## Test 1: Alert Banner Component — Stitch-to-Surface Round-Trip

**Primary tools exercised**: Stitch, Penpot, Token Pipeline, packages/ui, Next.js, Astro

**Objective**: Validate the complete design-to-code handoff chain — the #1 untested path.

### Procedure

| Phase | Tool | Action | Verification |
|-------|------|--------|-------------|
| 1. Intake | GitHub | Create Issue #3: `feat: add Alert Banner component` with `/adw` | Issue created, ADW trigger present |
| 2. Design Brief | Stitch | Generate 2+ named variants (success/warning/error/info states) | Variants saved to `design/briefs/3/` |
| 3. Promotion Gate | Stitch Rules | Validate against 7 criteria in `design/stitch-promotion-rules.json` | All 7 criteria pass |
| 4. Normalize | Penpot | Recreate on Components page with 8 states (default/hover/active/focus/disabled/loading/empty/error), semantic token naming | Component visible in Penpot project |
| 5. Token Export | DTCG JSON | Add `components.alert` group to `packages/tokens/src/tokens.json` | `build.py` generates new CSS vars |
| 6. Implement | packages/ui | Create `Alert.tsx` consuming pipeline tokens | Component renders with all 4 severity variants |
| 7. Consume | Both Surfaces | Render Alert on Next.js `/design-system` + Astro CMS page | Both surfaces build, Alert renders correctly |
| 8. Deliver | CSA | Generate CSA artifact bundle | Briefing HTML deployed, URLs return 200 |

### Pass Criteria
- Alert component renders identically on both surfaces
- All tokens trace back to DTCG JSON (zero hardcoded values)
- Stitch archive contains non-selected variants with rationale
- Penpot component has all 8 required states

### Stitch Promotion Gate Criteria (from stitch-promotion-rules.json)
1. Design aligns with stated problem_statement and requested_outcome
2. Visual direction consistent with approved Penpot token palette
3. Component structure maps to existing/planned shared UI primitives
4. Responsive behavior addressed for all target breakpoints
5. Accessibility intent documented (contrast, keyboard, screen reader)
6. At least 2 named variants explored before selection
7. Design lead explicitly approved selected variant

---

## Test 2: Blog Post Detail — EmDash Content Lifecycle

**Primary tools exercised**: EmDash, Astro, Token Pipeline, Shared UI

**Objective**: Validate CMS-to-surface rendering with real content, dynamic routes, and collection queries.

### Procedure

| Phase | Tool | Action | Verification |
|-------|------|--------|-------------|
| 1. Schema | EmDash | Verify `seed.json` has `posts` collection with 7 fields | Schema matches spec |
| 2. Content | EmDash | Add 3 real blog posts with title, excerpt, category, tags, featured flag | 4 total posts in seed (1 existing + 3 new) |
| 3. List Page | Astro | Create `src/pages/blog/index.astro` — card grid via `getEmDashCollection('posts')` | Page lists all posts |
| 4. Detail Page | Astro | Create `src/pages/blog/[slug].astro` — dynamic route via `getEmDashEntry()` | Each post has its own page |
| 5. Token Consumption | Pipeline | All styles use CSS custom properties from `packages/tokens/output/tokens.css` | Zero hardcoded color/spacing values |
| 6. Build | Astro | `npx astro build` — verify all routes generate | Blog index + 4 detail pages in output |

### Sample Content

```json
[
  {
    "id": "design-tokens-explained",
    "slug": "design-tokens-explained",
    "data": {
      "title": "Design Tokens: The Bridge Between Design and Code",
      "excerpt": "How DTCG-format tokens flow from Penpot through our pipeline into CSS custom properties.",
      "category": "engineering",
      "featured": false,
      "tags": ["tokens", "penpot", "pipeline"]
    }
  },
  {
    "id": "penpot-multi-surface",
    "slug": "penpot-multi-surface",
    "data": {
      "title": "How Penpot Powers Our Multi-Surface Architecture",
      "excerpt": "One design system, two frameworks, zero drift — the Penpot-first approach.",
      "category": "design",
      "featured": true,
      "tags": ["penpot", "design-system", "architecture"]
    }
  },
  {
    "id": "emdash-astro-cms",
    "slug": "emdash-astro-cms",
    "data": {
      "title": "Building CMS-Driven Frontends with EmDash + Astro",
      "excerpt": "From seed schema to static pages — the EmDash content lifecycle explained.",
      "category": "product",
      "featured": false,
      "tags": ["emdash", "astro", "cms"]
    }
  }
]
```

### Pass Criteria
- Astro build generates blog index + 4 blog detail pages
- `getEmDashCollection()` returns all 4 posts
- `getEmDashEntry()` returns individual posts by slug
- All CSS uses token pipeline variables
- Category badges and layout respond to token changes

---

## Test 3: Token Palette Swap — Cascade Validation

**Primary tools exercised**: Token Pipeline, Both Surfaces, Visual QA

**Objective**: Prove that a single DTCG token change cascades through every surface and component.

### Procedure

| Phase | Tool | Action | Verification |
|-------|------|--------|-------------|
| 1. Baseline | Pipeline | Record current `color.primary.base` = `#a78bfa` (violet) | Value confirmed in tokens.json |
| 2. Swap | DTCG JSON | Change primary family: base→`#00C9A7`, hover→`#00A88B`, active→`#4ECDC4`, muted→`#00D9B5` | 4 values changed |
| 3. Rebuild | Pipeline | Run `python3 build.py` | 94 tokens generated, CSS has new hex values |
| 4. Next.js Build | Next.js | `npx next build` | All routes generate successfully |
| 5. Astro Build | Astro | `npx astro build` | All routes generate successfully |
| 6. Visual Verify | Grep | Confirm `#00C9A7` appears in output CSS as primary base | Hex found |
| 7. Revert | Pipeline | Restore all 4 values to original, rebuild | Original violet values restored |
| 8. Revert Verify | Pipeline | Confirm `#a78bfa` appears in output CSS | Test is non-destructive |

### Token Changes Applied

| Token Path | Original (Violet) | Swapped (Teal) |
|-----------|-------------------|----------------|
| `color.primary.base` | `#a78bfa` | `#00C9A7` |
| `color.primary.hover` | `#8b5cf6` | `#00A88B` |
| `color.primary.active` | `#7c3aed` | `#4ECDC4` |
| `color.primary.muted` | `#6366f1` | `#00D9B5` |

### Pass Criteria
- Token rebuild produces correct CSS for both palettes
- Both surfaces build with swapped tokens (no hardcoded violations)
- Revert restores original state exactly (diff shows no changes after revert)
- Demonstrates: one DTCG change → one rebuild → all surfaces updated

---

## Test 4: Kaleido-Life Penpot Population — Cross-Project Import

**Primary tools exercised**: Penpot MCP, Token Pipeline, Multi-project architecture

**Objective**: Validate that multiple design systems can coexist and that Penpot serves as the cross-project design authority.

### Procedure

| Phase | Tool | Action | Verification |
|-------|------|--------|-------------|
| 1. Import Colors | Penpot MCP | Push 37 KL colors as Penpot library variables | Colors visible in Penpot project |
| 2. Create Components | Penpot | Create: GlassCard, GoldButton, TealButton, ScoreOrb, TierBadge | 5 components with states |
| 3. Export DTCG | Penpot | Export token JSON from Penpot | JSON file generated |
| 4. Diff | Pipeline | Compare Penpot export vs `kaleido-life-tokens/src/tokens.json` | Token values match within tolerance |

### Penpot Project Reference
- Project ID: `0a575eec-b038-81ea-8007-d3b0f442dcb7`
- File ID: `0a575eec-b038-81ea-8007-d3b0fecdc5e1`
- Pages: Components, Forms, Navigation, Layout

### Pass Criteria
- All 37 KL colors exist as Penpot library variables
- 5 components created with proper state coverage
- Exported DTCG JSON matches pipeline source to >=95% fidelity
- No naming conflicts between aiChemist base tokens and KL tokens

---

## Test 5: Full ADW Issue-to-CSA Pipeline

**Primary tools exercised**: GitHub, ADW, packages/ui, Next.js, CSA, GitReport

**Objective**: Exercise the complete delivery lifecycle from issue creation to deployed CSA artifacts — the most comprehensive test.

### Procedure

| Phase | Tool | Action | Verification |
|-------|------|--------|-------------|
| 1. Spec | ADW | Author spec at `specs/adw-feat-4-pricing-table.md` | Spec follows canonical format |
| 2. Push | Git | Commit + push spec to origin before issue creation | `git ls-tree` confirms on remote |
| 3. Issue | `/adw-submit` | Create Issue #4: `feat: add Pricing Table component` with `/adw` | Issue created, webhook fires |
| 4. Implement | Claude Code | Build PricingTable component + `/pricing` route in Next.js | Component renders, build passes |
| 5. PR | GitHub | Deliver through PR linked to Issue #4 | PR created, linked to issue |
| 6. CSA | `/csa-pipeline` | Generate briefing + input form artifacts | Both HTML files created |
| 7. Deploy | CSA FTP | Upload to `io.noboxai.com/pricing-table/` | All URLs return 200 |
| 8. Notify | CSA | Slack notification via `notify.php` | Notification delivered |
| 9. GitReport | Downstream | Verify commit history visible via GitReport | Commits appear |

### ADW Spec Required Sections
- Summary, Implementation Plan (Files Changed table), Acceptance Criteria, Verification
- `### Detailed` subsection for every file
- Testable assertions in acceptance criteria

### Pass Criteria
- Full ADW pipeline fires on issue creation
- Component builds and renders correctly
- CSA artifacts deployed and accessible (QA score >= 90)
- Cross-links validated (briefing ↔ input form ↔ submit.php)
- GitReport reflects the delivered work

---

## Test Execution Order

| Priority | Test | Dependencies | Estimated Effort |
|----------|------|-------------|-----------------|
| 1 | Test 2: EmDash Blog | None | Self-contained |
| 2 | Test 3: Token Cascade | None | Self-contained, non-destructive |
| 3 | Test 1: Alert Banner | Stitch access (browser), Penpot MCP | Requires manual Stitch interaction |
| 4 | Test 4: KL Penpot | Penpot MCP tools loaded | Requires Penpot API connectivity |
| 5 | Test 5: ADW-to-CSA | ADW pipeline running, CSA FTP creds | Full pipeline must be healthy |

## Component Role Matrix

| Component | Test 1 | Test 2 | Test 3 | Test 4 | Test 5 |
|-----------|--------|--------|--------|--------|--------|
| **Stitch** | Primary | - | - | - | - |
| **Penpot** | Normalize | - | Token source | Primary | - |
| **EmDash** | - | Primary | - | - | - |
| **Astro** | Consumer | Primary | Cascade target | - | - |
| **Next.js** | Consumer | - | Cascade target | - | Consumer |
| **Token Pipeline** | New tokens | Validates | Primary | Round-trip | Consumed |
| **ADW** | Issue intake | - | - | - | Primary |
| **CSA** | Artifact | - | - | - | Primary |
| **GitReport** | - | - | - | - | Verify |

## Success Definition

All 5 tests pass = **full tool chain validated**. The platform can:
1. Accept design briefs and generate visual variants (Stitch)
2. Normalize approved designs into tokenized components (Penpot)
3. Transform design tokens into consumable CSS (Pipeline)
4. Render CMS-driven content on static surfaces (EmDash + Astro)
5. Render interactive experiences on dynamic surfaces (Next.js)
6. Cascade single token changes through all surfaces (Pipeline)
7. Manage multiple design systems in parallel (Multi-project)
8. Deliver through GitHub PRs with full traceability (ADW)
9. Generate stakeholder communication artifacts (CSA)
10. Track delivered value operationally (GitReport)