refactor(navbar): navbar cluster [P6.06]

docs/product/delivery/phase-06/reviews/P6.05-subagent-review.ledger.json

@@ -26,9 +26,7 @@
       "terminatedReason": "completed",
       "findings": [],
       "probedSurfaces": [],
-      "patches": [
-        "6f9cf5c6537c6e2b82e7bf3c5021d93377f6bac6"
-      ],
+      "patches": ["6f9cf5c6537c6e2b82e7bf3c5021d93377f6bac6"],
       "schemaVersion": 1,
       "primaryAgent": "unknown",
       "runnerSelfReport": null,

docs/product/delivery/phase-06/reviews/P6.06-pr-review.triage.json

@@ -0,0 +1,10 @@
+{
+  "schemaVersion": 1,
+  "recordedAt": "2026-06-17T04:01:57.771Z",
+  "outcome": "skipped",
+  "note": "PR review disabled by policy",
+  "prBodyRefresh": {
+    "attemptedAt": "2026-06-17T04:02:00.769Z",
+    "status": "updated"
+  }
+}

docs/product/delivery/phase-06/reviews/P6.06-subagent-review.ledger.json

@@ -0,0 +1,22 @@
+{
+  "ticket": "P6.06",
+  "invocations": [
+    {
+      "runnerKind": "claude-cli",
+      "reviewedHeadSha": "2d7626a83fc3d88ec2cf3043b52b6cb65a88a8ca",
+      "outcome": "clean",
+      "completedAt": "2026-06-17T04:00:50.757Z",
+      "terminatedReason": "completed",
+      "rawOutput": "docs/product/delivery/phase-06/reviews/P6.06-subagent-review.report.md",
+      "filledPrompt": "docs/product/delivery/phase-06/reviews/P6.06-subagent-review.prompt.md",
+      "fallbackLevel": "preferred",
+      "schemaVersion": 1,
+      "primaryAgent": "claude",
+      "runnerSelfReport": null,
+      "fallbackFrom": null,
+      "findings": [],
+      "probedSurfaces": [],
+      "patches": []
+    }
+  ]
+}

docs/product/delivery/phase-06/reviews/P6.06-subagent-review.prompt.md

