Move auth flow out of Login.svelte component

.gitignore

@@ -23,3 +23,4 @@ debug.log
 !/dist/css/simple-comment-style.css
 !/cypress/**/*.js
 deno.lock
+.codex

docs/archive/Priority5AuthServiceSlice10Checklist.md

@@ -0,0 +1,92 @@
+# Priority 5 Auth Service Slice 10 Checklist
+
+Status: approved
+
+Classification: approved implementation checklist
+
+Source plan: `docs/plans/Priority5AuthServiceSlice10Plan.md`
+
+Parent plan: `docs/plans/Priority5Completion.md` (Item 10: Draft a slice for removing `dispatchableStore` / `loginStateStore` logout relay behavior from `SelfDisplay.svelte`)
+
+## Scope Lock
+
+In scope:
+
+- add an explicit `authService` prop to `SelfDisplay.svelte`
+- pass the widget-scoped `authService` from `SimpleComment.svelte` to `SelfDisplay.svelte`
+- remove `SelfDisplay.svelte` use of `dispatchableStore`
+- remove `SelfDisplay.svelte` subscription to `loginStateStore`
+- use `authService.authRuntimeSnapshot` for processing state and logout-button visibility
+- call `authService.logout()` directly from `SelfDisplay.svelte`
+- keep test-writing passes separate from production implementation passes
+
+Out of scope:
+
+- removing `dispatchableStore` from `Login.svelte`
+- removing `loginStateStore` selected-tab publication from `Login.svelte`
+- removing legacy store definitions
+- removing the temporary Slice 8 auth bridge
+- changing `CommentInput.svelte`
+- changing backend/API contracts
+- choosing the final direct-props versus thin auth-service-backed store architecture
+
+## Slice Intent
+
+This slice removes the logout relay from `SelfDisplay.svelte`. After the slice, the visible user panel should observe logout availability through the injected widget-scoped `authService` and call `authService.logout()` directly. `SelfDisplay.svelte` should no longer depend on `dispatchableStore` or `loginStateStore` for logout behavior.
+
+## Atomic Checklist Items
+
+- [x] T01 `[tests]` Add fail-first `SelfDisplay.svelte` component tests for auth-service-driven logout behavior in `src/tests/frontend/components/SelfDisplay.auth-service.test.ts`.
+  - Depends on: none.
+  - Required coverage:
+    - when `authService.authRuntimeSnapshot.nextEvents` includes `LOGOUT`, the logout button is visible for a current user.
+    - clicking the logout button calls `authService.logout()` directly instead of dispatching `logoutIntent`.
+    - when auth runtime state is processing, the skeleton display remains visible.
+    - source guard proves `SelfDisplay.svelte` does not import `dispatchableStore` or `loginStateStore`.
+  - Trace:
+    - "Add fail-first component tests proving `SelfDisplay.svelte` reads auth runtime state from `authService`, calls `authService.logout()` directly, and does not import legacy relay stores." (`docs/plans/Priority5AuthServiceSlice10Plan.md`, Approach)
+    - "Pass: `SelfDisplay.svelte` component tests prove logout button visibility comes from `authService.authRuntimeSnapshot`, clicking Log out calls `authService.logout()`, and legacy relay stores are not imported." (`docs/plans/Priority5AuthServiceSlice10Plan.md`, Validation Strategy)
+    - "Clicking the logout button calls `authService.logout()` directly." (`docs/plans/Priority5AuthServiceSlice10Plan.md`, Acceptance Criteria)
+
+- [x] C01 `[frontend]` Refactor `src/components/SelfDisplay.svelte` to use injected `authService` runtime state and direct `authService.logout()` instead of legacy logout relay stores.
+  - Depends on: T01.
+  - Validated by: T01.
+  - Trace:
+    - "add `export let authService: AuthService`" (`docs/plans/Priority5AuthServiceSlice10Plan.md`, Detailed File Impact)
+    - "subscribe to `authService.authRuntimeSnapshot`" (`docs/plans/Priority5AuthServiceSlice10Plan.md`, Detailed File Impact)
+    - "call `authService.logout()` directly in `onLogoutClick`" (`docs/plans/Priority5AuthServiceSlice10Plan.md`, Detailed File Impact)
+    - "remove `dispatchableStore` and `loginStateStore` imports." (`docs/plans/Priority5AuthServiceSlice10Plan.md`, Detailed File Impact)
+
+- [x] C02 `[frontend]` Pass the widget-scoped `authService` from `src/components/SimpleComment.svelte` to `SelfDisplay.svelte`.
+  - Depends on: C01.
+  - Validated by: `yarn typecheck`.
+  - Trace:
+    - "Pass the existing widget-scoped `authService` from `SimpleComment.svelte` to `SelfDisplay.svelte`." (`docs/plans/Priority5AuthServiceSlice10Plan.md`, In Scope)
+    - "pass `{authService}` to `SelfDisplay.svelte`." (`docs/plans/Priority5AuthServiceSlice10Plan.md`, Detailed File Impact)
+    - "`SimpleComment.svelte` passes the widget-scoped `authService` to `SelfDisplay.svelte`." (`docs/plans/Priority5AuthServiceSlice10Plan.md`, Acceptance Criteria)
+
+## Behavior Slices
+
+### Slice 10A
+
+Goal: prove and implement direct logout behavior in `SelfDisplay.svelte`.
+
+Items: T01, C01
+
+Type: behavior
+
+### Slice 10B
+
+Goal: wire the composition root to provide the widget-scoped auth service to `SelfDisplay.svelte`.
+
+Items: C02
+
+Type: mechanical
+
+## Conformance QC (Checklist)
+
+- Missing from plan: none.
+- Extra beyond plan: none; each item maps to the plan's file impacts, approach, and validation strategy.
+- Atomicity fixes needed: none; each item can be checked and committed independently.
+- Validation mapping gaps: none; implementation items are covered by fail-first component tests or typecheck.
+- Pass/Fail: checklist achieves plan goals — **Pass**.

