auth-yes/tasks/complete/2026-0827.07.jul.plan.arch.hypermedia-and-vertical-slicing-1715.md
google-labs-jules[bot] a613ed2b68 feat: execute Phase 1 architectural hypermedia framework
- Bootstraps `src/core/` foundation (`db.ts`, `valkey.ts`, `spire_ffi.ts`, `main.ts`).
- Adds `auth_guards.ts` for payload capping, CSRF check, and rate limiting.
- Adds `content_negotiation.ts` and `sse_adapter.ts` for Datastar transport helpers.
- Adds `error_fragments.tsx` for standardized Datastar error morphs.
- Introduces `scripts/lint_arch.ts` to block imperative DOM usage.
- Updates `deno.json` with src workspace configs and lint commands.

Co-authored-by: mrteye <1945243+mrteye@users.noreply.github.com>
2026-08-28 01:20:01 +00:00

117 lines
5.2 KiB
Markdown

# TASK METADATA
- **Target Files:** `src/core/`, `src/features/`, `src/shared/`,
`src/tests/arch/`, `server/` (legacy), `ui/` (legacy). Note: `sdk/` and
`spire_ffi/` must remain independent top-level root modules.
- **Core Objective:** Execute a multi-phase, non-overlapping architectural
transition to a Datastar-driven Hypermedia paradigm and Vertical Feature
Slicing.
- **Dependencies:** `docs/HYPERMEDIA_ARCHITECTURE_BLUEPRINT.md`, `AGENTS.md`.
- **Additional Important Notes:** The code does not need to maintain
backwards-compatible bridges for legacy vanilla scripts during intermediate
phases; optimize for a clean, uncompromised vertical slice architecture in
`src/`.
---
## Architectural Considerations & Risks
- **Risks:**
- Moving from a separated `server/` and `ui/` structure to co-located
`src/features/` will require extensive routing and import refactoring.
- Dropping legacy imperative DOM scripts in favor of Datastar requires strict
adherence to `data-ignore` for WebAuthn micro-scripts so the DOM diffing
engine doesn't wipe critical ceremony state.
- Converting SSE streams to the typed adapter (`core/sse_adapter.ts`) might
break existing real-time UI components if payload formats are mismatched.
- **Alternatives:**
- Instead of moving to `src/`, we could restructure within `server/`. However,
adopting `src/features/` enforces a clean break from the legacy horizontally
sliced architecture and clearly demarcates the new vertical hypermedia
standard.
## Proposed Implementation
### Phase 1: Core Foundation, Tooling & Safety Guards
Establish the authoritative infrastructure, transport toolkit, and invariant
guards inside `src/core/`.
1. Create `src/core/` directory.
2. Migrate and adapt foundational integrations from `server/` (strictly
read-only reference):
- `db.ts`: PostgreSQL connection pool and queries.
- `valkey.ts`: Valkey connection and Pub/Sub broker.
- `spire_ffi.ts`: Rust SPIFFE/mTLS FFI bindings.
3. Implement `auth_guards.ts` (enforcing max 16KB payload cap, rate limiting,
and CSRF/Origin checks).
4. Implement `content_negotiation.ts` to route between Datastar HTML, CLI/JSON
clients, and shell strings.
5. Implement `sse_adapter.ts` for typed Datastar SSE streaming helper logic.
6. Implement `error_fragments.tsx` for standardized error toast and field-error
JSX morph fragments.
7. Setup `src/main.ts` with `serveStatic` for `/public/datastar-v1.x.js`.
8. Add `deno task lint:arch` in `scripts/lint_arch.ts` (blocking
`document.getElementById` and unescaped HTML) and integrate into `deno.json`.
### Phase 2: Base Vertical Slices & Shared UI
Migrate domain-agnostic presentation atoms and standard CRUD-style feature
slices.
1. Create `src/shared/ui/` with distinctive fragment names (`LayoutFragment`,
`NavbarFragment`, `ToastFragment`, `DrawerShellFragment`,
`PillGroupFragment`, `AccordionFragment`).
2. Create `src/features/auth/` and migrate `/login`, `/register`, and
`/recovery`. Extract WebAuthn ceremony scripts into `webauthn.ts` with
explicit `data-ignore` attributes.
3. Create `src/features/admin/` and migrate admin routes, SQL queries, and
fragments (`AdminUserTableFragment`, `AdminAppCardFragment`,
`RoleModalFragment`).
4. Add pure JSX unit tests: `auth.test.ts` and `admin.test.ts`.
### Phase 3: Real-Time Slices & Script Elimination
Migrate complex, interactive features and eliminate legacy imperative scripts in
favor of targeted SSE and Datastar morphs.
1. Create `src/features/events/`:
- Migrate event routing, queries, and JSX fragments
(`EventCockpitDeckFragment`, `WorkshopPassDrawerFragment`,
`GuestDrawerAttendeesFragment`).
- Implement `stream.ts` using `src/core/sse_adapter.ts` for live seat
counters bound to Valkey Pub/Sub.
2. Create `src/features/sessions/`:
- Migrate routing, queries, and fragments (`SessionTableFragment`,
`SessionHandoffCardFragment`, `DirectPassDrawerFragment`).
- Eliminate legacy `SessionsScript.tsx` completely, replacing interactive
flows with Datastar reactive attributes (`data-on-click`, `data-patch`).
3. Add pure JSX unit tests: `events.test.ts` and `sessions.test.ts`.
### Phase 4: Persistent Architectural Test Suite
Implement the invariant test harness defined in the blueprint to prevent
regression.
1. Create `src/tests/arch/`.
2. Implement `transport_efficiency.test.ts` (asserts routine mutations return
`text/html` in <2ms).
3. Implement `sse_lifecycle.test.ts` (asserts connection limits, draining, and
memory stability for 100+ concurrent live listeners).
4. Implement `proxy_buffering.test.ts` (asserts `X-Accel-Buffering: no` is
emitted).
5. Implement `error_fragment.test.ts` (asserts 4xx/5xx responses yield valid JSX
morph fragments for `#status-banner`).
6. Implement `content_negotiation.test.ts` (asserts proper dual-mode REST vs
Datastar handling) and `xss_fuzzing.test.ts` (fuzzes fragment rendering).
### Phase 5: Legacy Deprecation & Final Cleanup
Execute cleanup only after Phase 4 architectural tests and existing test suites
pass 100%.
1. Safely delete legacy `server/` and `ui/` directories.
2. Perform dead-code cleanup and dependency verification.
3. Verify all gates: `deno fmt`, `deno task lint`, `deno task check`, and
`deno test -A --no-check`.