@@ -0,0 +1,75 @@
+You are conducting an adversarial review of a code change.
+You may add extra attack surfaces when your independent repo read finds a plausible
+ticket-relevant failure path.
+Findings outside the three finding-discipline clauses belong in **Advisory Observations** —
+anything off-scope but real is welcome there.
+Your job is not a general code review — it is a targeted attack on the behavior this ticket is supposed to
+protect. Start from the invariants and attack surfaces below, then independently inspect
+the diff and directly related implementation code for missing ticket-relevant risks. You
+are looking for paths where the ticket's intended behavior breaks, not for general
+improvements.
+
+### Ticket scope
+
+**Outcome:**
+- These 7 files use runes only: `Navbar/{Navbar,NavDropdown,NavEnd,NavLink,NavLinks,NavLogo,NavMenu}.svelte`.
+- `export let` → `$props()`; `$:` → `$derived`/`$effect`; `NavLogo`'s `<slot>` → snippet (consumer ripple owned here).
+- `$dropdown`/`$loading`/`$navigating` store auto-subscription is **kept as-is** (valid in runes mode — intentional per the stores-stay deferral).
+- Each file carries `<svelte:options runes={true}>`.
+- `grep` for legacy idioms in these files returns zero.
+
+**Review Focus from ticket:**
+- `$dropdown`/`$loading`/`$navigating` NOT converted to `$state` — confirm they remain store subscriptions (regressing this breaks the stores-stay deferral).
+- Dropdown open/close toggling and `class:dropdownVisible={$dropdown}` reactivity unchanged.
+- Smoke: mobile nav dropdown opens/closes; loading/navigating indicator still reacts.
+
+**Rationale:**
+- Red first: n/a (`Red: skip`).
+- Why this path: Navbar is a self-contained cluster and the primary consumer of the kept `writable` stores; isolating it makes the "store auto-sub stays" intent reviewable in one diff.
+- Alternative considered: converting `$dropdown`/`$loading` to `$state` runes — rejected per product-plan stores-stay deferral.
+- Deferred: routes and remaining leaves (T07).
+
+### Files touched
+
+Implementation:
+- src/lib/components/Navbar/NavDropdown.svelte
+- src/lib/components/Navbar/NavEnd.svelte
+- src/lib/components/Navbar/NavLink.svelte
+- src/lib/components/Navbar/NavLinks.svelte
+- src/lib/components/Navbar/NavLogo.svelte
+- src/lib/components/Navbar/NavMenu.svelte
+- src/lib/components/Navbar/Navbar.svelte
+
+Tests:
+- (none — Red: skip; existing Navbar.spec.ts is the guard)
+
+### Invariants to hold
+
+1. All 7 Navbar files have `<svelte:options runes={true}>` and zero legacy idioms (`export let`, `$:`, `<slot>`, `on:` event directives, legacy `svelte-ignore` directive format).
+2. `$dropdown`, `$loading`, and `$navigating` remain store auto-subscriptions (not `$state`) — the stores-stay deferral must not be silently regressed.
+3. `NavLogo`'s slot→snippet conversion (`<slot />` → `{@render children?.()}`) is consistent with its consumer usage in `Navbar.svelte` (`<NavLogo><img .../></NavLogo>` passes children as implicit snippet).
+
+### Attack surfaces to probe
+
+- `Navbar.svelte` `$effect` for dropdown close on `$media.sm`: does the effect fire correctly when `$media.sm` transitions from false to true, given that `$effect` tracks reactive reads within its body? (`$media` is a store, and `$media.sm` is a property — verify store subscription works as expected inside `$effect`.)
+- `NavLink.svelte` `$props()` destructuring with default: `isLarge = false` default — does the Svelte 5 `$props()` pattern with inline default produce the same runtime behavior as `export let isLarge = false`? Verify the type annotation `isLarge?: boolean` correctly permits the default.
+- `NavLogo.svelte` snippet passthrough: `{@render children?.()}` — optional chaining means the button renders empty if no children are passed. The only consumer is `Navbar.svelte` which always passes `<img>`. Confirm there is no call-site where NavLogo is used without children (empty button would be invisible and non-functional).
+- `NavLinks.svelte` store-filtered `$derived`: `const navUrls = $derived(TOP_LEVEL_NAV_URLS.filter((url) => url !== Url.Projects || $session))` — `$session` is a store auto-sub inside `$derived`. Confirm Svelte 5 correctly tracks store auto-subscriptions within `$derived` (this is valid but worth asserting).
+- Legacy `svelte-ignore` directive migration in `NavLinks.svelte`: old `a11y-label-has-associated-control` → new `a11y_label_has_associated_control` (underscore form). Confirm all three occurrences were updated and no legacy hyphen form remains.
+- `NavMenu.svelte` added `lang="ts"` to `<script>` — previously `<script>` (no lang). Confirm this is safe and no TS errors arise from the existing import of `iconify-icon` (which is a side-effect import).
+
+### Diff context
+
+The diff is a mechanical Svelte 4 → Svelte 5 runes migration:
+- `<svelte:options runes={true}>` added to all 7 files
+- `$: dropdownUrls = ...` → `const dropdownUrls = $derived(...)` (NavDropdown)
+- `$: navUrls = ...` → `const navUrls = $derived(...)` (NavLinks)
+- `$: if ($media.sm) { ... }` → `$effect(() => { if ($media.sm) { ... } })` (Navbar)
+- `export let label, url, isLarge = false` → `let { label, url, isLarge = false }: { ... } = $props()` (NavLink)
+- `<slot />` → `import type { Snippet }` + `let { children }: { children?: Snippet } = $props()` + `{@render children?.()}` (NavLogo)
+- `on:click` → `onclick` on all button elements
+- Legacy `<!-- svelte-ignore a11y-* -->` → `<!-- svelte-ignore a11y_* -->` in NavLinks
+
+All store subscriptions (`$dropdown`, `$loading`, `$navigating`, `$media`, `$session`, `$profile`, `$page`) are kept as-is (intentional stores-stay deferral).
+
+**Important constraint:** Do not modify any files in the worktree. Your role is advisory only — report findings and observations. The primary agent applies any patches.

