SPEC0210 - Samples App (WASM) for SPEC0200-0209

[wendellmva]

Issue: SPEC0210 - Samples App (WASM) for SPEC0200-0209

Summary

Build a Razor WebAssembly samples app in samples/app that demos SPEC0200–SPEC0209 with clear navigation, real API integrations where available, and mock fallbacks for incomplete specs. This should be a presentation-style showcase (not production UI) with consistent, lightweight styling.

Goals

• Visual, interactive demos for key specs and scenarios.
• Pages grouped by SPEC with small scenario-driven sections.
• Live API by default; mock toggle when APIs are missing.
• Lightweight and fast to run locally.
• Consistent UI using TinyTools tokens as inspiration (not a direct copy).

MVP Scope (Phase A)

1. App shell + navigation by SPEC (0200–0209).
2. SPEC0200–0204 CRUD demo pages (Nodes/Edges/Types/Properties).
3. SPEC0205 Rule evaluation demo page.
4. SPEC0206 Vector search demo page.
5. SPEC0208 UserState tree demo page.
6. Mock/live data toggle per page.

Phase B (Post-MVP)

• SPEC0207 migration status + auth demo page.
• SPEC0209 GraphSession demo page.
• Scenario gallery cards per spec.
• Seed data helpers or guided demo flow.

Proposed Structure

• samples/app/
  • Pages/Spec0200/ … Pages/Spec0209/
  • Components/ (shared UI and layout)
  • Services/ (API client + mock providers)
  • Models/ (view models / DTOs)
  • Theme/ (tokens + base styles)

Acceptance Criteria

• App builds and runs via dotnet run with no additional setup.
• All MVP pages render with mock data.
• Live API toggle works for specs with endpoints implemented.
• Navigation between specs is stable and quick.
• Clear readme for running the samples app.

Out of Scope (for now)

• Full authentication flows and production-grade UI.
• Deep pagination/filters for CRUD beyond demo needs.
• Complex data seeding pipelines.

Open Questions

• How do we want to store the mock/live toggle (query param vs settings)?
• Default API base URL for local dev?

Checklist

• Define base layout and navigation shell
• Implement mock/live data toggle
• Build SPEC0200–0204 demo pages
• Build SPEC0205 demo page
• Build SPEC0206 demo page
• Build SPEC0208 demo page
• Add README for samples app

References

• SPEC0200–0209 docs
• TinyTools site tokens/layout (reference only)

[wendellmva]

Design brief (TinyTools-inspired):

UI layout

• Sticky header (logo, theme toggle, GitHub) + optional breadcrumb.
• Left sidebar navigation for SPEC0200–0209 pages.
• Main content container with max-width (~5xl) and card-based sections.
• Tabs styled like TinyTools (rounded pill list with muted background, active tab elevated).

Page template per SPEC

• Hero: spec title, 1–2 sentence purpose, quick status badges (mock/live).
• Tabs (min 3; recommended 4–5):
  1. Playground: interactive component (forms, tree, rule evaluator, search).
  2. User Story: render .feature file (gherkin).
  3. Spec: render spec/overview markdown.
  4. Tests: list SCxx test files + UACs with links.
  5. Trace (optional): Feature -> Scenario -> Test mapping table.

Content & cognition mapping

• Each tab explicitly states its role: “Business contract”, “Behavior”, “Verification”.
• Tests tab groups by scenario and highlights file path + test display names.

Data plumbing

• SpecManifest.json: per spec, map feature file(s), spec docs, test files, and sample endpoints.
• Mock/live toggle per page; default to mock with visible badge.

TinyTools cues

• Tokens from index.css (background, muted, primary, accent) as inspiration, not a direct copy.
• Tabs styling similar to src/components/ui/tabs.tsx.
• Layout structure similar to src/components/layout.tsx.