Modern UI port, render-based @ui tests, dev seed, layer contracts

- Port modern clean theme (DM Sans, orange accent, app-* CSS classes)
  and screen redesigns from festipod-mockups; replace sketchy Ubuntu
  theme. New shared components: BottomNav, EventCover, EventMeetingPoints,
  Toast, AvatarStack, Tag, RelevanceIcon.

- Restructure from prototyping shell to real mobile web app:
  path-based routing (History API), Gallery/DemoMode/PhoneFrame removed,
  Storybook setup for screen/component browsing.

- ConnectScreen ported from mockup (QR-based user connection); routed
  at /profile/connect, wired from FriendsListScreen.

- Dev-only auto-seed of NG wallet when empty
  (gated on NODE_ENV !== 'production'); bootstrapWallet already
  self-checks for non-empty ngSet so safe even in race conditions.

- Render-based @ui test infrastructure: happy-dom + LocalDataProvider +
  RouterProvider via src/shared/test-harness/renderHelper.tsx, exposed
  on the world as renderedDoc. world.hasText/hasField/hasElement prefer
  the rendered DOM and fall back to source for backward compatibility.

- Migrate 25 brittle @ui assertions from regex-on-source to DOM
  queries; delete implementation-detail tests (showDuplicateWarning,
  importableEvents, importedFrom — anti-patterns per the new contract).
  Update feature files where the UI changed: "Mes amis" → "Mon réseau",
  "Mes événements à venir" → "À venir" on home, Thématique removed
  from create-event wizard, etc.

- Path-based @e2e steps (pushState + popstate dispatch) replacing the
  legacy "#/demo/…" hash routing tied to the deleted Gallery.

- Add .project/knowledge/test-layer-contracts.md defining the role of
  each test layer (@ui = display with seed data + DOM, @data = mutations
  through NG broker, @e2e = critical user journeys) with anti-patterns
  and migration consequences.

Test status: 75 passed / 71 skipped (explicit "non implémenté")
/ 2 failed (pre-existing @wip on ngSet.delete() NG ORM limitation).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

CLAUDE.md

@@ -2,9 +2,7 @@
 
 # Festipod Project
 
-This project has two parts:
-1. **Festipod App** - Mobile app mockups with sketchy hand-drawn UI
-2. **Prototyping Tool** - Web app to view mockups, user stories, and BDD specs
+Mobile-first web app for discovering and sharing festival/event recommendations through trusted networks. Uses a sketchy hand-drawn UI style.
 
 ## Architecture
 
@@ -23,7 +21,7 @@ src/
       steps/                # BDD step definitions
         ui/                 # UI-layer steps
         data/               # Data-layer steps
-        e2e/                # E2E steps (planned)
+        e2e/                # E2E steps
     user/                   # User profiles, friends, sharing
       screens/              # ProfileScreen, FriendsListScreen, ShareProfileScreen, etc.
       features/
@@ -56,34 +54,38 @@ src/
     support/                # Cucumber hooks.ts, world.ts
     types/                  # TypeScript type definitions
     lib/                    # Utility functions (cn, etc.)
-  app/                      # Prototyping tool (app shell)
-    App.tsx                 # Root component with providers
-    router.tsx              # Hash-based routing
+  app/                      # App shell
+    App.tsx                 # Root component with providers + route switch
+    router.tsx              # Path-based routing (History API)
     frontend.tsx            # React entry point
-    components/             # Gallery, DemoMode, ThemeToggle, specs/
   screens/
-    index.ts                # Screen registry (imports from all modules)
+    index.ts                # Screen registry (used by Storybook)
 scripts/                    # Build scripts for parsing features
 docs/                       # Documentation
+.storybook/                 # Storybook configuration
 ```
 
 ## Key Commands
 
 ```bash
 bun run dev              # Start dev server with HMR
+bun run storybook        # Browse screens and components in Storybook
 bun run test:cucumber    # Run Cucumber tests
 bun run features:parse   # Regenerate features.ts from .feature files
 bun run steps:extract    # Extract step definitions for tooltips
 ```
 
+## Routing
+
+Path-based routing via `src/app/router.tsx`. Screens use `useNavigate()` and `useParams()` hooks. See AGENTS.md for the full route table.
+
 ## Conventions
 
-- Gherkin specs are in French (Étant donné, Quand, Alors)
+- Gherkin specs are in French (Etant donne, Quand, Alors)
 - UI labels are in French
 - User stories are prefixed US-1 to US-26
 - Screens use the sketchy component library, not Tailwind
-- Specs pages use Tailwind + Shadcn components with system font (not sketchy font)
-- GherkinHighlighter uses card-based layout, not code/text style
+- Max app width: 768px (tablet portrait)
 
 ---