docs/product/delivery/phase-06/reviews/P6.06-subagent-review.report.md

@@ -0,0 +1,98 @@
+The grep false-positives are harmless: `button:hover` is CSS, `transition:fade` is a Svelte transition directive (unchanged in Svelte 5). I have everything needed. Here is the full adversarial review.
+
+---
+
+## Adversarial Review — P6.06 Navbar Cluster Runes Migration
+
+### Invariant Verification
+
+| # | Invariant | Result |
+|---|-----------|--------|
+| 1 | All 7 files have `<svelte:options runes={true}>` | PASS |
+| 1 | Zero legacy idioms: `export let`, `$:`, `<slot>`, `on:` | PASS |
+| 2 | `$dropdown`, `$loading`, `$navigating` remain store auto-subs | PASS |
+| 3 | `NavLogo` snippet passthrough consistent with `Navbar.svelte` consumer | PASS |
+
+No legacy hyphen-form `svelte-ignore` directives remain. All 3 occurrences in `NavLinks.svelte` use the underscore form (`a11y_label_has_associated_control`, `a11y_no_noninteractive_tabindex` ×2).
+
+---
+
+### Findings
+
+#### F1 — MEDIUM | `$effect` reactive granularity is coarser than the Svelte 4 analog
+
+**File:** `Navbar.svelte:15-19`
+
+```svelte
+$effect(() => {
+  if ($media.sm) {
+    dropdown.close()
+  }
+})
+```
+
+`$media` is a `readable` store that emits a **new `MediaBreakpoints` object** whenever any of its five breakpoints change via `matchMedia` listeners. The `$effect` auto-subscribes to `$media` as a whole — not to `$media.sm` specifically. This means the effect re-runs on every breakpoint transition (including `md→lg`, `lg→xl`, etc.), not only when `sm` changes.
+
+At each re-run, if `$media.sm` is already `true` (viewport has been above 640px since last resize event), `dropdown.close()` is called redundantly. In isolation this is benign — `dropdown.close()` sets the store to `false` idempotently. However, if any resize event fires while the dropdown is intentionally open on a non-`sm` breakpoint toggle (e.g., user at 800px triggers `md` crossing), the effect fires, `$media.sm` is still `true`, and the dropdown is silently closed. This is the **same behavior as the Svelte 4 `$: if ($media.sm)` reactive statement** (which also re-ran on all `$media` changes), so it is not a regression introduced by this ticket — but it is the pre-existing behavior now made explicit.
+
+**Verdict:** Not a regression. Documenting because the attack surface question is answered: the coarser granularity is inherited from the Svelte 4 code and does not introduce new failure paths.
+
+---
+
+#### F2 — LOW | Spec guard does not exercise any of the ticket's behavioral invariants
+
+**File:** `Navbar.spec.ts:1-12`
+
+The existing spec renders `Navbar` and asserts a `<nav>` element and logo image exist. It does not exercise:
+
+- Dropdown open/close toggle via `dropdown.open()`/`dropdown.close()`
+- `$effect` firing on `$media.sm` to close the dropdown
+- `$derived` recomputing `navUrls`/`dropdownUrls` when `$session` changes
+- The snippet passthrough rendering `<img>` inside `NavLogo`'s button
+
+If the runes migration silently broke store auto-subscription inside `$derived` or `$effect`, this spec would not catch it. The test as written would pass even if all reactive behavior was dead. This is a pre-existing gap, not introduced here, but the ticket's smoke assertion ("mobile nav dropdown opens/closes; loading/navigating indicator still reacts") has **no automated guard** — only manual verification covers it.
+
+**Verdict:** Advisory observation. No ticket-scope action required since `Red: skip` was the decision, but worth noting for a follow-on hardening ticket.
+
+---
+
+#### F3 — LOW | `NavLinks.svelte` label silently empty for Home URL
+
+**File:** `NavLinks.svelte:34`
+
+```svelte
+<NavLink {url} label={url.split('/')[1]} />
+```
+
+`Url.Home` is `'/'`. `'/'.split('/')` produces `['', '']`, so `[1]` is `''` — an empty string. `NavDropdown.svelte:25` has a `|| 'Home'` fallback for exactly this case; `NavLinks.svelte` does not. If `Url.Home` appears in `TOP_LEVEL_NAV_URLS`, the top-level nav link for it renders a button with no visible label. This is **pre-existing and not introduced by this ticket**. Included here because the diff touched this line and the inconsistency between the two files is now visible in the same PR.
+
+**Verdict:** Advisory observation. Pre-existing gap.
+
+---
+
+#### F4 — INFO | `NavMenu.svelte` now TS-checked where it was previously plain JS
+
+**File:** `NavMenu.svelte:3`
+
+Adding `lang="ts"` to a `<script>` block that previously had none enables TypeScript checking for the first time in that file. The current script block is trivial (two imports, no logic), and both imports are safe. No TS errors expected. Worth noting in case a future change to this file needs to be aware it is now TS-mode from this PR forward.
+
+**Verdict:** No action. Informational only.
+
+---
+
+### Attack Surface Resolutions
+
+| Surface | Verdict |
+|---------|---------|
+| `$effect` + `$media.sm` store property read | Safe. Store auto-sub inside `$effect` tracks the whole store object; effect fires correctly when `$media` emits a new value on breakpoint change. Behavioral parity with Svelte 4. |
+| `NavLink` `$props()` inline default `isLarge = false` | Safe. Svelte 5 `$props()` with inline default is the canonical pattern; `isLarge?: boolean` correctly allows omission. |
+| `NavLogo` snippet passthrough with optional chaining | Safe. Sole consumer is `Navbar.svelte` which always passes `<img>`. No other file imports `NavLogo` (confirmed by grep). |
+| `$derived` with `$session` store auto-sub | Safe. Svelte 5 compiler recognizes `$store` inside `$derived` as a reactive dependency. `dropdownUrls`/`navUrls` will recompute correctly on session change. |
+| `svelte-ignore` directive form — 3 occurrences | All 3 use underscore form. No legacy hyphen form remains. |
+| `NavMenu` `lang="ts"` addition | Safe. `import 'iconify-icon'` is a valid TS side-effect import; no TS errors expected. |
+
+---
+
+### Summary
+
+The migration is mechanically correct. All 7 files comply with the invariants: `<svelte:options runes={true}>` present, zero legacy idioms, stores-stay deferral intact. The three `svelte-ignore` directives in `NavLinks.svelte` were all migrated to underscore form. The `NavLogo` slot→snippet conversion is correct and consistent with its only consumer. No ticket-scope bugs found. The two advisory observations (spec gap, label fallback inconsistency) are pre-existing and do not require action to close this ticket.