docs/archive/Priority5AuthServiceSlice10Plan.md

@@ -0,0 +1,184 @@
+# Priority 5 Auth Service Slice 10 Plan
+
+Status: approved
+
+Source backlog: `docs/RepoHealthImprovementBacklog.md` (`Priority 5`)
+
+Parent plan: `docs/plans/Priority5Completion.md` (Item 10)
+
+Related artifacts:
+
+- `docs/archive/Priority5AuthServiceSlice9Plan.md`
+- `docs/archive/Priority5AuthServiceSlice9Checklist.md`
+
+## Goal
+
+Remove the logout relay dependency from `SelfDisplay.svelte` so logout is triggered through the widget-scoped `auth-service` instead of through `dispatchableStore` and `loginStateStore`.
+
+## Intent
+
+This slice is about letting the visible user panel perform logout directly through the shared auth service.
+
+Today, `SelfDisplay.svelte` uses `loginStateStore` to decide whether auth is processing and whether logout is allowed. When the user clicks the logout button, it dispatches a `logoutIntent` event through `dispatchableStore`, and `Login.svelte` receives that event and calls `authService.logout()`. That keeps logout behavior coupled to a legacy global relay and to the login form component.
+
+After this slice, `SelfDisplay.svelte` should no longer import or use those legacy stores. It should receive the widget-scoped `authService`, observe auth runtime state from that service, and call `authService.logout()` directly when the user clicks Log out.
+
+In plain terms: the user panel should log out through the auth service, not ask the login form to do it by shouting through a shared store.
+
+## In Scope
+
+- Add an `authService` prop to `SelfDisplay.svelte`.
+- Pass the existing widget-scoped `authService` from `SimpleComment.svelte` to `SelfDisplay.svelte`.
+- Remove `SelfDisplay.svelte` imports and use of `dispatchableStore`.
+- Remove `SelfDisplay.svelte` imports and subscription to `loginStateStore`.
+- Have `SelfDisplay.svelte` observe `authService.authRuntimeSnapshot` for auth processing state and `nextEvents`.
+- Have `SelfDisplay.svelte` call `authService.logout()` directly from the logout button.
+- Preserve the current visible user display and skeleton/processing behavior.
+- Add fail-first component tests before production changes.
+
+## Out of Scope
+
+- Removing `dispatchableStore` from `Login.svelte`.
+- Removing `loginStateStore` selected-tab publication from `Login.svelte`.
+- Removing `loginStateStore`, `dispatchableStore`, or `currentUserStore` definitions.
+- Removing the temporary Slice 8 auth store bridge.
+- Changing `CommentInput.svelte`.
+- Changing backend/API contracts.
+- Choosing the final direct-props versus thin auth-service-backed store architecture for the whole widget.
+
+## Constraints
+
+- Keep `auth-service` widget-scoped; do not introduce a singleton auth-service import.
+- Keep the implementation narrow to `SelfDisplay.svelte` logout behavior and its composition-root prop wiring.
+- Keep test-writing passes separate from production implementation passes.
+- Do not edit tests during implementation unless the implementation stops and explains why a test is wrong.
+- Preserve current behavior where the logout button is visible only when auth runtime state allows `LOGOUT`.
+
+## Current State
+
+At the start of this slice:
+
+- `SelfDisplay.svelte` receives `currentUser` as a prop.
+- `SelfDisplay.svelte` imports `dispatchableStore` and dispatches `logoutIntent` from its logout button.
+- `SelfDisplay.svelte` imports `loginStateStore` to observe `state` and `nextEvents`.
+- `Login.svelte` still subscribes to `dispatchableStore` for `logoutIntent`.
+- `SimpleComment.svelte` creates the widget-scoped `authService` but does not pass it to `SelfDisplay.svelte`.
+- `auth-service.ts` already owns `logout()` and exposes `authRuntimeSnapshot`.
+
+## Detailed File Impact
+
+### `src/components/SelfDisplay.svelte`
+
+Expected role: user panel that observes auth state and delegates logout directly to `authService`.
+
+Expected changes:
+
+- add `export let authService: AuthService`,
+- subscribe to `authService.authRuntimeSnapshot`,
+- derive processing state from `authRuntimeSnapshot.state`,
+- derive logout-button visibility from `authRuntimeSnapshot.nextEvents`,
+- call `authService.logout()` directly in `onLogoutClick`,
+- clean up the auth-service subscription in `onDestroy`,
+- remove `dispatchableStore` and `loginStateStore` imports.
+
+Non-goals:
+
+- do not change avatar/user-display markup except as required by auth-service wiring.
+
+### `src/components/SimpleComment.svelte`
+
+Expected role: current composition root that owns and passes the widget-scoped auth service.
+
+Expected changes:
+
+- pass `{authService}` to `SelfDisplay.svelte`.
+
+Non-goals:
+
+- do not remove the temporary auth store bridge in this slice.
+
+### `src/components/Login.svelte`
+
+Expected role: unchanged during Slice 10.
+
+Expected changes:
+
+- no production changes expected.
+
+Non-goals:
+
+- do not remove the now-obsolete `logoutIntent` handler in this slice; leave dead relay cleanup to Slice 11.
+
+### `src/lib/svelte-stores.ts`
+
+Expected role: unchanged legacy compatibility surface.
+
+Expected changes:
+
+- none.
+
+## Approach
+
+1. Add fail-first component tests proving `SelfDisplay.svelte` reads auth runtime state from `authService`, calls `authService.logout()` directly, and does not import legacy relay stores.
+2. Wire `SelfDisplay.svelte` to the injected auth service and remove legacy store usage.
+3. Pass `authService` from `SimpleComment.svelte` to `SelfDisplay.svelte`.
+4. Stop there. Do not remove the legacy store definitions, the Slice 8 bridge, or `Login.svelte` dead relay handling.
+
+## Risks and Mitigations
+
+- Risk: this slice quietly becomes the cleanup slice by deleting legacy stores or bridge code.
+  - Mitigation: keep all legacy-store deletion and bridge cleanup deferred to Slice 11.
+
+- Risk: logout button visibility changes because `SelfDisplay.svelte` observes auth-service state instead of `loginStateStore`.
+  - Mitigation: derive visibility from the same `nextEvents` shape already bridged from `authService.authRuntimeSnapshot`.
+
+- Risk: processing skeleton behavior changes unintentionally.
+  - Mitigation: preserve the existing processing-state vocabulary and cover it with component tests.
+
+## Acceptance Criteria
+
+1. `SelfDisplay.svelte` receives `authService` as an explicit prop.
+2. `SimpleComment.svelte` passes the widget-scoped `authService` to `SelfDisplay.svelte`.
+3. `SelfDisplay.svelte` no longer imports or uses `dispatchableStore`.
+4. `SelfDisplay.svelte` no longer imports or subscribes to `loginStateStore`.
+5. Clicking the logout button calls `authService.logout()` directly.
+6. Logout button visibility still follows whether auth runtime `nextEvents` includes `LOGOUT`.
+7. Processing skeleton behavior remains based on auth runtime state.
+8. `Login.svelte` logout relay cleanup is deferred to Slice 11.
+
+## Validation Strategy
+
+Required evidence types for Slice 10:
+
+- **Component evidence**
+  - Pass: `SelfDisplay.svelte` component tests prove logout button visibility comes from `authService.authRuntimeSnapshot`, clicking Log out calls `authService.logout()`, and legacy relay stores are not imported.
+  - Fail: `SelfDisplay.svelte` still dispatches `logoutIntent` or reads `loginStateStore` for logout behavior.
+
+- **Type/build evidence**
+  - Pass: frontend typecheck succeeds after passing `authService` into `SelfDisplay.svelte`.
+  - Fail: component composition or auth-service prop typing introduces type errors.
+
+## Open Questions / Assumptions
+
+- Assumption: `SelfDisplay.svelte` should use `authService.authRuntimeSnapshot` directly rather than a new auth-state store, because the final direct-props versus thin-store architecture decision remains deferred.
+- Assumption: leaving the obsolete `Login.svelte` logout relay listener in place until Slice 11 is acceptable because this slice only removes `SelfDisplay.svelte` as a relay producer/consumer.
+- Assumption: the temporary Slice 8 auth bridge remains until Slice 11 cleanup.
+
+## Scope Guard
+
+The following work is explicitly deferred and must not be folded into Slice 10 without a separate approved plan/checklist update:
+
+- removing `dispatchableStore` handling from `Login.svelte`,
+- deleting `loginStateStore`, `currentUserStore`, or `dispatchableStore`,
+- removing the temporary Slice 8 auth bridge,
+- changing `CommentInput.svelte`,
+- redesigning the frontend auth architecture beyond explicit widget-scoped `authService` props.
+
+## Conformance QC (Plan)
+
+- Intent clarity issues: none; the plan states the user-facing goal and the narrow replacement path.
+- Missing required sections: none.
+- Ambiguities/assumptions to resolve: none blocking; cleanup work is explicitly deferred.
+- Validation strategy gaps: none; component and type/build evidence are defined.
+- Traceability readiness: ready; scope, acceptance criteria, and validation statements are quoteable under stable headings.
+- Pass/Fail: ready for checklist authoring — **Pass**.