src/lib/components/Navbar/NavDropdown.svelte

@@ -1,11 +1,13 @@
+<svelte:options runes={true} />
+
 <script lang="ts">
   import DarkModeToggle from '$lib/components/DarkModeToggle.svelte'
   import { DROPDOWN_NAV_URLS, Url } from '$lib/constants'
   import { dropdown } from '$lib/stores/dropdown'
   import { session } from '$lib/stores/session'
   import NavLink from './NavLink.svelte'
 
-  $: dropdownUrls = DROPDOWN_NAV_URLS.filter((url) => url !== Url.Projects || $session)
+  const dropdownUrls = $derived(DROPDOWN_NAV_URLS.filter((url) => url !== Url.Projects || $session))
 </script>
 
 {#if $dropdown}

src/lib/components/Navbar/NavEnd.svelte

@@ -1,3 +1,5 @@
+<svelte:options runes={true} />
+
 <script lang="ts">
   import NavLinks from '$lib/components/Navbar/NavLinks.svelte'
   import NavMenu from '$lib/components/Navbar/NavMenu.svelte'

src/lib/components/Navbar/NavLink.svelte

@@ -1,11 +1,11 @@
+<svelte:options runes={true} />
+
 <script lang="ts">
   import { goto } from '$app/navigation'
   import { page } from '$app/stores'
   import { dropdown } from '$lib/stores/dropdown'
 
-  export let label: string
-  export let url: string
-  export let isLarge = false
+  let { label, url, isLarge = false }: { label: string; url: string; isLarge?: boolean } = $props()
 </script>
 
 <button
@@ -15,7 +15,7 @@
   class:!capitalize={isLarge}
   class:text-base={!isLarge}
   type="button"
-  on:click={async () => {
+  onclick={async () => {
     await goto(url)
     dropdown.close()
   }}

src/lib/components/Navbar/NavLinks.svelte

@@ -1,22 +1,24 @@
+<svelte:options runes={true} />
+
 <script lang="ts">
   import { TOP_LEVEL_NAV_URLS, Url } from '$lib/constants'
   import { profile } from '$lib/stores/profile'
   import { session } from '$lib/stores/session'
   import NavLink from './NavLink.svelte'
 
-  $: navUrls = TOP_LEVEL_NAV_URLS.filter((url) => url !== Url.Projects || $session)
+  const navUrls = $derived(TOP_LEVEL_NAV_URLS.filter((url) => url !== Url.Projects || $session))
 </script>
 
 <div class="flex gap-8">
   {#each navUrls as url}
     {#if $profile && url === Url.Login}
       <div class="dropdown-bottom dropdown-end dropdown relative">
-        <!-- svelte-ignore a11y-label-has-associated-control -->
-        <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+        <!-- svelte-ignore a11y_label_has_associated_control -->
+        <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
         <label tabindex="0">
           <img src={$profile.avatar_url} alt="avatar" width="46" height="46" class="rounded-full" />
         </label>
-        <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+        <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
         <ul tabindex="0" class="dropdown-content menu rounded-box !top-16 w-fit bg-base-100 shadow">
           <li>
             <a href={Url.Account} class="link-hover">Account</a>

src/lib/components/Navbar/NavLogo.svelte

@@ -1,15 +1,20 @@
+<svelte:options runes={true} />
+
 <script lang="ts">
   import { goto } from '$app/navigation'
   import { Url } from '$lib/constants'
   import { dropdown } from '$lib/stores/dropdown'
+  import type { Snippet } from 'svelte'
+
+  let { children }: { children?: Snippet } = $props()
 </script>
 
 <button
   type="button"
-  on:click={() => {
+  onclick={() => {
     dropdown.close()
     goto(Url.Home)
   }}
 >
-  <slot />
+  {@render children?.()}
 </button>

src/lib/components/Navbar/NavMenu.svelte

@@ -1,15 +1,17 @@
-<script>
+<svelte:options runes={true} />
+
+<script lang="ts">
   import { dropdown } from '$lib/stores/dropdown'
   import 'iconify-icon'
 </script>
 
 <div class="relative">
   {#if $dropdown}
-    <button type="button" on:click={dropdown.close} aria-label="close nav dropdown">
+    <button type="button" onclick={dropdown.close} aria-label="close nav dropdown">
       <iconify-icon icon="material-symbols:close-rounded"></iconify-icon>
     </button>
   {:else}
-    <button type="button" on:click={dropdown.open} aria-label="open nav dropdown">
+    <button type="button" onclick={dropdown.open} aria-label="open nav dropdown">
       <iconify-icon icon="ci:hamburger-md"></iconify-icon>
     </button>
   {/if}

src/lib/components/Navbar/Navbar.svelte

@@ -1,3 +1,5 @@
+<svelte:options runes={true} />
+
 <script lang="ts">
   import { media } from '$lib/stores/media'
   import { dropdown } from '$lib/stores/dropdown'
@@ -10,9 +12,11 @@
   import { loading } from '$lib/stores/loading'
   import logo from '$lib/assets/images/logo.webp'
 
-  $: if ($media.sm) {
-    dropdown.close()
-  }
+  $effect(() => {
+    if ($media.sm) {
+      dropdown.close()
+    }
+  })
 </script>
 
 <div